/* SR Design Interiors template — shared page scaffolding for all four pages. Layout and
   web-scale sizing only; every color, font, radius and shadow comes from
   ../../styles.css. Voice: precision millwork/shop-drawing craft — the
   system's own blueprint grammar (kicker + rule, wireframe cells with
   registration-cross corners, duotoned photography) carried across a
   multi-page site rather than one scrolling landing.

   Rhythm: a 24px leading unit (16px Barlow body at 1.5), 12px half-step. */
:root {
  --leading: 24px;
  --half: 12px;
  --edge: clamp(20px, 5vw, 72px);
  --measure: 60ch;
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; text-wrap: pretty; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--edge); }

/* — nav — */
.nav { padding-inline: max(var(--edge), calc((100% - 1200px) / 2 + var(--edge))); }
.nav a { white-space: nowrap; }
.nav a[aria-current='page'] { color: var(--color-accent); }
.nav-toggle { display: none; background: none; border: 1px solid var(--color-divider); padding: 9px 10px; cursor: pointer; }
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--color-text); }
.nav-toggle span + span { margin-top: 4px; }
@media (max-width: 720px) {
  .nav { flex-wrap: wrap; row-gap: 0; }
  .nav-toggle { display: block; margin-left: auto; }
  .nav a:not(.nav-brand), .nav .btn { display: none; }
  .nav.open a:not(.nav-brand) { display: block; width: 100%; padding: 14px 0 12px; border-top: 1px solid var(--color-divider); font-size: 16px; }
  .nav.open .btn { display: block; width: 100%; margin: 12px 0 4px; }
}

/* — caption rules: label sits above a drawn 1px rule — */
.kicker {
  display: block; font-size: 13px; line-height: var(--half);
  letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
  color: var(--color-accent-700);
  font-feature-settings: "tnum" 1;
  margin: 0 0 var(--half);
}
.caption-rule { height: 1px; border: 0; margin: 0 0 calc(var(--leading) - var(--half));
  background: var(--color-divider); }

/* — hero (home): full-strength condensed display — */
.hero { padding: calc(4 * var(--leading)) 0 calc(3 * var(--leading)); }
.display {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(48px, 7vw, 92px);
  line-height: clamp(50px, 7.3vw, 96px);
  letter-spacing: 0.01em; text-transform: uppercase; margin: 0;
  margin-left: -0.052em;
  text-box: trim-both cap alphabetic;
}
.display .line { display: block; }
.hero .sub { font-size: 16px; line-height: var(--leading); max-width: var(--measure);
  margin: calc(1.5 * var(--leading) - 1cap) 0 0;
  text-box: trim-both cap alphabetic; }
.hero .row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--leading); }

/* — page-hero (subpages): shorter, title-case, one line of scale down — */
.page-hero { padding: calc(2.5 * var(--leading)) 0 calc(2 * var(--leading)); }
.page-hero h1 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(36px, 5vw, 60px); line-height: 1.05; text-transform: uppercase;
  letter-spacing: 0.01em; margin: 0; margin-left: -0.04em;
  text-box: trim-both cap alphabetic;
}
.page-hero .sub { font-size: 16px; line-height: var(--leading); max-width: var(--measure);
  margin: calc(var(--leading) - 1cap) 0 0; color: color-mix(in srgb, var(--color-text) 78%, transparent);
  text-box: trim-both cap alphabetic; }

/* — wireframe cells: the system's own card grammar — */
.cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(20px, 3vw, 40px);
  margin-top: calc(var(--leading) - var(--half)); }
.cell-frame { position: relative; border: 1px solid var(--color-divider); padding: var(--leading); }
.cell-frame > .corner { position: absolute; width: 15px; height: 15px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent); pointer-events: none; }
.cell-frame > .corner::before { content: ""; position: absolute; left: 7px; top: 0; width: 1px; height: 100%; background: currentColor; }
.cell-frame > .corner::after  { content: ""; position: absolute; top: 7px; left: 0; width: 100%; height: 1px; background: currentColor; }
.cell-frame > .corner.tl { top: -8px; left: -8px; }
.cell-frame > .corner.tr { top: -8px; right: -8px; }
.cell-frame > .corner.bl { bottom: -8px; left: -8px; }
.cell-frame > .corner.br { bottom: -8px; right: -8px; }
.cell-frame .num { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; letter-spacing: 0.06em; color: var(--color-accent-700); margin: 0 0 var(--half); }
.cell-frame h2, .cell-frame h3 { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 21px; line-height: var(--leading); letter-spacing: 0.02em; text-transform: uppercase;
  margin: 0; text-box: trim-both cap alphabetic; }
.cell-frame p { font-size: 15px; line-height: var(--leading); margin: calc(var(--leading) - 1cap) 0 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  text-box: trim-both cap alphabetic; }

/* — imagery split — */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--leading) clamp(24px, 5vw, 96px); align-items: center;
  padding: calc(2.5 * var(--leading)) 0; }
.split.reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split.reverse .split-figure { order: 2; }
.split-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 32px; line-height: calc(1.5 * var(--leading)); letter-spacing: 0.02em; text-transform: uppercase;
  margin: 0; text-box: trim-both cap alphabetic; }
.split-copy .note { font-size: 15px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: calc(var(--leading) - 1cap) 0 0; max-width: 48ch; text-box: trim-both cap alphabetic; }
.split-figure { margin: 0; }
.split-figure > .corner { position: absolute; width: 15px; height: 15px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent); pointer-events: none; }
.split-figure > .corner::before { content: ""; position: absolute; left: 7px; top: 0; width: 1px; height: 100%; background: currentColor; }
.split-figure > .corner::after  { content: ""; position: absolute; top: 7px; left: 0; width: 100%; height: 1px; background: currentColor; }
.split-figure > .corner.tl { top: -8px; left: -8px; }
.split-figure > .corner.tr { top: -8px; right: -8px; }
.split-figure > .corner.bl { bottom: -8px; left: -8px; }
.split-figure > .corner.br { bottom: -8px; right: -8px; }
.split-figure image-slot { width: 100%; aspect-ratio: 4 / 3; }

/* — quote — */
.quote { padding: calc(2 * var(--leading)) 0 calc(3 * var(--leading)); }
.quote blockquote {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(24px, 2.6vw, 34px); line-height: calc(1.5 * var(--leading));
  letter-spacing: 0; max-width: 36ch; margin: 0;
  text-indent: -0.316em;
  text-box: trim-both cap alphabetic;
}
.quote figcaption { font-size: 15px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin: calc(var(--leading) - 1cap) 0 0;
  text-indent: -0.885em;
  text-box: trim-both cap alphabetic; }
@media (max-width: 720px) { .quote blockquote, .quote figcaption { text-indent: 0; } }

/* — gallery (portfolio) — */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(20px, 3vw, 40px);
  margin-top: calc(var(--leading) - var(--half)); }
.proj-figure { position: relative; margin: 0; }
.proj-figure image-slot { width: 100%; aspect-ratio: 4 / 3; }
.proj-figure > .corner { position: absolute; width: 15px; height: 15px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent); pointer-events: none; }
.proj-figure > .corner::before { content: ""; position: absolute; left: 7px; top: 0; width: 1px; height: 100%; background: currentColor; }
.proj-figure > .corner::after  { content: ""; position: absolute; top: 7px; left: 0; width: 100%; height: 1px; background: currentColor; }
.proj-figure > .corner.tl { top: -8px; left: -8px; }
.proj-figure > .corner.tr { top: -8px; right: -8px; }
.proj-figure > .corner.bl { bottom: -8px; left: -8px; }
.proj-figure > .corner.br { bottom: -8px; right: -8px; }
.proj-card { margin-top: var(--half); }
.proj-card .card-title { margin-top: 4px; }

/* — steel stat / close band — */
.band { background: var(--color-accent-900); color: var(--color-bg); padding: calc(2.5 * var(--leading)) 0; }
.band h2 { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(28px, 3.2vw, 42px); text-transform: uppercase; letter-spacing: 0.01em;
  color: var(--color-bg); margin: 0; text-box: trim-both cap alphabetic; }
.band .sub { font-size: 15px; line-height: var(--leading); max-width: var(--measure);
  color: color-mix(in srgb, var(--color-bg) 78%, transparent);
  margin: calc(var(--leading) - 1cap) 0 0; text-box: trim-both cap alphabetic; }
.band .row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--leading); }
.band .btn-secondary { border-color: color-mix(in srgb, var(--color-bg) 40%, transparent); color: var(--color-bg); }
.band .btn-secondary:hover { background: color-mix(in srgb, var(--color-bg) 12%, transparent); }

/* — form panel (contact / consultation) — */
.form-panel { display: grid; gap: var(--space-4); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.info-frame { position: relative; border: 1px solid var(--color-divider); padding: var(--leading); }
.info-frame > .corner { position: absolute; width: 15px; height: 15px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent); pointer-events: none; }
.info-frame > .corner::before { content: ""; position: absolute; left: 7px; top: 0; width: 1px; height: 100%; background: currentColor; }
.info-frame > .corner::after  { content: ""; position: absolute; top: 7px; left: 0; width: 100%; height: 1px; background: currentColor; }
.info-frame > .corner.tl { top: -8px; left: -8px; }
.info-frame > .corner.tr { top: -8px; right: -8px; }
.info-frame > .corner.bl { bottom: -8px; left: -8px; }
.info-frame > .corner.br { bottom: -8px; right: -8px; }
.info-frame dl { margin: var(--leading) 0 0; display: grid; gap: var(--half); }
.info-frame dt { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent); margin: 0; }
.info-frame dd { font-size: 15px; margin: 2px 0 0; }
.seg-opt { white-space: nowrap; }

footer { padding: calc(2 * var(--leading)) 0; font-size: 13px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 70%, transparent); }

@media (max-width: 880px) { .split, .split.reverse { grid-template-columns: 1fr; } .split.reverse .split-figure { order: -1; } }
@media (max-width: 720px) { .hero, .page-hero { padding-top: calc(2 * var(--leading)); } }

/* — enquiry forms: file attachments — */
.field-hint { font-weight: 400; font-size: 12px; letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--color-text) 55%, transparent); }

/* The native input is hidden but focusable; .file-drop is its visible label. */
.file-field input[type="file"] {
  position: absolute; width: 1px; height: 1px; opacity: 0;
}
.file-drop {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--space-4);
  border: 1px dashed color-mix(in srgb, var(--color-text) 32%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-text) 2%, transparent);
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
}
.file-drop:hover { border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 5%, transparent); }
.file-field input[type="file"]:focus-visible + .file-drop {
  outline: 2px solid var(--color-accent); outline-offset: 2px;
}
.file-drop-cta { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-accent-700); }
.file-drop-note { font-size: 13px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 62%, transparent); }

.file-list { list-style: none; margin: var(--half) 0 0; padding: 0;
  display: grid; gap: 1px; background: var(--color-divider);
  border: 1px solid var(--color-divider); border-radius: var(--radius-sm); overflow: hidden; }
.file-list li { display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); background: var(--color-bg); font-size: 14px; }
.file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-size { font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--color-text) 58%, transparent); }
.file-remove { border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--color-accent-700);
  text-decoration: underline; text-underline-offset: 2px; }
.file-remove:hover { color: var(--color-accent-800); }
.file-list li.file-total { justify-content: flex-end; font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--color-surface);
  color: color-mix(in srgb, var(--color-text) 55%, transparent); }

.file-error { margin: var(--half) 0 0; padding: var(--space-3) var(--space-4);
  font-size: 14px; line-height: var(--leading);
  border-left: 3px solid #b3261e; border-radius: var(--radius-sm);
  background: color-mix(in srgb, #b3261e 8%, transparent); color: #8c1d18; }
.file-error[hidden], .file-list[hidden] { display: none; }

.band-alt-link { font-size: 14px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-bg) 78%, transparent); }
.band-alt-link:hover { color: var(--color-bg); }

button[type="submit"]:disabled { opacity: 0.6; cursor: progress; }

/* — thank-you page — */
.thanks { padding: calc(4 * var(--leading)) 0 calc(5 * var(--leading)); max-width: 62ch; }
.thanks-next { list-style: none; margin: calc(1.5 * var(--leading)) 0 0; padding: 0;
  display: grid; gap: var(--half); }
.thanks-next li { display: grid; grid-template-columns: 22px 1fr; gap: var(--space-3);
  font-size: 15px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.thanks-next li::before { content: attr(data-step);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 13px; color: var(--color-accent-700); }