/* Layout concept (PJ): a one-person studio, one dark "editing room" band where scrolling plays the whole job.
   Styling (okt 2026): studiotale.com structure with the essence of thinkinggifts.com. Warm off-white,
   a Futura-like geometric face (Jost) for heads, a warm serif (Young Serif) for statements, a hand-drawn
   underline, pill buttons, soft tiles and a giant wordmark in the footer. Black, white and warm grey only. */
:root{
  --bg:#ffffff; --bg-alt:#f8f4f2; --panel:#ffffff; --panel-2:#efe9e6; --line:#e6dfdb; --fg:#1d1d1d; --muted:#4f4a47;
  --accent:#1d1d1d; --accent-ink:#ffffff; --accent-text:#1d1d1d; --accent-soft:rgba(29,29,29,.06); --brand:#1d1d1d; --pin:#fafafa; --ok:#1d1d1d; --ok-soft:rgba(29,29,29,.06); --bad:#6b6560;
  --tally:#b86e00; --tally-soft:rgba(229,138,0,.10);
  --studio:#1d1d1d; --studio-2:#262626; --studio-3:#2e2e2e; --studio-line:#3a3a3a; --studio-fg:#ffffff; --studio-muted:#b0aaa6;
  --shadow:0 24px 48px -36px rgba(29,29,29,.35);
  --r:14px; --r-sm:10px;
  --f-display:"Jost", "Futura", "Helvetica Neue", Arial, system-ui, sans-serif;
  --f-body:"Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --f-serif:"Young Serif", Georgia, "Times New Roman", serif;
  --yellow:#f6c746; --lilac:#aaa4e0; --blue:#377ef7; --pink:#f3a9c9; --red:#ee4f4f; --on-color:#1d1d1d;
  --pad:clamp(16px, 1.7vw, 32px);
  --f-hand:var(--f-display);
}
/* Light is the brand look and the default; the sun/moon button in the header switches to dark */
:root[data-theme="dark"]{
  --bg:#161514; --bg-alt:#1e1d1c; --panel:#232221; --panel-2:#2b2a28; --line:#363432; --fg:#f6f2ef; --muted:#bdb6b1;
  --accent:#f6f2ef; --accent-ink:#1d1d1d; --accent-text:#f6f2ef; --accent-soft:rgba(255,255,255,.07); --brand:#f6f2ef; --ok:#f6f2ef; --ok-soft:rgba(255,255,255,.07); --bad:#a8a19c;
  --tally:#ffb547; --tally-soft:rgba(255,181,71,.12);
  --studio:#0f0f0f; --studio-2:#1b1b1b; --studio-3:#242424; --studio-line:#333333;
  --shadow:0 24px 48px -36px rgba(0,0,0,.8); color-scheme:dark }

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth; scroll-padding-top:72px}
body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--f-body); font-size:1.125rem; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:clip}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:60; background:var(--bg)}
a{color:inherit}
img,video{max-width:100%; display:block}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}
.wrap{max-width:1760px; margin:0 auto; padding-left:max(var(--pad), env(safe-area-inset-left,0px)); padding-right:max(var(--pad), env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-display); margin:0; letter-spacing:-.01em; text-wrap:balance}
h1,h2{font-weight:600; letter-spacing:-.02em}
h2{font-size:clamp(2.2rem, 4.2vw, 4rem); line-height:1.04}
h3{font-size:1.3rem; line-height:1.3; font-weight:700; letter-spacing:-.005em}
p{margin:0}
section{padding-block:clamp(72px, 8vw, 112px)}
.alt{background:var(--bg-alt)}
.muted{color:var(--muted)}
.hand{font-family:var(--f-display); font-weight:700; color:var(--fg); line-height:1; font-size:1.7rem}
.head{display:grid; grid-template-columns:minmax(0,1fr); gap:14px; margin-bottom:clamp(36px,4.5vw,56px); max-width:780px}
.head.center{margin-inline:auto; text-align:center; justify-items:center}
.head p{font-family:var(--f-serif); color:var(--fg); font-size:1.3rem; line-height:1.45; text-wrap:pretty; max-width:44ch}

/* Placeholders: preview build shows them, --demo fills them with marked examples, --live refuses while any are left */
.ph{outline:1px dashed var(--tally); outline-offset:2px; background:var(--tally-soft); border-radius:4px; padding:0 3px}
.ph-note{display:inline-block; justify-self:start; font-size:.82rem; font-weight:650; color:var(--tally); border:1px dashed var(--tally); padding:3px 9px; border-radius:7px; line-height:1.4}
html.live .ph, html.demo .ph{outline:0; background:none; padding:0}
html.live .ph-note, html.live .ph-only, html.demo .ph-note{display:none!important}
.ex{display:inline-block; font-family:var(--f-body); font-size:.75rem; font-weight:700; letter-spacing:0; color:var(--accent-text); background:var(--accent-soft); padding:2px 8px; border-radius:var(--r-sm); vertical-align:middle}
.usp-bar{background:var(--studio); color:#e2ddd9; font-size:.88rem; font-weight:500}
.usp-row{display:flex; justify-content:center; gap:8px 36px; min-height:44px; align-items:center}
.usp-row span{display:inline-flex; align-items:center; gap:8px; white-space:nowrap}
.usp-row span::before{content:""; width:15px; height:15px; flex:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat}
@media (max-width: 1180px){ .usp-row{gap:8px 20px; font-size:.86rem} }
@media (max-width: 860px){ .usp-row{display:grid} .usp-row span{grid-area:1/1; justify-self:center; opacity:0; transition:opacity .5s} .usp-row span.on{opacity:1} }

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:13px 30px; border-radius:999px; border:1.5px solid transparent; font-family:var(--f-display); font-weight:600; font-size:1.05rem; text-decoration:none; cursor:pointer; text-align:center; line-height:1.25; transition:background .2s, color .2s, border-color .2s, opacity .2s}
.btn:hover{transform:none}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.btn-primary:hover{opacity:.86}
.btn-primary .arrow{transition:transform .25s}
.btn-primary:hover .arrow{transform:translateX(4px)}
.btn-ghost{border-color:var(--fg); background:var(--bg); color:var(--fg)}
.btn-ghost:hover{background:var(--fg); color:var(--bg)}
.btn-sm{min-height:46px; padding:9px 26px; font-size:.98rem}
.micro{color:var(--muted); font-size:1rem}
.micro b{color:var(--fg); font-weight:600}
@media (max-width: 560px){ .ctas .btn{width:100%} .hero .ctas .btn-ghost{display:none} }

/* Header */
.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:50; background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.top-row{display:flex; align-items:center; gap:22px; height:80px}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--fg); white-space:nowrap}
.logo svg{width:30px; height:30px; flex:none}
.logo .lm-t{fill:var(--fg)} .logo .lm-p{fill:var(--bg); stroke:var(--bg); stroke-width:1; stroke-linejoin:round}
.logo .word{display:grid; line-height:1}
.logo .word b{font-family:var(--f-display); font-weight:700; font-size:1.32rem; letter-spacing:-.02em}
.logo .word small{font-family:var(--f-body); font-weight:500; font-size:.58rem; letter-spacing:.34em; color:var(--muted); margin-top:4px}
.nav{display:flex; gap:36px; margin-left:auto}
.nav a{text-decoration:none; color:var(--fg); font-family:var(--f-display); font-weight:500; font-size:1.02rem; transition:opacity .2s}
.nav a:hover{opacity:.6}
.top-actions{display:flex; align-items:center; gap:12px}
.theme-t{width:42px; height:42px; flex:none; display:grid; place-items:center; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--panel); color:var(--fg); cursor:pointer; transition:border-color .2s}
.theme-t:hover{border-color:var(--fg)}
.theme-t svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.theme-t .sun, :root[data-theme="dark"] .theme-t .moon{display:none}
:root[data-theme="dark"] .theme-t .sun{display:block}
.lang{display:inline-flex; border:1px solid var(--line); border-radius:var(--r-sm); padding:2px}
.lang button{border:0; background:none; min-width:42px; min-height:36px; border-radius:3px; font-size:.9rem; font-weight:650; cursor:pointer; color:var(--muted)}
.lang button[aria-pressed="true"]{background:var(--fg); color:var(--bg)}
@media (max-width: 960px){ .nav{display:none} .top-actions{margin-left:auto} }
@media (max-width: 560px){ .top-actions .btn{display:none} }

/* Hero */
.hero{padding-block:clamp(40px,6vw,88px) clamp(72px,9vw,120px)}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(32px,4vw,80px); align-items:center}
@media (max-width: 900px){ .hero-grid{grid-template-columns:minmax(0,1fr)} }
.hero-copy{display:grid; grid-template-columns:minmax(0,1fr); gap:28px; min-width:0}
.pill{display:inline-flex; align-items:center; gap:8px; justify-self:start; padding:6px 13px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-weight:650; font-size:.95rem}
.pill::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--brand)}
.hello{display:flex; align-items:center; gap:14px}
.face{width:56px; height:56px; border-radius:50%; flex:none; overflow:hidden; background:var(--panel-2); display:grid; place-items:center; font-family:var(--f-display); font-weight:600; color:var(--muted)}
.face img{width:100%; height:100%; object-fit:cover}
.hello .hand{font-size:1.9rem}
h1{font-size:clamp(2.6rem, 5.4vw, 5.6rem); line-height:1.02}
.mark{position:relative; white-space:nowrap}
.lede{font-family:var(--f-serif); font-size:1.32rem; line-height:1.45; color:var(--fg); max-width:38ch}
@media (max-width: 560px){ .lede{font-size:1.12rem} }
.ctas{display:flex; flex-wrap:wrap; gap:12px}
.hero{position:relative; overflow:hidden; background:var(--bg)}
.hero-grid{position:relative; z-index:1}
.stage-hero{position:relative; display:grid; gap:14px; justify-items:center; min-width:0}
.editor{--brand:#fafafa; width:100%; border-radius:12px; background:#1d1d1d; padding:10px; display:grid; gap:10px; box-shadow:0 40px 70px -46px rgba(0,0,0,.5)}
.ed-bar{display:flex; align-items:center; gap:7px; padding:2px 6px 0; color:#8f8f8f; font-size:.8rem}
.ed-bar i{width:9px; height:9px; border-radius:50%; background:#2a2a2a}
.ed-file{margin:0 auto; color:#c4c4c4; font-weight:500}
.ed-time{font-variant-numeric:tabular-nums}
.editor .frame-area{border-radius:var(--r-sm); background:#141414 repeating-conic-gradient(#191919 0 25%, transparent 0 50%) 0 0/18px 18px}
.ed-tools{display:flex; justify-content:center; padding:0 4px}
.editor .shapes span{background:#262626; border-color:#3a3a3a; color:#b0aaa6; padding:5px 10px; font-size:.85rem; border-radius:var(--r-sm)}
.editor .shapes span.on{border-color:#fafafa; color:#0a0a0a; background:#fafafa}
.ed-tl{position:relative; display:grid; grid-template-columns:1.2fr .8fr 1fr 1.4fr; gap:3px; height:40px; margin:0 4px 4px}
.ed-tl .clip{border-radius:6px; overflow:hidden; border:2px solid #262626}
.ed-tl .clip.on{border-color:var(--brand)}
.ed-tl img{width:100%; height:100%; object-fit:cover; opacity:.8}
.ed-ph{position:absolute; top:-6px; bottom:-3px; left:0; width:2px; background:#fff; border-radius:2px; animation:edph 12s linear infinite}
.ed-ph::before{content:""; position:absolute; top:-3px; left:-5px; width:12px; height:9px; background:#fff; border-radius:3px 3px 7px 7px}
@keyframes edph{from{left:0} to{left:calc(100% - 2px)}}
@media (max-width: 560px){ .ed-file{display:none} }
.frame-area{width:100%; height:clamp(240px, 30vw, 520px); display:grid; place-items:center}
@media (max-width: 900px){ .frame-area{height:min(66vw, 340px)} }
.monitor{position:relative; width:min(480px,100%); height:270px; border-radius:var(--r-sm); overflow:hidden; background:#0a0a0a; box-shadow:var(--shadow); transition:width .9s cubic-bezier(.7,0,.2,1), height .9s cubic-bezier(.7,0,.2,1)}
.monitor{container-type:inline-size}
@container (max-width: 300px){ .play-btn > span{display:none} .play-btn{padding:6px} }
.monitor img,.monitor video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:object-position .9s cubic-bezier(.7,0,.2,1)}
.play{position:absolute; inset:0; z-index:3; display:flex; align-items:flex-end; justify-content:center; padding-bottom:14px; background:linear-gradient(transparent 62%, rgba(0,0,0,.35)); border:0; cursor:pointer}
.play-btn{display:flex; align-items:center; gap:8px; padding:6px 14px 6px 6px; border-radius:999px; background:#fff; color:#0a0a0a; font-weight:550; font-size:.95rem; box-shadow:0 10px 24px -8px rgba(0,0,0,.5); transition:transform .25s; white-space:nowrap}
.play:hover .play-btn{transform:scale(1.05)}
.play-btn i, .pp i{width:30px; height:30px; border-radius:50%; background:#0a0a0a; display:grid; place-items:center; color:#fff; font-style:normal}
.play-btn i::before, .pp i::before{content:""; margin-left:3px; border-left:10px solid currentColor; border-top:6px solid transparent; border-bottom:6px solid transparent}
.shapes{display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
.shapes span{display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--panel); font-size:.92rem; font-weight:600; color:var(--muted); transition:all .3s; font-variant-numeric:tabular-nums}
.shapes span.on{border-color:var(--accent); color:var(--accent-text); background:var(--accent-soft)}
.shapes i{display:inline-block; border:1.5px solid currentColor; border-radius:2px}

/* Why it's an easy yes */
.why3{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(24px,3vw,48px); margin-top:calc(-1 * clamp(24px,3vw,48px)); margin-bottom:clamp(56px,7vw,96px); position:relative; z-index:2}
.why3 .w{display:block; padding:clamp(24px,2.4vw,32px); border-radius:var(--r); background:var(--bg-alt)}
.w-chk{display:none}
.why3 b{display:block; font-family:var(--f-display); font-weight:700; font-size:clamp(1.4rem,2vw,1.65rem); letter-spacing:-.01em; line-height:1.2; color:var(--fg)}
.w-t{display:block; color:var(--muted); margin-top:8px; font-size:1.05rem; line-height:1.6}
@media (max-width: 900px){ .why3{grid-template-columns:minmax(0,1fr); gap:28px} }

/* Work */
.cases{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px}
@media (max-width: 900px){ .cases{grid-template-columns:minmax(0,1fr)} }
.case{display:grid; gap:14px; align-content:start; min-width:0}
.poster{position:relative; display:block; aspect-ratio:16/10; overflow:hidden; cursor:pointer; background:var(--panel-2); border:0; padding:0; width:100%; border-radius:var(--r)}
.poster img{width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.8,.2,1), opacity .4s}
.poster video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none}
.poster:hover img{transform:scale(1.04)}
.pp{position:absolute; left:12px; bottom:12px; display:flex; align-items:center; gap:10px; background:#fff; color:#0a0a0a; padding:5px 14px 5px 5px; border-radius:999px; font-size:.92rem; font-weight:550}
.pp i{width:26px; height:26px}
.poster.empty{display:grid; place-items:center; cursor:default; border:1px dashed var(--line); box-shadow:none}
.poster.empty span{font-size:.95rem; color:var(--muted); text-align:center; padding:12px}
.poster.made{display:grid; place-items:center; cursor:default; color:#fff; text-align:center; padding:22px}
.poster.made b{font-family:var(--f-display); font-weight:700; font-size:clamp(1.3rem,2vw,1.6rem); line-height:1.2; letter-spacing:-.01em; max-width:14ch}
.case h3{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:1.25rem}
.case p{color:var(--muted)}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chips span{font-size:.82rem; font-weight:500; padding:4px 10px; border-radius:var(--r-sm); background:var(--panel); border:1px solid var(--line); color:var(--fg); font-variant-numeric:tabular-nums}
.feature-quote{margin:clamp(64px,8vw,112px) auto 0; max-width:980px; text-align:center; display:grid; gap:24px; justify-items:center}
.feature-quote blockquote{margin:0; font-family:var(--f-serif); font-weight:400; font-size:clamp(1.6rem,3vw,2.6rem); line-height:1.3}
.feature-quote .stars{display:block; color:var(--fg); font-size:.95rem; letter-spacing:2px; line-height:1; margin-top:5px}
.feature-quote blockquote::before{content:none}
.who{display:flex; gap:12px; align-items:center; color:var(--muted); text-align:left}
.who b{color:var(--fg)}
.avatar{width:46px; height:46px; border-radius:50%; background:var(--panel-2); flex:none; display:grid; place-items:center; font-weight:600; color:var(--muted)}

/* ============ Brief to final video (scroll plays the job) ============ */
.studio{--brand:#fafafa; background:var(--studio); color:var(--studio-fg); padding:0}
.studio .browser, .studio .gl-browser, .studio .script{--brand:#0a0a0a}
.studio-pin{padding-block:clamp(80px,10vw,124px); overflow:hidden}
.studio-grid{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(28px,4vw,64px); align-items:start}
.studio .head{max-width:none}
@media (max-width: 900px){ .studio-grid{grid-template-columns:minmax(0,1fr); gap:16px} }
.studio h2{color:var(--studio-fg)}
.studio .sub{color:var(--studio-muted); margin-top:10px}
.day{display:flex; align-items:baseline; gap:12px; margin-top:-6px}
.day b{font-family:var(--f-display); font-weight:700; font-size:clamp(3.2rem, 6.4vw, 5.2rem); line-height:.95; letter-spacing:-.01em; font-variant-numeric:tabular-nums; color:var(--studio-fg)}
.day span{color:var(--studio-muted)}
.day.is-live b{color:var(--studio-fg)} .day.is-live span{visibility:hidden}
.steps{list-style:none; margin:clamp(14px,3vh,28px) 0 0; padding:0; display:grid; gap:2px}
.steps li{display:grid; grid-template-columns:14px 1fr; gap:14px; align-items:start; padding:10px 0; opacity:.38; transition:opacity .35s}
.steps li.on{opacity:1}
.steps li.done{opacity:.62}
.steps li::before{content:""; width:10px; height:10px; border-radius:50%; margin-top:8px; background:var(--studio-line); box-shadow:0 0 0 3px var(--studio); transition:background .35s}
.steps li.on::before{background:var(--brand)}
.steps li.done::before{background:var(--studio-muted)}
.steps li.res.on::before{background:var(--studio-fg)}
.steps b{display:block; font-family:var(--f-display); font-weight:700; font-size:1.12rem}
.steps small{display:block; color:var(--studio-muted); font-size:1rem; line-height:1.5}
@media (max-width: 900px){ .studio .sub, .steps li:not(.on){display:none} .day{margin-top:6px} .day b{font-size:2.6rem} }
.result{display:grid; grid-template-columns:28px 1fr; gap:12px; align-items:start; margin-top:14px; padding:14px 16px; border-radius:var(--r-sm); background:rgba(255,255,255,.05); border:1px solid var(--studio-line)}
.result .r-ico{width:28px; height:28px; border-radius:50%; background:#fafafa; color:#0a0a0a; display:grid; place-items:center; font-weight:600; font-size:.85rem}
.result b{display:block; font-weight:650; font-size:1.05rem}
.result small{display:block; color:var(--studio-muted); font-size:.98rem; line-height:1.45}
.canvas{position:relative; width:100%; aspect-ratio:16/11; container-type:inline-size; border-radius:var(--r); background:var(--studio-2); border:1px solid var(--studio-line); overflow:hidden}
@media (max-width: 900px){ .canvas{aspect-ratio:4/3.6} }
.layer{position:absolute; inset:0; will-change:opacity, transform}
.browser{position:absolute; left:12%; top:13%; width:76%; height:74%; border-radius:2.2cqw; background:#fff; color:#12151d; box-shadow:0 30px 80px -30px rgba(0,0,0,.8); overflow:hidden; display:grid; grid-template-rows:auto 1fr}
.b-bar{display:flex; align-items:center; gap:1.2cqw; padding:1.6cqw 2cqw; background:#eef0f4}
.b-bar i{width:1.4cqw; height:1.4cqw; border-radius:50%; background:#d3d7df}
.b-url{flex:1; margin-left:1.5cqw; background:#fff; border-radius:1cqw; padding:.8cqw 1.6cqw; font-size:2.2cqw; color:#4d5566; white-space:nowrap; overflow:hidden}
.b-url .caret{display:inline-block; width:.2cqw; height:2.4cqw; background:var(--brand); vertical-align:middle; margin-left:.2cqw; animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.b-body{padding:4cqw 5cqw; display:grid; grid-template-columns:1.1fr 1fr; gap:4cqw; align-items:center}
.wf{display:grid; gap:1.6cqw}
.wf i{display:block; height:2cqw; border-radius:1cqw; background:#e3e6ec}
.wf i.h{height:3.6cqw; width:90%; background:#12151d}
.wf i.h2{height:3.6cqw; width:62%; background:#12151d}
.wf i.btn-wf{width:40%; height:4.4cqw; background:var(--brand); border-radius:1.2cqw; margin-top:1cqw}
.wf-img{aspect-ratio:4/3; border-radius:2cqw; background:linear-gradient(135deg,#dfe3ea,#f2f4f7); position:relative}
.wf-img::after{content:""; position:absolute; left:18%; right:18%; top:24%; bottom:24%; border-radius:1.4cqw; background:#fff; box-shadow:0 1cqw 3cqw rgba(0,0,0,.08)}
.script{position:absolute; left:16%; top:9%; width:68%; height:82%; border-radius:2cqw; background:#fffdf8; color:#12151d; box-shadow:0 30px 80px -30px rgba(0,0,0,.8); padding:4.4cqw 4.8cqw; display:grid; align-content:start; gap:2.2cqw}
.script-head{display:flex; justify-content:space-between; align-items:baseline; border-bottom:.2cqw solid #e9e4da; padding-bottom:2cqw}
.script-head b{font-family:var(--f-display); font-size:3.2cqw}
.script-head span{font-size:2cqw; color:#6a7180}
.s-line{display:grid; grid-template-columns:7cqw 1fr; gap:2cqw; align-items:center; font-size:2.25cqw}
.s-line em{font-style:normal; color:#8b919d; font-variant-numeric:tabular-nums}
.s-line span{white-space:nowrap; overflow:hidden; display:block; border-right:.3cqw solid transparent}
.stamp{display:none!important;position:absolute; right:5%; bottom:8%; font-family:var(--f-display); font-weight:800; font-size:4.4cqw; color:var(--brand); border:.5cqw solid var(--brand); border-radius:1.4cqw; padding:.4cqw 2cqw; letter-spacing:.06em}
.edit{position:absolute; inset:7% 7% 8%; display:grid; grid-template-rows:1fr auto; gap:2.6cqw}
.player{position:relative; border-radius:1.8cqw; overflow:hidden; background:#000; box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}
.player img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .25s}
.player img.on{opacity:1}
.spin{position:absolute; width:5.2cqw; height:5.2cqw; margin:-5.2cqw 0 0 -2.6cqw; border-radius:50% 50% 50% .6cqw; transform:rotate(-45deg); background:var(--pin); color:#1a1200; display:grid; place-items:center; font-weight:800; font-size:2.2cqw; box-shadow:0 1cqw 2.6cqw rgba(0,0,0,.4)}
.spin span{transform:rotate(45deg)}
.bubble{position:absolute; background:#fff; color:#12151d; font-size:2.1cqw; font-weight:600; padding:1.2cqw 1.8cqw; border-radius:1.4cqw; box-shadow:0 1cqw 3cqw rgba(0,0,0,.35); white-space:nowrap}
.bubble.fixed{background:#0b8a4c; color:#fff}
.tl{position:relative; display:grid; grid-template-columns:repeat(4, 1fr); gap:.8cqw; padding:1.2cqw; border-radius:1.4cqw; background:var(--studio-3); border:1px solid var(--studio-line)}
.tl img{width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:.8cqw; opacity:.55; transition:opacity .2s}
.tl img.on{opacity:1; outline:.3cqw solid var(--brand); outline-offset:.2cqw}
.playhead{position:absolute; top:-1cqw; bottom:-1cqw; width:.45cqw; border-radius:.3cqw; background:var(--brand); box-shadow:0 0 1.5cqw var(--brand)}
.playhead::before{content:""; position:absolute; top:-.2cqw; left:50%; transform:translateX(-50%); border:1.2cqw solid transparent; border-top-color:var(--brand)}
.deliver{position:absolute; inset:0}
.golive{position:absolute; inset:0}
.gl-browser{position:absolute; left:6%; top:14%; width:62%; height:70%; border-radius:2.2cqw; background:#fff; color:#12151d; box-shadow:0 30px 80px -30px rgba(0,0,0,.8); overflow:hidden; display:grid; grid-template-rows:auto 1fr}
.gl-body{padding:3.4cqw 3.6cqw; display:grid; grid-template-columns:.9fr 1.2fr; gap:3cqw; align-items:center}
.gl-vid{position:relative; aspect-ratio:16/9; border-radius:1.4cqw; overflow:hidden; background:#000; box-shadow:0 1.4cqw 3cqw -1cqw rgba(0,0,0,.45)}
.gl-vid img{width:100%; height:100%; object-fit:cover}
.gl-bar{position:absolute; left:0; right:0; bottom:0; height:.6cqw; background:rgba(255,255,255,.35)}
.gl-bar i{display:block; height:100%; width:0; background:#fff}
.gl-chips{position:absolute; right:5%; top:22%; display:grid; gap:1.8cqw}
.gl-chips span{display:flex; align-items:center; gap:1.2cqw; background:#fff; color:#12151d; font-size:2.1cqw; font-weight:700; padding:1.3cqw 2cqw 1.3cqw 1.4cqw; border-radius:1.6cqw; box-shadow:0 1.6cqw 4cqw -1.6cqw rgba(0,0,0,.7); white-space:nowrap}
.gl-chips span::before{content:""; width:2.8cqw; height:2.8cqw; flex:none; border-radius:50%; background:#0b8a4c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 6.5' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat}
.out{position:absolute; border-radius:1.6cqw; overflow:hidden; background:#000; box-shadow:0 24px 60px -20px rgba(0,0,0,.85); border:.3cqw solid rgba(255,255,255,.12)}
.out img{width:100%; height:100%; object-fit:cover}
.out b{position:absolute; left:1.2cqw; top:1.2cqw; font-size:1.9cqw; font-weight:700; background:rgba(0,0,0,.72); color:#fff; padding:.3cqw 1cqw; border-radius:.8cqw; font-variant-numeric:tabular-nums}
.langs{position:absolute; left:0; right:0; bottom:7%; display:flex; justify-content:center; gap:1.4cqw}
.langs span{font-size:2.2cqw; font-weight:700; color:var(--studio-fg); background:var(--studio-3); border:1px solid var(--studio-line); padding:.7cqw 1.8cqw; border-radius:99px}
.ready{position:absolute; left:50%; top:6%; transform:translateX(-50%); font-size:2.3cqw; font-weight:700; color:#fff; background:#0b8a4c; padding:1cqw 2.2cqw; border-radius:99px; white-space:nowrap}
.track{margin-top:clamp(16px,3vh,26px); display:grid; grid-template-columns:repeat(5, 1fr); position:relative}
.track button:last-child.on::before{border-color:var(--studio-fg); background:var(--studio-fg)}
.track::before{content:""; position:absolute; left:0; right:0; top:7px; height:2px; background:var(--studio-line)}
.track .fill{position:absolute; left:0; top:7px; height:2px; background:var(--brand); width:0}
.track button{position:relative; background:none; border:0; padding:22px 0 0; text-align:left; color:var(--studio-muted); cursor:pointer; font-size:.95rem; font-weight:500; min-height:44px}
.track button::before{content:""; position:absolute; left:0; top:2px; width:12px; height:12px; border-radius:50%; background:var(--studio); border:2px solid var(--studio-line); transition:all .3s}
.track button.on{color:var(--studio-fg)}
.track button.on::before, .track button.done::before{border-color:var(--brand); background:var(--brand)}
.scroll-hint{margin-top:12px; color:var(--studio-muted); font-size:.95rem; transition:opacity .3s}
@media (max-width: 900px){ .track button{font-size:.85rem} .scroll-hint{display:none} }

/* What you get */
.get{display:grid; gap:clamp(40px,5vw,64px)}
.get-top{display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(32px,4vw,48px); align-items:start}
.get-top > div:first-child{max-width:780px}
@media (max-width: 900px){ .get-top{grid-template-columns:minmax(0,1fr)} }
@media (max-width: 900px){ .get{grid-template-columns:minmax(0,1fr)} }
.feats{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; margin:0; padding:0}
@media (max-width: 1000px){ .feats{grid-template-columns:1fr 1fr} }
.feats li{list-style:none; display:grid; grid-template-columns:minmax(0,1fr); gap:18px; align-content:start; padding:clamp(24px,2.4vw,32px); border-radius:var(--r); background:var(--bg-alt)}
.feats b{display:block; font-family:var(--f-display); font-weight:700; font-size:1.2rem; line-height:1.3}
.feats div span{display:block; color:var(--muted); font-size:1rem; line-height:1.6; margin-top:6px}
@media (max-width: 520px){ .feats{grid-template-columns:1fr} }
.checklist li{list-style:none; display:flex; gap:12px; align-items:flex-start; font-weight:550}
.checklist li::before{content:""; flex:none; width:20px; height:20px; margin-top:3px; border-radius:6px; background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 6.5' fill='none' stroke='%23e8590c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
/* "See it in place": the video inside realistic but neutral mock-ups of each placement.
   Platform icons only on the tabs (unaltered shapes, small), never inside the mock-ups. */
.ch{display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:20px; align-items:stretch}
.ch-tabs{display:grid; gap:4px; position:relative}
.ch-tabs button{display:flex; align-items:flex-start; gap:14px; width:100%; text-align:left; padding:9px 14px 9px 9px; min-height:58px; border-radius:14px; border:1px solid transparent; background:none; font-weight:500; font-size:1.02rem; color:var(--muted); cursor:pointer; transition:background .2s, color .2s, border-color .2s, box-shadow .2s}
.ch-tabs button:hover{color:var(--fg)}
.ch-tabs .ci{width:38px; height:38px; flex:none; border-radius:var(--r-sm); background:var(--bg-alt); display:grid; place-items:center; transition:background .2s}
.ch-tabs svg{width:19px; height:19px; fill:currentColor}
.ch-tabs svg.st{fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.ch-tabs button[aria-selected="true"]{background:var(--bg-alt); border-color:transparent; color:var(--fg)}
.ch-tabs button[aria-selected="true"] .ci{background:var(--panel); color:var(--fg)}
.ch-tabs button[aria-selected="true"][data-pl="yt"] .ci{background:#ff00001a; color:#ff0000}
.ch-tabs button[aria-selected="true"][data-pl="li"] .ci{background:#0a66c21a; color:#0a66c2}
.ch-tabs button[aria-selected="true"][data-pl="ig"] .ci{background:#e4405f1a; color:#e4405f}
.ch-tabs button[aria-selected="true"][data-pl="tt"] .ci{background:var(--bg-alt); color:var(--fg)}
.ch-tabs .ct{display:grid; padding-top:8px; min-width:0}
.ch-tabs .cd{display:none}
.ch-tabs button[aria-selected="true"] .cd{display:grid; gap:4px; margin:8px 0 6px; font-weight:400; animation:fade .35s both}
.ch-tabs .cd b{font-weight:650; color:var(--fg)}
.ch-tabs .cd span{color:var(--muted); font-size:.95rem; line-height:1.5}
.ch-main{display:grid; gap:16px; min-width:0}
.ch-main .place-stage{height:auto; min-height:460px}
.ch-detail{display:none}
.ch-detail h3{font-size:1.1rem}
.ch-detail p{color:var(--muted); margin-top:6px}
.ch-fmt{position:absolute; z-index:5; top:14px; right:14px; display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}
.place-stage .shape-tag{display:none}
.ch-fmt span{display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:var(--r-sm); background:var(--panel); border:1px solid var(--line); color:var(--fg); font-weight:700; font-size:.88rem; font-variant-numeric:tabular-nums}
.ch-fmt i{display:inline-block; border:1.5px solid currentColor; border-radius:2px}
@media (max-width: 900px){
  .ch{grid-template-columns:minmax(0,1fr); gap:14px}
  .ch-tabs{display:flex; overflow-x:auto; gap:6px; margin-inline:calc(-1 * var(--pad)); padding:2px var(--pad) 10px; scrollbar-width:none}
  .ch-tabs::-webkit-scrollbar{display:none}
  .ch-tabs button{width:auto; flex:none; white-space:nowrap; min-height:48px; padding:5px 14px 5px 5px; border-color:var(--line); background:var(--panel)}
  .ch-tabs button[aria-selected="true"]{border-color:var(--fg); box-shadow:0 0 0 1px var(--fg)}
  .ch-tabs .ci{width:34px; height:34px}
  .ch-tabs button[aria-selected="true"] .cd{display:none}
  .place-stage .ch-fmt{display:none}
  .ch-tabs .ct{padding-top:0; align-self:center}
  .ch-tabs button{align-items:center}
  .ch-main .place-stage{height:340px; min-height:0}
  .ch-detail{display:block; padding:4px 2px 0}
}
.place-stage{position:relative; container-type:size; height:clamp(340px, 40vw, 640px); border-radius:var(--r); background:var(--bg-alt); border:0; overflow:hidden}
.pm{position:absolute; inset:0; display:grid; place-items:center; opacity:0; transform:translateY(14px) scale(.98); transition:opacity .45s, transform .6s cubic-bezier(.2,.9,.2,1); pointer-events:none}
.pm.on{opacity:1; transform:none}
.pm img{width:100%; height:100%; object-fit:cover; display:block}
.r169{aspect-ratio:16/9} .r11{aspect-ratio:1/1} .r45{aspect-ratio:4/5}
.ln{display:block; height:7px; border-radius:4px; background:var(--line)}
.ico{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none}
.mock{background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow); color:var(--fg); font-size:12px; line-height:1.35}
.mock b{font-weight:700}
.mute{position:absolute; left:8px; bottom:8px; width:24px; height:24px; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; display:grid; place-items:center}
.mute .ico{width:13px; height:13px}
.vplay{position:absolute; inset:0; display:grid; place-items:center}
.vplay span{width:40px; height:40px; border-radius:50%; background:rgba(0,0,0,.45); display:grid; place-items:center}
.vplay span::before{content:""; margin-left:4px; border-left:13px solid #fff; border-top:8px solid transparent; border-bottom:8px solid transparent}
.vid{position:relative; overflow:hidden}
.subt{position:absolute; left:50%; bottom:10%; transform:translateX(-50%); background:rgba(0,0,0,.72); color:#fff; font-size:10px; font-weight:600; padding:2px 7px; border-radius:3px; white-space:nowrap}
.pill{display:inline-flex; align-items:center; justify-content:center; border-radius:999px; font-weight:700; font-size:11.5px; padding:5px 12px}
/* website */
/* youtube-style in-stream ad */
/* linkedin-style post */
/* instagram-style feed post */
/* vertical phone: reels, stories, tiktok */
/* Channel mock-ups, modelled on each platform's current interface (checked 29-10-2026) */
.pm .pill::before{display:none}
.mi{width:1.4em; height:1.4em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none}
.mi.fill{fill:currentColor; stroke:none}
.m-chrome{width:min(94%, 640px); border-radius:12px; overflow:hidden; background:#fff; color:#1f1f1f; box-shadow:0 30px 60px -30px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.08); font-size:11px; line-height:1.3}
.cr-tabs{display:flex; align-items:flex-end; gap:4px; padding:8px 10px 0; background:#dfe3eb}
.cr-lights{display:flex; gap:6px; align-self:center; margin:0 10px 4px 2px}
.cr-lights i{width:10px; height:10px; border-radius:50%; background:#ff5f57} .cr-lights i:nth-child(2){background:#febc2e} .cr-lights i:nth-child(3){background:#28c840}
.cr-tab{display:flex; align-items:center; gap:7px; background:#fff; border-radius:9px 9px 0 0; padding:7px 10px; min-width:160px; font-weight:500}
.cr-tab .fav{width:12px; height:12px; border-radius:3px; background:var(--brand)}
.cr-tab em{margin-left:auto; font-style:normal; color:#5f6368}
.cr-plus{color:#5f6368; padding:0 6px 7px; font-size:14px}
.cr-bar{display:flex; align-items:center; gap:10px; padding:6px 10px; border-bottom:1px solid #e8eaed; color:#5f6368}
.cr-bar .dim{opacity:.4}
.cr-url{flex:1; display:flex; align-items:center; gap:8px; background:#f1f3f4; border-radius:99px; padding:5px 12px; color:#1f1f1f}
.cr-url .star{margin-left:auto; color:#5f6368}
.cr-prof{width:18px; height:18px; border-radius:50%; background:#c2e7ff; flex:none}
.pg-nav{display:flex; align-items:center; gap:14px; padding:12px 22px}
.pg-nav .dot{width:16px; height:16px; border-radius:5px; background:var(--fg)}
.pg-nav .ln{width:34px; height:6px} .pg-nav .ln:first-of-type{margin-left:auto}
.pg-nav .pill{background:var(--brand); color:#fff; padding:5px 11px; border-radius:99px; font-size:10px; font-weight:700}
.pg-hero{display:grid; grid-template-columns:1fr 1.35fr; gap:22px; align-items:center; padding:10px 22px 24px}
.pg-hero .copy{display:grid; gap:8px}
.pg-hero .h{height:12px; background:#1f1f1f; width:94%} .pg-hero .h2{height:12px; background:#1f1f1f; width:62%}
.pg-hero .btns{display:flex; gap:6px; margin-top:6px}
.pg-hero .b1{width:70px; height:22px; border-radius:7px; background:var(--brand)} .pg-hero .b2{width:58px; height:22px; border-radius:7px; border:1.5px solid #dadce0}
.pg-hero .vid{border-radius:12px; box-shadow:0 14px 30px -14px rgba(0,0,0,.45)}
@container (max-width: 520px){ .cc-line{display:none} }
.cc-line{position:absolute; left:50%; bottom:8px; transform:translateX(-50%); width:max-content; max-width:90%; background:rgba(0,0,0,.72); color:#fff; font-size:9px; font-weight:600; padding:2px 6px; border-radius:3px; text-align:center}
.m-li{width:min(78%, 330px); align-self:start; margin-top:64px; background:#fff; border-radius:8px; overflow:hidden; color:rgba(0,0,0,.9); font-size:11px; line-height:1.3; box-shadow:0 0 0 1px rgba(0,0,0,.08), 0 20px 40px -24px rgba(0,0,0,.35)}
.pm[data-pl="li"]{background:#f4f2ee}
.li-head{display:flex; gap:8px; align-items:flex-start; padding:10px 12px 6px}
.li-logo{position:relative; width:34px; height:34px; border-radius:4px; background:var(--fg); flex:none}
.li-logo::after{content:""; position:absolute; inset:11px; border-radius:2px; background:var(--bg)}
.li-head b{display:block; font-weight:600; font-size:11.5px} .li-head small{display:block; color:rgba(0,0,0,.6); font-size:10px}
.li-follow{margin-left:auto; color:#0a66c2; font-weight:600; white-space:nowrap}
.li-txt{display:grid; gap:5px; padding:2px 12px 10px}
.li-cta{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 12px; background:#f4f2ee}
.li-cta b{font-weight:600} .li-cta small{display:block; color:rgba(0,0,0,.6)}
.li-btn{border:1.5px solid #0a66c2; color:#0a66c2; border-radius:99px; padding:4px 12px; font-weight:600; white-space:nowrap}
.li-counts{display:flex; align-items:center; gap:6px; padding:7px 12px; color:rgba(0,0,0,.6); font-size:10px; border-bottom:1px solid #e8e8e8}
.li-counts .rx{display:flex} .li-counts .rx i{width:13px; height:13px; border-radius:50%; margin-right:-4px; border:1.5px solid #fff; background:#378fe9} .li-counts .rx i:nth-child(2){background:#6dae4f} .li-counts .rx i:nth-child(3){background:#df704d}
.li-counts .r{margin-left:auto}
.li-acts{display:flex; justify-content:space-around; padding:7px 4px; color:rgba(0,0,0,.6); font-weight:600; font-size:10.5px}
.li-acts > span{display:flex; gap:4px; align-items:center}
.m-yt{width:min(94%, 640px); display:grid; gap:10px; color:#0f0f0f}
.yt-player{position:relative; border-radius:12px; overflow:hidden; background:#000; box-shadow:var(--shadow); font-size:11px}
.yt-adcard{position:absolute; left:10px; bottom:30px; display:flex; align-items:center; gap:9px; width:min(48%, 290px); padding:8px; border-radius:8px; background:rgba(0,0,0,.6); color:#fff; line-height:1.25}
.yt-adcard .av{width:28px; height:28px; border-radius:50%; background:var(--brand); flex:none}
.yt-adcard b{display:block; font-weight:600} .yt-adcard small{color:#cfcfcf; font-size:10px}
.yt-cta{margin-left:auto; background:#f1f1f1; color:#0f0f0f; font-weight:600; border-radius:18px; padding:6px 10px; white-space:nowrap; font-size:10.5px}
.yt-spons{position:absolute; left:12px; bottom:10px; display:flex; gap:5px; align-items:center; color:#fff; font-size:10px}
.yt-spons b{font-weight:600} .yt-spons .i{width:11px; height:11px; border-radius:50%; border:1px solid #fff; display:grid; place-items:center; font-size:7px; font-weight:700}
.yt-skip{position:absolute; right:12px; bottom:28px; display:flex; align-items:center; gap:6px; background:rgba(0,0,0,.6); color:#fff; border-radius:18px; padding:7px 12px 7px 14px; font-size:12px; font-weight:600}
.yt-skip .mi{width:13px; height:13px}
.yt-prog{position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.2)} .yt-prog i{display:block; height:100%; width:38%; background:#ffcc00}
.yt-meta{display:grid; gap:9px}
.yt-ch{display:flex; align-items:center; gap:8px} .yt-ch .av{width:26px; height:26px; border-radius:50%; background:var(--panel-2)} .yt-ch .sub-btn{margin-left:auto; width:70px; height:26px; border-radius:99px; background:#0f0f0f}
.m-gmail{width:min(96%, 660px); height:min(88cqh, 440px); display:grid; grid-template-columns:146px minmax(0,1fr); background:#f6f8fc; border-radius:14px; overflow:hidden; color:#1f1f1f; font-size:11px; line-height:1.3; box-shadow:0 30px 60px -30px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.06)}
.gm-side{padding:12px 8px; display:grid; gap:4px; align-content:start}
.gm-compose{display:flex; align-items:center; gap:8px; width:max-content; background:#c2e7ff; border-radius:14px; padding:11px 14px; font-weight:600; margin-bottom:8px}
.gm-nav{display:flex; align-items:center; gap:9px; padding:6px 10px; border-radius:99px; color:#444; white-space:nowrap}
.gm-nav.on{background:#d3e3fd; font-weight:700; color:#001d35} .gm-nav em{margin-left:auto; font-style:normal}
.gm-nav i{width:13px; height:13px; border-radius:3px; border:1.5px solid #b4b8bd} .gm-nav .ln{width:52px; height:6px}
.gm-main{display:grid; grid-template-rows:auto minmax(0,1fr); gap:8px; padding:8px 10px 10px 0; min-width:0}
.gm-search{display:flex; align-items:center; gap:8px; background:#eaf1fb; border-radius:99px; padding:8px 14px; color:#444}
.gm-read{background:#fff; border-radius:16px; padding:14px 18px; display:grid; gap:10px; align-content:start; overflow:hidden}
.gm-subj{display:flex; align-items:center; gap:8px; font-size:15px} .gm-subj b{font-weight:500}
.gm-subj .chip{font-size:9.5px; background:#e8eaed; padding:1px 6px; border-radius:4px; min-height:0; border:0; cursor:default}
.gm-from{display:flex; align-items:center; gap:9px}
.gm-from .av{width:28px; height:28px; border-radius:50%; background:var(--brand); color:#fff; display:grid; place-items:center; font-weight:700; flex:none}
.gm-from b{font-weight:600} .gm-from small{display:block; color:#5f6368; font-size:10px} .gm-from .t{margin-left:auto}
.gm-body{display:grid; gap:7px; padding-left:37px}
.gm-body .vthumb{width:min(80%, 340px); margin-top:4px}
.gm-btns{display:flex; gap:8px; padding-left:37px}
.gm-btns span{border:1px solid #747775; border-radius:99px; padding:6px 14px; font-weight:600; color:#444}
.m-meet{width:min(96%, 660px); aspect-ratio:16/10; max-height:90cqh; background:#202124; border-radius:14px; padding:10px; display:grid; grid-template-rows:minmax(0,1fr) auto; gap:8px; box-shadow:var(--shadow); color:#e8eaed; font-size:10.5px}
.mt-main{display:grid; grid-template-columns:3fr 1fr; gap:8px; min-height:0}
.mt-share{position:relative; border-radius:10px; overflow:hidden; background:#000}
.mt-share img{position:absolute; inset:0; object-fit:contain}
.mt-pres{position:absolute; left:8px; top:8px; background:rgba(32,33,36,.85); padding:3px 8px; border-radius:6px; font-size:9.5px}
.mt-tiles{display:grid; grid-template-rows:repeat(3, minmax(0,1fr)); gap:8px; min-height:0}
.mt-tiles > span{position:relative; border-radius:10px; background:#3c4043; display:grid; place-items:center}
.mt-tiles > span::before{content:""; width:36%; aspect-ratio:1; border-radius:50%; background:#7b5cd6} .mt-tiles > span:nth-child(2)::before{background:#1e8e3e} .mt-tiles > span:nth-child(3)::before{background:var(--brand)}
.mt-tiles > span.sp{box-shadow:inset 0 0 0 2px #8ab4f8}
.mt-tiles b{position:absolute; left:7px; bottom:5px; font-weight:500; font-size:9.5px}
.mt-tiles .mic{position:absolute; right:5px; top:5px; width:16px; height:16px; border-radius:50%; background:rgba(0,0,0,.45); display:grid; place-items:center}
.mt-tiles .mic .mi{width:9px; height:9px}
.mt-bar{display:flex; align-items:center; justify-content:space-between; gap:8px}
.mt-time{white-space:nowrap}
.mt-ctrls{display:flex; gap:6px}
.mt-ctrls i{width:26px; height:26px; border-radius:50%; background:#3c4043; display:grid; place-items:center}
.mt-ctrls i .mi{width:13px; height:13px}
.mt-ctrls i.wide{width:38px; border-radius:13px} .mt-ctrls i.on{background:#8ab4f8; color:#202124} .mt-ctrls i.end{width:44px; border-radius:13px; background:#ea4335}
.mt-right{display:flex; gap:9px} .mt-right i{width:14px; height:14px; border-radius:4px; border:1.5px solid #9aa0a6}
@container (max-width: 520px){ .mt-right, .mt-time{display:none} .mt-bar{justify-content:center} }
.pm-app .welcome{width:min(58%, 330px); padding:0; gap:0; overflow:hidden}
.pm-app .welcome .vid{border-radius:0}
.wl-x{position:absolute; right:7px; top:7px; width:20px; height:20px; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; display:grid; place-items:center; font-size:12px}
.wl-body{padding:12px 14px 14px; display:grid; gap:7px}
.wl-body b{font-size:12.5px}
.wl-row{display:flex; align-items:center; gap:10px; margin-top:4px}
.wl-dots{display:flex; gap:4px} .wl-dots i{width:6px; height:6px; border-radius:3px; background:var(--line)} .wl-dots i.on{width:16px; background:var(--brand)}
.wl-skip{margin-left:auto; color:var(--muted); font-weight:600}
.m-phone{position:relative; height:94cqh; aspect-ratio:402/874; padding:1.1cqh; border-radius:7.4cqh; background:#1d1f24; box-shadow:inset 0 0 0 .35cqh #43464d, 0 30px 60px -28px rgba(0,0,0,.6); font-size:1.75cqh; line-height:1.3}
.m-phone .screen{position:relative; width:100%; height:100%; border-radius:6.4cqh; overflow:hidden; background:#fff; color:#0c0c0c}
.m-phone.dark .screen{background:#000; color:#fff}
.m-phone .di{position:absolute; z-index:6; top:1.9cqh; left:50%; transform:translateX(-50%); width:24%; height:3.2cqh; border-radius:99px; background:#000}
.m-phone .sb{position:relative; z-index:5; height:7.4cqh; display:flex; align-items:center; justify-content:space-between; padding:.6cqh 9% 0; font-size:1.05em}
.m-phone .sb b{font-weight:700}
.sbi{display:flex; gap:.35em; align-items:center} .sbi svg{height:.82em; width:auto; fill:currentColor}
.m-phone .hi{position:absolute; z-index:6; left:33%; right:33%; bottom:.9cqh; height:.55cqh; border-radius:99px; background:#0c0c0c}
.m-phone.dark .hi{background:#fff}
.ig-head{display:flex; align-items:center; gap:.7em; padding:.5em .9em .7em}
.ig-av{width:2.5em; height:2.5em; border-radius:50%; padding:.15em; background:conic-gradient(#feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75)}
.ig-av i{display:block; width:100%; height:100%; border-radius:50%; background:var(--fg); border:.15em solid #fff}
.ig-head b{display:block; font-weight:700} .ig-head small{font-size:.85em}
.ig-head .dots{margin-left:auto; font-size:.8em; letter-spacing:1px}
.m-phone .vid .mute{left:auto; right:.7em; bottom:.7em; width:2em; height:2em}
.ig-cta{display:flex; justify-content:space-between; align-items:center; padding:.75em .9em; background:var(--brand); color:#fff; font-weight:700}
.ig-acts{display:flex; gap:1em; padding:.75em .9em .45em} .ig-acts .mi{width:1.7em; height:1.7em} .ig-acts .end{margin-left:auto}
.ig-cap{display:grid; gap:.45em; padding:0 .9em} .ig-cap .ln{height:.5em}
.m-phone.dark .screen > img{position:absolute; inset:0}
.m-phone.dark .screen::after{content:""; position:absolute; inset:45% 0 0; background:linear-gradient(transparent, rgba(0,0,0,.75)); z-index:1}
.tt-top{position:absolute; z-index:3; top:8.2cqh; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:0 6%; font-weight:700}
.tt-top .live{font-size:.7em; border:.15em solid #fff; border-radius:.35em; padding:.05em .3em}
.tt-tabs{display:flex; gap:1em} .tt-tabs span{opacity:.65} .tt-tabs b{position:relative}
.tt-tabs b::after{content:""; position:absolute; left:30%; right:30%; bottom:-.45em; height:.18em; border-radius:2px; background:#fff}
.tt-top .mi{width:1.5em; height:1.5em}
.tt-rail{position:absolute; z-index:3; right:3%; bottom:21%; display:grid; gap:1em; justify-items:center; font-size:.78em; font-weight:700}
.tt-rail > span{display:grid; justify-items:center; gap:.1em} .tt-rail .mi{width:2.5em; height:2.5em}
.tt-rail .me{position:relative; width:3.3em; height:3.3em; border-radius:50%; background:var(--fg); border:.18em solid #fff; margin-bottom:.5em}
.tt-rail .me em{position:absolute; bottom:-.75em; left:50%; transform:translateX(-50%); width:1.5em; height:1.5em; border-radius:50%; background:#fe2c55; color:#fff; font-style:normal; display:grid; place-items:center; font-size:1em}
.tt-rail .disc{width:2.8em; height:2.8em; border-radius:50%; background:radial-gradient(circle, var(--brand) 22%, #111 23%, #2b2b2b 62%, #111 63%); animation:spin 5s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.tt-info{position:absolute; z-index:3; left:4%; right:22%; bottom:11.5%; display:grid; gap:.3em}
.tt-info b{font-weight:700} .tt-info .spn{justify-self:start; font-size:.78em; background:rgba(255,255,255,.22); padding:.05em .45em; border-radius:.3em}
.tt-cta{display:flex; justify-content:space-between; align-items:center; margin-top:.35em; background:#fff; color:#0a0a0a; border-radius:.35em; padding:.55em .8em; font-weight:700}
.tt-nav{position:absolute; z-index:4; left:0; right:0; bottom:0; height:8.8%; padding-bottom:1.6cqh; background:#000; display:flex; justify-content:space-around; align-items:center; font-size:.7em; font-weight:600; color:rgba(255,255,255,.7)}
.tt-nav b{color:#fff}
.tt-nav .plus{position:relative; width:3.2em; height:2.1em; border-radius:.55em; background:#fff; box-shadow:-.22em 0 0 #25f4ee, .22em 0 0 #fe2c55}
.tt-nav .plus::before{content:"+"; position:absolute; inset:0; display:grid; place-items:center; color:#000; font-weight:800; font-size:1.5em; line-height:1}
.vthumb{position:relative; border-radius:9px; overflow:hidden; background:#000}
.vthumb .dur{position:absolute; right:7px; bottom:7px; background:rgba(0,0,0,.75); color:#fff; font-size:10px; font-weight:700; padding:1px 6px; border-radius:4px}
.pm-app{position:relative; width:min(94%, 640px); aspect-ratio:16/10; max-height:88cqh; border-radius:14px; overflow:hidden; display:grid; grid-template-columns:22% 1fr}
.pm-app .side{background:var(--panel-2); padding:14px 12px; display:grid; gap:10px; align-content:start}
.pm-app .side .dot{width:18px; height:18px; border-radius:5px; background:var(--fg); margin-bottom:6px}
.pm-app .main{padding:16px; display:grid; gap:10px; align-content:start}
.pm-app .cards{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:6px}
.pm-app .cards i{height:54px; border-radius:8px; background:var(--bg-alt); border:1px solid var(--line)}
.pm-app::after{content:""; position:absolute; inset:0; background:rgba(13,17,27,.38)}
.pm-app .welcome{position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%); width:58%; background:var(--panel); border-radius:12px; padding:14px; display:grid; gap:10px; box-shadow:0 24px 60px -20px rgba(0,0,0,.6); font-size:12px}
.pm-app .welcome .vid{position:relative; border-radius:8px; overflow:hidden}
.pm-app .mrow{display:flex; justify-content:space-between; align-items:center}
.pm-app .mrow small{color:var(--muted)}
.pm-app .pill{background:var(--brand); color:#fff; padding:5px 12px; font-size:11px}
.shape-tag{position:absolute; top:14px; right:14px; z-index:3; font-size:.8rem; font-weight:700; background:var(--fg); color:var(--bg); padding:4px 10px; border-radius:7px; font-variant-numeric:tabular-nums}
@media (max-width: 560px){ .pm-web{grid-template-columns:1fr; padding:16px} .pm-web .copy, .pm-nav .ln{display:none} .place-tabs button{padding:8px 12px 8px 10px; font-size:.9rem} }

/* About Thom */
.about{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(36px,5vw,96px); align-items:center}
@media (max-width: 900px){ .about{grid-template-columns:minmax(0,1fr)} }
.portrait{position:relative; aspect-ratio:4/5; border-radius:var(--r); overflow:hidden; background:var(--panel-2); display:grid; place-items:center; max-width:620px; width:100%}
.portrait img{width:100%; height:100%; object-fit:cover}
.portrait .initial{font-family:var(--f-display); font-weight:700; font-size:8rem; color:var(--fg); opacity:.08}
.portrait .ph-note{position:absolute; top:14px; left:14px; right:14px}
.about-copy{display:grid; gap:22px}
.about-copy p{font-size:1.15rem; line-height:1.65; max-width:48ch}
.sign{font-family:var(--f-hand); font-size:2.3rem; color:var(--accent-text); line-height:1}
.fitrow{display:grid; gap:12px; margin-top:8px; padding-top:24px; border-top:1px solid var(--line)}
.fitrow div{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.fitrow b{font-size:.95rem; font-weight:550; min-width:96px}
.fitrow span{font-size:.92rem; padding:5px 12px; border-radius:var(--r-sm); background:var(--panel); border:1px solid var(--line); color:var(--fg); font-weight:500}
.fitrow .no span{background:transparent; color:var(--muted); border-style:dashed}

/* Pricing */
.plans{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; align-items:stretch}
@media (max-width: 960px){ .plans{grid-template-columns:minmax(0,1fr)} }
.plan{border:2px solid transparent; border-radius:var(--r); padding:clamp(26px,2.6vw,36px); display:grid; gap:22px; grid-template-rows:auto auto 1fr auto; background:var(--bg-alt); position:relative}
.plan.best{border-color:var(--fg); background:var(--panel)}
:root[data-theme="dark"] .editor{box-shadow:inset 0 0 0 1px var(--line)}
.plan .badge{position:absolute; top:-14px; left:clamp(26px,2.6vw,36px); background:var(--fg); color:var(--bg); font-size:.82rem; font-weight:700; padding:5px 12px; border-radius:var(--r-sm)}
.plan .name{font-family:var(--f-display); font-weight:700; font-size:1.35rem; letter-spacing:-.01em}
.plan .for{color:var(--muted)}
.price{display:flex; align-items:baseline; gap:8px; padding-bottom:22px; border-bottom:1px solid var(--line)}
.price b{font-family:var(--f-display); font-size:clamp(2.4rem,3.4vw,3rem); font-weight:700; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.price span{color:var(--muted)}
.plan ul{margin:0; padding:0; display:grid; gap:10px; align-content:start}
.plan li, .incl-grid li{list-style:none; display:flex; gap:10px; align-items:flex-start}
.plan li::before, .incl-grid li::before{content:""; flex:none; width:18px; height:18px; margin-top:4px; background:currentColor; opacity:.9; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.incl{margin-top:clamp(16px,2vw,24px); border-radius:var(--r); background:var(--lilac); color:var(--on-color); padding:clamp(28px,3.4vw,52px); display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,2fr); gap:clamp(24px,3vw,40px) clamp(32px,5vw,96px); align-items:start}
.incl-h{font-family:var(--f-serif); font-weight:400; font-size:clamp(1.9rem,3vw,2.8rem); line-height:1.08; letter-spacing:-.01em; color:var(--on-color)}
.incl-grid{margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px clamp(24px,3vw,48px)}
.incl-grid li{font-weight:500; font-size:1.08rem; line-height:1.4}
.terms{grid-column:1 / -1; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px clamp(24px,3vw,48px); padding-top:clamp(20px,2.4vw,32px); border-top:1px solid rgba(29,29,29,.18)}
.terms > div{display:flex; gap:12px; align-items:center; color:rgba(29,29,29,.82); line-height:1.4}
.ti{width:36px; height:36px; flex:none; border-radius:999px; background:rgba(255,255,255,.55); color:#1d1d1d; display:grid; place-items:center}
.ti svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.terms .ph-note{margin-top:6px}
@media (max-width: 1000px){ .incl{grid-template-columns:minmax(0,1fr)} .incl-grid{grid-template-columns:repeat(2, minmax(0,1fr))} .terms{grid-template-columns:minmax(0,1fr)} }
@media (max-width: 560px){ .incl-grid{grid-template-columns:minmax(0,1fr)} .incl{padding:22px 20px} }
/* Build your own package: choices left, a live quote on the right */
.build{margin:clamp(40px,5vw,64px) auto 0; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); border-radius:var(--r); overflow:hidden; border:0; background:var(--bg-alt)}
@media (max-width: 880px){ .build{grid-template-columns:minmax(0,1fr)} .receipt{border-left:0; border-top:1px solid var(--line)} }
.build-in{padding:clamp(24px,3vw,36px); display:grid; gap:24px; align-content:start}
.build-in h3{font-size:clamp(1.5rem,2.2vw,1.85rem); font-weight:700; letter-spacing:-.01em}
.bq{display:grid; gap:10px}
.bq-l{font-weight:550}
.bq small{font-size:.9rem}
.stepper.big{border-radius:var(--r-sm)}
.stepper.big button{width:52px; height:52px; font-size:1.4rem; color:var(--fg); font-weight:400}
.stepper.big output{min-width:64px; font-size:1.6rem}
.fmt-inc{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.fmt-inc span{display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:var(--r-sm); background:var(--panel); border:1px solid var(--line); color:var(--fg); font-weight:500; font-size:.92rem; font-variant-numeric:tabular-nums}
.fmt-inc i{display:inline-block; border:1.5px solid currentColor; border-radius:2px}
.fmt-inc em{font-style:normal; font-weight:450; color:var(--muted); font-size:.92rem; margin-left:4px}
#langChips .chip{display:inline-flex; align-items:center; gap:6px}
#langChips .chip{background:var(--panel)}
#langChips .chip[aria-pressed="true"]{background:var(--fg); border-color:var(--fg); color:var(--bg); font-weight:500}
#langChips .chip[aria-pressed="true"]::before{content:none}
#langChips .chip.more{border-style:dashed; color:var(--muted); font-weight:450}
.receipt{background:var(--panel-2); color:var(--fg); padding:clamp(24px,3vw,34px); display:grid; gap:14px; align-content:start; position:relative}
.r-title{font-family:var(--f-display); font-weight:700; font-size:1.3rem; letter-spacing:-.01em}
.r-lines{margin:0; padding:0; display:grid; gap:0}
.r-lines li{list-style:none; display:flex; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); font-size:1.02rem}
.r-lines li span:first-child{color:var(--muted)}
.r-lines li span:last-child{font-weight:500; font-variant-numeric:tabular-nums; text-align:right}
.r-lines li.inc span:last-child{color:var(--ok)}
.r-total{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-top:6px}
.r-total span{color:var(--muted)}
.r-total b{font-family:var(--f-display); font-weight:700; font-size:clamp(2.2rem,3.4vw,2.9rem); letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums; color:var(--fg)}
.receipt .save{color:var(--fg); font-weight:500; min-height:1.4em}
.receipt .btn{width:100%}
.receipt small{color:var(--muted); text-align:center}
.field-label{font-weight:550; display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px 10px}
.field-label small{color:var(--muted); font-weight:400; font-size:.95rem}
.stepper{justify-self:start; display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; background:var(--panel)}
.stepper button{width:46px; height:46px; border:0; background:none; font-size:1.3rem; cursor:pointer}
.stepper output{min-width:48px; text-align:center; font-family:var(--f-display); font-weight:600; font-size:1.2rem}
.chip-row{display:flex; flex-wrap:wrap; gap:8px}
.chip{border:1px solid var(--line); background:var(--panel); border-radius:var(--r-sm); padding:8px 16px; min-height:42px; font-size:.95rem; font-weight:500; cursor:pointer}
.chip[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.total{font-family:var(--f-display); font-weight:600; font-size:2.2rem; line-height:1; font-variant-numeric:tabular-nums}
.save{color:var(--fg); font-weight:500; font-size:1rem}

/* FAQ */
#faq{padding-block:clamp(64px,8vw,96px)}
.faq{display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(32px,5vw,96px); align-items:start}
@media (max-width: 800px){ .faq{grid-template-columns:1fr} }
.faq details{border-top:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; padding:22px 2px; font-family:var(--f-display); font-weight:600; font-size:1.15rem; line-height:1.35; display:flex; justify-content:space-between; gap:16px; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-size:1.6rem; font-weight:400; line-height:1; color:var(--fg); transition:transform .25s; flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 2px 24px; color:var(--muted); font-size:1.05rem; max-width:54ch}

/* Form: one question per screen */
.brief{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,96px); align-items:center}
@media (max-width: 900px){ .brief{grid-template-columns:minmax(0,1fr)} }
#brief{background:var(--studio); color:#ffffff; --fg:#ffffff; --muted:#b0aaa6; --line:#3a3a3a; --panel:#262626; --panel-2:#2e2e2e}
.brief-intro{display:grid; gap:24px}
.brief-intro .lede{color:var(--fg)}
.contact{display:flex; gap:12px; align-items:center}
.contact .face{width:52px; height:52px; font-size:1.1rem; background:#1c1c1c; color:#fafafa}
.contact small{display:block; color:var(--muted)}
.promises{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin:0; padding:0}
.promises li{list-style:none; display:flex; gap:12px; align-items:center; font-weight:450; font-size:1.02rem; line-height:1.35; padding:14px 0; border-top:1px solid var(--line)}
@media (max-width: 520px){ .promises{grid-template-columns:minmax(0,1fr)} }
.promises .fi{width:28px; height:28px; color:var(--muted); display:grid; place-items:center; flex:none}
.promises .fi svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.bubble-say{position:relative; background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:16px 20px; box-shadow:var(--shadow); max-width:420px}
.bubble-say::before{content:""; position:absolute; left:28px; top:-9px; width:16px; height:16px; background:var(--panel); border-left:1px solid var(--line); border-top:1px solid var(--line); transform:rotate(45deg)}
.formcard{border-radius:var(--r); background:#fff; color:#1d1d1d; --fg:#1d1d1d; --muted:#4f4a47; --line:#e6dfdb; --bg:#fff; --panel:#fff; --panel-2:#efe9e6; --accent:#1d1d1d; --accent-ink:#fff; --accent-soft:rgba(29,29,29,.06); padding:clamp(28px,3.5vw,48px); min-height:380px; display:grid}
.prog{display:flex; align-items:center; gap:12px; color:var(--muted); font-size:.95rem; margin-bottom:22px}
.prog .t{flex:1; height:4px; border-radius:0; background:var(--panel-2); overflow:hidden}
.prog .t i{display:block; height:100%; background:var(--accent); border-radius:0; width:33%; transition:width .4s cubic-bezier(.2,.9,.2,1)}
.qstep{display:grid; gap:18px; align-content:start; animation:stepIn .45s cubic-bezier(.2,.9,.2,1) both}
@keyframes stepIn{from{transform:translateX(16px); opacity:0}}
.qstep h3{font-size:clamp(1.5rem,2.2vw,1.9rem); font-weight:700; letter-spacing:-.01em; line-height:1.15}
.field{display:grid; gap:8px}
.field label{font-weight:500}
.field .opt{color:var(--muted); font-weight:400}
input[type=text], input[type=email], input[type=url], textarea{width:100%; min-height:54px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--bg); color:var(--fg); padding:12px 16px; font:inherit; font-size:1.05rem; transition:border-color .2s, box-shadow .2s}
input:focus, textarea:focus{outline:none; border-color:var(--fg); box-shadow:0 0 0 3px var(--accent-soft)}
.field.err input{border-color:var(--bad)}
.err-msg{color:var(--bad); font-size:.95rem; display:none}
.field.err .err-msg{display:block}
.options{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (max-width: 480px){ .options{grid-template-columns:1fr} }
.options button{min-height:60px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--panel); font-weight:500; font-size:1.02rem; cursor:pointer; text-align:left; padding:12px 16px; transition:border-color .2s, background .2s}
.options button:hover{border-color:var(--fg)}
.options button[aria-pressed="true"]{border-color:var(--fg); background:var(--fg); color:#fff}
.f-nav{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:6px}
.back{background:none; border:0; color:var(--muted); cursor:pointer; text-decoration:underline; min-height:44px; padding:0}
.picked{padding:10px 14px; border-radius:var(--r-sm); background:var(--accent-soft); font-size:1rem; display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.picked button{background:none; border:0; text-decoration:underline; cursor:pointer; color:var(--muted); padding:0}
.fine{color:var(--muted); font-size:.92rem}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.thanks{display:grid; gap:14px; align-content:center; justify-items:start}
.thanks h3{font-size:clamp(1.6rem,2.4vw,2rem); font-weight:700; letter-spacing:-.01em}

footer{background:var(--bg-alt); color:var(--muted); padding-block:clamp(56px,7vw,96px) 16px; font-size:.95rem; overflow:hidden}
footer a{color:var(--fg)}
footer .logo{display:none}
@media (max-width: 760px){ footer{padding-bottom:110px} }
.foot{display:flex; flex-wrap:wrap; gap:16px 32px; justify-content:space-between; align-items:flex-end}

.sticky{position:fixed; left:0; right:0; bottom:0; z-index:40; padding:10px max(16px, env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px, env(safe-area-inset-left,0px)); background:color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-top:1px solid var(--line); display:none; transition:transform .35s cubic-bezier(.2,.9,.2,1)}
.sticky.away{transform:translateY(110%)}
.sticky .btn{width:100%}
@media (max-width: 760px){ .sticky{display:block} }

.modal{position:fixed; inset:0; z-index:80; background:rgba(4,6,10,.88); display:grid; place-items:center; padding:max(16px, env(safe-area-inset-top,0px)) max(16px, env(safe-area-inset-right,0px)) max(16px, env(safe-area-inset-bottom,0px)) max(16px, env(safe-area-inset-left,0px)); animation:fade .25s both}
@keyframes fade{from{opacity:0}}
.modal-in{width:min(1100px, 100%); display:grid; gap:12px}
.modal video{width:100%; aspect-ratio:16/9; background:#000; border-radius:var(--r-sm)}
.modal-bar{display:flex; justify-content:space-between; gap:12px; align-items:center; color:#fff; flex-wrap:wrap}
.modal-bar a{color:#fff}
.modal .x{background:#fff; color:#000; border:0; border-radius:var(--r-sm); min-height:44px; padding:8px 18px; cursor:pointer; font-weight:650}

@media (prefers-reduced-motion: reduce){
  .tt-rail .disc{animation:none}
  .ed-ph{animation:none}
  *,*::before,*::after{animation-duration:.001ms!important; transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}

/* Studiotale direction: centred section heads, outlined header button */
#work .head, #channels .head{margin-inline:auto; text-align:center; justify-items:center}
.get-top > div:first-child{margin-inline:auto; text-align:center}
.get-top > div:first-child p{margin-inline:auto; max-width:52ch}
#work .head p, #channels .head p, .head.center p, .get-top > div:first-child p{text-wrap:balance}
.top .btn-primary{background:transparent; color:var(--fg); border-color:var(--fg)}
.top .btn-primary:hover{background:var(--fg); color:var(--bg); opacity:1}

/* Essence of thinkinggifts.com: hand-drawn underline, pills, a big serif voice, giant wordmark */
.mark::after{content:""; position:absolute; left:-1%; right:-1%; bottom:.02em; height:.13em; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8.5C55 5.5 105 9.5 160 6.5S250 4.8 297 7.5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8.5C55 5.5 105 9.5 160 6.5S250 4.8 297 7.5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.about-copy p:not(.muted){font-family:var(--f-serif); font-size:1.4rem; line-height:1.45}
.chip, .chips span, .fitrow span, .plan .badge, .fmt-inc span, .shapes span, .editor .shapes span, .ch-fmt span, .theme-t, .lang, .lang button, .ex{border-radius:999px}
.wordmark{font-family:var(--f-display); font-weight:700; font-size:calc(100cqw / 3.5); line-height:.78; letter-spacing:-.05em; color:var(--fg); text-align:left; white-space:nowrap; margin:clamp(48px,7vw,96px) 0 0 -.032em; user-select:none}

/* Colour layer (thinkinggifts.com): big flat tiles in yellow, lilac and blue with black serif text.
   Everything else stays black, white and warm grey. Remove this block to go back to monochrome. */
.why3 .w{min-height:190px; padding:clamp(26px,2.6vw,36px); color:var(--on-color)}
.why3 .w:nth-child(1){background:var(--red)}
.why3 .w:nth-child(2){background:var(--lilac)}
.why3 .w:nth-child(3){background:var(--blue)}
.why3 b{font-family:var(--f-serif); font-weight:400; font-size:clamp(1.6rem,2.3vw,2rem); color:var(--on-color)}
.why3 .w-t{color:rgba(29,29,29,.8)}
.poster.made{color:var(--on-color)}
.poster.made b{font-family:var(--f-serif); font-weight:400; font-size:clamp(1.4rem,2.2vw,1.8rem)}
.plan.best{background:var(--yellow); border-color:transparent; color:var(--on-color); --fg:#1d1d1d; --muted:rgba(29,29,29,.72); --line:rgba(29,29,29,.18)}
.plan.best .badge{background:#1d1d1d; color:#fff}
.plan.best .btn-primary{background:#1d1d1d; border-color:#1d1d1d; color:#fff}
.studio, .editor{--brand:var(--yellow)}
.editor .shapes span.on{border-color:var(--yellow); background:var(--yellow); color:var(--on-color)}
.top .btn-primary{background:var(--yellow); border-color:var(--yellow); color:var(--on-color)}
.top .btn-primary:hover{background:#1d1d1d; border-color:#1d1d1d; color:#fff}
footer{background:var(--yellow); color:rgba(29,29,29,.72); --fg:#1d1d1d}
footer a{color:#1d1d1d}

/* Full width (thinkinggifts.com): narrow page margins, 20px gutters, bigger tiles */
.wm-wrap{container-type:inline-size}
.why3{gap:20px}
.why3 .w{display:grid; min-height:clamp(220px, 19vw, 340px); padding:clamp(26px,2.4vw,44px)}
.why3 .w > div{display:block}
@media (max-width: 900px){ .why3 .w{min-height:160px} }
.why3 b{font-size:clamp(1.8rem, 2.6vw, 2.8rem)}
.why3 .w-t{font-size:clamp(1.05rem, 1.1vw, 1.25rem); max-width:30ch}
@container (min-width: 920px) and (min-height: 600px){ .m-chrome, .m-yt, .m-gmail, .m-meet, .pm-app{zoom:1.3} }

/* Blocks (whatworks.com.au): rounded panels almost edge to edge with white space between them,
   big work cards, questions as full-width rows. The hero keeps its two columns. */

/* Inside the white sheet: plain sections on white, the two dark ones run edge to edge */
#work, #about, #faq{background:transparent}
.studio, #brief{margin-inline:0; border-radius:0}
footer{margin-top:var(--pad); border-radius:24px 24px 0 0}

.cases{grid-template-columns:repeat(2, minmax(0,1fr))}
.case:first-child{grid-column:1 / -1}
.case:first-child .poster{aspect-ratio:16/9}
.case:first-child h3{font-size:clamp(1.4rem, 2vw, 1.9rem)}
@media (max-width: 900px){ .cases{grid-template-columns:minmax(0,1fr)} .case:first-child .poster{aspect-ratio:16/10} }

.faq{grid-template-columns:minmax(0,1fr); margin-inline:calc(-1 * var(--pad))}
.faq details{padding-inline:var(--pad)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{font-size:clamp(1.25rem, 2.1vw, 2rem); font-weight:500; letter-spacing:-.01em; padding:clamp(22px,2.4vw,36px) 0}
.faq summary::after{content:""; width:clamp(20px,1.8vw,28px); height:clamp(20px,1.8vw,28px); background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v16M5 13l7 7 7-7' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v16M5 13l7 7 7-7' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq details p{font-size:1.15rem; max-width:64ch; padding:0 0 clamp(24px,2.4vw,36px)}

/* Hand-drawn doodles in the three tiles: wobbling lines (SVG turbulence with a stepping seed), they draw
   themselves when the tiles scroll into view, then each keeps a small idle loop */
.dd-defs{position:absolute; width:0; height:0; overflow:hidden}
.why3 .w{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:clamp(14px,1.6vw,24px)}
.why3 .w-t{margin-inline:auto; text-wrap:balance}
.doodle{display:block; width:clamp(150px, 15vw, 260px); height:auto; margin:0; overflow:visible; color:var(--on-color); fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}
.doodle .dd-hub{fill:currentColor; stroke:none}
.pending .doodle .ln{stroke-dasharray:1 1; stroke-dashoffset:1}
.go .doodle .ln{stroke-dasharray:1 1; animation:dd-draw 1s cubic-bezier(.6,0,.25,1) var(--d,0s) both}
@keyframes dd-draw{from{stroke-dashoffset:1} to{stroke-dashoffset:0}}
.dd-swing{transform-origin:80px 4px; animation:dd-swing 2.6s ease-in-out infinite alternate}
@keyframes dd-swing{from{transform:rotate(-9deg)} to{transform:rotate(9deg)}}
.dd-spark path{transform-box:fill-box; transform-origin:center; animation:dd-spark 1.6s ease-in-out infinite}
.dd-spark path:nth-child(2){animation-delay:.25s} .dd-spark path:nth-child(3){animation-delay:.5s}
.dd-spark path:nth-child(4){animation-delay:.8s} .dd-spark path:nth-child(5){animation-delay:1.05s}
@keyframes dd-spark{0%,100%{opacity:0; transform:scale(.3)} 45%,60%{opacity:1; transform:scale(1)}}
.dd-tick{transform-origin:80px 68px; animation:dd-jitter .35s ease-in-out infinite alternate}
@keyframes dd-jitter{from{transform:rotate(-2.5deg)} to{transform:rotate(2.5deg)}}
.dd-hand{transform-origin:80px 68px; animation:dd-spin 1.8s steps(12) infinite}
@keyframes dd-spin{to{transform:rotate(360deg)}}
.dd-speed{stroke-dasharray:.45 .55; animation:dd-zip .6s linear infinite}
.dd-speed:nth-child(2){animation-delay:-.2s} .dd-speed:nth-child(3){animation-delay:-.4s}
@keyframes dd-zip{from{stroke-dashoffset:0} to{stroke-dashoffset:1}}
.dd-chute{transform-origin:80px 24px; animation:dd-sway 3s ease-in-out infinite alternate}
@keyframes dd-sway{from{transform:translateY(-4px) rotate(-7deg)} to{transform:translateY(4px) rotate(7deg)}}
.dd-wind path{stroke-dasharray:.55 .45; animation:dd-zip 1.4s linear infinite}
.dd-wind path:nth-child(2){animation-delay:-.7s}
@media (prefers-reduced-motion: reduce){ .doodle *{animation:none!important} }

/* Doodles in "Alles inbegrepen": same hand-drawn style, centred cards */
.feats li{justify-items:center; text-align:center; align-content:center}
.feats .doodle{width:clamp(130px, 11vw, 190px); color:var(--fg); stroke-width:3}
.feats div span{text-wrap:balance}
.dd-write path, .dd-paint path, .dd-check path{stroke-dasharray:1 1; stroke-dashoffset:1; animation:dd-write 3.6s ease-in-out infinite}
.dd-write path:nth-child(2){animation-delay:.35s} .dd-write path:nth-child(3){animation-delay:.7s}
.dd-write path:nth-child(4){animation-delay:1.05s} .dd-write path:nth-child(5){animation-delay:1.4s}
.dd-paint path{stroke-width:5; animation-duration:3s}
.dd-check path{stroke-width:4; animation-duration:2.8s}
@keyframes dd-write{0%{stroke-dashoffset:1; opacity:1} 30%{stroke-dashoffset:0} 82%{stroke-dashoffset:0; opacity:1} 100%{stroke-dashoffset:0; opacity:0}}
.dd-pencil{transform-origin:118px 86px; animation:dd-scribble .45s ease-in-out infinite alternate}
@keyframes dd-scribble{from{transform:rotate(-7deg) translate(-2px,1px)} to{transform:rotate(5deg) translate(2px,-1px)}}
.dd-wave path{transform-box:fill-box; transform-origin:left center; animation:dd-pulse 1.2s ease-out infinite}
.dd-wave path:nth-child(2){animation-delay:.3s}
@keyframes dd-pulse{0%{opacity:0; transform:scale(.7)} 40%{opacity:1} 100%{opacity:0; transform:scale(1.15)}}
.dd-note{transform-origin:46px 36px; animation:dd-note 1.1s ease-in-out infinite alternate}
@keyframes dd-note{from{transform:translateY(3px) rotate(-8deg)} to{transform:translateY(-5px) rotate(8deg)}}
.dd-morph{transform-origin:80px 60px; animation:dd-morph 4.8s cubic-bezier(.7,0,.2,1) infinite}
@keyframes dd-morph{0%,22%{transform:scale(1,1)} 33%,55%{transform:scale(.58,1.62)} 66%,88%{transform:scale(.8,1.3)} 100%{transform:scale(1,1)}}
.dd-shout{transform-origin:40px 60px; animation:dd-jitter .3s ease-in-out infinite alternate}
.dd-bob{transform-origin:80px 60px; animation:dd-bob 2.4s ease-in-out infinite alternate}
@keyframes dd-bob{from{transform:translateY(-3px) rotate(-3deg)} to{transform:translateY(3px) rotate(3deg)}}

/* Header hides on the way down, returns on the way up */
.top{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.top.hide{transform:translateY(calc(-100% - 2px))}
.top.hide:focus-within{transform:none}

/* Footer reveal: the page is a sheet that slides up off a full-screen yellow footer */
main{position:relative; z-index:1; background:var(--bg); padding-bottom:var(--pad); border-radius:0 0 var(--sheet-r) var(--sheet-r); box-shadow:0 40px 80px -40px rgba(0,0,0,.45)}
footer{position:sticky; bottom:0; z-index:0; min-height:100svh; margin-top:0; border-radius:0; display:flex; flex-direction:column; gap:clamp(20px,2.4vw,36px); padding:clamp(40px,6vh,88px) 0 clamp(8px,1vw,16px); font-size:1rem}
footer.flat{position:relative}
footer > .wrap{width:100%}
@media (max-width: 760px){ footer{padding-bottom:12px} }
footer .btn-primary{background:#1d1d1d; border-color:#1d1d1d; color:#fff}
.foot-main{display:grid; grid-template-columns:minmax(0,1.3fr) auto minmax(0,.7fr); gap:clamp(24px,4vw,64px); align-items:center; flex:1; opacity:calc(.15 + var(--p,1) * .85); transform:translateY(calc((1 - var(--p,1)) * 60px))}
.foot-cta{display:grid; gap:clamp(20px,2.4vw,32px); justify-items:start}
.foot-h{font-family:var(--f-serif); font-weight:400; font-size:clamp(2.3rem, 4.6vw, 4.6rem); line-height:1.05; letter-spacing:-.01em; color:#1d1d1d; max-width:13ch}
.foot-doodle{width:clamp(140px, 15vw, 260px); color:#1d1d1d}
.foot-nav{display:grid; gap:clamp(4px,.6vw,10px); justify-items:end}
.foot-nav a{font-family:var(--f-display); font-weight:500; font-size:clamp(1.3rem, 2.1vw, 2.1rem); text-decoration:none; color:#1d1d1d; transition:opacity .2s}
.foot-nav a:hover{opacity:.55}
.foot-top{display:inline-flex; align-items:center; gap:10px; margin-top:clamp(8px,1vw,16px)}
.foot-arrow{width:1.1em; height:1.1em; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; animation:dd-up 1.2s ease-in-out infinite alternate}
@keyframes dd-up{from{transform:translateY(3px)} to{transform:translateY(-4px)}}
.wm-wrap{margin-top:auto}
.wordmark{margin-top:0; transform:translateY(calc((1 - var(--p,1)) * 55%))}
.dd-clap{transform-origin:40px 54px; animation:dd-clap 2.4s ease-in-out infinite}
@keyframes dd-clap{0%,55%{transform:rotate(-24deg)} 63%{transform:rotate(0)} 68%{transform:rotate(-5deg)} 73%{transform:rotate(0)} 100%{transform:rotate(-24deg)}}
.dd-clapspark path{opacity:0; animation:dd-clapspark 2.4s ease-out infinite}
@keyframes dd-clapspark{0%,60%{opacity:0} 64%{opacity:1} 80%,100%{opacity:0}}
footer.wait:not(.go) .foot-doodle .ln{stroke-dasharray:1 1; stroke-dashoffset:1}
footer.go .foot-doodle .ln{stroke-dasharray:1 1; animation:dd-draw 1s cubic-bezier(.6,0,.25,1) var(--d,0s) both}
@media (max-width: 900px){
  .foot-main{grid-template-columns:minmax(0,1fr); justify-items:start; gap:28px}
  .foot-doodle{order:-1; width:130px}
  .foot-nav{justify-items:start}
}
@media (prefers-reduced-motion: reduce){ .foot-main, .wordmark{transform:none; opacity:1} footer .foot-doodle .ln{stroke-dashoffset:0} }

/* The footer lies under the whole page, so everything above main must sit on top of it */
.usp-bar{position:relative; z-index:2}
.top{background:var(--bg)}

/* Subtle scroll effects: content rises in as it enters, hero video drifts */
html.rv .rv-item{opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--rv,0ms), transform .9s cubic-bezier(.2,.7,.2,1) var(--rv,0ms)}
html.rv .rv-item.in{opacity:1; transform:none}
.stage-hero{transform:translateY(var(--hy,0px))}
@media (prefers-reduced-motion: reduce){ html.rv .rv-item{opacity:1; transform:none} .stage-hero{transform:none} }

/* Work: with a mouse the info sits on the video and slides up on hover; on touch screens it stays below */
.case{position:relative}
.case-info{display:grid; gap:8px; justify-items:start}
@media (hover: hover) and (pointer: fine){
  .case-info{position:absolute; left:0; right:0; bottom:0; padding:clamp(48px,6vw,96px) clamp(20px,2.4vw,36px) clamp(20px,2.4vw,32px); border-radius:0 0 var(--r) var(--r); background:linear-gradient(rgba(10,10,10,0), rgba(10,10,10,.8)); color:#fff; pointer-events:none; opacity:0; transform:translateY(14px); transition:opacity .35s ease, transform .5s cubic-bezier(.2,.8,.2,1)}
  .case-info h3{color:#fff}
  .case-info p{color:rgba(255,255,255,.85); max-width:56ch}
  .case-info .chips span{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3); color:#fff}
  .case-info .ex{background:rgba(255,255,255,.18); color:#fff}
  .case:hover .case-info, .case:focus-within .case-info{opacity:1; transform:none}
  .case .pp, .poster.made b{transition:opacity .3s ease, transform .45s cubic-bezier(.2,.8,.2,1)}
  .case:hover .pp, .case:focus-within .pp{opacity:0}
  .case:hover .poster.made b{opacity:0; transform:translateY(-12px)}
}

/* Hero fills the first screen under the menu with text and video centred in it; no line under the menu */
.top{border-bottom:0}
.top.scrolled{box-shadow:0 12px 30px -24px rgba(0,0,0,.35)}
@media (min-width: 901px){
  .hero{min-height:calc(100svh - var(--chrome, 124px) - clamp(28px, 4.5vh, 52px)); display:flex; align-items:center; padding-block:clamp(16px, 3.5vh, 48px)}
  .hero > .hero-grid{width:100%}
  .why3{margin-top:0}
  .frame-area{height:max(220px, min(clamp(240px, 30vw, 520px), calc(100svh - var(--chrome, 124px) - 250px)))}
}

/* Blocks on yellow: black bar full width on top, the menu straight on the yellow, the hero as its own
   white card, then the rest of the page as one white sheet that slides off the yellow footer */
:root{--frame:clamp(6px, 1.4vw, 24px); --sheet-r:clamp(18px, 2.6vw, 40px)}
body{background:var(--yellow)}
.top{background:var(--yellow); --fg:#1d1d1d; --bg:#fff; --panel:#fff; --line:rgba(29,29,29,.14); --muted:rgba(29,29,29,.7); color:#1d1d1d}
.top .wrap{padding-left:calc(var(--frame) + var(--pad)); padding-right:calc(var(--frame) + var(--pad))}
.top .btn-primary{background:#1d1d1d; border-color:#1d1d1d; color:#fff}
.top .btn-primary:hover{background:#000; border-color:#000; color:#fff}
main{background:transparent; border-radius:0; box-shadow:none; padding-bottom:0}
.hero{background:transparent; --fg:#1d1d1d; --muted:rgba(29,29,29,.74); color:#1d1d1d}
.hero .btn-primary{background:#1d1d1d; border-color:#1d1d1d; color:#fff}
.hero .btn-ghost{background:transparent; border-color:#1d1d1d; color:#1d1d1d}
.hero .btn-ghost:hover{background:#1d1d1d; color:#fff}
.sheet{position:relative; margin:0 var(--frame); padding:clamp(20px,2.4vw,36px) 0 0; overflow:clip; border-radius:var(--sheet-r); background:var(--bg); box-shadow:0 40px 80px -40px rgba(0,0,0,.45)}
/* the footer lies under everything: its content only appears while it is being revealed */
.foot-main, footer > .foot, .wm-wrap{opacity:var(--p,1)}

/* "Alles inbegrepen" without card backgrounds: just the drawings and the text */
.feats{row-gap:clamp(28px,3vw,48px)}
.feats li{background:transparent; padding:clamp(8px,1.2vw,16px)}

/* Chat with Thom: a round icon button; the label slides out to the left on hover */
.chat-fab{position:fixed; right:max(18px, calc(var(--frame) + 12px)); bottom:max(18px, calc(var(--frame) + 12px)); z-index:60; display:flex; align-items:center; height:60px; padding:0 13px; border:0; border-radius:999px; background:#1d1d1d; color:#fff; font-family:var(--f-display); font-weight:600; font-size:1rem; cursor:pointer; box-shadow:0 14px 30px -12px rgba(0,0,0,.5); transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.chat-fab:hover{transform:translateY(-2px)}
.chat-fab svg{flex:none; width:34px; height:34px; fill:none; stroke:var(--yellow); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; animation:dd-bob 2.4s ease-in-out infinite alternate}
.chat-fab-l{max-width:0; overflow:hidden; white-space:nowrap; opacity:0; transition:max-width .45s cubic-bezier(.16,1,.3,1), margin .45s cubic-bezier(.16,1,.3,1), opacity .2s ease}
.chat-fab:hover .chat-fab-l, .chat-fab:focus-visible .chat-fab-l{max-width:12em; margin:0 9px 0 10px; opacity:1; transition:max-width .5s cubic-bezier(.16,1,.3,1), margin .5s cubic-bezier(.16,1,.3,1), opacity .3s ease .1s}
html.chat-open .chat-fab-l{display:none}
.chat-panel{position:fixed; right:max(18px, calc(var(--frame) + 12px)); bottom:calc(max(18px, calc(var(--frame) + 12px)) + 72px); z-index:70; width:min(380px, calc(100vw - 24px)); max-height:min(620px, calc(100svh - 120px)); display:flex; flex-direction:column; border-radius:22px; overflow:hidden; background:#fff; color:#1d1d1d; box-shadow:0 30px 70px -24px rgba(0,0,0,.45); animation:chat-in .3s cubic-bezier(.2,.8,.2,1) both; --fg:#1d1d1d; --muted:#4f4a47; --line:#e6dfdb; --bg:#fff; --panel:#fff}
.chat-panel[hidden]{display:none}
section.chat-panel{padding:0}
@keyframes chat-in{from{opacity:0; transform:translateY(14px) scale(.98)}}
.chat-head{display:flex; align-items:center; gap:12px; padding:16px 16px 16px 18px; background:var(--yellow)}
.chat-head .face{width:42px; height:42px; background:#1d1d1d; color:#fff; font-size:1rem}
.chat-head b{display:block; font-family:var(--f-display); font-size:1.1rem}
.chat-head small{display:block; color:rgba(29,29,29,.72); font-size:.85rem}
.chat-x{margin-left:auto; width:36px; height:36px; border:0; border-radius:999px; background:rgba(255,255,255,.6); color:#1d1d1d; font-size:1.4rem; line-height:1; cursor:pointer}
.chat-log{flex:1; overflow-y:auto; padding:18px 16px; display:flex; flex-direction:column; gap:10px; background:#f8f4f2}
.chat-msg{max-width:85%; padding:10px 14px; border-radius:18px; font-size:.98rem; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere}
.chat-msg.thom{align-self:flex-start; background:#fff; border-bottom-left-radius:6px}
.chat-msg.visitor{align-self:flex-end; background:#1d1d1d; color:#fff; border-bottom-right-radius:6px}
.chat-chips{display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; margin-top:4px}
.chat-chips button{border:1.5px solid #1d1d1d; background:transparent; border-radius:999px; padding:7px 13px; font:inherit; font-size:.9rem; font-weight:500; cursor:pointer}
.chat-chips button:hover{background:#1d1d1d; color:#fff}
.chat-cta{align-self:flex-start}
.chat-mail{display:grid; gap:8px; background:#fff; border-radius:16px; padding:12px}
.chat-mail input{min-height:44px; font-size:.98rem}
.chat-err{color:#b3261e; font-size:.88rem}
.chat-form{display:flex; gap:8px; align-items:flex-end; padding:12px; border-top:1px solid #efe9e6; background:#fff}
.chat-form textarea{flex:1; min-height:46px; max-height:120px; resize:none; border-radius:14px; padding:12px 14px; font-size:.98rem}
.chat-send{flex:none; width:46px; height:46px; border:0; border-radius:999px; background:#1d1d1d; color:#fff; display:grid; place-items:center; cursor:pointer}
.chat-send svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round}
@media (max-width: 760px){
  .chat-fab{bottom:86px; right:12px; height:54px; padding:0 13px}
  .chat-fab-l{display:none}
  .chat-panel{right:8px; left:8px; width:auto; bottom:8px; max-height:calc(100svh - 16px)}
  html.chat-open .chat-fab{display:none}
}

/* Mobile CTA bar: no background, and only after the hero has scrolled away */
.sticky{background:transparent; border-top:0; -webkit-backdrop-filter:none; backdrop-filter:none; pointer-events:none}
.sticky .btn{pointer-events:auto; box-shadow:0 12px 28px -10px rgba(0,0,0,.45)}
.sticky:not(.shown){transform:translateY(130%)}

/* The three colour tiles sit loose on the yellow, between the hero and the white sheet */
main > .wrap .why3{margin-top:clamp(8px,1.5vw,20px); margin-bottom:clamp(28px,4vw,56px)}
.why3 .w{box-shadow:0 18px 40px -30px rgba(0,0,0,.35)}
/* Recent videos: a soft warm band across the sheet */
#work .poster.made{box-shadow:none}
.sheet{padding-top:0}
@media (max-width: 900px){ .hero{padding-bottom:clamp(16px,4vw,28px)} }

/* The three reasons: no cards, just drawing and text straight on the yellow */
.why3 .w, .why3 .w:nth-child(1), .why3 .w:nth-child(2), .why3 .w:nth-child(3){background:transparent; box-shadow:none}
.why3 .w{min-height:0; padding-block:clamp(12px,2vw,28px)}

/* Recent videos on plain white; the client quote as a black block with rounded corners */
#work{background:transparent}
.feature-quote{max-width:none; margin-top:clamp(40px,5vw,72px); padding:clamp(40px,6vw,96px) clamp(24px,6vw,120px); border-radius:var(--sheet-r); background:var(--studio); color:#fff}
.feature-quote blockquote{color:#fff; max-width:32ch; text-wrap:balance}
.feature-quote .who{color:rgba(255,255,255,.7)}
.feature-quote .who b{color:#fff}
.feature-quote .avatar{background:#2e2e2e; color:#fff}
.feature-quote .stars{color:var(--yellow)}
.feature-quote .ex{background:rgba(255,255,255,.14); color:#fff}

/* Channels: no stage background; the list on the left sits on a soft panel */
.place-stage, .pm[data-pl="li"]{background:transparent}
@media (min-width: 901px){
  .ch-tabs{background:var(--bg-alt); border-radius:var(--r); padding:10px; align-content:start}
  .ch-tabs .ci{background:var(--panel)}
  .ch-tabs button[aria-selected="true"]{background:var(--panel)}
  .ch-tabs button[aria-selected="true"] .ci{background:var(--bg-alt)}
}

/* "How it works": full bleed across the yellow edge and always within one screen */
.sheet{overflow:visible}
#brief{border-radius:0 0 var(--sheet-r) var(--sheet-r)}
.studio{--sp:clamp(24px, 5vh, 56px); --cv-h:calc(100svh - 2 * var(--sp) - 236px); margin-inline:calc(-1 * var(--frame)); min-height:100svh; display:flex; flex-direction:column; justify-content:center}
.studio > div{width:100%}
.studio-pin{padding-block:var(--sp)}
.studio .head{margin-bottom:clamp(14px, 3vh, 32px); gap:8px}
.studio .head h2{font-size:clamp(2rem, 3.4vw, 3.4rem)}
.studio-grid{align-items:center}
.studio-grid > div:last-child{width:min(100%, calc(var(--cv-h) * 16 / 11)); justify-self:end}
.steps{margin-top:clamp(8px, 2vh, 24px)}
@media (max-height: 820px) and (min-width: 901px){
  .steps li{padding:6px 0}
  .steps li:not(.on) small{display:none}
  .day b{font-size:clamp(3rem, 9vh, 5rem)}
}

/* Recent videos sits on the yellow too (dark text in both themes); the white sheet starts at the channels */
#work{--fg:#1d1d1d; --muted:rgba(29,29,29,.74); --line:rgba(29,29,29,.18); --panel:#fff; color:#1d1d1d; padding-top:clamp(16px,3vw,48px)}

/* Channels on the yellow as well (light panels, dark text in both themes); "How it works" sits between
   the yellow part and the white sheet, which now starts at "What you get" */
#channels{--fg:#1d1d1d; --muted:rgba(29,29,29,.74); --line:rgba(29,29,29,.14); --panel:#fff; --bg-alt:#f8f4f2; color:#1d1d1d; background:transparent}
main > .studio{margin-inline:0}

/* Channels on desktop: the list keeps one fixed height (no description inside it), the description sits
   under the preview, so list and preview line up top and bottom and nothing jumps between channels */
@media (min-width: 901px){
  .ch{align-items:stretch}
  .ch-tabs{align-content:space-between}
  .ch-tabs button{align-items:center; min-height:68px}
  .m-li{width:min(78%, 330px, calc(94cqh - 192px)); margin-top:0; align-self:center}
  .m-yt{width:min(94%, 640px, calc((92cqh - 50px) * 16 / 9))}
  .m-chrome{width:min(94%, 640px, calc(92cqh * 1.75))}
  .ch-tabs .ct{padding-top:0}
  .ch-tabs button[aria-selected="true"] .cd{display:none}
  .ch-main{grid-template-rows:minmax(0,1fr) auto; gap:clamp(12px,1.6vw,20px)}
  .ch-main .place-stage{height:auto; min-height:0}
  .ch-detail{display:block; text-align:center; max-width:92ch; margin-inline:auto; min-height:5.2em}
  .ch-detail p{text-wrap:balance}
  .ch-detail h3{font-size:1.2rem}
}

/* "What you get" on the yellow too; the white sheet starts at "Who you work with" */
#get{--fg:#1d1d1d; --muted:rgba(29,29,29,.74); --line:rgba(29,29,29,.14); --panel:#fff; color:#1d1d1d; background:transparent}

/* ===== Channels, redesigned (desktop): left a light panel with the channel list and, at its foot, the
   description of the chosen channel; right a black rounded stage (like the hero window) with the preview.
   Panel and stage are one height that fits under the heading in one screen. Mobile keeps its own layout. */
@media (min-width: 901px){
  #channels{--ch-h:clamp(548px, calc(100svh - 300px), 640px)}
  #channels .head{margin-bottom:clamp(24px, 3.5vh, 44px)}
  #channels .ch{grid-template-columns:minmax(320px, 400px) minmax(0, 1fr); grid-template-rows:minmax(0, 1fr) auto; gap:0 clamp(16px, 1.6vw, 24px); height:var(--ch-h); align-items:stretch}
  #channels .ch::before{content:""; grid-column:1; grid-row:1 / span 2; border-radius:var(--sheet-r); background:#f8f4f2}
  #channels .ch-main{display:contents}
  /* the list */
  #channels .ch-tabs{grid-column:1; grid-row:1; z-index:1; background:none; border-radius:0; padding:12px 12px 0; display:flex; flex-direction:column; gap:2px; min-height:0}
  #channels .ch-tabs button{flex:1 1 0; min-height:40px; max-height:58px; align-items:center; gap:14px; padding:0 16px 0 12px; border:0; border-radius:999px; background:none; color:#1d1d1d; font-weight:500; font-size:1.02rem; box-shadow:none; transition:background .2s, color .2s}
  #channels .ch-tabs button:hover{background:rgba(29,29,29,.06)}
  #channels .ch-tabs .ci{width:32px; height:32px; border-radius:999px; background:#fff; color:#1d1d1d}
  #channels .ch-tabs .ci svg{width:16px; height:16px}
  #channels .ch-tabs .ct{padding-top:0}
  #channels .ch-tabs .cd, #channels .ch-tabs button[aria-selected="true"] .cd{display:none}
  #channels .ch-tabs button[aria-selected="true"]{background:#1d1d1d; color:#fff}
  #channels .ch-tabs button[aria-selected="true"] .ci, #channels .ch-tabs button[aria-selected="true"][data-pl] .ci{background:rgba(255,255,255,.14); color:#fff}
  /* the description at the foot of the panel */
  #channels .ch-detail{grid-column:1; grid-row:2; z-index:1; display:block; max-width:none; margin:0; min-height:0; text-align:left; padding:clamp(16px,2vh,24px) 28px clamp(20px,2.6vh,30px); border-top:1px solid rgba(29,29,29,.1); margin-inline:12px}
  #channels .ch-detail h3{font-family:var(--f-serif); font-weight:400; font-size:clamp(1.25rem, 1.6vw, 1.55rem); line-height:1.2; color:#1d1d1d}
  #channels .ch-detail p{margin-top:8px; color:rgba(29,29,29,.72); font-size:1rem; line-height:1.55; text-wrap:pretty}
  /* the stage */
  #channels .place-stage{grid-column:2; grid-row:1 / span 2; height:auto; min-height:0; border-radius:var(--sheet-r); background:#1d1d1d; box-shadow:0 40px 70px -46px rgba(0,0,0,.5)}
  #channels .place-stage .ch-fmt{top:18px; right:18px}
  #channels .place-stage .ch-fmt span{background:rgba(255,255,255,.12); border-color:transparent; color:#fff; box-shadow:none}
  #channels .yt-meta .ln{background:rgba(255,255,255,.22)}
  #channels .yt-ch .av{background:rgba(255,255,255,.22)}
  #channels .yt-ch .sub-btn{background:#fff}
  #channels .m-yt{color:#fff}
  #channels .m-meet{box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 30px 60px -30px rgba(0,0,0,.6)}
  #channels .m-li{width:min(78%, 330px, calc(90cqh - 200px))}
}
@media (min-width: 901px) and (max-height: 800px){
  #channels .ch-tabs button{min-height:36px}
  #channels .ch-detail p{font-size:.95rem; line-height:1.5}
}

/* Pastel backgrounds: light lavender is the base colour (instead of yellow); while scrolling the page colour
   fades to a soft tint per block (mint, peach, blush) and back to lavender for the white sheet and footer */
:root{--lav:#e2e3f7; --mint:#ddf0e5; --peach:#fae5d6; --blush:#f6e0ea; --sun:#f6e9bf; --yellow:var(--lav); --page:var(--lav)}
body, .top, footer{background-color:var(--page); transition:background-color .9s ease}
footer{background-image:none}
.plan.best{background:#dcdcf6}
@media (prefers-reduced-motion: reduce){ body, .top, footer{transition:none} }

/* "Who you work with" is its own white block; prices, questions and the form sit on the pastel page again */
.sheet{margin:0 var(--frame) clamp(32px, 4vw, 64px)}
#pricing, #faq{--fg:#1d1d1d; --muted:rgba(29,29,29,.72); --line:rgba(29,29,29,.14); --panel:#fff; --bg-alt:#f8f4f2; --panel-2:#efe9e6; --bg:#fff; color:#1d1d1d; background:transparent}
#pricing .plan{background:#fff}
#pricing .plan.best{background:#fff; border:2px solid #1d1d1d}
#pricing .build{background:#fff}
#pricing .receipt{background:#f8f4f2}
#brief{margin:0 var(--frame); border-radius:var(--sheet-r); box-shadow:0 40px 80px -40px rgba(0,0,0,.45)}

/* "How it works": double side padding so the full-bleed band breathes like the rest of the page */
.studio .wrap{padding-left:max(calc(2 * var(--pad)), env(safe-area-inset-left,0px)); padding-right:max(calc(2 * var(--pad)), env(safe-area-inset-right,0px))}

/* ===== Menu as a floating black pill =====
   In: expo-out with a soft blur-to-sharp; out: a quicker ease-in lift. The pill narrows a little once you scroll,
   a light highlight glides under the hovered link and rests on the section you are in. */
header.top{background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; border:0; transform:none; pointer-events:none; padding-top:clamp(8px, 1vw, 14px); color:#fff; --fg:#fff; --muted:rgba(255,255,255,.6)}
.top.scrolled, .top.hide{box-shadow:none; transform:none}
.top .top-row{--full:calc(100% - 2 * (var(--frame) + var(--pad))); pointer-events:auto; position:relative; width:var(--full); max-width:calc(1760px - 2 * var(--pad)); margin-inline:auto; height:64px; padding:0 8px 0 22px; gap:16px; border-radius:999px; background:#1d1d1d; color:#fff; box-shadow:0 10px 30px -18px rgba(0,0,0,.4);
  transition:transform .75s cubic-bezier(.16,1,.3,1), opacity .5s ease, filter .6s ease, width .8s cubic-bezier(.16,1,.3,1), height .6s cubic-bezier(.16,1,.3,1), box-shadow .5s ease;
  animation:pill-in 1.1s cubic-bezier(.16,1,.3,1) .1s backwards}
.top.scrolled .top-row{width:calc(var(--full) - 2 * clamp(0px, (100vw - 1280px) / 2, 300px)); height:58px; box-shadow:0 18px 44px -18px rgba(0,0,0,.5)}
.top.hide .top-row{transform:translateY(calc(-100% - 24px)) scale(.92); opacity:0; filter:blur(6px);
  transition:transform .45s cubic-bezier(.64,0,.78,0), opacity .3s ease .08s, filter .35s ease, width .8s cubic-bezier(.16,1,.3,1), height .6s ease}
.top.hide:focus-within .top-row{transform:none; opacity:1; filter:none}
@keyframes pill-in{from{transform:translateY(-28px) scale(.86); opacity:0; filter:blur(10px)}}
.top-row > *, .top-row .nav a{animation:pill-item .9s cubic-bezier(.16,1,.3,1) backwards}
.top-row > .logo{animation-delay:.35s} .top-row > .nav{animation-delay:.45s} .top-row > .top-actions{animation-delay:.55s}
.top-row .nav a:nth-of-type(1){animation-delay:.48s} .top-row .nav a:nth-of-type(2){animation-delay:.54s} .top-row .nav a:nth-of-type(3){animation-delay:.6s} .top-row .nav a:nth-of-type(4){animation-delay:.66s}
@keyframes pill-item{from{opacity:0; transform:translateY(8px)}}
/* logo */
.top .logo{color:#fff}
.top .logo svg{width:28px; height:28px}
.top .logo .lm-t{fill:#fff} .top .logo .lm-p{fill:#1d1d1d; stroke:#1d1d1d}
.top .logo .word b{font-size:1.18rem}
.top .logo .word small{color:rgba(255,255,255,.55); font-size:.52rem}
/* links with the gliding highlight */
.top .nav{position:relative; gap:2px; margin-left:auto}
.top .nav a{position:relative; z-index:1; padding:9px 16px; border-radius:999px; color:rgba(255,255,255,.7); font-size:.98rem; opacity:1; transition:color .25s ease}
.top .nav a:hover, .top .nav a.on{color:#fff; opacity:1}
.nav-hl{position:absolute; left:0; top:50%; height:40px; margin-top:-20px; width:0; border-radius:999px; background:rgba(255,255,255,.13); opacity:0; pointer-events:none;
  transition:transform .55s cubic-bezier(.16,1,.3,1), width .55s cubic-bezier(.16,1,.3,1), opacity .3s ease}
/* theme + language */
.top .top-actions{gap:8px}
.top .theme-t{width:40px; height:40px; border:0; border-radius:999px; background:rgba(255,255,255,.1); color:#fff; transition:background .25s}
.top .theme-t:hover{background:rgba(255,255,255,.2)}
.top .lang{border:0; border-radius:999px; padding:3px; background:rgba(255,255,255,.1)}
.top .lang button{min-width:38px; min-height:34px; border-radius:999px; color:rgba(255,255,255,.65); transition:background .25s, color .25s}
.top .lang button[aria-pressed="true"]{background:#fff; color:#1d1d1d}
/* call to action takes the page colour, so it changes with the pastel of the section */
.top .top-actions .btn-primary{min-height:46px; padding:8px 22px; border:0; background:var(--page); color:#1d1d1d; transition:background-color .9s ease, transform .25s ease}
.top .top-actions .btn-primary:hover{background:#fff; color:#1d1d1d; transform:translateY(-1px)}
@media (max-width: 760px){
  .top .top-row{height:56px; padding:0 6px 0 16px}
  .top.scrolled .top-row{height:54px}
}
@media (prefers-reduced-motion: reduce){
  .top .top-row, .top-row > *, .top-row .nav a{animation:none}
  .top .top-row, .nav-hl{transition:none}
}

/* ===== Menu, two states =====
   At the top (hero): no pill, dark on the page colour, logo and button exactly on the content edges (like .wrap).
   Once you scroll: it morphs into the narrower black pill with white text. */
.top .top-row{width:100%; max-width:1760px; padding:0 var(--pad); height:72px; background-color:rgba(29,29,29,0); color:#1d1d1d; box-shadow:none;
  transition:transform .75s cubic-bezier(.16,1,.3,1), opacity .5s ease, filter .6s ease, width .8s cubic-bezier(.16,1,.3,1), max-width .8s cubic-bezier(.16,1,.3,1), padding .8s cubic-bezier(.16,1,.3,1), height .6s cubic-bezier(.16,1,.3,1), background-color .45s ease, color .35s ease, box-shadow .5s ease}
.top.scrolled .top-row{width:calc(100% - 2 * (var(--frame) + var(--pad)) - 2 * clamp(0px, (100vw - 1280px) / 2, 300px)); max-width:calc(1760px - 2 * var(--pad)); padding:0 8px 0 22px; height:58px; background-color:#1d1d1d; color:#fff; box-shadow:0 18px 44px -18px rgba(0,0,0,.5)}
.top.hide .top-row{transition:transform .45s cubic-bezier(.64,0,.78,0), opacity .3s ease .08s, filter .35s ease, width .8s cubic-bezier(.16,1,.3,1), max-width .8s cubic-bezier(.16,1,.3,1), padding .8s cubic-bezier(.16,1,.3,1), height .6s ease, background-color .45s ease, color .35s ease}
/* contents follow the state */
.top .logo{color:inherit}
.top .logo .lm-t{fill:currentColor; transition:fill .35s ease}
.top .logo .lm-p{fill:var(--page); stroke:var(--page); transition:fill .35s ease, stroke .35s ease}
.top.scrolled .logo .lm-p{fill:#1d1d1d; stroke:#1d1d1d}
.top .logo .word small{color:inherit; opacity:.6}
.top .nav a{color:inherit; opacity:.75; transition:opacity .25s ease}
.top .nav a:hover, .top .nav a.on{color:inherit; opacity:1}
.nav-hl{background:color-mix(in srgb, currentColor 12%, transparent)}
.top .theme-t{background:color-mix(in srgb, currentColor 9%, transparent); color:inherit; transition:background .25s}
.top .theme-t:hover{background:color-mix(in srgb, currentColor 18%, transparent)}
.top .lang{background:color-mix(in srgb, currentColor 9%, transparent)}
.top .lang button{color:inherit; opacity:.7}
.top .lang button[aria-pressed="true"]{opacity:1; background:#1d1d1d; color:#fff}
.top.scrolled .lang button[aria-pressed="true"]{background:#fff; color:#1d1d1d}
.top .top-actions .btn-primary{background:#1d1d1d; color:#fff; transition:background-color .45s ease, color .35s ease, transform .25s ease}
.top .top-actions .btn-primary:hover{background:#000; color:#fff}
.top.scrolled .top-actions .btn-primary{background:var(--page); color:#1d1d1d}
.top.scrolled .top-actions .btn-primary:hover{background:#fff; color:#1d1d1d}
@media (max-width: 760px){
  .top .top-row{height:60px; padding:0 var(--pad)}
  .top.scrolled .top-row{height:54px; padding:0 6px 0 16px}
}

/* "Who you work with" also straight on the pastel page: no white sheet left anywhere */
.sheet{background:transparent; box-shadow:none; border-radius:0; margin:0}
#about{--fg:#1d1d1d; --muted:rgba(29,29,29,.72); --line:rgba(29,29,29,.14); --panel:#fff; color:#1d1d1d; background:transparent}
#about .portrait{background:rgba(255,255,255,.55)}

/* Pill as wide as the content (outer edges on the content edges); switch looks without animation while hidden */
.top.scrolled .top-row{width:calc(100% - 2 * var(--pad)); max-width:calc(1760px - 2 * var(--pad))}
.top.instant .top-row, .top.instant .top-row *{transition:none!important}

/* ===== Contrast CTA: the "get my free preview" buttons are a clear red, so they stand apart from the black text ===== */
:root{--cta:#e5484d; --cta-hover:#cc3a3f; --cta-ink:#fff}
.btn-primary, .hero .btn-primary, footer .btn-primary, .plan.best .btn-primary, .formcard .btn-primary, .sticky .btn-primary, .receipt .btn-primary,
.top .top-actions .btn-primary, .top.scrolled .top-actions .btn-primary{background:var(--cta); border-color:var(--cta); color:var(--cta-ink)}
.btn-primary:hover, .hero .btn-primary:hover, footer .btn-primary:hover, .plan.best .btn-primary:hover, .formcard .btn-primary:hover, .sticky .btn-primary:hover, .receipt .btn-primary:hover,
.top .top-actions .btn-primary:hover, .top.scrolled .top-actions .btn-primary:hover{background:var(--cta-hover); border-color:var(--cta-hover); color:var(--cta-ink); opacity:1}

/* ===== "How it works" as a rounded black card on the content edges, one screen high, title centred ===== */
main > .studio{--gap:clamp(12px, 2.2vh, 28px); --sp:clamp(26px, 5vh, 60px); --cv-h:calc(100svh - 2 * var(--gap) - 2 * var(--sp) - 232px);
  position:relative; isolation:isolate; overflow:hidden; width:calc(100% - 2 * var(--pad)); max-width:calc(1760px - 2 * var(--pad)); margin:var(--gap) auto; min-height:calc(100svh - 2 * var(--gap)); border-radius:var(--sheet-r); background:#161616}
main > .studio::before{content:""; position:absolute; z-index:-1; left:10%; right:10%; top:-35%; height:70%; background:radial-gradient(50% 50% at 50% 50%, rgba(226,227,247,.13), transparent 70%); pointer-events:none}
.studio .wrap{padding-left:clamp(22px, 4vw, 80px); padding-right:clamp(22px, 4vw, 80px)}
.studio .head{max-width:none; text-align:center; justify-items:center; margin-inline:auto; margin-bottom:clamp(18px, 4vh, 44px)}
.studio .head h2{font-size:clamp(2rem, 3.4vw, 3.3rem)}
.studio .sub{margin-top:2px; font-family:var(--f-serif); font-size:clamp(1.05rem, 1.3vw, 1.3rem)}
.studio-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(24px, 4vw, 72px); align-items:center}
.day b{color:var(--lav)}
.day span{color:rgba(255,255,255,.5)}
/* steps as a timeline */
.steps{position:relative; gap:0}
.steps::before{content:""; position:absolute; left:4px; top:20px; bottom:20px; width:2px; border-radius:2px; background:rgba(255,255,255,.1)}
.steps li{grid-template-columns:10px 1fr; gap:20px; padding:9px 0}
.steps li::before{width:10px; height:10px; margin-top:8px; background:#3a3a3a; box-shadow:0 0 0 5px #161616; transition:background .35s, box-shadow .35s}
.steps li.done::before{background:rgba(255,255,255,.55)}
.steps li.on::before{background:var(--lav); box-shadow:0 0 0 5px #161616, 0 0 0 8px rgba(226,227,247,.28)}
.steps li.res.on::before{background:var(--mint); box-shadow:0 0 0 5px #161616, 0 0 0 8px rgba(221,240,229,.28)}
.canvas{border:0; background:#232323; border-radius:clamp(14px, 1.6vw, 22px)}
.track{margin-top:clamp(12px, 2.4vh, 24px)}
@media (max-width: 900px){
  main > .studio{min-height:0; margin:var(--pad) auto}
  .studio .head{text-align:left; justify-items:start}
}

/* "How it works" changes colour per day: a deep version of a site pastel as the card, the pastel itself as accent */
main > .studio{--st-bg:#161616; --st-acc:var(--lav); background:var(--st-bg); transition:background-color 1s ease}
main > .studio[data-step="0"]{--st-bg:#1f1e45; --st-acc:#cfd0f6}
main > .studio[data-step="1"]{--st-bg:#123a2f; --st-acc:#bfe8d1}
main > .studio[data-step="2"]{--st-bg:#43281b; --st-acc:#f6d3bb}
main > .studio[data-step="3"]{--st-bg:#43203a; --st-acc:#f1c8da}
main > .studio[data-step="4"]{--st-bg:#0f3442; --st-acc:#bfe4ef}
main > .studio{--brand:var(--st-acc)}
main > .studio .day b{color:var(--st-acc); transition:color 1s ease}
main > .studio .steps li::before{box-shadow:0 0 0 5px var(--st-bg); transition:background 1s ease, box-shadow 1s ease}
main > .studio .steps li.on::before, main > .studio .steps li.res.on::before{background:var(--st-acc); box-shadow:0 0 0 5px var(--st-bg), 0 0 0 8px color-mix(in srgb, var(--st-acc) 30%, transparent)}
main > .studio .canvas{background:rgba(0,0,0,.22); transition:background-color 1s ease}
main > .studio .track .fill{background:var(--st-acc)}
main > .studio::before{background:radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--st-acc) 16%, transparent), transparent 70%)}

/* Clickable steps */
.steps li{cursor:pointer; border-radius:12px; transition:opacity .35s, background-color .25s}
.steps li:not(.on):hover{opacity:.85}
.steps li:focus-visible{outline:2px solid var(--st-acc, #fff); outline-offset:4px}

/* ===== FAQ as a block: heading + chat button on the left, the questions in a white rounded card on the right ===== */
#faq .wrap{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(28px,5vw,96px); align-items:start}
.faq-head{position:sticky; top:clamp(96px,12vh,120px); max-width:none; margin:0; text-align:left; justify-items:start; gap:16px}
.faq-head h2{font-size:clamp(2.2rem, 4vw, 3.6rem)}
.faq-head p{font-family:var(--f-serif); color:#1d1d1d; font-size:clamp(1.1rem,1.4vw,1.35rem); line-height:1.45; max-width:30ch}
.faq-head .faq-chat{margin-top:6px}
#faq .faq{grid-template-columns:minmax(0,1fr); margin:0; padding:clamp(6px,1vw,12px) clamp(18px,2.4vw,36px); border-radius:var(--sheet-r); background:#fff; box-shadow:0 30px 60px -44px rgba(29,29,29,.35)}
#faq .faq details{padding-inline:0; border-top:1px solid rgba(29,29,29,.1)}
#faq .faq details:first-child{border-top:0}
#faq .faq details:last-child{border-bottom:0}
#faq .faq summary{font-size:clamp(1.1rem,1.5vw,1.4rem); font-weight:500; padding:clamp(18px,2vw,26px) 0; gap:20px; transition:opacity .2s}
#faq .faq summary:hover{opacity:.7}
#faq .faq summary::after{width:40px; height:40px; flex:none; border-radius:50%; background:#f1f0fb var(--chev) center/18px no-repeat; -webkit-mask:none; mask:none; transition:transform .35s cubic-bezier(.2,.8,.2,1), background-color .25s;
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%231d1d1d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
#faq .faq details[open] summary::after{transform:rotate(180deg); background-color:#1d1d1d; --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
#faq .faq details p{font-size:1.05rem; line-height:1.6; max-width:60ch; padding:0 56px clamp(20px,2.2vw,28px) 0; animation:faq-in .4s cubic-bezier(.2,.8,.2,1)}
@keyframes faq-in{from{opacity:0; transform:translateY(-6px)}}
@media (max-width: 900px){
  #faq .wrap{grid-template-columns:minmax(0,1fr)}
  .faq-head{position:static}
  #faq .faq details p{padding-right:0}
}

/* ===== Refined motion =====
   Titles: words rise from behind a mask, one after the other. Hero: heading first, then the underline draws,
   then text and buttons. Big dark blocks open up while you scroll to them; the featured video settles in. */
.tw-on .tw{display:inline-block; white-space:nowrap; overflow:clip; padding-bottom:.16em; margin-bottom:-.16em; padding-right:.04em; margin-right:-.04em}
.tw-on .tw-i{display:inline-block; transform:translateY(112%); transition:transform 1.05s cubic-bezier(.2,.75,.15,1) calc(var(--i, 0) * 60ms + var(--td, 0ms))}
.tw-on .ti-in .tw-i{transform:none}
.tw-on .ti-now .tw-i{transition:none}
.tw-on .hero h1{--td:.15s}
.tw-on .hero .mark::after{clip-path:inset(0 100% 0 0); transition:clip-path 1s cubic-bezier(.65,0,.35,1) .95s}
.tw-on .hero h1.ti-in .mark::after{clip-path:inset(0)}
@keyframes rise-in{from{opacity:0; transform:translateY(18px)}}
.tw-go .hero .lede{animation:rise-in .9s cubic-bezier(.2,.75,.15,1) .7s backwards}
.tw-go .hero .ctas{animation:rise-in .9s cubic-bezier(.2,.75,.15,1) .82s backwards}
.tw-go .hero .micro{animation:rise-in .9s cubic-bezier(.2,.75,.15,1) .94s backwards}
@keyframes window-in{from{opacity:0; transform:translateY(24px) scale(.97)}}
.tw-go .hero .editor{animation:window-in 1.2s cubic-bezier(.2,.75,.15,1) .45s backwards}
/* section heads: the title animates itself, the line under it follows */
html.rv .head.rv-item{opacity:1; transform:none}
html.rv .head.rv-item > :not(h2){opacity:0; transform:translateY(14px); transition:opacity .8s ease .35s, transform .9s cubic-bezier(.2,.75,.15,1) .35s}
html.rv .head.rv-item.in > :not(h2){opacity:1; transform:none}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    main > .studio, main > #brief{animation:card-open linear both; animation-timeline:view(); animation-range:entry 0% entry 90%}
    @keyframes card-open{from{clip-path:inset(4% 3.5% 0 3.5% round var(--sheet-r))} to{clip-path:inset(0 0 0 0 round var(--sheet-r))}}
    .wk-stage > .wk-still, .wk-stage > video{animation:settle-in linear both; animation-timeline:view(); animation-range:entry 0% cover 50%}
    @keyframes settle-in{from{transform:scale(1.1)} to{transform:scale(1)}}
  }
}
@media (prefers-reduced-motion: reduce){ .tw-on .tw-i{transform:none!important; transition:none} .tw-on .hero .mark::after{clip-path:none} }
.tw-wait h1, .tw-wait main h2, .tw-wait .hero .lede, .tw-wait .hero .ctas, .tw-wait .hero .micro, .tw-wait .hero .editor, .tw-wait .usp-row, .tw-wait .ph-note{visibility:hidden}
/* the footer lies under the (transparent) page: its content stays invisible until the script reveals it */
footer{--p:0}

/* Wordmark "Let's go": edge to edge (ink width at 100px = 315.6px, left bearing .07em); the descender of the g
   may run off the bottom of the screen, like a big stamp */
.wordmark{font-size:calc(100cqw / 3.16); margin-left:-.07em; line-height:.74}
footer{overflow:hidden}

/* "Let's goooooo" (app.js): room to scroll on past the footer; the footer stays put and the word grows o's.
   The flat word shrinks towards its bottom left (the ink edge, .07em in); in 3D footer3d.js scales the letters */
footer{top:0}
.foot-run{height:110svh; pointer-events:none}
footer.flat + .foot-run{display:none}
@media (max-width: 760px){ .foot-run{height:80svh} }
.wordmark{transform-origin:.07em 100%; transform:translateY(calc((1 - var(--p,1)) * 55%)) scale(var(--wm-s,1))}
.wordmark.wm-3d{transform:translateY(calc((1 - var(--p,1)) * 55%))}
@media (prefers-reduced-motion: reduce){ .foot-run{display:none} .wordmark, .wordmark.wm-3d{transform:none} }

/* First scroll: the logo shouts "Let's goooooo" (app.js letsGo); every o grows in with a little bounce */
.logo .word b .go-o i{font-style:normal; display:inline-block; overflow:hidden; vertical-align:bottom; animation:go-o .34s cubic-bezier(.3,1.5,.5,1) calc(var(--i) * 55ms) both}
@keyframes go-o{from{max-width:0; opacity:0; transform:translateY(.3em) scale(.3)} to{max-width:.62em; opacity:1; transform:none}}
/* The header keeps one height in the page flow while the bar inside shrinks to the pill; otherwise the page
   shifts up, the browser compensates with a small scroll up, and that brought the hidden menu right back */
header.top{box-sizing:border-box; height:calc(clamp(8px, 1vw, 14px) + 72px)}
@media (max-width: 760px){ header.top{height:calc(clamp(8px, 1vw, 14px) + 60px)} }

/* The three tiles under the hero in the manner of the classic Warner Bros cartoons (js/why3.js, js/why3-3d.js):
   an animator's rough, a 3D object rendered as ink and cel, a finished 2D cel */
.dd-sketch .sk-line{stroke:#2a2a2a; stroke-width:1.9}
.dd-sketch .sk-thin{stroke-width:.9; opacity:.7}
.dd-sketch .sk-blue{stroke:#5b8fd6; stroke-width:.9; opacity:.75}
.dd-sketch .sk-hatch{stroke:#2a2a2a; stroke-width:.8; opacity:.7}
.dd-sketch .sk-red{stroke:#d63b3f; stroke-width:2}
.dd-sketch .sk-v1, .dd-sketch .sk-v2{opacity:0}
.go .dd-sketch .sk-v{animation:sk-boil .48s steps(1, end) 3.6s infinite}
.go .dd-sketch .sk-v1{animation-delay:3.76s} .go .dd-sketch .sk-v2{animation-delay:3.92s}
@keyframes sk-boil{0%{opacity:1} 33.3%, 100%{opacity:0}}
.dd-3d{position:relative; display:block; line-height:0; isolation:isolate}
/* the 3D stage is wider than the tile so the watch can zip off; it fades out at the edges */
.dd-3d > canvas, .dd-3d > .dd-fx{position:absolute; left:-45%; top:-20%; width:190%; height:140%; pointer-events:none; overflow:visible;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask-image:linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent)}
.dd-3d.on > svg.doodle{visibility:hidden}
.doodle.dd-2d{overflow:hidden}

/* The "let's go" button (js/letsgo.js), one component in the language of the logo: the slanted black frame with the
   speed bars trailing on the left and the play triangle cut out (pointing down). At rest the bars puff like exhaust;
   on hover they shoot back and the frame lurches forward. Set the --gob-* tokens to vary it. */
.gob{--gob-ink:#1d1d1d; --gob-on:#fff; --gob-hot:#e5484d; --gob-hole:var(--page, #e2e3f7); --gob-h:62px; --gob-skew:-8deg; --gob-bar:12px;
  display:inline-flex; align-items:center; gap:10px; width:max-content; text-decoration:none; color:var(--gob-on)}
.gob-bars{display:grid; gap:7px; justify-items:end}
.gob-bars i{display:block; height:var(--gob-bar); border-radius:calc(var(--gob-bar) / 2); background:var(--gob-ink); transform-origin:100% 50%; animation:gob-puff 1.8s cubic-bezier(.4,0,.2,1) infinite}
.gob-bars i:nth-child(1){width:22px; margin-right:16px}
.gob-bars i:nth-child(2){width:30px; animation-delay:.18s}
.gob-bars i:nth-child(3){width:24px; margin-right:9px; animation-delay:.36s}
.gob-body{display:inline-flex; align-items:center; gap:14px; height:var(--gob-h); padding:0 18px 0 30px; border-radius:12px; background:var(--gob-ink); transform:skewX(var(--gob-skew));
  box-shadow:0 18px 30px -18px rgba(29,29,29,.55); transition:transform .45s cubic-bezier(.3,1.5,.5,1), background-color .25s ease}
.gob-label, .gob-tri{transform:skewX(calc(-1 * var(--gob-skew)))}
.gob-label{font-family:var(--f-display); font-weight:700; font-size:1.12rem; white-space:nowrap}
/* the play triangle of the logo: points right like a play button, turns down (where it takes you) on hover and click */
.gob-tri{width:26px; height:28px; fill:var(--gob-hole); rotate:0deg; transition:rotate .5s cubic-bezier(.3,1.6,.45,1)}
.gob:hover .gob-tri, .gob:focus-visible .gob-tri, .gob.go-on .gob-tri{rotate:90deg}
.gob:hover .gob-body{transform:skewX(var(--gob-skew)) translateX(6px); background:var(--gob-hot)}
.gob:hover .gob-bars i{animation:gob-zoom .5s cubic-bezier(.2,.8,.2,1) infinite}
.gob:hover .gob-bars i:nth-child(2){animation-delay:.08s} .gob:hover .gob-bars i:nth-child(3){animation-delay:.16s}
@keyframes gob-puff{0%, 100%{transform:none; opacity:1} 40%{transform:translateX(-6px) scaleX(1.35); opacity:.75} 70%{transform:translateX(-2px) scaleX(.9); opacity:1}}
@keyframes gob-zoom{0%{transform:none; opacity:1} 60%{transform:translateX(-18px) scaleX(1.8); opacity:.2} 100%{transform:none; opacity:1}}
@media (prefers-reduced-motion: reduce){ .gob-bars i{animation:none} .gob-tri{transition:none} }
/* where it sits: centred under a section, and in the hero centred at the bottom (the hero keeps room for it) */
.go-row{display:flex; justify-content:center; margin-top:clamp(40px, 5vw, 72px)}
.hero{position:relative}
.go-hero{position:absolute; left:0; right:0; margin-inline:auto; bottom:clamp(18px, 3vh, 36px); z-index:3}
@media (min-width: 901px){
  .hero{padding-bottom:calc(clamp(16px, 3.5vh, 48px) + 96px)}
  .frame-area{height:max(200px, min(clamp(240px, 30vw, 520px), calc(100svh - var(--chrome, 124px) - 330px)))}
}
@media (max-width: 900px){ .go-hero{position:static; margin:28px auto 0; display:flex} }
.tw-wait .go-hero{visibility:hidden}
.tw-go .go-hero{animation:rise-in .9s cubic-bezier(.2,.75,.15,1) 1.1s backwards}

/* The kinetic type over the page (js/letsgo.js): white with difference, so it inverts what is below and always reads */
.lg{position:fixed; inset:0; z-index:200; pointer-events:none; display:grid; place-items:center; overflow:hidden; color:#fff; mix-blend-mode:difference}
.lg:empty{display:none}
.lg-word{font-family:var(--f-display); font-weight:800; line-height:.86; letter-spacing:-.02em; text-align:center; white-space:nowrap; will-change:transform}
.lg-line{display:block}
.lg-word span{display:inline-block; transform-origin:50% 60%}
.lg-word .sp{width:.28em}
.lg-wall{position:absolute; inset:0}
.lg-row{position:absolute; left:0; font-family:var(--f-display); font-weight:800; line-height:.95; letter-spacing:-.02em; white-space:pre; will-change:transform}
.lg-row.ol{color:transparent; -webkit-text-stroke:2px #fff}

@media (min-width: 901px){ .hero{padding-bottom:calc(clamp(16px, 3.5vh, 48px) + 120px)} }
/* no chat button over the hero */
.chat-fab{transition:transform .25s cubic-bezier(.2,.8,.2,1), opacity .3s ease, translate .4s cubic-bezier(.2,.8,.2,1)}
html.in-hero:not(.chat-open) .chat-fab{opacity:0; translate:0 24px; pointer-events:none}

/* Degular (Adobe Fonts kit oqf5xhc: degular, degular-display, degular-text, 400 and 700): degular for the interface,
   the display cut for the big type. Jost stays behind it as the fallback */
:root{--f-display:"degular", "Jost", "Helvetica Neue", Arial, system-ui, sans-serif; --f-big:"degular-display", "degular", "Jost", sans-serif}
h1, h2, .wordmark, .lg-word, .lg-row{font-family:var(--f-big)}
.wordmark{font-size:calc(100cqw / 2.96); margin-left:-.027em}   /* "Let's go" in degular-display, edge to edge */
/* Degular is narrower than Jost: its own spacing (the tight tracking was for Jost) and the big type a little larger */
h1, .hero h1, h2, main .head h2{letter-spacing:-.008em}
h1, .hero h1{font-size:clamp(2.9rem, 6vw, 6.3rem)}
.logo .word b{letter-spacing:0}
.lg-word, .lg-row{letter-spacing:0}
h1, .hero h1{letter-spacing:.012em} h2, main .head h2{letter-spacing:.006em}
/* footer without the clapper: two columns, the menu on the right */
@media (min-width: 901px){ .foot-main{grid-template-columns:minmax(0,1fr) auto} }

/* Work: the featured film on the left, beside it on the right the title and subtitle with the name and line of the film
   playing; the reel of the others below. On desktop the whole block (film + reel) fits one screen: the film's width
   follows the screen height */
@media (min-width: 1001px){
  #work{padding-block:clamp(24px, 4.5svh, 56px)}
  #work > .wrap{display:grid; grid-template-columns:auto minmax(280px, 1fr); grid-template-rows:auto auto; column-gap:clamp(32px, 4vw, 72px); row-gap:clamp(14px, 2svh, 24px)}
  #work > .wrap > *{grid-column:1 / -1}
  #work > .wrap > .wk-feat{grid-column:1; grid-row:1 / span 2; margin-top:0; width:min(60vw, calc((100svh - 500px) * 16 / 9))}
  #work > .wrap > .head{grid-column:2; grid-row:1; align-self:end; text-align:left; margin:0; max-width:none; justify-items:start}
  #work > .wrap > .head h2{font-size:clamp(2.4rem, 4.2vw, 4.4rem); line-height:.98; text-wrap:balance}
  #work > .wrap > .head p{margin-left:0; margin-right:0; max-width:32ch}
  #work > .wrap > .wk-info{grid-column:2; grid-row:2; align-self:start; position:static; display:grid; gap:12px; margin:0; padding:0; opacity:1; transform:none; background:none; border-top:1px solid var(--line); padding-top:clamp(14px, 2svh, 22px)}
  #work > .wrap > .wk-info h3{color:var(--fg); font-size:clamp(1.2rem, 1.6vw, 1.6rem)}
  #work > .wrap > .wk-info p{color:var(--muted); max-width:40ch}
  #work > .wrap > .wk-info .chips span{background:#fff; border-color:var(--line); color:var(--fg)}
  #work .wk-reel{margin-top:clamp(18px, 3svh, 36px)}
  #work .wk-track{--n:4}
}

/* The dark blocks (how it works, the preview form) grow in as a whole, content and all, instead of a clip that cut
   the edges off; their content follows a beat later, slightly offset, so it feels like one smooth move */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    main > .studio, main > #brief{animation:card-grow linear both; animation-timeline:view(); animation-range:entry 0% entry 85%; transform-origin:50% 0; border-radius:var(--sheet-r)}
    @keyframes card-grow{from{transform:translateY(48px) scale(.9); clip-path:none} to{transform:none; clip-path:none}}
    main > #brief .brief-intro, main > #brief .formcard{animation:card-content linear both; animation-timeline:view(); animation-range:entry 15% entry 100%}
    main > #brief .formcard{animation-range:entry 25% cover 45%}
    @keyframes card-content{from{opacity:0; transform:translateY(36px)} to{opacity:1; transform:none}}
  }
}


/* The hero title that keeps changing (js/hero-lines.js) */
.hero h1 .hr-w{overflow:visible; perspective:700px}
.hero h1.hr-clip .hr-w{overflow:clip}
.hero h1 .hr-c{display:inline-block; transform-origin:50% 60%; backface-visibility:hidden}
.hero h1 .hr-c.hr-dec{opacity:.55}
.tw-on .hero h1 .hr-mark::after{clip-path:inset(0 100% 0 0); transition:none}
.tw-on .hero h1 .hr-mark.hr-draw::after{animation:hr-draw .7s cubic-bezier(.65,0,.35,1) .1s forwards}
.tw-on .hero h1 .hr-mark.hr-static::after{animation:none; clip-path:inset(0)}
@keyframes hr-draw{from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0)}}

/* Reviews (js/reviews.js): a card per client in their brand colour, the active one in the middle, neighbours peeking */
.revs{margin-top:clamp(56px, 7vw, 104px)}
.rv-stage{position:relative; overflow:visible; touch-action:pan-y}
.rv-card{position:absolute; left:50%; top:0; width:min(760px, 78vw); margin:0; display:grid; gap:clamp(18px, 2.4vw, 30px); align-content:start;
  padding:clamp(28px, 4vw, 56px); border-radius:var(--sheet-r, 28px); background:var(--bg); color:var(--fg); cursor:pointer; user-select:none;
  box-shadow:0 30px 60px -36px rgba(20,20,40,.45); transition:transform .75s cubic-bezier(.2,.8,.2,1), opacity .6s ease}
.rv-card.on{cursor:default}
.rv-logo{height:clamp(28px, 3vw, 40px); width:auto; max-width:60%; justify-self:start; pointer-events:none}
.rv-card blockquote{margin:0; font-family:var(--f-serif); font-weight:400; font-size:clamp(1.25rem, 2.1vw, 1.85rem); line-height:1.32; text-wrap:pretty}
.rv-card figcaption{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; font-size:.98rem}
.rv-card figcaption b{font-family:var(--f-display); font-weight:700}
.rv-card figcaption span:last-child{opacity:.7}
.rv-stars{color:#f6c746; letter-spacing:2px; width:100%; font-size:.95rem}
.rv-nav{display:flex; align-items:center; justify-content:center; gap:18px; margin-top:clamp(22px, 3vw, 36px)}
.rv-dots{display:flex; gap:8px}
.rv-dots button{width:9px; height:9px; padding:0; border:0; border-radius:50%; background:rgba(29,29,29,.22); cursor:pointer; transition:width .35s ease, background .35s ease}
.rv-dots button.on{width:26px; border-radius:6px; background:#1d1d1d}
@media (prefers-reduced-motion: reduce){ .rv-card{transition:none} }

/* Changing hero title: the underlined part may wrap, each word gets its own stretch of hand-drawn line, which is only
   ever seen while it is being drawn (word by word); the older rule that showed it at once is overruled */
.tw-on .hero h1 .mark.hr-mark{white-space:normal}
.tw-on .hero h1.ti-in .mark.hr-mark::after, .tw-on .hero h1 .mark.hr-mark::after{display:none}
.tw-on .hero h1 .hr-mark .hr-w{position:relative}
.tw-on .hero h1 .hr-mark .hr-w::after{content:""; position:absolute; left:-1%; right:-1%; bottom:.14em; height:.13em; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8.5C55 5.5 105 9.5 160 6.5S250 4.8 297 7.5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat; clip-path:inset(0 100% 0 0)}
.tw-on .hero h1 .hr-mark .hr-w:not(:last-child)::after{right:-.3em}
.tw-on .hero h1 .hr-mark.hr-draw .hr-w::after{animation:hr-draw .45s cubic-bezier(.65,0,.35,1) calc(.1s + var(--wi, 0) * .32s) forwards}
.tw-on .hero h1 .hr-mark.hr-static .hr-w::after{animation:none; clip-path:inset(0)}
/* review cards: logo, quote and name centred in the card */
.rv-card{justify-items:center; align-content:center; text-align:center}
.rv-logo{justify-self:center; max-width:70%}
.rv-card blockquote{max-width:34ch; text-wrap:balance}
.rv-card figcaption{justify-content:center}
.rv-stars{text-align:center}

/* Cookie question (js/consent.js): a wide black card centred at the bottom, slanted like the logo frame, with a 3D
   cookie turning on the left (js/cookie3d.js). It rises in with a little overshoot and drops away after a choice */
.ck{--ck-skew:-5deg; position:fixed; left:50%; bottom:clamp(14px, 2.4vw, 32px); z-index:90; width:min(680px, calc(100vw - 24px));
  opacity:0; transform:translate(-50%, 140%) scale(.92); pointer-events:none}
.ck.in{opacity:1; transform:translate(-50%, 0); pointer-events:auto; transition:transform .8s cubic-bezier(.2,1.25,.35,1), opacity .3s ease}
.ck.out{opacity:0; transform:translate(-50%, 140%) scale(.94); transition:transform .55s cubic-bezier(.6,0,.8,.4), opacity .4s ease .1s}
.ck-card{display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:clamp(12px, 2vw, 24px); padding:16px clamp(20px, 3vw, 34px) 16px 14px;
  border-radius:18px; background:#1d1d1d; color:#fff; transform:skewX(var(--ck-skew)); box-shadow:0 30px 60px -28px rgba(20,20,30,.65)}
.ck-card > *{transform:skewX(calc(-1 * var(--ck-skew)))}
.ck-cookie{width:clamp(96px, 14vw, 140px); aspect-ratio:1; margin:-34px 0 -18px; filter:drop-shadow(0 14px 18px rgba(0,0,0,.45)); opacity:0; transform:skewX(calc(-1 * var(--ck-skew))) scale(.6); transition:opacity .4s ease .25s, transform .7s cubic-bezier(.3,1.5,.5,1) .25s}
.ck-cookie.on{opacity:1; transform:skewX(calc(-1 * var(--ck-skew))) scale(1)}
.ck-cookie canvas{display:block; width:100%; height:100%}
.ck-text{display:grid; gap:8px}
.ck-h{font-family:var(--f-display); font-weight:700; font-size:clamp(1.25rem, 2vw, 1.5rem)}
.ck-p{margin:0; font-size:.95rem; line-height:1.45; color:rgba(255,255,255,.78)}
.ck-btns{display:flex; align-items:center; gap:16px; margin-top:6px}
.ck-yes{height:44px; padding:0 20px; border:0; border-radius:10px; background:#e5484d; color:#fff; font-family:var(--f-display); font-weight:700; font-size:1rem; cursor:pointer; transform:skewX(var(--ck-skew)); transition:transform .3s cubic-bezier(.3,1.5,.5,1), background-color .2s ease}
.ck-yes span{display:inline-block; transform:skewX(calc(-1 * var(--ck-skew)))}
.ck-yes:hover{background:#f05a5e; transform:skewX(var(--ck-skew)) translateX(3px)}
.ck-no{padding:0; border:0; background:none; color:rgba(255,255,255,.7); font:inherit; font-size:.95rem; text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.ck-no:hover{color:#fff}
@media (max-width: 600px){ .ck-cookie{width:84px; margin:-28px 0 -10px} .ck-p{font-size:.88rem} }
@media (prefers-reduced-motion: reduce){ .ck, .ck.in, .ck.out{transition:opacity .2s ease; transform:translate(-50%, 0)} }
/* the side cards may peek, but never widen the page (on phones they made it 1147px wide) */
.revs{overflow-x:clip; overflow-y:visible}
html{overflow-x:clip}

/* Phones: the "get my free preview" bar and the chat button side by side at the bottom, same height, same line */
@media (max-width: 760px){
  .sticky{padding-right:calc(16px + 54px + 10px)}
  .sticky .btn{height:54px; min-height:54px; padding-block:0}
  .chat-fab{right:16px; bottom:calc(10px + env(safe-area-inset-bottom, 0px)); height:54px; width:54px; padding:0; justify-content:center}
}

/* Arrows in buttons are the play triangle from the logo (img/logo.svg, the same rounded, slightly slanted shape),
   drawn in the button's text colour; the → character stays in the markup for screen readers that read it */
.arrow{display:inline-block; width:.72em; height:.8em; vertical-align:-.06em; overflow:hidden; text-indent:200%; white-space:nowrap; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='113 14 39 44'%3E%3Cpath d='M119.22 20.44L114.78 51.56Q114 57 118.78 54.29L146.22 38.71Q151 36 146.45 32.92L124.55 18.08Q120 15 119.22 20.44Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='113 14 39 44'%3E%3Cpath d='M119.22 20.44L114.78 51.56Q114 57 118.78 54.29L146.22 38.71Q151 36 146.45 32.92L124.55 18.08Q120 15 119.22 20.44Z'/%3E%3C/svg%3E") center / contain no-repeat}

/* Hero film (our own explainer, media/hero/): in the slanted frame of the logo, with its speed bars in front.
   The video is counter-slanted inside so it stays straight. Plays muted on a loop; the button plays it with sound */
.hv{--hv-skew:-6deg; --gob-bar:15px; --gob-ink:#1d1d1d; display:flex; align-items:center; gap:clamp(10px, 1.2vw, 18px); width:100%}
.hv-bars{flex:none}
.hv-bars i:nth-child(1){width:30px; margin-right:22px} .hv-bars i:nth-child(2){width:42px} .hv-bars i:nth-child(3){width:34px; margin-right:12px}
.hv-frame{position:relative; flex:1; min-width:0; aspect-ratio:16 / 9; border-radius:clamp(14px, 1.6vw, 24px); overflow:hidden; background:#1d1d1d;
  transform:skewX(var(--hv-skew)); box-shadow:0 44px 80px -44px rgba(20,20,45,.6)}
.hv-video{position:absolute; top:0; left:-3.5%; width:107%; max-width:none; height:100%; object-fit:cover; transform:skewX(calc(-1 * var(--hv-skew)))}
.hv-sound{position:absolute; left:clamp(14px, 1.6vw, 24px); bottom:clamp(12px, 1.4vw, 20px); display:inline-flex; align-items:center; gap:10px; height:44px; padding:0 18px 0 14px;
  border:0; border-radius:10px; background:rgba(29,29,29,.82); color:#fff; font-family:var(--f-display); font-weight:700; font-size:.98rem; cursor:pointer;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:background-color .2s ease, transform .3s cubic-bezier(.3,1.5,.5,1)}
.hv-sound > *{transform:skewX(calc(-1 * var(--hv-skew)))}
.hv-sound:hover{background:#e5484d; transform:translateX(3px)}
.hv-ico{width:.8em; height:.85em; background:currentColor; -webkit-mask:var(--play-mask) center / contain no-repeat; mask:var(--play-mask) center / contain no-repeat}
.hv-sound.on .hv-ico{-webkit-mask:none; mask:none; width:.7em; height:.7em; border-radius:2px}
:root{--play-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='113 14 39 44'%3E%3Cpath d='M119.22 20.44L114.78 51.56Q114 57 118.78 54.29L146.22 38.71Q151 36 146.45 32.92L124.55 18.08Q120 15 119.22 20.44Z'/%3E%3C/svg%3E")}
.tw-wait .hero .hv{visibility:hidden}
.tw-go .hero .hv{animation:rise-in 1s cubic-bezier(.2,.75,.15,1) .5s backwards}
@media (max-width: 900px){ .hv-bars{display:none} .hv{--hv-skew:-4deg} }

/* Hero film: the speed bars in front are gone; a full-screen button top right in the frame */
.hv-full{position:absolute; right:clamp(14px, 1.6vw, 24px); top:clamp(12px, 1.4vw, 20px); display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:10px;
  background:rgba(29,29,29,.82); color:#fff; cursor:pointer; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:background-color .2s ease, scale .3s cubic-bezier(.3,1.5,.5,1)}
.hv-full > svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transform:skewX(calc(-1 * var(--hv-skew)))}
.hv-full:hover{background:#e5484d; scale:1.08}

/* The film full screen: a dark, blurred backdrop and the film large in the middle, grown out of the hero frame */
.vm{width:100vw; height:100vh; max-width:none; max-height:none; margin:0; padding:clamp(12px, 4vw, 64px); border:0; background:transparent; display:none; place-items:center; overflow:hidden}
.vm[open]{display:grid}
.vm::backdrop{background:rgba(14,14,20,.78); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); animation:vm-fade .4s ease both}
@keyframes vm-fade{from{opacity:0}}
.vm-stage{position:relative; width:min(100%, calc((100vh - 2 * clamp(12px, 4vw, 64px)) * 16 / 9)); aspect-ratio:16 / 9; border-radius:18px; overflow:hidden; background:#000; box-shadow:0 40px 120px -30px rgba(0,0,0,.8); transform-origin:50% 50%}
.vm-video{display:block; width:100%; height:100%; max-width:none; object-fit:contain; background:#000}
.vm-close{position:absolute; top:14px; right:14px; display:grid; place-items:center; width:46px; height:46px; padding:0; border:0; border-radius:12px; background:rgba(29,29,29,.8); color:#fff; cursor:pointer;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:background-color .2s ease, rotate .35s cubic-bezier(.3,1.5,.5,1)}
.vm-close svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round}
.vm-close:hover{background:#e5484d; rotate:90deg}
html.vm-open{overflow:hidden}
/* Hero: more room for the film (the text column a little narrower) */
@media (min-width: 901px){ .hero-grid{grid-template-columns:minmax(0, .9fr) minmax(0, 1.3fr); gap:clamp(28px, 3.4vw, 64px)} }
.hv{padding-inline:2.2% 1.8%}   /* the slant pushes the corners out; keep them inside the content edge */