/* ==========================================================================
   ADVERTUOSO — Design system
   Black & white dominant, red undertones. Edit the tokens to re-skin.
   ========================================================================== */

:root {
  /* Palette */
  --ink: #0E0B0B;          /* Warm black (red undertone) */
  --ink-2: #181313;        /* raised surface on dark */
  --ink-3: #2B2222;        /* borders / chips on dark */
  --bone: #FAF8F7;         /* page white */
  --bone-2: #F1ECEA;       /* alternate band */
  --paper: #FFFFFF;
  --red: #E0222D;          /* Signal Red — actions, emphasis */
  --red-deep: #A3121C;     /* hover / deep accent */
  --oxblood: #3D0A0F;      /* dark tint */
  --rose: #F5E1DF;         /* soft tint, highlights */
  --ok: #23955F;           /* success only */
  --muted: #4F4747;        /* warm grey text on light (≥7:1 on bone) */
  --muted-dark: #D3CBCA;   /* light grey text on dark (≥11:1 on ink) */
  --red-on-dark: #FF5761;  /* red for large text on dark (≥6:1, WCAG AAA large) */
  --red-on-dark-sm: #FF8A8F; /* red for small text on dark (≥8:1, WCAG AAA) */
  --soft-dark: #221D1D;    /* softer dark neutral for cards */
  --line: rgba(14, 11, 11, .14);
  --line-soft: rgba(14, 11, 11, .08);
  --line-dark: rgba(250, 248, 247, .14);

  /* Patterns */
  --pat-dots: radial-gradient(rgba(14,11,11,.16) 1px, transparent 1.3px);
  --pat-dots-dark: radial-gradient(rgba(250,248,247,.12) 1px, transparent 1.3px);
  --pat-hatch: repeating-linear-gradient(-45deg, rgba(224,34,45,.16) 0 1px, transparent 1px 8px);
  --pat-hatch-dark: repeating-linear-gradient(-45deg, rgba(250,248,247,.08) 0 1px, transparent 1px 8px);
  --glow-red: radial-gradient(55% 70% at 88% 0%, rgba(224,34,45,.28), transparent 70%);

  /* Type */
  --f-display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --f-body: "Urbanist", "Avenir Next", "Century Gothic", "Segoe UI", sans-serif;

  --t-hero: clamp(2.7rem, 1.5rem + 4.1vw, 5.4rem);
  --t-h2: clamp(2rem, 1.35rem + 2vw, 3.3rem);
  --t-h3: clamp(1.3rem, 1.1rem + .7vw, 1.75rem);
  --t-lead: clamp(1rem, .94rem + .28vw, 1.15rem);
  --t-body: 1rem;
  --t-label: .72rem;

  --track-display: -0.028em;
  --track-body: 0.006em;
  --track-label: 0.18em;
  --lead-display: .98;
  --lead-body: 1.6;

  /* Layout */
  --wrap: 1280px;
  --gutter: clamp(1rem, .5rem + 2.2vw, 2.25rem);
  --section: clamp(3.5rem, 2.6rem + 3vw, 7rem);
  --r: 4px;            /* the one radius — sharp, deliberate */
  --nav-h: 4.25rem;
  --z: 1;              /* zoom for px-built illustrations on large screens */

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  --shadow: 0 1px 0 rgba(14,11,11,.04), 0 14px 30px -18px rgba(14,11,11,.35);
  --shadow-lg: 0 30px 60px -28px rgba(14,11,11,.5);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--nav-h); scrollbar-gutter: stable; }
body {
  font-family: var(--f-body); font-size: var(--t-body); line-height: var(--lead-body);
  letter-spacing: var(--track-body); font-weight: 450; color: var(--ink); background: var(--bone);
  /* Bodoni Moda: lock the optical size. Left on auto, large headings get the "poster" cut
     with 1px hairlines that break up on screen. 11 keeps sturdy, legible strokes. */
  font-optical-sizing: none; font-variation-settings: "opsz" 11;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
iframe { display: block; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
::selection { background: var(--red); color: var(--bone); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

body::after {
  content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 10000; background: var(--ink); color: var(--bone); padding: .7rem 1rem; text-decoration: none; }
.skip:focus { top: 1rem; }

/* ---------- Typography ---------- */
h1, h2, .display {
  font-family: var(--f-display); font-weight: 500;
  letter-spacing: var(--track-display); line-height: var(--lead-display);
}
h1 { font-size: var(--t-hero); }
h2 { font-size: var(--t-h2); }
h3 { font-family: var(--f-display); font-size: var(--t-h3); font-weight: 500; letter-spacing: -0.015em; line-height: 1.1; }
em { font-style: italic; font-weight: 400; }
.red { color: var(--red); }
/* emphasis styles — varied on purpose */
.hl-red { color: var(--red); font-style: italic; font-weight: 400; }
.hl-under { background: linear-gradient(var(--red), var(--red)) 0 92% / 100% .07em no-repeat; padding-bottom: .02em; }
.hl-strike { position: relative; color: var(--muted); font-style: italic; font-weight: 400; white-space: nowrap; }
.hl-strike::after { content: ""; position: absolute; left: -3%; right: -3%; top: 54%; height: .07em; background: var(--red); transform: rotate(-4deg) scaleX(0); transform-origin: left; transition: transform .8s var(--ease-out) .5s; }
.is-in .hl-strike::after, .hl-strike.is-in::after { transform: rotate(-4deg) scaleX(1); }
.on-dark .hl-strike { color: var(--muted-dark); }

.lead { font-size: var(--t-lead); line-height: 1.55; color: var(--muted); max-width: 46ch; }
.label { font-family: var(--f-body); font-size: var(--t-label); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; line-height: 1.3; }

/* Editorial running head: N°01 — Title ———— aside */
.runhead { display: flex; align-items: baseline; gap: 1rem; padding-top: .7rem; border-top: 1px solid currentColor; margin-bottom: clamp(1.2rem, 1rem + 1vw, 2rem); }
.runhead .label { white-space: nowrap; }
.runhead__no { color: var(--red); font-family: var(--f-display); font-style: italic; font-size: 1.05rem; letter-spacing: 0; text-transform: none; font-weight: 500; }
.runhead__aside { margin-left: auto; color: var(--muted); font-weight: 600; }
.on-dark .runhead__aside { color: var(--muted-dark); }
@media (max-width: 600px) { .runhead__aside { display: none; } }

/* ---------- Layout ---------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.section { padding-block: var(--section); position: relative; }
@media (min-width: 900px) and (min-height: 620px) {
  /* every section claims at least a full screen, content centred within it */
  .section { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: calc(clamp(2.5rem, 6.5vh, 6rem) + var(--nav-h) * .6); padding-bottom: clamp(2.5rem, 6.5vh, 6rem); }
  .section > .wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); }
}
.band { background: var(--bone-2); }
.on-dark { background: var(--glow-red), var(--ink); color: var(--bone); }
.on-dark .lead { color: var(--muted-dark); }
.section-head { display: grid; gap: 1rem 3rem; margin-bottom: clamp(1.6rem, 4.5vh, 4.5rem); align-items: end; }
@media (min-width: 900px) { .section-head { grid-template-columns: 1.25fr 1fr; } }
.section-head .lead { justify-self: end; }
@media (max-width: 899px) { .section-head .lead { justify-self: start; } }

/* ---------- Buttons: sharp, tracked, deliberate ---------- */
.btn {
  --bg: var(--ink); --fg: var(--bone); --hov: var(--red);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .9rem;
  height: 50px; padding: 0 1.4rem; border-radius: 2px; background: var(--bg); color: var(--fg);
  text-decoration: none; font-weight: 700; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; line-height: 1;
  overflow: hidden; isolation: isolate; white-space: nowrap; transition: color .35s, box-shadow .35s;
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hov); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease-out); }
.btn:hover::before { transform: scaleX(1); transform-origin: left; }
.btn .arrow { display: inline-block; transition: transform .45s var(--ease-out); font-size: 1rem; letter-spacing: 0; }
.btn:hover .arrow { transform: translateX(4px); }
.btn--red { --bg: var(--red); --fg: #fff; --hov: var(--ink); }
.on-dark .btn--red { --hov: var(--bone); }
.on-dark .btn--red:hover { color: var(--ink); }
.btn--line { --bg: transparent; --fg: var(--ink); --hov: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn--line:hover { color: var(--bone); }
.on-dark .btn--line { --fg: var(--bone); --hov: var(--bone); box-shadow: inset 0 0 0 1px var(--bone); }
.on-dark .btn--line:hover { color: var(--ink); }
.btn--sm { height: 42px; padding: 0 1.1rem; font-size: .74rem; }

.text-link { font-weight: 700; text-decoration: none; font-size: .9rem; letter-spacing: .02em; display: inline-flex; gap: .5rem; align-items: center; background: linear-gradient(var(--red), var(--red)) 0 100% / 100% 1.5px no-repeat; padding-bottom: 3px; transition: background-size .45s var(--ease-out), color .3s; }
.text-link:hover { background-size: 0 1.5px; background-position: 100% 100%; color: var(--red); }

/* ---------- Nav ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 100; transition: transform .55s var(--ease-out), background .4s, box-shadow .4s; }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: var(--nav-h); }
.nav.is-scrolled { background: rgba(250,248,247,.86); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 1px 0 var(--line); }
.nav.is-hidden { transform: translateY(-100%); }
.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; font-family: var(--f-display); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.02em; }
.brand svg { width: 26px; height: 26px; transition: transform .7s var(--ease-spring); }
.brand:hover svg { transform: translateY(-3px) rotate(-6deg); }
.nav__links { display: none; gap: 2rem; align-items: center; }
.nav__links a { position: relative; text-decoration: none; font-weight: 600; font-size: .9rem; padding-block: .3rem; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--red); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease-out); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__cta { display: none; }
.nav__toggle { width: 44px; height: 44px; display: grid; place-items: center; background: var(--ink); color: var(--bone); position: relative; z-index: 2; border-radius: 2px; }
.nav__toggle span { position: absolute; width: 18px; height: 1.6px; background: currentColor; transition: transform .5s var(--ease-out); }
.nav__toggle span:nth-child(1) { transform: translateY(-4px); }
.nav__toggle span:nth-child(2) { transform: translateY(4px); }
.nav.is-open .nav__toggle span:nth-child(1) { transform: rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { transform: rotate(-45deg); }
@media (min-width: 960px) { .nav__links, .nav__cta { display: flex; } .nav__toggle { display: none; } }
.mobile-menu {
  position: fixed; inset: 0; z-index: 99; background: var(--glow-red), var(--ink); color: var(--bone);
  padding: calc(var(--nav-h) + 2rem) var(--gutter) 2rem; display: flex; flex-direction: column; justify-content: space-between;
  clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--ease-in-out); visibility: hidden;
}
.nav.is-open + .mobile-menu { clip-path: inset(0 0 0 0); visibility: visible; }
.mobile-menu a.big { display: block; font-family: var(--f-display); font-size: clamp(2.4rem, 10vw, 3.6rem); letter-spacing: -0.03em; line-height: 1.15; text-decoration: none; border-bottom: 1px solid var(--line-dark); padding-block: .3rem; }
.mobile-menu a.big em { color: var(--red); }
.mobile-menu .label { color: var(--muted-dark); }

/* ---------- Hero ---------- */
.hero { min-height: 100svh; display: flex; align-items: center; padding: calc(var(--nav-h) + 1.5rem) 0 2.5rem; position: relative; overflow: clip; }
.hero::before { content: ""; position: absolute; inset: 0; background: var(--pat-dots) 0 0 / 16px 16px; -webkit-mask-image: radial-gradient(80% 70% at 75% 45%, #000, transparent 75%); mask-image: radial-gradient(80% 70% at 75% 45%, #000, transparent 75%); opacity: .7; pointer-events: none; }
.hero__grid { position: relative; display: grid; gap: 2.5rem; align-items: center; }
.hero__copy { container-type: inline-size; min-width: 0; }
@media (min-width: 1040px) { .hero__grid { grid-template-columns: 1.45fr 1fr; gap: 3rem; } }
.hero__status { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1.4rem; color: var(--ink); }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--red); position: relative; flex: none; }
.pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--red); animation: pulse 2s var(--ease-out) infinite; }
@keyframes pulse { to { transform: scale(3); opacity: 0; } }
.hero h1 { margin-bottom: 1.3rem; font-size: min(5.2rem, 10.3cqi); }
.hero h1 .line { white-space: nowrap; }
.hero h1 .line { display: block; overflow: hidden; padding: .1em .25em .26em; margin: -.1em -.25em -.26em; }
.hero h1 .line > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--ease-out); }
.is-loaded .hero h1 .line > span { transform: none; }
.is-loaded .hero h1 .line:nth-child(2) > span { transition-delay: .08s; }
.is-loaded .hero h1 .line:nth-child(3) > span { transition-delay: .16s; }
.rotator { font-family: var(--f-display); font-size: clamp(1.2rem, 1rem + .9vw, 1.7rem); letter-spacing: -0.015em; line-height: 1.25; margin-bottom: 1.1rem; }
.rotator__static { color: var(--muted); font-style: italic; margin-right: .3ch; }
.rotator__window { position: relative; display: inline-grid; vertical-align: bottom; overflow: hidden; height: 1.45em; padding-bottom: .2em; margin-bottom: -.2em; }
.rotator.is-stacked .rotator__window { display: grid; }
.rotator__word { grid-area: 1 / 1; white-space: nowrap; color: var(--red); opacity: 0; transform: translateY(70%); transition: transform .7s var(--ease-out), opacity .35s ease; }
.rotator__word.is-active { opacity: 1; transform: none; transition: transform .7s var(--ease-out) .18s, opacity .5s ease .18s; }
.rotator__word.is-leaving { opacity: 0; transform: translateY(-70%); transition: transform .45s var(--ease-in-out), opacity .25s ease; }
.hero__copy .lead { margin-bottom: 1.8rem; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: .7rem; }
.hero__for { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; color: var(--muted); }
.hero__for span::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--red); margin-right: .55rem; transform: translateY(-2px) rotate(45deg); }

.stage { zoom: var(--z); position: relative; aspect-ratio: 1 / .95; max-width: 540px; width: 100%; margin-inline: auto; }
.stage__bg { position: absolute; inset: 6% 0 4% 12%; background: var(--glow-red), var(--pat-dots-dark) 0 0 / 14px 14px, var(--ink); border-radius: var(--r); overflow: hidden; }
.stage__bg::after { content: ""; position: absolute; right: -20%; bottom: -30%; width: 75%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(224,34,45,.55), transparent 65%); filter: blur(10px); animation: breathe 7s ease-in-out infinite alternate; }
@keyframes breathe { to { transform: translate(-12%, -10%) scale(1.15); } }
.stage__browser { position: absolute; left: 0; right: 10%; top: 17%; background: var(--paper); border-radius: var(--r); box-shadow: var(--shadow-lg); overflow: hidden; }
.stage__bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
.stage__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--bone-2); }
.stage__bar i:first-child { background: var(--red); }
.stage__url { margin-left: 8px; flex: 1; font-size: 10.5px; font-weight: 600; color: var(--muted); background: var(--bone); padding: 4px 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 2px; }
.stage__page { padding: 18px; display: grid; gap: 12px; }
.stage__hero { height: 112px; background: var(--pat-hatch), var(--rose); position: relative; overflow: hidden; border-radius: 2px; }
.stage__hero::before { content: "New season. Same impeccable taste."; position: absolute; left: 14px; top: 14px; width: 60%; font-family: var(--f-display); font-size: 19px; line-height: 1.02; letter-spacing: -0.02em; }
.stage__hero::after { content: "SHOP NOW"; position: absolute; left: 14px; bottom: 14px; padding: 6px 11px; font-size: 9.5px; font-weight: 800; letter-spacing: .14em; color: #fff; background: var(--ink); }
.stage__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.stage__row b { height: 62px; background: var(--bone-2); border-radius: 2px; }
.stage__row b:nth-child(2) { background: var(--ink); }
.stage__lines { display: grid; gap: 7px; }
.stage__lines i { height: 6px; background: var(--bone-2); }
.stage__lines i:nth-child(2) { width: 68%; }
.toast { position: absolute; display: flex; align-items: center; gap: .65rem; padding: .6rem .9rem .6rem .7rem; background: var(--paper); border-left: 3px solid var(--red); border-radius: 2px; box-shadow: var(--shadow-lg); white-space: nowrap; opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease-out), transform .8s var(--ease-spring); }
.toast.is-shown { opacity: 1; transform: none; }
.toast__icon { width: 28px; height: 28px; display: grid; place-items: center; flex: none; background: var(--bone-2); color: var(--ink); border-radius: 2px; }
.toast__icon svg { width: 15px; height: 15px; }
.toast strong { display: block; font-size: .82rem; font-weight: 750; line-height: 1.2; }
.toast small { display: block; font-size: .72rem; color: var(--muted); line-height: 1.3; }
.toast--1 { left: -3%; top: 3%; }
.toast--2 { right: -2%; top: 47%; }
.toast--3 { left: 4%; bottom: 10%; }
.toast--4 { right: 4%; bottom: 0; }
.sticker { position: absolute; right: -2%; top: -4%; width: 104px; height: 104px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; text-align: center; font-family: var(--f-display); font-style: italic; font-size: .98rem; line-height: 1; transform: rotate(10deg); z-index: 2; box-shadow: var(--shadow); }
.sticker svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 20s linear infinite; }
.sticker text { font-family: var(--f-body); font-weight: 700; font-size: 8.6px; letter-spacing: 2.3px; text-transform: uppercase; fill: #fff; font-style: normal; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 520px) {
  .toast { padding: .45rem .6rem .45rem .5rem; gap: .45rem; }
  .toast__icon { width: 24px; height: 24px; }
  .toast strong { font-size: .72rem; } .toast small { font-size: .64rem; }
  .toast--1 { left: 0; } .toast--2 { right: 0; } .sticker { width: 82px; height: 82px; font-size: .8rem; right: 0; }
}

/* ---------- Before / After ---------- */
.compare { position: relative; overflow: hidden; border-radius: var(--r); box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); height: clamp(22rem, 50vh, 46rem); background: var(--paper); user-select: none; touch-action: pan-y; --pos: 50%; cursor: ew-resize; }
@media (max-width: 720px) { .compare { height: 520px; } }
.compare__pane { position: absolute; inset: 0; }
.compare__pane--before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); z-index: 2; }
.compare__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 0; z-index: 3; }
.compare__handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: var(--red); box-shadow: 0 0 18px rgba(224,34,45,.6); }
.compare__knob { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); width: 62px; height: 62px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; cursor: grab; box-shadow: 0 0 0 4px #fff, 0 10px 30px rgba(224,34,45,.5); transition: transform .4s var(--ease-spring), background .3s; }
.compare__knob::before, .compare__knob::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--red); animation: ring 2.2s var(--ease-out) infinite; pointer-events: none; }
.compare__knob::after { animation-delay: 1.1s; }
@keyframes ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
.compare.is-touched .compare__knob::before, .compare.is-touched .compare__knob::after { animation: none; opacity: 0; }
.compare__knob:hover, .compare.is-dragging .compare__knob { transform: translate(-50%, -50%) scale(1.12); background: var(--ink); }
.compare.is-dragging .compare__knob { cursor: grabbing; }
.compare__knob svg { width: 26px; }
.compare__bubble { position: absolute; left: 0; top: calc(50% - 76px); transform: translateX(-50%); background: var(--ink); color: #fff; padding: .45rem .75rem; border-radius: 2px; white-space: nowrap; pointer-events: none; transition: opacity .4s, transform .5s var(--ease-out); animation: bob 1.6s ease-in-out infinite; }
.compare__bubble::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: inherit; transform: translateX(-50%) rotate(45deg); }
@keyframes bob { 50% { transform: translate(-50%, -5px); } }
.compare.is-touched .compare__bubble { opacity: 0; animation: none; transform: translate(-50%, 8px); }
.compare__tag { position: absolute; bottom: 14px; z-index: 4; padding: .4rem .7rem; pointer-events: none; }
.compare__tag--before { left: 14px; background: #FF00AA; color: #FFFF00; font-family: "Comic Sans MS", "Comic Neue", cursive; font-size: .85rem; }
.compare__tag--after { right: 14px; background: var(--ink); color: #fff; }
.compare__hint { display: flex; align-items: center; justify-content: center; gap: .7rem; margin-top: 1rem; color: var(--ink); font-weight: 600; font-size: .95rem; text-align: center; }
.compare__hint svg { width: 34px; color: var(--red); flex: none; animation: nudgeX 1.6s ease-in-out infinite; }
@keyframes nudgeX { 50% { transform: translateX(5px); } }

/* the 2014 website */
.old { height: 100%; background: #E9F1FF repeating-linear-gradient(45deg, transparent 0 14px, rgba(0,0,120,.04) 14px 28px); font-family: "Times New Roman", Times, serif; color: #000080; display: flex; flex-direction: column; overflow: hidden; }
.old__top { background: linear-gradient(#3366CC, #003399); color: #FFFF66; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; border-bottom: 4px ridge #FFCC00; gap: 10px; }
.old__logo { font-family: Impact, "Arial Black", sans-serif; font-size: clamp(16px, 2vw, 26px); text-shadow: 2px 2px 0 #000; letter-spacing: 1px; }
.old__nav { display: flex; gap: 6px; flex-wrap: wrap; font-size: 11px; }
.old__nav span { background: #C0C0C0; color: #000; padding: 2px 7px; border: 2px outset #fff; font-family: Arial, sans-serif; }
.old__marq { background: #FFFF00; color: #FF0000; font-weight: bold; font-family: Arial, sans-serif; font-size: 12px; padding: 3px 0; white-space: nowrap; overflow: hidden; }
.old__marq span { display: inline-block; animation: oldmarq 9s linear infinite; padding-left: 100%; }
@keyframes oldmarq { to { transform: translateX(-100%); } }
.old__body { flex: 1; display: grid; gap: 12px; padding: 14px; }
@media (min-width: 720px) { .old__body { grid-template-columns: 160px 1fr; } }
.old__side { background: #fff; border: 3px double #000080; padding: 10px; font-size: 12px; font-family: Verdana, sans-serif; display: none; }
@media (min-width: 720px) { .old__side { display: block; } }
.old__side p { margin-bottom: 6px; color: #0000EE; text-decoration: underline; }
.old__counter { margin-top: 12px; background: #000; color: #00FF00; font-family: "Courier New", monospace; text-align: center; padding: 4px; letter-spacing: 3px; }
.old__webring { font-size: 11px; font-family: Verdana, sans-serif; margin-top: 10px; text-align: center; }
.old__main h4 { font-family: "Comic Sans MS", "Comic Neue", cursive; color: #FF00AA; font-size: clamp(20px, 2.6vw, 34px); text-align: center; text-shadow: 2px 2px #00FFFF; margin-bottom: 8px; line-height: 1.1; }
.old__main p { font-size: clamp(11px, 1.1vw, 13px); line-height: 1.35; margin-bottom: 8px; text-align: center; }
.old__construction { display: inline-block; background: repeating-linear-gradient(-45deg, #FFCC00 0 10px, #000 10px 20px); color: #fff; font-family: "Arial Black", sans-serif; font-size: 12px; padding: 6px 10px; text-shadow: 1px 1px #000; margin: 4px auto 10px; }
.old__btn { display: inline-block; background: #00CC00; border: 3px outset #66FF66; color: #fff; font-family: Arial, sans-serif; font-weight: bold; padding: 6px 12px; font-size: 12px; }
.old__center { text-align: center; }

/* the modern website */
.new { height: 100%; background: var(--bone); color: var(--ink); display: flex; flex-direction: column; overflow: hidden; }
.new__top { display: flex; justify-content: space-between; align-items: center; padding: clamp(14px, 2vw, 22px) clamp(18px, 3vw, 40px); border-bottom: 1px solid var(--line-soft); }
.new__logo { font-family: var(--f-display); font-size: clamp(16px, 1.6vw, 22px); letter-spacing: -0.02em; font-weight: 600; }
.new__logo i { color: var(--red); font-style: normal; }
.new__nav { display: none; gap: 26px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
@media (min-width: 720px) { .new__nav { display: flex; } }
.new__pill { background: var(--ink); color: #fff; padding: 8px 13px; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.new__body { flex: 1; display: grid; gap: clamp(16px, 3vw, 40px); padding: clamp(18px, 3vw, 40px); align-items: center; }
@media (min-width: 720px) { .new__body { grid-template-columns: 1.1fr 1fr; } }
.new__kicker { font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--red); margin-bottom: 10px; }
.new__h { font-family: var(--f-display); font-size: clamp(28px, 4vw, 58px); line-height: .96; letter-spacing: -0.03em; margin-bottom: 14px; }
.new__h em { color: var(--red); }
.new__p { font-size: clamp(12px, 1.05vw, 15px); color: var(--muted); max-width: 36ch; margin-bottom: 18px; line-height: 1.5; }
.new__ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.new__ctas span { padding: 11px 16px; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.new__ctas span:first-child { background: var(--red); color: #fff; }
.new__ctas span:last-child { box-shadow: inset 0 0 0 1px var(--ink); }
.new__shop { position: relative; display: grid; grid-template-columns: 1fr 1.1fr; background: #fff; box-shadow: 0 0 0 1px var(--line-soft), var(--shadow-lg); border-radius: 4px; align-self: center; }
.new__img { position: relative; background: var(--pat-hatch), var(--rose); display: grid; place-items: center; min-height: clamp(150px, 22vh, 280px); overflow: hidden; border-radius: 4px 0 0 4px; }
.new__img svg { width: 34%; height: auto; max-height: 82%; filter: drop-shadow(0 18px 18px rgba(14,11,11,.28)); }
.new__badge { position: absolute; top: 10px; left: 10px; background: var(--ink); color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 4px 7px; }
.new__info { padding: clamp(12px, 1.5vw, 24px); display: grid; gap: clamp(6px, .8vh, 11px); align-content: center; }
.new__row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-family: var(--f-display); font-size: clamp(14px, 1.25vw, 20px); line-height: 1.15; }
.new__row b { font-weight: 500; }
.new__stars { color: var(--red); font-size: 12px; letter-spacing: 1px; }
.new__stars span { color: var(--muted); letter-spacing: 0; font-size: 11px; margin-left: 4px; font-weight: 600; }
.new__sizes { display: flex; gap: 5px; }
.new__sizes i { font-style: normal; font-size: 10px; font-weight: 700; padding: 4px 7px; box-shadow: inset 0 0 0 1px var(--line); }
.new__sizes i:first-child { box-shadow: inset 0 0 0 1.5px var(--ink); }
.new__buy { background: var(--red); color: #fff; text-align: center; padding: 10px; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.new__perks { display: flex; gap: 4px 10px; flex-wrap: wrap; font-size: 10.5px; font-weight: 700; color: var(--muted); }
.new__perks span::before { content: "✓ "; color: var(--ok); }
.new__shop .new__chip { left: auto; bottom: auto; right: -10px; top: -16px; box-shadow: var(--shadow); }
@media (max-width: 719px) { .new__sizes, .new__perks, .new__shop .new__chip { display: none; } .new__img { min-height: 130px; } }
.new__chip { position: absolute; left: 8%; bottom: 9%; background: #fff; padding: 8px 12px; font-size: 11px; font-weight: 700; display: flex; align-items: center; gap: 8px; border-left: 3px solid var(--red); }

/* ---------- Services: underline tabs ---------- */
.tabs__list { position: relative; display: flex; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); margin-bottom: 1.4rem; }
.tabs__list::-webkit-scrollbar { display: none; }
.tab { flex: 1 0 auto; display: flex; align-items: baseline; gap: .55rem; padding: .85rem 1.1rem 1rem 0; white-space: nowrap; color: var(--muted); transition: color .3s; text-align: left; }
.tab:hover { color: var(--ink); }
.tab__no { font-family: var(--f-display); font-style: italic; font-size: .95rem; color: var(--red); }
.tab__name { font-family: var(--f-display); font-size: clamp(1.05rem, .95rem + .45vw, 1.35rem); letter-spacing: -0.01em; font-weight: 500; }
.tab[aria-selected="true"] { color: var(--ink); }
.tabs__ink { position: absolute; bottom: -1px; left: 0; height: 3px; background: var(--red); transition: transform .55s var(--ease-out), width .55s var(--ease-out); }
.panel { display: grid; gap: 1.6rem; }
@media (min-width: 820px) { .panel { grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: stretch; } }
.panel[hidden] { display: none; }
.panel.is-entering > * { animation: panelIn .65s var(--ease-out) both; }
.panel.is-entering > *:nth-child(2) { animation-delay: .07s; }
@keyframes panelIn { from { opacity: 0; transform: translateY(14px); } }
.panel__hook { font-family: var(--f-display); font-size: clamp(1.45rem, 1.15rem + 1vw, 2.05rem); line-height: 1.08; letter-spacing: -0.02em; margin: .55rem 0 .9rem; }
.panel__hook em { color: var(--red); }
.panel__desc { color: var(--muted); margin-bottom: 1rem; max-width: 50ch; }
.ticks { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem 1.2rem; margin-bottom: 1.3rem; padding: 0; list-style: none; font-size: .93rem; }
@media (max-width: 560px) { .ticks { grid-template-columns: 1fr; } }
.ticks li { display: flex; gap: .6rem; align-items: baseline; font-weight: 600; line-height: 1.4; }
.ticks li::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--red); transform: translateY(-1px) rotate(45deg); }
.panel__visual { zoom: var(--z); background: var(--pat-dots) 0 0 / 14px 14px, var(--bone-2); border-radius: var(--r); padding: 1.4rem; min-height: 300px; display: grid; place-items: center; position: relative; overflow: hidden; }

.mini { width: 100%; max-width: 330px; display: grid; gap: 9px; font-size: 13px; }
.mini-card { background: var(--paper); border-radius: 2px; padding: 13px; box-shadow: var(--shadow); }
.mini-row { display: flex; align-items: center; gap: 10px; }
.mini-bar { height: 7px; background: var(--bone-2); }
.mini-tag { font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 3px 7px; background: var(--ink); color: #fff; }
.mini-search { display: flex; align-items: center; gap: 8px; background: var(--paper); padding: 11px 14px; box-shadow: var(--shadow); font-weight: 600; border-radius: 2px; }
.mini-search svg { width: 14px; color: var(--muted); }
.mini-ad b { display: block; color: #1A0DAB; font-size: 15px; font-weight: 600; margin: 4px 0 2px; font-family: Arial, sans-serif; }
.mini-ad small { color: #006621; font-family: Arial, sans-serif; }
.mini-ad p { color: #4D5156; font-size: 12px; line-height: 1.4; font-family: Arial, sans-serif; }
.mini-rank { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--paper); box-shadow: 0 1px 0 var(--line); transition: transform .9s var(--ease-out); }
.mini-rank .n { font-family: var(--f-display); font-style: italic; width: 22px; color: var(--muted); }
.mini-rank.is-you { background: var(--ink); color: #fff; }
.mini-rank.is-you .n { color: var(--red); }
.mini-phone { width: 200px; background: var(--ink); border-radius: 26px; padding: 8px; box-shadow: var(--shadow-lg); }
.mini-phone__screen { background: var(--paper); border-radius: 19px; overflow: hidden; }
.mini-post__head { display: flex; align-items: center; gap: 8px; padding: 9px; font-weight: 700; font-size: 11.5px; }
.mini-post__head i { width: 22px; height: 22px; border-radius: 50%; background: var(--red); }
.mini-post__img { aspect-ratio: 1; background: var(--glow-red), var(--pat-hatch-dark), var(--ink); display: grid; place-items: center; color: #fff; font-family: var(--f-display); font-size: 22px; letter-spacing: -0.02em; text-align: center; line-height: 1.05; padding: 18px; font-style: italic; }
.mini-post__cta { display: flex; justify-content: space-between; align-items: center; padding: 9px; font-size: 10.5px; font-weight: 700; }
.mini-post__cta span:last-child { background: var(--red); color: #fff; padding: 5px 9px; }
.mini-heart { position: absolute; color: var(--red); animation: float 3s ease-in infinite; opacity: 0; font-size: 18px; }
@keyframes float { 0% { opacity: 0; transform: translateY(0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-130px) scale(1.2) rotate(15deg); } }
.mini-mail { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; background: var(--paper); padding: 10px 12px; box-shadow: 0 1px 0 var(--line); }
.mini-mail i { width: 32px; height: 32px; display: grid; place-items: center; font-style: normal; font-weight: 800; color: #fff; font-family: var(--f-display); }
.mini-mail b { display: block; font-size: 12.5px; line-height: 1.2; }
.mini-mail small { color: var(--muted); font-size: 11px; }
.mini-mail em { font-style: normal; font-size: 10px; color: var(--muted); font-weight: 700; }
.mini-flow { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.mini-flow span { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; padding: 6px 8px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.mini-flow b { color: var(--red); }
.mini-lp { background: var(--paper); padding: 18px; box-shadow: var(--shadow); display: grid; gap: 10px; justify-items: start; border-top: 3px solid var(--red); }
.mini-lp h5 { font-family: var(--f-display); font-size: 21px; letter-spacing: -0.02em; line-height: 1.02; font-weight: 500; }
.mini-lp .big-btn { justify-self: stretch; text-align: center; background: var(--red); color: #fff; padding: 13px; font-weight: 800; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; animation: nudge 2.4s var(--ease-spring) infinite; }
@keyframes nudge { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.05); } 90% { transform: scale(.98); } }
.mini-cursor { position: absolute; width: 22px; right: 26%; bottom: 20%; animation: cursor 2.4s var(--ease-out) infinite; filter: drop-shadow(0 3px 4px rgba(0,0,0,.2)); }
@keyframes cursor { 0% { transform: translate(40px, 40px); opacity: 0; } 40% { opacity: 1; } 70%, 100% { transform: translate(0, 0); } }

/* ---------- Overhaul: pinned, one panel at a time ---------- */
.overhaul { padding: 0; }
.overhaul__pin { padding-block: var(--section); }
.overhaul__grid { display: grid; gap: 2rem; }
.osteps { list-style: none; padding: 0; margin: 1.6rem 0 1.8rem; display: grid; gap: 0; border-top: 1px solid var(--line-dark); }
.ostep { display: none; }
.opanels { position: relative; }
.opanel { position: relative; padding: clamp(1.4rem, 1rem + 1.8vw, 2.6rem); background: var(--pat-hatch-dark), var(--ink-2); border: 1px solid var(--line-dark); border-radius: var(--r); overflow: hidden; margin-bottom: 1rem; }
.opanel__top { display: flex; justify-content: space-between; align-items: baseline; color: var(--muted-dark); margin-bottom: 1rem; }
.opanel__top .label:first-child { color: var(--red); }
.opanel h3 { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.9rem); letter-spacing: -0.03em; line-height: 1; margin-bottom: .9rem; max-width: 14ch; }
.opanel h3 em { color: var(--red); }
.opanel p { color: var(--muted-dark); max-width: 48ch; position: relative; z-index: 1; }
.opanel__list { list-style: none; padding: 0; margin-top: 1.4rem; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1rem; position: relative; z-index: 1; }
.opanel__list li { font-size: .9rem; font-weight: 600; padding-top: .5rem; border-top: 1px solid var(--line-dark); }
.opanel__big { position: absolute; right: .12em; bottom: -.32em; font-family: var(--f-display); font-style: italic; font-size: clamp(9rem, 6rem + 9vw, 15rem); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(224,34,45,.5); pointer-events: none; }
@media (min-width: 1000px) {
  .overhaul { height: 320vh; }
  .overhaul__pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding-block: calc(var(--nav-h) * .6) 1.5rem; }
  .overhaul__grid { grid-template-columns: .95fr 1.05fr; gap: 4rem; align-items: center; width: 100%; }
  .ostep { display: grid; grid-template-columns: 2.2rem 1fr auto; align-items: center; gap: .8rem; padding: .8rem 0; border-bottom: 1px solid var(--line-dark); color: var(--muted-dark); transition: color .4s; width: 100%; text-align: left; position: relative; }
  .ostep .n { font-family: var(--f-display); font-style: italic; font-size: 1.05rem; }
  .ostep .t { font-family: var(--f-display); font-size: 1.3rem; letter-spacing: -0.01em; }
  .ostep .s { font-size: .8rem; font-weight: 600; opacity: 0; transform: translateX(-6px); transition: .4s var(--ease-out); }
  .ostep__bar { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--red); transform: scaleX(var(--p, 0)); transform-origin: left; }
  .ostep.is-active { color: var(--bone); }
  .ostep.is-active .n { color: var(--red); }
  .ostep.is-active .s { opacity: 1; transform: none; }
  .opanels { height: min(66vh, 34rem); }
  .opanel { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: translateY(30px) scale(.98); filter: blur(8px); transition: opacity .6s var(--ease-out), transform .8s var(--ease-out), filter .6s; pointer-events: none; }
  .opanel.is-active { opacity: 1; transform: none; filter: none; pointer-events: auto; }
  .opanel.is-past { transform: translateY(-30px) scale(.98); }
}

/* ---------- Bundle builder ---------- */
.builder { display: grid; gap: 1rem; }
@media (min-width: 1000px) { .builder { grid-template-columns: 1.35fr 1fr; gap: 1.4rem; } }
.options { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.option { position: relative; background: var(--bone); }
.option input { position: absolute; opacity: 0; pointer-events: none; }
.option label { display: grid; gap: .35rem; height: 100%; padding: 1.05rem 1.1rem 1.15rem; cursor: pointer; transition: background .3s, color .3s; position: relative; }
.option label:hover { background: var(--paper); }
.option input:focus-visible + label { outline: 2px solid var(--red); outline-offset: -3px; }
.option__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: .3rem; }
.option__icon { width: 28px; height: 28px; }
.option__check { width: 22px; height: 22px; box-shadow: inset 0 0 0 1.5px var(--line); display: grid; place-items: center; transition: background .3s, box-shadow .3s; border-radius: 2px; }
.option__check svg { width: 12px; opacity: 0; transform: scale(.4); transition: .4s var(--ease-spring); }
.option__name { font-family: var(--f-display); font-size: 1.2rem; letter-spacing: -0.015em; line-height: 1.1; }
.option__desc { font-size: .85rem; color: var(--muted); line-height: 1.4; transition: color .3s; }
.option input:checked + label { background: var(--ink); color: var(--bone); }
.option input:checked + label .option__check { background: var(--red); box-shadow: none; }
.option input:checked + label .option__check svg { opacity: 1; transform: none; }
.option input:checked + label .option__desc { color: var(--muted-dark); }
.receipt { background: var(--glow-red), var(--ink); color: var(--bone); border-radius: var(--r); padding: clamp(1.3rem, 1rem + 1vw, 1.9rem); display: flex; flex-direction: column; position: relative; overflow: hidden; min-height: 21rem; }
.receipt__label { color: var(--muted-dark); }
.receipt__name { font-family: var(--f-display); font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); letter-spacing: -0.03em; line-height: 1; margin: .8rem 0 .6rem; min-height: 1.1em; }
.receipt__name em { color: var(--red); }
.receipt__quip { color: var(--muted-dark); min-height: 3em; margin-bottom: 1rem; font-size: .95rem; }
.receipt__list { list-style: none; padding: .9rem 0 0; display: grid; gap: .4rem; border-top: 1px dashed var(--ink-3); margin-bottom: auto; font-size: .93rem; }
.receipt__list li { display: flex; justify-content: space-between; gap: 1rem; animation: panelIn .45s var(--ease-out) both; }
.receipt__list li span:last-child { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-dark); }
.receipt__empty { color: var(--muted-dark); font-style: italic; font-family: var(--f-display); }
.receipt__foot { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px dashed var(--ink-3); display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.receipt__count { color: var(--muted-dark); }
.receipt__count b { color: var(--red); }
.receipt .btn[aria-disabled="true"] { opacity: .35; pointer-events: none; }
.receipt.is-bump .receipt__name { animation: bump .6s var(--ease-spring); }
@keyframes bump { 40% { transform: scale(1.04) rotate(-1deg); } }

/* ---------- Work cards ---------- */
.work-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
@media (min-width: 1100px) { .work-grid--home { grid-template-columns: repeat(4, 1fr); } }
.project { position: relative; display: block; text-decoration: none; background: var(--paper); border-radius: var(--r); overflow: hidden; box-shadow: 0 0 0 1px var(--line-soft); transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); }
.project:hover { transform: translateY(-5px); box-shadow: 0 0 0 1px var(--line), var(--shadow-lg); }
.project__thumb { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: var(--bone-2); }
.project__thumb iframe { position: absolute; top: 0; left: 0; width: 1440px; height: 990px; border: 0; transform-origin: 0 0; pointer-events: none; max-width: none; }
.project__thumb::after { content: ""; position: absolute; inset: 0; background: rgba(14,11,11,.0); transition: background .5s; }
.project:hover .project__thumb::after { background: rgba(14,11,11,.35); }
.project__open { position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -40%; opacity: 0; transition: .5s var(--ease-out); background: var(--red); color: #fff; height: 42px; padding: 0 1rem; display: flex; gap: .5rem; align-items: center; white-space: nowrap; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; border-radius: 2px; }
.project:hover .project__open, .project:focus-visible .project__open { translate: -50% -50%; opacity: 1; }
.project__meta { padding: .95rem 1.05rem 1.1rem; display: grid; gap: .25rem; border-top: 1px solid var(--line-soft); }
.project__row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--muted); }
.project__title { font-family: var(--f-display); font-size: 1.35rem; letter-spacing: -0.02em; line-height: 1.1; }
.project__sum { color: var(--muted); font-size: .88rem; line-height: 1.45; }
.badge { font-size: .6rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: .28rem .5rem; background: var(--rose); color: var(--red-deep); white-space: nowrap; border-radius: 2px; }

/* ---------- Audience ---------- */
.audience { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.who { position: relative; padding: clamp(1.3rem, 1rem + 1vw, 1.9rem); min-height: 17rem; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r); transition: transform .6s var(--ease-out); }
.who:hover { transform: translateY(-5px); }
.who:nth-child(1) { background: var(--glow-red), var(--pat-dots-dark) 0 0 / 14px 14px, var(--ink); color: var(--bone); }
.who:nth-child(2) { background: var(--pat-hatch-dark), var(--red); color: #fff; }
.who:nth-child(3) { background: var(--pat-dots) 0 0 / 14px 14px, var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.who__icon { width: 44px; height: 44px; margin-bottom: auto; transition: transform .8s var(--ease-spring); }
.who:hover .who__icon { transform: rotate(-10deg) scale(1.1); }
.who h3 { margin: 1.6rem 0 .5rem; font-size: clamp(1.6rem, 1.3rem + .9vw, 2.1rem); letter-spacing: -0.025em; line-height: 1; }
.who p { font-size: .95rem; line-height: 1.5; opacity: .88; font-weight: 500; }
.promises { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin-top: 1.6rem; border-top: 1px solid var(--ink); }
.promise { padding: 1.1rem 1.2rem 1.1rem 0; border-bottom: 1px solid var(--line-soft); }
.promise h4 { font-family: var(--f-display); font-weight: 500; font-size: 1.2rem; letter-spacing: -0.015em; line-height: 1.15; margin: .35rem 0 .3rem; }
.promise p { color: var(--muted); font-size: .9rem; line-height: 1.45; }
.promise .label { color: var(--red); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 2rem; }
@media (min-width: 1000px) { .faq { grid-template-columns: .8fr 1.2fr; gap: 4rem; } .faq__head { position: sticky; top: calc(var(--nav-h) + 1rem); align-self: start; } }
.faq__ask { margin-top: 1.4rem; padding: 1.1rem 1.2rem; border-left: 3px solid var(--red); background: var(--paper); display: grid; gap: .5rem; max-width: 380px; }
.qa { border-bottom: 1px solid var(--line); }
.qa:first-child { border-top: 1px solid var(--line); }
.qa summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding: .95rem 0; cursor: pointer; font-family: var(--f-display); font-size: clamp(1.05rem, .98rem + .3vw, 1.25rem); letter-spacing: -0.01em; line-height: 1.25; font-weight: 500; transition: color .3s; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--red); }
.qa__icon { flex: none; width: 26px; height: 26px; position: relative; transition: transform .5s var(--ease-out); }
.qa__icon::before, .qa__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; background: currentColor; translate: -50% -50%; transition: transform .45s var(--ease-out); }
.qa__icon::after { transform: rotate(90deg); }
.qa[open] .qa__icon { color: var(--red); transform: rotate(180deg); }
.qa[open] .qa__icon::after { transform: rotate(0); }
.qa__body { overflow: hidden; }
.qa__body > div { padding: 0 3rem 1.1rem 0; color: var(--muted); max-width: 64ch; font-size: .97rem; }

/* ---------- Contact ---------- */
.contact { display: grid; gap: 2rem; }
@media (min-width: 1000px) { .contact { grid-template-columns: .85fr 1.15fr; gap: 4rem; align-items: start; } }
.contact h2 em { color: var(--red); }
.contact__aside { display: grid; gap: .8rem; margin-top: 1.6rem; }
.contact__card { padding: 1rem 1.2rem; border-left: 3px solid var(--red); background: rgba(250,248,247,.04); }
.contact__card .label { color: var(--muted-dark); margin-bottom: .3rem; display: block; }
.contact__card a { font-family: var(--f-display); font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); letter-spacing: -0.015em; text-decoration: none; word-break: break-word; }
.contact__card a:hover { color: var(--red); }
.contact__card p { color: var(--muted-dark); font-size: .93rem; }
.form { background: var(--bone); color: var(--ink); border-radius: var(--r); padding: clamp(1.2rem, 1rem + 1.2vw, 2rem); display: grid; gap: .85rem; position: relative; }
.form__row { display: grid; gap: .85rem; }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .3rem; }
.field > label, .fieldset > legend { font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea { width: 100%; padding: .75rem .9rem; border: 0; border-radius: 2px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font-size: .97rem; font-weight: 500; transition: box-shadow .3s; appearance: none; -webkit-appearance: none; }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230E0B0B' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; background-size: 11px; padding-right: 2.4rem; }
.field textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: #A59B9A; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--ink); }
.field.has-error input, .field.has-error textarea { box-shadow: inset 0 0 0 2px var(--red); }
.field__error { font-size: .82rem; color: var(--red); font-weight: 700; }
.field__error:empty { display: none; }
.fieldset { border: 0; padding: 0; display: grid; gap: .45rem; }
.pills { display: flex; flex-wrap: wrap; gap: .35rem; }
.pill input { position: absolute; opacity: 0; pointer-events: none; }
.pill span { display: inline-flex; align-items: center; gap: .4rem; padding: .48rem .8rem; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; font-weight: 600; font-size: .86rem; transition: .25s; user-select: none; border-radius: 2px; }
.pill span:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.pill input:checked + span { background: var(--ink); color: #fff; box-shadow: none; }
.pill input:checked + span::before { content: "✓"; color: var(--red); font-weight: 800; }
.pill input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.pill--star input:checked + span { background: var(--red); }
.pill--star input:checked + span::before { color: #fff; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .2rem; }
.form__note { font-size: .84rem; color: var(--muted); max-width: 34ch; line-height: 1.4; }
.hp { position: absolute; left: -9999px; }
.form__success { position: absolute; inset: 0; border-radius: inherit; background: var(--pat-dots) 0 0 / 14px 14px, var(--bone); display: grid; place-items: center; text-align: center; padding: 2rem; opacity: 0; visibility: hidden; transition: opacity .6s; }
.form.is-sent .form__success { opacity: 1; visibility: visible; }
.form__success h3 { font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem); letter-spacing: -0.03em; margin: 1rem 0 .5rem; }
.form__success h3 em { color: var(--red); }
.form__success p { color: var(--muted); max-width: 36ch; margin-inline: auto; }
.success-mark { width: 76px; height: 76px; margin-inline: auto; border-radius: 50%; background: var(--red); display: grid; place-items: center; }
.success-mark path { stroke-dasharray: 40; stroke-dashoffset: 40; }
.form.is-sent .success-mark path { animation: draw .7s .3s var(--ease-out) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: var(--bone); padding: clamp(2.5rem, 2rem + 2vw, 4rem) 0 1.6rem; overflow: hidden; border-top: 1px solid var(--line-dark); }
.footer__top { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); margin-bottom: clamp(2rem, 1.5rem + 3vw, 4rem); }
.footer h5 { font-size: var(--t-label); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted-dark); margin-bottom: .8rem; }
.footer ul { list-style: none; padding: 0; display: grid; gap: .35rem; font-size: .95rem; }
.footer a { text-decoration: none; transition: color .3s; }
.footer a:hover { color: var(--red); }
.footer__tag { font-family: var(--f-display); font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1.1; max-width: 16ch; }
.footer__tag em { color: var(--red); }
.footer__word { font-family: var(--f-display); font-size: clamp(3rem, 16.4vw, 15rem); letter-spacing: -0.05em; line-height: .8; font-weight: 600; white-space: nowrap; text-align: center; margin-bottom: 1.6rem; user-select: none; }
.footer__word span { display: inline-block; transition: transform .6s var(--ease-spring), color .4s; }
.footer__word span:hover { transform: translateY(-.07em) rotate(-4deg); color: var(--red); }
.footer__word .dot { color: var(--red); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; color: var(--muted-dark); font-size: .85rem; padding-top: 1.2rem; border-top: 1px solid var(--line-dark); }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease-out), transform 1s var(--ease-out); transition-delay: calc(var(--d, 0) * 80ms); }
.reveal.is-in { opacity: 1; transform: none; }
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em .16em .24em; margin: -.08em -.16em -.24em; }
.split .w > span { display: inline-block; transform: translateY(108%); transition: transform 1s var(--ease-out); transition-delay: calc(var(--i) * 40ms); }
.split.is-in .w > span { transform: none; }

/* ---------- Page transition ---------- */
.curtain { position: fixed; inset: 0; z-index: 9999; pointer-events: none; display: grid; place-items: center; }
.curtain__panel { position: absolute; inset: 0; background: var(--red); transform: scaleY(0); transform-origin: bottom; }
.curtain__panel + .curtain__panel { background: var(--ink); }
.curtain svg { position: relative; width: 60px; opacity: 0; transition: opacity .3s; }
.curtain.is-leaving .curtain__panel { animation: curtainIn .55s var(--ease-in-out) forwards; }
.curtain.is-leaving .curtain__panel + .curtain__panel { animation-delay: .1s; }
.curtain.is-leaving svg { opacity: 1; transition-delay: .4s; }
.curtain.is-entering .curtain__panel { transform: scaleY(1); transform-origin: top; animation: curtainOut .7s var(--ease-in-out) forwards; }
.curtain.is-entering .curtain__panel:first-child { animation-delay: .1s; }
@keyframes curtainIn { to { transform: scaleY(1); } }
@keyframes curtainOut { to { transform: scaleY(0); } }

/* ---------- Work page ---------- */
.page-hero { padding-top: calc(var(--nav-h) + clamp(2rem, 1.5rem + 3vw, 4rem)); padding-bottom: 1.8rem; position: relative; }
.page-hero::before { content: ""; position: absolute; inset: 0; background: var(--pat-dots) 0 0 / 16px 16px; -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000); mask-image: linear-gradient(90deg, transparent 30%, #000); opacity: .6; pointer-events: none; }
.page-hero .wrap { position: relative; }
.page-hero h1 { font-size: clamp(2.6rem, 1.6rem + 4vw, 5rem); margin-bottom: 1rem; }
.page-hero h1 em { color: var(--red); }
.filters { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 1.4rem; border-bottom: 1px solid var(--line); }
.filter { padding: .7rem 1.2rem .8rem 0; font-weight: 700; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); transition: color .3s; display: inline-flex; gap: .35rem; align-items: baseline; position: relative; }
.filter sup { font-family: var(--f-display); font-style: italic; font-size: .85rem; letter-spacing: 0; color: var(--red); }
.filter:hover { color: var(--ink); }
.filter[aria-pressed="true"] { color: var(--ink); }
.filter[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 1.2rem; bottom: -1px; height: 3px; background: var(--red); }
.project.is-hidden { display: none; }
.project.is-pop { animation: panelIn .55s var(--ease-out) both; }
.work-note { margin-top: 2rem; padding: 1rem 1.2rem; border-left: 3px solid var(--red); background: var(--paper); color: var(--muted); max-width: 720px; font-size: .93rem; }
.work-note b { color: var(--ink); }
.cta-band { text-align: center; }
.cta-band h2 { max-width: 18ch; margin: 0 auto 1.6rem; }
.cta-band h2 em { color: var(--red); }

/* ---------- Viewer (shared modal) ---------- */
.viewer { position: fixed; inset: 0; z-index: 500; background: var(--glow-red), rgba(14,11,11,.96); color: var(--bone); display: grid; grid-template-rows: auto 1fr auto; opacity: 0; visibility: hidden; transition: opacity .45s var(--ease-out), visibility .45s; }
.viewer.is-open { opacity: 1; visibility: visible; }
.viewer__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem var(--gutter); flex-wrap: wrap; border-bottom: 1px solid var(--line-dark); }
.viewer__back { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bone); padding: .5rem 0; }
.viewer__back svg { width: 18px; transition: transform .4s var(--ease-out); }
.viewer__back:hover { color: var(--red); }
.viewer__back:hover svg { transform: translateX(-4px); }
.viewer__title { display: grid; min-width: 0; text-align: center; }
.viewer__title strong { font-family: var(--f-display); font-size: 1.25rem; letter-spacing: -0.015em; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewer__title span { color: var(--muted-dark); }
.devices { display: inline-flex; padding: 3px; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-dark); position: relative; border-radius: 2px; }
.devices__glider { position: absolute; top: 3px; bottom: 3px; left: 3px; background: var(--red); transition: transform .45s var(--ease-out), width .45s var(--ease-out); border-radius: 2px; }
.device-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; font-weight: 700; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-dark); transition: color .35s; }
.device-btn svg { width: 15px; height: 15px; }
.device-btn[aria-pressed="true"] { color: #fff; }
@media (max-width: 640px) { .device-btn span { display: none; } .device-btn { padding: .5rem .7rem; } .viewer__title { display: none; } }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-dark); transition: background .3s, color .3s; color: var(--bone); text-decoration: none; border-radius: 2px; }
.icon-btn:hover { background: var(--red); color: #fff; box-shadow: none; }
.icon-btn svg { width: 17px; height: 17px; }
.viewer__actions { display: flex; gap: .4rem; align-items: center; }
.viewer__stage { position: relative; display: grid; place-items: center; overflow: hidden; padding: 1rem var(--gutter); }
.frame { position: relative; transition: width .65s var(--ease-in-out), height .65s var(--ease-in-out), border-radius .65s; background: #000; box-shadow: 0 40px 100px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08); }
.frame__inner { position: absolute; top: 0; left: 0; overflow: hidden; background: #fff; transform-origin: 0 0; }
.frame iframe { width: 100%; height: 100%; border: 0; background: #fff; max-width: none; }
.frame__loader { position: absolute; inset: 0; display: grid; place-items: center; background: var(--bone); color: var(--ink); font-size: .85rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; transition: opacity .4s; z-index: 2; }
.frame__loader.is-done { opacity: 0; pointer-events: none; }
.viewer__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem var(--gutter) .9rem; color: var(--muted-dark); flex-wrap: wrap; border-top: 1px solid var(--line-dark); }
.viewer__nav { display: flex; gap: .4rem; align-items: center; }
.viewer__chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip { font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: .38rem .6rem; background: var(--ink-3); color: var(--bone); border-radius: 2px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0ms !important; }
  .reveal, .split .w > span, .hero h1 .line > span { opacity: 1 !important; transform: none !important; }
  .curtain { display: none; }
}

/* Services — desktop layout: service list left, one large panel right */
.tab__arrow { display: none; }
@media (min-width: 1000px) {
  .tabs { display: grid; grid-template-columns: minmax(16rem, .34fr) 1fr; gap: 2.4rem; align-items: start; }
  .tabs__list { flex-direction: column; overflow: visible; border-bottom: 0; border-top: 1px solid var(--ink); margin: 0; position: sticky; top: calc(var(--nav-h) + 1.5rem); }
  .tabs__ink { display: none; }
  .tab { flex: none; align-items: center; gap: .9rem; padding: 1.05rem 1.1rem; border-bottom: 1px solid var(--line); transition: background .35s, color .35s, padding .45s var(--ease-out); position: relative; }
  .tab::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--red); transform: scaleY(0); transition: transform .45s var(--ease-out); }
  .tab:hover { background: var(--paper); padding-left: 1.4rem; }
  .tab:hover::before { transform: scaleY(1); }
  .tab__name { font-size: clamp(1.3rem, 1.1rem + .5vw, 1.6rem); }
  .tab__arrow { display: block; margin-left: auto; opacity: 0; transform: translateX(-8px); transition: .45s var(--ease-out); color: var(--red); font-size: 1.1rem; }
  .tab[aria-selected="true"] { background: var(--ink); color: var(--bone); padding-left: 1.4rem; }
  .tab[aria-selected="true"]::before { transform: scaleY(1); }
  .tab[aria-selected="true"] .tab__arrow { opacity: 1; transform: none; }
  .panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(1.8rem, 1.2rem + 1.6vw, 3rem); box-shadow: var(--shadow); grid-template-columns: 1.05fr 1fr; gap: 2.6rem; align-items: center; }
  .panel__hook { font-size: clamp(1.6rem, 1.2rem + 1.1vw, 2.4rem); }
  .panel__visual { min-height: 340px; }
}

/* Overhaul — glow lives on the pinned screen and drifts with scroll progress */
.overhaul.on-dark { background: var(--ink); }
.overhaul__pin {
  --p: 0;
  background:
    radial-gradient(60% 75% at calc(88% - var(--p) * 70%) calc(4% + var(--p) * 80%), hsl(calc(354 + var(--p) * 22) 80% 46% / calc(.26 + var(--p) * .16)), transparent 70%),
    radial-gradient(45% 60% at calc(8% + var(--p) * 60%) calc(100% - var(--p) * 70%), hsl(calc(338 + var(--p) * 18) 75% 38% / calc(.12 + var(--p) * .14)), transparent 70%),
    var(--ink);
}
.overhaul__pin::before { content: ""; position: absolute; inset: 0; background: var(--pat-dots-dark) 0 0 / 18px 18px; opacity: calc(.25 + var(--p) * .5); -webkit-mask-image: radial-gradient(70% 70% at calc(85% - var(--p) * 60%) 50%, #000, transparent 75%); mask-image: radial-gradient(70% 70% at calc(85% - var(--p) * 60%) 50%, #000, transparent 75%); pointer-events: none; }
.overhaul__pin > .wrap { position: relative; }
@media (max-width: 999px) { .overhaul__pin { position: relative; } }

/* Section 6 CTA */
.who-cta { margin-top: 1.8rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; padding: 1.4rem 1.6rem; background: var(--pat-hatch), var(--rose); border-radius: var(--r); }
.who-cta p { font-family: var(--f-display); font-size: clamp(1.35rem, 1.1rem + .8vw, 1.9rem); letter-spacing: -0.02em; line-height: 1.15; }
.who-cta p em { color: var(--red); }
.who-cta__actions { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; }

/* Let inner spacing grow with screen height so tall screens are filled, not padded */
@media (min-width: 1000px) and (min-height: 950px) {
  .panel { min-height: 50vh; }
  .panel__visual { min-height: 34vh; }
  .who { min-height: 27vh; }
  .receipt { min-height: 44vh; }
  .option label { padding: clamp(1.05rem, 2.6vh, 2.2rem) 1.3rem; }
  .qa summary { padding-block: clamp(.95rem, 1.8vh, 1.7rem); }
  .field textarea { min-height: 16vh; }
  .promise { padding-block: clamp(1.1rem, 2.4vh, 2.2rem); }
  .work-grid { gap: 1.4rem; }
  .who-cta { padding: clamp(1.4rem, 2.6vh, 2.4rem) 2rem; margin-top: clamp(1.8rem, 3.5vh, 3rem); }
}

@media (min-width: 480px) { .options { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 760px) { .options { grid-template-columns: repeat(3, 1fr); } }


/* =====================================================================
   Revision brief (Nov 2026)
   ===================================================================== */
.nobr { white-space: nowrap; }

/* --- Dark sections: WCAG AAA contrast --- */
.on-dark .red, .on-dark em.red, .on-dark h2 em, .on-dark h3 em, .opanel h3 em, .receipt__name em, .contact h2 em, .footer__tag em, .mobile-menu a.big em { color: var(--red-on-dark); }
.on-dark .runhead__no, .opanel__top .label:first-child, .receipt__count b, .ostep.is-active .n, .on-dark .label.red { color: var(--red-on-dark-sm); }
.on-dark .lead { color: #EDE7E6; font-weight: 500; }

/* --- Hero browser mockup: denser, concrete UI --- */
.stage__page { padding: 0; gap: 0; }
.sp-nav { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--line-soft); font-size: 9.5px; font-weight: 700; color: var(--muted); }
.sp-nav b { font-family: var(--f-display); font-size: 14px; color: var(--ink); margin-right: auto; font-weight: 600; }
.sp-nav b i { color: var(--red); font-style: normal; }
.sp-nav em { font-style: normal; background: var(--ink); color: #fff; padding: 3px 7px; }
.sp-hero { display: grid; grid-template-columns: 1.15fr 1fr; background: var(--pat-hatch), var(--rose); min-height: 132px; }
.sp-hero__copy { padding: 14px; display: grid; align-content: center; justify-items: start; gap: 6px; }
.sp-hero__copy small { font-size: 8px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--red-deep); }
.sp-hero__copy h6 { font-family: var(--f-display); font-weight: 500; font-size: 16px; line-height: 1.05; letter-spacing: -0.01em; }
.sp-btn { background: var(--ink); color: #fff; font-size: 8.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 6px 10px; }
.sp-free { font-size: 8.5px; color: var(--muted); font-weight: 600; }
.sp-hero__img { position: relative; overflow: hidden; }
.sp-hero__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.sp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 14px 14px; }
.sp-item { display: grid; grid-template-columns: 1fr auto; gap: 2px 4px; font-size: 9px; }
.sp-item i { grid-column: 1 / -1; height: 40px; background: var(--c); margin-bottom: 4px; box-shadow: inset 0 0 0 1px var(--line-soft); }
.sp-item b { font-weight: 700; color: var(--ink); }
.sp-item span { font-weight: 700; }
.sp-item small { grid-column: 1 / -1; color: var(--red); font-size: 8.5px; font-weight: 700; }
.stage__stats { position: absolute; left: -7%; bottom: -11%; width: 190px; background: var(--paper); padding: 12px 14px; box-shadow: var(--shadow-lg); border-top: 3px solid var(--red); z-index: 2; display: grid; gap: 2px; }
.stage__stats-top { display: flex; justify-content: space-between; align-items: center; }
.stage__stats-top .label { font-size: 8.5px; color: var(--muted); }
.stage__stats .up { font-size: 10px; font-weight: 800; color: var(--ok); }
.stage__stats > b { font-family: var(--f-display); font-size: 24px; line-height: 1.1; font-weight: 500; }
.stage__stats > small { font-size: 9.5px; color: var(--muted); font-weight: 600; }
.stage__stats svg { width: 100%; height: 30px; margin: 4px 0 2px; }
.stage__stats-row { display: flex; justify-content: space-between; font-size: 9.5px; color: var(--muted); font-weight: 600; }
.stage__stats-row b { color: var(--ink); }
.toast--1 { left: -3%; top: 2%; }
.toast--2 { right: -3%; top: 40%; }
.toast--3 { right: 2%; left: auto; bottom: 2%; }
@media (max-width: 520px) { .stage__stats { width: 150px; padding: 9px 10px; } .stage__stats > b { font-size: 18px; } .stage__stats svg { height: 20px; } }

/* --- Glow-up: more room, real product photo --- */
#glow-up { padding-block: clamp(4rem, 9vh, 8rem); }
.compare { height: clamp(26rem, 62vh, 50rem); }
@media (max-width: 720px) { .compare { height: 560px; } }
.new__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.new__img { min-height: clamp(170px, 28vh, 340px); }
.new__buy { font-size: 10.5px; }

/* --- Services --- */
@media (min-width: 1000px) {
  .tabs { align-items: center; }
  .tabs__list { position: static; }
}
.panel .text-link { margin-top: 1.4rem; }
.ticks { margin-bottom: 0; }

/* Tab I: checkout UI */
.co { width: 100%; max-width: 340px; background: var(--paper); box-shadow: var(--shadow-lg); padding: 16px; display: grid; gap: 10px; font-size: 12px; position: relative; }
.co__steps { display: flex; gap: 6px; font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.co__steps span { flex: 1; padding-top: 6px; border-top: 3px solid var(--bone-2); }
.co__steps .done { border-color: var(--ink); color: var(--ink); }
.co__steps .done::before { content: "✓ "; color: var(--ok); }
.co__steps .on { border-color: var(--red); color: var(--red); }
.co__item { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
.co__item img, .co__item i { width: 44px; height: 52px; object-fit: cover; display: block; }
.co__item i { background: var(--ink); }
.co__item b { display: block; font-size: 12px; }
.co__item small { color: var(--muted); font-size: 10.5px; }
.co__item > span { font-weight: 700; }
.co__lines { display: grid; grid-template-columns: 1fr auto; gap: 4px; color: var(--muted); font-size: 11.5px; }
.co__lines .free { color: var(--ok); font-weight: 700; }
.co__lines .tot { color: var(--ink); font-weight: 800; font-size: 13px; padding-top: 6px; border-top: 1px solid var(--line-soft); }
.co__express { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.co__express span { text-align: center; padding: 8px; background: var(--ink); color: #fff; font-weight: 700; font-size: 11px; }
.co__express span + span { background: var(--bone-2); color: var(--ink); }
.co__pay { background: var(--red); color: #fff; text-align: center; padding: 11px; font-weight: 800; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.co__trust { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); font-weight: 600; }
.co__toast { justify-self: start; background: var(--rose); color: var(--red-deep); font-size: 10.5px; font-weight: 700; padding: 5px 9px; }
.co__toast::before { content: "● "; color: var(--red); animation: blink 1.2s steps(2) infinite; }

/* Tab II: SERP with competitor */
.serp { width: 100%; max-width: 350px; display: grid; gap: 10px; }
.serp__list { display: grid; gap: 8px; }
.serp__res { position: relative; background: var(--paper); padding: 11px 13px; box-shadow: var(--shadow); font-family: Arial, Helvetica, sans-serif; transition: transform .9s var(--ease-out); }
.serp__res small { display: block; color: #202124; font-size: 11px; }
.serp__res b { display: block; color: #1A0DAB; font-size: 14px; font-weight: 500; margin: 2px 0; }
.serp__res p { color: #4D5156; font-size: 11.5px; }
.serp__spon { font-size: 10px; font-weight: 700; color: #202124; }
.serp__res.is-you { box-shadow: 0 0 0 2px var(--red), var(--shadow-lg); }
.serp__badge { position: absolute; right: -8px; top: -8px; background: var(--red); color: #fff; font-family: var(--f-body); font-size: 11px; font-weight: 800; padding: 4px 7px; opacity: 0; transform: scale(.5); transition: .5s var(--ease-spring); }
.serp__list.is-climbed .serp__badge { opacity: 1; transform: none; }
.serp__res.is-dim { opacity: .4; }

/* Tab III: AI assistant */
.ai { width: 100%; max-width: 360px; background: #fff; box-shadow: var(--shadow-lg); display: grid; font-family: var(--f-body); }
.ai__head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); font-weight: 800; font-size: 13px; }
.ai__dot { width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(from 0deg, var(--ink), #6E6464, var(--ink)); }
.ai__model { margin-left: auto; font-weight: 600; font-size: 11px; color: var(--muted); }
.ai__chat { padding: 14px; display: grid; gap: 10px; min-height: 182px; align-content: start; font-size: 12.5px; line-height: 1.5; }
.ai__q { justify-self: end; max-width: 85%; background: var(--bone-2); padding: 8px 12px; border-radius: 14px 14px 2px 14px; font-weight: 600; min-height: 1.5em; }
.ai__q:empty { display: none; }
.ai__a { color: var(--ink); }
.ai__a strong { color: var(--red); font-weight: 800; background: rgba(224,34,45,.08); padding: 0 3px; }
.ai__a .caret { display: inline-block; width: 7px; height: 13px; background: var(--ink); vertical-align: -2px; margin-left: 2px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.ai__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 14px; }
.ai__chips button { font-size: 11px; font-weight: 700; padding: 6px 10px; box-shadow: inset 0 0 0 1px var(--line); background: var(--paper); transition: .25s; }
.ai__chips button:hover, .ai__chips button.on { background: var(--ink); color: #fff; box-shadow: none; }

/* Tab IV: vertical video ad */
.reel { width: 196px; aspect-ratio: 9 / 19.5; background: var(--ink); border-radius: 30px; padding: 8px; box-shadow: var(--shadow-lg); position: relative; z-index: 1; }
.reel__screen { position: relative; height: 100%; border-radius: 23px; overflow: hidden; background: radial-gradient(80% 60% at 50% 40%, #3A1418, #0E0B0B 75%); color: #fff; display: grid; place-items: center; }
.reel__top { position: absolute; top: 14px; left: 12px; right: 12px; display: flex; align-items: center; gap: 6px; font-size: 10.5px; }
.reel__top i { width: 20px; height: 20px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px #fff; }
.reel__top span { opacity: .8; font-size: 9.5px; }
.reel__stop { width: 58%; filter: drop-shadow(0 10px 20px rgba(224,34,45,.45)); animation: stopPulse 2.6s ease-in-out infinite; margin-top: -30px; }
@keyframes stopPulse { 50% { transform: scale(1.06); } }
.reel__cap { position: absolute; left: 12px; right: 44px; bottom: 76px; font-family: var(--f-display); font-size: 15px; line-height: 1.15; }
.reel__cap span { font-family: var(--f-body); font-size: 10px; opacity: .85; }
.reel__side { position: absolute; right: 8px; bottom: 76px; display: grid; gap: 10px; text-align: center; font-size: 9px; font-weight: 700; }
.reel__side b { display: block; font-size: 16px; line-height: 1.1; }
.reel__side span:first-child b { color: var(--red-on-dark); }
.reel__cta { position: absolute; left: 10px; right: 10px; bottom: 38px; background: #fff; color: var(--ink); font-size: 11px; font-weight: 800; padding: 8px 10px; display: flex; justify-content: space-between; }
.reel__comment { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; gap: 6px; align-items: center; font-size: 9.5px; background: rgba(255,255,255,.12); padding: 5px 8px; border-radius: 12px; }
.reel__comment i { width: 14px; height: 14px; border-radius: 50%; background: #E9C9C4; flex: none; }
.panel__visual:has(.reel) { min-height: 470px; }

/* --- Overhaul: legible body copy --- */
.overhaul .lead { color: #F7F4F3; font-weight: 500; }
.opanel p { color: #F7F4F3; font-weight: 500; }
.opanel__list li { color: #FFFFFF; font-weight: 600; border-top-color: rgba(250,248,247,.22); }
.opanel__top { color: #E4DDDC; }
@media (min-width: 1000px) { .ostep { color: #CFC6C5; } .ostep .s { color: #F7F4F3; } }

/* --- Bundle builder: softer dark, larger type, legible summary --- */
.option__name { font-size: 1.35rem; }
.option__desc { font-size: .97rem; }
.option input:checked + label { background: var(--soft-dark); }
.option input:checked + label .option__desc { color: #E4DDDC; }
.receipt { background: radial-gradient(55% 70% at 88% 0%, rgba(224,34,45,.22), transparent 70%), var(--soft-dark); }
.receipt__quip { color: #F7F4F3; font-weight: 600; }
.receipt__label { color: #E4DDDC; }
.receipt__list { color: #FFFFFF; }
.receipt__list li span:last-child, .receipt__empty { color: #E4DDDC; }
.receipt__count { display: inline-flex; align-items: center; gap: .3rem; background: rgba(250,248,247,.12); color: #FFFFFF; padding: .45rem .7rem; box-shadow: inset 0 0 0 1px rgba(250,248,247,.22); }

/* --- Audience: scannable cards --- */
.who { min-height: 0; gap: .2rem; }
.who__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.who__head .label { opacity: .9; }
.who__icon { width: 38px; height: 38px; margin: 0; }
.who h3 { margin: 0 0 .35rem; }
.who__benefit { font-family: var(--f-display); font-style: italic; font-size: 1.12rem; line-height: 1.3; opacity: 1; margin-bottom: 1.1rem; }
.who__list { list-style: none; padding: 1rem 0 0; margin: auto 0 0; display: grid; gap: .55rem; border-top: 1px solid currentColor; border-top-color: color-mix(in srgb, currentColor 25%, transparent); font-size: .95rem; font-weight: 600; line-height: 1.35; }
.who__list li { display: flex; gap: .6rem; align-items: baseline; }
.who__list li::before { content: ""; flex: none; width: 7px; height: 7px; transform: translateY(-1px) rotate(45deg); background: currentColor; }
.who:nth-child(1) .who__list li::before { background: var(--red-on-dark); }
.who:nth-child(2) { background: var(--pat-hatch-dark), var(--red-deep); }
.who:nth-child(3) .who__list li::before { background: var(--red); }
.who p { opacity: 1; }

/* --- FAQ: centered columns, searchable list --- */
@media (min-width: 1000px) { .faq { align-items: center; } .faq__head { position: static; align-self: center; } }
.faq__ask { margin-top: 2.6rem; }
.faq__search { display: flex; align-items: center; gap: .7rem; padding: .85rem 1rem; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 1.2rem; cursor: text; transition: box-shadow .3s; }
.faq__search:focus-within { box-shadow: inset 0 0 0 2px var(--ink); }
.faq__search svg { width: 18px; color: var(--red); flex: none; }
.faq__search input { flex: 1; border: 0; background: none; outline: 0; font-size: 1rem; font-weight: 500; min-width: 0; }
.faq__search input::placeholder { color: #7A7171; }
.faq__search input::-webkit-search-cancel-button { cursor: pointer; }
.faq__empty { padding: 1rem 0; color: var(--muted); }
.qa.is-filtered { display: none; }
.qa mark { background: var(--rose); color: inherit; padding: 0 2px; }

/* --- Contact: brighter text on dark, darker labels on the light form --- */
.contact__card .label { color: #E4DDDC; }
.contact__card p { color: #F2EDEC; }
.field > label, .fieldset > legend { color: #3F3838; }
.form__note { color: #4A4242; }

/* --- Footer: wordmark first --- */
.footer__word { margin: 0 0 clamp(2rem, 1.5rem + 2vw, 3.2rem); padding-bottom: clamp(1.6rem, 1.2rem + 1.5vw, 2.6rem); border-bottom: 1px solid var(--line-dark); }
.footer__top { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.footer h5 { color: #CFC6C5; }
.receipt .receipt__count b { color: #FFFFFF; font-weight: 800; }
@media (max-width: 520px) {
  .hide-sm { display: none; }
  .sp-hero__copy h6 { font-size: 12.5px; }
  .sp-hero__copy { padding: 10px; }
  .sp-free { display: none; }
}
@media (max-width: 520px) { .stage__stats { display: none; } }