/* ============================================================
   Santonza Group — santonza.com
   Warm Paper palette · Newsreader (display) + Archivo (text)
   ============================================================ */

:root {
  --paper:    #FAF7F1;
  --surface:  #F1EBE0;
  --card:     #FFFFFF;
  --ink:      #1C2B45;
  --muted:    #6E6A62;
  --faint:    #8E897F;
  --bronze:   #8A6A33;
  --bronze-lt:#C8A97E;
  --line:     rgba(28, 43, 69, 0.12);
  --hair:     rgba(28, 43, 69, 0.07);
  --dark:     #1C2B45;
  --dark-text:#F3F0EA;
  --dark-muted:#9AA3B2;
  --nav-ink:  #43506B;

  --serif: Newsreader, Georgia, 'Times New Roman', serif;
  --display: Cinzel, Marcellus, Newsreader, Georgia, serif;  /* the logotype only */
  --sans:  Archivo, 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* One gutter value drives every horizontal edge on the page. */
  --gutter: clamp(20px, 5vw, 72px);
  --maxw: 1296px;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--bronze); }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 20px; font-size: 14px;
}
.skip:focus { left: 0; }

/* ---------- layout primitives ---------- */

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }

section { padding-block: clamp(44px, 6vw, 78px); }
.section-line { border-top: 1px solid var(--line); }

/* The eyebrow rail: a 220px label column on desktop that becomes a
   stacked label above the content on tablet and phone. */
.rail { display: flex; gap: clamp(28px, 5vw, 88px); }
.rail > .rail-label { width: 220px; flex-shrink: 0; padding-top: 10px; }
.rail > .rail-body { flex: 1; min-width: 0; }

.eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze);
  font-weight: 600;
  line-height: 1.45;
}

/* ---------- type ---------- */

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; margin: 0; text-wrap: balance; }

h1 { font-size: clamp(34px, 5.4vw, 60px); line-height: 1.08; }
h2 { font-size: clamp(28px, 4vw, 44px); line-height: 1.12; }
h3 { font-size: clamp(23px, 2.8vw, 34px); line-height: 1.14; }
h4 { font-size: clamp(19px, 2.1vw, 24px); line-height: 1.2; }

p { margin: 0; }
.lede { font-size: clamp(17px, 1.55vw, 19px); line-height: 1.65; color: var(--muted); max-width: 66ch; }
.body { font-size: clamp(15px, 1.25vw, 17px); line-height: 1.62; color: var(--muted); max-width: 62ch; }
.small { font-size: 14px; line-height: 1.6; color: var(--muted); }

.measure { max-width: 66ch; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 26px;
  background: var(--bronze); color: #fff;
  border-radius: 2px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  transition: background .15s ease;
}
.btn:hover { background: #76592a; color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { background: var(--surface); color: var(--ink); }
.btn-light { background: var(--paper); color: var(--ink); }
.btn-light:hover { background: #fff; color: var(--ink); }

/* ---------- header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter);
  height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
@media (min-width: 900px) { .header-inner { height: 92px; } }

/* Very narrow phones: scale the lockup down rather than let the menu
   button push off the edge. Same words, smaller. */
@media (max-width: 420px) {
  .header-inner { gap: 12px; }
  .brand { gap: 10px; }
  .brand img { width: 34px; height: 34px; }
  .brand-name { font-size: 18px; letter-spacing: .04em; }
  .brand-sub { font-size: 8px; letter-spacing: .2em; }
}

.brand { display: flex; align-items: center; gap: 13px; min-width: 0; }
.brand img { width: 42px; height: 42px; }
.brand-name { font-family: var(--display); font-size: 24px; font-weight: 700; letter-spacing: .06em; line-height: 1; }
.brand-sub  { font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); margin-top: 5px; }

.nav { display: flex; align-items: center; gap: 30px; font-size: 14px; }
.nav a { color: var(--nav-ink); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px; border: 0; background: none; padding: 0;
  cursor: pointer; color: var(--ink);
}
.nav-toggle svg { margin: 0 auto; }

@media (max-width: 899px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 76px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 24px;
    box-shadow: 0 18px 30px rgba(28,43,69,.07);
    max-height: calc(100dvh - 76px); overflow-y: auto;
  }
  .nav[hidden] { display: none; }
  .nav a {
    padding: 15px 0; font-size: 17px;
    border-bottom: 1px solid var(--hair);
  }
}

/* ---------- stat band ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.stat { background: var(--paper); padding: clamp(22px, 3vw, 34px) clamp(18px, 2.4vw, 30px); }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat-n { font-family: var(--serif); font-size: clamp(32px, 3.8vw, 44px); line-height: 1; color: var(--ink); }
.stat-l { display: block; margin-top: 9px; font-size: 12px; letter-spacing: .06em; color: var(--muted); }

/* ---------- generic grids ---------- */

.grid-2, .grid-3, .grid-4 { display: grid; grid-template-columns: minmax(0, 1fr); }
.grid-2 { gap: clamp(24px, 3vw, 44px); }
.grid-3 { gap: clamp(24px, 3vw, 40px); }
.grid-4 { gap: clamp(22px, 2.6vw, 36px); }
@media (min-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* bullet list with the bronze dash */
.dashes { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.dashes li { display: flex; gap: 12px; align-items: baseline; font-size: 15px; color: var(--ink); }
.dashes li::before {
  content: ""; flex-shrink: 0; width: 13px; height: 2px;
  background: var(--bronze); position: relative; top: -4px;
}

/* ---------- cards ---------- */

.card { background: var(--card); border: 1px solid var(--line); padding: clamp(22px, 2.6vw, 32px); }
.card-flat { background: var(--surface); padding: clamp(22px, 2.6vw, 32px); }

/* ---------- media + text rows (retail banners, origins, leadership) ---------- */

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3.4vw, 64px);
  align-items: center;
}
@media (min-width: 860px) {
  .row { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .row.flip > .row-media { order: 2; }
}
.row-media img, .row-media .placeholder { width: 100%; }
.placeholder {
  aspect-ratio: 16 / 10;
  background: var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center; padding: 24px;
}
.placeholder-name { font-family: var(--serif); font-size: clamp(30px, 3.6vw, 46px); font-weight: 500; line-height: 1.1; color: var(--bronze); }
.placeholder-tag { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.placeholder-note {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  opacity: .7; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 2px;
}

.tagline { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.num { font-family: var(--serif); font-size: 14px; color: var(--bronze); font-variant-numeric: tabular-nums; }
.chip { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.chip-solid { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #fff; background: var(--bronze); padding: 4px 10px; }

/* ---------- leadership ---------- */

.person { display: grid; grid-template-columns: minmax(0,1fr); gap: 20px; padding-block: clamp(28px, 3.4vw, 40px); border-top: 1px solid var(--hair); }
.person:first-of-type { border-top: 0; }
@media (min-width: 700px) { .person { grid-template-columns: 150px minmax(0,1fr); gap: clamp(28px, 3.6vw, 48px); } }
.person-photo { width: 150px; height: 150px; object-fit: cover; }
.monogram {
  width: 150px; height: 150px; background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 44px; color: var(--bronze);
}
.person-role { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--bronze); font-weight: 600; margin: 6px 0 14px; }
.person-bio p + p { margin-top: 14px; }

/* ---------- coverage ----------
   One treatment at every width: the towns run west to east as a wrapping
   grid, tier shown by dot size. No separate phone version, so the section
   reads the same on every screen. */

.coverage-figs {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 14px; padding-bottom: 24px; border-bottom: 1px solid var(--hair);
}
.coverage-figs > div { display: flex; align-items: baseline; gap: 14px; }
.coverage-figs .stat-l { margin-top: 0; }
@media (min-width: 560px) {
  .coverage-figs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .coverage-figs > div { display: block; }
  .coverage-figs .stat-l { margin-top: 6px; }
}

.towns-caption {
  margin: 22px 0 16px;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint);
}

.town-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
}
@media (min-width: 560px)  { .town-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 820px)  { .town-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .town-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.town { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.town .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); opacity: .5; flex-shrink: 0; }
.town-sub  { color: var(--ink); font-weight: 600; }
.town-sub .dot  { width: 9px; height: 9px; background: var(--bronze); opacity: 1; }
.town-main { color: var(--ink); font-weight: 700; }
.town-main .dot { width: 12px; height: 12px; background: var(--bronze); opacity: 1; }

.coverage-key {
  display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center;
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--hair);
  font-size: 12px; color: var(--muted);
}
.coverage-key > span { display: flex; align-items: center; gap: 8px; }
.coverage-key .dot { display: inline-block; border-radius: 50%; background: var(--bronze); flex-shrink: 0; }
.dot-lg { width: 12px; height: 12px; }
.dot-md { width: 9px;  height: 9px; }
.dot-sm { width: 7px;  height: 7px; background: var(--ink); opacity: .5; }

/* ---------- partner strip ---------- */

.strip { display: flex; flex-wrap: wrap; gap: clamp(18px, 3vw, 40px); align-items: center; }
.strip span { font-family: var(--serif); font-size: clamp(17px, 1.7vw, 23px); font-weight: 500; color: var(--ink); opacity: .78; }

/* ---------- dark call-to-action band ---------- */

.band-dark { background: var(--dark); color: var(--dark-text); }
.band-dark h2, .band-dark h3 { color: var(--dark-text); }
.band-dark p { color: var(--dark-muted); }
.band-surface { background: var(--surface); }

/* ---------- forms ---------- */

.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.field input, .field textarea, .field select {
  font-family: var(--sans); font-size: 15px; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 2px;
  padding: 13px 14px; width: 100%;
}
.field textarea { min-height: 132px; resize: vertical; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.form-grid .wide { grid-column: 1 / -1; }

/* ---------- footer ---------- */

.site-footer { background: var(--dark); color: var(--dark-text); padding-block: clamp(40px, 5vw, 56px) 36px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(28px, 3.4vw, 48px); padding-bottom: 36px; }
.footer-col { display: flex; flex-direction: column; gap: 9px; font-size: 13px; }
.footer-col a, .footer-col span { color: var(--dark-muted); }
.footer-col a:hover { color: #fff; }
.footer-h { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--bronze-lt); margin-bottom: 4px; }
.footer-name { font-family: var(--serif); font-size: 21px; font-weight: 600; letter-spacing: .03em; color: var(--dark-text); }
.footer-rule { height: 1px; background: rgba(255,255,255,.14); }
.footer-legal { padding-top: 20px; font-size: 12px; color: var(--dark-muted); }

/* ---------- utilities ---------- */

.stack   { display: flex; flex-direction: column; }
.gap-8   { gap: 8px; }  .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.gap-20  { gap: 20px; } .gap-24 { gap: 24px; } .gap-32 { gap: 32px; }
.mt-8  { margin-top: 8px; }  .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; } .mb-24 { margin-bottom: 24px; } .mb-32 { margin-bottom: 32px; }
.bronze { color: var(--bronze); }
.cluster { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ---------- coverage key + CTA row ---------- */

.coverage-key {
  display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: center;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--hair);
  font-size: 12px; color: var(--muted);
}
.coverage-key > span { display: flex; align-items: center; gap: 8px; }
.coverage-key .dot { display: inline-block; border-radius: 50%; background: var(--bronze); flex-shrink: 0; }
.dot-lg { width: 13px; height: 13px; }
.dot-md { width: 9px;  height: 9px; }
.dot-sm { width: 7px;  height: 7px; background: var(--ink); opacity: .55; }
.coverage-sum { letter-spacing: .1em; }
@media (min-width: 1100px) { .coverage-sum { margin-left: auto; } }

.cta-row { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
@media (min-width: 860px) {
  .cta-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 64px; }
  .cta-row .btn { flex-shrink: 0; }
}

/* ---------- home hero ---------- */

.hero { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 88px); }
.hero-main { flex-grow: 1; max-width: 640px; }
.hero-aside { flex-shrink: 0; }
@media (min-width: 1000px) {
  .hero { flex-direction: row; align-items: flex-start; }
  .hero-aside { width: 474px; padding-top: 6px; }
}

.area-row {
  display: flex; align-items: flex-start; gap: 22px;
  padding: 17px 0; border-top: 1px solid var(--line);
}

.area-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px; background: var(--line); border: 1px solid var(--line);
}
@media (min-width: 640px)  { .area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .area-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.area-cell {
  background: var(--paper);
  padding: clamp(24px, 2.8vw, 34px) clamp(20px, 2.4vw, 30px);
  display: flex; flex-direction: column; gap: 10px;
  min-height: 180px;
}
.area-cell-end { background: var(--surface); justify-content: flex-end; min-height: 0; }

/* Business areas are links now, not numbered items. The rule replaces the
   old 01–05 numerals: it carries the same eye-guide without implying a count. */
a.area-cell { color: inherit; transition: background .15s ease; }
a.area-cell h3 { color: var(--ink); }
a.area-cell:hover { background: var(--surface); }
a.area-cell:hover h3 { color: var(--bronze); }
.area-tick { width: 26px; height: 2px; background: var(--bronze); flex-shrink: 0; }
.area-row .area-tick { margin-top: 12px; }


/* The eyebrow rail stacks below desktop — a 220px label column leaves
   nothing for the body on a phone. */
@media (max-width: 899px) {
  .rail { flex-direction: column; gap: 14px; }
  .rail > .rail-label { width: auto; padding-top: 0; }
}

/* ---------- about: road map ---------- */

.roadmap { display: grid; grid-template-columns: minmax(0,1fr); border: 1px solid var(--line); }
.roadmap-col { padding: clamp(24px, 2.8vw, 34px); border-top: 1px solid var(--line); }
.roadmap-col .eyebrow { margin-bottom: 20px; }
.roadmap-col li { line-height: 1.45; }
.roadmap-col:first-child { border-top: 0; }
@media (min-width: 820px) {
  .roadmap { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .roadmap-col { border-top: 0; border-left: 1px solid var(--line); }
  .roadmap-col:first-child { border-left: 0; }
}

/* ---------- distribution ---------- */

.cat-grid {
  display: grid; grid-template-columns: minmax(0,1fr);
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
@media (min-width: 560px)  { .cat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1000px) { .cat-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.cat-cell { background: var(--paper); padding: 15px 20px; display: flex; gap: 14px; align-items: baseline; }

.brand-list {
  display: flex; flex-wrap: wrap; gap: 9px 26px;
  padding-block: 20px; border-block: 1px solid var(--hair);
}
.brand-list span { font-size: 16px; color: var(--ink); opacity: .8; }

/* ---------- origins cards ---------- */

.origin-card { display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--paper); }
.origin-body { padding: clamp(20px, 2.4vw, 28px); }

/* ---------- e-commerce channel diagram ----------
   Drawn in CSS rather than SVG so it restacks on a phone instead of
   shrinking to an unreadable strip. */

.channel { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; align-items: stretch; }
.channel-side { display: grid; gap: 16px; }
.channel-box { border: 1px solid var(--line); background: var(--paper); padding: clamp(20px,2.4vw,28px); }
.channel-k { display: block; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--bronze); font-weight: 700; margin-bottom: 8px; }
.channel-result { background: var(--dark); padding: clamp(26px,3vw,40px); display: flex; flex-direction: column; justify-content: center; }
.channel-join { position: relative; min-height: 44px; }
.channel-join::before {
  content: ""; position: absolute; left: 50%; top: 8px; bottom: 8px;
  width: 2px; background: var(--bronze); transform: translateX(-50%);
}
@media (min-width: 900px) {
  .channel { grid-template-columns: minmax(0,1fr) 90px minmax(0,1.15fr); }
  .channel-join { min-height: 0; }
  .channel-join::before { left: 8px; right: 8px; top: 50%; bottom: auto; width: auto; height: 2px; transform: translateY(-50%); }
}

/* ---------- contact ---------- */

.contact-split { display: grid; grid-template-columns: minmax(0,1fr); gap: clamp(28px,3.4vw,56px); }
@media (min-width: 960px) { .contact-split { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); } }
.map-card {
  border: 1px solid var(--line); background: var(--surface);
  min-height: 240px; padding: 28px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.map-card:hover { background: #EDE5D8; color: inherit; }

.creds { display: flex; flex-wrap: wrap; gap: 14px clamp(24px,4vw,52px); align-items: center; }
.creds span {
  font-family: var(--serif); font-size: clamp(16px,1.7vw,20px);
  color: var(--dark-text);
}

/* ---------- "Our Businesses" submenu ----------
   Click-to-open on every device, so the interaction and the items are the
   same with a mouse or a thumb. Desktop drops it below the bar; on the
   phone it expands inline in the drawer. */

.has-sub { position: relative; }

.sub-toggle {
  display: flex; align-items: center; gap: 7px;
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: var(--sans); font-size: 14px; color: var(--nav-ink);
}
.sub-toggle:hover { color: var(--bronze); }
.sub-toggle[data-current="true"] { color: var(--ink); font-weight: 600; }
.sub-toggle svg { transition: transform .15s ease; }
.sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.submenu { display: flex; flex-direction: column; }
.submenu[hidden] { display: none; }
.submenu a { color: var(--nav-ink); font-size: 14px; }
.submenu a[aria-current="page"] { color: var(--ink); font-weight: 600; }

@media (min-width: 900px) {
  .submenu {
    position: absolute; top: calc(100% + 18px); left: -18px;
    min-width: 250px; padding: 8px 0;
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: 0 14px 30px rgba(28, 43, 69, .1);
    z-index: 50;
  }
  .submenu a { padding: 11px 18px; }
  .submenu a:hover { background: var(--surface); color: var(--ink); }
}

@media (max-width: 899px) {
  .has-sub { display: flex; flex-direction: column; }
  .sub-toggle {
    width: 100%; justify-content: space-between;
    padding: 15px 0; font-size: 17px;
    border-bottom: 1px solid var(--hair);
  }
  .submenu { padding-left: 16px; border-left: 2px solid var(--line); margin: 4px 0 8px; }
  .submenu a { padding: 12px 0; font-size: 15px; border-bottom: 1px solid var(--hair); }
  .submenu a:last-child { border-bottom: 0; }
}

/* Distribution index cells double as jump links */
a.cat-cell { transition: background .12s ease; position: relative; }
a.cat-cell:hover { background: var(--surface); color: var(--ink); }
.cat-star { margin-left: auto; color: var(--bronze); font-size: 11px; }

/* ---------- partner portal sign-in strip ---------- */

.portal-row { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
@media (min-width: 780px) {
  .portal-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 48px; }
  .portal-row .btn { flex-shrink: 0; }
}

/* Santonza Origins brand marks are logos, not photographs — contain them in
   the panel so nothing is cropped off. */
.origin-logo {
  position: relative; aspect-ratio: 16 / 10;
  background: var(--card);                 /* white, so the marks' own white ground disappears */
  border-bottom: 1px solid var(--line);
}
.origin-logo img {
  position: absolute; inset: clamp(22px, 3.6vw, 40px);
  width: auto; height: auto; max-width: calc(100% - 2 * clamp(22px, 3.6vw, 40px));
  max-height: calc(100% - 2 * clamp(22px, 3.6vw, 40px));
  margin: auto; object-fit: contain;
}

/* ---------- partner logo strip ----------
   One ink for every mark, so the strip reads as a set rather than a
   collision of brand palettes. Heights come from the manifest and are
   optical, not uniform. */

.logo-strip {
  list-style: none; margin: 0;
  border: 1px solid var(--line);
  padding: clamp(26px, 3.4vw, 44px) clamp(22px, 3vw, 40px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3.4vw, 42px) clamp(20px, 3vw, 36px);
  align-items: center; justify-items: center;
}
@media (min-width: 560px)  { .logo-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 860px)  { .logo-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .logo-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.logo-strip .mark {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-width: 0;
  color: var(--ink); opacity: .68;
  transition: opacity .15s ease;
}
.logo-strip .mark:hover { opacity: 1; }
.logo-strip svg { width: auto; max-width: 100%; height: auto; display: block; }

/* Partner ticker. Two identical rows scroll as one track; translating the
   track by exactly -50% lands row 2 where row 1 started, so the loop is
   seamless and the row count can grow without touching the animation.
   The trailing padding equals the gap, so the seam spaces like everything
   else. Pauses on hover and on focus-within; falls back to a static
   scrollable row when the visitor has asked for reduced motion. */
.ticker {
  border: 1px solid var(--line); background: var(--surface);
  padding-block: clamp(24px, 3vw, 38px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.ticker-track { display: flex; width: max-content; animation: ticker 52s linear infinite; }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
.ticker-row {
  display: flex; align-items: center; list-style: none; margin: 0;
  gap: clamp(40px, 5.5vw, 84px);
  padding: 0 clamp(40px, 5.5vw, 84px) 0 0;
}
.ticker .mark { flex: 0 0 auto; color: var(--ink); opacity: .68; transition: opacity .15s ease; }
.ticker .mark:hover { opacity: 1; }
.ticker svg { width: auto; height: auto; display: block; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .ticker { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .ticker-track { animation: none; }
  .ticker-track > .ticker-row[aria-hidden="true"] { display: none; }
}

/* A brand mark standing in for a photograph — used where a store exists as
   an identity but not yet as a place to photograph. */
.brand-panel {
  position: relative; aspect-ratio: 16 / 10;
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(30px, 5vw, 64px);
}
.brand-panel img { width: auto; max-width: 100%; max-height: 100%; object-fit: contain; }

/* An Origins brand with its own site: the heading carries a visible cue,
   since nothing else on the card says it leaves the site. */
.origin-body h3 a { border-bottom: 1px solid var(--bronze-lt); padding-bottom: 2px; }
.origin-body h3 a:hover { color: var(--bronze); border-bottom-color: var(--bronze); }
.origin-logo a { display: block; width: 100%; height: 100%; }