@font-face {
  font-family: "Barlow Condensed";
  src: url("fonts/barlow-condensed-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --ink: #161b1e;
  --bg: #191d20;
  --surface: #292f33;
  --walnut: #443731;
  --walnut-deep: #302722;
  --text: #f7f6f3;
  --accent: #96543b;
  --accent-hover: #82452f;
  --muted: #d0cbc6;
  --line: #514943;
  --radius: 12px;
  --gutter: clamp(20px,5vw,80px);
  --sans: "Helvetica Neue", Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --wash: #242425;
  --surface-hover: #39322e;
  --control-border: #a99b8c;
  --accent-on-dark: #a05f44;
  --bronze: #d3ad72;
  --display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --response-time: 260ms;
  --response-ease: cubic-bezier(.2,.7,.2,1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.65 var(--sans); }
body.dialog-open { overflow: hidden; }
[hidden] { display: none !important; }
img { display: block; width: 100%; height: auto; object-fit: cover; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
figure, p { margin: 0; }
p + p { margin-top: 16px; }
h1, h2, h3 { margin: 0; line-height: 1.14; font-weight: 600; }
h1 { font-size: clamp(3rem, 5.4vw, 5.25rem); letter-spacing: -.055em; line-height: 1.04; }
h2 { font-size: clamp(2.1rem, 3.65vw, 3.5rem); letter-spacing: -.045em; }
h3 { font-size: 1.35rem; letter-spacing: -.025em; }
h1 em, .quote h2 em { font-family: var(--serif); color: var(--bronze); font-weight: 400; letter-spacing: -.055em; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 3px solid var(--bronze); outline-offset: 5px; }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 100; background: var(--surface); padding: 12px 18px; border-radius: 10px; }
.skip-link:focus { top: 12px; }
.site-header { position: sticky; top: 0; z-index: 30; min-height: 88px; padding: 12px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; background: var(--ink); border-bottom: 1px solid var(--line); }
.brand-logo { display: block; flex-shrink: 0; width: 200px; }
.brand-logo img { height: 62px; object-fit: contain; filter: brightness(0) invert(1); }
.site-header nav { display: flex; align-items: center; gap: 30px; font-size: .875rem; font-weight: 600; }
.site-header nav a { padding: 9px 0; transition: color .2s; }
.site-header .nav-cta { padding: 11px 22px; border: 1px solid var(--accent); color: var(--bronze); border-radius: 100px; }
.menu { display: none; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 50%; color: var(--text); background: var(--surface); }
.menu span { display: block; height: 2px; width: 20px; background: currentColor; margin: 5px auto; transition: transform .2s; }
.menu[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
main > section { width: min(100% - var(--gutter) * 2, 1160px); margin-inline: auto; }
.section { padding-block: clamp(56px, 7vw, 96px); }
.eyebrow, .kicker { font-size: .75rem; line-height: 1.6; letter-spacing: .12em; font-weight: 700; color: var(--bronze); }
.hero { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: clamp(28px,5vw,76px); align-items: center; padding-block: 56px 68px; }
.hero-copy { min-width: 0; }
.hero h1 { margin: 22px 0; }
.hero-copy > p { color: var(--muted); max-width: 510px; font-size: 1.0625rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn { min-height: 52px; display: inline-flex; justify-content: center; align-items: center; gap: 18px; padding: 13px 23px; border: 1px solid var(--control-border); border-radius: 100px; background: var(--surface); color: var(--text); font-size: .9375rem; line-height: 1.4; font-weight: 600; transition: background .2s, border-color .2s, box-shadow .2s; }
.btn.primary { background: var(--accent); color: #fff; border-color: var(--bronze); }
.hero-proof { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 16px; }
.assembly-preview { display: flex; align-items: center; gap: 20px; }
.assembly-copy { display: flex; flex-direction: column; align-items: flex-start; }
.assembly-copy strong { font-size: .9375rem; font-weight: 600; }
.assembly-copy > span { font-size: .875rem; color: var(--muted); }
.text-button { background: none; border: 0; padding: 4px 0; color: var(--bronze); font-size: .75rem; text-decoration: underline; text-underline-offset: 4px; }
.hero-visual { position: relative; width: min(100%, 330px); justify-self: center; padding-bottom: 65px; }
.hero-visual > img { aspect-ratio: 3 / 4; border-radius: 150px 150px 24px 24px; background: var(--surface); }
.project-tag { position: absolute; bottom: 0; left: 0; display: flex; flex-direction: column; gap: 3px; }
.project-tag span { color: var(--muted); font-size: .75rem; letter-spacing: .1em; }
.project-tag b { font-size: 1rem; font-weight: 600; }
.vertical-note { position: absolute; top: 110px; right: -29px; writing-mode: vertical-rl; font-size: .75rem; color: var(--muted); letter-spacing: .12em; }
.brand-statement { display: grid; grid-template-columns: .65fr 2fr; gap: 20px 50px; align-items: start; padding-block: 40px 62px; border-bottom: 1px solid var(--line); }
.brand-statement > span { font-size: .75rem; letter-spacing: .1em; color: var(--bronze); font-weight: 700; margin-top: 7px; }
.brand-statement > p { max-width: 720px; font: 400 clamp(1.6rem,2.5vw,2.3rem)/1.38 var(--serif); letter-spacing: -.025em; }
.brand-statement a { grid-column: 2; justify-self: start; }
.brand-statement a, .text-link { font-size: .875rem; color: var(--bronze); text-decoration: underline; text-underline-offset: 6px; }
.brand-statement a b { margin-left: 12px; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 35px; margin-bottom: 38px; }
.section-heading h2 { margin-top: 12px; }
.section-heading > p { flex-basis: 330px; flex-shrink: 0; color: var(--muted); }
.service-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.service-card { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); display: flex; flex-direction: column; gap: 18px; transition: border-color .25s, box-shadow .25s; }
.service-card .number { color: var(--bronze); font-size: .75rem; letter-spacing: .12em; }
.service-card h3 { margin-top: 12px; }
.service-card p { color: var(--muted); font-size: 1rem; }
.service-card a { color: var(--bronze); font-size: .875rem; margin-top: auto; text-decoration: underline; text-underline-offset: 5px; }
.projects { border-top: 1px solid var(--line); }
.project-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 36px 28px; max-width: 990px; margin-inline: auto; }
.project { min-width: 0; position: relative; }
.project > img { width: 100%; aspect-ratio: 3 / 4; border-radius: var(--radius); background: var(--surface); transition: opacity .25s; }
.project figcaption { padding: 16px 50px 0 0; position: relative; display: flex; flex-direction: column; gap: 5px; color: var(--text); }
.project figcaption > span { color: var(--bronze); font-size: .75rem; letter-spacing: .075em; font-weight: 600; }
.project figcaption b { font-size: 1.0625rem; font-weight: 600; line-height: 1.4; }
.project-open { position: absolute; right: 0; top: 17px; border: 1px solid var(--line); background: var(--surface); color: var(--bronze); height: 44px; width: 44px; border-radius: 50%; font-size: 1.3rem; }
.material-showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding-block: 72px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.material-copy h2 { margin-top: 12px; }
.material-copy > p { margin-block: 22px 28px; color: var(--muted); max-width: 480px; }
.material-images { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; max-width: 420px; justify-self: end; }
.material-images img { border-radius: var(--radius); aspect-ratio: 3 / 4; }
.material-images img:last-child { margin-top: 64px; }
.process { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(36px,6vw,100px); align-items: start; }
.process-copy h2 { margin-top: 12px; }
.process-copy > p { margin-top: 20px; color: var(--muted); }
.process-copy > img { width: min(100%,230px); aspect-ratio: 3 / 4; margin-top: 30px; border-radius: var(--radius); }
.steps { display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; min-width: 0; }
.steps li { display: grid; grid-template-columns: 52px minmax(0,1fr); align-items: start; gap: 20px; padding: 24px; border: 0; border-radius: 22px; background: var(--surface); box-shadow: 0 8px 24px #00000012; }
.steps li > span { display: grid; place-items: center; width: 52px; height: 52px; border: 0; color: var(--bronze); border-radius: 50%; font-size: .875rem; }
.steps h3 { margin-top: 6px; }
.steps p { margin-top: 12px; color: var(--muted); }
.trust { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding-block: 24px; gap: 16px; border: 0; }
.trust > div { display: flex; flex-direction: column; gap: 8px; }
.trust strong { font-size: 1.125rem; font-weight: 600; }
.trust span { color: var(--muted); font-size: .875rem; }
.quote { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(36px,6vw,95px); align-items: start; }
.quote-intro h2 { font-size: clamp(2.8rem,4.4vw,4.2rem); margin-top: 14px; }
.quote-intro > p { margin-top: 23px; color: var(--muted); max-width: 380px; }
.contact-list { margin-top: 36px; }
.contact-list > a, .contact-list > div { display: flex; flex-direction: column; gap: 5px; padding-block: 16px; border-bottom: 1px solid var(--line); }
.contact-list small { font-size: .75rem; letter-spacing: .1em; color: var(--bronze); }
.contact-list b { font-size: 1.125rem; font-weight: 600; }
.store-location address { font-style: normal; font-size: 1rem; line-height: 1.65; overflow-wrap: anywhere; }
.location-hint { color: var(--muted); font-size: .875rem; margin-top: 8px; }
.location-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 22px; padding-top: 12px; }
.location-actions .btn { min-height: 48px; }
.quote-form { border: 1px solid var(--line); padding: clamp(22px,3vw,38px); border-radius: 26px; box-shadow: 0 12px 36px rgba(85,45,30,.035); }
.quote-form label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: 18px; }
.form-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.quote-form input:not([type="checkbox"]), .quote-form select, .quote-form textarea { display: block; width: 100%; min-width: 0; min-height: 48px; margin-top: 7px; border: 1px solid var(--control-border); border-radius: 11px; padding: 11px 12px; background: var(--ink); color: var(--text); font-size: 1rem; }
.quote-form textarea { min-height: 110px; resize: vertical; }
.quote-form ::placeholder { color: var(--muted); opacity: 1; }
.form-privacy { font-size: .875rem; color: var(--muted); line-height: 1.6; }
.form-privacy a { color: var(--bronze); text-decoration: underline; text-underline-offset: 2px; }
.quote-form .btn { width: 100%; }
.form-note { font-size: .8125rem; color: var(--muted); margin-top: 14px; line-height: 1.6; }
footer { width: min(100% - var(--gutter) * 2,1160px); margin-inline: auto; padding-block: 44px 82px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; align-items: center; }
footer > p { max-width: 400px; color: var(--muted); justify-self: end; }
.footer-links { grid-column: 1 / -1; display: flex; gap: 20px 30px; flex-wrap: wrap; font-size: .875rem; }
footer > small { grid-column: 1 / -1; color: var(--muted); font-size: .75rem; }
.floating-wa { position: fixed; bottom: 18px; right: 18px; z-index: 20; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 100px; padding: 12px 17px; font-size: .875rem; box-shadow: 0 5px 20px rgba(44,33,30,.1); }
.floating-wa span { margin-left: 14px; }
.project-dialog { width: min(calc(100% - 32px),930px); max-height: calc(100dvh - 40px); padding: 48px 36px 36px; border: 1px solid var(--line); border-radius: 26px; background: var(--surface); color: var(--text); overflow-y: auto; overscroll-behavior: contain; }
.project-dialog::backdrop { background: rgba(35,25,22,.6); }
.dialog-close { position: absolute; right: 12px; top: 10px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 1.8rem; line-height: 1; }
.project-detail-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 36px; align-items: start; }
.detail-gallery > img { aspect-ratio: 3 / 4; object-fit: contain; border-radius: 18px; max-width: 330px; margin-inline: auto; }
.gallery-controls { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 15px; }
.gallery-button { height: 44px; width: 44px; border-radius: 50%; border: 1px solid var(--line); color: var(--bronze); background: var(--surface); }
#galleryCount { color: var(--muted); font-size: .875rem; min-width: 38px; text-align: center; }
.detail-copy h2 { font-size: clamp(1.8rem,3vw,2.6rem); margin-top: 12px; }
.detail-copy > p:not(.kicker) { margin-top: 20px; color: var(--muted); }
.detail-copy > p.project-location { margin-top: 12px; color: var(--bronze); font-size: .875rem; }
.detail-copy h3 { margin-top: 24px; font-size: 1rem; }
.detail-copy ul { padding-left: 19px; margin-block: 12px 0; color: var(--muted); }
.detail-copy li { margin-top: 7px; }
.detail-copy li::marker { color: var(--bronze); }
.detail-copy .btn { width: 100%; margin-top: 26px; }
.reveal-item { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .reveal-item:not(.is-visible) { opacity: 0; transform: translateY(12px); }
  .reveal-item { transition: opacity .45s ease, transform .45s ease; }
}
.legal-header { position: static; }
.legal { max-width: 820px; margin-inline: auto; padding: 64px 24px 90px; }
.legal-back { display: inline-block; color: var(--bronze); margin-bottom: 30px; }
.legal h1 { font-size: clamp(2.2rem,5vw,3.6rem); }
.legal h2 { margin: 32px 0 12px; font-size: 1.5rem; }
.legal p, .legal li { color: var(--muted); }
.legal a { text-decoration: underline; text-underline-offset: 3px; }
.legal-status { background: var(--surface); margin-block: 24px; padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--radius); }
.legal-status strong { color: var(--text); }
.legal-status p { margin-top: 8px; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); font-size: .875rem; }
.legal table { width: 100%; margin-block: 20px; border-collapse: collapse; table-layout: fixed; font-size: .875rem; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 14px 8px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.legal th:last-child, .legal td:last-child { width: 24%; }
.legal td { color: var(--muted); }
.legal td code { display: block; color: var(--text); margin-top: 4px; }
.error-page { min-height: 75vh; padding: 40px 24px; display: grid; place-content: center; text-align: center; gap: 24px; }
.error-page h1 { color: var(--bronze); font-size: clamp(5rem,12vw,9rem); }

/* Industrial direction: a dark assembly stage, bold type and full project panels. */

body { -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-weight: 800; }
h1, h2 { font-family: var(--display); font-weight: 700; font-synthesis: none; letter-spacing: .005em; }
h2 { font-size: clamp(2.5rem,4.4vw,4.6rem); line-height: 1.04; }
h1 em, h2 em, .quote h2 em { font-family: inherit; font-style: normal; font-weight: inherit; letter-spacing: inherit; color: var(--bronze); }
main > section { width: min(100% - var(--gutter) * 2,1240px); }
.section { padding-block: clamp(56px,6vw,88px); }
.kicker, .eyebrow { font-size: .8125rem; font-weight: 700; letter-spacing: .11em; }
.site-header { min-height: 86px; background: var(--ink); padding-inline: max(var(--gutter),calc((100% - 1240px) / 2)); }
/* Match the showroom's content edges. Header and footer share the same visible
   artwork size and bronze/white treatment; the animation source stays intact. */
.site-header:not(.legal-header) { padding-inline: calc(max(0px, (100% - 1480px) / 2) + clamp(24px, 3vw, 48px)); }
.site-header .brand-logo, footer .footer-brand { position: relative; width: clamp(200px, 22vw, 260px); height: auto; aspect-ratio: 1947 / 448; overflow: hidden; }
.site-header .brand-logo img, footer .footer-brand img { position: absolute; left: -6%; top: 50%; width: 111.56%; max-width: none; height: auto; transform: translateY(-50.76%); filter: url(#headerLogoTone); }
.logo-tone-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.site-header nav { gap: 32px; }
.site-header .nav-cta { background: var(--accent); color: #fff; border-radius: 8px; padding: 14px 24px; border-color: var(--bronze); }
.btn { border-radius: 8px; min-height: 55px; padding: 15px 25px; gap: 24px; font-weight: 700; }
.btn span { font-size: 1.25rem; }
.hero {
  position: relative; isolation: isolate; width: 100%; max-width: none;
  padding: 38px max(var(--gutter), calc((100% - 1240px) / 2)) 0;
  grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: 0 44px;
  background: #161b1e; color: #fff; overflow: hidden;
}
.hero::before { content: ""; position: absolute; width: 650px; height: 650px; right: -120px; top: -180px; z-index: -1; background: radial-gradient(ellipse,rgba(130,69,47,.23),transparent 65%); pointer-events: none; }
.hero .eyebrow { color: #cbd0d2; font-size: .8125rem; }
.eyebrow span { color: var(--bronze); padding-inline: 12px; }
.hero h1 { font-size: clamp(3.1rem,5.2vw,5rem); line-height: 1.02; margin-block: 22px; }
.hero h1 em { color: var(--bronze); }
.hero-copy > p { color: var(--muted); font-size: 1.0625rem; max-width: 440px; line-height: 1.7; }
.hero-actions { margin-top: 28px; gap: 14px; }
.hero .primary { background: var(--accent); border-color: var(--bronze); }
.hero .ghost { color: #fff; background: transparent; border-color: #62696e; }
.hero :focus-visible { outline-color: var(--bronze); }
.hero-proof { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 27px; padding: 0; border: 0; color: #b9bfc3; font-size: .75rem; letter-spacing: .06em; }
.hero-proof span { padding-left: 13px; border-left: 2px solid var(--bronze); }
.hero-visual { position: relative; width: 100%; max-width: none; padding: 0; align-self: center; justify-self: stretch; }
.scene-heading, .scene-footer { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.scene-heading { padding-bottom: 16px; border-bottom: 1px solid #464b4f; color: #bbc1c5; font-size: .75rem; letter-spacing: .075em; }
.scene-heading span:last-child { color: var(--bronze); }
.rack-scene { position: relative; width: 100%; aspect-ratio: 1.22 / 1; background: radial-gradient(ellipse at 50% 60%,#303437 0,transparent 65%); }
.rack-scene canvas { width: 100%; height: 100%; display: block; }
.boutique-controls { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 0 18px; }
.boutique-controls button { min-height: 44px; padding: 9px 16px; border: 1px solid var(--control-border); border-radius: 999px; background: var(--walnut-deep); color: var(--text); font-size: .8125rem; font-weight: 600; transition: background-color var(--response-time), color var(--response-time); }
.boutique-controls button[aria-pressed="true"] { background: var(--bronze); border-color: var(--bronze); color: var(--ink); }
.boutique-controls button:focus-visible { outline: 3px solid var(--bronze); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .boutique-controls button:hover { background: var(--bronze); border-color: var(--bronze); color: var(--ink); } }

.rack-fallback { width: auto; max-width: 74%; height: 84%; position: absolute; left: 50%; top: 8%; transform: translateX(-50%); object-fit: contain; border-radius: 8px; }
.rack-scene.is-rendered .rack-fallback { display: none; }
.scene-footer { border-top: 1px solid #464b4f; padding-top: 18px; }
.scene-footer p { font-size: .9375rem; line-height: 1.5; color: #b9bfc3; }
.scene-footer strong { color: #fff; font-weight: 700; }
.scene-footer .text-button { color: var(--bronze); font-size: .875rem; text-decoration: none; min-height: 44px; padding: 8px 0; display: inline-flex; align-items: center; gap: 9px; }
.scene-footer .text-button:hover { text-decoration: underline; text-underline-offset: 5px; }
.scene-footer .text-button span { font-size: 1.35rem; }
.hero-bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid #464b4f; margin-top: 30px; padding-block: 18px; font-size: .875rem; letter-spacing: .025em; }
.hero-bottom > span { color: #b9bfc3; }
.hero-bottom a span { margin-left: 20px; color: var(--bronze); }
.brand-statement { width: 100%; max-width: none; background: var(--wash); color: var(--text); border: 0; padding: 22px max(var(--gutter),calc((100% - 1240px) / 2)); grid-template-columns: auto 1fr auto; align-items: center; gap: 30px; }
.brand-statement > span { color: var(--bronze); font-size: .8125rem; letter-spacing: .09em; margin: 0; }
.brand-statement > p { font: 700 clamp(1.5rem,2.25vw,2.1rem)/1.25 var(--sans); letter-spacing: -.035em; }
.brand-statement em { font-style: normal; color: var(--bronze); }
.brand-statement a { grid-column: auto; justify-self: end; color: var(--bronze); font-size: .875rem; white-space: nowrap; }
.reference-photos { display: flex; gap: 10px; }
.reference-photos img { width: 78px; height: 104px; border-radius: 6px; object-fit: contain; }
.reference-copy .kicker { color: var(--bronze); font-size: .75rem; }
.reference-copy p { margin-top: 7px; font-size: clamp(1.1rem,1.65vw,1.5rem); font-weight: 700; line-height: 1.3; letter-spacing: -.02em; }
.reference-copy em { font-style: normal; color: var(--muted); }
.section-heading { align-items: flex-end; margin-bottom: 38px; gap: 40px; }
.section-heading h2 { margin-top: 18px; }
.section-heading > p { line-height: 1.7; flex-basis: 345px; }
.projects { border: 0; }
.project-grid { max-width: 1100px; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 30px 26px; }
.project { display: flex; flex-direction: column; overflow: hidden; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.project > img { aspect-ratio: 3 / 4; height: auto; max-height: 350px; border-radius: 0; object-fit: contain; object-position: center; background: var(--wash); transition: filter .35s; }
.project figcaption { position: relative; flex: 1; padding: 22px 24px; gap: 10px; color: var(--text); }
.project figcaption > span { color: var(--bronze); font-size: .8125rem; letter-spacing: .075em; }
.project figcaption b { font-size: clamp(1.4rem,2.2vw,2rem); line-height: 1.18; font-weight: 700; letter-spacing: -.025em; }
.project-open { position: static; align-self: start; width: auto; height: auto; min-height: 44px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--bronze); background: transparent; font-size: .875rem; padding: 10px 0; margin-top: auto; }
.project-open:focus-visible { outline-color: var(--bronze); }
.project-summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; color: var(--muted); font-size: .9375rem; line-height: 1.6; margin: 0 0 12px; }
.services { border-top: 1px solid var(--line); }
.service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.service-card { border-radius: 10px; padding: 32px; gap: 18px; border-color: var(--line); }
.service-card .number { font-size: .8125rem; }
.service-card h3 { margin: 0; font-size: 1.8rem; }
.service-card.featured { background: var(--walnut-deep); color: #fff; border-color: var(--line); }
.service-card.featured .number, .service-card.featured a { color: var(--bronze); }
.service-card.featured p { color: var(--muted); }
.service-card a { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding-top: 18px; border-top: 1px solid var(--line); text-decoration: none; font-weight: 600; }
.service-card.featured a { border-color: #464b4f; }
.service-card a span { font-size: 1.25rem; }
.material-showcase { width: 100%; max-width: none; padding: 66px max(var(--gutter),calc((100% - 1240px) / 2)); background: var(--walnut); color: #fff; border: 0; gap: 70px; }
.material-copy .kicker, .material-copy h2 em, .material-copy a { color: var(--bronze); }
.material-copy > p { color: var(--muted); }
.material-images { width: 100%; max-width: 530px; gap: 18px; }
.material-images figure:last-child { margin-top: 44px; }
.material-images img { border-radius: 8px; margin: 0 !important; }
.material-images figure:first-child img { aspect-ratio: 3 / 3.6; object-position: center bottom; }
.material-images figcaption { color: var(--muted); font-size: .8125rem; padding-top: 12px; }
.process { gap: 70px; }
.process-copy .text-link { display: inline-block; margin-top: 25px; }
.steps li { position: relative; }
.steps li > div { min-width: 0; overflow-wrap: anywhere; }
.steps li > span { background: var(--walnut-deep); font: 700 1.5rem var(--display); }
.steps h3 { margin-top: 2px; font-size: 1.3rem; font-weight: 700; line-height: 1.3; }
.steps p { margin-top: 8px; font-size: .9375rem; line-height: 1.7; }
.trust { gap: 16px; }
.trust > div { min-width: 0; padding: 22px 24px; border: 0; border-radius: 18px; background: var(--walnut-deep); }
.trust strong { font-weight: 700; color: var(--bronze); }
.quote { grid-template-columns: 1fr 1.05fr; gap: 24px 70px; }
.quote-intro { grid-column: 1; grid-row: 1; }
.quote .contact-list { grid-column: 1; grid-row: 2; margin-top: 0; }
.quote-form { grid-column: 2; grid-row: 1 / span 2; }
.quote-intro h2 { font-size: clamp(2.65rem,4.3vw,4.5rem); line-height: 1.05; }
.contact-list > a:first-child b { font-size: clamp(1.65rem,2.5vw,2.3rem); letter-spacing: -.04em; }
.contact-list small { font-size: .8125rem; }
.quote-form { border-radius: 12px; padding: 34px; background: var(--walnut-deep); border-top: 3px solid var(--bronze); box-shadow: none; }
.form-heading { margin-bottom: 26px; }
.form-heading h3 { font-size: 1.8rem; margin-block: 8px; }
.form-heading p { color: var(--muted); font-size: .9375rem; }
.quote-form input:not([type="checkbox"]), .quote-form select, .quote-form textarea { border-radius: 7px; border-color: var(--control-border); }
.form-privacy { margin-bottom: 20px; }
footer { width: 100%; max-width: none; padding: 40px max(var(--gutter),calc((100% - 1240px) / 2)) 90px; background: var(--walnut-deep); }
footer > p { font: 700 clamp(1.5rem,2.5vw,2.3rem)/1.1 var(--display); letter-spacing: -.015em; color: var(--text); }
footer em { color: var(--bronze); font-style: normal; }
.footer-links { border-top: 1px solid var(--line); padding-top: 26px; }
footer > small { font-size: .8125rem; }
.floating-wa { border-radius: 8px; background: var(--accent); color: #fff; border-color: var(--bronze); font-weight: 600; }
.floating-wa { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s, visibility .2s; }
.floating-wa.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }
.project-dialog { border-radius: 14px; width: min(calc(100% - 32px),1120px); }
.project-dialog::backdrop { background: rgba(10,14,17,.8); backdrop-filter: blur(5px); }
.detail-gallery { background: var(--wash); border-radius: 8px; padding: 14px; }
.detail-gallery > img { border-radius: 5px; width: 100%; max-width: 100%; height: min(64dvh,680px); aspect-ratio: auto; object-fit: contain; }
.project-detail-layout { grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); }
.detail-copy h2 { font-family: var(--sans); font-weight: 800; }
.project figcaption, .detail-copy, .process-copy, .quote-intro { min-width: 0; overflow-wrap: anywhere; }
.hero :focus-visible, .material-showcase :focus-visible, .service-card.featured :focus-visible { outline-color: #fff; }
.legal h1, .legal h2 { font-family: var(--sans); }
.legal h1 { line-height: 1.14; }
@media (prefers-reduced-motion: no-preference) {
  .hero-copy { animation: entrance .65s ease both; }
  .hero-visual { animation: entrance .8s .12s ease both; }
  .reveal-item { transition: opacity .6s ease, transform .6s ease; }
}
@keyframes entrance { from { opacity: 0; translate: 0 15px; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 1100px) {
  .hero { gap: 0 28px; padding-top: 44px; }
  .hero h1 { font-size: clamp(3rem,5.3vw,4.4rem); }
  .hero-actions .btn { padding-inline: 20px; gap: 16px; }
  .material-showcase, .process, .quote { gap: 40px; }
  .section-heading > p { flex-basis: 300px; }
  .scene-heading { font-size: .75rem; letter-spacing: .025em; }
  .scene-footer { flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 1000px) {
  .site-header { min-height: 78px; }
  .brand-logo { width: 170px; }.brand-logo img { height: 52px; }
  .menu { display: block; border-radius: 8px; }
  .site-header nav { display: none; position: absolute; top: calc(100% + 8px); left: 16px; right: 16px; flex-direction: column; align-items: stretch; gap: 8px; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 16px 36px #0002; }
  .site-header nav.open { display: flex; }
  .site-header nav a { padding: 13px; }
  .site-header .nav-cta { text-align: center; }
  .brand-statement { grid-template-columns: auto 1fr; gap: 10px 22px; }
  .brand-statement a { grid-column: 2; justify-self: start; }
  .reference-photos { grid-row: span 2; }
  .project-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 90px; }
  .hero { grid-template-columns: minmax(0,1fr); gap: 24px; padding-top: 30px; }
  .hero h1 { font-size: clamp(2.8rem,10.3vw,4.8rem); margin-block: 18px; }
  .hero-copy > p { max-width: 510px; font-size: 1rem; }
  .hero-actions { margin-top: 24px; }
  .hero-visual { display: block; }
  .scene-heading { font-size: .75rem; }
  .rack-scene { aspect-ratio: 1.12 / 1; }
  .scene-footer { flex-wrap: nowrap; }
  .hero-bottom { margin-top: 4px; font-size: .75rem; flex-wrap: wrap; padding-block: 22px; gap: 12px; }
  .hero-bottom a span { margin-left: 10px; }
  .brand-statement { padding-block: 28px; }
  .brand-statement > p { font-size: 1.5rem; }
  .section-heading { flex-direction: column; align-items: start; gap: 22px; }
  .section-heading > p { flex-basis: auto; max-width: 500px; }
  h2 { font-size: clamp(2.5rem,7.7vw,3.8rem); }
  .project-grid { gap: 20px; }
  .project figcaption { padding: 22px; }
  .project figcaption b { font-size: 1.35rem; }
  .service-grid { gap: 14px; }
  .service-card { padding: 24px; }
  .service-card h3 { font-size: 1.5rem; }
  .material-showcase, .process, .quote { grid-template-columns: minmax(0,1fr); gap: 36px; }
  .material-showcase { padding-block: 52px; }
  .material-images { max-width: 500px; justify-self: center; }
  .trust { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .quote-intro h2 { font-size: clamp(2.65rem,8vw,4.2rem); }
  .quote-form { padding: 28px; }
  .project-detail-layout { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .project-dialog { padding: 55px 22px 28px; max-height: calc(100dvh - 24px); }
  .detail-gallery > img { max-width: 100%; height: min(55dvh,520px); }
  .quote-intro, .quote-form, .quote .contact-list { grid-column: 1; grid-row: auto; }
  .quote { gap: 22px; }
  footer { grid-template-columns: minmax(0,1fr); gap: 25px; }
  footer > p { justify-self: start; font-size: 2rem; }
}
@media (max-width: 480px) {
  .hero-actions .btn { flex: 1 1 135px; padding-inline: 15px; gap: 12px; }
  .hero-proof { gap: 10px 16px; font-size: .75rem; }
  .hero-visual { margin-top: 5px; }
  .scene-heading { gap: 12px; }
  .scene-heading span:last-child { display: none; }
  .scene-footer { align-items: start; gap: 12px; }
  .scene-footer .text-button { max-width: 145px; font-size: .8125rem; text-align: left; padding-top: 2px; }
  .scene-footer p { font-size: .875rem; }
  .brand-statement { grid-template-columns: auto minmax(0,1fr); gap: 10px 16px; }
  .brand-statement > span br { display: none; }
  .brand-statement a { grid-column: 2; white-space: normal; font-size: .8125rem; }
  .reference-photos img { width: 56px; height: 75px; }
  .reference-photos img:last-child { display: none; }
  .reference-copy .kicker { font-size: .75rem; letter-spacing: .04em; }
  .brand-statement > p { font-size: 1.7rem; }
  .service-grid, .project-grid { grid-template-columns: minmax(0,1fr); }
  .project > img { aspect-ratio: 3 / 4; max-height: 350px; }
  .project figcaption b { font-size: 1.5rem; }
  .material-images { gap: 14px; }
  .material-images figure:last-child { margin-top: 32px; }
  .form-row { grid-template-columns: minmax(0,1fr); gap: 0; }
  .quote-form { padding: 25px 20px; }
  .steps li { grid-template-columns: 42px minmax(0,1fr); gap: 14px; padding: 20px 18px; border-radius: 18px; }
  .steps li > span { width: 42px; height: 42px; font-size: 1.3rem; }
  .floating-wa { bottom: 12px; right: 12px; padding: 12px 15px; font-size: .8125rem; }
}
@media (max-width: 360px) {
  .hero h1 { font-size: 2.7rem; }
  .hero-actions .btn { flex-basis: 100%; }
  .hero-bottom { font-size: .75rem; }
  .quote-intro h2 { font-size: 2.4rem; }
}
/* The opening borrows the hero canvas, then returns it to its original place. */
body:has(#rackIntro[open]) { overflow: hidden; }
#rackIntro {
  position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh;
  max-width: none; max-height: none; margin: 0; padding: clamp(20px,3.5vw,48px);
  border: 0; border-radius: 0; background: var(--ink); color: #fff;
  overflow: auto; overscroll-behavior: contain;
  grid-template-rows: auto minmax(0,1fr) auto; gap: 12px;
  opacity: 1; transition: opacity .26s ease;
}
#rackIntro:not([open]) { display: none; }
#rackIntro[open] { display: grid; }
#rackIntro::backdrop { background: var(--ink); transition: opacity .26s ease; }
#rackIntro.is-leaving { opacity: 0; }
#rackIntro.is-leaving::backdrop { opacity: 0; }
.rack-intro-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; }
.rack-intro-brand { margin: 0; font-size: clamp(1.125rem,2.2vw,1.5rem); font-weight: 800; line-height: 1.15; letter-spacing: -.035em; }
.rack-intro-brand span { display: block; margin-top: 7px; color: var(--bronze); font-size: .75rem; font-weight: 600; letter-spacing: .14em; }
.rack-intro-skip {
  display: inline-flex; align-items: center; justify-content: center; gap: 18px;
  min-height: 48px; flex-shrink: 0; padding: 12px 18px; border: 1px solid #687075;
  border-radius: 8px; background: transparent; color: #fff; font: inherit;
  font-size: .875rem; font-weight: 600; cursor: pointer;
}
.rack-intro-skip:hover { background: #30373b; border-color: var(--bronze); }
.rack-intro-skip:focus-visible { outline: 3px solid var(--bronze); outline-offset: 4px; }
.rack-intro-stage { position: relative; isolation: isolate; width: min(100%,900px); min-height: 0; height: 100%; margin-inline: auto; }
.rack-intro-stage .rack-scene { z-index: 2; width: 100%; height: 100%; aspect-ratio: auto; background: none; }
.rack-intro-signature { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding: 12px; pointer-events: none; }
.rack-intro-logo {
  width: min(100%,560px,80vh); padding: clamp(14px,3vw,28px);
  border: 1px solid var(--bronze); border-radius: 14px;
  background: #fff; box-shadow: 0 24px 70px #0006;
  opacity: var(--intro-logo-opacity,1);
}
.rack-intro-logo img { width: 100%; height: auto; object-fit: contain; }
.rack-intro-footer { padding-top: 12px; text-align: center; }
.rack-intro-footer .eyebrow { color: var(--muted); margin: 0 0 10px; font-size: .75rem; letter-spacing: .13em; }
.rack-intro-footer h2 { margin: 0; font-size: clamp(1.8rem,4vw,3.4rem); line-height: 1.12; }
.rack-intro-footer h2 em { color: var(--bronze); }
@media (max-width: 420px) {
  .rack-intro-header { gap: 12px; }
  .rack-intro-skip { padding-inline: 12px; gap: 10px; }
  .rack-intro-brand { font-size: 1.125rem; }
  .rack-intro-brand span { font-size: .75rem; letter-spacing: .07em; }
}
@media (max-height: 500px) and (min-width: 600px) {
  #rackIntro { padding: 16px 24px; gap: 4px; }
  .rack-intro-footer .eyebrow { display: none; }
  .rack-intro-footer h2 { font-size: 1.5rem; }
}
/* Pointer, keyboard and press feedback share one visual language. Hover is
   restricted to precise pointers so touch navigation never needs a second tap. */
:is(.btn,.nav-cta,.floating-wa,.gallery-button,.dialog-close,.menu) {
  transition: color var(--response-time), background-color var(--response-time),
    border-color var(--response-time), box-shadow var(--response-time),
    transform var(--response-time) var(--response-ease), opacity .2s, visibility .2s;
}
:is(.btn,.nav-cta,.project-open,.service-card a,.text-link,.hero-bottom a,.brand-statement a,.floating-wa) :is(span[aria-hidden],b[aria-hidden]),
.text-link > span, .floating-wa > span {
  display: inline-block; transition: transform var(--response-time) var(--response-ease);
}
.site-header nav a:not(.nav-cta), .footer-links a { position: relative; transition: color var(--response-time); }
.site-header nav a:not(.nav-cta)::after, .footer-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 3px;
  height: 2px; background: var(--bronze); transform: scaleX(0); transform-origin: left;
  transition: transform var(--response-time) var(--response-ease); pointer-events: none;
}
.service-card, .project {
  transition: background-color var(--response-time), color var(--response-time),
    border-color var(--response-time), box-shadow var(--response-time),
    transform var(--response-time) var(--response-ease), opacity .6s;
}
.service-card :is(.number,h3,p,a), .project :is(figcaption,b,.project-summary,.project-open), .contact-list :is(small,b) {
  transition: color var(--response-time), border-color var(--response-time), background-color var(--response-time);
}
.project:has(.project-open) { cursor: pointer; }
.project-media { overflow: hidden; flex-shrink: 0; background: var(--wash); }
.project-media > img {
  width: 100%; aspect-ratio: 3 / 4; height: auto; max-height: 350px;
  object-fit: contain; object-position: center;
  transition: transform 300ms var(--response-ease), filter 300ms;
}
.project-open { display: inline-flex; align-items: center; gap: 14px; }
.project-open span { font-size: 1.2rem; }
.project:focus-within, .service-card:focus-within { opacity: 1; transform: none; }
.steps li { transition: background-color var(--response-time), opacity .6s, transform var(--response-time); }
.steps li > span { transition: background-color var(--response-time), color var(--response-time), transform var(--response-time); }
.steps h3 { transition: color var(--response-time); }
.contact-list > a { border-radius: 8px; padding-inline: 14px; transition: background-color var(--response-time), box-shadow var(--response-time), transform var(--response-time); }
.quote-form :is(input,select,textarea) { transition: border-color var(--response-time), box-shadow var(--response-time); }
.quote-form :is(input,select,textarea):focus { border-color: var(--bronze); box-shadow: 0 0 0 3px #d3ad7226; }

/* Keyboard and touch presses keep the same colour cues; all labels stay visible. */
:is(.btn.primary,.site-header .nav-cta,.floating-wa):is(:focus-visible,:active) { background: var(--accent-on-dark); border-color: var(--bronze); color: #fff; box-shadow: 0 8px 20px #60321f26; }
.btn.ghost:is(:focus-visible,:active) { background: var(--accent); border-color: var(--accent); color: #fff; }
:is(.gallery-button,.dialog-close,.menu):is(:focus-visible,:active) { background: var(--accent); border-color: var(--accent); color: #fff; }
:is(.site-header nav a:not(.nav-cta),.footer-links a):is(:focus-visible,:active) { color: var(--bronze); }
:is(.site-header nav a:not(.nav-cta),.footer-links a):is(:focus-visible,:active)::after { transform: scaleX(1); }
.service-card:is(:focus-within,:active) { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 14px 30px #60321f26; }
.service-card:is(:focus-within,:active) :is(.number,h3,p,a) { color: #fff; }
.service-card:is(:focus-within,:active) a { border-color: #ffffff60; }
.service-card :focus-visible { outline-color: #fff; }
.project:has(.project-open):is(:focus-within,:active) { border-color: var(--accent); box-shadow: 0 12px 28px #60321f20; }
.project:has(.project-open):is(:focus-within,:active) figcaption { background: var(--surface-hover); }
.project:has(.project-open):is(:focus-within,:active) :is(figcaption b,.project-open) { color: var(--bronze); }
.project:has(.project-open):is(:focus-within,:active) .project-open { border-color: var(--accent); }
.steps li:active { background: var(--surface-hover); }
.steps li:active > span { background: var(--bronze); color: var(--ink); }
.contact-list > a:is(:focus-visible,:active) { background: var(--surface-hover); box-shadow: inset 3px 0 var(--bronze); }
.contact-list > a:is(:focus-visible,:active) b { color: var(--bronze); }

@media (hover: hover) and (pointer: fine) {
  :is(.btn.primary,.site-header .nav-cta,.floating-wa):hover { background: var(--accent-on-dark); border-color: var(--bronze); color: #fff; box-shadow: 0 10px 24px #60321f30; }
  .btn.ghost:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
  :is(.gallery-button,.dialog-close,.menu):hover { background: var(--accent); border-color: var(--accent); color: #fff; }
  :is(.site-header nav a:not(.nav-cta),.footer-links a):hover { color: var(--bronze); }
  :is(.site-header nav a:not(.nav-cta),.footer-links a):hover::after { transform: scaleX(1); }
  .service-card:hover { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 14px 30px #60321f26; }
  .service-card:hover :is(.number,h3,p,a) { color: #fff; }
  .service-card:hover a { border-color: #ffffff60; }
  .project:has(.project-open):hover { border-color: var(--accent); box-shadow: 0 12px 28px #60321f20; }
  .project:has(.project-open):hover figcaption { background: var(--surface-hover); }
  .project:has(.project-open):hover :is(figcaption b,.project-open) { color: var(--bronze); }
  .project:has(.project-open):hover .project-open { border-color: var(--accent); }
  .steps li:hover { background: var(--surface-hover); }
  .steps li:hover > span { background: var(--bronze); color: var(--ink); }
  .steps li:hover h3 { color: var(--bronze); }
  .contact-list > a:hover { background: var(--surface-hover); box-shadow: inset 3px 0 var(--bronze); }
  .contact-list > a:hover b { color: var(--bronze); }
  @media (prefers-reduced-motion: no-preference) {
    :is(.btn,.site-header .nav-cta,.floating-wa):hover { transform: translateY(-3px); }
    .service-card:hover { transform: translateY(-5px); }
    .project:has(.project-open):hover { transform: translateY(-4px); }
    .project:has(.project-open):hover .project-media > img { transform: scale(1.035); filter: brightness(1.04); }
    :is(.btn,.nav-cta,.service-card,.project,.text-link,.hero-bottom a,.brand-statement a,.floating-wa):hover :is(span[aria-hidden],b[aria-hidden]),
    .text-link:hover > span, .floating-wa:hover > span { transform: translate(3px,-2px); }
    .steps li:hover > span { transform: scale(1.04); }
    .contact-list > a:hover { transform: translateX(3px); }
  }
}
@media (prefers-reduced-motion: no-preference) {
  .project:focus-within .project-media > img { transform: scale(1.035); }
  :is(.btn,.nav-cta,.project-open,.service-card a,.text-link):focus-visible span[aria-hidden] { transform: translate(3px,-2px); }
  :is(.btn,.site-header .nav-cta,.floating-wa,.gallery-button,.dialog-close,.menu):active { transform: translateY(1px) scale(.985); }
  .project:has(.project-open):active .project-media > img { transform: scale(1.015); }
}
@media (max-width: 1000px) {
  .site-header nav a:not(.nav-cta)::after { left: 13px; right: 13px; }
}
/* Primary actions keep the same bronze edge across every anthracite surface. */
:is(.btn.primary,.site-header .nav-cta,.floating-wa):is(:focus-visible,:active) {
  background: var(--accent-on-dark); border-color: var(--bronze); color: #fff;
  box-shadow: 0 0 0 1px #d3ad7240, 0 8px 24px #0003;
}
@media (hover: hover) and (pointer: fine) {
  :is(.btn.primary,.site-header .nav-cta,.floating-wa):hover {
    background: var(--accent-on-dark); border-color: var(--bronze); color: #fff;
    box-shadow: 0 0 0 1px #d3ad7240, 0 8px 24px #0003;
  }
}
/* A full-width portfolio with one lead project and balanced paired rows.
   Selectors also cover projects loaded through the public Cloudflare feed. */
.projects {
  --portfolio-bg: var(--walnut);
  --portfolio-card: var(--surface);
  --portfolio-line: #68594c;
  width: 100%; max-width: none; margin: 0;
  padding: clamp(56px,6vw,100px) max(var(--gutter),calc((100% - 1400px) / 2));
  background: var(--portfolio-bg); color: var(--text);
  border-block: 1px solid var(--portfolio-line);
}
.projects .portfolio-heading { gap: 32px 64px; margin-bottom: 44px; }
.projects .portfolio-heading > div { min-width: 0; }
.projects .kicker { color: var(--bronze); display: flex; align-items: center; gap: 14px; }
.projects .portfolio-heading .kicker::before { content: ""; width: 34px; height: 2px; background: currentColor; flex: 0 0 auto; }
.projects .portfolio-heading h2 { font-size: clamp(2.8rem,5vw,5rem); line-height: 1.06; margin-top: 20px; }
.projects .portfolio-heading h2 em { color: var(--bronze); }
.projects .portfolio-heading > p { color: var(--muted); flex-basis: 300px; padding-bottom: 5px; }
.projects .project-grid { max-width: none; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; align-items: stretch; }
.projects .project {
  display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1fr);
  background: var(--portfolio-card); border: 1px solid var(--portfolio-line);
  border-radius: 16px; box-shadow: 0 10px 30px #00000014;
}
.projects .project:first-child { grid-column: 1 / -1; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); background: linear-gradient(115deg,var(--walnut-deep),var(--portfolio-card)); }
.projects .project:last-child:nth-child(even) { grid-column: 1 / -1; }
.projects .project-media { position: relative; min-height: 310px; background: var(--wash); border-right: 1px solid var(--portfolio-line); }
.projects .project-media > img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; aspect-ratio: auto; object-fit: contain; }
.projects .project > img { height: 100%; min-height: 310px; max-height: 420px; aspect-ratio: auto; background: var(--wash); object-fit: contain; }
.projects .project:first-child .project-media, .projects .project:first-child > img { min-height: 410px; }
.projects .project figcaption { padding: clamp(24px,2.5vw,36px); gap: 16px; color: var(--text); justify-content: center; }
.projects .project:first-child figcaption { padding: clamp(30px,4vw,64px); gap: 22px; }
.projects .project figcaption > span { color: var(--bronze); font-size: .875rem; letter-spacing: .08em; }
.projects .project figcaption b { color: var(--text); font-size: clamp(1.45rem,2.1vw,2rem); line-height: 1.18; }
.projects .project:first-child figcaption b { font-size: clamp(2.2rem,3.5vw,3.8rem); max-width: 16ch; letter-spacing: -.035em; }
.projects .project-summary { color: var(--muted); font-size: 1rem; line-height: 1.65; -webkit-line-clamp: 3; margin: 0; }
.projects .project:first-child .project-summary { max-width: 48ch; -webkit-line-clamp: 4; }
.projects .project-open {
  min-height: 48px; padding: 11px 16px; margin-top: 8px; gap: 24px;
  color: var(--bronze); border: 1px solid #9d825a; border-radius: 8px;
  font-size: .875rem; font-weight: 700; background: transparent;
}
.projects .project:first-child .project-open { background: var(--bronze); color: var(--ink); border-color: var(--bronze); }
.projects :focus-visible { outline-color: var(--bronze); }
.projects .project-grid > p, .projects #portfolioStatus, .projects noscript { color: var(--muted); grid-column: 1 / -1; }
.projects #portfolioStatus { margin-bottom: 20px; }
.projects noscript a { color: var(--bronze); text-decoration: underline; }
.projects .project:has(.project-open):is(:focus-within,:active) { background: var(--surface-hover); border-color: var(--bronze); box-shadow: 0 16px 36px #0003; }
.projects .project:has(.project-open):is(:focus-within,:active) figcaption { background: transparent; }
.projects .project:has(.project-open):is(:focus-within,:active) figcaption b { color: var(--text); }
.projects .project:has(.project-open):is(:focus-within,:active) .project-open { color: var(--ink); background: var(--bronze); border-color: var(--bronze); }
@media (hover: hover) and (pointer: fine) {
  .projects .project:has(.project-open):hover { background: var(--surface-hover); border-color: var(--bronze); box-shadow: 0 16px 36px #0003; }
  .projects .project:has(.project-open):hover figcaption { background: transparent; }
  .projects .project:has(.project-open):hover figcaption b { color: var(--text); }
  .projects .project:has(.project-open):hover .project-open { color: var(--ink); background: var(--bronze); border-color: var(--bronze); }
}
@media (max-width: 1100px) {
  .projects .portfolio-heading { flex-direction: column; align-items: start; gap: 20px; }
  .projects .portfolio-heading > p { flex-basis: auto; max-width: 520px; }
  .projects .project { grid-template-columns: minmax(0,1fr); }
  .projects .project-media { min-height: 320px; border-right: 0; border-bottom: 1px solid var(--portfolio-line); }
  .projects .project:first-child { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .projects .project:first-child .project-media { border-right: 1px solid var(--portfolio-line); border-bottom: 0; }
  .projects .project:last-child:nth-child(even) { grid-column: auto; }
  .projects .project figcaption { justify-content: start; }
  .projects .project-open { margin-top: auto; }
  .projects .project:first-child .project-open { margin-top: 8px; }
}
@media (min-width: 701px) and (max-width: 1100px) {
  .projects .project:last-child:nth-child(even) { grid-column: 1 / -1; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .projects .project:last-child:nth-child(even) .project-media { border-right: 1px solid var(--portfolio-line); border-bottom: 0; }
}
@media (max-width: 700px) {
  .projects { padding-block: 48px 56px; }
  .projects .portfolio-heading { margin-bottom: 28px; }
  .projects .portfolio-heading h2 { font-size: clamp(2.4rem,8.8vw,3.5rem); }
  .projects .project-grid { grid-template-columns: minmax(0,1fr); gap: 22px; }
  .projects .project:first-child { grid-template-columns: minmax(0,1fr); }
  .projects .project-media, .projects .project:first-child .project-media { min-height: 330px; border-right: 0; border-bottom: 1px solid var(--portfolio-line); }
  .projects .project > img, .projects .project:first-child > img { min-height: 0; height: 330px; }
  .projects .project figcaption, .projects .project:first-child figcaption { padding: 26px; gap: 16px; }
  .projects .project:first-child figcaption b { font-size: clamp(1.85rem,7vw,2.4rem); }
  .projects .project-open { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal-item { opacity: 1; transform: none; }
  #replayRack { display: none; }
}