@font-face { font-family: 'Archivo CT'; src: url('fonts/archivo-wdth.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
/* Chip & Thread
   Layout concept: the shop as a garment label. Stitched (dashed) thread lines mark sections,
   care-label blocks hold fit and wash info, size chips look like woven size tags.
   Colors are pulled from the four washes: Pepper, Brick, Sand, Dusty Blue. */
:root {
  /* Campus Heritage: warm ivory ground, deep navy ink, varsity gold for actions */
  --chalk: #f8f5ec;      /* page ground */
  --card: #fffdf8;       /* raised surfaces */
  --photo: #ece4d6;      /* behind product photos */
  --ink: #102943;        /* navy text */
  --ink-2: #4b5366;
  --muted: #776f62;
  --line: #e4dccd;
  --line-strong: #d2c7b3;
  --brick: #eab039;      /* gold: buttons, badges, active marks */
  --brick-ink: #102943;
  --brick-soft: #f6e7c8;
  --hl: #a87410;         /* gold that reads as text */
  --blue: #2c4a7c;       /* links and focus */
  --blue-soft: #e4eaf3;
  --sand: #efe8da;
  --band: #102943; --band-fg: #f8f5ec; --band-2: #bac2d2; --band-line: #2a4061; --band-hl: #eab039; --band-surface: #1a3352;
  --ok: #2f7a4f; --ok-soft: #dcefe3;
  --warn: #9a6a12; --warn-soft: #f6ecd6;
  --bad: #b03a32; --bad-soft: #f7e0de;
  --shadow: 0 1px 2px rgba(16, 41, 67, .05), 0 8px 24px rgba(16, 41, 67, .07);

  --f-display: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-logo: 'Newsreader', Georgia, 'Times New Roman', serif;
  --f-body: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono: var(--f-body);

  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem;
  --r: 6px;
  --wrap: 1200px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--chalk); color: var(--ink);
  font: 400 16px/1.55 var(--f-body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; text-wrap: balance; font-weight: 600; letter-spacing: -.015em; }
p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2.5px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--chalk); padding: var(--s-2) var(--s-3); z-index: 50; }
.skip:focus { left: var(--s-3); }

.wrap {
  width: 100%; max-width: var(--wrap); margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--f-mono); font-size: .86em; letter-spacing: 0; }
.muted { color: var(--muted); }
.eyebrow { font: 600 .74rem/1.2 var(--f-body); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.display { font-family: var(--f-display); font-weight: 600; letter-spacing: -.02em; }

/* thread line: the stitched divider used across the shop */
.stitch { border: 0; border-top: 2px dashed var(--line-strong); margin: 0; }
.stitch.brick { border-top-color: var(--brick); }

/* ---------- top bar ---------- */
.notice {
  background: var(--band); color: var(--band-2); font-size: .82rem; text-align: center;
  padding-block: .45rem;
}
.notice .wrap { display: flex; justify-content: center; gap: var(--s-4); flex-wrap: wrap; }
.notice b { color: var(--band-hl); font-weight: 600; }
@media (max-width: 560px) { .notice .hide-xs { display: none; } }

.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.topbar .wrap { display: flex; align-items: center; gap: var(--s-5); min-height: 68px; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; flex: none; }
.brand-mark { width: 46px; height: 42px; flex: none; display: block; object-fit: contain; }
footer.site .brand-badge { display: block; width: 132px; height: auto; }
.about-grid .story .mascot { width: 168px; height: auto; display: block; margin-bottom: .25rem; }
.brand-name { font: 600 1.55rem/1 var(--f-logo); letter-spacing: -.01em; white-space: nowrap; }
.brand-name .amp { color: var(--hl); font-style: italic; font-weight: 400; padding: 0 1px; }
.nav { display: flex; gap: var(--s-1); align-items: center; flex: 1; }
.nav .nav-main { display: flex; gap: 1.3rem; margin-right: auto; }
.nav .nav-main a { padding: .4rem 0; border-radius: 0; border-bottom: 2px solid transparent; color: var(--ink-2); font-size: .95rem; }
.nav .nav-main a:hover { background: none; color: var(--ink); border-color: var(--ink); }
.nav .nav-main a[aria-current="page"] { background: none; box-shadow: none; color: var(--ink); border-color: var(--brick); }
.nav .quote-btn { margin-left: .4rem; padding: .6rem 1rem; font-size: .9rem; }
.nav a, .icon-btn {
  text-decoration: none; padding: .45rem .7rem; border-radius: var(--r); font-weight: 600; font-size: .92rem;
  border: 0; background: transparent; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem;
}
.nav a:hover, .icon-btn:hover { background: var(--card); }
.nav a[aria-current="page"] { background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.bag-count {
  min-width: 1.35rem; height: 1.35rem; border-radius: 999px; background: var(--ink); color: var(--card);
  font-size: .74rem; display: inline-grid; place-items: center; padding: 0 .3rem; font-variant-numeric: tabular-nums;
}
.nav .owner-link { color: var(--hl); }
.menu-btn { display: none; }
@media (max-width: 1080px) {
  .nav .hide-sm, .nav .nav-main { display: none; }
  .nav { justify-content: flex-end; }
  .menu-btn { display: inline-flex; border: 1px solid var(--line-strong); }
}
@media (max-width: 520px) { .brand-name { font-size: 1.3rem; } .brand-mark { width: 40px; height: 37px; } .nav .quote-btn { display: none; } }
.drawer {
  border-top: 1px solid var(--line); background: var(--chalk);
}
.drawer .wrap { display: grid; padding-block: var(--s-3); gap: var(--s-1); }
.drawer a { padding: .7rem .2rem; font-weight: 600; text-decoration: none; border-bottom: 1px dashed var(--line); }

/* ---------- buttons & forms ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: var(--r); border: 1px solid var(--line-strong); background: transparent; color: var(--ink);
  font-weight: 600; padding: .8rem 1.3rem; cursor: pointer; text-decoration: none; line-height: 1.1;
  transition: transform .12s ease, background .15s ease;
}
.btn:hover { background: var(--card); border-color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--brick); border-color: var(--brick); color: var(--brick-ink); }
.btn.primary:hover { filter: brightness(1.05); background: var(--brick); border-color: var(--brick); }
.btn.dark { background: var(--ink); border-color: var(--ink); color: var(--chalk); }
.btn.small { padding: .45rem .85rem; font-size: .86rem; }
.btn.block { width: 100%; }
.btn.ghost { border-color: var(--line-strong); }
.btn.danger { border-color: var(--bad); color: var(--bad); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.linkish { background: none; border: 0; padding: 0; color: var(--hl); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

.field { display: grid; gap: .3rem; min-width: 0; }
.field > span { font-weight: 600; font-size: .88rem; }
.field small { color: var(--muted); font-size: .8rem; }
.input, select.input, textarea.input {
  width: 100%; min-width: 0; padding: .7rem .8rem; border-radius: var(--r); border: 1px solid var(--line-strong);
  background: var(--card); color: var(--ink);
}
textarea.input { min-height: 96px; resize: vertical; }
.input:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px var(--blue-soft); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); align-items: start; }
.grid-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s-3); align-items: start; }
@media (max-width: 560px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.form { display: grid; gap: var(--s-4); }
.check { display: flex; gap: .55rem; align-items: center; font-size: .92rem; }
.check input { width: 1.1rem; height: 1.1rem; accent-color: var(--ink); }

.alert { border-radius: 8px; padding: .75rem .9rem; font-size: .92rem; border: 1px solid; }
.alert.err { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
.alert.ok { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.alert.info { background: var(--blue-soft); border-color: var(--blue); color: var(--ink); }

/* ---------- shared bits ---------- */
.dot { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.12); display: inline-block; }
.section { padding-block: var(--s-7); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-5); }
.section-head h2 { font-size: clamp(1.75rem, 3.2vw, 2.375rem); font-weight: 600; letter-spacing: -.02em; }

/* care label: the wash/fit info block */
.care {
  background: var(--card); border-radius: 6px; padding: var(--s-5); position: relative;
  border: 1px solid var(--line);
}
.care::after { content: ''; position: absolute; inset: 8px; border: 1.5px dashed var(--line-strong); border-radius: 3px; pointer-events: none; }
.care > * { position: relative; z-index: 1; }


/* ---------- product cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: var(--s-5); }
.card { text-decoration: none; display: grid; gap: var(--s-3); }
.card .img { border-radius: var(--r); overflow: hidden; background: var(--photo); aspect-ratio: 4 / 5; max-width: 100%; position: relative; }
.card .img img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transition: transform .4s ease; }
.card:hover .img img { transform: scale(1.03); }
.card h3 { font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.card .row { display: flex; justify-content: space-between; gap: var(--s-3); align-items: baseline; }
.price-tag { font-weight: 400; color: var(--ink-2); font-size: .94rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.compare { color: var(--muted); text-decoration: line-through; font-weight: 500; margin-left: .35rem; }
.badge {
  display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; font-weight: 700; letter-spacing: .04em;
  padding: .22rem .55rem; border-radius: 999px; background: var(--card); border: 1px solid var(--line); white-space: nowrap;
}
.badge.sold { background: var(--ink); color: var(--chalk); border-color: var(--ink); }
.badge.limited { background: var(--brick); color: var(--brick-ink, #102943); border-color: var(--brick); }
.card .img .badge { position: absolute; top: 10px; left: 10px; }

/* ---------- product page ---------- */
.crumbs { font-size: .86rem; color: var(--muted); padding-top: var(--s-4); display: flex; gap: .4rem; flex-wrap: wrap; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.pdp { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s-7); padding-block: var(--s-5) var(--s-7); align-items: start; }
@media (max-width: 900px) { .pdp { grid-template-columns: 1fr; gap: var(--s-5); } }
.gallery { display: grid; gap: var(--s-3); position: sticky; top: calc(env(safe-area-inset-top, 0px) + 78px); }
@media (max-width: 900px) { .gallery { position: static; } }
.gallery .main { border-radius: var(--r); overflow: hidden; background: var(--photo); aspect-ratio: 4 / 4.6; max-width: 100%; }
.gallery .main img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.gallery .note { font-size: .82rem; color: var(--muted); }
.thumbs { display: flex; gap: var(--s-2); overflow-x: auto; padding-bottom: 2px; }
.thumbs button { flex: none; width: 66px; height: 66px; border-radius: var(--r); overflow: hidden; border: 2px solid transparent; padding: 0; cursor: pointer; background: var(--photo); }
.thumbs img { mix-blend-mode: multiply; }
.thumbs button[aria-pressed="true"] { border-color: var(--ink); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }

.buy h1 { font-size: clamp(1.75rem, 3.2vw, 2.25rem); font-weight: 600; letter-spacing: -.02em; }
.buy .tagline { color: var(--ink-2); margin-top: var(--s-2); font-size: 1.05rem; }
.buy .price-line { display: flex; align-items: baseline; gap: var(--s-3); margin-top: var(--s-4); flex-wrap: wrap; }
.buy .price-big { font-family: var(--f-body); font-size: 1.4rem; font-weight: 500; color: var(--ink); }
.opt { margin-top: var(--s-5); display: grid; gap: var(--s-3); }
.opt-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.opt-head b { font-weight: 700; }
.swatches { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.swatch {
  width: 46px; height: 46px; border-radius: 50%; padding: 3px; border: 2px solid transparent; cursor: pointer; background: transparent;
}
.swatch span { display: block; width: 100%; height: 100%; border-radius: 50%; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.swatch[aria-pressed="true"] { border-color: var(--ink); }

/* woven size tags */
.sizes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-2); }
@media (max-width: 380px) { .sizes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.size {
  position: relative; border: 1.5px solid var(--line-strong); background: var(--card); border-radius: 6px;
  padding: .7rem .2rem .55rem; text-align: center; cursor: pointer; display: grid; gap: .1rem;
}
.size b { font-weight: 600; font-size: 1rem; }
.size small { font-size: .7rem; color: var(--muted); }
.size[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--chalk); }
.size[aria-pressed="true"] small { color: color-mix(in srgb, var(--chalk) 70%, var(--ink)); }
.size:disabled { cursor: not-allowed; opacity: .55; background: repeating-linear-gradient(-45deg, transparent 0 6px, var(--line) 6px 7px), var(--card); }
.size .left { color: var(--hl); font-weight: 700; }
.size[aria-pressed="true"] .left { color: var(--chalk); }

.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--card); }
.qty button { width: 2.4rem; height: 2.4rem; border: 0; background: transparent; cursor: pointer; font-size: 1.15rem; border-radius: 999px; }
.qty button:hover { background: var(--chalk); }
.qty output { min-width: 2rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.buy-row { display: flex; gap: var(--s-3); align-items: center; margin-top: var(--s-5); flex-wrap: wrap; }
.buy-row .btn.primary { flex: 1 1 200px; padding-block: .95rem; font-size: 1.02rem; }
.petite {
  margin-top: var(--s-5); display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: start;
  background: var(--blue-soft); border-radius: 10px; padding: var(--s-4);
}
.petite .ic { width: 34px; height: 34px; border-radius: 50%; background: var(--blue); color: var(--card); display: grid; place-items: center; font-weight: 800; }
.details { margin-top: var(--s-5); display: grid; gap: var(--s-4); }
.details ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; color: var(--ink-2); }
.fit-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.fit-table th, .fit-table td { text-align: left; padding: .45rem .5rem; border-bottom: 1px dashed var(--line); }
.fit-table th { font-weight: 600; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.fit-table td:first-child { font-family: var(--f-mono); }

/* ---------- bag & checkout ---------- */
.page { padding-block: var(--s-5) var(--s-8); }
.page-title { font-size: clamp(1.75rem, 3.2vw, 2.375rem); font-weight: 600; letter-spacing: -.02em; margin-bottom: var(--s-5); }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s-6); align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }
.lines { display: grid; gap: 0; }
.line { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: var(--s-4); padding-block: var(--s-4); border-bottom: 1.5px dashed var(--line); align-items: start; }
.line:first-child { padding-top: 0; }
.line .thumb { width: 84px; height: 96px; border-radius: var(--r); overflow: hidden; background: var(--photo); }
.line .thumb img { width: 100%; height: 100%; object-fit: cover; }
.line h3 { font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.line .meta { color: var(--muted); font-size: .88rem; margin-top: .15rem; }
.line .controls { display: flex; gap: var(--s-3); align-items: center; margin-top: var(--s-3); flex-wrap: wrap; }
.line .qty button { width: 2rem; height: 2rem; }
.line .amt { font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }
.line .warn { color: var(--bad); font-size: .85rem; margin-top: .35rem; font-weight: 600; }
@media (max-width: 480px) {
  .line { grid-template-columns: 68px minmax(0, 1fr); }
  .line .thumb { width: 68px; height: 80px; }
  .line .amt { grid-column: 2; text-align: left; }
}

.summary { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s-5); display: grid; gap: var(--s-3); position: sticky; top: calc(env(safe-area-inset-top, 0px) + 78px); }
@media (max-width: 900px) { .summary { position: static; } }
.summary h2 { font-size: 1.1rem; font-weight: 600; }
.sum-row { display: flex; justify-content: space-between; gap: var(--s-3); font-variant-numeric: tabular-nums; }
.sum-row.total { font-weight: 600; font-size: 1.12rem; padding-top: var(--s-3); border-top: 1.5px dashed var(--line-strong); }
.summary .fine { font-size: .82rem; color: var(--muted); }
.mini-lines { display: grid; gap: var(--s-2); font-size: .9rem; }
.mini-lines div { display: flex; justify-content: space-between; gap: var(--s-3); }

.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s-5); display: grid; gap: var(--s-4); align-content: start; min-width: 0; }
.panel h2 { font-size: 1.12rem; font-weight: 600; }
.panel + .panel { margin-top: var(--s-4); }
.admin-grid > .panel, .sheet .panel + .panel, .two-col > .panel { margin-top: 0; }
.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.seg label {
  border: 1.5px solid var(--line-strong); border-radius: 10px; padding: .8rem .9rem; cursor: pointer; display: grid; gap: .15rem; background: var(--card);
}
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.seg label:has(input:focus-visible) { outline: 2.5px solid var(--blue); outline-offset: 2px; }
.seg b { font-size: .96rem; }
.seg small { color: var(--muted); font-size: .8rem; }

.empty { text-align: center; padding: var(--s-8) var(--s-4); display: grid; gap: var(--s-4); justify-items: center; }
.empty .display { font-size: 1.6rem; }

.receipt { max-width: 640px; margin: 0 auto; }
.receipt .tag-top { text-align: center; display: grid; gap: var(--s-2); justify-items: center; margin-bottom: var(--s-5); }
.receipt .tag-top .display { font-size: clamp(1.7rem, 4vw, 2.4rem); }

/* ---------- account ---------- */
.tabs { display: flex; gap: var(--s-1); border-bottom: 1.5px dashed var(--line-strong); margin-bottom: var(--s-5); overflow-x: auto; }
.tabs button, .tabs a {
  border: 0; background: none; padding: .7rem .9rem; font-weight: 700; cursor: pointer; color: var(--muted);
  border-bottom: 3px solid transparent; margin-bottom: -1.5px; text-decoration: none; white-space: nowrap;
}
.tabs [aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brick); }
.auth-box { max-width: 460px; margin: 0 auto; }
.order-card { border: 1px solid var(--line); border-radius: 12px; padding: var(--s-4); display: grid; gap: var(--s-2); background: var(--card); }
.order-card .top { display: flex; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; align-items: center; }

.pill { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 999px; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.pill::before { content: ''; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.pill.awaiting_payment, .pill.contacted, .pill.quoted { background: var(--warn-soft); color: var(--warn); }
.pill.paid, .pill.new { background: var(--blue-soft); color: var(--blue); }
.pill.fulfilled, .pill.won { background: var(--ok-soft); color: var(--ok); }
.pill.cancelled, .pill.lost { background: var(--chalk); color: var(--muted); }
:root[data-theme="dark"] .pill.paid, :root[data-theme="dark"] .pill.new { color: var(--blue); }

/* ---------- footer ---------- */
footer.site { background: var(--card); border-top: 1px solid var(--line); }
footer.site .wrap { padding-block: var(--s-7) var(--s-6); display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s-5); }
@media (max-width: 900px) { footer.site .wrap { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { footer.site .wrap { grid-template-columns: 1fr; } }
footer.site h4 { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: var(--s-3); }
footer.site ul a { color: var(--ink-2); }
.legal { border-top: 1px solid var(--line); background: var(--card); }
.legal .wrap { display: flex; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-4); font-size: .82rem; color: var(--muted); flex-wrap: wrap; }
footer.site ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
footer.site a { text-decoration: none; }
footer.site a:hover { text-decoration: underline; }
.care-icons { display: flex; gap: var(--s-3); margin-top: var(--s-3); color: var(--muted); }
.care-icons svg { width: 26px; height: 26px; }

.toast {
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  background: var(--ink); color: var(--chalk); padding: .75rem 1.1rem; border-radius: 999px; font-weight: 600; z-index: 60;
  box-shadow: var(--shadow); max-width: calc(100vw - 32px); display: flex; gap: var(--s-3); align-items: center;
}
.toast a { color: var(--chalk); }

/* ---------- owner dashboard ---------- */
.admin { padding-block: var(--s-5) var(--s-8); }
.admin-head { display: flex; justify-content: space-between; align-items: end; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-4); }
.admin-head h1 { font-size: 1.9rem; font-weight: 600; letter-spacing: -.015em; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: var(--s-3); }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: var(--s-4); display: grid; gap: .25rem; }
.kpi .v { font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kpi .l { font-size: .82rem; color: var(--muted); font-weight: 600; }
.kpi.alert-kpi { border-color: var(--warn); box-shadow: inset 4px 0 0 var(--warn); }
.kpi.go-kpi { border-color: var(--blue); box-shadow: inset 4px 0 0 var(--blue); }
.admin-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-4); margin-top: var(--s-4); }
@media (max-width: 900px) { .admin-grid { grid-template-columns: 1fr; } }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
table.data { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.data th, table.data td { padding: .65rem .75rem; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: middle; }
table.data th { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; background: var(--card); position: sticky; top: 0; }
table.data tr:last-child td { border-bottom: 0; }
table.data td.r, table.data th.r { text-align: right; font-variant-numeric: tabular-nums; }
table.data tr.click { cursor: pointer; }
table.data tr.click:hover td { background: var(--chalk); }
.wrap-cell { white-space: normal !important; min-width: 180px; }

/* inventory matrix: colors down, sizes across */
.matrix th, .matrix td { text-align: center; }
.matrix td:first-child, .matrix th:first-child { text-align: left; }
.stock-in {
  width: 4.2rem; text-align: center; padding: .42rem .3rem; border-radius: 6px; border: 1.5px solid var(--line-strong);
  background: var(--card); font-variant-numeric: tabular-nums; font-weight: 700;
}
.stock-in.low { border-color: var(--warn); background: var(--warn-soft); }
.stock-in.out { border-color: var(--bad); background: var(--bad-soft); }
.stock-in.changed { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.sold-sub { display: block; font-size: .7rem; color: var(--muted); margin-top: .15rem; }
.color-cell { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.legend { display: flex; gap: var(--s-4); flex-wrap: wrap; font-size: .82rem; color: var(--muted); align-items: center; }
.legend i { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; margin-right: .3rem; vertical-align: -1px; border: 1.5px solid; }

.bars { display: grid; gap: .55rem; }
.bar-row { display: grid; grid-template-columns: 4.5rem 1fr 2.5rem; gap: var(--s-2); align-items: center; font-size: .86rem; }
.bar-row .track { height: 12px; background: var(--chalk); border-radius: 999px; overflow: hidden; }
.bar-row .fill { height: 100%; background: var(--blue); border-radius: 999px; }
.bar-row .n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }

.filter-chips { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-3); }
.chip { border: 1.5px solid var(--line-strong); background: var(--card); border-radius: 999px; padding: .38rem .8rem; font-weight: 600; font-size: .86rem; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--chalk); border-color: var(--ink); }

.sheet { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-4); align-items: start; }
@media (max-width: 900px) { .sheet { grid-template-columns: 1fr; } }
.kv { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .35rem var(--s-3); font-size: .92rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.confirm { border: 1.5px solid var(--bad); background: var(--bad-soft); border-radius: 10px; padding: var(--s-3); display: grid; gap: var(--s-2); }
.color-edit { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s-3); align-items: center; padding-block: var(--s-3); border-top: 1px dashed var(--line); }
.color-edit .ph { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--chalk); }
.color-edit .ph img { width: 100%; height: 100%; object-fit: cover; }
.preview-ribbon {
  background: var(--blue-soft); color: var(--ink); font-size: .84rem; border-bottom: 1px solid var(--line);
}
.preview-ribbon .wrap { padding-block: .5rem; display: flex; gap: var(--s-3); flex-wrap: wrap; justify-content: center; align-items: center; }
.loading { padding: var(--s-8) 0; text-align: center; color: var(--muted); }

/* drawn product art (SVG) sits inside the frame instead of being cropped */
img[src$=".svg"], img[src^="data:image/svg"] { object-fit: contain !important; padding: 7%; }
.thumbs img[src$=".svg"], .thumbs img[src^="data:image/svg"], .line .thumb img[src$=".svg"], .line .thumb img[src^="data:image/svg"], .color-edit img[src$=".svg"], .color-edit img[src^="data:image/svg"] { padding: 4%; }

/* category tiles */
.cats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-3); }
@media (max-width: 1100px) { .cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cat { display: grid; gap: .2rem; text-decoration: none; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: var(--s-3); transition: transform .15s ease, box-shadow .15s ease; align-content: start; min-width: 0; }
.cat:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.cat-img { display: block; aspect-ratio: 1 / 1; max-width: 100%; border-radius: var(--r); overflow: hidden; background: var(--photo); margin-bottom: .4rem; }
.cat-img img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.cat-name { font-weight: 600; font-size: 1.02rem; }
.cat-sub { color: var(--ink-2); font-size: .86rem; }
.cat-meta { color: var(--muted); font-size: .76rem; margin-top: .2rem; font-variant-numeric: tabular-nums; }
.filter-chips a.chip { text-decoration: none; display: inline-flex; gap: .4rem; align-items: center; }
.chip[aria-pressed="true"] .muted { color: inherit; opacity: .7; }
.size-group { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-top: .2rem; }
.size-group .muted { text-transform: none; letter-spacing: 0; font-weight: 500; margin-left: .35rem; }

/* ======================================================================
   Homepage and service pages (Campus Heritage layout)
   ====================================================================== */
.lede { color: var(--ink-2); font-size: 1.125rem; max-width: 58ch; }
.s { padding-block: 5.5rem; }
.s.white { background: var(--card); }
.s.alt { background: var(--sand); }
.dark { --ink: var(--band-fg); --ink-2: var(--band-2); --muted: var(--band-2); --line: var(--band-line); --line-strong: var(--band-line); --card: var(--band-surface); --hl: var(--band-hl); background: var(--band); color: var(--band-fg); }
.s-head { display: flex; justify-content: space-between; align-items: end; gap: var(--s-5); margin-bottom: 2.25rem; flex-wrap: wrap; }
.s-head .t { display: grid; gap: .75rem; max-width: 640px; min-width: 0; }
.s-title { font-size: clamp(1.75rem, 3.2vw, 2.375rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.12; }
.s-head p { color: var(--ink-2); }
.textlink { font-weight: 600; text-decoration: none; color: var(--hl); white-space: nowrap; }
.textlink:hover { text-decoration: underline; }

/* hero */
.home-hero { padding-block: 3.5rem; border-bottom: 1px solid var(--line); }
.home-hero .hero-main { display: grid; grid-template-columns: 1.02fr 1fr; gap: 3.5rem; align-items: center; }
.home-hero h1 { font-size: clamp(2.4rem, 5vw, 3.75rem); font-weight: 600; line-height: 1.08; letter-spacing: -.03em; }
.home-hero h1 em { font-style: normal; color: var(--hl); }
.hero-copy { display: grid; gap: 1.5rem; min-width: 0; }
.hero-ctas { display: flex; gap: .75rem; flex-wrap: wrap; }
.slider { position: relative; min-width: 0; display: grid; gap: .875rem; }
.track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: 10px; scrollbar-width: none; }
.track::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: start; position: relative; aspect-ratio: 1 / 1; max-width: 100%; background: var(--photo); display: grid; place-items: center; overflow: hidden; }
.slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; mix-blend-mode: multiply; padding: 9% 12% 27%; box-sizing: border-box; }
.slide img[src^="data:image/svg"], .slide img[src$=".svg"] { padding: 12% 20% 29% !important; }
.slide .info { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; display: flex; justify-content: space-between; align-items: center; gap: .75rem; background: var(--card); border-radius: 8px; padding: .75rem .875rem .75rem 1rem; box-shadow: 0 6px 20px rgba(16, 41, 67, .08); }
.slide .info b { display: block; font-size: 1rem; font-weight: 600; }
.slide .info span { font-size: .8rem; color: var(--muted); }
.slide .info .btn { flex-shrink: 0; padding: .55rem .9rem; font-size: .85rem; }
.slide .badge-tag { position: absolute; top: 1rem; left: 1rem; font: 700 .7rem/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; background: var(--brick); color: var(--brick-ink); padding: .45rem .6rem; border-radius: 3px; }
.arrow { position: absolute; top: calc(50% - 1.8rem); width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 1.25rem; line-height: 1; cursor: pointer; display: grid; place-items: center; box-shadow: 0 2px 10px rgba(16, 41, 67, .08); }
.arrow:hover { border-color: var(--ink); }
.arrow.prev { left: .75rem; } .arrow.next { right: .75rem; }
.slider-foot { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.dots-nav { display: flex; gap: 6px; }
.dots-nav button { width: 8px; height: 8px; border-radius: 4px; border: 0; padding: 0; background: var(--line-strong); cursor: pointer; transition: width .25s, background .25s; }
.dots-nav button[aria-current="true"] { width: 26px; background: var(--brick); }
.count-lbl { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.pause { background: none; border: 0; color: var(--muted); font-size: .8rem; font-weight: 500; cursor: pointer; padding: 4px; }
.trust { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 3rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.trust div { padding: 1.1rem 1.25rem; display: grid; gap: .25rem; border-left: 1px solid var(--line); min-width: 0; }
.trust div:first-child { border-left: 0; }
.trust b { font-weight: 600; font-size: .95rem; }
.trust span { color: var(--muted); font-size: .85rem; line-height: 1.45; }
@media (max-width: 900px) {
  .home-hero .hero-main { grid-template-columns: 1fr; gap: 2.25rem; }
  .trust { grid-template-columns: 1fr 1fr; }
  .trust div:nth-child(3) { border-left: 0; }
  .trust div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 480px) { .trust { grid-template-columns: 1fr; } .trust div { border-left: 0; border-top: 1px solid var(--line); } .trust div:first-child { border-top: 0; } }

/* four doors */
.paths { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.paths .path { grid-column: span 2; }
.paths .path:nth-child(4), .paths .path:nth-child(5) { grid-column: span 3; }
.path { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 1.5rem; display: grid; grid-template-rows: auto auto 1fr auto auto; gap: .75rem; text-decoration: none; transition: border-color .15s; min-width: 0; }
.path:hover { border-color: var(--ink); }
.path .for { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hl); line-height: 1.4; }
.path h3 { font-size: 1.375rem; font-weight: 600; }
.path p { color: var(--ink-2); font-size: .95rem; }
.path .go { font-weight: 600; font-size: .92rem; }
.spec { display: grid; border-top: 1px solid var(--line); margin: 0; }
.spec div { display: flex; justify-content: space-between; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--line); font-size: .85rem; }
.spec .k { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); line-height: 1.8; }
.spec .v { font-weight: 500; text-align: right; }
@media (max-width: 1000px) { .paths { grid-template-columns: 1fr 1fr; } .paths .path, .paths .path:nth-child(4) { grid-column: auto; } .paths .path:nth-child(5) { grid-column: 1 / -1; } }
@media (max-width: 560px) { .paths { grid-template-columns: 1fr; } .paths .path:nth-child(5) { grid-column: auto; } }

/* shop grid on home */
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem 1.25rem; }
@media (max-width: 980px) { .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.more-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 1.25rem; display: grid; align-content: start; gap: 2px; aspect-ratio: 4 / 5; max-width: 100%; }
.more-card a { display: flex; justify-content: space-between; padding: .6rem 0; border-bottom: 1px solid var(--line); text-decoration: none; font-weight: 500; }
.more-card a:hover { color: var(--hl); }
.more-card a span { color: var(--muted); font-size: .8rem; }
@media (max-width: 980px) { .more-card { aspect-ratio: auto; } }

/* tee color wall */
.cw { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.cw .cw-photo { aspect-ratio: 1 / 1; max-width: 100%; background: var(--photo); border-radius: var(--r); overflow: hidden; position: relative; }
.cw .cw-photo img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cw-panel { display: grid; gap: 1.35rem; min-width: 0; }
.cw-sw { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; max-width: 440px; }
.cw-sw button { aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--line-strong); cursor: pointer; padding: 0; }
.cw-sw button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--chalk), 0 0 0 4px var(--ink); }
.cw-name { display: flex; justify-content: space-between; align-items: baseline; max-width: 440px; gap: .75rem; }
.cw-name b { font-size: 1.05rem; font-weight: 600; }
.cw-name span { font-size: .8rem; color: var(--muted); }
.cw-sizes { display: grid; gap: .6rem; }
.cw-sizes .grp { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cw-sizes .lbl { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); width: 52px; }
.cw-sizes button { min-width: 48px; height: 40px; padding: 0 10px; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); border-radius: var(--r); font-weight: 600; font-size: .85rem; cursor: pointer; }
.cw-sizes button[aria-pressed="true"] { background: var(--ink); color: var(--card); border-color: var(--ink); }
.cw-sizes button:disabled { opacity: .45; cursor: not-allowed; }
.cw-buy { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.cw-buy .p { font-size: 1.375rem; font-weight: 500; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .cw { grid-template-columns: 1fr; gap: 2rem; } }
@media (max-width: 420px) { .cw-sw { grid-template-columns: repeat(7, 1fr); } }

/* service blocks */
.svc { display: grid; grid-template-columns: 5fr 7fr; gap: 3.5rem; align-items: start; }
.svc .intro { display: grid; gap: 1.1rem; position: sticky; top: 96px; min-width: 0; }
.svc .intro p { color: var(--ink-2); }
.svc-steps { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.svc-steps li { display: grid; grid-template-columns: 64px 1fr; gap: 1rem; padding: 1.35rem 0; border-bottom: 1px solid var(--line); }
.svc-steps .n { font-size: .8rem; font-weight: 600; line-height: 1.8; color: var(--hl); }
.svc-steps b { display: block; font-size: 1.05rem; font-weight: 600; margin-bottom: .2rem; }
.svc-steps p { color: var(--ink-2); font-size: .95rem; }
.example { border: 1px solid var(--line); background: var(--card); border-radius: var(--r); padding: 1.35rem; display: grid; gap: .9rem; margin-top: 1.5rem; }
.example .head { display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.split { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.split div { display: grid; gap: .25rem; }
.split b { font-size: 1.375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.split span { font-size: .82rem; color: var(--muted); }
.bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--line); }
.tagrow { display: flex; flex-wrap: wrap; gap: 8px; }
.tagrow span { border: 1px solid var(--line-strong); border-radius: 999px; padding: .35rem .75rem; font-size: .85rem; color: var(--ink-2); }
@media (max-width: 900px) { .svc { grid-template-columns: 1fr; gap: 2rem; } .svc .intro { position: static; } }

/* wholesale */
.ws { display: grid; grid-template-columns: 7fr 5fr; gap: 2.5rem; align-items: start; }
.ws-table { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.ws-table table { border-collapse: collapse; width: 100%; min-width: 520px; font-variant-numeric: tabular-nums; }
.ws-table th, .ws-table td { text-align: left; padding: .85rem 1.1rem; border-bottom: 1px solid var(--line); font-size: .95rem; }
.ws-table th { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); background: var(--sand); }
.ws-table td:not(:first-child), .ws-table th:not(:first-child) { text-align: right; }
.ws-table tr:last-child td { border-bottom: 0; }
.ws-table td small { display: block; font-size: .8rem; color: var(--muted); }
.calc { border: 1px solid var(--line); background: var(--card); border-radius: var(--r); padding: 1.5rem; display: grid; gap: 1rem; }
.calc .out { display: grid; gap: .35rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.calc .total { font-size: 1.625rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.calc .hint { font-size: .85rem; color: var(--ink-2); }
.calc .hint b { color: var(--ok); }
@media (max-width: 900px) { .ws { grid-template-columns: 1fr; } }

/* private label */
.levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.level { border: 1px solid var(--line); border-radius: var(--r); background: var(--card); padding: 1.6rem; display: grid; gap: .9rem; grid-template-rows: auto auto auto 1fr auto; min-width: 0; }
.level.soon { background: transparent; border-style: dashed; border-color: var(--line-strong); }
.level .lv { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.level .lv > span:first-child { font-size: .75rem; font-weight: 600; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.lvl-pill { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .35rem .5rem; border-radius: 3px; }
.lvl-pill.now { background: var(--brick-soft); color: var(--hl); }
.lvl-pill.later { border: 1px solid var(--line-strong); color: var(--muted); }
.level h3 { font-size: 1.375rem; font-weight: 600; }
.level p { color: var(--ink-2); font-size: .95rem; }
.level ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; font-size: .92rem; }
.level li { padding-left: 1.25rem; position: relative; }
.level li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 2px; background: var(--hl); }
.own { margin-top: 1.5rem; display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: center; border: 1px solid var(--line); border-radius: var(--r); padding: 1.25rem 1.5rem; background: var(--card); }
.own .seal { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; font-size: .6rem; font-weight: 700; line-height: 1.1; text-align: center; letter-spacing: .04em; position: relative; }
.own .seal::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1px dashed var(--muted); }
.own p { color: var(--ink-2); font-size: .95rem; }
.own b { color: var(--ink); }
@media (max-width: 960px) { .levels { grid-template-columns: 1fr; } }

/* about */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; }
.about-grid .story { display: grid; gap: 1.1rem; min-width: 0; }
.about-grid .story p { color: var(--ink-2); font-size: 1.05rem; }
.road { display: grid; border-top: 1px solid var(--line); }
.road div { display: grid; grid-template-columns: 88px 1fr; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.road .when { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); line-height: 1.8; }
.road .now .when { color: var(--hl); }
.road b { display: block; font-weight: 600; }
.road span { font-size: .92rem; color: var(--ink-2); }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; gap: 2.25rem; } }

/* quote + faq */
.qf { display: grid; grid-template-columns: 5fr 7fr; gap: 3.5rem; align-items: start; }
.qf .info { display: grid; gap: 1.1rem; min-width: 0; }
.contact-list { display: grid; border-top: 1px solid var(--line); }
.contact-list div { display: flex; justify-content: space-between; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--line); font-size: .95rem; flex-wrap: wrap; }
.contact-list .k { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); line-height: 1.9; }
.contact-list .v { font-weight: 600; user-select: all; overflow-wrap: anywhere; }
.kind-btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.kind-btns button { min-height: 44px; border: 1px solid var(--line-strong); background: var(--chalk); color: var(--ink); border-radius: var(--r); font-weight: 600; font-size: .85rem; cursor: pointer; padding: 0 6px; }
.kind-btns button[aria-pressed="true"] { border-color: var(--brick); background: var(--brick-soft); color: var(--ink); }
@media (max-width: 900px) { .qf { grid-template-columns: 1fr; gap: 2.25rem; } }
@media (max-width: 560px) { .kind-btns { grid-template-columns: 1fr 1fr; } }
.faq { max-width: 820px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; padding: 1.2rem 0; font-weight: 600; font-size: 1.05rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.3rem; line-height: 1; color: var(--muted); }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { padding: 0 0 1.2rem; color: var(--ink-2); max-width: 68ch; }
.page-hero { padding-block: 3rem 0; }
.card-dots { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.card-dots .dot { width: 12px; height: 12px; }
.card-dots small { font-size: .75rem; color: var(--muted); margin-left: 2px; }
.grid4 > *, .cards > * { min-width: 0; }
.card .row { flex-wrap: wrap; row-gap: .3rem; }
/* private label production detail */
.spec-card { border: 1px solid var(--line); background: var(--card); border-radius: var(--r); padding: 1.1rem 1.25rem; display: grid; gap: .75rem; }
.lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.lane { border: 1px solid var(--line); background: var(--card); border-radius: var(--r); padding: 1.6rem; display: grid; gap: .7rem; align-content: start; min-width: 0; }
.lane h3 { font-size: 1.5rem; font-weight: 600; }
.lane p { color: var(--ink-2); }
.lane ul { margin: .25rem 0 0; padding: 0; list-style: none; display: grid; gap: .5rem; font-size: .95rem; }
.lane li { padding-left: 1.25rem; position: relative; }
.lane li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 2px; background: var(--hl); }
@media (max-width: 760px) { .lanes { grid-template-columns: 1fr; } }
.makes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.make { display: grid; gap: .3rem; align-content: start; min-width: 0; }
.make-img { aspect-ratio: 4 / 5; max-width: 100%; background: var(--photo); border-radius: var(--r); overflow: hidden; display: grid; place-items: center; margin-bottom: .5rem; }
.make-img img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.make b { font-weight: 600; }
.make span { font-size: .88rem; color: var(--muted); }
@media (max-width: 900px) { .makes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1rem; }
@media (max-width: 480px) { .check-grid { grid-template-columns: 1fr; } }

/* page openers: every page starts with photos and a headline, never prices */
.page-open { padding-block: 3.5rem; border-bottom: 1px solid var(--line); background: var(--chalk); }
.page-open.plain { background: var(--sand); padding-block: 3rem; }
.po-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3rem; align-items: center; }
.po-grid.solo { grid-template-columns: minmax(0, 760px); }
.po-copy { display: grid; gap: 1.25rem; min-width: 0; }
.po-copy h1 { font-size: clamp(2.1rem, 4.4vw, 3.25rem); font-weight: 600; line-height: 1.1; letter-spacing: -.03em; }
.po-art { display: grid; gap: .75rem; aspect-ratio: 1 / .78; max-width: 100%; min-width: 0; grid-template-rows: minmax(0, 1fr); }
.po-art.n3 { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.po-art.n3 .po-tile:first-child { grid-row: 1 / 3; }
.po-art.n3.wide { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1.4fr) minmax(0, 1fr); aspect-ratio: 1 / 1.05; }
.po-art.n3.wide .po-tile:first-child { grid-row: auto; grid-column: 1 / 3; }
.po-art.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.po-art.n1 { grid-template-columns: 1fr; }
.po-tile { position: relative; background: var(--photo); border-radius: var(--r); overflow: hidden; min-height: 0; min-width: 0; }
.po-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; mix-blend-mode: multiply; padding: 9%; box-sizing: border-box; }
.po-tile img[src^="data:image/svg"], .po-tile img[src$=".svg"] { padding: 15% !important; }
@media (max-width: 860px) { .po-grid { grid-template-columns: 1fr; gap: 2rem; } .po-art { aspect-ratio: 1 / .85; } }

/* product page: by-request sizes and printing add-on */
.ask-row { font-size: .9rem; color: var(--ink-2); margin-top: .35rem; }
.print-panel { margin-top: var(--s-5); border: 1px solid var(--line); background: var(--card); border-radius: var(--r); padding: 1.1rem 1.25rem; display: grid; gap: .8rem; justify-items: start; }
.print-panel b { font-weight: 600; }
.print-panel p { color: var(--ink-2); font-size: .92rem; margin-top: .2rem; }

/* FAQ and policy pages */
.faq-page, .policy { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 3rem; align-items: start; }
.faq-toc { position: sticky; top: 96px; display: grid; gap: .15rem; }
.faq-toc .eyebrow { margin-bottom: .5rem; }
.faq-toc a { text-decoration: none; color: var(--ink-2); padding: .45rem 0 .45rem .75rem; border-left: 2px solid var(--line); font-weight: 500; }
.faq-toc a:hover, .faq-toc a[aria-current="page"] { color: var(--ink); border-left-color: var(--brick); }
.faq-groups { display: grid; gap: 2.5rem; min-width: 0; }
.faq-group { scroll-margin-top: 96px; }
.faq-group h2 { font-size: 1.375rem; font-weight: 600; margin-bottom: .25rem; }
.policy-doc { max-width: 70ch; min-width: 0; }
.policy-doc h2 { font-size: 1.2rem; font-weight: 600; margin: 2rem 0 .6rem; }
.policy-doc p, .policy-doc li { color: var(--ink-2); }
.policy-doc ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .45rem; }
@media (max-width: 860px) {
  .faq-page, .policy { grid-template-columns: 1fr; gap: 1.5rem; }
  .faq-toc { position: static; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; gap: .5rem; padding-bottom: .25rem; }
  .faq-toc .eyebrow { display: none; }
  .faq-toc a { border: 1px solid var(--line-strong); border-radius: 999px; padding: .4rem .8rem; white-space: nowrap; }
}
.legal-links { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.legal-links a { color: var(--muted); text-decoration: none; }
.legal-links a:hover { color: var(--ink); text-decoration: underline; }
.notice-link { color: inherit; text-decoration: none; }
.notice-link:hover { text-decoration: underline; }
.free-meter { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.free-meter i { display: block; height: 100%; background: var(--brick); }

/* customer portal and design studio */
.acct-intro { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.proj-list { display: grid; gap: .75rem; }
.proj-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 1rem; align-items: center; border: 1px solid var(--line); background: var(--card); border-radius: var(--r); padding: .75rem; text-decoration: none; }
.proj-card:hover { border-color: var(--ink); }
.proj-thumb { width: 96px; height: 96px; border-radius: var(--r); overflow: hidden; background: var(--photo); display: grid; place-items: center; text-align: center; }
.proj-thumb img { width: 100%; height: 100%; object-fit: cover; }
.proj-meta { display: grid; gap: .3rem; min-width: 0; }
.proj-meta .top { display: flex; justify-content: space-between; gap: .75rem; align-items: center; flex-wrap: wrap; }
.proj-alert { font-size: .88rem; font-weight: 600; color: var(--hl); }
.progress { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.progress li { padding-top: .6rem; border-top: 4px solid var(--line); font-size: .8rem; color: var(--muted); font-weight: 600; }
.progress li.done { border-color: var(--ink); color: var(--ink-2); }
.progress li.now { border-color: var(--brick); color: var(--ink); }
@media (max-width: 560px) { .progress li span { display: none; } .progress li.now span { display: inline; white-space: nowrap; } }
.proof-img { background: var(--photo); border-radius: var(--r); overflow: hidden; }
.proof-img img { width: 100%; height: auto; display: block; }
.approve { border-top: 1px solid var(--line); padding-top: 1rem; }
.thumb-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; }
.thumb-row figure { margin: 0; display: grid; gap: .35rem; }
.thumb-row img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r); background: var(--photo); }
.thumb-row figcaption { font-size: .8rem; color: var(--muted); }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.timeline li { display: grid; gap: .1rem; padding-left: .9rem; border-left: 2px solid var(--line); font-size: .9rem; }
.timeline li span:first-child { font-size: .78rem; }
.track-box { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; border: 1px solid var(--line); background: var(--sand); border-radius: var(--r); padding: .8rem 1rem; }
.track-box > div { display: grid; gap: .2rem; min-width: 0; overflow-wrap: anywhere; }
.studio { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 1.5rem; align-items: start; margin-top: 1rem; }
.studio-stage { position: sticky; top: 90px; display: grid; gap: .5rem; }
.studio-stage canvas { width: 100%; max-width: 100%; aspect-ratio: 1; border-radius: var(--r); background: var(--photo); touch-action: none; cursor: grab; }
.studio-stage canvas:active { cursor: grabbing; }
input[type="range"] { accent-color: var(--ink); width: 100%; }
@media (max-width: 900px) { .studio { grid-template-columns: 1fr; } .studio-stage { position: static; } }
.seg label.off { opacity: .55; cursor: not-allowed; }
.zip-check { margin-top: 1.5rem; border: 1px solid var(--line); background: var(--sand); border-radius: var(--r); padding: 1rem 1.25rem; }
.zc-row { display: flex; gap: .5rem; max-width: 320px; }
.zc-row .input { flex: 1; min-width: 0; }

/* =====================================================================
   Chip & Thread identity layer
   The site borrows from the garment itself: woven neck labels for section
   labels, stitched seams between sections, patch-stitched cards, a serif
   voice that matches the logo, the gold four-point star from the wordmark,
   and the heritage stamp with the pug.
   ===================================================================== */
:root {
  --gold: #eab039; --gold-deep: #d49a2d;
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0 C11 7 13 9 20 10 C13 11 11 13 10 20 C9 13 7 11 0 10 C7 9 9 7 10 0Z' fill='%23d49a2d'/%3E%3C/svg%3E");
  --weave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Cpath d='M0 .5H2M2 2.5H4M.5 2V4M2.5 0V2' stroke='%23102943' stroke-opacity='.022' stroke-width='1'/%3E%3C/svg%3E");
}

/* canvas weave on the ivory ground */
body, .page-open, .home-hero { background-color: var(--chalk); background-image: var(--weave); }
.page-open.plain { background-image: var(--weave); }

/* serif voice that matches the logo, kept at a light weight */
.home-hero h1, .po-copy h1, .s-title, .eyebrow + h1, .eyebrow + h2, .path h3, .empty .display, .story h2 {
  font-family: var(--f-logo); font-weight: 500; letter-spacing: -.012em; font-optical-sizing: auto;
}
.home-hero h1 { font-size: clamp(2.6rem, 5.4vw, 4.1rem); line-height: 1.02; }
.home-hero h1 em, .po-copy h1 em { font-style: italic; font-weight: 400; color: var(--hl); }
.s-title { font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.08; }
.po-copy h1 { font-size: clamp(2.3rem, 4.6vw, 3.5rem); line-height: 1.05; }
.path h3 { font-size: 1.6rem; }
.brand-name { font-weight: 700; }

/* woven neck label: section labels (the ones above a heading) look like a sewn-in tag */
.eyebrow:has(+ h1), .eyebrow:has(+ h2), .eyebrow:has(+ .h1), .eyebrow.tag {
  display: inline-flex; align-items: center; width: fit-content; max-width: 100%; justify-self: start;
  background: var(--ink); color: var(--chalk); font-size: .66rem; letter-spacing: .17em; line-height: 1.35;
  padding: .45rem 1.15rem .45rem .75rem; border-radius: 2px;
  outline: 1px dashed rgba(234, 176, 57, .75); outline-offset: -3px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 50%, 100% 100%, 0 100%);
}
.dark .eyebrow:has(+ h1), .dark .eyebrow:has(+ h2), .dark .eyebrow.tag { background: var(--gold); color: #102943; outline-color: rgba(16, 41, 67, .5); }
.slide .badge-tag { background: var(--ink); color: var(--chalk); border-radius: 2px; outline: 1px dashed rgba(234, 176, 57, .75); outline-offset: -3px; padding: .5rem 1.1rem .5rem .7rem; clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 50%, 100% 100%, 0 100%); }

/* stitched seam between sections */
main > section + section, main .s + .s { position: relative; }
main > section + section::before, main .s + .s::before {
  content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 0;
  border-top: 1.5px dashed var(--line-strong); opacity: .9; pointer-events: none;
}
main .dark::before { border-top-color: rgba(234, 176, 57, .55) !important; }
.notice { position: relative; padding-bottom: calc(.5rem + 6px); }
.notice::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; border-top: 1px dashed rgba(234, 176, 57, .6); }

/* buttons with a sewn edge */
.btn { border-radius: 4px; }
.btn.primary { outline: 1px dashed rgba(16, 41, 67, .42); outline-offset: -5px; }
.btn.primary.small, .slide .info .btn { outline-offset: -4px; }
.btn.primary:focus-visible { outline: 2.5px solid var(--blue); outline-offset: 2px; }

/* patch-stitched panels and photo frames */
.path { border-radius: 10px; outline: 1px dashed var(--line-strong); outline-offset: -8px; position: relative; padding: 1.75rem; }
.path:hover { border-color: var(--gold); outline-color: var(--gold-deep); }
.paths { counter-reset: door; }
.path::before { counter-increment: door; content: "No. " counter(door, decimal-leading-zero); position: absolute; top: 1.4rem; right: 1.5rem; font: italic 400 .95rem/1 var(--f-logo); color: var(--hl); }
.path .for { padding-right: 3.5rem; }
.po-tile::after, .card .img::after, .slide::after {
  content: ""; position: absolute; inset: 9px; border: 1px dashed rgba(16, 41, 67, .16); border-radius: 4px; pointer-events: none;
}
.trust { border-radius: 8px; outline: 1px dashed var(--line-strong); outline-offset: -6px; }
.trust b { display: flex; align-items: center; gap: .45rem; }
.trust b::before { content: ""; width: 11px; height: 11px; flex: none; background: var(--star) center / contain no-repeat; }

/* step labels in the serif, like numbered care instructions */
.svc-steps .n { font: italic 400 1rem/1.5 var(--f-logo); letter-spacing: 0; text-transform: none; }

/* heritage stamp */
.stamp { display: block; }
.stamp-ring { transform-origin: 100px 100px; animation: stamp-spin 60s linear infinite; }
@keyframes stamp-spin { to { transform: rotate(360deg); } }
.slider { position: relative; }
.hero-stamp { position: absolute; z-index: 3; width: 132px; height: 132px; top: -34px; right: -26px; filter: drop-shadow(0 8px 18px rgba(16, 41, 67, .22)); transform: rotate(-8deg); }
@media (max-width: 1290px) { .hero-stamp { right: -8px; } }
@media (max-width: 600px) { .hero-stamp { width: 96px; height: 96px; top: -26px; right: -4px; } }

/* about: tidy the road list (each row: label, then title and note) */
.road div { display: block; padding: 0; border: 0; }
.road > div { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.road > div > div { display: grid; grid-template-columns: none; gap: .2rem; }
.road b { display: flex; align-items: center; gap: .5rem; }
.road .now b::before { content: ""; width: 11px; height: 11px; flex: none; background: var(--star) center / contain no-repeat; }

/* footer: navy, with the pug and the full wordmark */
footer.site.dark { background: var(--band); border-top: 0; position: relative; }
footer.site.dark::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; border-top: 1.5px dashed rgba(234, 176, 57, .55); }
footer.site.dark h4 { color: var(--gold); }
footer.site.dark ul a { color: var(--band-2); }
footer.site.dark ul a:hover { color: var(--band-fg); }
footer.site.dark .legal { background: #0c2036; border-top: 1px solid var(--band-line); }
footer.site.dark .legal .wrap { color: var(--band-2); }
.foot-brand { display: flex; align-items: flex-end; gap: 1rem; text-decoration: none !important; }
.foot-pug { width: 92px; height: auto; flex: none; }
.foot-word { white-space: nowrap; font: 700 1.6rem/1 var(--f-logo); color: var(--band-fg); display: grid; gap: .55rem; padding-bottom: .4rem; letter-spacing: -.01em; }
.foot-word .amp { color: var(--gold); font-style: italic; font-weight: 400; }
.foot-word small { font: 600 .66rem/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }

/* pug on empty states */
.empty-pug { width: 96px; height: auto; margin-bottom: .25rem; }
footer.site.dark .wrap { grid-template-columns: 1.7fr 1fr 1fr 1fr; }
@media (max-width: 900px) { footer.site.dark .wrap { grid-template-columns: 1fr 1fr; } footer.site.dark .wrap > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 520px) { footer.site.dark .wrap { grid-template-columns: 1fr; } }

/* real sample photos */
.po-tile.photo { background: #f1ece3; }
.po-tile.photo img { mix-blend-mode: normal; padding: 3% !important; object-fit: contain; }
.po-tile.photo.full img { padding: 0 !important; object-fit: cover; }
.po-tile.photo.full::after { border-color: rgba(255,255,255,.25); }
.samples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 860px) { .samples { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .samples { grid-template-columns: 1fr; } }
.sample { margin: 0; display: grid; gap: .6rem; min-width: 0; }
.sample-img { position: relative; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: #f1ece3; }
.sample-img img { width: 100%; height: 100%; object-fit: cover; }
.sample-img::after { content: ""; position: absolute; inset: 9px; border: 1px dashed rgba(16, 41, 67, .16); border-radius: 4px; pointer-events: none; }
.sample figcaption { display: grid; gap: .1rem; }
.sample figcaption b { font-weight: 600; font-size: .98rem; }
.sample figcaption span { color: var(--muted); font-size: .86rem; }

/* homepage slider: real photos, centered with room for the caption card */
.slide.photo { background: #efe7d9; }
.slide.photo img { mix-blend-mode: normal; object-fit: contain; object-position: center; padding: 7% 9% 25% !important; filter: drop-shadow(0 10px 14px rgba(16,41,67,.16)); }
@media (max-width: 600px) { .slide.photo img { padding: 13% 8% 36% !important; } }
@media (max-width: 600px) { .slide.photo .info span { display: none; } .slide.photo .info b { font-size: .95rem; } }

/* headlines: plain sans, no serif or italic flourishes (logo wordmark keeps its serif) */
.home-hero h1, .po-copy h1, .s-title, .eyebrow + h1, .eyebrow + h2, .path h3, .empty .display, .story h2, h1, h2, h3 {
  font-family: var(--f-display); font-style: normal; font-weight: 600; letter-spacing: -.02em;
}
.home-hero h1 em, .po-copy h1 em, h1 em, h2 em { font-style: normal; font-weight: 600; }
.path::before { font-family: var(--f-body); font-style: normal; font-weight: 600; font-size: .8rem; letter-spacing: .06em; }
.svc-steps .n { font-family: var(--f-body); font-style: normal; font-weight: 600; font-size: .8rem; }
.po-tile.photo img { filter: drop-shadow(0 8px 12px rgba(16,41,67,.14)); padding: 7% !important; }

/* keep long links and the wholesale table inside the screen on phones */
.ws > * { min-width: 0; }
@media (max-width: 560px) { .textlink { white-space: normal; } }


/* =====================================================================
   VERSION 3 · Clean Studio
   Bright white, generous space, refined sentence-case type, brand navy
   for buttons and small accents. Gold lives only in the pug logo.
   ===================================================================== */
:root {
  --chalk: #ffffff; --card: #ffffff; --photo: #f3f3f1;
  --ink: #111827; --ink-2: #4b5563; --muted: #6b7280;
  --line: #ececea; --line-strong: #d6d6d2;
  --brick: #102943; --brick-ink: #ffffff; --brick-soft: #e8edf4; --hl: #102943;
  --sand: #f7f7f5; --navy: #102943;
  --band: #102943; --band-fg: #ffffff; --band-2: #b7c2d3; --band-line: #24405f; --band-hl: #ffffff; --band-surface: #16314f;
  --f-display: 'Inter Tight', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-logo: 'Inter Tight', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --r: 6px;
  --shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 12px 32px rgba(17, 24, 39, .06);
}
body, .page-open, .home-hero { background-image: none !important; }
body { background: #fff; color: var(--ink); font-size: 16px; }

/* switch off the heritage identity layer */
main > section + section::before, main .s + .s::before, footer.site.dark::before, .notice::after { display: none !important; }
.po-tile::after, .card .img::after, .slide::after, .sample-img::after, .care::after { display: none !important; }
.path, .trust, .btn.primary { outline: none !important; }
.stamp, .hero-stamp { display: none !important; }
.eyebrow:has(+ h1), .eyebrow:has(+ h2), .eyebrow:has(+ .h1), .eyebrow.tag, .dark .eyebrow:has(+ h1), .dark .eyebrow:has(+ h2), .dark .eyebrow.tag, .eyebrow, .kicker {
  background: none !important; outline: 0 !important; clip-path: none !important; padding: 0 !important; border-radius: 0 !important;
  font: 600 .74rem/1.3 var(--f-body) !important; letter-spacing: .12em !important; text-transform: uppercase; color: var(--muted) !important;
}
.dark .kicker, .dark .eyebrow:has(+ h1), .dark .eyebrow:has(+ h2), .page-open .eyebrow { color: var(--band-2) !important; }

/* type: refined, sentence case */
h1, h2, h3, .home-hero h1, .po-copy h1, .s-title, .path h3, .story h2, .empty .display, .eyebrow + h1, .eyebrow + h2 {
  font-family: var(--f-display) !important; font-weight: 600 !important; letter-spacing: -.025em !important; font-style: normal !important; text-transform: none;
}
.home-hero h1 em, .po-copy h1 em, h1 em, h2 em { color: inherit !important; font-weight: 600 !important; }
.s-title { font-size: clamp(2rem, 3.6vw, 2.9rem) !important; line-height: 1.06 !important; }
.po-copy h1 { font-size: clamp(2.3rem, 4.6vw, 3.6rem) !important; line-height: 1.04 !important; }
h3, .card h3, .level h3, .lane h3, .path h3 { letter-spacing: -.015em !important; }
.card h3 { font-size: 1rem; font-weight: 600 !important; }
.lede { font-size: 1.125rem; color: var(--ink-2); }
.s { padding-block: 6.5rem; }
.s.white { background: #fff; }
.s.alt { background: var(--sand); }
.s-head { margin-bottom: 3rem; }

/* logo */
.brand-name { font: 700 1.3rem/1 var(--f-display) !important; letter-spacing: -.02em; display: grid; gap: .3rem; }
.brand-name .bn { white-space: nowrap; }
.brand-name .amp, .foot-word .amp { color: inherit !important; font-style: normal !important; font-weight: 700 !important; }
.brand-sub { font: 500 .6rem/1 var(--f-body); letter-spacing: .16em; color: var(--muted); text-transform: uppercase; }

/* header */
.notice { background: var(--sand); color: var(--ink-2); font-size: .8rem; border-bottom: 1px solid var(--line); }
.notice b { color: var(--navy); }
.topbar { background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.topbar .wrap { min-height: 76px; max-width: 1320px; }
.nav a { white-space: nowrap; }
.nav .nav-main { gap: 1.5rem; }
.nav .nav-main a { font-size: .9rem; font-weight: 500; color: var(--ink-2); }
.nav .nav-main a:hover { color: var(--ink); border-color: var(--line-strong); }
.nav .nav-main a[aria-current="page"] { color: var(--ink); border-color: var(--navy); }
.nav .quote-btn { padding: .65rem 1.1rem; font-size: .88rem; }
@media (max-width: 1320px) { .nav .nav-main { gap: 1.05rem; } .nav .nav-main a { font-size: .85rem; } .brand-sub { display: none; } }
@media (max-width: 1180px) { .nav .nav-main a[data-nav="about"] { display: none; } }
@media (max-width: 520px) { .brand-name { font-size: 1.1rem !important; } .brand-mark { width: 36px; height: 33px; } .topbar .wrap { gap: .5rem; } .nav a, .icon-btn { padding: .4rem .45rem; font-size: .8rem; } }

/* buttons: navy, softly rounded */
.btn { border-radius: 6px !important; font-weight: 600; font-size: .92rem; padding: .85rem 1.4rem; border-color: var(--line-strong); color: var(--ink); background: #fff; }
.btn:hover { border-color: var(--ink); background: #fff; }
.btn.primary { background: var(--navy) !important; border-color: var(--navy) !important; color: #fff !important; }
.btn.primary:hover { background: #0a1c30 !important; border-color: #0a1c30 !important; filter: none; }
.dark .btn:not(.primary), .page-open .btn:not(.primary) { background: transparent; border-color: rgba(255,255,255,.45); color: #fff; }
.dark .btn.primary { background: #fff !important; border-color: #fff !important; color: var(--navy) !important; }
.input, select.input, textarea.input { border-radius: 6px; }
.badge { border-radius: 4px; font-weight: 600; font-size: .7rem; letter-spacing: .04em; }
.badge.limited { background: var(--navy); color: #fff; border-color: var(--navy); }
.textlink, .linkish { color: var(--navy) !important; }
.kind-btns button[aria-pressed="true"], .chip[aria-pressed="true"] { background: var(--navy) !important; color: #fff !important; border-color: var(--navy) !important; }
.free-meter i { background: var(--navy); }

/* hero: white, photo on soft gray */
.v3-hero { background: #fff !important; padding-block: 4.5rem 3.5rem; border-bottom: 0; }
.v3-hero .hero-main { grid-template-columns: 1fr 1.05fr; gap: 4.5rem; max-width: 1320px; }
.v3-hero h1 { font-size: clamp(2.6rem, 5vw, 4.25rem) !important; line-height: 1.02 !important; letter-spacing: -.035em !important; }
.hero-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 2.75rem; margin: 1rem 0 0; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.hero-stats div { display: grid; gap: .3rem; }
.hero-stats dt { font: 600 1.5rem/1 var(--f-display); letter-spacing: -.02em; color: var(--ink); }
.hero-stats dd { margin: 0; font-size: .82rem; color: var(--muted); }
@media (max-width: 560px) { .hero-stats { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }
@media (max-width: 900px) { .v3-hero .hero-main { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; } .v3-hero { padding-block: 2.5rem; } }
.track { border-radius: 12px; }
.slide.photo { background: var(--photo) !important; }
.slide.photo img { filter: drop-shadow(0 16px 22px rgba(17,24,39,.14)) !important; }
.slide .badge-tag { background: #fff !important; color: var(--ink) !important; clip-path: none !important; outline: 0 !important; border-radius: 4px !important; font: 600 .7rem/1 var(--f-body) !important; letter-spacing: .06em; padding: .5rem .65rem !important; box-shadow: var(--shadow); }
.slide .info { border-radius: 8px; box-shadow: var(--shadow); }
.arrow { border-radius: 50%; }
.dots-nav button { border-radius: 4px; }
.dots-nav button[aria-current="true"] { background: var(--navy); }

/* methods row (static, quiet) */
.ticker { background: #fff; border-block: 1px solid var(--line); overflow: hidden; }
.ticker-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 0; width: auto; max-width: 1320px; margin: 0 auto; padding: 1.1rem 16px; animation: none; }
.ticker-row span:nth-child(n+12) { display: none; }
.ticker span { font: 500 .88rem/1 var(--f-body); color: var(--ink-2); padding: .35rem 1rem; white-space: nowrap; display: flex; align-items: center; gap: 1rem; }
.ticker span::after { content: "·"; color: var(--line-strong); font-size: 1.1rem; }
.ticker span:nth-child(11)::after { content: none; }

/* pillars */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.pillar { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 1rem; padding: 2rem; text-decoration: none; background: var(--sand); border-radius: 12px; min-width: 0; transition: box-shadow .2s, transform .2s; }
.pillar:hover { box-shadow: var(--shadow); transform: translateY(-2px); background: #fff; }
.pillar .pn { font: 500 .78rem/1 var(--f-mono); color: var(--muted); }
.pillar h3 { font-size: 1.9rem !important; }
.pillar p { color: var(--ink-2); }
.pillar ul { list-style: none; margin: 0; padding: 0; display: grid; }
.pillar li { padding: .6rem 0; border-top: 1px solid var(--line-strong); font-size: .94rem; color: var(--ink-2); }
.pillar .go, .also-card .go, .path .go { font-weight: 600; font-size: .92rem; color: var(--navy); }
@media (max-width: 900px) { .pillars { grid-template-columns: 1fr; } }

/* also serving */
.also { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.also-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 1.75rem; display: grid; gap: .75rem; grid-template-rows: auto 1fr auto; text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.also-card h3 { font-size: 1.35rem !important; }
.also-card p { color: var(--ink-2); font-size: .95rem; }
.also-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
@media (max-width: 860px) { .also { grid-template-columns: 1fr; } }

/* closing call to action */
.v2-cta .wrap { display: grid; gap: 1.25rem; justify-items: center; text-align: center; }
.v2-cta .s-title { font-size: clamp(2.2rem, 4.6vw, 3.6rem) !important; max-width: 18ch; }
.v2-cta .lede { margin-inline: auto; }
.v2-cta .hero-ctas { justify-content: center; }

/* cards, panels */
.card .img { border-radius: 10px; background: var(--photo); }
.price-tag { color: var(--ink-2); }
.level, .lane { border: 1px solid var(--line); border-radius: 12px !important; background: #fff; box-shadow: none; }
.s.alt .level, .s.alt .lane { border-color: transparent; }
.path { border-radius: 12px; }
.path::before { font-family: var(--f-mono) !important; content: counter(door, decimal-leading-zero) !important; color: var(--muted); font-style: normal; }
.svc-steps .n { font-family: var(--f-mono) !important; color: var(--muted); }
.tagrow span { border-radius: 999px; }
.level li::before, .lane li::before { background: var(--navy) !important; }

/* page openers: white with soft gray photo tiles */
.page-open { background: #fff !important; border-bottom: 1px solid var(--line); padding-block: 4rem; }
.page-open.plain { background: var(--sand) !important; }
.po-tile, .po-tile.photo { border-radius: 12px !important; background: var(--photo) !important; }
.po-tile.photo img { padding: 0 !important; object-fit: cover !important; filter: none !important; }

/* footer: brand navy */
footer.site.dark { background: var(--navy); }
footer.site.dark h4 { color: #fff; font: 600 .74rem/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; }
footer.site.dark .legal { background: #0c2036 !important; }
.foot-pug { width: 64px; }
.foot-word { font: 700 1.5rem/1 var(--f-display) !important; letter-spacing: -.02em; }
.foot-word small { font: 500 .62rem/1 var(--f-body) !important; letter-spacing: .16em; color: var(--band-2) !important; }

.lane ul li b { font-weight: 600; }
.ticker span { padding: .35rem .7rem; gap: .7rem; font-size: .84rem; }

/* =====================================================================
   VERSION 5 · one big photo hero per page
   ===================================================================== */
.big-hero { background: #fff; border-bottom: 1px solid var(--line); }
.bh-wrap { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); min-height: min(78vh, 760px); align-items: stretch; }
.bh-copy { display: grid; gap: 1.4rem; align-content: center; padding: 4rem clamp(16px, 4vw, 4.5rem) 4rem max(16px, calc((100vw - 1320px) / 2 + 16px)); min-width: 0; }
.bh-copy h1 { font-size: clamp(2.4rem, 4.6vw, 4rem) !important; line-height: 1.03 !important; letter-spacing: -.035em !important; max-width: 15ch; }
.bh-copy .lede { max-width: 46ch; }
.bh-photo { position: relative; min-height: 420px; background: #f4f4f2; overflow: hidden; }
.bh-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bh-photo.contain { background: #fff; }
.bh-photo.contain img { object-fit: contain; padding: 2.5rem; }
.bh-photo.bh-chip img { padding: 2rem 2rem 0; object-position: 50% 100% !important; }
.big-hero.home .bh-wrap { min-height: min(84vh, 820px); }
.big-hero.home .bh-copy h1 { font-size: clamp(2.6rem, 5vw, 4.4rem) !important; }
@media (max-width: 900px) {
  .bh-wrap { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .bh-photo { order: -1; min-height: 0; aspect-ratio: 4 / 4.2; }
  .bh-photo.contain { aspect-ratio: 4 / 3; }
  .bh-photo.bh-chip { aspect-ratio: 1 / 1; }
  .bh-copy { padding: 2rem 16px 2.75rem; gap: 1.1rem; }
  .bh-copy h1 { max-width: none; }
}

/* =====================================================================
   V5 · Build a Brand banner
   ===================================================================== */
.bb { position: relative; background: #f4f3ef; overflow: hidden; border-bottom: 0; }
.bb-main { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); align-items: center; min-height: min(80vh, 780px); padding: 0 max(16px, calc((100vw - 1320px) / 2 + 16px)); gap: 1rem; }
.bb-copy { display: grid; gap: 1.35rem; align-content: center; padding: 3.5rem 0; position: relative; z-index: 3; min-width: 0; }
.bb-kicker { font: 600 .74rem/1.3 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); display: inline-flex; align-items: center; gap: .6rem; }
.bb-kicker::before { content: ""; width: 28px; height: 2px; background: var(--navy); }
.bb h1 { font: 800 clamp(2.6rem, 5.2vw, 4.7rem)/.95 'Archivo CT', 'Archivo', var(--f-display) !important; font-stretch: 78% !important; text-transform: uppercase !important; letter-spacing: -.01em !important; color: var(--navy); max-width: 12ch; margin: 0; }
.bb h1 span { display: block; color: transparent; -webkit-text-stroke: 2px var(--navy); }
.bb-lede { color: var(--ink-2); font-size: 1.1rem; max-width: 42ch; }
.bb-ctas { display: flex; gap: .75rem; flex-wrap: wrap; }
.bb-proof { list-style: none; margin: .5rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid #dcdad3; display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; font-size: .88rem; color: var(--ink-2); }
.bb-proof b { color: var(--ink); font-weight: 700; margin-right: .2rem; }

.bb-stage { position: relative; height: 100%; min-height: 560px; display: grid; place-items: end center; }
.bb-giant { position: absolute; inset: 6% -2% auto; display: grid; justify-items: center; line-height: .8; pointer-events: none; z-index: 0; }
.bb-giant span { font: 900 clamp(7rem, 15.5vw, 15.5rem)/.82 'Archivo CT', 'Archivo', var(--f-display); font-stretch: 62%; text-transform: uppercase; letter-spacing: -.01em; color: #e3e1da; opacity: 0; transform: translateY(30px); animation: bbUp .9s cubic-bezier(.2,.7,.2,1) forwards; white-space: nowrap; }
.bb-giant span:nth-child(2) { color: transparent; -webkit-text-stroke: 2px #cfccc2; animation-delay: .12s; }
.bb-models { position: relative; z-index: 1; width: min(100%, 640px); margin-top: 2.5rem; opacity: 0; transform: translateY(24px); animation: bbUp 1s .25s cubic-bezier(.2,.7,.2,1) forwards; }
.bb-models img { width: 100%; height: auto; display: block; filter: drop-shadow(0 26px 22px rgba(17,24,39,.14)); }
.bb-models::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: 0; height: 22px; background: radial-gradient(closest-side, rgba(17,24,39,.18), transparent); z-index: -1; }
.bb-tag { position: absolute; left: var(--x); top: var(--y); transform: translate(-100%, -50%); display: inline-flex; align-items: center; gap: .5rem; background: #fff; color: var(--ink); font: 600 .74rem/1 var(--f-body); letter-spacing: .02em; padding: .5rem .75rem .5rem .55rem; border-radius: 999px; box-shadow: 0 6px 18px rgba(17,24,39,.12); white-space: nowrap; opacity: 0; animation: bbTag .5s cubic-bezier(.2,.7,.2,1.4) forwards; }
.bb-tag i { width: 9px; height: 9px; border-radius: 50%; background: var(--navy); box-shadow: 0 0 0 4px rgba(16,41,67,.15); flex: none; }
.bb-tag.r { transform: translate(0, -50%); }
.bb-tag.t1 { animation-delay: 1s; } .bb-tag.t2 { animation-delay: 1.2s; } .bb-tag.t3 { animation-delay: 1.4s; } .bb-tag.t4 { animation-delay: 1.6s; }
@keyframes bbUp { to { opacity: 1; transform: none; } }
@keyframes bbTag { from { opacity: 0; scale: .7; } to { opacity: 1; scale: 1; } }

.bb-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--navy); color: #fff; }
.bb-strip li { padding: 1.4rem clamp(1rem, 2vw, 1.75rem); display: grid; gap: .25rem; border-left: 1px solid rgba(255,255,255,.12); min-width: 0; }
.bb-strip li:first-child { border-left: 0; padding-left: max(16px, calc((100vw - 1320px) / 2 + 16px)); }
.bb-strip span { font: 500 .72rem/1 var(--f-mono); color: #9fb0c6; }
.bb-strip b { font: 700 1.05rem/1.2 'Archivo CT', 'Archivo', var(--f-display); font-stretch: 85%; text-transform: uppercase; letter-spacing: .02em; }
.bb-strip small { color: #b7c2d3; font-size: .82rem; }

@media (max-width: 980px) {
  .bb-main { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .bb-stage { order: -1; min-height: 0; padding-top: 1.5rem; }
  .bb-giant { inset: 4% -4% auto; }
  .bb-giant span { font-size: 29vw; }
  .bb-models { width: min(100%, 520px); margin-top: 3rem; }
  .bb-copy { padding: 1.75rem 0 2.5rem; }
  .bb-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bb-strip li, .bb-strip li:first-child { padding: 1.1rem 16px; border-left: 0; border-top: 1px solid rgba(255,255,255,.12); }
  .bb-strip li:last-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .bb-tag { font-size: .62rem; padding: .38rem .55rem .38rem .45rem; } .bb-tag.t2, .bb-tag.t4 { display: none; } }
@media (prefers-reduced-motion: reduce) { .bb-giant span, .bb-models, .bb-tag { animation: none; opacity: 1; transform: none; } .bb-tag:not(.r) { transform: translate(-100%, -50%); } .bb-tag.r { transform: translate(0, -50%); } }
.bb-main { min-height: min(calc(100vh - 230px), 720px); }
.bb-stage { min-height: 520px; }
.bb-giant { inset: 2% -8% auto; }
.bb-giant span { font-size: clamp(8rem, 19vw, 19rem); font-stretch: 62%; color: #dcd8cd; letter-spacing: .005em; }
.bb-giant span:nth-child(2) { color: #dcd8cd; -webkit-text-stroke: 0; }
.bb-models { width: min(100%, 600px); margin-top: 1.5rem; }
@media (max-width: 980px) { .bb-giant span { font-size: 33vw; } }
.bb-strip li { align-content: start; }
@media (max-width: 560px) {
  .bb-tag.t1 { transform: translate(0, -50%); left: 30%; }
  .bb-tag.t3 { transform: translate(-100%, -50%); left: 92%; top: 30%; }
  .bb-kicker { font-size: .66rem; letter-spacing: .1em; }
}
/* readable statement: one line above the models' heads */
.bb-stage { place-items: end center; padding-top: 0; }
.bb-giant { inset: 3% -6% auto; display: flex; justify-content: center; gap: .18em; font-size: clamp(5.5rem, 11.5vw, 11.5rem); }
.bb-giant span { font-size: 1em !important; line-height: .85; color: #d3cfc3 !important; -webkit-text-stroke: 0 !important; }
.bb-models { margin-top: clamp(6.5rem, 11vw, 10.5rem); width: min(100%, 560px); }
@media (max-width: 980px) {
  .bb-giant { font-size: 21vw; inset: 2% -2% auto; }
  .bb-models { margin-top: 15vw; }
}
.bb-models { margin-top: clamp(5.5rem, 9.4vw, 9rem); }
@media (max-width: 980px) { .bb-models { margin-top: 12.5vw; } }

/* ---- Build a Brand banner B: words left, models right, copy below ---- */
.bb2 { background: #f4f3ef; overflow: hidden; }
.bb2-in { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; min-height: min(calc(100vh - 160px), 760px); padding: 0 max(16px, calc((100vw - 1320px) / 2 + 16px)); gap: 2rem; }
.bb2-words { margin: 0; align-self: center; display: grid; line-height: .8; color: var(--navy); }
.bb2-words span { display: block; font: 900 clamp(6rem, 17vw, 17.5rem)/.8 'Archivo CT', 'Archivo', var(--f-display) !important; font-stretch: 62% !important; text-transform: uppercase !important; letter-spacing: -.005em !important; opacity: 0; transform: translateX(-30px); animation: bbUp .9s cubic-bezier(.2,.7,.2,1) forwards; }
.bb2-words span:nth-child(2) { animation-delay: .12s; color: transparent; -webkit-text-stroke: 3px var(--navy); }
.bb2-models { position: relative; width: min(100%, 600px); justify-self: center; padding-top: 2.5rem; opacity: 0; transform: translateY(24px); animation: bbUp 1s .25s cubic-bezier(.2,.7,.2,1) forwards; }
.bb2-models img { width: 100%; height: auto; display: block; filter: drop-shadow(0 26px 22px rgba(17,24,39,.14)); }

.bb2-intro { background: #fff; }
.bb2-intro-in { max-width: 1320px; margin: 0 auto; padding: 4.5rem 16px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
.bb2-intro h2 { font: 800 clamp(2.2rem, 4.2vw, 3.8rem)/.95 'Archivo CT', 'Archivo', var(--f-display) !important; font-stretch: 78% !important; text-transform: uppercase !important; letter-spacing: -.01em !important; color: var(--navy); margin: 1rem 0 0; max-width: 13ch; }
.bb2-intro h2 span { display: block; color: transparent; -webkit-text-stroke: 2px var(--navy); }
.bb2-side { display: grid; gap: 1.35rem; padding-top: 2.4rem; }
@media (max-width: 900px) {
  .bb2-in { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 0; }
  .bb2-words { padding-top: 2rem; }
  .bb2-words span { font-size: 30vw; }
  .bb2-models { width: min(100%, 520px); padding-top: 1rem; }
  .bb2-intro-in { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 2.75rem 16px; }
  .bb2-side { padding-top: 1.5rem; }
}
/* phones: one full-width line, models tucked under, tags clear of the print */
@media (max-width: 900px) {
  .bb2-words { display: flex; justify-content: center; gap: .14em; padding: 1.5rem 0 0; font-size: 21vw; line-height: .85; }
  .bb2-words span { font-size: 1em !important; transform: translateY(20px); }
  .bb2-words span:nth-child(2) { -webkit-text-stroke-width: 2px; }
  .bb2-models { padding-top: 0; margin-top: -3vw; position: relative; z-index: 1; }
  .bb2-models .bb-tag.t3 { display: none; }
  .bb2-models .bb-tag.t1 { display: inline-flex; left: 30%; top: 22%; transform: translate(0, -50%); }
  .bb2-models .bb-tag.t4 { display: inline-flex; left: 60%; top: 72%; transform: translate(0, -50%); }
  .bb2-models .bb-tag.t2 { display: none; }
}

/* =====================================================================
   V5 · Homepage campaign banner slides
   ===================================================================== */
.hb { position: relative; background: #f5f5f2; overflow: hidden; }
.hb-stage { position: relative; height: min(calc(100vh - 290px), 640px); min-height: 440px; }
.hb-slide { position: absolute; inset: 0; pointer-events: none; }
.hb-slide.on { pointer-events: auto; }
.hb-word { position: absolute; left: 0; right: 0; top: 4%; display: flex; justify-content: center; gap: .16em; font: 900 clamp(4.5rem, 12.5vw, 12.5rem)/.82 'Archivo CT', 'Archivo', var(--f-display); font-stretch: 62%; text-transform: uppercase; color: var(--navy); white-space: nowrap; z-index: 0; }
.hb-word span { display: block; opacity: 0; transform: translateY(60%); transition: opacity .5s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.hb-word span:nth-child(2) { color: transparent; -webkit-text-stroke: 3px var(--navy); transition-delay: .08s; }
.hb-word span:nth-child(3) { transition-delay: .16s; }
.hb-group { position: absolute; left: 50%; bottom: 0; height: 84%; aspect-ratio: 1600 / 900; transform: translate(-50%, 6%); opacity: 0; transition: opacity .6s ease, transform .9s cubic-bezier(.2,.7,.2,1); z-index: 1; }
.hb-group img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; display: block; filter: drop-shadow(0 22px 20px rgba(17,24,39,.12)); }
.hb-group .bb-tag { animation: none; opacity: 0; scale: .7; transition: opacity .35s ease, scale .45s cubic-bezier(.2,.7,.2,1.4); transition-delay: 0s; }
.hb-slide.on .hb-word span { opacity: 1; transform: none; }
.hb-slide.on .hb-group { opacity: 1; transform: translate(-50%, 0); transition-delay: .15s; }
.hb-slide.on .bb-tag { opacity: 1; scale: 1; transition-delay: var(--d); }
.hb-slide:not(.on) .hb-word span, .hb-slide:not(.on) .hb-group { transition-duration: .35s; transition-delay: 0s; }

.hb-bar { position: relative; z-index: 2; background: #fff; border-top: 1px solid var(--line); }
.hb-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center; padding: 1.5rem max(16px, calc((100vw - 1320px) / 2 + 16px)); }
.hb-copy { display: grid; min-width: 0; }
.hb-msg { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 2rem; align-items: center; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .4s ease, transform .5s ease, visibility 0s .4s; }
.hb-msg.on { opacity: 1; visibility: visible; transform: none; transition-delay: .25s, .25s, 0s; }
.hb-eyebrow { grid-column: 1; font: 600 .72rem/1.3 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.hb-line { grid-column: 1; margin: 0; font: 600 clamp(1.05rem, 1.6vw, 1.35rem)/1.35 var(--f-display) !important; letter-spacing: -.015em !important; text-transform: none !important; color: var(--ink); max-width: 52ch; }
.hb-ctas { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: .6rem; }
.hb-tabs { display: flex; gap: .25rem; align-items: stretch; border-left: 1px solid var(--line); padding-left: 1.5rem; }
.hb-tabs [role="tab"] { position: relative; display: grid; gap: .25rem; text-align: left; background: none; border: 0; padding: .55rem .9rem .9rem; cursor: pointer; color: var(--muted); min-width: 118px; }
.hb-tabs .n { font: 500 .7rem/1 var(--f-mono); }
.hb-tabs .t { font-weight: 600; font-size: .86rem; white-space: nowrap; }
.hb-tabs [role="tab"] i { position: absolute; left: .9rem; right: .9rem; bottom: .35rem; height: 2px; background: var(--line); overflow: hidden; }
.hb-tabs [role="tab"] i::after { content: ""; position: absolute; inset: 0; background: var(--navy); transform: scaleX(0); transform-origin: left; }
.hb-tabs [aria-selected="true"] { color: var(--ink); }
.hb-tabs [aria-selected="true"] i::after { transform: scaleX(1); }
.hb-tabs .run i::after { transform: scaleX(0); animation: hbRun 7s linear forwards; }
.hb.paused .hb-tabs [aria-selected="true"] i::after { animation: none; transform: scaleX(1); }
@keyframes hbRun { to { transform: scaleX(1); } }
.hb-pause { align-self: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink-2); cursor: pointer; font-size: .72rem; margin-left: .25rem; }

@media (max-width: 1100px) {
  .hb-bar { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .hb-tabs { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: .5rem; order: -1; }
}
@media (max-width: 700px) {
  .hb-stage { height: auto; min-height: 0; aspect-ratio: 1 / .9; }
  .hb-word { font-size: 15vw; top: 5%; }
  .hb-word span:nth-child(2) { -webkit-text-stroke-width: 2px; }
  .hb-group { height: auto; width: 128%; aspect-ratio: 1600 / 900; }
  .hb-group .bb-tag { display: none; }
  .hb-msg { grid-template-columns: minmax(0, 1fr); }
  .hb-ctas { grid-column: 1; grid-row: auto; margin-top: .6rem; flex-wrap: wrap; }
  .hb-tabs { gap: 0; justify-content: space-between; }
  .hb-tabs [role="tab"] { min-width: 0; padding: .5rem .4rem .85rem; flex: 1; }
  .hb-tabs [role="tab"] i { left: .4rem; right: .4rem; }
  .hb-tabs .t { font-size: .74rem; }
  .hb-bar { padding-block: 1rem 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .hb-word span, .hb-group, .hb-msg, .hb-group .bb-tag { transition: none !important; } }
/* banner with the group on the right: big word stacks on the left */
.hb-left .hb-word { flex-direction: column; align-items: flex-start; justify-content: center; top: 0; bottom: 0; left: max(16px, calc((100vw - 1320px) / 2 + 16px)); right: auto; gap: 0; font-size: clamp(5rem, 13vw, 13rem); }
.hb-left .hb-group { left: auto; right: -6%; transform: translate(0, 6%); }
.hb-slide.hb-left.on .hb-group { transform: none; }
.hb-left .hb-word span { transform: translateX(-40px); }
.hb-left.on .hb-word span { transform: none; }
@media (max-width: 700px) {
  .hb-left .hb-word { font-size: 17vw; top: 6%; bottom: auto; }
  .hb-left .hb-group { width: 118%; right: -22%; }
}
.hb-left .hb-group { right: max(-2%, calc((100vw - 1440px) / 2)); }
.hb-left .bb-tag.r[style*="--x:85%"] { transform: translate(-100%, -50%); }
@media (max-width: 700px) { .hb-left .hb-group { width: 100%; right: -4%; } .hb-left .hb-word { font-size: 16vw; } }

/* ---- Custom Print slides ---- */
.hb-group.tall { height: 92%; aspect-ratio: 1448 / 1086; }
.hb-mosaic { position: absolute; right: max(16px, calc((100vw - 1320px) / 2 + 16px)); top: 7%; bottom: 7%; width: min(56%, 760px); display: grid; grid-template-columns: 1.15fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; z-index: 1; }
.hb-mosaic figure { margin: 0; overflow: hidden; border-radius: 10px; background: #eee; opacity: 0; transform: translateY(24px) scale(.97); transition: opacity .5s ease, transform .7s cubic-bezier(.2,.7,.2,1); box-shadow: 0 12px 28px rgba(17,24,39,.10); }
.hb-mosaic figure:first-child { grid-row: 1 / 3; }
.hb-mosaic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.hb-slide.on .hb-mosaic figure { opacity: 1; transform: none; transition-delay: calc(.15s + var(--k) * .1s); }
.hb-left .hb-word { max-width: 40%; flex-wrap: wrap; }
@media (max-width: 700px) {
  .hb-mosaic { left: 16px; right: 16px; width: auto; top: 30%; bottom: 4%; gap: 6px; }
  .hb-mosaic figure { border-radius: 6px; }
  .hb-left .hb-word { max-width: none; flex-direction: row; flex-wrap: wrap; gap: 0 .14em; }
  .hb-group.tall { width: 112%; height: auto; }
}
.hb-small .hb-word { font-size: clamp(4rem, 8.6vw, 8.6rem); }
.hb-left .hb-group.tall { right: max(0%, calc((100vw - 1440px) / 2)); }
@media (max-width: 700px) { .hb-small .hb-word { font-size: 12vw; } .hb-left .hb-group.tall { width: 100%; right: -6%; } }
@media (max-width: 700px) { .hb-left:has(.tall) .hb-word { font-size: 13.5vw; flex-wrap: nowrap; justify-content: center; left: 0; right: 0; } .hb-left .hb-group.tall { width: 108%; right: -4%; } }
@media (max-width: 700px) { .hb-left .hb-group.tall { width: 84%; right: 8%; } }

/* ---- Shop Blanks banner: statement + rotating product card ---- */
.sb { background: #f5f2ed; overflow: hidden; }
.sb-in { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3rem; align-items: center; min-height: min(calc(100vh - 160px), 760px); padding: 2.5rem max(16px, calc((100vw - 1320px) / 2 + 16px)); }
.sb-copy { display: grid; gap: 1.35rem; min-width: 0; }
.sb-word { margin: 0; display: grid; line-height: .84; color: var(--navy); }
.sb-word span { display: block; font: 900 clamp(4rem, 8.4vw, 8.6rem)/.84 'Archivo CT', 'Archivo', var(--f-display) !important; font-stretch: 62% !important; text-transform: uppercase !important; letter-spacing: -.005em !important; opacity: 0; transform: translateX(-30px); animation: bbUp .8s cubic-bezier(.2,.7,.2,1) forwards; }
.sb-word span:nth-child(2) { animation-delay: .08s; color: transparent; -webkit-text-stroke: 2.5px var(--navy); }
.sb-word span:nth-child(3) { animation-delay: .16s; }
.sb-word span:nth-child(4) { animation-delay: .24s; color: transparent; -webkit-text-stroke: 2.5px var(--navy); }
.sb-stage { position: relative; width: min(100%, 520px); justify-self: center; aspect-ratio: 1122 / 1402; }
.sb-card { position: absolute; inset: 0 0 64px; border-radius: 14px; overflow: hidden; background: #f5f1ec; text-decoration: none; color: var(--ink); box-shadow: 0 30px 60px rgba(17,24,39,.14); opacity: 0; transform: translateX(40px) rotate(2deg) scale(.96); transition: opacity .5s ease, transform .7s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.sb-card.on { opacity: 1; transform: none; pointer-events: auto; }
.sb-card img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; transition: transform 4s ease; }
.sb-card.on img { transform: scale(1.04); }
.sb-info { position: absolute; left: 14px; right: 14px; bottom: 14px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem; align-items: center; background: rgba(255,255,255,.96); border-radius: 10px; padding: .8rem 1rem; box-shadow: 0 8px 24px rgba(17,24,39,.12); }
.sb-info b { display: block; font-weight: 700; font-size: .98rem; }
.sb-info small { display: block; color: var(--muted); font-size: .8rem; }
.sb-dot { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255,255,255,.6), 0 0 0 1px rgba(0,0,0,.1); }
.sb-price { font-weight: 700; font-size: .9rem; white-space: nowrap; }
.sb-card:hover .sb-price { text-decoration: underline; }
.sb-swatches { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 10px; }
.sb-swatches button { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; background: var(--c); box-shadow: 0 0 0 1px rgba(0,0,0,.12); cursor: pointer; padding: 0; transition: transform .2s, box-shadow .2s; }
.sb-swatches [aria-selected="true"] { transform: scale(1.2); box-shadow: 0 0 0 2px var(--navy); }
@media (max-width: 900px) {
  .sb-in { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; min-height: 0; padding-block: 2rem 2.5rem; }
  .sb-word { display: flex; flex-wrap: wrap; gap: 0 .2em; }
  .sb-word span { font-size: 15vw; }
  .sb-stage { width: min(100%, 420px); }
  .sb-copy .bb-ctas { order: 5; }
}
@media (prefers-reduced-motion: reduce) { .sb-word span, .sb-card, .sb-card img { animation: none; transition: none; opacity: 1; transform: none; } .sb-card:not(.on) { opacity: 0; } }

/* ---- Schools banner: wide photo, statement in the open space ---- */
.sw { position: relative; background: #f5f2ee; overflow: hidden; min-height: min(calc(100vh - 160px), 740px); display: grid; align-items: center; }
.sw-photo { position: absolute; right: 0; bottom: 0; height: 100%; width: auto; max-width: none; object-fit: cover; object-position: right bottom; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); opacity: 0; transform: translateX(30px); animation: bbUp 1s .2s cubic-bezier(.2,.7,.2,1) forwards; }
.sw-in { position: relative; z-index: 1; width: 100%; max-width: 1320px; margin: 0 auto; padding: 3rem 16px; display: grid; gap: 1.3rem; justify-items: start; }
.sw-in > * { max-width: 520px; }
.sw-word { margin: 0; display: grid; color: var(--navy); }
.sw-word span { display: block; font: 900 clamp(4.5rem, 10vw, 10rem)/.82 'Archivo CT', 'Archivo', var(--f-display) !important; font-stretch: 62% !important; text-transform: uppercase !important; opacity: 0; transform: translateX(-30px); animation: bbUp .8s cubic-bezier(.2,.7,.2,1) forwards; }
.sw-word span:nth-child(2) { animation-delay: .1s; color: transparent; -webkit-text-stroke: 2.5px var(--navy); }
.sw-chips { list-style: none; margin: .2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.sw-chips li { display: inline-flex; align-items: center; gap: .45rem; background: #fff; border-radius: 999px; padding: .45rem .8rem .45rem .6rem; font-size: .8rem; font-weight: 600; box-shadow: 0 4px 14px rgba(17,24,39,.08); }
.sw-chips li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--navy); box-shadow: 0 0 0 3px rgba(16,41,67,.15); }
@media (max-width: 1100px) { .sw-photo { height: 78%; } .sw-in > * { max-width: 440px; } }
@media (max-width: 800px) {
  .sw { display: block; min-height: 0; }
  .sw-photo { position: relative; display: block; width: 100%; height: auto; -webkit-mask-image: none; mask-image: none; }
  .sw-in { padding: 1.75rem 16px 2.5rem; }
  .sw-in > * { max-width: none; }
  .sw-word { display: flex; flex-wrap: wrap; gap: 0 .18em; }
  .sw-word span { font-size: 17vw; }
}
@media (prefers-reduced-motion: reduce) { .sw-photo, .sw-word span { animation: none; opacity: 1; transform: none; } }
/* schools banner v2: statement row, then full-width photo */
.sw { display: block; min-height: 0; }
.sw-in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem 3.5rem; align-items: end; padding: 2.5rem 16px 1.5rem; justify-items: stretch; }
.sw-in > * { max-width: none; }
.sw-word { display: flex; gap: 0 .18em; margin-top: .9rem; }
.sw-word span { font-size: clamp(4rem, 8.4vw, 8.4rem) !important; }
.sw-side { display: grid; gap: 1.1rem; padding-bottom: .4rem; }
.sw-side .bb-lede { max-width: 48ch; }
.sw-pic { position: relative; max-width: 1600px; margin: 0 auto; }
.sw-photo { position: relative; display: block; width: 100%; height: min(54vh, 640px); min-height: 380px; object-fit: cover; object-position: 50% 22%; -webkit-mask-image: none; mask-image: none; transform: translateY(20px); }
.sw-chips { position: absolute; left: max(16px, calc((100% - 1320px) / 2 + 16px)); bottom: 1.25rem; margin: 0; }
@media (max-width: 1000px) { .sw-in { grid-template-columns: minmax(0, 1fr); } .sw-word { flex-wrap: wrap; } }
@media (max-width: 800px) {
  .sw-in { padding: 1.5rem 16px 1.25rem; }
  .sw-word span { font-size: 17vw !important; }
  .sw-photo { height: auto; min-height: 0; object-fit: contain; }
  .sw-chips { position: static; padding: .9rem 16px 1.75rem; }
}
.sw-word { gap: 0 .3em; font-size: clamp(4rem, 8.4vw, 8.4rem); }
.sw-word span { font-size: 1em !important; }
.sw-photo { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%); mask-image: linear-gradient(180deg, transparent 0, #000 12%); }
@media (max-width: 800px) { .sw-word { font-size: 17vw; } .sw-photo { aspect-ratio: 1.45; object-fit: cover; object-position: 55% 30%; } }
@media (max-width: 800px) { .sw-photo { aspect-ratio: 1.9; object-position: 60% 25%; } }
/* schools: all text left-aligned on desktop */
.sw-in { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; align-items: start; padding-top: 2.75rem; }
.sw-side { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; padding-bottom: 0; }
.sw-side .bb-lede { max-width: 54ch; flex: 1 1 420px; }
.sw-side .bb-ctas { flex: 0 0 auto; }
@media (max-width: 800px) { .sw-side { display: grid; gap: 1.1rem; } }
.sw-photo { height: min(50vh, 600px); }
@media (min-width: 801px) { .sw-side { display: grid; justify-items: start; gap: 1.25rem; } .sw-side .bb-lede { flex: none; } }
/* full desktop: stacked text on the left, kids on the right */
@media (min-width: 1100px) {
  .sw { position: relative; min-height: min(calc(100vh - 160px), 660px); display: grid; align-items: center; }
  .sw-in { position: relative; z-index: 2; padding: 3rem 16px 5.5rem; }
  .sw-in > * { max-width: 560px; }
  .sw-word { font-size: clamp(4rem, 7.2vw, 7.6rem); flex-wrap: wrap; }
  .sw-pic { position: absolute; inset: auto 0 0 auto; width: min(78%, 1250px); max-width: none; margin: 0; z-index: 1; }
  .sw-photo { height: auto; min-height: 0; object-fit: contain; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%); mask-image: linear-gradient(90deg, transparent 0, #000 18%); }
  .sw-chips { position: absolute; left: auto; right: 100%; bottom: 1.5rem; transform: translateX(calc(100% + max(16px, (100vw - 1320px) / 2 + 16px) - (100vw - min(78vw, 1250px)))); }
}
.sw-chips-side { display: none; }
@media (min-width: 1100px) {
  .sw { min-height: min(calc(100vh - 170px), 620px); }
  .sw-in { padding: 2.5rem 16px 3rem; }
  .sw-pic .sw-chips { display: none; }
  .sw-chips-side { display: flex; position: static; transform: none; }
  .sw-photo { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%), linear-gradient(180deg, transparent 0, #000 14%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 18%), linear-gradient(180deg, transparent 0, #000 14%); mask-composite: intersect; }
}

/* ---- Shared split banner (Wholesale, Transfers, About) ---- */
.sp { background: #f5f2ee; overflow: hidden; }
.sp-in { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr); gap: 3rem; align-items: center; min-height: min(calc(100vh - 170px), 680px); padding: 2.5rem max(16px, calc((100vw - 1320px) / 2 + 16px)); }
.sp-copy { display: grid; gap: 1.25rem; justify-items: start; min-width: 0; }
.sp-copy .bb-lede { max-width: 46ch; }
.sp-word { margin: 0; display: grid; color: var(--navy); }
.sp-word span { display: block; font: 900 clamp(4rem, 8.4vw, 8.6rem)/.84 'Archivo CT', 'Archivo', var(--f-display) !important; font-stretch: 62% !important; text-transform: uppercase !important; opacity: 0; transform: translateX(-30px); animation: bbUp .8s cubic-bezier(.2,.7,.2,1) forwards; }
.sp-word span:nth-child(2) { animation-delay: .1s; color: transparent; -webkit-text-stroke: 2.5px var(--navy); }
.sp-right { min-width: 0; position: relative; }
.sp-right figure { margin: 0; position: relative; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 14px 34px rgba(17,24,39,.10); opacity: 0; transform: translateY(20px); animation: bbUp .7s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(.2s + var(--k) * .1s); }
.sp-right figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-right figcaption { position: absolute; left: 10px; bottom: 10px; background: rgba(255,255,255,.95); border-radius: 999px; padding: .38rem .7rem; font-size: .74rem; font-weight: 600; box-shadow: 0 4px 12px rgba(17,24,39,.1); }

/* wholesale: 2 x 2 tiles that slowly swap photos */
.ws-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ws-grid figure { aspect-ratio: 4 / 3; }
.ws-grid img { position: absolute; inset: 0; }
.ws-grid img.b { opacity: 0; animation: wsSwap 12s ease-in-out infinite; animation-delay: calc(2s + var(--k) * 1.5s); }
@keyframes wsSwap { 0%, 38% { opacity: 0; } 48%, 88% { opacity: 1; } 98%, 100% { opacity: 0; } }

/* transfers: one tall tile and three small */
.tr-grid { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 12px; height: min(60vh, 560px); }
.tr-grid figure:first-child { grid-row: 1 / 4; }
.tr-grid img { object-position: 50% 35%; }

/* about: Chip standing on the right */
.ab-chip { position: relative; width: min(100%, 440px); margin: 0 auto; opacity: 0; transform: translateY(20px); animation: bbUp .9s .2s cubic-bezier(.2,.7,.2,1) forwards; }
.ab-chip img { width: 100%; height: auto; display: block; filter: drop-shadow(0 24px 22px rgba(17,24,39,.14)); }
.ab-chip .bb-tag { animation-delay: var(--d); }

@media (max-width: 900px) {
  .sp-in { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; min-height: 0; padding-block: 1.75rem 2.5rem; }
  .sp-word { display: flex; flex-wrap: wrap; gap: 0 .2em; }
  .sp-word span { font-size: 15vw; }
  .tr-grid { height: 92vw; }
  .ab-chip { width: min(72%, 340px); }
  .ab-chip .bb-tag { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sp-word span, .sp-right figure, .ab-chip { animation: none; opacity: 1; transform: none; } .ws-grid img.b { animation: none; } }
.sp .sw-chips { display: flex !important; position: static !important; transform: none !important; }
.ab-chip { width: auto; height: min(calc(100vh - 230px), 600px); }
.ab-chip img { height: 100%; width: auto; margin: 0 auto; }
@media (max-width: 900px) { .ab-chip { height: auto; width: min(72%, 340px); } .ab-chip img { width: 100%; height: auto; } }
.sp .sw-chips { padding: 0 !important; }
.ab-chip .bb-tag.r { transform: translate(-60%, -50%); }

/* ---- Transfers slides ---- */
.hb-photo { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity .7s ease; }
.hb-photo img { position: absolute; left: 50%; bottom: 0; height: 88%; width: auto; max-width: none; transform: translate(-50%, 4%); transition: transform .9s cubic-bezier(.2,.7,.2,1); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
.hb-slide.on .hb-photo { opacity: 1; transition-delay: .15s; }
.hb-slide.on .hb-photo img { transform: translate(-50%, 0); }
.hb-cards { position: absolute; right: max(16px, calc((100vw - 1320px) / 2 + 16px)); top: 6%; bottom: 6%; width: min(52%, 680px); z-index: 1; }
.hb-cards figure { position: absolute; top: 0; bottom: 0; aspect-ratio: 620 / 827; margin: 0; border-radius: 10px; overflow: hidden; box-shadow: 0 24px 50px rgba(17,24,39,.22); opacity: 0; transition: opacity .5s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.hb-cards figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hb-cards figure:nth-child(1) { left: 0; transform: rotate(-2deg) translateX(30px); z-index: 2; }
.hb-cards figure:nth-child(2) { right: 0; transform: rotate(2deg) translateX(-30px); z-index: 1; }
.hb-slide.on .hb-cards figure { opacity: 1; transition-delay: calc(.15s + var(--k) * .12s); }
.hb-slide.on .hb-cards figure:nth-child(1) { transform: rotate(-5deg) translateY(2%); }
.hb-slide.on .hb-cards figure:nth-child(2) { transform: rotate(4deg) translateY(-1%); }
@media (max-width: 700px) {
  .hb-photo img { height: auto; width: 140%; }
  .hb-cards { left: 16px; right: 16px; width: auto; top: 30%; bottom: 3%; }
  .hb-cards figure:nth-child(1) { left: 6%; } .hb-cards figure:nth-child(2) { right: 6%; }
}
.hb-photo img { height: 78%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, transparent 0, #000 10%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, transparent 0, #000 10%); mask-composite: intersect; }
.hb-left.hb-small .hb-word { max-width: 42%; }
@media (max-width: 700px) { .hb-photo img { height: auto; width: 128%; } }
@media (max-width: 700px) { .hb-left.hb-small .hb-word { max-width: none; left: 16px; right: 16px; justify-content: flex-start; font-size: 11.5vw; } }
/* stacked banner words: size by screen height too, never wrap into a second column */
@media (min-width: 701px) {
  .hb-left .hb-word { flex-wrap: nowrap; font-size: min(13vw, 13rem, calc(max(440px, min(100vh - 290px, 640px)) / 2.75)); }
  .hb-left.hb-small .hb-word { flex-wrap: wrap; font-size: min(8.6vw, 8.6rem, calc(max(440px, min(100vh - 290px, 640px)) / 2.2)); }
}
/* Any piece. Any print: tall hoodie, two on top, three below */
.hb-mosaic { grid-template-columns: 1.3fr repeat(6, minmax(0, 1fr)); grid-template-rows: 1fr 1fr; gap: 8px; }
.hb-mosaic figure:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
.hb-mosaic figure:nth-child(2) { grid-column: 2 / 5; grid-row: 1; }
.hb-mosaic figure:nth-child(3) { grid-column: 5 / 8; grid-row: 1; }
.hb-mosaic figure:nth-child(4) { grid-column: 2 / 4; grid-row: 2; }
.hb-mosaic figure:nth-child(5) { grid-column: 4 / 6; grid-row: 2; }
.hb-mosaic figure:nth-child(6) { grid-column: 6 / 8; grid-row: 2; }
.hb-mosaic img { object-position: 50% 40%; }
.hb-mosaic { grid-template-columns: 4fr repeat(6, minmax(0, 1fr)); } .hb-mosaic figure:nth-child(1) img { object-position: 50% 45%; }

/* ---- Shop Blanks lookbook row ---- */
.lb { background: #fff; padding: 3.5rem 0 1rem; }
.lb-head { max-width: 1320px; margin: 0 auto 1.6rem; padding: 0 16px; display: flex; justify-content: space-between; align-items: end; gap: 1rem 3rem; flex-wrap: wrap; }
.lb-head h2 { margin: .7rem 0 0; font: 900 clamp(2.6rem, 5vw, 4.4rem)/.88 'Archivo CT', 'Archivo', var(--f-display) !important; font-stretch: 62% !important; text-transform: uppercase !important; color: var(--navy); }
.lb-head p { color: var(--ink-2); max-width: 46ch; margin: 0; }
.lb-row { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(200px, 19vw, 260px); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 max(16px, calc((100vw - 1320px) / 2 + 16px)) 1.25rem; scrollbar-width: thin; }
.lb-row figure { margin: 0; scroll-snap-align: start; display: grid; gap: .6rem; }
.lb-row img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; border-radius: 10px; background: #f3f3f1; display: block; transition: transform .4s ease; }
.lb-row figure:hover img { transform: translateY(-4px); }
.lb-row figcaption b { display: block; font-weight: 700; font-size: .92rem; }
.lb-row figcaption span { color: var(--muted); font-size: .82rem; }
@media (max-width: 700px) { .lb { padding-top: 2.5rem; } .lb-row { grid-auto-columns: 62vw; } }
.lb-row { scroll-padding-inline: max(16px, calc((100vw - 1320px) / 2 + 16px)); }

/* ---- Brand Store Program ---- */
.bs-mock { position: relative; background: #fff; border-radius: 14px; box-shadow: 0 30px 60px rgba(17,24,39,.16); overflow: visible; opacity: 0; transform: translateY(20px); animation: bbUp .9s .2s cubic-bezier(.2,.7,.2,1) forwards; }
.bs-bar { display: flex; align-items: center; gap: 6px; padding: .7rem .9rem; border-bottom: 1px solid var(--line); background: #f7f7f5; border-radius: 14px 14px 0 0; }
.bs-bar i { width: 10px; height: 10px; border-radius: 50%; background: #dcdcd6; }
.bs-bar span { margin-left: .6rem; flex: 1; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .25rem .8rem; font: 500 .74rem/1 var(--f-mono); color: var(--muted); }
.bs-site { padding: 1rem 1.1rem 1.25rem; }
.bs-nav { display: flex; align-items: center; gap: 1rem; font-size: .74rem; color: var(--muted); }
.bs-nav b { font: 900 1.05rem/1 'Archivo CT', 'Archivo', var(--f-display); font-stretch: 62%; letter-spacing: .04em; color: #111; margin-right: auto; }
.bs-bag { background: #111; color: #fff; border-radius: 999px; padding: .2rem .55rem; }
.bs-hero { margin: .9rem 0; background: #111; color: #fff; border-radius: 8px; padding: 1.6rem 1rem; font: 900 clamp(1.6rem, 3vw, 2.4rem)/.9 'Archivo CT', 'Archivo', var(--f-display); font-stretch: 62%; text-transform: uppercase; }
.bs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bs-grid div { display: grid; gap: .25rem; font-size: .76rem; }
.bs-grid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; border-radius: 6px; background: #f3f3f1; }
.bs-grid span { color: var(--muted); }
.bs-mock .bb-tag { animation-delay: var(--d); }
.bs-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.bs-steps li { background: var(--sand); border-radius: 12px; padding: 1.4rem; display: grid; gap: .5rem; align-content: start; }
.bs-steps span { font: 500 .78rem/1 var(--f-mono); color: var(--muted); }
.bs-steps b { font-size: 1.05rem; }
.bs-steps p { color: var(--ink-2); font-size: .92rem; margin: 0; }
.bs-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
.bs-tier { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.75rem; display: grid; gap: 1rem; grid-template-rows: auto auto auto auto 1fr auto; }
.bs-tier.pop { border: 2px solid var(--navy); box-shadow: var(--shadow); }
.bs-pop { position: absolute; top: -12px; left: 1.5rem; background: var(--navy); color: #fff; font: 600 .7rem/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; padding: .4rem .7rem; border-radius: 999px; }
.bs-tier h3 { font-size: 1.6rem !important; margin: 0; }
.bs-tier .muted { margin: -.6rem 0 0; }
.bs-price b { font: 800 2.4rem/1 var(--f-display); letter-spacing: -.03em; }
.bs-price span { color: var(--muted); margin-left: .25rem; }
.bs-tier ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .4rem; color: var(--ink-2); font-size: .94rem; }
.bs-call { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center; background: var(--navy); color: #fff; border-radius: 16px; padding: 2.5rem; }
.bs-call .eyebrow { color: #b7c2d3 !important; }
.bs-call .s-title { color: #fff; margin: .5rem 0; }
.bs-call p { color: #d4dbe6; max-width: 56ch; }
.bs-call .btn.primary { background: #fff !important; border-color: #fff !important; color: var(--navy) !important; }
.bs-callout { padding-block: 3.5rem; }
@media (max-width: 1000px) { .bs-steps { grid-template-columns: 1fr 1fr; } .bs-tiers { grid-template-columns: 1fr; } .bs-call { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .bs-steps { grid-template-columns: 1fr; } .bs-mock .bb-tag { display: none; } .bs-call { padding: 1.75rem; } }
.bs-mock .bb-tag:not(.r) { transform: translate(-8%, -50%); }
@media (max-width: 1179px) { .nav .hide-sm, .nav .nav-main { display: none; } .nav { justify-content: flex-end; } .menu-btn { display: inline-flex; border: 1px solid var(--line-strong); } }
.nav .nav-main { padding-right: 1.25rem; }
@media (max-width: 1520px) { .nav .nav-main { gap: 1.05rem; } .nav .nav-main a { font-size: .86rem; } }
@media (max-width: 1320px) { .nav .nav-main { gap: .85rem; } .nav .nav-main a { font-size: .82rem; } }

/* ---- header: Get a quote always next to Bag ---- */
.nav .quote-btn { order: 0; }
@media (max-width: 520px) {
  .nav .quote-btn { display: inline-flex !important; padding: .5rem .7rem; font-size: .76rem; margin-left: .1rem; }
  .menu-btn { padding: .45rem .55rem; font-size: .76rem; }
  .brand-name { font-size: 1rem !important; }
  .brand-mark { width: 32px; height: 30px; }
  .nav a[data-nav="bag"] { padding: .4rem .3rem; }
}

/* ---- Get a quote page ---- */
.q-visual { position: relative; width: min(100%, 560px); margin: 0 auto; padding-bottom: 2.5rem; }
.q-photo { margin: 0 0 0 auto; width: 78%; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; box-shadow: 0 26px 50px rgba(17,24,39,.14); opacity: 0; transform: translateY(20px); animation: bbUp .9s .15s cubic-bezier(.2,.7,.2,1) forwards; }
.q-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.q-ticket { position: absolute; left: 0; bottom: 0; width: min(68%, 330px); background: #fff; border-radius: 12px; box-shadow: 0 20px 44px rgba(17,24,39,.18); padding: 1rem 1.1rem; font-size: .84rem; opacity: 0; transform: translateY(24px); animation: bbUp .8s .6s cubic-bezier(.2,.7,.2,1) forwards; }
.q-tk-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: .6rem; border-bottom: 1px dashed var(--line-strong); }
.q-tk-head b { font: 600 .82rem/1 var(--f-mono); }
.q-ok { background: #e3f1e8; color: #23683f; font-weight: 700; font-size: .7rem; padding: .3rem .55rem; border-radius: 999px; }
.q-ticket ul { list-style: none; margin: .5rem 0; padding: 0; display: grid; gap: .35rem; }
.q-ticket li { display: flex; justify-content: space-between; gap: 1rem; color: var(--ink-2); }
.q-ticket li span:last-child { color: var(--ink); font-weight: 600; }
.q-tk-foot { display: flex; justify-content: space-between; padding-top: .6rem; border-top: 1px dashed var(--line-strong); }
.q-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .q-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .q-steps { grid-template-columns: 1fr; } .q-ticket { width: 76%; } }

/* ---- Design studio section ---- */
.sd-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem 3rem; flex-wrap: wrap; margin-bottom: 2rem; }
.sd-head p { color: var(--ink-2); max-width: 46ch; margin: 0; }
.sd-word { margin: .7rem 0 0; display: flex; gap: .2em; color: var(--navy); }
.sd-word span { font: 900 clamp(3rem, 6.4vw, 6rem)/.86 'Archivo CT', 'Archivo', var(--f-display) !important; font-stretch: 62% !important; text-transform: uppercase !important; }
.sd-word span:nth-child(2) { color: transparent; -webkit-text-stroke: 2.5px var(--navy); }
.studio-sec .studio { margin-top: 0; gap: 1.75rem; }
.sd-canvas { position: relative; background: #fff; border-radius: 16px; padding: 14px; box-shadow: 0 24px 50px rgba(17,24,39,.10); }
.sd-canvas canvas { border-radius: 10px !important; display: block; }
.sd-badge { position: absolute; top: 26px; left: 26px; background: #fff; border-radius: 999px; padding: .35rem .7rem; font-size: .72rem; font-weight: 600; box-shadow: 0 4px 12px rgba(17,24,39,.1); display: inline-flex; align-items: center; gap: .4rem; }
.sd-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2f9e5c; box-shadow: 0 0 0 3px rgba(47,158,92,.2); }
.sd-panel { background: #fff; border-radius: 16px; padding: 1.5rem; border: 1px solid var(--line); gap: 0 !important; }
.sd-step { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.sd-step:first-child { padding-top: 0; }
.sd-n { width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .85rem; }
.sd-body { display: grid; gap: .9rem; min-width: 0; }
.sd-panel #sd-err { margin-top: 1rem; }
.sd-panel > .btn { margin-top: 1.1rem; width: 100%; }
.sd-panel > .fine { margin-top: .7rem; }
.sd-drop .input[type=file] { border-style: dashed; background: var(--sand); padding: 1rem; }
#sd-place { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sd-word { gap: .28em; }
@media (max-width: 400px) {
  .topbar .wrap { gap: .3rem; }
  .brand { gap: .35rem; }
  .brand-name { font-size: .92rem !important; }
  .brand-mark { width: 28px; height: 26px; }
  .nav { gap: 0; }
  .nav .quote-btn { padding: .45rem .55rem; font-size: .72rem; }
  .menu-btn { padding: .4rem .45rem; font-size: .72rem; }
  .nav a[data-nav="bag"] { font-size: .76rem; }
}
#kind-btns { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 460px) { #kind-btns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.q-short { display: none; }
@media (max-width: 520px) {
  .q-long { display: none; } .q-short { display: inline; }
  .nav .quote-btn { padding: .5rem .85rem; font-size: .8rem; }
  .brand-name { font-size: 1.05rem !important; } .brand-mark { width: 32px; height: 30px; }
  .nav a[data-nav="bag"] { font-size: .82rem; padding: .4rem .5rem; }
  .menu-btn { padding: .45rem .6rem; font-size: .8rem; }
  .topbar .wrap { gap: .6rem; } .nav { gap: .25rem; }
}
@media (max-width: 380px) { .brand-name { font-size: .95rem !important; } .brand-mark { width: 28px; height: 26px; } .topbar .wrap { gap: .35rem; } .nav { gap: .1rem; } .nav .quote-btn { padding: .45rem .65rem; font-size: .76rem; } .menu-btn { padding: .4rem .5rem; font-size: .76rem; } .nav a[data-nav="bag"] { padding: .4rem .35rem; } }

/* ---- phones: quote moves out of the header ---- */
.drawer-quote, .fab-quote { display: none; }
@media (max-width: 1179px) {
  .drawer .drawer-quote { display: flex; justify-content: center; color: #fff !important; border-bottom: 0 !important; margin: .25rem 0 .5rem; padding: .85rem 1rem !important; }
}
@media (max-width: 520px) {
  .nav .quote-btn { display: none !important; }
  .brand-name { font-size: 1.2rem !important; } .brand-mark { width: 36px; height: 33px; }
  .nav a[data-nav="bag"] { font-size: .9rem; padding: .45rem .6rem; }
  .menu-btn { padding: .5rem .8rem; font-size: .88rem; }
  .fab-quote { display: inline-flex; position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 30; align-items: center; gap: .45rem; background: var(--navy); color: #fff; text-decoration: none; font-weight: 600; font-size: .9rem; padding: .8rem 1.1rem; border-radius: 999px; box-shadow: 0 10px 24px rgba(16,41,67,.32); }
  .fab-quote::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #7fd1a0; box-shadow: 0 0 0 3px rgba(127,209,160,.3); }
  .fab-quote[hidden] { display: none; }
}
/* phone menu: scroll inside the menu instead of getting stuck under the sticky header */
.drawer { max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); overflow-y: auto; overscroll-behavior: contain; }
.drawer .wrap { padding-bottom: 1.5rem; }
/* Phone menu: fixed under the header so it always opens on screen (no page lock, which broke the pinned header on phones). */
.drawer:not([hidden]) { position: fixed; left: 0; right: 0; z-index: 60; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 18px 40px rgba(15,23,42,.18); }
html.drawer-open .drawer { overscroll-behavior: contain; }
@media (max-width: 700px) { .hb-word { padding: 0 12px; box-sizing: border-box; } }
@media (max-width: 700px) {
  .hb-group, .hb-left .hb-group { width: 100% !important; right: auto !important; left: 50% !important; height: auto; }
  .hb-slide.on .hb-group { transform: translate(-50%, 0) !important; }
  .hb-group { transform: translate(-50%, 6%) !important; }
  .hb-slide.on .hb-group { transform: translate(-50%, 0) !important; }
  .hb-stage { aspect-ratio: 1 / .78; }
}

/* ---- phones: banner slides stack words above the picture (no overlap) ---- */
@media (max-width: 700px) {
  .hb-stage { aspect-ratio: auto !important; height: auto; min-height: 0; display: grid; }
  .hb-slide { position: relative; inset: auto; grid-area: 1 / 1; display: flex; flex-direction: column; visibility: hidden; }
  .hb-slide.on { visibility: visible; }
  .hb-word, .hb-left .hb-word, .hb-left.hb-small .hb-word { position: relative !important; inset: auto !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; max-width: none !important; padding: 14px 16px 10px !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; align-items: baseline; gap: 0 .2em !important; text-align: center; }
  .hb-slide .hb-group, .hb-slide .hb-photo, .hb-slide .hb-mosaic, .hb-slide .hb-cards { position: relative !important; inset: auto !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: 100% !important; margin: 0 auto; }
  .hb-slide .hb-group { height: auto !important; aspect-ratio: auto !important; transform: translateY(6%) !important; }
  .hb-slide.on .hb-group { transform: none !important; }
  .hb-slide .hb-group img { height: auto; max-height: 62vw; width: 100%; object-fit: contain; }
  .hb-slide .hb-group.tall img { max-height: 92vw; }
  .hb-slide .hb-photo img { position: relative; left: auto; transform: none !important; width: 100%; height: auto; }
  .hb-slide .hb-mosaic { height: 108vw; padding: 0 16px 12px; box-sizing: border-box; }
  .hb-slide .hb-cards { height: 88vw; margin: 0 16px 12px; width: calc(100% - 32px) !important; }
}

/* ---- phones: picture first on these banners ---- */
@media (max-width: 900px) {
  .sp-bs .sp-right, .sp-quote .sp-right { order: -1; }
  .sp-bs .sp-in, .sp-quote .sp-in { padding-top: 1.5rem; }
}
@media (max-width: 800px) {
  .sw { display: flex !important; flex-direction: column; }
  .sw .sw-pic { order: -1; }
}
@media (max-width: 700px) {
  .hb-slide .hb-photo { flex: 1; overflow: hidden; display: flex; align-items: flex-end; min-height: 70vw; }
  .hb-slide .hb-photo img { height: 100%; width: 100%; object-fit: cover; object-position: 50% 70%; -webkit-mask-image: none; mask-image: none; }
  .hb-slide .hb-group { flex: 1; display: flex; align-items: flex-end; }
}
/* forced line break in banner words */
.hb-br { display: block; flex-basis: 100%; height: 0; }
/* phones: stage height follows the active slide (no empty space) */
@media (max-width: 700px) {
  .hb-slide:not(.on) { position: absolute !important; left: 0; right: 0; top: 0; }
  .hb-slide .hb-group { flex: none; }
  .hb-slide .hb-group.tall img { max-height: 80vw; }
}
/* schools: words on top on phones */
@media (max-width: 800px) { .sw .sw-pic { order: 0; } }
/* wholesale kids tile: two rows */
.ws-grid img.b { object-position: 50% 40%; }
.hb-br { display: none; }
@media (max-width: 700px) { .hb-br { display: block; } }

/* ---- Build a Brand: two-slide banner ---- */
.bb2 { display: grid; position: relative; }
.bb2-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s .5s; }
.bb2-slide.on { opacity: 1; visibility: visible; transition: opacity .5s ease; }
.bb2-slide .bb2-words span, .bb2-slide .bb2-models { animation: none !important; opacity: 0; transition: opacity .5s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.bb2-slide .bb2-words span { transform: translateX(-30px); }
.bb2-slide .bb2-models { transform: translateY(24px); }
.bb2-slide.on .bb2-words span, .bb2-slide.on .bb2-models { opacity: 1; transform: none; }
.bb2-slide.on .bb2-words span:nth-child(2) { transition-delay: .1s; }
.bb2-slide.on .bb2-models { transition-delay: .2s; }
.bb2-slide .bb-tag { animation: none !important; opacity: 0; scale: .7; transition: opacity .35s ease, scale .45s cubic-bezier(.2,.7,.2,1.4); }
.bb2-slide.on .bb-tag { opacity: 1; scale: 1; }
.bb2-slide.on .bb-tag.t1 { transition-delay: .9s; } .bb2-slide.on .bb-tag.t2 { transition-delay: 1.05s; } .bb2-slide.on .bb-tag.t3 { transition-delay: 1.2s; } .bb2-slide.on .bb-tag.t4 { transition-delay: 1.35s; }
.bb2-kids .bb2-models { width: min(100%, 720px); align-self: end; padding-bottom: 2.5rem; }
.bb2-tabs { position: absolute; left: max(16px, calc((100vw - 1320px) / 2 + 16px)); bottom: 1.25rem; z-index: 4; display: flex; gap: .25rem; }
.bb2-tabs [role="tab"] { position: relative; display: grid; gap: .2rem; text-align: left; background: none; border: 0; padding: .5rem .9rem .85rem 0; margin-right: 1rem; cursor: pointer; color: var(--muted); min-width: 120px; }
.bb2-tabs .n { font: 500 .7rem/1 var(--f-mono); }
.bb2-tabs .t { font-weight: 600; font-size: .86rem; }
.bb2-tabs [role="tab"] i { position: absolute; left: 0; right: .9rem; bottom: .3rem; height: 2px; background: #dcd9d0; overflow: hidden; }
.bb2-tabs [role="tab"] i::after { content: ""; position: absolute; inset: 0; background: var(--navy); transform: scaleX(0); transform-origin: left; }
.bb2-tabs [aria-selected="true"] { color: var(--ink); }
.bb2-tabs [aria-selected="true"] i::after { transform: scaleX(1); }
.bb2-tabs .run i::after { transform: scaleX(0); animation: hbRun 7s linear forwards; }
@media (max-width: 900px) {
  .bb2-tabs { position: relative; left: auto; bottom: auto; grid-area: 2 / 1; padding: .25rem 16px .75rem; }
  .bb2-slide:not(.on) { position: absolute; inset: 0 0 auto 0; }
  .bb2-kids .bb2-models { padding-bottom: 0; }
}
@media (max-width: 560px) { .bb2-kids .bb-tag.t3, .bb2-kids .bb-tag.t4 { display: none; } }
.hb-group.tall { aspect-ratio: 890 / 1038; height: 94%; }
@media (min-width: 701px) { .hb-left .hb-group.tall { right: max(9%, calc((100vw - 1320px) / 2 + 9%)) !important; } }

/* V5: hero slide arrows (replace numbered tabs and pause) */
.hb-nav { display: flex; align-items: center; gap: .65rem; border-left: 1px solid var(--line); padding-left: 1.5rem; }
.hb-arrow { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.hb-arrow:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.hb-arrow:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.hb-dots { display: flex; gap: .35rem; }
.hb-dots i { width: 6px; height: 6px; border-radius: 99px; background: var(--line); transition: width .25s, background .25s; }
.hb-dots i.on { width: 18px; background: var(--navy); }
@media (max-width: 900px) { .hb-nav { border-left: 0; padding-left: 0; } }
@media (max-width: 1100px) { .hb-nav { order: -1; justify-content: flex-end; } }
.lb-ctas { display: flex; flex-wrap: wrap; gap: .6rem; max-width: 1320px; margin: 0 auto; padding: 1rem 16px 2.5rem; }
.hb-msg h1.hb-line { text-wrap: wrap; max-width: 52ch; }
html.drawer-open .fab-quote { display: none !important; }
.lanes > .lane:only-child { grid-column: 1 / -1; }
.lanes > .lane:only-child > .btn { justify-self: start; width: auto; display: inline-flex; }
.path { cursor: pointer; color: inherit; }
.path:hover { border-color: var(--line-strong, #9aa3af); }
.path.picked { border-color: var(--navy); box-shadow: 0 0 0 2px var(--navy) inset, 0 10px 28px rgba(15,23,42,.10); background: #fff; }
.path:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.path a.go { color: var(--navy); text-decoration: none; justify-self: start; }
.path a.go:hover { text-decoration: underline; text-underline-offset: 3px; }

/* About: Chip's facts and our story */
.road.chip-facts > div { grid-template-columns: 9.5rem minmax(0, 1fr); align-items: baseline; }
.chip-facts b { font-weight: 600; }
.our-story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem 4rem; align-items: start; }
.our-story .os-head { position: sticky; top: 110px; }
.our-story .os-body { display: grid; gap: 1.1rem; font-size: 1.06rem; line-height: 1.7; color: var(--ink-2); max-width: 62ch; }
.our-story .os-body p { margin: 0; }
.os-list { margin: 0; padding: 0; list-style: none; display: grid; gap: .55rem; }
.os-list li { position: relative; padding-left: 1.4rem; color: var(--ink); font-weight: 500; }
.os-list li::before { content: ""; position: absolute; left: 0; top: .7em; width: .7rem; height: 2px; background: var(--navy); }
.os-sign { font-weight: 600; color: var(--ink); }
@media (max-width: 900px) { .our-story { grid-template-columns: 1fr; } .our-story .os-head { position: static; } }
.our-story .os-head .eyebrow { display: block; margin-bottom: 1rem; }
.our-story { column-gap: 5rem; }
.os-signature { display: grid; gap: .2rem; margin-top: 1rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.os-signature .os-script { font-style: italic; color: var(--muted); font-size: 1rem; }
.os-signature b { font: 600 1.45rem/1.2 var(--f-display); color: var(--navy); letter-spacing: -.01em; }
.os-signature span:last-child { font-size: .92rem; color: var(--muted); }
.our-story .os-head .s-title { margin-top: 1.1rem !important; }

/* Owner dashboard: pinned tabs, supplier notes, stock labels, cost row, profit calculator */
.admin .adm-tabs { position: sticky; top: var(--tb-h, 76px); z-index: 15; background: #fff; padding-top: .35rem; margin-top: -.35rem; }
.sup-note { font-weight: 400; font-size: .82em; color: var(--muted); }
.stock-label { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .9rem 0 .4rem; }
.stock-label .lbl { font-size: .78rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-right: .3rem; }
.stock-label .chip { cursor: pointer; font: 500 .85rem/1 var(--f-body); padding: .5rem .8rem; border-radius: 99px; border: 1px solid var(--line); background: #fff; color: var(--ink); }
.stock-label .chip[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.cost-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; margin-top: .4rem; }
.cost-row .field { max-width: 190px; }
.cost-row .promo-check { padding-bottom: .65rem; }
.cost-row .cost-note { font-size: .84rem; flex: 1 1 260px; padding-bottom: .5rem; }
.calc { margin-top: 1rem; border: 1px solid var(--line); border-radius: 10px; background: #fafbfc; }
.calc > summary { cursor: pointer; padding: .8rem 1rem; font-weight: 600; color: var(--navy); }
.calc[open] > summary { border-bottom: 1px solid var(--line); }
.calc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .75rem; padding: 1rem; }
.calc-pair { display: grid; grid-template-columns: .8fr 1.4fr; gap: .4rem; }
.calc-grid .field:has(.calc-pair) { grid-column: span 2; }
.calc-out { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; margin: 0; padding: 0 1rem 1rem; }
.calc-out div { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: .6rem .75rem; }
.calc-out dt { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.calc-out dd { margin: .2rem 0 0; font-weight: 600; font-size: 1.05rem; }
.calc-out .big dd { font-size: 1.3rem; }
.calc-note { padding: 0 1rem 1rem; margin: 0; font-size: .86rem; }
.deco-panel { margin-bottom: 1rem; }
.deco-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; }
.mascot.mascot-belly { width: 300px; max-width: 80%; height: auto; }
.about-grid .story .mascot.mascot-belly { width: 300px; max-width: 80%; margin-bottom: .75rem; }

/* About page v2 */
.ab-pillars .pillar { grid-template-rows: auto auto auto 1fr auto; background: var(--sand); }
.ab-pillars .pillar:hover { transform: none; box-shadow: none; background: var(--sand); }
.ab-pillars .pillar h3 { font-size: 1.55rem !important; }
.ab-pillars .pillar a.go { text-decoration: none; justify-self: start; }
.ab-pillars .pillar a.go:hover { text-decoration: underline; text-underline-offset: 3px; }
.hww { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.hww li { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 1.4rem 1.5rem; display: grid; gap: .45rem; align-content: start; }
.hww .n { font: 500 .78rem/1 var(--f-mono); color: var(--muted); }
.hww b { font-size: 1.12rem; color: var(--ink); }
.hww p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.hww-fine { list-style: none; margin: 1.5rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid var(--line); display: grid; gap: .35rem; font-size: .88rem; color: var(--muted); }
.chip-facts-wrap .cf-label { margin: 0 0 .75rem; }
.say-hi .hi-card { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2rem 3rem; align-items: center; background: var(--sand); border-radius: 16px; padding: clamp(1.75rem, 4vw, 3rem); }
@media (max-width: 900px) { .hww { grid-template-columns: 1fr; } .say-hi .hi-card { grid-template-columns: 1fr; } }
.ab-pillars .pillar ul { align-content: start; align-self: start; }

/* Homepage v2: store programs band, blank-to-label, why strip */
.store-band .bb-kicker { color: rgba(255,255,255,.75); }
.store-band .bb-kicker::before { background: rgba(255,255,255,.6); }
.sb-big { margin: .9rem 0 0; font: 900 clamp(2.6rem, 6.2vw, 5.4rem)/.9 'Archivo CT', 'Archivo', var(--f-display) !important; font-stretch: 62% !important; text-transform: uppercase !important; letter-spacing: 0 !important; color: #fff; display: grid; }
.sb-big .o { color: transparent; -webkit-text-stroke: 2px #fff; }
.store-band .sb-lede { color: rgba(255,255,255,.82); max-width: 56ch; margin-top: 1.1rem; }
.sp-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.75rem; }
.sp-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); border-radius: 14px; padding: 1.6rem; display: grid; gap: .55rem; align-content: start; }
.sp-card h3 { color: #fff; font-size: 1.5rem; margin: 0; }
.sp-card .for { color: rgba(255,255,255,.7); font-size: .9rem; margin: 0; }
.sp-card p { color: rgba(255,255,255,.88); margin: 0; }
.sp-card .min { margin-top: .5rem; padding-top: .75rem; border-top: 1px solid rgba(255,255,255,.18); font-weight: 600; font-size: .9rem; color: #fff; }
.btn.on-dark { background: #fff; color: var(--navy); border-color: #fff; }
.btn.on-dark:hover { background: #eef1f6; }
.btn.ghost-light { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.55); }
.btn.ghost-light:hover { border-color: #fff; }
.btl-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.why { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.why li { display: grid; gap: .3rem; padding: 1.1rem 1.25rem; border-left: 3px solid var(--navy); background: var(--sand); border-radius: 0 10px 10px 0; }
.why b { font-size: 1.02rem; color: var(--ink); }
.why span { font-size: .9rem; color: var(--ink-2); }
.why-strip { padding-block: 3rem; }
.cta-big { font: 900 clamp(2.8rem, 6vw, 5rem)/.9 'Archivo CT', 'Archivo', var(--f-display) !important; font-stretch: 62% !important; text-transform: uppercase !important; color: var(--navy); }
@media (max-width: 900px) { .sp-cards, .why { grid-template-columns: 1fr; } .btl-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .btl-steps { grid-template-columns: 1fr; } }

/* Homepage start cards: lift and highlight on hover */
.ab-pillars.lift-cards .pillar { border: 1px solid transparent; transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease; }
.ab-pillars.lift-cards .pillar:hover, .ab-pillars.lift-cards .pillar:focus-within { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(18, 32, 64, .14); background: #fff; border-color: var(--navy); }
@media (prefers-reduced-motion: reduce) { .ab-pillars.lift-cards .pillar:hover, .ab-pillars.lift-cards .pillar:focus-within { transform: none; } }

/* Store Programs cards: lift and highlight on hover */
.sp-card { transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease; }
.sp-card:hover, .sp-card:focus-within { transform: translateY(-6px); background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.75); box-shadow: 0 16px 34px rgba(0,0,0,.28); }
@media (prefers-reduced-motion: reduce) { .sp-card:hover, .sp-card:focus-within { transform: none; } }

/* Store Programs minimum line: smaller, regular weight, italic */
.sp-card .min { font-weight: 400; font-style: italic; font-size: .8rem; color: rgba(255,255,255,.82); }

.min-note { margin: .75rem 0 0; font-size: .88rem; font-style: italic; color: var(--ink-2); }

/* Brand Stores page v2 */
.bs-who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.bs-who-card { background: var(--sand); border-radius: 12px; padding: 1.6rem; border: 1px solid transparent; transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease; }
.bs-who-card:hover { transform: translateY(-6px); background: #fff; border-color: var(--navy); box-shadow: 0 14px 30px rgba(18, 32, 64, .14); }
.bs-who-card h3 { font-size: 1.4rem; margin: 0 0 .5rem; }
.bs-who-card p { margin: 0; color: var(--ink-2); }
.bs-steps.bs-steps-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bs-incl { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
.bs-incl li { padding: .85rem 0 .85rem 1.6rem; border-top: 1px solid var(--line-strong); position: relative; color: var(--ink-2); }
.bs-incl li::before { content: ''; position: absolute; left: .2rem; top: 1.25rem; width: .55rem; height: .55rem; border-radius: 50%; background: var(--navy); }
.bs-details { margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
.bs-details > div { padding: 1.1rem 0; border-top: 1px solid var(--line-strong); }
.bs-details dt { font-weight: 600; color: var(--navy); margin-bottom: .35rem; }
.bs-details dd { margin: 0; color: var(--ink-2); font-size: .95rem; }
@media (prefers-reduced-motion: reduce) { .bs-who-card:hover { transform: none; } }
@media (max-width: 900px) { .bs-who, .bs-steps.bs-steps-6 { grid-template-columns: 1fr; } .bs-incl, .bs-details { grid-template-columns: 1fr; } }
.s.alt .bs-steps li { background: #fff; }

/* Brand Stores step cards: lift and highlight on hover */
.bs-steps li { border: 1px solid transparent; transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease; }
.bs-steps li:hover { transform: translateY(-6px); background: #fff; border-color: var(--navy); box-shadow: 0 14px 30px rgba(18, 32, 64, .14); }
@media (prefers-reduced-motion: reduce) { .bs-steps li:hover { transform: none; } }

/* Build a Brand v2 */
.bb-svcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.bb-svc { background: var(--sand); border-radius: 12px; padding: 1.75rem; display: grid; grid-template-rows: auto auto auto auto 1fr auto auto; gap: .75rem; align-content: start; border: 1px solid transparent; transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease; }
.pl-opts .bb-svc { grid-template-rows: auto auto 1fr; }
.bb-svc:hover { transform: translateY(-6px); background: #fff; border-color: var(--navy); box-shadow: 0 14px 30px rgba(18, 32, 64, .14); }
.bb-svc .pn { font: 500 .78rem/1 var(--f-mono); color: var(--muted); }
.bb-svc h3 { font-size: 1.45rem; margin: 0; }
.bb-svc .for { font-weight: 600; color: var(--navy); margin: 0; font-size: .95rem; }
.bb-svc p { margin: 0; color: var(--ink-2); }
.bb-svc ul { list-style: none; margin: 0; padding: 0; align-self: start; }
.bb-svc li { padding: .55rem 0; border-top: 1px solid var(--line-strong); font-size: .93rem; color: var(--ink-2); }
.bb-svc .min { font-size: .82rem; font-style: italic; color: var(--ink-2); padding-top: .5rem; }
.bb-svc .go { font-weight: 600; font-size: .92rem; color: var(--navy); text-decoration: none; justify-self: start; }
.bb-svc .go:hover { text-decoration: underline; text-underline-offset: 3px; }
.s.alt .bb-svc { background: #fff; }
.bb-compare { width: 100%; border-collapse: collapse; margin-top: 1.5rem; background: #fff; border-radius: 12px; overflow: hidden; }
.bb-compare th, .bb-compare td { text-align: left; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line-strong); vertical-align: top; }
.bb-compare th { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.bb-compare tr:last-child td { border-bottom: 0; }
.bb-note { margin: 1.25rem 0 0; max-width: 46rem; color: var(--ink-2); }
.lbl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: 1.25rem; }
.lbl-grid p { margin: 0; color: var(--ink-2); border-top: 2px solid var(--navy); padding-top: 1rem; }
@media (prefers-reduced-motion: reduce) { .bb-svc:hover { transform: none; } }
@media (max-width: 900px) { .bb-svcs, .lbl-grid { grid-template-columns: 1fr; } .bb-compare th, .bb-compare td { padding: .75rem; font-size: .9rem; } }

/* Concept imagery note */
.concept-note { position: absolute; left: .75rem; bottom: .6rem; margin: 0; padding: .25rem .55rem; border-radius: 6px; background: rgba(255,255,255,.82); color: #3b4252; font-size: .7rem; font-style: italic; line-height: 1.3; max-width: calc(100% - 1.5rem); z-index: 2; }
.bb2-models { position: relative; }
.concept-line { margin: 1rem 0 0; font-size: .8rem; font-style: italic; color: var(--muted); }
/* What we make v2 */
.mk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.mk-card { background: #fff; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); display: grid; grid-template-rows: auto auto 1fr; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.mk-card:hover { transform: translateY(-6px); border-color: var(--navy); box-shadow: 0 14px 30px rgba(18, 32, 64, .14); }
.mk-photo { aspect-ratio: 380 / 600; overflow: hidden; background: #e9e8e4; }
.mk-photo img, .mk-details img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-details { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: #fff; padding-top: 3px; }
.mk-details img { aspect-ratio: 190 / 147; }
.mk-body { padding: 1.1rem 1.15rem 1.25rem; display: grid; grid-template-rows: auto auto 1fr auto; gap: .45rem; }
.mk-body h3 { font-size: 1.05rem; letter-spacing: .02em; text-transform: uppercase; margin: 0; }
.mk-fab { margin: 0; font-size: .85rem; font-weight: 600; color: var(--navy); }
.mk-body p { margin: 0; font-size: .88rem; color: var(--ink-2); }
.mk-w { border-top: 1px solid var(--line-strong); padding-top: .6rem; margin-top: .4rem; display: grid; gap: .2rem; }
.mk-w span { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.mk-w b { font-weight: 500; font-size: .95rem; }
.beyond { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem; margin-top: 2.5rem; align-items: start; }
.beyond h3 { font-size: 1.5rem; margin: .4rem 0 .6rem; }
.beyond p { color: var(--ink-2); margin: 0 0 .6rem; }
.fine-i { font-size: .85rem; font-style: italic; }
.fab-tbl { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .mk-card:hover { transform: none; } }
@media (max-width: 1000px) { .mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .beyond { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .mk-grid { grid-template-columns: 1fr; } }

/* Smaller page heroes (not the homepage) */
.bh-wrap { min-height: min(58vh, 540px); }
.bh-copy { padding-top: 3rem; padding-bottom: 3rem; }
.bh-copy h1 { font-size: clamp(2.2rem, 3.8vw, 3.4rem) !important; }
.big-hero.home .bh-wrap { min-height: min(84vh, 820px); }
.bh-trio { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; background: #fff; }
.bh-trio img { position: static; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
@media (max-width: 900px) { .bh-photo { aspect-ratio: 4 / 3; } .bh-photo.trio { aspect-ratio: 3 / 1.6; } }
/* More room above Beyond cotton */
.beyond { margin-top: 4.5rem; padding-top: 3rem; border-top: 1px solid var(--line-strong); }

/* Spirit Stores page */
.ss-price { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2.5rem; align-items: start; }
.ss-price p { color: var(--ink-2); margin: .8rem 0 0; }
.ss-fees { margin-top: 0; }
.ss-fees td:last-child { text-align: right; }
.ss-fees th:last-child { text-align: right; }
.ss-fees b.free { color: var(--navy); letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 900px) { .ss-price { grid-template-columns: 1fr; } }
.s.alt .bs-who-card { background: #fff; }

/* Custom Print v2 */
.cp-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.cp-m { background: var(--sand); border-radius: 12px; overflow: hidden; border: 1px solid transparent; transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease; }
.cp-m:hover { transform: translateY(-6px); background: #fff; border-color: var(--navy); box-shadow: 0 14px 30px rgba(18, 32, 64, .14); }
.cp-m-img { position: relative; aspect-ratio: 602 / 512; overflow: hidden; background: #1b2235; }
.cp-m-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-m-body { padding: 1.25rem 1.4rem 1.5rem; display: grid; gap: .5rem; }
.cp-m-body h3 { font-size: 1.35rem; margin: 0; }
.cp-m-body p { margin: 0; color: var(--ink-2); }
.cp-m-body .min { font-size: .85rem; font-style: italic; font-weight: 600; color: var(--navy); }
.cp-links { margin-top: 1.5rem; display: grid; gap: .4rem; }
.cp-links p { margin: 0; color: var(--ink-2); }
.cp-tiers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.cp-tier { background: #fff; border-radius: 12px; padding: 1.4rem; border: 1px solid transparent; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.cp-tier:hover { transform: translateY(-6px); border-color: var(--navy); box-shadow: 0 14px 30px rgba(18, 32, 64, .14); }
.cp-tier b { display: block; font-size: 2rem; letter-spacing: -.02em; color: var(--navy); line-height: 1.1; }
.cp-tier span { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.cp-tier p { margin: .6rem 0 0; color: var(--ink-2); font-size: .93rem; }
.cp-note { margin: 1rem 0 0; font-size: .88rem; font-style: italic; color: var(--ink-2); max-width: 52rem; }
.cp-build { margin-top: 2.5rem; }
.sd-note { font-size: .85rem; font-style: italic; color: var(--ink-2); margin-top: .5rem; }
@media (prefers-reduced-motion: reduce) { .cp-m:hover, .cp-tier:hover { transform: none; } }
@media (max-width: 900px) { .cp-methods { grid-template-columns: 1fr; } .cp-tiers { grid-template-columns: 1fr 1fr; } }
.cp-m-img .concept-note { top: .6rem; bottom: auto; }

/* Hero slide with a single framed photo (embroidery) */
.hb-pic { position: absolute; right: max(16px, calc((100vw - 1320px) / 2 + 16px)); top: 7%; bottom: 7%; width: min(56%, 780px); z-index: 1; border-radius: 12px; overflow: hidden; box-shadow: 0 12px 28px rgba(17,24,39,.12); opacity: 0; transform: translateY(24px) scale(.98); transition: opacity .5s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.hb-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hb-slide.on .hb-pic { opacity: 1; transform: none; transition-delay: .15s; }
@media (max-width: 700px) {
  .hb-slide .hb-pic { position: relative !important; inset: auto !important; width: calc(100% - 32px) !important; height: auto; aspect-ratio: 3 / 2; margin: 0 16px 12px; }
}

/* Leave a clear gap between the big words and the photo grid on the Custom slides */
@media (min-width: 701px) {
  .hb-left.hb-small:has(.hb-mosaic) .hb-word, .hb-left.hb-small:has(.hb-pic) .hb-word { font-size: min(6.2vw, 6.8rem); max-width: 36%; }
}
@media (max-width: 700px) {
  .hb-left.hb-small:has(.hb-mosaic) .hb-word, .hb-left.hb-small:has(.hb-pic) .hb-word { font-size: 16vw !important; }
}

/* About page: cards lift and highlight on hover */
.ab-pillars .pillar, .hww li, .path { border: 1px solid transparent; transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease; }
.hww li { border-color: var(--line); }
.ab-pillars .pillar:hover, .ab-pillars .pillar:focus-within, .hww li:hover, .path:hover { transform: translateY(-6px); background: #fff; border-color: var(--navy); box-shadow: 0 14px 30px rgba(18, 32, 64, .14); }
@media (prefers-reduced-motion: reduce) { .ab-pillars .pillar:hover, .hww li:hover, .path:hover { transform: none; } }

/* Transfers v2 */
.tr-types { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.s.alt .cp-m { background: #fff; }
.tr-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tr-again { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem; align-items: start; }
.tr-again p { color: var(--ink-2); margin: 0 0 1rem; font-size: 1.05rem; }
.tr-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tr-care { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tr-care dt span { display: block; font-weight: 500; font-size: .8rem; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; margin-top: .2rem; }
@media (max-width: 1000px) { .tr-types { grid-template-columns: 1fr 1fr; } .tr-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .tr-two, .tr-again, .tr-care { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .tr-types, .tr-steps { grid-template-columns: 1fr; } }
.hb-pic.fit-contain { background: transparent; box-shadow: none; top: 50%; bottom: auto; transform: translateY(-46%); aspect-ratio: 2 / 1; height: auto; }
.hb-slide.on .hb-pic.fit-contain { transform: translateY(-50%); }
.hb-pic.fit-contain img { object-fit: cover; border-radius: 12px; box-shadow: 0 12px 28px rgba(17,24,39,.12); }
@media (max-width: 700px) { .hb-pic.fit-contain, .hb-slide.on .hb-pic.fit-contain { transform: none; top: auto; aspect-ratio: 2 / 1; } }
.hb-pic.fit-contain .concept-note { top: .6rem; bottom: auto; left: auto; right: .6rem; }
@media (max-width: 700px) { .hb-pic .concept-note { font-size: .62rem; padding: .2rem .45rem; } }

/* Wholesale v2 */
.ws-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ws-min { margin-top: .75rem !important; font-size: .88rem; font-style: italic; font-weight: 600; color: var(--navy) !important; }
.s.alt .bs-steps li { background: #fff; }
@media (max-width: 700px) { .ws-tiers { grid-template-columns: 1fr; } }
.ws-tiers .cp-tier { background: var(--sand); }
.s.alt .ws-tiers .cp-tier { background: #fff; }
.cp-tier h3 { font-size: 1.15rem; margin: .7rem 0 0; }
.ws-tiers .cp-tier p { margin-top: .4rem; }
.ret-box { border: 1px solid var(--line); border-radius: 10px; padding: .9rem 1rem; display: grid; gap: .5rem; margin: 0; }
.ret-box legend { font-weight: 600; font-size: .88rem; padding: 0 .3rem; }
.ret-box .check { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.ret-days { width: 4.5rem !important; padding: .3rem .5rem !important; min-height: 0 !important; display: inline-block; }
.q-desk { width: 100%; padding-bottom: 0; }
.q-desk .q-photo { width: 100%; aspect-ratio: 2 / 1; position: relative; margin: 0; }
.q-desk .q-photo img { object-position: 50% 50%; }

/* Quote form v2 */
.iq-form { display: grid; gap: 1rem; }
.iq-step { display: flex; align-items: center; gap: .6rem; margin-top: .5rem; font-size: 1rem; }
.iq-step:first-child { margin-top: 0; }
.iq-n { width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-size: .82rem; font-weight: 700; flex: none; }
.kind-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.kind-tiles button { display: grid; justify-items: center; gap: .45rem; padding: 1rem .5rem; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; color: var(--ink); font-weight: 600; font-size: .86rem; cursor: pointer; text-align: center; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease; }
.kind-tiles button svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.kind-tiles button:hover { transform: translateY(-3px); border-color: var(--navy); box-shadow: 0 10px 22px rgba(18,32,64,.12); }
.kind-tiles button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.iq-rule { margin: 0; padding: .75rem .9rem; border-radius: 10px; background: var(--sand); font-size: .88rem; color: var(--ink-2); font-style: italic; }
.iq-details { display: grid; gap: 1rem; }
.iq-group, .iq-sub { display: grid; gap: 1rem; }
.iq-group[hidden], .iq-sub[hidden], .iq-puff[hidden], .iq-role[hidden], .iq-details[hidden], .iq-rule[hidden] { display: none; }
.iq-checks, .iq-pref { border: 0; padding: 0; margin: 0; }
.iq-checks legend, .iq-pref legend { font-weight: 600; font-size: .88rem; margin-bottom: .4rem; }
.iq-inline { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.iq-solo { font-size: .92rem; }
.iq-drop { display: flex; gap: .9rem; align-items: center; padding: 1rem 1.1rem; border: 1.5px dashed var(--line-strong); border-radius: 12px; cursor: pointer; background: var(--chalk, #fafaf8); }
.iq-drop:hover { border-color: var(--navy); }
.iq-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.iq-drop svg { width: 26px; height: 26px; fill: none; stroke: var(--navy); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.iq-drop span { display: grid; gap: .2rem; }
.iq-drop b { font-size: .92rem; }
.iq-drop small { color: var(--muted); font-size: .8rem; }
.iq-files { list-style: none; margin: -.4rem 0 0; padding: 0; display: grid; gap: .3rem; }
.iq-files li { display: flex; gap: .75rem; align-items: center; font-size: .88rem; }
.iq-files li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iq-files small { color: var(--muted); }
.iq-ref { font-size: 1.05rem; margin: .5rem 0; }
@media (max-width: 560px) { .kind-tiles { grid-template-columns: 1fr 1fr; } }
.iq-card { display: grid; gap: .6rem; }
.iq-refno { font-size: .8rem; color: var(--muted); margin-right: .35rem; }
.iq-dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .4rem 1.25rem; padding: .7rem .9rem; background: var(--sand); border-radius: 10px; }
.iq-dl dt { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.iq-dl dd { margin: 0; font-size: .9rem; }
.iq-filebox { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; font-size: .9rem; }
.iq-filter { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.iq-filter button { border: 1px solid var(--line-strong); background: #fff; border-radius: 999px; padding: .4rem .9rem; font-weight: 600; font-size: .85rem; cursor: pointer; }
.iq-filter button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.origin-line { margin: .75rem 0 0; font-size: .92rem; color: var(--ink-2); }
.iq-sms { font-size: .85rem; align-items: flex-start; } .iq-sms input { margin-top: .2rem; } .iq-legal { margin: 0; font-size: .8rem; color: var(--muted); }
.legal-links { flex-wrap: wrap; }
.hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.sec-check { position: relative; }
.cf-ts:empty { display: none; }

.brand-names { list-style: none; margin: 1.1rem 0 .3rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.brand-names li { font-family: var(--serif, Georgia, serif); font-size: 1.15rem; font-weight: 500; letter-spacing: .01em; color: #fff; }
.brand-avail { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; opacity: .75; margin: 0 0 .6rem; }
.deco-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.deco { text-align: left; border: 1.5px solid var(--line, #e3ddd1); background: #fff; border-radius: 10px; padding: .6rem .75rem; cursor: pointer; display: grid; gap: .15rem; font: inherit; color: inherit; }
.deco b { font-size: .92rem; } .deco small { font-size: .78rem; color: var(--ink-2, #475467); }
.deco[aria-checked="true"] { border-color: var(--navy, #102943); box-shadow: 0 0 0 2px rgba(16,41,67,.15); }
.tier-box { border: 1px solid var(--line, #e3ddd1); border-radius: 12px; padding: .8rem .9rem; margin: .9rem 0 1rem; background: #fff; }
.tier-title { margin: 0 0 .55rem; font-weight: 600; font-size: .92rem; }
.tier-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: .4rem; }
.tier { border-radius: 8px; background: var(--sand, #f3eee4); padding: .45rem .4rem; text-align: center; display: grid; gap: .1rem; }
.tier span { font-size: .72rem; color: var(--ink-2, #475467); } .tier b { font-size: .95rem; }
.tier.on { background: var(--navy, #102943); color: #fff; } .tier.on span { color: rgba(255,255,255,.8); }
.tier-box .fine { margin: .55rem 0 0; font-size: .8rem; color: var(--ink-2, #475467); }
@media (max-width: 520px) { .deco-opts { grid-template-columns: 1fr; } .tier-row { grid-template-columns: repeat(3, 1fr); } }
.place-opts { margin-bottom: .4rem; } .place b { font-size: .88rem; }
.design-box .art-pick { display: grid; gap: .35rem; margin: .6rem 0 .4rem; }
.design-box .art-up { display: grid; gap: .3rem; margin: .2rem 0 .6rem; }
.art-ok { color: var(--ok, #1f7a3a); font-weight: 600; font-size: .88rem; }
.tag-ok { color: var(--ok, #1f7a3a); font-weight: 600; } .tag-need { color: #a15c00; font-weight: 600; }
.art-row { display: grid; grid-template-columns: 1fr auto; gap: .4rem .8rem; align-items: center; padding: .6rem 0; border-top: 1px solid var(--line, #e3ddd1); }
.art-row .art-st { grid-column: 1 / -1; font-size: .85rem; }
.puff-opts { margin-top: .6rem; }
.same-q { display: grid; gap: .45rem; margin: .6rem 0 .3rem; } .deco-opts.yn { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.req { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #a15c00; margin-left: .35rem; }
.puff-sw { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .4rem; }
.pswatch { width: 34px; height: 34px; border-radius: 50%; padding: 3px; border: 2px solid transparent; background: none; cursor: pointer; }
.pswatch i { display: block; width: 100%; height: 100%; border-radius: 50%; border: 1px solid rgba(0,0,0,.18); }
.puff-sw.metal .pswatch i { background-image: linear-gradient(135deg, rgba(255,255,255,.65) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,.18) 100%) !important; background-blend-mode: normal; }
.pswatch[aria-checked="true"] { border-color: var(--navy, #102943); }
.mini-deco { display: block; font-size: .8rem; color: var(--ink-2, #475467); margin-top: .15rem; }
#org-fields fieldset.field { border: 0; padding: 0; margin: .4rem 0 .6rem; }
#org-fields fieldset.field legend { font-weight: 600; font-size: .92rem; margin-bottom: .4rem; padding: 0; }

/* Custom Print first slide: match the headline size of the other Custom slides on desktop */
@media (min-width: 701px) {
  .hb-left.hb-small:has(.hb-group.tall) .hb-word { font-size: min(6.2vw, 6.8rem); max-width: 38%; }
}

/* Quote form garment picker */
.iq-items { border: 0; padding: 0; margin: 0; display: grid; gap: .6rem; }
.iq-items legend { font-weight: 600; font-size: .88rem; margin-bottom: .4rem; }
.iq-rows { display: grid; gap: .75rem; }
.iq-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 76px 36px; gap: .5rem; align-items: end; padding-bottom: .75rem; border-bottom: 1px solid var(--line, #e4e7ec); }
.iq-row .field > span { font-size: .78rem; }
.iq-row .iq-go, .iq-row .iq-co { grid-column: 1 / -1; }
.iq-row .iq-go[hidden], .iq-row .iq-co[hidden], .iq-brand-other[hidden] { display: none; }
.iq-rm { height: 42px; width: 36px; border: 1px solid var(--line, #d0d5dd); background: transparent; border-radius: 8px; font-size: 1.2rem; line-height: 1; cursor: pointer; color: var(--muted); }
.iq-rm:hover { color: var(--ink); border-color: var(--ink); }
.iq-add { justify-self: start; font-weight: 600; }
@media (max-width: 560px) { .iq-row { grid-template-columns: minmax(0, 1fr) 70px 36px; } .iq-row > .field:first-child { grid-column: 1 / -1; } }

/* Quote form color picker with swatches */
.iq-cf { position: relative; }
.iq-cp { position: relative; }
.iq-cb { display: flex; align-items: center; gap: .55rem; width: 100%; text-align: left; cursor: pointer; background: #fff; }
.iq-cb:disabled { cursor: not-allowed; color: var(--muted); background: #f7f7f5; }
.iq-cb::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); flex: none; }
.iq-cn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iq-sw { width: 18px; height: 18px; border-radius: 50%; flex: none; border: 1px solid rgba(0,0,0,.18); display: inline-block; }
.iq-sw.none { background: repeating-linear-gradient(45deg, #fff 0 3px, #d0d5dd 3px 5px) !important; }
.iq-cl { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); min-width: 200px; max-height: 280px; overflow: auto; margin: 0; padding: .3rem; list-style: none; background: #fff; border: 1px solid var(--line, #d0d5dd); border-radius: 10px; box-shadow: 0 10px 30px rgba(16,24,40,.14); }
.iq-cl[hidden] { display: none; }
.iq-cl li { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: 7px; cursor: pointer; font-size: .92rem; }
.iq-cl li:hover, .iq-cl li:focus { background: #f2f4f7; outline: none; }
.iq-cl li[aria-selected="true"] { font-weight: 600; background: #eef2f6; }
.iq-size { display: grid; gap: 1rem; }
.iq-size-other[hidden] { display: none; }

/* Design studio: side switch, size slider, and normal page scrolling on phones */
.studio-stage canvas { touch-action: pan-y; cursor: grab; }
.sd-sides { display: inline-flex; gap: .35rem; background: #fff; border: 1px solid var(--line, #d0d5dd); border-radius: 999px; padding: .25rem; justify-self: start; }
.sd-sides button { border: 0; background: transparent; border-radius: 999px; padding: .45rem 1.1rem; font-weight: 600; cursor: pointer; color: var(--ink-2, #475467); }
.sd-sides button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.sd-size { display: flex; align-items: center; gap: .75rem; font-size: .82rem; color: var(--muted); }
.sd-size input { flex: 1; accent-color: var(--navy); }
.sd-badge::before { display: none; }

/* Premium brands: names at the top, in clean bold type */
.brand-names { margin: .9rem 0 .35rem !important; gap: .35rem .3rem !important; }
.brand-names li { font: 700 1.05rem/1.3 var(--f-body, Inter, sans-serif) !important; letter-spacing: .06em !important; text-transform: uppercase; color: #fff; }
.brand-names li:not(:last-child)::after { content: '·'; margin-left: .55rem; opacity: .6; }
.brand-avail { margin: 0 0 1.1rem !important; }

/* Phones: on the Brand Store and Quote banners, the big words sit above the picture */
@media (max-width: 900px) {
  .sp-bs .sp-copy, .sp-quote .sp-copy { display: contents; }
  .sp-bs .sp-word, .sp-quote .sp-word { order: -2; }
  .sp-bs .sp-right, .sp-quote .sp-right { order: -1; }
  .sp-bs .sp-in, .sp-quote .sp-in { gap: 1.1rem; }
}

/* Cookie notice: a small bar at the bottom, never a blocking pop-up */
.ck { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 760px; margin: 0 auto; background: #fff; border: 1px solid var(--line, #d0d5dd); border-radius: 14px; box-shadow: 0 14px 40px rgba(16,24,40,.16); padding: .85rem 1rem; display: flex; gap: 1rem; align-items: center; }
.ck p { margin: 0; font-size: .86rem; color: var(--ink-2, #475467); line-height: 1.45; }
.ck-btns { display: flex; gap: .5rem; flex: none; }
html.ck-on .fab-quote { display: none !important; }
@media (max-width: 640px) { .ck { flex-direction: column; align-items: stretch; left: 10px; right: 10px; bottom: 10px; } .ck-btns .btn { flex: 1; } }

/* Leaving-the-site offer */
.xo { position: fixed; inset: 0; z-index: 80; background: rgba(12,20,38,.55); display: grid; place-items: center; padding: 16px; animation: xoIn .2s ease; }
.xo-card { position: relative; width: min(440px, 100%); background: #fff; border-radius: 18px; padding: 2rem 1.6rem 1.3rem; text-align: center; box-shadow: 0 30px 70px rgba(0,0,0,.3); display: grid; gap: .7rem; max-height: calc(100vh - 32px); overflow: auto; }
.xo-card h2 { font-size: 1.7rem; line-height: 1.12; margin: 0; letter-spacing: -.01em; }
.xo-card p { margin: 0; color: var(--ink-2, #475467); }
.xo-card .eyebrow { margin: 0; }
.xo-pug { justify-self: center; width: 64px; height: auto; }
.xo-x { position: absolute; top: 10px; right: 12px; width: 38px; height: 38px; border: 0; background: transparent; font-size: 1.7rem; line-height: 1; cursor: pointer; color: var(--muted); border-radius: 50%; }
.xo-x:hover { background: #f2f4f7; color: var(--ink); }
.xo-form { display: grid; gap: .6rem; margin-top: .3rem; text-align: left; }
.xo-file { display: flex; align-items: center; gap: .5rem; font-size: .88rem; border: 1px dashed var(--line, #d0d5dd); border-radius: 10px; padding: .6rem .7rem; cursor: pointer; }
.xo-file input { max-width: 100%; font-size: .82rem; }
.xo-file { flex-direction: column; align-items: flex-start; }
.xo-file span { order: -1; font-weight: 600; }
.xo-no { justify-self: center; font-size: .86rem; color: var(--muted); }
.xo-code { display: flex; align-items: center; justify-content: center; gap: .75rem; border: 2px dashed var(--navy); border-radius: 12px; padding: .8rem; margin: .3rem 0; }
.xo-code b { font: 800 1.35rem/1 var(--f-body, Inter, sans-serif); letter-spacing: .06em; color: var(--navy); }
html.xo-open { overflow: hidden; }
@keyframes xoIn { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 640px) { .xo { place-items: end center; padding: 0; } .xo-card { border-radius: 18px 18px 0 0; width: 100%; padding-bottom: 1.6rem; } }
@media (prefers-reduced-motion: reduce) { .xo { animation: none; } }

/* Checkout discount code */
.dc-box { margin: .4rem 0 .6rem; }
.dc-row { display: flex; gap: .5rem; }
.dc-row .input { flex: 1; min-width: 0; text-transform: uppercase; }
.dc-on { display: flex; justify-content: space-between; align-items: center; font-size: .9rem; }
.sum-row.disc span:last-child { color: #1d7a46; font-weight: 600; }

/* Footer bottom bar: copyright on the left, links in one row on the right */
footer.site .legal .wrap { display: flex !important; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem 2rem; }
footer.site .legal-links { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .5rem 1.4rem; margin-left: auto; }
@media (max-width: 760px) { footer.site .legal .wrap { flex-direction: column; align-items: flex-start; } footer.site .legal-links { justify-content: flex-start; margin-left: 0; } }

/* Brand Store: own-inventory section stands out as a navy band */
.bs-own { scroll-margin-top: 90px; }
.bs-own .bb-kicker { color: var(--gold, #eab039); }
.bs-own .s-title { color: #fff; }
.bs-own .s-head p { color: rgba(255,255,255,.85); max-width: 62ch; }
.bs-own-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.bs-own-card { background: #fff; color: var(--navy); border-radius: 14px; padding: 1.5rem; border-top: 4px solid var(--gold, #eab039); }
.bs-own-card h3 { font-size: 1.35rem; margin: 0 0 .5rem; color: var(--navy); }
.bs-own-card .lead { font-weight: 700; color: var(--navy); margin: 0 0 .35rem; }
.bs-own-card p { margin: 0; color: #475467; }
.bs-own .cp-note { color: rgba(255,255,255,.75); margin-top: 1.25rem; }
@media (max-width: 900px) { .bs-own-cards { grid-template-columns: 1fr; } }

/* Banner note link to the own-inventory section */
.sp-note { display: inline-block; background: #e9e8e4; border: 1px solid #dcdad4; border-radius: 0; max-width: 46ch; padding: .7rem 1rem; font-size: .9rem; color: var(--navy); text-decoration: none; line-height: 1.4; box-shadow: 0 2px 6px rgba(16,24,40,.06); }
.sp-note:hover { background: #e1e0db; }
.sp-note b { font-weight: 700; }

/* Own-inventory cards lift on hover, like the other cards */
.bs-own-card { transition: transform .22s ease, box-shadow .22s ease; }
.bs-own-card:hover { transform: translateY(-6px); box-shadow: 0 16px 34px rgba(0,0,0,.28); }
@media (prefers-reduced-motion: reduce) { .bs-own-card:hover { transform: none; } }

.sp-note .sp-more { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; white-space: nowrap; }

/* Brand Store and Quote banner photos: show the whole image */
/* Brand Store and Quote banners: white, with the screen images sitting directly on it */
.sp-quote .q-desk .q-photo { aspect-ratio: 1527 / 1005; background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
.sp-quote .q-desk .q-photo img { object-fit: contain; }
.sp-quote .sw-chips li { border: 1px solid #e4e7ec; }
.sp-quote .q-desk .q-photo .concept-note { display: none; }
.bs-shot .q-photo { aspect-ratio: 1437 / 964; background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
.bs-shot .q-photo img { object-fit: contain; filter: drop-shadow(0 18px 30px rgba(17,24,39,.12)) drop-shadow(0 2px 6px rgba(17,24,39,.06)); }
.sp-quote .q-desk .q-photo img { object-fit: cover; object-position: 50% 50%; }
.sp-bs .sw-chips li { border: 1px solid #e4e7ec; }

/* Brand Store: the store image lines up with the top of the headline */
@media (min-width: 901px) { .sp-bs .sp-in, .sp-quote .sp-in { align-items: start; } .sp-bs .sp-right, .sp-quote .sp-right { margin-top: var(--bs-img-top, 3.3rem); } }
.iq-hint { margin: 0; font-size: .9rem; color: var(--ink-2, #475467); background: #f2f4f7; padding: .7rem .85rem; }

/* Quote banner image: the screens fill the column edge to edge */
.sp-quote .q-desk { padding: 0; }
.sp-quote .q-desk .q-photo { width: 100%; margin: 0; }

/* Banner note: light see-through gray with a navy edge so it stands out */
.sp-note { background: rgba(16, 41, 67, .07) !important; border: 0 !important; border-left: 4px solid var(--navy) !important; box-shadow: 0 6px 18px rgba(16, 41, 67, .10) !important; padding: .8rem 1.1rem !important; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.sp-note:hover { background: rgba(16, 41, 67, .11) !important; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(16, 41, 67, .16) !important; }
.sp-note b { color: var(--navy); }
@media (prefers-reduced-motion: reduce) { .sp-note:hover { transform: none; } }

/* Bag icon with the count badge on its corner */
.nav a.bag-link { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0 !important; font-size: 0 !important; }
.nav a.bag-link .bag-ic { width: 24px; height: 24px; color: var(--ink); }
.nav a.bag-link .bag-count { position: absolute; top: 2px; right: 0; min-width: 1.15rem; height: 1.15rem; font-size: .68rem; padding: 0 .25rem; border: 2px solid #fff; box-sizing: content-box; }

/* Leaving pop-ups: photo on one side, offer on the other */
.xo-card.xo-split { width: min(760px, 100%); padding: 0; display: grid; grid-template-columns: 42% 1fr; text-align: left; overflow: hidden; gap: 0; }
.xo-split .xo-img { position: relative; background: #f1efea; min-height: 100%; }
.xo-split .xo-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.xo-split.xo-mock .xo-img img { object-fit: contain; object-position: 50% 50%; padding: 12px; box-sizing: border-box; }
.xo-tag { position: absolute; left: 14px; top: 14px; background: var(--navy); color: #fff; font: 700 .78rem/1 var(--f-body, Inter, sans-serif); letter-spacing: .08em; text-transform: uppercase; padding: .5rem .7rem; }
.xo-split .xo-body { padding: 2.2rem 1.8rem 1.4rem; display: grid; gap: .7rem; align-content: center; }
.xo-split .xo-body h2 { font-size: 1.85rem; }
.xo-split .xo-no { justify-self: start; }
.xo-split .xo-x { z-index: 2; background: rgba(255,255,255,.85); }
@media (max-width: 640px) {
  .xo-card.xo-split { grid-template-columns: 1fr; width: 100%; }
  .xo-split .xo-img { height: 190px; min-height: 0; }
  .xo-split .xo-body { padding: 1.3rem 1.2rem 1.5rem; }
  .xo-split .xo-body h2 { font-size: 1.5rem; }
}

/* Spirit Stores: perks list */
.ss-perks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.ss-perks li { display: flex; gap: .85rem; align-items: flex-start; background: #fff; border: 1px solid var(--line, #e4e7ec); padding: 1.15rem 1.1rem; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.ss-perks li:hover { transform: translateY(-4px); border-color: var(--navy); box-shadow: 0 12px 26px rgba(18, 32, 64, .12); }
.ss-ck { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; }
.ss-perks b { display: block; font-size: 1.02rem; color: var(--ink); margin-bottom: .25rem; }
.ss-perks p { margin: 0 !important; font-size: .92rem; color: var(--ink-2); }
@media (max-width: 640px) { .ss-perks { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ss-perks li:hover { transform: none; } }

/* Custom Print slide 2: the collage keeps its own shape, nothing cropped */
@media (min-width: 701px) { .hb-pic.fit-ratio { width: auto; aspect-ratio: 1445 / 1088; max-width: 58%; } .hb-pic.fit-ratio img { width: 100%; height: 100%; object-fit: cover; } }
@media (max-width: 700px) { .hb-slide .hb-pic.fit-ratio { aspect-ratio: 1445 / 1088 !important; } .hb-pic.fit-ratio img { object-fit: cover; } }

/* Brand Store and Quote: the banner shows only the big words and the picture.
   The text below follows the Build a Brand layout: heading on the left; description, buttons, highlights on the right. */
.sp-split .sp-in { align-items: center !important; }
.sp-split .sp-right { margin-top: 0 !important; }
.sp-below .bb2-side { justify-items: stretch; }
.sp-below .bb2-side > .bb-ctas { justify-self: start; }
.sp-below .sp-note { justify-self: start; max-width: 100%; }
.sp-below h2 { max-width: 16ch !important; }
.sp-below .bb-proof { margin-top: .25rem; }
/* Desktop: heading, then the merchandise box and highlights on the left; description and buttons on the right */
.sp-below .bb2-intro-in { grid-template-areas: "head side" "extra side"; row-gap: 2rem; }
.sp-below .sp-head { grid-area: head; }
.sp-below .bb2-side { grid-area: side; }
.sp-below .sp-extra { grid-area: extra; display: grid; gap: 1.35rem; justify-items: start; align-content: start; max-width: 520px; }
.sp-below .sp-extra .bb-proof { width: 100%; }
@media (max-width: 900px) { .sp-split .sp-in { min-height: 0; padding-bottom: 2rem; } }
@media (max-width: 900px) {
  .sp-below .bb2-intro-in { grid-template-areas: "head" "side" "extra"; row-gap: 0; }
  .sp-below .sp-extra { padding-top: 1.35rem; max-width: none; }
}
@media (max-width: 600px) {
  .sp-below .bb2-side > .bb-ctas { justify-self: stretch; }
  .sp-below .bb-ctas .btn { flex: 1 1 100%; justify-content: center; }
  .sp-below .sp-note { justify-self: stretch; }
}

/* Quote form: Brand Store requests go to the Brand Stores website, so the rest of the form steps aside */
.iq-form.iq-out > *:not(:first-child):not(#kind-btns):not(#iq-rule) { display: none !important; }
.iq-form.iq-out #iq-rule { display: block; }
.iq-form.iq-out #iq-rule { font-style: normal; }
.iq-form.iq-out #iq-rule .btn { display: flex; width: max-content; max-width: 100%; margin-top: .9rem !important; font-style: normal; }