/* 1DOT manufacturing lander - desktop geometry rebuilt to real page scale.
   Composition, colours and class names are unchanged from the V1 match;
   the artboard-sized fixed heights and 6-10px type have been replaced with
   a real type scale and flow-based section rhythm. */

:root{
  --green:#85d246;
  --green2:#5cbb31;
  --navy:#071522;
  --ink:#0e1b2c;
  --muted:#5c6878;
  --line:#e5e9ee;
  --purple:#7953c6;
  --orange:#c76a00;
  --red:#ef3939;
  --shell:1320px;
  --gutter:40px;
}

*{box-sizing:border-box}
:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:4px}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:#fff;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}

.shell{width:min(100% - (var(--gutter) * 2),var(--shell));margin:0 auto}

/* ---------- header ---------- */
.site-header{position:absolute;z-index:10;left:0;right:0;top:0;color:#fff}
.nav{height:88px;display:flex;align-items:center}
.brand{display:inline-flex;align-items:center;min-height:44px}
.brand img{width:132px;display:block}
.nav nav{margin-left:auto;display:flex;gap:34px;align-items:center}
.nav nav a{color:#fff;text-decoration:none;font-size:15px;font-weight:500;opacity:.92;display:inline-flex;align-items:center;min-height:44px;padding:0 6px}
.nav nav a:hover{opacity:1;color:var(--green)}
.nav nav span{font-size:12px;opacity:.7}
.outline{
  margin-left:36px;height:48px;padding:0 22px;
  border:1px solid rgba(133,210,70,.6);border-radius:8px;
  background:transparent;color:var(--green);
  font-family:inherit;font-weight:700;font-size:15px;cursor:pointer;
  transition:background .18s ease,border-color .18s ease;
}
.outline:hover{background:rgba(133,210,70,.12);border-color:var(--green)}

/* ---------- hero ---------- */
/* Exactly one viewport. svh first so mobile browser chrome cannot push the
   fold, with vh as the fallback for engines without svh. */
.hero{
  position:relative;overflow:hidden;background:var(--navy);color:#fff;
  min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
}
/* The shipped cnc-hero.jpg carried a baked-in white card fragment down its
   left edge (it was a crop of the mockup, not clean photography). The asset
   in this folder has had those 148 columns removed: 900x1400 -> 752x1400. */
/* The photo is portrait (752x1400). Full-bleeding it across a wide hero
   would show a ~30% horizontal slice of blurred background, so it sits as a
   right-hand band at roughly the reference's visual weight, with the navy
   gradient feathering its left edge into the copy column. */
.photo{
  position:absolute;top:0;bottom:0;right:0;left:auto;width:62%;
  background:url("assets/cnc-hero.jpg") 50% 52%/cover no-repeat;
  /* feather the left edge so the band dissolves into the navy instead of
     starting on a hard vertical seam */
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.28) 16%,rgba(0,0,0,.75) 34%,#000 55%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.28) 16%,rgba(0,0,0,.75) 34%,#000 55%);
}
.hero:before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,
    rgba(7,21,34,.92) 0%,
    rgba(7,21,34,.80) 45%,
    rgba(7,21,34,.52) 68%,
    rgba(7,21,34,.34) 88%,
    rgba(7,21,34,.30) 100%);
}
/* Height is budgeted so the AI platform strip below still clears a 900px
   laptop viewport. The demonstration card sets the hero's height now, so
   min-height is a floor rather than the driver. */
.hero-inner{
  position:relative;z-index:2;
  flex:1;
  display:grid;grid-template-columns:1.12fr 1fr;
  gap:56px;align-items:center;
  padding:104px 0 40px;
}
.hero-copy{width:auto}
.hero h1{
  font-size:clamp(46px,5.15vw,74px);
  line-height:1.03;
  letter-spacing:-.028em;
  margin:0 0 22px;
  font-weight:800;
}
.hero h1 em,.discover h2 em,.final h2 em{font-style:normal;color:var(--green)}
.hero-copy>p{font-size:17.5px;line-height:1.52;margin:0 0 12px;color:#e7eef4;max-width:34em}
.micro{display:flex;flex-wrap:wrap;gap:14px 30px;margin:26px 0 28px}
.micro div{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700}
.micro img{width:24px;height:24px}
.primary{
  border:0;
  background:linear-gradient(135deg,var(--green2),var(--green));
  color:#fff;border-radius:8px;font-family:inherit;font-weight:800;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 12px 30px rgba(92,187,49,.22);
  transition:transform .18s ease,box-shadow .18s ease;
}
.primary:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(92,187,49,.3)}
.hero-btn{width:auto;min-width:300px;height:58px;font-size:17px;padding:0 30px}
.hero-copy>small{display:block;margin-top:14px;font-size:13px;color:#c6d2dc}

/* ---------- AI answer card ----------
   The demonstration is traced from the /audit-manufacturing hero
   (website-rebuild/src/components/mfg/mfg-lander.tsx): prompt bubble, a
   thinking pulse that dims, the answer streaming word by word, the named
   suppliers arriving one at a time, then the absence. Names are the real
   run-1 aerospace answer from mfg-demo-sweep-2026-08-12-raw.json. */
.ai-wrap{width:auto;justify-self:end;max-width:580px;width:100%}
.ai-lead{
  font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--green);margin-bottom:12px;
}
.ai-card{
  width:100%;background:#fff;color:var(--ink);
  border-radius:14px;overflow:hidden;
  box-shadow:0 28px 70px rgba(0,0,0,.36);
}
.ai-head{
  display:flex;align-items:center;gap:9px;
  padding:14px 20px;border-bottom:1px solid var(--line);background:#fbfcfd;
}
.ai-head b{font-size:14px}
.ai-head span{font-size:12.5px;color:var(--muted)}
.ai-dot{width:9px;height:9px;border-radius:999px;background:#35c26b;flex:none}
.ai-body{padding:18px 22px 20px;display:flex;flex-direction:column;gap:11px}
.ai-ask{
  align-self:flex-end;max-width:82%;background:#f2f5fb;
  border-radius:16px 16px 4px 16px;padding:11px 16px;
  font-size:13.5px;line-height:1.45;
}
.ai-think{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--muted)}
.ai-pulse{width:8px;height:8px;border-radius:999px;background:#35c26b;animation:aiPulse 1.1s ease-in-out infinite}
@keyframes aiPulse{0%,100%{opacity:.3}50%{opacity:1}}
.ai-stream{margin:0;font-size:13.5px;line-height:1.55}
/* 2x2 rather than a 1x4 stack: the brief was less vertical, more
   horizontal. The absence row spans both columns so it still reads as the
   punchline rather than a fifth peer. */
.ai-list{margin:10px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ai-list li{
  display:flex;align-items:baseline;gap:9px;
  font-size:13.5px;font-weight:600;line-height:1.35;
  background:#f2f5fb;border-radius:10px;padding:10px 13px;
}
.ai-list li>span{font-size:12.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.ai-list li.miss{
  grid-column:1/-1;
  font-weight:700;color:#d63b40;background:rgba(255,90,95,.05);
  border:1.5px dashed #ff5a5f;
}
.ai-list li.miss>span{color:#d63b40}
.ai-foot{padding:12px 20px;border-top:1px solid var(--line);font-size:12.5px;color:#586472}

/* Caption sits UNDER the card and the arrow curves back up to the absence
   row, so the line explains the thing it points at rather than labelling the
   card from above. */
.ai-note{
  position:relative;display:flex;align-items:flex-end;gap:14px;
  margin:18px 0 0;padding-left:6px;color:var(--green);
}
.ai-arrow{width:104px;height:74px;flex:none;margin-bottom:-4px}
.ai-note span{
  font-size:19px;font-weight:800;font-style:italic;line-height:1.25;
  letter-spacing:-.01em;padding-bottom:10px;
}

/* Motion is armed by JS so a no-JS render never looks stuck mid-load. */
.ai-armed .aw{opacity:0}
.ai-armed.ai-live .aw{animation:aiIn 340ms ease forwards}
@keyframes aiIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.ai-armed.ai-live .ai-think{animation:aiThinkOut .5s ease 1.4s forwards}
@keyframes aiThinkOut{to{opacity:.4}}

/* ---------- AI platform strip (below the hero CTA, above the fold) ---------- */
/* Lives under the audit list now, on white, so it reads as part of the
   deliverable rather than hero furniture. */
.ai-strip{
  position:relative;z-index:2;width:auto;margin:56px 0 0;
  padding:30px 0 0;border-top:1px solid var(--line);
}
/* A statement, not an eyebrow: the line and the logos are one sentence. */
.ai-strip-label{
  display:block;font-size:23px;font-weight:800;letter-spacing:-.02em;
  color:var(--ink);margin-bottom:24px;
}
.ai-strip-row{display:flex;align-items:center;justify-content:space-between;gap:18px 34px;flex-wrap:wrap}
.ai-chip{display:inline-flex;align-items:center;gap:10px}
.ai-chip svg{width:24px;height:24px;fill:#4a5765;flex:none;opacity:.8}
.ai-chip b{font-size:15px;font-weight:700;color:#3a4757;letter-spacing:-.005em}

/* ---------- shared section furniture ---------- */
section h2{letter-spacing:-.022em}

/* ---------- discovery strip ---------- */
.discover{height:auto;padding:92px 0 58px;background:#fff}
.discover h2{text-align:center;font-size:clamp(28px,2.7vw,38px);line-height:1.2;margin:0 0 56px}
.four{display:grid;grid-template-columns:repeat(4,1fr)}
.four article{
  height:auto;display:grid;grid-template-columns:56px 1fr;gap:18px;
  padding:6px 32px;border-right:1px solid var(--line);
}
.four article:first-child{padding-left:0}
.four article:last-child{border-right:0;padding-right:0}
.four img{width:46px;height:46px;margin-top:2px}
.four h3{font-size:17px;line-height:1.3;margin:0 0 10px}
.four p{font-size:15px;line-height:1.6;color:#536070;margin:0}

/* ---------- opportunity / stats ---------- */
.opportunity{
  height:auto;padding:62px 0 88px;
  background:linear-gradient(#fbfcfe,#f5f7fa);
  border-top:1px solid var(--line);
}
.opportunity h2{text-align:center;font-size:clamp(28px,2.7vw,38px);margin:0 0 12px}
.lead{text-align:center;font-size:17px;color:var(--muted);margin:0 0 48px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stats article{
  height:auto;min-height:230px;background:#fff;border:1px solid #e2e6eb;
  border-radius:14px;padding:28px 26px 60px;position:relative;
}
.num{font-size:52px;line-height:1;font-weight:800;letter-spacing:-.035em}
.blue{color:#3267c8}
.purple{color:var(--purple)}
.orange{color:var(--orange)}
.stats p{font-size:15px;line-height:1.55;font-weight:600;margin:16px 0 0}
.stats small{position:absolute;left:26px;bottom:20px;font-size:12.5px;color:#5c6875}
.pie{
  position:absolute;right:22px;bottom:20px;width:68px;height:68px;border-radius:50%;
  background:conic-gradient(#3169cd 0 34%,#92b3ee 34% 72%,#e1e8f4 72%);
}
.corner{position:absolute;right:22px;bottom:20px;width:58px;height:58px;opacity:.55}
.example{border-color:#cbb9ed!important}
.example-label{font-size:15px;font-weight:700;color:#6b46b8;margin:0 0 14px}
.example ol{font-size:15px;line-height:1.9;margin:0;padding-left:22px;color:#3a4757}
.fail{
  position:absolute;left:26px;right:26px;bottom:18px;
  border-top:1px solid #e2e6eb;padding-top:14px;color:#cf2b2b;font-size:14px;font-weight:700;
}
.fail span{display:block;margin-left:22px;font-weight:600;color:#b52626}

/* The example answer plays as a loop: the three competitors arrive in turn,
   then "Your Company - Not mentioned" pulses. One shared 7s cycle, so the
   fixed per-item delays hold a constant phase against each other. */
@keyframes aiItemIn{
  0%,3%{opacity:0;transform:translateY(7px)}
  9%,100%{opacity:1;transform:none}
}
@keyframes aiFailPulse{
  0%,30%{opacity:0}
  35%{opacity:1}
  44%{opacity:.22}
  53%{opacity:1}
  62%{opacity:.22}
  71%{opacity:1}
  80%{opacity:.22}
  89%,100%{opacity:1}
}
.example ol li{opacity:0;animation:aiItemIn 7s ease-out infinite}
.example ol li:nth-child(1){animation-delay:0s}
.example ol li:nth-child(2){animation-delay:.6s}
.example ol li:nth-child(3){animation-delay:1.2s}
.fail{opacity:0;animation:aiFailPulse 7s ease-in-out infinite}

@media(prefers-reduced-motion:reduce){
  .example ol li,.fail{animation:none;opacity:1;transform:none}
}

/* ---------- audit split ---------- */
.audit{height:auto;padding:96px 0;background:#fff}
.audit-grid{height:auto;display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:center}
.audit-list h2{font-size:clamp(28px,2.6vw,38px);line-height:1.15;margin:0 0 28px}
.audit-list ul{list-style:none;padding:0;margin:0}
.audit-list li{position:relative;padding-left:36px;font-size:16px;line-height:1.55;margin:16px 0;color:#3a4757}
.audit-list li:before{
  content:"✓";position:absolute;left:0;top:3px;
  width:22px;height:22px;border-radius:50%;background:#79ca44;color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:800;
}
/* Icon sits on top and everything centres on one axis. Previously the icon
   held a 64px left column, so the card's optical centre sat right of the
   card's actual centre and the whole block read off-balance. */
.audit aside{
  height:auto;border:1px solid #dbe7d4;border-radius:16px;
  background:linear-gradient(135deg,#f5fced,#fff);
  padding:44px 40px 38px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  box-shadow:0 16px 44px rgba(16,44,29,.07);
}
.audit aside>img{width:56px;height:56px;margin-bottom:22px}
.audit aside h3{font-size:27px;line-height:1.12;margin:0 0 14px}
.audit aside p{font-size:15px;line-height:1.6;margin:0;color:#536070;max-width:34em}
.audit aside .primary{width:100%;max-width:340px;height:56px;font-size:17px;margin-top:28px}
.audit aside>small{font-size:13px;color:var(--muted);margin-top:14px}

/* ---------- why / proof ---------- */
.why{height:auto;padding:88px 0;background:#fff;border-top:1px solid var(--line)}
.why .shell{
  position:static;height:auto;
  display:grid;grid-template-columns:1.3fr .7fr;
  column-gap:60px;row-gap:44px;align-items:start;
}
.why h2{grid-column:1/-1;font-size:clamp(26px,2.5vw,34px);margin:0}
/* 2x2 rather than 4-across: at real type sizes four columns inside the left
   two-thirds leaves ~136px of text width and every heading wraps badly. */
.why-grid{
  grid-column:1;display:grid;grid-template-columns:repeat(2,1fr);
  height:auto;width:auto;column-gap:0;row-gap:34px;
}
.why-grid article{padding:0 32px;border-right:1px solid var(--line)}
.why-grid article:nth-child(odd){padding-left:0}
.why-grid article:nth-child(even){border-right:0;padding-right:0}
.why-grid img{width:44px;height:44px}
.why-grid h3{font-size:16px;line-height:1.3;margin:16px 0 10px}
.why-grid p{font-size:14px;line-height:1.6;color:#536070;margin:0}
.testimonial{
  position:static;grid-column:2;grid-row:2;
  width:auto;height:auto;margin:0;
  border:1px solid var(--line);border-radius:14px;
  padding:30px 28px 26px;background:#fff;
  box-shadow:0 12px 34px rgba(0,0,0,.05);
}
.testimonial>span{position:static;display:block;color:#69c837;font-size:46px;line-height:.7;margin-bottom:14px}
.testimonial p{font-size:15px;line-height:1.6;margin:0 0 22px}
.testimonial footer{display:block}
.testimonial footer b{display:block;font-size:15px;line-height:1.25}
.testimonial footer small{display:block;font-size:13px;line-height:1.4;color:var(--muted);margin-top:4px}
.logos{
  position:static;grid-column:1/-1;height:auto;top:auto;
  border-top:1px solid var(--line);padding-top:26px;
}
.logos>small{font-size:13px;color:#5c6875}
/* Real client logos. Source files are wordmarks of very different ratios
   (1.75 to 5.37), so they are normalised on HEIGHT, never stretched, and
   desaturated so no single brand's colour dominates the row. */
/* space-between let wide wordmarks butt into each other at some widths;
   an auto-fit grid gives every logo its own cell with a guaranteed gutter. */
.logo-row{
  width:100%;margin-top:24px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  align-items:center;gap:28px 36px;justify-items:center;
}
.logo-row img{
  height:30px;width:auto;flex:none;
  filter:grayscale(1);opacity:.62;
  transition:filter .2s ease,opacity .2s ease;
}
.logo-row img:hover{filter:grayscale(0);opacity:1}
.logo-row img[alt="Imperial Construction Services"]{height:38px}
/* FTL's artwork sets a tall chevron mark against a small wordmark, so
   matching it on box height leaves the words half the size of the rest of
   the row. Sized up to match cap-height, not box height. */
.logo-row img[alt="Friction Technology"]{height:48px}

/* ---------- FAQ ---------- */
.faq{height:auto;padding:84px 0;background:#fafbfd}
.faq h2{font-size:clamp(26px,2.4vw,32px);margin:0 0 40px}
.faq-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.faq-grid article{padding:26px 30px 6px;border-right:1px solid var(--line)}
.faq-grid article:first-child{padding-left:0}
.faq-grid article:last-child{border-right:0;padding-right:0}
.faq-grid h3{font-size:16px;line-height:1.35;margin:0 0 12px}
.faq-grid p{font-size:14px;line-height:1.65;color:#536070;margin:0}

/* ---------- final CTA ---------- */
.final{height:auto;padding:76px 0;background:#061523;color:#fff}
.final-grid{
  height:auto;display:grid;grid-template-columns:1.1fr 1.5fr .95fr;
  gap:48px;align-items:center;
}
.final h2{font-size:clamp(26px,2.7vw,38px);line-height:1.1;margin:0}
.steps{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:16px;align-items:center}
.steps div{text-align:center}
.steps img{width:46px;height:46px}
.steps small{display:block;font-size:13px;line-height:1.4;margin-top:12px;color:#cfd8e0}
.steps>b{font-size:22px;color:#8c9aa6}
.final .primary{height:60px;font-size:17px;padding:0 26px;width:100%}

/* ---------- modal (unchanged behaviour, scaled to match) ---------- */
.modal{position:fixed;z-index:100;inset:0;display:none;align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.shade{position:absolute;inset:0;background:rgba(1,8,15,.78);backdrop-filter:blur(8px)}
.panel{position:relative;z-index:2;width:min(760px,100%);max-height:92vh;overflow-y:auto;background:#fff;border-radius:18px;box-shadow:0 30px 90px rgba(0,0,0,.45)}
.x{position:absolute;right:16px;top:15px;width:40px;height:40px;border:0;border-radius:50%;background:#eef2f5;font-size:26px;cursor:pointer}
.panel>header{padding:30px 36px 20px;background:var(--navy);color:#fff}
.panel>header small{font-size:12px;color:#aab8c5}
.panel>header h2{font-size:28px;margin:6px 0 18px}
.progress{height:5px;background:#253946;border-radius:6px;overflow:hidden}
.progress i{display:block;width:33.333%;height:100%;background:var(--green);transition:width .25s ease}
.form-step{display:none;padding:32px 36px 36px}
.form-step.active{display:block}
.form-step h3{font-size:23px;line-height:1.25;margin:0 0 8px}
.form-step>p{font-size:14px;color:#5d6977;margin:0}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.choices input{position:absolute;opacity:0}
.choices span{display:flex;align-items:center;gap:12px;border:1px solid #dbe1e7;border-radius:10px;padding:15px 16px;font-size:15px;font-weight:700;line-height:1.3;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.choices span img{width:30px;height:30px;flex:none}
.choices span:hover{border-color:#b9c6d1}
.choices input:checked+span{border-color:var(--green2);background:#f3fbea}
.field{display:block;margin:18px 0}
.field>span{display:block;font-size:14px;font-weight:700;margin-bottom:7px}
.field input{width:100%;padding:15px;border:1px solid #d8dfe6;border-radius:10px;font:inherit;font-size:15px}
.field input:focus{outline:2px solid var(--green2);outline-offset:1px;border-color:transparent}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.actions{display:flex;justify-content:space-between;align-items:center;margin-top:26px}
.actions .primary{height:52px;padding:0 24px;font-size:16px}
.back{border:0;background:none;color:#64717f;font-family:inherit;font-weight:700;font-size:15px;cursor:pointer}
.cal{min-height:520px;border-radius:12px;overflow:hidden;position:relative}
.cal-skeleton{
  position:absolute;inset:0;display:grid;place-items:center;gap:14px;
  align-content:center;background:#fff;color:var(--muted);font-size:14px;font-weight:600;
}
.cal-skeleton i{
  width:26px;height:26px;border-radius:50%;
  border:3px solid #e3e8ee;border-top-color:var(--green2);
  animation:calSpin .8s linear infinite;
}
@keyframes calSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.cal-skeleton i{animation-duration:2.4s}}
.cal iframe{width:100%;border:0}
/* An error has to be visible ON the control, not only as a line of text
   under it. The field turns red and the message sits directly beneath. */
.field-error{
  margin:10px 0 0;font-size:14px;font-weight:600;color:#c62828;
  display:none;align-items:flex-start;gap:8px;line-height:1.45;
}
.field-error.show{display:flex}
.field-error:before{
  content:"!";flex:none;width:19px;height:19px;margin-top:1px;border-radius:50%;
  background:#c62828;color:#fff;display:grid;place-items:center;
  font-size:12px;font-weight:800;
}
.field input[aria-invalid="true"]{
  border-color:#c62828;background:#fff6f6;
  box-shadow:0 0 0 3px rgba(198,40,40,.13);
}
.field input[aria-invalid="true"]:focus{outline-color:#c62828}
.cal iframe{width:100%;height:620px;border:0}

/* ---------- laptop ---------- */
@media(max-width:1180px){
  :root{--gutter:32px}
  .hero-inner{min-height:680px;padding:130px 0 80px;gap:44px}
  .four article,.why-grid article,.faq-grid article{padding-left:20px;padding-right:20px}
  .why .shell{grid-template-columns:1fr;row-gap:40px}
  .why-grid{grid-column:1/-1;grid-template-columns:repeat(4,1fr)}
  .testimonial{grid-column:1/-1;grid-row:auto;max-width:640px}
}

/* ---------- tablet ---------- */
@media(max-width:900px){
  :root{--gutter:24px}
  .nav nav{display:none}
  .nav{height:78px}
  .hero-inner{grid-template-columns:1fr;min-height:0;padding:112px 0 64px;gap:40px}
  .ai-wrap{justify-self:stretch;max-width:none}
  
  .photo{opacity:.5}
  .hero:before{background:linear-gradient(180deg,rgba(7,21,34,.96) 0%,rgba(7,21,34,.9) 60%,rgba(7,21,34,.97) 100%)}
  .four,.stats,.why-grid,.faq-grid{grid-template-columns:repeat(2,1fr)}
  .four article,.why-grid article,.faq-grid article{border-right:0;padding:0 0 28px 0}
  .four article:nth-child(odd),.why-grid article:nth-child(odd),.faq-grid article:nth-child(odd){padding-right:20px}
  .audit-grid,.final-grid{grid-template-columns:1fr;gap:40px}
  .steps{grid-template-columns:1fr auto 1fr auto 1fr}
}

/* ---------- phone ---------- */
@media(max-width:640px){
  :root{--gutter:20px}
  /* 149px cells cannot hold "Aerotech Precision Manufacturing"; stack them */
  .ai-list{grid-template-columns:1fr}
  .ai-note{gap:10px}
  .ai-arrow{width:76px;height:56px}
  .ai-note span{font-size:17px}
  .ai-strip-row{justify-content:flex-start;gap:16px 26px}
  .hero h1{font-size:38px}
  .hero-copy>p{font-size:16px}
  .hero-btn{width:100%;min-width:0}
  .four,.stats,.why-grid,.faq-grid{grid-template-columns:1fr}
  .four article,.why-grid article,.faq-grid article{padding:0 0 26px 0}
  .stats article{min-height:0;padding-bottom:56px}
  .logo-row{justify-content:flex-start;gap:20px}
  .steps{grid-template-columns:1fr}
  .steps>b{transform:rotate(90deg);justify-self:center}
  .choices,.twocol{grid-template-columns:1fr}
  .form-step,.panel>header{padding-left:22px;padding-right:22px}
}