/* ACHRAF OUAHAB MEDIA LLC: multi-page site
   Loaded after styles.css. Shared page parts (page heroes, footer, menu,
   motion) and the components of the About, Use cases, Blog and Contact pages. */

@property --gap { syntax: '<length>'; initial-value: 46px; inherits: true; }

/* ---------- Design tokens (shared by every page; styles.css keeps the palette) ---------- */
:root {
  /* radii: one scale */
  --r-xs: 10px;   /* small tiles, square chips, platform tiles */
  --r-sm: 14px;   /* icon wells, inner panels, agent nodes */
  --r-md: 20px;   /* grid cards, flow steps, FAQ panel, ucviz card frame */
  --r-lg: 28px;   /* feature panels, stack cards, ucviz hero frame, covers */
  --r-xl: 36px;   /* About arch plate, Contact call card */
  --r-pill: 999px;
  /* hairlines */
  --line-d: rgba(245, 239, 230, .10); --line-d2: rgba(245, 239, 230, .16);
  --line-l: rgba(20, 17, 16, .10);    --line-l2: rgba(20, 17, 16, .16);
  /* depth */
  --sh-raise: inset 0 1px 0 rgba(245, 239, 230, .05);
  --sh-card-l: inset 0 1px 0 rgba(255, 255, 255, .65), 0 18px 40px -24px rgba(20, 17, 16, .28);
  --sh-float-d: 0 40px 100px -40px rgba(0, 0, 0, .7), 0 30px 120px -50px rgba(215, 55, 43, .38);
  --sh-float-l: 0 30px 70px -32px rgba(20, 17, 16, .28);
  /* motion */
  --dur-1: .16s;  /* color and opacity on hover */
  --dur-2: .28s;  /* chips, ticks */
  --dur-3: .6s;   /* component state: gate, crossfades */
  --dur-4: 1.1s;  /* entrances, word rise */
  --dur-5: 1.6s;  /* hero image settles */
  --ease-io: cubic-bezier(.65, 0, .35, 1);  /* token travel, clip reveals */
  --ease-expo: cubic-bezier(.16, 1, .3, 1); /* CSS stand-in for GSAP expo.out */
  /* color additions */
  --green-ink: #276e43; /* "Live" text on light backgrounds (AA) */
  /* layout */
  --gap: 20px;        /* every card grid */
  --hero-top: 150px;
}
@media (max-width: 960px) { :root { --hero-top: 120px; } }
@media (max-width: 600px) { :root { --r-lg: 24px; --r-xl: 30px; --hero-top: 108px; } }
@media (max-width: 400px) { :root { --gutter: 20px; } }
/* keeps a name like "3-Layer" from breaking at its hyphen */
.nw { white-space: nowrap; }

/* Headings balance their lines; body text avoids orphans */
:where(h1, h2, h3) { text-wrap: balance; }
:where(p, li, dd, blockquote) { text-wrap: pretty; }

/* ---------- Page transitions (browsers that support them) ---------- */
@view-transition { navigation: auto; }
/* The header holds still while the page changes. The name is only set during a transition
   (html.vt-on, see layout() in partials.mjs): a named element is a backdrop root, which
   would stop the pill's frosted blur from seeing the page behind it the rest of the time. */
.vt-on .site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: vtOut .32s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vtIn .6s cubic-bezier(.2, .8, .1, 1) both; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-12px); filter: blur(6px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(22px); } }

/* ---------- Header ----------
   The floating dark pill, on every page. It never hides. At the top it is
   lighter; after 24px of scroll it deepens, gains a shadow and condenses
   (14px to 10px from the top, logo 52px to 44px). */
.site-header { transition: transform .35s var(--ease); }
.site-header.is-scrolled { transform: translateY(-4px); }
.nav-pill {
  background: rgba(20, 17, 16, .72); box-shadow: none;
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  transition: background .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header.is-scrolled .nav-pill { background: rgba(20, 17, 16, .88); box-shadow: 0 18px 50px -24px rgba(0, 0, 0, .6); }
.brand { min-height: 44px; }
.brand img { transition: height .35s var(--ease); }
.site-header.is-scrolled .brand img { height: 44px; }
.nav a { padding: 9px 15px; }
.nav a:hover { color: var(--cream); }
/* the links sit on the true center of the pill, whatever the widths on either side */
@media (min-width: 960px) {
  .nav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
}
/* Reading progress: blog posts and legal pages only */
.nav-pill__progress { display: none; }
.site-header--progress .nav-pill__progress { display: block; }
.btn-book { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.btn-book:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -10px rgba(215, 55, 43, .85); }
.btn-book:hover .btn-book__arrow { transform: rotate(-45deg); }
.burger span { transition: transform .35s var(--ease); }
.burger:hover span:first-child { transform: translateX(-2px); }
.burger:hover span:last-child { transform: translateX(2px); }
@media (max-width: 767px) {
  .nav-pill { padding: 5px 5px 5px 16px; }
  .brand img, .site-header.is-scrolled .brand img { height: 42px; }
}

/* ---------- Mobile menu ----------
   Opens as a circle growing from the burger (main.js sets --mx/--my), the
   ember glows in at the bottom left and the rows rise one after another.
   The close button sits exactly where the burger was. */
/* The menu scrolls on its own when it is taller than the screen (landscape phones):
   partials.mjs marks it data-lenis-prevent so Lenis, stopped while it is open, lets it scroll. */
.menu {
  isolation: isolate; gap: 0; padding: 0 24px max(24px, env(safe-area-inset-bottom)); animation: none;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  clip-path: circle(0px at var(--mx, calc(100% - 45px)) var(--my, 43px));
  transition: clip-path .6s var(--ease-io);
}
.menu.is-open { clip-path: circle(150% at var(--mx, calc(100% - 45px)) var(--my, 43px)); }
.menu.is-closing { transition-duration: .35s; }
.menu__glow {
  position: fixed; z-index: -1; inset: 0; /* fixed: it stays put while a tall menu scrolls */ width: auto; height: auto; border-radius: 0; filter: none; pointer-events: none;
  background: radial-gradient(75% 48% at 0% 100%, rgba(215, 55, 43, .34), rgba(138, 31, 23, .12) 55%, transparent 80%);
  opacity: 0; transition: opacity 1s var(--ease) .2s;
}
.menu.is-open .menu__glow { opacity: 1; }
.menu.is-closing .menu__glow { transition-delay: 0s; transition-duration: .3s; }
.menu__top { flex: none; padding-top: 20px; margin: 0 -2px 22px 9px; }
.site-header.is-scrolled + .menu .menu__top { padding-top: 16px; }
.menu__top img { height: 42px; }
.menu__close { display: flex; align-items: center; justify-content: center; transition: border-color var(--dur-1), background var(--dur-1); }
.menu__close:hover { border-color: rgba(245, 239, 230, .4); background: rgba(245, 239, 230, .04); }
.menu__close span { position: relative; width: 18px; height: 18px; }
.menu__close span::before, .menu__close span::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; border-radius: 1px; background: var(--cream);
  transition: transform .5s var(--ease-expo) .15s;
}
.menu.is-open .menu__close span::before { transform: rotate(45deg); }
.menu.is-open .menu__close span::after { transform: rotate(-45deg); }

.menu__links { flex: none; display: flex; flex-direction: column; gap: 0; }
.menu__links .menu__link {
  align-self: stretch; display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 2px 0;
  font-size: 36px; font-weight: 500; line-height: 1.1; letter-spacing: -.04em; color: var(--cream); animation: none;
}
.menu__n { flex: none; width: 20px; align-self: flex-start; margin-top: 15px; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .12em; color: var(--muted); transform: none; }
.menu__links a[aria-current="page"], .menu__links a[aria-current="page"] .menu__n { color: var(--red-bright); }
/* The three systems under "Use cases" */
.menu__sub { display: flex; flex-direction: column; margin: 0 0 8px 36px; padding: 0 0 0 16px; list-style: none; border-left: 1px solid var(--line-d2); }
.menu__links .menu__sub-link {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; min-height: 44px; padding: 7px 0;
  font-size: 16px; font-weight: 500; line-height: 1.25; letter-spacing: -.01em; color: var(--muted-light); animation: none;
  transition: color var(--dur-1);
}
.menu__links .menu__sub-link:hover { color: var(--cream); }

.menu__foot { margin-top: auto; padding-top: 28px; display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
.menu__book, .menu__book .cta-spin__inner { width: 100%; justify-content: center; }
.menu__social { display: flex; justify-content: center; gap: 12px; }
.menu__ic {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-d2); background: rgba(245, 239, 230, .04); color: var(--cream);
  transition: border-color var(--dur-1), background var(--dur-1);
}
.menu__ic:hover { border-color: rgba(239, 90, 76, .6); background: rgba(215, 55, 43, .12); }
.menu__mail { position: relative; align-self: center; font-size: 14px; color: var(--muted-light); border-bottom: 1px solid var(--line-d2); padding-bottom: 2px; }
.menu__mail::after { content: ''; position: absolute; inset: -12px -8px; } /* 44px tap area, same look */

@keyframes menuRise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
.menu.is-open .menu__link, .menu.is-open .menu__sub-link, .menu.is-open .menu__foot { animation: menuRise .5s var(--ease-expo) calc(var(--d, 0s) + .06s) both; }
@media (max-height: 700px) {
  /* short phones: everything still fits one screen at 375 x 667; tap rows stay at 44px or more */
  .menu__links .menu__link { min-height: 46px; font-size: 32px; }
  .menu__n { margin-top: 12px; }
  .menu__top { margin-bottom: 6px; }
  .menu__links .menu__sub-link { gap: 4px; padding: 5px 0; }
  .menu__foot { padding-top: 14px; gap: 12px; }
}
@media (min-width: 768px) {
  /* tablets: the bar is taller (52px logo, Book button), so the menu's top row follows it */
  .menu { padding-left: 32px; padding-right: 32px; }
  .menu__top { padding-top: 22px; margin: 0 -7px 28px 3px; }
  .menu__top img { height: 52px; }
  .site-header.is-scrolled + .menu .menu__top { padding-top: 18px; }
  .site-header.is-scrolled + .menu .menu__top img { height: 44px; }
  .menu__links, .menu__foot { width: min(100%, 560px); }
}
@media (min-width: 768px) and (min-height: 860px) {
  .menu__links .menu__link { min-height: 66px; font-size: 48px; }
  .menu__n { margin-top: 19px; }
  .menu__links .menu__sub-link { font-size: 17px; }
}
@media (max-height: 500px) {
  /* landscape phones: compact rows (taps stay 44px), name and chip side by side; the rest scrolls */
  .menu__top, .site-header.is-scrolled + .menu .menu__top { padding-top: 12px; margin-bottom: 4px; }
  .menu__top img, .site-header.is-scrolled + .menu .menu__top img { height: 42px; }
  .menu__links .menu__link { min-height: 44px; font-size: 28px; }
  .menu__n { margin-top: 9px; }
  .menu__links .menu__sub-link { flex-direction: row; justify-content: flex-start; align-items: center; gap: 12px; padding: 4px 0; }
  .menu__foot { padding-top: 18px; }
}

/* ---------- Status chip ----------
   <span class="status-chip status-chip--live">Available for new projects</span>  (green pulsing dot)
   Used on the About hero only. Use cases carry no status labels.
   --light on cream/sand/paper, --plain drops the dot. */
.status-chip {
  display: inline-flex; align-items: center; gap: 7px; flex: none; width: max-content; max-width: 100%;
  padding: 6px 11px; border-radius: var(--r-pill); border: 1px solid var(--line-d2); background: transparent;
  font: 500 10.5px/1.2 'Geist Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  color: var(--muted);
}
.status-chip::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1.25px currentColor; opacity: .85; }
.status-chip--live { color: #9fe8b5; border-color: rgba(120, 220, 150, .3); }
.status-chip--live::before { background: var(--green); box-shadow: none; opacity: 1; animation: pulse 1.8s infinite; }
.status-chip--light { border-color: var(--line-l2); color: var(--label-on-light); }
.status-chip--light.status-chip--live { color: var(--green-ink); border-color: rgba(39, 110, 67, .32); }
.status-chip--light.status-chip--live::before { outline: 1px solid rgba(39, 110, 67, .45); }
.status-chip--plain::before { display: none; }

/* ---------- Facts bar ----------
   Hero facts as one row of cells between hairlines (no boxes). The hairlines
   draw in and the cells fade up 80ms apart (main.js). 2 x 2 on phones.
   <dl class="facts-bar">  (add facts-bar--light on light heroes, facts-bar--center in a centered block)
     <div><dt>Role</dt><dd>Founder</dd></div> ...
   </dl>
   Columns size to their content (a long value gets more room before it wraps).
   Force your own widths with style="--fb-cols: 1fr 1.6fr 1fr". */
.facts-bar {
  --fb-line: var(--line-d2); --fb-k: var(--muted); --fb-v: var(--cream);
  position: relative; display: grid; grid-template-columns: var(--fb-cols, none); grid-auto-flow: column; grid-auto-columns: auto;
  margin: 0; padding: 0; list-style: none;
}
.facts-bar--light { --fb-line: var(--line-l2); --fb-k: var(--label-on-light); --fb-v: var(--ink); }
.facts-bar--center { width: max-content; max-width: 100%; margin-inline: auto; text-align: left; }
.facts-bar::before, .facts-bar::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: var(--fb-line); transform-origin: left; }
.facts-bar::before { top: 0; }
.facts-bar::after { bottom: 0; }
.facts-bar > * { position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: 8px; min-width: 0; margin: 0; padding: 18px 20px; }
.facts-bar > :first-child { padding-left: 0; }
.facts-bar > :last-child { padding-right: 0; }
.facts-bar > * + *::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 1px; background: var(--fb-line); transform-origin: top; }
.facts-bar dt, .facts-bar dd { margin: 0; }
.facts-bar dt, .facts-bar__k { font: 500 11px/1.3 'Geist Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--fb-k); }
.facts-bar dd, .facts-bar__v { font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -.02em; color: var(--fb-v); text-wrap: balance; }
/* icon links inside a fact (e.g. "Elsewhere"): 44px hit areas, 36px visible circles */
.facts-bar .facts-bar__icons { display: flex; gap: 4px; margin: -11px 0 -11px -4px; }
.facts-bar__icons a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: var(--fb-v); }
.facts-bar__icons a::before { content: ''; position: absolute; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--fb-line); transition: border-color var(--dur-1), background var(--dur-1); }
.facts-bar__icons a { position: relative; }
.facts-bar__icons a:hover::before { border-color: rgba(215, 55, 43, .6); background: rgba(215, 55, 43, .08); }
.facts-bar__icons svg { position: relative; width: 17px; height: 17px; }
@media (max-width: 600px) {
  .facts-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; }
  .facts-bar > * { padding: 16px 16px 16px 0; }
  .facts-bar > :nth-child(even) { padding: 16px 0 16px 16px; }
  .facts-bar > * + *::before { display: none; }
  .facts-bar > :nth-child(even)::before { display: block; content: ''; top: 16px; bottom: 16px; }
  .facts-bar > :nth-child(n+3)::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--fb-line); transform-origin: left; }
  /* an odd cell out (3 facts) takes the whole last row */
  .facts-bar > :last-child:nth-child(odd) { grid-column: 1 / -1; padding-right: 0; }
  .facts-bar--center { width: 100%; }
  .facts-bar dd, .facts-bar__v { font-size: 16.5px; }
}
/* draw-in (only once main.js has armed it, so nothing is hidden without JS).
   Armed = hidden at once; the transitions live on .is-ruled so only the reveal animates. */
.facts-bar.rule-armed::before, .facts-bar.rule-armed::after, .facts-bar.rule-armed > *::after { transform: scaleX(0); }
.facts-bar.rule-armed > *::before { transform: scaleY(0); }
.facts-bar.rule-armed > * { opacity: 0; transform: translateY(12px); }
.facts-bar.rule-armed.is-ruled::before, .facts-bar.rule-armed.is-ruled::after, .facts-bar.rule-armed.is-ruled > *::after {
  transform: none; transition: transform .9s var(--ease-expo) var(--rule-delay, 0s);
}
.facts-bar.rule-armed.is-ruled > *::before { transform: none; transition: transform .7s var(--ease-expo) calc(var(--rule-delay, 0s) + .25s + var(--i, 0) * 80ms); }
.facts-bar.rule-armed.is-ruled > * {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease) calc(var(--rule-delay, 0s) + .15s + var(--i, 0) * 80ms), transform 1s var(--ease-expo) calc(var(--rule-delay, 0s) + .15s + var(--i, 0) * 80ms);
}

/* ---------- Hairlines that draw in: [data-rule] (main.js) ---------- */
.rule-line {
  position: absolute; left: 0; right: 0; z-index: 1; height: var(--rule-w, 1px); pointer-events: none;
  background: var(--rule-c, color-mix(in srgb, currentColor 16%, transparent));
  transform: scaleX(0); transform-origin: left;
}
.rule-line--top { top: 0; }
.rule-line--bottom { bottom: 0; }
.is-ruled > .rule-line { transform: none; transition: transform .9s var(--ease-expo) var(--rule-delay, 0s); }
.rule-self.rule-armed { transform: scaleX(0); transform-origin: left; }
.rule-self--y.rule-armed { transform: scaleY(0); transform-origin: top; }
.rule-self.rule-armed.is-ruled { transform: none; transition: transform .9s var(--ease-expo) var(--rule-delay, 0s); }
hr.rule, .rule { display: block; height: 1px; margin: 0; border: 0; background: color-mix(in srgb, currentColor 16%, transparent); }

/* ---------- Edge glow: the red top hairline of the stat cards, as a utility ----------
   Needs a positioned element (relative is set softly). .edge-glow--after uses ::after instead. */
:where(.edge-glow, .edge-glow--after) { position: relative; }
.edge-glow::before, .edge-glow--after::after {
  content: ''; position: absolute; left: 10%; right: 10%; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(239, 90, 76, .75), transparent);
}
.edge-glow--after::before { content: none; }

/* ---------- Shared bits ---------- */
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tags li {
  padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 500; line-height: 1.2;
  background: rgba(245, 239, 230, .06); border: 1px solid rgba(245, 239, 230, .14); color: var(--cream);
}
.tags--light li { background: #fff; border-color: rgba(20, 17, 16, .12); color: var(--ink); }
.tags--dark li { background: rgba(245, 239, 230, .05); border-color: rgba(245, 239, 230, .12); color: var(--muted-light); }
.tags--red li { background: rgba(215, 55, 43, .14); border-color: rgba(239, 90, 76, .45); color: #ffb3a8; }
.sec-head__aside p { color: inherit; }
.sec-head__aside .link-arrow { display: inline-block; margin-top: 14px; }
.light .link-arrow, .link-arrow--light { color: var(--cream); }
.scroll-cue {
  position: absolute; z-index: 6; left: 50%; bottom: 22px; width: 26px; height: 42px; margin-left: -13px;
  border-radius: 999px; border: 1.5px solid rgba(245, 239, 230, .35);
}
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--red-bright); animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }
@media (max-width: 959px) { .scroll-cue { display: none; } }

/* Split headings: words rise in (main.js wraps them in .w spans). Each .w keeps .1em of
   descender room inside its clip, but a negative margin gives it back, so lines sit at the
   heading's own line-height instead of growing by that room. */
[data-split] .w, .book__title .w { vertical-align: top; margin-bottom: -.1em; }

/* ---------- Page hero (inner pages) ---------- */
.phero {
  position: relative; overflow: hidden; display: flex; align-items: center;
  min-height: clamp(560px, 78vh, 820px); min-height: clamp(560px, 78svh, 820px);
  padding: 150px var(--gutter) clamp(72px, 9vw, 110px); background: var(--ink);
}
.phero .hero__blob--a { opacity: .3; }
.phero__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(20, 17, 16, .7) 0%, rgba(20, 17, 16, 0) 26%),
    linear-gradient(90deg, rgba(20, 17, 16, .55) 0%, rgba(20, 17, 16, .2) 55%, rgba(20, 17, 16, 0) 80%),
    linear-gradient(0deg, #141110 0%, rgba(20, 17, 16, 0) 22%);
}
.phero__wrap { position: relative; z-index: 2; width: 100%; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px 64px; align-items: center; }
.phero__wrap--center { grid-template-columns: minmax(0, 1fr); }
.phero__wrap--center .phero__copy { max-width: 980px; }
.phero__copy { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
/* Inner H1 (type scale): clamp(44px, 5.6vw, 84px), 1.0 / -.048em */
.phero__title { font-size: clamp(44px, 5.6vw, 84px); font-weight: 500; line-height: 1; letter-spacing: -.048em; color: var(--cream); text-wrap: balance; }
.phero__title--xl { font-size: clamp(46px, 6.8vw, 104px); line-height: .98; letter-spacing: -.05em; }
.phero__title .serif { letter-spacing: -.02em; }
.phero__lede { max-width: 620px; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: var(--muted-light); text-wrap: pretty; animation: fadeUp 1s var(--ease) .5s both; }
.phero__lede strong { color: var(--cream); font-weight: 600; }
.phero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; animation: fadeUp 1s var(--ease) .65s both; }
.phero .eyebrow, .phero .crumbs { animation: fadeUp .9s var(--ease) .1s both; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.crumbs a { position: relative; color: var(--muted-light); border-bottom: 1px solid rgba(245, 239, 230, .25); transition: color .3s, border-color .3s; }
.crumbs a::after { content: ''; position: absolute; inset: -14px -8px; } /* 44px tap area, same look */
.crumbs a:hover { color: var(--cream); border-color: var(--red-bright); }
.crumbs > span:last-child { color: var(--red-bright); }

.phero__facts { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 0; padding: 0; list-style: none; animation: fadeUp 1s var(--ease) .8s both; }
.phero__facts li {
  display: flex; flex-direction: column; gap: 4px; min-width: 170px; padding: 16px 20px; border-radius: 18px;
  background: rgba(245, 239, 230, .05); border: 1px solid rgba(245, 239, 230, .1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.phero__k { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.phero__v { font-size: 18px; font-weight: 500; letter-spacing: -.02em; color: var(--cream); }

/* About hero portrait */
.phero__portrait { position: relative; margin: 0; align-self: end; justify-self: center; width: min(100%, 460px); margin-bottom: calc(-1 * clamp(72px, 9vw, 110px)); }
.phero__portrait img { position: relative; z-index: 2; width: 100%; height: auto; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .55)); animation: fadeUp 1.2s var(--ease) .25s both; -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent); mask-image: linear-gradient(180deg, #000 78%, transparent); }
.phero__orbit { position: absolute; inset: 8% -6% 18%; z-index: 1; }
.phero__orbit span { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(245, 239, 230, .14); }
.phero__orbit span + span { inset: 12%; border-style: dashed; border-color: rgba(239, 90, 76, .4); animation: rot 50s linear infinite; }
.phero__badge {
  position: absolute; z-index: 3; left: 50%; bottom: 18%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; padding: 10px 18px 10px 14px; border-radius: 999px; white-space: nowrap;
  background: rgba(20, 17, 16, .66); border: 1px solid rgba(245, 239, 230, .14); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-light);
  animation: fadeUp 1s var(--ease) 1s both;
}
.phero__badge strong { color: var(--cream); font-weight: 500; margin-right: 6px; }

@media (max-width: 959px) {
  .phero { min-height: 0; padding-top: 128px; }
  .phero__wrap { grid-template-columns: minmax(0, 1fr); }
  .phero__portrait { width: min(100%, 380px); }
}
@media (max-width: 599px) {
  .phero { padding-top: 112px; padding-bottom: 64px; }
  .phero__copy { gap: 22px; }
  .phero__facts li { min-width: 0; flex: 1 1 140px; padding: 14px 16px; }
  .phero__actions .cta-spin, .phero__actions .cta-spin__inner { width: 100%; justify-content: center; }
}

/* ---------- Home: About teaser, use case feature ---------- */
.about__links { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.cases__more {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 32px;
  padding: 28px clamp(22px, 3vw, 36px); border-radius: 24px; background: var(--paper); border: 1px solid rgba(20, 17, 16, .08);
}
.cases__more p { max-width: 560px; font-size: clamp(19px, 1.8vw, 24px); font-weight: 500; line-height: 1.3; letter-spacing: -.02em; }

.ucf { position: relative; overflow: hidden; padding: var(--section-y) var(--gutter); background: var(--ink); }
.ucf__glow { position: absolute; width: 760px; height: 760px; right: -240px; top: 50%; margin-top: -380px; border-radius: 50%; background: var(--red); opacity: .2; filter: blur(150px); pointer-events: none; }
.ucf__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.ucf__copy { display: flex; flex-direction: column; gap: 26px; }
.ucf__lede { max-width: 540px; font-size: 18px; line-height: 1.65; color: var(--muted-light); }
.ucf__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; margin-top: 6px; }
@media (max-width: 959px) { .ucf__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* ---------- About page ---------- */
.about--page { background: var(--sand); }
.promise { position: relative; overflow: hidden; padding: var(--section-y) var(--gutter); background: var(--ink); }
.promise__glow { position: absolute; width: 700px; height: 700px; left: -260px; bottom: -340px; border-radius: 50%; background: var(--red-dark); opacity: .45; filter: blur(140px); pointer-events: none; }
.promise__wrap { position: relative; display: flex; flex-direction: column; gap: 64px; }
.promise__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.pcell {
  position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 320px; padding: clamp(26px, 3vw, 36px); border-radius: 26px;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -30%), rgba(215, 55, 43, .16), transparent 50%), var(--ink-raised);
  border: 1px solid rgba(245, 239, 230, .09); transform-style: preserve-3d; transition: transform .5s var(--ease), border-color .4s;
}
.pcell:hover { border-color: rgba(239, 90, 76, .45); }
.pcell__n { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .14em; color: var(--red-bright); }
.pcell__ic { width: 52px; height: 52px; margin-top: auto; fill: none; stroke: var(--cream); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pcell__t { font-size: clamp(26px, 2.6vw, 34px); font-weight: 500; letter-spacing: -.035em; line-height: 1.1; color: var(--cream); }
.pcell__d { font-size: 16px; line-height: 1.6; color: var(--muted-light); }
.pcell--red { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -30%), rgba(255, 255, 255, .18), transparent 50%), var(--red); border-color: var(--red); }
.pcell--red .pcell__n, .pcell--red .pcell__d { color: #fff; }
.pcell--red .pcell__ic { stroke: #fff; }
@media (max-width: 899px) { .promise__grid { grid-template-columns: minmax(0, 1fr); } .pcell { min-height: 0; } .pcell__ic { margin-top: 6px; } }

.journey { padding: var(--section-y) var(--gutter); background: var(--ink-deep); }
.journey__wrap { display: flex; flex-direction: column; gap: 56px; }
.journey__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(245, 239, 230, .12); }
.jstep { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 36px 32px 8px 0; }
.jstep + .jstep { padding-left: 32px; border-left: 1px solid rgba(245, 239, 230, .12); }
.jstep::before { content: ''; position: absolute; top: -1px; left: 0; width: 56px; height: 2px; background: var(--red); }
.jstep + .jstep::before { left: 32px; }
.jstep__n { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .14em; color: var(--red-bright); }
.jstep__t { font-size: 26px; font-weight: 500; letter-spacing: -.03em; color: var(--cream); }
.jstep__d { font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 340px; }
.journey__more { align-self: flex-start; }
@media (max-width: 899px) {
  .journey__list { grid-template-columns: minmax(0, 1fr); }
  .jstep, .jstep + .jstep { padding: 28px 0 24px; border-left: 0; border-bottom: 1px solid rgba(245, 239, 230, .12); }
  .jstep + .jstep::before { left: 0; }
}

/* ---------- Use cases page ---------- */
.uclist { padding: var(--section-y) var(--gutter); background: var(--cream); color: var(--ink); }
.uclist__wrap { display: flex; flex-direction: column; gap: 56px; }
.uclist .sec-head__aside { color: var(--body-on-light); }
.uclist__grid { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.uccard {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); overflow: hidden; border-radius: 30px;
  background: var(--paper); border: 1px solid rgba(20, 17, 16, .08); box-shadow: 0 30px 60px -36px rgba(20, 17, 16, .4);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.uccard:hover { transform: translateY(-4px); box-shadow: 0 40px 80px -36px rgba(20, 17, 16, .5); }
.uccard__link { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.uccard__viz { position: relative; min-height: 380px; background: radial-gradient(500px circle at 70% 20%, rgba(215, 55, 43, .35), transparent 60%), var(--ink); overflow: hidden; }
.uccard__badge {
  position: absolute; left: 20px; top: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px;
  background: rgba(20, 17, 16, .6); border: 1px solid rgba(245, 239, 230, .14); color: var(--cream);
  font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}
.uccard__body { display: flex; flex-direction: column; gap: 18px; padding: clamp(26px, 3.4vw, 44px); }
.uccard__tag { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--red-deep); }
.uccard__title { font-size: clamp(30px, 3vw, 44px); font-weight: 500; line-height: 1.04; letter-spacing: -.04em; }
.uccard__title .serif { color: var(--red-deep); }
.uccard__promise { font-size: 18px; line-height: 1.55; color: var(--body-on-light); }
.uccard__facts { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.uccard__facts > div { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid rgba(20, 17, 16, .12); }
.uccard__facts dt { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--label-on-light); }
.uccard__facts dd { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--body-on-light); }
.uccard__cta { margin-top: auto; }
.uccard:hover .uccard__cta { transform: translateY(-2px); }
.ucnext {
  display: flex; flex-direction: column; gap: 16px; padding: clamp(26px, 3vw, 36px); border-radius: 30px;
  background: transparent; border: 1.5px dashed rgba(20, 17, 16, .22);
}
.ucnext__k { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--label-on-light); }
.ucnext__t { font-size: clamp(26px, 2.4vw, 34px); font-weight: 500; letter-spacing: -.035em; line-height: 1.1; }
.ucnext__t .serif { color: var(--red-deep); }
.ucnext__d { font-size: 16px; line-height: 1.6; color: var(--body-on-light); }
.ucnext .card__cta { margin-top: auto; }
@media (max-width: 1099px) { .uclist__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 799px) { .uccard { grid-template-columns: minmax(0, 1fr); } .uccard__viz { min-height: 320px; } }

.pattern { padding: var(--section-y) var(--gutter); background: var(--ink); }
.pattern__wrap { display: flex; flex-direction: column; gap: 64px; }

/* Numbered flow with a connecting line (dark or light sections) */
.flow { --fl-line: rgba(245, 239, 230, .16); --fl-card: var(--ink-raised); --fl-border: rgba(245, 239, 230, .09); --fl-t: var(--cream); --fl-d: var(--muted); }
.expect .flow { --fl-line: rgba(20, 17, 16, .16); --fl-card: var(--paper); --fl-border: rgba(20, 17, 16, .08); --fl-t: var(--ink); --fl-d: var(--body-on-light); }
.flow { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: f; }
.flow__step {
  position: relative; display: flex; flex-direction: column; gap: 12px; padding: 28px 26px 30px; border-radius: 24px;
  background: var(--fl-card); border: 1px solid var(--fl-border);
}
.flow__step::after { content: ''; position: absolute; top: 47px; right: -17px; width: 18px; height: 2px; background: var(--red); }
.flow__step:last-child::after { display: none; }
.flow__n { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--red); color: #fff; font: 500 13px 'Geist Mono', ui-monospace, monospace; box-shadow: 0 0 0 6px rgba(215, 55, 43, .14); }
.flow__t { margin-top: 8px; font-size: 22px; font-weight: 500; letter-spacing: -.025em; color: var(--fl-t); }
.flow__d { font-size: 15.5px; line-height: 1.6; color: var(--fl-d); }
.flow__step--red { background: var(--red); border-color: var(--red); }
.flow__step--red .flow__n { background: var(--ink); box-shadow: none; }
.flow__step--red .flow__t, .flow__step--red .flow__d { color: #fff; }
@media (max-width: 899px) { .flow__step::after { top: auto; bottom: -17px; right: auto; left: 46px; width: 2px; height: 18px; } }

/* ---------- Use case 01 ---------- */
@media (min-width: 960px) { .phero--uc .phero__wrap { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.phero--uc .phero__title { font-size: clamp(40px, 4.7vw, 72px); }
.crumbs--hero { margin-bottom: -4px; }

/* Terminal: the agent's run, replayed in a loop */
.term {
  position: relative; z-index: 2; width: 100%; max-width: 540px; justify-self: end; overflow: hidden; border-radius: 22px;
  background: rgba(15, 12, 11, .78); border: 1px solid rgba(245, 239, 230, .12);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(215, 55, 43, .12), 0 0 80px -30px rgba(215, 55, 43, .5);
  font-family: 'Geist Mono', ui-monospace, monospace; font-size: 13px; line-height: 1.45;
  transform: perspective(1400px) rotateY(-9deg) rotateX(3deg); animation: fadeUp 1.1s var(--ease) .4s both;
}
.term__bar { display: flex; align-items: center; gap: 7px; padding: 13px 16px; border-bottom: 1px solid rgba(245, 239, 230, .08); color: var(--muted); font-size: 11.5px; letter-spacing: .06em; }
.term__bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(245, 239, 230, .16); }
.term__bar i:first-child { background: var(--red); }
.term__bar span { margin-left: 10px; }
.term__body { display: flex; flex-direction: column; gap: 11px; min-height: 268px; padding: 20px 20px 12px; }
.term__line { display: flex; gap: 14px; color: var(--muted-light); opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .5s var(--ease); }
.term__line.on, .term__status.on { opacity: 1; transform: none; }
.term__k { flex: none; min-width: 52px; color: var(--red-bright); }
.term__k--ok { color: #9fe8b5; }
.term__line--prompt { color: var(--cream); }
.term__line--prompt .term__k { min-width: 0; }
.term__line--fix .term__k { color: #e9b44c; }
.term__status {
  display: flex; align-items: center; gap: 10px; margin: 6px 20px 20px; padding: 11px 14px; border-radius: 12px;
  background: rgba(215, 55, 43, .14); border: 1px solid rgba(239, 90, 76, .45); color: #ffd0c9;
  opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .5s var(--ease);
}
.term__pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--red-bright); animation: askPulse 1.1s ease-in-out infinite; box-shadow: 0 0 10px var(--red-bright); }
@media (max-width: 959px) { .term { justify-self: stretch; max-width: none; transform: none; } }
@media (max-width: 599px) { .term { font-size: 12px; } .term__k { min-width: 46px; } .term__body { min-height: 250px; padding: 16px 16px 10px; } }

/* Three layers */
.layers { padding: var(--section-y) var(--gutter); background: var(--cream); color: var(--ink); }
.layers__wrap { display: flex; flex-direction: column; gap: 56px; }
.layers .sec-head__aside { color: var(--body-on-light); }
.layers__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px 56px; align-items: center; }
.layers__art { position: relative; border-radius: 30px; background: var(--paper); border: 1px solid rgba(20, 17, 16, .08); box-shadow: 0 30px 60px -36px rgba(20, 17, 16, .35); overflow: hidden; }
.lx { display: block; width: 100%; height: auto; overflow: visible; }
.lx-l { fill: #e9dfd1; }
.lx-r { fill: #ddd1c1; }
.lx-top { fill: #fff; stroke: rgba(20, 17, 16, .16); stroke-width: 1.2; }
.lx-top--red { stroke: var(--red); stroke-width: 1.8; }
.lx-top--base { fill: var(--sand); }
.lx-url { fill: var(--red-deep); font: 400 14px 'Geist Mono', ui-monospace, monospace; }
.lx-url--ink { fill: var(--label-on-light); font-size: 13px; }
.lx-float { animation: lxFloat 6s ease-in-out infinite; }
.lx-float--b { animation-delay: -2s; }
.lx-float--c { animation-delay: -4s; }
@keyframes lxFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.layers__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.lyr { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 0 22px 28px; border-bottom: 1px solid rgba(20, 17, 16, .12); }
.lyr::before { content: ''; position: absolute; left: 0; top: 30px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 5px rgba(215, 55, 43, .14); }
.lyr--base::before { background: var(--label-on-light); box-shadow: 0 0 0 5px rgba(20, 17, 16, .08); }
.lyr__k { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--red-deep); }
.lyr--base .lyr__k { color: var(--label-on-light); }
.lyr__t { font-size: clamp(24px, 2.4vw, 30px); font-weight: 500; letter-spacing: -.03em; }
.lyr__d { font-size: 16px; line-height: 1.6; color: var(--body-on-light); }
.lyr .tags { margin-top: 6px; }
@media (max-width: 959px) { .layers__grid { grid-template-columns: minmax(0, 1fr); } }

/* How it gets built */
.build { position: relative; overflow: hidden; padding: var(--section-y) var(--gutter); background: var(--ink); }
.build__glow { position: absolute; width: 900px; height: 900px; right: -320px; top: 10%; border-radius: 50%; background: var(--red); opacity: .12; filter: blur(160px); pointer-events: none; }
.build__wrap { position: relative; display: flex; flex-direction: column; gap: 24px; }
.build__wrap > .sec-head { margin-bottom: 32px; }
.stage { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 24px 40px; padding: 44px 0; border-top: 1px solid rgba(245, 239, 230, .1); }
.stage__rail { display: flex; flex-direction: column; gap: 12px; align-self: start; position: sticky; top: 110px; }
.stage__n { align-self: flex-start; padding: 6px 14px; border-radius: 999px; background: var(--red); color: #fff; font: 500 13px 'Geist Mono', ui-monospace, monospace; letter-spacing: .06em; box-shadow: 0 8px 24px -8px rgba(215, 55, 43, .9); }
.stage__t { font-size: clamp(30px, 3vw, 40px); font-weight: 500; letter-spacing: -.04em; color: var(--cream); }
.stage__d { font-size: 15px; line-height: 1.55; color: var(--muted); max-width: 200px; }
.js .stage [data-at] { opacity: .12; transform: translateY(12px); transition: opacity .7s var(--ease), transform .8s var(--ease-out), border-color .6s, box-shadow .6s; }
.js .stage [data-at].on { opacity: 1; transform: none; }

.stage__body--build { display: grid; grid-template-columns: minmax(0, .85fr) 44px minmax(0, 1.25fr) 44px minmax(0, 1fr); align-items: center; }
.pbox, .tool, .gbox, .lcard {
  border-radius: 20px; background: var(--ink-raised); border: 1px solid rgba(245, 239, 230, .1);
}
.pbox { display: flex; flex-direction: column; gap: 10px; padding: 22px; }
.pbox__k, .gbox__k, .lcard__k, .gate__k, .cfbox__lab, .gbox__lab { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pbox__t, .gbox__t { font-size: 22px; font-weight: 500; letter-spacing: -.025em; color: var(--cream); }
.pbox__list, .gbox__list { display: flex; flex-direction: column; gap: 9px; margin: 4px 0 0; padding: 0; list-style: none; }
.pbox__list li, .gbox__list li { position: relative; padding-left: 18px; font-size: 14.5px; line-height: 1.45; color: var(--muted-light); }
.pbox__list li::before, .gbox__list li::before { content: ''; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border-radius: 1.5px; background: var(--red-bright); }
.parrow { position: relative; height: 2px; margin: 0 4px; background: repeating-linear-gradient(90deg, var(--red-bright) 0 7px, transparent 7px 13px); animation: dashmove .8s linear infinite; }
.parrow::after { content: ''; position: absolute; right: -2px; top: -4px; width: 9px; height: 9px; border-top: 2px solid var(--red-bright); border-right: 2px solid var(--red-bright); transform: rotate(45deg); }
.parrow span { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); font: 400 10.5px 'Geist Mono', ui-monospace, monospace; letter-spacing: .08em; color: var(--muted); }

.agent {
  position: relative; display: flex; flex-direction: column; gap: 18px; padding: 24px; border-radius: 24px;
  background: linear-gradient(180deg, rgba(215, 55, 43, .1), rgba(215, 55, 43, .02)), var(--ink-raised);
  border: 1.5px solid rgba(239, 90, 76, .55); box-shadow: 0 0 0 6px rgba(215, 55, 43, .07), 0 30px 60px -30px rgba(215, 55, 43, .6);
}
.agent__head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid rgba(245, 239, 230, .1); }
.agent__pill { padding: 5px 12px; border-radius: 999px; background: var(--red); color: #fff; font: 500 11.5px 'Geist Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.agent__head img { width: 22px; height: 22px; }
.agent__name { font-size: 19px; font-weight: 500; letter-spacing: -.02em; color: var(--cream); }
.agent__loop { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.agent__loop::before { content: ''; position: absolute; left: 12.5%; right: 12.5%; top: 22px; height: 2px; background: repeating-linear-gradient(90deg, var(--red) 0 7px, transparent 7px 12px); animation: dashmove .8s linear infinite; }
.agent__loop li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--cream); }
.agent__loop li span {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--red); color: #fff; font: 500 12px 'Geist Mono', ui-monospace, monospace;
  animation: agentStep 4s ease-in-out infinite; animation-delay: calc(var(--i) * 1s);
}
@keyframes agentStep { 0%, 30%, 100% { box-shadow: 0 0 0 0 rgba(239, 90, 76, 0); transform: scale(1); } 12% { box-shadow: 0 0 0 9px rgba(239, 90, 76, .22), 0 0 26px rgba(239, 90, 76, .9); transform: scale(1.1); } }
.agent__repeat { text-align: center; font: 400 11.5px 'Geist Mono', ui-monospace, monospace; letter-spacing: .04em; color: var(--muted); }
.agent__repeat span { display: inline-block; color: var(--red-bright); animation: rot 3s linear infinite; }
.agent__d { font-size: 14.5px; line-height: 1.55; color: var(--muted-light); }
.tools { display: flex; flex-direction: column; gap: 10px; }
.tool { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; }
.tool img, .tool svg { flex: none; width: 22px; height: 22px; margin-top: 1px; }
.tool svg { fill: none; stroke: var(--cream); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tool svg .tool__ok { stroke: var(--red-bright); }
.tool__t { font-size: 16px; font-weight: 600; color: var(--cream); }
.tool__d { margin-top: 3px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.gate { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 18px; border: 1.5px dashed var(--red-bright); background: rgba(215, 55, 43, .08); }
.gate__k { color: #ffb3a8; }
.gate__d { font-size: 14px; line-height: 1.45; color: var(--muted-light); }
.gate__ok { align-self: flex-start; margin-top: 4px; padding: 5px 11px; border-radius: 999px; background: rgba(120, 220, 150, .12); color: #9fe8b5; font: 400 11.5px 'Geist Mono', ui-monospace, monospace; }

.cfbox { display: flex; flex-direction: column; gap: 20px; padding: clamp(20px, 2.6vw, 30px); border-radius: 26px; border: 1.5px dashed rgba(245, 239, 230, .2); background: rgba(245, 239, 230, .02); }
.cfbox__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; }
.cfbox__k { display: inline-flex; align-items: center; gap: 10px; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--cream); }
.cfbox__note { font: 400 11.5px 'Geist Mono', ui-monospace, monospace; letter-spacing: .06em; color: var(--muted); }
.cfbox__shared { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.cfbox__layers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lcard { display: flex; flex-direction: column; gap: 8px; padding: 22px; background: var(--paper); border-color: transparent; }
.lcard__k { color: var(--red-deep); }
.lcard__t { font-size: 24px; font-weight: 500; letter-spacing: -.03em; color: var(--ink); }
.lcard__u { font: 400 12.5px 'Geist Mono', ui-monospace, monospace; color: var(--red-deep); overflow-wrap: anywhere; }
.lcard__d { font-size: 14.5px; line-height: 1.5; color: var(--body-on-light); }
.stage__body--grow { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.gbox { display: flex; flex-direction: column; gap: 10px; padding: 24px; }
.gbox__s { font-size: 14.5px; line-height: 1.5; color: var(--muted-light); }
.gbox__lab { margin-top: 8px; }
.gbox__fine { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.gbox--red { background: var(--red); border-color: var(--red); }
.gbox--red .gbox__k, .gbox--red .gbox__s, .gbox--red .gbox__list li { color: #fff; }
.gbox--red .gbox__list li::before { background: #fff; }
.gbox--red .gbox__s { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .35); }
.who { display: flex; flex-direction: column; margin: 4px 0 0; }
.who > div { padding: 14px 0; border-bottom: 1px solid rgba(245, 239, 230, .1); }
.who > div:last-child { border-bottom: 0; }
.who dt { font-size: 19px; font-weight: 500; letter-spacing: -.02em; color: var(--cream); }
.who dd { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.build__cap { max-width: 80ch; padding-top: 24px; border-top: 1px solid rgba(245, 239, 230, .1); font-size: 14.5px; line-height: 1.6; color: var(--muted); }

@media (max-width: 1199px) {
  .stage__body--build { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
  .stage__body--build .parrow { display: none; }
  .stage__body--build .agent { grid-column: 1 / -1; grid-row: 1; }
}
@media (max-width: 959px) {
  .stage { grid-template-columns: minmax(0, 1fr); padding: 36px 0; }
  .stage__rail { position: static; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
  .stage__d { max-width: none; flex-basis: 100%; }
  .stage__body--grow { grid-template-columns: minmax(0, 1fr); }
  .cfbox__layers { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 699px) {
  .stage__body--build { grid-template-columns: minmax(0, 1fr); }
  .stage__body--build .agent { grid-row: auto; }
  .agent { padding: 20px 16px; }
  .agent__loop li { font-size: 12.5px; }
  .agent__loop li span { width: 38px; height: 38px; }
  .agent__loop::before { top: 19px; }
}

/* The agentic era */
.era { padding: var(--section-y) var(--gutter); background: var(--sand); color: var(--ink); }
.era__wrap { display: flex; flex-direction: column; gap: 56px; }
.era .sec-head__aside { color: var(--body-on-light); }
.era__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.era__card {
  display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: clamp(24px, 2.6vw, 32px); border-radius: 26px;
  background: var(--paper); border: 1px solid rgba(20, 17, 16, .08); transition: transform .5s var(--ease);
}
.era__card--now { background: var(--red); color: #fff; border-color: var(--red); box-shadow: 0 30px 60px -30px rgba(215, 55, 43, .7); }
.era__tag { font: 400 12px 'Geist Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--red-deep); }
.era__card--now .era__tag { color: #fff; }
.era__t { font-size: clamp(24px, 2.2vw, 28px); font-weight: 500; line-height: 1.12; letter-spacing: -.03em; }
.era__d { font-size: 16px; line-height: 1.6; color: var(--body-on-light); text-wrap: pretty; }
.era__card--now .era__d { color: #fff; }
@media (max-width: 899px) { .era__grid { grid-template-columns: minmax(0, 1fr); } }

/* Rented tools vs owned system */
.vsec { padding: var(--section-y) var(--gutter); background: var(--cream); color: var(--ink); }
.vsec__wrap { display: flex; flex-direction: column; gap: 48px; }
.vsec .sec-head__aside { color: var(--body-on-light); }
.vs { border-top: 1px solid rgba(20, 17, 16, .15); }
.vs__row { display: grid; grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1fr); gap: 10px 36px; padding: 24px 0; border-bottom: 1px solid rgba(20, 17, 16, .15); align-items: start; }
.vs__row--head { padding: 18px 0; }
.vs__k { font: 400 12px 'Geist Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--red-deep); padding-top: 5px; }
.vs__col { font: 400 12px 'Geist Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--label-on-light); }
.vs__col--own { color: var(--red-deep); }
.vs__a, .vs__b { min-width: 0; font-size: 17px; line-height: 1.55; text-wrap: pretty; }
.vs__a { color: var(--body-on-light-2); }
.vs__b { position: relative; padding-left: 30px; color: var(--ink); font-weight: 500; }
.vs__b::after {
  content: '✓'; position: absolute; left: 0; top: 2px; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border-radius: 50%; background: var(--red); color: #fff; font-size: 11px; font-weight: 700;
}
.vs__a::before, .vs__b::before { display: none; font: 400 11px 'Geist Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 4px; }
@media (max-width: 759px) {
  .vs__row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .vs__row--head { display: none; }
  .vs__a::before { content: "Rented tools"; display: block; color: var(--label-on-light); }
  .vs__b::before { content: "Owned system"; display: block; color: var(--red-deep); }
  .vs__b::after { top: 22px; }
}
.note { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 12px 36px; padding: 24px 28px; border-radius: 22px; background: var(--sand); }
.note p { font-size: 16px; line-height: 1.6; color: var(--body-on-light); }
.note .vs__k { color: var(--label-on-light); }
@media (max-width: 759px) { .note { grid-template-columns: minmax(0, 1fr); } }

/* Every decision stays yours */
.charge { position: relative; overflow: hidden; padding: var(--section-y) var(--gutter); background: var(--ink); }
.charge__glow { position: absolute; width: 700px; height: 700px; left: -240px; top: -260px; border-radius: 50%; background: var(--red); opacity: .14; filter: blur(150px); pointer-events: none; }
.charge__wrap { position: relative; display: flex; flex-direction: column; gap: 56px; }
.charge__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 40px; margin: 0; padding: 0; list-style: none; }
.citem { position: relative; display: flex; flex-direction: column; gap: 10px; padding-top: 22px; border-top: 1px solid rgba(245, 239, 230, .14); }
.citem::before { content: ''; position: absolute; left: 0; top: -1px; width: 100%; height: 2px; background: var(--red); transform: scaleX(.14); transform-origin: left; transition: transform .7s var(--ease); }
.citem:hover::before { transform: scaleX(1); }
.citem__n { font: 400 12px 'Geist Mono', ui-monospace, monospace; letter-spacing: .14em; color: var(--red-bright); }
.citem__t { font-size: 23px; font-weight: 500; letter-spacing: -.025em; color: var(--cream); }
.citem__d { font-size: 16px; line-height: 1.6; color: var(--muted); }
@media (max-width: 899px) { .charge__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .charge__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* Handover */
.handover { position: relative; overflow: hidden; padding: var(--section-y) var(--gutter); background: var(--red); color: #fff; }
.handover__rings, .book__rings { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.handover__rings { left: 12%; top: 30%; }
.handover__rings span, .book__rings span { position: absolute; left: -300px; top: -300px; width: 600px; height: 600px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); animation: ringOut 9s linear infinite; }
.handover__rings span:nth-child(2), .book__rings span:nth-child(2) { animation-delay: -3s; }
.handover__rings span:nth-child(3), .book__rings span:nth-child(3) { animation-delay: -6s; }
@keyframes ringOut { from { transform: scale(.2); opacity: 0; } 20% { opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
.handover__wrap { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px 64px; align-items: start; }
.handover__head { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 120px; }
.handover .h2 .serif { color: var(--ink); }
.handover__lede { max-width: 440px; font-size: 18px; line-height: 1.6; color: #fff; }
.kit { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.kit__item {
  display: flex; gap: 18px; align-items: flex-start; padding: 22px; border-radius: 22px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .24);
  transition: background .4s, transform .5s var(--ease);
}
.kit__item:hover { background: rgba(255, 255, 255, .16); transform: translateX(6px); }
.kit__ic { flex: none; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 15px; background: var(--ink); }
.kit__ic img { width: 24px; height: 24px; }
.kit__ic svg { width: 24px; height: 24px; fill: none; stroke: var(--cream); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.kit__t { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.kit__d { margin-top: 5px; font-size: 15.5px; line-height: 1.55; color: rgba(255, 255, 255, .92); }
@media (max-width: 899px) { .handover__wrap { grid-template-columns: minmax(0, 1fr); } .handover__head { position: static; } }

/* Who it's for */
.fit { padding: var(--section-y) var(--gutter); background: var(--cream); color: var(--ink); }
.fit__wrap { display: flex; flex-direction: column; gap: 56px; }
.fit .sec-head__aside { color: var(--body-on-light); }
.fit__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.sign {
  display: flex; flex-direction: column; gap: 14px; padding: 26px; border-radius: 24px; background: var(--paper); border: 1px solid rgba(20, 17, 16, .08);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.sign:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(20, 17, 16, .4); }
.sign__n { font: 500 44px 'Instrument Serif', Georgia, serif; font-style: italic; line-height: 1; color: var(--red); }
.sign__t { font-size: 20px; font-weight: 500; line-height: 1.25; letter-spacing: -.02em; }
.sign__d { font-size: 15.5px; line-height: 1.55; color: var(--body-on-light); }
@media (max-width: 1099px) { .fit__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .fit__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- FAQ (sand, 5/7, sticky intro on desktop) ---------- */
.faq__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(48px, 7vw, 112px); }
.faq__intro { align-self: start; }
.faq__intro .card__cta { align-self: flex-start; margin-top: 10px; }
.faq__after { display: none; }
.faq__item { position: relative; }
/* open item: a red rule on the left draws down */
.faq__item::before {
  content: ''; position: absolute; left: 0; top: -1px; bottom: -1px; width: 2px; background: var(--red);
  transform: scaleY(0); transform-origin: top; transition: transform .4s var(--ease);
}
.faq__item.is-open::before { transform: none; }
.faq__btn {
  --q-lh: calc(19px * 1.35); /* one line of the question: the + circle centres on it */
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: baseline; gap: 0 20px; min-height: 56px;
  padding: 28px 0 28px 20px; font-size: 19px; font-weight: 500; line-height: 1.35; letter-spacing: -.015em;
  transition: color var(--dur-1);
}
.faq__btn:hover { color: var(--red-deep); }
.faq__n { font: 500 12px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: .08em; color: var(--red-deep); }
.faq__qt { min-width: 0; text-wrap: pretty; }
/* on the first line of the question (also when it wraps), and never taller than that line */
.faq__icon { align-self: start; margin-block: calc((var(--q-lh) - 34px) / 2); }
.faq__btn:hover .faq__icon { background: rgba(20, 17, 16, .12); }
.faq__item.is-open .faq__btn:hover .faq__icon { background: var(--red-deep); }
.faq__panel > div { padding: 0 56px 0 80px; }
.faq__panel p { max-width: 60ch; margin: -6px 0 0; padding: 0 0 28px; font-size: 16.5px; line-height: 1.65; }
@media (min-width: 960px) {
  .faq__intro { position: sticky; top: 120px; }
}
@media (max-width: 959px) {
  .faq__grid { grid-template-columns: minmax(0, 1fr); }
  .faq__intro .faq__cta { display: none; }
  .faq__after { display: block; }
  .faq__after .card__cta { margin-top: 0; }
}
@media (max-width: 599px) {
  .faq__btn { --q-lh: calc(17.5px * 1.35); grid-template-columns: 30px minmax(0, 1fr) auto; gap: 0 12px; padding: 24px 0 24px 14px; font-size: 17.5px; }
  .faq__panel > div { padding: 0 0 0 56px; }
  .faq__panel p { padding: 0 0 24px; font-size: 16px; }
}

/* ---------- Book a call (red) ----------
   The title is always fully opaque white; it settles from scale .94 on
   scroll and its words rise once (main.js). The rings breathe in turn. */
.book__title, .book__title .serif, .book__lede, .book .eyebrow { color: #fff; }
.book__title .serif .w { padding-right: .08em; margin-right: -.08em; }
.js .book__title.is-armed:not(.is-in) .w > span { animation-play-state: paused; }
.book__rings { left: 50%; top: 50%; }
.book__rings span {
  --s: 600px; left: calc(var(--s) / -2); top: calc(var(--s) / -2); width: var(--s); height: var(--s);
  border: 1px solid rgba(255, 255, 255, .55); opacity: .5; animation: bookRing 6s ease-in-out infinite;
}
.book__rings span:nth-child(1) { --s: 560px; animation-delay: 0s; }
.book__rings span:nth-child(2) { --s: 880px; animation-delay: 2s; }
.book__rings span:nth-child(3) { --s: 1200px; animation-delay: 4s; }
@keyframes bookRing { 0%, 100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.06); opacity: .15; } }
@media (max-width: 599px) {
  .book__rings span:nth-child(1) { --s: 340px; }
  .book__rings span:nth-child(2) { --s: 560px; }
  .book__rings span:nth-child(3) { --s: 780px; }
}
.book__mail {
  position: relative; font-size: 14px; color: #fff; border-bottom: 0; padding-bottom: 3px;
  background: linear-gradient(#fff, #fff) left bottom / 0 1px no-repeat, linear-gradient(rgba(255, 255, 255, .4), rgba(255, 255, 255, .4)) left bottom / 100% 1px no-repeat;
  transition: background-size .35s var(--ease);
}
.book__mail::after { content: ''; position: absolute; inset: -12px -8px; } /* 44px tap area, same look */
.book__mail:hover { background-size: 100% 1px, 100% 1px; }
/* proof row: the four LinkedIn faces, linked to the recommendations */
.book .book__proof { margin-top: 6px; animation: none; color: #fff; transition: transform .35s var(--ease); }
.book .book__proof:hover { transform: translateY(-2px); }
.book .book__proof > .avatars { flex: none; max-width: none; }
.book .book__proof > span:last-child { flex: 0 1 auto; max-width: 300px; font-size: 14px; line-height: 1.45; color: #fff; text-align: left; }
.book .avatars img { border-color: var(--red); }
/* phones: faces above, the sentence centred below, so the row stays balanced in the centred column */
@media (max-width: 600px) {
  .book .book__proof { flex-direction: column; gap: 12px; }
  .book .book__proof > span:last-child { max-width: 30ch; text-align: center; text-wrap: balance; }
}
/* keyboard focus on red surfaces: a white ring (the global red one vanishes on red) */
:is(.book, .handover, .flow__step--red, .era__card--now, .pcell--red, .gbox--red) :focus-visible { outline-color: #fff; }

/* ---------- Blog ---------- */
.latest { padding: var(--section-y) var(--gutter); background: var(--cream); color: var(--ink); }
.latest--related { background: var(--sand); }
.latest__wrap { display: flex; flex-direction: column; gap: 56px; }
.latest .sec-head__aside { color: var(--body-on-light); }
.latest__grid, .bindex__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
@media (max-width: 1023px) { .latest__grid, .bindex__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 679px) { .latest__grid, .bindex__grid { grid-template-columns: minmax(0, 1fr); } }

/* Post card (e1 on light): the same card on Home ("From the blog"), the Blog index and related posts */
.pcard { min-width: 0; }
.pcard[hidden] { display: none; }
.pcard__link {
  display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: var(--r-md);
  background: var(--paper); border: 1px solid var(--line-l); box-shadow: var(--sh-card-l);
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
@media (hover: hover) {
  .pcard__link:hover { transform: translateY(-4px); border-color: rgba(215, 55, 43, .45); box-shadow: var(--sh-card-l), 0 32px 60px -38px rgba(20, 17, 16, .45); }
}
.pcard__media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; margin: 6px 6px 0; border-radius: calc(var(--r-md) - 6px); isolation: isolate; }
.pcard__media .cover { position: absolute; inset: 0; transition: transform .6s var(--ease); }
.pcard__link:hover .cover { transform: scale(1.04); }
.pcard__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 20px 22px 24px; }
/* tag over date: every meta row is the same height, so the titles line up across a row of cards */
.pcard__meta { display: grid; justify-items: start; gap: 10px; font: 500 11px/1.3 'Geist Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--label-on-light); }
.pcard__cat { padding: 5px 9px; border-radius: var(--r-pill); background: rgba(215, 55, 43, .08); color: var(--red-deep); }
.pcard__title { font-size: 20px; font-weight: 500; line-height: 1.25; letter-spacing: -.022em; color: var(--ink); text-wrap: balance; }
.pcard__tt { padding-bottom: 2px; background: linear-gradient(var(--red), var(--red)) 0 100% / 0 1.5px no-repeat; transition: background-size .5s var(--ease); }
.pcard__link:hover .pcard__tt, .pcard__link:focus-visible .pcard__tt { background-size: 100% 1.5px; }
.pcard__desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; font-size: 15px; line-height: 1.55; color: var(--body-on-light); }
.pcard__more { margin-top: auto; padding-top: 10px; font-size: 14px; font-weight: 600; color: var(--ink); }
.pcard__more span { display: inline-block; color: var(--red); transition: transform .35s var(--ease); }
.pcard__link:hover .pcard__more span { transform: translateX(3px); }

.bindex { padding: clamp(64px, 8vw, 104px) var(--gutter) var(--section-y); background: var(--cream); color: var(--ink); }

/* Generated covers */
.cover { position: relative; overflow: hidden; background: radial-gradient(80% 120% at 78% 10%, #5c120d, #1f1a18 45%, #110e0d); }
.cover svg { display: block; width: 100%; height: 100%; }
.cover__label {
  position: absolute; left: 20px; top: 20px; padding: 6px 12px; border-radius: 999px; background: rgba(20, 17, 16, .6); border: 1px solid rgba(245, 239, 230, .16);
  color: var(--cream); font: 400 11.5px 'Geist Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase;
}
.cv-line { fill: none; stroke: rgba(245, 239, 230, .22); stroke-width: 1.5; }
.cv-line-strong { fill: none; stroke: rgba(245, 239, 230, .4); stroke-width: 2; }
.cv-dash { fill: none; stroke: rgba(245, 239, 230, .25); stroke-width: 1.4; stroke-dasharray: 5 7; }
.cv-arc { fill: none; stroke: var(--red-bright); stroke-width: 3; stroke-linecap: round; }
.cv-flow { fill: none; stroke: var(--red-bright); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 10 10; animation: cvDash 1s linear infinite; }
.cv-flow--slow { animation-duration: 1.8s; opacity: .6; }
.cv-fill-red { fill: var(--red); }
.cv-fill-cream { fill: var(--cream); }
.cv-glow { filter: drop-shadow(0 0 8px rgba(239, 90, 76, .9)); }
.cv-ring { fill: none; stroke: var(--red-bright); stroke-width: 2; }
.cv-pill { fill: rgba(31, 26, 24, .95); stroke: rgba(245, 239, 230, .2); }
.cv-mono { fill: var(--muted-light); font: 500 12px 'Geist Mono', ui-monospace, monospace; letter-spacing: .1em; }
.cv-mono--w { fill: #fff; }
.cv-box { fill: rgba(245, 239, 230, .06); stroke: rgba(245, 239, 230, .3); animation: cvPulse 3s ease-in-out infinite; animation-delay: var(--d, 0s); }
.cv-boxg { fill: rgba(245, 239, 230, .07); stroke: rgba(245, 239, 230, .28); }
.cv-wall { stroke: var(--red-bright); stroke-width: 2; stroke-dasharray: 3 6; }
.cv-stop { fill: rgba(245, 239, 230, .45); }
.cv-gate { fill: rgba(215, 55, 43, .14); stroke: var(--red-bright); stroke-width: 2; stroke-dasharray: 6 5; }
.cv-iso { fill: rgba(245, 239, 230, .12); stroke: rgba(245, 239, 230, .4); }
.cv-iso--b { fill: rgba(245, 239, 230, .06); stroke-dasharray: 4 5; }
.cv-win { fill: rgba(15, 12, 11, .85); stroke: rgba(245, 239, 230, .18); }
.cv-dot { fill: rgba(245, 239, 230, .2); }
.cv-codeg { fill: rgba(245, 239, 230, .22); }
.cv-ok { fill: #9fe8b5; font: 700 14px Geist, sans-serif; animation: cvOk 5s ease infinite; animation-delay: var(--d, 0s); }
.cv-card { fill: rgba(31, 26, 24, .95); stroke: rgba(239, 90, 76, .55); stroke-width: 1.5; }
.cv-handle { stroke: rgba(245, 239, 230, .5); stroke-width: 10; stroke-linecap: round; }
.cv-pop { transform-box: fill-box; transform-origin: center; animation: cvPop 5s var(--ease) infinite; animation-delay: var(--d, 0s); }
.cv-spin { transform-box: view-box; transform-origin: 320px 200px; animation: rot 9s linear infinite; }
.cv-spin-rev { transform-box: view-box; transform-origin: 320px 200px; animation: rot 40s linear infinite reverse; }
.cv-ping { transform-box: fill-box; transform-origin: center; animation: cvPing 2.8s ease-out infinite; }
.cv-pulse { animation: cvPulse 2.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
.cv-float { animation: lxFloat 6s ease-in-out infinite; }
.cv-travel { animation: cvTravel 6s cubic-bezier(.6, 0, .4, 1) infinite; }
@keyframes cvDash { to { stroke-dashoffset: -40; } }
@keyframes cvPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes cvPing { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes cvOk { 0%, 15% { opacity: 0; } 25%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cvPop { 0%, 8% { transform: scale(0); } 18%, 85% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes cvTravel { 0% { transform: translateX(40px); } 40% { transform: translateX(300px); } 55% { transform: translateX(320px); } 100% { transform: translateX(600px); } }

/* ---------- Blog post ---------- */
.page-post { background: var(--paper); }
.post-hero { position: relative; overflow: hidden; padding: 150px var(--gutter) clamp(120px, 14vw, 180px); background: var(--ink); }
.post-hero__wrap { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 26px; max-width: 980px; }
.post-hero__title { font-size: clamp(38px, 5vw, 72px); font-weight: 500; line-height: 1.03; letter-spacing: -.045em; color: var(--cream); text-wrap: balance; }
.post-hero__lede { max-width: 720px; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.6; color: var(--muted-light); animation: fadeUp 1s var(--ease) .45s both; }
.post-hero__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-top: 22px; border-top: 1px solid rgba(245, 239, 230, .12); animation: fadeUp 1s var(--ease) .6s both; }
.byline { display: flex; align-items: center; gap: 12px; }
.byline img { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 2px var(--ink), 0 0 0 3.5px rgba(215, 55, 43, .7); }
.byline > span { display: flex; flex-direction: column; font-size: 13.5px; color: var(--muted); }
.byline strong { font-size: 15px; font-weight: 600; color: var(--cream); }
.post-hero__facts { display: flex; gap: 18px; font: 400 12px 'Geist Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-light); }
.post-cover { position: relative; z-index: 3; max-width: 1240px; margin: calc(-1 * clamp(84px, 10vw, 130px)) auto 0; padding: 0 var(--gutter); }
.post-cover .cover { aspect-ratio: 21 / 9; border-radius: 28px; box-shadow: 0 40px 80px -40px rgba(20, 17, 16, .8); border: 1px solid rgba(245, 239, 230, .08); }
@media (max-width: 699px) { .post-cover .cover { aspect-ratio: 16 / 11; border-radius: 22px; } }

.post-layout { display: grid; grid-template-columns: minmax(0, 720px) 280px; justify-content: space-between; gap: 56px; padding: clamp(48px, 6vw, 80px) var(--gutter) 40px; color: var(--ink); }
.post-aside__inner { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 14px; }
.post-aside__label { font: 400 11.5px 'Geist Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--label-on-light); }
.post-aside__share { display: flex; gap: 10px; align-items: center; }
.share-ic { width: 40px; height: 40px; }
.share-ic rect { fill: var(--ink); }
.share-ic path { fill: #fff; }
.copy-link { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(20, 17, 16, .18); background: transparent; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--ink); transition: border-color .3s, background .3s; }
.copy-link:hover { border-color: var(--ink); }
.copy-link.is-done { background: var(--ink); color: var(--cream); }
.post-aside__cta { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; padding: 22px; border-radius: 22px; background: var(--ink); color: var(--cream); }
.post-aside__t { font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
.post-aside__d { font-size: 14.5px; line-height: 1.5; color: var(--muted-light); }
.post-aside__cta .card__cta { margin-top: 8px; }
@media (max-width: 1023px) {
  .post-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .prose { max-width: 720px; }
  .post-aside__inner { position: static; }
}

.prose { font-size: 18px; line-height: 1.75; color: var(--body-on-light); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2em; font-size: clamp(26px, 2.6vw, 34px); font-weight: 500; line-height: 1.15; letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }
.prose h3 { margin-top: 1.6em; font-size: 21px; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; color: var(--ink); }
.prose h2 + *, .prose h3 + * { margin-top: .6em; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--red-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .3s; }
.prose a:hover { color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .5em; }
.prose li::marker { color: var(--red); font-weight: 600; }
.tldr { padding: 24px 26px; border-radius: 22px; background: var(--cream); border: 1px solid rgba(20, 17, 16, .08); border-left: 4px solid var(--red); }
.tldr__k { font: 400 11.5px 'Geist Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--red-deep); }
.tldr ul { margin-top: 10px; font-size: 16.5px; line-height: 1.6; }
.pfig { margin: 2em 0; }
.pfig figcaption { margin-top: 12px; font-size: 14.5px; line-height: 1.55; color: var(--label-on-light); }
.pfig__loop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 22px; border-radius: 22px; background: var(--ink); }
.pfig__loop span { position: relative; padding: 16px 8px; border-radius: 14px; text-align: center; background: var(--ink-raised); border: 1px solid rgba(245, 239, 230, .1); color: var(--cream); font-size: 15px; font-weight: 500; animation: pfigOn 4s ease-in-out infinite; }
.pfig__loop span:nth-child(2) { animation-delay: 1s; }
.pfig__loop span:nth-child(3) { animation-delay: 2s; }
.pfig__loop span:nth-child(4) { animation-delay: 3s; }
@keyframes pfigOn { 0%, 30%, 100% { background: var(--ink-raised); border-color: rgba(245, 239, 230, .1); } 10%, 20% { background: var(--red); border-color: var(--red); } }
@media (max-width: 499px) { .pfig__loop { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ptable { border-top: 1px solid rgba(20, 17, 16, .15); font-size: 16px; line-height: 1.5; }
.ptable__row { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1.2fr); gap: 8px 20px; padding: 16px 0; border-bottom: 1px solid rgba(20, 17, 16, .15); }
.ptable__row--head { font: 400 11.5px 'Geist Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--label-on-light); }
@media (max-width: 599px) { .ptable__row { grid-template-columns: minmax(0, 1fr); } .ptable__row--head { display: none; } }
.pdl { display: flex; flex-direction: column; margin: 1.2em 0 0; border-top: 1px solid rgba(20, 17, 16, .15); }
.pdl > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 6px 24px; padding: 18px 0; border-bottom: 1px solid rgba(20, 17, 16, .15); }
.pdl dt { font-weight: 600; color: var(--ink); }
.pdl dd { margin: 0; }
@media (max-width: 599px) { .pdl > div { grid-template-columns: minmax(0, 1fr); } }

.post-end { display: flex; flex-direction: column; gap: 32px; padding: 0 var(--gutter) clamp(72px, 9vw, 110px); max-width: 1240px; color: var(--ink); }
.author { display: flex; gap: 20px; align-items: flex-start; max-width: 720px; padding: 26px; border-radius: 24px; background: var(--cream); border: 1px solid rgba(20, 17, 16, .08); }
.author img { flex: none; width: 64px; height: 64px; border-radius: 50%; }
.author > div { display: flex; flex-direction: column; gap: 8px; }
.author__name { font-size: 18px; font-weight: 600; }
.author__bio { font-size: 15.5px; line-height: 1.55; color: var(--body-on-light); }
.pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pager__a { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; border-radius: 22px; border: 1px solid rgba(20, 17, 16, .14); transition: border-color .3s, background .3s; }
.pager__a:hover { border-color: var(--ink); background: var(--cream); }
.pager__a--next { text-align: right; }
.pager__k { font: 400 11.5px 'Geist Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--red-deep); }
.pager__t { font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -.015em; }
@media (max-width: 599px) { .pager { grid-template-columns: minmax(0, 1fr); } .pager__a--next { text-align: left; } }

/* ---------- Contact ---------- */
.phero--contact { min-height: 0; }
.phero__wrap--contact { grid-template-columns: minmax(0, 1fr); gap: 56px; }
.cgrid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; animation: fadeUp 1.1s var(--ease) .6s both; }
.ccall {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 18px; min-height: 400px; padding: clamp(28px, 3.4vw, 44px);
  border-radius: 30px; background: var(--red); color: #fff; box-shadow: 0 40px 80px -40px rgba(215, 55, 43, .9); transition: transform .5s var(--ease);
}
.ccall__rings { position: absolute; z-index: -1; right: 10%; bottom: 10%; width: 0; height: 0; }
.ccall__rings span { position: absolute; left: -220px; top: -220px; width: 440px; height: 440px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); animation: ringOut 8s linear infinite; }
.ccall__rings span:nth-child(2) { animation-delay: -2.7s; }
.ccall__rings span:nth-child(3) { animation-delay: -5.4s; }
.ccall__k { display: inline-flex; align-items: center; gap: 10px; font: 400 12px 'Geist Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; }
.ccall__t { font-size: clamp(34px, 4vw, 58px); font-weight: 500; line-height: 1; letter-spacing: -.045em; }
.ccall__d { max-width: 520px; font-size: 17px; line-height: 1.6; }
.ccall__go { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 15px 24px; border-radius: 999px; background: var(--ink); color: var(--cream); font-weight: 600; font-size: 15px; transition: transform .35s var(--ease); }
.ccall:hover .ccall__go { transform: translateX(4px); }
.cways { display: flex; flex-direction: column; gap: 10px; padding: clamp(24px, 3vw, 36px); border-radius: 30px; background: rgba(245, 239, 230, .04); border: 1px solid rgba(245, 239, 230, .1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.cways__h { margin-bottom: 6px; font: 400 12px 'Geist Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cway { display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: 20px; background: var(--ink-raised); border: 1px solid rgba(245, 239, 230, .08); transition: border-color .3s, transform .4s var(--ease); }
.cway:hover { border-color: rgba(239, 90, 76, .55); transform: translateX(4px); }
.cway__ic { flex: none; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(215, 55, 43, .14); }
.cway__ic svg { width: 20px; height: 20px; fill: none; stroke: var(--cream); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cway__ic--fill svg { fill: var(--cream); stroke: none; }
.cway__fill { fill: var(--cream); stroke: none; }
.cway__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cway__k { font: 400 11.5px 'Geist Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cway__v { font-size: 16.5px; font-weight: 500; color: var(--cream); overflow-wrap: anywhere; }
.cway__go { margin-left: auto; color: var(--red-bright); font-size: 18px; }
.cways__note { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; font-size: 14.5px; line-height: 1.5; color: var(--muted-light); }
.cways__note .footer__kicker-line { flex: none; }
@media (max-width: 899px) { .cgrid { grid-template-columns: minmax(0, 1fr); } .ccall { min-height: 0; } }
.expect { padding: var(--section-y) var(--gutter); background: var(--cream); color: var(--ink); }
.expect__wrap { display: flex; flex-direction: column; gap: 56px; }
.expect .sec-head__aside { color: var(--body-on-light); }

/* ---------- Footer ----------
   Three columns from 1100px (About, Explore, Get in touch), two from 600px,
   one below. footer--lite (meta "footerLite": true) drops Get in touch. */
.footer { border-top: 1px solid var(--line-d); }
.footer__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
@media (min-width: 600px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 48px; } }
/* lite on tablets: About becomes a band (intro left, globe right), Explore sits below */
@media (min-width: 600px) and (max-width: 1099px) {
  .footer--lite .footer__about { grid-column: 1 / -1; max-width: none; flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; }
}
@media (min-width: 1100px) {
  .footer__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .7fr) minmax(0, 1.2fr); gap: 48px; }
  .footer--lite .footer__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); }
}
.footer__about { gap: 28px; }
.footer .globe { width: 160px; }
.footer .globe__badge { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
.footer .footer__h, .footer .contact__title { margin: 0 0 14px; font: 500 11px/1.3 'Geist Mono', ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.footer__nav ul { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
/* links: cream at 80%, full on hover, with a red underline that scales in */
.footer__nav a, .footer__link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; transform: none;
  font-size: 16px; font-weight: 500; letter-spacing: -.01em; color: rgba(245, 239, 230, .8); transition: color var(--dur-1);
}
.footer__link > span:first-child { position: relative; }
.footer__link > span:first-child::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--red-bright);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.footer__nav a:hover, .footer__link:hover { color: var(--cream); transform: none; }
.footer__link:hover > span:first-child::after { transform: scaleX(1); }
.footer__ext { color: var(--muted); font-size: 14px; }
.footer .contact a { padding: 14px 0; color: var(--cream); }
.footer .contact a:first-of-type { padding-top: 4px; }
.footer .contact__icon { color: var(--cream); transition: border-color var(--dur-1), background var(--dur-1); }
.footer .contact a:hover { color: var(--cream); }
.footer .contact a:hover .contact__icon { border-color: rgba(239, 90, 76, .55); background: rgba(215, 55, 43, .12); }
.footer .contact__go { transition: transform .35s var(--ease), color var(--dur-1); }
.footer .contact a:hover .contact__go { color: var(--red-bright); transform: translate(2px, -2px); }
@media (min-width: 1100px) and (max-width: 1279px) { .footer .contact__value { font-size: 15px; } }
/* the email breaks only after the @ (a <wbr> in partials.mjs), never mid-word */
.footer .contact__value { overflow-wrap: normal; }
@media (max-width: 360px) { .footer .contact__value { font-size: 14.5px; } }
@media (max-width: 599px) { .footer .globe { width: 140px; } }

/* ---------- Legal pages on the shared header ---------- */
.legal-page .site-header .nav { display: none; }
@media (min-width: 960px) { .legal-page .site-header .nav { display: flex; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .lx-float, .cv-flow, .cv-spin, .cv-spin-rev, .cv-ping, .cv-pulse, .cv-float, .cv-travel, .cv-ok, .cv-pop,
  .agent__loop li span, .term__pulse, .handover__rings span, .book__rings span, .ccall__rings span, .scroll-cue span, .pfig__loop span { animation: none !important; }
  .cv-ok, .cv-pop { opacity: 1; transform: none; }
  /* menu: a plain fade, no circle, no rising rows */
  .menu, .menu.is-open { clip-path: none; }
  .menu { opacity: 0; transition: opacity .2s linear !important; }
  .menu.is-open { opacity: 1; }
  .menu.is-open .menu__link, .menu.is-open .menu__sub-link, .menu.is-open .menu__foot { animation: none !important; }
  .status-chip--live::before { animation: none !important; }
  .site-header, .brand img { transition: none !important; }
  /* section labels are simply there (main.js also marks them in at once) */
  .js [data-eyebrow] { opacity: 1; }
  .js [data-eyebrow] .eyebrow__line { transform: none; }
  /* marquees become calm scrollers: the first card starts on the content edge, cards snap,
     and only the right edge fades (a hint that the row scrolls) */
  .marquee-mask {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
  }
  .marquee { --mq-pad: max(var(--gutter), calc((100vw - 1240px) / 2)); scroll-padding-inline: var(--mq-pad); }
  .marquee__list { padding-inline: var(--mq-pad); }
  .marquee--recs { scroll-snap-type: x mandatory; }
  .marquee--recs .rec { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 600px) {
  /* phones: the next card shows a clear edge, so the row reads as scrollable */
  .marquee-mask {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
  .marquee--recs .rec { width: calc(100vw - 2 * var(--gutter) - 44px); }
  /* everything lands in its final state at once: no staggered words, no late fade-ups */
  *, *::before, *::after { animation-delay: 0s !important; transition-delay: 0s !important; }
}
.has-gl .hero__blob { display: none; }

/* Light-hero pages (About, Blog, Contact): the pill stays deep so it reads cleanly on paper and sand */
.page-about .nav-pill, .page-blog:not(.page-post) .nav-pill, .page-contact .nav-pill { background: rgba(20, 17, 16, .95); }
.page-about .site-header.is-scrolled .nav-pill, .page-blog:not(.page-post) .site-header.is-scrolled .nav-pill, .page-contact .site-header.is-scrolled .nav-pill { background: rgba(20, 17, 16, .96); }