/* 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. */

: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 1380px content grid ─────────────────────────────────────────
   Every section keeps its full-bleed background and its own vertical padding,
   but its content column is centered and capped at 1380px. We constrain the
   section's direct content wrapper(s) rather than the section padding, so
   full-bleed hero scrims (position:absolute) are left 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 1380 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
     1380 column. Absolute children (hero scrims) are excluded. */
  .page section > *:not([style*="position: absolute"]):not(style):not(script):not(.nm-crumbs) {
    max-width: 1380px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Header: center nav content in the same 1380 column. max() keeps a 64px
     minimum gutter on narrower screens and never goes negative. */
  nav[style*="position"] {
    padding-left: max(64px, calc((100% - 1380px) / 2)) !important;
    padding-right: max(64px, calc((100% - 1380px) / 2)) !important;
  }
}
/* Inner wrappers that hard-cap below 1380 (e.g. hero content, SEO column)
   are bumped up so they fill the 1380 column instead of re-shrinking. */
.page section [style*="max-width: 1200px"],
.page section [style*="max-width: 1280px"],
.page section [style*="max-width: 1300px"] {
  max-width: 1380px !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;
}

/* 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"] {
    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"] {
    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). */
  .page [style*="position: sticky"] { position: static !important; top: auto !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 { 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. */

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;
}

/* Inner pages — body offset for the fixed nav (~92px tall). */
body:not(.nm-has-hero) {
  padding-top: 92px;
}
body:not(.nm-has-hero) nav {
  background: #1D1D1B !important;
}

/* Home — nav transparent at top, fills dark on scroll. */
body.nm-has-hero nav {
  background: transparent !important;
}
body.nm-has-hero 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 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 (1380 vs 920) and margins. Normalize: align to the 1380 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 1380 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 - 690px)) !important;
  font-size: 12px !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; }
}

/* 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; }
}

/* ── 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); }