/* ─────────────────────────────────────────────
MRVËY · styles.css
Stack: Cormorant Garamond (display headings)
Inter (body copy)
DM Mono (labels, metadata, pricing notes)
───────────────────────────────────────────── */
:root {
color-scheme: light;
--bg: #F5F2EC;
--surface: #EFEBE3;
--surface-dark: #E8E3D8;
--border: rgba(30,25,18,0.10);
--border-strong: rgba(30,25,18,0.18);
--ink: #1A1710;
--ink-muted: #56504A;
--ink-faint: #80796F;
--accent: #2C4A2E;
--accent-light: #3D6640;
--accent-deep: #2C4A2E; /* featured pricing card bg */
--accent-deep-hover: #3D6640;
--on-accent: #F5F2EC;
--gold: #C4A46B;
--select-bg: rgba(44,74,46,0.18);
/* nav/footer text tints — overridden in dark mode */
--nav-link: rgba(26,23,16,0.55);
--nav-link-dim: rgba(26,23,16,0.40);
--nav-sep: rgba(26,23,16,0.22);
--nav-border: rgba(30,25,18,0.08);
--nav-bg: rgba(245,242,236,0.85);
--font-display: 'Cormorant Garamond', Georgia, serif;
--font-body: 'Inter', Helvetica, Arial, sans-serif;
--font-label: 'DM Mono', 'Courier New', monospace;
}
/* ── DARK MODE · MRVËY production dossier ──────
* Activated via [data-theme="dark"] on .
* Light mode is the default and remains unchanged.
* Near-black warm bg, off-white ink, lifted green accent.
*/
:root[data-theme="dark"] {
color-scheme: dark;
--bg: #131210;
--surface: #1C1A16;
--surface-dark: #232019;
--border: rgba(245,242,236,0.12);
--border-strong: rgba(245,242,236,0.22);
--ink: #ECE7DD;
--ink-muted: #A39C90;
--ink-faint: #7C766B;
--accent: #6FA368;
--accent-light: #84B87C;
--accent-deep: #20402A; /* deeper green keeps off-white text legible */
--accent-deep-hover: #284E33;
--gold: #D2B585;
--select-bg: rgba(111,163,104,0.28);
/* --on-accent stays light: text sits on the green featured card */
--nav-link: rgba(236,231,221,0.62);
--nav-link-dim: rgba(236,231,221,0.42);
--nav-sep: rgba(236,231,221,0.24);
--nav-border: rgba(245,242,236,0.10);
--nav-bg: rgba(19,18,16,0.85);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
background: var(--bg);
color: var(--ink);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ── MICRO-POLISH ─────────────────────────────
* Small typographic and interaction refinements.
* Each degrades gracefully; motion respects preference.
*/
/* In-page anchors land clear of the fixed nav */
section[id] { scroll-margin-top: 90px; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
/* Brand-tinted text selection */
::selection { background: var(--select-bg); }
/* Balanced headline ragging, tidy paragraph endings */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
/* Lining, tabular figures for spec and price numerals */
.tier-price,
.brief-doc-price-val,
.run-plan-out-date,
.run-pct,
.response-doc-price-val,
.response-doc-price-sub,
.run-meta-item strong {
font-variant-numeric: lining-nums tabular-nums;
}
/* ── UTILITY ─────────────────────────────── */
.label {
font-family: var(--font-label);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-muted);
}
.label--accent { color: var(--accent); }
/* Keyboard focus — visible for keyboard users, suppressed for mouse */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 1px;
}
/* ── BRAND IDENTITY MARK ─────────────────── */
/*
* Three-dot mark — precedes MRVËY wordmark in nav, hero, section tags, footer.
* Usage:
*/
.brand-dots {
display: inline-flex;
align-items: center;
gap: 5px;
flex-shrink: 0;
}
.brand-dots span {
width: 5px;
height: 5px;
border-radius: 999px;
background: var(--accent);
display: block;
}
/* Smaller, more subtle version inside sample cards */
.brand-dots--card {
gap: 4px;
margin-bottom: 10px;
}
.brand-dots--card span {
width: 4px;
height: 4px;
}
/* ── NAV ─────────────────────────────────── */
body > nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 22px 64px;
background: var(--nav-bg);
-webkit-backdrop-filter: blur(14px) saturate(125%);
backdrop-filter: blur(14px) saturate(125%);
border-bottom: 1px solid var(--nav-border);
transition: border-color 0.3s, background-color 0.3s;
}
/* Opaque fallback where backdrop-filter is unsupported */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
body > nav { background: var(--bg); }
}
body > nav.nav--scrolled { border-bottom-color: var(--border-strong); }
.nav-wordmark {
font-family: var(--font-label);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.18em;
color: var(--ink);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 10px;
}
.nav-links {
display: flex;
align-items: center;
gap: 40px;
list-style: none;
}
.nav-links a {
font-family: var(--font-label);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--nav-link);
text-decoration: none;
transition: color 0.2s;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--ink); }
.nav-cta {
color: var(--bg) !important;
background: var(--ink);
padding: 10px 20px;
transition: background 0.2s;
}
.nav-cta:hover { background: var(--accent) !important; color: var(--bg) !important; }
/* Language switch */
.nav-lang {
display: flex;
align-items: center;
gap: 6px;
border-left: 1px solid var(--border);
padding-left: 24px;
margin-left: -8px;
}
.nav-lang a {
font-family: var(--font-label);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--nav-link-dim);
text-decoration: none;
transition: color 0.2s;
}
.nav-lang a:hover { color: var(--ink); }
.nav-lang-active {
font-family: var(--font-label);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink);
}
.nav-lang-sep {
font-family: var(--font-label);
font-size: 9px;
color: var(--nav-sep);
}
/* ── Theme toggle (light / dark) ── */
.nav-theme {
display: flex;
align-items: center;
margin-left: -8px;
}
.theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
background: none;
border: 1px solid var(--border-strong);
border-radius: 999px;
color: var(--ink-muted);
cursor: pointer;
padding: 0;
transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.theme-toggle:hover {
color: var(--ink);
border-color: var(--ink-faint);
}
.theme-toggle svg {
width: 14px;
height: 14px;
display: block;
}
/* Sun shown in light mode, moon shown in dark mode */
.theme-toggle .theme-icon--moon { display: none; }
.theme-toggle .theme-icon--sun { display: block; }
:root[data-theme="dark"] .theme-toggle .theme-icon--moon { display: block; }
:root[data-theme="dark"] .theme-toggle .theme-icon--sun { display: none; }
.nav-mobile-toggle {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 4px;
}
.nav-mobile-toggle span {
display: block;
width: 22px;
height: 1px;
background: var(--ink);
transition: transform 0.2s, opacity 0.2s;
}
/* ── HERO ────────────────────────────────── */
#hero {
min-height: 100vh;
padding: 160px 64px 100px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: end;
border-bottom: 1px solid var(--border);
}
.hero-pre {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 48px;
}
.hero-pre-line {
width: 32px;
height: 1px;
background: var(--accent);
flex-shrink: 0;
}
.hero-wordmark {
font-family: var(--font-label);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.20em;
color: var(--ink);
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 32px;
}
.hero-headline {
font-family: var(--font-display);
font-size: clamp(48px, 5.2vw, 84px);
font-weight: 700;
font-style: normal;
line-height: 0.96;
color: var(--ink);
margin-bottom: 36px;
letter-spacing: -0.01em;
}
/* "serious textile sourcing." stands out in accent */
.hero-key {
color: var(--accent);
}
.hero-sub {
font-family: var(--font-body);
font-size: 17px;
font-weight: 400;
color: var(--ink-muted);
line-height: 1.6;
max-width: 420px;
margin-bottom: 48px;
}
.hero-ctas {
display: flex;
align-items: center;
gap: 24px;
}
.btn-primary {
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--bg);
background: var(--ink);
padding: 14px 28px;
text-decoration: none;
border: 1px solid var(--ink);
transition: background 0.25s, border-color 0.25s;
display: inline-block;
}
.btn-primary:hover { background: var(--accent); border-color: var(--accent); }
.btn-secondary {
position: relative;
font-family: var(--font-body);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-muted);
text-decoration: none;
border-bottom: 1px solid var(--border-strong);
padding-bottom: 2px;
transition: color 0.2s;
}
.btn-secondary::after {
content: '';
position: absolute;
left: 0;
bottom: -1px;
width: 100%;
height: 1px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-secondary:hover { color: var(--ink); }
.btn-secondary:hover::after { transform: scaleX(1); }
/* Mobile trust strip — only shown on small screens */
.hero-mobile-trust {
display: none;
}
/* Desktop sidebar trust box */
.hero-right {
display: flex;
flex-direction: column;
gap: 24px;
}
.hero-trust {
border: 1px solid var(--border);
padding: 28px 32px;
background: var(--surface);
}
.hero-trust-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px 32px;
margin-top: 20px;
}
.trust-item .label { margin-bottom: 4px; }
.trust-item-val {
font-family: var(--font-display);
font-size: 21px;
font-weight: 500;
color: var(--ink);
line-height: 1.2;
}
.hero-note {
font-family: var(--font-label);
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-faint);
text-align: right;
}
/* ── SIGNATURE MOMENT: THE SOURCING FILE ─── */
/*
* The hero "at a glance" box reframed as a controlled production
* document — proprietary operational artifact, MRVËY's signature detail.
*/
.sourcing-file {
border: 1px solid var(--border-strong);
background: var(--surface);
}
.sourcing-file-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid var(--border);
}
.sourcing-file-label {
font-family: var(--font-label);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink);
display: inline-flex;
align-items: center;
gap: 10px;
}
.sourcing-file-ref {
font-family: var(--font-label);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
}
.sourcing-file .hero-trust-grid {
margin-top: 0;
padding: 24px 20px;
}
.sourcing-file-foot {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 20px;
border-top: 1px solid var(--border);
background: var(--bg);
gap: 16px;
}
.sourcing-file-stamp {
font-family: var(--font-label);
font-size: 8px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-muted);
border: 1px solid var(--border-strong);
border-radius: 2px;
padding: 3px 8px;
}
.sourcing-file-route {
font-family: var(--font-label);
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-faint);
}
/* "Live" status dots — gentle staggered pulse, like an active file marker */
.brand-dots--live span {
animation: dot-pulse 2.4s ease-in-out infinite;
}
.brand-dots--live span:nth-child(2) { animation-delay: 0.3s; }
.brand-dots--live span:nth-child(3) { animation-delay: 0.6s; }
@keyframes dot-pulse {
0%, 70%, 100% { opacity: 1; }
35% { opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) {
.brand-dots--live span { animation: none; }
}
/* ── IMAGE PLACEHOLDERS ──────────────────── */
/*
* Premium editorial placeholder frames.
* Replace each placeholder by adding:
* 
* or setting background-image on the .product-img element.
* Remove .img-frame and data-replace once image is placed.
*/
.product-img {
width: 100%;
aspect-ratio: 4/3;
background: var(--surface-dark);
border: 1px solid var(--border-strong);
position: relative;
overflow: hidden;
}
/* Inner editorial frame */
.img-frame {
position: absolute;
inset: 14px;
border: 1px solid var(--border);
pointer-events: none;
}
/* Corner ticks — visual placeholder treatment */
.img-frame::before,
.img-frame::after {
content: '';
position: absolute;
width: 10px;
height: 10px;
border-color: var(--border-strong);
border-style: solid;
}
.img-frame::before {
top: -1px; left: -1px;
border-width: 1px 0 0 1px;
}
.img-frame::after {
bottom: -1px; right: -1px;
border-width: 0 1px 1px 0;
}
/* Replacement label */
.product-img::after {
content: attr(data-replace);
font-family: var(--font-label);
font-size: 8px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-faint);
position: absolute;
bottom: 14px;
left: 14px;
right: 14px;
}
/* Actual photo when added — fills the container */
.product-img .product-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ── SECTIONS SHARED ─────────────────────── */
section { position: relative; }
.section-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 72px;
gap: 40px;
}
/* Below ~laptop, stack the header so the title and intro stop crowding */
@media (max-width: 1024px) {
.section-header { flex-direction: column; gap: 18px; margin-bottom: 56px; }
.section-header .section-body { max-width: 620px; margin-top: 0; }
}
.section-tag {
font-family: var(--font-body);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent);
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
}
/* ::before removed — brand-dots span is used inline instead */
.section-title {
font-family: var(--font-display);
font-size: clamp(36px, 3.4vw, 56px);
font-weight: 400;
font-style: normal;
line-height: 1.02;
color: var(--ink);
}
.section-title strong { font-weight: 700; }
.section-body {
font-family: var(--font-body);
font-size: 16px;
font-weight: 400;
color: var(--ink-muted);
line-height: 1.65;
max-width: 340px;
margin-top: 16px;
}
/* ── PRODUCTS ────────────────────────────── */
#products {
padding: 100px 64px;
border-bottom: 1px solid var(--border);
}
.products-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
max-width: 920px;
margin: 0 auto;
}
.product-card {
background: var(--bg);
padding: 48px 40px;
display: flex;
flex-direction: column;
gap: 24px;
transition: background 0.25s;
}
.product-card:hover { background: var(--surface); }
.product-num {
font-family: var(--font-label);
font-size: 10px;
font-weight: 400;
letter-spacing: 0.12em;
color: var(--ink-faint);
}
.product-name {
font-family: var(--font-display);
font-size: 30px;
font-weight: 600;
color: var(--ink);
line-height: 1.05;
}
.product-desc {
font-family: var(--font-body);
font-size: 15px;
font-weight: 400;
color: var(--ink-muted);
line-height: 1.65;
flex: 1;
}
.product-spec {
font-family: var(--font-label);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
border-top: 1px solid var(--border);
padding-top: 20px;
}
/* ── WHY MRVËY ───────────────────────────── */
#why {
padding: 100px 64px;
border-bottom: 1px solid var(--border);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 100px;
align-items: start;
}
.why-headline {
font-family: var(--font-display);
font-size: clamp(32px, 2.8vw, 50px);
font-weight: 400;
font-style: normal;
line-height: 1.12;
color: var(--ink);
margin-top: 20px;
margin-bottom: 28px;
}
.why-headline em { font-style: italic; font-weight: 700; }
.why-body {
font-family: var(--font-body);
font-size: 16px;
font-weight: 400;
color: var(--ink-muted);
line-height: 1.7;
margin-bottom: 40px;
}
.why-comparison {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
margin-top: 40px;
}
.compare-col {
background: var(--bg);
padding: 28px 24px;
}
.compare-col--them { background: var(--surface); }
.compare-col-label {
font-family: var(--font-body);
font-size: 9px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 16px;
}
.compare-col--them .compare-col-label { color: var(--ink-faint); }
.compare-col:not(.compare-col--them) .compare-col-label { color: var(--accent); }
.compare-items {
list-style: none;
display: flex;
flex-direction: column;
gap: 8px;
}
.compare-items li {
font-family: var(--font-body);
font-size: 14px;
color: var(--ink-muted);
line-height: 1.55;
}
.compare-col:not(.compare-col--them) .compare-items li { color: var(--ink); }
.why-bullets {
list-style: none;
display: flex;
flex-direction: column;
gap: 0;
border: 1px solid var(--border);
margin-top: 44px;
}
.why-bullet {
padding: 20px 28px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: flex-start;
gap: 16px;
transition: background 0.2s;
}
.why-bullet:last-child { border-bottom: none; }
.why-bullet:hover { background: var(--surface); }
.why-bullet-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--accent);
margin-top: 8px;
flex-shrink: 0;
}
.why-bullet-text {
font-family: var(--font-body);
font-size: 15px;
font-weight: 400;
color: var(--ink);
line-height: 1.55;
}
/* ── PROCESS ─────────────────────────────── */
#process {
padding: 100px 64px;
border-bottom: 1px solid var(--border);
}
.process-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
margin-top: 64px;
}
.process-step {
background: var(--bg);
padding: 44px 36px;
display: flex;
flex-direction: column;
gap: 20px;
transition: background 0.2s;
}
.process-step:hover { background: var(--surface); }
.step-num {
font-family: var(--font-label);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.14em;
color: var(--accent);
}
.step-title {
font-family: var(--font-display);
font-size: 26px;
font-weight: 600;
color: var(--ink);
line-height: 1.1;
}
.step-body {
font-family: var(--font-body);
font-size: 14px;
font-weight: 400;
color: var(--ink-muted);
line-height: 1.65;
flex: 1;
}
.step-arrow {
font-family: var(--font-label);
font-size: 16px;
color: var(--border-strong);
margin-top: auto;
}
/* ── PRICING ─────────────────────────────── */
#pricing {
padding: 100px 64px;
border-bottom: 1px solid var(--border);
}
.pricing-table {
margin-top: 44px;
border: 1px solid var(--border);
}
.pricing-row {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
padding: 28px 32px;
border-bottom: 1px solid var(--border);
gap: 24px;
transition: background 0.2s;
}
.pricing-row:last-child { border-bottom: none; }
.pricing-row:hover { background: var(--surface); }
.pricing-item-name {
font-family: var(--font-display);
font-size: 22px;
font-weight: 500;
color: var(--ink);
margin-bottom: 4px;
}
.pricing-item-sub {
font-family: var(--font-label);
font-size: 9px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--ink-faint);
}
.pricing-item-price {
font-family: var(--font-display);
font-size: 28px;
font-weight: 700;
color: var(--accent);
white-space: nowrap;
text-align: right;
}
.pricing-item-price span {
font-family: var(--font-label);
font-size: 9px;
font-weight: 400;
letter-spacing: 0.08em;
color: var(--ink-muted);
display: block;
margin-top: 2px;
}
.pricing-note {
margin-top: 24px;
padding: 20px 24px;
border: 1px solid var(--border);
background: var(--surface);
}
/* Flush variant — sits directly below tier cards with no gap */
.pricing-note--flush {
margin-top: 1px;
border-top: none;
border-left: 2px solid var(--accent);
}
.pricing-note p {
font-family: var(--font-body);
font-size: 13px;
font-weight: 400;
color: var(--ink-muted);
line-height: 1.65;
}
.tier-cards {
display: flex;
flex-direction: column;
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
margin-top: 44px;
}
.tier-card {
background: var(--bg);
padding: 28px 32px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
transition: background 0.2s;
}
.tier-card:hover { background: var(--surface); box-shadow: inset 3px 0 0 var(--accent); }
.tier-card--featured:hover { box-shadow: none; }
.tier-card--featured {
background: var(--accent-deep);
padding-top: 34px;
padding-bottom: 34px;
}
.tier-card--featured:hover { background: var(--accent-deep-hover); }
.tier-name {
font-family: var(--font-display);
font-size: 20px;
font-weight: 600;
color: var(--ink);
margin-bottom: 4px;
}
.tier-card--featured .tier-name { color: var(--on-accent); }
.tier-gsm {
font-family: var(--font-label);
font-size: 11px;
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink-muted);
line-height: 1.55;
}
.tier-card--featured .tier-gsm { color: rgba(245,242,236,0.82); }
.tier-price {
font-family: var(--font-display);
font-size: 26px;
font-weight: 700;
color: var(--accent);
white-space: nowrap;
text-align: right;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.tier-card--featured .tier-price { color: var(--gold); font-size: 30px; }
.tier-badge {
font-family: var(--font-label);
font-size: 8px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold);
border: 1px solid rgba(196,164,107,0.45);
border-radius: 999px;
padding: 3px 10px;
display: inline-block;
margin-top: 10px;
}
/* Dual-column pricing grid */
.pricing-dual {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
margin-top: 48px;
}
.pricing-dual-col {
background: var(--bg);
padding: 40px;
}
.pricing-dual-col .tier-cards {
margin-top: 20px;
border: none;
border-top: 1px solid var(--border);
background: var(--border); /* keeps 1px separators between cards */
}
.pricing-note--stacked { margin-top: 1px; }
/* ── CONCEPT WORK ────────────────────────── */
#concept {
padding: 100px 64px;
border-bottom: 1px solid var(--border);
}
.concept-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
margin-top: 64px;
}
.concept-card {
background: var(--bg);
display: flex;
flex-direction: column;
transition: background 0.2s;
}
.concept-card:hover { background: var(--surface); }
.concept-img {
width: 100%;
aspect-ratio: 3/4;
background: var(--surface-dark);
border: 1px solid var(--border-strong);
position: relative;
overflow: hidden;
}
/* Dark variant — reserved for future use */
.concept-img--dark {
background: var(--surface-dark);
}
.concept-img-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(26,23,16,0.22) 0%, transparent 55%);
z-index: 1;
}
/* Inner editorial frame for concept placeholders */
.concept-img::before {
content: '';
position: absolute;
inset: 12px;
border: 1px solid var(--border);
z-index: 2;
pointer-events: none;
}
/* Replacement label */
.concept-img::after {
content: attr(data-replace);
font-family: var(--font-label);
font-size: 8px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-faint);
position: absolute;
bottom: 14px;
left: 14px;
right: 14px;
z-index: 3;
}
/* When an actual image is present — hide placeholder frame and label */
.concept-img--has-photo::before,
.concept-img--has-photo::after { display: none; }
/* Actual photo inside concept-img */
.concept-img .concept-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
z-index: 0;
}
/* ── SAMPLES FEATURE CARD (full-width technique showcase) ── */
.samples-feature-card {
border: 1px solid var(--border);
background: var(--bg);
margin-bottom: 1px;
transition: background 0.2s;
}
.samples-feature-card:hover { background: var(--surface); }
/* Flat image wrapper — no fixed aspect ratio, no cropping */
.concept-img-flat {
border-bottom: 1px solid var(--border);
overflow: hidden;
background: var(--surface-dark);
line-height: 0; /* collapse whitespace gap */
}
/* The technique comparison image — shown whole, no cropping */
.techniques-image {
width: 100%;
height: auto;
display: block;
object-fit: contain;
}
/* Info bar below the full-width image */
.samples-feature-info {
padding: 24px 40px;
display: flex;
align-items: center;
gap: 24px 40px;
flex-wrap: wrap;
}
.samples-feature-info .concept-project {
font-family: var(--font-display);
font-size: 22px;
font-weight: 600;
color: var(--ink);
flex-shrink: 0;
}
.samples-feature-info .concept-desc {
font-family: var(--font-body);
font-size: 14px;
color: var(--ink-muted);
line-height: 1.6;
flex: 1;
min-width: 240px;
}
.samples-feature-info .concept-tag {
font-family: var(--font-label);
font-size: 8px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
flex-shrink: 0;
padding-top: 0;
margin-top: 0;
border-top: none;
}
/* 3-column grid variant (sits below feature card) */
.concept-grid--3col {
grid-template-columns: repeat(3, 1fr);
}
/* ── CUSTOMIZATION PAGE — technique text columns ── */
.cust-technique-cols {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
border-top: none;
margin-bottom: 64px;
}
.cust-technique-col {
background: var(--bg);
padding: 28px 32px;
}
.cust-technique-col-title {
font-family: var(--font-label);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 12px;
}
.cust-technique-col-body {
font-family: var(--font-body);
font-size: 15px;
font-weight: 400;
color: var(--ink-muted);
line-height: 1.65;
}
@media (max-width: 768px) {
.samples-feature-info { padding: 20px 24px; }
.concept-grid--3col { grid-template-columns: 1fr 1fr; }
.cust-technique-cols { grid-template-columns: 1fr; }
.cust-technique-col { padding: 22px 24px; }
}
@media (max-width: 480px) {
.concept-grid--3col { grid-template-columns: 1fr; }
.samples-feature-info { flex-direction: column; align-items: flex-start; gap: 12px; }
}
.concept-info {
padding: 24px 24px 28px;
border-top: 1px solid var(--border);
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.concept-project {
font-family: var(--font-display);
font-size: 20px;
font-weight: 600;
color: var(--ink);
line-height: 1.1;
}
.concept-desc {
font-family: var(--font-body);
font-size: 13px;
font-weight: 400;
color: var(--ink-muted);
line-height: 1.6;
margin-top: 4px;
flex: 1;
}
.concept-tag {
font-family: var(--font-label);
font-size: 8px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
margin-top: auto;
padding-top: 12px;
}
/* ── FAQ ─────────────────────────────────── */
#faq {
padding: 100px 64px;
border-bottom: 1px solid var(--border);
}
.faq-list {
margin-top: 56px;
border: 1px solid var(--border);
}
.faq-item {
border-bottom: 1px solid var(--border);
}
.faq-item:last-child { border-bottom: none; }
.faq-item summary {
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 26px 32px;
cursor: pointer;
font-family: var(--font-display);
font-size: 21px;
font-weight: 500;
color: var(--ink);
transition: background 0.2s;
}
.faq-item summary:hover { background: var(--surface); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: '+';
font-family: var(--font-label);
font-size: 18px;
font-weight: 400;
color: var(--accent);
flex-shrink: 0;
transition: transform 0.2s;
}
.faq-item[open] summary::after { content: '–'; }
.faq-a {
padding: 0 32px 28px;
font-family: var(--font-body);
font-size: 15px;
font-weight: 400;
color: var(--ink-muted);
line-height: 1.7;
max-width: 760px;
}
/* ── PRODUCTION RUN ──────────────────────── */
#scarcity {
padding: 100px 64px;
border-bottom: 1px solid var(--border);
background: var(--surface);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: stretch;
}
.scarcity-title {
font-family: var(--font-display);
font-size: clamp(30px, 2.8vw, 46px);
font-weight: 400;
font-style: normal;
color: var(--ink);
line-height: 1.08;
margin-top: 16px;
margin-bottom: 20px;
}
.scarcity-title strong { font-weight: 700; }
.scarcity-body {
font-family: var(--font-body);
font-size: 15px;
font-weight: 400;
color: var(--ink-muted);
max-width: 480px;
line-height: 1.65;
margin-bottom: 28px;
}
.run-status {
border: 1px solid var(--border);
background: var(--bg);
padding: 24px 28px;
display: flex;
flex-direction: column;
gap: 14px;
max-width: 480px;
}
.run-status-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.run-title {
font-family: var(--font-label);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink);
}
.run-pct {
font-family: var(--font-label);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.12em;
color: var(--accent);
}
.run-bar {
width: 100%;
height: 2px;
background: var(--border-strong);
position: relative;
}
.run-bar-fill {
position: absolute;
top: 0; left: 0;
height: 100%;
width: 64%;
background: var(--accent);
transform-origin: left center;
transform: scaleX(0);
transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.run-bar.in-view .run-bar-fill { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
.run-bar-fill { transition: none; transform: scaleX(1); }
}
.run-note {
font-family: var(--font-body);
font-size: 13px;
font-weight: 400;
color: var(--ink-faint);
line-height: 1.55;
}
/* Compact run facts under the fill bar */
.run-meta {
display: flex;
flex-wrap: wrap;
gap: 7px 18px;
padding-top: 2px;
}
.run-meta-item {
font-family: var(--font-label);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--ink-faint);
}
.run-meta-item strong {
font-weight: 700;
color: var(--ink);
}
.run-cta-wrap { margin-top: 28px; }
/* ── Delivery planner · deadline engine ── */
.run-plan {
border: 1px solid var(--border-strong);
background: var(--bg);
padding: 28px 32px;
display: flex;
flex-direction: column;
gap: 18px;
}
.run-plan-label {
font-family: var(--font-label);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent);
}
.run-plan-field {
display: flex;
flex-direction: column;
gap: 10px;
}
.run-plan-q {
font-family: var(--font-display);
font-size: 22px;
font-weight: 500;
color: var(--ink);
line-height: 1.25;
}
.run-plan-select {
font-family: var(--font-body);
font-size: 15px;
color: var(--ink);
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: 0;
padding: 12px 14px;
width: 100%;
cursor: pointer;
transition: border-color 0.2s;
}
.run-plan-select:hover { border-color: var(--ink-faint); }
.run-plan-out {
display: flex;
flex-direction: column;
gap: 5px;
padding: 22px 24px;
border: 1px solid var(--border);
background: var(--surface);
margin-top: auto;
}
.run-plan-out-lead {
font-family: var(--font-label);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-muted);
}
.run-plan-out-date {
font-family: var(--font-display);
font-size: 30px;
font-weight: 700;
color: var(--accent);
line-height: 1.1;
}
.run-plan-out-sub {
font-family: var(--font-body);
font-size: 13px;
color: var(--ink-faint);
line-height: 1.5;
}
.run-plan-foot {
font-family: var(--font-label);
font-size: 9px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--ink-faint);
}
/* ── CONTACT ─────────────────────────────── */
#contact {
padding: 100px 64px;
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 100px;
align-items: start;
margin-top: 64px;
}
.contact-intro {
font-family: var(--font-body);
font-size: 16px;
font-weight: 400;
color: var(--ink-muted);
line-height: 1.65;
margin-top: 16px;
margin-bottom: 36px;
}
.contact-meta {
display: flex;
flex-direction: column;
border: 1px solid var(--border);
}
.contact-meta-row {
padding: 16px 24px;
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
}
.contact-meta-row:last-child { border-bottom: none; }
.contact-meta-key {
font-family: var(--font-label);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-faint);
flex-shrink: 0;
}
.contact-meta-val {
font-family: var(--font-body);
font-size: 14px;
font-weight: 400;
color: var(--ink);
text-align: right;
}
.contact-meta-val a {
color: var(--ink);
text-decoration: none;
border-bottom: 1px solid var(--border-strong);
}
.contact-meta-val a:hover { color: var(--accent); border-color: var(--accent); }
/* FORM */
.contact-form {
display: flex;
flex-direction: column;
border: 1px solid var(--border);
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--border);
}
.form-row-single {
background: transparent;
display: block;
}
.form-field {
background: var(--bg);
padding: 18px 24px;
border-bottom: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 6px;
}
.form-label {
font-family: var(--font-label);
font-size: 8px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-faint);
}
.form-field input,
.form-field select,
.form-field textarea {
font-family: var(--font-body);
font-size: 14px;
font-weight: 400;
color: var(--ink);
background: transparent;
border: none;
outline: none;
width: 100%;
padding: 0;
-webkit-appearance: none;
appearance: none;
resize: none;
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--ink-faint); }
.form-field select { cursor: pointer; color: var(--ink); }
.form-field select option[value=""] { color: var(--ink-faint); }
.form-field--textarea { min-height: 128px; }
.form-submit {
padding: 24px 32px;
border-top: 1px solid var(--border);
background: var(--surface);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.form-submit-note {
font-family: var(--font-label);
font-size: 9px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--ink-faint);
}
.btn-submit {
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--bg);
background: var(--ink);
padding: 13px 26px;
border: 1px solid var(--ink);
cursor: pointer;
transition: background 0.25s, border-color 0.25s;
}
.btn-submit:hover { background: var(--accent); border-color: var(--accent); }
.btn-submit:disabled { opacity: 0.7; cursor: default; }
/* ── FOOTER ──────────────────────────────── */
footer {
padding: 56px 64px;
border-top: 1px solid var(--border);
background: var(--surface);
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}
.footer-top {
display: flex;
align-items: center;
min-width: 0;
}
.footer-wordmark {
display: none;
}
.footer-brand {
font-family: var(--font-label);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.18em;
color: var(--ink);
display: inline-flex;
align-items: center;
gap: 9px;
}
.footer-tagline {
font-family: var(--font-label);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--nav-link);
}
.footer-nav {
display: flex;
flex-wrap: wrap;
gap: 18px 34px;
justify-content: flex-start;
align-items: center;
}
.footer-nav a {
font-family: var(--font-label);
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-faint);
text-decoration: none;
white-space: nowrap;
transition: color 0.2s;
}
.footer-nav a:hover,
.footer-nav a[aria-current="page"] { color: var(--ink); }
.footer-copy {
font-family: var(--font-label);
font-size: 9px;
letter-spacing: 0.10em;
color: var(--ink-faint);
}
.footer-bottom {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 14px;
flex-shrink: 0;
}
.footer-legal {
display: flex;
align-items: center;
gap: 0;
}
.footer-legal a {
font-family: var(--font-label);
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-faint);
text-decoration: none;
transition: color 0.2s;
}
.footer-legal a:hover,
.footer-legal a[aria-current="page"] { color: var(--ink); }
.footer-stamp {
font-family: var(--font-label);
font-size: 8px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-muted);
border: 1px solid var(--border-strong);
border-radius: 2px;
padding: 3px 9px;
}
/* ── RESPONSIVE: tablet (≤1100px) ─────────── */
@media (max-width: 1100px) {
body > nav { padding: 20px 32px; }
#hero { padding: 140px 32px 80px; gap: 48px; }
#products { padding: 72px 32px; }
.products-grid { grid-template-columns: 1fr 1fr; }
#why { padding: 72px 32px; gap: 48px; }
#process { padding: 72px 32px; }
.process-steps { grid-template-columns: 1fr 1fr; }
#pricing { padding: 72px 32px; }
.pricing-dual { margin-top: 36px; }
#faq { padding: 72px 32px; }
#concept { padding: 72px 32px; }
.concept-grid { grid-template-columns: 1fr 1fr; }
#scarcity { padding: 60px 32px; gap: 48px; }
#contact { padding: 72px 32px; }
.contact-grid { gap: 64px; }
footer { padding: 28px 32px; }
}
/* ── RESPONSIVE: mobile (≤768px) ──────────── */
@media (max-width: 768px) {
body > nav { padding: 18px 24px; }
.nav-links { display: none; }
.nav-mobile-toggle { display: flex; }
/* Hero: single column. Trust sidebar moves to mobile strip. */
#hero {
grid-template-columns: 1fr;
padding: 120px 24px 60px;
gap: 0;
}
/* Hide the full sidebar trust box on mobile */
.hero-right { display: none; }
/* Show the compact mobile strip instead */
.hero-mobile-trust {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 20px;
margin-top: 40px;
padding-top: 28px;
border-top: 1px solid var(--border);
}
.mobile-trust-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.mobile-trust-key {
font-family: var(--font-label);
font-size: 8px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-faint);
}
.mobile-trust-val {
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
color: var(--ink);
line-height: 1.3;
}
.hero-sub { max-width: none; }
#products { padding: 60px 24px; }
.products-grid { grid-template-columns: 1fr; }
.section-header { flex-direction: column; }
.section-body { max-width: none; }
#why { grid-template-columns: 1fr; padding: 60px 24px; gap: 40px; }
#process { padding: 60px 24px; }
.process-steps { grid-template-columns: 1fr; }
#pricing { padding: 60px 24px; }
.pricing-dual { grid-template-columns: 1fr; margin-top: 28px; }
.pricing-dual-col { padding: 28px 24px; }
#faq { padding: 60px 24px; }
.faq-item summary { padding: 22px 24px; font-size: 18px; }
.faq-a { padding: 0 24px 24px; }
#concept { padding: 60px 24px; }
.concept-grid { grid-template-columns: 1fr 1fr; }
.concept-desc { display: none; } /* Keep project name + tag; drop long desc on small screens */
#scarcity { grid-template-columns: 1fr; padding: 60px 24px; gap: 36px; }
.run-plan { padding: 24px; }
.run-plan-out-date { font-size: 26px; }
.contact-grid { grid-template-columns: 1fr; gap: 48px; }
#contact { padding: 60px 24px; }
.form-row { grid-template-columns: 1fr; }
footer { padding: 32px 24px; gap: 22px; flex-direction: column; align-items: flex-start; }
.footer-top { flex-direction: column; align-items: flex-start; gap: 18px; }
.footer-nav { justify-content: flex-start; gap: 12px 20px; }
.footer-tagline { white-space: normal; }
.footer-bottom { align-items: flex-start; gap: 14px; }
}
@media (max-width: 480px) {
.concept-grid { grid-template-columns: 1fr; }
.hero-ctas { flex-direction: column; align-items: flex-start; gap: 16px; }
.why-comparison { grid-template-columns: 1fr; }
.cust-cards-grid { grid-template-columns: 1fr; }
.cust-table { font-size: 12px; }
.cust-table th, .cust-table td { padding: 12px 14px; }
}
/* ═══════════════════════════════════════════
CUSTOMIZATION PAGE — cust-* namespace
═══════════════════════════════════════════ */
.cust-hero {
min-height: 60vh;
padding: 160px 64px 80px;
border-bottom: 1px solid var(--border);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: end;
}
.cust-hero-headline {
font-family: var(--font-display);
font-size: clamp(42px, 4.5vw, 72px);
font-weight: 700;
font-style: normal;
line-height: 0.98;
color: var(--ink);
letter-spacing: -0.01em;
margin-bottom: 28px;
}
.cust-hero-sub {
font-family: var(--font-body);
font-size: 17px;
font-weight: 400;
color: var(--ink-muted);
line-height: 1.65;
max-width: 420px;
margin-bottom: 40px;
}
.cust-hero-right {
display: flex;
flex-direction: column;
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
align-self: end;
}
.cust-hero-stat {
background: var(--bg);
padding: 22px 28px;
display: flex;
flex-direction: column;
gap: 4px;
}
.cust-hero-stat-val {
font-family: var(--font-display);
font-size: 26px;
font-weight: 600;
color: var(--ink);
line-height: 1;
}
/* Shared section layout */
.cust-section {
padding: 80px 64px;
border-bottom: 1px solid var(--border);
}
.cust-section-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 52px;
gap: 40px;
}
/* 4-column card grid */
.cust-cards-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
}
.cust-card {
background: var(--bg);
padding: 36px 32px;
display: flex;
flex-direction: column;
gap: 14px;
transition: background 0.2s;
}
.cust-card:hover { background: var(--surface); }
.cust-card-title {
font-family: var(--font-display);
font-size: 24px;
font-weight: 600;
color: var(--ink);
line-height: 1.08;
}
.cust-card-desc {
font-family: var(--font-body);
font-size: 14px;
font-weight: 400;
color: var(--ink-muted);
line-height: 1.65;
flex: 1;
}
.cust-card-tag {
font-family: var(--font-label);
font-size: 8px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
border-top: 1px solid var(--border);
padding-top: 14px;
margin-top: auto;
}
/* Technique comparison table */
.cust-table-wrap {
overflow-x: auto;
border: 1px solid var(--border);
margin-top: 52px;
}
.cust-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.cust-table th {
font-family: var(--font-label);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-faint);
text-align: left;
padding: 16px 24px;
border-bottom: 1px solid var(--border);
background: var(--surface);
white-space: nowrap;
}
.cust-table td {
font-family: var(--font-body);
font-size: 15px;
font-weight: 400;
color: var(--ink);
padding: 20px 24px;
border-bottom: 1px solid var(--border);
vertical-align: top;
line-height: 1.5;
}
.cust-table tr:last-child td { border-bottom: none; }
.cust-table tr:hover td { background: var(--surface); }
.cust-table td:first-child {
font-family: var(--font-display);
font-size: 18px;
font-weight: 600;
color: var(--ink);
white-space: nowrap;
}
.cust-table .td-accent {
font-family: var(--font-label);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--accent);
}
.cust-technique-caption {
margin-top: 16px;
font-family: var(--font-label);
font-size: 9px;
font-weight: 400;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--ink-faint);
line-height: 1.6;
}
/* Customization page responsive */
@media (max-width: 1100px) {
.cust-hero { padding: 140px 32px 72px; gap: 48px; }
.cust-section { padding: 64px 32px; }
.cust-cards-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
.cust-hero { grid-template-columns: 1fr; padding: 120px 24px 60px; gap: 40px; }
.cust-hero-right { display: none; }
.cust-section { padding: 56px 24px; }
.cust-section-header { flex-direction: column; }
.cust-cards-grid { grid-template-columns: 1fr 1fr; }
.cust-table th, .cust-table td { padding: 14px 16px; }
}
/* ============================================================
ABOUT PAGE
============================================================ */
/* Hero */
.about-hero {
padding: 160px 64px 80px;
border-bottom: 1px solid var(--border);
max-width: 900px;
}
.about-hero-headline {
font-family: var(--font-display);
font-size: clamp(36px, 5vw, 58px);
font-weight: 600;
color: var(--ink);
line-height: 1.12;
letter-spacing: -0.01em;
margin: 28px 0 24px;
}
.about-hero-sub {
font-family: var(--font-body);
font-size: 17px;
font-weight: 400;
color: var(--ink-muted);
line-height: 1.65;
max-width: 640px;
margin-bottom: 28px;
}
.about-meta-strip {
font-family: var(--font-label);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-faint);
margin-bottom: 36px;
}
/* Credibility strip */
.about-cred-strip {
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: 36px 64px;
display: grid;
grid-template-columns: 200px 1fr;
gap: 40px;
align-items: start;
}
.about-cred-label {
font-family: var(--font-label);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
display: flex;
align-items: center;
gap: 10px;
padding-top: 3px;
}
.about-cred-text {
font-family: var(--font-body);
font-size: 15px;
font-weight: 400;
color: var(--ink-muted);
line-height: 1.65;
max-width: 600px;
}
/* About sections reuse .cust-section and .cust-section-header */
/* Origin / founder body text */
.about-body-text {
font-family: var(--font-body);
font-size: 16px;
font-weight: 400;
color: var(--ink-muted);
line-height: 1.7;
}
.about-body-text + .about-body-text {
margin-top: 18px;
}
/* Founder split layout */
.about-founder-split {
display: grid;
grid-template-columns: 1fr 340px;
gap: 64px;
align-items: start;
margin-top: 40px;
}
.about-founder-card {
border: 1px solid var(--border-strong);
background: var(--surface);
padding: 32px;
}
.about-founder-name {
font-family: var(--font-display);
font-size: 26px;
font-weight: 600;
color: var(--ink);
margin-bottom: 4px;
}
.about-founder-title {
font-family: var(--font-label);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 24px;
}
.about-founder-details {
display: flex;
flex-direction: column;
gap: 10px;
border-top: 1px solid var(--border);
padding-top: 20px;
}
.about-founder-details span {
font-family: var(--font-body);
font-size: 13px;
font-weight: 400;
color: var(--ink-muted);
line-height: 1.5;
}
.about-founder-note {
font-family: var(--font-label);
font-size: 10px;
font-weight: 400;
letter-spacing: 0.06em;
color: var(--ink-faint);
line-height: 1.6;
margin-top: 28px;
padding-top: 20px;
border-top: 1px solid var(--border);
}
/* What matters grid */
.what-matters-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
margin-top: 48px;
}
.what-matters-card {
background: var(--bg);
padding: 32px 28px;
}
.what-matters-card-title {
font-family: var(--font-label);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 16px;
}
.what-matters-card-body {
font-family: var(--font-body);
font-size: 15px;
font-weight: 400;
color: var(--ink-muted);
line-height: 1.65;
}
/* Sourcing process list */
.about-sourcing-intro {
font-family: var(--font-body);
font-size: 16px;
font-weight: 400;
color: var(--ink-muted);
line-height: 1.7;
max-width: 640px;
margin-bottom: 48px;
}
.about-process-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
}
.about-process-item {
background: var(--bg);
padding: 32px 28px;
}
.about-process-num {
display: block;
font-family: var(--font-label);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 16px;
}
.about-process-body {
font-family: var(--font-body);
font-size: 15px;
font-weight: 400;
color: var(--ink-muted);
line-height: 1.65;
}
/* Operational metadata grid */
.about-meta-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
margin-top: 48px;
}
.about-meta-item {
background: var(--bg);
padding: 28px 32px;
display: flex;
flex-direction: column;
gap: 8px;
}
.about-meta-key {
font-family: var(--font-label);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-faint);
}
.about-meta-val {
font-family: var(--font-body);
font-size: 15px;
font-weight: 400;
color: var(--ink);
line-height: 1.5;
}
/* What MRVËY is not */
.about-not-list {
list-style: none;
padding: 0;
margin: 0 0 32px;
border: 1px solid var(--border);
}
.about-not-list li {
font-family: var(--font-body);
font-size: 15px;
font-weight: 400;
color: var(--ink-muted);
padding: 16px 28px;
border-bottom: 1px solid var(--border);
line-height: 1.5;
}
.about-not-list li:last-child {
border-bottom: none;
}
.about-not-statement {
font-family: var(--font-display);
font-size: 22px;
font-weight: 600;
color: var(--ink);
line-height: 1.35;
max-width: 600px;
font-style: italic;
}
.about-not-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: start;
margin-top: 8px;
}
.about-cta-trust {
border: 1px solid var(--border);
padding: 32px;
}
.about-cta-trust > .label {
display: block;
margin-bottom: 20px;
}
/* Closing CTA */
.about-cta-section {
padding: 100px 64px;
border-top: 1px solid var(--border);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.about-cta-headline {
font-family: var(--font-display);
font-size: clamp(28px, 3.5vw, 42px);
font-weight: 600;
color: var(--ink);
line-height: 1.2;
margin-bottom: 16px;
}
.about-cta-body {
font-family: var(--font-body);
font-size: 16px;
font-weight: 400;
color: var(--ink-muted);
line-height: 1.65;
margin-bottom: 32px;
}
/* About page responsive */
@media (max-width: 1100px) {
.about-hero { padding: 140px 32px 72px; }
.about-cred-strip { padding: 32px; grid-template-columns: 160px 1fr; gap: 28px; }
.about-founder-split { grid-template-columns: 1fr; gap: 40px; }
.about-founder-card { max-width: 400px; }
.what-matters-grid { grid-template-columns: repeat(2, 1fr); }
.about-process-list { grid-template-columns: repeat(2, 1fr); }
.about-meta-grid { grid-template-columns: repeat(2, 1fr); }
.about-cta-section { padding: 72px 32px; gap: 48px; }
}
@media (max-width: 768px) {
.about-hero { padding: 120px 24px 60px; }
.about-cred-strip { padding: 28px 24px; grid-template-columns: 1fr; gap: 16px; }
.about-founder-split { gap: 32px; }
.about-founder-card { max-width: 100%; }
.what-matters-grid { grid-template-columns: 1fr; }
.about-process-list { grid-template-columns: 1fr; }
.about-meta-grid { grid-template-columns: 1fr 1fr; }
.about-not-layout { grid-template-columns: 1fr; gap: 32px; }
.about-not-statement { font-size: 18px; }
.about-cta-section { grid-template-columns: 1fr; padding: 64px 24px; gap: 32px; }
}
@media (max-width: 480px) {
.about-meta-grid { grid-template-columns: 1fr; }
}
/* ─────────────────────────────────────────────
DARK MODE · element refinements
Light mode is untouched; these rules only apply
under [data-theme="dark"].
───────────────────────────────────────────── */
/* Soft fade when toggling themes (no flash on load — theme is
applied before paint by the inline script). */
body { transition: background-color 0.3s ease, color 0.3s ease; }
/* Technique comparison image keeps its own light artwork; in dark mode
we mount it in a matte frame so it reads as an intentional specimen
plate rather than a glaring panel. Readability is unchanged. */
:root[data-theme="dark"] .cust-technique-img-block {
padding: 16px;
background: var(--surface);
border: 1px solid var(--border-strong);
}
:root[data-theme="dark"] .concept-img-flat {
background: var(--surface);
}
/* ─────────────────────────────────────────────
BUILD YOUR PRODUCTION BRIEF
Interactive spec builder. Reads like a sourcing
document, not a playful configurator.
───────────────────────────────────────────── */
#brief {
padding: 100px 64px;
border-bottom: 1px solid var(--border);
}
.brief-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
margin-top: 48px;
align-items: start;
}
/* ── Controls ── */
.brief-controls {
display: flex;
flex-direction: column;
gap: 30px;
}
.brief-group {
border: none;
padding: 0;
margin: 0;
}
.brief-legend {
display: block;
width: 100%;
font-family: var(--font-body);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--ink-faint);
padding: 0 0 14px;
border-bottom: 1px solid var(--border);
margin-bottom: 14px;
}
.brief-options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.brief-options--3 { grid-template-columns: repeat(3, 1fr); }
.brief-option {
position: relative;
display: block;
}
.brief-option input {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
pointer-events: none;
}
.brief-option-face {
display: block;
text-align: center;
font-family: var(--font-label);
font-size: 12px;
letter-spacing: 0.03em;
color: var(--ink-muted);
padding: 13px 8px;
border: 1px solid var(--border-strong);
background: var(--bg);
cursor: pointer;
transition: color 0.18s, border-color 0.18s, background 0.18s;
-webkit-user-select: none;
user-select: none;
}
.brief-option-face:hover {
color: var(--ink);
border-color: var(--ink-faint);
}
.brief-option input:checked + .brief-option-face {
background: var(--accent);
border-color: var(--accent);
color: var(--on-accent);
}
.brief-option input:focus-visible + .brief-option-face {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* ── Production brief document ── */
.brief-doc {
border: 1px solid var(--border-strong);
background: var(--surface);
}
.brief-doc-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 20px;
border-bottom: 1px solid var(--border);
}
.brief-doc-label {
font-family: var(--font-label);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink);
display: inline-flex;
align-items: center;
gap: 10px;
}
.brief-doc-ref {
font-family: var(--font-label);
font-size: 10px;
letter-spacing: 0.10em;
color: var(--accent);
white-space: nowrap;
}
.brief-doc-rows { padding: 4px 20px; }
.brief-doc-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 20px;
padding: 13px 0;
border-bottom: 1px solid var(--border);
}
.brief-doc-row:last-child { border-bottom: none; }
.brief-doc-key {
font-family: var(--font-label);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-faint);
flex-shrink: 0;
}
.brief-doc-val {
font-family: var(--font-body);
font-size: 15px;
color: var(--ink);
text-align: right;
line-height: 1.4;
}
.brief-doc-price {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
padding: 18px 20px;
border-top: 1px solid var(--border-strong);
border-bottom: 1px solid var(--border-strong);
background: var(--bg);
}
.brief-doc-price-key {
font-family: var(--font-label);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-muted);
}
.brief-doc-price-val {
font-family: var(--font-display);
font-size: 30px;
font-weight: 700;
color: var(--accent);
display: inline-flex;
align-items: baseline;
gap: 8px;
line-height: 1;
}
.brief-doc-price-unit {
font-family: var(--font-label);
font-size: 10px;
font-weight: 400;
letter-spacing: 0.04em;
text-transform: none;
color: var(--ink-faint);
}
.brief-doc-rec {
padding: 18px 20px;
font-family: var(--font-body);
font-size: 14px;
line-height: 1.6;
color: var(--ink-muted);
border-bottom: 1px solid var(--border);
}
.brief-doc-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px 20px;
padding: 20px;
flex-wrap: wrap;
}
.brief-doc-stamp {
font-family: var(--font-label);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-faint);
}
@media (max-width: 1100px) {
#brief { padding: 72px 32px; }
.brief-layout { gap: 40px; }
}
@media (max-width: 768px) {
#brief { padding: 60px 24px; }
.brief-layout { grid-template-columns: 1fr; gap: 36px; margin-top: 36px; }
.brief-option-face { font-size: 11px; padding: 12px 5px; letter-spacing: 0.02em; }
.brief-doc-val { font-size: 14px; }
.brief-doc-price-val { font-size: 26px; }
.brief-doc-foot .brief-doc-cta { width: 100%; text-align: center; }
}
/* ─────────────────────────────────────────────
WHAT YOU GET BACK · returned-file specimen
The reply a buyer receives, shown before they
commit. Reads as an official sourcing document.
───────────────────────────────────────────── */
#response {
padding: 100px 64px;
border-bottom: 1px solid var(--border);
}
.response-doc {
max-width: 760px;
margin: 48px auto 0;
border: 1px solid var(--border-strong);
background: var(--surface);
}
.response-doc-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 24px;
border-bottom: 1px solid var(--border-strong);
background: var(--bg);
}
.response-doc-mark {
font-family: var(--font-label);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink);
display: inline-flex;
align-items: center;
gap: 10px;
}
.response-doc-ref {
font-family: var(--font-label);
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
white-space: nowrap;
}
.response-doc-grid {
display: grid;
grid-template-columns: 1.3fr 1fr;
}
.response-doc-rowset {
padding: 8px 24px;
border-right: 1px solid var(--border);
}
.response-doc-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
padding: 13px 0;
border-bottom: 1px solid var(--border);
}
.response-doc-row:last-child { border-bottom: none; }
.response-doc-key {
font-family: var(--font-label);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-faint);
flex-shrink: 0;
}
.response-doc-val {
font-family: var(--font-body);
font-size: 14px;
color: var(--ink);
text-align: right;
line-height: 1.4;
}
.response-doc-pricing {
padding: 20px 24px;
display: flex;
flex-direction: column;
gap: 10px;
background: var(--surface-dark);
}
.response-doc-pricing-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
}
.response-doc-price-key {
font-family: var(--font-label);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--ink-muted);
line-height: 1.4;
}
.response-doc-price-val {
font-family: var(--font-display);
font-size: 30px;
font-weight: 700;
color: var(--accent);
line-height: 1;
}
.response-doc-price-sub {
font-family: var(--font-display);
font-size: 20px;
font-weight: 600;
color: var(--ink);
line-height: 1;
}
.response-doc-pricing-note {
font-family: var(--font-body);
font-size: 12px;
color: var(--ink-faint);
line-height: 1.5;
margin-top: 2px;
}
.response-doc-timeline {
padding: 22px 24px;
border-top: 1px solid var(--border);
}
.response-doc-section-label {
font-family: var(--font-label);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-faint);
display: block;
margin-bottom: 16px;
}
.response-doc-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
}
.response-doc-step {
background: var(--surface);
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 5px;
}
.response-doc-step-wk {
font-family: var(--font-label);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--accent);
}
.response-doc-step-name {
font-family: var(--font-body);
font-size: 13px;
color: var(--ink);
line-height: 1.3;
}
.response-doc-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px 24px;
padding: 20px 24px;
border-top: 1px solid var(--border-strong);
background: var(--bg);
flex-wrap: wrap;
}
.response-doc-stamp {
font-family: var(--font-label);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-faint);
}
@media (max-width: 1100px) {
#response { padding: 72px 32px; }
}
@media (max-width: 768px) {
#response { padding: 60px 24px; }
.response-doc-grid { grid-template-columns: 1fr; }
.response-doc-rowset { border-right: none; border-bottom: 1px solid var(--border); }
.response-doc-steps { grid-template-columns: 1fr 1fr; }
.response-doc-cta { width: 100%; text-align: center; }
}
/* ─────────────────────────────────────────────
HOW WE WORK WITH YOU · season roster
Founder accountability, a finite partner list,
and a house spec that carries across cohorts.
───────────────────────────────────────────── */
#roster {
padding: 100px 64px;
border-bottom: 1px solid var(--border);
background: var(--surface);
}
.roster-layout {
display: grid;
grid-template-columns: 1fr 380px;
gap: 56px;
margin-top: 48px;
align-items: start;
}
.roster-points {
display: flex;
flex-direction: column;
border-top: 1px solid var(--border);
}
.roster-point {
padding: 28px 0;
border-bottom: 1px solid var(--border);
}
.roster-point-key {
font-family: var(--font-label);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
display: block;
margin-bottom: 12px;
}
.roster-point-body {
font-family: var(--font-body);
font-size: 16px;
color: var(--ink-muted);
line-height: 1.65;
max-width: 540px;
}
.roster-card {
border: 1px solid var(--border-strong);
background: var(--bg);
align-self: start;
}
.roster-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 22px;
border-bottom: 1px solid var(--border);
}
.roster-card-mark {
font-family: var(--font-label);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink);
display: inline-flex;
align-items: center;
gap: 10px;
}
.roster-card-status {
font-family: var(--font-label);
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
white-space: nowrap;
}
.roster-card-rows { padding: 6px 22px; }
.roster-card-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
padding: 13px 0;
border-bottom: 1px solid var(--border);
}
.roster-card-row:last-child { border-bottom: none; }
.roster-card-key {
font-family: var(--font-label);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-faint);
flex-shrink: 0;
}
.roster-card-val {
font-family: var(--font-body);
font-size: 14px;
color: var(--ink);
text-align: right;
line-height: 1.4;
}
.roster-card-cta {
display: block;
margin: 8px 22px 22px;
text-align: center;
}
@media (max-width: 1100px) {
#roster { padding: 72px 32px; }
.roster-layout { grid-template-columns: 1fr 320px; gap: 40px; }
}
@media (max-width: 768px) {
#roster { padding: 60px 24px; }
.roster-layout { grid-template-columns: 1fr; gap: 32px; }
}
/* ─────────────────────────────────────────────
ACCESSIBILITY · skip link
Hidden until focused; first stop for keyboard users.
───────────────────────────────────────────── */
.skip-link {
position: absolute;
left: 8px;
top: -56px;
z-index: 200;
background: var(--accent);
color: var(--on-accent);
padding: 10px 16px;
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
text-decoration: none;
transition: top 0.2s ease;
}
.skip-link:focus {
top: 8px;
outline: 2px solid var(--ink);
outline-offset: 2px;
}
/* ─────────────────────────────────────────────
404 · file not found
───────────────────────────────────────────── */
.error-section {
min-height: 72vh;
padding: 180px 64px 100px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 22px;
max-width: 760px;
}
.error-title {
font-family: var(--font-display);
font-size: clamp(40px, 6vw, 82px);
font-weight: 400;
line-height: 0.98;
color: var(--ink);
}
.error-title strong { font-weight: 700; }
.error-body {
font-family: var(--font-body);
font-size: 17px;
color: var(--ink-muted);
max-width: 460px;
line-height: 1.6;
}
.error-actions {
display: flex;
align-items: center;
gap: 24px;
margin-top: 8px;
flex-wrap: wrap;
}
@media (max-width: 768px) {
.error-section { padding: 140px 24px 80px; min-height: 66vh; }
}
/* ─────────────────────────────────────────────
LEGAL PAGES · mentions légales + privacy
Reads as a controlled document. The same
sourcing-file aesthetic applied to legal text.
───────────────────────────────────────────── */
.legal-hero {
padding: 160px 64px 72px;
border-bottom: 1px solid var(--border);
max-width: 760px;
}
.legal-title {
font-family: var(--font-display);
font-size: clamp(40px, 5vw, 72px);
font-weight: 400;
line-height: 0.98;
color: var(--ink);
margin: 20px 0 24px;
}
.legal-title strong { font-weight: 700; }
.legal-subtitle {
font-family: var(--font-body);
font-size: 16px;
color: var(--ink-muted);
line-height: 1.65;
max-width: 580px;
}
.legal-body {
padding: 64px 64px 100px;
}
.legal-doc {
max-width: 760px;
display: flex;
flex-direction: column;
gap: 0;
}
.legal-block {
padding: 36px 0;
border-bottom: 1px solid var(--border);
}
.legal-block:last-of-type { border-bottom: none; }
.legal-block-title {
font-family: var(--font-display);
font-size: 22px;
font-weight: 600;
color: var(--ink);
line-height: 1.2;
margin-bottom: 20px;
}
.legal-rows {
display: flex;
flex-direction: column;
}
.legal-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 24px;
padding: 12px 0;
border-bottom: 1px solid var(--border);
}
.legal-row:last-child { border-bottom: none; }
.legal-key {
font-family: var(--font-label);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-faint);
flex-shrink: 0;
min-width: 160px;
}
.legal-val {
font-family: var(--font-body);
font-size: 14px;
color: var(--ink);
text-align: right;
line-height: 1.5;
}
.legal-val a { color: var(--accent); text-decoration: none; }
.legal-val a:hover { text-decoration: underline; }
/* Placeholder values — clearly marked for the founder to fill in */
.legal-placeholder {
color: var(--gold);
font-style: italic;
}
.legal-p {
font-family: var(--font-body);
font-size: 15px;
color: var(--ink-muted);
line-height: 1.7;
max-width: 640px;
margin-bottom: 14px;
}
.legal-p:last-child { margin-bottom: 0; }
.legal-p a { color: var(--accent); text-decoration: none; }
.legal-p a:hover { text-decoration: underline; }
.legal-p strong { color: var(--ink); font-weight: 600; }
.legal-list {
list-style: none;
padding: 0;
margin: 0;
border: 1px solid var(--border);
}
.legal-list li {
font-family: var(--font-body);
font-size: 14px;
color: var(--ink-muted);
line-height: 1.55;
padding: 12px 20px;
border-bottom: 1px solid var(--border);
}
.legal-list li:last-child { border-bottom: none; }
.legal-list li strong { color: var(--ink); font-weight: 600; }
.legal-stamp {
font-family: var(--font-label);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-faint);
padding-top: 32px;
}
@media (max-width: 1100px) {
.legal-hero { padding: 140px 32px 56px; }
.legal-body { padding: 48px 32px 80px; }
}
@media (max-width: 768px) {
.legal-hero { padding: 120px 24px 48px; }
.legal-body { padding: 36px 24px 64px; }
.legal-key { min-width: 120px; }
.legal-row { flex-direction: column; align-items: flex-start; gap: 4px; }
.legal-val { text-align: left; }
}
/* ─────────────────────────────────────────────
BUILT TO PASS THE BUREAU TABLE
Internal approval dossier: four hairline-ruled
entries that help a buyer justify the order.
───────────────────────────────────────────── */
#bureau {
padding: 100px 64px;
border-bottom: 1px solid var(--border);
background: var(--surface);
}
.bureau-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
margin-top: 48px;
}
.bureau-card {
background: var(--bg);
padding: 38px 36px;
display: flex;
flex-direction: column;
gap: 12px;
transition: background 0.25s;
}
.bureau-card:hover { background: var(--surface); }
.bureau-card-num {
font-family: var(--font-label);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.16em;
color: var(--accent);
font-variant-numeric: lining-nums tabular-nums;
}
.bureau-card-title {
font-family: var(--font-display);
font-size: 25px;
font-weight: 600;
color: var(--ink);
line-height: 1.15;
}
.bureau-card-body {
font-family: var(--font-body);
font-size: 15px;
color: var(--ink-muted);
line-height: 1.62;
max-width: 440px;
}
.bureau-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px 24px;
margin-top: 32px;
flex-wrap: wrap;
}
.bureau-stamp {
font-family: var(--font-label);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-faint);
}
@media (max-width: 1100px) {
#bureau { padding: 72px 32px; }
}
@media (max-width: 768px) {
#bureau { padding: 60px 24px; }
.bureau-grid { grid-template-columns: 1fr; }
.bureau-card { padding: 28px 24px; }
.bureau-foot .btn-primary { width: 100%; text-align: center; }
}