/* =========================================================================
   Simple Media — Prototype layer
   -------------------------------------------------------------------------
   Sits on top of /colors_and_type.css. All prototype-specific component
   classes are prefixed `sm_` (BEM: sm_block__element--modifier).

   Target framework: EtchWP on WordPress + ACSS 4.0.
   Markup pattern:    <section> > .sm_container > .sm_block > content
   All structural classes are framework-agnostic — no Bricks / Elementor /
   page-builder prefixes — so an Etch dev rebuilds the page natively in
   Etch's tree and only carries the `sm_*` design classes across.
   ========================================================================= */

/* Note: rules are intentionally unlayered so they sit at the same
   cascade level as the unlayered base `a` / typography rules in
   colors_and_type.css. Without this, layered rules would lose to the
   unlayered defaults (nav links would inherit the inline-link
   border-bottom and link colour). */

  /* ---- Page baseline ----
     Body inherits from ACSS body tokens (--body-bg-color, --body-color)
     which auto-flip under [data-theme="dark"] / system preference. */
  body {
    background: var(--body-bg-color);
    color: var(--body-color);
    min-height: 100vh;
  }
  *:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    border-radius: 2px;
  }

  /* The ACSS `a` rule adds border-bottom: 1px solid currentColor to give
     inline links an underline. Reset it on all structural anchors — nav,
     buttons, cards, header logo, footer columns — so only running prose
     keeps the underline. */
  .sm_nav__link,
  .sm_btn,
  .sm_btn--text,
  .sm_header__logo,
  .sm_footer__list a,
  .sm_footer__legal-links a,
  .sm_review-bar__variants a,
  .sm_breadcrumb a,
  .sm_article-row,
  .sm_work-card,
  .sm_featured,
  .sm_card__link,
  .sm_card--linked a {
    border-bottom: 0;
  }

  /* ---- Skip link ---- */
  .sm_skip {
    position: absolute;
    left: -9999px;
    top: 12px;
    background: var(--text-dark);
    color: var(--body-bg-color);
    padding: 10px 16px;
    border-radius: var(--radius-md);
    z-index: 200;
  }
  .sm_skip:focus { left: 12px; }

  /* ---- Visually-hidden utility ---- */
  .sm_sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); border: 0;
  }

  /* =====================================================================
     Layout primitives
     ===================================================================== */

  .sm_container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .sm_container--narrow { max-width: 920px; }
  .sm_container--prose  { max-width: 720px; }

  .sm_block {
    width: 100%;
  }

  /* Section rhythm */
  .sm_section {
    position: relative;
    padding-block: clamp(56px, calc(56px + 64 * ((100vw - 360px) / 1006)), 120px);
  }
  .sm_section--tight { padding-block: clamp(40px, calc(40px + 32 * ((100vw - 360px) / 1006)), 72px); }
  .sm_section--hero  { padding-block: clamp(96px, calc(96px + 96 * ((100vw - 360px) / 1006)), 192px); }

  /* Subtle radial glow used sparingly behind heroes and select sections.
     Reads as a soft light source rather than a hard gradient — picks up
     more on dark surfaces where the contrast is higher. Positioned via
     two CSS variables so each instance can place the light where it
     suits the composition. */
  .sm_section--glow {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    --sm-glow-x: 75%;
    --sm-glow-y: 25%;
    --sm-glow-size: 50%;
    --sm-glow-intensity: 1;
  }
  .sm_section--glow::before {
    content: "";
    position: absolute;
    inset: -20%;
    background: radial-gradient(
      ellipse var(--sm-glow-size) calc(var(--sm-glow-size) * 0.85)
        at var(--sm-glow-x) var(--sm-glow-y),
      color-mix(in srgb, var(--primary) calc(35% * var(--sm-glow-intensity)), transparent) 0%,
      color-mix(in srgb, var(--primary) calc(14% * var(--sm-glow-intensity)), transparent) 30%,
      transparent 65%
    );
    filter: blur(60px);
    pointer-events: none;
    z-index: -1;
  }
  /* Light surfaces get a quieter, cooler glow. */
  .sm_section--glow.bg-ultra-light,
  .sm_section--glow.bg-light { --sm-glow-intensity: 0.6; }
  /* Dark surfaces (or page-level dark mode) lift the glow up. */
  .sm_section--glow.bg-dark,
  .sm_section--glow.bg-ultra-dark,
  [data-theme="dark"] .sm_section--glow { --sm-glow-intensity: 2.2; --sm-glow-size: 60%; }
  @media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]):not(.light) .sm_section--glow { --sm-glow-intensity: 2.2; --sm-glow-size: 60%; }
  }
  /* Position variants — pick the corner the light should come from. */
  .sm_section--glow-tl { --sm-glow-x: 18%; --sm-glow-y: 22%; }
  .sm_section--glow-tr { --sm-glow-x: 78%; --sm-glow-y: 22%; }
  .sm_section--glow-bl { --sm-glow-x: 18%; --sm-glow-y: 78%; }
  .sm_section--glow-br { --sm-glow-x: 78%; --sm-glow-y: 78%; }
  .sm_section--glow-c  { --sm-glow-x: 50%; --sm-glow-y: 50%; --sm-glow-size: 60%; }

  /* The blue brand wash — used once per page (typically the CTA close).
     Rebinds the same foreground tokens .bg-dark uses so children pick up
     light type without per-element overrides. */
  .sm_section--blue {
    background-color: var(--primary);
    color: var(--text-light);
    color-scheme: dark;
    --text-dark:        var(--text-light);
    --text-dark-muted:  color-mix(in srgb, var(--text-light) 82%, transparent);
    --heading-color:    var(--text-light);
    --link-color:       var(--text-light);
    --link-color-hover: var(--primary-ultra-light);
    --icon-color:       var(--text-light-muted);
    --border-color-dark: color-mix(in srgb, var(--text-light) 25%, transparent);
  }

  /* =====================================================================
     Type primitives
     ===================================================================== */

  /* Eyebrow — colour derives from the contextual --text-dark-muted token,
     so it auto-inverts on .bg-dark / .bg-ultra-dark / dark-mode without
     per-context overrides. No leading hairline. */
  .sm_eyebrow {
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dark-muted);
    margin: 0 0 var(--space-s) 0;
  }

  /* All headings reach for --heading-color which is rebound by the
     contextual bg-* class above. Never hard-code base or white. */
  .sm_display {
    font-family: var(--heading-font-family);
    font-weight: 500;
    font-size: var(--display);
    line-height: 0.98;
    letter-spacing: -0.025em;
    text-wrap: balance;
    color: var(--heading-color);
    margin: 0;
  }
  .sm_h1 {
    font-weight: 500;
    font-size: var(--h1);
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: var(--heading-color);
    margin: 0;
  }
  .sm_h2 {
    font-weight: 500;
    font-size: var(--h2);
    line-height: 1.1;
    letter-spacing: -0.018em;
    text-wrap: balance;
    color: var(--heading-color);
    margin: 0;
  }
  .sm_h3 {
    font-weight: 500;
    font-size: var(--h3);
    line-height: 1.18;
    letter-spacing: -0.01em;
    color: var(--heading-color);
    margin: 0;
  }

  .sm_lede {
    font-size: var(--text-l);
    line-height: 1.4;
    color: var(--text-dark-muted);
    text-wrap: pretty;
    max-width: 60ch;
    margin: 0;
  }
  .sm_body {
    font-size: var(--text-m);
    line-height: 1.6;
    color: var(--text-dark-muted);
    text-wrap: pretty;
    margin: 0;
  }

  /* Prose block: long-form copy with default <p> spacing.
     All colour bindings come from contextual tokens. */
  .sm_prose > * + * { margin-top: 1.1em; }
  .sm_prose p,
  .sm_prose li {
    font-size: var(--text-m);
    line-height: 1.65;
    color: var(--text-dark-muted);
    text-wrap: pretty;
  }
  .sm_prose h2 {
    font-weight: 500;
    font-size: var(--h2);
    letter-spacing: -0.015em;
    line-height: 1.15;
    margin-top: 2em;
    color: var(--heading-color);
  }
  .sm_prose h3 {
    font-weight: 500;
    font-size: var(--h3);
    letter-spacing: -0.01em;
    margin-top: 1.6em;
    color: var(--heading-color);
  }
  .sm_prose strong { color: var(--text-dark); font-weight: 600; }
  .sm_prose a {
    color: var(--link-color);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
  .sm_prose a:hover { color: var(--link-color-hover); }
  .sm_prose ul { padding-inline-start: 1.1em; }
  .sm_prose li + li { margin-top: 0.4em; }

  /* =====================================================================
     Buttons
     ===================================================================== */

  .sm_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font: 500 15px/1 var(--font-sans);
    letter-spacing: 0.005em;
    padding: 14px 22px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-duration) var(--transition-timing),
                color var(--transition-duration) var(--transition-timing),
                border-color var(--transition-duration) var(--transition-timing),
                transform var(--transition-duration) var(--transition-timing);
    white-space: nowrap;
  }
  .sm_btn:active { transform: translateY(1px); }
  .sm_btn__arrow {
    display: inline-block;
    font-weight: 400;
    transition: transform var(--transition-duration) var(--transition-timing);
  }
  .sm_btn:hover .sm_btn__arrow { transform: translateX(3px); }

  .sm_btn--primary { background: var(--primary); color: var(--white); border-color: var(--primary); }
  .sm_btn--primary:hover {
    background: var(--primary-hover);
    color: var(--white);
    border-color: var(--primary-semi-light);
  }
  .sm_btn--dark    { background: var(--base); color: var(--white); border-color: var(--base); }
  .sm_btn--dark:hover {
    background: var(--base-hover);
    color: var(--white);
    border-color: var(--base-semi-light);
  }
  .sm_btn--ghost   {
    background: transparent;
    color: var(--text-dark);
    border-color: currentColor;
    border-color: color-mix(in srgb, currentColor 30%, transparent);
  }
  .sm_btn--ghost:hover {
    background: color-mix(in srgb, currentColor 8%, transparent);
    border-color: color-mix(in srgb, currentColor 55%, transparent);
  }
  /* On the blue brand wash, the primary CTA inverts to white. */
  .sm_section--blue .sm_btn--primary { background: var(--white); color: var(--primary); border-color: var(--white); }
  .sm_section--blue .sm_btn--primary:hover { background: var(--neutral-ultra-light); color: var(--primary); border-color: var(--neutral-light); }

  .sm_btn--text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 500 var(--text-s)/1 var(--font-sans);
    color: var(--link-color);
    background: transparent;
    border: 0;
    padding: 4px 0;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
  }
  .sm_btn--text:hover { color: var(--link-color-hover); }
  .sm_btn--text:hover .sm_btn__arrow { transform: translateX(3px); }

  /* =====================================================================
     Site header
     ===================================================================== */

  .sm_header {
    position: sticky;
    top: 0;
    z-index: 50;
    width: 100%;
    background: color-mix(in srgb, var(--body-bg-color) 82%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
  }
  .sm_header__inner {
    height: 72px;
    display: flex;
    align-items: center;
    gap: var(--space-l);
  }
  .sm_header__logo {
    display: inline-flex;
    align-items: center;
    margin-right: auto;
    text-decoration: none;
  }
  .sm_header__logo-img { height: 28px; width: auto; display: block; }
  .sm_header__logo-img--light { display: none; }
  [data-theme="dark"] .sm_header__logo-img--dark { display: none; }
  [data-theme="dark"] .sm_header__logo-img--light { display: block; }
  @media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]):not(.light) .sm_header__logo-img--dark { display: none; }
    html:not([data-theme="light"]):not(.light) .sm_header__logo-img--light { display: block; }
  }

  .sm_nav__toggle { display: none; }
  .sm_nav__burger { display: none; }

  .sm_nav__list {
    display: flex;
    align-items: center;
    gap: clamp(12px, 2vw, 32px);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .sm_nav__link {
    font: 500 var(--text-s)/1 var(--font-sans);
    color: var(--text-dark);
    text-decoration: none;
    padding: 8px 0;
    position: relative;
    transition: color var(--transition-duration) var(--transition-timing);
  }
  .sm_nav__link:hover,
  .sm_nav__link[aria-current="page"] { color: var(--link-color); }
  .sm_nav__link[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 1px;
    background: currentColor;
  }
  .sm_header__cta { margin-left: var(--space-s); }

  /* =====================================================================
     Theme toggle
     ===================================================================== */

  .sm_theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: transparent;
    border: 1px solid var(--border-color-dark, var(--light-grey));
    border-radius: 999px;
    cursor: pointer;
    color: var(--text-dark);
    padding: 0;
    flex-shrink: 0;
    transition: border-color var(--transition-duration) var(--transition-timing),
                background var(--transition-duration) var(--transition-timing),
                color var(--transition-duration) var(--transition-timing);
  }
  .sm_theme-toggle:hover {
    border-color: var(--text-dark);
    background: color-mix(in srgb, currentColor 6%, transparent);
  }
  .sm_theme-toggle__icon {
    width: 16px;
    height: 16px;
    display: block;
  }
  .sm_theme-toggle__icon--moon { display: none; }
  [data-theme="dark"] .sm_theme-toggle__icon--sun { display: none; }
  [data-theme="dark"] .sm_theme-toggle__icon--moon { display: block; }

  /* In dark mode, the dark-navy primary button blends into the page surface;
     invert it to white so it stays the prominent CTA. */
  [data-theme="dark"] .sm_btn--dark { background: var(--white); color: var(--base); border-color: var(--white); }
  [data-theme="dark"] .sm_btn--dark:hover { background: var(--neutral-ultra-light); color: var(--base); border-color: var(--neutral-light); }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]):not(.light) .sm_btn--dark { background: var(--white); color: var(--base); border-color: var(--white); }
    html:not([data-theme="light"]):not(.light) .sm_btn--dark:hover { background: var(--neutral-ultra-light); color: var(--base); border-color: var(--neutral-light); }
    html:not([data-theme="light"]):not(.light) .sm_theme-toggle__icon--sun { display: none; }
    html:not([data-theme="light"]):not(.light) .sm_theme-toggle__icon--moon { display: block; }
  }

  /* Mobile nav (CSS-only via :checked) */
  @media (max-width: 880px) {
    .sm_nav__burger {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px; height: 44px;
      background: transparent;
      border: 1px solid var(--light-grey);
      border-radius: var(--radius-md);
      cursor: pointer;
      margin-left: auto;
    }
    .sm_nav__burger-bars,
    .sm_nav__burger-bars::before,
    .sm_nav__burger-bars::after {
      content: "";
      display: block;
      width: 18px; height: 1.5px;
      background: currentColor;
      transition: transform var(--transition-duration) var(--transition-timing),
                  opacity var(--transition-duration) var(--transition-timing);
    }
    .sm_nav__burger-bars { position: relative; }
    .sm_nav__burger-bars::before { position: absolute; top: -6px; left: 0; }
    .sm_nav__burger-bars::after  { position: absolute; top:  6px; left: 0; }

    .sm_header__cta { display: none; }

    .sm_nav {
      position: fixed;
      inset: 72px 0 auto 0;
      background: var(--body-bg-color);
      border-bottom: 1px solid var(--light-grey);
      box-shadow: var(--shadow-2);
      padding: var(--space-l) var(--gutter);
      transform: translateY(-110%);
      transition: transform var(--transition-duration) var(--transition-timing);
    }
    .sm_nav__list {
      flex-direction: column;
      align-items: stretch;
      gap: var(--space-s);
    }
    .sm_nav__link {
      font-size: 18px;
      padding: 10px 0;
      border-bottom: 1px solid var(--light-grey);
    }
    .sm_nav__cta-mobile {
      margin-top: var(--space-s);
    }
    .sm_nav__toggle:checked ~ .sm_nav { transform: translateY(0); }
    .sm_nav__toggle:checked ~ label .sm_nav__burger-bars {
      background: transparent;
    }
    .sm_nav__toggle:checked ~ label .sm_nav__burger-bars::before {
      transform: translateY(6px) rotate(45deg);
    }
    .sm_nav__toggle:checked ~ label .sm_nav__burger-bars::after {
      transform: translateY(-6px) rotate(-45deg);
    }
  }
  @media (min-width: 881px) {
    .sm_nav__cta-mobile { display: none; }
  }

  /* =====================================================================
     Decorative split-shape pattern
     ===================================================================== */

  .sm_split-shape {
    position: absolute;
    pointer-events: none;
    aspect-ratio: 215.45 / 214.04;
    background-image: url("assets/icon-primary.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: 0.95;
  }
  .sm_split-shape--mono {
    background-image: none;
  }
  .sm_split-shape--mono .sm_split-shape__wedge {
    position: absolute;
    border-radius: 999px;
  }

  /* =====================================================================
     Hero
     ===================================================================== */

  .sm_hero__inner {
    display: grid;
    gap: var(--space-l);
    max-width: 980px;
    margin-inline: auto;
    text-align: center;
    position: relative;
    z-index: 2;
  }
  .sm_hero__inner--left {
    text-align: left;
    margin-inline: 0;
    max-width: none;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
  }
  @media (max-width: 880px) {
    .sm_hero__inner--left { grid-template-columns: 1fr; }
  }
  .sm_hero__actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: var(--space-s);
  }
  .sm_hero__inner--left .sm_hero__actions { justify-content: flex-start; }

  .sm_hero__bg-shape {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
  }
  .sm_hero__bg-shape .sm_split-shape {
    width: 60vw;
    max-width: 720px;
    min-width: 360px;
    right: -8vw;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.07;
  }
  .sm_hero__visual {
    position: relative;
    aspect-ratio: 5 / 6;
    background: var(--neutral-ultra-light);
    border-radius: var(--radius-xl);
    overflow: hidden;
    display: grid;
    place-items: center;
  }
  .sm_hero__visual .sm_split-shape {
    position: relative;
    width: 70%;
  }
  .sm_hero__visual .sm_placeholder-tag {
    position: absolute;
    bottom: 16px; left: 16px;
    font-size: 12px;
    color: var(--neutral-semi-dark);
    background: rgb(255 255 255 / 0.85);
    padding: 6px 10px;
    border-radius: 999px;
  }

  /* =====================================================================
     Eyebrowed section header
     ===================================================================== */

  .sm_section-head {
    display: grid;
    gap: var(--space-s);
    max-width: 780px;
    margin-bottom: var(--space-xl);
  }
  .sm_section-head--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    max-width: none;
    gap: var(--space-xl);
  }
  @media (max-width: 880px) {
    .sm_section-head--split { grid-template-columns: 1fr; }
  }

  /* =====================================================================
     Service cards grid
     ===================================================================== */

  .sm_grid {
    display: grid;
    gap: var(--space-m);
  }
  .sm_grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm_grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm_grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  @media (max-width: 1080px) {
    .sm_grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm_grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 640px) {
    .sm_grid--2, .sm_grid--3, .sm_grid--4 { grid-template-columns: 1fr; }
  }

  /* Flush grid — cards share borders, no centre gutter.
     Adjacent cards' 1px borders overlap via negative margins so the
     seam reads as a single hairline rather than a 2px doubled rule. */
  .sm_grid--flush {
    gap: 0;
  }
  .sm_grid--flush > .sm_card {
    margin-left: -1px;
    margin-top: -1px;
  }

  .sm_card {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    padding: var(--space-l);
    background: var(--card-background, var(--white));
    border: 1px solid var(--border-color-dark, var(--light-grey));
    border-radius: 0;
    transition: border-color var(--transition-duration) var(--transition-timing),
                transform var(--transition-duration) var(--transition-timing);
    color: var(--body-color);
  }
  .sm_card__number {
    font: 500 var(--text-xs)/1 var(--font-sans);
    letter-spacing: 0.14em;
    color: var(--text-dark-muted);
    text-transform: uppercase;
  }
  .sm_card__title {
    font: 500 clamp(22px, calc(22px + 6 * ((100vw - 360px) / 1006)), 28px) / 1.15 var(--font-sans);
    letter-spacing: -0.012em;
    color: var(--heading-color);
    margin: 0;
  }
  .sm_card__text {
    font-size: var(--text-m);
    line-height: 1.55;
    color: var(--text-dark-muted);
    margin: 0;
    flex: 1;
  }
  .sm_card__link {
    margin-top: var(--space-s);
    align-self: flex-start;
  }
  /* Card hover affordance.
     Default (light surfaces): border hovers to Simple Dark navy.
     Dark surfaces: border hovers to Simple Blue for brand contrast. */
  .sm_card--linked:hover,
  a.sm_work-card:hover { border-color: var(--text-dark); }
  .bg-dark .sm_card--linked:hover,
  .bg-dark a.sm_work-card:hover,
  .bg-ultra-dark .sm_card--linked:hover,
  .bg-ultra-dark a.sm_work-card:hover { border-color: var(--primary); }

  /* Inside dark contexts cards rebind their surface and border to stay
     readable without per-element overrides. */
  .bg-dark .sm_card,
  .bg-dark .sm_work-card,
  .bg-dark .sm_form,
  .bg-ultra-dark .sm_card,
  .bg-ultra-dark .sm_work-card,
  .bg-ultra-dark .sm_form,
  [data-theme="dark"] .sm_card,
  [data-theme="dark"] .sm_work-card,
  [data-theme="dark"] .sm_form {
    --card-background: var(--base-hover);
  }

  /* =====================================================================
     Service detail – problem/solution layout
     ===================================================================== */

  .sm_split {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(32px, 4vw, 80px);
  }
  @media (max-width: 880px) { .sm_split { grid-template-columns: 1fr; } }
  .sm_split__aside h2 { position: sticky; top: 96px; }

  /* =====================================================================
     Phase strip (Discovery → Build → Manage → Improve)
     ===================================================================== */

  .sm_phases {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--divider-color-dark, var(--light-grey));
    border-bottom: 1px solid var(--divider-color-dark, var(--light-grey));
  }
  @media (max-width: 880px) {
    .sm_phases { grid-template-columns: 1fr; }
  }
  .sm_phase {
    padding: var(--space-l);
    border-right: 1px solid var(--divider-color-dark, var(--light-grey));
    display: grid;
    gap: var(--space-s);
    align-content: start;
  }
  .sm_phase:last-child { border-right: 0; }
  @media (max-width: 880px) {
    .sm_phase { border-right: 0; border-bottom: 1px solid var(--divider-color-dark, var(--light-grey)); }
    .sm_phase:last-child { border-bottom: 0; }
  }
  .sm_phase__step {
    font: 500 var(--text-xs)/1 var(--font-sans);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--link-color);
  }
  .sm_phase__title {
    font: 500 clamp(22px, calc(22px + 6 * ((100vw - 360px) / 1006)), 28px)/1.15 var(--font-sans);
    color: var(--heading-color);
    margin: 0;
    letter-spacing: -0.012em;
  }
  .sm_phase__text {
    font-size: var(--text-s);
    line-height: 1.55;
    color: var(--text-dark-muted);
    margin: 0;
  }

  /* =====================================================================
     Proof list / client roster
     ===================================================================== */

  .sm_proof {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0;
    border-top: 1px solid var(--divider-color-dark, var(--light-grey));
  }
  .sm_proof__item {
    border-bottom: 1px solid var(--divider-color-dark, var(--light-grey));
    border-right: 1px solid var(--divider-color-dark, var(--light-grey));
    padding: var(--space-l) var(--space-m);
    display: grid;
    gap: 6px;
  }
  .sm_proof__item:nth-child(odd):last-child {
    grid-column: span 1;
  }
  .sm_proof__client {
    font: 500 clamp(18px, calc(18px + 4 * ((100vw - 360px) / 1006)), 22px)/1.2 var(--font-sans);
    letter-spacing: -0.01em;
    color: var(--heading-color);
    margin: 0;
  }
  .sm_proof__sector {
    font-size: var(--text-xs);
    color: var(--text-dark-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
  .sm_proof__text {
    margin-top: 8px;
    font-size: var(--text-s);
    color: var(--text-dark-muted);
    line-height: 1.5;
  }

  /* =====================================================================
     Scroll-reveal utility — quick fade + 14px upward slide
     ---------------------------------------------------------------------
     Elements opt in via the `sm-reveal` class (added by anim.js for the
     standard targets — section heads, cards, phases, proof, etc.). The
     IntersectionObserver flips `is-in-view` once they enter the viewport;
     above-the-fold elements get both classes in the same tick so they
     appear immediately without animating.
     ===================================================================== */

  .sm-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
  }
  .sm-reveal.is-in-view {
    opacity: 1;
    transform: translateY(0);
  }
  /* Light stagger for grouped children (cards in a grid, items in a head). */
  .sm-reveal[data-delay="1"] { transition-delay: 60ms; }
  .sm-reveal[data-delay="2"] { transition-delay: 120ms; }
  .sm-reveal[data-delay="3"] { transition-delay: 180ms; }
  .sm-reveal[data-delay="4"] { transition-delay: 240ms; }
  .sm-reveal[data-delay="5"] { transition-delay: 300ms; }

  /* ---------------------------------------------------------------------
     Hero variant — slower, more deliberate on-load entry.
     Larger Y travel (22px), longer duration (560ms), bigger stagger steps
     (140ms × index) so the eyebrow → headline → lede → buttons cadence
     reads as a staged title sequence instead of a flicker.
     --------------------------------------------------------------------- */
  .sm-reveal--hero {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 560ms cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 560ms cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
  }
  .sm-reveal--hero.is-in-view { opacity: 1; transform: translateY(0); }
  .sm-reveal--hero[data-delay="0"] { transition-delay:   0ms; }
  .sm-reveal--hero[data-delay="1"] { transition-delay: 140ms; }
  .sm-reveal--hero[data-delay="2"] { transition-delay: 280ms; }
  .sm-reveal--hero[data-delay="3"] { transition-delay: 420ms; }
  .sm-reveal--hero[data-delay="4"] { transition-delay: 560ms; }
  .sm-reveal--hero[data-delay="5"] { transition-delay: 700ms; }

  @media (prefers-reduced-motion: reduce) {
    .sm-reveal,
    .sm-reveal--hero { opacity: 1; transform: none; transition: none; }
  }

  /* =====================================================================
     Reel — scroll-pinned slideshow between Who we work with + What we do
     ===================================================================== */

  .sm_reel {
    position: relative;
    /* Reel sits below the surrounding sections in z-order so Who-we-work-with
       and What-we-do can letterbox it from above and below. */
    z-index: 0;
    /* Negative margins pull the reel BENEATH its siblings. Sticky positioning
       inside still works because the section's box height (track) is unchanged. */
    margin-block: clamp(-220px, -28vh, -140px);
    background: transparent;
  }
  /* Tall outer track defines the total scroll distance. The sticky frame
     stays pinned for the section's lifespan, while JS reads scroll
     progress against this height to drive scale + slide index. */
  .sm_reel__track {
    height: 320vh;
    position: relative;
  }
  .sm_reel__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: grid;
    place-items: center;
    overflow: hidden;
    /* Use the page bg so the reel reads as a continuation of the canvas
       once it's exposed; the frame inside carries all the visual weight. */
    background: var(--body-bg-color);
  }
  .sm_reel__frame {
    --sm-reel-scale: 1;
    position: relative;
    width: min(64vw, 1080px);
    aspect-ratio: 16 / 9;
    max-width: min(100vw, 2400px);
    background: var(--base);
    overflow: hidden;
    transform: scale(var(--sm-reel-scale));
    transform-origin: center center;
    will-change: transform;
  }
  .sm_reel__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    display: grid;
    place-items: center;
    /* snappy cuts, no fade */
  }
  .sm_reel__slide.is-active { opacity: 1; }
  .sm_reel__slide--photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .sm_reel__slide--brand img {
    width: clamp(120px, 35%, 380px);
    height: auto;
    object-fit: contain;
    display: block;
  }

  /* Caption / chrome ribbon above the reel — gives it a name. */
  .sm_reel__chrome {
    position: absolute;
    top: var(--space-l);
    left: var(--space-l);
    right: var(--space-l);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
    color: rgb(255 255 255 / 0.78);
    font: 500 var(--text-xs)/1 var(--font-sans);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    pointer-events: none;
  }
  .sm_reel__counter {
    font-variant-numeric: tabular-nums;
  }

  /* Reduced-motion fallback: no pinning, no scaling — show one still. */
  @media (prefers-reduced-motion: reduce) {
    .sm_reel        { margin-block: 0; }
    .sm_reel__track { height: auto; }
    .sm_reel__sticky { position: relative; height: auto; aspect-ratio: 16/9; }
    .sm_reel__frame  { transform: none !important; width: 100%; max-width: none; }
  }

  /* Sections adjacent to the reel sit ABOVE it in z-order so they appear
     to letterbox the reel as it scrolls into and out of view. */
  section[aria-labelledby="who-title"],
  section[aria-labelledby="services-title"] {
    position: relative;
    z-index: 2;
  }

  /* =====================================================================
     Work tile — hover-driven media slideshow (Selected work section)
     ===================================================================== */

  .sm_work-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--divider-color-dark, var(--light-grey));
  }
  @media (max-width: 1080px) { .sm_work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 640px)  { .sm_work-grid { grid-template-columns: 1fr; } }

  /* Large 2x2 variant: square cards, more presence. Used by v1. */
  .sm_work-grid--large { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm_work-grid--large .sm_work-tile { aspect-ratio: 1 / 1; }
  @media (max-width: 1080px) { .sm_work-grid--large { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 640px)  { .sm_work-grid--large { grid-template-columns: 1fr; } .sm_work-grid--large .sm_work-tile { aspect-ratio: 4 / 3; } }

  .sm_work-tile {
    position: relative;
    isolation: isolate;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-right: 1px solid var(--divider-color-dark, var(--light-grey));
    border-bottom: 1px solid var(--divider-color-dark, var(--light-grey));
    background: transparent;
    color: inherit;
    text-decoration: none;
    transition: background var(--transition-duration) var(--transition-timing);
  }
  .sm_work-tile:last-child { border-right: 0; }
  @media (max-width: 1080px) {
    .sm_work-tile:nth-child(2n) { border-right: 0; }
    .sm_work-tile:last-child    { border-right: 0; }
  }
  @media (max-width: 640px) {
    .sm_work-tile { border-right: 0; aspect-ratio: 5 / 4; }
  }

  .sm_work-tile__content {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: var(--space-l);
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    transition: opacity var(--transition-duration) var(--transition-timing);
  }
  .sm_work-tile__sector {
    font: 500 11px/1 var(--font-sans);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 0.82);
    transition: color var(--transition-duration) var(--transition-timing);
  }
  .sm_work-tile__title {
    font: 500 clamp(20px, calc(20px + 8 * ((100vw - 360px) / 1006)), 28px)/1.15 var(--font-sans);
    letter-spacing: -0.012em;
    color: var(--white);
    margin: 0;
    transition: color var(--transition-duration) var(--transition-timing),
                font-size var(--transition-duration) var(--transition-timing);
  }
  .sm_work-tile__text {
    font-size: var(--text-s);
    line-height: 1.55;
    color: rgb(255 255 255 / 0.82);
    margin: auto 0 0;
    max-width: 32ch;
    transition: color var(--transition-duration) var(--transition-timing),
                font-size var(--transition-duration) var(--transition-timing);
  }
  .sm_work-tile__cta {
    margin-top: var(--space-m);
    font: 500 var(--text-s)/1 var(--font-sans);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity var(--transition-duration) var(--transition-timing),
                transform var(--transition-duration) var(--transition-timing),
                color var(--transition-duration) var(--transition-timing);
  }
  .sm_work-tile:hover .sm_work-tile__cta { opacity: 1; transform: translateY(0); }

  /* Slideshow stack — case study imagery always visible behind a dark
     navy scrim. JS toggles `is-active` to flick between slides on hover. */
  .sm_work-tile__slideshow {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: var(--base);
  }
  /* Dedicated overlay element — ::after pseudo-elements aren't reliably
     captured by html-to-image snapshots, so render the scrim as a real
     DOM node. */
  .sm_work-tile__overlay {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--base) 80%, transparent);
    z-index: 2;
    pointer-events: none;
    transition: opacity var(--transition-duration) var(--transition-timing);
  }
  .sm_work-tile__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    z-index: 1;
    /* snappy — no fade between slides */
  }
  .sm_work-tile__slide.is-active { opacity: 1; }

  /* ----- Variant A — hover scales content to bottom-left over slideshow ----- */
  .sm_work-tile--replace .sm_work-tile__content {
    inset: 0;
    background: transparent;
    transition:
      inset 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),
      background 0.28s ease 0.06s,
      padding 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .sm_work-tile--replace:hover .sm_work-tile__overlay {
    opacity: 0.35;  /* let the gallery breathe through */
  }
  .sm_work-tile--replace:hover .sm_work-tile__content {
    /* Shrink to a compact box anchored bottom-left, opaque so text reads. */
    inset: auto 38% 0 0;
    background: var(--body-bg-color);
    padding: var(--space-m);
  }
  .sm_work-tile--replace:hover .sm_work-tile__sector { color: var(--text-dark-muted); }
  .sm_work-tile--replace:hover .sm_work-tile__title  { color: var(--heading-color); font-size: clamp(16px, calc(16px + 4 * ((100vw - 360px) / 1006)), 20px); }
  .sm_work-tile--replace:hover .sm_work-tile__text   { display: none; }
  .sm_work-tile--replace:hover .sm_work-tile__cta    { color: var(--link-color); }
  .sm_work-tile--replace .sm_work-tile__badge { display: none; }

  /* ----- Variant B — slideshow plays UNDER persistent text content ----- */
  /* Scrim already provided by .sm_work-tile__slideshow::after —
     text stays white and visible on top throughout, except the excerpt
     which collapses on hover so the imagery has room to read. */
  .sm_work-tile--persist:hover .sm_work-tile__text { display: none; }

  .sm_work {
    display: grid;
    gap: var(--space-l);
  }
  .sm_work-card {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--space-l);
    padding: var(--space-l);
    border: 1px solid var(--border-color-dark, var(--light-grey));
    border-radius: 0;
    background: var(--card-background, var(--white));
    align-items: center;
  }
  @media (max-width: 880px) {
    .sm_work-card { grid-template-columns: 1fr; }
  }
  .sm_work-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--neutral-ultra-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: grid;
    place-items: center;
  }
  .sm_work-card__media .sm_split-shape {
    position: relative;
    width: 55%;
    opacity: 0.9;
  }
  .sm_work-card__sector {
    font: 500 var(--text-xs)/1 var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-dark-muted);
  }
  .sm_work-card__title {
    font: 500 clamp(24px, calc(24px + 12 * ((100vw - 360px) / 1006)), 40px)/1.1 var(--font-sans);
    letter-spacing: -0.018em;
    color: var(--heading-color);
    margin: 12px 0 var(--space-s);
  }
  .sm_work-card__text {
    font-size: var(--text-m);
    line-height: 1.6;
    color: var(--text-dark-muted);
    margin: 0 0 var(--space-m);
    max-width: 48ch;
  }
  .sm_work-card--reversed .sm_work-card__media { order: 2; }
  @media (max-width: 880px) {
    .sm_work-card--reversed .sm_work-card__media { order: 0; }
  }

  /* =====================================================================
     Team
     ===================================================================== */

  .sm_team__card {
    display: grid;
    gap: var(--space-s);
  }
  .sm_team__avatar {
    aspect-ratio: 4 / 5;
    background: var(--neutral-ultra-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: grid;
    place-items: center;
  }
  .sm_team__avatar .sm_split-shape {
    position: relative;
    width: 50%;
    opacity: 0.6;
  }
  .sm_team__name {
    font: 500 var(--h4)/1.2 var(--font-sans);
    letter-spacing: -0.012em;
    color: var(--heading-color);
    margin: var(--space-s) 0 0;
  }
  .sm_team__role {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--link-color);
    margin: 4px 0 0;
  }
  .sm_team__bio {
    font-size: var(--text-s);
    line-height: 1.55;
    color: var(--text-dark-muted);
    margin: 8px 0 0;
  }

  /* =====================================================================
     Article cards / thinking index
     ===================================================================== */

  .sm_article-list {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--border-color-dark, var(--light-grey));
  }
  .sm_article-row {
    display: grid;
    grid-template-columns: minmax(0, 0.25fr) minmax(0, 0.55fr) minmax(0, 0.2fr);
    gap: var(--space-l);
    align-items: baseline;
    padding: var(--space-l) 0;
    border-bottom: 1px solid var(--border-color-dark, var(--light-grey));
    text-decoration: none;
    color: inherit;
    transition: padding var(--transition-duration) var(--transition-timing);
  }
  .sm_article-row:hover { padding-inline: 8px; }
  @media (max-width: 880px) {
    .sm_article-row { grid-template-columns: 1fr; gap: 8px; }
  }
  .sm_article-row__meta {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-dark-muted);
  }
  .sm_article-row__title {
    font: 500 clamp(22px, calc(22px + 8 * ((100vw - 360px) / 1006)), 30px)/1.2 var(--font-sans);
    letter-spacing: -0.012em;
    color: var(--heading-color);
    margin: 0 0 6px;
  }
  .sm_article-row__excerpt {
    font-size: var(--text-s);
    line-height: 1.5;
    color: var(--text-dark-muted);
    margin: 0;
  }
  .sm_article-row__arrow {
    text-align: right;
    font-size: 22px;
    color: var(--text-dark-muted);
    transition: transform var(--transition-duration) var(--transition-timing),
                color var(--transition-duration) var(--transition-timing);
  }
  .sm_article-row:hover .sm_article-row__arrow {
    transform: translateX(6px);
    color: var(--link-color);
  }
  @media (max-width: 880px) { .sm_article-row__arrow { display: none; } }

  /* Featured article (homepage) */
  .sm_featured {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-l);
    align-items: center;
  }
  @media (max-width: 880px) { .sm_featured { grid-template-columns: 1fr; } }
  .sm_featured__media {
    aspect-ratio: 5 / 4;
    background: var(--neutral-ultra-light);
    border-radius: var(--radius-lg);
    display: grid;
    place-items: center;
    overflow: hidden;
  }
  .sm_featured__media .sm_split-shape {
    position: relative;
    width: 55%;
  }

  /* =====================================================================
     Forms (contact)
     ===================================================================== */

  .sm_form {
    display: grid;
    gap: var(--space-m);
    background: var(--card-background, var(--white));
    border: 1px solid var(--border-color-dark, var(--light-grey));
    border-radius: 0;
    padding: clamp(24px, 3vw, 40px);
  }
  .sm_form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-m);
  }
  @media (max-width: 640px) { .sm_form__row { grid-template-columns: 1fr; } }
  .sm_form__field { display: grid; gap: 8px; }
  .sm_form__field--full { grid-column: 1 / -1; }
  .sm_form__label {
    font: 500 var(--text-xs)/1.2 var(--font-sans);
    letter-spacing: 0.04em;
    color: var(--text-dark);
  }
  .sm_form__label-hint {
    color: var(--text-dark-muted);
    font-weight: 400;
    letter-spacing: 0;
  }
  .sm_form__input,
  .sm_form__textarea,
  .sm_form__select {
    font: 400 var(--text-m)/1.4 var(--font-sans);
    color: var(--text-dark);
    background: var(--body-bg-color);
    border: 1px solid var(--border-color-dark, var(--light-grey));
    border-radius: var(--radius-md);
    padding: 14px 16px;
    outline: none;
    transition: border-color var(--transition-duration) var(--transition-timing),
                box-shadow var(--transition-duration) var(--transition-timing);
    width: 100%;
  }
  .sm_form__textarea { min-height: 140px; resize: vertical; font-family: inherit; }
  .sm_form__select {
    appearance: none;
    background-image:
      linear-gradient(45deg, transparent 50%, currentColor 50%),
      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 44px;
  }
  .sm_form__input:focus,
  .sm_form__textarea:focus,
  .sm_form__select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
  }
  .sm_form__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
    padding-top: var(--space-s);
    border-top: 1px solid var(--border-color-dark, var(--light-grey));
    margin-top: var(--space-s);
  }
  .sm_form__legal {
    font-size: var(--text-xs);
    color: var(--text-dark-muted);
    max-width: 38ch;
  }

  /* =====================================================================
     Accordion (CSS-only via :checked) — used on How We Work
     ===================================================================== */

  .sm_acc { border-top: 1px solid var(--border-color-dark, var(--light-grey)); }
  .sm_acc__toggle { position: absolute; opacity: 0; pointer-events: none; }
  .sm_acc__item   { border-bottom: 1px solid var(--border-color-dark, var(--light-grey)); }
  .sm_acc__label  {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-m);
    align-items: center;
    padding: var(--space-l) 0;
    cursor: pointer;
  }
  .sm_acc__label-title {
    font: 500 clamp(20px, calc(20px + 6 * ((100vw - 360px) / 1006)), 26px)/1.2 var(--font-sans);
    letter-spacing: -0.012em;
    color: var(--heading-color);
  }
  .sm_acc__icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border-color-dark, var(--light-grey));
    display: grid; place-items: center;
    color: var(--text-dark);
    transition: transform var(--transition-duration) var(--transition-timing),
                background var(--transition-duration) var(--transition-timing);
    font-size: 18px;
    line-height: 0;
  }
  .sm_acc__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--transition-duration) var(--transition-timing);
  }
  .sm_acc__panel-inner {
    overflow: hidden;
    padding-bottom: 0;
  }
  .sm_acc__toggle:checked + .sm_acc__label .sm_acc__icon {
    transform: rotate(45deg);
    background: var(--text-dark);
    color: var(--body-bg-color);
  }
  .sm_acc__toggle:checked ~ .sm_acc__panel {
    grid-template-rows: 1fr;
  }
  .sm_acc__toggle:checked ~ .sm_acc__panel .sm_acc__panel-inner {
    padding-bottom: var(--space-l);
  }

  /* =====================================================================
     Breadcrumb
     ===================================================================== */
  .sm_breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-dark-muted);
    margin: 0 0 var(--space-s);
    line-height: 1;
  }
  .sm_breadcrumb a {
    color: inherit;
    text-decoration: none;
  }
  .sm_breadcrumb a:hover { color: var(--link-color); }
  .sm_breadcrumb__sep { opacity: 0.45; }

  /* =====================================================================
     CTA close (every page ends with one)
     ===================================================================== */

  .sm_close {
    text-align: center;
    display: grid;
    gap: var(--space-m);
    justify-items: center;
    max-width: 720px;
    margin-inline: auto;
  }
  .sm_close__title {
    font: 500 clamp(40px, calc(40px + 40 * ((100vw - 360px) / 1006)), 80px)/0.98 var(--font-sans);
    letter-spacing: -0.025em;
    margin: 0;
    color: var(--heading-color);
  }
  .sm_close__sub {
    font-size: clamp(16px, calc(16px + 4 * ((100vw - 360px) / 1006)), 20px);
    line-height: 1.55;
    max-width: 56ch;
    color: var(--text-dark-muted);
  }

  /* =====================================================================
     Footer
     ===================================================================== */

  /* Footer rebinds itself to the dark surface context so its children
     pick up the right foreground via the same tokens (--text-dark,
     --heading-color, --link-color) the rest of the system uses. */
  .sm_footer {
    background: var(--bg-dark);
    color: var(--bg-dark-text);
    color-scheme: dark;
    --text-dark:        var(--bg-dark-text);
    --text-dark-muted:  color-mix(in srgb, var(--bg-dark-text) 80%, transparent);
    --heading-color:    var(--bg-dark-heading);
    --link-color:       var(--bg-dark-text);
    --link-color-hover: var(--white);
    --border-color-dark: color-mix(in srgb, var(--bg-dark-text) 14%, transparent);
    --divider-color-dark: color-mix(in srgb, var(--bg-dark-text) 14%, transparent);
    padding: clamp(48px, 6vw, 96px) 0 32px;
    border-top: 1px solid var(--border-color-dark);
  }
  .sm_footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr));
    gap: var(--space-xl);
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid var(--divider-color-dark);
  }
  @media (max-width: 880px) {
    .sm_footer__grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 520px) {
    .sm_footer__grid { grid-template-columns: 1fr; }
  }
  .sm_footer__brand img { height: 32px; }
  .sm_footer__tag {
    margin-top: var(--space-m);
    font-size: var(--text-s);
    line-height: 1.5;
    max-width: 32ch;
    color: var(--text-dark-muted);
  }
  .sm_footer__col-title {
    font: 500 var(--text-xs)/1 var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--heading-color);
    margin: 0 0 var(--space-s);
  }
  .sm_footer__list {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    gap: 10px;
  }
  .sm_footer__list a {
    color: var(--text-dark-muted);
    text-decoration: none;
    font-size: var(--text-s);
  }
  .sm_footer__list a:hover { color: var(--text-dark); }
  .sm_footer__base {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-s);
    padding-top: var(--space-l);
    font-size: var(--text-xs);
    color: var(--text-dark-muted);
  }
  .sm_footer__legal-links {
    display: flex; gap: var(--space-m); list-style: none; margin: 0; padding: 0;
  }
  .sm_footer__legal-links a { color: var(--text-dark-muted); text-decoration: none; }
  .sm_footer__legal-links a:hover { color: var(--text-dark); }

  /* =====================================================================
     Prototype review bar (sits above the site)
     ===================================================================== */

  .sm_review-bar {
    background: var(--base-ultra-dark);
    color: rgb(255 255 255 / 0.75);
    font: 500 12px/1 var(--font-sans);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 10px 0;
    border-bottom: 1px solid rgb(255 255 255 / 0.06);
  }
  .sm_review-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
    flex-wrap: wrap;
  }
  .sm_review-bar__page strong { color: var(--white); font-weight: 600; margin-left: 8px; }
  .sm_review-bar__variants {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  }
  .sm_review-bar__variants a {
    color: rgb(255 255 255 / 0.6);
    text-decoration: none;
    padding: 6px 10px;
    border: 1px solid rgb(255 255 255 / 0.15);
    border-radius: var(--radius-md);
    transition: background var(--transition-duration) var(--transition-timing),
                color var(--transition-duration) var(--transition-timing),
                border-color var(--transition-duration) var(--transition-timing);
  }
  .sm_review-bar__variants a:hover { color: var(--white); border-color: rgb(255 255 255 / 0.4); }
  .sm_review-bar__variants a[aria-current="page"] {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
  }
  @media (max-width: 640px) {
    .sm_review-bar { font-size: 11px; }
  }