/* Girmit + Roots revamp mockup, 10 Oct 2026. Graphite theme (30 Sep direction), live type tokens. */
:root{
  --paper:#F4F5F2; --surface:#FFFFFF; --surface-2:#E9ECE7;
  --ink:#121618; --ink-2:#3E4945; --ink-3:#55605B;
  --rule:#CDD3CB; --rule-soft:#E0E4DE;
  --ochre:#85590F; --verdigris:#1F6A61; --verdigris-d:#174F49; --rust:#8A3424;
  --btn-ink:#FFFFFF; --duo:#111416;
  --f-d:"Newsreader",Georgia,"Times New Roman",serif;
  --f-b:"Public Sans","Helvetica Neue",Arial,sans-serif;
  --f-m:"IBM Plex Mono","SF Mono",Menlo,monospace;
  --hdr:60px; --gut:20px; --max:1200px; --r:8px;
  --ease:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --lift:0 1px 2px rgba(16,24,20,.06),0 10px 28px -18px rgba(16,24,20,.35);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#111416; --surface:#1A1E21; --surface-2:#242A2E;
    --ink:#F0EEE8; --ink-2:#C4CAC6; --ink-3:#9EA7A3;
    --rule:#353D42; --rule-soft:#272D31;
    --ochre:#DDAE63; --verdigris:#6CC4B3; --verdigris-d:#9ADCCF; --rust:#EC9580;
    --btn-ink:#0C1112;
    --lift:0 1px 0 rgba(255,255,255,.035) inset,0 12px 30px -18px rgba(0,0,0,.75);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#111416; --surface:#1A1E21; --surface-2:#242A2E;
  --ink:#F0EEE8; --ink-2:#C4CAC6; --ink-3:#9EA7A3;
  --rule:#353D42; --rule-soft:#272D31;
  --ochre:#DDAE63; --verdigris:#6CC4B3; --verdigris-d:#9ADCCF; --rust:#EC9580;
  --btn-ink:#0C1112;
  --lift:0 1px 0 rgba(255,255,255,.035) inset,0 12px 30px -18px rgba(0,0,0,.75);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr) + 16px);background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.65 var(--f-b);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,picture{display:block;max-width:100%}
h1,h2,h3,h4{font-family:var(--f-d);font-weight:400;line-height:1.1;margin:0;letter-spacing:-.01em;font-optical-sizing:auto}
p{margin:0 0 1em}
a{color:var(--verdigris);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--verdigris-d);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--ochre);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:6px;z-index:200;text-decoration:none;font-weight:600}
.skip:focus{top:12px}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.mono{font-family:var(--f-m)}
.ship,.yr{font-family:var(--f-d);font-style:italic}
.yr{color:var(--ochre);font-style:italic}
.eyebrow{font:600 .78rem/1.3 var(--f-m);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 .9rem}
.eyebrow b{color:var(--ochre);font-weight:600}
.lead{font-size:1.2rem;line-height:1.6;color:var(--ink-2);max-width:60ch}
.prose{max-width:66ch}
.prose p{color:var(--ink-2)}
.prose p strong{color:var(--ink)}

/* launch strip + header */
.util{background:var(--surface-2);border-bottom:1px solid var(--rule-soft);font:500 .78rem/1.4 var(--f-m);color:var(--ink-2)}
.util .wrap{display:flex;gap:.6rem 1.2rem;justify-content:space-between;align-items:center;padding-top:7px;padding-bottom:7px;flex-wrap:wrap}
.util p{margin:0}
.hdr{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--rule);height:var(--hdr)}
.hdr .wrap{height:100%;display:flex;align-items:center;gap:1.2rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);margin-right:auto}
.brand svg{width:34px;height:34px;flex:none}
.brand b{font:400 1.7rem/1 var(--f-d);letter-spacing:-.02em}
.brand small{display:none;font:500 .72rem/1.2 var(--f-m);color:var(--ink-3);letter-spacing:.04em;max-width:11ch}
.nav{display:flex;gap:.2rem}
.nav a{padding:.55rem .8rem;border-radius:6px;text-decoration:none;color:var(--ink-2);font-size:.95rem;font-weight:500;min-height:44px;display:inline-flex;align-items:center}
.nav a:hover{background:var(--surface-2);color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ochre)}
.tbtn{appearance:none;border:1px solid var(--rule);background:var(--surface);color:var(--ink);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer}
.tbtn:hover{border-color:var(--ink-3)}
.tbtn svg{width:20px;height:20px}
.tbtn .sun{display:none}
:root[data-theme="dark"] .tbtn .sun{display:block}
:root[data-theme="dark"] .tbtn .moon{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tbtn .sun{display:block}:root:not([data-theme="light"]) .tbtn .moon{display:none}}
.burger{display:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.7rem 1.4rem;border-radius:999px;border:1.5px solid var(--verdigris);background:var(--verdigris);color:var(--btn-ink);font:600 1rem/1.2 var(--f-b);text-decoration:none;cursor:pointer;transition:background .18s var(--ease),transform .18s var(--ease),border-color .18s}
.btn:hover{background:var(--verdigris-d);border-color:var(--verdigris-d);color:var(--btn-ink)}
.btn:active{transform:scale(.98)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn.ghost:hover{background:var(--surface-2);border-color:var(--ink-3);color:var(--ink)}
.hdr .btn{min-height:44px;padding:.5rem 1.1rem;font-size:.92rem}

/* photos */
.ph{position:relative;margin:0;border-radius:var(--r);overflow:hidden;background:var(--surface-2)}
.ph picture,.ph img{width:100%;height:100%;object-fit:cover}
.ph::after{content:"";position:absolute;inset:0;background:var(--duo);opacity:.08;pointer-events:none}
.r169{aspect-ratio:16/9}.r43{aspect-ratio:4/3}.r45{aspect-ratio:4/5}.r21{aspect-ratio:21/9}.r1{aspect-ratio:1/1}
.cap{font:500 .8rem/1.45 var(--f-m);color:var(--ink-3);margin:.55rem 0 0;max-width:62ch}
.cap b{color:var(--ink-2);font-weight:600}
figure.fig{margin:0}

/* sections */
section{padding:clamp(3.2rem,7vw,6rem) 0}
.sec-head{max-width:46rem;margin-bottom:clamp(1.8rem,4vw,3rem)}
.sec-head h2{font-size:clamp(2rem,3.6vw + .8rem,3.4rem)}
.sec-head p{margin-top:1rem;color:var(--ink-2)}
.rule-top{border-top:1px solid var(--rule)}
.tint{background:var(--surface);border-block:1px solid var(--rule)}

/* hero */
.hero{padding:clamp(2rem,5vw,4rem) 0 clamp(2.4rem,5vw,4rem)}
.hero__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(1.5rem,4vw,4rem);align-items:center}
.hero h1{font-size:clamp(2.6rem,4.4vw + .8rem,4.5rem);line-height:1.02;letter-spacing:-.025em;font-weight:400;margin-bottom:1.3rem}
.hero h1 em{font-style:italic;color:var(--ochre)}
.promise{font:400 clamp(1.5rem,2vw + .6rem,2.1rem)/1.2 var(--f-d);margin:1.4rem 0 1.6rem;color:var(--ink)}
.promise span{display:inline-block;margin-right:.55em}
.promise span:last-child{margin:0}
.promise span::after{content:""}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem}
.hero__img{align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.hero__img .ph{aspect-ratio:1/1}
.hero__img .ph img{object-position:74% 50%}

/* decoder */
.dec{margin-top:clamp(2rem,4vw,3.4rem);background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:clamp(1.2rem,3vw,2.2rem);box-shadow:var(--lift)}
.dec__top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(1.2rem,3vw,3rem);align-items:start}
.dec__label{font:600 .78rem/1.4 var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:0 0 .8rem}
.dec__num{display:flex;align-items:baseline;flex-wrap:nowrap;font:500 min(3.1rem,9.2vw)/1.1 var(--f-m);letter-spacing:-.02em}
.dec__num .sl{color:var(--ink-3);padding:0 .08em;font-weight:400}
.seg{appearance:none;background:transparent;border:0;border-bottom:3px solid var(--rule);padding:.12em .1em .05em;margin:0;font:inherit;color:var(--ink);cursor:pointer;border-radius:4px 4px 0 0;min-height:44px;transition:background .2s,border-color .2s,color .2s}
.seg:hover,.seg:focus-visible,.seg.is-on{background:color-mix(in srgb,var(--ochre) 16%,transparent);border-bottom-color:var(--ochre)}
.seg:focus-visible{outline-offset:2px}
.dec__read{margin:1rem 0 0;padding:.9rem 1rem;border-left:3px solid var(--ochre);background:var(--surface-2);border-radius:0 8px 8px 0;font-size:1rem;line-height:1.55;color:var(--ink);min-height:6.4em}
.dec__read b{font-family:var(--f-m);font-weight:600}
.dec__read .ship{font-size:1.08em}
.dec__hint{font-size:.95rem;color:var(--ink-2);margin:.8rem 0 0}
.chain{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.chain li{position:relative;border:1px solid var(--rule);border-radius:10px;padding:.8rem 1rem;background:var(--paper);transition:border-color .22s,background .22s,transform .22s var(--ease)}
.chain li+li::before{content:"";position:absolute;left:1.6rem;top:-.75rem;height:.75rem;border-left:2px solid var(--rule)}
.chain .g{font:600 .72rem/1.3 var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:0 0 .15rem;display:block}
.chain .t{font:400 1.1rem/1.3 var(--f-d);display:block}
.chain .n{font:500 .95rem/1.4 var(--f-m);color:var(--ink-2);display:block;margin-top:.1rem}
.chain .row{display:block;padding:.15rem .4rem;margin:.25rem -.4rem 0;border-radius:6px;transition:background .2s}
.chain li.is-on{border-color:var(--ochre);background:color-mix(in srgb,var(--ochre) 10%,var(--paper))}
.chain .row.is-on{background:color-mix(in srgb,var(--ochre) 24%,transparent)}
.dec__foot{margin:1rem 0 0;font-size:.85rem;color:var(--ink-3);font-family:var(--f-m)}
@media (max-width:900px){
  .dec__top{grid-template-columns:1fr}
  .dec__read{min-height:0}
}

/* promises */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.trio>div{padding:1.6rem 1.6rem 1.8rem 0}
.trio>div+div{padding-left:1.6rem;border-left:1px solid var(--rule)}
.trio h3{font-size:2.1rem;margin-bottom:.5rem}
.trio h3 em{color:var(--ochre)}
.trio p{margin:0;color:var(--ink-2);font-size:1rem}
.honest{margin:1.6rem 0 0;font-size:1rem;color:var(--ink-2);max-width:70ch}
.honest strong{color:var(--ink)}

/* why now */
.why{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(1.5rem,5vw,5rem);align-items:start}
.why h2{font-size:clamp(2rem,3vw + .8rem,3rem)}
.why .prose p{font-size:1.05rem}
.twoway{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.4rem}
.twoway>div{border:1px solid var(--rule);border-radius:10px;padding:1rem 1.1rem;background:var(--surface)}
.twoway h3{font:600 .8rem/1.3 var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:var(--ochre);margin-bottom:.4rem}
.twoway p{margin:0;font-size:.98rem;color:var(--ink-2)}

/* voyage (motion 1) */
.voyage{padding-bottom:clamp(2rem,4vw,3rem)}
.vgrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.5rem,4vw,4rem);align-items:start}
.vsteps{list-style:none;margin:0;padding:0;grid-column:1;grid-row:1}
.vstage-col{grid-column:2;grid-row:1;align-self:stretch}
.vstep{padding:0 0 0 1.4rem;border-left:2px solid var(--rule);margin:0;position:relative;transition:border-color .3s}
.vstep+.vstep{margin-top:0}
.vstep__in{padding:1.6rem 0 2.2rem}
.vstep h3{font-size:clamp(1.6rem,1.4vw + 1rem,2.2rem);margin:.2rem 0 .8rem}
.vstep p{color:var(--ink-2);margin:0 0 .8em}
.vstep .when{font:600 .78rem/1.3 var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:var(--ochre);margin:0}
.vstep{border-left-width:3px}.vstep.is-active{border-left-color:var(--ochre)}
.fig-stage{margin:0;position:relative}
.stage{position:relative;border:1px solid var(--rule);border-radius:12px;background:var(--surface);overflow:hidden;box-shadow:var(--lift)}
.stage__paper{position:relative;aspect-ratio:1000/780;width:100%}
.stage svg.map{position:absolute;inset:0;width:100%;height:100%}
.map .land{fill:var(--surface-2);stroke:var(--ink-3);stroke-width:1.3;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.map .grat{stroke:var(--rule-soft);stroke-width:1;vector-effect:non-scaling-stroke}
.map .grat.eq{stroke:var(--rule);stroke-dasharray:2 6}
.map .ghost{fill:none;stroke:var(--ink-3);stroke-opacity:.55;stroke-width:2;stroke-dasharray:2 7;stroke-linecap:round;vector-effect:non-scaling-stroke}
.map .route{fill:none;stroke:var(--ochre);stroke-width:4.4;stroke-linecap:round;stroke-linejoin:round}
.map .route.b{stroke-width:3.4}
.map .lbl{font:600 17px var(--f-m);letter-spacing:.34em;fill:var(--ink-3);fill-opacity:.8;text-anchor:middle}
.map .lbl.land-l{fill-opacity:.65}
.map .vdot{fill:var(--ochre);fill-opacity:.9}
.map .port{fill:var(--paper);stroke:var(--ink);stroke-width:2.4;vector-effect:non-scaling-stroke}
.map .ship-g{color:var(--ink)}
.map .ship-g .hull{fill:var(--ink)}
.map .ship-g .sail{fill:var(--paper);stroke:var(--ink);stroke-width:1.4;vector-effect:non-scaling-stroke}
.pin{position:absolute;transform:translate(0,-50%);font:600 .74rem/1.2 var(--f-m);letter-spacing:.04em;color:var(--ink);white-space:nowrap;text-shadow:0 0 3px var(--surface),0 0 3px var(--surface),0 0 6px var(--surface);pointer-events:none}
.pin.l{transform:translate(-100%,-50%);padding-right:20px;text-align:right}
.pin.r{padding-left:12px}
.pin small{display:block;font-weight:500;color:var(--ink-2);font-size:.7rem}
.pin--depot{opacity:1}
.counter{position:absolute;right:4%;bottom:52px;text-align:right;pointer-events:none}
.counter .y{font:italic 400 clamp(2.4rem,4.2vw,3.7rem)/1 var(--f-d);color:var(--ochre);letter-spacing:-.02em;font-variant-numeric:tabular-nums;display:block}
.counter .l{font:600 .72rem/1.3 var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);display:block;margin-top:.2rem}
.inset{position:absolute;right:4%;bottom:calc(52px + clamp(2.4rem,4.2vw,3.7rem) + 44px);width:min(38%,300px);background:var(--paper);border:1px solid var(--rule);border-radius:10px;padding:.7rem .85rem;box-shadow:var(--lift)}
.inset h4{font:600 .7rem/1.3 var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.4rem}
.inset ol{list-style:none;margin:0;padding:0;position:relative}
.inset li{position:relative;padding:.12rem 0 .12rem 1.5rem;font-size:.82rem;line-height:1.3;color:var(--ink)}
.inset li::before{content:"";position:absolute;left:.1rem;top:.45rem;width:.6rem;height:.6rem;border-radius:50%;border:2px solid var(--ochre);background:var(--paper)}
.inset li+li::after{content:"";position:absolute;left:calc(.1rem + .3rem - 1px);top:-.5rem;height:.9rem;border-left:2px solid var(--ochre)}
.inset li:last-child::before{background:var(--ochre)}
.stage__caption{padding:.6rem .9rem;border-top:1px solid var(--rule-soft);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font:500 .74rem/1.4 var(--f-m);color:var(--ink-3)}
.dots{display:flex;gap:6px;align-items:center}
.dots i{width:22px;height:4px;border-radius:2px;background:var(--rule);transition:background .3s}
.dots i.on{background:var(--ochre)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 0;padding:0;list-style:none}
.chips li{font:500 .88rem/1.2 var(--f-d);font-style:italic;border:1px solid var(--rule);border-radius:999px;padding:.4rem .8rem;color:var(--ink-2);background:var(--surface)}
.chips li span{font-style:normal;font-family:var(--f-m);font-size:.75rem;color:var(--ink-3)}
/* static (default) state: finished map, chapters as normal paragraphs */
@media (max-width:899px){
  .vgrid{grid-template-columns:1fr}
  .vstage-col{grid-column:1;grid-row:1}
  .vsteps{grid-column:1;grid-row:2}
  .counter{position:static;text-align:left;padding:.4rem .9rem .2rem}
  .counter .y{font-size:2.4rem;display:inline}
  .counter .l{display:inline;margin-left:.6rem}
  .inset{position:static;width:auto;margin:.5rem .9rem .8rem;box-shadow:none}
  .vstep__in{padding:1rem 0 1.4rem}
}
@media (min-width:900px) and (min-height:600px){
  .vstage-col{position:relative}
  .fig-stage{position:sticky;top:calc(var(--hdr) + 14px)}
  .vstep__in{min-height:min(74svh,640px);display:flex;flex-direction:column;justify-content:center}
}
@media (min-width:900px) and (max-height:599px){
  .vstep__in{padding:1.4rem 0 1.8rem}
}
.mo .vstep:not(.is-active) .vstep__in{opacity:.5}
.mo .vstep__in{transition:opacity .35s var(--ease)}
.mo .fig-stage .counter .y{will-change:contents}
html.mo .vdot{opacity:0}
html.mo .inset{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
html.mo .stage.is-split .inset{opacity:1;transform:none}
html.mo .pin--depot{opacity:0;transition:opacity .4s}
html.mo .stage.is-depot .pin--depot{opacity:1}
html.mo .ship-g{opacity:0}
.inset .ln{stroke:var(--ochre)}

/* features */
.feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--rule)}
.feat>div{padding:1.5rem 1.6rem 1.8rem 0;border-bottom:1px solid var(--rule)}
.feat>div:not(:nth-child(3n+1)){padding-left:1.6rem;border-left:1px solid var(--rule)}
.feat h3{font-size:1.5rem;margin-bottom:.5rem}
.feat p{margin:0;color:var(--ink-2);font-size:1rem}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,5vw,4.5rem);align-items:center}
.split h2{font-size:clamp(2rem,3vw + .8rem,3rem);margin-bottom:1rem}
.split.rev>:first-child{order:2}

/* notify */
.notify{background:var(--surface-2);border-block:1px solid var(--rule)}
.form{display:grid;gap:1rem;max-width:34rem}
.field label{display:block;font-weight:600;font-size:.95rem;margin-bottom:.35rem}
.field .hint{font-size:.88rem;color:var(--ink-3);margin:.3rem 0 0}
.field input[type=email],.field input[type=text],.field textarea,.field select{width:100%;min-height:48px;padding:.65rem .9rem;border:1.5px solid var(--ink-3);border-radius:8px;background:var(--surface);color:var(--ink);font:400 1rem/1.4 var(--f-b)}
.field textarea{min-height:9rem;resize:vertical}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{outline:3px solid var(--ochre);outline-offset:2px}
.check{display:flex;gap:.7rem;align-items:flex-start;font-size:.95rem;color:var(--ink-2)}
.check input{width:22px;height:22px;margin-top:.15rem;accent-color:var(--verdigris);flex:none}
.status{margin:0;padding:.8rem 1rem;border-radius:8px;border:1px solid var(--verdigris);background:color-mix(in srgb,var(--verdigris) 12%,var(--paper));font-size:.95rem}
.status[hidden]{display:none}
.privacy-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.privacy-grid>div{border:1px solid var(--rule);background:var(--surface);border-radius:10px;padding:1.2rem 1.3rem}
.privacy-grid h3{font-size:1.35rem;margin-bottom:.4rem}
.privacy-grid p{margin:0;color:var(--ink-2);font-size:.98rem}

/* tree grows (motion 2) */
.grow{padding-top:clamp(3rem,6vw,5rem)}
.ggrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(1.5rem,4vw,4rem);align-items:start}
.gsteps{list-style:none;margin:0;padding:0}
.gstep{border-left:2px solid var(--rule);padding-left:1.4rem;position:relative;transition:border-color .3s}
.gstep__in{padding:1.4rem 0 2rem}
.gstep h3{font-size:clamp(1.5rem,1.2vw + 1rem,2rem);margin:.15rem 0 .7rem}
.gstep p{color:var(--ink-2);margin:0 0 .7em}
.gstep .tag{font:600 .75rem/1.3 var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:var(--ochre);margin:0}
.gstep{border-left-width:3px}.gstep.is-active{border-left-color:var(--ochre)}
.gstage-col{grid-column:2;grid-row:1;align-self:stretch}
.gsteps{grid-column:1;grid-row:1}
.tree-stage{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:.6rem .6rem .2rem;box-shadow:var(--lift)}
.tree-stage svg{width:100%;height:auto;aspect-ratio:520/720}
.tree .node rect{fill:var(--paper);stroke:var(--rule);stroke-width:1.5;vector-effect:non-scaling-stroke}
.tree .node.chain rect{stroke:var(--verdigris);stroke-width:2}
.tree .node.dim rect{fill:var(--surface);stroke-dasharray:none}
.tree .node.ghost rect{fill:none;stroke:var(--rule);stroke-dasharray:4 5}
.tree .t1{font:600 11.5px var(--f-m);letter-spacing:.1em;fill:var(--ink-3);text-transform:uppercase}
.tree .t2{font:400 22px var(--f-d);fill:var(--ink)}
.tree .t3{font:500 14.5px var(--f-m);fill:var(--ink-2)}
.tree .t4{font:italic 400 15px var(--f-d);fill:var(--ochre)}
.tree .node.dim .t2{fill:var(--ink-2);font-size:19px}
.tree .link{fill:none;stroke:var(--rule);stroke-width:2.2;stroke-linecap:round}
.tree .link.chain{stroke:var(--verdigris);stroke-width:3}
.tree .link.partner{stroke-dasharray:5 5}
.tree .brace{fill:none;stroke:var(--ink-3);stroke-width:1.6;vector-effect:non-scaling-stroke}
.tree .btxt{font:600 11.5px var(--f-m);letter-spacing:.08em;fill:var(--ink-2);text-transform:uppercase}
.tree .gap rect{fill:color-mix(in srgb,var(--ochre) 18%,var(--paper));stroke:var(--ochre);stroke-width:1.6;vector-effect:non-scaling-stroke}
.tree .gap text{font:600 13px var(--f-m);fill:var(--ink)}
.tree .gap .pulse{fill:none;stroke:var(--ochre);stroke-width:2;vector-effect:non-scaling-stroke;opacity:0}
.tree-cap{margin:.4rem .5rem .6rem;font:500 .74rem/1.4 var(--f-m);color:var(--ink-3)}
html.mo .tree .node,html.mo .tree .gap,html.mo .tree .brace,html.mo .tree .btxt,html.mo .tree .ghosts{opacity:0}
html.mo .tree .link{stroke-dasharray:1;stroke-dashoffset:1}
html.mo .tree .ghosts .node{opacity:1}
.mo .gstep:not(.is-active) .gstep__in{opacity:.5}
.mo .gstep__in{transition:opacity .35s var(--ease)}
@media (max-width:899px){
  .ggrid{grid-template-columns:1fr}
  .gstage-col{grid-column:1;grid-row:1}
  .gsteps{grid-column:1;grid-row:2}
  .gstep__in{padding:1rem 0 1.4rem}
  .tree-stage svg{max-width:460px;margin:0 auto}
}
@media (min-width:900px) and (min-height:600px){
  .gstage-col{position:relative}
  .tree-stage{position:sticky;top:calc(var(--hdr) + 14px);max-height:calc(100svh - var(--hdr) - 28px);display:flex;flex-direction:column;align-items:center}
  .tree-stage svg{height:min(calc(100svh - var(--hdr) - 90px),700px);width:auto;max-width:100%}
  .gstep__in{min-height:min(72svh,600px);display:flex;flex-direction:column;justify-content:center}
}
@media (min-width:900px) and (max-height:599px){.gstep__in{padding:1.2rem 0 1.6rem}}

/* four steps + app tour lists */
.steps4{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem;counter-reset:s}
.steps4 li{border:1px solid var(--rule);border-radius:10px;padding:1.2rem 1.2rem 1.3rem;background:var(--surface);counter-increment:s}
.steps4 li::before{content:"Step " counter(s);display:block;font:600 .72rem/1.3 var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:var(--ochre);margin-bottom:.5rem}
.steps4 h3{font-size:1.4rem;margin-bottom:.4rem}
.steps4 p{margin:0;font-size:.98rem;color:var(--ink-2)}
.tour{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 2rem}
.tour dt{font:600 1.05rem/1.3 var(--f-b);margin:0 0 .15rem}
.tour dd{margin:0 0 1rem;color:var(--ink-2);font-size:1rem}

/* search */
.sbox{background:var(--surface);border:1px solid var(--rule);border-radius:12px;box-shadow:var(--lift);overflow:hidden}
.tabs{display:flex;border-bottom:1px solid var(--rule);background:var(--surface-2);overflow-x:auto}
.tabs button{appearance:none;border:0;background:transparent;color:var(--ink-2);font:600 .95rem/1.2 var(--f-b);padding:1rem 1.3rem;min-height:52px;cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ochre);background:var(--surface)}
.tabs button:hover{color:var(--ink)}
.tabpanel{padding:clamp(1.1rem,3vw,2rem)}
.tabpanel[hidden]{display:none}
.srow{display:flex;gap:.7rem;flex-wrap:wrap;align-items:flex-end}
.srow .field{flex:1 1 16rem}
.res{margin-top:1.4rem;border-top:1px solid var(--rule);padding-top:1.2rem}
.res h3{font-size:1.4rem;margin-bottom:.6rem}
.res ol,.res ul{margin:0;padding:0;list-style:none;display:grid;gap:.6rem}
.res li{border:1px solid var(--rule);border-radius:10px;padding:.8rem 1rem;background:var(--paper);display:grid;grid-template-columns:auto 1fr;gap:.2rem 1rem;align-items:baseline}
.res li .n{font:600 1.15rem/1.3 var(--f-m);color:var(--ink)}
.res li p{margin:0;font-size:.98rem;color:var(--ink-2)}
.notice{border:1px dashed var(--ink-3);border-radius:10px;padding:.9rem 1.1rem;font-size:.95rem;color:var(--ink-2);background:var(--surface)}
.notice b{color:var(--ink)}
.lists{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.lists h3{font-size:1.4rem;margin-bottom:.6rem}
.lists ul{margin:0;padding-left:1.2rem;color:var(--ink-2)}
.lists li{margin:.35rem 0}
.sample-tag{display:inline-block;font:600 .7rem/1 var(--f-m);letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--ochre);color:var(--ochre);border-radius:4px;padding:.25rem .45rem;margin-left:.5rem;vertical-align:middle}

/* share */
.share-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.4rem,4vw,3.5rem);align-items:start}
.opt{display:grid;gap:.6rem;margin:1rem 0}
.opt label{display:flex;gap:.8rem;align-items:flex-start;border:1.5px solid var(--rule);border-radius:10px;padding:.85rem 1rem;background:var(--surface);cursor:pointer;min-height:48px}
.opt input{margin-top:.3rem;width:20px;height:20px;accent-color:var(--verdigris);flex:none}
.opt label:has(input:checked){border-color:var(--verdigris);background:color-mix(in srgb,var(--verdigris) 9%,var(--surface))}
.opt b{display:block}
.opt span{font-size:.92rem;color:var(--ink-2)}
.mini{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:.8rem;box-shadow:var(--lift)}
.mini svg{width:100%;height:auto;aspect-ratio:480/420}
.mini .n rect{fill:var(--paper);stroke:var(--rule);stroke-width:1.5;vector-effect:non-scaling-stroke;transition:all .3s}
.mini .n text{font:400 17px var(--f-d);fill:var(--ink)}
.mini .n .s{font:500 11px var(--f-m);fill:var(--ink-3)}
.mini .l{fill:none;stroke:var(--rule);stroke-width:2;vector-effect:non-scaling-stroke}
.mini [data-in="1"] rect{stroke:var(--verdigris);fill:color-mix(in srgb,var(--verdigris) 12%,var(--paper));stroke-width:2}
.mini [data-in="0"]{opacity:.55}
.mini .l[data-in="1"]{stroke:var(--verdigris);stroke-width:2.6}
.linkbox{border:1px solid var(--rule);background:var(--paper);border-radius:8px;padding:.8rem 1rem;font:500 .92rem/1.4 var(--f-m);color:var(--ink);word-break:break-all}
.rules li{margin:.45rem 0}
.slot{border:2px dashed var(--ink-3);border-radius:12px;padding:1.4rem;display:grid;place-items:center;text-align:center;color:var(--ink-2);min-height:200px;background:var(--surface)}
.slot b{font:400 1.4rem/1.2 var(--f-d);color:var(--ink);display:block;margin-bottom:.3rem}

/* page header */
.phead{padding:clamp(2.2rem,5vw,4rem) 0 clamp(1.4rem,3vw,2.2rem)}
.phead h1{font-size:clamp(2.5rem,4.8vw + .6rem,4.6rem);line-height:1.04;letter-spacing:-.022em;max-width:15ch}
.phead h1 em{font-style:italic;color:var(--ochre)}
.phead .lead{margin-top:1.2rem}
.phead__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(1.5rem,4vw,4rem);align-items:center}
.crumb{font:500 .82rem/1.3 var(--f-m);color:var(--ink-3);margin:0 0 1.2rem}
.crumb a{color:var(--ink-2)}

/* crossing table */
.routes{border-top:1px solid var(--rule);margin:0;padding:0;list-style:none}
.routes li{display:grid;grid-template-columns:5.2rem minmax(0,1fr);gap:.2rem 1.2rem;padding:1.1rem 0;border-bottom:1px solid var(--rule)}
.routes .y{font:italic 400 1.9rem/1.1 var(--f-d);color:var(--ochre)}
.routes h3{font:600 1.1rem/1.3 var(--f-b);margin-bottom:.2rem}
.routes p{margin:0;color:var(--ink-2);font-size:1rem}
.routes li.natal{background:color-mix(in srgb,var(--ochre) 8%,transparent);margin:0 -1rem;padding-left:1rem;padding-right:1rem}
.carry{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.carry>div{border-top:2px solid var(--ochre);padding-top:.8rem}
.carry h3{font-size:1.4rem;margin-bottom:.3rem}
.carry p{margin:0;color:var(--ink-2);font-size:.98rem}

/* footer */
.ftr{border-top:1px solid var(--rule);background:var(--surface);padding:clamp(2.2rem,4vw,3.2rem) 0 2.4rem;font-size:.95rem}
.ftr .wrap{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:2rem}
.ftr .brand{margin:0 0 .8rem}
.ftr p{color:var(--ink-2);margin:0 0 .6em;max-width:48ch}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.1rem 1.5rem}
.ftr li a{display:inline-block;padding:.5rem 0;min-height:44px;color:var(--ink-2);text-decoration:none}
.ftr li a:hover{color:var(--ink);text-decoration:underline}
.ftr .small{grid-column:1/-1;border-top:1px solid var(--rule);padding-top:1rem;font:500 .78rem/1.5 var(--f-m);color:var(--ink-3);display:flex;gap:1rem;justify-content:space-between;flex-wrap:wrap}
.totop{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));width:48px;height:48px;border-radius:50%;border:1px solid var(--rule);background:var(--surface);color:var(--ink);display:grid;place-items:center;box-shadow:var(--lift);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s,transform .25s var(--ease),visibility .25s;z-index:70}
.totop.on{opacity:1;visibility:visible;transform:none}
.totop svg{width:20px;height:20px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:.8rem 1.2rem;border-radius:10px;font-size:.95rem;z-index:100;max-width:90vw;box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
.toast[hidden]{display:none}

/* responsive */
@media (max-width:1180px){
  .hdr .btn{display:none}
}
@media (max-width:1060px){
  .nav a{padding:.55rem .55rem;font-size:.9rem;white-space:nowrap}
  .brand small{display:none}
}
@media (max-width:980px){
  .hdr .btn{display:none}
  .burger{display:grid}
  .nav{display:none}
  .js .nav.open{display:flex;position:absolute;left:0;right:0;top:var(--hdr);flex-direction:column;background:var(--paper);border-bottom:1px solid var(--rule);padding:.6rem var(--gut) 1rem;box-shadow:0 20px 30px -20px rgba(0,0,0,.4)}
  .no-js .nav{display:flex;flex-wrap:wrap;position:static}
  .no-js .hdr{height:auto;position:static}
  .no-js .hdr .wrap{flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
  .no-js .burger{display:none}
}
@media (max-width:900px){
  .hero__grid,.why,.split,.phead__grid,.share-grid{grid-template-columns:1fr}
  .hero__img .ph{aspect-ratio:16/10}
  .split.rev>:first-child{order:0}
  .trio,.feat,.privacy-grid,.carry{grid-template-columns:1fr}
  .trio>div,.trio>div+div{padding:1.2rem 0;border-left:0}
  .trio>div+div{border-top:1px solid var(--rule)}
  .feat>div,.feat>div:not(:nth-child(3n+1)){padding:1.3rem 0;border-left:0}
  .steps4{grid-template-columns:1fr 1fr}
  .ftr .wrap{grid-template-columns:1fr}
  .lists,.tour,.pair,.twoway{grid-template-columns:1fr}
}
@media (max-width:560px){
  :root{--gut:18px}
  body{font-size:17.5px}
  .steps4{grid-template-columns:1fr}
  .routes li{grid-template-columns:1fr}
  .map .lbl{display:none}
  .pin{font-size:.66rem}
  .pin small{display:none}
  .pin--port{transform:translate(-8px,6px);padding:0;text-align:left}
  .hdr .wrap{gap:.6rem}
  .brand b{font-size:1.5rem}
  .ftr ul{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}
@media print{.util,.hdr,.totop,.burger{display:none}body{background:#fff;color:#000}}