/* ==========================================================================
   Magnova: "ن"
   Studio dark, daylight paper, violet type. Brand colour never touches food.
   ========================================================================== */

/* ---------- Fonts (self hosted, subset by script) ---------- */
@font-face { font-family: "Reem Kufi"; src: url("../fonts/reemkufi-arabic.woff2") format("woff2"); font-weight: 400 700; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Reem Kufi"; src: url("../fonts/reemkufi-latin.woff2") format("woff2"); font-weight: 400 700; 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+20AC, U+2122, U+2212; }
@font-face { font-family: "Plex Arabic"; src: url("../fonts/plexar-400-arabic.woff2") format("woff2"); font-weight: 400; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Plex Arabic"; src: url("../fonts/plexar-400-latin.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+20AC, U+2122, U+2212; }
@font-face { font-family: "Plex Arabic"; src: url("../fonts/plexar-500-arabic.woff2") format("woff2"); font-weight: 500; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Plex Arabic"; src: url("../fonts/plexar-500-latin.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+20AC, U+2122, U+2212; }
@font-face { font-family: "Plex Arabic"; src: url("../fonts/plexar-600-arabic.woff2") format("woff2"); font-weight: 600; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Plex Arabic"; src: url("../fonts/plexar-600-latin.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+20AC, U+2122, U+2212; }
@font-face { font-family: "Plex Mono"; src: url("../fonts/plexmono-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --ink: #0E0B12;
  --ink-2: #17121D;
  --plum: #1E1030;
  --violet: #5A2B8B;
  --violet-hi: #7A45B8;
  --lilac: #B9A2E8;
  --paper: #F4F0E8;
  --paper-2: #E9E3D8;
  --stone: #CFC7B9;
  --text-dark: #F4F0E8;
  --muted-dark: #A8A0B3;
  --text-light: #17121D;
  --muted-light: #5C5566;

  --f-display: "Reem Kufi", "Plex Arabic", system-ui, sans-serif;
  --f-text: "Plex Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --f-mono: "Plex Mono", ui-monospace, Menlo, monospace;

  /* Type scale, fluid between 360px and 1440px */
  --t-mega: clamp(3.2rem, .9rem + 5.6vw, 6.8rem);
  --t-1: clamp(2.5rem, 1.45rem + 4.6vw, 6rem);
  --t-2: clamp(2rem, 1.35rem + 2.9vw, 4.25rem);
  --t-3: clamp(1.45rem, 1.2rem + 1.1vw, 2.25rem);
  --t-4: clamp(1.15rem, 1.05rem + .45vw, 1.45rem);
  --t-body: clamp(1.02rem, .98rem + .2vw, 1.15rem);
  --t-small: .9rem;
  --t-micro: .72rem;

  --gutter: clamp(1rem, .6rem + 2.2vw, 2.5rem);
  --max: 1360px;
  --section: clamp(5.5rem, 3.5rem + 9vw, 11rem);
  --header-h: 4.5rem;

  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text-dark);
  font-family: var(--f-text);
  font-size: var(--t-body);
  line-height: 1.85;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--lilac); color: var(--ink); }
:focus-visible { outline: 2px solid var(--lilac); outline-offset: 4px; border-radius: 2px; }
.daylight :focus-visible { outline-color: var(--violet); }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: fixed; inset-inline-start: 1rem; top: 1rem; z-index: 100;
  padding: .7rem 1.1rem; background: var(--paper); color: var(--ink); font-weight: 600;
  transform: translateY(-200%); transition: transform .3s var(--ease);
}
.skip:focus { transform: none; }

/* Display headings: Arabic must never be letter-spaced */
.hero__title, .proof__title, .promise__title, .services__title, .chapter__verb,
.month__title, .values__title, .value__word, .founder__title, .cta__title, .stat__num {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: 0;
}

/* ---------- Buttons and links ---------- */
.btn {
  --bg: var(--paper); --fg: var(--ink);
  display: inline-flex; align-items: center; gap: .85rem;
  min-height: 3.25rem; padding: .7rem 1.5rem .8rem;
  background: var(--bg); color: var(--fg);
  font-weight: 600; font-size: 1rem; line-height: 1.2;
  border-radius: 999px;
  transition: background-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.btn .dia {
  width: .55rem; height: .55rem; flex: none;
  background: currentColor; transform: rotate(45deg);
  transition: transform .5s var(--ease), background-color .35s var(--ease);
}
.btn:hover .dia, .btn:focus-visible .dia { transform: translateX(-.35rem) rotate(225deg); background: var(--violet); }
.btn:active { transform: scale(.98); }
.btn--ghost { --bg: transparent; --fg: currentColor; box-shadow: inset 0 0 0 1.5px currentColor; }
.btn--ghost:hover { --bg: rgba(244, 240, 232, .1); }

.link-arrow {
  position: relative; display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 500; padding-block: .4rem;
}
.link-arrow::after { content: "←"; transition: transform .45s var(--ease); }
.link-arrow::before {
  content: ""; position: absolute; inset-inline: 0; bottom: .15rem; height: 1px;
  background: currentColor; transform: scaleX(.0); transform-origin: right; transition: transform .5s var(--ease);
}
.link-arrow:hover::after { transform: translateX(-.35rem); }
.link-arrow:hover::before { transform: scaleX(1); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset-inline: 0; top: 0; z-index: 50;
  height: var(--header-h);
  transition: background-color .4s var(--ease), backdrop-filter .4s var(--ease), transform .5s var(--ease);
}
.site-header.is-solid { background: rgba(14, 11, 18, .78); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header__inner {
  height: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.brand { display: block; color: var(--paper); }
.brand__logo { display: block; width: 7.6rem; height: 2.32rem; }
.nav__list { display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2.5rem); font-size: .98rem; }
.nav__list > li > a:not(.btn) { position: relative; color: var(--muted-dark); transition: color .3s var(--ease); padding-block: .5rem; }
.nav__list > li > a:not(.btn):hover { color: var(--paper); }
.nav__list .btn { min-height: 2.75rem; padding: .55rem 1.2rem .65rem; font-size: .95rem; }
.menu-btn { display: none; }

@media (max-width: 860px) {
  .menu-btn {
    display: inline-flex; align-items: center; gap: .7rem; position: relative; z-index: 2;
    min-height: 2.75rem; padding-inline: .9rem; border-radius: 999px;
    box-shadow: inset 0 0 0 1.5px rgba(244, 240, 232, .28); font-size: .95rem;
  }
  .menu-btn__icon { position: relative; width: 1.1rem; height: .6rem; }
  .menu-btn__icon i { position: absolute; inset-inline: 0; height: 1.5px; background: currentColor; transition: transform .45s var(--ease), top .45s var(--ease); }
  .menu-btn__icon i:first-child { top: 0; }
  .menu-btn__icon i:last-child { top: calc(100% - 1.5px); }
  .menu-btn[aria-expanded="true"] .menu-btn__icon i:first-child { top: calc(50% - .75px); transform: rotate(45deg); }
  .menu-btn[aria-expanded="true"] .menu-btn__icon i:last-child { top: calc(50% - .75px); transform: rotate(-45deg); }

  .nav {
    position: fixed; inset: 0; z-index: 1;
    background: var(--ink);
    padding: calc(var(--header-h) + 2.5rem) var(--gutter) 2.5rem;
    display: flex; flex-direction: column;
    clip-path: circle(0 at 2.5rem 2.25rem);
    visibility: hidden;
    transition: clip-path .7s var(--ease-io), visibility 0s .7s;
  }
  .nav.is-open { clip-path: circle(150% at 2.5rem 2.25rem); visibility: visible; transition: clip-path .8s var(--ease-io); }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; flex: 1; }
  .nav__list > li > a:not(.btn) {
    display: block; padding-block: .85rem; border-bottom: 1px solid rgba(244, 240, 232, .12);
    font-family: var(--f-display); font-weight: 700; font-size: clamp(2.2rem, 10vw, 3rem); color: var(--paper); line-height: 1.35;
  }
  .nav__cta-item { margin-top: auto; }
  .nav__list .btn { width: 100%; justify-content: space-between; min-height: 3.5rem; font-size: 1.05rem; padding-inline: 1.5rem; }
  body.menu-open { overflow: hidden; }
}

/* ---------- Hero and aperture ---------- */
.hero { position: relative; background: var(--ink); }
.hero__stage {
  position: relative;
  min-height: 100svh;
  padding: calc(var(--header-h) + clamp(1.5rem, 5vh, 4rem)) var(--gutter) clamp(1.5rem, 4vh, 2.5rem);
  max-width: var(--max); margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  column-gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
.hero__copy { grid-column: 1; grid-row: 1; position: relative; z-index: 3; }
.hero__title { font-size: var(--t-mega); line-height: 1.12; color: var(--paper); }
.hero__title .line { display: block; white-space: nowrap; overflow: hidden; padding-block: .06em; margin-block: -.06em; }
.hero__title .line > span { display: inline-block; }
.hero__title .line--soft { color: var(--lilac); font-weight: 500; }
.hero__lede { margin-top: clamp(1.25rem, 3vh, 2rem); max-width: 34rem; color: var(--muted-dark); font-size: var(--t-4); line-height: 1.8; }
.hero__actions { margin-top: clamp(1.5rem, 4vh, 2.5rem); display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }

.lens { grid-column: 2; grid-row: 1; position: relative; width: min(100%, 72vh, 36rem); aspect-ratio: 1; justify-self: center; z-index: 1; }
.lens__frame { position: absolute; inset: 10.1%; border-radius: 50%; overflow: hidden; background: var(--paper-2); }
.lens__frame > img, .lens__frame > .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lens__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.lens__arc { fill: none; stroke: var(--violet); stroke-width: 30; stroke-dasharray: 1; stroke-dashoffset: 0; }
.lens__dot { fill: var(--paper); transform-box: fill-box; transform-origin: center; }

.hero__caption {
  position: absolute; z-index: 4; inset-inline-start: var(--gutter); bottom: clamp(1.25rem, 4vh, 2.25rem);
  padding: .45rem .9rem .5rem; background: var(--paper); color: var(--ink);
  font-size: var(--t-micro); font-weight: 500; letter-spacing: 0; border-radius: 999px;
  opacity: 0; pointer-events: none;
}
.hero__caption span { font-family: var(--f-mono); letter-spacing: .06em; margin-inline-end: .35rem; }
.hero__place {
  grid-column: 1 / -1; grid-row: 2; position: relative; z-index: 3;
  margin-top: 2rem; padding-top: 1rem; border-top: 1px solid rgba(244, 240, 232, .12);
  color: var(--muted-dark); font-size: var(--t-small);
}

/* Intro choreography (only when motion is welcome) */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__title .line > span { transform: translateY(110%); animation: rise 1.1s var(--ease) forwards; }
  .js .hero__title .line:nth-child(2) > span { animation-delay: .12s; }
  .js .hero__lede, .js .hero__actions, .js .hero__place { opacity: 0; animation: fade-up 1s var(--ease) forwards; }
  .js .hero__lede { animation-delay: .35s; }
  .js .hero__actions { animation-delay: .48s; }
  .js .hero__place { animation-delay: .7s; }
  .js .lens__frame { opacity: 0; transform: scale(.94); animation: lens-in 1.4s var(--ease) .35s forwards; }
  .js .lens__arc { stroke-dashoffset: 1; animation: draw 1.6s var(--ease-io) .15s forwards; }
  .js .lens__dot { opacity: 0; transform: translate(40%, -40%) rotate(-90deg) scale(.4); animation: dot-in .9s var(--ease) 1.45s forwards; }
}
@keyframes rise { to { transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }
@keyframes lens-in { to { opacity: 1; transform: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes dot-in { to { opacity: 1; transform: none; } }

/* Scroll driven aperture: JS adds .is-scrubbed and feeds --p, --cx, --cy, --r, --fw, --fh, --rw */
.hero.is-scrubbed { height: 250vh; }
.hero.is-scrubbed .hero__stage { position: sticky; top: 0; height: 100svh; min-height: 0; overflow: hidden; max-width: none; padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); }
.hero.is-scrubbed .lens { position: static; }
.hero.is-scrubbed .lens__frame {
  position: absolute; inset: auto; left: var(--cx); top: var(--cy);
  width: var(--fw); height: var(--fh); translate: -50% -50%;
  border-radius: 0; clip-path: circle(var(--r) at 50% 50%);
  will-change: clip-path, left, top;
}
.hero.is-scrubbed .lens__ring {
  inset: auto; left: var(--cx); top: var(--cy); width: var(--rw); height: var(--rw); translate: -50% -50%;
  opacity: clamp(0, 1 - var(--p) * 4, 1); z-index: 2;
}
.hero.is-scrubbed .hero__copy { opacity: calc(1 - var(--p) * 3); transform: translateY(calc(var(--p) * -6rem)); }
.hero.is-scrubbed .hero__place { opacity: calc(1 - var(--p) * 4); }
.hero.is-scrubbed .hero__caption { opacity: clamp(0, (var(--p) - .82) * 8, 1); }

/* ---------- Placeholders: clearly marked, never fake ---------- */
.ph {
  position: relative; display: grid; place-items: center; overflow: hidden;
  background: var(--paper-2); color: var(--muted-light);
  container-type: inline-size;
}
.ph__grid {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, transparent calc(33.333% - .5px), rgba(23, 18, 29, .14) calc(33.333% - .5px) calc(33.333% + .5px), transparent calc(33.333% + .5px) calc(66.666% - .5px), rgba(23, 18, 29, .14) calc(66.666% - .5px) calc(66.666% + .5px), transparent calc(66.666% + .5px)),
    linear-gradient(to bottom, transparent calc(33.333% - .5px), rgba(23, 18, 29, .14) calc(33.333% - .5px) calc(33.333% + .5px), transparent calc(33.333% + .5px) calc(66.666% - .5px), rgba(23, 18, 29, .14) calc(66.666% - .5px) calc(66.666% + .5px), transparent calc(66.666% + .5px));
}
.ph__grid::before, .ph__grid::after {
  content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 2.75rem; height: 2.75rem; border: 1px solid rgba(23, 18, 29, .35); border-radius: 50%;
}
.ph__grid::after { width: .4rem; height: .4rem; border: 0; background: var(--violet); border-radius: 0; rotate: 45deg; }
.ph__text {
  position: relative; display: grid; gap: .35rem; justify-items: center; text-align: center;
  max-width: min(22rem, 78%); padding: .9rem 1rem; margin-top: 7.5rem;
  background: rgba(244, 240, 232, .9); border-radius: 4px;
}
.ph__dims { white-space: nowrap; font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .08em; color: var(--violet); }
.ph__dims::before { content: "PLACEHOLDER  "; }
.ph__note { font-size: .82rem; line-height: 1.7; color: var(--text-light); }
.ph--dark { background: var(--ink-2); color: var(--muted-dark); }
.ph--dark .ph__grid { filter: invert(1); opacity: .5; }
.ph--dark .ph__text { background: rgba(14, 11, 18, .85); }
.ph--dark .ph__note { color: var(--paper); }
.ph--dark .ph__dims { color: var(--lilac); }
.lens .ph__text { margin-top: 0; max-width: min(17rem, 62vw); }
.lens .ph__note { font-size: .78rem; }
.lens .ph__grid::before, .lens .ph__grid::after { display: none; }
@container (max-width: 15rem) { .ph__note { display: none; } }

/* ---------- Section skins ---------- */
.daylight { background: var(--paper); color: var(--text-light); }
.studio { background: var(--ink); color: var(--text-dark); }

/* ---------- Proof ---------- */
.proof { padding-block: var(--section) calc(var(--section) * .55); }
.proof__grid {
  display: grid; gap: 2.5rem var(--gutter);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
}
.proof__title { grid-column: 1 / span 7; font-size: var(--t-2); line-height: 1.25; color: var(--text-light); max-width: 15ch; }
.stat { grid-column: span 4; border-top: 1px solid var(--stone); padding-top: 1rem; }
.stat__num { font-size: var(--t-1); line-height: 1; color: var(--violet); font-weight: 600; text-align: right; }
.stat__num span { font-size: .5em; margin-inline-start: .08em; }
.stat__label { margin-top: .6rem; color: var(--muted-light); font-size: var(--t-small); }
.stat--lead { grid-column: 8 / span 5; grid-row: 1; border-top: 0; padding-top: 0; }
.stat--lead .stat__num { font-size: clamp(5.5rem, 2rem + 15vw, 15rem); color: var(--text-light); line-height: .85; }
.proof__note { grid-column: 9 / span 4; font-size: var(--t-small); color: var(--muted-light); }
.proof__note a { color: var(--violet); font-weight: 600; border-bottom: 1px solid currentColor; }

/* ---------- Promise ---------- */
.promise { padding-block: calc(var(--section) * .55) var(--section); }
.promise__title { font-size: var(--t-1); line-height: 1.3; max-width: 18ch; color: var(--text-light); }
.promise__title .w { color: #8E867A; transition: color .25s linear; }
.promise__title .w.is-on { color: var(--text-light); }
.promise__title .w.is-key.is-on { color: var(--violet); }
.promise__body { margin-top: clamp(2rem, 5vw, 3.5rem); margin-inline-start: auto; max-width: 34rem; display: grid; gap: 1rem; color: var(--muted-light); font-size: var(--t-4); }
.promise__shots { margin-top: clamp(3.5rem, 8vw, 7rem); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: end; }
.shot .ph, .shot img { width: 100%; }
.shot figcaption { margin-top: .9rem; font-size: var(--t-small); color: var(--muted-light); }
.shot--tall { grid-column: 1 / span 5; }
.shot--tall .ph, .shot--tall img { aspect-ratio: 4 / 5; }
.shot--wide { grid-column: 7 / span 6; margin-bottom: 12%; }
.shot--wide .ph, .shot--wide img { aspect-ratio: 4 / 3; }

/* ---------- Services ---------- */
.services { padding-block: var(--section); }
.services__title { font-size: var(--t-2); line-height: 1.3; max-width: 20ch; margin-bottom: clamp(3rem, 7vw, 6rem); }
.services__title em { font-style: normal; color: var(--lilac); font-weight: 500; }
.chapter {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gutter);
  padding-block: clamp(2rem, 4vw, 3.5rem); border-top: 1px solid rgba(244, 240, 232, .14);
}
.chapter__verb {
  font-size: clamp(4.5rem, 1rem + 12vw, 11rem); line-height: .95; color: #6A5B80;
  transition: color .6s var(--ease);
  align-self: start; position: sticky; top: calc(var(--header-h) + 1.5rem);
  padding-block: .1em;
}
.chapter:hover .chapter__verb, .chapter:focus-within .chapter__verb, .chapter.is-active .chapter__verb { color: var(--lilac); }
.chapter__lead { font-size: var(--t-3); line-height: 1.55; font-weight: 600; color: var(--paper); margin-bottom: 1.5rem; max-width: 26ch; }
.svc { border-top: 1px solid rgba(244, 240, 232, .14); }
.svc:last-child { border-bottom: 1px solid rgba(244, 240, 232, .14); }
.svc summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: 1.2rem; font-size: var(--t-4); font-weight: 500; color: var(--paper);
  transition: color .3s var(--ease), padding .4s var(--ease);
}
.svc summary::-webkit-details-marker { display: none; }
.svc summary:hover { color: var(--lilac); padding-inline-start: .4rem; }
.svc__toggle { position: relative; width: 1rem; height: 1rem; flex: none; }
.svc__toggle::before, .svc__toggle::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: currentColor; transition: transform .45s var(--ease); }
.svc__toggle::after { transform: rotate(90deg); }
.svc[open] .svc__toggle::after { transform: rotate(0); }
.svc__body { padding-bottom: 1.6rem; color: var(--muted-dark); max-width: 38rem; }
.svc__body ul { margin-top: 1rem; display: grid; gap: .55rem; }
.svc__body li { position: relative; padding-inline-start: 1.25rem; color: var(--paper); }
.svc__body li::before { content: ""; position: absolute; inset-inline-start: 0; top: .78em; width: .38rem; height: .38rem; background: var(--lilac); transform: rotate(45deg); }
@media (prefers-reduced-motion: no-preference) {
  .svc[open] .svc__body { animation: fade-up .6s var(--ease); }
}

/* ---------- Month ---------- */
.month { background: var(--plum); color: var(--text-dark); padding-block: var(--section); overflow: hidden; }
.month__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gutter); align-items: end; }
.month__title { font-size: var(--t-1); line-height: 1.2; }
.month__intro { color: var(--muted-dark); font-size: var(--t-4); }
.month__track { position: relative; height: 3.25rem; margin-top: clamp(3rem, 7vw, 5.5rem); }
.month__ticks {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(to left, rgba(244, 240, 232, .32) 0 1px, transparent 1px calc(100% / 30));
  -webkit-mask: linear-gradient(to top, #000 0 45%, transparent 45%); mask: linear-gradient(to top, #000 0 45%, transparent 45%);
}
.month__fill {
  position: absolute; inset-inline-start: 0; bottom: 0; height: 3px; width: calc(var(--mp, 1) * 100%);
  background: var(--lilac);
}
.month__fill::after {
  content: ""; position: absolute; left: 0; bottom: -4px; width: 11px; height: 11px; background: var(--paper); transform: rotate(45deg) translate(-50%, 0);
}
.month__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); margin-top: 1.75rem; }
.step { position: relative; }
.step__when { font-size: var(--t-small); color: var(--lilac); }
.step__name { font-size: var(--t-3); font-weight: 600; margin-block: .35rem .6rem; line-height: 1.4; }
.step p:last-child { color: var(--muted-dark); max-width: 22rem; }

/* ---------- Values ---------- */
.values { padding-block: var(--section); }
.values__title { font-size: var(--t-2); line-height: 1.25; margin-bottom: clamp(2.5rem, 6vw, 5rem); color: var(--text-light); }
.value {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gutter); align-items: center;
  padding-block: clamp(1rem, 2.5vw, 2rem); border-top: 1px solid var(--stone);
}
.value:last-child { border-bottom: 1px solid var(--stone); }
.value__word {
  font-family: var(--f-display); font-weight: 700; font-size: clamp(3.25rem, 1.2rem + 8vw, 8.5rem); line-height: 1.05;
  color: var(--text-light); transition: color .5s var(--ease), transform .6s var(--ease); transform-origin: right center;
  position: relative; display: inline-block;
}
.value__word::before {
  content: ""; position: absolute; inset-inline-end: -.42em; top: 52%; width: .16em; height: .16em; background: var(--violet); transform: rotate(45deg) scale(0);
  transition: transform .5s var(--ease);
}
.value:hover .value__word, .value.is-active .value__word { color: var(--violet); }
.value:hover .value__word::before, .value.is-active .value__word::before { transform: rotate(45deg) scale(1); }
.value__text { color: var(--muted-light); font-size: var(--t-4); max-width: 24rem; }

/* ---------- Founder ---------- */
.founder { padding-block: var(--section); }
.founder__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: center; }
.founder__photo { grid-column: 8 / span 5; grid-row: 1; }
.founder__photo .ph, .founder__photo img { aspect-ratio: 4 / 5; width: 100%; }
.founder__copy { grid-column: 1 / span 6; grid-row: 1; }
.founder__title { font-size: var(--t-1); line-height: 1.2; }
.founder__role { margin-top: 1rem; color: var(--lilac); font-size: var(--t-4); }
.founder__story { margin-top: 1.75rem; color: var(--muted-dark); font-size: var(--t-4); max-width: 34rem; }
.founder__links { margin-top: 2.5rem; display: grid; border-top: 1px solid rgba(244, 240, 232, .14); max-width: 34rem; }
.founder__links a {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding-block: 1rem; border-bottom: 1px solid rgba(244, 240, 232, .14);
  transition: color .3s var(--ease), padding .4s var(--ease);
}
.founder__links a:hover { color: var(--lilac); padding-inline: .5rem; }
.founder__links .handle { font-family: var(--f-mono); font-size: .9rem; letter-spacing: .02em; color: var(--muted-dark); }

/* ---------- CTA ---------- */
.cta { background: var(--violet); color: var(--paper); padding-block: var(--section); overflow: hidden; }
.cta__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gutter); align-items: center; }
.cta__copy { grid-column: 1; grid-row: 1; position: relative; z-index: 1; }
.cta__title { font-size: var(--t-1); line-height: 1.2; }
.cta__text { margin-top: 1.75rem; max-width: 34rem; font-size: var(--t-4); color: rgba(244, 240, 232, .86); }
.cta__actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: .9rem; }
.cta .btn--light { --fg: var(--violet); }
.cta .btn--light:hover .dia { background: var(--ink); }
.cta__mark { grid-column: 2; grid-row: 1; width: min(100%, 30rem); justify-self: center; overflow: visible; }
.cta__arc { fill: none; stroke: var(--paper); stroke-width: 22; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .9; }
.cta__dot { fill: var(--paper); transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .js .cta__arc { stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease-io); }
  .js .cta__dot { opacity: 0; transform: translate(60%, -60%) rotate(-90deg); transition: opacity .6s var(--ease) 1.3s, transform 1s var(--ease) 1.3s; }
  .js .cta.is-in .cta__arc { stroke-dashoffset: 0; }
  .js .cta.is-in .cta__dot { opacity: 1; transform: none; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--muted-dark); padding-block: 3.5rem 2.5rem; font-size: var(--t-small); }
.site-footer__grid { display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem 3rem; align-items: center; }
.site-footer__brand { color: var(--paper); }
.site-footer__brand svg { display: block; width: 9rem; height: 2.75rem; }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; }
.site-footer__nav a:hover { color: var(--paper); }
.site-footer__copy { grid-column: 1 / -1; padding-top: 1.5rem; border-top: 1px solid rgba(244, 240, 232, .1); }

/* ---------- Reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(1.75rem); transition: opacity 1s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--d, 0) * 110ms); }
  .js .reveal.is-in { opacity: 1; transform: none; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .proof__title { grid-column: 1 / -1; }
  .stat { grid-column: span 6; }
  .stat--lead { grid-column: 1 / -1; grid-row: auto; }
  .proof__note { grid-column: 1 / -1; }
  .month__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
  .founder__photo { grid-column: 7 / span 6; }
  .founder__copy { grid-column: 1 / span 6; }
}

/* ---------- Stacked hero: phones and portrait tablets ---------- */
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
  .hero__stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    align-items: start;
    padding-top: calc(var(--header-h) + clamp(1.75rem, 5vh, 4rem));
  }
  .hero__copy { grid-column: 1; grid-row: 1; }
  .lens { grid-column: 1; grid-row: 2; width: min(100%, 34rem, 46vh); align-self: end; justify-self: center; margin-top: 1.5rem; }
  .hero__place { grid-row: 3; margin-top: 1.25rem; }
}

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  :root { --header-h: 4rem; }
  .brand__logo { width: 6.6rem; height: 2rem; }

  .hero__title { font-size: 13.2vw; }
  .hero__lede { font-size: 1.05rem; }

  .proof__title { max-width: none; }
  .stat { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-direction: row-reverse; }
  .stat--lead { display: block; }
  .stat--lead .stat__num { text-align: right; }
  .stat__label { margin-top: 0; }
  .stat--lead .stat__label { margin-top: .75rem; }

  .promise__shots { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .shot--tall, .shot--wide { grid-column: 1; margin: 0; }
  .shot--tall { width: 82%; }
  .shot--wide { width: 88%; margin-inline-start: auto; }

  .chapter { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .chapter__verb { position: static; font-size: clamp(4rem, 22vw, 6rem); }

  .month__head { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .month__track { display: none; }
  .month__steps { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 2.5rem; position: relative; }
  .month__steps::before { content: ""; position: absolute; inset-inline-start: .3rem; top: .6rem; bottom: .6rem; width: 1px; background: rgba(244, 240, 232, .2); }
  .month__steps::after { content: ""; position: absolute; inset-inline-start: .3rem; top: .6rem; width: 1px; height: calc((100% - 1.2rem) * var(--mp, 1)); background: var(--lilac); }
  .step { padding-inline-start: 2rem; padding-bottom: 2rem; }
  .step::before { content: ""; position: absolute; inset-inline-start: 0; top: .55rem; width: .62rem; height: .62rem; background: var(--paper); transform: rotate(45deg); }

  .value { grid-template-columns: minmax(0, 1fr); gap: .25rem; }

  .founder__grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .founder__photo, .founder__copy { grid-column: 1; grid-row: auto; }
  .founder__photo { width: 86%; }

  .cta__grid { grid-template-columns: minmax(0, 1fr); }
  .cta__mark { grid-column: 1; grid-row: 1; width: 9rem; justify-self: start; margin-bottom: 1.5rem; }
  .cta__copy { grid-row: 2; }
  .cta__actions .btn { width: 100%; justify-content: space-between; }

  .site-footer__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Short, wide phones in landscape: keep the hero readable */
@media (max-height: 520px) and (orientation: landscape) {
  .hero__title { font-size: clamp(2.4rem, 6vw, 3.6rem); }
  .lens { width: min(100%, 78vh); }
}

/* ---------- Reduced motion: final states, no scrubbing ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}