/* WDMA · "The printed annual": a two-colour report. Bottle-green ink on paper, one yellow.
   Layout: one vertical axis at 42% of the page; headings start on it, text hangs from it, the left zone holds notes.
   Sections alternate text pages with whole fields of colour. */
:root{
  --bg:#f7f7f7; --surface:#ebebeb; --surface-2:#e0e3e0; --ink:#0d2a1c; --muted:#56635b;
  --accent:#f6e016; --accent-ink:#0d2a1c; --inv-bg:#0d2a1c; --inv-ink:#f7f7f7; --inv-muted:#b9c6be;
  --font:"Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --step-small:clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-body:clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead:clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head:clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-display:clamp(2.6rem, 5.6vw, 6rem);
  --m:clamp(20px, 2.4vw, 32px);
  --axis:42%;
  --ease-out:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0b1d14; --surface:#12291d; --surface-2:#183324; --ink:#eef3ef; --muted:#a9b8af;
  --accent:#f6e016; --accent-ink:#0d2a1c; --inv-bg:#eef3ef; --inv-ink:#0d2a1c; --inv-muted:#3f5247; color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#0b1d14; --surface:#12291d; --surface-2:#183324; --ink:#eef3ef; --muted:#a9b8af;
  --accent:#f6e016; --accent-ink:#0d2a1c; --inv-bg:#eef3ef; --inv-ink:#0d2a1c; --inv-muted:#3f5247; color-scheme:dark }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font:400 var(--step-body)/1.5 var(--font); overflow-x:hidden}
img,svg{max-width:100%; display:block}
a{color:inherit; text-underline-offset:.18em; text-decoration-thickness:.06em}
a:hover{text-decoration-thickness:.12em}
:focus-visible{outline:3px solid var(--accent); outline-offset:3px}
::selection{background:var(--accent); color:var(--accent-ink)}
h1,h2,h3{font-weight:600; letter-spacing:-.035em; line-height:.95; text-wrap:balance; margin:0}
h3{letter-spacing:-.02em; line-height:1.05}
p{margin:0 0 1em}
ul,ol{margin:0; padding:0; list-style:none}
.skip{position:absolute; left:-9999px} .skip:focus{left:16px; top:16px; z-index:100; background:var(--accent); color:var(--accent-ink); padding:10px 14px}
.wrap{max-width:1600px; margin:0 auto; padding-left:max(var(--m), env(safe-area-inset-left, 0px)); padding-right:max(var(--m), env(safe-area-inset-right, 0px))}
.axis{display:grid; grid-template-columns:var(--axis) minmax(0,1fr); align-items:start}
.axis > *{min-width:0}
.hero > .wrap, .cta > .wrap, .faq-title > .wrap, .site-footer > .wrap{width:100%}
.on-axis{grid-column:2}
.left{grid-column:1; padding-right:clamp(20px,4vw,64px)}
.muted{color:var(--muted)}
.small{font-size:var(--step-small)}
.lead{font-size:var(--step-lead); line-height:1.3; letter-spacing:-.01em; max-width:36ch}
.measure{max-width:62ch}

/* Buttons: one shape, square, flat */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.6em; min-height:52px; padding:0 1.4em; font:500 var(--step-body)/1 var(--font); text-decoration:none; background:var(--accent); color:var(--accent-ink); border:0; cursor:pointer; transition:transform .25s var(--ease-out), background .25s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px)}
.btn-ink{background:var(--ink); color:var(--bg)}
.btn svg{width:18px; height:18px; transition:transform .25s var(--ease-out)}
.btn:hover svg{transform:translateX(4px)}
.textlink{font-weight:500; text-decoration:underline; text-decoration-thickness:.08em}

/* Header: plain bar */
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:60; background:var(--bg)}
.site-header{position:sticky; top:env(safe-area-inset-top,0px); z-index:50; background:var(--bg)}
.nav{display:grid; grid-template-columns:var(--axis) minmax(0,1fr) auto; align-items:center; min-height:76px}
.logo{display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:600; font-size:1.5rem; letter-spacing:-.04em}
.logo svg{width:30px; height:30px}
.menu{display:flex; align-items:center; gap:clamp(12px,2vw,28px)}
.menu > li{position:relative}
.menu > li > a, .menu > li > button{display:inline-flex; align-items:center; gap:6px; font:500 var(--step-body)/1 var(--font); color:var(--ink); text-decoration:none; background:none; border:0; padding:12px 0; cursor:pointer}
.menu > li > a:hover, .menu > li > button:hover{text-decoration:underline}
.caret{width:10px; height:10px; transition:transform .2s}
.drop{position:absolute; top:100%; left:-20px; width:min(620px, 70vw); background:var(--surface); padding:20px; display:grid; grid-template-columns:1fr 1fr; gap:4px 20px; opacity:0; visibility:hidden; transform:translateY(8px); transition:.2s var(--ease-out); box-shadow:0 30px 60px -30px rgba(13,42,28,.45)} /* taste-skill-ignore: real overlay menu */
.has-drop:hover .drop, .has-drop:focus-within .drop, .has-drop.open .drop{opacity:1; visibility:visible; transform:none}
.menu > li:nth-child(3) .drop{left:auto; right:-140px}
.drop a{display:block; padding:8px 0; text-decoration:none; font-weight:500; line-height:1.25}
.drop a span{display:block; font-weight:400; font-size:var(--step-small); color:var(--muted); margin-top:2px}
.drop a:hover{text-decoration:underline}
.drop .all{grid-column:1/-1; margin-top:8px}
.nav-cta{display:flex; align-items:center; gap:12px; justify-self:end}
.nav-cta .btn{min-height:46px}
.burger{display:none; min-height:46px; padding:0 14px; font:500 var(--step-body)/1 var(--font); background:var(--surface); color:var(--ink); border:0; cursor:pointer}
.menu .mobile-cta{display:none}
@media (max-width: 1080px){
  .nav{grid-template-columns:1fr auto}
  .burger{display:inline-flex; align-items:center}
  .nav-cta .btn{display:none}
  .site-header nav{position:absolute}
  .menu{position:fixed; inset:calc(76px + env(safe-area-inset-top,0px)) 0 0 0; background:var(--bg); flex-direction:column; align-items:stretch; gap:0; padding:8px max(var(--m), env(safe-area-inset-right,0px)) calc(40px + env(safe-area-inset-bottom,0px)) max(var(--m), env(safe-area-inset-left,0px)); overflow-y:auto; display:none}
  .menu.open{display:flex}
  .menu > li > a, .menu > li > button{width:100%; justify-content:space-between; font-size:1.75rem; letter-spacing:-.03em; padding:14px 0}
  .drop{position:static; width:auto; opacity:1; visibility:visible; transform:none; box-shadow:none; grid-template-columns:1fr; display:none; margin-bottom:12px}
  .has-drop.open .drop{display:grid}
  .has-drop.open .caret{transform:rotate(180deg)}
  .menu .mobile-cta{display:block; padding-top:20px} .menu .mobile-cta .btn{width:100%}
}

/* Hero: void, then statement on the axis */
.hero{min-height:calc(100svh - 76px); display:flex; flex-direction:column; justify-content:space-between; gap:clamp(40px,6vh,72px); padding-bottom:clamp(40px,7vh,72px)}
.masthead{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); height:clamp(240px, 46svh, 520px)}
.masthead .cell{aspect-ratio:auto; height:100%}
.masthead .tile-y p{font-size:clamp(1.0625rem, .8rem + .8vw, 1.5rem)}
.masthead .tile-ink{font-size:clamp(1.0625rem, .8rem + .8vw, 1.5rem)}
.hero .axis{align-items:end}
.hero h1{font-size:var(--step-display); font-weight:500; letter-spacing:-.045em; line-height:.95}
.hero .left p{font-size:1.125rem; color:var(--muted); max-width:32ch; margin:0}
.hero-actions{display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; margin-top:40px}
.lines .line{display:block; overflow:hidden; padding-bottom:.09em; margin-bottom:-.09em}
.lines [data-line]{display:block}

/* Sections */
.sec{padding-block:clamp(96px, 12vw, 200px)}
.statement{font-size:var(--step-display); font-weight:500; letter-spacing:-.045em; line-height:.95}
.sec-intro{min-height:44svh; align-items:center}
.sec-intro p{margin-top:28px}

/* Services: pinned intro in the left zone, rows on the axis */
.svc > .left{align-self:stretch}
.svc-side{position:sticky; top:112px; display:grid; gap:24px; padding-bottom:24px}
.svc-h{font-size:var(--step-head)}
.svc-side .lead{margin:0; font-size:var(--step-body); max-width:44ch}
.svc-list{display:grid; grid-template-columns:1fr 1fr; gap:2px}
.svc-list a{display:flex; align-items:center; height:100%; min-height:44px; padding:8px 12px; line-height:1.25; background:var(--surface); text-decoration:none; font-size:var(--step-small); font-weight:500; transition:background .2s, transform .25s var(--ease-out)}
.svc-list a.all{background:var(--ink); color:var(--bg); justify-content:space-between; gap:8px}
.svc-list a.all svg{width:16px; height:16px; flex:none}
.svc-list a:hover{background:var(--accent); color:var(--accent-ink); transform:translateX(4px)}
.svc .btn{justify-self:start}
.svc .rows{margin-top:0}

/* Rows with margin pictures */
.rows{display:grid; gap:clamp(72px, 9vw, 120px); margin-top:clamp(72px, 9vw, 120px)}
.row{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start}
.row > div{grid-column:1; padding-right:clamp(24px,4vw,64px); min-width:0}
.row h3{font-size:clamp(1.75rem, 1rem + 2.2vw, 3.25rem); margin-bottom:20px}
.row p{max-width:40ch}
.row .links{display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:6px}
.row figure{grid-column:2; margin:0}
.row figure svg{height:auto}
.row:nth-child(1) figure{width:clamp(160px,17vw,240px)}
.row:nth-child(2) figure{width:clamp(200px,22vw,320px)}
.row:nth-child(3) figure{width:clamp(140px,13vw,180px)}
.row:nth-child(4) figure{width:clamp(180px,19vw,280px)}
.row:nth-child(5) figure{width:clamp(160px,16vw,220px)}

/* Mosaic: gutterless photographs and flat tiles */
.mosaic{display:grid; grid-template-columns:repeat(4,minmax(0,1fr))}
.cell{margin:0; aspect-ratio:1; overflow:hidden; min-width:0}
.cell img{width:100%; height:100%; object-fit:cover; transition:transform 1.6s var(--ease-out)}
.tile-y{background:var(--accent); color:var(--accent-ink); display:flex; align-items:flex-end; padding:clamp(20px,2.4vw,36px)}
.tile-y p{font-size:var(--step-lead); line-height:1.2; letter-spacing:-.02em; margin:0; font-weight:500}
.tile-ink{background:var(--inv-bg); color:var(--inv-ink); display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding:clamp(20px,2.4vw,36px); text-decoration:none; font-size:var(--step-lead); font-weight:500; letter-spacing:-.02em}
.tile-ink svg{width:28px; height:28px; transition:transform .3s var(--ease-out)}
.tile-ink:hover svg{transform:translateX(6px)}
.row figure img{width:100%; height:auto}
.ph{position:relative; display:block; overflow:hidden; color:inherit; text-decoration:none; cursor:pointer}
.ph img{transition:transform .8s var(--ease-out), filter .5s}
.ph:hover img, .ph:focus-visible img{transform:scale(1.06); filter:contrast(1.08)}
.ph:focus-visible{outline-offset:-3px}
.cap{position:absolute; left:0; bottom:0; display:inline-flex; align-items:center; gap:8px; padding:10px 14px; background:var(--inv-bg); color:var(--inv-ink); font-size:var(--step-small); font-weight:500; transition:background .25s, color .25s}
.cap svg{width:14px; height:14px; transition:transform .3s var(--ease-out)}
.ph:hover .cap, .ph:focus-visible .cap{background:var(--accent); color:var(--accent-ink)}
.ph:hover .cap svg{transform:translateX(4px)}
.credits{max-width:110ch}

/* Many into one */
.band{background:var(--surface)}
.mio-head{display:grid; grid-template-columns:var(--axis) minmax(0,1fr); gap:0}
.mio-head h2{font-size:var(--step-head)}
.mio-head p{grid-column:1; margin-top:20px; max-width:36ch}
.mio{margin-top:clamp(48px,6vw,80px)}
.mio svg{width:100%; height:auto}
.mio rect{transition:transform 1.2s var(--ease-out), opacity 1.2s}
.mio-cols{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,40px); margin-top:32px}
.mio-cols b{display:block; font-size:var(--step-lead); font-weight:600; letter-spacing:-.02em; margin-bottom:8px}
.mio-cols p{margin:0; max-width:34ch}
.mio-v{display:none}

/* Prescription (live thing) */
.rx-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:24px}
.rx-head h2{font-size:var(--step-head)}
.rx-head h2 .soft{color:var(--muted); display:block}
.market{display:inline-flex; gap:6px; margin-top:40px}
.market button{min-height:48px; padding:0 18px; font:500 var(--step-body)/1 var(--font); background:var(--surface); color:var(--ink); border:0; cursor:pointer; transition:background .2s, transform .2s var(--ease-out)}
.market button:hover{transform:translateY(-1px)}
.market button[aria-pressed="true"]{background:var(--ink); color:var(--bg)}
.rx{display:grid; grid-template-columns:230px minmax(0,1fr); gap:40px; margin-top:24px}
.tabs{display:grid; gap:6px; align-content:start}
.tabs button{display:block; text-align:left; min-height:64px; padding:12px 16px; font:500 var(--step-body)/1.2 var(--font); background:var(--surface); color:var(--ink); border:0; cursor:pointer; transition:background .2s, transform .2s var(--ease-out)}
.tabs button span{display:block; font-weight:400; font-size:var(--step-small); color:var(--muted); margin-top:3px}
.tabs button:hover{transform:translateX(3px)}
.tabs button[aria-selected="true"]{background:var(--ink); color:var(--bg)}
.tabs button[aria-selected="true"] span{color:var(--inv-muted)}
.plan{display:grid; gap:4px; align-content:start}
.plan h3{font-size:var(--step-lead); margin-bottom:14px}
.plan-band{display:grid; grid-template-columns:150px minmax(0,1fr) minmax(0,.8fr); gap:20px; align-items:center; min-height:76px; padding:14px 20px; background:var(--surface)}
.plan-band:nth-child(odd){background:var(--surface-2)}
.plan-band .when{font-size:var(--step-body); font-variant-numeric:tabular-nums; font-weight:500}
.plan-band .what a{font-weight:500; text-decoration:none}
.plan-band .what a:hover{text-decoration:underline}
.plan-band .what span{display:block; font-size:var(--step-small); color:var(--muted)}
.plan-band .where{text-align:right; font-size:var(--step-small)}
.plan-rules{margin-top:18px; padding:18px 20px; background:var(--accent); color:var(--accent-ink)}
.plan-rules b{font-weight:600}
.plan-more{margin-top:18px}
.plan.swap{animation:swap .45s var(--ease-out)}
@keyframes swap{from{opacity:.2; transform:translateY(10px)} to{opacity:1; transform:none}}

/* Two giant words */
.cmp-head{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start}
.cmp-head h2{font-size:var(--step-head)}
.cmp-head p{max-width:46ch}
.specimens{display:grid; grid-template-columns:1fr 1fr; gap:0 40px; margin-top:12vh; height:clamp(220px, 26vw, 400px); overflow:hidden}
.specimen{display:block; text-decoration:none}
.specimen b{display:block; font-size:clamp(180px, 34vw, 520px); font-weight:600; line-height:.8; letter-spacing:-.06em; transition:transform .6s var(--ease-out)}
.specimen:hover b{transform:translateY(-12px)}

/* FAQ bands */
.faq-title{background:var(--accent); color:var(--accent-ink); min-height:40svh; display:flex; align-items:flex-end; padding-block:48px}
.faq-title h2{font-size:clamp(3rem, 7vw, 7rem); letter-spacing:-.05em}
.faq-band{padding-block:56px; background:var(--bg)}
.faq-band:nth-child(even){background:var(--surface)}
.faq-band .wrap{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,1fr) minmax(0,6fr)}
.faq-band h3{grid-column:1; font-size:clamp(1.375rem, 1rem + 1vw, 2rem); letter-spacing:-.025em; line-height:1.1}
.faq-band p{grid-column:3; margin:0; font-size:var(--step-body); max-width:60ch}

/* CTA: the idea inverted */
.cta{background:var(--inv-bg); color:var(--inv-ink); padding-block:clamp(72px,9vw,140px)}
.cta-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(40px,6vw,96px); align-items:center}
.cta h2{font-size:clamp(3.4rem, 8vw, 8.5rem); font-weight:500; letter-spacing:-.05em; line-height:.9; margin-bottom:32px}
.cta-copy p{font-size:var(--step-lead); line-height:1.3; max-width:30ch; margin:0 0 24px}
.cta-list{display:grid; gap:10px; margin-bottom:36px}
.cta-list li{display:grid; grid-template-columns:14px minmax(0,1fr); gap:12px; align-items:baseline; color:var(--inv-muted)}
.cta-list li::before{content:""; width:10px; height:10px; background:var(--accent); transform:translateY(-1px)}
.cta .btn{min-height:56px}
.cal{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px}
.cal .d{font-size:var(--step-small); color:var(--inv-muted); padding:0 0 8px 4px}
.cal .s{min-height:64px; padding:8px; background:rgba(127,140,133,.18); display:flex; flex-direction:column; justify-content:space-between; min-width:0; overflow:hidden}
.cal .f{background:var(--accent); color:var(--accent-ink); transition:transform .6s var(--ease-out), opacity .6s, background .6s; transition-delay:calc(var(--k) * 40ms + 200ms)}
.cal .f b{font-size:.8125rem; font-weight:600; line-height:1.15; overflow-wrap:anywhere}
.cal .f small{font-size:.8125rem; font-variant-numeric:tabular-nums; opacity:.75}

/* Footer */
.site-footer{background:var(--inv-bg); color:var(--inv-ink); min-height:100svh; display:grid; grid-template-rows:auto 1fr auto; padding-block:40px calc(20px + env(safe-area-inset-bottom,0px)); }
.foot-cols{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px}
.foot-cols h2{font-size:var(--step-body); letter-spacing:-.01em; font-weight:600; margin-bottom:12px; line-height:1.3}
.foot-cols ul{display:grid; gap:6px}
.foot-cols a{color:var(--inv-muted); text-decoration:none; font-size:var(--step-small)}
.foot-cols a:hover{color:var(--inv-ink); text-decoration:underline}
.wordmark{width:100%; height:auto; margin-top:40px; fill:currentColor}
.legal{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; font-size:var(--step-small); color:var(--inv-muted); margin-top:20px}

/* Inner pages */
.page-hero{padding-block:clamp(48px,7vw,120px) clamp(64px,8vw,120px)}
.crumbs ol{display:flex; flex-wrap:wrap; gap:6px; font-size:var(--step-small); color:var(--muted); margin-bottom:clamp(40px,6vw,80px)}
.crumbs li:not(:last-child)::after{content:"/"; margin-left:6px}
.crumbs a{text-decoration:none} .crumbs a:hover{text-decoration:underline}
.page-hero h1{font-size:clamp(2.25rem, 6vw, 6.5rem); font-weight:500; letter-spacing:-.045em; max-width:16ch}
.page-hero .axis{margin-top:clamp(40px,5vw,72px)}
.page-hero .lead{max-width:34ch; margin-bottom:28px}
.facts{display:grid; gap:18px; font-size:var(--step-small)}
.facts dt{color:var(--muted)}
.facts dd{margin:2px 0 0; font-size:var(--step-body); font-weight:500; max-width:28ch}
.chapter{padding-block:clamp(64px,8vw,120px)}
.chapter.tone{background:var(--surface)}
.chapter.ink{background:var(--inv-bg); color:var(--inv-ink)}
.chapter.ink .muted{color:var(--inv-muted)}
.chapter .left h2{font-size:var(--step-head)}
.prose{max-width:62ch}
.prose h2{font-size:var(--step-lead); letter-spacing:-.02em; line-height:1.15; margin:1.8em 0 .6em}
.prose h2:first-child{margin-top:0}
.prose ul,.prose ol{padding-left:1.2em; list-style:disc} .prose ol{list-style:decimal}
.prose li{margin:.35em 0}
.prose p + p{margin-top:0}
.items{display:grid; grid-template-columns:1fr 1fr; gap:44px 48px}
.items h3{font-size:var(--step-lead); margin-bottom:10px; letter-spacing:-.02em}
.items p{margin:0; max-width:40ch}
.seq{display:grid; gap:36px; max-width:62ch}
.seq li{display:block}
.seq b{display:block; font-size:var(--step-lead); font-weight:600; letter-spacing:-.02em; margin-bottom:6px}
.seq p{margin:0}
.biglinks{display:grid; gap:2px}
.biglinks a{display:flex; justify-content:space-between; align-items:center; gap:24px; padding:18px 22px; background:var(--surface); text-decoration:none; font-size:var(--step-lead); font-weight:500; letter-spacing:-.02em; transition:background .2s, transform .25s var(--ease-out)}
.chapter.tone .biglinks a{background:var(--bg)}
.biglinks a span{font-size:var(--step-small); font-weight:400; color:var(--muted); letter-spacing:0; max-width:34ch; text-align:right}
.biglinks a:hover{background:var(--accent); color:var(--accent-ink); transform:translateX(6px)}
.biglinks a:hover span{color:var(--accent-ink)}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips li, .chips a{display:inline-block; font-size:var(--step-small); padding:8px 14px; background:var(--surface); text-decoration:none}
.chapter.tone .chips li, .chapter.tone .chips a{background:var(--bg)}
.chips a:hover{background:var(--accent); color:var(--accent-ink)}
.table-scroll{overflow-x:auto; margin:1.2em 0}
table{border-collapse:collapse; width:100%; min-width:560px; font-size:var(--step-small)}
th,td{text-align:left; padding:12px 14px; vertical-align:top}
th{background:var(--ink); color:var(--bg); font-weight:500}
tr:nth-child(even) td{background:var(--surface)}
.article-meta{color:var(--muted); font-size:var(--step-small); margin-top:8px}
.posts{display:grid; gap:2px}
.post-link{display:grid; grid-template-columns:var(--axis) minmax(0,1fr); padding:32px 0; text-decoration:none}
.post-link:nth-child(odd){background:var(--surface)}
.post-link .meta{padding-left:max(var(--m), env(safe-area-inset-left,0px)); color:var(--muted); font-size:var(--step-small)}
.post-link h2{font-size:var(--step-lead); letter-spacing:-.02em; line-height:1.15; margin-bottom:8px}
.post-link > div{padding-right:var(--m)}
.post-link:hover h2{text-decoration:underline}

/* Form */
.form{display:grid; gap:18px; background:var(--surface); padding:clamp(20px,3vw,40px)}
.form .row2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.field{display:grid; gap:6px; min-width:0}
.field label{font-weight:500}
.field label small{font-weight:400; color:var(--muted); font-size:var(--step-small)}
.field input,.field select,.field textarea{font:inherit; color:var(--ink); background:var(--bg); border:1.5px solid var(--surface-2); padding:12px 14px; width:100%; border-radius:0}
.field textarea{min-height:140px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--ink)}
.check{display:grid; grid-template-columns:22px minmax(0,1fr); gap:10px; align-items:start; font-size:var(--step-small)}
.check input{width:20px; height:20px; margin-top:2px; accent-color:var(--ink)}
.notice{font-size:var(--step-small); color:var(--muted); margin:0}
.form-status{font-weight:500; margin:0}
.hp{position:absolute; left:-9999px}

/* Motion layer */
@media (prefers-reduced-motion: no-preference){
  .js .lines [data-line]{transform:translateY(105%); animation:line-up 900ms var(--ease-out) forwards; animation-delay:calc(var(--i) * 110ms + 150ms)}
  .js .after-lines{opacity:0; animation:fade-up 700ms var(--ease-out) 650ms forwards}
  .js [data-reveal]{opacity:0; transform:translateY(24px); transition:opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay:calc(var(--d, 0) * 75ms)}
  .js [data-reveal].is-in{opacity:1; transform:none}
  .js .cell:not(.is-in) img{transform:scale(1.12)}
  .js .cal:not(.is-in) .f{transform:scale(.4); opacity:0}
  .js .masthead .cell img{animation:settle 1.8s var(--ease-out) both}
  .js .masthead .cell:nth-child(2) img{animation-delay:.08s} .js .masthead .cell:nth-child(4) img{animation-delay:.16s} .js .masthead .cell:nth-child(5) img{animation-delay:.24s}
  .js .mio:not(.is-in) rect.s{transform:translate(var(--dx), var(--dy)); opacity:.2}
}
@keyframes line-up{to{transform:none}}
@keyframes settle{from{transform:scale(1.14)} to{transform:none}}
@keyframes fade-up{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation:none!important; transition:none!important} }

/* Responsive */
@media (max-width: 900px){
  .axis, .row, .mio-head, .cmp-head, .post-link, .faq-band .wrap{grid-template-columns:1fr}
  .on-axis, .row > div, .row figure, .mio-head p, .faq-band h3, .faq-band p, .left{grid-column:1}
  .left{padding-right:0}
  .hero{min-height:calc(100svh - 76px); padding-bottom:28px; gap:28px}
  .masthead{grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:1fr 1fr; height:40svh}
  .masthead .tile-y, .masthead .tile-ink{padding:12px}
  .masthead .tile-y p, .masthead .tile-ink{font-size:.9375rem}
  .cap{padding:6px 8px; font-size:.8125rem} .cap svg{display:none}
  .hero .axis{display:flex; flex-direction:column-reverse; align-items:stretch; gap:20px}
  .hero h1{font-size:9.6vw}
  .hero .left p{color:var(--ink)}
  .hero .left p{font-size:1.0625rem}
  .row figure{margin-top:24px}
  .row:nth-child(3n+1) figure{width:100%; max-width:420px}
  .row:nth-child(3n+2) figure{width:70%; justify-self:end}
  .row:nth-child(3n) figure{width:55%}
  .rows{gap:64px}
  .mio-h{display:none} .mio-v{display:grid; grid-template-columns:52% minmax(0,1fr); gap:20px}
  .mio-v .mio-cols{grid-template-columns:1fr; gap:0; margin:0; align-content:space-around}
  .rx{grid-template-columns:1fr; gap:16px}
  .tabs{grid-template-columns:1fr 1fr}
  .plan-band{grid-template-columns:1fr; gap:4px; padding:16px}
  .plan-band .where{text-align:left}
  .rx-head .btn{width:100%}
  .specimens{grid-template-columns:1fr; height:auto; overflow:visible; margin-top:14vh; gap:16px}
  .specimen{height:38svh; overflow:hidden; padding:16px}
  .specimen:nth-child(2){background:var(--ink); color:var(--bg)}
  .specimen b{font-size:62vw}
  .faq-title{min-height:30svh} .faq-title h2{font-size:13vw}
  .faq-band{padding-block:32px} .faq-band h3{font-size:1.375rem; margin-bottom:12px}
  .cta-grid{grid-template-columns:1fr}
  .cta h2{font-size:15vw}
  .cta .btn{width:100%}
  .cal{gap:3px} .cal .s{min-height:40px; padding:4px} .cal .f b{display:none} .cal .f small{font-size:.8125rem}
  .cta-copy{display:contents} .cta-grid{display:flex; flex-direction:column; align-items:stretch; gap:0} .cta h2{order:1} .cal{order:2; margin:8px 0 36px} .cal .f small{font-size:.8125rem; letter-spacing:-.02em} .cta-copy p{order:3} .cta-list{order:4} .cta .btn{order:5}
  .foot-cols{grid-template-columns:1fr 1fr; gap:32px 20px}
  .items{grid-template-columns:1fr; gap:32px}
  .mosaic{grid-template-columns:1fr 1fr}
  .chapter .left h2{position:static; margin-bottom:32px}
  .svc-side{position:static; margin-bottom:56px}
  .page-hero .axis{gap:32px; display:flex; flex-direction:column-reverse}
  .biglinks a{flex-direction:column; align-items:flex-start; gap:4px}
  .biglinks a span{text-align:left}
  .form .row2{grid-template-columns:1fr}
  .post-link .meta{padding-right:var(--m); margin-bottom:6px}
  .post-link > div{padding-left:max(var(--m), env(safe-area-inset-left,0px))}
}