/* ═══════════════════════════════════════════════════════════
   BP LANDSCAPING & SNOW REMOVAL — Homepage
   Editorial / architectural system.  Vanilla CSS, no build step.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ───────────────────────────────────────────── */
:root{
  /* Brand */
  --brand:      #008240;          /* sampled from the BP mark */
  --brand-700:  #04693A;
  --brand-500:  #0E9A52;
  --brand-300:  #63C692;
  --brand-100:  #D7EDE1;

  /* Growing season */
  --ink:        #0A120E;
  --ink-2:      #101B15;
  --ink-3:      #182720;
  --bone:       #F5F2EB;
  --bone-2:     #ECE7DC;
  --bone-3:     #DED7C7;
  --mute:       #5E6B62;

  /* Feedback — 5.85:1 on --bone, 7.4:1 on --ink for the light variant */
  --danger:      #B3261E;
  --danger-lt:   #F2B8B5;

  /* Off season */
  --slate:      #0B141B;
  --slate-2:    #101E28;
  --ice:        #E9F1F6;
  --ice-2:      #B6CFDE;
  --frost:      #79ADCC;

  /* Semantic (re-pointed per section) */
  --bg:         var(--bone);
  --fg:         var(--ink);
  --fg-soft:    var(--mute);
  --line:       rgba(10,18,14,.14);
  --accent:     var(--brand);

  /* Type */
  --sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif:"Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;

  --fs-display: clamp(2.9rem, 7.6vw, 8.2rem);
  --fs-h1:      clamp(2.4rem, 6.2vw, 6.4rem);
  --fs-h2:      clamp(1.95rem, 4.2vw, 4rem);
  --fs-h3:      clamp(1.35rem, 2.1vw, 2rem);
  --fs-lead:    clamp(1.06rem, 1.35vw, 1.42rem);
  --fs-body:    clamp(1rem, .55vw + .85rem, 1.125rem);
  --fs-label:   .6875rem;

  /* Space — 8pt rhythm */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:3rem;
  --s6:4rem;  --s7:6rem; --s8:8rem;
  --sec:       clamp(5rem, 11vw, 11rem);
  --gut:       clamp(1.25rem, 4.4vw, 4.5rem);
  --maxw:      1560px;

  /* Motion */
  --e-out:  cubic-bezier(.22,1,.36,1);
  --e-in:   cubic-bezier(.55,0,1,.45);
  --e-soft: cubic-bezier(.4,0,.2,1);
  --t-fast: .18s;
  --t-mid:  .32s;
  --t-slow: .7s;

  /* Layering */
  /* The header outranks the menu: the burger doubles as the close button and
     must stay reachable while the panel is open. */
  --z-base:1; --z-sticky:40; --z-menu:80; --z-hdr:90; --z-lb:100; --z-load:120; --z-cur:200;
}

/* ── 2. RESET ────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
/* Class-level `display` on .menu/.lb outranks the UA sheet's [hidden] rule,
   which would leave the closed overlays invisible but still eating every click. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{
  background:var(--bg);color:var(--fg);
  font-family:var(--sans);font-size:var(--fs-body);font-weight:400;
  line-height:1.6;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background-color .8s var(--e-soft), color .8s var(--e-soft);
}
body.is-loading{overflow:hidden}
body.no-scroll{overflow:hidden}
img,svg,video,canvas{display:block;max-width:100%}
img,video{height:auto}
/* Every inline icon carries its own fill attribute — a blanket `svg{fill:none}`
   would outrank those presentation attributes and blank out the solid icons. */
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}
h1,h2,h3,h4{font-weight:400;line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
p{text-wrap:pretty}
address{font-style:normal}
::selection{background:var(--brand);color:#fff}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;border-radius:2px;
}

/* Visually hidden but announced — for supplementary link context such as
   "(opens in a new tab)". */
.vh{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

.skip-link{
  position:fixed;top:.5rem;left:.5rem;z-index:999;
  padding:.75rem 1.25rem;background:var(--ink);color:var(--bone);
  border-radius:2px;transform:translateY(-160%);transition:transform var(--t-fast);
}
.skip-link:focus{transform:none}

/* ── 3. LAYOUT PRIMITIVES ────────────────────────────────── */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}

.idx{
  display:flex;align-items:center;gap:.7rem;
  font-size:var(--fs-label);font-weight:500;
  letter-spacing:.19em;text-transform:uppercase;
  color:var(--fg-soft);line-height:1;
}
.idx i{width:clamp(24px,3vw,48px);height:1px;background:var(--accent);flex:none}

.h2{font-family:var(--sans);font-size:var(--fs-h2);font-weight:400;letter-spacing:-.035em}
.h2 em,.cli__h em,.hero__h1 em,.cta__h em{
  font-family:var(--serif);font-style:italic;font-weight:400;
  letter-spacing:-.015em;padding-right:.06em;
}
.lead{font-size:var(--fs-lead);line-height:1.55;color:var(--fg-soft);max-width:62ch}

.sec__head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding-bottom:clamp(2rem,4vw,3.5rem);
}
.sec__head--stack{display:block}

/* ── 4. BUTTONS ──────────────────────────────────────────── */
.btn{
  --bh:52px;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  min-height:var(--bh);padding:0 1.6rem;
  font-size:.875rem;font-weight:500;letter-spacing:.02em;
  border-radius:999px;overflow:hidden;isolation:isolate;
  border:1px solid var(--line);
  transition:color var(--t-mid) var(--e-soft), border-color var(--t-mid) var(--e-soft),
             transform var(--t-fast) var(--e-out);
  cursor:pointer;touch-action:manipulation;
}
.btn span{position:relative;z-index:2}
.btn svg{position:relative;z-index:2;width:17px;height:17px;transition:transform var(--t-mid) var(--e-out)}
.btn::before{
  content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;
  background:var(--accent);
  transform:translateY(101%);
  transition:transform .45s var(--e-out);
}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:scale(.975)}

.btn--lg{--bh:60px;padding:0 2rem;font-size:.9375rem}
@media (min-width:768px){.btn--lg{--bh:66px;padding:0 2.4rem}}

.btn--brand{background:var(--brand);border-color:var(--brand);color:#fff}
.btn--brand::before{background:var(--ink)}
.btn--brand:hover,.btn--brand:focus-visible{border-color:var(--ink);color:#fff}

.btn--outline{border-color:var(--line);color:var(--fg)}
.btn--outline::before{background:var(--ink)}
.btn--outline:hover,.btn--outline:focus-visible{color:var(--bone);border-color:var(--ink)}

.btn--ice{border-color:rgba(233,241,246,.3);color:var(--ice)}
.btn--ice::before{background:var(--ice)}
.btn--ice:hover,.btn--ice:focus-visible{color:var(--slate);border-color:var(--ice)}

.btn--pill{--bh:44px;padding:0 1rem;font-size:.8125rem;border-color:currentColor;white-space:nowrap}
@media (min-width:400px){.btn--pill{padding:0 1.25rem}}
.btn--pill::before{background:var(--brand)}
.btn--pill:hover,.btn--pill:focus-visible{color:#fff;border-color:var(--brand)}

/* ── 5. PRELOADER ────────────────────────────────────────── */
.loader{
  position:fixed;inset:0;z-index:var(--z-load);
  display:grid;place-items:center;
  background:var(--ink);color:var(--brand-300);
  transition:transform .9s var(--e-out);
}
.loader.is-done{transform:translateY(-101%)}
.loader__inner{display:grid;justify-items:center;gap:1.25rem}
.loader__mark{width:74px;height:81px}
.loader__path{
  stroke-dasharray:2400;stroke-dashoffset:2400;
  animation:draw 1.5s var(--e-soft) forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}
.loader__meta{
  font-size:var(--fs-label);letter-spacing:.34em;text-transform:uppercase;
  color:rgba(245,242,235,.5);
  opacity:0;animation:fadeIn .5s .5s forwards;
}
@keyframes fadeIn{to{opacity:1}}
.loader__bar{
  position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(2rem,5vh,3.5rem);
  height:1px;background:rgba(245,242,235,.16);overflow:hidden;
}
.loader__fill{
  display:block;height:100%;width:100%;background:var(--brand-300);
  transform:scaleX(0);transform-origin:left;
  animation:fill 1.5s var(--e-soft) forwards;
}
@keyframes fill{to{transform:scaleX(1)}}

/* ── 6. HEADER ───────────────────────────────────────────── */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-hdr);
  color:var(--bone);
  transition:transform .5s var(--e-out), color .4s var(--e-soft);
  padding-top:env(safe-area-inset-top);
}
.hdr__bg{
  position:absolute;inset:0;z-index:-1;
  background:rgba(245,242,235,.9);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid rgba(10,18,14,.08);
  opacity:0;transform:translateY(-100%);
  transition:opacity .45s var(--e-soft), transform .45s var(--e-out);
}
.hdr.is-stuck{color:var(--ink)}
.hdr.is-stuck .hdr__bg{opacity:1;transform:none}
.hdr.is-hidden{transform:translateY(-100%)}

/* While the menu is open the header floats on the dark panel: drop the light
   bar, revert to light-on-dark, and never let the hide-on-scroll state apply. */
body.menu-open .hdr{color:var(--bone);transform:none}
body.menu-open .hdr__bg{opacity:0}
body.menu-open .hdr__mark{filter:brightness(0) invert(1)}
body.menu-open .hdr__nav,body.menu-open .hdr__tel,body.menu-open .hdr__act .btn--pill{opacity:0;pointer-events:none}

.hdr__in{
  max-width:var(--maxw);margin-inline:auto;
  padding:clamp(.9rem,1.6vw,1.35rem) var(--gut);
  display:flex;align-items:center;gap:var(--s4);
  transition:padding .4s var(--e-soft);
}
.hdr.is-stuck .hdr__in{padding-block:.7rem}

.hdr__logo{display:flex;align-items:center;gap:.7rem;flex:none;margin-right:auto;min-height:44px}
.hdr__mark{
  width:36px;height:auto;flex:none;
  filter:brightness(0) invert(1);
  transition:filter .4s var(--e-soft), width .4s var(--e-soft);
}
.hdr.is-stuck .hdr__mark{filter:none}
.hdr__word{display:none;line-height:1.15}
.hdr__word b{display:block;font-size:.9375rem;font-weight:600;letter-spacing:-.02em}
.hdr__word i{
  display:block;font-style:normal;font-size:.625rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;opacity:.62;
}
@media (min-width:480px){.hdr__word{display:block}}

.hdr__nav{display:none}
@media (min-width:1180px){
  .hdr__nav{display:block}
  .hdr__nav ul{display:flex;gap:clamp(1rem,2.2vw,2.2rem)}
  .hdr__nav a{
    position:relative;display:block;padding:.35rem 0;
    font-size:.8125rem;font-weight:500;letter-spacing:.01em;
  }
  .hdr__nav a::after{
    content:"";position:absolute;left:0;bottom:.1rem;width:100%;height:1px;
    background:currentColor;transform:scaleX(0);transform-origin:right;
    transition:transform .4s var(--e-out);
  }
  .hdr__nav a:hover::after,.hdr__nav a:focus-visible::after{transform:scaleX(1);transform-origin:left}
}

.hdr__act{display:flex;align-items:center;gap:clamp(.6rem,1.4vw,1.4rem);flex:none}
.hdr__tel{
  display:none;align-items:center;gap:.5rem;
  font-size:.8125rem;font-weight:500;font-variant-numeric:tabular-nums;
  min-height:44px;
}
.hdr__tel svg{width:15px;height:15px;opacity:.7}
.hdr__tel:hover{color:var(--brand-300)}
.hdr.is-stuck .hdr__tel:hover{color:var(--brand)}
@media (min-width:900px){.hdr__tel{display:flex}}
/* "Get A Quote" is the page's primary conversion — it stays visible on phones. */

.burger{
  width:44px;height:44px;display:grid;place-content:center;gap:6px;flex:none;
  border:1px solid currentColor;border-radius:999px;
}
.burger i{display:block;width:16px;height:1.5px;background:currentColor;transition:transform .35s var(--e-out),opacity .2s}
.burger[aria-expanded="true"] i:first-child{transform:translateY(3.75px) rotate(45deg)}
.burger[aria-expanded="true"] i:last-child{transform:translateY(-3.75px) rotate(-45deg)}
@media (min-width:1180px){.burger{display:none}}

/* ── 7. MOBILE MENU ──────────────────────────────────────── */
.menu{
  position:fixed;inset:0;z-index:var(--z-menu);
  background:var(--ink);color:var(--bone);
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(env(safe-area-inset-top) + 6rem) var(--gut) calc(env(safe-area-inset-bottom) + 2.5rem);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .7s var(--e-out);
}
.menu.is-open{clip-path:inset(0 0 0 0)}
.menu__nav{margin-bottom:auto;padding-top:2rem}
.menu__nav li{overflow:hidden;border-bottom:1px solid rgba(245,242,235,.1)}
.menu__nav a{
  display:block;padding:clamp(.7rem,2.2vh,1.15rem) 0;
  font-family:var(--serif);font-size:clamp(1.7rem,7vw,3rem);
  letter-spacing:-.02em;line-height:1.15;
  transform:translateY(110%);
  transition:transform .6s var(--e-out),color var(--t-mid);
  transition-delay:calc(var(--i) * .055s);
}
.menu.is-open .menu__nav a{transform:none}
.menu__nav a:hover,.menu__nav a:focus-visible{color:var(--brand-300)}
.menu__foot{
  display:flex;flex-direction:column;align-items:flex-start;gap:.85rem;
  padding-top:2rem;border-top:1px solid rgba(245,242,235,.12);
  opacity:0;transform:translateY(16px);
  transition:opacity .5s .3s var(--e-soft),transform .5s .3s var(--e-out);
}
.menu.is-open .menu__foot{opacity:1;transform:none}
.menu__foot>a:not(.btn){font-size:1.0625rem;min-height:44px;display:flex;align-items:center}
.menu__foot .btn{margin-top:.4rem}

/* ── 8. HERO ─────────────────────────────────────────────── */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:calc(env(safe-area-inset-top) + 7rem) 0 0;
  color:var(--bone);background:var(--ink);
  overflow:hidden;isolation:isolate;
}
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__video,.hero__media::after{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.hero__media::after{
  content:"";background:url("../video/hero-poster.webp") center/cover no-repeat;z-index:-1;
}
.hero__video{
  transform:scale(1.14);opacity:0;
  transition:transform 1.8s var(--e-out), opacity 1.2s var(--e-soft);
}
body:not(.is-loading) .hero__video{transform:scale(1);opacity:1}
/* Three stacked scrims: top bar legibility, a left column so the headline always
   lands on a dark field whatever frame the video is on, and a bottom anchor. */
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(10,18,14,.74) 0%, rgba(10,18,14,.26) 24%, rgba(10,18,14,.18) 42%, rgba(10,18,14,.80) 80%, rgba(10,18,14,.95) 100%),
    linear-gradient(90deg, rgba(10,18,14,.66) 0%, rgba(10,18,14,.4) 38%, transparent 72%),
    radial-gradient(120% 80% at 15% 85%, rgba(4,60,32,.5), transparent 62%);
}
.hero__grain{
  position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;pointer-events:none;
  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");
}

.hero__in{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:0 var(--gut) clamp(2.5rem,6vh,4.5rem);
}
.hero__h1{
  font-size:var(--fs-display);font-weight:400;
  letter-spacing:-.042em;line-height:.95;
  max-width:17ch;margin-bottom:clamp(1.25rem,2.6vw,2rem);
}
.hero__p{
  font-size:var(--fs-lead);line-height:1.5;
  color:rgba(245,242,235,.82);max-width:52ch;
  margin-bottom:clamp(1.75rem,3vw,2.5rem);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:1rem}

.hero__bar{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:1.1rem var(--gut) calc(env(safe-area-inset-bottom) + 1.1rem);
  border-top:1px solid rgba(245,242,235,.16);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-size:var(--fs-label);letter-spacing:.19em;text-transform:uppercase;
  color:rgba(245,242,235,.62);
}
.hero__est,.hero__loc{white-space:nowrap}
.hero__est{display:none}
@media (min-width:600px){.hero__est{display:block}}
.hero__scroll{display:flex;align-items:center;gap:.6rem;min-height:44px;transition:color var(--t-mid)}
.hero__scroll:hover{color:var(--bone)}
.hero__scroll i{
  width:1px;height:26px;background:rgba(245,242,235,.4);position:relative;overflow:hidden;
}
.hero__scroll i::after{
  content:"";position:absolute;inset:0;background:var(--brand-300);
  animation:scrollCue 2.1s var(--e-soft) infinite;
}
@keyframes scrollCue{
  0%{transform:translateY(-100%)}
  55%,100%{transform:translateY(100%)}
}

/* ── 9. INTRODUCTION ─────────────────────────────────────── */
.intro{padding-top:var(--sec);background:var(--bone)}
.intro__grid{
  display:grid;gap:clamp(1.75rem,3.5vw,4rem);
  padding-bottom:clamp(3rem,7vw,6rem);
}
@media (min-width:1000px){
  .intro__grid{grid-template-columns:1.15fr 1fr;align-items:start;gap:clamp(3rem,6vw,7rem)}
}
.intro__head .idx{margin-bottom:clamp(1.25rem,2.4vw,2rem)}
.intro__head .h2{max-width:15ch}
.intro__body{padding-top:clamp(0rem,1.2vw,1rem)}

.intro__fig{
  position:relative;overflow:hidden;
  height:clamp(320px,58vw,760px);
}
.intro__fig .par{position:absolute;inset:-8% 0}
.intro__fig img{width:100%;height:100%;object-fit:cover}

/* ── 10. FEATURED VIDEOS (reels) ─────────────────────────── */
.reels{
  padding:var(--sec) 0;
  background:var(--ink);color:var(--bone);
  --fg:var(--bone);--fg-soft:rgba(245,242,235,.58);--accent:var(--brand-300);
  --line:rgba(245,242,235,.18);
}
.reels .idx{color:var(--fg-soft)}
.reels__nav{display:none;gap:.6rem}
@media (min-width:900px){.reels__nav{display:flex}}
.rbtn{
  width:52px;height:52px;display:grid;place-content:center;
  border:1px solid var(--line);border-radius:999px;
  transition:background var(--t-mid),color var(--t-mid),border-color var(--t-mid),transform var(--t-fast);
}
.rbtn svg{width:18px;height:18px}
.rbtn:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.rbtn:active{transform:scale(.94)}
.rbtn[disabled]{opacity:.32;pointer-events:none}

.reels__track{
  display:flex;gap:clamp(.75rem,1.6vw,1.5rem);
  padding-inline:var(--gut);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-left:var(--gut);
  scrollbar-width:none;cursor:grab;
}
.reels__track::-webkit-scrollbar{display:none}
.reels__track.is-drag{cursor:grabbing;scroll-snap-type:none}
.reels__track:focus-visible{outline-offset:-4px}

.reel{flex:0 0 auto;width:min(74vw,340px);scroll-snap-align:start}
@media (min-width:768px){.reel{width:clamp(280px,26vw,400px)}}
.reel__btn{
  position:relative;display:block;width:100%;aspect-ratio:9/16;
  overflow:hidden;border-radius:3px;background:var(--ink-3);
  isolation:isolate;
}
/* .reel__poster is the static variant used where no local preview file exists
   (e.g. Vimeo-hosted winter footage) — same box, same hover, no autoplay. */
.reel__v,.reel__poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--e-out),filter .5s var(--e-soft);
  filter:saturate(.9);
}
.reel__btn::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,18,14,.35),transparent 34%,transparent 58%,rgba(10,18,14,.72));
  transition:opacity .5s var(--e-soft);
}
.reel__btn:hover .reel__v,.reel__btn:focus-visible .reel__v,
.reel__btn:hover .reel__poster,.reel__btn:focus-visible .reel__poster{transform:scale(1.06);filter:saturate(1.05)}
.reel__play{
  position:absolute;z-index:2;left:50%;top:50%;translate:-50% -50%;
  width:64px;height:64px;display:grid;place-content:center;
  border-radius:999px;background:rgba(245,242,235,.14);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(245,242,235,.4);color:var(--bone);
  transition:transform .45s var(--e-out),background .3s;
}
.reel__play svg{width:22px;height:22px;margin-left:3px}
.reel__btn:hover .reel__play,.reel__btn:focus-visible .reel__play{transform:translate(0,0) scale(1.1);background:var(--brand)}
.reel__no{
  position:absolute;z-index:2;left:1rem;bottom:.9rem;
  font-size:var(--fs-label);letter-spacing:.2em;
  color:rgba(245,242,235,.8);font-variant-numeric:tabular-nums;
}

/* ── 11. SERVICES ────────────────────────────────────────── */
.svc{padding:var(--sec) 0;background:var(--bone);position:relative}
.svc__list{border-top:1px solid var(--line)}
.svc__row{border-bottom:1px solid var(--line)}
.svc__link{
  position:relative;display:grid;gap:.9rem 1.25rem;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:"no title arrow" "desc desc desc";
  align-items:start;
  padding:clamp(1.5rem,3.4vw,2.6rem) 0;
  transition:color var(--t-mid) var(--e-soft);
}
@media (min-width:900px){
  .svc__link{
    grid-template-columns:5rem minmax(0,1.05fr) minmax(0,1fr) auto;
    grid-template-areas:"no title desc arrow";
    align-items:center;gap:clamp(1.5rem,3vw,3.5rem);
  }
}
.svc__row::before{
  content:"";position:absolute;left:0;right:0;height:1px;bottom:-1px;
  background:var(--brand);transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--e-out);
}
.svc__row{position:relative}
.svc__row:hover::before,.svc__row:focus-within::before{transform:scaleX(1)}
.svc__row:hover .svc__link,.svc__row:focus-within .svc__link{color:var(--brand-700)}

.svc__no{
  grid-area:no;font-size:var(--fs-label);letter-spacing:.2em;
  color:var(--fg-soft);font-variant-numeric:tabular-nums;padding-top:.55em;
}
.svc__title{
  grid-area:title;
  font-size:clamp(1.45rem,3.1vw,2.9rem);letter-spacing:-.035em;
  transition:transform .5s var(--e-out);
}
@media (min-width:900px){
  .svc__row:hover .svc__title,.svc__row:focus-within .svc__title{transform:translateX(10px)}
}
.svc__desc{grid-area:desc;font-size:.9375rem;line-height:1.6;color:var(--fg-soft);max-width:52ch}
.svc__arrow{
  grid-area:arrow;width:46px;height:46px;display:grid;place-content:center;flex:none;
  border:1px solid var(--line);border-radius:999px;
  transition:background var(--t-mid),color var(--t-mid),border-color var(--t-mid),transform .45s var(--e-out);
}
.svc__arrow svg{width:17px;height:17px}
.svc__row:hover .svc__arrow,.svc__row:focus-within .svc__arrow{
  background:var(--brand);border-color:var(--brand);color:#fff;transform:rotate(45deg);
}
.svc__cta{padding-top:clamp(2.25rem,4.5vw,3.5rem)}

.svc__ghost{
  position:fixed;top:0;left:0;z-index:5;
  width:min(20vw,290px);aspect-ratio:4/3;
  border-radius:3px;overflow:hidden;pointer-events:none;
  opacity:0;transform:translate(28px,-50%) scale(.92);
  transition:opacity .35s var(--e-soft),transform .5s var(--e-out);
  will-change:transform,opacity;
  box-shadow:0 30px 70px -30px rgba(10,18,14,.6);
}
.svc__ghost.is-on{opacity:1;transform:translate3d(-50%,-50%,0) scale(1)}
.svc__ghost img{width:100%;height:100%;object-fit:cover}
@media (max-width:899px),(pointer:coarse){.svc__ghost{display:none}}

/* ── 12. OFF SEASON ──────────────────────────────────────── */
.off{
  position:relative;padding:var(--sec) 0;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(120% 90% at 50% -10%, #16303f 0%, transparent 58%),
    linear-gradient(180deg,var(--slate-2),var(--slate) 62%);
  color:var(--ice);
  --fg:var(--ice);--fg-soft:rgba(233,241,246,.62);--accent:var(--frost);
  --line:rgba(233,241,246,.16);
}
.off::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  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");
  opacity:.045;
}
.off__snow{position:absolute;inset:0;z-index:0;pointer-events:none;width:100%;height:100%}
.off__glow{
  position:absolute;left:50%;top:-30%;translate:-50% 0;z-index:-1;
  width:min(1200px,140vw);aspect-ratio:1;pointer-events:none;
  background:radial-gradient(circle,rgba(121,173,204,.16),transparent 62%);
}
.off .wrap{position:relative;z-index:1}

/* Real 1px rules rather than a gap-reveals-the-background trick, so the cards
   can stay fully transparent and let the snowfall show through. */
.off__grid{display:grid;border-block:1px solid var(--line)}
.ocard + .ocard{border-top:1px solid var(--line)}
@media (min-width:820px){
  .off__grid{grid-template-columns:repeat(3,1fr)}
  .ocard + .ocard{border-top:0;border-left:1px solid var(--line)}
}
.ocard{
  position:relative;isolation:isolate;
  padding:clamp(1.75rem,3.2vw,2.75rem);
  display:flex;flex-direction:column;gap:1rem;
  background:transparent;
}
/* Fill on hover only — keeps the winter section reading as open air, not a slab. */
.ocard::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(233,241,246,.1),rgba(233,241,246,.02));
  opacity:0;transition:opacity .5s var(--e-soft);
}
.ocard:hover::before{opacity:1}
.ocard__ico{
  width:46px;height:46px;display:grid;place-content:center;
  border:1px solid var(--line);border-radius:999px;color:var(--frost);
  margin-bottom:clamp(1.5rem,4vw,3.5rem);
  transition:transform .6s var(--e-out),color var(--t-mid),border-color var(--t-mid);
}
.ocard__ico svg{width:22px;height:22px}
.ocard:hover .ocard__ico{transform:rotate(90deg);color:var(--ice);border-color:rgba(233,241,246,.4)}
.ocard__t{font-size:var(--fs-h3);letter-spacing:-.03em}
.ocard__d{font-size:.9375rem;line-height:1.6;color:var(--fg-soft);max-width:42ch}

/* ── 13. OUR CLIENTS ─────────────────────────────────────── */
.cli{padding:var(--sec) 0;background:var(--bone-2)}
.cli__stmt{
  display:grid;gap:clamp(1.5rem,3vw,2.5rem);
  padding:clamp(2rem,4vw,3.5rem) 0 clamp(3rem,6vw,5rem);
}
@media (min-width:1000px){
  .cli__stmt{grid-template-columns:1.4fr auto;align-items:end;gap:clamp(2rem,5vw,5rem)}
}
.cli__h{
  font-size:var(--fs-h2);font-weight:400;letter-spacing:-.035em;max-width:16ch;
}
.cli__yrs{
  display:flex;align-items:baseline;gap:.5rem;
  font-family:var(--serif);line-height:.82;white-space:nowrap;
}
.cli__for,.cli__word{font-size:clamp(1.4rem,2.6vw,2.4rem);color:var(--fg-soft)}
.cli__num{
  font-size:clamp(4.5rem,13vw,11rem);letter-spacing:-.045em;
  color:var(--brand);font-variant-numeric:tabular-nums;
}

.cli__logos{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(2rem,7vw,6rem);
  padding:clamp(2rem,4vw,3.5rem) 0;
  border-top:1px solid var(--line);
}
.cli__logos li{flex:0 0 auto}
/* Sources are trimmed to the mark, so height alone sets the size.
   --k optically balances marks with very different aspect ratios. */
.cli__logos img{
  width:auto;height:calc(clamp(26px,3.6vw,44px) * var(--k,1));object-fit:contain;
  filter:grayscale(1) contrast(.85);opacity:.55;
  transition:filter .5s var(--e-soft),opacity .5s var(--e-soft),transform .5s var(--e-out);
}
.cli__logos li:nth-child(3) img{--k:.6}   /* Oracle: pure wordmark, very wide */
.cli__logos li:hover img{filter:none;opacity:1;transform:translateY(-3px)}

/* ── 14. REVIEWS ─────────────────────────────────────────── */
.rev{padding:var(--sec) 0;background:var(--bone)}
.rev__grid{display:grid;gap:clamp(1.75rem,3.5vw,4rem);padding-bottom:clamp(2.5rem,5vw,4rem)}
@media (min-width:1000px){
  .rev__grid{grid-template-columns:1.15fr 1fr;align-items:start;gap:clamp(3rem,6vw,7rem)}
}
.rev__head .idx{margin-bottom:clamp(1.25rem,2.4vw,2rem)}
.rev__head .h2{max-width:13ch}
.rev__body{display:grid;gap:clamp(1.5rem,3vw,2.25rem);justify-items:start}

.embed{min-height:280px;position:relative}
.embed::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,var(--bone-2) 8%,var(--bone-3) 18%,var(--bone-2) 33%);
  background-size:220% 100%;animation:shimmer 1.6s linear infinite;
  border-radius:3px;opacity:1;transition:opacity .5s;
}
.embed.is-live::before{opacity:0;animation:none;pointer-events:none}
@keyframes shimmer{to{background-position:-220% 0}}

/* ── 15. CONTACT CTA ─────────────────────────────────────── */
.cta{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(520px,82svh,860px);
  display:grid;align-items:center;
  padding:var(--sec) 0;color:var(--bone);background:var(--ink);
  /* so shared chrome (.idx and friends) resolves against the dark image */
  --fg:var(--bone);--fg-soft:rgba(245,242,235,.66);
  --accent:var(--brand-300);--line:rgba(245,242,235,.18);
}
.cta__in .idx{margin-bottom:clamp(1.25rem,2.4vw,1.75rem)}
.cta__media{position:absolute;inset:0;z-index:-1}
.cta__media .par{position:absolute;inset:-10% 0}
.cta__media img{width:100%;height:100%;object-fit:cover}
.cta__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(10,18,14,.55),rgba(10,18,14,.72) 55%,rgba(10,18,14,.9)),
    radial-gradient(90% 70% at 20% 60%,rgba(4,60,32,.42),transparent 60%);
}
.cta__in{position:relative;text-align:left}
.cta__h{
  font-size:var(--fs-h1);font-weight:400;letter-spacing:-.04em;line-height:.98;
  max-width:15ch;margin-bottom:clamp(1.25rem,2.4vw,1.75rem);
}
.cta__p{
  font-size:var(--fs-lead);line-height:1.55;
  color:rgba(245,242,235,.8);max-width:54ch;
  margin-bottom:clamp(1.75rem,3.2vw,2.5rem);
}
.cta__row{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem 2rem}
.cta__tel{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:1.0625rem;font-weight:500;font-variant-numeric:tabular-nums;
  border-bottom:1px solid rgba(245,242,235,.35);
  transition:color var(--t-mid),border-color var(--t-mid);
}
.cta__tel:hover{color:var(--brand-300);border-color:var(--brand-300)}

/* ── 16. INSTAGRAM ───────────────────────────────────────── */
.ig{padding:var(--sec) 0 clamp(3rem,6vw,5rem);background:var(--bone)}
.ig__handle{
  display:inline-flex;align-items:center;gap:.6rem;min-height:44px;
  font-size:var(--fs-label);letter-spacing:.19em;text-transform:uppercase;
  transition:color var(--t-mid);
}
.ig__handle svg{width:14px;height:14px;transition:transform var(--t-mid) var(--e-out)}
.ig__handle:hover{color:var(--brand)}
.ig__handle:hover svg{transform:translate(3px,-3px)}

/* ── 17. FOOTER ──────────────────────────────────────────── */
.ftr{
  background:var(--ink);color:var(--bone);
  padding-top:var(--sec);
  padding-bottom:calc(env(safe-area-inset-bottom) + 1.5rem);
  --line:rgba(245,242,235,.14);
}
.ftr__top{
  display:grid;gap:clamp(2.5rem,5vw,4rem);
  padding-bottom:clamp(3rem,6vw,5rem);
}
@media (min-width:760px){.ftr__top{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.ftr__top{grid-template-columns:1.3fr 1.4fr 1fr;gap:clamp(2rem,5vw,6rem)}}

.ftr__logo{width:clamp(170px,17vw,230px);height:auto;margin-bottom:1.5rem}
.ftr__tag{color:rgba(245,242,235,.6);font-size:.9375rem;line-height:1.6;margin-bottom:1.25rem}
.ftr__est{
  font-size:var(--fs-label);letter-spacing:.24em;text-transform:uppercase;
  color:var(--brand-300);
}

.ftr__map{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,2.5rem)}
/* Footer section headings are h2 (siblings of the page's other sections) but
   styled as small caps labels. */
.ftr__map h2,.ftr__contact h2{
  font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(245,242,235,.45);margin-bottom:1.25rem;font-weight:500;line-height:1.4;
}
.ftr__col li a,.ftr__contact p{font-size:.9375rem;line-height:1.55}
.ftr__col li a{
  display:inline-flex;align-items:center;min-height:44px;
  color:rgba(245,242,235,.82);transition:color var(--t-fast),transform var(--t-fast) var(--e-out);
}
.ftr__col li a:hover{color:var(--brand-300);transform:translateX(3px)}

.ftr__contact p{color:rgba(245,242,235,.6);margin-top:1rem}
.ftr__big{
  display:flex;align-items:center;min-height:48px;
  font-family:var(--serif);font-size:clamp(1.6rem,2.6vw,2.1rem);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  transition:color var(--t-mid);
}
.ftr__big:hover{color:var(--brand-300)}
.ftr__mail{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:.9375rem;color:rgba(245,242,235,.82);
  border-bottom:1px solid var(--line);transition:color var(--t-mid),border-color var(--t-mid);
}
.ftr__mail:hover{color:var(--brand-300);border-color:var(--brand-300)}

.ftr__soc{display:flex;gap:.6rem;margin-top:1.75rem}
.ftr__soc a{
  width:44px;height:44px;display:grid;place-content:center;
  border:1px solid var(--line);border-radius:999px;
  transition:background var(--t-mid),color var(--t-mid),border-color var(--t-mid),transform var(--t-fast);
}
.ftr__soc svg{width:18px;height:18px}
.ftr__soc a:hover{background:var(--brand);border-color:var(--brand);color:#fff;transform:translateY(-2px)}

.ftr__wordmark{
  border-top:1px solid var(--line);
  padding-top:clamp(2rem,4vw,3rem);overflow:hidden;
}
/* SVG text so the wordmark scales to the exact container width at every
   breakpoint — the viewBox is fitted to the glyph bounds by JS after fonts load. */
.ftr__wordmark svg{
  display:block;width:100%;height:auto;overflow:visible;
  fill:rgba(245,242,235,.09);
  transform:translateY(26%);transition:transform 1.1s var(--e-out);
}
.ftr__wordmark svg text{font-family:var(--serif);letter-spacing:-.045em}
.ftr__wordmark.in-view svg{transform:translateY(0)}

.ftr__bot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1rem;padding-top:clamp(2rem,4vw,3rem);
  font-size:.8125rem;color:rgba(245,242,235,.45);
}
.ftr__bot ul{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
.ftr__bot a{min-height:44px;display:inline-flex;align-items:center;transition:color var(--t-fast)}
.ftr__bot a:hover{color:var(--bone)}

/* ── 18. LIGHTBOX ────────────────────────────────────────── */
.lb{
  position:fixed;inset:0;z-index:var(--z-lb);
  display:grid;place-items:center;padding:clamp(1rem,4vw,3rem);
  background:rgba(6,11,9,.9);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;transition:opacity .4s var(--e-soft);
}
.lb.is-open{opacity:1}
.lb__frame{
  position:relative;width:min(100%,420px);aspect-ratio:9/16;max-height:86svh;
  background:#000;border-radius:4px;overflow:hidden;
  transform:scale(.94) translateY(14px);
  transition:transform .55s var(--e-out);
}
.lb.is-open .lb__frame{transform:none}
.lb__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lb__close{
  position:absolute;top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem);
  width:48px;height:48px;display:grid;place-content:center;color:var(--bone);
  border:1px solid rgba(245,242,235,.3);border-radius:999px;
  transition:background var(--t-mid),color var(--t-mid),transform var(--t-fast);
}
.lb__close svg{width:20px;height:20px}
.lb__close:hover{background:var(--bone);color:var(--ink);transform:rotate(90deg)}

/* ── 19. CUSTOM CURSOR ───────────────────────────────────── */
.cursor{
  position:fixed;top:0;left:0;z-index:var(--z-cur);pointer-events:none;
  width:26px;height:26px;translate:-50% -50%;
  opacity:0;transition:opacity .3s;
  mix-blend-mode:difference;
}
/* A ring, never a filled disc — a solid dot sitting on top of the words being
   read is worse than no custom cursor at all. */
.cursor i{
  display:block;width:100%;height:100%;border-radius:999px;
  border:1px solid rgba(245,242,235,.8);
  transition:transform .3s var(--e-out),border-color .3s;
}
.cursor.is-on{opacity:1}
.cursor.is-hot i{transform:scale(1.7);border-color:rgba(245,242,235,1)}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ── 20. SCROLL ANIMATIONS ───────────────────────────────── */
[data-rise]{
  opacity:0;transform:translateY(30px);
  transition:opacity .8s var(--e-soft),transform .9s var(--e-out);
  transition-delay:var(--d,0s);
}
[data-rise].in-view{opacity:1;transform:none}

[data-split] .ln{display:block;overflow:hidden}
[data-split] .ln > span{
  display:block;
  transform:translateY(105%);
  transition:transform .95s var(--e-out);
  transition-delay:calc(var(--l,0) * .075s);
}
[data-split].in-view .ln > span{transform:none}

[data-clip]{
  clip-path:inset(14% 0 14% 0);
  transition:clip-path 1.25s var(--e-out);
}
[data-clip].in-view{clip-path:inset(0 0 0 0)}

.par{will-change:transform}

/* ── 21. REDUCED MOTION ──────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  [data-rise],[data-split] .ln > span,.menu__nav a,.ftr__wordmark span{opacity:1 !important;transform:none !important}
  [data-clip]{clip-path:none !important}
  .hero__video{opacity:1 !important;transform:none !important}
  .loader{display:none}
  .cursor{display:none}
  .off__snow,.pmast__snow{display:none}
  .hero__scroll i::after{display:none}
}

/* ═══════════════════════════════════════════════════════════
   INTERIOR PAGES
   Shared by every non-home page. Reuses the homepage components
   (.reels, .svc, .cli, .cta, .ftr) and adds only what's new.
   ═══════════════════════════════════════════════════════════ */

/* ── 23. ACTIVE NAV STATE ────────────────────────────────── */
/* [aria-current] unqualified so a sub-page can mark its parent section with
   aria-current="true" and still light up the nav item. */
@media (min-width:1180px){
  .hdr__nav a[aria-current]{color:var(--brand-300)}
  .hdr__nav a[aria-current]::after{transform:scaleX(1);transform-origin:left}
  .hdr.is-stuck .hdr__nav a[aria-current]{color:var(--brand)}
}
.menu__nav a[aria-current]{color:var(--brand-300)}

/* ── 24. PAGE MASTHEAD ───────────────────────────────────── */
.pmast{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(520px,76svh,860px);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:calc(env(safe-area-inset-top) + 8rem) 0 clamp(2.5rem,6vh,4.5rem);
  background:var(--ink);color:var(--bone);
  /* so .idx and other shared chrome resolve against the dark image */
  --fg:var(--bone);--fg-soft:rgba(245,242,235,.66);
  --accent:var(--brand-300);--line:rgba(245,242,235,.18);
}
/* Breadcrumb pinned to the top, title anchored to the bottom — the full
   masthead height separates them so the crumb never reads as a duplicate
   of the eyebrow directly beneath it. */
.pmast--split{justify-content:space-between}
.pmast--split .crumb{margin-bottom:0}
.pmast__foot{margin-top:auto}
.pmast__foot .idx{margin-bottom:clamp(1rem,2.2vw,1.5rem)}
.pmast__media{position:absolute;inset:0;z-index:-1}
.pmast__media .par{position:absolute;inset:-10% 0}
.pmast__media img{width:100%;height:100%;object-fit:cover}
.pmast__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(10,18,14,.78) 0%,rgba(10,18,14,.34) 30%,rgba(10,18,14,.5) 62%,rgba(10,18,14,.93) 100%),
    linear-gradient(90deg,rgba(10,18,14,.62) 0%,rgba(10,18,14,.32) 44%,transparent 76%);
}
.pmast__grain{
  position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;pointer-events:none;
  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");
}

.crumb{margin-bottom:clamp(1.25rem,2.6vw,2rem)}
.crumb ol{
  display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;
  font-size:var(--fs-label);letter-spacing:.19em;text-transform:uppercase;
  color:rgba(245,242,235,.6);
}
.crumb a{
  display:inline-flex;align-items:center;min-height:44px;
  transition:color var(--t-fast);
}
.crumb a:hover{color:var(--brand-300)}
.crumb li:not(:last-child)::after{content:"/";margin-left:.55rem;opacity:.5}
.crumb [aria-current="page"]{color:var(--bone)}

.pmast__h{
  font-size:clamp(2.4rem,6.4vw,6.6rem);font-weight:400;
  letter-spacing:-.042em;line-height:.96;max-width:16ch;
}
.pmast__h em{
  font-family:var(--serif);font-style:italic;font-weight:400;
  letter-spacing:-.015em;padding-right:.06em;
}

/* ── 25. PAGE INTRO (prose block) ────────────────────────── */
.pintro{padding:var(--sec) 0;background:var(--bone)}
/* align-items:start stops the label cell stretching — .idx centres its own
   contents, so a stretched cell would float the label to the middle of the prose. */
.pintro__grid{display:grid;gap:clamp(1.5rem,3vw,3rem);align-items:start}
@media (min-width:1000px){
  .pintro__grid{grid-template-columns:minmax(0,18rem) minmax(0,1fr);gap:clamp(3rem,6vw,7rem)}
  .pintro .idx{padding-top:.55em}   /* optically level with the lead's first line */
}
.pintro__body{display:grid;gap:clamp(1.25rem,2.4vw,1.75rem);max-width:64ch}
/* Only unclassed paragraphs get the default prose rhythm. A bare `p + p`
   selector outranks single-class components like .closer and silently
   restyles them. */
.pintro__body > p:not([class]){font-size:var(--fs-lead);line-height:1.55}
.pintro__body > p:not([class]) + p:not([class]){font-size:var(--fs-body);line-height:1.7;color:var(--fg-soft)}

/* ── 26. SECTORS SERVED ──────────────────────────────────── */
.sect{padding:var(--sec) 0;background:var(--bone-2)}
.sect__head{display:grid;gap:clamp(1.25rem,2.4vw,2rem);padding-bottom:clamp(2.5rem,5vw,4rem)}
@media (min-width:1000px){
  .sect__head{grid-template-columns:1.15fr 1fr;align-items:end;gap:clamp(3rem,6vw,7rem)}
}
.sect__head .h2{max-width:15ch}
.sect__head .idx{margin-bottom:clamp(1rem,2vw,1.5rem)}

.sect__grid{display:grid;gap:clamp(2.25rem,4vw,3.25rem)}
@media (min-width:900px){.sect__grid{grid-template-columns:repeat(3,1fr)}}

.scard__fig{
  position:relative;overflow:hidden;aspect-ratio:4/5;
  margin-bottom:clamp(1.25rem,2.4vw,1.75rem);background:var(--bone-3);
}
.scard__fig img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1s var(--e-out);
}
.scard:hover .scard__fig img{transform:scale(1.05)}
.scard__no{
  display:flex;align-items:center;gap:.7rem;
  font-size:var(--fs-label);font-weight:500;letter-spacing:.19em;
  text-transform:uppercase;color:var(--fg-soft);
  padding-bottom:.85rem;margin-bottom:.85rem;border-bottom:1px solid var(--line);
}
.scard__no i{width:24px;height:1px;background:var(--brand);flex:none}
.scard__t{
  font-size:clamp(1.35rem,2.1vw,1.85rem);letter-spacing:-.03em;
  margin-bottom:.7rem;
}
.scard__d{font-size:.9375rem;line-height:1.65;color:var(--fg-soft);max-width:44ch}

/* ── 27. PROVEN RESULTS ──────────────────────────────────── */
.proof{
  padding:var(--sec) 0;background:var(--ink);color:var(--bone);
  --fg:var(--bone);--fg-soft:rgba(245,242,235,.62);
  --accent:var(--brand-300);--line:rgba(245,242,235,.16);
}
.proof__head{display:grid;gap:clamp(1.25rem,2.4vw,2rem);padding-bottom:clamp(2.5rem,5vw,4rem)}
@media (min-width:1000px){
  .proof__head{grid-template-columns:1.15fr 1fr;align-items:end;gap:clamp(3rem,6vw,7rem)}
}
.proof__head .h2{max-width:14ch}
.proof__head .idx{margin-bottom:clamp(1rem,2vw,1.5rem)}

.proof__grid{display:grid;gap:clamp(1.75rem,3vw,2.5rem)}
@media (min-width:900px){.proof__grid{grid-template-columns:repeat(3,1fr)}}

.pcard{
  position:relative;isolation:isolate;
  border:1px solid var(--line);
  display:flex;flex-direction:column;
  transition:border-color var(--t-mid) var(--e-soft);
}
.pcard::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(245,242,235,.06),rgba(245,242,235,.015));
  opacity:0;transition:opacity .5s var(--e-soft);
}
.pcard:hover{border-color:rgba(245,242,235,.32)}
.pcard:hover::before{opacity:1}

.pcard__fig{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--ink-3)}
.pcard__fig img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1s var(--e-out);filter:saturate(.92);
}
.pcard:hover .pcard__fig img{transform:scale(1.05)}
.pcard__no{
  position:absolute;left:1rem;bottom:.85rem;z-index:1;
  font-size:var(--fs-label);letter-spacing:.2em;
  color:rgba(245,242,235,.85);font-variant-numeric:tabular-nums;
}
.pcard__fig::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(10,18,14,.7));
}

.pcard__dl{padding:clamp(1.25rem,2.4vw,1.75rem)}
.pcard__dl > div{
  display:grid;gap:.3rem;
  padding:.85rem 0;border-top:1px solid var(--line);
}
.pcard__dl > div:first-child{border-top:0;padding-top:0}
.pcard__dl > div:last-child{padding-bottom:0}
@media (min-width:520px) and (max-width:899px){
  .pcard__dl > div{grid-template-columns:9rem minmax(0,1fr);gap:1rem;align-items:baseline}
}
.pcard__dl dt{
  font-size:var(--fs-label);font-weight:500;letter-spacing:.19em;
  text-transform:uppercase;color:var(--fg-soft);
}
.pcard__dl dd{font-size:.9375rem;line-height:1.6}
.pcard__dl > div:last-child dd{color:var(--fg-soft)}

/* ── 28. CONTENT STRIP (image + prose band) ──────────────── */
.strip{padding:var(--sec) 0;background:var(--bone)}
.strip--alt{background:var(--bone-2)}
.strip--winter{
  background:
    radial-gradient(110% 80% at 70% 0%, #16303f 0%, transparent 60%),
    linear-gradient(180deg,var(--slate-2),var(--slate) 70%);
  color:var(--ice);
  --fg:var(--ice);--fg-soft:rgba(233,241,246,.64);
  --accent:var(--frost);--line:rgba(233,241,246,.16);
}
/* Inside a half-width strip column the two-up capability list would be cramped. */
.strip__body .caps__list{grid-template-columns:minmax(0,1fr)}

.strip__grid{display:grid;gap:clamp(2rem,4vw,3rem)}
@media (min-width:1000px){
  .strip__grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:center;gap:clamp(3rem,6vw,6.5rem);
  }
  /* --flip puts the figure first without reordering the DOM, so the prose
     still comes first for screen readers and keyboard order. */
  .strip--flip .strip__fig{order:-1}
}

.strip__fig{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--bone-3)}
@media (min-width:1000px){.strip__fig{aspect-ratio:4/5}}
.strip__fig img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--e-out);
}
.strip:hover .strip__fig img{transform:scale(1.03)}

/* Measure is capped on the prose itself, not the whole column — a body-level
   max-width would squeeze the tracked section label onto two lines. */
.strip__body{display:grid;gap:clamp(1rem,2vw,1.5rem)}
.strip__body .idx{margin-bottom:.35rem}
.strip__body .h2{max-width:16ch}
/* Unclassed paragraphs only: .idx and .caps__note are both <p> in here, and a
   looser selector outranks their single-class rules and restyles them. */
.strip__body > p:not([class]){font-size:var(--fs-lead);line-height:1.55;max-width:52ch}
.strip__body > p:not([class]) + p:not([class]){font-size:var(--fs-body);line-height:1.7;color:var(--fg-soft);max-width:56ch}

/* ── 29. CAPABILITIES ────────────────────────────────────── */
.caps{
  padding:var(--sec) 0;background:var(--ink);color:var(--bone);
  --fg:var(--bone);--fg-soft:rgba(245,242,235,.62);
  --accent:var(--brand-300);--line:rgba(245,242,235,.16);
}
.caps__head{display:grid;gap:clamp(1.25rem,2.4vw,2rem);padding-bottom:clamp(2.5rem,5vw,4rem)}
@media (min-width:1000px){
  .caps__head{grid-template-columns:1.15fr 1fr;align-items:end;gap:clamp(3rem,6vw,7rem)}
}
.caps__head .h2{max-width:15ch}
.caps__head .idx{margin-bottom:clamp(1rem,2vw,1.5rem)}

.caps__grid{display:grid;gap:clamp(2rem,4vw,3rem)}
@media (min-width:1100px){
  .caps__grid{
    grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    align-items:start;gap:clamp(3rem,5vw,5rem);
  }
}
.caps__fig{overflow:hidden;aspect-ratio:16/10;background:var(--ink-3)}
@media (min-width:1100px){
  .caps__fig{aspect-ratio:3/4;position:sticky;top:7rem}
}
.caps__fig img{width:100%;height:100%;object-fit:cover;filter:saturate(.94)}

.caps__intro{font-size:var(--fs-lead);line-height:1.55;margin-bottom:clamp(1.5rem,3vw,2rem)}

.caps__list{display:grid;border-bottom:1px solid var(--line)}
@media (min-width:620px) and (max-width:1099px){
  .caps__list{grid-template-columns:1fr 1fr;column-gap:clamp(1.5rem,4vw,3rem)}
}
.caps__list li{
  display:grid;grid-template-columns:2.4rem minmax(0,1fr);
  gap:.75rem;align-items:baseline;
  padding:.95rem 0;border-top:1px solid var(--line);
}
.caps__list b{
  font-size:var(--fs-label);font-weight:500;letter-spacing:.2em;
  color:var(--accent);font-variant-numeric:tabular-nums;
}
.caps__list span{font-size:1.0625rem;line-height:1.4;letter-spacing:-.01em}

/* ── 30. WINTER MASTHEAD ─────────────────────────────────── */
/* No winter photography exists in the library, so this masthead is built from
   the seasonal palette plus the live snowfall canvas rather than a stand-in
   summer photo. */
.pmast--winter{
  background:
    radial-gradient(120% 90% at 50% -10%, #16303f 0%, transparent 58%),
    linear-gradient(180deg,var(--slate-2),var(--slate) 68%);
  color:var(--ice);
  --fg:var(--ice);--fg-soft:rgba(233,241,246,.66);
  --accent:var(--frost);--line:rgba(233,241,246,.18);
}
.pmast--winter .pmast__scrim{display:none}
.pmast__snow{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  width:100%;height:100%;
}
.pmast__glow{
  position:absolute;left:50%;top:-32%;translate:-50% 0;z-index:0;
  width:min(1200px,150vw);aspect-ratio:1;pointer-events:none;
  background:radial-gradient(circle,rgba(121,173,204,.18),transparent 62%);
}
.pmast--winter > .wrap{position:relative;z-index:1}

/* ── 31. STACCATO STATEMENT ROW ──────────────────────────── */
.staccato{
  display:grid;gap:0;
  margin:clamp(2.5rem,5vw,4rem) 0 clamp(2rem,4vw,3rem);
  border-bottom:1px solid var(--line);
}
@media (min-width:760px){
  .staccato{grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,3rem);border-bottom:0}
}
.staccato li{
  border-top:1px solid var(--line);
  padding:clamp(1rem,2.2vw,1.5rem) 0;
}
@media (min-width:760px){.staccato li{border-bottom:1px solid var(--line)}}
.staccato b{
  display:block;font-size:var(--fs-label);font-weight:500;letter-spacing:.2em;
  color:var(--accent);font-variant-numeric:tabular-nums;
  margin-bottom:clamp(1.25rem,3vw,2.5rem);
}
.staccato span{
  display:block;font-size:clamp(1.5rem,3.2vw,2.6rem);
  letter-spacing:-.035em;line-height:1.05;
}
.staccato em{
  font-family:var(--serif);font-style:italic;
  letter-spacing:-.015em;padding-right:.05em;
}

.closer{
  font-size:clamp(1.25rem,2.4vw,2rem);letter-spacing:-.03em;
  line-height:1.2;max-width:24ch;
}
.closer em{
  font-family:var(--serif);font-style:italic;
  color:var(--accent);letter-spacing:-.015em;
}

/* ── 32. SERVICE AREAS ───────────────────────────────────── */
.areas__intro{
  font-size:var(--fs-lead);line-height:1.55;
  margin-bottom:clamp(1.5rem,3vw,2rem);
}
.areas__list{display:grid;gap:1px}
@media (min-width:520px){.areas__list{grid-template-columns:repeat(2,1fr)}}
@media (min-width:860px){.areas__list{grid-template-columns:repeat(3,1fr)}}
/* Per-item rules, so a partial last row leaves no ghost cell. */
.areas__list li{
  display:grid;grid-template-columns:2.4rem minmax(0,1fr);
  gap:.75rem;align-items:baseline;
  padding:1.05rem 1.1rem 1.05rem .1rem;
  box-shadow:0 0 0 1px var(--line);
  transition:background var(--t-mid) var(--e-soft);
}
.areas__list li:hover{background:var(--bone)}   /* section sits on --bone-2 */
.areas__list b{
  font-size:var(--fs-label);font-weight:500;letter-spacing:.2em;
  color:var(--accent);font-variant-numeric:tabular-nums;
}
.areas__list span{font-size:1.125rem;letter-spacing:-.02em}
.areas__note{
  margin-top:clamp(1.5rem,3vw,2.25rem);
  font-size:.9375rem;line-height:1.65;color:var(--fg-soft);max-width:56ch;
}

/* Fleet list closing note sits under the numbered rows */
.caps__note{
  margin-top:clamp(1.5rem,3vw,2rem);
  font-size:.9375rem;line-height:1.7;color:var(--fg-soft);max-width:56ch;
}

/* ── 33. CORE VALUES ─────────────────────────────────────── */
.values{display:grid;gap:1px;margin-top:clamp(1.25rem,2.4vw,1.75rem)}
@media (min-width:560px){.values{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.values{grid-template-columns:repeat(3,1fr)}}
/* --4 keeps an eight-item list to two complete rows on wide screens */
@media (min-width:1180px){.values--4{grid-template-columns:repeat(4,1fr)}}
.values li{
  display:grid;grid-template-columns:2.6rem minmax(0,1fr);
  gap:.85rem;align-items:baseline;
  padding:clamp(1.15rem,2.2vw,1.6rem) 1.1rem clamp(1.15rem,2.2vw,1.6rem) .1rem;
  box-shadow:0 0 0 1px var(--line);
  transition:background var(--t-mid) var(--e-soft);
}
.values li:hover{background:var(--bone)}
.values b{
  font-size:var(--fs-label);font-weight:500;letter-spacing:.2em;
  color:var(--accent);font-variant-numeric:tabular-nums;
}
.values span{
  font-size:clamp(1.1rem,1.8vw,1.4rem);letter-spacing:-.025em;line-height:1.25;
}

/* ── 34. LEADERSHIP TEAM ─────────────────────────────────── */
.team{display:grid;gap:clamp(1.5rem,3vw,2.5rem)}
@media (min-width:520px){.team{grid-template-columns:repeat(2,1fr)}}
@media (min-width:880px){.team{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1240px){.team{grid-template-columns:repeat(4,1fr)}}

.tcard__fig{
  position:relative;aspect-ratio:3/4;overflow:hidden;
  background:var(--ink);
  display:grid;place-content:center;
  margin-bottom:clamp(.9rem,1.8vw,1.25rem);
}
.tcard__fig img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1s var(--e-out);
}
.tcard:hover .tcard__fig img{transform:scale(1.04)}
/* Monogram stands in until real headshots are supplied — a designed placeholder
   rather than a broken image or a grey box. */
.tcard__mono{
  font-family:var(--serif);font-size:clamp(2.5rem,4vw,3.4rem);
  letter-spacing:-.02em;line-height:1;color:var(--brand-300);
  opacity:.9;user-select:none;
}
.tcard__fig::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 70% at 50% 0%,rgba(99,198,146,.12),transparent 65%);
}
.tcard__name{
  font-size:clamp(1.05rem,1.5vw,1.25rem);letter-spacing:-.02em;
  margin-bottom:.3rem;
}
.tcard__role{
  font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-soft);line-height:1.5;
}

/* ── 35. TRUST BAND ──────────────────────────────────────── */
.trust{
  padding:var(--sec) 0;background:var(--ink);color:var(--bone);
  --fg:var(--bone);--fg-soft:rgba(245,242,235,.66);
  --accent:var(--brand-300);--line:rgba(245,242,235,.16);
}
.trust__grid{display:grid;gap:clamp(1.75rem,3.5vw,3rem)}
@media (min-width:1000px){
  .trust__grid{grid-template-columns:1.05fr 1fr;align-items:start;gap:clamp(3rem,6vw,7rem)}
}
.trust__head .idx{margin-bottom:clamp(1.25rem,2.4vw,2rem)}
.trust__head .h2{max-width:13ch}
.trust__body{display:grid;gap:clamp(1rem,2vw,1.5rem)}
.trust__body > p:not([class]){font-size:var(--fs-lead);line-height:1.55;max-width:56ch}
.trust__body > p:not([class]) + p:not([class]){
  font-size:var(--fs-body);line-height:1.7;color:var(--fg-soft);
}

/* Credential marks sit on a light plaque inside the dark band. Third-party
   certification logos have fixed colours and one of them is a solid black
   lockup, so forcing them all to white would destroy it — a light surface
   renders every mark correctly. */
.trust__creds{
  margin-top:clamp(2.5rem,5vw,4rem);
  background:var(--bone);
  padding:clamp(1.5rem,3vw,2.25rem) clamp(1.25rem,3vw,2.5rem);
}
.trust__creds ul{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(1.75rem,4.5vw,4rem);
}
.trust__creds li{flex:0 0 auto}
/* Certifications are credibility markers, so they sit at higher legibility than
   the client logo row — greyscale for palette discipline, but not faint. */
.trust__creds img{
  width:auto;height:calc(clamp(36px,4vw,54px) * var(--k,1));object-fit:contain;
  filter:grayscale(1);opacity:.82;
  transition:filter .5s var(--e-soft),opacity .5s var(--e-soft),transform .5s var(--e-out);
}
/* optical balance — square and oval marks read larger at the same height */
.trust__creds li:nth-child(3) img{--k:.92}
.trust__creds li:nth-child(6) img{--k:.9}
/* Carbon-footprint mark is a solid fill with knocked-out white type; greyscaled
   it loses contrast against the light plaque, so darken it back. */
.trust__creds li:nth-child(4) img{--k:.88;filter:grayscale(1) brightness(.86) contrast(1.12)}
.trust__creds li:nth-child(4):hover img{filter:none}
.trust__creds li:hover img{filter:none;opacity:1;transform:translateY(-2px)}

/* ── 36. CONTACT DETAILS ─────────────────────────────────── */
.cinfo{
  padding:var(--sec) 0;background:var(--ink);color:var(--bone);
  --fg:var(--bone);--fg-soft:rgba(245,242,235,.62);
  --accent:var(--brand-300);--line:rgba(245,242,235,.16);
}
.cinfo__grid{display:grid;gap:1px;margin-top:clamp(1.5rem,3vw,2.5rem)}
@media (min-width:620px){.cinfo__grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.cinfo__grid{grid-template-columns:repeat(4,1fr)}}
.cinfo__grid > li{
  padding:clamp(1.5rem,2.6vw,2rem) clamp(1.25rem,2vw,1.75rem) clamp(1.5rem,2.6vw,2rem) 0;
  box-shadow:0 0 0 1px var(--line);
  display:grid;align-content:start;gap:.8rem;
}
.cinfo__k{
  font-size:var(--fs-label);font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--fg-soft);
}
.cinfo__v{font-size:1.0625rem;line-height:1.55;font-style:normal}
.cinfo__v a{
  display:inline-flex;align-items:center;min-height:44px;
  border-bottom:1px solid var(--line);
  transition:color var(--t-mid),border-color var(--t-mid);
}
.cinfo__v a:hover{color:var(--accent);border-color:var(--accent)}
.cinfo__v--big a{
  font-family:var(--serif);font-size:clamp(1.5rem,2.4vw,2rem);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;border-bottom:0;
}
.cinfo__social{
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;
  margin-top:clamp(2rem,4vw,3rem);padding-top:clamp(1.5rem,3vw,2rem);
  border-top:1px solid var(--line);
}
.cinfo__social .idx{flex:none}

/* ── 37. QUOTE FORM ──────────────────────────────────────── */
.qform{padding:var(--sec) 0;background:var(--bone)}
.qform__grid{display:grid;gap:clamp(1.5rem,3vw,2.5rem)}
@media (min-width:1000px){
  .qform__grid{grid-template-columns:minmax(0,20rem) minmax(0,1fr);gap:clamp(3rem,6vw,7rem);align-items:start}
}

.form{display:grid;gap:clamp(1.25rem,2.4vw,1.75rem)}
@media (min-width:700px){.form{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:.45rem;min-width:0}
.field--full{grid-column:1/-1}

.field label{
  font-size:var(--fs-label);font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg-soft);
}
.field label .req{color:var(--accent);margin-left:.15em}

.field input,.field select,.field textarea{
  width:100%;min-height:52px;padding:.85rem 0;
  font:inherit;font-size:1rem;line-height:1.4;color:var(--fg);
  background:transparent;border:0;border-bottom:1px solid var(--line);
  border-radius:0;                      /* iOS rounds inputs by default */
  transition:border-color var(--t-mid),background var(--t-mid);
}
.field textarea{min-height:150px;padding-top:1rem;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-soft);opacity:.75}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-bottom-color:var(--accent);
}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;
}
.field select{
  appearance:none;-webkit-appearance:none;padding-right:2rem;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E6B62' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .25rem center;background-size:18px;
}

.field__err{
  font-size:.8125rem;line-height:1.4;color:var(--danger);
  min-height:1.15em;                    /* reserve space so errors never shift layout */
}
.field.is-err input,.field.is-err select,.field.is-err textarea{border-bottom-color:var(--danger)}

.form__foot{
  grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem;
  margin-top:clamp(.5rem,1.5vw,1rem);
}
.form__note{font-size:.8125rem;color:var(--fg-soft);max-width:44ch}
.btn[aria-busy="true"]{pointer-events:none;opacity:.7}

.form__status{
  grid-column:1/-1;font-size:.9375rem;line-height:1.6;color:var(--danger);
}
.form__done{
  display:grid;gap:.9rem;justify-items:start;
  padding:clamp(1.75rem,3.5vw,2.5rem);
  border:1px solid var(--line);border-left:3px solid var(--brand);
  background:var(--bone-2);
}
.form__done h3{font-size:var(--fs-h3);letter-spacing:-.03em}
.form__done p{font-size:1rem;line-height:1.6;color:var(--fg-soft);max-width:52ch}

/* ── 38. PRINT ───────────────────────────────────────────── */
@media print{
  .hdr,.menu,.loader,.cursor,.lb,.reels__nav,.off__snow{display:none !important}
  body{background:#fff;color:#000}
  [data-rise],[data-split] .ln > span{opacity:1 !important;transform:none !important}
  .pmast{min-height:auto;color:#000;background:none;padding:0}
  .pmast__media,.pmast__scrim,.pmast__grain{display:none}
  .proof,.caps{background:#fff;color:#000}
  .caps__fig{position:static}
  .pmast--winter{background:none;color:#000}
  .pmast__snow,.pmast__glow{display:none}
  .trust{background:#fff;color:#000}
  .tcard__fig{background:#eee}
}