/* ═══════════════════════════════════════════════════════════
   ALGORI — AI, Software & Automation Studio
   Marble & Aegean. Hand-written CSS, no frameworks.

   THEMING
   Sections carry .s-marble / .s-deep / .s-azure. Each sets a local
   --bg/--fg/--muted/--line/--accent, and every component below reads
   those — so one class flips a whole section light or dark.
   ─────────────────────────────────────────────────────────── */

/* ── 1. TOKENS ───────────────────────────────────────────── */
:root{
  /* palette */
  --marble:   #FFFFFF;   /* was warm stone; now pure white */
  --marble-2: #EFEFF2;   /* faint neutral — scrollbar track only */
  --deep:     var(--azure);  /* deliberately identical: the site is two colours */
  --deep-2:   #0F42BC;   /* a step down from azure, for raised surfaces */
  --azure:    #1450E0;
  --azure-lt: #6E9CFF;
  --gold:     #D9A441;
  --gold-lt:  #F7D89B;   /* gold is only 2.9:1 on azure; this is 4.7:1 */
  --ink:      #0A1526;

  /* type */
  --sans:  "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Instrument Serif", "Times New Roman", Times, serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-display: clamp(3.1rem, 8.8vw, 10rem);
  --fs-h2:      clamp(2.4rem, 6.2vw, 6.2rem);
  --fs-h3:      clamp(1.5rem, 2.4vw, 2.35rem);
  --fs-lead:    clamp(1.05rem, 1.35vw, 1.35rem);
  --fs-body:    clamp(.98rem, 1.05vw, 1.075rem);
  --fs-micro:   clamp(.66rem, .74vw, .74rem);

  /* space */
  --gut: clamp(1.25rem, 4.4vw, 5rem);
  --sec: clamp(6rem, 13vh, 11rem);
  --shell: 1560px;

  /* motion */
  --e-out: cubic-bezier(.16,1,.3,1);
  --e-io:  cubic-bezier(.76,0,.24,1);

  /* default surface = marble */
  --bg: var(--marble);
  --fg: var(--ink);
  --muted:  rgba(10,21,38,.70);
  --faint:  rgba(10,21,38,.62);
  --line:   rgba(10,21,38,.14);
  --line-soft: rgba(10,21,38,.08);
  --accent: var(--azure);
  --accent-2: var(--azure);
  --surface: rgba(10,21,38,.035);
}

/* ── 2. SURFACES ─────────────────────────────────────────── */
.s-marble{
  --bg: var(--marble);  --fg: var(--ink);
  --muted: rgba(10,21,38,.70);  --faint: rgba(10,21,38,.62);
  --line: rgba(10,21,38,.14);   --line-soft: rgba(10,21,38,.08);
  --accent: var(--azure);       --accent-2: var(--azure);
  --surface: rgba(10,21,38,.035);
  background: var(--bg); color: var(--fg);
}
.s-deep{
  --bg: var(--deep);  --fg: var(--marble);
  --muted: rgba(255,255,255,.90); --faint: rgba(255,255,255,.84);
  --line: rgba(255,255,255,.26);  --line-soft: rgba(255,255,255,.14);
  --accent: var(--marble);        --accent-2: var(--gold-lt);
  --surface: rgba(255,255,255,.10);
  background: var(--bg); color: var(--fg);
}
.s-azure{
  --bg: var(--azure);  --fg: var(--marble);
  --muted: rgba(255,255,255,.90); --faint: rgba(255,255,255,.84);
  --line: rgba(255,255,255,.26);  --line-soft: rgba(255,255,255,.14);
  --accent: var(--marble);        --accent-2: var(--gold-lt);
  --surface: rgba(255,255,255,.10);
  background: var(--bg); color: var(--fg);
}

/* ── 3. RESET ────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ -webkit-text-size-adjust:100%; scrollbar-color: rgba(10,21,38,.3) var(--marble); scrollbar-width:thin; }
html.lock, body.lock{ overflow:hidden; }

body{
  background: var(--marble);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height:1.55; letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden; overscroll-behavior-y:none; text-rendering:optimizeLegibility;
}
body.is-loading{ overflow:hidden; height:100vh; }

img,svg,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; background:none; border:none; }
button{ cursor:pointer; }
ul,ol{ list-style:none; }
h1,h2,h3,h4{ font-weight:500; line-height:.94; letter-spacing:-.035em; }
em,i{ font-style:normal; }

::selection{ background: var(--azure); color: var(--marble); }
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background: var(--marble-2); }
::-webkit-scrollbar-thumb{ background: rgba(10,21,38,.28); }
::-webkit-scrollbar-thumb:hover{ background: rgba(10,21,38,.45); }

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

.skip-link{
  position:fixed; top:0; left:50%; translate:-50% -120%; z-index:1000;
  padding:.85rem 1.5rem; background:var(--azure); color:var(--marble);
  font-family:var(--mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em;
  border-radius:0 0 6px 6px; transition:translate .3s var(--e-out);
}
.skip-link:focus-visible{ translate:-50% 0; }

/* ── 4. PRIMITIVES ───────────────────────────────────────── */
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut); }

.eyebrow{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  font-family:var(--mono); font-size:var(--fs-micro);
  text-transform:uppercase; letter-spacing:.16em; color:var(--muted);
}
.eyebrow .rule{ display:block; width:clamp(28px,4vw,64px); height:1px; background:var(--accent); opacity:.7; }
.eyebrow .sep{ display:block; width:3px; height:3px; border-radius:50%; background:var(--faint); }

.pulse{
  width:6px; height:6px; border-radius:50%; background:var(--accent-2); flex:none;
  animation: pulse 2.4s var(--e-out) infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(217,164,65,.55) } 70%{ box-shadow:0 0 0 9px rgba(217,164,65,0) }
  100%{ box-shadow:0 0 0 0 rgba(217,164,65,0) }
}

/* Greek key divider — masked so it takes the section's accent colour */
.meander{
  height:22px; width:100%; background-color:var(--accent); opacity:.38;
  -webkit-mask-image:var(--key); mask-image:var(--key);
  -webkit-mask-repeat:repeat-x; mask-repeat:repeat-x;
  -webkit-mask-size:auto 22px; mask-size:auto 22px;
  --key:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='22' viewBox='0 0 32 22'%3E%3Cpath d='M0 20h32M4 20V4h24v12H12v-6h12' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E");
}

.sec-head{ margin-bottom: clamp(3rem,6vw,6rem); }
.sec-head--split{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; }
.sec-title{ font-size:var(--fs-h2); margin-top:1.6rem; }
.sec-title em{ font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.02em; color:var(--accent); }
.sec-note{ max-width:36ch; color:var(--muted); margin-top:1.6rem; line-height:1.6; }
.sec-head--split .sec-note{ margin-top:0; padding-bottom:.6rem; }

/* buttons */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:1.2em 2.2em; border-radius:100px; overflow:hidden; isolation:isolate;
  font-family:var(--mono); font-size:clamp(.7rem,.8vw,.78rem);
  text-transform:uppercase; letter-spacing:.12em; white-space:nowrap;
  border:1px solid var(--line); color:var(--fg); will-change:transform;
  transition: border-color .5s var(--e-out), color .5s var(--e-out), transform .42s var(--e-out);
}
.btn__fill{ position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:var(--fg); translate:0 101%; transition:translate .62s var(--e-out); }
.btn__label{ position:relative; display:block; overflow:hidden;
  height:1.35em; line-height:1.35;
  transition: transform .42s var(--e-out); }
.btn__label i{ display:block; line-height:1.35; transition:translate .55s var(--e-out); }
.btn__label i:last-child{ position:absolute; inset:0; translate:0 100%; }
.btn:hover .btn__label i:first-child{ translate:0 -100%; }
.btn:hover .btn__label i:last-child{ translate:0 0; }
.btn:hover .btn__fill{ translate:0 0; }
.btn:hover{ color:var(--bg); border-color:transparent; }

.btn--solid{ background:var(--azure); border-color:var(--azure); color:var(--marble); }
.btn--solid .btn__fill{ background:var(--fg); }
.btn--solid:hover{ color:var(--bg); }
.s-azure .btn--solid{ background:var(--marble); border-color:var(--marble); color:var(--azure); }
.s-azure .btn--solid .btn__fill{ background:var(--gold); }
.s-azure .btn--solid:hover{ color:var(--ink); }
.btn--pill{ padding:1.05em 1.6em; }
.btn--block{ width:100%; margin-top:2.4rem; }

/* tags */
.tags{ display:flex; flex-wrap:wrap; gap:.45rem; }
.tags li{
  font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--muted); border:1px solid var(--line); padding:.42em .85em; border-radius:100px;
  transition: color .4s var(--e-out), border-color .4s var(--e-out);
}
.tags li:hover{ color:var(--fg); border-color:var(--accent); }

/* ── 5. GRAIN + CURSOR ───────────────────────────────────── */
.grain{
  position:fixed; inset:-150%; z-index:900; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 6s steps(6) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0) } 10%{ transform:translate(-4%,-4%) }
  30%{ transform:translate(3%,-6%) }  50%{ transform:translate(-5%,4%) }
  70%{ transform:translate(6%,2%) }   90%{ transform:translate(-2%,5%) }
}

.cursor{ position:fixed; inset:0; z-index:950; pointer-events:none; display:none; }
.cursor__dot,.cursor__ring{ position:absolute; top:0; left:0; border-radius:50%;
  translate:-50% -50%; will-change:transform,width,height; }
.cursor__dot{ width:6px; height:6px; background:var(--azure); }
.cursor__ring{
  width:38px; height:38px; border:1px solid currentColor; color:var(--azure);
  display:grid; place-items:center;
  transition: width .42s var(--e-out), height .42s var(--e-out),
              background-color .42s var(--e-out), border-color .42s var(--e-out),
              opacity .3s var(--e-out), color .42s var(--e-out);
}
/* JS samples the surface under the pointer and flips these, so the cursor
   is azure on white ground and white on azure ground — never invisible. */
.cursor.on-dark .cursor__dot{ background:#fff; }
.cursor.on-dark .cursor__ring{ color:#fff; }

.cursor__label{
  font-family:var(--mono); font-size:.6rem; text-transform:uppercase; letter-spacing:.1em;
  color:#fff; opacity:0; scale:.7; white-space:nowrap;
  transition:opacity .3s, scale .3s var(--e-out);
}
.cursor.is-hover .cursor__ring{ width:96px; height:96px; background:var(--azure); border-color:var(--azure); }
.cursor.is-hover .cursor__label{ opacity:1; scale:1; }
.cursor.is-hover .cursor__dot{ opacity:0; }
.cursor.on-dark.is-hover .cursor__ring{ background:#fff; border-color:#fff; }
.cursor.on-dark.is-hover .cursor__label{ color:var(--azure); }
.cursor.is-plus .cursor__ring{ width:58px; height:58px; }
.cursor.is-plus .cursor__dot{ opacity:0; }
.cursor.is-hide .cursor__ring{ opacity:0; scale:.4; }
.cursor.is-hide .cursor__dot{ opacity:0; }
.cursor.is-down .cursor__ring{ scale:.82; }
@media (hover:hover) and (pointer:fine){
  .cursor{ display:block; }
  body.has-cursor, body.has-cursor *{ cursor:none !important; }
}

/* ── 6. PRELOADER ────────────────────────────────────────── */
.loader{ position:fixed; inset:0; z-index:990; color:var(--marble); }
.loader__panels{ position:absolute; inset:0; display:flex; }
.loader__panels span{ flex:1; background:var(--azure); transition:translate 1s var(--e-io); }
.loader__inner{
  position:absolute; inset:0; z-index:2; display:flex; flex-direction:column;
  justify-content:flex-end; padding:var(--gut);
  transition:opacity .5s ease, translate .8s var(--e-out);
}
.loader__mark{ overflow:hidden; }
.loader__word{
  display:block; font-family:var(--serif); font-style:italic;
  font-size:clamp(4rem,17vw,16rem); line-height:.86; letter-spacing:-.04em;
  translate:0 105%; animation:loaderIn 1.1s var(--e-out) .12s forwards;
}
@keyframes loaderIn{ to{ translate:0 0 } }
.loader__meta{
  display:flex; justify-content:space-between; align-items:baseline; gap:2rem; margin-top:1.6rem;
  font-family:var(--mono); font-size:var(--fs-micro);
  text-transform:uppercase; letter-spacing:.16em; color:rgba(255,255,255,.72);
}
.loader__count em{ color:var(--marble); font-variant-numeric:tabular-nums; }
.loader__count i{ opacity:.45; }
.loader__bar{ margin-top:1.1rem; height:1px; background:rgba(255,255,255,.28); overflow:hidden; }
.loader__bar i{ display:block; height:100%; width:0%; background:var(--gold-lt); }

body.is-done .loader__inner{ opacity:0; translate:0 -12px; }
body.is-done .loader__panels span{ translate:0 -101%; }
body.is-done .loader{ pointer-events:none; }
body.is-done .loader__panels span:nth-child(1){ transition-delay:.02s }
body.is-done .loader__panels span:nth-child(2){ transition-delay:.08s }
body.is-done .loader__panels span:nth-child(3){ transition-delay:.14s }
body.is-done .loader__panels span:nth-child(4){ transition-delay:.20s }
body.is-done .loader__panels span:nth-child(5){ transition-delay:.26s }

/* ── 7. SCROLL PROGRESS ──────────────────────────────────── */
.progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:880; pointer-events:none; }
.progress i{ display:block; height:100%; width:0%; background:var(--azure); }
.nav.on-dark ~ .progress i,
.progress i{ transition: background-color .4s ease; }

/* ── 8. NAV (inverts over each surface) ──────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:870;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding:clamp(1rem,1.7vw,1.6rem) var(--gut);
  color:var(--nav-fg, var(--ink));
  transition:translate .6s var(--e-out), background-color .5s ease,
             backdrop-filter .5s ease, border-color .5s ease, color .45s ease;
  border-bottom:1px solid transparent;
}
.nav.on-light{ --nav-fg: var(--ink);    --nav-dim: rgba(10,21,38,.56);  --nav-line: rgba(10,21,38,.12); }
.nav.on-dark{  --nav-fg: var(--marble); --nav-dim: rgba(255,255,255,.62); --nav-line: rgba(255,255,255,.16); }
.nav.is-stuck{ backdrop-filter:blur(14px) saturate(130%); border-bottom-color:var(--nav-line); }
.nav.on-light.is-stuck{ background:rgba(255,255,255,.72); }
.nav.on-dark.is-stuck{  background:rgba(20,80,224,.62); }
.nav.is-hidden{ translate:0 -110%; }

.nav__logo{ display:flex; align-items:center; gap:.55rem; }
.nav__logo svg{ width:19px; fill:var(--azure); transition:rotate .7s var(--e-out); }
.nav.on-dark .nav__logo svg{ fill:var(--gold-lt); }
.nav__logo:hover svg{ rotate:-12deg; }
.nav__logo span{ font-size:1.16rem; font-weight:600; letter-spacing:-.04em; }
.nav__dot{ width:5px; height:5px; border-radius:50%; background:var(--gold-lt); margin-bottom:.7rem;
  transition:background-color .45s ease; }
.nav.on-light .nav__dot{ background:var(--azure); }

.nav__links{ display:flex; gap:clamp(1.2rem,2.4vw,2.6rem); }
.nav__links a{
  position:relative; font-family:var(--mono); font-size:.74rem;
  text-transform:uppercase; letter-spacing:.11em; color:var(--nav-dim);
  padding-bottom:.25rem; transition:color .4s var(--e-out);
}
.nav__links a::before{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; scale:0 1; transform-origin:right;
  transition:scale .45s var(--e-out);
}
.nav__links a:hover{ color:var(--nav-fg); }
.nav__links a:hover::before{ scale:1 1; transform-origin:left; }
.nav__links a.is-active{ color:var(--nav-fg); }
.nav__links a.is-active::before{ scale:1 1; }

.nav__right{ display:flex; align-items:center; gap:1rem; }
.nav .btn{ border-color:var(--nav-line); color:var(--nav-fg); }
.nav .btn .btn__fill{ background:var(--nav-fg); }
.nav.on-light .btn:hover{ color:var(--marble); }
.nav.on-dark .btn:hover{ color:var(--azure); }

.burger{ display:none; width:38px; height:38px; position:relative; }
.burger span{
  position:absolute; left:9px; width:20px; height:1.5px; background:var(--nav-fg);
  transition:translate .45s var(--e-io), rotate .45s var(--e-io), background-color .4s ease;
}
.burger span:first-child{ top:16px } .burger span:last-child{ top:22px }
.burger.is-open span{ background:var(--marble); }
.burger.is-open span:first-child{ translate:0 3px; rotate:45deg }
.burger.is-open span:last-child{ translate:0 -3px; rotate:-45deg }

/* ── 9. MOBILE MENU ──────────────────────────────────────── */
.menu{
  position:fixed; inset:0; z-index:865; display:flex; flex-direction:column; justify-content:center;
  padding:var(--gut); pointer-events:none; visibility:hidden; color:var(--marble);
}
.menu__bg{ position:absolute; inset:0; background:var(--deep); clip-path:inset(0 0 100% 0);
  transition:clip-path .8s var(--e-io); }
.menu.is-open{ pointer-events:auto; visibility:visible; }
.menu.is-open .menu__bg{ clip-path:inset(0 0 0 0); }
.menu__nav{ position:relative; display:flex; flex-direction:column; gap:.3rem; }
.menu__nav a{
  display:flex; align-items:baseline; gap:1rem;
  font-size:clamp(2.2rem,10vw,4rem); letter-spacing:-.045em; line-height:1.06;
  translate:0 100%; opacity:0;
  transition:translate .7s var(--e-out), opacity .5s ease, color .3s ease;
}
.menu__nav a em{ font-family:var(--mono); font-size:.7rem; color:var(--gold-lt); letter-spacing:.1em; }
.menu.is-open .menu__nav a{ translate:0 0; opacity:1; }
.menu.is-open .menu__nav a:nth-child(1){ transition-delay:.22s }
.menu.is-open .menu__nav a:nth-child(2){ transition-delay:.28s }
.menu.is-open .menu__nav a:nth-child(3){ transition-delay:.34s }
.menu.is-open .menu__nav a:nth-child(4){ transition-delay:.40s }
.menu.is-open .menu__nav a:nth-child(5){ transition-delay:.46s }
.menu__foot{
  position:relative; margin-top:3rem; display:flex; flex-direction:column; gap:.35rem;
  font-family:var(--mono); font-size:.75rem; color:rgba(255,255,255,.62);
  opacity:0; transition:opacity .5s ease .5s;
}
.menu.is-open .menu__foot{ opacity:1; }

/* ── 10. REVEAL PRIMITIVES ───────────────────────────────── */
[data-split] > span{ display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em; }
[data-split] > span > .ln{
  display:block; translate:0 108%; opacity:0; will-change:transform;
  transition:translate 1.15s var(--e-out), opacity 1s ease;
}
[data-split].is-in > span > .ln{ translate:0 0; opacity:1; }

[data-reveal]{ opacity:0; translate:0 26px; will-change:transform,opacity;
  transition:opacity .9s var(--e-out), translate 1.05s var(--e-out); }
[data-reveal].is-in{ opacity:1; translate:0 0; }

/* ── 11. HERO (marble, ink veining) ──────────────────────── */
.hero{
  position:relative; min-height:100svh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(7rem,14vh,11rem) var(--gut) clamp(1.4rem,2.6vh,2.2rem);
}
.hero__glow,.hero__field{ position:absolute; inset:0; width:100%; height:100%; }
.hero__glow{ filter:blur(56px) saturate(125%); opacity:.72; transform:scale(1.2); }
.hero__field{ opacity:.82; }
.hero__vignette{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(70% 56% at 46% 52%, rgba(255,255,255,.50) 0%, transparent 68%),
    linear-gradient(to bottom, var(--marble) 0%, rgba(255,255,255,.35) 16%, transparent 34%),
    linear-gradient(to top,    var(--marble) 0%, rgba(255,255,255,.55) 22%, transparent 58%);
}

.hero__inner{ position:relative; width:100%; max-width:var(--shell); margin-inline:auto; }
.hero__eyebrow{ margin-bottom:clamp(1.6rem,4vh,3rem); opacity:0; animation:fadeUp 1s var(--e-out) .35s forwards; }
@keyframes fadeUp{ from{opacity:0; translate:0 14px} to{opacity:1; translate:0 0} }

.hero__title{ font-size:var(--fs-display); letter-spacing:-.048em; line-height:.88; max-width:16ch; }
.hero__title em{
  font-family:var(--serif); font-style:italic; font-weight:400;
  letter-spacing:-.02em; padding-right:.06em; color:var(--azure);
}

.hero__aside{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(2rem,5vw,5rem); flex-wrap:wrap;
  margin-top:clamp(2rem,4.5vh,3.4rem); padding-top:clamp(1.4rem,2.4vh,2rem);
  border-top:1px solid var(--line);
}
.hero__lede{ max-width:44ch; color:var(--muted); font-size:var(--fs-lead); line-height:1.55; }
.hero__cta{ display:flex; gap:.7rem; flex-wrap:wrap; }

.hero__status{
  position:relative; width:100%; max-width:var(--shell); margin:clamp(2.4rem,6vh,4.4rem) auto 0;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  font-family:var(--mono); font-size:var(--fs-micro);
  text-transform:uppercase; letter-spacing:.14em; color:var(--faint);
  opacity:0; animation:fadeUp 1s var(--e-out) 1s forwards;
}
.hero__status-item{ display:flex; align-items:center; gap:.55rem; }
.hero__scroll{ display:flex; align-items:center; gap:.6rem; color:var(--muted); transition:color .4s; }
.hero__scroll:hover{ color:var(--azure); }
.hero__scroll svg{ width:9px; height:22px; fill:none; stroke:currentColor; stroke-width:1.2; }
.hero__scroll svg path{ animation:nudge 2.2s var(--e-io) infinite; }
@keyframes nudge{ 0%,100%{ translate:0 -3px; opacity:.5 } 50%{ translate:0 3px; opacity:1 } }

/* ── 12. TICKER (azure band) ─────────────────────────────── */
.ticker{ position:relative; z-index:2; overflow:hidden; padding:clamp(1.1rem,2vw,1.6rem) 0; }
.ticker__track{ display:flex; width:max-content; animation:marquee 46s linear infinite; }
.ticker:hover .ticker__track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translate3d(-50%,0,0) } }
.ticker__group{ display:flex; align-items:center; }
.ticker__group span{
  font-size:clamp(1.15rem,2.5vw,2.3rem); letter-spacing:-.035em; font-weight:500;
  padding-inline:clamp(.7rem,1.4vw,1.4rem); white-space:nowrap;
}
.ticker__group i{ color:var(--accent-2); font-size:.8rem; }
.ticker__group span:nth-child(4n+3){
  font-family:var(--serif); font-style:italic; font-weight:400; color:rgba(255,255,255,.72);
}

/* ── 13. MANIFESTO (deep) ────────────────────────────────── */
.manifesto{ padding:var(--sec) 0 calc(var(--sec) * .8); }
.manifesto__lead{
  display:grid; grid-template-columns:1.1fr .9fr;
  gap:clamp(2rem,5vw,5rem); align-items:center;
  margin-top:clamp(2rem,4vw,3.4rem);
}
.manifesto__copy{ min-width:0; }
.manifesto__rule{                          /* white rule directly under the moving text */
  height:2px; background:#fff; margin-top:clamp(1.8rem,3.5vw,2.8rem);
  transform-origin:left;
}
.manifesto__art{ min-width:0; }
.manifesto__art img{
  display:block; width:100%; height:auto; border-radius:10px;
  box-shadow:0 30px 70px -28px rgba(4,14,34,.55);
}

.manifesto__text{
  font-weight:400;
  font-size:clamp(1.5rem,2.9vw,2.9rem); line-height:1.18; letter-spacing:-.035em; max-width:26ch;
}
.manifesto__text .w{ opacity:.20; display:inline-block; transition:opacity .35s linear, color .35s linear; }
.manifesto__text .w.on{ opacity:1; }
.manifesto__text .w.accent.on{ color:var(--accent-2); font-family:var(--serif); font-style:italic; }

.manifesto__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:clamp(1.8rem,3.5vw,3.5rem); margin-top:clamp(3.5rem,8vw,7rem);
  padding-top:clamp(1.8rem,3vw,2.6rem); border-top:1px solid var(--line);
}
.manifesto__col h3{
  font-size:1.06rem; font-weight:500; letter-spacing:-.02em; margin-bottom:.7rem;
  display:flex; align-items:center; gap:.55rem;
}
.manifesto__col h3::before{ content:''; width:7px; height:7px; background:var(--accent-2); rotate:45deg; flex:none; }
.manifesto__col p{ color:var(--muted); max-width:38ch; line-height:1.62; }

/* ── 14. SERVICES / ACCORDION (marble) ───────────────────── */
.services{ padding:var(--sec) 0; position:relative; }
.acc{ border-top:1px solid var(--line); }
.acc__row{ border-bottom:1px solid var(--line); position:relative; }
.acc__row::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(90deg, var(--surface), transparent 62%);
  opacity:0; transition:opacity .6s var(--e-out);
}
.acc__row.is-hot::before{ opacity:1; }

.acc__head{
  position:relative; z-index:1; width:100%; max-width:var(--shell); margin-inline:auto;
  display:grid; grid-template-columns:5.5rem minmax(0,1fr) auto 3.5rem;
  align-items:center; gap:1.5rem; text-align:left;
  padding:clamp(1.5rem,3.1vw,2.6rem) var(--gut);
  transition:padding-left .6s var(--e-out);
}
.acc__row.is-hot .acc__head{ padding-left:calc(var(--gut) + clamp(.5rem,1.4vw,1.5rem)); }

.acc__num{ font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; color:var(--faint);
  transition:color .5s var(--e-out); }
.acc__row.is-hot .acc__num{ color:var(--accent); }

.acc__title{ font-size:clamp(1.5rem,3.5vw,3.15rem); letter-spacing:-.04em; line-height:1; font-weight:500; }
.acc__hint{
  font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--faint); text-align:right; opacity:0; translate:14px 0;
  transition:opacity .5s var(--e-out), translate .6s var(--e-out);
}
.acc__row.is-hot .acc__hint{ opacity:1; translate:0 0; }

.acc__icon{
  justify-self:end; width:38px; height:38px; border-radius:50%; position:relative;
  border:1px solid var(--line); display:grid; place-items:center;
  transition:background-color .5s var(--e-out), border-color .5s var(--e-out), rotate .6s var(--e-out);
}
.acc__icon i{ position:absolute; background:var(--fg); transition:opacity .4s, background-color .5s; }
.acc__icon i:first-child{ width:12px; height:1.5px; }
.acc__icon i:last-child{ width:1.5px; height:12px; }
.acc__row.is-hot .acc__icon{ border-color:var(--accent); }
[aria-expanded="true"] .acc__icon{ background:var(--azure); border-color:var(--azure); rotate:180deg; }
[aria-expanded="true"] .acc__icon i{ background:var(--marble); }
[aria-expanded="true"] .acc__icon i:last-child{ opacity:0; }

.acc__panel{ display:grid; grid-template-rows:0fr; position:relative; z-index:1;
  transition:grid-template-rows .75s var(--e-io); }
.acc__row.is-open .acc__panel{ grid-template-rows:1fr; }
.acc__body{ overflow:hidden; width:100%; max-width:var(--shell); margin-inline:auto; }
.acc__body > *{ opacity:0; translate:0 16px; transition:opacity .5s ease, translate .6s var(--e-out); }
.acc__row.is-open .acc__body > *{ opacity:1; translate:0 0; transition-delay:.16s; }
.acc__body p{
  max-width:58ch; color:var(--muted); font-size:var(--fs-lead); line-height:1.6;
  margin:0 var(--gut) 1.5rem; padding-left:calc(5.5rem + 1.5rem);
}
.acc__body .deliver{ margin:0 var(--gut) clamp(1.8rem,3.4vw,2.8rem); padding-left:calc(5.5rem + 1.5rem); }


/* ── FAQ: same accordion, simpler head ── */
.faq{ padding:var(--sec) 0; }
.acc--faq .acc__head{ grid-template-columns:4rem minmax(0,1fr) 3.5rem; gap:1.2rem; }
.acc--faq .acc__title{ font-size:clamp(1.15rem,2vw,1.7rem); letter-spacing:-.025em; line-height:1.2; }
.acc--faq .acc__body p{ padding-left:calc(4rem + 1.2rem); max-width:64ch; }
@media (max-width:900px){
  .acc--faq .acc__head{ grid-template-columns:2.6rem minmax(0,1fr) 2.4rem; gap:.9rem; }
  .acc--faq .acc__body p{ padding-left:calc(2.6rem + .9rem); }
}
@media (max-width:640px){ .acc--faq .acc__body p{ padding-left:0; } }

/* ── 15. PROCESS (deep, pinned horizontal) ───────────────── */
.process__pin{ height:280vh; position:relative; }
.process__sticky{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  gap:clamp(2rem,5vh,4rem); padding-block:clamp(4rem,9vh,7rem);
}
.process__head{ display:flex; flex-direction:column; gap:1.4rem; }
.process__title{ font-size:clamp(2rem,4.6vw,4.4rem); letter-spacing:-.042em; max-width:18ch; }
.process__title em{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--accent-2); }
.process__meter{ height:1px; background:var(--line); margin-top:.6rem; }
.process__meter i{ display:block; height:100%; width:0%; background:var(--accent-2); transition:width .1s linear; }

.process__viewport{ overflow:hidden; }
.process__track{
  display:flex; gap:clamp(1rem,2vw,2rem); width:max-content; will-change:transform;
  padding-inline:max(var(--gut), calc((100vw - var(--shell)) / 2 + var(--gut)));
}
.step{
  flex:0 0 clamp(270px,30vw,430px);
  padding:clamp(1.6rem,2.4vw,2.4rem); background:var(--surface);
  display:flex; flex-direction:column; gap:.9rem;
  transition:border-color .5s var(--e-out), background-color .5s var(--e-out);
}
.step:hover{ border-color:var(--accent-2); }
.step__num{
  font-family:var(--serif); font-size:1.5rem; line-height:1; color:var(--accent-2);
  letter-spacing:.02em;
}
.step h3{ font-size:clamp(1.5rem,2.3vw,2.15rem); letter-spacing:-.035em; }
.step p{ color:var(--muted); line-height:1.62; flex:1; }
.step__meta{
  font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.14em;
  color:var(--faint); padding-top:1rem; border-top:1px solid var(--line-soft);
}

/* ── 16. WORK (marble) ───────────────────────────────────── */
.work{ padding:var(--sec) 0; }
.cards{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(1rem,2.2vw,2.2rem); }
.card{ grid-column:span 3; display:flex; flex-direction:column; will-change:transform; }
.card--tall{ grid-column:span 3; grid-row:span 2; }
.card--wide{ grid-column:span 3; }

.card__poster{
  position:relative; overflow:hidden; border-radius:10px; aspect-ratio:16/11;
  border:1px solid var(--line); background:var(--azure);
  transition:border-color .6s var(--e-out);
}
.card--tall .card__poster{ aspect-ratio:4/5; }
.card__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  transition:transform 1.2s var(--e-out);
}
.card__poster::after{                       /* keeps the metric legible where the figure runs low */
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(20,80,224,.78) 0%, rgba(20,80,224,.14) 26%, transparent 44%);
}
.card:hover .card__img{ transform:scale(1.055); }
.card:hover .card__poster{ border-color:var(--azure); }

.card__metric{
  position:absolute; z-index:2; left:1.3rem; right:1.3rem; bottom:1.2rem;
  display:flex; flex-direction:column; gap:.3rem;
  color:rgba(255,255,255,.84);              /* .84 is the AA floor on azure */
  font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em;
}
.card__metric em{
  font-family:var(--sans); font-size:clamp(1.4rem,2.4vw,2.15rem); font-weight:500;
  letter-spacing:-.035em; color:#fff; text-transform:none;
}

.card__meta{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  margin-top:1.15rem; padding-bottom:.7rem; border-bottom:1px solid var(--line);
}
.card__meta h3{ font-size:var(--fs-h3); letter-spacing:-.035em; }
.card__meta span{
  font-family:var(--mono); font-size:.68rem; text-transform:uppercase;
  letter-spacing:.12em; color:var(--faint); white-space:nowrap;
}
.card__desc{ margin-top:.9rem; color:var(--muted); max-width:44ch; line-height:1.6; }

/* ── 17. STATS + STACK (deep) ────────────────────────────── */
.stats{ padding:var(--sec) 0; }
.stats__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
  gap:clamp(1.6rem,3vw,3rem); padding-block:clamp(2.6rem,5vw,4.4rem);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.stats__grid li{ display:flex; flex-direction:column; gap:.45rem; }
.stats__grid em{
  font-size:clamp(2.6rem,5.4vw,5.2rem); letter-spacing:-.05em; line-height:.9;
  font-variant-numeric:tabular-nums; font-weight:500; color:var(--marble);
}
.stats__grid li:nth-child(even) em{ color:var(--accent-2); }
.stats__grid span{
  font-family:var(--mono); font-size:.7rem; text-transform:uppercase;
  letter-spacing:.13em; color:var(--faint);
}
.stack{ margin-top:clamp(2.6rem,5vw,4rem); }
.stack__tiers{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap:clamp(1.6rem,3vw,2.6rem); margin-top:1.8rem;
}
.stack__tier h3{
  font-family:var(--mono); font-size:.68rem; font-weight:400;
  text-transform:uppercase; letter-spacing:.16em; color:var(--accent-2);
  padding-bottom:.7rem; margin-bottom:1rem; border-bottom:1px solid var(--line);
}
.stack__list{ display:flex; flex-direction:column; gap:.42rem; }
.stack__list li{
  font-size:.92rem; letter-spacing:-.005em; color:var(--muted);
  transition:color .3s var(--e-out), translate .3s var(--e-out);
}
.stack__list li:hover{ color:var(--fg); translate:3px 0; }

/* ── concrete deliverables under each service ── */
.deliver{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:.5rem 2rem;
}
.deliver li{
  position:relative; padding-left:1.1rem; font-size:.94rem;
  color:var(--muted); transition:color .3s var(--e-out);
}
.deliver li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:5px; height:5px; rotate:45deg; background:var(--accent);
}
.deliver li:hover{ color:var(--fg); }

/* ── 18. QUOTE (azure) ───────────────────────────────────── */
.quote{ padding:var(--sec) 0; position:relative; overflow:hidden; }
/* the artwork's ground is exactly --azure, so it melts into the section */
.quote__bust{
  position:absolute; right:0; bottom:0; z-index:0;
  height:104%; width:auto; max-width:44%;
  object-fit:contain; object-position:bottom right;
  pointer-events:none; user-select:none;
}
.quote .shell{ position:relative; z-index:1; }
/* the key is white on azure, so it disappears against the white bust — stop it short */
.quote .meander{ max-width:min(22em, 58%); }
.quote blockquote{
  max-width:min(22em, 60%);
  font-family:var(--serif); font-weight:400; letter-spacing:-.022em;
  font-size:clamp(2rem,5.4vw,5rem); line-height:1.06;
}
.quote blockquote em{ font-style:italic; color:var(--accent-2); }
.quote__by{
  display:flex; align-items:center; gap:.9rem; margin-top:clamp(2rem,4vw,3.2rem);
  font-family:var(--mono); font-size:.75rem;
}
.quote__avatar{
  width:40px; height:40px; border-radius:50%; flex:none;
  background:conic-gradient(from 210deg, var(--gold), var(--marble), var(--deep-2), var(--gold));
}
.quote__by span{ display:flex; flex-direction:column; gap:.15rem; }
.quote__by strong{ font-weight:500; color:var(--marble); }
.quote__by i{ color:rgba(255,255,255,.62); font-size:.7rem; }

/* ── 19. CONTACT (marble) ────────────────────────────────── */
.contact{ padding:var(--sec) 0; }
.contact__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2.5rem,6vw,7rem); align-items:start; }
.contact__title{ font-size:var(--fs-h2); margin-top:1.6rem; letter-spacing:-.048em; }
.contact__title em{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--azure); }
.contact__note{ margin-top:1.8rem; color:var(--muted); max-width:42ch; font-size:var(--fs-lead); line-height:1.58; }
.contact__meta{ margin-top:clamp(2.2rem,4vw,3.2rem); display:grid; gap:.1rem; }
.contact__meta li{
  display:grid; grid-template-columns:7.5rem 1fr; gap:1rem; align-items:baseline;
  padding-block:.85rem; border-top:1px solid var(--line-soft);
}
.contact__meta span{
  font-family:var(--mono); font-size:.68rem; text-transform:uppercase;
  letter-spacing:.13em; color:var(--faint);
}
.contact__meta a,.contact__meta i{ font-size:1.02rem; letter-spacing:-.015em; }
.contact__meta a{ position:relative; display:inline-block; }
.contact__meta a::after{
  content:''; position:absolute; left:0; bottom:-2px; width:100%; height:1px;
  background:var(--azure); scale:0 1; transform-origin:right; transition:scale .5s var(--e-out);
}
.contact__meta a:hover{ color:var(--azure); }
.contact__meta a:hover::after{ scale:1 1; transform-origin:left; }

.form{ display:flex; flex-direction:column; gap:.2rem; }
.field{ position:relative; padding-top:1.5rem; }
.field input,.field select,.field textarea{
  width:100%; padding:.55rem 0 .85rem; font-size:1.05rem; letter-spacing:-.015em;
  border-bottom:1px solid var(--line); border-radius:0; transition:border-color .4s ease;
}
.field textarea{ resize:vertical; min-height:3.4rem; line-height:1.5; }
.field select{ appearance:none; cursor:pointer; }
.field--select::after{
  content:''; position:absolute; right:2px; bottom:1.5rem; width:7px; height:7px;
  border-right:1.4px solid var(--muted); border-bottom:1.4px solid var(--muted);
  rotate:45deg; pointer-events:none;
}
.field select option{ background:var(--marble); color:var(--ink); }
.field label{
  position:absolute; left:0; top:1.9rem; font-family:var(--mono); font-size:.82rem;
  letter-spacing:.02em; color:var(--faint); pointer-events:none; transform-origin:left top;
  transition:translate .42s var(--e-out), scale .42s var(--e-out), color .42s ease;
}
.field label em{ opacity:.6; }
.field input:focus + label, .field textarea:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label,
.field--select label{ translate:0 -1.85rem; scale:.78; color:var(--muted); }
.field__line{
  position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--azure);
  scale:0 1; transform-origin:left; transition:scale .55s var(--e-out);
}
.field:focus-within .field__line{ scale:1 1; }
.field.is-bad input,.field.is-bad textarea{ border-bottom-color:#C0392B; }
.form__status{
  margin-top:1rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.08em;
  color:var(--muted); min-height:1.2em;
}
.form__status.ok{ color:var(--azure); }
.form__status.bad{ color:#C0392B; }

/* ── 20. FOOTER (deep) ───────────────────────────────────── */
.footer{ padding-top:clamp(3rem,6vw,5rem); overflow:hidden; }
.footer__top{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:clamp(1.8rem,3vw,3rem); }
.footer__label{
  display:block; font-family:var(--mono); font-size:.66rem; text-transform:uppercase;
  letter-spacing:.16em; color:var(--faint); margin-bottom:.9rem;
}
.footer__col p{ color:var(--muted); line-height:1.6; }
.footer__col ul{ display:flex; flex-direction:column; gap:.35rem; }
.footer__col a{ color:var(--muted); transition:color .35s ease; }
.footer__col a:hover{ color:var(--accent-2); }
.footer__col--end p{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.footer__top-link{
  display:inline-block; margin-top:1.2rem; font-family:var(--mono); font-size:.72rem;
  text-transform:uppercase; letter-spacing:.12em; color:var(--muted) !important;
}
.footer__top-link:hover{ color:var(--accent-2) !important; }

.footer__mark{ margin-top:clamp(2.5rem,5vw,4rem); padding-inline:var(--gut); line-height:.76; overflow:hidden; }
.footer__mark span{
  display:block; text-align:center; font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(5rem,25.6vw,26rem); letter-spacing:-.045em;
  background:linear-gradient(180deg, var(--marble) 10%, rgba(255,255,255,.12) 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  translate:0 34%; transition:translate 1.3s var(--e-out);
}
.footer.is-in .footer__mark span{ translate:0 0; }
.footer__base{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding-block:1.6rem; border-top:1px solid var(--line-soft);
  font-family:var(--mono); font-size:var(--fs-micro);
  text-transform:uppercase; letter-spacing:.13em; color:var(--faint);
}
.footer__base span{ display:flex; align-items:center; gap:.55rem; }

/* ── 21. RESPONSIVE ──────────────────────────────────────── */
@media (max-width:1180px){
  .cards{ grid-template-columns:repeat(4,1fr); }
  .card,.card--tall,.card--wide{ grid-column:span 2; grid-row:auto; }
  .card--tall .card__poster{ aspect-ratio:16/11; }
  .contact__grid{ grid-template-columns:1fr; }
}
@media (max-width:900px){
  .manifesto__lead{ grid-template-columns:1fr; gap:2.4rem; }
  .quote__bust{ display:none; }
  .quote blockquote{ max-width:22em; }
  .nav__links{ display:none; }
  .nav .btn--pill{ display:none; }
  .burger{ display:block; }
  .acc__head{ grid-template-columns:3.2rem minmax(0,1fr) 2.4rem; gap:1rem; }
  .acc__hint{ display:none; }
  .acc__icon{ width:30px; height:30px; }
  .acc__body p,.acc__body .deliver{ padding-left:calc(3.2rem + 1rem); }
  .hero__title{ max-width:none; }
  .process__pin{ height:auto; }
  .process__sticky{ position:static; height:auto; }
  .process__viewport{ overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .process__viewport::-webkit-scrollbar{ display:none; }
  .process__track{ transform:none !important; }
  .step{ scroll-snap-align:start; flex-basis:min(78vw,380px); }
  .process__meter{ display:none; }
}
@media (max-width:640px){
  .cards{ grid-template-columns:1fr; }
  .card,.card--tall,.card--wide{ grid-column:span 1; }
  .hero__aside{ flex-direction:column; align-items:flex-start; }
  .hero__cta{ width:100%; }
  .hero__cta .btn{ flex:1; }
  .hero__status .hero__status-item:nth-child(2){ display:none; }
  .acc__body p,.acc__body .deliver{ padding-left:0; }
  .contact__meta li{ grid-template-columns:1fr; gap:.2rem; }
  .footer__base{ flex-direction:column; gap:.5rem; }
}

/* ── 22. MOTION PREFERENCES ──────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  [data-reveal],[data-split] > span > .ln{ opacity:1 !important; translate:0 0 !important; }
  .manifesto__text .w{ opacity:1 !important; }
  .footer__mark span{ translate:0 0 !important; }
  .grain{ display:none; }
  .cursor{ display:none !important; }
  body.has-cursor, body.has-cursor *{ cursor:auto !important; }
}