/* About page — editorial, interactive profile. Namespaced ab- to stay clear of legacy .about-* rules. */

.ab-page {
  --ab-bg: var(--ua-paper, #efe9de);
  --ab-ink: var(--ua-ink, #14251f);
  --ab-muted: var(--ua-muted, #53615a);
  --ab-line: var(--ua-line, rgba(20, 37, 31, .16));
  --ab-surface: #f8f4ec;
  --ab-surface-2: #e6dfd1;
  --ab-green: var(--ua-green, #17382d);
  --ab-lime: var(--ua-lime, #dfff63);
  --ab-on-lime: #17382d;
  --ab-orange: var(--ua-orange, #d9522d);
  --ab-accent: #ad4022;
  --ab-cream: #fbf7ef;
  --ab-grid: rgba(20, 37, 31, .055);
  --ab-shadow: 0 30px 70px -36px rgba(20, 37, 31, .5);
  --ab-shadow-soft: 0 16px 36px -24px rgba(20, 37, 31, .4);
  --ab-display: var(--ua-display, "DM Serif Display", Georgia, serif);
  --ab-sans: var(--ua-sans, "Manrope", system-ui, sans-serif);
  --ab-ease: cubic-bezier(.2, .8, .2, 1);
  position: relative;
  display: block;
  overflow-x: hidden;
  overflow-x: clip;
  color: var(--ab-ink);
  background: var(--ab-bg);
  font: 500 16px/1.6 var(--ab-sans);
}

html.theme-dark .ab-page {
  --ab-surface: #17211c;
  --ab-surface-2: #1e2b24;
  --ab-accent: #f47a52;
  --ab-grid: rgba(242, 239, 231, .04);
  --ab-shadow: 0 34px 80px -38px rgba(0, 0, 0, .85);
  --ab-shadow-soft: 0 18px 40px -26px rgba(0, 0, 0, .8);
}

html[data-palette="desert"] .ab-page { --ab-on-lime: #352017; --ab-accent: var(--ua-orange); }

.ab-page *, .ab-page *::before, .ab-page *::after { box-sizing: border-box; }
.ab-page :where(h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote) { margin: 0; }
.ab-page :where(ol, ul) { padding: 0; list-style: none; }
.ab-page img { display: block; max-width: 100%; height: auto; }
.ab-page button { font: inherit; color: inherit; cursor: pointer; }
.ab-page :focus-visible { outline: 2px solid var(--ab-orange); outline-offset: 3px; border-radius: 6px; }

/* The shared interior script fades whole sections in; this page runs its own reveals. */
body .ab-page .interior-motion-target { opacity: 1; translate: none; }

.ab-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ab-i { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.ab-shell { width: min(calc(100% - 64px), 1200px); margin-inline: auto; }

.ab-kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--ab-muted); font: 800 11px/1 var(--ab-sans); letter-spacing: .14em; text-transform: uppercase; }
.ab-kicker b { display: inline-grid; min-width: 30px; height: 22px; padding: 0 8px; place-items: center; color: var(--ab-on-lime); border-radius: 99px; background: var(--ab-lime); font-weight: 800; letter-spacing: .04em; }
.ab-kicker-light { color: rgba(255, 255, 255, .78); }
.ab-kicker-dark { color: color-mix(in srgb, var(--ab-on-lime) 72%, transparent); }
.ab-kicker-dark b { color: var(--ab-lime); background: var(--ab-on-lime); }

.ab-page h2 { font: 400 clamp(40px, 5.4vw, 76px)/.98 var(--ab-display); letter-spacing: -.035em; text-wrap: balance; }
.ab-page h2 em, .ab-page h1 em { font-style: normal; color: var(--ab-accent); }

.ab-section-head { display: grid; gap: 20px; max-width: 760px; margin-bottom: 56px; }
.ab-section-head > p:last-child { max-width: 520px; color: var(--ab-muted); font-size: 17px; }

/* Buttons & links (≥ 0,2,0 so the shared `a { color: inherit }` rule never wins) */
.ab-page .ab-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border: 1px solid transparent; border-radius: 99px; font: 800 14px/1 var(--ab-sans); letter-spacing: -.005em; text-decoration: none; transition: transform .35s var(--ab-ease), background-color .25s, color .25s, border-color .25s, box-shadow .35s; }
.ab-page .ab-btn .ab-i { transition: transform .35s var(--ab-ease); }
.ab-page .ab-btn:hover .ab-i { transform: translate(2px, -2px); }
.ab-page .ab-btn:hover { transform: translateY(-2px); }
.ab-page .ab-btn-primary { color: #fff; background: var(--ab-orange); box-shadow: 0 14px 30px -16px var(--ab-orange); }
.ab-page .ab-btn-primary:hover { background: color-mix(in srgb, var(--ab-orange) 86%, #000); }
.ab-page .ab-btn-ghost { color: var(--ab-ink); border-color: var(--ab-line); background: transparent; }
.ab-page .ab-btn-ghost:hover { border-color: var(--ab-ink); }
.ab-page .ab-btn-ghost[href^="#"]:hover .ab-i { transform: translateY(3px); }
.ab-page .ab-btn-lime { color: var(--ab-on-lime); background: var(--ab-lime); }
.ab-page .ab-btn-dark { color: var(--ab-lime); background: var(--ab-on-lime); }
.ab-page .ab-text-link { color: var(--ab-ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--ab-line); text-underline-offset: 5px; transition: text-decoration-color .2s; }
.ab-page .ab-text-link:hover { text-decoration-color: var(--ab-orange); }

/* Reveal choreography (enabled only when JS runs) */
.ab-js [data-ab-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ab-ease) var(--ab-delay, 0ms), transform .8s var(--ab-ease) var(--ab-delay, 0ms); }
.ab-js [data-ab-reveal].is-in { opacity: 1; transform: none; }

/* ================= HERO ================= */
/* Centred name-and-arch composition — deliberately unlike the home hero's copy-left / photo-right split. */

.ab-hero { position: relative; padding: 36px 0 72px; isolation: isolate; }
.ab-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--ab-grid) 1px, transparent 1px), linear-gradient(90deg, var(--ab-grid) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 25%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 25%, transparent 75%); }
.ab-hero::after { content: ""; position: absolute; z-index: -1; top: 14%; left: 50%; width: 60vw; max-width: 760px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--ab-lime) 18%, transparent), transparent 62%); filter: blur(24px); transform: translateX(-50%); pointer-events: none; }

.ab-hero-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }

.ab-crumbs { display: flex; gap: 10px; color: var(--ab-muted); font-size: 13px; font-weight: 700; }
.ab-page .ab-crumbs a { color: var(--ab-muted); transition: color .2s; }
.ab-page .ab-crumbs a:hover { color: var(--ab-ink); }
.ab-crumbs [aria-current] { color: var(--ab-ink); }

.ab-status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 16px 8px 12px; border: 1px solid var(--ab-line); border-radius: 99px; background: color-mix(in srgb, var(--ab-surface) 70%, transparent); backdrop-filter: blur(8px); font-size: 13px; font-weight: 700; }
.ab-status time { font-variant-numeric: tabular-nums; }
.ab-status-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #71c042; }
.ab-status-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #71c042; opacity: .5; animation: ab-ping 2.4s var(--ab-ease) infinite; }
.ab-status.is-after-hours .ab-status-dot { background: #e0a53a; }
.ab-status.is-after-hours .ab-status-dot::after { border-color: #e0a53a; }
.ab-status-note { color: var(--ab-muted); font-weight: 600; }
.ab-status-note::before { content: "·"; margin-right: 12px; }
@keyframes ab-ping { 0% { transform: scale(.6); opacity: .7; } 80%, 100% { transform: scale(1.8); opacity: 0; } }

.ab-hero-stage { position: relative; display: grid; grid-template-columns: 1fr minmax(260px, 360px) 1fr; grid-template-rows: auto auto; align-items: center; margin-top: 40px; }
.ab-hero-title { display: contents; font-weight: 400; }
.ab-name { position: relative; z-index: 2; display: block; overflow: hidden; grid-row: 1; padding-bottom: .04em; font: 400 clamp(84px, 14.5vw, 230px)/.86 var(--ab-display); letter-spacing: -.055em; }
.ab-name > span { display: inline-block; animation: ab-rise 1.1s var(--ab-ease) both; }
.ab-name-first { grid-column: 1; justify-self: end; margin-right: -.12em; }
.ab-name-last { grid-column: 3; justify-self: start; margin-left: -.06em; color: var(--ab-accent); }
.ab-name-last > span { animation-delay: .1s; }
.ab-hero-tag { grid-column: 1 / -1; grid-row: 2; justify-self: center; margin-top: 30px; font: 400 clamp(26px, 3vw, 42px)/1.1 var(--ab-display); letter-spacing: -.02em; text-align: center; animation: ab-fade-up 1s var(--ab-ease) .35s both; }
.ab-hero-tag em { position: relative; white-space: nowrap; }
.ab-hero-tag em::after { content: ""; position: absolute; left: 0; right: .1em; bottom: -.04em; height: .08em; border-radius: 99px; background: var(--ab-lime); transform-origin: left; animation: ab-swipe 1s var(--ab-ease) .9s both; }
@keyframes ab-rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes ab-swipe { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ab-fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

.ab-portrait { --rx: 0deg; --ry: 0deg; position: relative; z-index: 1; grid-column: 2; grid-row: 1; width: 100%; perspective: 1000px; animation: ab-fade-up 1.1s var(--ab-ease) .15s both; }
.ab-portrait-frame { overflow: hidden; border-radius: 999px 999px 28px 28px; background: var(--ab-surface-2); box-shadow: var(--ab-shadow); outline: 1px solid var(--ab-line); outline-offset: 10px; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s var(--ab-ease); }
.ab-portrait.is-tilting .ab-portrait-frame { transition: transform .12s linear; }
.ab-portrait-frame img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; filter: grayscale(1) contrast(1.12) brightness(.96); }

.ab-sticker { position: absolute; bottom: 12%; right: -50px; z-index: 3; display: grid; width: 112px; height: 112px; place-items: center; color: var(--ab-on-lime); border-radius: 50%; background: var(--ab-lime); box-shadow: var(--ab-shadow-soft); }
.ab-sticker svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: ab-spin 18s linear infinite; }
.ab-sticker text { fill: currentColor; font: 800 10px var(--ab-sans); text-transform: uppercase; }
.ab-sticker b { font: 400 26px/1 var(--ab-display); }
@keyframes ab-spin { to { transform: rotate(360deg); } }

.ab-avail { position: absolute; left: 50%; bottom: -18px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; color: var(--ab-ink); border: 1px solid var(--ab-line); border-radius: 99px; background: color-mix(in srgb, var(--ab-surface) 92%, transparent); box-shadow: var(--ab-shadow-soft); backdrop-filter: blur(12px); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; transform: translateX(-50%); }
.ab-avail i { width: 7px; height: 7px; border-radius: 50%; background: #71c042; box-shadow: 0 0 0 4px rgba(113, 192, 66, .18); }

.ab-hero-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 32px; align-items: center; margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--ab-line); }
.ab-hero-lead { color: var(--ab-muted); font-size: 16px; line-height: 1.6; }

.ab-now { display: grid; gap: 6px; padding: 14px 18px; border-left: 3px solid var(--ab-orange); border-radius: 0 14px 14px 0; background: color-mix(in srgb, var(--ab-surface) 80%, transparent); }
.ab-now-label { color: var(--ab-accent); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.ab-now-text { min-height: 3em; font-size: 15px; font-weight: 600; transition: opacity .35s, transform .35s var(--ab-ease); }
.ab-now-text.is-swapping { opacity: 0; transform: translateY(6px); }

.ab-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

.ab-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 48px; border-top: 1px solid var(--ab-line); }
.ab-stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: 26px 24px 0 0; }
.ab-stats > div + div { padding-left: 24px; border-left: 1px solid var(--ab-line); }
.ab-stats dd { font: 400 clamp(44px, 5vw, 68px)/1 var(--ab-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.ab-stats dt { color: var(--ab-muted); font-size: 13px; font-weight: 700; }

/* ================= STORY ================= */

.ab-story { padding: 120px 0; border-top: 1px solid var(--ab-line); }
.ab-story-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
.ab-story-head { position: sticky; top: 120px; display: grid; gap: 24px; justify-items: start; }

.ab-length { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 5px; border: 1px solid var(--ab-line); border-radius: 99px; background: var(--ab-surface); }
.ab-length button { position: relative; z-index: 1; min-width: 124px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 99px; background: none; color: var(--ab-muted); font-size: 14px; font-weight: 800; transition: color .3s; }
.ab-length button[aria-selected="true"] { color: var(--ab-on-lime); }
.ab-length-pill { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 99px; background: var(--ab-lime); transition: transform .45s var(--ab-ease); }
.ab-length.is-long .ab-length-pill { transform: translateX(100%); }

.ab-story-panel { animation: ab-panel-in .55s var(--ab-ease); }
@keyframes ab-panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ab-tldr { display: grid; gap: 0; counter-reset: tldr; }
.ab-tldr li { padding: 26px 0; border-bottom: 1px solid var(--ab-line); font: 400 clamp(23px, 2.4vw, 32px)/1.28 var(--ab-display); letter-spacing: -.015em; }
.ab-tldr li:first-child { padding-top: 0; }
.ab-tldr b { color: var(--ab-accent); font-weight: 400; }
.ab-story-panel p { max-width: 640px; color: var(--ab-muted); font-size: 18px; line-height: 1.75; }
.ab-story-panel p + p { margin-top: 20px; }
.ab-story-panel .ab-story-lead { color: var(--ab-ink); font: 400 clamp(25px, 2.6vw, 34px)/1.25 var(--ab-display); letter-spacing: -.015em; }
.ab-story-panel em { color: var(--ab-ink); font-style: italic; }
.ab-page .ab-story-panel a { color: var(--ab-ink); text-decoration: underline; text-decoration-color: var(--ab-orange); text-underline-offset: 4px; }

.ab-quote { display: grid; gap: 14px; margin-top: 48px; padding: 30px 32px; border-radius: 24px; background: var(--ab-green); color: var(--ab-cream); }
.ab-quote p { font: 400 clamp(22px, 2.2vw, 28px)/1.3 var(--ab-display); }
.ab-quote footer { color: var(--ab-lime); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

/* ================= CRAFT ================= */

.ab-craft { padding: 40px 0 120px; }
.ab-craft-ui { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); overflow: hidden; border-radius: 32px; background: var(--ab-green); color: var(--ab-cream); box-shadow: var(--ab-shadow); }

/* Real brand marks sit on cream "app icon" tiles so every logo keeps its own colour on the dark panel. */
.ab-logo { display: inline-grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; border-radius: 12px; background: var(--ab-cream); box-shadow: inset 0 0 0 1px rgba(20, 37, 31, .06), 0 6px 14px -8px rgba(0, 0, 0, .5); }
.ab-logo svg { width: 22px; height: 22px; fill: var(--brand); }

.ab-craft-side { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 18px; border-right: 1px solid rgba(255, 255, 255, .1); background: rgba(0, 0, 0, .12); }
.ab-craft-tabs { display: grid; gap: 4px; }
.ab-craft-tabs button { position: relative; display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 10px 14px; border: 1px solid transparent; border-radius: 18px; background: none; color: var(--ab-cream); text-align: left; transition: background-color .25s, border-color .25s, transform .3s var(--ab-ease); }
.ab-craft-tabs button:hover { background: rgba(255, 255, 255, .05); }
.ab-craft-tabs button[aria-selected="true"] { border-color: rgba(223, 255, 99, .35); background: rgba(223, 255, 99, .1); }
.ab-tab-logo { transition: transform .4s var(--ab-ease); }
.ab-craft-tabs button[aria-selected="true"] .ab-tab-logo { transform: scale(1.06) rotate(-4deg); }
.ab-tab-text { display: grid; gap: 2px; min-width: 0; }
.ab-tab-text b { font-size: 15px; font-weight: 800; }
.ab-tab-text small { overflow: hidden; color: rgba(251, 247, 239, .58); font-size: 12.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ab-tab-no { margin-left: auto; color: rgba(251, 247, 239, .35); font-size: 12px; font-weight: 800; letter-spacing: .08em; font-variant-numeric: tabular-nums; transition: color .25s; }
.ab-craft-tabs button[aria-selected="true"] .ab-tab-no { color: var(--ab-lime); }
.ab-craft-tabs button[aria-selected="true"]::before { content: ""; position: absolute; left: -18px; top: 18px; bottom: 18px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ab-lime); }
.ab-craft-note { padding: 18px; border: 1px dashed rgba(255, 255, 255, .16); border-radius: 18px; color: rgba(251, 247, 239, .66); font-size: 14px; line-height: 1.55; }
.ab-craft-note b { color: var(--ab-lime); }

.ab-craft-panels { position: relative; min-height: 600px; }
.ab-craft-panel { position: relative; display: grid; align-content: start; gap: 22px; height: 100%; padding: 46px 50px; overflow: hidden; animation: ab-panel-in .5s var(--ab-ease); }
.ab-craft-panel[hidden] { display: none; }
.ab-craft-panel:focus-visible { outline-offset: -6px; }
.ab-panel-mark { position: absolute; top: -40px; right: -40px; width: 260px; height: 260px; opacity: .07; pointer-events: none; }
.ab-panel-mark svg { width: 100%; height: 100%; fill: var(--ab-cream); }
.ab-panel-index { color: var(--ab-lime); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.ab-craft-panel h3 { max-width: 620px; font: 400 clamp(32px, 3.4vw, 50px)/1.02 var(--ab-display); letter-spacing: -.03em; }
.ab-panel-lead { max-width: 580px; color: rgba(251, 247, 239, .74); font-size: 17px; }
.ab-panel-label { margin-bottom: 14px; color: rgba(251, 247, 239, .5); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

.ab-panel-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 28px; padding: 24px 0; border-block: 1px solid rgba(255, 255, 255, .1); }
.ab-ticks { display: grid; gap: 12px; }
.ab-ticks li { position: relative; padding-left: 30px; font-size: 15px; font-weight: 600; line-height: 1.45; }
.ab-ticks li::before { content: ""; position: absolute; top: .38em; left: 2px; width: 14px; height: 8px; border-left: 2px solid var(--ab-lime); border-bottom: 2px solid var(--ab-lime); transform: rotate(-45deg); transform-origin: 30% 60%; }
.ab-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ab-tools li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px 8px 8px; border-radius: 14px; background: rgba(255, 255, 255, .05); font-size: 13px; font-weight: 700; line-height: 1.2; transition: background-color .25s, transform .3s var(--ab-ease); }
.ab-tools li:hover { background: rgba(255, 255, 255, .09); transform: translateY(-2px); }
.ab-tools .ab-logo { width: 34px; height: 34px; border-radius: 10px; }
.ab-tools .ab-logo svg { width: 19px; height: 19px; }

.ab-read-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ab-page .ab-read { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 10px; color: var(--ab-cream); border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; background: rgba(0, 0, 0, .14); transition: border-color .25s, background-color .25s, transform .35s var(--ab-ease); }
.ab-page .ab-read:hover { border-color: rgba(223, 255, 99, .45); background: rgba(0, 0, 0, .22); transform: translateY(-2px); }
.ab-read img { width: 84px; height: 64px; flex: 0 0 auto; object-fit: cover; border-radius: 11px; }
.ab-read span { display: grid; gap: 4px; min-width: 0; }
.ab-read b { font-size: 14px; font-weight: 700; line-height: 1.3; }
.ab-read small { color: rgba(251, 247, 239, .55); font-size: 12px; font-weight: 700; }
.ab-page .ab-read:hover b { color: var(--ab-lime); }

.ab-page .ab-panel-link { display: inline-flex; align-items: center; gap: 8px; width: fit-content; min-height: 46px; padding: 0 20px; color: var(--ab-on-lime); border-radius: 99px; background: var(--ab-lime); font-size: 14px; font-weight: 800; transition: transform .35s var(--ab-ease); }
.ab-page .ab-panel-link:hover { transform: translateY(-2px); }
.ab-page .ab-panel-link:hover .ab-i { transform: translate(2px, -2px); }
.ab-panel-link .ab-i { transition: transform .3s var(--ab-ease); }

/* ================= WALL ================= */

.ab-wall { position: relative; display: grid; min-height: min(88vh, 820px); align-items: end; overflow: hidden; color: #fff; background: #0c1310; isolation: isolate; }
.ab-wall-media { position: absolute; inset: -12% 0; z-index: -2; will-change: transform; }
.ab-wall-media img { width: 100%; height: 100%; object-fit: cover; }
.ab-wall::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 14, 11, .9) 0%, rgba(8, 14, 11, .7) 38%, rgba(8, 14, 11, .1) 72%), linear-gradient(180deg, rgba(8, 14, 11, .1) 0%, rgba(8, 14, 11, .2) 45%, rgba(8, 14, 11, .88) 100%); }
.ab-wall-copy { display: grid; gap: 20px; justify-items: start; padding: 120px 0 80px; }
.ab-wall-copy h2 { max-width: 760px; color: #fff; }
.ab-wall-copy p:not(.ab-kicker) { max-width: 560px; color: rgba(255, 255, 255, .82); font-size: 18px; }

/* ================= BELIEFS ================= */

.ab-beliefs { padding: 120px 0; }
.ab-belief-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ab-belief { border: 1px solid var(--ab-line); border-radius: 24px; background: var(--ab-surface); transition: border-color .3s, box-shadow .4s var(--ab-ease), transform .4s var(--ab-ease), background-color .3s; }
.ab-belief:hover { transform: translateY(-4px); box-shadow: var(--ab-shadow-soft); }
.ab-belief.is-open { border-color: var(--ab-orange); }
.ab-belief > button { display: grid; grid-template-columns: 1fr auto; gap: 26px 16px; width: 100%; min-height: 190px; padding: 26px; border: 0; background: none; text-align: left; align-content: space-between; }
.ab-belief-no { color: var(--ab-accent); font-size: 13px; font-weight: 800; letter-spacing: .1em; }
.ab-belief-text { grid-column: 1 / -1; grid-row: 2; font: 400 clamp(23px, 2vw, 28px)/1.18 var(--ab-display); letter-spacing: -.015em; }
.ab-belief-plus { grid-column: 2; grid-row: 1; width: 34px; height: 34px; padding: 8px; border: 1px solid var(--ab-line); border-radius: 50%; transition: transform .4s var(--ab-ease), background-color .3s, color .3s, border-color .3s; }
.ab-belief > button:hover .ab-belief-plus { border-color: var(--ab-ink); }
.ab-belief.is-open .ab-belief-plus { transform: rotate(45deg); color: #fff; border-color: var(--ab-orange); background: var(--ab-orange); }
.ab-why { display: grid; gap: 14px; padding: 0 26px 26px; animation: ab-panel-in .45s var(--ab-ease); }
.ab-why[hidden] { display: none; }
.ab-why p { color: var(--ab-muted); font-size: 15px; }
.ab-page .ab-why a { display: inline-flex; align-items: center; gap: 6px; width: fit-content; color: var(--ab-accent); font-size: 14px; font-weight: 800; }
.ab-why .ab-i { width: 16px; height: 16px; }

/* ================= LAB ================= */

.ab-lab { padding: 120px 0; border-top: 1px solid var(--ab-line); background: color-mix(in srgb, var(--ab-surface) 55%, var(--ab-bg)); }
.ab-lab-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 72px; align-items: center; }
.ab-lab-copy { display: grid; gap: 22px; justify-items: start; }
.ab-lab-copy > p:not(.ab-kicker) { max-width: 480px; color: var(--ab-muted); font-size: 17px; }
.ab-lab-copy .ab-lab-aside { color: var(--ab-ink); font: 400 22px/1.3 var(--ab-display); }
.ab-lab-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ab-page .ab-lab-card { position: relative; display: grid; align-content: end; gap: 4px; min-height: 200px; padding: 24px; overflow: hidden; color: var(--ab-ink); border: 1px solid var(--ab-line); border-radius: 24px; background: var(--ab-bg); transition: transform .45s var(--ab-ease), border-color .3s, box-shadow .45s var(--ab-ease); }
.ab-page .ab-lab-card:hover { transform: translateY(-5px); border-color: var(--ab-ink); box-shadow: var(--ab-shadow-soft); }
.ab-lab-card b { font: 400 25px/1.1 var(--ab-display); }
.ab-lab-card small { color: var(--ab-muted); font-size: 14px; font-weight: 600; }
.ab-lab-icon { position: absolute; top: 22px; left: 22px; width: 46px; height: 46px; padding: 11px; color: var(--ab-on-lime); border-radius: 14px; background: var(--ab-lime); transition: transform .45s var(--ab-ease); }
.ab-lab-card:hover .ab-lab-icon { transform: rotate(-8deg) scale(1.06); }
.ab-page .ab-lab-card-cube { color: var(--ab-cream); background: var(--ab-green); border-color: transparent; }
.ab-lab-card-cube small { color: rgba(251, 247, 239, .72); }

.ab-mini-cube { --s: 44px; position: absolute; top: 34px; left: 36px; width: var(--s); height: var(--s); transform-style: preserve-3d; animation: ab-cube 9s linear infinite; }
.ab-mini-cube i { position: absolute; inset: 0; border: 2px solid #0c1310; border-radius: 6px; background: conic-gradient(from 90deg at 50% 50%, var(--f) 0 25%, color-mix(in srgb, var(--f) 80%, #000) 0 50%, var(--f) 0 75%, color-mix(in srgb, var(--f) 80%, #000) 0); background-size: 50% 50%; }
.ab-mini-cube i:nth-child(1) { --f: #dfff63; transform: translateZ(calc(var(--s) / 2)); }
.ab-mini-cube i:nth-child(2) { --f: #d9522d; transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.ab-mini-cube i:nth-child(3) { --f: #f2efe7; transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.ab-mini-cube i:nth-child(4) { --f: #3f8cff; transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.ab-mini-cube i:nth-child(5) { --f: #f6c343; transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.ab-mini-cube i:nth-child(6) { --f: #3fb66b; transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
@keyframes ab-cube { from { transform: rotateX(-24deg) rotateY(0); } to { transform: rotateX(-24deg) rotateY(360deg); } }

/* ================= FIT ================= */

.ab-fit { padding: 120px 0; }
.ab-fit-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
.ab-fit-head { display: grid; gap: 20px; }
.ab-fit-head > p:last-child { max-width: 400px; color: var(--ab-muted); font-size: 17px; }
.ab-fit-ui { display: grid; gap: 18px; }
.ab-fit-options { display: flex; flex-wrap: wrap; gap: 10px; }
.ab-fit-options button { min-height: 48px; padding: 0 20px; border: 1px solid var(--ab-line); border-radius: 99px; background: var(--ab-surface); font-size: 15px; font-weight: 700; transition: background-color .25s, color .25s, border-color .25s, transform .3s var(--ab-ease); }
.ab-fit-options button:hover { border-color: var(--ab-ink); transform: translateY(-2px); }
.ab-fit-options button[aria-checked="true"] { color: var(--ab-bg); border-color: var(--ab-ink); background: var(--ab-ink); }
.ab-fit-answer { padding: 36px; border: 1px solid var(--ab-line); border-radius: 28px; background: var(--ab-surface); box-shadow: var(--ab-shadow-soft); }
.ab-fit-answer > div { display: grid; gap: 16px; animation: ab-panel-in .45s var(--ab-ease); }
.ab-fit-answer > div[hidden] { display: none; }
.ab-fit-answer h3 { font: 400 clamp(28px, 2.8vw, 38px)/1.08 var(--ab-display); letter-spacing: -.025em; }
.ab-fit-answer p { max-width: 560px; color: var(--ab-muted); font-size: 17px; }
.ab-fit-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 8px; }

/* ================= FAQ ================= */

.ab-faq { padding: 40px 0 120px; }
.ab-faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
.ab-faq-grid > div:first-child { display: grid; gap: 20px; }
.ab-faq-list { border-top: 1px solid var(--ab-line); }
.ab-faq-list details { border-bottom: 1px solid var(--ab-line); }
.ab-faq-list summary { position: relative; display: block; padding: 26px 56px 26px 0; cursor: pointer; font: 400 clamp(21px, 2vw, 26px)/1.25 var(--ab-display); list-style: none; transition: color .2s; }
.ab-faq-list summary::-webkit-details-marker { display: none; }
.ab-faq-list summary:hover { color: var(--ab-accent); }
.ab-faq-list summary::before, .ab-faq-list summary::after { content: ""; position: absolute; top: 50%; right: 8px; width: 16px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .35s var(--ab-ease); }
.ab-faq-list summary::after { transform: rotate(90deg); }
.ab-faq-list details[open] summary::after { transform: rotate(0); }
.ab-faq-list details p { max-width: 620px; padding: 0 56px 28px 0; color: var(--ab-muted); font-size: 16px; animation: ab-panel-in .4s var(--ab-ease); }
.ab-page .ab-faq-list a { color: var(--ab-ink); text-decoration: underline; text-decoration-color: var(--ab-orange); text-underline-offset: 4px; }

/* ================= CTA ================= */

.ab-cta { padding: 0 0 120px; }
.ab-cta-card { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 48px; align-items: end; padding: 64px; overflow: hidden; color: var(--ab-on-lime); border-radius: 36px; background: var(--ab-lime); position: relative; isolation: isolate; }
.ab-cta-card::after { content: ""; position: absolute; right: -120px; top: -160px; z-index: -1; width: 420px; height: 420px; border: 1px solid color-mix(in srgb, var(--ab-on-lime) 18%, transparent); border-radius: 50%; box-shadow: 0 0 0 60px color-mix(in srgb, var(--ab-on-lime) 4%, transparent), 0 0 0 120px color-mix(in srgb, var(--ab-on-lime) 3%, transparent); }
.ab-cta-copy { display: grid; gap: 22px; justify-items: start; }
.ab-cta-copy h2 { color: var(--ab-on-lime); }
.ab-cta-copy h2 em { color: var(--ab-on-lime); opacity: .62; }
.ab-cta-copy > p:not(.ab-kicker) { max-width: 460px; color: color-mix(in srgb, var(--ab-on-lime) 80%, transparent); font-size: 17px; }
.ab-cta-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.ab-cta-list li { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 12px 0 18px; border-radius: 16px; background: color-mix(in srgb, var(--ab-on-lime) 8%, transparent); }
.ab-page .ab-cta-list a { flex: 1; min-width: 0; overflow: hidden; color: var(--ab-on-lime); font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.ab-page .ab-cta-list a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ab-copy { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border: 0; border-radius: 99px; background: var(--ab-on-lime); color: var(--ab-lime) !important; font-size: 13px !important; font-weight: 800 !important; }
.ab-copy .ab-i { width: 15px; height: 15px; }
.ab-copy.is-copied { background: var(--ab-orange); color: #fff !important; }

/* ================= RESPONSIVE ================= */

@media (max-width: 1080px) {
  .ab-hero-foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ab-hero-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .ab-belief-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-craft-panel { padding: 40px; }
  .ab-panel-cols, .ab-read-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .ab-shell { width: min(calc(100% - 40px), 1200px); }
  .ab-hero { padding: 28px 0 56px; }
  .ab-hero-stage { grid-template-columns: 1fr minmax(200px, 280px) 1fr; }
  .ab-sticker { right: -34px; width: 96px; height: 96px; }
  .ab-story-grid, .ab-lab-grid, .ab-fit-grid, .ab-faq-grid, .ab-cta-card { grid-template-columns: minmax(0, 1fr); }
  .ab-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 56px; }
  .ab-stats > div { padding: 22px 16px 22px 0; }
  .ab-stats > div + div { padding-left: 0; border-left: 0; }
  .ab-stats > div:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--ab-line); }
  .ab-stats > div:nth-child(n + 3) { border-top: 1px solid var(--ab-line); }
  .ab-story, .ab-beliefs, .ab-lab, .ab-fit { padding: 88px 0; }
  .ab-story-grid, .ab-lab-grid, .ab-fit-grid, .ab-faq-grid { gap: 40px; }
  .ab-story-head { position: static; }
  .ab-craft { padding: 20px 0 88px; }
  .ab-craft-ui { grid-template-columns: minmax(0, 1fr); border-radius: 26px; }
  .ab-craft-side { padding: 12px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .ab-craft-note { display: none; }
  .ab-craft-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
  .ab-craft-tabs::-webkit-scrollbar { display: none; }
  .ab-craft-tabs button { flex: 0 0 auto; min-height: 54px; padding: 7px 16px 7px 7px; border-radius: 99px; white-space: nowrap; scroll-snap-align: start; }
  .ab-craft-tabs button::before, .ab-tab-text small, .ab-tab-no { display: none; }
  .ab-tab-logo { width: 38px; height: 38px; border-radius: 99px; }
  .ab-craft-panels { min-height: 0; }
  .ab-craft-panel { padding: 30px 24px 34px; }
  .ab-panel-mark { width: 180px; height: 180px; }
  .ab-cta-card { gap: 36px; padding: 44px 28px; border-radius: 28px; }
  .ab-faq { padding: 20px 0 88px; }
  .ab-cta { padding-bottom: 88px; }
}

@media (max-width: 640px) {
  .ab-shell { width: calc(100% - 32px); }
  .ab-page h2 { font-size: clamp(36px, 10.5vw, 48px); }
  .ab-hero-stage { grid-template-columns: minmax(0, 1fr); margin-top: 28px; }
  .ab-name { font-size: clamp(60px, 21vw, 112px); }
  .ab-name-first { grid-column: 1; grid-row: 1; justify-self: start; margin: 0; }
  .ab-name-last { grid-column: 1; grid-row: 1; justify-self: end; margin: 0; }
  .ab-portrait { grid-column: 1; grid-row: 2; justify-self: center; width: min(78%, 320px); margin-top: -18px; }
  .ab-hero-tag { grid-row: 3; margin-top: 40px; }
  .ab-hero-tag em { white-space: normal; }
  .ab-hero-foot { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 36px; }
  .ab-hero-top { flex-direction: column; align-items: flex-start; }  .ab-hero-actions .ab-btn { flex: 1 1 100%; }
  .ab-status-note::before { display: none; }
  .ab-status-note { flex-basis: 100%; }
  .ab-status { border-radius: 18px; }
  .ab-sticker { right: -26px; width: 84px; height: 84px; }
  .ab-sticker b { font-size: 20px; }
  .ab-length { width: 100%; }
  .ab-length button { min-width: 0; }
  .ab-belief-grid, .ab-lab-cards, .ab-panel-cols, .ab-read-grid { grid-template-columns: minmax(0, 1fr); }
  .ab-panel-cols { gap: 24px; }
  .ab-belief > button { min-height: 0; padding: 22px; }
  .ab-why { padding: 0 22px 22px; }
  .ab-lab-card { min-height: 170px; }
  .ab-wall { min-height: 600px; }
  .ab-wall::before { background: linear-gradient(180deg, rgba(8, 14, 11, .2) 0%, rgba(8, 14, 11, .55) 40%, rgba(8, 14, 11, .95) 78%); }
  .ab-wall-copy { padding: 80px 0 56px; }
  .ab-fit-options button { flex: 1 1 100%; justify-content: flex-start; text-align: left; }
  .ab-fit-answer { padding: 26px 22px; border-radius: 22px; }
  .ab-fit-links .ab-btn { flex: 1 1 100%; }
  .ab-faq-list summary { padding-right: 44px; }
  .ab-faq-list details p { padding-right: 0; }
  .ab-quote { padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .ab-page *, .ab-page *::before, .ab-page *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .ab-js [data-ab-reveal] { opacity: 1; transform: none; }
  .ab-wall-media { transform: none !important; }
}