/* Circular type stack.
       Lineto CircularXX — licensed for altitude.social and subdomains
       (Web licence purchased 2026-05-02, <50K monthly pageviews).
       Full glyph set, no unicode-range hack needed. local() fallbacks
       remain for users with the desktop fonts installed and as a graceful
       degradation if the woff2 fails to load.
       Weights in use: 450 (Book) / 500 (Medium) / 600,700 (Bold).
       900 / Heavy banned per brand voice rule. */
    @font-face {
      font-family: 'Circular';
      font-weight: 450;
      font-style: normal;
      font-display: swap;
      src: url('assets/fonts/CircularXXWeb-Book.woff2') format('woff2'),
           local('Circular Std Book'), local('CircularStd-Book'),
           local('Avenir Next Regular');
    }
    @font-face {
      font-family: 'Circular';
      font-weight: 450;
      font-style: italic;
      font-display: swap;
      src: url('assets/fonts/CircularXXWeb-BookItalic.woff2') format('woff2'),
           local('Circular Std Book Italic'), local('CircularStd-BookItalic'),
           local('Avenir Next Italic');
    }
    @font-face {
      font-family: 'Circular';
      font-weight: 500;
      font-style: normal;
      font-display: swap;
      src: url('assets/fonts/CircularXXWeb-Medium.woff2') format('woff2'),
           local('Circular Std Medium'), local('CircularStd-Medium'),
           local('Avenir Next Medium');
    }
    @font-face {
      font-family: 'Circular';
      font-weight: 600;
      font-style: normal;
      font-display: swap;
      src: url('assets/fonts/CircularXXWeb-Bold.woff2') format('woff2'),
           local('Circular Std Bold'), local('CircularStd-Bold'),
           local('Avenir Next Demi Bold');
    }
    @font-face {
      font-family: 'Circular';
      font-weight: 700;
      font-style: normal;
      font-display: swap;
      src: url('assets/fonts/CircularXXWeb-Bold.woff2') format('woff2'),
           local('Circular Std Bold'), local('CircularStd-Bold'),
           local('Avenir Next Bold');
    }

    /* Modern minimal reset */
    *, *::before, *::after { box-sizing: border-box; }
    html, body { overflow-x: clip; }
    body { margin: 0; padding: 0; }
    img, video { display: block; max-width: 100%; height: auto; }

    /* Design tokens */
    :root {
      /* Color - primary */
      --paper: #FAFAF7;
      --ink: #0E0F12;
      --brand-deep: #00405E;
      --brand: #2F86AF;
      --brand-soft: #D3E9FD;

      /* Color - extended ink scale (transferred from v3 live site) */
      --ink-1: #2A2D33;   /* primary muted body */
      --ink-2: #6E727C;   /* secondary metadata */
      --ink-3: #B6B9C0;   /* tertiary, captions */

      /* Color - editorial rules (transferred from v3 live site) */
      --rule: #E8E5DD;          /* primary divider */
      --rule-soft: #F0EDE5;     /* between-row hairline */

      /* Color - brand accent line (transferred from v3 live site) */
      --brand-line: #97C5DF;

      /* Type scale - fluid clamp() values so display headings scale smoothly
         from 320px through 1440px+ viewports. At 320px: display-l ~35px,
         display-m ~24px. At 1440px: display-l 72px, display-m 48px. The
         eyebrow stays fixed because it is a precise UI label. */
      --display-l: clamp(40px, 4vw + 22px, 72px);
      --display-m: clamp(30px, 2vw + 18px, 48px);
      --title: clamp(18px, 0.4vw + 16px, 22px);
      --body: clamp(16px, 0.15vw + 15px, 17px);
      --caption: clamp(12px, 0.1vw + 11.5px, 13px);
      --eyebrow: 11px;

      /* Spacing - 8px scale */
      --space-1: 4px;
      --space-2: 8px;
      --space-3: 12px;
      --space-4: 16px;
      --space-5: 24px;
      --space-6: 32px;
      --space-7: 48px;
      --space-8: 64px;
      --space-9: 96px;
      --space-10: 128px;
      --space-11: 160px;

      /* Container grid (transferred from v3 live site) */
      --container: 1280px;
      --gutter: 24px;
      --col: 12;
    }

    /* Base typography */
    body {
      background: var(--paper);
      color: var(--ink);
      font-family: 'Circular', 'Avenir Next', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-weight: 450;
      font-size: var(--body);
      line-height: 1.55;
      font-feature-settings: "kern" 1, "liga" 1, "ss01" 1;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    h1, h2, h3 {
      font-weight: 600;
      text-wrap: balance;
      letter-spacing: -0.025em;
      margin: 0;
    }
    h1 { font-size: var(--display-l); line-height: 1.05; letter-spacing: -0.04em; }
    h2 { font-size: var(--display-m); line-height: 1.1; letter-spacing: -0.03em; }
    h3 { font-size: var(--title); line-height: 1.25; letter-spacing: -0.015em; }
    p { margin: 0; }
    strong { font-weight: 500; }

    /* Body paragraph orphan prevention. text-wrap: pretty asks the
       browser to avoid orphan last-lines without re-laying-out as
       aggressively as text-wrap: balance. Headings keep balance
       (set above on h1/h2/h3). Browsers without support fall back
       to default wrapping with no penalty. */
    p, .intro, .subhead, .body-text, .bio,
    .work-modal__description, .contact-modal__hint,
    .email-fallback, .conductor-strip .body-text {
      text-wrap: pretty;
    }

    a {
      color: inherit;
      text-decoration: none;
    }
    a:focus-visible {
      outline: 2px solid var(--brand);
      outline-offset: 2px;
    }
    button:focus-visible {
      outline: 2px solid var(--brand);
      outline-offset: 2px;
    }

    /* Container: 1280px / 24px gutter, 12-col scaffold (transferred from v3) */
    .container {
      max-width: var(--container);
      margin-left: auto;
      margin-right: auto;
      width: 100%;
      padding-left: var(--gutter);
      padding-right: var(--gutter);
    }

    /* Section spacing - fluid so vertical rhythm scales with viewport.
       Sections themselves are full-bleed so the hero gradient and
       Conductor strip can extend edge-to-edge; inner content sits inside
       .container. */
    section, footer {
      padding-top: clamp(56px, 6vw, 96px);
      padding-bottom: clamp(56px, 6vw, 96px);
    }

    /* Header / nav - fluid padding */
    .site-header {
      padding-top: clamp(16px, 2vw, 24px);
      padding-bottom: clamp(16px, 2vw, 24px);
    }
    .site-nav {
      display: flex;
      align-items: center;
      gap: var(--space-6);
    }
    .site-nav .wordmark {
      font-weight: 600;
      font-size: var(--title);
      display: inline-flex;
      align-items: center;
      transition: opacity 0.2s ease-out;
    }
    .site-nav .wordmark:hover { opacity: 0.85; }
    @media (prefers-reduced-motion: reduce) {
      .site-nav .wordmark { transition: none; }
    }
    /* Logo lockup is sacred: width auto, fixed height, contain so flex
       parents never stretch the aspect ratio. */
    .wordmark-logo {
      width: auto;
      height: 32px;
      object-fit: contain;
      display: block;
    }
    .footer-logo {
      width: auto;
      height: 26px;
      object-fit: contain;
      display: block;
    }
    .site-nav .nav-links {
      display: flex;
      gap: var(--space-5);
      margin-left: auto;
      list-style: none;
      padding: 0;
      margin-top: 0;
      margin-bottom: 0;
    }
    .site-nav .nav-cta {
      margin-left: var(--space-5);
    }

    /* Top-nav links: 44px tap target on mobile. Inline padding keeps
       the visual rhythm tight on desktop. Sliding underline on hover. */
    .site-nav .nav-links a {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      padding: var(--space-2) 0;
      position: relative;
    }
    .site-nav .nav-links a::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 6px;
      height: 1px;
      background: currentColor;
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
    }
    .site-nav .nav-links a:hover::after { transform: scaleX(1); }
    @media (prefers-reduced-motion: reduce) {
      .site-nav .nav-links a::after { transition: none; }
    }

    /* Buttons - bare functional, no rounded card chrome.
       44px minimum touch target for a11y baseline.
       Hover and active states for liveness. */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: clamp(10px, 1vw + 6px, 14px) clamp(20px, 2vw + 12px, 32px);
      font: inherit;
      font-size: var(--body);
      font-weight: 500;
      background: var(--ink);
      color: var(--paper);
      border: 1px solid var(--ink);
      cursor: pointer;
      transition: transform 0.15s ease-out, background 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out;
    }
    .btn:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
    .btn:active { transform: scale(0.98); }
    .btn-secondary {
      background: transparent;
      color: var(--ink);
    }
    .btn-secondary:hover { background: var(--brand-soft); border-color: var(--ink); color: var(--ink); }
    @media (prefers-reduced-motion: reduce) {
      .btn { transition: none; }
    }

    /* Skip-link: first focusable element. Hidden until focused, then
       brings into view at the top of the viewport. Targets #main. */
    .skip-link {
      position: absolute;
      left: -9999px;
      top: auto;
      width: 1px;
      height: 1px;
      overflow: hidden;
      z-index: 9999;
    }
    .skip-link:focus,
    .skip-link:focus-visible {
      position: fixed;
      left: var(--space-4);
      top: var(--space-4);
      width: auto;
      height: auto;
      padding: var(--space-3) var(--space-5);
      background: var(--ink);
      color: var(--paper);
      font-weight: 500;
      outline: 2px solid var(--brand);
      outline-offset: 2px;
    }

    /* Email line: the mailto link is a primary interactive control.
       44px tap target. Sliding underline on hover, mirroring nav. */
    .contact .email-line a {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      position: relative;
    }
    .contact .email-line a::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 8px;
      height: 1px;
      background: currentColor;
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
    }
    .contact .email-line a:hover::after { transform: scaleX(1); }
    @media (prefers-reduced-motion: reduce) {
      .contact .email-line a::after { transition: none; }
    }

    /* Hero: paper base with a soft animated gradient orb that drifts slowly
       through the section. Replaces the static linear gradient. The orb is
       a heavily blurred radial gradient on a ::before pseudo-element so
       the actual hero content (copy + tile grid) stays sharp on top. */
    .hero {
      background: var(--paper);
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }
    .hero::before {
      content: '';
      position: absolute;
      /* Inset -50% extends the orb element well beyond the hero box so the
         translate animation can travel ~25% in each direction without
         exposing any hard edge. */
      inset: -50%;
      background:
        radial-gradient(ellipse 38% 35% at center, var(--brand-soft) 0%, transparent 62%),
        radial-gradient(ellipse 32% 30% at 35% 65%, rgba(211, 233, 253, 0.55) 0%, transparent 60%);
      filter: blur(70px);
      will-change: transform;
      /* Linear timing + 8 evenly-spaced keyframes on a circle = smooth
         orbital drift around the hero perimeter (top → right → bottom → left). */
      animation: heroOrbOrbit 22s linear infinite;
      z-index: -1;
      pointer-events: none;
    }
    @keyframes heroOrbOrbit {
      0%    { transform: translate3d(0, -25%, 0) scale(1); }
      12.5% { transform: translate3d(18%, -18%, 0) scale(1.06); }
      25%   { transform: translate3d(25%, 0, 0) scale(1.1); }
      37.5% { transform: translate3d(18%, 18%, 0) scale(1.04); }
      50%   { transform: translate3d(0, 25%, 0) scale(1); }
      62.5% { transform: translate3d(-18%, 18%, 0) scale(0.96); }
      75%   { transform: translate3d(-25%, 0, 0) scale(0.92); }
      87.5% { transform: translate3d(-18%, -18%, 0) scale(0.97); }
      100%  { transform: translate3d(0, -25%, 0) scale(1); }
    }
    @media (prefers-reduced-motion: reduce) {
      .hero::before { animation: none; }
    }
    .hero .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(280px, 1fr);
      gap: clamp(24px, 4vw, 80px);
      align-items: center;
    }
    .hero h1 {
      max-width: 18ch;
    }
    .hero .subhead {
      max-width: 60ch;
      margin-top: var(--space-5);
      font-size: var(--title);
      line-height: 1.4;
      text-wrap: pretty;
    }
    .hero .subhead .word {
      display: inline-block;
    }
    .hero .cta-row {
      margin-top: var(--space-7);
      display: flex;
      gap: var(--space-4);
      flex-wrap: wrap;
    }

    /* Hero ambient: 2x2 cycling tile grid replaces the single Studio practice
       block. All 4 tiles are visible at once. One tile is "active" (navy
       brand-deep, paper text). The other 3 are "resting" (paper, rule
       border, ink-2 text). The active state rotates clockwise every 4
       seconds via JS, gated behind reduced-motion. */
    .hero-tiles {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: var(--space-2);
      width: 100%;
    }
    .hero-tile {
      aspect-ratio: 1 / 1;
      padding: clamp(14px, 1.5vw, 24px);
      display: flex;
      flex-direction: column;
      gap: clamp(4px, 0.4vw, 8px);
      background: var(--paper);
      color: var(--ink);
      border: 1px solid var(--rule);
      transition: background 0.6s ease-out, color 0.6s ease-out, border-color 0.6s ease-out;
      overflow: hidden;
    }
    .hero-tile.is-active {
      background: var(--brand-deep);
      color: var(--paper);
      border-color: var(--brand-deep);
    }
    .hero-tile .placeholder-eyebrow,
    .hero-tile .placeholder-tag { opacity: 0.85; }
    .hero-tile .placeholder-label {
      color: inherit;
      font-size: clamp(20px, 1.5vw + 12px, 32px);
      line-height: 1.05;
      letter-spacing: -0.025em;
      font-weight: 600;
      text-wrap: balance;
    }
    .hero-tile .placeholder-eyebrow {
      font-size: 11px;
      letter-spacing: 0.08em;
    }
    .hero-tile .placeholder-tag {
      font-size: clamp(13px, 0.4vw + 11px, 16px);
      letter-spacing: 0;
      text-wrap: balance;
      opacity: 0.85;
    }
    @media (prefers-reduced-motion: reduce) {
      .hero-tile { transition: none; }
    }

    /* Image-backed hero tiles. Resting state shows the photo with a paper
       gradient at the bottom protecting the eyebrow + label + tag text.
       Active state hides the image and lets the navy --brand-deep cover
       the tile (paper text on navy). Image source supplied per-tile via
       inline style="--tile-bg: url(...)". */
    .hero-tile.has-image {
      background-image: var(--tile-bg);
      background-size: cover;
      background-position: center;
      position: relative;
      isolation: isolate;
      /* Push all three text spans (eyebrow + label + tag) to the
         bottom of the tile. Image fills the top, gradient protects
         the lower text zone. */
      justify-content: flex-end;
    }
    .hero-tile.has-image::before {
      content: '';
      position: absolute;
      inset: 0;
      /* Image gets the top 60% of the tile fully visible (where subjects
         sit). Gradient transitions 60-80% from transparent to fully opaque
         paper, then opaque from 80-100% protecting the text cluster which
         sits flex-end in the bottom ~22%. Earlier 40-60% washed the image
         too far up; pushing the transition to 60-80% restores subject
         legibility while keeping the text fully readable on paper. */
      background: linear-gradient(180deg,
        rgba(250, 250, 247, 0) 0%,
        rgba(250, 250, 247, 0) 55%,
        rgba(250, 250, 247, 0.55) 65%,
        rgba(250, 250, 247, 0.95) 72%,
        var(--paper) 76%,
        var(--paper) 100%);
      z-index: 0;
      transition: opacity 0.6s ease-out;
    }
    .hero-tile.has-image > * { position: relative; z-index: 1; }
    /* Override .placeholder-tag's default margin-top: auto so all three
       text spans cluster together at flex-end, instead of eyebrow + label
       stranded at the top while tag is auto-pushed to the bottom. */
    .hero-tile.has-image .placeholder-tag { margin-top: 0; }
    .hero-tile.has-image.is-active {
      background-image: none;
      background-color: var(--brand-deep);
      /* Keep text at flex-end on active so the rotation doesn't jolt
         text positions when active state cycles in/out. */
    }
    .hero-tile.has-image.is-active::before { opacity: 0; }

    /* Typographic D-25 placeholder block, used where v3 had imagery.
       Fills the visual void with editorial type, brand-deep field, paper
       text. No invented brand claims; placeholder text labels what's there. */
    .placeholder-block {
      background: var(--brand-deep);
      color: var(--paper);
      padding: var(--space-7);
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
      aspect-ratio: 4 / 3;
      width: 100%;
    }
    .placeholder-block--square { aspect-ratio: 1 / 1; }
    .placeholder-block--rule-soft {
      background: var(--rule-soft);
      color: var(--ink);
    }
    .placeholder-eyebrow {
      font-size: var(--eyebrow);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      opacity: 0.7;
      font-weight: 500;
    }
    .placeholder-label {
      font-size: var(--display-m);
      font-weight: 600;
      line-height: 1.05;
      letter-spacing: -0.025em;
    }
    .placeholder-tag {
      font-size: var(--caption);
      letter-spacing: 0.04em;
      margin-top: auto;
      opacity: 0.7;
      text-transform: uppercase;
    }
    .placeholder-block--rule-soft .placeholder-eyebrow,
    .placeholder-block--rule-soft .placeholder-tag { opacity: 0.55; }

    /* Capabilities decorator: scoped fluid label so "End-to-end social"
       does not break to three lines inside the constrained right column. */
    .caps-decorator .placeholder-label {
      font-size: clamp(24px, 1.6vw + 14px, 36px);
      line-height: 1.05;
      text-wrap: balance;
    }
    .caps-decorator .placeholder-eyebrow,
    .caps-decorator .placeholder-tag {
      text-wrap: balance;
    }

    /* Capabilities decorator slot: aside placeholder sitting beside the list.
       Cycling content stack: only one .caps-cycle is visible at a time.
       Crossfades every 5 seconds via JS, gated behind reduced-motion. */
    .capabilities .caps-grid {
      display: grid;
      grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
      gap: var(--space-8);
      align-items: start;
      margin-top: var(--space-7);
    }
    .capabilities .caps-grid ul { margin-top: 0; }
    .caps-decorator,
    .caps-feature {
      aspect-ratio: auto;
      padding: var(--space-6);
      flex: 1 1 0;
      min-height: 0;
    }
    .caps-decorator {
      position: relative;
    }
    /* Right-column stack: existing decorator (cycling) on top, second
       static feature panel below. Together they fill the column height
       set by the 8-item list, closing the desktop whitespace below the
       original short box. The feature panel restates the strongest
       Capabilities body claim ("all execution, all creative") as a
       glanceable mark. A slow underline sweep on the bottom edge gives
       quiet motion without competing with the top box's cycle. */
    .caps-stack {
      display: flex;
      flex-direction: column;
      gap: var(--space-5);
      align-self: stretch;
    }
    .caps-feature {
      position: relative;
      overflow: hidden;
    }
    .caps-feature .placeholder-label {
      font-size: clamp(24px, 1.6vw + 14px, 36px);
      line-height: 1.05;
      text-wrap: balance;
    }
    .caps-feature .placeholder-eyebrow,
    .caps-feature .placeholder-tag {
      text-wrap: balance;
    }
    .caps-feature-sweep {
      position: absolute;
      left: 0;
      bottom: 0;
      height: 2px;
      width: 30%;
      background: linear-gradient(to right, transparent, var(--paper), transparent);
      opacity: 0.55;
      animation: capsFeatureSweep 9s linear infinite;
      pointer-events: none;
      will-change: transform;
    }
    @keyframes capsFeatureSweep {
      from { transform: translate3d(-110%, 0, 0); }
      to   { transform: translate3d(370%, 0, 0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .caps-feature-sweep { animation: none; opacity: 0; }
    }
    .caps-cycle {
      position: absolute;
      inset: var(--space-6);
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.6s ease-out, visibility 0s linear 0.6s;
    }
    .caps-cycle.is-active {
      opacity: 1;
      visibility: visible;
      transition: opacity 0.6s ease-out, visibility 0s linear 0s;
    }
    @media (prefers-reduced-motion: reduce) {
      .caps-cycle { transition: none; }
    }

    /* Selected work: 3x2 card grid (replaces the typographic list).
       Cards have sharp edges (border-radius: 0), 4/3 aspect ratio,
       alternating rule-soft and paper backgrounds, and a hover translate
       with brand-soft tint. */
    .selected-work .intro {
      max-width: 60ch;
      margin-top: var(--space-5);
    }
    .work-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--space-4);
      margin-top: var(--space-7);
      list-style: none;
      padding: 0;
    }
    .work-card {
      aspect-ratio: 4 / 3;
      padding: var(--space-6);
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
      background: var(--paper);
      border: 1px solid var(--rule);
      border-radius: 0;
      transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.3s ease-out, border-color 0.3s ease-out;
      will-change: transform;
    }
    .work-card:nth-child(even) {
      background: var(--rule-soft);
    }
    .work-card:hover {
      transform: translateY(-4px);
      background: var(--brand-soft);
      border-color: var(--brand-line);
    }
    .work-tag {
      font-size: var(--eyebrow);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--ink-2);
      font-weight: 500;
      /* Tag now sits BELOW the label and shares the bottom row with the
         "Read more →" affordance — reserve right-side room so the tag
         text never collides with Read more. */
      padding-right: var(--space-9);
    }
    .work-label {
      font-size: var(--title);
      font-weight: 600;
      line-height: 1.25;
      color: var(--ink);
      letter-spacing: -0.015em;
      /* margin-top: auto pushes the [label, tag] cluster to the bottom of
         the card. Tag follows label in DOM so it sits below it. */
      margin-top: auto;
    }
    @media (prefers-reduced-motion: reduce) {
      .work-card { transition: none; }
      .work-card:hover { transform: none; }
    }

    /* Image-backed work cards: image fills the card, an ink-fade gradient
       at the bottom protects the white tag + label + Read more. Image
       supplied per-card via inline style="--card-bg: url(...)" plus an
       optional background-position to anchor the focal point. */
    .work-card.has-image {
      background-image: var(--card-bg);
      background-size: cover;
      background-position: center;
      position: relative;
      isolation: isolate;
    }
    .work-card.has-image::before {
      content: '';
      position: absolute;
      inset: 0;
      /* Ink gradient fades up from the bottom so the white text reads
         on its own dark zone regardless of what's behind it. */
      background: linear-gradient(180deg,
        rgba(14, 15, 18, 0) 0%,
        rgba(14, 15, 18, 0) 30%,
        rgba(14, 15, 18, 0.55) 60%,
        rgba(14, 15, 18, 0.85) 100%);
      z-index: 0;
      transition: background 0.3s ease-out;
    }
    /* All children stack above the gradient, except .work-card__more which
       is absolutely positioned (re-asserted in its own rule below). */
    .work-card.has-image > :not(.work-card__more) { position: relative; z-index: 1; }
    /* Override the default nth-child(even) paper/rule-soft alternation:
       imaged cards always show the photo full-bleed, no card-color band. */
    .work-card.has-image,
    .work-card.has-image:nth-child(even) { background-color: transparent; }
    .work-card.has-image:hover { background-color: transparent; }
    .work-card.has-image:hover::before {
      background: linear-gradient(180deg,
        rgba(14, 15, 18, 0) 0%,
        rgba(14, 15, 18, 0) 25%,
        rgba(14, 15, 18, 0.6) 55%,
        rgba(14, 15, 18, 0.9) 100%);
    }
    /* Text colors flip to paper on imaged cards. */
    .work-card.has-image .work-tag {
      color: var(--paper);
      opacity: 0.92;
    }
    .work-card.has-image .work-label { color: var(--paper); }
    .work-card.has-image .work-card__more {
      /* Re-assert absolute positioning so Read more sits at the bottom-right
         corner consistently across all 6 cards regardless of card variant. */
      position: absolute;
      z-index: 1;
      color: var(--paper);
      opacity: 0.85;
    }
    .work-card.has-image:hover .work-card__more {
      color: var(--paper);
      opacity: 1;
    }

    /* Color-block work cards: solid navy field, paper text. Used where an
       image would either not exist or compete with the imaged cards. Same
       4:3 box, same Read-more placement, same hover lift. */
    .work-card.color-block,
    .work-card.color-block:nth-child(even) {
      background: var(--brand-deep);
      border-color: var(--brand-deep);
    }
    .work-card.color-block:hover {
      background: var(--brand-deep);
      border-color: var(--brand-deep);
      filter: brightness(1.1);
    }
    .work-card.color-block .work-tag {
      color: var(--paper);
      opacity: 0.85;
    }
    .work-card.color-block .work-label { color: var(--paper); }
    .work-card.color-block .work-card__more {
      color: var(--paper);
      opacity: 0.8;
    }
    .work-card.color-block:hover .work-card__more {
      color: var(--paper);
      opacity: 1;
    }

    /* Click-to-expand affordances on Selected Work tiles. The card is
       a button-role interactive element. Cursor pointer signals that.
       The "Read more →" cue sits in the bottom-right corner of the card
       at caption size in muted ink, reducing ambiguity for visitors who
       miss the hover-lift. Reset list-item bullet styling that ul li
       inherits, since work-card is now interactive content. */
    .work-card { cursor: pointer; position: relative; }
    .work-card__more {
      position: absolute;
      bottom: var(--space-5);
      right: var(--space-5);
      font-size: var(--caption);
      color: var(--ink-2);
      letter-spacing: 0.02em;
    }
    .work-card:hover .work-card__more {
      color: var(--ink);
    }

    /* Modal: lives inside .selected-work but uses position fixed so it
       overlays the entire viewport. Sharp edges per the v3.6 ruleset
       (no rounded chrome). Paper panel over an ink overlay with subtle
       backdrop blur. Close affordances: X button, click-outside on
       overlay, Escape key. Focus returns to the originating tile on
       close. */
    .work-modal[hidden] { display: none; }
    .work-modal {
      position: fixed; inset: 0; z-index: 100;
      display: flex; align-items: center; justify-content: center;
      padding: var(--space-5);
    }
    .work-modal__overlay {
      position: absolute; inset: 0;
      background: rgba(14, 15, 18, 0.55);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
      cursor: pointer;
    }
    .work-modal__panel {
      position: relative; z-index: 1;
      background: var(--paper);
      max-width: 640px; width: 100%;
      padding: var(--space-7) var(--space-6);
      border: 1px solid var(--rule);
      border-radius: 0;
      display: flex; flex-direction: column; gap: var(--space-4);
    }
    .work-modal__close {
      position: absolute; top: var(--space-3); right: var(--space-3);
      background: transparent; border: 0; color: var(--ink-2);
      font-size: 24px; line-height: 1; cursor: pointer;
      width: 44px; height: 44px;
      display: flex; align-items: center; justify-content: center;
      transition: color 0.2s ease-out;
    }
    .work-modal__close:hover { color: var(--ink); }
    .work-modal__tag {
      font-size: var(--eyebrow); text-transform: uppercase;
      letter-spacing: 0.08em; color: var(--ink-2);
    }
    .work-modal__label {
      font-size: var(--display-m); font-weight: 600; line-height: 1.1;
      color: var(--ink); margin: 0;
    }
    .work-modal__description {
      font-size: var(--body); line-height: 1.6; color: var(--ink-1);
    }
    @media (max-width: 600px) {
      .work-modal__panel { padding: var(--space-6) var(--space-5); }
    }
    @media (prefers-reduced-motion: reduce) {
      .work-modal__overlay { backdrop-filter: none; -webkit-backdrop-filter: none; }
      .work-modal__close { transition: none; }
    }

    /* Contact modal: mirrors .work-modal pattern. Fixed overlay, paper
       panel, sharp edges. Wider max-width (720px) than work-modal because
       the form needs space for two-column field layout. Vertical scroll
       on the panel itself when the form exceeds viewport height, since
       the contact modal can be opened on small viewports. */
    .contact-modal[hidden] { display: none; }
    .contact-modal {
      position: fixed; inset: 0; z-index: 100;
      display: flex; align-items: center; justify-content: center;
      padding: var(--space-5);
      overflow-y: auto;
    }
    .contact-modal__overlay {
      position: absolute; inset: 0;
      background: rgba(14, 15, 18, 0.55);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
      cursor: pointer;
    }
    .contact-modal__panel {
      position: relative; z-index: 1;
      background: var(--paper);
      max-width: 720px; width: 100%;
      max-height: calc(100vh - var(--space-7));
      overflow-y: auto;
      padding: var(--space-7) var(--space-6);
      border: 1px solid var(--rule);
      border-radius: 0;
      display: flex; flex-direction: column; gap: var(--space-5);
    }
    .contact-modal__close {
      position: absolute; top: var(--space-3); right: var(--space-3);
      background: transparent; border: 0; color: var(--ink-2);
      font-size: 24px; line-height: 1; cursor: pointer;
      width: 44px; height: 44px;
      display: flex; align-items: center; justify-content: center;
      z-index: 2;
    }
    .contact-modal__close:hover { color: var(--ink); }
    .contact-modal__label {
      font-size: var(--display-m); font-weight: 600; line-height: 1.1;
      letter-spacing: -0.025em; color: var(--ink); margin: 0;
    }
    .contact-modal__hint {
      font-size: var(--body); color: var(--ink-1); margin: 0;
    }
    .contact-modal .contact-form {
      margin-top: 0;
    }
    @media (max-width: 600px) {
      .contact-modal { padding: var(--space-3); align-items: flex-start; }
      .contact-modal__panel {
        padding: var(--space-6) var(--space-5);
        max-height: calc(100vh - var(--space-5));
      }
      /* contact-modal__label uses var(--display-m) which is fluid now;
         no fixed 32px override needed at 600px. */
    }
    @media (prefers-reduced-motion: reduce) {
      .contact-modal__overlay { backdrop-filter: none; -webkit-backdrop-filter: none; }
    }

    /* Capabilities: editorial directory.
       2-column grid at >=1024px, 1-column below.
       Hairline dividers between rows in each column.
       Hover state on each row: rule-soft background + slight letter-spacing
       tighten on the bold service name. */
    .capabilities .intro {
      max-width: 60ch;
      margin-top: var(--space-5);
    }
    .capabilities ul {
      list-style: none;
      padding: 0;
      margin: var(--space-7) 0 0 0;
      display: grid;
      grid-template-columns: 1fr;
      gap: 0;
      border-top: 1px solid var(--rule-soft);
    }
    .capabilities li {
      max-width: 70ch;
      padding: var(--space-5) var(--space-4);
      border-bottom: 1px solid var(--rule-soft);
      transition: background 0.25s ease-out, padding-left 0.25s ease-out;
    }
    @media (hover: hover) {
      .capabilities li:hover {
        background: var(--rule-soft);
        padding-left: var(--space-5);
      }
      .capabilities li:hover strong {
        letter-spacing: -0.025em;
      }
    }
    .capabilities li strong {
      font-weight: 600;
      letter-spacing: -0.01em;
      transition: letter-spacing 0.25s ease-out;
    }
    .capabilities li span {
      color: var(--ink-1);
    }
    @media (prefers-reduced-motion: reduce) {
      .capabilities li,
      .capabilities li strong { transition: none; }
    }
    @media (min-width: 1024px) {
      .capabilities ul {
        grid-template-columns: 1fr 1fr;
        column-gap: var(--space-6);
      }
    }

    /* Team, tightened per audit (weakest moment): eyebrow above H2,
       hairline rule above section, side-by-side cofounders on desktop. */
    .team {
      border-top: 1px solid var(--rule);
    }
    .section-eyebrow {
      display: block;
      font-size: var(--eyebrow);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--ink-2);
      font-weight: 500;
      margin-bottom: var(--space-3);
    }
    .team .intro {
      max-width: 60ch;
      margin-top: var(--space-5);
    }
    .team .cofounders {
      margin-top: var(--space-7);
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-7);
    }
    .team .cofounder + .cofounder {
      border-top: 1px solid var(--rule-soft);
      padding-top: var(--space-7);
    }
    .team .cofounder img {
      width: 240px;
      max-width: 100%;
      filter: grayscale(100%);
      -webkit-filter: grayscale(100%);
    }
    .team .cofounder .name-role {
      margin-top: var(--space-4);
    }
    .team .cofounder .bio {
      max-width: 60ch;
      margin-top: var(--space-3);
    }
    @media (min-width: 768px) {
      .team .cofounders {
        grid-template-columns: 1fr 1fr;
        gap: 0;
        align-items: start;
      }
      .team .cofounder {
        padding-right: var(--space-8);
      }
      .team .cofounder + .cofounder {
        border-top: none;
        border-left: 1px solid var(--rule-soft);
        padding-top: 0;
        padding-right: 0;
        padding-left: var(--space-8);
      }
    }

    /* Conductor strip: position relative as a stacking context.
       The gradient itself lives at the closing-section level (full
       bleed across the left side of the page, ending at the team-grid
       divider X), not inside this column. Old in-column accent + bg
       elements are hidden. */
    .conductor-strip {
      position: relative;
    }
    .conductor-accent { display: none; }
    .conductor-strip-bg { display: none; }
    .conductor-strip .body-text {
      max-width: 60ch;
      margin-top: var(--space-5);
    }
    .conductor-strip .cta-row {
      margin-top: var(--space-6);
    }
    @media (prefers-reduced-motion: reduce) {
      .conductor-accent { transform: scaleX(1); transition: none; }
    }

    /* Contact */
    .contact .body-text {
      max-width: 60ch;
      margin-top: var(--space-5);
    }
    .contact .email-line {
      margin-top: var(--space-5);
      font-size: var(--title);
      letter-spacing: -0.01em;
    }
    .contact .cta-row {
      margin-top: var(--space-6);
    }

    /* Contact form: 2-column grid on desktop, single column on mobile.
       Required name/brand/email/website at the top, optional Instagram/
       TikTok/LinkedIn in a sub-row, brand brief textarea spans full width.
       Sharp edges (border-radius: 0) per the v3.6 ruleset. Inputs use
       paper background with rule border; brand-line on focus. */
    .contact-form {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-5) var(--space-5);
      max-width: 720px;
      margin-top: var(--space-7);
    }
    .contact-form .form-row { display: flex; flex-direction: column; gap: var(--space-2); }
    .contact-form .form-row--brief { grid-column: 1 / -1; }
    .contact-form .form-row--social { grid-column: span 1; }
    .contact-form label {
      font-size: var(--caption);
      color: var(--ink-2);
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .contact-form .req { color: var(--brand); margin-left: 4px; }
    .contact-form .opt {
      font-size: 11px;
      color: var(--ink-3);
      text-transform: lowercase;
      letter-spacing: normal;
      margin-left: var(--space-2);
    }
    .contact-form input,
    .contact-form textarea {
      font: inherit;
      background: var(--paper);
      color: var(--ink);
      border: 1px solid var(--rule);
      padding: var(--space-3) var(--space-4);
      min-height: 44px;
      border-radius: 0;
      transition: border-color 0.2s ease-out, background 0.2s ease-out;
    }
    .contact-form input:focus,
    .contact-form textarea:focus {
      outline: none;
      border-color: var(--brand);
      background: var(--paper);
    }
    .contact-form input:focus-visible,
    .contact-form textarea:focus-visible {
      outline: 2px solid var(--brand);
      outline-offset: 2px;
    }
    .contact-form textarea {
      resize: vertical;
      min-height: 120px;
      line-height: 1.5;
    }
    .contact-form button[type="submit"] {
      grid-column: 1 / -1;
      justify-self: start;
      margin-top: var(--space-3);
    }
    .contact-form .form-status {
      grid-column: 1 / -1;
      font-size: var(--body);
      color: var(--ink-1);
    }
    .contact-form .form-status[data-state="success"] { color: var(--brand-deep); }
    .contact-form .form-status[data-state="error"] { color: #B00020; }
    .email-fallback {
      margin-top: var(--space-5);
      font-size: var(--caption);
      color: var(--ink-2);
    }
    .email-fallback a {
      text-decoration: underline;
      text-decoration-color: var(--rule);
      text-underline-offset: 2px;
    }
    .email-fallback a:hover {
      text-decoration-color: currentColor;
    }
    @media (max-width: 700px) {
      .contact-form { grid-template-columns: 1fr; }
      .contact-form .form-row--social { grid-column: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
      .contact-form input,
      .contact-form textarea { transition: none; }
    }

    /* Services marquee — paper band between hero and capabilities.
       Bracketed top and bottom by blue hairlines (--brand-line) so the
       band reads as a horizontal rule with content centered between two
       rules — editorial department-header treatment. Two copies of the
       offering list inside a flex track at 50% offset yield a seamless
       infinite loop. Soft edge fades to paper keep items from hitting a
       hard cutoff. prefers-reduced-motion freezes the track. Type is
       Circular Medium 500, never 700+ (Heavy banned). Separator is a
       plus-sign typographic mark in --brand. */
    .services-marquee {
      background: var(--paper);
      padding: var(--space-5) 0;
      overflow: hidden;
      position: relative;
    }
    .services-marquee::before,
    .services-marquee::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 96px;
      z-index: 2;
      pointer-events: none;
    }
    .services-marquee::before {
      left: 0;
      background: linear-gradient(to right, var(--paper), rgba(250, 250, 247, 0));
    }
    .services-marquee::after {
      right: 0;
      background: linear-gradient(to left, var(--paper), rgba(250, 250, 247, 0));
    }
    .marquee-track {
      display: flex;
      width: max-content;
      align-items: center;
      animation: marqueeScroll 60s linear infinite;
      will-change: transform;
    }
    .services-marquee:hover .marquee-track {
      animation-play-state: paused;
    }
    .marquee-item {
      display: inline-flex;
      align-items: center;
      flex-shrink: 0;
      font-family: 'Circular', 'Avenir Next', system-ui, sans-serif;
      font-weight: 500;
      font-size: 13px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--brand-deep);
      white-space: nowrap;
      padding: 0 var(--space-7);
    }
    .marquee-item .marquee-sep {
      display: inline-block;
      margin-left: calc(var(--space-7) * 2);
      color: var(--brand);
      font-size: 1em;
      font-weight: 450;
      letter-spacing: 0;
    }
    @keyframes marqueeScroll {
      from { transform: translate3d(0, 0, 0); }
      to   { transform: translate3d(-50%, 0, 0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .marquee-track { animation: none; }
    }

    /* Editorial section dividers (rule between top-level sections,
       except where the hero gradient or Conductor accent owns the boundary) */
    section + section {
      border-top: 1px solid var(--rule);
    }
    .hero + section {
      border-top: none;
    }
    .hero + .services-marquee {
      border-top: 2px solid var(--brand-deep);
      border-bottom: 2px solid var(--brand-deep);
    }
    .services-marquee + section {
      border-top: none;
    }
    .conductor-strip {
      border-top: none;
    }

    /* Closing row: pair Conductor and Contact as two columns INSIDE the
       master container so the alignment matches the rest of the page —
       Conductor's left edge sits at the page's editorial gutter, and
       Contact's left edge mirrors Brenley's column in the team grid
       (both use space-8 column gap with a soft hairline between).
       Below 768px the row collapses to a single column and the hairline
       rotates back to horizontal. */
    .closing-section {
      position: relative;
      overflow: hidden;
    }
    /* Full-bleed blue gradient washing the left side of the section.
       Ends exactly at the page's vertical center — the divider X — so
       the gradient transitions out at the same line where Brenley/Jack
       and Conductor/Contact split. Linear top-left → bottom-right
       falloff so it starts at the top and dissolves softly down and
       toward the divider, no hard edges. */
    .closing-section::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 50%;
      background: linear-gradient(to bottom right, var(--brand-soft) 0%, transparent 70%);
      opacity: 0.75;
      pointer-events: none;
      z-index: 0;
    }
    .closing-section .container {
      position: relative;
      z-index: 1;
    }
    .closing-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      align-items: start;
    }
    .closing-row > .conductor-strip {
      padding-right: var(--space-8);
    }
    .closing-row > .contact {
      border-left: 1px solid var(--rule-soft);
      padding-left: var(--space-8);
    }
    @media (max-width: 767px) {
      .closing-section::before { display: none; }
      .closing-row {
        grid-template-columns: 1fr;
        gap: var(--space-7);
      }
      .closing-row > .conductor-strip {
        padding-right: 0;
      }
      .closing-row > .contact {
        border-left: none;
        border-top: 1px solid var(--rule-soft);
        padding-left: 0;
        padding-top: var(--space-7);
      }
    }

    /* Footer - captions in muted ink, tracking loose for editorial rhythm */
    .site-footer {
      padding-top: var(--space-7);
      padding-bottom: var(--space-7);
      font-size: var(--caption);
      color: var(--ink-2);
      letter-spacing: 0.04em;
      font-variant-numeric: tabular-nums;
      font-feature-settings: "tnum" 1;
      border-top: 1px solid var(--rule);
    }
    .site-footer .footer-row {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-5);
      align-items: baseline;
    }
    .site-footer .wordmark {
      font-weight: 600;
      font-size: var(--body);
      color: var(--ink);
      letter-spacing: -0.01em;
    }

    /* Motion: initial states only attached when JS confirms motion will run.
       Default markup is fully visible without JS or under prefers-reduced-motion. */
    .js-motion .anim-rise { opacity: 0; transform: translateY(12px); }
    .js-motion .anim-fade-up { opacity: 0; transform: translateY(16px); }
    .js-motion [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
    .js-motion [data-reveal].is-revealed { opacity: 1; transform: translateY(0); }

    /* Reduced motion: skip motion entirely, do not merely shorten */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation: none !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition: none !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
      .js-motion .anim-rise,
      .js-motion .anim-fade-up,
      .js-motion [data-reveal] { opacity: 1 !important; transform: none !important; }
    }

    /* Tablet/narrow-desktop: hero collapses to a single column at <=1023px
       so the H1 + tile grid never compete for horizontal room. Tile block
       caps at 480px so it sits compact under the text instead of bloating
       to full-width. Capabilities also collapses to single column at the
       same breakpoint per Task 6 below. */
    @media (max-width: 1023px) {
      .hero .hero-grid {
        grid-template-columns: 1fr;
        gap: var(--space-7);
      }
      .hero-tiles {
        max-width: 480px;
      }
    }

    /* Capabilities grid: collapse to single column below 1100px so the
       2-col directory + decorator only sit side-by-side when there's
       genuinely enough horizontal room. */
    @media (max-width: 1100px) {
      .capabilities .caps-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
      }
      .caps-decorator {
        max-width: 480px;
      }
      .caps-stack {
        max-width: 480px;
        margin-top: var(--space-4);
      }
    }

    /* Selected Work cards: aspect ratio relaxes on narrower viewports
       so labels never crop. */
    @media (max-width: 1023px) {
      .work-card { aspect-ratio: 5 / 4; }
    }
    @media (max-width: 700px) {
      .work-card {
        aspect-ratio: auto;
        min-height: 200px;
        padding-bottom: var(--space-7);
      }
    }
    .work-label {
      font-size: clamp(18px, 1vw + 14px, 24px);
      line-height: 1.15;
      text-wrap: balance;
    }

    /* Mobile collapse: single column at <768px viewport.
       Capabilities, Selected Work, Team cofounders, and Footer all stack
       vertically. Container gutter reduces from 24px to 16px. Hero H1
       scales from 72px to a 44 to 52px range on small viewports. */
    @media (max-width: 768px) {
      :root {
        --gutter: 16px;
      }
      /* H1/H2 sizes handled by fluid clamp() tokens. No fixed-pixel
         override needed at this breakpoint. */

      /* Header / nav: stack the wordmark + links vertically; CTA wraps
         to a full-width button without losing the 44px tap target. */
      .site-nav {
        flex-wrap: wrap;
        gap: var(--space-4);
      }
      .site-nav .nav-links {
        margin-left: 0;
        gap: var(--space-4);
        flex-wrap: wrap;
      }
      .site-nav .nav-cta {
        margin-left: 0;
      }

      /* Hero CTA row: stack so each button keeps its full 44px target. */
      .hero .cta-row {
        flex-direction: column;
        align-items: stretch;
      }
      .hero .cta-row .btn {
        width: 100%;
      }

      /* Hero tile block goes to full width below 600px so 2x2 tiles
         have room to breathe. */
      .hero-tiles { max-width: 100%; }

      /* Capabilities decorator hides on mobile; the editorial directory
         carries the section alone. */
      .capabilities .caps-decorator { display: none; }
      .capabilities .caps-stack { display: none; }

      /* Selected work: 1-column on small mobile, 2-column tablet handled
         in its own breakpoint below. */
      .work-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3);
      }

      /* Footer: stack wordmark + location + copyright vertically. */
      .site-footer .footer-row {
        flex-direction: column;
        gap: var(--space-3);
        align-items: flex-start;
      }

      /* Section spacing handled by fluid clamp() at the base layer. */

      /* Conductor + contact CTA rows: full-width buttons. */
      .conductor-strip .cta-row .btn,
      .contact .cta-row .btn {
        width: 100%;
        max-width: 360px;
      }

      /* Team cofounders: stacked. Headshots reduce in width. */
      .team .cofounder img {
        width: 180px;
      }
    }

    /* Tablet: 2-column work grid between 768px and 1023px */
    @media (min-width: 769px) and (max-width: 1023px) {
      .work-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    /* Small mobile (≤480px): the fluid clamp() tokens already deliver the
       right H1/H2 size at this width; no fixed-pixel override needed. */

    /* ================================================================
       REAL ESTATE PAGE — components. Same tokens, same system as the
       rest of the site (sharp edges, hairlines, brand-deep fields,
       Circular type). Nothing off-system.
       ================================================================ */

    .re-hero .subhead { max-width: 56ch; }

    /* The difference: the usual way vs Altitude */
    .compare .intro { max-width: 62ch; margin-top: var(--space-5); }
    .compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-top: var(--space-7); }
    .compare-col { border: 1px solid var(--rule); background: var(--paper); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
    .compare-col.is-altitude { background: var(--brand-deep); color: var(--paper); border-color: var(--brand-deep); }
    .compare-kicker { font-size: var(--eyebrow); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-2); font-weight: 500; }
    .compare-col.is-altitude .compare-kicker { color: var(--brand-soft); }
    .compare-col h3 { font-size: var(--title); letter-spacing: -0.01em; }
    .compare-col.is-altitude h3 { color: var(--paper); }
    .compare-list { list-style: none; padding: 0; margin: 0; }
    .compare-list li { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) 0; border-top: 1px solid var(--rule-soft); color: var(--ink-1); font-size: var(--body); }
    .compare-list li:first-child { border-top: none; }
    .compare-col.is-altitude .compare-list li { border-top-color: rgba(255,255,255,0.14); color: var(--paper); }
    .compare-list .m { flex: 0 0 auto; width: 16px; color: var(--ink-3); }
    .compare-col.is-altitude .compare-list .m { color: var(--brand-line); }
    @media (max-width: 767px) { .compare-grid { grid-template-columns: 1fr; gap: var(--space-4); } }

    /* End to end pipeline */
    .pipeline .intro { max-width: 62ch; margin-top: var(--space-5); }
    .pipeline-track { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-7); align-items: stretch; }
    .pipeline-step { flex: 1 1 150px; min-width: 140px; border: 1px solid var(--rule); background: var(--paper); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); transition: background 0.25s ease-out, border-color 0.25s ease-out; }
    @media (hover: hover) { .pipeline-step:hover { background: var(--rule-soft); border-color: var(--brand-line); } }
    .pipeline-step .pn { font-size: var(--eyebrow); letter-spacing: 0.1em; color: var(--brand); font-weight: 600; }
    .pipeline-step .pl { font-size: var(--title); font-weight: 600; letter-spacing: -0.01em; }
    .pipeline-step .pd { font-size: var(--caption); color: var(--ink-2); }
    .pipeline-note { margin-top: var(--space-5); color: var(--ink-1); max-width: 62ch; font-size: var(--title); letter-spacing: -0.01em; }

    /* Why it works: strengths */
    .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-7); }
    .why-card { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); border-top: 2px solid var(--brand-deep); }
    .why-card h3 { font-size: var(--title); }
    .why-card p { color: var(--ink-1); max-width: 40ch; }
    @media (max-width: 900px) { .why-grid { grid-template-columns: 1fr; gap: var(--space-5); } }

    /* Proof band: big stats on the deep brand field */
    .proof { background: var(--brand-deep); color: var(--paper); border: none; }
    .proof .section-eyebrow { color: var(--brand-soft); }
    .proof h2 { color: var(--paper); }
    .proof .intro { color: var(--brand-soft); max-width: 64ch; margin-top: var(--space-5); }
    .proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6) var(--space-5); margin-top: var(--space-8); }
    .proof-stat { display: flex; flex-direction: column; gap: var(--space-2); border-top: 1px solid rgba(255,255,255,0.16); padding-top: var(--space-4); }
    .proof-stat .pf-num { font-size: clamp(34px, 3vw + 18px, 56px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--paper); }
    .proof-stat .pf-label { font-size: var(--caption); letter-spacing: 0.04em; color: var(--brand-soft); }
    @media (max-width: 767px) { .proof-grid { grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-4); } }
    @media (max-width: 430px) { .proof-grid { grid-template-columns: 1fr; } }

    /* Portfolio case */
    .case .case-body { max-width: 60ch; margin-top: var(--space-4); color: var(--ink-1); }
    .stat-row { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin-top: var(--space-5); align-items: baseline; }
    .stat-row .s { font-size: var(--title); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
    .stat-row .s .sl { display: block; font-size: var(--caption); font-weight: 450; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); margin-top: 2px; }
    .case-media { display: grid; grid-template-columns: 248px 1fr; gap: var(--space-5); margin-top: var(--space-7); align-items: start; }
    .reel-frame { position: relative; aspect-ratio: 9 / 16; background: var(--ink); overflow: hidden; border: 1px solid var(--rule); }
    .reel-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
    .shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
    .shots .shot { aspect-ratio: 4 / 5; overflow: hidden; background: var(--rule-soft); border: 1px solid var(--rule); }
    .shots .shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.2,0.7,0.2,1); }
    @media (hover: hover) { .shots .shot:hover img { transform: scale(1.03); } }
    @media (max-width: 900px) { .case-media { grid-template-columns: 1fr; } .reel-frame { max-width: 260px; } }

    /* Marin landscape gallery */
    .marin-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: var(--space-7); }
    .marin-shots .shot { aspect-ratio: 3 / 2; overflow: hidden; border: 1px solid var(--rule); background: var(--rule-soft); }
    .marin-shots .shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.2,0.7,0.2,1); }
    @media (hover: hover) { .marin-shots .shot:hover img { transform: scale(1.03); } }
    @media (max-width: 767px) { .marin-shots { grid-template-columns: 1fr; } }

    /* Personalized branding */
    .brandproof .intro { max-width: 62ch; margin-top: var(--space-5); }

    /* How it works */
    .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-7); }
    .step { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); border-top: 2px solid var(--brand-deep); }
    .step .sn { font-size: var(--caption); letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-deep); font-weight: 600; }
    .step h3 { font-size: var(--title); }
    .step p { color: var(--ink-1); max-width: 36ch; }
    @media (max-width: 767px) { .steps-grid { grid-template-columns: 1fr; gap: var(--space-5); } }

    /* Risk reversal note */
    .risk-note { margin-top: var(--space-6); padding: var(--space-5) var(--space-6); border: 1px solid var(--brand-line); background: var(--brand-soft); color: var(--brand-deep); font-size: var(--title); letter-spacing: -0.01em; max-width: 62ch; }

    /* Portfolio media strip: reels + swipe carousel, same height, swipeable */
    .media-strip { --sh: clamp(360px, 44vw, 450px); display: flex; gap: var(--space-4); margin-top: var(--space-7); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: var(--space-4); }
    .media-strip > * { scroll-snap-align: center; flex: 0 0 auto; }
    .media-strip::-webkit-scrollbar { height: 6px; }
    .media-strip::-webkit-scrollbar-track { background: var(--rule-soft); }
    .media-strip::-webkit-scrollbar-thumb { background: var(--rule); }
    .strip-reel { height: var(--sh); aspect-ratio: 9 / 16; position: relative; overflow: hidden; background: var(--ink); border: 1px solid var(--rule); }
    .strip-reel video { width: 100%; height: 100%; object-fit: cover; display: block; }
    .strip-carousel { height: var(--sh); aspect-ratio: 4 / 5; position: relative; overflow: hidden; border: 1px solid var(--rule); background: var(--rule-soft); }
    .carousel-track { display: flex; height: 100%; transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; }
    .carousel-track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; }
    .carousel-dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; gap: 5px; justify-content: center; z-index: 1; }
    .carousel-dots span { width: 14px; height: 2px; background: rgba(255,255,255,0.5); transition: background 0.3s ease-out; }
    .carousel-dots span.on { background: #fff; }
    .strip-hint { margin-top: var(--space-3); font-size: var(--caption); color: var(--ink-2); letter-spacing: 0.02em; }
    @media (prefers-reduced-motion: reduce) { .carousel-track { transition: none; } }
    @media (max-width: 540px) { .media-strip { --sh: min(78vw, 430px); } }

    /* Scrollable strip wrapper with edge fades — signals more content beyond view */
    .strip-wrap { position: relative; margin-top: var(--space-7); }
    .strip-wrap .media-strip { margin-top: 0; }
    .strip-wrap::before, .strip-wrap::after { content: ""; position: absolute; top: 0; bottom: var(--space-4); width: 64px; pointer-events: none; z-index: 3; }
    .strip-wrap::before { left: -1px; background: linear-gradient(to right, var(--paper) 12%, rgba(250,250,247,0)); }
    .strip-wrap::after { right: -1px; background: linear-gradient(to left, var(--paper) 12%, rgba(250,250,247,0)); }
    @media (max-width: 540px) { .strip-wrap::before, .strip-wrap::after { width: 40px; } }
    /* single-image tile (just-sold, proof, testimonial) */
    .strip-card { height: var(--sh); aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--rule); background: var(--rule-soft); }
    .strip-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
    @media (hover: hover) { .strip-card:hover img { transform: scale(1.03); } }

    /* Edge fades start hidden; JS reveals them based on scroll position */
    .strip-wrap::before, .strip-wrap::after { opacity: 0; transition: opacity 0.3s ease-out; }
    .strip-wrap.can-left::before { opacity: 1; }
    .strip-wrap.can-right::after { opacity: 1; }

    /* ---- Tighter rhythm for the real estate page (override base spacing) ---- */
    section, footer { padding-top: clamp(38px, 4.1vw, 66px); padding-bottom: clamp(38px, 4.1vw, 66px); }
    .proof-grid { margin-top: var(--space-6); }
    .strip-wrap { margin-top: var(--space-6); }
    .pipeline-track, .why-grid, .steps-grid, .compare-grid, .pipeline .intro, .compare .intro, .proof .intro { margin-top: var(--space-5); }
    .case .case-body { margin-top: var(--space-3); }
    .stat-row { margin-top: var(--space-4); }

    /* End-to-end pipeline: moving highlight steps through the sequence */
    .pipeline-step { transition: background 0.45s ease-out, border-color 0.45s ease-out, transform 0.45s ease-out; }
    .pipeline-step.is-active { background: var(--brand-deep); border-color: var(--brand-deep); transform: translateY(-3px); }
    .pipeline-step.is-active .pn { color: var(--brand-soft); }
    .pipeline-step.is-active .pl { color: var(--paper); }
    .pipeline-step.is-active .pd { color: var(--brand-soft); }
    @media (prefers-reduced-motion: reduce) { .pipeline-step { transition: none; } }