/* =====================================================================
   Look & feel — measured from the original Framer site.
   You normally never need to touch this file.
   Dark colours are in the first list, light-mode colours in the second.
   Breakpoints (same as Framer): desktop ≥1200px · tablet 810–1199px · phone <810px
   ===================================================================== */

/* ---------- fonts (stored in the fonts folder) ---------- */
@font-face{font-family:"Funnel Sans";src:url(../fonts/funnel-sans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Funnel Sans";src:url(../fonts/funnel-sans-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Funnel Sans";src:url(../fonts/funnel-sans-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Funnel Sans";src:url(../fonts/funnel-sans-700.woff2) format("woff2");font-weight:700 800;font-display:swap}
@font-face{font-family:"General Sans";src:url(../fonts/general-sans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"General Sans";src:url(../fonts/general-sans-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"General Sans";src:url(../fonts/general-sans-600.woff2) format("woff2");font-weight:600;font-display:swap}
:root{--bg:#161616;
  --fg:#ECE8DF;
  --fg-strong:#F6F4F0;
  --muted:#CCCCCC;
  --toc-dim:#B4B4B4;
  --card:#202020;
  --frame:#2C2C2C;
  --line:rgba(236,232,223,.12);
  --soft:rgba(236,232,223,.06);
  --btn-bg:#ECE8DF;
  --btn-bg-hover:rgba(236,232,223,.8);
  --btn-fg:#141414;
  --cursor:#EAE8E1;
  --white:#FFFFFF;
  --font:"Funnel Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-card:"General Sans","Funnel Sans",system-ui,sans-serif;
  --spring:cubic-bezier(.34,1.32,.64,1);   /* soft overshoot, like Framer's springs */
  --ease:cubic-bezier(.44,0,.56,1);
  --pad:48px;          /* page side padding */
  --edge:28px;         /* nav + footer side padding */
  color-scheme:dark;
  interpolate-size:allow-keywords;}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){--bg:#ECE8DF; --fg:#161616; --fg-strong:#111010; --muted:#45423D; --toc-dim:#6B6862;
    --card:#E2DDD1; --frame:#D9D3C6; --line:rgba(22,22,22,.14); --soft:rgba(22,22,22,.05);
    --btn-bg:#161616; --btn-bg-hover:rgba(22,22,22,.8); --btn-fg:#ECE8DF; --cursor:#161616; --white:#161616;
    color-scheme:light;}
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background-color .4s,color .4s}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--fg);outline-offset:4px;border-radius:4px}
.skip{position:absolute;left:16px;top:-60px;z-index:200;background:var(--btn-bg);color:var(--btn-fg);padding:10px 14px;border-radius:4px;font-size:14px}
.skip:focus{top:12px}

/* ---------- link hover/press (Framer: lift 2px, fade to 85%, press to 97%) ---------- */
.lnk{display:inline-block;transition:transform .35s var(--spring),opacity .35s}
.lnk:hover{transform:translateY(-2px);opacity:.85}
.lnk:active{transform:scale(.97)}

/* ---------- top bar ---------- */
.nav{height:48px;padding:12px 28px 12px 29px;display:flex;align-items:center;justify-content:space-between;background:var(--bg);font-size:20px;font-weight:500;letter-spacing:-.04em;line-height:24px;position:relative;z-index:50;animation:navIn .45s var(--ease) both}
@keyframes navIn{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
.nav-right{display:flex;align-items:center;gap:20px}

/* ---------- big words that stretch to fill the width ---------- */
.fit{display:block;width:max-content;white-space:nowrap;font-weight:700;letter-spacing:-.06em;line-height:.9;font-size:20vw}

/* ---------- page appear (content slides up after the bar fades in) ---------- */
.appear{animation:appearUp .7s var(--spring) .55s both}
@keyframes appearUp{from{transform:translateY(120px)}to{transform:none}}

/* =====================================================================
   HOME
   ===================================================================== */
.home{padding:48px var(--pad) 48px}
.hero-top{display:flex;flex-direction:column;gap:28px;padding-bottom:24px}
.hero-top h1{text-transform:capitalize}
.tagline{font-size:20px;font-weight:700;letter-spacing:-.04em;line-height:24px;max-width:600px}
.work{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:112px;scroll-margin-top:24px}

/* project card */
.card{display:block;border-radius:24px;transition:transform .45s var(--spring)}
.card-in{display:flex;flex-direction:column;height:612px;border-radius:16px;color:#ECE8DF;transition:transform .45s var(--spring)}
.card:hover{transform:translateY(-6px) scale(.992)}
.card:hover .card-in{transform:translateY(-8px)}
.card:active{transform:scale(.985)}
.card-img{margin:24px 24px 0;height:406px;border-radius:16px;overflow:hidden;flex:none}
.card-img img{width:100%;height:100%;object-fit:cover}
.card-text{display:flex;flex-direction:column;padding:24px 24px 0}
.card h2{font-family:var(--font-card);font-size:20px;font-weight:600;line-height:24px;text-transform:capitalize}
.card p{font-family:var(--font-card);font-size:16px;line-height:24.8px;letter-spacing:.02em;color:#fff;margin-top:0}
.chip{align-self:stretch;margin-top:16px;background:#fff;color:#111011;font-family:var(--font-card);font-size:14px;font-weight:500;letter-spacing:-.01em;line-height:19.6px;padding:10px 16px 10px 12px;border-radius:12px}

/* short about with word-by-word scroll reveal */
.intro{padding:48px var(--pad) 48px}
.intro p{font-size:64px;font-weight:500;letter-spacing:-.04em;line-height:1.2;color:var(--fg-strong)}
.intro p span{opacity:.4;transition:opacity .5s var(--ease)}
.btn{display:inline-block;margin-top:72px;background:var(--btn-bg);color:var(--btn-fg);font-size:16px;font-weight:500;letter-spacing:-.03em;line-height:19.2px;padding:12px 24px;border-radius:4px;border:0;cursor:pointer;text-transform:lowercase;transition:background-color .3s,transform .35s var(--spring)}
.btn:hover{background:var(--btn-bg-hover)}
.btn:active{transform:scale(.97)}

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer{padding:80px var(--edge) 24px;margin-top:48px}
.footer-top{display:flex;justify-content:space-between;gap:24px}
.contact{display:flex;flex-direction:column;gap:16px;font-size:20px;letter-spacing:-.04em;line-height:24px;text-transform:lowercase}
.cols{display:flex;gap:76px}
.col{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.col span{font-size:16px;letter-spacing:-.02em;line-height:19.2px;text-transform:lowercase}
.col a{font-size:20px;font-weight:500;letter-spacing:-.04em;line-height:24px}
.wordmark{overflow:hidden;margin-top:24px}
.wordmark .fit{text-transform:capitalize;opacity:.9;transform:translateY(105%);transition:transform 1.1s var(--spring)}
.wordmark.in .fit{transform:none}
.footer-bottom{display:flex;align-items:flex-end;min-height:44px;margin-top:24px;font-size:16px;letter-spacing:-.02em;text-transform:lowercase;border-top:1px solid var(--line);padding-top:16px}

/* =====================================================================
   ABOUT
   ===================================================================== */
.about{padding:48px var(--pad) 48px}
.about h1{text-transform:lowercase}
.about-block{display:flex;flex-direction:column;gap:32px}
.label{font-size:18px;font-weight:700;line-height:25.2px;text-transform:uppercase}
.about-block p{font-size:32px;font-weight:500;letter-spacing:-.02em;line-height:1.2}
.about-block p + p{margin-top:0}
.job{display:grid;grid-template-columns:1fr 360px 1fr;align-items:center;padding:24px 0;border-bottom:1px solid var(--line)}
.job:first-of-type{padding-top:0}

/* =====================================================================
   CASE STUDIES
   ===================================================================== */
.cs{--col:865px;--wrap:1137px;--hero-h:520px;--hero-bg:#3E8BAB;--accent:#FFCB05;--accent-2:#004F71;--callout:#4C7DFF;--frame-bg:var(--frame);--title:48px;
    max-width:calc(var(--wrap) + 2*var(--pad));margin:0 auto;padding:48px var(--pad) 48px}
.cs-title{font-size:var(--title);font-weight:700;line-height:1;text-transform:capitalize}
.cs-sub{font-size:16px;line-height:24.8px;color:var(--muted);margin-top:8px}
.cs-hero{margin-top:40px;height:var(--hero-h);border-radius:12px;background:var(--hero-bg);overflow:hidden;display:flex;align-items:center;justify-content:center}
.cs-hero img{width:100%;height:100%;object-fit:contain}
.cs-hero.pad img{width:calc(100% - 24px);height:calc(100% - 24px)}
.cs-hero.pad48 img{width:calc(100% - 96px);height:calc(100% - 96px)}
.cs-meta{display:grid;grid-template-columns:396px 1fr;gap:72px;margin-top:48px;max-width:calc(var(--col) + 272px)}
.cs-meta > div{display:flex;flex-direction:column;gap:4px;min-width:0}
.cs-meta h3{font-size:24px;font-weight:600;line-height:36px;margin-bottom:4px}
.cs-meta h3 + p{margin-top:0}
.cs-meta div > h3:not(:first-child){margin-top:16px}
.cs-body{display:grid;grid-template-columns:minmax(0,var(--col)) 200px;justify-content:space-between;gap:72px;margin-top:96px}
.cs-main{min-width:0}
.cs-section{scroll-margin-top:24px}
.cs-section + .cs-section{margin-top:96px}
.eyebrow{display:block;font-size:18px;font-weight:700;line-height:25.2px;text-transform:uppercase;color:var(--accent)}
.cs h2{font-size:38px;font-weight:600;line-height:1.5;margin:4px 0 32px}
.cs h3{font-size:24px;font-weight:600;line-height:36px;margin:32px 0 12px}
.cs p{font-size:16px;line-height:24.8px;color:var(--muted)}
.cs p + p{margin-top:12px}
.cs p strong,.cs li strong{color:var(--fg);font-weight:700}
.cs ul.bullets{margin:12px 0 0 20px;color:var(--muted);font-size:16px;line-height:24.8px}
.cs figure{margin:32px 0 0}
.cs figure img{width:100%;height:auto;border-radius:8px;cursor:zoom-in}
.cs figcaption{font-size:14px;font-weight:500;line-height:21px;color:var(--white);margin-top:12px}
.cs figure + p,.cs figure + h3{margin-top:24px}
.cs figure + figure{margin-top:32px}

/* framed images (PDLC, Panel, Sales) */
.frame{margin-top:32px;border-radius:12px;background:var(--frame-bg);overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.frame img{width:100%;height:100%;object-fit:contain;cursor:zoom-in}
.frame.cover img{object-fit:cover}
.frame.h500{height:500px}
.frame.h400{height:400px}
.frame.h300{height:300px}
.frame.h350{height:350px}
.frame.h200{height:200px}
.frame.p12{padding:12px}
.frame.p24{padding:24px}
.frame.p48{padding:48px}
.frame.p12t{padding:12px 12px 0}
.frame.white{background:#fff}
.frame .in-cap{font-size:12px;font-weight:500;color:#000;text-align:center;flex:none}
.frame img{min-height:0}
.frame + figcaption,.frame-cap{display:block;font-size:14px;font-weight:500;line-height:21px;color:var(--white);margin-top:12px}

/* click-to-open rows */
.acc{border-bottom:1px solid var(--line);border-radius:4px;transition:background .3s}
.acc summary{list-style:none;display:flex;align-items:center;gap:16px;padding:24px 0;cursor:pointer;font-size:18px;font-weight:700;line-height:27.9px;color:var(--fg)}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";margin-left:auto;flex:none;width:24px;height:24px;background:var(--accent-2);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .35s var(--spring)}
.acc[open] summary::after{transform:rotate(180deg)}
.acc[open]{background:var(--soft)}
.acc[open] summary{padding-left:16px;padding-right:16px}
.acc::details-content{height:0;overflow:hidden;transition:height .4s var(--ease),content-visibility .4s allow-discrete}
.acc[open]::details-content{height:auto}
.acc .acc-body{padding:0 16px 24px 40px;font-size:18px;line-height:27.9px;color:var(--muted)}
.acc.numbered .acc-body{padding-left:56px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent-2);flex:none}
.num{width:24px;height:24px;border-radius:50%;background:var(--accent-2);color:#ECE8DF;font-size:12px;font-weight:600;display:grid;place-items:center;flex:none}
.callout{border-left:2px solid var(--callout);padding-left:22px;margin-top:32px}
.callout strong{display:block;font-size:18px;font-weight:700;line-height:27.9px;color:var(--fg)}
.callout p{font-size:18px;line-height:27.9px;margin-top:8px}
.delivered{list-style:none;margin:32px 0}
.delivered li{display:flex;align-items:center;gap:32px;padding:24px;border-bottom:1px solid var(--line);font-size:16px;line-height:24.8px;color:var(--fg)}
.delivered li:last-child{border-bottom:0}

/* cards with icons (Panel, Sales, PDLC) */
.cards{display:grid;gap:24px;margin-top:32px}
.cards.c2{grid-template-columns:1fr 1fr;gap:18px}
.cards.c3{grid-template-columns:repeat(3,1fr);gap:18px}
.icard{background:var(--card);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:32px;min-width:0}
.icard.row{flex-direction:row;align-items:center;gap:32px}
.icard .ic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex:none;background:#225FE3;color:#ECE8DF}
.icard .ic svg{width:32px;height:32px;fill:currentColor}
.ic.red{background:#DE4B4B}
.ic.green{background:#4BDE77}
.ic.blue{background:#225FE3}
.icard strong{display:block;font-size:16px;font-weight:700;line-height:24.8px;color:#fff}
.icard p{color:#fff;margin:0}
.icard p + p{margin-top:4px}
.cs .icard strong + p{margin-top:4px}
.cards.quotes .icard{justify-content:center}

/* numbered step grids (Panel, Sales) */
.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:32px}
.step{grid-column:span 2;background:var(--card);border-radius:12px;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;text-align:center;min-height:128px}
.steps.two-three .step:nth-child(-n/**/+2){grid-column:span 3}
.step .n{width:48px;height:48px;border-radius:50%;background:var(--accent-2);color:#fff;display:grid;place-items:center;font-size:22px;font-weight:600}
.step h4{font-size:20px;font-weight:600;line-height:1.3;color:#fff}

/* Panel "what I delivered" panel */
.highlights{background:var(--card);border-radius:24px;padding:24px;display:flex;flex-direction:column;gap:32px;margin-top:32px}
.highlights .hl > p{font-size:14px;color:var(--fg);margin-bottom:12px}
.highlights .frame{margin-top:0}

/* live FigJam embeds */
.embed{margin-top:32px;border:1px solid rgba(0,0,0,.1);border-radius:12px;overflow:hidden;background:var(--frame)}
.embed iframe{display:block;width:100%;height:450px;border:0}

/* sliding phone strip (PDLC banner) */
.marquee{position:relative;width:100%;height:100%;overflow:hidden}
.marquee-track{display:flex;gap:17px;height:88%;position:absolute;top:6%;left:0;animation:slide 40s linear infinite;width:max-content}
.marquee-track img{height:100%;width:auto;border-radius:16px;object-fit:contain;cursor:default}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* table of contents (desktop only) */
.toc{position:sticky;top:24px;align-self:start;background:var(--card);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:16px}
.toc h3{font-size:18px;font-weight:600;line-height:27px;margin:0;color:var(--fg)}
.toc a{display:flex;gap:4px;font-size:16px;font-weight:500;letter-spacing:-.02em;line-height:19.2px;color:var(--toc-dim);transition:color .3s}
.toc a.on,.toc a:hover{color:var(--white)}
.toc.marks a::after{content:"*";color:#225FE3}

/* image viewer */
.viewer{position:fixed;inset:0;z-index:300;background:rgba(10,10,10,.92);display:grid;place-items:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .3s}
.viewer.open{opacity:1;pointer-events:auto}
.viewer img{max-height:90vh;width:auto;max-width:100%;border-radius:8px;transform:scale(.97);transition:transform .4s var(--spring)}
.viewer.open img{transform:none}
.viewer button{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(236,232,223,.4);background:none;color:#ECE8DF;font-size:22px;cursor:pointer}

/* ---------- password gate ---------- */
.gate{min-height:calc(100vh - 48px);display:grid;place-items:center;padding:80px 16px}
.gate small{font-size:14px;opacity:.6}
.gate h1{font-size:48px;font-weight:500;letter-spacing:-.02em;line-height:1.1;margin:6px 0 10px;text-transform:capitalize}
.gate p{font-size:18px;line-height:1.35}
.gate form{margin-top:24px;border-radius:16px;padding:24px;background:#225FE3;color:#ECE8DF}
.gate label{font-size:14px;font-weight:600;display:block;margin-bottom:8px}
.pw{position:relative}
.pw input{width:100%;height:48px;border-radius:8px;border:1px solid #ECE8DF;background:rgba(0,0,0,.18);color:#fff;font:inherit;font-size:16px;padding:0 48px 0 12px;outline:none;transition:box-shadow .2s}
.pw input:focus{box-shadow:0 0 0 3px rgba(255,255,255,.25)}
.pw input::placeholder{color:rgba(255,255,255,.6)}
.pw button{position:absolute;right:0;top:0;width:48px;height:48px;background:none;border:0;color:#ECE8DF;cursor:pointer;display:grid;place-items:center}
.gate .err{font-size:14px;margin-top:10px;min-height:18px}
.gate form .btn{margin-top:16px;font-size:14px;padding:12px 18px;background:#ECE8DF;color:#141414}
.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.back{display:inline-block;margin-top:20px;font-size:14px;opacity:.6;transition:opacity .2s}
.back:hover{opacity:1}
.locked .cs,.locked .footer{display:none}
body:not(.locked) .gate{display:none}

/* ---------- custom dot cursor (mouse only) ---------- */
.cursor{position:fixed;left:0;top:0;width:32px;height:32px;margin:-16px 0 0 -16px;border-radius:50%;background:var(--cursor);border:1px solid var(--cursor);box-shadow:0 .6px .7px -1.25px rgba(0,0,0,.29),0 2.3px 2.6px -2.5px rgba(0,0,0,.25),5px 10px 11px -3.75px rgba(0,0,0,.1);pointer-events:none;z-index:400;opacity:0;transition:opacity .3s,width .3s cubic-bezier(.12,.23,.5,1),height .3s cubic-bezier(.12,.23,.5,1)}
.cursor.on{opacity:1}
html.has-cursor,html.has-cursor *{cursor:none!important}
html.has-cursor input,html.has-cursor textarea{cursor:text!important}

/* =====================================================================
   TABLET 810–1199
   ===================================================================== */
@media (max-width:1199.98px){
  .home{padding-top:24px;padding-bottom:32px}
  .work{grid-template-columns:1fr;gap:32px;margin-top:88px}
  .card-in{height:auto;padding-bottom:24px}
  .card-img{height:auto;aspect-ratio:837/573}
  .card-text{gap:8px}
  .chip{display:none}
  .card:hover{transform:translateY(-4px) scale(.995)}
  .card:hover .card-in{transform:none}
  .intro{padding:0 var(--pad) 64px}
  .intro p{font-size:44px;letter-spacing:-.045em;line-height:1.16}
  .footer{padding-top:60px}
  .about{padding-top:24px}
  .about-block p{font-size:20px;letter-spacing:-.04em;line-height:24px}
  .job{grid-template-columns:1fr 1fr}
  .cs{--wrap:887px;padding-top:24px}
  .cs-title{font-size:calc(var(--title) * 1.06)}
  .cs-sub{font-size:14px}
  .cs-meta{grid-template-columns:1fr 1fr;max-width:none}
  .cs-meta h3,.cs h3{font-size:20px;line-height:1.5}
  .cs p,.cs ul.bullets,.delivered li{font-size:14px;line-height:1.55}
  .cs-body{grid-template-columns:1fr;margin-top:72px}
  .toc{display:none}
  .cs figcaption,.frame-cap{font-size:11px}
  .acc summary{font-size:18px}
}

/* =====================================================================
   PHONE <810
   ===================================================================== */
@media (max-width:809.98px){
  :root{--pad:16px;--edge:16px}
  .nav{padding:12px 16px}
  .home{padding-bottom:0}
  .work{gap:18px;margin-top:56px}
  .card,.card-in{border-radius:16px}
  .card-in{padding:16px;gap:32px}
  .card-img{order:2;margin:0;aspect-ratio:307/210;border-radius:16px}
  .card-text{order:1;padding:0}
  .card h2{font-size:24px;line-height:28.8px}
  .card p{letter-spacing:0}
  .intro{padding:24px var(--pad)}
  .intro p{font-size:28px;line-height:1.16}
  .btn{margin-top:24px}
  .footer{padding:48px var(--edge) 24px;margin-top:24px}
  .footer-top{flex-direction:column;gap:24px}
  .cols{justify-content:space-between}
  .job{grid-template-columns:1fr 170px}
  .cs-title{font-size:36px}
  .cs-hero{height:min(var(--hero-h),56vw)}
  .cs-hero.pad48 img{width:calc(100% - 32px);height:calc(100% - 32px)}
  .cs-meta{grid-template-columns:1fr;gap:28px}
  .cs h2{font-size:28px;line-height:1.3;margin-bottom:24px}
  .cs-section + .cs-section{margin-top:64px}
  .cards.c2,.cards.c3{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .step,.steps.two-three .step:nth-child(-n/**/+2){grid-column:auto}
  .frame.h500{height:auto;aspect-ratio:756/500}
  .frame.h400{height:auto;aspect-ratio:873/400}
  .frame.h350{height:auto;aspect-ratio:825/350}
  .frame.h300{height:auto;aspect-ratio:873/300}
  .frame.p48{padding:16px}
  .acc summary{padding:18px 0;font-size:16px}
  .acc .acc-body,.acc.numbered .acc-body{padding:0 12px 18px;font-size:15px}
  .callout{padding-left:16px}
  .callout p{font-size:15px}
  .delivered li{gap:16px;padding:18px 8px}
  .embed iframe{height:320px}
  .gate h1{font-size:36px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .intro p span{opacity:1}
  .wordmark .fit{transform:none}
}

/* =====================================================================
   BIG SCREENS — content never wider than 1440px, centred with roomy sides
   ✏️ Change 1440px below to make the content column wider or narrower.
   ===================================================================== */
:root{--max:1440px;--side:max(var(--pad),calc((100vw - var(--max)) / 2));--side-e:max(var(--edge),calc((100vw - var(--max)) / 2))}
@media (min-width:1600px){
  :root{--pad:64px;--edge:48px}
}
.home,.intro,.about,.hello{padding-left:var(--side)!important;padding-right:var(--side)!important}
.nav,.footer{padding-left:var(--side-e)!important;padding-right:var(--side-e)!important}