/* ============================================================
       DESIGN SYSTEM
       ============================================================ */
    :root {
      /* — Color: light (warm) — */
      --bg: #f4efe7;
      --bg-alt: #ece4d7;
      --surface: #faf6ef;
      --text: #2a2620;
      --text-soft: #6f665a;
      --text-faint: #9a8f7f;
      --line: #ddd2c2;
      --line-soft: #e7ddcf;
      --accent: #6e4844;
      --accent-hover: #5a3a37;
      --on-accent: #faf6ef;

      /* light pill buttons */
      --btn-light-bg: #faf6ef;
      --btn-light-fg: rgba(42, 38, 32, 0.88);
      --btn-light-border: #ddd2c2;
      --btn-light-hover-bg: #f7f0e6;

      /* — Typography — */
      --font-serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
      --font-sans: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

      --fs-eyebrow: clamp(0.72rem, 0.68rem + 0.2vw, 0.8rem);
      --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
      --fs-lead: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
      --fs-h3: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem);
      --fs-h2: clamp(2.1rem, 1.5rem + 2.8vw, 3.6rem);
      --fs-display: clamp(3.2rem, 1.8rem + 6.8vw, 8rem);

      /* — Spacing scale — */
      --sp-1: 0.5rem;
      --sp-2: 0.75rem;
      --sp-3: 1rem;
      --sp-4: 1.5rem;
      --sp-5: 2rem;
      --sp-6: 3rem;
      --sp-7: 4.5rem;
      --sp-8: 6.5rem;
      --sp-section: clamp(5rem, 3rem + 9vw, 11rem);

      /* Inner pages: header height + small gap (no extra air) */
      --page-top: calc(clamp(96px, 12.5vw, 130px) + 0.9rem + 0.75rem);
      --header-h: calc(clamp(96px, 12.5vw, 130px) + 1.1rem);

      /* — Layout — */
      --container: 1320px;
      --gutter: clamp(1.25rem, 0.5rem + 3vw, 4rem);

      /* — Radius — */
      --radius-sm: 4px;
      --radius: 8px;
      --radius-lg: 14px;

      /* — Shadow — */
      --shadow-sm: 0 1px 2px rgba(42, 38, 32, 0.04);
      --shadow: 0 18px 40px -24px rgba(42, 38, 32, 0.28);
      --shadow-lg: 0 40px 80px -40px rgba(42, 38, 32, 0.4);

      /* — Motion — */
      --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
      --t-fast: 0.25s var(--ease);
      --t: 0.45s var(--ease);
      --t-slow: 0.8s var(--ease);
    }

    [data-theme="dark"] {
      --bg: #16130f;
      --bg-alt: #1d1813;
      --surface: #221c16;
      --text: #ece3d5;
      --text-soft: #a89c89;
      --text-faint: #79705f;
      --line: #322a20;
      --line-soft: #2a231b;
      --accent: #8a6360;
      --accent-hover: #9d7572;
      --on-accent: #f7f0e6;

      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
      --shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.65);
      --shadow-lg: 0 40px 90px -40px rgba(0, 0, 0, 0.8);
    }

    /* ============================================================
       BASE
       ============================================================ */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      -webkit-text-size-adjust: 100%;
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }
      .proj-gallery,
      .room-rail,
      .pcar {
        scroll-behavior: auto;
      }
      *,
      *::before,
      *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
      }
    }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font-family: var(--font-sans);
      font-size: var(--fs-body);
      font-weight: 300;
      line-height: 1.7;
      letter-spacing: 0.01em;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      overscroll-behavior-y: auto;
      transition: background var(--t), color var(--t);
    }

    h1,
    h2,
    h3 {
      font-family: var(--font-serif);
      font-weight: 500;
      line-height: 1.04;
      letter-spacing: -0.01em;
      margin: 0;
    }

    p {
      margin: 0;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    img {
      max-width: 100%;
      display: block;
    }

    ::selection {
      background: var(--accent);
      color: var(--on-accent);
    }

    :focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 3px;
      border-radius: 2px;
    }

    /* ============================================================
       LAYOUT HELPERS
       ============================================================ */
    .container {
      width: 100%;
      max-width: var(--container);
      margin-inline: auto;
      padding-inline: var(--gutter);
    }

    .section {
      padding-block: var(--sp-section);
    }

    .eyebrow {
      font-family: var(--font-sans);
      font-size: var(--fs-eyebrow);
      font-weight: 400;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--accent);
      display: inline-flex;
      align-items: center;
      gap: 0.85em;
    }

    .eyebrow::before {
      content: "";
      width: 2.2em;
      height: 1px;
      background: var(--accent);
      opacity: 0.6;
    }

    .lead {
      font-size: var(--fs-lead);
      line-height: 1.6;
      color: var(--text-soft);
      font-weight: 300;
    }

    /* ============================================================
       BUTTONS / LINKS
       ============================================================ */
    .btn {
      --pad-y: 0.92em;
      --pad-x: 1.85em;
      display: inline-flex;
      align-items: center;
      gap: 0.7em;
      padding: var(--pad-y) var(--pad-x);
      font-family: var(--font-sans);
      font-size: 0.78rem;
      font-weight: 400;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--btn-light-fg);
      background: var(--btn-light-bg);
      border: 1px solid var(--btn-light-border);
      border-radius: 100px;
      cursor: pointer;
      -webkit-appearance: none;
      appearance: none;
      transition: background var(--t-fast), color var(--t-fast),
        border-color var(--t-fast), transform var(--t-fast);
    }

    button.btn {
      font: inherit;
      color: var(--btn-light-fg);
      background: var(--btn-light-bg);
      border: 1px solid var(--btn-light-border);
    }

    .btn:hover,
    button.btn:hover {
      color: var(--accent);
      background: var(--btn-light-hover-bg);
      border-color: color-mix(in srgb, var(--accent) 28%, var(--btn-light-border));
      transform: translateY(-2px);
    }

    .btn--ghost {
      color: var(--text);
      background: transparent;
      border-color: var(--line);
    }

    .btn--ghost:hover {
      background: transparent;
      border-color: var(--accent);
      color: var(--accent);
    }

    .btn .btn__arrow {
      transition: transform var(--t-fast);
    }

    .btn:hover .btn__arrow {
      transform: translateX(4px);
    }

    .link-underline {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 0.6em;
      font-family: var(--font-sans);
      font-size: 0.78rem;
      font-weight: 400;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--text);
      padding-bottom: 0.4em;
    }

    .link-underline::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      background: var(--text);
      transform: scaleX(1);
      transform-origin: left;
      transition: transform var(--t), background var(--t-fast);
    }

    .link-underline:hover {
      color: var(--accent);
    }

    .link-underline:hover::after {
      background: var(--accent);
      transform: scaleX(0.4);
    }

    .link-underline .btn__arrow {
      transition: transform var(--t-fast);
    }

    .link-underline:hover .btn__arrow {
      transform: translateX(4px);
    }

    /* ============================================================
       HEADER
       ============================================================ */
    .header {
      position: fixed;
      inset: 0 0 auto 0;
      z-index: 100;
      transition: background var(--t), border-color var(--t), backdrop-filter var(--t);
      border-bottom: 1px solid transparent;
    }

    .header.is-scrolled {
      background: color-mix(in srgb, var(--bg) 82%, transparent);
      backdrop-filter: blur(14px) saturate(1.1);
      -webkit-backdrop-filter: blur(14px) saturate(1.1);
      border-bottom-color: var(--line-soft);
    }

    .header__inner {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      column-gap: clamp(0.65rem, 0.2rem + 1.2vw, 1.25rem);
      padding-block: 0.55rem;
      min-height: 0;
    }

    .header__inner .brand {
      justify-self: start;
    }

    .header__inner .nav {
      justify-self: center;
      justify-content: center;
      min-width: 0;
      max-width: 100%;
    }

    .header__inner .header__tools {
      justify-self: end;
    }

    .home .header__inner {
      padding-block: 0.28rem;
    }

    .header__inner--nav-only {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
    }

    .header__inner--nav-only .nav {
      grid-column: 2;
      justify-self: center;
    }

    .header__inner--nav-only .header__tools {
      grid-column: 3;
      justify-self: end;
    }

    .brand {
      display: flex;
      align-items: center;
      line-height: 1;
    }

    .brand__logo {
      display: block;
      height: clamp(96px, 12.5vw, 130px);
      width: auto;
      object-fit: contain;
    }

    .brand__logo--light {
      display: none;
    }

    .brand__logo--dark {
      display: block;
    }

    .brand__name {
      font-family: var(--font-serif);
      font-size: 1.45rem;
      font-weight: 500;
      letter-spacing: 0.02em;
    }

    .brand__tag {
      font-family: var(--font-sans);
      font-size: 0.6rem;
      font-weight: 400;
      letter-spacing: 0.34em;
      text-transform: uppercase;
      color: var(--text-faint);
    }

    .nav {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      justify-content: center;
      row-gap: 0.1rem;
      gap: clamp(0.75rem, 0.25rem + 1.1vw, 1.65rem);
    }

    .nav__link {
      font-family: var(--font-sans);
      font-size: clamp(0.7rem, 0.66rem + 0.18vw, 0.82rem);
      font-weight: 400;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--text-soft);
      position: relative;
      padding-block: 0.5em;
      white-space: nowrap;
      transition: color var(--t-fast);
    }

    .nav__link::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0.1em;
      width: 0;
      height: 1px;
      background: var(--accent);
      transition: width var(--t);
    }

    .nav__link:hover {
      color: var(--text);
    }

    .nav__link:hover::after {
      width: 100%;
    }

    .nav__link--active {
      color: var(--text);
    }

    .nav__link--active::after {
      width: 100%;
    }

    .nav__link--projects .nav__link-scrolled {
      display: none;
    }

    .home .header.is-scrolled .nav__link--projects {
      display: inline-flex;
      align-items: center;
      gap: 0.45em;
      padding: 0.58em 1.2em;
      font-size: 0.68rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--btn-light-fg);
      background: rgba(250, 246, 239, 0.94);
      border: 1px solid rgba(250, 246, 239, 0.72);
      border-radius: 100px;
      white-space: nowrap;
      transition: background var(--t-fast), color var(--t-fast),
        border-color var(--t-fast), transform var(--t-fast);
    }

    .home .header.is-scrolled .nav__link--projects::after {
      display: none;
    }

    .home .header.is-scrolled .nav__link--projects:hover {
      color: var(--accent);
      background: var(--btn-light-bg);
      border-color: var(--btn-light-bg);
      transform: translateY(-1px);
    }

    .home .header.is-scrolled .nav__link--projects .nav__link-default {
      display: none;
    }

    .home .header.is-scrolled .nav__link--projects .nav__link-scrolled {
      display: inline;
    }

    .header__tools {
      display: flex;
      align-items: center;
      gap: var(--sp-3);
    }

    .lang {
      display: inline-flex;
      align-items: center;
      font-family: var(--font-sans);
      font-size: 0.78rem;
      font-weight: 400;
      letter-spacing: 0.1em;
      border: 1px solid var(--line);
      border-radius: 100px;
      overflow: hidden;
    }

    .lang__btn {
      background: transparent;
      border: 0;
      color: var(--text-faint);
      padding: 0.5em 0.85em;
      cursor: pointer;
      letter-spacing: inherit;
      font: inherit;
      -webkit-appearance: none;
      appearance: none;
      transition: color var(--t-fast), background var(--t-fast);
    }

    .lang__btn[aria-pressed="true"] {
      color: var(--btn-light-fg);
      background: var(--btn-light-bg);
    }

    .lang__btn:not([aria-pressed="true"]):hover {
      color: var(--text);
    }

    .icon-btn {
      display: inline-grid;
      place-items: center;
      width: 40px;
      height: 40px;
      border-radius: 100px;
      border: 1px solid var(--line);
      background: transparent;
      color: var(--text);
      cursor: pointer;
      transition: border-color var(--t-fast), color var(--t-fast),
        background var(--t-fast);
    }

    .icon-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    .icon-btn svg {
      width: 18px;
      height: 18px;
    }

    .theme-toggle .icon-sun {
      display: none;
    }
    [data-theme="dark"] .theme-toggle .icon-sun {
      display: block;
    }
    [data-theme="dark"] .theme-toggle .icon-moon {
      display: none;
    }

    .nav-toggle {
      display: none;
    }

    /* ============================================================
       HERO
       ============================================================ */
    .hero {
      position: relative;
      min-height: 100svh;
      display: grid;
      grid-template-rows: 1fr auto;
      padding-top: clamp(3.5rem, 2.5rem + 3vw, 5rem);
      padding-bottom: clamp(0.75rem, 0.45rem + 1vw, 1.1rem);
      overflow: hidden;
      isolation: isolate;
      --hero-fg: #f7f0e6;
      --hero-fg-soft: rgba(247, 240, 230, 0.84);
      --hero-fg-faint: rgba(247, 240, 230, 0.58);
      --hero-line: rgba(247, 240, 230, 0.24);
      --hero-accent: color-mix(in srgb, var(--accent) 55%, #f7f0e6);
    }

    /* full-bleed photographic scene */
    .hero__scene {
      position: absolute;
      inset: 0;
      z-index: -1;
      overflow: hidden;
      background-color: #ece4d7;
    }

    .hero__slide {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center 45%;
      background-repeat: no-repeat;
      opacity: 0;
      transition: opacity 1.4s var(--ease);
      will-change: opacity;
    }

    .hero__slide.is-active {
      opacity: 1;
    }

    /* legibility scrim — even overlay for centered logo + light photos */
    .hero__scene::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background:
        linear-gradient(
          180deg,
          rgba(18, 13, 9, 0.38) 0%,
          rgba(18, 13, 9, 0.18) 38%,
          rgba(18, 13, 9, 0.22) 62%,
          rgba(18, 13, 9, 0.52) 100%
        ),
        radial-gradient(
          ellipse 90% 70% at 50% 42%,
          rgba(18, 13, 9, 0.08) 0%,
          rgba(18, 13, 9, 0.32) 100%
        );
    }

    .hero__center {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: clamp(1.25rem, 0.8rem + 1.5vw, 2rem);
      padding-inline: var(--gutter);
      padding-bottom: 0;
    }

    .hero__brand {
      display: block;
      line-height: 0;
    }

    .hero__brand img {
      display: block;
      height: clamp(130px, 17.1vw, 194px);
      width: auto;
      object-fit: contain;
      filter: drop-shadow(0 2px 18px rgba(18, 13, 9, 0.28));
    }

    .hero__eyebrow {
      margin-bottom: clamp(1.25rem, 0.8rem + 1.5vw, 2.25rem);
    }

    .hero__title {
      font-size: var(--fs-display);
      font-weight: 500;
      letter-spacing: -0.025em;
      line-height: 0.9;
      color: var(--hero-fg);
    }

    .hero__title-line {
      display: block;
    }

    .hero__title em {
      font-style: italic;
      font-weight: 400;
      color: var(--hero-accent);
    }

    .hero__tagline {
      max-width: 42ch;
      font-family: var(--font-sans);
      font-size: clamp(0.9rem, 0.78rem + 0.4vw, 1.12rem);
      font-weight: 300;
      line-height: 1.7;
      letter-spacing: 0.06em;
      color: var(--hero-fg-soft);
      text-align: center;
    }

    .hero__actions {
      display: flex;
      align-items: center;
      gap: var(--sp-5);
      flex-wrap: wrap;
    }

    /* bottom bar — buttons + scroll cue */
    .hero__bottom {
      width: 100%;
      padding-top: var(--sp-2);
      padding-bottom: 0;
      border-top: 1px solid var(--hero-line);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-4);
      flex-wrap: wrap;
    }

    .hero__meta {
      display: flex;
      gap: clamp(1.5rem, 0.5rem + 3vw, 3.5rem);
    }

    .stat {
      display: flex;
      flex-direction: column;
      gap: 0.25em;
      padding-left: var(--sp-4);
      border-left: 1px solid var(--hero-line);
    }

    .hero__meta .stat:first-child {
      border-left: 0;
      padding-left: 0;
    }

    .stat__num {
      font-family: var(--font-serif);
      font-size: clamp(1.8rem, 1.4rem + 1vw, 2.4rem);
      line-height: 1;
      color: var(--hero-fg);
    }

    .stat__label {
      font-size: 0.72rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--hero-fg-faint);
    }

    .hero__scroll {
      display: inline-flex;
      align-items: center;
      gap: 1em;
      color: var(--hero-fg-faint);
      font-family: var(--font-sans);
      font-size: 0.7rem;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      transition: color var(--t-fast);
    }

    .hero__scroll:hover {
      color: var(--hero-fg);
    }

    .hero__scroll-line {
      position: relative;
      width: 1px;
      height: 48px;
      background: var(--hero-line);
      overflow: hidden;
    }

    .hero__scroll-dot {
      position: absolute;
      top: 0;
      left: 0;
      width: 1px;
      height: 12px;
      background: var(--hero-accent);
      animation: heroScroll 2.4s var(--ease) infinite;
    }

    @keyframes heroScroll {
      0% { transform: translateY(-14px); opacity: 0; }
      25% { opacity: 1; }
      100% { transform: translateY(48px); opacity: 0; }
    }

    /* hero eyebrow + secondary link, tuned for the dark photo */
    .hero .eyebrow {
      color: var(--hero-accent);
    }

    .hero .eyebrow::before {
      background: var(--hero-accent);
      opacity: 0.8;
    }

    /* lighter CTA buttons on hero */
    .hero .btn {
      --pad-y: 0.82em;
      --pad-x: 1.65em;
      font-size: 0.74rem;
      color: var(--btn-light-fg);
      background: rgba(250, 246, 239, 0.94);
      border-color: rgba(250, 246, 239, 0.72);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }

    .hero .btn:hover {
      color: var(--accent);
      background: var(--btn-light-bg);
      border-color: var(--btn-light-bg);
    }

    .hero .link-underline {
      color: rgba(247, 240, 230, 0.96);
    }

    .hero .link-underline::after {
      background: rgba(247, 240, 230, 0.72);
    }

    .hero .link-underline:hover {
      color: #faf6ef;
    }

    .hero .link-underline:hover::after {
      background: #faf6ef;
    }

    /* hero light-on-dark palette, available to the header too (home only) */
    .home {
      --hero-fg: #f7f0e6;
      --hero-fg-soft: rgba(247, 240, 230, 0.84);
      --hero-fg-faint: rgba(247, 240, 230, 0.58);
      --hero-line: rgba(247, 240, 230, 0.24);
      --hero-accent: color-mix(in srgb, var(--accent) 55%, #f7f0e6);
      --header-h: 3.35rem;
    }

    /* header over hero — always light logo & nav on home */
    .home .header.is-scrolled {
      background: color-mix(in srgb, #12100d 92%, transparent);
      border-bottom-color: rgba(247, 240, 230, 0.14);
    }

    .home .brand__logo--dark {
      display: none;
    }

    .home .brand__logo--light {
      display: block;
    }

    .home .header .nav__link {
      color: var(--hero-fg-soft);
    }

    .home .header .nav__link:hover {
      color: var(--hero-fg);
    }

    .home .header .icon-btn,
    .home .header .lang,
    .home .header .nav-toggle {
      border-color: rgba(247, 240, 230, 0.34);
    }

    .home .header .icon-btn {
      color: var(--hero-fg);
    }

    .home .header .lang__btn:not([aria-pressed="true"]) {
      color: var(--hero-fg-faint);
    }

    .home .header .lang__btn[aria-pressed="true"] {
      color: var(--btn-light-fg);
      background: rgba(250, 246, 239, 0.94);
    }

    .home .header .lang__btn:not([aria-pressed="true"]):hover {
      color: var(--hero-fg);
    }

    .home .header .nav-toggle span {
      background: var(--hero-fg);
    }

    /* ============================================================
       PLACEHOLDER IMAGERY
       ============================================================ */
    .ph {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      --c1: #c2ad8e;
      --c2: #6f5d47;
      background:
        radial-gradient(
          78% 56% at 72% 12%,
          color-mix(in srgb, var(--c1) 72%, #ffffff) 0%,
          transparent 56%
        ),
        linear-gradient(158deg, var(--c1) 0%, var(--c2) 100%);
    }

    /* grain — turns flat fills into photographic surfaces */
    .ph::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 160px 160px;
      opacity: 0.2;
      mix-blend-mode: overlay;
      pointer-events: none;
    }

    /* atmospheric light + vignette */
    .ph::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(125% 110% at 50% 16%, transparent 50%, rgba(22, 15, 8, 0.36) 100%),
        linear-gradient(180deg, transparent 52%, rgba(22, 15, 8, 0.3) 100%);
      pointer-events: none;
    }

    .ph__label {
      position: absolute;
      left: var(--sp-4);
      bottom: var(--sp-3);
      z-index: 2;
      font-family: var(--font-sans);
      font-size: 0.66rem;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: rgba(250, 246, 239, 0.9);
    }

    /* distinct tonal moods per project */
    .ph-1 { --c1: #c9b89c; --c2: #7c6a52; }
    .ph-2 { --c1: #dcc7a4; --c2: #997645; }
    .ph-3 { --c1: #b6bdb8; --c2: #5b6056; }
    .ph-4 { --c1: #d0b88f; --c2: #785a39; }
    .ph-5 { --c1: #8c8074; --c2: #3c352c; }

    /* ============================================================
       ABOUT
       ============================================================ */
    .about__grid {
      display: grid;
      grid-template-columns: minmax(240px, 0.95fr) minmax(0, 1.05fr);
      gap: clamp(2rem, 1rem + 4vw, 5rem);
      align-items: start;
    }

    .about__photo {
      margin: 0;
    }

    .about__photo img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: var(--radius);
    }

    .about__title {
      font-size: var(--fs-h2);
      max-width: 16ch;
    }

    .about__title em {
      font-style: italic;
      color: var(--accent);
    }

    .about__body {
      display: flex;
      flex-direction: column;
      gap: var(--sp-5);
    }

    .about__quote {
      display: flex;
      flex-direction: column;
      gap: clamp(0.75rem, 0.5rem + 0.8vw, 1.25rem);
    }

    .about__mark {
      display: block;
      color: var(--text);
      line-height: 0;
    }

    .about__mark svg {
      display: block;
      width: clamp(2.75rem, 2rem + 2vw, 3.5rem);
      height: auto;
    }

    .about__copy {
      display: flex;
      flex-direction: column;
      gap: clamp(1rem, 0.75rem + 0.6vw, 1.35rem);
      max-width: 56ch;
    }

    .about__copy p {
      margin: 0;
      font-family: var(--font-sans);
      font-size: var(--fs-lead);
      font-weight: 300;
      line-height: 1.65;
      letter-spacing: 0.01em;
      color: var(--text-soft);
    }

    .about__text {
      font-size: var(--fs-lead);
      line-height: 1.6;
      color: var(--text-soft);
      max-width: 56ch;
    }

    .about__signature {
      margin-top: var(--sp-2);
      font-family: var(--font-sans);
      font-style: normal;
      font-weight: 400;
      font-size: 1rem;
      line-height: 1.5;
      color: var(--text);
    }

    .about__signature span {
      display: block;
      font-family: inherit;
      font-style: normal;
      font-size: 0.72rem;
      font-weight: 400;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--text-faint);
      margin-top: 0.45em;
    }

    /* ============================================================
       SECTION HEADINGS
       ============================================================ */
    .section-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: var(--sp-5);
      flex-wrap: wrap;
      margin-bottom: clamp(1.25rem, 0.75rem + 1.5vw, 2rem);
    }

    /* Tab page title — always .eyebrow (same as homepage section labels) */
    h1.eyebrow,
    .page-head.eyebrow {
      margin: 0;
    }

    .section-head__subtitle {
      margin: 0.75em 0 0;
      font-family: var(--font-serif);
      font-size: clamp(1.35rem, 1.05rem + 1vw, 1.75rem);
      font-weight: 500;
      line-height: 1.15;
      letter-spacing: -0.01em;
      color: var(--text);
    }

    .section-head__title {
      font-size: var(--fs-h2);
      margin-top: 0;
    }

    /* ============================================================
       PROJECTS
       ============================================================ */
    .projects {
      background: var(--bg-alt);
      padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem) var(--sp-section);
      scroll-margin-top: calc(var(--header-h) + 0.75rem);
    }

    .home .projects {
      padding-top: clamp(1.1rem, 0.75rem + 1vw, 1.75rem);
      padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
    }

    .home .projects .proj-grid {
      gap: clamp(1.25rem, 0.75rem + 1.2vw, 2rem);
    }

    .home .projects .proj-grid-card {
      gap: 0.85rem;
    }

    .home .projects .proj-grid-card__media {
      aspect-ratio: unset;
      height: clamp(280px, 32vw, 460px);
    }

    .home .projects .proj-grid-card__name {
      font-size: clamp(1.15rem, 1rem + 0.45vw, 1.45rem);
    }

    .projects-bar {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: clamp(1rem, 0.5rem + 2vw, 2rem);
      margin-bottom: clamp(1.25rem, 0.75rem + 1.5vw, 2rem);
    }

    .projects .proj-grid {
      margin-top: 0;
    }

    .projects__list {
      display: flex;
      flex-direction: column;
      gap: clamp(3.5rem, 2rem + 6vw, 7.5rem);
    }

    /* Shared media — photography slots */
    .proj-media {
      position: relative;
      display: block;
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow);
      transition: box-shadow var(--t);
    }

    .proj-media .ph {
      transition: transform var(--t-slow);
    }

    .proj-media img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform var(--t-slow);
    }

    .proj-media:hover img {
      transform: scale(1.05);
    }

    .proj-media::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
        180deg,
        rgba(24, 18, 12, 0.34) 0%,
        rgba(24, 18, 12, 0) 28%,
        rgba(24, 18, 12, 0) 66%,
        rgba(24, 18, 12, 0.18) 100%
      );
      pointer-events: none;
    }

    .proj-media:hover {
      box-shadow: var(--shadow-lg);
    }

    .proj-media:hover .ph {
      transform: scale(1.05);
    }

    .proj-media--feature { aspect-ratio: 16 / 9; }
    .proj-media--portrait { aspect-ratio: 4 / 5; }
    .proj-media--wide { aspect-ratio: 3 / 2; }

    .proj-tag {
      position: absolute;
      top: var(--sp-4);
      left: var(--sp-4);
      z-index: 2;
      font-family: var(--font-sans);
      font-size: 0.64rem;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: var(--on-accent);
      background: color-mix(in srgb, var(--accent) 92%, transparent);
      padding: 0.55em 1.1em;
      border-radius: 100px;
    }

    .proj-index {
      position: absolute;
      top: var(--sp-4);
      left: var(--sp-4);
      z-index: 2;
      font-family: var(--font-serif);
      font-size: 1.05rem;
      letter-spacing: 0.1em;
      color: rgba(250, 246, 239, 0.92);
    }

    .proj-index.is-right {
      left: auto;
      right: var(--sp-4);
    }

    .project__cat {
      font-family: var(--font-sans);
      font-size: 0.72rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--text-faint);
    }

    .project__desc {
      color: var(--text-soft);
      max-width: 42ch;
    }

    .project__link {
      margin-top: var(--sp-2);
    }

    /* Featured project — full-bleed editorial cover */
    .project-featured {
      display: grid;
      gap: clamp(1.75rem, 1rem + 2vw, 2.75rem);
    }

    .project-featured .proj-media--feature {
      aspect-ratio: 21 / 9;
      width: 100vw;
      max-width: 100vw;
      margin-left: calc(50% - 50vw);
      border-radius: 0;
      box-shadow: none;
    }

    .project-featured .proj-media--feature:hover {
      box-shadow: none;
    }

    .project-featured .proj-media::after {
      background:
        linear-gradient(
          180deg,
          rgba(20, 14, 8, 0.32) 0%,
          rgba(20, 14, 8, 0) 24%,
          rgba(20, 14, 8, 0) 46%,
          rgba(20, 14, 8, 0.64) 100%
        ),
        radial-gradient(120% 95% at 16% 100%, rgba(20, 14, 8, 0.5), transparent 62%);
    }

    .pf__overlay {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 3;
      display: flex;
      flex-direction: column;
      padding: clamp(1.75rem, 1rem + 2.4vw, 3.5rem);
      padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
      padding-right: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
      max-width: 46ch;
      text-shadow: 0 1px 18px rgba(20, 14, 8, 0.4);
    }

    .pf__cat {
      font-family: var(--font-sans);
      font-size: 0.74rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: color-mix(in srgb, var(--accent) 32%, #faf6ef);
    }

    .pf__name {
      margin-top: 0.35em;
      font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4.4rem);
      line-height: 1;
      color: #faf6ef;
    }

    .pf__foot {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: clamp(1.5rem, 0.5rem + 3vw, 4rem);
    }

    .pf__foot .project__desc {
      max-width: 48ch;
      font-size: var(--fs-lead);
      line-height: 1.55;
    }

    .pf__foot .project__link {
      margin-top: 0.35em;
      flex-shrink: 0;
    }

    /* Secondary duo — offset for editorial rhythm */
    .projects__duo {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(1.5rem, 0.5rem + 4vw, 4.5rem);
      align-items: start;
    }

    .projects__duo .pcard:nth-child(2) {
      margin-top: clamp(2rem, 1rem + 5vw, 6rem);
    }

    .pcard__info {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5em;
      margin-top: var(--sp-4);
    }

    .pcard__name {
      font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
      transition: color var(--t-fast);
    }

    .pcard:hover .pcard__name,
    .project-wide:hover .pw__name {
      color: var(--accent);
    }

    /* Secondary wide */
    .project-wide {
      display: grid;
      grid-template-columns: 1.25fr 0.75fr;
      gap: clamp(1.5rem, 0.5rem + 4vw, 4.5rem);
      align-items: center;
    }

    .pw__info {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: var(--sp-3);
    }

    .pw__name {
      font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem);
      margin-top: var(--sp-2);
    }

    /* ============================================================
       APPROACH
       ============================================================ */
    .approach__grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      border-top: 1px solid var(--line);
    }

    .step {
      padding: var(--sp-6) var(--sp-4) var(--sp-5) 0;
      border-right: 1px solid var(--line);
      display: flex;
      flex-direction: column;
      gap: var(--sp-3);
      transition: background var(--t-fast);
    }

    .step:last-child {
      border-right: 0;
    }

    .step:not(:first-child) {
      padding-left: var(--sp-4);
    }

    .step__num {
      font-family: var(--font-serif);
      font-size: 1rem;
      letter-spacing: 0.2em;
      color: var(--accent);
    }

    .step__title {
      font-size: var(--fs-h3);
      font-size: clamp(1.3rem, 1rem + 1vw, 1.7rem);
      margin-top: var(--sp-2);
    }

    .step__text {
      color: var(--text-soft);
      font-size: 0.98rem;
    }

    /* ============================================================
       SERVICES
       ============================================================ */
    .services-page {
      padding-top: var(--page-top);
      padding-bottom: var(--sp-6);
    }

    .services-page .section-head {
      margin-bottom: 0;
    }

    .services-page .section-head__subtitle {
      margin-top: var(--sp-1);
    }

    .services-list {
      display: flex;
      flex-direction: column;
      gap: 0;
      margin-top: var(--sp-4);
    }

    .svc {
      border-top: 1px solid var(--line);
      padding: clamp(1.1rem, 0.7rem + 1.2vw, 1.75rem) 0;
    }

    .svc:last-child {
      border-bottom: 1px solid var(--line);
    }

    .svc__row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: clamp(1rem, 0.5rem + 2vw, 2.5rem);
      align-items: center;
    }

    .svc__head {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: var(--sp-2);
      min-width: 0;
    }

    .svc__title {
      font-family: var(--font-serif);
      font-size: clamp(1.45rem, 1rem + 1.5vw, 2.15rem);
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: -0.01em;
    }

    .svc__lead {
      color: var(--text-soft);
      font-size: clamp(0.92rem, 0.88rem + 0.2vw, 1rem);
      line-height: 1.55;
      max-width: 40rem;
    }

    .svc__orb {
      flex-shrink: 0;
      width: clamp(5rem, 3.5rem + 6vw, 8.5rem);
      height: clamp(5rem, 3.5rem + 6vw, 8.5rem);
      border-radius: 50%;
      overflow: hidden;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
      background: var(--bg-alt);
    }

    .svc__orb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .svc__toggle {
      background: none;
      border: 0;
      padding: 0;
      cursor: pointer;
      font: inherit;
      color: inherit;
      margin-top: var(--sp-1);
    }

    .svc__body {
      overflow: hidden;
    }

    .svc__body-inner {
      padding-top: var(--sp-3);
      display: flex;
      flex-direction: column;
      gap: var(--sp-4);
    }

    .svc__steps {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--sp-3) clamp(1rem, 0.5rem + 2vw, 2rem);
    }

    .svc__step {
      padding: 0;
      border: 0;
    }

    .svc__step-title {
      font-family: var(--font-sans);
      font-size: 0.68rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 0.35rem;
    }

    .svc__step-text {
      color: var(--text-soft);
      font-size: 0.9rem;
      line-height: 1.5;
    }

    .svc__note {
      color: var(--text-soft);
      font-size: 0.88rem;
      font-style: italic;
      max-width: 40rem;
    }

    .svc__cta {
      align-self: flex-start;
    }

    /* ============================================================
       PARTNERS
       ============================================================ */
    .partners {
      background: var(--bg-alt);
    }

    .partners__index {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: clamp(1.75rem, 1rem + 2.5vw, 3.5rem);
    }

    .pcat {
      display: flex;
      flex-direction: column;
      gap: var(--sp-4);
      padding-top: var(--sp-4);
      border-top: 1px solid var(--line);
    }

    .pcat__label {
      font-family: var(--font-sans);
      font-size: 0.72rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--accent);
    }

    .pcat__list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 0.5em;
    }

    .pcat__list li {
      font-family: var(--font-serif);
      font-size: clamp(1.15rem, 0.95rem + 0.7vw, 1.5rem);
      line-height: 1.2;
      color: var(--text);
      transition: color var(--t-fast);
      cursor: default;
    }

    .pcat__list li:hover {
      color: var(--accent);
    }

    .partners__note {
      margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
      padding-top: var(--sp-4);
      border-top: 1px solid var(--line);
      font-size: 0.88rem;
      letter-spacing: 0.03em;
      color: var(--text-faint);
      max-width: 54ch;
    }

    /* ============================================================
       CONTACT
       ============================================================ */
    .contact {
      position: relative;
      overflow: hidden;
    }

    .contact--details {
      padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem);
    }

    .contact--details .contact__row {
      margin-top: 0;
    }

    .contact__head {
      max-width: 64ch;
    }

    .contact__title {
      font-size: clamp(2.6rem, 1.6rem + 4.6vw, 5rem);
      max-width: 15ch;
      margin-top: var(--sp-4);
      line-height: 1;
    }

    .contact__title em {
      font-style: italic;
      color: var(--accent);
    }

    .contact__text {
      margin-top: var(--sp-5);
      max-width: 48ch;
      color: var(--text-soft);
      font-size: var(--fs-lead);
      line-height: 1.6;
    }

    .contact__cta {
      margin-top: var(--sp-6);
    }

    .contact__row {
      margin-top: clamp(3rem, 2rem + 4vw, 5.5rem);
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--sp-5);
    }

    .cinfo {
      display: flex;
      flex-direction: column;
      gap: 0.7em;
      padding-top: var(--sp-4);
      border-top: 1px solid var(--line);
    }

    .cinfo__label {
      font-family: var(--font-sans);
      font-size: 0.72rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--text-faint);
    }

    .cinfo__value {
      font-family: var(--font-serif);
      font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem);
      color: var(--text);
      transition: color var(--t-fast);
      width: fit-content;
    }

    a.cinfo__value:hover {
      color: var(--accent);
    }

    .cinfo__links {
      display: flex;
      flex-wrap: wrap;
      gap: var(--sp-2) var(--sp-4);
      padding-top: 0.15em;
    }

    .cinfo__links a {
      font-family: var(--font-sans);
      font-size: 0.78rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--text-soft);
      transition: color var(--t-fast);
    }

    .cinfo__links a:hover {
      color: var(--accent);
    }

    .contact__sign {
      display: block;
      margin-top: clamp(3.5rem, 2rem + 6vw, 8rem);
      font-family: var(--font-serif);
      font-weight: 500;
      font-size: clamp(2.8rem, 0.5rem + 10vw, 9.5rem);
      line-height: 0.9;
      letter-spacing: -0.02em;
      white-space: nowrap;
      color: transparent;
      -webkit-text-stroke: 1px var(--line);
      user-select: none;
    }

    /* ============================================================
       FOOTER
       ============================================================ */
    .footer {
      border-top: 1px solid var(--line);
      padding-block: var(--sp-6);
    }

    .footer__inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-4);
      flex-wrap: wrap;
    }

    .footer__brand {
      font-family: var(--font-serif);
      font-size: 1.2rem;
      letter-spacing: 0.04em;
    }

    .footer__meta {
      font-size: 0.76rem;
      letter-spacing: 0.1em;
      color: var(--text-faint);
    }

    /* ============================================================
       REVEAL ANIMATION
       ============================================================ */
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity var(--t-slow), transform var(--t-slow);
      transition-delay: var(--rd, 0s);
      will-change: opacity, transform;
    }

    .reveal.is-visible {
      opacity: 1;
      transform: none;
    }

    /* ============================================================
       RESPONSIVE
       ============================================================ */
    @media (max-width: 980px) {
      .about__grid {
        grid-template-columns: 1fr;
      }

      .about__photo img {
        max-height: none;
      }

      .hero__slide {
        background-position: center 42%;
      }

      .hero__brand img {
        height: clamp(115px, 25.2vw, 158px);
      }

      .hero__meta {
        flex-wrap: wrap;
        gap: var(--sp-5);
      }

      .about__title {
        max-width: none;
      }

      .pf__info {
        grid-template-columns: 1fr;
        align-items: start;
        gap: var(--sp-4);
      }

      .project-featured .proj-media--feature {
        aspect-ratio: 16 / 10;
      }

      .project-wide {
        grid-template-columns: 1fr;
        gap: var(--sp-4);
      }

      .partners__index {
        grid-template-columns: repeat(2, 1fr);
      }

      .contact__row {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp-5) var(--sp-4);
      }

      .approach__grid {
        grid-template-columns: 1fr 1fr;
      }

      .step {
        border-bottom: 1px solid var(--line);
      }

      .step:nth-child(2n) {
        border-right: 0;
      }

      .step,
      .step:not(:first-child) {
        padding-left: var(--sp-4);
        padding-right: var(--sp-4);
      }

      .step:first-child {
        padding-left: 0;
      }

      .step:nth-child(odd) {
        padding-left: 0;
      }

      .svc__steps {
        grid-template-columns: 1fr;
      }

      .svc__row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--sp-3);
      }

      .svc__orb {
        width: clamp(4.25rem, 3rem + 5vw, 6rem);
        height: clamp(4.25rem, 3rem + 5vw, 6rem);
      }
    }

    @media (max-width: 860px) {
      :root {
        --page-top: calc(var(--header-h) + 0.75rem);
      }

      .header__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-3);
        padding-block: 0.65rem;
      }

      .header__inner--nav-only {
        justify-content: flex-end;
      }

      .header__inner .brand {
        flex-shrink: 0;
        min-width: 0;
      }

      .header__inner .nav,
      .header__inner .header__tools {
        justify-self: auto;
      }

      .header__inner .header__tools {
        flex-shrink: 0;
        margin-left: auto;
      }

      .brand__logo {
        height: clamp(48px, 14vw, 68px);
      }

      .nav,
      .header .lang {
        display: none;
      }

      body.nav-open {
        overflow: hidden;
      }

      body.nav-open::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 94;
        background: rgba(18, 16, 13, 0.44);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        animation: nav-backdrop-in 0.28s var(--ease);
      }

      @keyframes nav-backdrop-in {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      .nav.is-open {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: 96;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        margin: 0;
        padding: calc(var(--header-h) + var(--sp-4)) var(--gutter) var(--sp-6);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        background: var(--bg);
        animation: nav-panel-in 0.32s var(--ease);
      }

      @keyframes nav-panel-in {
        from {
          opacity: 0;
          transform: translateY(-10px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      body.nav-open .header {
        z-index: 100;
        border-bottom-color: transparent;
        background: color-mix(in srgb, var(--bg) 92%, transparent);
        backdrop-filter: blur(14px) saturate(1.05);
        -webkit-backdrop-filter: blur(14px) saturate(1.05);
      }

      body.home.nav-open .header {
        background: color-mix(in srgb, #12100d 92%, transparent);
      }

      body.home.nav-open .header.is-scrolled {
        background: color-mix(in srgb, #12100d 92%, transparent);
        border-bottom-color: transparent;
      }

      .home .nav.is-open {
        background: #12100d;
      }

      .nav.is-open .nav__link {
        font-size: clamp(1.25rem, 1rem + 1.5vw, 1.55rem);
        font-family: var(--font-serif);
        letter-spacing: 0.02em;
        text-transform: none;
        color: var(--text);
        padding: 0.72em 0;
        border-bottom: 1px solid var(--line-soft);
        white-space: normal;
      }

      .nav.is-open .nav__link::after {
        display: none;
      }

      .home .nav.is-open .nav__link {
        color: var(--hero-fg);
        border-bottom-color: rgba(247, 240, 230, 0.12);
      }

      .home .nav.is-open .nav__link--projects,
      .home .header.is-scrolled .nav.is-open .nav__link--projects {
        display: block;
        padding: 0.72em 0;
        font-size: clamp(1.25rem, 1rem + 1.5vw, 1.55rem);
        font-family: var(--font-serif);
        letter-spacing: 0.02em;
        text-transform: none;
        color: var(--hero-fg);
        background: transparent;
        border: 0;
        border-bottom: 1px solid rgba(247, 240, 230, 0.12);
        border-radius: 0;
        transform: none;
      }

      .home .nav.is-open .nav__link--projects .nav__link-default,
      .home .header.is-scrolled .nav.is-open .nav__link--projects .nav__link-default {
        display: inline;
      }

      .home .nav.is-open .nav__link--projects .nav__link-scrolled,
      .home .header.is-scrolled .nav.is-open .nav__link--projects .nav__link-scrolled {
        display: none;
      }

      .nav-toggle {
        display: inline-flex;
        position: relative;
        z-index: 101;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border: 1px solid var(--line);
        border-radius: 100px;
        background: transparent;
        cursor: pointer;
        padding: 0;
      }

      .nav-toggle span {
        display: block;
        width: 18px;
        height: 2px;
        background: var(--text);
        border-radius: 1px;
        transition: transform var(--t-fast), opacity var(--t-fast);
      }

      .nav-toggle span + span {
        margin-top: 4px;
      }

      .nav-toggle[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
      }

      .nav-toggle[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
      }

      .nav-toggle[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
      }

      @media (prefers-reduced-motion: reduce) {
        body.nav-open::before,
        .nav.is-open {
          animation: none;
        }
      }

      .hero__title {
        line-height: 0.96;
      }

      .hero__meta {
        flex-direction: column;
        gap: var(--sp-4);
      }

      .hero__meta .stat {
        border-left: 0;
        padding-left: 0;
      }

      .project-featured .proj-media--feature {
        aspect-ratio: 4 / 5;
      }

      .pf__name {
        font-size: clamp(2rem, 1.2rem + 5vw, 2.6rem);
      }

      .projects__duo {
        grid-template-columns: 1fr;
        gap: var(--sp-6);
      }

      .projects__duo .pcard:nth-child(2) {
        margin-top: 0;
      }

      .pf__foot {
        flex-direction: column;
        gap: var(--sp-4);
      }

      .partners__index {
        grid-template-columns: 1fr 1fr;
      }

      .contact__row {
        grid-template-columns: 1fr;
      }

      .approach__grid {
        grid-template-columns: 1fr;
      }

      .step,
      .step:nth-child(2n) {
        border-right: 0;
      }

      .step:not(:first-child),
      .step:nth-child(odd) {
        padding-left: 0;
      }

      .footer__inner {
        justify-content: flex-start;
      }
    }

    /* ============================================================
       PROJECT PAGE
       ============================================================ */
    .project-main {
      --proj-pad: var(--page-top);
      padding-top: var(--page-top);
    }

    .proj-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: var(--sp-4);
      flex-wrap: wrap;
      padding-bottom: clamp(0.5rem, 0.35rem + 0.5vw, 0.85rem);
    }

    .proj-head .link-underline {
      flex-shrink: 0;
      margin-bottom: 0.2em;
    }

    .proj-head__eyebrow {
      margin-bottom: var(--sp-2);
    }

    .proj-head__title {
      font-size: clamp(2.2rem, 1.35rem + 3.2vw, 4.25rem);
      line-height: 1;
      letter-spacing: -0.02em;
    }

    .proj-head__title em {
      font-style: italic;
      font-weight: 400;
      color: var(--accent);
    }

    .proj-lead {
      font-size: var(--fs-lead);
      line-height: 1.6;
      color: var(--text-soft);
      max-width: 46ch;
    }

    .proj-meta {
      margin-top: clamp(2rem, 1rem + 3vw, 3.5rem);
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--sp-4);
    }

    .proj-meta__item {
      display: flex;
      flex-direction: column;
      gap: 0.45em;
      padding-top: var(--sp-3);
      border-top: 1px solid var(--line);
    }

    .proj-meta__label {
      font-family: var(--font-sans);
      font-size: 0.7rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--text-faint);
    }

    .proj-meta__value {
      font-family: var(--font-serif);
      font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem);
      color: var(--text);
    }

    /* ---- room selector (horizontal rail of covers) ---- */
    .rooms-rail-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: var(--sp-4);
      margin: var(--sp-4) 0 var(--sp-4);
      padding-top: var(--sp-4);
      border-top: 1px solid var(--line);
    }

    .rooms-rail-title {
      font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
      line-height: 1;
    }

    .rail-nav {
      display: flex;
      gap: 0.5rem;
    }

    .rail-nav__btn {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      border: 1px solid var(--line);
      background: transparent;
      color: var(--text);
      font-size: 1.05rem;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background var(--t), color var(--t), border-color var(--t);
    }

    .rail-nav__btn:hover {
      background: var(--text);
      color: var(--bg);
      border-color: var(--text);
    }

    .room-rail {
      display: flex;
      gap: clamp(0.9rem, 0.5rem + 1vw, 1.5rem);
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x proximity;
      scroll-behavior: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
      padding-bottom: 0.5rem;
      scrollbar-width: none;
      cursor: grab;
    }

    .room-rail.is-wheel-scrolling {
      scroll-snap-type: none;
    }

    .room-rail::-webkit-scrollbar {
      display: none;
    }

    .room-rail:active {
      cursor: grabbing;
    }

    .room-card {
      position: relative;
      flex: 0 0 auto;
      width: clamp(220px, 30vw, 340px);
      scroll-snap-align: start;
      border: 0;
      padding: 0;
      margin: 0;
      background: none;
      font: inherit;
      color: inherit;
      text-align: left;
      cursor: pointer;
    }

    .room-card__media {
      position: relative;
      display: block;
      aspect-ratio: 3 / 4;
      overflow: hidden;
      border-radius: var(--radius-lg);
      background: var(--bg-alt);
    }

    .room-card__media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform var(--t-slow);
    }

    .room-card:hover .room-card__media img {
      transform: scale(1.05);
    }

    .room-card__media::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(20, 15, 10, 0.62), rgba(20, 15, 10, 0) 48%);
    }

    .room-card__label {
      position: absolute;
      left: 1.1rem;
      right: 1.1rem;
      bottom: 1rem;
      z-index: 1;
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 0.5rem;
    }

    .room-card__name {
      font-family: var(--font-serif);
      font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
      color: #f7f0e6;
    }

    .room-card__count {
      font-family: var(--font-sans);
      font-size: 0.64rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(247, 240, 230, 0.72);
      white-space: nowrap;
    }

    .project-single .project-gallery {
      margin-top: var(--sp-4);
    }

    .project-single .room-stage {
      height: calc(100vh - var(--proj-pad) - 12rem);
      height: calc(100svh - var(--proj-pad) - 12rem);
      min-height: 380px;
    }

    .project-single .proj-foot {
      margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
    }

    /* ---- room view (full-screen horizontal carousel) ---- */
    .room-view {
      display: none;
    }

    .room-view.is-open {
      display: flex;
      flex-direction: column;
      height: calc(100vh - var(--proj-pad) - 1.5rem);
      height: calc(100svh - var(--proj-pad) - 1.5rem);
      min-height: 380px;
      animation: projFade 0.5s var(--ease) both;
    }

    /* give the photos more room while a room is open */
    .room-open .project-main {
      --proj-pad: calc(clamp(84px, 11vw, 119px) + 0.9rem + 0.5rem);
    }

    .room-open .footer {
      display: none;
    }

    @keyframes projFade {
      from {
        opacity: 0;
        transform: translateY(14px);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }

    .room-view__head {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      gap: var(--sp-4);
      flex-wrap: wrap;
      margin-bottom: clamp(0.75rem, 0.5rem + 1vw, 1.4rem);
      padding-bottom: var(--sp-3);
      border-bottom: 1px solid var(--line);
    }

    .room-view__title {
      font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem);
      line-height: 1;
    }

    .room-view__count {
      margin-left: auto;
      font-family: var(--font-sans);
      font-size: 0.72rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--text-faint);
      white-space: nowrap;
    }

    .room-back {
      border: 1px solid var(--line);
      background: transparent;
      border-radius: 100px;
      padding: 0.55rem 1.1rem;
      font-family: var(--font-sans);
      font-size: 0.78rem;
      letter-spacing: 0.04em;
      color: var(--text);
      cursor: pointer;
      transition: background var(--t), color var(--t), border-color var(--t);
    }

    .room-back:hover {
      background: var(--text);
      color: var(--bg);
      border-color: var(--text);
    }

    /* stage holds the large photos + side arrows */
    .room-stage {
      position: relative;
      flex: 1 1 auto;
      min-height: 0;
    }

    .proj-gallery {
      height: 100%;
      display: flex;
      align-items: center;
      gap: clamp(0.75rem, 0.4rem + 1.5vw, 1.75rem);
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x proximity;
      scroll-behavior: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
      padding-inline: clamp(0.5rem, 6vw, 7rem);
      scrollbar-width: none;
      cursor: grab;
    }

    .proj-gallery.is-wheel-scrolling {
      scroll-snap-type: none;
    }

    .proj-gallery::-webkit-scrollbar {
      display: none;
    }

    .proj-gallery:active {
      cursor: grabbing;
    }

    .proj-gallery figure {
      flex: 0 0 auto;
      height: 100%;
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      scroll-snap-align: center;
      cursor: zoom-in;
    }

    .proj-gallery img {
      height: 100%;
      width: auto;
      max-width: 86vw;
      object-fit: contain;
      display: block;
      border-radius: var(--radius);
    }

    /* big side arrows (‹ ›) */
    .gallery-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 5;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      border: 1px solid var(--line);
      background: color-mix(in srgb, var(--bg) 60%, transparent);
      backdrop-filter: blur(6px);
      color: var(--text);
      font-size: 1.7rem;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background var(--t), color var(--t), border-color var(--t);
    }

    .gallery-arrow--prev {
      left: clamp(0.5rem, 1.5vw, 1.5rem);
    }

    .gallery-arrow--next {
      right: clamp(0.5rem, 1.5vw, 1.5rem);
    }

    .gallery-arrow:hover {
      background: var(--text);
      color: var(--bg);
      border-color: var(--text);
    }

    /* ============ homepage projects carousel (floor 2) ============ */
    .pcar-nav {
      display: flex;
      gap: 0.5rem;
    }

    .pcar-all {
      white-space: nowrap;
    }

    .pcar {
      display: flex;
      gap: clamp(0.75rem, 0.4rem + 1.2vw, 1.5rem);
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x proximity;
      scroll-behavior: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
      padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
      padding-block: 0.5rem 1.25rem;
      margin-top: clamp(0.75rem, 0.4rem + 1vw, 1.25rem);
      scrollbar-width: thin;
      scrollbar-color: var(--line) transparent;
      cursor: grab;
    }

    .pcar.is-wheel-scrolling {
      scroll-snap-type: none;
    }

    .pcar::-webkit-scrollbar {
      height: 2px;
    }

    .pcar::-webkit-scrollbar-thumb {
      background: var(--line);
      border-radius: 2px;
    }

    .pcar:active {
      cursor: grabbing;
    }

    .pcar-slide {
      position: relative;
      flex: 0 0 auto;
      width: clamp(240px, 38vw, 480px);
      aspect-ratio: 4 / 5;
      border-radius: var(--radius);
      overflow: hidden;
      scroll-snap-align: start;
      background: var(--bg-alt);
      isolation: isolate;
      display: flex;
      flex-direction: column;
    }

    .pcar-slide img {
      width: 100%;
      flex: 1 1 auto;
      min-height: 0;
      object-fit: cover;
      transition: transform var(--t-slow);
    }

    .pcar-slide:hover img {
      transform: scale(1.03);
    }

    .pcar-slide__shade {
      position: absolute;
      inset: 0;
      bottom: 3.5rem;
      background: linear-gradient(to top, rgba(20, 14, 8, 0.55), rgba(20, 14, 8, 0) 45%);
      pointer-events: none;
    }

    .pcar-slide__caption {
      position: absolute;
      left: 1.1rem;
      right: 1.1rem;
      bottom: 3.25rem;
      color: #f7f0e6;
      text-shadow: 0 1px 12px rgba(20, 14, 8, 0.45);
      pointer-events: none;
    }

    .pcar-slide__name {
      font-family: var(--font-serif);
      font-size: clamp(1.15rem, 0.9rem + 1vw, 1.65rem);
      line-height: 1.08;
    }

    .pcar-slide__city {
      display: none;
    }

    /* ============ about page ============ */
    .about-page {
      padding-top: var(--page-top);
      padding-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
    }

    .about-page .page-head {
      margin-bottom: clamp(1rem, 0.65rem + 1.2vw, 1.5rem);
    }

    .about-page .section-head {
      margin-bottom: clamp(1rem, 0.65rem + 1.2vw, 1.5rem);
    }

    .about-page .about__grid {
      align-items: start;
      gap: clamp(2rem, 1rem + 4vw, 5rem);
    }

    .about-page .about__photo {
      max-width: min(100%, 400px);
    }

    .about-page .about__photo img {
      width: 100%;
      height: auto;
    }

    .about-page .about__body {
      gap: clamp(1rem, 0.7rem + 1vw, 1.35rem);
    }

    .about-page .about__quote {
      gap: clamp(0.55rem, 0.4rem + 0.4vw, 0.75rem);
    }

    .about-page .about__mark svg {
      width: clamp(2rem, 1.65rem + 1.2vw, 2.5rem);
    }

    .about-page .about__copy {
      gap: clamp(0.6rem, 0.45rem + 0.35vw, 0.85rem);
    }

    .about-page .about__copy p {
      font-size: clamp(0.88rem, 0.84rem + 0.18vw, 0.98rem);
      line-height: 1.5;
      color: color-mix(in srgb, var(--text) 88%, var(--text-soft));
    }

    .about-page .about__signature {
      margin-top: 0;
      font-size: 0.92rem;
    }

    .about-page .about__signature span {
      font-size: 0.66rem;
      margin-top: 0.38em;
    }

    /* ============ projects grid page ============ */
    .projects-page {
      padding-top: var(--page-top);
      padding-bottom: var(--sp-section);
    }

    .proj-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(1rem, 0.6rem + 1vw, 1.75rem);
      margin-top: var(--sp-4);
    }

    .proj-grid-card {
      display: flex;
      flex-direction: column;
      gap: 0.65rem;
    }

    .proj-grid-card__media {
      display: block;
      aspect-ratio: 3 / 2;
      overflow: hidden;
      border-radius: var(--radius);
      background: var(--bg-alt);
    }

    .proj-grid-card__media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform var(--t-slow);
    }

    .proj-grid-card:hover .proj-grid-card__media img {
      transform: scale(1.04);
    }

    .proj-grid-card__info {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }

    .proj-grid-card__name {
      font-family: var(--font-serif);
      font-size: clamp(1rem, 0.9rem + 0.35vw, 1.2rem);
      line-height: 1.15;
      transition: color var(--t-fast);
    }

    .proj-grid-card:hover .proj-grid-card__name {
      color: var(--accent);
    }

    .proj-grid-card__city {
      display: none;
    }

    /* ---- lightbox (click to enlarge) ---- */
    .lightbox {
      position: fixed;
      inset: 0;
      z-index: 200;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(18, 13, 9, 0.94);
      backdrop-filter: blur(6px);
    }

    .lightbox.is-open {
      display: flex;
      animation: projFade 0.3s var(--ease) both;
    }

    .lightbox__img {
      max-width: 90vw;
      max-height: 86vh;
      object-fit: contain;
      box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.8);
      cursor: pointer;
      user-select: none;
    }

    .lb-btn {
      position: absolute;
      width: 52px;
      height: 52px;
      border-radius: 50%;
      border: 1px solid rgba(247, 240, 230, 0.3);
      background: rgba(20, 15, 10, 0.35);
      color: #f7f0e6;
      font-size: 1.35rem;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background var(--t), border-color var(--t);
    }

    .lb-btn:hover {
      background: rgba(247, 240, 230, 0.16);
      border-color: rgba(247, 240, 230, 0.55);
    }

    .lightbox__close {
      top: 1.4rem;
      right: 1.6rem;
    }

    .lightbox__nav--prev {
      left: clamp(0.75rem, 2vw, 2rem);
      top: 50%;
      transform: translateY(-50%);
    }

    .lightbox__nav--next {
      right: clamp(0.75rem, 2vw, 2rem);
      top: 50%;
      transform: translateY(-50%);
    }

    .lightbox__counter {
      position: absolute;
      bottom: 1.5rem;
      left: 50%;
      transform: translateX(-50%);
      font-family: var(--font-sans);
      font-size: 0.74rem;
      letter-spacing: 0.22em;
      color: rgba(247, 240, 230, 0.8);
    }

    /* bottom navigation */
    .proj-foot {
      margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
      padding-top: var(--sp-5);
      border-top: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-4);
      flex-wrap: wrap;
    }

    .proj-foot__cta {
      font-family: var(--font-serif);
      font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem);
      color: var(--text);
    }

    .proj-foot__cta em {
      font-style: italic;
      color: var(--accent);
    }

    @media (max-width: 980px) {
      .proj-head {
        align-items: start;
      }

      .proj-meta {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp-4) var(--sp-5);
      }
    }

    @media (max-width: 980px) {
      .proj-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 720px) {
      .gallery-arrow {
        width: 44px;
        height: 44px;
        font-size: 1.4rem;
      }

      .pcar-slide {
        width: clamp(220px, 72vw, 320px);
      }

      .proj-grid {
        grid-template-columns: 1fr;
      }

      .room-card {
        width: clamp(200px, 72vw, 280px);
      }

      .lb-btn {
        width: 44px;
        height: 44px;
        font-size: 1.15rem;
      }

      .brief__options {
        grid-template-columns: 1fr;
      }

      .brief__dialog {
        max-height: min(94svh, 720px);
      }
    }

    /* ============================================================
       BRIEF QUIZ MODAL
       ============================================================ */
    .brief {
      position: fixed;
      inset: 0;
      z-index: 200;
      display: grid;
      place-items: center;
      padding: var(--gutter);
      pointer-events: none;
      visibility: hidden;
      opacity: 0;
      transition: opacity var(--t), visibility var(--t);
    }

    .brief.is-open {
      pointer-events: auto;
      visibility: visible;
      opacity: 1;
    }

    .brief__backdrop {
      position: absolute;
      inset: 0;
      background: rgba(22, 18, 14, 0.52);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }

    .brief__dialog {
      position: relative;
      z-index: 1;
      width: min(100%, 860px);
      max-height: min(90svh, 680px);
      display: flex;
      flex-direction: column;
      background: var(--surface);
      border: 1px solid var(--line-soft);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lg);
      overflow: hidden;
    }

    .brief__head {
      position: relative;
      padding: clamp(1rem, 0.85rem + 0.6vw, 1.35rem) clamp(1.25rem, 1rem + 1vw, 1.75rem)
        clamp(0.85rem, 0.7rem + 0.4vw, 1.1rem);
      background: var(--bg-alt);
      border-bottom: 1px solid var(--line-soft);
    }

    .brief__title {
      margin: 0;
      padding-right: 4.5rem;
      font-family: var(--font-serif);
      font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
      font-weight: 500;
      line-height: 1.25;
      color: var(--text);
    }

    .brief__counter {
      position: absolute;
      top: clamp(1rem, 0.85rem + 0.6vw, 1.35rem);
      right: clamp(3rem, 2.5rem + 1vw, 3.5rem);
      font-family: var(--font-sans);
      font-size: 0.72rem;
      letter-spacing: 0.14em;
      color: var(--text-faint);
    }

    .brief__close {
      position: absolute;
      top: clamp(0.75rem, 0.6rem + 0.5vw, 1rem);
      right: clamp(0.85rem, 0.6rem + 0.8vw, 1.15rem);
      display: grid;
      place-items: center;
      width: 36px;
      height: 36px;
      border: 1px solid var(--line);
      border-radius: 100px;
      background: var(--surface);
      color: var(--text-soft);
      font-size: 1.35rem;
      line-height: 1;
      cursor: pointer;
      transition: border-color var(--t-fast), color var(--t-fast);
    }

    .brief__close:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    .brief__progress {
      margin-top: 0.85rem;
      height: 2px;
      background: var(--line-soft);
      border-radius: 100px;
      overflow: hidden;
    }

    .brief__progress-bar {
      display: block;
      height: 100%;
      background: var(--accent);
      border-radius: inherit;
      transition: width var(--t);
    }

    .brief__form {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0;
    }

    .brief__panel {
      flex: 1;
      min-height: 0;
      overflow: auto;
      padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    }

    .brief__panel[hidden] {
      display: none !important;
    }

    .brief__question {
      margin: 0 0 clamp(1rem, 0.75rem + 0.8vw, 1.35rem);
      font-family: var(--font-sans);
      font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
      font-weight: 400;
      line-height: 1.55;
      color: var(--text);
    }

    .brief__options {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--sp-3);
    }

    .brief__options--5 .brief__option:last-child {
      grid-column: 1;
    }

    .brief__option {
      display: flex;
      align-items: center;
      gap: 0.85em;
      min-height: 52px;
      padding: 0.85em 1em;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--bg);
      cursor: pointer;
      transition: border-color var(--t-fast), background var(--t-fast);
    }

    .brief__option:hover {
      border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
      background: var(--surface);
    }

    .brief__option input {
      flex-shrink: 0;
      width: 18px;
      height: 18px;
      margin: 0;
      accent-color: var(--accent);
      cursor: pointer;
    }

    .brief__option:has(input:checked) {
      border-color: var(--accent);
      background: color-mix(in srgb, var(--accent) 6%, var(--surface));
    }

    .brief__option-text {
      font-family: var(--font-sans);
      font-size: 0.88rem;
      font-weight: 400;
      line-height: 1.35;
      color: var(--text);
    }

    .brief__fields {
      display: grid;
      gap: var(--sp-4);
    }

    .brief__field {
      display: grid;
      gap: 0.45em;
    }

    .brief__label {
      font-family: var(--font-sans);
      font-size: 0.72rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-faint);
    }

    .brief__field input {
      width: 100%;
      padding: 0.95em 1.05em;
      font: inherit;
      font-size: 0.95rem;
      color: var(--text);
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      transition: border-color var(--t-fast);
    }

    .brief__field input:focus {
      outline: none;
      border-color: var(--accent);
    }

    .brief__field input.is-invalid {
      border-color: #a44;
    }

    .brief__panel--done {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      min-height: 220px;
    }

    .brief__done-title {
      margin: 0 0 var(--sp-3);
      font-family: var(--font-serif);
      font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.4rem);
      color: var(--text);
    }

    .brief__done-text {
      margin: 0;
      max-width: 36ch;
      font-size: var(--fs-body);
      color: var(--text-soft);
      line-height: 1.65;
    }

    .brief__foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-4);
      padding: clamp(0.85rem, 0.7rem + 0.5vw, 1.1rem) clamp(1.25rem, 1rem + 1vw, 1.75rem);
      border-top: 1px solid var(--line-soft);
      background: var(--surface);
    }

    .brief__foot[hidden] {
      display: none !important;
    }

    .brief__back {
      display: inline-flex;
      align-items: center;
      gap: 0.55em;
      padding: 0.5em 0;
      border: 0;
      background: transparent;
      font: inherit;
      font-size: 0.72rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--text-faint);
      cursor: pointer;
      transition: color var(--t-fast);
    }

    .brief__back:not(:disabled):hover {
      color: var(--text);
    }

    .brief__back:disabled {
      opacity: 0.35;
      cursor: default;
    }

    .brief__next:disabled {
      opacity: 0.45;
      cursor: default;
      transform: none;
    }

    .brief__next:disabled:hover {
      transform: none;
      color: var(--btn-light-fg);
      background: var(--btn-light-bg);
      border-color: var(--btn-light-border);
    }

    .brief .btn,
    .brief button.btn {
      color: var(--btn-light-fg);
      background: var(--btn-light-bg);
      border-color: var(--btn-light-border);
    }

    .brief .btn:hover:not(:disabled),
    .brief button.btn:hover:not(:disabled) {
      color: var(--accent);
      background: var(--btn-light-hover-bg);
      border-color: color-mix(in srgb, var(--accent) 28%, var(--btn-light-border));
    }

    @media (max-width: 980px) {
      .brief__options {
        grid-template-columns: repeat(2, 1fr);
      }
    }