/* NOMAD Premium Override — re-skins the existing wireframe site with Variant A brand tokens.
   Loads AFTER styles.css so it wins. Preserves all structure / JSX. */

/* iOS Safari "font boosting" inflates small designed text (12px buttons, mono
   labels) unpredictably on real devices — lock text sizes to the stylesheet. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

:root {
  /* Re-map existing tokens to NOMAD palette */
  --bg: #F0E9DC;            /* warm sand background */
  --surface: #F5EFE2;        /* warm ivory card (was cold #F8F9FA) */
  --surface-2: #E6DCCB;      /* premium sand */
  --surface-3: #DCD0BB;
  --line: #C8BCA4;
  --line-2: #A89A82;
  --ink: #1D1D1B;            /* deep graphite */
  --ink-2: #4A4845;
  --ink-3: #615C53;        /* darkened for AA on warm surfaces (was #807D78) */
  --ink-4: #8E8779;        /* darkened for warm surfaces (was #B8B3AB) */
  --accent: #6A1C28;         /* premium burgundy */
  --accent-soft: #E6DCCB;
  --accent-ink: #6A1C28;
}

/* Typography */
.wf {
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wf-serif {
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif !important;
  letter-spacing: -0.015em;
  font-feature-settings: "liga" 1, "dlig" 1;
  font-weight: 500;
}

.wf-mono {
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-size: 11px;
  letter-spacing: 0.16em;
  font-weight: 500;
  text-transform: uppercase;
}

/* Buttons — sharp, uppercase, premium */
.wf-btn {
  border-radius: 0 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  padding: 16px 28px;
  transition: all 0.2s ease;
}
.wf-btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.wf-btn-primary:hover { background: #4D1219; border-color: #4D1219; filter: none; }
.wf-btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.wf-btn-secondary:hover { background: var(--ink); color: #fff; }
.wf-btn-ghost {
  background: transparent;
  color: var(--accent);
  border-color: transparent;
}
.wf-btn-ghost:hover { background: var(--surface-2); }
.wf-btn-lg { padding: 20px 36px; font-size: 13px !important; }
.wf-btn-sm { padding: 11px 20px; font-size: 11px !important; }

/* Form controls */
.wf-input, .wf-select {
  border-radius: 2px !important;
  border-color: var(--line-2);
  background: var(--surface);
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px;
  padding: 14px 16px;
}
.wf-input:focus, .wf-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(106, 28, 40, 0.12);
}

.wf-label {
  font-size: 10px !important;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3) !important;
}

/* Cards — sharp corners, sand background */
.wf-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px !important;
}

/* Badges */
.wf-badge {
  border-radius: 0 !important;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: 'Montserrat', sans-serif !important;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 12px;
  font-weight: 600;
}
.wf-badge-accent {
  background: rgba(106, 28, 40, 0.06);
  color: var(--accent);
  border-color: rgba(106, 28, 40, 0.35);
}

/* Image placeholders — sand + burgundy tint */
.wf-img {
  background:
    linear-gradient(135deg, rgba(106,28,40,0.04), rgba(29,29,27,0.03)),
    repeating-linear-gradient(135deg, var(--surface) 0 14px, var(--surface-2) 14px 28px);
  border-color: var(--line);
  color: var(--accent);
  font-family: 'Montserrat', sans-serif !important;
  letter-spacing: 0.14em;
}
.wf-img::before {
  border-color: var(--line-2);
}
.wf-img > span {
  background: rgba(248, 249, 250, 0.92);
  border-color: var(--line-2);
  color: var(--accent);
  letter-spacing: 0.14em;
  padding: 6px 12px;
  font-weight: 500;
}

/* Stars */
.wf-stars { color: var(--accent); }

/* Nav */
.nav-link {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink) !important;
  border-radius: 0 !important;
  padding: 8px 14px;
}
.nav-link:hover { background: transparent; color: var(--accent) !important; }
.nav-link.active { color: var(--accent) !important; }

/* Row links — hover background + translate removed; arrow-slide stays. */

/* Step dot */
.step-dot { border-radius: 50% !important; border-color: var(--line-2); }
.step-dot.active { background: var(--accent); border-color: var(--accent); }
.step-dot.done { background: var(--ink); border-color: var(--ink); }

/* Tabs */
.tabs { background: var(--surface); border-color: var(--line); border-radius: 0; padding: 0; }
.tab { font-family: 'Montserrat', sans-serif !important; letter-spacing: 0.12em; text-transform: uppercase; font-size: 11px !important; padding: 12px 22px; }
.tab.active { background: var(--ink); color: #fff; box-shadow: none; border-radius: 0; }

/* Premium accents — add Kazakh ornament feel to section labels via ::before/::after on .wf-mono used as section tags.
   Targeted: any wf-mono whose text starts with "—" — we leave the existing dash. */

/* Hero gradient softening for premium feel */
.page { background: var(--bg); }

/* Headings sizing bump — Cormorant looks better larger */
.wf-serif { font-weight: 500; }

/* Make all "h1"-like serif headings render with Cormorant's italic potential */
.wf .wf-serif em, .wf .wf-serif i {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}

/* Footer-specific — graphite background should stay; just shift sand accents */
footer { background: #1D1D1B !important; }
footer .wf-mono { letter-spacing: 0.14em !important; }

/* Premium hairline rules — many sections use border-bottom on var(--ink) */
hr, .wf-divider { background: var(--line); height: 1px; }

/* ── Subtle thematic texture on section backgrounds ───────────────────── */
/* Layered via ::before pseudo-overlay so we can control opacity precisely. */
/* Hero is excluded — its bg is set via backgroundImage, not var(--surface).*/
.page section:not([data-no-tex])[style*="var(--surface)"],
.page section:not([data-no-tex])[style*="var(--surface-2)"],
.page section:not([data-no-tex])[style*="var(--surface-3)"],
.page section:not([data-no-tex])[style*="var(--ink)"],
.page section:not([data-no-tex])[style*="#1D1D1B"],
.page section:not([data-no-tex])[style*="rgb(29, 29, 27)"] {
  position: relative !important;
  isolation: isolate;
}
.page section:not([data-no-tex])[style*="var(--surface)"]::before,
.page section:not([data-no-tex])[style*="var(--surface-2)"]::before,
.page section:not([data-no-tex])[style*="var(--surface-3)"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("../img/texture-paper.webp");
  background-repeat: repeat;
  background-size: 900px 900px;
  mix-blend-mode: multiply;
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
}
.page section:not([data-no-tex])[style*="var(--ink)"]::before,
.page section:not([data-no-tex])[style*="#1D1D1B"]::before,
.page section:not([data-no-tex])[style*="rgb(29, 29, 27)"]::before,
.page footer[style*="var(--ink)"]::before,
.page footer[style*="#1D1D1B"]::before,
.page footer[style*="rgb(29, 29, 27)"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("../img/texture-dark.webp");
  background-repeat: repeat;
  background-size: 900px 900px;
  mix-blend-mode: screen;
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}
/* Lift section content above the texture overlay */
.page section:not([data-no-tex])[style*="var(--surface)"] > *,
.page section:not([data-no-tex])[style*="var(--surface-2)"] > *,
.page section:not([data-no-tex])[style*="var(--surface-3)"] > *,
.page section:not([data-no-tex])[style*="var(--ink)"] > *,
.page footer[style*="var(--ink)"],
.page footer[style*="#1D1D1B"],
.page footer[style*="rgb(29, 29, 27)"] {
  position: relative !important;
  isolation: isolate;
}
.page footer[style*="var(--ink)"] > *,
.page footer[style*="#1D1D1B"] > *,
.page footer[style*="rgb(29, 29, 27)"] > * {
  position: relative;
  z-index: 1;
}
.page section:not([data-no-tex])[style*="#1D1D1B"] > *,
.page section:not([data-no-tex])[style*="rgb(29, 29, 27)"] > * {
  position: relative;
  z-index: 1;
}

/* Section padding bump on large containers — premium needs breathing room */
section { transition: none; }

/* ── Responsive breakpoints ─────────────────────────────────────────────── */

/* Header / nav defenses against horizontal overflow */
#root > nav { min-width: 0; }
#root > nav > div { min-width: 0; }

@media (max-width: 1200px) {
  #root > nav { padding: 22px 32px !important; gap: 24px !important; }
  #root > nav > div:first-child,
  #root > nav > div:first-child { gap: 22px !important; }
}

@media (max-width: 1024px) {
  /* Hide phone number in header; keep logo + nav items + CTA */
  #root > nav a[href^="tel:"],
  #root > nav a[href^="tel:"] { display: none !important; }
}

@media (max-width: 960px) {
  /* Stack the HOME hero into a single column (text, then form).
     Scoped to the full-screen hero (height:100vh) so it can't hit the
     last div of other pages' first section — e.g. the blog article byline,
     which was wrongly getting 120px padding + 40px gap from this rule. */
  .page > section[style*="height: 100vh"] > div:last-child,
  .nm section[style*="height: 100vh"] > div:last-child {
    grid-template-columns: 1fr !important;
    padding: 120px 32px 56px !important;
    gap: 40px !important;
    align-items: start !important;
  }
  .page > section[style*="height: 100vh"] > div:last-child > div:last-child,
  .nm section[style*="height: 100vh"] > div:last-child > div:last-child {
    justify-self: stretch !important;
    max-width: 100% !important;
  }

  /* Generic 2-col / 3-col grids inside sections collapse to 1 col */
  .page section[style*="gridTemplateColumns"],
  .page section [style*="grid-template-columns"] { }
  .page section > div[style*="grid-template-columns"],
  .nm section > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Section padding shrinks */
  .page section,
  .nm section { padding-left: 32px !important; padding-right: 32px !important; }

  /* Hero headline scales down */
  .page > section:first-of-type h1,
  .nm section:first-of-type h1 {
    font-size: clamp(48px, 8vw, 80px) !important;
    line-height: 1.05 !important;
  }
}

@media (max-width: 720px) {
  /* Tighter padding on phones */
  .page section,
  .nm section { padding-left: 20px !important; padding-right: 20px !important; }

  /* Hero on mobile: hide form, show CTA button → opens modal */
  .hero-form-wrap { display: none !important; }
  .hero-cta-mobile { display: inline-flex !important; }

  /* Stats grid → 2 columns on mobile */
  .hero-stats > div {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px 24px !important;
  }
  .hero-stats { padding: 56px 24px !important; }

  /* Nav: hide all middle items, keep logo + CTA. Show a simple hamburger placeholder. */
  #root > nav > div:first-child > div:not(:first-child),
  #root > nav > div:first-child > button,
  #root > nav > div:first-child > div:not(:first-child),
  #root > nav > div:first-child > button { display: none !important; }
  #root > nav { padding: 18px 20px !important; }

  /* Hero padding tighter — scoped to the full-screen home hero only
     (height:100vh), so it doesn't pad other pages' first-section last
     div (e.g. the blog byline). */
  .page > section[style*="height: 100vh"] > div:last-child,
  .nm section[style*="height: 100vh"] > div:last-child {
    padding: 100px 20px 48px !important;
  }
  .page > section:first-of-type h1,
  .nm section:first-of-type h1 {
    font-size: clamp(40px, 11vw, 64px) !important;
  }

  /* Footer stacks */
  footer [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

@media (max-width: 480px) {
  .page section,
  .nm section { padding-top: 56px !important; padding-bottom: 56px !important; }
}

/* ── Unified 1200px content grid ─────────────────────────────────────────
   Base width = the verstka home-hero container (max-width: 1200px). Every
   section keeps its full-bleed background and its own vertical padding, but
   its content column is centered and capped at 1200px. CTA sections
   (.nm-cta — the dark bands + form bands) intentionally keep the wider
   1380 column. Absolute children (hero scrims) are untouched. */
@media (min-width: 1024px) {
  /* Un-cap sections so they always full-bleed; some pages (blog-post) had
     inline max-width on the section itself, which made the grid narrower
     than other pages. The column is set on inner content, not the
     section, so backgrounds stay edge-to-edge. */
  .page section { max-width: none !important; }
  /* Match any direct child (div, h1-h6, p, ul, form, table, etc.) so pages
     where copy or headings sit directly under a section also align to the
     1200 column. */
  .page section:not(.nm-cta) > *:not([style*="position: absolute"]):not(style):not(script):not(.nm-crumbs) {
    max-width: min(1200px, calc(100% - 128px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* CTA bands keep the wider column they were designed on. */
  .page section.nm-cta > *:not([style*="position: absolute"]):not(style):not(script):not(.nm-crumbs) {
    max-width: min(1380px, calc(100% - 128px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Header: center nav content in the same 1200 column. max() keeps a 64px
     minimum gutter on narrower screens and never goes negative. */
  nav[style*="position"] {
    padding-left: max(64px, calc((100% - 1200px) / 2)) !important;
    padding-right: max(64px, calc((100% - 1200px) / 2)) !important;
  }
}
/* Smaller desktops (<=1200): the nav gutter tightens to 32px, so match the
   content column to it (keeps content aligned with the logo, never full-bleed). */
@media (min-width: 1024px) and (max-width: 1200px) {
  .page section > *:not([style*="position: absolute"]):not(style):not(script):not(.nm-crumbs) {
    max-width: calc(100% - 64px) !important;
  }
}
/* Inner wrappers capped ABOVE the 1200 column are pulled down to it so no
   block renders wider than the base grid (CTA sections excluded). Inline
   max-width:1200 wrappers already match the column and need no override;
   narrower caps (heading/copy measures) stay as designed. */
.page section:not(.nm-cta) [style*="max-width: 1280px"],
.page section:not(.nm-cta) [style*="max-width: 1300px"],
.page section:not(.nm-cta) [style*="max-width: 1380px"] {
  max-width: 1200px !important;
}

/* ════════════════════════════════════════════════════════════════════════
   PREMIUM MOTION & HOVERS
   ════════════════════════════════════════════════════════════════════════ */

/* Hero — slow Ken Burns drift so the photo feels alive */
@keyframes nmKenBurns {
  0%   { transform: scale(1.02) translate(0, 0); }
  100% { transform: scale(1.14) translate(-1.5%, -1.5%); }
}
.hero-zoom {
  will-change: transform;
  animation: nmKenBurns 26s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .hero-zoom { animation: none; }
}

/* Cards — soft shadow lift on hover.  Image zoom was removed (jittery
   alongside spotlight + shine sweep).  Image cards still clip overflow
   so the shine pseudo doesn't leak out. */
.page .wf-card { transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease; }
.page .wf-card:has(img) { overflow: hidden; }
.page .wf-card:hover { box-shadow: 0 22px 60px rgba(20,18,15,0.18); }

/* Service / category rows — hover tint removed (looked muddy on the
   Resources cards). Arrow-slide via .nm-arrow is the only affordance. */

/* Buttons — premium quiet hover.  No lift, no wipe, no fancy two-tone
   gradient washing under the text.  Just a smooth color shift: the
   button background eases to its darker / inverted state over ~0.35s
   with an ease-out curve.  Text and borders shift in lock-step. */
.wf-btn,
.wf-btn-primary, a.wf-btn-primary,
.wf-btn-secondary, a.wf-btn-secondary,
.wf-btn-lg, a.wf-btn-lg {
  transform: none !important;
  background-image: none !important;
}
.wf-btn-primary, a.wf-btn-primary, .wf-btn-lg, a.wf-btn-lg {
  background-color: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
  transition: background-color .35s ease, border-color .35s ease, color .25s ease !important;
}
.wf-btn-primary:hover, a.wf-btn-primary:hover,
.wf-btn-lg:hover, a.wf-btn-lg:hover {
  background-color: #4D1219 !important;
  border-color: #4D1219 !important;
}
.wf-btn-secondary, a.wf-btn-secondary {
  background-color: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--ink) !important;
  transition: background-color .35s ease, color .25s ease !important;
}
.wf-btn-secondary:hover, a.wf-btn-secondary:hover {
  background-color: var(--ink) !important;
  color: #fff !important;
}

/* Header "Request Quote" CTA — transparent → white fill, white text →
   ink text.  Same quiet recipe; no wipe.  Targeted by href so it
   works on every page without injecting a class. */
nav a[href="quote.html"] {
  background-color: transparent !important;
  background-image: none !important;
  color: #fff !important;
  transition: background-color .35s ease, color .25s ease !important;
}
nav a[href="quote.html"]:hover {
  background-color: #fff !important;
  color: var(--ink) !important;
}

/* Base link colour — inherit the surrounding text colour so no link is ever the
   browser default blue. Especially important on mobile, where Safari/Chrome auto-
   style tel:/mailto: links blue. Specific link rules (nav, prose, accent) still win. */
a { color: inherit; }
a[href^="tel:"], a[href^="mailto:"] { color: inherit; -webkit-text-fill-color: currentColor; }

/* Nav links — refined underline grow on hover */
nav button { transition: color .2s ease, opacity .2s ease; }
nav a { transition: opacity .2s ease; }

/* Scroll reveal — only the section CONTENT rises + fades in; the section
   itself (its background colour / photo / scrim) stays put.  Animating the
   whole <section> shifted its background too, briefly exposing the page
   behind it as a "white gap" at the top of each section.  Now the section
   is a static, fully-painted stage and its content children lift into it.
   Absolutely-positioned children (hero/steppe background photos + dark
   scrims) are excluded — they ARE the background and must not move.
   Guarded by body.nm-anim (added by JS) so content stays visible if JS
   is unavailable. The hero (first section) is never hidden. */
body.nm-anim .page section > *:not([style*="position: absolute"]):not(style):not(script) {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
  will-change: opacity, transform;
}
body.nm-anim .page section.nm-in > *:not([style*="position: absolute"]):not(style):not(script) {
  opacity: 1;
  transform: none;
}
body.nm-anim .page section:first-of-type > * { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  body.nm-anim .page section > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── Premium home-page effects (paired with premium-effects.js) ─────────── */

/* Hero word-stagger removed — section-reveal (body.nm-anim/.nm-in) now
   handles entrance animation; the old .nm-word keyframe fought the h2
   transition rule and animated in visible chunks. */

/* 2) .wf-card cursor spotlight — soft burgundy radial follows the pointer.
   Position is set by JS via --mx / --my custom properties.  Default to
   center so cards without active hover still look right. */
.wf-card.nm-spot {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --mx: 50%;
  --my: 50%;
}
.wf-card.nm-spot::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(380px circle at var(--mx) var(--my),
              rgba(106, 28, 40, 0.10) 0%,
              rgba(106, 28, 40, 0.04) 25%,
              transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
}
.wf-card.nm-spot:hover::before { opacity: 1; }
.wf-card.nm-spot > * { position: relative; z-index: 1; }

/* Image zoom on card hover removed — was jittery alongside the tilt /
   spotlight / shine.  Cards now stay still; only the spotlight + shine
   sweep act on hover.  Overflow stays hidden so the shine doesn't leak. */
.wf-card { overflow: hidden; }

/* 4) Subtle lift on .wf-btn-primary so the magnetic JS effect has a base
   to drift from.  Keeps the button feeling responsive even before cursor
   gets close. */
.wf-btn-primary {
  transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.2),
              box-shadow 0.3s ease,
              background 0.25s ease;
}
.wf-btn-primary:hover {
  box-shadow: 0 10px 28px rgba(106, 28, 40, 0.25);
}

/* 5) Smooth-scroll behavior project-wide. */
html { scroll-behavior: smooth; }

/* ── Premium effects: full bundle for home (premium-effects.js) ─────────── */

/* Reduce stacked animation cost.  Disable everything on reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .nm-word, .nm-shine-img, #nm-cursor, #nm-cursor-dot { animation: none !important; transition: none !important; }
}



/* (3) Card spotlight overlay — used by both spotlight + tilt host. */
.wf-card.nm-spot {
  position: relative;
  isolation: isolate;
  --mx: 50%;
  --my: 50%;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.45s ease;
}
.wf-card.nm-spot::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--mx) var(--my),
              rgba(106, 28, 40, 0.16) 0%,
              rgba(106, 28, 40, 0.06) 28%,
              transparent 64%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
  mix-blend-mode: multiply;
}
.wf-card.nm-spot:hover::before { opacity: 1; }
.wf-card.nm-spot:hover { box-shadow: 0 18px 40px rgba(20, 18, 14, 0.10); }
.wf-card.nm-spot > * { position: relative; z-index: 2; }

/* (4) Shine sweep on image hover.  Wrap is on a parent (either the .wf-card
   itself or a JS-inserted span).  The pseudo-element sits diagonally
   off-screen and animates across on hover. */
.nm-shine-wrap {
  position: relative;
  overflow: hidden;
  display: block;
}
.nm-shine-wrap .nm-shine-img {
  display: block;
}
.nm-shine-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 60%;
  height: 100%;
  background: linear-gradient(115deg,
              rgba(255, 255, 255, 0)   0%,
              rgba(255, 255, 255, 0.18) 45%,
              rgba(255, 255, 255, 0.36) 50%,
              rgba(255, 255, 255, 0.18) 55%,
              rgba(255, 255, 255, 0)   100%);
  transform: skewX(-18deg);
  pointer-events: none;
  z-index: 3;
  opacity: 0;
}
.nm-shine-wrap:hover::after {
  animation: nmShine 1.05s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
@keyframes nmShine {
  0%   { left: -75%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 130%; opacity: 0; }
}

/* (5) Cursor blob + tracking dot — hidden on touch via JS. */
#nm-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(106, 28, 40, 0.14);
  border: 1px solid rgba(106, 28, 40, 0.28);
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: multiply;
  transition: width 0.25s ease, height 0.25s ease,
              background 0.25s ease, border-color 0.25s ease;
  will-change: transform;
}
#nm-cursor.nm-cursor--big {
  width: 64px; height: 64px;
  background: rgba(106, 28, 40, 0.20);
  border-color: rgba(106, 28, 40, 0.45);
  margin-left: -14px; margin-top: -14px;
}
#nm-cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  pointer-events: none;
  z-index: 10000;
  will-change: transform;
}
@media (hover: none), (pointer: coarse) {
  #nm-cursor, #nm-cursor-dot { display: none !important; }
}

/* (7) Scroll progress bar. */
#nm-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  background: var(--accent);
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 200;
  pointer-events: none;
  box-shadow: 0 0 8px rgba(106, 28, 40, 0.45);
}

/* (8) Arrow slide on hover.  Targets the .nm-arrow class added by JS. */
.nm-arrow {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}
button:hover .nm-arrow,
.row-link:hover .nm-arrow,
.wf-card:hover .nm-arrow,
.wf-btn:hover .nm-arrow,
a:hover .nm-arrow {
  transform: translateX(6px);
}

/* (9) Marquee shimmer on the + Specialty strip. */
.nm-shimmer-host {
  position: relative;
  overflow: hidden;
}
.nm-shimmer-host::after {
  content: "";
  position: absolute;
  top: 0; left: -40%;
  width: 30%; height: 100%;
  background: linear-gradient(115deg,
              rgba(230, 220, 203, 0)   0%,
              rgba(230, 220, 203, 0.08) 50%,
              rgba(230, 220, 203, 0)   100%);
  transform: skewX(-22deg);
  animation: nmShimmer 6.5s linear infinite;
  pointer-events: none;
}
@keyframes nmShimmer {
  0%   { left: -40%; }
  100% { left: 130%; }
}

/* (10) Form input focus glow. */
.nm-input:focus {
  outline: none;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(106, 28, 40, 0.15),
              0 1px 2px rgba(0, 0, 0, 0.04);
  background: #fff !important;
}

/* Smooth-scroll: shorter on form jumps. */
html { scroll-behavior: smooth; }

/* Primary CTA hover — premium, stationary.
   The button doesn't move (no transform).  Background darkens slightly,
   a very soft drop-shadow appears, and the underline-arrow inside (if
   any) glides via .nm-arrow.  Whole transition is 0.32s, ease-out, so
   it reads as deliberate not snappy. */
.wf-btn-primary, a.wf-btn-primary, .wf-btn-lg, a.wf-btn-lg {
  transition: background-color 0.32s ease, box-shadow 0.4s ease, color 0.28s ease;
}
.wf-btn-primary:hover, a.wf-btn-primary:hover, .wf-btn-lg:hover {
  box-shadow: 0 4px 14px rgba(106, 28, 40, 0.18);
}
.wf-btn-secondary, a.wf-btn-secondary {
  transition: background-color 0.32s ease, color 0.28s ease, border-color 0.32s ease;
}

/* row-link hover: translateX removed (it read as jittery next to the
   spotlight/shine effects on .wf-card). Arrow-slide is the only motion. */

/* Make every section's overflow safe so the shine doesn't leak. */
.page section { overflow: hidden; }

/* ── Square corners everywhere ──────────────────────────────────────────
   Inner pages were rendered with inline border-radius: 3/4/6/8px on cards,
   inputs, step indicators, and various small chips.  The brand sticks to
   sharp corners (wf-btn / wf-badge / wf-card already do this).  Force
   every inline-radius value back to 0 — except for circles (50%), which
   are intentional (step dots, the cursor blob, scroll-top, etc.). */
.page [style*="border-radius"]:not([style*="border-radius: 50%"]) {
  border-radius: 0 !important;
}

/* Row-link hover — premium subtle.  The old styles.css paint a flat
   sand block across the whole row; that reads as a wash, not a
   refinement.  Suppress the fill, swap to a hairline accent on the
   left edge + a soft text-tint shift.  Arrow already slides via
   .nm-arrow. */
.page .row-link,
.page [data-route].row-link {
  background: transparent !important;
  position: relative;
  transition: color .25s ease;
}
.page .row-link:hover,
.page [data-route].row-link:hover {
  background: transparent !important;
}
.page .row-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform .35s cubic-bezier(.65,0,.35,1);
  pointer-events: none;
}
.page .row-link:hover::before {
  transform: scaleY(1);
}
.page .row-link:hover { padding-left: 14px !important; }
.page .row-link { transition: padding-left .35s cubic-bezier(.65,0,.35,1), color .25s ease; }

/* ── Mobile (< 900px) ──────────────────────────────────────────────────
   Comprehensive responsive pass.  mobile-nav.js handles the hamburger
   drawer; this block trims paddings, collapses multi-column grids
   into single column, shrinks display headings, and kills any
   remaining horizontal overflow. */

html, body { overflow-x: hidden; max-width: 100%; }

@media (max-width: 899px) {
  /* Section padding compresses from 64-120 to 24-40. */
  .page section { padding-left: 20px !important; padding-right: 20px !important; }
  .page section[style*="padding: 120px"] { padding-top: 64px !important; padding-bottom: 64px !important; }
  .page section[style*="padding: 96px"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  .page section[style*="padding: 80px"] { padding-top: 48px !important; padding-bottom: 48px !important; }
  .page section[style*="padding: 64px"] { padding-top: 40px !important; padding-bottom: 40px !important; }

  /* Collapse every multi-column grid inside .page to single column. */
  .page [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .page [style*="display: flex"][style*="gap: 32px"] { gap: 16px !important; }
  .page [style*="display: flex"][style*="gap: 24px"] { gap: 14px !important; }
  .page [style*="display: flex"][style*="justify-content: space-between"] { flex-wrap: wrap; }

  /* Hero + display headings — shrink from 60-64 to 36-40. */
  .page h1[style*="font-size: 60px"],
  .page h1[style*="font-size: 64px"],
  .page h2[style*="font-size: 56px"],
  .page h2[style*="font-size: 48px"],
  .page [role="heading"][style*="font-size: 56px"],
  .page [role="heading"][style*="font-size: 48px"] {
    font-size: 34px !important;
    line-height: 1.08 !important;
  }
  .page h2[style*="font-size: 42px"],
  .page h2[style*="font-size: 38px"],
  .page h2[style*="font-size: 36px"],
  .page h3[style*="font-size: 32px"],
  .page [role="heading"][style*="font-size: 42px"],
  .page [role="heading"][style*="font-size: 38px"],
  .page [role="heading"][style*="font-size: 36px"],
  .page [role="heading"][style*="font-size: 32px"] {
    font-size: 26px !important;
    line-height: 1.15 !important;
  }
  .page p[style*="font-size: 18px"],
  .page p[style*="font-size: 17px"] { font-size: 15px !important; }

  /* Photos — cap heights so a portrait image doesn't fill three viewports. */
  .page img[style*="height: 620px"],
  .page img[style*="height: 460px"],
  .page img[style*="height: 420px"],
  .page img[style*="height: 400px"],
  .page img[style*="height: 360px"] { height: 260px !important; }

  /* Sticky sidebars — disable on mobile (collapsed column makes sticky weird).
     Match both "position: sticky" and "position:sticky" (no space). */
  .page [style*="position: sticky"],
  .page [style*="position:sticky"] { position: static !important; top: auto !important; }

  /* FAQ (and any sidebar-heading) two-col grid → stack on mobile so the heading
     sits above the questions instead of overlapping them. */
  .page [style*="grid-template-columns: 0.8fr 1.2fr"],
  .page [style*="grid-template-columns:0.8fr 1.2fr"] { grid-template-columns: 1fr !important; gap: 24px !important; }

  /* Buttons in the hero stack vertically. */
  .page [style*="display: flex"][style*="flex-wrap: wrap"] > .wf-btn,
  .page [style*="display: flex"][style*="flex-wrap: wrap"] > a.wf-btn-primary,
  .page [style*="display: flex"][style*="flex-wrap: wrap"] > a.wf-btn-secondary { width: 100%; text-align: center; }

  /* Hero text alignment + max-width relax. */
  .page h1, .page h2, .page [role="heading"] { text-wrap: balance; }

  /* Footer columns to two-column at narrow widths. */
  footer [style*="grid-template-columns"] { grid-template-columns: 1fr 1fr !important; }

  /* Scroll-top button smaller + tighter. */
  #nm-scroll-top { right: 14px !important; bottom: 14px !important; width: 46px !important; height: 46px !important; }

  /* Cursor blob hidden on touch (also enforced by media query in main bundle). */
  #nm-cursor, #nm-cursor-dot { display: none !important; }
}

@media (max-width: 560px) {
  .page section { padding-left: 16px !important; padding-right: 16px !important; }
  footer [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .page h1[style*="font-size"] { font-size: 30px !important; }
}

/* Mobile overrides for specific grids that the generic 1fr collapse
   makes too tall — keep 2 columns instead of single column. */
@media (max-width: 899px) {
  /* Home hero-stats strip (Since 2017 / Family / 4.9 / 48 states) — 2x2.
     The extra attribute selector lifts specificity above the earlier
     generic `.page [style*="grid-template-columns"]` rule which would
     otherwise force 1fr. */
  .page .hero-stats > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px 24px !important;
    justify-content: center !important;
  }
  .hero-stats .wf-serif[style*="font-size: 48px"] {
    font-size: 30px !important;
  }

  /* Home "Service areas" city list — keep 2 columns instead of 1.
     The list is a repeat(3, 1fr) grid with the distinctive 6px gap. */
  [style*="grid-template-columns: repeat(3, 1fr)"][style*="gap: 6px"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px 12px !important;
  }
}

/* Footer mobile padding — was inline 56px 64px, didn't fall under the
   `.page section` mobile rule.  Match the section padding so the
   footer columns line up with the rest of the page on narrow screens. */
@media (max-width: 899px) {
  footer { padding-left: 20px !important; padding-right: 20px !important; padding-top: 40px !important; padding-bottom: 24px !important; }
}
@media (max-width: 560px) {
  footer { padding-left: 16px !important; padding-right: 16px !important; }
}

/* Footer mobile grids — split into two distinct targets so the menu
   columns can go 2-wide while the top brand bar stays stacked.  Higher
   specificity than the earlier `footer [style*="..."] { 1fr }` rules
   so both the <720 and <560 stacks are beaten. */
@media (max-width: 899px) {
  /* Menu links grid (repeat(5, 1fr)) → 2 columns: Residential |
     Commercial, Locations | Company, Help spans full width.
     Needs `.page footer` ancestor (specificity 0,2,1) to beat the
     earlier .page-rooted generic `.page [style*=...]` (0,2,0). */
  .page footer [style*="repeat(5, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px 24px !important;
  }
  /* Top brand bar (1.4fr 1.4fr auto) — stack into one column so the
     long contact text doesn't force the parent wider than the viewport. */
  .page footer [style*="1.4fr 1.4fr"] {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
}

/* ── Fixed nav on every page ─────────────────────────────────────────────
   Nav stays pinned to the top instead of scrolling away (the inline
   styles on the nav element are `position: absolute` on home / `sticky`
   on inner pages; this rule + the JS in premium-effects.js make every
   page consistent).

   On home (body.nm-has-hero) the nav starts transparent over the photo
   and gains a dark frosted background once the user scrolls past 40px.
   On inner pages the body is padded to make room for the nav, and the
   nav stays dark from the start. */

/* Scope to the HEADER nav only — a bare `nav` selector also pinned the Yoast
   breadcrumb <nav class="nm-crumbs"> to the top, on top of the header. */
#root > nav {
  position: fixed !important;
  top: 0 !important;
  left: 0; right: 0;
  z-index: 100;
  transition: background-color 0.3s ease, padding-top 0.3s ease, padding-bottom 0.3s ease;
}

/* Logged-in: the WP admin bar overlays the top 32px (46px on small screens)
   and core pushes the page down by the same amount (html{margin-top}). The
   fixed nav must clear the bar too, or its top slice hides under it and a
   bar-height gap opens between the nav and the first section. */
body.admin-bar #root > nav { top: 32px !important; }
@media (max-width: 782px) {
  body.admin-bar #root > nav { top: 46px !important; }
}

/* Inner pages — body offset for the fixed nav (~92px tall). */
body:not(.nm-has-hero) {
  padding-top: 92px;
}
/* Scope to the HEADER nav (#root > nav) only — a bare `nav` also stamped the
   dark band onto the Yoast breadcrumb <nav class="nm-crumbs">. */
body:not(.nm-has-hero) #root > nav {
  background: #1D1D1B !important;
}
/* Defensive: the breadcrumb is never a dark band (guards against any stale
   cached/critical CSS still carrying the old bare-`nav` header rule). Uses an
   id-level selector so it outranks that rule's `!important`. */
#root .nm-crumbs { background: transparent !important; }

/* Home — nav transparent at top, fills dark on scroll. */
body.nm-has-hero #root > nav {
  background: transparent !important;
}
body.nm-has-hero #root > nav.nm-nav-scrolled {
  background: rgba(20, 18, 14, 0.92) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

/* Mobile keeps the same recipe but the nav is shorter. */
@media (max-width: 899px) {
  body:not(.nm-has-hero) { padding-top: 74px; }
  body.nm-has-hero #root > nav.nm-nav-scrolled { padding-top: 10px !important; padding-bottom: 10px !important; }
}

/* Home "+ Specialty" strip — premium mobile layout.
   Desktop is a single dark band with eyebrow + inline item list + CTA on
   the right.  On mobile that read as a cramped two-column block with a
   tiny "+ SPECIALTY" eyebrow on the left and the items breaking awkwardly
   across three lines.  Targeted via the .nm-shimmer-host class that
   premium-effects.js puts on this section. */
@media (max-width: 899px) {
  .page .nm-shimmer-host {
    padding: 36px 24px !important;
    text-align: center;
  }
  /* Outer flex row → stack */
  .page .nm-shimmer-host > div {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 22px !important;
    flex-wrap: nowrap !important;
  }
  /* Inner flex (eyebrow + items) → stack centered */
  .page .nm-shimmer-host > div > div {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    text-align: center;
  }
  /* Eyebrow — tighter, sand-colored, full uppercase */
  .page .nm-shimmer-host .wf-mono {
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
  }
  /* Items list — serif Cormorant, ample line-height so the · separators
     space nicely across two lines */
  .page .nm-shimmer-host > div > div > div:last-child {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.005em !important;
    color: #fff !important;
    max-width: 340px;
  }
  /* CTA button — full width */
  .page .nm-shimmer-host button,
  .page .nm-shimmer-host a.wf-btn {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Mobile: any 5-column grid inside a .page section → 2 columns.
   Catches the home Certifications strip (BBB / USDOT / Inc. 5000 /
   …) that otherwise stacks into a tall single column. */
@media (max-width: 899px) {
  body .page section > div[style*="repeat(5, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 20px !important;
  }
}

/* Hero mobile CTA — push arrow to the far right of the button.
   Pairs with the .nm-arrow span we wrapped around the trailing "→". */
@media (max-width: 899px) {
  .hero-cta-mobile {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box;
    text-align: left;
  }
  .hero-cta-mobile .nm-arrow {
    margin-left: auto;
  }
}

/* Service-detail hero stats strip — flex-wrap + uneven content widths
   made the 4 items align unevenly on mobile (Family / 4.9★ in row 1,
   48 / $0 in row 2 with different cell widths and jagged labels).
   Force it into a clean 2x2 grid. */
@media (max-width: 899px) {
  .page [style*="display: flex"][style*="gap: 32px"][style*="border-top: 1px solid var(--line)"][style*="flex-wrap: wrap"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 22px 24px !important;
  }
}

/* ── Client round: warm palette + expressive section transitions ────────── */

/* Brand tag ("Relocation Co.") beside the nav logo — hide on small screens
   so the desktop nav never cramps; the medallion+NOMAD mark carries it. */

/* Expressive section transitions.  Instead of hard flat color jumps between
   stacked sections, each section that follows another casts a soft shadow
   upward (warm depth, "stacked paper") and is marked at its top-center with
   a small burgundy ◆ ornament — the same accent language as the section
   eyebrows.  Restrained: one quiet mark per seam, no busy full-width rules. */
.page section { position: relative; }
.page section + section {
  box-shadow: inset 0 16px 22px -16px rgba(20, 18, 14, 0.16);
}
.page section + section:not(.nm-shimmer-host)::after {
  content: "\25C6";              /* ◆ */
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  line-height: 1;
  color: var(--accent);
  opacity: 0.6;
  z-index: 5;
  pointer-events: none;
  text-shadow: 0 0 6px rgba(245, 239, 226, 0.9);
}
/* The diamond would collide with the texture ::before stacking on dark
   bands — keep it above. On dark sections, give it a soft halo for legibility. */
.page section[style*="var(--ink)"] + section::after,
.page section + section[style*="var(--ink)"]::after {
  text-shadow: 0 0 6px rgba(20, 18, 14, 0.9);
}

/* "How it works" process strip on mobile.
   Desktop: a connected N-cell row — one outer border on the grid +
   border-right between cells.  Collapsed to a single column on mobile
   that left a shared outer border with stray per-cell right borders.
   Make each step its own bordered card (drop the outer border, give
   every cell a full border + gap). Scoped to the grid-with-overflow
   pattern so the vertical flex service lists aren't affected. */
@media (max-width: 899px) {
  .page section [style*="grid-template-columns"][style*="overflow: hidden"][style*="border: 1px solid var(--line)"] {
    border: none !important;
    overflow: visible !important;
    gap: 12px !important;
  }
  .page section [style*="grid-template-columns"][style*="overflow: hidden"][style*="border: 1px solid var(--line)"] > * {
    border: 1px solid var(--line) !important;
  }
}

/* No seam shadow/ornament right after the hero — the hero and the
   credentials/info strip that follows it should read as one clean
   entrance. Every later section keeps its downward seam shadow + ◆. */
.page section:first-of-type + section { box-shadow: none !important; }
.page section:first-of-type + section::after { content: none !important; }

/* Reviews section: hide the standalone "4.9 ★ / 2,847 reviews" overall
   score block on mobile — stacked under the heading it read as an
   orphaned figure. The per-review star ratings on each card remain. */
@media (max-width: 899px) {
}

/* "Popular routes from Boston" table — hide the dark column-header row
   (Route / Distance / Transit) on mobile.  The 3-col header collapses to
   a single column there and the labels stack into an ugly dark block;
   each data row already reads on its own (route name + mono distance +
   transit). */
@media (max-width: 899px) {
  .page [style*="grid-template-columns: 2fr 1fr 1fr"][style*="background: var(--ink)"] {
    display: none !important;
  }
}

/* "Dedicated truck" stat blocks (0 / 0 / 1 / 24-7) — keep 2 columns on
   mobile instead of collapsing to one. Higher specificity (.page .class)
   beats the generic .page [style*="grid-template-columns"] 1fr rule. */
@media (max-width: 899px) {
  .page .nm-keep-2col {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px 14px !important;
  }
}

/* FAQ toggle alignment on mobile.  FAQ rows are flex space-between
   buttons (question + a +/- icon); the generic space-between flex-wrap
   rule above dropped the icon onto its own line below a 2-line question.
   Keep the icon on the same row, pinned to the top-right of the
   question. Scoped to the FAQ button signature (padding: 20px 0px). */
@media (max-width: 899px) {
  .page button[style*="padding: 20px 0px"][style*="justify-content: space-between"] {
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 14px;
  }
  .page button[style*="padding: 20px 0px"][style*="justify-content: space-between"] > span:last-child {
    flex-shrink: 0 !important;
  }
}

/* Premium scrollbars on the internally-scrolling blocks (SEO text columns
   etc.).  Goal: the scrollbar must be visible AT REST, before any
   scrolling, in every browser.  Overlay scrollbars (macOS, Safari's
   "show when scrolling", some Windows setups) hide until you scroll, so:
     - overflow-y: scroll (not auto) keeps the track permanently rendered;
     - scrollbar-gutter: stable reserves the channel;
     - -webkit-appearance: none forces Safari/Blink off the overlay bar;
     - a visibly tinted track shows the channel even when idle.
   8px burgundy thumb — small but unmistakable. */
[style*="overflow-y: auto"] {
  overflow-y: scroll !important;
  scrollbar-gutter: stable;
  scrollbar-width: thin !important;
  scrollbar-color: var(--accent) rgba(106, 28, 40, 0.14) !important;
}
[style*="overflow-y: auto"]::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  -webkit-appearance: none;
  appearance: none;
}
[style*="overflow-y: auto"]::-webkit-scrollbar-track {
  background: rgba(106, 28, 40, 0.14);
  border-radius: 4px;
}
[style*="overflow-y: auto"]::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 4px;
  min-height: 40px;
}
[style*="overflow-y: auto"]::-webkit-scrollbar-thumb:hover { background: #4D1219; }

/* Buttons: keep label + arrow on one line (was wrapping "Book a move"
   onto one row and "→" onto the next on narrow mobile buttons). */
.wf-btn, a.wf-btn, .wf-btn-primary, a.wf-btn-primary, .wf-btn-secondary, a.wf-btn-secondary, .wf-btn-lg {
  white-space: nowrap !important;
}

/* Secondary (outline) buttons on DARK sections — the default ink text +
   ink border are invisible on graphite. Flip to a light outline so the
   phone / secondary CTA reads on dark bands. */
.page section[style*="var(--ink)"] .wf-btn-secondary,
.page section[style*="#1D1D1B"] .wf-btn-secondary,
.page section[style*="rgb(29, 29, 27)"] .wf-btn-secondary,
.page section[style*="var(--ink)"] a.wf-btn-secondary,
.page section[style*="#1D1D1B"] a.wf-btn-secondary,
.page section[style*="rgb(29, 29, 27)"] a.wf-btn-secondary {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
  background-color: transparent !important;
}
.page section[style*="var(--ink)"] .wf-btn-secondary:hover,
.page section[style*="#1D1D1B"] .wf-btn-secondary:hover,
.page section[style*="rgb(29, 29, 27)"] .wf-btn-secondary:hover,
.page section[style*="var(--ink)"] a.wf-btn-secondary:hover,
.page section[style*="#1D1D1B"] a.wf-btn-secondary:hover,
.page section[style*="rgb(29, 29, 27)"] a.wf-btn-secondary:hover {
  background-color: #fff !important;
  color: var(--ink) !important;
}

/* Client-side pagination pager (blog, case studies) — premium burgundy. */
.nm-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 56px auto 0;
}
.nm-page {
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.nm-page:hover:not(.nm-page--disabled):not(.nm-page--active) {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.nm-page--active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  cursor: default;
}
.nm-page--disabled { opacity: .35; cursor: not-allowed; }
@media (max-width: 560px) {
  .nm-page { min-width: 40px; height: 40px; padding: 0 11px; font-size: 12px; }
}

/* Blog article byline (author · date · read time). On a narrow phone the
   flex row crammed all items on one line, squishing "April 28, 2026" and
   "6 min read" into tall 3-line columns — making the band absurdly tall.
   Let it wrap as whole units, keep each text item on one line, and trim
   the top gap. */
@media (max-width: 700px) {
  .nm-byline {
    flex-wrap: wrap !important;
    gap: 6px 12px !important;
    margin-top: 20px !important;
    padding-top: 18px !important;
  }
  .nm-byline > span { white-space: nowrap; }
}

/* Blog article: tighten the gap between the byline and the hero image on
   mobile (was byline-section bottom 56px + image-section top 40px ≈ 96px). */
@media (max-width: 700px) {
  .page section:has(.nm-byline) { padding-bottom: 16px !important; }
  .page section:has(.nm-byline) + section { padding-top: 22px !important; }
}

/* ── Unified breadcrumbs ─────────────────────────────────────────────────
   Breadcrumbs shipped per-page with different top paddings (32/40/48/64px),
   widths and margins. Normalize: align to the unified 1200 content grid,
   one consistent top offset below the fixed nav, one bottom gap. */
.page .nm-crumbs {
  box-sizing: border-box;
  /* Full-bleed to the viewport, then pad to the 1200 grid using the SAME
     adaptive gutter the nav uses — so every breadcrumb's left edge lines
     up with the nav logo / content grid, regardless of its section's own
     horizontal padding. */
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  padding: 0 max(64px, calc(50vw - 600px)) !important;
  font-size: 12px !important;
}
/* Breadcrumb links match the service inline crumbs: inherit colour, no
   underline, accent on hover; current page slightly darker. */
.page .nm-crumbs a { color: inherit !important; text-decoration: none !important; }
.page .nm-crumbs a:hover { color: var(--accent) !important; }
.page .nm-crumbs .breadcrumb_last { color: var(--ink-2) !important; }
/* The section that holds the breadcrumb (anywhere inside it) gets ONE
   consistent top offset; any ServiceHero wrapper div around it is zeroed
   so the offset isn't doubled. Uses descendant :has so it catches both the
   direct-child breadcrumbs (about/case/blog) and the ServiceHero ones
   nested in a padding wrapper — overriding the blanket 56px section
   padding the small-screen rule applies. */
.page section:has(.nm-crumbs) { padding-top: 30px !important; }
.page section:has(.nm-crumbs) > div:has(> .nm-crumbs) { padding-top: 0 !important; }
@media (max-width: 899px) {
  .page section:has(.nm-crumbs) { padding-top: 32px !important; }
  .page .nm-crumbs { margin-bottom: 14px !important; padding: 0 20px !important; }
}

/* Case study (single): the gap between the header block (breadcrumb + title +
   excerpt) and the hero image reads as ~64px on mobile — the header's 24px
   bottom padding plus the 40px top the generic `padding: 64px` rule gives the
   image section. Cut it ~3× (to ~21px) so the image sits closer to the intro. */
@media (max-width: 899px) {
  body.single-case_study .page section:has(.nm-crumbs) { padding-bottom: 8px !important; }
  body.single-case_study .page section:has(.nm-crumbs) + section { padding-top: 13px !important; }
}

/* Service-hero "Request a quote" CTA: arrow flush right on mobile (matches
   the home hero CTA). The button is full-width when the hero buttons stack
   on mobile, so space-between pushes the arrow to the right edge. */
@media (max-width: 899px) {
  .nm-hero-quote {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
  }
  .nm-hero-quote .nm-arrow { margin-left: auto; }
}

/* SEO text sections — distinct light-beige "paper" band. The section keeps
   its inline var(--surface-2) in the style attribute (so the paper-texture
   ::before still applies), but the visible fill is a lighter warm beige. */
.page section.nm-seo { background: #ECE4D2 !important; }


/* About-the-House story: scrollable text panel with styled scrollbar */
.nm-about-scroll {
  max-height: 560px;
  overflow-y: auto;
  padding-right: 20px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) rgba(29,29,27,0.12);
  -webkit-overflow-scrolling: touch;
  margin-bottom: 32px;
}
.nm-about-scroll::-webkit-scrollbar { width: 8px; }
.nm-about-scroll::-webkit-scrollbar-track { background: rgba(29,29,27,0.10); border-radius: 4px; }
.nm-about-scroll::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; }
.nm-about-scroll::-webkit-scrollbar-thumb:hover { background: var(--ink); }
@media (max-width: 900px) { .nm-about-scroll { max-height: 400px; padding-right: 16px; } }

/* ── .nm-prose — WYSIWYG SEO-text output (the one place h2–h6 live) ──────── */
.nm-prose { color: var(--ink-2); font-size: 15px; line-height: 1.7; }
.nm-prose > *:first-child { margin-top: 0; }
.nm-prose > *:last-child { margin-bottom: 0; }
.nm-prose p { margin: 0 0 16px; font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.nm-prose h1, .nm-prose h2, .nm-prose h3, .nm-prose h4 {
	font-family: 'Cormorant Garamond', Georgia, serif; color: var(--ink);
	font-weight: 700; letter-spacing: -0.02em; line-height: 1.1;
}
.nm-prose h2 { font-size: 34px; margin: 34px 0 14px; }
.nm-prose h3 { font-size: 26px; margin: 28px 0 12px; }
.nm-prose h4 { font-size: 20px; margin: 24px 0 10px; }
.nm-prose h5, .nm-prose h6 { font-size: 13px; font-weight: 700; color: var(--ink); margin: 20px 0 8px; text-transform: uppercase; letter-spacing: 0.08em; font-family: 'Montserrat', sans-serif; }
.nm-prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.nm-prose ul, .nm-prose ol { margin: 0 0 16px; padding-left: 22px; }
.nm-prose li { margin: 0 0 6px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.nm-prose strong { color: var(--ink); font-weight: 700; }
.nm-prose blockquote { border-left: 3px solid var(--accent); margin: 18px 0; padding: 4px 0 4px 18px; color: var(--ink); font-style: italic; }
.nm-prose img { max-width: 100%; height: auto; }
.nm-prose-dark, .nm-prose-dark p, .nm-prose-dark li { color: rgba(230,220,203,0.85); }
.nm-prose-dark h1, .nm-prose-dark h2, .nm-prose-dark h3, .nm-prose-dark h4, .nm-prose-dark h5, .nm-prose-dark h6, .nm-prose-dark strong { color: #fff; }

/* Resources / blog cards (home "Practical moving advice") — soft, contained
   image-zoom on hover. Nothing shifts position; the image gently scales within
   its clipped frame and the title eases to the accent colour. */
.nm-post-card { display: block; }
.nm-post-card-media { display: block; overflow: hidden; margin-bottom: 16px; }
.nm-post-card-media img { transition: transform .6s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.nm-post-card:hover .nm-post-card-media img { transform: scale(1.05); }
.nm-post-card .wf-serif { transition: color .25s ease; }
.nm-post-card:hover .wf-serif { color: var(--accent); }

/* ── Responsive headings (tag-agnostic) ──────────────────────────────────────
   Most display headings were demoted to <div> (single-H1 SEO rule), so the
   tag-based h1/h2/h3 font rules above miss them and they stayed huge on mobile.
   These match the inline font-size regardless of tag. Placed last so they win. */
@media (max-width: 899px) {
  .page [style*="font-size: 84px"] { font-size: 42px !important; line-height: 1.05 !important; }
  .page [style*="font-size: 72px"],
  .page [style*="font-size: 64px"],
  .page [style*="font-size: 56px"] { font-size: 34px !important; line-height: 1.08 !important; }
  .page [style*="font-size: 52px"],
  .page [style*="font-size: 48px"] { font-size: 30px !important; line-height: 1.1 !important; }
  .page [style*="font-size: 44px"],
  .page [style*="font-size: 42px"],
  .page [style*="font-size: 40px"],
  .page [style*="font-size: 38px"],
  .page [style*="font-size: 36px"] { font-size: 26px !important; line-height: 1.16 !important; }
  .page [style*="font-size: 34px"],
  .page [style*="font-size: 32px"],
  .page [style*="font-size: 30px"],
  .page [style*="font-size: 28px"] { font-size: 22px !important; line-height: 1.22 !important; }
}
@media (max-width: 560px) {
  .page [style*="font-size: 84px"] { font-size: 36px !important; }
  .page [style*="font-size: 72px"],
  .page [style*="font-size: 64px"],
  .page [style*="font-size: 56px"] { font-size: 30px !important; }
  .page [style*="font-size: 52px"],
  .page [style*="font-size: 48px"] { font-size: 27px !important; }
}

/* Home hero: use the dedicated mobile image (ACF) on phones, if one is set. */
@media (max-width: 600px) {
  .hero-zoom { background-image: var(--hero-img-m, var(--hero-img)) !important; }
}

/* ── FAQ accordion (shared, smooth) ──────────────────────────────────────────
   Behaviour only — appearance stays per-template (inline styles). faq.js adds
   .js-ready (so answers stay visible without JS) and toggles .is-open. */
.nm-faq .nm-faq-q { cursor: pointer; }
.nm-faq .nm-faq-mark { display: inline-block; transition: transform .3s ease, color .3s ease; flex: 0 0 auto; }
.nm-faq .nm-faq-item.is-open .nm-faq-mark { transform: rotate(45deg); color: var(--accent); }
.nm-faq.js-ready .nm-faq-a { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.4,0,.2,1); }

/* ── Footer: contact (phone/email/address) on one row; columns 2-up on mobile ── */
.nm-foot-contact > * { white-space: nowrap; }
@media (max-width: 899px) {
  footer .nm-foot-top { grid-template-columns: 1fr !important; gap: 22px !important; text-align: left; justify-items: start; }
  footer .nm-foot-contact { flex-wrap: wrap !important; justify-content: flex-start !important; align-items: flex-start !important; }
  footer .nm-foot-cols { grid-template-columns: 1fr 1fr !important; gap: 24px 20px !important; }
}

/* What's-included: same treatment as how-it-works — on mobile drop the shared
   outer frame and give each cell its own square border (var(--line)) so the two
   lists read as separate cards, separated by the 28px grid gap. Cells keep their
   inline 32px padding. (Desktop keeps the single bordered box from the verstka.) */
@media (max-width: 899px) {
  .nm-inc-grid { border: none !important; border-radius: 0 !important; overflow: visible !important; }
  .nm-inc-grid .nm-inc-cell { border: 1px solid var(--line) !important; border-radius: 0 !important; }
}

/* How-it-works steps: on mobile the cells stack, so the shared outer frame +
   divider borders make the steps look joined into one bordered block. Drop the
   frame and all cell borders so each step reads as a separate card, spaced by
   the grid gap. (Desktop keeps the bordered strip from the verstka.) */
@media (max-width: 899px) {
  /* Stack as separate bordered cards: drop the shared outer frame, then give
     each cell its own full border so every step is its own card, separated by
     the 28px grid gap. Square corners + var(--line) match the desktop strip
     exactly. Cells keep their inline 32px padding. */
  .nm-hiw-grid { border: none !important; border-radius: 0 !important; overflow: visible !important; }
  .nm-hiw-grid .nm-hiw-cell { border: 1px solid var(--line) !important; border-radius: 0 !important; }
  /* "— Specialty" item grid: same treatment as how-it-works/what's-included. */
  .nm-spec-grid { border: none !important; border-radius: 0 !important; overflow: visible !important; }
  .nm-spec-grid .nm-spec-cell { border: 1px solid var(--line) !important; border-radius: 0 !important; }
  /* "Our crew" stats grid: same treatment (the leftover inline border-right on
     left-column cells made stacked cards jitter 1-2px on mobile). */
  .nm-crew-grid { border: none !important; border-radius: 0 !important; overflow: visible !important; background: transparent !important; }
  .nm-crew-grid .nm-crew-cell { border: 1px solid var(--line) !important; border-radius: 0 !important; background: var(--surface); }
}

/* Service / category hero: on mobile the image drops below the text column, then
   the grid's 64px bottom padding AND the section's own 56px bottom padding stack
   into a ~120px void before the next section (credentials bar / service list).
   Collapse both so the gap under the image is ~28px (~4x smaller). The 1.15fr 1fr
   grid signature is unique to these two hero templates. */
@media (max-width: 899px) {
  .page section:has(> div[style*="grid-template-columns: 1.15fr 1fr"]) { padding-bottom: 0 !important; }
  .page section > div[style*="grid-template-columns: 1.15fr 1fr"] { padding-bottom: 28px !important; }
}

/* Credentials/trust bar on service pages: 2-up on mobile (not 1 long stack). */
@media (max-width: 899px) {
  .page section.nm-creds > div { grid-template-columns: 1fr 1fr !important; gap: 18px 16px !important; }
}

/* Case-study Route strip: keep Origin | → mi | Destination on ONE row on
   mobile — the generic grid collapse stacked them at different heights. */
@media (max-width: 899px) {
  .page .nm-route-row { grid-template-columns: 1fr auto 1fr !important; gap: 12px !important; align-items: baseline !important; }
  .nm-route-row > div:last-child { text-align: right; }
}

/* Quote-page badges strip: the centered flex row wraps unevenly on phones
   (each row centers independently, so columns don't line up). Make it a
   strict 2×2 grid with each badge centered in its cell. */
@media (max-width: 899px) {
  .nm-quote-badges { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 28px 16px !important; justify-items: center !important; }
}

/* Pricing add-ons table: the generic mobile flex-wrap let a long value drop
   UNDER its label. Keep two strict columns — label left, value right-aligned
   in its own column; long text wraps inside its column, never across. */
@media (max-width: 899px) {
  .page .nm-price-row { flex-wrap: nowrap !important; gap: 16px; align-items: baseline; }
  .page .nm-price-row > div:first-child { flex: 1 1 auto; min-width: 0; }
  .page .nm-price-row > div:last-child { flex: 0 1 auto; max-width: 55%; text-align: right; }
}

/* ── Mobile buttons: center the label, hide the trailing arrow ──────────────── */
@media (max-width: 899px) {
  .page .wf-btn { justify-content: center !important; text-align: center; }
  .page .wf-btn .nm-arrow { display: none !important; }
}

/* ── Accessible-only headings (visually hidden, read by screen readers) ──── */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;white-space:nowrap;word-wrap:normal!important;}

/* ── Stop iOS Safari auto-zooming on field focus ──────────────────────────
   Safari zooms the page whenever a focused input's font-size is < 16px. Force
   all text-entry controls to 16px on touch devices only (desktop keeps the
   14px design). */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="file"]),
  select,
  textarea,
  .nm-quote input,
  .nm-quote select,
  .nm-quote textarea,
  .nm-quote .nm-input,
  .wpcf7 input,
  .wpcf7 select,
  .wpcf7 textarea {
    font-size: 16px !important;
  }
}