/* ============================================================
   SLKTVES — Global component layer (all pages share this)
   ============================================================ */

/* ---------- Layout primitives ---------- */
/* horizontal gutter is forced so it survives even when a section class
   (e.g. .manifesto, .svc-hero) puts a padding shorthand on the same element */
.container{max-width:var(--maxw);margin:0 auto;padding-left:40px!important;padding-right:40px!important}
.section{padding:130px 0}
.section-sm{padding:90px 0}
@media(max-width:760px){.section{padding:88px 0}.container{padding-left:22px!important;padding-right:22px!important}}

.lede{font-size:clamp(20px,2.4vw,30px);line-height:1.45;font-weight:400;color:#c9cdd2;letter-spacing:-.01em}
.kicker{display:inline-flex;align-items:center;gap:.7em;color:var(--blue)}
.kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue)}
.section-num{font-family:var(--serif);font-size:15px;color:var(--muted);font-style:italic}

.display{font-weight:800;letter-spacing:-.035em;line-height:.95}
.h2{font-size:clamp(34px,5.2vw,72px);font-weight:800;letter-spacing:-.035em;line-height:.98}
.h2 em,.display em{font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:-.01em}
.ital-accent{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--blue)}

/* light sections invert ink/paper */
.light{background:var(--paper);color:var(--ink)}
.light .lede{color:#3b4046}
.light .section-num{color:var(--muted-d)}
.light ::selection{background:var(--ink);color:var(--paper)}

/* ---------- Custom cursor ---------- */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;z-index:9999;
  mix-blend-mode:difference;will-change:transform}
.cursor-dot{width:7px;height:7px;background:#fff;margin:-3.5px 0 0 -3.5px}
.cursor-ring{width:38px;height:38px;border:1px solid rgba(255,255,255,.7);margin:-19px 0 0 -19px;
  transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background .3s,border-color .3s}
.cursor-ring.hover{width:62px;height:62px;margin:-31px 0 0 -31px;background:rgba(168,204,253,.18);border-color:transparent}
.cursor-ring.down{width:30px;height:30px;margin:-15px 0 0 -15px}
@media(hover:none),(pointer:coarse){.cursor-dot,.cursor-ring{display:none}}

/* ---------- Header / Nav ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:400;transition:background .5s var(--ease),backdrop-filter .5s,border-color .5s;
  border-bottom:1px solid transparent}
.hdr-in{max-width:1480px;margin:0 auto;height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 40px}
.hdr.scrolled{background:rgba(16,17,17,.72);backdrop-filter:blur(18px) saturate(1.4);border-bottom-color:var(--ink-line)}
.light-nav.hdr.scrolled{background:rgba(253,254,255,.78);border-bottom-color:#e2e6ec}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.16em;font-size:17px}
.brand svg{width:21px;height:27px}
.nav{display:flex;align-items:center;gap:14px}
.nav-link{display:none}                 /* primary nav now lives in the fullscreen overlay */
.nav-cta{margin-left:2px}
@media(max-width:560px){.nav-cta{display:none}}

/* hamburger (all viewports) */
.burger{display:flex;width:48px;height:48px;border:1px solid rgba(255,255,255,.32);background:rgba(255,255,255,.04);border-radius:50%;
  color:var(--paper);cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;position:relative;z-index:401;
  transition:border-color .4s var(--ease),background .4s var(--ease)}
.burger:hover{border-color:var(--blue)}
.burger span{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;
  transition:transform .45s var(--ease),width .3s var(--ease),background .3s}
.burger:hover span{width:20px}
.light-nav .burger{border-color:#d8dce2;color:var(--ink)}
.burger.x{border-color:var(--blue);color:var(--paper)}
.burger.x span{width:18px}
.burger.x span:nth-child(1){transform:translateY(3.3px) rotate(45deg)}
.burger.x span:nth-child(2){transform:translateY(-3.3px) rotate(-45deg)}
body.menu-open .brand,body.menu-open .burger{color:var(--paper)}
body.menu-open .hdr{background:transparent!important;backdrop-filter:none!important;border-color:transparent!important}

/* ---------- Fullscreen menu overlay (desktop + mobile) ---------- */
.mmenu{position:fixed;inset:0;z-index:390;background:#0b0c0c;color:var(--paper);counter-reset:mm;
  display:flex;flex-direction:column;justify-content:center;padding:120px clamp(30px,7vw,128px) 0;
  clip-path:circle(0% at var(--mmx,calc(100% - 64px)) var(--mmy,42px));pointer-events:none;
  transition:clip-path .8s var(--ease-io)}
.mmenu.open{clip-path:circle(150% at var(--mmx,calc(100% - 64px)) var(--mmy,42px));pointer-events:auto}
.mmenu::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 82% 22%,rgba(168,204,253,.16),transparent 55%)}
.mmenu::after{content:"";position:absolute;right:-7%;bottom:-15%;width:48vw;height:48vw;pointer-events:none;opacity:.05;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 817.52 1055.24'%3E%3Cpolygon points='212.67,542.03 0,587.85 209.99,1055.24 782.82,931.81 693.36,516.64 817.52,489.89 711.97,0 34.71,145.93' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center/contain}
.mmenu>a{position:relative;z-index:1;display:inline-flex;align-items:baseline;gap:clamp(16px,2vw,30px);width:max-content;max-width:100%;
  font-family:var(--serif);font-weight:400;font-size:clamp(36px,7vw,84px);line-height:1.08;letter-spacing:-.02em;color:var(--paper);
  padding:clamp(3px,.55vw,8px) 0;counter-increment:mm;
  opacity:0;transform:translateY(30px);transition:opacity .6s var(--ease),transform .55s var(--ease),color .35s var(--ease)}
.mmenu>a::before{content:counter(mm,decimal-leading-zero);font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.12em;
  color:var(--muted);min-width:30px;transform:translateY(-.7em);transition:color .35s}
.mmenu>a::after{content:"↗";font-family:var(--sans);font-size:.32em;font-weight:500;color:var(--blue);align-self:center;margin-left:.12em;
  opacity:0;transform:translateX(-12px);transition:opacity .35s,transform .35s}
.mmenu>a[aria-current="page"]{color:var(--blue)}
.mmenu>a[aria-current="page"]::before{color:var(--blue)}
.mmenu.open>a{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .5s var(--ease),color .35s var(--ease)}
.mmenu.open>a:hover{transform:translateX(clamp(10px,1.6vw,22px));color:var(--blue)}
.mmenu>a:hover::before{color:var(--blue)}
.mmenu>a:hover::after{opacity:1;transform:translateX(0)}
.mmenu.open>a:nth-child(2){transition-delay:.06s}
.mmenu.open>a:nth-child(3){transition-delay:.12s}
.mmenu.open>a:nth-child(4){transition-delay:.18s}
.mmenu.open>a:nth-child(5){transition-delay:.24s}
.mmenu .mfoot{position:relative;z-index:1;margin-top:clamp(34px,5vh,64px);padding-bottom:46px;display:flex;gap:26px;flex-wrap:wrap;
  color:var(--muted);font-size:14.5px;opacity:0;transform:translateY(14px);transition:opacity .5s .42s,transform .5s .42s}
.mmenu.open .mfoot{opacity:1;transform:none}
body.menu-open{overflow:hidden}
@media(prefers-reduced-motion:reduce){.mmenu,.mmenu>a,.mmenu .mfoot{transition-duration:.001ms}}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:var(--paper);border-top:1px solid var(--ink-line);overflow:hidden}
.footer-cta{padding:120px 0 80px;text-align:center;position:relative}
.footer-cta h2{font-size:clamp(44px,9vw,150px);font-weight:800;letter-spacing:-.04em;line-height:.92}
.footer-cta h2 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--blue)}
.footer-cta .pill{margin-top:42px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding:64px 0;border-top:1px solid var(--ink-line)}
.footer-grid h4{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:20px;font-weight:600}
.footer-grid a{display:block;padding:7px 0;color:#c4c8ce;font-size:15px;transition:color .3s,padding-left .3s}
.footer-grid a:hover{color:var(--blue);padding-left:6px}
.footer-brand .brand{font-size:22px;margin-bottom:18px}
.footer-brand p{color:var(--muted);font-size:14.5px;line-height:1.6;max-width:280px}
.footer-bot{display:flex;justify-content:space-between;align-items:center;padding:28px 0;border-top:1px solid var(--ink-line);
  color:var(--muted);font-size:13.5px;flex-wrap:wrap;gap:14px}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr 1fr;gap:34px}.footer-brand{grid-column:1/-1}}

/* ---------- Page-transition curtain ---------- */
.curtain{position:fixed;inset:0;z-index:9000;background:var(--ink);display:flex;align-items:center;justify-content:center;
  transform:translateY(-100%);pointer-events:none;transition:transform .52s var(--ease-io)}
.curtain svg{width:52px;color:var(--blue);animation:cpulse 1.3s ease-in-out infinite}
.curtain.cover{transform:translateY(0)}
@keyframes cpulse{0%,100%{opacity:.45;transform:scale(.95)}50%{opacity:1;transform:scale(1)}}
@keyframes pagein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- Reveal-on-scroll (animation-based; commits end-state) ---------- */
html.anim .reveal:not(.in),
html.anim .reveal-up:not(.in){opacity:0}
html.anim [data-stagger]:not(.in)>*{opacity:0}
html.anim .clip-rise:not(.in){clip-path:inset(0 0 100% 0)}
.reveal.in{animation:revIn .9s var(--ease) both}
.reveal-up.in{animation:revUp 1s var(--ease) both}
[data-stagger].in>*{animation:revIn .8s var(--ease) both}
.clip-rise.in{animation:clipIn 1s var(--ease) both}
@keyframes revIn{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes revUp{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
@keyframes clipIn{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  html.anim .reveal:not(.in),html.anim .reveal-up:not(.in),html.anim [data-stagger]:not(.in)>*{opacity:1 !important}
  html.anim .clip-rise:not(.in){clip-path:none !important}
  .curtain{display:none !important}
}

/* ---------- Marquee ---------- */
@keyframes mqx{to{transform:translateX(-50%)}}
.marquee{display:flex;overflow:hidden;width:100%;user-select:none}
.marquee__row{display:flex;flex-shrink:0;min-width:100%;align-items:center;animation:mqx var(--mqs,28s) linear infinite}
.marquee:hover .marquee__row{animation-play-state:paused}
.marquee--rev .marquee__row{animation-direction:reverse}

/* focus visibility */
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;background:var(--blue);color:var(--ink);padding:12px 18px;z-index:9999;border-radius:0 0 8px 0}
.skip:focus{left:0}