:root {
--ink: #0a0e1a;
--ink-2: #172439;
--ink-soft: #2c3340;
--paper: #ffffff;
--paper-2: #f4f6fa;
--paper-3: #e0e6ee;
--panel: #ffffff;
--rule: rgba(10, 14, 26, 0.16);
--rule-soft: rgba(10, 14, 26, 0.07);
--blue: #1a4380;
--blue-deep: #102c54;
--blue-light: #4a7bb8;
--accent: #1a4380; /* deep restrained navy — premium, not blueprint */
--mute: #5a6478;
--shadow-1: 0 1px 2px rgba(10, 14, 26, 0.06), 0 1px 3px rgba(10, 14, 26, 0.04);
--shadow-2: 0 4px 16px rgba(10, 14, 26, 0.08), 0 2px 6px rgba(10, 14, 26, 0.06);
--lh-tight: 1.04;
--lh-body: 1.55;
--f-display: 'Fraunces', 'Times New Roman', serif;
--f-body: 'Inter', -apple-system, system-ui, sans-serif;
--f-mono: 'JetBrains Mono', ui-monospace, monospace;
--pad: clamp(20px, 4vw, 56px);
--maxw: 1560px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
margin: 0;
font-family: var(--f-body);
color: var(--ink);
background: var(--paper);
font-weight: 400;
line-height: 1.5;
overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; background: none; border: none; color: inherit; cursor: pointer; }
/* Accessibility — visible focus for keyboard users */
:focus { outline: none; }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 2px;
}
/* Anchored sections clear the fixed nav when scrolled to */
section[id], .sheet { scroll-margin-top: 90px; }
/* Reduced-motion: skip the hero word-reveal animation so text isn't stuck offscreen */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
.hero h1 .word > span { transform: translateY(0) !important; }
.reveal { opacity: 1 !important; transform: none !important; }
}
/* Page-wide subtle paper texture + faint grid */
body::before {
content: '';
position: fixed;
inset: 0;
background-image:
linear-gradient(rgba(10,14,26,0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(10,14,26,0.025) 1px, transparent 1px);
background-size: 24px 24px;
pointer-events: none;
z-index: 0;
}
body::after {
content: '';
position: fixed;
inset: 0;
background: none;
opacity: 0;
mix-blend-mode: normal;
pointer-events: none;
z-index: 1;
}
/* ─────────── NAV ─────────── */
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 50;
padding: 14px var(--pad);
display: grid;
grid-template-columns: auto 1fr auto auto;
gap: 24px;
align-items: center;
background: rgba(255, 255, 255, 0.88);
backdrop-filter: blur(14px) saturate(1.05);
-webkit-backdrop-filter: blur(14px) saturate(1.05);
border-bottom: 1px solid var(--rule);
transition: padding .3s;
}
.nav-logo {
display: flex; align-items: center; gap: 14px;
padding-right: 22px;
border-right: 1px solid var(--rule);
}
.nav-logo img { height: 46px; width: auto; }
.nav-logo .meta {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.18em;
color: var(--ink);
line-height: 1.3;
text-transform: uppercase;
}
.nav-logo .meta strong {
display: block;
color: var(--blue);
font-weight: 500;
}
.nav-links {
display: flex;
gap: 30px;
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-soft);
}
.nav-links a {
padding: 6px 0;
position: relative;
transition: color .2s;
}
.nav-links a:hover { color: var(--blue); }
.nav-links a::after {
content: '';
position: absolute;
bottom: 0; left: 0;
width: 0; height: 1px;
background: var(--blue);
transition: width .3s;
}
.nav-links a:hover::after { width: 100%; }
.nav-sheet {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--mute);
text-align: right;
line-height: 1.4;
}
.nav-sheet strong { display: block; color: var(--ink); font-weight: 500; }
.nav-cta {
padding: 12px 22px;
background: var(--ink);
color: var(--paper);
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 12px;
transition: background .25s, gap .25s;
}
.nav-cta:hover { background: var(--blue); gap: 18px; }
/* Burger button — hidden on desktop */
.nav-burger {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
padding: 10px;
width: 44px;
height: 44px;
align-self: center;
}
.nav-burger span {
width: 22px; height: 1.5px;
background: var(--ink);
transition: transform .3s, opacity .3s;
transform-origin: center;
}
.nav.open .nav-burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav.open .nav-burger span:nth-child(2) { opacity: 0; }
.nav.open .nav-burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
@media (max-width: 1100px) {
.nav-links, .nav-sheet { display: none; }
.nav { grid-template-columns: auto 1fr auto auto; }
.nav-burger { display: flex; }
.nav-cta { padding: 10px 16px; font-size: 10px; }
.nav-logo .meta { display: none; }
.nav-logo { padding-right: 0; border-right: none; }
}
/* Mobile menu — full-screen slide-down */
.mobile-menu {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: var(--paper);
z-index: 49;
padding: 100px var(--pad) 40px;
display: flex;
flex-direction: column;
gap: 0;
transform: translateY(-100%);
transition: transform .45s cubic-bezier(.2,.7,.2,1);
overflow-y: auto;
visibility: hidden;
}
.mobile-menu.open {
transform: translateY(0);
visibility: visible;
}
.mobile-menu a {
font-family: var(--f-display);
font-weight: 300;
font-size: clamp(32px, 8vw, 56px);
line-height: 1.15;
letter-spacing: -0.025em;
padding: 18px 0;
border-bottom: 1px solid var(--rule);
color: var(--ink);
font-variation-settings: "opsz" 144, "SOFT" 40;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
}
.mobile-menu a .num {
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--mute);
font-weight: 400;
}
.mobile-menu a .it { font-style: italic; color: var(--blue); font-weight: 300; }
.mobile-menu .mm-footer {
margin-top: auto;
padding-top: 32px;
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--mute);
line-height: 1.7;
}
.mobile-menu .mm-footer a {
display: inline;
font-family: var(--f-mono);
font-size: 10px;
padding: 0;
border: none;
font-weight: 400;
letter-spacing: 0.18em;
color: var(--ink);
}
/* ─────────── DRAWING SHEET CONTAINER ─────────── */
.sheet {
position: relative;
z-index: 2;
padding: 0 var(--pad);
max-width: var(--maxw);
margin: 0 auto;
}
/* Sheet header strip — every section gets a title bar like a drawing sheet */
.sheet-bar {
display: grid;
grid-template-columns: 110px 1fr auto;
gap: 20px;
align-items: center;
padding: 14px 20px;
border: 1px solid var(--ink);
background: var(--paper);
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 0;
}
.sheet-bar .num { color: var(--accent); font-weight: 600; }
.sheet-bar .name { color: var(--ink); }
.sheet-bar .rev {
color: var(--mute);
font-size: 10px;
display: flex;
gap: 14px;
}
.sheet-bar .rev span:nth-child(2) { color: var(--ink); }
/* Reveal animations */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: .12s; }
.reveal.d2 { transition-delay: .24s; }
.reveal.d3 { transition-delay: .36s; }
.reveal.d4 { transition-delay: .48s; }
/* ─────────── HERO — full-bleed photo + drawing-sheet overlays ─────────── */
.hero {
position: relative;
min-height: 100vh;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
isolation: isolate;
display: block;
z-index: 2;
}
.hero-photo-bg {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: 50% 55%;
z-index: 0;
display: block;
}
/* Legibility gradient — darkens left band + bottom band so overlays read cleanly */
.hero::after {
content: '';
position: absolute; inset: 0;
background:
linear-gradient(to right, rgba(10,14,26,0.55) 0%, rgba(10,14,26,0.18) 30%, transparent 55%),
linear-gradient(to top, rgba(10,14,26,0.55) 0%, transparent 28%);
pointer-events: none;
z-index: 1;
}
/* Top sheet-reference strip — sits BELOW the fixed nav (76px tall) */
.hero-topbar {
position: absolute;
top: 76px; left: 0; right: 0;
padding: 12px var(--pad);
background: rgba(10, 14, 26, 0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-top: 1px solid rgba(255, 255, 255, 0.12);
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.85);
z-index: 4;
}
.hero-topbar strong { color: var(--paper); font-weight: 600; }
/* Four corner brackets — positioned to clear topbar + bottom title-block strip */
.hero-brackets span {
position: absolute;
width: 36px; height: 36px;
border-color: var(--accent);
border-style: solid;
border-width: 0;
z-index: 3;
pointer-events: none;
}
.hero-brackets .tl { top: 140px; left: 28px; border-top-width: 1.5px; border-left-width: 1.5px; }
.hero-brackets .tr { top: 140px; right: 28px; border-top-width: 1.5px; border-right-width: 1.5px; }
.hero-brackets .bl { bottom: 168px; left: 28px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.hero-brackets .br { bottom: 168px; right: 28px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
/* Left-anchored content card (the title-block pinned to the install) */
.hero-card {
position: absolute;
left: var(--pad);
top: 50%;
transform: translateY(-50%);
width: clamp(420px, 38vw, 540px);
max-width: calc(100% - 2 * var(--pad));
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(16px) saturate(1.15);
-webkit-backdrop-filter: blur(16px) saturate(1.15);
border: 1px solid var(--ink);
padding: 32px 36px;
z-index: 5;
}
/* H1 sized for the card width — higher specificity to beat global .hero h1 */
.hero .hero-card h1 {
font-size: clamp(36px, 3.6vw, 60px);
line-height: 0.98;
letter-spacing: -0.025em;
margin: 0 0 22px;
}
.hero .hero-card .hero-lead {
font-size: 15px;
line-height: 1.55;
margin: 0 0 24px;
max-width: none;
}
.hero .hero-card .hero-actions { gap: 10px; }
.hero .hero-card .btn { padding: 12px 20px; font-size: 10.5px; }
.hero-card .sheet-ref {
font-family: var(--f-mono);
font-size: 9.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--mute);
padding-bottom: 14px;
border-bottom: 1px solid var(--rule);
margin-bottom: 22px;
}
.hero-card .sheet-ref strong { color: var(--ink); font-weight: 600; }
/* Brand plate (top-right) — sits clear of the TR corner bracket */
.hero-photo-plate {
position: absolute;
top: 156px; right: 80px;
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid var(--ink);
padding: 12px 18px;
max-width: 320px;
margin: 0;
z-index: 4;
}
.hero-photo-plate .title {
font-family: var(--f-display);
font-weight: 350;
font-size: 16px;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--ink);
font-variation-settings: "opsz" 144, "SOFT" 50;
}
.hero-photo-plate .title .it {
font-style: italic;
color: var(--blue);
font-weight: 300;
font-variation-settings: "opsz" 144, "SOFT" 100;
}
.hero-photo-plate .ref {
margin-top: 4px;
font-family: var(--f-mono);
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--mute);
}
/* Bottom title-block strip — schedule + drawing stamp stacked, full width */
.hero-tb {
position: absolute;
bottom: 0; left: 0; right: 0;
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-top: 1px solid var(--ink);
z-index: 4;
}
.hero-tb-schedule {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.hero-tb-schedule .cell {
padding: 14px 20px;
border-right: 1px solid var(--rule);
min-width: 0;
}
.hero-tb-schedule .cell:last-child { border-right: none; }
.hero-tb-schedule .cell .k {
font-family: var(--f-mono);
font-size: 9px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--mute);
margin-bottom: 6px;
}
.hero-tb-schedule .cell .v {
font-family: var(--f-mono);
font-size: 12.5px;
color: var(--ink);
font-weight: 500;
letter-spacing: 0.04em;
white-space: nowrap;
}
.hero-tb-schedule .cell .v.accent { color: var(--accent); }
.hero-tb-stamp {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border-top: 1px solid var(--rule);
background: var(--paper-2);
}
.hero-tb-stamp .s {
padding: 10px 16px;
border-right: 1px solid var(--rule);
font-family: var(--f-mono);
font-size: 8.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--mute);
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hero-tb-stamp .s:last-child { border-right: none; }
.hero-tb-stamp .s strong { display: block; color: var(--ink); font-weight: 500; margin-top: 3px; }
.hero h1 {
font-family: var(--f-display);
font-weight: 300;
font-size: clamp(56px, 7.4vw, 130px);
line-height: 0.92;
letter-spacing: -0.035em;
margin: 0 0 36px;
font-variation-settings: "opsz" 144, "SOFT" 30;
}
.hero h1 .it {
font-style: italic;
font-weight: 300;
color: var(--blue);
font-variation-settings: "opsz" 144, "SOFT" 100;
}
.hero h1 .word {
display: inline-block;
overflow: hidden;
}
.hero h1 .word > span {
display: inline-block;
transform: translateY(110%);
animation: wordUp 1.1s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes wordUp { to { transform: translateY(0); } }
.hero-lead {
max-width: 480px;
font-size: 17px;
line-height: 1.6;
color: var(--ink-2);
margin: 0 0 32px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.btn {
padding: 14px 24px;
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 12px;
transition: background .25s, color .25s, gap .25s, border-color .25s;
border: 1px solid var(--ink);
}
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.primary:hover { background: var(--blue); border-color: var(--blue); gap: 18px; }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); gap: 18px; }
/* Hero hotspots — hover to reveal architectural detail */
.hero-hotspot {
position: absolute;
width: 18px; height: 18px;
transform: translate(-50%, -50%);
z-index: 4;
cursor: help;
background: none;
border: none;
padding: 0;
}
.hero-hotspot::before {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
border: 1.5px solid var(--accent);
background: rgba(255,255,255,0.96);
transition: transform .25s ease;
}
.hero-hotspot::after {
content: '';
position: absolute;
inset: 4px;
border-radius: 50%;
background: var(--accent);
animation: hotspotPulse 2.4s ease-in-out infinite;
}
@keyframes hotspotPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.6); }
}
.hero-hotspot:hover::before { transform: scale(1.35); }
.hero-hotspot .tip {
position: absolute;
top: -10px;
left: 22px;
padding: 8px 12px;
background: var(--ink);
color: var(--paper);
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
white-space: nowrap;
opacity: 0;
transform: translateY(-4px);
pointer-events: none;
transition: opacity .25s ease, transform .25s ease;
border-radius: 2px;
}
.hero-hotspot:hover .tip,
.hero-hotspot:focus-visible .tip {
opacity: 1;
transform: translateY(0);
}
.hero-hotspot .tip strong { color: var(--accent); font-weight: 500; margin-right: 6px; }
@media (prefers-reduced-motion: reduce) {
.hero-hotspot::after { animation: none; }
}
/* Responsive — collapse the full-bleed hero gracefully */
@media (max-width: 1000px) {
.hero { min-height: auto; }
.hero-photo-bg { position: absolute; height: 100%; }
.hero-topbar { top: 64px; font-size: 9px; padding: 10px var(--pad); }
.hero-topbar > :last-child { display: none; }
.hero-card {
position: relative;
left: auto; top: auto; transform: none;
width: auto;
margin: 168px 16px 220px; /* clear of topbar (64+~40) + bottom strip */
padding: 28px 24px;
max-width: none;
max-height: none;
overflow: visible;
}
.hero-photo-plate { display: none; }
.hero-brackets .tl, .hero-brackets .tr { top: 124px; }
.hero-brackets .bl, .hero-brackets .br { bottom: 220px; }
.hero-brackets span { width: 20px; height: 20px; }
.hero-tb-schedule { grid-template-columns: 1fr 1fr; }
.hero-tb-schedule .cell { border-bottom: 1px solid var(--rule); }
.hero-tb-schedule .cell:nth-child(2n) { border-right: none; }
.hero-tb-schedule .cell:last-child { grid-column: span 2; border-bottom: none; }
.hero-tb-stamp { grid-template-columns: 1fr 1fr; }
.hero-tb-stamp .s:nth-child(2n) { border-right: none; }
.hero-tb-stamp .s:nth-child(n+3) { border-top: 1px solid var(--rule); }
}
@media (max-width: 600px) {
.hero-card { padding: 24px 20px; margin: 80px 12px 220px; }
.hero-topbar { font-size: 8.5px; letter-spacing: 0.16em; }
.hero-tb-schedule .cell { padding: 12px 14px; }
.hero-tb-stamp .s { padding: 8px 14px; font-size: 8px; }
}
/* ─────────── MARQUEE / LEGEND BAR ─────────── */
.legend {
background: var(--ink);
color: var(--paper);
padding: 18px 0;
overflow: hidden;
position: relative;
z-index: 2;
border-top: 1px solid var(--ink);
border-bottom: 1px solid var(--ink);
}
.legend-track {
display: flex;
gap: 50px;
animation: scroll 42s linear infinite;
white-space: nowrap;
font-family: var(--f-mono);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.legend-track .it {
font-family: var(--f-display);
font-style: italic;
text-transform: none;
letter-spacing: 0;
font-size: 22px;
font-weight: 300;
color: var(--paper-3);
font-variation-settings: "opsz" 144, "SOFT" 80;
}
.legend-track .sep { color: var(--accent); }
@keyframes scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ─────────── SECTION SHELL ─────────── */
.section {
padding: clamp(70px, 11vh, 130px) 0;
position: relative;
z-index: 2;
}
.section-head {
display: grid;
grid-template-columns: 1fr auto;
gap: 40px;
align-items: end;
margin: 40px 0 60px;
padding-bottom: 24px;
border-bottom: 1px solid var(--ink);
}
.section-head h2 {
font-family: var(--f-display);
font-weight: 300;
font-size: clamp(40px, 5.4vw, 96px);
line-height: 0.95;
letter-spacing: -0.03em;
margin: 0;
max-width: 1000px;
font-variation-settings: "opsz" 144, "SOFT" 30;
}
.section-head h2 .it {
font-style: italic;
color: var(--blue);
font-weight: 300;
font-variation-settings: "opsz" 144, "SOFT" 100;
}
.section-head .ref {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--mute);
text-align: right;
line-height: 1.5;
}
.section-head .ref strong { color: var(--ink); display: block; }
@media (max-width: 960px) {
.section-head {
grid-template-columns: 1fr;
gap: 24px;
}
.section-head .ref { text-align: left; }
}
/* ─────────── CRAFT / MANIFESTO ─────────── */
.craft {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 80px;
align-items: start;
}
.craft-text p {
font-size: 18px;
line-height: 1.6;
color: var(--ink-2);
margin: 0 0 22px;
max-width: 580px;
}
.craft-text p:first-child {
font-family: var(--f-display);
font-size: clamp(22px, 2.4vw, 32px);
font-weight: 350;
line-height: 1.35;
letter-spacing: -0.01em;
color: var(--ink);
margin-bottom: 32px;
max-width: 620px;
font-variation-settings: "opsz" 144, "SOFT" 50;
}
.craft-text p:first-child .it {
font-style: italic;
color: var(--blue);
font-variation-settings: "opsz" 144, "SOFT" 100;
}
.craft-vis {
position: relative;
aspect-ratio: 7 / 9;
background: var(--paper-2);
border: 1.5px solid var(--ink);
overflow: hidden;
}
.craft-vis svg { width: 100%; height: 100%; display: block; }
.craft-vis svg .ink { stroke: var(--ink); fill: none; }
.craft-vis svg .ink-bold { stroke: var(--ink); fill: none; stroke-width: 2.5; }
.craft-vis svg .ink-fine { stroke: var(--ink); fill: none; stroke-width: 0.6; }
.craft-vis svg .blue { stroke: var(--blue); fill: none; }
.craft-vis svg .accent-s { stroke: var(--accent); fill: none; }
.craft-vis svg .accent-f { fill: var(--accent); }
.craft-vis svg text { font-family: 'JetBrains Mono', monospace; font-size: 9px; fill: var(--ink); letter-spacing: 0.05em; }
.craft-vis svg text.dim { fill: var(--blue); }
.craft-vis svg text.callout { fill: var(--accent); font-weight: 600; }
.craft-vis svg text.title { font-family: 'Fraunces', serif; font-size: 13px; font-style: italic; font-weight: 300; }
.craft-stats {
margin-top: 56px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
border-top: 1px solid var(--ink);
border-bottom: 1px solid var(--ink);
}
.craft-stats > div {
padding: 28px 20px 28px 0;
border-right: 1px solid var(--rule);
}
.craft-stats > div:last-child { border-right: none; }
.craft-stats .n {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--mute);
margin-bottom: 10px;
}
.craft-stats .v {
font-family: var(--f-display);
font-weight: 300;
font-size: clamp(36px, 4.5vw, 56px);
line-height: 1;
letter-spacing: -0.03em;
color: var(--ink);
font-variation-settings: "opsz" 144, "SOFT" 30;
}
.craft-stats .v .u {
font-size: 0.4em;
font-style: italic;
color: var(--blue);
margin-left: 4px;
vertical-align: 0.4em;
font-weight: 300;
}
@media (max-width: 1000px) {
.craft { grid-template-columns: 1fr; gap: 40px; }
.craft-stats { grid-template-columns: 1fr; }
.craft-stats > div { border-right: none; border-bottom: 1px solid var(--rule); }
.craft-stats > div:last-child { border-bottom: none; }
}
/* ─────────── RANGE — drawing schedule grid ─────────── */
.range-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border: 1px solid var(--ink);
background: var(--paper);
width: 100%;
box-sizing: border-box;
}
.range-card {
padding: 24px;
border-right: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
position: relative;
cursor: pointer;
transition: background .25s;
display: flex;
flex-direction: column;
gap: 18px;
min-width: 0;
overflow: hidden;
}
.range-card:nth-child(3n) { border-right: none; }
.range-card:nth-last-child(-n+3) { border-bottom: none; }
.range-card:hover { background: var(--paper-2); }
.range-card .tag-row {
display: flex;
justify-content: space-between;
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.range-card .tag-row .num { color: var(--accent); font-weight: 600; }
.range-card .tag-row .code { color: var(--mute); }
.range-card .draw {
aspect-ratio: 1/1;
background: var(--paper-2);
border: 1px solid var(--rule);
position: relative;
}
.range-card .draw svg { width: 100%; height: 100%; display: block; }
.range-card .draw svg .ink { stroke: var(--ink); fill: none; stroke-width: 1.2; }
.range-card .draw svg .ink-bold { stroke: var(--ink); fill: none; stroke-width: 1.8; }
.range-card .draw svg .ink-thin { stroke: var(--ink); fill: none; stroke-width: 0.4; }
.range-card .draw svg .blue { stroke: var(--blue); fill: none; stroke-width: 0.5; opacity: 0.55; }
.range-card .draw svg .accent { stroke: var(--accent); fill: none; stroke-width: 0.7; stroke-dasharray: 3 2.2; }
.range-card .draw svg .accent-solid { stroke: var(--accent); fill: none; stroke-width: 0.7; }
.range-card .draw svg .accent-dot { fill: var(--accent); }
.range-card .draw svg .glass { fill: rgba(76, 144, 200, 0.06); }
.range-card .draw svg .alu { fill: url(#xn-alu); stroke: var(--ink); stroke-width: 1.2; }
.range-card .draw svg .title-rail { font-family: 'JetBrains Mono', monospace; font-size: 8px; fill: var(--ink); letter-spacing: 0.16em; text-transform: uppercase; }
.range-card .draw svg .dim-txt { font-family: 'JetBrains Mono', monospace; font-size: 9px; fill: var(--ink); letter-spacing: 0.06em; }
.range-card .draw svg .lbl { font-family: 'JetBrains Mono', monospace; font-size: 7px; fill: var(--mute); letter-spacing: 0.12em; text-anchor: middle; }
.range-card .draw svg text { font-family: 'JetBrains Mono', monospace; font-size: 8px; fill: var(--blue); letter-spacing: 0.04em; }
/* ── Live shop-drawing additions ── */
.range-card { -webkit-tap-highlight-color: transparent; }
.range-card .tag-row { cursor: pointer; user-select: none; }
.range-card .tag-row::after {
content: '↓ SECTION';
margin-left: auto;
color: var(--accent);
opacity: 0.55;
transition: opacity .2s;
font-family: var(--f-mono);
font-size: 9px;
letter-spacing: 0.18em;
}
.range-card:hover .tag-row::after { opacity: 1; }
.range-card[data-open="true"] .tag-row::after { content: '↑ CLOSE'; opacity: 1; }
.range-card .tag-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
/* Rendered aluminium + glass surfaces */
.range-card .draw svg .alu-grad { fill: url(#xn-alu-grad); pointer-events: none; }
.range-card .draw svg .glass-rendered { fill: url(#xn-glass-grad); }
.range-card .draw svg .frame-shadow { filter: url(#xn-shadow); }
/* Operable leaf groups — set transform-box so transform-origin uses viewBox coords */
.range-card .draw svg .rc-leaf {
transform-box: view-box;
transition: transform .7s cubic-bezier(.2,.7,.2,1);
will-change: transform;
}
/* Per-system open transforms (hover, click-open, or auto-preview) */
.range-card[data-system="slider"]:hover .rc-leaf[data-leaf="L"],
.range-card[data-system="slider"][data-open="true"] .rc-leaf[data-leaf="L"],
.range-card[data-system="slider"][data-preview="open"] .rc-leaf[data-leaf="L"] {
transform: translate(60px, 0);
}
.range-card[data-system="awning"]:hover .rc-leaf[data-leaf="S"],
.range-card[data-system="awning"][data-open="true"] .rc-leaf[data-leaf="S"],
.range-card[data-system="awning"][data-preview="open"] .rc-leaf[data-leaf="S"] {
transform: scaleY(0.72) skewX(-7deg);
}
.range-card[data-system="casement"]:hover .rc-leaf[data-leaf="L"],
.range-card[data-system="casement"][data-open="true"] .rc-leaf[data-leaf="L"],
.range-card[data-system="casement"][data-preview="open"] .rc-leaf[data-leaf="L"] {
transform: rotate(-22deg);
}
.range-card[data-system="casement"]:hover .rc-leaf[data-leaf="R"],
.range-card[data-system="casement"][data-open="true"] .rc-leaf[data-leaf="R"],
.range-card[data-system="casement"][data-preview="open"] .rc-leaf[data-leaf="R"] {
transform: rotate(22deg);
}
.range-card[data-system="bifold"]:hover .rc-leaf[data-leaf="P1"],
.range-card[data-system="bifold"][data-open="true"] .rc-leaf[data-leaf="P1"],
.range-card[data-system="bifold"][data-preview="open"] .rc-leaf[data-leaf="P1"] {
transform: rotate(-26deg); transition-delay: .24s;
}
.range-card[data-system="bifold"]:hover .rc-leaf[data-leaf="P2"],
.range-card[data-system="bifold"][data-open="true"] .rc-leaf[data-leaf="P2"],
.range-card[data-system="bifold"][data-preview="open"] .rc-leaf[data-leaf="P2"] {
transform: rotate(26deg); transition-delay: .16s;
}
.range-card[data-system="bifold"]:hover .rc-leaf[data-leaf="P3"],
.range-card[data-system="bifold"][data-open="true"] .rc-leaf[data-leaf="P3"],
.range-card[data-system="bifold"][data-preview="open"] .rc-leaf[data-leaf="P3"] {
transform: rotate(-26deg); transition-delay: .08s;
}
.range-card[data-system="bifold"]:hover .rc-leaf[data-leaf="P4"],
.range-card[data-system="bifold"][data-open="true"] .rc-leaf[data-leaf="P4"],
.range-card[data-system="bifold"][data-preview="open"] .rc-leaf[data-leaf="P4"] {
transform: rotate(26deg); transition-delay: 0s;
}
.range-card[data-system="slider-door"]:hover .rc-leaf[data-leaf="L"],
.range-card[data-system="slider-door"][data-open="true"] .rc-leaf[data-leaf="L"],
.range-card[data-system="slider-door"][data-preview="open"] .rc-leaf[data-leaf="L"] {
transform: translate(74px, 0);
}
.range-card[data-system="french"]:hover .rc-leaf[data-leaf="L"],
.range-card[data-system="french"][data-open="true"] .rc-leaf[data-leaf="L"],
.range-card[data-system="french"][data-preview="open"] .rc-leaf[data-leaf="L"] {
transform: rotate(22deg);
}
.range-card[data-system="french"]:hover .rc-leaf[data-leaf="R"],
.range-card[data-system="french"][data-open="true"] .rc-leaf[data-leaf="R"],
.range-card[data-system="french"][data-preview="open"] .rc-leaf[data-leaf="R"] {
transform: rotate(-22deg);
}
/* Scroll-in stroke draw + fill fade */
.range-card .draw svg .rc-draw-stroke {
stroke-dasharray: 1500;
stroke-dashoffset: 1500;
transition: stroke-dashoffset 1s cubic-bezier(.4, 0, .2, 1);
}
.range-card.in .draw svg .rc-draw-stroke { stroke-dashoffset: 0; }
.range-card .draw svg .rc-draw-stroke.d1 { transition-delay: .05s; }
.range-card .draw svg .rc-draw-stroke.d2 { transition-delay: .18s; }
.range-card .draw svg .rc-draw-stroke.d3 { transition-delay: .34s; }
.range-card .draw svg .rc-fade { opacity: 0; transition: opacity .6s ease; transition-delay: .55s; }
.range-card.in .draw svg .rc-fade { opacity: 1; }
/* Title-rail scanner */
.range-card .draw svg .rc-scanner { opacity: 0; }
.range-card.in .draw svg .rc-scanner { animation: rc-scan 7s cubic-bezier(.4,0,.2,1) infinite; animation-delay: 1.8s; }
@keyframes rc-scan {
0% { transform: translateX(0); opacity: 0; }
8% { opacity: 0.65; }
52% { transform: translateX(248px); opacity: 0.65; }
58% { transform: translateX(248px); opacity: 0; }
100% { transform: translateX(248px); opacity: 0; }
}
/* Section detail expand */
.range-card .rc-section {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height .45s ease, opacity .35s ease, margin-top .3s ease, padding-top .3s ease;
margin-top: 0;
padding-top: 0;
border-top: 1px dashed transparent;
}
.range-card[data-open="true"] .rc-section {
max-height: 640px;
opacity: 1;
margin-top: 14px;
padding-top: 16px;
border-top-color: var(--rule);
}
.range-card .rc-section svg {
width: 100%;
height: auto;
display: block;
background: var(--paper-2);
border: 1px solid var(--rule);
}
.range-card .rc-section svg .sec-wall { fill: url(#xn-wall); }
.range-card .rc-section svg .sec-alu { fill: url(#xn-alu-grad); }
.range-card .rc-section svg .sec-thermal { fill: url(#xn-thermal); }
.range-card .rc-section svg .sec-glass { fill: url(#xn-glass-grad); }
.range-card .rc-section svg .ink { stroke: var(--ink); fill: none; stroke-width: 1.2; }
.range-card .rc-section svg .ink-bold { stroke: var(--ink); fill: none; stroke-width: 1.8; }
.range-card .rc-section svg .ink-thin { stroke: var(--ink); fill: none; stroke-width: 0.5; }
.range-card .rc-section svg .accent-line { stroke: var(--accent); fill: none; stroke-width: 0.7; }
.range-card .rc-section svg .dim-txt { font-family: 'JetBrains Mono', monospace; font-size: 9px; fill: var(--ink); letter-spacing: 0.05em; }
.range-card .rc-section svg .lbl { font-family: 'JetBrains Mono', monospace; font-size: 8px; fill: var(--mute); letter-spacing: 0.12em; text-transform: uppercase; }
.range-card .rc-section svg .cn-bubble { fill: #fafaf7; stroke: var(--accent); stroke-width: 0.9; }
.range-card .rc-section svg .cn-num { font-family: 'JetBrains Mono', monospace; font-size: 8px; fill: var(--accent); font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.range-card .rc-section svg .sec-part { transition: opacity .25s ease; }
.range-card .rc-section-key {
list-style: none;
margin: 12px 0 0;
padding: 12px 14px;
display: grid;
grid-template-columns: 1fr;
row-gap: 5px;
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.04em;
background: var(--paper-2);
border: 1px solid var(--rule);
}
.range-card .rc-section-key li {
display: grid;
grid-template-columns: 22px 1fr;
align-items: baseline;
cursor: pointer;
transition: color .2s;
}
.range-card .rc-section-key li:hover { color: var(--accent); }
.range-card .rc-section-key .n { color: var(--accent); font-weight: 700; }
.range-card .rc-section-key .v { color: var(--ink); }
.range-card .rc-section:has(.rc-section-key li:hover) svg .sec-part { opacity: 0.28; }
.range-card .rc-section:has(.rc-section-key li[data-n="1"]:hover) svg .sec-part[data-n="1"],
.range-card .rc-section:has(.rc-section-key li[data-n="2"]:hover) svg .sec-part[data-n="2"],
.range-card .rc-section:has(.rc-section-key li[data-n="3"]:hover) svg .sec-part[data-n="3"],
.range-card .rc-section:has(.rc-section-key li[data-n="4"]:hover) svg .sec-part[data-n="4"],
.range-card .rc-section:has(.rc-section-key li[data-n="5"]:hover) svg .sec-part[data-n="5"] {
opacity: 1;
}
/* ── Expand tabs: Configurations / Section detail / Colours ── */
.range-card .rc-tabs {
display: flex;
gap: 0;
border-bottom: 1px solid var(--rule);
margin-bottom: 18px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.range-card .rc-tabs::-webkit-scrollbar { display: none; }
.range-card .rc-tab {
flex: 0 0 auto;
padding: 12px 18px;
border: none;
background: transparent;
color: var(--mute);
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
cursor: pointer;
white-space: nowrap;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color .2s, border-color .2s;
}
.range-card .rc-tab:hover { color: var(--ink); }
.range-card .rc-tab[aria-selected="true"] {
color: var(--ink);
border-bottom-color: var(--accent);
}
.range-card .rc-tab-panel[hidden] { display: none; }
/* Configurations tab — horizontal strip of variation tiles */
.range-card .rc-configs {
display: flex;
gap: 14px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding: 4px 2px 14px;
scrollbar-width: thin;
}
.range-card .rc-config-tile {
flex: 0 0 auto;
width: 168px;
border: 1px solid var(--rule);
background: var(--paper);
padding: 12px 12px 14px;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 8px;
transition: border-color .2s, transform .2s;
}
.range-card .rc-config-tile:hover {
border-color: var(--ink);
transform: translateY(-2px);
}
.range-card .rc-config-tile svg {
width: 100%;
height: auto;
aspect-ratio: 8/9;
display: block;
}
.range-card .rc-config-tile svg text {
font-family: 'JetBrains Mono', monospace;
}
.range-card .rc-config-tile svg .t-title {
font-size: 6.5px;
letter-spacing: 0.14em;
fill: #0a0e1a;
font-weight: 700;
}
.range-card .rc-config-tile svg .t-lbl {
font-size: 6.5px;
letter-spacing: 0.12em;
fill: #4a5468;
}
.range-card .rc-config-tile svg .t-dim {
font-size: 7.5px;
letter-spacing: 0.06em;
fill: #0a0e1a;
font-weight: 600;
}
.range-card .rc-config-tile svg .t-frame { fill: none; stroke: #0a0e1a; stroke-width: 1.6; }
.range-card .rc-config-tile svg .t-inner { fill: rgba(76,144,200,0.06); stroke: #0a0e1a; stroke-width: 0.7; }
.range-card .rc-config-tile svg .t-mull { stroke: #0a0e1a; stroke-width: 1.6; fill: none; }
.range-card .rc-config-tile svg .t-acc { stroke: #1a4380; stroke-width: 0.7; fill: none; }
.range-card .rc-config-tile svg .t-acc-fill { fill: #1a4380; }
.range-card .rc-config-tile svg .t-tick { stroke: #0a0e1a; stroke-width: 0.5; }
.range-card .rc-config-tile svg .t-hinge { stroke: #1a4380; stroke-width: 0.7; stroke-dasharray: 2 1.5; fill: none; }
.range-card .rc-config-tile .lbl {
font-family: var(--f-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--ink);
text-transform: uppercase;
}
.range-card .rc-config-tile .sub {
font-family: var(--f-mono);
font-size: 9px;
letter-spacing: 0.1em;
color: var(--mute);
text-transform: uppercase;
}
.range-card .rc-configs-note,
.range-card .rc-swatches-note {
margin: 8px 4px 0;
font-family: var(--f-mono);
font-size: 9.5px;
letter-spacing: 0.05em;
color: var(--mute);
line-height: 1.55;
}
/* Colours tab — swatch grid */
.range-card .rc-swatches {
display: flex;
flex-wrap: wrap;
gap: 12px 14px;
padding: 6px 2px 4px;
}
.range-card .rc-swatch {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 0;
background: transparent;
border: none;
cursor: pointer;
width: 72px;
text-align: center;
font-family: var(--f-mono);
font-size: 9.5px;
letter-spacing: 0.06em;
color: var(--ink);
text-transform: uppercase;
transition: transform .2s;
}
.range-card .rc-swatch::before {
content: '';
display: block;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--c, #888);
border: 1px solid rgba(10,14,26,0.25);
box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5), 0 1px 2px rgba(10,14,26,0.18);
transition: transform .2s, box-shadow .2s;
}
.range-card .rc-swatch:hover { transform: translateY(-1px); }
.range-card .rc-swatch:hover::before { transform: scale(1.08); }
.range-card .rc-swatch[aria-pressed="true"]::before {
box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5), 0 0 0 2px var(--accent), 0 1px 2px rgba(10,14,26,0.18);
}
.range-card .rc-swatch--custom::before {
background: linear-gradient(135deg, var(--accent), var(--blue));
color: var(--paper);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--f-mono);
font-size: 18px;
font-weight: 300;
}
.range-card .rc-swatch--custom::before { content: '+'; padding-bottom: 2px; }
/* CTA at the bottom of the expand */
.range-card .rc-expand-cta {
margin-top: 20px;
padding-top: 16px;
border-top: 1px dashed var(--rule);
display: flex;
justify-content: flex-start;
}
.range-card .btn-quote {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
border: 1px solid var(--ink);
background: var(--paper);
color: var(--ink);
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
text-decoration: none;
font-weight: 600;
transition: background .2s, color .2s;
}
.range-card .btn-quote:hover {
background: var(--ink);
color: var(--paper);
}
/* ── MAX-mode upgrades: cursor tilt, shimmer, flourishes, big expand, section build-in ── */
.range-grid { perspective: 1300px; perspective-origin: 50% 35%; }
.range-card {
--mx: 0.5;
--my: 0.5;
transform: rotateY(calc((var(--mx) - 0.5) * 2deg)) rotateX(calc((var(--my) - 0.5) * -2deg));
transform-style: preserve-3d;
transition: transform .28s cubic-bezier(.3,.8,.3,1), background .25s, opacity .35s, filter .35s;
will-change: transform;
}
.range-card .draw svg .glass-shimmer {
x: calc(var(--mx, 0.5) * 196px + 44px - 40px);
y: calc(var(--my, 0.5) * 152px + 58px - 40px);
opacity: 0;
pointer-events: none;
transition: opacity .35s ease, x .12s linear, y .12s linear;
}
.range-card.in:hover .draw svg .glass-shimmer,
.range-card.in[data-preview="open"] .draw svg .glass-shimmer { opacity: 1; }
.range-card .draw svg .alu-shimmer {
x: calc(var(--mx, 0.5) * 196px + 44px - 80px);
y: calc(var(--my, 0.5) * 152px + 58px - 80px);
opacity: 0;
pointer-events: none;
mix-blend-mode: screen;
transition: opacity .5s ease, x .3s ease, y .3s ease;
}
.range-card.in:hover .draw svg .alu-shimmer { opacity: 0.85; }
.range-card .draw svg .title-rail.rc-fade {
letter-spacing: 0.34em;
transition: opacity .6s ease, letter-spacing .9s cubic-bezier(.3,.7,.3,1);
transition-delay: .55s;
}
.range-card.in .draw svg .title-rail.rc-fade { letter-spacing: 0.16em; }
.range-card .tag-row::after { animation: rc-affordance-pulse 2.8s ease-in-out infinite; }
.range-card[data-open="true"] .tag-row::after { animation: none; }
@keyframes rc-affordance-pulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}
.range-card .draw svg .rc-flourish,
.range-card .draw svg .rc-flourish * { pointer-events: none; }
@keyframes rc-rain {
0% { transform: translateY(0); opacity: 0; }
8% { opacity: 0.75; }
92% { opacity: 0.75; }
100% { transform: translateY(132px); opacity: 0; }
}
.range-card.in .draw svg .rc-rain {
transform-box: view-box;
transform-origin: center;
animation: rc-rain 9s ease-in 2.5s infinite;
}
.range-card .draw svg .rc-wind { opacity: 0; }
.range-card[data-system="casement"]:hover .draw svg .rc-wind,
.range-card[data-system="casement"][data-open="true"] .draw svg .rc-wind,
.range-card[data-system="casement"][data-preview="open"] .draw svg .rc-wind {
animation: rc-wind-drift 2.6s ease-out infinite;
}
@keyframes rc-wind-drift {
0% { transform: translateY(0) translateX(0); opacity: 0; }
20% { opacity: 0.7; }
100% { transform: translateY(-44px) translateX(-10px); opacity: 0; }
}
.range-card .draw svg .rc-pnum { opacity: 0; transition: opacity .4s ease; }
.range-card[data-system="bifold"]:hover .draw svg .rc-pnum,
.range-card[data-system="bifold"][data-open="true"] .draw svg .rc-pnum,
.range-card[data-system="bifold"][data-preview="open"] .draw svg .rc-pnum { opacity: 0.9; }
.range-card .draw svg .rc-pnum.n1 { transition-delay: 0s; }
.range-card .draw svg .rc-pnum.n2 { transition-delay: .12s; }
.range-card .draw svg .rc-pnum.n3 { transition-delay: .24s; }
.range-card .draw svg .rc-pnum.n4 { transition-delay: .36s; }
.range-card .draw svg .rc-warm-glow { opacity: 0; transition: opacity 1s ease; }
.range-card.in .draw svg .rc-warm-glow { opacity: 1; }
/* BIG-MODE click-to-expand: open card spans the row, neighbours fade */
.range-card[data-open="true"] {
grid-column: 1 / -1;
z-index: 5;
transform: none !important;
}
.range-card[data-open="true"] .rc-section { max-height: 900px; }
.range-grid:has(.range-card[data-open="true"]) .range-card:not([data-open="true"]) {
opacity: 0.42;
transform: scale(0.95) !important;
filter: saturate(0.65);
pointer-events: none;
}
/* Section build-in animation when card is opened */
.range-card .rc-section svg .ink,
.range-card .rc-section svg .ink-bold,
.range-card .rc-section svg .ink-thin,
.range-card .rc-section svg .accent-line {
stroke-dasharray: 2200;
stroke-dashoffset: 2200;
transition: stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1);
}
.range-card .rc-section.in svg .ink,
.range-card .rc-section.in svg .ink-bold,
.range-card .rc-section.in svg .ink-thin,
.range-card .rc-section.in svg .accent-line { stroke-dashoffset: 0; }
.range-card .rc-section svg .sec-alu,
.range-card .rc-section svg .sec-thermal,
.range-card .rc-section svg .sec-glass,
.range-card .rc-section svg .sec-wall,
.range-card .rc-section svg .cn-bubble,
.range-card .rc-section svg .cn-num,
.range-card .rc-section svg .lbl,
.range-card .rc-section svg .dim-txt,
.range-card .rc-section svg .rc-section-zoom {
opacity: 0;
transition: opacity .55s ease;
}
.range-card .rc-section svg [href^="#xn-gasket"] { opacity: 0; transition: opacity .55s ease; }
.range-card .rc-section.in svg .sec-wall { opacity: 1; transition-delay: 0.05s; }
.range-card .rc-section.in svg .sec-alu { opacity: 1; transition-delay: 0.25s; }
.range-card .rc-section.in svg .sec-thermal { opacity: 1; transition-delay: 0.45s; }
.range-card .rc-section.in svg .sec-glass { opacity: 1; transition-delay: 0.65s; }
.range-card .rc-section.in svg [href^="#xn-gasket"] { opacity: 1; transition-delay: 0.8s; }
.range-card .rc-section.in svg .lbl,
.range-card .rc-section.in svg .dim-txt { opacity: 1; transition-delay: 1.0s; }
.range-card .rc-section.in svg .cn-bubble,
.range-card .rc-section.in svg .cn-num { opacity: 1; transition-delay: 1.1s; }
.range-card .rc-section.in svg .rc-section-zoom { opacity: 1; transition-delay: 1.25s; }
@media (prefers-reduced-motion: reduce) {
.range-card,
.range-card .draw svg .rc-leaf,
.range-card .draw svg .rc-draw-stroke,
.range-card .draw svg .rc-fade,
.range-card .rc-section,
.range-card .rc-section svg * { transition: none !important; animation: none !important; }
.range-card { transform: none !important; }
.range-card.in .draw svg .rc-scanner { animation: none !important; opacity: 0; }
.range-card .draw svg .rc-draw-stroke { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
.range-card .draw svg .rc-fade { opacity: 1 !important; }
.range-card .draw svg .glass-shimmer,
.range-card .draw svg .alu-shimmer { opacity: 0 !important; }
.range-card .draw svg .rc-flourish * { animation: none !important; }
.range-card .tag-row::after { animation: none !important; }
.range-card .rc-section svg .ink,
.range-card .rc-section svg .ink-bold,
.range-card .rc-section svg .ink-thin,
.range-card .rc-section svg .accent-line {
stroke-dasharray: none !important; stroke-dashoffset: 0 !important;
}
.range-card[data-open="true"] .rc-section svg * { opacity: 1 !important; }
}
.range-card h3 {
font-family: var(--f-display);
font-weight: 350;
font-size: 28px;
line-height: 1.1;
letter-spacing: -0.015em;
margin: 0;
font-variation-settings: "opsz" 144, "SOFT" 50;
}
.range-card h3 .it { font-style: italic; color: var(--blue); font-weight: 300; }
.range-card p {
font-size: 14px;
line-height: 1.55;
color: var(--ink-soft);
margin: 0;
}
/* New gateway card body + explore link */
.range-card .rc-body {
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
}
.range-card .rc-explore {
margin-top: auto;
padding: 14px 16px;
border: 1px solid var(--rule);
background: var(--paper);
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink);
transition: background .22s, border-color .22s, color .22s, transform .22s;
cursor: pointer;
text-decoration: none;
}
.range-card .rc-explore .rc-explore-arrow {
font-family: var(--f-body);
font-size: 16px;
letter-spacing: 0;
transition: transform .25s cubic-bezier(.3,.8,.3,1);
display: inline-block;
}
.range-card:hover .rc-explore {
background: var(--ink);
color: #fff;
border-color: var(--ink);
}
.range-card:hover .rc-explore .rc-explore-arrow {
transform: translateX(6px);
}
.range-card .rc-explore:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.range-card .spec-mini {
margin-top: auto;
padding-top: 16px;
border-top: 1px solid var(--rule);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mute);
}
.range-card .spec-mini strong { color: var(--ink); font-weight: 500; display: block; }
/* "Most chosen for" tag + project cross-link */
.range-card .chosen {
margin-top: 10px;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding-top: 10px;
border-top: 1px dashed var(--rule);
font-family: var(--f-mono);
font-size: 9.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.range-card .chosen .label {
color: var(--mute);
}
.range-card .chosen .label strong {
display: inline;
color: var(--ink);
font-weight: 600;
margin-left: 4px;
}
.range-card .chosen a {
color: var(--accent);
transition: color .2s;
white-space: nowrap;
}
.range-card .chosen a:hover { color: var(--ink); }
/* ─────────── TESTIMONIALS (A400) — Word from the brief ─────────── */
.quotes-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 24px;
grid-auto-flow: dense;
}
.quote-card {
background: var(--paper);
border: 1px solid var(--ink);
padding: 32px 32px 32px;
position: relative;
display: flex;
flex-direction: column;
gap: 18px;
min-width: 0;
transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.quote-card:hover {
background: var(--paper-2);
transform: translateY(-2px);
box-shadow: 0 6px 22px rgba(10, 14, 26, 0.06);
}
.quote-card.q-featured { grid-column: span 4; }
.quote-card.q-medium { grid-column: span 2; }
.quote-card.q-short { grid-column: span 3; }
.quote-card.q-featured { padding: 36px 40px 36px; }
.quote-card .glyph {
position: absolute;
top: 8px; left: 18px;
font-family: var(--f-display);
font-style: italic;
font-size: 84px;
font-weight: 200;
color: var(--blue);
line-height: 1;
opacity: 0.32;
font-variation-settings: "opsz" 144, "SOFT" 100;
pointer-events: none;
}
.quote-card.q-featured .glyph { font-size: 108px; top: 4px; }
.quote-card .body {
font-family: var(--f-display);
font-weight: 300;
font-size: 18px;
line-height: 1.5;
color: var(--ink);
margin: 28px 0 0;
font-variation-settings: "opsz" 144, "SOFT" 40;
z-index: 1;
position: relative;
}
.quote-card.q-featured .body { font-size: 21px; line-height: 1.46; }
.quote-card.q-medium .body { font-size: 16px; line-height: 1.5; }
.quote-card .body .it { font-style: italic; color: var(--blue); }
.quote-card .stars {
display: flex;
gap: 4px;
font-size: 14px;
letter-spacing: 0.08em;
color: var(--accent);
line-height: 1;
margin-top: 6px;
}
.quote-card.q-featured .stars { font-size: 16px; }
.quote-card .rule {
height: 1px;
background: var(--rule);
margin-top: auto;
}
.quote-card .attr {
display: flex;
flex-direction: column;
gap: 4px;
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--mute);
}
.quote-card .attr strong { color: var(--ink); font-weight: 600; letter-spacing: 0.18em; }
.quote-card .attr .project {
font-family: var(--f-display);
font-style: italic;
font-size: 13px;
color: var(--blue);
text-transform: none;
letter-spacing: 0;
font-weight: 300;
margin-top: 4px;
font-variation-settings: "opsz" 144, "SOFT" 100;
}
.quote-card .stamp {
position: absolute;
bottom: 14px; right: 18px;
font-family: var(--f-mono);
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--mute);
}
@media (max-width: 1100px) {
.quotes-grid { grid-template-columns: 1fr 1fr; }
.quote-card.q-featured,
.quote-card.q-medium,
.quote-card.q-short { grid-column: span 1; }
.quote-card.q-featured { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
.quotes-grid { grid-template-columns: 1fr; gap: 16px; }
.quote-card,
.quote-card.q-featured,
.quote-card.q-medium,
.quote-card.q-short { grid-column: 1 / -1; padding: 28px 24px 24px; }
.quote-card.q-featured .body { font-size: 19px; }
/* Cap-and-expand — collapse long testimonials by default, tap to expand */
.quote-card { overflow: hidden; }
.quote-card .body {
max-height: clamp(160px, 32vh, 220px);
overflow: hidden;
position: relative;
transition: max-height .45s cubic-bezier(.4, 0, .2, 1);
}
.quote-card.is-clamped .body::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 64px;
background: linear-gradient(to bottom, rgba(250,250,247,0) 0%, var(--paper) 88%);
pointer-events: none;
transition: opacity .25s ease;
}
.quote-card[data-expanded="true"] .body { max-height: 2400px; }
.quote-card[data-expanded="true"] .body::after { opacity: 0; }
.quote-card .quote-expand {
display: none;
margin-top: 6px;
padding: 12px 0 4px;
min-height: 44px;
background: none;
border: none;
border-top: 1px dashed var(--rule);
color: var(--accent);
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
cursor: pointer;
width: 100%;
text-align: left;
transition: color .2s ease;
}
.quote-card.is-clamped .quote-expand {
display: inline-flex;
align-items: center;
gap: 8px;
}
.quote-card .quote-expand:hover,
.quote-card .quote-expand:focus-visible { color: var(--ink); outline: none; }
.quote-card .quote-expand[hidden] { display: none !important; }
}
@media (max-width: 1000px) {
.range-grid { grid-template-columns: 1fr 1fr; }
.range-card:nth-child(3n) { border-right: 1px solid var(--rule); }
.range-card:nth-child(2n) { border-right: none; }
.range-card:nth-last-child(-n+3) { border-bottom: 1px solid var(--rule); }
.range-card:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 640px) {
.range-grid { grid-template-columns: 1fr; }
.range-card { border-right: none !important; border-bottom: 1px solid var(--rule) !important; }
.range-card:last-child { border-bottom: none !important; }
}
/* ─────────── DETAIL — exploded section ─────────── */
.detail-section {
background: var(--paper-2);
padding: clamp(70px, 11vh, 130px) var(--pad);
}
.detail-wrap {
max-width: var(--maxw);
margin: 0 auto;
}
.detail-grid {
display: grid;
grid-template-columns: 3fr 1fr;
gap: 48px;
align-items: start;
}
.detail-draw-wrap { position: relative; }
.detail-draw {
aspect-ratio: 16/11;
background: var(--paper);
border: 1.5px solid var(--ink);
position: relative;
overflow: hidden;
}
.detail-draw svg { width: 100%; height: 100%; display: block; }
.detail-draw svg .ink { stroke: var(--ink); fill: none; stroke-width: 1.2; }
.detail-draw svg .ink-bold { stroke: var(--ink); fill: none; stroke-width: 2.2; }
.detail-draw svg .ink-fine { stroke: var(--ink); fill: none; stroke-width: 0.6; }
.detail-draw svg .blue { stroke: var(--blue); fill: none; stroke-width: 0.6; }
.detail-draw svg .accent-s { stroke: var(--accent); fill: none; stroke-width: 0.8; }
.detail-draw svg .accent-f { fill: var(--accent); }
.detail-draw svg text { font-family: 'Inter', sans-serif; font-size: 11px; fill: var(--ink); letter-spacing: 0.02em; }
.detail-draw svg text.dim { fill: var(--ink); font-size: 14px; font-weight: 500; }
.detail-draw svg text.cnum { fill: var(--accent); font-weight: 600; font-size: 9px; }
.detail-draw svg text.title { font-family: 'Inter', sans-serif; font-style: normal; font-size: 22px; font-weight: 700; letter-spacing: 0.02em; }
.detail-draw svg text.opt-label { fill: var(--accent); font-family: 'Inter', sans-serif; font-weight: 700; font-size: 18px; letter-spacing: 0.02em; }
.detail-draw svg text.exnew { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0.04em; fill: var(--ink); }
.detail-draw svg text.tb-lbl { font-family: 'Inter', sans-serif; font-size: 8.5px; letter-spacing: 0.04em; fill: var(--mute); text-transform: uppercase; font-weight: 400; }
.detail-draw svg text.tb-val { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; fill: var(--ink); letter-spacing: 0; }
.detail-draw svg text.tb-val.accent { fill: var(--accent); }
/* Option toggle pills */
.opt-toggle {
position: absolute;
top: 14px;
right: 14px;
display: flex;
gap: 4px;
z-index: 3;
}
.opt-toggle button {
padding: 7px 14px;
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
border: 1px solid var(--ink);
background: rgba(255,255,255,0.94);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: var(--ink);
transition: background .2s, color .2s, border-color .2s;
cursor: pointer;
}
.opt-toggle button:hover { background: var(--ink); color: var(--paper); }
.opt-toggle button.active { background: var(--accent); color: var(--paper); border-color: var(--accent); }
/* Option group dimming + overlay reveal */
.detail-draw .opt-group { cursor: pointer; transition: opacity .4s ease; }
.detail-draw.opt-01-active .opt-group[data-opt="02"] { opacity: 0.18; }
.detail-draw.opt-02-active .opt-group[data-opt="01"] { opacity: 0.18; }
.detail-draw .opt-overlay { opacity: 0; transition: opacity .55s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.detail-draw.opt-01-active .opt-overlay[data-opt="01"] { opacity: 1; }
.detail-draw.opt-02-active .opt-overlay[data-opt="02"] { opacity: 1; }
.detail-intro {
font-family: var(--f-display);
font-size: 18px;
line-height: 1.45;
font-weight: 350;
color: var(--ink);
margin: 0 0 28px;
font-variation-settings: "opsz" 144, "SOFT" 50;
}
.detail-intro .it { font-style: italic; color: var(--blue); font-weight: 300; font-variation-settings: "opsz" 144, "SOFT" 100; }
/* A500 — Photo reveal panel (corner-bracket "polaroid in an engineering binder") */
.detail-photo {
position: relative;
margin-bottom: 28px;
padding: 8px 8px 14px;
background: var(--paper-2);
border: 1px solid var(--rule);
}
.detail-photo .frame {
position: relative;
aspect-ratio: 4/3;
background: var(--ink);
overflow: hidden;
}
.detail-photo .frame::before,
.detail-photo .frame::after,
.detail-photo .frame .br-tl,
.detail-photo .frame .br-br {
content: '';
position: absolute;
width: 14px; height: 14px;
border-color: var(--accent);
border-style: solid;
border-width: 0;
z-index: 2;
}
.detail-photo .frame::before { top: -1px; left: -1px; border-top-width: 1.5px; border-left-width: 1.5px; }
.detail-photo .frame::after { top: -1px; right: -1px; border-top-width: 1.5px; border-right-width: 1.5px; }
.detail-photo .frame .br-tl { bottom: -1px; left: -1px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.detail-photo .frame .br-br { bottom: -1px; right: -1px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.detail-photo .frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail-photo .frame .placeholder {
width: 100%; height: 100%;
background: repeating-linear-gradient(45deg, #0a0e1a, #0a0e1a 8px, #11233f 8px, #11233f 16px);
display: grid;
place-items: center;
color: var(--paper-2);
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.detail-photo .caption {
margin-top: 12px;
font-family: var(--f-mono);
font-size: 9.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--mute);
line-height: 1.5;
display: flex;
justify-content: space-between;
gap: 12px;
}
.detail-photo .caption strong { color: var(--ink); font-weight: 600; }
.detail-notes {
display: grid;
gap: 0;
border-top: 1px solid var(--ink);
}
.detail-note {
display: grid;
grid-template-columns: 36px 1fr;
gap: 18px;
padding: 20px 0;
border-bottom: 1px solid var(--rule);
align-items: start;
}
.detail-note .num {
width: 26px; height: 26px;
border: 1.5px solid var(--accent);
color: var(--accent);
font-family: var(--f-mono);
font-weight: 600;
font-size: 11px;
border-radius: 50%;
display: grid;
place-items: center;
}
.detail-note h4 {
font-family: var(--f-display);
font-weight: 400;
font-size: 20px;
line-height: 1.15;
margin: 0 0 6px;
letter-spacing: -0.01em;
font-variation-settings: "opsz" 144, "SOFT" 50;
}
.detail-note h4 .it { font-style: italic; color: var(--blue); font-weight: 300; }
.detail-note p {
font-size: 14px;
line-height: 1.55;
color: var(--ink-soft);
margin: 0;
}
@media (max-width: 1000px) {
.detail-grid { grid-template-columns: 1fr; gap: 30px; }
}
/* ─────────── PROCESS — phased plan ─────────── */
.phase-row {
display: grid;
grid-template-columns: 56px 60px 1fr 1fr;
gap: 32px;
padding: 36px 0;
border-top: 1px solid var(--rule);
align-items: start;
}
.phase-icon {
width: 48px;
height: 48px;
border: 1px solid var(--ink);
border-radius: 50%;
display: grid;
place-items: center;
background: var(--paper);
}
.phase-icon svg { width: 24px; height: 24px; stroke: var(--ink); fill: none; stroke-width: 1.4; }
.phase-row .deliverable {
margin-top: 10px;
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
line-height: 1.5;
}
.phase-row .deliverable::before { content: '↳ '; }
.phase-row:last-child { border-bottom: 1px solid var(--rule); }
.phase-num {
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent);
font-weight: 600;
padding-top: 6px;
}
.phase-row h3 {
font-family: var(--f-display);
font-weight: 300;
font-size: clamp(30px, 3.4vw, 48px);
line-height: 1;
letter-spacing: -0.02em;
margin: 0;
font-variation-settings: "opsz" 144, "SOFT" 50;
}
.phase-row h3 .it { font-style: italic; color: var(--blue); font-weight: 300; font-variation-settings: "opsz" 144, "SOFT" 100; }
.phase-row .meta {
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--mute);
margin-top: 14px;
line-height: 1.7;
}
.phase-row .meta strong { color: var(--ink); }
.phase-row p {
font-size: 15px;
line-height: 1.6;
color: var(--ink-2);
margin: 0;
max-width: 460px;
}
@media (max-width: 900px) {
.phase-row { grid-template-columns: 56px 1fr; gap: 16px 20px; }
.phase-row .phase-icon { grid-row: span 2; }
.phase-row .phase-num { grid-column: 2; }
.phase-row > div:nth-child(3) { grid-column: 1 / -1; }
.phase-row > p { grid-column: 1 / -1; }
}
/* ─────────── PROCESS GANTT bar ─────────── */
.gantt {
margin-top: 48px;
padding: 28px;
background: var(--paper-2);
border: 1px solid var(--ink);
position: relative;
}
.gantt-title {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 16px;
}
.gantt-title .h {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--mute);
}
.gantt-title .h strong { color: var(--ink); }
.gantt-bar {
display: grid;
grid-template-columns: repeat(6, 1fr);
height: 38px;
position: relative;
margin-top: 4px;
background:
repeating-linear-gradient(90deg, transparent 0 calc(100%/6 - 1px), var(--rule) calc(100%/6 - 1px) calc(100%/6));
border: 1px solid var(--rule);
}
.gantt-bar .block {
background: var(--accent);
margin: 4px 2px;
border-radius: 1px;
display: flex;
align-items: center;
padding-left: 8px;
font-family: var(--f-mono);
font-size: 9.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--paper);
font-weight: 600;
position: relative;
overflow: hidden;
}
.gantt-bar .block.b-consult { grid-column: 1 / 2; background: var(--ink); }
.gantt-bar .block.b-design { grid-column: 2 / 3; background: var(--blue); }
.gantt-bar .block.b-fab { grid-column: 3 / 6; background: var(--accent); }
.gantt-bar .block.b-install { grid-column: 6 / 7; background: var(--ink); }
.gantt-ticks {
display: grid;
grid-template-columns: repeat(6, 1fr);
margin-top: 6px;
font-family: var(--f-mono);
font-size: 9px;
letter-spacing: 0.16em;
color: var(--mute);
}
.gantt-ticks span { padding-left: 6px; }
@media (max-width: 700px) {
.gantt-bar .block { font-size: 0; padding-left: 0; }
}
/* ─────────── PROJECTS — drawing index ─────────── */
.projects-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 20px;
}
.pr {
position: relative;
aspect-ratio: 4/5;
background: var(--paper-2);
border: 1.5px solid var(--ink);
overflow: hidden;
transition: transform .5s;
}
.pr:hover { transform: translateY(-6px); }
.pr.p1 { grid-column: span 7; aspect-ratio: 5/4; }
.pr.p2 { grid-column: span 5; aspect-ratio: 5/4; }
.pr.p3 { grid-column: span 4; }
.pr.p4 { grid-column: span 4; }
.pr.p5 { grid-column: span 4; }
.pr svg { width: 100%; height: 100%; display: block; }
.pr svg .ink { stroke: var(--ink); fill: none; stroke-width: 1.4; }
.pr svg .ink-bold { stroke: var(--ink); fill: none; stroke-width: 2.5; }
.pr svg .blue { stroke: var(--blue); fill: none; stroke-width: 0.5; opacity: 0.4; }
.pr svg .glass { fill: rgba(76, 144, 200, 0.07); }
.pr svg .glass-warm { fill: rgba(31, 77, 143, 0.14); }
.pr svg text { font-family: 'JetBrains Mono', monospace; font-size: 8px; fill: var(--blue); letter-spacing: 0.04em; }
/* Photo project — same architectural sheet treatment as the drawing tiles */
.pr-photo {
position: absolute;
inset: 0;
overflow: hidden;
background: var(--ink);
}
.pr-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.pr:hover .pr-photo img { transform: scale(1.04); }
.pr-titlebar {
position: absolute;
top: 0; left: 0; right: 0;
padding: 10px 22px;
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--ink);
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
z-index: 2;
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--mute);
}
.pr-titlebar .title {
font-family: var(--f-display);
font-style: italic;
font-size: 13px;
font-weight: 300;
color: var(--ink);
letter-spacing: 0;
text-transform: none;
font-variation-settings: "opsz" 144, "SOFT" 100;
}
@media (max-width: 640px) {
.pr-titlebar { padding: 8px 14px; font-size: 9px; }
.pr-titlebar .title { font-size: 11px; }
}
/* Per-image rotation correction for crooked source photos */
.pr-photo img.tilt-fix { transform: rotate(-1.4deg) scale(1.03); }
.pr:hover .pr-photo img.tilt-fix { transform: rotate(-1.4deg) scale(1.06); }
.pr-info {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 18px 22px;
background: rgba(255, 255, 255, 0.95);
border-top: 1px solid var(--ink);
backdrop-filter: blur(8px);
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
gap: 12px;
}
.pr-info .place {
font-family: var(--f-display);
font-weight: 350;
font-size: 22px;
line-height: 1.1;
letter-spacing: -0.01em;
font-variation-settings: "opsz" 144, "SOFT" 50;
}
.pr-info .meta {
font-family: var(--f-mono);
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--mute);
margin-top: 4px;
}
.pr-info .sheet {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
padding: 0;
}
.pr-info .credit {
grid-column: 1 / -1;
margin-top: 6px;
padding-top: 8px;
border-top: 1px dashed var(--rule);
font-family: var(--f-mono);
font-size: 9.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mute);
display: flex;
justify-content: space-between;
gap: 12px;
align-items: baseline;
}
.pr-info .credit strong { color: var(--ink); font-weight: 600; }
.pr-info .credit a {
color: var(--accent);
transition: color .2s;
white-space: nowrap;
}
.pr-info .credit a:hover { color: var(--ink); }
/* ─────────── FAQ (A800) — Before you brief ─────────── */
.faq-list {
border-top: 1px solid var(--ink);
}
.faq-item {
border-bottom: 1px solid var(--rule);
}
.faq-item:last-child { border-bottom: 1px solid var(--ink); }
.faq-q {
width: 100%;
background: transparent;
border: none;
padding: 26px 0;
display: grid;
grid-template-columns: 56px 1fr 28px;
gap: 24px;
align-items: baseline;
text-align: left;
cursor: pointer;
transition: padding-left .25s ease;
}
.faq-q:hover { padding-left: 12px; }
.faq-q:hover .faq-num { color: var(--ink); }
.faq-num {
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--accent);
font-weight: 600;
transition: color .25s;
}
.faq-text {
font-family: var(--f-display);
font-weight: 350;
font-size: clamp(20px, 2.2vw, 28px);
line-height: 1.25;
letter-spacing: -0.015em;
color: var(--ink);
font-variation-settings: "opsz" 144, "SOFT" 50;
}
.faq-text .it { font-style: italic; color: var(--blue); font-weight: 300; }
.faq-toggle {
position: relative;
width: 18px; height: 18px;
justify-self: end;
align-self: center;
}
.faq-toggle::before, .faq-toggle::after {
content: '';
position: absolute;
background: var(--ink);
transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.faq-toggle::before {
left: 0; right: 0; top: 50%;
height: 1.5px;
transform: translateY(-50%);
}
.faq-toggle::after {
top: 0; bottom: 0; left: 50%;
width: 1.5px;
transform: translateX(-50%);
}
.faq-item[open] .faq-toggle::after { transform: translateX(-50%) scaleY(0); }
.faq-body {
overflow: hidden;
max-height: 0;
transition: max-height .4s cubic-bezier(.2,.7,.2,1), opacity .25s ease;
opacity: 0;
}
.faq-item[open] .faq-body {
max-height: 600px;
opacity: 1;
}
.faq-body-inner {
padding: 0 0 30px 80px;
max-width: 760px;
}
.faq-body-inner p {
margin: 0;
font-size: 16px;
line-height: 1.65;
color: var(--ink-2);
}
.faq-body-inner .ref-link {
display: inline-block;
margin-top: 14px;
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
transition: color .2s;
}
.faq-body-inner .ref-link:hover { color: var(--ink); }
/* ─────────── CONTACT enhancements (A900) ─────────── */
.contact-trust {
margin: -28px 0 36px;
padding: 14px 18px;
border: 1px solid var(--ink);
background: var(--paper);
display: flex;
align-items: center;
gap: 14px;
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink);
}
.contact-trust::before {
content: '';
flex-shrink: 0;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 4px rgba(29, 111, 199, 0.15);
animation: hotspotPulse 2.4s ease-in-out infinite;
}
.contact-trust strong { font-weight: 600; }
.contact-trust span { color: var(--mute); }
.next-steps {
margin-top: 48px;
padding-top: 28px;
border-top: 1px solid var(--ink);
}
.next-steps-h {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--mute);
margin-bottom: 18px;
}
.next-steps-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
border: 1px solid var(--ink);
background: var(--paper);
}
.next-step {
padding: 22px 24px;
border-right: 1px solid var(--rule);
display: flex;
flex-direction: column;
gap: 8px;
}
.next-step:last-child { border-right: none; }
.next-step .ns-num {
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--accent);
font-weight: 600;
}
.next-step .ns-title {
font-family: var(--f-display);
font-size: 22px;
font-weight: 400;
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--ink);
font-variation-settings: "opsz" 144, "SOFT" 50;
}
.next-step .ns-title .it { font-style: italic; color: var(--blue); font-weight: 300; }
.next-step .ns-meta {
font-family: var(--f-mono);
font-size: 9.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--mute);
margin-top: 2px;
}
@media (max-width: 760px) {
.next-steps-grid { grid-template-columns: 1fr; }
.next-step { border-right: none; border-bottom: 1px solid var(--rule); }
.next-step:last-child { border-bottom: none; }
}
/* Workshop map — Google Maps embed (flex-fills the remaining space below info, matching the form's height on desktop) */
.contact-map {
margin-top: 20px;
border: 1px solid var(--ink);
background: var(--paper);
flex: 1 1 auto;
min-height: 280px;
position: relative;
overflow: hidden;
}
@media (max-width: 900px) {
.contact-map { flex: none; aspect-ratio: 16/9; min-height: 0; }
}
.contact-map svg { width: 100%; height: 100%; display: block; }
.contact-map iframe { width: 100%; height: 100%; display: block; border: 0; }
.contact-map .map-label {
position: absolute;
bottom: 10px; left: 12px;
background: var(--paper);
border: 1px solid var(--ink);
padding: 6px 10px;
font-family: var(--f-mono);
font-size: 9.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--mute);
z-index: 2;
}
.contact-map .map-label strong { color: var(--ink); font-weight: 600; }
/* High-fidelity workshop site plan — drawing classes */
.contact-map svg .road-fill { fill: #e8e6dc; }
.contact-map svg .road-kerb { stroke: #0a0e1a; fill: none; stroke-width: 1.6; }
.contact-map svg .road-edge { stroke: #0a0e1a; fill: none; stroke-width: 0.6; }
.contact-map svg .road-centre { stroke: #0a0e1a; fill: none; stroke-width: 0.9; stroke-dasharray: 6 4; opacity: 0.5; }
.contact-map svg .road-centre-major { stroke: #0a0e1a; fill: none; stroke-width: 0.9; stroke-dasharray: 10 5; opacity: 0.55; }
.contact-map svg .water { fill: rgba(76,144,200,0.10); stroke: #1a4380; stroke-width: 0.7; }
.contact-map svg .water-edge { stroke: #1a4380; fill: none; stroke-width: 0.5; opacity: 0.55; }
.contact-map svg .park-fill { fill: url(#parkHatch); }
.contact-map svg .park-edge { stroke: #1a4380; fill: none; stroke-width: 0.8; stroke-dasharray: 3 2; opacity: 0.7; }
.contact-map svg .tree-dot { fill: #1a4380; opacity: 0.55; }
.contact-map svg .parcel-line { stroke: #0a0e1a; fill: none; stroke-width: 0.4; stroke-dasharray: 2 2; opacity: 0.4; }
.contact-map svg .bldg-shell { stroke: #0a0e1a; stroke-width: 1; fill: url(#mapBldgHatch); }
.contact-map svg .bldg-shell-bare { stroke: #0a0e1a; stroke-width: 0.8; fill: rgba(10,14,26,0.04); }
.contact-map svg .bldg-office { stroke: #0a0e1a; fill: none; stroke-width: 0.5; opacity: 0.55; }
.contact-map svg .xn-unit { fill: rgba(31,95,182,0.20); stroke: #1a4380; stroke-width: 1.8; }
.contact-map svg .pin-group { transition: filter .25s ease; }
.contact-map svg .pin-group:hover { filter: drop-shadow(0 2px 4px rgba(31,95,182,0.4)); }
.contact-map svg .pin-glyph { fill: #1a4380; }
.contact-map svg .pin-pulse { transform-box: view-box; transform-origin: 290px 246px; transform: scale(1); }
.contact-map svg .pin-group:hover .pin-pulse { animation: mapPinPulse 1.4s ease-in-out infinite; }
@keyframes mapPinPulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.18); opacity: 0.75; }
}
.contact-map svg .approach { stroke: #1a4380; fill: none; stroke-width: 1; stroke-dasharray: 5 3; opacity: 0.7; }
.contact-map svg .approach-arrow { fill: #1a4380; }
.contact-map svg .lbl-rd { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; fill: #0a0e1a; font-weight: 600; }
.contact-map svg .lbl-rd-major { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; fill: #0a0e1a; font-weight: 700; }
.contact-map svg .lbl-sm { font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: 0.16em; text-transform: uppercase; fill: #4a5468; }
.contact-map svg .lbl-park { font-family: 'Fraunces', serif; font-style: italic; font-size: 14px; fill: #1a4380; opacity: 0.8; font-weight: 400; }
.contact-map svg .lbl-water { font-family: 'Fraunces', serif; font-style: italic; font-size: 11px; fill: #1a4380; opacity: 0.75; font-weight: 400; }
.contact-map svg .lbl-title { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; fill: #0a0e1a; font-weight: 700; }
.contact-map svg .lbl-title-sm { font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase; fill: #4a5468; }
.contact-map svg .lbl-coord { font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: 0.14em; fill: #4a5468; }
.contact-map svg .lbl-xn { font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: 0.18em; fill: #0a0e1a; font-weight: 700; text-anchor: middle; }
.contact-map svg .lbl-xn-sub { font-family: 'JetBrains Mono', monospace; font-size: 7.5px; letter-spacing: 0.14em; fill: #0a0e1a; font-weight: 500; text-anchor: middle; }
.contact-map svg .compass-ring { stroke: #0a0e1a; fill: #fafaf7; stroke-width: 0.9; }
.contact-map svg .compass-needle { stroke: #0a0e1a; stroke-width: 1.5; }
.contact-map svg .compass-needle-n { stroke: #1a4380; stroke-width: 1.6; }
.contact-map svg .compass-tick { stroke: #0a0e1a; stroke-width: 0.6; opacity: 0.7; }
.contact-map svg .compass-tick-sm { stroke: #0a0e1a; stroke-width: 0.4; opacity: 0.4; }
.contact-map svg .compass-cardinal { font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: 0.1em; fill: #0a0e1a; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.contact-map svg .compass-n { fill: #1a4380; }
.contact-map svg .scale-block { fill: #0a0e1a; }
.contact-map svg .scale-block-empty { fill: #fafaf7; stroke: #0a0e1a; stroke-width: 0.5; }
.contact-map svg .scale-tick { stroke: #0a0e1a; stroke-width: 0.6; }
/* Hover-isolate roads: dimming siblings when one road group is hovered */
.contact-map svg .roads:hover .road-grp { opacity: 0.4; transition: opacity .25s ease; }
.contact-map svg .roads:hover .road-grp:hover { opacity: 1; }
.contact-map svg .road-grp { transition: opacity .25s ease; }
@media (prefers-reduced-motion: reduce) {
.contact-map svg .pin-group:hover .pin-pulse { animation: none !important; }
.contact-map svg .roads:hover .road-grp,
.contact-map svg .road-grp { transition: none !important; opacity: 1 !important; }
}
/* Footer standards strip — above the title block */
.footer-standards {
max-width: var(--maxw);
margin: 80px auto 18px;
padding: 0 var(--pad);
position: relative;
z-index: 2;
}
.footer-standards-inner {
background: var(--paper-2);
border: 1px solid var(--rule);
padding: 14px 24px;
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink);
}
.footer-standards-inner .label {
color: var(--mute);
margin-right: 8px;
}
.footer-standards-inner .sep { color: var(--accent); font-size: 7px; padding: 0 2px; }
@media (max-width: 700px) {
.footer-standards-inner { font-size: 9.5px; gap: 8px; }
.footer-standards-inner .label { width: 100%; text-align: center; }
}
@media (max-width: 700px) {
.faq-q { grid-template-columns: 44px 1fr 20px; gap: 14px; padding: 20px 0; }
.faq-body-inner { padding-left: 58px; }
}
@media (prefers-reduced-motion: reduce) {
.faq-body { transition: none; }
.faq-toggle::before, .faq-toggle::after { transition: none; }
}
@media (max-width: 1000px) {
.projects-grid { grid-template-columns: 1fr 1fr; }
.pr { grid-column: span 1 !important; aspect-ratio: 4/5; }
}
/* ─────────── CONTACT ─────────── */
.contact-section { padding-bottom: 0 !important; }
.contact-grid {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 60px;
align-items: stretch;
}
.contact-grid > .reveal.d1 {
display: flex;
flex-direction: column;
min-height: 0;
}
.contact-info {
border: 1px solid var(--ink);
background: var(--paper);
}
.contact-info .row {
display: grid;
grid-template-columns: 120px 1fr;
gap: 18px;
padding: 12px 22px;
border-bottom: 1px solid var(--rule);
align-items: baseline;
}
.contact-info .row:last-child { border-bottom: none; }
.contact-info dt {
font-family: var(--f-mono);
font-size: 9.5px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--mute);
margin: 0;
}
.contact-info dd {
margin: 0;
font-family: var(--f-display);
font-weight: 350;
font-size: 18px;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--ink);
font-variation-settings: "opsz" 144, "SOFT" 50;
}
.contact-info dd.mono {
font-family: var(--f-mono);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.06em;
}
.contact-info dd a:hover { color: var(--blue); }
.form {
background: var(--ink);
color: var(--paper);
padding: 36px;
border: 1px solid var(--ink);
position: relative;
}
.form-tag {
position: absolute;
top: -1px; left: -1px;
padding: 6px 14px;
background: var(--accent);
color: var(--paper);
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 600;
}
.form-title {
margin-top: 28px;
font-family: var(--f-display);
font-weight: 300;
font-size: 32px;
line-height: 1.1;
letter-spacing: -0.02em;
margin-bottom: 8px;
font-variation-settings: "opsz" 144, "SOFT" 50;
}
.form-title .it { font-style: italic; color: var(--blue-light); font-weight: 300; }
.form-sub {
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
margin-bottom: 28px;
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
}
.f-field {
padding: 16px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.f-field.full { grid-column: span 2; }
.f-field:nth-child(odd) { padding-right: 14px; }
.f-field:nth-child(even):not(.full) { padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, 0.15); }
.f-field label {
display: block;
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 6px;
}
.f-field input, .f-field textarea, .f-field select {
width: 100%;
background: transparent;
border: none;
color: var(--paper);
font-family: var(--f-body);
font-size: 15px;
outline: none;
padding: 0;
}
.f-field select {
appearance: none; -webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right center;
padding-right: 20px;
}
.f-field option { background: var(--ink); }
.f-field input::placeholder, .f-field textarea::placeholder { color: rgba(255, 255, 255, 0.3); }
.f-field textarea { resize: vertical; min-height: 60px; }
.form-submit {
margin-top: 28px;
width: 100%;
padding: 16px;
background: var(--paper);
color: var(--ink);
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
transition: background .25s, color .25s;
}
.form-submit:hover { background: var(--blue); color: var(--paper); }
.form-submit:disabled { opacity: 0.7; cursor: progress; }
.form-submit .spinner {
display: none;
width: 14px;
height: 14px;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
animation: form-spin .8s linear infinite;
}
.form-submit[data-state="sending"] .spinner { display: inline-block; }
.form-submit[data-state="sending"] .form-arrow { display: none; }
@keyframes form-spin { to { transform: rotate(360deg); } }
.form-status {
margin-top: 16px;
padding: 0;
font-family: var(--f-mono);
font-size: 11.5px;
line-height: 1.5;
letter-spacing: 0.04em;
min-height: 0;
opacity: 0;
max-height: 0;
overflow: hidden;
transition: opacity .25s ease, max-height .35s ease, padding .25s ease, margin-top .25s ease;
}
.form-status[data-state] {
opacity: 1;
max-height: 200px;
padding: 12px 14px;
border: 1px solid currentColor;
display: flex;
align-items: flex-start;
gap: 10px;
}
.form-status[data-state]::before {
content: '';
flex: 0 0 14px;
width: 14px;
height: 14px;
margin-top: 2px;
border-radius: 50%;
background: currentColor;
}
.form-status[data-state="success"] {
color: #9bd4a7;
background: rgba(155, 212, 167, 0.08);
}
.form-status[data-state="error"] {
color: #ff9b9b;
background: rgba(255, 155, 155, 0.10);
}
.form-status[data-state="info"] {
color: #9bc8ff;
background: rgba(155, 200, 255, 0.10);
}
/* Success panel — replaces the form contents on a successful send */
.form-success {
display: none;
padding: 36px 6px 12px;
text-align: left;
}
.form[data-sent="true"] .form-success { display: block; }
.form[data-sent="true"] .form-grid,
.form[data-sent="true"] .form-submit,
.form[data-sent="true"] .form-status { display: none; }
.form-success .checkmark {
width: 44px; height: 44px;
border: 2px solid #9bd4a7;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
color: #9bd4a7;
}
.form-success .checkmark svg { width: 22px; height: 22px; }
.form-success h3 {
font-family: var(--f-display);
font-weight: 350;
font-size: 26px;
line-height: 1.2;
color: var(--paper);
margin: 0 0 10px;
}
.form-success h3 .it { font-style: italic; color: var(--blue-light); font-weight: 300; }
.form-success p {
font-family: var(--f-body);
font-size: 14px;
line-height: 1.55;
color: rgba(255,255,255,0.75);
margin: 0 0 18px;
}
.form-success .meta {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255,255,255,0.5);
}
.form-success .meta a { color: var(--paper); }
.form-success .send-again {
display: inline-block;
margin-top: 18px;
padding: 10px 16px;
background: transparent;
border: 1px solid rgba(255,255,255,0.4);
color: var(--paper);
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
cursor: pointer;
transition: background .2s, color .2s;
}
.form-success .send-again:hover { background: var(--paper); color: var(--ink); }
@media (max-width: 1000px) {
.contact-grid { grid-template-columns: 1fr; gap: 40px; align-items: start; }
.contact-grid > .reveal.d1 { display: block; }
.form-grid { grid-template-columns: 1fr; }
.f-field { padding: 14px 0 !important; border-left: none !important; }
.f-field.full { grid-column: span 1; }
}
/* ─────────── TITLE BLOCK — bottom of page ─────────── */
.titleblock {
margin-top: 0;
max-width: var(--maxw);
margin-left: auto;
margin-right: auto;
padding: 0 var(--pad);
position: relative;
z-index: 2;
}
.titleblock-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1.7fr 1.5fr 1.4fr;
border: 1.5px solid var(--ink);
background: var(--paper);
min-height: 130px;
}
.tb-cell {
padding: 14px 16px;
border-right: 1px solid var(--ink);
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
.tb-cell:last-child { border-right: none; }
.tb-cell .lbl {
font-family: var(--f-mono);
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--mute);
font-weight: 500;
}
.tb-cell .lbl.under { padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
.tb-cell .val {
font-family: var(--f-body);
font-size: 16px;
font-weight: 600;
color: var(--ink);
letter-spacing: 0.01em;
}
.tb-cell.notes ol {
list-style: none;
padding: 0;
margin: 8px 0 0;
counter-reset: notes;
font-family: var(--f-body);
font-size: 10px;
color: var(--ink);
line-height: 1.5;
}
.tb-cell.notes ol li {
counter-increment: notes;
padding-left: 22px;
position: relative;
margin-bottom: 4px;
}
.tb-cell.notes ol li::before {
content: counter(notes, decimal-leading-zero) ".";
position: absolute;
left: 0;
font-weight: 600;
color: var(--ink);
}
.tb-cell.notes .copy {
font-family: var(--f-mono);
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--mute);
margin-top: 10px;
}
.tb-cell.revision {
padding: 0;
}
.tb-cell.revision .lbl-strip {
padding: 10px 16px;
font-family: var(--f-mono);
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--mute);
border-bottom: 1px solid var(--ink);
}
.tb-cell.revision table {
width: 100%;
border-collapse: collapse;
font-family: var(--f-mono);
font-size: 9px;
}
.tb-cell.revision th, .tb-cell.revision td {
padding: 4px 10px;
text-align: left;
border-right: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
letter-spacing: 0.1em;
color: var(--mute);
font-weight: 500;
font-size: 8.5px;
}
.tb-cell.revision th { font-weight: 600; color: var(--ink); }
.tb-cell.revision td:last-child, .tb-cell.revision th:last-child { border-right: none; }
.tb-cell.revision tr:last-child td { border-bottom: none; }
.tb-cell.revision td.dark { color: var(--ink); font-weight: 500; }
/* Index/sitemap cell — rows become hoverable links */
.tb-cell.revision tr.link-row { cursor: pointer; transition: background .2s; }
.tb-cell.revision tr.link-row:hover { background: var(--paper-2); }
.tb-cell.revision tr.link-row:hover td { color: var(--blue); }
.tb-cell.revision tr.link-row a { display: block; color: inherit; text-decoration: none; }
.tb-cell.brand .biz a.social {
display: inline-block;
margin-top: 8px;
color: var(--blue);
font-weight: 600;
letter-spacing: 0.04em;
transition: color .2s;
}
.tb-cell.brand .biz a.social:hover { color: var(--accent); }
.tb-cell .cta-link {
color: var(--blue);
transition: color .2s;
}
.tb-cell .cta-link:hover { color: var(--accent); }
.tb-cell.brand {
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
gap: 10px;
}
.tb-cell.brand .logo-box {
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
.tb-cell.brand .logo-box img {
width: auto;
max-width: 130px;
max-height: 60px;
height: auto;
display: block;
}
.tb-cell.brand .biz {
font-family: var(--f-body);
font-size: 9.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink);
line-height: 1.55;
font-weight: 500;
text-align: right;
align-self: flex-end;
}
.tb-cell.brand .biz strong { display: block; font-weight: 700; margin-bottom: 2px; }
.tb-cell.compass {
padding: 8px;
display: grid;
place-items: center;
}
.tb-cell.compass svg { width: 80%; max-height: 100px; }
.tb-cell.compass svg circle { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.tb-cell.compass svg line { stroke: var(--ink); stroke-width: 1.2; }
.tb-cell.compass svg text { font-family: 'JetBrains Mono', monospace; font-size: 8px; fill: var(--ink); letter-spacing: 0.1em; font-weight: 600; }
.tb-cell.scale {
padding: 0;
}
.tb-cell.scale .row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
border-bottom: 1px solid var(--rule);
height: 50%;
}
.tb-cell.scale .row:last-child { border-bottom: none; }
.tb-cell.scale .row .col {
padding: 10px 12px;
border-right: 1px solid var(--rule);
display: flex;
flex-direction: column;
gap: 4px;
}
.tb-cell.scale .row .col:last-child { border-right: none; }
.tb-cell.scale .row .col .lbl {
font-family: var(--f-mono);
font-size: 8px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--mute);
}
.tb-cell.scale .row .col .val {
font-family: var(--f-body);
font-size: 13px;
font-weight: 700;
color: var(--ink);
}
.tb-cell.dwg {
padding: 0;
}
.tb-cell.dwg .row {
padding: 12px 16px;
border-bottom: 1px solid var(--rule);
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 12px;
}
.tb-cell.dwg .row:last-child { border-bottom: none; flex: 1; }
.tb-cell.dwg .lbl {
font-family: var(--f-mono);
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--mute);
}
.tb-cell.dwg .val {
font-family: var(--f-body);
font-size: 16px;
font-weight: 700;
color: var(--ink);
}
.tb-cell.dwg .val.accent { color: var(--accent); }
@media (max-width: 1200px) {
.titleblock-grid {
grid-template-columns: 1fr 1fr 1fr;
}
.tb-cell { border-bottom: 1px solid var(--ink); }
.tb-cell:nth-child(n+4) { border-bottom: none; }
.tb-cell:nth-child(3n) { border-right: none; }
.tb-cell:nth-child(3) { border-right: 1px solid var(--ink); }
}
@media (max-width: 760px) {
.titleblock-grid {
grid-template-columns: 1fr 1fr;
}
.tb-cell { border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.tb-cell:nth-child(2n) { border-right: none; }
.tb-cell:nth-last-child(-n+1) { border-bottom: none; }
}
@media (max-width: 480px) {
.titleblock-grid {
grid-template-columns: 1fr;
}
.tb-cell { border-right: none !important; border-bottom: 1px solid var(--ink) !important; }
.tb-cell:last-child { border-bottom: none !important; }
}
/* ─────────── FOOTER ─────────── */
footer {
padding: 36px var(--pad);
position: relative;
z-index: 2;
}
.foot-bottom {
max-width: var(--maxw);
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 14px;
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--mute);
}
::selection { background: var(--ink); color: var(--paper); }
/* Skip-link for keyboard users */
.skip-link {
position: fixed;
top: -100px;
left: 16px;
z-index: 200;
padding: 12px 18px;
background: var(--ink);
color: var(--paper);
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
text-decoration: none;
border-radius: 2px;
transition: top .2s ease;
}
.skip-link:focus {
top: 14px;
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* ═══════════════════════════════════════════════════════════════════════
MOBILE & TABLET RESPONSIVE PASS — layered on top, never overriding ≥1024
═══════════════════════════════════════════════════════════════════════ */
/* ── Projects (A700) — photo-then-caption layout below 900px ── */
@media (max-width: 900px) {
.projects-grid { grid-template-columns: 1fr; gap: 20px; }
.pr,
.pr.p1, .pr.p2, .pr.p3, .pr.p4, .pr.p5 {
grid-column: 1 / -1 !important;
aspect-ratio: auto !important;
display: grid;
grid-template-rows: auto auto;
border: 1px solid var(--ink);
background: var(--paper);
overflow: visible;
}
.pr:hover { transform: none; }
.pr .pr-photo {
position: relative;
inset: auto;
aspect-ratio: 4/3;
min-height: 220px;
background: var(--paper-2);
border-bottom: 1px solid var(--ink);
overflow: hidden;
}
.pr .pr-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pr .pr-titlebar {
position: absolute;
top: 0; left: 0; right: auto;
width: auto;
padding: 8px 14px;
background: rgba(255, 255, 255, 0.96);
border-right: 1px solid var(--ink);
border-bottom: 1px solid var(--ink);
border-top: none;
flex-direction: column;
align-items: flex-start;
gap: 2px;
font-size: 9px;
}
.pr .pr-titlebar .title { font-size: 13px; }
.pr .pr-info {
position: static;
inset: auto;
background: var(--paper);
border-top: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
padding: 16px 18px 18px;
grid-template-columns: 1fr auto;
align-items: baseline;
gap: 10px;
}
.pr .pr-info .place { font-size: 22px; line-height: 1.15; }
.pr .pr-info .meta { font-size: 9.5px; }
.pr .pr-info .sheet { align-self: start; }
.pr .pr-info .credit {
flex-direction: column;
align-items: stretch;
gap: 10px;
margin-top: 10px;
padding-top: 12px;
font-size: 9.5px;
line-height: 1.5;
text-transform: uppercase;
}
.pr .pr-info .credit a {
align-self: flex-start;
padding: 8px 14px;
min-height: 36px;
display: inline-flex;
align-items: center;
border: 1px solid var(--accent);
color: var(--accent);
font-family: var(--f-mono);
letter-spacing: 0.18em;
white-space: nowrap;
transition: background .2s, color .2s;
}
.pr .pr-info .credit a:hover,
.pr .pr-info .credit a:focus-visible {
background: var(--accent);
color: var(--paper);
outline: none;
}
}
/* ── Tablet portrait + phone (≤820px) ── */
@media (max-width: 820px) {
/* §A · Nav — burger menu items, larger touch targets */
.nav .nav-cta { padding: 12px 18px; font-size: 11px; min-height: 44px; }
.nav-burger { min-width: 48px; min-height: 48px; }
.mobile-menu a {
padding: 18px 0;
min-height: 56px;
font-size: clamp(22px, 5.4vw, 30px);
display: flex;
align-items: center;
justify-content: space-between;
}
/* §B · Hero — typography rescue + CTA touch targets */
.hero .hero-card h1 {
font-size: clamp(30px, 7.6vw, 44px);
line-height: 1.02;
letter-spacing: -0.022em;
margin: 0 0 20px;
}
.hero .hero-card .hero-lead { font-size: 15.5px; line-height: 1.55; }
.hero .hero-card .btn,
.hero .hero-actions .btn {
padding: 14px 22px;
font-size: 11.5px;
min-height: 48px;
display: inline-flex;
align-items: center;
}
.hero .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* iPad portrait (601–820px): re-enable the install photo as a banner above the card */
@media (min-width: 601px) {
.hero { min-height: auto; padding-top: 110px; padding-bottom: 60px; }
.hero-photo-bg {
display: block !important;
position: relative !important;
width: 100%;
height: auto;
aspect-ratio: 16/9;
max-height: 280px;
object-fit: cover;
object-position: 50% 55%;
margin-bottom: 28px;
}
.hero-card { margin: 0 var(--pad) !important; }
}
/* §C · Marquee — slow scroll + tighter type */
.legend-track {
gap: 36px;
font-size: 11px;
animation-duration: 62s;
}
.legend-track .it { font-size: 18px; }
/* §E · Craft (A200) — horizontal swipe for the wide drawing */
.craft-detail {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.craft-detail > svg { min-width: 640px; }
/* §H · Detail (A500) — toggle becomes a segmented bar above the drawing; drawing scrolls horizontally */
.detail-draw-wrap {
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
max-width: 100%;
width: 100%;
}
.opt-toggle {
position: static;
width: 100%;
max-width: 100%;
flex-wrap: nowrap;
gap: 0;
background: var(--paper);
border: 1px solid var(--ink);
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-sizing: border-box;
}
.opt-toggle button {
flex: 1 1 0;
min-width: 0;
padding: 14px 6px;
min-height: 50px;
border: none;
border-right: 1px solid var(--ink);
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
font-size: clamp(9.5px, 2.6vw, 11px);
letter-spacing: 0.14em;
text-align: center;
white-space: nowrap;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
}
.opt-toggle button:last-child { border-right: none; }
.opt-toggle button.active {
background: var(--accent);
color: var(--paper);
}
.detail-draw {
aspect-ratio: auto;
min-height: 280px;
min-width: 0;
max-width: 100%;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
}
.detail-draw > svg { min-width: 720px; height: auto; display: block; }
/* §I · Process — collapse phase-row to single column with inline icon/num */
.phase-row {
grid-template-columns: 1fr !important;
gap: 14px 0 !important;
padding: 24px 0;
}
.phase-row .phase-icon {
width: 44px; height: 44px;
grid-row: auto !important;
grid-column: 1 !important;
}
.phase-row .phase-num { grid-column: 1 !important; }
.phase-row > div:nth-child(3),
.phase-row > p,
.phase-row .deliverable { grid-column: 1 / -1 !important; }
/* Hide the gantt timeline on iPad portrait too */
.gantt { display: none; }
/* §J · Projects — title bar touch padding */
.pr-titlebar, .pr-info { padding: 14px 16px; }
/* §L · Contact — compact mobile form: tighter fields + side-by-side names at ≥1 col */
.form { padding: 28px 22px; }
.form-title { margin-top: 24px; font-size: 28px; margin-bottom: 6px; }
.form-sub { font-size: 10px; margin-bottom: 20px; }
.form-grid { grid-template-columns: 1fr 1fr; gap: 0; }
.f-field { padding: 10px 0 !important; border-left: none !important; }
.f-field:nth-child(odd) { padding-right: 10px !important; }
.f-field:nth-child(even):not(.full) { padding-left: 10px !important; border-left: 1px solid rgba(255,255,255,0.15) !important; }
.f-field.full { grid-column: span 2; padding-left: 0 !important; padding-right: 0 !important; border-left: none !important; }
.f-field input,
.f-field textarea,
.f-field select {
font-size: 16px;
padding: 6px 0 8px;
min-height: 38px;
}
.f-field label { font-size: 10px; margin-bottom: 4px; }
.f-field textarea { min-height: 72px; }
.form-submit { margin-top: 18px; padding: 14px; font-size: 11px; min-height: 48px; }
.form-tag { padding: 5px 12px; font-size: 9.5px; }
/* Universal form-input iOS-zoom guard */
input, textarea, select { font-size: max(16px, 1em); }
/* §M · Footer-standards — vertical stack on small phones via 700px existing rule */
/* §N · Section h2 fallback fluid clamp */
.section-head h2 {
font-size: clamp(28px, 7vw, 56px);
line-height: 1.05;
}
/* Scroll anchor offset matches new nav clearance */
section[id], .sheet { scroll-margin-top: 80px; }
}
/* ── Stack form name+contact pairs on smallest phones (≤500px) ── */
@media (max-width: 500px) {
.form-grid { grid-template-columns: 1fr; }
.f-field:nth-child(odd) { padding-right: 0 !important; }
.f-field:nth-child(even):not(.full) { padding-left: 0 !important; border-left: none !important; }
.f-field.full { grid-column: span 1; }
}
/* ── Small phone refinements (≤480px) ── */
@media (max-width: 480px) {
/* §A · Slim nav to recover viewport */
.nav { padding: 10px var(--pad); }
.nav .nav-cta { padding: 10px 14px; font-size: 10.5px; min-height: 42px; }
/* §B · Hero — even tighter at phone size */
.hero .hero-card { padding: 22px 18px; margin: 132px 14px 60px !important; }
.hero .hero-card h1 { font-size: clamp(28px, 8.2vw, 36px); margin-bottom: 16px; }
.hero .hero-card .hero-lead { font-size: 14.5px; }
.hero-actions { flex-direction: column; align-items: stretch; gap: 10px; }
.hero-actions .btn { width: 100%; justify-content: center; }
/* §C · Marquee — drop type a bit more */
.legend-track { font-size: 10.5px; gap: 28px; animation-duration: 70s; }
.legend-track .it { font-size: 16px; }
/* §D · Certifications — tighten gap */
.certs-inner { gap: 14px; padding: 24px var(--pad); }
/* §F · Range cards — SVG text legibility */
.range-card .draw svg .title-rail { font-size: 9px; }
.range-card .draw svg .dim-txt { font-size: 10px; }
.range-card .draw svg .lbl { font-size: 8px; }
.range-card .rc-section-key { padding: 14px 16px; font-size: 11px; row-gap: 7px; }
/* §G · Testimonials — reduce featured-card display weight */
.quote-card.q-featured .body { font-size: 18px; }
.quote-card.q-featured .glyph { font-size: 72px; }
.quote-card .stars { font-size: 16px; }
/* §K · FAQ — answers more compact */
.faq-q h3 { font-size: clamp(16px, 4.4vw, 22px); }
.faq-a { font-size: 15px; }
/* §L · Contact — info table compaction + map shorter aspect */
.contact-info .row { padding: 10px 18px; gap: 14px; grid-template-columns: 100px 1fr; }
.contact-info dd { font-size: 16.5px; }
.contact-info dd.mono { font-size: 12.5px; }
.contact-map { aspect-ratio: 4/3; }
/* §M · Footer-standards — vertical stack, larger text */
.footer-standards-inner { flex-direction: column; gap: 8px; font-size: 10.5px; }
.footer-standards-inner .sep { display: none; }
/* §J · Projects — small-phone refinements */
.pr .pr-photo { aspect-ratio: 5/4; min-height: 200px; }
.pr .pr-info { padding: 14px 16px 16px; }
.pr .pr-info .place { font-size: 20px; }
.pr .pr-info .credit { font-size: 9px; gap: 8px; }
.pr .pr-titlebar { padding: 6px 12px; font-size: 8.5px; }
.pr .pr-titlebar .title { font-size: 12px; }
/* Tighter scroll-anchor below the slim nav */
section[id], .sheet { scroll-margin-top: 68px; }
}
/* ── Touch-device overrides (any width, when device has no hover capability) ── */
@media (hover: none) and (pointer: coarse) {
/* Range cards — kill cursor-tracked effects that need a real mouse */
.range-card { transform: none !important; }
.range-card .draw svg .glass-shimmer,
.range-card .draw svg .alu-shimmer { display: none !important; }
.range-card .tag-row::after { opacity: 0.85 !important; animation: none !important; }
.range-card.in .draw svg .rc-scanner { animation-duration: 12s; }
/* Quote cards — clear any sticky :hover state after tap */
.quote-card:hover { transform: none; box-shadow: none; }
/* Touch-only swipe hint for the horizontally-scrolling drawings */
.craft-detail::before,
.detail-draw-wrap::after {
content: '↔ swipe to read details';
display: block;
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--mute);
padding: 6px 12px;
opacity: 0.7;
}
}
/* ── Reduced motion: extend with marquee + map iframe overrides ── */
@media (prefers-reduced-motion: reduce) {
.legend-track { animation: none !important; overflow-x: auto; }
.quote-card .body { transition: none !important; }
}
/* ════════════════════════════════════════════════════════════════
PRODUCT SUB-PAGE STYLES (range/.html)
════════════════════════════════════════════════════════════════ */
body.product-page { background: var(--paper); }
.product-page main { padding-top: 90px; }
/* Breadcrumb */
.pp-breadcrumb {
max-width: var(--maxw);
margin: 0 auto;
padding: 28px var(--pad) 0;
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--mute);
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.pp-breadcrumb a { color: var(--mute); transition: color .2s; }
.pp-breadcrumb a:hover { color: var(--ink); }
.pp-breadcrumb .sep { opacity: 0.5; }
.pp-breadcrumb .current { color: var(--ink); }
/* Hero — two columns */
.pp-hero {
max-width: var(--maxw);
margin: 0 auto;
padding: 36px var(--pad) 56px;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: 56px;
align-items: center;
}
.pp-hero-draw {
background: var(--paper-2);
border: 1px solid var(--rule);
aspect-ratio: 1/1;
position: relative;
overflow: hidden;
}
.pp-hero-draw svg { width: 100%; height: 100%; display: block; }
.pp-hero-content { display: flex; flex-direction: column; gap: 22px; }
.pp-tag {
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
display: flex;
gap: 10px;
align-items: center;
}
.pp-tag .sep { color: var(--mute); }
.pp-tag .code { color: var(--mute); }
.pp-hero-content h1 {
font-family: var(--f-display);
font-weight: 350;
font-size: clamp(40px, 5vw, 64px);
line-height: var(--lh-tight);
letter-spacing: -0.02em;
margin: 0;
font-variation-settings: "opsz" 144, "SOFT" 60;
}
.pp-hero-content h1 .it { font-style: italic; color: var(--blue); font-weight: 300; }
.pp-lede {
font-size: 17px;
line-height: var(--lh-body);
color: var(--ink-soft);
max-width: 52ch;
margin: 0;
}
.pp-cta-row {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 8px;
}
.pp-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 22px;
font-family: var(--f-mono);
font-size: 11.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
border: 1px solid var(--ink);
transition: background .22s, color .22s, transform .22s;
}
.pp-btn.primary {
background: var(--ink);
color: #fff;
}
.pp-btn.primary:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-1px); }
.pp-btn.ghost { background: transparent; color: var(--ink); }
.pp-btn.ghost:hover { background: var(--ink); color: #fff; }
.pp-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
/* At-a-glance strip */
.pp-glance {
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
background: var(--paper-2);
}
.pp-glance-grid {
max-width: var(--maxw);
margin: 0 auto;
padding: 0 var(--pad);
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.pp-glance-cell {
padding: 28px 24px;
border-right: 1px solid var(--rule);
display: flex;
flex-direction: column;
gap: 8px;
}
.pp-glance-cell:last-child { border-right: none; }
.pp-glance-lbl {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--mute);
}
.pp-glance-val {
font-family: var(--f-display);
font-size: 28px;
font-weight: 350;
line-height: 1.05;
color: var(--ink);
letter-spacing: -0.01em;
}
.pp-glance-val .unit {
font-family: var(--f-body);
font-size: 14px;
color: var(--mute);
margin-left: 4px;
letter-spacing: 0;
font-weight: 400;
}
.pp-glance-hint {
font-size: 11px;
color: var(--ink-soft);
line-height: 1.4;
}
/* Section heading shared by all product-page sections */
.pp-section {
max-width: var(--maxw);
margin: 0 auto;
padding: 80px var(--pad);
border-bottom: 1px solid var(--rule);
}
.pp-section:last-of-type { border-bottom: none; }
.pp-section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 24px;
margin-bottom: 40px;
padding-bottom: 18px;
border-bottom: 1px solid var(--rule);
}
.pp-section-head h2 {
font-family: var(--f-display);
font-weight: 350;
font-size: clamp(28px, 3.4vw, 42px);
line-height: var(--lh-tight);
letter-spacing: -0.015em;
margin: 0;
font-variation-settings: "opsz" 144, "SOFT" 50;
}
.pp-section-head h2 .it { font-style: italic; color: var(--blue); font-weight: 300; }
.pp-section-ref {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--mute);
text-align: right;
line-height: 1.6;
flex-shrink: 0;
}
.pp-section-ref strong { color: var(--ink); font-weight: 500; }
/* Configurations gallery */
.pp-configs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.pp-config-card {
border: 1px solid var(--rule);
background: var(--panel);
display: flex;
flex-direction: column;
transition: border-color .22s, box-shadow .22s, transform .22s;
}
.pp-config-card:hover {
border-color: var(--ink-soft);
box-shadow: var(--shadow-2);
transform: translateY(-2px);
}
.pp-config-draw {
aspect-ratio: 4/3;
padding: 22px;
background: var(--paper-2);
border-bottom: 1px solid var(--rule);
}
.pp-config-draw svg { width: 100%; height: 100%; display: block; }
.pp-config-body { padding: 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pp-config-name {
font-family: var(--f-mono);
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink);
font-weight: 500;
}
.pp-config-size {
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mute);
}
.pp-config-desc {
margin-top: 8px;
font-size: 14px;
line-height: 1.55;
color: var(--ink-soft);
}
/* Specifications table */
.pp-spec-table {
border: 1px solid var(--rule);
background: var(--panel);
}
.pp-spec-row {
display: grid;
grid-template-columns: 240px 1fr;
border-bottom: 1px solid var(--rule);
}
.pp-spec-row:last-child { border-bottom: none; }
.pp-spec-row:nth-child(odd) { background: var(--paper-2); }
.pp-spec-row .lbl {
padding: 16px 22px;
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--mute);
border-right: 1px solid var(--rule);
display: flex;
align-items: center;
}
.pp-spec-row .val {
padding: 16px 22px;
font-size: 14.5px;
color: var(--ink);
line-height: 1.55;
}
.pp-spec-row .val em { font-style: italic; color: var(--mute); }
/* Glass options chips */
.pp-chips {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
.pp-chip {
border: 1px solid var(--rule);
background: var(--panel);
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 6px;
transition: border-color .22s, background .22s, transform .22s;
cursor: default;
}
.pp-chip:hover {
border-color: var(--accent);
background: var(--paper-2);
}
.pp-chip[data-recommended="true"] { border-color: var(--accent); }
.pp-chip-name {
font-family: var(--f-mono);
font-size: 11.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink);
font-weight: 500;
display: flex;
justify-content: space-between;
gap: 8px;
}
.pp-chip-name .tag {
font-size: 9.5px;
color: var(--accent);
font-style: normal;
letter-spacing: 0.18em;
}
.pp-chip-desc {
font-size: 13px;
color: var(--ink-soft);
line-height: 1.5;
}
/* Colour swatches */
.pp-swatches {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
}
.pp-swatch {
width: 54px;
height: 54px;
border-radius: 50%;
background: var(--c, #888);
border: 2px solid var(--rule);
position: relative;
cursor: pointer;
transition: transform .22s, border-color .22s;
}
.pp-swatch:hover { transform: scale(1.08); border-color: var(--ink); }
.pp-swatch .name {
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
font-family: var(--f-mono);
font-size: 9.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink);
white-space: nowrap;
background: var(--panel);
border: 1px solid var(--rule);
padding: 4px 8px;
opacity: 0;
transition: opacity .2s;
pointer-events: none;
z-index: 2;
}
.pp-swatch:hover .name { opacity: 1; }
.pp-swatch--custom {
background: conic-gradient(from 45deg, #2a3a5a, #6a7a9a, #aab5c5, #6a7a9a, #2a3a5a);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--f-mono);
font-size: 18px;
line-height: 1;
}
.pp-swatches-note {
margin-top: 36px;
font-size: 13px;
color: var(--ink-soft);
line-height: 1.55;
font-style: italic;
}
/* Hardware grid */
.pp-hardware {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}
.pp-hw-item {
border: 1px solid var(--rule);
background: var(--panel);
padding: 18px 22px;
display: flex;
flex-direction: column;
gap: 4px;
}
.pp-hw-item .lbl {
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent);
font-weight: 600;
}
.pp-hw-item .desc {
font-size: 14px;
color: var(--ink);
line-height: 1.5;
}
/* Section detail */
.pp-section-detail {
border: 1px solid var(--rule);
background: var(--panel);
padding: 36px;
}
.pp-section-detail svg { width: 100%; height: auto; display: block; }
.pp-section-key {
margin: 32px 0 0;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
}
.pp-section-key li {
display: flex;
gap: 12px;
align-items: baseline;
padding-top: 10px;
border-top: 1px solid var(--rule);
}
.pp-section-key .n {
font-family: var(--f-mono);
font-size: 14px;
color: var(--accent);
font-weight: 600;
min-width: 18px;
}
.pp-section-key .v {
font-size: 13.5px;
color: var(--ink-soft);
line-height: 1.5;
}
/* Real installs placeholder */
.pp-installs-placeholder {
border: 1px dashed var(--rule);
background: var(--paper-2);
padding: 60px 36px;
text-align: center;
color: var(--ink-soft);
font-size: 15px;
line-height: 1.65;
}
.pp-installs-placeholder a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* Standards strip */
.pp-standards {
display: flex;
flex-wrap: wrap;
gap: 8px 26px;
align-items: center;
font-family: var(--f-mono);
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink);
}
.pp-standards .label { color: var(--mute); }
.pp-standards .sep { color: var(--mute); opacity: 0.5; }
.pp-standards-note {
margin-top: 28px;
font-size: 13px;
color: var(--ink-soft);
line-height: 1.55;
font-style: italic;
}
/* Related systems */
.pp-related {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.pp-related-card {
border: 1px solid var(--rule);
background: var(--panel);
padding: 22px;
display: flex;
flex-direction: column;
gap: 8px;
color: var(--ink);
transition: border-color .22s, transform .22s, box-shadow .22s;
}
.pp-related-card:hover {
border-color: var(--ink-soft);
transform: translateY(-2px);
box-shadow: var(--shadow-2);
}
.pp-related-card .num {
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: 0.16em;
color: var(--accent);
font-weight: 600;
}
.pp-related-card .name {
font-family: var(--f-display);
font-size: 22px;
font-weight: 350;
line-height: 1.15;
letter-spacing: -0.01em;
}
.pp-related-card .name .it { font-style: italic; color: var(--blue); font-weight: 300; }
.pp-related-card .arrow {
margin-top: auto;
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: 0.16em;
color: var(--mute);
text-transform: uppercase;
transition: color .22s, transform .22s;
}
.pp-related-card:hover .arrow { color: var(--ink); }
/* CTA band */
.pp-cta-band {
background: var(--ink);
color: #fff;
padding: 80px var(--pad);
text-align: center;
}
.pp-cta-band-inner { max-width: 760px; margin: 0 auto; }
.pp-cta-band h2 {
font-family: var(--f-display);
font-size: clamp(34px, 4vw, 54px);
font-weight: 350;
line-height: var(--lh-tight);
letter-spacing: -0.015em;
margin: 0 0 18px;
font-variation-settings: "opsz" 144, "SOFT" 60;
}
.pp-cta-band h2 .it { font-style: italic; color: var(--blue-light); font-weight: 300; }
.pp-cta-band p {
font-size: 17px;
line-height: 1.55;
color: rgba(255,255,255,0.78);
margin: 0 0 32px;
}
.pp-cta-band .pp-btn {
border-color: #fff;
color: #fff;
background: transparent;
}
.pp-cta-band .pp-btn:hover {
background: #fff;
color: var(--ink);
transform: translateY(-1px);
}
/* Responsive — product page */
@media (max-width: 1000px) {
.pp-hero { grid-template-columns: 1fr; gap: 32px; padding: 28px var(--pad) 40px; }
.pp-glance-grid { grid-template-columns: repeat(2, 1fr); }
.pp-glance-cell { border-right: none; border-bottom: 1px solid var(--rule); }
.pp-glance-cell:nth-child(odd) { border-right: 1px solid var(--rule); }
.pp-glance-cell:nth-last-child(-n+2) { border-bottom: none; }
.pp-configs { grid-template-columns: repeat(2, 1fr); }
.pp-related { grid-template-columns: 1fr 1fr; }
.pp-section { padding: 60px var(--pad); }
}
@media (max-width: 700px) {
.pp-section-head { flex-direction: column; align-items: flex-start; }
.pp-section-ref { text-align: left; }
.pp-configs { grid-template-columns: 1fr; }
.pp-spec-row { grid-template-columns: 1fr; }
.pp-spec-row .lbl { border-right: none; border-bottom: 1px solid var(--rule); padding: 10px 18px; }
.pp-spec-row .val { padding: 12px 18px 14px; }
.pp-chips { grid-template-columns: 1fr; }
.pp-hardware { grid-template-columns: 1fr; }
.pp-related { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
.pp-glance-grid { grid-template-columns: 1fr; }
.pp-glance-cell { border-right: none; }
.pp-glance-cell:nth-child(odd) { border-right: none; }
.pp-glance-cell:nth-last-child(2) { border-bottom: 1px solid var(--rule); }
}
/* ════════════════════════════════════════════════════════════════
OPEN FILE — sticky configurator + cart page + nav badge
════════════════════════════════════════════════════════════════ */
/* Nav badge — shown when items are in the file */
.nav-cta-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 7px;
margin: 0 6px;
background: var(--accent);
color: #fff;
border-radius: 11px;
font-family: var(--f-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
line-height: 1;
}
.nav-cta-count[hidden] { display: none; }
.mm-file-count {
color: var(--accent);
font-weight: 600;
margin-left: 6px;
}
.mm-file-count[hidden] { display: none; }
/* Selection state on existing tiles, swatches, and chips */
.pp-config-card[data-selected="true"] {
border-color: var(--accent);
box-shadow: 0 0 0 2px var(--accent) inset, var(--shadow-2);
}
.pp-config-card[data-selected="true"] .pp-config-name {
color: var(--accent);
}
.pp-config-card[data-selected="true"]::before {
content: '✓';
position: absolute;
top: 12px;
right: 14px;
width: 24px;
height: 24px;
background: var(--accent);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 600;
z-index: 2;
}
.pp-config-card { position: relative; cursor: pointer; }
.pp-swatch[data-selected="true"] {
border-color: var(--ink);
box-shadow: 0 0 0 3px var(--accent), var(--shadow-2);
transform: scale(1.08);
}
.pp-chip[data-selected="true"] {
border-color: var(--accent);
background: var(--accent);
color: #fff;
}
.pp-chip[data-selected="true"] .pp-chip-name { color: #fff; }
.pp-chip[data-selected="true"] .pp-chip-desc { color: rgba(255,255,255,0.85); }
.pp-chip[data-selected="true"] .tag { color: rgba(255,255,255,0.7); }
.pp-chip { cursor: pointer; }
/* The sticky configurator card */
.cfg {
position: fixed;
right: clamp(16px, 2.5vw, 32px);
bottom: clamp(16px, 2.5vw, 32px);
z-index: 40;
font-family: var(--f-body);
}
.cfg-toggle {
background: var(--ink);
color: #fff;
border: none;
padding: 14px 22px;
font-family: var(--f-mono);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
cursor: pointer;
box-shadow: 0 8px 28px rgba(10,14,26,0.25), 0 2px 6px rgba(10,14,26,0.15);
display: flex;
align-items: center;
gap: 14px;
transition: transform .22s, background .22s;
}
.cfg-toggle:hover { background: var(--accent); transform: translateY(-2px); }
.cfg-toggle-pip {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 0 rgba(26,67,128,0.5);
animation: cfg-pulse 2.2s infinite;
}
@keyframes cfg-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(26,67,128,0.4); }
50% { box-shadow: 0 0 0 8px rgba(26,67,128,0); }
}
@media (prefers-reduced-motion: reduce) {
.cfg-toggle-pip { animation: none; }
}
.cfg-card {
position: absolute;
bottom: 0;
right: 0;
width: 360px;
max-width: calc(100vw - 32px);
background: var(--panel);
border: 1px solid var(--rule);
box-shadow: 0 18px 48px rgba(10,14,26,0.22), 0 4px 12px rgba(10,14,26,0.10);
display: none;
flex-direction: column;
}
.cfg[data-open="true"] .cfg-card { display: flex; }
.cfg[data-open="true"] .cfg-toggle { display: none; }
.cfg-card-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
border-bottom: 1px solid var(--rule);
background: var(--ink);
color: #fff;
}
.cfg-card-head .cfg-tag {
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.cfg-card-head .cfg-tag .code {
color: var(--blue-light);
margin-right: 6px;
}
.cfg-close {
background: transparent;
color: #fff;
border: 1px solid rgba(255,255,255,0.3);
width: 28px;
height: 28px;
cursor: pointer;
font-size: 18px;
line-height: 1;
padding: 0;
transition: background .15s, border-color .15s;
}
.cfg-close:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.6); }
.cfg-card-body {
padding: 18px;
display: flex;
flex-direction: column;
gap: 12px;
max-height: min(60vh, 460px);
overflow-y: auto;
}
.cfg-row {
display: grid;
grid-template-columns: 110px 1fr;
gap: 10px;
align-items: center;
font-size: 13px;
}
.cfg-row .cfg-lbl {
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--mute);
}
.cfg-row .cfg-val {
color: var(--ink);
font-weight: 500;
line-height: 1.35;
word-break: break-word;
}
.cfg-row .cfg-val[data-empty="true"] {
color: var(--mute);
font-style: italic;
font-weight: 400;
}
.cfg-row--input { align-items: flex-start; }
.cfg-size-fields {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--f-mono);
color: var(--mute);
font-size: 12px;
}
.cfg-size-fields input {
width: 70px;
padding: 7px 8px;
border: 1px solid var(--rule);
background: var(--paper-2);
font: inherit;
font-family: var(--f-mono);
font-size: 12px;
color: var(--ink);
-moz-appearance: textfield;
}
.cfg-size-fields input::-webkit-outer-spin-button,
.cfg-size-fields input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cfg-size-fields input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.cfg-card-body textarea {
width: 100%;
padding: 8px 10px;
border: 1px solid var(--rule);
background: var(--paper-2);
font: inherit;
font-family: var(--f-body);
font-size: 13px;
line-height: 1.4;
color: var(--ink);
resize: vertical;
}
.cfg-card-body textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.cfg-card-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border-top: 1px solid var(--rule);
}
.cfg-btn {
padding: 14px 12px;
font-family: var(--f-mono);
font-size: 11.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
border: none;
cursor: pointer;
transition: background .2s, color .2s;
}
.cfg-btn-primary {
background: var(--accent);
color: #fff;
}
.cfg-btn-primary:hover { background: var(--ink); }
.cfg-btn-primary:disabled { background: var(--rule); color: var(--mute); cursor: not-allowed; }
.cfg-btn-ghost {
background: var(--paper-2);
color: var(--ink);
border-left: 1px solid var(--rule);
}
.cfg-btn-ghost:hover { background: var(--ink); color: #fff; }
/* Toast confirmation */
.cfg-toast {
position: fixed;
bottom: 28px;
left: 50%;
transform: translateX(-50%) translateY(20px);
background: var(--ink);
color: #fff;
padding: 14px 22px;
font-family: var(--f-mono);
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
box-shadow: 0 14px 30px rgba(10,14,26,0.3);
z-index: 60;
opacity: 0;
pointer-events: none;
transition: opacity .25s, transform .25s;
}
.cfg-toast[data-show="true"] {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.cfg-toast .check {
color: var(--blue-light);
margin-right: 8px;
font-weight: 700;
}
@media (max-width: 600px) {
.cfg { right: 12px; bottom: 12px; left: 12px; }
.cfg-card { width: 100%; max-width: none; left: 0; right: 0; }
.cfg-toggle { width: 100%; justify-content: center; }
.cfg-row { grid-template-columns: 90px 1fr; }
}
/* ────────── /file page (cart / checkout) ────────── */
body.file-page { background: var(--paper-2); }
body.file-page main { padding-top: 90px; }
.file-hero {
max-width: var(--maxw);
margin: 0 auto;
padding: 48px var(--pad) 32px;
}
.file-hero h1 {
font-family: var(--f-display);
font-weight: 350;
font-size: clamp(40px, 5vw, 64px);
line-height: var(--lh-tight);
letter-spacing: -0.02em;
margin: 14px 0 8px;
font-variation-settings: "opsz" 144, "SOFT" 60;
}
.file-hero h1 .it { font-style: italic; color: var(--blue); font-weight: 300; }
.file-hero .file-sub {
font-size: 16px;
color: var(--ink-soft);
max-width: 60ch;
line-height: 1.55;
}
.file-hero-count {
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--mute);
display: flex;
align-items: center;
gap: 12px;
}
.file-hero-count strong {
color: var(--accent);
font-weight: 600;
}
.file-items {
max-width: var(--maxw);
margin: 0 auto;
padding: 0 var(--pad) 40px;
}
.file-empty {
border: 1px dashed var(--rule);
background: var(--panel);
padding: 72px 36px;
text-align: center;
color: var(--ink-soft);
line-height: 1.65;
}
.file-empty h3 {
font-family: var(--f-display);
font-weight: 350;
font-size: 28px;
margin: 0 0 12px;
color: var(--ink);
}
.file-empty a {
display: inline-block;
margin-top: 22px;
padding: 12px 22px;
border: 1px solid var(--ink);
background: var(--ink);
color: #fff;
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
transition: background .22s, color .22s, transform .22s;
}
.file-empty a:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-1px); }
.file-item {
background: var(--panel);
border: 1px solid var(--rule);
margin-bottom: 14px;
display: grid;
grid-template-columns: 64px 1fr auto;
gap: 0;
}
.file-item-tag {
background: var(--ink);
color: #fff;
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-align: center;
padding: 22px 8px;
display: flex;
flex-direction: column;
gap: 4px;
align-items: center;
justify-content: flex-start;
}
.file-item-tag .num { color: var(--blue-light); font-size: 10px; }
.file-item-tag .code {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.1em;
margin-top: 4px;
}
.file-item-body {
padding: 22px 26px;
display: flex;
flex-direction: column;
gap: 6px;
}
.file-item-name {
font-family: var(--f-display);
font-size: 24px;
font-weight: 350;
line-height: 1.15;
margin: 0;
letter-spacing: -0.01em;
}
.file-item-name .it { font-style: italic; color: var(--blue); font-weight: 300; }
.file-item-meta {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 6px 24px;
margin-top: 8px;
font-family: var(--f-mono);
font-size: 11.5px;
letter-spacing: 0.06em;
color: var(--ink-soft);
}
.file-item-meta > div {
display: flex;
flex-direction: column;
gap: 2px;
}
.file-item-meta .lbl {
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--mute);
}
.file-item-meta .val { color: var(--ink); }
.file-item-notes {
margin-top: 10px;
padding-top: 10px;
border-top: 1px dashed var(--rule);
font-size: 13px;
color: var(--ink-soft);
line-height: 1.5;
}
.file-item-notes::before {
content: 'NOTE — ';
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.16em;
color: var(--mute);
}
.file-item-actions {
display: flex;
flex-direction: column;
border-left: 1px solid var(--rule);
}
.file-item-actions button {
border: none;
background: transparent;
padding: 14px 20px;
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
color: var(--mute);
transition: background .2s, color .2s;
text-align: center;
}
.file-item-actions button:hover { background: var(--paper-2); color: var(--ink); }
.file-item-actions button.remove:hover { background: #b73a3a; color: #fff; }
.file-item-actions button:not(:last-child) { border-bottom: 1px solid var(--rule); }
/* Contact form on /file page */
.file-contact {
max-width: var(--maxw);
margin: 0 auto;
padding: 28px var(--pad) 80px;
}
.file-contact-head {
padding-bottom: 22px;
border-bottom: 1px solid var(--rule);
margin-bottom: 28px;
}
.file-contact-head h2 {
font-family: var(--f-display);
font-size: clamp(28px, 3.4vw, 40px);
font-weight: 350;
line-height: 1.1;
letter-spacing: -0.015em;
margin: 0;
}
.file-contact-head h2 .it { font-style: italic; color: var(--blue); font-weight: 300; }
.file-contact-head .ref {
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--mute);
margin-top: 6px;
}
.file-form {
background: var(--panel);
border: 1px solid var(--rule);
padding: 32px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px 24px;
}
.file-form-field { display: flex; flex-direction: column; gap: 6px; }
.file-form-field.full { grid-column: 1 / -1; }
.file-form-field label {
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--mute);
}
.file-form-field label .req { color: var(--accent); margin-left: 4px; }
.file-form-field input,
.file-form-field textarea,
.file-form-field select {
padding: 12px 14px;
border: 1px solid var(--rule);
background: var(--paper);
font: inherit;
color: var(--ink);
transition: border-color .2s;
}
.file-form-field input:focus,
.file-form-field textarea:focus,
.file-form-field select:focus { outline: none; border-color: var(--accent); }
.file-form-field textarea { resize: vertical; min-height: 100px; }
.file-submit-row {
grid-column: 1 / -1;
display: flex;
justify-content: space-between;
align-items: center;
gap: 18px;
padding-top: 22px;
border-top: 1px solid var(--rule);
margin-top: 6px;
flex-wrap: wrap;
}
.file-submit-row .submit-hint {
font-size: 12.5px;
color: var(--ink-soft);
line-height: 1.5;
max-width: 38ch;
}
.file-submit-btn {
padding: 16px 28px;
background: var(--ink);
color: #fff;
border: 1px solid var(--ink);
font-family: var(--f-mono);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
cursor: pointer;
transition: background .2s, transform .2s;
}
.file-submit-btn:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-1px); }
.file-submit-btn:disabled { background: var(--rule); border-color: var(--rule); color: var(--mute); cursor: not-allowed; transform: none; }
@media (max-width: 760px) {
.file-item { grid-template-columns: 56px 1fr; }
.file-item-actions {
grid-column: 1 / -1;
flex-direction: row;
border-left: none;
border-top: 1px solid var(--rule);
}
.file-item-actions button { flex: 1; padding: 12px; }
.file-item-actions button:not(:last-child) { border-bottom: none; border-right: 1px solid var(--rule); }
.file-form { grid-template-columns: 1fr; padding: 22px; }
.file-submit-row { flex-direction: column; align-items: stretch; }
.file-submit-btn { width: 100%; }
}