/*
Theme Name: Stone Advisory
Theme URI: https://stoneadvisory.io
Author: Rural & Co.
Author URI: https://ruralandco.com
Description: A modern, lightweight, fully dynamic theme for Stone Advisory Services. Restrained luxury for corporate transformation consulting: serif display type, a disciplined navy-and-sand palette, and slow, deliberate motion. Block-editor (Gutenberg) ready and built on WordPress coding standards.
Version: 1.3.0
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: stone-advisory
Tags: business, consulting, custom-menu, featured-images, translation-ready, block-styles, wide-blocks
*/

  /* ============================================================
     STONE ADVISORY SERVICES
     Brand tokens, type scale, layout, motion.
     ============================================================ */

  :root {
    /* Brand colors */
    --navy: #002B5A;
    --navy-deep: #001b3a;
    --blue: #3387BA;
    --blue-soft: #6D94C5;
    --sand: #E6D9C5;
    --sand-pale: #F4EEE3;
    --graphite: #000300;
    --paper: #FAFAFA;
    --paper-warm: #F6F1E8;
    --line: rgba(0, 43, 90, 0.12);
    --line-strong: rgba(0, 43, 90, 0.22);
    --muted: rgba(0, 3, 0, 0.72);

    /* Type */
    --display: 'Hedvig Letters Serif', 'Times New Roman', serif;
    --body: 'Geist', system-ui, -apple-system, sans-serif;

    /* Scale */
    --fs-hero: clamp(3.4rem, 8.4vw, 8.6rem);
    --fs-statement: clamp(2.2rem, 5vw, 4.4rem);
    --fs-h2: clamp(2rem, 4vw, 3.5rem);
    --fs-h3: clamp(1.4rem, 2vw, 1.875rem);
    --fs-body-plus: 1.375rem;
    --fs-body: 1.125rem;
    --fs-label: 0.8125rem;

    /* Rhythm */
    --container: 1440px;
    --gutter: clamp(1.25rem, 3vw, 2.75rem);
    --section-y: clamp(5rem, 11vw, 9.5rem);

    /* Motion */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
    /* Weightier deceleration for reveals and press feedback. */
    --ease-emph: cubic-bezier(0.16, 1, 0.3, 1);
    --dur: 1100ms;
    --dur-fast: 650ms;
  }

  /* Reset */
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

  /* ------------------------------------------------------------
     Paper grain: a whisper of monochrome film-grain for a physical,
     printed feel. Fixed and pointer-events:none so it never blocks
     interaction. To remove the texture entirely, delete this block.
     ------------------------------------------------------------ */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.022;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size: 140px 140px;
  }
  @media (prefers-reduced-motion: reduce) {
    body::after { display: none; }
  }
  body {
    font-family: var(--body);
    font-size: var(--fs-body);
    line-height: 1.55;
    color: var(--graphite);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "ss01", "cv01";
    overflow-x: hidden;
  }
  img, svg { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; cursor: pointer; background: none; border: 0; padding: 0; color: inherit; }
  ::selection { background: var(--navy); color: var(--paper); }

  /* Layout primitives */
  .wrap {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
  }
  section { position: relative; }

  /* ============================================================
     NAVIGATION
     ============================================================ */
  .nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    padding: 1.5rem 0;
    transition: padding var(--dur-fast) var(--ease-soft),
                background var(--dur-fast) var(--ease-soft),
                border-color var(--dur-fast) var(--ease-soft);
    border-bottom: 1px solid transparent;
  }
  .nav.is-scrolled {
    padding: 0.875rem 0;
    background: rgba(250, 250, 250, 0.92);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-bottom-color: var(--line);
  }

  /* Nav over the dark hero image: light text, recolor logo paths to paper. */
  .is-front .nav.on-hero .nav__brand,
  .is-front .nav.on-hero .nav__link { color: var(--paper); }
  .is-front .nav.on-hero .nav__brand:hover { opacity: 0.85; }
  .is-front .nav.on-hero .nav__link::after { background: var(--paper); }
  .is-front .nav.on-hero .nav__cta {
    border-color: rgba(250, 250, 250, 0.7);
    color: var(--paper);
  }
  .is-front .nav.on-hero .nav__cta:hover { background: var(--paper); color: var(--navy); }
  .is-front .nav.on-hero .nav__lockup [data-fill="navy"] { fill: var(--paper); }
  .is-front .nav.on-hero .nav__lockup [data-fill="blue"] { fill: var(--blue-soft); }
  .nav__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }
  .nav__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--navy);
    transition: opacity var(--dur-fast) var(--ease-soft);
  }
  .nav__brand:hover { opacity: 0.7; }
  .nav__lockup {
    /* Wide horizontal lockup (660x80). Height drives; width follows ~8.25x. */
    height: 36px;
    width: auto;
    max-width: min(70vw, 320px);
    display: block;
    transition: height var(--dur-fast) var(--ease-soft);
  }
  .nav.is-scrolled .nav__lockup { height: 32px; }

  @media (max-width: 520px) {
    .nav__lockup { height: 30px; max-width: 64vw; }
    .nav.is-scrolled .nav__lockup { height: 28px; }
  }
  .nav__menu {
    display: flex;
    align-items: center;
    gap: 2.25rem;
  }
  .nav__link {
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    color: var(--graphite);
    position: relative;
    padding: 0.25rem 0;
    transition: color var(--dur-fast) var(--ease-soft);
  }
  .nav__link::after {
    content: "";
    position: absolute;
    left: 0; right: 100%;
    bottom: 0;
    height: 1px;
    background: var(--navy);
    transition: right var(--dur-fast) var(--ease);
  }
  .nav__link:hover::after { right: 0; }

  /* Practice dropdown */
  .nav__dropdown { position: relative; }
  .nav__dropdown-toggle {
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    color: var(--graphite);
    position: relative;
    padding: 0.25rem 0;
    background: none;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: color var(--dur-fast) var(--ease-soft);
  }
  .nav__dropdown-toggle::after {
    content: "";
    position: absolute;
    left: 0; right: 100%;
    bottom: 0;
    height: 1px;
    background: var(--navy);
    transition: right var(--dur-fast) var(--ease);
  }
  .nav__dropdown:hover .nav__dropdown-toggle::after,
  .nav__dropdown:focus-within .nav__dropdown-toggle::after { right: 0; }
  .nav__dropdown-toggle svg {
    width: 9px;
    height: 9px;
    transition: transform var(--dur-fast) var(--ease);
  }
  .nav__dropdown:hover .nav__dropdown-toggle svg,
  .nav__dropdown:focus-within .nav__dropdown-toggle svg { transform: rotate(180deg); }

  .nav__dropdown-panel {
    position: absolute;
    top: calc(100% + 0.75rem);
    left: -1.25rem;
    min-width: 280px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 4px;
    box-shadow: 0 18px 40px -16px rgba(0, 18, 44, 0.18);
    padding: 0.5rem;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity var(--dur-fast) var(--ease-soft),
                transform var(--dur-fast) var(--ease-soft);
  }
  /* Transparent bridge that fills the gap between toggle and panel,
     so hover doesn't drop when the cursor crosses. */
  .nav__dropdown-panel::before {
    content: "";
    position: absolute;
    top: -0.85rem;
    left: 0;
    right: 0;
    height: 0.85rem;
    background: transparent;
  }
  .nav__dropdown:hover .nav__dropdown-panel,
  .nav__dropdown:focus-within .nav__dropdown-panel {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .nav__dropdown-item {
    display: block;
    padding: 0.85rem 1rem;
    border-radius: 3px;
    transition: background var(--dur-fast) var(--ease-soft);
  }
  .nav__dropdown-item:hover { background: var(--paper-warm); }
  .nav__dropdown-num {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    color: var(--blue);
    margin-bottom: 0.2rem;
  }
  .nav__dropdown-name {
    font-family: var(--display);
    font-size: 1.1rem;
    color: var(--navy);
    letter-spacing: -0.01em;
    line-height: 1.2;
  }

  /* On-hero (dark video) variants */
  .is-front .nav.on-hero .nav__dropdown-toggle { color: var(--paper); }
  .is-front .nav.on-hero .nav__dropdown-toggle::after { background: var(--paper); }
  /* Panel itself stays light-themed even when nav is on-hero; that contrast reads as "menu". */

  .nav__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.6rem 0.5rem 1.35rem;
    border: 1px solid var(--navy);
    color: var(--navy);
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    border-radius: 999px;
    transition: background var(--dur-fast) var(--ease-soft),
                color var(--dur-fast) var(--ease-soft),
                transform 220ms var(--ease-emph);
  }
  .nav__cta:hover { background: var(--navy); color: var(--paper); }
  .nav__cta:active { transform: translateY(1px); }
  /* Button-in-button: the arrow sits in its own small disc, flush right. */
  .nav__cta-arrow {
    width: 26px;
    height: 26px;
    padding: 7px;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 12%, transparent);
    transition: transform var(--dur-fast) var(--ease-emph),
                background var(--dur-fast) var(--ease-soft);
  }
  .nav__cta:hover .nav__cta-arrow { transform: translate(2px, -2px); }

  @media (max-width: 820px) {
    .nav__menu { gap: 1.25rem; }
    .nav__menu .nav__link,
    .nav__menu .nav__dropdown { display: none; }
  }

  /* ============================================================
     HERO
     ============================================================ */
  .hero {
    min-height: 75vh;
    min-height: 75svh;
    display: flex;
    flex-direction: column;
    padding: 7rem 0 3rem;
    position: relative;
    overflow: hidden;
    color: var(--paper);
    background-color: var(--navy-deep);
  }
  @media (max-width: 820px) {
    .hero { min-height: auto; padding: 7rem 0 2.5rem; }
  }
  .hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
  }
  .hero__video {
    /* Bunny Stream iframe. Dimensions are set in JS so the iframe itself is
       16:9 and sized just large enough to cover the hero container in both
       axes. That way the Bunny player has no aspect mismatch to letterbox
       around inside the iframe. See sizeHeroVideo() in the page script. */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 0;
    pointer-events: none;
    will-change: transform;
  }
  .hero__bg::after {
    /* Single horizontal fade: full opacity on the right (where copy lives),
       transparent on the left so the video plays unobscured. */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to left,
      rgba(0, 18, 44, 0.78) 0%,
      rgba(0, 18, 44, 0) 100%);
  }
  .hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
  }
  .hero__content {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    max-width: 640px;
  }
  @media (max-width: 820px) {
    .hero__inner { grid-template-columns: 1fr; }
    .hero__content { grid-column: 1; max-width: 100%; }
  }
  .hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--fs-label);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--blue-soft);
    margin-bottom: 2rem;
  }
  .hero__eyebrow::before {
    content: "";
    width: 32px;
    height: 1px;
    background: var(--blue-soft);
    transform-origin: left;
    transform: scaleX(0);
    animation: lineDraw 1.4s var(--ease) 0.2s forwards;
  }
  .hero__eyebrow-text {
    opacity: 0;
    transform: translateY(8px);
    animation: fadeUp 1.2s var(--ease) 0.45s forwards;
  }
  .hero__title {
    font-family: var(--display);
    font-weight: 400;
    /* Sized for a half-width column. Smaller than the full-bleed treatment. */
    font-size: clamp(2.4rem, 5vw, 4.6rem);
    line-height: 1.0;
    letter-spacing: -0.02em;
    color: var(--paper);
    text-shadow: 0 2px 32px rgba(0, 18, 44, 0.45);
    margin: 0 0 2rem;
    max-width: 16ch;
  }
  .hero__title .word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding: 0 0.05em;
    margin: 0 -0.05em;
  }
  .hero__title .word > span {
    display: inline-block;
    transform: translateY(110%);
    animation: wordRise 1.4s var(--ease) forwards;
  }
  .hero__title .word:nth-child(1) > span { animation-delay: 0.55s; }
  .hero__title .word:nth-child(2) > span { animation-delay: 0.65s; }
  .hero__title .word:nth-child(3) > span { animation-delay: 0.75s; }
  .hero__title .word:nth-child(4) > span { animation-delay: 0.85s; }
  .hero__title .word:nth-child(5) > span { animation-delay: 0.95s; }

  .hero__subhead {
    max-width: 44ch;
    font-size: 1.125rem;
    line-height: 1.5;
    color: rgba(250, 250, 250, 0.92);
    text-shadow: 0 1px 18px rgba(0, 18, 44, 0.5);
    margin: 0;
    opacity: 0;
    transform: translateY(14px);
    animation: fadeUp 1.4s var(--ease) 1.2s forwards;
  }
  .hero__meta {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem 2.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(250, 250, 250, 0.18);
    opacity: 0;
    animation: fadeUp 1.4s var(--ease) 1.5s forwards;
  }
  .hero__meta-block {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 0 1 auto;
  }
  .hero__meta-label {
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(250, 250, 250, 0.6);
    /* Subtle shadow so labels hold against unobscured video on the left side. */
    text-shadow: 0 1px 12px rgba(0, 18, 44, 0.55);
  }
  .hero__meta-value {
    font-family: var(--display);
    font-size: 1.05rem;
    color: var(--paper);
    text-shadow: 0 1px 16px rgba(0, 18, 44, 0.6);
  }
  @media (max-width: 820px) {
    .hero__meta { gap: 1.25rem 1.5rem; }
  }
  @media (max-width: 520px) {
    .hero__meta { flex-direction: column; align-items: flex-start; }
  }
  .hero__scroll {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(250, 250, 250, 0.65);
  }
  .hero__scroll-line {
    width: 36px;
    height: 1px;
    background: rgba(250, 250, 250, 0.35);
    position: relative;
    overflow: hidden;
  }
  .hero__scroll-line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--paper);
    transform-origin: left;
    animation: scrollPulse 2.4s var(--ease-soft) infinite;
  }

  /* ============================================================
     SECTION SHELL
     ============================================================ */
  .section { padding: var(--section-y) 0; }
  .section--sand { background: var(--paper-warm); }
  .section--navy { background: var(--navy); color: var(--paper); }
  .section--navy ::selection { background: var(--paper); color: var(--navy); }

  .section__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
    gap: clamp(2rem, 5vw, 5rem);
    margin-bottom: clamp(3rem, 6vw, 5rem);
  }
  .section__index {
    font-size: var(--fs-label);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--blue);
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding-top: 0.65rem;
  }
  .section--navy .section__index { color: var(--blue-soft); }
  .section__index::before {
    content: "";
    width: 24px;
    height: 1px;
    background: currentColor;
    margin-top: 0.55em;
    flex: 0 0 24px;
  }
  .section__title {
    font-family: var(--display);
    font-weight: 400;
    font-size: var(--fs-h2);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--navy);
    margin: 0;
    max-width: 22ch;
  }
  .section--navy .section__title { color: var(--paper); }

  @media (max-width: 820px) {
    .section__head { grid-template-columns: 1fr; gap: 1rem; }
  }

  /* ============================================================
     STATEMENT (The Stone)
     ============================================================ */
  .statement { padding: var(--section-y) 0; }
  .statement__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(3rem, 6vw, 5rem);
    align-items: center;
  }
  .statement__lede {
    font-family: var(--display);
    font-weight: 400;
    font-size: var(--fs-statement);
    line-height: 1.12;
    letter-spacing: -0.018em;
    color: var(--navy);
    max-width: 22ch;
    margin: 0;
  }
  .statement__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: end;
  }
  .statement__copy {
    font-size: var(--fs-body-plus);
    line-height: 1.55;
    color: var(--graphite);
    max-width: 44ch;
    margin: 0;
  }
  .statement__visual {
    position: relative;
    aspect-ratio: 1 / 1;
    max-width: 420px;
    margin-left: auto;
    width: 100%;
  }
  .statement__visual {
    /* Allow fragments to scatter outside the visual frame without clipping. */
    overflow: visible;
  }
  .statement__visual svg { width: 100%; height: 100%; overflow: visible; }
  .statement__visual .fragment {
    transform-origin: 50% 50%;
    transform: translate(var(--fx, 0px), var(--fy, 0px)) scale(var(--fs, 1));
    /* Smooth interpolation for the scroll-driven assembly */
    transition: transform 220ms var(--ease-soft), opacity 600ms var(--ease);
    will-change: transform;
  }
  /* Initial fade-in handled by IO; positions are driven by scroll progress in JS. */
  .statement__visual { opacity: 0; transition: opacity 900ms var(--ease); }
  .statement.is-visible .statement__visual { opacity: 1; }

  @media (max-width: 820px) {
    .statement__body { grid-template-columns: 1fr; }
    .statement__visual { max-width: 320px; margin: 1rem auto 0; }
  }

  /* ============================================================
     PILLARS
     ============================================================ */
  .pillars__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
  }
  .pillar {
    padding: clamp(2.5rem, 4vw, 4rem) clamp(1.75rem, 3vw, 2.5rem);
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--paper);
    transition: background var(--dur-fast) var(--ease-soft);
    min-height: clamp(20rem, 32vw, 28rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2.5rem;
    position: relative;
    overflow: hidden;
  }
  .pillar:hover { background: var(--paper-warm); }
  .pillar__num {
    font-family: var(--display);
    font-size: clamp(3.5rem, 6vw, 5.5rem);
    line-height: 1;
    color: var(--navy);
    letter-spacing: -0.02em;
  }
  .pillar__num small {
    font-size: 0.4em;
    color: var(--muted);
    margin-left: 0.4em;
    letter-spacing: 0.08em;
    vertical-align: super;
  }
  .pillar__name {
    font-family: var(--display);
    font-weight: 400;
    font-size: var(--fs-h3);
    color: var(--navy);
    margin: 0 0 1rem;
    letter-spacing: -0.01em;
  }
  .pillar__copy {
    font-size: var(--fs-body);
    line-height: 1.55;
    color: var(--graphite);
    margin: 0;
    max-width: 32ch;
  }

  @media (max-width: 920px) {
    .pillars__grid { grid-template-columns: 1fr; }
    .pillar { min-height: auto; }
  }

  /* ============================================================
     PRACTICE
     ============================================================ */
  .practice__list {
    border-top: 1px solid var(--line);
  }
  .practice__row {
    display: grid;
    grid-template-columns: 80px minmax(0, 1.1fr) minmax(0, 1.6fr) auto;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: baseline;
    padding: clamp(2rem, 3.5vw, 3rem) 0;
    border-bottom: 1px solid var(--line);
    transition: padding var(--dur-fast) var(--ease-soft),
                transform 220ms var(--ease-emph);
    position: relative;
  }
  .practice__row::before {
    content: "";
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    background: var(--paper-warm);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 600ms var(--ease);
    z-index: -1;
  }
  .practice__row:hover::before { transform: scaleY(1); transform-origin: top; }
  .practice__num {
    font-size: var(--fs-label);
    letter-spacing: 0.22em;
    color: var(--blue);
  }
  .practice__name {
    font-family: var(--display);
    font-size: clamp(1.6rem, 2.6vw, 2.4rem);
    line-height: 1.1;
    color: var(--navy);
    letter-spacing: -0.015em;
    margin: 0;
  }
  .practice__copy {
    font-size: var(--fs-body);
    line-height: 1.55;
    color: var(--graphite);
    max-width: 56ch;
    margin: 0;
  }
  .practice__arrow {
    width: 36px; height: 36px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-fast) var(--ease-soft),
                border-color var(--dur-fast) var(--ease-soft),
                color var(--dur-fast) var(--ease-soft);
    color: var(--navy);
  }
  .practice__row:hover .practice__arrow {
    background: var(--navy);
    border-color: var(--navy);
    color: var(--paper);
  }
  .practice__arrow svg { width: 12px; height: 12px; transition: transform var(--dur-fast) var(--ease); }
  .practice__row:hover .practice__arrow svg,
  .practice__row:focus-visible .practice__arrow svg { transform: translate(2px, -2px); }
  /* Keyboard focus mirrors the hover fill so the row's target reads clearly. */
  .practice__row:focus-visible {
    outline: none;
  }
  .practice__row:focus-visible::before { transform: scaleY(1); transform-origin: top; }
  .practice__row:focus-visible .practice__arrow {
    background: var(--navy);
    border-color: var(--navy);
    color: var(--paper);
  }
  .practice__row:active { transform: translateY(1px); }

  @media (max-width: 820px) {
    .practice__row {
      grid-template-columns: 1fr auto;
      grid-template-rows: auto auto auto;
      gap: 0.75rem 1.5rem;
    }
    .practice__num { grid-column: 1 / 2; grid-row: 1; }
    .practice__arrow { grid-column: 2; grid-row: 1 / 3; align-self: start; margin-top: 0.5rem; }
    .practice__name { grid-column: 1 / 3; grid-row: 2; }
    .practice__copy { grid-column: 1 / 3; grid-row: 3; }
  }

  /* ============================================================
     APPROACH (manifesto, navy section)
     ============================================================ */
  .approach__statement {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(2rem, 4.4vw, 3.75rem);
    line-height: 1.18;
    letter-spacing: -0.018em;
    color: var(--paper);
    max-width: 28ch;
    margin: 0 0 3rem;
  }
  .approach__statement em {
    font-style: italic;
    color: var(--blue-soft);
  }
  .approach__detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    margin-top: clamp(3rem, 5vw, 5rem);
    padding-top: clamp(2.5rem, 4vw, 4rem);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }
  .approach__detail h3 {
    font-family: var(--body);
    font-weight: 500;
    font-size: 0.82rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--blue-soft);
    margin: 0 0 1.25rem;
  }
  .approach__detail p {
    font-size: var(--fs-body-plus);
    line-height: 1.55;
    color: rgba(250, 250, 250, 0.82);
    max-width: 38ch;
    margin: 0;
  }
  @media (max-width: 820px) {
    .approach__detail { grid-template-columns: 1fr; }
  }

  /* ============================================================
     BEGIN (CTA)
     ============================================================ */
  .begin {
    padding: var(--section-y) 0 calc(var(--section-y) - 2rem);
    background: var(--paper);
  }
  .begin__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: end;
  }
  .begin__title {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(2.4rem, 5.4vw, 4.6rem);
    line-height: 0.98;
    letter-spacing: -0.025em;
    color: var(--navy);
    margin: 0;
    max-width: 12ch;
  }
  .begin__copy {
    font-size: var(--fs-body-plus);
    line-height: 1.55;
    color: var(--graphite);
    max-width: 44ch;
    margin: 0 0 2.5rem;
  }
  .begin__action {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    font-family: var(--display);
    font-size: clamp(1.25rem, 1.6vw, 1.5rem);
    color: var(--navy);
    border-bottom: 1px solid var(--navy);
    padding-bottom: 0.5rem;
    transition: gap var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease-soft),
                border-color var(--dur-fast) var(--ease-soft),
                transform 220ms var(--ease-emph);
    line-height: 1;
  }
  .begin__action:hover,
  .begin__action:focus-visible { gap: 1.5rem; color: var(--blue); border-color: var(--blue); outline: none; }
  .begin__action:active { transform: translateY(1px); }
  .begin__action svg {
    width: 20px; height: 20px;
    transition: transform var(--dur-fast) var(--ease);
  }
  .begin__action:hover svg,
  .begin__action:focus-visible svg { transform: translate(4px, -4px); }
  .begin__meta {
    margin-top: 4rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--line);
  }
  .begin__meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }
  .begin__meta-label {
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .begin__meta-value {
    font-family: var(--display);
    font-size: 1.05rem;
    color: var(--navy);
  }

  @media (max-width: 820px) {
    .begin__inner { grid-template-columns: 1fr; }
    .begin__meta { grid-template-columns: 1fr; gap: 1.25rem; }
  }

  /* ============================================================
     FOOTER
     ============================================================ */
  .footer {
    background: var(--navy);
    color: var(--paper);
    padding: clamp(4rem, 8vw, 8rem) 0 2rem;
    overflow: hidden;
  }
  .footer__mark {
    margin-bottom: clamp(3rem, 6vw, 5rem);
  }
  .footer__statement {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(2.4rem, 7vw, 6.5rem);
    line-height: 0.98;
    letter-spacing: -0.025em;
    color: var(--paper);
    max-width: 16ch;
    margin: 0 0 clamp(3rem, 6vw, 5rem);
  }
  .footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 2rem;
    padding-top: clamp(2.5rem, 4vw, 3.5rem);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }
  .footer__col h4 {
    font-family: var(--body);
    font-weight: 500;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--blue-soft);
    margin: 0 0 1rem;
  }
  .footer__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
  }
  .footer__col a {
    font-size: 0.95rem;
    color: rgba(250, 250, 250, 0.8);
    transition: color var(--dur-fast) var(--ease-soft);
  }
  .footer__col a:hover { color: var(--paper); }
  .footer__col p {
    font-size: 0.95rem;
    color: rgba(250, 250, 250, 0.72);
    margin: 0;
    line-height: 1.55;
    max-width: 30ch;
  }
  .footer__base {
    margin-top: clamp(3rem, 6vw, 5rem);
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: rgba(250, 250, 250, 0.55);
  }

  @media (max-width: 820px) {
    .footer__grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 520px) {
    .footer__grid { grid-template-columns: 1fr; }
  }

  /* ============================================================
     REVEAL ANIMATION (scroll-activated)
     ============================================================ */
  .reveal {
    opacity: 0;
    transform: translateY(32px);
    filter: blur(6px);
    transition: opacity 1.2s var(--ease-emph), transform 1.2s var(--ease-emph),
                filter 1.2s var(--ease-emph);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: transform, opacity;
  }
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
    will-change: auto;
  }
  .reveal-line {
    position: relative;
    overflow: hidden;
  }
  .reveal-line::after {
    content: "";
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    background: var(--paper);
    transform-origin: right;
    transform: scaleX(1);
    transition: transform 1.4s var(--ease);
  }
  .section--sand .reveal-line::after { background: var(--paper-warm); }
  .reveal-line.is-visible::after { transform: scaleX(0); }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
    .reveal, .reveal-line, .hero__title .word > span,
    .hero__eyebrow-text, .hero__subhead, .hero__meta {
      opacity: 1; transform: none; filter: none;
    }
  }

  /* Keyframes */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes wordRise {
    from { transform: translateY(110%); }
    to   { transform: translateY(0); }
  }
  @keyframes lineDraw {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
  @keyframes scrollPulse {
    0%   { transform: scaleX(0); transform-origin: left; }
    50%  { transform: scaleX(1); transform-origin: left; }
    51%  { transform: scaleX(1); transform-origin: right; }
    100% { transform: scaleX(0); transform-origin: right; }
  }

  /* ============================================================
     WORDPRESS CORE + GUTENBERG SUPPORT
     Alignment, media, captions, galleries, and editor helpers.
     ============================================================ */

  /* Accessibility: screen-reader text (WP standard) */
  .screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
  }
  .screen-reader-text:focus {
    background: var(--paper);
    clip: auto !important;
    clip-path: none;
    color: var(--navy);
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
  }

  /* Skip link */
  .skip-link {
    position: absolute;
    left: -9999px;
    z-index: 100000;
  }
  .skip-link:focus {
    left: 5px;
    top: 5px;
  }

  /* Block / content alignments */
  .entry-content > * {
    margin-top: 1.6em;
    margin-bottom: 1.6em;
  }
  .alignleft  { float: left;  margin: 0.5em 1.5em 1em 0; }
  .alignright { float: right; margin: 0.5em 0 1em 1.5em; }
  .aligncenter { clear: both; margin-left: auto; margin-right: auto; }

  /* Wide and full alignment for Gutenberg blocks */
  .entry-content .alignwide {
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
    width: auto;
    max-width: 100vw;
  }
  .entry-content .alignfull {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    max-width: 100vw;
  }

  /* Images, captions, embeds */
  .wp-caption { max-width: 100%; margin-bottom: 1.5em; }
  .wp-caption img { display: block; }
  .wp-caption-text,
  .wp-element-caption {
    font-family: var(--body);
    font-size: var(--fs-label);
    letter-spacing: 0.04em;
    color: var(--muted);
    padding: 0.6em 0;
  }
  .wp-block-image figcaption { text-align: center; }
  embed, iframe, object { max-width: 100%; }

  /* Lists and quotes inside content */
  .entry-content ul,
  .entry-content ol { padding-left: 1.4em; }
  .entry-content li { margin: 0.4em 0; }
  .entry-content blockquote,
  .wp-block-quote {
    border-left: 2px solid var(--blue);
    margin: 2em 0;
    padding: 0.4em 0 0.4em 1.6em;
    font-family: var(--display);
    font-size: var(--fs-h3);
    line-height: 1.3;
    color: var(--navy);
  }
  .wp-block-pullquote {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 2em 0;
    text-align: center;
  }

  /* Buttons rendered by Gutenberg */
  .wp-block-button__link {
    background: var(--navy);
    color: var(--paper);
    border-radius: 999px;
    padding: 0.9em 1.8em;
    font-family: var(--body);
    font-weight: 500;
  }

  /* Tables */
  .entry-content table,
  .wp-block-table table {
    width: 100%;
    border-collapse: collapse;
    margin: 2em 0;
    font-size: var(--fs-body);
  }
  .entry-content th,
  .entry-content td {
    border-bottom: 1px solid var(--line);
    padding: 0.85em 1em;
    text-align: left;
  }
  .entry-content th { font-weight: 600; color: var(--navy); }

  /* Pagination */
  .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: var(--section-y);
  }
  .pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    height: 2.75rem;
    padding: 0 0.75rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-size: var(--fs-label);
    letter-spacing: 0.04em;
    transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
  }
  .pagination .page-numbers.current,
  .pagination .page-numbers:hover {
    background: var(--navy);
    color: var(--paper);
    border-color: var(--navy);
  }

  /* Comments + form fields */
  .comment-list { list-style: none; padding: 0; }
  .comment-body { padding: 1.5em 0; border-bottom: 1px solid var(--line); }
  input[type="text"],
  input[type="email"],
  input[type="url"],
  input[type="search"],
  textarea {
    width: 100%;
    font: inherit;
    color: var(--graphite);
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    padding: 0.75em 0.9em;
  }
  input:focus,
  textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; }

  /* Keyboard focus ring for interactive elements without a bespoke focus
     treatment. Mouse clicks stay clean (:focus-visible only fires for
     keyboard). The nav CTA gets an offset ring so it reads over the hero. */
  a:focus-visible,
  button:focus-visible,
  summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; }
  .nav__cta:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
  .is-front .nav.on-hero .nav__cta:focus-visible { outline-color: var(--paper); }

  /* Sticky/Admin states WP may add */
  .sticky { display: block; }
  .post-password-form input[type="password"] { max-width: 320px; }
  .bypostauthor { display: block; }

  /* ============================================================
     DYNAMIC TEMPLATE PARTS (WordPress)
     Styling for wp_nav_menu output and the post / page templates.
     ============================================================ */

  /* wp_nav_menu renders a <ul>; normalise it to the flex menu look. */
  ul.nav__menu {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .nav__menu li { position: relative; }
  /* Text links only — the .nav__cta button keeps its own pill padding. */
  .nav__menu a:not(.nav__cta) {
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    color: var(--graphite);
    position: relative;
    padding: 0.25rem 0;
    transition: color var(--dur-fast) var(--ease-soft);
  }
  .is-front .nav.on-hero .nav__menu a { color: var(--paper); }
  .nav__menu .current-menu-item > a,
  .nav__menu a:not(.nav__cta):hover { color: var(--blue); }

  /* Generated submenu behaves like the practice dropdown. */
  .nav__menu .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0.75rem 0;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 230px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: 0 24px 60px rgba(0, 43, 90, 0.14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
    z-index: 50;
  }
  .nav__menu li:hover > .sub-menu,
  .nav__menu li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav__menu .sub-menu a { display: block; padding: 0.6rem 1.4rem; }
  .nav__menu .sub-menu a::after { content: none; }

  @media (max-width: 860px) {
    ul.nav__menu > li { display: none; }
  }

  /* Footer menu (wp_nav_menu) reset to match the static columns. */
  .footer__menu {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .footer__menu li { margin: 0.4rem 0; }
  .footer__menu a {
    color: var(--blue-soft);
    transition: color var(--dur-fast) var(--ease-soft);
  }
  .footer__menu a:hover { color: var(--paper); }

  /* Archive / search / blog header */
  .page-header {
    max-width: var(--container);
    margin-bottom: clamp(2.5rem, 6vw, 5rem);
  }
  .page-header__title {
    font-family: var(--display);
    font-size: var(--fs-h2);
    line-height: 1.05;
    color: var(--navy);
    margin: 0;
  }
  .page-header__desc { margin-top: 1rem; color: var(--muted); max-width: 60ch; }

  /* Blog / archive post list */
  .post-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: clamp(2rem, 4vw, 3.5rem);
  }
  .post-card {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--line);
    padding-bottom: 2rem;
  }
  .post-card__media {
    display: block;
    overflow: hidden;
    border-radius: 6px;
    margin-bottom: 1.5rem;
    aspect-ratio: 16 / 10;
  }
  .post-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur) var(--ease);
  }
  .post-card__media:hover img { transform: scale(1.04); }
  .post-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: var(--fs-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.85rem;
  }
  .post-card__cats a { color: var(--blue); }
  .post-card__title {
    font-family: var(--display);
    font-size: var(--fs-h3);
    line-height: 1.15;
    margin: 0 0 0.85rem;
  }
  .post-card__title a { transition: color var(--dur-fast) var(--ease-soft); }
  .post-card__title a:hover,
  .post-card__title a:focus-visible { color: var(--blue); }
  .post-card__excerpt { color: var(--muted); margin-bottom: 1.25rem; }
  .post-card__more {
    margin-top: auto;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    color: var(--navy);
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
    transition: color var(--dur-fast) var(--ease-soft),
                gap var(--dur-fast) var(--ease),
                transform 220ms var(--ease-emph);
  }
  .post-card__more:hover,
  .post-card__more:focus-visible { color: var(--blue); gap: 0.8rem; }
  .post-card__more:active { transform: translateY(1px); }

  /* Single page article */
  .page-article { max-width: var(--container); }
  .page-article__header { margin-bottom: clamp(2rem, 5vw, 4rem); }
  .page-article__title {
    font-family: var(--display);
    font-size: var(--fs-h2);
    line-height: 1.04;
    color: var(--navy);
    margin: 0;
    max-width: 18ch;
  }
  .page-article__media {
    margin: 0 0 clamp(2rem, 5vw, 4rem);
    border-radius: 6px;
    overflow: hidden;
  }
  .page-article__media img { width: 100%; height: auto; object-fit: cover; }
  .entry-content {
    max-width: 760px;
    font-size: var(--fs-body-plus);
    line-height: 1.7;
  }
  .entry-content h2,
  .entry-content h3,
  .entry-content h4 {
    font-family: var(--display);
    color: var(--navy);
    line-height: 1.15;
    margin-top: 2em;
  }
  .entry-content h2 { font-size: var(--fs-h3); }
  .entry-content a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
  .page-article__footer { margin-top: 3rem; font-size: var(--fs-label); }
  .edit-link a { color: var(--blue); }
  .page-links { margin-top: 2rem; display: flex; gap: 0.5rem; align-items: center; }
  .page-links__num {
    display: inline-flex;
    min-width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
  }

  /* Empty / no-results state */
  .no-results {
    max-width: 60ch;
  }
  .no-results h2 {
    font-family: var(--display);
    font-size: var(--fs-h3);
    color: var(--navy);
  }

  /* ============================================================
     PRACTICE DETAIL PAGES (page-practice.php) — scoped to .practice-page
     ============================================================ */
  .practice-page .hero {
    /* Reset the full-viewport homepage hero for the inner-page treatment. */
    min-height: 0;
    display: block;
    overflow: visible;
    color: var(--graphite);
    background: var(--paper);
    background-color: var(--paper);
    padding: calc(7rem + 1.5rem) 0 clamp(4rem, 7vw, 6rem);
    position: relative;
  }
  .practice-page .hero__crumbs {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: var(--fs-label);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 2.5rem;
  }
  .practice-page .hero__crumbs a { color: var(--muted); transition: color var(--dur-fast) var(--ease-soft); }
  .practice-page .hero__crumbs a:hover { color: var(--navy); }
  .practice-page .hero__crumbs-sep {
    display: inline-block;
    width: 18px;
    height: 1px;
    background: var(--line-strong);
  }
  .practice-page .hero__crumbs-current { color: var(--navy); }

  .practice-page .hero__index {
    font-size: var(--fs-label);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--blue);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
  }
  .practice-page .hero__index::before {
    content: "";
    width: 32px;
    height: 1px;
    background: var(--blue);
  }
  .practice-page .hero__title {
    font-family: var(--display);
    font-weight: 400;
    /* Inner-page scale: smaller than the full-bleed homepage hero. */
    font-size: clamp(2.4rem, 5vw, 4.5rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--navy);
    margin: 0 0 2.25rem;
    max-width: 20ch;
  }
  .practice-page .hero__lede {
    max-width: 56ch;
    font-size: var(--fs-body-plus);
    line-height: 1.55;
    color: var(--graphite);
    margin: 0;
  }
  .work__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
  }
  .work__item {
    padding: clamp(2rem, 3vw, 2.75rem) clamp(1.75rem, 3vw, 2.5rem);
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--paper);
  }
  .work__num {
    font-family: var(--display);
    font-size: 1.05rem;
    color: var(--blue);
    margin-bottom: 1.25rem;
    letter-spacing: 0.05em;
  }
  .work__name {
    font-family: var(--display);
    font-size: 1.5rem;
    line-height: 1.15;
    color: var(--navy);
    margin: 0 0 0.85rem;
    letter-spacing: -0.012em;
  }
  .work__copy {
    font-size: var(--fs-body);
    line-height: 1.55;
    color: var(--graphite);
    margin: 0;
    max-width: 38ch;
  }
  @media (max-width: 720px) {
    .work__list { grid-template-columns: 1fr; }
  }

  /* ============================================================
     ENGAGEMENT
     ============================================================ */
  .engagement__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
  }
  .engagement__item {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    padding-top: 1.5rem;
  }
  .engagement__label {
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--blue-soft);
    margin-bottom: 0.85rem;
  }
  .engagement__value {
    font-family: var(--display);
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--paper);
    margin: 0 0 1rem;
    letter-spacing: -0.012em;
  }
  .engagement__copy {
    font-size: var(--fs-body);
    line-height: 1.5;
    color: rgba(250, 250, 250, 0.78);
    margin: 0;
    max-width: 32ch;
  }
  @media (max-width: 820px) {
    .engagement__grid { grid-template-columns: 1fr; }
  }

  /* ============================================================
     OTHER PRACTICES
     ============================================================ */
  .others__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
  }
  .others__card {
    display: block;
    padding: clamp(2rem, 3vw, 2.5rem);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 4px;
    transition: border-color var(--dur-fast) var(--ease-soft),
                transform var(--dur-fast) var(--ease-soft),
                box-shadow var(--dur-fast) var(--ease-soft);
  }
  .others__card:hover {
    border-color: var(--line-strong);
    transform: translateY(-2px);
    box-shadow: 0 18px 40px -22px rgba(0, 18, 44, 0.18);
  }
  .others__num {
    font-size: var(--fs-label);
    letter-spacing: 0.22em;
    color: var(--blue);
    margin-bottom: 1rem;
  }
  .others__name {
    font-family: var(--display);
    font-size: clamp(1.4rem, 2vw, 1.875rem);
    line-height: 1.1;
    color: var(--navy);
    margin: 0 0 1rem;
    letter-spacing: -0.012em;
  }
  .others__copy {
    font-size: var(--fs-body);
    line-height: 1.55;
    color: var(--graphite);
    margin: 0 0 1.5rem;
  }
  .others__arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    color: var(--navy);
    border-bottom: 1px solid var(--navy);
    padding-bottom: 0.25rem;
    transition: gap var(--dur-fast) var(--ease);
  }
  .others__card:hover .others__arrow,
  .others__card:focus-visible .others__arrow { gap: 0.8rem; }
  .others__arrow svg { width: 12px; height: 12px; transition: transform var(--dur-fast) var(--ease); }
  .others__card:hover .others__arrow svg,
  .others__card:focus-visible .others__arrow svg { transform: translate(2px, -2px); }
  /* Keyboard focus mirrors the hover lift; press settles the card down. */
  .others__card:focus-visible {
    outline: none;
    border-color: var(--line-strong);
    transform: translateY(-2px);
    box-shadow: 0 18px 40px -22px rgba(0, 18, 44, 0.18);
  }
  .others__card:active { transform: translateY(0); }
  @media (max-width: 720px) {
    .others__grid { grid-template-columns: 1fr; }
  }

/* ============================================================
   SERVICES / INVESTMENT PAGE (page-services.php) — scoped to .services-page
   Shares the global section, begin and reveal systems; adds the hero
   reset, pricing tiers, standalone offerings and the navy "path" band.
   ============================================================ */
  .services-page .hero {
    /* Reset the full-viewport homepage hero for the inner-page treatment. */
    min-height: 0;
    display: block;
    overflow: visible;
    color: var(--graphite);
    background: var(--paper);
    background-color: var(--paper);
    padding: calc(7rem + 1.5rem) 0 clamp(3rem, 6vw, 5rem);
    position: relative;
  }
  .services-page .hero__crumbs {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: var(--fs-label);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 2.5rem;
  }
  .services-page .hero__crumbs a { color: var(--muted); transition: color var(--dur-fast) var(--ease-soft); }
  .services-page .hero__crumbs a:hover { color: var(--navy); }
  .services-page .hero__crumbs-sep {
    display: inline-block;
    width: 18px;
    height: 1px;
    background: var(--line-strong);
  }
  .services-page .hero__crumbs-current { color: var(--navy); }

  .services-page .hero__index {
    font-size: var(--fs-label);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--blue);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
  }
  .services-page .hero__index::before {
    content: "";
    width: 32px;
    height: 1px;
    background: var(--blue);
  }
  .services-page .hero__title {
    font-family: var(--display);
    font-weight: 400;
    /* Matched to the Practice / About inner-page hero scale for consistency. */
    font-size: clamp(2.4rem, 5vw, 4.5rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--navy);
    margin: 0 0 2.5rem;
    max-width: 20ch;
  }
  .services-page .hero__lede {
    max-width: 60ch;
    font-size: var(--fs-body-plus);
    line-height: 1.55;
    color: var(--graphite);
    margin: 0;
  }

  /* ============================================================
     SPLIT HERO — right-side image on the secondary pages
     (About, Practice, Services). The copy stays on the left; the
     photo bleeds to the right viewport edge and fades into the
     paper. Source is the ACF "Hero image" override or a bundled
     default in assets/img/hero/. Added via .hero--media.
     ============================================================ */
  .hero--media { overflow: hidden; }
  .hero--media > .wrap { position: relative; z-index: 1; }
  .hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 22%;
  }

  @media (min-width: 981px) {
    .hero--media { min-height: clamp(540px, 64vh, 680px); }
    /* Keep the copy clear of the image column. */
    .hero--media .hero__crumbs,
    .hero--media .hero__index,
    .hero--media .hero__title,
    .hero--media .hero__lede { max-width: min(600px, 56%); }
    .hero__media {
      position: absolute;
      right: 0;
      bottom: 0;
      /* Sits flush on the section's bottom edge; height kept a touch shorter
         so the top of the photo clears the navigation. */
      width: clamp(340px, 40vw, 600px);
      height: clamp(450px, 72vh, 580px);
      z-index: 0;
    }
    .hero__media img { object-position: 50% 12%; }
    /* Cutout photos (transparent PNG): a white wash fading in from the left
       so the figure dissolves into the page rather than ending on a hard edge. */
    .hero__media--cutout::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: linear-gradient(to right, #f9f9f9 0%, rgba(249, 249, 249, 0) 34%);
    }
  }

  @media (max-width: 980px) {
    /* Stack: the photo sits full-width beneath the hero copy. */
    .hero__media {
      margin-top: clamp(2rem, 5vw, 3rem);
      width: 100%;
      aspect-ratio: 5 / 4;
    }
    .hero__media img { object-position: 50% 18%; }
  }

  /* Section helpers used on this page. */
  .services-page .section--tight { padding-top: clamp(2rem, 4vw, 3.5rem); }
  .services-page .section__title-note {
    margin: 1.5rem 0 0;
    font-size: var(--fs-body);
    line-height: 1.55;
    color: var(--muted);
    max-width: 52ch;
  }

  /* ----- Tiers (core pricing cards) ----- */
  .services-page .tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.25rem, 2.5vw, 2rem);
    align-items: stretch;
  }
  .services-page .tier {
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: clamp(1.75rem, 2.6vw, 2.5rem);
    position: relative;
    transition: border-color var(--dur-fast) var(--ease-soft),
                transform var(--dur-fast) var(--ease-soft),
                box-shadow var(--dur-fast) var(--ease-soft);
  }
  .services-page .tier:hover {
    border-color: var(--line-strong);
    transform: translateY(-3px);
    box-shadow: 0 22px 48px -26px rgba(0, 18, 44, 0.22);
  }
  .services-page .tier--featured {
    background: var(--navy);
    border-color: var(--navy);
    color: var(--paper);
  }
  .services-page .tier--featured ::selection { background: var(--paper); color: var(--navy); }
  .services-page .tier--featured:hover { border-color: var(--navy-deep); }

  .services-page .tier__flag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    align-self: flex-start;
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    margin-bottom: 1.5rem;
  }
  .services-page .tier__flag--rec {
    background: var(--blue-soft);
    color: var(--navy-deep);
  }
  .services-page .tier__flag--scarce {
    background: rgba(51, 135, 186, 0.1);
    color: var(--blue);
    border: 1px solid rgba(51, 135, 186, 0.3);
  }
  .services-page .tier__flag--scarce .dot {
    width: 7px; height: 7px;
    border-radius: 999px;
    background: var(--blue);
    position: relative;
  }
  .services-page .tier__flag--scarce .dot::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 999px;
    border: 1px solid var(--blue);
    opacity: 0.5;
    animation: pulseRing 2.6s var(--ease-soft) infinite;
  }
  .services-page .tier__flag--ghost { visibility: hidden; }

  .services-page .tier__num {
    font-size: var(--fs-label);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 0.85rem;
  }
  .services-page .tier--featured .tier__num { color: var(--blue-soft); }
  .services-page .tier__name {
    font-family: var(--display);
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--navy);
    margin: 0 0 1.25rem;
  }
  .services-page .tier--featured .tier__name { color: var(--paper); }

  .services-page .tier__price {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
  }
  .services-page .tier__price-figure {
    font-family: var(--display);
    font-size: clamp(2.2rem, 3.6vw, 2.9rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--navy);
  }
  .services-page .tier--featured .tier__price-figure { color: var(--paper); }
  .services-page .tier__price-unit {
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    color: var(--muted);
  }
  .services-page .tier--featured .tier__price-unit { color: rgba(250, 250, 250, 0.7); }
  .services-page .tier__price-pre {
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    margin-right: 0.15rem;
    align-self: center;
  }
  .services-page .tier--featured .tier__price-pre { color: var(--blue-soft); }
  .services-page .tier__terms {
    margin: 0.85rem 0 0;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    color: var(--muted);
  }
  .services-page .tier--featured .tier__terms { color: rgba(250, 250, 250, 0.72); }

  .services-page .tier__rule {
    height: 1px;
    background: var(--line);
    margin: 1.75rem 0;
  }
  .services-page .tier--featured .tier__rule { background: rgba(255, 255, 255, 0.18); }

  .services-page .tier__list {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
  }
  .services-page .tier__list li {
    font-size: var(--fs-body);
    line-height: 1.5;
    color: var(--graphite);
    padding-left: 1.4rem;
    position: relative;
  }
  .services-page .tier--featured .tier__list li { color: rgba(250, 250, 250, 0.86); }
  .services-page .tier__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--blue);
  }
  .services-page .tier--featured .tier__list li::before { background: var(--blue-soft); }

  .services-page .tier__cta {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.9rem 1.25rem;
    border-radius: 999px;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    border: 1px solid var(--navy);
    color: var(--navy);
    transition: background var(--dur-fast) var(--ease-soft),
                color var(--dur-fast) var(--ease-soft),
                gap var(--dur-fast) var(--ease),
                transform 220ms var(--ease-emph);
    margin-top: auto;
  }
  .services-page .tier__cta:hover,
  .services-page .tier__cta:focus-visible { background: var(--navy); color: var(--paper); gap: 1rem; outline: none; }
  .services-page .tier__cta:active { transform: translateY(1px); }
  .services-page .tier--featured .tier__cta {
    background: var(--paper);
    border-color: var(--paper);
    color: var(--navy);
  }
  .services-page .tier--featured .tier__cta:hover,
  .services-page .tier--featured .tier__cta:focus-visible {
    background: var(--blue-soft);
    border-color: var(--blue-soft);
    color: var(--navy-deep);
  }
  /* Button-in-button arrow disc, matching the nav CTA language. */
  .services-page .tier__cta svg {
    width: 26px; height: 26px; padding: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 12%, transparent);
    transition: transform var(--dur-fast) var(--ease-emph),
                background var(--dur-fast) var(--ease-soft);
  }
  .services-page .tier__cta:hover svg,
  .services-page .tier__cta:focus-visible svg { transform: translate(2px, -2px); }

  @media (max-width: 940px) {
    .services-page .tiers { grid-template-columns: 1fr; max-width: 540px; margin: 0 auto; }
    .services-page .tier__flag--ghost { display: none; }
  }

  /* ----- Standalone offerings ----- */
  .services-page .offer__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
  }
  .services-page .offer {
    display: flex;
    flex-direction: column;
    padding: clamp(2rem, 3vw, 2.75rem);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 6px;
    transition: border-color var(--dur-fast) var(--ease-soft),
                transform var(--dur-fast) var(--ease-soft),
                box-shadow var(--dur-fast) var(--ease-soft);
  }
  .services-page .offer:hover,
  .services-page .offer:focus-within {
    border-color: var(--line-strong);
    transform: translateY(-2px);
    box-shadow: 0 18px 40px -22px rgba(0, 18, 44, 0.18);
  }
  .services-page .offer__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
  }
  .services-page .offer__num {
    font-size: var(--fs-label);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 0.85rem;
  }
  .services-page .offer__name {
    font-family: var(--display);
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--navy);
    margin: 0;
  }
  .services-page .offer__price {
    font-family: var(--display);
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--navy);
    white-space: nowrap;
  }
  .services-page .offer__price small {
    display: block;
    font-family: var(--body);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.2rem;
  }
  .services-page .offer__copy {
    font-size: var(--fs-body);
    line-height: 1.55;
    color: var(--graphite);
    margin: 1.5rem 0 2rem;
    max-width: 46ch;
    flex: 1;
  }
  .services-page .offer__detail {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--muted);
    margin: 0 0 2rem;
  }
  .services-page .offer__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    color: var(--navy);
    border-bottom: 1px solid var(--navy);
    padding-bottom: 0.3rem;
    align-self: flex-start;
    transition: gap var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease-soft),
                border-color var(--dur-fast) var(--ease-soft),
                transform 220ms var(--ease-emph);
  }
  .services-page .offer:hover .offer__cta,
  .services-page .offer:focus-within .offer__cta { gap: 0.95rem; }
  .services-page .offer__cta:focus-visible { color: var(--blue); border-color: var(--blue); outline: none; }
  .services-page .offer__cta:active { transform: translateY(1px); }
  .services-page .offer__cta svg { width: 13px; height: 13px; transition: transform var(--dur-fast) var(--ease); }
  .services-page .offer:hover .offer__cta svg,
  .services-page .offer__cta:focus-visible svg { transform: translate(2px, -2px); }
  @media (max-width: 720px) {
    .services-page .offer__grid { grid-template-columns: 1fr; }
  }

  /* ----- Journey (navy band: how the work unfolds) ----- */
  .services-page .journey__lede {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(1.7rem, 3.4vw, 2.75rem);
    line-height: 1.2;
    letter-spacing: -0.018em;
    color: var(--paper);
    max-width: 30ch;
    margin: 0 0 clamp(3rem, 5vw, 4rem);
  }
  .services-page .journey__lede em { font-style: italic; color: var(--blue-soft); }
  .services-page .journey__steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    padding-top: clamp(2.5rem, 4vw, 3.5rem);
  }
  .services-page .journey__step-label {
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--blue-soft);
    margin-bottom: 0.9rem;
  }
  .services-page .journey__step-name {
    font-family: var(--display);
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--paper);
    margin: 0 0 1rem;
    letter-spacing: -0.012em;
  }
  .services-page .journey__step-copy {
    font-size: var(--fs-body);
    line-height: 1.5;
    color: rgba(250, 250, 250, 0.8);
    margin: 0;
    max-width: 34ch;
  }
  @media (max-width: 820px) {
    .services-page .journey__steps { grid-template-columns: 1fr; gap: 2rem; }
  }

  /* Homepage Begin / contact actions: Schedule CTA + email link.
     Sit side by side with clear spacing; stack when the row gets tight. */
  .begin__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(1.5rem, 3vw, 2.5rem);
  }
  .begin__schedule {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.95rem 1.75rem;
    background: transparent;
    color: var(--navy);
    border: 1px solid var(--navy);
    border-radius: 999px;
    font-family: var(--body);
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-soft),
                color var(--dur-fast) var(--ease-soft),
                transform var(--dur-fast) var(--ease-soft);
  }
  .begin__schedule:hover,
  .begin__schedule:focus-visible {
    background: var(--navy);
    color: var(--paper);
    transform: translateY(-2px);
  }
  .begin__schedule:active { transform: translateY(0); }
  /* Not enough room on one line: stack the button above the email link. */
  @media (max-width: 560px) {
    .begin__actions {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  /* ============================================================
     EDITOR BLOCKS — Practice Hero (stone/practice-hero)
     Standalone classes so the block renders identically in the
     editor canvas and on the front end (no .practice-page ancestor).
     ============================================================ */
  .stone-phero {
    padding: clamp(5rem, 9vw, 8.5rem) 0 clamp(3rem, 6vw, 5rem);
    background: var(--paper);
    position: relative;
  }
  .stone-phero__index {
    font-size: var(--fs-label);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--blue);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
  }
  .stone-phero__index::before {
    content: "";
    width: 32px;
    height: 1px;
    background: var(--blue);
  }
  .stone-phero__title {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(2.4rem, 5vw, 4.5rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--navy);
    margin: 0 0 2.25rem;
    max-width: 20ch;
  }
  .stone-phero__lede {
    max-width: 56ch;
    font-size: var(--fs-body-plus);
    line-height: 1.55;
    color: var(--graphite);
    margin: 0;
  }

  /* The work/engagement grids are constrained to the .wrap container; when a
     block is set to Full width they span edge-to-edge with the colored band. */
  .stone-work .wrap,
  .stone-engagement .wrap,
  .stone-begin .wrap { width: 100%; }