/* akiva.mx — brand tokens from the identity sheet, layout/motion grammar from
   the Daylight scroll spec. Nothing below :root hardcodes a colour or font. */

:root {
  --primary:    #6F8EBE;
  --light-blue: #D9E4F3;
  --cream:      #F7F3ED;
  --navy:       #1F3556;
  --charcoal:   #1A1A1A;

  --bg:         var(--cream);
  --ink:        var(--charcoal);
  --muted:      #6B6B6B;
  --on-dark:    var(--cream);
  --rule:       #E3DDD4;

  --font-display: "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body:    "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Daylight's shape language */
  --radius-card: 24px;   /* rounded-3xl */
  --radius-sm:   16px;
  --page-inset:  3.125vw;
  --gap-track:   20vw;
  --max-width:   1180px;
  --pad-x:       clamp(1.25rem, 5vw, 3rem);
  --pad-y:       clamp(4.5rem, 10vw, 9rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;   /* the track lives inside a sticky overflow-hidden box */
}
h1,h2,h3,.display { font-family: var(--font-display); font-weight: 800;
  letter-spacing: -.03em; line-height: 1.02; margin: 0; text-wrap: balance; }
p { margin: 0; }
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }

.wrap { width:100%; max-width:var(--max-width); margin-inline:auto; padding-inline:var(--pad-x); }
.section { padding-block: var(--pad-y); }
.eyebrow { font-size:.75rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--primary); }

.skip { position:absolute; left:-9999px; background:var(--navy); color:var(--on-dark);
  padding:.75rem 1.25rem; border-radius:var(--radius-sm); z-index:900; }
.skip:focus { left:1rem; top:1rem; }

/* ── Persistent floating chrome (logo tile TL, nav pill TR, contact card BR) ── */

.chrome { position: fixed; z-index: 600; }
.chrome--tl { top: var(--page-inset); left: var(--page-inset); }
.chrome--tr { top: var(--page-inset); right: var(--page-inset); }
.chrome--br { bottom: var(--page-inset); right: var(--page-inset); }

.tile {
  display:grid; place-items:center; width:56px; height:56px;
  background:var(--cream); border-radius:var(--radius-sm);
  box-shadow:0 2px 14px rgba(26,26,26,.10);
}
.tile img { width: 34px; }

.pill {
  display:flex; align-items:center; gap:.35rem; padding:.4rem;
  background:color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter:blur(14px); border-radius:999px;
  box-shadow:0 2px 14px rgba(26,26,26,.10);
}
.pill a {
  font-size:.9rem; text-decoration:none; color:var(--muted);
  padding:.5rem .85rem; border-radius:999px; transition:color .2s, background .2s;
}
.pill a:hover { color:var(--ink); background:color-mix(in srgb, var(--light-blue) 60%, transparent); }
.pill .cta { background:var(--primary); color:#fff; font-weight:500; }
.pill .cta:hover { background:var(--navy); color:#fff; }
@media (max-width: 860px) { .pill a.hide-sm { display:none; } }

.lang { display:inline-flex; padding:2px; border:1px solid var(--rule); border-radius:999px; margin-left:.25rem; }
.lang button {
  font:inherit; font-size:.75rem; font-weight:500; letter-spacing:.05em;
  padding:.35rem .6rem; border:0; border-radius:999px; background:transparent;
  color:var(--muted); cursor:pointer; transition:background .2s, color .2s;
}
.lang button[aria-pressed="true"] { background:var(--primary); color:#fff; }
.lang button:focus-visible { outline:2px solid var(--navy); outline-offset:2px; }

.card-float {
  max-width:19rem; padding:1rem 1.15rem; background:var(--cream);
  border-radius:var(--radius-sm); box-shadow:0 6px 28px rgba(26,26,26,.16);
}
.card-float h4 { font-family:var(--font-display); font-size:1.15rem; font-weight:800; margin:0 0 .2rem; }
.card-float p { font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
@media (max-width: 860px) { .chrome--br { display:none; } }

.btn { display:inline-flex; align-items:center; gap:.5rem; font-size:.9375rem; font-weight:500;
  padding:.8rem 1.5rem; border-radius:999px; text-decoration:none; border:1px solid transparent; }
.btn--primary { background:var(--primary); color:#fff; }
.btn--invert  { background:var(--cream); color:var(--navy); }
.btn--ghost   { border-color:var(--rule); }

/* ── 1. HERO — 200vh wrapper, sticky card, scrubbed dawn→night canvas ── */

.hero { height: 200vh; position: relative; }
.hero__sticky { position: sticky; top: 0; height: 100vh; height: 100svh;
  padding: var(--page-inset); }
.hero__card {
  position: relative; width:100%; height:100%; overflow:hidden;
  border-radius: var(--radius-card); background: var(--navy);
  transform-origin: 50% 30%;
}
.hero__canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.hero__veil { position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(26,26,26,.42) 0%, rgba(26,26,26,.10) 55%, transparent 78%); }
.hero__copy { position:absolute; left:clamp(1.5rem,5vw,4.5rem); top:clamp(4.5rem,13vh,9rem);
  max-width:min(46rem,72%); color:var(--cream); }
.hero__copy h1 { font-size:clamp(2.6rem,6.6vw,5.6rem); color:var(--cream); font-weight:800; }
.hero__copy p { margin-top:1.5rem; max-width:34ch; font-size:clamp(1.05rem,1.6vw,1.35rem);
  color:color-mix(in srgb, var(--cream) 88%, transparent); }
.hero__widget { position:absolute; left:clamp(1.5rem,5vw,4.5rem); bottom:clamp(1.5rem,5vh,3rem); }
/* BR chrome is one stacked floating column — card, stock line, CTA — so the
   CTA can never end up underneath the card the way it did on the first pass. */
.chrome--br { display:flex; flex-direction:column; align-items:flex-end; gap:.85rem; }
.chrome--br .stock { font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); text-shadow:0 1px 6px rgba(247,243,237,.9); }
.chrome--br .btn { box-shadow:0 6px 24px rgba(31,53,86,.28); }

/* ── 2. HORIZONTAL SHOWCASE (second on the page, per brief) ── */

.hscroll { position:relative; z-index:301; background:var(--bg);
  /* real height is set by JS from the track's measured width; this is only a
     sane pre-JS floor so the section is never a zero-travel stub */
  min-height: 100vh; }
.hscroll__sticky { position:sticky; top:0; height:100vh; height:100svh; overflow:hidden;
  display:flex; align-items:center; }
.hscroll__track { display:flex; gap:var(--gap-track); height:100%; align-items:center;
  will-change:transform; }
.panel { flex-shrink:0; height:100%; display:flex; flex-direction:column; justify-content:center; }
.panel--spacer { width:40vw; }
.panel--w100 { width:100vw; } .panel--w120 { width:120vw; }
.panel--w50  { width:50vw; }  .panel--w40  { width:40vw; }

/* Image slots. Gradient stands in for photography; swap background for a
   real <img> when the shoot lands — geometry does not change. */
.media { position:relative; overflow:hidden; border-radius:var(--radius-card);
  background:var(--light-blue); }
.media > .media__img { position:absolute; inset:-10% 0; background-size:cover;
  background-position:center; will-change:transform; }
.media--dawn  .media__img { background-image:linear-gradient(160deg,#D9E4F3,#6F8EBE 55%,#1F3556); }
.media--noon  .media__img { background-image:linear-gradient(200deg,#F7F3ED,#D9E4F3 45%,#6F8EBE); }
.media--dusk  .media__img { background-image:linear-gradient(140deg,#6F8EBE,#1F3556 60%,#1A1A1A); }
.media--night .media__img { background-image:linear-gradient(120deg,#1F3556,#1A1A1A); }
.media__label { position:absolute; left:1.25rem; bottom:1.1rem; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; color:color-mix(in srgb,#fff 78%,transparent); }

.panel__lead { max-width:34rem; }
.panel__lead h2 { font-size:clamp(2rem,4.4vw,3.6rem); }
.panel__lead p  { margin-top:1.1rem; color:var(--muted); max-width:38ch; }
.panel--w100 .media { height:70vh; width:100%; }
.panel--w120 .media { height:78vh; width:100%; }
.panel__overlay { position:absolute; left:clamp(1.5rem,3vw,3rem); top:clamp(1.5rem,4vh,3rem);
  max-width:32ch; color:var(--cream); }
.panel__overlay h2 { font-size:clamp(1.8rem,3.4vw,3rem); color:var(--cream); }
.panel__overlay p { margin-top:.9rem; color:color-mix(in srgb,var(--cream) 86%,transparent); }

.triptych { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; width:100%; }
.triptych .media { height:46vh; }
.triptych h3 { margin-top:1rem; font-size:1.15rem; }
.triptych p  { margin-top:.4rem; font-size:.95rem; color:var(--muted); }

.usecases { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; margin-top:2rem; }
.usecases .media { height:24vh; }
.usecases span { display:block; margin-top:.6rem; font-weight:500; font-size:.95rem; }

.channels { display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; margin-top:2rem; }
.chip { aspect-ratio:1; display:grid; place-items:center; text-align:center;
  background:var(--light-blue); border-radius:var(--radius-sm);
  font-size:.8rem; font-weight:500; color:var(--navy); padding:.4rem; }

.darkstrip { background:var(--charcoal); color:var(--on-dark); border-radius:var(--radius-card);
  padding:clamp(1.5rem,3vw,2.5rem); display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2.5vw,2.5rem); margin-top:1.5rem; }
.darkstrip h4 { font-family:var(--font-display); font-weight:800; font-size:1.05rem; margin:0 0 .35rem; }
.darkstrip p { font-size:.9rem; color:color-mix(in srgb,var(--cream) 70%,transparent); }

/* ── 3. MANIFESTO — word-by-word fill ── */

.manifesto { height:300vh; position:relative; }
.manifesto__sticky { position:sticky; top:0; height:100vh; height:100svh;
  display:grid; place-items:center; padding-inline:var(--pad-x); }
.manifesto p { font-family:var(--font-display); font-weight:800; letter-spacing:-.03em;
  line-height:1.12; font-size:clamp(1.7rem,4.4vw,3.6rem); max-width:24ch; text-align:center; }
.manifesto w { color:color-mix(in srgb, var(--ink) 16%, transparent); transition:color .18s linear; }
.manifesto w.on { color:var(--ink); }
.manifesto em { font-style:normal; color:var(--primary); }

/* ── 4. ZOOM-OUT FINALE ── */

.finale { height:340vh; position:relative; background:var(--charcoal); }
.finale__sticky { position:sticky; top:0; height:100vh; height:100svh; overflow:hidden;
  display:grid; place-items:center; }
.finale__screen { position:relative; width:min(78vw,64rem); aspect-ratio:16/10;
  border-radius:0; overflow:hidden; transform:scale(2.5); will-change:transform;
  background:linear-gradient(150deg,#6F8EBE,#1F3556 60%,#1A1A1A); }
.finale__screen .inner { position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:2rem; }
.finale__screen h2 { color:var(--cream); font-size:clamp(1.6rem,3.2vw,3rem); max-width:18ch; }
.finale__aside { position:absolute; right:clamp(1.5rem,6vw,6rem); top:50%;
  transform:translateY(-50%) translateX(80px); opacity:0; max-width:22rem; color:var(--on-dark); }
.finale__aside h3 { font-size:clamp(1.4rem,2.4vw,2.1rem); color:var(--cream); }
.finale__aside p { margin-top:.9rem; color:color-mix(in srgb,var(--cream) 70%,transparent); }

/* ── 5-7. static tail ── */

.note { background:var(--bg); border-top:1px solid var(--rule); }
.note__body { max-width:34rem; margin-top:1.5rem; }
.note__body p + p { margin-top:1.15rem; }
.note__sign { margin-top:2rem; font-family:var(--font-display); font-weight:800; color:var(--navy); }
.note__sign span { display:block; font-family:var(--font-body); font-weight:400; color:var(--muted); font-size:.9rem; }

.cta { background:var(--primary); color:#fff; text-align:center; }
.cta h2 { font-size:clamp(2rem,5.5vw,3.5rem); max-width:18ch; margin-inline:auto; }
.cta p { margin-top:1.15rem; color:color-mix(in srgb,#fff 82%,transparent); max-width:42ch; margin-inline:auto; }
.cta .btn { margin-top:2.25rem; }

.footer { background:var(--charcoal); color:var(--on-dark); padding-block:clamp(3rem,6vw,4.5rem); }
.footer__inner { display:flex; flex-wrap:wrap; gap:2rem; justify-content:space-between; }
.footer__mark { width:118px; margin-bottom:1rem; }
.footer__tag { font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:color-mix(in srgb,var(--cream) 55%,transparent); }
.footer__meta { font-size:.875rem; color:color-mix(in srgb,var(--cream) 55%,transparent); text-align:right; }
@media (max-width:640px){ .footer__meta{ text-align:left; } }

/* ── Motion gate: below 1024px and under reduced-motion the whole page
      renders as a plain vertical stack, exactly as the spec prescribes. ── */

@media (max-width: 1023px), (prefers-reduced-motion: reduce) {
  .hero, .manifesto, .finale { height: auto !important; }
  .hero__sticky, .manifesto__sticky, .finale__sticky,
  .hscroll__sticky { position: static; height: auto; overflow: visible; }
  .hero__sticky { padding: var(--pad-x); }
  .hero__card { height: 78vh; }
  .hscroll { height: auto !important; }
  .hscroll__track { transform: none !important; width: auto !important;
    overflow-x: auto; scroll-snap-type: x mandatory; gap: 1.25rem;
    padding-inline: var(--pad-x); align-items: stretch; }
  .panel { width: min(86vw, 30rem) !important; height: auto;
    scroll-snap-align: start; padding-block: var(--pad-y); }
  .panel--spacer { display: none; }
  .panel--w100 .media, .panel--w120 .media, .triptych .media { height: 40vh; }
  .triptych, .darkstrip, .usecases, .channels { grid-template-columns: 1fr; }
  .manifesto__sticky { padding-block: var(--pad-y); }
  .manifesto w { color: var(--ink); }
  .finale__screen { transform: none !important; border-radius: var(--radius-card); margin: var(--pad-x); }
  .finale__aside { position: static; transform: none !important; opacity: 1 !important;
    margin: 0 auto var(--pad-y); padding-inline: var(--pad-x); }
  .chrome--br { display: none; }
}

/* ── EXPLORA — card row, staggered rise ─────────────────────────────────── */

.explore { height:220vh; background:var(--charcoal); position:relative; z-index:5; }
.explore__sticky { position:sticky; top:0; height:100vh; height:100svh; display:flex; align-items:center; }
.explore__inner { width:100%; max-width:var(--max-width); margin-inline:auto; padding-inline:var(--page-inset);
  display:grid; grid-template-columns:minmax(260px,1fr) 2fr; gap:5vw; align-items:center; }
.explore__title { color:var(--cream); font-size:clamp(2.4rem,4.4vw,4.6rem); }
.explore__title em { font-style:normal; color:var(--primary); }
.explore__body { color:#9a9a94; margin-top:1.3rem; max-width:30ch; }
.explore__cards { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; position:relative; }
.explore__dots { position:absolute; top:-2rem; left:0; color:#6b6b66; font-size:.6rem; letter-spacing:.35em; }
.xcard { display:flex; flex-direction:column; height:clamp(240px,30vh,330px);
  background:#26261f; border-radius:var(--radius-card); overflow:hidden; text-decoration:none;
  transform:translate3d(0,60px,0); opacity:0; transition:background .25s ease; }
.xcard:hover { background:#2f2f26; }
.xcard__icon { flex:1; display:grid; place-items:center; color:var(--cream); }
.xcard__bar { background:#33332a; color:var(--cream); font-size:.72rem; letter-spacing:.14em;
  font-weight:500; text-transform:uppercase; padding:1rem 1.1rem;
  display:flex; justify-content:space-between; align-items:center; gap:.5rem; }
.xcard:hover .xcard__bar { background:var(--primary); }

/* Chrome theme-flip: the floating card/pill sit over dark scenes and were
   unreadable there. Daylight flips its chrome per section; so do we. */
body[data-theme="dark"] .card-float { background:var(--navy); color:var(--cream); }
body[data-theme="dark"] .card-float p { color:#9FB6DC; }
body[data-theme="dark"] .chrome--br .stock { color:#9FB6DC; text-shadow:0 1px 8px rgba(26,26,26,.8); }
body[data-theme="dark"] .pill { background:color-mix(in srgb, var(--navy) 88%, transparent); }
body[data-theme="dark"] .pill a { color:#9FB6DC; }
body[data-theme="dark"] .pill a:hover { color:var(--cream); background:color-mix(in srgb,#fff 12%,transparent); }
body[data-theme="dark"] .pill .cta { background:var(--primary); color:#fff; }
body[data-theme="dark"] .tile { background:var(--navy); }
body[data-theme="dark"] .lang { border-color:#2E4A75; }
body[data-theme="dark"] .lang button { color:#9FB6DC; }
body[data-theme="dark"] .lang button[aria-pressed="true"] { background:var(--primary); color:#fff; }

@media (max-width:1023px), (prefers-reduced-motion: reduce) {
  .explore { height:auto !important; padding-block:var(--pad-y); }
  .explore__sticky { position:static; height:auto; }
  .explore__inner { grid-template-columns:1fr; }
  .explore__cards { grid-template-columns:repeat(2,1fr); margin-top:2.5rem; }
  .xcard { transform:none !important; opacity:1 !important; }
}

/* ── VOCES — multi-speed drift over a giant offset heading ──────────────── */

.voices { height:320vh; background:#141410; position:relative; z-index:4; }
.voices__sticky { position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; }
.voices__title { position:absolute; inset:0; pointer-events:none; color:var(--cream);
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(3.5rem,9vw,10.5rem); line-height:.95; letter-spacing:-.035em; }
.voices__line { position:absolute; white-space:nowrap; will-change:transform; }
.voices__line--1 { top:16%; left:5vw; }     /* higher, left  */
.voices__line--2 { top:42%; right:6vw; }    /* lower, right — the offset that makes it read */
.vcard { position:absolute; left:var(--x); top:var(--t); width:var(--w); margin:0;
  background:#2E3A52; color:#EDF1F8; border-radius:20px; padding:1.3rem;
  will-change:transform; box-shadow:0 24px 60px rgba(0,0,0,.45); }
.vcard:nth-of-type(even) { background:#39465F; }
.vcard__chan { font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:#9FB6DC; }
.vcard blockquote { margin:.7rem 0 0; font-size:1.02rem; line-height:1.45; }
.vcard__reply { display:block; margin-top:.9rem; padding-top:.8rem; font-size:.86rem; color:#BFD2EE;
  border-top:1px solid rgba(159,182,220,.25); }
.vcard__reply::before { content:"→ "; color:var(--primary); }
.vcard time { display:block; margin-top:.8rem; color:#8FA3C4; font-size:.72rem; }

@media (max-width:1023px), (prefers-reduced-motion: reduce) {
  .voices { height:auto !important; padding-block:var(--pad-y); }
  .voices__sticky { position:static; height:auto; overflow:visible;
    display:grid; gap:1rem; padding-inline:var(--pad-x); }
  .voices__title { position:static; font-size:clamp(2.2rem,10vw,3.5rem); margin-bottom:2rem; }
  .voices__line { position:static; display:block; white-space:normal; transform:none !important; opacity:1 !important; }
  .vcard { position:static; width:100%; transform:none !important; }
}