/* =========================================================================
   doubleSix Studio - main.css (v2)
   Dark-luxe editorial with light-mode parity · real self-hosted fonts
   Hand-written. No frameworks. CSS custom-properties everywhere.
   ========================================================================= */

/* ---------- 0. RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;tab-size:4;scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
body{min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,picture,svg,video,canvas{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:0;outline:0}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
summary{cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
::selection{background:var(--accent);color:var(--accent-ink)}

/* ---------- 1. FONTS (self-hosted, Latin subset) ---------- */
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-600-italic.woff2") format("woff2");font-weight:600;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";src:url("../fonts/geist-400.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";src:url("../fonts/geist-500.woff2") format("woff2");font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";src:url("../fonts/geist-600.woff2") format("woff2");font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jbmono-400.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- 2. TOKENS, DARK (default) ---------- */
:root{
  --bg:           #0A0A0B;
  --bg-elev:      #111113;
  --bg-elev-2:    #161618;
  --ink:          #F4F4F1;
  --ink-dim:      #8A8A85;
  --ink-mute:     #5A5A55;
  --line:         #1C1C1E;
  --line-strong:  #26262A;
  --accent:       #C6FF3D;
  --accent-ink:   #0A0A0B;  /* text color on top of accent buttons */
  --accent-warm:  #FF5E1A;
  --grain-opacity: 0.06;
  --spot-color:   rgba(198,255,61,.06);

  --f-display: "Fraunces","Editorial New",Georgia,"Times New Roman",ui-serif,serif;
  --f-sans:    "Geist","Inter","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --f-mono:    "JetBrains Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --fs-mono: clamp(.7rem, .65rem + .15vw, .78rem);
  --fs-body: clamp(1rem, .96rem + .25vw, 1.125rem);
  --fs-lede: clamp(1.05rem, 1rem + .4vw, 1.35rem);
  --fs-h2:   clamp(2.4rem, 1.6rem + 4.5vw, 6.5rem);
  --fs-h3:   clamp(1.4rem, 1.05rem + 1.6vw, 2.4rem);
  --fs-hero: clamp(2.6rem, 1.2rem + 9vw, 10.5rem);

  --gut: clamp(1.25rem, 1rem + 2vw, 2.5rem);
  --pad: clamp(1.25rem, 1rem + 4vw, 4rem);
  --section-y: clamp(5rem, 4rem + 6vw, 10rem);

  --radius: 4px;
  --max: 1760px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-in: cubic-bezier(.6,.05,.6,.05);
}



/* ---------- 3. BASE ---------- */
html,body{background:var(--bg);color:var(--ink)}
body{
  font-family:var(--f-sans);
  font-size:var(--fs-body);
  font-weight:400;
  letter-spacing:-.005em;
  overflow-x:hidden;
}
.mono{font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim)}
em{font-family:var(--f-display);font-style:italic;font-weight:400;color:var(--ink)}
strong,b{font-weight:600}

/* ---------- 4. UTILITIES ---------- */
.skip-link{
  position:fixed;top:-100px;left:50%;transform:translateX(-50%);
  background:var(--accent);color:var(--accent-ink);padding:.6rem 1rem;font-family:var(--f-mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  border-radius:var(--radius);z-index:100;transition:top .25s var(--ease);
}
.skip-link:focus{top:1rem;outline:2px solid var(--ink);outline-offset:2px}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}

/* Scroll progress bar */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:210;pointer-events:none;background:transparent}
.scroll-progress i{display:block;height:100%;width:var(--p,0%);background:var(--accent);transform-origin:left;transition:width .1s linear}

/* Grain */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:90;
  opacity:var(--grain-opacity);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- 5. LOADER ---------- */
.loader{
  position:fixed;inset:0;z-index:200;background:var(--bg);color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  transition:transform .85s cubic-bezier(.7,.05,.2,1);
}
.loader.is-done{transform:translateY(-100%)}
.loader__inner{display:flex;flex-direction:column;align-items:center;gap:1.5rem;width:min(420px,80vw)}
.loader__mark{font-family:var(--f-display);font-size:clamp(2rem,5vw,3.5rem);letter-spacing:-.02em;display:flex;gap:.05em}
.loader__mark i{color:var(--accent);font-style:normal}
.loader__bar{width:100%;height:1px;background:var(--line-strong);overflow:hidden}
.loader__bar span{display:block;height:100%;width:0;background:var(--accent);transition:width .15s linear}
.loader__meta{display:flex;justify-content:space-between;width:100%}
.loader__meta .loader__count{color:var(--ink)}

/* ---------- 6. CURSOR ---------- */
.cursor{position:fixed;top:0;left:0;pointer-events:none;z-index:150;mix-blend-mode:difference;display:none}
@media (hover:hover) and (pointer:fine){
  body.cursor-on{cursor:none}
  body.cursor-on a,body.cursor-on button,body.cursor-on input,body.cursor-on select,body.cursor-on textarea,body.cursor-on summary{cursor:none}
  .cursor{display:block}
}
.cursor__dot{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--ink);transform:translate(-50%,-50%)}
.cursor__ring{
  position:absolute;width:34px;height:34px;border:1px solid var(--ink);border-radius:50%;
  transform:translate(-50%,-50%);transition:width .25s var(--ease),height .25s var(--ease),background .25s var(--ease),opacity .2s var(--ease);
  display:flex;align-items:center;justify-content:center;color:var(--ink);
}
.cursor__label{font-family:var(--f-mono);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;opacity:0;transition:opacity .2s var(--ease);color:var(--ink)}
.cursor.is-link .cursor__ring{width:48px;height:48px;background:color-mix(in srgb, var(--accent) 18%, transparent);border-color:var(--accent)}
.cursor.is-view .cursor__ring{width:80px;height:80px;background:var(--accent);border-color:var(--accent)}
.cursor.is-view .cursor__label{opacity:1;color:var(--accent-ink)}
.cursor.is-view .cursor__dot{opacity:0}

/* ---------- 7. NAV ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:80;
  display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:1.25rem;
  padding:1.5rem var(--pad);
  transition:padding .35s var(--ease),background-color .35s var(--ease),backdrop-filter .35s var(--ease),border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  padding:.85rem var(--pad);
  background:color-mix(in srgb, var(--bg) 65%, transparent);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav__brand{
  font-family:var(--f-display);font-size:clamp(1.15rem,1.8vw,1.5rem);letter-spacing:-.01em;
  display:inline-flex;gap:.05em;
}
.nav__brand i{color:var(--accent);font-style:normal}
.nav__links{display:flex;gap:2.25rem;justify-self:center}
.nav__links a{
  font-size:.95rem;letter-spacing:-.005em;color:var(--ink);position:relative;padding:.25rem 0;
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);
}
.nav__links a:hover::after,.nav__links a.is-active::after{transform:scaleX(1)}


.nav__burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;flex-direction:column;gap:6px;color:var(--ink)}
.nav__burger span{display:block;width:22px;height:1.5px;background:currentColor;transition:transform .3s var(--ease),opacity .3s var(--ease)}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}

@media (max-width:900px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:inline-flex}
  .nav{grid-template-columns:auto 1fr auto}
}

/* ---------- 8. MOBILE MENU (slides from right in v2) ---------- */
.menu{
  position:fixed;inset:0 0 0 auto;width:min(460px,100%);z-index:75;background:var(--bg);color:var(--ink);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:5.5rem var(--pad) 2rem;
  transform:translateX(100%);transition:transform .45s cubic-bezier(.7,.05,.2,1);
  visibility:hidden;border-left:1px solid var(--line);
}
.menu.is-open{transform:translateX(0);visibility:visible}
.menu__links{display:flex;flex-direction:column;gap:1rem;margin-top:0}
.menu__links a{
  font-family:var(--f-display);font-size:clamp(2rem,8vw,3.5rem);letter-spacing:-.02em;line-height:1;
  display:flex;align-items:baseline;gap:.8rem;color:var(--ink);
  opacity:0;transform:translateX(20px);transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.menu.is-open .menu__links a{opacity:1;transform:none}
.menu.is-open .menu__links a:nth-child(1){transition-delay:.10s}
.menu.is-open .menu__links a:nth-child(2){transition-delay:.16s}
.menu.is-open .menu__links a:nth-child(3){transition-delay:.22s}
.menu.is-open .menu__links a:nth-child(4){transition-delay:.28s}
.menu.is-open .menu__links a:nth-child(5){transition-delay:.34s}
.menu__links a i{color:var(--accent);font-size:.7rem;font-family:var(--f-mono);font-style:normal;letter-spacing:.1em}
.menu__foot{display:flex;flex-direction:column;gap:1rem;border-top:1px solid var(--line);padding-top:1.5rem}
.menu__email{font-size:1.05rem;color:var(--ink-dim)}

/* ---------- 9. BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.95rem 1.4rem;border-radius:999px;border:1px solid var(--line-strong);
  font-family:var(--f-sans);font-weight:500;
  font-size:.95rem;letter-spacing:-.005em;line-height:1;
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .25s var(--ease);
  position:relative;overflow:hidden;will-change:transform;color:var(--ink);
}
.btn svg{width:14px;height:14px;flex-shrink:0;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--accent{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn--accent:hover{filter:brightness(1.1)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn--ghost:hover{background:var(--bg-elev);border-color:var(--ink-dim)}
.btn--pill{padding:.65rem 1rem;font-size:.85rem}
.btn--full{width:100%;justify-content:center;padding:1.1rem 1.4rem}

/* ---------- 10. SECTIONS / SHARED ---------- */
section{padding:var(--section-y) var(--pad);max-width:var(--max);margin:0 auto}
.section-head{display:flex;flex-direction:column;gap:1rem;margin-bottom:clamp(2.5rem,4vw,5rem);max-width:min(900px,95%);position:relative}
.section-title{font-family:var(--f-display);font-size:var(--fs-h2);font-weight:400;letter-spacing:-.025em;line-height:.96}
.section-lede{color:var(--ink-dim);font-size:var(--fs-lede);max-width:60ch;margin-top:.25rem}
.section-kicker{align-self:flex-start}

/* Hairline between sections, draws left to right on enter */
section + section::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--line-strong);
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease);
}
section + section{position:relative;border-top:0}
section + section.is-drawn::before{transform:scaleX(1)}

/* Line-mask reveal */
.line{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em;padding-top:.04em}
.line__inner{display:inline-block;transform:translateY(110%);transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.is-in .line__inner{transform:translateY(0)}

/* Word reveal, JS wraps words in .word spans */
.word{display:inline-block;overflow:hidden}
.word__inner{display:inline-block;transform:translateY(110%);opacity:0;transition:transform .7s var(--ease), opacity .7s var(--ease)}
.is-in .word__inner{transform:translateY(0);opacity:1}

/* Generic reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* ---------- 11. HERO ---------- */
.hero{
  min-height:100vh;min-height:100svh;
  position:relative;display:flex;flex-direction:column;justify-content:center;
  padding-top:max(7rem,12vh);padding-bottom:6rem;overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;
  background:radial-gradient(600px circle at var(--mx,50%) var(--my,50%), var(--spot-color), transparent 60%);
  transition:opacity .4s var(--ease);
}
.hero.hero--spot::before{opacity:1}

.hero__bg{position:absolute;inset:0;z-index:0;color:var(--ink-mute);pointer-events:none}
.hero__glow{position:absolute;width:60vmin;height:60vmin;border-radius:50%;filter:blur(60px);opacity:.55;animation:drift 18s ease-in-out infinite alternate}
.hero__glow--a{top:10%;left:55%;background:radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%)}
.hero__glow--b{bottom:5%;left:5%;background:radial-gradient(circle, color-mix(in srgb, var(--accent-warm) 16%, transparent), transparent 65%);animation-delay:-9s}
@keyframes drift{0%{transform:translate(-3vw,-2vh) scale(1)}100%{transform:translate(4vw,3vh) scale(1.1)}}
.hero__orbit{position:absolute;right:-8vw;top:50%;transform:translateY(-50%);width:min(80vh,760px);opacity:.35}
.hero__orbit-dot{transform-origin:0 0;animation:orbit 22s linear infinite}
@keyframes orbit{to{transform:rotate(360deg)}}

.hero__inner{position:relative;z-index:2;display:flex;flex-direction:column;gap:clamp(1.5rem,3vw,2.5rem)}
.hero__kicker{display:flex;align-items:center;gap:1rem;color:var(--ink-dim);flex-wrap:wrap}
.hero__kicker [aria-hidden]{color:var(--accent)}
.hero__title{
  font-family:var(--f-display);font-weight:400;
  font-size:var(--fs-hero);line-height:.92;letter-spacing:-.035em;
  max-width:18ch;
}
.hero__title em.kinetic{
  color:var(--accent);font-style:italic;display:inline-block;position:relative;
  vertical-align:baseline;
}
/* 8-word rotator: relative container with absolutely positioned words stacked on top of each other */
.hero__title .kinetic-rotator{
  color:var(--accent);
  position:relative;
  display:inline-block;
  vertical-align:baseline;
  /* reserve width of widest word ("obsessed.") so surrounding layout doesn't shift */
  min-width:6ch;
  /* first word sits in normal flow to preserve baseline, siblings stack on top */
}
.hero__title .kinetic-rotator i{
  font-style:italic;
  white-space:nowrap;
  opacity:0;
  transform:translateY(14px) skewY(3deg);
  animation:word-cycle 24s cubic-bezier(.7,.05,.2,1) infinite;
}
.hero__title .kinetic-rotator i:first-child{
  /* first child sits in flow to give the container its height / baseline */
  position:relative;
}
.hero__title .kinetic-rotator i:not(:first-child){
  position:absolute;left:0;top:0;
}
.hero__title .kinetic-rotator i:nth-child(1){animation-delay:.8s}
.hero__title .kinetic-rotator i:nth-child(2){animation-delay:3.8s}
.hero__title .kinetic-rotator i:nth-child(3){animation-delay:6.8s}
.hero__title .kinetic-rotator i:nth-child(4){animation-delay:9.8s}
.hero__title .kinetic-rotator i:nth-child(5){animation-delay:12.8s}
.hero__title .kinetic-rotator i:nth-child(6){animation-delay:15.8s}
.hero__title .kinetic-rotator i:nth-child(7){animation-delay:18.8s}
.hero__title .kinetic-rotator i:nth-child(8){animation-delay:21.8s}
@keyframes word-cycle{
  0%   {opacity:0;transform:translateY(14px) skewY(3deg)}
  2.5% {opacity:1;transform:translateY(0) skewY(0)}
  10%  {opacity:1;transform:translateY(0) skewY(0)}
  12.5%{opacity:0;transform:translateY(-14px) skewY(-3deg)}
  100% {opacity:0;transform:translateY(-14px) skewY(-3deg)}
}
.hero__sub{color:var(--ink-dim);font-size:var(--fs-lede);max-width:54ch}
.hero__ctas{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}

.hero__scroll{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.75rem;z-index:3}
.hero__scroll .mono{writing-mode:vertical-rl;letter-spacing:.2em}
.hero__scroll-line{width:1px;height:60px;background:var(--line-strong);position:relative;overflow:hidden}
.hero__scroll-line i{position:absolute;left:0;right:0;top:-100%;height:100%;background:var(--accent);animation:scrollFill 2s var(--ease) infinite}
@keyframes scrollFill{0%{top:-100%}100%{top:100%}}

@media (max-width:560px){
  .hero{padding-top:max(6rem,9vh);padding-bottom:4.5rem;padding-left:1.75rem;padding-right:1.75rem}
  .hero__inner{gap:2rem}
  .hero__title{letter-spacing:-.02em;line-height:1;font-size:clamp(2.1rem,10vw,3.2rem);max-width:none}
  .hero__kicker{font-size:.72rem;gap:.65rem}
  .hero__sub{font-size:1.05rem;line-height:1.5;max-width:none}
  .hero__scroll{display:none}
}

/* ---------- 12. TRUSTED MARQUEE ---------- */
.trusted{padding-top:0;padding-bottom:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);max-width:none}
.trusted__label{padding:1.25rem var(--pad) 0;color:var(--ink-mute)}
.marquee{overflow:hidden;width:100%;mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;gap:4rem;align-items:center;width:max-content;animation:marqueeL 50s linear infinite;padding:1.25rem 0}
.marquee__track--right{animation:marqueeR 60s linear infinite}

@keyframes marqueeL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marqueeR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.trusted__logo{
  font-family:var(--f-mono);font-size:clamp(.95rem,1.4vw,1.1rem);letter-spacing:.12em;
  color:var(--ink-dim);opacity:.55;transition:opacity .3s var(--ease),color .3s var(--ease);white-space:nowrap;
}
.trusted__logo i{color:var(--accent);font-style:normal;margin:0 .25em}
.trusted__logo:hover{opacity:1;color:var(--ink)}

/* ---------- 13. KEYWORD MARQUEE (between sections) ---------- */
.kw-marquee{
  overflow:hidden;width:100%;padding:clamp(1.5rem,3vw,3rem) 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
}
.kw-marquee__track{display:flex;width:max-content;animation:marqueeL 60s linear infinite}
.kw-marquee__track--right{animation:marqueeR 70s linear infinite}
.kw-marquee__track > span{
  font-family:var(--f-display);font-style:italic;font-size:clamp(2.5rem,6vw,6rem);
  letter-spacing:-.02em;line-height:1;white-space:nowrap;padding-right:2rem;
  color:transparent;-webkit-text-stroke:1px var(--ink);
}

/* ---------- 14. SERVICES ---------- */

/* =================================================================
   BASE (mobile + tablet): card grid. Do NOT touch, works perfectly.
   ================================================================= */
.services__grid{
  display:grid;grid-template-columns:repeat(6,1fr);
  gap:1px;background:var(--line);border:1px solid var(--line);
}
.svc{
  background:var(--bg);
  padding:clamp(1.25rem,2vw,2rem);
  display:flex;flex-direction:column;gap:.75rem;
  position:relative;overflow:hidden;
  min-height:280px;
}
.svc--flagship{padding:clamp(1.5rem,2.5vw,2.5rem)}
.svc:hover{background:var(--bg-elev)}
.svc.is-active{background:var(--bg-elev);border-color:var(--accent)}
.svc.is-active h3{color:var(--accent)}
.svc h3{font-family:var(--f-display);font-size:var(--fs-h3);font-weight:400;letter-spacing:-.02em;line-height:1.05;position:relative;display:inline-block;align-self:flex-start;max-width:100%}
.services__grid .svc:not(.svc--flagship) h3{font-size:clamp(.9rem,.6rem + .35vw,1.05rem);line-height:1.25;letter-spacing:-.01em}
.svc h3::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.svc:hover h3::after{transform:scaleX(1)}
.svc p{color:var(--ink-dim);font-size:.96rem;line-height:1.55}
.svc__stat{margin-top:auto;color:var(--ink-mute);opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.svc:hover .svc__stat{opacity:1;transform:none}

.svc--flagship{
  grid-column:span 4;grid-row:span 2;
  display:grid;grid-template-columns:1.1fr 1fr;gap:2rem;align-items:start;min-height:520px;
}
.svc--flagship .svc__head{display:flex;flex-direction:column;gap:1rem;grid-column:1}
.svc--flagship .svc__copy{grid-column:1;color:var(--ink-dim);font-size:1.05rem;line-height:1.55;max-width:48ch}
.svc--flagship .svc__list{grid-column:1;display:flex;flex-direction:column;gap:.4rem;color:var(--ink-dim);margin-top:1rem}
.svc--flagship .svc__list li{display:flex;align-items:center;gap:.6rem}
.svc--flagship .svc__list li::before{content:"";width:6px;height:6px;background:var(--accent);display:inline-block;border-radius:50%}
.svc--flagship .svc__viz{grid-column:2;grid-row:1 / span 4;align-self:stretch;display:flex;align-items:center;justify-content:center;padding:1rem}
.svc--flagship .svc__stat{grid-column:1 / -1}
.svc--flagship h3{font-size:clamp(2rem,3.5vw,3.4rem)}

.browser{
  width:100%;max-width:420px;border:1px solid var(--line-strong);border-radius:6px;background:var(--bg-elev-2);
  overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
  transform:rotate(-1.5deg);transition:transform .6s var(--ease);
}
.svc--flagship:hover .browser{transform:rotate(0deg)}
.browser__bar{display:flex;align-items:center;gap:.4rem;padding:.6rem .8rem;border-bottom:1px solid var(--line-strong);background:var(--bg-elev)}
.browser__bar i{width:8px;height:8px;border-radius:50%;background:var(--line-strong)}
.browser__bar i:first-child{background:var(--accent-warm)}
.browser__bar span{margin-left:auto;font-family:var(--f-mono);font-size:.65rem;color:var(--ink-mute);letter-spacing:.05em}
.browser__body{padding:1rem;display:flex;flex-direction:column;gap:.75rem}
.browser__hero{display:flex;flex-direction:column;gap:.4rem;padding:1rem;background:var(--bg);border:1px solid var(--line);border-radius:4px;animation:scrollPanel 8s ease-in-out infinite}
.browser__hero span{height:14px;background:var(--ink-mute);border-radius:2px;opacity:.5}
.browser__hero span:first-child{width:80%;height:18px;background:var(--accent);opacity:.9}
.browser__hero span:nth-child(2){width:60%}
.browser__hero span:nth-child(3){width:30%;height:10px;background:var(--ink-dim);opacity:.4}
.browser__row{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}
.browser__row i{height:48px;background:var(--bg);border:1px solid var(--line);border-radius:3px}
@keyframes scrollPanel{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.svc--bundle{background:linear-gradient(135deg,var(--bg) 0%,var(--bg-elev) 100%)}

@media (max-width:1100px){
  .services__grid{grid-template-columns:repeat(4,1fr)}
  .svc--flagship{grid-column:span 4;grid-template-columns:1fr}
  .svc--flagship .svc__viz{grid-column:1;grid-row:auto;padding-top:0}
  .svc--desktop-only{display:none}
}
@media (max-width:680px){
  .services__grid{grid-template-columns:repeat(2,1fr)}
  .svc--flagship{grid-column:span 2;min-height:auto}
}

/* =================================================================
   DESKTOP ≥1101px: editorial ledger (takes over entirely)
   A single-column vertical index. Full-width rows.
   No cramped titles. Hover reveals accent + stat shift.
   ================================================================= */
@media (min-width:1101px){
  /* Reset the grid to a vertical ledger */
  .services__grid{
    display:flex;flex-direction:column;
    background:transparent;border:0;gap:0;
    border-top:1px solid var(--line);
  }

  /* Each service becomes a full-width row */
  .svc,
  .svc--flagship{
    display:grid;
    grid-template-columns: 7ch minmax(0, 1.6fr) minmax(0, 2fr) auto;
    grid-column-gap:clamp(1.5rem, 3vw, 3.5rem);
    align-items:center;
    padding:clamp(1.5rem, 2.2vw, 2.2rem) clamp(1rem, 2vw, 2rem);
    min-height:auto;
    border-bottom:1px solid var(--line);
    background:transparent;
    grid-row:auto !important;
    grid-column:auto !important;
    overflow:visible;
    transition:padding-left .5s var(--ease), background-color .35s var(--ease);
    position:relative;
  }

  /* Flagship: same layout but accent treatment */
  .svc--flagship{
    background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 4%, transparent) 0%, transparent 45%);
  }

  /* Bundle (Free Domain & Hosting at slot 03): subtle tint */
  .svc--bundle{
    background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 3%, transparent) 0%, transparent 40%);
  }

  /* Hover: row shifts right, subtle glow */
  .svc:hover{
    background:color-mix(in srgb, var(--bg-elev) 50%, transparent);
    padding-left:clamp(2rem, 3vw, 3rem);
  }

  /* Column 1: the big mono number */
  .svc > .mono,
  .svc--flagship .svc__head .mono{
    grid-column:1;
    font-family:var(--f-mono);
    font-size:.85rem;
    color:var(--ink-mute);
    letter-spacing:.1em;
    align-self:center;
    transition:color .35s var(--ease);
  }
  .svc:hover > .mono,
  .svc--flagship:hover .svc__head .mono{color:var(--accent)}

  /* Column 2: the title (display serif, generous) */
  .svc h3{
    grid-column:2;
    display:block !important;
    align-self:center;
    font-family:var(--f-display);
    font-size:clamp(1.5rem, 2.2vw, 2.4rem);
    font-weight:400;
    line-height:1.05;
    letter-spacing:-.02em;
    color:var(--ink);
    max-width:none;
    margin:0;
    padding:0;
    white-space:normal;
    transition:color .35s var(--ease);
  }
  .svc h3::after{display:none}
  .svc:hover h3{color:var(--accent)}

  /* Flagship title: bigger, and the "01 / FLAGSHIP" mono sits above */
  .svc--flagship .svc__head{
    grid-column:2;
    flex-direction:column;
    gap:.4rem;
    align-self:center;
  }
  .svc--flagship .svc__head .mono{
    grid-column:auto;
    font-size:.7rem;
    margin-bottom:.1rem;
  }
  .svc--flagship h3{
    grid-column:auto;
    font-size:clamp(1.8rem, 2.8vw, 3rem);
  }

  /* Column 3: description copy */
  .svc p,
  .svc--flagship .svc__copy{
    grid-column:3;
    color:var(--ink-dim);
    font-size:.98rem;
    line-height:1.55;
    max-width:52ch;
    margin:0;
    align-self:center;
  }

  /* Flagship has extra bullet list and viz: hide list, hide viz on ledger (cleaner) */
  .svc--flagship .svc__list,
  .svc--flagship .svc__viz{display:none}

  /* Column 4: the stat tag (always visible on ledger, not hover-only) */
  .svc__stat{
    grid-column:4;
    margin:0;
    align-self:center;
    opacity:1;
    transform:none;
    font-size:.7rem;
    color:var(--ink-mute);
    letter-spacing:.08em;
    text-align:right;
    white-space:nowrap;
    transition:color .35s var(--ease), transform .35s var(--ease);
  }
  .svc:hover .svc__stat{color:var(--ink);transform:translateX(-4px)}

  /* Arrow accent that appears on hover, anchored at far right */
  .svc::after{
    content:"→";
    position:absolute;
    right:clamp(1rem, 2vw, 2rem);
    top:50%;
    transform:translate(20px, -50%);
    opacity:0;
    color:var(--accent);
    font-size:1.3rem;
    font-family:var(--f-display);
    transition:transform .4s var(--ease), opacity .4s var(--ease);
    pointer-events:none;
  }
  .svc:hover::after{opacity:1;transform:translate(0, -50%)}

  /* Auto-highlight (mirrors :hover state, driven by JS adding .is-active one row at a time) */
  .svc.is-active{
    background:color-mix(in srgb, var(--bg-elev) 50%, transparent);
    padding-left:clamp(2rem, 3vw, 3rem);
  }
  .svc.is-active > .mono,
  .svc--flagship.is-active .svc__head .mono{color:var(--accent)}
  .svc.is-active h3{color:var(--accent)}
  .svc.is-active .svc__stat{color:var(--ink);transform:translateX(-4px)}
  .svc.is-active::after{opacity:1;transform:translate(0, -50%)}

  /* When the user hovers anything in the grid, suspend the auto-highlight on non-hovered rows */
  .services__grid:hover .svc.is-active:not(:hover){
    background:transparent;
    padding-left:clamp(1rem, 2vw, 2rem);
  }
  .services__grid:hover .svc.is-active:not(:hover) > .mono,
  .services__grid:hover .svc.is-active:not(:hover) h3{color:var(--ink)}
  .services__grid:hover .svc.is-active:not(:hover)::after{opacity:0;transform:translate(20px, -50%)}

  /* Reveal the bundle styling more distinctly */
  .svc--bundle .svc__stat{color:var(--accent)}

  /* Reveal animation: rows slide in from left in sequence */
  .svc.reveal{transform:translateX(-20px);opacity:0}
  .svc.reveal.is-in{transform:translateX(0);opacity:1}
}


/* ---------- 15. FEATURED WORK ---------- */
.work__list{display:flex;flex-direction:column;gap:clamp(3rem,6vw,7rem)}
.case{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(1.5rem,3vw,4rem);align-items:center}
.case--reverse{grid-template-columns:1fr 1.25fr}
.case--reverse .case__media{order:2}
.case__media{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--bg-elev);position:relative;border:1px solid var(--line);border-radius:var(--radius)}
.case__art{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}

.case__art--a{background:radial-gradient(ellipse at 30% 20%, color-mix(in srgb, var(--accent) 15%, transparent),transparent 60%),linear-gradient(180deg,var(--bg-elev),var(--bg));padding:2rem;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:1rem}
.case__chrome{display:flex;gap:.4rem;margin-bottom:.5rem}
.case__chrome i{width:8px;height:8px;border-radius:50%;background:var(--line-strong)}
.case__chart{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:1rem;display:flex;align-items:center;justify-content:center}
.case__chart svg{width:100%;height:auto}
.case__pills{display:flex;gap:.5rem;flex-wrap:wrap}
.case__pills span{font-family:var(--f-mono);font-size:.7rem;padding:.35rem .6rem;border:1px solid var(--line-strong);border-radius:999px;color:var(--ink-dim);background:var(--bg-elev)}

.case__art--b{background:linear-gradient(160deg,#1a1308,#0a0807 80%);padding:0}
.case__poster{display:flex;flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:clamp(1rem,3vw,2.5rem);color:#e7d6b8}
.case__poster-eyebrow{color:color-mix(in srgb, currentColor 55%, transparent);letter-spacing:.15em}
.case__poster-title{font-family:var(--f-display);font-style:italic;font-size:clamp(2rem,5vw,4.5rem);line-height:.9;letter-spacing:-.02em}
.case__poster-foot{display:flex;justify-content:space-between;color:color-mix(in srgb, currentColor 55%, transparent);letter-spacing:.15em}

.case__art--c{background:var(--bg);padding:1.5rem;flex-direction:column;gap:1rem;align-items:stretch;justify-content:center}
.case__grid-art{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;flex:1}
.case__grid-art div{background:var(--bg-elev);border:1px solid var(--line);border-radius:3px;animation:pulse 4s var(--ease) infinite}
.case__grid-art div:nth-child(2){background:var(--accent);opacity:.9;animation-delay:.4s}
.case__grid-art div:nth-child(7){background:var(--accent-warm);opacity:.7;animation-delay:.8s}
.case__grid-art div:nth-child(11){background:var(--ink);opacity:.2;animation-delay:1.2s}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:.85}}
.case__badge{align-self:flex-start;color:var(--accent);font-size:.65rem;letter-spacing:.15em;padding:.3rem .55rem;border:1px solid var(--accent);border-radius:999px}

.case__art--d{background:var(--ink);color:var(--bg);flex-direction:column;justify-content:center;align-items:center;gap:1rem;padding:2rem;text-align:center}
.case__type{font-family:var(--f-display);font-size:clamp(2.5rem,7vw,5rem);letter-spacing:-.04em;line-height:.9;font-weight:400}
.case__type span{opacity:.5}
.case__type-sub{color:color-mix(in srgb, currentColor 55%, transparent);letter-spacing:.15em}

.case__meta{display:flex;flex-direction:column;gap:1rem}
.case__meta h3{font-family:var(--f-display);font-size:clamp(1.7rem,3vw,2.8rem);font-weight:400;letter-spacing:-.025em;line-height:1;transition:color .3s var(--ease)}
.case:hover .case__meta h3{color:var(--accent)}
.case__copy{color:var(--ink-dim);font-size:1.05rem;max-width:50ch}
.case__tags{display:flex;flex-wrap:wrap;gap:.6rem;color:var(--ink-mute)}
.case__tags li{padding:.3rem .65rem;border:1px solid var(--line);border-radius:999px}
.case__view{display:inline-flex;align-items:center;gap:.4rem;font-size:.95rem;color:var(--ink);position:relative;width:fit-content;padding-bottom:2px}
.case__view::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.case__view:hover::after{transform:scaleX(1);transform-origin:left}

@media (max-width:800px){
  .case,.case--reverse{grid-template-columns:1fr}
  .case--reverse .case__media{order:0}
}

/* Work end-cap */
.work__endcap{
  margin-top:clamp(3rem,5vw,5rem);padding-top:clamp(2.5rem,4vw,4rem);
  border-top:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:1.25rem;text-align:center;
}
.work__endcap-eyebrow{color:var(--ink-mute);letter-spacing:.2em}
.work__endcap-title{font-family:var(--f-display);font-weight:400;font-size:clamp(2rem,5vw,4rem);letter-spacing:-.02em;line-height:1}

/* ---------- 16. PROCESS ---------- */
.process__list{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.step{background:var(--bg);padding:clamp(1.5rem,2.5vw,2.5rem);display:flex;flex-direction:column;gap:1rem;min-height:300px}
.step__num{font-family:var(--f-display);font-size:clamp(3rem,6vw,5rem);line-height:1;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px var(--accent)}
.step h3{font-family:var(--f-display);font-size:var(--fs-h3);font-weight:400;letter-spacing:-.02em}
.step p{color:var(--ink-dim);margin-top:auto}
@media (max-width:900px){.process__list{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.process__list{grid-template-columns:1fr}}

/* ---------- 17. STATS ---------- */
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,2rem)}
.stats__item{display:flex;flex-direction:column;gap:.75rem;padding:1.5rem 0;border-top:1px solid var(--line)}
.stats__num{font-family:var(--f-display);font-size:clamp(3rem,8vw,7rem);line-height:.9;letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.stats__num--static{color:var(--accent)}
@media (max-width:800px){
  .stats__grid{grid-template-columns:repeat(2,1fr);gap:clamp(1.5rem,3vw,2rem)}
  .stats__num{font-size:clamp(3rem,10vw,5rem)}
}

/* ---------- 18. WHY ---------- */
.why__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.pillar{background:var(--bg);padding:clamp(1.5rem,2.5vw,2.5rem);display:flex;flex-direction:column;gap:1rem;min-height:280px}
.pillar__icon{width:36px;height:36px;color:var(--accent)}
.pillar h3{font-family:var(--f-display);font-size:1.6rem;font-weight:400;letter-spacing:-.02em;line-height:1.1}
.pillar p{color:var(--ink-dim);margin-top:auto;font-size:.95rem}
@media (max-width:1000px){.why__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.why__grid{grid-template-columns:1fr}}

/* ---------- 19. TESTIMONIALS ---------- */
.quotes__row{padding:.75rem 0}
.quotes__row .marquee__track{gap:1.5rem;padding:.5rem 0}
.quote{
  background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5rem;width:min(420px,80vw);flex-shrink:0;display:flex;flex-direction:column;gap:1rem;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
}
.quote blockquote{font-family:var(--f-display);font-size:1.15rem;line-height:1.4;letter-spacing:-.01em;font-style:italic}
.quote figcaption{display:flex;align-items:center;gap:.75rem;color:var(--ink-dim);font-size:.85rem}
.quote figcaption b{color:var(--ink);font-weight:500;font-style:normal;display:block}
.quote figcaption i{color:var(--ink-mute);font-style:normal;font-size:.75rem}
.quote__avatar{width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:1.1rem;flex-shrink:0}
@media (max-width:900px){
  .quotes__row--desktop{display:none}
}

/* ---------- 20. PACKAGES ---------- */
.pricing__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.tier{
  position:relative;padding:clamp(1.75rem,2.5vw,2.5rem);
  background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);
  display:flex;flex-direction:column;gap:1.25rem;
  transition:transform .4s var(--ease),border-color .4s var(--ease);
}
.tier:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.tier--featured{border-color:var(--accent);background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, transparent),transparent)}
.tier__ribbon{position:absolute;top:-1px;right:1.5rem;background:var(--accent);color:var(--accent-ink);padding:.4rem .75rem;border-radius:0 0 4px 4px;font-size:.65rem;letter-spacing:.12em}
.tier__head{display:flex;flex-direction:column;gap:.5rem}
.tier h3{font-family:var(--f-display);font-size:clamp(2rem,3vw,2.6rem);font-weight:400;letter-spacing:-.02em;line-height:1}
.tier__price{display:flex;align-items:baseline;gap:.5rem;font-family:var(--f-display);font-size:clamp(1.6rem,2.5vw,2rem);letter-spacing:-.02em}
.tier__price i{color:var(--ink-dim);font-style:normal}
.tier__copy{color:var(--ink-dim);font-size:.95rem}
.tier__list{display:flex;flex-direction:column;gap:.6rem;font-size:.95rem;color:var(--ink-dim)}
.tier__list li{display:flex;gap:.6rem;align-items:flex-start}
.tier__list li::before{content:"+";color:var(--accent);font-family:var(--f-mono);flex-shrink:0;line-height:1.5}
.tier .btn{margin-top:auto}
@media (max-width:900px){.pricing__grid{grid-template-columns:1fr}}

/* ---------- 21. FAQ ---------- */
.faq__list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.5rem 0;font-family:var(--f-display);font-size:clamp(1.2rem,2vw,1.7rem);font-weight:400;letter-spacing:-.015em;transition:color .3s var(--ease)}
.faq__item:hover summary{color:var(--accent)}
.faq__item summary i{position:relative;width:18px;height:18px;flex-shrink:0}
.faq__item summary i::before,.faq__item summary i::after{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:currentColor;transition:transform .35s var(--ease)}
.faq__item summary i::after{transform:rotate(90deg)}
.faq__item[open] summary i::after{transform:rotate(0)}
.faq__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.faq__item[open] .faq__body{grid-template-rows:1fr}
.faq__body > p{overflow:hidden;color:var(--ink-dim);padding:0 0 1.5rem;max-width:70ch;font-size:1rem;line-height:1.6}

/* ---------- 22. CONTACT ---------- */
.contact__grid{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(2rem,4vw,5rem)}
@media (max-width:900px){.contact__grid{grid-template-columns:1fr}}

.form{display:flex;flex-direction:column;gap:1.5rem}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
@media (max-width:600px){.form__row{grid-template-columns:1fr}}

.field{position:relative;display:block;padding-top:2rem}
.field input,.field select,.field textarea{
  width:100%;padding:.5rem 0;background:transparent;border:0;color:var(--ink);font-size:1rem;font-family:var(--f-sans);
  border-bottom:1px solid var(--line-strong);
}
.field textarea{resize:vertical;min-height:90px;line-height:1.5}
.field select{appearance:none;-webkit-appearance:none;background:transparent;padding-right:1.5rem;cursor:pointer}
.field--select::after{content:"";position:absolute;right:0;bottom:1.1rem;width:8px;height:8px;border-right:1px solid var(--ink-dim);border-bottom:1px solid var(--ink-dim);transform:rotate(45deg);pointer-events:none}
.field option{background:var(--bg);color:var(--ink)}
.field__label{position:absolute;left:0;top:2.45rem;color:var(--ink-dim);font-size:1rem;pointer-events:none;transition:transform .3s var(--ease),color .3s var(--ease),font-size .3s var(--ease);transform-origin:left center}
.field__label i{color:var(--ink-mute);font-style:normal;font-size:.75em}
.field__line{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}

.field input:focus + .field__label,
.field input:not(:placeholder-shown) + .field__label,
.field textarea:focus + .field__label,
.field textarea:not(:placeholder-shown) + .field__label,
.field--select select:focus + .field__label,
.field--select select:valid + .field__label{
  transform:translateY(-2.1rem) scale(.78);color:var(--accent);
}
.field input:focus ~ .field__line,
.field textarea:focus ~ .field__line,
.field select:focus ~ .field__line{transform:scaleX(1)}

.field.is-error .field__line{background:var(--accent-warm);transform:scaleX(1)}
.field.is-error .field__label{color:var(--accent-warm)}

.form__consent{color:var(--ink-mute);text-align:center;letter-spacing:.04em;margin-top:-.5rem}
.form__status{min-height:1.2em;margin-top:-.25rem;color:var(--accent);text-align:center}
.form__status.is-error{color:var(--accent-warm)}

.contact__side{display:flex;flex-direction:column;gap:1.25rem;padding-top:1.5rem}
.contact__email{font-family:var(--f-display);font-size:clamp(1.4rem,2.6vw,2.2rem);line-height:1;letter-spacing:-.025em;color:var(--ink);transition:color .3s var(--ease);user-select:all}
.contact__email:hover{color:var(--accent)}
.contact__wa{display:inline-flex;align-items:center;gap:.6rem;color:var(--ink);padding:.85rem 1.25rem;border:1px solid var(--line-strong);border-radius:999px;align-self:flex-start;transition:background-color .3s var(--ease),color .3s var(--ease)}
.contact__wa:hover{background:#25D366;color:#fff;border-color:#25D366}
.contact__hours{color:var(--ink-mute);line-height:1.5}

/* ---------- 23. FOOTER ---------- */
.footer{padding:clamp(3rem,5vw,5rem) var(--pad) 1.5rem;border-top:1px solid var(--line)}
.footer__top{display:grid;grid-template-columns:1.4fr 2fr;gap:clamp(2rem,4vw,4rem);max-width:var(--max);margin:0 auto}
.footer__brand{font-family:var(--f-display);font-size:clamp(2.5rem,8vw,6rem);letter-spacing:-.03em;display:inline-flex;line-height:.9;align-items:baseline}
.footer__brand i{color:var(--accent);font-style:normal}
.footer__tag{color:var(--ink-dim);max-width:30ch;margin-top:.75rem}
.footer__cols{display:grid;grid-template-columns:1fr 1.3fr 1.5fr 1.6fr;gap:clamp(1.5rem,2.5vw,2.5rem);align-items:start}
.footer__cols div{display:flex;flex-direction:column;gap:.6rem}
.footer__cols a{color:var(--ink-dim);font-size:.9rem;transition:color .25s var(--ease);width:fit-content;white-space:nowrap}
.footer__cols a:hover{color:var(--accent)}
.footer__cols .footer__current{color:var(--ink-mute);cursor:default;pointer-events:none;white-space:nowrap}
.footer__cols .footer__current i{color:var(--ink-mute);font-style:italic;font-size:.78em;font-weight:400;display:block;margin-top:.1rem}
.footer__bottom .mono{color:var(--ink-mute)}

/* Editorial footer additions (brand-mark, manifesto, col-head, bottom row) */
.footer__brand-wrap{display:flex;flex-direction:column;gap:1.25rem;align-items:flex-start}
.footer__brand-mark{font-family:var(--f-display);font-weight:400;font-size:clamp(2.4rem,1.6rem + 3vw,4.5rem);line-height:.9;letter-spacing:-.025em;color:var(--ink);display:inline-flex;align-items:baseline;gap:.05em;text-decoration:none}
.footer__brand-mark i{color:var(--accent);font-style:normal;font-weight:400;display:inline-block;transform:rotate(-12deg) translateY(-.05em)}
.footer__manifesto{font-family:var(--f-display);font-size:1.2rem;color:var(--ink-dim);line-height:1.4;max-width:32ch;font-style:normal}
.footer__manifesto em{color:var(--accent);font-style:italic}
.footer__rotator{display:inline-block;position:relative;vertical-align:baseline}
.footer__rotator em{color:var(--accent);font-style:italic;font-family:var(--f-display);display:inline-block;transition:opacity .35s var(--ease)}
.footer__rotator.is-changing em{opacity:0}
.footer__location{color:var(--ink-mute);letter-spacing:.06em}
.footer__location i{color:var(--accent);font-style:normal;margin:0 .5em}
.footer__col-head{color:var(--accent);border-bottom:1px solid var(--line);padding-bottom:.5rem;margin-bottom:.85rem;letter-spacing:.08em}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-top:2rem;margin-top:2.5rem;padding-right:5rem;border-top:1px solid var(--line);flex-wrap:wrap}
.footer__bottom em{color:var(--accent);font-style:italic;font-family:var(--f-display)}
.footer__top-link{color:var(--ink-dim);text-decoration:none;transition:color .25s var(--ease)}
.footer__top-link:hover{color:var(--accent)}

@media (max-width:1100px){
  .footer__cols{grid-template-columns:repeat(2,1fr)}
  .footer__cols a, .footer__cols .footer__current{white-space:normal}
}
@media (max-width:900px){
  .footer__top{grid-template-columns:1fr}
  .footer__bottom{justify-content:flex-start;flex-direction:column;align-items:flex-start;gap:.75rem;padding-right:5rem}
  .footer__brand-mark{font-size:clamp(2rem,1.4rem + 2vw,3rem)}
}
@media (max-width:560px){.footer__cols{grid-template-columns:1fr 1fr}}

/* ---------- 24. FLOATING WHATSAPP ---------- */
.wa-float{
  position:fixed;right:24px;bottom:24px;z-index:70;
  width:60px;height:60px;border-radius:50%;background:#25D366;color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 14px 30px -10px rgba(37,211,102,.55);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),opacity .3s var(--ease);
  animation:waPulse 4s ease-in-out infinite;
}
.wa-float.is-hidden{opacity:0;pointer-events:none;transform:translateY(20px) scale(.9)}
.wa-float svg{width:28px;height:28px}
.wa-float:hover{transform:scale(1.1);box-shadow:0 18px 40px -10px rgba(37,211,102,.7)}
.wa-float__tip{
  position:absolute;right:74px;top:50%;transform:translateY(-50%) translateX(8px);
  background:var(--bg-elev);color:var(--ink);font-family:var(--f-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.5rem .75rem;border:1px solid var(--line-strong);border-radius:4px;white-space:nowrap;
  opacity:0;transition:opacity .3s var(--ease),transform .3s var(--ease);pointer-events:none;
}
.wa-float:hover .wa-float__tip{opacity:1;transform:translateY(-50%) translateX(0)}
@keyframes waPulse{
  0%,100%{box-shadow:0 14px 30px -10px rgba(37,211,102,.55),0 0 0 0 rgba(37,211,102,.5)}
  50%{box-shadow:0 14px 30px -10px rgba(37,211,102,.55),0 0 0 18px rgba(37,211,102,0)}
}
@media (max-width:560px){.wa-float{right:16px;bottom:16px;width:54px;height:54px}.wa-float svg{width:24px;height:24px}}

/* ---------- 25. COOKIE NOTICE ---------- */
.cookie{
  position:fixed;bottom:16px;left:16px;z-index:65;max-width:calc(100% - 120px);
  background:var(--bg-elev);border:1px solid var(--line-strong);border-radius:999px;
  padding:.65rem 1rem .65rem 1.25rem;display:flex;align-items:center;gap:1rem;
  box-shadow:0 8px 24px -12px rgba(0,0,0,.4);
  transform:translateY(100px);opacity:0;transition:transform .5s var(--ease),opacity .5s var(--ease);
}
.cookie.is-shown{transform:none;opacity:1}
.cookie p{color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cookie__btn{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);background:transparent;border:1px solid var(--line-strong);border-radius:999px;
  padding:.45rem .85rem;flex-shrink:0;transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.cookie__btn:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
@media (max-width:700px){
  .cookie{bottom:90px;left:12px;right:86px;max-width:none;border-radius:12px;flex-wrap:wrap;padding:.75rem 1rem}
  .cookie p{white-space:normal}
}

/* ---------- 26. 404 ---------- */
.notfound{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:8rem var(--pad) 4rem;gap:2rem;position:relative}
.notfound__num{font-family:var(--f-display);font-size:clamp(8rem,28vw,22rem);line-height:1;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px var(--accent)}
.notfound h1{font-family:var(--f-display);font-size:clamp(1.5rem,3vw,2.4rem);font-weight:400;letter-spacing:-.02em;color:var(--ink)}
.notfound p{color:var(--ink-dim);max-width:50ch}

/* ---------- 27. REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.18s !important;scroll-behavior:auto !important}
  .line__inner,.word__inner{transform:none !important;opacity:1 !important}
  .reveal{opacity:1 !important;transform:none !important}
  .hero__title em.kinetic::after{display:none}
  .hero__title .kinetic-rotator i{opacity:0 !important;animation:none !important;transform:none !important}
  .hero__title .kinetic-rotator i:first-child{opacity:1 !important;position:static !important}
  .marquee__track,.kw-marquee__track{animation:none !important}
  .hero::before{display:none}
}

/* ---------- 28. HERO SOLAR SYSTEM ---------- */
.hero__orbit{
  opacity: 1;
  width: min(95vh, 1100px);
  right: -4vw;
  top: 50%;
}
.hero__orbit .orbit-ring{ color: var(--ink-mute); }

@keyframes orbitRotate { to { transform: rotate(360deg); } }
@keyframes orbitSpin   { to { transform: rotate(-360deg); } }
@keyframes sunPulse {
  0%,100% { transform: scale(1);    opacity: .42; }
  50%     { transform: scale(1.18); opacity: .12; }
}
@keyframes sunCorona {
  0%,100% { transform: scale(1);    opacity: .15; }
  50%     { transform: scale(1.25); opacity: .05; }
}
@keyframes twinkle0 { 0%,100% { opacity: 1; } 50% { opacity: 0.2; } }
@keyframes twinkle1 { 0%,100% { opacity: 0.9; } 50% { opacity: 0.3; } }
@keyframes twinkle2 { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }
@keyframes twinkle3 { 0%,100% { opacity: 0.4; } 50% { opacity: 0.85; } }
@keyframes twinkle4 { 0%,100% { opacity: 0.7; } 50% { opacity: 0.15; } }
@keyframes nebulaDriftA { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(20px,-15px) scale(1.05); } }
@keyframes nebulaDriftB { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-25px,18px) scale(1.08); } }
@keyframes cometStreak {
  0%       { transform: translate(0, 0); opacity: 0; }
  5%       { opacity: 1; }
  60%      { transform: translate(720px, 360px); opacity: 1; }
  62%,100% { transform: translate(720px, 360px); opacity: 0; }
}

.hero__orbit .orbit{ transform-origin: 0 0; transform-box: view-box; will-change: transform; }
.hero__orbit .orbit-mercury { animation: orbitRotate  8s linear infinite; }
.hero__orbit .orbit-venus   { animation: orbitRotate 16s linear infinite; }
.hero__orbit .orbit-earth   { animation: orbitRotate 26s linear infinite; }
.hero__orbit .orbit-mars    { animation: orbitRotate 46s linear infinite; }
.hero__orbit .orbit-jupiter { animation: orbitRotate 74s linear infinite; }
.hero__orbit .orbit-saturn  { animation: orbitRotate 110s linear infinite; }

.hero__orbit .earth-spin    { transform-origin: 0 0; transform-box: fill-box; animation: orbitSpin 11s linear infinite; }
.hero__orbit .moon-orbit    { transform-origin: 0 0; transform-box: fill-box; animation: orbitRotate 4s linear infinite; }
.hero__orbit .sun-halo      { transform-origin: 0 0; transform-box: view-box; animation: sunPulse 5s ease-in-out infinite; }
.hero__orbit .sun-corona    { transform-origin: 0 0; transform-box: view-box; animation: sunCorona 7s ease-in-out infinite; }

.hero__orbit .nebula-a      { transform-origin: 0 0; animation: nebulaDriftA 24s ease-in-out infinite; }
.hero__orbit .nebula-b      { transform-origin: 0 0; animation: nebulaDriftB 32s ease-in-out infinite; }

.hero__orbit .star { will-change: opacity; }
.hero__orbit .star--t0 { animation: twinkle0 3s ease-in-out infinite; }
.hero__orbit .star--t1 { animation: twinkle1 4.5s ease-in-out infinite; }
.hero__orbit .star--t2 { animation: twinkle2 5s ease-in-out infinite; }
.hero__orbit .star--t3 { animation: twinkle3 6s ease-in-out infinite; }
.hero__orbit .star--t4 { animation: twinkle4 3.8s ease-in-out infinite; }

.hero__orbit .comet { transform-origin: 0 0; animation: cometStreak 22s linear infinite; animation-delay: 4s; }

.hero__orbit-dot{ display: none; }

@media (prefers-reduced-motion: reduce){
  .hero__orbit .orbit,
  .hero__orbit .earth-spin,
  .hero__orbit .moon-orbit,
  .hero__orbit .sun-halo,
  .hero__orbit .sun-corona,
  .hero__orbit .nebula-a,
  .hero__orbit .nebula-b,
  .hero__orbit .star,
  .hero__orbit .comet { animation: none !important; }
}

@media (max-width: 720px){
  /* On mobile, take the solar system out of the absolute background
     and place it as a real block element between the H1 and the sub-paragraph. */
  .hero{ overflow: visible; }
  .hero__bg{
    position: static;
    display: contents;
  }
  .hero__glow{ display: none; }
  .hero__inner{
    display: flex;
    flex-direction: column;
  }
  .hero__kicker{ order: 1; }
  .hero__title { order: 2; }
  .hero__orbit {
    order: 3;
    position: static;
    display: block;
    margin: 1.5rem auto 0.5rem;
    width: min(95vw, 460px);
    height: auto;
    aspect-ratio: 1 / 1;
    transform: none;
    left: auto; right: auto; top: auto;
    opacity: 1;
    pointer-events: none;
  }
  .hero__sub  { order: 4; }
  .hero__ctas { order: 5; }
}

/* ---------- 2026-11 UPDATE: offer, currency, custom quote ---------- */
.offer__card{border:1px solid var(--accent);border-radius:var(--radius);padding:clamp(1.5rem,3vw,3rem);
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent);
  display:flex;flex-direction:column;gap:clamp(1.5rem,3vw,2.5rem)}
.offer__steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.5vw,2.5rem)}
.offer__steps li{display:flex;flex-direction:column;gap:.5rem}
.offer__steps .mono{color:var(--accent)}
.offer__steps b{font-family:var(--f-display);font-weight:400;font-size:clamp(1.3rem,2vw,1.7rem);letter-spacing:-.015em;color:var(--ink)}
.offer__steps p{color:var(--ink-dim);line-height:1.55}
.offer__ctas{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
@media (max-width:760px){.offer__steps{grid-template-columns:1fr}}

.currency{display:inline-flex;gap:.25rem;padding:.25rem;border:1px solid var(--line-strong);border-radius:999px;align-self:flex-start;margin-top:.5rem}
.currency__btn{font-family:var(--f-mono);font-size:.8rem;letter-spacing:.06em;color:var(--ink-dim);padding:.5rem .9rem;border-radius:999px;background:transparent;border:0;cursor:pointer;min-height:40px}
.currency__btn[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.currency__btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.tier__price{flex-direction:row;align-items:baseline;gap:.5rem;flex-wrap:nowrap}
.tier__price i{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.tier__price span{font-size:clamp(2.2rem,3.4vw,3rem);line-height:1;color:var(--ink)}

.custom-quote{margin-top:1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  padding:clamp(1.5rem,2.5vw,2.25rem);border:1px dashed var(--line-strong);border-radius:var(--radius)}
.custom-quote h3{font-family:var(--f-display);font-weight:400;font-size:clamp(1.3rem,2vw,1.8rem);letter-spacing:-.015em;margin:.4rem 0}
.custom-quote p{color:var(--ink-dim)}
.custom-quote .mono{color:var(--accent)}

/* services grid: keep rows even with 12 cards */
@media (max-width:1100px){ .svc--bundle{grid-column:span 2} }

/* low contrast labels: lift small mono text a little */
.section-kicker,.trusted__label,.tier__head .mono{color:var(--ink-dim)}
@media (min-width:561px){.hero__title{max-width:none;font-size:clamp(3rem,7.4vw,7.6rem)}}
.nav__cta{white-space:nowrap}
@media (max-width:400px){.nav__cta{padding-left:.9rem;padding-right:.9rem;font-size:.85rem}}