/* ==========================================================================
   AMERICA FACILITY SOLUTIONS — main.css
   1. Tokens          5. Buttons        9.  Services
   2. Reset / base    6. Header / nav   10. Industries
   3. Layout          7. Hero           11. Why America
   4. Typography      8. Marquee        12. Process  13. Estimate  14. Footer
   15. Modal  16. Sticky CTA  17. Motion  18. Responsive
   ========================================================================== */

/* ------------------------------- 1. TOKENS ------------------------------- */
:root{
  --navy:#07182D;
  --navy-800:#0A2038;
  --navy-700:#0E2A47;
  --ivory:#F7F5F0;
  --ivory-200:#EFEBE4;
  --ivory-300:#E4DFD5;
  --gold:#C9A35E;          /* champagne — surfaces, rules, text on navy (7.5:1) */
  --gold-deep:#B08C46;     /* champagne, pressed — button surfaces only */
  --gold-display:#9C7B39;  /* antique — display accents on light (3.6:1, AA large) */
  --gold-ink:#836327;      /* antique, deep — small gold text on light (4.7–5.1:1) */
  --charcoal:#151719;
  --white:#FFFFFF;

  --ink:#151719;
  --ink-soft:rgba(21,23,25,.66);
  --ink-faint:rgba(21,23,25,.62);
  --line:rgba(7,24,45,.12);
  --line-strong:rgba(7,24,45,.22);

  --on-dark:rgba(247,245,240,.74);
  --on-dark-faint:rgba(247,245,240,.55);
  --line-dark:rgba(247,245,240,.16);

  --font-display:"Inter Tight","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --shell:1280px;
  --gutter:clamp(20px,4.6vw,56px);
  --bleed:max(var(--gutter), calc((100% - var(--shell)) / 2));
  --header-h:78px;
  --radius:2px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,.84,.44,1);
  --section-y:clamp(76px,9vw,136px);
}

/* ----------------------------- 2. RESET / BASE --------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 20px);
}
html,body{overflow-x:clip}
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:clamp(15.5px,.34vw + 14.6px,16.75px);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{list-style:none;padding:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
/* Focus indicator needs 3:1 against its ground: champagne only reaches 2.2:1
   on ivory, so light grounds use the antique ink and dark grounds champagne. */
:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px;border-radius:1px}
.section--process :focus-visible,
.footer :focus-visible,
.modal :focus-visible,
.ind:focus-visible{outline-color:var(--gold)}
::selection{background:rgba(201,163,94,.30)}

.skip-link{
  position:absolute;left:16px;top:-72px;z-index:200;
  background:var(--navy);color:var(--ivory);
  padding:12px 18px;font-size:.82rem;letter-spacing:.06em;
  transition:top .2s var(--ease);
}
.skip-link:focus-visible{top:16px}

/* ------------------------------- 3. LAYOUT ------------------------------- */
.shell{
  width:min(100%, calc(var(--shell) + var(--gutter) * 2));
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{padding-block:var(--section-y);position:relative}
/* Flat ivory everywhere read washed-out; each light section now carries a
   shallow vertical gradient so the page has tonal range between the navy bands. */
.section--services{background:linear-gradient(180deg,#F8F6F2 0%,#EEE9E0 100%)}

/* Industries runs dark: the tiles are photographic and the page needs a band
   of weight between the hero and the process section. */
.section--industries{
  background:
    radial-gradient(75% 55% at 88% 6%, rgba(201,163,94,.16) 0%, rgba(201,163,94,0) 62%),
    linear-gradient(180deg,#0B1F36 0%,#07182D 55%,#0A1E33 100%);
  color:var(--ivory);
}
.section--industries .display{color:var(--ivory)}
.section--industries .display__accent{color:var(--gold)}
.section--industries .eyebrow{color:var(--gold)}
.section--industries .section__head{border-bottom-color:var(--line-dark)}
.section--industries .section__head-copy{color:var(--on-dark)}
.section--why{background:linear-gradient(180deg,#F8F6F2 0%,#EFEBE3 100%)}
.section--estimate{
  background:
    radial-gradient(80% 50% at 12% 4%, rgba(201,163,94,.12) 0%, rgba(201,163,94,0) 58%),
    linear-gradient(180deg,#EFEAE2 0%,#E3DED3 100%);
}

.section__head{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(24px,4vw,72px);
  align-items:end;
  padding-bottom:clamp(40px,4.6vw,68px);
  margin-bottom:clamp(38px,4.4vw,60px);
  border-bottom:1px solid var(--line);
}
.section__head-copy{
  color:var(--ink-soft);
  font-size:1.02rem;
  max-width:46ch;
}

/* ----------------------------- 4. TYPOGRAPHY ----------------------------- */
.display{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-.022em;
  line-height:1.0;
  text-wrap:balance;
  color:var(--navy);
}
.display--xl{font-size:clamp(2.75rem,1.35rem + 4.55vw,4.9rem);line-height:.97;letter-spacing:-.03em}
.display--lg{font-size:clamp(2.15rem,1.28rem + 2.85vw,3.5rem);line-height:1.0}
.display--md{font-size:clamp(1.8rem,1.25rem + 1.9vw,2.55rem);line-height:1.05}
.display--onDark{color:var(--ivory)}
.display__accent{color:var(--gold-display)}
.display--onDark .display__accent{color:var(--gold)}

.eyebrow{
  font-family:var(--font-body);
  font-size:.715rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold-ink);
  margin-bottom:clamp(14px,1.4vw,22px);
  display:flex;
  align-items:center;
  gap:.85em;
}
.eyebrow::before{
  content:"";
  width:26px;height:1px;
  background:currentColor;
  opacity:.7;
  flex:none;
}
.eyebrow--gold{color:var(--gold)}
.eyebrow__m{display:none} /* mobile-only wording for the hero eyebrow; shown <=767px */

.lead{
  font-size:clamp(1.02rem,.96rem + .28vw,1.16rem);
  line-height:1.62;
  color:var(--ink-soft);
  max-width:52ch;
}
.lead--onDark{color:var(--on-dark)}

.placeholder{
  color:var(--ink-faint);
  font-style:italic;
}
.footer .placeholder{color:var(--on-dark-faint)}

/* ------------------------------- 5. BUTTONS ------------------------------ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.7em;
  padding:1.06rem 1.7rem;
  font-family:var(--font-body);
  font-size:.755rem;
  font-weight:600;
  letter-spacing:.135em;
  text-transform:uppercase;
  line-height:1;
  border:1px solid transparent;
  border-radius:var(--radius);
  white-space:nowrap;
  transition:transform .35s var(--ease), background-color .3s var(--ease),
             border-color .3s var(--ease), color .3s var(--ease), box-shadow .35s var(--ease);
}
.btn__arrow{transition:transform .35s var(--ease);will-change:transform}
.btn:hover{transform:translateY(-2px)}
.btn:hover .btn__arrow{transform:translateX(3px)}
.btn:active{transform:translateY(0)}
.btn--sm{padding:.85rem 1.25rem;font-size:.7rem}
.btn--block{width:100%}

.btn--gold{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.btn--gold:hover{background:var(--gold-deep);border-color:var(--gold-deep);box-shadow:0 12px 30px -18px rgba(7,24,45,.75)}
.btn--gold:focus-visible{outline-color:var(--navy)}

.btn--navy{background:var(--navy);color:var(--ivory);border-color:var(--navy)}
.btn--navy:hover{background:var(--navy-700);border-color:var(--navy-700);box-shadow:0 12px 30px -18px rgba(7,24,45,.7)}

.btn--ghost{border-color:var(--line-strong);color:var(--navy)}
.btn--ghost:hover{border-color:var(--navy);background:rgba(7,24,45,.03)}

.btn--quiet{color:var(--on-dark);border-color:transparent;letter-spacing:.1em}
.btn--quiet:hover{color:var(--ivory);background:rgba(247,245,240,.07)}

/* ---------------------------- 6. HEADER / NAV ---------------------------- */
.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:60;
  border-bottom:1px solid transparent;
  transition:background-color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header:not(.is-stuck) .brand{color:var(--ivory)}
.site-header:not(.is-stuck) .brand__sub{color:var(--on-dark-faint)}
.site-header:not(.is-stuck) .nav__list a{color:var(--ivory)}
.site-header:not(.is-stuck) .burger__bar{background:var(--ivory)}
.site-header:not(.is-stuck) :focus-visible{outline-color:var(--gold)}
.site-header.is-stuck{
  background:rgba(247,245,240,.82);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom-color:var(--line);
  box-shadow:0 14px 34px -30px rgba(7,24,45,.9);
}
.site-header__inner{
  height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.brand{display:inline-flex;align-items:center;gap:.7rem;color:var(--navy)}
/* The monogram is the client's own mark; logotypes are exempt from the text
   contrast floor, so it keeps the true champagne rather than the ink tone. */
.brand__mark{
  display:block;
  width:32px;height:35px;   /* viewBox 457x496 */
  color:var(--gold);
  flex:none;
  transition:opacity .3s var(--ease);
}
.brand__glyph{width:100%;height:100%;display:block}
.brand:hover .brand__mark{opacity:.82}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.brand__text{display:flex;flex-direction:column;line-height:1}
.brand__name{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1rem;
  letter-spacing:.19em;
}
.brand__sub{
  font-size:.6rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-top:.42em;
}

.nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,40px)}
.nav__list{display:flex;align-items:center;gap:clamp(16px,1.9vw,32px)}
.nav__list a{
  position:relative;
  font-size:.845rem;
  font-weight:500;
  color:var(--navy);
  padding-block:6px;
  transition:color .3s var(--ease);
}
.nav__list a::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;
  height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:right;
  transition:transform .38s var(--ease);
}
.nav__list a:hover::after,.nav__list a:focus-visible::after{transform:scaleX(1);transform-origin:left}

.burger{
  display:none;
  width:44px;height:44px;
  align-items:center;justify-content:center;
  flex-direction:column;gap:6px;
  margin-right:-10px;
}
.burger__bar{
  display:block;width:22px;height:1.5px;background:var(--navy);
  transition:transform .35s var(--ease), opacity .25s var(--ease);
}
.burger[aria-expanded="true"] .burger__bar:first-child{transform:translateY(3.75px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__bar:last-child{transform:translateY(-3.75px) rotate(-45deg)}
.nav-scrim{
  position:fixed;inset:0;z-index:50;
  background:rgba(7,24,45,.42);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .35s var(--ease);
}
.nav-scrim.is-open{opacity:1}

/* -------------------------------- 7. HERO -------------------------------- */
.hero{
  position:relative;
  display:flex;
  align-items:stretch;
  min-height:clamp(600px,100svh,940px);
  padding-top:var(--header-h);
  overflow:hidden;
  background:var(--navy); /* fallback fill while the photo loads */
}
.hero__content{
  position:relative;
  display:flex;
  align-items:center;
  z-index:2;
  width:100%;
  padding:clamp(40px,6vh,80px) clamp(28px,3.4vw,64px) clamp(48px,7vh,88px) var(--bleed);
  color:var(--ivory);
}
.hero__glow{
  position:absolute;
  z-index:0;
  left:-12%;bottom:-26%;
  width:52%;aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(201,163,94,.26) 0%, rgba(201,163,94,0) 68%);
  pointer-events:none;
  animation:hero-drift 22s ease-in-out infinite;
}
@keyframes hero-drift{
  0%,100%{transform:translate3d(-4%,3%,0) scale(1)}
  50%{transform:translate3d(5%,-3%,0) scale(1.1)}
}
.hero__content-inner{position:relative;z-index:2}

/* Hero type sits on navy now. */
.hero .display{color:var(--ivory)}
.hero .display__accent{color:var(--gold)}
.hero .eyebrow{color:var(--gold)}
.hero__lead{color:var(--on-dark)}
.hero .trust{border-top-color:var(--line-dark)}
.hero .trust__label{color:var(--ivory)}
.hero__content .btn--ghost{border-color:rgba(247,245,240,.30);color:var(--ivory)}
.hero__content .btn--ghost:hover{border-color:var(--ivory);background:rgba(247,245,240,.08)}
.hero__content :focus-visible{outline-color:var(--gold)}
.hero__content-inner{width:100%;max-width:600px}
.hero__title{margin-bottom:clamp(18px,2vw,26px)}
.hero__lead{margin-bottom:clamp(28px,3vw,40px);max-width:44ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:clamp(40px,5vw,64px)}

.trust{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,26px);
  padding-top:clamp(22px,2.4vw,30px);
  border-top:1px solid var(--line);
}
.trust__rule{display:block;width:22px;height:1px;background:var(--gold);margin-bottom:10px}
.trust__label{
  display:block;
  font-size:.775rem;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--navy);
  line-height:1.35;
}

/* Full-bleed photo background: covers the whole .hero box (text included),
   not just a side column. .hero__stage/.hero__frame are already inset:0, so
   making this their absolute-positioned parent is enough — no DOM change. */
.hero__media{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--navy)}
.hero__stage{position:absolute;inset:0;perspective:1400px;transform-style:preserve-3d}
.hero__frame{position:absolute;inset:0;margin:0;overflow:hidden}
.hero__frame img{width:100%;height:100%;object-fit:cover;object-position:64% 20%}
.hero__media::after{
  content:"";
  position:absolute;inset:0;z-index:2;pointer-events:none;
  /* Desktop: solid navy behind the text on the left, clearing smoothly
     toward the right so the crew stays visible with no hard seam. */
  background:linear-gradient(
    90deg,
    rgba(5,24,44,.98) 0%,
    rgba(5,24,44,.94) 30%,
    rgba(5,24,44,.72) 52%,
    rgba(5,24,44,.25) 76%,
    rgba(5,24,44,.08) 100%
  );
}
@media (max-width:900px){
  /* Pushed low and to the right so the crew sits under/beside the trust
     list rather than directly behind the headline — present, not competing
     with the copy. */
  .hero__frame img{object-position:82% 78%}
  .hero__media::after{
    /* Mobile: a near-uniform vertical wash — the photo is now the page's
       whole background, so legibility comes from consistent depth, not a
       fade to clear. */
    background:linear-gradient(
      180deg,
      rgba(5,24,44,.96) 0%,
      rgba(5,24,44,.93) 55%,
      rgba(5,24,44,.85) 100%
    );
  }
}


/* ------------------------------- 8. MARQUEE ------------------------------ */
.marquee{overflow:hidden;position:relative}
.marquee--primary{
  background:var(--navy);
  color:var(--ivory);
  padding-block:clamp(16px,1.7vw,22px);
}
.marquee--secondary{
  background:var(--ivory);
  color:var(--navy);
  padding-block:clamp(13px,1.4vw,18px);
  border-block:1px solid var(--line);
}
.marquee__track{
  display:flex;
  width:max-content;
  will-change:transform;
  animation:marquee-scroll var(--marquee-duration,34s) linear infinite;
}
.marquee__list{
  display:flex;
  align-items:center;
  gap:clamp(20px,2.2vw,34px);
  padding-right:clamp(20px,2.2vw,34px);
  font-family:var(--font-display);
  font-size:clamp(.78rem,.72rem + .3vw,.95rem);
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  white-space:nowrap;
}
.marquee--secondary .marquee__list{
  font-size:clamp(.68rem,.64rem + .22vw,.8rem);
  letter-spacing:.26em;
  color:var(--ink-soft);
}
.marquee__list li[aria-hidden]{color:var(--gold);font-size:.8em}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marquee-scroll{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

/* ------------------------------ 9. SERVICES ------------------------------ */
.services__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(26px,3vw,52px);
}
/* Two cards now (residential removed): keep the same staircase rhythm the
   three-card layout had, just with one fewer step. */
.services__grid > *:nth-child(2){margin-top:clamp(32px,4vw,64px)}

.service__index{
  display:inline-flex;
  align-items:center;
  gap:.75em;
  font-family:var(--font-display);
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.16em;
  color:var(--gold-ink);
  margin-bottom:14px;
}
.service__index::after{content:"";width:34px;height:1px;background:currentColor;opacity:.55}
.service__media{
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--ivory-300);
  margin-bottom:clamp(18px,1.8vw,24px);
}
.service__media img{width:100%;height:100%;object-fit:cover}
.service__title{
  font-family:var(--font-display);
  font-size:clamp(1.22rem,1.05rem + .5vw,1.45rem);
  font-weight:600;
  letter-spacing:-.012em;
  color:var(--navy);
  margin-bottom:.55em;
}
.service__copy{color:var(--ink-soft);font-size:.965rem;max-width:40ch}

/* Label and CTA share one row; the list then uses the full column width. */
.capabilities{
  margin-top:clamp(44px,5vw,76px);
  padding-top:clamp(24px,2.6vw,36px);
  border-top:1px solid var(--line);
}
.capabilities__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
  margin-bottom:clamp(14px,1.6vw,22px);
}
.capabilities__label{
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.capabilities__list{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:clamp(16px,2vw,36px);
}
.capabilities__list li{
  position:relative;
  display:flex;
  align-items:baseline;
  gap:.7em;
  padding-left:22px;
  padding-block:clamp(13px,1.3vw,18px);
  border-bottom:1px solid var(--line);
  font-size:.925rem;
  font-weight:500;
  color:var(--navy);
  line-height:1.35;
}
.capabilities__list li::before{
  content:"";
  position:absolute;left:0;top:calc(50% - 3px);
  width:6px;height:6px;
  border:1px solid var(--gold);
  transform:rotate(45deg);
}

/* ----------------------------- 10. INDUSTRIES ---------------------------- */
.industries{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(12px,1.3vw,20px);
}
.ind{
  position:relative;
  display:block;
  overflow:hidden;
  background:#050F1C;
  color:var(--ivory);
  isolation:isolate;
  box-shadow:0 0 0 1px rgba(247,245,240,.09);
  transition:box-shadow .4s var(--ease);
}
.ind:hover,.ind:focus-visible{box-shadow:0 0 0 1px rgba(201,163,94,.55)}
.ind__media{margin:0;height:100%;overflow:hidden}
.ind__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.ind::after{
  content:"";
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,15,28,0) 38%,rgba(5,15,28,.55) 68%,rgba(5,15,28,.92) 100%);
}
.ind:hover img,.ind:focus-visible img{transform:scale(1.03)}
.ind__body{
  position:absolute;z-index:2;left:0;right:0;bottom:0;
  padding:clamp(16px,1.7vw,26px);
  padding-top:clamp(26px,2.6vw,40px);
}
.ind__index{
  display:flex;
  align-items:center;
  gap:.7em;
  font-family:var(--font-body);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:.7em;
}
.ind__index::before{content:"";width:16px;height:1px;background:currentColor;flex:none;opacity:.8}
.ind__title{
  font-family:var(--font-display);
  font-size:clamp(1.05rem,.92rem + .5vw,1.42rem);
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.15;
}
.ind__copy{
  font-size:.86rem;
  line-height:1.5;
  color:var(--on-dark);
  max-width:34ch;
  margin-top:.5em;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.ind:hover .ind__copy,.ind:focus-visible .ind__copy{opacity:1;transform:translateY(0)}
.ind__body::before{
  content:"";
  position:absolute;left:clamp(16px,1.7vw,26px);top:0;
  width:38px;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);
}
.ind:hover .ind__body::before,.ind:focus-visible .ind__body::before{transform:scaleX(1)}

.ind--dominant{grid-column:1 / 8}
.ind--dominant .ind__media{aspect-ratio:16/10}
.ind--tall{grid-column:8 / 13;grid-row:1 / 3}
.ind--wide{grid-column:1 / 8}
.ind--wide .ind__media{aspect-ratio:16/7}
.ind--small{grid-column:span 4}
.ind--small .ind__media{aspect-ratio:4/3}
.ind--small .ind__title{font-size:clamp(.98rem,.9rem + .3vw,1.12rem)}
.ind--small .ind__copy{font-size:.8rem}

/* Hidden at every width by default; only @media (max-width:767px) reveals
   it, so desktop and the tablet mosaic never see it. */
.industries__hint{display:none}

/* ---------------------------- 11. WHY AMERICA ---------------------------- */
.why{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
}
.why__lead{margin-top:clamp(18px,2vw,26px);max-width:50ch}
.pillars{margin-top:clamp(34px,4vw,54px);border-top:1px solid var(--line)}
.pillar{
  display:flex;
  gap:clamp(16px,1.8vw,26px);
  padding-block:clamp(20px,2.3vw,30px);
  border-bottom:1px solid var(--line);
}
.pillar__icon{
  flex:none;
  display:grid;place-items:center;
  width:44px;height:44px;
  border:1px solid rgba(201,163,94,.42);
  color:var(--gold-ink);
  transition:border-color .35s var(--ease), background-color .35s var(--ease);
}
.pillar:hover .pillar__icon{border-color:var(--gold);background:rgba(201,163,94,.08)}
.pillar__title{
  font-family:var(--font-display);
  font-size:clamp(1.05rem,.96rem + .35vw,1.2rem);
  font-weight:600;
  color:var(--navy);
  margin-bottom:.35em;
}
.pillar__copy{color:var(--ink-soft);font-size:.945rem;max-width:52ch}

.why__content{position:relative;z-index:2;max-width:600px}

/* Full-bleed background photo, matching the Hero's technique: the classic
   "break out of the constrained .shell parent" trick — 100vw centered on
   the viewport midpoint — so the photo spans the whole section rather than
   just the .shell's own max-width column. Anchors to .section's own
   position:relative (set in the Layout block), so top/bottom:0 covers the
   section's full height, which the content column alone now determines
   since the photo no longer participates in the grid. */
.why__media{
  position:absolute;
  top:0;bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  z-index:0;
  display:flex;
}
.why__frame{position:relative;flex:1;min-height:360px;margin:0;overflow:hidden;background:var(--ivory-300)}
.why__frame img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.why__frame::after{
  content:"";
  position:absolute;inset:0;z-index:1;pointer-events:none;
  /* Off-white (the section's own ground colour) solid behind the text,
     clearing smoothly to the right where the photo stays uncovered. */
  background:linear-gradient(
    90deg,
    rgba(248,246,242,1) 0%,
    rgba(248,246,242,.98) 40%,
    rgba(248,246,242,.82) 58%,
    rgba(248,246,242,.20) 80%,
    rgba(248,246,242,0) 100%
  );
}
/* The scope sheet is the section's evidence, so it gets its own full-width
   band. Overlapping it onto the photo cropped the subject at the knees and
   squeezed the rows into a 460px column — it read as a collision, not layering. */
.scope-band{margin-top:clamp(48px,6vw,88px)}
.scope{
  background:var(--white);
  border:1px solid var(--line);
  border-top:2px solid var(--gold);
  padding:clamp(22px,2.6vw,34px) clamp(22px,3vw,40px) clamp(18px,2.2vw,28px);
  box-shadow:0 40px 80px -60px rgba(7,24,45,.5);
}
.scope__head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(18px,3vw,56px);
  align-items:end;
  padding-bottom:clamp(14px,1.6vw,20px);
  margin-bottom:clamp(6px,1vw,12px);
  border-bottom:1px solid var(--line);
}
.scope__list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(28px,4.5vw,80px);
}
.scope__label{
  font-size:.64rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold-ink);
}
.scope__title{
  font-family:var(--font-display);
  font-size:clamp(1.06rem,.96rem + .4vw,1.28rem);
  font-weight:600;
  color:var(--navy);
  margin-top:.4em;
}
.scope__list li{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding-block:clamp(9px,1vw,12px);
  border-bottom:1px solid var(--line);
}
.scope__task{font-size:.92rem;color:var(--navy);line-height:1.35}
.scope__freq{
  flex:none;
  font-size:.63rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-ink);
}
.scope__note{
  font-size:.78rem;
  line-height:1.55;
  color:var(--ink-faint);
  max-width:44ch;
}

/* ------------------------------ 12. PROCESS ------------------------------ */
.section--process{
  position:relative;
  background:var(--navy);
  color:var(--ivory);
  overflow:hidden;
}
.process__bg{position:absolute;inset:0;z-index:0;opacity:.16}
.process__bg img{width:100%;height:100%;object-fit:cover}
.section--process::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,var(--navy) 0%,rgba(7,24,45,.68) 42%,var(--navy) 100%),
    linear-gradient(90deg,rgba(7,24,45,.9) 0%,rgba(7,24,45,.35) 60%);
}
.process{position:relative;z-index:2}
.process__head{max-width:760px}
.process__lead{margin-top:clamp(18px,2vw,26px)}

.timeline{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,2.4vw,44px);
  margin-top:clamp(78px,9vw,132px);
  padding-top:clamp(76px,7vw,96px);
}
.timeline__rail{
  position:absolute;
  top:clamp(76px,7vw,96px);
  left:0;right:0;height:1px;
  background:rgba(201,163,94,.34);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.6s var(--ease);
}
.timeline.is-in .timeline__rail{transform:scaleX(1)}
.step{position:relative;padding-top:clamp(24px,2.4vw,34px)}
.step__num{
  position:absolute;
  top:clamp(-84px,-6.4vw,-62px);
  left:0;
  font-family:var(--font-display);
  font-size:clamp(2.6rem,1.6rem + 3vw,4rem);
  font-weight:600;
  letter-spacing:-.03em;
  line-height:1;
  color:rgba(201,163,94,.60);
}
.step__dot{
  position:absolute;top:-4.5px;left:0;
  width:9px;height:9px;
  background:var(--navy);
  border:1px solid var(--gold);
  transform:rotate(45deg) scale(0);
  transition:transform .5s var(--ease) var(--dot-delay,0ms);
}
.timeline.is-in .step__dot{transform:rotate(45deg) scale(1)}
.step__icon{display:block;color:var(--gold);margin-bottom:clamp(14px,1.5vw,20px)}
.step__title{
  font-family:var(--font-display);
  font-size:clamp(1rem,.9rem + .42vw,1.18rem);
  font-weight:600;
  letter-spacing:.02em;
  text-transform:uppercase;
  margin-bottom:.6em;
}
.step__copy{color:var(--on-dark);font-size:.9rem;line-height:1.55;max-width:32ch}

/* ------------------------------ 13. ESTIMATE ----------------------------- */
.estimate{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(38px,5vw,86px);
  align-items:start;
}
.estimate__lead{margin-top:clamp(18px,2vw,26px)}
.estimate__points{margin-top:clamp(28px,3vw,40px);border-top:1px solid var(--line)}
.estimate__points li{
  position:relative;
  padding:clamp(13px,1.3vw,17px) 0 clamp(13px,1.3vw,17px) 26px;
  border-bottom:1px solid var(--line);
  font-size:.93rem;
  color:var(--navy);
}
.estimate__points li::before{
  content:"";
  position:absolute;left:0;top:calc(50% - 3px);
  width:6px;height:6px;
  border:1px solid var(--gold);
  transform:rotate(45deg);
}

.form-panel{
  background:var(--white);
  border:1px solid var(--line);
  border-top:2px solid var(--gold);
  padding:clamp(22px,2.6vw,40px);
  box-shadow:0 40px 80px -60px rgba(7,24,45,.55);
}

/* The full form now lives on request-estimate.html; this card is what takes
   its place in the same slot, so it reuses .form-panel's box treatment. */
.estimate-cta__copy{
  color:var(--ink-soft);
  font-size:.96rem;
  line-height:1.6;
  margin-bottom:clamp(20px,2.4vw,28px);
}
.estimate-cta__alt{
  margin-top:clamp(16px,1.8vw,22px);
  font-size:.85rem;
  color:var(--ink-soft);
  text-align:center;
}
.estimate-cta__alt a{
  color:var(--gold-ink);
  text-decoration:underline;
  text-underline-offset:2px;
}
.estimate-cta__alt a:hover{color:var(--navy)}
.form__title{
  font-family:var(--font-display);
  font-size:1.16rem;
  font-weight:600;
  color:var(--navy);
  margin-bottom:clamp(18px,2vw,26px);
  padding-bottom:clamp(14px,1.5vw,20px);
  border-bottom:1px solid var(--line);
}
.field{margin-bottom:clamp(14px,1.5vw,18px)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,18px)}
.field label{
  display:block;
  font-size:.755rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--navy);
  margin-bottom:7px;
}
.req{color:var(--gold-ink)}
.opt{font-weight:400;letter-spacing:.02em;text-transform:none;color:var(--ink-faint)}
.field input,.field select,.field textarea{
  width:100%;
  padding:.82rem .9rem;
  background:var(--ivory);
  border:1px solid var(--line);
  border-radius:var(--radius);
  font-size:.94rem;
  color:var(--ink);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.field textarea{resize:vertical;min-height:104px}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,rgba(7,24,45,.5) 50%),linear-gradient(135deg,rgba(7,24,45,.5) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-right:2.4rem;
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-faint)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;
  background:var(--white);
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,163,94,.18);
}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none}
.field__error{
  margin-top:6px;
  font-size:.78rem;
  color:#9B2C2C;
}
.field.has-error input,.field.has-error select,.field.has-error textarea{
  border-color:#C0554F;
  box-shadow:0 0 0 3px rgba(192,85,79,.12);
}
.hp-field{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
/* Consent sits immediately above the submit control, where US phone and text
   outreach disclosure is expected to be. */
.form__consent{
  margin:clamp(14px,1.6vw,20px) 0 clamp(12px,1.4vw,16px);
  font-size:.775rem;
  line-height:1.55;
  color:var(--ink-soft);
}
.form__consent a{
  color:var(--gold-ink);
  text-decoration:underline;
  text-underline-offset:2px;
}
.form__consent a:hover{color:var(--navy)}
.form__status{margin-top:14px;font-size:.87rem;line-height:1.55}
.form__status:empty{margin:0}
.form__status.is-success{color:#1F6B45}
.form__status.is-error{color:#9B2C2C}

/* FAQ */
.faq{
  display:grid;
  grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:clamp(28px,4.5vw,80px);
  position:relative;
  margin-top:clamp(72px,9vw,128px);
  padding-top:clamp(44px,5vw,72px);
  align-items:start;
}
.faq::before{
  content:"";
  position:absolute;
  top:0;left:var(--gutter);right:var(--gutter);
  height:1px;background:var(--line);
}
.faq__head{position:sticky;top:calc(var(--header-h) + 40px)}
.acc{border-bottom:1px solid var(--line)}
.acc:first-child{border-top:1px solid var(--line)}
.acc h3{margin:0;font:inherit}
.acc__trigger{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  width:100%;
  padding:clamp(18px,1.9vw,24px) 0;
  text-align:left;
  font-family:var(--font-display);
  font-size:clamp(.98rem,.92rem + .3vw,1.1rem);
  font-weight:600;
  color:var(--navy);
  transition:color .25s var(--ease)}
.acc__trigger:hover{color:var(--gold-ink)}
.acc__icon{position:relative;flex:none;width:14px;height:14px}
.acc__icon::before,.acc__icon::after{
  content:"";position:absolute;inset:50% 0 auto 0;
  height:1px;background:var(--gold-ink);
  transition:transform .4s var(--ease);
}
.acc__icon::after{transform:rotate(90deg)}
.acc__trigger[aria-expanded="true"] .acc__icon::after{transform:rotate(0deg)}
.acc__panel{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .42s var(--ease);
}
/* The grid item itself must carry no padding, or its padding leaks into the
   collapsed 0fr track; the text padding lives on the paragraph inside it. */
.acc__inner{overflow:hidden;min-height:0;padding:0}
.acc__panel[data-open="false"] .acc__inner{visibility:hidden;transition:visibility 0s .42s}
.acc__panel[data-open="true"]{grid-template-rows:1fr}
.acc__panel p{
  color:var(--ink-soft);
  font-size:.945rem;
  max-width:64ch;
  padding-bottom:clamp(18px,1.9vw,26px);
}

/* ------------------------------- 14. FOOTER ------------------------------ */
.footer{background:var(--navy);color:var(--ivory);padding-top:clamp(48px,5vw,68px)}
.footer__inner{
  display:grid;
  grid-template-columns:minmax(280px,1.25fr) minmax(150px,.6fr) minmax(320px,1.15fr);
  gap:clamp(36px,5vw,80px);
  align-items:start;
  padding-bottom:clamp(42px,4.5vw,62px);
}
.brand--footer{color:var(--ivory);margin-bottom:20px}
.brand--footer .brand__mark{color:var(--gold)}
.brand--footer .brand__sub{color:var(--on-dark-faint)}
.footer__tagline{
  color:var(--on-dark);
  font-size:.925rem;
  max-width:38ch;
  margin-bottom:clamp(22px,2.4vw,30px);
}
.footer__heading{
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:clamp(14px,1.5vw,20px);
}
.footer__heading--spaced{margin-top:clamp(24px,2.6vw,32px)}
.footer__col ul li{margin-bottom:11px}
.footer__col a{
  font-size:.9rem;
  color:var(--on-dark);
  transition:color .25s var(--ease);
  position:relative;
}
.footer__col a:hover{color:var(--ivory)}
.footer__text{color:var(--on-dark);font-size:.88rem;line-height:1.6;max-width:36ch}
.footer__contact li{
  display:grid;
  grid-template-columns:74px minmax(0,1fr);
  gap:.8em;
  font-size:.88rem;
  color:var(--on-dark);
  margin-bottom:9px;
}
.footer__contact-label{
  min-width:0;
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--on-dark-faint);
  padding-top:.28em;
}
.footer__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
  padding-block:clamp(18px,2vw,26px);
  border-top:1px solid var(--line-dark);
  font-size:.8rem;
  color:var(--on-dark-faint);
}
.footer__legal{display:flex;gap:24px}
.footer__legal a{transition:color .25s var(--ease)}
.footer__legal a:hover{color:var(--on-dark)}

/* ------------------------------- 15. MODAL ------------------------------- */
.modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px}
.modal[hidden]{display:none}
.modal__backdrop{
  position:absolute;inset:0;
  background:rgba(7,24,45,.55);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  opacity:0;transition:opacity .3s var(--ease);
}
.modal__dialog{
  position:relative;
  width:min(100%,452px);
  background:var(--navy);
  color:var(--ivory);
  border:1px solid rgba(201,163,94,.34);
  padding:clamp(30px,3.4vw,44px);
  text-align:center;
  box-shadow:0 50px 90px -50px rgba(0,0,0,.9);
  opacity:0;
  transform:scale(.96);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.modal.is-open .modal__backdrop{opacity:1}
.modal.is-open .modal__dialog{opacity:1;transform:scale(1)}
.modal__close{
  position:absolute;top:12px;right:12px;
  width:38px;height:38px;
  display:grid;place-items:center;
  color:var(--on-dark);
  transition:color .25s var(--ease), background-color .25s var(--ease);
}
.modal__close:hover{color:var(--ivory);background:rgba(247,245,240,.08)}
.modal__eyebrow{
  font-size:.66rem;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);
}
.modal__figure{margin-top:clamp(16px,1.8vw,22px);line-height:1}
.modal__figure strong{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(3rem,2rem + 4vw,4.1rem);
  font-weight:700;
  letter-spacing:-.035em;
  color:var(--gold);
}
.modal__figure span{
  display:block;
  margin-top:.7em;
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ivory);
}
.modal__rule{
  display:block;width:46px;height:1px;
  background:rgba(201,163,94,.6);
  margin:clamp(20px,2.2vw,26px) auto;
}
.modal__copy{color:var(--on-dark);font-size:.95rem;max-width:34ch;margin-inline:auto}
.modal__actions{display:grid;gap:10px;margin-top:clamp(22px,2.4vw,30px)}

/* ----------------------------- 16. STICKY CTA ---------------------------- */
.sticky-cta{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:55;
  display:none;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(247,245,240,.94);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  transform:translateY(110%);
  transition:transform .45s var(--ease);
}
.sticky-cta.is-visible{transform:translateY(0)}

/* ---------------------------- WHATSAPP FAB -------------------------------- */
.whatsapp-fab{
  position:fixed;
  right:20px;
  bottom:calc(20px + env(safe-area-inset-bottom,0px));
  z-index:80; /* above sticky-cta (55) and header (60); below the modal (120) */
  width:56px;height:56px;
  display:grid;place-items:center;
  border-radius:50%;
  background:#25D366; /* WhatsApp brand green */
  color:#FFFFFF;
  box-shadow:0 10px 24px -8px rgba(7,24,45,.45);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.whatsapp-fab:hover{
  background:#20BD5A;
  transform:translateY(-2px);
  box-shadow:0 14px 30px -8px rgba(7,24,45,.55);
}
.whatsapp-fab:active{transform:translateY(0)}
.whatsapp-fab:focus-visible{outline:2px solid var(--navy);outline-offset:3px}

@media (max-width:720px){
  .whatsapp-fab{
    /* Clears the sticky "Get a Free Estimate" bar (~74–90px tall with its
       own safe-area padding) so the two never overlap, whether or not the
       bar is currently visible. */
    bottom:calc(88px + env(safe-area-inset-bottom,0px));
    right:16px;
    width:52px;height:52px;
  }
}

@media (prefers-reduced-motion:reduce){
  .whatsapp-fab{transition:none}
  .whatsapp-fab:hover{transform:none}
}

/* -------------------------------- 17. MOTION ----------------------------- */
.media{overflow:hidden}
[data-parallax] img{will-change:transform}

/* Display headings reveal line by line behind their own mask. */
.dl{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.dl__i{
  display:block;
  transform:translateY(112%);
  transition:transform .95s cubic-bezier(.22,.9,.28,1) var(--dl-delay,0ms);
}
.is-in .dl__i{transform:translateY(0)}
.no-js .dl__i{transform:none}

[data-anim="lines"]{opacity:1;transform:none;transition:none}

/* Images wipe open from their parent's reveal. Two rules here:
   1. The wipe is NOT driven by an observer on the figure itself — clip-path
      collapses the element's intersection rect to zero, so it would never be
      seen entering the viewport and would stay closed forever.
   2. The hero photo is deliberately excluded. It is the LCP element, and any
      entrance animation on it defers the paint the metric measures (it cost
      ~800ms when it had one). */
.wipe{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.05s cubic-bezier(.22,.9,.28,1) var(--wipe-delay,120ms);
}
.service.is-in .service__media,
.why__media.is-in .why__frame{clip-path:inset(0 0 0 0)}
.no-js .wipe{clip-path:none}

[data-anim]{
  opacity:0;
  transition:opacity .85s var(--ease-out), transform .85s var(--ease-out);
  transition-delay:var(--anim-delay,0ms);
}
[data-anim="up"]{transform:translateY(20px)}
[data-anim="up-sm"]{transform:translateY(12px)}
[data-anim="fade"]{transform:none}
[data-anim].is-in{opacity:1;transform:none}
.no-js [data-anim]{opacity:1;transform:none}

/* -------------------------------- 18. RESPONSIVE ------------------------- */
@media (max-width:1180px){
  .capabilities__list{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:1080px){
  .services__grid{grid-template-columns:minmax(0,1fr);gap:clamp(30px,4vw,44px)}
  .services__grid > *:nth-child(2),
  .services__grid > *:nth-child(3){margin-top:0}
  .service{
    display:grid;
    grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    column-gap:clamp(22px,3vw,40px);
    align-items:center;
    padding-bottom:clamp(28px,3.4vw,40px);
    border-bottom:1px solid var(--line);
  }
  .service:last-child{border-bottom:0;padding-bottom:0}
  .service__index{grid-column:2;margin-bottom:10px}
  .service__media{grid-row:1 / 4;grid-column:1;margin-bottom:0;aspect-ratio:4/3}
  .service__title{grid-column:2}
  .service__copy{grid-column:2;max-width:52ch}
}

@media (max-width:980px){
  :root{--header-h:66px}
  .nav{
    position:fixed;
    z-index:55;
    inset:0 0 auto auto;
    top:0;
    height:100dvh;
    width:min(86vw,360px);
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    padding:calc(var(--header-h) + 28px) 28px 32px;
    background:var(--ivory);
    border-left:1px solid var(--line);
    box-shadow:-30px 0 60px -40px rgba(7,24,45,.7);
    transform:translateX(100%);
    transition:transform .42s var(--ease);
    overflow-y:auto;
  }
  .nav.is-open{transform:translateX(0)}
  .site-header:not(.is-stuck) .nav .nav__list a{color:var(--navy)}
  .nav__list{flex-direction:column;align-items:stretch;gap:0}
  .nav__list li{border-bottom:1px solid var(--line)}
  .nav__list a{display:block;padding:16px 0;font-size:1.02rem}
  .nav__list a::after{display:none}
  .nav__cta{margin-top:26px;width:100%}
  .burger{display:flex}

  .why{gap:clamp(34px,5vw,52px)}
  .why__content{max-width:none}
  .why__media{
    /* Undo the desktop absolute breakout (back to a normal block, photo
       below the content) but still break out of .shell's own side padding
       — negative margin instead of the vw trick, since this stays in flow —
       so the photo reaches the true screen edges as required. */
    position:static;
    left:auto;transform:none;
    padding-left:0;max-width:none;margin-top:clamp(8px,2vw,20px);
    margin-inline:calc(-1 * var(--gutter));
    width:calc(100% + 2 * var(--gutter));
  }
  .scope__head{grid-template-columns:minmax(0,1fr);align-items:start;gap:12px}
  .scope__list{grid-template-columns:minmax(0,1fr)}
  .why__frame{aspect-ratio:4/5;flex:0 1 auto;min-height:0}
  .why__frame::after{
    /* Off-white easing down from the top edge — softens the seam where the
       content block ends, rather than the desktop left-to-right fade. */
    background:linear-gradient(
      180deg,
      rgba(248,246,242,1) 0%,
      rgba(248,246,242,.55) 18%,
      rgba(248,246,242,0) 38%
    );
  }

  .estimate{grid-template-columns:minmax(0,1fr);gap:clamp(32px,4vw,44px)}
  .faq{grid-template-columns:minmax(0,1fr);gap:clamp(20px,3vw,32px)}
  .faq__head{position:static}

  .footer__inner{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__brand{grid-column:1 / -1}
}

@media (max-width:900px){
  .hero__content{
    padding:clamp(34px,7vh,58px) var(--gutter) clamp(34px,5vh,48px);
  }
  .hero__content-inner{max-width:640px}
  .hero__actions .btn{flex:1 1 auto;min-width:220px}

  .section__head{
    grid-template-columns:minmax(0,1fr);
    align-items:start;
    gap:clamp(18px,3vw,26px);
  }

  .industries{grid-template-columns:repeat(6,minmax(0,1fr))}
  .ind--dominant{grid-column:1 / -1}
  .ind--tall{grid-column:1 / 4;grid-row:auto}
  .ind--tall .ind__media{aspect-ratio:4/5}
  .ind--wide{grid-column:4 / -1}
  .ind--wide .ind__media{aspect-ratio:4/5}
  .ind--small{grid-column:span 2}
  .ind__copy{opacity:1;transform:none}


  .timeline{
    grid-template-columns:minmax(0,1fr);
    gap:0;
    padding-top:0;
    margin-top:clamp(46px,6vw,64px);
    padding-left:34px;
  }
  .timeline__rail{
    top:6px;bottom:6px;left:4px;
    right:auto;width:1px;height:auto;
    transform:scaleY(0);transform-origin:top;
  }
  .timeline.is-in .timeline__rail{transform:scaleY(1)}
  .step{padding-top:0;padding-bottom:clamp(28px,4vw,40px)}
  .step:last-of-type{padding-bottom:0}
  .step__num{
    position:static;
    display:block;
    font-size:clamp(1.7rem,1.2rem + 2vw,2.2rem);
    margin-bottom:.2em;
  }
  .step__dot{top:14px;left:-34px}
  .step__icon{margin-bottom:12px}
  .step__copy{max-width:46ch}
}

/* ---------------------------------------------------------------------
   MOBILE-ONLY AUDIT FIXES (<=767px)
   Isolated on purpose: desktop keeps .94rem exactly as approved. Below
   767px, form fields need >=16px or iOS Safari auto-zooms the viewport on
   focus — the single confirmed defect from the 2026-08 mobile audit; every
   other reported symptom (hero cut off, header overlap, marquee overflow)
   did not reproduce in code or in a 320–767px browser sweep and was traced
   to a mid-scroll screenshot, not a layout bug. See the audit report.
   --------------------------------------------------------------------- */
@media (max-width:767px){
  .field input,.field select,.field textarea{font-size:16px}
}

@media (max-width:720px){
  .service{grid-template-columns:minmax(0,1fr)}
  .service__index,.service__title,.service__copy{grid-column:1}
  .service__media{grid-row:auto;grid-column:1;margin-bottom:18px;aspect-ratio:3/2}
  .service__index{margin-bottom:12px}

  .capabilities__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .field-row{grid-template-columns:minmax(0,1fr)}
  .footer__inner{grid-template-columns:minmax(0,1fr);gap:34px}
  .footer__bar{justify-content:flex-start;flex-direction:column;align-items:flex-start}
  .sticky-cta{display:block}
  body{padding-bottom:0}
}

@media (max-width:560px){
  .trust{grid-template-columns:minmax(0,1fr);gap:0}
  .trust__item{
    display:flex;
    align-items:center;
    gap:12px;
    padding-block:11px;
    border-bottom:1px solid var(--line);
  }
  .trust__item:last-child{border-bottom:0}
  .trust__rule{margin-bottom:0;flex:none}
  .hero__actions{gap:10px}
  .hero__actions .btn{width:100%;min-width:0}

  .capabilities__list{grid-template-columns:minmax(0,1fr)}
  .modal{padding:0;place-items:end center}
  .modal__dialog{
    width:100%;
    border-bottom:0;
    border-left:0;border-right:0;
    transform:translateY(16px) scale(1);
    padding-bottom:calc(clamp(26px,3.4vw,40px) + env(safe-area-inset-bottom,0px));
  }
  .modal.is-open .modal__dialog{transform:translateY(0) scale(1)}
  .form-panel{padding:20px 18px}
}

/* --------------------- INDUSTRIES — MOBILE SWIPE STRIP -------------------- *
 * <=767px only. Desktop and the 768–900px tablet mosaic (above) are          *
 * untouched — this block is placed last so it wins the cascade for every    *
 * property it repeats, without editing the earlier grid-mosaic rules.       *
 * Native scroll-snap, no JS: the reveal/parallax/hover wiring already on    *
 * these elements keeps working, it just now sits in a horizontal track.     */
@media (max-width:767px){
  .industries{
    display:flex;
    overflow-x:auto;
    overflow-y:hidden;
    gap:14px;
    padding-bottom:2px; /* keeps the focus-ring box-shadow from clipping */
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;
    scrollbar-width:none;     /* Firefox: hide the bar, keep the gesture */
    -ms-overflow-style:none;  /* legacy Edge */
  }
  .industries::-webkit-scrollbar{display:none} /* Chrome/Safari: same */

  .ind{
    flex:0 0 85vw;
    width:85vw;
    aspect-ratio:4/5;
    scroll-snap-align:start;
  }
  /* One consistent card shape for every variant — the dominant/tall/wide/
     small mosaic spans and per-variant media ratios only apply above this
     breakpoint; grid-column/grid-row are inert once the parent is a flex
     container, so they don't need to be reset. */
  .ind--dominant .ind__media,
  .ind--tall .ind__media,
  .ind--wide .ind__media,
  .ind--small .ind__media{aspect-ratio:auto}

  .industries__hint{
    display:block;
    margin-top:16px;
    font-size:.7rem;
    font-weight:500;
    letter-spacing:.14em;
    text-transform:uppercase;
    text-align:center;
    color:var(--on-dark-faint);
  }
}

/* ----------------------- WHY AMERICA — MOBILE PILLARS --------------------- *
 * <=767px only. Desktop keeps the plain list with its divider lines exactly *
 * as approved — this block only touches the mobile range, turning the four  *
 * pillars into a compact 2x2 grid of cards instead of a bordered list.      */
@media (max-width:767px){
  .pillars{
    margin-top:clamp(24px,5vw,40px);
    border-top:0; /* the long divider line is a list treatment; cards don't need it */
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(10px,2.6vw,14px);
  }
  .pillar{
    flex-direction:column;   /* icon on top, title/copy stacked below it */
    align-items:flex-start;
    gap:clamp(8px,2vw,12px);
    padding:clamp(14px,3.6vw,18px) clamp(12px,3.2vw,16px) clamp(16px,4vw,20px);
    border:1px solid var(--line);
    border-radius:6px;
    background:var(--white); /* a shade lighter than the section's own cream gradient */
  }
  .pillar__title{font-size:clamp(.86rem,.8rem + .5vw,.98rem)}
  .pillar__copy{font-size:clamp(.76rem,.72rem + .3vw,.85rem);max-width:none}
}

@media (max-width:340px){
  /* Too narrow for two comfortable columns — back to one, still cards. */
  .pillars{grid-template-columns:minmax(0,1fr)}
}

/* ----------------------- HERO — MOBILE COMPOSITION (<=767px) ------------- *
 * <=767px only. Desktop and the 768–900px range keep the full-bleed hero    *
 * exactly as approved. This block is placed last so it wins the cascade     *
 * over the earlier 900px / 560px hero rules for every property it repeats.  *
 * Goal: a compact first fold — a photo band (~40% of the fold) easing into  *
 * solid navy, the copy hierarchied on navy below it, lighter CTAs.          */
@media (max-width:767px){
  .hero{
    min-height:clamp(460px,76svh,620px);
    overflow:hidden;
  }

  /* The photo becomes a real band at the top of the fold (~40% of it), the
     rest of the hero is the section's own navy. Sizing the band to the
     viewport — not letting it span the whole tall hero — keeps both crew
     members in frame (object-fit then crops height, not width) and keeps the
     band ratio stable. svh tracks the fold with the browser bars shown; vh
     is the fallback. */
  .hero__media{
    inset:0 0 auto 0;
    height:clamp(224px,40vh,384px);
    height:clamp(224px,40svh,384px);
  }
  .hero__frame img{object-position:50% 24%}
  .hero__media::after{
    /* % here are now relative to the band, so the wash to solid navy lands
       at a predictable point — a blend into the copy area, not a hard seam. */
    background:linear-gradient(
      180deg,
      rgba(5,24,44,.10)  0%,
      rgba(5,24,44,.16)  46%,
      rgba(5,24,44,.55)  72%,
      rgba(5,24,44,.90)  90%,
      #05182C            100%
    );
  }

  /* Copy column starts just under the band and runs on solid navy. */
  .hero__content{
    align-items:flex-start;
    padding:clamp(158px,30vh,286px) var(--gutter) clamp(16px,3vh,24px);
    padding-top:clamp(158px,30svh,286px);
  }
  .hero__content-inner{max-width:100%}

  /* Eyebrow: shorter mobile wording, kept to one line where width allows,
     small, gold, tracked. */
  .eyebrow__d{display:none}
  .eyebrow__m{display:inline}
  .hero .eyebrow{
    margin-bottom:clamp(12px,3.4vw,18px);
    font-size:clamp(.58rem,.52rem + .3vw,.68rem);
    letter-spacing:.12em;
    text-wrap:balance;
  }
  .hero .eyebrow::before{width:20px}

  /* Headline: a step smaller, tighter leading, more air around it. Two
     visual lines preserved. */
  .hero .display--xl{
    font-size:clamp(1.82rem,1.3rem + 2.7vw,2.5rem);
    line-height:1.07;
    letter-spacing:-.025em;
  }
  .hero__title{margin-bottom:clamp(14px,3.8vw,20px)}

  /* Lead: narrower measure, one size down, calmer rhythm. Copy unchanged. */
  .hero__lead{
    max-width:38ch;
    font-size:clamp(.92rem,.88rem + .3vw,1rem);
    line-height:1.52;
    margin-bottom:clamp(14px,4vw,22px);
  }

  /* Actions stack. Primary = a near-full-width architectural bar: gold
     ground, left-set navy text, arrow in a small navy disc at the right. */
  .hero__actions{
    display:block;
    margin-bottom:clamp(22px,6vw,30px);
  }
  .hero__actions .btn--gold{
    display:flex;
    width:100%;
    min-width:0;
    min-height:56px;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    padding:0 .8rem 0 1.15rem;
    border-radius:4px;
    font-size:.74rem;
    letter-spacing:.12em;
    text-align:left;
  }
  .hero__actions .btn--gold .btn__arrow{
    flex:none;
    width:30px;height:30px;
    display:grid;place-items:center;
    border-radius:50%;
    background:var(--navy);
    color:var(--gold);
    font-size:.95rem;line-height:1;
  }
  .hero__actions .btn--gold:hover{transform:none}
  .hero__actions .btn--gold:active{transform:translateY(1px)}

  /* Secondary: no box — an editorial link with a gold rule before and a
     gold arrow after. Destination unchanged. */
  .hero__actions .btn--ghost,
  .hero__content .btn--ghost{
    display:inline-flex;
    align-items:center;
    gap:.7em;
    width:auto;
    min-height:44px;
    margin-top:14px;
    padding:0;
    border:0;
    background:none;
    color:var(--gold);
    font-size:.7rem;
    letter-spacing:.16em;
  }
  .hero__actions .btn--ghost::before{
    content:"";
    flex:none;
    width:22px;height:1px;
    background:currentColor;
  }
  .hero__actions .btn--ghost .btn__arrow{color:var(--gold)}
  .hero__actions .btn--ghost:hover,
  .hero__content .btn--ghost:hover{
    background:none;
    border:0;
    color:var(--gold);
    transform:none;
  }

  /* Trust: one compact horizontal band, split from the copy by a hairline
     gold rule, dot-separated. No per-item dashes, no cards. */
  .hero .trust{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    column-gap:.5em;
    row-gap:6px;
    margin-top:clamp(22px,6vw,28px);
    padding-top:clamp(13px,3.5vw,16px);
    border-top:1px solid rgba(201,163,94,.45);
  }
  .hero .trust__item{
    display:inline-flex;
    align-items:center;
    padding:0;
    border:0;
  }
  .hero .trust__rule{display:none}
  .hero .trust__item + .trust__item::before{
    content:"\2022";
    margin-right:.55em;
    color:var(--gold);
    opacity:.6;
  }
  .hero .trust__label{
    font-size:.63rem;
    font-weight:500;
    letter-spacing:.04em;
    line-height:1.3;
    color:var(--on-dark);
  }

  /* A quiet "more below" affordance at the foot of the fold. */
  .hero::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:12px;
    width:16px;height:16px;
    margin-left:-8px;
    border-right:1.5px solid rgba(247,245,240,.5);
    border-bottom:1.5px solid rgba(247,245,240,.5);
    transform:rotate(45deg);
    z-index:3;
    pointer-events:none;
  }

  /* WhatsApp: a touch smaller and tucked into the true bottom-right corner
     so it clears the trust band at the foot of the compact fold. When the
     sticky CTA bar appears (only once the hero is scrolled past — see
     stickyCta() in main.js) the button lifts to sit above it. Scoped to the
     landing page (:has(.hero)) so request-estimate.html keeps its own FAB. */
  body:has(.hero) .whatsapp-fab{
    width:48px;height:48px;
    right:16px;
    bottom:calc(32px + env(safe-area-inset-bottom,0px));
  }
  body:has(.hero):has(.sticky-cta.is-visible) .whatsapp-fab{
    bottom:calc(96px + env(safe-area-inset-bottom,0px));
  }
}

/* --------------------------- REQUEST-ESTIMATE PAGE ------------------------ *
 * Everything below is scoped to request-estimate.html's own classes — none  *
 * of it is referenced by index.html, so none of it can affect the landing   *
 * page. The shared components it reuses (.form-panel, .footer, .btn, ...)   *
 * are untouched above; this page just borrows them as-is.                  */
.request-page{padding-top:var(--header-h)}

.request-back{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-size:.82rem;
  font-weight:500;
  color:var(--ink-soft);
  transition:color .25s var(--ease);
}
.request-back:hover{color:var(--navy)}
.request-back--footer{color:var(--on-dark)}
.request-back--footer:hover{color:var(--ivory)}

.request-intro{padding-bottom:clamp(28px,4vw,44px)}
.request-intro .lead{margin-top:clamp(14px,1.8vw,20px)}

.request-form-section{padding-top:0}
.request-form-wrap{max-width:640px;margin-inline:auto}

.request-alt{
  margin-top:clamp(20px,2.4vw,28px);
  font-size:.85rem;
  color:var(--ink-soft);
  text-align:center;
}
.request-alt a{
  color:var(--gold-ink);
  text-decoration:underline;
  text-underline-offset:2px;
}
.request-alt a:hover{color:var(--navy)}

/* --------------------------- REDUCED MOTION ------------------------------ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    transition-delay:0ms!important;
  }
  [data-anim]{opacity:1!important;transform:none!important}
  .wipe{clip-path:none!important}
  .dl__i{transform:none!important}
  .hero__glow{animation:none!important}
  .timeline__rail{transform:none!important}
  .step__dot{transform:rotate(45deg) scale(1)!important}
  .ind__copy{opacity:1!important;transform:none!important}
  .marquee{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .marquee__track{animation:none!important;transform:none!important;width:auto}
  [data-parallax] img{transform:none!important}
}

@media print{
  .site-header,.sticky-cta,.modal,.marquee,.nav-scrim{display:none!important}
  body{background:#fff}
}