/* Inflection — "Warm" design system: elegant serif, cream ground, full-bleed photography. See DESIGN.md */
:root{
  --paper:#FBF9F5; --surface:#F4F0E9; --surface2:#EBE5DB; --white:#FFFFFF;
  --ink:#171310; --ink2:#4C443C; --mut:#7E7469; --faint:#A9A093; --line:#E5DED3;
  --accent:#B4552D; --accent-soft:rgba(180,85,45,.09);
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"DM Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --max:1200px; --pad:clamp(20px,4vw,56px);
  --r:18px;
  --e:cubic-bezier(.22,.8,.24,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink2);font-family:var(--sans);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#fff}
.pad{padding-left:var(--pad);padding-right:var(--pad)}
.wrap{max-width:var(--max);margin:0 auto}

/* type */
h1,h2,h3{color:var(--ink);font-family:var(--serif);font-weight:400;letter-spacing:-.012em;line-height:1.06;text-wrap:balance}
h1 em,h2 em,h3 em{font-style:italic}
.display{font-family:var(--serif);font-weight:400;text-transform:none;letter-spacing:-.015em;line-height:1.06}
.lbl{font-family:var(--sans);font-size:.74rem;font-weight:500;letter-spacing:.02em;color:var(--ink)}
.lbl.m{color:var(--mut)}
.mono{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase}
.body-up{text-transform:none;font-size:1.06rem;line-height:1.62;font-weight:400;color:var(--ink2)}
.prose{font-size:1.04rem;line-height:1.68;color:var(--ink2);max-width:64ch}
.prose p+p{margin-top:16px}
.prose strong{color:var(--ink);font-weight:700}
.eyebrow{font-size:.78rem;font-weight:500;color:var(--accent);letter-spacing:.02em;display:block;margin-bottom:16px}

/* top bar + nav */
.bar{display:none}
.nav{display:flex;justify-content:space-between;align-items:center;gap:16px;max-width:var(--max);margin:0 auto;
  padding-top:22px;padding-bottom:22px;flex-wrap:wrap}
.nav .home{font-family:var(--serif);font-size:1.6rem;color:var(--ink);letter-spacing:-.02em}
.nav .links{display:flex;gap:clamp(14px,2.2vw,28px);align-items:center;flex-wrap:wrap}
.nav .links a{font-size:.92rem;font-weight:500;color:var(--ink2);transition:color .2s}
.nav .links a:hover,.nav .links a.on{color:var(--ink)}
.nav-sticky{position:sticky;top:0;z-index:80;background:rgba(251,249,245,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}

.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--sans);font-size:.94rem;font-weight:500;
  padding:.82em 1.5em;border-radius:999px;border:1px solid transparent;cursor:pointer;
  transition:transform .22s var(--e),box-shadow .22s,background .2s,color .2s,border-color .2s}
.btn.solid{background:var(--ink);color:var(--paper)}
.btn.solid:hover{transform:translateY(-2px);box-shadow:0 14px 28px -14px rgba(23,19,16,.55)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--white);border-color:var(--faint)}
.btn.sm{padding:.62em 1.15em;font-size:.86rem}
.btn.light{background:var(--white);color:var(--ink)}

/* hero — centered, serif, photography below */
.hero{max-width:var(--max);margin:0 auto;text-align:center;padding-top:clamp(40px,6vw,84px);padding-bottom:clamp(28px,4vw,44px)}
.hero h1{font-size:clamp(2.6rem,6.4vw,5.2rem);max-width:17ch;margin:0 auto}
.hero .sub{max-width:60ch;margin:26px auto 0;color:var(--ink2);font-size:1.1rem}
.hero .cta{display:flex;gap:12px;margin-top:32px;justify-content:center;flex-wrap:wrap}
.hero-sm{max-width:var(--max);margin:0 auto;text-align:center;padding-top:clamp(38px,5vw,74px);padding-bottom:clamp(26px,3.4vw,44px)}
.hero-sm h1{font-size:clamp(2.3rem,5.4vw,4.2rem);max-width:18ch;margin:0 auto}
.hero-sm .sub{max-width:58ch;margin:24px auto 0;font-size:1.06rem}
.hero-sm .cta{display:flex;gap:12px;margin-top:28px;justify-content:center;flex-wrap:wrap}

/* photography */
.fig{max-width:var(--max);margin:0 auto;border-radius:var(--r);overflow:hidden;position:relative}
.fig img{display:block;width:100%;height:auto;object-fit:cover}
.fig.tall img{aspect-ratio:16/9}
.fig.short img{aspect-ratio:21/9}
.fig-cap{margin-top:12px;font-size:.86rem;color:var(--mut);text-align:center}
/* full-bleed band with text over image */
.band{position:relative;border-radius:var(--r);overflow:hidden;max-width:var(--max);margin:0 auto;isolation:isolate}
.band img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:16/8;position:absolute;inset:0;z-index:-2}
.band::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(23,19,16,.62),rgba(23,19,16,.34) 55%,rgba(23,19,16,.66))}
.band .band-in{position:relative;padding:clamp(44px,8vw,110px) clamp(24px,5vw,70px);color:#fff;min-height:clamp(320px,42vw,520px);
  display:flex;flex-direction:column;justify-content:center}
.band h2,.band h3{color:#fff}
.band p{color:rgba(255,255,255,.86);max-width:48ch;margin-top:16px}
.band .eyebrow{color:#fff;opacity:.7}

/* split image + text */
.split-img{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,64px);align-items:center;max-width:var(--max);margin:0 auto}
@media(max-width:880px){.split-img{grid-template-columns:1fr;gap:28px}}
.split-img .fig{border-radius:var(--r)}
.split-img.rev .txt{order:-1}
@media(max-width:880px){.split-img.rev .txt{order:0}}

/* sections */
section{padding-top:clamp(46px,6vw,92px);padding-bottom:clamp(46px,6vw,92px)}
section.nb{padding-top:clamp(30px,4vw,56px)}
.sec-top{max-width:var(--max);margin:0 auto clamp(30px,4vw,54px);text-align:center}
.sec-top h2{font-size:clamp(1.9rem,4vw,3rem);max-width:20ch;margin:0 auto}
.sec-top .intro{margin:18px auto 0;max-width:58ch;color:var(--ink2)}
.sec-top.left{text-align:left}
.sec-top.left h2,.sec-top.left .intro{margin-left:0}
.sec-no{display:block;font-size:.78rem;font-weight:500;color:var(--accent);margin-bottom:14px;letter-spacing:.02em}
/* inner pages mark sections with `lbl m sec-no`, and .lbl.m out-specifies
   .sec-no — without this the page accent never appears */
.lbl.m.sec-no{color:var(--accent)}

/* cards (soft, rounded, warm) */
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:var(--max);margin:0 auto}
.cols.two{grid-template-columns:repeat(2,1fr)}
.cols.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.cols.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){.cols,.cols.two{grid-template-columns:1fr}}
@media(max-width:560px){.cols.four{grid-template-columns:1fr}}
.cols>div{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:26px;
  transition:transform .25s var(--e),box-shadow .25s}
.cols>div:hover{transform:translateY(-3px);box-shadow:0 18px 38px -26px rgba(23,19,16,.35)}
.cols h3{font-size:1.3rem;margin:12px 0 8px}
.cols p{font-size:.95rem;color:var(--ink2)}
.cols .n{font-family:var(--sans);font-size:.76rem;font-weight:500;color:var(--accent)}

/* rows */
.rows{max-width:var(--max);margin:0 auto;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,3vw,40px);align-items:baseline;
  padding:26px 4px;border-bottom:1px solid var(--line);transition:background .25s,padding-left .25s var(--e)}
.row:hover{background:var(--white);padding-left:12px}
@media(max-width:700px){.row{grid-template-columns:1fr;gap:6px}.row .tag{display:none}}
.row h3{font-size:clamp(1.25rem,2.2vw,1.6rem)}
.row p{font-size:.96rem;color:var(--ink2);max-width:62ch;margin-top:8px}
.row .tag{font-family:var(--mono);font-size:.64rem;color:var(--faint);white-space:nowrap;text-transform:uppercase}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,60px);align-items:center;max-width:var(--max);margin:0 auto}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:28px}}
.ck-list{list-style:none}
.ck-list li{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:15px 0;border-bottom:1px solid var(--line);font-size:.98rem;color:var(--ink2)}
.ck-list li b{font-family:var(--sans);font-size:.8rem;color:var(--accent);font-weight:600}
.panel{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.panel .p-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line);font-size:.92rem}
.panel .p-row:last-child{border-bottom:none}
.panel .p-row b{font-family:var(--mono);font-size:.7rem;font-weight:500;color:var(--ink)}
.panel .p-row .inv{background:var(--accent-soft);color:var(--accent);padding:4px 11px;border-radius:999px;font-size:.74rem;font-weight:600}

/* code */
.tabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;max-width:var(--max);margin-left:auto;margin-right:auto}
.tab{font-family:var(--sans);font-size:.84rem;padding:8px 16px;border-radius:999px;background:var(--white);
  color:var(--mut);border:1px solid var(--line);cursor:pointer;transition:all .2s}
.tab.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.term{max-width:var(--max);margin:0 auto;border-radius:var(--r);background:var(--ink);color:#F2EFE9;padding:26px;
  font-family:var(--mono);font-size:.82rem;line-height:1.7;overflow-x:auto}
.term .c{color:#8E857A}

/* numbers */
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:var(--max);margin:0 auto}
@media(max-width:860px){.nums{grid-template-columns:1fr}}
.nums>div{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:30px}
.nums b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(2.8rem,6vw,4.4rem);letter-spacing:-.03em;line-height:1;color:var(--ink)}
.nums p{font-size:.92rem;color:var(--ink2);margin-top:16px}

/* comparison */
.cmp{max-width:var(--max);margin:0 auto;border-top:1px solid var(--line)}
.cmp .c-row{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(16px,3vw,40px);padding:22px 4px;border-bottom:1px solid var(--line);align-items:baseline}
@media(max-width:700px){.cmp .c-row{grid-template-columns:1fr;gap:4px}}
.cmp .who{font-family:var(--serif);font-size:1.24rem;color:var(--ink)}
.cmp .what{font-size:.96rem;color:var(--ink2)}
.cmp .c-row.me{background:var(--ink);color:#fff;border-radius:var(--r);padding-left:20px;padding-right:20px;border-bottom:none}
.cmp .c-row.me .who{color:#fff;font-style:italic}
.cmp .c-row.me .what{color:rgba(255,255,255,.86)}

/* table */
.tbl-wrap{max-width:var(--max);margin:0 auto;overflow-x:auto;background:var(--white);border:1px solid var(--line);border-radius:var(--r)}
table{border-collapse:collapse;width:100%;min-width:700px}
th,td{text-align:left;padding:17px 20px;font-size:.92rem;border-bottom:1px solid var(--line);vertical-align:top}
thead th{font-size:.76rem;font-weight:600;color:var(--mut);vertical-align:bottom}
tbody th{font-family:var(--serif);font-weight:400;font-size:1.1rem;color:var(--ink);white-space:nowrap}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:none}
tr.me{background:var(--ink)}
tr.me th,tr.me td{color:#fff;border-color:#332c26}
tr.me th{font-style:italic}
td.c{text-align:center;font-size:.88rem}
.tyes{color:var(--accent);font-weight:600}
tr.me .tyes{color:#E9A182}
.tno{color:var(--faint)}
tr.me .tno{color:#8E857A}
.src{font-size:.9rem;color:var(--ink2);line-height:1.75;max-width:76ch;margin:0 auto}
.src a{border-bottom:1px solid var(--line)}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:var(--max);margin:0 auto}
@media(max-width:900px){.plans{grid-template-columns:1fr}}
.plan{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:30px;display:flex;flex-direction:column}
.plan.feat{background:var(--ink);color:#fff;border-color:var(--ink)}
.plan.feat h3,.plan.feat .price{color:#fff}
.plan.feat .pl-list li{color:rgba(255,255,255,.82);border-color:#332c26}
.plan h3{font-size:1.5rem}
.plan .who{font-size:.9rem;color:var(--mut);margin-top:8px;min-height:2.8em}
.plan.feat .who{color:rgba(255,255,255,.6)}
.plan .price{font-family:var(--serif);font-size:clamp(2.4rem,4.4vw,3.2rem);letter-spacing:-.03em;margin:22px 0 4px;line-height:1;color:var(--ink)}
.plan .price small{font-family:var(--sans);font-size:.86rem;color:var(--mut);letter-spacing:0}
.plan.feat .price small{color:rgba(255,255,255,.6)}
.pl-list{list-style:none;margin:20px 0 26px}
.pl-list li{font-size:.92rem;color:var(--ink2);padding:10px 0;border-bottom:1px solid var(--line)}
.plan .btn{margin-top:auto;justify-content:center}
.plan.feat .btn{background:var(--white);color:var(--ink)}

/* faq */
.faq{max-width:820px;margin:0 auto;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{padding:22px 0;font-family:var(--serif);font-size:1.3rem;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-family:var(--sans);font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 0 24px;font-size:.98rem;color:var(--ink2);max-width:70ch}

/* closing cta band */
.bleed{max-width:var(--max);margin:0 auto;text-align:center;padding-top:clamp(40px,6vw,80px);padding-bottom:clamp(40px,6vw,80px)}
.bleed .top-l{display:none}
.bleed a.big{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,6.4vw,5rem);
  letter-spacing:-.02em;line-height:1.05;color:var(--ink);white-space:normal;transition:color .25s}
.bleed a.big:hover{color:var(--accent)}
.bleed .note{max-width:52ch;margin:22px auto 0;color:var(--ink2)}

/* footer */
footer{border-top:1px solid var(--line);padding-top:52px;padding-bottom:44px;margin-top:20px}
.fgrid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:28px;max-width:var(--max);margin:0 auto}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
.fgrid h4{font-size:.78rem;font-weight:600;color:var(--mut);margin-bottom:14px}
.fgrid ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.fgrid li a,.fgrid li{font-size:.9rem;color:var(--ink2);transition:color .2s}
.fgrid li a:hover{color:var(--accent)}
.fgrid .soon{font-size:.66rem;color:var(--faint);border:1px solid var(--line);border-radius:999px;padding:1px 7px;margin-left:6px}
.fbot{max-width:var(--max);margin:44px auto 0;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.86rem;color:var(--mut)}

/* ============================================================
   PER-PAGE THEMES
   Ink and paper never change — that is the brand. What changes is
   the accent and how heavily the photograph is veiled, and both are
   set by the job the page has to do. Pages that must be *read*
   (thesis, compare, security) veil harder so type wins. Pages that
   must be *felt* (home, pricing) let the picture through.
   ============================================================ */
.t-home{      /* arrival, warmth, change */
  --accent:#B4552D;--accent-soft:rgba(180,85,45,.09);
  --card-scrim:rgba(251,249,245,.82);--hero-scrim:rgba(251,249,245,.58)}
.t-thesis{    /* conviction — oxblood sits next to ink, so it reads as argument */
  --accent:#8E3B34;--accent-soft:rgba(142,59,52,.09);
  --card-scrim:rgba(252,249,248,.89);--hero-scrim:rgba(252,249,248,.72)}
.t-product{   /* competence — green is the colour of "this works" */
  --accent:#3F6B4A;--accent-soft:rgba(63,107,74,.09);
  --card-scrim:rgba(249,251,248,.88);--hero-scrim:rgba(249,251,248,.68)}
.t-enterprise{/* institution — cool, ordered, permanent */
  --accent:#3D5A73;--accent-soft:rgba(61,90,115,.09);
  --card-scrim:rgba(248,250,252,.85);--hero-scrim:rgba(248,250,252,.62)}
.t-compare{   /* analysis — the least emotive accent on the site, on purpose */
  --accent:#4E5A63;--accent-soft:rgba(78,90,99,.1);
  --card-scrim:rgba(248,249,250,.9);--hero-scrim:rgba(248,249,250,.74)}
.t-security{  /* containment — deep teal, still water */
  --accent:#2F5E5C;--accent-soft:rgba(47,94,92,.09);
  --card-scrim:rgba(246,250,249,.88);--hero-scrim:rgba(246,250,249,.7)}
.t-pricing{   /* honesty — warm amber, open rather than dark */
  --accent:#9A6428;--accent-soft:rgba(154,100,40,.1);
  --card-scrim:rgba(252,250,245,.89);--hero-scrim:rgba(252,250,245,.66)}

/* ============================================================
   STACKED SECTIONS — every section is a full-height card that
   sticks, and the next one rises over it as you scroll.
   ============================================================ */
body.stack{overflow-x:clip}            /* clip, not hidden: hidden kills sticky */
body.stack > header.hero,
body.stack > section{
  position:sticky;top:0;
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  isolation:isolate;overflow:hidden;contain:paint;
  border-top:1px solid var(--glass-line);
  border-radius:clamp(16px,2.4vw,30px) clamp(16px,2.4vw,30px) 0 0;
  box-shadow:0 -26px 64px -30px rgba(23,19,16,.55);
}
/* Every card carries the same photograph. Each card is exactly one viewport
   tall and full width, so cover-framing it per card looks identical to a
   fixed attachment — without repainting a full-screen image every frame. */
body.stack > section::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:var(--bg);background-size:cover;background-position:center;
}
body.stack > section::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--card-scrim,rgba(251,249,245,.85));
}
body.stack > header.hero{border-radius:0;border-top:none;box-shadow:none;overflow:visible;contain:none}
/* A flex column makes `margin:0 auto` children size to their content instead
   of stretching, which collapses every centred block. Setting an explicit
   width restores the intended max-width + auto-margin centring. */
body.stack > section > *,body.stack > header.hero > *{width:100%}
body.stack > footer{position:relative;z-index:2;background:rgba(251,249,245,.94);
  border-radius:clamp(16px,2.4vw,30px) clamp(16px,2.4vw,30px) 0 0}
@media(prefers-reduced-motion:reduce){
  body.stack > header.hero,body.stack > section{position:relative;min-height:0}
}

/* reveal — in place: no sliding, the content simply resolves where it sits */
.rv{opacity:0;transform:scale(.99);
  transition:opacity .8s var(--e),transform .8s var(--e)}
.rv.in{opacity:1;transform:none}
/* a headline at hero scale, for section headings that carry the same weight */
h2.xl{font-size:clamp(2.6rem,6.4vw,5.2rem);line-height:1.06}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

/* ============================================================
   GLASS LAYER
   One fixed photograph per page (set via --bg on <body>), a
   paper scrim for legibility, and frosted surfaces on top.
   ============================================================ */
:root{
  --glass:rgba(255,255,255,.7);
  --glass-2:rgba(255,255,255,.86);
  --glass-line:rgba(255,255,255,.7);
  --glass-dark:rgba(23,19,16,.88);
  --blur:saturate(1.6) blur(20px);
  /* two-part shadow: a soft pool for depth, a tight one for the edge */
  --glass-shadow:0 26px 60px -30px rgba(23,19,16,.55),0 2px 10px -5px rgba(23,19,16,.22);
}
body{background:var(--paper)}
/* the photograph */
body::before{content:"";position:fixed;inset:-2%;z-index:-2;
  background-image:var(--bg);background-size:cover;background-position:center;background-repeat:no-repeat}
/* the scrim — lighter at the top so the hero sits in the picture */
body::after{content:"";position:fixed;inset:0;z-index:-1;
  background:linear-gradient(180deg,var(--hero-scrim,rgba(251,249,245,.58)),var(--card-scrim,rgba(251,249,245,.86)) 30%,var(--card-scrim,rgba(251,249,245,.9)))}

/* frosted surfaces */
.nav-sticky{background:rgba(251,249,245,.6);border-bottom:1px solid var(--glass-line);
  box-shadow:0 10px 30px -22px rgba(23,19,16,.5)}
.cols>div,.nums>div,.panel,.plan,.tbl-wrap{
  background:var(--glass);border-color:var(--glass-line);box-shadow:var(--glass-shadow)}
.tab,.btn.ghost,.btn.light{background:var(--glass);border-color:var(--glass-line);
  box-shadow:0 6px 18px -12px rgba(23,19,16,.5)}
.cols>div:hover{background:var(--glass-2);
  box-shadow:0 34px 70px -30px rgba(23,19,16,.6),0 2px 10px -5px rgba(23,19,16,.25)}
.btn.ghost:hover{background:var(--glass-2);border-color:#fff}
/* list-style blocks get a pane of their own */
.rows,.cmp,.faq{background:var(--glass);border:1px solid var(--glass-line);
  border-radius:var(--r);padding:6px clamp(18px,3vw,32px);box-shadow:var(--glass-shadow)}
.row:hover{background:rgba(255,255,255,.5)}
.faq{max-width:860px}
/* dark frosted surfaces */
.band,.term,.plan.feat,.cmp .c-row.me{background:var(--glass-dark);
  box-shadow:0 30px 70px -30px rgba(23,19,16,.7)}
.band::after{background:linear-gradient(180deg,rgba(23,19,16,.28),rgba(23,19,16,.12) 55%,rgba(23,19,16,.3))}
tr.me{background:rgba(23,19,16,.8)}
footer{background:rgba(255,255,255,.72);border-top:1px solid var(--glass-line);
  border-radius:var(--r) var(--r) 0 0;margin-top:40px;padding-left:clamp(18px,3vw,34px);padding-right:clamp(18px,3vw,34px)}
/* hero type sits closest to the photograph */
.hero h1,.hero-sm h1{text-shadow:0 1px 26px rgba(251,249,245,.9)}
/* every page runs the same header: label, headline, sub, buttons */
.hero>.lbl{display:block;margin-bottom:18px}
.hero h1{margin-top:0}
.hero .sub{max-width:60ch}

/* ============================================================
   TEN-MINUTE CLOCK — the hero. Two columns, one clock: what a
   person gets done, and what Inflection gets done, in the same
   ten minutes.
   ============================================================ */
.clock{max-width:1060px;margin:clamp(34px,4.4vw,58px) auto 0}
.clock-face{display:flex;align-items:center;gap:16px;justify-content:center;margin-bottom:clamp(22px,3vw,34px)}
.clock-time{font-family:var(--mono);font-size:.86rem;letter-spacing:.06em;color:var(--ink);
  font-variant-numeric:tabular-nums;min-width:4.2em;text-align:right}
.clock-bar{position:relative;flex:0 1 340px;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.clock-bar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--accent);border-radius:2px}
/* two teleprompters running off the same clock — no cards, just type */
.clock-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,56px);text-align:left;position:relative}
@media(min-width:721px){
  .clock-cols::before{content:"";position:absolute;left:50%;top:6px;bottom:6px;width:1px;
    background:linear-gradient(180deg,transparent,var(--line) 22%,var(--line) 78%,transparent)}
}
@media(max-width:720px){.clock-cols{grid-template-columns:1fr;gap:26px}}
.tp-head{display:block;margin-bottom:10px}
.tp.me .tp-head{color:var(--accent)}
/* the window the lines scroll through, faded at both ends */
.tp-view{position:relative;height:clamp(216px,27vw,290px);overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 26%,#000 74%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 26%,#000 74%,transparent)}
/* The track is driven frame by frame off the clock, so no CSS transition
   here. Every line is the same fixed height and the current one is scaled
   rather than resized — layout never shifts, so the scroll stays smooth. */
.tp-track{list-style:none;position:absolute;left:0;right:0;top:0;will-change:transform}
.tp-track li{height:76px;display:flex;align-items:center;
  font-size:1.1rem;line-height:1.25;color:var(--mut);opacity:.3;
  transform-origin:left center;
  transition:opacity .45s var(--e),color .45s var(--e),transform .45s var(--e)}
.tp-track li.past{opacity:.45}
/* the line that is happening right now */
.tp-track li.on{opacity:1;color:var(--ink);font-family:var(--serif);transform:scale(1.72)}
.tp.me .tp-track li.on{color:var(--accent)}
@media(max-width:720px){.tp-track li{height:56px;font-size:1rem}.tp-track li.on{transform:scale(1.4)}}
.clock-out{margin:clamp(20px,3vw,30px) auto 0;max-width:46ch;text-align:center;
  font-family:var(--serif);font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1.35;color:var(--ink);
  opacity:0;transform:translateY(8px);transition:opacity .7s var(--e),transform .7s var(--e)}
.clock-out.on{opacity:1;transform:none}
.sec-top .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:clamp(24px,3.2vw,34px)}
.sec-top.left .cta{justify-content:flex-start}

/* ============================================================
   THESIS VISUALISATIONS
   All CSS/SVG, all animated off the same .rv reveal — no canvas,
   no per-frame work, nothing that can stutter the stack.
   ============================================================ */
.viz{max-width:var(--max);margin:clamp(28px,4vw,50px) auto 0}
.viz figcaption{margin-top:16px;font-size:.85rem;color:var(--mut);text-align:center}

/* 01 — the two layers */
#viz-layers{display:grid;gap:clamp(18px,2.6vw,30px);max-width:860px}
.lay-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.lay-h span{font-family:var(--serif);font-size:clamp(1.3rem,2.6vw,1.9rem);color:var(--ink)}
.lay-h b{font-family:var(--sans);font-size:.78rem;font-weight:500;color:var(--mut)}
.lay-h b.gap{color:var(--accent)}
.lay-bar{height:14px;border-radius:999px;background:rgba(255,255,255,.55);
  border:1px solid var(--glass-line);overflow:hidden}
.lay-bar i{display:block;height:100%;width:0;border-radius:999px;background:var(--ink);
  transition:width 1.5s var(--e) .15s}
.lay-bar i.thin{background:var(--accent)}
.rv.in .lay-bar i{width:var(--w)}
.lay p{margin-top:12px;font-size:.95rem;color:var(--ink2)}

/* 02 — wiring vs perception */
.wire{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,26px)}
@media(max-width:820px){.wire{grid-template-columns:1fr}}
.wire-panel{background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--r);
  padding:clamp(20px,2.6vw,30px);box-shadow:var(--glass-shadow)}
.wire-panel svg{display:block;width:100%;height:auto;margin:16px 0 4px}
.wire-panel p{font-size:.92rem;color:var(--ink2)}
.wire-panel .node circle{fill:var(--ink)}
.wire-panel .mesh line{stroke:var(--faint);stroke-width:1;
  stroke-dasharray:240;stroke-dashoffset:240;transition:stroke-dashoffset 1.1s var(--e)}
.rv.in .wire-panel .mesh line{stroke-dashoffset:0}
.wire-panel.me .mesh line{stroke:var(--accent);stroke-width:1.4}
.wire-panel.me .hub{fill:var(--accent);opacity:0;transition:opacity .6s var(--e) .7s}
.rv.in .wire-panel.me .hub{opacity:1}
/* stagger the mesh so the tangle draws itself line by line */
.wire-panel .mesh line:nth-child(2){transition-delay:.06s}
.wire-panel .mesh line:nth-child(3){transition-delay:.12s}
.wire-panel .mesh line:nth-child(4){transition-delay:.18s}
.wire-panel .mesh line:nth-child(5){transition-delay:.24s}
.wire-panel .mesh line:nth-child(6){transition-delay:.3s}
.wire-panel .mesh line:nth-child(7){transition-delay:.36s}
.wire-panel .mesh line:nth-child(8){transition-delay:.42s}
.wire-panel .mesh line:nth-child(9){transition-delay:.48s}
.wire-panel .mesh line:nth-child(10){transition-delay:.54s}
.wire-panel .mesh line:nth-child(11){transition-delay:.6s}
.wire-panel .mesh line:nth-child(12){transition-delay:.66s}

/* 04 — the generated interface */
.gen{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(18px,3vw,40px);align-items:center;max-width:960px;margin:0 auto}
@media(max-width:820px){.gen{grid-template-columns:1fr}}
.gen-req p{font-family:var(--serif);font-size:clamp(1.3rem,2.8vw,2rem);color:var(--ink);
  line-height:1.2;margin-top:10px}
.gen-out>.lbl{display:block;margin-bottom:12px}
.gen-card{background:var(--glass-2);border:1px solid var(--glass-line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--glass-shadow)}
.gf{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:15px 20px;border-bottom:1px solid var(--glass-line);font-size:.92rem;color:var(--ink2);
  opacity:0;transform:translateY(8px);
  transition:opacity .5s var(--e) var(--d),transform .5s var(--e) var(--d)}
.rv.in .gf{opacity:1;transform:none}
.gf:last-child{border-bottom:none}
.gf b{font-family:var(--mono);font-size:.76rem;font-weight:500;color:var(--ink)}
.gf.act{background:rgba(180,85,45,.07)}
.gbtn{background:var(--ink);color:var(--paper);border-radius:999px;padding:.6em 1.3em;
  font-size:.86rem;font-weight:500}
.gf.act em{font-style:normal;font-size:.78rem;color:var(--mut)}

/* 05 — three eras */
.eras{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,24px);
  counter-reset:era}
@media(max-width:860px){.eras{grid-template-columns:1fr}}
.eras li{position:relative;padding-top:30px;
  background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--r);
  padding:34px clamp(18px,2.4vw,26px) 24px;box-shadow:var(--glass-shadow)}
/* the dot on the timeline */
.eras li::before{content:"";position:absolute;top:-6px;left:clamp(18px,2.4vw,26px);
  width:11px;height:11px;border-radius:50%;background:var(--paper);
  border:1.5px solid var(--faint)}
.eras li.now::before{background:var(--accent);border-color:var(--accent)}
.era-when{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--faint);
  text-transform:uppercase}
.eras h3{font-size:clamp(1.25rem,2.2vw,1.55rem);margin:10px 0 10px}
.eras li.now h3{color:var(--accent)}
.eras p{font-size:.94rem;color:var(--ink2)}
.era-tag{display:inline-block;margin-top:16px;font-family:var(--mono);font-size:.64rem;
  text-transform:uppercase;letter-spacing:.06em;color:var(--faint)}
.eras li.now .era-tag{color:var(--accent)}

/* ============================================================
   SOUND TOGGLE — bottom right, out of the dock's way. Off until
   asked for; the bars only move while something is playing.
   ============================================================ */
.snd{position:fixed;right:clamp(14px,2.4vw,26px);bottom:clamp(14px,2.4vw,26px);z-index:200;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--glass-line);
  background:var(--glass-2);backdrop-filter:var(--blur);color:var(--ink);cursor:pointer;
  display:grid;place-items:center;box-shadow:var(--glass-shadow);
  transition:background .2s,color .2s,transform .2s var(--e)}
.snd:hover{transform:scale(1.08)}
.snd.on{background:var(--accent);border-color:var(--accent);color:#fff}
.snd-bars{display:flex;align-items:center;gap:2.5px;height:16px}
.snd-bars i{display:block;width:2.5px;height:5px;border-radius:2px;background:currentColor;
  transition:height .3s var(--e)}
/* resting state reads as a muted equaliser */
.snd.on .snd-bars i{animation:sndbar 1.5s ease-in-out infinite}
.snd.on .snd-bars i:nth-child(2){animation-delay:.25s}
.snd.on .snd-bars i:nth-child(3){animation-delay:.5s}
.snd.on .snd-bars i:nth-child(4){animation-delay:.12s}
@keyframes sndbar{0%,100%{height:4px}50%{height:15px}}
.snd::after{content:attr(data-t);position:absolute;right:calc(100% + 10px);top:50%;
  transform:translateY(-50%) translateX(6px);white-space:nowrap;
  font-family:var(--sans);font-size:.75rem;font-weight:500;
  background:var(--ink);color:var(--paper);padding:5px 11px;border-radius:999px;
  opacity:0;transition:opacity .2s,transform .2s var(--e);pointer-events:none}
.snd:hover::after{opacity:1;transform:translateY(-50%)}
@media(prefers-reduced-motion:reduce){.snd.on .snd-bars i{animation:none;height:9px}}
/* on narrow screens the dock ring reaches the right edge — move out of its way */
@media(max-width:520px){.snd{top:clamp(12px,3vw,18px);bottom:auto}}

/* ============================================================
   DOCK — bottom-right. The centre is the CTA; hovering fans the
   navigation out along a quarter circle.
   ============================================================ */
.nav-sticky{display:none}
/* The dock is a wide, invisible hover field with the button at its bottom
   centre — so the pointer can travel from the button out to a link without
   ever leaving the element. It only swallows clicks while it is open. */
/* Closed, it is just a pill at the bottom of the screen. Hovered, it lifts to
   the middle, becomes a circle, and the links fan out around it. The dock
   element itself is a full-height column so the pointer never leaves it on
   the way up. */
.dock{position:fixed;left:50%;bottom:0;z-index:200;
  --r:118px;--btn:66px;
  width:calc(var(--r)*2 + 72px);height:100vh;
  transform:translateX(-50%);pointer-events:none;
  transition:opacity .3s var(--e)}
.dock:hover,.dock:focus-within,.dock.open{pointer-events:auto}
.dock.hide{opacity:0;pointer-events:none}
.dock-core{position:absolute;left:50%;bottom:clamp(14px,2.4vw,24px);height:var(--btn);
  transform:translateX(-50%);transition:bottom .46s var(--e)}
.dock:hover .dock-core,.dock:focus-within .dock-core,.dock.open .dock-core{
  bottom:calc(50% - var(--btn) / 2)}
/* the button: pill by default, circle once open */
.dock-btn{position:absolute;left:50%;top:0;z-index:3;pointer-events:auto;
  height:var(--btn);padding:0 26px;
  display:flex;align-items:center;justify-content:center;white-space:nowrap;
  border-radius:999px;background:var(--ink);color:var(--paper);
  font-family:var(--sans);font-size:.86rem;font-weight:500;letter-spacing:-.01em;
  box-shadow:0 18px 40px -16px rgba(23,19,16,.75),0 2px 8px -4px rgba(23,19,16,.4);
  transform:translateX(-50%);
  transition:padding .34s var(--e),border-radius .34s var(--e),background .25s}
.dock:hover .dock-btn,.dock:focus-within .dock-btn,.dock.open .dock-btn{
  padding:0;width:var(--btn);border-radius:50%;background:var(--accent)}
.dock-btn .d-short{display:none}
.dock:hover .dock-btn .d-long,.dock:focus-within .dock-btn .d-long,.dock.open .dock-btn .d-long{display:none}
.dock:hover .dock-btn .d-short,.dock:focus-within .dock-btn .d-short,.dock.open .dock-btn .d-short{display:inline}
/* the ring — a zero-size point at the button's centre that items rotate around */
.dock-ring{list-style:none;position:absolute;left:50%;top:calc(var(--btn) / 2);width:0;height:0}
.dock-ring li{position:absolute;left:0;top:0;opacity:0;
  transform:rotate(var(--a)) translate(0);
  transition:transform .44s var(--e),opacity .26s var(--e)}
.dock:hover .dock-ring li,.dock:focus-within .dock-ring li,.dock.open .dock-ring li{
  opacity:1;transform:rotate(var(--a)) translate(var(--r))}
.dock-ring li:nth-child(1){transition-delay:0s}
.dock-ring li:nth-child(2){transition-delay:.03s}
.dock-ring li:nth-child(3){transition-delay:.06s}
.dock-ring li:nth-child(4){transition-delay:.09s}
.dock-ring li:nth-child(5){transition-delay:.12s}
.dock-ring li:nth-child(6){transition-delay:.15s}
/* the item is centred on its point and counter-rotated so icons stay upright */
.dock-ring a{position:absolute;left:0;top:0;margin:-24px 0 0 -24px;
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;pointer-events:auto;
  background:rgba(255,255,255,.74);backdrop-filter:var(--blur);border:1px solid var(--glass-line);
  color:var(--ink);box-shadow:var(--glass-shadow);
  transform:rotate(calc(-1 * var(--a)));
  transition:background .2s,color .2s,transform .2s var(--e)}
.dock-ring a:hover{background:var(--ink);color:var(--paper);
  transform:rotate(calc(-1 * var(--a))) scale(1.12)}
.dock-ring a.here{border-color:var(--accent);color:var(--accent)}
.dock-ring a.here:hover{color:var(--paper)}
.dock-ring svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
/* label on hover */
.dock-ring a::after{content:attr(data-t);position:absolute;bottom:calc(100% + 9px);left:50%;
  white-space:nowrap;font-family:var(--sans);font-size:.75rem;font-weight:500;
  background:var(--ink);color:var(--paper);padding:5px 11px;border-radius:999px;
  opacity:0;transform:translateX(-50%) translateY(4px);
  transition:opacity .2s,transform .2s var(--e);pointer-events:none}
.dock-ring a:hover::after{opacity:1;transform:translateX(-50%)}
@media(max-width:600px){
  .dock{--r:94px;--btn:56px;width:calc(var(--r)*2 + 60px);height:calc(var(--r)*2 + 60px)}
  .dock-ring a{margin:-21px 0 0 -21px;width:42px;height:42px}
  .dock-ring svg{width:17px;height:17px}
}
@media(prefers-reduced-motion:reduce){.dock-ring li{transition-delay:0s!important}}

/* mobile: lean harder on opacity, and drop the last backdrop filters */
@media(max-width:700px){
  :root{--glass:rgba(255,255,255,.86);--glass-2:rgba(255,255,255,.93);--glass-dark:rgba(23,19,16,.92)}
  .dock-ring a{backdrop-filter:none;background:rgba(255,255,255,.92)}
}

/* ============================================================
   DOCK ON MOBILE — pinned to the bottom-right corner.

   There is no pointer to travel from the button to a link, so the desktop
   machinery (a full-height hover field, the core lifting to the middle of the
   screen) buys nothing here and gets in the way. The dock stays in the corner
   and the links fan into the only quarter the corner leaves free: up and to
   the left. A 360deg ring would put four of the seven off-screen.

   The radius is set by the targets, not by taste: seven links across a 100deg
   arc need r=158px for a 42px tap target to clear its neighbour.
   ============================================================ */
@media(max-width:700px){
  .dock{left:auto;right:0;bottom:0;transform:none;
    --r:158px;--btn:56px;
    width:calc(var(--r) + var(--btn) + 44px);
    height:calc(var(--r) + var(--btn) + 44px)}
  /* zero-width anchor point: put the button's centre a thumb's width in */
  .dock-core{left:auto;transform:none;
    right:calc(clamp(14px,3vw,20px) + var(--btn) / 2)}
  /* it stays put when open — no lift to the viewport centre */
  .dock:hover .dock-core,.dock:focus-within .dock-core,.dock.open .dock-core{
    bottom:clamp(14px,2.4vw,24px)}
  /* the field must not swallow taps meant for the page behind it; the button
     and the links carry their own pointer-events */
  .dock:hover,.dock:focus-within,.dock.open{pointer-events:none}

  /* Angles are inline on each <li>, so overriding them needs !important.
     275deg (just west of straight up) sweeping to 175deg (just north of
     straight left), in even 16.67deg steps. */
  .dock-ring li:nth-child(1){--a:275deg!important}
  .dock-ring li:nth-child(2){--a:258.3deg!important}
  .dock-ring li:nth-child(3){--a:241.7deg!important}
  .dock-ring li:nth-child(4){--a:225deg!important}
  .dock-ring li:nth-child(5){--a:208.3deg!important}
  .dock-ring li:nth-child(6){--a:191.7deg!important}
  .dock-ring li:nth-child(7){--a:175deg!important}

  /* 42px targets across the whole mobile range, not just under 600px — the
     arc spacing below is 46px, so 48px links would overlap between 600-700px */
  .dock-ring a{margin:-21px 0 0 -21px;width:42px;height:42px}
  .dock-ring svg{width:17px;height:17px}

  /* the tooltip would sit off-screen for the topmost links */
  .dock-ring a::after{display:none}
}