/* ============================================================
   /signage/ and /signage/studio/, page-local styles.
   Loaded after css/main.css. Reuses .card, .router__chip,
   .next-steps, .faq, .field, .work-row, .pairings__grid.
   Every colour is a token from main.css; nothing hardcoded.
   ============================================================ */

.signage-page .btn[hidden], .studio-page .btn[hidden] { display:none; }

/* ---------- Hub hero ---------- */

.sg-hero .section__inner { padding-top:var(--s-7); padding-bottom:var(--s-9); }
.sg-hero__inner {
  display:grid;
  grid-template-columns:6fr 6fr;
  gap:var(--s-8);
  align-items:center;
}
.sg-hero__copy h1 { max-width:14ch; }
.sg-hero__note { color:var(--muted); margin-top:var(--s-5); }
.page-header__ctas { display:flex; align-items:center; gap:var(--s-6); flex-wrap:wrap; margin-top:var(--s-7); }
.sg-hero__panel {
  aspect-ratio:4 / 3;
  min-height:0; height:auto;
  padding:0; overflow:hidden; display:block;
  background:var(--navy-900);
}
.sg-hero__panel img { width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; }

/* ---------- How it works: four steps ---------- */

.next-steps__list--4 { grid-template-columns:repeat(4, 1fr); }

/* ---------- Lineup ---------- */

.sg-lineup h2 { max-width:18ch; }
.sg-lineup__intro { max-width:var(--text-max); color:var(--muted); margin-top:var(--s-5); }
.sg-filters { margin-top:var(--s-7); }
.sg-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--s-4);
  align-items:stretch;
}
.sg-card[hidden] { display:none; }
.sg-card { padding:0; overflow:hidden; scroll-margin-top:calc(var(--header-h-condensed) + var(--s-6)); }
.sg-card__visual {
  aspect-ratio:4 / 3;
  background:var(--navy-900);
  border-bottom:1px solid var(--border-dark);
  overflow:hidden;
}
.sg-card__visual img { width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--t-max) var(--ease); }
.sg-card:hover .sg-card__visual img { transform:scale(1.03); }
.sg-card__body { padding:var(--s-6) var(--s-6) var(--s-6); display:flex; flex-direction:column; flex:1; }
.sg-card__body .card__eyebrow { margin-bottom:var(--s-3); }
.sg-card__title { margin-bottom:var(--s-3); }
.sg-card__spec { color:var(--muted); font-size:var(--fs-small); margin-bottom:var(--s-5); }
.sg-card__price { display:flex; align-items:baseline; gap:var(--s-3); flex-wrap:wrap; margin-bottom:var(--s-2); }
.sg-card__from { font-family:var(--font-sans); font-size:0.75rem; font-weight:600; letter-spacing:var(--track-smallcaps); text-transform:uppercase; color:var(--muted); }
.sg-card__amount {
  font-family:var(--font-sans); font-weight:600;
  font-size:clamp(1.75rem,1.5rem + 1vw,2.25rem); line-height:1; letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums; color:var(--ink);
}
.sg-card__market { color:var(--muted); font-size:var(--fs-small); margin-bottom:var(--s-5); }
.sg-card__market strong { color:var(--ivory); font-weight:500; }
.sg-card__actions { margin-top:auto; display:flex; align-items:center; gap:var(--s-4); flex-wrap:wrap; }
.sg-card__actions .btn--ghost { padding:13px 22px; min-height:44px; }

/* ---------- Pricing table ---------- */

.sg-pricing h2 { max-width:20ch; }
.sg-pricing__intro { max-width:var(--text-max); margin-top:var(--s-5); margin-bottom:var(--s-7); }
.sg-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--r-md); border:1px solid var(--border-dark); background:var(--paper); box-shadow:var(--shadow-1); }
.sg-table { width:100%; border-collapse:collapse; min-width:720px; }
.sg-table th, .sg-table td { text-align:left; padding:var(--s-4) var(--s-5); border-top:1px solid var(--border-light); vertical-align:top; }
.sg-table thead th {
  border-top:none;
  font-family:var(--font-sans); font-size:0.75rem; font-weight:600;
  letter-spacing:var(--track-smallcaps); text-transform:uppercase; color:var(--muted);
}
.sg-table tbody th { font-weight:600; color:var(--ink); white-space:nowrap; }
.sg-table td { color:var(--muted-dark); font-size:var(--fs-small); }
.sg-table .num { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.sg-table td.num { color:var(--ink); font-weight:600; font-size:var(--fs-body); }
.sg-table td.num.sg-table__market { color:var(--muted); font-weight:400; font-size:var(--fs-small); }
.sg-table__family td, .sg-table__family th {
  padding-top:var(--s-6);
  font-family:var(--font-sans); font-size:0.75rem; font-weight:600;
  letter-spacing:var(--track-smallcaps); text-transform:uppercase; color:var(--muted);
}
.sg-price-notes { display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--s-6); margin-top:var(--s-8); }
.sg-price-note h3 { margin-bottom:var(--s-3); }
.sg-price-note p { color:var(--muted-dark); font-size:var(--fs-small); }

/* ---------- Kits ---------- */

.sg-kits__grid { margin-top:var(--s-7); }
.sg-kit__lines { list-style:none; margin:var(--s-4) 0 var(--s-5); padding:0; }
.sg-kit__lines li { position:relative; padding-left:var(--s-5); color:var(--muted); font-size:var(--fs-small); margin-bottom:var(--s-2); }
.sg-kit__lines li::before { content:""; position:absolute; left:0; top:0.62em; width:10px; height:1px; background:var(--gold-500); }
.sg-kit__price { display:flex; align-items:baseline; gap:var(--s-3); flex-wrap:wrap; margin-bottom:var(--s-2); }
.sg-kit__amount { font-family:var(--font-sans); font-weight:600; font-size:var(--fs-h3); line-height:1; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; color:var(--ink); }
.sg-kit__was { color:var(--muted); font-size:var(--fs-small); text-decoration:line-through; }
.sg-kit__market { color:var(--muted); font-size:var(--fs-small); margin-bottom:var(--s-5); }
.sg-kit .btn { margin-top:auto; align-self:flex-start; }

/* ---------- Templates ---------- */

.sg-templates__intro { max-width:var(--text-max); color:var(--muted-dark); margin-top:var(--s-5); }
.sg-template-list { display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--s-3); margin-top:var(--s-7); list-style:none; padding:0; }
.sg-template-list li a {
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  padding:var(--s-4) var(--s-5); min-height:56px;
  background:var(--paper); border:1px solid var(--line-hi); border-radius:var(--r-sm);
  color:var(--ink); text-decoration:none; font-size:var(--fs-small); font-weight:500;
  transition:border-color var(--t-hover) var(--ease), background var(--t-hover) var(--ease);
}
.sg-template-list li a:hover { border-color:var(--ink); background:var(--glass-hi); }
.sg-template-list li a span.mono { color:var(--muted); flex-shrink:0; }
.sg-templates__note { color:var(--muted); margin-top:var(--s-5); }

/* ---------- Proof ---------- */

.sg-proof__row { margin-top:var(--s-7); }
.sg-proof__row .work-row__copy p { color:var(--muted); margin-bottom:var(--s-5); }

/* ============================================================
   Studio
   ============================================================ */

.studio-page .page-header .section__inner { padding-bottom:var(--s-6); }
.studio-page .page-header h1 { max-width:18ch; }

.studio { padding-bottom:var(--s-10); }
.studio .section__inner { padding-top:var(--s-6); }
.studio__layout {
  display:grid;
  grid-template-columns:5fr 7fr;
  gap:var(--s-7);
  align-items:start;
}
.studio__controls { display:flex; flex-direction:column; gap:var(--s-5); min-width:0; }
.studio__stage { position:sticky; top:calc(var(--header-h-condensed) + var(--s-5)); display:flex; flex-direction:column; gap:var(--s-4); min-width:0; }

.studio__step { padding:var(--s-6); }
.studio__step-head { display:flex; align-items:baseline; gap:var(--s-3); margin-bottom:var(--s-4); }
.studio__step-num { font-family:var(--font-sans); font-weight:600; color:var(--gold-700); font-variant-numeric:tabular-nums; }
.studio__step h2 { font-family:var(--font-sans); font-size:var(--fs-h4); font-weight:600; letter-spacing:var(--track-h4); }
.studio__hint { color:var(--muted); font-size:var(--fs-small); margin-bottom:var(--s-4); }

/* Dropzone */
.drop {
  position:relative;
  border:1px dashed var(--line-hi); border-radius:var(--r-sm);
  background:var(--paper);
  padding:var(--s-5);
  display:flex; align-items:center; gap:var(--s-4);
  min-height:96px;
  transition:border-color var(--t-hover) var(--ease), background var(--t-hover) var(--ease);
}
.drop.is-over, .drop:hover { border-color:var(--ink); background:var(--glass-hi); }
.drop:focus-within { outline:2px solid var(--ink); outline-offset:2px; }
.drop input[type="file"] { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.drop__thumb {
  width:72px; height:72px; flex-shrink:0;
  border-radius:var(--r-xs); background:var(--navy-800);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  border:1px solid var(--border-light);
}
.drop__thumb img { max-width:100%; max-height:100%; object-fit:contain; }
.drop__thumb-mark { width:28px; height:28px; opacity:0.5; }
.drop__copy { flex:1; min-width:0; }
.drop__copy strong { display:block; color:var(--ink); }
.drop__copy span { color:var(--muted); font-size:var(--fs-small); display:block; }
.drop__file { color:var(--ivory); font-size:var(--fs-small); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.drop__clear { all:unset; cursor:pointer; color:var(--muted); font-size:var(--fs-small); text-decoration:underline; text-underline-offset:3px; position:relative; z-index:2; padding:var(--s-2) 0; }
.drop__clear:hover { color:var(--error); }
.drop__clear:focus-visible { outline:2px solid var(--ink); outline-offset:3px; border-radius:var(--r-xs); }

.studio__row { display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4); }
.studio__row .field { margin-bottom:0; }
.studio__row--3 { grid-template-columns:1fr 1fr 1fr; }

/* Colour controls */
.swatch { display:flex; align-items:center; gap:var(--s-3); }
.swatch input[type="color"] {
  width:52px; height:52px; padding:0; border:1px solid var(--line-hi); border-radius:var(--r-sm);
  background:var(--paper); cursor:pointer; flex-shrink:0;
}
.swatch input[type="color"]::-webkit-color-swatch-wrapper { padding:4px; }
.swatch input[type="color"]::-webkit-color-swatch { border:none; border-radius:10px; }
.swatch input[type="color"]::-moz-color-swatch { border:none; border-radius:10px; }
.swatch .field__input { flex:1; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.06em; }
.palette { display:flex; flex-wrap:wrap; gap:var(--s-2); margin-top:var(--s-3); align-items:center; }
.palette__label { color:var(--muted); font-size:0.75rem; font-weight:600; letter-spacing:var(--track-smallcaps); text-transform:uppercase; margin-right:var(--s-2); }
.palette__chip {
  all:unset; cursor:pointer;
  width:44px; height:44px; border-radius:var(--r-xs);
  border:1px solid var(--line-hi);
  box-shadow:inset 0 0 0 3px var(--void);
}
.palette__chip:hover { border-color:var(--ink); }
.palette__chip:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.palette[hidden] { display:none; }

.seg { display:flex; flex-wrap:wrap; gap:var(--s-2); }
.seg .router__chip[aria-pressed="true"] { background:var(--patina); border-color:var(--patina); color:var(--green-900); }

/* Product picker */
.picker__families { display:flex; flex-wrap:wrap; gap:var(--s-2); margin-bottom:var(--s-4); }
.picker__list { display:grid; grid-template-columns:1fr; gap:var(--s-2); }
.picker__item {
  all:unset; cursor:pointer;
  display:grid; grid-template-columns:1fr auto; gap:var(--s-2) var(--s-4); align-items:center;
  padding:var(--s-3) var(--s-4); min-height:56px;
  background:var(--paper); border:1px solid var(--line-hi); border-radius:var(--r-sm);
  transition:border-color var(--t-hover) var(--ease), background var(--t-hover) var(--ease);
}
.picker__item:hover { border-color:var(--ink); background:var(--glass-hi); }
.picker__item:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.picker__item[aria-pressed="true"] { border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.picker__item[hidden] { display:none; }
.picker__name { color:var(--ink); font-weight:600; font-size:var(--fs-small); }
.picker__from { color:var(--muted); font-size:var(--fs-small); font-variant-numeric:tabular-nums; white-space:nowrap; }
.picker__from strong { color:var(--ink); font-weight:600; }
.picker__spec { grid-column:1 / -1; color:var(--muted); font-size:0.8125rem; line-height:1.45; }

.options { margin-top:var(--s-5); border-top:1px solid var(--border-light); padding-top:var(--s-4); }
.options__label { color:var(--muted); font-size:0.75rem; font-weight:600; letter-spacing:var(--track-smallcaps); text-transform:uppercase; margin-bottom:var(--s-3); }
.options .field--checkbox { margin-bottom:var(--s-2); }
.options .field--checkbox label { display:flex; justify-content:space-between; gap:var(--s-4); width:100%; font-size:var(--fs-small); padding:var(--s-2) 0; }
.options .field--checkbox label span.num { color:var(--muted); white-space:nowrap; }
.options[hidden] { display:none; }

.picker__add-row { display:flex; align-items:center; gap:var(--s-4); flex-wrap:wrap; margin-top:var(--s-5); }
.picker__add-row .qty { display:inline-flex; align-items:center; border:1px solid var(--line-hi); border-radius:var(--r-pill); background:var(--paper); }
.qty__btn {
  all:unset; cursor:pointer; width:44px; height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-sans); font-size:1.125rem; font-weight:600; color:var(--ink); border-radius:var(--r-pill);
}
.qty__btn:hover { background:var(--glass-hi); }
.qty__btn:focus-visible { outline:2px solid var(--ink); outline-offset:-2px; }
.qty__btn[disabled] { opacity:0.4; cursor:not-allowed; }
.qty__n { min-width:2.5ch; text-align:center; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.picker__unit { color:var(--muted); font-size:var(--fs-small); }
.picker__unit strong { color:var(--ink); font-size:var(--fs-body); }

/* Stage */
.stage {
  padding:0; overflow:hidden;
  aspect-ratio:4 / 3;
  background:var(--navy-900);
  display:block;
}
.stage svg { width:100%; height:100%; display:block; }
.stage__caption { display:flex; justify-content:space-between; align-items:baseline; gap:var(--s-4); color:var(--muted); font-size:var(--fs-small); padding:0 var(--s-2); }
.stage__caption strong { color:var(--ink); }
.thumbs { display:grid; grid-template-columns:repeat(7, 1fr); gap:var(--s-2); }
.thumb {
  all:unset; cursor:pointer;
  aspect-ratio:4 / 3; overflow:hidden;
  border-radius:var(--r-xs); border:1px solid var(--border-light); background:var(--navy-900);
  display:block; position:relative;
}
.thumb svg { width:100%; height:100%; display:block; }
.thumb:hover { border-color:var(--ink); }
.thumb:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.thumb[aria-pressed="true"] { border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.thumb__label { position:absolute; left:0; right:0; bottom:0; padding:2px 6px; font-size:0.625rem; color:var(--ivory); background:rgba(6,7,10,0.6); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stage__actions { display:flex; gap:var(--s-3); flex-wrap:wrap; }
.stage__actions .btn { padding:12px 20px; min-height:44px; font-size:0.875rem; }

/* Kit and estimate */
.kit__list { list-style:none; margin:0; padding:0; }
.kit__row { display:grid; grid-template-columns:1fr auto; gap:var(--s-2) var(--s-4); padding:var(--s-4) 0; border-top:1px solid var(--border-light); align-items:start; }
.kit__row-name { font-weight:600; color:var(--ink); font-size:var(--fs-small); }
.kit__row-meta { color:var(--muted); font-size:0.8125rem; line-height:1.45; }
.kit__row-price { font-family:var(--font-sans); font-weight:600; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums; }
.kit__row-controls { grid-column:1 / -1; display:flex; align-items:center; gap:var(--s-3); }
.kit__remove, .kit__edit { all:unset; cursor:pointer; color:var(--muted); font-size:var(--fs-small); text-decoration:underline; text-underline-offset:3px; padding:var(--s-2) 0; }
.kit__remove:hover { color:var(--error); }
.kit__edit:hover { color:var(--ink); }
.kit__remove:focus-visible, .kit__edit:focus-visible { outline:2px solid var(--ink); outline-offset:3px; border-radius:var(--r-xs); }
.kit__empty { color:var(--muted); font-size:var(--fs-small); }
.kit__totals { border-top:1px solid var(--line-hi); padding-top:var(--s-4); margin-top:var(--s-2); }
.kit__total-row { display:flex; justify-content:space-between; align-items:baseline; gap:var(--s-4); padding:var(--s-1) 0; font-size:var(--fs-small); color:var(--muted); }
.kit__total-row[hidden], .kit__totals[hidden], .options[hidden], .palette[hidden], .kit-pill[hidden] { display:none; }
.kit__total-row.is-total { font-size:var(--fs-body); color:var(--ink); padding-top:var(--s-3); }
.kit__total { font-family:var(--font-sans); font-size:var(--fs-h3); font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.kit__market { color:var(--muted); font-size:0.8125rem; margin-top:var(--s-3); }
.kit__market strong { color:var(--ivory); font-weight:500; }
.kit__flags { margin-top:var(--s-4); }
.kit__flags .field--checkbox label { font-size:var(--fs-small); }
.kit__status { margin-top:var(--s-3); min-height:1.4em; color:var(--muted); font-size:var(--fs-small); }
.kit__status[data-state="error"] { color:var(--error); }
.kit__status[data-state="busy"] { color:var(--ink); }

/* Quote form */
.quote__form { max-width:none; margin-top:var(--s-5); }
.quote__hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.quote__actions { display:flex; gap:var(--s-4); flex-wrap:wrap; margin-top:var(--s-5); }
.quote__actions .btn[disabled] { opacity:0.5; cursor:not-allowed; box-shadow:none; }
.quote__secure { color:var(--muted); margin-top:var(--s-3); }
.quote__confirmation { padding:var(--s-6) 0 0; }
.quote__confirmation:focus { outline:none; }
.quote__confirmation .intake__confirmation-statement { font-size:var(--fs-h3); }

/* Floating kit pill (mobile) */
.kit-pill {
  all:unset; cursor:pointer;
  position:fixed; right:var(--s-4); left:var(--s-4); bottom:var(--s-4); z-index:60;
  display:none; align-items:center; justify-content:space-between; gap:var(--s-3);
  padding:0 var(--s-5) 0 var(--s-2); min-height:52px;
  background:var(--ink); color:var(--void);
  border-radius:var(--r-pill);
  font-family:var(--font-sans); font-weight:600; font-size:0.9375rem;
  box-shadow:var(--shadow-2);
}
.kit-pill__count {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; height:36px; padding:0 10px; border-radius:var(--r-pill);
  background:var(--green-900); color:var(--patina); font-weight:600; font-variant-numeric:tabular-nums;
}
.kit-pill__total { font-variant-numeric:tabular-nums; }
.kit-pill:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }

.no-js .studio__needs-js { display:block; }
.studio__needs-js { display:none; color:var(--warning); margin-bottom:var(--s-5); }

/* ---------- Narrow viewports ---------- */

@media (max-width:1024px) {
  .sg-hero__inner { grid-template-columns:1fr; }
  .sg-grid { grid-template-columns:repeat(2, 1fr); }
  .next-steps__list--4 { grid-template-columns:1fr 1fr; }
  .sg-price-notes { grid-template-columns:1fr; }
  .sg-template-list { grid-template-columns:1fr 1fr; }
  .studio__layout { grid-template-columns:1fr; }
  .studio__stage { position:static; }
  .thumbs { grid-template-columns:repeat(4, 1fr); }
}
@media (max-width:720px) {
  .sg-grid, .sg-template-list { grid-template-columns:1fr; }
  .next-steps__list--4 { grid-template-columns:1fr; }
  .studio__row, .studio__row--3 { grid-template-columns:1fr; }
  .studio__step { padding:var(--s-5); }
  .thumbs { grid-template-columns:repeat(4, 1fr); }
  .kit-pill { display:flex; }
  .kit-pill[hidden] { display:none; }
  .studio-page .footer__base { padding-bottom:calc(72px + var(--s-6)); }
  .stage__caption { flex-direction:column; gap:var(--s-1); }
}