/* ============================================================
   ULTRA EXCAVATING LTD.
   Aesthetic: premium industrial. Theme locked dark.
   Radius system: all sharp (0px). One accent: machine yellow.
   ============================================================ */

:root{
  --ink:#101113;
  --ink-2:#16181B;
  --ink-3:#1D2024;
  --line:#2B2F34;
  --paper:#EDEBE7;
  --muted:#9BA1A8;
  --soft:#C7CBD0;
  --dim:#A2A9B0;
  --soft-2:#CDD1D6;
  --soft-3:#B9BEC4;
  --faint:#7E858D;
  --btn-line:#3A3F45;
  --field:#383D43;
  --field-ph:#98A0A8;
  --accent:#F2A71B;
  --accent-deep:#C97F09;

  --wrap:1360px;
  --gut:clamp(20px, 5vw, 64px);
  --ease:cubic-bezier(.16,1,.3,1);

  --z-grain:70;
  --z-cursor:80;
  --z-loader:90;
  --z-nav:60;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-variation-settings:"wdth" 100;
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.is-loading{overflow:hidden; height:100vh}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button,input,textarea,select{font:inherit; color:inherit}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul{margin:0; padding:0; list-style:none}

::selection{background:var(--accent); color:var(--ink)}

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

/* ---------- layout ---------- */
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}
section{position:relative}

/* ---------- type ---------- */
.display{
  font-weight:800;
  font-variation-settings:"wdth" 94,"wght" 820;
  letter-spacing:-.03em;
  line-height:1.02;
  text-transform:uppercase;
}
.h1{font-size:clamp(2.5rem, 6vw, 4.9rem)}
.h2{font-size:clamp(2.1rem, 5vw, 4.1rem)}
.h3{font-size:clamp(1.35rem, 2.1vw, 1.9rem); font-variation-settings:"wdth" 96,"wght" 760; letter-spacing:-.02em; line-height:1.08; text-transform:uppercase}
.lede{font-size:clamp(1.02rem, 1.35vw, 1.2rem); color:var(--soft); line-height:1.62; max-width:60ch}
.body{color:var(--muted); line-height:1.68; max-width:62ch}
.eyebrow{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--accent); font-weight:500;
}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}

/* ---------- accent rule ---------- */
.rule{height:1px; background:var(--line); border:0; margin:0}

/* ============================================================
   LOADER
   ============================================================ */
#loader{
  position:fixed; inset:0; z-index:var(--z-loader);
  background:var(--ink);
  display:grid; place-items:center;
  transition:transform 1s var(--ease), opacity .5s ease .55s;
}
#loader.done{transform:translateY(-101%); opacity:0; pointer-events:none}
.loader-inner{width:min(420px, 78vw); text-align:left}
.loader-mark{margin-bottom:26px}
.loader-mark svg{width:74px; height:74px; display:block}
.loader-word{
  font-weight:900;
  font-variation-settings:"wdth" 88,"wght" 880;
  letter-spacing:-.035em;
  text-transform:uppercase;
  font-size:clamp(2.2rem,7vw,3.1rem);
  line-height:.94;
  overflow:hidden;
}
.loader-word span{display:block; transform:translateY(105%); animation:lRise .85s var(--ease) forwards}
.loader-word span:nth-child(2){animation-delay:.1s}
@keyframes lRise{to{transform:translateY(0)}}
.loader-sub{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.62rem; letter-spacing:.34em; text-transform:uppercase; color:var(--muted);
  margin-top:12px; opacity:0; animation:lFade .6s ease .5s forwards;
}
@keyframes lFade{to{opacity:1}}
.loader-track{margin-top:30px; height:2px; background:var(--ink-3); position:relative; overflow:hidden}
.loader-bar{position:absolute; inset:0 auto 0 0; width:0%; background:var(--accent); transition:width .28s ease-out}
.loader-pct{
  display:flex; justify-content:space-between;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.6rem; letter-spacing:.2em; color:var(--muted); margin-top:10px;
}

/* draw-in of the mark strokes */
.mark-stroke{stroke-dasharray:120; stroke-dashoffset:120; animation:draw .9s var(--ease) forwards}
.mark-stroke:nth-child(2){animation-delay:.12s}
.mark-stroke:nth-child(3){animation-delay:.24s}
@keyframes draw{to{stroke-dashoffset:0}}
.mark-fill{opacity:0; animation:lFade .5s ease .6s forwards}

/* ============================================================
   CUSTOM CURSOR, dot with a ring around it
   ============================================================ */
.cursor-dot,.cursor-ring{
  position:fixed; top:0; left:0; z-index:var(--z-cursor);
  pointer-events:none; border-radius:50%;
  will-change:transform; opacity:0;
}
.cursor-dot{width:6px; height:6px; background:var(--accent); margin:-3px 0 0 -3px}
.cursor-ring{
  width:34px; height:34px; margin:-17px 0 0 -17px;
  border:1px solid rgba(242,167,27,.7);
  transition:width .28s var(--ease), height .28s var(--ease), margin .28s var(--ease),
             background-color .28s ease, border-color .28s ease;
}
.cursor-ring.hot{
  width:62px; height:62px; margin:-31px 0 0 -31px;
  background:rgba(242,167,27,.12); border-color:var(--accent);
}
.cursor-ring.press{width:24px; height:24px; margin:-12px 0 0 -12px}
body.cursor-on{cursor:none}
body.cursor-on a,body.cursor-on button,body.cursor-on input,
body.cursor-on textarea,body.cursor-on select,body.cursor-on label{cursor:none}
@media (hover:none),(pointer:coarse){.cursor-dot,.cursor-ring{display:none}}

/* ---------- grain, fixed and pointer-events none only ---------- */
.grain{
  position:fixed; inset:0; z-index:var(--z-grain); pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
}

/* ============================================================
   REVEAL SYSTEM
   ============================================================ */
[data-rise]{opacity:0; transform:translateY(30px); transition:opacity .85s var(--ease), transform .85s var(--ease)}
[data-rise].in{opacity:1; transform:none}
[data-stagger] > *{opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
[data-stagger].in > *{opacity:1; transform:none}
[data-stagger].in > *:nth-child(1){transition-delay:.02s}
[data-stagger].in > *:nth-child(2){transition-delay:.09s}
[data-stagger].in > *:nth-child(3){transition-delay:.16s}
[data-stagger].in > *:nth-child(4){transition-delay:.23s}
[data-stagger].in > *:nth-child(5){transition-delay:.30s}
[data-stagger].in > *:nth-child(6){transition-delay:.37s}
[data-stagger].in > *:nth-child(7){transition-delay:.44s}
[data-stagger].in > *:nth-child(8){transition-delay:.51s}

/* line by line headline mask */
.lines span{display:block; overflow:hidden}
.lines span > i{
  display:block; font-style:normal;
  transform:translateY(106%);
  transition:transform 1s var(--ease);
}
.lines.in span > i{transform:translateY(0)}
.lines.in span:nth-child(2) > i{transition-delay:.09s}
.lines.in span:nth-child(3) > i{transition-delay:.18s}

/* image fade plus scale settle, every photo on the page uses this */
.ph{position:relative; overflow:hidden; background:var(--ink-3)}
.ph img{
  width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.09);
  transition:opacity 1.1s ease, transform 1.5s var(--ease);
}
.ph.in img{opacity:1; transform:scale(1)}
.ph::after{
  content:""; position:absolute; inset:0; background:var(--accent);
  transform-origin:left; transform:scaleX(0); pointer-events:none;
}
.ph.in::after{animation:wipe 1.05s var(--ease) forwards}
@keyframes wipe{
  0%{transform:scaleX(0); transform-origin:left}
  45%{transform:scaleX(1); transform-origin:left}
  55%{transform:scaleX(1); transform-origin:right}
  100%{transform:scaleX(0); transform-origin:right}
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:var(--z-nav);
  height:74px; display:flex; align-items:center;
  transition:height .4s var(--ease), background-color .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
.nav.stuck{height:62px; background:rgba(16,17,19,.86); backdrop-filter:blur(14px); border-bottom-color:var(--line)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; gap:28px}
.brand{display:flex; align-items:center; gap:11px}
.brand svg{width:30px; height:30px; flex:none}
.brand-txt{line-height:.95}
.brand-txt b{
  display:block; font-weight:900; font-variation-settings:"wdth" 88,"wght" 880;
  letter-spacing:-.02em; text-transform:uppercase; font-size:1.05rem;
}
.brand-txt em{
  display:block; font-style:normal;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.5rem; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); margin-top:2px;
}
.nav-links{display:flex; align-items:center; gap:30px}
.nav-links a{
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  color:var(--soft); position:relative; padding:4px 0;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav-links a:hover{color:var(--paper)}
.nav-links a:hover::after{transform:scaleX(1); transform-origin:left}
.nav-right{display:flex; align-items:center; gap:18px}
.nav-tel{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.76rem; letter-spacing:.06em; color:var(--paper); white-space:nowrap;
}
.nav-tel:hover{color:var(--accent)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  white-space:nowrap;
  font-weight:800; font-size:.79rem; letter-spacing:.11em; text-transform:uppercase;
  padding:15px 26px; border:1px solid transparent; border-radius:0;
  position:relative; overflow:hidden; isolation:isolate;
  transition:transform .18s ease, color .35s ease, border-color .35s ease;
}
.btn:active{transform:translateY(1px) scale(.985)}
.btn-solid{background:var(--accent); color:var(--ink); border-color:var(--accent)}
.btn-solid::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--paper);
  transform:translateY(101%); transition:transform .45s var(--ease);
}
.btn-solid:hover::before{transform:translateY(0)}
.btn-solid:hover{color:var(--ink)}
.btn-ghost{background:transparent; color:var(--paper); border-color:var(--btn-line)}
.btn-ghost::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--accent);
  transform:translateY(101%); transition:transform .45s var(--ease);
}
.btn-ghost:hover{color:var(--ink); border-color:var(--accent)}
.btn-ghost:hover::before{transform:translateY(0)}
.btn-sm{padding:11px 19px; font-size:.72rem}

.burger{display:none; width:42px; height:42px; background:none; border:1px solid var(--line); padding:0}
.burger i{display:block; width:16px; height:1.5px; background:var(--paper); margin:3.5px auto; transition:transform .35s var(--ease), opacity .2s}
.burger.x i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger.x i:nth-child(2){opacity:0}
.burger.x i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

.drawer{
  position:fixed; inset:62px 0 auto 0; z-index:55;
  background:var(--ink-2); border-bottom:1px solid var(--line);
  transform:translateY(-120%); transition:transform .5s var(--ease);
  padding:8px var(--gut) 26px;
}
.drawer.open{transform:translateY(0)}
.drawer a{display:block; padding:16px 0; border-bottom:1px solid var(--line);
  font-weight:800; text-transform:uppercase; letter-spacing:.06em; font-size:1.05rem}
.drawer .btn{width:100%; margin-top:20px}

/* ============================================================
   HERO, full bleed photograph
   ============================================================ */
.hero{
  position:relative;
  min-height:100dvh;
  display:flex; align-items:flex-end;
  padding-top:130px; padding-bottom:clamp(44px,7vh,86px);
  overflow:hidden;
}
.hero-bg{position:absolute; inset:0; z-index:0; background:var(--ink-3); overflow:hidden}
.hero-bg img{
  width:100%; height:100%; object-fit:cover; object-position:50% 46%;
  opacity:0; transform:scale(1.05);
  transition:opacity 1.2s ease, transform 1.8s var(--ease);
}
.hero-bg.in img{opacity:1; transform:scale(1)}
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(16,17,19,.74) 0%, rgba(16,17,19,.24) 32%, rgba(16,17,19,.62) 74%, rgba(16,17,19,.95) 100%),
    linear-gradient(90deg, rgba(16,17,19,.82) 0%, rgba(16,17,19,.44) 54%, rgba(16,17,19,.10) 100%);
}
.hero .wrap{position:relative; z-index:2; width:100%}
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(28px,4vw,64px); align-items:end; width:100%}
.hero-copy{max-width:64ch}
.hero-tag{display:flex; align-items:center; gap:12px; margin-bottom:22px}
.hero-tag .bar{width:38px; height:2px; background:var(--accent)}
.hero h1{margin-bottom:24px; text-shadow:0 2px 30px rgba(16,17,19,.55)}
.hero h1 em{font-style:normal; color:var(--accent)}
.hero-lede{margin-bottom:32px; color:var(--paper)}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px}

.hero-badge{
  background:rgba(16,17,19,.78); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-left:2px solid var(--accent);
  padding:18px 22px; max-width:250px;
}
.hero-badge b{display:block; font-size:2rem; font-weight:900; font-variation-settings:"wdth" 90,"wght" 880; letter-spacing:-.03em; line-height:1}
.hero-badge span{display:block; font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:7px}

/* ============================================================
   DUO, commercial and residential split
   ============================================================ */
.duo{border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.duo-grid{display:grid; grid-template-columns:1fr 1fr}
.duo-cell{padding:clamp(44px,6vw,84px) clamp(24px,3.4vw,54px); position:relative; overflow:hidden}
.duo-cell + .duo-cell{border-left:1px solid var(--line)}
.duo-cell::before{
  content:""; position:absolute; inset:auto 0 0 0; height:2px; background:var(--accent);
  transform:scaleX(0); transform-origin:left; transition:transform .7s var(--ease);
}
.duo-cell:hover::before{transform:scaleX(1)}
.duo-num{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.66rem; letter-spacing:.2em;
  color:var(--accent); display:block; margin-bottom:18px;
}
.duo-cell h3{margin-bottom:14px}
.duo-cell p{font-size:.94rem}
.duo-list{margin-top:22px; display:flex; flex-wrap:wrap; gap:8px}
.duo-list li{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.6rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--soft-3); border:1px solid var(--line); padding:7px 11px;
}

/* ============================================================
   SERVICES, bento with exactly 8 cells
   ============================================================ */
.svc{padding:clamp(76px,10vw,148px) 0}
.svc-head{display:flex; flex-direction:column; gap:16px; margin-bottom:clamp(34px,4.4vw,60px); max-width:56ch}
.bento{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:1px; background:var(--line); border:1px solid var(--line);
}
.cell{background:var(--ink-2); position:relative; overflow:hidden; display:flex; flex-direction:column;
  transition:background-color .4s ease}
.cell-pad{padding:clamp(24px,2.3vw,34px); display:flex; flex-direction:column; height:100%}
.cell-ico{width:26px; height:26px; color:var(--accent); margin-bottom:auto}
.cell-ico svg{width:100%; height:100%; display:block}
.cell h3{margin:44px 0 10px}
.cell p{font-size:.88rem; color:var(--muted); max-width:40ch}
.cell .ph{position:absolute; inset:0; z-index:0}
.cell .ph img{filter:contrast(1.02) saturate(1.02) brightness(.7); transition:filter .6s ease, opacity 1.1s ease, transform 1.5s var(--ease)}
.c-a .ph img{object-position:50% 52%}
.c-b .ph img{object-position:44% 46%}
.c-c .ph img{object-position:50% 56%}
.c-d .ph img{object-position:34% 72%}
.c-e .ph img{object-position:50% 58%}
.c-f .ph img{object-position:50% 62%}
.c-g .ph img{object-position:56% 54%}
.c-h .ph img{object-position:50% 66%}
.cell:hover .ph img{filter:contrast(1.04) saturate(1.06) brightness(.86); transform:scale(1.05)}
.cell.has-img::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(16,17,19,.18) 0%, rgba(16,17,19,.60) 44%, rgba(16,17,19,.93) 100%);
}
.cell.has-img .cell-pad{position:relative; z-index:2}
.cell.has-img p{color:var(--soft-2)}

.c-a{grid-column:span 3; min-height:360px}
.c-b{grid-column:span 3; min-height:360px}
.c-c,.c-d,.c-e,.c-f,.c-g,.c-h{grid-column:span 2; min-height:290px}

/* ============================================================
   METHOD, verb steps, vertical rhythm not cards
   ============================================================ */
.method{padding:clamp(70px,9vw,130px) 0; border-top:1px solid var(--line)}
.method-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,5vw,80px); align-items:start}
.method-sticky{position:sticky; top:120px}
.step{
  display:grid; grid-template-columns:auto 1fr; gap:24px;
  padding:30px 0; border-bottom:1px solid var(--line);
}
.step:first-child{border-top:1px solid var(--line)}
.step-k{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.66rem; letter-spacing:.16em;
  color:var(--accent); padding-top:6px;
}
.step h3{margin-bottom:8px; font-size:clamp(1.15rem,1.7vw,1.5rem)}
.step p{font-size:.9rem; color:var(--muted); max-width:52ch}

/* ============================================================
   TERRITORY, split photo band
   ============================================================ */
.terr{position:relative; min-height:clamp(480px,70vh,700px); display:flex; align-items:center; overflow:hidden}
.terr-bg{position:absolute; inset:0; z-index:0; display:grid; grid-template-columns:1fr 1fr}
.terr-pane{position:relative; overflow:hidden; background:var(--ink-3)}
.terr-pane + .terr-pane{border-left:1px solid var(--line)}
.terr-pane img{width:100%; height:100%; object-fit:cover}
.terr-pane.p-left img{object-position:50% 42%}
.terr-pane.p-right img{object-position:50% 50%}
.terr::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(16,17,19,.88) 0%, rgba(16,17,19,.70) 26%, rgba(16,17,19,.44) 46%, rgba(16,17,19,.14) 100%);
}
.terr-in{text-shadow:0 2px 22px rgba(16,17,19,.92), 0 1px 4px rgba(16,17,19,.8)}
.terr .wrap{position:relative; z-index:2}
.terr-in{max-width:50ch}
.terr h2{margin:18px 0 20px}
.towns{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px}
.towns li{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.63rem; letter-spacing:.13em;
  text-transform:uppercase; border:1px solid rgba(237,235,231,.24); padding:8px 13px;
  background:rgba(16,17,19,.42);
}

/* ============================================================
   VALUES
   ============================================================ */
.vals{padding:clamp(76px,10vw,140px) 0; border-top:1px solid var(--line)}
.vals-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border-block:1px solid var(--line)}
.val{background:var(--ink); padding:clamp(30px,3.4vw,48px) clamp(22px,2.6vw,36px)}
.val b{
  display:block; font-size:clamp(1.5rem,2.4vw,2.05rem); font-weight:900;
  font-variation-settings:"wdth" 92,"wght" 860; letter-spacing:-.025em; text-transform:uppercase;
  margin-bottom:12px;
}
.val p{font-size:.9rem; color:var(--muted)}
.val-line{width:30px; height:2px; background:var(--accent); margin-bottom:22px}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{padding:clamp(76px,10vw,140px) 0; border-top:1px solid var(--line); background:var(--ink-2)}
.contact-grid{display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(36px,5vw,84px); align-items:start}
.info-row{display:flex; gap:16px; padding:22px 0; border-bottom:1px solid var(--line)}
.info-row:first-of-type{border-top:1px solid var(--line)}
.info-ico{width:19px; height:19px; color:var(--accent); flex:none; margin-top:3px}
.info-ico svg{width:100%; height:100%; display:block}
.info-row b{display:block; font-size:.66rem; font-family:"JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:400; margin-bottom:5px}
.info-row p,.info-row a{font-size:1.02rem; font-weight:600}
.info-row a:hover{color:var(--accent)}

/* ---------- form ---------- */
form{display:grid; gap:22px; scroll-margin-top:96px}
.f-row{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.field{display:grid; gap:9px}
.field label{
  font-family:inherit;
  font-size:.88rem; font-weight:700; letter-spacing:.045em;
  text-transform:uppercase; color:var(--paper); line-height:1.25;
}
.field input,.field select,.field textarea{
  background:var(--ink); border:1px solid var(--field); border-radius:0;
  padding:15px 16px; font-size:1.02rem; line-height:1.45; color:var(--paper); width:100%;
  transition:border-color .3s ease, background-color .3s ease;
}
.field textarea{resize:vertical; min-height:124px}
.field input::placeholder,.field textarea::placeholder{color:var(--field-ph); opacity:1}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--accent); background:var(--ink-2);
}
.field .hint{font-size:.85rem; color:var(--dim)}
.f-note{font-size:.88rem; color:var(--dim); line-height:1.55}

/* success state, the whole form is replaced */
.f-done{display:none; text-align:center; padding:clamp(46px,7vw,86px) 20px}
form.sent > *{display:none}
form.sent .f-done{display:block}
.f-check{
  width:66px; height:66px; margin:0 auto 24px; border-radius:50%;
  border:2px solid var(--accent); display:grid; place-items:center;
}
.f-check svg{width:32px; height:32px; fill:none; stroke:var(--accent); stroke-width:3;
  stroke-linecap:square; stroke-dasharray:46; stroke-dashoffset:46}
form.sent .f-check{animation:pop .45s var(--ease) both}
form.sent .f-check svg{animation:tick .5s var(--ease) .2s forwards}
@keyframes pop{from{transform:scale(.6); opacity:0} to{transform:scale(1); opacity:1}}
@keyframes tick{to{stroke-dashoffset:0}}
.f-done p{font-size:1.18rem; font-weight:700; letter-spacing:.01em}

/* ============================================================
   FOOTER
   ============================================================ */
footer{padding:clamp(52px,6vw,86px) 0 34px; border-top:1px solid var(--line)}
.foot-top{display:flex; flex-wrap:wrap; justify-content:space-between; gap:34px; align-items:flex-start}
.foot-nav{display:flex; flex-wrap:wrap; gap:26px}
.foot-nav a{font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--soft-3)}
.foot-nav a:hover{color:var(--accent)}
.foot-bot{
  margin-top:44px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px;
  font-size:.74rem; color:var(--faint);
}

/* ============================================================
   404
   ============================================================ */
.nf{min-height:100dvh; display:grid; place-items:center; text-align:center; padding:120px var(--gut) 80px}
.nf .eyebrow{display:block; margin-bottom:18px}
.nf p{margin:20px auto 32px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1040px){
  .hero-grid{grid-template-columns:1fr; align-items:start; gap:30px}
  .hero-badge{max-width:none; justify-self:start}
  .method-grid{grid-template-columns:1fr; gap:34px}
  .method-sticky{position:static}
  .contact-grid{grid-template-columns:1fr}
  .c-a,.c-b{grid-column:span 6}
  .c-c,.c-d,.c-e,.c-f,.c-g,.c-h{grid-column:span 3}
}
@media (max-width:820px){
  .nav-links{display:none}
  .nav-right .btn{display:none}
  .burger{display:block}
  .nav{height:62px}
  .duo-grid{grid-template-columns:1fr}
  .duo-cell + .duo-cell{border-left:0; border-top:1px solid var(--line)}
  .vals-grid{grid-template-columns:1fr}
  .val{border-bottom:0}
}
@media (max-width:680px){
  .bento{grid-template-columns:1fr}
  .c-a,.c-b,.c-c,.c-d,.c-e,.c-f,.c-g,.c-h{grid-column:span 1; min-height:270px}
  .f-row{grid-template-columns:1fr}
  .step{grid-template-columns:1fr; gap:10px}
  .hero{min-height:92dvh; padding-top:112px}
  .hero-bg img{object-position:62% 48%}
  .terr{min-height:auto; padding:88px 0}
  .terr-bg{grid-template-columns:1fr; grid-template-rows:1fr 1fr}
  .terr-pane + .terr-pane{border-left:0; border-top:1px solid var(--line)}
  .terr::after{background:linear-gradient(180deg, rgba(16,17,19,.86) 0%, rgba(16,17,19,.78) 100%)}
}

/* ============================================================
   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}
  [data-rise],[data-stagger] > *{opacity:1 !important; transform:none !important}
  .lines span > i{transform:none !important}
  .ph img,.hero-bg img{opacity:1 !important; transform:none !important}
  .ph::after{display:none}
  .cursor-dot,.cursor-ring{display:none !important}
  body.cursor-on,body.cursor-on *{cursor:auto !important}
  .loader-word span{transform:none}
  .f-check svg{stroke-dashoffset:0 !important}
}