/* ==========================================================================
   polish.css - loaded after the bundle stylesheet on every page.

   Everything here is an override of build output. When these changes are
   ported back into the React/Vite source, this file should shrink to nothing.
   Each block says what it fixes and why, so it can be moved one at a time.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. TYPE SYSTEM - one typeface, everywhere.

   Before: --font-sans asked for Inter and --font-serif asked for Cormorant
   Garamond. Neither was ever loaded on the homepage, so 79% of the page
   rendered in system-ui and Georgia. Hanken Grotesk was self-hosted and
   loading correctly but only four selectors referenced it.

   Both tokens now point at Hanken Grotesk, which is already downloaded on
   every page. No new network request.
   -------------------------------------------------------------------------- */

:root {
  --font-sans:  "Hanken Grotesk", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: "Hanken Grotesk", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Display scale - a grotesque needs more weight and tighter tracking than
     the serif it replaces, or headlines read as oversized body copy. */
  --display-weight:  600;
  --display-track:  -0.035em;
}

h1, h2, h3, h4, h5, h6,
.headline-serif {
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
  line-height: 1.06;
}

.headline-serif em,
h1 em, h2 em, h3 em {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: var(--display-weight);
}

/* Smaller headings sit closer to body weight - 600 at 27px is heavy. */
h3, h4, h5, h6,
.membership-card-title,
.cta-card-title,
.request-card-title,
.lifemap-detail-card h3 {
  font-weight: 550;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

/* The hero lockup. Was Schibsted Grotesk, a second grotesque doing the same
   job as Hanken. One family, one voice - heavier and tighter for display. */
#hero-section h1,
.about-hero h1 {
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: -0.055em;
}

#hero-section .time-number,
#hero-section .plus-hours,
#hero-section .delegate-lockup {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* The scroll-story intro word ("Just / Delegate / It") - was Fraunces. */
.intro {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.03em;
}

/* Wordmark: "HankenGrotesk-Medium" was never declared by any @font-face, so
   the SVG text fell through to the variable face at its default weight. */
.logo-mark-text {
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-weight: 500;
}


/* --------------------------------------------------------------------------
   2. THE MOBILE "CHIEF OF STAFF" SECTION (.s2)

   Below 960px this section swaps in for the desktop one and brought its own
   typefaces (DgFraunces, DgJost) and its own palette - a brighter green and a
   different cream than the rest of the site. Same section, different brand.
   -------------------------------------------------------------------------- */

.s2 {
  font-family: var(--font-sans);
  --green:     #1F8F57;               /* was #3FBF77 */
  --green-dim: rgba(31, 143, 87, .5);
  --cream:     #F7F3EC;               /* was #FBF9F2 */
  --mut:       rgba(255, 255, 255, .55);
  --line:      rgba(255, 255, 255, .08);
}

.s2-head h2,
.s2-list h2 {
  font-family: var(--font-sans);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
}


/* --------------------------------------------------------------------------
   3. CONTRAST - WCAG AA on the text that carries meaning.
   -------------------------------------------------------------------------- */

:root {
  /* 3.66:1 -> 5.3:1. Used by 40+ elements: section labels, sub-copy,
     testimonial handles, membership taglines. */
  --text-muted: rgba(255, 255, 255, .58);

  /* Emerald carries #F7F3EC label text on the primary CTA. At #1F8F57 that
     pairing is 3.7:1. Darkened just enough to clear 4.5:1. */
  --color-emerald: #1A7A4A;
}

/* Step numerals were rgba(255,255,255,.28) - 2.27:1. */
.chief-node-num {
  color: rgba(255, 255, 255, .5);
}

/* Keep the glow accents on the original brighter emerald: they are decoration,
   not text, so they are not bound by the contrast floor. */
#hero-section {
  --emerald: #1A7A4A;
}


/* --------------------------------------------------------------------------
   4. KEYBOARD FOCUS

   The bundle contained zero :focus-visible rules, and .membership-card-wrap
   set outline:none with no replacement - on the pricing path.
   -------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
.membership-card-wrap:focus-visible {
  outline: 2px solid #35C77E;
  outline-offset: 3px;
  border-radius: 4px;
}

.membership-card-wrap:focus-visible {
  outline-offset: 6px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 2000;
  background: #fff;
  color: #000;
  padding: .7rem 1rem;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: 1rem;
}


/* --------------------------------------------------------------------------
   5. HEADER - align to the page grid, and give the controls real hit areas.

   The logo carried margin-left:5% on top of the header's 4rem padding, so it
   sat at 130px while every section below sat at 64px and the nav buttons sat
   flush right at 64px. Three different left edges above the fold.
   -------------------------------------------------------------------------- */

.logo-container {
  margin-left: 0;
  width: 125px;
  height: 48px;
  flex-shrink: 0;
}

.logo-container .logo-mark {
  height: 42px;
}

@media (max-width: 992px) {
  .logo-container .logo-mark {
    height: 40px;
  }
}

header {
  padding-top: .55rem;
  padding-bottom: .55rem;
}

/* 40px -> 44px, the minimum comfortable touch target. */
.btn-header {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-toggle {
  width: 44px;
  height: 44px;
  align-items: center;
  padding: 0 6px;
}

.nav-toggle span {
  width: 26px;
  align-self: flex-end;
}

/* Any small icon-only control gets a 44px hit area without growing visually. */
.scroll-cue,
.carousel-arrow,
button[aria-label] {
  position: relative;
}

.scroll-cue::after,
button[aria-label]:not(.nav-toggle)::after {
  content: "";
  position: absolute;
  inset: 50% 50% 50% 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  inset: 50% auto auto 50%;
}


/* --------------------------------------------------------------------------
   6. VERTICAL RHYTHM

   Section padding ran 32 / 64 / 72 / 96 / 115.2 / 128 / 160px with no scale,
   producing content gaps between 80px and 351px. One step, used everywhere.
   -------------------------------------------------------------------------- */

:root {
  --sec-y: 6rem;   /* 96px each side -> a uniform 192px between sections */
}

#chief-section,
#lifemap-section,
#membership-section,
#testimonials-section,
#cta-section {
  padding-top: var(--sec-y);
  padding-bottom: var(--sec-y);
}

@media (min-width: 961px) {
  #chief-section .chief-visual-area {
    height: 590px;
    max-width: 1100px;
  }

  #chief-section .chief-feature-node {
    gap: .65rem;
    max-width: none;
    outline: none;
  }

  #chief-section .chief-node-text {
    width: clamp(164px, 17vw, 210px);
  }

  #chief-section .chief-node-title {
    line-height: 1.35;
  }

  #chief-section .chief-feature-node:focus-visible .chief-node-circle {
    border-color: var(--color-emerald);
    background: rgba(31, 143, 87, .12);
    box-shadow: 0 0 26px rgba(31, 143, 87, .4);
    transform: scale(1.06);
  }

  #chief-section .chief-feature-node:focus-visible .chief-node-desc {
    max-height: 120px;
    opacity: 1;
    margin-top: .3rem;
  }

  #chief-section .chief-node-circle img {
    width: 18px;
    height: 18px;
    filter: invert(1);
    opacity: .65;
    transition: opacity var(--transition-fast);
  }

  #chief-section .chief-feature-node:hover .chief-node-circle img,
  #chief-section .chief-feature-node:focus-visible .chief-node-circle img {
    opacity: 1;
  }
}

@media (max-width: 960px) {
  #s2 {
    height: calc(var(--s2vh, 100vh) * 13);
  }
}

/* The workflow story is pinned and runs edge to edge by design - it only needs
   air on the side that meets a normal section. */
#lifemap-section {
  padding-top: calc(var(--sec-y) * .75);
}

#hero-section {
  padding-top: 7.5rem;      /* clears the fixed header */
  padding-bottom: 4.5rem;
}

/* --------------------------------------------------------------------------
   6a. TESTIMONIAL CONTROLS

   The carousel arrows shipped as side controls, which put them far away from
   the active testimonial card. Keep the buttons in the same DOM order for
   keyboard users, but wrap the flex row so the card track gets the first row
   and both arrows sit together below it at every viewport width.
   -------------------------------------------------------------------------- */

.testimonial-carousel {
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 1.1rem;
  padding-bottom: 3rem;
}

.testimonial-track-wrap {
  order: 1;
  flex: 0 0 100%;
  width: 100%;
}

.carousel-arrow.prev,
.carousel-arrow.next {
  order: 2;
  margin: 0 .45rem;
  width: 46px;
  height: 46px;
}

@media (max-width: 768px) {
  .testimonial-carousel {
    row-gap: .85rem;
    padding-bottom: 2.25rem;
  }

  .carousel-arrow.prev,
  .carousel-arrow.next {
    width: 44px;
    height: 44px;
    margin: 0 .35rem;
  }
}

/* --------------------------------------------------------------------------
   6b. FOOTER

   The watermark is a fixed 680px-wide mark (aspect 600/545 -> 618px tall)
   sitting inside a footer only 248px tall with overflow:hidden, so the D was
   cropped top and bottom and read as a broken shape rather than a mark.

   The footer now gets real height, and the watermark is sized off that height
   instead of a fixed pixel width, so it always sits fully inside the panel.
   Identical on both pages.
   -------------------------------------------------------------------------- */

/* The mark is the closing statement and should read big. The original problem
   was not its size but that a 618px mark was centred in a 248px footer, so it
   got clipped top AND bottom and read as a broken shape.

   The mark is now anchored to the footer's bottom edge, and the footer height
   is the mark height plus a small top gap - so the panel ends exactly where
   the D ends, with no dead space above or below it.
   --footer-mark  = mark height
   --footer-lead  = gap above the mark                                        */

#main-footer,
.about-page #main-footer {
  --footer-mark: 430px;
  --footer-lead: 28px;

  min-height: calc(var(--footer-mark) + var(--footer-lead));
  padding: var(--footer-lead) var(--container-padding) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* The SVG viewBox was -11.75 -13.85 110 100 against a path occupying only
   x19.9 y10.6 w46.6 h51.1 - 28.8% empty either side and 24.4% above and below.
   Sizing the wrapper therefore sized mostly blank space: a 617x560 box painted
   a D of just 261x286. The viewBox is now cropped to the glyph (plus room for
   the stroke and drop shadow), so --footer-mark is the real mark height and
   aspect-ratio follows the tightened box. */
.footer-watermark-wrap {
  top: auto;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: var(--footer-mark);
  aspect-ratio: 50.8 / 55.3;
  opacity: .8;
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

#main-footer .footer-headline,
.about-page #main-footer .footer-headline {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  margin: 0;
  letter-spacing: -.035em;
  line-height: 1.05;
}

#main-footer .footer-links,
.about-page #main-footer .footer-links {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 1rem;
  column-gap: 2.4rem;
}

#main-footer .footer-links li a {
  font-size: .68rem;
  letter-spacing: .2em;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

@media (max-width: 960px) {
  #main-footer,
  .about-page #main-footer {
    --footer-mark: 360px;
    --footer-lead: 20px;
  }

  .footer-content {
    gap: 1.5rem;
  }
}

@media (max-width: 960px) {
  :root { --sec-y: 4rem; }

  #hero-section {
    padding-top: 6rem;
    padding-bottom: 3rem;   /* was 18px */
  }
}


/* --------------------------------------------------------------------------
   6c. IMAGE ASPECT RATIO

   .cta-silhouette is sized by CSS height alone, so its width must stay auto.
   With an intrinsic width attribute present and no object-fit, the browser
   uses the attribute as the width and stretches the figure horizontally.
   -------------------------------------------------------------------------- */

.cta-silhouette {
  width: auto;
  object-fit: contain;
}


/* --------------------------------------------------------------------------
   6d. MEMBERSHIP CARDS - readable at a glance

   Landscape SVGs share an 8:5 canvas. The absolute image prevents its
   intrinsic dimensions from stretching the flex item; no artwork is cropped.
   -------------------------------------------------------------------------- */

.membership-slab {
  aspect-ratio: 8 / 5;
  height: auto;
  flex: 0 0 auto;
  overflow: visible;
  border-radius: 4% / 6.4%;
  box-shadow: none;
}

.membership-metal-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  box-shadow: 0 15px 35px #0009;
  pointer-events: none;
}

.membership-slab-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border: 0;
  border-radius: inherit;
  transition: none;
}

.membership-engraving-shine {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 42% 65% at var(--metal-light-x, 50%) var(--metal-light-y, 45%),
    #fff 0%, rgba(255, 255, 255, .55) 32%, transparent 75%);
  -webkit-mask: var(--engraving-mask) center / 100% 100% no-repeat;
  mask: var(--engraving-mask) center / 100% 100% no-repeat;
}

.membership-card-wrap:focus-visible .membership-engraving-shine {
  opacity: .18;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .membership-metal-face {
    transform: perspective(1100px) rotateX(var(--metal-rx, 0deg)) rotateY(var(--metal-ry, 0deg));
    transition: transform .2s ease-out;
  }

  .membership-engraving-shine {
    transition: opacity .2s ease-out;
  }

  .is-metal-hovered .membership-metal-face {
    will-change: transform;
  }

  .is-metal-hovered .membership-engraving-shine {
    opacity: .28;
  }
}

.membership-card-back {
  padding: 1.6rem 1.5rem;
  margin-top: 1rem;
}

.membership-card-tagline {
  margin-bottom: 1.1rem;
}

.membership-details-list {
  gap: .6rem;
}

/* --------------------------------------------------------------------------
   6f. HORIZONTAL SNAP RAILS - sections 4 and 5 on mobile (see enhance.js)

   Sections 4 and 5 were tall vertical stacks: lifemap six images sharing one
   card parked below all of them (1688px), membership three tiers (2428px).

   They are now horizontal snap rails. This deliberately does NOT pin or
   otherwise touch vertical scroll - two earlier attempts at a vertically
   pinned story fought Lenis and jumped the page. Here the browser scrolls an
   inner container natively: no scroll handler, no document height change,
   nothing for the smooth scroller to fight. The rail carries
   data-lenis-prevent so horizontal gestures never reach Lenis at all.
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .dg-railwrap {
    width: 100%;
  }

  .dg-rail {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;    /* no scroll chaining to the page */
    scrollbar-width: none;
    /* let the first and last slide still centre under scroll-snap */
    padding: 2px calc(var(--container-padding) / 2);
    margin: 0 calc(var(--container-padding) / -2);
  }

  .dg-rail::-webkit-scrollbar {
    display: none;
  }

  .dg-slide {
    flex: 0 0 86%;                     /* the 14% peek is the swipe affordance */
    scroll-snap-align: center;
    scroll-snap-stop: always;
    min-width: 0;
    opacity: .55;
    transition: opacity .3s ease;
  }

  .dg-slide.is-current {
    opacity: 1;
  }

  .dg-rail:focus-visible {
    outline: 2px solid #35C77E;
    outline-offset: 4px;
    border-radius: 8px;
  }

  .dg-count {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-top: 1rem;
    font-family: var(--font-sans);
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: .22em;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
  }

  .dg-count b {
    color: var(--text-primary);
    font-weight: 600;
  }

  .dg-swipe {
    text-transform: uppercase;
    letter-spacing: .22em;
    opacity: .75;
  }

  .dg-swipe::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 1px;
    margin-right: .55rem;
    vertical-align: middle;
    background: currentColor;
    opacity: .5;
  }

  /* ---- lifemap slide: image above, its own card below ---- */

  .dg-pair {
    display: flex;
    flex-direction: column;
    gap: .8rem;
  }

  .dg-pair .lifemap-compartment {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 150px !important;
    flex: 0 0 auto;
  }

  /* .lifemap-compartment-img sits at opacity .35 and only lifts on :hover or
     .active, neither of which a phone produces, so every illustration
     rendered at a third of its intended brightness. */
  .dg-slide.is-current .lifemap-compartment-img {
    opacity: .85;
    filter: saturate(.2);
  }

  body.lm-inline #lifemap-detail-card:not(.lifemap-detail-card--inline),
  body.lm-inline #lifemap-svg-lines,
  body.lm-inline .lifemap-center-node {
    display: none !important;
  }

  .lifemap-detail-card--inline {
    /* base .lifemap-detail-card is a desktop side panel: 3rem 2.5rem padding
       and min-height:380px. Both have to go for an inline card. */
    min-height: 0;
    margin: 0;
    padding: 1.1rem 1.15rem 1.25rem;
    border: 1px solid var(--border-light);
    border-radius: 18px;
    background: rgba(255, 255, 255, .022);
    display: block;
  }

  .lifemap-detail-card--inline .lifemap-detail-head {
    display: flex;
    align-items: center;
    margin-bottom: .8rem;
  }

  .lifemap-detail-card--inline .lifemap-detail-icon {
    width: 22px;
    height: 22px;
    min-width: 22px;
    margin: 0 .6rem 0 0;
    color: var(--color-emerald);
  }

  .lifemap-detail-card--inline .lifemap-detail-title {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 550;
    letter-spacing: -.015em;
    color: var(--text-primary);
    margin: 0;
  }

  .lifemap-detail-card--inline .lifemap-detail-description {
    margin: 0 0 .85rem;
    color: var(--text-muted);
    font-size: .78rem;
    line-height: 1.45;
  }

  .lifemap-detail-card--inline .lifemap-detail-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
  }

  .lifemap-detail-card--inline .lifemap-detail-item {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-family: var(--font-sans);
    font-size: .85rem;
    line-height: 1.4;
    color: var(--text-secondary);
  }

  .lifemap-detail-card--inline .lifemap-detail-item svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    margin-top: .16rem;
    color: var(--color-emerald);
  }

  /* ---- membership slide ---- */

  .dg-slide .membership-card-wrap {
    max-width: 100%;
    margin: 0;
  }

  /* the grid centred a 330px card; in a rail the slide sets the width */
  .dg-slide .membership-card-inner {
    width: 100%;
  }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .dg-slide {
    opacity: 1;
    transition: none;
  }
}


/* --------------------------------------------------------------------------
   6h. HERO - the game's invitation

   The hero used to carry two lines of sub-copy: "Hand us the chaos." and
   "Catch the tasks - watch the hours come back." The second was describing an
   interaction happening in a different column, so nothing connected the words
   to the thing they were about. It now sits on the game stage itself, which
   makes it an affordance rather than a caption - the calendar and the drifting
   task chips are playable, and this is the only thing that says so.

   It retires the moment the visitor actually plays, so it never nags.

   Pinned to the stage's top left corner. The task chips drift across the whole
   stage, so no anchor is permanently clear of them; a fixed corner at least
   keeps the hint somewhere the eye can return to, and it sits above the chips
   on z-index with a blurred ground so any overlap reads as layering.
   -------------------------------------------------------------------------- */

.game-hint {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 6;
  margin: 0;
  padding: .5rem .85rem;
  max-width: calc(100% - 2rem);
  font-family: var(--font-sans);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .03em;
  line-height: 1.25;
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  pointer-events: none;
  opacity: 1;
  transition: opacity .45s ease, transform .45s ease;
}

/* a slow breath on the emerald dot so the eye finds it, nothing more */
.game-hint::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: .5rem;
  vertical-align: middle;
  border-radius: 999px;
  background: var(--color-emerald);
  box-shadow: 0 0 12px rgba(31, 143, 87, .8);
  animation: dgHintPulse 2.4s ease-in-out infinite;
}

@keyframes dgHintPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

/* the visitor has taken the controls, so the hint steps back */
.game-hint.is-done {
  opacity: 0;
  transform: translateY(-6px);
}

@media (max-width: 768px) {
  .game-hint {
    top: .7rem;
    left: .7rem;
    font-size: .63rem;
    padding: .4rem .68rem;
    max-width: calc(100% - 1.4rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .game-hint::before { animation: none; }
  .game-hint { transition: none; }
}


/* --------------------------------------------------------------------------
   10. WORKFLOW ORBIT

   Keep request labels crisp while the scroll scene supplies motion and depth.
   -------------------------------------------------------------------------- */

.bub3 div {
  color: #fbf9f2;
  background: linear-gradient(135deg, #167b54, #0d5d40);
  border: 1px solid rgba(195, 219, 174, .24);
  box-shadow:
    0 18px 46px rgba(0, 0, 0, .62),
    inset 0 1px 0 rgba(255, 255, 255, .1);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
}

@media (max-width: 760px) {
  .bub3 div {
    padding: 10px 14px;
    font-size: clamp(12px, 3.5vw, 15px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #orbit {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   6i. THE MARK - centre node size

   Size the constellation and lifemap centre nodes independently.
   -------------------------------------------------------------------------- */

/* Section 2: half-size disc with the padded SVG reduced by 10%. */
.chief-center-logo {
  width: 85px;
  height: 85px;
}

.chief-center-logo svg {
  flex-shrink: 0;
  width: 97.2px;
  height: 97.2px;
}

/* Section 4: independently sized disc and glyph. */
.lifemap-center-node {
  width: 82.368px;
  height: 82.368px;
}

.lifemap-center-node svg {
  width: 62.608px;
  height: 62.608px;
}

@media (min-width: 993px) {
  .lifemap-grid {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 2rem;
  }

  .lifemap-compartment {
    max-width: calc(42% - 2rem);
  }

  #lifemap-detail-card {
    min-width: 0;
    min-height: 320px;
    padding: 1.5rem;
  }

  #lifemap-detail-card .lifemap-detail-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 1rem;
  }

  #lifemap-detail-card .lifemap-detail-title {
    font-size: 1.375rem;
    line-height: 1.3;
    margin-bottom: 1.25rem;
  }

  #lifemap-detail-card .lifemap-detail-description {
    margin: -.5rem 0 1.1rem;
    color: var(--text-muted);
    font-size: .84rem;
    line-height: 1.5;
  }

  #lifemap-detail-card .lifemap-detail-list {
    gap: .85rem;
  }

  #lifemap-detail-card .lifemap-detail-item svg {
    flex-shrink: 0;
  }
}


/* --------------------------------------------------------------------------
   7. MOBILE LEGIBILITY

   Real content was rendering at 9.3px. The phone-mockup chrome inside the hero
   game is left alone - small type is correct there, it is simulating a screen.
   -------------------------------------------------------------------------- */

@media (max-width: 960px) {
  .lifemap-compartment-label { font-size: .72rem; }
  .workflow-step-title       { font-size: .78rem; }
  .membership-card-tagline   { font-size: .9rem; }
  .membership-detail-bullet  { font-size: .875rem; line-height: 1.5; }
  .testimonial-text          { font-size: .95rem; }
  .testimonial-author-name   { font-size: .8rem; }
  .testimonial-author-handle { font-size: .8rem; opacity: .85; }
  .section-label             { font-size: .72rem; }
  .chief-node-title          { font-size: .82rem; }
  .workflow-footer-text      { font-size: .72rem; }

  /* Workflow task cards scale off --cu, which bottoms out at 7.4px. */
  .meta s   { font-size: max(11px, calc(13 * var(--cu))); }
  .meta      { font-size: max(11px, 1em); }
}


/* --------------------------------------------------------------------------
   8. COMPOSITOR HYGIENE

   will-change was declared permanently on 18 selector groups. On .testimonial-
   card that meant 11 permanently promoted layers, each also running a 12px
   backdrop-filter. Promotion is dropped where the element is not mid-animation;
   GSAP still promotes what it animates for the duration of the tween.
   -------------------------------------------------------------------------- */

.testimonial-card,
.membership-card-wrap {
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .testimonial-track,
  .intro,
  .intro span,
  .world,
  .fly,
  .strip,
  .board,
  .s2-head,
  .s2-planet,
  .s2-item {
    will-change: auto;
  }
}


/* --------------------------------------------------------------------------
   9. DEAD RULES

   .testimonial-dots is display:none unconditionally; its .dot styles were the
   only consumer of --color-marigold. Left hidden, noted for deletion at source.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   11. ABOUT PAGE - inherits the unified type system.
   -------------------------------------------------------------------------- */

.about-page .primary-btn {
  background: var(--color-emerald);
  box-shadow: 0 16px 42px rgba(26, 122, 74, .24);
}

.about-page .primary-btn:hover {
  background: #1F8F57;
  box-shadow: 0 20px 54px rgba(26, 122, 74, .32);
}

.about-block h2,
.about-quote p,
.about-close .signoff {
  font-family: var(--font-serif);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
}

.about-block h2 em {
  font-style: normal;
  font-weight: var(--display-weight);
}

/* `.about-block p` (0,1,1) outranks `.about-kicker` (0,1,0), so the kicker was
   inheriting body size and weight: it rendered at 16.8px/300 while the same
   label on the homepage (.section-label) is 11.2px/500. It kept only its
   letter-spacing, which is why it read as loose grey body text rather than an
   eyebrow. Matched to .section-label. */
.about-page .about-block p.about-kicker,
.about-page p.about-kicker {
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .25em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: .35rem 0 0;
}

/* Same role as the homepage card titles - same weight. */
.about-values h3 {
  font-weight: 550;
}

/* Same role as .section-label - same weight. */
.about-list h3 {
  font-weight: 500;
  letter-spacing: .2em;
}