/* Self-hosted fonts (SIL Open Font License), no request to Google (Law 25) */
@font-face{font-family:"Manrope";src:url(/assets/fonts/manrope-latin-wght-normal.woff2) format("woff2-variations");font-weight:200 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";src:url(/assets/fonts/manrope-latin-ext-wght-normal.woff2) format("woff2-variations");font-weight:200 800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Figtree";src:url(/assets/fonts/figtree-latin-wght-normal.woff2) format("woff2-variations");font-weight:300 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Figtree";src:url(/assets/fonts/figtree-latin-ext-wght-normal.woff2) format("woff2-variations");font-weight:300 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}

/* Layout: C+ v2. Plan-grid ground, white cards, mono operational labels, yellow lot-label accents. Brand colours from the official logo. */
:root{
  --blue:#2f8fce; --blue-d:#2379b3; --blue-ink:#1f6fa8; --blue-ink-d:#185a89; --navy:#283960; --ink:#1d2a45; --soft:#4a5f80; --muted:#5d6d88;
  --ciel:#eef6fc; --plan:rgba(47,143,206,.10); --paper:#ffffff; --line:#d9e7f3; --lot:#ffd54a; --signal:#ff6a13; --ok:#22b36b;
  --display:"Manrope","Figtree",system-ui,sans-serif; --body:"Figtree",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
  --r:6px; --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{overflow-x:clip;background:var(--ciel);color:var(--ink);font-family:var(--body);font-size:16.5px;line-height:1.55}
a{color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:3px}
h1,h2,h3{font-family:var(--display);color:var(--navy);margin:0;text-wrap:balance;letter-spacing:-.02em}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:20px}
.mono{font-family:var(--mono)}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--soft);display:flex;gap:10px;align-items:center}
.eyebrow b{color:var(--blue-ink);font-weight:600}
.lotlabel{display:inline-flex;gap:8px;align-items:center;background:var(--lot);color:var(--navy);font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:4px 9px 4px 7px;border-radius:3px;width:max-content;max-width:100%}
.lotlabel::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--navy);flex:none}

/* Mock banner */

/* Header */
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.hbar{display:flex;align-items:center;gap:18px;min-height:92px}
.logo{display:block;flex:none}
.logo img{height:66px;width:auto;display:block}
nav.main{display:flex;gap:4px;align-items:center}
nav.main a,nav.main summary{white-space:nowrap;font-weight:600;font-size:15px;color:var(--navy);text-decoration:none;padding:9px 11px;border-radius:var(--r);cursor:pointer;list-style:none}
nav.main summary::-webkit-details-marker{display:none}
nav.main a:hover,nav.main summary:hover{background:var(--ciel)}
details.dd{position:relative}
details.dd summary::after{content:" ▾";font-size:12px;color:var(--muted)}
.ddpanel{position:absolute;top:calc(100% + 8px);left:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 12px 30px rgba(40,57,96,.12);padding:14px;display:grid;gap:4px;min-width:290px}
.ddpanel a{display:grid;gap:1px;padding:8px 10px}
.ddpanel a small{font-weight:400;color:var(--soft);font-size:13px}
.ddpanel .grp{border-top:1px dashed var(--line);margin-top:6px;padding-top:8px}
.ddpanel .grp span{font-family:var(--mono);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:0 10px}
.spacer{flex:1}
.hlinks{display:flex;align-items:center;gap:12px}
.client{font-size:14.5px;font-weight:600;color:var(--soft);text-decoration:none;white-space:nowrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:700;font-size:15px;border-radius:var(--r);padding:12px 18px;text-decoration:none;white-space:nowrap;border:0;cursor:pointer}
.btn.primary{background:var(--blue-ink);color:#fff}
.btn.primary:hover{background:var(--blue-ink-d)}
.btn.ghost{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--navy)}
.btn.ghost:hover{background:var(--navy);color:#fff}
.lang{font-family:var(--mono);font-size:12.5px;color:var(--soft);white-space:nowrap}
.lang b{color:var(--navy)}
.burger{display:none}
@media (max-width:1320px){.hlinks .ghost{display:none}}
@media (max-width:1080px){
  nav.main,.hlinks .client,.hlinks .ghost{display:none}
  .burger{display:inline-flex;background:none;border:1.5px solid var(--line);border-radius:var(--r);padding:9px 11px;font:inherit;font-weight:600;color:var(--navy)}
  .logo img{height:58px}
}
@media (max-width:760px){.hlinks .hq{display:none}}
@media (max-width:520px){.logo img{height:56px}.hbar{gap:10px;min-height:78px}}

/* Sections */
main section{padding-block:clamp(48px,7vw,88px)}
.grid-bg{background-color:#f4f9fd;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232.00%22%20height%3D%2218.48%22%20viewBox%3D%220%200%2032.00%2018.48%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22rgba%2847%2C143%2C206%2C0.1%29%22%20stroke-width%3D%221%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M0.96%20-16.81%20L14.08%20-9.24%20L0.96%20-1.66%20Z%22/%3E%3Cpath%20d%3D%22M15.04%20-7.57%20L1.92%200.00%20L15.04%207.57%20Z%22/%3E%3Cpath%20d%3D%22M31.04%20-16.81%20L17.92%20-9.24%20L31.04%20-1.66%20Z%22/%3E%3Cpath%20d%3D%22M16.96%20-7.57%20L30.08%200.00%20L16.96%207.57%20Z%22/%3E%3Cpath%20d%3D%22M0.96%201.66%20L14.08%209.24%20L0.96%2016.81%20Z%22/%3E%3Cpath%20d%3D%22M15.04%2010.90%20L1.92%2018.48%20L15.04%2026.05%20Z%22/%3E%3Cpath%20d%3D%22M31.04%201.66%20L17.92%209.24%20L31.04%2016.81%20Z%22/%3E%3Cpath%20d%3D%22M16.96%2010.90%20L30.08%2018.48%20L16.96%2026.05%20Z%22/%3E%3Cpath%20d%3D%22M0.96%2020.14%20L14.08%2027.71%20L0.96%2035.29%20Z%22/%3E%3Cpath%20d%3D%22M15.04%2029.38%20L1.92%2036.95%20L15.04%2044.53%20Z%22/%3E%3Cpath%20d%3D%22M31.04%2020.14%20L17.92%2027.71%20L31.04%2035.29%20Z%22/%3E%3Cpath%20d%3D%22M16.96%2029.38%20L30.08%2036.95%20L16.96%2044.53%20Z%22/%3E%3C/g%3E%3C/svg%3E");background-size:32.00px 18.48px}
.white{background:#fff}
.navyband{background:var(--navy);color:#fff}
.navyband h2,.navyband h3{color:#fff}
.sec-head{display:grid;gap:10px;max-width:720px;margin-bottom:32px}
.sec-head h2{font-size:clamp(28px,3.6vw,42px);font-weight:800;line-height:1.08}
.sec-head p{color:var(--soft);font-size:17.5px}
.navyband .sec-head p{color:#c9d8ec}

/* Hero */
.hero{padding-block:clamp(40px,6vw,80px) clamp(40px,6vw,72px)}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(40px,6.4vw,76px);font-weight:800;line-height:.98;letter-spacing:-.03em}
.hero h1 .u{background:linear-gradient(transparent 72%,var(--lot) 72%)}
.hero .lead{font-size:clamp(17.5px,1.6vw,20px);color:var(--soft);max-width:34ch;margin-top:20px}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-top:28px}
.hero .hint{font-size:13.5px;color:var(--muted)}
.status{display:inline-flex;gap:10px;align-items:center;font-family:var(--mono);font-size:12.5px;color:var(--soft);background:#fff;border:1px solid var(--line);border-radius:4px;padding:7px 12px;margin-top:22px;max-width:100%}
.status i{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none;}
@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(34,179,107,0)}100%{box-shadow:0 0 0 0 rgba(34,179,107,0)}}
.heroimg{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;box-shadow:0 0 0 1px var(--line);max-width:100%}
.heroimg img{width:100%;height:100%;object-fit:cover;display:block}
.heroimg .lotlabel{position:absolute;left:14px;bottom:14px}
.heroimg .scan{position:absolute;left:0;right:0;top:30%;height:2px;background:var(--signal);box-shadow:0 0 12px var(--signal);opacity:.85;animation:scan 3.8s ease-in-out infinite}
@keyframes scan{0%,100%{top:28%}50%{top:62%}}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr}.heroimg{aspect-ratio:16/11}}

/* 3PL definition + founders */
.def{display:grid;grid-template-columns:1fr;gap:20px;max-width:760px}
.card{background:#fff;border-radius:var(--r);box-shadow:0 0 0 1px var(--line);padding:24px;display:grid;gap:12px;align-content:start;min-width:0}
.def h2{font-size:26px;font-weight:800}
.quote{background:var(--navy);color:#fff;box-shadow:none}
.quote p{font-family:var(--display);font-weight:600;font-size:clamp(21px,2.2vw,26px);line-height:1.25;letter-spacing:-.01em}
.quote .who{font-family:var(--mono);font-size:12px;color:#a9c4e6;text-transform:uppercase;letter-spacing:.06em}
@media (max-width:760px){.def{grid-template-columns:1fr}}

/* Proof + strip */
.proof{display:grid;grid-template-columns:repeat(2,1fr);gap:0;background:#fff;border-radius:var(--r);box-shadow:0 0 0 1px var(--line);margin-top:20px}
.proof div{padding:20px 22px;border-left:1px solid var(--line);display:grid;gap:4px}
.proof div:first-child{border-left:0}
.proof .k{font-family:var(--mono);font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.proof .v{font-family:var(--display);font-weight:800;font-size:20px;color:var(--navy);line-height:1.2}
@media (max-width:760px){.proof{grid-template-columns:1fr}.proof div{border-left:0;border-top:1px solid var(--line)}.proof div:first-child{border-top:0}}
.strip{display:flex;gap:56px;overflow:hidden;background:#fff;width:100vw;margin:24px 0 0 calc(50% - 50vw);padding-block:22px;box-shadow:0 1px 0 var(--line),0 -1px 0 var(--line)}
.track{display:flex;gap:56px;flex:none;align-items:center;animation:scroll calc(var(--n,12) * 3s) linear infinite}
.lg{flex:none;width:120px;height:44px;display:grid;place-items:center}
.lg img{display:block;max-width:120px;max-height:40px;width:auto;height:auto;object-fit:contain;filter:grayscale(1);opacity:.6}
@keyframes scroll{to{transform:translateX(calc(-100% - 56px))}}
.note{font-family:var(--mono);font-size:11.5px;color:var(--muted)}

/* Chooser */
.chooser{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.choose{background:#fff;border-radius:var(--r);box-shadow:0 0 0 1px var(--line);padding:22px;display:grid;gap:10px;text-decoration:none;align-content:start;transition:box-shadow .15s,transform .15s}
.choose:hover{box-shadow:0 0 0 2px var(--blue);transform:translateY(-2px)}
.choose .n{font-family:var(--mono);font-size:12px;color:var(--blue-ink);font-weight:600}
.choose h3{font-size:21px;font-weight:800}
.choose p{color:var(--soft);font-size:15.5px}
.choose .go{font-weight:700;color:var(--blue-ink);font-size:15px}
@media (max-width:860px){.chooser{grid-template-columns:1fr}}

/* Services */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.s{background:#fff;border-radius:var(--r);box-shadow:0 0 0 1px var(--line);padding:22px;display:grid;gap:10px;align-content:start;text-decoration:none}
.s:hover{box-shadow:0 0 0 2px var(--blue)}
.s .ic{width:40px;height:40px;border-radius:8px;background:var(--ciel);display:grid;place-items:center}
.s h3{font-size:20px;font-weight:800}
.s p{color:var(--soft);font-size:15.5px}
.s .go{font-weight:700;color:var(--blue-ink);font-size:14.5px}
.own{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;background:var(--navy);color:#fff;border-radius:var(--r);padding:18px 22px}
.own b{font-family:var(--display);font-size:19px}
.own a{color:var(--lot);font-weight:700}
@media (max-width:960px){.svc{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.svc{grid-template-columns:1fr}}

/* Journey */
.diagram{background:#fff;border-radius:var(--r);box-shadow:0 0 0 1px var(--line);padding:18px;overflow-x:auto}
.diagram svg{display:block;width:100%;min-width:720px;height:auto}
.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:16px;padding:0;list-style:none;counter-reset:st}
.steps li{display:grid;gap:4px;font-size:15px;color:var(--ink)}
.steps li::before{counter-increment:st;content:"0" counter(st);font-family:var(--mono);font-size:12px;color:var(--blue-ink);font-weight:600}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr}}

/* Beyond */
.beyond{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:start}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.checks li{display:grid;grid-template-columns:22px 1fr;gap:10px;background:#fff;border-radius:var(--r);box-shadow:0 0 0 1px var(--line);padding:14px 16px;font-size:16px}
.checks li::before{content:"";width:20px;height:20px;border-radius:50%;background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat;margin-top:1px}
@media (max-width:860px){.beyond{grid-template-columns:1fr}}

/* Rigueur table */
.tw{overflow-x:auto;background:#fff;border-radius:var(--r);box-shadow:0 0 0 1px var(--line)}
table{width:100%;border-collapse:collapse;min-width:640px;font-size:15.5px}
th{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--soft);text-align:left;padding:16px 18px 12px;border-bottom:2px solid var(--navy);font-weight:600}
td{padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
td:first-child{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--navy);white-space:nowrap}
td:last-child{color:var(--soft)}

/* Is it time */
.time{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.signs{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.signs li{display:flex;gap:12px;align-items:flex-start;font-size:16.5px;padding:12px 14px;border-radius:var(--r);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.signs li span{font-family:var(--mono);font-size:12px;color:var(--lot);padding-top:3px}
.time .cta p{color:#c9d8ec;margin-top:10px}
.time .cta a.sm{color:var(--lot);font-weight:700}
@media (max-width:860px){.time{grid-template-columns:1fr}}

/* Story */
.story{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.story svg{width:100%;height:auto;display:block;background:#fff;border-radius:var(--r);box-shadow:0 0 0 1px var(--line)}
.story .tl{display:grid;gap:14px}
.story .tl div{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:baseline}
.story .tl b{font-family:var(--mono);font-size:13px;color:var(--blue-ink)}
@media (max-width:860px){.story{grid-template-columns:1fr}}

/* Videos */
.vids{display:grid;grid-template-columns:repeat(2,minmax(0,260px)) 1fr;gap:20px;align-items:center}
.vframe{aspect-ratio:9/16;position:relative;border-radius:var(--r);overflow:hidden;box-shadow:0 0 0 1px var(--line);max-width:100%}
.vframe img{width:100%;height:100%;object-fit:cover;display:block}
.vframe .lotlabel{position:absolute;left:12px;top:12px}
.vframe .play{position:absolute;right:12px;bottom:12px;width:48px;height:48px;border-radius:50%;background:#fff;color:var(--navy);display:grid;place-items:center;border:0;font-size:15px}
.vframe .cc{position:absolute;left:12px;right:70px;bottom:14px;background:rgba(40,57,96,.9);color:#fff;font-size:13.5px;font-weight:600;padding:7px 9px;border-radius:5px;line-height:1.3}
@media (max-width:760px){.vids{grid-template-columns:1fr 1fr}.vids .txt{grid-column:1/-1}}

/* Eco + close */
.eco{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between}
.eco p{font-size:18px;color:var(--ink);max-width:56ch}
.close{display:grid;gap:14px;justify-items:start}
.close h2{font-size:clamp(30px,4vw,46px);font-weight:800}
.close .ctas{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center}
.close .ctas .btn.ghost{color:#fff;box-shadow:inset 0 0 0 1.5px #fff}
.close .reply{font-family:var(--mono);font-size:13px;color:#c9d8ec}
.reviews{color:var(--blue-ink);font-weight:700}

/* Footer */
footer.site{background:#fff;border-top:1px solid var(--line);padding-block:44px 30px;font-size:14.5px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.fgrid h4,.fgrid .fh{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:0 0 10px;font-weight:600}
.fgrid ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.fgrid a{text-decoration:none;color:var(--ink)}
.fgrid a:hover{color:var(--blue-ink)}
.fgrid .logo img{height:80px}
.fgrid address{font-style:normal;color:var(--soft);margin-top:14px;line-height:1.5}
.legal{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;margin-top:30px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
@media (max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.fgrid{grid-template-columns:1fr}}

/* Mobile sticky quote bar (the header quote button hides below 760px) */
.mbar{display:none}
@media (max-width:760px){.mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.97);border-top:1px solid var(--line)}.mbar .btn{flex:1}body{padding-bottom:72px}}

@media (prefers-reduced-motion:reduce){.strip{flex-wrap:wrap;row-gap:18px}.track{flex:1 1 100%;flex-wrap:wrap;justify-content:center}.track[aria-hidden]{display:none}.track,.status i,.heroimg .scan{animation:none}.heroimg .scan{display:none}.choose{transition:none}}
.jline{margin-top:16px;color:var(--soft);font-size:15.5px}.jline b{color:var(--ink);font-weight:600}

/* ---------- Inner pages (from docs/phase3/mockups/page.css) ---------- */
/* Inner pages (Services, Comment ça marche, …) */
.pagehead{padding-block:clamp(36px,5vw,64px) 0}
.pagehead h1{font-size:clamp(36px,5.4vw,64px);font-weight:800;line-height:1;letter-spacing:-.03em;margin:14px 0 0}
.pagehead .lead{font-size:clamp(17px,1.5vw,19px);color:var(--soft);max-width:52ch;margin-top:16px}
.secnav{margin-top:28px;background:rgba(255,255,255,.85);backdrop-filter:blur(6px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.secnav .wrap{display:flex;gap:4px;overflow-x:auto;padding-block:8px;scrollbar-width:none}
.secnav a{text-decoration:none;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;padding:8px 12px;border-radius:999px;font-size:14px;font-weight:600;color:var(--navy)}
.secnav a:hover,.secnav a:focus-visible{background:var(--ciel)}
.secnav svg{width:18px;height:18px;color:var(--blue)}
.feat{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:start}
.feat .sec-head{margin-bottom:18px}
.bul{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-size:16px}
.bul li{padding-left:26px;position:relative}
.bul li::before{content:"";position:absolute;left:0;top:8px;width:0;height:0;border-left:9px solid var(--blue);border-top:6px solid transparent;border-bottom:6px solid transparent}
.bul.light{color:#dce6f3}.bul.light b{color:#fff}.bul.light li::before{border-left-color:var(--lot)}
.promise{display:flex;gap:10px;align-items:flex-start;margin-top:22px;padding:14px 16px;background:var(--ciel);border-radius:var(--r);font-size:15px}
.promise svg{width:22px;height:22px;color:var(--ok);flex:none}
.photo{margin:0;position:relative;border-radius:var(--r);overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo.tall{aspect-ratio:4/5}
.photo .lotlabel{position:absolute;left:14px;bottom:14px}
.diagram{background:#fff;border-radius:var(--r);box-shadow:0 0 0 1px var(--line);padding:14px;overflow-x:auto}
.diagram svg{display:block;width:100%;height:auto;min-width:0}
.diagram.wide{margin-top:28px}
.diagram.wide svg{min-width:720px}
.tale{margin-top:28px;padding:20px 22px;border-left:4px solid var(--lot);background:#fff;border-radius:0 var(--r) var(--r) 0;box-shadow:0 0 0 1px var(--line);display:grid;gap:8px;max-width:760px}
.tale p{margin:0;color:var(--ink)}
.tale.dark{background:rgba(255,255,255,.06);box-shadow:none;color:#e6edf6;margin-top:0;max-width:none}
.tale.dark p{color:#e6edf6}
.teaser{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.tcard{display:grid;gap:10px;padding:22px;border-radius:var(--r);background:var(--ciel)}
.tcard svg{width:32px;height:32px;color:var(--navy)}
.tcard p{margin:0}
.sect{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sect div{background:#fff;border-radius:var(--r);box-shadow:0 0 0 1px var(--line);padding:20px;display:grid;gap:8px;align-content:start}
.sect svg{width:28px;height:28px;color:var(--navy)}
.sect h3{margin:0;font-size:18px}
.sect p{margin:0;color:var(--soft);font-size:15px}
.nope{margin:22px 0 0;font-size:15px;color:var(--soft);max-width:72ch}
.stories{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
.stories .tale{margin-top:0;max-width:none}
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
.revs blockquote{margin:0;padding:18px 20px;background:var(--ciel);border-radius:var(--r);font-size:15.5px;display:grid;gap:10px}
.revs cite{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--muted)}
.wrap>.note{margin-top:14px}
@media (max-width:960px){.feat,.teaser{grid-template-columns:1fr}.sect,.revs{grid-template-columns:1fr 1fr}.stories{grid-template-columns:1fr}}
@media (max-width:600px){.sect,.revs{grid-template-columns:1fr}.pagehead{padding-top:28px}}
.stage{background:#f7fbfe;border-radius:var(--r);box-shadow:0 0 0 1px var(--line);overflow-x:auto;padding:10px}
.stage svg{display:block;width:100%;min-width:700px;height:auto}
.stage+.cap{margin-top:10px;font-weight:600;color:var(--ink)}
.a2bar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;margin-top:12px}
.rs-foot{font-size:13px;color:var(--muted);margin:0}
.steps5{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;counter-reset:s}
.steps5 li{background:#fff;border-radius:var(--r);box-shadow:0 0 0 1px var(--line);padding:16px;font-weight:600;display:grid;gap:8px}
.steps5 li::before{counter-increment:s;content:"0" counter(s);font-family:var(--mono);font-size:12px;color:var(--blue-ink);font-weight:600}
.switch{margin-top:16px;color:var(--soft)}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;margin-top:28px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chips span{font-family:var(--mono);font-size:12.5px;padding:6px 10px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--line);color:var(--navy)}
.tools{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.tools li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;font-size:16px}
.tools svg{width:24px;height:24px;color:var(--blue);margin-top:1px}
.fixes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fixes div{background:#fff;border-radius:var(--r);box-shadow:0 0 0 1px var(--line);padding:20px;display:grid;gap:6px;align-content:start}
.fixes b{font-family:var(--display);font-size:18px}
.fixes p{margin:0;color:var(--soft)}
.faq{display:grid;gap:8px;max-width:820px}
.faq details{background:#fff;border-radius:var(--r);box-shadow:0 0 0 1px var(--line);padding:14px 18px}
.faq summary{cursor:pointer;font-weight:700;font-family:var(--display);font-size:17px}
.faq details p{margin:10px 0 0;color:var(--soft)}
@media (max-width:960px){.steps5{grid-template-columns:1fr 1fr}.split,.fixes{grid-template-columns:1fr}}
@media (max-width:600px){.steps5{grid-template-columns:1fr}}
.read{margin:28px 0 12px;padding:12px 16px;border-left:4px solid var(--lot);background:var(--ciel);border-radius:0 var(--r) var(--r) 0;font-size:15px;max-width:820px}
.fixes.four{grid-template-columns:repeat(4,1fr)}
.fixes svg{width:26px;height:26px;color:var(--blue)}
.todo-photo{aspect-ratio:4/3;border:2px dashed #b9cde2;border-radius:var(--r);background:#fff;display:grid;place-content:center;justify-items:center;gap:8px;text-align:center;padding:24px;color:var(--soft)}
.todo-photo svg{width:40px;height:40px;color:#b9cde2}
.todo-photo b{font-family:var(--display);color:var(--navy)}
@media (max-width:960px){.fixes.four{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.fixes.four{grid-template-columns:1fr}}
.steps5.three{grid-template-columns:repeat(3,1fr)}
@media (min-width:961px){.fixes:has(> div:nth-child(2):last-child){grid-template-columns:1fr 1fr}}
@media (max-width:960px){.steps5.three{grid-template-columns:1fr}}
@media (max-width:700px){#b3svg{min-width:0}#b3svg text{display:none}}
.lesson{max-width:820px;display:grid;gap:12px}
.lesson p{margin:0;font-size:18px;color:var(--soft)}
.lesson .big{font-family:var(--display);font-weight:800;font-size:clamp(26px,3.4vw,38px);line-height:1.15;color:var(--navy);text-wrap:balance;hyphens:manual}
.timeline{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.timeline li{display:grid;gap:6px;padding-top:12px;border-top:3px solid var(--blue)}
.timeline b{font-family:var(--mono);color:var(--blue-ink)}
.timeline span{font-size:15px;color:var(--ink)}
.addr{display:grid;gap:12px}
.addr div{display:grid;gap:2px}
.addr span{color:var(--soft)}
.founders{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.founders figure{margin:0;background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.founders img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.founders figcaption{padding:12px 14px;display:grid;gap:2px;color:var(--soft);font-size:14px}
.founders figcaption b{font-family:var(--display);font-size:17px;color:var(--navy)}
.todo-photo.wide{aspect-ratio:auto;min-height:160px;margin-top:16px}
@media (max-width:960px){.timeline{grid-template-columns:1fr}}
@media (max-width:600px){.founders{gap:8px}.founders figcaption{padding:8px;font-size:12px}.founders figcaption b{font-size:13.5px}}
.photo.group{max-width:900px;background:#fff}
.photo.group img{height:auto;aspect-ratio:auto}
.photo.group figcaption{padding:12px 16px;display:grid;gap:2px;color:var(--soft);font-size:14.5px}
.photo.group figcaption b{font-family:var(--display);color:var(--navy);font-size:17px}
.form{background:#fff;border-radius:var(--r);box-shadow:0 0 0 1px var(--line);padding:22px;display:grid;gap:14px}
.form label{display:grid;gap:6px;font-weight:600;font-size:14.5px;color:var(--navy)}
.form input,.form textarea{font:inherit;font-weight:400;padding:10px 12px;border:1px solid #c9d8e8;border-radius:6px;background:#fff;color:var(--ink)}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form .fine{margin:0;font-size:13px;color:var(--muted)}
.form .btn{justify-self:start}
@media (max-width:600px){.form .row2{grid-template-columns:1fr}}
.qwrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start}
.qwrap .qform:nth-of-type(2){grid-column:1}
.qside{grid-column:2;grid-row:1/span 2;display:grid;gap:16px;position:sticky;top:16px}
.qside .tcard p{margin:0}
.qform{background:#fff;border-radius:var(--r);box-shadow:0 0 0 1px var(--line);padding:24px;display:grid;gap:22px}
.qhead{display:flex;justify-content:space-between;align-items:baseline}
.prog{font-family:var(--mono);font-size:12px;color:var(--muted)}
.q{border:0;margin:0;padding:0;display:grid;gap:10px}
.q legend{font-family:var(--display);font-weight:700;font-size:18px;color:var(--navy);padding:0;margin-bottom:8px}
.q legend b{font-family:var(--mono);font-size:12px;color:var(--blue-ink);margin-right:10px}
.q .help{margin:0;font-size:14px;color:var(--muted)}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills label{position:relative}
.pills input{position:absolute;opacity:0}
.pills span{display:inline-block;padding:9px 14px;border-radius:999px;border:1px solid #c9d8e8;background:#fff;font-size:14.5px;color:var(--ink);cursor:pointer}
.pills input:checked+span{background:var(--navy);color:#fff;border-color:var(--navy)}
.pills input:focus-visible+span{outline:3px solid var(--blue);outline-offset:2px}
.route{margin:-4px 0 0;font-size:13.5px;color:var(--muted);padding-left:12px;border-left:3px solid var(--lot)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid2 label{display:grid;gap:6px;font-weight:600;font-size:14.5px;color:var(--navy)}
.grid2 input,.grid2 textarea{font:inherit;font-weight:400;padding:10px 12px;border:1px solid #c9d8e8;border-radius:6px}
.grid2 .full{grid-column:1/-1}
.grid2 .consent{display:flex;gap:10px;align-items:flex-start;font-weight:400}
.qform .fine,.form .fine{margin:0;font-size:13px;color:var(--muted)}
.qform .btn{justify-self:start}
.nextpage{background:var(--navy);color:#fff;font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;text-align:center;padding:10px 16px}
@media (max-width:960px){.qwrap{grid-template-columns:1fr}.qside{grid-column:1;grid-row:auto;position:static}}
@media (max-width:600px){.grid2{grid-template-columns:1fr}}
.envpics{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
@media (max-width:700px){.envpics{grid-template-columns:1fr 1fr}.envpics>:first-child{grid-column:1/-1;aspect-ratio:4/3!important}}

/* ---------- Production additions (Phase 4) ---------- */
.skip{position:absolute;left:-9999px;top:8px;background:var(--navy);color:#fff;padding:10px 14px;border-radius:6px;z-index:100}
.skip:focus{left:12px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.hint{font-size:13.5px;color:var(--muted)}
.lead2{color:var(--soft);font-size:17px;margin:-14px 0 20px;max-width:720px}
.photo.heroimg{aspect-ratio:4/5}
.photo.small{max-width:380px;justify-self:end;align-self:center}
.photo.group figcaption b{display:block}
.stage.motion{background:#f7fbfe;border-radius:var(--r);box-shadow:0 0 0 1px var(--line);padding:18px;margin-top:8px;overflow:hidden}
/* the space is reserved before the drawing is fetched (no layout shift); one drawing per breakpoint */
.stage.motion[style]{box-sizing:content-box;aspect-ratio:var(--ar)}
@media (max-width:700px){.stage.motion[style]{aspect-ratio:var(--arm)}.stage.motion{padding:10px}}
.stage.motion svg{min-width:0}
.stage.motion svg.defs{position:absolute;width:0;height:0}
.stage.motion[data-code="A2"]{min-height:470px}
.vframe.empty{background:#eef6fc;border:2px dashed #c9dcee}
:not(.vids)>.vframe{max-width:260px;margin-top:20px}
.prose{max-width:780px}
.prose h1{font-size:clamp(30px,4vw,44px);font-weight:800;line-height:1.08;margin:0 0 14px}
.prose h2{font-size:24px;margin:34px 0 10px}
.prose p,.prose li{font-size:16.5px;line-height:1.6}
.prose ul{padding-left:20px}
.lesson .eyebrow-h{font-family:var(--mono);font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:500;margin:0}
.chooser .choose .go a{color:var(--blue-ink);font-weight:700}
.reveal[hidden],[data-when][hidden]{display:none}
.other{display:grid;gap:6px;font-size:14px;color:var(--soft);max-width:360px}
.other input{font:inherit;padding:8px 10px;border:1px solid #c9d8e8;border-radius:6px}
.formerr{color:#b42318;font-weight:600;margin:0}
.btns{display:flex;gap:12px}
.quoteform{display:grid;gap:22px}
@media (max-width:1080px){
  nav.main.open{display:grid;position:absolute;left:0;right:0;top:100%;background:#fff;padding:12px 20px 20px;box-shadow:0 12px 24px rgba(40,57,96,.12);gap:6px;z-index:40;max-height:calc(100vh - 92px);overflow:auto}
  nav.main.open details.dd .ddpanel{position:static;box-shadow:none;border:0;padding:4px 0 8px 12px}
  nav.main.open .mobile-extra{display:grid;gap:6px;border-top:1px solid var(--line);margin-top:6px;padding-top:10px}
}
.mobile-extra{display:none}

/* responsive photos: <picture> is layout-neutral, so the img rules above still apply */
picture{display:contents}
video.vframe{width:100%;max-width:260px;background:#000;display:block}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ferr{color:#b42318;font-size:13.5px;font-weight:600;margin:6px 0 0}
.formok{font-size:18px;font-weight:600;color:var(--navy);background:#eaf7ef;border-left:4px solid #1e9e5a;padding:16px 18px;border-radius:6px}
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:50;max-width:640px;margin-inline:auto;background:#fff;border-radius:var(--r);box-shadow:0 8px 30px rgba(40,57,96,.25);padding:16px 18px;display:grid;gap:10px}
.consent p{margin:0}.consent .btns{display:flex;gap:10px;flex-wrap:wrap}
a[href^="tel:"]{white-space:nowrap}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.compare .col{background:#fff;border-radius:var(--r);box-shadow:0 0 0 1px var(--line);padding:20px 22px;display:grid;gap:10px;align-content:start}
.compare .col.after{box-shadow:0 0 0 2px var(--blue)}
.compare .t{font-family:var(--mono);font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.compare .after .t{color:var(--blue-ink)}
.bigline{font-family:var(--display);font-weight:800;font-size:clamp(20px,2.6vw,26px);line-height:1.25;color:var(--navy);margin:26px 0 0;max-width:30ch;text-wrap:balance}
@media (max-width:760px){.compare{grid-template-columns:1fr}}
.lesson-photo{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:48px;align-items:center}
@media (max-width:860px){.lesson-photo{grid-template-columns:1fr;gap:28px}}
.album{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:28px}
.album .photo{aspect-ratio:auto!important;display:grid;align-content:start;background:#fff}
.album .photo img{aspect-ratio:4/3;height:auto;object-fit:cover}
.album .photo .lotlabel{position:static;margin:12px 12px 0}
.album figcaption{position:static;padding:6px 12px 12px;font-size:14px;color:var(--soft)}
@media (max-width:860px){.album{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* an animation beside text: the tall drawing, about the height of the text, no second frame */
.diagram:not(.wide):has(.stage.motion){background:none;box-shadow:none;padding:0;overflow:visible}
.diagram:not(.wide) .stage.motion[style]{aspect-ratio:var(--arm);width:min(100% - 36px,calc(330px * (var(--arm))));margin-inline:auto}
/* breathing room after the logo band (Simon, 2026-10-07) */
.strip + *{margin-top:28px}
.strip + .reviews{display:inline-block}
/* a photo beside text takes the height of the text column, cropped and centred (Simon, 2026-10-07) */
@media (min-width:961px){.feat>.photo:not(.group){aspect-ratio:auto!important;align-self:stretch;min-height:320px}.feat>.photo:not(.group) img{position:absolute;inset:0;height:100%}}
.photo.illus img{object-fit:contain;background:#f7fbfe}
.vids.one{grid-template-columns:minmax(0,260px) minmax(0,560px);gap:48px}
@media (max-width:760px){.vids.one{grid-template-columns:1fr;gap:20px}.vids.one>.vframe{margin-inline:auto;width:100%;max-width:260px}}