/* =========================================================================
   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_nav__drop-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-m);
    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 {
    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%;
    /* Register as a container so child layouts can query available width
       rather than viewport width — container-query-first approach. */
    container-type: inline-size;
    container-name: sm-block;
  }

  /* Section rhythm — uses ACSS-compatible tokens defined in colors_and_type.css.
     Per-section overrides (tighter/looser end padding) go as inline styles on the element. */
  .sm_section        { position: relative; padding-block: var(--section-padding-m); }
  .sm_section--tight { padding-block: var(--section-padding-s); }
  .sm_section--hero  {
    padding-block:     var(--section-padding-l);
    /* Generous bottom gap — must exceed the reel's top negative margin */
    padding-block-end: clamp(220px, 22vw, 360px);
  }

  /* 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-m);
    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); }

  /* Size variants — override padding and font-size only; colour modifiers still apply */
  .sm_btn--sm {
    font-size: 13px;
    padding: 10px 16px;
    gap: 7px;
  }
  .sm_btn--lg {
    font-size: 17px;
    padding: 18px 30px;
    gap: 12px;
    border-radius: var(--radius-lg);
  }

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

  /* Base state — full-width, locked in with hero */
  .sm_header {
    position: sticky;
    top: 0;
    z-index: 50;
    pointer-events: none; /* transparent areas stay click-through */
    padding-top: 0;
    padding-inline: 0;
    transition:
      padding-top    0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
      padding-inline 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .sm_header__inner {
    pointer-events: auto;
    height: 72px;
    display: flex;
    align-items: center;
    gap: clamp(8px, 1.5vw, 20px);
    padding-inline: 0;
    background: color-mix(in srgb, var(--body-bg-color) 82%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid transparent;
    border-radius: 0;
    box-shadow: none;
    transition:
      height         0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
      border-radius  0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
      padding-inline 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
      border-color   0.4s ease,
      box-shadow     0.4s ease,
      background     0.4s ease;
  }

  /* Scrolled state — morphs to floating pill */
  .sm_header.is-scrolled {
    padding-top: 16px;
    padding-inline: clamp(12px, 2.5vw, 32px);
    pointer-events: none;
  }
  .sm_header.is-scrolled .sm_header__inner {
    pointer-events: auto;
    height: 56px;
    padding-inline: clamp(16px, 2vw, 24px);
    background: color-mix(in srgb, var(--body-bg-color) 90%, transparent);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-color: color-mix(in srgb, var(--text-dark) 10%, transparent);
    border-radius: var(--radius-m);
    box-shadow: 0 2px 20px rgb(0 0 0 / 0.07), 0 1px 3px rgb(0 0 0 / 0.05);
  }
  .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; }
  }

  /* Hamburger button — hidden by default, shown at mobile breakpoint */
  .sm_nav__burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    background: transparent;
    border: 1px solid var(--border-color-dark, var(--light-grey));
    border-radius: var(--radius-m);
    cursor: pointer;
    color: var(--text-dark);
    flex-shrink: 0;
    transition: border-color var(--transition-duration) var(--transition-timing),
                background var(--transition-duration) var(--transition-timing);
  }
  .sm_nav__burger:hover {
    border-color: color-mix(in srgb, currentColor 55%, transparent);
    background: color-mix(in srgb, currentColor 5%, transparent);
  }
  .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; }

  /* Collapse desktop nav + CTA to drawer at 1024px */
  @media (max-width: 1024px) {
    .sm_nav         { display: none; }
    .sm_header__cta { display: none; }
    .sm_nav__burger { display: inline-flex; }
  }

  /* =====================================================================
     Drawer — full-height slide-in from right (mobile / tablet nav)
     ===================================================================== */

  .sm_drawer {
    position: fixed;
    inset: 0;
    z-index: 100;
    pointer-events: none;
    visibility: hidden;
  }
  .sm_drawer.is-open {
    pointer-events: auto;
    visibility: visible;
  }

  /* Backdrop overlay */
  .sm_drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 0.55);
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .sm_drawer.is-open .sm_drawer__backdrop { opacity: 1; }

  /* Sliding panel */
  .sm_drawer__panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(380px, 92vw);
    /* Always dark-surface regardless of page theme */
    background: var(--base);
    color-scheme: dark;
    --text-dark:        var(--text-light);
    --text-dark-muted:  color-mix(in srgb, var(--text-light) 60%, transparent);
    --heading-color:    var(--text-light);
    --border-color-dark: color-mix(in srgb, var(--text-light) 12%, transparent);
    color: var(--text-light);
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden; /* nav scrolls internally — head + footer always visible */
  }
  .sm_drawer.is-open .sm_drawer__panel { transform: translateX(0); }

  /* Drawer head — logo + close */
  .sm_drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-l);
    height: 72px;
    border-bottom: 1px solid var(--border-color-dark);
    flex-shrink: 0;
  }
  .sm_drawer__logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none !important;
    border-bottom: none;
    outline-offset: 4px;
  }

  .sm_drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    background: transparent;
    border: 1px solid var(--border-color-dark);
    border-radius: var(--radius-m);
    color: var(--text-dark);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--transition-duration) var(--transition-timing),
                border-color var(--transition-duration) var(--transition-timing);
  }
  .sm_drawer__close:hover {
    background: color-mix(in srgb, currentColor 10%, transparent);
    border-color: color-mix(in srgb, currentColor 40%, transparent);
  }

  /* Nav list — scrolls internally so footer stays anchored */
  .sm_drawer__nav {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-s) 0;
  }
  .sm_drawer__list {
    list-style: none;
    margin: 0; padding: 0;
  }
  .sm_drawer__item {
    border-bottom: 1px solid var(--border-color-dark);
  }
  .sm_drawer__item:first-child { border-top: 1px solid var(--border-color-dark); }

  .sm_drawer__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 18px var(--space-l);
    font: 500 clamp(17px, 2.5vw, 20px)/1.2 var(--font-sans);
    letter-spacing: -0.01em;
    color: var(--text-dark);
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: color var(--transition-duration) var(--transition-timing),
                background var(--transition-duration) var(--transition-timing);
  }
  .sm_drawer__link:hover { color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, transparent); }
  .sm_drawer__link[aria-current="page"] { color: var(--primary); }

  /* Chevron — rotates when sub-menu opens */
  .sm_drawer__chevron {
    flex-shrink: 0;
    color: var(--text-dark-muted);
    transition: transform 0.22s ease;
  }
  .sm_drawer__item--has-sub.is-open .sm_drawer__chevron { transform: rotate(90deg); }
  .sm_drawer__item--has-sub.is-open > .sm_drawer__link { color: var(--primary); }

  /* Sub-menu accordion */
  .sm_drawer__sub {
    list-style: none;
    margin: 0; padding: 0;
    max-height: 0;
    overflow: hidden;
    background: color-mix(in srgb, var(--white) 4%, transparent);
    transition: max-height 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .sm_drawer__item--has-sub.is-open .sm_drawer__sub { max-height: 360px; }

  .sm_drawer__sub-link {
    display: block;
    padding: 14px var(--space-l) 14px calc(var(--space-l) + 20px);
    font: 400 var(--text-m)/1.2 var(--font-sans);
    color: var(--text-dark-muted);
    text-decoration: none;
    border-bottom: 1px solid var(--border-color-dark);
    transition: color var(--transition-duration) var(--transition-timing);
  }
  .sm_drawer__sub li:last-child .sm_drawer__sub-link { border-bottom: none; }
  .sm_drawer__sub-link:hover { color: var(--text-dark); }
  .sm_drawer__sub-link[aria-current="page"] { color: var(--primary); }

  /* CTA footer */
  .sm_drawer__footer {
    padding: var(--space-l);
    border-top: 1px solid var(--border-color-dark);
    flex-shrink: 0;
  }
  .sm_drawer__footer .sm_btn {
    width: 100%;
    justify-content: center;
  }

  .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;
    /* reset for when used as <button> */
    background: none;
    border: none;
    cursor: pointer;
    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 { flex-shrink: 0; }

  /* =====================================================================
     Desktop nav — Services dropdown
     ===================================================================== */

  .sm_nav__item--has-drop { position: relative; }

  /* Parent trigger — flex to align chevron */
  .sm_nav__link--parent {
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  .sm_nav__drop-chevron {
    flex-shrink: 0;
    color: var(--text-dark-muted);
    transition: transform 0.18s ease, color 0.18s ease;
  }
  .sm_nav__item--has-drop.is-open .sm_nav__drop-chevron,
  .sm_nav__link--parent:hover .sm_nav__drop-chevron { color: var(--primary); }
  .sm_nav__item--has-drop.is-open .sm_nav__drop-chevron { transform: rotate(180deg); }

  /* Dropdown panel
     Padding-top bridges the gap so moving mouse into the panel
     doesn't briefly leave the li and trigger close. */
  .sm_nav__dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 10px;
    z-index: 20;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0s linear 0.15s;
  }
  .sm_nav__item--has-drop.is-open .sm_nav__dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.15s ease;
  }

  /* Inner card — the visible panel */
  .sm_nav__dropdown__card {
    min-width: 210px;
    background: color-mix(in srgb, var(--body-bg-color) 96%, transparent);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid color-mix(in srgb, var(--text-dark) 10%, transparent);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 40px rgb(0 0 0 / 0.10), 0 2px 8px rgb(0 0 0 / 0.06);
    padding: 6px;
    /* Slide up into view */
    transform: translateY(-6px);
    transition: transform 0.15s ease;
  }
  .sm_nav__item--has-drop.is-open .sm_nav__dropdown__card {
    transform: translateY(0);
  }

  .sm_nav__drop-link {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    font: 500 var(--text-s)/1.2 var(--font-sans);
    color: var(--text-dark);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.1s ease, color 0.1s ease;
  }
  .sm_nav__drop-link:hover {
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    color: var(--primary);
  }
  /* Services overview — muted label row */
  .sm_nav__drop-link--overview {
    font-size: var(--text-xs);
    color: var(--text-dark-muted);
    padding-bottom: 12px;
    margin-bottom: 2px;
  }
  .sm_nav__drop-link--overview:hover {
    background: transparent;
    color: var(--text-dark);
  }

  /* =====================================================================
     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; }
  }


  /* =====================================================================
     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);
  }
  @container sm-block (width < 640px) {
    .sm_section-head--split { grid-template-columns: 1fr; }
  }

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

  .sm_grid {
    display: grid;
    gap: var(--space-m);
    /* Reset <ul> defaults when used as a semantic list container */
    list-style: none;
    padding: 0;
    margin: 0;
  }
  /* When the grid uses <li> wrappers, make each cell a flex column so that
     sm_card { height: 100% } resolves against a definite height (the flex
     container's height = grid track height) instead of creating a circular
     dependency in an auto-sized grid track, which inflates card height. */
  .sm_grid > li {
    display: flex;
    flex-direction: column;
  }
  .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)); }
  @container sm-block (width < 800px) {
    .sm_grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm_grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @container sm-block (width < 480px) {
    .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;
  }
  /* Handle both: bare sm_card as direct child, and li > sm_card.
     margin-left: -1px collapses side-border seams to a single hairline.
     margin-top is intentionally omitted — negative top margin shifts the
     card up inside its grid cell, which causes the <li> to clip card
     content that extends into the overlap zone. The top hairline seam
     reads fine at 1px without the extra collapse. */
  .sm_grid--flush > .sm_card,
  .sm_grid--flush > li > .sm_card {
    margin-left: -1px;
  }

  .sm_card {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    padding: var(--space-l);
    height: 100%; /* fills its containing cell (flex <li> or direct grid item) */
    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);
  }

  /* CTA card — primary blue surface, white text, white button.
     Used as the final card in service offering grids. */
  .sm_card--cta {
    background: var(--primary);
    border-color: var(--primary);
    justify-content: center;
  }
  .sm_card--cta .sm_card__title { color: var(--white); }
  .sm_card--cta .sm_card__text  { color: rgb(255 255 255 / 0.82); }
  .sm_card--cta .sm_btn--primary {
    background: var(--white);
    color: var(--primary);
    border-color: var(--white);
  }
  .sm_card--cta .sm_btn--primary:hover {
    background: var(--neutral-ultra-light);
    color: var(--primary-hover);
    border-color: var(--neutral-light);
  }

  /* =====================================================================
     Card grid — row-end corner accents
     First card of each row → large border-top-left-radius    (top-left)
     Last card of each row  → large border-bottom-right-radius (bottom-right)
     Mirrors the Simple Media logo icon corner style.

     Strategy: set --cell-tl / --cell-br on the grid cell (any direct child,
     whether a bare card, an <li> wrapper, or anything else). Cards inherit
     the custom property and apply it — works for all HTML structures.
     Selectors recalculate per column count at each container breakpoint.
     ===================================================================== */

  /* Cards consume the inherited custom properties (default 0 = no accent) */
  .sm_card,
  .sm_team__card {
    border-top-left-radius:    var(--cell-tl, 0);
    border-bottom-right-radius: var(--cell-br, 0);
  }

  /* Corner accents: only the overall first and last cell of the grid get
     accent radii — making the grid read as a cohesive unit with logo-style
     corners rather than every row having its own corners.
     :first-child / :last-child work regardless of column count or reflow. */
  .sm_grid--2 > *:first-child,
  .sm_grid--3 > *:first-child,
  .sm_grid--4 > *:first-child { --cell-tl: var(--radius-2xl); }

  .sm_grid--2 > *:last-child,
  .sm_grid--3 > *:last-child,
  .sm_grid--4 > *:last-child  { --cell-br: var(--radius-2xl); }

  /* Remove at single-column breakpoint where asymmetric corners look odd */
  @container sm-block (width < 480px) {
    .sm_grid--2 > *,
    .sm_grid--3 > *,
    .sm_grid--4 > * { --cell-tl: 0; --cell-br: 0; }
  }

  /* Opt-out: square corners on all cells regardless of column count.
     !important beats the nth-child specificity inside container queries. */
  .sm_grid--square > * { --cell-tl: 0 !important; --cell-br: 0 !important; }

  /* =====================================================================
     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);
  }
  @container sm-block (width < 640px) { .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));
  }
  .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; }
  @container sm-block (width < 640px) {
    .sm_phases { grid-template-columns: 1fr; }
    .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
     Used on index.html after the "Who we work with" section.
     ===================================================================== */

  .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));
    border-left: 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;
    z-index: 0;
    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-width: min(64vw, 1080px);
    position: relative;
    width: var(--sm-reel-width);
    aspect-ratio: 16 / 9;
    max-width: min(100vw, 2400px);
    background: var(--base);
    overflow: hidden;
    /* Width-based expansion keeps images rendering at true display size —
       no compositor upscale, no blur. */
    will-change: width;
  }
  .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  { --sm-reel-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));
  }
  @container sm-block (width < 800px) { .sm_work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @container sm-block (width < 480px) { .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; }
  /* --large stays 2-col until narrow — no 800px breakpoint needed */
  @container sm-block (width < 480px) {
    .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:hover { border-color: var(--divider-color-dark, var(--light-grey)); }
  .sm_work-tile:last-child { border-right: 0; }
  /* 2-col: strip right border from every 2nd tile */
  @container sm-block (width < 800px) {
    .sm_work-tile:nth-child(2n) { border-right: 0; }
  }
  /* 1-col: strip all right borders, loosen aspect ratio */
  @container sm-block (width < 480px) {
    .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;
  }
  @container sm-block (width < 640px) {
    .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-m);
    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; }
  @container sm-block (width < 640px) {
    .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-m);
    overflow: hidden;
    display: grid;
    place-items: center;
  }
  .sm_team__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
  }
  .sm_team__avatar .sm_split-shape {
    position: relative;
    width: 50%;
    opacity: 0.6;
  }
  /* About page hero — text left / group photo right */
  .sm_about-hero {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--space-xl);
    align-items: stretch;
  }
  .sm_about-hero__photo {
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 400px;
  }
  .sm_about-hero__photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
  }
  @container sm-block (width < 700px) {
    .sm_about-hero { grid-template-columns: 1fr; }
    .sm_about-hero__photo { min-height: 320px; max-width: 400px; }
  }
  .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));
    container-type: inline-size;
    container-name: sm-article-list;
  }
  .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; }
  @container sm-article-list (width < 640px) {
    .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);
  }
  @container sm-article-list (width < 640px) { .sm_article-row__arrow { display: none; } }

  /* =====================================================================
     Author / byline module (article pages)
     ===================================================================== */
  .sm_author {
    border-top: 1px solid var(--border-color-dark, var(--light-grey));
  }
  .sm_author__avatar {
    background: var(--neutral-ultra-light);
  }
  .sm_author__name {
    color: var(--text-dark);
  }
  .sm_author__meta {
    color: var(--text-dark-muted);
  }
  /* Avatar background needs an explicit dark-mode override because
     --neutral-ultra-light is a fixed near-white value that doesn't flip. */
  [data-theme="dark"] .sm_author__avatar { background: var(--base-semi-dark); }
  @media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]):not(.light) .sm_author__avatar { background: var(--base-semi-dark); }
  }

  /* Featured article (homepage) */
  .sm_featured {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-l);
    align-items: center;
  }
  @container sm-block (width < 640px) { .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%;
  }

  /* =====================================================================
     Testimonial slider
     ===================================================================== */

  /* Outer wrapper: slider box + arrow column side by side */
  .sm_testimonials__outer {
    display: flex;
    align-items: stretch;
    gap: var(--space-m);
    max-width: var(--width-xl);
  }

  /* Slider box — grows to fill available space */
  .sm_testimonials {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    overflow: hidden;
    /* Border here so it isn't clipped by overflow: hidden.
       An element's own border renders outside its overflow clip boundary. */
    border: 1px solid var(--border-color-dark, var(--light-grey));
  }

  .sm_testimonials__track {
    display: flex;
    width: 100%;
    transition: transform 0.52s var(--ease-smooth, cubic-bezier(0.25, 0.46, 0.45, 0.94));
    will-change: transform;
  }

  .sm_testimonials__slide {
    flex-shrink: 0;
    width: 100%;
    padding: var(--space-xl) var(--space-xl) var(--space-l);
    display: flex;
    flex-direction: column;
    gap: var(--space-l);
    margin: 0;
    position: relative;
  }

  /* Decorative opening quote mark */
  .sm_testimonials__slide::before {
    content: "\201C";
    position: absolute;
    top: var(--space-m);
    right: var(--space-xl);
    font: 500 clamp(80px, 10vw, 120px)/1 var(--font-sans);
    color: var(--primary);
    opacity: 0.12;
    pointer-events: none;
    user-select: none;
    line-height: 1;
  }

  .sm_testimonials__quote {
    font: 500 clamp(19px, calc(19px + 7 * ((100vw - 360px) / 1006)), 26px)/1.45 var(--font-sans);
    letter-spacing: -0.01em;
    color: var(--heading-color);
    margin: 0;
    max-width: 72ch;
  }

  .sm_testimonials__author {
    display: flex;
    align-items: center;
    gap: var(--space-m);
    /* Right padding leaves room for the absolutely-positioned dots */
    padding-right: 150px;
  }

  .sm_testimonials__avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-pill);
    background: var(--neutral-ultra-light);
    border: 1px solid var(--border-color-dark, var(--light-grey));
    flex-shrink: 0;
    overflow: hidden;
    display: grid;
    place-items: center;
    font: 500 14px/1 var(--font-sans);
    color: var(--text-dark-muted);
  }
  .sm_testimonials__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .sm_testimonials__name {
    font: 600 var(--text-m)/1.2 var(--font-sans);
    color: var(--heading-color);
    font-style: normal;
    display: block;
  }

  .sm_testimonials__role {
    font-size: var(--text-s);
    color: var(--text-dark-muted);
    line-height: 1.3;
    margin: 3px 0 0;
  }

  /* Dots — absolutely positioned inside the slider at bottom-right,
     visually inline with the author row */
  .sm_testimonials__dots {
    position: absolute;
    bottom: var(--space-l);
    right: var(--space-xl);
    display: flex;
    gap: 8px;
    align-items: center;
    z-index: 2;
  }

  .sm_testimonials__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--border-color-dark, var(--light-grey));
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: background var(--transition-duration) var(--transition-timing),
                width     var(--transition-duration) var(--transition-timing);
  }
  .sm_testimonials__dot.is-active {
    background: var(--primary);
    width: 24px;
  }

  /* Arrows — horizontal pair to the right of the slider, bottom-aligned */
  .sm_testimonials__arrows {
    display: flex;
    flex-direction: row;
    gap: var(--space-s);
    flex-shrink: 0;
    align-self: flex-end;
    /* Aligns visually with the author / dots row */
    padding-bottom: calc(var(--space-l) + 4px);
  }

  .sm_testimonials__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-color-dark, var(--light-grey));
    background: transparent;
    color: var(--text-dark);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    transition: background var(--transition-duration) var(--transition-timing),
                border-color var(--transition-duration) var(--transition-timing);
    flex-shrink: 0;
  }
  .sm_testimonials__btn:hover {
    background: var(--neutral-ultra-light);
    border-color: var(--text-dark-muted);
  }
  .sm_testimonials__btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }

  /* Mobile: stack slider + arrows vertically; arrows become a right-aligned row */
  @container sm-block (width < 600px) {
    .sm_testimonials__outer {
      flex-direction: column;
    }
    .sm_testimonials__arrows {
      flex-direction: row;
      justify-content: flex-end;
      align-self: auto;
      padding-bottom: 0;
    }
  }

  /* Dark surface rebind */
  .bg-dark .sm_testimonials,
  .bg-ultra-dark .sm_testimonials,
  [data-theme="dark"] .sm_testimonials {
    border-color: var(--border-color-light, rgba(255 255 255 / 0.1));
  }
  .bg-dark .sm_testimonials__avatar,
  .bg-ultra-dark .sm_testimonials__avatar,
  [data-theme="dark"] .sm_testimonials__avatar {
    background: var(--base-semi-dark);
    border-color: var(--border-color-light, rgba(255 255 255 / 0.1));
  }
  .bg-dark .sm_testimonials__dot,
  .bg-ultra-dark .sm_testimonials__dot,
  [data-theme="dark"] .sm_testimonials__dot {
    background: rgba(255 255 255 / 0.2);
  }
  .bg-dark .sm_testimonials__btn,
  .bg-ultra-dark .sm_testimonials__btn,
  [data-theme="dark"] .sm_testimonials__btn {
    border-color: rgba(255 255 255 / 0.15);
    color: var(--text-light);
  }
  .bg-dark .sm_testimonials__btn:hover,
  .bg-ultra-dark .sm_testimonials__btn:hover,
  [data-theme="dark"] .sm_testimonials__btn:hover {
    background: rgba(255 255 255 / 0.08);
    border-color: rgba(255 255 255 / 0.3);
  }

  /* =====================================================================
     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);
    container-type: inline-size;
    container-name: sm-form;
  }
  .sm_form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-m);
  }
  @container sm-form (width < 480px) { .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-m);
    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;
  }

  /* Form field states */
  .sm_form__field--error .sm_form__input,
  .sm_form__field--error .sm_form__textarea,
  .sm_form__field--error .sm_form__select {
    border-color: var(--error, #d93636);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--error, #d93636) 15%, transparent);
  }
  .sm_form__field-error-msg {
    font-size: var(--text-xs);
    color: var(--error, #d93636);
    line-height: 1.3;
  }

  /* Form-level success state */
  .sm_form--success {
    position: relative;
    pointer-events: none;
  }
  .sm_form--success::after {
    content: attr(data-success-msg);
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font: 500 var(--text-m)/1.4 var(--font-sans);
    color: var(--heading-color);
    background: var(--card-background, var(--white));
    border-radius: inherit;
    padding: var(--space-xl);
    text-align: center;
  }

  /* Form submit loading state — spinner on the button */
  .sm_btn--loading {
    pointer-events: none;
    opacity: 0.7;
    position: relative;
  }
  .sm_btn--loading::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: var(--radius-pill);
    animation: sm-spin 0.7s linear infinite;
  }
  @keyframes sm-spin { to { transform: translateY(-50%) rotate(360deg); } }

  /* =====================================================================
     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);
  }

  /* =====================================================================
     Tags / badges
     Inline label chips used for sectors, categories, status labels etc.
     ===================================================================== */

  .sm_tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 500 var(--text-xs)/1 var(--font-sans);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-color-dark, var(--light-grey));
    color: var(--text-dark-muted);
    background: transparent;
    white-space: nowrap;
  }
  /* Variants */
  .sm_tag--primary {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    border-color: color-mix(in srgb, var(--primary) 30%, transparent);
    color: var(--primary);
  }
  .sm_tag--dark {
    background: var(--base);
    border-color: var(--base);
    color: var(--white);
  }
  .sm_tag--filled {
    background: var(--neutral-ultra-light);
    border-color: var(--border-color-dark, var(--light-grey));
    color: var(--text-dark);
  }
  /* Dark context auto-rebind */
  .bg-dark .sm_tag,
  .bg-ultra-dark .sm_tag,
  [data-theme="dark"] .sm_tag {
    border-color: var(--border-color-light, rgba(255 255 255 / 0.15));
    color: var(--text-light-muted);
  }

  /* =====================================================================
     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);
  }

  /* =====================================================================
     Service page decorative number
     Large background number used on service detail page heroes (01–04).
     ===================================================================== */

  .sm_page-number {
    font: 500 clamp(60px, calc(60px + 80 * ((100vw - 360px) / 1006)), 140px)/1 var(--font-sans);
    letter-spacing: -0.04em;
    color: var(--neutral-light);
    user-select: none;
    align-self: start;
    text-align: right;
  }

  /* =====================================================================
     Case study fact list
     Key facts row on case study pages (client, year, sector, etc.)
     ===================================================================== */

  .sm_fact-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--border-color-dark, var(--light-grey));
  }
  @container sm-block (width < 640px) {
    .sm_fact-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  .sm_fact-list__item {
    padding: var(--space-m) var(--space-l) var(--space-m) 0;
    border-right: 1px solid var(--border-color-dark, var(--light-grey));
  }
  .sm_fact-list__item:last-child { border-right: 0; }
  .sm_fact-list__label {
    font: 500 var(--text-xs)/1 var(--font-sans);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dark-muted);
    margin-bottom: var(--space-xs);
  }
  .sm_fact-list__value {
    font: 500 var(--text-m)/1.3 var(--font-sans);
    color: var(--heading-color);
  }

  /* =====================================================================
     Process steps
     Numbered "what happens next" steps used on Contact and similar pages.
     ===================================================================== */

  .sm_steps {
    display: grid;
    gap: var(--space-m);
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: step;
  }
  .sm_steps__item {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: var(--space-s);
    align-items: start;
    counter-increment: step;
  }
  .sm_steps__item::before {
    content: counter(step);
    font: 500 var(--text-xs)/32px var(--font-sans);
    letter-spacing: 0.04em;
    text-align: center;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    border-radius: var(--radius-pill);
    width: 32px;
    height: 32px;
    flex-shrink: 0;
  }
  .sm_steps__title {
    font: 500 var(--text-m)/1.3 var(--font-sans);
    color: var(--heading-color);
    margin: 0 0 4px;
  }
  .sm_steps__text {
    font-size: var(--text-s);
    color: var(--text-dark-muted);
    line-height: 1.5;
    margin: 0;
  }

  /* =====================================================================
     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 {
    container-type: inline-size;
    container-name: 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);
  }
  @container sm-footer (width < 880px) {
    .sm_footer__grid { grid-template-columns: 1fr 1fr; }
  }
  @container sm-footer (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);
    overflow: hidden;
    /* max-height set via JS before dismiss so the button is never clipped */
    transition: max-height 0.35s ease, opacity 0.25s ease;
  }
  .sm_review-bar.is-dismissed {
    max-height: 0 !important;
    opacity: 0;
    pointer-events: none;
  }
  .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-m);
    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);
  }
  .sm_review-bar__close {
    background: none;
    border: none;
    color: rgb(255 255 255 / 0.4);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
    margin-left: auto;
  }
  .sm_review-bar__close:hover { color: var(--white); background: rgb(255 255 255 / 0.1); }
  @media (max-width: 640px) {
    .sm_review-bar { font-size: 11px; }
  }