/* Vicardo Construction — v12 — shared styles. v12: no draft banner, team e-mails on À propos, privacy page.
   (v11 note:) v11: Notre approche cards are links; six step pages (hero, progress bar, two columns, blueprint box, drawings, ladder, gallery, FAQ).
   (v10 note:) v10: home video is one looping clip; on phones the three home media take turns.
   (v9 note:) v9: portfolio page scrolls (one project per row, best After photo); viewer shows one picture at a time with every Photo Choisi photo; À propos with phone numbers.
   (v8 note:) v8: no orange anywhere; buttons white with black bold lettering; white menu underline; phones can scroll long pages.
   (v7 note:) Charcoal header with the white logo lockup and a giant VICARDO watermark; navy footer; the site is always light (it no longer follows the computer's dark mode, so watermarks stay visible). Every page fits the screen: header, content, footer; the document itself does not scroll.
   Jost (geometric, close to the logo's letters) for menu and titles, Nunito Sans for text, v8 accent = ink/slate. */
:root{
  --ink:#0c1522; --ink-2:#132238; --paper:#eef1f4; --card:#ffffff; --fg:#152130; --muted:#5e6975; --line:#d8dee5;
  --navy:#0f2a44; --copper:#3a4552; --copper-2:#0b0d10; --ink-btn:#0b0d10; --accent-fg:#ffffff; --mark-bg:#ffffff;
  --font-display:"Jost","Helvetica Neue",Arial,sans-serif; --font-body:"Nunito Sans","Helvetica Neue",Arial,sans-serif;
  --hdr:120px; --char:#111417; --char-2:#1a1e23; --gutter:clamp(20px,4vw,60px); --max:1180px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;color-scheme:light;background:var(--paper);color:var(--fg);font-family:var(--font-body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;height:100svh;overflow:hidden}
main{flex:1;min-height:0;overflow:auto}
html[data-lang="fr"] [lang="en"]{display:none!important}
html[data-lang="en"] [lang="fr"]{display:none!important}
h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.08;text-wrap:balance;margin:0;letter-spacing:-.01em}
p{margin:0}
a{color:var(--navy)}
.eyebrow{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.22em;font-size:12.5px;font-weight:500;color:var(--copper)}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:500;font-size:15.5px;letter-spacing:.04em;padding:14px 24px;border-radius:3px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;line-height:1.1;transition:transform .15s,background .2s,border-color .2s;color:inherit}
.btn:active{transform:translateY(1px)}
.btn-primary{background:#fff;color:var(--ink-btn);border-color:var(--ink-btn);font-weight:700;letter-spacing:.03em}
.btn-primary:hover{background:var(--ink-btn);color:#fff;border-color:var(--ink-btn)}
.top .btn-primary,.home .btn-primary,.mobile-only .btn-primary{border-color:#fff}
.top .btn-primary:hover,.home .btn-primary:hover{background:transparent;color:#fff;border-color:#fff}
.btn-ghost{background:transparent;color:inherit;border-color:currentColor}
:focus-visible{outline:2px solid #5b8bd6;outline-offset:3px}
.draft{background:#f3e3bd;color:#4a3300;font-size:13px;text-align:center;padding:5px 12px;font-family:var(--font-display);letter-spacing:.04em}

/* header: charcoal, white logo lockup, giant VICARDO wordmark as a watermark, thin light-grey line */
.top{background:linear-gradient(100deg,var(--char-2) 0%,var(--char) 55%,#0c0e11 100%);color:#fff;position:sticky;top:env(safe-area-inset-top,0px);z-index:50;height:var(--hdr);display:flex;align-items:center;flex:none;isolation:isolate}
.top::before{content:"";position:absolute;inset:0;background:url(img/part-vicardo-white.svg) no-repeat;background-size:auto 52%;background-position:46% 50%;opacity:.075;pointer-events:none;z-index:0}
.top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.28);z-index:1}
.top .in{position:relative;z-index:2;width:100%;max-width:none;display:flex;align-items:center;gap:18px;padding-inline:var(--gutter)}
.top .right{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.util{display:flex;align-items:center;gap:18px}
.util .tel{color:#fff;text-decoration:none;font-family:var(--font-display);font-weight:500;font-size:17px;letter-spacing:.02em}
.util .rbq{color:#9aa5b3;font-family:var(--font-display);font-size:13px;letter-spacing:.08em}
.util::before{display:none}
.brand{display:flex;align-items:center;gap:16px;text-decoration:none}
.bmark{height:92px;width:auto;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.btext{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.bname{height:38px;width:auto;display:block}
.bcons{height:19px;width:auto;display:block;opacity:.92}
.btag{height:11px;width:auto;display:block;margin-top:3px;opacity:.75}
@media (max-height:780px) and (min-width:1001px){:root{--hdr:100px}.bmark{height:74px}.bname{height:31px}.bcons{height:15px}.btag{height:9px}.top .right{gap:4px}.page{padding-top:20px}.page h1{font-size:clamp(26px,3vw,34px)}footer{padding-block:12px}}
@media (max-width:1000px){:root{--hdr:88px}.bmark{height:64px}.bname{height:27px}.bcons{height:14px}.btag{height:9px}}
nav.main{display:flex;gap:6px;margin-right:-12px}
nav.main a{position:relative;color:#d8dee6;text-decoration:none;font-family:var(--font-display);font-size:17px;letter-spacing:.03em;padding:8px 12px;font-weight:500;transition:color .2s;white-space:nowrap}
nav.main a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
nav.main a:hover{color:#fff}
nav.main a:hover::after{transform:scaleX(1)}
nav.main a[aria-current="page"]{color:#fff}
nav.main a[aria-current="page"]::after{transform:scaleX(1)}
.lang{display:flex;border:1px solid rgba(255,255,255,.28);border-radius:999px;overflow:hidden;font-family:var(--font-display);font-size:13px;font-weight:500}
.lang button{border:0;background:transparent;color:#d8dee6;padding:6px 11px;cursor:pointer;font:inherit}
.lang button[aria-pressed="true"]{background:#fff;color:var(--char)}
.top .btn{padding:10px 18px;font-size:15px;white-space:nowrap}
.burger{display:none;margin-left:auto;background:transparent;border:1px solid rgba(255,255,255,.28);border-radius:3px;width:44px;height:40px;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:0}
.burger span{display:block;width:20px;height:2px;background:#fff}
nav.main .mobile-only{display:none}
@media (max-width:1000px){
  nav.main{display:none;position:absolute;top:var(--hdr);left:0;right:0;margin:0;background:var(--char);flex-direction:column;padding:8px var(--gutter) 20px;border-bottom:1px solid #2a2f36;gap:0;z-index:60}
  nav.main.open{display:flex}
  nav.main a{padding:15px 0;border-bottom:1px solid #2a2f36;font-size:17px}
  nav.main a::after{display:none}
  .burger{display:flex}.top .util{display:none}.top .right{position:static}
  nav.main .mobile-only{display:flex;gap:12px;padding-top:16px;align-items:center;border:0}
}

/* footer */
footer{background:var(--ink);color:#b9c3cf;font-size:13px;border-top:1px solid #1f2c3f;padding:18px var(--gutter);padding-bottom:calc(18px + env(safe-area-inset-bottom,0px));flex:none}
@media (max-height:800px),(max-width:820px){footer{display:none}}
footer .in{max-width:var(--max);margin-inline:auto;display:flex;gap:40px;align-items:center;flex-wrap:wrap}
@media (max-width:820px){footer .in{grid-template-columns:1fr 1fr}}
@media (max-width:520px){footer .in{grid-template-columns:1fr}}
footer b{color:#fff;font-weight:700}
.fbrand img{height:56px;width:auto;display:block}
.fcol{line-height:1.6}.fcol b{margin-right:4px}
.fcol.small{font-size:13px}

/* pages */
.page{max-width:none;margin:0;padding:24px var(--gutter) 22px;position:relative;display:flex;flex-direction:column}
.page>*{max-width:var(--max);width:100%;margin-inline:auto}
.photo-page{background:var(--bg) center/cover no-repeat fixed;isolation:isolate}
.photo-page::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(238,241,244,.94),rgba(238,241,244,.88));z-index:-1}
@media (max-width:640px){.page{padding:28px var(--gutter) 40px}}
.page h1{font-size:clamp(28px,3.6vw,42px);margin-top:8px}
.page .lead{font-size:16.5px;color:var(--muted);margin-top:10px}
.page .lead>span{display:block;max-width:64ch}
.page .cta{margin-top:auto;padding-top:16px;display:flex;gap:12px;flex-wrap:wrap}
.page h2{font-size:21px}

/* home: three portrait panels fill the screen (rendering, video, rendering); on phones only the video */
.home{position:relative;color:#fff;background:var(--ink);display:grid;grid-template-rows:1fr auto;overflow:hidden}
.panels{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:3px;background:#000}
.panel{margin:0;position:relative;overflow:hidden;opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s ease}
.panel.in{opacity:1;transform:none}
.panel img,.panel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.panel video{opacity:0;transition:opacity .8s ease}
.panel video.on{opacity:1}
.panel img{transform:scale(1.02);animation:kb 18s ease-in-out infinite alternate}
.panel.p3 img{animation-delay:-9s}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.10)}}
.panels::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,12,20,.18) 0%,rgba(6,12,20,0) 35%,rgba(6,12,20,.82) 100%);pointer-events:none}
.home .body{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;padding:40px var(--gutter) 26px;max-width:var(--max);width:100%;margin-inline:auto;min-height:0}
.home .eyebrow{color:#dfe4ea}
.home h1{font-size:clamp(30px,4.8vw,62px);font-weight:700;max-width:16ch;margin-top:10px;text-shadow:0 2px 24px rgba(0,0,0,.55)}
.home .lead{font-size:clamp(15px,1.6vw,19px);max-width:48ch;margin-top:12px;color:#e6ebf1;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.home .lead b{color:#fff;font-weight:700}
.home .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.home .cta .btn-ghost{color:#fff;border-color:rgba(255,255,255,.7)}
.strip{position:relative;z-index:1;background:rgba(8,13,20,.86);backdrop-filter:blur(8px);border-top:1px solid rgba(255,255,255,.12)}
.strip .in{max-width:var(--max);margin-inline:auto;padding:11px var(--gutter);display:flex;flex-wrap:wrap;gap:6px 26px;font-size:13.5px;color:#c8d0da;align-items:center}
.strip b{color:#fff;font-weight:700}.strip .sp{flex:1}
@media (max-width:900px){.panels{grid-template-columns:1fr;grid-template-rows:1fr}.panels .panel{grid-area:1/1;opacity:0;transform:none;transition:opacity 1.2s ease}.panels .panel.show{opacity:1}.panel img{animation:none}.strip .in{gap:6px 16px;font-size:12.5px}.strip .sp{display:none}.home h1{font-size:clamp(30px,8vw,44px)}}
@media (prefers-reduced-motion:reduce){.panel{opacity:1;transform:none;transition:none}.panel img{animation:none}}

/* services */
.grid{display:grid;gap:12px;grid-template-columns:repeat(3,1fr);margin-top:20px}
@media (max-width:900px){.grid{grid-template-columns:1fr 1fr}}@media (max-width:560px){.grid{grid-template-columns:1fr}}
.svc{position:relative;min-width:0;border-radius:4px;overflow:hidden;background:var(--card) center/cover no-repeat;min-height:clamp(120px,calc((100svh - 548px)/2),210px);display:flex;align-items:flex-end;color:#fff}
.svc-in{position:relative;padding:18px 18px 18px;width:100%;background:linear-gradient(180deg,rgba(6,12,20,0) 0%,rgba(6,12,20,.55) 30%,rgba(6,12,20,.86) 100%)}
.svc h2{color:#fff}
.svc p{color:#dbe2ea;font-size:14px;margin-top:6px}
.svc .n{font-family:var(--font-display);color:#dfe4ea;font-size:12px;letter-spacing:.16em;margin-bottom:8px;font-weight:600}

/* portfolio page (v9): the only page that scrolls. One project per row, the best After photo big, caption below. */
body.scroll{height:auto;min-height:100svh;overflow:visible}
body.scroll main{overflow:visible;flex:none}
body.scroll footer{display:flex!important}
body.scroll .photo-page{background-attachment:scroll}
body.pv-lock{overflow:hidden}
.portfolio{padding-bottom:40px}
.portfolio .cta{margin-top:28px;justify-content:center}
.projects{display:grid;gap:34px;grid-template-columns:1fr;margin-top:26px;max-width:1040px}
.card{position:relative;border:0;padding:0;background:var(--card);text-align:left;cursor:pointer;font:inherit;color:inherit;min-width:0;border-radius:6px;overflow:hidden;box-shadow:0 2px 6px rgba(12,21,34,.08),0 18px 40px -24px rgba(12,21,34,.35);display:block;width:100%;transition:transform .35s ease,box-shadow .35s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 4px 10px rgba(12,21,34,.1),0 30px 50px -24px rgba(12,21,34,.45)}
.card img{width:100%;height:clamp(300px,54vh,560px);object-fit:cover;display:block;transition:transform .8s ease;background:#0b0e12}
.card:hover img{transform:scale(1.025)}
.card .cap{padding:18px 22px 20px;display:grid;grid-template-columns:1fr auto;gap:4px 24px;align-items:end}
.card .meta{grid-column:1/-1;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.16em;font-size:12.5px;color:var(--copper);font-weight:500}
.card h2{font-size:clamp(19px,2.2vw,25px);line-height:1.15;margin-top:2px}
.card .desc{grid-column:1;color:var(--muted);font-size:15px;margin-top:6px;max-width:68ch}
.card .count{grid-column:2;grid-row:2/4;align-self:center;white-space:nowrap;font-family:var(--font-display);font-size:13.5px;letter-spacing:.06em;font-weight:600;border:1.5px solid var(--ink-btn);color:var(--ink-btn);background:#fff;padding:10px 16px;border-radius:3px}
.card:hover .count{background:var(--ink-btn);color:#fff}
@media (max-width:760px){.projects{gap:22px}.card img{height:auto;aspect-ratio:4/3}.card .cap{grid-template-columns:1fr;padding:14px 16px 16px}.card .count{grid-column:1;grid-row:auto;justify-self:start;margin-top:10px}.card .desc{font-size:14px}}

/* project viewer (v9): one picture at a time, every photo of the project */
.pv{position:fixed;inset:0;z-index:100;background:#05080c;display:none;flex-direction:column;color:#fff}
.pv.open{display:flex}
.pv .bar{display:flex;align-items:center;gap:14px;padding:10px var(--gutter);padding-top:calc(10px + env(safe-area-inset-top,0px));font-family:var(--font-display);flex-wrap:wrap}
.pv .bar .t{font-size:17px;font-weight:600}
.pv .bar .m{color:#a9b3bf;font-size:13px;font-family:var(--font-body)}
.pv .bar .k{color:#a9b3bf;font-size:13px;letter-spacing:.1em;margin-left:auto}
.pv .close{background:transparent;border:1px solid #3a4656;color:#fff;width:40px;height:40px;border-radius:50%;font-size:22px;cursor:pointer}
.pv .stage{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;background:#000}
.pv .pane{margin:0;position:absolute;inset:0;opacity:0;transition:opacity .35s ease}
.pv .pane.in{opacity:1}
.pv .pane img,.pv .pane video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;background:#000}
.pv .pane .tag{position:absolute;left:14px;top:14px;font-family:var(--font-display);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;background:rgba(6,12,20,.7);border:1px solid rgba(255,255,255,.25);border-radius:2px}
.pv .pane .tag.after{background:#fff;color:#0b0d10;border-color:#fff;font-weight:600}
.pv .arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;background:rgba(6,12,20,.55);border:1px solid #3a4656;color:#fff;width:50px;height:50px;border-radius:50%;font-size:24px;cursor:pointer}
.pv .arrow:hover{background:#fff;color:#0b0d10}
.pv .prev{left:14px}.pv .next{right:14px}
.pv .foot{padding:10px var(--gutter);padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center}
.pv .thumbs{display:flex;gap:6px;overflow-x:auto;max-width:100%;scrollbar-width:thin;padding-bottom:2px}
.pv .thumbs button{flex:none;width:64px;height:46px;border:1px solid #3a4656;padding:0;background:#000;cursor:pointer;opacity:.5;position:relative}
.pv .thumbs button[aria-current="true"]{opacity:1;border-color:#fff}
.pv .thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.pv .thumbs .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;text-shadow:0 0 6px #000}
@media (max-width:760px){.pv .arrow{width:42px;height:42px;font-size:20px}.pv .prev{left:8px}.pv .next{right:8px}.pv .bar{gap:8px 12px;padding-block:8px}.pv .bar .t{font-size:14px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pv .bar .m{flex-basis:100%;order:3;font-size:12px;margin-top:-4px}.pv .bar .k{font-size:12px}.pv .close{width:34px;height:34px;font-size:18px}.pv .thumbs button{width:52px;height:38px}}

/* approach */
.steps{display:grid;gap:16px 28px;grid-template-columns:repeat(3,1fr);margin-top:26px;counter-reset:step}
@media (max-width:820px){.steps{grid-template-columns:1fr 1fr}}@media (max-width:520px){.steps{grid-template-columns:1fr}}
.step{border-top:1px solid var(--line);padding-top:16px;min-width:0;display:block;text-decoration:none;color:inherit;position:relative;transition:border-color .25s}
.step:hover{border-top-color:var(--ink)}
.step .more{display:inline-block;margin-top:8px;font-family:var(--font-display);font-size:13px;letter-spacing:.06em;font-weight:600;color:var(--ink);border-bottom:1.5px solid transparent;transition:border-color .2s}
.step:hover .more{border-bottom-color:var(--ink)}
.step::before{counter-increment:step;content:"0" counter(step);font-family:var(--font-display);color:var(--copper);font-size:13px;letter-spacing:.16em;font-weight:600}
.step h2{font-size:19px;margin-top:8px}
.step p{color:var(--muted);font-size:15.5px;margin-top:6px}

/* about */
.about{display:grid;gap:36px;grid-template-columns:1.1fr .9fr;margin-top:12px;font-size:14.5px}
@media (max-width:860px){.about{grid-template-columns:1fr}}
.about p+p{margin-top:10px}
.person{border-left:2px solid var(--copper);padding:2px 0 2px 18px;margin-top:12px}
.person b{font-family:var(--font-display);font-size:18px;font-weight:600}
.person .pmeta{display:inline-flex;flex-wrap:wrap;gap:4px 14px;margin-left:12px;vertical-align:baseline}
.person .ptel,.person .pmail{font-family:var(--font-display);font-size:15px;color:var(--copper);text-decoration:none;white-space:nowrap}
.person .ptel:hover{text-decoration:underline}
.person p{color:var(--muted);font-size:14.5px;margin-top:3px}
.values{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.values span{font-size:13px;border:1px solid var(--line);padding:4px 11px;color:var(--muted);border-radius:999px}
.trustlist{display:grid;gap:9px;margin-top:16px;font-size:14.5px}
.trustlist div{display:flex;gap:12px;align-items:baseline}
.trustlist b{font-family:var(--font-display);font-weight:600;min-width:110px;color:var(--copper)}

/* contact */
.watermark{position:absolute;right:0;bottom:0;width:min(56vw,720px);opacity:.09;pointer-events:none;z-index:0;max-width:none;margin:0}
.watermark img{width:100%;height:auto}
.wm-page{background:var(--paper) radial-gradient(1200px 600px at 100% 100%,rgba(15,42,68,.07),transparent 60%)}
.wm-page>*{position:relative;z-index:1}
.wm-page>.watermark{position:absolute;z-index:0}
.contact{display:grid;gap:36px;grid-template-columns:.7fr 1.3fr;margin-top:10px}
.contact-page .watermark{right:auto;left:0;bottom:0;width:min(46vw,560px)}
@media (max-width:860px){.contact{grid-template-columns:1fr}}
.info dl{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin:0;font-size:15.5px}
.info dt{color:var(--muted)}.info dd{margin:0}
.info .big{font-family:var(--font-display);font-size:26px;font-weight:700}
form{border:1px solid var(--line);padding:16px 18px;background:rgba(255,255,255,.92);border-radius:4px;box-shadow:0 8px 30px rgba(12,21,34,.06)}
.row{display:grid;gap:12px;grid-template-columns:1fr 1fr;margin-top:8px}
.row.r3{grid-template-columns:1fr 1fr 1fr}
@media (max-width:760px){.row.r3{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.row.r3{grid-template-columns:1fr}}
.row:first-child{margin-top:0}
@media (max-width:560px){.row{grid-template-columns:1fr}}
label{display:block;font-size:13px;font-weight:700;margin-bottom:4px;letter-spacing:.02em}
input,select,textarea{width:100%;font:inherit;font-size:15px;padding:8px 10px;border:1px solid var(--line);border-radius:3px;background:var(--paper);color:var(--fg)}
.field{margin-top:8px;min-width:0}
.send{display:flex;gap:16px;align-items:center;margin-top:12px;flex-wrap:wrap}
.send .btn{margin-left:auto}
.hint{font-size:13px;color:var(--muted);margin-top:4px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--muted);flex:1;min-width:260px}
.consent input{width:auto;margin-top:3px}
.ok{display:none;margin-top:12px;padding:10px 14px;border:1px solid var(--copper);font-size:15px;border-radius:3px}
.ok.show{display:block}

/* ---------- step pages (v11): approche-1 … approche-6 ---------- */
.step-page{padding-top:0;gap:0}
.step-page>*{max-width:var(--max)}
.progress{display:flex;align-items:center;gap:18px;padding:12px 0 8px;font-family:var(--font-display);flex-wrap:wrap}
.pback{color:var(--muted);text-decoration:none;font-size:13.5px;letter-spacing:.04em;white-space:nowrap}
.pback:hover{color:var(--ink)}
.psteps{display:flex;flex:1;min-width:0;gap:0;position:relative}
.psteps::before{content:"";position:absolute;left:14px;right:14px;top:13px;height:1px;background:var(--line)}
.pstep{flex:1;position:relative;text-decoration:none;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.pstep .pn{width:28px;height:28px;border-radius:50%;background:var(--paper);border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:11px;letter-spacing:.06em;font-weight:600;position:relative;z-index:1;transition:all .2s}
.pstep .pl{font-size:12px;letter-spacing:.04em;white-space:nowrap}
.pstep.done .pn{background:#fff;border-color:var(--ink);color:var(--ink)}
.pstep[aria-current="step"] .pn{background:var(--ink);color:#fff;border-color:var(--ink);transform:scale(1.15)}
.pstep[aria-current="step"] .pl{color:var(--ink);font-weight:600}
.pstep:hover .pn{border-color:var(--ink)}
.pcount{display:none;font-size:13px;color:var(--muted);letter-spacing:.06em}
@media (max-width:760px){.psteps{display:none}.pcount{display:inline}.progress{justify-content:space-between}}
.shero{position:relative;border-radius:6px;overflow:hidden;color:#fff;background:var(--ink) var(--bg) center/cover no-repeat;min-height:clamp(260px,38vh,380px);display:flex;align-items:flex-end;isolation:isolate;margin-top:6px}
.shero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,12,20,.86) 0%,rgba(6,12,20,.62) 55%,rgba(6,12,20,.35) 100%);z-index:-1}
.shero-in{position:relative;padding:28px clamp(22px,4vw,48px) 30px;max-width:720px}
.shero .bignum{position:absolute;right:clamp(14px,4vw,40px);top:-6px;font-family:var(--font-display);font-weight:700;font-size:clamp(90px,16vw,180px);line-height:1;color:rgba(255,255,255,.10);letter-spacing:-.04em;pointer-events:none;user-select:none}
.shero .eyebrow{color:#dfe4ea}
.shero h1{font-size:clamp(30px,4.2vw,50px);font-weight:700;margin-top:10px;text-shadow:0 2px 20px rgba(0,0,0,.45)}
.shero .promise{font-size:clamp(16px,1.6vw,19px);margin-top:12px;color:#e6ebf1;font-style:italic;max-width:54ch;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.sbody{display:grid;grid-template-columns:1.25fr .95fr;gap:36px;margin-top:34px;align-items:start}
@media (max-width:860px){.sbody{grid-template-columns:1fr;gap:24px}}
.sbody h2,.faqs h2,.drawings h2,.tiers h2,.gallery h2{font-size:21px;margin-top:0}
.sbody h2+*{margin-top:12px}
.scol h2:not(:first-child){margin-top:30px}
.why{font-size:17px;line-height:1.6;max-width:62ch}
ul.checks,ul.dots,ul.pb-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
ul.checks li{position:relative;padding-left:30px;font-size:15.5px;line-height:1.5}
ul.checks li::before{content:"";position:absolute;left:0;top:4px;width:18px;height:18px;border:1.5px solid var(--ink);border-radius:50%;background:#fff}
ul.checks li::after{content:"";position:absolute;left:6px;top:8px;width:6px;height:9px;border:solid var(--ink);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
ul.dots li{position:relative;padding-left:18px;font-size:15px;line-height:1.5}
ul.dots li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;background:var(--copper);border-radius:50%}
.scard{background:#fff;border:1px solid var(--line);border-radius:6px;padding:24px 26px 26px;box-shadow:0 8px 30px rgba(12,21,34,.06)}
.scard h2{font-size:14px;text-transform:uppercase;letter-spacing:.14em;color:var(--copper);font-weight:600}
.scard h2:not(:first-child){margin-top:22px}
.scard .time{font-family:var(--font-display);font-size:18px;font-weight:600;line-height:1.3;margin-top:8px}
/* blueprint box */
.planbox{margin-top:40px;background:var(--navy);color:#fff;border-radius:6px;position:relative;overflow:hidden;isolation:isolate}
.planbox::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.35;background-image:linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:80px 80px,80px 80px,16px 16px,16px 16px}
.pb-in{padding:28px clamp(22px,4vw,44px) 30px;position:relative}
.pb-ico{width:44px;height:44px;position:absolute;right:clamp(22px,4vw,44px);top:26px;color:#dfe4ea;opacity:.8}
.planbox h2{font-size:22px;color:#fff;padding-right:60px}
ul.pb-list{margin-top:14px;gap:10px;max-width:70ch}
ul.pb-list li{position:relative;padding-left:22px;font-size:15.5px;line-height:1.55;color:#e6ebf1}
ul.pb-list li::before{content:"";position:absolute;left:0;top:11px;width:10px;height:1.5px;background:#fff}
/* drawings, ladder, gallery (step 4) */
.drawings,.tiers,.gallery{margin-top:40px}
.dgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
@media (max-width:900px){.dgrid{grid-template-columns:repeat(2,1fr)}}
.dtile{background:#fff;border:1px solid var(--line);border-radius:6px;padding:18px 16px 16px;min-width:0}
.dico{display:block;width:34px;height:34px;color:var(--ink)}
.dico svg{width:100%;height:100%}
.dtile p{margin-top:12px;font-size:14.5px;line-height:1.45}
.tiers .eyebrow{margin-top:14px}
.ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:10px;border-top:3px solid var(--ink);position:relative}
.rung{padding:14px 16px 16px 0;position:relative;min-width:0}
.rung+.rung{padding-left:16px;border-left:1px solid var(--line)}
.rung::before{content:"";position:absolute;left:0;top:-3px;width:10px;height:10px;background:var(--ink);transform:translate(-50%,-40%);border-radius:50%}
.rung:first-child::before{left:0;transform:translate(0,-40%)}
.rung .amt{font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:-.01em}
.rung p{color:var(--muted);font-size:14px;margin-top:6px;line-height:1.45}
@media (max-width:760px){.ladder{grid-template-columns:1fr;border-top:0;border-left:3px solid var(--ink)}.rung,.rung+.rung{padding:12px 0 12px 18px;border-left:0}.rung::before,.rung:first-child::before{left:-3px;top:18px;transform:translate(-50%,0)}}
.tnote{margin-top:16px;font-size:15px;color:var(--muted);font-style:italic;max-width:70ch}
.ggrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}
@media (max-width:900px){.ggrid{grid-template-columns:repeat(2,1fr)}}
.gtile{border:0;padding:0;background:#fff;border-radius:6px;overflow:hidden;cursor:pointer;text-align:left;font:inherit;color:inherit;box-shadow:0 1px 2px rgba(0,0,0,.06);min-width:0}
.gtile img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#dfe4ea;transition:transform .5s}
.gtile:hover img{transform:scale(1.03)}
.gtile span{display:block;padding:9px 12px;font-size:13px;color:var(--muted)}
/* faq accordion, law */
.faqs{margin-top:40px}
details.faq,details.law{border-top:1px solid var(--line)}
details.faq:last-of-type{border-bottom:1px solid var(--line)}
details.law{margin-top:18px;border-bottom:1px solid var(--line)}
details summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 2px;font-family:var(--font-display);font-weight:600;font-size:16.5px}
details summary::-webkit-details-marker{display:none}
details .chev{width:10px;height:10px;border:solid var(--ink);border-width:0 1.5px 1.5px 0;transform:rotate(45deg);transition:transform .25s;flex:none;margin-right:6px}
details[open] .chev{transform:rotate(-135deg)}
details.faq p{padding:0 2px 16px;color:var(--muted);font-size:15.5px;line-height:1.55;max-width:70ch}
details.law ul{padding:0 2px 16px}
.step-page .cta{justify-content:center;margin-top:30px}
.stepnav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px;margin-bottom:40px}
@media (max-width:640px){.stepnav{grid-template-columns:1fr}}
.ncard{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);border-radius:6px;padding:16px 18px;transition:border-color .2s,transform .2s}
.ncard:hover{border-color:var(--ink);transform:translateY(-2px)}
.ncard.next{text-align:right;grid-column:2}
.ncard.prev{grid-column:1}
@media (max-width:640px){.ncard.next,.ncard.prev{grid-column:auto}}
.ncard .nl{display:block;font-family:var(--font-display);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--copper)}
.ncard b{display:block;font-family:var(--font-display);font-size:17px;margin-top:4px}

/* privacy page (v12) */
.legal-body{max-width:72ch;margin-top:18px;font-size:15.5px;line-height:1.6}
.legal-body h2{font-size:18px;margin-top:22px}
.legal-body p{margin-top:8px}
.legal-body .small{font-size:13.5px;color:var(--muted)}
footer a{color:#b9c3cf}
footer a:hover{color:#fff}
.hint{font-size:13px;color:var(--muted);margin-top:4px}