:root {
      --bg:   #F7F7F3;
      --ink:  #2D2A24;
      --muted:#8A8478;
      --serif:'IBM Plex Serif', Georgia, serif;
      --sans: 'IBM Plex Sans', system-ui, sans-serif;
      --mono: 'IBM Plex Mono', ui-monospace, monospace;
      --pad: clamp(22px, 3.5vw, 46px);
      --section-pad: clamp(56px, 7vw, 104px);   /* standard top/bottom for content sections */
      --radius: 16px;   /* unified card/box corner */
      --topbar: 64px;   /* header height, measured by JS */
    }
    * { box-sizing: border-box; }
    body { margin: 0; min-height: 100vh; background: var(--bg); font-family: var(--sans); }
    body.is-loading { overflow: hidden; }
    /* skip the loader when arriving from another page on the site */
    html.nav-return .preloader { display: none; }
    html.nav-return body { overflow: visible; }
    /* never orphan a single word on the last line — balance headings, tidy body */
    h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
    p, figcaption, blockquote, li { text-wrap: pretty; }

    /* ===== Hero scrolling tiles (column wall) ===== */
    .tiles { position: relative; overflow: hidden; padding: 0 var(--pad); }
    .tiles__cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(12px,1.2vw,18px); max-width: 1400px; margin: 0 auto; height: clamp(420px,46vw,620px); }
    .tiles__col { position: relative; overflow: hidden; }
    .tiles__track { display: flex; flex-direction: column; gap: clamp(12px,1.2vw,18px); will-change: transform; animation: tilesUp 38s linear infinite; }
    .tiles__col:nth-child(even) .tiles__track { animation-name: tilesDown; animation-duration: 44s; }
    .tiles__col:nth-child(3) .tiles__track { animation-duration: 50s; }
    @keyframes tilesUp   { from { transform: translateY(0); }    to { transform: translateY(-50%); } }
    @keyframes tilesDown { from { transform: translateY(-50%); } to { transform: translateY(0); } }
    @media (prefers-reduced-motion: reduce) { .tiles__track { animation: none; } }

    .tile { border-radius: var(--radius); overflow: hidden; position: relative; flex: 0 0 auto; }
    .tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .tile--tall  { aspect-ratio: 3/4; }
    .tile--sq    { aspect-ratio: 1/1; }
    .tile--wide  { aspect-ratio: 4/3; }
    /* quote + statement cards */
    .tile--card { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(16px,1.4vw,22px); }
    .tile--quote { aspect-ratio: 4/5; }
    .tile--stmt  { aspect-ratio: 1/1; justify-content: center; }
    .tile--dark  { background: #1C1A16; color: #F4F2EA; }
    .tile--tan   { background: #ECEAE1; color: var(--ink); }
    .tile--paper { background: #fff; color: var(--ink); border: 1px solid rgba(45,42,36,0.08); }
    .tile__q { font-family: var(--serif); font-weight: 400; font-size: clamp(15px,1.15vw,19px); line-height: 1.32; letter-spacing: -0.01em; }
    .tile__by { font-size: 12px; letter-spacing: .02em; opacity: 0.62; margin-top: 14px; }
    .tile__stmt { font-family: var(--serif); font-weight: 400; font-size: clamp(18px,1.5vw,26px); line-height: 1.16; letter-spacing: -0.02em; text-align: center; }
    /* top + bottom fade into page bg */
    .tiles__fade { position: absolute; left: 0; right: 0; height: clamp(70px,9vw,130px); z-index: 2; pointer-events: none; }
    .tiles__fade--top { top: 0; background: linear-gradient(180deg, var(--bg), rgba(247,247,243,0)); }
    .tiles__fade--bot { bottom: 0; background: linear-gradient(0deg, var(--bg), rgba(247,247,243,0)); }
    @media (max-width: 900px) { .tiles__cols { grid-template-columns: repeat(3, 1fr); } .tiles__col:nth-child(4), .tiles__col:nth-child(5) { display: none; } }
    @media (max-width: 560px) { .tiles__cols { grid-template-columns: repeat(2, 1fr); height: 420px; } .tiles__col:nth-child(3) { display: none; } }

    /* full-width, full-height wall variant (portfolio hero) */
    .tiles--wall { padding: 0; }
    .tiles--wall .tiles__cols { max-width: none; grid-template-columns: repeat(6, 1fr); height: 120vh; padding: 0 clamp(10px,0.8vw,14px); gap: clamp(10px,0.8vw,14px); }
    .tiles--wall .tiles__col:nth-child(2) .tiles__track { animation-duration: 46s; }
    .tiles--wall .tiles__col:nth-child(3) .tiles__track { animation-duration: 54s; }
    .tiles--wall .tiles__col:nth-child(5) .tiles__track { animation-duration: 50s; }
    .tiles--wall .tiles__col:nth-child(6) .tiles__track { animation-duration: 42s; }
    @media (max-width: 900px) { .tiles--wall .tiles__cols { grid-template-columns: repeat(3, 1fr); height: 100vh; } .tiles--wall .tiles__col:nth-child(4), .tiles--wall .tiles__col:nth-child(5), .tiles--wall .tiles__col:nth-child(6) { display: none; } }
    @media (max-width: 560px) { .tiles--wall .tiles__cols { grid-template-columns: repeat(2, 1fr); height: 90vh; } .tiles--wall .tiles__col:nth-child(3) { display: none; } }

    /* ===== Lenis smooth scroll ===== */
    html.lenis, html.lenis body { height: auto; }
    .lenis.lenis-stopped { overflow: clip; }
    .lenis [data-lenis-prevent] { overscroll-behavior: contain; }
    .lenis.lenis-smooth iframe { pointer-events: none; }

    /* ===== Preloader (dark, centered counter, slides up) ===== */
    .preloader {
      position: fixed; inset: 0; z-index: 9999;
      background: #1C1A16; color: #F7F5EF;
      display: flex; align-items: center; justify-content: center;
      transition: transform .9s cubic-bezier(.76,0,.24,1);
      will-change: transform;
    }
    .preloader.is-done { transform: translateY(-100%); }
    .preloader__num {
      font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em;
      font-size: clamp(40px, 6vw, 76px); line-height: 1;
      font-variant-numeric: tabular-nums;
    }
    @media (prefers-reduced-motion: reduce) { .preloader { transition: none; } }

    /* ===== Scroll reveal — subtle fade-up (only active when JS is on) ===== */
    .js [data-rev] { opacity: 0; transform: translateY(16px); transition: opacity .45s ease, transform .45s ease; will-change: opacity, transform; }
    .js [data-rev].in { opacity: 1; transform: none; }
    @media (prefers-reduced-motion: reduce) { .js [data-rev] { opacity: 1; transform: none; transition: none; } }
    /* the foundations carousel reveal felt clunky on mobile — show it instantly there */
    @media (max-width: 768px) {
      .found [data-rev] { opacity: 1 !important; transform: none !important; transition: none !important; }
    }

    /* ===== Button component (Endeavor pill + rolling text) ===== */
    .btn {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--ink); color: var(--bg);
      padding: 10px 18px; border-radius: 12px;
      font-family: var(--sans); font-size: 14px; font-weight: 500;
      text-decoration: none; cursor: pointer; border: none;
      transition: background .25s ease, color .25s ease, transform .7s cubic-bezier(.22,1,.36,1);
    }
    .btn:hover { background: #333333; transform: translateY(-1px) scale(0.96); }
    .btn:hover .char { transform: translateY(-100%); }
    .text-hover { display: inline-block; position: relative; overflow: hidden; line-height: 1.3; vertical-align: middle; }
    .text-hover .row { display: inline-block; white-space: nowrap; }
    .text-hover .row-dup { position: absolute; top: 100%; left: 0; }
    .text-hover .char { display: inline-block; transition: transform .6s cubic-bezier(.65,0,.35,1); }
    @media (prefers-reduced-motion: reduce) {
      .btn, .text-hover .char { transition: none; }
      .btn:hover { transform: none; }
      .btn:hover .char { transform: none; }
    }

    /* ===== Scroll progress bar (sits above the nav) ===== */
    .scroll-progress {
      position: fixed; top: 0; left: 0; height: 3px; width: 0;
      background: #CFC7B8; z-index: 130; transition: width 90ms linear;
      will-change: width;
    }
    @media (prefers-reduced-motion: reduce) { .scroll-progress { transition: none; } }

    /* ===== Header / nav ===== */
    .site-header {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      background: var(--nav-bg, var(--bg));
      transition: transform .6s cubic-bezier(.45,0,.15,1), background .3s ease, box-shadow .3s ease;
    }
    .site-header.is-scrolled { background: var(--nav-bg, var(--bg)); }
    /* shadow only while actively scrolling; fades out when scrolling stops */
    .site-header.is-scrolling { box-shadow: 0 4px 18px -12px rgba(45,42,36,0.22); }
    /* drop the shadow while the mega menu is open so it blends with the backdrop */
    .site-header.menu-open { box-shadow: none; }
    .site-header.is-hidden { transform: translateY(-100%); }
    /* while the mobile panel is open, lift the bar above it and go transparent so
       only the logo + morphing X show over the dark panel */
    .site-header.is-menu { z-index: 250; background: transparent; box-shadow: none; }
    /* the panel is 95vw (inset 5vw from the left), so nudge the logo in by that
       same 5vw while open so it lines up with the menu items */
    .site-header.is-menu .nav { padding-left: calc(var(--pad) + 5vw); }
    .nav {
      display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
      padding: 15px var(--pad);
    }
    .nav__brand { justify-self: start; display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; }
    .nav__brand img { height: 19px; width: auto; display: block; }

    .nav__links { justify-self: center; display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
    .nav__link {
      font-family: var(--sans); font-size: 14px; font-weight: 400; color: var(--ink);
      text-decoration: none; background: none; border: none; cursor: pointer;
      padding: 9px 16px; border-radius: 12px; line-height: 1;
      transition: background .2s ease, color .2s ease;
    }
    .has-mega:hover .nav__link,
    .has-mega.is-open .nav__link { background: var(--ink); color: var(--bg); }

    .nav__cta { justify-self: end; }

    /* Light ("dark-page") nav state — used over dark hero images */
    .site-header.nav-light .nav__brand { color: #F4F2EA; }
    .site-header.nav-light .nav__brand img { filter: brightness(0) invert(1); }
    .site-header.nav-light .nav__link { color: #F2EFE6; }
    .site-header.nav-light .has-mega:hover .nav__link,
    .site-header.nav-light .has-mega.is-open .nav__link { background: #F4F2EA; color: var(--ink); }
    .site-header.nav-light .nav__cta { background: #F7F5EF; color: var(--ink); }
    .site-header.nav-light .nav__cta:hover { background: #fff; color: var(--ink); }
    .site-header.nav-light .nav__burger { color: #F4F2EA; }
    .site-header.nav-light .nav__x { color: #F4F2EA; }
    .site-header.nav-light .nav__close-text { color: rgba(244,242,234,0.75); }

    /* Transparent nav while sitting over a hero image (paired with .nav-light) */
    .site-header.nav-hero { background: transparent; box-shadow: none; }

    /* When a dropdown menu is open, the bar + panel go light (default pages only) */
    body:not([data-dark-nav]) .site-header.menu-open { background: var(--bg); }
    body:not([data-dark-nav]) .site-header.menu-open .mega-bg { background: var(--bg); }
    body:not([data-dark-nav]) .site-header.nav-light.menu-open .nav__brand { color: var(--ink); }
    body:not([data-dark-nav]) .site-header.nav-light.menu-open .nav__brand img { filter: none; }
    body:not([data-dark-nav]) .site-header.nav-light.menu-open .nav__link { color: var(--ink); }
    body:not([data-dark-nav]) .site-header.nav-light.menu-open .nav__cta { background: var(--ink); color: var(--bg); }
    body:not([data-dark-nav]) .site-header.nav-light.menu-open .nav__burger,
    body:not([data-dark-nav]) .site-header.nav-light.menu-open .nav__x { color: var(--ink); }

    /* dark-nav pages: keep the dropdown + mobile menu dark when open */
    body[data-dark-nav] .mega-bg { background: #1C1A16; border-bottom-color: rgba(232,229,220,0.12); }
    body[data-dark-nav] .mega__label { color: rgba(232,229,220,0.5); background: rgba(232,229,220,0.08); }
    body[data-dark-nav] .mega__item .t { color: #F4F2EA; }
    body[data-dark-nav] .mega__item .d { color: rgba(232,229,220,0.55); }
    body[data-dark-nav] .has-mega:hover .nav__link,
    body[data-dark-nav] .has-mega.is-open .nav__link { background: #F4F2EA; color: var(--ink); }
    body[data-dark-nav] .pbtn { background: #F7F5EF; color: #1C1A16; }
    body[data-dark-nav] .mobile-menu { background: #1C1A16; }
    body[data-dark-nav] .mnav > * { border-color: rgba(232,229,220,0.14); }
    body[data-dark-nav] .mnav > *:first-child { border-top-color: rgba(232,229,220,0.14); }
    body[data-dark-nav] .mnav__row { color: #F4F2EA; }
    body[data-dark-nav] .mnav__row:hover { color: #fff; }
    body[data-dark-nav] .mnav__chev { border-color: #F4F2EA; }
    body[data-dark-nav] .mnav__sub-in a { color: rgba(232,229,220,0.6); }
    body[data-dark-nav] .mnav__sub-in a:hover { color: #F4F2EA; }

    /* four-dot menu button → "Close ✕" — dots and ✕ share the exact same spot at
       the right edge and cross-fade; only the word slides in. Stays put while the
       panel opens, so the toggle never jumps. */
    .nav__burger {
      display: none; justify-self: end; align-items: center; gap: 10px;
      background: none; border: none; cursor: pointer; color: var(--ink); padding: 6px 0; z-index: 210;
    }
    .nav__close-text { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap;
      opacity: 0; transform: translateX(8px); transition: opacity .55s ease, transform .55s cubic-bezier(.16,1,.3,1); pointer-events: none; }
    .nav__burger.is-open .nav__close-text { opacity: 1; transform: none; color: #F4F2EA; }
    .nav__icon { position: relative; width: 17px; height: 18px; flex-shrink: 0; }
    .nav__dots { position: absolute; right: 0; top: 50%; display: grid; grid-template-columns: repeat(2, 3.5px); gap: 7px;
      transform: translateY(-50%) scale(1); transition: opacity .55s ease, transform .55s cubic-bezier(.16,1,.3,1); }
    .nav__dots span { width: 3.5px; height: 3.5px; border-radius: 50%; background: currentColor; opacity: 0.45; }
    .nav__x { position: absolute; right: 0; top: 50%; display: inline-flex; align-items: center; color: var(--ink);
      opacity: 0; transform: translateY(-50%) scale(.6); transition: opacity .55s ease, transform .55s cubic-bezier(.16,1,.3,1); }
    .nav__x svg { width: 17px; height: 17px; display: block; }
    .nav__burger.is-open .nav__dots { opacity: 0; transform: translateY(-50%) scale(.6); }
    .nav__burger.is-open .nav__x { opacity: 1; transform: translateY(-50%) scale(1); color: #F4F2EA; }

    /* ===== Mobile menu panel — slide-in from the right (matches main site) ===== */
    .mobile-menu {
      position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: 95vw; z-index: 200;
      background: var(--ink); color: var(--bg);
      overflow-y: auto; -webkit-overflow-scrolling: touch; pointer-events: none;
      clip-path: inset(0 0 0 100%);
      transition: clip-path .45s cubic-bezier(.4,0,.2,1);
    }
    .mobile-menu.is-open { clip-path: inset(0 0 0 0); pointer-events: auto; }
    /* blur backdrop behind the panel */
    .mm-backdrop {
      position: fixed; inset: 0; z-index: 199; background: rgba(0,0,0,0.4);
      backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
      opacity: 0; pointer-events: none; transition: opacity .4s ease;
    }
    .mm-backdrop.is-on { opacity: 1; pointer-events: auto; }
    /* close row at top of the panel */
    .mm-header { display: flex; align-items: center; padding: clamp(16px,4vw,24px) 0 14px; }
    .mm-close { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer;
      font-family: var(--mono); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--bg); padding: 0; }
    .mm-close svg { display: block; }
    .mobile-menu__inner { padding: calc(var(--topbar) + clamp(14px,4vw,26px)) var(--pad) calc(var(--pad) + 40px); display: flex; flex-direction: column; min-height: 100%; }
    /* large featured photo block at the bottom */
    .mm-cards { margin-top: auto; padding-top: clamp(24px,5vw,40px); display: flex; flex-direction: column; gap: 12px; }
    .mm-feature { position: relative; display: block; border-radius: var(--radius); overflow: hidden; text-decoration: none; }
    .mm-feature--img { aspect-ratio: 16/9; }
    .mm-feature--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .mm-feature--img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,18,15,0) 48%, rgba(20,18,15,0.55)); }
    .mm-feature__label { position: absolute; left: 16px; bottom: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; background: var(--bg); color: var(--ink); border-radius: 999px; padding: 10px 16px; font-family: var(--sans); font-size: 13px; font-weight: 500; }
    .mm-feature--cta { display: flex; flex-direction: column; gap: 12px; padding: clamp(22px,6vw,30px); color: #F4F2EA; background: linear-gradient(140deg, #6E6451 0%, #4A4336 55%, #2C2820 100%); }
    .mm-feature__h { font-family: var(--serif); font-weight: 400; font-size: clamp(24px,7vw,32px); line-height: 1.05; letter-spacing: -0.02em; }
    .mm-feature__cta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 15px; color: rgba(244,242,234,0.85); }
    /* staggered reveal of rows + photo when the menu opens */
    .mobile-menu .mnav > *, .mobile-menu .mm-feature { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform 1.1s cubic-bezier(.16,1,.3,1); }
    .mobile-menu.is-open .mnav > *, .mobile-menu.is-open .mm-feature { opacity: 1; transform: none; }
    .mobile-menu.is-open .mnav > *:nth-child(1) { transition-delay: .10s; }
    .mobile-menu.is-open .mnav > *:nth-child(2) { transition-delay: .18s; }
    .mobile-menu.is-open .mnav > *:nth-child(3) { transition-delay: .26s; }
    .mobile-menu.is-open .mnav > *:nth-child(4) { transition-delay: .34s; }
    .mobile-menu.is-open .mnav > *:nth-child(5) { transition-delay: .42s; }
    .mobile-menu.is-open .mnav > *:nth-child(6) { transition-delay: .50s; }
    .mobile-menu.is-open .mm-feature { transition-delay: .60s; }
    /* big serif accordion rows */
    .mnav > * { border-bottom: 1px solid rgba(232,229,220,0.14); }
    .mnav > *:first-child { border-top: 1px solid rgba(232,229,220,0.14); }
    .mnav__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: clamp(15px,3.4vw,21px) 0; margin: 0; background: none; border: 0; cursor: pointer; text-align: left; font-family: var(--serif); font-weight: 400; font-size: clamp(30px,8vw,42px); line-height: 1; letter-spacing: -0.025em; color: #F4F2EA; text-decoration: none; transition: color .2s ease; }
    .mnav__row:hover { color: #fff; }
    .mnav__chev { width: 12px; height: 12px; border-right: 2px solid #F4F2EA; border-bottom: 2px solid #F4F2EA; transform: rotate(45deg); transition: transform .6s cubic-bezier(.22,1,.36,1); flex-shrink: 0; margin-bottom: 6px; }
    .mnav__item.is-open .mnav__chev { transform: rotate(-135deg); margin-bottom: 0; margin-top: 6px; }
    .mnav__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s cubic-bezier(.22,1,.36,1); }
    .mnav__item.is-open .mnav__sub { grid-template-rows: 1fr; }
    .mnav__sub-in { overflow: hidden; min-height: 0; opacity: 0; transform: translateY(-6px); transition: opacity .45s ease .04s, transform .6s cubic-bezier(.22,1,.36,1); }
    .mnav__item.is-open .mnav__sub-in { opacity: 1; transform: none; }
    .mnav__sub-in a { display: block; font-family: var(--sans); font-weight: 400; font-size: clamp(16px,4.2vw,18px); letter-spacing: -0.005em; color: rgba(232,229,220,0.55); text-decoration: none; padding: 9px 0; transition: color .2s ease; }
    .mnav__sub-in a:last-child { padding-bottom: clamp(16px,3.6vw,22px); }
    .mnav__sub-in a:hover { color: #F4F2EA; }
    @media (prefers-reduced-motion: reduce) {
      .mobile-menu, .mobile-menu .mnav > *, .mobile-menu .mm-feature, .mnav__sub, .mnav__sub-in, .mnav__chev { transition: none; }
      .mnav__sub-in { opacity: 1; transform: none; }
      .mobile-menu .mnav > *, .mobile-menu .mm-feature { opacity: 1; transform: none; }
    }

    /* ===== Mega menu (full width) ===== */
    .has-mega { position: static; }
    .mega {
      position: absolute; left: 0; right: 0; top: 100%;
      pointer-events: none; z-index: 40;
    }
    .has-mega.is-open .mega { pointer-events: auto; }
    /* shared cream backdrop with the drop animation — panels crossfade over it */
    .mega-bg {
      position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: 0;   /* tuck 1px under the nav to cover the seam */
      background: var(--nav-bg, var(--bg)); border-bottom: 1px solid rgba(45,42,36,0.12);
      clip-path: inset(0 0 100% 0);
      transition: clip-path .3s cubic-bezier(.4,0,1,1);   /* fast roll-up on close */
      z-index: 38; pointer-events: none;
    }
    .site-header.menu-open .mega-bg { clip-path: inset(0 0 0 0); transition: clip-path 1s cubic-bezier(.16,1,.3,1); }   /* slow drop on open */
    @media (prefers-reduced-motion: reduce) { .mega-bg, .mega__inner { transition: none; } }

    /* Scrim that dims the page behind an open mega menu */
    .nav-scrim {
      position: fixed; top: var(--topbar); left: 0; right: 0; bottom: 0; z-index: 90;
      background: rgba(20,18,15,0.26);
      opacity: 0; visibility: hidden; pointer-events: none;
      transition: opacity .35s ease, visibility 0s linear .35s;
    }
    .nav-scrim.is-on { opacity: 1; visibility: visible; transition: opacity .35s ease; }

    .mega__inner {
      padding: 8px var(--pad) 56px;
      display: grid; grid-template-columns: 1fr 1fr 1fr 1.15fr; gap: 44px; align-items: start;
      opacity: 0; transition: opacity .2s ease;   /* fast clear on close */
    }
    .has-mega.is-open .mega__inner { opacity: 1; transition: opacity .85s cubic-bezier(.65,0,.35,1); }   /* eased fade-in on open */
    .mega__label {
      display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
      text-transform: uppercase; color: var(--muted);
      background: #ECEAE1; padding: 5px 10px; border-radius: 6px; margin-bottom: 26px;
    }
    .mega__item { display: block; text-decoration: none; margin-bottom: 22px; transition: opacity .25s ease; }
    .mega__item:last-child { margin-bottom: 0; }
    .mega__item .t { display: block; font-size: 18px; font-weight: 400; color: var(--ink); }
    .mega__item .d { display: block; font-size: 14px; color: var(--muted); margin-top: 4px; }
    /* spotlight: dim the other items while hovering one */
    .mega__inner:has(.mega__item:hover) .mega__item { opacity: 0.38; }
    .mega__inner:has(.mega__item:hover) .mega__item:hover { opacity: 1; }

    .mega__preview { position: relative; border-radius: 12px; overflow: hidden; background: #1A1A1A; aspect-ratio: 16/10; min-height: 230px; opacity: 0; transition: opacity .2s ease; }
    .has-mega.is-open .mega__preview { opacity: 1; transition: opacity .85s cubic-bezier(.65,0,.35,1); }
    .mega__preview img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
    .mega__preview .pbtn {
      position: absolute; left: 18px; bottom: 18px;
      background: #fff; color: #1A1A1A; font-family: var(--sans); font-size: 14px; font-weight: 500;
      padding: 9px 16px; border-radius: 999px; text-decoration: none;
      box-shadow: 0 10px 24px -10px rgba(0,0,0,0.5);
    }

    /* ===== Button variants used in hero ===== */
    .btn .arr { display: inline-block; transition: transform .3s ease; }
    .btn:hover .arr { transform: translateX(3px); }
    .btn--ghost { background: transparent; color: var(--ink); border: 1px solid rgba(45,42,36,0.22); }
    .btn--ghost:hover { color: var(--bg); }   /* fills #333 from base .btn:hover; border unchanged */

    /* ===== Hero ===== */
    .hero {
      min-height: 100vh;
      display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 4vw, 72px);
      align-items: stretch; padding: calc(var(--topbar) + clamp(8px,2vw,24px)) var(--pad) clamp(40px,4vw,64px);
    }
    .hero__text { display: flex; flex-direction: column; }
    .hero__eyebrow {
      display: inline-block; align-self: flex-start; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
      text-transform: uppercase; color: var(--muted);
      background: #ECEAE1; padding: 6px 11px; border-radius: 6px; margin-bottom: 28px;
    }
    .hero__title {
      font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 4.4vw, 60px);
      line-height: 1.04; letter-spacing: -0.035em; margin: 0; color: var(--ink);
    }
    .hero__title .cycle { font-style: italic; }
    .hero__caret { display: inline-block; width: 2px; height: 0.8em; background: currentColor; margin-left: 4px; vertical-align: -0.02em; animation: heroBlink 1.1s ease-in-out infinite; }
    @keyframes heroBlink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
    @media (prefers-reduced-motion: reduce) { .hero__caret { animation: none; } }
    .hero__lede { font-size: 16px; color: var(--ink); max-width: 42ch; margin: 24px 0 0; line-height: 1.5; }
    .hero__cta { margin-top: 30px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
    .hero__trust { margin-top: auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
    .hero__avatars { display: flex; }
    .hero__avatars img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid var(--bg); margin-left: -10px; background: #E2DED4; }
    .hero__avatars img:first-child { margin-left: 0; }
    .hero__stars { display: inline-flex; align-items: center; gap: 3px; margin-right: 7px; color: var(--ink); vertical-align: middle; }
    .hero__stars svg { width: 14px; height: 14px; display: block; shape-rendering: geometricPrecision; }
    .hero__trust-text { font-family: var(--sans); font-size: 15px; color: var(--muted); margin: 0; }

    .hero__media { position: relative; }
    .hero__photo {
      width: 100%; object-fit: cover; border-radius: var(--radius); display: block;
      /* fill the section height */
      height: calc(100vh - var(--topbar) - 88px); max-height: 880px;
    }
    /* floating case-study card (overlay, soft shadow) */
    .hero__case {
      position: absolute; right: 14px; bottom: 14px; width: min(368px, 82%);
      display: flex; gap: 14px;
      background: #EFEDE7; border: 1px solid rgba(45,42,36,0.06);
      border-radius: var(--radius); padding: 14px; text-decoration: none;
      box-shadow: 0 14px 34px -16px rgba(45,42,36,0.45);
    }
    .hero__case .thumb { width: 84px; align-self: stretch; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
    .hero__case .cc-body { flex: 1; display: flex; flex-direction: column; }
    .hero__case .ct { font-size: 15px; color: var(--ink); line-height: 1.3; }
    .hero__case .cc-meta { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 14px; }
    .hero__case .tag { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: #E3E0D8; padding: 5px 10px; border-radius: 6px; }
    .hero__case .arrow { width: 28px; height: 28px; border-radius: 999px; border: 1px solid rgba(45,42,36,0.25); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); font-size: 13px; }

    @media (max-width: 980px) {
      .nav { display: flex; align-items: center; justify-content: space-between; }
      .nav__links { display: none; }
      .mega { display: none; }
      .nav__cta { display: none; }
      .nav__burger { display: inline-flex; }
      .hero { grid-template-columns: 1fr; min-height: 0; }
      .hero__media { order: 1; margin-top: clamp(28px,6vw,40px); }
      .hero__photo { height: auto; aspect-ratio: 4/3; }
      .hero__notch { display: none; }
      .intro { grid-template-columns: 1fr; }
      .intro__col { grid-column: 1; }
    }

    /* ===== Section 2 — intro statement + brands ===== */
    .intro {
      display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 4vw, 72px);
      padding: var(--section-pad) var(--pad);
    }
    .intro__col { grid-column: 2; min-width: 0; }   /* same column as the hero photo */
    .intro__lead {
      font-family: var(--serif); font-weight: 300; font-size: clamp(22px,2.05vw,29px);
      line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); margin: 0;
    }
    .brands { margin-top: clamp(44px,5vw,80px); }
    .brands__label {
      display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
      text-transform: uppercase; color: var(--muted); background: #ECEAE1;
      padding: 5px 10px; border-radius: 6px; margin: 0 0 30px;
    }
    .brands__marquee {
      overflow: hidden;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
              mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    }
    .brands__track { display: inline-flex; align-items: center; gap: clamp(0px,0.2vw,4px); width: max-content; animation: brandScroll 26s linear infinite; }
    .brands__logo { height: clamp(74px,8.5vw,112px); width: auto; display: block; flex-shrink: 0; opacity: 0.85; }
    .brands .logo {
      font-family: var(--serif); font-size: clamp(15px,1.3vw,19px); color: #B7B2A6;
      letter-spacing: -0.01em; white-space: nowrap; display: inline-flex; align-items: baseline; gap: 4px;
    }
    .brands .logo--sans { font-family: var(--sans); }
    .brands .logo--bold { font-family: var(--sans); font-weight: 600; letter-spacing: .03em; }
    .brands .logo sup { font-size: .5em; }
    @keyframes brandScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    @media (prefers-reduced-motion: reduce) { .brands__track { animation: none; } }
    /* intro collapses to a single full-width column on tablet/mobile (placed after the base rule so it wins) */
    @media (max-width: 980px) {
      .intro { grid-template-columns: 1fr; padding-top: clamp(40px,8vw,64px); }
      .intro__col { grid-column: 1; }
    }
    @media (max-width: 760px) { .intro__lead { font-size: 23px; font-weight: 400; } }

    /* ===== Section 3 — foundations carousel ===== */
    .found { background: #EFEEE8; padding: clamp(36px,4vw,72px) 0 clamp(56px,6vw,100px);
      min-height: calc(100vh - var(--topbar)); display: flex; flex-direction: column; justify-content: center; }
    .found__head { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 var(--pad); margin-bottom: clamp(26px,3vw,42px); }
    .found__title { font-family: var(--serif); font-weight: 400; font-size: clamp(28px,3.1vw,46px); letter-spacing: -0.025em; margin: 0; color: var(--ink); }
    .found__title em { font-style: italic; }
    .found__nav { display: flex; gap: 10px; flex-shrink: 0; }
    .found__arrow {
      width: 48px; height: 48px; border-radius: 999px; border: 1px solid rgba(45,42,36,0.22);
      background: transparent; color: var(--ink); display: inline-flex; align-items: center; justify-content: center;
      cursor: pointer; transition: background .2s ease, border-color .2s ease;
    }
    .found__arrow:hover { border-color: var(--ink); background: rgba(45,42,36,0.04); }
    .found__arrow svg { width: 18px; height: 18px; }

    .found__track {
      display: flex; gap: clamp(16px,1.6vw,24px);
      overflow-x: auto; overflow-y: hidden;
      scroll-snap-type: x mandatory; touch-action: pan-y;
      padding: 0 var(--pad); scroll-padding-left: var(--pad);
      scrollbar-width: none;
    }
    .found__track::-webkit-scrollbar { display: none; }
    .found__card {
      position: relative; flex: 0 0 min(72%, 1040px); aspect-ratio: 16/10;
      border-radius: var(--radius); overflow: hidden; scroll-snap-align: start;
    }
    .found__card img, .found__card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .found__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.30), rgba(0,0,0,0.04) 38%, rgba(0,0,0,0.22)); }
    .found__card-text { position: absolute; top: 26px; left: 28px; right: 28px; z-index: 2; color: #fff; font-size: clamp(16px,1.25vw,19px); line-height: 1.4; max-width: 32ch; }
    /* small service label above each card paragraph */
    .found__eyebrow { z-index: 2; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.72); }
    .found__card > .found__eyebrow { position: absolute; top: 24px; left: 28px; right: 28px; }
    .found__card > .found__card-text { top: 48px; }
    .found__card .btn { position: absolute; left: 28px; bottom: 26px; z-index: 2; }
    .btn--onimg { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
    .btn--onimg:hover { background: rgba(255,255,255,0.22); }
    /* foundations card with a gradient bg + heading, plus a floating SERP screenshot */
    .found__card--serp { background: linear-gradient(140deg, #6E6451 0%, #4A4336 55%, #332E25 100%); }
    .found__card--serp::after { content: ""; }   /* dark overlay for white-text contrast over the photo */
    .found__card--serp .serp { position: absolute; right: clamp(16px,2vw,30px); bottom: clamp(16px,2vw,30px); left: auto; width: min(46%, 430px); z-index: 3; }
    /* compact mockup so it fits the card */
    .found__card--serp .serp__bar { padding: 11px 14px 7px; }
    .found__card--serp .serp__tabs { padding: 2px 14px 0; }
    .found__card--serp .serp__body { padding: 9px 13px 12px; }
    .found__card--serp .pack__map { height: 84px; }
    .found__card--serp .pack__btns { display: none; }
    .found__card--serp .pack__item { padding: 9px 11px; }
    /* growth chart sits bottom-left of the visibility card (desktop); hidden on the phone card */
    .grow { position: absolute; left: clamp(16px,2vw,30px); bottom: clamp(16px,2vw,30px); z-index: 2; width: min(44%, 380px); background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16); border-radius: var(--radius); padding: clamp(18px,1.6vw,24px); }
    .grow__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 20px; }
    .grow__label { color: rgba(255,255,255,0.85); font-size: clamp(14px,1.1vw,16px); letter-spacing: .01em; }
    .grow__delta { color: #A6D9A6; font-size: clamp(14px,1.1vw,16px); font-weight: 600; white-space: nowrap; }
    .grow__tri { font-size: 10px; vertical-align: middle; }
    .grow__chart { height: clamp(80px,7vw,110px); }
    .grow__chart svg { display: block; width: 100%; height: 100%; }
    .grow__cap { color: rgba(255,255,255,0.5); font-size: clamp(12px,0.9vw,13px); letter-spacing: .02em; margin-top: 14px; }

    /* ===== Mobile only: phone-aspect cards + compact full-width mockup (placed after base so it wins) ===== */
    @media (max-width: 760px) {
      .found { min-height: 0; }
      .found__card { flex-basis: 86%; aspect-ratio: 5/8; }
      .found__title { font-size: 30px; }
      .found__card-text { top: 22px; left: 20px; right: 20px; font-size: 17px; }
      /* serp mockup spans the full width of the phone card; growth chart hidden here */
      .found__card--serp .serp { left: clamp(16px,2vw,24px); right: clamp(16px,2vw,24px); top: auto; width: auto; }
      .grow { display: none; }
      /* shorter, more compact mockup so the text + all 3 rankings fit */
      .found__card--serp .pack__map { display: none; }
      .found__card--serp .serp__tabs { display: none; }
      .found__card--serp .pack__tags { display: none; }
      .found__card--serp .serp__bar { padding: 9px 12px 6px; gap: 9px; }
      .found__card--serp .glogo { font-size: 15px; }
      .found__card--serp .gsearch { padding: 6px 10px; gap: 6px; }
      .found__card--serp .gsearch .q { font-size: 11px; white-space: nowrap; overflow: hidden; }
      .found__card--serp .pack__item { padding: 8px 11px; gap: 9px; }
      .found__card--serp .pack__thumb { width: 42px; height: 42px; }
      .found__card--serp .pack__nm { font-size: 13px; }
      .found__card--serp .pack__rate { font-size: 11px; margin-top: 2px; }
    }

    /* ---- Google SERP mockup (shared) ---- */
    .serp { background: #fff; border: 1px solid rgba(45,42,36,.10); border-radius: 14px; box-shadow: 0 24px 50px -26px rgba(45,42,36,.45); overflow: hidden; font-family: Arial, 'Helvetica Neue', sans-serif; }
    .serp__bar { display: flex; align-items: center; gap: 14px; padding: 14px 16px 10px; }
    .glogo { font-size: 19px; letter-spacing: -1px; font-weight: 500; }
    .gblue{color:#4285F4;}.gred{color:#EA4335;}.gyellow{color:#FBBC05;}.ggreen{color:#34A853;}
    .gsearch { flex: 1; display: flex; align-items: center; gap: 10px; border: 1px solid #dfe1e5; border-radius: 22px; padding: 8px 14px; box-shadow: 0 1px 6px rgba(32,33,36,.08); }
    .gsearch .q { flex: 1; font-size: 14px; color: #202124; }
    .gsearch .ic { width: 17px; height: 17px; flex-shrink: 0; }
    .serp__tabs { display: flex; gap: 20px; padding: 2px 18px 0; border-bottom: 1px solid #ebebeb; }
    .serp__tab { font-size: 12px; color: #5f6368; padding: 9px 2px; }
    .serp__tab.is-on { color: #1a73e8; border-bottom: 3px solid #1a73e8; font-weight: 500; }
    .serp__body { padding: 12px 16px 16px; }
    .stars { color: #febe10; font-size: 12px; letter-spacing: 1px; }

    .pack { border: 1px solid #dadce0; border-radius: 10px; overflow: hidden; }
    .pack__map { height: 130px; position: relative; background:
       linear-gradient(transparent 96%, #e3e6e8 96%) 0 0/34px 34px,
       linear-gradient(90deg, transparent 96%, #e3e6e8 96%) 0 0/34px 34px,
       radial-gradient(circle at 28% 38%, #cdeccb, transparent 38%),
       radial-gradient(circle at 72% 64%, #cfe0f7, transparent 42%),
       #eef1f3; }
    .pin { position: absolute; width: 18px; height: 18px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #EA4335; border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,.25); }
    .pin.lbl::after { content: "1"; position: absolute; inset: 0; transform: rotate(45deg); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
    .pack__item { display: flex; gap: 12px; padding: 13px 14px; border-top: 1px solid #ececec; align-items: flex-start; }
    .pack__item.is-top { background: #f6faff; }
    .pack__rank { font-size: 12px; color: #70757a; width: 12px; flex-shrink: 0; padding-top: 2px; }
    .pack__thumb { position: relative; width: 60px; height: 60px; border-radius: 9px; background: linear-gradient(135deg,#d8d2c6,#ece7dc); flex-shrink: 0; }
    .pack__up { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 999px; background: #1e9e4a; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.25); border: 2px solid #fff; }
    .pack__up svg { width: 11px; height: 11px; }
    .pack__main { flex: 1; }
    .pack__nm { font-size: 15px; color: #202124; }
    .pack__rate { font-size: 12px; color: #70757a; margin-top: 3px; }
    .pack__rate b { color: #202124; font-weight: 400; }
    .pack__tags { font-size: 12px; color: #4d5156; margin-top: 2px; }
    .pack__btns { display: flex; gap: 8px; margin-top: 10px; }
    .pack__btn { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #1a73e8; border: 1px solid #dadce0; border-radius: 16px; padding: 6px 12px; }
    .pack__btn .d { width: 12px; height: 12px; border-radius: 50%; border: 1px solid #1a73e8; display: inline-block; }

    /* ===== Section 4 — message + structure ===== */
    .msg {
      min-height: calc(100vh - var(--topbar)); background: #EFEEE8;
      display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px,4vw,72px);
      align-items: stretch; padding: clamp(32px,4vw,64px) var(--pad);
    }
    .msg__text { display: flex; flex-direction: column; }
    .msg__media { width: 86%; justify-self: end; }   /* narrower photo, kept to the right; text col unchanged */
    .msg__eyebrow {
      align-self: flex-start; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
      text-transform: uppercase; color: var(--muted); background: #ECEAE1;
      padding: 6px 11px; border-radius: 6px; margin-bottom: 28px;
    }
    .msg__title { font-family: var(--serif); font-weight: 400; font-size: clamp(32px,3.6vw,54px); line-height: 1.04; letter-spacing: -0.03em; margin: 0; color: var(--ink); }
    .msg__title em { font-style: italic; }
    .msg__sub { font-size: 16px; color: var(--ink); line-height: 1.55; max-width: 60ch; margin: 24px 0 0; }
    .msg__sub:first-of-type { margin-top: auto; padding-top: clamp(40px,6vw,90px); }
    .msg__text .btn { align-self: flex-start; margin-top: 30px; }
    .msg__features { margin-top: auto; padding-top: clamp(40px,6vw,80px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,5vw,72px); }
    .msg__feature-ico { width: 44px; height: 44px; border-radius: 12px; background: #ECEAE1; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); margin-bottom: 18px; }
    .msg__feature-ico svg { width: 20px; height: 20px; }
    .msg__feature h3 { font-family: var(--sans); font-size: 16px; font-weight: 500; margin: 0 0 6px; color: var(--ink); }
    .msg__feature p { font-size: 14px; color: var(--ink); line-height: 1.5; margin: 0; }

    .msg__media { position: relative; }
    .msg__photo { width: 100%; height: calc(100vh - var(--topbar) - clamp(56px,7vw,112px)); max-height: 900px; object-fit: cover; border-radius: var(--radius); }
    .msg__overlay {
      position: absolute; right: clamp(14px,1.4vw,20px); bottom: clamp(14px,1.4vw,20px); width: min(360px, 86%);
      background: rgba(22,20,16,0.42); -webkit-backdrop-filter: blur(16px) saturate(120%); backdrop-filter: blur(16px) saturate(120%);
      border: 1px solid rgba(255,255,255,0.16);
      border-radius: var(--radius); padding: clamp(18px,1.5vw,22px);
      box-shadow: 0 18px 44px -18px rgba(0,0,0,0.5);
    }
    /* about photo: crossfading image cycle */
    .msg__media--cycle { height: calc(100vh - var(--topbar) - clamp(56px,7vw,112px)); max-height: 900px; border-radius: var(--radius); overflow: hidden; }
    .msg__media--cycle .msg__photo { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; border-radius: 0; opacity: 0; transition: opacity 1.1s ease; }
    .msg__media--cycle .msg__photo.is-on { opacity: 1; }
    @media (prefers-reduced-motion: reduce) { .msg__media--cycle .msg__photo { transition: none; } }
    @media (max-width: 860px) { .msg__media--cycle { height: auto; aspect-ratio: 2/3; } }
    .msg__overlay-h { font-family: var(--serif); font-weight: 400; font-size: clamp(17px,1.3vw,20px); letter-spacing: -0.01em; color: #fff; margin: 0 0 8px; }
    .msg__overlay-p { font-size: 14px; color: rgba(255,255,255,0.85); line-height: 1.5; margin: 0; }
    /* alternating photo side (used for the services page service sections) */
    .msg--rev { grid-template-columns: 1.1fr 0.9fr; }
    .msg--rev .msg__media { order: -1; justify-self: start; }
    .msg--rev .msg__text { order: 2; }
    .svc-msg + .svc-msg { border-top: 1px solid rgba(45,42,36,0.08); }
    .svc-msg .msg__title { font-size: clamp(28px,3.1vw,46px); max-width: 20ch; }
    /* alternate light tint for a service section — matches the hero/page background */
    .svc-msg--alt { background: var(--bg); }
    /* visibility section: large search mockup instead of a photo */
    .vis-serp { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;
      background: #2A2620; border-radius: var(--radius); padding: clamp(20px,3vw,44px); }
    .vis-serp::before { content: ""; position: absolute; inset: -25%; z-index: 0;
      background:
        radial-gradient(38% 48% at 24% 34%, rgba(178,72,52,0.92), transparent 70%),
        radial-gradient(44% 54% at 74% 38%, rgba(206,120,58,0.85), transparent 70%),
        radial-gradient(48% 58% at 55% 72%, rgba(228,168,92,0.62), transparent 72%),
        radial-gradient(40% 52% at 14% 76%, rgba(122,88,112,0.8), transparent 70%),
        radial-gradient(48% 60% at 90% 82%, rgba(84,58,78,0.85), transparent 72%);
      filter: blur(46px); }
    .vis-serp .serp { width: 100%; position: relative; z-index: 2; }
    /* phones: trim the map pack to 3 results (child 1 is the map, so 5+ = results 4 and 5) */
    @media (max-width: 760px) {
      .vis-serp .pack__item:nth-child(n+5) { display: none; }
    }
    .pack__maplogo { position: absolute; transform: translate(-50%,-150%); background: #fff; border-radius: 8px; padding: 6px 9px; box-shadow: 0 4px 12px rgba(0,0,0,0.25); z-index: 2; }
    .pack__maplogo img { height: 16px; width: auto; display: block; }
    /* stat cards in the service-section text column */
    .msg__stats { margin-top: auto; padding-top: clamp(36px,5vw,64px); display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(10px,1vw,16px); width: 100%; }
    .mstat { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between;
      min-height: clamp(140px,13vw,180px); border: 1px solid rgba(45,42,36,0.14); border-radius: 12px; padding: clamp(15px,1.3vw,20px); }
    .mstat__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: 0; transition: opacity .5s ease; }
    .mstat::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(18,16,13,0.62) 0%, rgba(18,16,13,0.04) 48%, rgba(18,16,13,0) 100%); opacity: 0; transition: opacity .5s ease; }
    .mstat:hover .mstat__img, .mstat:hover::after { opacity: 1; }
    .mstat__n { font-family: var(--serif); font-weight: 400; font-size: clamp(22px,1.8vw,30px); line-height: 1; letter-spacing: -0.02em; color: var(--ink); transition: color .35s ease, opacity .35s ease; }
    .mstat:hover .mstat__n { opacity: 0; }
    .mstat__l { font-size: 12px; line-height: 1.35; color: var(--muted); margin: 0; transition: color .35s ease; }
    .mstat:hover .mstat__l { color: #F4F2EA; }
    .svc-msg__lead { font-size: 16px; line-height: 1.55; color: var(--ink); margin: clamp(18px,2vw,26px) 0 0; max-width: 46ch; }

    /* interaction mockups revealed on hover (Visibility cards) */
    .mstat__mock { position: absolute; inset: 0; z-index: 3; opacity: 0; transition: opacity .4s ease; background: #fff; color: #202124;
      padding: clamp(11px,1vw,15px); display: flex; flex-direction: column; gap: 7px; font-family: var(--sans); text-align: left; overflow: hidden; }
    .mstat--mock:hover .mstat__mock { opacity: 1; }
    .smock__bar { display: flex; align-items: center; gap: 6px; border: 1px solid #dfe1e5; border-radius: 999px; padding: 5px 9px; font-size: 9px; line-height: 1; color: #5f6368; white-space: nowrap; }
    .smock__bar svg { width: 9px; height: 9px; flex-shrink: 0; }
    .smock__res { display: flex; flex-direction: column; gap: 2px; }
    .smock__res--top { background: #f1f6ff; border-radius: 6px; padding: 6px 8px; }
    .smock__nm { font-size: 11px; font-weight: 500; color: #1a73e8; line-height: 1.15; }
    .smock--mut .smock__nm { color: #5f6368; font-weight: 400; }
    .smock__url { font-size: 8px; color: #5f6368; }
    .smock__meta { font-size: 8px; color: #5f6368; line-height: 1.3; }
    .smock__stars { color: #fbbc04; letter-spacing: -1px; }
    .smock__tag { align-self: flex-start; font-size: 8px; font-weight: 600; letter-spacing: .04em; color: #006621; border: 1px solid rgba(0,102,33,0.5); border-radius: 4px; padding: 1px 5px; }
    .smock--chat { justify-content: center; gap: 9px; }
    .smock__q { align-self: flex-end; background: #ececec; border-radius: 11px 11px 3px 11px; padding: 6px 9px; font-size: 9px; line-height: 1.3; max-width: 88%; }
    .smock__a { display: flex; gap: 6px; align-items: flex-start; }
    .smock__ai { width: 14px; height: 14px; border-radius: 50%; background: #10a37f; flex-shrink: 0; margin-top: 1px; }
    .smock__abub { background: #f7f7f8; border-radius: 11px 11px 11px 3px; padding: 7px 10px; font-size: 9px; line-height: 1.35; color: #202124; }
    .smock__abub b { color: #10a37f; }
    .mstat--mock { min-height: clamp(178px,16vw,216px); }
    .mstat--mock .mstat__mock { justify-content: flex-start; gap: 6px; }
    /* keep the label visible (lower-left, dark) above the mockup on hover */
    .mstat--mock .mstat__l { position: relative; z-index: 4; }
    .mstat--mock:hover .mstat__l { color: var(--ink); }
    .smock--chat { justify-content: center; }
    .smock__sub { font-size: 8px; color: #5f6368; margin-top: 1px; }
    .smock__sitelinks { display: flex; gap: 14px; padding-left: 2px; margin-top: 1px; }
    .smock__sitelinks span { font-size: 9px; color: #1a73e8; }
    .smock__src { font-size: 8px; color: #9aa0a6; margin-top: 2px; padding-left: 20px; }
    .smock__res--top .smock__tag { margin-bottom: 3px; }

    /* homepage visibility card: three mockups on a 2x2 grid with equal row/column gaps */
    .found__card--serp .vmgrid { position: absolute; inset: 0; z-index: 3;
      display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
      gap: clamp(12px,1.4vw,20px); padding: 24px 28px 28px; }
    .found__card--serp .vmintro { grid-column: 1; grid-row: 1; align-self: start; display: flex; flex-direction: column; gap: 8px; }
    .found__card--serp .found__card-text { position: static; grid-column: auto; grid-row: auto; align-self: auto; max-width: 22ch; top: auto; }
    .found__card--serp .vmock { grid-row: auto;
      background: #fff; color: #202124; font-family: Arial,'Helvetica Neue',sans-serif;
      border-radius: 16px; box-shadow: 0 28px 58px -26px rgba(20,15,10,0.6); padding: clamp(15px,1.5vw,22px);
      display: flex; flex-direction: column; gap: 9px; overflow: hidden; }
    .found__card--serp .vmock--seo { grid-column: 2; grid-row: 1; }
    .found__card--serp .vmock--ads { grid-column: 1; grid-row: 2; }
    .found__card--serp .vmock--aeo { grid-column: 2; grid-row: 2; justify-content: flex-start; background: #1e1e22; color: #ECEAE0; }
    .found__card--serp .vmock--aeo .smock__q { background: #34343c; color: #ECECEC; }
    .found__card--serp .vmock--aeo .smock__abub { background: #2a2a30; color: #ECEAE0; }
    .found__card--serp .vmock--aeo .smock__abub b { color: #4ade80; }
    .found__card--serp .vmock .smock__bar,
    .found__card--serp .vmock .smock__q,
    .found__card--serp .vmock .smock__abub { font-size: 12px; }
    .found__card--serp .vmock .smock__nm { font-size: 14px; }
    .found__card--serp .vmock .smock__meta,
    .found__card--serp .vmock .smock__sub,
    .found__card--serp .vmock .smock__url { font-size: 10px; }
    .found__card--serp .vmock .smock__sitelinks span { font-size: 11px; }
    .found__card--serp .vmock .smock__tag { font-size: 10px; }
    .found__card--serp .vmock .smock__bar svg { width: 11px; height: 11px; }
    .found__card--serp .vmock .smock__ai { width: 16px; height: 16px; }
    @media (max-width: 760px) {
      .found__card--serp .vmgrid { grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: clamp(14px,3vw,22px); }
      .found__card--serp .vmintro { grid-column: 1; grid-row: 1; }
      .found__card--serp .vmock--seo { grid-column: 1; grid-row: 2; }
      .found__card--serp .vmock--ads { grid-column: 1; grid-row: 3; }
      .found__card--serp .vmock--aeo { display: none; }
    }
    @media (max-width: 860px) {
      .msg--rev { grid-template-columns: 1fr; }
      .msg--rev .msg__media { order: 1; justify-self: stretch; }
      .msg--rev .msg__text { order: 0; }
    }
    .msg__card {
      position: absolute; left: 38%; top: 36%; width: 248px;
      background: rgba(248,247,243,0.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,0.6); border-radius: 16px; padding: 8px;
      box-shadow: 0 24px 50px -20px rgba(45,42,36,0.45);
    }
    .msg__card-head { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 500; color: var(--ink); padding: 10px 12px; }
    .msg__card-head svg { width: 14px; height: 14px; color: var(--muted); }
    .msg__card-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
    .msg__card-list li { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 10px; font-size: 14px; color: var(--ink); }
    .msg__card-list li.is-active { background: #fff; box-shadow: 0 2px 8px -5px rgba(45,42,36,0.4); }
    .msg__card-list .ci { color: var(--muted); display: inline-flex; }
    .msg__card-list .ci svg { width: 16px; height: 16px; }

    @media (max-width: 980px) {
      .msg { grid-template-columns: 1fr; min-height: 0; }
      /* eyebrow, heading, paragraph, button, then photo (natural order) */
      .msg__media { order: 1; width: 100%; justify-self: stretch; }
      .msg__photo { height: auto; aspect-ratio: 2/3; }   /* much taller portrait */
      .msg__sub:first-of-type { margin-top: clamp(20px,4vw,28px); padding-top: 0; }
      .msg__features { padding-top: 40px; }
    }
    @media (max-width: 560px) { .msg__features { grid-template-columns: 1fr; } }

    /* ===== Section 5 — stakes (notched photo + testimonial) ===== */
    .stakes {
      --sec-bg: #EFEEE8;
      min-height: calc(100vh - var(--topbar)); background: var(--sec-bg);
      display: grid; grid-template-columns: 1.06fr 0.94fr; gap: clamp(40px,5vw,88px);
      align-items: stretch; padding: clamp(36px,4vw,64px) var(--pad);
    }
    .stakes__media { position: relative; width: 86%; justify-self: start; }   /* narrower photo, kept to the left; text col unchanged */
    .stakes__photo { width: 100%; height: calc(100vh - var(--topbar) - clamp(56px,7vw,112px)); max-height: 900px; object-fit: cover; border-radius: var(--radius); display: block; }
    /* notch cut-outs — same color as the section so they carve the photo, with rounded corners */
    .stakes .cut { position: absolute; background: var(--sec-bg); }
    .stakes .cut-tl { top: 0; left: 0; width: 24%; height: 18%; border-radius: 24px 0 22px 0; }
    .stakes .cut-br { right: 0; bottom: 0; width: 30%; height: 14%; border-radius: 22px 0 24px 0; }
    .stakes__pause { position: absolute; left: 16px; bottom: 16px; width: 34px; height: 34px; border-radius: 999px; background: rgba(255,255,255,0.82); display: flex; align-items: center; justify-content: center; color: var(--ink); }
    .stakes__pause svg { width: 12px; height: 12px; }

    .stakes__text { display: flex; flex-direction: column; }
    .stakes__eyebrow { align-self: flex-start; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); background: #E4E1D8; padding: 6px 11px; border-radius: 6px; margin-bottom: 26px; }
    .stakes__title { font-family: var(--serif); font-weight: 400; font-size: clamp(25px,2.6vw,37px); line-height: 1.09; letter-spacing: -0.025em; margin: 0; color: var(--ink); }
    .stakes__title em { font-style: italic; }
    .stakes__sub { font-size: 16px; color: var(--ink); line-height: 1.55; max-width: 44ch; margin: 22px 0 0; }
    .stakes__text .btn { align-self: flex-start; margin-top: 28px; }
    .stakes__quote { margin-top: auto; background: #FBFAF6; border: 1px solid rgba(45,42,36,0.06); border-radius: 16px; padding: 26px 30px; max-width: 540px; }
    .stakes__stars { color: var(--ink); letter-spacing: 3px; font-size: 14px; }
    .stakes__quote-text { font-size: 17px; line-height: 1.5; margin: 16px 0 22px; color: var(--ink); }
    .stakes__who { display: flex; align-items: center; gap: 12px; }
    .stakes__who img { width: 34px; height: 34px; border-radius: 999px; object-fit: cover; }
    .stakes__who span { font-size: 15px; font-weight: 500; color: var(--ink); }

    @media (max-width: 980px) {
      .stakes { grid-template-columns: 1fr; min-height: 0; }
      .stakes__photo { height: auto; aspect-ratio: 4/5; }
      .stakes__quote { margin-top: 32px; max-width: 100%; }
    }

    /* ===== Section 6 — dark callout block ===== */
    .callout { padding: var(--section-pad) var(--pad);
      min-height: calc(100vh - var(--topbar)); display: flex;
      background:
        radial-gradient(70% 55% at 50% 0%,    rgba(247,206,138,0.95), rgba(247,206,138,0) 65%),
        radial-gradient(55% 50% at 6% 36%,     rgba(214,176,205,0.55), rgba(214,176,205,0) 60%),
        radial-gradient(60% 55% at 100% 100%,  rgba(232,96,72,0.88),   rgba(232,96,72,0) 62%),
        radial-gradient(60% 55% at 0% 100%,    rgba(233,120,86,0.82),  rgba(233,120,86,0) 62%),
        radial-gradient(48% 42% at 50% 100%,   rgba(238,138,92,0.78),  rgba(238,138,92,0) 60%),
        linear-gradient(180deg, #F6E4C6, #F0D9BE); }
    .callout__inner {
      flex: 1; width: 100%;
      background: #1C1A16; color: #E8E5DC; border-radius: var(--radius);
      padding: clamp(30px,3.4vw,60px);
      display: grid; grid-template-columns: 0.92fr 1fr; gap: clamp(32px,4vw,72px); align-items: stretch;
    }
    .callout__text { display: flex; flex-direction: column; order: 2; }
    .callout__media { order: 1; }
    .callout__label {
      align-self: flex-start; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
      text-transform: uppercase; color: #9C968A; background: #2A2722;
      padding: 6px 11px; border-radius: 6px; margin-bottom: clamp(26px,3vw,42px);
    }
    .callout__title {
      font-family: var(--serif); font-weight: 400; font-size: clamp(25px,2.7vw,39px);
      line-height: 1.1; letter-spacing: -0.03em; margin: 0; color: #F7F5EF; max-width: 15ch;
    }
    .callout__title em { font-style: italic; }
    .callout__foot { margin-top: auto; padding-top: clamp(40px,6vw,90px); }
    .callout__sub { font-size: 16px; line-height: 1.6; color: #A9A498; margin: 0 0 26px; max-width: 46ch; }
    .callout .btn { background: #F7F5EF; color: #1C1A16; }
    .callout .btn:hover { background: #fff; }
    .callout__media { border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); min-height: 420px; }
    .callout__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
    @media (max-width: 860px) {
      .callout__inner { grid-template-columns: 1fr; }
      .callout__text, .callout__media { min-width: 0; }
      .callout__media { order: -1; min-height: 0; aspect-ratio: 16/10; width: 100%; }
      .callout__title { max-width: 100%; }
    }

    /* ===== Section 7 — testimonials (2-row horizontal scrolling wall) ===== */
    .ts { padding: var(--section-pad) 0; }
    .ts__head { text-align: center; display: flex; flex-direction: column; align-items: center; margin-bottom: clamp(32px,4vw,56px); padding: 0 var(--pad); }
    .ts__head .section-label { margin-bottom: 22px; }
    .ts__title { font-family: var(--serif); font-weight: 400; font-size: clamp(25px,2.9vw,40px); line-height: 1.1; letter-spacing: -0.025em; margin: 0; max-width: 18ch; color: var(--ink); }
    .ts__title em { font-style: italic; }
    .ts__head .btn { margin-top: 26px; }

    .ts__rows {
      display: flex; flex-direction: column; gap: clamp(14px,1.4vw,20px); overflow: hidden;
    }
    .ts__row { overflow: hidden; }
    .ts__row-inner { display: flex; align-items: stretch; gap: clamp(14px,1.4vw,20px); width: max-content; animation: tScrollLeft 70s linear infinite; }
    .ts__row:nth-child(2) .ts__row-inner { animation: tScrollRight 82s linear infinite; }
    @keyframes tScrollLeft  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    @keyframes tScrollRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }

    .tcard { flex-shrink: 0; width: clamp(290px,27vw,380px); min-height: clamp(330px,28vw,392px); display: flex; flex-direction: column; background: #FBFAF6; border: 1px solid rgba(45,42,36,0.08); border-radius: 16px; padding: clamp(24px,2vw,30px); }
    .tcard__mark { font-family: var(--serif); font-size: 30px; line-height: 0.6; color: var(--muted); }
    .tcard__text { font-family: var(--serif); font-weight: 400; font-size: 17px; line-height: 1.5; letter-spacing: -0.005em; color: var(--ink); margin: 14px 0 0; }
    .tcard__who { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 22px; }
    .tcard__who img { display: none; }
    .tcard__name { font-family: var(--sans); font-weight: 500; font-size: 14px; color: var(--ink); }
    .tcard__role { font-size: 13px; color: var(--muted); margin-top: 2px; }
    /* tint variations + photo cards sprinkled through the wall */
    .tcard--sand  { background: #F1EDE4; }
    .tcard--stone { background: #EAE7E0; }
    .tcard--photo { padding: 0; overflow: hidden; position: relative; }
    .tcard--cta { background: linear-gradient(140deg, #6E6451 0%, #4A4336 55%, #2C2820 100%); border-color: transparent; }
    .tcard--cta .tcard__mark { color: rgba(244,242,234,0.45); }
    .tcard--cta .tcard__text { color: #F4F2EA; }
    .tcard--cta .tcard__name { color: #F4F2EA; }
    .tcard--cta .tcard__role { color: rgba(244,242,234,0.7); }
    .tcard--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
    @media (prefers-reduced-motion: reduce) { .ts__row-inner { animation: none; } }
    @media (max-width: 560px) {
      .tcard { width: 64vw; }
    }

    /* ===== Selected work / portfolio ===== */
    .work { padding: var(--section-pad) var(--pad); }
    .work__head { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: clamp(28px,3.4vw,52px); }
    .work__head .section-label { margin-bottom: 22px; }
    .work__title { font-family: var(--serif); font-weight: 400; font-size: clamp(28px,3.4vw,46px); line-height: 1.04; letter-spacing: -0.03em; margin: 0; color: var(--ink); }
    .work__title em { font-style: italic; }

    .work__featured { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(22px,2.6vw,46px); align-items: stretch; margin-bottom: clamp(16px,1.6vw,24px); }
    .work__featured-info { align-self: center; }
    .work__kicker { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
    .work__featured-info h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(24px,2.4vw,34px); line-height: 1.12; letter-spacing: -0.02em; margin: 16px 0 0; color: var(--ink); }
    .work__featured-info p { font-size: 16px; line-height: 1.55; color: var(--ink); margin: 16px 0 26px; max-width: 42ch; }

    .work__grid { display: grid; grid-template-columns: repeat(2,1fr); gap: clamp(16px,1.6vw,24px); }

    .work-tile { position: relative; display: block; border-radius: var(--radius); overflow: hidden; text-decoration: none; min-height: clamp(280px,30vw,420px); }
    .work__featured .work-tile { min-height: clamp(360px,42vw,560px); }
    .work-tile .tile-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.22,1,.36,1); z-index: 0; }
    .work-tile:hover .tile-bg { transform: scale(1.05); }
    .work-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,18,15,0) 46%, rgba(20,18,15,0.62) 100%); z-index: 1; }
    .tile-inner { position: absolute; left: 0; bottom: 0; z-index: 2; padding: clamp(20px,2vw,30px); }
    .tile-name { font-family: var(--serif); font-weight: 400; font-size: clamp(20px,1.8vw,27px); line-height: 1.08; letter-spacing: -0.01em; color: #fff; }
    .tile-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.85); margin-top: 9px; }

    /* spinning "View work" badge on hover */
    .view-badge { position: absolute; top: 50%; left: 50%; --mx: 0px; --my: 0px; width: 150px; height: 150px; transform: translate(calc(-50% + var(--mx)), calc(-50% + var(--my))) scale(.7); z-index: 3; opacity: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; transition: opacity .45s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1); will-change: transform, opacity; mix-blend-mode: difference; }
    .work__featured .view-badge { width: 184px; height: 184px; }
    .work-tile:hover .view-badge { opacity: 1; transform: translate(calc(-50% + var(--mx)), calc(-50% + var(--my))) scale(1); transition: opacity .45s cubic-bezier(.2,.7,.2,1), transform .25s cubic-bezier(.2,.7,.2,1); }
    .view-badge svg { width: 100%; height: 100%; animation: badge-spin 11s linear infinite; }
    .view-badge text { font-family: var(--mono); font-size: 15px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; fill: #fff; }
    .view-badge .arrow { position: absolute; font-size: 22px; line-height: 1; font-weight: 300; color: #fff; }
    @keyframes badge-spin { to { transform: rotate(360deg); } }
    @media (prefers-reduced-motion: reduce) { .view-badge svg { animation: none; } }

    @media (max-width: 860px) {
      .work__featured { grid-template-columns: 1fr; }
      .work__grid { grid-template-columns: 1fr; }
      .work__featured-info { order: 0; }
    }

    /* ===== Section 8 — blog highlights ===== */
    .bloghl { padding: var(--section-pad) var(--pad); }
    .bloghl__head { margin-bottom: clamp(26px,3vw,44px); display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
    .bloghl__head-left { display: flex; flex-direction: column; align-items: flex-start; }
    .bloghl__head .section-label { margin-bottom: 18px; }
    .bloghl__title { font-family: var(--serif); font-weight: 400; font-size: clamp(28px,3.4vw,46px); line-height: 1.05; letter-spacing: -0.025em; margin: 0; color: var(--ink); }
    .bloghl__title em { font-style: italic; }

    .bloghl__feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px,2.4vw,40px); background: #EFEDE6; border: 1px solid rgba(45,42,36,0.08); border-radius: var(--radius); padding: clamp(20px,1.9vw,28px); margin-bottom: clamp(16px,1.6vw,24px); text-decoration: none; color: var(--ink); }
    .bloghl__ftext { display: flex; flex-direction: column; padding: clamp(10px,1.2vw,22px) clamp(4px,0.6vw,12px) clamp(10px,1.2vw,22px) clamp(10px,1.2vw,22px); }
    .bloghl__fh { font-family: var(--serif); font-weight: 400; font-size: clamp(26px,2.5vw,36px); line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); margin: 0; max-width: 20ch; }
    .bloghl__fsub { font-size: 16px; color: var(--muted); margin: 16px 0 0; max-width: 42ch; }
    .bloghl__ffoot { margin-top: auto; padding-top: clamp(22px,2.6vw,34px); border-top: 1px solid rgba(45,42,36,0.12); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
    .bloghl__fmeta { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); display: flex; gap: clamp(16px,2vw,30px); }
    .bloghl__fmedia { position: relative; border-radius: var(--radius); overflow: hidden; min-height: clamp(300px,30vw,420px); }
    .bloghl__fmedia img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

    .bloghl__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,1.6vw,24px); }
    .bcard { position: relative; display: flex; flex-direction: column; background: #EFEDE6; border: 1px solid rgba(45,42,36,0.08); border-radius: var(--radius); padding: clamp(22px,2.2vw,30px); min-height: clamp(230px,23vw,310px); text-decoration: none; overflow: hidden; }
    .bcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity .55s ease .08s, transform 1s cubic-bezier(.22,1,.36,1); z-index: 0; }
    .bcard:hover .bcard__img { opacity: 1; transform: scale(1); }
    /* dark overlay over the photo so white text stays readable on hover */
    .bcard::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(28,26,22,0.35), rgba(28,26,22,0.6)); opacity: 0; transition: opacity .55s ease .08s; pointer-events: none; }
    .bcard:hover::after { opacity: 1; }
    .bcard__h { position: relative; z-index: 2; font-family: var(--serif); font-weight: 400; font-size: clamp(21px,1.8vw,25px); line-height: 1.18; letter-spacing: -0.015em; color: var(--ink); margin: 0; max-width: 22ch; transition: color .4s ease; }
    .bcard__meta { position: relative; z-index: 2; margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(45,42,36,0.18); font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); display: flex; gap: clamp(14px,2vw,28px); transition: color .4s ease, border-color .4s ease; }
    .bcard:hover .bcard__h { color: #fff; }
    .bcard:hover .bcard__meta { color: #fff; border-top-color: rgba(255,255,255,0.3); }
    /* featured card image lifts slightly on hover */
    .bloghl__fmedia img { transition: transform 1s cubic-bezier(.22,1,.36,1); }
    .bloghl__feature:hover .bloghl__fmedia img { transform: scale(1.04); }
    @media (max-width: 860px) {
      .bloghl__feature { grid-template-columns: 1fr; }
      .bloghl__fmedia { order: -1; min-height: 240px; }
      .bloghl__grid { grid-template-columns: 1fr; }
    }

    /* ===== Section 9 — stats (staggered cards) ===== */
    .stats { min-height: calc(100vh - var(--topbar)); padding: clamp(40px,5vw,80px) var(--pad);
      display: flex; flex-direction: column; }
    .stats__head { margin-bottom: clamp(32px,4vw,56px); display: flex; flex-direction: column; align-items: flex-start; }
    .stats__head .section-label { margin-bottom: 22px; }
    .stats__title { font-family: var(--serif); font-weight: 400; font-size: clamp(25px,2.9vw,40px); line-height: 1.1; letter-spacing: -0.025em; margin: 0; max-width: 16ch; color: var(--ink); }
    .stats__title em { font-style: italic; }
    .stats__head .btn { margin-top: 26px; }
    .stats__row { flex: 1; min-height: 380px; display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,1.6vw,24px); align-items: end; }
    .stat-card { display: flex; flex-direction: column; border-radius: 16px; padding: clamp(22px,2vw,30px);
      background: linear-gradient(180deg,#EFEDE6,#E3E0D7); }
    .stat-card--s { height: 64%; } .stat-card--m { height: 82%; } .stat-card--t { height: 100%; }
    .stat-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
    .stat-card__num { font-family: var(--serif); font-weight: 400; font-size: clamp(26px,2.3vw,34px); letter-spacing: -0.02em; color: var(--ink); }
    .stat-card__label { font-size: 14px; color: var(--muted); }
    .stat-card__desc { margin-top: auto; padding-top: 24px; font-size: 15px; line-height: 1.5; color: var(--ink); max-width: 34ch; }
    @media (max-width: 860px) {
      .stats { min-height: 0; }
      .stats__row { grid-template-columns: 1fr; align-items: stretch; }
      .stat-card--s, .stat-card--m, .stat-card--t { height: auto; min-height: 200px; }
    }

    /* ===== Section 10 — CTA cards (above footer) ===== */
    .cta { padding: clamp(48px,6vw,96px) var(--pad) clamp(36px,4vw,60px); }
    .cta__head { margin-bottom: clamp(28px,3vw,48px); }
    .cta__title { font-family: var(--serif); font-weight: 400; font-size: clamp(25px,2.9vw,40px); line-height: 1.1; letter-spacing: -0.025em; margin: 0; color: var(--ink); }
    .cta__title em { font-style: italic; }
    .cta__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,1.6vw,24px); }
    .cta-card { position: relative; overflow: hidden; border-radius: var(--radius); padding: clamp(28px,2.8vw,44px); min-height: 460px; display: flex; flex-direction: column; }
    .cta-card--dark { background: #1C1A16; color: #E8E5DC; }
    .cta-card--red {
      color: #fff;
      background:
        radial-gradient(42% 46% at 92% 8%,  rgba(205,176,154,0.55), rgba(205,176,154,0) 60%),
        radial-gradient(60% 60% at 24% 30%,  rgba(156,52,46,0.90),  rgba(156,52,46,0) 60%),
        radial-gradient(56% 56% at 82% 24%,  rgba(120,32,30,0.85),  rgba(120,32,30,0) 60%),
        radial-gradient(60% 60% at 70% 82%,  rgba(176,74,58,0.80),  rgba(176,74,58,0) 62%),
        radial-gradient(52% 52% at 14% 86%,  rgba(110,28,30,0.85),  rgba(110,28,30,0) 60%),
        linear-gradient(135deg, #7E2A24, #9B3A30);
    }
    .cta-card__ico { width: 46px; height: 46px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.4); display: inline-flex; align-items: center; justify-content: center; color: #fff; margin-bottom: clamp(36px,4vw,72px); }
    .cta-card__ico svg { width: 20px; height: 20px; }
    .cta-card__h { font-family: var(--serif); font-weight: 400; font-size: clamp(23px,2.3vw,33px); line-height: 1.14; letter-spacing: -0.02em; margin: 0; max-width: 18ch; }
    .cta-card--dark .cta-card__h { color: #F7F5EF; }
    .cta-card__foot { margin-top: auto; padding-top: clamp(40px,6vw,90px); display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
    .cta-card__p { font-size: 15px; line-height: 1.55; margin: 0; max-width: 34ch; }
    .cta-card--dark .cta-card__p { color: #A9A498; }
    .cta-card--red .cta-card__p { color: rgba(255,255,255,0.85); }
    .cta-card .btn { background: #F7F5EF; color: #1C1A16; flex-shrink: 0; }
    .cta-card .btn:hover { background: #fff; }
    @media (max-width: 860px) {
      .cta__grid { grid-template-columns: 1fr; }
      .cta-card { min-height: 360px; }
      .cta-card__foot { flex-direction: column; align-items: flex-start; }
    }

    /* =========================================================
       SHARED: generic section + page hero + footer
       ========================================================= */
    .section-label {
      display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
      text-transform: uppercase; color: var(--muted); background: #ECEAE1;
      padding: 6px 11px; border-radius: 6px;
    }

    /* page hero (interior pages: Pricing, About, Services, etc.) */
    .page-hero {
      padding: calc(var(--topbar) + clamp(48px,7vw,120px)) var(--pad) clamp(40px,5vw,72px);
      text-align: center;
      display: flex; flex-direction: column; align-items: center;
    }
    .page-hero .section-label { margin-bottom: 26px; }
    .page-hero__title {
      font-family: var(--serif); font-weight: 400; font-size: clamp(34px,4.4vw,58px);
      line-height: 1.05; letter-spacing: -0.035em; margin: 0; color: var(--ink); max-width: 18ch;
    }
    .page-hero__title em { font-style: italic; }
    .page-hero__lede { font-size: 17px; color: var(--ink); line-height: 1.5; max-width: 56ch; margin: 22px auto 0; }

    /* ===== About — hero (heading + scrolling image strip) ===== */
    .abouthero { min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-start; padding-top: calc(var(--topbar) + clamp(8px,2vw,24px)); padding-bottom: clamp(40px,5vw,72px); overflow: hidden; }
    .abouthero__head { padding: 0 var(--pad); display: flex; flex-direction: column; align-items: flex-start; }
    .abouthero__head .section-label { margin-bottom: 26px; }
    .abouthero__title { font-family: var(--serif); font-weight: 400; font-size: clamp(32px,4vw,56px); line-height: 1.06; letter-spacing: -0.03em; margin: 0; max-width: 24ch; color: var(--ink); }
    .abouthero__title em { font-style: italic; }
    .abouthero__head .btn { margin-top: clamp(28px,3vw,42px); }
    .abouthero__strip {
      margin-top: auto; padding-top: clamp(40px,5vw,72px); overflow: hidden;
    }
    .abouthero__track { display: flex; gap: clamp(14px,1.4vw,20px); width: max-content; animation: aboutScroll 55s linear infinite; }
    .abouthero__shot { flex: 0 0 auto; height: clamp(300px,34vw,460px); border-radius: var(--radius); overflow: hidden; }
    .abouthero__shot img { width: auto; height: 100%; object-fit: cover; display: block; }
    @keyframes aboutScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    @media (prefers-reduced-motion: reduce) { .abouthero__track { animation: none; } }
    @media (max-width: 700px) {
      .abouthero { justify-content: flex-start; min-height: 100vh; min-height: 100dvh; padding-top: calc(var(--topbar) + clamp(20px,6vw,40px)); padding-bottom: clamp(28px,7vw,44px); }
      .abouthero__strip { margin-top: clamp(40px,11vw,64px); display: flex; }
      .abouthero__track { align-items: stretch; }
      .abouthero__shot { height: clamp(240px,62vw,340px); }
    }

    /* ===== About — mission quote + stats ===== */
    .amiss { background: #1C1A16; color: #E8E5DC; min-height: calc(100vh - var(--topbar));
      display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(32px,4vw,72px);
      align-items: stretch; padding: clamp(32px,4vw,64px) var(--pad); }
    .amiss__media { position: relative; width: 90%; }
    .amiss__media img { width: 100%; height: calc(100vh - var(--topbar) - clamp(56px,7vw,112px)); max-height: 900px; object-fit: cover; display: block; border-radius: var(--radius); }
    .amiss__text { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; min-width: 0; }
    .amiss__eyebrow { align-self: flex-start; margin-bottom: clamp(16px,2vw,24px); background: rgba(244,242,234,0.10); color: rgba(244,242,234,0.72); }
    .amiss__title { font-family: var(--serif); font-weight: 400; font-size: clamp(26px,2.7vw,42px); line-height: 1.12; letter-spacing: -0.02em; color: #F4F2EA; margin: 0; max-width: 22ch; }
    .amiss__body { font-size: 16px; line-height: 1.6; color: rgba(232,229,220,0.72); margin: clamp(18px,1.9vw,24px) 0 0; max-width: 62ch; }
    .amiss__text .btn { margin-top: clamp(24px,2.8vw,34px); background: #F7F5EF; color: #1C1A16; }
    .amiss__text .btn:hover { background: #fff; }
    .amiss__stats { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(18px,2.4vw,40px); margin-top: auto; padding-top: clamp(40px,5vw,68px); width: 100%; }
    .amiss__stat { display: flex; flex-direction: column; align-items: flex-start; }
    .amiss__num { font-family: var(--serif); font-weight: 400; font-size: clamp(34px,3.8vw,56px); line-height: 1; letter-spacing: -0.03em; color: #F4F2EA; }
    .amiss__lab { font-size: 13px; color: rgba(232,229,220,0.6); margin-top: 10px; }
    @media (max-width: 860px) {
      .amiss { grid-template-columns: 1fr; min-height: 0; gap: clamp(28px,5vw,40px); }
      .amiss__media { width: 100%; }
      .amiss__media img { height: auto; aspect-ratio: 4/3; max-height: none; }
    }

    /* ===== About — values ===== */
    .values { background: #1C1A16; color: #E8E5DC; padding: var(--section-pad) var(--pad); }
    .values__head { text-align: left; margin: 0 0 clamp(32px,4vw,56px); }
    .values__eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(232,229,220,0.55); display: inline-block; margin-bottom: clamp(18px,2vw,26px); }
    .values__title { font-family: var(--serif); font-weight: 400; font-size: clamp(26px,2.7vw,42px); line-height: 1.12; letter-spacing: -0.02em; color: #F4F2EA; margin: 0; max-width: 26ch; }
    .values__title em { font-style: italic; }
    .values__photos { display: grid; grid-template-columns: 1.45fr 1fr; gap: clamp(16px,1.6vw,24px); margin-bottom: clamp(36px,4vw,60px); }
    .values__photo { border-radius: var(--radius); overflow: hidden; height: clamp(340px,36vw,520px); }
    .values__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .values__list { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(22px,2.6vw,44px); }
    .values__item { display: flex; flex-direction: column; align-items: center; text-align: center; }
    .values__item h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(18px,1.35vw,21px); letter-spacing: -0.01em; color: #F4F2EA; margin: 0 0 12px; }
    .values__item p { font-size: 14px; color: rgba(232,229,220,0.62); line-height: 1.55; margin: 0 auto; max-width: 30ch; }
    @media (max-width: 960px) { .values__list { grid-template-columns: repeat(2,1fr); gap: clamp(28px,4vw,44px); } }
    @media (max-width: 860px) {
      .values__photos { grid-template-columns: 1fr; gap: 14px; margin-bottom: clamp(28px,6vw,40px); }
      .values__photo { height: clamp(240px,52vw,360px); }
      .values__head { margin-bottom: clamp(26px,6vw,40px); }
    }
    @media (max-width: 560px) {
      .values__list { grid-template-columns: 1fr; gap: clamp(22px,5vw,30px); }
      .values__item { align-items: flex-start; text-align: left; }
      .values__item h3 { margin: 0 0 8px; }
      .values__item p { margin: 0; max-width: none; }
    }

    /* ===== About — scopes / pricing ===== */
    .scope { background: var(--bg); padding: var(--section-pad) var(--pad); }
    .scope__head { max-width: 640px; margin: 0 0 clamp(34px,4vw,54px); }
    .scope__head .section-label { margin-bottom: 22px; }
    .scope__title { font-family: var(--serif); font-weight: 400; font-size: clamp(30px,3.6vw,52px); line-height: 1.04; letter-spacing: -0.03em; color: var(--ink); margin: 0; }
    .scope__title em { font-style: italic; }
    .scope__sub { font-size: 16px; line-height: 1.6; color: var(--muted); margin: clamp(16px,1.8vw,22px) 0 0; }
    .scope__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(16px,1.6vw,24px); }
    .scope-card { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(45,42,36,0.12); border-radius: var(--radius); padding: clamp(22px,2vw,30px); }
    .scope-card__label { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
    .scope-card__price { font-family: var(--serif); font-weight: 400; font-size: clamp(20px,1.9vw,27px); line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 clamp(18px,2vw,24px); padding-bottom: clamp(18px,2vw,24px); border-bottom: 1px solid rgba(45,42,36,0.1); }
    .scope-card__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; flex: 1; }
    .scope-card__list li { font-size: 14px; line-height: 1.4; color: var(--ink); display: flex; gap: 10px; }
    .scope-card__list li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); margin-top: 7px; flex-shrink: 0; opacity: 0.45; }
    .scope-card__foot { margin-top: clamp(22px,2.6vw,30px); display: flex; }
    .scope-card__foot .btn { align-self: flex-start; }
    .scope__note { text-align: center; font-size: 15px; color: var(--muted); margin: clamp(34px,4vw,52px) 0 0; }
    @media (max-width: 980px) { .scope__grid { grid-template-columns: repeat(2,1fr); } }
    @media (max-width: 540px) { .scope__grid { grid-template-columns: 1fr; } }

    /* ===== About — FAQ (two-column, always open) ===== */
    .faq { background: var(--bg); padding: var(--section-pad) var(--pad); }
    .faq__head { text-align: center; margin: 0 auto clamp(32px,4vw,52px); }
    .faq__head .section-label { margin-bottom: 22px; }
    .faq__title { font-family: var(--serif); font-weight: 400; font-size: clamp(30px,3.6vw,52px); line-height: 1.04; letter-spacing: -0.03em; color: var(--ink); margin: 0; }
    .faq__title em { font-style: italic; }
    .faq__list { border-top: 1px solid rgba(45,42,36,0.14); }
    .faq__item { display: grid; grid-template-columns: 1fr clamp(320px,34vw,460px); gap: clamp(24px,4vw,72px); padding: clamp(24px,3vw,40px) 0; border-bottom: 1px solid rgba(45,42,36,0.14); }
    .faq__q { font-family: var(--serif); font-weight: 400; font-size: clamp(19px,1.6vw,24px); letter-spacing: -0.01em; color: var(--ink); margin: 0; }
    .faq__a { font-size: clamp(15px,1.05vw,16px); line-height: 1.6; color: var(--muted); margin: 0; max-width: 52ch; }
    @media (max-width: 760px) {
      .faq__item { grid-template-columns: 1fr; gap: 12px; }
    }
    @media (max-width: 700px) {
      .amiss__stats { gap: clamp(10px,3vw,18px); padding-top: clamp(30px,7vw,42px); }
      .amiss__num { font-size: clamp(28px,8.5vw,40px); }
      .amiss__lab { font-size: 11px; margin-top: 6px; line-height: 1.3; }
    }

    /* ===== About — founder note ===== */
    .fnote { padding: clamp(56px,7vw,110px) var(--pad); }
    .fnote__inner { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: 0.78fr 1fr; gap: clamp(32px,5vw,72px); align-items: center; }
    .fnote__photo { border-radius: 16px; overflow: hidden; aspect-ratio: 4/5; }
    .fnote__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .fnote__text .section-label { margin-bottom: 22px; }
    .fnote__text p { font-size: clamp(15px,1.15vw,17px); line-height: 1.62; color: var(--ink); margin: 0 0 16px; }
    .fnote__text p:last-of-type { margin-bottom: 0; }
    .fnote__sign { margin-top: clamp(24px,3vw,36px); }
    .fnote__sign img { height: 52px; width: auto; display: block; margin-bottom: 8px; }
    .fnote__role { font-size: 13px; letter-spacing: .02em; color: var(--muted); }
    @media (max-width: 760px) {
      .fnote__inner { grid-template-columns: 1fr; gap: clamp(28px,7vw,40px); }
      .fnote__photo { aspect-ratio: 4/3; max-width: 360px; }
    }

    /* ===== About — frameworks (1 wide + 2 cards) ===== */
    .fw { padding: clamp(48px,6vw,96px) var(--pad); }
    .fw__head { margin-bottom: clamp(28px,3vw,48px); }
    .fw__title { font-family: var(--serif); font-weight: 400; font-size: clamp(25px,2.9vw,40px); line-height: 1.12; letter-spacing: -0.025em; margin: 0; max-width: 24ch; color: var(--ink); }
    .fw__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,1.6vw,24px); }
    .fw-card { position: relative; overflow: hidden; border-radius: var(--radius); padding: clamp(28px,2.8vw,44px); min-height: 440px; display: flex; flex-direction: column; }
    .fw-card__h { font-family: var(--serif); font-weight: 400; font-size: clamp(22px,2vw,30px); letter-spacing: -0.02em; margin: 0; color: var(--ink); }
    .fw-card__h em { font-style: italic; }
    .fw-card__p { font-size: 15px; line-height: 1.55; color: var(--ink); margin: 14px 0 0; max-width: 42ch; }
    .fw-card .btn { margin-top: auto; align-self: flex-start; }

    .fw-card--tan { grid-column: 1 / -1; min-height: 360px; background: #E4E0D7; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(24px,3vw,48px); align-items: stretch; }
    .fw-card--tan .fw-card__text { display: flex; flex-direction: column; }
    .fw-card--dark { background: #1C1A16; }
    .fw-card--dark .fw-card__h { color: #F7F5EF; }
    .fw-card--dark .fw-card__p { color: #A9A498; }
    .fw-card--red {
      color: #fff;
      background:
        radial-gradient(42% 46% at 90% 10%, rgba(205,176,154,0.5), rgba(205,176,154,0) 60%),
        radial-gradient(60% 60% at 22% 32%, rgba(156,52,46,0.9),  rgba(156,52,46,0) 60%),
        radial-gradient(58% 58% at 84% 78%, rgba(176,74,58,0.8),  rgba(176,74,58,0) 62%),
        radial-gradient(52% 52% at 12% 88%, rgba(110,28,30,0.85), rgba(110,28,30,0) 60%),
        linear-gradient(135deg, #7E2A24, #9B3A30);
    }
    .fw-card--red .fw-card__h { color: #fff; }
    .fw-card--red .fw-card__p { color: rgba(255,255,255,0.85); }
    .fw-card--dark .btn, .fw-card--red .btn { background: #F7F5EF; color: #1C1A16; }
    .fw-card--dark .btn:hover, .fw-card--red .btn:hover { background: #fff; }

    /* tan card decorative viz: rings + dropdown mock */
    .fw-viz { position: relative; display: flex; align-items: center; justify-content: center; min-height: 240px; }
    .fw-rings { position: absolute; inset: 0; margin: auto; width: 380px; height: 380px; pointer-events: none; }
    .fw-rings circle { fill: none; stroke: rgba(45,42,36,0.13); }
    .fw-drop { position: relative; width: 232px; }
    .fw-drop__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff; border: 1px solid rgba(45,42,36,0.10); border-radius: 10px; padding: 11px 14px; font-size: 14px; color: var(--ink); width: 196px; margin-left: auto; box-shadow: 0 6px 16px -10px rgba(0,0,0,.3); }
    .fw-drop__head svg { width: 14px; height: 14px; color: var(--muted); }
    .fw-drop__list { margin-top: 10px; background: #fff; border: 1px solid rgba(45,42,36,0.10); border-radius: 12px; padding: 8px; box-shadow: 0 18px 40px -18px rgba(45,42,36,.45); }
    .fw-drop__item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; font-size: 14px; color: var(--ink); }
    .fw-drop__item.is-active { background: #F2F0EA; }
    .fw-drop__item svg { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }

    @media (max-width: 860px) {
      .fw__grid { grid-template-columns: 1fr; }
      .fw-card--tan { grid-template-columns: 1fr; }
      .fw-card { min-height: 340px; }
      .fw-viz { min-height: 220px; }
    }

    /* ===== Process / how we work (heading + photo + step timeline) ===== */
    .process { padding: clamp(48px,6vw,96px) var(--pad); }
    .process__title { font-family: var(--serif); font-weight: 300; font-size: clamp(22px,2.05vw,29px); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 clamp(36px,4vw,64px); max-width: 30ch; color: var(--ink); }
    .process__grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(40px,5vw,100px); align-items: stretch; }
    .process__media { border-radius: var(--radius); overflow: hidden; min-height: 360px; }
    .process__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .process__steps { display: flex; flex-direction: column; }
    .pstep { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(28px,3.6vw,72px); padding: clamp(16px,1.7vw,22px) 0; border-top: 1px solid rgba(45,42,36,0.14); }
    .pstep:last-child { border-bottom: 1px solid rgba(45,42,36,0.14); }
    .pstep__label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 9px; }
    .pstep__name { font-family: var(--sans); font-size: 16px; font-weight: 500; color: var(--ink); }
    .pstep__desc { font-size: 14px; line-height: 1.55; color: var(--ink); }
    @media (max-width: 860px) {
      .process__grid { grid-template-columns: 1fr; }
      .process__media { min-height: 0; aspect-ratio: 4/3; }
      .pstep { grid-template-columns: 1fr; gap: 8px; }
    }

    /* ===== Featured case study (photo w/ quote + stats, warm footer band) ===== */
    .csf { padding: clamp(40px,5vw,80px) var(--pad); }
    .csf__card { width: 100%; display: flex; flex-direction: column; min-height: calc(100vh - var(--topbar) - clamp(80px,10vw,160px)); border-radius: var(--radius); overflow: hidden; }
    .csf__media { position: relative; flex: 1 1 0; min-height: 380px; overflow: hidden; }
    .csf__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
    .csf__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,18,15,0.10) 35%, rgba(20,18,15,0.58)); }
    .csf__client { position: absolute; top: clamp(20px,2vw,30px); left: clamp(22px,2.4vw,34px); z-index: 2; font-family: var(--mono); font-size: 13px; letter-spacing: 0.02em; color: rgba(255,255,255,0.82); }
    .csf__quote { position: absolute; top: clamp(22px,3vw,40px); right: clamp(22px,3vw,46px); width: min(44%, 470px); z-index: 2; color: #fff; }
    .csf__quote p { font-family: var(--serif); font-weight: 400; font-size: clamp(18px,1.7vw,26px); line-height: 1.3; letter-spacing: -0.01em; margin: 0; }
    .csf__who { margin-top: 18px; }
    .csf__who strong { display: block; font-family: var(--sans); font-weight: 500; font-size: 14px; }
    .csf__who span { display: block; font-size: 13px; color: rgba(255,255,255,0.72); margin-top: 3px; }
    .csf__stats { position: absolute; right: clamp(22px,3vw,46px); bottom: clamp(28px,4vw,56px); z-index: 2; display: flex; gap: clamp(34px,4vw,72px); width: min(44%, 470px); color: #fff; }
    .csf__stat .n { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(30px,3vw,44px); line-height: 1; letter-spacing: -0.02em; }
    .csf__stat .l { display: block; font-size: 13px; color: rgba(255,255,255,0.75); margin-top: 9px; max-width: 18ch; }
    .csf__foot { background: #E7E2D8; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px,4vw,72px); align-items: center; padding: clamp(28px,3vw,48px); }
    .csf__title { font-family: var(--serif); font-weight: 400; font-size: clamp(24px,2.5vw,36px); line-height: 1.12; letter-spacing: -0.025em; margin: 0; color: var(--ink); max-width: 18ch; }
    .csf__foot-right p { font-size: 15px; line-height: 1.6; color: var(--ink); margin: 0 0 22px; max-width: 44ch; }
    @media (max-width: 860px) {
      .csf__card { min-height: 0; }
      .csf__media { flex: none; height: 420px; min-height: 0; }
      .csf__quote { width: 62%; }
      .csf__stats { width: auto; gap: 28px; }
      .csf__foot { grid-template-columns: 1fr; gap: 20px; }
      .csf__title { max-width: 100%; }
    }
    @media (max-width: 560px) {
      .csf__quote { position: static; width: auto; padding: 20px 20px 0; color: var(--ink); }
      .csf__who span { color: var(--muted); }
      .csf__stats { position: static; padding: 16px 20px 4px; color: var(--ink); }
      .csf__stat .l { color: var(--muted); }
      .csf__client { color: rgba(255,255,255,0.9); }
      .csf__media::after { display: none; }
    }

    /* ===== Footer (shared, dark) ===== */
    .site-footer { background: #1C1A16; color: #E8E5DC; }
    .footer__main {
      display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: clamp(28px,3vw,56px);
      padding: clamp(64px,7vw,112px) var(--pad) clamp(48px,6vw,88px);
    }
    .footer__brand-logo { display: inline-block; }
    .footer__brand-logo img { height: 26px; width: auto; display: block; filter: brightness(0) invert(1); }
    .footer__brand p { font-size: 16px; line-height: 1.6; color: #A9A498; margin: 26px 0 0; max-width: 32ch; }
    .footer__col { display: flex; flex-direction: column; }
    .footer__label {
      font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
      color: #79746A; margin-bottom: 20px;
    }
    .footer__col a {
      font-family: var(--serif); font-size: 17px; color: #CFCBC1; text-decoration: none; padding: 6px 0;
      transition: color .2s ease;
    }
    .footer__col a:hover { color: #fff; }

    .footer__bottom {
      display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
      padding: 26px var(--pad); border-top: 1px solid rgba(255,255,255,0.10);
    }
    .footer__social { display: flex; align-items: center; gap: 16px; }
    .footer__social a { color: #8A857B; display: inline-flex; transition: color .2s ease; }
    .footer__social a:hover { color: #fff; }
    .footer__social svg { width: 18px; height: 18px; }
    .footer__copy { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: #79746A; text-transform: uppercase; }
    .footer__legal {
      padding: clamp(28px,3vw,44px) var(--pad) clamp(40px,5vw,64px); margin: 0;
      font-size: 12px; line-height: 1.7; color: #6A655C; max-width: 110ch;
    }
    @media (max-width: 860px) {
      .footer__main { grid-template-columns: 1fr 1fr; }
      .footer__brand { grid-column: 1 / -1; }
    }
    @media (max-width: 520px) { .footer__main { grid-template-columns: 1fr; } }

    /* =========================================================
       PRICING PAGE
       ========================================================= */
    .pricing { padding: clamp(8px,1vw,16px) var(--pad) clamp(56px,7vw,104px); }
    .pricing__grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px,1.6vw,24px);
      max-width: 1180px; margin: 0 auto;
    }
    .price-card {
      display: flex; flex-direction: column;
      background: #FBFAF6; border: 1px solid rgba(45,42,36,0.10);
      border-radius: var(--radius); padding: clamp(26px,2.4vw,36px);
    }
    .price-card--featured { background: #1C1A16; border-color: #1C1A16; color: #E8E5DC; }
    .price-card__tag {
      font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--muted); margin-bottom: 18px;
    }
    .price-card--featured .price-card__tag { color: #9C968A; }
    .price-card__name { font-family: var(--serif); font-weight: 400; font-size: 24px; letter-spacing: -0.02em; margin: 0; color: var(--ink); }
    .price-card--featured .price-card__name { color: #F7F5EF; }
    .price-card__price { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 4px; }
    .price-card__amount { font-family: var(--serif); font-weight: 400; font-size: clamp(36px,4vw,48px); letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
    .price-card--featured .price-card__amount { color: #F7F5EF; }
    .price-card__per { font-size: 14px; color: var(--muted); }
    .price-card__includes {
      font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--muted); margin: 26px 0 16px; padding-top: 22px; border-top: 1px solid rgba(45,42,36,0.10);
    }
    .price-card--featured .price-card__includes { color: #9C968A; border-top-color: rgba(255,255,255,0.12); }
    .price-card__list { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
    .price-card__list li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.45; color: var(--ink); }
    .price-card--featured .price-card__list li { color: #D9D5CB; }
    .price-card__list svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--ink); }
    .price-card--featured .price-card__list svg { color: #C7B299; }
    .price-card .btn { justify-content: center; width: 100%; }
    .price-card--featured .btn { background: #F7F5EF; color: #1C1A16; }
    .price-card--featured .btn:hover { background: #fff; }
    .price-card__foot { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 16px 0 0; }
    .price-card--featured .price-card__foot { color: #9C968A; }
    @media (max-width: 860px) { .pricing__grid { grid-template-columns: 1fr; max-width: 460px; } }

    /* need-guidance strip */
    .guidance {
      max-width: 1180px; margin: clamp(20px,2vw,32px) auto 0; padding: 22px clamp(24px,2.4vw,32px);
      display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
      background: #EFEEE8; border-radius: 16px;
    }
    .guidance p { margin: 0; font-size: 15px; color: var(--ink); }
    .guidance p span { color: var(--muted); }
    .guidance__left { display: flex; align-items: center; gap: 16px; }
    .guidance__avatars { display: flex; flex-shrink: 0; }
    .guidance__avatars img { width: 40px; height: 40px; border-radius: 999px; object-fit: cover; border: 2px solid #EFEEE8; margin-left: -10px; }
    .guidance__avatars img:first-child { margin-left: 0; }

    /* pricing section header (homepage + pricing page) */
    .pricing__head { text-align: center; display: flex; flex-direction: column; align-items: center; padding: clamp(56px,7vw,100px) var(--pad) clamp(30px,4vw,52px); }
    .pricing__head .section-label { margin-bottom: 22px; }
    .pricing__title { font-family: var(--serif); font-weight: 400; font-size: clamp(28px,3.4vw,52px); line-height: 1.06; letter-spacing: -0.03em; margin: 0; max-width: 20ch; color: var(--ink); }

    /* ===== Customers carousel (shared) ===== */
    .customers { background: #EFEEE8; padding: clamp(48px,6vw,96px) 0; }
    .customers__head { padding: 0 var(--pad); margin-bottom: clamp(28px,3vw,44px); }
    .customers__head .section-label { margin-bottom: 18px; }
    .customers__title { font-family: var(--serif); font-weight: 400; font-size: clamp(25px,2.9vw,40px); letter-spacing: -0.025em; margin: 0; color: var(--ink); }
    .customers__track {
      display: flex; gap: clamp(16px,1.6vw,24px); overflow-x: auto; scroll-snap-type: x mandatory;
      padding: 0 var(--pad); scroll-padding-left: var(--pad); scrollbar-width: none;
    }
    .customers__track::-webkit-scrollbar { display: none; }
    .customer-card {
      position: relative; flex: 0 0 min(340px, 78%); aspect-ratio: 4/5;
      border-radius: var(--radius); overflow: hidden; scroll-snap-align: start;
    }
    .customer-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .customer-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.62)); }
    .customer-card__tag { position: absolute; top: 18px; left: 18px; z-index: 2; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; }
    .customer-card__who { position: absolute; left: 20px; bottom: 20px; right: 20px; z-index: 2; color: #fff; }
    .customer-card__who strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 20px; }
    .customer-card__who span { display: block; font-size: 13px; color: rgba(255,255,255,0.78); margin-top: 4px; }

    /* ===== Services / Creative page ===== */
    .svc-hero { text-align: center; display: flex; flex-direction: column; align-items: center; padding: calc(var(--topbar) + clamp(8px,2vw,24px)) var(--pad) clamp(40px,5vw,72px); }
    .svc-hero .section-label { margin-bottom: 24px; }
    .svc-hero__title { font-family: var(--serif); font-weight: 400; font-size: clamp(34px,4.2vw,58px); line-height: 1.05; letter-spacing: -0.025em; margin: 0; max-width: 20ch; color: var(--ink); text-wrap: balance; }
    .svc-hero__title em { font-style: italic; }
    .svc-hero__sub { font-size: 17px; line-height: 1.5; color: var(--ink); margin: clamp(20px,2vw,28px) 0 0; max-width: 50ch; }
    .svc-hero__cta { display: flex; gap: 14px; margin-top: clamp(26px,3vw,38px); flex-wrap: wrap; justify-content: center; }
    .svc-hero__trust { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: clamp(28px,3.4vw,44px); }
    .svc-hero__avatars { display: flex; padding-left: 10px; }
    .svc-hero__avatars img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid var(--bg); margin-left: -10px; }
    .svc-hero__trust > span { font-size: 14px; color: var(--muted); }

    .svc-hero__bento { width: 100%; margin: clamp(40px,5vw,76px) 0 0; display: grid; grid-template-columns: repeat(6,1fr); grid-auto-rows: clamp(160px,16vw,240px); gap: clamp(12px,1.2vw,18px); text-align: left; }
    .sbento { position: relative; border-radius: clamp(14px,1.3vw,20px); overflow: hidden; background: #E6E1D6; }
    .sbento--photo { grid-column: 1 / 3; grid-row: 1 / 3; }
    .sbento--photo img, .sbento--photo video { width: 100%; height: 100%; object-fit: cover; display: block; }
    .sbento--accent { grid-column: 3 / 5; grid-row: 1 / 2; background: linear-gradient(135deg,#F0D9B8 0%,#DE9A63 45%,#C25A38 100%); display: flex; align-items: center; padding: clamp(15px,1.5vw,22px); }
    .sbento__rows { display: flex; flex-direction: column; gap: 9px; width: 100%; }
    .srow { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: rgba(255,255,255,0.82); border-radius: 9px; padding: 9px 12px; font-size: 13px; color: var(--ink); }
    .srow--dark { background: #1C1A16; color: #F4F2EA; }
    .srow__tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; }
    .sbento--logo { grid-column: 5 / 7; grid-row: 1 / 2; background: #ECEAE1; display: flex; align-items: center; justify-content: center; }
    .sbento--logo img { width: auto; height: clamp(26px,2.4vw,40px); }
    .sbento--msg { grid-column: 3 / 7; grid-row: 2 / 3; background: #1C1A16; display: flex; align-items: flex-end; padding: clamp(16px,1.6vw,24px); }
    .smsg { background: #26231E; border: 1px solid rgba(232,229,220,0.1); border-radius: 12px; padding: clamp(14px,1.4vw,18px); width: 100%; max-width: 520px; margin-left: auto; }
    .smsg__head { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(232,229,220,0.6); margin-bottom: 8px; }
    .smsg p { font-size: 14px; line-height: 1.45; color: #ECE9DF; margin: 0 0 12px; }
    .smsg__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .smsg__foot > span:first-child { font-size: 12px; color: rgba(232,229,220,0.5); }
    .smsg__btn { font-size: 12px; background: #F4F2EA; color: #1C1A16; border-radius: 999px; padding: 6px 14px; white-space: nowrap; }
    @media (max-width: 760px) {
      .svc-hero__bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
      .sbento { grid-column: 1 / -1 !important; grid-row: auto !important; }
      .sbento--photo { aspect-ratio: 16/10; }
      .sbento--accent, .sbento--msg { min-height: 160px; }
      .sbento--logo { min-height: 120px; }
    }

    .svc { padding: clamp(52px,6.5vw,100px) var(--pad); border-top: 1px solid rgba(45,42,36,0.1); }
    .svc__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,80px); align-items: center; }
    .svc__media { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; }
    .svc__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .svc--rev .svc__media { order: 2; }
    .svc__float { position: absolute; left: clamp(14px,1.4vw,20px); bottom: clamp(14px,1.4vw,20px); z-index: 2;
      background: rgba(247,245,239,0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
      border-radius: 12px; padding: clamp(13px,1.2vw,16px) clamp(15px,1.4vw,18px); box-shadow: 0 14px 34px -16px rgba(20,18,15,0.45); }
    .svc__float-label { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 9px; }
    .svc__float-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
    .svc__float-list li { font-size: 13px; color: var(--ink); display: flex; align-items: center; gap: 9px; }
    .svc__float-list li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #C68A5E; flex-shrink: 0; }
    .svc__text { display: flex; flex-direction: column; align-items: flex-start; }
    .svc__text .section-label { margin-bottom: clamp(16px,1.8vw,22px); }
    .svc__title { font-family: var(--serif); font-weight: 400; font-size: clamp(28px,3.2vw,44px); line-height: 1.06; letter-spacing: -0.025em; margin: 0; color: var(--ink); max-width: 18ch; }
    .svc__body { font-size: clamp(16px,1.2vw,18px); line-height: 1.6; color: var(--muted); margin: clamp(16px,1.9vw,24px) 0 0; max-width: 46ch; }
    .svc__text .btn { margin-top: clamp(22px,2.6vw,32px); }
    @media (max-width: 860px) {
      .svc__grid { grid-template-columns: 1fr; gap: clamp(22px,5vw,32px); }
      .svc--rev .svc__media { order: 0; }
      .svc__media { order: -1; }
    }

    /* services — "how we work" 3-up (every piece earns its place) */
    .svcflow { padding: clamp(52px,6.5vw,100px) var(--pad); background: #EFEEE8; }
    .svcflow__head { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(24px,4vw,60px); margin-bottom: clamp(36px,4.5vw,60px); }
    .svcflow__headL .section-label { margin-bottom: clamp(16px,1.8vw,22px); }
    .svcflow__title { font-family: var(--serif); font-weight: 400; font-size: clamp(28px,3.4vw,48px); line-height: 1.1; letter-spacing: -0.025em; color: var(--ink); margin: 0; max-width: 26ch; }
    .svcflow__sub { font-family: var(--sans); font-size: 16px; line-height: 1.55; color: var(--muted); margin: clamp(14px,1.4vw,18px) 0 0; max-width: 48ch; }
    .svcflow__head .btn { flex-shrink: 0; white-space: nowrap; }
    .svcflow__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(20px,2.4vw,36px); }
    .svcflow__media { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; }
    .svcflow__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .svcflow__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,18,15,0) 45%, rgba(20,18,15,0.72) 100%); }
    .svcflow__h { position: absolute; left: clamp(18px,1.6vw,24px); right: clamp(18px,1.6vw,24px); bottom: clamp(16px,1.6vw,22px); z-index: 2; font-family: var(--serif); font-weight: 400; font-size: clamp(20px,1.8vw,25px); line-height: 1.12; letter-spacing: -0.015em; color: #fff; margin: 0; }
    @media (max-width: 860px) {
      .svcflow__head { flex-direction: column; align-items: flex-start; gap: 22px; }
      .svcflow__grid { grid-template-columns: 1fr; gap: clamp(28px,5vw,40px); }
    }

    .work__more { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(16px,2.2vw,32px); margin-top: clamp(40px,5vw,72px); text-align: center; }
    .work__more-line { font-family: var(--sans); font-weight: 400; font-size: 16px; line-height: 1.55; letter-spacing: 0; color: var(--muted); margin: 0; }

    /* ===== Ready to get started (home contact CTA) ===== */
    .rgs { padding: clamp(28px,3.5vw,56px);
      background:
        radial-gradient(38% 55% at 8% 28%, rgba(155,58,48,0.95) 0%, rgba(155,58,48,0) 60%),
        radial-gradient(42% 55% at 30% 88%, rgba(201,154,63,0.92) 0%, rgba(201,154,63,0) 58%),
        radial-gradient(40% 50% at 70% 16%, rgba(197,138,58,0.85) 0%, rgba(197,138,58,0) 56%),
        radial-gradient(48% 62% at 93% 66%, rgba(118,116,150,0.82) 0%, rgba(118,116,150,0) 56%),
        radial-gradient(44% 54% at 58% 96%, rgba(176,176,186,0.7) 0%, rgba(176,176,186,0) 60%),
        linear-gradient(120deg, #9e4836, #c0923f 42%, #9a9aa6 82%);
    }
    .rgs__card { width: 100%; background: #F7F5EF; border-radius: var(--radius); padding: clamp(30px,4vw,72px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,90px); align-items: stretch; }
    .rgs__left { display: flex; flex-direction: column; min-width: 0; }
    .rgs__title { font-family: var(--serif); font-weight: 400; font-size: clamp(34px,4.4vw,60px); letter-spacing: -0.03em; line-height: 1.02; margin: 0; color: var(--ink); }
    .rgs__sub { font-size: 17px; line-height: 1.5; color: var(--muted); margin: clamp(16px,1.6vw,22px) 0 0; max-width: 42ch; }
    .rgs__brands { margin-top: auto; padding-top: clamp(28px,3vw,44px); border-top: 1px solid rgba(45,42,36,0.12); }
    .rgs__brands-label { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: #ECEAE1; padding: 6px 11px; border-radius: 6px; display: inline-block; margin-bottom: 22px; }
    .rgs__logos { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%); }
    .rgs__logos-track { display: inline-flex; align-items: center; gap: clamp(0px,0.2vw,4px); width: max-content; animation: brandScroll 26s linear infinite; }
    .rgs__logos-track img { height: clamp(74px,8.5vw,112px); width: auto; opacity: 0.85; flex-shrink: 0; }
    @media (prefers-reduced-motion: reduce) { .rgs__logos-track { animation: none; } }
    .rgs__form { display: flex; flex-direction: column; gap: clamp(15px,1.5vw,20px); }
    .rgs__field { display: flex; flex-direction: column; gap: 8px; }
    .rgs__field label { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
    .rgs__field input, .rgs__field textarea { font-family: var(--sans); font-size: 16px; color: var(--ink); background: #ECEAE1; border: 1px solid transparent; border-radius: 10px; padding: 14px 16px; width: 100%; resize: vertical; }
    .rgs__field input::placeholder, .rgs__field textarea::placeholder { color: #a9a499; }
    .rgs__field input:focus, .rgs__field textarea:focus { outline: none; border-color: rgba(45,42,36,0.28); background: #fff; }
    .rgs__form .btn { align-self: flex-start; margin-top: 4px; }
    @media (max-width: 820px) {
      .rgs__card { grid-template-columns: 1fr; gap: clamp(28px,5vw,40px); }
      .rgs__brands { margin-top: clamp(30px,8vw,44px); }
    }

    /* ===== Contact page ===== */
    .contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,84px); align-items: stretch;
      padding: calc(var(--topbar) + clamp(8px,2vw,24px)) var(--pad) clamp(56px,7vw,104px); min-height: 100vh; }
    .contact__intro { display: flex; flex-direction: column; align-items: flex-start; }
    .contact__intro .section-label { margin-bottom: 26px; }
    .contact__title { font-family: var(--serif); font-weight: 400; font-size: clamp(34px,4vw,58px); line-height: 1.04; letter-spacing: -0.025em; margin: 0; color: var(--ink); max-width: 14ch; }
    .contact__sub { font-size: 17px; line-height: 1.5; color: var(--ink); margin: clamp(20px,2vw,28px) 0 0; max-width: 42ch; }
    .contact__quote { margin-top: auto; padding-top: clamp(40px,6vw,72px); }
    .contact__quote-card { background: #EFEEE8; border-radius: 16px; padding: clamp(16px,1.4vw,22px); max-width: 320px; }
    /* crossfade cycler: stack every card in one grid cell, fade between them */
    .qcycle { display: grid; }
    .qcycle .contact__quote-card { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
    .qcycle .contact__quote-card.is-on { opacity: 1; visibility: visible; transition: opacity .7s ease; }
    .contact__stars { color: #C8932F; letter-spacing: 2px; font-size: 12px; }
    .contact__quote-text { font-family: var(--serif); font-weight: 400; font-size: 15px; line-height: 1.45; color: var(--ink); margin: 10px 0 0; }
    .contact__who { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
    .contact__who img { width: 32px; height: 32px; border-radius: 999px; object-fit: cover; }
    .contact__who span { font-size: 13px; }
    .contact__who span { font-family: var(--sans); font-weight: 500; font-size: 14px; color: var(--ink); }

    .contact__form { background: #EFEEE8; border: 1px solid rgba(45,42,36,0.08); border-radius: var(--radius); padding: clamp(26px,3vw,44px); }
    .contact__form h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(22px,2vw,26px); letter-spacing: -0.01em; margin: 0; color: var(--ink); }
    .contact__form-sub { font-size: 15px; color: var(--muted); margin: 8px 0 clamp(22px,2.4vw,30px); }
    .field { margin-bottom: 18px; }
    .field label { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
    .field input, .field select, .field textarea {
      width: 100%; background: #E2DED3; border: 1px solid rgba(45,42,36,0.10); border-radius: 12px;
      padding: 14px 16px; font-family: var(--sans); font-size: 15px; color: var(--ink);
    }
    .field input::placeholder, .field textarea::placeholder { color: #9a958a; }
    .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: rgba(45,42,36,0.4); }
    .field textarea { min-height: 160px; resize: vertical; }
    .field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%238A8478' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 40px; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .consent { display: flex; align-items: flex-start; gap: 12px; margin: 4px 0 22px; }
    .consent input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--ink); }
    .consent label { font-size: 14px; line-height: 1.5; color: var(--muted); }
    .consent a { color: var(--ink); text-decoration: underline; }
    .contact__form .btn { font-size: 15px; padding: 13px 24px; }
    @media (max-width: 860px) {
      .contact { grid-template-columns: 1fr; gap: clamp(32px,7vw,48px); }
      .contact__quote { margin-top: clamp(24px,6vw,36px); }
      .contact__title { font-size: clamp(30px,8vw,42px); }
      .contact__quote-card { max-width: 300px; padding: 16px; }
      .contact__quote-text { font-size: 14px; }
    }

    /* ===== Our foundation — value cards (image + dark band) ===== */
    .foundation { padding: clamp(56px,7vw,104px) var(--pad); }
    .foundation__head { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: clamp(26px,3.2vw,48px); }
    .foundation__head .section-label { margin-bottom: 22px; }
    .foundation__title { font-family: var(--serif); font-weight: 400; font-size: clamp(25px,2.9vw,40px); line-height: 1.08; letter-spacing: -0.025em; margin: 0; color: var(--ink); max-width: 20ch; }
    .foundation__grid { display: flex; gap: clamp(16px,1.6vw,24px); }
    .fcard { position: relative; flex: 1 1 0; min-width: 0; border-radius: var(--radius); overflow: hidden; min-height: clamp(380px,40vw,520px); display: flex; align-items: flex-end; }
    /* higher specificity so this transition isn't overridden by the [data-rev] reveal transition */
    .foundation .fcard { transition: opacity .7s ease, transform .7s ease, flex-grow .6s cubic-bezier(.65,0,.35,1); }
    .foundation__grid:hover .fcard:hover { flex-grow: 1.9; }
    .fcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.22,1,.36,1); }
    .fcard:hover img { transform: scale(1.04); }
    .fcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,18,15,0) 38%, rgba(20,18,15,0.82)); }
    .fcard__body { position: relative; z-index: 2; padding: clamp(22px,2.4vw,34px); max-width: 46ch; }
    .fcard__eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
    .fcard__title { font-family: var(--serif); font-weight: 400; font-size: clamp(22px,2vw,28px); line-height: 1.12; letter-spacing: -0.015em; color: #fff; margin: 12px 0 0; }
    .fcard__desc { font-family: var(--sans); font-size: 15px; line-height: 1.5; color: rgba(255,255,255,0.82); margin: 10px 0 0; }
    @media (max-width: 760px) { .foundation__grid { flex-direction: column; } .fcard { min-height: 340px; } .foundation__grid:hover .fcard:hover { flex-grow: 1; } }

    /* ===== Results — auto-scrolling proof wall ===== */
    .results { padding: clamp(56px,7vw,104px) 0; overflow: hidden; }
    .results__head { padding: 0 var(--pad); margin-bottom: clamp(28px,3.4vw,52px); display: flex; flex-direction: column; align-items: flex-start; }
    .results__head .section-label { margin-bottom: 22px; }
    .results__title { font-family: var(--serif); font-weight: 400; font-size: clamp(25px,2.9vw,40px); line-height: 1.08; letter-spacing: -0.025em; margin: 0; color: var(--ink); max-width: 22ch; }
    .results__viewport { overflow: hidden;
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
              mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%); }
    .results__track { display: flex; gap: clamp(16px,1.6vw,24px); width: max-content; padding: 0 var(--pad); animation: resultScroll 80s linear infinite; }
    @keyframes resultScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    @media (prefers-reduced-motion: reduce) { .results__track { animation: none; } }

    .rcard { flex-shrink: 0; width: clamp(560px,58vw,790px); display: grid; grid-template-columns: 0.6fr 1fr; gap: clamp(24px,2.4vw,40px);
      background: #EFEDE6; border: 1px solid rgba(45,42,36,0.08); border-radius: var(--radius); padding: clamp(18px,1.7vw,24px); align-items: stretch; }
    .rcard__media { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4/5; align-self: start; background: linear-gradient(140deg,#8A7B62,#3E372C); }
    .rcard__media--g1 { background: linear-gradient(140deg,#C77B53,#7E2A24); }
    .rcard__media--g2 { background: linear-gradient(140deg,#D7A23F,#9B5A24); }
    .rcard__media--g3 { background: linear-gradient(140deg,#8C7C63,#3E372C); }
    .rcard__media--g4 { background: linear-gradient(140deg,#9B3A30,#46201D); }
    .rcard__media--g5 { background: linear-gradient(140deg,#5E6B72,#2C343A); }
    .rcard__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,18,15,0) 45%, rgba(20,18,15,0.5)); }
    .rcard__stat { position: absolute; left: 20px; bottom: 36px; z-index: 2; color: #fff; font-family: var(--serif); font-weight: 400; font-size: clamp(38px,3.8vw,56px); line-height: 1; letter-spacing: -0.02em; }
    .rcard__statcap { position: absolute; left: 20px; bottom: 18px; z-index: 2; color: rgba(255,255,255,0.85); font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
    .rcard__body { display: flex; flex-direction: column; padding: clamp(6px,0.8vw,12px) clamp(6px,0.8vw,12px) clamp(6px,0.8vw,12px) 0; }
    .rcard__label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
    .rcard__h { font-family: var(--sans); font-weight: 400; font-size: clamp(20px,1.7vw,25px); line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); margin: clamp(16px,1.6vw,22px) 0 0; max-width: 26ch; }
    .rcard__src { margin-top: auto; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding-top: 18px; }
    @media (max-width: 600px) {
      .rcard { width: 86vw; gap: 16px; }
      .rcard__h { font-size: 17px; }
    }

    /* =========================================================
       MOBILE PASS — match reference (Halden Miller) scale:
       large serif headings, ~17px body, two-up features,
       generous spacing. Applies at phone widths (<= 600px).
       ========================================================= */
    @media (max-width: 600px) {
      :root { --pad: 22px; }

      /* hero */
      .hero__title { font-size: clamp(32px, 9.5vw, 44px); line-height: 1.05; letter-spacing: -0.03em; }
      .hero__lede { font-size: 17px; line-height: 1.5; max-width: none; margin-top: 20px; }
      .hero__cta { gap: 12px; flex-wrap: wrap; }
      /* hide trust row on mobile, make the video taller */
      .hero__trust { display: none; }
      .hero__photo { aspect-ratio: 4/5; }

      /* big serif section headings */
      .found__title,
      .msg__title,
      .stakes__title,
      .ts__title,
      .bloghl__title,
      .stats__title,
      .cta__title,
      .csf__title,
      .work__title,
      .pricing__title,
      .page-hero__title {
        font-size: clamp(34px, 11vw, 46px); line-height: 1.05; letter-spacing: -0.025em;
      }
      .ts__title, .pricing__title { max-width: 17ch; }

      /* process intro line — readable, a bit smaller, full width */
      .process__title { font-size: clamp(24px, 6.6vw, 30px); line-height: 1.25; max-width: none; }

      /* serif intro statement */
      .intro__lead { font-size: clamp(24px, 7vw, 30px); line-height: 1.25; }

      /* card headings (slightly smaller than section titles) */
      .callout__title { font-size: clamp(30px, 8.4vw, 40px); line-height: 1.08; }
      .cta-card__h { font-size: clamp(26px, 7.4vw, 33px); line-height: 1.1; }
      .cta-card { padding: clamp(26px, 7vw, 34px); }
      .callout__inner { padding: clamp(16px, 4.5vw, 22px); }

      /* body copy / subs / ledes */
      .msg__sub, .stakes__sub, .page-hero__lede, .callout__sub, .faq__sub { font-size: 17px; line-height: 1.5; }

      /* eyebrows + section labels — small mono pills */
      .section-label, .hero__eyebrow, .msg__eyebrow, .stakes__eyebrow, .callout__label, .pstep__label { font-size: 11px; }

      /* buttons sized for touch */
      .btn { padding: 13px 22px; font-size: 15px; }

      /* feature pairs stay two-up like the reference */
      .msg__features { grid-template-columns: 1fr 1fr; gap: 24px 18px; }
      .msg__feature h3 { font-size: 17px; }
      .msg__feature p { font-size: 14px; line-height: 1.45; }

      /* testimonial cards: compact on mobile (smaller container + text) */
      .tcard { width: 64vw; min-height: 0; padding: 18px; border-radius: 13px; }
      .tcard__mark { font-size: 22px; }
      .tcard__text { font-size: 14px; line-height: 1.45; margin-top: 10px; }
      .tcard__who { padding-top: 16px; gap: 10px; }
      .tcard__name { font-size: 13px; }
      .tcard__role { font-size: 12px; }
    }

    /* ===== Mobile: every two-column content section collapses to one ===== */
    @media (max-width: 768px) {
      .hero, .intro, .msg, .stakes, .callout__inner,
      .work__featured, .work__grid, .bloghl__feature, .cta__grid,
      .rgs__card, .contact, .svc__grid, .svc__item,
      .fnote__inner, .process__grid, .pstep, .csf__foot,
      .fw__grid, .fw-card--tan, .form-row {
        grid-template-columns: 1fr;
      }
      /* logos sized down for phones (2nd section + contact section match) */
      .brands__logo, .rgs__logos-track img { height: clamp(66px,19vw,86px); opacity: 0.85; }
    }

    /* =========================================================
       PROJECT CARD — photo + overlaid quote/stats + title band
       (used on the Work index as a stack, and as the case-study hero)
       ========================================================= */
    .btn--ghost { background: transparent; color: var(--ink); border: 1px solid rgba(45,42,36,0.28); }
    .btn--ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

    .work-cards { display: flex; flex-direction: column; gap: clamp(22px,3vw,40px); padding: clamp(34px,4vw,60px) var(--pad) clamp(56px,7vw,104px); }
    .csh { padding: calc(var(--topbar) + clamp(18px,2.4vw,36px)) var(--pad) 0; }

    .pcard { display: block; border-radius: clamp(16px,1.5vw,22px); overflow: hidden; background: #E6E1D6; color: inherit; text-decoration: none; }
    .pcard__media { position: relative; aspect-ratio: 17/8; min-height: 440px; }
    .pcard__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
    .pcard__media::after { content: ""; position: absolute; inset: 0; z-index: 1;
      background:
        linear-gradient(90deg, rgba(18,16,13,0) 32%, rgba(18,16,13,0.34) 60%, rgba(18,16,13,0.68) 100%),
        linear-gradient(0deg, rgba(18,16,13,0.32) 0%, rgba(18,16,13,0) 32%),
        linear-gradient(180deg, rgba(18,16,13,0.30) 0%, rgba(18,16,13,0) 26%); }
    .pcard__eyebrow { position: absolute; top: clamp(20px,2.3vw,34px); left: clamp(22px,2.6vw,40px); z-index: 3;
      font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: rgba(255,255,255,0.85); text-shadow: 0 1px 10px rgba(0,0,0,0.4); }
    .pcard__overlay { position: absolute; top: 0; right: 0; z-index: 3; width: 48%; height: 100%;
      display: flex; flex-direction: column; justify-content: space-between; padding: clamp(24px,2.6vw,40px); }
    .pcard__quote { margin: 0; max-width: 32ch; }
    .pcard__quote blockquote { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(19px,1.55vw,26px); line-height: 1.3; letter-spacing: -0.01em; color: #F4F2EA; }
    .pcard__quote figcaption { margin-top: clamp(14px,1.4vw,20px); }
    .pcard__author { display: block; font-size: 14px; color: #F4F2EA; }
    .pcard__role { display: block; font-size: 13px; color: rgba(244,242,234,0.6); margin-top: 3px; }
    .pcard__stats { display: flex; gap: clamp(26px,3vw,54px); }
    .pcard__num { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(28px,2.5vw,40px); line-height: 1; letter-spacing: -0.02em; color: #F4F2EA; }
    .pcard__lab { display: block; font-size: 12px; line-height: 1.35; color: rgba(244,242,234,0.62); margin-top: 9px; max-width: 16ch; }
    .pcard__band { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px,4vw,64px); align-items: start; padding: clamp(28px,3vw,48px) clamp(26px,2.8vw,44px); }
    .pcard__title { font-family: var(--serif); font-weight: 400; font-size: clamp(26px,2.7vw,40px); line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); margin: 0; max-width: 20ch; }
    .pcard__intro p { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; max-width: 46ch; }
    .pcard__intro .btn { margin-top: clamp(18px,2vw,26px); }
    @media (max-width: 860px) {
      .pcard__media { aspect-ratio: auto; min-height: 0; display: flex; flex-direction: column; }
      .pcard__media > img { position: static; width: 100%; height: clamp(300px,68vw,440px); }
      .pcard__media::after { inset: 0 0 auto 0; height: clamp(300px,68vw,440px); background:
        linear-gradient(180deg, rgba(18,16,13,0.34) 0%, rgba(18,16,13,0) 30%); }
      .pcard__overlay { position: static; width: 100%; height: auto; background: #1C1A16; gap: clamp(22px,6vw,30px); }
      .pcard__band { grid-template-columns: 1fr; gap: clamp(16px,4vw,22px); }
    }

    /* ===== Case study — full-bleed image hero + dark intro ===== */
    .cshero { position: relative; min-height: 90vh; display: flex; align-items: flex-end;
      padding: calc(var(--topbar) + clamp(40px,6vw,90px)) var(--pad) clamp(40px,5vw,76px); background: #1C1A16; overflow: hidden; }
    .cshero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
    .cshero::after { content: ""; position: absolute; inset: 0; z-index: 1;
      background: linear-gradient(180deg, rgba(28,26,22,0.32) 0%, rgba(28,26,22,0) 24%, rgba(28,26,22,0.5) 60%, rgba(28,26,22,1) 100%); }
    .cshero__inner { position: relative; z-index: 2; width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(20px,3vw,48px); }
    .cshero__title { font-family: var(--serif); font-weight: 400; font-size: clamp(34px,5vw,72px); line-height: 1.04; letter-spacing: -0.03em; color: #ECE9DF; margin: 0; max-width: 16ch; }
    .cshero__client { font-family: var(--mono); font-size: clamp(12px,1vw,15px); letter-spacing: 0.02em; color: rgba(236,233,223,0.6); white-space: nowrap; padding-bottom: 6px; }
    .cshero__logo { height: clamp(30px,3.4vw,50px); width: auto; max-width: 40%; object-fit: contain; object-position: right bottom; filter: brightness(0) invert(1); opacity: 0.92; flex-shrink: 0; }

    .csintro { background: #1C1A16; color: #E8E5DC; padding: 0 var(--pad) clamp(64px,8vw,120px); }
    .csintro__meta { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: clamp(18px,2vw,40px); padding: clamp(40px,5vw,72px) 0 clamp(34px,4vw,54px); border-bottom: 1px solid rgba(232,229,220,0.14); }
    .csintro__lab { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(232,229,220,0.5); margin-bottom: 10px; }
    .csintro__val { display: block; font-size: 15px; color: #E8E5DC; }
    .csintro__body { max-width: 520px; padding-top: clamp(46px,6vw,88px); }
    .csintro__eyebrow { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: clamp(20px,2.4vw,30px); }
    .csintro__body p { font-size: clamp(16px,1.15vw,18px); line-height: 1.62; color: rgba(232,229,220,0.82); margin: 0 0 clamp(18px,1.5vw,24px); }
    .csintro__body p:last-child { margin-bottom: 0; }
    @media (max-width: 860px) {
      .cshero { min-height: 82vh; align-items: flex-end; }
      .cshero::after { background: linear-gradient(0deg, rgba(28,26,22,0.92) 0%, rgba(28,26,22,0.55) 26%, rgba(28,26,22,0) 58%); }
      .cshero__inner { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 14px; }
      .cshero__logo { display: none; }
      .csintro__meta { grid-template-columns: 1fr 1fr; gap: 26px 22px; }
      .csintro__body { max-width: none; }
    }

    /* ===== Case study — body (alternating text + captioned imagery) ===== */
    .csbody { background: #1C1A16; color: #E8E5DC; display: flex; flex-direction: column; gap: clamp(16px,2vw,28px); padding: clamp(56px,7vw,104px) var(--pad); }
    /* text blocks keep a little more breathing room than the image rows */
    .csbody .cstext { margin: clamp(24px,3.5vw,56px) 0; }

    /* text blocks (Work) — match the Challenge styling: stacked label + left column */
    .cstext { max-width: 520px; }
    .cstext__eyebrow { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: clamp(20px,2.4vw,30px); }
    .cstext__body p { font-size: clamp(16px,1.15vw,18px); line-height: 1.62; color: rgba(232,229,220,0.82); margin: 0 0 clamp(18px,1.5vw,24px); }
    .cstext__body p:last-child { margin-bottom: 0; }

    /* captioned image figures — caption overlaid bottom-left */
    .csimg { margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; background: #2A2722; }
    .csimg > img, .csimg > video { width: 100%; height: 100%; object-fit: cover; display: block; }
    .csimg::after { content: ""; position: absolute; inset: auto 0 0 0; height: 46%; z-index: 1; pointer-events: none;
      background: linear-gradient(0deg, rgba(16,14,11,0.62) 0%, rgba(16,14,11,0) 100%); }
    .csimg__cap { position: absolute; left: clamp(16px,1.8vw,26px); bottom: clamp(14px,1.5vw,22px); z-index: 2;
      display: flex; align-items: center; gap: 9px; font-family: var(--sans); font-size: clamp(13px,0.95vw,15px); line-height: 1.3; color: #F4F2EA; }
    .csimg__dot { width: 6px; height: 6px; border-radius: 50%; background: #C68A5E; flex-shrink: 0; }

    /* image layouts — ratios match the current site */
    .cs-two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,2vw,28px); }
    .cs-two .csimg > img, .cs-two .csimg > video { aspect-ratio: 1/1; }
    .cs-four { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,2vw,28px); }
    .cs-four .csimg > img { aspect-ratio: 16/9; }
    .cs-three { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,2vw,28px); }
    .cs-three .csimg > img { aspect-ratio: 16/9; }
    .cs-full .csimg--tall { height: 90vh; }
    .cs-full .csimg--tall > img { width: 100%; height: 100%; object-fit: cover; }

    /* pull quote */
    .csquote { margin: clamp(8px,1.5vw,24px) 0; max-width: 1000px; }
    .csquote blockquote { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(21px,2.3vw,32px); line-height: 1.25; letter-spacing: -0.015em; color: #F4F2EA; max-width: 34ch; }
    .csquote figcaption { margin-top: clamp(20px,2.4vw,32px); }
    .csquote__name { display: block; font-size: 15px; color: #F4F2EA; }
    .csquote__role { display: block; font-size: 14px; color: rgba(232,229,220,0.6); margin-top: 2px; }

    /* closing CTA */
    .cscta { background: #1C1A16; color: #F4F2EA; text-align: center; padding: clamp(80px,11vw,160px) var(--pad); display: flex; flex-direction: column; align-items: center; }
    .cscta__title { font-family: var(--serif); font-weight: 400; font-size: clamp(34px,5vw,68px); line-height: 1.05; letter-spacing: -0.03em; color: #F4F2EA; margin: 0 0 clamp(28px,3vw,40px); max-width: 18ch; }
    .cscta .btn { background: #F7F5EF; color: #1C1A16; }
    .cscta .btn:hover { background: #fff; }

    @media (max-width: 760px) {
      .cstext { grid-template-columns: 1fr; gap: 14px; }
    }
    /* mobile: stack to one column but keep the same photo ratios as desktop */
    @media (max-width: 700px) {
      .cs-two, .cs-four, .cs-three { grid-template-columns: 1fr; }
      .csquote { margin: clamp(38px,10vw,62px) 0; }
    }


/* ===== Blog index + posts ===== */
    /* full-bleed image hero: page title + featured post overlaid on one photo */
    .bloghero { position: relative; overflow: hidden; background: #1C1A16; color: #fff;
      min-height: clamp(520px,60vw,780px); display: flex; flex-direction: column; justify-content: space-between;
      padding: calc(var(--topbar) + clamp(8px,2vw,24px)) var(--pad) clamp(28px,3.4vw,50px); }
    .bloghero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
    .bloghero::after { content: ""; position: absolute; inset: 0; z-index: 1;
      background: linear-gradient(180deg, rgba(16,14,11,0.62) 0%, rgba(16,14,11,0.12) 26%, rgba(16,14,11,0.12) 52%, rgba(16,14,11,0.85) 100%); }
    .bloghero__head { position: relative; z-index: 2; }
    .bloghero .section-label { background: rgba(255,255,255,0.14); color: rgba(255,255,255,0.85); }
    .bloghero__title { font-family: var(--serif); font-weight: 400; font-size: clamp(34px,4.6vw,60px); line-height: 1.0; letter-spacing: -0.03em; margin: 14px 0 0; color: #fff; }
    .bloghero__title em { font-style: italic; }
    /* featured post overlay (bottom) */
    .bfeat { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(20px,3vw,44px); text-decoration: none; color: #fff; }
    .bfeat__flag { display: flex; gap: clamp(12px,1.6vw,20px); font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.85); }
    .bfeat__title { font-family: var(--serif); font-weight: 400; font-size: clamp(28px,3.6vw,50px); line-height: 1.06; letter-spacing: -0.02em; color: #fff; margin: 12px 0 0; max-width: 20ch; }
    .bfeat__cta { flex-shrink: 0; }
    /* light recent-articles grid */
    .blogrecent { background: var(--bg); padding: clamp(46px,6vw,88px) var(--pad); }
    .blogrecent__title { font-family: var(--serif); font-weight: 400; font-size: clamp(30px,3.4vw,46px); letter-spacing: -0.02em; margin: 0 0 clamp(28px,3.4vw,48px); color: var(--ink); }
    .bgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(30px,3vw,52px) clamp(24px,2vw,34px); }
    .bgrid--two { grid-template-columns: 1fr 1fr; gap: clamp(30px,3vw,52px) clamp(28px,3vw,48px); }
    .bgrid--two .bpost__media { aspect-ratio: 2 / 1; }
    .bpost { display: flex; flex-direction: column; text-decoration: none; }
    .bpost__media { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 2; margin-bottom: clamp(15px,1.4vw,20px); }
    .bpost__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.22,1,.36,1); }
    .bpost:hover .bpost__img { transform: scale(1.04); }
    .bpost__read { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s ease; }
    .bpost:hover .bpost__read { opacity: 1; }
    .bpost__meta { display: flex; justify-content: space-between; gap: 14px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
    .bpost__h { font-family: var(--serif); font-weight: 400; font-size: clamp(21px,1.9vw,27px); line-height: 1.16; letter-spacing: -0.015em; color: var(--ink); margin: 12px 0 0; }
    .bpost__dek { font-size: 15px; line-height: 1.5; color: var(--muted); margin: 10px 0 0; max-width: 42ch; }
    /* article page */
    .post { padding: calc(var(--topbar) + clamp(8px,2vw,24px)) var(--pad) 0; }
    .post__head { max-width: 720px; margin: 0 auto; text-align: left; }
    .post__back { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
    .post__back:hover { color: var(--ink); }
    .post__eyebrow { display: flex; justify-content: flex-start; gap: clamp(14px,2vw,26px); margin-top: clamp(26px,4vw,44px); font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
    .post__title { font-family: var(--serif); font-weight: 400; font-size: clamp(32px,4.4vw,56px); line-height: 1.06; letter-spacing: -0.025em; color: var(--ink); margin: 14px 0 0; max-width: 22ch; }
    .post__cover { max-width: 1240px; margin: clamp(30px,4vw,54px) auto 0; padding: 0 var(--pad); }
    .post__cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); display: block; }
    .post__body { max-width: 720px; margin: clamp(34px,4.5vw,58px) auto 0; padding: 0 var(--pad) clamp(48px,6vw,80px); }
    .post__body p { font-family: var(--sans); font-size: clamp(16px,1.05vw,17px); line-height: 1.7; letter-spacing: 0; color: var(--muted); margin: 0 0 1.2em; }
    .post__lead { font-family: var(--serif) !important; font-size: clamp(21px,2vw,26px) !important; line-height: 1.5 !important; letter-spacing: -0.01em !important; color: var(--ink) !important; margin-bottom: 1em !important; }
    .post__body h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(23px,2.2vw,30px); line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); margin: 1.7em 0 0.5em; }
    .post__fig { margin: clamp(30px,4vw,52px) 0; }
    .post__fig img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); display: block; }
    /* article CTA */
    .postcta { padding: 0 var(--pad); }
    .postcta__inner { max-width: 1040px; margin: 0 auto; background: #1C1A16; color: #F4F2EA; border-radius: var(--radius); padding: clamp(36px,5vw,68px) clamp(28px,4vw,56px); display: flex; align-items: center; justify-content: space-between; gap: clamp(20px,3vw,40px); flex-wrap: wrap; }
    .postcta__title { font-family: var(--serif); font-weight: 400; font-size: clamp(24px,2.8vw,38px); line-height: 1.1; letter-spacing: -0.02em; margin: 0; max-width: 20ch; color: #F7F5EF; }
    .postcta .btn { background: #F7F5EF; color: #1C1A16; border-color: transparent; flex-shrink: 0; }
    .postcta .btn:hover { background: #fff; }
    @media (max-width: 860px) {
      .bgrid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 620px) {
      .bgrid { grid-template-columns: 1fr; }
      .bloghero { min-height: clamp(460px,120vw,620px); }
      .bfeat { flex-direction: column; align-items: flex-start; gap: 14px; }
      .bfeat__title { font-size: clamp(26px,7vw,34px); }
    }

    /* blog closing CTA — soft warm mesh gradient */
    .blogcta { position: relative; overflow: hidden; background: #2A2620; text-align: center; padding: clamp(72px,11vw,150px) var(--pad); }
    .blogcta__bg { position: absolute; inset: -25%; z-index: 0;
      background:
        radial-gradient(38% 48% at 24% 34%, rgba(178,72,52,0.92), transparent 70%),
        radial-gradient(44% 54% at 74% 38%, rgba(206,120,58,0.85), transparent 70%),
        radial-gradient(48% 58% at 55% 72%, rgba(228,168,92,0.62), transparent 72%),
        radial-gradient(40% 52% at 14% 76%, rgba(122,88,112,0.8), transparent 70%),
        radial-gradient(48% 60% at 90% 82%, rgba(84,58,78,0.85), transparent 72%);
      filter: blur(46px); }
    .blogcta__inner { position: relative; z-index: 2; max-width: 46ch; margin: 0 auto; }
    .blogcta__title { font-family: var(--serif); font-weight: 400; font-size: clamp(34px,5vw,66px); line-height: 1.02; letter-spacing: -0.03em; color: #FBF7F0; margin: 0; }
    .blogcta__sub { font-family: var(--sans); font-size: clamp(15px,1.15vw,18px); line-height: 1.5; color: rgba(251,247,240,0.85); margin: clamp(16px,1.8vw,24px) auto 0; max-width: 44ch; }
    .blogcta__btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: clamp(28px,3vw,40px); }
    .blogcta .btn { background: #F7F5EF; color: #1C1A16; border-color: transparent; }
    .blogcta .btn:hover { background: #fff; }
    .blogcta .btn--onimg { background: rgba(255,255,255,0.14); color: #fff; border: 1px solid rgba(255,255,255,0.5); }
    .blogcta .btn--onimg:hover { background: rgba(255,255,255,0.26); }

    /* ===== Logo marquee: keep mobile pace, slow it down on desktop ===== */
    @media (min-width: 861px) {
      .brands__track, .rgs__logos-track { animation-duration: 46s; }
    }

    /* ===== Page transitions ===== */
    @media (prefers-reduced-motion: no-preference) {
      html.js::after {
        content: ''; position: fixed; inset: 0; z-index: 8000;
        background: var(--bg); pointer-events: none;
        opacity: 1; transition: opacity .5s ease;
      }
      /* must leave the paint path, not just go transparent — a permanent full-viewport
         fixed layer above the nav tears on iOS Safari */
      html.js.page-ready::after { opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
      html.js.page-exit::after  { opacity: 1; visibility: visible; transition: opacity .3s ease; }
    }

    /* ===== Case study meta: live site link (5th column) ===== */
    .csintro__val a { color: #E8E5DC; text-decoration: none; border-bottom: 1px solid rgba(232,229,220,0.34); padding-bottom: 2px; transition: border-color .2s ease, color .2s ease; }
    .csintro__val a:hover { color: #fff; border-bottom-color: #fff; }
    .csintro__val a .arw { display: inline-block; margin-left: 5px; transition: transform .2s ease; }
    .csintro__val a:hover .arw { transform: translate(2px,-2px); }
    @media (max-width: 860px) {
      .csintro__meta { grid-template-columns: 1fr 1fr; }
      .csintro__metaitem:last-child { grid-column: 1 / -1; }
    }

    /* ===== Footer: privacy / terms ===== */
    .footer__legalnav { display: inline-flex; gap: 18px; margin-right: 18px; }
    .footer__legalnav a { color: inherit; opacity: 0.75; text-decoration: none; transition: opacity .2s ease; }
    .footer__legalnav a:hover { opacity: 1; text-decoration: underline; }

    /* ===== 404 ===== */
    .nf { min-height: calc(100vh - var(--topbar)); display: flex; align-items: center; padding: clamp(60px,10vh,120px) var(--pad); }
    .nf__inner { max-width: 640px; }
    .nf__title { font-family: var(--serif); font-weight: 400; font-size: clamp(38px,6vw,72px); line-height: 1.02; letter-spacing: -0.03em; margin: 22px 0 0; color: var(--ink); }
    .nf__title em { font-style: italic; }
    .nf__sub { font-size: clamp(16px,1.2vw,19px); line-height: 1.6; color: var(--muted); margin: clamp(18px,2vw,26px) 0 clamp(30px,3.4vw,44px); max-width: 46ch; }
    .nf__actions { display: flex; flex-wrap: wrap; gap: 12px; }

    /* ===== Hero heading: size so the rotating phrase always holds one line =====
       The longest phrase ("something that matters") was filling 272px of a 276px
       container at 320px wide — 4px from wrapping. Sized down for real headroom,
       and the phrase itself is pinned to a single line. The hero uses manual <br>,
       so text-wrap: balance (set globally for orphans) is counterproductive here. */
    .hero__title { text-wrap: initial; }
    .hero__title .cycle { white-space: nowrap; }
    @media (max-width: 600px) {
      .hero__title { font-size: clamp(27px, 8.8vw, 40px); }
    }

    /* ===== Fix: 6px horizontal overflow on narrow phones =====
       Grid children default to min-width:auto, so they refuse to shrink below
       their content and push the card past the viewport at ~320px. */
    .bloghl__ftext, .bloghl__fmedia { min-width: 0; }
    .bloghl__fh, .bloghl__fsub { overflow-wrap: anywhere; }
    @media (max-width: 380px) {
      .bloghl__feature { padding: 14px; }
      .bloghl__ftext { padding: 10px 4px 10px 8px; }
    }

    /* ===== Skip link (keyboard + screen reader users) ===== */
    .skip-link { position: absolute; left: -9999px; top: 0; z-index: 10000; background: var(--ink); color: var(--bg);
      padding: 12px 18px; border-radius: 0 0 10px 0; font-family: var(--sans); font-size: 14px; text-decoration: none; }
    .skip-link:focus { left: 0; }

    /* ===== Form status + spam honeypot ===== */
    .hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
    .form-status { margin: 14px 0 0; font-size: 15px; line-height: 1.5; }
    .form-status:empty { display: none; }
    .form-status.is-ok { color: #2f6b43; }
    .form-status.is-err { color: #9b3a2f; }
    .form-status a { color: inherit; text-decoration: underline; }
    form button[disabled] { opacity: 0.6; cursor: default; }

    /* ===== Lists inside article bodies (legal pages, posts) ===== */
    .post__body ul, .post__body ol { margin: 0 0 clamp(18px,1.5vw,24px); padding-left: 1.15em; }
    .post__body li { font-size: clamp(16px,1.15vw,18px); line-height: 1.62; color: rgba(45,42,36,0.86); margin: 0 0 10px; padding-left: 4px; }
    .post__body li::marker { color: var(--muted); }
    .post__body li strong { color: var(--ink); font-weight: 500; }

    /* ===== iOS: extend the nav background above itself =====
       Safari exposes a sliver above a fixed bar while the URL bar collapses.
       This paints the same background upward so that sliver is nav-coloured
       instead of showing page content through it. Follows the adaptive nav
       colour automatically via `inherit`. */
    .site-header::before {
      content: '';
      position: absolute;
      left: 0; right: 0; bottom: 100%;
      height: 200px;
      background: inherit;
      pointer-events: none;
    }

    /* ===== Footer legal links: bottom bar on desktop, Connect column on mobile ===== */
    .footer__col-legal { display: none; }
    @media (max-width: 700px) {
      .footer__col-legal { display: block; }
      .footer__legalnav { display: none; }
    }