/* Bilbrey Built. Page styles on top of the scrollcraft floor.
   Two grounds, hard cuts: navy (from the mark) and marble white. One accent
   hue, two stops, keyed to the ground. */

@font-face {
  font-family: "Archivo";
  src: url("fonts/Archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --sc-canvas:      #0e1420;
  --sc-surface:     #172033;
  --sc-ink:         #f2efe8;
  --sc-ink-soft:    #a9b0bd;
  --sc-accent:      #e2a72e;
  --sc-accent-ink:  #14100a;
  --sc-font-display: "Archivo", "Archivo Fallback", system-ui, sans-serif;
  --sc-font-text:    "Archivo", system-ui, sans-serif;
  --sc-font-mono:    "Archivo", system-ui, sans-serif;
  --sc-shadow-color: 222 40% 4%;
  --sc-r-sm: 4px; --sc-r-md: 8px;
  --sc-track-tight: -0.022em;
  --navy: #0e1420;
  --navy-deep: #090d15;
  --bar-h: 4.6rem;
  color-scheme: dark;
}
.room--light, .table--light {
  --sc-canvas:     #f5f2ed;
  --sc-surface:    #ffffff;
  --sc-ink:        #141a26;
  --sc-ink-soft:   #5b6270;
  --sc-accent:     #8a6412;
  --sc-accent-ink: #fff8e8;
  --sc-shadow-color: 40 20% 20%;
  background: var(--sc-canvas);
  color: var(--sc-ink);
  color-scheme: light;
}
.room--light ::selection { background: #e2a72e; color: #14100a; }

/* ------------------------------------------------------------ type voice -- */
.sc-display {
  font-weight: 800;
  font-stretch: 112%;
  text-transform: uppercase;
  letter-spacing: -0.018em;
}
.sc-display--lg { letter-spacing: -0.012em; }
.sc-display--md { letter-spacing: -0.008em; }
.sc-lede { font-weight: 450; }
.sc-body { font-weight: 420; }
:root { --sc-leading-body: 1.58; }
.room--light .sc-body, .room--light .sc-lede { letter-spacing: -0.002em; }
.eyebrow {
  margin: 0 0 var(--sc-3);
  font-size: var(--sc-t-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sc-accent);
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* -------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  padding: 0.82em 1.35em;
  border-radius: var(--sc-r-sm);
  font-weight: 700;
  font-size: var(--sc-t-sm);
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out);
}
.btn:active { transform: translateY(1px) scale(0.985); }
.btn--gold { background: #e2a72e; color: #14100a; box-shadow: var(--sc-e1), inset 0 1px 0 rgba(255,255,255,0.28); }
.btn--gold:hover { background: #edb43a; }
.btn--ghost { color: var(--sc-ink); border-color: var(--sc-hairline-strong); background: color-mix(in oklab, var(--sc-canvas) 40%, transparent); backdrop-filter: blur(6px); }
.btn--ghost:hover { border-color: var(--sc-ink); }
.btn--lg { font-size: var(--sc-t-base); padding: 0.95em 1.6em; }
.btn:focus-visible { outline: 2px solid #e2a72e; outline-offset: 3px; }

/* ------------------------------------------------------------------ bar -- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  height: var(--bar-h);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sc-5);
  padding-inline: clamp(1rem, 3vw, 2.5rem);
  color: #f2efe8;
  background: linear-gradient(to bottom, rgba(14,20,32,0.92), rgba(14,20,32,0.72));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(242,239,232,0.08);
}
.bar__mark { display: block; height: 3.5rem; }
.bar__mark img { height: 100%; width: auto; }
.bar__index { display: flex; gap: clamp(0.8rem, 1.8vw, 1.6rem); justify-content: center; }
.bar__index a {
  font-size: var(--sc-t-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; color: #a9b0bd; padding: 0.4rem 0.1rem; position: relative;
  transition: color 140ms var(--sc-ease-out);
}
.bar__index a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #e2a72e; transform: scaleX(0); transform-origin: 0 50%; transition: transform 200ms var(--sc-ease-out); }
.bar__index a:hover { color: #f2efe8; }
.bar__index a[aria-current="true"] { color: #f2efe8; }
.bar__index a[aria-current="true"]::after { transform: scaleX(1); }
.bar__actions { display: flex; align-items: center; gap: var(--sc-4); }
.bar__phone { display: inline-flex; align-items: center; gap: 0.5em; font-weight: 700; font-size: var(--sc-t-sm); text-decoration: none; color: #f2efe8; font-variant-numeric: tabular-nums; }
.bar__phone:hover { color: #e2a72e; }
.bar__cta { padding: 0.7em 1.1em; }
.tally {
  display: inline-grid; place-items: center; min-width: 1.45em; height: 1.45em; padding-inline: 0.35em;
  border-radius: 999px; background: #14100a; color: #e2a72e; font-size: 0.78em; font-weight: 800; font-variant-numeric: tabular-nums;
}
.tally[hidden] { display: none; }
.tally.is-bump { animation: bump 360ms var(--sc-ease-out); }
@keyframes bump { 0% { transform: scale(0.8); } 55% { transform: scale(1.22); } 100% { transform: scale(1); } }
@media (max-width: 1040px) { .bar__index { display: none; } .bar { grid-template-columns: auto 1fr auto; } }
@media (max-width: 560px) {
  .bar { gap: var(--sc-3); padding-inline: 0.9rem; }
  .bar__mark { height: 2.9rem; }
  .bar__phone span { display: none; }
  .bar__phone { padding: 0.55rem; border: 1px solid rgba(242,239,232,0.18); border-radius: var(--sc-r-sm); }
}

/* ------------------------------------------------------------- arrival -- */
.arrival { background: var(--navy); }
.door { background: var(--navy); }
.door__room { position: absolute; inset: -6% 0; z-index: 0; }
.door__room picture, .door__room img { width: 100%; height: 100%; }
.door__room img {
  object-fit: cover; object-position: 50% 55%;
  transform: scale(calc(1 + var(--sc-p, 0) * 0.12));
  transform-origin: 62% 60%;
}
.door__scrim {
  z-index: 2; opacity: clamp(0, calc((var(--sc-p, 0) - 0.03) * 7), 1);
  background: linear-gradient(to right,
    color-mix(in oklab, var(--navy) 96%, transparent) 0%,
    color-mix(in oklab, var(--navy) 88%, transparent) 38%,
    color-mix(in oklab, var(--navy) 40%, transparent) 54%,
    transparent 68%);
}
.door__frame { position: absolute; inset: 0; z-index: 3; overflow: clip; pointer-events: none; }
.door__hole {
  position: absolute;
  left: 58vw; top: calc(var(--bar-h) + 4vh);
  width: 29vw; height: calc(96vh - var(--bar-h) - 8vh);
  border: 3px solid #e2a72e;
  box-shadow: 0 0 0 4px #1b2437, 0 0 0 400vmax var(--navy);
  transform: translateX(calc(var(--sc-p, 0) * -22vw)) scale(calc(1 + var(--sc-p, 0) * 2.9));
  transform-origin: 50% 50%;
}
.door__haze {
  position: absolute; inset: -20% -10% auto; height: 60%; z-index: 4; pointer-events: none;
  background: radial-gradient(60% 60% at 30% 0%, rgba(226,167,46,0.14), transparent 70%);
  opacity: calc(1 - var(--sc-p, 0));
}
.door__copy {
  z-index: 20; inset-inline: auto; left: var(--sc-gutter); bottom: auto; top: 50%; translate: 0 -50%;
  max-width: min(42rem, 50vw);
}
.door__copy h1 { max-width: 12ch; font-size: clamp(2.6rem, 1.4rem + 5.2vw, 6.4rem); }
.door__lede { margin-top: var(--sc-5); max-width: 40ch; color: var(--sc-ink); }
.door__actions { display: flex; flex-wrap: wrap; gap: var(--sc-3); margin-top: var(--sc-6); }
@media (max-width: 860px) {
  .door__hole {
    left: 12vw; top: calc(var(--bar-h) + 2vh);
    width: 76vw; height: clamp(22vh, calc(100svh - var(--bar-h) - 2vh - 23rem), 46vh);
    transform: translateY(calc(var(--sc-p, 0) * 22vh)) scale(calc(1 + var(--sc-p, 0) * 2.2));
  }
  .door__copy { inset-inline: var(--sc-gutter); top: auto; translate: none; bottom: clamp(1.5rem, 5vh, 3rem); max-width: none; }
  .door__scrim { background: linear-gradient(to top,
    color-mix(in oklab, var(--navy) 97%, transparent) 0%,
    color-mix(in oklab, var(--navy) 92%, transparent) 40%,
    color-mix(in oklab, var(--navy) 45%, transparent) 58%,
    transparent 70%); }
  .door__copy h1 { font-size: var(--sc-t-2xl); max-width: 14ch; }
  .door__lede { font-size: var(--sc-t-base); margin-top: var(--sc-4); }
  .door__actions { margin-top: var(--sc-5); }
  .door__scrim { opacity: 1; }
  .door__room img { object-position: 62% 50%; transform: translateY(calc(-24% + var(--sc-p, 0) * 16%)) scale(calc(1.2 - var(--sc-p, 0) * 0.14)); transform-origin: 64% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .door__hole { transform: translateX(-8vw) scale(1.9); }
  .door__room img { transform: none; }
  .door__scrim { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 860px) {
  .door__hole { transform: translateY(10vh) scale(1.6); }
}
@media (max-width: 860px) and (max-height: 620px) {
  .door__lede { display: none; }
}

/* ------------------------------------------------------------ services -- */
.services { background: var(--navy); padding-top: clamp(3rem, 6vw, 6rem); }
.services .sc-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--sc-8) var(--sc-9); }
.services__head { grid-column: 1; }
.ledger { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.ledger__row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--sc-5);
  padding-block: var(--sc-4);
  border-top: 1px solid var(--sc-hairline);
}
.ledger__row:last-child { border-bottom: 1px solid var(--sc-hairline); }
.ledger dt { font-weight: 800; font-stretch: 108%; text-transform: uppercase; letter-spacing: 0.02em; font-size: var(--sc-t-base); }
.ledger dd { margin: 0; color: var(--sc-ink-soft); }
.steps { grid-column: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-5); align-self: end; }
.steps li { display: grid; grid-template-columns: 2.2rem 1fr; column-gap: var(--sc-3); }
.steps__n { grid-row: 1 / span 2; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 999px; border: 1px solid #e2a72e; color: #e2a72e; font-weight: 800; font-size: var(--sc-t-sm); }
.steps h3 { margin: 0.1rem 0 0.25rem; font-size: var(--sc-t-base); font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; }
.steps p { margin: 0; color: var(--sc-ink-soft); max-width: 36ch; }
@media (max-width: 860px) {
  .services .sc-wrap { grid-template-columns: 1fr; gap: var(--sc-7); }
  .ledger { grid-column: 1; grid-row: auto; }
  .steps { grid-column: 1; }
  .ledger__row { grid-template-columns: 1fr; gap: var(--sc-1); }
}

/* --------------------------------------------------------------- labels -- */
.label__name { margin: 0; font-weight: 800; font-stretch: 108%; text-transform: uppercase; letter-spacing: 0.01em; font-size: var(--sc-t-lg); line-height: 1.1; }
.label__spec { margin: var(--sc-2) 0 0; color: var(--sc-ink-soft); max-width: 52ch; text-wrap: pretty; }
.add {
  display: inline-grid; grid-template-areas: "a"; align-items: center;
  padding: 0.7em 1.1em; border-radius: var(--sc-r-sm); font-weight: 700; font-size: var(--sc-t-sm); letter-spacing: 0.02em;
  background: transparent; color: var(--sc-ink); border: 1px solid var(--sc-hairline-strong); cursor: pointer;
  transition: background-color 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.add > span { grid-area: a; display: inline-flex; align-items: center; gap: 0.5em; transition: opacity 140ms var(--sc-ease-out); }
.add__off { opacity: 0; }
.add[aria-pressed="true"] { background: var(--sc-accent); color: var(--sc-accent-ink); border-color: var(--sc-accent); }
.add[aria-pressed="true"] .add__on { opacity: 0; }
.add[aria-pressed="true"] .add__off { opacity: 1; }
.add:hover { border-color: var(--sc-ink); }
.add:active { transform: scale(0.97); }
.add:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }

/* ---------------------------------------------------------------- entry -- */
.entry { padding-block: clamp(3rem, 6vw, 6rem); }
.entry__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--sc-8) var(--sc-9); align-items: center; }
.entry__fig { margin: 0; width: 100%; max-width: 34rem; aspect-ratio: 780 / 1330; max-height: 86vh; overflow: hidden; border-radius: var(--sc-r-md); box-shadow: var(--sc-e3); }
.entry__fig picture, .entry__fig img { width: 100%; height: 100%; }
.entry__fig img { object-fit: cover; object-position: 50% 50%; }
.entry__copy { display: grid; gap: var(--sc-6); justify-items: start; }
.entry__copy .sc-display { max-width: 12ch; }
.entry__copy .label__spec { max-width: 46ch; }
@media (max-width: 860px) {
  .entry__grid { grid-template-columns: 1fr; gap: var(--sc-6); }
  .entry__fig { max-height: 70vh; max-width: none; }
  .entry__copy { gap: var(--sc-5); }
}

/* ---------------------------------------------------------------- rooms -- */
.rooms { background: var(--navy); }
.rooms__stage { display: flex; align-items: center; background: var(--navy); }
.rail { gap: clamp(1.25rem, 3vw, 2.5rem); padding-inline: var(--sc-gutter); padding-top: var(--bar-h); align-items: stretch; }
.rail__lead { flex: 0 0 auto; width: clamp(16rem, 24vw, 22rem); display: flex; flex-direction: column; justify-content: center; gap: var(--sc-4); padding-right: var(--sc-5); }
.rail__lead .sc-body { color: var(--sc-ink-soft); }
.card { flex: 0 0 auto; width: clamp(17rem, 27vw, 24rem); display: flex; flex-direction: column; gap: var(--sc-4); }
.card__img { aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--sc-r-md); box-shadow: var(--sc-e2), var(--sc-edge); background: var(--sc-surface); }
.card__img img { width: 100%; height: 100%; object-fit: cover; }
.card .label { flex: 1 0 auto; }
.card .label__name { font-size: var(--sc-t-base); }
.card .label__spec { font-size: var(--sc-t-sm); }
.card .add { align-self: flex-start; }
.rail__end { flex: 0 0 auto; width: clamp(14rem, 20vw, 18rem); display: flex; flex-direction: column; justify-content: center; gap: var(--sc-4); padding-left: var(--sc-5); }
/* items settle in sequence as the drawer is pulled */
@media (prefers-reduced-motion: no-preference) {
  .card { opacity: calc(0.55 + clamp(0, (var(--sc-p, 0) - var(--i, 0) * 0.11) * 4, 1) * 0.45); }
  .card:nth-child(2) { --i: 0; } .card:nth-child(3) { --i: 1; } .card:nth-child(4) { --i: 2; } .card:nth-child(5) { --i: 3; } .card:nth-child(6) { --i: 4; }
}
@media (max-width: 860px) {
  .rail { padding-top: calc(var(--bar-h) + 0.5rem); }
  .rail__lead { width: 72vw; }
  .card { width: 74vw; }
  .card__img { aspect-ratio: 4 / 5; max-height: 52vh; }
  .rail__end { width: 70vw; }
}
@media (max-height: 640px) { .card__img { max-height: 46vh; } }

/* ---------------------------------------------------------------- quiet -- */
.quiet { background: var(--navy-deep); min-height: 100vh; min-height: 100svh; display: grid; align-items: center; padding-block: var(--sc-section); }
.quiet__inner { display: grid; gap: var(--sc-6); max-width: 60rem; }
.quiet__rule { width: 4rem; height: 2px; border: 0; background: #e2a72e; margin: 0; }
.quiet__line { margin: 0; font-size: clamp(1.4rem, 1rem + 1.8vw, 2.4rem); line-height: 1.3; font-weight: 500; letter-spacing: -0.012em; max-width: 30ch; text-wrap: pretty; }

/* ----------------------------------------------------------------- bath -- */
.bath { background: #f5f2ed; }
.bath__stage { background: #f5f2ed; }
.bath__base { position: absolute; inset: 0; z-index: 0; }
.bath__base picture, .bath__base img { width: 100%; height: 100%; }
.bath__base img {
  object-fit: cover; object-position: 50% 50%;
  transform: translateX(calc(clamp(0, (var(--sc-p, 0) - 0.3) * 2.2, 1) * -13%)) scale(calc(1.06 - clamp(0, var(--sc-p, 0) * 1.4, 1) * 0.06));
}
.bath__panel { position: absolute; top: 0; bottom: 0; margin: 0; z-index: 1; box-shadow: 0 0 0 1px rgba(20,26,38,0.12); }
.bath__panel picture, .bath__panel img { width: 100%; height: 100%; }
.bath__panel img { object-fit: cover; }
.bath__panel--shower { left: 0; width: 30%; }
.bath__panel--shower img { object-position: 50% 45%; }
.bath__panel--vanity { right: 0; width: 24%; }
.bath__panel--vanity img { object-position: 46% 50%; }
.bath__scrim { z-index: 2; }
.bath__copy { z-index: 20; inset-inline: auto; left: var(--sc-gutter); bottom: clamp(2.5rem, 9vh, 6rem); }
.bath__copy h2 { color: #141a26; }
.bath__copy--label { display: grid; gap: var(--sc-4); justify-items: start; max-width: min(48rem, 60vw); }
.label--onphoto .label__name { color: #141a26; }
.label--onphoto .label__spec { color: #2f3644; max-width: 60ch; }
.add--onphoto { background: rgba(255,255,255,0.72); border-color: rgba(20,26,38,0.28); color: #141a26; backdrop-filter: blur(6px); }
@media (max-width: 860px) {
  .bath__base img { transform: none; object-position: 62% 50%; }
  .bath__panel--shower, .bath__panel--vanity { width: 100%; }
  .bath__copy { inset-inline: var(--sc-gutter); }
  .bath__copy--label { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bath__base img { transform: translateX(-13%); }
}

/* ---------------------------------------------------------------- table -- */
.table { background: var(--navy); padding-bottom: 0; }
.table__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--sc-8) var(--sc-9); align-items: start; }
.reach { list-style: none; margin: var(--sc-7) 0 0; padding: 0; display: grid; }
.reach li { display: grid; grid-template-columns: 5rem 1fr; gap: var(--sc-4); padding-block: var(--sc-4); border-top: 1px solid var(--sc-hairline); align-items: baseline; }
.reach li:last-child { border-bottom: 1px solid var(--sc-hairline); }
.reach__k { font-size: var(--sc-t-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft); }
.reach__v { color: var(--sc-ink); text-decoration: none; text-wrap: pretty; }
a.reach__v:hover { color: #e2a72e; }
.reach__v--big { font-size: clamp(1.6rem, 1rem + 2.2vw, 2.6rem); font-weight: 800; font-stretch: 108%; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; line-height: 1.1; }

.quote { background: var(--sc-surface); border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-md); padding: clamp(1.25rem, 3vw, 2.5rem); box-shadow: var(--sc-e3), var(--sc-edge); }
.quote__intro { margin: 0 0 var(--sc-3); font-weight: 800; font-stretch: 108%; text-transform: uppercase; letter-spacing: 0.02em; }
.chips { border: 0; margin: 0 0 var(--sc-6); padding: 0; display: flex; flex-wrap: wrap; gap: var(--sc-2); }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span {
  display: inline-block; padding: 0.5em 0.9em; border-radius: 999px; font-size: var(--sc-t-sm); font-weight: 600;
  border: 1px solid var(--sc-hairline-strong); color: var(--sc-ink); background: transparent;
  transition: background-color 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out);
}
.chip input:checked + span { background: #e2a72e; border-color: #e2a72e; color: #14100a; }
.chip input:focus-visible + span { outline: 2px solid #e2a72e; outline-offset: 2px; }
.chip:hover span { border-color: var(--sc-ink); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-4) var(--sc-4); }
.field { display: grid; gap: 0.4rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field__l { font-size: var(--sc-t-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft); }
.field__l em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 500; }
.field input, .field textarea {
  width: 100%; padding: 0.8em 0.9em; border-radius: var(--sc-r-sm);
  background: color-mix(in oklab, var(--sc-canvas) 70%, transparent); border: 1px solid var(--sc-hairline-strong); color: var(--sc-ink);
  transition: border-color 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out);
}
.field input:hover, .field textarea:hover { border-color: color-mix(in oklab, var(--sc-ink) 40%, transparent); }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid #e2a72e; outline-offset: 1px; border-color: #e2a72e; }
.field textarea { resize: vertical; min-height: 7rem; }
.field input:user-invalid, .field textarea:user-invalid, .quote.is-checked .field input:invalid { border-color: #e06c4a; }
.radios { display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-5); align-items: center; }
.radios legend { padding: 0; margin-bottom: 0.4rem; width: 100%; }
.radios label { display: inline-flex; align-items: center; gap: 0.5em; cursor: pointer; font-size: var(--sc-t-sm); }
.radios input { width: 1.05em; height: 1.05em; margin: 0; accent-color: #e2a72e; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.quote__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-4) var(--sc-6); margin-top: var(--sc-6); }
.quote__note { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); max-width: 32ch; }
.quote__status { margin: var(--sc-4) 0 0; min-height: 1.5em; font-weight: 600; }
.quote__status.is-error { color: #ffb199; }
.quote__status.is-ok { color: #e2a72e; }
.quote.is-sent .chips, .quote.is-sent .field-grid, .quote.is-sent .quote__foot, .quote.is-sent .quote__intro { display: none; }
.quote__done { display: grid; gap: var(--sc-3); }
.quote__done h3 { margin: 0; font-weight: 800; font-stretch: 110%; text-transform: uppercase; font-size: var(--sc-t-xl); letter-spacing: -0.01em; }
.quote__done p { margin: 0; color: var(--sc-ink-soft); max-width: 48ch; }
.btn[disabled] { opacity: 0.6; cursor: progress; }
@media (max-width: 960px) {
  .table__grid { grid-template-columns: 1fr; gap: var(--sc-7); }
  .field-grid { grid-template-columns: 1fr; }
  .reach li { grid-template-columns: 4.2rem 1fr; }
}

/* --------------------------------------------------------------- footer -- */
.foot { margin-top: var(--sc-9); padding-block: var(--sc-7) var(--sc-8); border-top: 1px solid var(--sc-hairline); background: var(--navy-deep); }
.foot__grid { display: flex; align-items: center; gap: var(--sc-6); }
.foot__mark { width: clamp(5rem, 8vw, 7rem); height: auto; flex: 0 0 auto; }
.foot__name { margin: 0; font-weight: 800; font-stretch: 108%; text-transform: uppercase; letter-spacing: 0.02em; }
.foot__meta { margin: var(--sc-1) 0 0; color: var(--sc-ink-soft); }
.foot__meta a { color: var(--sc-ink-soft); text-decoration: none; }
.foot__meta a:hover { color: #e2a72e; }
.foot__fine { margin: var(--sc-3) 0 0; font-size: var(--sc-t-xs); color: color-mix(in oklab, var(--sc-ink-soft) 70%, transparent); }
@media (max-width: 560px) { .foot__grid { flex-direction: column; align-items: flex-start; } }

/* grain reads as dirt on the white grounds; keep it, lighter */
.sc-grain { opacity: 0.035; }