/* ============================================================
   RESTORE CONSULTING — BRAND OVERRIDES
   Loads after /shared/css/base.css and /shared/css/components.css.

   Restore Consulting is warm-editorial and light-canvas. The
   ground is not a flat Off-White (that's Restore Marketing's
   #F9F8F3, deliberately distinct here); it's a small palette of
   closely related warm neutrals meant to color-block from
   section to section:

     --rc-warm-1  #F4EEE0  — warm ivory sand, primary ground
                            (hero, header, default body fill)
     --rc-warm-2  #E9DDC5  — a step warmer/deeper, alternating
                            section ground (Stage 2 onward)
     --rc-warm-3  #FBF7EE  — lightest warm tint, close to but
                            distinct from Marketing's #F9F8F3;
                            reserved for the occasional third
                            beat when two grounds aren't enough

   Deep Navy (#000099) remains available as an occasional darker
   punctuation ground for later sections, not used in this stage.

   Text on all warm grounds: warm dark charcoal (#1A1A1A, not
   pure black). Contrast against all three warm tones ranges
   12.9:1 → 16.3:1 — comfortably above WCAG AAA (7:1); the
   charcoal did not need darkening.

   Electric Blue (#054FF0) is this site's primary interactive
   color: CTA fills, link hovers, secondary-link underlines, and
   the shared cursor-tint hover effect all resolve to Electric.
   Teal (#00FFFF) is effectively unused on Consulting — it reads
   at ~1.08:1 against warm-1 (illegible) and had to be swapped
   out. The Tailwind `teal` token stays declared for parity with
   the sister sites' theme block, but should not be applied to
   anything visible on this site.

   Contrast checks for Electric on the warm palette (WCAG AA
   minimum 4.5:1):
     #054FF0 on #F4EEE0 (warm-1) — 5.37:1  ✓ AA
     #054FF0 on #E9DDC5 (warm-2) — 4.62:1  ✓ AA (just above)
     #054FF0 on #FBF7EE (warm-3) — 5.81:1  ✓ AA
   No shade adjustment was needed. The darker Electric variants
   #003fbf (7.37:1 / AAA on warm-1) and #002d99 (9.89:1 / AAA)
   are what the CTA fill deepens to on :hover / :active, so
   emphatic interactive states clear AAA automatically.

   This site must stay free of tech / circuitry / terminal visual
   language. No hex grids, no glitch effects, no monospace status
   lines, no ASCII-style icons. Restore AI covers that territory;
   Consulting reads as an editorial about advisory work.
   ============================================================ */

:root {
  --rc-warm-1: #F4EEE0;
  --rc-warm-2: #E9DDC5;
  --rc-warm-3: #FBF7EE;
  --rc-charcoal: #1A1A1A;
}

/* Shared base.css defaults html + body to the dark Near-Black
   parent-brand ground. Override for this light-canvas site so
   short pages don't show dark bleed beneath the body/main. */
html, body { background: var(--rc-warm-1); }

/* Shared /shared/js/cursor.js injects a `.cursor-tinted` rule at
   runtime that colors hovered characters `#00FFFF !important`.
   That Teal is ~1.08:1 against warm-1 — invisible. Override with
   Electric Blue (5.37:1 on warm-1, AA). Same selector + !important
   + later cascade ordering wins.

   The override lives here (not in the shared file) because
   `cursor.js` is loaded by the sister sites too and Marketing's
   dark ground reads Teal at high contrast — the shared file's
   default is correct for the other two brands. */
.cursor-tinted { color: #054FF0 !important; }

/* ============================================================
   PERSISTENT SITE HEADER
   Light frosted band above every section. Warm-1 at 82% opacity
   + 12px backdrop blur keeps content behind faintly visible
   while the header lockup and CTA stay legible on any warm
   section beneath. Fallback for browsers without backdrop-filter:
   opaque warm-1 at 96%.
   ============================================================ */

#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  background: rgba(244, 238, 224, 0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(26, 26, 26, 0.08);
}
@supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  #site-header {
    background: rgba(244, 238, 224, 0.96);
    border-bottom-color: rgba(26, 26, 26, 0.10);
  }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px clamp(16px, 3vw, 32px);
  max-width: 1400px;
  margin: 0 auto;
}

/* Brand lockup: R mark + "RESTORE CONSULTING" text.
   The R mark asset ships as white-on-transparent (r-icon-white.png,
   the shared parent-brand mark). On this light canvas it needs to
   invert to the warm dark charcoal, applied via CSS filter so the
   asset itself stays untouched across all three sister sites. */
#brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #1A1A1A;
  text-decoration: none;
}
#brand-lockup .brand-lockup__mark {
  height: 22px;
  width: auto;
  display: block;
  /* Invert white PNG → warm dark charcoal (#1A1A1A). */
  filter: brightness(0) saturate(100%) invert(6%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(96%) contrast(90%);
}
#brand-lockup .brand-lockup__text {
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.22em;
  line-height: 1;
  white-space: nowrap;
  color: #1A1A1A;
}
@media (min-width: 640px) {
  #brand-lockup .brand-lockup__mark { height: 26px; }
  #brand-lockup .brand-lockup__text { font-size: 11px; }
}
@media (max-width: 479px) {
  #brand-lockup .brand-lockup__text { display: none; }
  #brand-lockup .brand-lockup__mark { height: 24px; }
}

/* Strategy Session CTA — Electric Blue background, Off-White text.
   This treatment is deliberately consistent across all three sister
   sites (Marketing, AI, Consulting) — do not restyle for this brand. */
#floating-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #054FF0;
  color: #F9F8F3;
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 500;
  border-radius: 9999px;
  padding: 8px 14px;
  font-size: 12px;
  letter-spacing: 0.005em;
  box-shadow: 0 6px 20px rgba(5, 79, 240, 0.25), 0 2px 4px rgba(0, 0, 0, 0.10);
  transition: background 200ms ease, transform 200ms ease;
  white-space: nowrap;
  text-decoration: none;
}
#floating-cta:hover { background: #003fbf; transform: translateY(-1px); }
#floating-cta:active { background: #002d99; }
@media (min-width: 640px) {
  #floating-cta { padding: 11px 22px; font-size: 14px; }
}
@media (max-width: 479px) {
  #floating-cta { padding: 7px 12px; font-size: 11px; }
}

/* Header-height reference token for future section padding. */
:root { --site-header-height: 56px; }
@media (min-width: 640px) { :root { --site-header-height: 64px; } }

/* ============================================================
   HERO LAYOUT — two-column at ≥1024, stacked below
   Text column on the left with the eyebrow / headline / subhead /
   CTAs stack; video "sketch card" on the right. Below 1024 the
   video falls beneath the CTAs so it doesn't compete with the
   headline for a first read on narrow viewports.
   ============================================================ */
.hero-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
  width: 100%;
}
@media (min-width: 1024px) {
  .hero-layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
  }
}
.hero-text { max-width: 62rem; min-width: 0; }

/* ============================================================
   HERO VIDEO — direct on hero ground, no card treatment
   The hero ground is --rc-warm-3 (#FBF7EE) and the video's own
   background is near-white; the two are close enough that the
   video reads as part of the page rather than a framed panel.
   No card back, no border, no border-radius, no shadow, no
   rotation. A soft mask-image feather at each edge dissolves
   the small tonal difference so the video's boundary doesn't
   draw a hard rectangle on the ground.
   ============================================================ */
.hero-video-card {
  margin: 0 auto;
  width: min(100%, 480px);
  max-width: 100%;
  align-self: center;
  justify-self: center;
  /* Feather the four edges into the hero ground. The video ships a
     near-white background (~#FFF) sitting on warm-3 (#FBF7EE) — the
     ~15-unit blue-channel gap is enough to draw a hard rectangle
     without a wide fade. A ~14% wide gradient band on each axis
     dissolves the boundary entirely; the two central figures stay
     fully opaque because their content sits well inside the fade.
     Radial vignette on top rounds the corner "hot spots" that a
     rectilinear fade alone can't kill. */
  -webkit-mask-image:
    radial-gradient(ellipse 82% 82% at center, #000 55%, transparent 100%),
    linear-gradient(to right,  transparent 0, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(ellipse 82% 82% at center, #000 55%, transparent 100%),
    linear-gradient(to right,  transparent 0, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-composite: intersect;
}
@media (min-width: 1024px) {
  .hero-video-card {
    justify-self: end;
    /* Slightly larger than the mobile stack — the video is a
       peer to the text column, not a supporting thumbnail. */
    width: min(100%, 520px);
  }
}
.hero-video-card__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  /* Match the hero ground so any brief flash between poster load
     and video first-frame paints the same warm-3 tone. */
  background: var(--rc-warm-3);
  /* If the poster/video happens to be narrower than 16:9 (some
     export paths trim edges), cover fills the frame cleanly. */
  object-fit: cover;
}

/* ============================================================
   HERO ENTRANCE PRE-PAINT GATE
   Piggybacks on the shared animations-pending class so the four
   hero blocks don't flash their final state before hero.js applies
   the quiet fade-and-rise. Kept intentionally minimal: opacity +
   a 12px lift — no per-word split, no cascade, no scale.
   ============================================================ */
html.animations-pending #hero [data-hero-reveal] {
  opacity: 0;
  transform: translateY(12px);
}

/* ============================================================
   NOTE-DECK ENTRANCE PRE-PAINT GATE
   Root-cause fix for a flash-of-final-content bug: without this
   gate, the five #problem note-cards render at their HTML-inline
   fanned resting positions (--tx/--ty/--rot in style="…") on
   first paint, and are only hidden AFTER sections.js runs and
   the ScrollTrigger fires, so a visitor scrolling into the section
   sees the cards already at rest, then they disappear, then the
   deal-out animation plays. This CSS rule hides them from FIRST
   PAINT (opacity + visibility, matching autoAlpha behavior so
   GSAP can seamlessly take over via inline style), so the very
   first frame a visitor could ever see already has cards hidden.

   Uses its own `deck-pending` class rather than piggybacking on
   `animations-pending` because scroll-reveals.js clears the
   shared gate as soon as it registers its Pattern A–F reveals —
   which happens BEFORE sections.js runs (script load order in
   index.html). A shared gate would drop mid-hand-off and briefly
   re-flash the cards. `deck-pending` is only cleared by
   sections.js (after it hands off hiding to GSAP inline styles),
   or by the 4 s safety timeout in the head script if JS never
   initializes.
   ============================================================ */
html.deck-pending [data-note-card] {
  opacity: 0;
  visibility: hidden;
}

/* ============================================================
   BODY-COPY LIGATURE RULE EXTENSION
   Restore Consulting copy classes; base.css already covers p/body.
   ============================================================ */
.consulting-body,
.consulting-body p,
.problem-closing,
.flip-card__desc {
  font-variant-ligatures: none;
  -webkit-font-feature-settings: "liga" 0, "dlig" 0;
  font-feature-settings: "liga" 0, "dlig" 0;
}

/* ============================================================
   SHARED SECTION HEADLINE
   Editorial second-level display used by every below-hero section
   on this site. TT Norms Bold, warm charcoal, tight letterspacing.
   Kept as a class (not inline styles) so future stages get
   consistent typography without repeating clamps.
   ============================================================ */
.rc-section-headline {
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 700;
  color: var(--rc-charcoal);
  font-size: clamp(30px, 4.5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.028em;
  margin: 0;
  max-width: 22ch;
}

/* ============================================================
   SECTION — THE PROBLEM
   Warm-2 ground. A small deck of note-card-style elements that
   sit overlapping in a slight rotational cluster at rest, then
   fan out into a spread arrangement when the section scrolls
   into view. Sections.js drives the spread; this stylesheet
   owns the resting geometry and the card surface treatment.

   Cards use --rc-warm-3 (lightest warm) on warm-2 (deeper warm),
   with a soft warm-toned drop shadow so they read as paper on a
   desk — not as digital chips. Rotations and horizontal offsets
   per card are keyed by an inline `--i` custom prop set on each
   `.note-card` (values 0…4 for cards 1…5).
   ============================================================ */
#problem { overflow: hidden; }

.problem-intro { max-width: 40rem; }

/* Shared card surface — same paper-on-desk treatment for both the
   mobile vertical stagger and the tablet+ horizontal fan. Width
   and height are set per-layout in the media queries below so the
   two variants can carry different card proportions. */
.note-card {
  padding: clamp(14px, 2vw, 20px) clamp(18px, 2.4vw, 24px);
  background: var(--rc-warm-3);
  border: 1px solid rgba(78, 60, 30, 0.10);
  border-radius: 6px;
  /* Warm sepia shadow — feels like paper on wood, not a UI chip.
     Two layers: broad ambient, tight contact. */
  box-shadow:
    0 12px 28px -8px rgba(78, 60, 30, 0.22),
    0 4px 8px -2px rgba(78, 60, 30, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(0.88rem, 1.35vw, 1.02rem);
  line-height: 1.35;
  color: var(--rc-charcoal);
  letter-spacing: -0.008em;
  transform-origin: 50% 80%;
  will-change: transform;
}

/* --------- MOBILE + TABLET (<1280px): vertical stagger ---------
   Below xl (1280 px): the horizontal fan can't fit five 260-px
   cards without covering copy text on adjacent cards. Fall back
   to a vertical stack with a small per-card horizontal offset and
   a slight rotation — cards laid on a table top-to-bottom instead
   of side-to-side. Same paper-on-desk register. No JS animation
   on this layout; cards render in their final positions on load
   and every card's copy is fully visible with clear gaps between
   cards. Cards grow from 272 px on 320-viewport mobile up to
   400 px on tablet, using more of the wider tablet screens
   without ever crowding into an adjacent card. */
@media (max-width: 1279.98px) {
  .note-deck {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(14px, 1.6vw, 20px);
    width: 100%;
    max-width: min(460px, 92vw);
    margin: clamp(2.5rem, 7vw, 4rem) auto 0;
  }
  .note-card {
    position: relative;
    width: clamp(272px, 50vw, 400px);
    /* --drop-y is animated by sections.js on scroll for the one-by-one
       drop-in entrance. Held outermost (leftmost in the transform list =
       applied last) so it shifts the card in the screen frame rather than
       the rotated card frame. */
    transform: translateY(var(--drop-y, 0px))
               translateX(var(--mob-tx, 0px))
               rotate(var(--mob-rot, 0deg));
  }
  /* Per-card mobile drift — slight horizontal offset + rotation so
     the stack reads as cards laid on a table, not a form list.
     Gap above provides the vertical clearance; --mob-tx only
     nudges horizontally, never enough to break the column. */
  .note-card[style*="--i:0"], .note-card[style*="--i: 0"] { --mob-tx: -12px; --mob-rot: -2deg; }
  .note-card[style*="--i:1"], .note-card[style*="--i: 1"] { --mob-tx:  10px; --mob-rot:  1.5deg; }
  .note-card[style*="--i:2"], .note-card[style*="--i: 2"] { --mob-tx:  -6px; --mob-rot: -1deg; }
  .note-card[style*="--i:3"], .note-card[style*="--i: 3"] { --mob-tx:  14px; --mob-rot:  2deg; }
  .note-card[style*="--i:4"], .note-card[style*="--i: 4"] { --mob-tx:  -8px; --mob-rot: -1.5deg; }
}

/* --------- DESKTOP (≥1280px): horizontal fan ---------
   Cards absolute-positioned around a shared center point at their
   final fanned positions via inline --tx/--ty/--rot custom props.
   Cards are 260 px wide with 24 px horizontal padding → 212 px
   text zone. Adjacent cards sit 240 px apart center-to-center
   (dx = 240), which means each card's edge lands 4 px past its
   neighbor's text edge — enough card overlap to read as a stack,
   zero text-on-text overlap.

   Because the resting inline transforms already resolve to the
   fanned positions, a user who lands on the section without
   triggering the ScrollTrigger (direct link, scroll skipped) sees
   the same safe layout as a user who watched the entrance play.
   sections.js only fades the cards in on scroll; it does NOT
   spread them from stacked → fanned (that spread would leave
   direct-link visitors looking at a text-covered stack).

   z-index is inverted from the old middle-on-top order to a
   simple ascending order (card 0 back, card 4 front) so nothing
   is trying to hide anything else — every card's text is visible
   because the geometry places it in a clear zone; the z-order
   only decides which corner overlaps which at the (text-free)
   card edges. */
@media (min-width: 1280px) {
  .note-deck {
    position: relative;
    width: 100%;
    margin: clamp(3rem, 6vw, 5rem) auto 0;
    height: clamp(240px, 22vw, 305px);
  }
  .note-card {
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(240px, 20vw, 260px);
    height: clamp(148px, 12.5vw, 165px);
    /* Compose the base center-anchor with the per-card fanned position
       (inline --tx / --ty / --rot on the article). --drop-y is animated
       by sections.js for the one-by-one drop-in entrance; it sits
       outermost in the transform list so it moves the card downward in
       the screen frame, unaffected by the per-card rotation. */
    transform: translateY(var(--drop-y, 0px))
               translate(-50%, -50%)
               translate(var(--tx, 0px), var(--ty, 0px))
               rotate(var(--rot, 0deg));
  }
  .note-card[style*="--i:0"], .note-card[style*="--i: 0"] { z-index: 1; }
  .note-card[style*="--i:1"], .note-card[style*="--i: 1"] { z-index: 2; }
  .note-card[style*="--i:2"], .note-card[style*="--i: 2"] { z-index: 3; }
  .note-card[style*="--i:3"], .note-card[style*="--i: 3"] { z-index: 4; }
  .note-card[style*="--i:4"], .note-card[style*="--i: 4"] { z-index: 5; }
}

/* Closing line for the Problem section — its own voice, not a smaller
   copy of the section headline. Where the headline is TT Norms Bold in
   warm charcoal (the section's primary voice), the closing beat drops
   one weight step to TT Norms Medium (500) and swaps to Electric Blue
   so it reads as a distinct moment: the same size range as the headline,
   but a lighter typographic weight and a colored voice. Electric Blue
   #054FF0 sits at 4.62:1 contrast on the section's warm-2 ground
   (#E9DDC5) — passes WCAG AA for normal text, and comfortably clears
   the 3:1 AA large-text bar for 30–48 px text. Fade-in reveal is
   handled by Pattern C (data-reveal="body") in shared/js/scroll-reveals.js. */
.problem-closing {
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 500;
  color: #054FF0;
  opacity: 1;
  font-size: clamp(1.875rem, 4vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.022em;
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  max-width: 24ch;
  text-align: center;
}

/* Reduced motion: skip the fan tween — cards render fanned in place. */
@media (prefers-reduced-motion: reduce) {
  .note-card { transition: none !important; }
}

/* ============================================================
   SECTION — WHAT WE DO
   Warm-3 (lightest) ground. Four flip cards in a 2×2 grid at
   ≥640 and stacked at narrower widths. Real 3D CSS flip using
   perspective + transform-style: preserve-3d + backface-visibility.
   Hover flips on hover-capable pointers; tap/keyboard toggles a
   `.is-flipped` class for touch and keyboard users.

   Card fronts sit on warm-1 (a modest step warmer/deeper than
   the warm-3 ground); backs sit on warm-2 (deeper still), so
   turning the card over visually descends into the palette.
   ============================================================ */
.wwd-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.6vw, 32px);
  margin-top: clamp(3rem, 6vw, 5rem);
}
@media (min-width: 640px) {
  .wwd-grid { grid-template-columns: repeat(2, 1fr); }
}

.flip-card {
  /* <button> defaults to inline-block, which won't stretch to fill
     the grid cell. Force block + width 100% so each card fills its
     column and the inner face has a real box to inset:0 against. */
  display: block;
  width: 100%;
  position: relative;
  min-height: clamp(220px, 32vw, 280px);
  perspective: 1400px;
  cursor: pointer;
  border: none;
  padding: 0;
  background: transparent;
  outline: none;
  text-align: left;
  font: inherit;
  color: inherit;
  transform-style: flat;
}
.flip-card:focus-visible {
  outline: 2px solid var(--rc-charcoal);
  outline-offset: 4px;
  border-radius: 10px;
}

.flip-card__inner {
  /* Inner is a <span> because it lives inside a <button>. Spans
     ignore width/height by default, so promote to block so the
     inset:0 faces have a real box to fill. */
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  transition: transform 550ms cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
}

@media (hover: hover) and (pointer: fine) {
  .flip-card:hover .flip-card__inner {
    transform: rotateY(180deg);
  }
}
.flip-card.is-flipped .flip-card__inner {
  transform: rotateY(180deg);
}

.flip-card__face {
  position: absolute;
  inset: 0;
  padding: clamp(22px, 2.6vw, 34px);
  border-radius: 8px;
  border: 1px solid rgba(78, 60, 30, 0.09);
  box-shadow:
    0 14px 32px -10px rgba(78, 60, 30, 0.18),
    0 4px 10px -3px rgba(78, 60, 30, 0.10);
  display: flex;
  flex-direction: column;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.flip-card__face--front {
  background: var(--rc-warm-1);
  justify-content: space-between;
}
.flip-card__face--back {
  background: var(--rc-warm-2);
  transform: rotateY(180deg);
  justify-content: center;
}

.flip-card__num,
.flip-card__title,
.flip-card__hint,
.flip-card__desc {
  /* Same reason as .flip-card__inner: promoted to block so
     max-width and margin-top apply, and so text can wrap. */
  display: block;
}
.flip-card__num {
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 700;
  font-size: 11px;
  color: rgba(26, 26, 26, 0.38);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.flip-card__title {
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 700;
  color: var(--rc-charcoal);
  font-size: clamp(1.15rem, 1.85vw, 1.55rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0.75rem 0 0;
  max-width: 22ch;
}
.flip-card__hint {
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 500;
  font-size: 10.5px;
  color: rgba(26, 26, 26, 0.42);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin-top: 1.5rem;
  align-self: flex-start;
}
.flip-card__hint .flip-card__hint-arrow {
  display: inline-block;
  margin-left: 4px;
  transform: translateY(-1px);
}

.flip-card__desc {
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 400;
  color: var(--rc-charcoal);
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.55;
  margin: 0;
  max-width: 32ch;
}

/* Reduced motion: keep both faces in the DOM but skip the tween.
   The flip still toggles instantly on hover/tap so the content is
   reachable without motion. */
@media (prefers-reduced-motion: reduce) {
  .flip-card__inner { transition: none; }
}

/* ============================================================
   SECTION — THE FOUNDER'S STORY
   Deep Navy ground (bg-deep = #000099, set via Tailwind class in
   the section root). Editorial two-column layout at ≥1024 px:
   left column carries the story copy, right column carries the
   embossed "PB" monogram. Under 1024 px the two blocks stack in
   a clean single column, with the monogram positioned BELOW the
   story so the reading order stays natural on mobile.

   The section deliberately introduces this site's first dark
   ground for the credibility peak — it's the moment the reader
   is told why Restore Consulting has standing to advise.
   ============================================================ */
.founder-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(3rem, 6vw, 5rem);
  align-items: center;
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
@media (min-width: 1024px) {
  .founder-layout {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: clamp(4rem, 6vw, 6rem);
    /* Stretch the row so the monogram cell has full row height to sit
       against — align-self: end on the monogram then pushes it to the
       bottom-right of that cell. If cells were center-aligned (the
       earlier default), align-self: end on a shrink-to-fit cell would
       just push it a few pixels; stretching gives the fall the room it
       needs. */
    align-items: stretch;
  }
}

.founder-story {
  max-width: 60ch;
}

/* Large opening line — TT Norms Bold. Weight and tracking hold the
   moment on the section's Deep Navy ground; sans-serif chosen so the
   section title reads as a plain declarative statement, not display
   flourish. */
.founder-story__lede {
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 700;
  color: #F9F8F3;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.022em;
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
  max-width: 22ch;
}

.founder-story__body {
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 400;
  color: rgba(249, 248, 243, 0.85);
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.7;
  letter-spacing: -0.006em;
  margin: 0 0 clamp(1.25rem, 2vw, 1.75rem);
  max-width: 58ch;
  font-variant-ligatures: none;
  -webkit-font-feature-settings: "liga" 0, "dlig" 0;
  font-feature-settings: "liga" 0, "dlig" 0;
}

/* Italic byline — Teal reads at strong contrast on Deep Navy
   (17.9:1, well above WCAG AAA). Preceded by a short teal rule
   as a visual "signed by" cue. */
.founder-story__byline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  font-family: 'TT Norms', system-ui, sans-serif;
  font-style: italic;
  font-weight: 500;
  color: #00FFFF;
  font-size: clamp(0.95rem, 1.1vw, 1.075rem);
  letter-spacing: 0.005em;
}
.founder-story__byline-mark {
  display: block;
  width: clamp(24px, 3vw, 36px);
  height: 1px;
  background: rgba(0, 255, 255, 0.5);
  flex: none;
}
.founder-story__byline-text {
  font-style: italic;
}

/* Embossed tone-on-tone monogram. Same technique as
   restore-marketing/the-foundation.html `.team-monogram`, ported
   here for cross-site consistency in the trust-building device:
     · Off-White fill at very low opacity
     · dark shadow offset down-right (deep-black tinted so it
       reads as recessed on Deep Navy, not pure black which
       would blend with the ground)
     · faint light highlight offset up-left
   The letterform reads as PRESSED INTO the Deep Navy surface —
   present but quiet, adding weight without shouting a portrait.

   Position: sits in the bottom-right of the section's negative
   space rather than centered against the story. On desktop
   (≥1024 px) the two-column grid row is stretched so this cell
   fills the story's height, and align-items: flex-end /
   justify-content: flex-end pushes the letters to the bottom-
   right corner of that cell — the trust-building weight lands as
   a corner mark, not a competing sibling to the story. On mobile
   the cell stacks below the story and the letters are right-
   aligned within the flow position (still the "bottom-right of
   the section's negative space" at that width).

   Fill opacity nudged from 0.07 → 0.08 (highlight from 0.09 →
   0.10) to hold legibility once the letters sit at the edge of
   the section instead of centered on the ground; slightly higher
   opacity is needed because a corner-positioned mark competes
   less with adjacent whitespace and needs a touch more presence
   to read as "pressed in" rather than "washed out." */
.founder-monogram {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  min-height: clamp(180px, 24vw, 320px);
  user-select: none;
  padding-right: clamp(0.25rem, 1.5vw, 1.5rem);
}
.founder-monogram__letters {
  font-family: 'Briller', 'TT Norms', system-ui, serif;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.85;
  /* Empirical: Briller Bold "PB" measures ~2.5× the font-size in
     rendered CSS-pixel width (verified across 320–1920 px). The
     font-size clamps below cap out where the rendered PB width
     stays inside the available cell width at every tested viewport
     — no overflow into the story column at any breakpoint. */
  letter-spacing: -0.02em;
  font-size: clamp(96px, 22vw, 180px);
  color: rgba(249, 248, 243, 0.09);
  text-shadow:
    2px 2px 0 rgba(0, 0, 40, 0.55),
    -1px -1px 0 rgba(249, 248, 243, 0.11);
}
@media (min-width: 1024px) {
  .founder-monogram {
    padding-right: clamp(0.5rem, 2vw, 2rem);
    padding-bottom: clamp(0.5rem, 1.5vw, 1.5rem);
  }
  /* Desktop letter size: hard-capped at 168 px so PB (~420 px wide at
     that size) fits inside the 2fr cell at every desktop breakpoint,
     including the 1920 case where the max-w-7xl container plateaus
     and the cell width stops scaling with the viewport. */
  .founder-monogram__letters { font-size: clamp(120px, 11vw, 168px); }
}

/* ============================================================
   SECTION — HOW WE OPERATE
   Warm-1 ground (the site's primary warm, first section use here
   — hero + What We Do used warm-3, Problem used warm-2). Four
   operating principles arranged as FULL-WIDTH ROWS separated by
   ink hairlines. Each row spans the container's full available
   width; internally, a large low-opacity numeral sits on one
   side and the title + body copy on the other.

   Internal rhythm: numeral side alternates by row —
     · odd rows (1, 3): numeral LEFT, content flowing right
     · even rows (2, 4): numeral RIGHT, content anchored to
       container left, flowing toward the numeral
   Body copy stays left-aligned in every row (reading direction
   preserved) — only the numeral side alternates. This gives a
   considered rhythm without templating: same structure, mirrored
   per pair.

   Hairline treatment mirrors the sibling restore-ai `.build-row`
   pattern (top-border on each row + bottom-border on container
   closes the last row's bottom). Tint retuned for warm-1 ground
   — ink hairline at 10% alpha instead of restore-ai's teal.

   Mobile (<768 px): alternation drops. Every row becomes a
   left-aligned vertical stack with numeral above title — same
   simplification approach as restore-ai's build-row mobile.
   ============================================================ */
.hwo-headline {
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 700;
  color: var(--rc-charcoal);
  font-size: clamp(2rem, 4.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.028em;
  margin: 0;
  max-width: 22ch;
}

.hwo-rows {
  margin-top: clamp(3.5rem, 6vw, 6rem);
  border-bottom: 1px solid rgba(26, 26, 26, 0.10);
}

.hwo-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  padding: clamp(2rem, 4vw, 3.5rem) 0;
  border-top: 1px solid rgba(26, 26, 26, 0.10);
}
@media (min-width: 768px) {
  .hwo-row {
    flex-direction: row;
    align-items: flex-end;
    gap: clamp(2rem, 5vw, 5rem);
  }
  /* Even rows mirror: numeral hugs the right edge of the row,
     content column anchors to the container's left edge. Reading
     direction preserved (body copy stays left-aligned inside its
     content block); only the row's internal composition flips. */
  .hwo-row:nth-child(even) {
    flex-direction: row-reverse;
  }
}

.hwo-row__num {
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 700;
  /* Same low-opacity ghost treatment as the previous cascade
     variant — the numeral registers as a large tone-on-tone
     marker beside the copy, present but quiet. Alpha nudged
     from 0.08 → 0.14 because it now sits BESIDE the text as a
     column element rather than BEHIND it as a watermark; the
     watermark opacity read too washed-out once it lost its
     text-overlap context. */
  color: rgba(26, 26, 26, 0.14);
  font-size: clamp(72px, 10vw, 120px);
  line-height: 0.9;
  letter-spacing: -0.035em;
  user-select: none;
  flex: 0 0 auto;
}

.hwo-row__content {
  /* min-width: 0 lets this flex child shrink below its content's
     intrinsic min-content width if needed (prevents the numeral
     from being forced out of its column at narrow widths). */
  flex: 1 1 auto;
  min-width: 0;
  max-width: 60ch;
}

.hwo-row__title {
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 700;
  color: #054FF0;
  font-size: clamp(1.35rem, 2.1vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: -0.014em;
  margin: 0 0 clamp(0.6rem, 1vw, 0.9rem);
  max-width: 32ch;
}

.hwo-row__body {
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 400;
  color: var(--rc-charcoal);
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.65;
  letter-spacing: -0.006em;
  margin: 0;
  max-width: 60ch;
  font-variant-ligatures: none;
  -webkit-font-feature-settings: "liga" 0, "dlig" 0;
  font-feature-settings: "liga" 0, "dlig" 0;
}

/* ============================================================
   SECTION — HOW THIS WORKS
   Warm-2 ground. Three centered rows separated by hairlines,
   each row: large ghost numeral above a title + body block,
   all centered horizontally.

   Deliberately NOT alternating: the sibling How-We-Operate
   section already uses the numeral-alternating-side rhythm;
   this section's read is "three steps that go in one direction,
   in order," which reads clearest as a straight centered
   spine down the page. Numeral is a tone-on-tone ghost above
   the copy, same alpha treatment as .hwo-row__num.

   Layout is a max-width constrained column so the centered
   composition doesn't leave awkward empty space on wide
   viewports — the visual weight sits in the middle of the
   page and reads as intentional rather than orphaned.

   Reveal: [data-reveal="card-grid"] on .htw-rows drives the
   standard fade-and-rise wired in shared/js/scroll-reveals.js.
   No pin, no scrub, no GSAP timeline. Flash-of-content is
   handled by the site-wide html.animations-pending gate.
   ============================================================ */
.htw-header {
  text-align: center;
  margin: 0 auto;
  max-width: 42rem;
}
.htw-headline {
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 700;
  color: var(--rc-charcoal);
  font-size: clamp(2rem, 4.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.028em;
  margin: 0 auto;
  max-width: 22ch;
}

.htw-rows {
  /* Centered column that keeps the composition anchored to the
     page's vertical spine. 68ch caps the row width so at 1440/
     1920 the row doesn't stretch out into thin ribbons — the
     centered layout reads as an intentional column, not a
     leftover-empty-space accident. */
  margin: clamp(3.5rem, 6vw, 6rem) auto 0;
  max-width: 68ch;
  border-bottom: 1px solid rgba(26, 26, 26, 0.10);
}

.htw-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(0.5rem, 1.5vw, 1rem);
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  border-top: 1px solid rgba(26, 26, 26, 0.10);
}

.htw-row__num {
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 700;
  /* Same tone-on-tone ghost register as .hwo-row__num — a
     large numeral that anchors the row without competing
     with the title. Alpha matches HWO exactly for palette
     parity between the two "operating" sections. */
  color: rgba(26, 26, 26, 0.14);
  font-size: clamp(72px, 10vw, 120px);
  line-height: 0.9;
  letter-spacing: -0.035em;
  user-select: none;
  display: block;
}

.htw-row__content {
  max-width: 52ch;
  margin: 0 auto;
}

.htw-row__title {
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 700;
  color: #054FF0;
  font-size: clamp(1.35rem, 2.1vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: -0.014em;
  margin: 0 0 clamp(0.6rem, 1vw, 0.9rem);
}

.htw-row__body {
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 400;
  color: var(--rc-charcoal);
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.65;
  letter-spacing: -0.006em;
  margin: 0;
  font-variant-ligatures: none;
  -webkit-font-feature-settings: "liga" 0, "dlig" 0;
  font-feature-settings: "liga" 0, "dlig" 0;
}

/* ============================================================
   STAGE 4 — SECTION 7: WHAT CHANGES
   Warm-3 ground. Deliberately calm — three outcome blocks in
   a plain vertical stack, no numerals, no rotation, no
   interactive device. Hairlines separate the blocks so the
   list reads as intentional, matching the sibling
   restore-ai .build-row / .hwo-row structural pattern.
   ============================================================ */
.wc-headline {
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 700;
  color: var(--rc-charcoal);
  font-size: clamp(2rem, 4.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.028em;
  margin: 0;
  max-width: 24ch;
}

.wc-list {
  margin-top: clamp(3.5rem, 6vw, 6rem);
  border-bottom: 1px solid rgba(26, 26, 26, 0.10);
}
.wc-block {
  padding: clamp(2rem, 4vw, 3.25rem) 0;
  border-top: 1px solid rgba(26, 26, 26, 0.10);
  max-width: 60ch;
}
.wc-block__title {
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 700;
  color: #054FF0;
  font-size: clamp(1.35rem, 2.1vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: -0.014em;
  margin: 0 0 clamp(0.6rem, 1vw, 0.9rem);
  max-width: 32ch;
}
.wc-block__body {
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 400;
  color: var(--rc-charcoal);
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.65;
  letter-spacing: -0.006em;
  margin: 0;
  max-width: 60ch;
  font-variant-ligatures: none;
  -webkit-font-feature-settings: "liga" 0, "dlig" 0;
  font-feature-settings: "liga" 0, "dlig" 0;
}

/* ============================================================
   STAGE 5 — SECTION 8: FAQ
   Warm-2 ground. Six native <details>/<summary> items.
   Adapted from restore-ai's teal-on-deep palette to this
   site's warm-editorial register: Electric Blue marker +
   charcoal type on warm-2.
   ============================================================ */
.faq-headline {
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 700;
  color: var(--rc-charcoal);
  font-size: clamp(2rem, 4.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.028em;
  margin: 0;
  max-width: 20ch;
}
.faq-list {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  max-width: 68ch;
  /* Bottom border closes the last item's edge — matches the
     border-top-on-each-item / border-bottom-on-container
     pattern already used by .hwo-rows, .htw-rows, .wc-list. */
  border-bottom: 1px solid rgba(26, 26, 26, 0.10);
}
.faq-item {
  border-top: 1px solid rgba(26, 26, 26, 0.10);
}
.faq-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 22px 4px;
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 700;
  color: var(--rc-charcoal);
  font-size: clamp(1.05rem, 1.25vw, 1.2rem);
  line-height: 1.4;
  letter-spacing: -0.012em;
}
/* Hide the native disclosure triangle across browsers. */
.faq-summary::-webkit-details-marker { display: none; }
.faq-summary::marker { content: ''; }
.faq-summary:focus-visible {
  outline: 2px solid #054FF0;
  outline-offset: 4px;
  border-radius: 2px;
}
.faq-marker {
  color: #054FF0;
  font-weight: 400;
  flex-shrink: 0;
  display: inline-block;
  font-size: 1.5em;
  line-height: 1;
  padding-top: 2px;
  transition: transform 0.28s cubic-bezier(0.65, 0, 0.35, 1);
  transform-origin: center center;
}
.faq-item[open] .faq-marker { transform: rotate(45deg); }
.faq-a {
  /* Left-indent aligns answer under question, past marker + gap. */
  padding: 0 4px 26px 44px;
  color: rgba(26, 26, 26, 0.78);
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.7;
  font-size: clamp(0.975rem, 1.15vw, 1.0625rem);
  max-width: 62ch;
}
.faq-a p + p { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) {
  .faq-marker { transition: none; }
}

/* ============================================================
   STAGE 5 — SECTION 9: CLOSING CTA
   Deep ground (#000099) as a solid block — deliberately NOT
   a gradient. The site's confident final conversion moment,
   built around the Briller "RESTORE CONSULTING." wordmark
   (the second and final Briller wordmark moment on this
   page, alongside the founder monogram). Content centered
   at every viewport.
   ============================================================ */
.closing-wordmark {
  font-family: 'Briller', 'TT Norms', system-ui, serif;
  font-weight: 700;
  text-transform: uppercase;
  color: #F9F8F3;
  /* Size cap chosen empirically: Briller Bold "RESTORE
     CONSULTING." at font-size 58 px with letter-spacing
     0.03em measures ~1180 px wide, which fits comfortably
     inside the max-w-7xl content column (1280 px minus the
     px-5..px-12 padding gutter). Above the cap the wordmark
     grows past the container and clips.

     Below the ~1024 px viewport the fluid 5.5vw step drops
     the font small enough that the wordmark wraps to two
     lines: "RESTORE" / "CONSULTING." The word break lands
     on the natural space (browsers don't split mid-word here
     because "RESTORE" and "CONSULTING." are non-hyphenated
     tokens), so the two-line composition reads as a
     stacked wordmark rather than a broken line. */
  font-size: clamp(22px, 5.5vw, 58px);
  letter-spacing: 0.03em;
  line-height: 1.05;
  /* Inline-block so the box measures the RENDERED text
     width, not the container width. This makes the shape
     easy to verify (Puppeteer's rect matches actual text). */
  display: inline-block;
  margin: 0 auto;
  /* Content stays within container: if the natural width
     exceeds container, the browser wraps at the space. */
  max-width: 100%;
}
.closing-wordmark__terminal {
  /* Terminal period tinted Electric Blue — same accent flip
     already used on other headline periods across the site
     (see restore-ai's .text-electric span-in-headline
     pattern for the family echo). */
  color: #054FF0;
}
.closing-body {
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 400;
  color: rgba(249, 248, 243, 0.90);
  line-height: 1.6;
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  max-width: 62ch;
  margin: clamp(1.75rem, 3vw, 2.5rem) auto 0;
}
.closing-ctas {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.closing-cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border-radius: 999px;
  background: #F9F8F3;
  color: #000099;
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;
  transition: background-color 200ms ease, transform 150ms ease;
}
.closing-cta-primary:hover { background: rgba(249, 248, 243, 0.92); }
.closing-cta-primary:active { background: rgba(249, 248, 243, 0.85); }
.closing-cta-primary:focus-visible {
  outline: 2px solid #F9F8F3;
  outline-offset: 4px;
}
.closing-cta-secondary {
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 500;
  color: rgba(249, 248, 243, 0.85);
  font-size: clamp(0.95rem, 1.05vw, 1rem);
  border-bottom: 1px solid rgba(249, 248, 243, 0.4);
  padding-bottom: 2px;
  transition: color 200ms ease, border-color 200ms ease;
}
.closing-cta-secondary:hover {
  color: #F9F8F3;
  border-bottom-color: rgba(249, 248, 243, 0.8);
}
.closing-cta-secondary:focus-visible {
  outline: 2px solid #F9F8F3;
  outline-offset: 4px;
  border-radius: 2px;
}
/* Narrow-viewport (320 px) refinement: tighten letter-spacing
   fractionally on the smallest phones so the two-line
   "RESTORE" / "CONSULTING." wordmark reads more cohesively. */
@media (max-width: 380px) {
  .closing-wordmark { letter-spacing: 0.02em; }
}

/* ============================================================
   STAGE 5 — FOOTER
   Warm-1 ground. Four-column pattern mirroring the sibling
   Restore AI + Restore Marketing footers. Social routes to
   Restore Marketing's live accounts; contact routes to
   contact@restoremarketingco.com — the project-wide fallback
   since Restore Consulting doesn't have its own accounts yet.
   ============================================================ */
.footer-social {
  display: inline-flex;
  color: rgba(26, 26, 26, 0.55);
  transition: color 250ms cubic-bezier(0.65, 0, 0.35, 1), transform 250ms cubic-bezier(0.65, 0, 0.35, 1);
}
.footer-social:hover { color: #054FF0; transform: scale(1.05); }
.footer-social:focus-visible {
  outline: 2px solid #054FF0;
  outline-offset: 4px;
  border-radius: 2px;
}
.footer-link {
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 400;
  color: rgba(26, 26, 26, 0.70);
  font-size: 13px;
  transition: color 200ms ease;
}
.footer-link:hover { color: #054FF0; }
.footer-link:focus-visible {
  outline: 2px solid #054FF0;
  outline-offset: 2px;
  border-radius: 2px;
}
.footer-legal-link {
  color: rgba(26, 26, 26, 0.40);
  transition: color 200ms ease;
}
.footer-legal-link:hover { color: rgba(26, 26, 26, 0.75); }
.footer-legal-link:focus-visible {
  outline: 2px solid #054FF0;
  outline-offset: 2px;
  border-radius: 2px;
}