:root{
  /* surfaces — three levels of depth, always */
  --void:#050607;
  --slate:#0D222F;
  --slate-hi:#122C3C;
  --edge:#1B3A4E;
  --track:#2B2E32;

  /* accent */
  --blue:#38AEFD;
  --blue-deep:#0A5C8A;
  --blue-dim:rgba(56,174,253,.14);

  /* type — --faint lifted to #8799AB: the document's own suggested
     #6B7885 fails AA against all three surfaces (4.49/3.61/3.20),
     including void. #8799AB clears all three with margin
     (6.93/5.57/4.94) — see the reply for the full table. */
  --white:#FFFFFF;
  --mist:#9AA6B2;
  --faint:#8799AB;
  --err:#FF6B6B;

  --heading:var(--white);
  --text:var(--mist);
  --mute:var(--mist);
  --card:var(--slate);
  --accent:var(--blue);
  --line:var(--edge);
  --line-2:var(--edge);

  --display:"Anton",Impact,sans-serif;
  --body:"Inter",system-ui,-apple-system,sans-serif;

  --pad:clamp(22px,5vw,56px);
  --maxw:1120px;
  --radius:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background-color:var(--void);color:var(--text);
  background-image:repeating-linear-gradient(90deg,
    rgba(255,255,255,.04) 0,rgba(255,255,255,.04) 1px,
    transparent 1px,transparent 3px);
  font-family:var(--body);font-size:16px;line-height:1.68;font-weight:400;
  -webkit-font-smoothing:antialiased;letter-spacing:-.005em}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:400;
  text-transform:uppercase;line-height:.96;letter-spacing:.01em;color:var(--heading)}
h1 .hl,h2 .hl{color:var(--blue)}
p{margin:0}
a{color:inherit}
img{display:block;max-width:100%}
ul{margin:0;padding:0;list-style:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.lede{margin-top:20px;max-width:50ch;color:var(--mute);font-size:16.5px}
.lede a,.stub a{color:var(--accent);text-decoration:underline}
.lede a:hover,.stub a:hover{text-decoration:none}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--pad);top:12px;z-index:99;background:var(--blue);
  color:#000;padding:10px 16px;border-radius:6px;font-weight:600}

/* corner micro-label — small stacked tag in a card corner.
   Two or three short words, uppercase, no invented stats. */
.corner-label{position:absolute;top:20px;right:22px;
  font-family:var(--display);font-size:10px;color:var(--faint);
  letter-spacing:.18em;line-height:1.5;text-align:right}

/* horizontal progress bar — built for when a real proportion exists
   to show. Not wired to any number yet; see reply for why. */
.bar{height:6px;border-radius:999px;background:var(--track);overflow:hidden}
.bar-fill{height:100%;background:var(--blue);border-radius:999px}

/* nav — fixed chrome */
.nav{position:sticky;top:0;z-index:60;background:rgba(5,6,7,.86);
  backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--edge)}
.nav-in{display:flex;align-items:center;gap:32px;height:74px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{height:40px;width:auto;display:block}
.brand b{font-family:var(--display);font-size:18px;font-weight:400;
  letter-spacing:.075em;text-transform:uppercase;color:var(--heading)}
.nav-links{margin-left:auto;display:flex;gap:32px;font-size:14px;font-weight:500}
.nav-links a{text-decoration:none;color:var(--mute)}
.nav-links a:hover{color:var(--heading)}
.nav-cta{border:1px solid var(--edge);color:var(--heading);text-decoration:none;
  font-weight:500;font-size:14px;padding:10px 20px;border-radius:4px;
  white-space:nowrap}
.nav-cta:hover{border-color:var(--blue);color:var(--blue)}
@media(max-width:880px){.nav-links{display:none}.nav-in{height:64px;gap:16px}
  .nav-cta{margin-left:auto}}

/* hero — blue-deep-to-void gradient stands in for the mountain photo.
   MOUNTAIN PHOTO: when the real photo lands, replace only the second
   background-image layer below (the blue-deep gradient) with
   url("mountain.jpg") center/cover no-repeat. The scrim (first layer)
   stays as-is — it's sized to keep text legible over any photo, not
   just this placeholder. */
.hero{position:relative;padding:clamp(72px,11vw,140px) 0 clamp(56px,8vw,96px);
  background-image:
    linear-gradient(180deg, rgba(5,6,7,.55) 0%, rgba(5,6,7,.94) 75%, var(--void) 100%),
    linear-gradient(135deg, var(--blue-deep) 0%, var(--void) 65%);
  background-size:100% 100%, cover;
  background-position:top, top right}
.hero:before{content:"";position:absolute;width:640px;height:640px;
  top:-220px;left:20%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,var(--blue-dim) 0%,transparent 70%);
  animation:hero-drift 20s ease-in-out infinite alternate}
@keyframes hero-drift{0%{transform:translate(0,0)} 100%{transform:translate(120px,60px)}}
@media(prefers-reduced-motion:reduce){.hero:before{animation:none}}
.hero h1{font-size:clamp(42px,7.4vw,78px);max-width:15ch;line-height:.98}
.hero .sub{margin-top:28px;max-width:54ch;font-size:clamp(16.5px,1.8vw,18.5px);
  color:var(--text);line-height:1.65}
.cta-row{margin-top:40px;display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-block;text-decoration:none;font-weight:600;font-size:15.5px;
  padding:14px 28px;border-radius:4px;letter-spacing:-.005em}
.btn-blue{background:var(--blue);color:#000}
.btn-blue:hover{background:#5cbdfd}
.btn-line{border:1px solid var(--edge);color:var(--heading)}
.btn-line:hover{border-color:var(--heading);background:rgba(255,255,255,.06)}
.trust{margin-top:64px;padding-top:26px;border-top:1px solid var(--edge);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 32px;
  font-size:13.5px;color:var(--mute)}
.trust b{font-family:var(--display);font-weight:400;font-size:19px;
  color:var(--heading);letter-spacing:.04em}

/* sections */
.sec{padding:clamp(72px,10vw,120px) 0}
section[id],#main{scroll-margin-top:90px}
.sec h2{font-size:clamp(30px,4.8vw,50px);max-width:17ch}
.hr{border-top:1px solid var(--edge)}
.statement{padding:clamp(64px,9vw,104px) 0}
.statement h2{font-size:clamp(28px,4.4vw,46px);max-width:19ch}
.statement p{margin-top:24px;max-width:56ch;color:var(--mute)}

/* rate sheet — each service is its own card, never a flat divided list */
.rate{margin-top:56px;display:grid;gap:16px}
.row{position:relative;overflow:hidden;display:grid;
  grid-template-columns:1fr auto;gap:6px 48px;
  padding:clamp(26px,3.5vw,32px);background:var(--slate);border:1px solid var(--edge);
  border-radius:var(--radius)}
.row h3{font-size:clamp(21px,2.8vw,27px);grid-column:1;letter-spacing:.02em}
.row .d{grid-column:1;max-width:58ch;color:var(--mute);font-size:15.5px;
  margin-top:4px}
.row .p{grid-column:2;grid-row:1/3;text-align:right;align-self:start;
  font-family:var(--display);font-size:clamp(20px,2.6vw,26px);
  color:var(--blue);white-space:nowrap;letter-spacing:.02em}
.row .p i{display:block;font-family:var(--body);font-style:normal;
  font-size:12px;color:var(--mute);letter-spacing:0;margin-top:6px;
  font-weight:400}
@media(max-width:720px){.row{grid-template-columns:1fr;gap:8px}
  .row h3{order:1}
  .row .p{grid-column:1;grid-row:auto;text-align:left;margin-top:6px;order:2}
  .row .d{order:3;margin-top:6px}
  .row .s2l-flow{order:4}
  .bundle .amt{margin-left:0}}

.bundle{position:relative;overflow:hidden;margin-top:32px;border:1px solid var(--edge);
  border-radius:var(--radius);padding:clamp(28px,4vw,40px);display:flex;
  flex-wrap:wrap;align-items:center;gap:20px 48px;background:var(--slate)}
.bundle h3{font-size:clamp(22px,3vw,30px);letter-spacing:.02em}
.bundle p{max-width:46ch;color:var(--mute);font-size:15.5px;margin-top:10px}
.bundle .amt{margin-left:auto;font-family:var(--display);
  font-size:clamp(22px,3vw,30px);color:var(--blue);white-space:nowrap;
  letter-spacing:.02em}
.bundle-note{margin-top:16px;color:var(--mute);font-size:14.5px;max-width:52ch}

/* work */
.work{border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)}
.job{position:relative;overflow:hidden;margin-top:20px;
  padding:clamp(26px,3.5vw,32px);background:var(--slate);
  border:1px solid var(--edge);border-radius:var(--radius)}
.job:first-of-type{margin-top:0}
.job-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px}
.job h3{font-size:clamp(24px,3.6vw,34px);letter-spacing:.02em}
.job-top span{font-size:13px;color:var(--blue);font-weight:500}
.job-grid{margin-top:20px;display:grid;grid-template-columns:1.2fr 1fr;
  gap:20px 56px}
.job-grid p{max-width:52ch;color:var(--mute);font-size:15.5px}
.job-grid li{padding:10px 0 10px 18px;border-bottom:1px solid var(--edge);
  position:relative;color:var(--text);font-size:14.5px;
  opacity:0;transform:translateY(6px);
  transition:opacity .4s ease var(--d,0s),transform .4s ease var(--d,0s)}
.job.in-view .job-grid li{opacity:1;transform:none}
.job-grid li:last-child{border-bottom:0}
.job-grid li:before{content:"";position:absolute;left:0;top:19px;width:7px;
  height:1px;background:var(--blue)}
@media(prefers-reduced-motion:reduce){
  .job-grid li{opacity:1;transform:none;transition:none}
}
.job-who{width:100%;margin-top:2px;font-size:13.5px;color:var(--mute)}
@media(max-width:780px){.job-grid{grid-template-columns:1fr}}

.gallery{margin-top:24px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.shot{aspect-ratio:4/3;overflow:hidden;border-radius:8px;background:var(--slate-hi);
  border:1px solid var(--edge)}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:560px){.gallery{grid-template-columns:repeat(2,1fr)}}

/* client logo tiles — neutral tile, even padding, consistent optical
   sizing regardless of each logo's native palette or aspect ratio.
   Standalone tiles (the summary wall) sit on --slate; tiles nested
   inside a .job card step up to --slate-hi, the third depth level. */
.logo-tile{background:var(--slate);border:1px solid var(--edge);border-radius:10px;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.logo-tile img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.logo-wall{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.logo-wall .logo-tile{height:110px;padding:22px}
@media(max-width:700px){.logo-wall{grid-template-columns:repeat(2,1fr)}}
.job-top .logo-tile{width:132px;height:68px;padding:12px;flex:0 0 auto;
  align-self:center;background:var(--slate-hi)}

/* testimonials — dashed border keeps the "placeholder" signal distinct
   from real filled cards elsewhere on the site */
.testimonials{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:820px){.testimonials{grid-template-columns:1fr}}
.testimonial{border:1px dashed var(--edge);border-radius:var(--radius);
  padding:clamp(22px,3vw,28px);margin:0}
.testimonial p{color:var(--mute);font-size:15px;line-height:1.6;font-style:normal}
.testimonial cite{display:block;margin-top:16px;color:var(--mute);
  font-size:13px;font-style:normal;letter-spacing:.02em}

/* free foundation setup */
.found .card{position:relative;overflow:hidden;background:var(--slate);
  border:1px solid var(--edge);border-radius:var(--radius);
  padding:clamp(28px,4.5vw,48px)}
.found .card:before{content:"";position:absolute;top:0;left:0;width:60%;
  height:2px;background:linear-gradient(90deg,var(--blue),transparent)}
.found .card:after{content:"";position:absolute;top:-140px;right:-140px;
  width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,var(--blue-dim) 0%,transparent 70%);
  pointer-events:none}
.found .n{font-family:var(--display);font-size:15px;color:var(--blue);
  letter-spacing:.12em;margin-bottom:18px}
.found h2{font-size:clamp(28px,4.4vw,46px);max-width:16ch}
.found .p{margin-top:20px;max-width:56ch;color:var(--text);font-size:16.5px}
.found ul{margin-top:26px;display:grid;gap:10px;max-width:44ch}
.found li{position:relative;padding-left:18px;font-size:15.5px;
  color:var(--text)}
.found li:before{content:"";position:absolute;left:0;top:12px;width:7px;
  height:1px;background:var(--blue)}
.found .btn{margin-top:32px}
.found .guarantee{margin-top:26px;font-family:var(--display);font-weight:400;
  text-transform:uppercase;line-height:1.08;color:var(--heading);
  font-size:clamp(20px,2.8vw,28px);letter-spacing:.01em;max-width:22ch}

/* Stage 4c — the build-up. Footings = the free foundation setup,
   made literal. Reveals on scroll-into-view (reuses the same
   IntersectionObserver + staggered-opacity pattern as the lead
   machine and footer terrain, not a second scroll-scrub mechanism). */
.buildup{margin-top:48px;display:grid;grid-template-columns:1fr 1fr;
  gap:40px;align-items:center}
.buildup-svg{width:100%;height:auto;display:block}
.build-stage{opacity:0;transition:opacity .6s ease var(--d,0s)}
.buildup.in-view .build-stage{opacity:1}
.buildup-steps{display:grid;gap:4px}
.buildup-step{opacity:0;padding:16px 0;border-bottom:1px solid var(--edge);
  transition:opacity .6s ease var(--d,0s)}
.buildup-step:last-child{border-bottom:0}
.buildup-step .n{display:block;font-family:var(--display);font-size:14px;
  color:var(--blue);letter-spacing:.1em;margin-bottom:6px}
.buildup-step p{color:var(--mute);font-size:15px}
.buildup.in-view .buildup-step{opacity:1}
@media(max-width:780px){.buildup{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .build-stage,.buildup-step{opacity:1;transition:none}
}

/* process */
.steps{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step{position:relative;overflow:hidden;background:var(--slate);
  border:1px solid var(--edge);border-radius:var(--radius);
  padding:32px 30px 36px}
.step .n{font-family:var(--display);font-size:15px;color:var(--blue);
  letter-spacing:.12em;margin-bottom:18px}
.step h3{font-size:20px;margin-bottom:10px;letter-spacing:.02em}
.step p{font-size:14.5px;color:var(--mute);line-height:1.62}
@media(max-width:820px){.steps{grid-template-columns:1fr}}

/* SEO breakdown — one deep-dive card, sub-sections divided inside it */
.breakdown{margin-top:32px;background:var(--slate);border:1px solid var(--edge);
  border-radius:var(--radius);padding:clamp(28px,4.5vw,48px)}
.breakdown-block{margin-top:44px;padding-top:36px;border-top:1px solid var(--edge)}
.breakdown-block:first-child{margin-top:0;padding-top:0;border-top:0}
.breakdown-block h3{font-size:clamp(22px,3vw,28px);letter-spacing:.02em}
.breakdown-block .lede-sm{margin-top:14px;max-width:64ch;color:var(--mute);
  font-size:15.5px;line-height:1.65}
.dash-list{margin-top:20px;display:grid;gap:13px;max-width:64ch}
.dash-list li{position:relative;padding-left:18px;color:var(--text);
  font-size:15px;line-height:1.55}
.dash-list li:before{content:"";position:absolute;left:0;top:9px;width:7px;
  height:1px;background:var(--blue)}
.dash-list li strong{color:var(--heading);font-weight:600}

/* page header (non-homepage pages) */
.page-head{padding:clamp(64px,10vw,120px) 0 clamp(40px,6vw,64px)}
.page-head h1{font-size:clamp(36px,6vw,60px);max-width:18ch}
.page-head .sub{margin-top:20px;max-width:56ch;color:var(--mute);font-size:16.5px}
.stub{margin-top:40px;padding:clamp(24px,4vw,40px);border:1px dashed var(--edge);
  border-radius:var(--radius);color:var(--mute);font-size:15px;max-width:56ch}

/* eyebrow label — small accent tag above a heading, standalone use
   (found/step have their own scoped .n for the same look) */
.eyebrow{font-family:var(--display);font-size:14px;color:var(--blue);
  letter-spacing:.12em;margin-bottom:20px}

/* thanks.html next-steps row */
.next{margin-top:56px;padding-top:32px;border-top:1px solid var(--edge);
  display:flex;flex-wrap:wrap;gap:40px 72px}
.next h2{margin:0 0 12px;font-family:var(--body);font-size:15px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.next .num{font-family:var(--display);font-size:clamp(28px,4.4vw,40px);
  color:var(--heading);text-decoration:none;letter-spacing:.02em;
  display:inline-flex;align-items:center;min-height:44px}
.next .num:hover{color:var(--blue)}
.next p{color:var(--mute);font-size:14.5px;margin-top:6px;max-width:32ch}
.next .em{font-weight:500;font-size:16px;color:var(--heading);text-decoration:none;
  word-break:break-word;display:inline-flex;align-items:center;min-height:44px}
.next .em:hover{color:var(--blue)}

/* faq — one card, entries divided inside it */
.faq{margin-top:52px;background:var(--slate);border:1px solid var(--edge);
  border-radius:var(--radius);padding:0 clamp(24px,3.5vw,32px)}
.faq details{border-bottom:1px solid var(--edge)}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;list-style:none;padding:24px 0;
  font-size:17px;font-weight:600;color:var(--heading);display:flex;
  align-items:flex-start;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";margin-left:auto;color:var(--blue);
  font-size:22px;line-height:1;font-weight:400}
.faq details[open] summary:after{content:"–"}
.faq summary:hover{color:var(--blue)}
.faq .a{padding:0 0 26px;max-width:62ch;color:var(--mute);font-size:15.5px}

/* quote — the form and aside share one card; inputs are the third
   depth level (--slate-hi) nested inside it */
.qgrid{position:relative;margin-top:52px;background:var(--slate);
  border:1px solid var(--edge);border-radius:var(--radius);
  padding:clamp(28px,4.5vw,48px);display:grid;
  grid-template-columns:1.3fr .7fr;gap:64px}
@media(max-width:900px){.qgrid{grid-template-columns:1fr;gap:44px}
  .qgrid .aside{order:-1}}
form{display:grid;gap:20px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:540px){.two{grid-template-columns:1fr}}
label{display:block;font-size:12.5px;font-weight:600;margin-bottom:8px;
  color:var(--text);letter-spacing:.01em}
input,textarea{width:100%;font-family:var(--body);font-size:16px;
  padding:13px 14px;background:var(--slate-hi);color:var(--heading);
  border:1px solid var(--edge);border-radius:8px}
input::placeholder,textarea::placeholder{color:var(--mute)}
input:focus,textarea:focus{outline:none;border-color:var(--blue)}
textarea{min-height:118px;resize:vertical}
.hp{display:none}
.field-err{display:block;margin-top:7px;font-size:13px;color:var(--err);
  min-height:16px}
input.invalid,textarea.invalid{border-color:var(--err)}
form button{font-family:var(--body);font-weight:600;font-size:15.5px;
  background:var(--blue);color:#000;border:0;padding:15px 32px;
  border-radius:4px;cursor:pointer;justify-self:start}
form button:hover{background:#5cbdfd}
form button:disabled{opacity:.6;cursor:not-allowed}
.status-ok,.status-err{padding:20px 22px;border:1px solid var(--edge);
  border-left:3px solid var(--blue);border-radius:8px;background:var(--slate-hi)}
.status-err{border-left-color:var(--err)}
/* minimal "received" pulse — the quote form is on the homepage; there
   is no separate form on /contact to attach this to, so it lives here */
@media(prefers-reduced-motion:no-preference){
  .status-ok.pulse-in{animation:status-pulse .6s ease-out}
  @keyframes status-pulse{
    0%{box-shadow:0 0 0 0 var(--blue-dim);border-left-color:var(--blue)}
    100%{box-shadow:0 0 0 14px rgba(56,174,253,0);border-left-color:var(--blue)}
  }
}
.status-ok p,.status-err p{color:var(--text);font-size:15px;line-height:1.6}
.status-ok a,.status-err a{color:var(--blue)}
.status-err .btn{margin-top:16px}
.aside h3{font-size:15px;letter-spacing:.08em;margin-bottom:12px;
  color:var(--mute)}
.aside .big{font-family:var(--display);font-size:clamp(24px,3.6vw,32px);
  color:var(--heading);text-decoration:none;display:inline-block;
  letter-spacing:.02em}
.aside .big:hover{color:var(--blue)}
.aside .em{font-weight:500;font-size:16px;color:var(--heading);
  text-decoration:none;word-break:break-word}
.aside .em:hover{color:var(--blue)}
.aside p{color:var(--mute);font-size:14px;margin:10px 0 34px;max-width:34ch}

/* footer — blue-deep-to-void gradient echoes the hero; same one-line
   swap point once the mountain photo is ready */
.foot{position:relative;border-top:1px solid var(--edge);padding:56px 0 32px;
  background-image:
    linear-gradient(0deg, var(--void) 0%, rgba(5,6,7,.85) 55%, rgba(5,6,7,.4) 100%),
    linear-gradient(315deg, var(--blue-deep) 0%, var(--void) 55%);
  background-size:100% 100%, cover;
  background-position:top, bottom left}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:36px}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;gap:32px}}
.foot h4{margin:0 0 14px;font-size:12px;font-weight:600;color:var(--mute);
  letter-spacing:.09em}
.foot li{margin-bottom:9px;font-size:14px}
.foot a{color:var(--text);text-decoration:none}
.foot a:hover{color:var(--blue)}
.foot .about{color:var(--mute);font-size:14px;max-width:34ch;margin-top:14px}
.foot-btm{margin-top:44px;padding-top:22px;border-top:1px solid var(--edge);
  display:flex;flex-wrap:wrap;gap:10px 24px;font-size:12.5px;color:var(--mute)}

/* sticky call bar — phone always in reach on mobile */
.callbar{display:none}
@media(max-width:880px){
  .callbar{display:grid;grid-template-columns:1fr auto;gap:10px;
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
    background:rgba(5,6,7,.94);backdrop-filter:saturate(160%) blur(12px);
    border-top:1px solid var(--edge)}
  .callbar a{display:flex;align-items:center;justify-content:center;
    min-height:52px;padding:0 22px;border-radius:4px;text-decoration:none;
    font-weight:600;font-size:16px;letter-spacing:-.005em}
  .callbar .c{background:var(--blue);color:#000}
  .callbar .q{border:1px solid var(--edge);color:var(--heading)}
  body{padding-bottom:calc(86px + env(safe-area-inset-bottom))}

  /* 44px minimum on every contact link */
  .foot li{margin-bottom:0}
  .foot li a{display:inline-flex;align-items:center;min-height:44px}
  .aside .big,.aside .em{display:inline-flex;align-items:center;min-height:44px}
}

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

@media(prefers-reduced-motion:no-preference){
  .rise{opacity:0;transform:translateY(14px);
    animation:rise .7s cubic-bezier(.22,.68,.28,1) forwards}
  .d1{animation-delay:.04s}.d2{animation-delay:.15s}
  .d3{animation-delay:.26s}.d4{animation-delay:.37s}
  @keyframes rise{to{opacity:1;transform:none}}
}

/* ============================================================
   STAGE 3 — TERRAIN AND PHYSICAL TEXTURE
   ============================================================ */

/* hero terrain — three serrated-ridge layers standing in for the
   real Arizona mountain photo (Superstitions-style jagged profile,
   not a smooth alpine curve). MOUNTAIN PHOTO: this whole .hero-terrain
   block can be swapped for a single <img> or background-image once
   the photo is ready — see CLAUDE.md for the required contrast
   re-check before doing that. */
.hero{position:relative;overflow:hidden}
.hero > *{position:relative;z-index:1}
.hero-terrain{position:absolute;left:0;right:0;bottom:0;
  height:clamp(180px,45vh,440px);pointer-events:none;z-index:0;overflow:hidden}
.hero-terrain svg{position:absolute;left:0;bottom:0;width:100%;height:100%;display:block}
.hero-terrain .ridge-back{fill:var(--slate-hi);opacity:.5}
.hero-terrain .ridge-mid{fill:var(--slate);opacity:.75}
.hero-terrain .ridge-front{fill:var(--blue-deep);opacity:.32}
.hero-terrain .signal-line{fill:none;stroke:var(--blue);stroke-width:2;
  stroke-dasharray:1800;stroke-dashoffset:1800;
  transition:stroke-dashoffset 1.8s ease-out}
.hero-terrain .signal-dot{fill:var(--blue);opacity:0;
  transition:opacity .6s ease-out .9s;filter:drop-shadow(0 0 6px var(--blue))}
.hero-terrain.in-view .signal-line{stroke-dashoffset:0}
.hero-terrain.in-view .signal-dot{opacity:1}
@media(prefers-reduced-motion:reduce){
  .hero-terrain .signal-line{stroke-dashoffset:0;transition:none}
  .hero-terrain .signal-dot{opacity:1;transition:none}
}
@media(prefers-reduced-motion:no-preference){
  .hero-terrain [data-depth]{will-change:transform}
}

/* section divider ridgelines — thin, low-opacity, varied per instance */
.ridge-divider{height:clamp(64px,9vw,104px);overflow:hidden;line-height:0;
  pointer-events:none}
.ridge-divider svg{width:100%;height:100%;display:block}
.ridge-divider path{fill:var(--slate-hi);opacity:.4}

/* footer terrain — larger and darker than the section dividers, plus
   the rising blue line that draws in once scrolled into view */
.foot{position:relative;overflow:hidden}
.foot > *{position:relative;z-index:1}
.foot-terrain{position:absolute;left:0;right:0;bottom:0;height:clamp(140px,22vw,220px);
  pointer-events:none;z-index:0;overflow:hidden}
.foot-terrain svg{position:absolute;left:0;bottom:0;width:100%;height:100%;display:block}
.foot-terrain .ridge-back{fill:var(--slate-hi);opacity:.55}
.foot-terrain .ridge-front{fill:var(--slate);opacity:.8}
.foot-terrain .rise-line{fill:none;stroke:var(--blue);stroke-width:2;
  stroke-dasharray:1500;stroke-dashoffset:1500;transition:stroke-dashoffset 1.8s ease-out}
.foot-terrain .rise-dot{fill:var(--blue);opacity:0;transition:opacity .6s ease-out .9s;
  filter:drop-shadow(0 0 6px var(--blue))}
.foot-terrain.in-view .rise-line{stroke-dashoffset:0}
.foot-terrain.in-view .rise-dot{opacity:1}
@media(prefers-reduced-motion:reduce){
  .foot-terrain .rise-line{stroke-dashoffset:0;transition:none}
  .foot-terrain .rise-dot{opacity:1;transition:none}
}

/* card backdrop terrain — feature cards only, barely visible */
.card-terrain{position:absolute;right:0;bottom:0;width:48%;max-width:260px;height:96px;
  opacity:.16;pointer-events:none;overflow:hidden}
.card-terrain svg{width:100%;height:100%;display:block}
.card-terrain path{fill:var(--slate-hi)}

/* blueprint grid — for the automations section (Stage 4). Fine 1px
   lines at 40px pitch, heavier lines every 200px. */
/* top-edge accent — every card surface gets this 2px fade-out bar,
   the cheap detail that lifts a card off the page */
.row:before,.bundle:before,.job:before,.step:before{
  content:"";position:absolute;top:0;left:0;width:60%;height:2px;
  background:linear-gradient(90deg,var(--blue),transparent)}

/* ambient — card borders brighten on hover, restrained (border-color
   only, no glow/scale/shadow, respects reduced-motion by not needing it) */
.row,.bundle,.job,.step,.found .card,.testimonial,.qgrid{
  transition:border-color .25s ease}
.row:hover,.bundle:hover,.job:hover,.step:hover,.found .card:hover,
.testimonial:hover,.qgrid:hover{border-color:var(--blue)}

.blueprint-grid{background-color:var(--void);
  background-image:
    repeating-linear-gradient(0deg, rgba(56,174,253,.06) 0, rgba(56,174,253,.06) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(90deg, rgba(56,174,253,.06) 0, rgba(56,174,253,.06) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(0deg, rgba(56,174,253,.12) 0, rgba(56,174,253,.12) 1px, transparent 1px, transparent 200px),
    repeating-linear-gradient(90deg, rgba(56,174,253,.12) 0, rgba(56,174,253,.12) 1px, transparent 1px, transparent 200px)}

/* brushed steel — card-surface variant, lighter than the body texture */
.brushed{background-image:repeating-linear-gradient(90deg,
    rgba(255,255,255,.02) 0,rgba(255,255,255,.02) 1px,
    transparent 1px,transparent 3px)}

/* concrete grain, retuned dark — a few large soft radials, barely
   perceptible, layered onto the body's existing brushed-steel texture */
body{background-image:
    radial-gradient(circle at 18% 24%, rgba(255,255,255,.015) 0, transparent 46%),
    radial-gradient(circle at 82% 68%, rgba(255,255,255,.015) 0, transparent 50%),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.04) 0,rgba(255,255,255,.04) 1px,
      transparent 1px,transparent 3px);
  background-size:900px 900px, 1000px 1000px, auto}

/* rebar / structural rule — replaces a plain divider with a thin
   double line: --edge, then a 30%-opacity blue line offset 2px below */
.hr{border-top:1px solid var(--edge);box-shadow:0 2px 0 0 rgba(56,174,253,.3)}

/* elevation contour lines — About page background, concentric
   topographic rings in --edge at low opacity */
.contour-bg{background-color:var(--void);
  background-image:
    radial-gradient(ellipse 900px 560px at 28% 18%, transparent 34%, rgba(27,58,78,.55) 34.5%, rgba(27,58,78,.55) 35%, transparent 35.5%),
    radial-gradient(ellipse 900px 560px at 28% 18%, transparent 44%, rgba(27,58,78,.45) 44.5%, rgba(27,58,78,.45) 45%, transparent 45.5%),
    radial-gradient(ellipse 900px 560px at 28% 18%, transparent 54%, rgba(27,58,78,.38) 54.5%, rgba(27,58,78,.38) 55%, transparent 55.5%),
    radial-gradient(ellipse 900px 560px at 28% 18%, transparent 64%, rgba(27,58,78,.30) 64.5%, rgba(27,58,78,.30) 65%, transparent 65.5%)}

/* ============================================================
   STAGE 4a — THE LEAD MACHINE (homepage centerpiece)
   Fixed pixel layout on a blueprint grid; orthogonal (right-angle)
   connectors only, no diagonals - keeps the geometry exact without
   rotation math. Below 700px it becomes a plain vertical stack
   instead of trying to scale the branching diagram down.
   ============================================================ */
.machine-wrap{padding-top:16px}
.lead-machine{position:relative;width:100%;max-width:680px;height:580px;
  margin:48px auto 0}
.machine-node{position:absolute;transform:translate(-50%,-50%);
  background:var(--slate);border:1px solid var(--edge);border-radius:8px;
  padding:11px 18px;font-size:13.5px;font-weight:600;color:var(--mist);
  white-space:nowrap;text-align:center;opacity:0;
  transition:opacity .5s ease var(--d,0s),color .4s ease var(--d,0s),
    border-color .4s ease var(--d,0s),background-color .4s ease var(--d,0s)}
.machine-node.emphasis{border-color:var(--blue)}
.lead-machine.in-view .machine-node{opacity:1;color:var(--white);
  background:var(--slate-hi)}
.lead-machine.in-view .machine-node.emphasis{border-color:var(--blue)}
.machine-line{position:absolute;background:var(--edge);transform-origin:0 0;
  transition:transform .5s ease var(--d,0s);z-index:0}
.machine-line.h{height:2px;transform:scaleX(0)}
.machine-line.v{width:2px;transform:scaleY(0)}
.lead-machine.in-view .machine-line{background:var(--blue)}
.lead-machine.in-view .machine-line.h{transform:scaleX(1)}
.lead-machine.in-view .machine-line.v{transform:scaleY(1)}
.machine-pulse{position:absolute;width:8px;height:8px;margin:-4px;
  border-radius:50%;background:var(--blue);box-shadow:0 0 6px var(--blue);
  opacity:0;animation:machine-travel 2.6s linear infinite;
  animation-play-state:paused}
.machine-line.h .machine-pulse{top:50%;left:0%}
.machine-line.v .machine-pulse{left:50%;top:0%}
.lead-machine.in-view .machine-pulse{animation-play-state:running}
@keyframes machine-travel{
  0%{opacity:0}
  6%{opacity:1}
  94%{opacity:1}
  100%{opacity:0}
}
.machine-line.h .machine-pulse{animation-name:machine-travel-h}
.machine-line.v .machine-pulse{animation-name:machine-travel-v}
@keyframes machine-travel-h{
  0%{left:0%;opacity:0} 6%{opacity:1} 94%{opacity:1} 100%{left:100%;opacity:0}
}
@keyframes machine-travel-v{
  0%{top:0%;opacity:0} 6%{opacity:1} 94%{opacity:1} 100%{top:100%;opacity:0}
}
@media(max-width:780px){
  .lead-machine{height:auto;max-width:360px}
  .lead-machine .machine-line{display:none}
  .lead-machine .machine-node{position:static;transform:none;
    display:block;width:100%;margin:0 0 14px;opacity:1;
    color:var(--white);background:var(--slate-hi);transition:none}
  .lead-machine .machine-node.emphasis{border-color:var(--blue)}
}
@media(prefers-reduced-motion:reduce){
  .machine-node{opacity:1;color:var(--white);background:var(--slate-hi);
    transition:none}
  .machine-line.h{transform:scaleX(1)}
  .machine-line.v{transform:scaleY(1)}
  .machine-line{background:var(--blue);transition:none}
  .machine-pulse{display:none}
}

/* ============================================================
   STAGE 4b — THE DIG (services page, local SEO section)
   Articulated excavator was tried and didn't read; stripped down to
   a single blade + blue cut-line, both driven by one --dig-y custom
   property (a plain px offset, no rotation) set from scroll progress.
   The five ground layers below are the actual point and are unchanged.
   ============================================================ */
.dig-wrap{position:relative;height:250vh;margin-top:32px}
.dig-sticky{position:sticky;top:90px;background:var(--slate);
  border:1px solid var(--edge);border-radius:var(--radius);
  overflow:hidden;padding:clamp(20px,3vw,32px)}
.dig-sticky svg{width:100%;height:auto;display:block;overflow:visible}
.dig-layer{opacity:.18;transition:opacity .5s ease}
.dig-layer.revealed{opacity:1}
.dig-layer text{font-family:var(--display);font-size:13px;
  letter-spacing:.08em;fill:var(--faint);transition:fill .5s ease}
.dig-layer.revealed text{fill:var(--white)}
.dig-layer .tick{fill:var(--edge);transition:fill .5s ease}
.dig-layer.revealed .tick{fill:var(--blue)}
.dig-blade{transform:translate(250px,var(--dig-y,220px))}
.dig-cutline{transform:translateY(var(--dig-y,220px))}
@media(max-width:700px){
  .dig-wrap{height:auto}
  .dig-sticky{position:static}
}
@media(prefers-reduced-motion:reduce){
  .dig-wrap{height:auto}
  .dig-sticky{position:static}
  .dig-layer{opacity:1}
  .dig-layer text{fill:var(--white)}
  .dig-layer .tick{fill:var(--blue)}
}

/* Speed to Lead — call/missed/text sequence, reveal-on-scroll-into-view
   (same mechanism as the lead machine and footer terrain) */
.s2l-flow{grid-column:1;margin-top:20px;display:flex;flex-wrap:wrap;
  gap:10px 26px;align-items:center}
.s2l-step{display:flex;align-items:center;gap:8px;font-size:13px;
  color:var(--mute);opacity:0;transform:translateY(8px);
  transition:opacity .5s ease var(--d,0s),transform .5s ease var(--d,0s)}
.s2l-flow.in-view .s2l-step{opacity:1;transform:none}
.s2l-bubble{transform:translateX(-14px)}
.s2l-flow.in-view .s2l-bubble{transform:none}
@media(prefers-reduced-motion:reduce){
  .s2l-step,.s2l-bubble{opacity:1;transform:none;transition:none}
}