/* DM Sans (variable, latin) by Colophon Foundry, SIL Open Font License 1.1, via Fontsource */
@font-face{font-family:"DM Sans";font-style:normal;font-display:swap;font-weight:100 1000;src:url(/assets/fonts/c57593e0adc4.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --page:#DCDBD8; --sheet:#EEEDEA; --paper:#F8F8F6; --card:#FFFFFF;
  --ink:#141414; --muted:#74726E; --faint:#ABA9A4;
  --line:rgba(0,0,0,.08); --line-2:rgba(0,0,0,.14);
  --blue:#245BFF;
  --dark:#141414; --dark-ink:#F4F3F0; --dark-muted:rgba(244,243,240,.6); --dark-line:rgba(244,243,240,.16);
  --glow:0 1px 0 rgba(255,255,255,.9) inset, 0 40px 80px -48px rgba(0,0,0,.28);
  --lift:0 1px 0 rgba(255,255,255,.9) inset, 0 10px 30px -14px rgba(0,0,0,.22);
  --sans:"DM Sans",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --r-sheet:clamp(28px,4vw,48px);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --page:#0B0B0B; --sheet:#161616; --paper:#1B1B1B; --card:#222222;
    --ink:#F2F1EE; --muted:#9A9893; --faint:#5F5E5A;
    --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.16);
    --blue:#5C86FF;
    --dark:#F2F1EE; --dark-ink:#141414; --dark-muted:rgba(20,20,20,.62); --dark-line:rgba(20,20,20,.16);
    --glow:0 1px 0 rgba(255,255,255,.05) inset, 0 40px 80px -48px rgba(0,0,0,.8);
    --lift:0 1px 0 rgba(255,255,255,.06) inset, 0 10px 30px -14px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --page:#0B0B0B; --sheet:#161616; --paper:#1B1B1B; --card:#222222;
  --ink:#F2F1EE; --muted:#9A9893; --faint:#5F5E5A;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.16);
  --blue:#5C86FF;
  --dark:#F2F1EE; --dark-ink:#141414; --dark-muted:rgba(20,20,20,.62); --dark-line:rgba(20,20,20,.16);
  --glow:0 1px 0 rgba(255,255,255,.05) inset, 0 40px 80px -48px rgba(0,0,0,.8);
  --lift:0 1px 0 rgba(255,255,255,.06) inset, 0 10px 30px -14px rgba(0,0,0,.7);
}
*,*::before,*::after{box-sizing:border-box}
html{height:auto;scroll-behavior:smooth;scroll-padding-top:calc(84px + env(safe-area-inset-top,0px));-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3,h4{font-weight:500;letter-spacing:-.03em;line-height:1.1;margin:0}
p{margin:0}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:10px}

.page{padding:84px clamp(10px,2.4vw,28px) 40px}
.sheet{max-width:1120px;margin:0 auto;border-radius:var(--r-sheet);box-shadow:var(--glow);position:relative}
.s-grey{background:var(--sheet)}
.s-white{background:var(--paper)}
.col{max-width:1000px;margin:0 auto;padding-left:clamp(18px,4vw,56px);padding-right:clamp(18px,4vw,56px)}
.narrow{max-width:560px;margin:0 auto}

/* floating nav pill */
.navpill{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:2px;padding:5px;border-radius:999px;background:color-mix(in srgb,var(--card) 82%,transparent);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);box-shadow:var(--lift);border:1px solid var(--line);white-space:nowrap}
.navpill a{font-size:13.5px;text-decoration:none;color:var(--muted);padding:7px 12px;border-radius:999px}
.navpill a:hover{color:var(--ink);background:var(--line)}
.navpill .me{color:var(--ink);font-weight:500;display:inline-flex;align-items:center;gap:7px}
.navpill .me i{width:7px;height:7px;border-radius:50%;background:var(--blue);display:inline-block}
.navpill .go{background:var(--dark);color:var(--dark-ink)}
.navpill .go:hover{background:var(--dark);color:var(--dark-ink);opacity:.88}
@media(max-width:400px){.navpill a{padding:7px 9px;font-size:13px}}

/* pills */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;font:inherit;font-size:14.5px;font-weight:500;text-decoration:none;border:0;cursor:pointer;white-space:nowrap}
.btn-dark{background:var(--dark);color:var(--dark-ink);box-shadow:0 8px 20px -10px rgba(0,0,0,.5)}
.btn-dark:hover{opacity:.88}
.btn-light{background:var(--card);color:var(--ink);box-shadow:var(--lift)}
.btn-light:hover{color:var(--blue)}
.btn-sm{padding:7px 14px;font-size:12.5px}

/* hero */
.hero{padding:clamp(16px,2.4vw,26px) clamp(16px,3vw,32px) clamp(96px,11vw,132px);z-index:2}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.topbar .l{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.topbar .mail{font-size:13px;color:var(--muted);text-decoration:none;margin-right:4px}
.topbar .r{display:flex;gap:6px;font-size:13px;color:var(--muted)}
.topbar .r a{text-decoration:none}
.topbar .r a:hover{color:var(--ink)}
.topbar .r span{color:var(--faint)}
@media(max-width:640px){.topbar .r{display:none}}
.hero-c{text-align:center;padding-top:clamp(48px,7vw,84px)}
.avatar{position:relative;display:inline-block}
.avatar .face{width:84px;height:84px;border-radius:50%;background:linear-gradient(145deg,#cfcdc8,#a9a7a2);display:grid;place-items:center;color:#fff;font-weight:500;font-size:24px;letter-spacing:-.02em;box-shadow:0 0 0 4px var(--sheet),0 10px 24px -10px rgba(0,0,0,.35)}
.avatar .tagname{position:absolute;left:62px;top:14px;transform:rotate(-7deg);background:var(--card);border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:500;white-space:nowrap;box-shadow:var(--lift)}
.hero h1{margin:26px auto 0;font-size:clamp(36px,5.8vw,66px);letter-spacing:-.045em;line-height:1.04;max-width:13ch;background:linear-gradient(172deg,var(--ink) 38%,var(--faint) 96%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{margin:18px auto 0;max-width:44ch;color:var(--muted);font-size:clamp(15px,1.6vw,17px)}
.hero .ctas{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:28px}
.stats{display:flex;justify-content:center;flex-wrap:wrap;gap:8px clamp(22px,4vw,44px);margin-top:36px}
.stats div{font-size:13.5px;color:var(--muted);max-width:14ch;line-height:1.35}
.stats b{display:block;color:var(--ink);font-weight:500;font-size:clamp(20px,2.4vw,26px);letter-spacing:-.03em;line-height:1.1}

/* dock */
.dockwrap{position:relative;z-index:5;display:flex;justify-content:center;padding:0 10px}
.dock{display:flex;align-items:flex-end;gap:9px;padding:9px 10px;border-radius:26px;background:color-mix(in srgb,var(--card) 62%,transparent);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);border:1px solid var(--line);box-shadow:var(--lift)}
.dock .sep{width:1px;align-self:stretch;margin:6px 3px;background:var(--line-2)}
.tile{--s:1;position:relative;width:calc(48px * var(--s));height:calc(48px * var(--s));border-radius:calc(13px * var(--s));display:grid;place-items:center;flex:none;text-decoration:none;color:#fff;
  background:radial-gradient(120% 80% at 30% 0%,rgba(255,255,255,.38),rgba(255,255,255,0) 55%),var(--bg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -3px 5px rgba(0,0,0,.22),0 2px 3px rgba(0,0,0,.18),0 12px 20px -10px rgba(0,0,0,.5)}
.tile svg{width:calc(23px * var(--s));height:calc(23px * var(--s));fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 1px rgba(0,0,0,.28))}
.t-yt{--bg:linear-gradient(180deg,#FF5A52,#D7191C)}
.t-fb{--bg:linear-gradient(180deg,#3B95FF,#1463D9)}
.t-ig{--bg:linear-gradient(200deg,#FF8A4C 0%,#F2416E 55%,#C12F8D 100%)}
.t-th{--bg:linear-gradient(180deg,#3A3A3C,#0E0E0F)}
.t-blog{--bg:linear-gradient(180deg,#FF8A3D,#EF5A12)}
.t-pod{--bg:linear-gradient(180deg,#B867F0,#7C2CD3)}
.t-call{--bg:linear-gradient(180deg,#4F7DFF,#1F4FE6)}
.t-mail{--bg:linear-gradient(180deg,#FFFFFF,#E4E5EA);color:#2A62F5}
.t-mail svg{filter:none}
:root[data-theme="dark"] .t-th{--bg:linear-gradient(180deg,#4A4A4D,#1C1C1E)}
.tile .tip{position:absolute;bottom:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(6px);background:var(--dark);color:var(--dark-ink);font-size:12px;line-height:1.3;padding:7px 11px;border-radius:10px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;text-align:center;box-shadow:0 10px 24px -12px rgba(0,0,0,.5)}
.tile .tip b{display:block;font-weight:600;font-size:12.5px}
.tile .tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--dark)}
.tile:hover .tip,.tile:focus-visible .tip{opacity:1;transform:translateX(-50%) translateY(0)}
.tile:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.tile.bounce{animation:dockBounce .7s cubic-bezier(.3,.7,.4,1)}
@keyframes dockBounce{0%,100%{transform:translateY(0)}25%{transform:translateY(-18px)}50%{transform:translateY(0)}70%{transform:translateY(-8px)}}
@media(max-width:560px){.dock{gap:5px;padding:7px 8px;border-radius:20px}.tile{width:36px;height:36px;border-radius:10px}.tile svg{width:18px;height:18px}.dock .sep{margin:4px 2px}}
@media (prefers-reduced-motion: reduce){.tile.bounce{animation:none}}

/* brands sheet */
.brands{margin-top:-78px;padding:clamp(96px,11vw,120px) clamp(18px,4vw,48px) clamp(34px,4vw,46px);z-index:1}
.brands small{display:block;text-align:center;font-size:12.5px;color:var(--faint)}
.brands .row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px clamp(26px,5vw,58px);margin-top:18px}
.brands .row span{font-weight:600;font-size:clamp(15px,1.8vw,19px);letter-spacing:-.02em;color:var(--muted)}

/* section rhythm */
.sec{padding-top:clamp(72px,10vw,120px)}
.sec-sheet{margin-top:clamp(72px,10vw,120px);padding:clamp(40px,6vw,72px) 0}
.intro{text-align:center}
.intro h2{font-size:clamp(24px,3.2vw,34px);max-width:24ch;margin:0 auto;letter-spacing:-.035em}
.intro h2 .soft{color:var(--muted)}
.label{display:flex;align-items:center;max-width:760px;margin:26px auto clamp(32px,4vw,48px)}
.label::before,.label::after{content:"";flex:1;height:1px;background:var(--line-2)}
.label span{background:var(--card);box-shadow:var(--lift);border-radius:999px;padding:6px 14px;font-size:12.5px;transform:rotate(-3deg);margin:0 12px}

/* about (image 2) */
.about p{font-size:16.5px;line-height:1.62;color:var(--ink)}
.about p+p{margin-top:16px}
.about p.hi{font-size:17px}
.about a{text-decoration:underline;text-decoration-color:var(--faint);text-underline-offset:3px}
.about a:hover{text-decoration-color:var(--blue)}
.about .connect{margin-top:22px;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--muted)}
.about .connect a{text-decoration:none}
.about .connect a:hover{color:var(--ink)}

/* work cards */
.card{background:var(--sheet);border-radius:28px}
.s-grey .card{background:var(--paper)}
.feature{padding:clamp(20px,3vw,34px);display:grid;gap:clamp(20px,3vw,40px)}
.feature+.feature{margin-top:12px}
@media(min-width:880px){.feature{grid-template-columns:minmax(0,1fr) minmax(0,.95fr);align-items:start}}
.proj h3{font-size:clamp(22px,2.6vw,28px)}
.cat{display:block;font-size:13.5px;color:var(--muted);margin-top:5px}
.facts{margin:22px 0 0;display:grid;gap:14px}
.facts dt{font-size:12.5px;color:var(--faint);font-weight:500}
.facts dd{margin:3px 0 0;font-size:15.5px;line-height:1.5;max-width:46ch}
.nums{display:flex;flex-wrap:wrap;gap:10px clamp(18px,3vw,32px);margin-top:4px}
.nums div b{display:block;font-weight:500;font-size:clamp(20px,2.4vw,25px);letter-spacing:-.03em;line-height:1.15}
.nums div span{display:block;font-size:13px;color:var(--muted)}
.res{font-weight:500;font-size:17px;letter-spacing:-.02em}
.src{font-size:12.5px;color:var(--muted);margin-top:4px}
.src a{color:var(--muted)}
.tbc{color:var(--faint);font-style:italic}
.visual{aspect-ratio:4/3;border-radius:20px;background:linear-gradient(160deg,var(--line),var(--line-2));display:flex;align-items:flex-end;padding:16px;font-size:12.5px;color:var(--muted)}
details.cs{margin-top:20px;padding-top:14px;border-top:1px solid var(--line)}
details.cs summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:500}
details.cs summary:hover{color:var(--blue)}
details.cs summary::-webkit-details-marker{display:none}
details.cs .c{display:none}
details.cs[open] .o{display:none}
details.cs[open] .c{display:inline}
.csb{display:grid;gap:14px;margin-top:16px}
@media(min-width:620px){.csb{grid-template-columns:1fr 1fr}}
.csb h4{font-size:12.5px;font-weight:500;color:var(--faint);letter-spacing:0}
.csb p{font-size:15px;margin-top:3px;line-height:1.5}
.csl{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.csl a{font-size:13.5px;text-decoration:none;background:var(--card);box-shadow:var(--lift);border-radius:999px;padding:7px 14px}
.csl a:hover{color:var(--blue)}
.subhead{font-size:15px;color:var(--muted);text-align:center;margin:clamp(40px,5vw,56px) 0 16px;letter-spacing:-.01em}
.more{display:grid;gap:12px}
@media(min-width:760px){.more{grid-template-columns:repeat(3,1fr)}}
.small{padding:clamp(18px,2.4vw,26px);display:flex;flex-direction:column}
.small h3{font-size:clamp(18px,2vw,21px)}
.small .facts dd{font-size:14.5px}
.small .facts{margin-bottom:16px}
.small details.cs{margin-top:auto}

/* journey */
.tl-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,4vw,56px)}
.tl-grid>*{min-width:0}
@media(min-width:960px){.tl-grid{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)}}
.tl-side{align-self:start}
.tl-year{font-weight:500;font-size:clamp(80px,10vw,150px);letter-spacing:-.06em;line-height:.9;font-variant-numeric:tabular-nums;display:block;background:linear-gradient(180deg,var(--ink) 45%,var(--faint));-webkit-background-clip:text;background-clip:text;color:transparent}
.tl-now-title{display:block;margin-top:12px;font-size:16px;color:var(--muted);min-height:1.6em}
.tl-count{display:block;margin-top:2px;font-size:13px;color:var(--faint);font-variant-numeric:tabular-nums}
.tl-index{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--line-2)}
.tl-index button{all:unset;cursor:pointer;display:block;padding:5px 0 5px 16px;margin-left:-1px;border-left:2px solid transparent;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.tl-index button:hover{color:var(--ink)}
.tl-index button.act{color:var(--blue);border-left-color:var(--blue);font-weight:500}
.tl-index button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media(min-width:960px){.tl-side{position:sticky;top:calc(96px + env(safe-area-inset-top,0px))}}
@media(max-width:959px){
  .tl-year,.tl-now-title,.tl-count{display:none}
  .tl-side{position:sticky;top:calc(70px + env(safe-area-inset-top,0px));z-index:30;padding:6px 0}
  .tl-index{flex-direction:row;margin:0;border-left:0;overflow-x:auto;gap:6px;scrollbar-width:none;padding:4px;border-radius:999px;background:color-mix(in srgb,var(--card) 80%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--lift)}
  .tl-index::-webkit-scrollbar{display:none}
  .tl-index button{border-radius:999px;padding:6px 13px;margin:0;border:0;white-space:nowrap;font-size:13.5px}
  .tl-index button.act{background:var(--dark);color:var(--dark-ink)}
}
.tl{list-style:none;margin:0;padding:0 0 0 36px;position:relative}
.tl::before{content:"";position:absolute;left:7px;top:8px;bottom:0;width:2px;background:var(--line-2);border-radius:2px}
.tl-fill{position:absolute;left:7px;top:8px;width:2px;height:0;background:var(--blue);border-radius:2px}
.tl-item{position:relative;padding-bottom:clamp(36px,5vw,60px)}
.tl-item:last-child{padding-bottom:0}
.tl-dot{position:absolute;left:-36px;top:5px;width:16px;height:16px;border-radius:50%;background:var(--sheet);border:2px solid var(--line-2);transition:background .25s,border-color .25s,box-shadow .25s}
.tl-item.win .tl-dot{width:20px;height:20px;left:-38px;top:3px}
.tl-item.on .tl-dot{background:var(--blue);border-color:var(--blue)}
.tl-item.now .tl-dot{box-shadow:0 0 0 6px color-mix(in srgb,var(--blue) 18%,transparent)}
.js .tl-item{opacity:.32;transition:opacity .35s ease}
.js .tl-item.on{opacity:1}
.tl-when{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.tl-item h3{font-size:clamp(20px,2.5vw,26px);margin-top:4px}
.tl-item p{margin-top:6px;font-size:15.5px;color:var(--muted);max-width:50ch;line-height:1.5}
.tl-stats{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.tl-stats li{font-size:13px;background:var(--paper);border-radius:999px;padding:5px 11px;color:var(--muted);box-shadow:var(--lift)}
.tl-stats b{color:var(--ink);font-weight:600}
.tl-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tl-links a{font-size:13.5px;text-decoration:none;background:var(--paper);box-shadow:var(--lift);border-radius:999px;padding:6px 13px}
.tl-links a:hover{color:var(--blue)}
.tl-final{margin-top:12px;background:var(--dark);color:var(--dark-ink);border-radius:22px;padding:clamp(18px,2.4vw,24px);display:grid;gap:14px}
@media(min-width:620px){.tl-final{grid-template-columns:1fr 1fr}}
.tl-final small{display:block;font-size:12.5px;color:var(--dark-muted)}
.tl-final strong{display:block;margin-top:3px;font-weight:500;font-size:clamp(16px,1.8vw,19px);letter-spacing:-.015em;line-height:1.3}
.tl-final a{color:var(--dark-ink);text-underline-offset:3px;text-decoration-color:var(--dark-line)}
@media (prefers-reduced-motion: reduce){.js .tl-item,.tl-dot{transition:none}}

/* services (image 1) */
.svcs{display:grid;gap:12px;max-width:1000px;margin:0 auto}
@media(min-width:640px){.svcs{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.svcs{grid-template-columns:repeat(4,1fr);gap:14px}}
.svc{padding:22px 20px;border-radius:24px}
.svc .ico{width:38px;height:38px;border-radius:11px;background:var(--card);box-shadow:var(--lift);display:grid;place-items:center;margin-bottom:18px}
.svc .ico svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.svc h3{font-size:16.5px;letter-spacing:-.02em}
.svc p{margin-top:6px;font-size:14px;color:var(--muted);line-height:1.5}
.svc.feat{background:var(--dark);color:var(--dark-ink);box-shadow:0 20px 40px -24px rgba(0,0,0,.6)}
.svc.feat p{color:var(--dark-muted)}
.svc.feat .ico{background:rgba(255,255,255,.1);box-shadow:none}
.svc.feat a{display:inline-block;margin-top:14px;font-size:13.5px;font-weight:500;color:var(--dark-ink);text-decoration:none;border-bottom:1px solid var(--dark-line);padding-bottom:1px}
.svc.feat a:hover{border-color:var(--blue)}

/* content */
.vids{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:900px){.vids{grid-template-columns:repeat(4,1fr);gap:14px}}
.vid{aspect-ratio:4/5;border-radius:24px;background:#141414;color:#F4F3F0;text-decoration:none;display:flex;flex-direction:column;justify-content:space-between;padding:14px;box-shadow:0 20px 40px -26px rgba(0,0,0,.6);transition:transform .2s ease}
.vid:hover{transform:translateY(-3px)}
.vid .tag{font-size:11.5px;background:rgba(255,255,255,.12);border-radius:999px;padding:4px 10px;align-self:flex-start}
.play{width:44px;height:44px;border-radius:50%;background:#F4F3F0;display:grid;place-items:center;align-self:center}
.play::after{content:"";border-left:12px solid #141414;border-top:7.5px solid transparent;border-bottom:7.5px solid transparent;margin-left:4px}
.vid h4{font-size:14.5px;font-weight:500;letter-spacing:-.01em;line-height:1.35}
.vid h4.tbc{color:rgba(244,243,240,.5)}
.follow{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:22px}
.follow a{font-size:13.5px;text-decoration:none;background:var(--card);box-shadow:var(--lift);border-radius:999px;padding:8px 15px}
.follow a:hover{color:var(--blue)}

/* contact sheet */
.contact{margin-top:clamp(72px,10vw,120px);padding:clamp(56px,8vw,96px) clamp(18px,4vw,48px) 24px;text-align:center}
.contact .ic{width:58px;height:58px;border-radius:50%;margin:0 auto;background:var(--sheet);display:grid;place-items:center;box-shadow:var(--lift)}
.contact .ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.contact h2{margin:24px auto 0;font-size:clamp(30px,4.6vw,50px);letter-spacing:-.045em;max-width:14ch;background:linear-gradient(172deg,var(--ink) 40%,var(--faint) 98%);-webkit-background-clip:text;background-clip:text;color:transparent}
.contact p{margin:14px auto 0;color:var(--muted);max-width:40ch}
.contact .ctas{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:28px}
.foot{margin-top:clamp(56px,8vw,88px);padding-top:18px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--muted);text-align:left}
.foot .r{display:flex;flex-wrap:wrap;gap:6px}
.foot .r a{text-decoration:none}
.foot .r a:hover{color:var(--ink)}
.foot .r span{color:var(--faint)}

/* mobile floating CTA */
.mcta{display:none}
@media(max-width:720px){
  .mcta{display:block;position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:45;transition:transform .25s ease,opacity .25s ease}
  .mcta.away{transform:translate(-50%,140%);opacity:0}
  .page{padding-bottom:96px}
}

/* header */
.hdr{position:sticky;top:calc(10px + env(safe-area-inset-top,0px));z-index:60;width:calc(100% - 2 * clamp(10px,2.4vw,28px));max-width:1120px;margin:10px auto 0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 6px 6px 18px;border-radius:999px;background:color-mix(in srgb,var(--card) 80%,transparent);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border:1px solid var(--line);box-shadow:var(--lift)}
.wm{display:grid;gap:3px;text-decoration:none;line-height:1}
.wm small{font-size:11px;color:var(--muted);letter-spacing:.01em}
.wm b{font-size:14px;font-weight:600;letter-spacing:.22em}
.hdr-r{display:flex;align-items:center;gap:4px}
.hlink{all:unset;cursor:pointer;font-size:14px;color:var(--ink);padding:9px 14px;border-radius:999px;white-space:nowrap}
.hlink:hover{background:var(--line)}
.hlink:focus-visible,.themebtn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.btn-hdr{padding:9px 16px;font-size:13.5px}
.themebtn{all:unset;cursor:pointer;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--ink);flex:none}
.themebtn:hover{background:var(--line)}
.themebtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:root[data-theme="dark"] .i-moon{display:none}
:root:not([data-theme="dark"]) .i-sun{display:none}
@media(max-width:420px){.hdr{padding-left:14px}.wm small{font-size:10px}.wm b{font-size:12.5px;letter-spacing:.18em}.hlink{padding:8px 9px;font-size:13px}.btn-hdr{padding:8px 12px;font-size:12.5px}.themebtn{width:34px;height:34px}}
.page{padding-top:28px}
.hero{padding-top:clamp(28px,4vw,44px)}
.hero-c{padding-top:clamp(28px,5vw,56px)}
.avatar .face{width:108px;height:108px;border-radius:50%;object-fit:cover;display:block;background:var(--line);box-shadow:0 0 0 4px var(--sheet),0 14px 30px -12px rgba(0,0,0,.45)}
.avatar .tagname{left:84px;top:12px}
.story-btn{margin-top:26px}

/* ===== About Me experience ===== */
.ap{position:fixed;inset:0;z-index:100;background:var(--page);color:var(--ink)}
.ap[hidden]{display:none}
.ap.reveal{animation:apIn .8s cubic-bezier(.7,0,.2,1) both}
.ap.hide{animation:apOut .55s cubic-bezier(.7,0,.2,1) both}
@keyframes apIn{from{clip-path:circle(0 at var(--x,90%) var(--y,40px))}to{clip-path:circle(150vmax at var(--x,90%) var(--y,40px))}}
@keyframes apOut{from{clip-path:circle(150vmax at var(--x,90%) var(--y,40px))}to{clip-path:circle(0 at var(--x,90%) var(--y,40px))}}
.ap-scroll{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
.ap-bar{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top,0px)) clamp(10px,3vw,28px) 10px;background:color-mix(in srgb,var(--page) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.ap-prog{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--blue);transform-origin:left;transform:scaleX(0)}
.ap-open{min-height:calc(100vh - 64px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 20px 40px}
.lens{width:clamp(190px,30vw,300px);aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 0 0 6px var(--sheet),0 40px 80px -40px rgba(0,0,0,.6);background:#111}
.lens img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.ap.opened .lens img{animation:lensIn 1.6s cubic-bezier(.2,.7,.2,1) both}
@keyframes lensIn{from{transform:scale(1.45);filter:blur(10px)}to{transform:scale(1.04);filter:none}}
.ap-h1{margin-top:clamp(28px,4vw,44px);font-size:clamp(34px,6.2vw,80px);font-weight:500;letter-spacing:-.05em;line-height:1.02;max-width:15ch}
.ap-h1 .soft{color:var(--muted)}
.ap-h1 .w{display:inline-block;opacity:0;transform:translateY(.45em);filter:blur(8px)}
.ap.opened .ap-h1 .w{animation:wIn .8s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(.45s + var(--i) * 75ms)}
@keyframes wIn{to{opacity:1;transform:none;filter:none}}
.cue{margin-top:36px;font-size:12.5px;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:10px}
.cue span{width:1px;height:40px;background:linear-gradient(var(--muted),transparent);animation:cue 2s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

.ap-narrow{max-width:680px;margin:0 auto;padding:0 20px}
.ap-first{padding-top:clamp(40px,8vw,100px)}
.ap-name{padding-top:clamp(80px,12vw,150px)}
.ap p{font-size:clamp(17px,1.9vw,19px);line-height:1.72}
.ap p+p,.ap p+div,.ap div+p{margin-top:20px}
.ap .muted{color:var(--muted)}
.beat{font-size:clamp(22px,3vw,30px)!important;font-weight:500;letter-spacing:-.025em;line-height:1.25!important}
.quote{font-size:clamp(26px,4.2vw,46px)!important;font-weight:500;letter-spacing:-.04em;line-height:1.1!important;margin:clamp(36px,5vw,56px) 0!important;background:linear-gradient(170deg,var(--ink) 40%,var(--faint));-webkit-background-clip:text;background-clip:text;color:transparent}
.namebig{font-size:clamp(48px,10vw,128px);letter-spacing:-.06em;line-height:.92;margin:6px 0 18px;font-weight:500}
.sticker{display:inline-block;transform:rotate(-5deg);background:var(--card);box-shadow:var(--lift);border-radius:999px;padding:4px 14px;font-weight:500;margin-left:4px;transition:transform .3s}
.sticker:hover{transform:rotate(4deg) scale(1.06)}

.ch{max-width:1040px;margin:0 auto;padding:clamp(100px,14vw,170px) 20px 0;display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
@media(min-width:900px){.ch{grid-template-columns:150px minmax(0,680px);justify-content:center;gap:56px}}
.ch-no{align-self:start;display:flex;align-items:baseline;gap:10px}
@media(min-width:900px){.ch-no{position:sticky;top:96px;flex-direction:column;gap:6px}}
.ch-no b{font-size:clamp(52px,7vw,96px);font-weight:500;letter-spacing:-.06em;line-height:.9;color:transparent;-webkit-text-stroke:1.2px var(--faint);transition:color .6s,-webkit-text-stroke-color .6s}
.ch.act .ch-no b{color:var(--ink);-webkit-text-stroke-color:var(--ink)}
.ch-no span{font-size:13px;color:var(--muted)}
.ch-t{font-size:clamp(30px,4.4vw,50px);letter-spacing:-.045em;line-height:1.04;margin-bottom:28px;font-weight:500}

/* reveal system */
.rv{opacity:0;transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.ch-t.rv,.quote.rv,.beat.rv,.namebig.rv,.stat-c.rv,.date-c.rv{transform:translateY(22px)}
.rv.in{opacity:1;transform:none}
.stag>*{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.stag.in>*{opacity:1;transform:none}
.stag>*:nth-child(2){transition-delay:.14s}.stag>*:nth-child(3){transition-delay:.28s}.stag>*:nth-child(4){transition-delay:.42s}.stag>*:nth-child(5){transition-delay:.56s}.stag>*:nth-child(6){transition-delay:.7s}.stag>*:nth-child(7){transition-delay:.84s}.stag>*:nth-child(8){transition-delay:.98s}

.lines{margin:28px 0}
.lines p{font-size:clamp(20px,2.6vw,26px)!important;font-weight:500;letter-spacing:-.025em;line-height:1.3!important;margin-top:4px!important}
.big-lines{margin:34px 0}
.big-lines p{font-size:clamp(34px,6vw,68px)!important;font-weight:500;letter-spacing:-.05em;line-height:1!important;margin-top:6px!important}
.big-lines p:last-child{color:var(--blue)}
.qs p,.had p,.climb p{padding:12px 0 12px 18px;border-left:2px solid var(--line-2);margin-top:0!important}
.qs p{font-weight:500}
.climb p:last-child{border-left-color:var(--blue);font-weight:500}
.qs,.had,.climb{margin:28px 0}
.learned{margin:36px 0;border-top:1px solid var(--line-2)}
.learned>div{display:grid;grid-template-columns:minmax(0,120px) minmax(0,1fr);gap:18px;padding:16px 0;border-bottom:1px solid var(--line)}
.learned b{font-weight:500;font-size:17px}
.learned span{color:var(--muted);font-size:16px;line-height:1.55}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0}
.chips span{background:var(--card);box-shadow:var(--lift);border-radius:999px;padding:9px 16px;font-size:15px}
.chips.stag>*{transform:scale(.85)}
.chips.stag.in>*{transform:none}
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:30px 0}
.chain span{background:var(--dark);color:var(--dark-ink);border-radius:999px;padding:9px 16px;font-size:15px}
.chain i{font-style:normal;color:var(--muted)}
.cmp{margin:34px 0}
.cmp .old{display:inline;color:var(--muted);font-size:clamp(18px,2.2vw,22px)!important;background:linear-gradient(currentColor,currentColor) no-repeat 0 58%/0% 2px;transition:background-size .9s cubic-bezier(.6,0,.2,1) .2s;opacity:0}
.cmp .new{font-size:clamp(22px,3vw,30px)!important;font-weight:500;letter-spacing:-.025em;line-height:1.25!important;opacity:0;transform:translateY(12px);transition:opacity .8s 1.05s,transform .8s cubic-bezier(.2,.7,.2,1) 1.05s;margin-top:14px!important}
.cmp.in .old{opacity:1;background-size:100% 2px}
.cmp.in .new{opacity:1;transform:none}
.strike{margin:28px 0}
.strike p{color:var(--muted);font-size:clamp(18px,2.2vw,22px)!important;margin-top:6px!important}
.strike p span{background:linear-gradient(currentColor,currentColor) no-repeat 0 58%/0% 2px;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .8s cubic-bezier(.6,0,.2,1)}
.strike.in p span{background-size:100% 2px}
.strike.in p:nth-child(1) span{transition-delay:.5s}.strike.in p:nth-child(2) span{transition-delay:.8s}.strike.in p:nth-child(3) span{transition-delay:1.1s}
.cue{font-size:12.5px!important;line-height:1.4!important}
.pill-link{display:inline-block;text-decoration:none;background:var(--card);box-shadow:var(--lift);border-radius:999px;padding:9px 16px;font-size:15px!important}
.pill-link:hover{color:var(--blue)}

.pols{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:clamp(16px,3vw,30px);margin:clamp(40px,6vw,64px) 0}
@media(min-width:900px){.pols{margin-left:-60px;margin-right:-60px}}
.pol{margin:0;background:var(--card);padding:10px 10px 12px;border-radius:6px;box-shadow:0 24px 48px -24px rgba(0,0,0,.45);width:min(290px,80vw);transform:translateY(var(--py,0px)) rotate(var(--r,0deg));transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .9s;opacity:0}
.pol.in{opacity:1}
.pol.wide{width:min(620px,92vw)}
.pol img{display:block;width:100%;border-radius:3px}
.pol figcaption{font-size:13px;color:var(--muted);padding:10px 4px 0}
.pol:hover{transform:translateY(var(--py,0px)) rotate(0deg) scale(1.02)}

.stat-c{margin:clamp(36px,5vw,52px) 0;padding:clamp(22px,3vw,32px);border-radius:28px;background:var(--sheet);box-shadow:var(--glow)}
.stat-c b{display:block;font-size:clamp(52px,9vw,104px);font-weight:500;letter-spacing:-.055em;line-height:1;color:var(--blue);font-variant-numeric:tabular-nums}
.stat-c>span{display:block;margin-top:10px;color:var(--muted);font-size:16px}
.stat-c a{display:inline-block;margin-top:10px;font-size:13px;color:var(--muted)}
.date-c{font-size:clamp(46px,9vw,112px)!important;font-weight:500;letter-spacing:-.055em;line-height:.95!important;margin:10px 0 24px!important;background:linear-gradient(170deg,var(--ink) 35%,var(--faint));-webkit-background-clip:text;background-clip:text;color:transparent}
.bel{margin:40px 0}
.bel p{font-size:clamp(26px,3.9vw,42px)!important;font-weight:500;letter-spacing:-.04em;line-height:1.12!important;color:var(--faint);transition:color .5s ease;margin-top:16px!important}
.bel p.lit{color:var(--ink)}

.rcpt{width:min(390px,100%);margin:clamp(40px,6vw,60px) auto;background:#FBFAF7;color:#1B1B1B;padding:26px 24px 40px;border-radius:4px 4px 0 0;box-shadow:0 34px 60px -34px rgba(0,0,0,.55);position:relative;clip-path:inset(0 0 100% 0);transition:clip-path 1.8s steps(22,end)}
.rcpt.in{clip-path:inset(0 0 0 0)}
.rcpt::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:linear-gradient(135deg,transparent 50%,var(--page) 50%) 0 0/14px 10px repeat-x,linear-gradient(225deg,transparent 50%,var(--page) 50%) 0 0/14px 10px repeat-x}
.rh{text-align:center;padding-bottom:16px;border-bottom:1px dashed rgba(0,0,0,.3)}
.rh b{display:block;font-weight:600;font-size:16px;letter-spacing:-.01em}
.rh small{display:block;font-size:12px;color:#77756F;margin-top:4px}
.rcpt ul{list-style:none;margin:0;padding:12px 0;border-bottom:1px dashed rgba(0,0,0,.3)}
.rcpt li{display:flex;justify-content:space-between;gap:16px;padding:7px 0;font-size:14px;line-height:1.4}
.rcpt li em{font-style:normal;color:#77756F;font-size:12.5px;flex:none;padding-top:1px}
.rt{display:flex;justify-content:space-between;padding-top:14px;font-size:14px}
.rt b{font-weight:600}

.arch-wrap{max-width:1120px;margin:0 auto;padding:clamp(100px,14vw,170px) 20px 0;text-align:center}
.arch-hint{font-size:15px!important}
.h-touch{display:none}
.shuffle{margin-top:16px}
.arch{position:relative;height:clamp(600px,64vw,760px);margin-top:28px;border-radius:32px;background:var(--sheet);box-shadow:var(--glow);overflow:hidden}
.acard{position:absolute;left:0;top:0;margin:0;width:clamp(150px,17vw,210px);background:var(--card);padding:8px 8px 10px;border-radius:5px;box-shadow:0 18px 36px -18px rgba(0,0,0,.5);cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;transform:translate(var(--x,0px),var(--y,0px)) rotate(var(--r,0deg));transition:transform .7s cubic-bezier(.2,.7,.2,1),box-shadow .2s}
.acard.drag{cursor:grabbing;transition:box-shadow .2s;box-shadow:0 30px 50px -20px rgba(0,0,0,.6)}
.acard img{width:100%;display:block;border-radius:3px;pointer-events:none;-webkit-user-drag:none}
.acard figcaption{font-size:12px;color:var(--muted);padding-top:7px;text-align:left}
@media (hover:none),(pointer:coarse),(max-width:760px){
  .h-fine{display:none}.h-touch{display:inline}
  .arch{height:auto;overflow:visible;background:none;box-shadow:none;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:4px}
  .acard{position:relative;width:auto;cursor:pointer;touch-action:auto;transform:rotate(var(--r,0deg))}
  .shuffle{display:none}
}
.ap-end{max-width:760px;margin:0 auto;padding:clamp(110px,14vw,170px) 20px 40px;text-align:center}
.end-lines p{font-size:clamp(30px,5vw,56px)!important;font-weight:500;letter-spacing:-.05em;line-height:1.05!important;margin-top:4px!important}
.end-lines p:last-child{color:var(--muted)}
.sigwrap{margin-top:40px}
.sigwrap img{width:min(240px,56vw);clip-path:inset(0 100% 0 0);transition:clip-path 2s cubic-bezier(.6,0,.2,1) .3s}
.sigwrap.in img{clip-path:inset(0 0 0 0)}
:root[data-theme="dark"] .sigwrap img{filter:invert(1)}
.ap-end .ctas{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:36px}

.lb{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.84);display:grid;place-items:center;padding:24px;animation:lbIn .25s ease}
.lb[hidden]{display:none}
@keyframes lbIn{from{opacity:0}}
.lb figure{margin:0;max-width:min(900px,92vw);text-align:center}
.lb img{max-width:100%;max-height:78vh;border-radius:6px;display:block;margin:0 auto}
.lb figcaption{color:#EEE;font-size:14px;margin-top:12px}
.lb-x{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:16px;all:unset;cursor:pointer;color:#fff;font-size:30px;width:44px;height:44px;display:grid;place-items:center}
.lb-x{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:16px}

@media (prefers-reduced-motion: reduce){
  .ap.reveal,.ap.hide{animation:none}
  .rv,.stag>*,.pol,.cmp .old,.cmp .new{opacity:1!important;transform:none!important;transition:none!important}
  .ap-h1 .w{opacity:1;transform:none;filter:none;animation:none!important}
  .ap.opened .lens img{animation:none}
  .rcpt{clip-path:none;transition:none}
  .sigwrap img{clip-path:none;transition:none}
  .cue span{animation:none}
}

/* brand logos: one ink colour, optical sizing, equal cells */
.logos{list-style:none;margin:26px auto 0;padding:0;max-width:980px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 12px;--k:.8}
@media(min-width:760px){.logos{grid-template-columns:repeat(5,minmax(0,1fr));gap:34px 16px;--k:1}}
.logos li{display:flex;align-items:center;justify-content:center;height:calc(56px * var(--k))}
.logos img{display:block;width:calc(var(--w) * var(--k) * 1px);height:calc(var(--h) * var(--k) * 1px);opacity:.58;transition:opacity .25s ease,transform .25s ease}
.logos li:hover img{opacity:1;transform:translateY(-2px)}
:root[data-theme="dark"] .logos img{filter:invert(1);opacity:.62}
:root[data-theme="dark"] .logos li:hover img{opacity:1}

/* intro (home about) */
.intro2{text-align:left}
.intro2 .hi2{font-size:clamp(30px,4.4vw,44px);font-weight:500;letter-spacing:-.04em;line-height:1.1}
.intro2 .who{margin-top:8px;font-size:clamp(17px,2vw,20px);color:var(--muted)}
.intro2 .i-p{margin-top:28px;font-size:clamp(17px,1.9vw,19.5px);line-height:1.8;color:var(--ink)}
.intro2 .i-p+.i-p{margin-top:20px}
.hl{color:inherit;background:linear-gradient(var(--c),var(--c)) no-repeat 0 0/0% 100%;padding:.06em .22em;margin:0 -.04em;border-radius:5px;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .9s cubic-bezier(.6,0,.2,1) var(--d,0s),color .3s var(--d,0s)}
.intro2.in .hl{background-size:100% 100%;color:#141414}
.evo{font-weight:500;white-space:nowrap}
.evo .arr{width:1.45em;height:.62em;margin:0 .2em;vertical-align:.08em;fill:none;stroke:var(--muted);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;transition:stroke-dashoffset .7s ease .35s}
.intro2.in .evo .arr{stroke-dashoffset:0}
.squig{position:relative;white-space:nowrap}
.squig svg{position:absolute;left:0;right:0;bottom:-.32em;width:100%;height:.5em;fill:none;stroke:#6F9BFF;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:200;stroke-dashoffset:200;transition:stroke-dashoffset 1s cubic-bezier(.6,0,.2,1) .75s}
.intro2.in .squig svg{stroke-dashoffset:0}
.spark{position:relative;white-space:nowrap}
.spark svg{position:absolute;right:-.42em;top:-.62em;width:.85em;height:.85em;fill:#FFB020;transform:scale(0) rotate(-40deg);transition:transform .5s cubic-bezier(.3,1.6,.5,1) 1.3s}
.intro2.in .spark svg{transform:scale(1) rotate(0)}
.dn{margin-top:40px;display:grid;gap:18px;padding:22px 22px;border-radius:24px;background:var(--sheet);box-shadow:var(--glow)}
.s-grey .dn{background:var(--paper)}
.dn-row{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;align-items:start}
.dn-ic{width:34px;height:34px;padding:7px;border-radius:50%;background:var(--card);box-shadow:var(--lift);fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dn small,.mw small{display:block;font-size:13px;color:var(--muted);line-height:1.3}
.dn p{margin-top:3px;font-size:clamp(16.5px,1.8vw,18.5px);line-height:1.6}
.expw{font-weight:600;letter-spacing:.14em;white-space:nowrap}
.expw .inf{width:1.25em;height:.62em;margin:0 .06em;vertical-align:.02em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-dasharray:60;stroke-dashoffset:60;transition:stroke-dashoffset 1.4s ease 1.1s}
.intro2.in .expw .inf{stroke-dashoffset:0}
.expw:hover .inf{animation:infRedraw 1.4s ease}
@keyframes infRedraw{0%{stroke-dashoffset:60}100%{stroke-dashoffset:0}}
.soon{display:inline-block;transform:rotate(-4deg);font-size:12px;font-weight:500;background:var(--card);box-shadow:var(--lift);border-radius:999px;padding:3px 10px;margin-left:4px;vertical-align:.1em;color:var(--muted);white-space:nowrap}
.mw{margin-top:30px}
.mw p{margin-top:6px;font-size:clamp(16.5px,1.8vw,18.5px);line-height:2.05}
.tb{display:inline-block;white-space:nowrap;text-decoration:none;color:#141414;background:var(--c);font-weight:500;padding:.02em .5em .06em;border-radius:6px;line-height:1.5;box-shadow:0 2px 0 rgba(0,0,0,.16),0 6px 14px -8px rgba(0,0,0,.35);transition:transform .15s ease,box-shadow .15s ease}
.tb i{font-style:normal;font-size:.8em;margin-left:.3em;opacity:.7}
.tb:hover{transform:translateY(-2px);box-shadow:0 4px 0 rgba(0,0,0,.16),0 12px 20px -10px rgba(0,0,0,.4)}
.tb:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(0,0,0,.16)}
.tb:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.intro2 .story-btn{margin-top:34px}
@media(max-width:420px){.tb{white-space:normal}}
@media (prefers-reduced-motion: reduce){
  .hl,.evo .arr,.squig svg,.spark svg,.expw .inf{transition:none}
  .hl{background-size:100% 100%;color:#141414}
  .evo .arr,.squig svg,.expw .inf{stroke-dashoffset:0}
  .spark svg{transform:none}
}

/* dock sits exactly on the hero's bottom edge */
.dockwrap{--dh:68px;margin-top:calc(var(--dh) * -0.5);height:var(--dh);align-items:flex-end}
.brands{margin-top:calc(-34px - var(--dh,68px) * 0.5)}
@media(max-width:560px){.dockwrap{--dh:52px}.brands{margin-top:-60px}}

/* breathing space between sections */
.hero{padding-bottom:clamp(120px,14vw,172px)}
.brands{padding-top:clamp(116px,13vw,150px);padding-bottom:clamp(48px,5.5vw,68px)}
.sec{padding-top:clamp(112px,15vw,184px)}
.sec-sheet{margin-top:clamp(112px,15vw,184px);padding:clamp(60px,8vw,108px) 0}
.contact{margin-top:clamp(112px,15vw,184px);padding-top:clamp(72px,10vw,120px)}
.label{margin-bottom:clamp(40px,5vw,64px)}
.feature+.feature{margin-top:18px}
.subhead{margin-top:clamp(56px,7vw,80px)}
.more,.svcs{gap:16px}
.follow{margin-top:32px}
.page{padding-bottom:64px}

/* dock: no off-screen tooltips on touch, fit small phones */
@media (hover:none),(max-width:560px){.tile .tip{display:none}}
@media(max-width:380px){.dock{gap:5px;padding:6px}.dock .sep{margin:4px 0}.tile{width:34px!important;height:34px!important;border-radius:9px}.tile svg{width:17px!important;height:17px!important}.dockwrap{--dh:48px}.brands{margin-top:-58px}}

/* brand logos: light up + point to the work */
.logos{row-gap:44px}
.logos li{position:relative}
.lg{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;text-decoration:none;border-radius:16px}
.lg::before{content:"";position:absolute;inset:-14px -4px;border-radius:20px;background:radial-gradient(55% 65% at 50% 50%,color-mix(in srgb,var(--blue) 16%,transparent),transparent 72%);opacity:0;transform:scale(.7);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.logos li:nth-child(odd){--t:-3deg}.logos li:nth-child(even){--t:3deg}.logos li:nth-child(3n){--t:-1.5deg}
.logos .lg img{transition:opacity .3s ease,transform .45s cubic-bezier(.3,1.5,.5,1),filter .3s ease}
.logos:hover .lg img{opacity:.32}
.logos .lg:hover img,.logos .lg:focus-visible img{opacity:1;transform:translateY(-4px) scale(1.1) rotate(var(--t,0deg));filter:drop-shadow(0 8px 12px rgba(0,0,0,.18))}
:root[data-theme="dark"] .logos .lg:hover img,:root[data-theme="dark"] .logos .lg:focus-visible img{filter:invert(1) drop-shadow(0 8px 12px rgba(0,0,0,.6))}
a.lg:hover::before,a.lg:focus-visible::before{opacity:1;transform:scale(1)}
.lg-soon .lg:hover::before{opacity:.5;transform:scale(1)}
.lg-cta{position:absolute;left:50%;top:calc(100% + 4px);transform:translate(-50%,-4px);font-size:11.5px;font-weight:500;color:var(--blue);white-space:nowrap;opacity:0;transition:opacity .25s ease,transform .25s ease;pointer-events:none}
.lg-soon .lg-cta{color:var(--muted)}
.lg:hover .lg-cta,.lg:focus-visible .lg-cta{opacity:1;transform:translate(-50%,0)}
a.lg:focus-visible{outline:2px solid var(--blue);outline-offset:6px}
.lg-soon .lg{cursor:default}
@media (hover:none){.lg-cta{display:none}.logos:hover .lg img{opacity:.58}}
@media (prefers-reduced-motion: reduce){.logos .lg img,.lg::before,.lg-cta{transition:none}.logos .lg:hover img{transform:none}}
/* arriving at a case study from a logo: brief highlight */
.card:target{animation:tgt 1.8s ease .35s}
@keyframes tgt{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--blue) 55%,transparent)}35%{box-shadow:0 0 0 7px color-mix(in srgb,var(--blue) 30%,transparent)}100%{box-shadow:0 0 0 0 transparent}}

.evo .pf{font-weight:600;letter-spacing:-.01em}
.pf-vine{color:#00A67E}
.pf-yt{color:#E62117}
:root[data-theme="dark"] .pf-vine{color:#2ED3A5}
:root[data-theme="dark"] .pf-yt{color:#FF4D45}

.mw-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:10px!important;line-height:1.5!important}
.mw-sep{color:var(--faint)}
@media(max-width:560px){.mw-sep{display:none}.mw-row{gap:10px}}

.intro2 .story-btn{display:flex;margin-left:auto;margin-right:auto}

/* day / night split card */
.dn2{margin-top:40px;display:grid;grid-template-columns:minmax(0,1fr);border-radius:26px;overflow:hidden;box-shadow:var(--glow)}
@media(min-width:600px){.dn2{grid-template-columns:1fr 1fr}}
.dn-half{position:relative;padding:24px 24px 26px;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.dn-day{background:linear-gradient(160deg,#FFF8E6 0%,#FFE9BE 100%);color:#1A1712}
.dn-night{background:radial-gradient(1.2px 1.2px at 18% 28%,rgba(255,255,255,.75),transparent),radial-gradient(1px 1px at 72% 18%,rgba(255,255,255,.6),transparent),radial-gradient(1.4px 1.4px at 86% 62%,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 40% 80%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 60% 45%,rgba(255,255,255,.45),transparent),linear-gradient(160deg,#1C2546 0%,#0A0F22 100%);color:#F1F0EC}
.dn-half small{font-size:12.5px;letter-spacing:.02em;opacity:.7;margin-top:12px}
.dn-role{font-size:clamp(18px,2vw,21px)!important;font-weight:500;letter-spacing:-.02em;line-height:1.3!important;margin-top:2px!important}
.dn-at{margin-top:8px!important;font-size:15.5px!important;line-height:1.5!important;opacity:.95}
.dn-orb{width:46px;height:46px;border-radius:50%;display:grid;place-items:center}
.dn-orb svg{width:42px;height:42px}
.sun{background:radial-gradient(circle,rgba(255,196,64,.45) 0%,rgba(255,196,64,0) 70%)}
.sun .core{fill:#FFB81F;filter:drop-shadow(0 0 6px rgba(255,170,20,.85))}
.sun .rays{stroke:#FFA81A;stroke-width:3;stroke-linecap:round;transform-origin:24px 24px;animation:sunSpin 24s linear infinite}
@keyframes sunSpin{to{transform:rotate(360deg)}}
.moon{background:radial-gradient(circle,rgba(246,231,168,.22) 0%,rgba(246,231,168,0) 70%)}
.moon .cres{fill:#F6E7A8;filter:drop-shadow(0 0 6px rgba(246,231,168,.6))}
.moon .st{fill:#FFFFFF;transform-box:fill-box;transform-origin:center;animation:twinkle 2.8s ease-in-out infinite}
.moon .s2{animation-delay:.9s}.moon .s3{animation-delay:1.7s}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.1)}}
.dn-night .expw{color:#FFFFFF}
.dn-night .soon{background:rgba(255,255,255,.12);color:rgba(241,240,236,.85);box-shadow:none;margin-left:0}
.dn-day .tb{box-shadow:0 2px 0 rgba(0,0,0,.14),0 6px 14px -8px rgba(0,0,0,.3)}
@media (prefers-reduced-motion: reduce){.sun .rays,.moon .st{animation:none}}

/* closing CTA cluster */
.intro2 .mw{text-align:center;margin-top:44px}
.intro2 .mw-row{justify-content:center;flex-wrap:nowrap;gap:10px}
@media(max-width:360px){.intro2 .mw-row{gap:6px}.intro2 .mw-row .tb{padding:.02em .4em .06em;font-size:15px}}
.intro2 .story-btn{margin-top:30px}
.community{display:flex;width:max-content;max-width:100%;margin:16px auto 0;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;padding:8px 14px;border-radius:999px;border:1px dashed var(--line-2);transition:border-color .2s,background .2s,transform .2s}
.community svg{width:18px;height:18px;fill:#FFB020;flex:none;filter:drop-shadow(0 0 4px rgba(255,176,32,.6));transform-origin:center;animation:sparkSpin 3.2s ease-in-out infinite}
.community svg .sm{fill:#6F9BFF;filter:none}
.community i{font-style:normal;font-size:.85em;opacity:.6}
.community:hover{border-color:#FFB020;background:color-mix(in srgb,#FFB020 10%,transparent);transform:translateY(-1px)}
@keyframes sparkSpin{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.18) rotate(20deg)}}
@media (prefers-reduced-motion: reduce){.community svg{animation:none}}

.intro2 .mw-row .tb{white-space:nowrap}
@media(max-width:420px){.intro2 .mw-row{gap:8px}.intro2 .mw-row .tb{font-size:15px;padding:.04em .45em .08em}.community .xc{display:none}}
@media(max-width:350px){.intro2 .mw-row .tb i{display:none}}

/* ===== selected work: carousel + pop-up ===== */
.wc-ink{--wc-bg:#141414;--wc-fg:#F4F3F0}
.wc-blue{--wc-bg:linear-gradient(160deg,#4672FF 0%,#1C3EC6 100%);--wc-fg:#FFFFFF}
.wc-red{--wc-bg:linear-gradient(160deg,#EC4C42 0%,#B0171C 100%);--wc-fg:#FFFFFF}
.wc-sand{--wc-bg:linear-gradient(160deg,#F4ECDD 0%,#E6D6BA 100%);--wc-fg:#1A1712}
.wc-green{--wc-bg:linear-gradient(160deg,#22865A 0%,#0C4A30 100%);--wc-fg:#FFFFFF}
.wc-amber{--wc-bg:linear-gradient(160deg,#FFCB57 0%,#F59E0B 100%);--wc-fg:#1A1712}
.wcar{position:relative}
.wtrack{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(250px,31%,310px);gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:4px;padding:8px 4px 26px;scrollbar-width:none;cursor:grab}
.wtrack::-webkit-scrollbar{display:none}
.wtrack.dragging{cursor:grabbing;scroll-snap-type:none}
.wtrack.dragging .wc{pointer-events:none}
@media(max-width:640px){.wtrack{grid-auto-columns:80%}}
.wc{all:unset;box-sizing:border-box;scroll-snap-align:start;aspect-ratio:3/4;border-radius:26px;background:var(--wc-bg);color:var(--wc-fg);padding:20px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;position:relative;overflow:hidden;box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 24px 40px -26px rgba(0,0,0,.55);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.wc::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 70% at 100% 0%,rgba(255,255,255,.18),transparent 60%);pointer-events:none}
.wc:hover{transform:translateY(-6px);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 34px 50px -26px rgba(0,0,0,.6)}
.wc:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.wc-cat{align-self:flex-start;font-size:12px;padding:5px 11px;border-radius:999px;background:color-mix(in srgb,var(--wc-fg) 14%,transparent);line-height:1.2}
.wc-mid{display:flex;flex-direction:column;gap:8px}
.wc-fig{font-size:clamp(34px,3.6vw,44px);font-weight:500;letter-spacing:-.05em;line-height:1;transition:transform .45s cubic-bezier(.3,1.4,.5,1);transform-origin:left bottom}
.wc:hover .wc-fig{transform:scale(1.05)}
.wc-cap{font-size:14px;line-height:1.4;opacity:.78;max-width:24ch}
.wc-bot{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;border-top:1px solid color-mix(in srgb,var(--wc-fg) 22%,transparent);padding-top:14px}
.wc-t{font-size:17px;font-weight:500;letter-spacing:-.02em;line-height:1.2}
.wc-go{font-size:12.5px;opacity:.8;white-space:nowrap}
.wc-go i{font-style:normal;display:inline-block;transition:transform .25s}
.wc:hover .wc-go i{transform:translateX(4px)}
.wnav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:4px}
.wnav-hint{font-size:13px;color:var(--muted)}
.wnav-btns{display:flex;gap:8px}
.wbtn{all:unset;cursor:pointer;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--card);box-shadow:var(--lift);font-size:17px;color:var(--ink);transition:transform .2s,opacity .2s}
.wbtn:hover{transform:translateY(-2px)}
.wbtn:disabled{opacity:.35;cursor:default;transform:none}
.wbtn:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

dialog.wmod{padding:0;border:0;background:transparent;width:min(760px,94vw);max-width:none;max-height:none;overflow:visible;color:var(--ink)}
dialog.wmod::backdrop{background:rgba(8,8,10,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
dialog.wmod[open]{animation:wmIn .4s cubic-bezier(.2,.7,.2,1)}
dialog.wmod[open]::backdrop{animation:wmFade .3s ease}
@keyframes wmIn{from{opacity:0;transform:translateY(20px) scale(.97)}}
@keyframes wmFade{from{opacity:0}}
.wm-in{background:var(--paper);border-radius:28px;overflow:hidden auto;max-height:min(88vh,860px);box-shadow:0 40px 90px -30px rgba(0,0,0,.6)}
.wm-hd{position:relative;background:var(--wc-bg);color:var(--wc-fg);padding:28px 28px 26px}
.wm-cat{display:inline-block;font-size:12px;padding:5px 11px;border-radius:999px;background:color-mix(in srgb,var(--wc-fg) 14%,transparent)}
.wm-hd h3{font-size:clamp(26px,3.6vw,36px);font-weight:500;letter-spacing:-.04em;line-height:1.05;margin-top:14px}
.wm-fig{display:block;margin-top:18px;font-size:clamp(40px,6vw,60px);font-weight:500;letter-spacing:-.055em;line-height:1}
.wm-cap{display:block;margin-top:6px;font-size:14.5px;opacity:.8}
.wm-x{all:unset;cursor:pointer;position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:22px;line-height:1;background:color-mix(in srgb,var(--wc-fg) 16%,transparent);color:var(--wc-fg)}
.wm-x:hover{background:color-mix(in srgb,var(--wc-fg) 26%,transparent)}
.wm-x:focus-visible{outline:2px solid var(--wc-fg);outline-offset:2px}
.wm-bd{padding:26px 28px 30px}
.wm-bd .facts{margin-top:0}
.wm-bd .facts dd{max-width:none}
.wm-sub{font-size:13px;font-weight:500;color:var(--muted);margin:28px 0 0;padding-top:20px;border-top:1px solid var(--line)}
.wm-bd .csb{margin-top:14px}
.wm-bd .csl{margin-top:20px}
@media(max-width:560px){dialog.wmod{width:100vw;margin:auto 0 0}.wm-in{border-radius:26px 26px 0 0;max-height:90vh}.wm-hd,.wm-bd{padding-left:22px;padding-right:22px}}
@media (prefers-reduced-motion: reduce){.wc,.wc-fig,.wc-go i{transition:none}dialog.wmod[open],dialog.wmod[open]::backdrop{animation:none}}

/* one standard rhythm between sections */
:root{--sgap:clamp(56px,7vw,96px);--spad:clamp(44px,5.5vw,72px)}
.sec{padding-top:var(--sgap)}
.sec-sheet{margin-top:var(--sgap);padding:var(--spad) 0}
.contact{margin-top:var(--sgap);padding-top:var(--spad)}
.hero{padding-bottom:clamp(88px,9vw,116px)}
.brands{padding-top:clamp(76px,8vw,96px);padding-bottom:clamp(40px,4.5vw,56px)}
.label{margin-top:22px;margin-bottom:clamp(28px,3.5vw,44px)}
.subhead{margin-top:clamp(40px,5vw,56px)}
.follow{margin-top:24px}
.intro2 .mw{margin-top:36px}
.dn2{margin-top:32px}
.intro2 .story-btn{margin-top:26px}
.page{padding-bottom:40px}

dialog.wmod:not([open]){display:none}

/* timeline inside About me */
.ap-tl{max-width:1040px;margin:0 auto;padding:clamp(100px,14vw,170px) 20px 0}
.ap-tl .ch-t{text-align:center}
.ap-tl-hint{text-align:center;font-size:15px!important;margin:-14px auto 36px!important}
@media(min-width:960px){.ap-tl .tl-side{top:calc(88px + env(safe-area-inset-top,0px))}}
@media(max-width:959px){.ap-tl .tl-side{top:calc(58px + env(safe-area-inset-top,0px))}}
.ap-tl .tl-dot{background:var(--page)}
.tl-pic{margin:14px 0 0;width:150px;background:#FFFFFF;padding:7px 7px 9px;border-radius:5px;box-shadow:0 18px 32px -16px rgba(0,0,0,.45);transform:rotate(var(--r,0deg)) scale(.85);opacity:0;transition:transform .6s cubic-bezier(.3,1.5,.5,1),opacity .5s ease}
@media(min-width:700px){.tl-pic{margin-top:0}}
.tl-pic.wide{width:210px}
.tl-pic img{display:block;width:100%;border-radius:3px}
.tl-pic figcaption{font-size:11.5px;color:#6E6C68;padding-top:6px}
.tl-item.on .tl-pic{opacity:1;transform:rotate(var(--r,0deg)) scale(1)}
.tl-pic:hover{transform:rotate(0deg) scale(1.05)!important}
@media(max-width:699px){.tl-pic{width:140px}.tl-pic.wide{width:200px}}
@media (prefers-reduced-motion: reduce){.tl-pic{opacity:1;transform:rotate(var(--r,0deg));transition:none}}

.tl-item.has-pic{display:flex;flex-direction:column}
.tl-item.has-pic .tl-pic{order:9}
@media(min-width:700px){.tl-item.has-pic{display:block}.tl-item.has-pic::after{content:"";display:block;clear:both}.tl-item.has-pic .tl-pic{float:right;margin:0 0 12px 24px}}
.tl-stats{align-items:flex-start}

/* services: four equal, detailed cards */
.svcs2{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;max-width:1000px;margin:0 auto}
@media(min-width:760px){.svcs2{grid-template-columns:1fr 1fr}}
.svc2{position:relative;display:flex;flex-direction:column;padding:26px 26px 24px;border-radius:26px;background:var(--paper);box-shadow:var(--lift);overflow:hidden;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.svc2::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:var(--sc)}
:root[data-theme="dark"] .svc2[style*="#141414"]{--sc:#F2F1EE!important}
.svc2:hover{transform:translateY(-4px)}
.svc2-ico{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--sc) 12%,transparent);color:var(--sc)}
.svc2-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.svc2 h3{margin-top:18px;font-size:clamp(21px,2.3vw,25px);letter-spacing:-.03em}
.svc2-line{margin-top:8px;color:var(--muted);font-size:15.5px;line-height:1.5;max-width:40ch}
.svc2-list{list-style:none;margin:20px 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
.svc2-list li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.4}
.svc2-list li::before{content:"";position:absolute;left:0;top:.28em;width:14px;height:14px;border-radius:50%;background:color-mix(in srgb,var(--sc) 16%,transparent)}
.svc2-list li::after{content:"";position:absolute;left:4.2px;top:calc(.28em + 3.6px);width:5px;height:3px;border-left:1.8px solid var(--sc);border-bottom:1.8px solid var(--sc);transform:rotate(-45deg)}
@media(max-width:420px){.svc2-list{grid-template-columns:1fr}}
.svc2-best{margin-top:18px;font-size:14px;color:var(--ink)}
.svc2-best span{display:block;font-size:12px;color:var(--muted);margin-bottom:2px}
.svc2-cta{margin-top:22px;align-self:flex-start}
@media (prefers-reduced-motion: reduce){.svc2{transition:none}}

/* career highlights grid */
.wgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media(max-width:860px){.wgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.wgrid .wc{aspect-ratio:5/4;padding:18px;border-radius:22px;transform-style:preserve-3d;translate:0 0;rotate:0deg;scale:1;opacity:1;transition:translate .85s cubic-bezier(.2,.8,.2,1) var(--dl,0s),rotate .85s cubic-bezier(.2,.8,.2,1) var(--dl,0s),scale .85s cubic-bezier(.2,.8,.2,1) var(--dl,0s),opacity .4s ease var(--dl,0s),transform .18s ease,box-shadow .3s}
.wgrid.pre .wc{translate:var(--dx,0) var(--dy,0);rotate:var(--rot,0deg);scale:.86;opacity:.0}
.wgrid.pre .wc:first-child{opacity:1}
.wgrid .wc:hover{transform:translateY(-4px)}
.wgrid .wc::after{background:radial-gradient(70% 60% at var(--gx,100%) var(--gy,0%),rgba(255,255,255,.26),transparent 60%);transition:background .1s}
.wgrid .wc-fig{font-size:clamp(28px,3vw,40px)}
.wgrid .wc-cap{font-size:13px;max-width:26ch}
.wgrid .wc-t{font-size:15.5px}
.wgrid .wc-bot{padding-top:12px}
@media(max-width:860px){.wgrid .wc{aspect-ratio:4/5;padding:14px;border-radius:18px}.wgrid .wc-fig{font-size:clamp(24px,6.6vw,34px)}.wgrid .wc-cap{font-size:12px;line-height:1.35}.wgrid .wc-cat{font-size:10.5px;padding:4px 9px}.wgrid .wc-t{font-size:13.5px}.wgrid .wc-go{font-size:0}.wgrid .wc-go i{font-size:16px}.wgrid .wc-bot{padding-top:10px}}
@media (prefers-reduced-motion: reduce){.wgrid .wc{transition:none}.wgrid.pre .wc{translate:none;rotate:none;scale:1;opacity:1}}

/* testimonials: video + quotes bento */
.tgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
@media(min-width:900px){
  .tgrid{grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-flow:dense}
  .tvid{grid-column:1 / span 7;grid-row:span 2}
  .tq-a,.tq-b{grid-column:span 5}
  .tq-c,.tq-d{grid-column:span 6}
  .tq-c:last-child{grid-column:1 / -1}
}
@media(min-width:620px) and (max-width:899px){.tgrid{grid-template-columns:1fr 1fr}.tvid{grid-column:1 / -1}.tq:last-child:nth-child(odd){grid-column:1 / -1}}
.tvid{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;min-height:360px;padding:24px;border-radius:26px;overflow:hidden;text-decoration:none;color:#F4F3F0;background:radial-gradient(90% 70% at 85% 10%,rgba(36,91,255,.45),transparent 60%),linear-gradient(160deg,#1C1C1E,#0B0B0C);box-shadow:0 30px 50px -30px rgba(0,0,0,.6);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.tvid:hover{transform:translateY(-4px)}
.tvid-tag{position:absolute;top:20px;left:20px;font-size:12px;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.12)}
.tvid-play{position:absolute;top:50%;left:50%;width:76px;height:76px;margin:-58px 0 0 -38px;border-radius:50%;background:#FFFFFF;box-shadow:0 0 0 0 rgba(255,255,255,.45);animation:tvPulse 2.4s ease-out infinite}
.tvid-play::after{content:"";position:absolute;left:31px;top:24px;border-left:20px solid #141414;border-top:14px solid transparent;border-bottom:14px solid transparent}
@keyframes tvPulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.45)}80%,100%{box-shadow:0 0 0 22px rgba(255,255,255,0)}}
.tvid:hover .tvid-play{transform:scale(1.06)}
.tvid-q{font-size:clamp(19px,2.2vw,24px);font-weight:500;letter-spacing:-.025em;line-height:1.3;max-width:28ch}
.tvid-who b{display:block;font-weight:500;font-size:15px}
.tvid-who small{display:block;font-size:13px;opacity:.7}
.tvid-cta{font-size:13px;opacity:.8}
.tvid .tbc{color:rgba(244,243,240,.62)}
.tq{margin:0;position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:18px;padding:24px 24px 22px;border-radius:24px;background:var(--sheet);box-shadow:var(--lift)}
.tq-mark{position:absolute;top:6px;right:18px;font-size:72px;line-height:1;font-weight:500;color:var(--qc);opacity:.35;font-family:Georgia,"Times New Roman",serif}
.tq blockquote{margin:0;font-size:15.5px;line-height:1.55;max-width:46ch;padding-right:28px}
.tq figcaption{display:flex;align-items:center;gap:12px}
.tq-av{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:14px;font-weight:600;color:#fff;background:var(--qc)}
.tq figcaption b{display:block;font-weight:500;font-size:14.5px}
.tq figcaption small{display:block;font-size:12.5px;color:var(--muted)}
@media (prefers-reduced-motion: reduce){.tvid-play{animation:none}.tvid{transition:none}}

@media(max-width:899px){.tvid{min-height:400px}.tvid-play{top:36%}}

/* testimonials v2: real people, pop-out portraits */
.tvid{flex-direction:row;align-items:stretch;justify-content:flex-start;min-height:420px;padding:0}
.tvid-img{position:absolute;right:-6%;bottom:0;height:88%;width:auto;max-width:62%;object-fit:contain;object-position:bottom right;filter:drop-shadow(0 20px 30px rgba(0,0,0,.45));transition:transform .5s cubic-bezier(.2,.7,.2,1);transform-origin:bottom center}
.tvid:hover .tvid-img{transform:scale(1.04)}
.tvid::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,11,12,.92) 0%,rgba(11,11,12,.7) 48%,rgba(11,11,12,0) 75%);z-index:1;pointer-events:none}
.tvid-body{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;padding:24px;max-width:62%}
.tvid-tag{position:static;align-self:flex-start;margin-bottom:auto}
.tvid-q{font-size:clamp(15.5px,1.6vw,18px);font-weight:400;letter-spacing:-.01em;line-height:1.5;max-width:40ch}
.tvid-cta{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;background:#FFFFFF;color:#141414;font-size:14px;font-weight:500;padding:8px 16px 8px 8px;border-radius:999px;opacity:1}
.tvid-cta .tvid-play{position:relative;top:auto;left:auto;margin:0;width:30px;height:30px;background:#E62117;animation:tvPulse2 2.4s ease-out infinite}
.tvid-cta .tvid-play::after{left:12px;top:9px;border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent}
@keyframes tvPulse2{0%{box-shadow:0 0 0 0 rgba(230,33,23,.5)}80%,100%{box-shadow:0 0 0 12px rgba(230,33,23,0)}}
.tvid:hover .tvid-play{transform:none}
@media(max-width:899px){.tvid{min-height:520px}.tvid-img{height:62%;max-width:80%;right:-4%}.tvid::before{background:linear-gradient(180deg,rgba(11,11,12,.0) 0%,rgba(11,11,12,.55) 38%,rgba(11,11,12,.95) 62%)}.tvid-body{max-width:none;justify-content:flex-end}}
.tq blockquote{font-style:normal;color:var(--ink)}
.tq-av{position:relative;width:64px;height:84px;margin-top:-20px;border-radius:0 0 32px 32px;overflow:hidden;background:none;flex:none;display:block}
.tq-av::before{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;border-radius:50%;background:color-mix(in srgb,var(--qc) 22%,var(--paper))}
.tq-av img{position:absolute;left:50%;bottom:-2px;width:78px;height:auto;transform:translateX(-50%);transition:transform .35s cubic-bezier(.3,1.4,.5,1);transform-origin:bottom center}
.tq:hover .tq-av img{transform:translateX(-50%) scale(1.08)}
.tq figcaption{align-items:flex-end;gap:14px}
.tq figcaption>span:last-child{padding-bottom:6px}
.tq-mark{opacity:.5}
@media (prefers-reduced-motion: reduce){.tvid-cta .tvid-play{animation:none}.tvid-img,.tq-av img{transition:none}}

.tq-av{margin-top:0}
@media(max-width:899px){
  .tvid{flex-direction:column;min-height:0}
  .tvid::before{display:none}
  .tvid-img{position:relative;right:auto;bottom:auto;display:block;height:280px;width:auto;max-width:100%;margin:46px 0 0 auto;align-self:flex-end}
  .tvid-body{max-width:none;padding-top:0;margin-top:-30px;background:linear-gradient(180deg,rgba(11,11,12,0) 0,rgba(11,11,12,.92) 30px,#0B0B0C 60px);padding-top:40px}
  .tvid-tag{position:absolute;top:-300px;left:20px}
}

/* in-page video player */
dialog.vmod{padding:0;border:0;background:transparent;max-width:none;max-height:none;overflow:visible}
dialog.vmod:not([open]){display:none}
dialog.vmod::backdrop{background:rgba(6,6,8,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
dialog.vmod[open]{animation:wmIn .35s cubic-bezier(.2,.7,.2,1)}
.vmod-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px}
.vmod-frame{height:min(82vh,760px);aspect-ratio:9/16;max-width:92vw;border-radius:20px;overflow:hidden;background:#000;box-shadow:0 40px 90px -30px rgba(0,0,0,.8)}
.vmod-frame iframe{display:block;width:100%;height:100%;border:0}
.vmod-meta{display:flex;flex-direction:column;align-items:center;color:#F4F3F0;font-size:13px;text-align:center}
.vmod-meta b{font-weight:500;font-size:14.5px}
.vmod-meta span{opacity:.65}
.vmod-x{all:unset;cursor:pointer;position:absolute;top:-6px;right:-52px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:24px;line-height:1;color:#fff;background:rgba(255,255,255,.14)}
.vmod-x:hover{background:rgba(255,255,255,.24)}
.vmod-x:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(max-width:620px){.vmod-x{top:-50px;right:0}.vmod-frame{height:min(74vh,640px)}}

/* pop-out avatars: size by height so no head gets clipped */
.tq-av{height:92px}
.tq-av img{width:auto;height:86px;bottom:-2px}
.tq:hover .tq-av img{transform:translateX(-50%) scale(1.05)}

/* testimonials: video left, three quotes stacked right */
@media(min-width:900px){
  .tgrid{grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-flow:row}
  .tvid{grid-column:1 / span 7;grid-row:1 / span 3}
  .tq-a,.tq-b,.tq-c,.tq-d,.tq-c:last-child{grid-column:8 / -1}
  .tq-a{grid-row:1}.tq-b{grid-row:2}.tq-c{grid-row:3}
  .tq blockquote{font-size:15px}
}

@media(min-width:900px){
  .tvid-img{height:82%;max-width:74%;right:-4%}
  .tvid-big{position:absolute;z-index:2;top:22%;left:56%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:rgba(255,255,255,.96);box-shadow:0 0 0 0 rgba(255,255,255,.45);animation:tvPulse 2.4s ease-out infinite;transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
  .tvid-big::after{content:"";position:absolute;left:34px;top:26px;border-left:22px solid #141414;border-top:16px solid transparent;border-bottom:16px solid transparent}
  .tvid:hover .tvid-big{transform:scale(1.08)}
}
@media(max-width:899px){.tvid-big{display:none}}
@media (prefers-reduced-motion: reduce){.tvid-big{animation:none}}

@media(min-width:900px){
  .tvid-body{justify-content:flex-start;max-width:58%}
  .tvid-tag{margin-bottom:22px}
  .tvid-who{margin-top:auto}
  .tvid-img{height:60%;max-width:56%;right:-3%}
  .tvid::before{background:linear-gradient(90deg,rgba(11,11,12,.95) 0%,rgba(11,11,12,.75) 50%,rgba(11,11,12,0) 70%)}
  .tvid-big{top:26%;left:76%}
}

/* dock: Apple-style app icons (system colours, continuous corners, filled glyphs) */
#dock .tile{border-radius:23%;color:#FFFFFF;background:var(--ag);border:0;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.28),0 1px 2px rgba(0,0,0,.18),0 8px 16px -8px rgba(0,0,0,.4)}
#dock .tile::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 50%);pointer-events:none}
#dock .tile svg.ag{width:58%;height:58%;fill:#FFFFFF;stroke:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.18));position:relative}
#dock .tile svg.ag .f{fill:#FFFFFF;stroke:none}
#dock .t-yt{--ag:linear-gradient(180deg,#FF6A61 0%,#FF3B30 55%,#E5281F 100%)}
#dock .t-fb{--ag:linear-gradient(180deg,#46A1FF 0%,#007AFF 60%,#0064D9 100%)}
#dock .t-ig{--ag:linear-gradient(180deg,#FF6488 0%,#FF2D55 60%,#E31C45 100%)}
#dock .t-th{--ag:linear-gradient(180deg,#5A5A5E 0%,#2C2C2E 60%,#1C1C1E 100%)}
#dock .t-blog{--ag:linear-gradient(180deg,#FFB547 0%,#FF9500 60%,#F07F00 100%)}
#dock .t-pod{--ag:linear-gradient(180deg,#CF7CF2 0%,#AF52DE 60%,#9A3ECB 100%)}
#dock .t-call{--ag:linear-gradient(180deg,#5FDC7E 0%,#34C759 60%,#26AE48 100%)}
#dock .t-mail{--ag:linear-gradient(180deg,#8583FF 0%,#5856D6 60%,#4744C2 100%)}
:root[data-theme="dark"] #dock .t-th{--ag:linear-gradient(180deg,#6E6E73 0%,#48484A 60%,#3A3A3C 100%)}
#dock .tile:hover{filter:brightness(1.05)}

/* timeline stickers: small, floating at the milestone's corner */
.tl-item.has-pic{display:block;position:relative;padding-right:118px}
.tl-item.has-pic::after{display:none}
.tl-stk{position:absolute;top:-10px;right:0;width:104px;pointer-events:auto;rotate:var(--r,0deg);scale:.4;opacity:0;transition:scale .55s cubic-bezier(.3,1.6,.5,1),opacity .35s ease;filter:drop-shadow(0 8px 12px rgba(0,0,0,.25))}
.tl-stk img{display:block;width:100%;height:auto;animation:stkFloat 4.2s ease-in-out infinite}
.tl-item:nth-child(even) .tl-stk img{animation-delay:-2.1s}
.tl-item.on .tl-stk{scale:1;opacity:1}
.tl-stk:hover{rotate:0deg;scale:1.12!important}
@keyframes stkFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-6px) rotate(2deg)}}
@media(max-width:699px){.tl-item.has-pic{padding-right:70px}.tl-stk{width:66px;top:-6px}}
@media (prefers-reduced-motion: reduce){.tl-stk{scale:1;opacity:1;transition:none}.tl-stk img{animation:none}}

/* dock v3: richer gradients + emoji glyphs */
#dock .t-yt{--ag:linear-gradient(145deg,#FF8A65 0%,#FF3B30 45%,#C8121A 100%)}
#dock .t-fb{--ag:linear-gradient(145deg,#64D2FF 0%,#0A84FF 50%,#0050C8 100%)}
#dock .t-ig{--ag:linear-gradient(145deg,#FFC24A 0%,#FF2D55 52%,#AF52DE 100%)}
#dock .t-blog{--ag:linear-gradient(145deg,#FFE066 0%,#FF9F0A 52%,#FF6A00 100%)}
#dock .t-pod{--ag:linear-gradient(145deg,#E7A1FF 0%,#BF5AF2 50%,#7A2FC0 100%)}
#dock .t-call{--ag:linear-gradient(145deg,#B5F27A 0%,#30D158 50%,#16954A 100%)}
#dock .t-mail{--ag:linear-gradient(145deg,#70D7FF 0%,#5E5CE6 55%,#3A36B8 100%)}
#dock .tile .emo{position:relative;font-size:calc(24px * var(--s,1));line-height:1;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.28));font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",var(--sans)}
#dock .tile .emo-play{font-family:var(--sans);color:#FFFFFF;font-size:calc(21px * var(--s,1));transform:translateX(1.5px)}
@media(max-width:560px){#dock .tile .emo{font-size:19px}#dock .tile .emo-play{font-size:17px}}
@media(max-width:380px){#dock .tile .emo{font-size:17px}#dock .tile .emo-play{font-size:15px}}

/* dock v4: soft, soothing tiles that let the emoji lead */
#dock .t-yt{--h:#FF3B30}#dock .t-fb{--h:#0A84FF}#dock .t-blog{--h:#FF9F0A}#dock .t-pod{--h:#BF5AF2}#dock .t-call{--h:#30D158}#dock .t-mail{--h:#5E5CE6}
#dock .tile{background:linear-gradient(145deg,color-mix(in srgb,var(--h,#888) 12%,#FFFFFF) 0%,color-mix(in srgb,var(--h,#888) 30%,#FFFFFF) 100%)!important;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.7),0 1px 2px rgba(0,0,0,.08),0 8px 16px -10px rgba(0,0,0,.25)!important}
#dock .t-ig{background:linear-gradient(145deg,#FFEBD6 0%,#FFD3DF 55%,#EEDCFF 100%)!important}
#dock .tile::before{background:linear-gradient(180deg,rgba(255,255,255,.45) 0%,rgba(255,255,255,0) 55%)}
#dock .tile .emo{filter:drop-shadow(0 1px 1px rgba(0,0,0,.14))}
#dock .tile .emo-play{color:#E5251E;filter:none}
:root[data-theme="dark"] #dock .tile{background:linear-gradient(145deg,color-mix(in srgb,var(--h,#888) 34%,#1C1C1E) 0%,color-mix(in srgb,var(--h,#888) 18%,#1C1C1E) 100%)!important;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.08),0 8px 16px -10px rgba(0,0,0,.6)!important}
:root[data-theme="dark"] #dock .t-ig{background:linear-gradient(145deg,#4A3326 0%,#4A2632 55%,#3A2C4D 100%)!important}
:root[data-theme="dark"] #dock .tile::before{background:linear-gradient(180deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,0) 55%)}
:root[data-theme="dark"] #dock .tile .emo-play{color:#FF6B63}

/* dock v5: brand palette (white · black · electric blue), one tone per group */
#dock .t-yt,#dock .t-fb,#dock .t-ig{background:linear-gradient(160deg,#FFFFFF 0%,#F1F0ED 60%,#E4E2DE 100%)!important;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.10),inset 0 1px 0 #FFFFFF,0 1px 2px rgba(0,0,0,.10),0 8px 16px -10px rgba(0,0,0,.3)!important}
#dock .t-blog,#dock .t-pod{background:linear-gradient(160deg,#3A3A3D 0%,#1C1C1E 55%,#0B0B0C 100%)!important;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.10),inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(0,0,0,.2),0 8px 16px -10px rgba(0,0,0,.5)!important}
#dock .t-call,#dock .t-mail{background:linear-gradient(160deg,#5C86FF 0%,#245BFF 55%,#1A45D6 100%)!important;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.10),inset 0 1px 0 rgba(255,255,255,.28),0 1px 2px rgba(0,0,0,.15),0 8px 16px -10px rgba(36,91,255,.6)!important}
#dock .tile::before{background:linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 50%)!important}
#dock .t-blog::before,#dock .t-pod::before{background:linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 50%)!important}
#dock .tile .emo-play{color:#141414!important}
:root[data-theme="dark"] #dock .t-blog,:root[data-theme="dark"] #dock .t-pod{box-shadow:inset 0 0 0 .5px rgba(255,255,255,.18),inset 0 1px 0 rgba(255,255,255,.16),0 8px 16px -10px rgba(0,0,0,.7)!important}

:root[data-theme="dark"] #dock .t-yt,:root[data-theme="dark"] #dock .t-fb,:root[data-theme="dark"] #dock .t-ig{background:linear-gradient(160deg,#FFFFFF 0%,#F1F0ED 60%,#E4E2DE 100%)!important}
:root[data-theme="dark"] #dock .t-blog,:root[data-theme="dark"] #dock .t-pod{background:linear-gradient(160deg,#3A3A3D 0%,#1C1C1E 55%,#0B0B0C 100%)!important}
:root[data-theme="dark"] #dock .t-call,:root[data-theme="dark"] #dock .t-mail{background:linear-gradient(160deg,#5C86FF 0%,#245BFF 55%,#1A45D6 100%)!important}
:root[data-theme="dark"] #dock .tile .emo-play{color:#141414!important}
:root[data-theme="dark"] #dock .t-yt::before,:root[data-theme="dark"] #dock .t-fb::before,:root[data-theme="dark"] #dock .t-ig::before,:root[data-theme="dark"] #dock .t-call::before,:root[data-theme="dark"] #dock .t-mail::before{background:linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 50%)!important}

/* hero: e∞periences — infinity loop in place of the x */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.xinf{white-space:nowrap}
.infx{display:inline-block;width:.98em;height:.49em;margin:0 .01em 0 .02em;vertical-align:.02em;overflow:visible}
.infx path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.infx-base{stroke:var(--ink);stroke-opacity:.16;stroke-width:3}
.infx-run{stroke:url(#infxGrad);stroke-width:3.4;stroke-dasharray:34 66;stroke-dashoffset:0;filter:drop-shadow(0 0 3px rgba(36,91,255,.45));animation:infBoomerang 2.8s cubic-bezier(.65,0,.35,1) infinite alternate}
@keyframes infBoomerang{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}}
.xinf:hover .infx-run{animation-duration:1.4s}
@media (prefers-reduced-motion: reduce){.infx-run{animation:none;stroke-dasharray:none}}

.hero h1{max-width:14.5ch}
.infx{width:.84em;height:.42em;margin:0 .02em;vertical-align:.04em}
.infx-base{stroke-opacity:.26;stroke-width:3.6}
.infx-run{stroke-width:4}

/* dock v6: liquid glass tiles (brand tints per group) */
#dock .tile{--gt:rgba(255,255,255,.34);background:linear-gradient(150deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 45%),var(--gt)!important;-webkit-backdrop-filter:blur(14px) saturate(190%);backdrop-filter:blur(14px) saturate(190%);border:1px solid rgba(255,255,255,.55);box-shadow:inset 0 1px 1px rgba(255,255,255,.9),inset 0 -1px 2px rgba(0,0,0,.10),inset 0 0 14px rgba(255,255,255,.22),0 1px 2px rgba(0,0,0,.10),0 10px 22px -12px rgba(0,0,0,.35)!important;overflow:hidden}
#dock .tile::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(120% 70% at 22% 0%,rgba(255,255,255,.75) 0%,rgba(255,255,255,.18) 38%,rgba(255,255,255,0) 60%)!important;pointer-events:none;mix-blend-mode:screen}
#dock .tile::after{content:"";position:absolute;left:12%;right:12%;bottom:5%;height:28%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.35),rgba(255,255,255,0));filter:blur(2px);pointer-events:none}
#dock .t-yt,#dock .t-fb,#dock .t-ig{--gt:rgba(255,255,255,.38)}
#dock .t-blog,#dock .t-pod{--gt:rgba(18,18,20,.62);border-color:rgba(255,255,255,.28)}
#dock .t-call,#dock .t-mail{--gt:rgba(36,91,255,.55);border-color:rgba(180,200,255,.6)}
#dock .t-blog::before,#dock .t-pod::before{background:radial-gradient(120% 70% at 22% 0%,rgba(255,255,255,.35) 0%,rgba(255,255,255,.08) 40%,rgba(255,255,255,0) 60%)!important}
#dock .tile .emo,#dock .tile .tip{z-index:2}
#dock .tile .tip{z-index:5}
#dock .tile{overflow:visible}
#dock .tile::before,#dock .tile::after{z-index:1}
:root[data-theme="dark"] #dock .t-yt,:root[data-theme="dark"] #dock .t-fb,:root[data-theme="dark"] #dock .t-ig{background:linear-gradient(150deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,0) 45%),rgba(255,255,255,.16)!important}
:root[data-theme="dark"] #dock .t-blog,:root[data-theme="dark"] #dock .t-pod{background:linear-gradient(150deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 45%),rgba(0,0,0,.55)!important}
:root[data-theme="dark"] #dock .t-call,:root[data-theme="dark"] #dock .t-mail{background:linear-gradient(150deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,0) 45%),rgba(36,91,255,.5)!important}
:root[data-theme="dark"] #dock .tile{border-color:rgba(255,255,255,.22);box-shadow:inset 0 1px 1px rgba(255,255,255,.45),inset 0 -1px 2px rgba(0,0,0,.3),inset 0 0 14px rgba(255,255,255,.08),0 10px 22px -12px rgba(0,0,0,.7)!important}
:root[data-theme="dark"] #dock .tile .emo-play{color:#F4F3F0!important}
#dock{background:color-mix(in srgb,var(--card) 40%,transparent)}

/* live content feed */
.feed{max-width:1000px;margin:0 auto}
.feed-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.ftabs{position:relative;display:inline-flex;gap:2px;padding:4px;border-radius:999px;background:var(--card);box-shadow:var(--lift)}
.ftab{all:unset;position:relative;z-index:1;cursor:pointer;padding:9px 16px;border-radius:999px;font-size:14.5px;font-weight:500;color:var(--muted);transition:color .25s;white-space:nowrap}
.ftab[aria-selected="true"]{color:var(--card)}
.ftab:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.ftab-ind{position:absolute;z-index:0;top:4px;bottom:4px;left:0;border-radius:999px;background:var(--ink);transition:transform .45s cubic-bezier(.3,1.3,.5,1),width .45s cubic-bezier(.3,1.3,.5,1)}
.fstatus{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted)}
.fstatus i{width:8px;height:8px;border-radius:50%;background:var(--faint)}
.fstatus.live i{background:#30D158;box-shadow:0 0 0 0 rgba(48,209,88,.55);animation:livePulse 2s ease-out infinite}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(48,209,88,.55)}80%,100%{box-shadow:0 0 0 8px rgba(48,209,88,0)}}
.fgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;min-height:240px}
@media(max-width:860px){.fgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.fcard{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:6px;padding:8px 8px 14px;border-radius:20px;background:var(--card);box-shadow:var(--lift);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s;min-width:0}
.fcard:hover{transform:translateY(-4px)}
.fcard:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.fgrid.in .fcard{animation:fIn .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 70ms)}
@keyframes fIn{from{opacity:0;transform:translateY(14px) scale(.98)}}
.fthumb{position:relative;display:block;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:linear-gradient(145deg,#2A2A2D,#111113)}
.fthumb.podcast{aspect-ratio:1/1;background:linear-gradient(145deg,#3A2C4D,#151018)}
.fthumb.blog{aspect-ratio:16/10;background:linear-gradient(145deg,#FFE7C2,#FFC98A)}
.fthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.fcard:hover .fthumb img{transform:scale(1.05)}
.fglyph{position:absolute;inset:0;display:grid;place-items:center;font-size:34px}
.fplay{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 6px 18px rgba(0,0,0,.35);transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.fplay::after{content:"";position:absolute;left:17px;top:13px;border-left:13px solid #141414;border-top:9px solid transparent;border-bottom:9px solid transparent}
.fcard:hover .fplay{transform:scale(1.12)}
.fdate{font-size:12px;color:var(--muted);padding:6px 6px 0}
.ftitle{font-size:14.5px;font-weight:500;line-height:1.35;padding:0 6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fgo{font-size:12.5px;color:var(--blue);padding:2px 6px 0}
.fcard.cta{grid-column:1 / -1;flex-direction:row;align-items:center;gap:16px;padding:10px 18px 10px 10px}
.fcard.cta .fthumb{width:120px;flex:none;aspect-ratio:1/1}
.fcard.cta .ftitle{font-size:16px}
.fcard.sk{cursor:default;pointer-events:none}
.fcard.sk .fthumb,.fline{background:linear-gradient(90deg,var(--sheet) 0%,var(--paper) 50%,var(--sheet) 100%);background-size:200% 100%;animation:skel 1.2s linear infinite}
.fline{display:block;height:12px;margin:8px 6px 0;border-radius:6px}
.fline.s{width:60%}
@keyframes skel{to{background-position:-200% 0}}
.fall{display:inline-block;margin-top:18px;font-size:14px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-2)}
.fall:hover{border-color:var(--ink)}
.vmod-frame.wide{aspect-ratio:16/9;height:auto;width:min(92vw,1080px)}
.vmod-frame.audio{aspect-ratio:auto;height:auto;width:min(88vw,380px);display:flex;flex-direction:column;align-items:center;gap:14px;padding:18px;background:var(--card);color:var(--ink)}
.vmod-frame .fart{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px;display:block}
.vmod-frame .fart.ph{display:grid;place-items:center;font-size:56px;background:linear-gradient(145deg,#3A2C4D,#151018)}
.vmod-frame audio{width:100%}
.vmod-frame .fext{font-size:13px;color:var(--muted);text-decoration:none}
@media (prefers-reduced-motion: reduce){.fgrid.in .fcard{animation:none}.ftab-ind{transition:none}.fstatus.live i{animation:none}.fcard.sk .fthumb,.fline{animation:none}}

.ftext{display:flex;flex-direction:column;gap:6px;min-width:0}
.fcard.cta .fdate,.fcard.cta .ftitle,.fcard.cta .fgo{padding-left:0}

.fgrid:has(.cta){min-height:0}
.fcard.cta{align-self:start}

/* ===== facts & polish pass ===== */
/* readable greys: every small label passes 4.5:1 in both themes */
:root{--muted:#5B5955;--faint:#605E5A}
:root[data-theme="dark"]{--muted:#A8A6A1;--faint:#9A9893}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--muted:#A8A6A1;--faint:#9A9893}}
.wc-cap{opacity:.95}
.hero h1{max-width:13ch}
.stats b{white-space:nowrap}

/* motion: keep the three signatures (∞ loop, dock magnify, card deal-in); everything else holds still */
.sun .rays,.moon .st,.community svg,.tvid-play,.tvid-cta .tvid-play,.tvid-big,.tl-stk img,.fstatus.live i,.cue span{animation:none!important}
.fstatus.live i{box-shadow:0 0 0 3px rgba(48,209,88,.18)}

/* the ∞ signature now lives in the E∞PERIENCE wordmark */
.expw .inf.inf-loop{stroke-dasharray:none!important;stroke-dashoffset:0!important;transition:none!important;animation:none!important;overflow:visible}
.inf-loop path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.inf-loop .inf-base{stroke:currentColor;stroke-opacity:.28;stroke-width:2}
.inf-loop .inf-run{stroke:#7FA2FF;stroke-width:2.4;stroke-dasharray:34 66;filter:drop-shadow(0 0 2.5px rgba(92,134,255,.85));animation:infBoomerang 2.8s cubic-bezier(.65,0,.35,1) infinite alternate}
@keyframes infBoomerang{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}}
@media (prefers-reduced-motion: reduce){.inf-loop .inf-run{animation:none;stroke-dasharray:none}}

/* dock v7: an ink tray that holds its own on light and dark pages, glass tiles, sticker icons */
#dock{background:linear-gradient(180deg,#26262A 0%,#141416 100%)!important;border:1px solid rgba(255,255,255,.10)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.5),0 18px 40px -18px rgba(0,0,0,.55),0 10px 60px -10px rgba(36,91,255,.45)!important;-webkit-backdrop-filter:none;backdrop-filter:none}
:root[data-theme="dark"] #dock{background:linear-gradient(180deg,#34343A 0%,#1E1E22 100%)!important;border-color:rgba(255,255,255,.16)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.6),0 18px 40px -18px rgba(0,0,0,.9),0 0 0 1px rgba(92,134,255,.18),0 12px 70px -8px rgba(92,134,255,.55)!important}
#dock .sep{background:rgba(255,255,255,.18)!important}
#dock .tile{overflow:visible;border:1px solid rgba(255,255,255,.22)!important;-webkit-backdrop-filter:none;backdrop-filter:none}
#dock .tile::after{display:none}
#dock .t-yt,#dock .t-fb,#dock .t-ig,
:root[data-theme="dark"] #dock .t-yt,:root[data-theme="dark"] #dock .t-fb,:root[data-theme="dark"] #dock .t-ig{background:linear-gradient(160deg,#FFFFFF 0%,#ECEBE8 100%)!important;box-shadow:inset 0 1px 0 #FFFFFF,inset 0 -2px 3px rgba(0,0,0,.10),0 6px 14px -6px rgba(0,0,0,.6)!important;border-color:rgba(255,255,255,.7)!important}
#dock .t-blog,#dock .t-pod,
:root[data-theme="dark"] #dock .t-blog,:root[data-theme="dark"] #dock .t-pod{background:linear-gradient(160deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.06) 100%)!important;box-shadow:inset 0 1px 1px rgba(255,255,255,.45),inset 0 -1px 2px rgba(0,0,0,.35),0 6px 14px -6px rgba(0,0,0,.6)!important}
#dock .t-call,#dock .t-mail,
:root[data-theme="dark"] #dock .t-call,:root[data-theme="dark"] #dock .t-mail{background:linear-gradient(160deg,#6A92FF 0%,#245BFF 55%,#1740C9 100%)!important;box-shadow:inset 0 1px 1px rgba(255,255,255,.55),inset 0 -2px 3px rgba(0,0,0,.25),0 6px 16px -6px rgba(36,91,255,.8)!important;border-color:rgba(170,195,255,.65)!important}
#dock .tile::before{background:radial-gradient(120% 70% at 25% 0%,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 55%)!important;mix-blend-mode:normal;opacity:.6}
#dock .t-yt::before,#dock .t-fb::before,#dock .t-ig::before{opacity:0}
#dock .tile .stk{position:relative;z-index:2;width:82%;height:82%;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.28));transform:rotate(var(--tr,0deg));transition:transform .25s cubic-bezier(.3,1.5,.5,1);pointer-events:none;-webkit-user-drag:none;user-select:none}
#dock .t-yt{--tr:-6deg}#dock .t-fb{--tr:5deg}#dock .t-ig{--tr:-4deg}#dock .t-blog{--tr:6deg}#dock .t-pod{--tr:-5deg}#dock .t-call{--tr:4deg}#dock .t-mail{--tr:-6deg}
#dock .tile:hover .stk{transform:rotate(0deg) scale(1.06)}
#dock .tile .tip{z-index:6;background:#FFFFFF;color:#141414;box-shadow:0 10px 24px -10px rgba(0,0,0,.45)}

/* render lower sections only when they come near the screen */
#services,#testimonials{content-visibility:auto;contain-intrinsic-size:auto 1000px}

#dock .tile .stk{width:74%;height:74%}

/* brands label: bigger, per comment */
.brands small{font-size:clamp(16px,1.7vw,19px);font-weight:500;letter-spacing:-.01em;color:var(--muted);margin-bottom:6px}

/* features & collabs */
.feats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(min-width:860px){.feats{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}}
.feat{display:flex;flex-direction:column;height:100%;background:var(--card);border-radius:18px;overflow:hidden;box-shadow:var(--lift);color:var(--ink);text-decoration:none;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s}
.feat:hover{transform:translateY(-3px);box-shadow:0 22px 40px -24px rgba(0,0,0,.45)}
.feat:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.feat-th{position:relative;display:block;aspect-ratio:16/9;background:var(--g);overflow:hidden}
.ft-b .feat-th{--g:linear-gradient(135deg,#245BFF 0%,#6A92FF 100%)}
.ft-i .feat-th{--g:linear-gradient(135deg,#141414 0%,#3A3A40 100%)}
.ft-s .feat-th{--g:linear-gradient(135deg,#E9DDC4 0%,#F6EEDD 100%)}
.feat-th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feat-play{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(255,255,255,.94);box-shadow:0 6px 18px -6px rgba(0,0,0,.5);transition:transform .25s cubic-bezier(.3,1.5,.5,1)}
.feat-play::after{content:"";position:absolute;left:17px;top:13px;border-style:solid;border-width:9px 0 9px 14px;border-color:transparent transparent transparent #141414}
.feat:hover .feat-play{transform:scale(1.1)}
.feat-k{display:block;padding:12px 14px 0;font-size:12.5px;font-weight:500;color:var(--muted)}
.feat-t{display:block;padding:4px 14px 14px;font-size:15px;font-weight:500;line-height:1.35;letter-spacing:-.01em}

/* ===== multi-page additions ===== */
.hlink{text-decoration:none}
@view-transition{navigation:auto}
html.vt-about::view-transition-old(root){animation:none;mix-blend-mode:normal}
html.vt-about::view-transition-new(root){animation:vtIn .8s cubic-bezier(.7,0,.2,1) both;mix-blend-mode:normal}
@keyframes vtIn{from{clip-path:circle(0 at var(--vx,90%) var(--vy,40px))}to{clip-path:circle(150vmax at var(--vx,90%) var(--vy,40px))}}
@media (prefers-reduced-motion: reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* home: links out to the new pages */
.wm-more{display:inline-flex;align-items:center;gap:6px;margin-top:22px;font-size:15px;font-weight:500;color:var(--blue);text-decoration:none}
.wm-more:hover{text-decoration:underline;text-underline-offset:4px}
.svc2-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:22px}
.svc2-actions .svc2-cta{margin-top:0}
.svc2-more{font-size:14px;font-weight:500;color:var(--ink);text-decoration:none}
.svc2-more:hover{color:var(--blue)}
.all-link{text-align:center;margin-top:28px}
.all-link a{font-size:15px;font-weight:500;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:2px}
.all-link a:hover{color:var(--blue);border-color:var(--blue)}
.fnav{display:flex;flex-wrap:wrap;gap:6px 14px}
.fnav a{text-decoration:none}
.fnav a:hover{color:var(--ink)}
.ap-more{margin-top:28px;font-size:14px;color:var(--muted)}
.ap-more a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-2)}
.ap-more a:hover{color:var(--blue);border-color:var(--blue)}

/* sub pages */
.sp{max-width:1120px;margin:0 auto}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px 8px;font-size:13px;color:var(--muted);list-style:none;padding:0}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--faint)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.sp-hero{border-radius:var(--r-sheet);padding:clamp(28px,5.5vw,64px);position:relative;overflow:hidden}
.sp-hero h1{font-size:clamp(36px,6.4vw,76px);font-weight:500;letter-spacing:-.05em;line-height:1;margin-top:18px;max-width:16ch}
.sp-hero .wm-fig{font-size:clamp(48px,8vw,96px);margin-top:clamp(26px,4vw,40px)}
.sp-hero .wm-cap{font-size:15px;opacity:.9}
.sp-hero .lede{margin-top:18px;font-size:clamp(17px,2vw,21px);line-height:1.5;max-width:46ch;opacity:.92}
.sp-hero .ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.svc-hero{background:var(--sheet);color:var(--ink);border-top:6px solid var(--sc)}
.svc-hero .wm-cat{background:color-mix(in srgb,var(--sc) 16%,transparent);color:var(--ink)}
.sp-body{display:grid;gap:clamp(24px,4vw,56px);padding:clamp(40px,6vw,72px) clamp(4px,1vw,12px) 0}
@media(min-width:900px){.sp-body{grid-template-columns:200px minmax(0,680px);justify-content:center}}
.sp-toc{display:none}
@media(min-width:900px){.sp-toc{display:block;position:sticky;top:96px;align-self:start}}
.sp-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:4px;border-left:1px solid var(--line-2)}
.sp-toc a{display:block;padding:6px 14px;margin-left:-1px;border-left:2px solid transparent;font-size:14px;color:var(--muted);text-decoration:none}
.sp-toc a:hover,.sp-toc a.on{color:var(--ink);border-left-color:var(--blue)}
.sp-art section{scroll-margin-top:96px}
.sp-art section+section{margin-top:clamp(44px,6vw,64px)}
.sp-art h2{font-size:clamp(26px,3.4vw,36px);font-weight:500;letter-spacing:-.04em;line-height:1.1;margin-bottom:16px}
.sp-art h2 small{display:block;font-size:13px;font-weight:500;letter-spacing:0;color:var(--muted);margin-bottom:8px}
.sp-art p{font-size:clamp(17px,1.9vw,19px);line-height:1.7}
.sp-art p+p{margin-top:16px}
.sp-art .src{font-size:14px;color:var(--muted);margin-top:10px}
.sp-art .src a{color:var(--muted)}
.sp-art .nums{margin-top:18px}
.sp-art .csl{margin-top:22px}
.sp-ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
@media(min-width:560px){.sp-ticks{grid-template-columns:1fr 1fr}}
.sp-ticks li{display:flex;gap:10px;align-items:flex-start;background:var(--card);border-radius:14px;padding:12px 14px;box-shadow:var(--lift);font-size:15.5px}
.sp-ticks li::before{content:"";flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;background:var(--sc,var(--blue)) var(--tick,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E")) center/12px no-repeat}
:root[data-theme="dark"] .sc-ink{--tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E")}
.sp-fit{list-style:none;margin:18px 0 0;padding:0}
.sp-fit li{padding:12px 0 12px 18px;border-left:2px solid var(--sc,var(--blue));font-size:17px;font-weight:500}
.sp-fit li+li{margin-top:8px}
.sp-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:st}
@media(min-width:560px){.sp-steps{grid-template-columns:1fr 1fr}}
.sp-steps li{counter-increment:st;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.sp-steps li::before{content:counter(st,decimal-leading-zero);display:block;font-size:12px;font-weight:600;color:var(--sc,var(--blue))}
.sp-steps b{display:block;font-weight:500;font-size:17px;margin-top:4px}
.sp-steps span{display:block;font-size:14.5px;color:var(--muted);margin-top:4px;line-height:1.5}
.chainline{font-size:clamp(18px,2.4vw,22px);font-weight:500;letter-spacing:-.02em;line-height:1.4;margin:6px 0 18px}
.chainline i{font-style:normal;color:var(--muted)}
.sp-cards{display:grid;gap:12px}
@media(min-width:560px){.sp-cards{grid-template-columns:1fr 1fr}}
.hub{display:grid;gap:14px;padding-top:clamp(28px,4vw,44px)}
@media(min-width:640px){.hub{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.hub.three{grid-template-columns:repeat(3,1fr)}}
.hcard{display:flex;flex-direction:column;justify-content:space-between;min-height:220px;border-radius:24px;padding:22px;text-decoration:none;background:var(--wc-bg);color:var(--wc-fg);transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s}
.hcard:hover{transform:translateY(-3px);box-shadow:0 22px 44px -26px rgba(0,0,0,.6)}
.hcard .wm-cat{align-self:flex-start}
.hcard h3{font-size:clamp(22px,2.6vw,28px);font-weight:500;letter-spacing:-.035em;line-height:1.1;margin-top:14px}
.hcard .hfig{font-size:clamp(34px,4.4vw,48px);font-weight:500;letter-spacing:-.05em;line-height:1;margin-top:22px}
.hcard .hcap{font-size:13.5px;opacity:.85;margin-top:6px}
.hcard .hgo{font-size:14px;font-weight:500;margin-top:18px}
.hcard.svc{background:var(--card);color:var(--ink);border-top:5px solid var(--sc);box-shadow:var(--lift)}
.hcard.svc .wm-cat{background:color-mix(in srgb,var(--sc) 14%,transparent)}
.hcard.svc p{font-size:15.5px;color:var(--muted);margin-top:10px;line-height:1.5}
.sp-nav{display:grid;gap:12px;margin-top:clamp(56px,8vw,88px)}
@media(min-width:640px){.sp-nav{grid-template-columns:1fr 1fr}}
.sp-nav a{display:block;background:var(--card);box-shadow:var(--lift);border-radius:20px;padding:18px 20px;text-decoration:none}
.sp-nav a small{display:block;font-size:12.5px;color:var(--muted)}
.sp-nav a b{display:block;font-weight:500;font-size:18px;letter-spacing:-.02em;margin-top:4px}
.sp-nav a:hover b{color:var(--blue)}
.sp-nav a.next{text-align:right}
.sp-intro{text-align:center;padding:clamp(28px,5vw,56px) 12px 0}
.sp-intro h1{font-size:clamp(38px,6.6vw,80px);font-weight:500;letter-spacing:-.055em;line-height:1}
.sp-intro p{margin:16px auto 0;max-width:46ch;font-size:clamp(17px,2vw,20px);color:var(--muted);line-height:1.5}
.nf{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px}

/* consent */
.cnst{position:fixed;z-index:300;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));max-width:440px;margin:0 auto;background:var(--card);color:var(--ink);border:1px solid var(--line-2);border-radius:18px;padding:14px 16px;box-shadow:0 24px 48px -24px rgba(0,0,0,.45);display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font-size:14px;line-height:1.45}
.cnst p{flex:1 1 220px;margin:0}
.cnst div{display:flex;gap:8px}
.cnst button{font:inherit;font-size:13.5px;font-weight:500;border-radius:999px;padding:8px 14px;cursor:pointer;border:1px solid var(--line-2);background:transparent;color:var(--ink)}
.cnst button.ok{background:var(--ink);color:var(--page);border-color:var(--ink)}