/* ============================================
     CUTLIP SPACING & UX SYSTEM v1
     Shared foundation, all Cutlip BPM sites.
     Override in theme block below, do not edit this block directly.
     ============================================ */
  /* --- 1. RESET & BOX MODEL --- */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  /* --- 2. SPACING SCALE (8px base grid) --- */
  :root {
    --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
    --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;
    --radius-sm:4px; --radius-md:8px; --radius-lg:16px; --radius-pill:999px;
    --border-width:1px; --border-color:#e0e0e0;
    --max-width:1200px; --content-width:760px;
    --transition-fast:0.15s ease; --transition:0.25s ease; --transition-slow:0.4s ease;
    --transition-spring:cubic-bezier(0.22,0.61,0.36,1);
  }
  /* --- 3. BODY & ROOT DEFAULTS --- */
  html { font-size:16px; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
  body { line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
  /* --- 4. LAYOUT CONTAINERS --- */
  .container { width:100%; max-width:var(--max-width); margin-inline:auto; padding-inline:var(--space-6); }
  .container--narrow { max-width:var(--content-width); margin-inline:auto; padding-inline:var(--space-6); }
  /* --- 5. SECTION SPACING --- */
  section { padding-block:var(--space-9); }
  section + section { padding-top:0; }
  /* --- 6. CARDS --- */
  .card { padding:var(--space-6); border-radius:var(--radius-md); border:var(--border-width) solid var(--border-color);
    transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
  .card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,0.10); }
  .card + .card { margin-top:var(--space-4); }
  /* --- 7. GRID --- */
  .grid { display:grid; gap:var(--space-6); }
  .grid--2col { grid-template-columns:repeat(2,1fr); }
  .grid--3col { grid-template-columns:repeat(3,1fr); }
  .grid--4col { grid-template-columns:repeat(4,1fr); }
  /* --- 8. FLEX UTILITIES --- */
  .flex { display:flex; }
  .flex-center { display:flex; align-items:center; justify-content:center; }
  .flex-between { display:flex; align-items:center; justify-content:space-between; }
  .flex-col { display:flex; flex-direction:column; }
  .gap-sm { gap:var(--space-2); } .gap-md { gap:var(--space-4); } .gap-lg { gap:var(--space-6); }
  /* --- 9. TYPOGRAPHY SCALE --- */
  h1 { font-size:clamp(2rem,5vw,3.5rem); line-height:1.15; margin-bottom:var(--space-5); }
  h2 { font-size:clamp(1.5rem,4vw,2.5rem); line-height:1.2; margin-bottom:var(--space-4); }
  h3 { font-size:clamp(1.2rem,3vw,1.75rem); line-height:1.25; margin-bottom:var(--space-3); }
  h4 { font-size:1.2rem; line-height:1.3; margin-bottom:var(--space-2); }
  p { margin-bottom:var(--space-4); max-width:68ch; }
  p:last-child { margin-bottom:0; }
  /* --- 10. BUTTONS --- */
  .btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
    padding:var(--space-3) var(--space-6); border-radius:var(--radius-md); font-size:1rem; font-weight:600;
    cursor:pointer; border:var(--border-width) solid transparent; text-decoration:none; white-space:nowrap;
    position:relative; overflow:hidden;
    transition:transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition); }
  .btn::before { content:""; position:absolute; inset:0; background:rgba(255,255,255,0.08); opacity:0; transition:opacity var(--transition-fast); }
  .btn:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.14); }
  .btn:hover::before { opacity:1; }
  .btn:active { transform:translateY(0); box-shadow:none; transition-duration:0.08s; }
  .btn:focus-visible { outline:3px solid currentColor; outline-offset:3px; }
  /* --- 11. FORM ELEMENTS --- */
  input, textarea, select { width:100%; padding:var(--space-3) var(--space-4); border:var(--border-width) solid var(--border-color);
    border-radius:var(--radius-md); font-size:1rem; line-height:1.5; transition:border-color var(--transition), box-shadow var(--transition); }
  input:focus, textarea:focus, select:focus { outline:none; border-color:currentColor; box-shadow:0 0 0 3px rgba(0,0,0,0.06); }
  label { display:block; margin-bottom:var(--space-2); font-weight:500; }
  .form-group { display:flex; flex-direction:column; gap:var(--space-4); }
  /* --- 12. IMAGES --- */
  img, video { max-width:100%; height:auto; display:block; }
  /* --- 13. NAVIGATION --- */
  nav { padding-block:var(--space-4); transition:padding var(--transition-slow), background var(--transition-slow), box-shadow var(--transition-slow); }
  nav a { padding:var(--space-2) var(--space-3); text-decoration:none; position:relative; transition:color var(--transition); }
  nav a::after { content:""; position:absolute; bottom:0; left:var(--space-3); right:var(--space-3); height:1px; background:currentColor;
    transform:scaleX(0); transform-origin:left; transition:transform var(--transition) var(--transition-spring); }
  nav a:hover::after { transform:scaleX(1); }
  /* --- 14. DIVIDERS --- */
  hr { border:none; border-top:var(--border-width) solid var(--border-color); margin-block:var(--space-7); }
  /* --- 15. RESPONSIVE BREAKPOINTS --- */
  @media (max-width:1024px) { .grid--4col { grid-template-columns:repeat(2,1fr); } .grid--3col { grid-template-columns:repeat(2,1fr); } }
  @media (max-width:768px) {
    .container, .container--narrow { padding-inline:var(--space-4); }
    section { padding-block:var(--space-7); }
    .grid--2col, .grid--3col, .grid--4col { grid-template-columns:1fr; }
    .card { padding:var(--space-4); }
  }
  @media (max-width:480px) { .container, .container--narrow { padding-inline:var(--space-3); } .btn { width:100%; justify-content:center; } }
  /* --- 16. REDUCED MOTION --- */
  @media (prefers-reduced-motion:reduce) {
    *, *::before, *::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
  }
  /* --- 17. SPACING UTILITIES --- */
  .mt-1{margin-top:var(--space-1)} .mt-2{margin-top:var(--space-2)} .mt-3{margin-top:var(--space-3)} .mt-4{margin-top:var(--space-4)}
  .mt-5{margin-top:var(--space-5)} .mt-6{margin-top:var(--space-6)} .mt-7{margin-top:var(--space-7)} .mt-8{margin-top:var(--space-8)}
  .mb-1{margin-bottom:var(--space-1)} .mb-2{margin-bottom:var(--space-2)} .mb-3{margin-bottom:var(--space-3)} .mb-4{margin-bottom:var(--space-4)}
  .mb-5{margin-bottom:var(--space-5)} .mb-6{margin-bottom:var(--space-6)} .mb-7{margin-bottom:var(--space-7)} .mb-8{margin-bottom:var(--space-8)}
  .p-1{padding:var(--space-1)} .p-2{padding:var(--space-2)} .p-3{padding:var(--space-3)} .p-4{padding:var(--space-4)} .p-5{padding:var(--space-5)} .p-6{padding:var(--space-6)}
  .text-center{text-align:center} .text-left{text-align:left} .text-right{text-align:right}

  /* ============================================
     THEME OVERRIDE, J.W. TWEEDS (Aesthetic B: Boutique)
     Warm oat paper + loden green + Fraunces/Hanken
     ============================================ */
  :root {
    --bg:#F3EEE4; --bg-2:#EAE2D4; --dark:#28251F;
    --ink:#28251F; --ink-2:#423C35; --taupe:#665B4E;
    --accent:#5C6A4E; --accent-2:#434E39; --sage:#A7B58C; --accent-rgb:92,106,78;
    --gold:#AE8A3C;   /* logo gold, used for review stars */
    --border-color:#ddd2c1;            /* override base hairline */
    --line-dark:rgba(243,238,228,.16);
    --max-width:2300px;            /* override base 1200,fill wide screens */
    --font-display:"Fraunces",Georgia, serif;
    --font-body:"Hanken Grotesk",system-ui,-apple-system, sans-serif;
    --nav-h:76px; --ann-h:38px;
  }
  /* Brand tweed watermark (recreated from the J.W. Tweeds logo lattice), shows through the off-white sections only */
  body { color:var(--ink-2); font-family:var(--font-body); overflow-x:hidden;
    background-color:var(--bg);
    background-image:
      repeating-linear-gradient(45deg,  rgba(60,88,52,.042) 0 4px, transparent 4px 36px, rgba(174,138,60,.038) 36px 40px, transparent 40px 72px),
      repeating-linear-gradient(-45deg, rgba(60,88,52,.042) 0 4px, transparent 4px 36px, rgba(174,138,60,.038) 36px 40px, transparent 40px 72px),
      radial-gradient(44% 25% at 6% 4%,   rgba(255,214,74,.50),   transparent 70%),
      radial-gradient(42% 24% at 30% 9%,  rgba(126,214,196,.40),  transparent 72%),
      radial-gradient(44% 25% at 94% 10%, rgba(108,190,246,.46),  transparent 70%),
      radial-gradient(46% 25% at 55% 24%, rgba(255,152,196,.42),  transparent 72%),
      radial-gradient(44% 25% at 11% 40%, rgba(120,198,246,.44),  transparent 72%),
      radial-gradient(42% 24% at 74% 38%, rgba(196,168,246,.34),  transparent 72%),
      radial-gradient(44% 25% at 92% 52%, rgba(255,218,88,.44),   transparent 72%),
      radial-gradient(46% 25% at 36% 62%, rgba(255,158,198,.40),  transparent 72%),
      radial-gradient(42% 24% at 66% 74%, rgba(132,216,198,.36),  transparent 72%),
      radial-gradient(44% 25% at 94% 84%, rgba(120,198,246,.40),  transparent 74%),
      radial-gradient(44% 25% at 14% 88%, rgba(255,216,84,.42),   transparent 74%);
    background-position:0 0; }
  .container { padding-inline:clamp(24px,5vw,120px); }   /* roomy fluid gutters on wide screens */
  h1,h2,h3,h4 { font-family:var(--font-display); color:var(--ink); font-weight:500; letter-spacing:-0.012em; }
  em { font-style:italic; }
  ::selection { background:var(--accent); color:#fff; }

  /* each section gets its own internal padding (overrides base "section + section{padding-top:0}") */
  .sec { padding-block:clamp(64px,7vw,108px); position:relative; overflow:hidden; }
  .sec--band { background:var(--bg-2); }
  .sec--band::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:repeating-linear-gradient(45deg, rgba(40,37,31,.04) 0 1px, transparent 1px 7px); }
  .sec > .container { position:relative; z-index:1; }
  /* ---- Section heads: eyebrow + two-line display heading, arrow link opposite ---- */
  .sec__head { max-width:none; margin-bottom:clamp(30px,3.6vw,48px);
               display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-6); flex-wrap:wrap; }
  .sec__head > div { min-width:0; }
  .sec__head h2 { margin-bottom:0; font-size:clamp(2.1rem,4.4vw,3.5rem); line-height:1.06; letter-spacing:-.018em; }
  /* second line of a heading, italic in the accent colour */
  .sec__head h2 .ln2, .hscroll__head h2 .ln2, .visit h2 .ln2, .about h2 .ln2 {
    display:block; font-style:italic; color:var(--accent); font-weight:400; }
  .hscroll__head h2, .visit h2, .about h2 { font-size:clamp(2.1rem,4.4vw,3.5rem); line-height:1.06; letter-spacing:-.018em; }

  /* underlined arrow link, sits opposite the heading */
  .arrowlink { display:inline-flex; align-items:center; gap:.6rem; white-space:nowrap; flex:none;
    font-size:.72rem; font-weight:600; letter-spacing:.17em; text-transform:uppercase; color:var(--ink);
    padding-bottom:.55rem; border-bottom:1px solid var(--border-color); transition:color var(--transition), border-color var(--transition); }
  .arrowlink svg { transition:transform .35s var(--transition-spring); }
  .arrowlink:hover { color:var(--accent-2); border-color:var(--accent); }
  .arrowlink:hover svg { transform:translateX(5px); }
  .visit .arrowlink { color:var(--bg); border-color:rgba(243,238,228,.34); }
  .visit .arrowlink:hover { color:#fff; border-color:var(--sage); }
  @media (max-width:700px){ .sec__head { align-items:flex-start; gap:var(--space-4); } }
  .lead { font-size:clamp(1.05rem,1.4vw,1.2rem); }

  .eyebrow { display:inline-flex; align-items:center; gap:.7rem; font-size:.72rem; font-weight:600;
    letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:1rem; }
  a { text-decoration:none; }   /* no browser-default underlines (logo, inline links) */
  .kicker { font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2); }

  /* Button theme variants */
  .btn-primary { background:var(--accent); color:#fff; }
  .btn-primary:hover { background:var(--accent-2); box-shadow:0 8px 28px rgba(var(--accent-rgb),0.30); }
  /* hero CTAs: bright and obviously pressable */
  .btn-dark { background:linear-gradient(#627C3E,#4A6430); color:#fff; border-color:rgba(28,42,16,.5);
              box-shadow:0 6px 18px rgba(74,100,48,.36); }
  .btn-dark:hover { background:linear-gradient(#5A733A,#46602E); box-shadow:0 10px 26px rgba(74,100,48,.44); }
  .btn-ghost { background:#fff; color:var(--accent-2); border-color:var(--accent);
               box-shadow:0 6px 16px rgba(40,37,31,.16); }
  .btn-ghost:hover { background:#fff; border-color:var(--accent-2); color:var(--ink);
                     box-shadow:0 10px 24px rgba(40,37,31,.2); }
  .btn-light { background:var(--bg); color:var(--ink); }
  .btn-light:hover { background:#fff; }
  .card:hover { border-color:var(--accent); }

  /* Image placeholder fallback tint behind real photos */
  .hero__img,.floor__img,.about__img { width:100%; object-fit:cover; border-radius:var(--radius-sm);
    background:linear-gradient(150deg,#e4dac8,#d6c9b2); }

  /* --- NAV --- */
  .nav { position:fixed; inset:0 0 auto 0; z-index:60; border-bottom:1px solid transparent; }

  /* ---- Announcement bar (sits above the nav, retracts on scroll) ---- */
  .annbar { position:fixed; top:0; left:0; right:0; z-index:70; height:var(--ann-h);
            display:flex; align-items:center; background:var(--dark); color:#EFE8DA;
            transition:transform .45s var(--transition-spring); }
  .annbar.hide { transform:translateY(-100%); }
  .annbar__row { display:flex; align-items:center; justify-content:center; gap:.55rem 1rem; flex-wrap:nowrap; overflow:hidden; }
  .annbar span, .annbar a { font-size:.68rem; letter-spacing:.17em; text-transform:uppercase; white-space:nowrap; color:inherit; }
  .annbar a { border-bottom:1px solid rgba(239,232,218,.45); padding-bottom:1px; transition:border-color var(--transition), color var(--transition); }
  .annbar a:hover { color:#fff; border-color:#fff; }
  .annbar__dot { width:3px; height:3px; border-radius:50%; background:var(--sage); flex:none; }
  .nav { top:var(--ann-h); transition:top .45s var(--transition-spring), padding var(--transition-slow),
         background var(--transition-slow), box-shadow var(--transition-slow); }
  .nav.scrolled { top:0; }
  @media (max-width:720px){ .annbar__hide { display:none; } }
  @media (max-width:560px){ .annbar__hide2 { display:none; } .annbar span, .annbar a { font-size:.62rem; letter-spacing:.12em; } }
  .nav .container { padding-block:0; }
  .brand { font-family:var(--font-display); font-weight:600; font-size:1.45rem; color:var(--ink); padding:0; }
  .brand span { color:var(--accent); }
  .brand::after, .nav .btn::after { display:none; }   /* no underline on logo / CTA */
  .nav__links { display:flex; align-items:center; gap:1.4rem; }
  .nav__links a:not(.btn) { font-size:.95rem; font-weight:500; color:var(--ink-2); }
  .nav__links a:not(.btn):hover { color:var(--ink); }
  .nav .btn { padding-block:var(--space-2); }
  .nav__toggle { display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
  .nav__toggle span { width:24px; height:2px; background:var(--ink); border-radius:2px; transition:transform .3s var(--transition-spring), opacity .2s ease; }
  .nav.open .nav__toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav.open .nav__toggle span:nth-child(2){ opacity:0; }
  .nav.open .nav__toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* --- HERO --- */
  .hero { padding-top:calc(var(--nav-h) + var(--ann-h) + var(--space-3)); padding-bottom:clamp(10px,1.4vw,20px); }
  .hero__grid { display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(40px,5vw,80px); align-items:center; }
  .hero h1 { font-size:clamp(2.7rem,5.4vw,4.4rem); line-height:1.02; letter-spacing:-.022em; }
  .hero h1 em { color:var(--accent); }
  .hero__sub { font-size:clamp(1.08rem,1.5vw,1.28rem); max-width:48ch; }
  .hero__cta { display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-5); }
  .hero__trust { margin-top:var(--space-5); font-size:.9rem; color:var(--ink-2); display:inline-flex; align-items:center; gap:.5rem; }
  .hero__trust b { color:var(--accent-2); }
  /* photo sizes itself from its own aspect ratio, never stretches to the text column */
  .hero__img { aspect-ratio:4/5; width:100%; max-width:480px; height:auto; max-height:none;
               align-self:center; justify-self:end; }

  .hero { position:relative; }
  .hero__grid { position:relative; z-index:1; }


  /* Hero sits on wider gutters than the rest of the page: copy pulls in from the
     left, photo pulls in from the right. The review band's anchor uses the same
     inset so the 4.6 stays aligned with the headline above it. */
  .hero > .container { padding-inline:clamp(28px,7.5vw,168px); }

  /* ---- Hero visual: drifting photo stack + rotating wordmark badge ---- */
  .herovis { position:relative; width:100%; max-width:545px; align-self:center; justify-self:end; }
  .herovis__stage { position:relative; aspect-ratio:1/1; width:100%;
    background:#fff; padding:5px; border:2px solid #1b150f; border-radius:6px;
    box-shadow:0 16px 40px rgba(40,37,31,.30);
    animation:heroFloat 7s ease-in-out infinite; }
  .herovis__shot { position:absolute; inset:5px; width:calc(100% - 10px); height:calc(100% - 10px);
    object-fit:cover; border-radius:3px; opacity:0; transform:scale(1.04);
    transition:opacity 1.1s ease, transform 1.4s ease; }
  .herovis__shot.is-active { opacity:1; transform:scale(1); }
  @keyframes heroFloat {
    0%,100% { transform:translateY(0)    rotate(0deg); }
    50%     { transform:translateY(-14px) rotate(-.5deg); }
  }

  .herobadge { position:absolute; left:-46px; top:9%; width:132px; height:132px; z-index:3;
    display:grid; place-items:center; animation:heroFloat 7s ease-in-out infinite .6s; }
  /* soft glow behind the badge */
  .herobadge::before { content:""; position:absolute; inset:-26%; border-radius:50%;
    background:radial-gradient(circle, rgba(255,224,120,.80) 0%, rgba(255,186,206,.42) 45%, rgba(255,255,255,0) 72%);
    filter:blur(8px); }
  .herobadge__ring { position:absolute; inset:0; width:100%; height:100%;
    animation:badgeSpin 18s linear infinite; }
  .herobadge__ring text { font-family:var(--font-body); font-size:13px; font-weight:700;
    letter-spacing:.1em; fill:var(--ink); text-transform:uppercase; }
  @keyframes badgeSpin { to { transform:rotate(360deg); } }
  /* logo mark at the centre of the spinning ring */
  .herobadge__core { position:relative; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:0; width:78px; height:78px;
    border-radius:50%; background:var(--bg); border:1px solid var(--border-color);
    box-shadow:0 4px 14px rgba(40,37,31,.16); text-align:center; line-height:1; }
  .herobadge__mono { display:block; font-family:var(--font-display); font-weight:600; font-size:1.1rem;
    color:var(--ink); letter-spacing:.01em; line-height:1; }
  .herobadge__mono i { font-style:normal; color:var(--accent); }
  .herobadge__word { display:block; font-family:var(--font-display); font-style:italic; font-size:.8rem;
    color:var(--accent); line-height:1; margin-top:1px; }
  .herobadge__logo { width:60%; height:60%; object-fit:contain; }

  @media (max-width:860px){
    .herovis { max-width:none; justify-self:stretch; order:-1; }
    .herovis__stage { aspect-ratio:16/11; }
    .herobadge { left:auto; right:-10px; top:-26px; width:104px; height:104px; }
    .herobadge__ring text { font-size:16px; }
  }
  @media (prefers-reduced-motion:reduce){
    .herovis__stage, .herobadge { animation:none; }
    .herobadge__ring { animation:none; }
  }

  /* --- SHOP / FLOOR GUIDE SIGNATURE --- */
  .floor-guide { position:relative; margin-top:clamp(20px,3vw,36px); }
  .floor { display:grid; grid-template-columns:170px 1fr; gap:clamp(24px,4vw,56px); padding-bottom:clamp(22px,3vw,38px); }
  .floor:last-child { padding-bottom:0; }
  .floor__rail { position:relative; padding-left:30px; }
  .floor__node { position:absolute; left:1px; top:5px; width:13px; height:13px; border-radius:50%;
    background:var(--bg); border:1.5px solid var(--accent); box-shadow:0 0 0 5px var(--bg); z-index:2; }
  .floor__tier { display:block; font-family:var(--font-display); font-style:italic; font-size:1.5rem; color:var(--accent); line-height:1; }
  .floor__level { display:block; margin-top:.4rem; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2); }
  .floor__img { aspect-ratio:16/9; margin-top:var(--space-3); }
  .tags { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:var(--space-4); list-style:none; }
  .tags li { font-size:.76rem; color:var(--ink-2); border:1px solid var(--border-color); border-radius:var(--radius-pill); padding:.32rem .8rem; }
  @media(min-width:861px){ .floor-guide::before { content:""; position:absolute; left:7px; top:6px; bottom:6px; width:1px; background:var(--accent); opacity:.6; } }

  /* --- ABOUT --- */
  .about { display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(30px,5vw,72px); align-items:center; }
  .about__img { aspect-ratio:4/5; min-height:0; max-height:440px; align-self:stretch; }
  .stats { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); margin-top:var(--space-6);
    border-top:1px solid var(--border-color); padding-top:var(--space-5); }
  .stat__num { display:block; font-family:var(--font-display); font-size:1.9rem; color:var(--accent); line-height:1; }
  .stat__label { display:block; margin-top:.4rem; font-size:.82rem; color:var(--ink-2); }

  /* --- TESTIMONIALS --- */
  .quote { display:flex; flex-direction:column; background:var(--bg); }
  .sec--band .quote { background:rgba(243,238,228,.6); }

  /* ---- Review band: fixed rating anchor + continuously scrolling quotes ---- */
  .revband { overflow:hidden; }
  /* floats clear over the hero, no panel, no rules */
  .revband__wrap { position:relative; display:flex; align-items:center; gap:0;
                   background:none; border:0; overflow:hidden; }
  .revband__anchor { flex:none; display:flex; align-items:center; gap:var(--space-4);
    padding:var(--space-3) clamp(24px,3vw,44px) var(--space-3) clamp(24px,5vw,120px);
    border:0; background:none; }
  .revband__score { font-family:var(--font-display); font-size:clamp(2rem,3.2vw,2.7rem); line-height:1; color:var(--ink); }
  .revband__meta { display:flex; flex-direction:column; gap:.2rem; }
  .revband__meta > span:last-child { font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--taupe); white-space:nowrap; }
  .revband .stars { color:var(--gold); letter-spacing:.12em; font-size:.82rem; }
  .revband__viewport { flex:1; min-width:0; overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 16%,#000 84%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0%,#000 16%,#000 84%,transparent 100%); }
  /* quotes fade in and out on the mask above; no backdrop blur, so the
     background pattern stays crisp and its colour shows straight through */
  .revband__track { display:flex; align-items:flex-start; gap:clamp(32px,4vw,64px); width:max-content;
                    padding:var(--space-3) clamp(24px,3vw,44px);
                    animation:revscroll 46s linear infinite; }
  @keyframes revscroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
  .revquote { flex:none; width:min(46ch,74vw); }
  .revquote blockquote { font-family:var(--font-display); font-style:italic; font-size:clamp(.95rem,1.1vw,1.05rem);
                         line-height:1.45; color:var(--ink); margin:.35rem 0 .5rem;
                         display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .revquote figcaption { display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; }
  .revquote figcaption b { font-size:.86rem; color:var(--ink); }
  .revquote figcaption span { font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--taupe); }
  @media (max-width:700px){
    .revband__wrap { flex-direction:column; align-items:stretch; }
    /* in column flow the viewport is no longer width-constrained by flex:1 */
    .revband__viewport { width:100%; max-width:100%; align-self:stretch; }
    .revband__anchor { border:0; justify-content:flex-start; padding-left:clamp(24px,5vw,120px); }
    .revband__meta > span:last-child { max-width:none; }
  }
  @media (prefers-reduced-motion:reduce){
    .revband__track { animation:none; overflow-x:auto; width:auto; }
    .revband__viewport { overflow-x:auto; }
  }
  .stars { color:var(--gold); letter-spacing:.12em; margin-bottom:var(--space-3); }
  .quote blockquote { font-family:var(--font-display); font-style:italic; font-size:1.1rem; line-height:1.5; color:var(--ink); margin-bottom:var(--space-4); }
  .quote figcaption { margin-top:auto; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); }

  /* --- VISIT (dark) --- */
  .visit { background:var(--dark); color:#d8d1c4; }
  .visit h2 { color:var(--bg); } .visit .eyebrow { color:var(--sage); }
  .visit__grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:stretch; }
  .hours { width:100%; border-collapse:collapse; margin:var(--space-4) 0 var(--space-2); }
  .hours td { padding:.7rem 0; border-bottom:1px solid var(--line-dark); }
  .hours td:last-child { text-align:right; color:var(--bg); font-variant-numeric:tabular-nums; }
  .hours tr.active td { color:#fff; font-weight:600; }
  .hours tr.active td:first-child { color:var(--sage); }
  .hours tr.active td:first-child::before { content:"Today · "; color:var(--sage); }
  .visit__note { font-size:.86rem; color:#a79e8f; margin:.4rem 0 var(--space-5); }
  .visit__addr { font-style:normal; line-height:1.9; margin-bottom:var(--space-4); }
  /* links inside the dark Visit panel must not fall back to browser blue */
  .visit a:not(.btn):not(.arrowlink) { color:var(--sage); border-bottom:1px solid rgba(167,181,140,.38);
                                        padding-bottom:1px; transition:color var(--transition), border-color var(--transition); }
  .visit a:not(.btn):not(.arrowlink):hover { color:#fff; border-color:#fff; }
  .visit__addr a:hover { color:#fff; }
  .attrs { list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 var(--space-5); }
  .attrs li { font-size:.76rem; color:#cfc7b8; border:1px solid var(--line-dark); border-radius:var(--radius-pill); padding:.34rem .8rem; }
  .map { position:relative; min-height:400px; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--line-dark); }
  .map iframe { position:absolute; inset:0; width:100%; height:100%; border:0; filter:saturate(.92); }
  .map__fallback { position:absolute; inset:0; display:grid; place-content:center; text-align:center; gap:.4rem;
    background:linear-gradient(160deg,#2f2b24,#211e18); color:#a79e8f; padding:2rem; }
  .map__pin { width:16px; height:16px; border-radius:50%; background:var(--sage); margin:0 auto .6rem; box-shadow:0 0 0 7px rgba(167,181,140,.18); }

  /* --- FAQ ACCORDION --- */
  .faq { max-width:860px; }
  .faq__item { border-bottom:1px solid var(--border-color); }
  .faq__item:first-child { border-top:1px solid var(--border-color); }
  .faq__btn { width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--space-5);
    background:none; border:0; cursor:pointer; text-align:left; padding:var(--space-5) 0;
    font-family:var(--font-display); font-size:clamp(1.1rem,1.6vw,1.3rem); font-weight:500; color:var(--ink); transition:color var(--transition); }
  .faq__btn:hover { color:var(--accent-2); }
  .faq__btn:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
  .faq__icon { position:relative; flex:none; width:18px; height:18px; }
  .faq__icon::before,.faq__icon::after { content:""; position:absolute; background:var(--accent); border-radius:2px; transition:transform .3s var(--transition-spring), opacity .3s ease; }
  .faq__icon::before { left:0; top:8px; width:18px; height:2px; }
  .faq__icon::after { left:8px; top:0; width:2px; height:18px; }
  .faq__item.is-open .faq__icon::after { transform:scaleY(0); opacity:0; }
  .faq__a { max-height:0; overflow:hidden; transition:max-height var(--transition-slow); }
  .faq__a-inner { padding:0 0 var(--space-5); color:var(--ink-2); }

  /* --- CONTACT --- */
  .callbox { background:var(--bg-2); border:1px solid var(--border-color); border-radius:var(--radius-md); padding:var(--space-5) var(--space-6); margin-top:var(--space-5); }
  .callbox .kicker { color:var(--accent); }
  .callbox a { display:inline-block; margin-top:.4rem; font-family:var(--font-display); font-size:2rem; color:var(--ink); }
  .callbox a:hover { color:var(--accent-2); }
  .form__msg { font-weight:600; color:var(--accent-2); min-height:1.2em; }
  .form__note { font-size:.8rem; color:var(--ink-2); }

  /* --- FOOTER --- */
  .footer { background:var(--bg-2); border-top:1px solid var(--border-color); padding-block:clamp(54px,8vw,82px) var(--space-5); }
  .footer__grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--space-7); }
  .footer .brand { display:inline-block; margin-bottom:var(--space-3); }
  .footer h2 { font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); font-family:var(--font-body); font-weight:700; margin-bottom:var(--space-3); }
  .footer address { font-style:normal; line-height:1.95; }
  .footer a:hover { color:var(--accent-2); }
  .footer .small { font-size:.93rem; }
  .fb-link { display:inline-flex; align-items:center; gap:.5rem; margin-top:.6rem; }
  .footer__bottom { margin-top:clamp(34px,5vw,52px); padding-top:var(--space-4); border-top:1px solid var(--border-color);
    display:flex; flex-wrap:wrap; gap:var(--space-3); justify-content:space-between; font-size:.84rem; color:var(--ink-2); }

  /* ============================================
     ANIMATION SYSTEM (v4)
     ============================================ */
  /* elements rise, un-blur and fade in together, quick */
  .reveal { opacity:0; transform:translateY(18px); filter:blur(9px);
    transition:opacity .44s var(--transition-spring), transform .44s var(--transition-spring), filter .44s var(--transition-spring); }
  .reveal.in-view { opacity:1; transform:translateY(0); filter:blur(0); }
  .d1{transition-delay:.05s} .d2{transition-delay:.1s} .d3{transition-delay:.15s} .d4{transition-delay:.2s} .d5{transition-delay:.25s}
  .reveal-fade { opacity:0; filter:blur(9px); transition:opacity .5s ease, filter .5s ease; }
  .reveal-fade.in-view { opacity:1; filter:blur(0); }
  .no-js .reveal, .no-js .reveal-fade { opacity:1; transform:none; filter:none; }

  /* solid tint instead of a live backdrop-filter: identical look, no per-frame blur */
  .nav.scrolled { padding-block:var(--space-2); background:rgba(243,238,228,0.97);
    border-color:var(--border-color); box-shadow:0 1px 0 rgba(0,0,0,0.08); }

  @keyframes fadeUp { from { opacity:0; transform:translateY(16px); filter:blur(9px); }
                        to { opacity:1; transform:translateY(0);    filter:blur(0); } }
  .hero-eyebrow  { animation:fadeUp .46s var(--transition-spring) .05s both; }
  .hero-headline { animation:fadeUp .52s var(--transition-spring) .12s both; }
  .hero-subhead  { animation:fadeUp .5s  var(--transition-spring) .2s  both; }
  .hero-cta      { animation:fadeUp .46s var(--transition-spring) .28s both; }
  .hero-image    { animation:fadeUp .58s var(--transition-spring) .16s both; }

  /* --- responsive component tweaks --- */
  @media (max-width:860px) {
    .nav__toggle { display:flex; }
    .hero__grid, .about, .visit__grid { grid-template-columns:1fr; }
    .hero__img, .about__media { order:-1; aspect-ratio:16/10; min-height:0; max-height:none; }
    .floor { grid-template-columns:1fr; gap:var(--space-3); }
    .floor__rail { padding-left:26px; display:flex; align-items:baseline; gap:.7rem; }
    .floor__tier { font-size:1.2rem; } .floor__level { margin-top:0; } .floor__node { top:7px; }
  }
  @media (max-width:560px){ .stats { grid-template-columns:1fr 1fr; } }
  @media (max-width:860px){
    /* footer was staying 3-up and running the Hours column off the screen */
    .footer__grid { grid-template-columns:1fr; gap:var(--space-6); }
    .footer__bottom { flex-direction:column; align-items:flex-start; gap:var(--space-2); }
    /* ring text was drawn at a smaller radius than the centre disc, so it ran
       underneath it: widen the badge and shrink the disc to open a clear track */
    .herobadge { width:122px; height:122px; }
    .herobadge__core { width:56px; height:56px; }
    .herobadge__ring text { font-size:17px; letter-spacing:.08em; }
    .herobadge__mono { font-size:.92rem; }
    .herobadge__word { font-size:.68rem; }
  }
  @media (max-width:860px){ html { overflow-x:clip; } }

  /* ============================================
     PREMIUM ELEVATION LAYER
     Patterns adapted from Sid Mashburn, Todd Snyder, Sézane, Aesop.
     ============================================ */
  /* Hero signals: rating chip + live open/closed status */
  /* plain text signals separated by hairlines, no pills */
  .hero__signals { display:flex; flex-wrap:wrap; align-items:center; gap:.45rem 1rem; margin-top:var(--space-4);
                   font-size:.82rem; color:var(--ink-2); }
  .hero__signals > span { display:inline-flex; align-items:center; gap:.4rem; position:relative; }
  .hero__signals > span + span::before { content:""; position:absolute; left:-.62rem; top:.15em; bottom:.15em;
                                          width:1px; background:var(--border-color); }
  .hero__signals b { color:var(--ink); font-weight:700; }
  .hero__signals .stars { color:var(--gold); margin:0; letter-spacing:0; }
  .hero__reviews { list-style:none; margin:var(--space-5) 0 0; padding:0; display:grid; gap:var(--space-4);
                   grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); max-width:640px; }
  .hero__grid > * { min-width:0; }
  .hero__reviews li { font-family:var(--font-display); font-style:italic; font-size:.95rem; line-height:1.45; color:var(--ink);
                      border-left:2px solid var(--sage); padding-left:.8rem; }
  .hero__reviews li span { display:block; margin-top:.3rem; font-style:normal; font-family:var(--font-body); font-size:.68rem;
                           letter-spacing:.09em; text-transform:uppercase; color:var(--accent-2); }
  .nav__fb { display:inline-flex; align-items:center; color:var(--ink-2); transition:color var(--transition); }
  .nav__fb:hover { color:var(--accent-2); }
  .nav__fb::after { display:none; }
  .chip { display:inline-flex; align-items:center; gap:.45rem; font-size:.82rem; font-weight:600; line-height:1;
    padding:.5rem .8rem; border-radius:var(--radius-pill); border:1px solid var(--border-color); background:var(--bg); color:var(--ink); }
  .chip .stars { color:var(--gold); margin:0; letter-spacing:0; }
  .chip b { font-weight:700; }
  /* plain text status, no pill, no indicator dot */
  .status { display:inline-flex; align-items:center; font-weight:600; }
  .status.is-open { color:var(--accent-2); }
  .status.is-closed { color:var(--ink-2); }
  .visit .status { color:var(--sage); }

  /* Brand / credibility strip */
  .brandstrip { border-block:1px solid var(--border-color); background:var(--bg); }
  .brandstrip .row { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.6rem 1.6rem; padding-block:var(--space-4); }
  .brandstrip span { font-size:.73rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); }
  .brandstrip b { color:var(--accent-2); font-weight:700; }
  .brandstrip i.dot { width:4px; height:4px; border-radius:50%; background:var(--border-color); display:inline-block; }

  /* Editorial image frame + subtle hover zoom */
  .media { position:relative; overflow:hidden; border-radius:var(--radius-sm);
    background:linear-gradient(150deg,#e4dac8,#d6c9b2); }
  .media img { width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .8s var(--transition-spring); }
  .media:hover img { transform:scale(1.045); }
  .media::after { content:""; position:absolute; inset:0; border:1px solid rgba(40,37,31,.07); border-radius:inherit; pointer-events:none; }
  .floor__media { aspect-ratio:16/10; max-width:min(100%,620px); margin-top:var(--space-3); }
  .about__media { aspect-ratio:4/5; max-height:min(78vh,680px); align-self:stretch; }

  /* Sticky mobile call / directions bar (high-intent, local) */
  .mobilebar { position:fixed; left:0; right:0; bottom:0; z-index:55; display:none;
    grid-template-columns:1fr 1fr; gap:1px; background:var(--border-color); box-shadow:0 -6px 20px rgba(40,37,31,.14); }
  .mobilebar a { display:flex; align-items:center; justify-content:center; gap:.5rem; padding:.95rem 1rem;
    background:var(--bg); font-weight:600; font-size:.95rem; color:var(--ink); }
  .mobilebar a.primary { background:var(--accent); color:#fff; }
  .mobilebar svg { width:18px; height:18px; }
  @media (max-width:860px){ .mobilebar { display:grid; } body { padding-bottom:58px; } }

  /* detail polish */
  .eyebrow { font-weight:700; }
  .btn { letter-spacing:.01em; }

  /* === Final polish: glossy popped buttons + framed photos === */
  .btn { border:1.5px solid rgba(16,12,8,.55); box-shadow:0 5px 14px rgba(40,37,31,.18); }
  .btn::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
    background:linear-gradient(rgba(255,255,255,.30), rgba(255,255,255,0) 52%);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.28); }
  .btn:active { box-shadow:0 2px 6px rgba(40,37,31,.22); transform:translateY(0); }

  /* Framed photos, dark border, white mat, drop shadow so they stand out */
  /* Graceful fallback: if a photo ever fails to load, show the tweed pattern
     instead of sprawling alt text. Applied by the img-error handler below. */
  img.img-broken {
    color:transparent !important; font-size:0 !important; text-indent:-9999px;
    background-color:var(--bg-2) !important;
    background-image:
      repeating-linear-gradient(45deg,  rgba(60,88,52,.13) 0 4px, transparent 4px 36px, rgba(174,138,60,.11) 36px 40px, transparent 40px 72px),
      repeating-linear-gradient(-45deg, rgba(60,88,52,.13) 0 4px, transparent 4px 36px, rgba(174,138,60,.11) 36px 40px, transparent 40px 72px) !important;
  }

  .hero__img, .media, .hslide { background:#fff; padding:5px; border:2px solid #1b150f;
    box-shadow:0 16px 40px rgba(40,37,31,.30); border-radius:6px; }
  .hslide { box-shadow:0 26px 60px rgba(40,37,31,.42), 0 8px 18px rgba(40,37,31,.26); }
  .media img, .hslide img { border-radius:3px; }
  .media::after { display:none; }

  /* ===== Scroll-driven clothing coverflow (center slide largest, sides smaller) ===== */
  /* padding-block:0 is required: base CSS gives sections 96px of padding, which
     sits inside the height we set and makes position:sticky release early. */
  .hscroll { position:relative; padding-block:0; }
  /* The panel carries its own backdrop. Because it is pinned, that backdrop
     holds still while the photos travel sideways, with none of the per-frame
     repainting cost that background-attachment:fixed puts on the whole page. */
  .hscroll__pin { position:sticky; top:0; height:100vh; overflow:hidden; display:flex; flex-direction:column; justify-content:center;
    background-color:var(--bg);
    background-image:
      repeating-linear-gradient(45deg,  rgba(60,88,52,.042) 0 4px, transparent 4px 36px, rgba(174,138,60,.038) 36px 40px, transparent 40px 72px),
      repeating-linear-gradient(-45deg, rgba(60,88,52,.042) 0 4px, transparent 4px 36px, rgba(174,138,60,.038) 36px 40px, transparent 40px 72px),
      radial-gradient(52% 42% at 7% 10%,  rgba(255,214,74,.44),  transparent 70%),
      radial-gradient(48% 40% at 93% 18%, rgba(108,190,246,.42), transparent 72%),
      radial-gradient(50% 42% at 28% 90%, rgba(255,152,196,.36), transparent 72%),
      radial-gradient(46% 38% at 80% 86%, rgba(126,214,196,.34), transparent 72%); }
  /* matches the sliver revealed while the panel glides in and out */
  .hscroll { background-color:var(--bg); }
  .hscroll__head { margin-bottom:clamp(16px,2.4vw,30px); }
  .hscroll__head h2 { margin-bottom:0; }
  .hscroll__viewport { overflow:hidden; width:100%; }
  .hscroll__track { display:flex; align-items:center; gap:clamp(14px,1.5vw,26px); will-change:transform; }
  .hslide { flex:0 0 auto; position:relative; width:clamp(260px,30vw,480px); height:min(64vh,620px);
    border-radius:var(--radius-md); overflow:hidden; transform-origin:center center;
    background:linear-gradient(150deg,#e4dac8,#d6c9b2); }
  .hslide img { width:100%; height:100%; object-fit:cover; display:block; }
  .hslide figcaption { position:absolute; left:0; right:0; bottom:0; padding:1.1rem 1.2rem;
    color:#fff; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
    background:linear-gradient(transparent, rgba(40,37,31,.55) 35%, rgba(40,37,31,.92)); text-shadow:0 1px 2px rgba(0,0,0,.6); }
  .hslide--end { display:grid; place-items:center; background:var(--bg-2); border:1px solid var(--border-color); box-shadow:0 20px 48px rgba(40,37,31,.12); }
  .hslide--end .inner { text-align:center; padding:1.5rem; }
  .hslide--end h3 { margin-bottom:.7rem; }
  .hscroll__hint { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2); opacity:.7; }
  @media (max-width:860px), (prefers-reduced-motion:reduce){
    .hscroll { height:auto !important; }
    .hscroll__pin { position:static; height:auto; padding-block:clamp(40px,8vw,64px); }
    .hscroll__viewport { overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; }
    .hscroll__track { transform:none !important; padding:0 6vw var(--space-3) !important; gap:var(--space-3); }
    .hslide { scroll-snap-align:center; width:78vw; height:min(70vh,520px); transform:none !important; opacity:1 !important; }
    .hscroll__hint { display:none; }
  }
  /* keep the 4.6 aligned under the hero headline's wider gutter */
  .revband__anchor { padding-left:clamp(28px,7.5vw,168px); }

  /* ============================================
     MULTI-PAGE ADDITIONS
     ============================================ */
  /* home page cards linking to each section page */
  .explorecard { display:flex; flex-direction:column; gap:.5rem; background:var(--bg);
    border-color:var(--border-color); text-decoration:none; }
  .explorecard__no { font-family:var(--font-display); font-style:italic; font-size:1.4rem; color:var(--accent); line-height:1; }
  .explorecard h3 { margin-bottom:0; }
  .explorecard p { color:var(--ink-2); margin-bottom:0; }
  .explorecard__go { margin-top:auto; padding-top:var(--space-4); font-size:.72rem; font-weight:600;
    letter-spacing:.16em; text-transform:uppercase; color:var(--accent-2); }
  .explorecard:hover .explorecard__go { color:var(--ink); }

  /* current page marker in the desktop nav */
  .nav__links a[aria-current="page"] { color:var(--accent-2); font-weight:700; }


  /* ---- FAQ page ---- */
/* ---- FAQ PAGE LAYOUT ---- */
  .faq-head { padding:calc(var(--nav-h) + var(--space-8)) 0 var(--space-6); }
.faq-head h1 { font-size:clamp(2.4rem,5.4vw,3.8rem); margin:.1em 0 var(--space-4); }
.faq-wrap { padding-bottom:clamp(48px,7vw,90px); }
.qa-list { max-width:1280px; border-top:1px solid var(--border-color); }
.qa { display:grid; grid-template-columns:auto 1fr; gap:clamp(16px,3vw,40px); padding:clamp(24px,3.4vw,40px) 0; border-bottom:1px solid var(--border-color); }
.qa__no { font-family:var(--font-display); font-style:italic; font-size:1.5rem; color:var(--accent); line-height:1; padding-top:.15rem; }
.qa__q { font-size:clamp(1.2rem,2vw,1.55rem); margin-bottom:var(--space-3); }
.qa__a { color:var(--ink-2); max-width:66ch; }
.qa__a a { color:var(--accent-2); font-weight:600; }
.qa__a a:hover { text-decoration:underline; }
/* closing CTA */
  .faq-cta { max-width:860px; margin-top:clamp(36px,5vw,56px); background:var(--bg-2); border:1px solid var(--border-color);
    border-radius:var(--radius-md); padding:clamp(28px,4vw,44px); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-5); }
.faq-cta h2 { font-size:clamp(1.4rem,2.4vw,1.9rem); margin-bottom:.3rem; }
.faq-cta p { color:var(--ink-2); margin:0; }
.faq-cta .actions { display:flex; flex-wrap:wrap; gap:var(--space-3); }
.qa { grid-template-columns:1fr; gap:var(--space-2); }
.qa__no { font-size:1.2rem; }
.faq-head { padding-top:calc(var(--nav-h) + var(--ann-h) + var(--space-8)); }
.faq-head h1 { font-size:clamp(2.6rem,5.8vw,4.2rem); line-height:1.04; letter-spacing:-.02em; }
/* eyebrow + arrow link head */
  .faq-head__row { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-6); flex-wrap:wrap; }
.qa__no { color:var(--accent-2); }
.faq-head__row { align-items:flex-start; gap:var(--space-4); }

  /* ---- Shop page photo gallery ---- */
  .gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(270px,100%),1fr));
             gap:clamp(18px,2.4vw,34px); }
  .gtile { margin:0; }
  .gtile .media { aspect-ratio:4/5; }
  .gtile figcaption { margin-top:.7rem; font-size:.72rem; font-weight:600; letter-spacing:.15em;
                      text-transform:uppercase; color:var(--taupe); }

  /* ---- Visit page: light panel so the nav type stays readable at the top ---- */
  .visit { background:var(--bg-2); color:var(--ink-2); }
  .visit h2 { color:var(--ink); }
  .visit .eyebrow { color:var(--accent); }
  .visit .status { color:var(--accent-2); }
  .visit__note { color:var(--taupe); }
  .hours td { border-bottom:1px solid var(--border-color); }
  .hours td:last-child { color:var(--ink); }
  .hours tr.active td { color:var(--ink); }
  .hours tr.active td:first-child { color:var(--accent-2); }
  .hours tr.active td:first-child::before { color:var(--accent-2); }
  .visit a:not(.btn):not(.arrowlink) { color:var(--accent-2); border-bottom-color:rgba(67,78,57,.35); }
  .visit a:not(.btn):not(.arrowlink):hover { color:var(--ink); border-bottom-color:var(--accent); }
  .visit .arrowlink { color:var(--ink); border-color:var(--border-color); }
  .visit .arrowlink:hover { color:var(--accent-2); border-color:var(--accent); }
  .attrs li { color:var(--ink-2); border:1px solid var(--border-color); }
  .visit .map { border:1px solid var(--border-color); }
  .visit .btn-light { background:var(--accent); color:#fff; }
  .visit .btn-light:hover { background:var(--accent-2); }
  /* map placeholder sits on light now */
  .map--light .map__fallback, .visit .map__fallback {
    background:linear-gradient(160deg,#ece4d6,#e0d7c6); color:var(--taupe); }
  .map--light .map__fallback strong, .visit .map__fallback strong { color:var(--ink); }
  .map--light { min-height:clamp(320px,42vw,460px); border:1px solid var(--border-color); }

  /* inner pages open straight into a section, so clear the fixed header
     (the home hero and the FAQ head already carry their own allowance) */
  main > .sec:first-child { padding-top:calc(var(--nav-h) + var(--ann-h) + var(--space-7)); }

  /* ---- Shop gallery: compact uniform tiles so more fit on screen ---- */
  .lookbook { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr));
              gap:clamp(14px,1.5vw,22px); }
  .lb__item { margin:0; }
  .lb__item .media { aspect-ratio:3/4; }
  .lb__item img { width:100%; height:100%; object-fit:cover; display:block; }
  .lb__item figcaption { margin-top:.5rem; line-height:1.35; }
  .lb__item figcaption b { display:block; font-size:.74rem; font-weight:700; letter-spacing:.12em;
                           text-transform:uppercase; color:var(--ink); }
  .lb__item figcaption span { display:block; margin-top:.15rem; font-size:.82rem; color:var(--taupe); }
  .lb-jump { display:flex; flex-wrap:wrap; gap:var(--space-3); }
  .lb-jump .btn { padding-block:var(--space-2); }
  @media (max-width:520px){ .lookbook { grid-template-columns:repeat(2,1fr); gap:14px; }
                            .lb__item figcaption span { font-size:.76rem; } }

  /* ---- Home "find the shop": details on the left, tighter map on the right ---- */
  .findus { display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
            gap:clamp(28px,4vw,72px); align-items:center; }
  .findus h2 { margin-bottom:var(--space-4); }
  .findus__addr { font-size:1.05rem; color:var(--ink); margin-bottom:var(--space-4); }
  .findus__lines { display:grid; grid-template-columns:auto 1fr; gap:.35rem 1.1rem; margin-bottom:var(--space-5); }
  .findus__lines dt { font-size:.68rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
                      color:var(--taupe); padding-top:.2rem; }
  .findus__lines dd { margin:0; font-size:1.02rem; }
  .findus__lines a { color:var(--accent-2); border-bottom:1px solid rgba(67,78,57,.3); padding-bottom:1px; }
  .findus__lines a:hover { color:var(--ink); border-color:var(--accent); }
  .findus__cta { display:flex; flex-wrap:wrap; gap:var(--space-3); }
  .findus .map { min-height:0; aspect-ratio:4/3; max-height:440px; }
  @media (max-width:860px){
    .findus { grid-template-columns:1fr; }
    .findus .map { aspect-ratio:4/3; }
  }

  /* .ln2 is a purpose-built class; make it work outside section heads too */
  .ln2 { display:block; font-style:italic; color:var(--accent); font-weight:400; }

  /* Shop page opens straight into the photos, so its header stays compact */
  .shop-head { padding-bottom:var(--space-5); }
  .shop-head h1 { font-size:clamp(2.4rem,5vw,4rem); line-height:1.04; letter-spacing:-.02em;
                  margin-bottom:var(--space-5); }
  .shop-head + .sec { padding-top:0; }

  /* Shop page header: copy left, a real shot of the shop on the right */
  .shop-head__grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
                     gap:clamp(28px,4vw,72px); align-items:center; }
  .shop-head__media { aspect-ratio:4/3; width:100%; max-width:520px; justify-self:end; }
  .shop-head__media img { width:100%; height:100%; object-fit:cover; display:block; }
  @media (max-width:860px){
    .shop-head__grid { grid-template-columns:1fr; }
    .shop-head__media { max-width:none; justify-self:stretch; order:-1; aspect-ratio:16/10; }
  }


  /* ============================================
     ACCESSIBILITY (WCAG 2.1 AA)
     ============================================ */
  /* screen-reader-only text, e.g. "(opens in new tab)" */
  .sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
             clip:rect(0,0,0,0); white-space:nowrap; border:0; }

  /* skip link: invisible until it receives keyboard focus */
  .skip { position:absolute; left:var(--space-4); top:-100px; z-index:100; padding:var(--space-3) var(--space-5);
          background:var(--ink); color:#fff; border-radius:var(--radius-md); font-weight:700;
          transition:top .15s ease; }
  .skip:focus { top:var(--space-4); outline:3px solid var(--gold); outline-offset:2px; }

  /* one strong, consistent keyboard focus ring everywhere */
  a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
    outline:3px solid var(--accent-2); outline-offset:3px; border-radius:4px; }
  .visit a:focus-visible { outline-color:var(--ink); }
  .btn:focus-visible { outline:3px solid var(--ink); outline-offset:3px; }

  /* inline contact links get a taller hit area (24px minimum target) */
  .footer address a, .visit__addr a, .findus__lines a, .annbar a { display:inline-block; padding-block:.2rem; }

  /* pause control for the auto-moving content (WCAG 2.2.2) */
  .motion-btn { position:fixed; left:var(--space-4); bottom:var(--space-4); z-index:80;
    display:inline-flex; align-items:center; gap:.5rem; padding:.55rem .9rem;
    background:var(--bg); color:var(--ink); border:1.5px solid var(--ink); border-radius:var(--radius-pill);
    font-size:.78rem; font-weight:700; letter-spacing:.06em; cursor:pointer;
    box-shadow:0 6px 18px rgba(40,37,31,.22); }
  .motion-btn svg { width:14px; height:14px; }
  .motion-btn .on { display:none; }
  body.motion-off .motion-btn .off { display:none; }
  body.motion-off .motion-btn .on { display:inline; }
  @media (max-width:860px){ .motion-btn { bottom:calc(58px + var(--space-3)); } }
  /* when paused, every looping animation stops and the badge/photo stay put */
  body.motion-off *, body.motion-off *::before, body.motion-off *::after {
    animation-play-state:paused !important; }
  body.motion-off .revband__track { animation:none !important; }
  body.motion-off .herovis__shot { transition:none !important; }

  /* hours table: a real caption for assistive tech, visually hidden */
  .hours caption { text-align:left; }
  .hours th { font-weight:inherit; text-align:left; padding:.7rem 0; border-bottom:1px solid var(--border-color); }
  .hours tr.active th { color:var(--accent-2); font-weight:600; }
  .hours tr.active th::before { content:"Today \00b7 "; color:var(--accent-2); }
  .page-h1 { font-size:clamp(2.1rem,4.4vw,3.5rem); line-height:1.06; letter-spacing:-.018em; margin-bottom:var(--space-4); }
  .visit h1 { color:var(--ink); }
  .page-h1 { font-size:clamp(2.1rem,4.4vw,3.5rem); line-height:1.06; letter-spacing:-.018em; margin-bottom:var(--space-4); }
  .visit h1 { color:var(--ink); }
  .footer__bottom a, .qa__a a { display:inline-block; padding-block:.15rem; }

  /* ---- Mobile bar: one known height, and everything that stacks on it uses it ---- */
  :root { --mobilebar-h:60px; }
  @media (max-width:860px){
    .mobilebar a { padding:.6rem 1rem; min-height:var(--mobilebar-h); }
    body { padding-bottom:var(--mobilebar-h); }
    .motion-btn { bottom:calc(var(--mobilebar-h) + var(--space-3)); }
  }

  /* ---- Landscape phones: the three fixed bars were eating half the screen ----
     Drop the announcement bar and the call bar (phone + directions are still in
     the menu and on every page), and tighten the top offset. */
  @media (max-width:1000px) and (max-height:500px) and (orientation:landscape){
    .annbar, .mobilebar { display:none; }
    .nav { top:0; }
    body { padding-bottom:0; }
    .hero { padding-top:calc(var(--nav-h) + var(--space-3)); }
    main > .sec:first-child { padding-top:calc(var(--nav-h) + var(--space-5)); }
    .faq-head { padding-top:calc(var(--nav-h) + var(--space-5)); }
    .motion-btn { bottom:var(--space-3); }
  }
  /* the base sheet pads every <nav>; the call bar must not inherit that */
  .mobilebar { padding:0; }

  /* on phones the labelled pill covered body copy; an icon-only 44px circle
     stays out of the way while keeping the accessible name via aria-label */
  @media (max-width:860px){
    .motion-btn { width:44px; height:44px; padding:0; justify-content:center; border-radius:50%;
                  left:var(--space-3); box-shadow:0 4px 12px rgba(40,37,31,.22); }
    .motion-btn span { display:none !important; }
    .motion-btn svg { width:16px; height:16px; }
  }


  /* ============================================
     MOBILE MENU: full-screen sheet
     ============================================ */
  @media (max-width:860px){
    .nav .container { position:relative; z-index:2; }      /* brand + toggle stay above the sheet */
    .nav__links {
      position:fixed; inset:0; z-index:1;
      display:flex; flex-direction:column; justify-content:center; align-items:stretch; gap:0;
      padding:calc(var(--nav-h) + var(--ann-h)) 8vw calc(var(--mobilebar-h) + var(--space-6));
      background-color:var(--bg);
      background-image:
        repeating-linear-gradient(45deg,  rgba(60,88,52,.05) 0 4px, transparent 4px 36px, rgba(174,138,60,.045) 36px 40px, transparent 40px 72px),
        repeating-linear-gradient(-45deg, rgba(60,88,52,.05) 0 4px, transparent 4px 36px, rgba(174,138,60,.045) 36px 40px, transparent 40px 72px),
        radial-gradient(60% 40% at 10% 8%,  rgba(255,214,74,.35),  transparent 70%),
        radial-gradient(60% 40% at 90% 92%, rgba(108,190,246,.32), transparent 70%);
      opacity:0; visibility:hidden; transform:translateY(-10px);
      transition:opacity .26s ease, transform .34s var(--transition-spring), visibility 0s linear .34s;
    }
    .nav.open .nav__links { opacity:1; visibility:visible; transform:none;
      transition:opacity .26s ease, transform .34s var(--transition-spring), visibility 0s; }

    /* page links: big display type, hairline between, staggered in */
    .nav__links a:not(.btn):not(.nav__fb) {
      display:flex; align-items:center; justify-content:space-between;
      padding:.95rem 0; border-bottom:1px solid var(--border-color); background:none; border-radius:0;
      font-family:var(--font-display); font-weight:500; font-size:clamp(1.7rem,7vw,2.2rem); letter-spacing:-.01em;
      color:var(--ink); opacity:0; transform:translateY(12px);
      transition:opacity .3s ease, transform .38s var(--transition-spring), color var(--transition); }
    .nav.open .nav__links a:not(.btn):not(.nav__fb) { opacity:1; transform:none; }
    .nav.open .nav__links a:nth-child(1){ transition-delay:.08s } .nav.open .nav__links a:nth-child(2){ transition-delay:.13s }
    .nav.open .nav__links a:nth-child(3){ transition-delay:.18s } .nav.open .nav__links a:nth-child(4){ transition-delay:.23s }
    .nav.open .nav__links a:nth-child(5){ transition-delay:.28s } .nav.open .nav__links a:nth-child(6){ transition-delay:.33s }
    .nav.open .nav__links a:nth-child(7){ transition-delay:.36s }
    .nav__links a:not(.btn):not(.nav__fb)::after { content:"\2192"; position:static; width:auto; height:auto; background:none;
      font-family:var(--font-body); font-size:1.1rem; color:var(--accent); transform:none; transition:transform .25s ease; }
    .nav__links a:not(.btn):not(.nav__fb):active::after { transform:translateX(4px); }
    .nav__links a[aria-current="page"] { color:var(--accent-2); font-style:italic; }
    .nav__links a[aria-current="page"]::after { content:"\2022"; }

    /* facebook + visit us sit together at the bottom of the sheet */
    .nav__links .nav__fb { order:10; margin-top:var(--space-6); align-self:flex-start; gap:.6rem; font-size:.8rem;
      font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); opacity:0; transition:opacity .3s ease .38s; }
    .nav__links .nav__fb::after { content:"Facebook"; display:inline; position:static; width:auto; height:auto; background:none; transform:none; }
    .nav.open .nav__links .nav__fb { opacity:1; }
    .nav__links .btn { order:11; width:100%; margin-top:var(--space-4); opacity:0; transform:translateY(8px);
      transition:opacity .3s ease .4s, transform .38s var(--transition-spring) .4s, box-shadow var(--transition); }
    .nav.open .nav__links .btn { opacity:1; transform:none; }
  }
  /* no page scroll behind the open sheet */
  body.menu-open { overflow:hidden; }
  .footer__credit { width:100%; font-size:.78rem; color:var(--taupe); }
  .footer__credit a { color:var(--accent-2); font-weight:600; border-bottom:1px solid rgba(67,78,57,.3); padding-bottom:1px; }
  .footer__credit a:hover { color:var(--ink); border-color:var(--accent); }
  @media (min-width:861px){ .footer__bottom { align-items:center; } .footer__credit { width:auto; margin-left:auto; } }
  @media (max-width:860px){
    /* brand + close button must sit above the sheet (they are siblings of it) */
    .nav .brand, .nav__toggle { position:relative; z-index:3; }
    body.menu-open .motion-btn { display:none; }
  }

  /* no browser-default blue anywhere: links inherit, and standalone contact
     links get the same green + hairline treatment used on the Visit page */
  a { color:inherit; }
  .footer a:not(.brand), .footer__bottom a { color:var(--accent-2); border-bottom:1px solid rgba(67,78,57,.3);
    padding-bottom:1px; transition:color var(--transition), border-color var(--transition); }
  .footer a:not(.brand):hover, .footer__bottom a:hover { color:var(--ink); border-color:var(--accent); }
  .footer .fb-link { border-bottom:0; }
  .footer .fb-link:hover { border-bottom:0; }
  /* footer credit: bold blue, both the name and the address */
  .footer__credit a, .footer__bottom .footer__credit a { color:#1D4ED8; font-weight:700; border-bottom-color:rgba(29,78,216,.35); }
  .footer__credit a:hover, .footer__bottom .footer__credit a:hover { color:#1E3A8A; border-color:#1E3A8A; }