/* V02 components. Loaded after base.css, before the theme. Section heads the way the client's site sets them, the pass demonstration, portraits, quotes with faces, the system builder, the Scout screen and the Diesel Boss fill. */

/* Logo switch: light logo on dark grounds, colour logo on white (Classic sets it). */
.nav .brand .logo-dark{display:none}
:root{--navh:73px}


/* Section head, centred, no eyebrow. A heading and one line, like the original site. */
.sec-head{text-align:center;max-width:46rem;margin:0 auto var(--s2);display:grid;gap:12px;justify-items:center}
.sec-head h2{font-size:var(--h2-size,clamp(1.9rem,3.4vw,3rem));line-height:1.05;letter-spacing:var(--disp-ls);text-transform:var(--case);font-family:var(--display);font-weight:var(--disp-w)}
.sec-head p{color:var(--mute);font-size:1.02rem;max-width:38em}
.sec-head .rule{width:44px;height:3px;background:var(--accent);border-radius:2px;margin-top:4px}
.sec-head.left{text-align:left;margin-left:0;justify-items:start}
.h2{font-size:var(--h2-size,clamp(1.9rem,3.4vw,3rem))}
.h3{font-size:var(--h3-size,1.25rem)}

/* ---------- Splash hero: the brand splash, wide or tall by orientation, headline over the end frame ---------- */
.splash{position:relative;height:calc(100svh - var(--navh,73px));min-height:520px;overflow:clip;isolation:isolate;background:#050806;display:grid;align-content:end;color:#fff}
.splash video,.splash .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.splash .poster{display:none}
.splash.still video{display:none}.splash.still .poster{display:block}
.splash::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 50%,rgba(5,8,6,.78) 100%);opacity:0;transition:opacity 1.2s}
.splash .over{position:relative;padding-bottom:clamp(36px,6vh,64px);opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.splash.in::after,.splash.still::after{opacity:1}
.splash.in .over,.splash.still .over{opacity:1;transform:none}
.splash .over h1{font-size:clamp(1.9rem,3.4vw,3rem);max-width:26ch;color:#fff;line-height:var(--disp-lh);letter-spacing:var(--disp-ls);text-transform:var(--case);font-family:var(--display);font-weight:var(--disp-w)}
.splash .over .lead{color:rgba(255,255,255,.82);max-width:40em;margin-top:clamp(10px,1.6vw,16px)}
.splash .over .ctas{margin-top:clamp(18px,2.5vw,28px)}
.splash .over .btn-ghost{color:#fff;border-color:rgba(255,255,255,.55);background:rgba(0,0,0,.25);backdrop-filter:blur(6px)}
.splash .replay{position:absolute;right:var(--gutter);bottom:clamp(36px,6vh,64px);display:inline-flex;align-items:center;gap:8px;font:600 .66rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75);opacity:0;transition:opacity .6s}
.splash .replay svg{width:16px;height:16px}
.splash.in .replay{opacity:1}
.splash .replay:hover{color:#fff}
@media (max-width:760px){.splash{min-height:0}.splash .over h1{font-size:clamp(2rem,9vw,3rem)}.splash .over .lead{font-size:.95rem}.splash .replay{display:none}}

/* ---------- Tagline band, quiet ---------- */
.tagline{padding-block:clamp(40px,6vw,80px);text-align:center;border-block:1px solid var(--line)}
.tagline p{font-family:var(--display);font-weight:var(--disp-w);font-size:var(--tag-size,clamp(2rem,5vw,4.4rem));line-height:.95;letter-spacing:var(--disp-ls);text-transform:var(--case);color:var(--fg)}
.tagline p .accent{display:inline}
.tagline small{display:block;margin-top:14px;font:600 .7rem/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--quiet)}

/* ---------- About block: photo + short copy ---------- */
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.about-grid .body p{font-size:1.02rem}
.about-grid .photo{aspect-ratio:4/3}
.points{display:grid;gap:14px;margin-top:22px}
.points li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;font-size:.98rem;color:var(--mute)}
.points li b{color:var(--fg);font-weight:600;display:block}
.points svg{width:22px;height:22px;color:var(--accent);margin-top:2px}

/* ---------- Service cards, four up, modest ---------- */
.services{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.service{display:grid;gap:12px;align-content:start}
.service .photo{aspect-ratio:4/5}
.service h3{font-family:var(--body);font-size:1.05rem;font-weight:600;text-transform:none;letter-spacing:-.01em;line-height:1.25}
.service p{font-size:.9rem;color:var(--mute)}

/* ---------- Portraits: one grid, one ratio, no steps ---------- */
.portraits{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.portraits .photo{aspect-ratio:4/5;border-radius:3px}
.portraits .photo img{filter:saturate(.9)}
.names{margin-top:22px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 24px;font-size:.92rem}
.names li{display:grid;gap:1px;padding:8px 0;border-top:1px solid var(--line)}
.names b{font-weight:600;color:var(--fg)}
.names span{font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--quiet)}
.team-wide{aspect-ratio:3/2;margin-top:6px}

/* ---------- Quotes with faces ---------- */
.quote .who{display:flex;align-items:center;gap:14px}
.quote .who .face{width:52px;height:52px;border-radius:50%;overflow:hidden;flex:none;background:var(--ground-2);border:1px solid var(--line)}
.quote .who .face img{width:100%;height:100%;object-fit:cover}
.quote .who .mono{width:52px;height:52px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);font:700 .95rem/1 var(--body);letter-spacing:.02em}
.quote .who div{display:grid;gap:2px;font-size:.85rem}
.quote .who b{color:var(--fg);font-weight:600}
.quote .who span{color:var(--quiet)}
.quotes.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.quote.lead-quote{grid-column:1/-1}
.quote.lead-quote blockquote{font-size:1.15rem}

/* ---------- Endorsements: dealer and OEM voices as a row ---------- */
.endorse-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px)}

/* ---------- CTA band ---------- */
.cta{padding:clamp(32px,5vw,64px);border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);display:grid;grid-template-columns:minmax(0,1.2fr) auto;gap:28px;align-items:center}
.cta h2{font-size:var(--h2-size,clamp(1.9rem,3.4vw,3rem));font-family:var(--display);font-weight:var(--disp-w);text-transform:var(--case);letter-spacing:var(--disp-ls);line-height:1.05}
.cta p{margin-top:10px;color:var(--mute)}
.cta .ctas{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- System builder ---------- */
.builder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:clamp(20px,3vw,36px)}
.builder fieldset{border:0;padding:0;margin:0 0 20px;display:grid;gap:10px}
.builder legend{font:600 .7rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--quiet);margin-bottom:10px}
.builder .opts{display:flex;flex-wrap:wrap;gap:8px}
.builder .opt{position:relative}
.builder .opt input{position:absolute;opacity:0;inset:0;cursor:pointer}
.builder .opt span{display:inline-block;padding:10px 14px;border:1px solid var(--line-strong);border-radius:var(--btn-radius);font-size:.92rem;color:var(--fg);transition:background .2s,color .2s,border-color .2s}
.builder .opt input:checked+span{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.builder .opt input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.builder .out{display:grid;gap:0;align-content:start;border-left:1px solid var(--line);padding-left:clamp(20px,3vw,40px)}
.builder .out h3{font-family:var(--body);font-size:1.05rem;font-weight:600;text-transform:none;letter-spacing:0;margin-bottom:8px}
.builder .out ol{display:grid;gap:0;counter-reset:part}
.builder .out li{padding:12px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:28px 1fr;gap:10px;font-size:.95rem;align-items:start;counter-increment:part}
.builder .out li::before{content:counter(part,decimal-leading-zero);font:600 .72rem/1.6 var(--mono);color:var(--accent)}
.builder .out li b{display:block;color:var(--fg);font-weight:600}
.builder .out li span{color:var(--mute);font-size:.88rem}
.builder .out .note{margin-top:14px;font-size:.82rem;color:var(--quiet)}
.builder .out .ctas{margin-top:18px}
@media (max-width:760px){.builder{grid-template-columns:1fr}.builder .out{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:20px}}

/* ---------- Product list on the Products page: thumbs + text, same ratio per row ---------- */
.prodlist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.5vw,32px)}
.prodlist .item{display:grid;gap:12px;align-content:start}
.prodlist .photo{aspect-ratio:4/3}
.prodlist h3{font-family:var(--body);font-size:1.05rem;font-weight:600;text-transform:none;letter-spacing:-.01em;line-height:1.25}
.prodlist p{font-size:.9rem;color:var(--mute)}
.prodlist .item.nophoto{padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}

/* ---------- Scout: the cards, as a page ---------- */
.scout-hero{min-height:calc(100svh - 72px);display:grid;place-items:center;text-align:center;padding-block:clamp(48px,8vw,96px)}
.scout-hero .mark{width:clamp(140px,22vw,260px);height:auto;margin:0 auto clamp(28px,4vw,48px)}
.scout-hero .word{width:clamp(200px,32vw,380px);height:auto;margin:0 auto}
.scout-hero p{margin-top:clamp(22px,3vw,36px);color:var(--mute);max-width:34em;font-size:1.05rem}
.scout-hero .ctas{justify-content:center;margin-top:28px}
.scout-copy{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:center}
.scout-copy h2{font-family:var(--body);font-size:clamp(1.8rem,3.4vw,2.8rem);font-weight:600;letter-spacing:-.03em;line-height:1.08;text-transform:none}
.scout-copy h2 .accent{display:block;color:var(--accent)}
.scout-copy .body{margin-top:18px;color:var(--mute)}
.scout-copy .rule{height:1px;background:var(--line);margin:22px 0 14px}
.scout-copy .close{font-size:.9rem;color:var(--fg);font-weight:500}
.scout-copy .companion{display:grid;place-items:center}
.scout-copy .companion img{width:clamp(120px,16vw,200px);opacity:.9}
.slab{background:#E8EAEC;border-radius:10px;padding:clamp(24px,4vw,56px);display:grid;place-items:center;gap:18px}
.slab .shot{filter:drop-shadow(0 30px 40px rgba(0,0,0,.35));max-width:min(100%,720px)}
.slab small{font:600 .66rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:#5B6166}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tiles > div{border:1px solid var(--line);border-radius:8px;padding:22px 20px;background:rgba(255,255,255,.03);display:grid;gap:10px;align-content:start}
.tiles small{font:600 .64rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--quiet)}
.tiles b{font-weight:600;color:var(--fg);font-size:1rem}
.tiles p{font-size:.88rem;color:var(--mute)}
.tiles img{height:72px;width:auto;margin-bottom:4px}
.cta-line{text-align:center;padding-block:clamp(40px,6vw,80px);border-top:1px solid var(--line);font-size:1.05rem;color:var(--mute)}
.cta-line a{color:var(--accent);font-weight:600;text-decoration:none}
.cta-line .ctas{justify-content:center;margin-top:22px}

/* Scout screen: a tap-through concept */
.scout-ui{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.sdev{position:relative;width:min(100%,640px);aspect-ratio:4/3;border-radius:18px;background:#0B0E0C;border:1px solid var(--line-strong);box-shadow:0 50px 90px -40px rgba(0,0,0,.9),inset 0 0 0 12px #141A16;padding:12px;display:grid}
.sdev .scr{border-radius:8px;background:#0F1512;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;font-family:var(--body);color:#E8ECE9}
.sdev .bar{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.08);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#9AA19C}
.sdev .bar img{height:14px;width:auto}
.sdev .bar i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:6px;vertical-align:middle}
.sdev .pane{display:none;padding:16px;align-content:start}
.sdev .pane.on{display:grid;gap:10px;grid-template-rows:auto auto 1fr;min-height:0;overflow:hidden}
.sdev .tabs{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.08)}
.sdev .tabs button{padding:12px 6px;font:600 .66rem/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:#9AA19C;border-right:1px solid rgba(255,255,255,.06)}
.sdev .tabs button:last-child{border-right:0}
.sdev .tabs button[aria-selected="true"]{color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}
.sdev .big{font-size:clamp(2rem,5vw,3.4rem);font-weight:600;letter-spacing:-.03em;line-height:1}
.sdev .big small{font-size:.9rem;color:#9AA19C;letter-spacing:0;font-weight:500;margin-left:6px}
.sdev .kv{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sdev .kv div{border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:10px 12px;display:grid;gap:2px}
.sdev .kv small{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:#9AA19C}
.sdev .kv b{font-weight:600;font-size:1.05rem}
.sdev .rows{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.sdev .rows button{aspect-ratio:1;border-radius:6px;border:1px solid rgba(255,255,255,.12);background:var(--accent);color:var(--accent-ink);font:600 .8rem/1 var(--body)}
.sdev .rows button[aria-pressed="false"]{background:transparent;color:#9AA19C}
.sdev .stepper{display:flex;align-items:center;justify-content:space-between;border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:6px 6px 6px 14px}
.sdev .stepper b{font-size:1.4rem;font-weight:600}
.sdev .stepper b small{font-size:.75rem;color:#9AA19C;font-weight:500}
.sdev .stepper span{display:flex;gap:6px}
.sdev .stepper button{width:40px;height:40px;border-radius:6px;border:1px solid rgba(255,255,255,.18);font-size:1.2rem;color:#E8ECE9}
.sdev .pane .go{margin-top:auto;padding:14px;border-radius:8px;background:var(--accent);color:var(--accent-ink);font-weight:600;text-align:center;letter-spacing:.04em}
.sdev .pane .go[data-run="1"]{background:#E04848;color:#fff}
.sdev .btns{position:absolute;right:-14px;top:18%;display:grid;gap:14px}
.sdev .btns i{width:10px;height:28px;border-radius:3px;background:#1B231E;border:1px solid var(--line-strong);display:block}
.scout-ui .note{font-size:.8rem;color:var(--quiet);margin-top:10px}
.scout-ui .txt h2{font-family:var(--body);font-size:clamp(1.6rem,3vw,2.4rem);font-weight:600;letter-spacing:-.03em;line-height:1.1;text-transform:none}
.scout-ui .txt p{color:var(--mute);margin-top:14px}

/* ---------- Diesel Boss: hero with the real unit, and a fill you can run ---------- */
.db-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,72px);align-items:center;min-height:calc(100svh - 72px);padding-block:clamp(40px,6vw,80px)}
.db-hero .unit{border-radius:12px;overflow:hidden;background:#0A0D0B;border:1px solid var(--line)}
.db-hero .unit img{width:100%;height:auto;display:block}
.db-hero h1{font-family:var(--body);font-size:clamp(2.2rem,4.6vw,3.8rem);font-weight:600;letter-spacing:-.035em;line-height:1.02;text-transform:none}
.db-hero h1 .accent{display:block;color:var(--accent)}
.db-hero .lead{margin-top:18px;color:var(--mute);max-width:30em}
.db-hero .logo{height:96px;width:auto;margin-bottom:22px}
.fill{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.fill .panel{border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03);padding:clamp(18px,3vw,28px);display:grid;gap:14px}
.fill .lcd{background:#0A1A3A;color:#9CC2FF;font:500 .9rem/1.4 var(--mono);padding:14px 16px;border-radius:6px;border:1px solid #1E3A6E;min-height:76px;display:grid;align-content:center;white-space:pre-line}
.fill .parts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.fill .parts div{border:1px solid var(--line);border-radius:6px;padding:10px 10px 12px;display:grid;gap:6px;font-size:.78rem;color:var(--quiet);transition:border-color .2s}
.fill .parts div b{font-weight:600;color:var(--fg);font-size:.82rem}
.fill .parts div i{display:block;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2)}
.fill .parts div.on{border-color:var(--accent)}
.fill .parts div.on i{background:var(--accent);box-shadow:0 0 10px var(--accent)}
.fill .parts div.rec i{background:#E04848;box-shadow:0 0 10px #E04848}
.fill .litres{display:flex;align-items:baseline;gap:8px;font-family:var(--body)}
.fill .litres b{font-size:clamp(2.6rem,6vw,4rem);font-weight:600;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.fill .litres span{color:var(--quiet);font-size:.9rem}
.fill .act{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.fill .rec-out{border-top:1px solid var(--line);padding-top:12px;display:grid;gap:6px;font-size:.86rem;color:var(--mute);min-height:60px}
.fill .rec-out b{color:var(--fg);font-weight:600}
.fill .rec-out .line{display:flex;justify-content:space-between;gap:12px}
.fill .txt h2{font-family:var(--body);font-size:clamp(1.6rem,3vw,2.4rem);font-weight:600;letter-spacing:-.03em;line-height:1.1;text-transform:none}
.fill .txt p{color:var(--mute);margin-top:14px}
.db-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.db-row .photo{aspect-ratio:4/5}

/* ---------- Demeter page: ported, restyled ---------- */
.dm-hero{position:relative;min-height:calc(100svh - 72px);display:grid;align-content:end;isolation:isolate;overflow:clip;padding-block:clamp(48px,8vw,96px) clamp(28px,4vw,48px);color:#fff}
.dm-hero .media{position:absolute;inset:0;z-index:-1}
.dm-hero .media img{width:100%;height:100%;object-fit:cover}
.dm-hero .media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--scrim),.35),rgba(var(--scrim),.1) 40%,rgba(var(--scrim),.85) 100%)}
.dm-hero .brand-logo{height:56px;width:auto;margin-bottom:18px}
.dm-hero h1{font-size:var(--disp-size,clamp(2.8rem,6.6vw,5.8rem));color:#fff;max-width:12ch;font-family:var(--display);font-weight:var(--disp-w);text-transform:var(--case);letter-spacing:var(--disp-ls);line-height:var(--disp-lh)}
.dm-hero .lead{color:rgba(255,255,255,.85);max-width:32em;margin-top:18px}
.dm-hero .ctas{margin-top:24px}
.dm-hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.55);background:rgba(0,0,0,.2);backdrop-filter:blur(6px)}
.dm-hero .facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:clamp(28px,4vw,48px);padding-top:18px;border-top:1px solid rgba(255,255,255,.3)}
.dm-hero .facts b{display:block;font-family:var(--display);font-size:clamp(1.6rem,3vw,2.6rem);line-height:1;text-transform:var(--case);letter-spacing:var(--disp-ls);font-weight:var(--disp-w)}
.dm-hero .facts span{display:block;font-size:.82rem;color:rgba(255,255,255,.75);margin-top:4px}
.diff{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.diff > div{border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px;background:var(--panel);display:grid;gap:10px;align-content:start}
.diff h3{font-family:var(--body);font-size:1.05rem;font-weight:600;text-transform:none;letter-spacing:-.01em}
.diff p{font-size:.92rem;color:var(--mute)}
.diff svg{width:26px;height:26px;color:var(--accent)}

/* ---------- Page hero (About, Products, Support, Contact) ---------- */
.page-hero{padding-block:clamp(40px,7vw,88px) clamp(24px,4vw,48px);text-align:center}
.page-hero h1{font-size:clamp(2.2rem,4.4vw,3.6rem);font-family:var(--display);font-weight:var(--disp-w);text-transform:var(--case);letter-spacing:var(--disp-ls);line-height:1}
.page-hero p{color:var(--mute);max-width:40em;margin:16px auto 0;font-size:1.05rem}
.page-hero .rule{width:44px;height:3px;background:var(--accent);border-radius:2px;margin:18px auto 0}

/* ---------- Apprentice block ---------- */
.apprentice{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.apprentice .photo{aspect-ratio:4/5}
.steps{display:grid;gap:0;margin-top:18px}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:12px 0;border-top:1px solid var(--line);font-size:.95rem;color:var(--mute);align-items:start}
.steps li span{font:600 .7rem/1.7 var(--mono);color:var(--accent)}
.steps li b{color:var(--fg);font-weight:600}

/* ---------- Responsive ---------- */
@media (max-width:1100px){.portraits{grid-template-columns:repeat(6,minmax(0,1fr))}.services{grid-template-columns:repeat(2,minmax(0,1fr))}.prodlist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .about-grid,.scout-copy,.scout-ui,.fill,.db-hero,.apprentice{grid-template-columns:1fr}
  .quotes.three,.endorse-row,.diff,.tiles{grid-template-columns:1fr}
  .cta{grid-template-columns:1fr}
  .names{grid-template-columns:repeat(2,minmax(0,1fr))}
  .db-hero{min-height:0}
  .dm-hero .facts{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .portraits{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
  .services,.prodlist{grid-template-columns:1fr 1fr;gap:12px}
  .fill .parts{grid-template-columns:repeat(2,1fr)}
  .sdev .btns{display:none}
}

/* ---------- Developed in-house: three landing rows ---------- */
.own{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:center;padding-block:clamp(32px,5vw,64px);border-top:1px solid var(--line)}
.own:first-of-type{border-top:0}
.own.flip > .photo{order:2}
.own .photo{aspect-ratio:4/3}
.own .logo{height:40px;width:auto;margin-bottom:18px}
.own h3{font-family:var(--body);font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:600;letter-spacing:-.025em;line-height:1.1;text-transform:none}
.own p{color:var(--mute);margin-top:12px;max-width:34em}
.own .facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.own .facts b{display:block;font-weight:600;color:var(--fg);font-size:1.05rem}
.own .facts span{font-size:.8rem;color:var(--quiet)}
.own .ctas{margin-top:22px}
.own .chip{margin-left:10px;vertical-align:middle}
@media (max-width:900px){.own{grid-template-columns:1fr}.own.flip > .photo{order:0}}

/* ---------- Team: the group, the leadership, then everyone ---------- */
.team-photo{aspect-ratio:3/2;margin-bottom:clamp(24px,4vw,40px)}
.leads{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.5vw,18px)}
.leads figure,.everyone figure{margin:0;display:grid;gap:8px}
.leads .photo,.everyone .photo{aspect-ratio:4/5;border-radius:3px}
.leads figcaption,.everyone figcaption{display:grid;gap:1px}
.leads b,.everyone b{font-weight:600;color:var(--fg);font-size:.95rem}
.leads span,.everyone span{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--quiet)}
.team-more{margin-top:clamp(20px,3vw,32px)}
.team-more summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border:1px solid var(--line-strong);border-radius:var(--btn-radius);font-weight:600;font-size:.92rem}
.team-more summary::-webkit-details-marker{display:none}
.team-more summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-4px;transition:transform .3s}
.team-more[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.everyone{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.5vw,18px);margin-top:clamp(18px,3vw,28px)}
.everyone .photo img{filter:grayscale(1);transition:filter .5s var(--ease),transform .5s var(--ease)}
.everyone figure:hover .photo img,.everyone figure:focus-within .photo img{filter:none;transform:scale(1.03)}
@media (hover:none){.everyone .photo img{filter:none}}
@media (max-width:900px){.leads,.everyone{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.leads,.everyone{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Scout mark: spins once, glows, settles ---------- */
.scout-hero .mark{overflow:visible}
.scout-hero .mark .needle{transform-box:view-box;transform-origin:440.43px 370px}
@media (prefers-reduced-motion:no-preference){
  .scout-hero .mark .needle{animation:needle-spin 1.9s cubic-bezier(.3,0,.15,1) .3s both}
  .scout-hero .mark{animation:mark-glow 1.4s ease-out 1.9s both}
  .scout-hero .word,.scout-hero p,.scout-hero .ctas{animation:rise .8s var(--ease) 2.4s both}
}
@keyframes needle-spin{from{transform:rotate(-360deg)}to{transform:rotate(0)}}
@keyframes mark-glow{0%{filter:drop-shadow(0 0 0 rgba(147,225,2,0))}35%{filter:drop-shadow(0 0 28px rgba(147,225,2,.9)) drop-shadow(0 0 60px rgba(147,225,2,.45))}100%{filter:drop-shadow(0 0 10px rgba(147,225,2,.25))}}

/* ---------- V04 ---------- */
/* Splash: intro once, then a loop with the tagline left-aligned under the header */
.splash .over h1 .h-loop{display:none}
.splash.loop .over h1 .h-intro{display:none}.splash.loop .over h1 .h-loop{display:block}
.splash.loop .over h1{font-size:clamp(2.2rem,4.2vw,3.8rem);max-width:12ch}
html.intro .nav{opacity:0;transform:translateY(-100%);pointer-events:none}
.nav{transition:opacity .8s var(--ease),transform .8s var(--ease)}
/* Nav links: on reveal each goes lime in turn with a glow, then back; on hover, lime glow */
.nav ul a{transition:color .35s,text-shadow .35s}
.nav ul a:hover{color:var(--accent);text-shadow:0 0 12px rgba(147,225,2,.55)}
@media (prefers-reduced-motion:no-preference){
  html.nav-in .nav ul > li > a{animation:nav-sweep 1.1s ease-out both}
  html.nav-in .nav ul > li:nth-child(1) > a{animation-delay:.1s}html.nav-in .nav ul > li:nth-child(2) > a{animation-delay:.25s}html.nav-in .nav ul > li:nth-child(3) > a{animation-delay:.4s}html.nav-in .nav ul > li:nth-child(4) > a{animation-delay:.55s}html.nav-in .nav ul > li:nth-child(5) summary{animation:nav-sweep 1.1s ease-out .7s both}
}
@keyframes nav-sweep{0%{color:inherit;text-shadow:none}30%{color:var(--accent);text-shadow:0 0 14px rgba(147,225,2,.75),0 0 30px rgba(147,225,2,.35)}100%{color:inherit;text-shadow:none}}
/* Section lead: no centred rag */
.sec-head p{text-wrap:balance}
.sec-head p.tile{text-align:left;text-wrap:pretty;padding:14px 18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);max-width:40em}
/* PTx: the arrow is a bar in the middle with a light that travels left to right */
.ptx .was{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px}
.ptx .sweep{position:relative;display:block;height:6px;border-radius:2px;background:var(--line-strong);overflow:visible;min-width:80px}
.ptx .sweep::after{content:"";position:absolute;right:-3px;top:-6px;width:0;height:0;border-left:12px solid var(--line-strong);border-top:9px solid transparent;border-bottom:9px solid transparent}
.ptx .sweep i{position:absolute;left:0;top:0;height:100%;width:38%;border-radius:2px;background:linear-gradient(90deg,transparent,var(--accent) 60%,#fff);box-shadow:0 0 10px var(--accent),0 0 28px rgba(147,225,2,.55);animation:sweep 2.4s cubic-bezier(.4,0,.2,1) infinite}
@keyframes sweep{0%{transform:translateX(-100%);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateX(265%);opacity:0}}
@media (prefers-reduced-motion:reduce){.ptx .sweep i{animation:none;width:100%;background:var(--accent)}}
@media (max-width:640px){.ptx .was{grid-template-columns:1fr;gap:12px}.ptx .sweep{width:120px}}
/* Products as a bento */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:220px;gap:12px}
.bento .tile{position:relative;border-radius:18px;overflow:hidden;background:var(--ground-2);text-decoration:none;isolation:isolate;display:block;border:1px solid var(--line)}
.bento .tile picture,.bento .tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.bento .tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--scrim),.05) 35%,rgba(var(--scrim),.88) 100%);z-index:1}
.bento .tile:hover img{transform:scale(1.05)}
.bento .tile .txt{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;z-index:2;color:#fff;display:grid;gap:4px}
.bento .tile h3{font-family:var(--body);font-size:1.08rem;font-weight:600;letter-spacing:-.01em;line-height:1.2;color:#fff;text-transform:none}
.bento .tile p{font-size:.84rem;color:rgba(255,255,255,.78);max-height:0;overflow:hidden;opacity:0;transition:max-height .5s var(--ease),opacity .4s}
.bento .tile:hover p,.bento .tile:focus-visible p{max-height:4em;opacity:1}
.bento .big{grid-column:span 2;grid-row:span 2}
.bento .big h3{font-size:1.4rem}
.bento .wide{grid-column:span 2}
@media (max-width:900px){.bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:180px}.bento .big{grid-column:span 2;grid-row:span 1}.bento .wide{grid-column:span 1}.bento .tile p{display:none}}
/* Wider wrap for the own-products section */
.wrap.wide{max-width:none;padding-inline:clamp(12px,2vw,28px)}
/* Instagram */
.insta{min-height:200px}
/* Contact map: the opposite mode, with a glowing pin over the address */
html[data-mode="light"]:not([data-theme="sub"]) .map iframe{filter:grayscale(1) invert(.92) hue-rotate(90deg) saturate(.6) contrast(.9)}
html[data-mode="dark"] .map iframe,html[data-theme="sub"] .map iframe{filter:grayscale(.3) saturate(.8)}
.map{position:relative}
.map .pin{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px rgba(147,225,2,.35),0 0 18px var(--lime),0 0 44px rgba(147,225,2,.6);z-index:2;pointer-events:none}
.map .pin::before{content:"";position:absolute;inset:-14px;border-radius:50%;border:2px solid var(--lime);opacity:.7;animation:pin-ring 2.2s ease-out infinite}
@keyframes pin-ring{from{transform:scale(.4);opacity:.8}to{transform:scale(1.6);opacity:0}}
/* Mode chooser on first visit */
.chooser{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgba(5,8,6,.86);backdrop-filter:blur(14px);color:#fff;padding:24px;opacity:0;transition:opacity .5s}
.chooser.on{opacity:1}
.chooser .box{display:grid;gap:22px;text-align:center;max-width:720px;width:100%}
.chooser .box img{height:40px;width:auto;margin:0 auto}
.chooser .box p{color:rgba(255,255,255,.75);font-size:1.02rem}
.chooser .opts{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.chooser button{display:grid;gap:10px;justify-items:center;padding:28px 18px;border-radius:14px;border:1px solid rgba(255,255,255,.22);font:600 1rem/1 var(--body);color:#fff;transition:border-color .25s,transform .25s,box-shadow .25s}
.chooser button:hover{border-color:var(--lime);transform:translateY(-2px);box-shadow:0 0 0 1px var(--lime),0 20px 40px -20px rgba(147,225,2,.4)}
.chooser button span{display:block;width:100%;aspect-ratio:16/9;border-radius:8px;border:1px solid rgba(255,255,255,.15);background:#F4F4F4 linear-gradient(135deg,transparent 50%,rgba(26,27,31,.06) 50%)}
.chooser button.dark span{background:#0D110F linear-gradient(135deg,transparent 50%,rgba(202,205,210,.08) 50%)}
.chooser small{color:rgba(255,255,255,.5);font-size:.78rem}
@media (max-width:560px){.chooser .opts{grid-template-columns:1fr}.chooser button{padding:18px}.chooser button span{aspect-ratio:3/1}}
/* Demeter: key figures with icons, the annotated machine, icon spec */
.keyfigs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:clamp(28px,4vw,48px);padding-top:18px;border-top:1px solid rgba(255,255,255,.3)}
.keyfigs li{display:grid;gap:4px;justify-items:start}
.keyfigs svg{width:38px;height:38px;color:var(--lime);margin-bottom:4px}
.keyfigs b{font-family:var(--display);font-size:clamp(1.5rem,2.8vw,2.4rem);line-height:1;text-transform:var(--case);letter-spacing:var(--disp-ls);font-weight:var(--disp-w);color:#fff}
.keyfigs span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.machine{position:relative;margin:0 auto clamp(32px,5vw,56px);max-width:1100px}
.machine img{width:100%;height:auto;display:block;filter:drop-shadow(0 40px 50px rgba(0,0,0,.45))}
.callouts li{position:absolute;left:var(--x);top:var(--y);width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px rgba(147,225,2,.3),0 0 14px rgba(147,225,2,.7)}
.callouts li::before{content:"";position:absolute;top:50%;height:1px;width:var(--len,56px);background:var(--lime);opacity:.8}
.callouts li[style*="--side:left"]::before{right:100%}
.callouts li[style*="--side:right"]::before{left:100%}
.callouts li b,.callouts li span{position:absolute;white-space:nowrap;font-family:var(--body)}
.callouts li b{top:-20px;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg)}
.callouts li span{top:-2px;font-size:.72rem;color:var(--mute)}
.callouts li[style*="--side:left"] b,.callouts li[style*="--side:left"] span{right:calc(100% + var(--len,56px) + 6px);text-align:right}
.callouts li[style*="--side:right"] b,.callouts li[style*="--side:right"] span{left:calc(100% + var(--len,56px) + 6px)}
.machine{padding:0 clamp(150px,17vw,250px)}
#specs{overflow:clip}
@media (max-width:900px){.machine{padding:0}.callouts{display:none}}
.ispec{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.5vw,32px)}
.ispec h3{font:600 .68rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.ispec ul{display:grid;gap:10px}
.ispec li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.ispec svg{width:34px;height:34px;color:var(--accent)}
.ispec b{display:block;font-weight:600;color:var(--fg);font-size:.98rem}
.ispec span{font-size:.84rem;color:var(--mute)}
@media (max-width:900px){.ispec{grid-template-columns:repeat(2,minmax(0,1fr))}.keyfigs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.ispec{grid-template-columns:1fr}}