/* ==========================================================================
   TreeCare Crane Hire — design system
   Precision Lift, warmed with Field Proven.
   ========================================================================== */

/* ---------- fonts ---------- */
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/BarlowCondensed-600.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/BarlowCondensed-700.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/Barlow-400.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/Barlow-500.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/Barlow-600.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/Barlow-700.woff2') format('woff2')}

/* ---------- tokens ---------- */
:root{
  --graphite:#17191C;
  --iron:#22252A;
  --iron-2:#2C3036;
  --stone:#F4F2EC;
  --paper:#FFFFFF;
  --steel:#8A9096;
  --steel-dark:#5C6268;
  --ink:#3E4348;
  --hivis:#B8D433;
  --hivis-deep:#5F7012;   /* AA (4.9:1) on warm stone, 5.5:1 on white */
  --hivis-mid:#9DB824;
  --line-light:#D8D5CC;
  --line-dark:#33373D;
  --error:#B03A25;

  --w-max:1400px;
  --pad-x:clamp(20px, 5vw, 64px);
  --sec-y:clamp(56px, 8vw, 108px);
  --head:'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body:'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease:cubic-bezier(.4,.01,.2,1);
  --mobile-bar:0px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--body);font-size:17px;line-height:1.6;color:var(--ink);background:var(--stone);-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%;height:auto}
h1,h2,h3,h4{font-family:var(--head);text-transform:uppercase;line-height:.98;margin:0;letter-spacing:.005em;color:var(--graphite)}
p{margin:0 0 1em}
a{color:inherit}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;cursor:pointer}

/* ---------- a11y ---------- */
:focus-visible{outline:2px solid var(--hivis-deep);outline-offset:3px}
.on-dark :focus-visible,.hero :focus-visible,.site-header :focus-visible,.section--dark :focus-visible,.site-footer :focus-visible,.mobile-nav :focus-visible,.call-panel :focus-visible,.action-bar :focus-visible{outline-color:var(--hivis)}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--hivis);color:var(--graphite);padding:12px 20px;font-family:var(--head);font-weight:700;letter-spacing:.08em}
.skip-link:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- layout ---------- */
.wrap{max-width:var(--w-max);margin:0 auto;padding-inline:var(--pad-x)}
.section{padding-block:var(--sec-y)}
.section--dark{background:var(--graphite);color:#E4E2DB}
.section--iron{background:var(--iron);color:#E4E2DB}
.section--stone{background:var(--stone)}
.section--paper{background:var(--paper)}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4,
.section--iron h1,.section--iron h2,.section--iron h3,.section--iron h4{color:#fff}

/* ---------- type ---------- */
.eyebrow{font-family:var(--head);font-weight:600;font-size:clamp(12px,1.1vw,14px);letter-spacing:.22em;text-transform:uppercase;color:var(--hivis-deep);margin:0 0 14px}
.section--dark .eyebrow,.section--iron .eyebrow,.hero .eyebrow{color:var(--hivis)}
h1,.h1{font-weight:700;font-size:clamp(38px,6.4vw,76px)}
h2,.h2{font-weight:700;font-size:clamp(30px,4.4vw,52px)}
h3,.h3{font-weight:700;font-size:clamp(20px,2.2vw,26px)}
.lede{font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--steel-dark);max-width:62ch}
.section--dark .lede,.section--iron .lede{color:#B7BCC1}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 32px;margin-bottom:clamp(28px,4vw,48px)}
.sec-head .lede{margin:0;flex:1 1 320px}
.measure{max-width:66ch}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--head);font-weight:700;font-size:17px;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;padding:16px 30px;border:2px solid transparent;border-radius:2px;transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
.btn--primary{background:var(--hivis);color:var(--graphite);border-color:var(--hivis)}
.btn--primary:hover{background:#C6E23A;border-color:#C6E23A}
.btn--ghost{border-color:rgba(255,255,255,.7);color:#fff}
.btn--ghost:hover{background:#fff;color:var(--graphite);border-color:#fff}
.btn--dark{border-color:var(--graphite);color:var(--graphite)}
.btn--dark:hover{background:var(--graphite);color:#fff}
.btn--sm{padding:11px 20px;font-size:15px}
.btn:active{transform:translateY(1px)}

/* text link with mechanical underline */
.tlink{display:inline-flex;align-items:center;gap:9px;font-family:var(--head);font-weight:700;font-size:16px;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;color:var(--graphite);padding-bottom:4px;border-bottom:2px solid var(--hivis-mid);transition:gap .2s var(--ease),border-color .2s var(--ease)}
.tlink:hover{gap:15px;border-color:var(--graphite)}
.section--dark .tlink,.section--iron .tlink{color:var(--hivis);border-color:rgba(184,212,51,.45)}
.section--dark .tlink:hover,.section--iron .tlink:hover{border-color:var(--hivis)}

/* measurement-tick rule */
.ticks{height:8px;background-image:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 14px);opacity:.35}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{position:fixed;inset:0 0 auto;z-index:100;transition:background-color .3s var(--ease),box-shadow .3s var(--ease)}
.site-header::before{content:'';position:absolute;inset:0 0 auto;height:180%;background:linear-gradient(rgba(14,16,18,.94) 0%,rgba(14,16,18,.66) 52%,rgba(14,16,18,0) 100%);pointer-events:none;transition:opacity .3s var(--ease)}
.site-header--solid::before{opacity:0}
.site-header__inner{position:relative}
.site-header__inner{max-width:var(--w-max);margin:0 auto;padding:0 var(--pad-x);display:flex;align-items:center;gap:clamp(16px,2.4vw,36px);height:88px;transition:height .3s var(--ease)}
.site-header--solid{background:rgba(14,16,18,.97);box-shadow:0 1px 0 rgba(255,255,255,.07)}
.site-header--solid .site-header__inner{height:70px}
.brand{display:flex;align-items:center;flex:0 0 auto;text-decoration:none}
.brand img{transition:width .3s var(--ease)}
.nav{display:flex;align-items:center;gap:clamp(14px,1.9vw,30px);margin-left:auto}
.nav a:not(.btn){font-size:16px;font-weight:500;color:#DAD8D1;text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;transition:color .2s var(--ease),border-color .2s var(--ease);white-space:nowrap}
.nav a:not(.btn):hover{color:#fff;border-color:var(--hivis)}
.nav a:not(.btn)[aria-current="page"]{color:var(--hivis);border-color:var(--hivis)}
.header-phone{font-family:var(--head);font-weight:700;font-size:20px;letter-spacing:.04em;color:#fff;text-decoration:none;white-space:nowrap;transition:color .2s var(--ease)}
.header-phone:hover{color:var(--hivis)}
.header-cta{white-space:nowrap}
.nav-toggle{display:none;background:none;border:0;padding:10px;color:#fff}
.nav-toggle svg{display:block}

/* mobile nav panel */
.mobile-nav{position:fixed;inset:0;z-index:150;background:#0E1012;display:flex;flex-direction:column;padding:22px var(--pad-x) 40px;opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility .25s}
.mobile-nav[data-open="true"]{opacity:1;visibility:visible}
.mobile-nav__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:36px}
.mobile-nav__top img{}
.mobile-nav a.m-link{font-family:var(--head);font-weight:700;font-size:34px;text-transform:uppercase;color:#fff;text-decoration:none;padding:15px 0;border-bottom:1px solid var(--line-dark);display:flex;justify-content:space-between;align-items:center}
.mobile-nav a.m-link span{font-family:var(--body);font-size:13px;font-weight:500;color:var(--steel);text-transform:none;letter-spacing:0}
.mobile-nav__foot{margin-top:auto;padding-top:28px;display:grid;gap:12px}

/* mobile fixed action bar */
.action-bar{position:fixed;left:0;right:0;bottom:0;z-index:120;display:none;box-shadow:0 -2px 14px rgba(0,0,0,.28)}
.action-bar a{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;font-family:var(--head);font-weight:700;font-size:16px;letter-spacing:.07em;text-transform:uppercase;text-decoration:none;padding:16px 8px;min-height:56px}
.action-bar .ab-call{background:var(--hivis);color:var(--graphite)}
.action-bar .ab-quote{background:var(--graphite);color:#fff;border-top:1px solid var(--line-dark)}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;min-height:min(94vh,880px);display:flex;align-items:flex-end;background:var(--graphite);overflow:hidden;color:#fff}
.hero--short{min-height:min(62vh,560px)}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease)}
.hero__slide[data-active="true"]{opacity:1}
.hero__slide img,.hero__slide video{width:100%;height:100%;object-fit:cover}
.hero__scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(100deg,rgba(14,16,18,.93) 0%,rgba(14,16,18,.62) 42%,rgba(14,16,18,.15) 100%),
  linear-gradient(to top,rgba(14,16,18,.92) 0%,rgba(14,16,18,0) 46%)}
.hero__body{position:relative;z-index:2;width:100%;max-width:var(--w-max);margin:0 auto;padding:150px var(--pad-x) clamp(30px,5vw,52px)}
.hero h1{color:#fff;max-width:20ch;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--hivis)}
.hero__sub{font-size:clamp(16px,1.55vw,20px);line-height:1.5;color:#D6D4CC;max-width:56ch;margin:20px 0 0}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:clamp(28px,4vw,44px);padding-top:20px;border-top:1px solid rgba(255,255,255,.16)}
.hero__caption{font-size:14px;color:#BFC3C7;flex:1 1 240px;min-width:0}

/* ==========================================================================
   TRUST STRIP
   ========================================================================== */
.trust{background:#0E1012;border-top:1px solid var(--line-dark)}
.trust ul{max-width:var(--w-max);margin:0 auto;padding:0 var(--pad-x);display:grid;grid-template-columns:repeat(5,1fr)}
.trust li{padding:22px 12px;text-align:center;border-left:1px solid var(--line-dark)}
.trust li:first-child{border-left:0}
.trust b{display:block;font-family:var(--head);font-weight:700;font-size:clamp(15px,1.4vw,19px);letter-spacing:.05em;color:#fff;text-transform:uppercase}
.trust li:last-child b{color:var(--hivis)}
.trust span{font-size:13px;color:var(--steel)}

/* ==========================================================================
   CARDS / GRIDS
   ========================================================================== */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,44px);align-items:center}

.lift-card{background:var(--paper);display:flex;flex-direction:column;border-radius:2px;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.lift-card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(23,25,28,.14)}
.lift-card__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--iron)}
.lift-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.lift-card:hover .lift-card__media img{transform:scale(1.04)}
.lift-card__tag{position:absolute;left:0;bottom:0;background:var(--hivis);color:var(--graphite);font-family:var(--head);font-weight:700;font-size:15px;letter-spacing:.07em;text-transform:uppercase;padding:8px 16px}
.lift-card__body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.lift-card__body p{font-size:15.5px;line-height:1.55;color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:4px 0 20px}
.chip{font-size:13px;color:var(--steel-dark);border:1px solid var(--line-light);padding:4px 11px;border-radius:2px}
.lift-card .tlink{margin-top:auto;align-self:flex-start}

/* project card */
.proj-card{position:relative;display:block;text-decoration:none;overflow:hidden;background:var(--iron);border-radius:2px}
.proj-card img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform .5s var(--ease)}
.proj-card:hover img{transform:scale(1.045)}
.proj-card__cap{position:absolute;inset:auto 0 0 0;padding:56px 20px 18px;background:linear-gradient(transparent,rgba(14,16,18,.9) 62%);color:#fff}
.proj-card__cap b{display:block;font-family:var(--head);font-weight:700;font-size:20px;text-transform:uppercase;letter-spacing:.02em}
.proj-card__cap span{font-size:13.5px;color:#C3C7CB}
.proj-kind{position:absolute;top:14px;left:14px;background:rgba(14,16,18,.82);color:var(--hivis);border:1px solid var(--hivis);font-family:var(--head);font-weight:700;font-size:12px;letter-spacing:.13em;text-transform:uppercase;padding:5px 11px}

/* story card (challenge / lift / result) */
.story{background:var(--paper);border-radius:2px;overflow:hidden;display:flex;flex-direction:column}
.story img{aspect-ratio:3/2;object-fit:cover;width:100%}
.story__body{padding:22px 24px 26px}
.story__body h3{margin-bottom:14px}
.story dl{margin:0;display:grid;gap:9px}
.story dt{font-family:var(--head);font-weight:700;font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:var(--hivis-deep)}
.story dd{margin:0 0 2px;font-size:15px;line-height:1.5;color:var(--ink)}

/* ==========================================================================
   SPEC BLOCKS
   ========================================================================== */
.spec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:clamp(14px,1.8vw,22px)}
.spec{background:var(--iron);padding:22px 20px;border-left:2px solid var(--hivis);border-radius:2px}
.js .spec{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .spec.is-in{opacity:1;transform:none}
.spec__v{font-family:var(--head);font-weight:700;font-size:clamp(38px,4.6vw,58px);line-height:.88;color:#fff;display:flex;align-items:baseline;gap:8px}
.spec__v i{font-style:normal;font-size:.4em;color:var(--hivis);letter-spacing:.04em}
.spec__l{font-size:14px;color:#9BA1A7;margin-top:9px;display:block}
.section--stone .spec,.section--paper .spec{background:var(--paper);border-left-color:var(--hivis-mid)}
.section--stone .spec__v,.section--paper .spec__v{color:var(--graphite)}
.section--stone .spec__v i,.section--paper .spec__v i{color:var(--hivis-deep)}
.section--stone .spec__l,.section--paper .spec__l{color:var(--steel-dark)}

/* annotated machine */
.machine{position:relative;border-radius:2px;overflow:hidden;background:#0E1012}
.machine>img{width:100%;display:block}
.annot{position:absolute;background:rgba(14,16,18,.88);border-left:3px solid var(--hivis);padding:9px 14px;max-width:250px;backdrop-filter:blur(2px)}
.annot b{display:block;font-family:var(--head);font-weight:700;font-size:15px;color:#fff;text-transform:uppercase;letter-spacing:.03em}
.annot span{font-size:12.5px;color:#9BA1A7;line-height:1.4;display:block;margin-top:2px}
.annot--tl{top:5%;left:4%}
.annot--tr{top:16%;right:4%}
.annot--bl{bottom:16%;left:4%}
.annot--br{bottom:6%;right:4%}
@media (max-width:820px){.annot{position:static;max-width:none;margin-top:8px;background:var(--iron);backdrop-filter:none}
  .machine{background:transparent}}

/* full-bleed media moment */
.media-moment{position:relative;background:var(--graphite);overflow:hidden}
.media-moment img{width:100%;height:clamp(300px,52vw,600px);object-fit:cover}
.media-moment__overlay{position:absolute;inset:0;pointer-events:none}
.media-moment__cap{position:absolute;left:0;right:0;bottom:0;padding:80px var(--pad-x) 26px;background:linear-gradient(transparent,rgba(14,16,18,.88))}
.media-moment__cap .inner{max-width:var(--w-max);margin:0 auto}
.media-moment__cap b{font-family:var(--head);font-weight:700;font-size:clamp(20px,2.6vw,30px);color:#fff;text-transform:uppercase;display:block}
.media-moment__cap span{color:#BFC3C7;font-size:14.5px}

/* ==========================================================================
   PROCESS
   ========================================================================== */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.step{position:relative;padding-top:26px;border-top:2px solid var(--graphite)}
.step__n{position:absolute;top:-14px;left:0;background:var(--stone);padding-right:12px;font-family:var(--head);font-weight:700;font-size:15px;letter-spacing:.16em;color:var(--hivis-deep)}
.step h3{margin-bottom:10px}
.step p,.step li{font-size:15.5px;color:var(--ink)}
.step ul{margin-top:8px;display:grid;gap:4px}
.step li{position:relative;padding-left:16px}
.step li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--hivis-deep)}

/* ==========================================================================
   GALLERY / IN ACTION
   ========================================================================== */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,29vw);gap:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding-bottom:14px;scrollbar-width:thin;scrollbar-color:var(--iron-2) transparent}
.rail::-webkit-scrollbar{height:7px}
.rail::-webkit-scrollbar-thumb{background:var(--iron-2)}
.rail>*{scroll-snap-align:start}
.tile{position:relative;overflow:hidden;background:var(--iron);border-radius:2px;border:0;padding:0;width:100%;text-align:left;display:block}
.tile img{width:100%;height:clamp(200px,24vw,290px);object-fit:cover;transition:transform .5s var(--ease)}
.tile:hover img{transform:scale(1.04)}
.tile__cap{position:absolute;inset:auto 0 0 0;padding:44px 16px 14px;background:linear-gradient(transparent,rgba(14,16,18,.9));color:#fff;font-size:13.5px}
.tile__play{position:absolute;top:14px;left:14px;display:flex;align-items:center;gap:8px;background:rgba(14,16,18,.82);border:1px solid var(--hivis);color:var(--hivis);font-family:var(--head);font-weight:700;font-size:12.5px;letter-spacing:.1em;padding:5px 11px}
.tile__play svg{flex:0 0 auto}

/* masonry-ish project grid */
.proj-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px)}
.proj-grid .span-2{grid-column:span 2}
.proj-grid .tall img{aspect-ratio:3/4}
@media (max-width:900px){.proj-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.proj-grid{grid-template-columns:1fr}.proj-grid .span-2{grid-column:auto}}

/* filters */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(24px,3vw,36px)}
.filters button{font-family:var(--head);font-weight:700;font-size:14.5px;letter-spacing:.08em;text-transform:uppercase;padding:9px 18px;background:transparent;border:1.5px solid var(--line-light);color:var(--ink);border-radius:2px;transition:all .2s var(--ease)}
.filters button:hover{border-color:var(--graphite)}
.filters button[aria-pressed="true"]{background:var(--graphite);border-color:var(--graphite);color:#fff}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(9,10,12,.95);display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,56px);opacity:0;visibility:hidden;transition:opacity .22s var(--ease),visibility .22s}
.lightbox[data-open="true"]{opacity:1;visibility:visible}
.lightbox figure{margin:0;max-width:min(1200px,100%);max-height:100%;display:flex;flex-direction:column;gap:14px}
.lightbox img,.lightbox video{max-height:78vh;width:auto;max-width:100%;object-fit:contain;margin:0 auto}
.lightbox figcaption{color:#D6D4CC;font-size:14.5px;text-align:center}
.lightbox__close{position:absolute;top:18px;right:18px;background:transparent;border:1.5px solid rgba(255,255,255,.45);color:#fff;width:46px;height:46px;border-radius:2px;font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center}
.lightbox__close:hover{border-color:var(--hivis);color:var(--hivis)}
.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);background:transparent;border:1.5px solid rgba(255,255,255,.35);color:#fff;width:46px;height:64px;font-size:20px;display:flex;align-items:center;justify-content:center}
.lightbox__nav:hover{border-color:var(--hivis);color:var(--hivis)}
.lightbox__nav--prev{left:12px}
.lightbox__nav--next{right:12px}

/* ==========================================================================
   FORM
   ========================================================================== */
.quote-layout{display:grid;grid-template-columns:1.35fr .8fr;gap:clamp(24px,3.4vw,52px);align-items:start}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font-family:var(--head);font-weight:700;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--graphite)}
.field .req{color:var(--hivis-deep)}
.field input,.field select,.field textarea{font-family:var(--body);font-size:16px;color:var(--graphite);background:var(--paper);border:1.5px solid var(--line-light);border-radius:2px;padding:14px 16px;width:100%;transition:border-color .2s var(--ease)}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--hivis-mid);outline-offset:1px}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:var(--error)}
.field .err{font-size:13.5px;color:var(--error);min-height:0}
.field .hint{font-size:13.5px;color:var(--steel-dark)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.radio-row{display:flex;flex-wrap:wrap;gap:9px}
.radio-row label{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line-light);background:var(--paper);padding:9px 16px;border-radius:2px;font-family:var(--body);font-size:15px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink);cursor:pointer;transition:border-color .2s var(--ease)}
.radio-row input{accent-color:var(--hivis-deep);width:18px;height:18px;margin:0;flex:0 0 auto}
.radio-row label:has(input:checked){border-color:var(--graphite);background:var(--graphite);color:#fff}
.dropzone{position:relative;border:2px dashed var(--hivis-mid);background:rgba(184,212,51,.09);border-radius:2px;padding:26px 20px;text-align:center;transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.dropzone.is-over{background:rgba(184,212,51,.2);border-color:var(--hivis-deep)}
.dropzone b{font-family:var(--head);font-weight:700;font-size:19px;text-transform:uppercase;color:var(--graphite);display:block;letter-spacing:.03em}
.dropzone span{font-size:14px;color:var(--steel-dark)}
.dropzone input[type=file]{position:absolute;left:0;top:0;width:1px;height:1px;padding:0;border:0;opacity:0;overflow:hidden}
.dropzone:focus-within{outline:2px solid var(--hivis-deep);outline-offset:3px}
.dz-label{cursor:pointer;display:block}
.thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.thumbs li{position:relative;width:82px}
.thumbs img{width:82px;height:82px;object-fit:cover;border-radius:2px}
.thumbs button{position:absolute;top:-7px;right:-7px;width:23px;height:23px;border-radius:50%;background:var(--graphite);color:#fff;border:0;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center}
.form-note{font-size:13.5px;color:var(--steel-dark);margin-top:14px}
.form-status{padding:16px 20px;border-radius:2px;font-size:15.5px;margin-bottom:18px}
.form-status[data-kind="error"]{background:#FBE9E6;border-left:3px solid var(--error);color:#8C2E1D}
.form-status[data-kind="success"]{background:#EDF4D9;border-left:3px solid var(--hivis-deep);color:#3F4A12}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* call panel */
.call-panel{background:var(--graphite);color:#fff;padding:clamp(26px,3vw,36px);border-radius:2px}
.call-panel .eyebrow{color:var(--hivis)}
.call-panel .num{font-family:var(--head);font-weight:700;font-size:clamp(30px,3.4vw,42px);color:var(--hivis);text-decoration:none;display:block;line-height:1;margin:6px 0 14px;letter-spacing:.01em}
.call-panel p{color:#B7BCC1;font-size:15px;margin-bottom:20px}
.info-block{background:var(--paper);padding:clamp(20px,2.4vw,28px);border-radius:2px;margin-top:16px}
.info-block h3{font-size:19px;margin-bottom:10px}
.info-block p,.info-block li{font-size:15px;color:var(--ink)}
.info-block li{padding-left:15px;position:relative}
.info-block li::before{content:'';position:absolute;left:0;top:.66em;width:6px;height:1px;background:var(--hivis-deep)}
.info-block a{color:var(--graphite)}

/* ==========================================================================
   ANCHOR NAV / ALTERNATING BLOCKS
   ========================================================================== */
/* Scroll offset so a linked section heading lands clearly below the sticky
   header + anchor bar rather than behind them. */
:root{--sticky-offset:126px}
@media (max-width:820px){:root{--sticky-offset:112px}}
[id]{scroll-margin-top:var(--sticky-offset)}
.altblock[id]{scroll-margin-top:var(--sticky-offset)}
.anchor-nav{background:var(--iron);border-top:1px solid var(--line-dark);position:sticky;top:70px;z-index:60}
.anchor-nav ul{max-width:var(--w-max);margin:0 auto;padding:0 var(--pad-x);display:flex;gap:6px;overflow-x:auto}
.anchor-nav a{display:block;padding:15px 18px;font-family:var(--head);font-weight:700;font-size:14.5px;letter-spacing:.09em;text-transform:uppercase;color:#C6C9CD;text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap}
.anchor-nav a:hover{color:#fff;border-color:var(--hivis)}
.anchor-nav a[aria-current="true"]{color:var(--hivis);border-color:var(--hivis)}

.altblock{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:0}
.altblock>.altblock__media{position:relative;min-height:320px}
.altblock>.altblock__media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.altblock__copy{padding:clamp(30px,4.4vw,68px)}
.altblock:nth-of-type(even) .altblock__media{order:2}
.altblock--stone{background:var(--stone)}
/* Each linked service reads as a complete, self-contained panel. On desktop the
   image and copy are vertically centred in the space below the sticky header, so
   a link never lands the visitor between two blocks. */
.service-panel{scroll-margin-top:var(--sticky-offset)}
.service-panel:focus{outline:none}
.service-panel:focus-visible{outline:2px solid var(--hivis-deep);outline-offset:-4px}
@media (min-width:861px){
  .altblock.service-panel{min-height:calc(100vh - var(--sticky-offset));align-items:stretch}
  .altblock.service-panel > .altblock__media{min-height:100%}
  .altblock.service-panel .altblock__copy{display:flex;flex-direction:column;justify-content:center;padding-block:clamp(40px,6vh,80px)}
}
@media (max-width:860px){
  /* Heading first, directly under the sticky header, so the selected service is
     unmistakable. The image follows immediately, keeping the two connected.
     No forced full-screen height — that would only create dead space. */
  .altblock.service-panel{min-height:0}
  .altblock.service-panel .altblock__copy{order:-1;padding-top:clamp(20px,4vw,30px);padding-bottom:clamp(20px,4vw,28px)}
  .altblock.service-panel > .altblock__media{order:0;min-height:220px}
  .altblock.service-panel:nth-of-type(even) > .altblock__media{order:0}
}
.altblock--paper{background:var(--paper)}
@media (max-width:860px){.altblock{grid-template-columns:1fr}.altblock:nth-of-type(even) .altblock__media{order:0}.altblock>.altblock__media{min-height:240px}}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{background:var(--graphite);color:#9BA1A7;padding:clamp(40px,5vw,62px) 0 0}
.site-footer .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:clamp(24px,4vw,56px)}
.site-footer img.logo{}
.site-footer .foot-h{font-family:var(--head);font-weight:700;line-height:.98;text-transform:uppercase;color:#fff;font-size:16px;letter-spacing:.13em;margin-bottom:14px}
.site-footer a{color:#C6C9CD;text-decoration:none;font-size:15.5px}
.site-footer a:hover{color:var(--hivis)}
.site-footer li{margin-bottom:9px}
.site-footer .contact-line{font-family:var(--head);font-weight:700;font-size:24px;color:#fff;display:block;margin-bottom:4px;letter-spacing:.02em}
.site-footer .contact-line:hover{color:var(--hivis)}
.footer-bar{margin-top:clamp(32px,4vw,48px);border-top:1px solid var(--line-dark);padding:20px 0}
.footer-bar .wrap{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;align-items:center}
.footer-bar p{margin:0;font-size:13.5px}
.trust-line{font-size:13.5px;color:var(--steel)}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .nav a:not(.header-cta){display:none}
  .site-header__inner{height:74px}
}
@media (max-width:960px){
  .grid-3{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .quote-layout{grid-template-columns:1fr}
  .trust ul{grid-template-columns:repeat(3,1fr)}
  .trust li:nth-child(4){border-left:0}
  .site-footer .wrap{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  :root{--mobile-bar:60px}
  body{padding-bottom:var(--mobile-bar)}
  .nav{display:none}
  .nav-toggle{display:block;margin-left:auto}
  .header-phone{display:none}
  .action-bar{display:flex}
  .anchor-nav{top:62px}
  .site-header__inner{height:62px}
  .site-header--solid .site-header__inner{height:58px}
  .hero{min-height:auto}
  .hero__body{padding-top:110px}
  .grid-2{grid-template-columns:1fr}
  .lightbox{padding-bottom:calc(var(--mobile-bar) + 16px)}
}
@media (max-width:640px){
  body{font-size:16px}
  .grid-3{grid-template-columns:1fr}
  .trust ul{grid-template-columns:1fr 1fr}
  .trust li{border-left:0;border-top:1px solid var(--line-dark);text-align:left;padding:14px 4px}
  .trust li:nth-child(-n+2){border-top:0}
  .field-row{grid-template-columns:1fr}
  .hero__actions .btn{width:100%}
  .rail{grid-auto-columns:minmax(230px,78vw)}
  .lightbox__nav{width:40px;height:52px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .hero__slide{transition:none}
}
/* ---------- print ---------- */
@media print{
  .site-header,.action-bar,.mobile-nav,.hero__media,.lightbox{display:none!important}
  body{background:#fff;color:#000;padding:0}
}

/* ---------- logo: locked to its native 350x185 in every context ----------
   Width is the driver and height follows from aspect-ratio. Sizing by height
   instead lets a narrow column squeeze the box (max-width) while the height
   stays put, which distorts it — that showed up in the footer at 320px. */
.brand img,
.mobile-nav__top img,
.site-footer img.logo{
  height:auto;
  max-width:100%;
  aspect-ratio:350 / 185;
  object-fit:contain;
  object-position:left center;
  flex:0 0 auto;
  align-self:center;
}
.brand img{width:102px}
.site-header--solid .brand img{width:83px}
.mobile-nav__top img{width:76px}
.site-footer img.logo{width:98px;display:block;margin:0 0 18px}
@media (max-width:820px){ .brand img,.site-header--solid .brand img{width:72px} }

/* ==========================================================================
   RECENT PROJECTS — live Facebook feed (SociableKIT)
   The widget renders third-party markup we do not control, so the site styles
   the outer container only and defends against anything wider than the page.
   ========================================================================== */
.fb-feed{
  position:relative;
  width:100%;
  max-width:100%;
  /* reserve height up front so the feed arriving does not shift the page */
  min-height:420px;
  background:var(--paper);
  border-top:4px solid var(--hivis);
  overflow-x:hidden;           /* never let third-party markup scroll the page */
}
/* loading / fallback messages, centred in the reserved space */
.fb-feed__state{
  position:absolute;
  inset:0;
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:32px 24px;
  text-align:center;
  font-size:15.5px;
  color:var(--steel-dark);
}
.fb-feed__state--error{max-width:56ch;margin-inline:auto;left:50%;transform:translateX(-50%)}
.fb-feed__state[hidden]{display:none!important}

/* the widget's own root */
.fb-feed .sk-ww-facebook-page-posts{position:relative;width:100%;max-width:100%}

/* contain anything the widget injects, including a cross-origin iframe */
.fb-feed :is(iframe,img,video,canvas,table,pre){max-width:100%!important}
.fb-feed iframe{width:100%!important;border:0;display:block}
.fb-feed *{max-width:100%;box-sizing:border-box}

@media (max-width:640px){
  .fb-feed{min-height:360px}
  .fb-feed__state{font-size:15px}
}

/* footer legal line — T&Cs document link sits beside the copyright */
.footer-bar .footer-legal{display:flex;flex-wrap:wrap;align-items:center;gap:0;margin:0}
.footer-bar .footer-legal a{border-bottom:1px solid rgba(198,201,205,.4);padding-bottom:1px;transition:color .2s var(--ease),border-color .2s var(--ease)}
.footer-bar .footer-legal a:hover{color:var(--hivis);border-color:var(--hivis)}

/* ---- Pre-launch QA ---- */
/* Normalise text controls so iOS Safari draws them like every other browser,
   and give inputs and selects one shared height. */
.field input:not([type=radio]):not([type=checkbox]):not([type=file]),.field select,.field textarea{-webkit-appearance:none;appearance:none}
.field input:not([type=radio]):not([type=checkbox]):not([type=file]),.field select{height:52px;line-height:1.25}
.field select{padding-right:46px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%2317191C' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 17px center;background-size:14px 9px}
/* The Facebook fallback sits on a white panel inside a dark section. */
.section--dark .fb-feed .tlink,.fb-feed .tlink{color:var(--graphite);border-color:var(--hivis-mid)}
/* Keep a focused field clear of the fixed mobile call bar. */
@media (max-width:820px){html{scroll-padding-bottom:calc(var(--mobile-bar) + 16px)}}
/* Stack the legal line on phones instead of leaving a dangling separator. */
@media (max-width:560px){
  .footer-bar .footer-legal{flex-direction:column;align-items:flex-start;gap:6px}
  .footer-bar .footer-legal > span[aria-hidden="true"]{display:none}
}

/* ---- Designer credit ----
   "Designed by" in the site's condensed caps; the studio wordmark in its own
   typography (Source Serif 4 600, italic "St."), matching the credit used on
   other Summer St. Studio sites. Subset fonts: only "Summer St. Studio". */
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/SourceSerif4-600-credit.woff2') format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:600;font-display:swap;src:url('../fonts/SourceSerif4-600i-credit.woff2') format('woff2')}
.footer-bar .footer-legal a.credit{display:inline-flex;align-items:baseline;gap:.5em;border-bottom:0;padding-bottom:0;color:inherit;text-decoration:none;font-size:inherit}
.credit-by{font-family:var(--head);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.credit-wordmark{font-family:'Source Serif 4',Georgia,'Times New Roman',serif;font-weight:600;font-size:15.5px;letter-spacing:-.01em;white-space:nowrap;color:#DAD8D1;transition:color .2s var(--ease)}
.credit-wordmark .st{font-style:italic}
.footer-bar .footer-legal a.credit:hover,.footer-bar .footer-legal a.credit:focus-visible,
.footer-bar .footer-legal a.credit:hover .credit-wordmark,.footer-bar .footer-legal a.credit:focus-visible .credit-wordmark{color:var(--hivis)}

/* ---- Restrained motion ----
   Everything here is hidden only under html.motion, which site.js adds itself
   after checking reduced-motion; if the script never runs, nothing is hidden. */
/* Content below the fold eases up once as it scrolls into view. */
html.motion .rv{opacity:0;transform:translateY(18px)}
html.motion .rv.rv-in{opacity:1;transform:none;transition:opacity .65s var(--ease),transform .65s var(--ease)}
/* Our own lazy images fade in instead of popping (site.js tags them .fade-img,
   so third-party widget images are never touched). Keeps the hover zoom. */
html.motion img.fade-img{opacity:0;transition:opacity .5s var(--ease),transform .5s var(--ease)}
html.motion img.fade-img.is-loaded{opacity:1}
/* Mobile menu links settle in one after another when the menu opens. */
.mobile-nav a.m-link,.mobile-nav__foot{opacity:0;transform:translateY(10px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.mobile-nav[data-open="true"] a.m-link,.mobile-nav[data-open="true"] .mobile-nav__foot{opacity:1;transform:none}
.mobile-nav[data-open="true"] a.m-link:nth-child(2){transition-delay:.03s}
.mobile-nav[data-open="true"] a.m-link:nth-child(3){transition-delay:.06s}
.mobile-nav[data-open="true"] a.m-link:nth-child(4){transition-delay:.09s}
.mobile-nav[data-open="true"] a.m-link:nth-child(5){transition-delay:.12s}
.mobile-nav[data-open="true"] a.m-link:nth-child(6){transition-delay:.15s}
.mobile-nav[data-open="true"] a.m-link:nth-child(7){transition-delay:.18s}
.mobile-nav[data-open="true"] .mobile-nav__foot{transition-delay:.22s}
/* Form feedback appears rather than snapping in. */
@keyframes tch-fade-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.field .err:not(:empty),.form-status:not([hidden]),.thumbs li{animation:tch-fade-in .25s var(--ease)}
@media (prefers-reduced-motion:reduce){
  html.motion .rv,html.motion img.fade-img{opacity:1;transform:none}
  .mobile-nav a.m-link,.mobile-nav__foot{opacity:1;transform:none}
}

/* ---- Compact footer ----
   One row on desktop with the page list in two columns; on phones the logo
   sits beside the address, phone and email share a line, and the page list
   runs in two columns, so the footer no longer takes a full screen. */
.site-footer{padding-top:clamp(34px,4vw,50px)}
.site-footer > .wrap{grid-template-columns:1.05fr 1fr 1.15fr;gap:clamp(22px,3.5vw,48px);align-items:start}
.foot-addr{color:#C6C9CD;font-size:15px;line-height:1.5;margin:0}
.site-footer .foot-h{margin-bottom:12px}
.foot-contact__lines{display:flex;flex-direction:column;gap:6px}
.site-footer .contact-line{margin-bottom:0;line-height:1.1}
.foot-note{margin:10px 0 0;font-size:14.5px}
.foot-pages ul{display:grid;grid-template-columns:repeat(2,max-content);gap:9px 32px;list-style:none;margin:0;padding:0}
.foot-pages li{margin:0}
.footer-bar{margin-top:clamp(26px,3vw,40px);padding:18px 0}
@media (max-width:960px){
  .site-footer > .wrap{grid-template-columns:1fr 1fr}
  .foot-pages{grid-column:1/-1}
  .foot-pages ul{grid-template-columns:repeat(3,max-content)}
}
@media (max-width:640px){
  .site-footer{padding-top:28px}
  .site-footer > .wrap{grid-template-columns:1fr;gap:22px}
  .foot-brand{display:flex;align-items:center;gap:16px}
  .site-footer img.logo{width:80px;margin:0}
  .foot-addr{font-size:14px}
  .foot-contact__lines{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 18px}
  .site-footer .contact-line{font-size:22px}
  .site-footer .foot-email{font-size:15px}
  .foot-note{margin-top:6px;font-size:14px}
  .site-footer .foot-h{font-size:14px;margin-bottom:10px}
  .foot-pages ul{grid-template-columns:1fr 1fr;gap:10px 16px}
  .site-footer .foot-pages a{font-size:15px}
  .footer-bar{margin-top:24px;padding:16px 0}
  .footer-bar .wrap{gap:10px}
  .trust-line{font-size:12.5px;line-height:1.5}
  .footer-bar .footer-legal{gap:4px}
}

/* ---- Credentials strip: five items never leave an empty cell ---- */
@media (max-width:960px) and (min-width:641px){
  .trust li:nth-child(5){grid-column:span 2}
}
@media (max-width:640px){
  /* Service area becomes a full-width closing row: label left, reach right. */
  .trust li:nth-child(5){grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
}

/* ---- Mobile menu: always reachable ----
   The panel scrolls on its own (the page behind is locked while it is open),
   sizes its type to the screen height so it usually fits without scrolling,
   and keeps clear space at the bottom for Safari's floating toolbar. */
.mobile-nav{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  height:100%;height:100dvh;padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
.mobile-nav__top{margin-bottom:clamp(14px,3vh,36px);flex:0 0 auto}
.mobile-nav a.m-link{font-size:clamp(22px,3.6vh,32px);line-height:1.15;padding:clamp(7px,1.3vh,14px) 0;flex:0 0 auto}
.mobile-nav__foot{padding-top:clamp(18px,3vh,28px);flex:0 0 auto}

/* ---- Filling blank space ---- */
/* About: a second photo takes up whatever height the text column leaves
   below the first, so the two columns finish level. Desktop only. */
.about-media{align-self:stretch;display:flex;flex-direction:column}
.about-media__fill{position:relative;flex:1 1 0;min-height:140px;margin-top:22px;overflow:hidden;border-radius:2px;background:var(--iron)}
.about-media__fill img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:820px),(min-width:1360px){.about-media__fill{display:none}}

/* Home steps: the long checklist in step two runs in two columns on
   desktop, so the three steps finish closer to level. */
@media (min-width:961px){.step ul{grid-template-columns:1fr 1fr;column-gap:20px}}

/* Three cards on a two-column tablet grid: the third spans the full row and
   lays out side by side instead of sitting alone next to an empty cell. */
@media (min-width:641px) and (max-width:960px){
  .grid-3 > :nth-child(3):last-child{grid-column:1/-1}
  .grid-3 > .lift-card:nth-child(3):last-child,
  .grid-3 > .story:nth-child(3):last-child{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
  .grid-3 > .lift-card:nth-child(3):last-child .lift-card__media{aspect-ratio:auto;min-height:100%}
  .grid-3 > .lift-card:nth-child(3):last-child .lift-card__media img{position:absolute;inset:0;height:100%}
  .grid-3 > .story:nth-child(3):last-child > picture{display:block;position:relative;min-height:100%}
  .grid-3 > .story:nth-child(3):last-child > picture img{position:absolute;inset:0;height:100%;aspect-ratio:auto}
}

/* Equipment specs: flex rows whose last line stretches to the full width,
   so seven figures never leave a mostly empty final row. */
.spec-grid{display:flex;flex-wrap:wrap}
/* Four per row: seven figures read 4 + 3, four read as one row. */
.spec-grid > .spec{flex:1 1 calc(25% - 24px)}
@media (max-width:640px){.spec-grid > .spec{flex-basis:calc(50% - 16px)}}

/* Gallery tiles widened to fill the last row keep a landscape crop, even
   when they are normally portrait. */
.proj-grid .proj-card.is-wide img{aspect-ratio:4/3}

/* Quote sidebar: on desktop the photo fills whatever height the form leaves,
   so the two columns finish level whichever photo a page uses. */
.quote-aside__img{margin-top:16px;border-radius:2px;overflow:hidden;background:var(--iron)}
.quote-aside__img img{width:100%;aspect-ratio:4/3;object-fit:cover}
@media (min-width:961px){
  .quote-aside{align-self:stretch;display:flex;flex-direction:column}
  .quote-aside__img{position:relative;flex:1 1 0;min-height:200px}
  .quote-aside__img img{position:absolute;inset:0;height:100%;aspect-ratio:auto}
}

/* Thanks page: confirmation on the left, what happens next on the right. */
.thanks-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,72px);align-items:center;width:100%}
.thanks-next{background:var(--paper);padding:clamp(24px,3vw,36px);border-radius:2px;border-top:4px solid var(--hivis)}
.thanks-next h2{margin-bottom:18px}
.next-steps{list-style:none;margin:0;padding:0;counter-reset:next;display:grid;gap:18px}
.next-steps li{counter-increment:next;position:relative;padding-left:44px}
.next-steps li::before{content:counter(next,decimal-leading-zero);position:absolute;left:0;top:1px;font-family:var(--head);font-weight:700;font-size:15px;letter-spacing:.14em;color:var(--hivis-deep)}
.next-steps b{display:block;font-family:var(--head);font-weight:700;font-size:18px;text-transform:uppercase;letter-spacing:.02em;color:var(--graphite);margin-bottom:4px}
.next-steps span{font-size:15px;color:var(--ink);line-height:1.55}
@media (max-width:900px){.thanks-layout{grid-template-columns:1fr}}