/* ============================================================
   VALLEY REIGN CONTRACTING
   Shared stylesheet for the home page and all seven service
   pages. Brand carried over from the existing site and Facebook
   identity: near black ground, silver ridgeline, violet accent,
   wide tracked caps.

   RADIUS SYSTEM (documented, applied everywhere):
     buttons  : pill (999px)
     cards    : 18px
     media    : 18px
     inputs   : 12px
   ACCENT LOCK: one accent only, var(--violet), on every section.
   THEME LOCK : the whole page is dark. No section inverts.
   ============================================================ */

:root{
  --ink:#0A0A0C;
  --ink-2:#101014;
  --ink-3:#16161C;
  --ink-4:#1D1D25;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.055);
  --text:#EDEEF2;
  --muted:#9AA1AE;
  --muted-2:#717885;
  --violet:#8450F3;
  --violet-lt:#A97FFF;
  --violet-dp:#4E22B0;
  --silver:#C6CBD4;
  --pure:#fff;
  --label:#B9BFCB;
  --placeholder:#767D8B;
  --font-body:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Anton','Oswald','Arial Narrow',system-ui,sans-serif;
  --font-cond:'Oswald','Arial Narrow',system-ui,sans-serif;
  --r-card:18px;
  --r-input:12px;
  --ease:cubic-bezier(.16,1,.3,1);
  --shell:min(1320px, 92vw);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--ink);
  color:var(--text);
  font-family:var(--font-body);
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--violet);color:var(--pure)}

.shell{width:var(--shell);margin-inline:auto}
.cap{
  font-family:var(--font-cond);
  font-size:11px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--violet-lt);
}
h1,h2{font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  line-height:.95;letter-spacing:.006em}
h3,h4{font-weight:500;line-height:1.12;letter-spacing:-.02em}
h1,h2{font-size:clamp(2.1rem,4.9vw,3.9rem)}   /* .hero h1 and .phero h1 override this */
/* brand card headline treatment: white line, violet line */
.hl{color:var(--violet-lt)}
h3{font-size:clamp(1.25rem,2vw,1.6rem);letter-spacing:-.015em;line-height:1.2}
p{max-width:62ch}
.lede{font-size:clamp(1rem,1.35vw,1.15rem);color:var(--muted);font-weight:300}

/* ===== 1. PRELOADER ===== */
#loader{
  position:fixed;inset:0;z-index:2000;
  background:var(--ink);
  display:grid;place-items:center;
  transition:transform .42s var(--ease), opacity .3s ease .12s;
}
#loader.done{transform:translateY(-101%);opacity:.9}
.load-inner{display:grid;justify-items:center;gap:36px;width:min(360px,80vw)}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* the client's stacked logo, split into its own parts and assembled on screen */
.load-mark{position:relative;width:min(340px,76vw);aspect-ratio:905/746}
.lp{position:absolute;height:auto;opacity:0;will-change:transform,opacity}
.lp-drop    {left:33.04%;top:0.27%;width:38.23%}
.lp-valley  {left:0.11%; top:26.27%;width:36.46%}
.lp-reign   {left:68.95%;top:26.27%;width:30.17%}
.lp-rules   {left:3.09%; top:35.52%;width:96.69%;transform-origin:center}
.lp-contract{left:10.28%;top:72.25%;width:82.32%}
.lp-sub     {left:15.36%;top:82.98%;width:72.27%}
@keyframes lpDrop {from{opacity:0;transform:translateY(-20%) scale(.86)}to{opacity:1;transform:none}}
@keyframes lpLeft {from{opacity:0;transform:translateX(-42%)}    to{opacity:1;transform:none}}
@keyframes lpRight{from{opacity:0;transform:translateX(42%)}     to{opacity:1;transform:none}}
@keyframes lpWipe {from{opacity:0;transform:scaleX(0)}           to{opacity:1;transform:none}}
@keyframes lpUp   {from{opacity:0;transform:translateY(46%)}     to{opacity:1;transform:none}}
@keyframes lpIn   {from{opacity:0;transform:translateY(16%)}     to{opacity:1;transform:none}}
.lp-drop    {animation:lpDrop  .66s var(--ease) .04s forwards}
.lp-valley  {animation:lpLeft  .52s var(--ease) .35s forwards}
.lp-reign   {animation:lpRight .52s var(--ease) .35s forwards}
.lp-rules   {animation:lpWipe  .50s var(--ease) .66s forwards}
.lp-contract{animation:lpUp    .48s var(--ease) .84s forwards}
.lp-sub     {animation:lpIn    .46s var(--ease) 1.04s forwards}
.load-track{
  width:100%;height:2px;background:rgba(255,255,255,.09);
  border-radius:999px;overflow:hidden;position:relative
}
.load-bar{
  position:absolute;inset:0;transform-origin:left center;transform:scaleX(0);
  background:linear-gradient(90deg,var(--violet-dp),var(--violet),var(--violet-lt));
  transition:transform .28s linear;
}
.load-pct{
  font-family:var(--font-cond);font-size:10px;font-weight:600;
  letter-spacing:.2em;color:var(--muted-2);margin-top:-22px
}

/* ===== 2. CUSTOM CURSOR ===== */
.cur-dot,.cur-ring{
  position:fixed;top:0;left:0;z-index:2100;pointer-events:none;
  border-radius:999px;mix-blend-mode:difference;
}
.cur-dot{width:6px;height:6px;background:var(--pure);margin:-3px 0 0 -3px}
.cur-ring{
  width:34px;height:34px;margin:-17px 0 0 -17px;
  border:1px solid rgba(255,255,255,.75);
  transition:width .28s var(--ease),height .28s var(--ease),
             margin .28s var(--ease),border-color .28s var(--ease),opacity .2s ease;
}
.cur-ring.hot{width:56px;height:56px;margin:-28px 0 0 -28px;border-color:var(--pure)}
body.has-cursor,body.has-cursor a,body.has-cursor button,
body.has-cursor input,body.has-cursor textarea,body.has-cursor select{cursor:none}
@media (pointer:coarse){.cur-dot,.cur-ring{display:none}}

/* ===== 3. NAV ===== */
header{
  position:fixed;top:0;left:0;right:0;z-index:900;
  height:112px;display:flex;align-items:center;
  transition:height .4s var(--ease),background .4s ease,border-color .4s ease;
  border-bottom:1px solid transparent;
}
header::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:rgba(10,10,12,.80);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  transition:opacity .4s ease;
}
header.stuck::before{opacity:1}
/* Rule 9 + Rule 11: while the drawer is open the header carries the burger above the
   panel, and its backdrop-filter is killed. filter/transform/backdrop-filter on an
   ancestor makes it the containing block for position:fixed descendants, which would
   anchor the drawer to the header bar instead of the viewport. */
body.menu-open header{z-index:1002}
body.menu-open header::before{
  opacity:1;backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--ink)
}
header.stuck{height:90px;border-bottom-color:var(--line-2)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:26px;width:var(--shell);margin-inline:auto}
.lockup{display:flex;align-items:center;flex:none}
.lockup img{height:88px;width:auto;object-fit:contain;transition:height .4s var(--ease)}
header.stuck .lockup img{height:70px}
.nav-links{display:flex;align-items:center;gap:34px}
/* nudge the menu right of dead centre. Desktop only: below the breakpoint
   .nav-links becomes the fixed, inset:0 drawer and any margin would offset it. */
@media (min-width:901px){ .nav-links{margin-left:clamp(40px,5.4vw,104px)} }
.nav-links a{
  font-size:16.5px;font-weight:400;color:var(--muted);position:relative;
  padding:8px 0;transition:color .3s ease;white-space:nowrap
}
.nav-actions{display:flex;align-items:center;gap:20px;flex:none}
.nav-tel{display:flex;align-items:center;gap:9px;white-space:nowrap;
  font-family:var(--font-cond);font-size:17px;font-weight:600;letter-spacing:.04em;
  color:var(--text);transition:color .3s ease}
.nav-tel svg{width:17px;height:17px;color:var(--violet-lt);flex:none;transition:color .3s ease}
.nav-tel:hover,.nav-tel:hover svg{color:var(--violet-lt)}
.nav-links a.drawer-cta{display:none}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--violet-lt);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease)
}
.nav-links a:hover{color:var(--text)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
/* flex column with an explicit gap: the bars sit exactly 6.5px off centre,
   which is the distance the open state rotates them back to. On a grid the
   rows stretch to fill the 40px box and the two halves never meet. */
.burger{display:none;width:40px;height:40px;padding:0;background:none;border:0;
  flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{display:block;width:20px;height:1.5px;background:var(--text);
  transition:transform .35s var(--ease),opacity .2s ease}
body.menu-open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ===== BUTTONS (pill) ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:50px;padding:0 28px;border-radius:999px;border:1px solid transparent;
  font-size:14.5px;font-weight:500;letter-spacing:.005em;white-space:nowrap;
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .18s var(--ease),border-color .35s ease,color .35s ease
}
.btn:active{transform:translateY(1px) scale(.985)}
.btn-primary{background:var(--violet);color:var(--pure)}
.btn-primary::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,var(--violet-lt),var(--violet));
  transform:translateX(-101%);transition:transform .5s var(--ease)
}
.btn-primary:hover::before{transform:none}
.btn-ghost{border-color:rgba(255,255,255,.24);color:var(--text);background:rgba(255,255,255,.03)}
.btn-ghost::before{
  content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.09);
  transform:translateY(101%);transition:transform .45s var(--ease)
}
.btn-ghost:hover{border-color:rgba(255,255,255,.5)}
.btn-ghost:hover::before{transform:none}
.btn-sm{height:44px;padding:0 26px;font-size:14px}
.btn-nav{height:54px;padding:0 38px;font-size:15.5px;letter-spacing:.01em}
.arrow{transition:transform .4s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}

/* ===== 4. HERO ===== */
.hero{position:relative;min-height:100dvh;display:flex;align-items:flex-end;
  padding-bottom:clamp(48px,7vh,84px);overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-media img{
  width:100%;height:118%;object-fit:cover;object-position:center 55%;
  transform:scale(1.12);opacity:0;filter:saturate(.85)
}
body.ready .hero-media img{
  animation:heroIn 2.4s var(--ease) .1s forwards
}
@keyframes heroIn{to{opacity:1;transform:scale(1)}}
.hero-scrim{position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to top,var(--ink) 2%,rgba(10,10,12,.86) 32%,rgba(10,10,12,.34) 62%,rgba(10,10,12,.62) 100%),
    radial-gradient(120% 80% at 12% 100%,rgba(132,80,243,.20),transparent 60%)}
.hero-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:48px;align-items:end;width:var(--shell);margin-inline:auto}
.hero-grid>div{text-shadow:0 2px 26px rgba(10,10,12,.75)}
.hero h1{
  font-size:clamp(2.35rem,5.8vw,4.9rem);font-weight:400;
  letter-spacing:.004em;line-height:1.06;margin:20px 0 24px;max-width:16ch
}
.hero-sub{font-family:var(--font-cond);font-weight:400;
  font-size:clamp(1.05rem,1.9vw,1.5rem);letter-spacing:.05em;
  color:var(--silver);max-width:34ch;margin-bottom:34px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-side{padding-bottom:6px}
.hero-side .k{
  font-family:var(--font-cond);font-size:10px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--muted-2);
  padding-top:14px;border-top:1px solid var(--line);display:block;margin-bottom:8px
}
.hero-side .v{font-size:15px;color:var(--text);font-weight:400}
.hero-side .row+.row{margin-top:22px}

/* Hero eyebrow. It used to ride in .rv-word, whose overflow:hidden clipped the
   text-shadow into a hard box. It now fades up on its own so the glow can fan out,
   with a stroke behind the fill to hold it against a bright sky. */
.cap-hero{
  display:inline-block;
  paint-order:stroke fill;
  -webkit-text-stroke:1.7px rgba(10,10,12,.6);
  text-shadow:
    0 0 9px  rgba(10,10,12,.92),
    0 0 24px rgba(10,10,12,.74),
    0 0 52px rgba(10,10,12,.55),
    0 0 92px rgba(10,10,12,.38);
  opacity:0;transform:translateY(12px)
}
body.ready .cap-hero{animation:capIn .85s var(--ease) .15s forwards}
@keyframes capIn{to{opacity:1;transform:none}}

/* the service page breadcrumb sits in the same place over the same kind of photo */
.phero .crumb{
  paint-order:stroke fill;
  -webkit-text-stroke:1.6px rgba(10,10,12,.55);
  text-shadow:0 0 9px rgba(10,10,12,.9),0 0 24px rgba(10,10,12,.7),0 0 52px rgba(10,10,12,.5)
}
.phero .crumb svg{-webkit-text-stroke:0;filter:drop-shadow(0 0 6px rgba(10,10,12,.9))}

/* word by word hero reveal */
.rv-word{display:inline-block;overflow:hidden;vertical-align:bottom}
.rv-word>span{display:inline-block;transform:translateY(105%);opacity:0}
body.ready .rv-word>span{animation:wordUp .95s var(--ease) forwards}

@keyframes wordUp{to{transform:none;opacity:1}}

/* Hero H1. Same problem the eyebrow had: the words ride in .rv-word, whose
   overflow:hidden clips the inherited 26px shadow flat against each word's box,
   so the glow reads as a dark highlighter bar instead of fanning out. The clip
   cannot stay, because it IS the shadow's edge, so the H1 words rise and fade
   on their own like .cap-hero does, with the same stroke-behind-fill glow.

   The glow is deliberately MUCH lighter than .cap-hero's, which looks wrong on
   paper and is right on screen. The eyebrow is 10px, so its shadow is a thin
   halo tracing thin letters. The H1 is up to 4.9rem of solid Anton, so the same
   alphas pool between the strokes and across the tight line gaps and the whole
   block goes black. Big type needs a weaker glow than small type, not a
   matching one. Keep the top layer at or under .55 alpha. */
.hero h1 .rv-word{overflow:visible}
.hero h1 .rv-word>span{
  paint-order:stroke fill;
  -webkit-text-stroke:1.1px rgba(10,10,12,.30);
  text-shadow:
    0 1px 10px rgba(10,10,12,.55),
    0 0 28px rgba(10,10,12,.36),
    0 0 62px rgba(10,10,12,.22);
  transform:translateY(14px)
}
body.ready .hero h1 .rv-word>span{animation:wordRise .95s var(--ease) forwards}
@keyframes wordRise{to{transform:none;opacity:1}}

/* Screen reader only. Used where a section needs a heading for document outline
   reasons but the design deliberately has no visible title. Never display:none,
   which removes it from the accessibility tree and from the outline as well. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0
}

/* ===== 5. PILLAR STRIP ===== */
.pillars{border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  background:var(--ink-2)}
.pillar-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.pillar{padding:38px 30px 40px;border-left:1px solid var(--line-2);position:relative;overflow:hidden}
.pillar:first-child{border-left:0}
.pillar::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--violet);transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease)}
.pillar:hover::after{transform:scaleX(1)}
.pillar svg{width:26px;height:26px;color:var(--violet-lt);margin-bottom:16px}
.pillar h3{font-family:var(--font-cond);font-size:16.5px;font-weight:600;
  letter-spacing:.075em;text-transform:uppercase;margin-bottom:7px;line-height:1.25}
.pillar p{font-size:13.5px;color:var(--muted-2);line-height:1.5}

/* ===== SECTION RHYTHM ===== */
section{position:relative}
.pad{padding:clamp(84px,11vw,148px) 0}
.pad-sm{padding:clamp(64px,8vw,104px) 0}

/* ===== 6. INTRO / SPLIT ===== */
.intro-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(40px,6vw,90px);align-items:center}
.intro-copy h2{margin:20px 0 26px;max-width:16ch}
.intro-copy p+p{margin-top:16px}
.stamp{display:flex;align-items:center;gap:18px;margin-top:36px;
  padding-top:26px;border-top:1px solid var(--line)}
.stamp img{height:74px;width:auto;object-fit:contain;flex:none}
.stamp .t1{font-family:var(--font-cond);font-size:12.5px;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase}
.stamp .t2{font-size:13px;color:var(--muted-2)}
.intro-media{position:relative}
.intro-media .m1{border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/5}
.intro-media .m1 img{width:100%;height:100%;object-fit:cover}
.intro-media .m2{
  position:absolute;right:-6%;bottom:-9%;width:52%;aspect-ratio:1/1;
  border-radius:var(--r-card);overflow:hidden;border:8px solid var(--ink);
}
.intro-media .m2 img{width:100%;height:100%;object-fit:cover}

/* ===== 7. SERVICES BENTO (7 items, 7 cells) ===== */
.svc-head{display:grid;gap:18px;margin-bottom:52px;max-width:70ch}
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.cell{
  position:relative;border-radius:var(--r-card);overflow:hidden;
  border:1px solid var(--line-2);background:var(--ink-2);
  min-height:280px;display:flex;flex-direction:column;justify-content:flex-end;
  transition:border-color .45s ease,transform .5s var(--ease)
}
.cell:hover{border-color:rgba(169,127,255,.42);transform:translateY(-4px)}
.cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease),filter .6s ease;filter:saturate(.8) brightness(.72)}
.cell:hover img{transform:scale(1.055);filter:saturate(.95) brightness(.8)}
.cell .veil{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,10,12,.94) 6%,rgba(10,10,12,.55) 46%,rgba(10,10,12,.12) 100%)}
.cell .body{position:relative;padding:26px 26px 24px}
.cell h3{font-family:var(--font-cond);font-weight:600;letter-spacing:.055em;
  text-transform:uppercase;font-size:clamp(1.05rem,1.55vw,1.3rem);line-height:1.18;margin-bottom:8px}
.cell p{font-size:13.8px;color:var(--muted);line-height:1.5;max-width:44ch}
.cell .num{
  position:absolute;top:22px;right:24px;
  font-family:var(--font-cond);font-size:10px;font-weight:600;
  letter-spacing:.18em;color:rgba(255,255,255,.42)
}
/* row 1: two tall cards. row 2: three. row 3: two. seven cards, uniform photo treatment */
.c-a{grid-column:span 3;min-height:400px}
.c-b{grid-column:span 3;min-height:400px}
.c-c{grid-column:span 2}
.c-d{grid-column:span 2}
.c-e{grid-column:span 2}
.c-f{grid-column:span 3;min-height:320px}
.c-g{grid-column:span 3;min-height:320px}
/* before and after split, used by the artificial turf card */
.ba{position:absolute;inset:0;display:flex;gap:2px}
.ba-half{position:relative;flex:1 1 50%;overflow:hidden;margin:0}
.cell .ba-half img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-half figcaption{
  position:absolute;top:16px;left:16px;z-index:3;
  font-family:var(--font-cond);font-size:10px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--pure);
  padding:5px 11px;border-radius:100px;
  background:rgba(10,10,12,.66);border:1px solid var(--line)
}
.ba-half.is-after figcaption{background:var(--violet);border-color:transparent}

/* ===== 8. PARALLAX QUOTE BAND ===== */
.band{position:relative;min-height:clamp(440px,62vh,600px);
  display:grid;place-items:center;overflow:hidden;text-align:center}
.band-media{position:absolute;inset:-14% 0;z-index:-2}
.band-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.6) brightness(.38)}
.band::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(58% 68% at 50% 46%,rgba(10,10,12,.86),transparent 72%),
    linear-gradient(to bottom,var(--ink),rgba(10,10,12,.62) 26%,rgba(10,10,12,.62) 74%,var(--ink)),
    radial-gradient(70% 100% at 50% 100%,rgba(132,80,243,.26),transparent 65%)}
.band .shell{display:grid;justify-items:center;gap:26px}
.band blockquote{
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2rem,4.9vw,3.9rem);letter-spacing:.006em;
  line-height:.96;max-width:18ch
}
.band blockquote b{font-weight:400;color:var(--violet-lt)}
.band p{color:var(--muted);max-width:52ch;text-align:center}

/* ===== 9. PROCESS ===== */
.proc{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,6vw,88px)}
.steps{display:grid}
.step{display:grid;grid-template-columns:38px 1fr;gap:24px;padding:30px 0;
  border-top:1px solid var(--line-2);position:relative}
.step:last-child{border-bottom:1px solid var(--line-2)}
.step .dot{width:11px;height:11px;border-radius:999px;border:1px solid var(--violet-lt);
  margin-top:9px;position:relative}
.step .dot::after{content:"";position:absolute;inset:2px;border-radius:999px;
  background:var(--violet);transform:scale(0);transition:transform .5s var(--ease)}
.step.in .dot::after{transform:scale(1)}
.step h3{margin-bottom:8px;font-size:clamp(1.15rem,1.6vw,1.4rem)}
.step p{font-size:14.5px;color:var(--muted);max-width:52ch}
.proc-aside{align-self:start;position:sticky;top:140px}

/* ===== 10. WHY / TRUST ===== */
.why{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.why-item{
  padding:34px 32px 36px;border-radius:var(--r-card);
  border:1px solid var(--line-2);background:var(--ink-2);
  transition:border-color .4s ease,background .4s ease
}
.why-item:hover{border-color:rgba(169,127,255,.35);background:var(--ink-3)}
.why-item svg{width:24px;height:24px;color:var(--violet-lt);margin-bottom:18px}
.why-item h3{font-size:17px;font-weight:500;margin-bottom:9px}
.why-item p{font-size:14px;color:var(--muted);line-height:1.55}
.why-lead{max-width:22ch;margin-bottom:44px}

/* ===== 11. MARQUEE ===== */
.marq{overflow:hidden;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  padding:26px 0;background:var(--ink-2)}
.marq-track{display:flex;width:max-content;animation:slide 38s linear infinite}
.marq:hover .marq-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.marq-track span{
  font-family:var(--font-cond);font-size:clamp(13px,1.5vw,17px);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.30);
  padding:0 34px;display:flex;align-items:center;gap:34px;white-space:nowrap
}
.marq-track span i{width:5px;height:5px;border-radius:999px;background:var(--violet);
  display:block;flex:none;font-style:normal}

/* ===== 12. CONTACT ===== */
.contact{background:
  radial-gradient(90% 70% at 88% 8%,rgba(132,80,243,.16),transparent 62%),var(--ink)}
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,6vw,86px)}
.contact h2{max-width:13ch;margin:18px 0 22px}
.info{display:grid;gap:2px;margin-top:38px}
.info a,.info div{
  display:flex;align-items:center;gap:16px;padding:18px 0;
  border-top:1px solid var(--line-2);transition:color .3s ease
}
.info a:last-child,.info div:last-child{border-bottom:1px solid var(--line-2)}
.info svg{width:19px;height:19px;color:var(--violet-lt);flex:none}
.info .l{font-family:var(--font-cond);font-size:9.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);display:block;margin-bottom:3px}
.info .v{font-size:15.5px;color:var(--text)}
.info a:hover .v{color:var(--violet-lt)}

form{background:var(--ink-2);border:1px solid var(--line-2);
  border-radius:var(--r-card);padding:clamp(26px,3.4vw,42px)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:grid;gap:8px;margin-bottom:16px}
label{font-family:var(--font-cond);font-size:10px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--label)}
input,textarea,select{
  background:var(--ink);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-input);padding:14px 16px;font-size:15px;font-weight:300;
  transition:border-color .3s ease,box-shadow .3s ease;width:100%
}
select{appearance:none;background-image:
  linear-gradient(45deg,transparent 50%,var(--label) 50%),
  linear-gradient(135deg,var(--label) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
input::placeholder,textarea::placeholder{color:var(--placeholder)}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--violet-lt);
  box-shadow:0 0 0 3px rgba(132,80,243,.22)
}
textarea{resize:vertical;min-height:112px}
.help{font-size:12.5px;color:var(--muted-2)}
.form-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:8px}
.sent{
  display:none;align-items:center;gap:12px;padding:16px 18px;border-radius:var(--r-input);
  background:rgba(132,80,243,.14);border:1px solid rgba(169,127,255,.4);
  font-size:14.5px;margin-top:16px
}
.sent.show{display:flex}
.sent svg{width:18px;height:18px;color:var(--violet-lt);flex:none}

/* Success state. Build-Standards Forms: the whole form goes blank, every field,
   label and the submit button replaced, not merely cleared. The children are
   hidden rather than the form emptied so the #quoteForm anchor still resolves
   and the 29 buttons pointing at it keep working after a submit. */
form.is-sent{display:grid;place-items:center;min-height:320px;text-align:center}
form.is-sent>*{display:none}
form.is-sent .sent{
  display:grid;place-items:center;gap:20px;
  background:none;border:0;padding:0;margin:0;
  font-size:17px;color:var(--text)
}
form.is-sent .sent svg{width:60px;height:60px}
.sent-check circle{fill:none;stroke:var(--violet-lt);stroke-width:2;
  stroke-dasharray:151;stroke-dashoffset:151}
.sent-check path{fill:none;stroke:var(--violet-lt);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:40;stroke-dashoffset:40}
form.is-sent .sent-check circle{animation:checkRing .6s var(--ease) forwards}
form.is-sent .sent-check path{animation:checkTick .4s var(--ease) .42s forwards}
@keyframes checkRing{to{stroke-dashoffset:0}}
@keyframes checkTick{to{stroke-dashoffset:0}}

/* ===== 13. FOOTER ===== */
footer{border-top:1px solid var(--line-2);background:var(--ink-2);padding:56px 0 34px}
.f-top{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;
  padding-bottom:34px;border-bottom:1px solid var(--line-2)}
.f-lockup img{height:104px;width:auto;object-fit:contain}
.f-nav{display:flex;gap:28px;flex-wrap:wrap}
.f-nav a{font-size:14px;color:var(--muted);transition:color .3s ease}
.f-nav a:hover{color:var(--violet-lt)}
.f-services{padding:28px 0 4px;border-bottom:1px solid var(--line-2)}
.f-h{font-family:var(--font-cond);font-size:10px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted-2);display:block;margin-bottom:16px}
.f-slinks{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:11px 28px;padding-bottom:24px}
.f-slinks a{font-size:14px;color:var(--muted);transition:color .3s ease}
.f-slinks a:hover{color:var(--violet-lt)}
/* footer NAP. Same address string as the Google Business Profile, on every page. */
.f-nap{padding:26px 0 4px;border-bottom:1px solid var(--line-2)}
.f-nap address{font-style:normal;display:flex;flex-wrap:wrap;gap:8px 26px;margin-bottom:14px}
.f-nap address a,.f-nap address span{font-size:14.5px;color:var(--muted);transition:color .3s ease}
.f-nap address a:hover{color:var(--violet-lt)}
.f-area{font-size:13px;color:var(--muted-2);line-height:1.65;max-width:none;padding-bottom:22px}

/* ===== 20. SERVICE AREA ===== */
.area-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(38px,5.4vw,80px);align-items:start}
.area-grid h2{margin:18px 0 22px;max-width:16ch}
.area-grid .lede+.lede{margin-top:15px}
.area-grid .info{margin-top:34px}
/* The town list used to be two bulleted columns, which collapsed into one
   seventeen-item column on a phone: a tall grey ladder and nothing to look at.
   It is now a single panel of wrapping chips, so the same seventeen towns read
   as a place rather than a list, and they fold to three or four rows on a
   handset instead of seventeen. */
.area-cols{background:var(--ink-2);border:1px solid var(--line-2);
  border-radius:var(--r-card);padding:26px 24px 24px;position:relative;overflow:hidden}
.area-cols::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 62% at 8% 0%,rgba(132,80,243,.13),transparent 62%)}
.area-cols>*{position:relative}

/* Cobble Hill is not just another town on the list, it is where the yard is,
   so it is lifted out of the chips and given the panel's only solid accent. */
.area-hq{display:grid;grid-template-columns:auto 1fr;align-items:center;
  gap:0 13px;padding:13px 16px;margin:14px 0 0;
  border:1px solid rgba(132,80,243,.34);border-radius:14px;
  background:linear-gradient(120deg,rgba(132,80,243,.20),rgba(132,80,243,.05))}
.area-hq svg{grid-row:span 2;width:20px;height:20px;color:var(--violet-lt)}
.area-hq .l{font-family:var(--font-cond);font-size:10px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--violet-lt)}
.area-hq .v{font-size:16px;font-weight:500;color:var(--pure);letter-spacing:.01em}

.area-group+.area-group{margin-top:22px}
.area-cols .f-h{display:flex;align-items:center;gap:10px;color:var(--label)}
.area-cols .f-h::after{content:"";flex:1;height:1px;background:var(--line-2)}
.area-cols .f-h em{font-style:normal;letter-spacing:.14em;color:var(--muted-2);order:3}

.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{font-size:13.5px;color:var(--silver);line-height:1;
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 13px 9px 11px;border:1px solid var(--line);border-radius:999px;
  background:rgba(255,255,255,.022);
  transition:border-color .35s var(--ease),background .35s var(--ease),color .35s var(--ease)}
.chip::before{content:"";width:4px;height:4px;border-radius:999px;
  background:var(--violet);flex:none;opacity:.75;
  transition:opacity .35s var(--ease),box-shadow .35s var(--ease)}
.area-note{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-2);
  font-size:13px;color:var(--muted-2);line-height:1.6;max-width:none}

@media (hover:hover){
  .chip:hover{border-color:rgba(132,80,243,.5);background:rgba(132,80,243,.10);color:var(--pure)}
  .chip:hover::before{opacity:1;box-shadow:0 0 8px rgba(132,80,243,.9)}
}

.f-bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-top:26px;font-size:12.5px;color:var(--muted-2)}
.f-bot a:hover{color:var(--violet-lt)}

/* ===== SCROLL REVEAL ===== */
.rv{opacity:0;transform:translateY(30px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-media{opacity:0;transform:scale(1.04);filter:blur(6px);
  transition:opacity 1.1s var(--ease),transform 1.3s var(--ease),filter 1.1s var(--ease)}
.rv-media.in{opacity:1;transform:none;filter:none}
[data-d="1"]{transition-delay:.08s}
[data-d="2"]{transition-delay:.16s}
[data-d="3"]{transition-delay:.24s}
[data-d="4"]{transition-delay:.32s}
[data-d="5"]{transition-delay:.40s}

/* ===== RESPONSIVE ===== */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr}
  .hero-side{display:none}
  .c-a,.c-b,.c-c,.c-d,.c-e,.c-f,.c-g{grid-column:span 3}
  .c-a{min-height:320px}.c-b{min-height:320px}
}
@media (max-width:900px){
  /* ===== HERO, PHONE AND SMALL TABLET =====
     The headline used to sit on top of the house. It now rides in the sky band
     above the roofline.

     object-position cannot do this. The photo is 4:3 and a phone hero is about
     1:2.2, so object-fit:cover scales it to match the HEIGHT and crops the sides,
     which means the full height of the photo is on screen at every phone width and
     a vertical object-position has nothing left to move. Measured, not assumed:
     drawn 1339x1002 into a 392x1002 box, so the crop axis is horizontal.

     So the media box is anchored to the top of the hero and over-extended past the
     bottom instead. The photo is redistributed over a taller box, the horizon drops,
     and the extra sky is what the text sits in. The overspill is clipped by the
     hero's own overflow:hidden and lands under the bottom fade anyway.

     Where the block sits vertically is pinned to the roofline, not guessed. The
     media box is 134% of the hero and the img inside it is 118% of that, so the
     photo always covers 1.58x the hero height and, because the crop is horizontal,
     every feature in the photo lands at a FIXED FRACTION of hero height at every
     phone size. The top of the roof ridge measures 63.4% of hero height (verified
     off the render at 375x667, 390x844 and 430x932). So the CTA row is bottom
     anchored with padding-bottom = the remaining 36.6% plus the gap, and the rest
     of the block stacks up from there. Change the photo and this number changes. */
  .hero{align-items:flex-end;
    padding-top:calc(88px + 14px);              /* floor, keeps it off the header */
    padding-bottom:calc(36.6dvh + 18px)}        /* 100 - 63.4, so the CTA clears the ridge */
  .hero-media{inset:0 0 auto 0;height:134%}
  .hero-scrim{background:
    linear-gradient(to bottom,
      rgba(10,10,12,.88) 0%,
      rgba(10,10,12,.64) 24%,
      rgba(10,10,12,.18) 48%,
      rgba(10,10,12,.34) 66%,
      rgba(10,10,12,.82) 88%,
      var(--ink) 100%),
    radial-gradient(120% 56% at 8% 0%,rgba(132,80,243,.22),transparent 64%)}
  /* tightened so the block clears the roofline on a short phone too */
  .hero h1{margin:14px 0 18px}
  .hero-sub{margin-bottom:24px}

  /* Drawer, per Mobile-Optimization Part D.
     Rule 2 display:block, so justify-content and align-items cannot apply and
     Rules 7 and 8 become unbreakable. Rule 1 gap:0 resets the desktop 34px.
     Rule 7 links start at the top under the burger, never vertically centred.
     Rule 3 every row gets its space from padding, so the space is tappable. */
  /* Rule 11: the drawer sits above the page but BELOW the header's own contents,
     so the burger never disappears. It is the only close control on the page, and
     a child cannot outrank its parent's stacking context, so the ladder is built
     inside the header rather than on the drawer alone. */
  .lockup,.nav-actions,.burger{position:relative;z-index:3}
  .nav-links{
    position:fixed;inset:0;z-index:1;
    display:block;gap:0;align-items:initial;justify-content:initial;
    padding:98px 22px 44px;
    background:var(--ink);
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    opacity:0;pointer-events:none;transition:opacity .32s ease
  }
  body.menu-open .nav-links{opacity:1;pointer-events:auto}

  /* Level 1 rows. Rule 4: dividers on direct children only. */
  .nav-links>a:not(.btn),
  .nav-links>.dd-wrap{display:block;width:100%;margin:0;
    border-bottom:1px solid var(--line-2)}
  .nav-links>a:not(.btn){
    font-family:var(--font-body);font-size:1.05rem;font-weight:500;
    color:var(--text);padding:16px 2px;text-align:left;letter-spacing:0
  }
  .nav-links>a::after{display:none !important}

  /* Rule 15: CTA last, full width, margin-top is the one sanctioned margin.
     Label copied verbatim from the client's existing header CTA. */
  .nav-links a.drawer-cta{
    display:flex;width:100%;margin-top:28px;height:auto;padding:16px 20px;
    font-size:1rem;font-weight:600;border-radius:999px;text-align:center;
    /* the base `.nav-links a` rule is (0,1,1) and outranks `.btn-primary` (0,1,0),
       so without this the label computes to --muted grey on the violet fill */
    color:var(--pure)
  }
  .nav-actions .nav-cta{display:none}
  .burger{display:flex}
  header{height:88px}
  header.stuck{height:76px}
  .lockup img{height:62px}
  header.stuck .lockup img{height:56px}
  .nav{gap:14px}
  .nav-actions{margin-left:auto}
  .nav-tel span{font-size:16px}
  .pillar-grid{grid-template-columns:1fr 1fr}
  .pillar:nth-child(3){border-left:0}
  .pillar:nth-child(n+3){border-top:1px solid var(--line-2)}
  .intro-grid,.proc,.contact-grid{grid-template-columns:1fr}
  .intro-media{max-width:520px}
  .proc-aside{position:static;max-width:560px}
  .why{grid-template-columns:1fr}
}
@media (max-width:620px){
  :root{--shell:92vw}
  .bento{grid-template-columns:1fr;gap:12px}
  .c-a,.c-b,.c-c,.c-d,.c-e,.c-f,.c-g{grid-column:span 1;min-height:250px}
  .pillar-grid{grid-template-columns:1fr}
  .pillar{border-left:0;border-top:1px solid var(--line-2)}
  .pillar:first-child{border-top:0}
  .f-row{grid-template-columns:1fr}
  .intro-media .m2{display:none}
  .hero{padding-top:calc(78px + 14px)}
  .hero h1{margin:12px 0 15px}
  .hero-sub{margin-bottom:20px}
  header{height:78px}
  header.stuck{height:70px}
  .lockup img{height:54px}
  header.stuck .lockup img{height:48px}
  .nav-tel{font-size:15px;gap:7px}
  .nav-tel svg{width:15px;height:15px}
}


/* ===== 14. SERVICES DROPDOWN (header, every page) =====
   Hover is bound to .dd-wrap, which contains both the label and the panel, and the
   spacing between them is padding, never margin, so the cursor never crosses dead
   ground and the menu cannot flicker shut mid travel. */
.dd-wrap{position:relative;display:flex;align-items:center;padding:14px 0}
.dd-top{display:flex;align-items:center;gap:5px}
.dd-caret{
  background:none;border:0;padding:5px 2px;display:flex;align-items:center;
  color:var(--muted);cursor:pointer;transition:color .3s ease,transform .35s var(--ease)
}
.dd-caret svg{width:11px;height:11px}
.dd-wrap.open .dd-caret{transform:rotate(180deg);color:var(--violet-lt)}
.dd-panel{
  position:absolute;top:100%;left:-16px;z-index:5;
  min-width:312px;padding:10px;display:grid;gap:2px;
  background:rgba(16,16,22,.97);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--line);border-radius:16px;
  box-shadow:0 28px 70px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .26s ease,transform .3s var(--ease),visibility .26s
}
.dd-wrap.open .dd-panel{opacity:1;visibility:visible;transform:none}
.nav-links .dd-panel a{
  display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:10px;
  font-family:var(--font-cond);font-size:13.5px;font-weight:500;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;
  transition:background .25s ease,color .25s ease
}
.nav-links .dd-panel a::after{display:none}
.nav-links .dd-panel a:hover{background:rgba(132,80,243,.14);color:var(--text)}
.dd-panel a .dot{width:4px;height:4px;border-radius:999px;background:var(--violet);
  flex:none;opacity:.5;transition:opacity .25s ease,transform .25s ease}
.dd-panel a:hover .dot{opacity:1;transform:scale(1.4)}

/* ===== 15. PAGE HERO (service pages) ===== */
.phero{
  position:relative;display:flex;align-items:flex-end;overflow:hidden;
  min-height:clamp(460px,64vh,620px);padding:calc(112px + 44px) 0 clamp(46px,6vw,74px)
}
.phero-media{position:absolute;inset:0}
.phero-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.82) brightness(.55)}
.phero-scrim{position:absolute;inset:0;background:
  linear-gradient(to top,rgba(10,10,12,.97) 3%,rgba(10,10,12,.60) 46%,rgba(10,10,12,.40) 100%),
  radial-gradient(72% 62% at 84% 8%,rgba(132,80,243,.20),transparent 62%)}
.phero .shell{position:relative}
.phero h1{font-size:clamp(2.3rem,5.4vw,4.4rem);margin:15px 0 20px;max-width:18ch}
.phero .lede{max-width:60ch}
.phero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}

.crumb{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-family:var(--font-cond);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted-2)
}
.crumb a{color:var(--muted-2);transition:color .3s ease}
.crumb a:hover{color:var(--violet-lt)}
.crumb svg{width:10px;height:10px;opacity:.55;flex:none}
.crumb .here{color:var(--violet-lt)}

/* ===== 16. SERVICE BODY ===== */
/* the right hand cards were removed at the client's request, so this is one column.
   The width cap goes on .prose, never on .sbody: .sbody shares its element with
   .shell, whose margin-inline:auto would recentre the column away from the left
   edge every other section lines up on. */
.sbody{display:block}
.prose{max-width:1000px}
.prose h2{margin-bottom:20px}
.prose h3{margin:34px 0 12px;font-family:var(--font-cond);text-transform:uppercase;
  letter-spacing:.05em;font-size:clamp(1.08rem,1.7vw,1.32rem);font-weight:600}
.prose p{margin-bottom:15px;color:var(--muted);font-size:clamp(1rem,1.28vw,1.1rem);
  font-weight:300;line-height:1.72;max-width:70ch}
.prose p strong{color:var(--text);font-weight:500}
.prose ul{list-style:none;display:grid;gap:11px;margin:20px 0 24px}
.prose li{display:flex;gap:13px;color:var(--muted);font-size:15.5px;line-height:1.56;max-width:66ch}
.prose li svg{width:16px;height:16px;color:var(--violet-lt);flex:none;margin-top:3px}
.prose li b{color:var(--text);font-weight:500}


/* quote block sitting directly beneath a page hero rather than at the foot of
   the page: the hero already supplies the top breathing room */
.contact-top{padding-top:clamp(48px,5.5vw,74px);border-bottom:1px solid var(--line-2)}
.contact-top h2{max-width:15ch}

/* ===== 17. OPTION CARDS ===== */
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:14px;margin-top:36px}
.opt{background:var(--ink-2);border:1px solid var(--line-2);border-radius:var(--r-card);
  padding:28px 26px;transition:border-color .4s ease,transform .5s var(--ease)}
.opt:hover{border-color:rgba(169,127,255,.42);transform:translateY(-4px)}
.opt .n{font-family:var(--font-cond);font-size:10px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--violet-lt);display:block;margin-bottom:11px}
.opt h3{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.05em;
  font-size:1.1rem;font-weight:600;margin-bottom:9px}
.opt p{font-size:14.5px;color:var(--muted);line-height:1.62;max-width:46ch}

/* ===== 18. FAQ ===== */
.faq{display:grid;gap:10px;margin-top:32px;max-width:920px}
.faq details{background:var(--ink-2);border:1px solid var(--line-2);
  border-radius:14px;overflow:hidden;transition:border-color .35s ease}
.faq details[open]{border-color:rgba(169,127,255,.34)}
.faq summary{
  cursor:pointer;list-style:none;padding:19px 22px;display:flex;align-items:center;
  justify-content:space-between;gap:18px;font-family:var(--font-cond);font-size:15.5px;
  font-weight:500;letter-spacing:.03em;color:var(--text);transition:color .3s ease
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--violet-lt)}
.faq .pm{width:15px;height:15px;flex:none;position:relative}
.faq .pm::before,.faq .pm::after{content:"";position:absolute;background:var(--violet-lt);
  left:50%;top:50%;transition:transform .3s var(--ease)}
.faq .pm::before{width:13px;height:1.5px;transform:translate(-50%,-50%)}
.faq .pm::after{width:1.5px;height:13px;transform:translate(-50%,-50%)}
.faq details[open] .pm::after{transform:translate(-50%,-50%) scaleY(0)}
.faq details p{padding:0 22px 21px;color:var(--muted);font-size:15px;line-height:1.68;max-width:78ch}

/* ===== 19. RELATED SERVICES ===== */
.sec-head{display:grid;gap:15px;max-width:70ch}
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:32px}
.rel-card{
  position:relative;border-radius:var(--r-card);overflow:hidden;min-height:172px;
  display:flex;align-items:flex-end;border:1px solid var(--line-2);
  transition:border-color .4s ease,transform .5s var(--ease)
}
.rel-card:hover{border-color:rgba(169,127,255,.42);transform:translateY(-4px)}
.rel-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.8) brightness(.58);transition:transform 1.1s var(--ease),filter .6s ease}
.rel-card:hover img{transform:scale(1.06);filter:saturate(.95) brightness(.66)}
.rel-card .veil{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,10,12,.94) 8%,rgba(10,10,12,.30) 92%)}
.rel-card span{position:relative;padding:20px;font-family:var(--font-cond);font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;font-size:14.5px;line-height:1.24}

/* B.2.7 — scroll-margin-top belongs on EVERY anchor target, not just the form.
   Nav links pointing at #about, #services, #process land under the fixed header
   exactly like the form does. The form is the target rather than its section
   because on mobile the two columns stack and a section anchor lands the user on
   the contact text with the form a full screen below. */
form,
#top,#about,#services,#process,#quote,#service-area,#quoteForm{
  scroll-margin-top:132px
}
@media (max-width:900px){
  form,
  #top,#about,#services,#process,#quote,#service-area,#quoteForm{
    scroll-margin-top:108px
  }
}

/* ===== RESPONSIVE, SERVICE PAGES AND DROPDOWN ===== */
@media (max-width:900px){
  .area-grid{grid-template-columns:1fr}
  /* the drawer keeps Services nested as a tap to expand sub-list, never flattened */
  .dd-wrap{display:block;padding:0;width:100%}
  /* Rule 14: on touch the heading expands, it never navigates. The whole row is the
     toggle, and app.js preventDefaults the label below the breakpoint. */
  .dd-top{
    display:flex;align-items:center;justify-content:space-between;width:100%;
    padding:16px 2px;cursor:pointer
  }
  .nav-links .dd-top>a{
    font-family:var(--font-body);font-size:1.05rem;font-weight:500;
    color:var(--text);padding:0;letter-spacing:0;flex:1
  }
  .dd-caret{color:var(--text);padding:0 2px}
  .dd-caret svg{width:15px;height:15px}
  /* Level 2. Rule 6: indent is padding-left on the container so the row stays
     tappable to the screen edge. Rule 5: a measured ceiling, never height:auto,
     because auto is not animatable and max-height:none kills the transition. */
  .dd-panel{
    position:static;transform:none;visibility:visible;opacity:1;z-index:auto;
    min-width:0;width:100%;margin:0;padding:0 0 6px 12px;gap:0;
    background:none;backdrop-filter:none;-webkit-backdrop-filter:none;
    border:0;border-radius:0;box-shadow:none;
    max-height:0;overflow:hidden;
    transition:max-height .38s var(--ease)
  }
  .dd-wrap.open .dd-panel{max-height:720px}
  .nav-links .dd-panel a{
    display:block;font-family:var(--font-body);font-size:.96rem;font-weight:400;
    letter-spacing:0;text-transform:none;white-space:normal;
    padding:10px 0;color:var(--muted);justify-content:flex-start
  }
  .dd-panel a .dot{display:none}
  .phero{min-height:auto;padding:calc(88px + 40px) 0 50px}
}
@media (max-width:620px){
  /* the chips are already fluid, they just want a little more air per row on a
     handset and a slightly bigger type size than the old 14.5px bullets */
  .area-cols{padding:22px 18px 20px}
  .chip{font-size:13.5px;padding:10px 14px 10px 12px}
  .chips{gap:7px}
  .phero{padding:calc(78px + 34px) 0 44px}
  .rel{grid-template-columns:1fr 1fr}
  .rel-card{min-height:132px}
  .rel-card span{padding:15px;font-size:12.5px}
}

/* A 320px-wide handset is the one size where the hero block is tall enough to
   push the hero past 100dvh. When that happens the dvh-based padding-bottom
   under-shoots and the buttons land ON the ridge instead of just above it, so the
   type is tightened here to keep the whole thing inside one viewport. */
@media (max-width:360px){
  .hero h1{font-size:2.05rem;margin:10px 0 12px}
  .hero-sub{font-size:.98rem;margin-bottom:16px}
  .hero .btn{padding:13px 20px}
}

/* Mobile-Optimization C.4 — nothing under 12px on a phone.
   The tracked uppercase micro-labels read fine at 10px on a desktop monitor and do
   not on a handset, so they are raised at the breakpoint rather than redesigned. */
@media (max-width:900px){
  .cap,.crumb{font-size:12px}
  .f-h,.opt .n,.cell .num,.ba-half figcaption,.load-pct,label,
  .area-hq .l{font-size:12px}
  .info .l{font-size:12px}
  .f-bot{font-size:13px}
  .help{font-size:13px}
  .scard-list a,.f-slinks a,.f-nap address a,.f-nap address span{font-size:15px}
  .f-area{font-size:13.5px}
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important
  }
  .rv,.rv-media{opacity:1;transform:none;filter:none}
  .rv-word>span,.hero h1 .rv-word>span{transform:none;opacity:1}
  .hero-media img{opacity:1;transform:none}
  .lp{opacity:1;transform:none}
  .cur-dot,.cur-ring{display:none}
}