/* ===================== DESIGN TOKENS ===================== */
  :root{
    --ink:#111111;
    --paper:#ffffff;
    --accent:#f50149;
    --line:#e4e0da;
    --muted:#6f6f6c;

    --font-head:'Fraunces', serif;
    --font-body:'Inter', sans-serif;

    --fs-eyebrow: .6875rem;   /* 11px */
    --fs-small: .8125rem;     /* 13px */
    --fs-body: 1.0625rem;     /* 17px */
    --fs-body-lg: 1.1875rem;  /* 19px */
    --fs-h4: 1.375rem;        /* 22px */
    --fs-h3: clamp(1.6rem, 2.4vw, 2.1rem);
    --fs-h2: clamp(2rem, 4vw, 2.9rem);
    --fs-h1: clamp(2.6rem, 6vw, 4.8rem);
    --fs-stat: clamp(1.9rem, 4.4vw, 3.1rem);

    --sp-1: 8px;
    --sp-2: 16px;
    --sp-3: 24px;
    --sp-4: 40px;
    --sp-5: 64px;
    --sp-6: 96px;
    --sp-7: 152px;

    --container: 1280px;
    --reading: 640px;

    --ease: cubic-bezier(.22,.61,.36,1);
    --dur-s: 400ms;
    --dur-m: 600ms;
    --dur-l: 1400ms;
  }

  @media (max-width: 900px){
    :root{
      --sp-6: 64px;
      --sp-7: 88px;
    }
  }
  @media (max-width: 640px){
    :root{
      --sp-4: 24px;
    }
  }

  /* ===================== RESET / BASE ===================== */
  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; overflow-x:hidden; }
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--font-body);
    font-size:var(--fs-body);
    font-weight:400;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    /* Without a hard boundary here, dragging a finger inside a horizontally-
       scrolling row (like the homepage strip below) can rubber-band the whole
       page sideways on iOS Safari, and it doesn't reliably snap back on its own
       when you scroll down afterward. This keeps any horizontal scroll fully
       contained to the elements that are meant to have it. */
  }
  img{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }
  h1,h2,h3,h4{ font-family:var(--font-head); font-weight:500; margin:0; letter-spacing:-0.01em; }
  p{ margin:0; }
  ul{ margin:0; padding:0; list-style:none; }
  button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }

  .container{ max-width:var(--container); margin:0 auto; padding:0 var(--sp-4); }
  @media (max-width:640px){ .container{ padding:0 var(--sp-2); } }

  .eyebrow{
    font-family:var(--font-body);
    font-size:var(--fs-eyebrow);
    text-transform:uppercase;
    letter-spacing:.18em;
    color:var(--muted);
    font-weight:500;
  }

  /* ===================== BUTTONS ===================== */
  .btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family:var(--font-body);
    font-size:var(--fs-small);
    text-transform:uppercase;
    letter-spacing:.14em;
    font-weight:600;
    padding:17px 34px;
    border-radius:0;
    transition:background var(--dur-s) var(--ease), color var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
    white-space:nowrap;
  }
  .btn-primary{
    background:var(--ink);
    color:var(--paper);
    border:1px solid var(--ink);
  }
  .btn-primary:hover{
    background:transparent;
    color:var(--accent);
    border-color:var(--ink);
  }
  .btn-secondary{
    background:transparent;
    color:var(--ink);
    border:none;
    padding:17px 0;
    position:relative;
  }
  .btn-secondary::after{
    content:"";
    position:absolute;
    left:0; bottom:12px;
    width:100%; height:1px;
    background:var(--ink);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform var(--dur-s) var(--ease);
  }
  .btn-secondary:hover::after{ transform:scaleX(1); }
  @media (max-width:640px){
    .btn{ white-space:normal; text-align:center; line-height:1.3; padding:16px 22px; }
    .btn-secondary{ padding:16px 0; }
  }
  .cta-row{ display:flex; gap:var(--sp-3); justify-content:center; flex-wrap:wrap; }
  @media (max-width:480px){
    .cta-row{ flex-direction:column; align-items:stretch; }
  }

  .link-arrow{
    display:inline-block;
    font-size:var(--fs-small);
    text-transform:uppercase;
    letter-spacing:.1em;
    font-weight:600;
    padding-bottom:4px;
    border-bottom:1px solid var(--line);
    transition:border-color var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
  }
  .link-arrow:hover{ border-color:var(--accent); color:var(--accent); }

  /* ===================== SCROLL REVEAL ===================== */
  .reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease);
  }
  .reveal.in{ opacity:1; transform:translateY(0); }
  .stagger .reveal:nth-child(1){ transition-delay:0ms; }
  .stagger .reveal:nth-child(2){ transition-delay:90ms; }
  .stagger .reveal:nth-child(3){ transition-delay:180ms; }
  .stagger .reveal:nth-child(4){ transition-delay:270ms; }
  .stagger .reveal:nth-child(5){ transition-delay:360ms; }
  .stagger .reveal:nth-child(6){ transition-delay:450ms; }

  /* ===================== HEADER / NAV ===================== */
  header{
    position:sticky; top:0; z-index:100;
    background:rgba(255,255,255,.92);
    backdrop-filter:saturate(180%) blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav-row{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px var(--sp-4);
    max-width:var(--container); margin:0 auto;
  }
  .logo-mark{ height:54px; width:auto; display:block; }
  @media (max-width:640px){ .logo-mark{ height:42px; } }
  nav.primary-nav{ display:flex; align-items:center; gap:var(--sp-4); }
  .nav-links{ display:flex; align-items:center; gap:34px; }
  .nav-links > li{ position:relative; }
  .nav-links a.top-link{
    font-size:var(--fs-small);
    text-transform:uppercase;
    letter-spacing:.1em;
    font-weight:500;
    padding:8px 0;
    position:relative;
  }
  .nav-links a.top-link::after{
    content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
    background:var(--ink); transform:scaleX(0); transform-origin:left;
    transition:transform var(--dur-s) var(--ease);
  }
  .nav-links a.top-link:hover::after{ transform:scaleX(1); }

  .dropdown{
    position:absolute; top:100%; left:50%; transform:translate(-50%,8px);
    background:var(--paper); border:1px solid var(--line);
    min-width:210px; padding:14px 0;
    opacity:0; visibility:hidden;
    transition:opacity var(--dur-s) var(--ease), transform var(--dur-s) var(--ease), visibility var(--dur-s);
  }
  .nav-links > li:hover .dropdown,
  .nav-links > li:focus-within .dropdown{
    opacity:1; visibility:visible; transform:translate(-50%,0);
  }
  .dropdown a{
    display:block; padding:9px 22px; font-size:var(--fs-small);
    color:var(--ink); transition:color var(--dur-s) var(--ease), padding-left var(--dur-s) var(--ease);
  }
  .dropdown a:hover{ color:var(--accent); padding-left:26px; }

  .nav-cta{ display:flex; align-items:center; gap:22px; }
  .inquire-btn{ padding:12px 24px; font-size:.75rem; }

  .menu-toggle{ display:none; }
  /* The tap-to-expand caret button (site-config.js) is only meant for the mobile
     drawer, but its one "display:none" rule lived inside the max-width:980px
     media query below, so above that width it fell back to a plain visible
     <button> — showing a second arrow next to the dropdown label's own "▾"
     (e.g. "SHOP ▾" plus a stray caret). Hidden by default here; the mobile
     media query below still turns it on for phones/tablets. */
  .mobile-dropdown-toggle{ display:none; }

  @media (max-width:980px){
    .nav-links{ display:none; }
    .menu-toggle{
      display:block; font-size:var(--fs-small); text-transform:uppercase; letter-spacing:.1em;
      font-weight:600; padding:10px 4px; min-height:44px;
    }

    /* ---- Mobile nav drawer ---- */
    body.nav-open{ overflow:hidden; }
    /* header's backdrop-filter creates a CSS "containing block" for fixed-position
       descendants, which trapped the drawer inside the header's own (short) box
       instead of covering the full screen. Drop it while the drawer is open so
       .nav-links.mobile-open's fixed positioning is relative to the real viewport. */
    body.nav-open header{ backdrop-filter:none; }
    /* The drawer covers the whole viewport at z-index:150 — higher than header's
       z-index:100 — which buried the original "Close" toggle underneath it with
       no way back out. This is a dedicated close button that lives above the
       drawer itself (injected by site-config.js), always reachable while open. */
    .mobile-menu-close{
      display:none;
      position:fixed; top:20px; right:var(--sp-4); z-index:160;
      width:46px; height:46px; border-radius:50%;
      background:var(--ink); color:#fff; border:none;
      align-items:center; justify-content:center;
      font-size:22px; line-height:1;
    }
    .mobile-menu-close.show{ display:flex; }
    .nav-links.mobile-open{
      display:flex;
      flex-direction:column;
      align-items:stretch;
      position:fixed;
      inset:0;
      background:var(--paper);
      padding:96px var(--sp-4) var(--sp-5);
      overflow-y:auto;
      z-index:150;
      gap:0;
      -webkit-overflow-scrolling:touch;
    }
    .nav-links.mobile-open > li{
      border-bottom:1px solid var(--line);
      padding:4px 0;
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
    }
    .nav-links.mobile-open a.top-link{
      display:block;
      flex:1 1 auto;
      padding:14px 2px;
      font-size:1.05rem;
      letter-spacing:.04em;
    }
    .nav-links.mobile-open a.top-link::after{ display:none; }
    /* The link label itself already ends in a literal "▾" (e.g. "Shop ▾") — on
       mobile that gets wrapped in .nav-arrow-inline by site-config.js and hidden
       here, since the dedicated caret button to its right is the real toggle now. */
    .nav-links.mobile-open a.top-link .nav-arrow-inline{ display:none; }
    .mobile-dropdown-toggle{ display:none; }
    /* Bigger and visibly button-shaped (circle + border) — the old plain 44px
       glyph with no background was hard for people to spot/hit reliably. */
    .nav-links.mobile-open .mobile-dropdown-toggle{
      display:flex; align-items:center; justify-content:center;
      flex:0 0 52px; width:52px; height:52px;
      font-size:20px; color:var(--ink);
      background:var(--paper); border:1px solid var(--line); border-radius:50%;
      transition:transform var(--dur-s) var(--ease), background var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
    }
    .nav-links.mobile-open .mobile-dropdown-toggle:active{ background:#f0efec; }
    .nav-links.mobile-open > li.expanded .mobile-dropdown-toggle{
      transform:rotate(180deg);
      background:var(--ink); color:#fff; border-color:var(--ink);
    }
    /* !important here because tapping the caret focuses it, which triggers the
       desktop `.nav-links > li:focus-within .dropdown{ transform:translate(-50%,0); }`
       hover-reveal rule — that selector is MORE specific than this one (it has an
       extra `li` in it), so without !important it silently wins on tap and shifts
       the full-width dropdown left by 50% of its own width, pushing the left half
       of every sub-link off-screen (only word-endings were visible). */
    .nav-links.mobile-open .dropdown{
      position:static !important;
      transform:none !important;
      opacity:1 !important;
      visibility:visible !important;
      border:none;
      min-width:0;
      flex-basis:100%; width:100%;
      display:none;
      padding:0 0 14px 16px;
      background:none;
      transition:none;
    }
    .nav-links.mobile-open .dropdown a{
      padding:12px 0;
      font-size:var(--fs-body);
      color:var(--muted);
    }
    .nav-links.mobile-open .dropdown a:hover{ color:var(--accent); padding-left:0; }
    .nav-links.mobile-open > li.expanded .dropdown{ display:block; }
  }

  /* ===================== HERO ===================== */
  .hero{
    display:flex; align-items:center; justify-content:center;
    min-height:92vh;
    padding:var(--sp-6) var(--sp-4);
    position:relative;
    overflow:hidden;
  }
  .hero-inner{
    max-width:var(--container); width:100%; margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    gap:var(--sp-5);
  }
  .amp{ font-variation-settings:'opsz' 9; }
  .hero-art{
    flex:0 0 auto;
    margin-left:auto;
    position:relative;
  }
  .hero-art-link{ position:relative; display:block; }
  .hero-badge{
    position:absolute; top:18px; left:18px; z-index:3;
    background:var(--ink); color:#fff; font-size:.68rem; text-transform:uppercase;
    letter-spacing:.1em; padding:7px 14px; font-weight:500;
  }
  .hero-hover-overlay{
    position:absolute; inset:0; z-index:2;
    background:rgba(17,17,17,0);
    display:flex; align-items:center; justify-content:center;
    transition:background var(--dur-m) var(--ease);
  }
  .hero-hover-overlay span{
    font-family:var(--font-head); font-style:italic; font-size:1.5rem; color:#fff;
    opacity:0; transform:translateY(6px);
    transition:opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease);
  }
  .hero-art-link:hover .hero-hover-overlay{ background:rgba(17,17,17,.4); }
  .hero-art-link:hover .hero-hover-overlay span{ opacity:1; transform:translateY(0); }
  .hero-art img{
    max-height:70vh;
    width:auto;
    max-width:52vw;
    object-fit:contain;
    filter: blur(9px) saturate(.7) opacity(.7);
    transform: scale(1.025);
    transition: filter var(--dur-l) var(--ease), transform var(--dur-l) var(--ease);
  }
  .hero.loaded .hero-art img{
    filter: blur(0) saturate(1) opacity(1);
    transform: scale(1);
  }
  .hero-text{
    flex:0 0 auto;
    max-width:500px;
    margin-right:auto;
    padding-bottom:var(--sp-3);
  }
  .hero h1{
    font-size:var(--fs-h1);
    line-height:1.04;
    font-weight:400;
    font-style:italic;
    margin-bottom:var(--sp-3);
  }
  .hero h1 .word{
    display:inline-block;
    opacity:0;
    transform:translateY(16px);
    transition:opacity 600ms var(--ease), transform 600ms var(--ease);
  }
  .hero.loaded h1 .word{ opacity:1; transform:translateY(0); }
  .hero-sub{
    opacity:0; transform:translateY(16px);
    transition:opacity 700ms var(--ease) 750ms, transform 700ms var(--ease) 750ms;
  }
  .hero.loaded .hero-sub{ opacity:1; transform:translateY(0); }
  .hero p{
    font-size:var(--fs-body-lg);
    color:var(--muted);
    line-height:1.55;
    margin-bottom:var(--sp-4);
    max-width:44ch;
  }
  .hero-ctas{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }

  @media (max-width:900px){
    .hero{ min-height:auto; padding-top:var(--sp-6); }
    .hero-inner{ flex-direction:column; align-items:flex-start; gap:var(--sp-4); }
    .hero-art{ margin:0 auto; }
    .hero-art img{ max-width:100%; max-height:56vh; }
    .hero-text{ max-width:100%; margin:0; }
  }

  /* ===================== OFFER TILES ===================== */
  .section{ padding:var(--sp-6) var(--sp-4); }
  .section-head{ margin:0 auto var(--sp-5); max-width:var(--container); }
  .section-head > *{ max-width:var(--reading); }
  .section-head h2{ font-size:var(--fs-h2); font-weight:400; margin-top:var(--sp-1); }

  .tiles{
    max-width:var(--container); margin:0 auto;
    display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4);
  }
  .tile figure{ margin:0; }
  .tile-frame{
    aspect-ratio:4/5;
    background:#f6f5f3;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
    margin-bottom:var(--sp-2);
  }
  .tile-frame img{
    width:100%; height:100%; object-fit:cover; object-position:center;
    transition:transform 900ms var(--ease);
  }
  .tile:hover .tile-frame img{ transform:scale(1.035); }
  .tile figcaption h3{
    font-size:var(--fs-h4); font-weight:500; margin-bottom:6px;
  }
  .tile figcaption p{ font-size:var(--fs-small); color:var(--muted); }

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

  /* ===================== SEE IT IN YOUR SPACE (scroll filmstrip) ===================== */
  .situ-wrapper{ position:relative; height:340vh; }
  .situ-sticky{
    position:sticky; top:0; height:100vh;
    display:flex; flex-direction:column; justify-content:center;
    overflow:hidden;
    background:var(--paper);
  }
  .situ-head{ max-width:var(--container); margin:0 auto var(--sp-5); padding:0 var(--sp-4); width:100%; }
  .situ-head h2{ font-size:var(--fs-h2); font-weight:400; }
  .situ-track{
    display:flex; gap:var(--sp-4);
    padding:0 var(--sp-4);
    will-change:transform;
  }
  .situ-track > a{
    flex:0 0 auto; width:min(64vw,620px);
  }
  .situ-track figure{ margin:0; }
  .situ-track img{
    width:100%; height:62vh; object-fit:contain; background:#f6f5f3;
    transition:transform 900ms var(--ease), opacity 900ms var(--ease);
  }
  .situ-track > a:hover img{ transform:scale(1.02); opacity:.92; }
  .situ-track figcaption{
    margin-top:var(--sp-2); font-size:var(--fs-small); color:var(--muted);
    text-transform:uppercase; letter-spacing:.08em;
  }

  @media (max-width:900px){
    .situ-wrapper{ height:auto; }
    .situ-sticky{ position:relative; height:auto; padding:var(--sp-6) 0; }
    .situ-track{ overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; transform:none !important; }
    .situ-track > a{ scroll-snap-align:start; width:78vw; }
    .situ-track img{ height:44vh; }
  }

  /* ===================== SEE IT IN YOUR SPACE — MASONRY GALLERY ===================== */
  .situ-gallery{
    max-width:var(--container); margin:0 auto;
    columns:3 280px; column-gap:var(--sp-4);
  }
  .situ-gallery figure{
    margin:0 0 var(--sp-4); break-inside:avoid;
    position:relative; overflow:hidden;
    background:#f6f5f3;
  }
  .situ-gallery img{
    width:100%; display:block; cursor:pointer;
    transition:transform 900ms var(--ease);
  }
  .situ-gallery figure:hover img{ transform:scale(1.025); }
  .situ-gallery figcaption{
    position:absolute; left:0; right:0; bottom:0;
    padding:var(--sp-2) var(--sp-2) var(--sp-2);
    background:linear-gradient(0deg, rgba(17,17,17,.82), rgba(17,17,17,.05) 85%, rgba(17,17,17,0));
    color:#fff; font-size:var(--fs-eyebrow);
    text-transform:uppercase; letter-spacing:.08em;
    display:flex; flex-direction:column; align-items:flex-start; gap:8px;
    opacity:.92; transition:opacity var(--dur-s) var(--ease);
    pointer-events:none;
  }
  .situ-gallery figure:hover figcaption{ opacity:1; }
  .situ-gallery figcaption a.price{
    display:inline-flex; align-items:center; gap:6px;
    background:#fff; color:var(--ink); text-transform:none; letter-spacing:0;
    font-size:var(--fs-small); font-weight:600; text-decoration:none;
    padding:13px 16px; min-height:44px; box-sizing:border-box; line-height:1;
    border-radius:999px; pointer-events:auto;
    box-shadow:0 2px 6px rgba(0,0,0,.25);
    transition:background var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
  }
  .situ-gallery figcaption a.price:hover{ background:var(--accent); color:#fff; }
  .situ-gallery figcaption a.price:hover{ color:var(--accent); opacity:1; }

  @media (max-width:900px){
    .situ-gallery{ columns:2 220px; }
  }
  @media (max-width:560px){
    .situ-gallery{ columns:1; }
  }

  /* ===================== FEATURED ORIGINALS STRIP ===================== */
  .shop-strip-row{
    max-width:var(--container); margin:0 auto;
    display:flex; gap:var(--sp-4);
    overflow-x:auto; padding-bottom:var(--sp-2);
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    /* Keep the row's own horizontal drag fully contained to itself — without
       this, dragging inside it could rubber-band the whole page sideways on
       iOS Safari (page stayed shifted after swiping, even scrolling down
       afterward). overscroll-behavior-x:contain fixes that without touching
       vertical scrolling at all.
       NOTE: touch-action:pan-x was tried here too and had to be removed — it
       actually told the browser "only horizontal panning is allowed on this
       element," which blocked vertical scrolling anywhere your finger started
       on the row (reported: couldn't scroll down once partway through a
       horizontal swipe). Left at the default `auto` so the browser picks the
       axis per-gesture like normal, which is what actually lets a vertical
       drag over the row scroll the page. */
    overscroll-behavior-x:contain;
  }
  .shop-strip-row::-webkit-scrollbar{ height:4px; }
  .shop-strip-row::-webkit-scrollbar-thumb{ background:var(--line); }

  /* No hint animation needed — a real sliver of the next card is left visible
     at rest so it's obvious there's more, the same way a stack of photos on a
     table reads as "there's another one underneath" without any explanation.
     (An earlier version used an animated arrow/dot, but it wasn't intuitive
     for everyone, and its white fade-out gradient was actually hiding the
     peeking card underneath it — working against itself.) */
  .shop-strip-wrap{ position:relative; }

  .shop-item{ flex:0 0 auto; width:280px; scroll-snap-align:start; }
  @media (max-width:480px){
    .shop-item{ width:250px; }
  }
  .shop-item > a:first-child{ display:block; color:inherit; text-decoration:none; }
  .shop-item .frame{
    background:#f6f5f3; height:340px; display:flex; align-items:center; justify-content:center;
    overflow:hidden; margin-bottom:var(--sp-2); position:relative; padding:22px; box-sizing:border-box;
  }
  .shop-item .frame img{ width:100%; height:100%; object-fit:contain; transition:transform 900ms var(--ease); }
  .shop-item:hover .frame img{ transform:scale(1.035); }
  .shop-item .caption{
    opacity:0; transform:translateY(6px);
    transition:opacity var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
  }
  .shop-item:hover .caption{ opacity:1; transform:translateY(0); }
  .shop-item h4{ font-size:1rem; font-weight:500; margin-bottom:2px; }
  .shop-item .price{ font-size:var(--fs-small); color:var(--muted); }
  .shop-item-inquire{
    display:inline-block; margin-top:6px; padding:8px 0; min-height:44px; box-sizing:border-box;
    font-size:var(--fs-small); font-weight:500;
    color:var(--ink); text-decoration:underline; text-underline-offset:2px;
    transition:color var(--dur-s) var(--ease);
  }
  @media (max-width:900px){
    .shop-item .caption{ opacity:1; transform:none; }
  }
  .shop-item-inquire:hover{ color:var(--accent); }
  .shop-close{ max-width:var(--container); margin:var(--sp-4) auto 0; padding:0 0; text-align:right; }
  .shop-strip-head{ display:flex; align-items:baseline; justify-content:space-between; max-width:var(--container); margin:0 auto var(--sp-5); }

  /* ===================== WHO SHE WORKS WITH ===================== */
  .audience{
    max-width:var(--container); margin:0 auto;
    display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5);
    border-top:1px solid var(--line); padding-top:var(--sp-5);
  }
  .audience-item{ display:block; text-decoration:none; color:inherit; padding:var(--sp-3); margin:calc(var(--sp-3) * -1); border-radius:4px; transition:background .15s ease; }
  .audience-item:hover{ background:#f6f5f3; }
  .audience-item h3{ font-size:var(--fs-h4); font-weight:500; margin-bottom:10px; }
  .audience-item h3::after{ content:" →"; opacity:0; transition:opacity .15s ease; }
  .audience-item:hover h3::after{ opacity:1; }
  .audience-item p{ font-size:var(--fs-small); color:var(--muted); line-height:1.5; }
  @media (max-width:900px){ .audience{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px){ .audience{ grid-template-columns:1fr; } }

  /* ===================== PROOF (inverted) ===================== */
  .proof{ background:#2b2924; color:var(--paper); text-align:center; padding-top:var(--sp-6); padding-bottom:var(--sp-6); }
  .proof .container{ max-width:820px; }
  .proof .eyebrow{ color:#8f8f8c; display:block; margin-bottom:var(--sp-3); }
  .proof .credibility{ font-size:var(--fs-small); color:#b9b9b6; letter-spacing:.03em; margin-top:var(--sp-3); margin-bottom:0; }
  .proof .stat{
    font-family:var(--font-head); font-style:italic; font-weight:400;
    font-size:var(--fs-stat); line-height:1.15; margin-bottom:0;
  }
  .proof .quote-section{
    margin-top:var(--sp-6);
    padding-top:var(--sp-6);
    border-top:1px solid rgba(255,255,255,.14);
  }
  .proof .quote-block{
    position:relative;
    min-height:220px;
  }
  .proof .quote-slide{
    position:absolute; top:var(--sp-6); left:0; right:0;
    opacity:0; visibility:hidden; transform:translateY(8px);
    transition:opacity 220ms ease, transform 220ms ease, visibility 220ms;
  }
  .proof .quote-slide.active{
    position:relative; top:auto;
    opacity:1; visibility:visible; transform:translateY(0);
  }
  .proof .quote-mark{
    display:block; font-family:var(--font-head); font-style:italic;
    font-size:3rem; line-height:1; color:var(--accent); opacity:.85; margin-bottom:var(--sp-2);
  }
  .proof .quote{
    font-family:var(--font-head); font-style:italic; font-weight:400;
    font-size:clamp(1.25rem, 2.2vw, 1.55rem);
    line-height:1.6; color:rgba(255,255,255,.72); max-width:600px; margin:0 auto;
  }
  .proof .quote-attribution{
    margin-top:var(--sp-3);
    font-family:var(--font-body); font-style:normal;
    font-size:var(--fs-eyebrow); text-transform:uppercase; letter-spacing:.14em;
    color:#8f8f8c;
  }
  .proof .quote-dots{
    display:flex; justify-content:center; gap:10px; margin-top:var(--sp-4);
  }
  .proof .quote-dots button{
    width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.28);
    padding:0; transition:background var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
  }
  .proof .quote-dots button.active{ background:var(--accent); transform:scale(1.3); }

  /* ===================== SPACING OVERRIDES ===================== */
  .section-tight-bottom{ padding-bottom:var(--sp-5); }
  .section-tight-top{ padding-top:var(--sp-5); }

  /* ===================== ABOUT TEASER ===================== */
  .about-teaser{
    max-width:var(--container); margin:0 auto;
    display:grid; grid-template-columns:0.9fr 1.1fr; gap:var(--sp-6);
    align-items:center;
  }
  .about-teaser .frame{ aspect-ratio:4/5; overflow:hidden; background:#f6f5f3; }
  .about-teaser .frame img{ width:100%; height:100%; object-fit:cover; }
  .about-copy h2{ font-size:var(--fs-h2); font-weight:400; margin-bottom:var(--sp-3); }
  .about-copy p{ font-size:var(--fs-body-lg); color:var(--muted); line-height:1.6; margin-bottom:var(--sp-4); max-width:46ch; }
  .about-copy.full p{ max-width:60ch; }
  @media (max-width:900px){
    .about-teaser{ grid-template-columns:1fr; }
  }

  /* ===================== WORK WITH ME SPLIT (photo + short copy) ===================== */
  .wwm-split{
    max-width:var(--container); margin:0 auto;
    display:grid; grid-template-columns:0.85fr 1.15fr; gap:var(--sp-6);
    align-items:stretch;
  }
  .wwm-split .frame{ aspect-ratio:1/1; overflow:hidden; background:#f6f5f3; }
  .wwm-split .frame img{ width:100%; height:100%; object-fit:cover; }
  .wwm-split .wwm-copy{ display:flex; flex-direction:column; justify-content:center; }
  .wwm-split .wwm-copy ul{ margin:var(--sp-3) 0 var(--sp-4); padding-left:1.1em; color:var(--muted); line-height:1.8; }
  .wwm-split .wwm-copy li{ margin-bottom:6px; }
  .wwm-split .wwm-copy p{ font-size:var(--fs-body-lg); color:var(--muted); line-height:1.6; max-width:48ch; }
  @media (max-width:900px){
    .wwm-split{ grid-template-columns:1fr; gap:var(--sp-4); }
  }

  /* ===================== FOOTER ===================== */
  footer{ border-top:1px solid var(--line); padding:var(--sp-6) var(--sp-4) var(--sp-4); }
  .footer-grid{
    max-width:var(--container); margin:0 auto;
    display:grid; grid-template-columns:1.3fr 1fr 1fr 1.2fr; gap:var(--sp-5);
    padding-bottom:var(--sp-5);
  }
  .footer-mark{ font-family:var(--font-head); font-style:italic; font-size:1.6rem; margin-bottom:var(--sp-2); }
  .footer-col h5{
    font-size:var(--fs-eyebrow); text-transform:uppercase; letter-spacing:.14em;
    color:var(--muted); font-weight:600; margin-bottom:var(--sp-2);
  }
  .footer-col p, .footer-col a{ font-size:var(--fs-small); color:var(--muted); line-height:1.8; display:block; }
  .footer-col a:hover{ color:var(--accent); }
  .newsletter-form{ display:flex; border-bottom:1px solid var(--ink); max-width:280px; margin-top:var(--sp-2); }
  .newsletter-form input{
    flex:1; border:none; background:none; padding:10px 0; font-size:var(--fs-small); font-family:inherit; outline:none;
  }
  .newsletter-form button{ font-size:var(--fs-small); text-transform:uppercase; letter-spacing:.08em; font-weight:600; padding:10px 0; }
  .newsletter-form button:hover{ color:var(--accent); }
  .newsletter-msg{ font-size:var(--fs-small); color:var(--accent); margin-top:8px; min-height:1em; }
  .footer-bottom{
    max-width:var(--container); margin:0 auto; border-top:1px solid var(--line);
    padding-top:var(--sp-3); display:flex; justify-content:space-between; font-size:var(--fs-eyebrow); color:var(--muted);
    flex-wrap:wrap; gap:8px;
  }

  @media (max-width:900px){
    .footer-grid{ grid-template-columns:1fr 1fr; }
  }

  /* ===================== INTERIOR PAGE HEADER ===================== */
  .page-hero{
    padding:var(--sp-6) var(--sp-4) var(--sp-5);
    max-width:var(--container); margin:0 auto;
  }
  .breadcrumb{
    font-size:var(--fs-eyebrow); text-transform:uppercase; letter-spacing:.1em;
    color:var(--muted); margin-bottom:var(--sp-3);
  }
  .breadcrumb a{ color:var(--muted); transition:color var(--dur-s) var(--ease); }
  .breadcrumb a:hover{ color:var(--accent); }
  .page-hero h1{
    font-size:var(--fs-h1); font-weight:400; font-style:italic;
    line-height:1.05; margin-bottom:var(--sp-3); max-width:14ch;
  }
  .page-hero p{ font-size:var(--fs-body-lg); color:var(--muted); line-height:1.6; max-width:56ch; }
  .page-hero .hero-ctas{ margin-top:var(--sp-4); }

  /* ===================== SPLIT TILES (2-up) ===================== */
  .split-tiles{
    max-width:var(--container); margin:0 auto;
    display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4);
  }
  .split-tiles .tile-frame{ aspect-ratio:1/1; }
  @media (max-width:700px){ .split-tiles{ grid-template-columns:1fr; } }

  /* ===================== FILTER BAR (functional) ===================== */
  .filter-bar{
    max-width:var(--container); margin:0 auto var(--sp-5);
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    padding:0 var(--sp-4) var(--sp-4); border-bottom:1px solid var(--line);
  }
  @media (max-width:640px){
    .filter-bar{ padding-left:var(--sp-2); padding-right:var(--sp-2); }
    .filter-pill{ padding-top:14px; padding-bottom:14px; }
  }
  .filter-pill{
    display:inline-flex; align-items:center; gap:8px;
    font-size:var(--fs-small); text-transform:uppercase; letter-spacing:.08em; font-weight:500;
    padding:11px 34px 11px 18px; border:1px solid var(--line); color:var(--ink);
    background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" stroke="%236f6f6c" stroke-width="1.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat right 14px center;
    -webkit-appearance:none; appearance:none;
    cursor:pointer; font-family:var(--font-body);
  }
  .filter-pill:hover{ border-color:var(--ink); }
  .filter-pill:focus{ outline:2px solid var(--accent); outline-offset:1px; }
  .filter-pill:disabled{ color:var(--muted); background-color:#f6f5f3; cursor:not-allowed; opacity:.7; }
  .filter-clear{
    font-size:var(--fs-small); text-transform:uppercase; letter-spacing:.08em; font-weight:500;
    color:var(--muted); text-decoration:underline; cursor:pointer; border:none; background:none; padding:11px 4px;
    display:none;
  }
  .filter-clear.active{ display:inline-flex; }
  .filter-note{ font-size:var(--fs-eyebrow); color:var(--muted); margin-left:auto; }
  .filter-empty{
    display:none; text-align:center; padding:var(--sp-5) var(--sp-3); color:var(--muted);
  }
  .filter-empty.show{ display:block; }
  [data-filtered-out]{ display:none !important; }

  /* Portfolio: quick-jump strip to category sections within the long gallery */
  .portfolio-jumpnav{
    max-width:var(--container); margin:0 auto var(--sp-6);
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    font-size:var(--fs-small);
    background:#f6f5f3; border:1px solid var(--line); border-radius:12px;
    padding:16px var(--sp-4);
  }
  .portfolio-jumpnav::before{
    content:"Jump to:"; text-transform:uppercase; letter-spacing:.1em; font-weight:600;
    color:var(--muted); font-size:.72rem; margin-right:2px; flex:0 0 auto;
  }
  .portfolio-jumpnav span{ display:none; }
  .portfolio-jumpnav a{
    text-transform:uppercase; letter-spacing:.05em; font-weight:600; font-size:.78rem; color:var(--ink);
    background:var(--paper); border:1px solid var(--line); border-radius:999px;
    padding:9px 16px; transition:all var(--dur-s) var(--ease);
  }
  .portfolio-jumpnav a:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
  .portfolio-jumpnav a:last-child{ color:#fff; background:var(--accent); border-color:var(--accent); margin-left:auto; }
  .portfolio-jumpnav a:last-child:hover{ background:var(--ink); border-color:var(--ink); }
  @media (max-width:640px){
    .portfolio-jumpnav::before{ width:100%; margin-bottom:4px; }
    .portfolio-jumpnav a:last-child{ margin-left:0; }
  }

  .back-to-top{ max-width:var(--container); margin:var(--sp-5) auto 0; text-align:right; }
  .back-to-top a{
    display:inline-flex; align-items:center; gap:8px;
    text-transform:uppercase; letter-spacing:.08em; font-weight:600; font-size:.8rem;
    color:#fff; background:var(--ink); border:1px solid var(--ink); border-radius:999px; padding:10px 18px;
    box-shadow:0 2px 8px rgba(17,17,17,.15);
    transition:all var(--dur-s) var(--ease);
  }
  .back-to-top a:hover{ background:var(--accent); border-color:var(--accent); box-shadow:0 4px 12px rgba(245,1,73,.28); }
  @media (max-width:640px){ .back-to-top a{ padding-top:13px; padding-bottom:13px; } }

  /* Floating "back to top" button — appears sitewide after scrolling past one
     screen height, most useful on the long Shop/Portfolio/Commissions galleries. */
  .back-to-top-fab{
    position:fixed; right:22px; bottom:22px; z-index:120;
    width:48px; height:48px; border-radius:50%;
    background:var(--ink); color:#fff; border:1px solid var(--ink);
    display:flex; align-items:center; justify-content:center;
    font-size:20px; line-height:1;
    box-shadow:0 4px 14px rgba(17,17,17,.25);
    opacity:0; visibility:hidden; transform:translateY(10px);
    transition:opacity var(--dur-s) var(--ease), visibility var(--dur-s), transform var(--dur-s) var(--ease), background var(--dur-s) var(--ease);
  }
  .back-to-top-fab.show{ opacity:1; visibility:visible; transform:translateY(0); }
  .back-to-top-fab:hover{ background:var(--accent); border-color:var(--accent); }
  @media (max-width:640px){
    .back-to-top-fab{ right:14px; bottom:14px; width:46px; height:46px; font-size:18px; }
  }

  /* ===================== PRODUCT GRID ===================== */
  .product-grid{
    max-width:var(--container); margin:0 auto;
    display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4);
  }
  .product-grid .frame{
    aspect-ratio:4/5; background:#f6f5f3; overflow:hidden; position:relative;
    display:flex; align-items:center; justify-content:center; margin-bottom:var(--sp-2);
    padding:20px; box-sizing:border-box;
  }
  .card-featured-tag{
    position:absolute; top:10px; left:10px; z-index:2;
    background:var(--ink); color:#fff; font-size:.62rem; text-transform:uppercase;
    letter-spacing:.09em; padding:5px 10px; font-weight:500;
  }
  .product-grid .frame img{ width:100%; height:100%; object-fit:contain; transition:transform 900ms var(--ease); cursor:zoom-in; }
  .product-grid .reveal:hover .frame img{ transform:scale(1.035); }
  .product-grid h4{ font-size:1rem; font-weight:500; margin-bottom:2px; }
  .product-grid .price{ font-size:var(--fs-small); color:var(--muted); }

  /* Type tag — small eyebrow label under the image, used on Portfolio to mark
     Original / Mural / Portrait / Tile / Vase / Commissioned Painting at a glance */
  .card-type-tag{
    display:block; font-family:var(--font-body); font-size:.66rem; font-weight:600;
    text-transform:uppercase; letter-spacing:.1em; color:var(--accent); margin:2px 0 3px;
  }
  /* Print / Sold status tags — used on Portfolio Originals cards, positioned like .card-type-tag */
  .card-print-tag{
    display:block; font-family:var(--font-body); font-size:.62rem; font-weight:500;
    text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:0 0 3px;
  }
  .card-sold-tag{
    display:block; font-family:var(--font-body); font-size:.62rem; font-weight:500;
    text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-style:italic; margin:0 0 3px;
  }
  @media (max-width:900px){ .product-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px){ .product-grid{ grid-template-columns:1fr; } }

  /* ===================== MULTI-PANEL SWIPE CARDS ===================== */
  .swipe-track{
    width:100%; height:100%; display:flex;
    transition:transform 450ms var(--ease);
    /* Lets the browser keep handling vertical scrolling on its own as a native
       gesture here, while our touch JS takes over only once a drag is clearly
       horizontal — without this, mobile browsers can compete with our JS for
       the gesture and the swipe misses or the page scroll stutters. */
    touch-action:pan-y;
  }
  .swipe-slide{ flex:0 0 100%; width:100%; height:100%; }
  .swipe-slide img{ width:100%; height:100%; object-fit:contain; display:block; }
  .swipe-arrow{
    position:absolute; top:50%; transform:translateY(-50%);
    width:34px; height:34px; display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.92); border:1px solid var(--line); color:var(--ink);
    font-size:18px; line-height:1; z-index:3;
    opacity:0; transition:opacity var(--dur-s) var(--ease), background var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
  }
  .swipe-card:hover .swipe-arrow{ opacity:1; }
  .swipe-arrow:hover{ background:var(--ink); color:#fff; }
  .swipe-arrow.prev{ left:10px; }
  .swipe-arrow.next{ right:10px; }
  .swipe-dots{
    position:absolute; bottom:12px; left:0; right:0; z-index:3;
    display:flex; justify-content:center; gap:7px;
  }
  .swipe-dots button{
    width:6px; height:6px; border-radius:50%; background:rgba(17,17,17,.28); padding:0;
    transition:background var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
  }
  .swipe-dots button.active{ background:var(--ink); transform:scale(1.3); }
  .swipe-set-note{
    font-size:var(--fs-eyebrow); color:var(--muted); text-transform:uppercase;
    letter-spacing:.06em; margin-bottom:6px;
  }
  .product-grid a.price{ display:inline-block; transition:color var(--dur-s) var(--ease); }
  .product-grid a.price:hover{ color:var(--accent); }
  @media (max-width:900px){
    /* Low-contrast white-on-photo arrows were hard to spot on busy images.
       Bumped to a solid dark circle with a shadow so they read clearly
       against any painting/mural photo, matching the nav's caret/close
       button styling used elsewhere on mobile. */
    .swipe-arrow{
      opacity:1;
      background:rgba(17,17,17,.6); border:none; color:#fff;
      border-radius:50%;
      box-shadow:0 2px 8px rgba(0,0,0,.25);
    }
    .swipe-arrow:active{ background:rgba(17,17,17,.85); }
  }
  @media (max-width:640px){
    .swipe-arrow{ width:44px; height:44px; }
    .swipe-arrow.prev{ left:12px; }
    .swipe-arrow.next{ right:12px; }
    .swipe-dots button{
      width:6px; height:6px; padding:16px;
      background-clip:content-box; box-sizing:content-box;
    }
    .swipe-dots{ gap:0; }
  }

  /* ===================== LIGHTBOX (click any photo to expand) ===================== */
  .lightbox-overlay{
    position:fixed; inset:0; background:rgba(17,17,17,.94); z-index:999;
    display:flex; align-items:center; justify-content:center; padding:var(--sp-5);
    opacity:0; visibility:hidden; transition:opacity var(--dur-s) var(--ease), visibility var(--dur-s);
  }
  .lightbox-overlay.open{ opacity:1; visibility:visible; }
  .lightbox-inner{ position:relative; max-width:min(1100px,92vw); max-height:88vh; display:flex; flex-direction:column; align-items:center; }
  .lightbox-inner img{ display:block; max-width:min(1100px,92vw); max-height:78vh; width:auto; height:auto; object-fit:contain; background:#fff; }
  .lightbox-caption{ color:#fff; text-align:center; margin-top:var(--sp-2); font-size:var(--fs-small); letter-spacing:.02em; }
  .lightbox-close{
    position:absolute; top:-46px; right:-6px; background:none; border:none; color:#fff;
    font-size:30px; line-height:1; cursor:pointer; padding:6px;
  }
  .lightbox-close:hover{ color:var(--accent); }
  .lightbox-arrow{
    position:absolute; top:50%; transform:translateY(-50%);
    width:46px; height:46px; display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.45); color:#fff;
    font-size:22px; line-height:1; cursor:pointer; transition:background var(--dur-s) var(--ease);
  }
  .lightbox-arrow:hover{ background:rgba(255,255,255,.22); }
  .lightbox-arrow.prev{ left:-64px; }
  .lightbox-arrow.next{ right:-64px; }
  .lightbox-arrow[hidden]{ display:none; }
  @media (max-width:900px){
    .lightbox-arrow.prev{ left:2px; }
    .lightbox-arrow.next{ right:2px; }
    .lightbox-close{ top:-40px; right:0; }
  }
  @media (max-width:640px){
    .lightbox-overlay{ padding:var(--sp-2) var(--sp-1); }
    .lightbox-inner{ max-width:calc(100vw - 40px); }
    .lightbox-inner img{ max-width:calc(100vw - 40px); }
  }

  /* ===================== CONTACT FORM ===================== */
  .contact-grid{
    max-width:var(--container); margin:0 auto;
    display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-6);
  }
  .contact-form .field{ margin-bottom:var(--sp-3); }
  .contact-form label{
    display:block; font-size:var(--fs-eyebrow); text-transform:uppercase; letter-spacing:.1em;
    color:var(--ink); font-weight:600; margin-bottom:8px;
  }
  .contact-form input, .contact-form select, .contact-form textarea{
    width:100%; border:1px solid var(--line); background:#faf9f7;
    padding:14px 16px; font-family:inherit; font-size:var(--fs-body); outline:none;
    transition:border-color var(--dur-s) var(--ease), background var(--dur-s) var(--ease);
  }
  .contact-form input:hover, .contact-form select:hover, .contact-form textarea:hover{ border-color:#c9c5bd; }
  .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{ border-color:var(--ink); background:var(--paper); }
  .contact-form textarea{ resize:vertical; min-height:120px; }
  .contact-form button[type="submit"]{ margin-top:var(--sp-2); align-self:flex-start; }
  .contact-side h3{ font-size:var(--fs-h4); font-weight:500; margin-bottom:var(--sp-2); }
  .contact-side p{ color:var(--muted); margin-bottom:var(--sp-4); line-height:1.6; }
  .contact-side a{ display:block; margin-bottom:8px; }
  @media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; gap:var(--sp-5); } }