/* Hallmark · pre-emit critique: P5 H5 E5 S5 R4 V5 */
    /* Hallmark · page: Portfolio · macrostructure: Gallery Grid */
    /* genre: editorial · nav: solid-light · footer: statement */
    /* theme: custom · anchor hue: brass ~75° · axes: light / sans-geometric / warm */

    /* ─── TOKENS ──────────────────────────────────────────────────── */
    :root {
      --color-ink:            #1F1F1F;
      --color-ink-soft:       #4a3728;
      --color-ink-muted:      #7a6355;
      --color-paper:          #F4E9DE;
      --color-paper-2:        #ecddd0;
      --color-paper-3:        #e0cfbe;
      --color-surface:        #FFFFFF;
      --color-dark:           #1F1F1F;
      --color-dark-2:         #2a2118;
      --color-dark-3:         #362a1e;
      --color-accent:         #8B5E3C;
      --color-accent-light:   #D6B286;
      --color-accent-dark:    #765737;
      --color-accent-subtle:  #f5ece2;
      --color-focus:          oklch(60% 0.150 250);

      --font-body:    'Inter', system-ui, -apple-system, sans-serif;
      --font-display: 'Inter', system-ui, -apple-system, sans-serif;

      --text-xs:        0.6875rem;
      --text-sm:        0.8125rem;
      --text-base:      1rem;
      --text-lg:        1.125rem;
      --text-xl:        1.25rem;
      --text-2xl:       1.5rem;
      --text-3xl:       1.875rem;
      --text-4xl:       2.25rem;
      --text-5xl:       3rem;
      --text-display-s: 3.5rem;
      --text-display:   4.5rem;

      --space-1:  0.25rem;
      --space-2:  0.5rem;
      --space-3:  0.75rem;
      --space-4:  1rem;
      --space-5:  1.25rem;
      --space-6:  1.5rem;
      --space-8:  2rem;
      --space-10: 2.5rem;
      --space-12: 3rem;
      --space-16: 4rem;
      --space-20: 5rem;
      --space-24: 6rem;

      --ease-out:    cubic-bezier(0.16, 1, 0.30, 1);
      --ease-in:     cubic-bezier(0.70, 0, 0.84, 0);
      --ease-in-out: cubic-bezier(0.83, 0, 0.17, 1);

      --dur-fast:    180ms;
      --dur-base:    280ms;
      --dur-slow:    420ms;
      --dur-enter:   600ms;

      --max-width:        72rem;
      --max-width-narrow: 52rem;
      --gutter:           clamp(var(--space-6), 5vw, var(--space-16));

      --radius-sm: 0.125rem;
      --radius-md: 0.25rem;
      --radius-lg: 0.5rem;

      --rule-light:  1px solid #e0cfbe;
      --rule-dark:   1px solid #3a2e22;

      --nav-height: 6.5rem;
    }

    /* ─── RESET ───────────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { overflow-x: clip; scroll-behavior: smooth; }
    body {
      overflow-x: clip;
      font-family: var(--font-body);
      font-size: var(--text-base);
      line-height: 1.6;
      color: var(--color-ink);
      background: var(--color-surface);
      -webkit-font-smoothing: antialiased;
    }
    img, svg { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    ul, ol { list-style: none; }
    button { font: inherit; cursor: pointer; border: none; background: none; }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
      }
    }

    /* ─── UTILITY ─────────────────────────────────────────────────── */
    .container {
      width: 100%;
      max-width: var(--max-width);
      margin-inline: auto;
      padding-inline: var(--gutter);
    }
    .eyebrow {
      display: inline-block;
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--color-accent);
    }

    /* Scroll reveal */
    .reveal {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity var(--dur-enter) var(--ease-out),
                  transform var(--dur-enter) var(--ease-out);
    }
    .reveal.is-visible { opacity: 1; transform: translateY(0); }
    .reveal--delay-1 { transition-delay: 80ms; }
    .reveal--delay-2 { transition-delay: 160ms; }
    .reveal--delay-3 { transition-delay: 240ms; }

    /* ─── BUTTONS ─────────────────────────────────────────────────── */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      font-size: var(--text-sm);
      font-weight: 600;
      letter-spacing: 0.03em;
      padding: var(--space-3) var(--space-6);
      border-radius: var(--radius-md);
      transition: background var(--dur-base) var(--ease-out),
                  color var(--dur-base) var(--ease-out),
                  border-color var(--dur-base) var(--ease-out),
                  transform var(--dur-fast) var(--ease-out);
      white-space: nowrap;
    }
    .btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
    .btn:active { transform: translateY(1px); }
    .btn--primary {
      background: var(--color-accent);
      color: var(--color-surface);
      border: 1px solid var(--color-accent);
    }
    .btn--primary:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); }
    .btn--ghost-dark {
      background: transparent;
      color: var(--color-ink);
      border: 1px solid var(--color-paper-3);
    }
    .btn--ghost-dark:hover { background: var(--color-paper-2); border-color: var(--color-ink-muted); }
    .btn--ghost-light {
      background: transparent;
      color: var(--color-paper);
      border: 1px solid oklch(65% 0.004 80 / 0.5);
    }
    .btn--ghost-light:hover { background: oklch(100% 0 0 / 0.08); border-color: oklch(65% 0.004 80 / 0.8); }

    /* ─── NAV ─────────────────────────────────────────────────────── */
    .nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      height: var(--nav-height);
      display: flex;
      align-items: center;
      padding-inline: var(--gutter);
      background: var(--color-surface);
      box-shadow: 0 1px 0 var(--rule-light);
      border-bottom: var(--rule-light);
    }
    .nav__inner {
      width: 100%;
      max-width: var(--max-width);
      margin-inline: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-8);
    }
    .nav__brand { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
    .nav__logo { display: flex; align-items: center; flex-shrink: 0; }
    .nav__logo img {
      height: 135px;
      width: auto;
      display: block;
      margin-top: 12px;
      filter: brightness(0);
    }
    .nav__links { display: flex; align-items: center; gap: var(--space-8); }
    .nav__link {
      font-size: var(--text-sm);
      font-weight: 500;
      color: var(--color-ink-soft);
      transition: color var(--dur-fast) var(--ease-out);
    }
    .nav__link:hover { color: var(--color-ink); }
    .nav__link--active { color: var(--color-accent); font-weight: 600; }
    .nav__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 2px; }
    .nav__actions { display: flex; align-items: center; gap: var(--space-4); }
    .nav__hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      padding: var(--space-2);
      color: var(--color-ink);
    }
    .nav__hamburger span {
      display: block;
      width: 22px;
      height: 1.5px;
      background: currentColor;
      transition: transform var(--dur-base) var(--ease-in-out),
                  opacity var(--dur-base) var(--ease-in-out);
    }
    .nav__hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
    .nav__hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .nav__hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
    .nav__hamburger:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 2px; }
    .nav__mobile {
      position: fixed;
      inset: 0;
      z-index: 99;
      background: var(--color-dark);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--space-8);
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--dur-base) var(--ease-out);
    }
    .nav__mobile.is-open { opacity: 1; pointer-events: auto; }
    .nav__mobile-link {
      font-size: var(--text-3xl);
      font-weight: 300;
      color: var(--color-paper);
      letter-spacing: -0.02em;
      transition: color var(--dur-fast) var(--ease-out);
    }
    .nav__mobile-link:hover { color: var(--color-accent-light); }

    @media (max-width: 768px) {
      .nav__links, .nav__cta { display: none; }
      .nav__hamburger { display: flex; }
    }

    /* ─── PAGE HERO ───────────────────────────────────────────────── */
    .page-hero {
      background: var(--color-dark);
      padding-top: calc(var(--nav-height) + var(--space-20));
      padding-bottom: var(--space-16);
      position: relative;
      overflow: hidden;
    }
    .page-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url("IMG-20260421-WA0001.jpg");
      background-size: cover;
      background-position: center 35%;
      opacity: 0.20;
      z-index: 0;
    }
    .page-hero .container {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: var(--space-8);
      flex-wrap: wrap;
    }
    .page-hero__left {}
    .page-hero__eyebrow {
      color: var(--color-accent-light);
      margin-bottom: var(--space-5);
    }
    .page-hero__headline {
      font-size: clamp(var(--text-4xl), 6vw, var(--text-display));
      font-weight: 300;
      letter-spacing: -0.03em;
      line-height: 1.05;
      color: var(--color-paper);
      max-width: 14ch;
      overflow-wrap: anywhere;
      min-width: 0;
    }
    .page-hero__headline strong { font-weight: 700; }
    .page-hero__right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: var(--space-3);
    }
    .page-hero__stat {
      text-align: right;
    }
    .page-hero__stat-num {
      font-size: var(--text-3xl);
      font-weight: 300;
      letter-spacing: -0.04em;
      color: var(--color-accent-light);
      line-height: 1;
    }
    .page-hero__stat-label {
      font-size: var(--text-xs);
      color: #a08878;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-top: var(--space-1);
    }
    @media (max-width: 600px) {
      .page-hero__right { display: none; }
    }

    /* ─── FILTER BAR ──────────────────────────────────────────────── */
    .filter-bar {
      background: var(--color-surface);
      border-bottom: var(--rule-light);
      position: sticky;
      top: var(--nav-height);
      z-index: 50;
    }
    .filter-bar__inner {
      width: 100%;
      max-width: var(--max-width);
      margin-inline: auto;
      padding-inline: var(--gutter);
      display: flex;
      align-items: center;
      gap: var(--space-2);
      padding-block: var(--space-4);
      overflow-x: auto;
      scrollbar-width: none;
    }
    .filter-bar__inner::-webkit-scrollbar { display: none; }
    .filter-btn {
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: var(--space-2) var(--space-4);
      border-radius: var(--radius-lg);
      border: 1px solid var(--color-paper-3);
      color: var(--color-ink-muted);
      background: transparent;
      white-space: nowrap;
      transition: background var(--dur-base) var(--ease-out),
                  color var(--dur-base) var(--ease-out),
                  border-color var(--dur-base) var(--ease-out);
    }
    .filter-btn:hover {
      background: var(--color-paper);
      color: var(--color-ink);
      border-color: var(--color-paper-2);
    }
    .filter-btn.is-active {
      background: var(--color-accent);
      color: var(--color-surface);
      border-color: var(--color-accent);
    }
    .filter-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

    /* ─── PROJECT GRID ────────────────────────────────────────────── */
    .portfolio-grid-section {
      background: var(--color-surface);
      padding-block: var(--space-16) var(--space-24);
    }
    .portfolio-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--space-6);
    }
    .project-card {
      position: relative;
      border-radius: var(--radius-lg);
      overflow: hidden;
      background: var(--color-paper-3);
      cursor: pointer;
      display: block;
    }
    .project-card--featured {
      grid-column: span 2;
      grid-row: span 2;
    }
    .project-card__img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform var(--dur-slow) var(--ease-out);
      min-height: 280px;
    }
    .project-card--featured .project-card__img { min-height: 560px; }
    .project-card:hover .project-card__img { transform: scale(1.04); }
    .project-card__overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(31,31,31,0.82) 0%, rgba(31,31,31,0) 55%);
      opacity: 0;
      transition: opacity var(--dur-base) var(--ease-out);
      display: flex;
      align-items: flex-end;
      padding: var(--space-6);
    }
    .project-card:hover .project-card__overlay,
    .project-card:focus-visible .project-card__overlay { opacity: 1; }
    .project-card__info {}
    .project-card__tag {
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--color-accent-light);
      margin-bottom: var(--space-2);
    }
    .project-card__name {
      font-size: var(--text-lg);
      font-weight: 600;
      color: var(--color-surface);
      letter-spacing: -0.01em;
    }
    /* Always-visible label on featured card */
    .project-card--featured .project-card__overlay {
      opacity: 1;
      background: linear-gradient(to top, rgba(31,31,31,0.78) 0%, rgba(31,31,31,0) 45%);
    }
    .project-card:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

    /* hidden when filtered out */
    .project-card.is-hidden {
      display: none;
    }

    @media (max-width: 768px) {
      .portfolio-grid { grid-template-columns: 1fr 1fr; }
      .project-card--featured { grid-column: span 2; grid-row: span 1; }
      .project-card--featured .project-card__img { min-height: 320px; }
    }
    @media (max-width: 480px) {
      .portfolio-grid { grid-template-columns: 1fr; }
      .project-card--featured { grid-column: span 1; }
      .project-card__overlay { opacity: 1; }
    }

    /* ─── HOUZZ STRIP ─────────────────────────────────────────────── */
    .houzz-strip {
      background: var(--color-paper);
      padding-block: var(--space-16);
      text-align: center;
    }
    .houzz-strip__eyebrow { margin-bottom: var(--space-4); }
    .houzz-strip__headline {
      font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
      font-weight: 300;
      letter-spacing: -0.025em;
      color: var(--color-ink);
      margin-bottom: var(--space-5);
      overflow-wrap: anywhere;
      min-width: 0;
    }
    .houzz-strip__headline strong { font-weight: 700; }
    .houzz-strip__sub {
      font-size: var(--text-base);
      color: var(--color-ink-soft);
      max-width: 44ch;
      margin-inline: auto;
      margin-bottom: var(--space-8);
      line-height: 1.65;
    }
    .houzz-strip__actions {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-4);
      flex-wrap: wrap;
    }

    /* ─── CTA ─────────────────────────────────────────────────────── */
    .portfolio-cta {
      background: var(--color-dark);
      padding-block: var(--space-24);
      text-align: center;
    }
    .portfolio-cta__eyebrow { color: var(--color-accent-light); margin-bottom: var(--space-5); }
    .portfolio-cta__headline {
      font-size: clamp(var(--text-3xl), 4.5vw, var(--text-display-s));
      font-weight: 300;
      letter-spacing: -0.025em;
      color: var(--color-paper);
      max-width: 20ch;
      margin-inline: auto;
      margin-bottom: var(--space-4);
      line-height: 1.1;
      overflow-wrap: anywhere;
      min-width: 0;
    }
    .portfolio-cta__headline strong { font-weight: 700; }
    .portfolio-cta__sub {
      font-size: var(--text-base);
      color: #a08878;
      max-width: 44ch;
      margin-inline: auto;
      margin-bottom: var(--space-10);
      line-height: 1.65;
    }
    .portfolio-cta__actions {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-4);
      flex-wrap: wrap;
    }

    /* ─── MODAL ───────────────────────────────────────────────────── */
    .modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 200;
      background: oklch(8% 0.006 80 / 0.85);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-6);
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--dur-base) var(--ease-out);
    }
    .modal-overlay.is-open { opacity: 1; pointer-events: auto; }
    .modal {
      background: var(--color-dark-2);
      border: 1px solid oklch(25% 0.007 80);
      border-radius: var(--radius-lg);
      padding: var(--space-10);
      width: 100%;
      max-width: 560px;
      max-height: 90vh;
      overflow-y: auto;
      transform: translateY(16px);
      transition: transform var(--dur-base) var(--ease-out);
      position: relative;
    }
    .modal-overlay.is-open .modal { transform: translateY(0); }
    .modal__close {
      position: absolute;
      top: var(--space-4); right: var(--space-4);
      width: 2rem; height: 2rem;
      display: flex; align-items: center; justify-content: center;
      color: oklch(50% 0.005 80);
      border-radius: var(--radius-md);
      transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
    }
    .modal__close:hover { color: var(--color-paper); background: oklch(25% 0.007 80); }
    .modal__close:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
    .modal__eyebrow { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent-light); margin-bottom: var(--space-3); }
    .modal__headline { font-size: var(--text-2xl); font-weight: 300; letter-spacing: -0.02em; color: var(--color-paper); margin-bottom: var(--space-2); }
    .modal__headline strong { font-weight: 700; }
    .modal__sub { font-size: var(--text-sm); color: oklch(52% 0.005 80); margin-bottom: var(--space-8); line-height: 1.6; }
    .modal__sub a { color: var(--color-accent-light); font-weight: 600; }
    .sched-modal { max-width: 480px; background: var(--color-surface); border-color: var(--color-paper-3); }
    .sched-modal .modal__eyebrow { color: var(--color-accent); }
    .sched-modal .modal__headline { color: var(--color-ink); }
    .sched-modal .modal__close { color: var(--color-ink-muted); }
    .sched-modal .modal__close:hover { color: var(--color-ink); background: var(--color-paper-2); }
    .sched-call-strip { background: var(--color-paper); border: 1px solid var(--color-paper-3); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-8); text-align: center; font-size: var(--text-sm); color: var(--color-ink-muted); }
    .sched-call-strip a { color: var(--color-accent); font-weight: 600; }
    .sched-options { display: flex; flex-direction: column; gap: var(--space-4); }
    .sched-option { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5) var(--space-6); border: 1px solid var(--color-paper-3); border-radius: var(--radius-lg); background: var(--color-paper); cursor: pointer; transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); text-align: left; width: 100%; }
    .sched-option:hover { border-color: var(--color-accent); background: var(--color-paper-2); }
    .sched-option:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
    .sched-option__label { font-size: var(--text-base); font-weight: 600; color: var(--color-ink); letter-spacing: -0.01em; }
    .sched-option__note { font-size: var(--text-xs); color: var(--color-ink-muted); margin-top: var(--space-1); }
    .sched-option__price { font-size: var(--text-lg); font-weight: 700; color: var(--color-accent); letter-spacing: -0.02em; flex-shrink: 0; margin-left: var(--space-4); }
    .sched-option__price-note { font-size: var(--text-xs); color: var(--color-ink-muted); text-align: right; }
    /* ─── QUOTE MODAL (light) ────────────────────────────────────────── */
    .quote-modal { background: var(--color-surface); border-color: var(--color-paper-3); }
    .quote-modal .modal__eyebrow { color: var(--color-accent); }
    .quote-modal .modal__headline { color: var(--color-ink); }
    .quote-modal .modal__headline strong { color: var(--color-ink); }
    .quote-modal .modal__sub { color: var(--color-ink-muted); }
    .quote-modal .modal__sub a { color: var(--color-accent); }
    .quote-modal .modal__close { color: var(--color-ink-muted); }
    .quote-modal .modal__close:hover { color: var(--color-ink); background: var(--color-paper-2); }
    .quote-modal .contact-form__label { color: var(--color-ink-muted); }
    .quote-modal .contact-form__input,
    .quote-modal .contact-form__select,
    .quote-modal .contact-form__textarea { color: var(--color-ink); background: var(--color-paper); border-color: var(--color-paper-3); }
    .quote-modal .contact-form__input::placeholder,
    .quote-modal .contact-form__textarea::placeholder { color: var(--color-ink-muted); opacity: 0.6; }
    .quote-modal .contact-form__select option { background: var(--color-surface); color: var(--color-ink); }
    .quote-modal .contact-form__success { color: var(--color-accent); border-color: var(--color-paper-3); background: var(--color-paper); }
    .contact-form { display: flex; flex-direction: column; gap: var(--space-4); }
    .contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
    .contact-form__field { display: flex; flex-direction: column; gap: var(--space-2); }
    .contact-form__label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: oklch(52% 0.005 80); }
    .contact-form__input,
    .contact-form__select,
    .contact-form__textarea {
      font: inherit; font-size: var(--text-sm);
      color: var(--color-paper);
      background: oklch(20% 0.007 80);
      border: 1px solid oklch(28% 0.007 80);
      border-radius: var(--radius-md);
      padding: var(--space-3) var(--space-4);
      outline: none;
      transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
      width: 100%;
    }
    .contact-form__input::placeholder,
    .contact-form__textarea::placeholder { color: oklch(38% 0.005 80); }
    .contact-form__input:focus,
    .contact-form__select:focus,
    .contact-form__textarea:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px oklch(51% 0.120 75 / 0.15); }
    .contact-form__select option { background: oklch(18% 0.007 80); }
    .contact-form__textarea { resize: vertical; min-height: 90px; }
    .contact-form__success { display: none; font-size: var(--text-base); font-weight: 600; color: var(--color-accent-light); padding: var(--space-4); border: 1px solid oklch(30% 0.020 75); border-radius: var(--radius-md); background: oklch(18% 0.012 75); text-align: center; }
    @media (max-width: 560px) {
      .modal { padding: var(--space-8) var(--space-6); }
      .contact-form__row { grid-template-columns: 1fr; }
    }

    /* ─── FOOTER ──────────────────────────────────────────────────── */
    .footer { background: var(--color-dark); padding-block: var(--space-16) var(--space-10); }
    .footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-12); padding-bottom: var(--space-12); border-bottom: var(--rule-dark); margin-bottom: var(--space-8); }
    .footer__brand-name { font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.02em; color: var(--color-paper); margin-bottom: var(--space-3); }
    .footer__tagline { font-size: var(--text-sm); color: #a08878; line-height: 1.6; max-width: 24ch; }
    .footer__col-label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #c4b09a; margin-bottom: var(--space-5); }
    .footer__links { display: flex; flex-direction: column; gap: var(--space-3); }
    .footer__link { font-size: var(--text-sm); color: #a08878; transition: color var(--dur-fast) var(--ease-out); }
    .footer__link:hover { color: var(--color-paper); }
    .footer__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; }
    .footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
    .footer__credits { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
    .footer__credit-item { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #a08878; }
    .footer__credit-divider { width: 3px; height: 3px; border-radius: 50%; background: #a08878; flex-shrink: 0; }
    .footer__social { display: flex; align-items: center; gap: var(--space-3); }
    .footer__social-link { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: #a08878; border: 1px solid #3a2e22; border-radius: var(--radius-md); transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
    .footer__social-link:hover { color: var(--color-paper); border-color: oklch(45% 0.005 80); }
    .footer__social-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
    @media (max-width: 768px) {
      .footer__top { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
      .footer__bottom { flex-direction: column; align-items: flex-start; }
    }
    @media (max-width: 480px) { .footer__top { grid-template-columns: 1fr; } }

    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  
/* nav dropdowns (injected) */
.nav__item{ position:relative; display:flex; align-items:center; }
.nav__link--drop{ display:inline-flex; align-items:center; gap:4px; cursor:pointer; }
.nav__caret{ font-size:.6em; transition:transform 180ms ease; }
.nav__item:hover .nav__caret, .nav__item:focus-within .nav__caret{ transform:rotate(180deg); }
.nav__item::after{ content:''; position:absolute; top:100%; left:-8px; right:-8px; height:14px; }
.nav__menu{ position:absolute; top:calc(100% + 10px); left:-8px; min-width:220px; background:#fff; border:1px solid #e0cfbe; border-radius:.25rem; box-shadow:0 14px 34px rgba(31,31,31,.14); padding:.5rem; display:flex; flex-direction:column; opacity:0; transform:translateY(6px); pointer-events:none; transition:opacity 240ms ease, transform 240ms ease; z-index:120; }
.nav__item:hover .nav__menu, .nav__item:focus-within .nav__menu{ opacity:1; transform:translateY(0); pointer-events:auto; }
.nav__menu-link{ font-size:.8125rem; font-weight:500; color:#4a3728; padding:.6rem .9rem; border-radius:.125rem; white-space:nowrap; transition:background 150ms, color 150ms; }
.nav__menu-link:hover{ background:#F4E9DE; color:#8B5E3C; }

/* ── portfolio add-ons (BBC generated) ─────────────────────────── */
.pd-wrap { background: var(--color-surface); padding-block: var(--space-16) var(--space-24); }
.pd-back { display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--text-sm); font-weight:600; color:var(--color-accent); margin-bottom:var(--space-8); }
.pd-back:hover { color:var(--color-accent-dark); }
.pd-layout { display:grid; grid-template-columns: 1.6fr 1fr; gap:var(--space-12); align-items:start; }
.pd-gallery { display:grid; grid-template-columns: 1fr 1fr; gap:var(--space-4); }
.pd-gallery a { display:block; border-radius:var(--radius-md); overflow:hidden; background:var(--color-paper-3); }
.pd-gallery img { width:100%; height:100%; object-fit:cover; aspect-ratio: 4/3; transition:transform var(--dur-slow) var(--ease-out); }
.pd-gallery a:first-child { grid-column: 1 / -1; }
.pd-gallery a:first-child img { aspect-ratio: 16/10; }
.pd-gallery a:hover img { transform:scale(1.03); }
.pd-aside { position:sticky; top: calc(var(--nav-height) + var(--space-6)); }
.pd-desc { font-size:var(--text-lg); font-weight:300; line-height:1.6; color:var(--color-ink); letter-spacing:-0.01em; margin-bottom:var(--space-8); }
.pd-meta { border-top: var(--rule-light); padding-top:var(--space-6); margin-bottom:var(--space-6); }
.pd-meta__label { font-size:var(--text-xs); font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--color-ink-muted); margin-bottom:var(--space-2); }
.pd-meta__val { font-size:var(--text-base); color:var(--color-ink-soft); margin-bottom:var(--space-5); line-height:1.5; }
.chip-row { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-bottom:var(--space-6); }
.chip { font-size:var(--text-xs); font-weight:600; letter-spacing:0.04em; padding:var(--space-2) var(--space-4); border-radius:var(--radius-lg); border:1px solid var(--color-paper-3); color:var(--color-ink-soft); background:var(--color-paper); transition:background var(--dur-base), color var(--dur-base), border-color var(--dur-base); }
.chip:hover { background:var(--color-accent); color:#fff; border-color:var(--color-accent); }
.chip--style { border-style:dashed; }
.pd-features { list-style:disc; padding-left:1.1em; color:var(--color-ink-soft); font-size:var(--text-sm); line-height:1.7; margin-bottom:var(--space-6); }
.pd-actions { display:flex; flex-direction:column; gap:var(--space-3); }
.pd-actions .btn { justify-content:center; }
.state-badge { display:inline-block; font-size:var(--text-xs); font-weight:700; letter-spacing:0.08em; text-transform:uppercase; padding:var(--space-1) var(--space-3); border-radius:var(--radius-sm); margin-left:var(--space-3); }
.state-badge--progress { background:var(--color-accent-light); color:var(--color-dark); }
.state-badge--done { background:#2f6b3f; color:#fff; }
.coll-intro { max-width:52rem; }
.coll-note { font-size:var(--text-sm); color:var(--color-ink-muted); font-style:italic; margin-top:var(--space-4); }
.coll-links-section { background:var(--color-paper); padding-block:var(--space-16); }
.coll-links-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-4); }
.coll-link { display:block; padding:var(--space-6); border:1px solid var(--color-paper-3); border-radius:var(--radius-lg); background:var(--color-surface); transition:border-color var(--dur-base), transform var(--dur-fast); }
.coll-link:hover { border-color:var(--color-accent); transform:translateY(-2px); }
.coll-link__name { font-size:var(--text-base); font-weight:700; color:var(--color-ink); letter-spacing:-0.01em; }
.coll-link__count { font-size:var(--text-xs); color:var(--color-ink-muted); margin-top:var(--space-1); }
@media (max-width: 900px){ .pd-layout{ grid-template-columns:1fr; } .pd-aside{ position:static; } .coll-links-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .pd-gallery{ grid-template-columns:1fr; } .coll-links-grid{ grid-template-columns:1fr; } }
/* ── nav dropdowns ─────────────────────────────────────────────── */
.nav__item{ position:relative; display:flex; align-items:center; }
.nav__link--drop{ display:inline-flex; align-items:center; gap:4px; cursor:pointer; }
.nav__caret{ font-size:.6em; transition:transform var(--dur-fast) var(--ease-out); }
.nav__item:hover .nav__caret, .nav__item:focus-within .nav__caret{ transform:rotate(180deg); }
.nav__item::after{ content:''; position:absolute; top:100%; left:-8px; right:-8px; height:14px; }
.nav__menu{ position:absolute; top:calc(100% + 10px); left:-8px; min-width:220px; background:var(--color-surface); border:1px solid var(--color-paper-3); border-radius:var(--radius-md); box-shadow:0 14px 34px rgba(31,31,31,.14); padding:var(--space-2); display:flex; flex-direction:column; opacity:0; transform:translateY(6px); pointer-events:none; transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); z-index:120; }
.nav__item:hover .nav__menu, .nav__item:focus-within .nav__menu{ opacity:1; transform:translateY(0); pointer-events:auto; }
.nav__menu-link{ font-size:var(--text-sm); font-weight:500; color:var(--color-ink-soft); padding:var(--space-3) var(--space-4); border-radius:var(--radius-sm); white-space:nowrap; transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.nav__menu-link:hover{ background:var(--color-paper); color:var(--color-accent); }
/* ── collection quote + empty state ────────────────────────────── */
.coll-quote{ margin-top:var(--space-6); }
.empty-state{ background:var(--color-paper); border:1px dashed var(--color-paper-3); border-radius:var(--radius-lg); padding:var(--space-16) var(--space-8); text-align:center; }
.empty-state p{ color:var(--color-ink-soft); font-size:var(--text-lg); margin-bottom:var(--space-6); max-width:46ch; margin-inline:auto; line-height:1.6; }
/* ── trust bar ─────────────────────────────────────────────────── */
.trust-bar{ background:var(--color-dark); padding-block:var(--space-4); }
.trust-bar__list{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--space-3) var(--space-6); }
.trust-bar__list li{ font-size:var(--text-xs); font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:#c4b09a; position:relative; }
.trust-bar__list li:not(:last-child)::after{ content:''; position:absolute; right:calc(var(--space-6) / -2); top:50%; width:3px; height:3px; border-radius:50%; background:#6b5844; transform:translateY(-50%); }
/* ── SEO intro / collection content ───────────────────────────── */
.pd-seo{ font-size:var(--text-base); color:var(--color-ink-soft); line-height:1.7; margin-bottom:var(--space-8); }
.coll-content{ background:var(--color-paper); padding-block:var(--space-16); }
.coll-content__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:var(--space-8); }
.coll-content h2{ font-size:var(--text-xl); font-weight:600; color:var(--color-ink); letter-spacing:-0.01em; margin-bottom:var(--space-3); }
.coll-content p{ font-size:var(--text-sm); color:var(--color-ink-soft); line-height:1.7; }
.pd-h2{ font-size:var(--text-sm); font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--color-ink-muted); margin-bottom:var(--space-4); }