/* Generated by preview/_build/v2/make_css.py from the approved mockup (preview/redesign). Edit the generator or the mockup, not this file. */
/* Self-hosted fonts (SIL Open Font License; licence files sit beside them in /assets/fonts) */
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url("/assets/fonts/Archivo-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url("/assets/fonts/Archivo-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/IBMPlexSans-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/IBMPlexSans-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/IBMPlexSans-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/IBMPlexSans-500-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/IBMPlexSans-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/IBMPlexSans-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url("/assets/fonts/JetBrainsMono-400.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:600 800;font-display:swap;src:url("/assets/fonts/JetBrainsMono-700.woff2") format("woff2")}

/* Five homepage directions. Shared structure first, then one block per option.
   Variables on .oa .. .oe drive the shared sections (about, projects, blog, quotes, faq, band, footer). */
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-b);color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}a{color:inherit}h1,h2,h3,h4,p{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,44px)}
.mono{font-family:var(--mono)}
.eyebrow{font:500 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.btn{display:inline-flex;align-items:center;gap:10px;font:600 15px/1 var(--font-b);padding:15px 24px;border:1px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;background:var(--btn-bg);color:var(--btn-ink);border-radius:var(--btn-r)}
.btn:hover{filter:brightness(1.12)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.link{font-weight:600;font-size:14.5px;text-decoration:none;color:var(--accent)}
.link:hover{text-decoration:underline}
.pm .t1{fill:var(--m1)}.pm .t2{fill:var(--m2)}.pm .t3{fill:var(--m3)}

/* header */

/* shared lower sections */
.sec{padding:clamp(56px,7vw,100px) 0}.sec--alt{background:var(--bg2)}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:34px;flex-wrap:wrap}
.head h2{font:var(--h2-w) clamp(28px,3.6vw,46px)/1.08 var(--font-d);letter-spacing:var(--h2-ls);margin-top:12px}
.about{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center}
.about h2{font:var(--h2-w) clamp(30px,4vw,50px)/1.05 var(--font-d);letter-spacing:var(--h2-ls);margin:14px 0 22px}
.about ul{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:16px}.about li{display:grid;grid-template-columns:32px 1fr;gap:14px;font-size:16px;color:var(--mut)}
.about li b{display:block;color:var(--ink);font-weight:650}.about li i{font:600 13px var(--mono);font-style:normal;color:var(--accent);padding-top:3px}
.receipt{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.receipt h3{font:var(--h2-w) 26px/1.1 var(--font-d);margin:12px 0 4px}.receipt .sub{color:var(--mut);font-size:15px}
.receipt .kv{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.receipt .kv b{display:block;font:700 28px/1 var(--font-d);color:var(--accent);letter-spacing:-.03em}.receipt .kv span{font-size:13px;color:var(--mut)}
@media(max-width:900px){.about{grid-template-columns:1fr}}
.projects{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.proj{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.proj:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(30,20,80,.5)}
.proj .th{aspect-ratio:16/10;background:#000;position:relative;overflow:hidden}.proj .th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.proj .th.sh img{object-position:top left}
.proj .bd{padding:16px}.proj .tag{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.proj h3{font:700 18px/1.2 var(--font-d);margin-top:6px}.proj .num{margin-top:12px;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.proj .num b{font:700 24px var(--font-d);color:var(--accent);letter-spacing:-.03em}.proj .num span{font-size:13px;color:var(--mut)}
@media(max-width:1000px){.projects{grid-template-columns:1fr 1fr}}@media(max-width:560px){.projects{grid-template-columns:1fr}}
.blog{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.post{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transition:transform .2s}
.post:hover{transform:translateY(-3px)}.post .th{aspect-ratio:16/9.4;overflow:hidden;background:#0c0c14}.post .th img{width:100%;height:100%;object-fit:cover}
.post .bd{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.post .meta{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.post h3{font:700 19px/1.25 var(--font-d);letter-spacing:-.01em}.post p{font-size:14.5px;color:var(--mut)}.post .rd{margin-top:auto;font-weight:600;font-size:14px;color:var(--accent)}
@media(max-width:900px){.blog{grid-template-columns:1fr}}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.quote{margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.quote p{font-size:16px;margin-bottom:18px}.quote cite{font-style:normal;font-size:14px;color:var(--mut)}.quote cite b{display:block;color:var(--ink)}
.creds{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.creds span{font:500 12px var(--mono);letter-spacing:.06em;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--mut)}
@media(max-width:900px){.quotes{grid-template-columns:1fr}}
.faq{max-width:780px;margin:0 auto}.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{cursor:pointer;font-weight:650;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::after{content:"+";color:var(--accent);font-size:22px;line-height:1}.faq details[open] summary::after{content:"\2212"}.faq p{color:var(--mut);margin-top:12px}
.band__in{background:var(--band-bg);color:var(--band-ink);border-radius:var(--radius);padding:clamp(26px,4vw,44px);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;border:1px solid var(--line)}
.band h2{font:var(--h2-w) clamp(24px,3vw,34px)/1.1 var(--font-d);letter-spacing:var(--h2-ls)}.band p{margin-top:8px;opacity:.75;max-width:56ch}
.band .btn{background:var(--band-btn-bg);color:var(--band-btn-ink)}

/* ======================================================= D · BIG TYPE (rebuilt)
   Poster-size condensed type, and the Pixel M's own 5x5 tile grid as the visual language: the M assembles in the hero,
   the numbers sit on a split-flap board, the cursor after "next?" is a lit tile. Dark ink and lilac from the kit. */
:root{--bg:#f3f0f8;--bg2:#e9e4f3;--ink:#0d0a18;--mut:#4f4a63;--line:rgba(13,10,24,.16);--line-strong:rgba(13,10,24,.5);--card:#fbfaff;--accent:#6b4ae0;--radius:16px;--btn-r:12px;
 --btn-bg:#0d0a18;--btn-ink:#f4f1fb;--font-d:"Archivo",ui-sans-serif,system-ui,sans-serif;--font-b:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
 --h2-w:800;--h2-ls:-.015em;--hdr-bg:rgba(13,10,24,.92);--hdr-solid:#0d0a18;--hdr-line:rgba(255,255,255,.1);--hdr-ink:#f4f1fb;--hdr-mut:#a9a3c0;
 --m1:#fff;--m2:#bfa8ff;--m3:#9372ff;--band-bg:#0d0a18;--band-ink:#f4f1fb;--band-btn-bg:#bfa8ff;--band-btn-ink:#0d0a18;--ftr-bg:#0d0a18;--ftr-ink:#f4f1fb;--ftr-mut:#a9a3c0;--ftr-line:rgba(255,255,255,.12)}
body h2,body .big,body .proof b,body .door h3,body .tick__in{font-stretch:66%}
body h3{font-stretch:80%}
.btn{font-weight:700;letter-spacing:0;text-transform:none;box-shadow:none;border:0;padding:15px 22px}
.btn--ghost{background:transparent;border:1px solid var(--line-strong);color:var(--ink)}
.hero .btn--ghost{border-color:rgba(255,255,255,.4);color:#f4f1fb}
/* hero: dark ink, a faint tile grid, poster type */
.hero{background:#0d0a18;color:#f4f1fb;position:relative;overflow:hidden;padding:clamp(40px,6vw,84px) 0 clamp(36px,5vw,64px)}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:72px 72px;-webkit-mask-image:linear-gradient(#000 30%,transparent);mask-image:linear-gradient(#000 30%,transparent)}
.hero .wrap{position:relative}
.hgrid{display:grid;grid-template-columns:1.55fr .75fr;gap:clamp(24px,4vw,64px);align-items:end}
.eyebrow{color:#a9a3c0}
body .hero h1{font:800 clamp(54px,10vw,158px)/.84 var(--font-d);font-stretch:66%;letter-spacing:-.012em;margin-top:22px;color:#f4f1fb}
body .ph h1{font:800 clamp(46px,7.4vw,112px)/.88 var(--font-d);font-stretch:66%;letter-spacing:-.012em;max-width:16ch;color:var(--ink)}
h1 em{font-style:normal;color:#bfa8ff;white-space:nowrap}
h1 em::after{content:"";display:inline-block;width:.3em;height:.56em;margin-left:.1em;background:#bfa8ff;border-radius:22%;vertical-align:baseline}
html:not(.nomo) h1 em::after{animation:blink 1.15s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.lede{font-size:clamp(17px,1.8vw,21px);max-width:44ch;font-weight:400;color:#cbc4e0;margin-top:26px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.micro{font-size:13px;color:#a9a3c0;margin-top:14px}.micro a{color:#cbc4e0}
/* the Pixel M, assembling */
.tm{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(6px,.9vw,12px);width:min(100%,380px);aspect-ratio:1;justify-self:end}
.tm i{border-radius:24%;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);transition:background .6s,box-shadow .6s}
.tm i.t1{background:#fff;box-shadow:none}.tm i.t2{background:#bfa8ff;box-shadow:none}.tm i.t3{background:#9372ff;box-shadow:none}
.tm i.flash{background:rgba(191,168,255,.5)}
@keyframes tile{from{transform:scale(0) rotate(-12deg);opacity:0}70%{transform:scale(1.12)}to{transform:none;opacity:1}}
html:not(.nomo) .tm i[class^="t"]{animation:tile .55s cubic-bezier(.2,.9,.3,1.3) both;animation-delay:calc(var(--i) * 80ms + .35s)}
@media(max-width:900px){.hgrid{grid-template-columns:1fr}.tm{order:-1;width:112px;justify-self:start;gap:5px}}
/* the three answers, as huge rows */
.acc{background:#0d0a18;color:#f4f1fb;border-top:1px solid rgba(255,255,255,.14)}
.door{display:block;border-bottom:1px solid rgba(255,255,255,.14);text-decoration:none;position:relative;color:inherit;transition:background .35s,color .35s}
.door .in{display:grid;grid-template-columns:64px 1fr 64px;gap:20px;align-items:center;padding:clamp(18px,2.6vw,34px) 0}
.door .n{width:46px;height:46px;border-radius:24%;border:1px solid rgba(191,168,255,.6);color:#bfa8ff;display:grid;place-items:center;font:500 14px var(--mono)}
body .door h3{font:800 clamp(40px,8.6vw,128px)/.88 var(--font-d);font-stretch:62%;letter-spacing:-.012em;text-transform:none}
.door .ar{font:800 clamp(28px,4vw,52px) var(--font-d);text-align:right;color:#bfa8ff;transition:transform .35s}
.door .more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.75,.2,1)}.door .more>div{overflow:hidden}
.door .more .c{display:grid;grid-template-columns:64px 1fr 1fr;gap:20px;padding:0 0 30px}.door .more p{font-size:18px;max-width:40ch;color:inherit}
body .door .more .ev b{display:block;font:800 clamp(38px,5vw,68px)/1 var(--font-d);font-stretch:66%;letter-spacing:-.02em;color:#bfa8ff}.door .more .ev span{font-size:14px}
.door .apps{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}.door .apps span{font:500 12px var(--mono);border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:4px 10px}
.door:hover,.door:focus-visible{background:#bfa8ff;color:#0d0a18}.door:hover .n{border-color:#0d0a18;color:#0d0a18}.door:hover .ar{color:#0d0a18;transform:translateX(10px)}
.door:hover .more .ev b{color:#0d0a18}.door:hover .apps span{border-color:#0d0a18}
.door:hover .more,.door:focus-visible .more{grid-template-rows:1fr}
@media(hover:none),(max-width:900px){.door .more{grid-template-rows:1fr}.door .in{grid-template-columns:46px 1fr 30px;gap:12px}.door .more .c{grid-template-columns:46px 1fr;padding-bottom:24px}.door .more .ev{grid-column:2}}
/* the split-flap board */
.proof{background:#0d0a18;color:#f4f1fb;border:0}.proof .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.proof a{padding:30px 22px 34px 0;text-decoration:none;border-left:0;display:block}
.proof a>span{display:block;font-weight:500;margin-top:12px;color:#f4f1fb}.proof small{display:block;font:500 11px var(--mono);letter-spacing:.08em;color:#a9a3c0;margin-top:4px;text-transform:uppercase}
body .proof b{display:flex;flex-wrap:wrap;gap:8px 16px;font:800 clamp(24px,2.7vw,40px)/1 var(--font-d);font-stretch:66%;color:#fff}
.sw{display:inline-flex;gap:2px;white-space:nowrap}
.sf{display:inline-block;min-width:.62em;padding:.06em .07em .04em;text-align:center;background:linear-gradient(#211b3a 49.5%,#0a0814 50%,#171229 50.5%);border-radius:.14em;position:relative;color:#fff}
.sf.sym{color:#bfa8ff;min-width:.5em}
html:not(.nomo) .sf.go{animation:flip .26s ease-out}@keyframes flip{from{transform:rotateX(-80deg)}to{transform:none}}
@media(max-width:900px){.proof .wrap{grid-template-columns:1fr 1fr}.proof a{padding:22px 12px 24px 0}}
.tick{background:#bfa8ff;color:#0d0a18;border:0}.tick__in span b{color:#0d0a18;margin-right:10px}.tick__in span::after{content:"";display:inline-block;width:.34em;height:.34em;border-radius:24%;background:#0d0a18;margin-left:46px;vertical-align:middle}
.tick__in{gap:0;font-weight:800}.tick__in span{margin-right:0}
/* paper sections */
.eyebrow,.kicker{color:var(--mut)}
.hero .eyebrow{color:#a9a3c0}
.head h2,.about h2,.shead h2{text-transform:none}
.creds span,.badge,.st{border-radius:999px}
.proj:hover,.post:hover,.tool:hover{transform:translateY(-4px);box-shadow:0 22px 40px -26px rgba(13,10,24,.5)}
.link{color:var(--accent);text-decoration:none}
.sec--alt{background:#e9e4f3}
/* New-site mockup: components shared by every inner page. Colours and fonts come from the .oa .. .oe
   variables in options.css, so every page follows whichever direction (A..E) is chosen in the preview. */
.crumbs{font:500 12px var(--mono);letter-spacing:.06em;color:var(--mut)}.crumbs a{color:var(--mut);text-decoration:none}
.ph{padding:clamp(40px,6vw,84px) 0 clamp(24px,3vw,40px)}
.ph h1{font:var(--h2-w) clamp(34px,5.4vw,66px)/1.02 var(--font-d);letter-spacing:var(--h2-ls);margin-top:16px;max-width:20ch;text-wrap:balance}
.ph .lede{font-size:clamp(17px,1.8vw,21px);color:var(--mut);max-width:56ch;margin-top:18px}
.ph .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;align-items:center}
.ph .micro{font-size:13px;color:var(--mut);margin-top:14px}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.badge{font:500 12px var(--mono);padding:5px 11px;border:1px solid var(--line-strong);border-radius:999px;color:var(--ink)}
.badge--live{border-color:var(--accent);color:var(--accent)}
.split{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,4vw,56px);align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.frame{border:1px solid var(--line-strong);border-radius:calc(var(--radius) * .6);overflow:hidden;background:#0b0b10;box-shadow:0 30px 70px -34px rgba(20,10,60,.55)}
.frame img{width:100%;display:block}
.cap{font:500 11px var(--mono);letter-spacing:.05em;color:var(--mut);margin-top:10px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:900px){.grid3,.grid2{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.card h3{font:700 19px/1.2 var(--font-d);letter-spacing:-.01em}.card p{color:var(--mut);margin-top:8px;font-size:15px}
.card .no{font:500 12px var(--mono);color:var(--accent);letter-spacing:.08em}
.steps3{counter-reset:s}.steps3 .card::before{counter-increment:s;content:"0" counter(s);font:500 12px var(--mono);color:var(--accent);display:block;margin-bottom:10px}
.kicker{font:500 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.shead{margin-bottom:28px}.shead h2{font:var(--h2-w) clamp(26px,3.4vw,42px)/1.08 var(--font-d);letter-spacing:var(--h2-ls);margin-top:12px}
.conn{list-style:none;margin:0;padding:0}.conn li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.st{font:500 12px var(--mono);padding:3px 10px;border-radius:999px;border:1px solid var(--line-strong)}.st--live{background:var(--accent);color:var(--accent-ink,#fff);border-color:var(--accent)}
.runs{display:flex;gap:10px;flex-wrap:wrap}.runs span{padding:9px 15px;border:1px solid var(--line-strong);border-radius:999px;font-weight:600;font-size:14px}
.ctacard{background:var(--band-bg);color:var(--band-ink);border-radius:var(--radius);padding:clamp(26px,4vw,44px);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;border:1px solid var(--line)}
.ctacard h2{font:var(--h2-w) clamp(24px,3vw,34px)/1.1 var(--font-d);letter-spacing:var(--h2-ls);max-width:22ch}.ctacard p{opacity:.78;margin-top:10px;max-width:54ch}
.ctacard .btn{background:var(--band-btn-bg);color:var(--band-btn-ink)}
.proposal{display:inline-block;font:500 11px var(--mono);letter-spacing:.08em;background:#fff3cd;color:#6b4e00;padding:4px 9px;border-radius:6px;margin-bottom:12px}
.legal-links{display:flex;gap:18px;margin-top:18px;font-size:14px;flex-wrap:wrap}
.note{background:var(--bg2);border:1px dashed var(--line-strong);border-radius:10px;padding:12px 14px;font-size:14px;color:var(--mut)}.note b{color:var(--ink)}
/* tools */
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}@media(max-width:900px){.tools{grid-template-columns:1fr}}
.tool{display:flex;flex-direction:column;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;text-decoration:none;transition:transform .2s}
.tool .tag{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}.tool h3{font:700 20px/1.2 var(--font-d)}.tool p{color:var(--mut);font-size:14.5px}.tool .go{margin-top:auto;font-weight:600;color:var(--accent);font-size:14px;padding-top:6px}
/* quiz */
.quiz{max-width:720px}.bar{height:6px;background:var(--line);border-radius:999px;overflow:hidden}.bar i{display:block;height:100%;background:var(--accent);width:0;transition:width .3s}
.qq h3{font:var(--h2-w) clamp(22px,3vw,30px)/1.15 var(--font-d);margin:22px 0 16px}.opts{display:grid;gap:10px}
.opt{text-align:left;background:var(--card);border:1px solid var(--line-strong);color:var(--ink);padding:15px 18px;border-radius:12px;cursor:pointer;font:500 16px var(--font-b)}.opt:hover{border-color:var(--accent)}
.result .big{font:var(--h2-w) clamp(26px,4vw,40px)/1.1 var(--font-d);letter-spacing:var(--h2-ls)}
.meter{display:grid;gap:12px;margin:18px 0}.meter div{display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:center;font-size:14px}.meter i{display:block;height:10px;border-radius:99px;background:var(--line);overflow:hidden}.meter i b{display:block;height:100%;background:var(--accent)}
@media(max-width:560px){.meter div{grid-template-columns:1fr}}
/* checker */
.chk{display:flex;gap:10px;flex-wrap:wrap}.chk input{flex:1;min-width:220px;font:16px var(--font-b);padding:15px 16px;border:1px solid var(--line-strong);border-radius:12px;background:var(--card);color:var(--ink)}
.score{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center}@media(max-width:560px){.score{grid-template-columns:1fr}}
.ring{width:150px;height:150px;position:relative}.ring svg{width:100%;height:100%;transform:rotate(-90deg)}.ring b{position:absolute;inset:0;display:grid;place-items:center;font:700 38px var(--font-d)}
.rows{list-style:none;margin:0;padding:0;display:grid;gap:8px}.rows li{display:flex;gap:10px;align-items:baseline;font-size:15px}.rows .y{color:#17825d}.rows .n{color:#c0392b}.rows .w{color:#a66b00}
.ob .rows .y,.oe .rows .y{color:#6fe0c9}.ob .rows .n,.oe .rows .n{color:#ff8e80}
.sample{font:600 11px var(--mono);letter-spacing:.1em;background:#fff3cd;color:#6b4e00;padding:3px 9px;border-radius:6px}
/* mail */
.mail{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:16px}
.mail .hd{padding:12px 16px;border-bottom:1px solid var(--line);font-size:13px;color:var(--mut);display:grid;gap:2px;background:var(--bg2)}.mail .hd b{color:var(--ink);font-weight:600}
.mail .bd{padding:16px 18px;font-size:15px;white-space:pre-line}.mail .bd a,.mail .bd .lnk{color:var(--accent);font-weight:600}
.mail .when{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);padding:10px 16px 0}
.tw{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:12px}table{border-collapse:collapse;width:100%;font-size:14px}th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}th{font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.prose{max-width:70ch}.prose h1{font:var(--h2-w) clamp(30px,4vw,48px)/1.05 var(--font-d);margin-bottom:12px}.prose h2{font:var(--h2-w) 22px/1.2 var(--font-d);margin:28px 0 8px}.prose p,.prose li{color:var(--ink);margin:0 0 12px}.prose em{color:var(--mut)}
.shotcards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}@media(max-width:900px){.shotcards{grid-template-columns:1fr}}
.og{aspect-ratio:1.91/1;border-radius:12px;padding:20px;display:flex;flex-direction:column;justify-content:space-between;background:#0d0b16;color:#f4f2fb;border:1px solid var(--line)}
.og b{font:700 clamp(28px,4vw,46px)/1 var(--font-d);color:#cdb8ff;letter-spacing:-.03em}.og span{font-size:14px;opacity:.85}.og small{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.6}
.loop{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:12px;border:1px solid var(--line-strong);background:#0b0b10}
.loop img{position:absolute;left:0;top:0;width:100%;animation:pan 9s ease-in-out infinite alternate}.loop::after{content:"Stand-in for a 10-second recording";position:absolute;left:10px;bottom:8px;font:500 10px var(--mono);color:#fff;background:rgba(0,0,0,.6);padding:3px 7px;border-radius:5px}
@keyframes pan{from{transform:translateY(0)}to{transform:translateY(-38%)}}@media(prefers-reduced-motion:reduce){.loop img{animation:none}}
.wa{display:inline-flex;gap:8px;align-items:center}
.drop{border:2px dashed var(--line-strong);border-radius:var(--radius);padding:clamp(30px,6vw,64px);text-align:center;background:var(--card)}.drop b{font:700 22px var(--font-d)}.drop p{color:var(--mut);margin-top:8px}
.fld{display:grid;gap:6px;margin-top:12px}.fld label{font-weight:600;font-size:14px}.fld input,.fld textarea{font:16px var(--font-b);padding:13px 14px;border:1px solid var(--line-strong);border-radius:10px;background:var(--card);color:var(--ink);width:100%}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* cookie bar: slim, at the bottom, never over the hero button */
/* booking dialog */
.bk{position:fixed;inset:0;z-index:60;background:rgba(5,4,12,.66);display:none;align-items:center;justify-content:center;padding:14px}.bk.open{display:flex}
.bk__p{background:var(--card);color:var(--ink);width:min(560px,100%);max-height:calc(100vh - 28px);overflow:auto;border-radius:18px;border:1px solid var(--line-strong);padding:24px clamp(18px,3vw,30px) 26px;position:relative}
.bk__x{position:absolute;right:12px;top:10px;background:none;border:0;font-size:26px;cursor:pointer;color:var(--mut)}
.bk h2{font:700 24px/1.15 var(--font-d);margin:6px 0 6px}.bk .sub{color:var(--mut);margin:0 0 16px}.bk .step{display:none}.bk .step.on{display:block}
.bk .dots{display:flex;gap:6px;margin-bottom:12px}.bk .dots i{flex:1;height:4px;border-radius:9px;background:var(--line)}.bk .dots i.on{background:var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{font:500 15px var(--font-b);padding:11px 16px;border:1px solid var(--line-strong);background:var(--card);color:var(--ink);border-radius:999px;cursor:pointer}.chip[aria-pressed=true]{background:var(--accent);color:var(--accent-ink,#fff);border-color:var(--accent)}
.bk .row{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;align-items:center}.bk .back{background:none;border:0;color:var(--mut);cursor:pointer;font:14px var(--font-b)}
.days{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}@media(max-width:480px){.slots{grid-template-columns:repeat(3,1fr)}}
.slot{padding:10px 0;border:1px solid var(--line-strong);border-radius:10px;background:var(--card);color:var(--ink);font:500 14px var(--mono);cursor:pointer}.slot[disabled]{opacity:.35;text-decoration:line-through;cursor:not-allowed}.slot[aria-pressed=true]{background:var(--accent);color:var(--accent-ink,#fff);border-color:var(--accent)}
.nextline{background:var(--bg2);border-radius:10px;padding:10px 12px;font-size:14px;margin-bottom:12px}
.done .tick2{width:46px;height:46px;border-radius:50%;background:var(--accent);color:var(--accent-ink,#fff);display:grid;place-items:center;font-size:24px;margin-bottom:10px}
.done ul{margin:8px 0 0;padding-left:18px;color:var(--mut);display:grid;gap:5px}.done .box2{background:var(--bg2);border-radius:10px;padding:12px 14px;margin-top:12px;font-size:14px}
.ftr .apps a{padding:3px 0}
.hint-pill{display:inline-block;font:500 11px var(--mono);background:var(--bg2);border:1px solid var(--line);border-radius:6px;padding:3px 8px;color:var(--mut)}

.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}@media(max-width:900px){.grid4{grid-template-columns:1fr 1fr}}@media(max-width:480px){.grid4{grid-template-columns:1fr}}
.nav a,.lang,.hdr .btn{white-space:nowrap}.nav{gap:20px}.hdr .wrap{gap:18px}
/* Motion for the new-site mockup. Everything here is switched off by prefers-reduced-motion or ?m=0 (class "nomo" on <html>).
   Rule: nothing moves until the page has loaded, and everything ends in its finished, readable state. */
:root{--ease:cubic-bezier(.2,.75,.2,1)}
@keyframes pgin{from{opacity:0}to{opacity:1}}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes stepin{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,139,.55)}70%{box-shadow:0 0 0 8px rgba(34,197,139,0)}100%{box-shadow:0 0 0 0 rgba(34,197,139,0)}}
@keyframes drift{from{background-position:0% 0%}to{background-position:100% 60%}}
@keyframes floaty{from{transform:translateY(0)}to{transform:translateY(-18px)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes sweep{from{background-size:0% 100%;color:#0b0b0f}60%{color:#0b0b0f}to{background-size:100% 100%;color:#fff}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes ring{from{stroke-dashoffset:326}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes shine{from{transform:translateX(-120%)}to{transform:translateX(220%)}}

html:not(.nomo) body{animation:pgin .55s var(--ease) both}
html:not(.nomo) body.leave{opacity:0;transition:opacity .16s ease}
/* scroll progress */
.prog{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--accent);z-index:80;pointer-events:none}
.mh-hdr{transition:box-shadow .25s,background .25s}.mh-hdr .wrap{transition:height .25s var(--ease)}.mh-hdr.sm .wrap{height:56px}.mh-hdr.sm{box-shadow:0 8px 30px -18px rgba(10,6,40,.55)}
.mh-nav a{position:relative;border-bottom-color:transparent!important}
.mh-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--ease)}
.mh-nav a:hover::after{transform:scaleX(1)}
/* buttons */
.btn{transition:transform .18s var(--ease),box-shadow .25s,filter .2s;position:relative;overflow:hidden}
.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0) scale(.98)}
html:not(.nomo) .btn:not(.btn--ghost)::after{content:"";position:absolute;inset:0;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:translateX(-120%);pointer-events:none}
html:not(.nomo) .btn:not(.btn--ghost):hover::after{animation:shine .8s var(--ease)}
/* the "next free call" dot */
[data-nextcall]::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#22c58b;margin-right:7px;vertical-align:1px;animation:pulse 2.2s infinite}
/* scroll reveal: elements start hidden only once JS has marked them */
html:not(.nomo) .rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease) var(--rd,0s),transform .7s var(--ease) var(--rd,0s)}
html:not(.nomo) .rv.in{opacity:1;transform:none}
/* hero words rise */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .08em .12em 0;margin:0 -.08em -.12em 0}
.w>span{display:inline-block}
html:not(.nomo) .words-ready .w>span{animation:rise .85s var(--ease) both;animation-delay:calc(var(--i) * 70ms + .1s)}
/* cards and images */
.card,.tool,.proj,.post,.quote,.tile,.row{transition:transform .35s var(--ease),box-shadow .35s,border-color .25s,background .25s}
.card:hover{transform:translateY(-3px)}
.proj .th img,.post .th img,.frame img{transition:transform .8s var(--ease)}.proj:hover .th img,.post:hover .th img{transform:scale(1.05)}
.tool .go,.post .rd,.link{transition:letter-spacing .25s,transform .25s}.tool:hover .go,.post:hover .rd{transform:translateX(5px)}
/* B: drifting glow and a progress line under the active tab */
.win .tab{position:relative}
html:not(.nomo) .win:not(.stopped) .tab[aria-selected=true]::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;background:var(--accent);transform-origin:0 50%;animation:fill 6.5s linear both}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* C: tiles tilt toward the pointer */
/* D: ticker band and the NEXT? sweep */
.tick{display:none;overflow:hidden;background:#0b0b0f;color:#fff;border-block:2px solid #0b0b0f;white-space:nowrap}
.tick{display:block}.tick__in{display:inline-flex;gap:46px;padding:12px 0;font:850 clamp(18px,2.2vw,28px) var(--font-d);letter-spacing:-.02em;text-transform:uppercase}
.tick__in span b{color:#d4b4ff;margin-right:10px}
html:not(.nomo) .tick__in{animation:marquee 28s linear infinite}
/* E: doors breathe */
/* booking dialog, steps, slots, done */
html:not(.nomo) .bk{opacity:0;transition:opacity .22s}html:not(.nomo) .bk.open{opacity:1}
html:not(.nomo) .bk.open .bk__p{animation:pop .34s var(--ease)}
html:not(.nomo) #bkBody.stepin>*{animation:stepin .34s var(--ease) both}
html:not(.nomo) #bkBody.stepin>*:nth-child(2){animation-delay:.04s}html:not(.nomo) #bkBody.stepin>*:nth-child(3){animation-delay:.08s}html:not(.nomo) #bkBody.stepin>*:nth-child(4){animation-delay:.12s}
.bk .dots i{transition:background .35s}
.slot{transition:transform .15s,background .2s,border-color .2s}.slot:not([disabled]):hover{transform:translateY(-2px);border-color:var(--accent)}
html:not(.nomo) .slots .slot{animation:fadein .35s both;animation-delay:calc(var(--s) * 16ms)}
.chip,.opt{transition:transform .15s,background .2s,border-color .2s}.chip:hover,.opt:hover{transform:translateY(-2px)}
.tick2 svg{width:26px;height:26px}.tick2 path{stroke-dasharray:30;stroke-dashoffset:30}
html:not(.nomo) .done .tick2{animation:pop .5s var(--ease)}
.done .tick2 path{animation:draw .5s .25s var(--ease) forwards}html.nomo .done .tick2 path{stroke-dashoffset:0}
/* quiz and checker */
html:not(.nomo) .qq{animation:stepin .38s var(--ease)}
.meter i b{transition:width 1s var(--ease)}
html:not(.nomo) .result:not([hidden]){animation:pop .5s var(--ease)}
html:not(.nomo) .ring circle:last-child{animation:ring 1.5s var(--ease) both}
html:not(.nomo) [data-out]:not([hidden]) .rows li{animation:stepin .4s var(--ease) both}
html:not(.nomo) [data-out]:not([hidden]) .rows li:nth-child(1){animation-delay:.35s}html:not(.nomo) [data-out]:not([hidden]) .rows li:nth-child(2){animation-delay:.5s}html:not(.nomo) [data-out]:not([hidden]) .rows li:nth-child(3){animation-delay:.65s}html:not(.nomo) [data-out]:not([hidden]) .rows li:nth-child(4){animation-delay:.8s}html:not(.nomo) [data-out]:not([hidden]) .rows li:nth-child(5){animation-delay:.95s}
.drop{transition:transform .3s var(--ease),border-color .25s,background .25s}.drop:hover{transform:scale(1.015);border-color:var(--accent)}
.drop .up{font-size:34px;display:block;color:var(--accent)}html:not(.nomo) .drop .up{animation:bob 2.4s ease-in-out infinite}
/* cookie bar slides up once */
html:not(.nomo) .mh-ck{animation:pop .5s .8s var(--ease) both}
/* ===== chrome: header, footer, cookie bar. Prefixed mh- so it never collides with an older page's own styles ===== */
.mh-hdr,.mh-ftr,.mh-ck{--mh-ink:#0d0a18;--mh-ink-2:#171230;--mh-lilac:#bfa8ff;--mh-violet:#9372ff;--mh-text:#f4f1fb;--mh-mut:#a9a3c0;--mh-line:rgba(255,255,255,.12);
  --mh-sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--mh-disp:"Archivo",var(--mh-sans);--mh-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  font-family:var(--mh-sans);line-height:1.5;-webkit-font-smoothing:antialiased;box-sizing:border-box}
.mh-hdr *,.mh-ftr *,.mh-ck *{box-sizing:border-box}
.mh-wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,44px)}
.mh-hdr{position:sticky;top:0;z-index:900;background:rgba(13,10,24,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--mh-line);color:var(--mh-text);transition:box-shadow .25s}
.mh-hdr.sm{box-shadow:0 8px 30px -18px rgba(10,6,40,.6)}
.mh-hdr__in{display:flex;align-items:center;gap:18px;height:68px;transition:height .25s}.mh-hdr.sm .mh-hdr__in{height:56px}
.mh-brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:17px;color:var(--mh-text);white-space:nowrap}
.mh-brand svg{width:30px;height:30px;display:block}
.mh-pm .t1{fill:#fff}.mh-pm .t2{fill:#bfa8ff}.mh-pm .t3{fill:#9372ff}
.mh-nav{display:flex;gap:20px;margin:0 auto}
.mh-nav a{position:relative;text-decoration:none;color:var(--mh-mut);font-size:14.5px;padding:6px 0;white-space:nowrap}
.mh-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--mh-lilac);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s cubic-bezier(.2,.75,.2,1)}
.mh-nav a:hover,.mh-nav a[aria-current]{color:var(--mh-text)}.mh-nav a:hover::after,.mh-nav a[aria-current]::after{transform:scaleX(1)}
.mh-hdr__r{display:flex;align-items:center;gap:14px}
.mh-lang{font:500 12px var(--mh-mono);color:var(--mh-mut);letter-spacing:.1em;white-space:nowrap}.mh-lang b{color:var(--mh-text);font-weight:500}.mh-lang a{color:inherit;text-decoration:none}
.mh-btn{display:inline-flex;align-items:center;justify-content:center;font:700 14px/1 var(--mh-sans);padding:11px 18px;border-radius:12px;background:var(--mh-lilac);color:#0d0a18;text-decoration:none;border:0;cursor:pointer;white-space:nowrap;transition:transform .18s,filter .2s}
.mh-btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.mh-burger{display:none;margin-left:auto;background:none;border:1px solid var(--mh-line);border-radius:10px;width:42px;height:42px;cursor:pointer;padding:0;color:var(--mh-text)}
.mh-burger span{display:block;width:18px;height:2px;background:currentColor;margin:4px auto;border-radius:2px;transition:transform .25s,opacity .25s}
.mh-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}.mh-burger[aria-expanded="true"] span:nth-child(2){opacity:0}.mh-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:1100px){.mh-nav{gap:15px}.mh-nav a{font-size:13.5px}}
@media(max-width:980px){
  .mh-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--mh-ink);flex-direction:column;gap:0;padding:6px clamp(20px,4vw,44px) 18px;border-bottom:1px solid var(--mh-line);margin:0}
  .mh-nav.open{display:flex}.mh-nav a{padding:14px 0;font-size:16px}.mh-nav a::after{display:none}
  .mh-burger{display:block}.mh-hdr__r{margin-left:auto}.mh-lang{display:none}.mh-hdr__in{gap:12px}.mh-btn{padding:9px 14px;font-size:12.5px}
}
.mh-ftr{background:var(--mh-ink);color:var(--mh-mut);padding:56px 0 34px;font-size:14px}
.mh-ftr__cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.mh-ftr__h{margin:0 0 12px;color:var(--mh-text);font:600 12px var(--mh-mono);letter-spacing:.14em;text-transform:uppercase}
.mh-ftr a{display:block;color:var(--mh-mut);text-decoration:none;padding:4px 0}.mh-ftr a:hover{color:var(--mh-text)}.mh-ftr .mh-brand{color:var(--mh-text);padding:0;display:flex}
.mh-ftr p{margin:14px 0 0;max-width:30ch;color:var(--mh-mut)}
.mh-ftr__legal{margin-top:36px;padding-top:22px;border-top:1px solid var(--mh-line);font-size:13px;line-height:1.7;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline}
.mh-ftr__legal span{flex:1 1 420px}.mh-ftr__legal button{background:none;border:0;color:inherit;font:inherit;text-decoration:underline;cursor:pointer;padding:0}
@media(max-width:900px){.mh-ftr__cols{grid-template-columns:1fr 1fr}}
/* cookie bar: a slim bar at the bottom, so it never sits over the page's own button */
.mh-ck{position:fixed;left:0;right:0;bottom:0;z-index:950;background:rgba(23,18,48,.97);border-top:1px solid var(--mh-line);color:var(--mh-mut);padding:12px clamp(16px,3vw,32px) calc(12px + env(safe-area-inset-bottom,0px));font-size:13px;opacity:0;transform:translateY(12px);transition:opacity .4s,transform .4s}
.mh-ck[data-in="true"]{opacity:1;transform:none}
.mh-ck__in{max-width:1180px;margin:0 auto;display:flex;gap:10px 16px;align-items:center;flex-wrap:wrap}
.mh-ck p{margin:0;flex:1 1 280px;line-height:1.45}
.mh-ck__opts{flex-basis:100%;display:grid;gap:8px;border-top:1px solid var(--mh-line);padding-top:10px}.mh-ck__opts[hidden]{display:none}
.mh-ck__opt{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-size:12.5px;cursor:pointer}.mh-ck__opt input{margin:3px 0 0;accent-color:var(--mh-violet)}.mh-ck__opt b{color:var(--mh-text);font-weight:600;margin-right:6px}
.mh-ck button,.mh-ck a.mh-ck__more{font:600 13px var(--mh-sans);border-radius:10px;padding:9px 15px;cursor:pointer;border:1px solid rgba(255,255,255,.3);background:transparent;color:var(--mh-text);text-decoration:none}
.mh-ck button.pr{background:var(--mh-lilac);border-color:var(--mh-lilac);color:#0d0a18}.mh-ck a.mh-ck__more{border:0;text-decoration:underline;color:var(--mh-mut);padding:9px 4px}
@media(prefers-reduced-motion:reduce){.mh-hdr,.mh-hdr__in,.mh-ck,.mh-nav a::after{transition:none}}

/* ===== real-site additions (not in the mockup) ===== */
[hidden]{display:none!important}
.skip-link{position:absolute;left:12px;top:-60px;z-index:2000;background:#bfa8ff;color:#0d0a18;padding:10px 16px;border-radius:10px;font-weight:700;text-decoration:none;transition:top .2s}
.skip-link:focus{top:12px}
.hero,.acc,.proof,.band__in{--accent:#bfa8ff}
.hero .btn:not(.btn--ghost),.band__in .btn,.ctacard .btn{background:#bfa8ff;color:#0d0a18}
.hero .btn--ghost{color:#f4f1fb}
body{overflow-x:hidden}
.optsub{color:var(--mut);font-weight:400}
.bk__err{color:#c0392b;font-size:14px;margin:12px 0 0}
.bk .fld input,.bk .fld textarea{background:var(--card);color:var(--ink)}
.rows .det{color:var(--mut);font-size:13.5px}
.rows li{align-items:flex-start}
[data-print]{max-width:760px;padding:24px;background:#fff;color:#0d0a18;font-family:var(--font-b)}
[data-print] h2{font-size:24px;margin:0 0 8px}[data-print] p{margin:6px 0}
.chip-link{font:500 12px var(--mono);border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:4px 10px;text-decoration:none;color:inherit}
.credit{font-size:12px;color:var(--mut)}
img{height:auto}
.proj .th img,.post .th img{height:100%}
.crumbs a{color:var(--mut)}
.band{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,44px)}
.wrap>.band{padding:0}
#contact{scroll-margin-top:80px}
.kv{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.kv b{display:block;font:800 28px/1 var(--font-d);font-stretch:66%;color:var(--accent)}.kv span{font-size:13px;color:var(--mut)}
.receipt h3{font:800 28px/1.1 var(--font-d);font-stretch:75%;margin:12px 0 4px}.receipt .sub{color:var(--mut);font-size:15px}
.hdr-sp{height:0}
.bars{display:grid;gap:10px;margin-top:12px}.barrow{display:grid;grid-template-columns:130px 1fr auto;gap:12px;align-items:center;font-size:14px}
.barrow i{display:block;height:12px;background:var(--line);border-radius:99px;overflow:hidden}.barrow i b{display:block;height:100%;background:var(--accent);border-radius:99px}
.barrow em{font-style:normal;font:500 12px var(--mono);color:var(--mut)}
@media(max-width:560px){.barrow{grid-template-columns:1fr;gap:4px}}
.big2{display:block;font:800 clamp(26px,3.4vw,40px)/1.05 var(--font-d);font-stretch:66%;letter-spacing:-.01em;margin-top:6px}
.drop.over{border-color:var(--accent);background:var(--bg2)}
.drop:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.tile-m{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;width:min(100%,260px);aspect-ratio:1}
.tile-m i{border-radius:24%;background:var(--line)}.tile-m i.t1{background:var(--ink)}.tile-m i.t2{background:#bfa8ff}.tile-m i.t3{background:#6b4ae0}
.portrait{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);padding:clamp(24px,4vw,44px);display:grid;place-items:center;gap:20px;text-align:center;aspect-ratio:4/4.2}
.portrait b{font:800 28px/1 var(--font-d);font-stretch:70%}.portrait span{color:var(--mut);font-size:14px}

.appvid{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#0b0b10}

/* the first screen never waits for JavaScript: entrances are plain CSS, and the headline is only held back briefly while its words are split */
@keyframes fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
html:not(.nomo) .hero .lede,html:not(.nomo) .hero .cta,html:not(.nomo) .hero .micro,html:not(.nomo) .ph .lede,html:not(.nomo) .ph .cta,html:not(.nomo) .ph .micro{animation:fadeup .7s cubic-bezier(.2,.75,.2,1) .25s both}
html.mo .hero h1,html.mo .ph h1{visibility:hidden;animation:showh 0s 1.2s forwards}
html.mo .hero h1.words-ready,html.mo .ph h1.words-ready{visibility:visible;animation:none}
@keyframes showh{to{visibility:visible}}

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.mh-hdr{padding-top:env(safe-area-inset-top,0px);background:#0d0a18}