/* Novaia: camel, navy, black, white, charcoal. Text only white or black. Few words, big type, depth. */
@property --bg{syntax:'<color>'; inherits:true; initial-value:#0A0A0A}
@property --fg{syntax:'<color>'; inherits:true; initial-value:#FFFFFF}
@property --fg-2{syntax:'<color>'; inherits:true; initial-value:rgba(255,255,255,.64)}
@property --accent{syntax:'<color>'; inherits:true; initial-value:#A27F55}
@property --card{syntax:'<color>'; inherits:true; initial-value:rgba(255,255,255,.07)}
@property --line{syntax:'<color>'; inherits:true; initial-value:rgba(255,255,255,.16)}

:root{
  --camel:#A27F55; --navy:#1E346D; --black:#0A0A0A; --white:#FFFFFF; --charcoal:#696969;
  --font:"Geist","SF Pro Display",-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --gutter:clamp(16px,4vw,48px); --max:1240px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
[data-theme="black"]{--bg:#0A0A0A; --fg:#FFFFFF; --fg-2:rgba(255,255,255,.62); --accent:#A27F55; --card:rgba(255,255,255,.07); --line:rgba(255,255,255,.16)}
[data-theme="camel"]{--bg:#A27F55; --fg:#0A0A0A; --fg-2:rgba(10,10,10,.7); --accent:#FFFFFF; --card:rgba(255,255,255,.2); --line:rgba(10,10,10,.2)}
[data-theme="white"]{--bg:#FFFFFF; --fg:#0A0A0A; --fg-2:#696969; --accent:#1E346D; --card:rgba(105,105,105,.1); --line:rgba(10,10,10,.12)}
[data-theme="navy"]{--bg:#1E346D; --fg:#FFFFFF; --fg-2:rgba(255,255,255,.72); --accent:#A27F55; --card:rgba(255,255,255,.08); --line:rgba(255,255,255,.18)}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg); color:var(--fg); font-family:var(--font); font-size:17px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  transition:--bg .5s ease, --fg .5s ease, --fg-2 .5s ease, --accent .5s ease, --card .5s ease, --line .5s ease}
[data-theme]{background:var(--bg); color:var(--fg)}
html.flow main > section[data-t], html.flow footer[data-t]{background:transparent; color:inherit}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit}
img{display:block; max-width:100%; height:auto}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}
h1,h2,h3{margin:0; font-weight:600; letter-spacing:-0.045em; line-height:1; text-wrap:balance}
p{margin:0}
.wrap{max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter)}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* small text */
.label{display:inline-flex; align-items:center; gap:10px; font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-2)}
.w{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; margin-bottom:-.08em; perspective:600px}
.w > span{display:inline-block; transform-origin:50% 100%}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:15px 28px; border-radius:999px; font-size:16px; font-weight:500; border:1px solid transparent; transition:background .25s, color .25s, border-color .25s; white-space:nowrap; cursor:pointer}
.btn.primary{background:var(--fg); color:var(--bg)}
.btn.primary:hover{background:var(--camel); color:#0A0A0A}
.btn.on-film{background:#fff; color:#0A0A0A}
.btn.on-film:hover{background:var(--camel)}
.btn.on-film.line{background:transparent; color:#fff; border-color:rgba(255,255,255,.7)}
.btn.on-film.line:hover{background:#fff; color:#0A0A0A}
.link{font-weight:500; border-bottom:1px solid currentColor; padding-bottom:2px; justify-self:start}
.link::after{content:" →"}

/* header */
header.site{position:fixed; top:0; left:0; right:0; z-index:40; padding-top:env(safe-area-inset-top,0px); color:#fff; transition:background .4s, color .4s}
header.site.scrolled{background:color-mix(in srgb, var(--bg) 82%, transparent); color:var(--fg); backdrop-filter:saturate(160%) blur(18px); -webkit-backdrop-filter:saturate(160%) blur(18px)}
header.site .row{display:flex; align-items:center; justify-content:space-between; gap:20px; height:60px}
.mark{font-family:var(--serif); font-size:18px; letter-spacing:.34em}
nav.primary{display:flex; gap:26px; font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase}
nav.primary a{opacity:.75; transition:opacity .2s}
nav.primary a:hover{opacity:1}
.hdr-right{display:flex; align-items:center; gap:14px}
.langs{display:flex; gap:2px; font-size:11px; font-weight:600; letter-spacing:.08em}
.langs a{padding:6px; opacity:.5}
.langs a:hover,.langs a[aria-current]{opacity:1}
.langs a[aria-current]{text-decoration:underline; text-underline-offset:4px}
.hdr-cta{padding:9px 18px; font-size:14px; background:#fff; color:#0A0A0A}
header.site.scrolled .hdr-cta{background:var(--fg); color:var(--bg)}
@media (max-width:960px){ nav.primary{display:none} }
@media (max-width:560px){ .hdr-cta{display:none} }

/* hero */
.hero{position:relative; height:100svh; min-height:580px; max-height:1100px; color:#fff}
.film{position:absolute; inset:0; overflow:hidden; background:#000; transform-origin:50% 0}
.film img,.film video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.film .slide{opacity:0; transition:opacity .6s ease}
.film .slide.on{opacity:1}
.film .slide.on img{animation:kb 7s ease-out both}
@keyframes kb{from{transform:scale(1.14)}to{transform:scale(1)}}
.film::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,10,10,.45) 0%,rgba(10,10,10,0) 30%,rgba(10,10,10,0) 45%,rgba(10,10,10,.85) 100%)}
.hero-copy{position:absolute; left:0; right:0; bottom:clamp(32px,7vh,72px); z-index:2; display:grid; gap:18px}
.hero .label{color:var(--camel)}
.hero h1{font-size:clamp(46px,7.6vw,118px); max-width:11ch; letter-spacing:-0.055em}
.hero .sub{font-size:clamp(16px,1.4vw,19px); color:rgba(255,255,255,.82)}
.hero .ctas{margin-top:6px; display:flex; flex-wrap:wrap; gap:12px}
.film-ctrl{position:absolute; right:var(--gutter); bottom:clamp(32px,7vh,72px); z-index:3; width:44px; height:44px; border-radius:50%; border:0; background:rgba(255,255,255,.18); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); display:grid; place-items:center; cursor:pointer}
.film-ctrl svg{width:14px; height:14px; fill:#fff}
@media (max-width:640px){ .film-ctrl{bottom:auto; top:calc(76px + env(safe-area-inset-top,0px))} }

/* client strap */
.strap{overflow:hidden; padding-block:clamp(20px,2.6vw,34px)}
.mq{display:flex; width:max-content; will-change:transform}
.mq span{font-family:var(--serif); font-size:clamp(46px,8vw,124px); line-height:1.05; white-space:nowrap; padding-right:.6em; display:inline-flex; align-items:center; gap:.6em}
.mq span{padding-right:1.1em}

/* big founder line */
.big{padding-block:clamp(110px,15vw,220px) clamp(72px,9vw,130px)}
.big-line{font-size:clamp(50px,8.6vw,140px); letter-spacing:-0.06em; line-height:.94; max-width:12ch}
.big-sub{margin-top:28px; font-size:clamp(18px,1.8vw,24px); font-weight:500; letter-spacing:-0.01em}
.founder{margin-top:14px; display:flex; gap:10px; align-items:baseline; font-size:13px; color:var(--fg-2); max-width:60ch}
.founder .star{color:var(--camel)}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,48px); margin-top:clamp(80px,10vw,140px)}
.stat{border-top:1px solid var(--line); padding-top:18px}
.stat small{display:block; font-size:12px; font-weight:500; color:var(--fg-2); min-height:2.6em}
.stat b{display:block; margin-top:8px; font-size:clamp(44px,6vw,92px); font-weight:600; letter-spacing:-0.05em; line-height:1; white-space:nowrap; font-variant-numeric:tabular-nums}
@media (max-width:760px){ .stats{grid-template-columns:1fr} .stat small{min-height:0} }

/* realism: three words flip in 3D */
.real-stage{min-height:100svh; display:grid; place-content:center; justify-items:center; gap:28px; padding:96px var(--gutter); text-align:center; overflow:hidden}
.flip{position:relative; perspective:1200px; display:grid; gap:56px}
.flip-item{display:grid; gap:18px; justify-items:center; transform-style:preserve-3d; backface-visibility:hidden}
.flip-word{font-size:clamp(52px,11.5vw,196px); font-weight:600; letter-spacing:-0.06em; line-height:.9}
.flip-item:nth-child(2) .flip-word{font-family:var(--serif); font-weight:400; letter-spacing:-0.03em}
.flip-cap{font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--camel)}
html.pinned .flip{gap:0}
html.pinned .flip-item{grid-area:1/1}

/* section heads */
.sec{padding-block:clamp(80px,10vw,150px)}
.sec-head{display:flex; justify-content:space-between; align-items:end; gap:24px; flex-wrap:wrap; margin-bottom:clamp(32px,4vw,56px)}
.sec-head .t{display:grid; gap:18px}
.sec-head h2{font-size:clamp(46px,7.4vw,116px); letter-spacing:-0.055em}
.arrows{display:flex; gap:10px}
.arrows button{width:50px; height:50px; border-radius:50%; border:1px solid var(--line); background:transparent; cursor:pointer; display:grid; place-items:center; transition:border-color .2s, opacity .2s}
.arrows button:hover{border-color:var(--fg)}
.arrows button:disabled{opacity:.3; cursor:default}
.arrows svg{width:16px; height:16px; stroke:var(--fg); fill:none; stroke-width:2}

/* work: 3D coverflow */
.rail{display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:max(var(--gutter), calc((100vw - var(--max))/2 + var(--gutter))); padding:24px max(var(--gutter), calc((100vw - var(--max))/2 + var(--gutter))) 16px; scrollbar-width:none; perspective:1400px}
.rail::-webkit-scrollbar{display:none}
.work-card{flex:none; width:clamp(250px,28vw,380px); scroll-snap-align:start; margin:0; transform-style:preserve-3d; will-change:transform}
.work-card .pic{aspect-ratio:4/5; border-radius:18px; overflow:hidden; background:var(--card); box-shadow:0 30px 60px -30px rgba(0,0,0,.35)}
.work-card img{width:100%; height:100%; object-fit:cover}
.work-card figcaption{padding:16px 2px 0; display:grid; gap:4px}
.work-card figcaption span{font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-2)}
.work-card figcaption b{font-size:21px; font-weight:600; letter-spacing:-0.02em}

/* services: image tiles, words on top */
.tiles{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; perspective:1400px}
.tile{position:relative; overflow:hidden; border-radius:24px; aspect-ratio:4/3.4; background:#000; color:#fff; transform-style:preserve-3d; will-change:transform}
.tile .pic{position:absolute; inset:0}
.tile .pic img{width:100%; height:100%; object-fit:cover; object-position:50% 25%; transition:transform 1.2s var(--ease)}
.tile:hover .pic img{transform:scale(1.07)}
.tile::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,10,10,0) 35%,rgba(10,10,10,.82) 100%)}
.tile-copy{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:clamp(22px,2.6vw,34px); display:grid; gap:8px}
.tile .meta{font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--camel)}
.tile h3{font-size:clamp(30px,3.2vw,48px); letter-spacing:-0.045em}
.tile p{color:rgba(255,255,255,.8)}
@media (max-width:820px){ .tiles{grid-template-columns:1fr} .tile{aspect-ratio:4/4.4} }

/* made for */
.madefor{padding-block:clamp(96px,13vw,200px); overflow:hidden}
.madefor .label{margin-bottom:28px}
.madefor .huge{font-size:clamp(56px,11.5vw,188px); font-weight:600; letter-spacing:-0.06em; line-height:.92}
.rot-box{display:block; perspective:900px; min-height:1.05em}
.rotator{display:inline-block; white-space:nowrap; color:#fff; font-family:var(--serif); font-weight:400; letter-spacing:-0.02em; transform-origin:50% 50% -.5em}

/* how it works: three words */
.how-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.how-item{display:grid; gap:10px; border-top:1px solid var(--line); padding-top:20px}
.how-n{font-size:11px; font-weight:600; letter-spacing:.16em; color:var(--fg-2)}
.how-w{font-size:clamp(46px,6.6vw,104px); font-weight:600; letter-spacing:-0.055em; line-height:.95}
.how-item:nth-child(2) .how-w{font-family:var(--serif); font-weight:400; letter-spacing:-0.02em}
.how-c{color:var(--fg-2)}
@media (max-width:760px){ .how-list{grid-template-columns:1fr; gap:36px} }

/* FAQ */
.faq-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(32px,5vw,80px); align-items:start}
.faq-grid .sec-head{position:sticky; top:100px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:24px; padding:22px 0}
.faq summary h3{font-size:clamp(18px,1.6vw,21px); font-weight:600; letter-spacing:-0.015em; line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none; width:34px; height:34px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; font-size:20px; transition:transform .35s var(--ease), background .3s, color .3s}
.faq details[open] .pm{transform:rotate(45deg); background:var(--fg); color:var(--bg)}
.faq details p{padding:0 48px 24px 0; color:var(--fg-2); max-width:62ch}
@media (max-width:900px){ .faq-grid{grid-template-columns:1fr} .faq-grid .sec-head{position:static} }

/* contact */
.final{padding-block:clamp(110px,14vw,200px)}
.final .head{text-align:center; display:grid; justify-items:center; gap:18px}
.final h2{font-size:clamp(50px,8.6vw,132px); max-width:12ch; letter-spacing:-0.06em}
.final .head p{color:var(--fg-2); font-size:clamp(16px,1.4vw,19px)}
.quote,.sent{max-width:640px; margin:52px auto 0; text-align:left; display:grid; gap:20px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.field{display:grid; gap:6px; border:0; margin:0; padding:0; min-width:0}
.field > span,.field legend{font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-2); padding:0; margin-bottom:6px}
.field input,.field textarea{font:inherit; font-size:17px; color:var(--fg); background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:10px 0 12px; width:100%; transition:border-color .25s}
.field input:focus,.field textarea:focus{outline:none; border-bottom-color:var(--camel)}
.field textarea{resize:vertical; min-height:48px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{position:relative}
.chip input{position:absolute; inset:0; opacity:0; cursor:pointer}
.chip span{display:inline-block; padding:10px 18px; border-radius:999px; border:1px solid var(--line); font-size:15px; transition:background .2s, color .2s, border-color .2s}
.chip input:checked + span{background:var(--camel); border-color:var(--camel); color:#0A0A0A}
.chip input:focus-visible + span{outline:2px solid var(--fg); outline-offset:2px}
.consent{display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--fg-2)}
.consent input{margin-top:2px; accent-color:#A27F55}
.consent a{color:var(--fg); text-decoration:underline; text-underline-offset:3px}
.quote .send{justify-self:start; margin-top:6px; padding:17px 38px; background:var(--camel); color:#0A0A0A}
.quote .send:hover{background:#fff}
.quote .send[disabled]{opacity:.6}
.form-err{color:#FFB4A8; font-size:15px}
.sent{text-align:center; justify-items:center; padding:48px 24px; border-radius:24px; background:var(--card)}
.sent h3{font-size:clamp(32px,3.4vw,48px)}
.sent p{color:var(--fg-2)}
.sent .note{font-size:13px}
.final .alt{margin-top:32px; text-align:center; font-size:13px; color:var(--fg-2)}
.final .alt a,.final .alt button{color:var(--fg); text-decoration:underline; text-underline-offset:3px}
.final .alt button{border:0; background:none; cursor:pointer; font-size:13px; padding:0 0 0 6px}
@media (max-width:560px){ .row2{grid-template-columns:1fr} .quote .send{justify-self:stretch} }

/* footer */
footer{font-size:13px; padding-block:0 28px}
footer .row{display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; border-top:1px solid var(--line); padding-top:24px; color:var(--fg-2)}
footer .about{max-width:56ch}
footer nav{display:flex; flex-wrap:wrap; gap:18px}
footer a:hover{color:var(--fg)}

/* FAQ page */
.faq-page{padding-block:120px 64px; max-width:900px}
.crumbs{font-size:12px; color:var(--fg-2); margin-bottom:22px}
.crumbs a{text-decoration:underline; text-underline-offset:3px}
.faq-page h1{font-size:clamp(38px,5.4vw,72px); letter-spacing:-0.05em; margin-bottom:clamp(32px,4vw,52px)}
.faq-cta{margin-top:48px}

.mcta{position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom,0px)); z-index:30; display:none}
.mcta .btn{width:100%; padding-block:15px; background:var(--camel); color:#0A0A0A; box-shadow:0 10px 30px -10px rgba(0,0,0,.45)}
@media (max-width:640px){ .mcta{display:block} footer{padding-bottom:96px} }

@media (prefers-reduced-motion: reduce){ .film .slide.on img{animation:none} .film .slide{transition:none} body{transition:none} }

/* Reviews */
.review-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px}
.review{margin:0; padding:28px; border-radius:22px; background:var(--card); display:grid; gap:16px; align-content:start}
.review .stars{color:var(--camel); letter-spacing:.1em}
.review blockquote{margin:0; font-size:clamp(18px,1.6vw,21px); line-height:1.4; letter-spacing:-0.01em}
.review figcaption{display:grid; gap:2px; font-size:14px}
.review figcaption span{color:var(--fg-2)}
footer .open-review{border:0; background:none; padding:0; cursor:pointer; font-size:13px; color:inherit; text-decoration:underline; text-underline-offset:3px}
.rv-dialog{border:0; border-radius:24px; padding:clamp(24px,4vw,40px); width:min(560px,calc(100% - 32px)); max-height:calc(100svh - 32px); background:#0A0A0A; color:#fff;
  --bg:#0A0A0A; --fg:#FFFFFF; --fg-2:rgba(255,255,255,.62); --card:rgba(255,255,255,.07); --line:rgba(255,255,255,.18)}
.rv-dialog::backdrop{background:rgba(10,10,10,.6); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.rv-dialog .quote,.rv-dialog .sent{margin:0; max-width:none}
.rv-dialog h2{font-size:clamp(30px,3.4vw,44px)}
.star-row{display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:4px}
.star-in{position:relative; cursor:pointer; font-size:32px; line-height:1; color:rgba(255,255,255,.25)}
.star-in input{position:absolute; opacity:0; inset:0; cursor:pointer}
.star-in:hover, .star-in:hover ~ .star-in, .star-in:has(input:checked), .star-in:has(input:checked) ~ .star-in{color:var(--camel)}
.star-in:has(input:focus-visible){outline:2px solid #fff; outline-offset:2px; border-radius:4px}
.rv-actions{display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.rv-close{border:0; background:none; color:var(--fg-2); cursor:pointer; text-decoration:underline; text-underline-offset:3px}

/* Rotating statement: one line at a time, flips in 3D */
.big{padding-block:clamp(120px,16vw,230px) clamp(80px,10vw,140px)}
.lines{display:grid; perspective:1200px; font-size:clamp(48px,8.2vw,132px); letter-spacing:-0.055em; line-height:.98; min-height:2.1em}
.lines .line{grid-area:1/1; align-self:start; max-width:13ch; opacity:0; transform:rotateX(-70deg) translateY(.3em); transform-origin:50% 100%; transition:opacity .55s var(--ease), transform .8s var(--ease); pointer-events:none}
.lines .line.on{opacity:1; transform:none}
.lines .line.out{opacity:0; transform:rotateX(70deg) translateY(-.3em); transform-origin:50% 0}
.dots{display:flex; gap:8px; margin-top:34px}
.dot{width:36px; height:4px; border:0; padding:0; border-radius:4px; background:var(--line); cursor:pointer; overflow:hidden; position:relative}
.dot i{position:absolute; inset:0; background:var(--fg); transform:scaleX(0); transform-origin:left}
.dot.on i{animation:fill var(--dur,3s) linear forwards}
.dot.done i{transform:scaleX(1)}
@keyframes fill{to{transform:scaleX(1)}}
.founder{margin-top:28px}

/* Real or AI? */
.game{padding-block:clamp(96px,12vw,170px)}
.g-head{display:grid; gap:14px; justify-items:center; text-align:center; margin-bottom:clamp(28px,4vw,48px)}
.g-head h2{font-size:clamp(52px,9vw,148px); letter-spacing:-0.06em}
.g-stage{position:relative; aspect-ratio:16/9; max-width:100%; border-radius:28px; overflow:hidden; background:#000}
.g-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.06); transition:opacity .6s ease, transform 1.4s var(--ease), filter .6s ease}
.g-img.on{opacity:1; transform:scale(1)}
.g-stage.revealed .g-img.on{transform:scale(1.04); filter:brightness(.45)}
.g-ask{position:absolute; left:50%; bottom:clamp(20px,4vw,40px); transform:translateX(-50%); display:flex; gap:10px; padding:6px; border-radius:999px; background:rgba(10,10,10,.45); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)}
.g-btn{border:0; border-radius:999px; padding:14px 34px; font-size:17px; font-weight:600; cursor:pointer; background:#fff; color:#0A0A0A; transition:background .2s, transform .2s}
.g-btn + .g-btn{background:var(--camel)}
.g-btn:hover{transform:scale(1.04)}
.g-reveal{position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:12px; text-align:center; color:#fff; padding:24px}
.g-kicker{font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--camel)}
.g-reveal b{font-size:clamp(40px,6.4vw,104px); letter-spacing:-0.055em; line-height:1; font-weight:600}
.g-reveal span:not(.g-kicker){font-size:clamp(16px,1.5vw,20px); color:rgba(255,255,255,.85)}
.g-next{margin-top:14px; border:1px solid rgba(255,255,255,.6); background:transparent; color:#fff; border-radius:999px; padding:12px 24px; cursor:pointer}
.g-next:hover{background:#fff; color:#0A0A0A}
@media (max-width:640px){ .g-stage{aspect-ratio:4/5} .g-btn{padding:12px 26px} }

/* v14: loud and quiet type, one left edge, more air */
.sm{font-size:.3em; font-weight:500; letter-spacing:.01em; line-height:1; vertical-align:baseline; margin-right:.15em}
h1 em,h2 em,.lines em,.huge em{font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-0.02em}
.hero h1{max-width:9ch}
.hero h1 .sm{font-size:.28em}
.lines{font-size:clamp(54px,9vw,150px); line-height:.96}
.lines .line{max-width:none}
.sec-head h2 .sm{font-size:.28em}
.madefor .huge .sm{display:block; font-size:.2em; letter-spacing:.02em; margin-bottom:.2em}
.g-head{justify-items:start; text-align:left}
.final .head{text-align:left; justify-items:start}
.final h2{max-width:14ch}
.quote,.sent{margin-left:0}
.final .alt{text-align:left}
.label{font-size:11px; letter-spacing:.2em}
.big .wrap,.game .wrap,.madefor .wrap{max-width:var(--max)}
.sm .w{vertical-align:baseline}

/* v15: one font, one voice. Big simple type, strict left edge. */
body{font-size:17px; letter-spacing:-0.005em}
h1,h2,h3{font-weight:600; letter-spacing:-0.04em}
.sm{font-size:inherit; font-weight:inherit; margin:0}
h1 em,h2 em,.lines em,.huge em{font-family:inherit; font-style:normal; font-weight:inherit; letter-spacing:inherit}
.label{font-size:15px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--fg-2)}
.hero .label{color:rgba(255,255,255,.75)}
.hero h1{font-size:clamp(52px,8vw,128px); max-width:12ch; line-height:.95; letter-spacing:-0.05em}
.hero .sub{font-size:clamp(18px,1.6vw,22px); max-width:34ch; line-height:1.4}
.lines{font-size:clamp(52px,8vw,128px); line-height:1; letter-spacing:-0.05em}
.lines .line{max-width:14ch}
.sec-head h2,.g-head h2,.final h2{font-size:clamp(52px,8vw,128px); letter-spacing:-0.05em; line-height:.95}
.final h2{max-width:12ch}
.madefor .huge{font-size:clamp(52px,10vw,160px); letter-spacing:-0.05em; line-height:.95}
.madefor .rotator{font-family:inherit; font-weight:600; letter-spacing:-0.05em; color:#fff}
.how-w,.how-item:nth-child(2) .how-w{font-family:inherit; font-weight:600; letter-spacing:-0.05em}
.how-n{font-size:15px; letter-spacing:0}
.stat small,.work-card figcaption span,.tile .meta,.field > span,.field legend{font-size:14px; font-weight:500; letter-spacing:0; text-transform:none}
.stat b{font-size:clamp(48px,6.4vw,100px)}
.tile h3{font-size:clamp(32px,3.4vw,52px)}
.founder{font-size:15px}
nav.primary{font-size:14px; font-weight:500; letter-spacing:0; text-transform:none}
.mark{font-size:19px}

/* v16: one message per screen, carried by motion */
.hero .ctas{margin-top:10px}
.scene{position:relative}
.scene-stage{min-height:100svh; display:grid; align-content:center}
.scene-text{font-size:clamp(52px,8.4vw,136px); line-height:1; letter-spacing:-0.05em; max-width:14ch}
.scene-text .w{padding-bottom:.1em}
.results{padding-block:clamp(110px,14vw,200px)}
.results .label{margin-bottom:28px}
.results .lines{font-size:clamp(52px,8.4vw,136px)}
.services .label{display:block; margin-bottom:clamp(24px,3vw,40px)}
.svc-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.svc-row{position:relative; display:grid; grid-template-columns:1fr auto; align-items:center; gap:24px; padding:clamp(18px,2.4vw,30px) 0; border-bottom:1px solid var(--line); cursor:default}
.svc-name{font-size:clamp(52px,8.4vw,136px); font-weight:600; letter-spacing:-0.05em; line-height:.95; transition:transform .6s var(--ease), color .3s}
.svc-line{max-width:28ch; text-align:right; color:var(--fg-2); font-size:clamp(15px,1.3vw,18px); transition:color .3s}
.svc-img{position:absolute; right:clamp(200px,24vw,380px); top:50%; width:clamp(120px,12vw,180px); aspect-ratio:3/4; border-radius:14px; overflow:hidden; opacity:0; transform:translateY(-50%) scale(.85) rotate(-4deg); transition:opacity .4s, transform .6s var(--ease); pointer-events:none}
.svc-img img{width:100%; height:100%; object-fit:cover}
@media (hover:hover){
  .svc-row:hover .svc-name{transform:translateX(18px)}
  .svc-row:hover .svc-line{color:var(--fg)}
  .svc-row:hover .svc-img{opacity:1; transform:translateY(-50%) scale(1) rotate(-4deg)}
}
@media (max-width:760px){ .svc-row{grid-template-columns:1fr; gap:8px} .svc-line{text-align:left} .svc-img{display:none} }
.formats{padding-block:clamp(110px,14vw,200px)}
.fmt-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,80px); align-items:center}
.fmt-copy h2{font-size:clamp(46px,6.6vw,104px); letter-spacing:-0.05em; line-height:.98}
.fmt-copy p{margin-top:22px; font-size:clamp(18px,1.6vw,22px); color:var(--fg-2)}
.fmt-copy .hello{margin-top:36px; font-size:clamp(40px,5vw,72px); font-weight:600; letter-spacing:-0.04em; color:var(--camel); min-height:1.2em; perspective:600px}
.hello span{display:inline-block}
.fmt-box{position:relative; aspect-ratio:1; max-width:100%; display:grid; place-items:center}
.fmt-frame{position:relative; height:100%; width:56.25%; border-radius:22px; overflow:hidden; box-shadow:0 40px 80px -30px rgba(0,0,0,.6); transition:width .9s var(--ease), height .9s var(--ease)}
.fmt-frame img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .6s var(--ease)}
.fmt-frame img.on{opacity:1}   /* one picture made for each format, shown when the frame takes that shape */
.fmt-ratio{position:absolute; left:14px; bottom:12px; padding:6px 12px; border-radius:999px; background:rgba(10,10,10,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:#fff; font-size:14px; font-weight:600}
@media (max-width:820px){ .fmt-grid{grid-template-columns:1fr} }
.proof{padding-block:clamp(110px,14vw,200px) clamp(72px,9vw,120px)}
.proof-h{font-size:clamp(46px,6.6vw,104px); letter-spacing:-0.05em; line-height:.98; max-width:16ch}
.proof .founder{margin-top:24px}
.madefor .huge{max-width:none}
.sec-head h2{margin:0}

/* ===== v17: Metapic ideas, Novaia style ===== */
/* hero: headline, then a phone with content orbiting it */
.hero2{position:relative; min-height:100svh; padding-top:clamp(120px,16vh,170px); overflow:hidden; color:#fff}
.hero2-copy{text-align:center; display:grid; justify-items:center; gap:20px; position:relative; z-index:3}
.hero2 h1{font-size:clamp(50px,7.4vw,120px); max-width:13ch; line-height:.95; letter-spacing:-0.05em}
.hero2 .sub{font-size:clamp(17px,1.5vw,21px); color:rgba(255,255,255,.72); max-width:40ch}
.hero2 .ctas{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:6px}
.orbit{position:relative; height:clamp(560px,84svh,860px); margin-top:clamp(28px,5vh,56px)}
.phone{position:absolute; left:50%; top:0; transform:translateX(-50%); width:clamp(230px,19vw,300px); aspect-ratio:9/19; border-radius:44px; padding:9px; background:#1b1b1b; box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 60px 120px -40px rgba(0,0,0,.9); z-index:2}
.phone.small{position:relative; left:auto; top:auto; transform:none; width:clamp(240px,22vw,310px)}
.phone-screen{position:relative; width:100%; height:100%; border-radius:36px; overflow:hidden; background:#000}
.phone-screen .slide,.phone-screen .scr{position:absolute; inset:0; opacity:0; transition:opacity .9s ease}
.phone-screen .slide.on,.phone-screen .scr.on{opacity:1}
.phone-screen img{width:100%; height:100%; object-fit:cover}
.phone-screen .slide.on img{animation:kb 5s ease-out both}
.ad-top{position:absolute; left:14px; right:14px; top:16px; display:flex; gap:8px; align-items:center; color:#fff; font-size:12px; opacity:.9; z-index:2}
.ad-top b{font-family:var(--serif); font-weight:400; letter-spacing:.2em; font-size:12px}
.ad-cta{position:absolute; left:14px; right:14px; bottom:16px; padding:12px; border-radius:12px; text-align:center; background:#fff; color:#0A0A0A; font-size:14px; font-weight:600; z-index:2}
.orb{position:absolute; left:50%; top:42%; transform:translate(calc(-50% + var(--x,0px)), calc(-50% + var(--y,0px))); z-index:1; will-change:transform}
.o-img{width:clamp(120px,12vw,190px); aspect-ratio:4/5; border-radius:20px; overflow:hidden; box-shadow:0 30px 60px -25px rgba(0,0,0,.8)}
.o-img img{width:100%; height:100%; object-fit:cover}
.o-chip{padding:12px 20px; border-radius:999px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); color:#fff; font-size:clamp(15px,1.3vw,19px); font-weight:600; white-space:nowrap}
.o-chip:nth-of-type(odd){background:var(--camel); border-color:var(--camel); color:#0A0A0A}
.hero2 .film-ctrl{bottom:24px}
@media (max-width:760px){ .o-img{width:96px; border-radius:14px} .o-chip{font-size:13px; padding:9px 14px} .orbit{height:560px} }

/* statement with pictures inside the words */
.pill{display:inline-block; width:1.5em; height:.82em; border-radius:999px; overflow:hidden; vertical-align:-.04em; margin-inline:.04em}
.pill img{width:100%; height:100%; object-fit:cover}

/* which one is real? */
.g-hint{color:var(--fg-2); font-size:clamp(16px,1.4vw,19px)}
.g3{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.6vw,22px); perspective:1400px}
.g3-card{border:0; padding:0; background:none; cursor:pointer; aspect-ratio:4/5; border-radius:24px}
.g3-in{position:relative; display:block; width:100%; height:100%; border-radius:24px; overflow:hidden; transition:transform .8s var(--ease)}
.g3-card:hover .g3-in{transform:translateY(-8px)}
.g3-in img{width:100%; height:100%; object-fit:cover; transition:filter .6s ease, transform 1s var(--ease)}
.g3-badge{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.6); opacity:0; padding:12px 24px; border-radius:999px; background:var(--camel); color:#0A0A0A; font-weight:600; font-size:clamp(18px,1.6vw,24px); transition:opacity .4s, transform .6s var(--ease)}
.g3.done .g3-in img{filter:brightness(.45)}
.g3.done .g3-badge{opacity:1; transform:translate(-50%,-50%) scale(1)}
.g3-reveal{margin-top:clamp(28px,4vw,48px); display:grid; gap:10px; justify-items:start}
.g3-reveal b{font-size:clamp(40px,6vw,96px); font-weight:600; letter-spacing:-0.05em; line-height:1}
.g3-reveal span{color:var(--fg-2); font-size:clamp(16px,1.4vw,19px)}
@media (max-width:640px){ .g3{grid-template-columns:1fr 1fr 1fr; gap:8px} .g3-card,.g3-in{border-radius:14px} }

/* bento: brands / agencies */
.bento-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.bcard{position:relative; overflow:hidden; border-radius:32px; padding:clamp(28px,3.4vw,48px); min-height:clamp(520px,44vw,620px); display:flex; flex-direction:column; gap:18px; align-items:flex-start}
.bcard h2{font-size:clamp(30px,3vw,46px); letter-spacing:-0.04em; line-height:1.05; max-width:16ch}
.bcard .btn.primary{background:var(--fg); color:var(--bg)}
.bimgs{margin-top:auto; align-self:stretch; display:flex; gap:12px; justify-content:center; transform:translateY(36px); transition:transform .8s var(--ease)}
.bcard:hover .bimgs{transform:translateY(14px)}
.bimgs img{width:30%; aspect-ratio:3/4; object-fit:cover; border-radius:16px; box-shadow:0 20px 40px -20px rgba(0,0,0,.5)}
.bimgs img:nth-child(2){transform:translateY(-22px)}
@media (max-width:860px){ .bento-grid{grid-template-columns:1fr} }

/* how it works: sticky phone */
.how2{padding-block:clamp(40px,6vw,80px)}
.how2-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,80px)}
.h2-step{min-height:70svh; display:grid; align-content:center; gap:12px; opacity:.25; transition:opacity .5s ease}
.h2-step.on{opacity:1}
.h2-step .how-w{font-size:clamp(56px,8vw,128px)}
.how2-phone{position:sticky; top:12svh; height:76svh; display:grid; place-items:center}
.scr.moods{display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:44px 8px 8px; background:#0A0A0A}
.scr.moods img{border-radius:12px}
.scr-tag{position:absolute; left:14px; top:16px; padding:6px 12px; border-radius:999px; background:rgba(10,10,10,.55); color:#fff; font-size:12px; font-weight:600; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
@media (max-width:760px){ .how2-grid{grid-template-columns:1fr} .how2-phone{display:none} .h2-step{min-height:auto; padding-block:28px; opacity:1} }

/* FAQ tabs */
.tabs{display:inline-flex; gap:4px; padding:5px; border-radius:999px; background:var(--card); margin-bottom:20px; flex-wrap:wrap}
.tab{border:0; background:transparent; padding:10px 20px; border-radius:999px; cursor:pointer; font-size:15px; font-weight:500; color:var(--fg-2); transition:background .3s, color .3s}
.tab.on{background:var(--fg); color:var(--bg)}
.faq details{border:0; border-radius:18px; background:var(--card); margin-bottom:10px; padding-inline:22px}
.faq details:first-child{border-top:0}
.faq details p{padding-right:0}

/* contact panel */
.final .panel{border-radius:36px; padding:clamp(28px,5vw,72px); color:var(--fg); background:var(--bg)}
.panel .chip input:checked + span{background:#0A0A0A; border-color:#0A0A0A; color:#fff}
.panel .quote .send{background:#0A0A0A; color:#fff}
.panel .quote .send:hover{background:#fff; color:#0A0A0A}
.panel .field input:focus,.panel .field textarea:focus{border-bottom-color:#0A0A0A}
.panel .consent input{accent-color:#0A0A0A}
.panel .sent{background:rgba(255,255,255,.25)}
.scene-text{line-height:1.06}
.scene-text .pill{vertical-align:top; margin-top:.14em}

/* v18 */
.zero .zero-flip{display:block; margin-top:12px; font-size:clamp(18px,1.6vw,22px); font-weight:600; letter-spacing:-0.01em; color:var(--fg); min-height:1.3em}
.stat b .cur{display:inline-block}
.final-head{text-align:left}
.final-head h2{font-size:clamp(52px,8vw,128px); letter-spacing:-0.05em; line-height:.95; max-width:12ch}
.offer{position:relative; margin-top:clamp(32px,4vw,56px); display:flex; align-items:center; gap:clamp(18px,3vw,36px); padding:clamp(22px,3vw,36px); border-radius:28px; overflow:hidden;
  background:linear-gradient(110deg,#A27F55 0%,#C9A574 45%,#A27F55 60%,#8E6C45 100%); background-size:220% 100%; animation:shine 5s linear infinite; color:#0A0A0A}
@keyframes shine{to{background-position:-220% 0}}
.offer-tag{flex:none; display:grid; place-items:center; width:clamp(96px,10vw,132px); aspect-ratio:1; border-radius:50%; background:#0A0A0A; color:#fff; font-size:clamp(20px,2vw,28px); font-weight:700; letter-spacing:-0.02em; animation:wob 3s ease-in-out infinite}
@keyframes wob{0%,100%{transform:rotate(-8deg) scale(1)}50%{transform:rotate(6deg) scale(1.06)}}
.offer-h{font-size:clamp(28px,3.6vw,56px); font-weight:600; letter-spacing:-0.045em; line-height:1}
.offer-p{margin-top:10px; font-size:clamp(15px,1.3vw,18px); color:rgba(10,10,10,.75); max-width:52ch}
@media (max-width:640px){ .offer{flex-direction:column; align-items:flex-start} }
.final .panel{margin-top:20px; background:#fff; color:#0A0A0A}
.final .panel .quote{margin:0; max-width:none}
.final .panel .sent{margin:0}
.final .panel .field > span,.final .panel .field legend{color:#555}
.final .panel .field input,.final .panel .field textarea{color:#0A0A0A; border-bottom-color:rgba(10,10,10,.2)}
.final .panel .chip span{border-color:rgba(10,10,10,.2); color:#0A0A0A}
.final .panel .consent{color:#555}
.final .panel .consent a{color:#0A0A0A}
.final .panel .sent{background:#F3F3F3}
.final .panel .sent p{color:#555}
@media (prefers-reduced-motion: reduce){ .offer,.offer-tag{animation:none} }

/* v19: Shoot less. Sell more. */
.swap-sec{padding-block:clamp(120px,16vw,230px)}
.swap{font-size:clamp(60px,11vw,184px); line-height:1; letter-spacing:-0.055em; display:grid; gap:.04em; perspective:1000px}
.sw-line{display:block}
.sw-word{display:inline-block; background:var(--camel); color:#0A0A0A; padding:0 .14em .02em; border-radius:.14em; transform-origin:50% 50% -.3em; transition:width .4s var(--ease)}

/* v20: research facts */
.swap-sec{padding-bottom:clamp(40px,6vw,80px)}
.facts-sec{padding-block:clamp(40px,6vw,80px) clamp(110px,14vw,190px)}
.facts-sec .label{display:block; margin-bottom:clamp(24px,3vw,40px)}
.facts{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,48px)}
.fact{border-top:1px solid var(--line); padding-top:20px; display:grid; gap:12px; align-content:start}
.fact b{font-size:clamp(56px,7vw,112px); font-weight:600; letter-spacing:-0.05em; line-height:1; white-space:nowrap}
.fact p{font-size:clamp(17px,1.5vw,20px); line-height:1.35}
.fact small{font-size:13px; color:var(--fg-2)}
.facts-close{margin-top:clamp(40px,5vw,72px); font-size:clamp(26px,3vw,44px); font-weight:600; letter-spacing:-0.035em; line-height:1.1; max-width:24ch}
@media (max-width:760px){ .facts{grid-template-columns:1fr} }

/* ===== v21: black and white only. Emphasis comes from type: scribbles, size, grey to black. ===== */
:root{--camel:#FFFFFF; --navy:#0A0A0A}
[data-theme="black"]{--accent:#FFFFFF}
[data-theme="white"]{--accent:#0A0A0A}
.strap{border-block:1px solid rgba(255,255,255,.14)}
.hero .label,.hero2 .label{color:rgba(255,255,255,.75)}
.btn.primary:hover{background:var(--fg); color:var(--bg); opacity:.82}
.btn.on-film:hover{background:#dcdcdc; color:#0A0A0A}
.tile .meta{color:rgba(255,255,255,.7)}
.fmt-copy .hello{color:var(--fg)}
.chip input:checked + span{background:var(--fg); border-color:var(--fg); color:var(--bg)}
.quote .send{background:var(--fg); color:var(--bg)}
.quote .send:hover{opacity:.85; background:var(--fg)}
.field input:focus,.field textarea:focus{border-bottom-color:var(--fg)}
.consent input{accent-color:#0A0A0A}
.g3-badge{background:#fff; color:#0A0A0A}
.mcta .btn{background:#0A0A0A; color:#fff; border:1px solid rgba(255,255,255,.25)}
.madefor .rotator{color:#fff}
.b-agencies{border:1px solid var(--line)}
.b-brands .btn.primary{background:#fff; color:#0A0A0A}
.b-agencies .btn.primary{background:#0A0A0A; color:#fff}
/* offer: white card on black, black badge */
.offer{background:#fff; color:#0A0A0A; animation:none; border:1px solid #fff}
.offer::after{content:""; position:absolute; inset:0; background:linear-gradient(105deg,transparent 35%,rgba(10,10,10,.06) 50%,transparent 65%); background-size:250% 100%; animation:shine 3.5s linear infinite; pointer-events:none}
.offer-tag{background:#0A0A0A; color:#fff}
.offer-p{color:#555}

/* the line: words start grey, land black; old words get scribbled out */
.sw-word{position:relative; background:none; color:var(--fg); padding:0; border-radius:0}
.sw-word.enter{color:var(--fg-2)}
.scrib{position:absolute; left:-4%; top:18%; width:108%; height:64%; overflow:visible; pointer-events:none}
.scrib path{fill:none; stroke:currentColor; stroke-width:.09em; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke}
.swap{overflow:visible}

/* facts: four platform findings */
.facts{grid-template-columns:repeat(4,1fr)}
.fact b{font-size:clamp(48px,5.4vw,92px)}
.fact small{font-weight:600; color:var(--fg)}
@media (max-width:1000px){ .facts{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .facts{grid-template-columns:1fr} }
/* emphasis by size: the close line grows in */
.facts-close{transform-origin:0 50%}

/* v22: particle field back (black and white) */
#gl{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none}
main,header,footer{position:relative; z-index:2}
.scrib{display:none}

/* v23: Endless content for … */
.madefor .huge{font-size:clamp(46px,8.6vw,140px)}
.rot-box{min-height:1.05em}
@media (max-width:640px){ .madefor .rotator{white-space:normal} }

/* v25: Create. Captivate. Convert. stacked, the active word goes full black, the others step back */
.swap{display:grid; gap:0; font-size:clamp(64px,12vw,200px); line-height:.95; letter-spacing:-0.055em}
.swap .sl{display:block; color:var(--fg-2); opacity:.35; transform-origin:0 60%; transition:color .5s ease, opacity .5s ease, transform .7s var(--ease)}
.swap .sl.on{color:var(--fg); opacity:1; transform:scale(1.04)}

/* Empty photo slots until Mai's content arrives: same size, calm grey panel */
.ph{display:block; width:100%; height:100%; background:var(--card)}
.bimgs .ph{width:30%; aspect-ratio:3/4; border-radius:16px; background:rgba(128,128,128,.18)}
.bimgs .ph:nth-child(2){transform:translateY(-22px)}
.work-card .pic .ph,.g3-in .ph,.svc-img .ph,.fmt-frame .ph{position:relative}
.fmt-frame .ph{background:rgba(255,255,255,.08)}
.g3-in .ph{background:rgba(255,255,255,.07)}

/* v27: one big €0 and a colour-flipping promise */
.proof .stats{grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,64px)}
.proof .stat b{font-size:clamp(88px,13vw,210px); line-height:.9; letter-spacing:-0.06em}
.proof .stat.promise b{font-size:clamp(52px,6.6vw,108px); line-height:1; white-space:normal; perspective:800px; transition:color .4s ease}
.proof .zero .zero-flip{font-size:clamp(20px,2vw,28px)}
/* the three accent colours for the flipping promise; change them here */
.adj{display:inline-block; padding:.02em .14em; margin-left:-.14em; border-radius:.12em; transition:color .4s ease, background-color .4s ease}
.adj.c1{color:#0A0A0A; background:transparent}
.adj.c2{color:#9A9A9A; background:transparent}
.adj.c3{color:#FFFFFF; background:#0A0A0A}
@media (max-width:760px){ .proof .stats{grid-template-columns:1fr} }

/* v28: FAQ page topic headings */
.faq-page .faq-group{font-size:clamp(28px,3.4vw,44px); letter-spacing:-0.04em; line-height:1; margin:clamp(56px,7vw,96px) 0 clamp(12px,1.6vw,20px)}
.faq-page h1 + .faq-group{margin-top:0}

/* v29: service + industry landing pages */
.lp{padding-block:120px 64px}
.lp h1{font-size:clamp(48px,8vw,128px); letter-spacing:-0.055em; line-height:.95; max-width:14ch}
.lp-lead{margin:clamp(20px,2.4vw,32px) 0 clamp(28px,3vw,40px); font-size:clamp(19px,1.9vw,26px); line-height:1.35; color:var(--fg-2); max-width:36ch}
.lp-sec{margin-top:clamp(80px,10vw,150px)}
.lp-sec > h2{font-size:clamp(34px,4.6vw,68px); letter-spacing:-0.045em; line-height:1; margin-bottom:clamp(24px,3vw,44px)}
.lp-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,2.4vw,36px)}
.lp-grid.three{grid-template-columns:repeat(3,1fr)}
.lp-card{border-top:1px solid var(--line); padding-top:18px}
.lp-card h3{font-size:clamp(20px,1.8vw,26px); letter-spacing:-0.03em; line-height:1.1; margin-bottom:10px}
.lp-card p{color:var(--fg-2); line-height:1.45}
.lp-steps{list-style:none; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,36px); counter-reset:s}
.lp-steps li{counter-increment:s; border-top:1px solid var(--line); padding-top:18px; display:grid; gap:8px}
.lp-steps li::before{content:counter(s); font-size:clamp(56px,6vw,96px); font-weight:600; letter-spacing:-0.05em; line-height:1}
.lp-steps b{font-size:clamp(22px,2vw,30px); letter-spacing:-0.03em}
.lp-steps span{color:var(--fg-2)}
.lp-more{margin-top:24px}
.lp-more a,.lp-related a{text-decoration:underline; text-underline-offset:4px}
.lp .lp-offer{background:#0A0A0A; color:#fff; border-color:#0A0A0A; margin-top:clamp(80px,10vw,150px); justify-content:space-between; animation:none}
.lp .lp-offer .offer-p{color:rgba(255,255,255,.75)}
.lp .lp-offer .btn{background:#fff; color:#0A0A0A; flex:none}
.lp-related{list-style:none; padding:0; display:grid; gap:6px}
.lp-related a{font-size:clamp(30px,4vw,56px); font-weight:600; letter-spacing:-0.045em; text-decoration:none; transition:color .3s}
.lp-related a:hover{color:var(--fg-2)}
@media (max-width:900px){ .lp-grid{grid-template-columns:1fr 1fr} .lp-grid.three,.lp-steps{grid-template-columns:1fr} }
@media (max-width:560px){ .lp-grid{grid-template-columns:1fr} }
/* footer link columns (internal links for SEO) */
footer .f-links{display:flex; flex-wrap:wrap; gap:clamp(28px,5vw,80px); width:100%; order:3}
footer .f-col{display:flex; flex-direction:column; gap:8px}
footer .f-col b{color:var(--fg); font-weight:600}
a.svc-name{display:block; color:inherit}

/* cookie consent: black and white, left aligned; reject and accept look identical */
.ck-open{border:0; background:none; padding:0; cursor:pointer; font-size:inherit; color:inherit}
.ck-open:hover{color:var(--fg)}
.legal .ck-open{font-size:17px; color:#0A0A0A; text-decoration:underline; text-underline-offset:3px}
.ck{position:fixed; left:clamp(12px,2vw,24px); bottom:calc(clamp(12px,2vw,24px) + env(safe-area-inset-bottom,0px)); z-index:60; width:min(440px, calc(100vw - 24px));
  background:#FFFFFF; color:#0A0A0A; border:1px solid rgba(10,10,10,.12); border-radius:20px; padding:22px; box-shadow:0 24px 60px -24px rgba(0,0,0,.45);
  font-family:var(--font); font-size:14px; line-height:1.45; text-align:left; display:grid; gap:12px}
.ck:focus{outline:none}
.ck-h{font-size:17px; font-weight:600; letter-spacing:-0.01em}
.ck-p{color:#696969}
.ck-p a{color:#0A0A0A; text-decoration:underline; text-underline-offset:3px}
.ck-opts{display:grid; gap:10px; padding-block:4px}
.ck-opt{display:grid; grid-template-columns:18px 1fr; gap:10px; align-items:start; cursor:pointer}
.ck-opt input{width:18px; height:18px; margin:1px 0 0; accent-color:#0A0A0A}
.ck-opt b{display:block; font-weight:600; color:#0A0A0A}
.ck-opt span{color:#696969}
.ck-btns{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.ck-b{flex:1 1 0; min-width:120px; padding:12px 18px; border-radius:999px; border:1px solid #0A0A0A; background:#0A0A0A; color:#FFFFFF; font-size:15px; font-weight:500; cursor:pointer; white-space:nowrap}
.ck-b:hover{opacity:.82}
.ck-more{flex-basis:100%; border:0; background:none; padding:4px 0 0; color:#0A0A0A; font-size:14px; text-align:left; text-decoration:underline; text-underline-offset:3px; cursor:pointer; justify-self:start}
.ck :focus-visible{outline:2px solid #0A0A0A; outline-offset:3px}
@media (max-width:640px){ .ck{left:12px; right:12px; width:auto; padding:18px} }

/* v30: craft section, inline form, links that connect the funnel */
.lp-craft-p{font-size:clamp(19px,1.9vw,26px); line-height:1.35; max-width:40ch; margin:-8px 0 clamp(28px,3vw,44px); color:var(--fg-2)}
.lp-craft-list{list-style:none; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,48px) clamp(20px,2.4vw,36px); counter-reset:c}
.lp-craft-list li{counter-increment:c; border-top:1px solid var(--fg); padding-top:18px}
.lp-craft-list li::before{content:"0" counter(c); display:block; font-size:12px; font-weight:600; letter-spacing:.18em; color:var(--fg-2); margin-bottom:14px}
.lp-craft-list h3{font-size:clamp(24px,2.4vw,36px); letter-spacing:-0.035em; line-height:1.05; margin-bottom:10px}
.lp-craft-list p{color:var(--fg-2); line-height:1.5}
@media (max-width:900px){ .lp-craft-list{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .lp-craft-list{grid-template-columns:1fr} }
.lp-contact{scroll-margin-top:90px}
.lp .lp-offer{margin-top:0; justify-content:flex-start}
.lp .lp-offer .offer-tag{background:#fff; color:#0A0A0A}
.lp-form{margin-top:clamp(40px,5vw,64px); max-width:760px}
.lp-form h2{font-size:clamp(34px,4.6vw,68px); letter-spacing:-0.045em; line-height:1}
.lp-form-p{margin:14px 0 28px; color:var(--fg-2); font-size:clamp(16px,1.4vw,19px); max-width:48ch}
.lp .mcta .btn{background:#0A0A0A; color:#fff}
.b-more{display:inline-block; margin-top:16px; margin-left:4px; text-decoration:underline; text-underline-offset:4px; font-size:15px}
.ind-links{display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:clamp(28px,3vw,44px); font-size:clamp(15px,1.3vw,18px)}
.ind-links a{opacity:.7; text-decoration:underline; text-underline-offset:4px; transition:opacity .3s}
.ind-links a:hover{opacity:1}
.faq-rel{display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:18px; font-size:15px}
.faq-rel span{color:var(--fg-2)}
.faq-rel a{text-decoration:underline; text-underline-offset:4px}

/* v32: header "Services" dropdown */
details.dd{position:static}
details.dd > summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:7px; opacity:.75; transition:opacity .2s}
details.dd > summary::-webkit-details-marker{display:none}
details.dd > summary:hover, details.dd[open] > summary{opacity:1}
.dd-caret{width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .3s var(--ease)}
details.dd[open] .dd-caret{transform:translateY(1px) rotate(225deg)}
.dd-panel{position:fixed; left:0; right:0; top:calc(60px + env(safe-area-inset-top,0px)); background:#fff; color:#0A0A0A; border-bottom:1px solid rgba(10,10,10,.1); box-shadow:0 30px 60px -30px rgba(0,0,0,.35); animation:ddIn .35s var(--ease)}
@keyframes ddIn{from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none}}
.dd-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,64px); padding-block:clamp(28px,3.4vw,48px) clamp(32px,4vw,56px)}
.dd-col{display:flex; flex-direction:column; gap:4px}
.dd-h{font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:rgba(10,10,10,.5); margin-bottom:10px}
.dd-col a{font-size:clamp(18px,1.7vw,24px); font-weight:500; letter-spacing:-0.02em; line-height:1.3; opacity:1; transition:color .2s, transform .3s var(--ease)}
.dd-col a:hover{color:rgba(10,10,10,.55); transform:translateX(4px)}
header.site.dd-on{background:#fff; color:#0A0A0A}
header.site.dd-on .hdr-cta{background:#0A0A0A; color:#fff}
@media (prefers-reduced-motion: reduce){ .dd-panel{animation:none} }
/* phones: keep only the dropdown in the main nav */
@media (max-width:960px){ nav.primary{display:flex} nav.primary > a{display:none} }
@media (max-width:760px){
  .dd-cols{grid-template-columns:1fr; gap:22px; max-height:calc(100dvh - 60px); overflow:auto}
  .dd-col a{font-size:20px}
}
@media (max-width:640px){ .hdr-cta{display:none} .langs a{padding:6px 4px} header.site .row{gap:12px} }
@media (max-width:420px){
  header.site .mark{font-size:15px; letter-spacing:.24em}
  header.site .row{gap:8px}
  .langs{font-size:10px; letter-spacing:.04em} .langs a{padding:6px 3px}
  details.dd > summary{font-size:13px; gap:5px}
}

/* v33: "In depth" SEO copy on landing pages */
.lp-seo{max-width:72ch}
.lp-seo .label{margin-bottom:18px}
.lp-seo h2{font-size:clamp(28px,3.4vw,46px); letter-spacing:-0.04em; line-height:1.05; margin-bottom:clamp(20px,2.4vw,32px)}
.lp-seo p{font-size:clamp(16px,1.35vw,19px); line-height:1.6; color:var(--fg-2)}
.lp-seo p + p{margin-top:1.1em}
.b-brands .b-more{color:#fff}

/* v33b: per-industry topics + trend line */
.lp-topics .label{margin-bottom:18px}
.lp-topics h2{font-size:clamp(28px,3.4vw,46px); letter-spacing:-0.04em; line-height:1.05; margin-bottom:clamp(24px,3vw,44px)}
.lp-trend{margin-top:clamp(28px,3.4vw,48px); padding:clamp(20px,2.4vw,32px); border:1px solid var(--fg); border-radius:20px; display:grid; gap:10px; font-size:clamp(17px,1.5vw,22px); line-height:1.4; max-width:64ch}
.lp-trend .label{color:var(--fg-2)}

/* v34: legal pages */
.legal .upd{color:var(--fg-2); font-size:14px; margin:-16px 0 40px}
.legal h2{font-size:clamp(20px,2vw,26px); letter-spacing:-0.03em; line-height:1.15; margin:36px 0 10px}
.legal p{font-size:16px; line-height:1.65; color:var(--fg-2); max-width:72ch}

/* until Mai's content: no empty panels */
.ph[hidden]{display:none}

/* v39: guides */
.guide .g-intro{font-size:clamp(19px,1.8vw,24px); line-height:1.45; color:var(--fg); max-width:60ch; margin-bottom:8px}
.guide h2{font-size:clamp(24px,2.6vw,34px); margin:48px 0 12px}
.guide p, .guide li{font-size:17px; line-height:1.7; color:var(--fg-2); max-width:68ch}
.guide ul{padding-left:1.2em; display:grid; gap:6px; margin-top:10px}
.guide .g-take{margin-top:48px; padding:clamp(20px,2.4vw,32px); border:1px solid var(--fg); border-radius:20px; max-width:68ch}
.guide .g-take li{color:var(--fg)}
.guide .lp-related{padding-left:0}
.guide .lp-related a{font-size:clamp(24px,3vw,40px)}
.guide .g-offer{margin-top:64px}
.guide .g-offer .offer-p{color:rgba(255,255,255,.75)}
.g-list{display:grid; gap:0}
.g-card{display:grid; gap:8px; padding:28px 0; border-top:1px solid var(--line)}
.g-card h2{margin:0; font-size:clamp(26px,3vw,42px); letter-spacing:-0.04em; line-height:1.05; color:var(--fg)}
.g-card p{margin:0}
.g-card span{font-size:14px; text-decoration:underline; text-underline-offset:4px; color:var(--fg)}

/* v41: the privacy tick box is required, so make it easy to see and tap */
.consent{font-size:14px; gap:12px; align-items:center; cursor:pointer; padding:6px 0}
.consent input[type=checkbox]{width:22px; height:22px; min-width:22px; margin:0; accent-color:#0A0A0A; cursor:pointer}
.consent input[type=checkbox]:invalid:focus, .quote.tried .consent input[type=checkbox]:invalid{outline:2px solid #C0392B; outline-offset:2px}

/* v42: service and industry page visuals (header + gallery) */
.lp-hero{margin:clamp(40px,5vw,72px) 0 0; border-radius:24px; overflow:hidden; aspect-ratio:16/9; background:#eee}
.lp-hero img,.lp-hero video{width:100%; height:100%; object-fit:cover; display:block}
.lp-gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.4vw,20px); margin-top:clamp(32px,4vw,56px)}
.lp-gallery img{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:18px; display:block; background:#eee}
@media (max-width:640px){ .lp-gallery{grid-template-columns:1fr 1fr} .lp-gallery img:nth-child(3){display:none} .lp-hero{border-radius:16px} }