.btn--cta { background-color: var(--cta-fill); color: var(--cta-ink); }
.btn--ghost { background: var(--sec-card); color: var(--sec-ink); border-color: var(--sec-border); }
.btn--light { background: var(--card-light); color: var(--ink-dark); border-color: var(--border-light); }
.btn--wa { background: var(--wa-pill-bg); color: var(--wa-pill-text); border-color: var(--border-light); }
.btn--wa .wa-icon { width: 1.25rem; height: 1.25rem; color: var(--wa-icon); flex-shrink: 0; }

.spec-ribbon { background: var(--bg-deep); color: var(--ink-light); padding-block: 0.45rem; border-bottom: 1px solid var(--border-deep); font-size: 0.9rem; }
.spec-ribbon__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-xs) var(--space-m); }
.spec-ribbon p { margin: 0; max-width: none; color: var(--ink-muted-deep); }
.spec-ribbon strong { color: var(--ink-light); }

.site-header { background: var(--card-light); border-bottom: 1px solid var(--border-light); position: relative; z-index: 40; }
.site-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-s); padding-block: 0.8rem; }
.brand { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--ink-dark); flex-shrink: 0; }
.brand__logo { width: 2.85rem; height: 2.85rem; flex-shrink: 0; }
.brand__title { display: block; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; line-height: 1.12; letter-spacing: -0.015em; }
.brand__sub { display: block; font-size: 0.82rem; color: var(--ink-muted); line-height: 1.25; }

.site-nav { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.15rem; }
.site-header a:not(.btn) { padding-inline: 0.4rem; text-decoration: none; font-weight: 600; color: var(--ink-dark); white-space: nowrap; }
.site-header a[aria-current="page"]:not(.btn) { color: var(--brand-primary); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.42em; }
.header-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-xs); flex-shrink: 0; }
.header-actions .tel { font-weight: 700; padding-inline: 0.35rem; }
.header-actions .btn { padding-inline: var(--space-s); }

@media (min-width: 64rem) {
  .site-header__inner { flex-wrap: nowrap; }
  .spec-ribbon__inner { flex-wrap: nowrap; }
}

.menu-mobile { display: none; }
@media (max-width: 63.99rem) {
  .spec-ribbon p + p { display: none; }
  .site-header { position: relative; }
  .site-nav { display: none; }
  .header-actions .btn--cta { display: none; }
  .brand__logo { width: 2.35rem; height: 2.35rem; }
  .brand__sub { display: none; }
  .menu-mobile { display: block; }
  .menu-mobile[open] { width: 100%; }
  .menu-mobile summary { list-style: none; cursor: pointer; font-weight: 600; min-height: var(--tap); display: inline-flex; align-items: center; gap: var(--space-xs); padding-inline: var(--space-s); border: 1px solid var(--border-light); border-radius: 2px; }
  .menu-mobile[open] .menu-mobile__list { display: grid; gap: var(--space-xs); padding-top: var(--space-s); border-top: 1px solid var(--border-light); margin-top: var(--space-xs); }
}

.hero__bg { position: absolute; inset: 0; z-index: -1; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focal, 50% 50%); }
.hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,
  color-mix(in oklab, var(--bg-deep) 92%, transparent) 0 40%, color-mix(in oklab, var(--bg-deep) 40%, transparent) 75%, transparent); }
@media (max-width: 47.99rem) { .hero__bg::after { background: linear-gradient(0deg,
  color-mix(in oklab, var(--bg-deep) 94%, transparent) 0 55%, color-mix(in oklab, var(--bg-deep) 80%, transparent)); } }

.hero-grid { display: grid; width: 100%; min-height: clamp(34rem, 74svh, 46rem); align-items: stretch; }
.hero-copy { display: grid; align-content: center; gap: 0; padding: var(--space-xl) clamp(1.25rem, 4vw, 4rem); }
@media (min-width: 64rem) {
  .hero-grid { grid-template-columns: 45fr 55fr; gap: 0; }
  .hero-copy {
    border-right: 1px solid var(--sec-border);
    padding-block: clamp(1.75rem, 3vw, 3rem);
    padding-right: clamp(2.25rem, 3.8vw, 4rem);
    padding-left: max(clamp(1.25rem, 4vw, 4rem), calc((100% - 84rem) / 2 + clamp(1.25rem, 4vw, 4rem)));
  }
}
.hero .eyebrow { display: inline-flex; align-items: center; gap: 0.65rem; font-size: 0.82rem; margin-bottom: var(--space-s); color: var(--sec-ink-muted); font-weight: 700; }
.hero .eyebrow::before { content: ""; width: 1.75rem; height: 2px; background: var(--sec-mark); flex-shrink: 0; }
.hero h1 { font-size: clamp(2.5rem, 1.95rem + 1.95vw, 3.6rem); line-height: 1.04; letter-spacing: -0.025em; margin-bottom: var(--space-s); }
.hero h1 em { font-style: italic; font-weight: 600; color: var(--sec-mark); }
.lead { font-size: var(--step-1); line-height: 1.48; color: var(--sec-ink-muted); margin: 0 0 var(--space-l); max-width: 48ch; }
.hero-actions { display: grid; gap: var(--space-m); }
.hero-territory { margin: 0; padding-top: var(--space-s); border-top: 1px solid var(--sec-border); font-size: 0.88rem; color: var(--sec-ink-muted); letter-spacing: 0.02em; }
.hero-territory strong { color: var(--sec-ink); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.78rem; }

.hero-figure { position: relative; margin: 0; min-height: 24rem; overflow: hidden; background: var(--bg-deep); }
.hero-figure .media { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.hero-figure .media picture, .hero-figure .media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-plate {
  position: absolute;
  left: clamp(1rem, 2.2vw, 2rem);
  bottom: clamp(1rem, 2.2vw, 2rem);
  right: clamp(1rem, 8vw, 7rem);
  z-index: 2;
  max-width: 32rem;
  padding: 0.95rem 1.25rem;
  background: var(--card-light);
  color: var(--ink-dark);
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--brand-primary);
  margin: 0;
  box-shadow: 0 0.5rem 1.75rem color-mix(in oklab, var(--bg-deep) 20%, transparent);
}
.hero-plate__title { display: block; font-weight: 700; color: var(--ink-dark); margin-bottom: 0.2rem; }
.hero-plate__spec { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; color: var(--ink-muted); font-size: 0.94rem; }
.swatch-marks { display: inline-flex; align-items: center; gap: 0.3rem; margin-left: 0.25rem; vertical-align: middle; }
.swatch-mark { width: 0.75rem; height: 0.75rem; border-radius: 50%; border: 1px solid var(--border-light); display: inline-block; }
.swatch-mark--1 { background: var(--bg-tint); }
.swatch-mark--2 { background: var(--border-light); }
.swatch-mark--3 { background: var(--brand-primary); }

.seam[data-bridge="stat-overlap"] { background: var(--card-light); border-bottom: 1px solid var(--border-light); }
.seam[data-bridge="stat-overlap"] .wrap { width: 100%; max-width: none; margin: 0; }
.bridge-card {
  background: var(--card-light);
  color: var(--ink-dark);
  display: grid;
  grid-template-columns: 1fr;
  max-width: 84rem;
  margin-inline: auto;
}
@media (min-width: 64rem) {
  .bridge-card { grid-template-columns: repeat(4, 1fr); }
}
.bridge-card > div {
  padding: 1.15rem clamp(1rem, 2vw, 1.75rem);
  border-bottom: 1px solid var(--border-light);
  display: grid;
  gap: 0.15rem;
  align-content: start;
}
@media (min-width: 64rem) {
  .bridge-card > div { border-bottom: 0; border-right: 1px solid var(--border-light); }
  .bridge-card > div:last-child { border-right: 0; }
}
.bridge-card__head { font-weight: 700; color: var(--ink-dark); font-size: 0.98rem; margin: 0; }
.bridge-card__sub { color: var(--ink-muted); font-size: 0.88rem; margin: 0; }

section:has(+ .seam), section:has(+ svg.edge) { padding-block-end: var(--space-l); }
.seam + section, svg.edge + section { padding-block-start: var(--space-l); }
.seam[data-bridge="stat-overlap"] + section { padding-block-start: var(--space-2xl); }

.frame--hairline { border: 1px solid var(--sec-border); background: var(--sec-card); }
.frame--inset { border: 1px solid var(--sec-border); background: var(--sec-card); }
.frame--full-bleed { border: 1px solid var(--sec-border); }

.lookbook-spread, .case-study-grid, .split-6-6, .workshop-split { display: grid; gap: var(--space-l); align-items: start; }
.lookbook-pair { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
@media (min-width: 64rem) {
  .lookbook-spread { grid-template-columns: 4fr 8fr; gap: var(--space-xl); align-items: start; }
  .case-study-grid, .split-6-6, .workshop-split { grid-template-columns: 5fr 7fr; gap: var(--space-xl); align-items: center; }
  .editorial-4-8 { display: grid; gap: var(--space-xl); grid-template-columns: 4fr 8fr; align-items: start; }
}

.grid { gap: 0; border-top: 1px solid var(--sec-border); border-left: 1px solid var(--sec-border); }
.card {
  background: var(--sec-card);
  border-right: 1px solid var(--sec-border);
  border-bottom: 1px solid var(--sec-border);
  border-radius: 0;
  padding: var(--space-l);
  display: grid;
  gap: var(--space-xs);
  align-content: start;
}
.card .media { --ratio: 16 / 10; margin-bottom: var(--space-s); }
.card__meta { color: var(--sec-ink-muted); font-size: 0.92rem; margin: 0; padding-top: var(--space-xs); border-top: 1px solid var(--sec-border); }
.pull-quote { margin: 0; font-family: var(--font-display); font-size: 1.08rem; line-height: 1.45; }
.price-banner {
  padding: var(--space-m) var(--space-l);
  background: var(--sec-card);
  border: 1px solid var(--sec-border);
  border-left: 4px solid var(--sec-mark);
  margin-top: var(--space-m);
}

.ledger { display: grid; gap: 0; margin: var(--space-m) 0; background: var(--sec-card); border: 1px solid var(--sec-border); border-radius: 0; }
.ledger__row { display: grid; gap: 0.2rem var(--space-m); padding: var(--space-s) var(--space-m); border-bottom: 1px solid var(--sec-border); }
@media (min-width: 48rem) {
  .ledger__row { grid-template-columns: 11.5rem 1fr; align-items: baseline; }
}
.ledger__row:last-child { border-bottom: 0; }
.ledger dt { font-weight: 700; color: var(--sec-mark); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-size: 0.82rem; }
.ledger dd { margin: 0; }
.ledger .price { white-space: normal; }

.bridge-card--photo {
  background: var(--card-light);
  color: var(--ink-dark);
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--brand-primary);
  padding: var(--space-s) var(--space-l);
  display: grid;
  gap: var(--space-m);
  align-items: center;
}
@media (min-width: 48rem) { .bridge-card--photo { grid-template-columns: 14rem 1fr; } }
.bridge-hairline { border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); padding-block: var(--space-xs); }

.ba__frame { position: relative; --pos: 50%; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize; border: 1px solid var(--sec-border); border-radius: 0; }
.ba__frame img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.ba__line { position: absolute; inset: 0; pointer-events: none; transform: translateX(var(--pos)); border-left: 2px solid var(--card-light); }
.ba__knob { position: absolute; top: 50%; left: -1px; width: var(--tap); aspect-ratio: 1; translate: -50% -50%; display: grid; place-items: center;
  border-radius: 50%; background: var(--card-light); color: var(--ink-dark); box-shadow: 0 0.25rem 0.75rem color-mix(in oklab, var(--bg-deep) 30%, transparent); }
.ba__range:focus-visible ~ .ba__line .ba__knob { outline: 3px solid var(--ink-dark); outline-offset: 3px; }
.ba__tag { position: absolute; top: var(--space-s); padding: 0.25em 0.75em; border-radius: 2px; background: var(--card-light); color: var(--ink-dark);
  font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; border: 1px solid var(--border-light); }
.ba { margin: 0; display: grid; gap: var(--space-xs); } .ba__tag--before { left: var(--space-s); } .ba__tag--after { right: var(--space-s); }
.ba:not(.is-ready) :is(.ba__line, .ba__tag--before, .ba__presets) { display: none; }
.ba__presets { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

.faq { display: grid; gap: 0; border-top: 1px solid var(--sec-border); }
.faq details { background: var(--sec-card); border-bottom: 1px solid var(--sec-border); border-left: 1px solid var(--sec-border); border-right: 1px solid var(--sec-border); border-radius: 0; padding: var(--space-xs) var(--space-m); }
.faq summary { cursor: pointer; font-weight: 700; min-height: var(--tap); display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); }
.faq details > div { padding-top: var(--space-xs); color: var(--sec-ink-muted); }

.territory { margin: 0; padding: var(--space-m); background: var(--sec-card); border: 1px solid var(--sec-border); border-radius: 0; }
.territory svg { width: 100%; height: auto; }
.territory a { fill: var(--sec-mark); font-weight: 700; text-decoration: none; }
.territory text { fill: var(--sec-ink); font-family: var(--font-sans); font-size: 0.95rem; font-weight: 600; }

.callbar { position: fixed; inset: auto 0 0; z-index: 50; display: grid; grid-template-columns: 3fr 2fr; gap: var(--space-xs);
  padding: var(--space-xs) var(--space-s) calc(var(--space-xs) + env(safe-area-inset-bottom)); background: var(--card-light);
  border-top: 1px solid var(--border-light); transition: transform var(--dur-base) var(--ease-out-expo), visibility 0s; }
.js .callbar:not(.is-on) { transform: translateY(110%); visibility: hidden; transition: transform var(--dur-fast) var(--ease-out-expo), visibility 0s var(--dur-fast); }
.callbar a { min-height: 3rem; font-weight: 600; }
@media (min-width: 48rem) { .callbar { display: none; } }
@media (max-width: 47.99rem) { body:has(.callbar) { padding-bottom: calc(4rem + env(safe-area-inset-bottom)); } }

.drawer { position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0; border: 0; inline-size: min(100%, 36rem); block-size: 100%;
  max-block-size: none; max-inline-size: 100%; overflow-y: auto; overscroll-behavior: contain; background: var(--card-light); color: var(--ink-dark); }
.drawer::backdrop { background: color-mix(in oklab, var(--bg-deep) 60%, transparent); }
.drawer[open] { animation: drawer-in var(--dur-base) var(--ease-out-expo); }
@keyframes drawer-in { from { transform: translateX(100%); } }
.drawer__body { min-block-size: 100%; padding: var(--space-l); }
.drawer__close { float: right; background: transparent; border: 1px solid var(--border-light); border-radius: 2px; padding-inline: var(--space-s); color: inherit; cursor: pointer; }
body:has(.drawer[open]) { overflow: hidden; }
.quote { background: var(--card-light); color: var(--ink-dark); padding: var(--space-m); border: 1px solid var(--border-light); border-radius: 0; }
.quote fieldset { margin: 0 0 var(--space-s); padding: 0; border: 0; display: grid; gap: var(--space-xs); }
.quote legend { font-size: var(--step-1); font-weight: 700; margin-bottom: var(--space-xs); }
.quote :is(input:not([type=radio]):not([type=file]), select, textarea) { inline-size: 100%; padding: var(--space-xs) var(--space-s);
  border: 1px solid var(--border-light); border-radius: 2px; background: var(--card-light); color: var(--ink-dark); }
.quote label:has(> input[type=radio]) { display: flex; gap: var(--space-s); align-items: center; min-height: var(--tap); }
.quote label:has(> input:checked) { font-weight: 600; }
.field__error { margin: 0; font-weight: 600; color: var(--accent-secondary); } .field__error::before { content: "! "; }
.hp { display: none !important; }
.quote [data-state] { display: none; padding: var(--space-m); border-radius: 2px; border: 1px solid var(--border-light); margin-top: var(--space-m); }
.quote[data-status="loading"] [data-state="loading"], .quote[data-status="error"] [data-state="error"], .quote[data-status="success"] [data-state="success"] { display: block; }
.quote[data-status="success"] :is(fieldset, .quote__nav, [data-progress]) { display: none; }
.quote[data-status="loading"] [data-submit]::after { content: ""; inline-size: 1em; block-size: 1em; border: 2px solid currentColor; border-inline-end-color: transparent;
  border-radius: 50%; animation: spin var(--dur-reveal) linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }

.site-footer { padding-block: var(--space-xl); border-top: 1px solid var(--border-deep); }
.site-footer .grid { border: 0; gap: var(--space-xl); }
.site-footer ul { list-style: none; padding: 0; margin: 0 0 var(--space-s); display: grid; gap: 0; }
.site-footer li a { justify-content: flex-start; }
.ft--1 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-l); padding-bottom: var(--space-l); border-bottom: 1px solid var(--border-deep); margin-bottom: var(--space-l); }
.ft--1 .tel { font-family: var(--font-display); font-size: var(--step-3); font-weight: 700; text-decoration: none; display: inline-block; margin-block: var(--space-xs); }
.ft--4 { margin-top: var(--space-l); padding-top: var(--space-m); border-top: 1px solid var(--border-deep); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-m); color: var(--ink-muted-deep); }
.ft--4 ul { display: flex; flex-wrap: wrap; gap: var(--space-m); margin: 0; }
.icon-inline { width: 1.5rem; height: 1.5rem; display: inline-block; vertical-align: middle; color: currentColor; }