/* Goudplevier — subscription site (Designjoy-style) */
:root {
  --bg: #ECE6E8; --bg-2: #F4F0F1; --white: #FFFFFF; --black: #0B0B0B; --ink: #111111; --grey: #6A665F; --grey-2: #B5AFB1; --line: rgba(0,0,0,0.12);
  --orange: #FF5A00; --yellow: #FFDB01; --blue: #0000FE; --pink: #FF0084; --gold: #F2C230; --green: #00E36E;
  --sans: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif; --serif: "Instrument Serif", Georgia, serif;
  --r: 24px; --r-sm: 14px;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
@media (min-width: 900px) { html { font-size: 17px; } }
body { margin: 0; }
h1, h2, h3, h4 { font-family: var(--sans); font-weight: 600; letter-spacing: -0.04em; line-height: 1.02; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(3rem, 7vw, 5.6rem); }
h2 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
h3 { font-size: 1.35rem; letter-spacing: -0.01em; }
h4 { font-size: 1rem; letter-spacing: -0.01em; }
em, .it { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; }
h1 em, h2 em { font-size: 1.06em; }
p { margin: 0 0 1em; max-width: 60ch; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
img { max-width: 100%; height: auto; display: block; }
.muted { color: var(--grey); }
.small { font-size: 0.9rem; }
.kicker { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); text-align: center; margin: 0 0 1.4rem; }
.center { text-align: center; }
.center p { margin-left: auto; margin-right: auto; }

/* Page frame with faint side rules, like the reference */
.frame { max-width: 1160px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 40px); position: relative; }
.frame::before, .frame::after { content: ""; position: fixed; top: 0; bottom: 0; width: 1px; background: var(--line); opacity: 0.6; pointer-events: none; }
.frame::before { left: max(0px, calc(50% - 580px)); } .frame::after { right: max(0px, calc(50% - 580px)); }
section { padding: clamp(48px, 7vw, 96px) 0; }
.skip { position: absolute; left: 16px; top: -60px; background: var(--black); color: #fff; padding: 8px 12px; text-decoration: none; }
.skip:focus { top: 8px; z-index: 30; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 0.95rem; padding: 12px 20px; border-radius: 12px; min-height: 44px; text-decoration: none; line-height: 1.2; cursor: pointer; border: 1px solid var(--line); background: var(--white); color: var(--ink); transition: transform 0.12s ease, background 0.12s ease; }
.btn.black { background: var(--black); color: #fff; border-color: var(--black); }
.btn.white { background: #fff; color: var(--ink); border-color: #fff; }
.btn.lg { font-size: 1.05rem; padding: 16px 26px; border-radius: 14px; min-height: 54px; }
.btn.pill { border-radius: 999px; }
.btn .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--yellow); display: inline-block; }
.btn .ic { width: 34px; height: 34px; border-radius: 10px; background: var(--orange); display: inline-grid; place-items: center; color: #fff; font-weight: 800; margin: -6px 4px -6px -8px; }

/* Header */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0 10px; flex-wrap: wrap; }
.wordmark { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 1.15rem; letter-spacing: -0.03em; text-decoration: none; color: var(--ink); }
.wordmark .mark-svg { display: block; width: 30px; height: auto; margin-top: 1px; }
.top .actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }

/* Hero */
.hero { padding-top: clamp(24px, 4vw, 56px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 32px; align-items: center; }
.hero h1 { max-width: 12ch; }
.hero .sub { color: var(--grey); font-size: 1.05rem; margin-top: 1.4rem; max-width: 46ch; }
.join { border-radius: var(--r); padding: 28px; color: #fff; position: relative; overflow: hidden; min-height: 420px; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; }
.join h3 { color: #fff; font-size: clamp(2rem, 3.6vw, 2.8rem); letter-spacing: -0.04em; }
.join .tag { align-self: flex-start; margin-bottom: auto; }
.join p { color: rgba(255,255,255,0.92); }
.join .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 2px; }
.join .row b { display: block; }
.join .row span { color: rgba(255,255,255,0.75); font-size: 0.85rem; }
.join .arrow { width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; text-decoration: none; font-weight: 700; flex: 0 0 auto; }
.mesh-a { background: radial-gradient(60% 50% at 80% 10%, #FF0084 0%, transparent 60%), radial-gradient(70% 60% at 10% 30%, #FF5A00 0%, transparent 60%), radial-gradient(90% 90% at 60% 100%, #0000FE 0%, #2A1BFF 60%); }
.mesh-b { background: radial-gradient(70% 60% at 20% 20%, #FFDB01 0%, transparent 60%), radial-gradient(70% 70% at 90% 30%, #FF5A00 0%, transparent 60%), radial-gradient(80% 80% at 60% 100%, #FF0084 0%, #B30062 70%); }
.mesh-c { background: radial-gradient(70% 60% at 20% 10%, #00E36E 0%, transparent 55%), radial-gradient(70% 70% at 80% 20%, #0000FE 0%, transparent 60%), radial-gradient(80% 80% at 60% 100%, #7A00FF 0%, #0B0B0B 80%); }
.mesh-d { background: radial-gradient(70% 60% at 30% 0%, #FFDB01 0%, transparent 55%), radial-gradient(70% 70% at 100% 40%, #FF5A00 0%, transparent 60%), radial-gradient(80% 80% at 50% 100%, #FF0084 0%, #FF5A00 60%); }
.mesh-e { background: radial-gradient(70% 60% at 10% 10%, #0000FE 0%, transparent 55%), radial-gradient(70% 70% at 90% 20%, #FF0084 0%, transparent 60%), radial-gradient(90% 90% at 50% 100%, #00E36E 0%, #0000FE 70%); }
.mesh-f { background: radial-gradient(70% 60% at 20% 20%, #FF5A00 0%, transparent 55%), radial-gradient(70% 70% at 100% 0%, #FFDB01 0%, transparent 60%), radial-gradient(90% 90% at 40% 100%, #0000FE 0%, #FF0084 70%); }

/* Membership sticker card */
.member { width: 100%; aspect-ratio: 1.6; border-radius: 18px; background: #0B0B0B; color: #fff; padding: 18px; position: relative; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6); }
/* Emblematic membership card */
.member.emblem { background: radial-gradient(120% 90% at 100% 0%, #202020 0%, #0B0B0B 55%); }
.member .edge { position: absolute; inset: 8px; border: 1px solid rgba(228,179,60,0.45); border-radius: 12px; pointer-events: none; }
.member .map { position: absolute; inset: 0 0 10% 0; }
.member .map svg { width: 100%; height: 100%; display: block; }
.member .map .sea { fill: transparent; } .member .map .graticule path { stroke: rgba(255,255,255,0.06); } .member .map .land path { fill: #1A1A1A; stroke: rgba(255,255,255,0.10); }
.member .map .route { stroke-width: 4; animation: none; stroke-dashoffset: 0; } .member .map .stop { animation: none; opacity: 1; } .member .map .stop circle { r: 6; } .member .map .stop text { font-size: 26px; stroke: #0B0B0B; }
.member .brand, .member .chip, .member .club { position: absolute; z-index: 1; }
.member .brand { left: 18px; top: 16px; }
.member .club b { display: block; font-weight: 600; letter-spacing: 0.16em; color: #fff; font-size: 0.7rem; margin-bottom: 4px; }
.member .club span { display: block; font-size: 0.55rem; letter-spacing: 0.12em; color: rgba(255,255,255,0.55); }
.member .brand { position: relative; font-weight: 700; letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px; }
.member .brand .mark-svg { width: 22px; height: auto; display: block; }
.member .club { position: absolute; left: 18px; bottom: 12px; font-family: ui-monospace, Menlo, monospace; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
.member .chip { position: absolute; right: 18px; top: 18px; width: 38px; height: 28px; border-radius: 6px; background: linear-gradient(135deg, #FFE38A, #D6A52A); }
.member .brand { color: #fff; }
.member.tilt { transform: rotate(-6deg) translate(-8%, -18%); }
.route-map .sea { fill: #0B0B0B; } .route-map .graticule path { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 0.8; } .route-map .land path { fill: #1C1C1E; stroke: rgba(255,255,255,0.12); stroke-width: 1; }
.route-map .route { fill: none; stroke: var(--gold); stroke-width: 6; stroke-linecap: round; } .route-map .stop circle { fill: var(--gold); stroke: #0B0B0B; stroke-width: 4; } .route-map .stop text { font-family: var(--sans); font-weight: 600; font-size: 24px; fill: #fff; paint-order: stroke; stroke: #0B0B0B; stroke-width: 6px; stroke-linejoin: round; }

/* Three step cards */
.steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: clamp(28px, 4vw, 48px); }
.step { border-radius: var(--r); padding: 24px; color: #fff; min-height: 420px; display: flex; flex-direction: column; justify-content: flex-end; position: relative; overflow: hidden; }
.step .art { position: absolute; inset: 24px 24px 120px; display: grid; place-items: center; }
.step h3 { color: #fff; margin-bottom: 8px; }
.step p { color: rgba(255,255,255,0.9); font-size: 0.95rem; }
.mini-price { background: #0B0B0B; color: #fff; border-radius: 14px; padding: 16px; width: min(100%, 300px); transform: rotate(-4deg); box-shadow: 0 30px 50px -20px rgba(0,0,0,0.6); font-size: 0.8rem; }
.mini-price b { font-size: 1.9rem; display: block; letter-spacing: -0.04em; }
.mini-price ul { list-style: none; padding: 0; margin: 10px 0 0; columns: 2; font-size: 0.7rem; color: rgba(255,255,255,0.8); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chips span { background: rgba(255,255,255,0.92); color: var(--ink); border-radius: 999px; padding: 7px 12px; font-size: 0.85rem; font-weight: 500; white-space: nowrap; }
.step .chips { transform: rotate(-3deg) scale(1.08); }
.doc-stack { position: relative; width: 240px; height: 200px; }
.doc-stack div { position: absolute; width: 180px; height: 130px; border-radius: 12px; background: #fff; box-shadow: 0 20px 40px -20px rgba(0,0,0,0.5); padding: 12px; font-size: 0.65rem; color: var(--ink); overflow: hidden; }
.doc-stack div b { display: block; font-size: 0.75rem; margin-bottom: 4px; }
.doc-stack div i { display: block; height: 6px; background: #E6E1E3; border-radius: 3px; margin-top: 6px; }
.doc-stack .d1 { left: 0; top: 40px; transform: rotate(-8deg); } .doc-stack .d2 { left: 40px; top: 20px; transform: rotate(2deg); } .doc-stack .d3 { left: 70px; top: 0; transform: rotate(9deg); background: #FFF9E0; }

/* Logos */
.logos { display: flex; justify-content: center; align-items: center; gap: 24px 48px; flex-wrap: wrap; padding: 8px 0; }
.logos span { font-weight: 700; font-size: 1.25rem; letter-spacing: -0.03em; color: var(--ink); }

/* Dashed note */
.note { max-width: 680px; margin: 0 auto; border: 1px dashed var(--grey-2); border-radius: var(--r); padding: 40px 36px; text-align: center; color: var(--grey); font-size: 1.05rem; }
.note a { color: var(--ink); }

/* Benefits carousel */
.benefits { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; margin-top: clamp(28px, 4vw, 48px); }
.benefits::-webkit-scrollbar { display: none; }
.benefit { scroll-snap-align: start; }
.benefit .tile { aspect-ratio: 1; border-radius: var(--r); display: grid; place-items: center; color: #fff; font-size: 3rem; }
.benefit h4 { margin: 14px 0 6px; font-size: 1.15rem; }
.benefit p { color: var(--grey); font-size: 0.85rem; }
.carousel-nav { display: flex; gap: 12px; margin-top: 16px; }
.carousel-nav button { width: 48px; height: 48px; border-radius: 50%; border: 0; background: #fff; font-size: 1.2rem; cursor: pointer; }

/* Quotes */
.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: start; text-align: center; }
.quotes blockquote { margin: 0; font-family: var(--serif); font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.05; letter-spacing: -0.03em; }
.quotes .who { margin-top: 18px; display: inline-flex; align-items: center; gap: 12px; font-weight: 600; }
.quotes .who i { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--orange)); display: inline-block; }
.quotes .who span { display: block; font-weight: 400; color: var(--grey); font-size: 0.85rem; }

/* Two feature cards: recent work + scope */
.two { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 24px; }
.panel { background: #fff; border-radius: var(--r); padding: 28px; position: relative; overflow: hidden; }
.panel h3 { font-size: 1.4rem; margin-bottom: 6px; }
.panel .muted { font-size: 1.05rem; }
.work-art { position: relative; height: 300px; margin: -28px -28px 20px; overflow: hidden; }
.work-art img { position: absolute; border-radius: 12px; box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6); }
.work-art .w1 { width: 62%; left: -3%; top: 8%; transform: rotate(-9deg); }
.work-art .w2 { width: 32%; right: 6%; top: -4%; transform: rotate(7deg); }
.badges { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 22px; }
.badge { border: 1px solid var(--line); border-radius: 14px; padding: 14px; font-size: 0.85rem; }
.badge b { display: block; font-size: 0.95rem; margin: 4px 0 2px; }
.badge .muted { font-size: 0.75rem; }
.badge > .muted:first-child { font-weight: 600; letter-spacing: 0.02em; }
.scope { text-align: center; padding-top: 110px; }
.scope .blob { position: absolute; width: 140px; height: 140px; border-radius: 50%; }
.scope .b1 { left: -50px; top: 20px; background: var(--pink); } .scope .b2 { right: -60px; top: 200px; background: var(--blue); }
.scope .chips { position: relative; margin: 0 auto 26px; max-width: 460px; }
.scope .chips span { border: 1px solid var(--line); background: #fff; }

/* Pricing */
.pricing-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.1fr) minmax(0, 1.1fr); gap: 20px; margin-top: clamp(28px, 4vw, 48px); align-items: stretch; }
.join-card { background: #fff; border-radius: var(--r); padding: 28px; display: flex; flex-direction: column; justify-content: flex-end; min-height: 520px; position: relative; overflow: visible; }
.join-card .member { position: absolute; left: -12%; top: 6%; width: 118%; aspect-ratio: 1.6; }
.join-card h3 { font-size: clamp(2rem, 3.4vw, 2.6rem); letter-spacing: -0.04em; margin-top: 12px; }
.plan { background: #0B0B0B; color: #fff; border-radius: var(--r); padding: 28px; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.plan.pro { background: #0000FE; }
.plan .head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.plan .head h3 { color: #fff; font-size: 1.6rem; }
.plan .head .pill { font-family: ui-monospace, Menlo, monospace; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid rgba(255,255,255,0.35); border-radius: 6px; padding: 6px 8px; color: rgba(255,255,255,0.85); }
.plan hr { border: 0; border-top: 1px dashed rgba(255,255,255,0.3); margin: 18px 0; }
.plan .offer { display: inline-block; background: rgba(255,0,132,0.18); color: #FF8AC4; border-radius: 8px; padding: 6px 10px; font-size: 0.8rem; font-weight: 600; }
.plan.pro .offer { background: rgba(255,255,255,0.14); color: #fff; }
.plan .price { font-size: clamp(2.6rem, 4.6vw, 3.6rem); font-weight: 600; letter-spacing: -0.05em; margin-top: 10px; line-height: 1; }
.plan .price small { font-size: 0.95rem; font-weight: 500; letter-spacing: 0; color: rgba(255,255,255,0.7); }
.plan .price s { font-size: 1.6rem; color: rgba(255,255,255,0.4); font-weight: 500; margin-left: 8px; }
.plan .included { background: rgba(255,255,255,0.08); border-radius: 14px; padding: 18px; margin-top: 22px; position: relative; }
.plan .included .lab { position: absolute; top: -10px; left: 16px; font-family: ui-monospace, Menlo, monospace; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; background: #1B1B1B; border: 1px solid rgba(255,255,255,0.15); padding: 3px 8px; border-radius: 6px; color: rgba(255,255,255,0.8); }
.plan.pro .included .lab { background: #1215C8; }
.plan .included ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; font-size: 0.88rem; }
.plan .included li { padding: 2px 0; display: flex; gap: 8px; align-items: flex-start; }
.plan .included li::before { content: "✓"; color: var(--gold); font-weight: 700; flex: 0 0 auto; }
.plan-foot { margin-top: auto; padding-top: 24px; display: flex; align-items: center; gap: 18px; position: relative; z-index: 1; }
.plan .ball { position: absolute; right: -90px; bottom: -110px; width: 200px; height: 200px; border-radius: 50%; background: var(--yellow); z-index: 0; }
.plan.pro .ball { background: var(--pink); }
.plan .ball::after { content: ""; position: absolute; left: 60px; top: 62px; width: 60px; height: 30px; border: 6px solid #0B0B0B; border-top: 0; border-radius: 0 0 40px 40px; }
.perks { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.perk { border: 1px dashed var(--grey-2); border-radius: var(--r); padding: 26px 28px; }
.perk h4 { font-size: 1.15rem; display: flex; align-items: center; gap: 10px; }
.perk h4 i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ink); display: inline-grid; place-items: center; font-size: 0.7rem; font-style: normal; }
.perk p { color: var(--grey); font-size: 0.9rem; margin-top: 8px; }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 40px; align-items: start; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; font-weight: 500; font-size: 1.05rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "⌄"; font-size: 1.2rem; color: var(--ink); transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq .a { padding: 0 0 16px; color: var(--grey); max-width: 58ch; }
.call-card { border-radius: var(--r); padding: 28px; color: #fff; position: sticky; top: 24px; min-height: 400px; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; }
.call-card h3 { color: #fff; font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -0.04em; }
.call-card .face { width: 110px; height: 110px; border-radius: 50%; background: #0B0B0B; margin-bottom: auto; display: grid; place-items: center; }
.call-card .face i { width: 70px; height: 70px; border-radius: 50%; background: var(--yellow); position: relative; }
.call-card .face i::after { content: ""; position: absolute; left: 18px; top: 34px; width: 34px; height: 18px; border: 5px solid #0B0B0B; border-top: 0; border-radius: 0 0 30px 30px; }
.call-card .face i::before { content: ""; position: absolute; left: 18px; top: 22px; width: 8px; height: 8px; border-radius: 50%; background: #0B0B0B; box-shadow: 26px 0 0 #0B0B0B; }

/* Footer */
.foot { background: #0B0B0B; color: #fff; margin-top: clamp(48px, 7vw, 96px); padding: 56px 0 28px; }
.foot .grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 40px; align-items: start; }
.foot h2 { color: #fff; font-size: clamp(2.4rem, 4.6vw, 3.8rem); }
.foot .muted { color: rgba(255,255,255,0.6); }
.cal { background: #141414; border-radius: 18px; padding: 18px; }
.cal .head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; }
.cal .head span { color: rgba(255,255,255,0.5); font-weight: 400; margin-left: 6px; }
.cal .days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 14px; font-size: 0.65rem; letter-spacing: 0.1em; color: rgba(255,255,255,0.5); text-align: center; }
.cal .cells { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 8px; }
.cal .cells a, .cal .cells i { aspect-ratio: 1.3; border-radius: 8px; background: #2A2A2A; display: block; text-decoration: none; }
.cal .cells a { background: #3A3A3A; color: #fff; font-size: 0.75rem; display: grid; place-items: center; }
.cluster { position: relative; height: 240px; margin-top: 30px; }
.cluster i { position: absolute; border-radius: 50%; }
.cluster i::after { content: ""; position: absolute; left: 30%; top: 45%; width: 40%; height: 22%; border: 5px solid #0B0B0B; border-top: 0; border-radius: 0 0 60px 60px; }
.cluster i::before { content: ""; position: absolute; left: 30%; top: 30%; width: 10%; height: 10%; border-radius: 50%; background: #0B0B0B; box-shadow: 250% 0 0 #0B0B0B; }
.foot .legal { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 30px; font-size: 0.85rem; color: rgba(255,255,255,0.6); }
.foot .legal a { color: rgba(255,255,255,0.6); }

/* Inner pages */
.page-head { padding: clamp(40px, 6vw, 80px) 0 20px; }
.page-head h1 { font-size: clamp(2.6rem, 6vw, 4.8rem); }
.prose { max-width: 70ch; color: var(--ink); }
.prose h2 { font-size: 1.6rem; margin: 2rem 0 0.6rem; }
.prose h3 { margin: 1.4rem 0 0.4rem; }
.cardgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.card { background: #fff; border-radius: var(--r); padding: 26px; }
.card p { color: var(--grey); }
.card > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; border-radius: 14px; margin-bottom: 16px; background: var(--bg); }
.card h3 { margin-bottom: 6px; }
.hp { background: #0B0E15; color: #EAF1FF; border-radius: var(--r); padding: clamp(24px, 4vw, 48px); }
.hp h2 { color: #fff; font-weight: 800; letter-spacing: -0.05em; }
.hp h2 span { color: #FF2E9E; }
.hp .kicker2 { color: #98A4C0; margin-bottom: 12px; } .hp .kicker2 span { color: #FF2E9E; }
.hp .grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 32px; align-items: center; }
.hp .phone { width: min(100%, 300px); border-radius: 22px; overflow: hidden; border: 1px solid #262c3a; justify-self: center; margin: 0; }
.hp .wide { margin: 32px 0 0; border-radius: 14px; overflow: hidden; border: 1px solid #262c3a; }
.hp p { color: #EAF1FF; }
.hp .btn.volt { background: #FF2E9E; border-color: #FF2E9E; color: #0B0E15; }

@media (max-width: 960px) {
  .hero, .two, .quotes, .faq-grid, .foot .grid, .cardgrid, .hp .grid { grid-template-columns: 1fr; }
  .steps3 { grid-template-columns: 1fr; } .step { min-height: 400px; } .step .art { inset: 20px 20px 130px; } .step .chips { transform: rotate(-3deg) scale(0.92); }
  .pricing-grid { grid-template-columns: 1fr; } .join-card { min-height: 380px; }
  .call-card { position: static; }
  .frame::before, .frame::after { display: none; }
}
@media (max-width: 640px) {
  .perks { grid-template-columns: 1fr; } .plan .included ul { grid-template-columns: 1fr; } .badges { grid-template-columns: 1fr; }
  .top .actions .btn:not(.black):not([data-login]) { display: none; }
}

/* Sample deliverable artefacts (deliverables.py), v7 tokens */
.doc-sub { font-weight: 600; font-size: 0.78rem; color: var(--grey); margin: 0 0 8px; }
.card h5, .doc h5 { font-weight: 600; font-size: 1.05rem; margin: 0 0 0.5rem; line-height: 1.25; letter-spacing: -0.02em; }
.card h6, .doc h6 { font-weight: 600; font-size: 0.8rem; margin: 0 0 0.4rem; color: var(--blue); }
.card .tbl, .doc .tbl { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-top: 12px; }
.tbl th { text-align: left; font-weight: 600; color: var(--grey); padding: 8px 10px; border-bottom: 2px solid var(--line); font-size: 0.78rem; }
.tbl td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink); }
.tbl.checks td.ok { color: var(--blue); font-weight: 700; }
.quad { width: 100%; height: auto; }
.quad .q-bg { fill: var(--bg); } .quad .q-line { stroke: var(--grey-2); stroke-width: 1.5; stroke-dasharray: 4 4; }
.quad .q-label, .quad .q-axis { font-family: var(--sans); font-size: 12px; fill: var(--grey); font-weight: 600; }
.quad .q-dot circle { fill: var(--gold); stroke: #fff; stroke-width: 2; } .quad .q-dot.muted circle { fill: var(--grey-2); }
.quad .q-dot text { font-family: var(--sans); font-size: 12px; font-weight: 600; fill: var(--ink); }
.flow { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; max-width: none; }
.flow li { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 0.82rem; margin: 0; color: var(--ink); }
.flow li.auto { background: var(--gold); border-color: var(--gold); font-weight: 600; color: #0B0B0B; }
.measure { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.measure div { background: var(--bg); border-radius: 12px; padding: 12px; font-size: 0.82rem; color: var(--ink); } .measure b { display: block; margin-bottom: 4px; }
.ticket { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; color: var(--ink); }
.ticket-head { display: flex; gap: 12px; padding: 8px 14px; background: var(--bg); font-size: 0.78rem; font-weight: 600; color: var(--grey); } .ticket-head span:first-child { color: var(--blue); }
.ticket h5, .ticket p, .ticket h6, .ticket ol { padding-left: 14px; padding-right: 14px; } .ticket h5 { margin-top: 12px; } .ticket p { color: var(--ink); max-width: none; }
.ac { padding-left: 2.2em !important; } .ac li { margin-bottom: 0.5em; } .ac em { font-family: var(--sans); font-style: normal; font-weight: 600; color: var(--blue); }
.ticket-foot { font-size: 0.78rem; color: var(--grey) !important; background: var(--bg); padding: 10px 14px !important; margin: 12px 0 0; }
.swim { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 12px; }
.swim .lane rect { fill: #fff; } .swim .lane.alt rect { fill: var(--bg); }
.swim .lane text { font-family: var(--sans); font-weight: 600; font-size: 12px; fill: var(--grey); }
.swim .step rect { fill: #fff; stroke: var(--ink); stroke-width: 1.5; } .swim .step.auto rect { fill: var(--gold); stroke: var(--gold); }
.swim .step text { font-family: var(--sans); font-size: 11.5px; font-weight: 600; fill: var(--ink); text-anchor: middle; }
.swim .gate polygon { fill: #fff; stroke: var(--blue); stroke-width: 1.5; } .swim .gate text { font-family: var(--sans); font-size: 11px; font-weight: 600; fill: var(--blue); text-anchor: middle; }
.swim .arrow path { fill: none; stroke: var(--grey); stroke-width: 1.5; } .swim .yes { font-family: var(--sans); font-size: 10px; fill: var(--grey); }
.scope-grid, .scope { } .card .scope { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; text-align: left; padding-top: 0; }
.card .scope div { background: var(--bg); border-radius: 12px; padding: 12px; font-size: 0.82rem; color: var(--ink); } .card .scope ul { padding-left: 1.1em; margin: 0; }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kpi { background: var(--bg); border-radius: 12px; padding: 12px; color: var(--ink); } .kpi dl { margin: 0; font-size: 0.82rem; } .kpi dt { font-weight: 600; color: var(--grey); font-size: 0.72rem; margin-top: 6px; } .kpi dd { margin: 0; }
.dq { margin-top: 14px; }
@media (max-width: 640px) { .measure, .card .scope, .kpis { grid-template-columns: 1fr; } }

/* Single projects */
.products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: clamp(28px, 4vw, 44px); }
.product { background: #fff; border-radius: 18px; padding: 22px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: start; }
.product b { font-size: 1.05rem; letter-spacing: -0.02em; }
.product .pp { font-weight: 700; font-size: 1.05rem; text-align: right; white-space: nowrap; padding-top: 2px; }
.product .pl { grid-column: 1 / -1; font-size: 0.8rem; color: var(--grey); }
.product p { grid-column: 1 / -1; font-size: 0.88rem; color: var(--grey); margin-top: 8px; }
@media (max-width: 960px) { .products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .products { grid-template-columns: 1fr; } }

.who { grid-template-columns: 1fr 1fr; }
.who .panel, .labs .panel { min-height: 300px; }
.products.sprints { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .who, .labs { grid-template-columns: 1fr; } .products.sprints { grid-template-columns: 1fr; } }

.perk p { margin-left: 0; max-width: none; }

.pricing-grid.two-col { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }

.product .tag { grid-column: 1 / -1; font-family: ui-monospace, Menlo, monospace; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); margin-bottom: 4px; }
.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .pricing-grid.two-col, .products { grid-template-columns: 1fr; } }

/* Plovers */
.bird { display: block; overflow: visible; animation: bob 3.8s ease-in-out infinite; animation-delay: var(--d, 0s); transform-origin: 50% 92%; }
.bird.still { animation: none; }
.bird .bird-eye { transform-box: fill-box; transform-origin: 50% 55%; animation: blink 5.5s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
@media (prefers-reduced-motion: reduce) { .bird, .bird .bird-eye { animation: none; } }
.flock { position: relative; height: 150px; width: 480px; max-width: 100%; margin-top: 36px; }
.flock .perch { position: absolute; display: block; transform-origin: 50% 100%; }
.flock .perch .bird { display: block; }
.call-card .face { width: 120px; height: 120px; border-radius: 50%; background: #0B0B0B; margin-bottom: auto; display: grid; place-items: center; }
.call-card .face i { display: none; }
.plan .peek { position: absolute; right: -6px; bottom: -40px; width: 200px; pointer-events: none; z-index: 0; }
.plan .peek .bird { transform-origin: 50% 100%; }
.plan .ball { display: none; }
.foot { overflow: hidden; }
@media (max-width: 640px) { .flock { height: 90px; transform: scale(0.7); transform-origin: left top; width: 480px; max-width: none; } .foot .grid > div:first-child { overflow: hidden; } .foot h2 { font-size: 2.2rem; } }

@media (max-width: 640px) { .plan .peek { width: 110px; right: -6px; bottom: -22px; } .plan-foot { padding-right: 96px; flex-wrap: wrap; } }

/* Birds: hop on hover, pupils follow the cursor (site.js) */
.bird .hop { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); transform-origin: 50% 100%; }
.bird .pupil { transition: transform 0.12s ease-out; }

@media (prefers-reduced-motion: reduce) { .bird .hop, .bird .pupil { transition: none; } .bird:hover .hop { transform: none; } }

/* Idle personality: nod, wag, double blink, occasional hop. Staggered by --d. */
.bird .head { transform-box: fill-box; transform-origin: 50% 70%; animation: nod 7s ease-in-out infinite; animation-delay: calc(var(--d, 0s) + 1.3s); }
.bird .tail { transform-box: fill-box; transform-origin: 100% 50%; animation: wag 5.5s ease-in-out infinite; animation-delay: calc(var(--d, 0s) + 2.1s); }
.bird .idle { transform-box: fill-box; transform-origin: 50% 100%; animation: idle-hop 9s cubic-bezier(0.34, 1.4, 0.64, 1) infinite; animation-delay: calc(var(--d, 0s) + 3.4s); }
.bird.front .idle { animation-name: idle-hop-squash; }
.bird .bird-eye { animation-name: blink2; animation-duration: 6.5s; }
@keyframes nod { 0%, 80%, 100% { transform: rotate(0deg); } 84% { transform: rotate(-9deg); } 88% { transform: rotate(6deg); } 92% { transform: rotate(-3deg); } }
@keyframes wag { 0%, 70%, 100% { transform: rotate(0deg); } 74% { transform: rotate(16deg); } 78% { transform: rotate(-12deg); } 82% { transform: rotate(9deg); } 86% { transform: rotate(0deg); } }
@keyframes idle-hop { 0%, 86%, 100% { transform: translateY(0) rotate(0deg); } 89% { transform: translateY(-10px) rotate(-4deg); } 93% { transform: translateY(0) rotate(0deg); } 95% { transform: translateY(-3px); } 97% { transform: translateY(0); } }
@keyframes idle-hop-squash { 0%, 86%, 100% { transform: translateY(0) scale(1, 1); } 88% { transform: translateY(2px) scale(1.06, 0.92); } 91% { transform: translateY(-12px) scale(0.96, 1.06); } 94% { transform: translateY(0) scale(1.08, 0.9); } 97% { transform: translateY(0) scale(1, 1); } }
@keyframes blink2 { 0%, 88%, 100% { transform: scaleY(1); } 90% { transform: scaleY(0.08); } 92% { transform: scaleY(1); } 94% { transform: scaleY(0.08); } 96% { transform: scaleY(1); } }
/* The logo: same personality, smaller, and a hop when you hover the wordmark */
.wordmark .hop, .member .hop { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); transform-box: fill-box; transform-origin: 50% 100%; }
.mark-svg .idle { animation-duration: 11s; }
@media (prefers-reduced-motion: reduce) { .bird .head, .bird .tail, .bird .idle, .bird .bird-eye { animation: none; } .wordmark:hover .hop { transform: none; } }

/* Mascot on any background: a light sticker halo behind bill and legs, only on dark surfaces */
.bird { --halo: transparent; }
.on-dark .bird, .bird.on-dark { --halo: #ECE6E8; }


/* Inner-page next step */
.next-step { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.next-step .actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }
.shots-even img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 24px; }

.phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.phones figure { margin: 0; background: #fff; border-radius: 24px; padding: 18px 18px 14px; }
.phones img { width: 100%; aspect-ratio: 9 / 15; object-fit: cover; object-position: top; border-radius: 16px; border: 1px solid var(--line); }
.phones figcaption { font-size: 0.85rem; color: var(--grey); margin-top: 10px; }
.work-art .w2 { aspect-ratio: 9 / 11; object-fit: cover; object-position: top; }
@media (max-width: 960px) { .phones { grid-template-columns: 1fr; } }

/* Showcase boards */
.board { margin: 0; }
.board img { width: 100%; height: auto; border-radius: 24px; display: block; }
.board figcaption { font-size: 0.9rem; color: var(--grey); margin-top: 10px; }
.board-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.board-link { text-decoration: none; color: inherit; display: block; }
.story { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.1fr); gap: 24px 32px; align-items: start; padding: 28px 0; border-top: 1px solid rgba(0,0,0,0.08); }
.story:first-child { border-top: 0; padding-top: 0; }
.story-text h3 { font-size: 1.5rem; letter-spacing: -0.03em; margin-bottom: 8px; }
.story-text p { max-width: 36ch; }
.facts-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 22px 0 6px; font-size: 0.9rem; }
.facts-row b { display: block; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); margin-bottom: 4px; }
.work-board { margin: -28px -28px 20px; overflow: hidden; }
.work-board img { width: 100%; height: auto; display: block; }
@media (max-width: 960px) { .board-row, .story { grid-template-columns: 1fr; } .facts-row { grid-template-columns: 1fr 1fr; } }
/* v5: light, bright, playful, finished. Our colour family, our accent serif, our birds. */
:root{ --bg:#EFE8DA; --ink:#0B0B0B; --gold:#F2C230; --gold-deep:#B8860B; --grey:#6A665F;
  --ocean: linear-gradient(115deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 30%, rgba(255,255,255,0) 48%), radial-gradient(60% 55% at 85% 12%, #35F0A8 0%, transparent 60%), radial-gradient(70% 60% at 10% 30%, #1E2BFF 0%, transparent 62%), radial-gradient(90% 90% at 60% 100%, #00A896 0%, #0B3FC9 65%);
  --honey: linear-gradient(115deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 30%, rgba(255,255,255,0) 48%), radial-gradient(70% 60% at 20% 15%, #FFE68A 0%, transparent 60%), radial-gradient(70% 70% at 90% 30%, #FF7A1F 0%, transparent 55%), radial-gradient(80% 80% at 60% 100%, #F2B000 0%, #D9800A 70%);
  --mint: linear-gradient(115deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 30%, rgba(255,255,255,0) 48%), radial-gradient(70% 60% at 20% 10%, #B6FFDC 0%, transparent 55%), radial-gradient(70% 70% at 90% 20%, #00E36E 0%, transparent 60%), radial-gradient(80% 80% at 60% 100%, #00A896 0%, #0A5F8A 80%);
  --sunset: linear-gradient(115deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 30%, rgba(255,255,255,0) 48%), radial-gradient(70% 60% at 30% 0%, #FFD24D 0%, transparent 55%), radial-gradient(70% 70% at 100% 40%, #FF4A00 0%, transparent 60%), radial-gradient(80% 80% at 50% 100%, #FF7A2E 0%, #D42606 70%);
  --sky: linear-gradient(115deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 30%, rgba(255,255,255,0) 48%), radial-gradient(70% 60% at 10% 10%, #5CB6FF 0%, transparent 55%), radial-gradient(70% 70% at 90% 20%, #1E1EFF 0%, transparent 60%), radial-gradient(90% 90% at 50% 100%, #00D072 0%, #0B3FC9 70%);
}
html{ background:var(--bg); }
.frame::before,.frame::after{ display:none !important; content:none !important; }
/* accent: italic, but Fraunces rather than Instrument Serif */
em,.accent{ font-family:"Fraunces",Georgia,serif !important; font-style:italic; font-weight:400; font-variation-settings:"opsz" 144; letter-spacing:-.015em; }
h1 em,h2 em{ font-size:1.02em; }
/* kickers: sentence-case pills */
.kicker.pill-kicker{ font-family:"Plus Jakarta Sans",sans-serif; font-size:.85rem; letter-spacing:0; text-transform:none; font-weight:700; display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:999px; padding:6px 12px; margin-bottom:1.2rem; box-shadow:0 6px 16px -10px rgba(0,0,0,.25); }
.kicker.pill-kicker::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--gold); }
/* gradient cards: our family */
.mesh-a{ background:var(--ocean) !important; } .mesh-b{ background:var(--honey) !important; } .mesh-c{ background:var(--sky) !important; }
.mesh-d{ background:var(--sunset) !important; } .mesh-e{ background:var(--mint) !important; } .mesh-f{ background:var(--sky) !important; }
.join,.step,.call-card{ box-shadow:0 40px 80px -44px rgba(0,0,0,.5); }
.join .btn.tag{ background:#0B0B0B !important; color:#fff !important; border-color:#0B0B0B !important; box-shadow:0 10px 24px -12px rgba(0,0,0,.6); }
.join .btn.tag .dot{ background:var(--gold); box-shadow:0 0 0 3px rgba(242,194,48,.25); }
/* benefit tiles: gradients with birds */
.benefit .tile{ display:grid; place-items:end center; padding-bottom:0; overflow:hidden; }
.benefit .tile .bird{ display:block; transform:translateY(6px); }
.t-mint{ background:var(--mint); } .t-ocean{ background:var(--ocean); } .t-honey{ background:var(--honey); } .t-sky{ background:var(--sky); } .t-sunset{ background:var(--sunset); }
/* pricing chrome: sentence-case pills, gold */
.plan .head .pill,.plan .included .lab{ font-family:"Plus Jakarta Sans",sans-serif; font-size:.75rem; letter-spacing:0; text-transform:none; font-weight:700; border-color:rgba(242,194,48,.45); color:var(--gold); background:rgba(242,194,48,.12); }
.plan-foot a[data-book]{ font-family:"Plus Jakarta Sans",sans-serif !important; font-size:.9rem !important; letter-spacing:0 !important; text-transform:none !important; font-weight:700 !important; color:#fff !important; }
.perk h4 i{ border-color:var(--gold); background:var(--gold); }
/* call card + footer */
.call-card .row b,.call-card .row span{ color:#fff !important; } .call-card .row span{ opacity:.8; }
.bookcard{ background:#141414; border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:26px; display:grid; gap:12px; }
.bookcard h3{ color:#fff; font-size:1.6rem; letter-spacing:-.03em; }
.bookcard p{ color:rgba(255,255,255,.65); }
.bookcard .mail{ color:#fff; font-weight:600; }
.foot .flock{ margin-top:36px; }
/* buttons */
.btn{ box-shadow:0 1px 2px rgba(0,0,0,.05), 0 10px 24px -14px rgba(0,0,0,.35); }
.top .btn.black{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
/* scope blobs */
.scope .b1{ background:var(--gold); } .scope .b2{ background:#2B2BFF; }


/* ---- What you get: one bird, one object, one motion ---- */
.wyg{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px; margin-top:clamp(28px,4vw,44px); text-align:left; }
.wtile{ cursor:pointer; outline:none; }
.wtile .stage{ position:relative; aspect-ratio:1; border-radius:22px; overflow:hidden; box-shadow:0 26px 48px -28px rgba(0,0,0,.45), 0 12px 40px -18px var(--glow, rgba(0,0,0,.2)), inset 0 -18px 30px -24px rgba(0,0,0,.22); transition:transform .2s ease, box-shadow .2s ease; }
.wtile:focus-visible .stage{ box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--gold); }
/* blended tonal shades: a lighter highlight, the mid tone, a deeper shade */
.wtile.ocean .stage{ background:linear-gradient(115deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 30%, rgba(255,255,255,0) 48%), radial-gradient(70% 60% at 22% 8%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 60%), radial-gradient(70% 70% at 90% 90%, #00D9C0 0%, rgba(0,0,0,0) 60%), radial-gradient(60% 50% at 80% 20%, #6C8CFF 0%, rgba(0,0,0,0) 55%), linear-gradient(160deg,#3D6BFF 0%,#1E3BFF 50%,#0F22B8 100%); }
.wtile.honey .stage{ background:linear-gradient(115deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 30%, rgba(255,255,255,0) 48%), radial-gradient(70% 60% at 22% 8%, rgba(255,255,255,.3) 0%, rgba(255,255,255,0) 60%), radial-gradient(70% 70% at 90% 90%, #FF7A1F 0%, rgba(0,0,0,0) 60%), radial-gradient(60% 50% at 80% 20%, #FFE27A 0%, rgba(0,0,0,0) 55%), linear-gradient(160deg,#FFD23F 0%,#F2B000 50%,#D98A00 100%); }
.wtile.mint .stage{ background:linear-gradient(115deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 30%, rgba(255,255,255,0) 48%), radial-gradient(70% 60% at 22% 8%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 60%), radial-gradient(70% 70% at 90% 90%, #00B4E0 0%, rgba(0,0,0,0) 60%), radial-gradient(60% 50% at 80% 20%, #8CFFC8 0%, rgba(0,0,0,0) 55%), linear-gradient(160deg,#2EE58A 0%,#00C27A 50%,#008A73 100%); }
.wtile.midnight .stage{ background:linear-gradient(115deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 30%, rgba(255,255,255,0) 48%), radial-gradient(70% 60% at 22% 8%, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 60%), radial-gradient(70% 70% at 90% 90%, #6B4E0F 0%, rgba(0,0,0,0) 60%), radial-gradient(60% 50% at 80% 20%, #3A3A3A 0%, rgba(0,0,0,0) 55%), linear-gradient(160deg,#2A2A2A 0%,#141414 50%,#0B0B0B 100%); }
.wtile.sky .stage{ background:linear-gradient(115deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 30%, rgba(255,255,255,0) 48%), radial-gradient(70% 60% at 22% 8%, rgba(255,255,255,.26) 0%, rgba(255,255,255,0) 60%), radial-gradient(70% 70% at 90% 90%, #7A3BFF 0%, rgba(0,0,0,0) 60%), radial-gradient(60% 50% at 80% 20%, #9FD3FF 0%, rgba(0,0,0,0) 55%), linear-gradient(160deg,#4FA8FF 0%,#2B5BFF 50%,#1A1AE0 100%); }
.wtile.sunset .stage{ background:linear-gradient(115deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 30%, rgba(255,255,255,0) 48%), radial-gradient(70% 60% at 22% 8%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 60%), radial-gradient(70% 70% at 90% 90%, #FF2E9E 0%, rgba(0,0,0,0) 60%), radial-gradient(60% 50% at 80% 20%, #FFC27A 0%, rgba(0,0,0,0) 55%), linear-gradient(160deg,#FF9440 0%,#FF5A1F 50%,#D9300A 100%); }
.wtile h4{ font-size:1rem; margin:12px 2px 4px; letter-spacing:-.02em; color:var(--ink); } .wtile p{ margin:0 2px; font-size:.82rem; color:var(--grey); max-width:none; line-height:1.4; }
/* bird: bottom, with its own lean and position */
.stage .perch{ position:absolute; bottom:-4px; left:var(--x,50%); transform:translateX(-50%) rotate(var(--lean,0deg)); transform-origin:50% 100%; display:block; } .stage .perch .bird{ display:block; }
.stage .perch .acc{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
/* object: top right, still at rest */
.obj{ position:absolute; top:14px; right:14px; width:44px; height:44px; }
.obj.board{ width:58px; height:44px; background:rgba(255,255,255,.95); border-radius:9px; padding:7px 6px; display:grid; grid-template-columns:repeat(3,1fr); gap:4px; box-shadow:0 10px 20px -10px rgba(0,0,0,.45); }
.obj.board .colm{ background:#EEEAE1; border-radius:4px; padding:3px; display:grid; gap:3px; align-content:start; } .obj.board .colm i{ display:block; height:6px; border-radius:2px; background:#fff; border:1px solid #DDD6C8; }
.obj.board .colm i.new{ background:var(--gold); border-color:#C9962A; opacity:0; transform:translateY(-40px); }
.obj.coins{ width:48px; height:48px; top:12px; } .obj.coins .c{ position:absolute; left:2px; width:44px; height:44px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#FFF1B0,#F2C230 60%,#C48A0A); border:2.5px solid #B8860B; display:grid; place-items:center; font-weight:800; font-size:1rem; color:#6B4A00; box-shadow:0 6px 12px -6px rgba(0,0,0,.45); }
.obj.coins .c1{ top:8px; } .obj.coins .c2{ top:0; opacity:0; } .obj.coins .c3{ top:-8px; opacity:0; }
.obj.plane{ width:44px; height:34px; transform:rotate(-8deg); }
.obj.badge{ width:auto; height:auto; background:var(--gold); color:var(--ink); font-weight:800; font-size:.66rem; padding:5px 9px; border-radius:999px; box-shadow:0 10px 20px -10px rgba(0,0,0,.45); }
.obj.pausebtn{ border-radius:50%; background:#fff; box-shadow:0 10px 20px -10px rgba(0,0,0,.45); display:grid; place-items:center; }
.obj.pausebtn .bars{ display:flex; gap:5px; } .obj.pausebtn .bars i{ width:5px; height:15px; background:#0B0B0B; border-radius:2px; }
.obj.pausebtn .tri{ display:none; width:0; height:0; border-left:13px solid #0B0B0B; border-top:8px solid transparent; border-bottom:8px solid transparent; margin-left:4px; }
.wtile.asleep .obj.pausebtn .bars{ display:none; } .wtile.asleep .obj.pausebtn .tri{ display:block; }
.obj.key{ width:50px; height:22px; top:24px; transform:rotate(-20deg); }
.zzz{ position:absolute; left:60%; top:44px; font-family:"Fraunces",serif; font-style:italic; font-size:1.05rem; color:#fff; opacity:0; text-shadow:0 2px 6px rgba(0,0,0,.25); } .zzz span{ display:inline-block; }
/* performances */
.wtile.play .main .hop{ animation:hop .8s cubic-bezier(.34,1.56,.64,1) .6s 1; }
@keyframes hop{ 0%,100%{transform:translateY(0)} 45%{transform:translateY(-14px)} }
/* board: a new request slides down into the first column, the bird looks up */
.wtile.play .obj.board .colm i.new{ animation:slidein 1.2s cubic-bezier(.2,.8,.2,1) 1 forwards; }
@keyframes slidein{ 0%{opacity:0;transform:translateY(-40px)} 60%{opacity:1;transform:translateY(2px)} 100%{opacity:1;transform:translateY(0)} }
.wtile.play .obj.board{ animation:boardnudge 1.2s ease 1; } @keyframes boardnudge{ 0%,55%,100%{transform:translateY(0)} 65%{transform:translateY(2px)} }
/* coins: two more land on the stack, one after the other */
.wtile.play .obj.coins .c2{ animation:coinland 1s cubic-bezier(.2,.8,.2,1) .1s 1 forwards; }
.wtile.play .obj.coins .c3{ animation:coinland 1s cubic-bezier(.2,.8,.2,1) .55s 1 forwards; }
@keyframes coinland{ 0%{opacity:0;transform:translateY(-70px) scale(1.05)} 55%{opacity:1;transform:translateY(3px) scale(1)} 70%{transform:translateY(0)} 100%{opacity:1;transform:translateY(0)} }
.wtile.play .obj.plane{ animation:fly 3.2s cubic-bezier(.45,.05,.55,.95) 1; }
@keyframes fly{ 0%{right:14px;top:14px;transform:rotate(-8deg);opacity:1} 30%{top:70px;transform:rotate(-16deg)} 60%{top:90px;transform:rotate(-6deg)} 100%{right:120%;top:70px;transform:rotate(-4deg);opacity:0} }
.wtile.play .obj.badge{ animation:pop .7s cubic-bezier(.34,1.56,.64,1) 1; }
@keyframes pop{ 0%{transform:scale(.9) rotate(-8deg); opacity:0} 60%{transform:scale(1.15) rotate(2deg)} 100%{transform:scale(1)} }
.wtile.play .obj.key{ animation:dropkey 1.5s cubic-bezier(.2,.8,.2,1) 1; }
@keyframes dropkey{ 0%{transform:translateY(-80px) rotate(30deg);opacity:0} 40%{transform:translateY(4px) rotate(-20deg);opacity:1} 55%{transform:translateY(0) rotate(-20deg)} 100%{transform:translateY(0) rotate(-20deg)} }
.wtile.play .main .head{ animation:nod .9s ease-in-out 1 !important; }
.wtile.asleep .main .bird-eye{ animation:none; transform:scaleY(.06); transition:transform .3s ease; }
.wtile.asleep .zzz{ opacity:1; transition:opacity .3s ease; }
.wtile.asleep .zzz span{ animation:zfloat 2.6s ease-in-out infinite; } .wtile.asleep .zzz span:nth-child(2){ animation-delay:.7s; font-size:1.1em } .wtile.asleep .zzz span:nth-child(3){ animation-delay:1.4s; font-size:1.25em }
@keyframes zfloat{ 0%{transform:translate(0,0);opacity:0} 30%{opacity:1} 100%{transform:translate(12px,-30px);opacity:0} }
.product .tag.pill-tag{ font-family:"Plus Jakarta Sans",sans-serif; font-size:.72rem; letter-spacing:0; text-transform:none; font-weight:700; color:var(--ink); background:rgba(242,194,48,.25); padding:4px 9px; border-radius:999px; width:max-content; }
@media (max-width:1000px){ .wyg{ grid-template-columns:repeat(3,1fr); } } @media (max-width:560px){ .wyg{ grid-template-columns:1fr 1fr; gap:14px; } }
@media (prefers-reduced-motion:reduce){ .wtile.play *{ animation:none !important; } }

/* ---- Footer scheduler ---- */
#scheduler{ background:#141414; border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:20px; color:#fff; }
.sch-head{ display:flex; justify-content:space-between; align-items:center; font-size:1.05rem; } .sch-head span{ color:rgba(255,255,255,.5); }
.sch-nav button{ width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.15); background:#1d1d1d; color:#fff; font-size:1.1rem; cursor:pointer; margin-left:6px; }
.sch-nav button:disabled{ opacity:.3; cursor:default; }
.sch-dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-top:14px; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.5); text-align:center; }
.sch-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-top:8px; }
.sch-grid button,.sch-grid i{ aspect-ratio:1.25; border-radius:9px; display:grid; place-items:center; font-size:.8rem; font-family:inherit; }
.sch-grid i{ background:#1a1a1a; color:rgba(255,255,255,.22); font-style:normal; }
.sch-grid button{ background:#2a2a2a; color:#fff; border:0; cursor:pointer; font-weight:600; transition:background .12s,transform .12s; } .sch-grid button.sel{ background:var(--gold); color:#0B0B0B; }
.sch-slots{ margin-top:16px; border-top:1px solid rgba(255,255,255,.1); padding-top:14px; }
.sch-sub{ font-size:.85rem; color:rgba(255,255,255,.6); margin-bottom:10px; }
.sch-times{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.sch-times button{ padding:10px 0; border-radius:10px; border:1px solid rgba(255,255,255,.15); background:#1d1d1d; color:#fff; font-weight:700; font-family:inherit; cursor:pointer; }
.sch-form{ margin-top:16px; border-top:1px solid rgba(255,255,255,.1); padding-top:14px; display:grid; gap:10px; }
.sch-form label{ display:grid; gap:5px; font-size:.78rem; color:rgba(255,255,255,.65); font-weight:600; }
.sch-form input,.sch-form textarea{ font:inherit; font-size:.92rem; padding:10px 12px; border-radius:9px; border:1px solid rgba(255,255,255,.15); background:#1d1d1d; color:#fff; }
.sch-form input:focus,.sch-form textarea:focus{ outline:2px solid var(--gold); outline-offset:1px; }
.sch-form .row2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sch-note{ font-size:.78rem; color:rgba(255,255,255,.5); margin:0; }
@media (max-width:640px){ .sch-form .row2{ grid-template-columns:1fr; } .sch-times{ grid-template-columns:1fr 1fr; } }

.wtile.ocean{ --glow:rgba(43,91,255,.55); } .wtile.honey{ --glow:rgba(242,194,48,.6); } .wtile.mint{ --glow:rgba(31,201,138,.55); } .wtile.midnight{ --glow:rgba(242,194,48,.25); } .wtile.sky{ --glow:rgba(74,140,255,.55); } .wtile.sunset{ --glow:rgba(255,122,46,.6); }

/* ---- How it works: three equal cards, one performance each ---- */
.steps3 .step{ min-height:0; height:460px; display:flex; flex-direction:column; padding:22px 22px 24px; box-shadow:0 26px 48px -28px rgba(0,0,0,.45), 0 12px 40px -18px var(--glow, rgba(0,0,0,.2)); }
.steps3 .step .art{ position:relative; inset:auto; flex:1; display:grid; place-items:center; padding:6px 0 10px; overflow:visible; }
.steps3 .step h3{ margin:0 0 6px; font-size:1.35rem; } .steps3 .step p{ margin:0; min-height:2.9em; font-size:.95rem; }
.step.s-subscribe{ --glow:rgba(242,194,48,.55); } .step.s-request{ --glow:rgba(43,91,255,.5); } .step.s-receive{ --glow:rgba(255,122,46,.55); }
/* subscribe: the membership card settles in, then gets stamped */
.s-subscribe .mini-price{ position:relative; transform:rotate(-14deg) translateY(28px); opacity:0; overflow:hidden; }
.s-subscribe.inview .mini-price{ animation:cardin 1.1s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes cardin{ 0%{transform:rotate(-14deg) translateY(28px);opacity:0} 100%{transform:rotate(-4deg) translateY(0);opacity:1} }
.s-subscribe .mini-price::after{ content:""; position:absolute; top:-40%; left:-60%; width:40%; height:180%; background:linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%); transform:translateX(-120%) rotate(8deg); }
.s-subscribe.inview .mini-price::after{ animation:shine 1.2s ease-out .9s 1; } .s-subscribe.play .mini-price::after{ animation:shine 1.2s ease-out 1; }
@keyframes shine{ to{ transform:translateX(420%) rotate(8deg); } }
.s-subscribe .stamp{ position:absolute; right:10px; top:10px; background:var(--gold); color:#0B0B0B; font-weight:800; font-size:.62rem; letter-spacing:.04em; text-transform:uppercase; padding:4px 8px; border-radius:999px; transform:scale(.9) rotate(-12deg); opacity:0; }
.s-subscribe.inview .stamp{ animation:stamp .6s cubic-bezier(.34,1.56,.64,1) 1.2s forwards; } .s-subscribe.play .stamp{ animation:stamp .6s cubic-bezier(.34,1.56,.64,1) .3s forwards; }
@keyframes stamp{ to{ transform:scale(1) rotate(-6deg); opacity:1; } }
/* request: chips rise in one by one; on hover a highlight runs across them */
.s-request .chips{ transform:none; } .s-request .chips span{ opacity:0; transform:translateY(14px); transition:background .2s, color .2s; }
.s-request.inview .chips span{ animation:chipin .55s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:calc(var(--i, 0) * 70ms); }
@keyframes chipin{ to{ opacity:1; transform:translateY(0); } }
.s-request.play .chips span{ animation:chippulse .5s ease both; animation-delay:calc(var(--i, 0) * 60ms); }
@keyframes chippulse{ 0%,100%{ background:rgba(255,255,255,.92); color:var(--ink); transform:translateY(0);} 50%{ background:var(--gold); color:#0B0B0B; transform:translateY(-3px);} }
/* receive: the newest document is delivered onto the stack, then ticked */
.s-receive .doc-stack .d3{ transform:translateX(140px) rotate(20deg); opacity:0; }
.s-receive.inview .doc-stack .d3{ animation:deliver 1.1s cubic-bezier(.2,.8,.2,1) .2s forwards; } .s-receive.play .doc-stack .d3{ animation:deliver 1.1s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes deliver{ 0%{transform:translateX(140px) rotate(20deg);opacity:0} 70%{transform:translateX(-4px) rotate(8deg);opacity:1} 100%{transform:translateX(0) rotate(9deg);opacity:1} }
.s-receive .tick{ position:absolute; right:8px; bottom:8px; width:20px; height:20px; border-radius:50%; background:#00A85A; color:#fff; font-size:.7rem; font-weight:800; display:grid; place-items:center; transform:scale(.9); opacity:0; }
.s-receive.inview .tick{ animation:stamp .5s cubic-bezier(.34,1.56,.64,1) 1.3s forwards; } .s-receive.play .tick{ animation:stamp .5s cubic-bezier(.34,1.56,.64,1) 1.1s forwards; }
@media (max-width:900px){ .steps3 .step{ height:400px; } }
@media (prefers-reduced-motion:reduce){ .s-subscribe .mini-price,.s-request .chips span,.s-receive .doc-stack .d3{ opacity:1; transform:none; animation:none !important; } .s-subscribe .stamp,.s-receive .tick{ transform:scale(1); opacity:1; } }

/* ---- Glass and gloss, Designjoy-style ---- */
/* frosted pieces inside the cards */
.s-subscribe .mini-price{ background:rgba(11,11,11,.9); border:1px solid rgba(255,255,255,.14); box-shadow:0 30px 50px -20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12); }
.s-request .chips span{ background:rgba(255,255,255,.94); border:1px solid rgba(255,255,255,.9); box-shadow:0 8px 18px -12px rgba(0,0,0,.35), inset 0 1px 0 #fff; }
.s-receive .doc-stack div{ background:rgba(255,255,255,.92); border:1px solid rgba(255,255,255,.95); box-shadow:0 20px 40px -20px rgba(0,0,0,.45), inset 0 1px 0 #fff; }
.s-receive .doc-stack .d3{ background:rgba(255,249,224,.95); }
.obj.board,.obj.pausebtn,.obj.card{ background:rgba(255,255,255,.9); border:1px solid rgba(255,255,255,.95); box-shadow:0 10px 20px -10px rgba(0,0,0,.4), inset 0 1px 0 #fff; }
.obj.badge{ border:1px solid rgba(255,255,255,.55); box-shadow:0 10px 20px -10px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.6); }
.obj.coins .c{ box-shadow:0 6px 12px -6px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.7); }
/* hero and call cards: glossy inner pieces too */
.join .btn.white,.call-card .btn.white{ background:rgba(255,255,255,.92); border:1px solid rgba(255,255,255,.95); }
/* middle card timings: slower, softer entrance; calmer highlight sweep */
.s-request.inview .chips span{ animation:chipin .7s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:calc(var(--i, 0) * 110ms); }
@keyframes chipin{ 0%{ opacity:0; transform:translateY(14px) scale(.96);} 100%{ opacity:1; transform:translateY(0) scale(1);} }
.s-request.play .chips span{ animation:chippulse .7s ease both; animation-delay:calc(var(--i, 0) * 90ms); }
@keyframes chippulse{ 0%,100%{ background:rgba(255,255,255,.94); color:var(--ink); transform:translateY(0);} 50%{ background:var(--gold); color:#0B0B0B; transform:translateY(-3px);} }
/* hero card: the whole intro-call row is the link */
.join a.row{ text-decoration:none; color:inherit; border-radius:14px; padding:8px; margin:-8px; transition:background .15s; }
.join a.row > span:first-child{ display:block; } .join a.row b{ display:block; } .join a.row > span:first-child > span{ color:rgba(255,255,255,.75); font-size:.85rem; }
#call{ scroll-margin-top:24px; }
/* hero card arrow: a down arrow that lights up and dips on hover, nudges at rest */
.join a.row .arrow{ width:44px; height:44px; border-radius:50%; background:#fff; color:#0B0B0B; display:grid; place-items:center; flex:0 0 auto; transition:background .2s ease, transform .2s ease, box-shadow .2s ease; box-shadow:0 8px 20px -10px rgba(0,0,0,.5); }
.join a.row .arrow svg{ transition:transform .2s ease; animation:nudge 4s ease-in-out infinite; }
@keyframes nudge{ 0%,86%,100%{ transform:translateY(0);} 90%{ transform:translateY(3px);} 94%{ transform:translateY(-1px);} }
@media (prefers-reduced-motion:reduce){ .join a.row .arrow svg{ animation:none; } }

/* ---- Showcase: sample documents and the journey ---- */
.docgrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:28px; }
.doc-card{ background:#fff; border-radius:var(--r); overflow:hidden; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
.doc-cover{ display:block; position:relative; padding:34px 26px 0; overflow:hidden; min-height:100%; }
.doc-cover img{ display:block; width:100%; height:auto; border-radius:6px 6px 0 0; box-shadow:0 30px 50px -22px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.4) inset; transform:translateY(10px) rotate(-2deg); transform-origin:50% 100%; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.doc-pages{ position:absolute; top:12px; right:12px; background:rgba(11,11,11,.78); color:#fff; font-size:.72rem; font-weight:700; padding:5px 10px; border-radius:999px; }
.doc-body{ padding:26px 26px 24px; display:flex; flex-direction:column; gap:10px; }
.doc-body h3{ font-size:1.35rem; letter-spacing:-.03em; line-height:1.15; }
.doc-body p{ font-size:.9rem; color:var(--grey); max-width:none; margin:0; }
.doc-maps{ font-size:.85rem; color:var(--ink); } .doc-maps b{ font-weight:700; }
.doc-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:auto; padding-top:8px; }
.doc-actions .btn{ padding:10px 16px; min-height:40px; font-size:.9rem; }
@media (max-width:1000px){ .docgrid{ grid-template-columns:1fr; } }
@media (max-width:560px){ .doc-card{ grid-template-columns:1fr; } .doc-cover{ padding:26px 40px 0; } }

.journey-teaser{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:28px; }
.journey-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px 20px; margin-top:32px; }
.journey-grid .board.wide{ grid-column:1 / -1; }
.journey-grid figcaption b, .journey-teaser figcaption b{ color:var(--ink); font-weight:700; }
@media (max-width:960px){ .journey-teaser, .journey-grid{ grid-template-columns:1fr; } }

.product .sample{ grid-column:1 / -1; margin-top:12px; font-size:.85rem; font-weight:700; color:var(--ink); text-decoration:none; border-bottom:2px solid var(--gold); width:max-content; max-width:100%; }

.doc-jump{ display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; }
.doc-jump a{ display:flex; flex-direction:column; gap:2px; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:10px 16px; text-decoration:none; color:var(--ink); box-shadow:0 6px 16px -12px rgba(0,0,0,.3); }
.doc-jump a b{ font-size:.92rem; } .doc-jump a span{ font-size:.75rem; color:var(--grey); }

.docviewer{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,2.15fr); gap:24px 36px; align-items:start; padding:44px 0; border-top:1px solid rgba(0,0,0,.08); }
.docviewer:first-child{ border-top:0; padding-top:0; }
.dv-text h3{ font-size:1.6rem; letter-spacing:-.03em; line-height:1.12; margin-bottom:10px; }
.dv-text p{ max-width:40ch; }
.dv-toc{ margin:16px 0 0; padding:0 0 0 1.4em; font-size:.88rem; color:var(--ink); display:grid; gap:4px; }
.dv-toc li::marker{ color:var(--gold); font-weight:700; }
.dv-text .doc-actions{ margin-top:18px; }
.dv-sheet{ position:relative; border-radius:24px; padding:clamp(18px,3vw,36px) clamp(24px,8vw,120px); overflow:hidden; }
.dv-page{ display:block; width:100%; height:auto; border-radius:4px; background:#fff; box-shadow:0 40px 70px -30px rgba(0,0,0,.6); transition:opacity .22s ease, transform .22s ease; }
.dv-page.turn{ opacity:0; transform:translateX(14px); }
.dv-page.turn.back{ transform:translateX(-14px); }
.dv-nav{ position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; border:0; background:#fff; color:var(--ink); font-size:1.7rem; line-height:1; cursor:pointer; box-shadow:0 10px 24px -10px rgba(0,0,0,.5); display:grid; place-items:center; padding:0 0 3px; transition:background .12s, transform .12s; }
.dv-nav.prev{ left:14px; } .dv-nav.next{ right:14px; }
.dv-nav:disabled{ opacity:.35; cursor:default; transform:translateY(-50%); background:#fff; }
.dv-expand{ position:absolute; top:14px; right:14px; width:38px; height:38px; border-radius:12px; border:0; background:rgba(255,255,255,.92); color:var(--ink); font-size:1.1rem; cursor:pointer; box-shadow:0 8px 20px -10px rgba(0,0,0,.5); }
.dv-count{ position:absolute; left:14px; top:14px; background:rgba(11,11,11,.78); color:#fff; font-size:.75rem; padding:5px 10px; border-radius:999px; }
.dv-count b{ color:var(--gold); }
.dv-strip{ display:flex; gap:8px; margin-top:12px; overflow-x:auto; padding:6px 2px 10px; scrollbar-width:thin; }
.dv-strip button{ flex:0 0 auto; width:64px; padding:0; border:2px solid transparent; border-radius:6px; background:#fff; cursor:pointer; overflow:hidden; opacity:.75; transition:opacity .15s, border-color .15s, transform .15s; }
.dv-strip button img{ display:block; width:100%; height:auto; }
.dv-strip button.on{ opacity:1; border-color:var(--gold); }
.dv-lb{ position:fixed; inset:0; z-index:100; background:rgba(11,11,11,.92); display:grid; place-items:center; padding:24px; }
.dv-lb img{ max-width:100%; max-height:calc(100dvh - 48px); height:auto; width:auto; border-radius:4px; box-shadow:0 40px 80px -30px rgba(0,0,0,.9); }
.dv-lb .dv-nav{ position:fixed; } .dv-lb .dv-nav.prev{ left:22px; } .dv-lb .dv-nav.next{ right:22px; }
.dv-lb .dv-close{ position:fixed; top:18px; right:22px; width:44px; height:44px; border-radius:50%; border:0; background:#fff; font-size:1.3rem; cursor:pointer; }
.dv-lb .dv-count{ position:fixed; left:22px; top:22px; }
@media (max-width:960px){ .docviewer{ grid-template-columns:minmax(0,1fr); } .dv-stage,.dv-text{ min-width:0; } .dv-sheet{ padding:16px 40px; } .dv-nav{ width:40px; height:40px; } }
@media (prefers-reduced-motion:reduce){ .dv-page, .doc-cover img{ transition:none; } }

/* pack card, section map, figures */
.pack-card{ background:#fff; border-radius:var(--r); overflow:hidden; display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr); margin-top:28px; }
.pack-card .doc-body h3{ font-size:1.7rem; }
.map-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.map-chip{ display:flex; flex-direction:column; gap:1px; text-decoration:none; color:var(--ink); background:var(--bg); border:1px solid rgba(0,0,0,.06); border-radius:12px; padding:8px 12px; }
.map-chip b{ font-size:.82rem; } .map-chip span{ font-size:.72rem; color:var(--grey); }
.pack-toc summary{ cursor:pointer; font-weight:700; font-size:.9rem; list-style:none; display:flex; align-items:center; gap:8px; }
.pack-toc summary::-webkit-details-marker{ display:none; }
.pack-toc summary::after{ content:"⌄"; font-size:1.1rem; transition:transform .2s; }
.pack-toc[open] summary::after{ transform:rotate(180deg); }
.pack-toc ol{ margin:10px 0 0; padding:0; list-style:none; columns:2; column-gap:20px; font-size:.84rem; }
.pack-toc li, .dv-toc li{ break-inside:avoid; }
.pack-toc li a, .dv-toc li a{ color:var(--ink); text-decoration:none; display:flex; gap:8px; padding:3px 0; }
.pack-toc li a span, .dv-toc li a span{ color:var(--grey); font-family:ui-monospace,Menlo,monospace; font-size:.72rem; flex:0 0 5.5em; padding-top:2px; }
.dv-toc{ list-style:none; padding:0; gap:0; }
@media (max-width:1000px){ .pack-card{ grid-template-columns:1fr; } .pack-card .doc-cover{ padding:26px 80px 0; } .pack-toc ol{ columns:1; } }
.fig-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px 20px; margin-top:32px; }
.fig-grid.three{ grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:28px; }
.fig-grid .fig.wide{ grid-column:1 / -1; }
.fig{ margin:0; }
.fig a{ display:block; background:#fff; border-radius:20px; padding:14px; box-shadow:0 20px 40px -30px rgba(0,0,0,.45); transition:transform .25s ease, box-shadow .25s ease; }
.fig img{ display:block; width:100%; height:auto; border-radius:10px; }
.fig figcaption{ font-size:.9rem; color:var(--grey); margin-top:10px; }
.fig figcaption b{ color:var(--ink); }
.fig-ref{ display:inline-block; font-family:ui-monospace,Menlo,monospace; font-size:.68rem; color:var(--grey); background:#fff; border-radius:999px; padding:2px 8px; margin-left:4px; }
.dv-lb .dv-title{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%); color:#fff; font-size:.9rem; background:rgba(0,0,0,.5); padding:6px 12px; border-radius:999px; max-width:80vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:960px){ .fig-grid, .fig-grid.three{ grid-template-columns:1fr; } }

.fig{ display:flex; flex-direction:column; }
.fig a{ flex:1; display:grid; place-items:center; }
.pack-sections{ grid-column:1 / -1; margin-top:8px; }
.dv-toc.cols{ display:block; columns:3; column-gap:24px; margin-top:8px; }
@media (max-width:960px){ .dv-toc.cols{ columns:1; } }

.handover{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:16px; }
.handover div{ background:#fff; border-radius:16px; padding:18px 20px; }
.handover div.this{ box-shadow:inset 0 0 0 2px var(--gold); }
.handover b{ display:flex; align-items:center; gap:8px; font-size:.98rem; letter-spacing:-.01em; margin-bottom:4px; }
.handover b span{ font-size:.68rem; font-weight:700; background:var(--gold); color:var(--ink); border-radius:999px; padding:2px 8px; }
.handover p{ font-size:.86rem; color:var(--grey); margin:0; max-width:none; line-height:1.45; }
.docviewer .handover, .docviewer > .doc-maps{ grid-column:1 / -1; }
@media (max-width:960px){ .handover{ grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .handover{ grid-template-columns:1fr; } }

/* product cards: long sample links must wrap inside the card, never widen it */
.product{ grid-template-columns:minmax(0,1fr) auto; }
.product b, .product p, .product .pl{ min-width:0; overflow-wrap:break-word; }
.product .sample{ width:auto; max-width:100%; border-bottom:0;
  text-decoration:underline; text-decoration-color:var(--gold); text-decoration-thickness:2px; text-underline-offset:3px;
  transition:text-decoration-color 150ms ease; }

/* ---- Client login ---- */
.signin-wrap{ padding:clamp(28px,5vw,64px) 0 clamp(48px,7vw,96px); }
.signin-sheet{ border-radius:28px; padding:clamp(28px,6vw,72px) clamp(16px,4vw,48px); display:grid; place-items:center; }
.signin-card{ background:#fff; border-radius:20px; padding:clamp(26px,4vw,38px); width:100%; max-width:430px;
  box-shadow:0 40px 70px -34px rgba(0,0,0,.55); }
.signin-head{ text-align:center; margin-bottom:22px; }
.signin-mark{ display:inline-flex; margin-bottom:12px; }
.signin-head h1{ font-size:1.7rem; letter-spacing:-.03em; line-height:1.1; }
.signin-head p{ color:var(--grey); font-size:.92rem; margin:6px auto 0; max-width:30ch; }

.signin-form{ display:grid; gap:6px; }
.signin-form label{ font-size:.82rem; font-weight:700; color:var(--ink); margin-top:10px; }
.signin-form input{ font-family:inherit; font-size:16px; /* 16px: stops iOS zooming the page on focus */
  padding:13px 14px; border-radius:12px; border:1px solid rgba(0,0,0,.14); background:var(--bg-2, #F7F4EE); color:var(--ink);
  width:100%; min-height:48px; transition:border-color 150ms ease, box-shadow 150ms ease; }
.signin-form input::placeholder{ color:var(--grey-2); }
.signin-form input:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(242,194,48,.3); }
.signin-form input:user-invalid{ border-color:#C8452B; box-shadow:0 0 0 3px rgba(200,69,43,.16); }
.signin-go{ width:100%; margin-top:18px; -webkit-tap-highlight-color:transparent;
  transition:transform 160ms cubic-bezier(.23,1,.32,1), background 160ms ease, opacity 160ms ease; }
.signin-go:active{ transform:scale(.97); }
.signin-go[disabled]{ opacity:.72; cursor:default; }
.signin-go[disabled]:active{ transform:none; }
.signin-note{ font-size:.8rem; color:var(--grey); text-align:center; margin-top:14px; line-height:1.5; }
.signin-note a{ color:var(--ink); }
.signin-back{ font:inherit; font-size:.8rem; background:none; border:0; padding:0; color:var(--ink);
  text-decoration:underline; text-decoration-color:var(--gold); text-decoration-thickness:2px; text-underline-offset:3px;
  cursor:pointer; transition:text-decoration-color 150ms ease; }

.signin-miss h2{ font-size:1.35rem; letter-spacing:-.03em; line-height:1.15; }
.signin-miss > p{ color:var(--grey); font-size:.92rem; margin-top:8px; }
.signin-actions{ display:grid; gap:10px; margin-top:18px; }
.signin-actions .btn{ width:100%; -webkit-tap-highlight-color:transparent;
  transition:transform 160ms cubic-bezier(.23,1,.32,1), background 160ms ease; }
.signin-actions .btn:active{ transform:scale(.97); }

/* swap: the form leaves, the message arrives from just below, both fast and ease-out */
.signin-form, .signin-miss{ transition:opacity 200ms cubic-bezier(.23,1,.32,1), transform 200ms cubic-bezier(.23,1,.32,1); }
.signin-form.is-out{ opacity:0; transform:translateY(-6px); }
.signin-miss.is-in{ opacity:0; transform:translateY(8px); }

@media (hover:hover) and (pointer:fine){
  .signin-back:hover{ text-decoration-color:var(--ink); }
  .signin-go:hover{ background:#222; }
}
@media (prefers-reduced-motion:reduce){
  .signin-form, .signin-miss{ transition:opacity 200ms ease; }
  .signin-form.is-out, .signin-miss.is-in{ transform:none; }
  .signin-go:active, .signin-actions .btn:active{ transform:none; }
}

/* ---- FAQ tool list ---- */
.faq .a p + .toollist, .faq .a .toollist{ list-style:none; padding:0; margin:12px 0; display:grid; gap:8px; }
.faq .a .toollist li{ font-size:.9rem; color:var(--grey); padding-left:14px; border-left:2px solid var(--gold); line-height:1.45; }
.faq .a .toollist b{ display:block; color:var(--ink); font-size:.82rem; font-weight:700; }
.faq .a p{ margin:0; max-width:none; }
.faq .a p + p{ margin-top:12px; }

/* the swap panels set display, which would otherwise beat [hidden] */
.signin-form[hidden], .signin-miss[hidden]{ display:none !important; }
.signin-note{ text-wrap:balance; }

/* ---- Hover states, gated to real pointers -------------------------------
   Touch browsers fake :hover on first tap and leave it stuck. Everything that
   changes on hover lives in here; :active below carries press feedback for
   touch.                                                                    */
@media (hover: hover) and (pointer: fine) {
  /* Let people stop it to read a name, and lift the card they are on. */
  .wall-viewport:hover .wall-track { animation-play-state: paused; }
  .wall-item:hover {
    transform: translateY(-5px);
    border-color: rgba(var(--glow), .45);
    box-shadow:
      0 26px 44px -26px rgba(0,0,0,.45),
      0 22px 44px -18px rgba(var(--glow), .75),
      0 0 0 1px rgba(var(--glow), .3),
      0 1px 0 rgba(255,255,255,.9) inset;
  }
  .wall-item:hover .sec { color: var(--ink); }
  .byline:hover .bird .hop { transform: translateY(-12px); }
  .byline:hover .byline-glow { opacity: 1; transform: scale(1.1); }
  .byline-cta .btn.ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.45); }
  .btn:hover { background: #fff; transform: translateY(-1px); }
  .btn.black:hover { background: #222; }
  .cal .cells a:hover { background: var(--gold); color: #0B0B0B; }
  .bird:hover .hop { transform: translateY(-10px) rotate(-4deg); }
  .bird.front:hover .hop { transform: translateY(-10px); }
  .wordmark:hover .hop { transform: translateY(-3px) rotate(-8deg); }
  .board-link:hover img { outline: 3px solid var(--gold); outline-offset: -3px; }
  .wtile:hover .stage,.wtile:focus-visible .stage{ transform:translateY(-3px); box-shadow:0 30px 52px -28px rgba(0,0,0,.5), 0 16px 48px -14px var(--glow, rgba(0,0,0,.25)), inset 0 -18px 30px -24px rgba(0,0,0,.22); }
  .sch-grid button:hover{ background:var(--gold); color:#0B0B0B; transform:translateY(-1px); }
  .sch-times button:hover,.sch-times button.sel{ background:var(--gold); color:#0B0B0B; border-color:var(--gold); }
  .join a.row:hover{ background:rgba(255,255,255,.08); }
  .join a.row:hover .arrow{ background:var(--gold); transform:translateY(2px); box-shadow:0 10px 24px -8px rgba(242,194,48,.8); }
  .join a.row:hover .arrow svg{ transform:translateY(2px); animation:none; }
  .join a.row:hover{ background:rgba(255,255,255,.1); }
  .doc-card:hover .doc-cover img{ transform:translateY(0) rotate(0deg); }
  .product .sample:hover{ border-color:var(--ink); }
  .doc-jump a:hover{ border-color:var(--gold); }
  .dv-nav:hover{ background:var(--gold); transform:translateY(-50%) scale(1.06); }
  .dv-expand:hover{ background:var(--gold); }
  .dv-strip button:hover{ opacity:1; transform:translateY(-2px); }
  .dv-lb .dv-close:hover{ background:var(--gold); }
  .map-chip:hover{ border-color:var(--gold); background:#fff; }
  .pack-toc li a:hover, .dv-toc li a:hover{ color:var(--gold-deep); }
  .fig a:hover{ transform:translateY(-3px); box-shadow:0 30px 50px -28px rgba(0,0,0,.5); outline:3px solid var(--gold); outline-offset:-3px; cursor:zoom-in; }
  .product .sample:hover{ text-decoration-color:var(--ink); }
}

/* Reduced motion, last word (these follow the hover block on purpose) */
@media (prefers-reduced-motion: reduce) {
  .bird .hop, .bird .pupil { transition: none; }
  .bird:hover .hop, .bird.front:hover .hop, .wordmark:hover .hop { transform: none; }
  .bird .head, .bird .tail, .bird .idle, .bird .bird-eye { animation: none; }
  html { scroll-behavior: auto; }
}


/* ===========================================================================
   Polish pass, 18 Sep 2026 — touch behaviour, press feedback, layout fixes.
   The sign-in page already worked this way; this brings the rest of the site
   up to the same standard.
   =========================================================================== */

:root {
  --ease-out: cubic-bezier(.23, 1, .32, 1);      /* entrances, presses */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* the birds, the stamps */
}

/* ---- Touch baseline ------------------------------------------------------ */
html {
  -webkit-tap-highlight-color: transparent;  /* no grey flash on tap */
  overscroll-behavior: none;                 /* no pull-to-refresh on a long page */
}
button, a, [role="button"], summary, .wtile {
  touch-action: manipulation;                /* no residual double-tap-zoom delay */
}
.btn, summary, .wtile, .top .actions a, .perch, .flock {
  user-select: none; -webkit-user-select: none;
}
.btn, .wtile { -webkit-touch-callout: none; }

/* ---- Press feedback ------------------------------------------------------
   Native controls answer the finger the instant it lands. Hover is gated to
   real pointers above, so :active is the only feedback a touch user gets.   */
.btn { transition: transform 140ms var(--ease-out), background 140ms ease, box-shadow 140ms ease; }
.btn:active { transform: scale(.97); }
.join a.row:active { transform: scale(.985); }
.wtile:active .stage { transform: scale(.985); }
.faq summary:active { opacity: .7; }
.sch-grid button:active, .sch-times button:active, .dv-nav:active { transform: scale(.95); }
.dv-nav:active { transform: translateY(-50%) scale(.95); }

/* ---- Sticky header -------------------------------------------------------
   One long page, 8,000px of it, and the CTA lived only at the very top.
   Translucent so content passes underneath rather than hitting a bar.       */
body > .frame > .top {
  position: sticky; top: 0; z-index: 20;
  padding: 14px 0 12px; padding-top: calc(14px + env(safe-area-inset-top, 0px));
}
/* 50vw counts the scrollbar, so the full-bleed bar would push the page 8-17px
   wide. overflow-x:clip trims it without creating a scroll container, which
   overflow:hidden would, breaking position:sticky. */
body { overflow-x: clip; }
/* The bar itself is full-bleed; the frame it sits in is only 1160px wide. */
body > .frame > .top::before {
  content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}
@media (prefers-reduced-transparency: reduce) {
  body > .frame > .top::before { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
/* Three buttons plus the wordmark do not fit in 343px of usable header, so one
   has to go. "Book a call" now appears in the sticky bottom bar AND in the hero
   card, so it is the safe one to drop here; Client login appears nowhere else
   above the footer, which is 99% of the way down the home page. Paying clients
   need to reach it without scrolling the entire site. */
@media (max-width: 560px) {
  .top { gap: 8px; flex-wrap: nowrap; }
  .top .actions { gap: 6px; flex-wrap: nowrap; }
  .top .actions .btn { padding: 10px 12px; font-size: .84rem; white-space: nowrap; }
  .wordmark { font-size: 1rem; gap: 7px; }
  .wordmark .mark-svg { width: 26px; }
}

/* ---- The membership card was clipped off-screen below 960px --------------
   .join-card .member is positioned left:-12% width:118% for the 3-column
   grid. Once the grid collapses the card is the page width, so that pushed
   the mark and the "MONTHLY · MANCHESTER" line past the left edge.          */
/* The designed bleed (left:-12%, width:118%, plus the tilt's -8% nudge) needs
   about 130px of page margin outside the 1160px frame. That only exists above
   ~1440px; below it the card walked off the left of the screen. */
@media (max-width: 1439px) {
  .join-card .member { left: 0; width: 100%; }
  .member.tilt { transform: rotate(-5deg) translateY(-6%); }
}
@media (max-width: 960px) {
  .join-card { min-height: 0; padding-top: 0; }
  .join-card .member { position: relative; top: 0; margin-bottom: 24px; }
  .member.tilt { transform: rotate(-3deg); }
}

/* ---- Fixed-price cards kept three different internal rhythms -------------
   align-content defaulted to stretch, so every card spread its slack across
   all six rows. Cards with less copy grew gaps the others did not have.     */
.product { align-content: start; }

/* ---- FAQ opened with a 115px jump ---------------------------------------- */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content {
    block-size: 0; overflow: hidden;
    transition: block-size 240ms var(--ease-out), content-visibility 240ms allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; }
}
.faq summary::after { transition: transform 200ms var(--ease-out); }

/* ---- The call card now has to clear the sticky header -------------------- */
@media (min-width: 961px) { .call-card { top: 96px; } }

/* ---- Hero card was 420px of gradient with the copy at the foot ----------- */
@media (max-width: 960px) { .join { min-height: 0; padding-top: 44px; } }

/* ---- Client names: tighter wrap on a phone ------------------------------- */
@media (max-width: 560px) { .logos { gap: 14px 26px; } .logos span { font-size: 1.05rem; } }

@media (prefers-reduced-motion: reduce) {
  .btn:active, .join a.row:active, .wtile:active .stage,
  .sch-grid button:active, .sch-times button:active { transform: none; }
  .dv-nav:active { transform: translateY(-50%); }
}

/* ---- "15-min" should not break across the hyphen ------------------------- */
.join a.row b, .call-card h3 { text-wrap: balance; }

/* ---- In-page targets have to clear the sticky header -------------------- */
#pricing, #projects, #faq, #call, #who, #benefits, #main, #figures {
  scroll-margin-top: 100px;
}
@media (max-width: 560px) { #pricing, #projects, #faq, #call, #who, #benefits, #main, #figures { scroll-margin-top: 84px; } }

/* ---- "How it works" captions sat on the light end of the gradients ------
   White at 90% over the honey card measured ~2.9:1. A soft scrim under the
   text lifts it without dulling the artwork above.                        */
.step { isolation: isolate; }
.step::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 58%;
  background: linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,.22) 45%, transparent);
  pointer-events: none; z-index: 0;
}
.step h3, .step p { position: relative; z-index: 1; }
.step p { color: #fff; }

/* ===========================================================================
   Who makes it — the founder panel.
   Replaces the old dashed, centred, grey ".note", which read as fine print.
   Dark, so it lands as the page's first real chapter break, with the senior
   plover from the "What you get" family carrying the left side. The bird
   blinks, nods and tracks the cursor on its own (site.js), so the panel is
   alive without anything extra.
   =========================================================================== */
.byline {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r); color: #fff;
  display: grid; grid-template-columns: minmax(0, .58fr) minmax(0, 1fr);
  gap: clamp(20px, 3.5vw, 56px);
  padding: clamp(24px, 3.5vw, 52px);
  align-items: center;
  background:
    radial-gradient(70% 60% at 18% 6%, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(75% 70% at 92% 92%, #6B4E0F 0%, rgba(0,0,0,0) 62%),
    radial-gradient(60% 50% at 80% 18%, #3A3A3A 0%, rgba(0,0,0,0) 55%),
    linear-gradient(160deg, #2A2A2A 0%, #141414 52%, #0B0B0B 100%);
  box-shadow: 0 44px 90px -50px rgba(0,0,0,.8);
}
/* Hairline gold inner border, the same move as the membership card. */
.byline::after {
  content: ""; position: absolute; inset: 10px; border-radius: calc(var(--r) - 8px);
  border: 1px solid rgba(242,194,48,.28); pointer-events: none; z-index: 2;
}

/* ---- The art: a lit stage the bird stands on --------------------------- */
.byline-art {
  position: relative; align-self: stretch; min-height: 320px;
  display: grid; place-items: center;
}
/* A soft cone of light from the top-left, so the stage has a direction. */
.byline-art::before {
  content: ""; position: absolute; inset: -10% -6% 0 -6%;
  background: radial-gradient(60% 50% at 38% 0%, rgba(242,194,48,.13) 0%, rgba(242,194,48,0) 72%);
  pointer-events: none;
}
.byline-glow {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: min(100%, 360px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(242,194,48,.5) 0%, rgba(242,194,48,.16) 42%, rgba(242,194,48,0) 68%);
  filter: blur(8px);
  animation: byline-breathe 7s ease-in-out infinite;
}
/* Three faint rings, so the bird reads as standing somewhere rather than floating. */
.byline-rings { position: absolute; inset: 0; display: grid; place-items: center; }
.byline-rings i {
  position: absolute; border: 1px solid rgba(242,194,48,.18); border-radius: 50%;
  aspect-ratio: 1; left: 50%; top: 52%; translate: -50% -50%;
}
.byline-rings i { top: 50%; width: min(100%, 360px); }
.byline-rings i:nth-child(1) { width: min(46%, 168px); border-color: rgba(242,194,48,.3); }
.byline-rings i:nth-child(2) { width: min(70%, 252px); border-color: rgba(242,194,48,.17); }
.byline-rings i:nth-child(3) { width: min(96%, 348px); border-color: rgba(242,194,48,.09); }
.byline-perch {
  position: relative; z-index: 1; display: block;
  filter: drop-shadow(0 22px 26px rgba(0,0,0,.55));
}
.byline-perch .bird { display: block; width: clamp(150px, 18vw, 224px); height: auto; }
.byline-perch .acc { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@keyframes byline-breathe {
  0%, 100% { opacity: .75; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}

/* ---- The copy ---------------------------------------------------------- */
.byline-body { position: relative; z-index: 1; }
.byline .kicker, .byline .kicker.pill-kicker {
  text-align: left; color: var(--gold); margin-bottom: 14px;
  background: rgba(242,194,48,.12); border: 1px solid rgba(242,194,48,.34);
  border-radius: 999px; padding: 6px 13px; box-shadow: none;
  font-family: "Plus Jakarta Sans", sans-serif; font-size: .8rem;
  letter-spacing: .02em; text-transform: none; font-weight: 700;
  display: inline-flex; align-items: center; gap: 8px;
}
.byline .kicker::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 4px rgba(242,194,48,.18);
}
.byline h2 { color: #fff; font-size: clamp(2rem, 3.5vw, 3.1rem); margin-bottom: 20px; }
.byline h2 em { color: var(--gold); }
.byline p { color: rgba(255,255,255,.76); max-width: 60ch; }
.byline p + p { margin-top: 0; }
.byline-creed {
  margin-top: 22px; font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.3;
  color: #fff !important; font-weight: 600; letter-spacing: -.02em;
  padding-left: 18px; border-left: 3px solid var(--gold);
}
.byline-creed em { color: var(--gold); }
.byline-sign { margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); }
.byline-sign .sig {
  display: block; font-family: "Fraunces", Georgia, serif; font-style: italic;
  font-size: 1.55rem; letter-spacing: -.02em; color: #fff;
}
.byline-facts { display: block; margin-top: 6px; font-size: .82rem; color: rgba(255,255,255,.55); }
.byline-cta { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.byline-cta .btn.ghost {
  background: transparent; color: #fff; border-color: rgba(255,255,255,.28); box-shadow: none;
}

@media (max-width: 860px) {
  .byline { grid-template-columns: 1fr; gap: 8px; }
  .byline-art { aspect-ratio: auto; min-height: 190px; }
  .byline-perch .bird { width: 150px; }
}
@media (prefers-reduced-motion: reduce) { .byline-glow { animation: none; } }

/* LinkedIn glyph in the founder panel's button */
.byline-cta .in-glyph { flex: 0 0 auto; margin-right: 2px; opacity: .85; }

/* ===========================================================================
   Worked-with wall. A marquee is seen by everyone who scrolls, so it is slow,
   linear and quiet rather than attention-seeking. Two identical runs sit side
   by side and the track slides exactly one run, so the loop never seams.
   Constant motion is the one case where keyframes beat transitions.
   =========================================================================== */
.wall-section { padding-top: clamp(28px, 4vw, 44px); padding-bottom: clamp(36px, 5vw, 64px); }
.wall-head {
  text-align: center; margin: 0 0 26px;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink);
}
/* Two short rules either side, so the label reads as a divider for the section
   rather than a stray caption floating above the cards. */
.wall-head::before, .wall-head::after {
  content: ""; height: 1px; width: clamp(28px, 7vw, 76px);
  background: linear-gradient(to right, transparent, rgba(0,0,0,.22));
}
.wall-head::after { background: linear-gradient(to left, transparent, rgba(0,0,0,.22)); }
/* Full-bleed, so cards run off both edges instead of stopping inside the frame. */
.wall-viewport {
  position: relative; overflow: hidden;
  margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%);
  /* Fade at both ends rather than a hard cut. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 110px, #000 calc(100% - 110px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 110px, #000 calc(100% - 110px), transparent 100%);
}
.wall-track { display: flex; width: max-content; animation: wall-scroll 38s linear infinite; }
/* Four copies in the track, so one copy is 25%. */
.wall-run { display: flex; list-style: none; margin: 0; padding: 0; }
@keyframes wall-scroll { to { transform: translateX(-25%); } }

.wall-item {
  position: relative; flex: 0 0 auto; margin-right: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  min-width: 232px; height: 122px; padding: 0 34px;
  background: linear-gradient(180deg, #fff 0%, #FCFAF7 100%);
  border: 1px solid rgba(0,0,0,.05); border-radius: 20px;
  /* The third shadow is the card's own colour, low and wide, so the row picks up
     the brand palette without any of it being loud. */
  box-shadow:
    0 18px 30px -22px rgba(0,0,0,.4),
    0 2px 5px -3px rgba(0,0,0,.14),
    0 16px 34px -20px rgba(var(--glow), .5),
    0 1px 0 rgba(255,255,255,.9) inset;
  transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out), border-color .2s ease;
}
/* A hairline of the card's colour along the top edge, like light catching it. */
.wall-item::before {
  content: ""; position: absolute; inset: 0 auto auto 0; height: 2px;
  left: 22%; right: 22%; width: auto; border-radius: 2px;
  background: linear-gradient(to right, transparent, rgba(var(--glow), .85), transparent);
}
.wall-item .wm { font-size: 1.42rem; font-weight: 700; color: var(--ink); line-height: 1; white-space: nowrap; }
/* Acronyms read better open, names read better tight. Tracking is size- and
   shape-specific, never one value for everything. */
.wall-item .wm.acronym { letter-spacing: .07em; }
.wall-item .wm.word    { letter-spacing: -.03em; }
.wall-item .sec {
  font-size: .7rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--grey); white-space: nowrap; transition: color .2s ease;
}
.wall-item img { max-height: 40px; width: auto; object-fit: contain; }

@media (max-width: 560px) {
  .wall-item { min-width: 176px; height: 104px; padding: 0 24px; margin-right: 12px; }
  .wall-item .wm { font-size: 1.16rem; }
  .wall-item .sec { font-size: .64rem; }
  .wall-viewport {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
  }
}

/* No movement, no duplicate: a plain centred wall. */
@media (prefers-reduced-motion: reduce) {
  .wall-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .wall-run { flex-wrap: wrap; justify-content: center; gap: 14px; }
  .wall-run[aria-hidden="true"] { display: none; }
  .wall-item { margin-right: 0; }
  .wall-viewport { -webkit-mask-image: none; mask-image: none; margin-inline: 0; padding-inline: 0; }
}

/* A client with a usable mark shows it beside the name, not instead of it. */
.wall-item .lockup { display: flex; align-items: center; gap: 9px; }
.wall-item .lockup img { height: 23px; width: auto; display: block; }

/* ---- Breadcrumbs ---------------------------------------------------------
   Only on pages below the top level. Same mono voice as .kicker so it reads as
   a label, not as another nav.                                              */
.crumbs { padding: 18px 0 0; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
.crumbs li { display: flex; align-items: center; gap: 6px; color: var(--grey); }
.crumbs li + li::before { content: "/"; color: var(--grey-2); }
.crumbs a { color: var(--grey); text-decoration: none; text-underline-offset: 3px; }
.crumbs [aria-current="page"] { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .crumbs a:hover { color: var(--ink); text-decoration: underline; } }

/* ---- Sticky mobile call to action ----------------------------------------
   Phones only, and only once the hero buttons have scrolled away. It hides
   again over the footer so it never sits on top of the real call to action.
   translateY(100%) moves it by its own height whatever the content is.      */
.mcta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: none; gap: 10px;
  padding: 10px clamp(16px, 3vw, 40px); padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(236, 230, 232, 0.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  transform: translateY(100%); transition: transform 260ms cubic-bezier(0.23, 1, 0.32, 1); }
.mcta[data-show] { transform: translateY(0); }
.mcta .btn { flex: 1; }
@media (max-width: 860px) { .mcta:not([hidden]) { display: flex; } }
@media (prefers-reduced-motion: reduce) {
  .mcta { transition: opacity 180ms ease; transform: none; opacity: 0; }
  .mcta[data-show] { opacity: 1; }
}

/* iOS zooms the page when a focused input is under 16px and never zooms back.
   The scheduler form was at 0.92rem, which is 14.7px on a phone.            */
@media (pointer: coarse) { .sch-form input, .sch-form textarea { font-size: 16px; } }

/* ---- Scheduler form overflow ---------------------------------------------
   The Name/Company row is a 1fr 1fr grid. Grid items default to
   min-width:auto, so each input refused to shrink below its intrinsic width
   (a text input's default size=20 characters), forcing the row wider than the
   card and spilling out of its right edge. min-width:0 lets them shrink to
   the track. The textarea additionally had the browser default resize:both,
   so it could be dragged sideways out of the card as well.              */
.sch-form label,
.sch-form input,
.sch-form textarea { min-width: 0; }
.sch-form input,
.sch-form textarea { width: 100%; max-width: 100%; }
.sch-form textarea { resize: vertical; }

/* ---- Login: "Need a hand?" --------------------------------------------
   Was a bare mailto: that fired a mail client with no warning, and did
   nothing at all on a desktop with no mail client configured. Now it opens
   in place and shows the address, so it is readable and copyable either
   way. Same <details> pattern as the FAQ.                               */
.signin-help { margin-top: 10px; text-align: center; font-size: .82rem; }
.signin-help summary { cursor: pointer; color: var(--grey); text-decoration: underline; text-underline-offset: 3px; list-style: none; display: inline-block; min-height: 32px; padding: 6px 4px; }
.signin-help summary::-webkit-details-marker { display: none; }
.signin-help[open] summary { color: var(--ink); }
.signin-help div { margin-top: 8px; color: var(--grey); line-height: 1.5; max-width: 34ch; margin-inline: auto; }
.signin-help a { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .signin-help summary:hover { color: var(--ink); } }

/* ---- Touch targets -------------------------------------------------------
   Booking is the conversion path on a phone, and the date cells were 30px
   tall with 34px month arrows. Apple's guidance is 44px; below about 40px
   people miss and hit the neighbouring date. Only applied to coarse
   pointers so the desktop calendar keeps its compact proportions.        */
@media (pointer: coarse) {
  .sch-grid button, .sch-grid i { aspect-ratio: auto; min-height: 44px; }
  .sch-nav button { width: 44px; height: 44px; }
  .sch-times button { min-height: 44px; }
}

/* Inline text links sat at 21px, just under the 24px minimum in WCAG 2.5.8.
   Padding lifts the hit area without moving the text. */
.foot .legal a, .signin-note a { display: inline-block; padding-block: 3px; }