/* ════════════════════════════════════════════════════════════════
   NOTABLY — Site styles
   Mirrors the current Paper file exactly. Updated for the latest
   round: number labels removed from proof / role / value cards,
   intro labels switched to title-case sans, pull-quote sized down.
   ════════════════════════════════════════════════════════════════ */


/* ─────────────  0. Type — trial fonts  ─────────────────────── */

@font-face {
  font-family: "Rhetorik Sans Trial";
  src: url("assets/fonts/RhetorikSans-Regular-Trial.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Rhetorik Serif Trial";
  src: url("assets/fonts/RhetorikSerif-Regular-Trial.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* ─────────────  1. Tokens  ─────────────────────────────────── */

:root {
  /* Color */
  --c-off-black: #272826;
  --c-off-white: #FBFAF5;
  --c-footer-bg: #FBFAF6;
  --c-pink: #F2D0F4;          /* swatch pink */
  --c-pink-deep: #F3D0F4;     /* button pink + POV bg variant */
  --c-pink-hover: #D9A6DB;    /* button hover mask */
  --c-mint: #DEFBEE;          /* primary mint */
  --c-mint-soft: #DFFBEE;     /* pull-quote + note variant */
  --c-yellow: #F6F2B6;

  /* Fonts */
  --font-sans: "Rhetorik Sans Trial", "DM Sans", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-serif: "Rhetorik Serif Trial", "Newsreader", Georgia, "Times New Roman", serif;

  /* Spacing scale */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 120px; --s-11: 160px; --s-12: 200px;

  /* Radius */
  --r-md: 8px;
  --r-lg: 10px;
  --r-pill: 15px;     /* highlight pills */
  --r-photo: 25px;    /* Julie photo */

  /* Section gutter */
  --gutter: 80px;
}


/* ─────────────  2. Reset / Base  ──────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--c-off-black);
  background: var(--c-off-white);
  font-size: 15px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ul, ol, blockquote, figure { margin: 0; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; }
strong { font-weight: 500; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}


/* ─────────────  3. Highlight pills  ───────────────────────── */
/* Inline highlight blocks used in big headlines (Hero "Growing",
   Callout "Right", Final "Count?").  In Paper these are flex
   children of a row, with horizontal padding and rounded corners. */

.hl {
  display: inline-block;
  padding: 0 var(--s-4);
  border-radius: var(--r-pill);
  color: var(--c-off-black);
}
.hl--yellow { background: var(--c-yellow); }
.hl--pink   { background: var(--c-pink); }
.hl--mint   { background: var(--c-mint); }

/* Pill mask-in — used on four headlines on the page:
   • Hero "Growing" (fires on page load with a 1.25s delay so it lands
     after the staggered word-in)
   • Callout "Right" (fires when the section scrolls into view)
   • POV "Quality" (fires when the section scrolls into view)
   • Final CTA "Count?" (fires when the section scrolls into view)

   In each case the pill background is rendered as a ::before layer
   that scales from scaleX(0) → scaleX(1) on a left-center origin,
   using the same easing as the primary-button hover sweep. The text
   is wrapped in a .hl__text span with z-index: 1 so it always paints
   above the pill regardless of stacking quirks. Users with reduced
   motion see the pill filled instantly. */
.hero .hl--yellow,
.callout .hl--pink,
.pov .hl--mint,
.final .hl--yellow {
  position: relative;
  background: transparent;
}
.hero .hl--yellow::before,
.callout .hl--pink::before,
.pov .hl--mint::before,
.final .hl--yellow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  transform: scaleX(0);
  /* Default origin (used on reverse / when .in-view is removed): pink
     shrinks toward the right edge, so the un-highlight visually wipes
     from right to left. Forward sweep flips the origin back to left. */
  transform-origin: right center;
}
.hero .hl--yellow::before  { background: var(--c-yellow); }
.callout .hl--pink::before { background: var(--c-pink); }
.pov .hl--mint::before     { background: var(--c-mint); }
.final .hl--yellow::before { background: var(--c-yellow); }

.hl__text {
  position: relative;
  z-index: 1;
}

/* Triggers — each pill is observed at a 50% threshold and gets its
   own .in-view class. Implemented as a transform transition so the
   sweep reverses ("un-highlights") when the pill leaves the viewport
   and the class is removed. Forward delay coordinates the sweep with
   surrounding motion (hero waits 1.25s for the word-in; the other
   three settle for 0.3s). On reverse, no delay — the pink retracts
   immediately as the pill scrolls out of view. */
.hero .hl--yellow::before,
.callout .hl--pink::before,
.pov .hl--mint::before,
.final .hl--yellow::before {
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero .hl--yellow.in-view::before {
  transform: scaleX(1);
  transform-origin: left center;
  transition-delay: 1.25s;
}
.callout .hl--pink.in-view::before,
.pov .hl--mint.in-view::before,
.final .hl--yellow.in-view::before {
  transform: scaleX(1);
  transform-origin: left center;
  transition-delay: 0.3s;
}

@keyframes pill-sweep {
  to { transform: scaleX(1); }
}

/* Line-sweep — when Process or Services scrolls into view, every
   horizontal divider between rows masks in from the left at once.
   The static borders are made transparent under JS so they don't
   double up with the animated bars. */
.js .process[data-line-sweep] .process__step,
.js .services[data-line-sweep] .services__item {
  position: relative;
  border-top-color: transparent;
}
.js .process[data-line-sweep] .process__step:last-child,
.js .services[data-line-sweep] .services__item:last-of-type {
  border-bottom-color: transparent;
}
.js .process[data-line-sweep] .process__step::before,
.js .services[data-line-sweep] .services__item::before,
.js .process[data-line-sweep] .process__step:last-child::after,
.js .services[data-line-sweep] .services__item:last-of-type::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--c-off-black);
  transform: scaleX(0);
  transform-origin: left center;
}
.js .process[data-line-sweep] .process__step::before,
.js .services[data-line-sweep] .services__item::before {
  top: -1px;
}
.js .process[data-line-sweep] .process__step:last-child::after,
.js .services[data-line-sweep] .services__item:last-of-type::after {
  bottom: -1px;
}
/* --line-i indexes each row top to bottom so the dividers cascade. */
.js .process[data-line-sweep] .process__step { --line-i: 0; }
.js .process[data-line-sweep] .process__step:nth-child(2) { --line-i: 1; }
.js .process[data-line-sweep] .process__step:nth-child(3) { --line-i: 2; }
.js .process[data-line-sweep] .process__step:nth-child(4) { --line-i: 3; }

.js .services[data-line-sweep] .services__item { --line-i: 0; }
.js .services[data-line-sweep] .services__item:nth-of-type(2) { --line-i: 1; }
.js .services[data-line-sweep] .services__item:nth-of-type(3) { --line-i: 2; }
.js .services[data-line-sweep] .services__item:nth-of-type(4) { --line-i: 3; }
.js .services[data-line-sweep] .services__item:nth-of-type(5) { --line-i: 4; }

.js .process[data-line-sweep].in-view .process__step::before,
.js .services[data-line-sweep].in-view .services__item::before {
  animation: pill-sweep 2.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(0.3s + var(--line-i, 0) * 150ms);
}
.js .process[data-line-sweep].in-view .process__step:last-child::after,
.js .services[data-line-sweep].in-view .services__item:last-of-type::after {
  animation: pill-sweep 2.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(0.3s + (var(--line-i, 0) + 1) * 150ms);
}

@media (prefers-reduced-motion: reduce) {
  .js .process[data-line-sweep] .process__step::before,
  .js .services[data-line-sweep] .services__item::before,
  .js .process[data-line-sweep] .process__step:last-child::after,
  .js .services[data-line-sweep] .services__item:last-of-type::after {
    animation: none;
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero .hl--yellow::before,
  .callout .hl--pink::before,
  .pov .hl--mint::before,
  .final .hl--yellow::before {
    animation: none;
    transform: scaleX(1);
  }
}


/* ─────────────  4. Buttons  ────────────────────────────────
   Primary: filled pink at rest; on hover a deeper pink masks in
   from the left like a highlighter pass.
   Secondary: outlined off-black at rest; on hover off-black fills
   in from the left and the text cross-fades to off-white. */

.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 18px;
  font-weight: 400;
  color: var(--c-off-black);
  border-radius: var(--r-lg);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color .25s ease, transform .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--c-off-black); outline-offset: 3px; }

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform .45s cubic-bezier(0.45, 0, 0.2, 1);
  z-index: -1;
}
.btn:hover::before { transform: scaleX(1); }

/* Primary — the pink IS the ::before layer.  At rest the ::before
   covers the button (scaleX(1)).  On hover, an animation runs that:
     0–50% — pink retreats to the right edge (scaleX 1→0, origin right)
     50–100% — pink grows back from the left (scaleX 0→1, origin left)
   The transform-origin flip at the midpoint happens while scaleX is 0
   (invisible), so the switch isn't visible. */
.btn--primary {
  background: transparent;
  border: 0;
  padding: 14px 22px;
}
.btn--primary::before {
  background: var(--c-pink-deep);
  transform: scaleX(1);
  transform-origin: left center;
  transition: none;
}
.btn--primary:hover::before {
  transform: scaleX(1);
  animation: pink-sweep .6s cubic-bezier(0.45, 0, 0.2, 1);
}

@keyframes pink-sweep {
  0%   { transform: scaleX(1); transform-origin: right center; }
  49%  { transform: scaleX(0); transform-origin: right center; }
  50%  { transform: scaleX(0); transform-origin: left center; }
  100% { transform: scaleX(1); transform-origin: left center; }
}

.btn--secondary {
  background: transparent;
  border: 1px solid var(--c-off-black);
  padding: 13px 21px;
}
.btn--secondary::before { background: var(--c-off-black); }
.btn--secondary:hover { color: var(--c-off-white); }

@media (prefers-reduced-motion: reduce) {
  .btn::before { transition: none; }
  .btn--primary:hover::before { animation: none; }
}


/* ─────────────  5. Nav  ────────────────────────────────────
   Sticky off-white top bar. 28px vertical padding, 80px horizontal.
   Logo image on left, 3 items on right (2 links + primary button). */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-off-white);
  border-bottom: 1px solid rgba(39, 40, 38, 0.08);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px var(--gutter);
}
.nav__logo img { height: 44px; width: auto; display: block; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 40px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 18px;
}
.nav__links a:not(.btn) { color: var(--c-off-black); }
.nav__links a:not(.btn):hover { opacity: 0.65; }

.nav__toggle {
  display: none;
  background: none; border: 0; padding: 8px;
  flex-direction: column; gap: 5px;
}
.nav__toggle span { display: block; width: 22px; height: 1.5px; background: var(--c-off-black); }

.nav__mobile { display: none; flex-direction: column; gap: var(--s-4); padding: var(--s-5) 20px var(--s-6); border-top: 1px solid rgba(39,40,38,0.08); font-family: var(--font-sans); font-size: 16px; background: var(--c-off-white); }
.nav__mobile[hidden] { display: none; }
.nav__mobile:not([hidden]) { display: flex; }
.nav__mobile .btn { align-self: flex-start; }

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__toggle { display: inline-flex; }
}


/* ─────────────  6. Hero  ───────────────────────────────────
   Centered, 1100 max-width inner. Headline is broken into two
   vertical lines; line 2 is a horizontal row with the yellow
   "Growing" pill in the middle. */

.hero { padding: var(--s-10) var(--gutter) var(--s-9); }

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-7);
  max-width: 1100px;
  margin: 0 auto;
}

.hero__headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(48px, 8vw, 96px);
  line-height: 1.04;
  letter-spacing: -0.025em;
}
.hero__line { display: block; }
.hero__line--row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Words fade + rise gently into place, staggered 280ms apart. Longer
   fade (1.4s) on a softer expo-out curve so words decelerate smoothly
   into position instead of snapping. Travel reduced from 20px to 12px
   to soften the visible motion, and translate3d / will-change push the
   transform onto a compositor layer to kill subpixel text jitter.
   Last word lands at 2520ms; pill sweep follows at 2700ms. */
.hero__word {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  will-change: transform, opacity;
  animation: hero-word-in 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--i, 0) * 280ms);
}

@keyframes hero-word-in {
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__word {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.hero__subtitle {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.2vw, 24px);
  line-height: 1.2;
  max-width: 820px;
  text-align: center;
}

.hero__ctas {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  justify-content: center;
  padding-top: 8px;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .hero { padding: var(--s-8) 20px var(--s-7); }
}


/* ─────────────  7. Proof Strip  ────────────────────────────
   4 colored cards across, 20px gap. Cards now hold just title +
   body (no leading number).  Section padding 0/80/96/80. */

.proof {
  padding: 0 var(--gutter) var(--s-9);
}
.proof__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.proof__card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6) 28px;
  border-radius: var(--r-lg);
}
.proof__card--pink   { background: var(--c-pink); }
.proof__card--mint   { background: var(--c-mint); }
.proof__card--yellow { background: var(--c-yellow); }
.proof__title { font-family: var(--font-sans); font-size: 18px; line-height: 22px; font-weight: 400; }
.proof__body  { font-family: var(--font-serif); font-size: 14px; line-height: 1.2; }

@media (max-width: 1024px) {
  .proof__grid { grid-template-columns: repeat(2, 1fr); }
  .proof { padding: 0 40px var(--s-8); }
}
@media (max-width: 640px) {
  .proof__grid { grid-template-columns: 1fr; }
  .proof { padding: 0 20px var(--s-7); }
}


/* ─────────────  8. Intro  ──────────────────────────────────
   Off-white background.  Top row stacks vertically: headline
   then a mint pull-quote card (horizontal inside).  Body below
   is 3 columns: First / Then / Thats When.

   Labels are 24px Sans Title-Case (NOT eyebrow caps).  Pull quote
   sized down to 36px serif. */

.intro {
  display: flex;
  flex-direction: column;
  padding: var(--s-10) var(--gutter);
  gap: var(--s-8);
  background: var(--c-off-white);
}

.intro__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-7);
}

.intro__headline-stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  align-self: stretch;
}
.intro__headline {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(44px, 6.5vw, 80px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--c-off-black);
}

.intro__pull {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 40px 36px;
  border-radius: var(--r-lg);
  background: var(--c-mint-soft);
}
.intro__pull-quote {
  flex: 1;
  font-family: var(--font-serif);
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.intro__pull-caption {
  flex: 1;
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.5;
}

/* Three side-by-side label/body columns. Each col has its own
   border-top on the body; because labels share the same height
   (one line of 24px / 1.55 line-height each), the three borders
   align horizontally. A single pink ::before band overlays them
   across the full width — including the gap areas — to read as
   one continuous highlighter mark behind the dividers. */
.intro__body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 80px;
  position: relative;
  isolation: isolate;
}
.intro__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.intro__col-label {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.55;
  color: var(--c-off-black);
  white-space: nowrap;
}
.intro__col-body {
  padding-top: 10px;
  border-top: 1px solid var(--c-off-black);
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.2;
}
.intro__body::before {
  content: "";
  position: absolute;
  /* Pink band extends 8px past the divider line on each side and has
     slightly rounded corners — matches Paper's "Pink Highlight" frame
     (1296×14, rounded-sm). */
  left: -8px;
  right: -8px;
  /* Y position of the divider lines: label height (font × lh) + col gap. */
  top: calc(24px * 1.55 + 10px - 7px);
  height: 14px;
  background: var(--c-pink);
  border-radius: 5px;
  z-index: -1;
  transform-origin: left center;
}
/* With JS we override via --intro-progress, which the scroll handler
   updates 0 → 1 as the section passes through the viewport. */
.js .intro__body::before {
  transform: scaleX(var(--intro-progress, 0));
}

@media (prefers-reduced-motion: reduce) {
  .js .intro__body::before { transform: scaleX(1); }
}

@media (max-width: 1024px) {
  .intro { padding: var(--s-10) 40px; gap: var(--s-7); }
  .intro__pull { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
  /* Single column, label-body pairs already stack vertically inside
     each .intro__col. Hide the pink band since there's no continuous
     horizontal divider to highlight. */
  .intro__body {
    grid-template-columns: 1fr;
    row-gap: var(--s-6);
  }
  .intro__col-label { white-space: normal; }
  .intro__body::before { display: none; }
}
@media (max-width: 640px) {
  .intro { padding: var(--s-8) 20px; }
  .intro__pull { padding: var(--s-6); }
}


/* ─────────────  9. What Notably Does  ─────────────────────
   Two equal columns: left has the headline + 2 paragraphs.
   Right is the role list — 8 colored cards, vertically stacked,
   each card just the role title (no number). */

.does {
  display: flex;
  padding: var(--s-10) var(--gutter);
  gap: var(--s-8);
}
.does__left {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}
.does__headline-stack { align-self: stretch; display: flex; flex-direction: column; gap: var(--s-4); }
.does__headline {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(40px, 4.8vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.does__body { align-self: stretch; display: flex; flex-direction: column; gap: 20px; }
.does__body p {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.4;
}

.role-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

/* Each row is an overflow:hidden mask sized to its card. The card
   inside slides down from translateY(-100%) (fully above the mask,
   clipped) to translateY(0) (filling the mask). Border-radius lives
   on the wrapper so the clipped edges stay rounded. */
.role-row {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
}

.role {
  display: flex;
  align-items: flex-start;
  padding: 20px;
  border-radius: var(--r-lg);
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: 30px;
  font-weight: 400;
}
.role--pink   { background: var(--c-pink); }
.role--mint   { background: var(--c-mint); }
.role--yellow { background: var(--c-yellow); }

/* Slide-down reveal — every card starts at translateY(-100%) so it's
   tucked entirely above its row wrapper, fully masked. When the list
   gets .in-view from IntersectionObserver, each card slides down to
   translateY(0), staggered 160ms apart via --i. The wrapper masks
   the upper portion throughout, so every card masks in from the top
   of its own row — the same true mask-in behavior the first card had. */
.js .role-list[data-role-grid] .role-row .role {
  transform: translateY(-100%);
  will-change: transform;
}
.js .role-list[data-role-grid].in-view .role-row .role {
  animation: role-slide-down 1.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--i, 0) * 240ms);
}

@keyframes role-slide-down {
  to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .js .role-list[data-role-grid] .role-row .role,
  .js .role-list[data-role-grid].in-view .role-row .role {
    animation: none;
    transform: none;
  }
}

@media (max-width: 1024px) {
  .does { flex-direction: column; padding: var(--s-10) 40px; gap: var(--s-7); }
}
@media (max-width: 640px) {
  .does { padding: var(--s-8) 20px; }
}


/* ─────────────  10. Why Notably  ──────────────────────────
   Pink full-bleed.  Top: 760×760 image with a yellow card floating
   over its top-right area (absolute top 200, left 560, width 575).
   Bottom: a 900px-wide block of two serif paragraph columns,
   margin-left: auto so it right-aligns within the 1280 content area.
   Vertical padding 140 top/bottom; 64px gap between cover and body. */

.why {
  display: flex;
  flex-direction: column;
  padding: 140px var(--gutter);
  gap: 64px;
  background: var(--c-pink-deep);
}
.why__cover {
  position: relative;
  display: flex;
}
.why__image {
  width: 760px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-lg);
  background-image: url("assets/why-image.jpg");
  background-size: cover;
  background-position: 50%;
}
.why__card {
  position: absolute;
  top: 200px;
  left: 560px;
  width: 575px;
  max-width: calc(100% - 80px);
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 48px 56px;
  background: var(--c-yellow);
  border: 1px solid var(--c-off-black);
  border-radius: var(--r-lg);
}
.why__headline {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(48px, 6vw, 76px);
  line-height: 0.96;
  letter-spacing: -0.02em;
}
.why__tagline {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.2;
}
.why__body {
  display: flex;
  gap: 40px;
  margin-left: auto;
  width: 900px;
  max-width: 100%;
}
.why__body p {
  flex: 1;
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.2;
}

@media (max-width: 1024px) {
  .why { padding: var(--s-10) 40px; gap: var(--s-7); }
  .why__cover { flex-direction: column; gap: var(--s-5); }
  .why__image { width: 100%; aspect-ratio: 4 / 3; }
  .why__card {
    position: static;
    width: 100%;
    max-width: 100%;
    padding: var(--s-6);
  }
  .why__body { flex-direction: column; gap: var(--s-5); margin-left: 0; width: 100%; }
}
@media (max-width: 640px) {
  .why { padding: var(--s-8) 20px; }
}


/* ─────────────  11. What You Get / Value  ─────────────────
   Two columns: left has the headline at the top.  Right is 4
   colored cards stacked vertically. Both columns are h-fit
   (no cross-axis stretch) so the headline sits at the top of
   the section, aligned with the top of the first card. */

.value {
  display: flex;
  align-items: flex-start;
  padding: var(--s-10) var(--gutter);
  gap: var(--s-8);
}
.value__head {
  flex: 1;
}
.value__headline {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(40px, 4.8vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.value-list { flex: 1; display: flex; flex-direction: column; gap: 20px; }
.value-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6) 28px;
  border-radius: var(--r-lg);
}
.value-card--pink   { background: var(--c-pink); }
.value-card--mint   { background: var(--c-mint); }
.value-card--yellow { background: var(--c-yellow); }
.value-card__title { font-family: var(--font-sans); font-size: 24px; line-height: 22px; font-weight: 400; }
.value-card__body  { font-family: var(--font-serif); font-size: 14px; line-height: 1.4; }

@media (max-width: 1024px) {
  .value { flex-direction: column; padding: var(--s-10) 40px; gap: var(--s-7); }
}
@media (max-width: 640px) {
  .value { padding: var(--s-8) 20px; }
}


/* ─────────────  12. Process  ──────────────────────────────
   Mint background.  Head row: H1 left, intro right (baseline-end
   aligned).  List rows: serif index (120) / sans title (flex 1) /
   serif body (500 fixed).  Top + bottom rule on the full list. */

.process {
  display: flex;
  flex-direction: column;
  padding: var(--s-10) var(--gutter);
  gap: var(--s-8);
  background: var(--c-mint);
}
.process__head {
  display: flex;
  align-items: flex-end;
  gap: 80px;
}
.process__headline {
  flex: 1;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(40px, 4.8vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.process__intro {
  flex: 1;
  padding-bottom: 8px;
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.4;
}

.process__list { display: flex; flex-direction: column; }
.process__step {
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 32px 0;
  border-top: 1px solid var(--c-off-black);
}
.process__step:last-child { border-bottom: 1px solid var(--c-off-black); }
.process__num {
  flex-shrink: 0;
  width: 120px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 30px;
  letter-spacing: -0.02em;
}
.process__title {
  flex: 1;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 36px;
  line-height: 46px;
  letter-spacing: -0.005em;
}
.process__body {
  flex-shrink: 0;
  width: 500px;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.4;
}

@media (max-width: 1280px) {
  .process__body { width: 380px; }
}
@media (max-width: 1024px) {
  .process { padding: var(--s-10) 40px; gap: var(--s-7); }
  .process__head { flex-direction: column; align-items: flex-start; gap: var(--s-5); }
  .process__step { flex-direction: column; align-items: flex-start; gap: var(--s-4); padding: var(--s-5) 0; }
  .process__num, .process__title, .process__body { width: auto; flex: none; }
  .process__title { font-size: 28px; line-height: 1.15; }
}
@media (max-width: 640px) {
  .process { padding: var(--s-8) 20px; }
}


/* ─────────────  13. Callout  ───────────────────────────────
   200/80 padding, centered.  Four stacked lines; last line is
   a flex row with the pink "Right" pill in the middle. */

.callout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s-12) var(--gutter);
  gap: var(--s-5);
}
.callout__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1280px;
  gap: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(44px, 7.5vw, 96px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-align: center;
}
.callout__title > span { display: block; }
.callout__row {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

@media (max-width: 1024px) {
  .callout { padding: var(--s-10) 40px; }
}
@media (max-width: 640px) {
  .callout { padding: var(--s-9) 20px; }
}


/* ─────────────  14. Services  ─────────────────────────────
   Off-white background.  Headline at top.  5 list rows mirror the
   Process layout: serif index (120) / sans title (flex 1) / serif
   body (flex 1.4).  Mint note card pinned full-width at the bottom. */

.services {
  display: flex;
  flex-direction: column;
  padding: var(--s-10) var(--gutter);
  gap: var(--s-8);
}
.services__headline {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(40px, 4.8vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.services__list { display: flex; flex-direction: column; }
.services__item {
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 32px 0;
  border-top: 1px solid var(--c-off-black);
}
.services__item:last-of-type { border-bottom: 1px solid var(--c-off-black); }
.services__num {
  flex-shrink: 0;
  width: 120px;
  padding-top: 6px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 30px;
}
.services__title {
  flex: 1;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 36px;
  line-height: 46px;
  letter-spacing: -0.01em;
}
.services__body {
  flex: 1.4;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.4;
}

.services__note {
  align-self: stretch;
  padding: 20px 24px;
  border-radius: var(--r-lg);
  background: var(--c-mint-soft);
  font-family: var(--font-serif);
  font-size: 13px;
  line-height: 1.6;
}

@media (max-width: 1024px) {
  .services { padding: var(--s-10) 40px; gap: var(--s-7); }
  .services__item { flex-direction: column; align-items: flex-start; gap: var(--s-4); padding: var(--s-5) 0; }
  .services__num, .services__title, .services__body { width: auto; flex: none; padding-top: 0; }
  .services__title { font-size: 28px; line-height: 1.15; }
}
@media (max-width: 640px) {
  .services { padding: var(--s-8) 20px; }
}


/* ─────────────  15. Audience / Who It's For  ──────────────
   Yellow background full-bleed.  Top: headline left, caption right.
   Below: a horizontal scrolling strip of 6 white outlined cards. */

.audience {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  padding: var(--s-10) 0;
  background: var(--c-yellow);
  overflow: hidden;
}
.audience__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-7);
  padding: 0 var(--gutter);
}
.audience__headline {
  flex: 1;
  max-width: 780px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 0.96;
  letter-spacing: -0.02em;
}
.audience__caption {
  flex-shrink: 0;
  width: 407px;
  max-width: 100%;
  padding-bottom: var(--s-3);
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.2;
}
/* The viewport is the visible window: full-width, overflow clipped.
   The strip inside is a continuous flex row of two identical sets of
   six cards. We animate the strip left by exactly one set's width
   (6 cards + 6 inter-card gaps) so when the loop restarts, the start
   of set 2 sits where set 1 was — a seamless infinite ticker. */
.audience__viewport {
  width: 100%;
  overflow: hidden;
  /* Promote to its own layer so the animated child doesn't repaint
     anything outside its bounds. */
  contain: paint;
}
.audience__strip {
  --card-w: 340px;
  --card-g: 16px;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--card-g);
  width: max-content;
  padding-left: var(--card-g);
  animation: audience-ticker 33s linear infinite;
  will-change: transform;
}

.audience__card {
  flex: 0 0 auto;
  width: var(--card-w);
  min-height: 134px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-6);
  background: var(--c-off-white);
  border: 1px solid var(--c-off-black);
  border-radius: var(--r-pill);
  text-align: center;
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.24;
  letter-spacing: -0.005em;
}

@keyframes audience-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-6 * (var(--card-w) + var(--card-g)))); }
}

@media (prefers-reduced-motion: reduce) {
  .audience__strip { animation: none; }
}

@media (max-width: 1024px) {
  .audience { padding: var(--s-10) 0; }
  .audience__head { flex-direction: column; align-items: flex-start; padding: 0 40px; }
  .audience__caption { width: 100%; padding-bottom: 0; }
}
@media (max-width: 640px) {
  .audience { padding: var(--s-8) 0; }
  .audience__head { padding: 0 20px; }
  .audience__strip { --card-w: 260px; }
  .audience__card { font-size: 19px; }
}


/* ─────────────  16. POV  ──────────────────────────────────
   Off-white background.  A single centered display headline with
   "Quality" highlighted in mint, followed by a short serif caption. */

.pov {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-7);
  padding: var(--s-12) var(--gutter) var(--s-10);
  background: var(--c-off-white);
  text-align: center;
}
.pov__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  max-width: 1280px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(56px, 8vw, 96px);
  line-height: 1;
  letter-spacing: -0.025em;
}
.pov__title .hl {
  padding: 0 var(--s-5);
  border-radius: var(--r-pill);
  line-height: 1;
}
.pov__body {
  max-width: 920px;
  font-family: var(--font-serif);
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.2;
}

@media (max-width: 1024px) {
  .pov { padding: var(--s-10) 40px; gap: var(--s-6); }
}
@media (max-width: 640px) {
  .pov { padding: var(--s-8) 20px; gap: var(--s-5); }
  .pov__title { gap: var(--s-2); }
}


/* ─────────────  17. RIM Affiliation  ──────────────────────
   Off-white.  Left headline column, right body column with 2
   paragraphs and an RIM card. */

.rim {
  display: flex;
  padding: var(--s-10) var(--gutter);
  gap: 80px;
  align-items: flex-start;
}
.rim__left {
  flex: 1;
  min-height: 168px;
}
.rim__headline {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(40px, 4.8vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.rim__right {
  flex: 1.1;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding-top: var(--s-6);
}
.rim__right p {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.4;
}

.rim__card {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-top: 8px;
  padding: 20px 24px;
  border: 1px solid var(--c-off-black);
  border-radius: var(--r-lg);
  background: var(--c-off-white);
  transition: background-color .15s ease;
}
.rim__card:hover { background: rgba(39, 40, 38, 0.04); }

.rim__mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--c-off-black);
  color: var(--c-off-white);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
}
.rim__card-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rim__card-text strong {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
}
.rim__card-text span {
  font-family: var(--font-serif);
  font-size: 12px;
  line-height: 16px;
  opacity: 0.6;
}
.rim__arrow {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
}

@media (max-width: 1024px) {
  .rim { flex-direction: column; padding: var(--s-10) 40px; gap: var(--s-5); }
  .rim__right { padding-top: 0; }
}
@media (max-width: 640px) {
  .rim { padding: var(--s-8) 20px; }
}


/* ─────────────  18. Meet Julie  ───────────────────────────
   Photo on left (rounded 25px corners, top-anchored), body on
   right. */

.julie {
  display: flex;
  padding: var(--s-10) var(--gutter);
  gap: var(--s-8);
  background: var(--c-off-white);
  align-items: stretch;
}
.julie__photo {
  flex: 0.9;
  min-height: 520px;
  background-color: var(--c-off-black);
  background-image: url("assets/julie.jpg");
  background-size: cover;
  background-position: 50% 0%;
  border-radius: var(--r-photo);
}
.julie__body {
  flex: 1.2;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: 8px 0;
}
.julie__headline {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(40px, 4.8vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.julie__body p {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.4;
}
.julie__ctas { display: flex; gap: var(--s-3); padding-top: 8px; }

@media (max-width: 1024px) {
  .julie { flex-direction: column; padding: var(--s-10) 40px; }
  .julie__photo { min-height: 420px; }
}
@media (max-width: 640px) {
  .julie { padding: var(--s-8) 20px; }
  .julie__photo { min-height: 360px; }
}


/* ─────────────  19. Newsletter  ───────────────────────────
   Mint background.  Left: headline + lead + form.
   Right: 4-item ordered list with thin rules between items. */

.news {
  display: flex;
  align-items: center;
  padding: var(--s-9) var(--gutter);
  gap: var(--s-8);
  background: var(--c-mint);
}
.news__left {
  flex: 0 0 528px;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.news__headline {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(40px, 4.8vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.news__lead {
  max-width: 520px;
  padding-top: 8px;
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.2;
}
.news__form {
  display: flex;
  gap: 8px;
  max-width: 520px;
  padding-top: 16px;
}
.news__form input[type=email] {
  flex: 1;
  padding: 14px 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--c-off-black);
  background: var(--c-off-white);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 18px;
  color: var(--c-off-black);
}
.news__form input[type=email]::placeholder { color: var(--c-off-black); opacity: 0.5; }
.news__form input[type=email]:focus { outline: 2px solid var(--c-off-black); outline-offset: 2px; }
.news__status { font-size: 13px; min-height: 1.2em; opacity: 0.75; }

/* Inbox mockup — Mac-style window with chrome bar, toolbar, 4 rows */
.inbox {
  flex: 0 0 688px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-off-black);
  border-radius: 14px;
  background: var(--c-off-white);
  overflow: hidden;
  box-shadow: 12px 14px 0 0 rgba(39, 40, 38, 0.08);
}
.inbox__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 18px;
  background: #F1EFE6;
  border-bottom: 1px solid var(--c-off-black);
}
.inbox__dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  display: inline-block;
}
.inbox__dot--red    { background: #E96B6B; }
.inbox__dot--yellow { background: #F2C94C; }
.inbox__dot--green  { background: #6BCB77; }
.inbox__toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(39, 40, 38, 0.15);
}
.inbox__label {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.inbox__badge {
  padding: 2px 8px;
  background: var(--c-pink-deep);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 16px;
}
.inbox__sort {
  margin-left: auto;
  font-family: var(--font-serif);
  font-size: 12px;
  line-height: 16px;
  color: rgba(39, 40, 38, 0.5);
}
.inbox__list { display: flex; flex-direction: column; }
.inbox__row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(39, 40, 38, 0.12);
}
.inbox__row:last-child { border-bottom: none; }
.inbox__unread {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #F3C94D;
}
.inbox__avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  overflow: hidden;
}
.inbox__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.inbox__sender {
  flex: 0 0 96px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 18px;
}
.inbox__subject {
  flex: 1 1 auto;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 22px;
}
.inbox__time {
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  color: rgba(39, 40, 38, 0.55);
}

@media (max-width: 1024px) {
  .news { flex-direction: column; align-items: stretch; padding: var(--s-9) 40px; gap: var(--s-7); }
  .news__left, .inbox { flex: 1 1 auto; }
  .inbox { max-width: 100%; }
}
@media (max-width: 640px) {
  .news { padding: var(--s-8) 20px; }
  .news__form { flex-direction: column; }
  .inbox__sender { flex-basis: auto; display: none; }
  .inbox__row { gap: 12px; padding: 14px 16px; }
  .inbox__avatar { width: 32px; height: 32px; }
  .inbox__subject { font-size: 14px; line-height: 20px; }
}


/* ─────────────  20. Final CTA  ────────────────────────────
   Centered 160/80 padding.  Headline is 2 lines; last line has
   "Hire [Count?]" with yellow pill. */

.final {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s-11) var(--gutter);
  gap: var(--s-6);
  background: var(--c-off-white);
}
.final__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1280px;
  gap: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(44px, 7.5vw, 96px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-align: center;
}
.final__line { display: block; }
.final__line--row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}
.final__body {
  max-width: 680px;
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.4;
  text-align: center;
}
.final__ctas {
  display: flex;
  gap: var(--s-3);
  padding-top: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

@media (max-width: 1024px) {
  .final { padding: var(--s-10) 40px; }
}
@media (max-width: 640px) {
  .final { padding: var(--s-9) 20px; }
}


/* ─────────────  21. Footer  ───────────────────────────────
   Off-white-ish (#FBFAF6).  Top border 1px solid black.
   Padding 40/80.  Single row: tagline + nav block on left,
   pink horizontal lines image on right. */

.footer {
  display: flex;
  flex-direction: column;
  padding: 40px var(--gutter);
  gap: var(--s-8);
  background: var(--c-footer-bg);
  border-top: 1px solid #000;
}
.footer__row {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: var(--s-7);
}
.footer__left {
  width: 480px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-self: stretch;
  justify-content: space-between;
}
.footer__tagline {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.02;
  opacity: 0.9;
  max-width: 480px;
}
.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: fit-content;
}
.footer__nav {
  display: flex;
  gap: 20px;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 18px;
  flex-wrap: wrap;
}
.footer__nav a:hover { opacity: 0.65; }

.footer__where {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 18px;
  flex-wrap: wrap;
}
.footer__where a:hover { opacity: 0.65; }

.footer__right {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
}
.footer__lines {
  width: 187px;
  height: 234px;
  object-fit: cover;
}

@media (max-width: 1024px) {
  .footer { padding: 40px 40px; }
  .footer__row { flex-direction: column; align-items: flex-start; gap: var(--s-6); }
  .footer__left { width: 100%; }
  .footer__right { align-items: flex-start; flex: none; }
}
@media (max-width: 640px) {
  .footer { padding: var(--s-7) 20px; }
}


/* ─────────────  22. Review layer  ─────────────────────────── */

.review-mode-choice {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(39, 40, 38, 0.72);
  color: var(--c-off-white);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.review-mode-card {
  display: flex;
  width: min(100%, 520px);
  flex-direction: column;
  gap: 20px;
  border: 1px solid rgba(251, 250, 245, 0.2);
  background: rgba(39, 40, 38, 0.96);
  padding: 36px;
  box-shadow: 0 24px 80px rgba(39, 40, 38, 0.32);
}

.review-mode-card span,
.review-panel-header span,
.review-panel-meta,
.review-popover-meta {
  color: rgba(39, 40, 38, 0.52);
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.review-mode-card span {
  color: rgba(251, 250, 245, 0.56);
}

.review-mode-card h2 {
  margin: 0;
  color: var(--c-off-white);
  font-family: var(--font-sans);
  font-size: 36px;
  font-weight: 400;
  line-height: 1.04;
}

.review-mode-card p {
  margin: 0;
  color: rgba(251, 250, 245, 0.72);
  font-size: 15px;
  line-height: 1.6;
}

.review-mode-actions,
.review-popover-actions,
.review-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.review-mode-actions button,
.review-toolbar button,
.review-popover button,
.review-panel button {
  min-height: 38px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-family: var(--font-sans);
  cursor: pointer;
}

.review-mode-actions button {
  min-height: 46px;
  padding: 0 18px;
  color: var(--c-off-white);
}

.review-mode-actions button:first-child {
  background: var(--c-off-white);
  color: var(--c-off-black);
}

.review-toolbar {
  position: fixed;
  bottom: 18px;
  left: 50%;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(251, 250, 245, 0.16);
  background: rgba(39, 40, 38, 0.9);
  padding: 7px;
  color: var(--c-off-white);
  box-shadow: 0 16px 48px rgba(39, 40, 38, 0.24);
  transform: translateX(-50%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.review-toolbar button {
  height: 34px;
  min-height: 34px;
  border: 0;
  padding: 0 12px;
  color: rgba(251, 250, 245, 0.7);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.review-toolbar button.active,
.review-toolbar button:hover,
.review-toolbar button:focus-visible {
  background: var(--c-off-white);
  color: var(--c-off-black);
}

html[data-review-mode="comment"] [data-review-id] {
  cursor: crosshair;
}

html[data-review-mode="comment"] [data-review-id]:hover {
  outline: 2px solid rgba(217, 166, 219, 0.95);
  outline-offset: 5px;
}

[data-review-id].has-review-comment {
  box-shadow: inset 0 0 0 2px rgba(246, 242, 182, 0.9);
}

[data-review-id].review-jump {
  outline: 3px solid rgba(217, 166, 219, 0.98) !important;
  outline-offset: 7px !important;
}

.review-popover {
  position: fixed;
  z-index: 92;
  display: flex;
  width: min(360px, calc(100vw - 32px));
  flex-direction: column;
  gap: 12px;
  border: 1px solid rgba(39, 40, 38, 0.14);
  background: var(--c-off-white);
  color: var(--c-off-black);
  padding: 16px;
  box-shadow: 0 18px 60px rgba(39, 40, 38, 0.26);
}

.review-popover input,
.review-popover textarea {
  width: 100%;
  border: 1px solid rgba(39, 40, 38, 0.18);
  background: #fff;
  color: var(--c-off-black);
  font: 14px/1.5 var(--font-sans);
}

.review-popover input {
  min-height: 40px;
  padding: 0 10px;
}

.review-popover textarea {
  min-height: 118px;
  resize: vertical;
  padding: 10px;
}

.review-popover-actions,
.review-panel-actions {
  justify-content: flex-end;
}

.review-popover button,
.review-panel button {
  min-height: 34px;
  padding: 0 12px;
  color: var(--c-off-black);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

.review-popover button[type="submit"] {
  background: var(--c-off-black);
  color: var(--c-off-white);
}

.review-panel {
  position: fixed;
  top: 18px;
  right: 18px;
  bottom: 72px;
  z-index: 91;
  display: flex;
  width: min(420px, calc(100vw - 36px));
  flex-direction: column;
  border: 1px solid rgba(39, 40, 38, 0.14);
  background: var(--c-off-white);
  color: var(--c-off-black);
  box-shadow: 0 18px 70px rgba(39, 40, 38, 0.26);
}

.review-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(39, 40, 38, 0.14);
  padding: 18px;
}

.review-panel-header h2 {
  margin: 4px 0 0;
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}

.review-panel-header small,
.review-panel-item small {
  display: block;
  margin-top: 6px;
  color: rgba(39, 40, 38, 0.54);
  font-family: var(--font-sans);
  font-size: 12px;
}

.review-sync-warning {
  margin: 0;
  border-bottom: 1px solid rgba(39, 40, 38, 0.14);
  padding: 12px 18px;
  color: rgba(39, 40, 38, 0.68);
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.45;
}

.review-panel-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: auto;
  padding: 14px;
}

.review-panel-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid rgba(39, 40, 38, 0.14);
  background: #fff;
  padding: 14px;
}

.review-panel-item.is-resolved {
  opacity: 0.55;
}

.review-panel-author {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
}

.review-panel-item p {
  margin: 0;
  color: var(--c-off-black);
  font-size: 13px;
  line-height: 1.55;
}

.review-panel-quote {
  color: rgba(39, 40, 38, 0.58) !important;
}

.review-panel-empty {
  margin: 0;
  color: rgba(39, 40, 38, 0.64);
  font-size: 13px;
  line-height: 1.5;
}

.review-toast {
  position: fixed;
  right: 18px;
  bottom: 72px;
  z-index: 96;
  max-width: min(320px, calc(100vw - 36px));
  border: 1px solid rgba(251, 250, 245, 0.16);
  background: var(--c-off-black);
  color: var(--c-off-white);
  padding: 12px 14px;
  box-shadow: 0 14px 44px rgba(39, 40, 38, 0.24);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}

@media (max-width: 640px) {
  .review-mode-card {
    padding: 26px;
  }

  .review-mode-card h2 {
    font-size: 28px;
  }

  .review-toolbar {
    right: 10px;
    bottom: 10px;
    left: 10px;
    flex-wrap: wrap;
    justify-content: center;
    transform: none;
  }

  .review-toolbar button {
    flex: 1 1 auto;
  }

  .review-panel {
    inset: 10px 10px 92px;
    width: auto;
  }

  .review-popover {
    right: 12px !important;
    left: 12px !important;
    width: auto;
  }

  .review-toast {
    right: 10px;
    bottom: 104px;
    left: 10px;
    max-width: none;
  }
}


/* ─────────────  23. Reduced motion  ───────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}