/*
Theme Name: North & Noble
Theme URI: https://northandnoblemoving.com
Author: North & Noble Moving Solutions
Description: Custom premium WordPress theme for North & Noble Moving Solutions.
Version: 0.2.0
Text Domain: north-noble
Requires at least: 6.0
Requires PHP: 8.0
License: Proprietary
*/

:root {
  --nn-forest: #0F2D22;
  --nn-gold: #C8A15A;
  --nn-ivory: #F4F1E8;
  --nn-charcoal: #1C1C1C;
  --nn-stone: #D9D6CE;
  --nn-white: #FFFFFF;
  --nn-muted: #555B57;
  --nn-shadow: 0 18px 50px rgba(15,45,34,.12);
  --nn-radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--nn-charcoal);
  background: var(--nn-ivory);
  font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
.nn-container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }

.nn-skip-link { position:fixed; left:16px; top:16px; z-index:9999; padding:12px 16px; background:#fff; color:var(--nn-forest); border:2px solid var(--nn-gold); transform:translateY(-150%); transition:transform .15s ease; }
.nn-skip-link:focus { transform:translateY(0); }
:where(a,button,input,select,textarea):focus-visible { outline:3px solid #E6BD70; outline-offset:3px; }

.nn-topbar { background: #0a2119; color: rgba(255,255,255,.82); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.nn-topbar-inner { min-height: 38px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.nn-site-header { position: sticky; top: 0; z-index: 50; background: rgba(15,45,34,.96); backdrop-filter: blur(12px); color: var(--nn-white); border-bottom: 1px solid rgba(200,161,90,.18); }
.nn-header-inner { min-height: 84px; display:flex; align-items:center; justify-content:space-between; gap:32px; }
.nn-brand { display:flex; align-items:center; gap:13px; }
.nn-mark { width:46px; height:46px; border:1px solid var(--nn-gold); border-radius:50%; display:grid; place-items:center; font-family:"Playfair Display", serif; color:var(--nn-gold); font-size:18px; letter-spacing:-.06em; }
.nn-wordmark strong { display:block; font-family:"Playfair Display", serif; font-size:21px; letter-spacing:.04em; }
.nn-wordmark span { display:block; margin-top:-2px; color:var(--nn-gold); font-size:9px; letter-spacing:.3em; text-transform:uppercase; }
.nn-nav { display:flex; align-items:center; gap:26px; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.nn-nav a { opacity:.96; }
.nn-nav a:hover { color:var(--nn-gold); }
.nn-button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 24px; border:1px solid var(--nn-gold); background:var(--nn-gold); color:#10251d; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; transition:.2s ease; }
.nn-button:hover { transform:translateY(-1px); filter:brightness(1.04); }
.nn-button--ghost { background:transparent; color:var(--nn-white); }
.nn-menu-toggle { display:none; min-width:44px; min-height:44px; background:none; border:0; color:#fff; font-size:26px; cursor:pointer; }

.nn-hero { position:relative; min-height:690px; display:grid; align-items:center; color:white; overflow:hidden; background: linear-gradient(90deg, rgba(7,27,20,.92) 0%, rgba(15,45,34,.82) 48%, rgba(15,45,34,.35) 72%, rgba(15,45,34,.1) 100%), radial-gradient(circle at 78% 26%, rgba(200,161,90,.25), transparent 22%), linear-gradient(135deg, #1f4939 0%, #0d261d 60%, #243d35 100%); }
.nn-hero::after { content:""; position:absolute; inset:auto -10% -180px 40%; height:420px; border:1px solid rgba(200,161,90,.18); border-radius:50%; transform:rotate(-8deg); }
.nn-hero-grid { position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .75fr; gap:70px; align-items:end; padding:105px 0 95px; }
.nn-eyebrow { color:var(--nn-gold); font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; margin-bottom:18px; }
.nn-hero h1 { margin:0; font-family:"Playfair Display", serif; font-weight:500; font-size:clamp(58px, 7.4vw, 106px); line-height:.9; letter-spacing:-.035em; }
.nn-hero h1 em { color:var(--nn-gold); font-style:normal; }
.nn-hero-copy { align-self:end; padding-bottom:10px; max-width:430px; color:rgba(255,255,255,.92); font-size:18px; }
.nn-hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; }

.nn-trust-strip { background:var(--nn-forest); color:white; border-top:1px solid rgba(200,161,90,.18); }
.nn-trust-grid { display:grid; grid-template-columns:repeat(5,1fr); }
.nn-trust-item { padding:25px 18px; border-right:1px solid rgba(255,255,255,.1); text-align:center; }
.nn-trust-item:last-child { border-right:0; }
.nn-trust-icon { color:var(--nn-gold); font-size:19px; margin-bottom:7px; }
.nn-trust-item strong { display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.nn-trust-item span { display:block; color:rgba(255,255,255,.72); font-size:11px; margin-top:4px; }

.nn-section { padding:92px 0; }
.nn-section--white { background:#fff; }
.nn-section--forest { background:var(--nn-forest); color:white; }
.nn-section-title { text-align:center; max-width:720px; margin:0 auto 46px; }
.nn-section-title h2 { margin:0; font-family:"Playfair Display", serif; font-weight:500; font-size:clamp(38px,5vw,62px); line-height:1.02; }
.nn-section-title p { color:var(--nn-muted); margin:16px auto 0; max-width:620px; }
.nn-section--forest .nn-section-title p { color:rgba(255,255,255,.74); }
.nn-text-link { color:#6F5422; font-weight:700; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }

.nn-services { display:grid; grid-template-columns:repeat(5,1fr); background:#fff; border:1px solid #e8e4dc; box-shadow:var(--nn-shadow); }
.nn-service { padding:34px 24px 30px; min-height:265px; border-right:1px solid #e8e4dc; display:flex; flex-direction:column; }
.nn-service:last-child { border-right:0; }
.nn-service-icon { width:42px; height:42px; color:var(--nn-gold); font-size:26px; margin-bottom:28px; }
.nn-service h3 { font-size:13px; letter-spacing:.08em; text-transform:uppercase; margin:0 0 13px; }
.nn-service p { color:#545454; font-size:13px; margin:0 0 20px; }
.nn-service a { margin-top:auto; color:#765820; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; text-decoration:underline; text-underline-offset:3px; }

.nn-standard-grid { display:grid; grid-template-columns:.85fr 1fr; gap:80px; align-items:center; }
.nn-standard-copy h2 { font-family:"Playfair Display", serif; font-size:54px; font-weight:500; line-height:1.02; margin:0 0 20px; }
.nn-standard-copy p { color:#555b57; font-size:17px; }
.nn-checks { display:grid; grid-template-columns:1fr 1fr; gap:14px 28px; margin-top:34px; }
.nn-check { display:flex; align-items:flex-start; gap:12px; font-size:14px; }
.nn-check b { color:#765820; }
.nn-photo-panel { min-height:520px; border-radius:var(--nn-radius); overflow:hidden; position:relative; background: linear-gradient(180deg, rgba(15,45,34,.08), rgba(15,45,34,.78)), linear-gradient(135deg, #d8d0c1 0%, #9ba99f 48%, #2e5546 100%); box-shadow:var(--nn-shadow); }
.nn-photo-panel::before { content:"N&N"; position:absolute; right:24px; bottom:20px; font-family:"Playfair Display",serif; color:rgba(255,255,255,.88); font-size:42px; }
.nn-photo-note { position:absolute; left:26px; bottom:28px; right:100px; color:white; font-family:"Playfair Display",serif; font-size:27px; line-height:1.15; }

.nn-quote { display:grid; grid-template-columns:.85fr 1.15fr; background:#fff; box-shadow:var(--nn-shadow); }
.nn-quote-intro { background:var(--nn-forest); color:white; padding:58px; }
.nn-quote-intro h2 { font-family:"Playfair Display",serif; font-weight:500; font-size:49px; margin:0 0 18px; line-height:1; }
.nn-quote-intro p { color:rgba(255,255,255,.78); }
.nn-quote-form { padding:48px 52px; }
.nn-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.nn-field label { display:block; margin-bottom:7px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.nn-field input, .nn-field select, .nn-field textarea { width:100%; border:1px solid #bdb9af; background:#fbfaf7; padding:14px 15px; min-height:50px; font:inherit; color:#222; outline:none; }
.nn-field input:focus, .nn-field select:focus, .nn-field textarea:focus { border-color:#8A6728; }
.nn-field--full { grid-column:1 / -1; }

.nn-area-band { padding:44px 0; background:#0a2119; color:white; text-align:center; position:relative; overflow:hidden; }
.nn-area-band::before { content:""; position:absolute; width:680px; height:180px; left:50%; bottom:-120px; transform:translateX(-50%); border:1px solid rgba(200,161,90,.26); border-radius:50%; }
.nn-area-band small { display:block; color:var(--nn-gold); letter-spacing:.18em; text-transform:uppercase; margin-bottom:8px; }
.nn-area-band strong { font-family:"Playfair Display",serif; font-size:28px; font-weight:500; }

.nn-footer { background:#071a14; color:white; padding:62px 0 28px; }
.nn-footer-grid { display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:48px; }
.nn-footer h4, .nn-footer-heading { color:var(--nn-gold); font-family:inherit; font-size:11px; font-weight:700; letter-spacing:.12em; line-height:1.4; text-transform:uppercase; margin:0 0 17px; }
.nn-footer-intro { margin-top:18px; max-width:390px; }
.nn-footer p, .nn-footer li, .nn-footer a { color:rgba(255,255,255,.76); font-size:13px; }
.nn-footer a:hover, .nn-footer a:focus-visible { color:#fff; }
.nn-footer ul { list-style:none; padding:0; margin:0; }
.nn-footer li { margin:8px 0; }
.nn-footer-bottom { border-top:1px solid rgba(255,255,255,.1); margin-top:44px; padding-top:22px; display:flex; justify-content:space-between; color:rgba(255,255,255,.58); font-size:11px; }

.nn-page-hero { padding:90px 0 70px; background:var(--nn-forest); color:white; }
.nn-page-hero h1 { font-family:"Playfair Display",serif; font-size:60px; font-weight:500; margin:0; }
.nn-content { padding:70px 0; background:white; }
.nn-content article { max-width:820px; margin:auto; }
.nn-content article a { color:#6F5422; font-weight:700; text-decoration:underline; text-underline-offset:3px; }

@media (max-width: 980px) {
  .nn-nav { display:none; position:absolute; left:0; right:0; top:84px; background:var(--nn-forest); padding:24px 20px; flex-direction:column; align-items:flex-start; }
  .nn-nav.is-open { display:flex; box-shadow:0 18px 35px rgba(0,0,0,.24); }
  .nn-nav a { width:100%; padding:8px 0; }
  .nn-nav .nn-button { padding-left:24px; padding-right:24px; }
  .nn-menu-toggle { display:block; }
  .nn-topbar { display:none; }
  .nn-hero-grid { grid-template-columns:1fr; gap:35px; padding:82px 0 78px; }
  .nn-hero-copy { max-width:620px; }
  .nn-trust-grid { grid-template-columns:1fr 1fr; }
  .nn-trust-item:nth-child(5) { grid-column:1 / -1; }
  .nn-services { grid-template-columns:1fr 1fr; }
  .nn-service { border-bottom:1px solid #e8e4dc; }
  .nn-standard-grid, .nn-quote { grid-template-columns:1fr; }
  .nn-footer-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width: 640px) {
  .nn-container { width:min(100% - 26px, 1180px); }
  .nn-header-inner { min-height:72px; }
  .nn-wordmark strong { font-size:17px; }
  .nn-wordmark span { font-size:8px; }
  .nn-mark { width:40px; height:40px; }
  .nn-nav { top:72px; }
  .nn-hero { min-height:auto; }
  .nn-hero-grid { padding:66px 0 58px; }
  .nn-hero h1 { font-size:56px; }
  .nn-hero-copy { font-size:15px; }
  .nn-button { width:100%; }
  .nn-trust-grid { grid-template-columns:1fr; }
  .nn-trust-item { border-right:0; border-bottom:1px solid rgba(255,255,255,.1); }
  .nn-trust-item:nth-child(5) { grid-column:auto; }
  .nn-section { padding:68px 0; }
  .nn-services { grid-template-columns:1fr; }
  .nn-service { border-right:0; min-height:220px; }
  .nn-standard-grid { gap:38px; }
  .nn-standard-copy h2 { font-size:42px; }
  .nn-checks { grid-template-columns:1fr; }
  .nn-photo-panel { min-height:390px; }
  .nn-quote-intro, .nn-quote-form { padding:36px 24px; }
  .nn-form-grid { grid-template-columns:1fr; }
  .nn-field--full { grid-column:auto; }
  .nn-footer-grid { grid-template-columns:1fr; }
  .nn-footer-bottom { flex-direction:column; gap:8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after {
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
}
