/* ==========================================================================
   Styllian design system
   Brand: black bottle, gold cap, ivory rooms (BRAND-GUIDE.md section 7).
   Type:  Cormorant Garamond (display) · Inter (body/UI)
   The --sty-* tokens are the source of truth; the legacy variable names the
   templates already use are mapped onto them. Public pages sit on warm ivory;
   dark panels (header, hero, footer, staff shell) re-declare the same
   variable names for black grounds, so every component works in both rooms.
   ========================================================================== */

:root {
  /* Styllian brand tokens (source of truth) */
  --sty-black:    #141414;
  --sty-ink:      #1C1917;
  --sty-ivory:    #F7F4EE;
  --sty-cream:    #FDFBF7;
  --sty-gold:     #C2A14D;
  --sty-gold-deep:#786025;  /* AA everywhere: 5.47:1 on ivory, 4.62:1 on the darkest panel */
  --sty-chestnut: #6E4A2E;
  --sty-hairline: #E6E0D2;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body:    "Inter", system-ui, sans-serif;

  /* legacy names, mapped for the light (ivory) ground */
  --charcoal:      var(--sty-ivory);   /* page ground */
  --charcoal-2:    var(--sty-cream);   /* cards, surfaces */
  --ink:           var(--sty-black);   /* black panel background */
  --hunter:        #4a7c59;            /* quiet success green */
  --hunter-2:      #3e5c49;
  --navy:          var(--sty-chestnut);/* secondary warmth */
  --cognac:        var(--sty-gold-deep);   /* accents/links on ivory */
  --cognac-2:      var(--sty-gold-deep);
  --silver:        #57504a;            /* figures, prices */
  --silver-dim:    #666057;            /* muted text - AA everywhere: 5.67:1 ivory, 4.79:1 darkest panel */
  --cream:         var(--sty-ink);     /* primary text */
  --cream-2:       #44403a;            /* paragraph text */
  --line:          var(--sty-hairline);
  --line-strong:   #d8d0be;

  /* type */
  --display: var(--font-display);
  --serif:   var(--font-display);
  --sans:    var(--font-body);

  --wrap: 1180px;
}

/* Dark rooms: black panels get ivory text and gold accents. The same legacy
   variable names are re-declared, so components inherit the right palette. */
.site-header, .hero, .bg-ink, .bg-hunter, .bg-navy, .site-footer,
.side-cart-panel, .announce-bar, .staff-body, .app, .cart-toast {
  --charcoal:      var(--sty-black);
  --charcoal-2:    #1b1a18;
  --ink:           #101010;
  --hunter:        #2e4237;
  --hunter-2:      #3c5c49;
  --navy:          #2a2118;
  --cognac:        var(--sty-gold);
  --cognac-2:      #d2b563;
  --silver:        #d9d2c0;
  --silver-dim:    #a59d8c;
  --cream:         var(--sty-ivory);
  --cream-2:       #e4dfd3;
  --line:          rgba(247,244,238,.14);
  --line-strong:   rgba(247,244,238,.30);
  --field-bg:      rgba(255,255,255,.03);
  color: var(--cream);
}

:root { --field-bg: #ffffff; }

* { box-sizing: border-box; }
/* html carries its own (dark) background so the canvas beyond the body's
   height is ink, not ivory: on short pages the body's background showed as a
   pale strip below the dark footer. */
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background: var(--ink); }
body {
  margin: 0;
  background: var(--charcoal);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; margin: 0; line-height: 1.08; letter-spacing: .3px; }
h1 { font-size: clamp(44px, 6vw, 78px); }
h2 { font-size: clamp(32px, 4vw, 46px); }
h3 { font-size: 24px; }
p  { margin: 0 0 1em; color: var(--cream-2); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 40px; }
.eyebrow {
  font-family: var(--sans); font-size: 12.5px; letter-spacing: .34em;
  text-transform: uppercase; color: var(--cognac-2); font-weight: 600;
  display: inline-block; margin-bottom: 18px;
}
.eyebrow.silver { color: var(--silver-dim); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.serif-lead { font-family: var(--serif); font-size: 20px; color: var(--cream); line-height: 1.7; }
.muted { color: var(--silver-dim); }

/* ---- monogram / mark (modular, swappable) ---- */
.mark { display: flex; align-items: center; gap: 14px; }
.mark .glyph {
  width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid var(--silver-dim);
  border-radius: 50%; display: grid; place-items: center;
  font-family: var(--display); font-size: 20px; color: var(--silver);
  letter-spacing: .5px;
}
.mark .wordmark { line-height: 1; }
.mark .wordmark .ey { font-family: var(--sans); font-size: 9px; letter-spacing: .42em; text-transform: uppercase; color: var(--silver-dim); display: block; margin-bottom: 4px; }
.mark .wordmark .nm { font-family: var(--display); font-size: 21px; letter-spacing: 1px; color: var(--cream); }
.mark .wordmark .nm b { color: var(--silver); font-weight: 500; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: var(--sans); font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600; padding: 15px 30px; border: 1px solid transparent; border-radius: 2px;
  transition: .2s; white-space: nowrap;
}
.btn-cognac { background: var(--cognac); color: #fff; }
.btn-cognac:hover { background: var(--cognac-2); }
/* On black panels the primary button is gold with black type (AA on gold). */
.site-header .btn-cognac, .hero .btn-cognac, .bg-ink .btn-cognac,
.bg-hunter .btn-cognac, .bg-navy .btn-cognac, .site-footer .btn-cognac,
.side-cart-panel .btn-cognac, .staff-body .btn-cognac { color: #141414; }
.site-header .btn-cognac:hover, .hero .btn-cognac:hover, .bg-ink .btn-cognac:hover,
.staff-body .btn-cognac:hover { color: #141414; }
.btn-outline { border-color: var(--line-strong); color: var(--cream); background: transparent; }
.btn-outline:hover { border-color: var(--silver); }
.btn-ghost { color: var(--silver); padding: 15px 6px; }
.btn-sm { padding: 10px 18px; font-size: 11.5px; }

/* ---- header ---- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(20,20,20,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .bar { display: flex; align-items: center; justify-content: space-between; height: 86px; }
.nav { display: flex; align-items: center; gap: 38px; font-family: var(--sans); }
.nav a { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--cream-2); }
.nav a:hover, .nav a.active { color: var(--cognac-2); }
.header-cta { display: flex; align-items: center; gap: 20px; }

/* ---- hero ---- */
.hero { position: relative; overflow: hidden; }
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(110% 85% at 78% 18%, rgba(194,161,77,.14), transparent 60%),
    radial-gradient(90% 80% at 8% 110%, rgba(110,74,46,.20), transparent 55%),
    linear-gradient(180deg, #191919, var(--sty-black));
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.35));
}
.hero-inner { position: relative; z-index: 1; padding: 116px 0 128px; max-width: 760px; }
.hero h1 { color: var(--cream); }
.hero h1 .ital { font-style: italic; color: var(--silver); }
.hero p { font-family: var(--serif); font-size: 21px; max-width: 560px; margin-top: 26px; }
.hero-actions { display: flex; gap: 16px; margin-top: 40px; }
.hero-meta { display: flex; gap: 40px; margin-top: 64px; border-top: 1px solid var(--line); padding-top: 26px; max-width: 620px; }
.hero-meta .stat .n { font-family: var(--display); font-size: 34px; color: var(--cream); }
.hero-meta .stat .l { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--silver-dim); }

/* ---- section shell ---- */
section { padding: 96px 0; }
.section-head { max-width: 640px; margin-bottom: 54px; }
.section-head.center { margin: 0 auto 54px; text-align: center; }
.bg-ink { background: var(--sty-black); }

/* The ghosted horse head, available to any dark panel. Keep it rare - the
   mark reads as luxury only while it stays scarce. */
.brandmark-panel { position:relative; overflow:hidden; }
.brandmark-panel::after { content:""; position:absolute; right:4vw; top:50%; transform:translateY(-50%); width:min(30vw,360px); aspect-ratio:688/900; background:url("../img/brand/styllian-icon.203d7691f18e.png") center/contain no-repeat; opacity:.05; pointer-events:none; }
.brandmark-panel > .wrap { position:relative; z-index:1; }
.bg-hunter { background: linear-gradient(160deg, #1c1610, var(--sty-black)); }
.bg-navy { background: linear-gradient(160deg, #1a1712, var(--sty-black)); }

/* ---- service menu ---- */
.svc-list { display: grid; gap: 0; }
.svc {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 24px;
  padding: 26px 0; border-bottom: 1px solid var(--line);
}
.svc .nm { font-family: var(--display); font-size: 26px; color: var(--cream); }
.svc .ds { font-family: var(--serif); color: var(--silver-dim); font-size: 15.5px; margin-top: 4px; }
.svc .dur { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--cognac-2); margin-top: 8px; }
.svc .pr { font-family: var(--display); font-size: 28px; color: var(--silver); white-space: nowrap; }

/* ---- cards ---- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.card {
  background: var(--charcoal-2);
  border: 1px solid var(--line); border-radius: 4px; padding: 34px;
}
.card .ic { width: 42px; height: 42px; border: 1px solid var(--cognac); border-radius: 50%; display: grid; place-items: center; color: var(--cognac-2); margin-bottom: 22px; font-family: var(--display); font-size: 20px; }
.card h3 { color: var(--cream); margin-bottom: 10px; }
.card p { font-size: 15.5px; }

/* ---- membership tiers ---- */
.tier { background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0)); border: 1px solid var(--line); border-radius: 6px; padding: 40px 34px; position: relative; }
.tier.featured { border-color: var(--cognac); background: linear-gradient(180deg, rgba(169,106,60,.14), rgba(255,255,255,0)); }
.tier .badge { position: absolute; top: -12px; left: 34px; background: var(--cognac); color: #fff; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; padding: 6px 14px; border-radius: 2px; }
.tier .tname { font-family: var(--display); font-size: 30px; color: var(--cream); }
.tier .price { font-family: var(--display); font-size: 52px; color: var(--silver); margin: 12px 0 2px; }
.tier .price span { font-family: var(--sans); font-size: 14px; letter-spacing: .1em; color: var(--silver-dim); }
.tier ul { list-style: none; padding: 22px 0 26px; margin: 0; border-top: 1px solid var(--line); margin-top: 22px; }
.tier li { font-family: var(--serif); color: var(--cream-2); padding: 9px 0 9px 26px; position: relative; font-size: 16px; }
.tier li::before { content: "·"; position: absolute; left: 6px; color: var(--cognac-2); font-size: 24px; top: 2px; }

.field-label { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--silver-dim); margin: 22px 0 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { border: 1px solid var(--line-strong); border-radius: 40px; padding: 9px 18px; font-size: 14px; color: var(--cream-2); display: flex; align-items: center; gap: 10px; }
.chip.sel { border-color: var(--cognac); background: rgba(169,106,60,.16); color: var(--cream); }
.chip .av { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--hunter-2), var(--navy)); display: grid; place-items: center; font-family: var(--display); font-size: 13px; color: var(--cream); }

.summary .total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 20px; }
.summary .total .k { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--silver-dim); }
.summary .total .v { font-family: var(--display); font-size: 34px; color: var(--silver); }
.aside .prov { display: flex; align-items: center; gap: 14px; padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.aside .prov .av { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--hunter-2), var(--navy)); display: grid; place-items: center; font-family: var(--display); font-size: 20px; color: var(--cream); }
.aside .prov .nm { font-family: var(--display); font-size: 20px; color: var(--cream); }
.aside .prov .tl { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--cognac-2); }

/* ---- app chrome (calendar / POS) ---- */
.app { background: var(--ink); border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; }
.app-top { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--line); background: var(--charcoal-2); }
.app-top .l { display: flex; align-items: center; gap: 22px; }
.app-top .tabs { display: flex; gap: 6px; }
.app-top .tabs a { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--silver-dim); padding: 8px 14px; border-radius: 3px; }
.app-top .tabs a.on { color: var(--cream); background: rgba(255,255,255,.05); }
.app-top .badge-loc { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--silver-dim); border: 1px solid var(--line); padding: 6px 12px; border-radius: 40px; }

/* calendar */
.cal { display: grid; grid-template-columns: 64px repeat(4, 1fr); }
.cal .colhead { padding: 16px 12px; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); }
.cal .colhead.time { border-left: 0; }
.cal .colhead .pnm { font-family: var(--display); font-size: 18px; color: var(--cream); }
.cal .colhead .ptl { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--cognac-2); }
.cal .colhead .pav { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--hunter-2), var(--navy)); display: inline-grid; place-items: center; font-family: var(--display); color: var(--cream); font-size: 13px; margin-bottom: 8px; }
.cal .grid { position: relative; border-left: 1px solid var(--line); min-height: 520px; }
.cal .times { position: relative; }
.cal .times .t { height: 88px; font-size: 11px; color: var(--silver-dim); padding: 6px 10px; text-align: right; border-top: 1px solid var(--line); }
.cal .grid .hr { height: 88px; border-top: 1px solid var(--line); }
.appt { position: absolute; left: 8px; right: 8px; border-radius: 5px; padding: 8px 12px; overflow: hidden; border-left: 3px solid; }
.appt .an { font-family: var(--serif); font-size: 14px; color: #fff; line-height: 1.2; }
.appt .as { font-size: 11px; color: rgba(255,255,255,.72); margin-top: 3px; letter-spacing: .04em; }
.appt.green { background: rgba(47,74,58,.5); border-color: var(--hunter-2); }
.appt.cognac { background: rgba(169,106,60,.42); border-color: var(--cognac-2); }
.appt.navy { background: rgba(31,42,59,.62); border-color: #37506f; }
.appt.hatch { background: repeating-linear-gradient(45deg, rgba(255,255,255,.05), rgba(255,255,255,.05) 6px, transparent 6px, transparent 12px); border-color: var(--silver-dim); }
.appt.hatch .an { color: var(--silver-dim); }

/* POS */
.pos { display: grid; grid-template-columns: 1.3fr 1fr; min-height: 560px; }
.pos .catalog { padding: 22px; border-right: 1px solid var(--line); }
.pos .pos-tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.pos .pos-tabs .pt { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--silver-dim); padding: 8px 16px; border: 1px solid var(--line); border-radius: 40px; }
.pos .pos-tabs .pt.on { color: var(--cream); border-color: var(--cognac); background: rgba(169,106,60,.14); }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tile {
  position: relative; width: 100%; min-height: 104px; border: 1px solid var(--line);
  border-radius: 6px; padding: 18px; text-align: left; cursor: pointer; color: var(--cream);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.01));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.tile:hover, .tile:focus-visible {
  border-color: rgba(193,133,79,.74); background: rgba(169,106,60,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 12px 26px rgba(0,0,0,.18);
  outline: none; transform: translateY(-1px);
}
.tile.is-adding { border-color: var(--cognac); background: rgba(169,106,60,.18); }
.tile.is-added { border-color: var(--hunter-2); background: rgba(47,74,58,.24); }
.tile:disabled { opacity: .72; cursor: progress; transform: none; }
.tile .tn { display: block; padding-right: 42px; font-family: var(--serif); font-size: 16px; color: var(--cream); line-height: 1.25; }
.tile .tp { display: block; font-family: var(--display); font-size: 22px; color: var(--silver); margin-top: 12px; }
.tile-state {
  position: absolute; top: 12px; right: 12px; padding: 4px 7px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--silver-dim); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
}
.tile.is-adding .tile-state { color: var(--cognac-2); border-color: rgba(193,133,79,.7); }
.tile.is-adding .tile-state::before { content: "Adding"; }
.tile.is-adding .tile-state { font-size: 0; }
.tile.is-adding .tile-state::before { font-size: 10px; }
.tile.is-added .tile-state { color: var(--cream); border-color: var(--hunter-2); background: rgba(47,74,58,.55); font-size: 0; }
.tile.is-added .tile-state::before { content: "Added"; font-size: 10px; }
.ticket { background: var(--charcoal-2); padding: 24px; display: flex; flex-direction: column; }
.ticket .cust { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.ticket .cust .av { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--hunter-2), var(--navy)); display: grid; place-items: center; font-family: var(--display); color: var(--cream); }
.ticket .cust .nm { font-family: var(--display); font-size: 19px; color: var(--cream); }
.ticket .cust .mb { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--cognac-2); }
.ln { display: flex; justify-content: space-between; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--line); }
.ln .ln-n { font-family: var(--serif); font-size: 15.5px; color: var(--cream); }
.ln .ln-m { font-size: 11.5px; color: var(--silver-dim); letter-spacing: .04em; }
.ln .ln-p { font-family: var(--display); font-size: 19px; color: var(--silver); }
.line-remove {
  width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%;
  display: inline-grid; place-items: center; background: rgba(255,255,255,.025);
  color: var(--silver-dim); cursor: pointer; font-size: 18px; line-height: 1;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.line-remove:hover, .line-remove:focus-visible { border-color: var(--cognac); color: var(--cognac-2); background: rgba(169,106,60,.12); outline: none; }
.line-remove:disabled { opacity: .5; cursor: progress; }
.ticket .totals { margin-top: auto; padding-top: 18px; }
.ticket .totals .tr { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; color: var(--silver-dim); }
.ticket .totals .tr.grand { border-top: 1px solid var(--line-strong); margin-top: 8px; padding-top: 16px; }
.ticket .totals .tr.grand .k { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--cream); }
.ticket .totals .tr.grand .v { font-family: var(--display); font-size: 32px; color: var(--silver); }
.tenders { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 18px; }
.tender { border: 1px solid var(--line); border-radius: 5px; text-align: center; padding: 12px 4px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--silver-dim); }
.tender.on { border-color: var(--cognac); color: var(--cream); background: rgba(169,106,60,.14); }

/* ---- footer ---- */
.site-footer { background: var(--ink); border-top: 1px solid var(--line); padding: 72px 0 34px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 40px; }
.foot-grid h2, .foot-grid h4 { font-family: var(--sans); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--silver-dim); margin-bottom: 18px; }
.foot-grid a { display: block; color: var(--cream-2); font-size: 15px; padding: 6px 0; }
.foot-grid a:hover { color: var(--cognac-2); }
.news { display: flex; border: 1px solid var(--line-strong); border-radius: 3px; overflow: hidden; margin-top: 14px; }
.news input { flex: 1; background: transparent; border: 0; padding: 12px 14px; color: var(--cream); font-family: var(--sans); font-size: 14px; }
.news button { background: var(--cognac); color: var(--sty-ink); border: 0; padding: 0 18px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--line); }
.foot-bottom .cr { font-size: 13px; color: var(--silver-dim); }
.foot-bottom .soc { display: flex; gap: 14px; }
.foot-bottom .soc a { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; color: var(--silver-dim); font-size: 13px; }

/* ---- browser frame (for app screenshots) ---- */
.frame { border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; box-shadow: 0 40px 90px rgba(0,0,0,.45); }
.frame .chrome { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--charcoal-2); border-bottom: 1px solid var(--line); }
.frame .chrome .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--silver-dim); opacity: .5; }
.frame .chrome .url { margin-left: 14px; font-size: 12px; color: var(--silver-dim); font-family: var(--sans); letter-spacing: .04em; }

.section-tag { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--silver-dim); }

/* ==========================================================================
   Django page additions (beyond the mockup set)
   ========================================================================== */

/* page hero (interior pages) */
.page-hero { padding: 80px 0 44px; }
.page-hero h1 { font-size: clamp(40px, 5vw, 64px); }
.page-hero .serif-lead { max-width: 620px; margin-top: 18px; }

/* forms (contact / newsletter big) */
.form-card { border: 1px solid var(--line-strong); border-radius: 8px; background: var(--charcoal-2); padding: 40px; max-width: 640px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
.field label { display: block; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--silver-dim); margin-bottom: 8px; }
.field input, .field textarea, .field select {
  width: 100%; background: var(--field-bg); border: 1px solid var(--line-strong);
  border-radius: 3px; padding: 13px 14px; color: var(--cream); font-family: var(--sans); font-size: 15px;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--cognac); }
select option { background: var(--charcoal-2); color: var(--cream); }
select option:checked { background: var(--cognac); color: #fff; }
select option:disabled { color: var(--silver-dim); }
.field textarea { min-height: 140px; resize: vertical; }

/* shop grid */
.prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.prod { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--charcoal-2); }
.prod .ph { aspect-ratio: 4 / 5; display: grid; place-items: center; background: #ffffff; font-family: var(--display); font-size: 44px; color: var(--silver-dim); }
.prod .ph img { width: 100%; height: 100%; object-fit: contain; }
.prod .bd { padding: 20px 22px 24px; }
.prod .nm { font-family: var(--serif); font-size: 17px; color: var(--cream); }
.prod .cat { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--cognac-2); margin-top: 4px; }
.prod .pr { font-family: var(--sans); font-variant-numeric: tabular-nums; font-size: 21px; color: var(--cream); margin-top: 10px; }

/* prose (legal pages) */
/* 660px ≈ 75 characters at this size - long legal prose at the old 720px ran
   past 100 characters a line. */
.prose { max-width: 660px; font-family: var(--serif); font-size: 16.5px; color: var(--cream-2); }
.prose h2 { font-size: 26px; margin: 36px 0 12px; color: var(--cream); }
.prose p { margin: 0 0 14px; }
/* Links in prose must be findable without hunting: the legal pages tell
   readers to use the contact page, and an invisible link is a dead end. */
.prose a { color: var(--cognac-2); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--cream); }

/* messages */
.flash { border: 1px solid #4a7c59; background: rgba(74,124,89,.12); color: var(--cream); border-radius: 4px; padding: 14px 18px; margin-bottom: 20px; font-size: 14.5px; }

/* ---- staff shell ---- */
.staff-body { background: var(--ink); }
.staff-body > main { min-height: 100vh; }
.staff-shell { min-height: 100vh; display: grid; grid-template-columns: 238px minmax(0, 1fr); background: var(--ink); }
.staff-sidebar { position: sticky; top: 0; height: 100vh; padding: 24px 18px; background: linear-gradient(180deg, var(--charcoal-2), #151513); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 26px; }
.staff-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 0 6px 14px; border-bottom: 1px solid var(--line); }
.staff-brand-mark { width: 38px; height: 38px; border: 1px solid var(--silver-dim); border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-size: 18px; color: var(--silver); }
.staff-brand-ey { display: block; font-size: 8px; letter-spacing: .34em; text-transform: uppercase; color: var(--silver-dim); line-height: 1; margin-bottom: 5px; }
.staff-brand-name { display: block; font-family: var(--display); font-size: 19px; color: var(--cream); line-height: 1; letter-spacing: 1px; }
.staff-brand-name b { color: var(--silver); font-weight: 500; }
.staff-nav { display: grid; gap: 22px; overflow-y: auto; overflow-x: hidden; padding-right: 8px; margin-right: -6px; scrollbar-width: thin; scrollbar-color: rgba(193,133,79,.58) rgba(255,255,255,.04); scrollbar-gutter: stable; }
.staff-nav-group { display: grid; gap: 5px; }
.staff-nav-label { padding: 0 12px 4px; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--silver-dim); }
.staff-nav-link { min-height: 38px; display: flex; align-items: center; padding: 8px 12px; border-radius: 5px; color: var(--cream-2); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; border: 1px solid transparent; }
.staff-nav-link:hover { color: var(--cream); border-color: var(--line); background: rgba(255,255,255,.03); }
.staff-nav-link.on { color: var(--cream); border-color: rgba(169,106,60,.46); background: rgba(169,106,60,.14); }
.staff-nav::-webkit-scrollbar, .staff-mobile-nav::-webkit-scrollbar { width: 8px; }
.staff-nav::-webkit-scrollbar-track, .staff-mobile-nav::-webkit-scrollbar-track { background: rgba(255,255,255,.035); border-radius: 999px; }
.staff-nav::-webkit-scrollbar-thumb, .staff-mobile-nav::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(193,133,79,.68), rgba(143,144,137,.38)); border: 2px solid var(--charcoal-2); border-radius: 999px; }
.staff-nav::-webkit-scrollbar-thumb:hover, .staff-mobile-nav::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(193,133,79,.9), rgba(201,202,195,.5)); }
.staff-public-link { margin-top: auto; padding: 12px; border-top: 1px solid var(--line); color: var(--silver-dim); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.staff-public-link:hover { color: var(--cognac-2); }
.staff-workspace { min-width: 0; }
.staff-topbar { position: sticky; top: 0; z-index: 19; min-height: 68px; padding: 12px 32px; display: flex; align-items: center; justify-content: flex-end; gap: 16px; background: rgba(19,19,17,.88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.staff-location { background: rgba(255,255,255,.02); }
.staff-page { min-width: 0; }
.staff-messages { padding: 24px 32px 0; }
.staff-profile-menu { position: relative; }
.staff-profile-menu summary { list-style: none; }
.staff-profile-menu summary::-webkit-details-marker { display: none; }
.staff-profile-pill { height: 42px; display: flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--charcoal-2); cursor: pointer; color: var(--cream); }
.staff-avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-family: var(--display); font-size: 16px; line-height: 1; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); flex: 0 0 auto; }
.staff-profile-name { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--cream); }
.staff-profile-chevron { width: 8px; height: 8px; border-right: 1.5px solid var(--silver-dim); border-bottom: 1.5px solid var(--silver-dim); transform: rotate(45deg) translateY(-2px); transition: transform .16s ease, border-color .16s ease; }
.staff-profile-pill:hover .staff-profile-chevron, .staff-profile-menu[open] .staff-profile-chevron { border-color: var(--cognac-2); }
.staff-profile-menu[open] .staff-profile-chevron { transform: rotate(225deg) translate(-1px, -1px); }
.staff-profile-dropdown { position: absolute; right: 0; top: calc(100% + 10px); width: 220px; padding: 8px; background: var(--charcoal-2); border: 1px solid var(--line-strong); border-radius: 6px; box-shadow: 0 18px 50px rgba(0,0,0,.34); }
.staff-profile-dropdown a { display: block; padding: 10px 12px; border-radius: 4px; color: var(--cream-2); font-size: 13px; }
.staff-profile-dropdown a:hover { color: var(--cream); background: rgba(255,255,255,.05); }
.staff-mobile-menu { display: none; margin-right: auto; position: relative; }
.staff-mobile-menu summary { list-style: none; cursor: pointer; border: 1px solid var(--line-strong); border-radius: 4px; padding: 8px 12px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--cream); }
.staff-mobile-menu summary::-webkit-details-marker { display: none; }
.staff-mobile-nav { position: absolute; left: 0; top: calc(100% + 10px); width: min(320px, calc(100vw - 32px)); max-height: calc(100vh - 92px); overflow-y: auto; overflow-x: hidden; padding: 16px; background: var(--charcoal-2); border: 1px solid var(--line-strong); border-radius: 6px; box-shadow: 0 18px 50px rgba(0,0,0,.34); display: grid; gap: 18px; scrollbar-width: thin; scrollbar-color: rgba(193,133,79,.58) rgba(255,255,255,.04); }
.app-context-bar { display: flex; justify-content: flex-end; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--charcoal-2); }
.staff-profile-preview { display: inline-flex; align-items: center; gap: 10px; color: var(--cream); font-size: 14px; }

@media (max-width: 1180px) {
  .staff-shell { grid-template-columns: 204px minmax(0, 1fr); }
  .staff-sidebar { padding: 22px 14px; }
  .staff-nav-link { font-size: 12px; letter-spacing: .08em; }
  .staff-topbar { padding: 12px 24px; }
  .staff-shell .wrap { padding-left: 24px; padding-right: 24px; }
}

@media (max-width: 860px) {
  .staff-shell { display: block; }
  .staff-sidebar { display: none; }
  .staff-mobile-menu { display: block; }
  .staff-topbar { padding: 12px 16px; }
  .staff-location { display: none; }
  .staff-profile-name { max-width: 120px; }
  .staff-shell .wrap { padding-left: 16px; padding-right: 16px; }
  .staff-shell section.bg-ink { padding-top: 28px !important; }
  .staff-shell .grid-3, .staff-shell .grid-2, .staff-shell .prod-grid, .staff-shell .pos, .staff-shell .book { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .staff-profile-name { display: none; }
  .staff-profile-pill { padding-right: 10px; }
  .staff-messages { padding-left: 16px; padding-right: 16px; }
  .app-context-bar { justify-content: flex-start; }
}

/* announcement bar (S4) */
.announce-bar { background: var(--sty-black); color: var(--cream); border-bottom: 1px solid rgba(194,161,77,.35); text-align: center; font-size: 13px; letter-spacing: .06em; padding: 9px 16px; }
.announce-bar a { color: var(--cream); text-decoration: underline; }

/* journal (blog) */
.post-card { border: 1px solid var(--line); border-radius: 6px; padding: 30px 32px; background: linear-gradient(180deg, rgba(255,255,255,.03), transparent); margin-bottom: 18px; }
.post-card h3 { font-size: 26px; }
.post-card .pd { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--cognac-2); margin-bottom: 8px; }
.post-body { max-width: 720px; font-family: var(--serif); font-size: 17.5px; color: var(--cream-2); line-height: 1.75; }
.post-body h2, .post-body h3 { color: var(--cream); margin: 34px 0 12px; }
.post-body ul, .post-body ol { padding-left: 22px; }
.post-body a { color: var(--cognac-2); text-decoration: underline; }

/* ---- Feature-parity pass (media library, editor, drawer cart, reorder) ---- */

/* Brand logos (Settings-managed, WLH pattern) */
.nav-logo { max-height: 44px; width: auto; display: block; }
.staff-brand-logo { max-height: 42px; max-width: 172px; width: auto; height: auto; display: block; }

/* Media library grid */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.media-card { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.02); text-decoration: none; transition: border-color .15s ease; }
.media-card:hover { border-color: var(--cognac); }
.media-card-thumb { display: grid; place-items: center; height: 120px; overflow: hidden; border-radius: 5px; background: rgba(255,255,255,.03); }
.media-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.media-card-file { color: var(--silver-dim); font-size: 11.5px; padding: 8px; text-align: center; word-break: break-word; }
.media-card-title { color: var(--cream); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-card-sub { color: var(--silver-dim); font-size: 11.5px; }

/* Media library drop zone */
.media-dropzone { position: relative; display: block; margin-bottom: 22px; padding: 30px 24px; border: 1.5px dashed var(--line-strong); border-radius: 10px; background: rgba(255,255,255,.015); text-align: center; transition: border-color .16s ease, background .16s ease; }
.media-dropzone.is-dragging { border-color: var(--cognac); background: rgba(169,106,60,.08); }
.media-dropzone__input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.media-dropzone__body { display: grid; justify-items: center; gap: 6px; }
.media-dropzone__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--cognac-2); margin-bottom: 4px; }
.media-dropzone__icon svg { width: 21px; height: 21px; }
.media-dropzone.is-dragging .media-dropzone__icon { border-color: var(--cognac); }
.media-dropzone__lead { color: var(--cream); font-family: var(--serif); font-size: 17px; }
.media-dropzone__hint { color: var(--silver-dim); font-size: 12.5px; max-width: 430px; }
.media-dropzone__browse { color: var(--cognac-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.media-dropzone__browse:hover { color: var(--cognac); }
.media-dropzone__list { display: grid; gap: 4px; width: min(100%, 460px); margin-top: 12px; padding: 0; list-style: none; text-align: left; }
.media-dropzone__list li { display: flex; justify-content: space-between; gap: 14px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 5px; background: rgba(255,255,255,.03); font-size: 12.5px; }
.media-dropzone__name { color: var(--cream); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-dropzone__size { color: var(--silver-dim); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.media-dropzone__submit { margin-top: 14px; }

/* Dark-theme overrides for the picker widget (its own CSS is light) */
.staff-body .media-picker-widget { background: rgba(255,255,255,.02); border-color: var(--line); }
.staff-body .media-picker-widget__preview { background: rgba(255,255,255,.04); border-color: var(--line); }
.staff-body .media-picker-widget__title { color: var(--cream); }
.staff-body .media-picker-widget__sub, .staff-body .media-picker-widget__placeholder { color: var(--silver-dim); }
.staff-body .media-picker-widget__btn { background: var(--cognac); border-color: var(--cognac); color: #fff; }
.staff-body .media-picker-widget__btn--ghost { background: transparent; color: var(--silver); border-color: var(--line); }

/* Markdown editor toolbar */
.md-toolbar { display: flex; gap: 4px; flex-wrap: wrap; padding: 6px; border: 1px solid var(--line); border-bottom: 0; border-radius: 6px 6px 0 0; background: rgba(255,255,255,.03); }
.md-toolbar + textarea { border-top-left-radius: 0; border-top-right-radius: 0; }
.md-tool { min-width: 34px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 4px; background: transparent; color: var(--silver); font-size: 12.5px; cursor: pointer; }
.md-tool:hover { border-color: var(--cognac); color: var(--cream); }

/* SEO score panel */
.seo-panel { border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.02); padding: 16px; }
.seo-grade { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-family: var(--display); font-size: 22px; }
.seo-grade-a { background: rgba(74,124,89,.25); color: #9fd3ae; border: 1px solid rgba(74,124,89,.6); }
.seo-grade-b { background: rgba(169,106,60,.22); color: var(--cognac-2); border: 1px solid rgba(169,106,60,.55); }
.seo-grade-c { background: rgba(160,60,60,.2); color: #d99a9a; border: 1px solid rgba(160,60,60,.5); }
.seo-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.seo-check { display: grid; gap: 2px; padding: 8px 10px; border-left: 2px solid var(--line); font-size: 12.5px; color: var(--silver-dim); }
.seo-check strong { color: var(--cream); font-size: 13px; font-weight: 500; }
.seo-good { border-left-color: #4a7c59; }
.seo-warn { border-left-color: var(--cognac); }
.seo-bad { border-left-color: #a03c3c; }
@media (max-width: 900px) { .editor-grid { grid-template-columns: 1fr !important; } }

/* Reorder arrows */
.reorder { display: inline-flex; gap: 3px; }
.reorder form { display: inline; }
.reorder-btn { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 4px; background: transparent; color: var(--silver-dim); font-size: 12px; cursor: pointer; line-height: 1; }
.reorder-btn:hover:not([disabled]) { border-color: var(--cognac); color: var(--cream); }
.reorder-btn[disabled] { opacity: .3; cursor: default; }

/* Staff calendar: clickable empty slots */
.cal-slot-link { display: block; text-decoration: none; cursor: pointer; }
.cal-slot-link:hover { background: rgba(169,106,60,.08); }

/* Slide-out cart drawer (Aeonz pattern) */
.side-cart { position: fixed; inset: 0; z-index: 300; pointer-events: none; }
.side-cart-backdrop { position: absolute; inset: 0; background: rgba(10,10,10,.6); opacity: 0; transition: opacity .24s ease; }
/* Closed = 100% + 2px: translateX(100%) alone leaves the 1px border-left
   painting exactly on the viewport edge (a faint gray line in review). */
.side-cart-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(400px, 94vw); background: #141414; border-left: 1px solid var(--line); display: grid; grid-template-rows: auto minmax(0,1fr); transform: translateX(calc(100% + 2px)); transition: transform .26s ease; }
.side-cart.is-open { pointer-events: auto; }
.side-cart.is-open .side-cart-backdrop { opacity: 1; }
.side-cart.is-open .side-cart-panel { transform: translateX(0); }
body.side-cart-lock { overflow: hidden; }
.side-cart-header { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.side-cart-title { font-family: var(--display); font-size: 22px; color: var(--cream); margin: 0; }
.side-cart-close { background: none; border: 1px solid var(--line); border-radius: 50%; width: 32px; height: 32px; color: var(--silver); font-size: 18px; cursor: pointer; line-height: 1; }
.side-cart-close:hover { border-color: var(--cognac); color: var(--cream); }
.side-cart-content { display: grid; grid-template-rows: minmax(0,1fr) auto; overflow: hidden; }
.side-cart-items { list-style: none; margin: 0; padding: 10px 20px; overflow-y: auto; }
.side-cart-item { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.side-cart-item-main { flex: 1; min-width: 0; }
.side-cart-item-name { color: var(--cream); text-decoration: none; font-size: 14.5px; }
.side-cart-item-line { color: var(--silver-dim); font-size: 12.5px; margin-top: 3px; }
/* White ground and contain: the size photos are transparent packshots of a
   black bottle, which vanish on this panel and lose cap and base to a crop. */
.side-cart-item-thumb { width: 52px; height: 52px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); flex-shrink: 0; background: #fff; }
.side-cart-item-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.side-cart-remove { background: none; border: 0; color: var(--silver-dim); font-size: 17px; cursor: pointer; padding: 4px; }
.side-cart-remove:hover { color: var(--cognac-2); }
.side-cart-footer { display: grid; gap: 10px; padding: 16px 20px 20px; border-top: 1px solid var(--line); background: #141414; }
.side-cart-subtotal { display: flex; justify-content: space-between; color: var(--cream); font-size: 15px; margin-bottom: 4px; }
.side-cart-empty { display: grid; place-items: center; gap: 12px; padding: 44px 20px; text-align: center; }

/* Add-to-cart toast */
#toast-area { position: fixed; top: 86px; right: 18px; z-index: 320; display: grid; gap: 10px; }
.cart-toast { display: flex; gap: 12px; align-items: center; min-width: 260px; max-width: 340px; padding: 12px 14px; background: #1c1c1c; border: 1px solid var(--line); border-left: 3px solid var(--cognac); border-radius: 8px; box-shadow: 0 18px 40px rgba(0,0,0,.5); animation: cart-toast-in .3s ease; }
.cart-toast.is-leaving { opacity: 0; transform: translateY(-6px); transition: all .24s ease; }
.cart-toast-thumb { width: 42px; height: 42px; border-radius: 5px; overflow: hidden; flex-shrink: 0; background: #fff; }
.cart-toast-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.cart-toast-body { flex: 1; min-width: 0; }
.cart-toast-title { color: var(--cream); font-size: 13.5px; }
.cart-toast-line { color: var(--silver-dim); font-size: 12.5px; margin: 2px 0 4px; }
.cart-toast-view { background: none; border: 0; padding: 0; color: var(--cognac-2); font-size: 12.5px; cursor: pointer; text-decoration: underline; }
.cart-toast-close { background: none; border: 0; color: var(--silver-dim); font-size: 16px; cursor: pointer; align-self: flex-start; }
@keyframes cart-toast-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* MARS footer on staff pages */
.staff-mars-footer { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 44px; padding: 16px 0 8px; border-top: 1px solid var(--line); color: var(--silver-dim); font-size: 12.5px; }
.staff-mars-footer a { color: var(--cognac-2); text-decoration: none; }
.staff-mars-footer a:hover { text-decoration: underline; }
.staff-mars-footer-bolt { color: var(--cognac); display: inline-flex; }

/* About MARS */
.mars-logo-chip { display: inline-block; background: #f4f1ea; padding: 18px 26px; border-radius: 10px; }

/* Product detail responsive */
@media (max-width: 860px) { .pd-grid { grid-template-columns: 1fr !important; } }

/* Health board */
.health-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.health-ok { background: #4a7c59; box-shadow: 0 0 8px rgba(74,124,89,.6); }
.health-warn { background: var(--cognac); box-shadow: 0 0 8px rgba(169,106,60,.5); }
.health-fail { background: #a03c3c; box-shadow: 0 0 8px rgba(160,60,60,.6); }

/* ---- responsive public chrome refresh ---- */
.site-header { transition: background .22s ease, box-shadow .22s ease, border-color .22s ease; }
.site-header .bar { gap: 26px; transition: height .24s ease; }
.site-header .mark .glyph, .site-header .nav-logo { transition: transform .24s ease, max-height .24s ease; }
.site-header .wordmark .ey, .site-header .wordmark .nm { transition: font-size .24s ease, opacity .24s ease; }
.site-header.is-compact { background: rgba(19,19,17,.94); border-bottom-color: rgba(201,202,195,.24); box-shadow: 0 14px 34px rgba(0,0,0,.24); }
.site-header.is-compact .bar { height: 64px; }
.site-header.is-compact .mark .glyph { transform: scale(.86); }
.site-header.is-compact .nav-logo { max-height: 34px; }
.site-header.is-compact .wordmark .ey { font-size: 8px; opacity: .78; }
.site-header.is-compact .wordmark .nm { font-size: 18px; }
.site-nav-panel { display: flex; align-items: center; gap: 34px; margin-left: auto; }
/* Styllian comb toggle: the handle sweeps across the bristles, leaving a brass
   X behind it. site.js draws and animates the SVG; colors are the dark-header
   palette (the header is a dark room). */
.sty-comb {
  --sty-ink: #f3ede4;        /* comb + label color */
  --sty-accent: #c9a571;     /* brass: the "washed" X */
  --sty-spark: #f0d9a8;      /* lighter brass for sparks + glow */
  display: none; align-items: center; gap: 12px;
  height: 44px; min-width: 44px; padding: 0 4px;   /* accessible tap target */
  background: none; border: 0; cursor: pointer;
  color: var(--sty-ink);
  -webkit-tap-highlight-color: transparent;
}
.sty-comb:focus-visible { outline: 1px solid var(--sty-accent); outline-offset: 4px; border-radius: 2px; }
.sty-comb svg { width: 28px; height: 20px; overflow: visible; }
.sty-comb path { fill: none; stroke-linecap: round; }
.sty-comb .sty-comb__bristle { stroke: var(--sty-ink);    stroke-width: 1.5; }
.sty-comb .sty-comb__x       { stroke: var(--sty-accent); stroke-width: 1.5; }
.sty-comb .sty-comb__handle  { stroke: var(--sty-ink);    stroke-width: 2.5; }
.sty-comb .sty-comb__spark   { fill: var(--sty-spark); stroke: none; }
.sty-comb .sty-comb__glow-stop { stop-color: var(--sty-spark); }
/* serif label that rolls Menu -> Close */
.sty-comb__label {
  position: relative; height: 1.15em; overflow: hidden;
  font: italic 500 18px/1.15 var(--font-display);
  letter-spacing: .02em;
  transition: color .5s ease .45s;
}
.sty-comb[aria-expanded="true"] .sty-comb__label { color: var(--sty-accent); }
.sty-comb__label span { display: block; transition: transform .6s cubic-bezier(.65,0,.35,1) .35s; }
.sty-comb__label span + span { position: absolute; top: 100%; left: 0; }
.sty-comb[aria-expanded="true"] .sty-comb__label span { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
  .sty-comb__label, .sty-comb__label span { transition: none; }
}
body.nav-lock { overflow: hidden; }

/* ---- service menu refresh ---- */
.services-hero { padding-bottom: 54px; }
.services-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: end; }
.services-hero-note { border: 1px solid var(--line); border-radius: 8px; padding: 22px; background: rgba(255,255,255,.025); }
.services-hero-note span { display: block; color: var(--cognac-2); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 10px; }
.services-hero-note strong { display: block; color: var(--cream); font-family: var(--serif); font-weight: 400; font-size: 17px; line-height: 1.55; }
.services-menu-section { padding-top: 10px; padding-bottom: 36px; }
.services-menu-wrap { display: grid; gap: 34px; }
.service-group-block { padding: 0; }
.service-group-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 16px; }
.service-group-head h2 { margin-top: 5px; color: var(--cream); font-size: clamp(28px, 3vw, 38px); }
.svc-list-elevated { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.012)); }
.svc-list-elevated .svc { padding: 24px 26px; transition: background .16s ease, border-color .16s ease; }
.svc-list-elevated .svc:hover { background: rgba(255,255,255,.025); }
.svc-list-elevated .svc:last-child { border-bottom: 0; }
.services-cta-section { padding-top: 28px; padding-bottom: 88px; }
.services-cta-band { display: flex; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid var(--line-strong); border-radius: 8px; padding: 30px; background: linear-gradient(135deg, rgba(47,74,58,.24), rgba(31,42,59,.18)); }
.services-cta-band h2 { color: var(--cream); font-size: clamp(28px, 3vw, 40px); }
.services-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

/* ---- footer refresh ---- */
.foot-brand .mark { margin-bottom: 18px; }
.foot-brand .muted, .foot-news .muted { font-size: 14px; max-width: 280px; }
.foot-col { min-width: 0; }
.foot-accordion { border: 0; }
.foot-accordion summary { list-style: none; cursor: default; }
.foot-accordion summary::-webkit-details-marker { display: none; }
.foot-accordion summary h2, .foot-accordion summary h4 { margin-bottom: 18px; }
.foot-accordion-ic { display: none; }
.foot-links { display: grid; gap: 0; }
.foot-legal { display: grid; gap: 4px; }
.powered-by { font-size: 12.5px; color: var(--silver-dim); }
.powered-by a { display: inline; color: var(--cognac-2); padding: 0; }
.powered-by a:hover { color: var(--cream); }

/* ---- staff nav icons ---- */
.staff-nav-link { gap: 10px; }
.staff-nav-link > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.staff-nav-ic { width: 18px; height: 18px; flex: 0 0 18px; display: inline-grid; place-items: center; color: var(--silver-dim); transition: color .16s ease, transform .16s ease; }
.staff-nav-ic svg { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.staff-nav-link:hover .staff-nav-ic, .staff-nav-link.on .staff-nav-ic { color: var(--cognac-2); transform: translateX(1px); }

/* ---- staff edit/detail polish ---- */
.staff-edit-page { padding: 44px 0 80px; }
.staff-page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 26px; }
.staff-page-head h2 { color: var(--cream); }
.staff-page-head .muted { max-width: 640px; margin: 12px 0 0; font-size: 14.5px; }
.staff-page-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.staff-editor-shell { overflow: hidden; }
.staff-editor-grid, .staff-detail-grid { padding: 24px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.staff-detail-grid { grid-template-columns: minmax(0, 1.35fr) minmax(320px, .75fr); }
.staff-main-stack, .staff-side-stack { display: grid; gap: 18px; min-width: 0; }
.staff-panel { border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.022); padding: 22px; min-width: 0; }
.staff-panel-head { display: flex; justify-content: space-between; align-items: start; gap: 18px; margin-bottom: 18px; }
.staff-panel-head h3 { color: var(--cream); font-size: 23px; margin-top: 5px; }
.staff-panel-head .muted { margin: 0; font-size: 13px; text-align: right; }
.staff-form-actions-bottom { display: grid; gap: 0; }
.staff-action-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.media-card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.product-gallery-grid { margin-bottom: 18px; }
.staff-inline-details { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 6px; }
.staff-inline-details summary { color: var(--cognac-2); cursor: pointer; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.staff-inline-details form { margin-top: 14px; max-width: 560px; }
.danger-outline { border-color: rgba(169,106,60,.55) !important; color: var(--cognac-2) !important; }
.staff-danger-panel { display: flex; align-items: center; justify-content: space-between; gap: 18px; background: rgba(169,106,60,.055); }
.staff-danger-panel p { margin: 8px 0 0; font-size: 13.5px; }
.staff-status-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.status-pill { display: inline-flex; align-items: center; min-height: 28px; padding: 5px 10px; border: 1px solid rgba(169,106,60,.5); border-radius: 999px; background: rgba(169,106,60,.14); color: var(--cream); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; }
.order-lines, .order-timeline { display: grid; gap: 0; }
.order-total-card { background: linear-gradient(180deg, rgba(169,106,60,.13), rgba(255,255,255,.018)); }
.order-total-row { display: flex; justify-content: space-between; padding: 8px 0; color: var(--silver-dim); font-size: 14px; border-bottom: 1px solid rgba(201,202,195,.09); }
.order-total-grand { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 18px; }
.order-total-grand span { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--cream); }
.order-total-grand strong { font-family: var(--display); font-size: 34px; font-weight: 500; color: var(--silver); }

@media (max-width: 980px) {
  .site-header .bar { height: 74px; }
  .site-header.is-compact .bar { height: 64px; }
  .sty-comb { display: inline-flex; margin-left: auto; margin-right: -4px; }
  .site-nav-panel { position: absolute; left: 16px; right: 16px; top: calc(100% + 10px); display: grid; gap: 18px; padding: 20px; border: 1px solid var(--line-strong); border-radius: 8px; background: #1c1c1a; box-shadow: 0 24px 70px rgba(0,0,0,.48); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
  .site-header.menu-open .site-nav-panel { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .nav { display: grid; gap: 6px; }
  .nav a { padding: 12px 2px; border-bottom: 1px solid rgba(201,202,195,.10); }
  .header-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; align-items: stretch; }
  .header-cta .btn-ghost, .header-cta .btn { justify-content: center; padding-left: 14px; padding-right: 14px; }
  .services-hero-inner { grid-template-columns: 1fr; gap: 24px; }
  .services-hero-note { max-width: 520px; }
  .staff-editor-grid, .staff-detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .wrap { padding-left: 22px; padding-right: 22px; }
  .site-header .mark .wordmark .ey { font-size: 8px; }
  .site-header .mark .wordmark .nm { font-size: 18px; }
  .site-header .mark { gap: 10px; }
  .site-header .mark .glyph { width: 38px; height: 38px; flex-basis: 38px; }
  .site-nav-panel { left: 12px; right: 12px; }
  .header-cta { grid-template-columns: 1fr; }
  /* text links line up with the nav links above; only the Shop button is centered */
  .header-cta .btn-ghost { justify-content: flex-start; padding-left: 2px; }
  .services-menu-section { padding-top: 0; }
  .service-group-head { display: block; }
  .svc-list-elevated .svc { grid-template-columns: 1fr; gap: 10px; align-items: start; padding: 22px; }
  .svc .pr { font-size: 26px; }
  .services-cta-band { display: grid; padding: 24px; }
  .services-cta-actions { justify-content: stretch; }
  .services-cta-actions .btn { width: 100%; justify-content: center; }
  .site-footer { padding-top: 48px; }
  .foot-grid { grid-template-columns: 1fr; gap: 18px; text-align: center; }
  .foot-brand { display: grid; justify-items: center; }
  .foot-brand .mark { justify-content: center; }
  .foot-brand .muted, .foot-news .muted { max-width: 330px; margin-left: auto; margin-right: auto; }
  .foot-accordion { border-top: 1px solid var(--line); }
  .foot-accordion summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; cursor: pointer; }
  .foot-accordion summary h2, .foot-accordion summary h4 { margin: 0; }
  .foot-accordion-ic { display: inline-block; width: 9px; height: 9px; border-right: 1.5px solid var(--silver-dim); border-bottom: 1.5px solid var(--silver-dim); transform: rotate(45deg); transition: transform .16s ease, border-color .16s ease; }
  .foot-accordion[open] .foot-accordion-ic { transform: rotate(225deg); border-color: var(--cognac-2); }
  .foot-links { padding-bottom: 12px; text-align: left; }
  .foot-links a { padding: 9px 0; }
  .foot-news { padding-top: 10px; }
  .news { max-width: 360px; margin-left: auto; margin-right: auto; }
  .foot-bottom { flex-direction: column; justify-content: center; gap: 18px; text-align: center; margin-top: 34px; }
  .foot-bottom .soc { justify-content: center; }
  .staff-page-head { display: grid; align-items: start; }
  .staff-page-actions { justify-content: flex-start; }
  .staff-editor-grid, .staff-detail-grid { padding: 16px; gap: 16px; }
  .staff-panel { padding: 18px; }
  .staff-panel-head { display: grid; }
  .staff-panel-head .muted { text-align: left; }
  .staff-danger-panel { display: grid; }
}

/* Journal and contact: quiet editorial luxury. */
.journal-hero,.contact-hero-lux{position:relative;min-height:650px;background:#171614;color:#f7f2e8;overflow:hidden}
.journal-hero{min-height:510px;padding:0}
.contact-hero-lux{min-height:520px;padding:0}
.journal-hero>img,.contact-hero-lux>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Bias the crop toward the image's top: at wide viewports a centered crop
   clips the horse's ears at the frame edge (screenshot-review finding). */
.journal-hero>img{object-position:center 22%}
.contact-hero-lux>img{object-position:center}
.journal-hero-shade,.contact-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,9,8,.88) 0%,rgba(10,9,8,.54) 35%,rgba(10,9,8,.06) 72%)}
.journal-hero-inner,.contact-hero-inner{position:relative;z-index:1;min-height:650px;display:flex;align-items:center}
.journal-hero-inner{min-height:510px}
.contact-hero-inner{min-height:520px}
.journal-hero-inner>div,.contact-hero-inner>div{max-width:590px}
.journal-hero h1,.contact-hero-lux h1{margin:18px 0 22px;font-size:clamp(64px,7vw,112px);line-height:.88;font-weight:400;letter-spacing:-.045em}
.journal-hero h1 em,.contact-hero-lux h1 em{font-weight:400;color:#c59a4a}
.journal-hero p,.contact-hero-lux p{max-width:510px;font-family:var(--serif);font-size:20px;line-height:1.55;color:#e6dfd2}
.text-link-light,.text-link{display:inline-block;margin-top:30px;text-transform:uppercase;letter-spacing:.16em;font-size:11px;font-weight:700;text-decoration:none}
.text-link-light{color:#f7f2e8;border-bottom:1px solid rgba(247,242,232,.45);padding-bottom:8px}
.text-link{color:#80601f;border-bottom:1px solid rgba(128,96,31,.35);padding-bottom:8px}
.journal-intro,.contact-workspace{padding:110px 0;background:#f7f4ee}
.journal-intro{padding:74px 0 78px}
.journal-intro-grid,.journal-close-grid,.contact-workspace-grid{display:grid;grid-template-columns:1fr 1fr;gap:9vw;align-items:start}
.journal-intro h2,.contact-intro h2{margin:14px 0 0;font-size:clamp(42px,4.5vw,68px);line-height:1;letter-spacing:-.035em;font-weight:400}
.journal-intro .serif-lead,.contact-intro .serif-lead{font-size:24px;line-height:1.55;color:#514c43}
.journal-index{padding:95px 0 120px;background:#eeeadf}
.journal-index-head{display:flex;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid #c9c0ae;text-transform:uppercase;letter-spacing:.18em;font-size:10px;color:#80601f}
.journal-card{display:grid;grid-template-columns:55px 1fr 300px;gap:38px;align-items:center;padding:42px 0;border-bottom:1px solid #c9c0ae;color:#1b1916;text-decoration:none;transition:padding .3s ease,background .3s ease}
.journal-card:hover{padding-left:15px;padding-right:15px;background:rgba(255,255,255,.32)}
.journal-card-number,.journal-date,.journal-read{text-transform:uppercase;letter-spacing:.16em;font-size:10px;color:var(--sty-gold-deep)}
.journal-card h2{font-size:clamp(31px,3.4vw,52px);line-height:1.05;font-weight:400;margin:10px 0 12px}
.journal-card p{max-width:610px;color:var(--silver-dim);line-height:1.65}
.journal-read{display:block;margin-top:20px;font-weight:700}
.journal-card figure{margin:0;overflow:hidden}
.journal-card figure img{width:100%;height:210px;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.journal-card:hover figure img{transform:scale(1.045)}
.journal-card-mark{width:120px;aspect-ratio:688/900;margin:0 auto;background:url("../img/brand/styllian-icon.203d7691f18e.png") center/contain no-repeat;opacity:.18}
.journal-empty{padding:80px 0;text-align:center}
.journal-empty h2{font-size:48px;font-weight:400;margin:14px 0}
.journal-empty p{color:var(--silver-dim);margin-bottom:28px}
.journal-close{padding:105px 0;background:#191817;color:#f7f2e8}
.journal-close h2{font-size:clamp(33px,3.5vw,50px);font-weight:400;line-height:1.18;margin-top:16px}
.journal-close p{font-family:var(--serif);font-size:20px;line-height:1.65;color:#c9c0b2}
.journal-close .text-link{color:#c59a4a;border-color:#80601f}
.contact-workspace-grid{grid-template-columns:.82fr 1.18fr}
.contact-facts{margin-top:42px;border-top:1px solid #d5cdbf}
.contact-facts>div{display:grid;grid-template-columns:110px 1fr;gap:20px;padding:16px 0;border-bottom:1px solid #d5cdbf}
.contact-facts span,.lux-field label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--sty-gold-deep)}
.contact-facts strong{font-family:var(--serif);font-weight:400}
.contact-facts a{color:inherit}
.lux-contact-form{background:#191817;padding:48px;color:#f7f2e8;box-shadow:0 25px 60px rgba(30,25,17,.12)}
.lux-field-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.lux-field{margin-bottom:28px}
.lux-field label{display:block;margin-bottom:10px;color:#c59a4a}
.lux-field input,.lux-field select,.lux-field textarea{width:100%;border:0;border-bottom:1px solid #565046;border-radius:0;background:transparent;color:#f7f2e8;padding:11px 0;font:17px var(--serif);outline:none}
.lux-field input:focus,.lux-field select:focus,.lux-field textarea:focus{border-color:#c59a4a}
.lux-field select option{background:#191817}.lux-field textarea{min-height:150px;resize:vertical}
.lux-field textarea::placeholder{color:#827b70}
.contact-special{margin-top:28px}.contact-special>span{text-transform:uppercase;letter-spacing:.16em;font-size:10px;color:var(--sty-gold-deep)}
.contact-location{padding:85px 0;background:#f7f4ee}.contact-location .contact-map{margin-top:18px}.contact-location p{color:var(--silver-dim)}

@media (max-width:800px){
  .journal-hero,.contact-hero-lux,.journal-hero-inner,.contact-hero-inner{min-height:560px}
  .journal-hero,.journal-hero-inner{min-height:480px}
  .contact-hero-lux,.contact-hero-inner{min-height:470px}
  .journal-hero-shade,.contact-hero-shade{background:linear-gradient(90deg,rgba(10,9,8,.82),rgba(10,9,8,.3))}
  .journal-hero h1,.contact-hero-lux h1{font-size:58px}
  .journal-intro,.contact-workspace,.journal-close{padding:72px 0}
  .journal-intro{padding:58px 0 62px}
  .journal-intro-grid,.journal-close-grid,.contact-workspace-grid{grid-template-columns:1fr;gap:38px}
  .journal-index{padding:65px 0 80px}
  .journal-card{grid-template-columns:34px 1fr;gap:18px;padding:32px 0}
  .journal-card figure,.journal-card-mark{grid-column:2}
  .journal-card figure img{height:220px}
  .lux-contact-form{padding:32px 24px}
}
@media (max-width:520px){
  .journal-hero,.journal-hero-inner{min-height:440px}
  /* A top-down band on top of the horizontal shade: the gold kicker was
     washing out over the bright window/blaze at phone widths. */
  .journal-hero-shade{background:linear-gradient(180deg,rgba(10,9,8,.7),rgba(10,9,8,.12) 42%),linear-gradient(90deg,rgba(10,9,8,.82),rgba(10,9,8,.3))}
  .contact-hero-lux,.contact-hero-inner{min-height:440px}
  .journal-hero>img{object-position:62% center}.contact-hero-lux>img{object-position:58% center}
  .journal-hero-inner>div,.contact-hero-inner>div{max-width:330px}
  .journal-hero h1,.contact-hero-lux h1{font-size:50px}
  .journal-hero p,.contact-hero-lux p{font-size:17px}
  .lux-field-row{grid-template-columns:1fr;gap:0}
  .journal-card{grid-template-columns:1fr}.journal-card-number,.journal-card figure{grid-column:1}
  /* The decorative S is an edge ornament beside the copy; stacked full-width
     between entries on a phone it read as a stray graphic. */
  .journal-card-mark{display:none}
}

/* Account entry: a quiet, changing view of the stable. */
.login-campaign{position:relative;min-height:calc(100vh - 72px);padding:72px 0 90px;overflow:hidden;background:#11100e;color:#f7f2e8}
.login-campaign-images,.login-campaign-images img,.login-campaign-shade{position:absolute;inset:0;width:100%;height:100%}
.login-campaign-images img{object-fit:cover;object-position:center;opacity:0;transform:scale(1.025);animation:loginCampaignFade 18s infinite ease-in-out}
.login-campaign-images img:nth-child(2){animation-delay:6s}.login-campaign-images img:nth-child(3){animation-delay:12s}
.login-campaign-shade{background:linear-gradient(90deg,rgba(8,8,7,.9) 0%,rgba(8,8,7,.7) 34%,rgba(8,8,7,.18) 68%),linear-gradient(0deg,rgba(0,0,0,.36),transparent 55%)}
.login-campaign-inner{position:relative;z-index:2;display:flex;align-items:center;min-height:calc(100vh - 234px)}
.login-panel{width:min(100%,460px);padding:38px 40px 42px;border:1px solid rgba(194,161,77,.32);background:rgba(15,14,12,.72);box-shadow:0 28px 90px rgba(0,0,0,.38);backdrop-filter:blur(14px)}
.login-heading{text-align:left;margin-bottom:30px}.login-heading .eyebrow{color:#c59a4a}.login-heading h1{margin-top:10px;color:#f7f2e8;font-size:clamp(38px,4vw,52px);font-weight:400}
.login-form{max-width:none}.login-form .field label{color:#c59a4a}
.login-form .field input{border-color:rgba(247,242,232,.24);background:rgba(255,255,255,.055);color:#f7f2e8}
.login-form .field input:focus{border-color:#c59a4a}
@keyframes loginCampaignFade{
  0%{opacity:0;transform:scale(1.025)}
  5%,28%{opacity:1}
  34%,100%{opacity:0;transform:scale(1.065)}
}
@media (prefers-reduced-motion:reduce){
  .login-campaign-images img{display:none;animation:none}.login-campaign-images img.is-first{display:block;opacity:1;transform:none}
}
@media (max-width:700px){
  .login-campaign{min-height:calc(100vh - 66px);padding:52px 0 65px}
  .login-campaign-images img{object-position:66% center}
  .login-campaign-shade{background:rgba(8,8,7,.62)}
  .login-campaign-inner{min-height:calc(100vh - 183px)}
  .login-panel{margin:auto;padding:32px 25px 36px;background:rgba(15,14,12,.8)}
}

@media (max-width: 460px) {
  .site-header .mark .wordmark { display: none; }
  .news { display: grid; }
  .news button { min-height: 42px; }
}

/* ---- current pass: staff checkbox controls, social icons ---- */
.site-footer .soc a.soc-link { font-size: 0; }
.site-footer .soc a.soc-link svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.site-footer .soc a.soc-link:hover { border-color: var(--cognac); color: var(--cream); background: rgba(169,106,60,.10); }

.staff-body input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; flex: 0 0 18px; display: inline-grid; place-items: center; margin: 0; border: 1px solid var(--line-strong); border-radius: 5px; background: rgba(255,255,255,.025); color: var(--cream); cursor: pointer; transition: background .16s ease, border-color .16s ease, box-shadow .16s ease; }
.staff-body input[type="checkbox"]::after { content: ""; width: 9px; height: 5px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) scale(.6); opacity: 0; transition: opacity .14s ease, transform .14s ease; }
.staff-body input[type="checkbox"]:checked { background: var(--cognac); border-color: var(--cognac-2); box-shadow: 0 0 0 3px rgba(193,133,79,.12); }
.staff-body input[type="checkbox"]:checked::after { opacity: 1; transform: rotate(-45deg) scale(1); }
.staff-body input[type="checkbox"]:focus-visible { outline: 2px solid rgba(193,133,79,.85); outline-offset: 3px; }
.staff-body input[type="checkbox"]:disabled { opacity: .45; cursor: not-allowed; }
.field-check { margin-bottom: 18px !important; }
.field-check > label { margin-bottom: 0; }
.staff-check { position: relative; display: flex !important; align-items: flex-start; gap: 12px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.018); cursor: pointer; text-transform: none !important; letter-spacing: 0 !important; transition: border-color .16s ease, background .16s ease; }
.staff-check:hover { border-color: rgba(193,133,79,.45); background: rgba(255,255,255,.03); }
.staff-check input[type="checkbox"] { position: absolute; opacity: 0; inset: auto; width: 1px; height: 1px; }
.staff-check-box { width: 20px; height: 20px; flex: 0 0 20px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 6px; background: rgba(255,255,255,.025); transition: background .16s ease, border-color .16s ease, box-shadow .16s ease; }
.staff-check-box::after { content: ""; width: 10px; height: 6px; border-left: 2px solid var(--cream); border-bottom: 2px solid var(--cream); transform: rotate(-45deg) scale(.62); opacity: 0; transition: opacity .14s ease, transform .14s ease; }
.staff-check input[type="checkbox"]:checked + .staff-check-box { background: var(--cognac); border-color: var(--cognac-2); box-shadow: 0 0 0 3px rgba(193,133,79,.12); }
.staff-check input[type="checkbox"]:checked + .staff-check-box::after { opacity: 1; transform: rotate(-45deg) scale(1); }
.staff-check input[type="checkbox"]:focus-visible + .staff-check-box { outline: 2px solid rgba(193,133,79,.85); outline-offset: 3px; }
.staff-check-copy { display: grid; gap: 3px; min-width: 0; }
.staff-check-label { color: var(--cream); font-size: 14px; line-height: 1.25; }
.staff-check-help { color: var(--silver-dim); font-size: 12px; line-height: 1.35; }
#id_permissions input[type="checkbox"] { margin-top: 1px; }
#id_permissions li label { align-items: flex-start !important; line-height: 1.35; }

/* ---- mobile overflow hardening for public pages ---- */
.contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 860px) {
  .grid-3, .grid-2, .contact-grid, .book { grid-template-columns: 1fr; }
  .hero-actions, .hero-meta { flex-wrap: wrap; }
  .hero-actions .btn { justify-content: center; }
  .tier { padding-left: 26px; padding-right: 26px; }
}
@media (max-width: 560px) {
  .hero-actions { display: grid; grid-template-columns: 1fr; }
  .hero-actions .btn, section .wrap > div[style*="margin-top"] > .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; }
  .hero-meta { gap: 18px; }
  .hero-meta .stat { min-width: calc(50% - 10px); }
  .form-grid { grid-template-columns: 1fr; }
  .form-card { padding: 24px; }
  .tier .price { font-size: 44px; }
}

/* ---- services hero image refinement ---- */
.services-hero-image { margin: 0; position: relative; overflow: hidden; min-height: 280px; aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: 8px; background: var(--charcoal-2); box-shadow: 0 24px 60px rgba(0,0,0,.32); }
.services-hero-image::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(244,239,227,.04), inset 0 -80px 110px rgba(19,19,17,.32); }
.services-hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
@media (max-width: 980px) { .services-hero-image { max-width: 520px; } }
@media (max-width: 720px) { .services-hero-image { width: 100%; min-height: 220px; aspect-ratio: 16 / 11; } }

/* Insights board */
.in-num { font-family: var(--display); font-size: 30px; color: var(--cream); line-height: 1.1; }
.in-lbl { color: var(--silver-dim); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; margin-top: 4px; }
.in-bar-row { display: grid; grid-template-columns: minmax(0,1fr) 90px 40px; gap: 10px; align-items: center; padding: 4px 0; font-size: 13px; color: var(--silver); white-space: nowrap; }
.in-bar-row > span:last-child { text-align: right; color: var(--cream); }
.in-bar { display: block; height: 7px; background: rgba(255,255,255,.05); border-radius: 4px; overflow: hidden; }
.in-bar > span { display: block; height: 100%; background: #4a7c59; border-radius: 4px; }

/* Channel sync state */
.sync-state { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 13px 15px; margin-bottom: 8px; border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: 6px; background: rgba(255,255,255,.02); }
.sync-state.is-ok { border-left-color: var(--hunter); }
.sync-state.is-failing { border-left-color: #8d4433; }
.sync-state.is-stale { border-left-color: var(--cognac); }
.sync-state strong { color: var(--cream); font-family: var(--display); font-size: 17px; }
.sync-badge { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 40px; border: 1px solid var(--line-strong); font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--silver-dim); }
.sync-badge.is-ok { border-color: var(--hunter-2); color: #7fa98c; }
.sync-badge.is-failing { border-color: #8d4433; color: #d08b76; }
.sync-badge.is-stale { border-color: var(--cognac); color: var(--cognac-2); }
.sync-runs { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sync-runs th { padding: 0 10px 8px 0; text-align: left; color: var(--silver-dim); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.sync-runs td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--line); color: var(--silver); }
.sync-runs tr:last-child td { border-bottom: 0; }
.sync-failed { color: #d08b76; }
.sales-channel-stale { display: inline-block; margin-left: 8px; padding: 1px 8px; border: 1px solid var(--cognac); border-radius: 40px; color: var(--cognac-2); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; }

/* Customer order tracking */
.track-card { padding: 26px 28px; border: 1px solid var(--line-strong); border-radius: 10px; background: rgba(255,255,255,.02); }
.track-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.track-steps li { position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 14px; padding-bottom: 24px; }
.track-steps li:last-child { padding-bottom: 0; }
/* The connecting line runs between dots, not past the last one. */
.track-steps li:not(:last-child)::before { content: ""; position: absolute; left: 8px; top: 20px; bottom: 2px; width: 2px; background: var(--line-strong); }
.track-steps li.is-done:not(:last-child)::before { background: var(--hunter); }
.track-dot { width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--charcoal-2); }
.track-steps li.is-done .track-dot { border-color: var(--hunter); background: var(--hunter); }
.track-steps li.is-now .track-dot { border-color: var(--cognac); background: var(--cognac); box-shadow: 0 0 0 4px rgba(169,106,60,.18); }
.track-steps strong { color: var(--cream); font-family: var(--display); font-size: 19px; }
.track-steps li.is-todo strong { color: var(--silver-dim); }
.track-steps p { margin-top: 3px; color: var(--silver-dim); font-size: 13.5px; line-height: 1.55; }
.track-number { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.track-number-tag { display: block; color: var(--silver-dim); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.track-number strong { display: block; margin-top: 5px; font-family: var(--sans); font-size: 21px; letter-spacing: .04em; color: var(--cream); }
.track-number p { margin-top: 6px; font-size: 12.5px; }
.track-chip { display: inline-block; margin-left: 8px; padding: 2px 8px; border: 1px solid var(--hunter-2); border-radius: 40px; color: #7fa98c; font-size: 10px; letter-spacing: .06em; }
a.ln { text-decoration: none; transition: border-color .15s ease; }
a.ln:hover { border-bottom-color: var(--cognac); }
a.ln:hover .ln-n { color: var(--cognac-2); }

/* Ship Orders */
.ship-how { padding: 20px 22px; margin-bottom: 20px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.02); }
.ship-how-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.ship-steps { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.ship-steps li { position: relative; padding: 14px 16px 14px 15px; border: 1px solid var(--line); border-top: 2px solid var(--cognac); border-radius: 6px; background: rgba(255,255,255,.02); }
.ship-step-n { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-bottom: 8px; border-radius: 50%; background: var(--cognac); color: #fff; font-size: 11px; font-weight: 700; }
.ship-steps strong { display: block; color: var(--cream); font-family: var(--display); font-size: 18px; }
.ship-steps p { margin-top: 5px; color: var(--silver-dim); font-size: 12.5px; line-height: 1.5; }
.ship-notice { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 13px 17px; margin-bottom: 20px; border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: 6px; font-size: 13px; color: var(--silver); }
.ship-notice strong { color: var(--cream); }
.ship-notice.is-warn { border-left-color: var(--cognac); background: rgba(169,106,60,.07); }
.ship-notice.is-info { border-left-color: var(--hunter-2); background: rgba(74,124,89,.06); }
.ship-notice a { margin-left: auto; }
.ship-easy { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 18px 22px; margin-bottom: 20px; border: 1px solid var(--cognac); border-radius: 8px; background: rgba(169,106,60,.08); }
.ship-easy-title { color: var(--cream); font-family: var(--display); font-size: 21px; }
.ship-table-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.ship-selectall { display: inline-flex; align-items: center; gap: 8px; color: var(--silver); font-size: 12.5px; cursor: pointer; }
.ship-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ship-table th { padding: 0 12px 10px 0; text-align: left; color: var(--silver-dim); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ship-table td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); color: var(--silver); vertical-align: top; }
.ship-table tr:last-child td { border-bottom: 0; }
.ship-table tbody tr { cursor: pointer; transition: background .12s ease; }
.ship-table tbody tr:hover { background: rgba(255,255,255,.02); }
.ship-table tbody tr.is-picked { background: rgba(169,106,60,.09); }
.ship-check-col { width: 38px; padding-right: 0; }
.ship-stage { display: inline-block; padding: 3px 10px; border-radius: 40px; border: 1px solid var(--line-strong); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.ship-stage.is-todo { border-color: var(--cognac); color: var(--cognac-2); }
.ship-stage.is-part { border-color: var(--line-strong); color: var(--silver); }
.ship-stage.is-done { border-color: var(--hunter-2); color: #7fa98c; }
.ship-empty { padding: 34px 0; text-align: center; }
.ship-empty strong { display: block; color: var(--cream); font-family: var(--serif); font-size: 17px; margin-bottom: 4px; }
/* `display:flex` would otherwise beat the UA stylesheet's [hidden] rule and
   leave the bar on screen with nothing selected. */
.ship-bulkbar[hidden] { display: none; }
.ship-bulkbar { position: sticky; bottom: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 14px; padding: 14px 20px; border: 1px solid var(--cognac); border-radius: 8px; background: #1b1a17; box-shadow: 0 -8px 30px rgba(0,0,0,.45); }
.ship-bulkbar-count { color: var(--cream); font-size: 14px; }
.ship-bulkbar-count strong { font-family: var(--display); font-size: 22px; margin-right: 4px; }
.ship-bulkbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 860px) {
  .ship-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ship-table, .ship-table tbody, .ship-table tr, .ship-table td { display: block; width: 100%; }
  .ship-table tr { margin-bottom: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.02); }
  .ship-table td { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; padding: 4px 0; border-bottom: 0; text-align: right; overflow-wrap: anywhere; }
  .ship-table td::before { content: attr(data-label); flex-shrink: 0; color: var(--silver-dim); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-align: left; }
  .ship-table td.ship-check-col { justify-content: flex-start; }
  .ship-easy, .ship-bulkbar { flex-direction: column; align-items: stretch; }
}

/* Tap targets: WCAG 2.2 AA wants 24px minimum on interactive controls. */
/* Tap-target padding, with the left side pulled back so the padding does not
   read as a double word-space after "Powered by". */
.powered-by a { display: inline-block; padding: 5px 4px; margin-left: -4px; }
.product-back { padding: 6px 2px; }

/* Sales Hub */
.sales-headline { padding: 22px 24px; margin-bottom: 18px; border: 1px solid var(--line); border-left: 3px solid var(--cognac); border-radius: 8px; background: rgba(169,106,60,.05); }
.sales-headline-lead { color: var(--cream); font-family: var(--serif); font-size: 20px; line-height: 1.55; text-wrap: pretty; }
.sales-headline-lead strong { font-family: var(--sans); font-weight: 600; font-variant-numeric: tabular-nums; }
.sales-headline-sub { margin-top: 8px; color: var(--silver); font-size: 13.5px; }
.sales-headline-sub strong { color: var(--cream); font-weight: 600; }
.sales-daybar { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 12px; margin-bottom: 22px; }
.sales-day { display: grid; gap: 2px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.02); }
.sales-day-label { color: var(--silver-dim); font-size: 10.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.sales-day strong { color: var(--cream); font-family: var(--display); font-size: 25px; font-variant-numeric: tabular-nums; }
.sales-day .muted { font-size: 12px; }
.sales-tiles { display: grid; grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); gap: 14px; margin-bottom: 22px; }
.sales-tile .in-num { font-variant-numeric: tabular-nums; }
.sales-trend { display: inline-block; margin-top: 7px; font-size: 12px; font-weight: 600; }
.sales-trend.is-up { color: #7fa98c; }
.sales-trend.is-up::before { content: "▲ "; font-size: 9px; }
.sales-trend.is-down { color: #d08b76; }
.sales-trend.is-down::before { content: "▼ "; font-size: 9px; }
.sales-trend.is-flat { color: var(--silver-dim); font-weight: 500; }
.sales-attention { margin-bottom: 22px; }
.sales-attention-list { display: grid; gap: 9px; }
.sales-attention-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 15px; border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: 6px; background: rgba(255,255,255,.02); }
.sales-attention-item.is-act { border-left-color: var(--cognac); }
.sales-attention-item.is-watch { border-left-color: var(--hunter-2); }
.sales-attention-label { color: var(--cream); font-size: 14px; }
.sales-split { display: grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); gap: 18px; margin-bottom: 22px; }
.sales-channel { padding: 12px 0; border-bottom: 1px solid var(--line); }
.sales-channel:last-child { border-bottom: 0; }
.sales-channel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 7px; }
.sales-channel-name { color: var(--cream); font-family: var(--display); font-size: 19px; }
.sales-channel-money { color: var(--cream); font-size: 15px; font-variant-numeric: tabular-nums; }
.sales-channel-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 7px; color: var(--silver-dim); font-size: 12px; }
.sales-channel-meta .sales-trend { margin-top: 0; }
.sales-chart { display: flex; align-items: flex-end; gap: 2px; height: 110px; }
.sales-chart-col { flex: 1; display: flex; align-items: flex-end; height: 100%; }
.sales-chart-col > span { display: block; width: 100%; min-height: 1px; background: #4a7c59; border-radius: 2px 2px 0 0; transition: background .15s ease; }
.sales-chart-col:hover > span { background: var(--cognac); }
.sales-chart-axis { display: flex; justify-content: space-between; margin-top: 7px; font-size: 11px; }
.sales-filters { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 12px; }
.sales-filters input[type="search"], .sales-filters select {
  background: rgba(255,255,255,.03); border: 1px solid var(--line-strong); border-radius: 4px;
  padding: 8px 11px; color: var(--cream); font-family: var(--sans); font-size: 13px;
}
.sales-filters input[type="search"] { flex: 1; min-width: 210px; }
.sales-filters input:focus, .sales-filters select:focus { outline: none; border-color: var(--cognac); }
.sales-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sales-table th { padding: 0 12px 10px 0; text-align: left; color: var(--silver-dim); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid var(--line); white-space: nowrap; }
.sales-table td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); color: var(--silver); vertical-align: top; }
.sales-table tr:last-child td { border-bottom: 0; }
.sales-table td:first-child, .sales-table th:first-child { padding-left: 0; }
.sales-num { text-align: right; color: var(--cream); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sales-order-link { color: var(--cognac-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sales-order-link:hover { color: var(--cognac); text-decoration: underline; }
.sales-channel-tag { display: inline-block; padding: 3px 9px; border-radius: 40px; border: 1px solid var(--line-strong); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: var(--silver-dim); }
.sales-channel-tag.is-web { border-color: var(--hunter-2); color: #7fa98c; }
.sales-channel-tag.is-amazon { border-color: var(--cognac); color: var(--cognac-2); }
.sales-channel-tag.is-tiktok { border-color: #6b6b8d; color: #a8a8c8; }
.sales-ship { font-size: 12px; white-space: nowrap; }
.sales-ship.is-act { color: var(--cognac-2); font-weight: 600; }
.sales-ship.is-watch { color: #d08b76; }
.sales-ship.is-done { color: #7fa98c; }
.sales-ship.is-muted { color: var(--silver-dim); }
@media (max-width: 860px) {
  .sales-headline-lead { font-size: 17px; }
  .sales-attention-item { flex-direction: column; align-items: flex-start; gap: 10px; }
  /* On a phone the order table becomes one card per order: no sideways
     scrolling to find out what someone bought. */
  .sales-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sales-table, .sales-table tbody, .sales-table tr, .sales-table td { display: block; width: 100%; }
  .sales-table tr { margin-bottom: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.02); }
  .sales-table td { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 14px; padding: 4px 0; border-bottom: 0; text-align: right; overflow-wrap: anywhere; }
  .sales-table td::before { content: attr(data-label); flex-shrink: 0; color: var(--silver-dim); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-align: left; }
  .sales-table td > div { min-width: 0; overflow-wrap: anywhere; }
  .sales-table td:empty { display: none; }
  /* Long order ids, emails, and dates must wrap rather than widen the card. */
  .sales-table .sales-order-link, .sales-table .sales-ship, .sales-table td[data-label="Date"] { white-space: normal; }
  .sales-num { text-align: right; }
}

/* Inventory board */
.inv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.inv-table th { padding: 0 10px 10px 0; text-align: left; color: var(--silver-dim); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid var(--line); white-space: nowrap; }
.inv-table td { padding: 12px 10px 12px 0; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--silver); }
.inv-table tr:last-child td { border-bottom: 0; }
.inv-size { color: var(--cream); font-size: 14px; }
.inv-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.inv-num strong { color: var(--cream); font-size: 16px; }
.inv-badge { display: inline-block; padding: 3px 9px; border-radius: 40px; border: 1px solid var(--line-strong); font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--silver-dim); white-space: nowrap; }
.inv-badge.is-ok { border-color: var(--hunter-2); color: #7fa98c; }
.inv-badge.is-low { border-color: var(--cognac); color: var(--cognac-2); }
.inv-badge.is-out { border-color: #8d4433; color: #d08b76; }
.inv-stock-controls { min-width: 520px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); box-shadow: inset 0 1px rgba(255,255,255,.025); }
.inv-adjust { display: grid; grid-template-columns: 92px 68px minmax(120px,.85fr) minmax(140px,1fr) auto; align-items: end; gap: 8px; }
.inv-control { display: grid; gap: 5px; min-width: 0; }
.inv-control > span { color: var(--silver-dim); font-size: 9px; font-weight: 600; letter-spacing: .14em; line-height: 1; text-transform: uppercase; }
.inv-control select, .inv-control input { width: 100%; height: 36px; border: 1px solid var(--line-strong); border-radius: 5px; background-color: rgba(10,10,10,.32); color: var(--cream); font-family: var(--sans); font-size: 12.5px; transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease; }
.inv-control select { appearance: none; padding: 0 28px 0 10px; background-image: linear-gradient(45deg,transparent 50%,var(--silver-dim) 50%),linear-gradient(135deg,var(--silver-dim) 50%,transparent 50%); background-position: calc(100% - 13px) 15px,calc(100% - 9px) 15px; background-size: 4px 4px,4px 4px; background-repeat: no-repeat; cursor: pointer; }
.inv-control input { padding: 0 10px; }
.inv-control input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; }
.inv-control input::placeholder { color: var(--silver-dim); opacity: .72; }
.inv-control select:hover, .inv-control input:hover { border-color: rgba(193,133,79,.55); background-color: rgba(10,10,10,.48); }
.inv-control select:focus, .inv-control input:focus { outline: none; border-color: var(--cognac-2); background-color: rgba(10,10,10,.58); box-shadow: 0 0 0 3px rgba(193,133,79,.12); }
.inv-apply { min-height: 36px; white-space: nowrap; }
.inv-threshold { display: flex; align-items: end; justify-content: flex-end; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.inv-control-threshold { width: 116px; margin-right: auto; }
.inv-threshold .btn { min-height: 34px; }
.inv-reorder-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 12px; }
.inv-reorder-card { border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: 6px; padding: 13px 15px; }
.inv-reorder-card.is-low { border-left-color: var(--cognac); }
.inv-reorder-card.is-out { border-left-color: #8d4433; }
.inv-reorder-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.inv-reorder-head strong { font-family: var(--display); font-size: 19px; color: var(--cream); }
.inv-reorder-nums { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--silver-dim); }
.inv-reorder-nums strong { color: var(--cream); font-size: 14px; font-variant-numeric: tabular-nums; }
.inv-reorder-cta { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); font-size: 12px; color: var(--cognac-2); }
.inv-delta { display: inline-block; min-width: 40px; font-variant-numeric: tabular-nums; font-weight: 600; }
.inv-delta.up { color: #7fa98c; }
.inv-delta.down { color: #d08b76; }
@media (max-width: 1100px) { .inv-stock-controls { min-width: 480px; } .inv-adjust { grid-template-columns: 84px 62px 112px minmax(120px,1fr); } .inv-apply { grid-column: 1 / -1; justify-content: center; } }

/* Multi-checkbox lists (provider services, role permissions) */
.multicheck-list ul { list-style: none; padding: 0; margin: 6px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 18px; }
.multicheck-list li label { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--cream-2); text-transform: none; letter-spacing: 0; cursor: pointer; }
.multicheck-list input[type=checkbox] { appearance: auto; width: 15px; height: 15px; accent-color: var(--cognac); position: static; opacity: 1; }

/* Service photo on the public menu */
.svc-photo { width: 68px; height: 68px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); flex-shrink: 0; margin-right: 16px; }

/* Spam score badges (WLH pattern) */
.spam-badge { display: inline-block; min-width: 30px; text-align: center; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; }
.spam-low { background: rgba(74,124,89,.22); color: #9fd3ae; border: 1px solid rgba(74,124,89,.5); }
.spam-medium { background: rgba(182,139,55,.2); color: #e3c384; border: 1px solid rgba(182,139,55,.5); }
.spam-high { background: rgba(160,60,60,.22); color: #d99a9a; border: 1px solid rgba(160,60,60,.55); }

/* Contact page map */
.contact-map { position: relative; width: 100%; aspect-ratio: 16 / 6; min-height: 280px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.contact-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(0.3) contrast(1.05); }
@supports not (aspect-ratio: 16 / 6) { .contact-map { height: 360px; } }

/* Rich-text WYSIWYG editor (journal + pages) */
.rte { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: rgba(255,255,255,.02); }
.rte-toolbar { display: flex; flex-wrap: wrap; gap: 3px; padding: 7px 8px; background: rgba(255,255,255,.03); border-bottom: 1px solid var(--line); }
.rte-toolbar button { min-width: 32px; min-height: 30px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 4px; background: transparent; color: var(--silver); font-size: 12.5px; cursor: pointer; }
.rte-toolbar button:hover { border-color: var(--cognac); color: var(--cream); }
.rte-sep { width: 1px; align-self: stretch; margin: 2px 3px; background: var(--line); }
.rte-body { min-height: 22rem; padding: 16px 18px; font-family: var(--serif); font-size: 16px; line-height: 1.7; color: var(--cream-2); outline: none; }
.rte-body:focus { box-shadow: inset 0 0 0 1px var(--cognac); }
.rte-body h2 { color: var(--cream); font-size: 1.5rem; margin: 1rem 0 .5rem; }
.rte-body h3 { color: var(--cream); font-size: 1.2rem; margin: .85rem 0 .4rem; }
.rte-body p { margin: 0 0 .7rem; }
.rte-body ul, .rte-body ol { padding-left: 1.5rem; margin: 0 0 .7rem; }
.rte-body blockquote { border-left: 3px solid var(--cognac); margin: .8rem 0; padding: .2rem 0 .2rem 1rem; color: var(--silver); }
.rte-body a { color: var(--cognac-2); }
.rte-body img { max-width: 100%; height: auto; border-radius: 6px; margin: .5rem 0; }
.rte-body .embed { display: block; position: relative; max-width: 420px; margin: 1rem 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #0e0e0e; }
.rte-body .embed img { display: block; width: 100%; margin: 0; border-radius: 0; }
.rte-body .embed a { display: block; color: #fff; text-decoration: none; padding: .8rem 1rem; }
.rte-body .embed::after { content: "\25B6 Video"; position: absolute; top: .5rem; left: .5rem; padding: .15rem .5rem; border-radius: 4px; font-size: .7rem; font-weight: 700; background: rgba(0,0,0,.7); color: #fff; pointer-events: none; }
.rte-source { width: 100%; min-height: 22rem; padding: 16px 18px; border: 0; background: #141414; color: var(--silver); font-family: ui-monospace, monospace; font-size: 13px; line-height: 1.6; resize: vertical; outline: none; }
.rte-embed-modal { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 1rem; background: rgba(10,10,10,.6); }
.rte-embed-modal[hidden] { display: none; }
.rte-embed-card { width: 100%; max-width: 30rem; padding: 24px; background: #1a1a18; border: 1px solid var(--line-strong, var(--line)); border-radius: 12px; }
.rte-embed-card h3 { color: var(--cream); font-family: var(--display); font-size: 1.4rem; margin: 0 0 .3rem; }
.rte-embed-card input { width: 100%; margin-top: 12px; padding: 10px 12px; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 6px; color: var(--cream); font-size: 14px; }
.rte-embed-error { color: #d99a9a; font-size: 13px; margin: 8px 0 0; }
.rte-embed-error[hidden] { display: none; }
.rte-embed-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* Public responsive video player */
.embed-responsive { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 2rem 0; background: #000; border-radius: 8px; overflow: hidden; }
.embed-responsive iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@supports not (aspect-ratio: 16 / 9) { .embed-responsive { height: 0; padding-bottom: 56.25%; } }

/* ==========================================================================
   Styllian brand pass: ivory rooms, black panels, gold hairlines
   ========================================================================== */

/* Wordmark asset (the logotype is only ever the supplied image). */
.nav-logo, .foot-wordmark { max-height: 46px; width: auto; display: block; }
.foot-wordmark { max-height: 54px; margin-bottom: 18px; }

/* Gold hairline rules that structure sections. */
.gold-rule { height: 1px; border: 0; background: linear-gradient(90deg, var(--sty-gold), rgba(194,161,77,.15)); }

/* Prices: Inter tabular numerals, dollar sign at 70% size. */
.price-figure { font-family: var(--sans); font-variant-numeric: tabular-nums; font-weight: 500; }
.price-figure .cur { font-size: .7em; vertical-align: 6%; margin-right: 1px; }

/* Homepage hero: black panel, wordmark, bottle at meaningful scale. */
.sty-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); gap: 56px; align-items: center; padding: 84px 0 96px; }
.sty-hero-wordmark { max-width: 300px; width: 60%; height: auto; margin-bottom: 30px; }
.sty-hero-copy h1 { color: var(--cream); }
.sty-hero-bottle { margin: 0; display: grid; justify-items: center; }
.sty-hero-bottle img { max-height: 560px; width: auto; max-width: 100%; filter: drop-shadow(0 34px 60px rgba(0,0,0,.55)); }
.sty-hero-bottle figcaption { margin-top: 16px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--silver-dim); }

/* Formula story */
.formula-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr); gap: 56px; align-items: start; }
.ingredient-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 0; }
.ingredient-list li { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; color: var(--cream-2); }
.ingredient-list li strong { font-family: var(--display); font-weight: 600; font-size: 19px; color: var(--cream); }
.formula-directions { margin: 22px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--cream-2); }
.formula-directions strong { display: block; margin-bottom: 4px; font-family: var(--display); font-weight: 600; font-size: 19px; color: var(--cream); }
.freeof-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.freeof-badges span { border: 1px solid var(--sty-gold-deep); color: var(--sty-gold-deep); border-radius: 999px; padding: 7px 16px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.bg-ink .freeof-badges span, .hero .freeof-badges span { border-color: rgba(194,161,77,.6); color: var(--sty-gold); }
.formula-photo { margin: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.formula-photo img { width: 100%; height: auto; display: block; }
.formula-photo figcaption { padding: 12px 16px; font-size: 12.5px; color: var(--silver-dim); border-top: 1px solid var(--line); background: var(--charcoal-2); }

/* The three sizes */
.size-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 18px; align-items: stretch; }
.size-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--charcoal-2); text-decoration: none; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.size-card:hover { border-color: var(--sty-gold); transform: translateY(-2px); box-shadow: 0 24px 50px rgba(28,25,23,.10); }
.size-card .shot { background: #ffffff; display: grid; place-items: center; padding: 26px 18px; }
.size-card .shot img { max-height: 210px; width: auto; max-width: 100%; object-fit: contain; }
.size-card .bd { padding: 22px 24px 26px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.size-card .size-role { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--sty-gold-deep); }
.size-card .size-name { font-family: var(--display); font-weight: 600; font-size: 26px; color: var(--cream); }
.size-card .size-note { font-size: 14.5px; color: var(--silver-dim); }
.size-card .size-price { margin-top: 8px; font-size: 20px; color: var(--cream); }
.size-card.is-lead { border-color: rgba(143,116,51,.55); }

/* FAQ (AEO spine) */
.faq-list { max-width: 780px; }
.faq-list details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 18px 0; font-family: var(--display); font-weight: 600; font-size: 21px; color: var(--cream); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .faq-ic { color: var(--sty-gold-deep); font-family: var(--sans); font-size: 18px; transition: transform .16s ease; }
.faq-list details[open] summary .faq-ic { transform: rotate(45deg); }
.faq-list .faq-a { padding: 0 0 20px; max-width: 640px; color: var(--cream-2); font-size: 15.5px; line-height: 1.7; }
.faq-list .faq-a a { color: var(--sty-gold-deep); text-decoration: underline; }

/* Ritual band */
.ritual-band blockquote { margin: 0; max-width: 720px; font-family: var(--display); font-size: clamp(24px, 3vw, 34px); font-weight: 500; line-height: 1.35; color: var(--cream); }
.ritual-band blockquote span { color: var(--sty-gold); }

@media (max-width: 980px) {
  .sty-hero-grid { grid-template-columns: 1fr; gap: 40px; padding: 64px 0 72px; }
  .sty-hero-bottle img { max-height: 420px; }
  .formula-grid { grid-template-columns: 1fr; }
  .size-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
}
@media (max-width: 720px) {
  .ingredient-list li { grid-template-columns: 1fr; gap: 4px; }
}

/* Homepage campaign: image-led, editorial, and deliberately spacious. */
.campaign-hero { position: relative; min-height: min(830px, calc(100vh - 86px)); padding: 0; overflow: hidden; background: #0e0d0c; color: var(--sty-ivory); }
.campaign-hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.campaign-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,8,7,.92) 0%, rgba(8,8,7,.72) 32%, rgba(8,8,7,.12) 66%, rgba(8,8,7,.05) 100%), linear-gradient(0deg, rgba(0,0,0,.42), transparent 45%); }
.campaign-hero-inner { position: relative; z-index: 1; min-height: inherit; display: flex; align-items: center; padding-top: 74px; padding-bottom: 86px; }
.campaign-hero-copy { max-width: 610px; }
.campaign-hero .eyebrow { color: var(--sty-gold); }
.campaign-hero h1 { color: var(--sty-ivory); font-size: clamp(62px, 7.4vw, 112px); line-height: .84; letter-spacing: -.025em; }
.campaign-hero h1 em { color: #d8c59a; font-weight: 500; }
.campaign-hero p { margin: 34px 0 0; max-width: 540px; color: rgba(247,244,238,.86); font-family: var(--serif); font-size: clamp(19px, 1.7vw, 25px); line-height: 1.48; }
.campaign-hero .hero-actions { align-items: center; }
.text-link-light, .text-link { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding: 10px 0 7px; }
.text-link-light { color: var(--sty-ivory); border-color: rgba(247,244,238,.4); }
.text-link { color: var(--sty-gold-deep); }
.text-link span, .text-link-light span { transition: transform .2s ease; }
.text-link:hover span { transform: translateX(4px); }
.text-link-light:hover span { transform: translateY(3px); }
.campaign-proof { margin-top: 68px; padding-top: 22px; border-top: 1px solid rgba(247,244,238,.22); display: flex; gap: 30px; color: rgba(247,244,238,.74); font-size: 11px; letter-spacing: .17em; text-transform: uppercase; }
.campaign-proof span + span::before { content: "·"; color: var(--sty-gold); margin-right: 30px; }

.editorial-image { margin: 0; }
.editorial-image img { width: 100%; height: 100%; object-fit: cover; }
.editorial-image figcaption { margin-top: 12px; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--silver-dim); }
.result-story { padding: 130px 0; }
.result-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); gap: clamp(60px, 8vw, 120px); align-items: center; }
.result-grid .editorial-image img { aspect-ratio: 4 / 5; }
.result-copy { padding: 30px 0; }
.result-copy h2 { font-size: clamp(48px, 5vw, 72px); }
.result-copy .serif-lead { margin-top: 30px; }
.result-notes { margin: 40px 0 32px; border-top: 1px solid var(--line); }
.result-notes .result-note { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 22px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.result-note > img { display: block; width: 96px; height: 96px; object-fit: cover; }
.result-note-copy { display: grid; gap: 5px; }
.result-notes strong { font-family: var(--display); font-size: 19px; font-weight: 600; }
.result-notes span { font-size: 14px; color: var(--silver-dim); }

.formula-story { background: #181716; color: var(--sty-ivory); --cream:var(--sty-ivory); --cream-2:#ded8cb; --silver-dim:#a59d8c; --line:rgba(247,244,238,.14); --charcoal-2:#201f1d; --cognac-2:var(--sty-gold); }
.formula-intro { max-width: 720px; }
.formula-story .eyebrow { color: var(--sty-gold); }
.ingredient-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(194,161,77,.45); border-bottom: 1px solid var(--line);
  /* uniform padding on every article so all three images render the SAME
     size (the old no-left-padding first card was 44px wider, and with the
     fixed aspect ratio, taller - its captions started lower). The negative
     margins put the outer images back on the page rails. */
  margin-left: -32px; margin-right: -32px; }
.ingredient-feature-grid article { min-height: 280px; padding: 34px 32px 42px; }
.ingredient-feature-grid article + article { border-left: 1px solid var(--line); }
.ingredient-feature-grid figure{margin:0 0 25px;overflow:hidden;background:#24221f}
.ingredient-feature-grid figure img{display:block;width:100%;aspect-ratio:1.2/1;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .5s ease}
.ingredient-feature-grid article:hover figure img{transform:scale(1.035);filter:contrast(1.04)}
.ingredient-number { font-size: 11px; letter-spacing: .16em; color: var(--sty-gold); }
.ingredient-feature-grid h3 { margin-top: 18px; color: var(--sty-ivory); font-size: 28px; }
.ingredient-feature-grid p { margin-top: 12px; font-size: 15px; color: #bcb4a4; }
.full-formula { margin-top: 32px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.full-formula summary { list-style: none; cursor: pointer; padding: 20px 0; display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--sty-ivory); }
.full-formula summary::-webkit-details-marker { display:none; }
.full-formula summary span { color: var(--sty-gold); font-size: 19px; transition: transform .2s; }
.full-formula[open] summary span { transform: rotate(45deg); }
.full-formula-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 56px; padding: 12px 0 44px; align-items: start; }
.formula-story .formula-photo { border-radius: 0; border-color: var(--line); }
.formula-story .formula-photo {
  position: relative;
  z-index: 1;
  cursor: zoom-in;
  transform: scale(1);
  transform-origin: right center;
  transition: transform .7s cubic-bezier(.2,.7,.2,1), box-shadow .7s ease;
}
.formula-story .formula-photo img {
  transform: scale(1.001);
  transform-origin: center center;
  transition: transform .85s cubic-bezier(.2,.7,.2,1), filter .85s ease;
  will-change: transform;
}
.formula-story .formula-photo::after {
  content: "";
  position: absolute;
  inset: 0 0 42px;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.12) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .95s cubic-bezier(.2,.7,.2,1);
}
.formula-story .formula-photo:hover {
  z-index: 8;
  cursor: zoom-out;
  transform: scale(1.58);
  box-shadow: 0 38px 90px rgba(0,0,0,.48), 0 0 0 1px rgba(194,161,77,.35);
}
.formula-story .formula-photo:hover img { transform: scale(1.015); filter: contrast(1.04); }
.formula-story .formula-photo:hover::after { transform: translateX(120%); }
@media (prefers-reduced-motion: reduce) {
  .formula-story .formula-photo, .formula-story .formula-photo img, .formula-story .formula-photo::after { transition: none; }
}
@media (hover: none), (max-width: 980px) {
  .formula-story .formula-photo:hover { transform: none; box-shadow: none; }
}

/* Luxury catalog system */
.shop-campaign { position:relative; min-height:570px; padding:0; overflow:hidden; background:#111; color:var(--sty-ivory); }
.shop-campaign > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 56%; }
.shop-campaign-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(9,8,7,.93),rgba(9,8,7,.66) 42%,rgba(9,8,7,.12) 75%),linear-gradient(0deg,rgba(0,0,0,.35),transparent); }
.shop-campaign-inner { position:relative; z-index:1; min-height:570px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.shop-campaign .eyebrow { color:var(--sty-gold); }
.shop-campaign h1 { font-size:clamp(58px,7vw,96px); line-height:.9; color:var(--sty-ivory); }
.shop-campaign h1 em { color:#d8c59a; font-weight:500; }
.shop-campaign p { max-width:520px; margin:26px 0 30px; font-family:var(--serif); font-size:22px; color:#ded8cb; }
.shop-collection { padding:120px 0 130px; }
.shop-section-head { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:end; margin-bottom:58px; }
.shop-section-head h2 { font-size:clamp(42px,4.5vw,62px); }
.shop-section-head > p { max-width:470px; justify-self:end; }
.shop-proof { background:#191817; color:var(--sty-ivory); --cream:var(--sty-ivory); --cream-2:#ded8cb; --silver-dim:#aaa191; --line:rgba(247,244,238,.15); }
.shop-proof-grid { display:grid; grid-template-columns:1fr .68fr; gap:100px; align-items:center; }
.shop-proof .eyebrow { color:var(--sty-gold); }
.shop-proof h2 { font-size:clamp(44px,5vw,68px); }
.shop-proof .serif-lead { margin-top:28px; }
.shop-proof .freeof-badges span { color:var(--sty-gold); border-color:rgba(194,161,77,.55); }
.shop-proof figure { margin:0; overflow:hidden; border:1px solid var(--line); }
.shop-proof figure img { width:100%; }
.shop-proof figcaption { padding:11px 14px; color:#aaa191; font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.shop-rider-note { padding:125px 0; }
.shop-rider-grid { display:grid; grid-template-columns:1.08fr .92fr; gap:90px; align-items:center; }
.shop-rider-grid > img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.shop-rider-grid h2 { font-size:clamp(40px,4vw,58px); }
.shop-rider-grid h2 em { color:var(--sty-chestnut); font-weight:500; }
.shop-rider-grid p { margin:24px 0; }

.lux-product { padding:52px 0 110px; }
.product-back { display:inline-flex; align-items:center; gap:10px; margin-bottom:30px; color:var(--silver-dim); font-size:11px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; }
.lux-product-grid { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr); gap:clamp(55px,7vw,100px); align-items:start; }
.lux-gallery,.lux-buybox { min-width:0; }
/* One sizing system, no transforms: the old per-size scale/translate
   choreography zoomed past the whitespace of the retired square photos and,
   with the tight transparent packshots, magnified and clipped the jugs
   instead. Heights per size (the same ladder idea as the size cards), bottle
   grounded on a padded base line; --pd-h animates the variant switch. */
.lux-product-stage { position:relative; height:620px; display:flex; align-items:flex-end; justify-content:center; overflow:hidden; background:#fff; border-top:1px solid var(--line-strong); padding-bottom:46px; --pd-h:520px; }
.lux-product-stage img { width:auto; height:var(--pd-h); max-width:86%; object-fit:contain; transition:height .55s cubic-bezier(.2,.7,.2,1); }
.lux-product-stage[data-size^="2 "]   { --pd-h:300px; }
.lux-product-stage[data-size^="16 "]  { --pd-h:455px; }
.lux-product-stage[data-size^="32 "]  { --pd-h:510px; }
.lux-product-stage[data-size^="64 "]  { --pd-h:535px; }
.lux-product-stage[data-size^="128 "] { --pd-h:560px; }
.lux-magnify-trigger{position:absolute;right:18px;bottom:17px;z-index:3;padding:9px 12px;border:1px solid rgba(128,96,31,.38);background:rgba(255,255,255,.88);color:#72551d;font:600 9px var(--sans);letter-spacing:.16em;text-transform:uppercase;cursor:zoom-in;backdrop-filter:blur(8px);transition:background .25s ease,border-color .25s ease}
.lux-magnify-trigger span{font-size:14px;margin-right:5px}.lux-magnify-trigger:hover{background:#fff;border-color:var(--sty-gold-deep)}
.lux-image-dialog{width:min(94vw,1120px);height:min(92vh,900px);padding:54px 54px 30px;border:1px solid rgba(194,161,77,.5);background:#f7f4ee;color:#191817;box-shadow:0 35px 110px rgba(0,0,0,.62);overflow:hidden}
.lux-image-dialog::backdrop{background:rgba(8,8,7,.84);backdrop-filter:blur(9px)}
.lux-image-dialog-close{position:absolute;right:20px;top:18px;border:0;border-bottom:1px solid var(--sty-gold-deep);background:transparent;padding:5px 0;color:#72551d;font:600 10px var(--sans);letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.lux-image-dialog-stage{--zoom-x:50%;--zoom-y:50%;height:calc(100% - 28px);display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff;cursor:zoom-in}
.lux-image-dialog-stage img{width:100%;height:100%;object-fit:contain;transform-origin:var(--zoom-x) var(--zoom-y);transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .4s ease;will-change:transform}
.lux-image-dialog-stage:hover img,.lux-image-dialog-stage.is-zoomed img{transform:scale(1.65);filter:contrast(1.035)}
.lux-image-dialog-stage.is-zoomed{cursor:zoom-out}
.lux-image-dialog>p{margin:10px 0 0;text-align:center;color:#7d7569;font-size:10px;letter-spacing:.12em;text-transform:uppercase}
@media (prefers-reduced-motion:reduce){.lux-image-dialog-stage img{transition:none}}
@media (max-width:720px){.lux-image-dialog{width:96vw;height:84vh;padding:48px 14px 26px}.lux-image-dialog-stage:hover img{transform:none}.lux-image-dialog-stage.is-zoomed img{transform:scale(1.8)}}
.lux-trust-row { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--line); }
.lux-trust-row span { display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 10px 14px; text-align:center; color:var(--silver-dim); font-size:9px; letter-spacing:.12em; text-transform:uppercase; }
.lux-trust-row span + span { border-left:1px solid var(--line); }
.lux-trust-row svg { height:20px; width:auto; display:block; }
.lux-trust-row .trust-line { fill:none; stroke:var(--sty-gold-deep); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
.lux-buybox { position:sticky; top:100px; padding-top:24px; }
.lux-buybox h1 { font-size:clamp(38px,3.8vw,56px); line-height:1; }
/* the product is named in the h1 (search, AI answers); the campaign line rides beneath it */
.lux-product-tagline { margin:12px 0 0; font-family:var(--serif); font-size:clamp(24px,2.2vw,30px); line-height:1.1; color:var(--sty-chestnut); }
.lux-product-ingredients { max-width:820px; margin-top:44px; }
.lux-product-formula #ingredients { scroll-margin-top:96px; }
@media (prefers-reduced-motion: no-preference) {
  html:has([data-product-detail]) { scroll-behavior:smooth; }
}
.lux-product-lead { margin-top:25px; max-width:560px; font-family:var(--serif); font-size:19px; line-height:1.6; }
.lux-price { margin:27px 0; padding:19px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-family:var(--sans); font-size:34px; font-variant-numeric:tabular-nums; }
.lux-price .currency { font-size:.65em; }
.lux-price small { display:block; margin-top:3px; color:var(--sty-gold-deep); font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; }
.lux-variant-picker { border:0; padding:0; margin:0; }
.lux-variant-picker legend { margin-bottom:12px; color:var(--cream); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; }
.lux-variant-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.lux-variant-option { position:relative; min-height:72px; padding:11px 12px; display:grid; grid-template-columns:1fr auto; gap:2px 10px; border:1px solid var(--line); cursor:pointer; transition:border-color .18s,background .18s; }
.lux-variant-option:has(input:checked) { border-color:var(--sty-gold-deep); background:#f1ece2; }
.lux-variant-option input { position:absolute; opacity:0; pointer-events:none; }
.variant-size { color:var(--cream); font-family:var(--display); font-size:19px; }
.variant-name { grid-row:2; color:var(--silver-dim); font-size:10px; letter-spacing:.08em; }
.variant-price { grid-column:2; grid-row:1/3; align-self:center; font-size:13px; }
.lux-add { width:100%; justify-content:center; margin-top:16px; padding-top:17px; padding-bottom:17px; }
.lux-amazon-note { margin:10px 0 0; font-size:12.5px; text-align:center; }
/* .btn sets display, which outranks the hidden attribute's UA rule */
.lux-add[hidden], .lux-amazon-note[hidden] { display:none; }
.lux-assurances { margin-top:26px; border-top:1px solid var(--line); }
.lux-assurances > div { display:grid; grid-template-columns:72px minmax(0,1fr); align-items:center; gap:18px; padding:16px 0; border-bottom:1px solid var(--line); }
.assurance-photo { display:block; width:72px; height:72px; object-fit:cover; }
.assurance-copy { display:grid; gap:5px; }
.lux-assurances strong { font-family:var(--display); font-size:17px; }
.lux-assurances span { color:var(--silver-dim); font-size:12px; }
.lux-product-formula { background:#191817; color:var(--sty-ivory); --cream:var(--sty-ivory); --cream-2:#ded8cb; --line:rgba(247,244,238,.15); }
.lux-product-formula .eyebrow { color:var(--sty-gold); }
.lux-formula-head { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:end; }
.lux-formula-head h2 { font-size:clamp(44px,5vw,68px); }
.lux-formula-head > p { color:#b8b0a1; }
.lux-ingredient-grid { display:grid; grid-template-columns:repeat(3,1fr); margin:55px 0 35px; border-top:1px solid rgba(194,161,77,.48); border-bottom:1px solid var(--line); }
.lux-ingredient-grid article { padding:30px 38px 38px 0; }
.lux-ingredient-grid article + article { padding-left:38px; border-left:1px solid var(--line); }
.lux-ingredient-grid article > span { color:var(--sty-gold); font-size:10px; letter-spacing:.15em; }
.lux-ingredient-grid h3 { margin-top:32px; color:var(--sty-ivory); font-size:27px; }
.lux-ingredient-grid p { margin-top:8px; color:#aaa191; font-size:14px; }
.lux-product-ritual { position:relative; min-height:650px; padding:0; overflow:hidden; color:var(--sty-ivory); }
.lux-product-ritual > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.lux-product-ritual-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,7,6,.9),rgba(7,7,6,.55) 45%,rgba(7,7,6,.08)); }
.lux-product-ritual .wrap { position:relative; z-index:1; min-height:650px; display:flex; align-items:center; }
.lux-product-ritual .wrap > div { max-width:620px; }
.lux-product-ritual .eyebrow { color:var(--sty-gold); }
.lux-product-ritual h2 { font-size:clamp(46px,5vw,70px); }
.lux-product-ritual p { margin:24px 0 30px; color:#d2ccbf; font-family:var(--serif); font-size:19px; }

/* product reviews (the trust engine on the canonical page) */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.lux-reviews { padding:90px 0 100px; border-top:1px solid var(--line); }
.lux-reviews-head { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:44px; }
.lux-reviews-head h2 { font-size:clamp(40px,4.5vw,58px); }
.lux-reviews-aggregate { display:flex; align-items:center; gap:10px; font-family:var(--sans); font-size:22px; }
.lux-stars { --rating:0; display:inline-block; font-size:17px; letter-spacing:2px; line-height:1; }
.lux-stars::before { content:"★★★★★"; background:linear-gradient(90deg, var(--sty-gold-deep) calc(var(--rating) / 5 * 100%), var(--line-strong) calc(var(--rating) / 5 * 100%)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lux-reviews-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr); gap:clamp(45px,6vw,90px); align-items:start; }
.lux-review-list { display:grid; gap:0; }
.lux-review { padding:26px 0; border-top:1px solid var(--line); }
.lux-review:last-child { border-bottom:1px solid var(--line); }
.lux-review header { display:flex; align-items:center; gap:14px; }
.lux-review h3 { font-family:var(--serif); font-size:19px; color:var(--cream); }
.lux-review > p { margin-top:10px; max-width:620px; color:var(--cream-2); font-family:var(--serif); font-size:16px; line-height:1.65; }
.lux-review-meta { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:14px; font-size:12px; color:var(--silver-dim); }
.lux-review-meta strong { color:var(--cream); font-weight:600; }
.lux-verified { padding:3px 9px; border:1px solid var(--hunter-2); color:var(--hunter); font-size:9px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
.lux-reviews-empty { padding:34px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--silver-dim); font-family:var(--serif); font-size:17px; }
.lux-review-form { max-width:none; }
/* Bottom-align paired inputs: "Email (never shown)" wraps to two lines and
   left its input ~20px below the name field beside it. */
.lux-review-form .form-grid .field { display:flex; flex-direction:column; }
.lux-review-form .form-grid .field label { flex:1 0 auto; }
.lux-review-form .section-tag { margin-bottom:20px; }
.lux-review-form .btn { margin-top:20px; }
.lux-review-form .errorlist { margin:6px 0 0; padding:0; list-style:none; color:#b0563e; font-size:12px; }
.form-errors { margin-bottom:14px; color:#b0563e; font-size:13px; }
@media (max-width:860px) { .lux-reviews-grid { grid-template-columns:1fr; } .lux-reviews-head { flex-direction:column; align-items:flex-start; gap:12px; } }

@media (max-width:1100px) {
  .lux-product-grid { grid-template-columns:1fr 1fr; gap:45px; }
  .lux-product-stage { height:540px; }
  .lux-product-stage img { height:calc(var(--pd-h) * .86); }
}
@media (max-width:860px) {
  .shop-section-head,.shop-proof-grid,.shop-rider-grid,.lux-product-grid,.lux-formula-head { grid-template-columns:1fr; gap:42px; }
  .shop-section-head > p { justify-self:start; }
  .lux-buybox { position:static; }
  /* 560, not 520: the .86 ladder's gallon (482px) clipped its cap at 520. */
  .lux-product-stage { height:560px; }
}
@media (max-width:560px) {
  .shop-campaign,.shop-campaign-inner { min-height:620px; }
  .shop-campaign > img { object-position:58% center; }
  .shop-campaign-shade { background:linear-gradient(0deg,rgba(8,8,7,.95),rgba(8,8,7,.28)); }
  .shop-campaign-inner { justify-content:flex-end; padding-bottom:55px; }
  .shop-collection { padding:82px 0; }
  .shop-rider-note { padding:82px 0; }
  .lux-product { padding:35px 0 80px; }
  .lux-product-stage { height:410px; padding-bottom:32px; }
  .lux-product-stage img { height:calc(var(--pd-h) * .64); }
  /* At this width the half gallon and gallon reach the bottom-right corner;
     the top-right stays clear above every size's shoulder. */
  .lux-magnify-trigger { top:14px; right:14px; bottom:auto; }
  .lux-trust-row { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .lux-trust-row span { padding:16px 6px 14px; font-size:8px; letter-spacing:.08em; }
  .lux-variant-grid { grid-template-columns:1fr; }
  .lux-assurances > div { grid-template-columns:64px minmax(0,1fr); gap:16px; }
  .assurance-photo { width:64px; height:64px; }
  .lux-ingredient-grid { grid-template-columns:1fr; }
  .lux-ingredient-grid article { padding:25px 0; }
  .lux-ingredient-grid article + article { padding-left:0; border-left:0; border-top:1px solid var(--line); }
  .lux-product-ritual,.lux-product-ritual .wrap { min-height:620px; }
  .lux-product-ritual > img { object-position:62% center; }
  .lux-product-ritual-shade { background:linear-gradient(0deg,rgba(7,7,6,.95),rgba(7,7,6,.2)); }
  .lux-product-ritual .wrap { align-items:flex-end; padding-bottom:60px; }
}

/* The Ritual page */
.ritual-page-hero { position:relative; min-height:520px; padding:0; overflow:hidden; background:#151411; color:var(--sty-ivory); }
.ritual-page-hero > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center center; }
.ritual-page-hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(12,11,9,.9),rgba(12,11,9,.62) 38%,rgba(12,11,9,.08) 70%),linear-gradient(0deg,rgba(0,0,0,.3),transparent 45%); }
.ritual-page-hero-inner { position:relative; z-index:1; min-height:520px; display:flex; align-items:center; }
.ritual-page-hero-inner > div { max-width:620px; }
.ritual-page-hero .eyebrow { color:var(--sty-gold); }
.ritual-page-hero h1 { font-size:clamp(64px,7.5vw,108px); line-height:.86; color:var(--sty-ivory); }
.ritual-page-hero h1 em { color:#d8c59a; font-weight:500; }
.ritual-page-hero p { max-width:520px; margin:30px 0 28px; color:#e0dacd; font-family:var(--serif); font-size:22px; }
.ritual-intro { padding:120px 0; }
.ritual-intro-grid { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:end; }
.ritual-intro h2 { font-size:clamp(44px,5vw,66px); }
.ritual-intro-notes { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.ritual-intro-notes span { padding:8px 15px; border:1px solid var(--line-strong); color:var(--sty-gold-deep); font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
.ritual-first-steps { padding:0 0 110px; }
.ritual-step-row { display:grid; grid-template-columns:75px minmax(260px,.8fr) 1.2fr; gap:35px; align-items:center; padding:35px 0; border-top:1px solid var(--line); }
.ritual-step-row:last-child { border-bottom:1px solid var(--line); }
.ritual-step-number { color:var(--sty-gold-deep); font-family:var(--display); font-size:40px; line-height:1; }
.ritual-step-row .eyebrow { margin-bottom:5px; }
.ritual-step-row h3 { font-size:31px; }
.ritual-step-row > p { margin:0; max-width:550px; font-family:var(--serif); font-size:17px; }
.ritual-feature { padding:130px 0; }
.ritual-feature-lather { background:#ede8de; }
.ritual-feature-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(65px,8vw,120px); align-items:center; }
.ritual-feature figure { margin:0; }
.ritual-feature figure img { width:100%; aspect-ratio:4/5; object-fit:cover; }
.ritual-feature figcaption { margin-top:12px; color:var(--silver-dim); font-size:10px; letter-spacing:.13em; text-transform:uppercase; }
.ritual-feature-copy > .ritual-step-number { display:block; margin-bottom:50px; }
.ritual-feature-copy .eyebrow { margin-bottom:12px; }
.ritual-feature-copy h2 { font-size:clamp(46px,5vw,68px); }
.ritual-feature-copy .serif-lead { margin-top:28px; }
.ritual-detail { display:grid; grid-template-columns:135px 1fr; gap:22px; margin-top:36px; padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.ritual-detail strong { font-family:var(--display); font-size:18px; }
.ritual-detail span { color:var(--silver-dim); font-size:13px; }
.ritual-rinse { background:#1a1917; color:var(--sty-ivory); --cream:var(--sty-ivory); --cream-2:#ddd7ca; --line:rgba(247,244,238,.15); }
.ritual-rinse-grid { display:grid; grid-template-columns:.88fr 1.12fr; gap:100px; align-items:center; }
.ritual-rinse .ritual-step-number { display:block; margin-bottom:42px; color:var(--sty-gold); }
.ritual-rinse .eyebrow { color:var(--sty-gold); }
.ritual-rinse h2 { color:var(--sty-ivory); font-size:clamp(48px,5vw,70px); }
.ritual-rinse .serif-lead { color:#d9d2c5; }
.ritual-rinse blockquote { margin:38px 0 0; padding:22px 0 0; border-top:1px solid var(--line); color:#d8c59a; font-family:var(--display); font-size:27px; line-height:1.35; }
.ritual-feature-finish .ritual-feature-grid { grid-template-columns:.9fr 1.1fr; }
.ritual-close { padding:135px 0; background:radial-gradient(circle at 75% 15%,rgba(194,161,77,.15),transparent 24%),linear-gradient(120deg,#241c14,#10100f); color:var(--sty-ivory); text-align:center; }
.ritual-close-inner { max-width:850px; }
.ritual-close .eyebrow { color:var(--sty-gold); }
.ritual-close h2 { color:var(--sty-ivory); font-size:clamp(52px,6vw,78px); }
.ritual-close p { margin:23px 0 31px; color:#c8c0b2; font-family:var(--serif); font-size:20px; }

@media (max-width:900px) {
  .ritual-intro-grid,.ritual-feature-grid,.ritual-feature-finish .ritual-feature-grid,.ritual-rinse-grid { grid-template-columns:1fr; gap:50px; }
  .ritual-step-row { grid-template-columns:60px 1fr; }
  .ritual-step-row > p { grid-column:2; }
  .ritual-feature figure img { aspect-ratio:16/12; }
  .ritual-feature-finish figure { order:-1; }
}
@media (max-width:560px) {
  .ritual-page-hero,.ritual-page-hero-inner { min-height:440px; }
  .ritual-page-hero > img { object-position:62% center; }
  .ritual-page-hero-shade { background:linear-gradient(0deg,rgba(10,9,8,.95),rgba(10,9,8,.25)); }
  .ritual-page-hero-inner { align-items:flex-end; padding-bottom:36px; }
  .ritual-page-hero h1 { font-size:50px; }
  .ritual-page-hero p { margin:20px 0 18px;font-size:17px;line-height:1.45; }
  .ritual-intro { padding:84px 0; }
  .ritual-first-steps { padding-bottom:80px; }
  .ritual-step-row { grid-template-columns:1fr; gap:12px; padding:28px 0; }
  .ritual-step-row > p { grid-column:1; }
  .ritual-step-number { font-size:34px; }
  .ritual-feature { padding:84px 0; }
  .ritual-feature figure img { aspect-ratio:4/5; }
  .ritual-feature-copy > .ritual-step-number { margin-bottom:35px; }
  .ritual-detail { grid-template-columns:1fr; gap:5px; }
  .ritual-rinse blockquote { font-size:23px; }
  .ritual-close { padding:100px 0; }
}
.formula-story .freeof-badges { margin-top: 36px; }
.formula-story .freeof-badges span { border-color: rgba(194,161,77,.62); color: var(--sty-gold); }
.formula-note { margin: 20px 0 0; max-width: 680px; color: #9f9788; font-size: 13px; }

.sizes-section { padding: 130px 0; }
.sizes-head { max-width: none; display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 80px; }
.sizes-head > p { max-width: 430px; justify-self: end; }
.sizes-section .size-grid { gap: 24px; }
.sizes-section .size-card { position: relative; border: 0; border-top: 1px solid var(--line-strong); border-radius: 0; background: transparent; overflow: visible; }
.sizes-section .size-card:hover { transform: translateY(-4px); border-color: var(--sty-gold-deep); box-shadow: none; }
.sizes-section .size-card .bd { padding: 24px 0 0; border: 0; }
.size-card .recommended { position: absolute; z-index: 2; top: 16px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 7px 12px; background: var(--sty-black); color: var(--sty-ivory); font-size: 9px; letter-spacing: .17em; text-transform: uppercase; }
.size-card .size-cta { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--sty-gold-deep); font-size: 10px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }

.ritual-editorial { position: relative; padding: 140px 0; background: radial-gradient(circle at 76% 22%, rgba(194,161,77,.14), transparent 24%), linear-gradient(115deg, #231b14, #101010); color: var(--sty-ivory); overflow:hidden; }
/* the brand's horse head, ghosted - replaces the old faded "S" letterform */
.ritual-editorial::after { content:""; position:absolute; right:2vw; top:50%; transform:translateY(-50%); width:min(34vw,480px); aspect-ratio:688/900; background:url("../img/brand/styllian-icon.203d7691f18e.png") center/contain no-repeat; opacity:.045; pointer-events:none; }
.ritual-editorial-inner { position: relative; z-index:1; max-width: 900px; text-align:center; }
.ritual-editorial .eyebrow { color:var(--sty-gold); }
.ritual-editorial blockquote { margin: 10px auto 24px; font-family: var(--display); font-size: clamp(42px, 5vw, 72px); line-height: 1.08; }
.ritual-editorial p { color:#c5bdaf; font-family:var(--serif); font-size:20px; margin-bottom:36px; }

.horse-rider-story { padding: 130px 0; }
.horse-rider-grid { display:grid; grid-template-columns: .88fr 1.12fr; gap: clamp(60px, 8vw, 120px); align-items:center; }
.horse-rider-copy h2 { font-size: clamp(44px, 4.5vw, 64px); }
.horse-rider-copy h2 em { color:var(--sty-chestnut); font-weight:500; }
.horse-rider-copy .serif-lead { margin-top:30px; }
.horse-rider-story .editorial-image img { aspect-ratio: 4 / 5; }
.use-note { margin:28px 0 24px; padding-left:18px; border-left:1px solid var(--sty-gold-deep); color:var(--silver-dim); font-size:13px; }
.faq-section { background:#ede8de; }
.faq-grid { display:grid; grid-template-columns:.72fr 1.28fr; gap:clamp(50px,8vw,110px); }
.faq-grid .section-head { margin:0; }
.faq-grid .faq-list { max-width:none; }

@media (max-width: 980px) {
  .campaign-hero { min-height: 760px; }
  .campaign-hero-media { object-position: 58% center; }
  .campaign-hero-shade { background:linear-gradient(90deg,rgba(8,8,7,.88),rgba(8,8,7,.38) 70%,rgba(8,8,7,.12)),linear-gradient(0deg,rgba(0,0,0,.55),transparent 55%); }
  .result-grid, .horse-rider-grid { grid-template-columns:1fr; gap:56px; }
  .result-grid .editorial-image { max-width:680px; }
  .result-grid .editorial-image img, .horse-rider-story .editorial-image img { aspect-ratio:16 / 12; }
  /* Articles lose their side padding here, so the desktop rule's -32px
     rail-compensation margins must go too - kept, they push the grid 10px
     past the viewport on phones (the audit's h-overflow finding). */
  .ingredient-feature-grid { grid-template-columns:1fr; margin-left:0; margin-right:0; }
  .ingredient-feature-grid article { min-height:0; padding:28px 0; }
  .ingredient-feature-grid article + article { padding-left:0; border-left:0; border-top:1px solid var(--line); }
  .ingredient-feature-grid h3 { margin-top:22px; }
  .full-formula-grid, .faq-grid { grid-template-columns:1fr; }
  .sizes-head { grid-template-columns:1fr; gap:24px; }
  .sizes-head > p { justify-self:start; }
  .sizes-section .size-grid { max-width:680px; }
}
@media (max-width: 720px) {
  section { padding:76px 0; }
  .campaign-hero { min-height: calc(100svh - 72px); }
  .campaign-hero-media { object-position:64% center; }
  .campaign-hero-shade { background:linear-gradient(0deg,rgba(7,7,6,.96) 4%,rgba(7,7,6,.7) 52%,rgba(7,7,6,.18) 100%); }
  .campaign-hero-inner { align-items:flex-end; padding-top:236px; padding-bottom:44px; }
  /* sized so "The show-day" holds one line down to 320px; at 18vw it broke at the hyphen */
  .campaign-hero h1 { font-size:clamp(44px,14.4vw,72px); }
  .campaign-hero .eyebrow { letter-spacing:.13em; }
  .campaign-hero p { font-size:18px; margin-top:24px; }
  .campaign-hero .hero-actions { flex-direction:row; align-items:center; gap:22px; }
  .campaign-proof { margin-top:36px; gap:12px; justify-content:space-between; }
  .campaign-proof span + span::before { display:none; }
  .result-story, .sizes-section, .horse-rider-story { padding:84px 0; }
  .result-grid, .horse-rider-grid { gap:42px; }
  .result-grid .editorial-image img, .horse-rider-story .editorial-image img { aspect-ratio:4 / 5; }
  .result-notes .result-note { grid-template-columns:80px minmax(0, 1fr); gap:16px; }
  .result-note > img { width:80px; height:80px; }
  .full-formula-grid { gap:32px; }
  .sizes-section .size-card .shot { min-height:290px; }
  .ritual-editorial { padding:100px 0; }
  .ritual-editorial::after { font-size:360px; right:-90px; }
  .faq-grid { gap:34px; }
}
@media (max-width: 460px) {
  .campaign-hero .hero-actions { flex-direction:column; align-items:flex-start; }
  .campaign-proof { font-size:9px; letter-spacing:.11em; }
}

/* Tighter public chrome and seamless wordmark treatment. */
.site-header { background: rgba(14,14,13,.96); }
.site-header .bar { height: 72px; }
.site-header .nav-logo {
  max-height: 48px;
  mix-blend-mode: normal;
  filter: none;
}
.site-header .nav { gap: 30px; }
.site-header .header-cta { gap: 14px; }
.site-header .btn-sm { padding: 9px 15px; }
.site-header.is-compact .bar { height: 58px; }
.site-header.is-compact .nav-logo { max-height: 38px; }

.site-footer { padding: 52px 0 26px; background: #0e0e0d; }
.site-footer .foot-grid { grid-template-columns: 1.35fr .8fr .8fr 1.25fr; gap: 34px; }
.site-footer .foot-wordmark {
  max-height: 46px;
  margin-bottom: 14px;
  mix-blend-mode: screen;
  filter: contrast(1.08) brightness(1.05);
}
.site-footer .foot-grid h2, .site-footer .foot-grid h4 { margin-bottom: 12px; }
.site-footer .foot-grid a { padding: 4px 0; font-size: 14px; }
.site-footer .foot-brand .muted, .site-footer .foot-news .muted { font-size: 13px; line-height: 1.55; }

/* Product files have different internal crops. These optical corrections
   preserve the real relative size ladder and align each bottle base. */
/* The niche sizes the bottles now. The old per-card transform choreography
   (fixed 250px images scaled/shoved per nth-child) was built for the flat
   cards with overflow: visible; inside the clipped arch it read as broken
   and off-center. One system, proportional heights, no transforms. */
.sizes-section .size-card .shot {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* 344px: the niche is sized to the gallon's ceiling below plus its 44px
     headroom. Every other bottle keeps a fixed px height and sits on the
     base line, so raising the niche grows nothing but the empty air. */
  height: 344px;
  min-height: 0;
  padding: 40px 16px 0;
  background:
    radial-gradient(ellipse at 50% 78%, rgba(194,161,77,.11), transparent 38%),
    linear-gradient(155deg, #fdfbf7 0%, #f4efe5 100%);
}
.sizes-section .size-card .shot img {
  width: auto; height: auto;
  max-width: 86%;
  object-fit: contain;
  filter: drop-shadow(0 18px 13px rgba(35,25,15,.17)) drop-shadow(0 3px 3px rgba(35,25,15,.12));
  transition: transform .35s ease, filter .35s ease;
}
.sizes-section .size-card:hover .shot img {
  transform: translateY(-3px) scale(1.015);
  filter: drop-shadow(0 23px 16px rgba(35,25,15,.20)) drop-shadow(0 4px 4px rgba(35,25,15,.13));
}
/* the family in true proportion: each size visually larger than the last,
   so the jugs outrank the Standard and the gallon outranks everything */
.sizes-section .size-card:nth-child(1) .shot img { max-height: 140px; }
.sizes-section .size-card:nth-child(2) .shot img { max-height: 204px; }
.sizes-section .size-card:nth-child(3) .shot img { max-height: 238px; }
/* the jugs share a wide 1.94 aspect, so the 86% width cap - not max-height -
   was what sized them, pinning both at the same height below the Standard.
   They get graduated width allowances so the ladder holds at narrow cards
   too; the max-heights stay as ceilings for wide screens. */
.sizes-section .size-card:nth-child(4) .shot img { max-height: 254px; max-width: 96%; }
/* the gallon: 300px is 18% over the half-gallon, close to the real jugs'
   1.26x linear ratio for twice the volume. The width allowance has to keep
   pace (300px tall is 147px wide on this file) or the width cap, not the
   height, decides its size again. */
.sizes-section .size-card:nth-child(5) .shot img { max-height: 300px; max-width: 112%; }
.sizes-section .size-card .bd { min-height: 230px; align-content: start; }
.sizes-section .size-card .size-cta { margin-top: auto; }
.sizes-section .size-card .bd{display:grid;grid-template-rows:24px 34px 40px 76px 34px 42px;gap:0;min-height:262px;text-align:center;justify-items:center}
/* size first, loud; the role branding beneath, quieter */
.sizes-section .size-card .size-oz{align-self:start;font-size:13px;letter-spacing:.22em;color:var(--sty-gold-deep);text-transform:uppercase;font-weight:600}
.sizes-section .size-card .size-role{align-self:start;text-wrap:balance;font-size:11px;letter-spacing:.16em;color:var(--silver-dim);text-transform:uppercase}
.sizes-section .size-card .size-name{align-self:start}
.sizes-section .size-card .size-note{align-self:start;text-wrap:pretty}
.sizes-section .size-card .size-price{align-self:end;margin:0}
.sizes-section .size-card .size-cta{align-self:end;margin:0;padding-top:14px}
.campaign-hero~section p,.campaign-hero p{ text-wrap:pretty }
.sizes-head h2,.sizes-head>p{ text-wrap:balance }

@media (max-width: 980px) {
  .site-footer .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .site-header .bar { height: 66px; }
  .site-header .nav-logo { max-height: 42px; }
  .site-footer { padding-top: 40px; }
  .site-footer .foot-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* Branded channel language and Sales Hub visual polish */
.channel-identity { --channel-color: var(--silver); --channel-rgb: 143,138,126; display: inline-flex; align-items: center; gap: 9px; min-width: 0; color: var(--channel-color); vertical-align: middle; }
.channel-identity.is-web, .sales-channel.is-web, .inv-channel-row.is-web { --channel-color: #7fa98c; --channel-rgb: 127,169,140; }
.channel-identity.is-amazon, .sales-channel.is-amazon, .inv-channel-row.is-amazon { --channel-color: var(--cognac-2); --channel-rgb: 193,133,79; }
.channel-identity.is-tiktok, .sales-channel.is-tiktok, .inv-channel-row.is-tiktok { --channel-color: #a8a8c8; --channel-rgb: 168,168,200; }
.channel-icon { width: 30px; height: 30px; flex: 0 0 30px; display: inline-grid; place-items: center; border: 1px solid rgba(var(--channel-rgb),.42); border-radius: 8px; background: rgba(var(--channel-rgb),.09); box-shadow: inset 0 1px rgba(255,255,255,.035); }
.channel-icon svg { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.channel-icon svg path:first-child:not(.channel-icon-accent) { fill: currentColor; stroke: none; }
.channel-identity.is-web .channel-icon svg path:first-child { fill: none; stroke: currentColor; }
.channel-identity.is-tiktok .channel-icon svg path:first-child { fill: none; stroke: currentColor; }
.channel-icon-accent { fill: none !important; stroke: currentColor !important; }
.channel-label { color: var(--cream); font-family: var(--display); font-size: 18px; line-height: 1; white-space: nowrap; }
.channel-identity.is-compact { gap: 6px; }
.channel-identity.is-compact .channel-icon { width: 22px; height: 22px; flex-basis: 22px; border-radius: 6px; }
.channel-identity.is-compact .channel-icon svg { width: 14px; height: 14px; }
.channel-identity.is-compact .channel-label { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.sales-channel-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.sales-channel-legend .channel-identity { padding: 4px 9px 4px 5px; border: 1px solid rgba(var(--channel-rgb),.24); border-radius: 999px; background: rgba(var(--channel-rgb),.045); }
.sales-comparison { margin-bottom: 12px; color: var(--cognac-2); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.sales-comparison span { padding: 0 6px; color: var(--silver-dim); font-weight: 500; }
.sales-headline { position: relative; overflow: hidden; background: radial-gradient(circle at 96% 5%,rgba(193,133,79,.13),transparent 30%),rgba(169,106,60,.05); }
.sales-headline::after { content: ""; position: absolute; right: -25px; top: -35px; width: 120px; height: 120px; border: 1px solid rgba(193,133,79,.1); border-radius: 50%; pointer-events: none; }
.sales-headline-lead strong:first-child { color: var(--cognac-2); font-family: var(--display); font-size: 1.35em; font-weight: 500; }
.sales-headline-sub .channel-identity { margin: 0 2px; }
.sales-tile { position: relative; min-height: 126px; overflow: hidden; transition: border-color .18s ease, transform .18s ease, background .18s ease; }
.sales-tile:hover { transform: translateY(-2px); border-color: rgba(193,133,79,.42); background: rgba(255,255,255,.035); }
.sales-tile-icon { position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; display: grid; place-items: center; color: var(--cognac-2); opacity: .45; }
.sales-tile-icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.sales-channel { --channel-color: var(--silver); --channel-rgb: 143,138,126; margin: 0 -10px; padding: 13px 10px; border: 1px solid transparent; border-bottom-color: var(--line); border-radius: 7px; transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.sales-channel:hover { transform: translateX(2px); border-color: rgba(var(--channel-rgb),.2); background: linear-gradient(90deg,rgba(var(--channel-rgb),.075),transparent 72%); }
.sales-channel-bar > span, .inv-channel-row .sales-channel-bar > span { background: var(--channel-color); box-shadow: 0 0 10px rgba(var(--channel-rgb),.22); }
.sales-channel-money { color: var(--channel-color); }
.sales-channel-meta { justify-content: flex-start; }
.sales-channel-meta .sales-trend { margin-left: auto; }
.sales-channel-share { padding: 2px 7px; border: 1px solid rgba(var(--channel-rgb),.3); border-radius: 999px; color: var(--channel-color); font-size: 10px; font-weight: 600; }
.sales-channel-tag { padding: 3px 7px 3px 4px; }
.sales-channel-tag .channel-icon { border: 0; background: transparent; box-shadow: none; }
.sales-channel-tag .channel-label { color: inherit; }
.sales-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--silver); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.sales-status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 7px currentColor; }
.sales-status.is-paid, .sales-status.is-fulfilled { border-color: rgba(127,169,140,.42); color: #7fa98c; background: rgba(127,169,140,.07); }
.sales-status.is-pending { border-color: rgba(193,133,79,.42); color: var(--cognac-2); background: rgba(193,133,79,.07); }
.sales-status.is-canceled, .sales-status.is-refunded { border-color: rgba(208,139,118,.4); color: #d08b76; background: rgba(208,139,118,.06); }
.sales-table thead th { position: sticky; top: 0; z-index: 2; padding-top: 10px; background: var(--charcoal-2); }
.sales-table tbody tr { transition: background .16s ease; }
.sales-table tbody tr:hover { background: rgba(255,255,255,.025); }
.sales-table tbody tr:nth-child(even):not(:hover) { background: rgba(255,255,255,.009); }
.sales-order-link::after { content: "›"; display: inline-block; margin-left: 4px; opacity: 0; transform: translateX(-3px); transition: opacity .16s ease, transform .16s ease; }
.sales-table tr:hover .sales-order-link::after { opacity: 1; transform: translateX(0); }
.inv-channel-row .channel-label { color: var(--cream); }
@media (max-width: 860px) { .sales-comparison { line-height: 1.55; } .sales-channel-meta .sales-trend { margin-left: 0; } .sales-table thead th { position: static; } }

/* Ad conversion coverage */
.sales-conversions { margin-bottom: 22px; }
.sales-conv-line { color: var(--silver); font-size: 13.5px; line-height: 1.6; }
.sales-conv-line strong { color: var(--cream); font-variant-numeric: tabular-nums; }
.sales-conv-gap { display: block; margin-top: 4px; color: var(--cognac-2); font-size: 12.5px; }

/* Keyword coverage */
.kw-summary { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 14px; margin-bottom: 20px; }
.kw-summary > div { padding: 16px 18px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.02); }
.kw-of { font-size: 18px; color: var(--silver-dim); margin-left: 5px; }
.kw-warning { padding: 13px 16px; margin-bottom: 18px; border: 1px solid var(--cognac); border-left: 3px solid var(--cognac); border-radius: 6px; background: rgba(169,106,60,.07); color: var(--silver); font-size: 13px; }
.kw-warning strong { color: var(--cream); display: block; margin-bottom: 3px; }
.kw-dupe { display: inline-block; margin: 4px 6px 0 0; padding: 2px 9px; border: 1px solid var(--line-strong); border-radius: 40px; font-size: 11.5px; color: var(--cream); }
.kw-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.kw-table th { padding: 0 12px 10px 0; text-align: left; color: var(--silver-dim); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid var(--line); white-space: nowrap; }
.kw-table td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); color: var(--silver); vertical-align: top; }
.kw-table tr:last-child td { border-bottom: 0; }
.kw-term { color: var(--cream); font-size: 14px; }
.kw-num { text-align: right; font-variant-numeric: tabular-nums; }
.kw-badge { display: inline-block; padding: 3px 10px; border-radius: 40px; border: 1px solid var(--line-strong); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: var(--silver-dim); }
.kw-badge.is-covered { border-color: var(--hunter-2); color: #4a7c59; }
.kw-badge.is-drafted { border-color: var(--cognac); color: var(--cognac-2); }
.kw-table tr.is-open .kw-term { color: var(--cognac-2); }
@media (max-width: 860px) {
  .kw-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .kw-table, .kw-table tbody, .kw-table tr, .kw-table td { display: block; width: 100%; }
  .kw-table tr { margin-bottom: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; }
  .kw-table td { display: flex; justify-content: space-between; gap: 14px; padding: 4px 0; border-bottom: 0; text-align: right; overflow-wrap: anywhere; }
  .kw-num { text-align: right; }
}

/* Staff preview of an unpublished post */
.preview-bar { padding: 12px 22px; background: var(--cognac); color: #fff; font-size: 13.5px; text-align: center; }
.preview-bar strong { letter-spacing: .04em; }
.preview-bar a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---- horseshoe motif: the arched niche ------------------------------------
   The shoe is abstracted, never drawn: each bottle sits in an arched niche
   with a gold hairline edge - the shoe's geometry read as architecture.
   (A seven-nail-hole divider was tried alongside and cut: nice idea, looked
   out of place.) Delete this block to revert. */
/* The product photos are opaque white JPGs, so a line drawn behind them is
   covered by the image rectangle. Instead the white shot box itself becomes
   the arch: an arched niche inset in the card, gold hairline on its edge.
   The photo's white ground blends into the niche, so every size reads the
   same regardless of how much of the box the bottle fills. */
.size-card .shot {
  /* minmax(0,1fr): an auto grid track sizes to the image's natural width and
     ignores the container, so max-width:100% never applies and the photo's
     white ground spills square-shouldered across the arch. Pin the track to
     the container and the image finally fits inside the arch walls. */
  grid-template-columns: minmax(0, 1fr);
  position: relative; margin: 18px 18px 0;
  border: 1px solid rgba(120,96,37,.32);
  border-radius: 999px 999px 0 0;
  overflow: hidden; padding-top: 44px;
  /* ground every bottle on the niche's base line - shelved, not floating */
  align-items: end;
}
.size-card .shot::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(112deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%);
  transform:translateX(-115%);
  transition:transform .7s ease;
}
.size-card:hover .shot::after { transform:translateX(115%); }
.size-card:hover .shot { border-color: rgba(120,96,37,.6); }
.size-card.is-lead .shot { border-color: rgba(120,96,37,.5); }

/* the seven holes sit on the shoe's curve */

/* ---- accepted-card marks (includes/_payment_icons.html) ---- */
.pay-icons { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pay-icons svg { width: 46px; height: 30px; display: block; border-radius: 4px; }
.foot-right { display: flex; align-items: center; justify-content: flex-end; gap: 22px; flex-wrap: wrap; }
.foot-right .pay-icons { flex-wrap: wrap; justify-content: flex-end; }
.foot-right .pay-icons svg { width: 40px; height: 26px; }
@media (max-width: 900px) { .foot-right, .foot-right .pay-icons { justify-content: center; } }

/* ---- hero product: The Standard, cut out, floating --------------------------
   The bottle photo's white background is removed offline (see the cutout in
   static/img/brand), so the product sits IN the scene rather than on a card
   pasted over it. The shadow is filter: drop-shadow, which follows the
   bottle's silhouette - a box-shadow would draw the old white rectangle. */
.campaign-hero-inner { justify-content: space-between; gap: 40px; }
.campaign-hero-product {
  position: relative; z-index: 1; flex: 0 0 auto; line-height: 0;
  /* seat the bottle in the gap between the groom and the horse, not over him,
     and pin it to the top of the hero rather than vertically centered */
  margin-right: clamp(40px, 9vw, 140px);
  /* cancel the inner block's top padding so the cap rides near the header */
  align-self: flex-start;
  margin-top: -38px;
}
.hero-bottle {
  height: clamp(500px, 82vh, 740px); width: auto; display: block;
  filter: drop-shadow(0 40px 46px rgba(0,0,0,.55)) drop-shadow(0 8px 16px rgba(0,0,0,.35));
  transition: transform .25s ease;
}
.campaign-hero-product:hover .hero-bottle { transform: translateY(-5px); }
@media (prefers-reduced-motion: reduce) {
  .hero-bottle, .campaign-hero-product:hover .hero-bottle { transition: none; transform: none; }
  .sizes-section .size-card .shot img, .sizes-section .size-card:hover .shot img { transition:none; transform:none; }
  .size-card .shot::after { display:none; }
}
@media (max-width: 1020px) {
  .campaign-hero-inner { flex-direction: column; align-items: flex-start; }
  /* Stacked, the copy would size to its content - and the ticker track is
     max-content wide, which pushed the whole column ~260px past a phone. */
  .campaign-hero-copy { width: 100%; min-width: 0; }
  .campaign-hero-product { align-self: center; margin-top: 40px; }
  .hero-bottle { height: min(340px, 44vh); }
}
/* Phones: like desktop in miniature - headline on the left (3/5), a large
   bottle on the right (2/5) - then the eyebrow, copy and actions across the
   full width beneath. The bottle lives outside .campaign-hero-copy in the
   markup, so the copy box dissolves (display: contents) and its children join
   the bottle as items of one grid. Full-width rows stretch: a shrink-to-fit
   item would let the max-content ticker track run off the screen. */
/* keeps a hyphenated word whole; browsers will otherwise break at the hyphen */
.nobr { white-space: nowrap; }
@media (max-width: 720px) {
  .campaign-hero-inner { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    column-gap: 14px; row-gap: 0; align-items: center; align-content: start; padding-top: 32px; }
  .campaign-hero-copy { display: contents; }
  /* big enough to break "The / show-day / standard." and stand up to the
     bottle, small enough that "show-day" never splits at its hyphen */
  .campaign-hero h1 { grid-column: 1; grid-row: 1; font-size: clamp(36px, 13vw, 72px); }
  .campaign-hero-product { grid-column: 2; grid-row: 1; justify-self: center; margin: 0; }
  .hero-bottle { height: clamp(250px, 78vw, 440px); max-width: 100%; object-fit: contain; }
  .campaign-hero .eyebrow, .campaign-hero p, .campaign-hero .hero-actions, .campaign-hero .campaign-proof { grid-column: 1 / -1; min-width: 0; }
  .campaign-hero .eyebrow { justify-self: center; text-align: center; margin: 26px 0 0; }
  .campaign-hero p { text-align: center; }
}
@media (max-width: 360px) {
  .campaign-hero .eyebrow { font-size: 11px; letter-spacing: .1em; }   /* one line at 320px */
}

/* ---- cutout accents: the bottle beside the promises -------------------------
   A pull-through brand: nobody has seen this product before, so the bottle
   recurs beside the formula and ritual promises - quiet, grounded, always the
   same cutout as the hero so repetition builds recognition. Decorative
   (aria-hidden); desktop only, mobile keeps its vertical room. */
.cutout-accent {
  width: auto; pointer-events: none;
  filter: drop-shadow(0 26px 34px rgba(0,0,0,.5));
}
/* beside "The standard begins within." - text left, bottle right */
.formula-intro { display: flex; align-items: center; justify-content: center; gap: clamp(56px, 7vw, 110px);
  /* trio leads, text follows - centered as a PAIR rather than pinned to
     opposite edges, which read as detached. .section-head caps width for
     prose; this row spans the wrap. */
  max-width: none; }
.formula-intro-copy { min-width: 0; max-width: 640px; /* keep the prose measure the row released */ }
/* a trio of the same bottle: center forward, two behind at either side,
   all on one base line - a product family, not three stickers. The container
   is sized from the center bottle (aspect ~0.314) with the sides peeking out
   half a bottle each; --trio-h is the one knob. */
.formula-trio {
  --trio-h: clamp(190px, 17vw, 250px);
  position: relative; flex: 0 0 auto; pointer-events: none;
  height: var(--trio-h);
  width: calc(var(--trio-h) * 0.314 * 1.95);
}
.trio-b { position: absolute; bottom: 0; height: 100%; width: auto;
          filter: drop-shadow(0 22px 30px rgba(0,0,0,.5)); }
.trio-center { left: 50%; transform: translateX(-50%); z-index: 2; }
.trio-left  { left: 0;  height: 84%; z-index: 1; filter: drop-shadow(0 16px 22px rgba(0,0,0,.45)) brightness(.92); }
.trio-right { right: 0; height: 84%; z-index: 1; filter: drop-shadow(0 16px 22px rgba(0,0,0,.45)) brightness(.92); }
/* the heading holds one line; the compact trio leaves it the width */
.formula-intro-copy h2 { white-space: nowrap; }
@media (max-width: 1250px) {
  .formula-intro-copy h2 { white-space: normal; }
  /* mobile: the trio centers ON TOP of the text instead of hiding */
  .formula-intro { flex-direction: column; align-items: center; gap: 38px; }
  .formula-trio { --trio-h: clamp(170px, 26vw, 220px); }
}
/* left of "Made for the horse." - bottle | copy | photo */
.horse-rider-grid { grid-template-columns: auto 1.02fr .98fr; }
.horse-rider-accent { height: clamp(300px, 26vw, 420px); align-self: center; }
.horse-rider-copy h2 { font-size: clamp(30px, 2.7vw, 42px); }
@media (max-width: 1250px) {
  .cutout-accent { display: none; }
  .horse-rider-grid { grid-template-columns: .88fr 1.12fr; }
}
/* ...and back to one column below 980px. The two-column rule above comes later
   in the file than the 980px stack, so without this phones kept two cramped
   columns: the headline wrapped every two words beside the photo. */
@media (max-width: 980px) {
  .horse-rider-grid { grid-template-columns: 1fr; }
  /* the desktop 30px floor reads small once the headline spans the row */
  .horse-rider-copy h2 { font-size: clamp(32px, 10vw, 46px); }
}

/* "Questions & Answers" breaks after the ampersand in the narrow FAQ column;
   balance splits it "Questions" / "& Answers", which reads properly. */
.faq-grid .section-head h2 { text-wrap: balance; }

/* ---- hero proof ticker ------------------------------------------------------
   The three formula highlights become a slow continuous ticker carrying all
   eight claims. Two identical sets in the track; animating to -50% loops
   seamlessly. Every item carries its own trailing middot so the seam between
   sets is indistinguishable. Hover pauses; reduced-motion shows it static. */
.campaign-ticker { overflow: hidden;
  /* 12% fade zones: at 7% the edge fade was subtle enough that a paused
     frame read as a chopped word rather than a deliberate fade-out. */
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.campaign-ticker .ticker-track { display: flex; width: max-content;
  animation: proof-ticker 32s linear infinite; }
.campaign-ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-set { display: flex; white-space: nowrap; }
/* neutralise the static row's between-item dots; each item brings its own */
.campaign-ticker .ticker-set span::before { content: none; margin: 0; }
.campaign-ticker .ticker-set span::after { content: "·"; color: var(--sty-gold); margin: 0 30px; }
@keyframes proof-ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .campaign-ticker .ticker-track { animation: none; }
}

/* ---- About: question-led rows (AEO) ---------------------------------------
   Each h2 is a question an owner or an assistant asks; the answer sits beside
   it, first sentence first. Ivory room, hairline rules, one idea per row. */
.about-story { padding: 96px 0 40px; }
.about-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: clamp(32px, 6vw, 96px); padding: 48px 0; border-top: 1px solid var(--line); }
.about-row:first-child { border-top: 0; padding-top: 0; }
.about-row h2 { color: var(--cream); font-size: clamp(30px, 3vw, 42px); line-height: 1.08; text-wrap: balance; }
.about-row .serif-lead { margin: 0; }
.about-row p + p { margin-top: 18px; }
.about-row p a { color: var(--sty-gold-deep); text-decoration: underline; text-underline-offset: 3px; }
.about-facts { margin-top: 30px; }
.about-close { padding: 72px 0 110px; }
.about-close-inner { max-width: 720px; text-align: center; }
.about-close-inner h2 { color: var(--cream); font-size: clamp(32px, 3.4vw, 46px); margin-top: 6px; }
.about-close-inner p { margin: 16px auto 0; }
.about-close-actions { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: center; margin-top: 30px; }
@media (max-width: 860px) {
  .about-story { padding-top: 64px; }
  .about-row { grid-template-columns: 1fr; gap: 16px; padding: 36px 0; }
}

/* Shared-care signature beside the product decision, in the house gold. */
.human-hair-badge { display:flex; align-items:center; gap:16px; margin:26px 0; padding:19px 20px; border:1px solid #ded4bc; background:linear-gradient(120deg,#faf7f0,#f3ede0); border-radius:3px; }
.human-hair-badge > img { flex:0 0 88px; width:88px; height:88px; object-fit:contain; }
.human-hair-badge__eyebrow { display:block; margin-bottom:5px; font-family:var(--sans); font-size:9px; letter-spacing:.17em; text-transform:uppercase; color:#80682e; line-height:1.5; }
.human-hair-badge strong { display:block; font-family:var(--display); font-size:27px; font-weight:500; line-height:1.15; color:var(--sty-ink); }
.human-hair-badge p { margin:8px 0 0; font-size:12px; line-height:1.65; color:#655e51; }
.human-hair-badge a { text-decoration:underline; text-underline-offset:3px; }
.human-hair-badge a:hover { color:var(--sty-gold-deep); }
@media(max-width:600px) {
  .human-hair-badge { gap:12px; padding:16px 12px; }
  .human-hair-badge > img { flex-basis:72px; width:72px; height:72px; }
  .human-hair-badge strong { font-size:25px; }
  .human-hair-badge__eyebrow { font-size:8px; letter-spacing:.12em; }
}