/* =========================================================================
   American Composite Deck Pros: design system + motion engine
   Zero dependencies. Transform and opacity only. Reduced motion honored.
   ========================================================================= */

/* ---------- tokens ---------- */
:root{
  --navy:#0E1D38;
  --navy-2:#152B4F;
  --navy-deep:#070F1E;
  --red:#A8232B;
  --red-2:#C62B34;
  --cream:#F6F2E9;
  --cream-2:#EDE6D8;
  --bone:#FFFFFF;
  --gold:#C8A44D;
  --deck:#8A6D4F;
  --ink:#0C121C;
  --muted:#61708A;
  --muted-2:#8D9AB0;

  --bg:var(--cream);
  --fg:var(--ink);

  --display:"Barlow Condensed",Oswald,"Arial Narrow",system-ui,sans-serif;
  --text:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;

  --wrap:1240px;
  --gut:clamp(20px,4vw,48px);
  --r:4px;
  --r-lg:10px;

  --shadow-sm:0 2px 8px rgba(7,15,30,.08);
  --shadow:0 18px 44px -18px rgba(7,15,30,.34);
  --shadow-lg:0 44px 90px -32px rgba(7,15,30,.5);

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
  --dur:.72s;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--text);
  font-size:clamp(16px,.55vw + 14.4px,18px);
  line-height:1.65;
  color:var(--fg);
  background:var(--bg);
  overflow-x:hidden;
  transition:background-color .9s var(--ease),color .9s var(--ease);
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:2px}

/* grain: sells "expensive" better than any gradient */
body::after{
  content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:10000;background:var(--red);color:#fff;padding:10px 16px}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:.94;letter-spacing:-.012em;margin:0 0 .5em;text-transform:uppercase}
h1{font-size:clamp(2.9rem,7.4vw,6.6rem)}
h2{font-size:clamp(2.1rem,4.6vw,4.1rem)}
h3{font-size:clamp(1.25rem,1.7vw,1.6rem);letter-spacing:0}
h4{font-size:1.05rem;letter-spacing:.02em}
p{margin:0 0 1.1em}
.lede{font-size:clamp(1.06rem,1.35vw,1.35rem);line-height:1.55;max-width:56ch;color:var(--muted)}
.sec-lede{font-size:clamp(1.02rem,1.15vw,1.18rem);max-width:62ch;color:var(--muted);margin-bottom:2.6rem}
.eyebrow{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.22em;font-size:.78rem;color:var(--red);margin:0 0 1rem;
  display:flex;align-items:center;gap:.75rem;
}
.eyebrow::before{content:"";width:0;height:2px;background:var(--red);transition:width .9s var(--ease) .15s}
.is-in .eyebrow::before,.eyebrow.is-in::before{width:44px}
.eyebrow.light{color:var(--gold)}
.eyebrow.light::before{background:var(--gold)}
.ctr{text-align:center}
.tiny{font-size:.8rem;color:var(--muted-2);line-height:1.5}

/* ---------- buttons ---------- */
.btn{
  --bfg:#fff;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  font-size:1rem;padding:1.02em 1.9em;border:2px solid transparent;border-radius:var(--r);
  text-decoration:none;cursor:pointer;overflow:hidden;isolation:isolate;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
  will-change:transform;
}
.btn.lg{font-size:1.1rem;padding:1.12em 2.3em}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;transform:translateY(101%);
  transition:transform .55s var(--ease);
}
.btn:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.btn:hover::before{transform:translateY(0)}
.btn-red{background:var(--red);color:#fff;border-color:var(--red)}
.btn-red::before{background:var(--navy)}
.btn-red:hover{border-color:var(--navy)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-ghost::before{background:#fff}
.btn-ghost:hover{color:var(--navy);border-color:#fff}
.btn-ghost.dark{color:var(--navy);border-color:rgba(14,29,56,.28)}
.btn-ghost.dark::before{background:var(--navy)}
.btn-ghost.dark:hover{color:#fff;border-color:var(--navy)}
.btnrow{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}
.btnrow.ctr{justify-content:center}

/* =========================================================================
   MOTION ENGINE
   Elements are tagged by JS. Everything degrades to visible if JS never runs.
   ========================================================================= */

/* 1. line mask reveal: display headings, split into lines by JS */
.sr-line{display:block;overflow:hidden}
.sr-line > span{
  display:block;transform:translateY(102%);
  transition:transform 1s var(--ease);
  transition-delay:calc(var(--i,0) * 85ms);
}
.is-in .sr-line > span{transform:translateY(0)}

/* 2. word cascade: for lede paragraphs */
.sr-word{display:inline-block;opacity:0;transform:translateY(14px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:calc(var(--i,0) * 26ms);}
.is-in .sr-word{opacity:1;transform:none}

/* 3. rise: generic block */
[data-rise]{opacity:0;transform:translateY(34px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
  transition-delay:calc(var(--i,0) * 95ms);}
[data-rise].is-in{opacity:1;transform:none}

/* 4. curtain wipe: images uncover from below.
   NEVER clip-path the observed element itself. IntersectionObserver measures
   area AFTER clipping, so an element clipped to zero height can never report
   as intersecting, never gets .is-in, and stays hidden forever. The mask goes
   on the parent via overflow, the motion goes on the child. */
[data-curtain]{overflow:hidden}
[data-curtain] img{
  transform:translateY(16%) scale(1.14);opacity:0;
  transition:transform 1.25s var(--ease-io),opacity .85s var(--ease);
  transition-delay:calc(var(--i,0) * 110ms);
}
[data-curtain].is-in img{transform:none;opacity:1}

/* 5. counter */
.stat b{font-variant-numeric:tabular-nums}

/* parallax layers driven by --p (0..1) from JS */
[data-para]{will-change:transform}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .sr-line > span,[data-rise],.sr-word{opacity:1 !important;transform:none !important}
  [data-curtain]{clip-path:none !important}
  [data-curtain] img{transform:none !important}
}

/* =========================================================================
   HEADER
   ========================================================================= */
.promo{background:var(--navy-deep);color:var(--cream);text-align:center;font-size:.86rem;padding:.62rem var(--gut)}
.promo p{margin:0}
.promo strong{color:var(--gold)}
.promo a{color:#fff;text-underline-offset:3px}

/* The glass lives on a pseudo layer, never on .site-head itself.
   backdrop-filter (like transform and filter) makes an element the containing
   block for EVERY position:fixed descendant. With it on the header, the mobile
   drawer resolved inset:0 against an 83px header instead of the viewport: an
   83px tall menu, parked 336px off the right edge INSIDE the document, which
   is what let the page scroll sideways. A pseudo element is not an ancestor,
   so the effect survives and the containing block does not. */
/* z-index outranks .callbar (940). The header owns a stacking context, so the
   drawer and scrim inside it paint as part of THIS number, not their own:
   at 900 the fixed call bar sat on top of the open drawer and stole taps. */
.site-head{position:sticky;top:0;z-index:960;border-bottom:1px solid rgba(14,29,56,.1);transition:transform .5s var(--ease)}
.site-head::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(246,242,233,.86);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4)}
.site-head.hide{transform:translateY(-100%)}
/* Scrim behind the open drawer. Fixed, so it needs the header free of
   containing block triggers too, which the rule above guarantees. */
.site-head::after{content:"";position:fixed;inset:0;z-index:990;background:rgba(6,14,28,.55);
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s var(--ease)}
body.nav-open .site-head::after{opacity:1;visibility:visible}
.head-inner{display:flex;align-items:center;gap:1.5rem;min-height:82px}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:0 0 auto}
/* Two separate marks: the round accreditation badge, then the client's supplied
   wordmark. Only the badge rotates on hover. A wordmark that tilts reads as a
   glitch, and it is the client's artwork, so it stays square. */
.brand-mark{width:52px;height:auto;border-radius:50%;transition:transform .6s var(--ease)}
.brand:hover .brand-mark{transform:rotate(-6deg) scale(1.07)}
/* Supplied at 289x84. Held to 46px tall so it renders above 1.8x density and
   still clears the 82px header. Width is pinned rather than left to auto so the
   header cannot reflow between the tag being parsed and the file arriving. */
.brand-word{width:158px;height:46px;flex:0 0 auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:2rem}
.nav ul{display:flex;gap:1.5rem;list-style:none;margin:0;padding:0}
.nav a{
  text-decoration:none;font-size:.83rem;font-weight:600;text-transform:uppercase;letter-spacing:.09em;
  color:var(--navy);position:relative;padding:.35rem 0;white-space:nowrap;
}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.nav-cta{display:flex;align-items:center;gap:1rem}
.nav-cta .tel{font-family:var(--display);font-weight:800;font-size:1.16rem;color:var(--navy);text-decoration:none;letter-spacing:.01em}
.nav-cta .btn{padding:.78em 1.4em;font-size:.85rem}
/* .nav a sets navy and outspecifies .btn-red, so the pill needs it back. */
.nav-cta .btn-red{color:#fff}
.nav-cta .btn::after{display:none}
.burger{display:none;margin-left:auto;width:46px;height:40px;background:none;border:0;cursor:pointer;flex-direction:column;justify-content:center;gap:6px}
.burger span{display:block;height:2px;background:var(--navy);transition:transform .4s var(--ease),opacity .3s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

@media(max-width:1080px){
  /* Auto hide is off below the drawer breakpoint: .hide is a transform, and a
     transform on the header would trap the fixed drawer again, exactly the way
     backdrop-filter did. Desktop keeps the hide on scroll. */
  .site-head.hide{transform:none}

  .burger{display:flex;position:relative;z-index:1010}
  /* navy bars vanish against the navy drawer once it is open */
  .burger[aria-expanded="true"] span{background:#fff}

  .nav{
    position:fixed;top:0;right:0;bottom:0;left:auto;width:min(400px,86vw);background:var(--navy);
    flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:2rem;
    /* top pad clears the burger; bottom pad clears the iOS home indicator */
    padding:calc(var(--gut) + 74px) var(--gut) calc(var(--gut) + env(safe-area-inset-bottom,0px));
    transform:translateX(100%);
    transition:transform .5s var(--ease),visibility .5s var(--ease);
    z-index:1000;
    /* a short phone must still reach the last link */
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    /* keeps the parked drawer out of the tab order and off the a11y tree */
    visibility:hidden;
  }
  .nav.open{transform:none;visibility:visible}
  .nav ul{flex-direction:column;gap:1.15rem;width:100%}
  .nav a{color:#fff;font-size:1.35rem;font-family:var(--display);font-weight:700;letter-spacing:.05em}
  /* drawer rows were 37px; the row itself becomes the target */
  .nav ul a{display:flex;align-items:center;min-height:44px}
  .nav-cta{flex-direction:column;align-items:flex-start;gap:1.1rem;width:100%;margin-top:auto;padding-top:2rem}
  .nav-cta .tel{color:var(--gold);font-size:1.7rem}
  .nav-cta .btn{width:100%}
  /* scroll lock for the page behind the drawer */
  body.nav-open{overflow:hidden}
}

/* =========================================================================
   HERO  (act 1: recognition)
   ========================================================================= */
.hero{position:relative;min-height:clamp(600px,92svh,940px);display:flex;align-items:flex-end;overflow:clip;background:var(--navy-deep);isolation:isolate}
.hero-media{position:absolute;inset:-8% 0 -8% 0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.14);
  transition:opacity 1.6s var(--ease),transform 2.4s var(--ease)}
.hero.ready .hero-media img{opacity:1;transform:scale(1)}
.hero::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(7,15,30,.72) 0%,rgba(7,15,30,.28) 34%,rgba(7,15,30,.5) 62%,rgba(7,15,30,.94) 100%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;z-index:1;
  background:linear-gradient(180deg,transparent,var(--cream) 96%)}
.hero-in{position:relative;z-index:2;padding-block:clamp(3rem,9vh,6rem) clamp(4.5rem,12vh,8rem);width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto}
.hero h1{color:#fff;max-width:15ch;margin-bottom:.32em;text-shadow:0 2px 40px rgba(0,0,0,.35)}
.hero h1 em{font-style:normal;color:var(--gold);display:block}
.hero .lede{color:rgba(255,255,255,.9);max-width:50ch;margin-bottom:2rem}
.hero-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.6rem}
.hero-badges span{
  font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.13em;font-size:.72rem;
  color:#fff;border:1px solid rgba(255,255,255,.34);padding:.5em 1em;border-radius:100px;
  backdrop-filter:blur(6px);background:rgba(255,255,255,.07);
}
.hero-scrollhint{position:absolute;right:var(--gut);bottom:clamp(4.5rem,12vh,8rem);z-index:2;
  writing-mode:vertical-rl;font-family:var(--display);font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;font-size:.68rem;color:rgba(255,255,255,.55)}
@media(max-width:760px){.hero-scrollhint{display:none}}

/* =========================================================================
   MARQUEE: credential ticker
   ========================================================================= */
.marq{background:var(--navy);color:#fff;padding:1.1rem 0;overflow:hidden;border-block:1px solid rgba(255,255,255,.09)}
.marq-track{display:flex;gap:3.5rem;width:max-content;animation:marq 42s linear infinite}
.marq:hover .marq-track{animation-play-state:paused}
.marq span{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.2em;font-size:.9rem;color:rgba(255,255,255,.78);display:flex;align-items:center;gap:3.5rem;white-space:nowrap}
.marq span::after{content:"";width:6px;height:6px;background:var(--gold);border-radius:50%;flex:0 0 auto}
@keyframes marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marq-track{animation:none;flex-wrap:wrap;width:auto}}

/* =========================================================================
   ANSWER BLOCK: the AEO / GEO extraction target
   ========================================================================= */
.answer{background:var(--bone);border-block:1px solid rgba(14,29,56,.09);padding:clamp(2.2rem,5vw,3.4rem) 0}
.answer-lbl{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.2em;font-size:.74rem;color:var(--red);margin:0 0 .7rem}
.answer-txt{font-size:clamp(1.08rem,1.5vw,1.34rem);line-height:1.6;max-width:74ch;margin:0;color:var(--navy);font-weight:500}

/* ---------- crumbs ---------- */
.crumbs{padding:1.1rem 0;font-size:.8rem;color:var(--muted)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.crumbs li+li::before{content:"/";margin-right:.5rem;color:var(--muted-2)}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}

/* =========================================================================
   TRUST
   ========================================================================= */
.trust{padding:clamp(3.4rem,7vw,5.4rem) 0}
.trust-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:2rem}
.trust-item{display:flex;gap:1rem;align-items:flex-start}
.trust-item h3{margin:0 0 .3rem;font-size:1.08rem;color:var(--navy)}
.trust-item p{margin:0;font-size:.9rem;color:var(--muted);line-height:1.55}
.ic{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:var(--navy);position:relative;display:grid;place-items:center}
.ic::before{content:"";width:20px;height:20px;background:var(--gold);
  -webkit-mask:center/contain no-repeat var(--m);mask:center/contain no-repeat var(--m)}
.ic-award{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 16.9 6.2 19.9l1.1-6.5L2.6 8.8l6.5-.9z'/%3E%3C/svg%3E")}
.ic-shield{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 1l9 4v6c0 5.5-3.8 10.7-9 12-5.2-1.3-9-6.5-9-12V5z'/%3E%3C/svg%3E")}
.ic-star{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 17.3l-6.2 3.7 1.6-7L2 9.2l7.1-.6L12 2l2.9 6.6 7.1.6-5.4 4.8 1.6 7z'/%3E%3C/svg%3E")}
.ic-hammer{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M14 2l8 8-3 3-3-3-9 9-3-3 9-9-3-3z'/%3E%3C/svg%3E")}

/* =========================================================================
   STATS: counters
   ========================================================================= */
.stats{background:var(--navy);color:#fff;padding:clamp(3rem,6vw,4.6rem) 0;position:relative;overflow:hidden}
.stats::before{content:"";position:absolute;inset:0;opacity:.11;
  background:repeating-linear-gradient(90deg,transparent 0 58px,rgba(255,255,255,.5) 58px 59px)}
.stats-in{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:2rem;text-align:center}
.stat b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(2.9rem,6vw,5rem);line-height:.9;color:var(--gold);letter-spacing:-.02em}
.stat span{display:block;margin-top:.5rem;font-size:.82rem;text-transform:uppercase;letter-spacing:.16em;color:rgba(255,255,255,.72)}

/* =========================================================================
   COLOR SCRUBBER: THE SIGNATURE MOVE  (act 4, the peak)
   Scroll is the scrubber. Their own 12 real Trex installs swap under the
   wheel. No video anywhere: these are stills, preloaded and cross faded.
   ========================================================================= */
.scrub{position:relative;background:var(--navy-deep);color:#fff}
.scrub-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center}
.scrub-stage{position:absolute;inset:0}
.scrub-stage figure{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .42s linear}
.scrub-stage figure.on{opacity:1}
.scrub-stage img{width:100%;height:100%;object-fit:cover}
.scrub-pin::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(7,15,30,.82),rgba(7,15,30,.24) 40%,rgba(7,15,30,.9))}
.scrub-ui{position:relative;z-index:2;width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto;text-align:center}
/* Scrim only where the copy sits. A full frame overlay would flatten the
   sunset, which is the thing making these frames look expensive. */
.scrub-ui::before{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:150%;aspect-ratio:2/1;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(7,15,30,.72) 0%,rgba(7,15,30,.5) 42%,transparent 70%)}
.scrub-ui .eyebrow{justify-content:center;color:var(--gold)}
.scrub-ui .eyebrow::before{background:var(--gold);width:44px}
.scrub-name{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.6rem,8vw,7rem);line-height:.9;letter-spacing:-.02em;margin:.2em 0 .35em;min-height:1.1em}
.scrub-name .ch{display:inline-block;animation:chIn .5s var(--ease) both}
@keyframes chIn{from{opacity:0;transform:translateY(28px) rotate(4deg)}to{opacity:1;transform:none}}
.scrub-brand{font-family:var(--display);font-weight:700;letter-spacing:.24em;text-transform:uppercase;font-size:.82rem;color:rgba(255,255,255,.6)}
.scrub-rail{display:flex;gap:6px;justify-content:center;margin-top:2.6rem;flex-wrap:wrap;max-width:620px;margin-inline:auto}
.scrub-rail i{display:block;width:34px;height:3px;background:rgba(255,255,255,.24);transition:background .3s,transform .3s}
.scrub-rail i.on{background:var(--gold);transform:scaleY(2.2)}
.scrub-count{position:absolute;left:var(--gut);bottom:2.2rem;z-index:2;font-family:var(--display);font-weight:800;font-size:1rem;letter-spacing:.1em;color:rgba(255,255,255,.55)}
.scrub-note{margin:2rem auto 0;max-width:46ch;font-size:.82rem;line-height:1.6;color:rgba(255,255,255,.6)}
.scrub-note a{color:var(--gold)}
.scrub-count b{color:var(--gold);font-size:1.6rem}
@media (prefers-reduced-motion:reduce){
  .scrub-pin{position:relative;height:auto;min-height:70vh}
  .scrub-name .ch{animation:none}
}

/* =========================================================================
   BEFORE / AFTER: drag slider
   ========================================================================= */
.ba{padding:clamp(4rem,8vw,7rem) 0;background:var(--cream-2)}
.ba-stage{position:relative;aspect-ratio:16/10;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);cursor:ew-resize;user-select:none;touch-action:pan-y}
.ba-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-after{clip-path:inset(0 0 0 var(--x,50%))}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--x,50%);width:3px;background:#fff;z-index:3;box-shadow:0 0 22px rgba(0,0,0,.45)}
.ba-handle::after{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:60px;height:60px;border-radius:50%;background:#fff;box-shadow:0 8px 30px rgba(0,0,0,.35)}
.ba-handle::before{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;z-index:2;
  width:22px;height:12px;background:var(--navy);
  -webkit-mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 16' fill='%23000'%3E%3Cpath d='M10 0L0 8l10 8zM22 0l10 8-10 8z'/%3E%3C/svg%3E");
  mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 16' fill='%23000'%3E%3Cpath d='M10 0L0 8l10 8zM22 0l10 8-10 8z'/%3E%3C/svg%3E")}
.ba-tag{position:absolute;top:1rem;z-index:4;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;color:#fff;background:rgba(7,15,30,.66);padding:.45em 1em;border-radius:100px;backdrop-filter:blur(6px)}
.ba-tag.l{left:1rem}.ba-tag.r{right:1rem}

/* =========================================================================
   CARD GRIDS
   ========================================================================= */
.mats,.svcs{padding:clamp(4.4rem,9vw,7.6rem) 0}
/* Materials: 5 cards on a 3 wide grid, so it reads 3 over 2 with the last row
   centred. Deliberately NOT auto-fit, which pushed 4 across and shrank the
   photography. */
/* Six tracks so a card is always 2 wide. Row one takes 1-2, 3-4, 5-6. Row two
   starts at track 2 and track 4, which centres the pair at FULL card width.
   A margin-left offset looks similar and silently shrinks the two cards. */
.mat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1.6rem}
.mat-grid > *{grid-column:span 2}
.mat-grid > *:nth-child(4){grid-column:2 / span 2}
.mat-grid > *:nth-child(5){grid-column:4 / span 2}
@media(max-width:1000px){
  .mat-grid{grid-template-columns:repeat(2,1fr)}
  .mat-grid > *,.mat-grid > *:nth-child(4),.mat-grid > *:nth-child(5){grid-column:auto}
}
@media(max-width:620px){.mat-grid{grid-template-columns:1fr}}
.mat-card,.svc-card{
  display:block;text-decoration:none;background:var(--bone);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:transform .6s var(--ease),box-shadow .6s var(--ease);
  will-change:transform;
}
.mat-card:hover,.svc-card:hover{transform:translateY(-9px);box-shadow:var(--shadow-lg)}
.mat-card img,.svc-card img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:transform 1.1s var(--ease)}
.mat-card:hover img,.svc-card:hover img{transform:scale(1.07)}
.mat-body,.svc-card{padding:0}
.mat-body{padding:1.5rem}
.badge{display:inline-block;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;color:var(--red);margin-bottom:.5rem}
.mat-card h3,.svc-card h3{color:var(--navy);margin-bottom:.5rem}
.mat-card p,.svc-card p{font-size:.92rem;color:var(--muted);margin-bottom:1rem;line-height:1.6}
.more{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;color:var(--red)}
/* Services: 2 wide. Four tracks so a card is always 2 wide, which lets the
   lone fifth card start at track 2 and sit centred at FULL card width. */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem}
.svc-grid > *{grid-column:span 2}
.svc-grid > *:nth-child(5){grid-column:2 / span 2}
.svc-grid img{aspect-ratio:16/9}
@media(max-width:720px){
  .svc-grid{grid-template-columns:1fr}
  .svc-grid > *,.svc-grid > *:nth-child(5){grid-column:auto}
}
.svc-card{padding-bottom:1.5rem}
.svc-card h3,.svc-card p,.svc-card .more{padding-inline:1.5rem}
.svc-card h3{margin-top:1.3rem}

/* =========================================================================
   OFFER
   ========================================================================= */
.offer{background:var(--navy);color:#fff;padding:clamp(3.8rem,8vw,6.4rem) 0;position:relative;overflow:hidden}
.offer::before{content:"";position:absolute;right:-12%;top:-40%;width:58vw;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(200,164,77,.19),transparent 66%)}
.offer-in{position:relative;display:grid;grid-template-columns:1.35fr .95fr;gap:clamp(2rem,5vw,4.6rem);align-items:center}
.offer h2{color:#fff;max-width:18ch}
.offer-cta{display:flex;flex-direction:column;gap:.9rem;align-items:flex-start}
.ticks{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.75rem}
.ticks li{position:relative;padding-left:2rem;color:var(--muted-2);font-size:.98rem}
.ticks.light li{color:rgba(255,255,255,.84)}
.offer .ticks li{color:rgba(255,255,255,.86)}
.ticks li::before{content:"";position:absolute;left:0;top:.45em;width:15px;height:11px;background:var(--gold);
  -webkit-mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14' fill='%23000'%3E%3Cpath d='M7.3 14L0 6.7 2.1 4.6l5.2 5.2L17.9 0 20 2.1z'/%3E%3C/svg%3E");
  mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14' fill='%23000'%3E%3Cpath d='M7.3 14L0 6.7 2.1 4.6l5.2 5.2L17.9 0 20 2.1z'/%3E%3C/svg%3E")}
@media(max-width:900px){.offer-in{grid-template-columns:1fr}}

/* =========================================================================
   FEATURED PROJECT: editorial asymmetric grid
   ========================================================================= */
.feat{padding:clamp(4.4rem,9vw,7.6rem) 0;background:var(--bone)}
.feat h2{color:var(--navy);margin-bottom:.25em}
.feat-meta{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:.8rem;color:var(--red);margin-bottom:1.1rem}
.feat-blurb{max-width:60ch;color:var(--muted);margin-bottom:2.8rem}
.feat-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1.1rem}
.fs{margin:0;overflow:hidden;border-radius:var(--r-lg)}
.fs img{width:100%;height:100%;object-fit:cover}
/* One figure per row carries the aspect ratio and sets the row height, its
   partner stretches to match so the pair is level top AND bottom. The image
   inside is object-fit:cover, so the partner trims rather than distorts.
   Previously fs-1 had its own 4/5 ratio plus align-self:end, which left the two
   photos different heights with a ragged bottom edge. */
.fs-0{grid-column:span 7;aspect-ratio:16/11}
.fs-1{grid-column:span 5;align-self:stretch;min-height:0}
.fs-2{grid-column:span 5;align-self:stretch;min-height:0}
.fs-3{grid-column:span 7;aspect-ratio:16/9}
.fs-1 img,.fs-2 img{height:100%}
@media(max-width:760px){
  .fs-0,.fs-1,.fs-2,.fs-3{grid-column:span 12;aspect-ratio:16/11;align-self:auto}
}

/* =========================================================================
   PRICE MATCH
   Replaced the reviews band. Two columns: the promise on the left, the three
   conditions on the right as a checklist, so the qualifier reads as substance
   rather than as small print somebody is trying to hide.
   ========================================================================= */
.pmatch{padding:clamp(4.4rem,9vw,7.6rem) 0;background:var(--cream-2)}
.pmatch-in{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.pmatch-txt h2{color:var(--navy);margin-bottom:.6em;max-width:16ch}
.pmatch-txt p{color:var(--muted);max-width:56ch;margin-bottom:2rem;line-height:1.75}
.pmatch-req{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.pmatch-req li{background:var(--bone);border-radius:var(--r-lg);padding:1.4rem 1.6rem;
  box-shadow:var(--shadow-sm);border-left:4px solid var(--red)}
.pmatch-req b{display:block;font-family:var(--display);font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;color:var(--navy);font-size:1.05rem;margin-bottom:.3rem}
.pmatch-req span{font-size:.9rem;line-height:1.6;color:var(--muted)}
@media(max-width:900px){.pmatch-in{grid-template-columns:1fr}}

/* A lead send that failed. Only ever rendered by the webhook path in site.js. */
.form-err{margin-top:1rem;padding:.9rem 1.1rem;border-radius:var(--r-sm,8px);
  background:rgba(178,34,52,.09);border-left:4px solid var(--red);color:var(--navy);
  font-size:.9rem;line-height:1.6}

/* =========================================================================
   VETERANS
   ========================================================================= */
.vet{background:linear-gradient(135deg,var(--navy-deep),var(--navy) 55%,#1B3260);color:#fff;padding:clamp(4rem,8vw,7rem) 0;position:relative;overflow:hidden}
/* Decorative hatch. It sits at z-index:1 ABOVE .vet-in (which is z-index auto),
   so without pointer-events:none it silently ate every click in this band,
   including the military CTA. Any full bleed decorative overlay needs this. */
.vet::before{content:"";position:absolute;inset:0;opacity:.07;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(-45deg,transparent 0 22px,#fff 22px 24px)}
.vet-photo{position:absolute;inset:0;z-index:0;background:var(--vetbg) center/cover no-repeat;opacity:.2;
  mask-image:linear-gradient(90deg,transparent,#000 55%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 55%)}
.vet-in{position:relative;display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.vet h2{color:#fff;max-width:17ch}
.vet p{color:rgba(255,255,255,.82);max-width:56ch}
.vet .btn{margin-top:1.8rem}
.vet-mark img{width:min(320px,80%);margin-inline:auto;border-radius:50%;opacity:.95;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.5));animation:vetFloat 7s ease-in-out infinite}
@keyframes vetFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-16px) rotate(2deg)}}
@media(max-width:900px){.vet-in{grid-template-columns:1fr}.vet-mark{display:none}}
@media (prefers-reduced-motion:reduce){.vet-mark img{animation:none}}

/* =========================================================================
   CITIES
   ========================================================================= */
.cityx{padding:clamp(4.4rem,9vw,7rem) 0}
.cityx h2{color:var(--navy)}
.city-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2.4rem;margin:2.6rem 0}
.city-col h3{color:var(--red);font-size:.86rem;letter-spacing:.16em}
.city-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.city-col a{text-decoration:none;color:var(--navy);font-weight:500;position:relative;display:inline-block;transition:transform .4s var(--ease),color .3s}
.city-col a:hover{transform:translateX(6px);color:var(--red)}

/* =========================================================================
   FAQ
   ========================================================================= */
.faq{padding:clamp(4.4rem,9vw,7rem) 0;background:var(--bone)}
.faq h2{color:var(--navy)}
.faq-list{max-width:860px}
.faq details{border-top:1px solid rgba(14,29,56,.14)}
.faq details:last-child{border-bottom:1px solid rgba(14,29,56,.14)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.5rem 3rem 1.5rem 0;position:relative;
  font-family:var(--display);font-weight:700;font-size:clamp(1.1rem,1.7vw,1.42rem);
  color:var(--navy);text-transform:none;letter-spacing:0;transition:color .3s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--red)}
.faq summary::after{content:"";position:absolute;right:.4rem;top:50%;translate:0 -50%;width:16px;height:16px;
  background:var(--red);transition:transform .45s var(--ease);
  -webkit-mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M11 3h2v18h-2z'/%3E%3Cpath d='M3 11h18v2H3z'/%3E%3C/svg%3E");
  mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M11 3h2v18h-2z'/%3E%3Cpath d='M3 11h18v2H3z'/%3E%3C/svg%3E")}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq-a{padding:0 3rem 1.7rem 0;animation:faqIn .5s var(--ease)}
.faq-a p{margin:0;color:var(--muted);max-width:70ch}
@keyframes faqIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* =========================================================================
   GALLERY
   ========================================================================= */
.gal{padding:clamp(3rem,6vw,4.6rem) 0 clamp(4.4rem,9vw,7rem)}
.gal-filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.4rem}
.gal-filters button{
  font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.78rem;
  padding:.62em 1.25em;border:1.5px solid rgba(14,29,56,.2);background:transparent;color:var(--navy);
  border-radius:100px;cursor:pointer;transition:all .35s var(--ease);
}
.gal-filters button:hover{border-color:var(--navy)}
.gal-filters button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.gal-grid{columns:3 280px;column-gap:1.1rem}
.gal-grid figure{margin:0 0 1.1rem;break-inside:avoid;overflow:hidden;border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);position:relative;transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.gal-grid figure:hover{transform:translateY(-6px) scale(1.012);box-shadow:var(--shadow)}
.gal-grid img{width:100%;transition:transform 1s var(--ease)}
.gal-grid figure:hover img{transform:scale(1.06)}
.gal-grid figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.4rem 1rem .9rem;color:#fff;
  font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.78rem;
  background:linear-gradient(transparent,rgba(7,15,30,.86));opacity:0;transform:translateY(10px);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.gal-grid figure:hover figcaption{opacity:1;transform:none}
.gal-grid figure[hidden]{display:none}

/* =========================================================================
   PAGE HERO (interior)
   ========================================================================= */
.phero{position:relative;background:var(--navy-deep);color:#fff;overflow:clip;isolation:isolate}
.phero-media{position:absolute;inset:-10% 0;background-image:var(--pbg);background-position:center;background-size:cover;background-repeat:no-repeat;opacity:.5}
/* dark ground, so the eyebrow has to leave red behind */
.phero .eyebrow{color:var(--gold)}
.phero .eyebrow::before{background:var(--gold)}
.phero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,15,30,.8),rgba(7,15,30,.55) 50%,rgba(7,15,30,.95))}
.phero-in{position:relative;z-index:2;padding-block:clamp(4rem,11vw,8rem)}
.phero h1{color:#fff;max-width:16ch}
.phero .lede{color:rgba(255,255,255,.85)}
.phero .btnrow{margin-top:2rem}

/* =========================================================================
   PROSE + generic sections
   ========================================================================= */
.sec{padding:clamp(4rem,8vw,6.6rem) 0}
.sec.alt{background:var(--bone)}
.prose{max-width:70ch}
.prose h2{color:var(--navy);margin-top:2.2em}
.prose h2:first-child{margin-top:0}
.prose h3{color:var(--navy);margin-top:1.8em;text-transform:none;letter-spacing:0;font-size:1.35rem}
.prose ul{padding-left:1.2rem;color:var(--muted)}
.prose li{margin-bottom:.5rem}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.4rem);align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr}}
.split img{border-radius:var(--r-lg);box-shadow:var(--shadow)}

/* =========================================================================
   FINAL CTA
   ========================================================================= */
.fcta{background:var(--red);color:#fff;padding:clamp(4rem,9vw,7rem) 0;text-align:center;position:relative;overflow:hidden}
.fcta::before{content:"";position:absolute;inset:0;opacity:.1;
  background:repeating-linear-gradient(45deg,transparent 0 26px,#fff 26px 28px)}
.fcta .wrap{position:relative}
.fcta h2{color:#fff;max-width:20ch;margin-inline:auto}
.fcta p{max-width:56ch;margin-inline:auto;color:rgba(255,255,255,.9)}
.fcta .btn-ghost:hover{color:var(--red)}

/* =========================================================================
   FORM
   ========================================================================= */
.estform{background:var(--bone);padding:clamp(1.8rem,4vw,3rem);border-radius:var(--r-lg);box-shadow:var(--shadow);display:grid;gap:1.15rem}
.estform label{display:grid;gap:.42rem;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.78rem;color:var(--navy)}
.estform label span{color:var(--red)}
.estform input,.estform select,.estform textarea{
  font-family:var(--text);font-size:1rem;padding:.85em .95em;border:1.5px solid rgba(14,29,56,.2);
  border-radius:var(--r);background:var(--cream);color:var(--ink);transition:border-color .3s,box-shadow .3s;
  text-transform:none;letter-spacing:0;font-weight:400;width:100%;
}
.estform input:focus,.estform select:focus,.estform textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 4px rgba(14,29,56,.1)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
@media(max-width:620px){.f2{grid-template-columns:1fr}}
.hp{position:absolute;left:-9999px}
.estform .btn{justify-self:start;margin-top:.4rem}

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-foot{background:var(--navy-deep);color:rgba(255,255,255,.72);padding:clamp(3.4rem,7vw,5.4rem) 0 7rem;font-size:.92rem}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.4rem;padding-bottom:2.8rem;border-bottom:1px solid rgba(255,255,255,.12)}
@media(max-width:900px){.foot-top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-top{grid-template-columns:1fr}}
.foot-brand img{width:84px;border-radius:50%;margin-bottom:1rem}
.foot-tag{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#fff;font-size:1.15rem;line-height:1.15;max-width:22ch}
.foot-lic{font-size:.8rem;color:var(--muted-2);margin-bottom:1.2rem}
.foot-col h3{color:var(--gold);font-size:.8rem;letter-spacing:.18em;margin-bottom:1rem}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.foot-col a{text-decoration:none;transition:color .3s,transform .3s var(--ease);display:inline-block}
.foot-col a:hover{color:#fff;transform:translateX(4px)}
.foot-locs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem;padding:2.4rem 0;border-bottom:1px solid rgba(255,255,255,.12)}
.foot-loc h4{margin:0 0 .2rem;font-size:1.02rem}
.foot-loc h4 a{color:#fff;text-decoration:none}
.foot-loc .lbl{font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;color:var(--gold);margin-bottom:.6rem}
.foot-loc address{font-style:normal;font-size:.88rem;margin-bottom:.4rem}
.foot-loc a{color:var(--gold);text-decoration:none}
.areas{padding:1.6rem 0;border-bottom:1px solid rgba(255,255,255,.12)}
.areas summary{cursor:pointer;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;color:var(--gold)}
.areas p{margin-top:1rem;font-size:.8rem;line-height:1.8;color:var(--muted-2)}
.foot-legal{padding-top:1.8rem;font-size:.78rem;color:var(--muted-2)}
.foot-legal .disc{line-height:1.65;max-width:none;opacity:.72}
.social a{color:var(--gold);text-decoration:none;margin-right:1rem}

/* =========================================================================
   MOBILE CALL BAR
   ========================================================================= */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:940;display:none;
  background:var(--navy-deep);border-top:1px solid rgba(255,255,255,.14)}
.callbar a{flex:1;text-align:center;padding:1.05rem .5rem;text-decoration:none;color:#fff;
  font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.09em;font-size:.94rem}
.callbar a:first-child{background:var(--red)}
.cb-alt{color:var(--gold)}
/* The wordmark is a fixed size image, so the brand no longer reflows on its own
   the way the old text lockup did. Step it down before it can crowd the burger
   on a 360px screen. Ratio held at 289:84 so the artwork never distorts. */
@media(max-width:560px){
  .brand{gap:.5rem}
  .brand-mark{width:44px}
  .brand-word{width:138px;height:40px}
}
@media(max-width:380px){
  .brand-mark{width:40px}
  .brand-word{width:124px;height:36px}
}

@media(max-width:820px){
  .callbar{display:flex}
  .site-foot{padding-bottom:5.5rem}

  /* Thumb sized rows. These link lists rendered 24px tall with a 10px gap,
     which makes wrong taps easy on a phone. The row becomes the target, so
     nothing has to be aimed at. Inline links inside a sentence are left alone
     on purpose: padding them would break the line box they sit in. */
  .foot-col ul,.city-col ul{gap:.1rem}
  .foot-col ul a,.city-col ul a{display:flex;align-items:center;min-height:44px;padding:.35rem 0}
  .foot-loc h4 a,.foot-loc>a{display:inline-flex;align-items:center;min-height:44px}
  .social a{display:inline-flex;align-items:center;min-height:44px;margin-right:1.1rem}
  .areas summary{padding:.55rem 0;min-height:44px;display:flex;align-items:center}
  .crumbs ol{gap:.35rem .5rem}
  .crumbs a{display:inline-flex;align-items:center;min-height:40px}

  /* Standalone links elsewhere that rendered 15px to 20px tall. Every one of
     these is the only child of its parent, so growing it cannot break a line
     of running text. The :only-child guard on tel/mailto keeps it that way
     even if one of these later gets dropped into a sentence. */
  .ticks a,.loc-grid a,a.more{display:inline-flex;align-items:center;min-height:44px}
  main p > a[href^="tel:"]:only-child,
  main p > a[href^="mailto:"]:only-child{display:inline-flex;align-items:center;min-height:44px}
  .gal-filters button{min-height:44px}
}

/* ---------- custom cursor (desktop, fine pointer only) ---------- */
.cursor{position:fixed;top:0;left:0;width:34px;height:34px;border:1.5px solid var(--red);border-radius:50%;
  pointer-events:none;z-index:9999;translate:-50% -50%;transition:width .3s var(--ease),height .3s var(--ease),background .3s,border-color .3s;
  mix-blend-mode:difference;display:none}
@media(hover:hover) and (pointer:fine){
  .cursor{display:block}
  .cursor.big{width:70px;height:70px;background:rgba(168,35,43,.18);border-color:transparent}
}