/* Portfolio page. Same HTML for all three styles: [data-style] decides the look,
   the colours come in as variables from render.js (paletteVars). Mobile first. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:72px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:16.5px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
h1,h2,h3,p,figure,ul,ol,blockquote,fieldset{margin:0;padding:0;border:0}
ul,ol{list-style:none}
img,video{display:block;max-width:100%}
a{color:inherit}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}
svg{display:block;width:1em;height:1em}
mark{background:none;color:inherit}
[hidden]{display:none!important}

body{--dw:400;--dt:-.01em;--btn-r:0px;--r:4px;--r-lg:6px;--tick-r:50%}
.wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:clamp(20px,5vw,48px)}
.sec{padding-block:clamp(60px,9vw,120px);scroll-margin-top:64px}

.eyebrow{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:var(--accent-text)}
.h2{font-family:var(--font-display);font-weight:var(--dw);letter-spacing:var(--dt);font-size:clamp(36px,7vw,68px);line-height:1.04;margin-top:10px}
.h3{font-family:var(--font-display);font-weight:var(--dw);letter-spacing:var(--dt);font-size:clamp(23px,3.2vw,30px);line-height:1.15}
.sec-head{margin-bottom:clamp(28px,4.5vw,56px);max-width:760px}
.sec-sub{margin-top:14px;color:var(--muted);max-width:56ch}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:54px;padding:0 28px;border-radius:var(--btn-r);font-weight:600;font-size:15.5px;text-decoration:none;border:1.5px solid transparent;transition:transform .2s,background-color .2s,color .2s,border-color .2s;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-ghost{border-color:var(--ink);color:var(--ink)}
.btn-sm{min-height:42px;padding:0 18px;font-size:14px}
.btn-full{width:100%}
.btn svg{font-size:20px}

/* greeting of a brand link */
.greet{background:var(--ink);color:var(--bg);text-align:center;font-size:14.5px;padding:9px 16px;font-weight:500}

/* nav */
.nav{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid var(--line)}
@supports (backdrop-filter:blur(10px)) and (color:color-mix(in srgb,red,blue)){.nav{background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(14px)}}
.nav-in{display:flex;align-items:center;gap:14px;height:62px}
.nav-mark{font-family:var(--font-display);font-size:22px;text-decoration:none;font-weight:var(--dw);letter-spacing:.02em;margin-right:auto}
.nav-links{display:none;gap:28px;font-size:14.5px;margin-right:auto}
.nav-links a{text-decoration:none;color:var(--muted);transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.lang{display:flex;gap:2px;font-size:12.5px;font-weight:600;letter-spacing:.04em}
.lang a{padding:6px 7px;text-decoration:none;color:var(--muted);border-radius:6px}
.lang a[aria-current]{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media (min-width:860px){.nav-links{display:flex}.nav-mark{margin-right:18px}}

/* video */
.vid{position:relative;aspect-ratio:var(--ar,9/16);overflow:hidden;background:var(--bg2);border-radius:var(--r);isolation:isolate}
.vid-poster,.vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vid video{z-index:1;opacity:0;transition:opacity .25s}
.vid.is-playing video,.vid.is-paused video{opacity:1}
.vid-btn{position:absolute;z-index:3;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;display:grid;place-items:center;font-size:24px;color:#fff;background:rgba(20,16,14,.42);backdrop-filter:blur(6px);transition:transform .2s,opacity .2s,background-color .2s}
.vid[data-src]{cursor:pointer}
.vid:hover .vid-btn{transform:scale(1.07)}
.vid.is-playing .vid-btn,.vid.is-preview .vid-btn{opacity:0}
.vid.is-preview:hover .vid-btn{opacity:1;transform:none}
.vid.is-loading:not(.is-preview):not(.is-muted) .vid-btn::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid transparent;border-top-color:#fff;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.vid-bar{position:absolute;z-index:3;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.25);opacity:0;transition:opacity .2s}
.vid-bar b{display:block;height:100%;width:0;background:#fff}
.vid.is-playing:not(.is-preview):not(.is-muted) .vid-bar,.vid.is-paused:not(.is-muted) .vid-bar{opacity:1}
.vid-badge{position:absolute;z-index:3;left:8px;top:8px;background:var(--bg);color:var(--ink);font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:999px;line-height:1.2}
.vid-sound{position:absolute;z-index:4;left:50%;bottom:16px;transform:translateX(-50%);display:none;align-items:center;gap:7px;background:rgba(20,16,14,.55);backdrop-filter:blur(8px);color:#fff;font-size:13px;font-weight:600;padding:8px 14px;border-radius:999px;white-space:nowrap}
.vid-sound svg{font-size:17px}
.vid.is-muted .vid-sound{display:inline-flex}
.vid.is-muted .vid-btn{opacity:0}
.work-grid .vid-btn,.res-card-media .vid-btn,.res-feature-media .vid-btn,.quote-media .vid-btn{left:10px;top:auto;bottom:10px;width:44px;height:44px;margin:0;font-size:18px}

/* reveal */
[data-fx~="reveal"] [data-reveal]{opacity:0;transform:translateY(20px)}
[data-fx~="reveal"] [data-reveal].in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.no-js [data-reveal]{opacity:1!important;transform:none!important}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1!important;transform:none!important;transition:none!important}.marquee-track,.band-track{animation:none!important}.hero *,.hero-media,.sec-head .h2,.nav::after{animation:none!important}}

/* metrics */
.num{display:inline-block;font-family:var(--font-display);font-weight:var(--dw);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.hero .num.num--text{font-size:clamp(17px,4.6vw,24px);white-space:normal;line-height:1.15}

/* ---------- hero ---------- */
.hero{position:relative;overflow:clip}
.hero-grid{position:relative;display:flex;flex-direction:column;padding-block:clamp(20px,4vw,44px) clamp(36px,6vw,72px)}
.hero-copy{display:contents}
.hero-media{position:relative;order:3}
.kicker{order:1;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:var(--accent-text)}
.kicker span{opacity:.5}
.name{order:2;font-family:var(--font-display);font-weight:var(--dw);letter-spacing:var(--dt)}
.claim{order:4;font-family:var(--font-display);font-weight:var(--dw);letter-spacing:var(--dt);line-height:1.1}
.hero .metrics{order:5}
.cta-row{order:6;display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.cta-row .btn{flex:1 1 auto}
.socials{order:7;display:flex;gap:22px;margin-top:24px;align-items:center}
.socials a{display:flex;align-items:center;gap:7px;text-decoration:none;font-size:14.5px;font-weight:500}
.socials svg{font-size:22px}
.metrics{display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
.metrics li{display:flex;flex-direction:column;gap:2px;min-width:0}
.metrics li>span{font-size:12.5px;color:var(--muted);line-height:1.3}

/* ---------- logos ---------- */
.logos{padding-block:clamp(22px,3vw,36px);border-block:1px solid var(--line);overflow:hidden}
.logos-title{text-align:center;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:18px;padding-inline:20px}
.marquee{overflow:hidden;mix-blend-mode:var(--logo-blend);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;width:max-content}
[data-fx~="marquee"] .marquee-track{animation:slide 60s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-row{display:flex;align-items:center;gap:clamp(34px,5vw,64px);padding-right:clamp(34px,5vw,64px)}
.marquee-row img{height:clamp(30px,4vw,42px);width:auto;max-width:130px;object-fit:contain;filter:var(--logo-filter)}
body:not([data-fx~="marquee"]) .marquee{-webkit-mask-image:none;mask-image:none}
body:not([data-fx~="marquee"]) .marquee-track{width:auto;justify-content:center}
body:not([data-fx~="marquee"]) .marquee-row{flex-wrap:wrap;justify-content:center;row-gap:24px;padding-inline:20px}
body:not([data-fx~="marquee"]) .marquee-row[aria-hidden]{display:none}
@keyframes slide{to{transform:translateX(-50%)}}
.band{display:none}

/* ---------- results ---------- */
.res-logo{height:40px;width:auto;max-width:150px;object-fit:contain;object-position:left;mix-blend-mode:var(--logo-blend);filter:var(--res-logo-filter,none)}
.res-brand{font-weight:700;font-size:18px}
.res-note{color:var(--muted);font-size:14.5px}
.res-quote{font-size:15px;line-height:1.5;color:var(--ink)}
/* proof screenshots, right on the page (Alex, 9 Nov); a tap opens them big */
.proof{display:block;width:100%;margin-top:12px;text-align:left;cursor:zoom-in;color:inherit}
.proof-shots{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.proof-shots img{flex:none;max-width:100%;max-height:240px;width:auto;height:auto;border-radius:10px;border:1px solid var(--line);background:var(--surface);box-shadow:0 10px 26px -18px rgba(0,0,0,.45)}
.proof-tag{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--accent-text)}
.proof-tag svg{font-size:15px}
.res-card>.proof,.res-feature>.proof{grid-column:1/-1;margin-top:2px}
.proof--big .proof-shots img{max-height:min(440px,70vh)}
.res-feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(104px,34%);grid-template-areas:"top top" "bottom media";gap:16px;background:var(--surface);border-radius:var(--r-lg);padding:clamp(18px,3vw,40px);border:1px solid var(--line)}
.res-feature-top{grid-area:top;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.res-feature-media{grid-area:media;min-width:0}
.res-feature-bottom{grid-area:bottom;display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.metrics--big{width:100%;gap:18px;margin-top:6px}
.metrics--big .num{font-size:clamp(38px,6.8vw,68px);line-height:1}
.metrics--big li>span{font-size:13.5px;margin-top:4px}
@media (min-width:720px){.res-feature{grid-template-columns:minmax(220px,300px) 1fr;grid-template-rows:auto auto;grid-template-areas:"media top" "media bottom";column-gap:clamp(28px,5vw,64px);row-gap:18px;align-items:start}.res-feature-top{align-self:end}}
.res-grid{display:grid;gap:14px;margin-top:14px}
@media (min-width:720px){.res-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1080px){.res-grid{gap:18px;margin-top:18px}}
.res-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px}
.res-card-copy{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.res-card-media{width:clamp(96px,26vw,132px)}
.res-title{font-size:14px;color:var(--muted)}
.metrics--card{gap:16px;grid-auto-columns:auto;justify-content:start;margin-top:2px}
.metrics--card .num{font-size:clamp(27px,5vw,36px);line-height:1.05}
.metrics--card li>span{font-size:12px}
.res-card .res-quote{font-size:14px;color:var(--muted)}
.organic{margin-top:clamp(28px,4vw,48px)}
.hscroll{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}
.hscroll::-webkit-scrollbar{display:none}
.hscroll>*{flex:none;scroll-snap-align:start}
.organic .hscroll{margin-top:14px}
.organic img{height:clamp(190px,24vw,260px);width:auto;border-radius:var(--r)}

/* ---------- work ---------- */
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1*clamp(20px,5vw,48px)) 20px;padding-inline:clamp(20px,5vw,48px);-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;padding:10px 18px;border:1px solid var(--line);border-radius:999px;font-size:14px;font-weight:500;white-space:nowrap;transition:background-color .2s,color .2s,border-color .2s}
.chip[aria-selected="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.work-grid{display:grid;grid-auto-flow:column;grid-auto-columns:min(58vw,240px);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1*clamp(20px,5vw,48px));padding-inline:clamp(20px,5vw,48px);scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding-bottom:4px}
.work-grid::-webkit-scrollbar{display:none}
.work-item{scroll-snap-align:center;min-width:0}
.work-cap{font-size:13.5px;margin-top:9px;text-align:center;color:var(--muted);line-height:1.3}
@media (min-width:960px){.work-grid{grid-auto-flow:row;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-columns:auto;overflow:visible;margin-inline:0;padding-inline:0;gap:16px}}

/* ---------- quote ---------- */
.quote{background:var(--bg2)}
.quote-grid{display:grid;gap:clamp(26px,4vw,56px);align-items:center}
@media (min-width:900px){.quote-grid{grid-template-columns:1.25fr 1fr}}
.quote-text{font-family:var(--font-display);font-weight:var(--dw);letter-spacing:var(--dt);font-size:clamp(28px,4.4vw,48px);line-height:1.12}
.quote-who{margin-top:16px;font-size:14px;font-weight:600;letter-spacing:.04em}

/* ---------- photos ---------- */
.photos-row{padding-inline:clamp(20px,5vw,48px);gap:10px}
.photos-row img{height:clamp(300px,44vw,500px);width:auto;aspect-ratio:auto 3/4;border-radius:var(--r);object-fit:cover}

/* ---------- contact ---------- */
.contact-grid{display:grid;gap:clamp(30px,5vw,80px)}
@media (min-width:900px){.contact-grid{grid-template-columns:minmax(0,.72fr) 1fr;align-items:center}}
@media (max-width:899px){.contact-side{order:2;max-width:320px;margin-inline:auto;width:100%}}
.contact-photo img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r-lg)}
.form{display:grid;gap:14px}
.form label>span,.needs legend{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px}
.form input:not([type=checkbox]),.form textarea{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;font-size:16px;outline:none;transition:border-color .2s}
.form input:focus,.form textarea:focus{border-color:var(--accent-text)}
.form-row{display:grid;gap:14px}
@media (min-width:560px){.form-row{grid-template-columns:1fr 1fr}}
.needs{display:flex;flex-wrap:wrap;gap:8px}
.needs legend{width:100%;padding:0}
.need{cursor:pointer}
.need input{position:absolute;opacity:0;width:0;height:0}
.need span{display:block;margin:0!important;padding:9px 15px;border:1px solid var(--line);border-radius:999px;font-size:14px!important;font-weight:500!important;transition:background-color .2s,color .2s}
.need input:checked+span{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.need input:focus-visible+span{outline:2px solid var(--accent-text);outline-offset:2px}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.form-thanks{font-weight:600;color:var(--accent-text);font-size:14.5px}
.contact-mail{margin-top:18px;font-size:14.5px;color:var(--muted)}
.contact-mail a{display:block;color:var(--ink);font-weight:600;overflow-wrap:anywhere;margin-top:2px}
.signature{font-family:"Mrs Saint Delafield",cursive;font-size:64px;line-height:1;margin-top:18px;color:var(--accent-text)}

/* ---------- footer + sticky + dialogs ---------- */
.foot{border-top:1px solid var(--line);padding-block:22px calc(22px + env(safe-area-inset-bottom));font-size:13.5px;color:var(--muted)}
.foot-in{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;justify-content:center;text-align:center}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.foot button{text-decoration:underline;text-underline-offset:3px;font-size:13.5px}
.made{flex-basis:100%;text-decoration:none;font-weight:600}
dialog{border:0;padding:0;background:var(--surface);color:var(--ink);border-radius:var(--r-lg);max-width:min(92vw,620px);max-height:88vh;overflow:auto}
dialog::backdrop{background:rgba(14,10,8,.62);backdrop-filter:blur(3px)}
.dlg-x{position:sticky;top:8px;float:right;margin:8px 8px 0 0;width:38px;height:38px;border-radius:50%;background:var(--bg2);font-size:22px;line-height:1;z-index:2}
.lb-cap{padding:18px 20px 10px;font-weight:600}
.lb-imgs{display:grid;gap:10px;padding:0 16px 16px}
.lb-imgs img{width:100%;border-radius:var(--r)}
.legal{padding:0 22px 24px;width:min(92vw,620px)}
.legal h2{padding-top:22px;margin-bottom:12px}
.legal-text{font-size:14.5px}
.legal-missing{color:var(--accent-text);font-weight:600}

/* =========================================================
   ELEGANT: magazine. Masthead name, arch, hairlines, serif numbers.
   ========================================================= */
[data-style="elegant"]{--dw:400;--dt:-.012em;--btn-r:0px;--r:3px;--r-lg:4px}
[data-style="elegant"] .btn{letter-spacing:.16em;text-transform:uppercase;font-size:11.5px;font-weight:500}
[data-style="elegant"] .kicker,[data-style="elegant"] .eyebrow,[data-style="elegant"] .logos-title{letter-spacing:.24em;font-size:11px}
[data-style="elegant"] .metrics li>span{letter-spacing:.16em;text-transform:uppercase;font-size:10px}
[data-style="elegant"] .chip,[data-style="elegant"] .need span{border-radius:0;letter-spacing:.14em;text-transform:uppercase;font-size:11px!important}
[data-style="elegant"] .work-cap{letter-spacing:.16em;text-transform:uppercase;font-size:10px}
[data-style="elegant"] .quote-who{letter-spacing:.22em;text-transform:uppercase;font-size:11px;font-weight:500}
[data-style="elegant"] .hero--plain .hero-grid{padding-block:clamp(44px,9vw,100px) clamp(48px,9vw,100px)}
[data-style="elegant"] .hero--plain .name::after{content:"";display:block;width:1px;height:38px;margin:22px auto 0;background:var(--accent);opacity:.6}
[data-style="elegant"] .kicker{text-align:center}
[data-style="elegant"] .name{text-align:center;text-transform:uppercase;font-size:calc(11.6vw*var(--ns,1));line-height:1;margin-top:8px;white-space:nowrap;letter-spacing:.01em}
[data-style="elegant"] .name--wrap{white-space:normal;text-wrap:balance} /* "LENA / HOFFMANN": a long name takes two lines, never the edge */
[data-style="elegant"] .hero-media{width:min(64vw,330px);margin:20px auto 26px}
[data-style="elegant"] .hero-media::before{content:"";position:absolute;inset:-9px;border:1px solid var(--accent);border-radius:999px 999px 8px 8px;opacity:.55}
[data-style="elegant"] .vid--hero{border-radius:999px 999px 4px 4px}
[data-style="elegant"] .vid--side,[data-style="elegant"] .bubble{display:none}
[data-style="elegant"] .claim{text-align:center;font-size:clamp(27px,7.2vw,42px)}
[data-style="elegant"] .claim mark{font-style:italic;color:var(--accent-text)}
[data-style="elegant"] .hero .metrics{margin-top:22px;border-block:1px solid var(--line);padding-block:14px}
[data-style="elegant"] .hero .metrics li{text-align:center;align-items:center;padding-inline:6px}
[data-style="elegant"] .hero .metrics li+li{border-left:1px solid var(--line)}
[data-style="elegant"] .hero .num{--num:clamp(25px,6.4vw,38px);font-size:var(--num);line-height:1.1}
[data-style="elegant"] .socials{justify-content:center}
[data-style="elegant"] .h2 mark{font-style:italic;color:var(--accent-text)}
[data-style="elegant"] .quote-text mark{font-style:italic}
[data-style="elegant"] .work-grid .vid,[data-style="elegant"] .res-card-media .vid,[data-style="elegant"] .res-feature-media .vid{border-radius:999px 999px 3px 3px}
[data-style="elegant"] .res-feature,[data-style="elegant"] .res-card{border-color:var(--line)}
[data-style="elegant"] .contact-photo img{border-radius:999px 999px 4px 4px}
@media (min-width:980px){
  [data-style="elegant"] .hero-grid{display:grid;max-width:1500px;grid-template-columns:1fr auto 1fr;column-gap:clamp(28px,4vw,72px);grid-template-rows:auto auto auto auto 1fr;align-items:start}
  [data-style="elegant"] .name{grid-column:1/-1;grid-row:1;font-size:calc(min(10.4vw,158px)*var(--ns,1));margin-top:0}
  [data-style="elegant"] .hero-media{grid-column:2;grid-row:2/7;margin:-1.1vw 0 0;width:auto;height:min(46vw,calc(100svh - 230px));min-height:420px;aspect-ratio:9/16;z-index:2}
  [data-style="elegant"] .hero-media .vid{height:100%}
  [data-style="elegant"] .kicker{grid-column:1;grid-row:2;text-align:left;margin-top:clamp(28px,5vh,64px)}
  [data-style="elegant"] .claim{grid-column:1;grid-row:3;text-align:left;font-size:clamp(34px,3.7vw,56px);margin-top:16px}
  [data-style="elegant"] .usp{grid-column:1;grid-row:4;justify-content:flex-start;margin-top:18px}
  [data-style="elegant"] .hero .metrics{grid-column:3;grid-row:2;margin-top:clamp(28px,5vh,64px)}
  [data-style="elegant"] .cta-row{grid-column:3;grid-row:3;flex-direction:column}
  [data-style="elegant"] .socials{grid-column:3;grid-row:4;justify-content:flex-start}
  /* the colour block only on wide screens: on a phone it cut the headline in half */
  [data-style="elegant"] .hero::before{content:"";position:absolute;left:0;top:0;width:50%;height:100%;background:var(--bg2);opacity:.5}
}

/* =========================================================
   BOLD: performance. Huge claim, pill highlights, tilted phones, big numbers.
   ========================================================= */
[data-style="bold"]{--dw:800;--dt:-.035em;--btn-r:0px;--r:2px;--r-lg:2px;--tick-r:0}
[data-style="bold"] .nav-mark{font-weight:800;letter-spacing:-.04em}
[data-style="bold"] .kicker{order:2;letter-spacing:.2em;font-size:11px;color:var(--muted);margin-top:6px}
[data-style="bold"] .name{order:1;font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-family:var(--font-body)}
[data-style="bold"] .claim{order:3;font-size:clamp(50px,14.6vw,118px);line-height:.94;margin-top:16px}
[data-style="bold"] mark{display:inline-block;background:var(--accent);color:var(--on-accent);padding:0 .14em .02em}
[data-style="bold"] .hero-media{order:4;height:min(112vw,500px);margin:30px 0 8px}
[data-style="bold"] .vid--hero,[data-style="bold"] .vid--side{position:absolute;top:0;width:50%;border-radius:2px}
[data-style="bold"] .vid--hero{left:25%;z-index:2;top:2%}
[data-style="bold"] .vid--side.a{left:0;top:16%;z-index:1;width:34%}
[data-style="bold"] .vid--side.b{right:0;top:8%;z-index:1;width:34%}
[data-style="bold"] .bubble{position:absolute;z-index:3;background:#fff;color:#141112;padding:10px 13px;max-width:150px;font-size:12.5px;line-height:1.28;font-weight:600;box-shadow:0 14px 30px -12px rgba(0,0,0,.4)}
[data-style="bold"] .bubble cite{display:block;font-style:normal;font-weight:600;font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.6;margin-top:5px}
[data-style="bold"] .bubble.a{left:0;top:0}
[data-style="bold"] .bubble.b{right:0;bottom:4%}
[data-style="bold"] .hero .metrics{order:5;margin-top:14px;gap:10px}
[data-style="bold"] .hero .metrics li{border-top:2px solid var(--ink);padding-top:10px}
[data-style="bold"] .hero .num{--num:clamp(30px,9vw,60px);font-size:var(--num);line-height:1}
[data-style="bold"] .metrics li>span{letter-spacing:.14em;text-transform:uppercase;font-size:10.5px}
[data-style="bold"] .h2{font-size:clamp(42px,9vw,92px);line-height:.98}
/* Phones: long German words ("zusammenarbeiten") shrink with the screen and, if still too long, break
   with a hyphen instead of running off the edge. */
@media (max-width:420px){.h2{font-size:min(36px,9.5vw);-webkit-hyphens:manual;hyphens:manual;overflow-wrap:break-word}[data-style="bold"] .h2{font-size:min(42px,10vw)}}
.hl-end{white-space:nowrap}.hl-end mark{white-space:normal}
[data-style="bold"] .quote-text{font-size:clamp(32px,5.6vw,64px);line-height:1.02}
[data-style="bold"] .btn{font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:12px}
[data-style="bold"] .band{display:block;background:var(--accent);color:var(--on-accent);overflow:hidden;margin-top:clamp(22px,3vw,36px);margin-bottom:calc(-1*clamp(22px,3vw,36px));transform:none}
[data-style="bold"] .band-track{display:flex;width:max-content;font-family:var(--font-display);font-weight:800;font-size:clamp(15px,2vw,20px);letter-spacing:.12em;text-transform:uppercase;padding-block:12px}
[data-style="bold"][data-fx~="marquee"] .band-track{animation:slide 34s linear infinite}
[data-style="bold"] .band span{padding-inline:22px;white-space:nowrap}
[data-style="bold"] .band span::after{content:"/";margin-left:44px;opacity:.5}
[data-style="bold"] .res-feature,[data-style="bold"] .res-card{border:1px solid var(--line);background:var(--surface)}
[data-style="bold"] .res-card .num,[data-style="bold"] .res-feature .num{font-weight:800}
[data-style="bold"] .work-grid .vid,[data-style="bold"] .res-card-media .vid,[data-style="bold"] .res-feature-media .vid{transition:transform .25s cubic-bezier(.2,.7,.2,1)}
[data-style="bold"] .chip{font-weight:700;border-radius:0;letter-spacing:.12em;text-transform:uppercase;font-size:11.5px}
[data-style="bold"] .need span{border-radius:0}
[data-style="bold"] .logos-title,[data-style="bold"] .eyebrow{font-weight:700}
[data-style="bold"] .work-cap{letter-spacing:.12em;text-transform:uppercase;font-size:10.5px;font-weight:600}
[data-style="bold"] .chip[aria-selected="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
[data-style="bold"] .quote{background:var(--surface)}
[data-style="bold"] .signature{color:var(--ink)}
@media (min-width:980px){
  [data-style="bold"] .hero-grid{display:grid;grid-template-columns:1.2fr 1fr;column-gap:clamp(30px,5vw,72px);grid-template-rows:auto auto auto auto auto 1fr;align-items:start}
  [data-style="bold"] .name,[data-style="bold"] .kicker,[data-style="bold"] .usp,[data-style="bold"] .claim,[data-style="bold"] .hero .metrics,[data-style="bold"] .cta-row,[data-style="bold"] .socials{grid-column:1}
  [data-style="bold"] .claim{font-size:clamp(72px,7.6vw,118px)}
  [data-style="bold"] .hero-media{grid-column:2;grid-row:1/7;height:min(46vw,620px);margin:0}
  [data-style="bold"] .hero .metrics{margin-top:30px}
}

/* =========================================================
   MAISON: a couture house (Alex, 11 Nov: "LVMH level ... something brands almost never saw").
   Her monogram is the crest on top and the canvas of the deep bands, the hero reads like an
   invitation, films and photos hang in mats, chapters are numbered. Light type, hairlines, much air.
   ========================================================= */
[data-style="maison"]{--dw:300;--dt:-.022em;--btn-r:0px;--r:0px;--r-lg:0px;--tick-r:0}
[data-style="maison"] .h2,[data-style="maison"] .name,[data-style="maison"] .claim,[data-style="maison"] .h3,[data-style="maison"] .quote-text,[data-style="maison"] .num,[data-style="maison"] .wordmark{font-variation-settings:"SOFT" 0,"WONK" 0}
[data-style="maison"] .btn{letter-spacing:.18em;text-transform:uppercase;font-size:11.5px;font-weight:500}
/* the double edge of a box lid */
[data-style="maison"] .btn-primary{box-shadow:0 0 0 3px var(--bg),0 0 0 4px var(--accent)}
[data-style="maison"] .nav{border-bottom-color:transparent}
[data-style="maison"] .nav-mark{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--ink);border-radius:50%;font-size:15px;font-weight:400;letter-spacing:.03em}
[data-style="maison"] .nav .btn-primary{box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--accent)}
/* hero: crest, name, a fine rule, her film in a mat */
[data-style="maison"] .hero-grid{align-items:center;text-align:center;padding-block:clamp(26px,5vw,60px) clamp(44px,7vw,84px)}
[data-style="maison"] .hero-grid::before{content:attr(data-crest);order:0;display:grid;place-items:center;width:62px;height:62px;margin-bottom:20px;border:1px solid var(--ink);border-radius:50%;font-family:var(--font-display);font-size:23px;font-weight:300;letter-spacing:.03em;box-shadow:0 0 0 5px var(--bg),0 0 0 6px var(--line)}
[data-style="maison"] .hero-grid[data-crest=""]::before{display:none}
[data-style="maison"] .kicker{letter-spacing:.26em;font-size:11px}
[data-style="maison"] .name{font-size:calc(clamp(46px,13.4vw,108px)*var(--nw,1));line-height:.98;margin-top:14px;overflow-wrap:anywhere}
[data-style="maison"] .name>span+span{font-style:italic}
[data-style="maison"] .name::after{content:"";display:block;width:132px;height:7px;margin:20px auto 0;background:linear-gradient(var(--ink),var(--ink)) 0 50%/52px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 100% 50%/52px 1px no-repeat,radial-gradient(circle,var(--accent-text) 0 2.6px,transparent 3.2px) 50% 50%/7px 7px no-repeat;opacity:.7}
[data-style="maison"] .hero-media{width:min(68vw,330px);margin:28px auto 30px;padding:9px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-3)}
[data-style="maison"] .vid--hero{box-shadow:none}
[data-style="maison"] .vid--side,[data-style="maison"] .bubble{display:none}
[data-style="maison"] .claim{font-size:clamp(25px,6.6vw,40px);line-height:1.14}
[data-style="maison"] .claim mark,[data-style="maison"] .h2 mark{font-style:italic;color:var(--accent-text)}
[data-style="maison"] .hero .metrics{width:100%;margin-top:26px;border-block:1px solid var(--line);padding-block:16px}
[data-style="maison"] .hero .metrics li{text-align:center;align-items:center;padding-inline:6px}
[data-style="maison"] .hero .metrics li+li{border-left:1px solid var(--line)}
[data-style="maison"] .hero .num{--num:clamp(26px,6.6vw,40px);font-size:var(--num);line-height:1.1}
[data-style="maison"] .metrics li>span{letter-spacing:.16em;text-transform:uppercase;font-size:10px}
[data-style="maison"] .cta-row{width:100%;justify-content:center;margin-top:30px}
[data-style="maison"] .socials{justify-content:center}
/* brands between two hairlines */
[data-style="maison"] .logos{border-block:0;position:relative;padding-block:clamp(30px,4vw,48px)}
[data-style="maison"] .logos::before,[data-style="maison"] .logos::after{content:"";position:absolute;left:clamp(20px,5vw,48px);right:clamp(20px,5vw,48px);height:1px;background:var(--line)}
[data-style="maison"] .logos::before{top:0}
[data-style="maison"] .logos::after{bottom:0}
[data-style="maison"] .logos-title{letter-spacing:.26em;font-size:11px;margin-bottom:22px}
[data-style="maison"] .wordmark{font-weight:300;font-style:italic;font-size:clamp(20px,2.8vw,28px);letter-spacing:.01em;opacity:.86}
/* chapters: N° 01, N° 02 ... */
[data-style="maison"] main{counter-reset:chapter}
[data-style="maison"] .sec-head{counter-increment:chapter;margin-inline:auto;text-align:center;display:flex;flex-direction:column;align-items:center}
[data-style="maison"] .eyebrow{letter-spacing:.26em;font-size:11px;gap:12px}
[data-style="maison"] .sec-head .eyebrow::before{content:"N° " counter(chapter,decimal-leading-zero) "  —";font-family:var(--font-display);font-style:italic;font-weight:400;font-size:15px;letter-spacing:.02em;text-transform:none;white-space:pre}
[data-style="maison"] .h2{font-size:clamp(34px,7.6vw,74px);line-height:1.03;margin-top:14px}
[data-style="maison"] .sec-sub{margin-inline:auto}
/* the deep bands are her monogram canvas, drifting very slowly */
[data-style="maison"] .sec.work,[data-style="maison"] .sec.quote,[data-style="maison"] .foot{position:relative;overflow:hidden;background:var(--deep)}
[data-style="maison"] .sec.work::before,[data-style="maison"] .sec.quote::before,[data-style="maison"] .foot::before{content:"";position:absolute;inset:-132px;background:var(--mono) 0 0/132px 132px;pointer-events:none}
[data-style="maison"] .sec.work>*,[data-style="maison"] .sec.quote>*,[data-style="maison"] .foot>*{position:relative;z-index:1}
@keyframes pf-canvas{to{transform:translate3d(132px,132px,0)}}
[data-style="maison"][data-fx~="reveal"]:not([data-calm]) .sec.work::before,[data-style="maison"][data-fx~="reveal"]:not([data-calm]) .sec.quote::before{animation:pf-canvas 54s linear infinite}
/* films hang in mats */
[data-style="maison"] .work-item{background:var(--bg);padding:7px;box-shadow:0 20px 38px -24px rgba(0,0,0,.55)}
[data-style="maison"] .work-grid .vid{box-shadow:none}
[data-style="maison"] .sec.work .work-cap{color:var(--muted);letter-spacing:.16em;text-transform:uppercase;font-size:10px;margin:9px 0 3px}
[data-style="maison"] .chip:first-child{margin-left:auto}
[data-style="maison"] .chip:last-child{margin-right:auto}
[data-style="maison"] .chip,[data-style="maison"] .sec.work .chip{border:0;border-bottom:1px solid transparent;border-radius:0;padding:10px 2px;margin-inline:9px;letter-spacing:.18em;text-transform:uppercase;font-size:11px;background:none}
[data-style="maison"] .sec.work .chip[aria-selected="true"]{background:none;color:var(--on-deep);border-color:var(--on-deep)}
/* results: a certificate, two hairlines around it */
[data-style="maison"] .res-feature,[data-style="maison"] .res-card{background:var(--surface);border:1px solid var(--line);box-shadow:inset 0 0 0 5px var(--surface),inset 0 0 0 6px var(--line);padding:clamp(24px,3vw,42px)}
[data-style="maison"] .res-title{letter-spacing:.04em}
[data-style="maison"] .proof-shots img{border-radius:0}
[data-style="maison"] .res-card-media .vid,[data-style="maison"] .res-feature-media .vid{outline:1px solid var(--line);outline-offset:4px}
[data-style="maison"] .res-more{letter-spacing:.18em;text-transform:uppercase;font-size:11.5px;font-weight:500}
/* a client's words, centred like a dedication */
[data-style="maison"] .quote-copy{text-align:center}
[data-style="maison"] .quote-text{font-style:italic;font-size:clamp(26px,4.6vw,46px);line-height:1.18}
[data-style="maison"] .quote-text mark{font-style:normal}
[data-style="maison"] .quote-who{letter-spacing:.24em;text-transform:uppercase;font-size:11px;font-weight:500}
[data-style="maison"] .quote .proof{text-align:center}
[data-style="maison"] .quote .proof-shots{align-items:center}
/* photos: a salon hang */
[data-style="maison"] .photos-row{gap:14px;align-items:flex-start;padding-bottom:30px}
[data-style="maison"] .photos-row img{padding:8px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-2)}
[data-style="maison"] .photos-row img:nth-child(even){margin-top:26px}
/* contact: stationery, lines to write on */
[data-style="maison"] .form input:not([type=checkbox]),[data-style="maison"] .form textarea{background:transparent;border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:10px 0}
[data-style="maison"] .form input:focus,[data-style="maison"] .form textarea:focus{box-shadow:0 1px 0 var(--ink)}
[data-style="maison"] .form label>span,[data-style="maison"] .needs legend{letter-spacing:.18em;text-transform:uppercase;font-size:10.5px;font-weight:500;color:var(--muted)}
[data-style="maison"] .need span{border-radius:0;letter-spacing:.1em;text-transform:uppercase;font-size:11px!important}
[data-style="maison"] .contact-photo img{padding:9px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-2)}
[data-style="maison"] .contact .sec-head{align-items:center}
[data-style="maison"] .signature{text-align:center}
[data-style="maison"] .contact-mail{text-align:center}
[data-style="maison"] .hero--plain .hero-grid{padding-block:clamp(40px,9vw,96px) clamp(48px,9vw,96px)}
[data-style="maison"] .hero--plain .metrics{max-width:640px}
[data-style="maison"] .hero--plain .cta-row{max-width:640px}
@media (min-width:980px){
  [data-style="maison"] .hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,390px);grid-template-rows:repeat(8,auto);column-gap:clamp(48px,8vw,140px);justify-items:start;align-content:center;text-align:left;min-height:min(82vh,820px)}
  [data-style="maison"] .hero-grid::before,[data-style="maison"] .kicker,[data-style="maison"] .name,[data-style="maison"] .usp,[data-style="maison"] .claim,[data-style="maison"] .hero .metrics,[data-style="maison"] .cta-row,[data-style="maison"] .socials{grid-column:1}
  [data-style="maison"] .name{font-size:calc(clamp(72px,7.4vw,124px)*var(--nw,1))}
  [data-style="maison"] .name::after{margin-left:0}
  [data-style="maison"] .hero-media{grid-column:2;grid-row:1/9;align-self:center;width:100%;margin:0;padding:12px}
  [data-style="maison"] .usp{justify-content:flex-start}
  [data-style="maison"] .claim{font-size:clamp(30px,3vw,46px);margin-top:26px;max-width:18ch}
  [data-style="maison"] .hero .metrics{max-width:560px}
  [data-style="maison"] .cta-row{justify-content:flex-start;width:auto}
  [data-style="maison"] .socials{justify-content:flex-start}
  [data-style="maison"] .hero--plain .hero-grid{justify-items:center;text-align:center;min-height:0}
  [data-style="maison"] .hero--plain .name::after{margin-left:auto}
  [data-style="maison"] .photos-row img:nth-child(even){margin-top:44px}
}

/* ---------- live forms ---------- */
.form-error { margin: 10px 0 0; font-size: .92rem; color: #b3261e; }
.report-form { margin-top: 14px; }
.report-form select { width: 100%; font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }

/* ---------- brands without a logo: their name, set in type ---------- */
.wordmark{font-family:var(--font-display);font-size:clamp(17px,2.2vw,22px);font-weight:600;line-height:1.1;color:var(--ink);opacity:.72;white-space:nowrap}
.logo-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:18px clamp(28px,5vw,56px);padding-inline:20px}
.logo-row img{height:clamp(30px,4vw,42px);width:auto;max-width:130px;object-fit:contain;filter:var(--logo-filter);mix-blend-mode:var(--logo-blend)}
[data-style="elegant"] .wordmark{text-transform:uppercase;letter-spacing:.14em;font-weight:500;font-size:clamp(15px,2vw,19px)}
[data-style="bold"] .wordmark{text-transform:uppercase;font-weight:800;letter-spacing:-.01em}


/* =========================================================
   FONTS (Alex, 7 Nov): any of the three fonts with any style. The style keeps its layout,
   the font brings its own weight and spacing.
   ========================================================= */
[data-font="magazine"] .h3,[data-font="magazine"] .num{font-variation-settings:"opsz" 18}
[data-font="magazine"] .h2,[data-font="magazine"] .claim,[data-font="magazine"] .quote-text,[data-font="magazine"] .name{font-variation-settings:"opsz" 34}
[data-font="modern"] mark{font-style:normal!important}
[data-style="elegant"][data-font="modern"]{--dw:500;--dt:-.03em}
[data-style="elegant"][data-font="modern"] .name{font-size:calc(13.6vw*var(--ns,1));letter-spacing:-.045em}
/* no italic in this font: the highlighted words get a fine line in the deep colour instead */
[data-style="elegant"][data-font="modern"] mark{text-decoration:underline;text-decoration-color:var(--deep);text-decoration-thickness:.07em;text-underline-offset:.14em}
[data-style="elegant"][data-font="modern"] .sec.work mark,[data-style="elegant"][data-font="modern"] .sec.quote mark{text-decoration-color:var(--deep-accent)}
[data-style="elegant"][data-font="classic"]{--dw:400;--dt:-.02em}
[data-style="bold"][data-font="magazine"]{--dw:600;--dt:-.02em}
[data-style="bold"][data-font="classic"]{--dw:600;--dt:-.03em}
[data-style="bold"][data-font="modern"]{--dw:700;--dt:-.045em}
[data-style="maison"][data-font="magazine"]{--dw:400;--dt:-.012em}
[data-style="maison"][data-font="modern"]{--dw:400;--dt:-.04em}
[data-style="maison"][data-font="modern"] .name>span+span,[data-style="maison"][data-font="modern"] .quote-text,[data-style="maison"][data-font="modern"] .wordmark,[data-style="maison"][data-font="modern"] .sec-head .eyebrow::before{font-style:normal}
@media (min-width:980px){[data-style="elegant"][data-font="modern"] .name{font-size:calc(min(12.4vw,184px)*var(--ns,1))}}

/* =========================================================
   DEEP BANDS: her videos, the client quote and the footer sit on the scheme's deep
   colour, like a printed portfolio. The colours come from paletteVars.
   ========================================================= */
.sec.work,.sec.quote,.foot{background:var(--deep);color:var(--on-deep)}
.sec.work+.sec.quote,.sec.quote+.sec.work{padding-top:clamp(8px,2vw,24px)}
.sec.work .eyebrow,.sec.quote .eyebrow{color:var(--deep-accent)}
.sec.work .sec-sub,.sec.work .work-cap{color:var(--deep-muted)}
.sec.work .chip{background:transparent;border-color:var(--deep-line);color:var(--on-deep);box-shadow:none}
.sec.work .chip[aria-selected="true"]{background:var(--on-deep);color:var(--deep);border-color:var(--on-deep)}
.sec.work .vid,.sec.quote .vid{background:var(--deep-surface)}
.sec.quote .proof-tag{color:var(--deep-accent)}
.sec.quote .proof-shots img{border-color:var(--deep-line);background:var(--deep-surface)}
/* the highlighted word in a headline: drawn for the deep band, not the light page */
.sec.work mark,.sec.quote mark{color:var(--deep-accent)}
[data-style="bold"] .sec.work mark,[data-style="bold"] .sec.quote mark{background:var(--deep-accent);color:var(--deep)}
.foot{border-top:0;color:var(--deep-muted)}
.foot button{color:var(--deep-muted)}
.foot .made{color:var(--on-deep)}
.foot button:hover,.foot .made:hover{color:var(--on-deep);text-decoration:underline;text-underline-offset:3px}

/* =========================================================
   MOTION for brands (Alex, 7 Nov): slow and calm, nothing bouncy. Part of "Bewegung"
   (data-fx reveal). Off with reduced motion and in the builder's preview (data-calm).
   ========================================================= */
@keyframes pf-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes pf-wipe{from{clip-path:inset(100% -10% -25% -10%);transform:translateY(.4em)}to{clip-path:inset(-25% -10% -25% -10%);transform:none}}
@keyframes pf-settle{from{opacity:0;transform:scale(1.045)}to{opacity:1;transform:none}}
@keyframes pf-progress{to{transform:scaleX(1)}}
[data-fx~="reveal"]:not([data-calm]) .hero .kicker{animation:pf-rise .9s .05s cubic-bezier(.2,.7,.2,1) both}
[data-fx~="reveal"]:not([data-calm]) .hero .name>span{display:inline-block;animation:pf-wipe 1.1s .12s cubic-bezier(.2,.75,.15,1) both}
[data-fx~="reveal"]:not([data-calm]) .hero .name>span+span{animation-delay:.24s}
[data-fx~="reveal"]:not([data-calm]) .hero .name>span+span+span{animation-delay:.36s}
[data-fx~="reveal"]:not([data-calm]) .hero-media{animation:pf-settle 1.5s .15s cubic-bezier(.2,.75,.15,1) both}
[data-fx~="reveal"]:not([data-calm]) .hero .claim{animation:pf-rise 1s .4s cubic-bezier(.2,.7,.2,1) both}
[data-fx~="reveal"]:not([data-calm]) .hero .metrics{animation:pf-rise 1s .55s cubic-bezier(.2,.7,.2,1) both}
[data-fx~="reveal"]:not([data-calm]) .hero .cta-row,[data-fx~="reveal"]:not([data-calm]) .hero .socials{animation:pf-rise 1s .7s cubic-bezier(.2,.7,.2,1) both}
/* headlines rise out of a slit as they come into view */
[data-fx~="reveal"]:not([data-calm]) .sec-head.in .h2{animation:pf-wipe 1.1s .1s cubic-bezier(.2,.75,.15,1) both}
/* side-by-side result cards come in one after the other */
[data-fx~="reveal"] .res-grid .res-card:nth-child(even).in{transition-delay:.1s}
/* a hairline under the menu shows how far down the page she is */
@supports (animation-timeline:scroll()){
  .nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent-text);transform-origin:0 50%;transform:scaleX(0);animation:pf-progress linear both;animation-timeline:scroll(root)}
}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{filter:brightness(1.14)}
  .btn-ghost:hover{background:var(--ink);color:var(--bg)}
  .res-grid .res-card,.res-grid .res-card.in{transition:opacity .7s ease,transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
  .res-grid .res-card:hover,.res-grid .res-card.in:hover{transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(0,0,0,.4)}
  .work-item .vid{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  .work-item:hover .vid{transform:translateY(-6px)}
  .marquee-row img,.logo-row img{transition:filter .4s}
  .marquee-row img:hover,.logo-row img:hover{filter:none}
}

/* ---------- results: the strongest first, the rest one tap away ---------- */
.res-more{display:none}
.js .res-more{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;margin-top:14px;padding:0 24px;border:1px solid var(--line);border-radius:var(--btn-r);background:var(--surface);color:var(--ink);font-weight:600;font-size:14.5px;transition:background-color .2s,color .2s}
.js .res-more:hover{background:var(--ink);color:var(--bg)}
[data-style="elegant"] .res-more{letter-spacing:.16em;text-transform:uppercase;font-size:11.5px;font-weight:500}
.js .res-grid:not(.all) .res-card[data-more]{display:none}
@media (min-width:720px){
  .js .res-grid:not(.all) .res-card[data-more]:nth-child(4){display:grid}
  .js .res-more{width:auto;margin-inline:auto}
  .js .res-grid:not(:has(.res-card:nth-child(5)))+.res-more{display:none}
}

/* ---------- no intro video and no photo: a text hero, then straight to her videos ---------- */
.hero--plain .hero-grid{display:flex!important;flex-direction:column}
.hero--plain .claim{max-width:22ch}
[data-style="elegant"] .hero--plain .hero-grid{align-items:center;text-align:center}
[data-style="elegant"] .hero--plain .kicker,[data-style="elegant"] .hero--plain .claim{text-align:center;margin-top:14px}
[data-style="elegant"] .hero--plain .metrics{width:min(100%,640px);margin-top:26px}
[data-style="elegant"] .hero--plain .cta-row{flex-direction:row;justify-content:center;width:min(100%,640px)}
[data-style="elegant"] .hero--plain .socials{justify-content:center}
.hero--plain+.sec.work{padding-top:clamp(40px,6vw,80px)}
/* words instead of numbers at the top ("Mama", "Kosmetikerin") stay small in every style, so they never overlap */
[data-style] .hero .num.num--text{font-size:clamp(16px,4.4vw,24px);hyphens:auto;overflow-wrap:break-word}
[data-style="bold"] .hero--noclaim .name{font-family:var(--font-display);font-weight:var(--dw);letter-spacing:var(--dt);font-size:calc(clamp(50px,14.6vw,118px)*var(--nw,1));line-height:.94;margin-top:6px;overflow-wrap:anywhere}

/* =========================================================
   PREMIUM POLISH (Alex, 9 Nov: "super premium ... distinguishable from the typical canva
   bullshit"): layered soft shadows, light on the deep bands, one clear action, less noise.
   ========================================================= */
body{--sh-1:0 1px 1px rgba(20,14,10,.04),0 2px 6px -2px rgba(20,14,10,.06);--sh-2:0 1px 2px rgba(20,14,10,.04),0 12px 32px -14px rgba(20,14,10,.2);--sh-3:0 2px 6px rgba(20,14,10,.05),0 34px 64px -28px rgba(20,14,10,.38)}

/* type: balanced headlines, a fine rule in front of each label */
.h2,.claim,.quote-text{text-wrap:balance}
.sec-sub,.res-note,.work-cap{text-wrap:pretty}
.eyebrow{display:inline-flex;align-items:center;gap:12px}
[data-style="elegant"] .eyebrow::before,[data-style="bold"] .eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.55}

/* one clear action at the top: the second button becomes a quiet link */
.hero .cta-row .btn-ghost{border-color:transparent;background:none;min-height:46px;padding:0 6px;flex:0 0 auto;align-self:center;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.hero .socials{flex-wrap:wrap;gap:12px 24px}
.hero .socials a{font-size:13.5px}
.hero .socials svg{opacity:.72}
/* A long number at the top ("20.000.000") shrinks until it fits its tile, instead of running out of it,
   and the numbers next to it keep its size (12 Nov). --ems: about how wide the longest one sets
   (render.js). Without container units the size above stays. A tile needs a width that does not
   come from its number to measure against, so the row has one where it had none. */
@supports (width:1cqw){
  .hero .metrics li{container-type:inline-size}
  .hero--plain .metrics{width:100%}
  [data-style="bold"] .hero--plain .metrics{max-width:640px}
  [data-style] .hero .metrics[style*="--ems"] .num:not(.num--text){font-size:min(var(--num,1em),calc(100cqw / var(--ems)))}
}
/* her follower numbers stand like her other numbers, in the headline type (Alex, 12 Nov) */
.soc-n{display:inline-block;font-family:var(--font-display);font-weight:var(--dw);letter-spacing:var(--dt);font-size:20px;line-height:1;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}

/* buttons: a soft lift, nothing plastic */
.btn-primary{box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 10px 24px -14px rgba(20,14,10,.55)}
@media (hover:hover) and (pointer:fine){.btn-primary:hover{filter:none;transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 16px 30px -14px rgba(20,14,10,.6)}}

/* cards float instead of sitting in boxes; numbers get a fine divider */
.res-feature,.res-card{border-color:transparent;box-shadow:var(--sh-2)}
[data-style="elegant"] .res-feature,[data-style="elegant"] .res-card{border-color:var(--line);box-shadow:var(--sh-1)}
.metrics--card li+li,.metrics--big li+li{border-left:1px solid var(--line);padding-left:16px}

/* media: depth on the intro video, quiet frames elsewhere */
.vid--hero{box-shadow:var(--sh-3)}
[data-style="bold"] .vid--hero,[data-style="bold"] .vid--side{box-shadow:var(--sh-3)}
.work-grid .vid{box-shadow:0 22px 40px -26px rgba(0,0,0,.55)}
.photos-row img{box-shadow:var(--sh-2)}

/* the deep bands get light, like a studio */
@supports (background:color-mix(in srgb,red,blue)){
  .sec.work,.sec.quote{background:radial-gradient(120% 80% at 12% 0%,color-mix(in srgb,var(--deep) 84%,#fff) 0%,var(--deep) 58%)}
}

/* logos stay calm until you look at one */
.marquee-row img,.logo-row img{opacity:.7}
.marquee-row img:hover,.logo-row img:hover{opacity:1}

/* proof screenshots framed like a printed document */
.proof-shots img{border:0;background:#fff;padding:5px;box-shadow:var(--sh-2)}

/* form: a soft focus ring */
@supports (color:color-mix(in srgb,red,blue)){
  .form input:focus,.form textarea:focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}
}

/* ---------- the builder's preview only: empty spots drawn as quiet outlines (render.js GUIDE) ---------- */
.ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;padding:14px;border:1.5px dashed var(--line);color:var(--muted)}
.vid.ph{background:none;box-shadow:none!important}
.vid.ph svg{font-size:24px;opacity:.5}
.ph b{font-family:var(--font-body);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;line-height:1.35}
.ph small{font-family:var(--font-body);font-size:11.5px;line-height:1.35;max-width:20ch;opacity:.85}
.ph-word{opacity:.34!important;border-bottom:1.5px dashed currentColor;padding-bottom:4px}
.res-card.ph-card{display:block;border:1.5px dashed var(--line)!important;background:none!important;box-shadow:none!important;padding:8px!important}
.ph-card .ph{border:0;min-height:96px}
.ph--photo{flex:none;width:clamp(170px,46vw,300px);aspect-ratio:3/4}
.sec.work .ph{border-color:var(--deep-line);color:var(--deep-muted)}
[data-style="maison"] .work-item:has(.ph){background:none;box-shadow:none;padding:0}
.work-cap:empty{display:none}

/* ---------- what makes her special: one fine line under her name (Alex, 11 Nov) ---------- */
.usp{order:2;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 0;margin-top:16px;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-text);line-height:1.5}
.usp li{white-space:nowrap}
.usp li+li::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.55;margin:0 .95em;vertical-align:middle}
[data-style="bold"] .usp{justify-content:flex-start;gap:7px;margin-top:14px;letter-spacing:.12em;font-size:10.5px;font-weight:700;color:var(--ink)}
[data-style="bold"] .usp li{border:1.5px solid var(--ink);padding:5px 10px}
[data-style="bold"] .usp li+li::before{display:none}
[data-style="maison"] .usp{margin-top:18px;letter-spacing:.24em;font-size:10.5px;font-weight:500}
[data-fx~="reveal"]:not([data-calm]) .hero .usp{animation:pf-rise .9s .3s cubic-bezier(.2,.7,.2,1) both}
/* followers without a profile link */
.social-plain{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:500}
/* the numbers at the top arrive one after the other, then run up (site.js) */
[data-fx~="reveal"]:not([data-calm]) .hero .metrics li{animation:pf-rise .9s cubic-bezier(.2,.7,.2,1) both}
[data-fx~="reveal"]:not([data-calm]) .hero .metrics li:nth-child(1){animation-delay:.5s}
[data-fx~="reveal"]:not([data-calm]) .hero .metrics li:nth-child(2){animation-delay:.64s}
[data-fx~="reveal"]:not([data-calm]) .hero .metrics li:nth-child(3){animation-delay:.78s}

/* ---------- what she offers, right before the form ---------- */
.offer{background:var(--bg2)}
.offer-grid{display:grid;gap:clamp(26px,4vw,56px)}
@media (min-width:720px){.offer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.offer-label{font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-on-soft);padding-bottom:12px;border-bottom:1px solid var(--line)}
.offer-list li{font-family:var(--font-display);font-weight:var(--dw);letter-spacing:var(--dt);font-size:clamp(21px,3vw,30px);line-height:1.2;padding:13px 0;border-bottom:1px solid var(--line)}
[data-style="bold"] .offer-list li{font-size:clamp(20px,2.8vw,28px);border-bottom-width:1.5px;border-color:var(--ink)}
[data-style="bold"] .offer-label{border-bottom:1.5px solid var(--ink);color:var(--ink);font-weight:700}
[data-style="maison"] .offer{background:var(--bg)}
[data-style="maison"] .offer-col{text-align:center}
[data-style="maison"] .offer-label{border:0;padding-bottom:6px;letter-spacing:.26em}
[data-style="maison"] .offer-list li{border:0;padding:7px 0;font-style:italic}
[data-style="maison"] .offer-list li:nth-child(odd){font-style:normal}
.offer .ph{min-height:110px}

/* ---------- the form: a name, a work address, a message that is already written ---------- */
.form-work{font-size:13.5px;font-weight:600;color:#b3261e;margin-top:-4px}
.form textarea{resize:vertical;line-height:1.45}

/* builder preview: where her special line and her numbers will stand */
.ph-usp li{color:var(--muted);border:1.5px dashed var(--line);padding:5px 10px;letter-spacing:.14em;font-weight:600}
.ph-metrics{opacity:.75}
.ph-metrics li{align-items:center;text-align:center;border:1.5px dashed var(--line)!important;padding:10px!important}
.ph-metrics .num{color:var(--muted)}

/* ---------- videos in rows: her best first, then each theme. Sideways through a row, down to the next ---------- */
.work-row+.work-row{margin-top:clamp(30px,4.5vw,56px)}
.work-label{display:flex;align-items:baseline;gap:10px;margin-bottom:14px;font-family:var(--font-body);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.work-label small{font-size:11px;font-weight:500;letter-spacing:.06em;color:var(--deep-muted)}
.work-row--best .work-label span::before{content:"★";margin-right:.55em;color:var(--deep-accent)}
[data-style="maison"] .work-label{justify-content:center;letter-spacing:.26em;font-size:11px}

/* ---------- what brands said: the first one big, the others as cards to swipe ---------- */
.quote-more{margin-top:clamp(28px,4vw,52px);gap:14px;align-items:stretch;padding-bottom:6px}
.quote-card{width:min(78vw,340px);margin:0;padding:20px;display:flex;flex-direction:column;gap:12px;border:1px solid var(--deep-line);background:var(--deep-surface);border-radius:var(--r-lg);text-align:left}
.quote-card blockquote{font-family:var(--font-display);font-weight:var(--dw);letter-spacing:var(--dt);font-size:20px;line-height:1.28}
.quote-card figcaption{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--deep-muted)}
.quote-card .proof{margin-top:auto}
.quote-card .proof-shots img{max-height:150px}
.quote-card .proof-tag{color:var(--deep-accent)}

/* a photo of her without its background: no frame, she stands on the page */
.hero--cut .vid--hero{aspect-ratio:auto;background:none;overflow:visible;box-shadow:none!important;border-radius:0}
.hero--cut .vid--hero .vid-poster{position:relative;inset:auto;width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 22px 26px rgba(20,14,10,.2))}
[data-style="elegant"] .hero--cut .hero-media::before,[data-style="maison"] .hero--cut .hero-media{border:0;background:none;box-shadow:none;padding:0}
[data-style="elegant"] .hero--cut .hero-media::before{display:none}

/* =========================================================
   COVER: a magazine cover (Alex, 11 Nov, after a "moodboard" reference). Her name is as wide as the
   page, and she stands in front of it: best with a photo of her without its background, in colour.
   ========================================================= */
[data-style="cover"]{--dw:800;--dt:-.045em;--btn-r:999px;--r:16px;--r-lg:22px;--tick-r:50%}
[data-style="cover"][data-font="magazine"]{--dw:600;--dt:-.02em}
[data-style="cover"][data-font="classic"]{--dw:600;--dt:-.03em}
[data-style="cover"] .nav-mark{font-weight:800;letter-spacing:-.04em}
[data-style="cover"] .btn{font-weight:700}
[data-style="cover"] .hero-grid{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;--cs:min(calc(96vw / var(--nl,6)),260px);padding-block:clamp(14px,3vw,30px) clamp(40px,6vw,76px)}
[data-style="cover"] .kicker{grid-row:1;letter-spacing:.22em;font-size:11px;margin-bottom:8px}
[data-style="cover"] .name{grid-row:2;grid-column:1;align-self:start;width:100%;font-size:var(--cs);line-height:.86;text-transform:uppercase;color:var(--accent-text);white-space:nowrap}
[data-style="cover"] .hero .name>span{display:block!important}
/* a frame tucks under her name: every line stays readable, the last one is half behind it */
[data-style="cover"] .hero-media{grid-row:2;grid-column:1;align-self:start;position:relative;z-index:2;width:min(58vw,290px);margin-top:calc(var(--cs) * .86 * (var(--nn,1) - 1) + var(--cs) * .44)}
[data-style="cover"] .vid--hero{border-radius:22px}
[data-style="cover"] .vid--side,[data-style="cover"] .bubble{display:none}
[data-style="cover"] .hero--cut .hero-media{width:min(78vw,430px);margin-top:calc(var(--cs) * .2)}
[data-style="cover"] .hero--plain .name{color:var(--ink)}
[data-style="cover"] .usp{grid-row:3;margin-top:22px;color:var(--ink)}
[data-style="cover"] .claim{grid-row:4;font-size:clamp(24px,6.4vw,40px);margin-top:14px;max-width:20ch}
[data-style="cover"] .claim mark,[data-style="cover"] .h2 mark{color:var(--accent-text)}
/* On the deep band the highlighted word takes the band's own light tone, with a soft sheen. It had the
   page's accent there, dark on dark: unreadable in four of six colour schemes (Alex, 12 Nov). */
[data-style="cover"] .sec.work .h2 mark,[data-style="cover"] .sec.quote .h2 mark{color:var(--deep-accent)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  [data-style="cover"] .sec.work .h2 mark,[data-style="cover"] .sec.quote .h2 mark{background:linear-gradient(100deg,var(--deep-accent) 12%,var(--deep-accent-2,var(--deep-accent)) 96%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
}
[data-style="cover"] .hero .metrics{grid-row:5;width:100%;gap:8px;margin-top:24px}
[data-style="cover"] .hero .metrics li{align-items:center;text-align:center;padding:14px 6px;border-radius:18px;background:var(--surface);box-shadow:var(--sh-1)}
[data-style="cover"] .hero .num{--num:clamp(24px,6.8vw,42px);font-size:var(--num);line-height:1}
[data-style="cover"] .metrics li>span{font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:10px}
[data-style="cover"] .cta-row{grid-row:6;width:100%;justify-content:center}
[data-style="cover"] .socials{grid-row:7;justify-content:center}
[data-style="cover"] .logos{border-block:0;background:var(--surface)}
[data-style="cover"] .wordmark{font-weight:800;text-transform:uppercase;letter-spacing:-.02em}
[data-style="cover"] .eyebrow{font-weight:700;letter-spacing:.2em;font-size:11px}
[data-style="cover"] .eyebrow::before{content:"+";font-size:15px;font-weight:700;letter-spacing:0}
[data-style="cover"] .h2{text-transform:uppercase;font-size:clamp(30px,8.6vw,88px);line-height:.98;overflow-wrap:anywhere;-webkit-hyphens:manual;hyphens:manual}
[data-style="cover"] .work-grid .vid{border-radius:20px}
[data-style="cover"] .photos-row{align-items:center;padding-block:14px 22px}
[data-style="cover"] .photos-row img{border-radius:20px}
[data-style="cover"] .photos-row img:nth-child(odd){rotate:-1.6deg}
[data-style="cover"] .photos-row img:nth-child(even){rotate:1.6deg;margin-top:18px}
[data-style="cover"] .offer-list li{text-transform:uppercase;font-size:clamp(22px,3.4vw,34px);line-height:1}
[data-style="cover"] .quote-text{text-transform:uppercase;font-size:clamp(26px,5vw,58px);line-height:1.02;overflow-wrap:anywhere;-webkit-hyphens:manual;hyphens:manual}
[data-style="cover"] .signature{color:var(--ink)}
@media (min-width:980px){
  [data-style="cover"] .hero-grid{--cs:min(calc(90vw / var(--nl,6)),340px)}
  [data-style="cover"] .hero-media{width:min(24vw,350px)}
  [data-style="cover"] .hero--cut .hero-media{width:min(40vw,600px)}
  [data-style="cover"] .hero .metrics{max-width:720px}
  [data-style="cover"] .cta-row{width:auto}
}

/* =========================================================
   REEL: playful (Alex, 11 Nov, after a creator portfolio he liked). Every video sits in a phone,
   the page is built from round tiles, her first name is set heavy with her last name written across it.
   ========================================================= */
[data-style="reel"]{--dw:800;--dt:-.04em;--btn-r:999px;--r:26px;--r-lg:30px;--tick-r:50%;--phone:#0e0e10;background:var(--bg2)}
[data-style="reel"][data-font="magazine"]{--dw:600;--dt:-.02em}
[data-style="reel"][data-font="classic"]{--dw:600;--dt:-.03em}
[data-style="reel"] .nav{background:var(--bg2);border-bottom-color:transparent}
[data-style="reel"] .nav-mark{font-weight:800;letter-spacing:-.04em}
[data-style="reel"] .btn{font-weight:800}
[data-style="reel"] .hero-grid{padding-block:clamp(16px,4vw,40px) clamp(30px,5vw,60px)}
[data-style="reel"] .kicker{letter-spacing:.16em;font-size:11px;font-weight:700}
[data-style="reel"] .name{font-size:calc(clamp(58px,18.5vw,150px)*var(--nw,1));line-height:.9;text-transform:uppercase;margin-top:10px}
[data-style="reel"] .hero .name>span{display:block!important}
[data-style="reel"] .name>span+span{font-family:"Mrs Saint Delafield",cursive;font-weight:400;text-transform:none;letter-spacing:0;font-size:1.3em;line-height:.62;color:var(--accent-text);margin:-.1em 0 .1em 12%;rotate:-5deg;transform-origin:0 100%;white-space:nowrap}
[data-style="reel"] .usp{justify-content:flex-start;gap:7px;letter-spacing:.06em;margin-top:18px}
[data-style="reel"] .usp li{background:var(--ink);color:var(--bg);border-radius:99px;padding:6px 13px;font-weight:700}
[data-style="reel"] .usp li+li::before{display:none}
[data-style="reel"] .claim{font-size:clamp(24px,6.4vw,40px);margin-top:16px;line-height:1.2}
[data-style="reel"] mark{background:var(--accent);color:var(--on-accent);border-radius:.34em;padding:0 .2em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
[data-style="reel"] .sec.work mark,[data-style="reel"] .sec.quote mark{background:var(--on-deep);color:var(--deep)}
/* the phone */
[data-style="reel"] .hero-media{position:relative;width:min(60vw,290px);margin:30px auto 28px}
[data-style="reel"] .vid--hero,[data-style="reel"] .vid--side,[data-style="reel"] .work-grid .vid,[data-style="reel"] .res-card-media .vid,[data-style="reel"] .res-feature-media .vid{border:7px solid var(--phone);border-radius:34px;background:var(--phone);box-shadow:0 0 0 1px #2c2c30,0 26px 44px -22px rgba(0,0,0,.5)}
[data-style="reel"] .vid--hero{border-width:9px;border-radius:44px;position:relative;z-index:2}
[data-style="reel"] .vid--hero::before,[data-style="reel"] .work-grid .vid::before{content:"";position:absolute;z-index:5;top:2.2%;left:50%;width:30%;height:5.4%;transform:translateX(-50%);border-radius:99px;background:var(--phone);pointer-events:none}
[data-style="reel"] .vid--side{position:absolute;top:13%;width:66%;z-index:1;opacity:.96}
[data-style="reel"] .vid--side.a{left:-36%;rotate:-9deg}
[data-style="reel"] .vid--side.b{right:-36%;rotate:9deg}
[data-style="reel"] .bubble{display:none}
[data-style="reel"] .vid.ph{border-style:dashed;border-color:var(--line);background:none;box-shadow:none}
[data-style="reel"] .vid.ph::before{display:none}
[data-style="reel"] .hero--cut .vid--hero{border:0;background:none;box-shadow:none;border-radius:0}
[data-style="reel"] .hero--cut .vid--hero::before{display:none}
[data-style="reel"] .hero--cut .hero-media{width:min(84vw,430px)}
/* numbers and followers as tiles */
[data-style="reel"] .hero .metrics{gap:8px;margin-top:24px}
[data-style="reel"] .hero .metrics li{align-items:center;text-align:center;padding:15px 6px;border-radius:22px;background:var(--surface);border:1.5px solid var(--ink)}
[data-style="reel"] .hero .num{--num:clamp(21px,5.8vw,42px);font-size:var(--num);line-height:1}
[data-style="reel"] .metrics li>span{font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:10px}
[data-style="reel"] .socials{gap:8px;flex-wrap:wrap;opacity:1}
[data-style="reel"] .socials a,[data-style="reel"] .social-plain{background:var(--surface);border-radius:99px;padding:9px 15px;font-weight:700}
/* the page in tiles */
[data-style="reel"] .logos{margin:12px clamp(10px,2vw,24px) 0;border:0;border-radius:30px;background:var(--surface)}
[data-style="reel"] main>.sec{margin:12px clamp(10px,2vw,24px) 0;border-radius:34px;overflow:hidden;padding-block:clamp(44px,7vw,92px)}
[data-style="reel"] .sec.results,[data-style="reel"] .sec.photos,[data-style="reel"] .sec.contact{background:var(--surface)}
[data-style="reel"] .sec.offer{background:var(--bg)}
[data-style="reel"] .foot{margin:12px clamp(10px,2vw,24px);border-radius:30px}
[data-style="reel"] .eyebrow{font-family:"Mrs Saint Delafield",cursive;font-size:40px;line-height:.9;letter-spacing:0;text-transform:none;font-weight:400;rotate:-4deg;margin:0 0 6px 2px}
[data-style="reel"] .h2{text-transform:uppercase;font-size:clamp(30px,8.6vw,94px);line-height:1.12;margin-top:0;overflow-wrap:anywhere;-webkit-hyphens:manual;hyphens:manual}
[data-style="reel"] .wordmark{font-weight:800;text-transform:uppercase;letter-spacing:-.02em}
[data-style="reel"] .res-feature,[data-style="reel"] .res-card{border:1.5px solid var(--ink);box-shadow:none;background:var(--bg);border-radius:28px}
[data-style="reel"] .work-label{font-weight:800;letter-spacing:.12em}
[data-style="reel"] .work-cap{font-weight:700;letter-spacing:.04em}
[data-style="reel"] .quote-text{text-transform:uppercase;font-size:clamp(26px,5vw,56px);line-height:1.14;overflow-wrap:anywhere;-webkit-hyphens:manual;hyphens:manual}
[data-style="reel"] .quote-card{border-radius:26px}
[data-style="reel"] .photos-row img{border-radius:28px;border:1.5px solid var(--ink)}
[data-style="reel"] .offer-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
[data-style="reel"] .offer-list li{font-family:var(--font-body);font-size:16px;font-weight:700;letter-spacing:0;border:1.5px solid var(--ink);border-radius:99px;padding:9px 16px;background:var(--surface)}
[data-style="reel"] .offer-label{border-bottom:0;padding-bottom:0;font-weight:800;color:var(--ink)}
[data-style="reel"] .form input:not([type=checkbox]),[data-style="reel"] .form textarea{border-radius:18px;border:1.5px solid var(--ink)}
[data-style="reel"] .contact-photo img{border-radius:30px;border:1.5px solid var(--ink)}
@media (min-width:980px){
  [data-style="reel"] .hero-grid{display:grid;grid-template-columns:1.15fr 1fr;grid-template-rows:repeat(7,auto);column-gap:clamp(30px,6vw,96px);align-items:start}
  [data-style="reel"] .kicker,[data-style="reel"] .name,[data-style="reel"] .usp,[data-style="reel"] .claim,[data-style="reel"] .hero .metrics,[data-style="reel"] .cta-row,[data-style="reel"] .socials{grid-column:1}
  [data-style="reel"] .name{font-size:calc(clamp(96px,10.4vw,176px)*var(--nw,1))}
  [data-style="reel"] .hero-media{grid-column:2;grid-row:1/8;width:min(23vw,330px);margin:14px auto 0}
  [data-style="reel"] .hero .metrics{max-width:560px;margin-top:26px}
  [data-style="reel"] main>.sec,[data-style="reel"] .logos,[data-style="reel"] .foot{max-width:1320px;margin-inline:auto}
}
/* swiping through a row: the video in the middle stands straight, its neighbours lean away */
@supports (animation-timeline:view()){
  @media (max-width:959px){
    [data-style="reel"]:not([data-calm]) .work-item,[data-style="cover"]:not([data-calm]) .work-item{animation:pf-flow linear both;animation-timeline:view(inline)}
  }
  @keyframes pf-flow{0%{transform:scale(.88) rotate(4deg);opacity:.72}40%,60%{transform:none;opacity:1}100%{transform:scale(.88) rotate(-4deg);opacity:.72}}
}

/* A long word in a headline must never widen what it stands in (Alex's phone, 11 Nov: "zusammenarbeiten"
   in capitals pushed the whole form past the edge). Grid children may shrink, headlines break. */
.contact-main,.contact-side,.offer-col,.res-card-copy,.res-feature-top,.quote-copy,.hero-grid>*,.hero-copy>*{min-width:0}
.h2,.quote-text,.claim{overflow-wrap:break-word}
/* Bold: a highlighted word longer than the line breaks inside its block instead of running off */
[data-style="bold"] mark{max-width:100%;overflow-wrap:anywhere}
/* Cover: serif capitals are wider than the sans the fit was measured on */
[data-style="cover"][data-font="classic"] .hero-grid,[data-style="cover"][data-font="magazine"] .hero-grid{--cs:min(calc(88vw / var(--nl,6)),250px)}
@media (min-width:980px){[data-style="cover"][data-font="classic"] .hero-grid,[data-style="cover"][data-font="magazine"] .hero-grid{--cs:min(calc(84vw / var(--nl,6)),320px)}}