/* ============ TOKENS ============ */
:root{
  /* O6 Labs house colours (chosen 31 Oct 2026): charcoal black, royal blue, tangerine orange */
  --bg:#F4F5F8; --tile:#E7E9EF; --tile-2:#DADDE6;
  --ink:#21232E; --ink-2:#2A2D3A; --muted:#555A6A;
  --accent:#105BFF; --accent-2:#3D7BFF; --on-accent:#fff;
  --pop:#FE8500; --on-pop:#21232E;
  --run-1:#DCE5FF; --run-2:#B7C9FF; --run-3:#3550A8; --run-4:#2E3448;
  --lift:#FE8500; --wall:#14306E;
  --display:'M PLUS Rounded 1c','Arial Rounded MT Bold',system-ui,sans-serif;
  --sans:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r:10px; --gap:8px; --pad:24px;
  --ease:cubic-bezier(.16,1,.3,1);
  --t-xl:clamp(40px,4.2vw,64px);   /* section headings */
  --t-l:clamp(24px,2.4vw,36px);    /* statements */
  --t-m:20px; --t-s:16px; --t-xs:14px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:#fff}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.025em;line-height:1.04;text-wrap:balance}
h2{font-size:var(--t-xl)}
.page{display:grid;gap:var(--gap);padding:var(--gap)}
.tile{border-radius:var(--r);padding:var(--pad);position:relative;overflow:hidden}
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:0 22px;border-radius:var(--r);background:var(--accent);color:var(--on-accent);font:700 var(--t-s)/1 var(--sans);border:0;cursor:pointer;transition:transform .3s var(--ease),background .25s}
.btn svg{transition:transform .3s var(--ease)}
@media(hover:hover){.btn:hover{background:var(--ink)}.btn:hover svg{transform:translateX(4px)}}
.btn:active{transform:scale(.97);transition-duration:.08s}
.arrow{width:22px;height:22px;flex:none}

/* ============ ENTRANCES (only when script runs) ============ */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* ============ HERO: name band and rails ============ */
.hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:170px 64px minmax(0,1fr);gap:var(--gap);height:calc(100svh - var(--gap));min-height:720px}
.band{grid-column:1/-1;background:var(--ink);color:var(--bg);display:flex;align-items:center;justify-content:space-between;padding:0 28px;overflow:hidden}
.band b{font:800 clamp(110px,11vw,170px)/1 var(--display);letter-spacing:-.05em;white-space:nowrap}
.band span{font-size:var(--t-s);max-width:15em;text-align:right;color:var(--run-2)}
.links{grid-column:span 3;background:var(--tile);border-radius:var(--r);padding:0 20px;display:flex;align-items:center;font-weight:500;font-size:var(--t-s);transition:background .25s}
@media(hover:hover){.links:hover{background:var(--tile-2)}}
.links .mark{height:32px;width:58px;flex:none;color:var(--ink)}
.rail-l{grid-column:1/3;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:var(--gap);min-height:0}
.photo{border-radius:var(--r);overflow:hidden;background:var(--tile-2);min-height:0}
.photo img{width:100%;height:100%;object-fit:cover}
.facts{background:var(--tile);border-radius:var(--r);padding:20px;font-size:var(--t-xs);line-height:1.45;list-style:none;display:grid;gap:8px}
.facts li b{display:block;font-size:var(--t-s)}
.ask{background:var(--ink);color:#fff;border-radius:var(--r);padding:20px;display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-height:0}
.ask p{font:800 clamp(22px,1.9vw,30px)/1.1 var(--display);letter-spacing:-.02em}
.ask small{font-size:var(--t-xs);color:var(--run-2)}
.centre{grid-column:3/11;position:relative;border-radius:var(--r);overflow:hidden;min-height:0;background:var(--accent)}
/* the owner's phone: messages and bookings arriving */
.note{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:14px;align-items:center;background:#fff;color:var(--ink);border-radius:16px;padding:14px 16px}
.js .note{opacity:0;transform:translateY(-14px) scale(.97);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.js .note.show{opacity:1;transform:none}
.note b{display:block;font-size:15px;line-height:1.3}
.note span{display:block;font-size:15px;line-height:1.35;color:var(--muted)}
.note time{font-size:13px;color:var(--muted);align-self:start}
.ic{width:40px;height:40px;border-radius:11px;display:block;background-repeat:no-repeat;background-position:center;background-size:22px}
.ic-call{background-color:var(--ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E")}
.ic-msg{background-color:#16A34A;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 4h16v12H8l-4 4z'/%3E%3C/svg%3E")}
.ic-book{background-color:var(--accent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18M9 15l2 2 4-4'/%3E%3C/svg%3E")}
.ic-ad{background-color:var(--run-3);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11v2a1 1 0 0 0 1 1h3l6 4V6L7 10H4a1 1 0 0 0-1 1zM17 9a4 4 0 0 1 0 6'/%3E%3C/svg%3E")}
/* the weekly list, as the owner sees it */
.ledger{background:var(--bg);border-radius:var(--r);padding:28px;height:100%;display:flex;flex-direction:column;gap:18px}
.ledger-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.ledger-top b{font:800 var(--t-l)/1 var(--display);letter-spacing:-.02em}
.ledger-top span{font-size:var(--t-xs);color:var(--muted)}
.ledger table{width:100%;border-collapse:separate;border-spacing:0 6px;font-size:var(--t-s)}
.ledger th{text-align:left;font-size:var(--t-xs);font-weight:500;color:var(--muted);padding:0 14px}
.ledger td{background:var(--tile);padding:14px}
.ledger td:first-child{border-radius:8px 0 0 8px;font-weight:700}
.ledger td:last-child{border-radius:0 8px 8px 0}
.tick{display:inline-block;padding:5px 12px;border-radius:8px;font-weight:700;font-size:var(--t-xs)}
.tick.yes{background:var(--accent);color:#fff}
.tick.no{background:var(--tile-2);color:var(--muted)}
.ledger-foot{margin-top:auto;font-weight:700}
.statement{position:absolute;left:0;right:0;bottom:0;background:var(--bg);padding:24px 28px 26px;border-radius:var(--r) var(--r) 0 0;max-width:min(100%,860px)}
.statement h1{font-size:var(--t-l);line-height:1.08}
.statement p{margin-top:10px;font-size:var(--t-s);max-width:44em}
.rail-r{grid-column:11/13;display:grid;grid-template-rows:repeat(4,minmax(0,1fr)) minmax(0,1.4fr);gap:var(--gap);min-height:0}
.run{border-radius:var(--r);padding:16px;font-size:15px;line-height:1.35;font-weight:500}
.run:nth-child(1){background:var(--run-1)}
.run:nth-child(2){background:var(--run-2)}
.run:nth-child(3){background:var(--run-3);color:#fff}
.run:nth-child(4){background:var(--run-4);color:#fff}
.run.act{background:var(--accent);color:var(--on-accent);display:flex;flex-direction:column;justify-content:space-between;font:800 var(--t-m)/1.15 var(--display);letter-spacing:-.01em;transition:background .25s}
.run.act svg{align-self:flex-end;width:34px;height:34px;transition:transform .3s var(--ease)}
@media(hover:hover){.run.act:hover{background:var(--ink)}.run.act:hover svg{transform:translateX(4px)}}

/* ============ GROW: from old list to full diary ============ */
.grow{background:var(--tile);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:10px;row-gap:18px;padding:var(--pad) var(--pad) 40px}
.grow h2{grid-column:1/8;grid-row:1;align-self:start;max-width:9em}
.stage{grid-row:1;align-self:end;border-radius:var(--r);display:grid;place-items:center}
.stage svg{width:62%;height:auto}
.s1{grid-column:1/4;height:30vh;background:var(--bg)}
.s2{grid-column:4/8;height:44vh;background:var(--run-1)}
.s3{grid-column:8/13;height:60vh;background:var(--accent);color:#fff}
.s1 svg{width:46%}.s2 svg{width:52%}.s3 svg{width:54%}
.cap{grid-row:2}
.cap h3{font-size:var(--t-m);font-weight:800;letter-spacing:-.01em;margin-bottom:6px}
.cap p{font-size:var(--t-s);max-width:30em}
.c1{grid-column:1/4}.c2{grid-column:4/8}.c3{grid-column:8/13}
.seg{fill:currentColor;opacity:.16;transition:opacity .5s var(--ease)}
.seg.on{opacity:1}

/* ============ TWO WAYS: statement cell, dark rows ============ */
.ways{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);min-height:86svh}
.ways-l{background:var(--run-1);display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.ways-l h2 span{display:block}
.ways-l h2 span:nth-child(2){text-align:right}
.ways-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.ways-foot p{max-width:30ch;font-size:var(--t-s)}
.ways-r{display:grid;grid-auto-rows:1fr;gap:0;border-radius:var(--r);overflow:hidden}
.row{display:grid;grid-template-columns:5fr 4fr 3fr;gap:24px;padding:28px;background:var(--ink);color:#fff;align-items:start}
.row:nth-child(even){background:var(--ink-2)}
.row h3{font-size:clamp(22px,2vw,28px);font-weight:800}
.row p{font-size:var(--t-s);color:#D5DCE8}
.row ul{list-style:none;font-size:15px;color:var(--lift);display:grid;gap:4px}

/* ============ THE WEEK (the live thing) ============ */
.week{background:var(--bg);padding:var(--pad) 0}
.week-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding:0 var(--pad)}
.week-top h2 .soft{color:var(--muted);display:block}
.pick{display:flex;flex-wrap:wrap;gap:var(--gap);margin:28px var(--pad) 0}
.pick button{min-height:48px;padding:0 18px;border-radius:var(--r);border:0;background:var(--tile);font-weight:700;font-size:var(--t-s);cursor:pointer;transition:background .25s,color .25s,transform .2s}
@media(hover:hover){.pick button:hover{background:var(--tile-2)}}
.pick button:active{transform:scale(.97)}
.pick button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.agenda{display:grid;grid-template-columns:150px minmax(0,1fr);gap:40px;margin:28px var(--pad) 0}
.days{display:grid;gap:6px;align-content:start}
.day{width:150px;height:64px;border-radius:var(--r);border:0;background:var(--tile);text-align:left;padding:10px 14px;cursor:pointer;transition:background .25s,color .25s}
.day b{display:block;font-size:var(--t-s)}
.day small{font-size:13px;color:var(--muted)}
.day[aria-selected="true"]{background:var(--ink);color:var(--bg)}
.day[aria-selected="true"] small{color:var(--run-2)}
.bands{display:grid;gap:4px;align-content:start}
.bandrow{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:20px;align-items:center;min-height:76px;padding:12px 20px;border-radius:8px;background:var(--tile)}
.bandrow:nth-child(even){background:var(--tile-2)}
.bandrow time{font:500 var(--t-m) var(--sans);font-variant-numeric:tabular-nums}
.bandrow b{display:block;font-size:18px;font-weight:700}
.bandrow small{display:block;font-size:13px;color:var(--muted)}
.src{font-size:var(--t-xs);font-weight:700;padding:7px 12px;border-radius:8px;background:var(--bg);white-space:nowrap}
.src.new{background:var(--accent);color:#fff}
.bandrow.enter{animation:bandIn .5s var(--ease) both}
@keyframes bandIn{from{opacity:0;transform:translateX(18px)}}
.week-note{margin:20px var(--pad) 0;font-size:var(--t-xs);color:var(--muted)}

/* ============ MARQUEE ============ */
.marq{background:var(--ink);color:var(--bg);border-radius:var(--r);overflow:hidden;padding:26px 0}
.marq-track{display:flex;width:max-content;animation:slide 40s linear infinite}
.marq:hover .marq-track{animation-play-state:paused}
.marq-track span{font:800 clamp(48px,7vw,112px)/1 var(--display);letter-spacing:-.04em;white-space:nowrap;padding-right:.6em}
.marq-track span:nth-child(even){color:var(--lift)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ============ PRICING TABLE ============ */
.price{background:var(--tile);padding:0}
.ptable{width:100%;border-collapse:separate;border-spacing:0;font-size:22px;line-height:1.3}
.ptable th,.ptable td{padding:20px 24px;text-align:left;vertical-align:top}
.ptable thead th{padding-top:28px;padding-bottom:28px}
.ptable thead th:first-child{vertical-align:top}
.ptable thead th:first-child h2{font-size:var(--t-xl)}
.pname{display:block;font:800 clamp(26px,2.8vw,42px)/1.05 var(--display);letter-spacing:-.02em}
.pamt{display:block;font:500 clamp(26px,2.8vw,42px)/1.1 var(--display);margin-top:6px}
.pamt small{font:500 var(--t-s) var(--sans);margin-left:6px}
.ptable tbody th{font-weight:500;width:34%}
.ptable tbody tr:nth-child(odd) th,.ptable tbody tr:nth-child(odd) td{background:var(--tile-2)}
.ptable tr.found th,.ptable tr.found td{background:var(--accent);color:#fff}
.ptable tfoot td{padding-bottom:28px}
.pnote{padding:0 24px 28px;font-size:var(--t-s);max-width:60em}
.pcards{display:none}

/* ============ ABOUT ============ */
.about{background:var(--bg);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;padding:var(--pad) var(--pad) 40px}
.about h2{grid-column:1/-1}
.about .lead{grid-column:1/8;font-size:21px;line-height:1.5}
.about-ph{grid-column:1/9;margin-top:48px;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;background:var(--tile);border-radius:var(--r);padding:16px}
.about-ph blockquote{align-self:end;padding:8px 8px 12px;font-size:var(--t-m);line-height:1.45}
.about-ph blockquote b{display:block;margin-top:14px;font-size:var(--t-s)}
.about-side{grid-column:9/13;margin-top:48px;display:grid;grid-template-rows:auto auto;gap:16px;align-content:start}
.about-col{background:var(--accent);color:#fff;border-radius:var(--r);aspect-ratio:4/3.6;display:grid;place-items:center}
.about-col svg{width:62%}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
.kv dt{font-size:var(--t-xs);color:var(--muted)}
.kv dd{font-weight:700;font-size:var(--t-s)}

/* ============ FAQ ============ */
.faq{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:start;padding:var(--pad) 0}
.faq h2{grid-column:1/5;position:sticky;top:24px;padding:0 var(--pad)}
.faq-list{grid-column:5/13;display:grid;gap:var(--gap)}
.faq details{background:var(--tile);border-radius:var(--r);transition:background .3s}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:72px;padding:18px 24px;font-size:var(--t-m);font-weight:500;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.pm{position:relative;width:16px;height:16px;flex:none}
.pm::before,.pm::after{content:"";position:absolute;left:0;top:6.5px;width:16px;height:3px;border-radius:2px;background:currentColor;transition:transform .35s var(--ease)}
.pm::after{transform:rotate(90deg)}
.faq details[open]{background:var(--accent);color:#fff}
.faq details[open] .pm::after{transform:rotate(0)}
.faq details p{padding:0 24px 24px;font-size:17px;max-width:52ch}
@media(hover:hover){.faq details:not([open]):hover{background:var(--tile-2)}}

/* ============ CONTACT ============ */
.contact{background:var(--accent);color:#fff;border-radius:var(--r);padding:48px 0 40px;min-height:80svh;overflow:hidden}
/* replies people send back, drifting past */
.strip{display:flex;gap:12px;width:max-content;animation:slide 60s linear infinite}
.strip span{display:block;white-space:nowrap;background:#fff;color:var(--ink);font-size:clamp(18px,1.6vw,24px);font-weight:500;padding:18px 24px;border-radius:22px 22px 22px 6px}
.strip span:nth-child(3n+2){background:var(--ink);color:#fff;border-radius:22px 22px 6px 22px}
.strip span:nth-child(4n){background:var(--accent-2);color:#fff}
.contact h2{margin:72px var(--pad) 0}
.contact .sub{margin:16px var(--pad) 0;font-size:var(--t-s);max-width:40em}
.bar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);margin:40px var(--pad) 0}
.bar input{height:96px;width:100%;border:0;border-radius:var(--r);background:var(--accent-2);color:#fff;text-align:center;font-size:18px;padding:0 14px;transition:background .25s}
.bar input::placeholder{color:rgba(255,255,255,.86)}
.bar input:focus{outline:none;background:#fff;color:var(--ink)}
.bar input:focus::placeholder{color:var(--muted)}
.bar button{height:96px;border:0;border-radius:var(--r);background:var(--bg);color:var(--ink);font:800 var(--t-m) var(--display);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:12px;transition:background .25s,color .25s,transform .2s}
@media(hover:hover){.bar button:hover{background:var(--ink);color:#fff}}
.bar button:active{transform:scale(.98)}
.fine{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin:16px var(--pad) 0;font-size:var(--t-xs)}
.fine a{text-decoration:underline;text-underline-offset:3px}
.sent{margin:40px var(--pad) 0;background:var(--bg);color:var(--ink);border-radius:var(--r);padding:28px;font-size:var(--t-m);font-weight:700}
.err{margin:12px var(--pad) 0;font-weight:700}

/* ============ FOOTER ============ */
.foot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.foot .tile{min-height:220px;display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.f-say{grid-column:1/5;background:var(--tile)}
.f-say p{font:800 24px/1.2 var(--display);letter-spacing:-.01em}
.f-say small,.f-time small{font-size:13px;color:var(--muted)}
.f-nav{grid-column:5/8;background:var(--tile)}
.f-nav ul{list-style:none;display:grid;gap:6px;font-size:var(--t-s)}
.f-nav a{transition:color .2s}.f-nav a:hover{color:var(--accent)}
.f-time{grid-column:8/10;background:var(--tile-2)}
.f-time b{font:800 var(--t-l)/1 var(--display);font-variant-numeric:tabular-nums}
.f-mail{grid-column:10/13;background:var(--tile-2)}
.f-mail a{font-size:var(--t-m);font-weight:700;text-decoration:underline;text-underline-offset:4px}
.f-big{grid-column:1/9;background:var(--ink);color:var(--bg);min-height:320px!important;align-items:center;justify-content:center!important;flex-direction:row!important;gap:5vw!important}
.f-big svg{height:clamp(80px,9vw,150px);width:auto}
.f-big b{font:800 clamp(80px,9vw,150px)/.8 var(--display);letter-spacing:-.05em}
.f-go{grid-column:9/13;background:var(--accent);color:#fff;min-height:320px!important;transition:background .25s}
@media(hover:hover){.f-go:hover{background:var(--ink)}}
.f-go span{font:800 28px/1.15 var(--display);letter-spacing:-.01em;max-width:8em}
.f-go svg{align-self:flex-end;width:56px;height:56px;transition:transform .3s var(--ease)}
.f-go:hover svg{transform:translateX(6px)}
.f-credits{grid-column:1/-1;background:var(--tile);min-height:0!important;font-size:13px;color:var(--muted);line-height:1.6}
.f-credits a{text-decoration:underline;text-underline-offset:2px}


/* ============ PHONE ============ */
@media(max-width:820px){
  :root{--pad:20px;--gap:6px;--t-xl:8vw}
  .hero{grid-template-columns:1fr 1fr;grid-template-rows:auto;height:auto;min-height:0}
  .band{height:110px;padding:0 16px}
  .band b{font-size:26vw}
  .band span{display:none}
  .links{grid-column:span 1;height:56px}
  .rail-l{display:contents}
  .ask{grid-column:1/-1;order:5}
  .centre{grid-column:1/-1;order:1;display:flex;flex-direction:column}
  .note{grid-template-columns:36px minmax(0,1fr) auto;padding:12px;gap:12px}
  .ic{width:36px;height:36px}
  .statement{position:static;order:-1;border-radius:0;background:var(--bg);padding:12px 4px 22px}
  .centre{background:none;border-radius:0}
  .band{height:96px}.band b{font-size:22vw}
  .links{height:50px;font-size:15px;padding:0 14px}
  .statement h1{font-size:6.6vw}
  .stmt-wrap{grid-column:1/-1}
  .facts{grid-column:1/-1;order:4}
  .rail-r{grid-column:1/-1;order:3;grid-template-columns:1fr 1fr;grid-template-rows:none}
  .run.act{grid-column:1/-1;min-height:110px}
  .grow{grid-template-columns:1fr;row-gap:12px}
  .grow h2{grid-column:1;grid-row:auto;font-size:30px}
  .stage,.cap{grid-column:1!important;grid-row:auto}
  .s1{height:34vw}.s2{height:46vw}.s3{height:62vw}
  .s1{order:1}.c1{order:2}.s2{order:3}.c2{order:4}.s3{order:5}.c3{order:6}
  .cap{margin-bottom:22px}.cap h3{font-size:18px}
  .ways{grid-template-columns:1fr;min-height:0}
  .ways-l{min-height:0;gap:28px}
  .ways-l h2{font-size:10vw}
  .row{grid-template-columns:1fr;gap:10px}
  .row ul{display:block}.row ul li{display:inline}.row ul li:not(:last-child)::after{content:", "}
  .agenda{grid-template-columns:1fr;gap:16px}
  .days{grid-auto-flow:column;grid-auto-columns:1fr;position:sticky;top:0;z-index:2;background:var(--bg);padding:6px 0}
  .day{width:auto;height:58px;padding:8px}
  .day small{display:none}
  .bandrow{grid-template-columns:1fr auto;gap:6px 12px;padding:14px 16px}
  .bandrow time{grid-column:1/-1;font-size:17px}
  .ptable{display:none}
  .price{display:flex;flex-direction:column}.pnote{order:2;padding:0 var(--pad) var(--pad)}
  .pcards{display:grid;gap:var(--gap);padding:var(--pad)}
  .pcard{border-radius:var(--r);padding:20px;background:var(--bg)}
  .pcard .pname,.pcard .pamt{font-size:9vw}
  .pcard dl{display:grid;gap:12px;margin:18px 0}
  .pcard dt{color:var(--muted);font-size:17px}
  .pcard dd{font-size:17px}
  .pcard .btn{width:100%}
  .pcards h2{margin-bottom:8px}
  .pcards .found{background:var(--accent);color:#fff;border-radius:var(--r);padding:20px;font-size:17px}
  .about{grid-template-columns:1fr}
  .about h2,.about .lead,.about-ph,.about-side{grid-column:1}
  .about .lead{font-size:18px}
  .about-ph{grid-template-columns:1fr;margin-top:24px;padding:8px}
  .ledger{padding:18px}
  .ledger th:nth-child(3),.ledger td:nth-child(3){display:none}
  .ledger td{padding:12px 10px}
  .about-ph blockquote{font-size:17px}
  .about-side{margin-top:24px}
  .about-col{aspect-ratio:3/2}
  .faq{grid-template-columns:1fr}
  .faq h2{grid-column:1;position:static;font-size:9vw}
  .faq-list{grid-column:1}
  .faq summary{font-size:18px;min-height:64px;padding:16px 20px}
  .faq details p{font-size:16px;padding:0 20px 20px}
  .strip span{font-size:17px;padding:14px 18px}
  .contact h2{margin-top:48px;font-size:9vw}
  .bar{grid-template-columns:1fr}
  .bar input,.bar button{height:60px}
  .foot{grid-template-columns:1fr 1fr}
  .foot .tile{min-height:160px}
  .f-big{grid-column:1/-1;order:-2;min-height:160px!important}
  .f-go{grid-column:1/-1;order:-1;min-height:160px!important}
  .f-nav,.f-mail{grid-column:span 1}
  .f-time,.f-say{grid-column:span 1}
}
@media(max-width:420px){.f-time,.f-say,.f-nav,.f-mail{grid-column:1/-1}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}


/* ============ PROBLEM PICKER ============ */
.fix{display:grid;gap:4px;margin:28px var(--pad) 0}
.fixrow{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:center;min-height:88px;padding:18px 22px;border-radius:8px;background:var(--tile)}
.fixrow:nth-child(2){background:var(--tile-2)}
.fixrow.see{background:var(--accent)}
.fixrow.see .fixk{color:#fff}
.fixrow.see .note{max-width:520px}
.fixk{font-size:var(--t-xs);font-weight:700;color:var(--muted)}
.fixrow p{font-size:var(--t-m);line-height:1.4;max-width:40em}
.fix.swap .fixrow{animation:bandIn .5s var(--ease) both}
.fix.swap .fixrow:nth-child(2){animation-delay:.07s}.fix.swap .fixrow:nth-child(3){animation-delay:.14s}
@media(max-width:820px){.fixrow{grid-template-columns:1fr;gap:8px;padding:16px}.fixrow p{font-size:17px}}

/* name band: the two-ring mark (reads O6) then LABS, so the O never looks like a zero */
.band .bandname{display:flex;align-items:center;gap:.25em;max-width:none;text-align:left;color:var(--bg);font-size:clamp(110px,11vw,170px)}
.band .bandname svg{height:.78em;width:auto;flex:none}
.band .bandname b{font-size:1em;line-height:1}
@media(max-width:820px){.band .bandname{display:flex;font-size:18vw}}

/* the designed primary logo (rings with LABS beneath) */
.band .bandname svg.primary{height:150px;width:auto}
.f-big svg.primary{height:clamp(150px,16vw,240px)!important;width:auto}
@media(max-width:820px){.band{height:auto!important;padding:12px 16px}.band .bandname svg.primary{height:84px}.f-big svg.primary{height:120px!important}}

/* where we are: two short lines, right-aligned in the name band */
.band .bandloc{display:grid;gap:6px;max-width:none;text-align:right;font:500 clamp(18px,1.5vw,24px)/1.15 var(--display);letter-spacing:-.01em;color:var(--run-2)}
.band .bandloc b{font:800 1em/1.15 var(--display);letter-spacing:-.01em;color:var(--bg);white-space:normal}
@media(max-width:820px){.band .bandloc{display:grid;font-size:15px;gap:4px}}

/* ============ FEEL: feedback on everything you can touch ============ */
/* tiles and links sink slightly when pressed, then spring back */
.links,.run,.pick button,.faq summary,.f-go,.f-nav a,.btn,.bar button{-webkit-tap-highlight-color:transparent}
.links:active,.run:active,.f-go:active{transform:scale(.97);transition:transform .08s}
.links,.run,.f-go{transition:transform .45s var(--ease),background .25s,color .25s}
/* right-hand rail: each fact nudges left on hover */
@media(hover:hover){.run:not(.act):hover{transform:translateX(-6px)}}
/* problem chips: a small pop when chosen */
.pick button[aria-pressed="true"]{animation:pop .35s var(--ease)}
@keyframes pop{40%{transform:scale(1.06)}}
/* FAQ: answers open smoothly instead of jumping */
:root{interpolate-size:allow-keywords}
.faq details::details-content{block-size:0;overflow:hidden;transition:block-size .45s var(--ease),content-visibility .45s allow-discrete}
.faq details[open]::details-content{block-size:auto}
.faq summary:active{transform:scale(.99)}
/* weekly list: the yes/no ticks pop in one by one */
.js .ledger .tick{opacity:0;transform:scale(.6);transition:opacity .3s,transform .45s cubic-bezier(.34,1.56,.64,1)}
.js .ledger.go .tick{opacity:1;transform:none}
/* the phone in the hero leans gently towards the mouse */
/* stages in "From old list to full diary" rise at slightly different speeds */
.stage{will-change:transform}
/* links in the footer slide on hover */
@media(hover:hover){.f-nav a{display:inline-block;transition:transform .25s var(--ease),color .2s}.f-nav a:hover{transform:translateX(4px)}}
@media(prefers-reduced-motion:reduce){.js .ledger .tick{opacity:1;transform:none}.stage,.feed .notes,.feed .lock{transform:none!important}}

/* ============ THE PHONE (hero) ============ */
.feed{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;padding:40px 56px 0;color:#fff;perspective:1400px}
.feed-say{align-self:center;padding-bottom:200px;max-width:15em}
.feed-say p{font:800 clamp(30px,3vw,46px)/1.05 var(--display);letter-spacing:-.025em}
.feed-say small{display:block;margin-top:14px;font-size:var(--t-s);line-height:1.45;color:rgba(255,255,255,.86)}
/* the device: a dark frame with a bright inner edge, rising from below and tucked behind the headline */
.device{align-self:start;width:330px;height:680px;padding:11px;border-radius:54px;background:#0E0D0C;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18),0 40px 80px -24px rgba(20,10,5,.55);transform-style:preserve-3d;will-change:transform}
.device-screen{position:relative;height:100%;border-radius:44px;overflow:hidden;background:var(--wall);padding:58px 14px 0}
.wall{position:absolute;left:50%;top:58%;width:150%;transform:translate(-50%,-50%);color:var(--accent);opacity:.5}
.island{position:absolute;top:12px;left:50%;width:96px;height:28px;margin-left:-48px;border-radius:20px;background:#000}
.lock{position:relative;text-align:center;color:#fff}
.lock small{display:block;font-size:15px;font-weight:500;letter-spacing:.01em;opacity:.9}
.lock b{display:block;font:500 76px/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-top:2px}
.notes{position:relative;list-style:none;display:grid;gap:8px;margin-top:22px}
/* notifications: frosted glass over the wallpaper */
.notes .note{grid-template-columns:34px minmax(0,1fr) auto;gap:10px;padding:11px 12px;border-radius:20px;background:rgba(252,250,247,.74);backdrop-filter:blur(20px) saturate(1.8);-webkit-backdrop-filter:blur(20px) saturate(1.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.notes .note b{font-size:13.5px;line-height:1.25;letter-spacing:-.005em}
.notes .note span{font-size:13.5px;line-height:1.3;color:#4F4A44}
.notes .note time{font-size:12px;color:#4F4A44}
.notes .ic{width:34px;height:34px;border-radius:9px;background-size:19px}
/* notifications drop in from the top, like a real lock screen */
.js .notes .note{transform:translateY(-18px) scale(.94);transition:opacity .45s cubic-bezier(.2,.8,.2,1),transform .55s cubic-bezier(.2,.8,.2,1)}
@media(prefers-reduced-transparency:reduce){.notes .note{background:#FCFAF7;backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(prefers-contrast:more){.notes .note{background:#fff;box-shadow:0 0 0 1px var(--ink)}}
@media(max-width:1180px) and (min-width:821px){.feed-say{display:none}.feed{grid-template-columns:1fr;justify-items:center}}
@media(max-width:820px){
  .feed{background:var(--accent);border-radius:var(--r);overflow:hidden}
  .feed{position:relative;display:block;height:540px;padding:24px 20px 0}
  .feed-say{padding:0;max-width:none}
  .feed-say p{font-size:26px}.feed-say small{font-size:15px;margin-top:8px}
  .device{width:min(300px,82vw);height:620px;margin:22px auto 0;border-radius:48px;padding:10px}
  .device-screen{border-radius:39px;padding-top:52px}
  .lock b{font-size:64px}
}

/* Apple review: type that adjusts its shapes to its size, bigger touch areas in the footer */
body{font-optical-sizing:auto}
.f-nav li a{display:inline-block;padding:5px 0}

/* ============ REVIEW PASS (31 Oct): easier to act, better balance ============ */
/* hero: the headline tile runs the full width, so the phone tucks behind it evenly */
.statement{max-width:none}
.hero-cta{display:none}
/* problem picker: the button names the problem they picked */
.fix-go{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:20px var(--pad) 0}
.fix-go span{font-size:var(--t-s);color:var(--muted)}
/* pricing: the weekly list sits with the prices, where it explains the bonus */
.bonus-how{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;padding:0 var(--pad) var(--pad)}
.bonus-say{align-self:end;padding:8px 8px 16px}
.bonus-say h3{font-size:var(--t-l);margin-bottom:12px}
.bonus-say p{font-size:var(--t-m);line-height:1.45;max-width:24em}
/* about: the founder's words get room */
.about-ph{grid-template-columns:1fr;background:none;padding:0}
.about-ph blockquote{font:500 clamp(22px,2vw,30px)/1.35 var(--display);letter-spacing:-.01em;padding:0;max-width:30em}
.about-ph blockquote b{font:700 var(--t-s) var(--sans);letter-spacing:0;margin-top:18px}
/* contact: picking a time is the main route */
.paths{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:36px var(--pad) 0}
.paths span{font-size:var(--t-s);max-width:28em}
.btn-inv{background:var(--bg);color:var(--ink);min-height:64px;font-size:18px}
@media(hover:hover){.btn-inv:hover{background:var(--ink);color:#fff}}
.bar{margin-top:20px}
/* phones: a slim booking bar follows once you're past the top, and steps aside at the contact form */
.dock{display:none}
@media(max-width:820px){
  .hero{grid-template-columns:repeat(6,minmax(0,1fr))}
  .hero > a.links:first-of-type{display:none}
  .links{grid-column:span 2;justify-content:center;padding:0 8px}
  .hero-cta{display:flex;width:100%;margin-top:16px}
  .bonus-how{grid-template-columns:1fr}
  .bonus-say{padding:4px}
  .about-ph blockquote{font-size:20px}
  .paths .btn-inv{width:100%}
  .dock{display:flex;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:60;align-items:center;justify-content:space-between;min-height:56px;padding:0 20px;border-radius:16px;background:rgba(22,21,20,.86);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 12px 30px -10px rgba(20,10,5,.5);color:#fff;font-weight:700;transform:translateY(160%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
  .dock.show{transform:none}
  .dock:active{transform:scale(.98);transition-duration:.08s}
}
@media(prefers-reduced-transparency:reduce){.dock{background:var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none}}

/* ============ STAGES SHOW WHAT HAPPENS (31 Oct) ============ */
/* each box shows the real messages at that stage; the O in the corner fills as you go */
.stage{display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;gap:8px;padding:20px;position:relative;overflow:hidden}
.stage svg,.s1 svg,.s2 svg,.s3 svg{position:absolute;top:18px;left:18px;width:46px!important;height:46px}
.bub{max-width:88%;align-self:flex-start;padding:11px 15px;border-radius:18px 18px 18px 6px;background:#fff;color:var(--ink);font-size:15px;line-height:1.38}
.bub.me{align-self:flex-end;border-radius:18px 18px 6px 18px;background:var(--accent);color:#fff}
.s3 .bub.me{background:#fff;color:var(--ink)}
.when{align-self:flex-end;font-size:13px;color:var(--muted)}
.s3 .when{color:rgba(255,255,255,.85)}
.bookcard{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:center;background:rgba(255,255,255,.95);color:var(--ink);border-radius:16px;padding:12px 14px}
.bookcard b{display:block;font-size:15px}.bookcard span{display:block;font-size:14px;color:var(--muted)}
.bookcard .ic-book{background-color:var(--ink)}
/* "Two ways" no longer stretches to a near-empty screen on big displays */
.ways{min-height:0}
.ways-l{min-height:520px}
@media(max-width:820px){.s1,.s2,.s3{height:auto!important;min-height:0}.s1{padding-top:76px}.s2{padding-top:76px}.s3{padding-top:76px}.ways-l{min-height:0}}

/* QA fixes (31 Oct): keep the picker heading to two lines on phones and tablets; bigger email tap area */
@media(max-width:820px){.week-top h2{font-size:6.4vw}}
.f-mail a{display:inline-block;padding:8px 0}
/* keyboard focus stays visible on blue surfaces */
.contact :focus-visible,.centre :focus-visible,.run.act:focus-visible,.f-go:focus-visible,.found :focus-visible{outline-color:#fff}
/* desktop: the completed O fills the space in the last box, so the six pieces come together at "booked" */
@media(min-width:821px){
  .s1{height:auto;min-height:max(30vh,250px)}.s2{height:auto;min-height:max(40vh,320px)}.s3{height:auto;min-height:max(54vh,430px)}
  .s3 svg{position:static!important;width:min(38%,190px)!important;height:auto;align-self:center;margin:auto 0 20px}
}

/* =====================================================================
   V2 LAYOUT (31 Oct): charcoal, royal blue, tangerine. Things overlap,
   edges fade softly, and sections stop being rows of equal boxes.
   ===================================================================== */
.btn-pop{background:var(--pop);color:var(--on-pop)}
@media(hover:hover){.btn-pop:hover{background:#fff;color:var(--ink)}}

/* ---------- HERO ---------- */
.hx{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:#fff;border-radius:var(--r);padding-bottom:30px}
/* soft blue light in the corner that fades out, instead of a hard edge */
.hx::before{content:"";position:absolute;right:-10%;top:-20%;width:70%;height:90%;background:radial-gradient(closest-side,rgba(16,91,255,.38),rgba(16,91,255,0));z-index:-1;pointer-events:none}
.hx::after{content:"";position:absolute;left:0;right:0;bottom:0;height:160px;background:linear-gradient(rgba(33,35,46,0),var(--ink));z-index:1;pointer-events:none}
.hx-curve{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hx-curve path{fill:none;vector-effect:non-scaling-stroke}
.hx-curve .c1{stroke:var(--accent);stroke-width:3;filter:drop-shadow(0 0 10px rgba(16,91,255,.9))}
.hx-curve .c2{stroke:rgba(16,91,255,.35);stroke-width:1.5}
.js .hx-curve .c1{stroke-dasharray:2600;stroke-dashoffset:2600;animation:draw 2.4s .3s cubic-bezier(.6,0,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.hx-nav{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 28px}
.hx-logo svg{display:block;height:58px;width:auto;color:#fff}
.hx-links{display:flex;gap:32px;font-size:15px;font-weight:500;color:#C9CCD6}
.hx-links a{padding:10px 0;transition:color .2s}
.hx-links a:hover{color:#fff}
.hx-book{min-height:48px}
.hx-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) 330px minmax(0,1fr);grid-template-areas:"l phone r" "sub phone q";column-gap:40px;row-gap:28px;padding:20px 40px 0;align-items:center}
.hx-h{display:contents}
.hx-l,.hx-r{font:800 clamp(52px,6.6vw,112px)/.92 var(--display);letter-spacing:-.03em;text-transform:uppercase}
.hx-l{grid-area:l;align-self:end;text-align:right}
.hx-r{grid-area:r;align-self:end}
/* "booked" sits in a selection box, as if it has just been picked on a screen */
.sel{position:relative;display:inline-block;padding:0 .08em;margin-bottom:.06em;box-shadow:inset 0 0 0 2px var(--accent);color:#fff}
.sel::before,.sel::after{content:"";position:absolute;width:10px;height:10px;background:#fff;box-shadow:0 0 0 2px var(--accent)}
.sel::before{left:-5px;top:-5px}
.sel::after{right:-5px;bottom:-5px}
.hx-sub{grid-area:sub;align-self:start;justify-self:end;max-width:30em;text-align:right}
.hx-sub p{font-size:18px;line-height:1.5;color:#D5D8E0}
.hx-cta{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;justify-content:flex-end;margin-top:22px}
.hx-ghost{font-weight:700;padding:12px 0;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.35)}
.hx-where{display:block;margin-top:18px;font-size:14px;color:#A9AEBD}
.hx-where b{color:#fff}
.hx-phone{grid-area:phone;position:relative;align-self:start;perspective:1400px;height:600px}
.hx-phone .device{width:330px;height:640px;margin:0;-webkit-mask-image:linear-gradient(#000 74%,transparent 96%);mask-image:linear-gradient(#000 74%,transparent 96%)}
.cx{position:absolute;z-index:3;display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;border-radius:18px;font-size:14px;line-height:1.25;box-shadow:0 22px 44px -18px rgba(0,0,0,.65)}
.cx b{display:block;font-size:15px}
.cx1{background:#fff;color:var(--ink);left:-120px;top:150px;rotate:-6deg}
.cx2{background:var(--accent);color:#fff;right:-104px;top:330px;rotate:5deg}
.cx2 svg{width:34px;height:34px;padding:6px;border-radius:10px;background:rgba(255,255,255,.18);flex:none}
.hx-q{grid-area:q;align-self:start;justify-self:start;max-width:300px;background:var(--pop);color:var(--on-pop);border-radius:20px;padding:22px 24px;rotate:3deg;box-shadow:0 26px 50px -24px rgba(0,0,0,.6)}
.hx-q p{font:800 24px/1.12 var(--display);letter-spacing:-.015em}
.hx-q small{display:block;margin-top:10px;font-size:14px;font-weight:500}
.hx-facts{position:relative;z-index:3;list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:0 24px;margin-top:-40px}
.hx-facts li{padding:10px 16px;border-radius:100px;font-size:14px;font-weight:500;color:#E3E5EC;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hx-facts li.pop{background:var(--pop);color:var(--on-pop);box-shadow:none;font-weight:700}

/* ---------- HOW IT WORKS: dark band, boxes step down like stairs ---------- */
.grow{background:var(--ink);color:#fff;padding-bottom:150px;isolation:isolate}
.grow h2{color:#fff;position:relative;z-index:1}
.grow-curve{position:absolute;left:0;right:0;bottom:40px;width:100%;height:70%;z-index:0;pointer-events:none}
.grow-curve path{fill:none;stroke:var(--accent);stroke-width:3;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 8px rgba(16,91,255,.8));opacity:.85}
.stage,.cap{position:relative;z-index:1}
.s1{background:#2F3344}
.s2{background:var(--accent);color:#fff}
.s3{background:var(--pop);color:var(--on-pop)}
.s1 svg,.s2 svg{color:#fff}
.s3 svg{color:var(--ink)}
.s2 .bub.me,.s3 .bub.me{background:var(--ink);color:#fff}
.s1 .when{color:#A9AEBD}
.s2 .when{color:rgba(255,255,255,.85)}
.s3 .when{color:rgba(33,35,46,.8)}
.cap h3{color:#fff}
.cap p{color:#C9CCD6}
@media(min-width:821px){.s2,.c2{translate:0 56px}.s3,.c3{translate:0 112px}}

/* ---------- TWO WAYS: the blue panel overlaps the dark rows ---------- */
.ways-l{background:var(--accent);color:#fff;position:relative;z-index:2;box-shadow:24px 0 50px -20px rgba(0,0,0,.35)}
.ways-l p{color:rgba(255,255,255,.92)}
.ways-l .btn{background:var(--pop);color:var(--on-pop)}
@media(min-width:821px){.ways{grid-template-columns:1fr 1.15fr}.ways-l{margin-right:-48px;margin-top:40px;margin-bottom:-24px}.ways-r .row{padding-left:76px}}

/* ---------- tangerine marks the actions ---------- */
.pick button[aria-pressed="true"]{background:var(--pop);color:var(--on-pop)}
.fixrow.see{background:var(--ink)}
.tick.yes{background:var(--pop);color:var(--on-pop)}
.ptable tr.found th,.ptable tr.found td,.pcards .found{background:var(--pop);color:var(--on-pop)}
.paths .btn-inv{background:var(--pop);color:var(--on-pop)}
.f-go{background:var(--pop);color:var(--on-pop)}
@media(hover:hover){.f-go:hover{background:var(--accent);color:#fff}}
.dock .arrow{color:var(--pop)}
.dock{background:rgba(33,35,46,.88)}
/* moving text fades out at the sides instead of being chopped off */
.marq,.contact .strip{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
/* contact: dark with the blue glow, matching the top */
.contact{background:var(--ink);position:relative;isolation:isolate}
.contact::before{content:"";position:absolute;left:-10%;bottom:-30%;width:70%;height:90%;background:radial-gradient(closest-side,rgba(16,91,255,.4),rgba(16,91,255,0));z-index:-1;pointer-events:none}
.bar input{background:#33374A}
.bar input::placeholder{color:#C9CCD6}
.contact :focus-visible,.hx :focus-visible{outline-color:var(--pop)}

/* ---------- phones ---------- */
@media(max-width:820px){
  .hx-nav{padding:14px 16px}
  .hx-logo svg{height:46px}
  .hx-links{display:none}
  .hx-book{min-height:44px;padding:0 16px}
  .hx-grid{grid-template-columns:1fr;grid-template-areas:"l" "r" "sub" "phone" "q";padding:14px 20px 0;row-gap:18px}
  .hx-l,.hx-r{font-size:12.4vw;text-align:left}
  .hx-r{margin-top:-10px}
  .hx-sub{justify-self:start;text-align:left}
  .hx-sub p{font-size:17px}
  .hx-cta{justify-content:flex-start}
  .hx-cta .btn{width:100%}
  .hx-phone{justify-self:center;height:520px;margin-top:8px}
  .hx-phone .device{width:min(290px,76vw);height:600px}
  .cx{padding:10px 12px 10px 10px;font-size:13px}
  .cx b{font-size:14px}
  .cx1{left:-34px;top:120px}
  .cx2{right:-30px;top:290px}
  .cx .ic,.cx2 svg{width:30px;height:30px}
  .hx-q{justify-self:center;margin-top:-90px;position:relative;z-index:3;rotate:-2deg;max-width:none;width:calc(100% - 12px)}
  .hx-q p{font-size:21px}
  .hx-facts{margin-top:20px;justify-content:flex-start;padding:0 20px}
  .grow{padding-bottom:40px}
  .grow-curve{display:none}
  .ways-l{box-shadow:none}
}
@media(prefers-reduced-motion:reduce){.js .hx-curve .c1{stroke-dasharray:none;stroke-dashoffset:0;animation:none}}
/* keep the floating cards clear of the words: they overlap the phone, never the headline or the question card */
@media(min-width:821px){.cx1{top:8px}.hx-q{justify-self:end;margin-right:8px}}
/* small laptops and tablets on their side: words on the left, phone on the right */
@media(min-width:821px) and (max-width:1180px){
  .hx-grid{grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:"l phone" "r phone" "sub phone" "q phone";row-gap:14px;column-gap:56px;align-items:start}
  .hx-l,.hx-r{text-align:left;font-size:clamp(46px,6.6vw,76px)}
  .hx-l{align-self:end;margin-top:30px}
  .hx-sub{justify-self:start;text-align:left}
  .hx-cta{justify-content:flex-start}
  .hx-q{justify-self:start;rotate:-2deg;margin-top:6px}
  .hx-phone{height:620px}
  .hx-phone .device{width:300px;height:620px}
  .cx1{left:-96px;top:8px}
  .cx2{right:-14px;top:360px}
}
/* the missed-call card hugs the left edge of the phone at every desktop size, so it never reaches the headline */
@media(min-width:821px){.cx1{left:-36px;top:200px}}
@media(min-width:821px) and (max-width:1180px){.cx1{left:-40px;top:190px}.hx-facts{margin-top:24px}}
/* in-between laptop widths: drop the question card below the blue "booked" card, and give the facts room */
@media(min-width:1181px) and (max-width:1360px){.hx-q{margin-top:120px}.cx2{top:250px}.hx-facts{margin-top:28px}}
@media(max-width:820px){.cx1{top:10px;left:-22px}}

/* ---------- TWO WAYS: the blue panel shows both ways, side by side ---------- */
.ways-l{justify-content:flex-start;gap:28px}
.ways-foot{margin-top:auto}
.ways-vis{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.wv{background:rgba(255,255,255,.12);border-radius:16px;padding:14px;display:grid;gap:8px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.wv-k{font-size:13px;font-weight:700;letter-spacing:.01em;color:#fff;margin-bottom:2px}
.wv-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;color:var(--ink);border-radius:12px;padding:10px 12px;font-size:13.5px;line-height:1.3}
.wv-row span{min-width:0}
.wv-row b{display:block;font-size:14px}
.wv-row em{flex:none;font-style:normal;font-size:12.5px;font-weight:700;padding:4px 8px;border-radius:8px;background:var(--run-1);color:var(--accent)}
.wv-new em{background:var(--pop);color:var(--on-pop)}
.wv-adcard{background:var(--ink);color:#fff;border-radius:12px;padding:12px;font-size:14px;line-height:1.35}
.wv-adcard p{margin-top:6px;font-weight:500}
.wv-tag{display:inline-block;font-size:12.5px;color:#C9CCD6}
/* the second card sits a little lower and tilted, so the two overlap the eye like the rest of the page */
@media(min-width:821px){.wv-ad{margin-top:34px;rotate:2deg}.wv-list{rotate:-1.5deg}}
@media(max-width:520px){.ways-vis{grid-template-columns:1fr}}
@media(min-width:821px) and (max-width:1100px){.ways-vis{grid-template-columns:1fr}.wv-ad{margin-top:0}}
/* desktop: the blue panel is only as tall as its content and stays pinned while the dark rows scroll past */
@media(min-width:821px){.ways{align-items:start}.ways-l{position:sticky;top:20px;min-height:0;margin-bottom:0}.ways-foot{margin-top:8px}}

/* ---------- FOUNDER PHOTO: black and white, washed royal blue, logo overlapping, tilted ---------- */
.about-col{position:relative;margin:0;overflow:visible;isolation:isolate;rotate:-2deg;box-shadow:0 30px 60px -30px rgba(33,35,46,.55)}
.about-col img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:var(--r);filter:grayscale(1) contrast(1.15) brightness(1.05);mix-blend-mode:luminosity;z-index:0}
.about-col svg{position:relative;z-index:1}
/* with a photo, the logo moves to overlap the bottom corner and the photo shows through */
.about-col:has(img) svg{position:absolute;width:58%;right:-10%;bottom:-12%;color:#fff;filter:drop-shadow(0 10px 24px rgba(0,0,0,.45))}
.about-tag{position:absolute;z-index:2;left:-12px;top:18px;rotate:-4deg;background:var(--pop);color:var(--on-pop);font:800 15px/1 var(--display);padding:10px 14px;border-radius:10px;box-shadow:0 12px 24px -12px rgba(0,0,0,.5)}
@media(max-width:820px){.about-col{rotate:-1.5deg;margin:0 6px}.about-tag{left:-4px}}
.about-side{padding-right:16px}
.about-col:has(img) svg{right:-6%}