/* ==========================================================================
   Burbank Ammo & Guns — stylesheet

   Direction: luxury retail editorial. Deep warm blacks against warm paper,
   a serif display voice, generous negative space, hairline rules, and gold
   used sparingly as punctuation rather than decoration.

   Order: tokens → base → typography → buttons → navigation → hero →
          sections → components → page modules → responsive → motion.

   Motion policy: deliberate and small. A hero entrance, section reveals on
   first scroll into view, and short hover/focus feedback. No parallax, page
   curtains, cursor effects or marquees. Everything is disabled under
   prefers-reduced-motion.
   ========================================================================== */

/* 0. Fonts ============================================================== */
/* Inter Tight is self-hosted: one variable file covers 300–900, so the display
   weight that matches the storefront sign is available without a render-blocking
   request to a third party. */
@font-face{
  font-family:"Inter Tight";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("assets/fonts/inter-tight-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter Tight";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("assets/fonts/inter-tight-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* 1. Tokens ============================================================== */
:root{
  /* Surfaces — warm blacks, not neutral greys.
     The site used to run on two values, near-black and paper, with nothing in
     between; long stretches of page read as one flat wall. --char-2 and --panel
     are the missing middle, and they carry a warm cast so a dark section still
     feels lit rather than switched off. */
  --black:#0a0a09;
  --black-2:#0d0d0c;
  --black-3:#121211;
  --black-deep:#070706;
  --char:#171613;
  --char-2:#1e1b16;
  --panel:#211d17;
  --paper:#f7f4ee;
  --paper-2:#f1ede4;
  --paper-3:#eae5d9;
  --paper-warm:#f4ecd9;
  --white:#fff;

  /* Accent. --accent on dark surfaces, --accent-ink on light ones.
     The brand orange #F7A516 measures 8.3-9.9:1 on every dark surface here, so
     it is a straight swap for the gold it replaces. On paper it only reaches
     1.9:1, which is why --accent-ink exists and why it is a darkened version of
     the same hue rather than the brand colour itself: 4.5:1 on the tightest
     light surface in the system. Never use --accent for text on paper. */
  --accent:#F7A516;
  --accent-soft:#FFC152;
  --accent-deep:#B86A00;
  --accent-ink:#9A5600;
  --accent-wash:rgba(247,165,22,.10);
  --accent-line:rgba(247,165,22,.34);
  --accent-glow:rgba(247,165,22,.16);

  /* Text */
  --on-dark-1:#f6f3ec;
  --on-dark-2:#c2bcb0;
  --on-dark-3:#9a948a;
  --on-light-1:#14130f;
  --on-light-2:#4f4a41;
  --on-light-3:#6b655a;

  /* Hairlines. Raised from .13/.07 — at the old values the grid of rules that
     holds the layout together was invisible on most screens, so cards floated
     with no edge and sections ran into each other. */
  --rule-dark:rgba(246,243,236,.20);
  --rule-dark-2:rgba(246,243,236,.11);
  --rule-light:rgba(20,19,15,.18);
  --rule-light-2:rgba(20,19,15,.10);
  /* Interactive control boundaries, kept separate from decorative rules: SC
     1.4.11 wants 3:1 and these clear it (4.1:1 light, 4.3:1 dark). Decorative
     hairlines stay quiet; anything you can type into or press does not. */
  --control-line:rgba(20,19,15,.55);
  --control-line-dark:rgba(246,243,236,.45);

  /* Metrics */
  --shell:min(1520px,calc(100vw - 80px));
  --section:clamp(96px,9vw,152px);
  --section-sm:76px;
  --gap:clamp(32px,4.5vw,72px);
  --copy:64ch;
  --nav-h:82px;
  --nav-utility-h:38px;
  /* Space the fixed quick-actions bar occupies at the bottom of small screens.
     Anything that must not sit under it clears this much. */
  --quick-actions-h:76px;

  /* Type */
  --sans:"Inter Tight",Inter,"Helvetica Neue",Arial,sans-serif;
  /* Display voice = the storefront sign. The logo is set in a heavy neo-grotesque
     (Helvetica Black family); Inter Tight at 900 shares that skeleton and is
     already loaded, so headlines match the sign without another font download. */
  --display:"Inter Tight",Inter,"Helvetica Neue",Arial,sans-serif;
  --display-weight:900;
  --display-track:-.022em;

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --shadow-soft:0 30px 80px rgba(20,19,15,.10);
  --shadow-dark:0 40px 100px rgba(0,0,0,.45);
}

/* 2. Base =============================================================== */
*{box-sizing:border-box}
/* Author display rules (.btn, .inventory-card …) outrank the user-agent
   [hidden] rule, so hidden elements must be hidden explicitly. */
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:110px;background:var(--black-deep);scrollbar-gutter:stable}
body{
  margin:0;
  background:var(--black);
  color:var(--on-dark-1);
  font-family:var(--sans);
  font-weight:350;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.menu-open,body.dialog-open{overflow:hidden}
a{color:inherit;text-decoration:none}
img,svg,video,iframe{max-width:100%}
img{display:block}
button,input,textarea,select{font:inherit}
main,section,header,footer,nav,div,article,aside,form{min-width:0}
:focus-visible{outline:2px solid var(--accent-soft);outline-offset:4px}
button,input,textarea,select,a{scroll-margin-top:120px}
::selection{background:rgba(247,165,22,.34)}

.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{position:fixed;left:12px;top:-60px;background:#fff;color:#000;padding:12px 18px;z-index:999;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.skip:focus{top:12px}
.shell{width:var(--shell);max-width:1520px;margin:auto}

/* Fine grain over the whole page — reads as printed stock rather than screen */
body::after{
  /* Promoted to its own compositing layer: a fixed full-viewport overlay that
     isn't promoted forces the whole viewport to re-raster on every scroll
     frame. Measured at ~13% of scroll raster time. */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.02;
  will-change:transform;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.52'/%3E%3C/svg%3E");
}

/* 3. Typography ========================================================= */
h1,h2,h3,h4,h5,h6{margin-top:0;text-wrap:balance;font-weight:500}
h1,h2,h3,h4,.hero-title,.reading{margin:0}   /* long-form reading column: capped width, left-aligned to the shell gutter */
.page-title{overflow-wrap:normal;word-break:normal;hyphens:none}
p{margin-top:0;overflow-wrap:break-word}

.serif{font-family:var(--display);font-weight:var(--display-weight);letter-spacing:var(--display-track)}

/* Display voice is the serif. Large, light, tightly set, sentence case. */
.hero-title{
  font-family:var(--display);
  font-size:clamp(46px,6.1vw,112px);
  font-weight:var(--display-weight);line-height:.96;letter-spacing:-.035em;
  text-transform:uppercase;margin:26px 0 34px;
}
.h2{
  font-family:var(--display);
  font-size:clamp(30px,3.4vw,56px);
  font-weight:var(--display-weight);line-height:1.04;letter-spacing:-.03em;
  text-transform:uppercase;margin:18px 0 28px;
}
.h3{font-family:var(--display);font-weight:800;font-size:clamp(24px,2.5vw,38px);line-height:1.1;letter-spacing:-.018em}
.lead{
  font-size:clamp(17px,1.5vw,23px);font-weight:300;line-height:1.62;
  letter-spacing:-.005em;max-width:56ch;color:var(--on-dark-2);
}
.body{font-size:16.5px;font-weight:350;line-height:1.78;max-width:var(--copy)}
.muted{color:var(--on-light-3)}

/* Every section opens with one of these, so it's the highest-leverage place to
   spend the accent: a heavier weight and a solid 2px rule instead of a 1px
   hairline at 85% opacity, which disappeared on most screens. */
.eyebrow{
  display:inline-flex;gap:14px;align-items:center;
  text-transform:uppercase;letter-spacing:.24em;line-height:1.4;
  font-size:11px;font-weight:700;color:var(--accent);
}
.eyebrow::before{content:"";width:38px;height:2px;background:currentColor;flex:none}

/* Light surfaces flip text and accent colour together. */
.paper,.trustbar,.consignment-intro,.email-band,.seo-local,.resources,.review-admin{color:var(--on-light-1)}
.paper .lead,.consignment-intro .lead,.email-band .lead,.seo-local .lead,.resources .lead{color:var(--on-light-2)}
.paper .body,.consignment-intro .body,.email-band .body,.seo-local .body{color:var(--on-light-2)}
.paper .eyebrow,.trustbar .eyebrow,.consignment-intro .eyebrow,.email-band .eyebrow,
.seo-local .eyebrow,.resources .eyebrow,.review-admin .eyebrow{color:var(--accent-ink)}
.paper{background:var(--paper)}

/* 4. Buttons ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  min-height:54px;padding:16px 30px;line-height:1.2;position:relative;
  border:1px solid transparent;cursor:pointer;
  text-transform:uppercase;letter-spacing:.16em;font-size:10.5px;font-weight:600;
  transition:background-color .3s var(--ease),border-color .3s var(--ease),
             color .3s var(--ease),transform .3s var(--ease);
}
.btn::after{
  content:"";width:26px;height:2px;background:currentColor;opacity:.75;
  transform:scaleX(.6);transform-origin:left;
  transition:transform .35s var(--ease-out),opacity .3s var(--ease);
}
.btn:hover::after,.btn:focus-visible::after{transform:scaleX(1);opacity:1}
.btn-gold{background:var(--accent);color:#0b0b0a;border-color:var(--accent)}
.btn-gold:hover{background:var(--accent-soft);border-color:var(--accent-soft);transform:translate3d(0,-2px,0)}
.btn-ghost{background:transparent;border-color:var(--rule-dark);color:var(--on-dark-1)}
.btn-ghost:hover{border-color:var(--accent);color:#fff;transform:translate3d(0,-2px,0)}
.btn-outline{border-color:rgba(247,165,22,.62);background:transparent;color:var(--on-dark-1)}
.btn-outline:hover{border-color:var(--accent);background:rgba(247,165,22,.16);transform:translate3d(0,-2px,0)}
.btn-dark{background:var(--char);color:var(--on-dark-1);border-color:var(--char)}
.btn-dark:hover{background:#26241f;border-color:#26241f}
/* Larger, higher-impact CTA — used for the hero "Current promotions" button. */
.btn-lg{min-height:64px;padding:20px 46px;font-size:12.5px;letter-spacing:.18em}
.btn-lg::after{width:32px}
@media(max-width:600px){.btn-lg{padding:18px 32px;font-size:11.5px}}

/* Outline/ghost buttons on a light surface need dark ink. */
.review-premium .btn-outline,.review-premium .btn-ghost,
.paper .btn-outline,.paper .btn-ghost,.trustbar .btn-outline,.consignment-intro .btn-outline,
.email-band .btn-outline,.seo-local .btn-outline,.resources .btn-outline,.resources .btn-ghost,
.review-admin .btn-outline{border-color:var(--rule-light);background:transparent;color:var(--on-light-1)}
.paper .btn-outline:hover,.paper .btn-ghost:hover,.trustbar .btn-outline:hover,
.review-premium .btn-outline:hover,.review-premium .btn-ghost:hover,
.consignment-intro .btn-outline:hover,.email-band .btn-outline:hover,.seo-local .btn-outline:hover,
.resources .btn-outline:hover,.resources .btn-ghost:hover,.review-admin .btn-outline:hover{
  border-color:var(--accent-ink);background:rgba(154,86,0,.05);color:var(--on-light-1);
}

/* 5. Navigation ========================================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:90;
}
.nav-utility{
  position:relative;z-index:2;
  height:var(--nav-utility-h);overflow:hidden;
  border-bottom:1px solid var(--rule-dark-2);
  background:rgba(7,7,6,.55);
  transition:opacity .35s var(--ease),border-color .35s var(--ease);
}
.nav-utility-inner{
  height:var(--nav-utility-h);display:flex;align-items:center;gap:18px;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-3);
}
.nav-utility-rule{width:26px;height:1px;background:var(--rule-dark);flex:0 0 auto}
.nav-utility-link{margin-left:auto;color:var(--accent);transition:color .25s var(--ease)}
.nav-utility-link:hover{color:var(--accent-soft)}
.nav.scrolled .nav-utility{opacity:0;border-color:transparent}

.nav-bar{
  position:relative;z-index:2;   /* must stay above the open mobile menu below it */
  background:linear-gradient(180deg,rgba(6,6,5,.82) 0%,rgba(6,6,5,.34) 62%,transparent 100%);
  transition:background .45s var(--ease),border-color .45s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled .nav-bar{
  background:rgba(10,10,9,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--rule-dark);
  box-shadow:0 18px 50px rgba(0,0,0,.28);
}
.nav-inner{
  height:var(--nav-h);display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:34px;
}


.brand{display:flex;align-items:center;flex:0 0 auto}
.brand-logo{
  width:196px;height:auto;display:block;
  transition:opacity .25s var(--ease);
}
.brand:hover .brand-logo{opacity:.82}

.brand-footer .brand-logo{width:216px}

.navlinks{display:flex;align-items:center;justify-content:center;gap:38px;min-width:0}
.navlinks a{
  position:relative;display:inline-flex;align-items:center;min-height:44px;
  font-size:12.5px;font-weight:500;text-transform:uppercase;letter-spacing:.16em;
  white-space:nowrap;color:var(--on-dark-2);
  transition:color .28s var(--ease);
}
.navlinks a:hover,.navlinks a.active{color:var(--on-dark-1)}
.navlink-label{position:relative;display:inline-block;padding-bottom:3px}
.navlink-label::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out);
}
.navlinks a:hover .navlink-label::after,
.navlinks a.active .navlink-label::after{transform:scaleX(1);transform-origin:left}

/* About dropdown. Revealed on hover and focus-within so it needs no JS to
   open; a small script adds Escape-to-dismiss (SC 1.4.13). The submenu is
   nested inside the wrap, so moving the pointer onto it keeps the wrap hovered
   (SC 1.4.13 hoverable). */
.nav-sub-wrap{position:relative;display:inline-flex;align-items:center}
.nav-caret{
  width:0;height:0;margin-left:7px;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:4px solid currentColor;opacity:.7;
  transition:transform .25s var(--ease),opacity .25s var(--ease);
}
.nav-sub-wrap:hover .nav-caret,.nav-sub-wrap:focus-within .nav-caret{opacity:1;transform:rotate(180deg)}
.nav-sub{
  position:absolute;top:100%;left:50%;transform:translate(-50%,8px);
  min-width:210px;margin:0;padding:8px;list-style:none;z-index:60;
  background:rgba(10,10,9,.97);border:1px solid var(--rule-dark);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility 0s linear .22s;
}
.nav-sub-wrap:hover .nav-sub,
.nav-sub-wrap:focus-within .nav-sub{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility 0s;
}
.nav-sub-wrap.nav-sub-dismissed .nav-sub{opacity:0;visibility:hidden;pointer-events:none}
.nav-sub::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav-sub li{margin:0}
.nav-sub a{
  display:flex;align-items:center;min-height:44px;padding:0 14px;
  font-size:11.5px;font-weight:500;text-transform:uppercase;letter-spacing:.14em;
  color:var(--on-dark-2);white-space:nowrap;border-left:2px solid transparent;
  transition:color .2s var(--ease),background-color .2s var(--ease),border-color .2s var(--ease);
}
.nav-sub a:hover,.nav-sub a:focus-visible{
  color:var(--on-dark-1);background:var(--accent-wash);border-left-color:var(--accent);
}
.backdrop-blur-off .nav-sub{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(10,10,9,.99)}

/* Mobile: Meet the Team reads as a child of About via an indent + tick. */
.mobile-sub .mobile-index{opacity:.5}
.mobile-nav a.mobile-sub{padding:7px 0}
.mobile-sub .mobile-label{padding-left:22px;position:relative;font-size:clamp(15px,4.4vw,20px);font-weight:800;color:var(--on-dark-2)}
.mobile-sub .mobile-label::before{
  content:"";position:absolute;left:0;top:.7em;width:10px;height:1px;background:var(--accent);
}

.nav-actions{display:flex;align-items:center;gap:14px}
.nav-solid .nav-bar{background:var(--black-2);backdrop-filter:none;-webkit-backdrop-filter:none}
/* The bar "shrinks" on scroll by sliding the utility strip off the top: one
   composited transform instead of animating three heights and widths.

   Scoped to this breakpoint on purpose. A transform (or will-change:transform)
   makes an element the containing block for its position:fixed descendants,
   and the full-screen mobile menu lives inside this header — it has to, so it
   sits within a landmark. Put the transform on .nav at every width and the
   menu's inset:0 resolves against the 150px bar instead of the viewport, so it
   opens clipped to the header. The collapse only exists above 1080px and the
   menu only exists below it, so the two never need to coexist. */
@media(min-width:1081px){
  .nav{
    transform:translate3d(0,0,0);will-change:transform;
    transition:transform .45s var(--ease);
  }
  .nav.scrolled{transform:translate3d(0,calc(var(--nav-utility-h) * -1),0)}
}
.nav-internal-tag{
  font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--on-dark-3);
  justify-self:end;white-space:nowrap;
}
.nav-call{
  display:grid;gap:2px;padding:9px 20px;border:1px solid var(--rule-dark);
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.nav-call:hover{border-color:var(--accent);background:rgba(247,165,22,.10)}
.nav-call-label{font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--on-dark-3)}
.nav-call-number{font-size:13px;letter-spacing:.04em;color:var(--on-dark-1)}

.menu-btn{
  display:none;background:none;border:1px solid var(--rule-dark);
  min-width:48px;min-height:48px;width:48px;height:48px;position:relative;cursor:pointer;
  transition:border-color .3s var(--ease);
}
.menu-btn:hover{border-color:var(--accent)}
.menu-btn-bars,.menu-btn-bars::before,.menu-btn-bars::after{
  position:absolute;height:1px;width:20px;background:var(--on-dark-1);
  transition:transform .4s var(--ease-out),opacity .2s var(--ease);
}
.menu-btn-bars{left:50%;top:50%;margin-left:-10px}
.menu-btn-bars::before{content:"";left:0;top:-6px}
.menu-btn-bars::after{content:"";left:0;top:6px}
.menu-btn[aria-expanded=true] .menu-btn-bars{background:transparent}
.menu-btn[aria-expanded=true] .menu-btn-bars::before{transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded=true] .menu-btn-bars::after{transform:translateY(-6px) rotate(-45deg)}

/* Full-screen mobile menu */
.mobile-menu{
  position:fixed;inset:0;z-index:1;visibility:hidden;
  background:var(--black-deep);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:calc(var(--nav-h) + 34px) 28px 34px;overflow-y:auto;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .62s var(--ease-out),visibility 0s linear .62s;
}
.mobile-menu.open{visibility:visible;clip-path:inset(0);transition:clip-path .62s var(--ease-out),visibility 0s}
.mobile-nav{display:flex;flex-direction:column}
.mobile-nav a{
  display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:18px;
  padding:13px 0;border-bottom:1px solid var(--rule-dark-2);
  opacity:0;transform:translateY(14px);
}
.mobile-menu.open .mobile-nav a{
  opacity:1;transform:none;
  transition:opacity .34s var(--ease) calc(.1s + var(--i)*.03s),
             transform .44s var(--ease-out) calc(.1s + var(--i)*.03s);
}
.mobile-index{font-size:9.5px;letter-spacing:.2em;color:var(--accent);align-self:center}
.mobile-nav a.active .mobile-label{color:var(--accent-soft)}
.mobile-nav a.active .mobile-arrow{color:var(--accent)}
.mobile-label{font-family:var(--display);font-weight:900;font-size:clamp(26px,7.6vw,40px);line-height:1.05;letter-spacing:-.022em;text-transform:uppercase}
.mobile-arrow{color:var(--on-dark-3);align-self:center;font-size:15px}
.mobile-meta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:22px;
  padding-top:24px;margin-top:22px;border-top:1px solid var(--rule-dark);
  padding-bottom:max(6px,env(safe-area-inset-bottom));
}
.mobile-meta-block span{
  display:block;font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent);margin-bottom:9px;
}
.mobile-meta-block p{margin:0;font-size:13.5px;line-height:1.65;color:var(--on-dark-2)}

/* 6. Homepage hero ====================================================== */
.hero{
  min-height:max(720px,100svh);position:relative;display:flex;align-items:flex-end;
  overflow:hidden;isolation:isolate;
}
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-media picture{display:block;width:100%;height:100%}
.hero-media img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.78) contrast(1.06) brightness(.84);
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 74% 34%,rgba(247,165,22,.16),transparent 46%);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(6,6,5,.97) 0%,rgba(6,6,5,.93) 42%,rgba(6,6,5,.72) 70%,rgba(6,6,5,.58) 100%),
             linear-gradient(0deg,rgba(6,6,5,.94) 0%,rgba(6,6,5,.6) 34%,transparent 66%);
}
.hero-content{
  position:relative;z-index:3;
  padding:calc(var(--nav-h) + var(--nav-utility-h) + 78px) 0 92px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,352px);
  gap:clamp(48px,6vw,96px);align-items:end;
}
.hero-copy{min-width:0}
.hero-title{max-width:14ch}
.hero .lead{max-width:52ch;color:#cdc7ba}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px 14px;margin-top:38px}

/* Masked line-by-line entrance for the display headline */
.hero-title .line{display:block;overflow:hidden}
.hero-title .line>span{display:block}

.hero-card{
  position:relative;padding:30px 28px 26px 28px;
  border-left:2px solid var(--accent);background:rgba(7,7,6,.82);
  display:grid;gap:22px;align-content:end;
}
.hero-card-label{
  font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);
}
.hero-card-row{display:grid;gap:6px}
.hero-card-row span{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-2)}
.hero-card-row p{margin:0;font-size:14px;line-height:1.65;color:var(--on-dark-1)}
.hero-card-link{
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
  display:inline-flex;gap:8px;align-items:center;min-height:44px;
  transition:color .25s var(--ease);
}
.hero-card-link:hover{color:var(--accent-soft)}
.hero-card-news{display:grid;gap:11px;border-top:1px solid var(--rule-dark-2);padding-top:20px;margin:0}
.hero-card-news-label{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.hero-card-news-row{display:flex;gap:8px;flex-wrap:wrap}
.hero-card-news input{
  flex:1 1 150px;min-width:0;background:rgba(0,0,0,.42);border:1px solid var(--control-line-dark);
  color:var(--on-dark-1);border-radius:8px;padding:11px 12px;font:500 14px/1.2 var(--sans)}
.hero-card-news input::placeholder{color:var(--on-dark-3)}
.hero-card-news input:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.hero-card-news .btn{flex:0 0 auto;white-space:nowrap}
.hero-card-news .newsletter-status{margin:0;font-size:12.5px;line-height:1.5;color:var(--accent-soft);min-height:0}
.hero-card-news .newsletter-status:empty{display:none}

.hero-scroll{
  position:absolute;left:50%;bottom:26px;z-index:3;transform:translateX(-50%);
  display:grid;justify-items:center;gap:10px;pointer-events:none;
}
.hero-scroll-line{width:1px;height:46px;background:linear-gradient(var(--accent),transparent);position:relative;overflow:hidden}
.hero-scroll-label{font-size:8.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--on-dark-3)}

/* 7. Interior page hero ================================================= */
.page-hero{
  min-height:clamp(460px,58svh,640px);display:flex;align-items:flex-end;
  position:relative;overflow:hidden;padding-top:calc(var(--nav-h) + var(--nav-utility-h));
  isolation:isolate;
}
.page-hero::before{
  content:"";position:absolute;inset:0;
  background-image:var(--hero);background-size:cover;background-position:center;
  filter:saturate(.75) contrast(1.05) brightness(.66);
}
.page-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(6,6,5,.97) 0%,rgba(6,6,5,.88) 48%,rgba(6,6,5,.46) 82%),
             linear-gradient(0deg,rgba(6,6,5,.88),rgba(6,6,5,.5) 40%,transparent 72%),
             linear-gradient(180deg,rgba(6,6,5,.6) 0%,rgba(6,6,5,.3) 34%,transparent 60%);
}
.page-hero--plain{background:var(--black-deep)}
.page-hero--plain::before{display:none}
.page-hero-content{position:relative;z-index:2;padding:clamp(80px,8vw,116px) 0 74px}
.breadcrumb{
  font-size:9.5px;color:var(--accent);text-transform:uppercase;letter-spacing:.24em;
  line-height:1.5;margin-bottom:26px;
}
.page-title{
  font-family:var(--display);
  font-size:clamp(38px,4.9vw,86px);
  font-weight:var(--display-weight);line-height:1.02;letter-spacing:-.033em;
  text-transform:uppercase;margin:0 0 28px;max-width:15ch;text-wrap:balance;
}
.page-sub{font-size:clamp(16px,1.35vw,21px);font-weight:300;line-height:1.66;color:#c6c0b4;max-width:58ch}

/* 8. Sections =========================================================== */
.section,.content{padding-top:var(--section);padding-bottom:var(--section)}
.section-head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(32px,5vw,80px);align-items:end;margin-bottom:clamp(48px,5vw,76px);
}
.section-head>*{min-width:0}
.section-head .lead{max-width:46ch}
.dark-section{background:var(--black-2);position:relative;isolation:isolate}
.dark-section::before{
  content:"";position:absolute;inset:0 0 auto 0;height:min(60%,560px);pointer-events:none;
  background:radial-gradient(ellipse at 12% -12%,rgba(247,165,22,.16),transparent 70%);
}

/* Meet the team teaser ---------------------------------------------------
   The homepage never pointed at the team page, and this slot was the one place
   left where two dark sections still ran together. Light, so it breaks that
   pair as well as filling the gap. */
.team-teaser-grid{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(36px,5vw,80px);align-items:start;
}
.team-teaser-grid .btn{margin-top:34px}
.team-teaser-list{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--rule-light)}
.team-teaser-list li{
  display:grid;gap:7px;padding:26px 0 26px 22px;position:relative;
  border-bottom:1px solid var(--rule-light);
}
/* Same accent bar as the FAQ rows, so the two read as one system. */
.team-teaser-list li::before{
  content:"";position:absolute;left:0;top:22px;bottom:22px;width:3px;
  background:var(--accent);transform:scaleY(0);transform-origin:top;
  transition:transform .32s var(--ease-out);
}
.team-teaser-list li:hover::before{transform:scaleY(1)}
.team-teaser-tag{
  font-size:9px;text-transform:uppercase;letter-spacing:.24em;font-weight:700;color:var(--accent-ink);
}
/* The tags are links to the relevant page (transfers, consignment, buying-in-store
   FAQ, contact). Kept as a grid item hugging its text so the focus ring wraps the
   label, with an underline cue on hover/focus. */
a.team-teaser-tag{justify-self:start;text-decoration:none;transition:opacity .2s var(--ease)}
a.team-teaser-tag:hover,a.team-teaser-tag:focus-visible{text-decoration:underline;text-underline-offset:3px}
a.team-teaser-tag:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.team-teaser-email{margin-top:14px;font-size:14px;color:var(--on-light-2)}
.inline-link{color:var(--accent-ink);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.inline-link:hover{color:var(--accent-deep)}
.inline-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
.team-teaser-list strong{
  font-family:var(--display);font-weight:800;font-size:clamp(17px,1.6vw,20px);
  letter-spacing:-.012em;color:var(--on-light-1);line-height:1.25;
}
.team-teaser-list li>span:last-child{color:var(--on-light-2);font-size:14px;line-height:1.7}
@media(max-width:900px){
  .team-teaser-grid{grid-template-columns:minmax(0,1fr);gap:clamp(30px,5vw,44px)}
  .team-teaser-grid .btn{margin-top:26px;width:100%}
}

/* Brand marquee ---------------------------------------------------------
   WCAG 2.2.2: content that moves automatically for more than five seconds
   alongside other content needs a mechanism to stop it. Hover alone is not
   that mechanism — a keyboard user has no hover — so there is a real toggle. */
.marquee{
  position:relative;background:var(--paper);
  border-top:1px solid var(--rule-light-2);border-bottom:2px solid var(--accent);
  padding:26px 0;overflow:hidden;
}
.marquee-viewport{
  display:flex;width:max-content;
  animation:marqueeScroll 48s linear infinite;
  will-change:transform;
}
.marquee.paused .marquee-viewport{animation-play-state:paused}
/* Names ran straight under the pause control and off the edges. Fade both
   sides so the strip reads as continuous rather than clipped, and so the
   control sits on a clean field. Pointer-events off so it never blocks it. */
.marquee::before,.marquee::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(40px,7vw,110px);
  z-index:2;pointer-events:none;
}
.marquee::before{left:0;background:linear-gradient(90deg,var(--paper) 18%,rgba(247,244,238,0))}
.marquee::after{right:0;background:linear-gradient(270deg,var(--paper) 34%,rgba(247,244,238,0))}
.marquee-toggle{z-index:3}
@keyframes marqueeScroll{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
/* Second brand row, directly under the first, running the opposite direction.
   Same duration/timing as the top row (inherited from .marquee-viewport); only
   the keyframe endpoints are swapped so it travels the other way. The pause
   toggle, off-screen parking and reduced-motion fallback all key off the shared
   .marquee-viewport class, so this row is covered by them automatically. */
@keyframes marqueeScrollRev{
  from{transform:translate3d(-50%,0,0)}
  to{transform:translate3d(0,0,0)}
}
.marquee-viewport--rev{animation-name:marqueeScrollRev;margin-top:16px}
.marquee-track{
  display:flex;align-items:center;gap:clamp(38px,5vw,76px);
  list-style:none;margin:0;padding:0 clamp(19px,2.5vw,38px);
}
.marquee-item{flex:none;display:flex;align-items:center}
.marquee-logo{
  height:clamp(33px,3.6vw,48px);width:auto;display:block;
  /* Logos are transparent PNGs (white boxes knocked out at build time, so no
     rectangles show on the cream strip). saturate(0) plus reduced opacity mute
     the mixed brand colours to a warm grey at rest; hover restores full colour.
     mix-blend-mode is deliberately not used — the scrolling track sits on its
     own compositing layer, which isolates the blend and leaves it ineffective. */
  filter:saturate(0);opacity:.55;
  transition:filter .3s var(--ease),opacity .3s var(--ease);
}
.marquee:hover .marquee-logo{filter:none;opacity:1}
.marquee-item span{
  font-family:var(--display);font-weight:800;
  font-size:clamp(15px,1.5vw,20px);letter-spacing:.02em;
  color:var(--on-light-2);white-space:nowrap;
  transition:color .3s var(--ease);
}
.marquee:hover .marquee-item span{color:var(--on-light-1)}
.marquee:hover .marquee-item img{opacity:1}
.marquee-toggle{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;display:grid;place-items:center;
  background:var(--paper);border:1px solid var(--control-line);cursor:pointer;
  transition:border-color .25s var(--ease),background-color .25s var(--ease);
}
.marquee-toggle:hover{border-color:var(--accent-deep);background:#fff}
.marquee-toggle-icon{
  width:12px;height:12px;position:relative;display:block;
}
/* two bars = pause; becomes a single triangle when already paused */
.marquee-toggle-icon::before,.marquee-toggle-icon::after{
  content:"";position:absolute;top:0;width:3.5px;height:12px;background:var(--on-light-1);
}
.marquee-toggle-icon::before{left:1px}
.marquee-toggle-icon::after{right:1px}
.marquee-toggle[aria-pressed="true"] .marquee-toggle-icon::before{
  left:2px;width:0;height:0;background:transparent;
  border-left:11px solid var(--on-light-1);
  border-top:6px solid transparent;border-bottom:6px solid transparent;
}
.marquee-toggle[aria-pressed="true"] .marquee-toggle-icon::after{display:none}
@media(max-width:680px){
  .marquee{padding:20px 0}
  .marquee-toggle{right:6px;width:30px;height:30px}
}
@media(prefers-reduced-motion:reduce){
  /* nothing to pause, so the control has no job */
  .marquee-viewport{animation:none;width:100%;justify-content:center;flex-wrap:wrap}
  .marquee-track:last-child{display:none}
  .marquee-track{flex-wrap:wrap;justify-content:center;row-gap:14px}
  .marquee-toggle{display:none}
}

/* Trust strip */
.trustbar{background:var(--paper);border-bottom:1px solid var(--rule-light-2)}
.trustgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-left:1px solid var(--rule-light-2)}
.trustitem{
  display:grid;grid-template-columns:34px minmax(0,1fr);gap:18px;align-items:start;
  padding:34px 30px;border-right:1px solid var(--rule-light-2);
  transition:background-color .3s var(--ease);
}
.trustitem:hover{background:#fff}
.trusticon{
  width:32px;height:32px;display:grid;place-items:center;position:relative;
  font-size:16px;color:var(--accent-ink);
}
.trusticon::after{
  content:"";position:absolute;inset:0;border:1.5px solid var(--accent-ink);
  background:rgba(154,86,0,.09);
  transform:rotate(45deg);transition:transform .55s var(--ease-out);
}
.trustitem:hover .trusticon::after{transform:rotate(135deg)}
.trustitem strong{font-size:10.5px;text-transform:uppercase;letter-spacing:.16em;display:block;line-height:1.4;margin-bottom:8px;font-weight:600}
.trustitem span{font-size:13px;color:var(--on-light-3);line-height:1.6;display:block}

/* Editorial split */
.split{display:grid;grid-template-columns:1fr 1.16fr;min-height:720px}
.split-copy{padding:clamp(76px,7.5vw,124px);display:flex;flex-direction:column;justify-content:center;position:relative}
.split-copy .body{max-width:52ch;margin-bottom:0}
.split-media{overflow:hidden;position:relative;isolation:isolate}
.split-media picture{display:block;width:100%;height:100%}
.split-media::after{
  content:"";position:absolute;inset:26px;border:1px solid rgba(247,244,238,.24);
  pointer-events:none;z-index:2;
}
.split-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.02) brightness(1);
  transform:scale(1);transition:transform .7s var(--ease-out)}
.split-media:hover img{transform:scale(1.025)}

/* Service mosaic */
.services-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.service-card{
  position:relative;overflow:hidden;min-width:0;min-height:400px;
  border:1px solid var(--rule-dark);background:var(--black-3);display:flex;align-items:flex-end;
  transition:border-color .35s var(--ease),transform .45s var(--ease);
}
.service-card:nth-child(1){grid-column:span 5;min-height:500px}
.service-card:nth-child(2){grid-column:span 3;min-height:500px}
.service-card:nth-child(3){grid-column:span 4;min-height:500px}
.service-card:nth-child(4),.service-card:nth-child(5){grid-column:span 6}
/* The desaturated grade is baked into the card-* assets rather than applied as
   a CSS filter. A filter over five full-bleed backgrounds re-ran on every
   raster tile during scroll — the largest single cost in the scroll trace. */
.service-card::before{
  content:"";position:absolute;inset:0;
  background-size:cover;background-position:center;
  transform:scale(1.01);
  transition:transform .9s var(--ease-out);
}
.card-bg-interior::before{
  background-image:url("assets/card-interior-800.webp");
  background-image:image-set(url("assets/card-interior-800.avif") type("image/avif") 1x,
                             url("assets/card-interior-800.webp") type("image/webp") 1x,
                             url("assets/card-interior-1600.avif") type("image/avif") 2x,
                             url("assets/card-interior-1600.webp") type("image/webp") 2x);
}
.card-bg-storefront::before{
  background-image:url("assets/card-storefront-800.webp");
  background-image:image-set(url("assets/card-storefront-800.avif") type("image/avif") 1x,
                             url("assets/card-storefront-800.webp") type("image/webp") 1x,
                             url("assets/card-storefront-1600.avif") type("image/avif") 2x,
                             url("assets/card-storefront-1600.webp") type("image/webp") 2x);
}
.card-bg-firearms::before{
  background-image:url("assets/card-firearms-800.webp");
  background-image:image-set(url("assets/card-firearms-800.avif") type("image/avif") 1x,
                             url("assets/card-firearms-800.webp") type("image/webp") 1x,
                             url("assets/card-firearms-1448.avif") type("image/avif") 2x,
                             url("assets/card-firearms-1448.webp") type("image/webp") 2x);
}
.card-bg-ffl::before{
  background-image:url("assets/card-ffl-800.webp");
  background-image:image-set(url("assets/card-ffl-800.avif") type("image/avif") 1x,
                             url("assets/card-ffl-800.webp") type("image/webp") 1x,
                             url("assets/card-ffl-1448.avif") type("image/avif") 2x,
                             url("assets/card-ffl-1448.webp") type("image/webp") 2x);
}
.card-bg-consign::before{
  background-image:url("assets/card-consign-800.webp");
  background-image:image-set(url("assets/card-consign-800.avif") type("image/avif") 1x,
                             url("assets/card-consign-800.webp") type("image/webp") 1x,
                             url("assets/card-consign-1448.avif") type("image/avif") 2x,
                             url("assets/card-consign-1448.webp") type("image/webp") 2x);
}
.card-bg-accessories::before{
  background-image:url("assets/card-accessories-800.webp");
  background-image:image-set(url("assets/card-accessories-800.avif") type("image/avif") 1x,
                             url("assets/card-accessories-800.webp") type("image/webp") 1x,
                             url("assets/card-accessories-1448.avif") type("image/avif") 2x,
                             url("assets/card-accessories-1448.webp") type("image/webp") 2x);
}
.card-bg-ammo::before{
  background-image:url("assets/card-ammo-800.webp");
  background-image:image-set(url("assets/card-ammo-800.avif") type("image/avif") 1x,
                             url("assets/card-ammo-800.webp") type("image/webp") 1x,
                             url("assets/card-ammo-1448.avif") type("image/avif") 2x,
                             url("assets/card-ammo-1448.webp") type("image/webp") 2x);
}
.card-bg-shift::before{background-position:20% center}
/* The scrim used to reach 62% black by the card's midpoint, so the top half of
   every photograph was buried to protect copy that only occupies the bottom
   third. Held off until it is actually needed, then taken further for legibility. */
.service-card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(transparent 0%,transparent 24%,rgba(7,7,6,.34) 46%,rgba(7,7,6,.9) 74%,#070706 100%);
}
.service-card:hover{border-color:var(--accent);transform:translate3d(0,-5px,0)}
.service-card:hover::before{transform:scale(1.035)}
.service-content{position:relative;z-index:2;padding:34px;width:100%;max-width:42ch}
.service-content h3{
  font-family:var(--display);font-size:22px;font-weight:800;letter-spacing:-.014em;
  line-height:1.16;margin:0 0 10px;
}
.service-content p{font-size:13.5px;color:var(--on-dark-2);line-height:1.62;margin:0 0 20px;font-weight:300}
.service-link{
  display:inline-flex;gap:12px;align-items:center;font-size:10px;color:var(--accent);
  font-weight:600;text-transform:uppercase;letter-spacing:.2em;
}
.service-link::after{
  content:"";height:1px;width:34px;background:currentColor;
  transform:scaleX(.41);transform-origin:left;transition:transform .45s var(--ease-out);
}
.service-card:hover .service-link::after,
.service-card:focus-visible .service-link::after{transform:scaleX(1)}

/* Promotion band */
.promo-band{
  min-height:340px;padding:86px 0;position:relative;display:flex;align-items:center;
  overflow:hidden;background:var(--black-deep);
  border-top:1px solid var(--rule-dark-2);border-bottom:1px solid var(--rule-dark-2);
}
.promo-band::before{
  content:"";position:absolute;inset:0;background-position:center 42%;background-size:cover;
  background-image:url('assets/promo-band-1200.webp');
  background-image:image-set(url('assets/promo-band-1200.avif') type('image/avif') 1x,url('assets/promo-band-1200.webp') type('image/webp') 1x,url('assets/promo-band-1800.avif') type('image/avif') 2x,url('assets/promo-band-1800.webp') type('image/webp') 2x);
  filter:brightness(.55) saturate(.8) contrast(1.05);
}
.promo-band::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,#070706 0%,rgba(7,7,6,.88) 34%,rgba(7,7,6,.4) 68%,rgba(7,7,6,.9) 100%);
}
.promo-content{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:48px}
.promo-content>div{min-width:0}
.promo-content .h2{font-size:clamp(26px,2.8vw,44px);max-width:18ch;margin-bottom:0}

/* Brand strip */
/* The brand names were grey-on-black filler between two dark sections. As a
   gold-washed band with gold rules it becomes a deliberate divider. */
.brandstrip{
  background:#16130e;
  padding:44px 0;
  border-top:1px solid var(--accent-line);border-bottom:1px solid var(--accent-line);
}
.brandrow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:32px;align-items:center}
.brandrow span{
  min-width:0;text-align:center;line-height:1.15;white-space:normal;
  font-family:var(--display);font-weight:500;color:var(--on-dark-2);
  font-size:clamp(12px,1.15vw,16px);letter-spacing:.16em;text-transform:uppercase;
  transition:color .3s var(--ease);
}
.brandrow span:nth-child(even){font-weight:700}
.brandrow span:hover{color:var(--accent-soft)}

/* 9. Footer ============================================================= */
.footer{background:var(--black-deep);padding:104px 0 30px;position:relative;border-top:1px solid var(--accent-line)}

/* Conformance mark. Deliberately not a wheelchair symbol: on a retail site the
   International Symbol of Access reads as a claim about the premises, which is
   a different claim from the one this badge makes and one nothing on the site
   supports. It links to the statement, where the scope and method are set out. */
.footer a.a11y-badge{
  display:inline-flex;align-items:center;gap:11px;margin-top:26px;
  border:1px solid var(--accent-line);padding:10px 14px;color:var(--accent);
  font-size:inherit;line-height:inherit;
  transition:border-color .28s var(--ease),background-color .28s var(--ease);
}
.footer a.a11y-badge:hover,.footer a.a11y-badge:focus-visible{border-color:var(--accent);background:var(--accent-wash)}
.a11y-badge-mark{width:26px;height:26px;flex:none}
.a11y-badge-text{display:grid;gap:2px;line-height:1.15}
.a11y-badge-text strong{
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}
.a11y-badge-text>span{
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-2);
}
.footer::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 10% 0%,rgba(247,165,22,.09),transparent 38%);
}
.footer>*{position:relative}
.footer-grid{display:grid;grid-template-columns:minmax(240px,1.4fr) repeat(4,minmax(0,1fr));gap:clamp(32px,3.4vw,60px)}
.footer-grid>div{min-width:0}
.footer p,.footer a{color:var(--on-dark-3);font-size:13px;line-height:1.75;overflow-wrap:anywhere}
.footer-brand p{max-width:380px;margin-top:28px}
.footer h4,.footer-heading{
  color:var(--accent);font-size:9px;font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;margin:0 0 20px;line-height:1.4;
}
.footer-col{display:flex;flex-direction:column;gap:6px}
.footer-col>a{min-height:40px;display:inline-flex;align-items:center;transition:color .25s var(--ease)}
.footer-col>a:hover{color:var(--on-dark-1)}
.footer a.btn,.footer a.btn-gold,.footer a.btn-gold:hover{color:#0b0b0a}
.footer .btn{width:100%;max-width:250px;padding-inline:18px;text-align:center}
.footer-social{margin-top:30px}
.footer-social-label{display:block;color:var(--accent);font-size:9px;letter-spacing:.26em;text-transform:uppercase;margin-bottom:12px}
.footer-social-links{display:flex;flex-wrap:wrap;gap:8px}
.footer-social-links a{
  border:1px solid var(--rule-dark-2);padding:10px 14px;font-size:10.5px;line-height:1;
  letter-spacing:.12em;text-transform:uppercase;min-height:40px;display:inline-flex;align-items:center;
  transition:border-color .28s var(--ease),color .28s var(--ease);
}
.footer-social-links a:hover{border-color:var(--accent);color:var(--on-dark-1)}
.footer-resources a{display:inline-flex;align-items:center}
.footer-resources-note{display:block;color:#7d786f;font-size:10.5px;line-height:1.6;margin-top:14px;max-width:24ch}
.footer-bottom{
  border-top:1px solid var(--rule-dark-2);margin-top:70px;padding-top:30px;gap:20px;line-height:1.5;
  display:flex;justify-content:space-between;color:#7d786f;font-size:10.5px;
  letter-spacing:.06em;
}
.footer-legal{display:flex;gap:20px;flex-wrap:wrap}
.footer-legal a{text-decoration:underline;text-underline-offset:3px}

/* 10. Interior content modules ========================================== */
.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap);align-items:start}
.sidebar{border-top:1px solid var(--rule-light);padding-top:22px;min-width:0}
.sidebar h3{font-size:11px;text-transform:uppercase;letter-spacing:.2em;margin:0 0 18px}
.info-list{display:grid;gap:0}
.info-row{
  display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
  border-bottom:1px solid var(--rule-light-2);padding:20px 0;font-size:14px;line-height:1.55;
  transition:border-color .28s var(--ease);
}
.info-row:hover{border-color:var(--accent-ink)}
.info-row span{min-width:0}
.info-row span:first-child{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--on-light-3);padding-top:3px}
.info-row span:last-child{font-weight:500;text-align:right;overflow-wrap:anywhere}

.steps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0;
  border-top:1px solid var(--rule-light);border-left:1px solid var(--rule-light);
}
.step{
  min-width:0;min-height:236px;padding:38px 30px;position:relative;
  border-right:1px solid var(--rule-light);border-bottom:1px solid var(--rule-light);
  transition:background-color .3s var(--ease);
}
.step:hover{background:#fff}
.stepnum{
  font-family:var(--display);font-size:32px;font-weight:900;color:var(--accent-ink);
  letter-spacing:-.03em;line-height:1;margin-bottom:26px;display:block;
}
.step h3{font-size:12px;text-transform:uppercase;letter-spacing:.16em;line-height:1.4;margin:0 0 14px;font-family:var(--sans);font-weight:600}
.step p{font-size:13.5px;line-height:1.7;color:var(--on-light-3);margin-bottom:0}

.notice{
  border-left:2px solid var(--accent-ink);background:var(--paper-3);padding:26px 30px;
  color:#3a352c;font-size:14px;line-height:1.75;position:relative;
}
.notice strong{color:var(--on-light-1)}

.values{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  border-top:1px solid var(--rule-light);border-left:1px solid var(--rule-light);
}
.value{
  padding:34px 28px;min-width:0;
  border-right:1px solid var(--rule-light);border-bottom:1px solid var(--rule-light);
  transition:background-color .3s var(--ease);
}
.value:hover{background:#fff}
.value strong{font-size:11px;text-transform:uppercase;letter-spacing:.18em;font-weight:600}
.value p{font-size:13.5px;color:var(--on-light-3);line-height:1.7}

.promo-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.promo-cards--two{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Dedicated, prominent Current Promotion section */
.promo-feature{padding:clamp(52px,6vw,84px) 0 0}
.promo-feature-card{
  position:relative;display:grid;grid-template-columns:minmax(0,360px) 1fr;
  gap:clamp(28px,4vw,56px);align-items:center;
  background:var(--char);color:var(--on-dark-1);
  padding:clamp(26px,3.4vw,46px);border-top:4px solid var(--accent);
  box-shadow:0 26px 60px -24px rgba(20,19,15,.4);
}
.promo-feature-media{position:relative}
.promo-feature-media img{width:100%;height:auto;display:block;background:#0e0e0c}
.promo-feature-tag{
  display:inline-block;font-size:10px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent);margin-bottom:14px;
}
.promo-feature-body h2{color:#fff;margin:0 0 16px}
.promo-feature-body .body{color:var(--on-dark-2);margin:0 0 28px;max-width:54ch}
.promo-feature-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
/* keep the ghost (Download) button light on the dark card, overriding .paper rules */
.promo-feature-card .btn-ghost{border-color:var(--rule-dark);color:var(--on-dark-1);background:transparent}
.promo-feature-card .btn-ghost:hover{border-color:var(--accent);color:#fff}
@media(max-width:820px){
  .promo-feature-card{grid-template-columns:1fr;gap:22px;text-align:left}
  .promo-feature-media{max-width:300px}
}
/* Store-managed promotions (from /admin). They fill the permanent card's left
   preview; clicking opens the zoom viewer below. */
.promo-feature-viewbtn{display:block;width:100%;padding:0;margin:0;border:0;background:transparent;position:relative;cursor:default}
.promo-feature-card.has-promos .promo-feature-viewbtn{cursor:zoom-in}
.promo-feature-viewbtn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.promo-feature-zoomhint{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  font:800 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#fff;
  background:rgba(10,10,9,.72);border:1px solid rgba(247,165,22,.5);padding:7px 11px;border-radius:999px;
  opacity:0;transition:opacity .25s var(--ease);pointer-events:none;
}
.promo-feature-card.has-promos .promo-feature-viewbtn:hover .promo-feature-zoomhint,
.promo-feature-card.has-promos .promo-feature-viewbtn:focus-visible .promo-feature-zoomhint{opacity:1}
.promo-feature-thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px}
.promo-feature-thumb{
  position:relative;width:100%;aspect-ratio:3/4;padding:0;border:2px solid rgba(255,255,255,.22);border-radius:9px;overflow:hidden;
  background:#000;cursor:pointer;opacity:.78;box-shadow:0 6px 16px rgba(0,0,0,.45);
  transition:border-color .2s var(--ease),transform .2s var(--ease),opacity .2s var(--ease),box-shadow .2s var(--ease)}
.promo-feature-thumb img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.promo-feature-thumb:hover{opacity:1;border-color:var(--accent);transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,.55)}
.promo-feature-thumb.on{opacity:1;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent),0 10px 22px rgba(0,0,0,.55)}
.promo-feature-thumb:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:820px){.promo-feature-thumbs{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Zoomable promotion viewer (the #promoOverlay dialog) */
.promo-overlay{padding:18px}
.promo-viewer{position:relative;width:min(96vw,1200px);max-height:92svh;display:flex;flex-direction:column;align-items:center;gap:14px}
.promo-viewer-stage{
  position:relative;width:100%;flex:1 1 auto;min-height:0;max-height:76svh;
  display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none;background:transparent}
.promo-viewer-stage.zoomed{cursor:grab}
.promo-viewer-stage.zoomed:active{cursor:grabbing}
.promo-viewer-img{max-width:100%;max-height:76svh;object-fit:contain;transform-origin:center center;will-change:transform;user-select:none;-webkit-user-drag:none}
.promo-viewer-close{position:absolute;top:-2px;right:-2px;z-index:3;width:44px;height:44px;border:1px solid var(--control-line-dark);
  background:rgba(10,10,9,.72);color:#fff;font-size:24px;line-height:1;cursor:pointer;border-radius:999px;transition:border-color .2s var(--ease)}
.promo-viewer-close:hover{border-color:var(--accent)}
.promo-viewer-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:50px;height:50px;border-radius:999px;
  border:1px solid var(--control-line-dark);background:rgba(10,10,9,.6);color:#fff;font-size:30px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:border-color .2s var(--ease),background .2s var(--ease)}
.promo-viewer-nav:hover{border-color:var(--accent);background:rgba(10,10,9,.85)}
.promo-viewer-nav.prev{left:6px}.promo-viewer-nav.next{right:6px}
.promo-viewer-cap{margin:0;color:var(--on-dark-1);font:600 15px/1.5 var(--sans);text-align:center;max-width:70ch}
.promo-viewer-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;
  background:var(--char-2);border:1px solid var(--rule-dark-2);border-radius:999px;padding:7px 10px}
.promo-zoom-btn,.promo-zoom-pct,.promo-zoom-reset{
  appearance:none;border:1px solid transparent;background:transparent;color:var(--on-dark-1);
  font:800 13px/1 var(--sans);cursor:pointer;border-radius:999px;padding:9px 12px;transition:background .18s,color .18s,border-color .18s}
.promo-zoom-btn{font-size:18px;min-width:38px}
.promo-zoom-pct:hover,.promo-zoom-btn:hover,.promo-zoom-reset:hover{background:var(--black-2);color:#fff}
.promo-zoom-pct.on{background:var(--accent);color:#1a1205;border-color:var(--accent)}
.promo-zoom-reset{border-color:var(--control-line-dark)}
.promo-zoom-label{font:700 12px/1 var(--sans);color:var(--on-dark-3);min-width:46px;text-align:center}
.promo-zoom-btn:focus-visible,.promo-zoom-pct:focus-visible,.promo-zoom-reset:focus-visible,.promo-viewer-nav:focus-visible,.promo-viewer-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:560px){.promo-zoom-label{display:none}.promo-viewer-nav{width:42px;height:42px;font-size:24px}}
@media(prefers-reduced-motion:reduce){.promo-feature-thumb,.promo-feature-zoomhint{transition:none}}
.promo-card{
  background:#fff;border:1px solid var(--rule-light-2);
  transition:border-color .3s var(--ease),transform .35s var(--ease);
}
.promo-card:hover{border-color:var(--accent-ink);transform:translate3d(0,-5px,0)}
.promo-card-featured{border-color:rgba(154,86,0,.38);box-shadow:0 20px 54px rgba(20,19,15,.09)}
.promo-card-featured .promo-visual{background:var(--black-3)}
.promo-visual{aspect-ratio:4/3;background:var(--paper-3);position:relative;overflow:hidden;display:grid;place-items:center}
.promo-visual img{width:100%;height:100%;object-fit:cover;filter:saturate(.95) contrast(1.02);transform:scale(1);transition:transform .6s var(--ease-out)}
.promo-card-featured .promo-visual img{filter:none}
.promo-card:hover .promo-visual img{transform:scale(1.03)}
.promo-card-content{padding:30px}
.promo-card h3{font-family:var(--display);font-weight:800;font-size:21px;line-height:1.2;letter-spacing:-.012em;margin:10px 0 12px}
.promo-card p{font-size:13.5px;color:var(--on-light-3);line-height:1.7}
.promo-card-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.promo-card-actions .btn{min-height:48px;padding:14px 22px}
.tag{font-size:9px;text-transform:uppercase;letter-spacing:.22em;color:var(--accent-ink);font-weight:600}

.map-card{
  min-height:380px;position:relative;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--paper-2),var(--paper-3));border:1px solid var(--rule-light-2);
  padding:34px;text-align:center;
}
.map-card::before{
  content:"";position:absolute;inset:0;opacity:.4;background-size:82px 82px;
  background-image:linear-gradient(45deg,transparent 48%,#cdc6b6 49%,#cdc6b6 51%,transparent 52%),
                   linear-gradient(-45deg,transparent 48%,#d8d1c1 49%,#d8d1c1 51%,transparent 52%);
}
.map-pin{position:relative;z-index:2;width:58px;height:58px;border-radius:50% 50% 50% 0;background:var(--char);transform:rotate(-45deg);margin:auto}
.map-pin::after{content:"";position:absolute;inset:17px;border-radius:50%;background:var(--accent)}
.map-copy{position:relative;z-index:2;background:rgba(255,255,255,.82);padding:20px 26px;margin-top:30px}

/* Live orbiting store map (Contact page) */
.map-live{
  position:relative;min-height:480px;height:52vh;max-height:620px;overflow:hidden;
  border:1px solid var(--rule-light-2);background:linear-gradient(140deg,var(--paper-2),var(--paper-3));
}
.map-live::before{
  content:"";position:absolute;inset:0;opacity:.4;background-size:82px 82px;pointer-events:none;
  background-image:linear-gradient(45deg,transparent 48%,#cdc6b6 49%,#cdc6b6 51%,transparent 52%),
                   linear-gradient(-45deg,transparent 48%,#d8d1c1 49%,#d8d1c1 51%,transparent 52%);
  transition:opacity .6s var(--ease);z-index:1;
}
.map-live.is-ready::before{opacity:0}
.map-live .maplibregl-canvas{outline:none}
.map-live .map-frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;z-index:2;filter:grayscale(.12) contrast(1.02)}

/* Animated store marker: pin <-> "Located Here" pill */
.store-marker-anim{position:relative;width:40px;height:50px;cursor:default}
.store-marker-anim .sm-pin{
  position:absolute;left:50%;bottom:0;width:34px;height:34px;margin-left:-17px;
  border-radius:50% 50% 50% 0;background:var(--char);transform-origin:50% 100%;
  transform:rotate(-45deg);box-shadow:0 7px 16px -5px rgba(0,0,0,.55);
  animation:smPin 7s var(--ease) infinite;
}
.store-marker-anim .sm-pin::after{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--accent)}
.store-marker-anim .sm-pulse{
  position:absolute;left:50%;bottom:2px;width:16px;height:16px;margin-left:-8px;border-radius:50%;
  background:rgba(247,165,22,.5);transform-origin:50% 50%;animation:smPulse 2.6s var(--ease-out) infinite;
}
.store-marker-anim .sm-label{
  position:absolute;left:50%;bottom:4px;transform:translateX(-50%) scale(.6);transform-origin:50% 100%;
  white-space:nowrap;background:var(--char);color:#fff;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;padding:8px 14px;border-radius:3px;
  box-shadow:0 8px 20px -6px rgba(0,0,0,.6);opacity:0;pointer-events:none;
  animation:smLabel 7s var(--ease) infinite;
}
.store-marker-anim .sm-label::after{
  content:"";position:absolute;left:50%;bottom:-5px;margin-left:-5px;width:10px;height:10px;
  background:var(--char);transform:rotate(45deg)
}
/* Pin visible 0-14%, collapse, label shown ~28-66%, pin returns ~82% */
@keyframes smPin{
  0%,14%{opacity:1;transform:rotate(-45deg) scale(1)}
  22%,74%{opacity:0;transform:rotate(-45deg) scale(.1)}
  82%,100%{opacity:1;transform:rotate(-45deg) scale(1)}
}
@keyframes smLabel{
  0%,20%{opacity:0;transform:translateX(-50%) scale(.6)}
  30%,66%{opacity:1;transform:translateX(-50%) scale(1)}
  76%,100%{opacity:0;transform:translateX(-50%) scale(.6)}
}
@keyframes smPulse{
  0%{transform:scale(1);opacity:.55}
  70%{transform:scale(3.4);opacity:0}
  100%{transform:scale(3.4);opacity:0}
}
/* Reduced motion / static: just the pin, no morph or pulse */
.store-marker-anim.is-static .sm-pin{animation:none;opacity:1;transform:rotate(-45deg) scale(1)}
.store-marker-anim.is-static .sm-label,.store-marker-anim.is-static .sm-pulse{display:none}
@media (prefers-reduced-motion:reduce){
  .store-marker-anim .sm-pin{animation:none;opacity:1;transform:rotate(-45deg) scale(1)}
  .store-marker-anim .sm-label,.store-marker-anim .sm-pulse{display:none}
}
/* Address card overlaid on the map */
.map-live .map-overlay{
  position:absolute;left:22px;bottom:22px;z-index:3;max-width:340px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:20px 24px;box-shadow:0 16px 40px -18px rgba(0,0,0,.5);
  animation:mapCardIn .6s var(--ease-out) both;
}
.map-live .map-overlay strong{display:block;font-size:16px;margin-bottom:4px}
.map-live .map-overlay .map-overlay-addr{color:#3a352c;font-size:13.5px;line-height:1.5}
.map-live .map-overlay .btn{margin-top:16px}
@keyframes mapCardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
/* On-brand amber pin marker */
.store-marker{
  width:34px;height:34px;border-radius:50% 50% 50% 0;background:var(--char);
  transform:rotate(-45deg);box-shadow:0 6px 14px -4px rgba(0,0,0,.6);cursor:default;
  animation:markerDrop .5s var(--ease-out) both;
}
.store-marker::after{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--accent)}
@keyframes markerDrop{from{opacity:0;transform:rotate(-45deg) translateY(-16px)}to{opacity:1;transform:rotate(-45deg) translateY(0)}}
/* If tiles fail, keep the placeholder look and center the card */
.map-live.is-failed{display:grid;place-items:center;padding:34px;text-align:center}
.map-live.is-failed .map-overlay{position:static;left:auto;bottom:auto;max-width:none;animation:none;text-align:center}
@media (max-width:640px){
  .map-live{min-height:0;height:70vh;max-height:520px}
  .map-live .map-overlay{left:14px;right:14px;bottom:14px;max-width:none;padding:18px 20px}
}
@media (prefers-reduced-motion:reduce){
  .map-live .map-overlay,.store-marker{animation:none}
  .map-live.is-ready::before{transition:none}
}

/* 11. Forms ============================================================= */
.form-card{background:#fff;border:1px solid var(--rule-light-2);padding:clamp(30px,4vw,50px);transition:border-color .3s var(--ease)}
.form-card:hover{}
.form{display:grid;gap:22px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:grid;gap:10px;min-width:0}
.field label{font-size:9.5px;text-transform:uppercase;letter-spacing:.2em;font-weight:600;line-height:1.4;color:var(--on-light-2)}
/* Required was announced to screen readers but invisible to everyone else
   until submit, and then one field at a time. */
.field:has(input[required],textarea[required],select[required]) label::after{
  content:" *";color:var(--accent-ink);font-weight:700;
}
.field input,.field textarea,.field select{
  width:100%;min-height:52px;border:1px solid var(--control-line);background:#fdfcfa;
  padding:15px 16px;line-height:1.45;color:var(--on-light-1);
  transition:border-color .28s var(--ease),box-shadow .28s var(--ease),background-color .28s var(--ease);
}
.field textarea{min-height:156px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent-ink);background:#fff}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px}
/* Checkbox groups. A fieldset+legend rather than a floating label, so the
   question is announced with each option instead of the screen reader reading
   "Sending, checkbox" with no idea what it is answering. */
.field-group{border:0;padding:0;margin:0;display:grid;gap:12px;min-width:0}
.field-group legend{
  padding:0;margin-bottom:2px;
  font-size:9.5px;text-transform:uppercase;letter-spacing:.2em;font-weight:600;
  line-height:1.4;color:var(--on-light-2);
}
.field-group[data-require-one] legend::after{content:" *";color:var(--accent-ink);font-weight:700}
.field-group.invalid legend{color:#8c2f1d}
.field-error{
  margin:2px 0 0;font-size:12.5px;line-height:1.5;color:#8c2f1d;font-weight:600;
}
/* .form is a grid, so an empty upload list or status line still spends a 22px
   gap. Five empty rows stacked up as ~90px of dead space under the drop zone. */
.upload-list:empty,.field-help:empty{display:none}
/* .checkbox-line is aligned flex-start for the long consignment acknowledgement,
   which wraps. Inside an option group each line is short, so centre them and
   give the row a full-height hit area. */
.field-group .checkbox-line{align-items:center;gap:12px;min-height:34px}
.form-status{font-size:13px;color:var(--on-light-2);min-height:18px;line-height:1.6}

/* Animated "Thank you" success panel (shown in place of a submitted form) */
.form-success{
  display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:6px 0;
  opacity:0;transform:translateY(12px);
  transition:opacity .55s var(--ease),transform .55s var(--ease-out);
}
.form-success.is-visible{opacity:1;transform:none}
.form-success-check{width:62px;height:62px;margin-bottom:20px}
.form-success-check svg{width:100%;height:100%;display:block}
.fsc-ring{stroke:var(--accent);stroke-width:2.4;stroke-dasharray:151;stroke-dashoffset:151}
.fsc-tick{stroke:var(--accent);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:48;stroke-dashoffset:48}
.form-success.is-visible .fsc-ring{animation:fscRing .6s var(--ease-out) forwards}
.form-success.is-visible .fsc-tick{animation:fscTick .4s var(--ease-out) .5s forwards}
@keyframes fscRing{to{stroke-dashoffset:0}}
@keyframes fscTick{to{stroke-dashoffset:0}}
.form-success-title{font-size:27px;line-height:1.08;margin:0 0 10px;font-weight:700;letter-spacing:-.01em}
.form-success-title:focus{outline:none}
.form-success-msg{font-size:14px;color:var(--on-light-2);line-height:1.6;margin:0 0 24px;max-width:48ch}
.form-success-again{width:max-content}
.form-success--compact{align-items:flex-start}
.form-success--compact .form-success-check{width:42px;height:42px;margin-bottom:12px}
.form-success--compact .form-success-title{font-size:19px;margin-bottom:6px}
.form-success--compact .form-success-msg{font-size:13px;margin-bottom:16px}
@media (prefers-reduced-motion:reduce){
  .form-success{transition:none;opacity:1;transform:none}
  .form-success .fsc-ring,.form-success .fsc-tick{animation:none!important;stroke-dashoffset:0}
}
.form-section-label{
  font-size:9px;text-transform:uppercase;letter-spacing:.24em;color:var(--accent-ink);
  border-bottom:1px solid var(--rule-light-2);padding-bottom:12px;margin:10px 0 2px;font-weight:600;
}
.field-help{font-size:12px;color:var(--on-light-3);margin-top:6px}
.checkbox-line{display:flex;gap:12px;align-items:flex-start;font-size:13px;line-height:1.6;color:var(--on-light-2)}
.checkbox-line input{margin-top:3px;min-width:18px;min-height:18px;accent-color:var(--accent-ink)}

/* :focus-within because the real <input type=file> is a clipped 1x1 box inside
   this zone — its own focus ring is clipped away with it, leaving a keyboard
   user with a tab stop that shows nothing at all. */
.upload-zone:focus-within{
  border-color:var(--accent-ink);border-style:solid;
  outline:2px solid var(--accent-ink);outline-offset:3px;
}
.upload-zone{
  position:relative;overflow:hidden;border:1.5px dashed var(--accent-ink);background:var(--paper-2);
  min-height:210px;display:grid;place-items:center;text-align:center;padding:36px 26px;cursor:pointer;
  transition:border-color .28s var(--ease),background-color .28s var(--ease);
}
.upload-zone:hover,.upload-zone.drag{border-color:var(--accent-ink);background:#fdfaf2}
.upload-zone-inner{display:grid;justify-items:center;gap:4px}
.upload-zone strong{display:block;font-family:var(--display);font-size:18px;font-weight:800;letter-spacing:-.01em}
.upload-zone span{display:block;color:var(--on-light-3);font-size:12.5px;margin-top:9px;letter-spacing:.02em}
.upload-choose{margin-top:20px}
.upload-zone input[type="file"]{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.upload-list{display:grid;gap:8px;margin-top:16px}
.upload-item{display:grid;grid-template-columns:56px minmax(0,1fr) 44px;gap:14px;align-items:center;padding:10px;border:1px solid var(--rule-light-2);background:#fff}
.upload-thumb{width:52px;height:52px;object-fit:cover;background:var(--paper-3)}
.upload-thumb-doc{
  background:var(--paper-3) center/22px 22px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A5600' stroke-width='1.6'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3C/svg%3E");
}
.upload-copy{min-width:0}
.upload-copy strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;line-height:1.4;font-weight:600}
.upload-copy span{font-size:11px;color:var(--on-light-3)}
.upload-remove{border:0;background:none;cursor:pointer;font-weight:600;padding:10px;color:var(--on-light-1)}
.upload-progress{height:2px;background:var(--paper-3);margin-top:8px;overflow:hidden}
.upload-progress i{display:block;height:100%;width:100%;background:var(--accent-ink);transform-origin:left;animation:uploadIn .7s var(--ease-out)}
@keyframes uploadIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* 12. FAQ =============================================================== */
/* FAQ ------------------------------------------------------------------
   Was a 940px column pinned left in a 1360px shell, leaving 460px of dead
   space, with the questions sitting straight on the page background — 15px
   from the viewport edge at 390px. Now a card with real internal padding,
   and the spare column carries a topic index. */
.faq-panel{grid-column:1/-1}
.faq-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(26px,3vw,44px)}
@media(min-width:1080px){
  .faq-layout{grid-template-columns:238px minmax(0,1fr);gap:clamp(36px,4vw,72px);align-items:start}
  .faq-index{position:sticky;top:calc(var(--nav-h) + 28px)}
}
.faq-index-label{
  font-size:9.5px;text-transform:uppercase;letter-spacing:.24em;font-weight:700;
  color:var(--on-light-1);margin:0 0 16px;padding-bottom:14px;
  border-bottom:2px solid var(--accent);
}
.faq-index ul{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.faq-index nav a{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:13px 14px;min-height:44px;
  font-size:13.5px;line-height:1.4;color:var(--on-light-2);
  border-left:2px solid transparent;
  transition:background-color .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease);
}
.faq-index nav a:hover,.faq-index nav a:focus-visible{
  background:#fff;color:var(--on-light-1);border-left-color:var(--accent-ink);
}
.faq-index-count{
  flex:none;font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--on-light-3);
}
.faq-index-help{
  margin:22px 0 0;padding-top:18px;border-top:1px solid var(--rule-light-2);
  font-size:12.5px;line-height:1.6;color:var(--on-light-3);
}
.faq-index-help a{color:var(--accent-ink);font-weight:600;border-bottom:1px solid rgba(154,86,0,.4);white-space:nowrap}

/* Below the two-column breakpoint the index is not a sidebar, it is a block of
   list sitting between the reader and the search box. Compress it to a single
   scrollable row of chips — same links, about 90px instead of 700px. */
@media(max-width:1079px){
  .faq-index-label{
    font-size:9px;letter-spacing:.2em;margin:0 0 10px;padding-bottom:0;border-bottom:0;
  }
  .faq-index nav ul{display:flex;flex-wrap:wrap;gap:8px}
  .faq-index nav a{
    flex:none;border:1px solid var(--control-line);border-left-width:1px;
    padding:0 14px;min-height:42px;align-items:center;gap:9px;
    font-size:12.5px;white-space:nowrap;
  }
  .faq-index nav a:hover,.faq-index nav a:focus-visible{
    border-color:var(--accent-ink);border-left-color:var(--accent-ink);
  }
  .faq-index-help{display:none}   /* the number is in the quick-actions bar and the footer */
}

.faq-search-label{
  display:block;font-size:9.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.2em;color:var(--on-light-2);margin-bottom:10px;
}
.faq-search-wrap{position:relative;display:block}
.faq-search-icon{
  position:absolute;left:18px;top:50%;width:19px;height:19px;margin-top:-9.5px;
  color:var(--on-light-3);pointer-events:none;
}
.faq-search{
  width:100%;min-height:58px;padding:17px 18px 17px 48px;
  border:1px solid var(--control-line);background:#fff;color:var(--on-light-1);
  font-size:15px;
  transition:border-color .25s var(--ease);
}
.faq-search::placeholder{color:var(--on-light-3)}
.faq-search:hover{border-color:var(--accent-ink)}
.faq-search-status{font-size:13px;color:var(--on-light-2);margin:12px 0 22px;min-height:20px}

/* The card. Its padding is what keeps text off the viewport edge at every
   width, which the bare list never did. */
.faq-list{
  background:#fff;border:1px solid var(--rule-light);
  padding:clamp(18px,4vw,44px);
}
.faq-group{
  font-size:9.5px;text-transform:uppercase;letter-spacing:.24em;font-weight:700;
  color:var(--on-light-1);margin:44px 0 0;padding:0 0 14px;
  border-bottom:2px solid var(--accent);
}
.faq-group:first-child{margin-top:0}
.faq-item{border-bottom:1px solid var(--rule-light-2);transition:background-color .28s var(--ease)}
.faq-item:last-child{border-bottom:0}
.faq-q{
  background:none;border:0;width:100%;padding:24px 0 24px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  text-align:left;color:var(--on-light-1);cursor:pointer;
  line-height:1.45;font-size:17px;font-weight:500;letter-spacing:-.005em;
  position:relative;
  transition:color .25s var(--ease);
}
/* The accent bar marks the open item. Scaled rather than animated in width so
   it stays off the layout path. */
.faq-q::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;
  background:var(--accent);transform:scaleY(0);transform-origin:top;
  transition:transform .32s var(--ease-out);
}
.faq-item.open .faq-q::before,.faq-q:hover::before{transform:scaleY(1)}
.faq-item:hover{background:var(--paper-warm)}
.faq-q span:first-child{min-width:0;padding-right:8px}
.faq-item.open .faq-q{color:var(--on-light-1)}

/* Expand control: two bars that cross out to a minus, instead of swapping a
   text glyph. Rotation is composited; a text swap is not. */
.faq-toggle{
  flex:none;position:relative;width:34px;height:34px;
  border:1px solid var(--control-line);border-radius:50%;
  transition:border-color .25s var(--ease),background-color .25s var(--ease);
}
.faq-toggle::before,.faq-toggle::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--on-light-1);
  transition:transform .32s var(--ease-out),background-color .25s var(--ease);
}
.faq-toggle::before{width:13px;height:1.5px;margin:-.75px 0 0 -6.5px}
.faq-toggle::after{width:1.5px;height:13px;margin:-6.5px 0 0 -.75px}
.faq-item.open .faq-toggle{border-color:var(--accent-deep);background:var(--accent-wash)}
.faq-item.open .faq-toggle::before,.faq-item.open .faq-toggle::after{background:var(--accent-deep)}
.faq-item.open .faq-toggle::after{transform:rotate(90deg)}
.faq-q:hover .faq-toggle{border-color:var(--accent-deep)}

.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s var(--ease-out)}
.faq-a>div{overflow:hidden}
/* No .js guard on the rows above would leave answers unreachable without
   JavaScript, so open them all when the script never boots. */
html:not(.js) .faq-a{grid-template-rows:1fr}
.js .faq-a>div{visibility:hidden;transition:visibility 0s linear .42s}
.js .faq-item.open .faq-a>div{visibility:visible;transition:visibility 0s}
.faq-a p{
  margin:0;padding:0 clamp(0px,4vw,80px) 26px 20px;
  color:var(--on-light-2);line-height:1.8;font-size:15px;
}
.faq-item.open .faq-a{grid-template-rows:1fr}

/* 13. Dialogs =========================================================== */
.overlay{
  position:fixed;inset:0;background:rgba(6,6,5,.9);backdrop-filter:blur(16px);
  z-index:200;display:none;place-items:center;padding:26px;overflow:auto;
}
.overlay.show{display:grid}
.overlay[aria-hidden="true"]{display:none}
.overlay.show[aria-hidden="false"]{display:grid}

.modal{width:min(100%,640px);background:var(--paper);color:var(--on-light-1);padding:52px;position:relative;max-height:calc(100svh - 52px);overflow:auto}
.modal h2{font-family:var(--display);font-weight:900;font-size:32px;letter-spacing:-.022em;text-transform:uppercase}
.close{position:absolute;right:16px;top:12px;border:0;background:none;font-size:28px;cursor:pointer}
.promo-modal{width:min(92vw,960px);background:var(--black-3);padding:24px;color:var(--on-dark-1)}
/* The dialog used to contain nothing but an image of text and a close button,
   so a screen reader user got the alt text and no offer. The copy now exists as
   real text, which also survives zoom and reflow. */
.promo-modal-title{font:800 clamp(22px,2.6vw,32px)/1.15 var(--display);letter-spacing:-.018em;margin:4px 0 10px;padding-right:52px}
.promo-modal-body{color:var(--on-dark-2);line-height:1.65;margin:0 0 20px;max-width:62ch;font-size:15px}
.promo-modal img{width:100%;max-height:76vh;object-fit:contain}

.modal-shell{
  max-width:660px;width:min(100% - 32px,660px);background:var(--paper);color:var(--on-light-1);
  border:1px solid rgba(247,165,22,.44);box-shadow:0 44px 130px rgba(0,0,0,.55);
  padding:clamp(32px,5vw,60px);position:relative;max-height:calc(100svh - 52px);overflow:auto;
}
.modal-kicker{display:flex;align-items:center;gap:14px;text-transform:uppercase;letter-spacing:.26em;font-size:9px;font-weight:600;color:var(--accent-ink)}
.modal-kicker::before{content:"";width:26px;height:1px;background:var(--accent-ink)}
.modal-shell h2{font:900 clamp(28px,4.2vw,44px)/1.04 var(--display);letter-spacing:-.024em;margin:20px 0;text-transform:uppercase}
.modal-shell p{line-height:1.7;color:var(--on-light-2)}
.modal-close{position:absolute;right:16px;top:16px;width:44px;height:44px;border:1px solid var(--rule-light);background:#fff;color:var(--on-light-1);font-size:20px;cursor:pointer;transition:border-color .25s var(--ease)}
.modal-close:hover{border-color:var(--accent-ink)}
.age-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;margin-top:32px}
.age-grid input{min-height:56px;border:1px solid var(--rule-light);background:#fff;padding:0 18px;font:inherit}
.age-grid .btn{white-space:nowrap}
.modal-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.modal-note{font-size:12px;color:var(--on-light-3);margin-top:20px;line-height:1.65}

.newsletter-modal{
  width:min(940px,100%);max-width:940px;padding:0;overflow:hidden;
  display:grid;grid-template-columns:minmax(250px,.8fr) minmax(0,1.2fr);
}
.newsletter-art{
  min-height:460px;background-position:64% center;background-size:cover;
  background-image:linear-gradient(180deg,rgba(8,8,7,.05),rgba(8,8,7,.55)),url('assets/home-hero-1440.webp');
  background-image:linear-gradient(180deg,rgba(8,8,7,.05),rgba(8,8,7,.55)),image-set(url('assets/home-hero-1440.avif') type('image/avif'),url('assets/home-hero-1440.webp') type('image/webp'));
}
.newsletter-copy{padding:clamp(36px,5vw,56px)}
.newsletter-copy h2{line-height:1;margin:12px 0 20px}
.newsletter-benefits{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0}
.newsletter-benefits span{border:1px solid var(--rule-light);padding:9px 12px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;background:#fff;color:var(--on-light-2)}
.newsletter-form{display:grid;gap:12px}
.newsletter-form label{font-size:9.5px;text-transform:uppercase;letter-spacing:.2em;font-weight:600;color:var(--on-light-2)}
.newsletter-form input{min-height:54px;padding:0 16px;border:1px solid var(--rule-light);background:#fff}
.newsletter-status{font-size:13px;min-height:20px;margin-top:8px;color:var(--on-light-2);line-height:1.6}

/* 14. Google reviews module ============================================= */
/* Lifted to the warm mid tone, with a soft gold wash behind the rating so the
   section reads as the highlight it is rather than another black block. */
.review-premium{
  background:var(--paper);color:var(--on-light-1);padding:var(--section) 0;
  overflow:hidden;position:relative;border-top:2px solid var(--accent);
}
.review-premium::before{
  content:"";position:absolute;inset:0 0 auto 0;height:min(70%,620px);pointer-events:none;
  background:radial-gradient(120% 100% at 12% 0%,rgba(247,165,22,.13),transparent 70%);
}
.review-premium>*{position:relative}
/* Surface variant. Whether this block should be light or dark depends on what
   it sits between, so the page picks — rather than one page's rhythm dictating
   the other's. */
.review-premium.surface-dark{background:var(--char-2);color:var(--on-dark-1);border-top-color:var(--accent-line)}
.review-premium.surface-dark::before{background:radial-gradient(120% 100% at 12% 0%,var(--accent-glow),transparent 70%)}
.review-premium.surface-dark .h2{color:var(--on-dark-1)}
.review-premium.surface-dark .lead,.review-premium.surface-dark .body{color:var(--on-dark-2)}
.review-premium.surface-dark .eyebrow{color:var(--accent)}
.review-premium.surface-dark .stars{color:var(--accent)}
.review-premium.surface-dark .rating-number{color:var(--accent)}
.review-premium.surface-dark .rating-meta strong{color:var(--accent)}
.review-premium.surface-dark .rating-meta span,
.review-premium.surface-dark .review-source-note{color:var(--on-dark-3)}
.review-premium.surface-dark .review-quote{
  border-color:var(--rule-dark);background:linear-gradient(150deg,#26211a,#171410);color:var(--on-dark-1);
}
.review-premium.surface-dark .review-quote .stars{color:var(--accent)}
.review-premium.surface-dark .review-quote footer,
.review-premium.surface-dark .review-when{color:var(--on-dark-3)}
.review-premium.surface-dark .review-who strong{color:var(--on-dark-2)}
.review-premium.surface-dark .review-link{color:var(--accent)}
.review-premium.surface-dark .review-link:hover{border-color:var(--accent)}
.review-premium.surface-dark .review-avatar{background:#1b1a18}
.review-premium.surface-dark .btn-outline{border-color:rgba(247,165,22,.62);color:var(--on-dark-1);background:transparent}
.review-premium.surface-dark .btn-outline:hover{border-color:var(--accent);background:rgba(247,165,22,.16)}
/* This section is a light surface now, so everything inside it that was tuned
   for dark has to move to the light-surface accent and text tokens. */
.review-premium .stars{color:var(--accent-deep)}
.review-premium .lead,.review-premium .body{color:var(--on-light-2)}
.review-premium .eyebrow{color:var(--accent-ink)}
.review-premium .h2{color:var(--on-light-1)}
.review-premium .review-source-note{color:var(--on-light-3)}
.review-premium-grid{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.5fr);gap:clamp(48px,6vw,88px);align-items:start}
.rating-lockup{display:flex;gap:24px;align-items:flex-end;flex-wrap:wrap;row-gap:12px;margin:34px 0 22px}
.rating-number{font:900 clamp(70px,8vw,124px)/.86 var(--display);color:var(--accent-ink);letter-spacing:-.045em}
.rating-meta{padding-bottom:10px}
.rating-meta strong{display:block;color:var(--accent-ink);letter-spacing:.2em;font-size:14px}
.rating-meta span{color:var(--on-light-3);font-size:13px}
.review-stage{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
/* Auto-advancing review slider (built by script.js when live reviews load). */
.review-stage.has-carousel{display:block}
.review-carousel{position:relative}
.review-viewport{overflow:hidden}
.review-track{display:flex;transition:transform .55s var(--ease-out);will-change:transform}
.review-slide{flex:0 0 100%;min-width:0}
.review-nav{display:flex;align-items:center;gap:14px;margin-top:22px}
.review-arrow{
  width:46px;height:46px;flex:0 0 auto;border:1px solid var(--rule-light);background:#fff;
  color:var(--on-light-1);font-size:24px;line-height:1;display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:border-color .25s var(--ease),background-color .25s var(--ease);
}
.review-arrow:hover{border-color:var(--accent)}
.review-arrow:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.review-dots{display:flex;gap:9px;align-items:center;margin:0 4px}
.review-dot{
  width:9px;height:9px;padding:0;border-radius:50%;border:1px solid var(--accent-ink);
  background:transparent;cursor:pointer;transition:background-color .25s var(--ease)}
.review-dot.is-on{background:var(--accent-ink)}
.review-dot:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.review-pause{
  margin-left:auto;min-width:46px;height:46px;flex:0 0 auto;border:1px solid var(--rule-light);
  background:#fff;color:var(--on-light-1);cursor:pointer;font-size:12px;letter-spacing:.1em;
  transition:border-color .25s var(--ease)}
.review-pause:hover{border-color:var(--accent)}
.review-pause:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.review-track{transition:none}}
/* Dark variant (ffltransfers) */
.review-premium.surface-dark .review-arrow,.review-premium.surface-dark .review-pause{
  background:transparent;border-color:var(--rule-dark);color:var(--on-dark-1)}
.review-premium.surface-dark .review-dot{border-color:var(--accent)}
.review-premium.surface-dark .review-dot.is-on{background:var(--accent)}
.review-quote{
  min-width:0;min-height:320px;border:1px solid var(--rule-light);padding:38px;
  display:flex;flex-direction:column;justify-content:space-between;
  background:#fff;position:relative;overflow:hidden;color:var(--on-light-1);
  transition:border-color .35s var(--ease);
}
.review-quote:hover{border-color:rgba(247,165,22,.44)}
.review-quote::after{content:"\201C";position:absolute;right:20px;bottom:-96px;font:400 220px/1 Georgia,"Times New Roman",serif;color:rgba(247,165,22,.30)}
.review-quote .stars{color:var(--accent-deep);letter-spacing:.2em;font-size:12px}
.review-quote blockquote{font:300 clamp(21px,2.1vw,31px)/1.3 var(--display);margin:32px 0;letter-spacing:-.015em}
.review-quote footer{color:var(--on-light-3);font-size:12px;letter-spacing:.06em}
.review-byline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;position:relative;z-index:1}
.review-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--paper-3)}
.review-who{display:grid;gap:2px;min-width:0}
.review-who strong{color:var(--on-light-2);font-weight:600;font-size:12.5px;letter-spacing:.02em}
.review-when{font-size:11px;color:var(--on-light-3);letter-spacing:.04em}
.review-link{
  margin-left:auto;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);
  border-bottom:1px solid transparent;transition:border-color .25s var(--ease);white-space:nowrap;
}
.review-link:hover{border-color:var(--accent-ink)}
@media(max-width:900px){
  .service-card::after{
    background:linear-gradient(transparent 0%,transparent 12%,rgba(7,7,6,.5) 34%,rgba(7,7,6,.94) 62%,#070706 100%);
  }
}
@media(max-width:680px){.review-link{margin-left:0}}
.review-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.review-source-note{font-size:10.5px;color:#8b857b;margin-top:20px;letter-spacing:.04em}
.stars{color:var(--accent);letter-spacing:.2em}

/* 15. Email band + local SEO ============================================ */
.email-band{background:var(--paper-warm);padding:clamp(84px,7vw,116px) 0;border-top:2px solid var(--accent-ink)}
.email-band-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:center}
.email-inline{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px}
.email-inline input{min-width:0;min-height:56px;border:1px solid var(--rule-light);background:#fff;padding:0 18px;font:inherit}

.seo-local{background:#fff;padding:clamp(84px,7vw,116px) 0}
.local-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:center}
.local-city-list{display:flex;flex-wrap:wrap;gap:8px;align-content:start}
.local-city-list span{
  border:1px solid var(--rule-light-2);padding:11px 14px;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;background:var(--paper);color:var(--on-light-2);
}

.integration-badge{display:inline-flex;align-items:center;gap:8px;font-size:9.5px;text-transform:uppercase;letter-spacing:.2em;color:var(--on-light-3)}
.integration-badge i{width:6px;height:6px;border-radius:50%;background:var(--accent-ink)}

/* 15b. Instagram ======================================================== */
.instagram{background:var(--char);padding:var(--section) 0;border-top:1px solid var(--rule-dark)}
.instagram-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.instagram-tile{position:relative;aspect-ratio:1;overflow:hidden;background:var(--black-2);display:block}
.instagram-tile img{width:100%;height:100%;object-fit:cover;filter:saturate(1);transition:transform .8s var(--ease-out)}
.instagram-tile:hover img,.instagram-tile:focus-visible img{transform:scale(1.04)}
.instagram-tile-overlay{
  position:absolute;inset:0;display:flex;align-items:flex-end;padding:16px;
  opacity:0;transition:opacity .3s var(--ease);
  background:linear-gradient(transparent 42%,rgba(6,6,5,.88));
}
.instagram-tile:hover .instagram-tile-overlay,.instagram-tile:focus-visible .instagram-tile-overlay{opacity:1}
.instagram-caption{font-size:12px;line-height:1.5;color:#fff;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.instagram-follow{
  display:flex;align-items:center;gap:22px;margin-top:24px;padding:26px 30px;
  border:1px solid var(--rule-dark);background:var(--panel);
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.instagram-empty .instagram-follow{margin-top:0}
.instagram-follow:hover{border-color:rgba(247,165,22,.62);background:#141412}
.instagram-mark{width:42px;height:42px;flex:0 0 auto;border:1px solid var(--accent);border-radius:12px;position:relative}
.instagram-mark::before{content:"";position:absolute;inset:10px;border:1px solid var(--accent);border-radius:50%}
.instagram-mark::after{content:"";position:absolute;right:7px;top:6px;width:3px;height:3px;border-radius:50%;background:var(--accent)}
.instagram-follow-copy{display:grid;gap:6px;min-width:0}
.instagram-follow-copy strong{font-family:var(--display);font-size:17px;font-weight:800;letter-spacing:-.005em}
.instagram-follow-copy span{font-size:12.5px;color:var(--on-dark-3)}
.instagram-follow-cta{margin-left:auto;color:var(--accent);font-size:18px}

/* 16. Consignment journey =============================================== */
.consignment-intro{padding:var(--section) 0;background:var(--paper-warm)}
.consignment-journey{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:58px;
  border-top:1px solid var(--rule-light);border-left:1px solid var(--rule-light);
}
.journey-card{
  min-width:0;min-height:320px;padding:38px 34px 68px;position:relative;background:var(--paper);
  border-right:1px solid var(--rule-light);border-bottom:1px solid var(--rule-light);
  transition:background-color .3s var(--ease);
}
.journey-card:hover{background:#fff;z-index:2}
/* The step numbers are the strongest structural cue on this module; at 38px in
   gold-ink they now read as the numbering they are. */
.journey-number{font:900 54px/1 var(--display);color:var(--accent-ink);letter-spacing:-.03em}
.journey-card h3{font-family:var(--display);font-weight:800;font-size:20px;line-height:1.22;letter-spacing:-.012em;margin:50px 0 14px}
.journey-card p{color:var(--on-light-3);line-height:1.72;font-size:14px;margin-bottom:0}
.journey-card .micro{
  position:absolute;left:34px;right:34px;bottom:30px;line-height:1.4;
  font-size:9.5px;text-transform:uppercase;letter-spacing:.2em;color:var(--accent-ink);
}

/* 16b. Responsible ownership & resources ================================ */
.resources{background:var(--paper);padding:var(--section) 0}
.resources-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--rule-light);border-left:1px solid var(--rule-light)}
.resource-group{
  min-width:0;padding:38px 34px 42px;background:#fff;
  border-right:1px solid var(--rule-light);border-bottom:1px solid var(--rule-light);
}
.resource-group h3{font-size:11px;text-transform:uppercase;letter-spacing:.18em;line-height:1.4;margin:0 0 14px;font-family:var(--sans);font-weight:600}
.resource-group>p{font-size:13.5px;line-height:1.7;color:var(--on-light-3);margin:0 0 24px;max-width:40ch}
.resource-links{list-style:none;margin:0;padding:0;display:grid;gap:0}
.resource-links a{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;justify-content:space-between;
  min-height:46px;padding:13px 0;border-top:1px solid var(--rule-light-2);
  font-size:14px;font-weight:400;color:var(--on-light-1);
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.resource-links a:hover{color:var(--accent-ink);border-color:var(--accent-ink)}
.resource-links a::after{content:"\2197";color:var(--accent-ink);font-weight:500;order:3}
.resource-host{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-light-3);order:2;flex:1 0 auto}
.resource-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.resources-note{max-width:80ch;margin:34px 0 0;font-size:12px;line-height:1.75;color:var(--on-light-3)}

/* 17. Team ============================================================== */
/* theteam was the only page that was 100% near-black top to bottom. The wash
   and the lifted --panel cards give it the internal range it had none of. */
/* theteam was the only page with no relief at all: dark hero, dark team block
   and dark footer, 3,523px end to end. The team block carries the page, so it
   is the one to flip. */
.team-system{
  background:var(--paper);color:var(--on-light-1);padding:var(--section) 0;
  position:relative;isolation:isolate;border-top:2px solid var(--accent);
}
.team-system::before{
  content:"";position:absolute;inset:0 0 auto 0;height:min(55%,520px);pointer-events:none;
  background:radial-gradient(ellipse at 85% -14%,rgba(247,165,22,.13),transparent 72%);
}
.team-system>*{position:relative}
.team-intro-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--gap);align-items:start;margin-bottom:60px}
.team-system .lead{color:var(--on-light-2)}
.team-system .eyebrow{color:var(--accent-ink)}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.team-member{
  min-width:0;border:1px solid var(--rule-light);background:#fff;
  position:relative;overflow:hidden;
  transition:border-color .3s var(--ease),transform .45s var(--ease);
}
.team-member:hover{border-color:var(--accent-deep);transform:translate3d(0,-5px,0)}
.team-photo{aspect-ratio:5/6;overflow:hidden;background:var(--paper-3)}
.team-photo img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.team-member:hover .team-photo img{transform:scale(1.03)}
.team-member-copy{padding:24px 22px 26px}
.team-member-copy h3{
  font:800 clamp(17px,1.5vw,21px)/1.2 var(--display);letter-spacing:-.012em;
  margin:0 0 4px;color:var(--on-light-1);
}
.team-role{
  display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.2em;
  font-weight:700;color:var(--accent-ink);margin-bottom:14px;
}
.team-member-copy p{color:var(--on-light-2);line-height:1.65;margin:0;font-size:13.5px;font-weight:300}
@media(max-width:1080px){.team-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.team-grid{grid-template-columns:repeat(2,1fr);gap:14px}}
@media(max-width:430px){.team-grid{grid-template-columns:1fr}}
.character-note{margin-top:28px;padding:24px 28px;border:1px solid var(--rule-light);background:#fff;color:var(--on-light-2);font-size:13.5px;line-height:1.7}
.character-note strong{color:var(--on-light-1)}

/* Employee-of-the-month spotlight (Meet the Team). One card shows per month;
   script.js swaps which. The [hidden] override matters — .spotlight-card sets
   display:grid, which would otherwise beat the UA [hidden] rule and reveal all. */
.spotlight{background:var(--paper);padding:clamp(52px,7vw,84px) 0}
/* Team illustration shown above the highlight-of-the-month. */
.team-figure{width:65%;margin:0 auto clamp(38px,5vw,60px)}
@media(max-width:760px){.team-figure{width:100%}}
.team-figure img{width:100%;height:auto;display:block;border-radius:20px;border:1px solid var(--rule-light);box-shadow:0 26px 54px -22px rgba(20,25,35,.28)}
.team-figure figcaption{margin-top:14px;font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ink);text-align:center}
.spotlight-head{max-width:680px;margin-bottom:clamp(28px,4vw,44px)}
/* Darker accent for AA contrast on the light band (bright --accent fails on paper). */
.spotlight-head .eyebrow{color:var(--accent-ink)}
.spotlight-head .body{margin-top:14px}
.spotlight-card{
  display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(22px,3vw,40px);align-items:center;
  max-width:820px;margin:0 auto;
  background:#fff;border:1px solid var(--rule-light);border-top:3px solid var(--accent);
  padding:clamp(18px,2.4vw,30px);
}
.spotlight-card[hidden]{display:none}
.spotlight-media{overflow:hidden;background:var(--paper-3);aspect-ratio:5/6}
.spotlight-media img{width:100%;height:100%;object-fit:cover;display:block}
.spotlight-card--group .spotlight-media{aspect-ratio:16/10}
.spotlight-tag{
  display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.22em;
  font-weight:700;color:var(--accent-ink);margin-bottom:16px;
}
.spotlight-name{
  font-family:var(--display);font-weight:800;font-size:clamp(30px,4vw,46px);
  letter-spacing:-.02em;line-height:1;color:var(--on-light-1);margin:0 0 12px;
}
.spotlight-copy .team-role{margin-bottom:16px}
.spotlight-copy p{color:var(--on-light-2);line-height:1.7;margin:0;font-size:15px}
.spotlight-copy p + p{margin-top:14px}
.spotlight-media picture{display:block;width:100%;height:100%}
/* Cut-out artwork (transparent PNG/WebP, e.g. an action-figure blister card):
   shown whole at its own shape, no frame colour behind it, never cropped. */
.spotlight-card--cutout{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.spotlight-card--cutout .spotlight-media{aspect-ratio:auto;background:transparent;overflow:visible;padding:6px 6px 18px}
.spotlight-card--cutout .spotlight-media img{height:auto;object-fit:contain;filter:drop-shadow(0 24px 28px rgba(20,19,15,.32)) drop-shadow(0 5px 9px rgba(20,19,15,.20))}
.spotlight-quote{
  border-left:3px solid var(--accent);padding-left:14px;
  font-style:italic;color:var(--on-light-1)!important;
}
@media(max-width:760px){
  .spotlight-card{grid-template-columns:1fr;gap:22px}
  .spotlight-media{aspect-ratio:4/3;max-height:360px}
  .spotlight-card--cutout{grid-template-columns:1fr}
  .spotlight-card--cutout .spotlight-media{aspect-ratio:auto;max-height:none;max-width:340px;margin:0 auto;width:100%}
}

/* 18. Mobile quick actions ============================================== */
.mobile-actions{
  display:none;position:fixed;left:12px;right:12px;bottom:12px;z-index:90;gap:1px;padding:0;
  background:var(--rule-dark);border:1px solid var(--rule-dark);
}
.mobile-actions a{
  flex:1;min-height:50px;display:grid;place-items:center;color:var(--on-dark-1);
  background:rgba(10,10,9,.95);
  font-size:10px;text-transform:uppercase;letter-spacing:.18em;
}
.mobile-actions a:last-child{color:#0b0b0a;background:var(--accent)}
/* The bar is a page-level shortcut. While the full-screen menu is open it was
   the one thing punching through it, sitting on top of the menu's own phone
   number — and its links stayed in the accessibility tree behind a menu that
   traps focus. The menu carries the address, hours and number itself. */
body.menu-open .mobile-actions{display:none}

/* 19. Review approval workflow (internal) =============================== */
.review-admin{background:var(--paper-2);color:var(--on-light-1);min-height:100vh;padding:150px 0 100px}
.admin-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.75fr);gap:var(--gap);align-items:start;margin-bottom:50px}
.admin-head .h2{font-size:clamp(34px,4vw,60px)}
.admin-status{padding:20px;border:1px solid var(--rule-light);background:#fff;font-size:13px;line-height:1.7}
.review-queue{display:grid;gap:16px}
.queue-card{background:#fff;border:1px solid var(--rule-light-2);padding:32px;display:grid;grid-template-columns:210px minmax(0,1fr);gap:34px}
.queue-meta{border-right:1px solid var(--rule-light-2);padding-right:30px}
.queue-meta strong{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.16em}
.queue-rating{color:var(--accent-ink);letter-spacing:.18em;margin:14px 0}
.queue-review{font:300 24px/1.4 var(--display);margin:0 0 26px}
.queue-tools{display:grid;gap:14px}
.queue-tools textarea{width:100%;min-height:132px;border:1px solid var(--rule-light);padding:15px;font:inherit;resize:vertical}
.queue-actions{display:flex;gap:10px;flex-wrap:wrap}
.queue-state{font-size:11px;color:var(--on-light-3);min-height:18px}
.queue-card.approved{border-color:rgba(154,86,0,.4);background:#fffdf7}
.queue-card.approved .queue-state{color:var(--accent-ink);font-weight:600}

/* 20. Live consignment availability ===================================== */
.consignment-availability{
  background:var(--char-2);color:var(--on-dark-1);padding:var(--section) 0;
  border-top:1px solid var(--accent-line);border-bottom:1px solid var(--accent-line);
}
.availability-head{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(270px,.5fr);
  gap:clamp(44px,7vw,110px);align-items:end;margin-bottom:clamp(48px,6vw,80px);
}
.availability-copy{min-width:0}
.availability-copy .h2{max-width:16ch;margin-bottom:26px}
.availability-copy .lead{max-width:52ch;color:var(--on-dark-2)}
.availability-source{
  justify-self:end;width:min(100%,330px);display:grid;grid-template-columns:10px 1fr;gap:16px;
  align-items:start;border-left:1px solid var(--rule-dark);padding:8px 0 8px 26px;
}
.availability-source strong,.availability-source span{display:block}
.availability-source strong{text-transform:uppercase;letter-spacing:.2em;font-size:9.5px;color:var(--accent);margin-bottom:9px;font-weight:600}
.availability-source span{font-size:12.5px;line-height:1.6;color:var(--on-dark-3)}
.availability-live-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);margin-top:4px;box-shadow:0 0 0 4px rgba(247,165,22,.16)}
.availability-source[data-state="error"] .availability-live-dot{background:#7d786f;box-shadow:none}
.inventory-controls{position:sticky;top:var(--nav-h);z-index:40;background:var(--char-2);padding:14px 0 16px;margin-bottom:22px;border-bottom:1px solid var(--rule-dark-2);box-shadow:0 14px 24px -18px rgba(0,0,0,.6)}
.inventory-controls .inventory-refine:last-child{margin-bottom:0}
@media(max-width:760px){.inventory-controls{position:static;box-shadow:none;padding:0;margin-bottom:18px;border-bottom:none}}
.availability-toolbar{display:flex;justify-content:space-between;align-items:end;gap:30px;padding:0 0 14px;border-bottom:1px solid var(--rule-dark-2);margin-bottom:14px}
.availability-disclaimer{max-width:88ch;color:#8b857b;font-size:11px;line-height:1.75;margin:36px 0 0}

.inventory-search{width:min(100%,540px);display:grid;gap:11px}
.inventory-search span{text-transform:uppercase;letter-spacing:.22em;font-size:9px;color:var(--on-dark-3);font-weight:600}
.inventory-search input{
  width:100%;height:54px;border:1px solid var(--control-line-dark);background:transparent;color:var(--on-dark-1);
  padding:0 18px;transition:border-color .25s var(--ease),background-color .25s var(--ease);
}
.inventory-search input::placeholder{color:#7d786f}
.inventory-search input:focus{border-color:var(--accent);background:rgba(247,165,22,.07)}
.inventory-count{text-align:right;color:var(--on-dark-3);font-size:11.5px;line-height:1.5;min-width:180px;letter-spacing:.08em}

.inventory-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.inventory-filter{
  min-height:42px;padding:0 18px;cursor:pointer;background:transparent;
  border:1px solid var(--control-line-dark);color:var(--on-dark-2);
  font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.2em;
  transition:border-color .25s var(--ease),color .25s var(--ease),background-color .25s var(--ease);
}
.inventory-filter:hover{border-color:var(--accent);color:var(--on-dark-1)}
.inventory-filter.active{background:var(--accent);border-color:var(--accent);color:#0b0b0a}

/* Secondary filters: manufacturer / condition / price dropdowns + reset. */
.inventory-refine{display:flex;flex-wrap:wrap;align-items:end;gap:14px 22px;margin:0}
.refine-field{display:grid;gap:9px;min-width:190px}
.refine-field span{text-transform:uppercase;letter-spacing:.22em;font-size:9px;color:var(--on-dark-3);font-weight:600}
.refine-field select{
  appearance:none;-webkit-appearance:none;
  width:100%;height:46px;padding:0 40px 0 15px;cursor:pointer;
  border:1px solid var(--control-line-dark);background:transparent;color:var(--on-dark-1);
  font:inherit;font-size:13px;letter-spacing:.02em;border-radius:0;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23f7a516' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;
  transition:border-color .25s var(--ease),background-color .25s var(--ease);
}
.refine-field select:hover{border-color:var(--accent)}
.refine-field select:focus{outline:none;border-color:var(--accent);background-color:rgba(247,165,22,.07)}
.refine-field select option{color:#111;background:#fff}

/* Custom on-brand dropdown (progressive enhancement of .refine-field select) */
.refine-field select.cs-native{display:none}
.cs{position:relative;width:100%}
.cs-trigger{
  appearance:none;-webkit-appearance:none;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;height:46px;padding:0 15px;cursor:pointer;text-align:left;
  border:1px solid var(--control-line-dark);background:transparent;color:var(--on-dark-1);
  font:inherit;font-size:13px;letter-spacing:.02em;border-radius:0;
  transition:border-color .25s var(--ease),background-color .25s var(--ease);
}
.cs-trigger:hover{border-color:var(--accent)}
.cs-trigger:focus-visible{outline:none;border-color:var(--accent);background-color:rgba(247,165,22,.07)}
.cs.is-open .cs-trigger{border-color:var(--accent);background-color:rgba(247,165,22,.07)}
.cs-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-chevron{display:flex;color:var(--accent);transition:transform .3s var(--ease)}
.cs.is-open .cs-chevron{transform:rotate(180deg)}

.cs-panel{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;
  max-height:280px;overflow-y:auto;overscroll-behavior:contain;
  background:#100f0d;border:1px solid rgba(247,165,22,.42);
  box-shadow:0 18px 40px -14px rgba(0,0,0,.75);
  padding:5px;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-6px) scale(.985);transform-origin:top center;
  transition:opacity .18s var(--ease),transform .22s var(--ease-out),visibility 0s linear .22s;
}
.cs.cs-drop-up .cs-panel{top:auto;bottom:calc(100% + 6px);transform-origin:bottom center;transform:translateY(6px) scale(.985)}
.cs.is-open .cs-panel{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateY(0) scale(1);
  transition:opacity .2s var(--ease),transform .26s var(--ease-out);
}
.cs-option{
  padding:10px 13px;font-size:13px;letter-spacing:.02em;color:var(--on-dark-2);
  cursor:pointer;border-radius:2px;border-left:2px solid transparent;
  transition:background-color .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease);
}
.cs-option:hover,.cs-option.is-active{background-color:rgba(247,165,22,.14);color:var(--on-dark-1)}
.cs-option[aria-selected="true"]{color:var(--accent);border-left-color:var(--accent);font-weight:600}
.cs-option[aria-selected="true"].is-active{background-color:rgba(247,165,22,.2)}

/* Themed scrollbar for the panel */
.cs-panel{scrollbar-width:thin;scrollbar-color:rgba(247,165,22,.5) transparent}
.cs-panel::-webkit-scrollbar{width:8px}
.cs-panel::-webkit-scrollbar-track{background:transparent}
.cs-panel::-webkit-scrollbar-thumb{background:rgba(247,165,22,.42);border-radius:8px;border:2px solid #100f0d}
.cs-panel::-webkit-scrollbar-thumb:hover{background:rgba(247,165,22,.65)}

@media (prefers-reduced-motion:reduce){
  .cs-panel{transition:opacity .12s linear,visibility 0s linear .12s;transform:none}
  .cs.cs-drop-up .cs-panel{transform:none}
  .cs.is-open .cs-panel{transform:none;transition:opacity .12s linear}
  .cs-chevron{transition:none}
}
.inventory-reset{
  min-height:46px;padding:0 6px 3px;cursor:pointer;background:none;border:0;
  color:var(--on-dark-3);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.2em;
  border-bottom:1px solid transparent;transition:color .25s var(--ease),border-color .25s var(--ease);
}
.inventory-reset:hover{color:var(--accent);border-bottom-color:var(--accent)}

.inventory-results{min-height:320px}
.inventory-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.inventory-list-heading{
  font-size:9.5px;text-transform:uppercase;letter-spacing:.26em;color:var(--accent);
  margin:52px 0 0;padding:22px 0 14px;border-top:1px solid var(--rule-dark-2);font-weight:600;
}
.inventory-card{
  min-width:0;border:1px solid var(--rule-dark);background:var(--panel);
  display:flex;flex-direction:column;overflow:hidden;
  transition:border-color .3s var(--ease),background-color .3s var(--ease),transform .3s var(--ease);
}
.inventory-card:hover{border-color:var(--accent-line);transform:translate3d(0,-4px,0)}
.inventory-card:hover{border-color:rgba(247,165,22,.55);background:#141412}
.inventory-media{position:relative;aspect-ratio:4/3;background:#111110;overflow:hidden}
.inventory-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease-out)}
.inventory-card:hover .inventory-media img{transform:scale(1.03)}
.inventory-status{
  position:absolute;left:16px;top:16px;z-index:2;background:rgba(7,7,6,.85);
  border:1px solid var(--rule-dark);padding:8px 11px;
  text-transform:uppercase;letter-spacing:.2em;font-size:9px;font-weight:600;color:var(--on-dark-1);
}
.inventory-status.available{color:var(--accent-soft);border-color:rgba(247,165,22,.52)}
.inventory-status.hold{color:#e5d3b0}
.inventory-status.pending{color:var(--on-dark-2)}
.inventory-ref{
  position:absolute;right:16px;top:16px;z-index:2;background:rgba(7,7,6,.78);
  border:1px solid var(--rule-dark-2);padding:7px 10px;
  text-transform:uppercase;letter-spacing:.18em;font-size:9px;color:var(--on-dark-3);
}
.inventory-gallery-controls{position:absolute;right:14px;bottom:14px;z-index:3;display:flex;align-items:center;gap:6px}
.inventory-gallery-controls button{
  width:38px;height:38px;border:1px solid var(--rule-dark);background:rgba(7,7,6,.8);color:var(--on-dark-1);
  display:grid;place-items:center;cursor:pointer;font-size:16px;
  transition:border-color .25s var(--ease),background-color .25s var(--ease);
}
.inventory-gallery-controls button:hover,.inventory-gallery-controls button:focus-visible{border-color:var(--accent);background:var(--black-3)}
.inventory-image-count{height:38px;min-width:46px;padding:0 10px;background:rgba(7,7,6,.8);border:1px solid var(--rule-dark-2);display:grid;place-items:center;font-size:10px;color:var(--on-dark-2)}
.inventory-body{padding:20px 21px 22px;display:flex;flex-direction:column;flex:1;min-width:0}
.inventory-kicker{font-size:8.5px;text-transform:uppercase;letter-spacing:.24em;color:var(--accent);margin-bottom:9px;min-height:11px;font-weight:600}
.inventory-title{font:800 clamp(15.5px,1.15vw,19px)/1.18 var(--display);letter-spacing:-.014em;margin:0;color:var(--on-dark-1);overflow-wrap:anywhere}
.inventory-description{color:var(--on-dark-3);font-size:11.5px;line-height:1.62;margin:10px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.inventory-specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:16px 0 0;border-top:1px solid var(--rule-dark-2)}
.inventory-spec{padding:11px 0;min-width:0}
.inventory-spec+.inventory-spec{padding-left:18px;border-left:1px solid var(--rule-dark-2)}
.inventory-spec span,.inventory-spec strong{display:block}
.inventory-spec span{text-transform:uppercase;letter-spacing:.2em;color:var(--on-dark-3);font-size:9px;margin-bottom:7px}
.inventory-spec strong{font-size:11.5px;color:var(--on-dark-1);font-weight:500;white-space:normal;overflow-wrap:anywhere}
.inventory-footer{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-top:auto;padding-top:16px}
.inventory-price span,.inventory-price strong{display:block}
.inventory-price span{text-transform:uppercase;letter-spacing:.2em;color:var(--on-dark-3);font-size:9px;margin-bottom:6px}
.inventory-price strong{font:900 21px/1 var(--display);color:var(--accent-soft);letter-spacing:-.025em}
.inventory-ask{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-3);line-height:1.5;max-width:20ch}
.inventory-id{text-align:right;font-size:9px;line-height:1.5;color:var(--on-dark-3);text-transform:uppercase;letter-spacing:.14em;overflow-wrap:anywhere}

/* Compact list mode — rows with no photography */
.inventory-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-dark-2)}
.inventory-row{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.5fr) minmax(130px,auto);
  gap:26px;align-items:baseline;padding:13px 6px;border-bottom:1px solid var(--rule-dark-2);
  transition:background-color .25s var(--ease);
}
.inventory-row:hover{background:rgba(246,243,236,.03)}
.inventory-row-main{min-width:0}
.inventory-row-title{font:800 clamp(16px,1.25vw,20px)/1.24 var(--display);letter-spacing:-.01em;margin:0;color:var(--on-dark-1);overflow-wrap:anywhere}
.inventory-row-note{color:var(--on-dark-3);font-size:12.5px;line-height:1.6;margin:8px 0 0}
.inventory-row-meta{display:flex;flex-wrap:wrap;gap:12px 32px;margin:0;min-width:0}
.inventory-row-meta div{min-width:0}
.inventory-row-meta dt{font-size:9px;text-transform:uppercase;letter-spacing:.2em;color:var(--on-dark-3);margin-bottom:6px;font-size:9px}
.inventory-row-meta dd{margin:0;font-size:13px;color:var(--on-dark-1);font-weight:400;overflow-wrap:anywhere}
.inventory-row-tail{display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap}
.inventory-row-id{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-3);white-space:nowrap}
.inventory-status.inline{position:static;backdrop-filter:none}
.inventory-row.skeleton{grid-template-columns:minmax(0,1.1fr) minmax(0,1.5fr) minmax(130px,auto)}
.inventory-row.skeleton b{display:block;height:14px;background:#151513;position:relative;overflow:hidden}
.inventory-row.skeleton b::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,#232220,transparent);
  animation:inventoryShimmer 1.5s linear infinite;
}
.inventory-row.skeleton b:nth-child(2){height:10px}
.inventory-row.skeleton b:nth-child(3){height:10px;width:70%;justify-self:end}
@keyframes inventoryShimmer{from{transform:translate3d(-100%,0,0)}to{transform:translate3d(100%,0,0)}}

.availability-sell{margin:22px 0 0}
.availability-sell .service-link{font-size:11px}
.inventory-more-wrap{display:grid;justify-items:center;gap:12px;margin:38px 0 0;text-align:center}
.inventory-more{min-width:min(320px,100%)}
.inventory-more-note{margin:0;font-size:12px;letter-spacing:.06em;color:var(--on-dark-3)}
.inventory-message{border:1px solid var(--rule-dark);background:var(--panel);padding:40px;text-align:center}
.inventory-message strong,.inventory-message span{display:block}
.inventory-message strong{font:800 23px/1.18 var(--display);letter-spacing:-.014em}
.inventory-message span{color:var(--on-dark-3);font-size:13px;line-height:1.7;margin:14px auto 22px;max-width:56ch}
.inventory-retry{margin:auto}
.inventory-empty{border:1px solid var(--rule-dark);padding:58px 32px;text-align:center;color:var(--on-dark-3);background:var(--panel)}
.inventory-empty strong{display:block;color:var(--on-dark-1);font:800 23px/1.2 var(--display);letter-spacing:-.014em;margin-bottom:10px}

/* Reference-image labelling */
.inventory-refnote{
  display:block;margin-top:14px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-dark-3);
}
.inventory-refnote a{border-bottom:1px solid var(--rule-dark);transition:border-color .25s var(--ease)}
.inventory-refnote a:hover{border-color:var(--accent)}

/* 20b. Image credits table ============================================== */
.credits-table-wrap{margin-top:38px;overflow-x:auto}
.credits-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:720px}
.credits-table th{
  text-align:left;font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent-ink);font-weight:600;padding:0 18px 14px 0;border-bottom:1px solid var(--rule-light);
}
.credits-table td{padding:18px 18px 18px 0;border-bottom:1px solid var(--rule-light-2);vertical-align:top;color:var(--on-light-2)}
.credits-table td:first-child{width:132px;padding-right:22px}
.credits-table img{width:116px;height:87px;object-fit:cover;border:1px solid var(--rule-light-2)}
.credits-table strong{display:block;color:var(--on-light-1);font-weight:500;font-size:14.5px;margin-bottom:5px}
.credit-file{display:block;font-size:11.5px;color:var(--on-light-3);line-height:1.5}
.credits-table a{color:var(--accent-ink);border-bottom:1px solid rgba(154,86,0,.3)}
.credits-table a:hover{border-color:var(--accent-ink)}
@media(max-width:760px){
  .credits-table{min-width:0}
  .credits-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .credits-table tr{display:grid;grid-template-columns:96px minmax(0,1fr);gap:4px 16px;
    padding:20px 0;border-bottom:1px solid var(--rule-light-2)}
  .credits-table td{border:0;padding:0;grid-column:2}
  .credits-table td:first-child{grid-column:1;grid-row:1/span 4;width:auto;padding:0}
  .credits-table img{width:96px;height:72px}
  .credits-table td:not(:first-child)::before{
    content:attr(data-label);display:block;font-size:8.5px;letter-spacing:.2em;
    text-transform:uppercase;color:var(--on-light-3);margin-bottom:3px;
  }
}

/* Hover elevation is a fading pseudo-element, so the expensive large-radius
   shadow is painted once into its own layer instead of on every frame. */
.service-card,.promo-card,.journey-card,.team-member,.form-card{isolation:isolate}
.service-card::after,.promo-card::before,.journey-card::before,
.team-member::after,.form-card::before{pointer-events:none}
.promo-card::before,.journey-card::before,.form-card::before,
.service-card.elev::after,.team-member.elev::after{content:""}
.promo-card::before,.journey-card::before,.form-card::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  box-shadow:var(--shadow-soft);transition:opacity .35s var(--ease);
}
.promo-card,.journey-card,.form-card{position:relative}
.promo-card:hover::before,.journey-card:hover::before,.form-card:hover::before{opacity:1}

/* Long lists: let the browser skip layout and paint for rows that are nowhere
   near the viewport. Intrinsic sizes keep the scrollbar honest. */
.inventory-row{content-visibility:auto;contain-intrinsic-size:auto 64px}
.inventory-card{content-visibility:auto;contain-intrinsic-size:auto 420px}
.team-member{content-visibility:auto;contain-intrinsic-size:auto 480px}

/* 21. Responsive ======================================================== */
@media(max-width:1240px){
  :root{--shell:min(100% - 56px,1520px)}
  .navlinks{gap:22px}
  .navlinks a{font-size:11.5px;letter-spacing:.12em}
}
@media(max-width:1080px){
  .nav-utility{display:none}
  .nav-inner{grid-template-columns:1fr auto}
  .navlinks,.nav-call{display:none}
  .menu-btn{display:block}
  .hero-content{grid-template-columns:1fr;gap:44px;padding-top:calc(var(--nav-h) + 66px);padding-bottom:96px}
  .hero-copy{max-width:none}
  .hero-card{justify-self:start;width:min(100%,620px);border-left:2px solid var(--accent);border-top:0;padding:24px 20px 22px;background:rgba(7,7,6,.86)}
  .page-hero{padding-top:var(--nav-h)}
  .trustgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-brand{grid-column:1/-1}
  .services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-card:nth-child(n){grid-column:span 1;min-height:400px}
  .service-card:last-child{grid-column:span 2}
  .inventory-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .inventory-row{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:16px 26px}
  .inventory-row-tail{grid-column:1/-1;justify-content:flex-start}
  .availability-head{grid-template-columns:1fr}
  .availability-source{justify-self:start;width:100%;max-width:520px}
  .instagram-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:960px){
  :root{--shell:min(100% - 40px,1520px)}
  .section-head{grid-template-columns:1fr;gap:26px}
  .two-col,.review-premium-grid,.team-intro-grid,.email-band-grid,.local-grid,.admin-head{grid-template-columns:1fr}
  .split{grid-template-columns:minmax(0,1fr);min-height:0}
  .split-copy{padding:82px max(20px,calc((100vw - var(--shell))/2))}
  .split-media{min-height:440px}
  .review-stage{grid-template-columns:repeat(2,minmax(0,1fr))}
  .consignment-journey,.resources-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brandrow{grid-template-columns:repeat(3,minmax(0,1fr))}
  .queue-card{grid-template-columns:1fr}
  .queue-meta{border-right:0;border-bottom:1px solid var(--rule-light-2);padding:0 0 22px}
  .promo-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .newsletter-modal{grid-template-columns:1fr;max-height:min(92svh,780px);overflow:auto}
  .newsletter-art{min-height:180px}
}
/* Phones and other coarse-pointer devices: the grain overlay and the blurred
   nav backdrop are both full-width layers that repaint while the page scrolls.
   Neither is worth a dropped frame on a mid-tier phone. */
@media(hover:none),(max-width:1080px){
  body::after{display:none}
  .nav.scrolled .nav-bar{
    background:rgba(10,10,9,.97);
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
}

@media(max-width:680px){
  :root{--shell:min(100% - 40px,1520px);--nav-h:70px}
  html{scroll-padding-top:84px}
  body{padding-bottom:var(--quick-actions-h)}
  .brand-logo{width:158px}
  .brand-footer .brand-logo{width:196px}
  .mobile-menu{padding:calc(var(--nav-h) + 26px) 22px 26px}
  .mobile-actions{display:flex;left:8px;right:8px;bottom:8px}
  .mobile-actions a{font-size:9.5px;min-width:0;padding:0 6px;text-align:center}

  .hero{min-height:0}
  .hero-content{padding:calc(var(--nav-h) + 54px) 0 74px;gap:34px}
  .hero-title{font-size:clamp(34px,10.5vw,50px);line-height:1.04;letter-spacing:-.03em;margin:20px 0 26px}
  .hero .lead{font-size:17px;line-height:1.62}
  .hero-actions{margin-top:30px;display:grid;grid-template-columns:1fr;gap:10px}
  .hero-actions .btn{width:100%}
  .hero-scroll{display:none}

  .h2{font-size:clamp(26px,7.6vw,38px);line-height:1.08;letter-spacing:-.025em}
  .h3{font-size:clamp(21px,6vw,28px)}
  .lead{font-size:16.5px}
  .body{font-size:16px}
  .page-title{font-size:clamp(30px,9vw,44px);line-height:1.06;letter-spacing:-.028em;max-width:100%}
  .page-sub{font-size:15.5px}
  .page-hero{min-height:420px}
  .page-hero-content{padding:70px 0 52px}

  .section,.content{padding-top:var(--section-sm);padding-bottom:var(--section-sm)}
  .section-head{margin-bottom:40px}
  .trustgrid{grid-template-columns:1fr}
  .trustitem{padding:26px 20px}
  .split-copy{padding:66px 20px}
  .split-media{min-height:340px}
  .split-media::after{inset:16px}
  .services-grid{grid-template-columns:1fr;gap:12px}
  .service-card:nth-child(n){grid-column:auto;min-height:340px}
  .service-content{padding:26px}
  .promo-band{min-height:0;padding:70px 0}
  .promo-content{display:grid;grid-template-columns:1fr;gap:30px}
  .promo-content .btn{width:100%}
  .two-col{gap:46px}
  .step{min-height:0;padding:30px 24px}
  .promo-cards,.values{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .form-card{padding:28px 22px}
  .info-row{display:grid;grid-template-columns:1fr;gap:6px}
  .info-row span:last-child{text-align:left}

  .review-premium{padding:var(--section-sm) 0}
  .review-stage{grid-template-columns:1fr}
  .review-quote{min-height:0;padding:30px}
  .review-quote blockquote{font-size:21px;line-height:1.34}
  .rating-number{font-size:74px}
  .review-actions{display:grid;grid-template-columns:1fr}
  .review-actions .btn{width:100%}

  .consignment-intro,.team-system,.resources,.instagram{padding:var(--section-sm) 0}
  .consignment-journey,.resources-grid{grid-template-columns:1fr}
  .journey-card{min-height:0;padding:30px 24px 62px}
  .journey-card h3{margin-top:36px}
  .journey-card .micro{left:24px;right:24px}
  .resource-group{padding:30px 24px 34px}

  .email-band,.seo-local{padding:70px 0}
  .email-inline{grid-template-columns:1fr}
  .email-inline .btn{width:100%}
  .brandrow{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px}
  .instagram-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .instagram-follow{gap:16px;padding:20px}

  .footer{padding-top:74px}
  .footer-grid{grid-template-columns:1fr;gap:44px}
  .footer-bottom{margin-top:48px;display:grid;grid-template-columns:1fr;gap:10px}

  .overlay{padding:14px}
  .modal,.modal-shell{max-height:calc(100svh - 28px);padding:32px 24px}
  .newsletter-modal{padding:0;max-height:calc(100svh - 28px)}
  .newsletter-art{min-height:150px}
  .newsletter-copy{padding:32px 24px}
  .age-grid{grid-template-columns:1fr}

  .review-admin{padding:106px 0 78px}
  .queue-card{padding:24px 20px}
  .queue-review{font-size:20px;line-height:1.42}

  .consignment-availability{padding:var(--section-sm) 0}
  .availability-head{gap:30px;margin-bottom:40px}
  .availability-toolbar{align-items:stretch;flex-direction:column}
  .availability-source{padding-left:20px}
  .inventory-search{width:100%}
  .inventory-count{text-align:left;min-width:0}
  .inventory-cards{grid-template-columns:1fr;gap:14px}
  .inventory-row{grid-template-columns:1fr;gap:14px;padding:22px 2px}
  .inventory-row-meta{gap:12px 24px}
  .inventory-row-tail{justify-content:flex-start}
  .inventory-filters{gap:6px}
  .inventory-filter{padding:0 13px;font-size:9px}
  .inventory-refine{gap:14px}
  .refine-field{min-width:0;flex:1 1 calc(50% - 11px)}
  .inventory-reset{flex:1 1 100%;text-align:left;padding-left:0}
  .inventory-body{padding:24px}
  .inventory-footer{align-items:flex-start;flex-direction:column}
  .inventory-id{text-align:left}
}
@media(max-width:380px){
  :root{--shell:min(100% - 32px,1520px)}
  .hero-title{font-size:32px}
  .page-title{font-size:28px}
  .h2{font-size:25px}
  .btn{padding-left:20px;padding-right:20px}
  .brandrow{grid-template-columns:1fr 1fr}
  .mobile-actions a{font-size:9px}
}

/* 22. Motion ============================================================ */
/* Hero entrance. Runs once on load, no JavaScript involved. */
@keyframes lineUp{from{transform:translateY(105%)}to{transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes scrollPulse{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

.hero-title .line>span{animation:lineUp .95s var(--ease-out) both;animation-delay:calc(.1s + var(--d,0)*.09s)}
.reveal-line{animation:fadeUp .8s var(--ease-out) both;animation-delay:calc(.1s + var(--d,0)*.09s)}
.hero-scroll-line::after{
  content:"";position:absolute;inset:0;background:var(--accent-soft);
  animation:scrollPulse 2.6s var(--ease) infinite;
}

/* Scroll reveals. Elements opt in with [data-reveal]; script.js adds .in when
   they first enter the viewport. Without JS they simply stay visible. */
/* Scoped to .js so that if the script never runs, nothing is left invisible. */
/* A keyframe animation rather than a transition: the trace showed the
   transition ticking on the main thread and restyling every revealing element
   each frame (~29% of main-thread scroll cost). The identical animation runs on
   the compositor. Fill mode `both` holds the element hidden through its delay. */
@keyframes revealUp{
  from{opacity:0;transform:translate3d(0,26px,0)}
  to{opacity:1;transform:none}
}
.js [data-reveal]{opacity:0}
.js [data-reveal].in{animation:revealUp .62s var(--ease-out) both}
.js [data-reveal][data-reveal-delay="1"].in{animation-delay:.08s}
.js [data-reveal][data-reveal-delay="2"].in{animation-delay:.16s}
.js [data-reveal][data-reveal-delay="3"].in{animation-delay:.24s}
.js [data-reveal][data-reveal-delay="4"].in{animation-delay:.32s}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero-title .line>span,.reveal-line{opacity:1;transform:none}
  .js [data-reveal],.js [data-reveal].in{opacity:1;transform:none;animation:none}
  .mobile-menu{clip-path:none}
  .mobile-menu .mobile-nav a{opacity:1;transform:none}
}

/* ── Slide-in consignment drawer ─────────────────────────────────────────
   Kept rendered (not display:none) so the panel can transition in; the hidden
   state is made inert via visibility/opacity/pointer-events. These rules sit at
   the end of the file so they win the source-order tie against the base .overlay
   display rules. */
.drawer-overlay{display:block;visibility:hidden;opacity:0;pointer-events:none;padding:0;place-items:stretch;transition:opacity .32s var(--ease)}
.drawer-overlay[aria-hidden="true"]{display:block}
.drawer-overlay.show{display:block;visibility:visible;opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100svh;width:min(560px,100%);background:var(--paper);color:var(--on-light-1);
  box-shadow:-40px 0 120px rgba(0,0,0,.5);padding:clamp(26px,4vw,46px) clamp(22px,3.5vw,40px);overflow-y:auto;
  transform:translateX(100%);transition:transform .42s var(--ease-out)}
.drawer-overlay.show .drawer{transform:translateX(0)}
@media(prefers-reduced-motion:reduce){.drawer{transition:none}}
.drawer h2{font:900 clamp(24px,3vw,34px)/1.06 var(--display);letter-spacing:-.022em;text-transform:uppercase;margin:14px 0 8px;color:var(--on-light-1)}
/* Keep the header clear of the close button (it was running under the ×). */
.drawer .modal-kicker,.drawer h2,.drawer-sub{padding-right:56px}
.drawer .modal-kicker{margin-top:4px}
.drawer-sub{color:var(--on-light-2);line-height:1.6;font-size:14px;margin:0 0 24px;max-width:46ch}
.drawer .modal-close{position:absolute;top:clamp(18px,3vw,30px);right:clamp(18px,3vw,30px);margin:0}

/* Consignment CTA card (replaces the old inline form column) */
.consign-submit-card{align-self:center;border:1px solid var(--rule-light);background:#fff;border-top:3px solid var(--accent);
  padding:clamp(26px,3vw,40px);border-radius:20px;box-shadow:0 24px 54px -24px rgba(20,25,35,.24)}
.consign-submit-card .eyebrow{color:var(--accent-ink)}
.consign-submit-h{font:800 clamp(22px,2.4vw,32px)/1.1 var(--display);letter-spacing:-.02em;color:var(--on-light-1);margin:14px 0 12px}
.consign-submit-card .btn{margin-top:22px}
/* Download button in the promotion viewer's control bar */
.promo-zoom-dl{
  appearance:none;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--accent);
  background:var(--accent);color:#1a1205;font:800 13px/1 var(--sans);cursor:pointer;border-radius:999px;
  padding:9px 14px;margin-left:4px;transition:background .18s,border-color .18s}
.promo-zoom-dl:hover{background:var(--accent-soft);border-color:var(--accent-soft)}
.promo-zoom-dl:focus-visible{outline:2px solid #fff;outline-offset:2px}
.promo-zoom-dl[aria-busy="true"]{opacity:.6;pointer-events:none}
.promo-feature-actions [aria-busy="true"]{opacity:.6;pointer-events:none;cursor:progress}

/* Consignment drawer: a wide two-column panel so the whole form fits on one
   screen on desktop (no scrolling); it stacks to one column on phones. */
/* Centered, content-height dialog (no empty space below the form), vertically
   centered in the viewport. It fades/rises in rather than sliding from the edge. */
#consignDrawer .drawer{
  top:50%;left:50%;right:auto;height:auto;max-height:calc(100svh - 48px);
  width:min(1120px,calc(100% - 48px));
  padding:clamp(24px,3vw,40px) clamp(22px,3vw,44px);
  border-top:3px solid var(--accent);box-shadow:0 40px 120px rgba(0,0,0,.55);
  opacity:0;transform:translate(-50%,calc(-50% + 18px)) scale(.985);
  transition:transform .38s var(--ease-out),opacity .28s var(--ease);will-change:transform,opacity}
#consignDrawer.show .drawer{opacity:1;transform:translate(-50%,-50%)}
@media(prefers-reduced-motion:reduce){#consignDrawer .drawer{transition:opacity .2s linear}}
#consignDrawer .drawer h2{margin:10px 0 6px}
#consignDrawer .drawer-sub{margin-bottom:16px;max-width:none}
#consignDrawer .form-section-label{margin-top:4px}
.consign-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,3vw,40px);align-items:start}
.consign-col{display:grid;gap:14px;min-width:0}
#consignDrawer textarea{min-height:120px;height:140px}
#consignDrawer .upload-zone{min-height:0;padding:18px 18px}
#consignDrawer .upload-zone strong{font-size:16px}
#consignDrawer .upload-zone span{margin-top:4px}
#consignDrawer .upload-choose{margin-top:12px}
#consignDrawer .upload-list{margin-top:0;max-height:168px;overflow-y:auto}
#consignDrawer .upload-item{grid-template-columns:44px minmax(0,1fr) 40px;padding:6px;gap:10px}
#consignDrawer .upload-thumb{width:40px;height:40px}
#consignDrawer .upload-list:empty,#consignDrawer #uploadMsg:empty{display:none}
#consignDrawer .checkbox-line span{font-size:13px;line-height:1.5}
@media(max-width:860px){.consign-cols{grid-template-columns:1fr}
  #consignDrawer .drawer{width:100%;max-height:none;height:100svh;top:0;left:0;border-top:0;transform:translateY(24px)}
  #consignDrawer.show .drawer{transform:none}}
/* The Choose Files button sits on the light paper upload zone; the default
   outline button is styled for dark sections and was nearly invisible here. */
.upload-zone .upload-choose{color:var(--on-light-1);border-color:var(--on-light-1);background:#fff}
.upload-zone .upload-choose:hover,.upload-zone .upload-choose:focus-visible{background:var(--accent);border-color:var(--accent);color:#111}

/* Consignment dialog after sending: a small, centred confirmation card. */
#consignDrawer .drawer.is-done{width:min(520px,calc(100% - 48px));text-align:center;padding:clamp(32px,4vw,48px) clamp(26px,4vw,48px)}
#consignDrawer .drawer.is-done .drawer-sub{display:none}
#consignDrawer .drawer.is-done .modal-kicker,#consignDrawer .drawer.is-done h2{padding-right:0}
#consignDrawer .drawer.is-done .modal-kicker{justify-content:center}
#consignDrawer .drawer.is-done .form-success{margin-top:22px;display:grid;justify-items:center}
#consignDrawer .drawer.is-done .form-success-msg{margin-left:auto;margin-right:auto;text-align:center}
#consignDrawer .drawer.is-done h2{padding:0 44px}
@media(max-width:860px){#consignDrawer .drawer.is-done{width:calc(100% - 32px);height:auto;top:50%;left:50%;transform:translate(-50%,-50%);border-top:3px solid var(--accent)}}