/*!
* Morrow — Creative Studio HTML Template
* Main stylesheet (loaded after Bootstrap 5.3)
*
* TABLE OF CONTENTS
* 01. Fonts
* 02. Design tokens (light, dark, per-home accents)
* 03. Base & typography
* 04. Layout (container, bands)
* 05. Buttons
* 06. Site header & mobile menu
* 07. Site footer
* 08. Shared blocks (labels, meta rows)
* 09. Motion helpers
* 10. Responsive (shared)
* 11+. One block per page, built from assets/css/src/*.css
*
* Source files live in assets/css/src/. Run python3 tools/build-css.py
* to rebuild this file after editing them.
*/
/* ==========================================================================
01. Fonts — all SIL Open Font License 1.1 (see documentation → Credits)
========================================================================== */
@font-face { font-family: "Big Shoulders Display"; src: url("../fonts/big-shoulders-display-100.woff2") format("woff2"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Big Shoulders Display"; src: url("../fonts/big-shoulders-display-900.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts/geist-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts/geist-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts/geist-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-200.woff2") format("woff2"); font-weight: 200; font-style: normal; font-display: swap; }
/* Weight 300 (the body weight) maps to the Regular file so mono text never falls back to ExtraLight. */
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-400.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
/* ==========================================================================
02. Design tokens
Names match the Figma variables (Color collection, Light / Dark modes).
Change a value here and every page follows.
========================================================================== */
:root {
--base: #fcf7f3;
--surface: #f3ece4;
--surface-alt: #e8dfd3;
--contrast: #111111;
--text-primary: #111111;
--text-muted: #5c5650;
--text-on-contrast: #fcf7f3;
--border: #d9d0c4;
/* Accent of the current home — overridden per page below */
--accent: #111111;
--on-accent: #fcf7f3;
/* Type */
--font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
--font-body: "Geist", "Helvetica Neue", sans-serif;
--font-mono: "JetBrains Mono", "SFMono-Regular", monospace;
/* Space scale (Figma Space collection) */
--space-8: 8px; --space-16: 16px; --space-24: 24px; --space-32: 32px;
--space-40: 40px; --space-48: 48px; --space-64: 64px; --space-96: 96px; --space-128: 128px;
--radius: 4px;
/* Page side padding: 60 desktop / 48 tablet / 24 phone */
--gutter: 56px;
/* Bootstrap bridge */
--bs-body-bg: var(--base);
--bs-body-color: var(--text-primary);
--bs-body-font-family: var(--font-body);
--bs-border-color: var(--border);
}
/* Dark pages set data-bs-theme="dark" on */
[data-bs-theme="dark"] {
--base: #0f0f0f;
--surface: #171717;
--surface-alt: #1f1f1f;
--contrast: #262626;
--text-primary: #f2efe9;
--text-muted: #a8a29a;
--text-on-contrast: #f2efe9;
--border: #34302c;
--accent: #f2efe9;
--on-accent: #0f0f0f;
}
/* Studio home (index.html): cream, paper, warm ink, oxblood */
.home-studio {
--base: #f4efe7;
--surface: #ebe4d8;
--contrast: #1a1414;
--card: #251d1d;
--text-primary: #1a1414;
--text-muted: rgba(26, 20, 20, 0.65);
--text-on-contrast: #f4efe7;
--border: rgba(26, 20, 20, 0.2);
--accent: #7a1f2b;
--accent-deep: #561520;
--on-accent: #f4efe7;
}
[data-bs-theme="dark"] .home-studio,
[data-bs-theme="dark"].home-studio {
--base: #0f0f0f;
--surface: #171717;
--contrast: #1a1414;
--text-primary: #f2efe9;
--text-muted: #a8a29a;
--border: #34302c;
}
/* ==========================================================================
03. Base & typography
No italics anywhere. Display type is Big Shoulders Display 900 (or 100 for
the thin style); body is Geist; numbers and labels are JetBrains Mono.
========================================================================== */
html { -webkit-text-size-adjust: 100%; }
body {
background: var(--base);
color: var(--text-primary);
font-family: var(--font-body);
font-weight: 300;
font-size: 17px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
em, i { font-style: normal; }
a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }
img { max-width: 100%; display: block; }
.t-display {
font-family: var(--font-display);
font-weight: 900;
text-transform: uppercase;
line-height: 0.85;
letter-spacing: -0.01em;
margin: 0;
}
.t-display-thin { font-weight: 100; }
.t-heading {
font-family: var(--font-body);
font-weight: 300;
line-height: 1.08;
letter-spacing: -0.03em;
margin: 0;
}
.t-body-l { font-size: 22px; line-height: 1.4; font-weight: 300; }
.t-body-s { font-size: 15px; line-height: 1.5; }
.t-label {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 400;
line-height: 1.4;
color: var(--text-muted);
}
.t-data {
font-family: var(--font-mono);
font-weight: 200;
line-height: 0.9;
letter-spacing: -0.04em;
}
/* ==========================================================================
04. Layout
Content width is 1320 at 1440 (Bootstrap .container at xxl), with the
gutter above as side padding.
========================================================================== */
.container-morrow {
width: 100%;
max-width: calc(1320px + var(--gutter) * 2);
margin-inline: auto;
padding-inline: var(--gutter);
}
.band { position: relative; }
.band--contrast { background: var(--contrast); color: var(--text-on-contrast); --text-muted: rgba(244, 239, 231, 0.65); --border: rgba(244, 239, 231, 0.2); }
.band--surface { background: var(--surface); }
.band--accent { background: var(--accent); color: var(--on-accent); --text-muted: rgba(244, 239, 231, 0.72); --border: rgba(244, 239, 231, 0.25); }
/* ==========================================================================
05. Buttons — 4px corners, fixed heights (Large 56 / Medium 51 / Small 40)
========================================================================== */
.btn-m {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
height: 51px;
padding: 0 24px;
border: 1px solid transparent;
border-radius: var(--radius);
font-family: var(--font-mono);
font-weight: 500;
font-size: 13px;
line-height: 1;
white-space: nowrap;
transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.btn-m:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn-m .btn-m__icon { transition: transform .25s ease; }
.btn-m:hover .btn-m__icon { transform: translateX(3px); }
.btn-m--sm { height: 48px; }
.btn-m--primary { background: var(--contrast); color: var(--text-on-contrast); }
.btn-m--primary:hover { background: var(--accent); color: var(--on-accent); }
.btn-m--accent { background: var(--accent); color: var(--on-accent); }
.btn-m--accent:hover { background: var(--contrast); color: var(--text-on-contrast); }
.btn-m--outline { border-color: color-mix(in srgb, currentColor 45%, transparent); color: var(--text-primary); }
.btn-m--outline:hover { border-color: currentColor; }
/* ==========================================================================
06. Site header — lockup left, five links centre, one button right.
Below 1024px the links move into the offcanvas menu.
========================================================================== */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-24); }
.lockup { display: inline-flex; align-items: center; gap: 12px; color: var(--text-primary); }
.lockup--inherit { color: inherit; } /* drawer title takes the drawer colour */
.lockup svg { width: 32px; height: 32px; flex: none; }
.lockup__word {
font-family: var(--font-display);
font-weight: 900;
font-size: 28px;
letter-spacing: 0.14em;
line-height: 1;
}
.site-nav { display: flex; gap: 32px; margin: 0; padding: 0; list-style: none; }
.site-nav a { font-family: var(--font-mono); font-size: 13px; line-height: 1.4; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .25s ease; }
.site-nav a:hover, .site-nav a[aria-current="page"] { background-size: 100% 1px; }
.site-header__actions { display: flex; align-items: center; gap: 12px; }
.theme-switch { font-family: var(--font-mono); font-size: 13px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius); }
.theme-switch:hover { border-color: currentColor; }
.menu-toggle {
display: none;
width: 48px; height: 48px;
align-items: center; justify-content: center;
border: 1px solid var(--border); border-radius: var(--radius);
background: transparent; color: var(--text-primary);
}
.offcanvas.menu-drawer { background: var(--contrast); color: var(--text-on-contrast); width: 100%; max-width: 420px; }
.menu-drawer__list { list-style: none; padding: 0; margin: 0; }
.menu-drawer__list a { display: block; font-family: var(--font-display); font-weight: 900; font-size: 56px; line-height: 1; text-transform: uppercase; padding: 8px 0; }
/* Fit-to-width display lines: main.js sizes each [data-fit] line so it
fills its column (data-fit = share of the column, 1 = full width). */
.fit-line { white-space: nowrap; }
/* ==========================================================================
08. Shared blocks
========================================================================== */
.meta-row {
display: flex; justify-content: space-between; gap: var(--space-16);
border-top: 1px solid var(--border); padding-top: var(--space-16);
}
/* 08.1 Section rhythm */
.section-pad { padding: var(--space-128) 0; }
.band em { font-style: normal; }
/* 08.2 Round button — the one round element, used for the main CTA */
.btn-circle { flex: none; width: 200px; height: 200px; border-radius: 50%; background: var(--contrast); color: var(--text-on-contrast); display: inline-flex; align-items: center; justify-content: center; text-align: center; font-family: var(--font-mono); font-weight: 500; font-size: 14px; line-height: 1.4; transition: transform .35s ease; }
.btn-circle:hover { color: var(--text-on-contrast); transform: scale(1.06); }
/* 08.3 Inner-page shell — title band and closing footer band (13–16 pages) */
.page-title { padding: 32px 0 var(--space-96); }
.page-title__inner { display: flex; flex-direction: column; gap: var(--space-64); }
.page-title__block { display: flex; flex-direction: column; gap: var(--space-24); }
.page-title__crumbs { font-family: var(--font-mono); font-size: 13px; color: color-mix(in srgb, var(--text-primary) 70%, transparent); margin: 0; }
.page-title__crumbs a:hover { color: var(--text-primary); }
.page-title__row { display: flex; align-items: flex-end; gap: var(--space-48); }
.page-title__title { font-size: 240px; letter-spacing: -0.01em; line-height: .82; white-space: nowrap; }
.page-title__lead { flex: 1 1 0; margin: 0; font-size: 22px; line-height: 1.4; }
.site-nav a[aria-current="page"] { font-weight: 500; }
/* On inner pages the links other than the current one are dimmed, as in the design. */
.site-nav:has(a[aria-current="page"]) a:not([aria-current="page"]) { opacity: .75; }
.site-nav:has(a[aria-current="page"]) a:hover { opacity: 1; }
.page-end { padding: var(--space-96) 0 var(--space-48); }
.page-end__cta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-32); margin-bottom: var(--space-64); }
.page-end__title { font-size: 110px; }
.btn-m--light { background: var(--base); color: var(--contrast); }
.btn-m--light:hover { background: var(--accent); color: var(--on-accent); }
.btn-m--light:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
/* Dark set: the primary button turns light so it stays visible on every dark band. */
[data-bs-theme="dark"] .btn-m--primary { background: #f2efe9; color: #111111; }
[data-bs-theme="dark"] .btn-m--primary:hover { background: var(--accent); color: var(--on-accent); }
/* Light button stays light on dark grounds in the dark set. */
[data-bs-theme="dark"] .btn-m--light { background: #f2efe9; color: #111111; }
[data-bs-theme="dark"] .btn-m--light:hover { background: var(--accent); color: var(--on-accent); }
/* ==========================================================================
07. Site footer — brand column fills, three 240px link columns, legal row.
Colours follow the band it sits in (--text-muted, --border).
========================================================================== */
.site-footer { border-top: 1px solid var(--border); padding-top: var(--space-48); }
.site-footer__cols { display: flex; gap: var(--space-32); margin-bottom: var(--space-48); }
.site-footer__brand { flex: 1 1 0; display: flex; flex-direction: column; gap: var(--space-16); }
.site-footer__brand p { max-width: 300px; margin: 0; font-size: 15px; font-weight: 400; color: var(--text-muted); }
.lockup--lg { color: inherit; gap: 15.6px; }
.lockup--lg svg { width: 41.6px; height: 41.6px; }
.lockup--lg .lockup__word { font-size: 36.4px; }
.site-footer__col { flex: 0 0 240px; display: flex; flex-direction: column; gap: 12px; font-size: 17px; font-weight: 400; }
.site-footer__col h3 { margin: 0; font-family: var(--font-mono); font-size: 13px; font-weight: 400; color: var(--text-muted); }
.site-footer__col a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-footer__legal { display: flex; justify-content: space-between; gap: var(--space-16); padding-top: 24px; border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); }
/* ==========================================================================
09. Motion helpers
========================================================================== */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
}
/* ==========================================================================
10. Responsive (shared) — tablet 768 (48 gutter), phone 390 (24 gutter)
========================================================================== */
@media (max-width: 1199.98px) {
.page-title__row { flex-direction: column; align-items: flex-start; gap: var(--space-24); }
.page-title__title { font-size: 160px; white-space: normal; }
.page-end__title { font-size: 80px; }
}
@media (max-width: 1023.98px) {
:root { --gutter: 48px; }
.site-nav, .site-header .btn-m { display: none; }
.site-header__actions { margin-left: auto; }
.menu-toggle { display: inline-flex; }
.section-pad { padding: 96px 0; }
.site-footer__cols { flex-wrap: wrap; }
.site-footer__brand { flex-basis: 100%; }
.site-footer__col { flex-basis: 150px; }
}
@media (max-width: 575.98px) {
:root { --gutter: 24px; }
.page-title__title { font-size: 88px; }
.page-title__lead { font-size: 18px; }
.page-end__cta { flex-direction: column; align-items: flex-start; }
.page-end__title { font-size: 56px; }
.meta-row { flex-wrap: wrap; }
.btn-circle { width: 160px; height: 160px; }
.site-footer__legal { flex-direction: column; }
}
/* ==========================================================================
Motion layer (assets/js/motion.js)
========================================================================== */
/* Preloader: the mark rises, a counter runs to 100, the panel lifts away. */
.preloader {
position: fixed; inset: 0; z-index: 2000;
display: flex; flex-direction: column; justify-content: flex-end; gap: 24px;
padding: var(--gutter); background: var(--contrast); color: var(--text-on-contrast);
}
.preloader__mark { position: absolute; left: 50%; top: 42%; width: 120px; transform: translate(-50%, -50%); overflow: hidden; }
.preloader__mark svg { width: 100%; height: auto; display: block; }
.preloader__row { display: flex; justify-content: space-between; align-items: flex-end; overflow: hidden; }
.preloader__word { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(64px, 14vw, 200px); line-height: .8; letter-spacing: .02em; }
.preloader__count { font-family: var(--font-mono); font-weight: 200; font-size: clamp(40px, 7vw, 96px); line-height: .8; }
.preloader__bar { height: 2px; background: color-mix(in srgb, currentColor 20%, transparent); }
.preloader__bar i { display: block; height: 100%; background: currentColor; transform: scaleX(0); transform-origin: left; }
/* Page curtain between internal pages. */
.curtain { position: fixed; inset: 0; z-index: 1990; pointer-events: none; overflow: hidden; }
/* Early cover: a one-line script in adds .is-covered on the first visit or when
arriving from a link, so the page never flashes before the intro. motion.js removes it;
if scripts fail, the cover fades away on its own after 4s. */
html.is-covered body::before { content: ""; position: fixed; inset: 0; z-index: 1989; background: var(--contrast); animation: cover-off 0s 4s forwards; }
@keyframes cover-off { to { visibility: hidden; } }
.curtain__panel { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 32px var(--gutter) 48px; background: var(--contrast); color: var(--base); } /* position is set by motion.js */
.curtain__top { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.curtain__top svg { width: 28px; height: 28px; }
.curtain__bottom { display: flex; flex-direction: column; gap: 24px; }
.curtain__label { display: block; overflow: hidden; padding-top: .12em; }
.curtain__text { display: block; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(56px, 9vw, 168px); line-height: .88; letter-spacing: -0.01em; max-width: 14ch; }
.curtain__bar { display: block; height: 1px; background: color-mix(in srgb, var(--base) 25%, transparent); }
.curtain__bar i { display: block; height: 100%; background: var(--base); transform: scaleX(0); transform-origin: 0 50%; }
/* Custom cursor — fine pointers only. */
.has-m-cursor, .has-m-cursor a, .has-m-cursor button { cursor: none; }
.has-m-cursor input, .has-m-cursor textarea, .has-m-cursor select { cursor: text; }
.m-cursor { position: fixed; left: 0; top: 0; z-index: 2100; pointer-events: none; mix-blend-mode: difference; color: #fff; opacity: 0; transition: opacity .3s; }
.m-cursor.is-on { opacity: 1; }
.m-cursor__dot, .m-cursor__ring { position: fixed; left: 0; top: 0; border-radius: 50%; }
.m-cursor__dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: currentColor; }
.m-cursor__ring { width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 1px solid currentColor; display: flex; align-items: center; justify-content: center;
transition: width .35s cubic-bezier(.2,.7,.2,1), height .35s cubic-bezier(.2,.7,.2,1), margin .35s cubic-bezier(.2,.7,.2,1), background-color .3s, border-color .3s; }
.m-cursor.is-hot .m-cursor__ring { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
.m-cursor.is-view .m-cursor__ring { width: 96px; height: 96px; margin: -48px 0 0 -48px; background: currentColor; }
.m-cursor.is-view .m-cursor__dot { opacity: 0; }
.m-cursor.is-text .m-cursor__ring { width: 2px; height: 28px; margin: -14px 0 0 -1px; border-radius: 1px; background: currentColor; }
.m-cursor.is-down .m-cursor__ring { transform: scale(.85); }
.m-cursor__label { font-family: var(--font-mono); font-weight: 500; font-size: 12px; color: #000; opacity: 0; transition: opacity .2s; }
.m-cursor.is-view .m-cursor__label { opacity: 1; }
/* Rolling button label: a copy below slides up on hover. */
.btn-m .roll { display: inline-block; overflow: hidden; height: 1.2em; line-height: 1.2; vertical-align: middle; }
.btn-m .roll__in { display: block; transition: transform .5s cubic-bezier(.7, 0, .2, 1); }
.btn-m .roll__in::after { content: attr(data-text); display: block; }
.btn-m:hover .roll__in, .btn-m:focus-visible .roll__in { transform: translateY(-50%); }
/* ==========================================================================
05. Demo picker (index.html at the package root)
========================================================================== */
.page-picker { --pk-gap: 24px; }
/* Header bar */
.page-picker .pk-nav { display: flex; gap: 32px; margin: 0; padding: 0; list-style: none; }
.page-picker .pk-nav a { font-family: var(--font-mono); font-size: 13px; opacity: .75; }
.page-picker .pk-nav a:hover { opacity: 1; }
/* Hero: what Morrow is, in one screen */
.page-picker .pk-hero { padding: 32px 0 var(--space-96); }
.page-picker .pk-hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--space-64); align-items: center; margin-top: var(--space-64); }
.page-picker .pk-hero__eyebrow { margin: 0 0 var(--space-24); }
.page-picker .pk-hero__title { font-size: clamp(88px, 11vw, 168px); line-height: .84; margin: 0 0 var(--space-32); }
.page-picker .pk-hero__lead { margin: 0 0 var(--space-40); max-width: 520px; font-size: 20px; line-height: 1.45; }
.page-picker .pk-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.page-picker .pk-stats { display: grid; grid-template-columns: repeat(5, auto); gap: var(--space-32); margin: var(--space-64) 0 0; padding: var(--space-24) 0 0; list-style: none; border-top: 1px solid var(--border); }
.page-picker .pk-stats b { display: block; font-family: var(--font-mono); font-weight: 200; font-size: 44px; line-height: 1; letter-spacing: -0.03em; }
.page-picker .pk-stats span { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
/* Fan of three previews */
.page-picker .pk-fan { position: relative; aspect-ratio: 1 / .82; }
.page-picker .pk-fan figure { position: absolute; width: 64%; margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: 0 24px 60px rgba(17, 17, 17, .18); background: var(--surface); }
.page-picker .pk-fan img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.page-picker .pk-fan figure:nth-child(1) { left: 0; top: 18%; transform: rotate(-6deg); }
.page-picker .pk-fan figure:nth-child(2) { right: 0; top: 4%; transform: rotate(5deg); }
.page-picker .pk-fan figure:nth-child(3) { left: 18%; bottom: 0; transform: rotate(-1deg); z-index: 2; }
/* Section heads */
.page-picker .pk-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-32); margin-bottom: var(--space-48); }
.page-picker .pk-head h2 { font-size: clamp(48px, 6vw, 88px); margin: 12px 0 0; }
.page-picker .pk-head p { max-width: 420px; margin: 0; color: var(--text-muted); font-size: 16px; }
/* Home cards: 4 across */
.page-picker .pk-homes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-48) var(--pk-gap); list-style: none; margin: 0; padding: 0; }
.page-picker .pk-card { display: flex; flex-direction: column; gap: 12px; }
.page-picker .pk-card__shot { display: block; position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.page-picker .pk-card__shot img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.page-picker .pk-card:hover .pk-card__shot img { transform: scale(1.05); }
.page-picker .pk-card__num { position: absolute; left: 10px; top: 10px; padding: 3px 6px; border-radius: var(--radius); background: var(--contrast); color: var(--text-on-contrast); font-family: var(--font-mono); font-size: 11px; }
.page-picker .pk-card__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; }
.page-picker .pk-card__name { margin: 0; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 30px; line-height: .9; }
.page-picker .pk-card__links { display: flex; gap: 6px; }
.page-picker .pk-card__links a { font-family: var(--font-mono); font-size: 11px; padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--radius); }
.page-picker .pk-card__links a:hover { border-color: currentColor; }
.page-picker .pk-card__note { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text-muted); }
/* Inner pages: small tiles, 5 across */
.page-picker .pk-group { margin-bottom: var(--space-48); }
.page-picker .pk-group h3 { font-family: var(--font-mono); font-weight: 400; font-size: 13px; color: var(--text-muted); margin: 0 0 16px; }
.page-picker .pk-inner { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-32) var(--pk-gap); list-style: none; margin: 0; padding: 0; }
.page-picker .pk-inner .pk-card__name { font-family: var(--font-body); font-weight: 500; text-transform: none; font-size: 15px; line-height: 1.3; }
/* Features */
.page-picker .pk-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin: 0; padding: 0; list-style: none; }
.page-picker .pk-feature { background: var(--base); padding: 32px; display: flex; flex-direction: column; gap: 12px; }
.page-picker .pk-feature i { font-size: 20px; }
.page-picker .pk-feature h3 { margin: 0; font-size: 20px; font-weight: 500; }
.page-picker .pk-feature p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-muted); }
/* Stack strip */
.page-picker .pk-stack { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.page-picker .pk-stack li { font-family: var(--font-mono); font-size: 13px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); }
.page-picker .pk-foot { display: flex; justify-content: space-between; gap: 16px; padding: 32px 0 48px; border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
@media (max-width: 1199.98px) {
.page-picker .pk-homes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.page-picker .pk-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1023.98px) {
.page-picker .pk-nav { display: none; }
.page-picker .pk-hero__grid { grid-template-columns: minmax(0, 1fr); }
.page-picker .pk-fan { max-width: 560px; }
.page-picker .pk-stats { grid-template-columns: repeat(3, auto); }
.page-picker .pk-homes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-picker .pk-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.page-picker .pk-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-picker .pk-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 575.98px) {
.page-picker .pk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-picker .pk-stats b { font-size: 34px; }
.page-picker .pk-homes { grid-template-columns: minmax(0, 1fr); }
.page-picker .pk-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-picker .pk-features { grid-template-columns: minmax(0, 1fr); }
.page-picker .pk-feature { padding: 24px; }
.page-picker .pk-foot { flex-direction: column; }
}
/* ==========================================================================
11. Home — Studio (light/index.html, dark/index.html)
========================================================================== */
/* 09.1 Hero & about --------------------------------------------------------- */
.studio-hero { padding: 32px 0 var(--space-128); }
.studio-hero__inner { display: flex; flex-direction: column; gap: var(--space-64); }
.studio-hero__headline { display: flex; flex-direction: column; gap: var(--space-16); }
.studio-hero__headline h1 { display: flex; flex-direction: column; gap: var(--space-16); }
/* Two lines, one weight. Sizes are fluid so each line fills the 1320 column. */
.studio-hero__line-1 { font-size: clamp(56px, 12.85vw, 185px); letter-spacing: -0.02em; line-height: .82; }
.studio-hero__line-2 { font-size: clamp(80px, 18.96vw, 273px); letter-spacing: -0.01em; line-height: .84; }
.studio-about { display: flex; align-items: flex-end; gap: var(--space-32); }
.studio-about__media { flex: 0 0 520px; aspect-ratio: 520 / 680; overflow: hidden; }
.studio-about__media img { width: 100%; height: 100%; object-fit: cover; }
.studio-about__copy { flex: 1 1 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-40); }
.studio-about__lead { font-size: 56px; letter-spacing: -0.03em; line-height: 1.08; }
.studio-about__text { max-width: 460px; font-size: 18px; line-height: 1.5; color: color-mix(in srgb, var(--text-primary) 72%, transparent); margin: 0; }
/* 09.2 Still-in-use ruler ---------------------------------------------------
Built by assets/js/home-studio.js from the of projects inside
.ruler. Edit the list (year + label + years in use), not the drawing. */
.ruler-block { display: flex; flex-direction: column; gap: var(--space-32); }
.ruler-block__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-24); }
.ruler-block__title { font-size: 40px; letter-spacing: -0.02em; line-height: 1.1; max-width: 640px; margin: 12px 0 0; }
.ruler-wrap { overflow-x: auto; scrollbar-width: thin; }
.ruler { position: relative; height: 230px; }
.ruler__baseline { position: absolute; left: 0; right: 0; top: 170px; height: 1px; background: var(--text-primary); }
.ruler__tick { position: absolute; top: 162px; width: 1px; height: 8px; background: color-mix(in srgb, var(--text-primary) 40%, transparent); }
.ruler__tick--major { top: 150px; height: 20px; background: var(--text-primary); }
.ruler__year { position: absolute; top: 184px; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); transform: translateX(-50%); }
.ruler__year:first-of-type { transform: none; }
.ruler__year--last { transform: translateX(-100%); }
.ruler__flag { position: absolute; bottom: 60px; width: 1px; background: var(--accent); transition: opacity .4s ease; }
/* Flags the playhead has not reached yet are dimmed (home-studio.js adds .is-ahead). */
.ruler__flag.is-ahead { opacity: .28; }
.ruler__flag::after { content: ""; position: absolute; bottom: -4.5px; left: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.ruler__flag-label { position: absolute; left: 10px; top: -2px; display: flex; flex-direction: column; gap: 4px; white-space: nowrap; }
.ruler__flag-label strong { font-weight: 500; font-size: 15px; }
.ruler__flag-label span { font-family: var(--font-mono); font-size: 12px; }
/* Playhead: travels 2014 → today as the ruler scrolls through the screen. */
.ruler__head { position: absolute; top: 134px; left: var(--p, 100%); width: 1px; height: 36px; background: var(--accent); pointer-events: none; }
.ruler__head::before { content: ""; position: absolute; left: -7px; top: -9px; border-left: 7.5px solid transparent; border-right: 7.5px solid transparent; border-top: 9px solid var(--accent); }
.ruler__head-year { position: absolute; top: calc(100% + 36px); left: 0; transform: translateX(-50%); padding: 2px 6px; border-radius: 2px; background: var(--accent); color: var(--on-accent); font-family: var(--font-mono); font-weight: 500; font-size: 11px; line-height: 1.3; white-space: nowrap; }
.ruler__head.is-start .ruler__head-year { transform: none; left: -1px; }
.ruler__head.is-end .ruler__head-year { transform: translateX(-100%); left: 1px; }
/* The source list stays in the DOM for screen readers, visually hidden. */
.ruler__list { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* 09.4 Selected work — collage ---------------------------------------------- */
.work-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-24); margin-bottom: 80px; }
.work-head__title { font-size: 160px; letter-spacing: -0.01em; }
.work-head__link { font-family: var(--font-mono); font-weight: 500; font-size: 13px; }
.collage { display: flex; flex-direction: column; gap: 80px; }
.collage__row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-24); }
.project-card { display: flex; flex-direction: column; gap: 12px; width: var(--w); padding-top: var(--drop); color: var(--text-on-contrast); translate: 0 var(--py, 0px); }
.project-card__media { display: block; height: var(--h); overflow: hidden; }
.project-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.project-card:hover .project-card__media img { transform: scale(1.04); }
.project-card__meta { display: flex; justify-content: space-between; gap: 12px; }
.project-card__meta > span:first-child { display: flex; flex-direction: column; gap: 4px; }
.project-card__meta strong { font-weight: 500; font-size: 16px; }
.project-card__meta em, .project-card__year { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
/* 09.5 Services -------------------------------------------------------------- */
.services-title { font-size: min(200px, 13.9vw); letter-spacing: -0.01em; line-height: .86; white-space: nowrap; display: flex; flex-direction: column; gap: 8px; margin-bottom: 80px; }
.service-list { list-style: none; margin: 0; padding: 0; }
.service-row { display: flex; align-items: center; gap: var(--space-32); padding: 40px 0; border-top: 1px solid var(--border); color: inherit; }
.service-list li:last-child .service-row { border-bottom: 1px solid var(--border); }
.service-row__num { flex: 0 0 160px; font-family: var(--font-mono); font-size: 14px; color: color-mix(in srgb, var(--text-primary) 72%, transparent); }
.service-row__name { flex: 1 1 0; font-size: 56px; line-height: 1.2; transition: transform .35s ease; }
.service-row:hover .service-row__name, .service-row:focus-visible .service-row__name { transform: translateX(12px); }
.service-row__text { flex: 0 0 400px; margin: 0; font-size: 17px; color: color-mix(in srgb, var(--text-primary) 78%, transparent); }
.service-row__go { flex: 0 0 24px; font-size: 22px; text-align: right; opacity: 0; transform: translate(-8px, 8px); transition: opacity .3s ease, transform .35s cubic-bezier(.2,.7,.2,1); }
.service-row:hover .service-row__go, .service-row:focus-visible .service-row__go { opacity: 1; transform: none; }
.service-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
/* 09.6 Clients — transcript, voice note, swatch fan --------------------------- */
.testimonial { padding: var(--space-128) 0 var(--space-96); overflow-x: clip; }
.testimonial__layout { display: flex; flex-direction: column; gap: var(--space-48); margin-bottom: var(--space-96); }
.testimonial__intro { display: flex; flex-direction: column; gap: var(--space-24); }
.testimonial__title { font-size: 72px; line-height: 1; max-width: 760px; }
/* Transcript and voice note side by side, same height. */
.testimonial__panels { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-24); align-items: stretch; }
.panel { background: var(--card); border-radius: var(--radius); padding: var(--space-32); display: flex; flex-direction: column; gap: var(--space-32); min-width: 0; }
.transcript { justify-content: space-between; }
.transcript__quote, .transcript .person, .voice__controls .person__text { transition: opacity .35s ease, transform .45s cubic-bezier(.2,.7,.2,1); }
.testimonial__layout.is-switching .transcript__quote,
.testimonial__layout.is-switching .transcript .person,
.testimonial__layout.is-switching .voice__controls .person__text { opacity: 0; transform: translateY(10px); }
.panel__label { font-family: var(--font-mono); font-size: 12px; color: rgba(244, 239, 231, 0.7); }
.transcript__quote { font-size: 28px; line-height: 1.3; letter-spacing: -0.01em; }
.person { display: flex; align-items: center; gap: var(--space-16); }
.person__avatar { flex: none; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #3a2c2c; color: var(--text-on-contrast); font-family: var(--font-mono); font-weight: 500; font-size: 15px; }
.person__avatar img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.person strong, .person__text strong { display: block; font-weight: 500; font-size: 16px; }
.person em, .person__text em { display: block; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.voice { justify-content: space-between; }
.voice__head { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 12px; }
.voice__live { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.voice__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.voice.is-playing .voice__dot { background: #e0455a; animation: voice-rec 1.2s ease-in-out infinite; }
@keyframes voice-rec { 50% { opacity: .25; } }
.voice__wave { display: flex; align-items: center; justify-content: space-between; gap: 3px; height: 96px; cursor: pointer; }
.voice__wave i { flex: 1 1 0; max-width: 4px; border-radius: 2px; background: rgba(235, 228, 216, 0.35); transform-origin: 50% 50%; transition: background-color .2s; }
.voice__wave:hover i { background: rgba(235, 228, 216, 0.5); }
.voice__wave i.is-played { background: var(--accent); }
.voice__controls { display: flex; align-items: center; gap: var(--space-16); }
.voice__play { flex: none; width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--accent); color: var(--on-accent); display: inline-flex; align-items: center; justify-content: center; }
.voice__controls .person__text { flex: 1 1 0; }
.voice__time { font-family: var(--font-mono); font-size: 13px; color: rgba(244, 239, 231, 0.8); }
.voice__play:hover { background: var(--on-accent); color: var(--accent); }
.voice__play:focus-visible, .voice__more:focus-visible { outline: 2px solid var(--on-accent); outline-offset: 3px; }
.voice__more { align-self: flex-start; padding: 0; border: 0; background: none; font-family: var(--font-mono); font-weight: 500; font-size: 12px; color: rgba(244, 239, 231, 0.8); }
.voice__more:hover { color: var(--text-on-contrast); }
.voice__more-arrow { display: inline-block; transition: transform .25s ease; }
.voice__more:hover .voice__more-arrow { transform: translateX(4px); }
.swatch-fan { position: relative; height: 460px; list-style: none; margin: 0; padding: 0; }
.swatch {
--x: calc(var(--i) * 132px);
--r: calc(var(--i) * 7deg);
--y: calc(var(--i) * var(--i) * 7px);
position: absolute; left: 50%; top: 70px; width: 200px;
background: #f4ece1; color: #1d0f0e; border-radius: 6px; overflow: hidden;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
transform: translate(calc(-50% + var(--x)), var(--y)) rotate(var(--r));
transform-origin: 50% 120%;
transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.swatch { cursor: pointer; }
.swatch:hover, .swatch:focus-visible, .swatch.is-copied { transform: translate(calc(-50% + var(--x)), calc(var(--y) - 24px)) rotate(var(--r)); z-index: 5; }
.swatch:focus-visible { outline: 2px solid var(--text-on-contrast); outline-offset: 4px; }
.swatch__colour { display: block; height: 196px; background: var(--c); }
.swatch__label { display: flex; flex-direction: column; gap: 6px; padding: 20px; }
.swatch__label strong { font-weight: 500; font-size: 18px; }
.swatch__label em { font-family: var(--font-mono); font-size: 12px; color: rgba(29, 15, 14, 0.7); white-space: pre; }
/* 09.7 Recognition ------------------------------------------------------------ */
.recognition { display: flex; gap: var(--space-32); align-items: flex-start; }
.recognition__intro { flex: 0 0 520px; display: flex; flex-direction: column; gap: var(--space-32); }
.recognition__title { font-size: 48px; line-height: 1.1; }
.awards { flex: 1 1 0; margin: 0; }
.awards__group { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px 0 24px 272px; border-top: 1px solid var(--border); }
.awards dt { position: absolute; left: 0; top: 24px; width: 240px; font-weight: 500; font-size: 18px; }
.awards dd { display: flex; justify-content: space-between; margin: 0; font-weight: 400; font-size: 16px; color: color-mix(in srgb, var(--text-primary) 72%, transparent); }
.awards dd b { font-family: var(--font-mono); font-weight: 400; font-size: 14px; color: var(--text-primary); }
/* 09.8 People -------------------------------------------------------------------- */
.team-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-32); margin-bottom: var(--space-64); }
.team-head__title { font-size: 72px; line-height: 1; max-width: 760px; margin-top: 24px; }
.team-head__text { max-width: 320px; margin: 0; font-size: 18px; color: rgba(244, 239, 231, 0.72); }
.team-grid { --bs-gutter-x: 32px; }
.team-card { display: flex; flex-direction: column; gap: 4px; }
.team-card img { width: 100%; aspect-ratio: 309 / 400; object-fit: cover; filter: grayscale(1); margin-bottom: 12px; transition: filter .4s ease; }
.team-card:hover img { filter: grayscale(0); }
.team-card strong { font-weight: 500; font-size: 18px; }
.team-card em { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
/* 09.9 CTA — calendar, actions, footer -------------------------------------- */
.cta { padding: var(--space-128) 0 var(--space-48); }
.calendar { display: flex; flex-direction: column; gap: var(--space-48); margin-bottom: var(--space-96); }
.calendar__title { font-size: 145px; letter-spacing: -0.01em; }
.calendar__months { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.month__cell { position: relative; height: 168px; padding: 24px; border-radius: var(--radius); display: flex; flex-direction: column; justify-content: space-between; background: var(--contrast); color: var(--text-on-contrast); overflow: hidden; transition: transform .3s ease, background-color .3s ease, color .3s ease; }
.month__cell span { font-family: var(--font-mono); font-weight: 500; font-size: 13px; }
.month__cell strong { font-weight: 500; font-size: 18px; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.month[data-state="booked"] .month__cell { background: var(--accent-deep); color: rgba(244, 239, 231, 0.9); }
.month[data-state="booked"] strong { font-weight: 400; }
/* Open months are links: they lift, turn cream and offer "Book". */
.month__book { position: absolute; right: 24px; top: 24px; font-family: var(--font-mono); font-weight: 500; font-size: 13px; opacity: 0; transform: translateX(-8px); transition: opacity .3s ease, transform .35s cubic-bezier(.2,.7,.2,1); }
a.month__cell:hover, a.month__cell:focus-visible { transform: translateY(-6px); background: var(--text-on-contrast); color: var(--contrast); }
a.month__cell:hover .month__book, a.month__cell:focus-visible .month__book { opacity: 1; transform: none; }
a.month__cell:focus-visible { outline: 2px solid var(--text-on-contrast); outline-offset: 3px; }
.cta__actions { display: flex; align-items: center; gap: var(--space-48); margin-bottom: var(--space-96); }
.cta__mail { font-weight: 300; font-size: 64px; letter-spacing: -0.03em; line-height: 1.3; }
.cta__mail { background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .45s cubic-bezier(.2,.7,.2,1); }
.cta__mail:hover { background-size: 100% 2px; }
/* Full-width fit lines stay on the grid edge: no display scrub (motion.js). */
.home-studio [data-no-scrub] { transform: none !important; }
/* Footer lines on the oxblood band are drawn in ink, as in the design. */
.home-studio .cta .site-footer, .home-studio .cta .site-footer__legal { border-color: rgba(26, 20, 20, 0.25); }
@media (max-width: 1199.98px) {
.studio-about__media { flex-basis: 420px; }
.studio-about__lead { font-size: 44px; }
.collage { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 24px; }
.collage__row { display: contents; }
.project-card { --drop: 0px !important; width: auto; }
.project-card__media { height: auto; aspect-ratio: 4 / 3; }
.transcript__quote { font-size: 24px; }
.recognition { flex-direction: column; align-items: stretch; }
.recognition__intro { flex-basis: auto; }
.cta__mail { font-size: 44px; }
}
@media (max-width: 1023.98px) {
.studio-about { flex-direction: column; align-items: stretch; }
.studio-about__media { flex-basis: auto; }
.ruler-block__head { flex-direction: column; align-items: flex-start; }
.ruler { min-width: 960px; }
.work-head__title { font-size: 120px; }
.service-row { flex-wrap: wrap; }
.service-row__num { flex-basis: 100%; }
.service-row__text { flex: 1 1 100%; }
.service-row__name { font-size: 44px; }
.service-row__go { display: none; }
.testimonial__panels { grid-template-columns: 1fr; }
.testimonial__title { font-size: 56px; }
.swatch__colour { height: 150px; }
/* Tablet and phone: the fan becomes a swipeable strip so every label stays readable. */
.swatch-fan { display: flex; gap: 12px; height: auto; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); padding: 24px var(--gutter) 32px; scrollbar-width: none; }
.swatch-fan::-webkit-scrollbar { display: none; }
.swatch, .swatch:hover, .swatch:focus-visible, .swatch.is-copied { position: relative; left: auto; top: auto; flex: 0 0 150px; transform: rotate(calc(var(--i) * 1.2deg)); scroll-snap-align: start; }
.swatch.is-copied { transform: translateY(-10px); }
.team-head { flex-direction: column; align-items: flex-start; }
.team-head__title { font-size: 56px; }
.calendar__months { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 575.98px) {
.studio-about__lead { font-size: 32px; }
.ruler-block__title { font-size: 28px; }
.work-head { flex-wrap: wrap; }
.work-head__title { font-size: 88px; order: -1; flex-basis: 100%; }
.collage { grid-template-columns: 1fr; }
.service-row__name { font-size: 32px; }
.testimonial__title { font-size: 44px; }
.panel { padding: 24px; }
.transcript__quote { font-size: 22px; }
.swatch-fan { height: 340px; }
.swatch__colour { height: 120px; }
.swatch__label { padding: 12px; }
.recognition__title { font-size: 32px; }
.awards__group { padding-left: 0; }
.awards dt { position: static; width: auto; }
.team-head__title { font-size: 44px; }
.calendar__months { grid-template-columns: repeat(2, 1fr); }
.month__cell { height: 120px; padding: 16px; }
.month__book { right: 16px; top: 16px; }
.studio-hero .meta-row__mid { display: none; }
.voice__controls { display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; row-gap: 2px; }
.voice__play { grid-row: span 2; }
.voice__time { font-size: 12px; }
.cta__actions { flex-direction: column; align-items: flex-start; gap: 32px; }
.cta__mail { font-size: 30px; }
}
/* ==========================================================================
12. Home — Creative (light/home-creative.html, dark/home-creative.html)
Cream, cream 2 and two inks. No accent colour: the photos carry it.
========================================================================== */
.home-creative {
--base: #fcf7f3;
--surface: #f3ece4;
--contrast: #111111;
--ink-2: #1d1c1c; /* clients band */
--paper: #fcf7f3; /* letters */
--paper-back: #f1efea; /* letters behind the top one */
--text-primary: #111111;
--text-muted: rgba(17, 17, 17, 0.7);
--text-on-contrast: #fcf7f3;
--border: rgba(17, 17, 17, 0.2);
--accent: #111111;
--on-accent: #fcf7f3;
}
[data-bs-theme="dark"] .home-creative,
[data-bs-theme="dark"].home-creative {
--base: #0f0f0f;
--surface: #171717;
--contrast: #1c1c1c;
--ink-2: #141414;
--paper: #1f1f1f;
--paper-back: #171717;
--text-primary: #f2efe9;
--text-muted: #a8a29a;
--text-on-contrast: #f2efe9;
--border: #34302c;
--accent: #f2efe9;
--on-accent: #0f0f0f;
}
/* Dark: primary buttons sit on a raised grey, as in the Figma dark frame. */
[data-bs-theme="dark"] .home-creative .btn-m--primary { background: #262626; color: #f2efe9; }
[data-bs-theme="dark"] .home-creative .btn-m--primary:hover { background: #f2efe9; color: #0f0f0f; }
/* Dark: letters become dark sheets with light type. */
[data-bs-theme="dark"] .home-creative .cr-letter { color: #f2efe9; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); outline: 1px solid rgba(242, 239, 233, 0.08); }
[data-bs-theme="dark"] .home-creative .cr-letter__head,
[data-bs-theme="dark"] .home-creative .cr-letter__sign { color: #a8a29a; }
.home-creative .band--contrast { --text-muted: rgba(252, 247, 243, 0.72); --border: rgba(252, 247, 243, 0.2); }
/* 12.1 Hero — rising sun ----------------------------------------------------- */
.home-creative .cr-hero { padding: 32px 0 var(--space-96); overflow-x: clip; }
.home-creative .cr-hero__inner { display: flex; flex-direction: column; gap: var(--space-64); }
.home-creative .cr-sunrise { display: flex; flex-direction: column; align-items: center; gap: 56px; }
.home-creative .cr-sunrise__dates { display: flex; justify-content: space-between; gap: var(--space-16); width: 100%; }
/* One size for both lines: 154px at the 1320 column, scaled below that. */
.home-creative .cr-hero__title {
display: flex; flex-direction: column; align-items: center; gap: 16px;
font-size: min(154px, calc((100vw - var(--gutter) * 2) * 0.1145));
line-height: .92; letter-spacing: -0.01em; text-align: center; white-space: nowrap;
}
.home-creative .cr-sun { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
/* Half-circle window: the image is a full circle, only its top half shows.
--sun-focus moves the crop if the subject is not in the upper centre. */
.home-creative .cr-sun__mask { --sun-focus: 50% 4%; width: min(1000px, 100%); aspect-ratio: 2 / 1; overflow: hidden; }
.home-creative .cr-sun__img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; object-position: var(--sun-focus); will-change: transform; }
.home-creative .cr-sun__horizon { display: block; width: 100%; height: 16px; background: var(--text-primary); }
.home-creative .cr-sun__ground { display: block; width: 62.12%; height: 10px; background: var(--text-primary); }
.home-creative .cr-sun__labels { display: flex; justify-content: space-between; gap: var(--space-16); width: 100%; padding-top: 10px; }
.home-creative .cr-sun__labels a:hover { color: var(--text-primary); }
/* 12.2 About + day counter ---------------------------------------------------- */
.home-creative .cr-about { padding: var(--space-128) 0; }
.home-creative .cr-about .container-morrow { display: flex; flex-direction: column; gap: var(--space-64); }
.home-creative .cr-about__row { display: flex; align-items: flex-start; gap: var(--space-64); }
.home-creative .cr-about__media { flex: 0 0 520px; height: 360px; overflow: hidden; }
.home-creative .cr-about__media img { width: 100%; height: 100%; object-fit: cover; }
.home-creative .cr-about__copy { flex: 1 1 0; display: flex; flex-direction: column; gap: var(--space-24); }
.home-creative .cr-about__lead { font-size: 52px; line-height: 1.05; letter-spacing: -0.03em; }
/* Counter: big number left; the right column holds the intro (top) and the
label (bottom, on the number's baseline). */
.home-creative .cr-counter { display: flex; align-items: stretch; gap: var(--space-64); padding-top: var(--space-32); border-top: 1px solid var(--border); }
.home-creative .cr-counter__num { flex: 0 0 auto; font-size: 260px; letter-spacing: -0.06em; line-height: .8; white-space: nowrap; font-variant-numeric: tabular-nums; }
.home-creative .cr-counter__side { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-40); }
.home-creative .cr-counter__label { display: flex; flex-direction: column; gap: 12px; }
.home-creative .cr-counter__label .t-display { font-size: 64px; line-height: .9; }
.home-creative .cr-counter__label p + p { font-size: 16px; font-weight: 400; color: color-mix(in srgb, var(--text-primary) 72%, transparent); }
.home-creative .cr-about__actions { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-32); }
.home-creative .cr-about__actions p { flex: 0 1 420px; font-size: 17px; line-height: 1.5; color: color-mix(in srgb, var(--text-primary) 80%, transparent); }
.home-creative .cr-about__actions .btn-m { height: 49px; }
/* 12.3 Selected work — year index --------------------------------------------- */
.home-creative .cr-work { padding: var(--space-128) 0; }
.home-creative .cr-work .container-morrow { display: flex; flex-direction: column; gap: var(--space-48); }
.home-creative .cr-work__title { font-size: 320px; line-height: .8; text-align: center; }
.home-creative .cr-work__bar { display: flex; justify-content: space-between; gap: var(--space-16); color: var(--text-primary); }
.home-creative .cr-year { display: flex; align-items: flex-start; gap: var(--space-24); padding: 40px 0; border-top: 1px solid var(--border); }
.home-creative .cr-year__label { flex: 0 0 220px; display: flex; flex-direction: column; gap: 8px; }
.home-creative .cr-year__label h3 { margin: 0; font-size: 72px; line-height: 1.32; letter-spacing: -0.04em; }
.home-creative .cr-year__label span { font-family: var(--font-mono); font-weight: 400; font-size: 12px; color: var(--text-muted); }
.home-creative .cr-card { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.home-creative .cr-card__media { display: block; height: 230px; border-radius: var(--radius); overflow: hidden; }
.home-creative .cr-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.home-creative .cr-card:hover .cr-card__media img { transform: scale(1.04); }
.home-creative .cr-card strong { font-weight: 500; font-size: 16px; line-height: 1.3; }
/* 12.4 Services ----------------------------------------------------------------- */
.home-creative .cr-services-intro { padding: 160px 0; }
.home-creative .cr-services-intro__title { max-width: 760px; margin: 0 auto; font-size: 64px; line-height: 1; text-align: center; }
.home-creative .cr-services { padding: var(--space-128) 0; }
.home-creative .cr-service-list { list-style: none; margin: 0; padding: 0; }
.home-creative .cr-service { display: flex; align-items: flex-start; gap: var(--space-32); padding: 32px 0; border-top: 1px solid var(--border); color: inherit; }
.home-creative .cr-service-list li:last-child .cr-service { border-bottom: 1px solid var(--border); }
.home-creative .cr-service:hover { color: inherit; }
.home-creative .cr-service:focus-visible { outline: 2px solid var(--text-on-contrast); outline-offset: 4px; }
.home-creative .cr-service__go { flex: 0 0 24px; font-size: 22px; line-height: 1; text-align: right; opacity: 0; transform: translate(-8px, 8px); transition: opacity .3s ease, transform .35s cubic-bezier(.2,.7,.2,1); }
.home-creative .cr-service:hover .cr-service__go, .home-creative .cr-service:focus-visible .cr-service__go { opacity: 1; transform: none; }
.home-creative .cr-service__num { flex: 0 0 160px; font-family: var(--font-mono); font-weight: 400; font-size: 14px; color: var(--text-muted); }
.home-creative .cr-service__name { flex: 1 1 0; font-size: 60px; line-height: .95; transition: transform .35s ease; }
.home-creative .cr-service:hover .cr-service__name, .home-creative .cr-service:focus-visible .cr-service__name { transform: translateX(12px); }
.home-creative .cr-service__text { flex: 0 0 360px; margin: 0; font-size: 16px; font-weight: 400; color: rgba(252, 247, 243, 0.78); }
.home-creative .cr-guide { display: flex; align-items: flex-end; gap: var(--space-32); padding-top: var(--space-96); }
/* Label on top, text and button on the images' bottom line. */
.home-creative .cr-guide__copy { flex: 1 1 0; align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-32); }
.home-creative .cr-guide__label { margin: 0 0 auto; }
.home-creative .cr-guide__text { margin: 0; max-width: 460px; font-size: 20px; font-weight: 400; line-height: 1.4; }
.home-creative .cr-guide .btn-m--outline { color: var(--text-on-contrast); border-color: rgba(252, 247, 243, 0.4); }
.home-creative .cr-guide .btn-m--outline:hover { border-color: var(--text-on-contrast); }
.home-creative .cr-guide__small { flex: 0 0 200px; width: 200px; height: 180px; object-fit: cover; border-radius: var(--radius); }
.home-creative .cr-guide__large { flex: 0 0 460px; width: 460px; height: 440px; object-fit: cover; border-radius: var(--radius); }
/* 12.5 Clients — letter stack -----------------------------------------------------
Letters are absolutely stacked; --pos is set by home-creative.js
(0 = back, highest = front). Each step moves 40px right, 44px down. */
.home-creative .cr-clients { background: var(--ink-2); color: var(--text-on-contrast); padding: var(--space-128) 0 var(--space-96); --text-muted: rgba(252, 247, 243, 0.72); --border: rgba(252, 247, 243, 0.2); }
.home-creative .cr-clients__layout { display: flex; align-items: center; justify-content: space-between; gap: var(--space-64); margin-bottom: 80px; }
.home-creative .cr-clients__intro { flex: 0 1 640px; display: flex; flex-direction: column; gap: var(--space-24); }
.home-creative .cr-clients__title { font-size: 60px; line-height: 1; letter-spacing: -0.03em; }
/* Letters share one grid cell, so the stack is as tall as its longest letter.
--depth is set by home-creative.js (0 = front). Letters behind the front one
sit higher and slightly smaller, so only their "From" line shows — like a
pile of post on a desk. */
.home-creative .cr-letters-wrap { flex: 0 0 520px; display: flex; flex-direction: column; gap: var(--space-24); }
.home-creative .cr-letters { --step: 44px; display: grid; padding: calc(var(--step) * 2) 0 0; list-style: none; margin: 0; cursor: pointer; }
.home-creative .cr-letter {
--depth: 0;
grid-area: 1 / 1;
display: flex; flex-direction: column; gap: 24px; padding: 32px;
background: var(--paper-back); color: #111111; border-radius: 2px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
font-family: var(--font-mono); font-weight: 400; font-size: 15px; line-height: 1.6;
transform-origin: 50% 0;
transform: translateY(calc(var(--depth) * var(--step) * -1)) scale(calc(1 - var(--depth) * .045));
z-index: calc(10 - var(--depth));
transition: transform .7s cubic-bezier(.2,.7,.2,1), background-color .4s ease, opacity .35s ease;
}
.home-creative .cr-letter:not(.is-front) { filter: brightness(.96); }
.home-creative .cr-letter.is-front { background: var(--paper); }
.home-creative .cr-letter.is-leaving { opacity: 0; transform: translate(40px, 32px) rotate(3deg); }
.home-creative .cr-letters__nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.home-creative .cr-letters__next { padding: 0; border: 0; background: none; color: var(--text-on-contrast); font-family: var(--font-mono); font-weight: 500; font-size: 13px; }
.home-creative .cr-letters__next span { display: inline-block; transition: transform .25s ease; }
.home-creative .cr-letters__next:hover span { transform: translateX(4px); }
.home-creative .cr-letters__next:focus-visible { outline: 2px solid var(--text-on-contrast); outline-offset: 4px; }
.home-creative .cr-letter p { margin: 0; }
.home-creative .cr-letter__head { display: flex; justify-content: space-between; gap: 16px; font-size: 12px; line-height: 16px; color: #5c5650; }
.home-creative .cr-letter__hello { font-weight: 500; line-height: 20px; }
.home-creative .cr-letter__sign { font-size: 13px; line-height: 17px; color: #5c5650; }
.home-creative .cr-client-names {
display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 32px;
list-style: none; margin: 0; padding: 32px 0 0; border-top: 1px solid var(--border);
font-size: 40px; line-height: 1.07; color: #b3aea8;
}
/* 12.6 Recognition ---------------------------------------------------------------- */
.home-creative .cr-recognition { padding: var(--space-128) 0; }
.home-creative .cr-recognition__layout { display: flex; align-items: flex-start; gap: var(--space-64); }
.home-creative .cr-recognition__intro { flex: 0 0 560px; display: flex; flex-direction: column; gap: var(--space-24); }
.home-creative .cr-recognition__title { font-size: 52px; line-height: 1.05; letter-spacing: -0.03em; }
.home-creative .cr-awards { flex: 1 1 0; margin: 0; border-bottom: 1px solid var(--border); }
.home-creative .cr-recognition__intro { padding-top: 24px; }
.home-creative .cr-awards__group { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 24px 0 24px 232px; border-top: 1px solid var(--border); }
.home-creative .cr-awards dt { position: absolute; left: 0; top: 24px; width: 200px; font-weight: 500; font-size: 17px; line-height: 22px; }
.home-creative .cr-awards dd { display: flex; justify-content: space-between; gap: 16px; margin: 0; font-weight: 400; font-size: 16px; line-height: 21px; color: color-mix(in srgb, var(--text-primary) 72%, transparent); }
.home-creative .cr-awards dd b { font-family: var(--font-mono); font-weight: 400; font-size: 14px; color: var(--text-primary); }
/* 12.7 Team ------------------------------------------------------------------------ */
.home-creative .cr-team { padding: var(--space-128) 0; }
.home-creative .cr-team__head { display: flex; align-items: flex-end; gap: var(--space-64); margin-bottom: 56px; }
.home-creative .cr-team__head p { flex: 0 0 280px; font-size: 16px; font-weight: 400; line-height: 1.5; color: color-mix(in srgb, var(--text-primary) 78%, transparent); }
.home-creative .cr-team__title { flex: 1 1 0; font-size: 60px; line-height: 1; letter-spacing: -0.03em; }
.home-creative .cr-team__grid { --bs-gutter-x: 24px; --bs-gutter-y: 32px; }
.home-creative .cr-person { display: flex; flex-direction: column; gap: 12px; }
.home-creative .cr-person img { width: 100%; aspect-ratio: 312 / 380; object-fit: cover; filter: grayscale(1); transition: filter .4s ease; }
.home-creative .cr-person:hover img { filter: grayscale(0); }
.home-creative .cr-person strong { font-weight: 500; font-size: 17px; line-height: 1.3; }
.home-creative .cr-person em { font-family: var(--font-mono); font-weight: 400; font-size: 12px; color: var(--text-muted); }
/* 12.8 Brief & footer ---------------------------------------------------------------- */
.home-creative .cr-brief { padding: var(--space-128) 0 var(--space-48); }
.home-creative .cr-brief__title { font-size: 205px; line-height: .85; margin-bottom: 40px; }
.home-creative .cr-brief__row { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: var(--space-96); }
.home-creative .cr-brief__field {
flex: 1 1 320px; min-width: 0; height: 56px; padding: 0 24px;
background: transparent; color: var(--text-on-contrast);
border: 1px solid rgba(252, 247, 243, 0.4); border-radius: var(--radius);
font-family: var(--font-body); font-weight: 300; font-size: 16px;
}
.home-creative .cr-brief__field::placeholder { color: rgba(252, 247, 243, 0.72); }
.home-creative .cr-brief__field:focus { outline: none; border-color: var(--text-on-contrast); }
.home-creative .cr-brief__budget { display: flex; align-items: center; gap: 16px; }
.home-creative .cr-brief__budget-label { font-family: var(--font-mono); font-weight: 400; font-size: 12px; color: var(--text-muted); }
.home-creative .cr-chip { position: relative; margin: 0; }
.home-creative .cr-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.home-creative .cr-chip span {
display: inline-flex; align-items: center; height: 56px; padding: 0 20px;
border: 1px solid rgba(252, 247, 243, 0.4); border-radius: var(--radius);
font-family: var(--font-mono); font-weight: 500; font-size: 13px; white-space: nowrap;
transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.home-creative .cr-chip:hover span { border-color: var(--text-on-contrast); }
.home-creative .cr-chip input:checked + span { background: var(--text-on-contrast); color: #111111; border-color: var(--text-on-contrast); }
.home-creative .cr-chip input:focus-visible + span { outline: 2px solid var(--text-on-contrast); outline-offset: 3px; }
.home-creative .cr-brief__send {
display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 32px;
background: var(--text-on-contrast); color: #111111; border: 0; border-radius: var(--radius);
font-family: var(--font-mono); font-weight: 500; font-size: 13px; white-space: nowrap;
}
.home-creative .cr-brief__send:hover .btn-m__icon { transform: translateX(3px); }
.home-creative .cr-brief__send .btn-m__icon { transition: transform .25s ease; }
.home-creative .cr-brief__status { flex-basis: 100%; margin: 0; }
.home-creative .cr-brief__status:empty { display: none; }
[data-bs-theme="dark"] .home-creative .cr-brief__send,
[data-bs-theme="dark"] .home-creative .cr-chip input:checked + span { color: #0f0f0f; }
/* Full-width fit lines stay on the grid edge: no display scrub (motion.js). */
.home-creative [data-no-scrub] { transform: none !important; }
/* 12.9 Responsive ------------------------------------------------------------------ */
@media (max-width: 1199.98px) {
.home-creative .cr-about__media { flex-basis: 420px; }
.home-creative .cr-about__lead { font-size: 42px; }
.home-creative .cr-counter__num { font-size: 200px; }
.home-creative .cr-about__actions { flex-direction: column; align-items: flex-start; }
.home-creative .cr-work__title { font-size: 240px; }
.home-creative .cr-guide__large { flex-basis: 360px; width: 360px; height: 360px; }
.home-creative .cr-clients__layout { flex-direction: column; align-items: flex-start; }
.home-creative .cr-clients__intro { flex-basis: auto; }
.home-creative .cr-recognition__layout { flex-direction: column; align-items: stretch; }
.home-creative .cr-recognition__intro { flex-basis: auto; }
.home-creative .cr-brief__field { flex-basis: 100%; }
}
@media (max-width: 1023.98px) {
.home-creative .cr-sunrise { gap: 40px; }
.home-creative .cr-about__row { flex-direction: column; gap: var(--space-40); }
.home-creative .cr-about__media { flex-basis: auto; width: 100%; height: auto; aspect-ratio: 520 / 360; }
.home-creative .cr-counter { flex-direction: column; align-items: stretch; gap: var(--space-32); }
.home-creative .cr-counter__side { flex-direction: column-reverse; }
.home-creative .cr-counter__num { font-size: 180px; }
.home-creative .cr-about__actions { gap: var(--space-24); }
.home-creative .cr-about__actions p { flex-basis: auto; }
.home-creative .cr-service__go { display: none; }
.home-creative .cr-letters-wrap { flex-basis: auto; width: min(520px, 100%); }
.home-creative .cr-work__title { font-size: 180px; }
.home-creative .cr-year { flex-wrap: wrap; }
.home-creative .cr-year__label { flex-basis: 100%; flex-direction: row; align-items: baseline; gap: 16px; }
.home-creative .cr-year__label h3 { font-size: 56px; line-height: 1; }
.home-creative .cr-card__media { height: auto; aspect-ratio: 342 / 230; }
.home-creative .cr-services-intro { padding: 96px 0; }
.home-creative .cr-services-intro__title { font-size: 48px; }
.home-creative .cr-service { flex-wrap: wrap; gap: 16px 32px; }
.home-creative .cr-service__num { flex-basis: 100%; }
.home-creative .cr-service__name { flex-basis: 100%; font-size: 48px; }
.home-creative .cr-service__text { flex: 1 1 100%; }
.home-creative .cr-guide { flex-wrap: wrap; }
.home-creative .cr-guide__copy { flex-basis: 100%; margin-bottom: var(--space-16); }
.home-creative .cr-guide__small { flex: 1 1 0; width: auto; height: 240px; }
.home-creative .cr-guide__large { flex: 2 1 0; width: auto; height: 400px; }
.home-creative .cr-clients__title { font-size: 48px; }
.home-creative .cr-client-names { justify-content: flex-start; font-size: 34px; }
.home-creative .cr-team__head { flex-direction: column-reverse; align-items: flex-start; gap: var(--space-24); }
.home-creative .cr-team__head p { flex-basis: auto; }
.home-creative .cr-team__title { font-size: 48px; }
.home-creative .cr-brief__title { font-size: 120px; }
}
@media (max-width: 575.98px) {
.home-creative .cr-hero { padding-bottom: var(--space-64); }
.home-creative .cr-sunrise__dates, .home-creative .cr-sun__labels { flex-wrap: wrap; font-size: 12px; }
.home-creative .cr-sun__labels span:nth-child(2) { order: 3; flex-basis: 100%; }
.home-creative .cr-sun__horizon { height: 10px; }
.home-creative .cr-sun__ground { height: 6px; }
.home-creative .cr-about, .home-creative .cr-work, .home-creative .cr-services,
.home-creative .cr-recognition, .home-creative .cr-team { padding: var(--space-96) 0; }
.home-creative .cr-clients { padding: var(--space-96) 0 var(--space-64); }
.home-creative .cr-brief { padding-top: var(--space-96); }
.home-creative .cr-about__lead { font-size: 32px; }
.home-creative .cr-counter__num { font-size: 112px; }
.home-creative .cr-counter__label .t-display { font-size: 44px; }
.home-creative .cr-work__title { font-size: 120px; }
.home-creative .cr-work .container-morrow { gap: var(--space-32); }
.home-creative .cr-work__bar { flex-wrap: wrap; }
.home-creative .cr-card { flex-basis: 100%; }
.home-creative .cr-year { gap: 24px; padding: 32px 0; }
.home-creative .cr-services-intro { padding: 80px 0; }
.home-creative .cr-services-intro__title { font-size: 36px; }
.home-creative .cr-service__name { font-size: 36px; }
.home-creative .cr-guide__small { height: 160px; }
.home-creative .cr-guide__large { height: 220px; }
.home-creative .cr-clients__title { font-size: 36px; }
.home-creative .cr-clients__layout { margin-bottom: var(--space-64); }
.home-creative .cr-letters { --step: 36px; }
.home-creative .cr-letter { padding: 20px; gap: 16px; font-size: 14px; }
.home-creative .cr-letter__head { flex-wrap: wrap; gap: 4px 16px; }
.home-creative .cr-client-names { font-size: 28px; gap: 8px 24px; }
.home-creative .cr-recognition__title { font-size: 36px; }
.home-creative .cr-awards__group { padding-left: 0; }
.home-creative .cr-awards dt { position: static; width: auto; }
.home-creative .cr-team__title { font-size: 36px; }
.home-creative .cr-team__grid { --bs-gutter-x: 16px; }
.home-creative .cr-person strong { font-size: 15px; }
.home-creative .cr-person em { font-size: 11px; }
.home-creative .cr-brief__title { font-size: 64px; margin-bottom: var(--space-32); }
.home-creative .cr-brief__budget { flex-wrap: wrap; gap: 8px; width: 100%; }
.home-creative .cr-brief__budget-label { flex-basis: 100%; }
.home-creative .cr-chip { flex: 1 1 0; }
.home-creative .cr-chip span { width: 100%; justify-content: center; padding: 0 8px; }
.home-creative .cr-brief__send { width: 100%; justify-content: center; }
}
/* ==========================================================================
13. Home — Growth (light/home-growth.html, dark/home-growth.html)
Paper grounds, one deep green, a mint scale for the charts.
========================================================================== */
.home-growth {
--base: #f4f4f1; /* paper */
--surface: #e9eae4; /* statement band */
--contrast: #111411;
--deep: #16302a; /* result band */
--text-primary: #111411;
--text-muted: rgba(17, 20, 17, 0.68);
--text-on-contrast: #f4f1ea;
--border: rgba(17, 20, 17, 0.18);
--accent: #1f3d36; /* green */
--on-accent: #f4f1ea;
--mint: #cfe3d7;
--chart-line: #1f3d36;
/* Chart scale (media mix, funnel): grounds and the ink that sits on them */
--g1: #cfe3d7; --g2: #a8cbb8; --g3: #7fae96; --g4: #f4f1ea;
--g1-ink: #111411; --g4-ink: #111411;
}
[data-bs-theme="dark"] .home-growth,
[data-bs-theme="dark"].home-growth {
--base: #0f0f0f;
--surface: #171717;
--contrast: #262626;
--deep: #16302a;
--text-primary: #f2efe9;
--text-muted: #a8a29a;
--text-on-contrast: #f2efe9;
--border: #34302c;
--accent: #1f3d36;
--on-accent: #f4f1ea;
--chart-line: #cfe3d7;
--g1: #262626; --g4: #262626;
--g1-ink: #f2efe9; --g4-ink: #f2efe9;
}
.home-growth .band--accent { --text-muted: rgba(244, 241, 234, 0.72); --border: rgba(244, 241, 234, 0.25); }
.home-growth .btn-m--accent:hover { background: var(--text-primary); color: var(--base); }
.home-growth .btn-m--outline { border-color: color-mix(in srgb, var(--text-primary) 40%, transparent); }
/* 13.1 Header tagline + hero ------------------------------------------------------ */
.home-growth .gr-header__tagline { margin-inline: auto; color: var(--text-muted); white-space: nowrap; }
.home-growth .gr-hero { padding: 32px 0 var(--space-96); }
.home-growth .gr-hero__inner { display: flex; flex-direction: column; gap: 64px; }
.home-growth .gr-hero .site-header { min-height: 34px; }
.home-growth .gr-hero__copy { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-32); margin-bottom: -16px; }
.home-growth .gr-hero__title { display: flex; flex-direction: column; gap: 8px; white-space: nowrap; }
.home-growth .gr-hero__line-1 { font-size: min(226px, 15.7vw); line-height: .82; }
.home-growth .gr-hero__line-2 { font-size: min(107px, 7.43vw); line-height: .85; }
.home-growth .gr-hero__intro { flex: 0 1 440px; display: flex; flex-direction: column; gap: 24px; }
.home-growth .gr-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; }
.home-growth .gr-hero__actions .btn-m { height: 52px; }
/* Compound curve — the SVG is written by assets/js/home-growth.js
from data-values on .gr-curve. Only colours and sizes live here. */
.home-growth .gr-curve { position: relative; height: 380px; margin-top: 16px; }
.home-growth .gr-curve svg { display: block; width: 100%; height: 100%; overflow: visible; }
.home-growth .gr-curve__caption { position: absolute; left: 0; top: -4px; font-family: var(--font-mono); font-weight: 500; font-size: 13px; color: var(--chart-line); background: var(--base); padding-right: 8px; z-index: 1; }
.home-growth .gr-curve__grid { stroke: color-mix(in srgb, var(--text-primary) 12%, transparent); stroke-width: 1; }
.home-growth .gr-curve__line { fill: none; stroke: var(--chart-line); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.home-growth .gr-curve__dot { fill: var(--base); stroke: var(--chart-line); stroke-width: 2; }
.home-growth .gr-curve__dot--last { fill: var(--chart-line); }
.home-growth .gr-curve__tick { font-family: var(--font-mono); font-weight: 400; font-size: 12px; fill: var(--text-muted); }
/* 13.2 Section heads (channels, method) ------------------------------------------ */
.home-growth .gr-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-32); }
.home-growth .gr-head__title { display: flex; flex-direction: column; gap: 20px; }
.home-growth .gr-head__title h2 { max-width: 720px; margin: 0; font-size: 60px; line-height: 1; letter-spacing: -0.03em; }
.home-growth .gr-head__note { flex: 0 0 300px; margin: 0; font-size: 16px; font-weight: 400; line-height: 1.5; color: color-mix(in srgb, currentColor 78%, transparent); }
/* 13.3 Channels — media-mix bar ----------------------------------------------------- */
.home-growth .gr-channels { padding: var(--space-128) 0; }
.home-growth .gr-channels .container-morrow { display: flex; flex-direction: column; gap: 56px; }
.home-growth .gr-mix { display: flex; gap: 4px; height: 120px; list-style: none; margin: 0; padding: 0; }
.home-growth .gr-mix__seg {
flex: var(--grow, 1) 1 0; min-width: 0; overflow: hidden;
display: flex; flex-direction: column; justify-content: space-between; padding: 20px 24px;
background: var(--c); color: var(--ink, #111411); border-radius: var(--radius); white-space: nowrap; cursor: default;
transition: flex-grow .5s cubic-bezier(.2,.7,.2,1), opacity .3s ease;
}
.home-growth .gr-mix__seg strong { font-weight: 500; font-size: 20px; line-height: 1.3; }
.home-growth .gr-mix__seg span { font-family: var(--font-mono); font-weight: 400; font-size: 14px; }
.home-growth .gr-mix__seg:focus-visible { outline: 2px solid var(--on-accent); outline-offset: 3px; }
.home-growth .gr-mix.is-active .gr-mix__seg:not(.is-on) { opacity: .55; }
.home-growth .gr-notes { display: flex; gap: var(--space-32); }
.home-growth .gr-note { flex: 1 1 0; display: flex; flex-direction: column; gap: 8px; padding-top: 20px; border-top: 1px solid var(--border); transition: opacity .3s ease, border-color .3s ease; }
.home-growth .gr-note h3 { margin: 0; font-family: var(--font-mono); font-weight: 500; font-size: 13px; line-height: 1.3; }
.home-growth .gr-note p { margin: 0; font-size: 17px; line-height: 1.45; color: rgba(244, 241, 234, 0.85); }
.home-growth .gr-notes.is-active .gr-note:not(.is-on) { opacity: .4; }
.home-growth .gr-notes.is-active .gr-note.is-on { border-color: var(--on-accent); }
/* 13.4 Selected work ----------------------------------------------------------------- */
.home-growth .gr-work { padding: var(--space-128) 0; }
.home-growth .gr-work__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-32); margin-bottom: 56px; }
.home-growth .gr-work__title { font-size: min(117px, 8.12vw); line-height: .85; white-space: nowrap; }
.home-growth .gr-work__head .btn-m { height: 52px; }
.home-growth .gr-work__grid { display: flex; gap: 24px; }
.home-growth .gr-work__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 56px; }
.home-growth .gr-work__col--offset { padding-top: 120px; }
.home-growth .gr-case { display: flex; flex-direction: column; gap: 16px; }
.home-growth .gr-case__media { position: relative; display: block; height: 420px; overflow: hidden; }
.home-growth .gr-case--tall .gr-case__media { height: 620px; }
.home-growth .gr-case__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.home-growth .gr-case:hover .gr-case__media img { transform: scale(1.04); }
.home-growth .gr-case__tag { position: absolute; left: 20px; top: 20px; padding: 10px 16px; background: #f4f1ea; color: #1f3d36; border-radius: var(--radius); font-family: var(--font-mono); font-weight: 500; font-size: 13px; line-height: 17px; }
.home-growth .gr-case__meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.home-growth .gr-case__meta strong { font-weight: 500; font-size: 20px; line-height: 1.3; }
.home-growth .gr-case__meta em { font-family: var(--font-mono); font-weight: 400; font-size: 12px; color: var(--text-muted); white-space: nowrap; }
/* 13.5 Statement ------------------------------------------------------------------------ */
.home-growth .gr-statement { background: var(--surface); padding: var(--space-128) 0; }
.home-growth .gr-statement__text { max-width: 1200px; margin: 0; font-size: 64px; line-height: 1.08; letter-spacing: -0.03em; }
.home-growth .gr-statement__text a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
[data-bs-theme="dark"] .home-growth .gr-statement__text a { color: var(--mint); }
/* 13.6 Method — funnel ------------------------------------------------------------------- */
.home-growth .gr-method { padding: var(--space-128) 0; }
.home-growth .gr-method .container-morrow { display: flex; flex-direction: column; gap: var(--space-48); }
.home-growth .gr-funnel { display: flex; flex-direction: column; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; }
.home-growth .gr-stage {
--target: var(--w);
display: flex; align-items: center; gap: var(--space-32); height: 96px; padding: 0 32px;
/* --narrow runs 0 → 1 as the funnel scrolls in (home-growth.js); 1 without JS */
width: calc(100% - (100% - var(--target)) * var(--narrow, 1));
background: var(--c); color: var(--ink, #111411); border-radius: var(--radius);
transition: width 1.1s cubic-bezier(.65, 0, .25, 1) calc(var(--i, 0) * 90ms);
}
/* home-growth.js sets --narrow: 0 until the funnel scrolls in, then 1. */
.home-growth .gr-funnel.is-wide .gr-stage { --narrow: 0; }
.home-growth .gr-stage__num { flex: 0 0 40px; font-family: var(--font-mono); font-weight: 400; font-size: 14px; }
.home-growth .gr-stage h3 { flex: 0 0 200px; font-size: 44px; line-height: 1.2; }
.home-growth .gr-stage p { flex: 1 1 0; min-width: 0; margin: 0; font-size: 16px; font-weight: 400; }
/* 13.7 Result ------------------------------------------------------------------------------ */
.home-growth .gr-result { background: var(--deep); color: #f4f1ea; padding: var(--space-128) 0; --text-muted: rgba(244, 241, 234, 0.72); }
.home-growth .gr-result__layout { display: flex; align-items: flex-end; gap: var(--space-48); }
.home-growth .gr-result__copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-24); }
.home-growth .gr-result__figure { font-size: 213px; letter-spacing: -0.06em; line-height: .9; white-space: nowrap; }
.home-growth .gr-result__text { max-width: 520px; font-size: 22px; line-height: 1.4; color: rgba(244, 241, 234, 0.85); }
.home-growth .gr-result__media { flex: 0 0 560px; width: 560px; height: 400px; object-fit: cover; border-radius: var(--radius); }
/* 13.8 Journal ------------------------------------------------------------------------------ */
.home-growth .gr-journal { padding: var(--space-128) 0; }
.home-growth .gr-journal__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-32); margin-bottom: 40px; }
.home-growth .gr-journal__title { font-size: min(110px, 7.64vw); line-height: .85; white-space: nowrap; }
.home-growth .gr-journal__head .btn-m { height: 52px; }
.home-growth .gr-posts { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--border); }
.home-growth .gr-post { display: flex; align-items: center; gap: var(--space-32); padding: 32px 0; border-top: 1px solid var(--border); }
.home-growth .gr-post:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.home-growth .gr-post img { flex: 0 0 220px; width: 220px; height: 140px; object-fit: cover; border-radius: var(--radius); }
.home-growth .gr-post h3 { flex: 1 1 0; min-width: 0; font-size: 36px; line-height: 1.3; letter-spacing: -0.02em; transition: transform .35s ease; }
.home-growth .gr-post:hover h3 { transform: translateX(8px); }
.home-growth .gr-post span { flex: 0 0 140px; font-family: var(--font-mono); font-weight: 400; font-size: 12px; color: var(--text-muted); }
.home-growth .gr-post span:last-child { text-align: right; }
.home-growth .gr-post img { transition: filter .4s ease; }
.home-growth .gr-post:hover img { filter: saturate(1.15) contrast(1.05); }
/* 13.9 Audit form & footer --------------------------------------------------------------- */
.home-growth .gr-audit { padding: var(--space-128) 0 var(--space-48); }
.home-growth .gr-audit__block { display: flex; flex-direction: column; gap: var(--space-32); margin-bottom: 80px; }
.home-growth .gr-audit__title { font-size: 178px; line-height: .82; }
.home-growth .gr-audit__text { max-width: 600px; font-size: 22px; line-height: 1.4; color: rgba(244, 241, 234, 0.85); }
.home-growth .gr-audit__row { display: flex; flex-wrap: wrap; gap: 16px; }
.home-growth .gr-audit__field {
flex: 1 1 320px; min-width: 0; height: 60px; padding: 0 24px;
background: transparent; color: #f4f1ea; border: 1px solid rgba(244, 241, 234, 0.4); border-radius: var(--radius);
font-family: var(--font-mono); font-weight: 400; font-size: 15px;
}
.home-growth .gr-audit__field::placeholder { color: rgba(244, 241, 234, 0.72); }
.home-growth .gr-audit__field:focus { outline: none; border-color: #f4f1ea; }
.home-growth .gr-audit__field[aria-invalid="true"] { border-color: #f2b8a0; }
.home-growth .gr-audit__send {
display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 60px; padding: 0 32px;
background: #f4f1ea; color: #1f3d36; border: 0; border-radius: var(--radius);
font-family: var(--font-mono); font-weight: 500; font-size: 13px; white-space: nowrap;
}
.home-growth .gr-audit__send .btn-m__icon { transition: transform .25s ease; }
.home-growth .gr-audit__send:hover .btn-m__icon { transform: translateX(3px); }
.home-growth .gr-audit__status { flex-basis: 100%; color: rgba(244, 241, 234, 0.85); }
.home-growth .gr-audit__status:empty { display: none; }
.home-growth .gr-audit .site-footer__brand p { color: rgba(244, 241, 234, 0.82); }
/* Full-width fit lines stay on the grid edge: no display scrub (motion.js). */
.home-growth [data-no-scrub] { transform: none !important; }
/* 13.10 Responsive ------------------------------------------------------------------------ */
@media (max-width: 1199.98px) {
.home-growth .gr-hero__copy { flex-direction: column; align-items: flex-start; gap: var(--space-40); margin-bottom: 0; }
.home-growth .gr-hero__intro { flex: 0 0 auto; max-width: 560px; }
.home-growth .gr-hero__line-1 { font-size: calc((100vw - var(--gutter) * 2) * 0.315); }
.home-growth .gr-hero__line-2 { font-size: calc((100vw - var(--gutter) * 2) * 0.15); }
.home-growth .gr-curve { height: 320px; }
.home-growth .gr-statement__text { font-size: 52px; }
.home-growth .gr-result__figure { font-size: 160px; }
.home-growth .gr-result__media { flex-basis: 420px; width: 420px; height: 340px; }
.home-growth .gr-post h3 { font-size: 30px; }
.home-growth .gr-audit__title { font-size: 140px; }
}
@media (max-width: 1023.98px) {
.home-growth .gr-header__tagline { display: none; }
.home-growth .gr-hero__inner { gap: var(--space-48); }
.home-growth .gr-curve { height: 280px; margin-top: 48px; }
.home-growth .gr-curve__caption { left: 0; top: -32px; }
.home-growth .gr-head { flex-direction: column; align-items: flex-start; gap: var(--space-24); }
.home-growth .gr-head__note { flex-basis: auto; max-width: 420px; }
.home-growth .gr-head__title h2 { font-size: 48px; }
.home-growth .gr-mix { height: 104px; }
.home-growth .gr-mix__seg { padding: 16px; }
.home-growth .gr-mix__seg strong { font-size: 17px; }
.home-growth .gr-notes { flex-wrap: wrap; gap: 24px 32px; }
.home-growth .gr-note { flex: 1 1 calc(50% - 16px); }
.home-growth .gr-work__head { flex-direction: column; align-items: flex-start; gap: var(--space-24); }
.home-growth .gr-work__title { font-size: 96px; white-space: normal; }
.home-growth .gr-work__col { gap: var(--space-40); }
.home-growth .gr-work__col--offset { padding-top: 64px; }
.home-growth .gr-case__media, .home-growth .gr-case--tall .gr-case__media { height: auto; aspect-ratio: 648 / 620; }
.home-growth .gr-case:not(.gr-case--tall) .gr-case__media { aspect-ratio: 648 / 420; }
.home-growth .gr-case__meta { flex-direction: column; gap: 6px; }
.home-growth .gr-case__meta strong { font-size: 17px; }
.home-growth .gr-statement { padding: var(--space-96) 0; }
.home-growth .gr-statement__text { font-size: 40px; }
.home-growth .gr-stage { --target: calc(var(--w) * 0.4 + 60%); gap: 16px 24px; padding: 0 24px; }
.home-growth .gr-stage h3 { flex-basis: 150px; font-size: 36px; }
.home-growth .gr-result__layout { flex-direction: column; align-items: stretch; }
.home-growth .gr-result__figure { font-size: 22vw; }
.home-growth .gr-result__media { flex-basis: auto; width: 100%; height: auto; aspect-ratio: 560 / 400; }
.home-growth .gr-journal__head { flex-direction: column; align-items: flex-start; gap: var(--space-24); }
.home-growth .gr-journal__title { font-size: 88px; white-space: normal; }
.home-growth .gr-post { flex-wrap: wrap; gap: 12px 24px; }
.home-growth .gr-post img { flex-basis: 180px; width: 180px; height: 116px; }
.home-growth .gr-post h3 { flex-basis: calc(100% - 204px); font-size: 26px; }
.home-growth .gr-post span { flex: 0 0 auto; }
.home-growth .gr-post span:first-of-type { margin-left: 204px; }
.home-growth .gr-audit__title { font-size: 96px; }
}
@media (max-width: 575.98px) {
.home-growth .gr-hero { padding-bottom: var(--space-64); }
.home-growth .gr-hero__actions .btn-m { flex: 1 1 auto; }
.home-growth .gr-curve { height: 220px; margin-top: 32px; }
.home-growth .gr-curve__tick { font-size: 11px; }
.home-growth .gr-channels, .home-growth .gr-work, .home-growth .gr-method,
.home-growth .gr-result, .home-growth .gr-journal { padding: var(--space-96) 0; }
.home-growth .gr-audit { padding-top: var(--space-96); }
.home-growth .gr-channels .container-morrow { gap: var(--space-40); }
.home-growth .gr-head__title h2 { font-size: 36px; }
.home-growth .gr-mix { flex-direction: column; height: auto; }
.home-growth .gr-mix__seg { flex: none; width: calc(var(--share) * 1% + 34%); max-width: 100%; height: 64px; flex-direction: row; align-items: center; }
.home-growth .gr-note { flex-basis: 100%; }
.home-growth .gr-work__grid { flex-direction: column; gap: var(--space-40); }
.home-growth .gr-work__col--offset { padding-top: 0; }
.home-growth .gr-work__title { white-space: normal; font-size: 64px; }
.home-growth .gr-statement__text { font-size: 30px; }
.home-growth .gr-stage { --target: calc(var(--w) * 0.3 + 70%); height: auto; min-height: 88px; flex-wrap: wrap; padding: 16px; gap: 4px 16px; }
.home-growth .gr-stage__num { flex-basis: auto; }
.home-growth .gr-stage h3 { flex-basis: auto; font-size: 30px; }
.home-growth .gr-stage p { flex-basis: 100%; font-size: 14px; }
.home-growth .gr-result__figure { font-size: 25vw; }
.home-growth .gr-result__text { font-size: 18px; }
.home-growth .gr-journal__title { white-space: normal; font-size: 56px; }
.home-growth .gr-post { padding: 24px 0; }
.home-growth .gr-post span:last-child { text-align: left; }
.home-growth .gr-post img { flex-basis: 100%; width: 100%; height: auto; aspect-ratio: 220 / 140; }
.home-growth .gr-post h3 { flex-basis: 100%; font-size: 24px; }
.home-growth .gr-post span:first-of-type { margin-left: 0; }
.home-growth .gr-audit__title { font-size: 56px; }
.home-growth .gr-audit__text { font-size: 18px; }
.home-growth .gr-audit__send { width: 100%; }
}
/* ==========================================================================
14. Home — Design (light/home-design.html, dark/home-design.html)
Paper, ink, plum and pink. Every selector is scoped to .home-design.
========================================================================== */
/* 14.1 Page tokens ------------------------------------------------------------ */
.home-design {
--base: #f2eee9; /* paper */
--surface: #e7e1da; /* index + bleed band */
--sheet: #fbf9f6; /* proof sheet and spec cards */
--guide: rgba(244, 182, 201, 0.22);
--ink-band: #2c0f28; /* contact sheet + brief bands */
--plum: #3b1535;
--pink: #f4b6c9;
--contrast: #1a1016;
--text-primary: #1a1016;
--text-muted: rgba(26, 16, 22, 0.7);
--text-on-contrast: #fbf9f6;
--border: rgba(26, 16, 22, 0.15);
--accent: #3b1535;
--accent-text: #3b1535; /* plum used as text colour (headings, counts) */
--on-accent: #fbf9f6;
}
[data-bs-theme="dark"] .home-design {
--base: #171717;
--surface: #1f1f1f;
--sheet: #1c1c1c;
--guide: rgba(244, 182, 201, 0.04);
--contrast: #0f0f0f;
--text-primary: #f2efe9;
--text-muted: #a8a29a;
--border: #34302c;
--accent: #3b1535;
--accent-text: #f2efe9;
--on-accent: #fbf9f6;
}
[data-bs-theme="dark"] .home-design .spec { background: #0f0f0f; }
/* Plum-black bands (contact sheet, brief + footer) */
.home-design .design-ink {
background: var(--ink-band);
color: #fbf9f6;
--text-muted: rgba(251, 249, 246, 0.7);
--border: rgba(251, 249, 246, 0.22);
}
.home-design .btn-m--ghost { border-color: rgba(251, 249, 246, 0.45); color: #fbf9f6; height: 52px; }
.home-design .btn-m--ghost:hover { border-color: var(--pink); color: var(--pink); }
.home-design .btn-m--accent:hover { background: var(--pink); color: #1a1016; }
/* Shared section header: label + title left, note or button right */
.home-design .design-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-32); margin-bottom: var(--space-48); }
.home-design .design-head__title { display: flex; flex-direction: column; gap: var(--space-16); min-width: 0; }
.home-design .design-head__heading { font-size: 60px; letter-spacing: -0.03em; line-height: 1; max-width: 700px; }
.home-design .design-head__heading--wide { max-width: 760px; }
.home-design .design-head__note { flex: 0 0 320px; margin: 0; font-size: 16px; font-weight: 400; line-height: 1.5; color: color-mix(in srgb, var(--text-primary) 78%, transparent); }
/* 14.2 Hero — proof sheet ------------------------------------------------------
Geometry (desktop): sheet inset 40px, 700 tall; crop marks 28px long,
8px off the corner; slug line 12px under the sheet. */
.home-design .design-hero { padding: 32px 0 var(--space-96); }
.home-design .design-hero__inner { display: flex; flex-direction: column; gap: var(--space-48); }
.home-design .proof {
--inset: 40px; --mark: 28px; --off: 8px; --gut: 20px; --cols: 12;
position: relative;
padding: var(--inset) var(--inset) 32px;
}
.home-design .proof__sheet { position: relative; height: 700px; background: var(--sheet); }
.home-design .proof__guides {
position: absolute; inset: 0;
display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: var(--gut);
}
.home-design .proof__guides span { background: var(--guide); animation: design-guide .9s ease both; animation-delay: calc(var(--i) * 60ms + .2s); }
.home-design .proof__guides span:nth-child(n + 13) { display: none; }
/* Crop marks: each corner draws one horizontal and one vertical hairline */
.home-design .proof__corner { position: absolute; width: 0; height: 0; color: var(--text-primary); z-index: 1; }
.home-design .proof__corner::before,
.home-design .proof__corner::after { content: ""; position: absolute; background: currentColor; animation: design-draw .6s cubic-bezier(.2,.7,.2,1) both .1s; }
.home-design .proof__corner::before { top: 0; width: var(--mark); height: 1px; }
.home-design .proof__corner::after { left: 0; width: 1px; height: var(--mark); }
.home-design .proof__corner--tl { left: 0; top: 0; }
.home-design .proof__corner--tr { right: 0; top: 0; }
.home-design .proof__corner--bl { left: 0; bottom: 0; }
.home-design .proof__corner--br { right: 0; bottom: 0; }
.home-design .proof__corner--tl::before, .home-design .proof__corner--bl::before { right: var(--off); transform-origin: right; }
.home-design .proof__corner--tr::before, .home-design .proof__corner--br::before { left: var(--off); transform-origin: left; }
.home-design .proof__corner--tl::after, .home-design .proof__corner--tr::after { bottom: var(--off); transform-origin: bottom; }
.home-design .proof__corner--bl::after, .home-design .proof__corner--br::after { top: var(--off); transform-origin: top; }
.home-design .proof__corner--tl::before, .home-design .proof__corner--tr::before,
.home-design .proof__corner--bl::before, .home-design .proof__corner--br::before { --axis: scaleX(0); }
.home-design .proof__corner--tl::after, .home-design .proof__corner--tr::after,
.home-design .proof__corner--bl::after, .home-design .proof__corner--br::after { --axis: scaleY(0); }
.home-design .proof__target { position: absolute; left: 50%; top: 1px; width: 32px; height: 32px; transform: translateX(-50%); color: var(--text-primary); animation: design-spin .8s cubic-bezier(.2,.7,.2,1) both .3s; }
.home-design .proof__content { position: relative; height: 100%; padding: 40px 32px; }
.home-design .proof__title { color: var(--text-primary); }
.home-design .proof__title-1 { font-size: clamp(120px, 20.56vw, 296px); line-height: .8; letter-spacing: -0.01em; white-space: nowrap; }
.home-design .proof__title-2 { font-size: clamp(40px, 5.14vw, 74px); line-height: .9; white-space: nowrap; }
.home-design .proof__media {
position: absolute; right: 0; bottom: 40px;
width: calc((100% - 11 * var(--gut)) / 12 * 4 + 3 * var(--gut)); height: 420px; overflow: hidden;
}
.home-design .proof__media img { width: 100%; height: 100%; object-fit: cover; }
.home-design .proof__lead { position: absolute; left: 32px; bottom: 40px; width: 505px; max-width: 45%; margin: 0; font-size: 20px; line-height: 1.4; }
.home-design .proof__slug {
display: flex; justify-content: space-between; gap: var(--space-16);
padding: 12px 16px 0; font-family: var(--font-mono); font-size: 12px; color: color-mix(in srgb, var(--text-primary) 72%, transparent);
}
.home-design .proof__checks { display: flex; gap: 24px; }
/* Approval tick boxes: pressing one stamps the sheet (home-design.js). */
.home-design .proof__check { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.home-design .proof__check::before { content: ""; width: 11px; height: 11px; border: 1px solid currentColor; border-radius: 2px; background: transparent center / 9px no-repeat; transition: background-color .2s ease, border-color .2s ease; }
.home-design .proof__check:hover { color: var(--text-primary); }
.home-design .proof__check[aria-pressed="true"] { color: var(--text-primary); }
.home-design .proof__check[aria-pressed="true"]::before { border-color: var(--accent); background-color: var(--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2 4 7.5l4.5-5' fill='none' stroke='%23fbf9f6' stroke-width='1.6'/%3E%3C/svg%3E"); }
.home-design .proof__check:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.home-design .proof__stamp {
position: absolute; left: 40%; top: 60%; z-index: 3; pointer-events: none;
padding: 10px 16px 8px; border: 4px solid currentColor; border-radius: var(--radius);
color: var(--accent-text); font-family: var(--font-display); font-weight: 900; font-size: 64px; line-height: 1; text-transform: uppercase; letter-spacing: .02em;
mix-blend-mode: multiply; opacity: 0; transform: translate(-50%, -50%) rotate(-9deg) scale(1.6);
}
.home-design .proof__stamp.is-on { opacity: .88; transform: translate(-50%, -50%) rotate(-7deg); animation: design-stamp .45s cubic-bezier(.2,.9,.3,1.2) both; }
.home-design .proof__stamp[data-kind="Changes"] { color: #b3203f; }
[data-bs-theme="dark"] .home-design .proof__stamp { mix-blend-mode: normal; color: var(--pink); }
@keyframes design-stamp { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-9deg) scale(1.6); } 60% { opacity: .92; transform: translate(-50%, -50%) rotate(-7deg) scale(.96); } 100% { opacity: .88; transform: translate(-50%, -50%) rotate(-7deg) scale(1); } }
@keyframes design-guide { from { opacity: 0; transform: scaleY(.2); } to { opacity: 1; transform: none; } }
@keyframes design-draw { from { transform: var(--axis); } to { transform: none; } }
@keyframes design-spin { from { opacity: 0; transform: translateX(-50%) rotate(-90deg); } to { opacity: 1; transform: translateX(-50%) rotate(0); } }
/* 14.3 Contact sheet + loupe ------------------------------------------------ */
.home-design .contact-sheet { overflow-x: clip; }
.home-design .contact-sheet__title { font-size: 150px; line-height: .85; color: #fbf9f6; }
.home-design .sheet-grid-wrap { position: relative; padding-bottom: 40px; }
.home-design .sheet-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 24px; }
.home-design .frame a { display: flex; flex-direction: column; gap: 10px; color: #fbf9f6; }
.home-design .frame__media { display: block; aspect-ratio: 312 / 380; border: 1px solid rgba(251, 249, 246, 0.35); overflow: hidden; }
.home-design .frame__media img { width: 100%; height: 100%; object-fit: cover; }
.home-design .frame__cap { display: flex; align-items: baseline; font-size: 15px; font-weight: 400; line-height: 1.2; }
.home-design .frame__cap b { flex: 0 0 48px; font-family: var(--font-mono); font-weight: 500; font-size: 12px; color: var(--pink); }
.home-design .frame a:hover .frame__cap { color: var(--pink); }
.home-design .frame a:focus-visible { outline: 2px solid var(--pink); outline-offset: 4px; }
.home-design .loupe { --size: 240px; position: absolute; left: 0; top: 0; width: var(--size); height: var(--size); pointer-events: none; will-change: transform; z-index: 2; }
.home-design .loupe__lens {
position: absolute; inset: 0; border-radius: 50%;
border: 3px solid var(--pink); background-color: var(--ink-band); overflow: hidden;
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
}
.home-design .loupe__zoom { position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-weight: 500; font-size: 12px; color: var(--pink); white-space: nowrap; }
.home-design .loupe:not(.is-ready) { opacity: 0; }
.home-design .loupe.is-returning, .home-design .loupe.is-returning .loupe__copy { transition: transform .7s cubic-bezier(.2,.7,.2,1); }
/* Over the contact sheet the loupe replaces the site cursor (motion.js). */
.home-design:has(.sheet-grid-wrap:hover) .m-cursor { opacity: 0 !important; }
.home-design .loupe__copy { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
/* 14.4 Services — spec tables ----------------------------------------------- */
.home-design .design-services .design-head { margin-bottom: 56px; }
.home-design .specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); align-items: stretch; }
.home-design .spec { background: var(--sheet); padding: 24px 24px 12px; }
.home-design .spec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0; padding-bottom: 24px; color: var(--accent-text); font-size: 56px; line-height: 1.2; }
.home-design .spec__head span { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; }
.home-design .spec__head b { font-family: var(--font-mono); font-weight: 200; }
.home-design .spec__rows { margin: 0; }
.home-design .spec__rows > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 0; padding: 12px 0; border-top: 1px solid var(--border); }
.home-design .spec__rows dt { flex: 0 0 120px; font-family: var(--font-mono); font-weight: 400; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.home-design .spec__rows dd { flex: 1 1 0; margin: 0; text-align: right; font-weight: 400; font-size: 15px; line-height: 1.25; }
/* 14.5 Full-bleed image + colour bar ----------------------------------------- */
.home-design .design-bleed { background: var(--surface); }
.home-design .design-bleed__media { height: 620px; }
.home-design .design-bleed__media img { width: 100%; height: 100%; object-fit: cover; }
.home-design .colour-bar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, 1fr); }
.home-design .colour-bar li { height: 44px; padding: 10px 0 0 12px; background: var(--c); color: var(--t); font-family: var(--font-mono); font-weight: 500; font-size: 11px; line-height: 1.3; white-space: nowrap; overflow: hidden; }
/* 14.6 Index A–Z ------------------------------------------------------------- */
.home-design .design-index { background: var(--surface); }
.home-design .design-index__note { font-size: 12px; white-space: nowrap; }
.home-design .az { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--space-24); }
.home-design .az__col { list-style: none; margin: 0; padding: 0; }
.home-design .az__col a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--text-primary) 18%, transparent); }
.home-design .az__col span { font-family: var(--font-display); font-weight: 900; font-size: 34px; line-height: 1.2; text-transform: uppercase; transition: transform .3s ease, color .3s ease; }
.home-design .az__col b { font-family: var(--font-mono); font-weight: 400; font-size: 14px; color: var(--accent-text); }
.home-design .az__col a:hover span { transform: translateX(8px); color: var(--accent-text); }
/* 14.7 About ------------------------------------------------------------------ */
.home-design .design-about__layout { display: flex; align-items: flex-end; gap: 80px; }
.home-design .design-about__copy { flex: 1 1 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-32); }
.home-design .design-about__lead { font-size: 48px; line-height: 1.1; letter-spacing: -0.03em; }
.home-design .design-about__copy .btn-m { height: 52px; }
.home-design .design-about__media { flex: 0 0 440px; display: flex; flex-direction: column; gap: 12px; }
.home-design .design-about__media img { width: 100%; aspect-ratio: 440 / 560; height: auto; object-fit: cover; }
.home-design .design-about__media figcaption { font-size: 12px; }
/* 14.8 Recognition by year ----------------------------------------------------- */
.home-design .design-awards {
background: var(--plum); color: #fbf9f6;
--text-muted: rgba(251, 249, 246, 0.7);
}
.home-design .design-awards__head { display: flex; justify-content: space-between; gap: 16px; padding-bottom: var(--space-48); }
.home-design .years { list-style: none; margin: 0; padding: 0; }
.home-design .year { display: flex; align-items: center; gap: var(--space-48); padding: 24px 0; border-top: 1px solid rgba(251, 249, 246, 0.22); }
.home-design .year__num { flex: 0 0 300px; margin: 0; font-family: var(--font-mono); font-weight: 200; font-size: 96px; line-height: 1.32; color: var(--pink); }
.home-design .year__text { flex: 1 1 0; margin: 0; font-size: 22px; line-height: 1.4; }
/* 14.9 Brief drop zone + footer ---------------------------------------------- */
.home-design .design-brief { padding: var(--space-128) 0 var(--space-48); }
.home-design .brief { display: flex; flex-direction: column; gap: var(--space-32); margin-bottom: 80px; }
.home-design .brief__title { font-size: min(190px, 13.2vw); line-height: .82; color: #fbf9f6; white-space: nowrap; text-wrap: balance; }
.home-design .dropzone {
position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px;
padding: 64px 24px; margin: 0; text-align: center; cursor: pointer;
border: 2px dashed var(--pink); border-radius: var(--radius);
transition: background-color .25s ease, border-color .25s ease;
}
.home-design .dropzone:hover, .home-design .dropzone.is-over { background: rgba(244, 182, 201, 0.08); }
.home-design .dropzone.is-over { border-style: solid; }
.home-design .dropzone:focus-within { outline: 2px solid var(--pink); outline-offset: 4px; }
.home-design .dropzone.is-error { border-color: #ff8f8f; }
.home-design .dropzone__input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.home-design .dropzone__title { font-size: 32px; font-weight: 300; letter-spacing: -0.01em; line-height: 1.2; }
.home-design .dropzone__title u { text-decoration-thickness: 1px; text-underline-offset: 5px; }
.home-design .dropzone__hint { font-family: var(--font-mono); font-size: 12px; color: rgba(251, 249, 246, 0.72); }
.home-design .brief__actions { display: flex; align-items: center; gap: var(--space-24); }
.home-design .brief__actions[hidden] { display: none; }
.home-design .brief__clear { padding: 0; border: 0; background: none; color: rgba(251, 249, 246, 0.8); font-family: var(--font-mono); font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.home-design .brief__clear:hover { color: var(--pink); }
.home-design .dropzone.is-ready { border-style: solid; background: rgba(244, 182, 201, 0.06); }
.home-design .dropzone.is-sent { border-color: rgba(251, 249, 246, 0.35); border-style: solid; }
.home-design .design-brief .site-footer__brand p { color: rgba(251, 249, 246, 0.8); }
.home-design .design-brief .site-footer__col h3,
.home-design .design-brief .site-footer__legal { color: rgba(251, 249, 246, 0.75); }
/* Titles that sit on the grid edge: no display scrub (motion.js). */
.home-design [data-no-scrub] { transform: none !important; }
/* 14.10 Responsive -------------------------------------------------------------- */
@media (max-width: 1199.98px) {
.home-design .contact-sheet__title { font-size: 120px; }
.home-design .spec__head { font-size: 44px; }
.home-design .az__col span { font-size: 28px; }
.home-design .design-about__lead { font-size: 40px; }
}
@media (max-width: 1023.98px) {
.home-design .design-hero { padding: 48px 0 56px; }
.home-design .proof { --inset: 20px; --mark: 14px; --off: 6px; --gut: 16px; --cols: 8; padding-bottom: 0; }
.home-design .proof__sheet { height: 588px; }
.home-design .proof__guides span:nth-child(n + 9) { display: none; }
.home-design .proof__target { width: 26px; height: 26px; top: -2px; }
.home-design .proof__content { padding: 24px 24px; }
.home-design .proof__title-1 { font-size: 23.4vw; }
.home-design .proof__title-2 { font-size: 7.55vw; }
.home-design .proof__media { right: 24px; bottom: 28px; width: 41.7%; height: 300px; }
.home-design .proof__lead { left: 24px; bottom: 28px; width: 272px; max-width: 45%; font-size: 17px; }
.home-design .proof__slug { padding: 10px 12px 0; font-size: 11px; }
.home-design .proof__dims { display: none; }
.home-design .design-head { flex-wrap: wrap; }
.home-design .design-head__heading { font-size: 40px; }
.home-design .design-head--split .design-head__note { flex: 1 1 100%; }
.home-design .contact-sheet__title { font-size: 72px; width: min-content; }
.home-design .contact-sheet .design-head { flex-wrap: nowrap; align-items: flex-end; }
.home-design .sheet-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
.home-design .sheet-grid-wrap { padding-bottom: 0; }
.home-design .loupe { --size: 160px; }
.home-design .specs { grid-template-columns: 1fr; gap: var(--space-16); }
.home-design .design-bleed__media { height: 443px; }
/* Below desktop the three lists flow as one A–Z in two columns. */
.home-design .az { display: block; column-count: 2; column-gap: var(--space-24); }
.home-design .az__col { display: contents; }
.home-design .az__col li { break-inside: avoid; }
.home-design .az__col a { flex-direction: column; gap: 2px; }
.home-design .az__col span { font-size: 26px; }
.home-design .design-about__layout { gap: 40px; }
.home-design .design-about__media { flex-basis: 45%; }
.home-design .design-about__lead { font-size: 30px; }
.home-design .year { flex-direction: column; align-items: flex-start; gap: 12px; }
.home-design .year__num { flex-basis: auto; font-size: 64px; line-height: 1.2; }
.home-design .year__text { font-size: 17px; }
.home-design .brief__title { font-size: 15.6vw; white-space: normal; }
.home-design .dropzone__title { font-size: 26px; }
}
@media (max-width: 575.98px) {
.home-design .design-hero { padding: 48px 0 56px; }
.home-design .proof { --inset: 12px; --mark: 8px; --off: 4px; --gut: 12px; --cols: 4; }
.home-design .proof__sheet { height: auto; }
.home-design .proof__guides span:nth-child(n + 5) { display: none; }
.home-design .proof__target { width: 18px; height: 18px; top: -3px; }
.home-design .proof__content { display: flex; flex-direction: column; padding: 16px 12px 24px; }
.home-design .proof__title { color: var(--accent-text); }
.home-design .proof__title-1 { font-size: 26.7vw; }
.home-design .proof__title-2 { font-size: 7.7vw; font-weight: 100; color: var(--text-primary); }
.home-design .proof__media { position: relative; right: auto; bottom: auto; width: 100%; height: auto; aspect-ratio: 294 / 220; margin-top: 24px; }
.home-design .proof__lead { position: static; width: auto; max-width: none; margin-top: 20px; font-size: 15px; }
.home-design .proof__slug { padding: 8px 12px 0; font-size: 10px; }
.home-design .proof__long { display: none; }
.home-design .proof__checks { gap: 16px; }
.home-design .design-head__heading { font-size: 30px; }
.home-design .design-head .btn-m--ghost { width: 100%; }
.home-design .sheet-grid { gap: 24px 12px; }
.home-design .frame__cap { flex-direction: column; gap: 4px; font-size: 13px; }
.home-design .frame__cap b { flex: none; }
.home-design .loupe { --size: 96px; }
.home-design .loupe__zoom { display: none; }
.home-design .specs { grid-template-columns: 1fr; }
.home-design .spec__head { font-size: 40px; flex-direction: row; }
.home-design .contact-sheet .design-head { flex-wrap: wrap; }
.home-design .contact-sheet__title { font-size: 64px; }
.home-design .design-bleed__media { height: 272px; }
.home-design .colour-bar { grid-template-columns: repeat(6, 1fr); }
.home-design .colour-bar li { height: 36px; padding: 8px 0 0 8px; }
.home-design .az { column-gap: 16px; }
.home-design .proof__stamp { font-size: 30px; border-width: 3px; padding: 6px 10px 4px; top: 52%; }
.home-design .az__col a { flex-direction: row; }
.home-design .az__col span { font-size: 20px; }
.home-design .az__col b { font-size: 12px; }
.home-design .design-index__note { white-space: normal; }
.home-design .design-about__layout { flex-direction: column; align-items: stretch; }
.home-design .design-about__copy .btn-m { align-self: stretch; }
.home-design .design-about__lead { font-size: 26px; }
.home-design .year__num { font-size: 44px; }
.home-design .year__text { font-size: 17px; }
.home-design .brief__title { font-size: 17.4vw; }
.home-design .dropzone { padding: 40px 16px; align-items: flex-start; text-align: left; }
.home-design .dropzone__title { font-size: 22px; }
}
/* ==========================================================================
15. Home — Brand (light/home-brand.html, dark/home-brand.html)
Bone, ink and two teals. Every selector is scoped to .home-brand.
========================================================================== */
/* 15.1 Page tokens ------------------------------------------------------------ */
.home-brand {
--base: #efece6; /* bone */
--surface: #e4e0d8; /* agency band */
--contrast: #121a1a;
--text-primary: #121a1a;
--text-muted: rgba(18, 26, 26, 0.7);
--text-on-contrast: #f4f2ec;
--border: rgba(18, 26, 26, 0.2);
--accent: #0e4f4f; /* teal */
--accent-text: #0e4f4f;
--on-accent: #f4f2ec;
--teal-deep: #0a3b3b;
--teal-light: #9fd3cc;
--cream: #f4f2ec;
--board: #121a1a;
--mark-card: #f4f2ec;
--mark-ink: #0e4f4f;
}
[data-bs-theme="dark"] .home-brand {
--base: #171717;
--surface: #1f1f1f;
--text-primary: #f2efe9;
--text-muted: #a8a29a;
--border: #34302c;
--accent: #0e4f4f;
--accent-text: #f2efe9;
--on-accent: #f4f2ec;
--board: #1f1f1f;
--mark-card: #171717;
--mark-ink: #f2efe9;
}
/* Teal bands (blocks, tone, name preview) carry light text */
.home-brand .brand-blocks,
.home-brand .brand-tone,
.home-brand .brand-end {
color: var(--cream);
--text-muted: rgba(244, 242, 236, 0.7);
--border: rgba(244, 242, 236, 0.2);
}
.home-brand .btn-m--accent:hover { background: var(--teal-light); color: #121a1a; }
/* Shared section header */
.home-brand .brand-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-32); margin-bottom: var(--space-48); }
.home-brand .brand-head__title { display: flex; flex-direction: column; gap: var(--space-16); min-width: 0; }
.home-brand .brand-head__heading { font-size: 60px; line-height: 1; letter-spacing: -0.03em; max-width: 900px; text-wrap: balance; }
.home-brand .brand-head__heading--wide { max-width: 820px; }
/* 15.2 Hero — split-flap board ------------------------------------------------ */
.home-brand .brand-hero { padding: 32px 0 var(--space-96); }
.home-brand .brand-hero__inner { display: flex; flex-direction: column; gap: var(--space-48); }
.home-brand .brand-hero__top { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-32); }
.home-brand .brand-hero__title { max-width: 820px; font-size: 64px; line-height: 1; letter-spacing: -0.03em; }
.home-brand .brand-hero__meta { line-height: 1.55; white-space: nowrap; }
.home-brand .brand-hero__caption { display: flex; justify-content: space-between; gap: var(--space-16); }
.home-brand .brand-hero__media { height: 520px; overflow: hidden; }
.home-brand .brand-hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* Board: 12 cells of 100 × 190 at 1440, 8px apart, 16px frame.
Cells scale with the board: main.js writes its width into --w. */
.home-brand .flapboard {
--cols: 12; --gap: 8px; --pad: 16px;
background: var(--board); border-radius: 6px; padding: var(--pad);
}
.home-brand .flapboard__names { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.home-brand .flapboard__cells { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: var(--gap); }
.home-brand .flap {
--h: calc((var(--w, 1208px) - var(--gap) * (var(--cols) - 1)) / var(--cols) * 1.9);
position: relative; height: var(--h); perspective: 400px;
font-family: var(--font-display); font-weight: 900; font-size: calc(var(--h) * 0.84); color: var(--cream);
}
.home-brand .flap__half, .home-brand .flap__leaf {
position: absolute; left: 0; right: 0; height: 50%; overflow: hidden;
background: var(--teal-deep); backface-visibility: hidden;
}
.home-brand .flap__half--top, .home-brand .flap__leaf--top { top: 0; border-radius: 4px 4px 0 0; transform-origin: 50% 100%; }
.home-brand .flap__half--bottom, .home-brand .flap__leaf--bottom { bottom: 0; border-radius: 0 0 4px 4px; transform-origin: 50% 0; }
.home-brand .flap__leaf--bottom { transform: rotateX(90deg); }
.home-brand .flap b {
position: absolute; left: 0; right: 0; height: var(--h);
font-weight: 900; line-height: var(--h); text-align: center; text-transform: uppercase;
}
.home-brand .flap__half--bottom b, .home-brand .flap__leaf--bottom b { bottom: 0; }
/* The split line and the two hinges */
.home-brand .flap::before { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 1px); height: 2px; background: var(--board); z-index: 3; }
.home-brand .flap::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 7px); height: 14px; z-index: 3;
background: linear-gradient(var(--board), var(--board)) left / 4px 100% no-repeat, linear-gradient(var(--board), var(--board)) right / 4px 100% no-repeat; }
.home-brand .flap__leaf { z-index: 2; }
/* 15.3 Agency ----------------------------------------------------------------- */
.home-brand .brand-agency { background: var(--surface); }
.home-brand .brand-agency__layout { display: flex; align-items: stretch; gap: var(--space-64); }
.home-brand .brand-agency__side { flex: 0 0 420px; display: flex; flex-direction: column; gap: var(--space-32); }
.home-brand .brand-agency__side img { width: 100%; aspect-ratio: 420 / 520; height: auto; object-fit: cover; }
.home-brand .brand-agency__copy { flex: 1 1 0; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-48); padding-top: 40px; }
.home-brand .brand-agency__lead { font-size: 48px; line-height: 1.1; letter-spacing: -0.03em; }
.home-brand .brand-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); }
.home-brand .brand-stats li { display: flex; flex-direction: column; gap: 8px; padding-top: 20px; border-top: 1px solid var(--border); }
.home-brand .brand-stats b { font-family: var(--font-mono); font-weight: 200; font-size: 96px; line-height: .9; letter-spacing: -0.04em; color: var(--accent-text); }
.home-brand .brand-stats span { font-size: 15px; font-weight: 400; line-height: 1.45; color: color-mix(in srgb, var(--text-primary) 80%, transparent); }
/* 15.4 Building blocks — tabs ------------------------------------------------ */
.home-brand .brand-blocks { background: var(--accent); }
.home-brand .brand-blocks .brand-head { margin-bottom: var(--space-40); }
.home-brand .block-tabs__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: var(--space-40); }
.home-brand .block-tab {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
height: 72px; padding: 0 24px; border: 0; border-radius: var(--radius);
background: var(--teal-deep); color: var(--cream); text-align: left;
transition: background-color .25s ease, color .25s ease;
}
.home-brand .block-tab span { font-family: var(--font-mono); font-size: 13px; color: rgba(244, 242, 236, 0.75); }
.home-brand .block-tab strong { font-family: var(--font-display); font-weight: 900; font-size: 36px; line-height: 1; text-transform: uppercase; }
.home-brand .block-tab:hover { background: #0c4545; }
.home-brand .block-tab[aria-selected="true"] { background: var(--teal-light); color: #121a1a; }
.home-brand .block-tab[aria-selected="true"] span { color: #121a1a; }
.home-brand .block-tab:focus-visible { outline: 2px solid var(--teal-light); outline-offset: 3px; }
.home-brand .block-panel { display: flex; align-items: center; gap: var(--space-48); padding: 40px; border-radius: var(--radius); background: var(--teal-deep); }
.home-brand .block-panel[hidden] { display: none; }
.home-brand .block-panel.is-entering { animation: brand-panel .45s cubic-bezier(.2,.7,.2,1); }
.home-brand .block-panel__copy { flex: 1 1 0; display: flex; flex-direction: column; gap: var(--space-24); }
.home-brand .block-panel__lead { margin: 0; font-weight: 300; font-size: 36px; line-height: 1.15; letter-spacing: -0.02em; }
.home-brand .block-panel__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-24); }
.home-brand .block-panel__list li { display: flex; align-items: baseline; gap: 16px; padding-top: 12px; border-top: 1px solid rgba(244, 242, 236, 0.2); font-weight: 400; font-size: 17px; line-height: 1.2; }
.home-brand .block-panel__list li::before { content: "—"; font-family: var(--font-mono); font-size: 14px; color: var(--teal-light); }
.home-brand .block-panel__media { flex: 0 0 420px; width: 420px; height: 420px; border-radius: var(--radius); object-fit: cover; }
@keyframes brand-panel { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* 15.5 Before / after ---------------------------------------------------------- */
.home-brand .brand-ba__title { font-size: 150px; line-height: .85; }
.home-brand .brand-head--button .btn-m { height: 52px; }
.home-brand .ba-cases { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-24); }
.home-brand .ba-case { display: flex; flex-direction: column; gap: var(--space-16); }
.home-brand .ba { --pos: 50%; position: relative; height: 440px; overflow: hidden; background: var(--surface); }
.home-brand .ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-brand .ba__img--after { clip-path: inset(0 0 0 var(--pos)); }
.home-brand .ba__chip { position: absolute; top: 16px; padding: 8px 12px; border-radius: var(--radius); background: var(--cream); color: #121a1a; font-family: var(--font-mono); font-weight: 500; font-size: 12px; line-height: 1.2; z-index: 1; }
.home-brand .ba__chip--before { left: 16px; }
.home-brand .ba__chip--after { right: 16px; }
.home-brand .ba__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--cream); z-index: 1; pointer-events: none; }
.home-brand .ba__handle {
position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; transform: translate(-50%, -50%);
display: flex; align-items: center; justify-content: center; border-radius: 50%;
background: var(--cream); color: #121a1a; font-family: var(--font-mono); font-weight: 500; font-size: 20px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); transition: transform .2s ease;
}
.home-brand .ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 2; }
.home-brand .ba:hover .ba__handle, .home-brand .ba__range:active ~ .ba__line .ba__handle { transform: translate(-50%, -50%) scale(1.08); }
.home-brand .ba:has(.ba__range:focus-visible) .ba__handle { outline: 2px solid var(--accent); outline-offset: 3px; }
.home-brand .ba-case__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.home-brand .ba-case__meta strong { font-weight: 500; font-size: 18px; }
.home-brand .ba-case__meta span { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); white-space: nowrap; }
/* 15.6 Tone sliders -------------------------------------------------------------
The visible rail, fill and ticks are drawn on .tone__track from --v (0–100);
the range input sits on top, 16px wider each side so the knob centre can
reach both ends of the rail. */
.home-brand .brand-tone { background: var(--teal-deep); }
.home-brand .brand-tone__note { font-size: 12px; color: rgba(244, 242, 236, 0.75); white-space: nowrap; }
.home-brand .tone { display: flex; align-items: center; gap: var(--space-32); padding: 20px 0; border-top: 1px solid rgba(244, 242, 236, 0.18); }
.home-brand .tone + .tone { margin-top: var(--space-48); }
.home-brand .tone__from, .home-brand .tone__to { flex: 0 0 200px; font-family: var(--font-display); font-weight: 900; font-size: 40px; line-height: 1.2; text-transform: uppercase; }
.home-brand .tone__to { text-align: right; }
.home-brand .tone__value { flex: 0 0 40px; text-align: right; font-family: var(--font-mono); font-size: 14px; color: var(--teal-light); }
.home-brand .tone__track {
--v: 50;
position: relative; flex: 1 1 0; height: 32px;
background:
linear-gradient(var(--teal-light), var(--teal-light)) 0 15px / calc(var(--v) * 1%) 2px no-repeat,
linear-gradient(rgba(244, 242, 236, 0.3), rgba(244, 242, 236, 0.3)) 0 15px / 100% 2px no-repeat,
linear-gradient(rgba(244, 242, 236, 0.35), rgba(244, 242, 236, 0.35)) 100% 11px / 1px 10px no-repeat,
repeating-linear-gradient(to right, rgba(244, 242, 236, 0.35) 0 1px, transparent 1px 10%) 0 11px / 100% 10px no-repeat;
}
.home-brand .tone__track input {
position: absolute; left: -16px; right: -16px; top: 0; width: calc(100% + 32px); height: 32px; margin: 0;
-webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;
}
.home-brand .tone__track input::-webkit-slider-runnable-track { height: 32px; background: transparent; }
.home-brand .tone__track input::-moz-range-track { height: 32px; background: transparent; }
.home-brand .tone__track input::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--teal-light); transition: transform .2s ease; }
.home-brand .tone__track input::-moz-range-thumb { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--teal-light); }
.home-brand .tone__track input:hover::-webkit-slider-thumb, .home-brand .tone__track input:active::-webkit-slider-thumb { transform: scale(1.12); }
.home-brand .tone__track input:focus-visible { outline: none; }
.home-brand .tone__track input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--teal-deep), 0 0 0 5px var(--cream); }
.home-brand .tone__track input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--teal-deep), 0 0 0 5px var(--cream); }
/* 15.7 Name preview + footer ------------------------------------------------ */
.home-brand .brand-end { background: var(--accent); padding: var(--space-128) 0 var(--space-48); }
.home-brand .namer { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-32); margin-bottom: 80px; }
.home-brand .namer__title { align-self: stretch; font-size: 180px; line-height: .85; white-space: nowrap; }
.home-brand .namer__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-24); align-items: stretch; width: 100%; }
.home-brand .namer__field { display: flex; flex-direction: column; justify-content: center; gap: 16px; margin: 0; padding: 24px; border: 1px solid rgba(244, 242, 236, 0.4); border-radius: var(--radius); cursor: text; transition: border-color .2s ease; }
.home-brand .namer__field:focus-within { border-color: var(--teal-light); }
.home-brand .namer__field span, .home-brand .namer__preview span { font-family: var(--font-mono); font-size: 12px; line-height: 1.3; }
.home-brand .namer__field span { color: rgba(244, 242, 236, 0.75); }
.home-brand .namer__field input { width: 100%; padding: 0; border: 0; background: transparent; color: var(--cream); font-weight: 300; font-size: 40px; line-height: 1.2; caret-color: var(--teal-light); }
.home-brand .namer__field input:focus { outline: none; }
.home-brand .namer__preview { display: flex; flex-direction: column; justify-content: center; gap: 12px; min-width: 0; padding: 24px 32px; border-radius: var(--radius); background: var(--mark-card); overflow: hidden; }
.home-brand .namer__preview span { color: rgba(18, 26, 26, 0.72); }
[data-bs-theme="dark"] .home-brand .namer__preview span { color: rgba(242, 239, 233, 0.72); }
.home-brand .namer__mark { font-family: var(--font-display); font-weight: 900; font-size: 96px; line-height: 1.2; letter-spacing: 0.08em; color: var(--mark-ink); white-space: nowrap; }
.home-brand .brand-btn-light { height: 52px; background: var(--cream); color: var(--accent); }
.home-brand .brand-btn-light:hover { background: var(--teal-light); color: #121a1a; }
.home-brand .brand-end .site-footer__brand p { color: rgba(244, 242, 236, 0.82); }
.home-brand .brand-end .site-footer__col h3, .home-brand .brand-end .site-footer__legal { color: rgba(244, 242, 236, 0.75); }
/* 15.8 Responsive ---------------------------------------------------------------- */
@media (max-width: 1199.98px) {
.home-brand .brand-hero__title { font-size: 52px; }
.home-brand .brand-agency__side { flex-basis: 340px; }
.home-brand .brand-agency__lead { font-size: 38px; }
.home-brand .brand-stats b { font-size: 72px; }
.home-brand .block-panel__media { flex-basis: 340px; width: 340px; height: 340px; }
.home-brand .brand-ba__title { font-size: 120px; }
.home-brand .tone__from, .home-brand .tone__to { flex-basis: 150px; font-size: 34px; }
.home-brand .namer__title { font-size: 150px; }
.home-brand .namer__mark { font-size: 72px; }
}
@media (max-width: 1023.98px) {
.home-brand .brand-hero { padding: 48px 0 var(--space-64); }
.home-brand .brand-hero__inner { gap: 40px; }
.home-brand .brand-hero__top { flex-direction: column; align-items: flex-start; gap: 8px; }
.home-brand .brand-hero__title { font-size: 36px; }
.home-brand .brand-hero__caption { flex-direction: column; gap: 4px; }
.home-brand .brand-hero__media { height: 280px; }
.home-brand .flapboard { --gap: 4px; --pad: 12px; border-radius: 4px; }
.home-brand .brand-head { flex-wrap: wrap; }
.home-brand .brand-head__heading { font-size: 36px; }
.home-brand .brand-agency__layout { flex-direction: column; gap: 40px; }
.home-brand .brand-agency__copy { padding-top: 0; }
.home-brand .brand-agency__side { flex-basis: auto; width: 62%; }
.home-brand .brand-agency__lead { font-size: 32px; }
.home-brand .brand-stats b { font-size: 56px; }
.home-brand .block-tab { flex-direction: column; align-items: flex-start; justify-content: space-between; height: 72px; padding: 8px 16px 10px; }
.home-brand .block-tab strong { font-size: 28px; }
.home-brand .block-panel { flex-direction: column; align-items: stretch; padding: 32px 24px; }
.home-brand .block-panel__lead { font-size: 28px; }
.home-brand .block-panel__media { flex-basis: auto; width: 100%; height: auto; aspect-ratio: 1; }
.home-brand .brand-ba__title { font-size: 88px; max-width: 440px; }
.home-brand .brand-head--button { flex-wrap: nowrap; }
.home-brand .ba { height: 300px; }
.home-brand .ba-case__meta { flex-direction: column; gap: 4px; }
.home-brand .brand-tone__note { white-space: normal; }
.home-brand .tone { flex-wrap: wrap; gap: 16px 24px; padding: 24px 0; }
.home-brand .tone + .tone { margin-top: 0; }
.home-brand .tone__from { order: 1; flex: 1 1 auto; font-size: 32px; }
.home-brand .tone__to { order: 2; flex: 0 0 auto; font-size: 32px; }
.home-brand .tone__value { order: 3; flex: 0 0 32px; }
.home-brand .tone__track { order: 4; flex: 1 1 100%; margin: 0 16px; }
.home-brand .namer__title { font-size: 104px; }
.home-brand .namer__mark { font-size: 56px; }
.home-brand .namer__field input { font-size: 30px; }
}
@media (max-width: 575.98px) {
.home-brand .brand-hero__title { font-size: 26px; }
/* Keep all 12 cells on one row so a name never breaks across lines. */
.home-brand .flapboard { --gap: 3px; --pad: 8px; }
.home-brand .flap::after { background-size: 2px 100%; }
.home-brand .brand-stats { gap: 12px; }
.home-brand .brand-hero__media { height: 220px; }
.home-brand .brand-agency__side { width: 100%; }
.home-brand .brand-agency__lead { font-size: 26px; }
.home-brand .brand-stats b { font-size: 40px; }
.home-brand .brand-stats span { font-size: 13px; }
.home-brand .brand-head__heading { font-size: 26px; }
.home-brand .block-tabs__list { grid-template-columns: repeat(2, 1fr); }
.home-brand .block-tab { flex-direction: row; align-items: center; justify-content: flex-start; height: 72px; padding: 0 12px; gap: 6px; }
.home-brand .block-tab strong { font-size: 24px; }
.home-brand .block-panel { padding: 24px 20px; }
.home-brand .block-panel__lead { font-size: 22px; }
.home-brand .brand-ba__title { font-size: 60px; max-width: none; white-space: nowrap; }
.home-brand .brand-head--button { flex-wrap: wrap; }
.home-brand .brand-head--button .btn-m { width: 100%; }
.home-brand .ba-cases { grid-template-columns: 1fr; }
.home-brand .ba { height: 232px; }
.home-brand .ba__handle { width: 40px; height: 40px; font-size: 16px; }
.home-brand .ba__chip { top: 8px; padding: 4px 8px; font-size: 10px; }
.home-brand .ba__chip--before { left: 8px; }
.home-brand .ba__chip--after { right: 8px; }
.home-brand .tone__from, .home-brand .tone__to { font-size: 26px; }
.home-brand .namer__row { grid-template-columns: 1fr; gap: 16px; }
.home-brand .namer__mark { font-size: 44px; }
.home-brand .namer__field input { font-size: 26px; }
}
/* ==========================================================================
16. Home — Product (light/home-product.html, dark/home-product.html)
Palette: paper #f6f6f4 · graphite #17191c · lavender #d9d6f2
Signature: changelog card, sprint Gantt, keycap services, estimator.
========================================================================== */
.home-product {
--base: #f6f6f4;
--surface: #ececea;
--contrast: #17191c;
--contrast-deep: #202328; /* estimator band, keycaps */
--text-primary: #17191c;
--text-muted: rgba(23, 25, 28, 0.7);
--text-on-contrast: #f6f6f4;
--border: rgba(23, 25, 28, 0.15);
--accent: #d9d6f2; /* lavender */
--on-accent: #17191c;
--chip-line: rgba(23, 25, 28, 0.3);
--bar-light: #d9d6f2; /* Gantt bars */
--bar-strong: #17191c;
--card: #17191c; /* changelog card */
--estimate: #d9d6f2; /* estimate card */
--on-estimate: #17191c;
--pulse: #2f9e5f;
}
[data-bs-theme="dark"] .home-product {
--base: #0f0f0f;
--surface: #171717;
--contrast: #171717;
--contrast-deep: #1f1f1f;
--text-primary: #f2efe9;
--text-muted: #a8a29a;
--text-on-contrast: #f2efe9;
--border: #34302c;
--chip-line: rgba(242, 239, 233, 0.3);
--bar-light: #d9d6f2;
--bar-strong: #f2efe9;
--card: #1f1f1f;
--estimate: #171717;
--on-estimate: #f2efe9;
}
[data-bs-theme="dark"] .home-product .btn-m--primary { background: #262626; color: #f2efe9; }
[data-bs-theme="dark"] .home-product .btn-m--primary:hover { background: var(--accent); color: var(--on-accent); }
/* 16.1 Shared pieces ------------------------------------------------------- */
.home-product .product-band { padding: var(--space-128) 0; background: var(--base); }
.home-product .product-band--surface { background: var(--surface); }
.home-product .product-band--ink,
.home-product .product-band--deep {
background: var(--contrast);
color: var(--text-on-contrast);
--text-muted: rgba(246, 246, 244, 0.75);
--border: rgba(246, 246, 244, 0.16);
}
.home-product .product-band--deep { background: var(--contrast-deep); }
.home-product .t-label { color: var(--text-muted); }
/* Chips: stack chips (outline), version / launch chips (accent) */
.home-product .chip {
display: inline-flex; align-items: center;
padding: 6px 12px; border: 1px solid var(--chip-line); border-radius: var(--radius);
font-family: var(--font-mono); font-weight: 500; font-size: 12px; line-height: 1.25; white-space: nowrap;
}
.home-product .chip--accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.home-product .chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
/* Status pill in the header */
.home-product .status-pill {
display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px;
background: var(--surface); border-radius: var(--radius);
font-family: var(--font-mono); font-weight: 500; font-size: 12px; line-height: 1.25; white-space: nowrap;
}
.home-product .status-pill__pulse { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--pulse); flex: none; }
.home-product .status-pill__pulse::after {
content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--pulse);
animation: product-pulse 1.8s ease-out infinite;
}
@keyframes product-pulse { from { transform: scale(1); opacity: .6; } to { transform: scale(2.6); opacity: 0; } }
/* 16.2 Hero + changelog ----------------------------------------------------- */
.home-product .product-hero { padding: 32px 0 112px; background: var(--base); }
.home-product .product-hero__inner { display: flex; flex-direction: column; gap: 64px; }
.home-product .product-hero__row { display: flex; align-items: flex-end; gap: var(--space-64); }
.home-product .product-hero__copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-32); }
.home-product .product-hero__title { display: flex; flex-direction: column; gap: var(--space-16); width: 100%; }
.home-product .product-hero__line-1 { font-size: 220px; line-height: .84; }
.home-product .product-hero__line-2 { font-size: 102px; line-height: .84; }
.home-product .product-hero__lead { max-width: 560px; margin: 0; }
.home-product .product-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-16); }
.home-product .product-hero .btn-m { height: 52px; }
.home-product .changelog {
flex: 0 0 520px; max-width: 100%;
background: var(--card); color: #f6f6f4; border-radius: var(--radius);
padding: 20px 24px 8px; overflow: hidden;
--chip-line: rgba(246, 246, 244, 0.3);
}
.home-product .changelog__head { display: flex; justify-content: space-between; padding-bottom: var(--space-16); font-family: var(--font-mono); font-size: 13px; color: rgba(246, 246, 244, 0.75); }
.home-product .changelog__list { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.home-product .release { display: flex; align-items: center; gap: var(--space-16); padding: 16px 0; border-top: 1px solid rgba(246, 246, 244, 0.14); overflow: hidden; }
.home-product .release__ver { flex: 0 0 64px; font-family: var(--font-mono); font-weight: 500; font-size: 13px; color: #d9d6f2; }
.home-product .release__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.home-product .release__text strong { font-weight: 500; font-size: 15px; line-height: 1.25; }
.home-product .release__text em { font-weight: 400; font-size: 14px; line-height: 1.25; color: rgba(246, 246, 244, 0.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-product .release__when { flex: 0 0 44px; text-align: right; font-family: var(--font-mono); font-size: 12px; color: rgba(246, 246, 244, 0.75); }
.home-product .release .chip { min-width: 76px; justify-content: center; }
.home-product .changelog .chip--accent { background: #d9d6f2; border-color: #d9d6f2; color: #17191c; }
/* 16.3 Products -------------------------------------------------------------- */
.home-product .products-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-64); margin-bottom: 56px; }
.home-product .products-head__copy { display: flex; flex-direction: column; gap: var(--space-24); max-width: 900px; }
.home-product .products-head__title { font-size: 60px; line-height: 1; }
.home-product .products-head .btn-m, .home-product .process-head .btn-m { height: 52px; }
.home-product .products-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-48) var(--space-24); }
.home-product .product-card { display: flex; flex-direction: column; gap: var(--space-16); color: var(--text-primary); }
.home-product .product-card__media { display: block; height: 420px; border-radius: var(--radius); overflow: hidden; }
.home-product .product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.home-product .product-card:hover .product-card__media img { transform: scale(1.03); }
.home-product .product-card__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); }
.home-product .product-card__meta > span:first-child { display: flex; flex-direction: column; gap: 4px; }
.home-product .product-card__meta strong { font-weight: 500; font-size: 22px; line-height: 1.2; }
.home-product .product-card__meta em { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
/* 16.4 Process — sprint Gantt ---------------------------------------------------
Bars are placed with CSS variables that home-product.js reads from the
data-attributes: --weeks on .gantt, --s (start) and --l (length) on each row. */
.home-product .process-head { display: flex; align-items: flex-end; gap: var(--space-64); margin-bottom: var(--space-64); }
.home-product .process-head__copy { flex: 1 1 0; display: flex; flex-direction: column; gap: var(--space-24); }
.home-product .process-head__title { font-size: 52px; line-height: 1.05; }
.home-product .gantt { --label: 200px; --weeks: 6; display: flex; flex-direction: column; gap: 10px; margin-bottom: var(--space-64); }
.home-product .gantt__weeks { display: flex; padding-left: var(--label); }
.home-product .gantt__weeks span { flex: 1 1 0; padding-bottom: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.home-product .gantt__phases { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.home-product .gantt__phases li { position: relative; height: 56px; }
.home-product .gantt__name { position: absolute; left: 0; top: 16px; font-weight: 500; font-size: 17px; line-height: 1.25; }
.home-product .gantt__phases li::after { content: ""; position: absolute; left: var(--label); right: 0; bottom: 0; height: 1px; background: var(--border); }
.home-product .gantt__bar {
position: absolute; top: 6px; height: 44px; border-radius: var(--radius);
left: calc(var(--label) + (100% - var(--label)) * var(--s) / var(--weeks));
width: calc((100% - var(--label)) * var(--l) / var(--weeks) - 6px);
background: var(--bar-light); transform-origin: left center;
}
.home-product .gantt__bar--strong { background: var(--bar-strong); }
.home-product .process-photo { height: 520px; border-radius: var(--radius); overflow: hidden; }
.home-product .process-photo img { width: 100%; height: 100%; object-fit: cover; }
/* 16.5 Services — keycap rows ------------------------------------------------ */
.home-product .keys-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-32); padding-bottom: var(--space-48); }
.home-product .keys-head__copy { display: flex; flex-direction: column; gap: var(--space-16); }
.home-product .keys-head__hint { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.home-product .keys-head__hint kbd { padding: 2px 6px 3px; border: 1px solid rgba(246, 246, 244, 0.3); border-bottom-width: 2px; border-radius: var(--radius); background: transparent; color: #d9d6f2; font-family: var(--font-mono); font-size: 12px; }
.home-product .keys-head__title { font-size: 60px; line-height: 1; }
.home-product .key-list { list-style: none; margin: 0; padding: 0; }
.home-product .key-row {
display: flex; align-items: center; gap: var(--space-32); padding: 32px 0;
border-top: 1px solid var(--border); color: var(--text-on-contrast); outline: 0;
}
.home-product .keycap {
flex: none; min-width: 48px; text-align: center; padding: 10px 12px 12px; border: 1px solid rgba(246, 246, 244, 0.3); border-bottom-width: 3px; border-radius: var(--radius);
background: var(--contrast-deep); color: #d9d6f2;
font-family: var(--font-mono); font-weight: 500; font-size: 16px; line-height: 1.25;
transition: transform .15s ease, border-bottom-width .15s ease, background-color .2s ease, color .2s ease;
}
.home-product .key-row__name { flex: 1 1 0; font-family: var(--font-display); font-weight: 900; font-size: 56px; line-height: 1.2; text-transform: uppercase; transition: color .2s ease, transform .35s ease; }
.home-product .key-row__text { flex: 0 0 380px; font-weight: 400; font-size: 16px; line-height: 1.5; color: rgba(246, 246, 244, 0.8); }
.home-product .key-row__time { flex: 0 0 110px; text-align: right; font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); }
.home-product .key-row:hover .key-row__name { transform: translateX(8px); }
/* Pressed / focused state — set by keys 1–4 or keyboard focus */
.home-product .key-row.is-active .keycap,
.home-product .key-row:focus-visible .keycap { transform: translateY(2px); border-bottom-width: 1px; margin-bottom: -2px; background: #d9d6f2; color: #17191c; }
.home-product .key-row.is-active .key-row__name,
.home-product .key-row:focus-visible .key-row__name { color: #d9d6f2; }
/* 16.6 Estimator + footer ----------------------------------------------------- */
.home-product .estimator-band { padding: var(--space-128) 0 var(--space-48); }
.home-product .estimator { display: flex; align-items: flex-end; gap: var(--space-48); margin-bottom: 80px; }
.home-product .estimator__inputs { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-24); }
.home-product .estimator__title { font-size: 99px; line-height: .85; }
.home-product .estimator__toggles { display: flex; flex-wrap: wrap; gap: 12px; }
.home-product .estimator__inputs > .t-label { margin-top: 8px; }
.home-product .estimator__inputs > .t-label + .estimator__toggles { margin-top: -12px; }
.home-product .toggle {
height: 52px; padding: 0 16px; border: 1px solid rgba(246, 246, 244, 0.35); border-radius: var(--radius);
background: transparent; color: var(--text-on-contrast);
font-family: var(--font-mono); font-weight: 500; font-size: 13px; line-height: 1;
transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.home-product .toggle::before { content: "+ "; }
.home-product .toggle[aria-pressed="true"] { background: #d9d6f2; border-color: #d9d6f2; color: #17191c; }
.home-product .toggle[aria-pressed="true"]::before { content: "✓ "; }
.home-product .toggle:hover { border-color: #f6f6f4; }
.home-product .toggle:focus-visible { outline: 2px solid #d9d6f2; outline-offset: 3px; }
.home-product .estimate {
flex: 0 0 440px; max-width: 100%; display: flex; flex-direction: column; gap: 12px; padding: var(--space-32);
background: var(--estimate); color: var(--on-estimate); border-radius: var(--radius);
}
.home-product .estimate p { margin: 0; }
.home-product .estimate__label { font-family: var(--font-mono); font-size: 13px; color: color-mix(in srgb, var(--on-estimate) 70%, transparent); }
.home-product .estimate__weeks, .home-product .estimate__price { transition: opacity .2s ease; }
.home-product .estimate.is-updating .estimate__weeks, .home-product .estimate.is-updating .estimate__price { opacity: .35; }
.home-product .estimate__weeks { font-family: var(--font-mono); font-weight: 200; font-size: 64px; line-height: 1; letter-spacing: -0.04em; white-space: nowrap; }
.home-product .estimate__price { font-family: var(--font-mono); font-weight: 500; font-size: 20px; line-height: 1.25; }
.home-product .estimate__note { font-weight: 400; font-size: 15px; line-height: 1.45; }
.home-product .estimate .btn-m { height: 52px; }
.home-product .estimate .btn-m--primary:hover { background: #000; color: #f6f6f4; }
.home-product .menu-drawer .theme-switch { border-color: rgba(246, 246, 244, 0.3); }
.home-product .estimator-band .site-footer__brand p { color: rgba(246, 246, 244, 0.82); }
/* 16.7 Responsive ------------------------------------------------------------- */
@media (max-width: 1199.98px) {
.home-product .product-hero__row { flex-direction: column; align-items: stretch; }
.home-product .changelog { flex-basis: auto; }
.home-product .products-head__title, .home-product .keys-head__title { font-size: 48px; }
.home-product .process-head__title { font-size: 44px; }
.home-product .product-card__media { height: auto; aspect-ratio: 648 / 420; }
.home-product .key-row__text { flex-basis: 300px; }
.home-product .estimator { flex-direction: column; align-items: stretch; }
.home-product .estimate { flex-basis: auto; }
}
@media (max-width: 1023.98px) {
.home-product .status-pill__long { display: none; }
.home-product .product-band { padding: 96px 0; }
.home-product .estimator-band { padding: 96px 0 var(--space-48); }
.home-product .products-head { flex-direction: column; align-items: flex-start; gap: var(--space-24); }
.home-product .process-head { flex-direction: column; align-items: flex-start; gap: var(--space-32); }
.home-product .gantt { --label: 110px; }
.home-product .gantt__name { font-size: 15px; }
.home-product .process-photo { height: 360px; }
.home-product .key-row { flex-wrap: wrap; gap: var(--space-16) var(--space-24); }
.home-product .keys-head__hint { display: none; }
.home-product .key-row__name { font-size: 44px; }
.home-product .key-row__text { flex: 1 1 0; min-width: 240px; }
.home-product .key-row__time { flex-basis: auto; }
}
@media (max-width: 575.98px) {
.home-product .product-hero__inner { gap: var(--space-48); }
.home-product .product-hero__title { gap: var(--space-16); }
.home-product .product-hero__lead { font-size: 18px; }
/* Phone header: lockup, status pill and menu. The theme link moves into the menu drawer. */
.home-product .site-header { gap: 12px; }
.home-product .site-header .theme-switch { display: none; }
.home-product .site-header .lockup { gap: 10px; }
.home-product .site-header .lockup svg { width: 28px; height: 28px; }
.home-product .site-header .lockup__word { font-size: 24px; }
.home-product .status-pill { gap: 8px; padding: 8px 10px; font-size: 11px; }
.home-product .status-pill__pulse { width: 8px; height: 8px; }
.home-product .changelog { padding: 16px 16px 4px; }
.home-product .release { gap: 12px; flex-wrap: wrap; }
.home-product .release__ver { flex-basis: 52px; }
.home-product .release__text { flex-basis: calc(100% - 64px); }
.home-product .release .chip { margin-left: 64px; }
.home-product .release__when { flex: 1 1 0; }
.home-product .products-head__title, .home-product .keys-head__title { font-size: 34px; }
.home-product .process-head__title { font-size: 30px; }
.home-product .products-grid { grid-template-columns: 1fr; gap: var(--space-40); }
.home-product .gantt { --label: 72px; }
.home-product .gantt__weeks span { font-size: 9px; }
.home-product .gantt__phases li { height: 44px; }
.home-product .gantt__name { top: 13px; font-size: 13px; }
.home-product .gantt__bar { top: 6px; height: 32px; }
.home-product .process-photo { height: 240px; }
.home-product .key-row { padding: 24px 0; }
.home-product .key-row__name { flex-basis: calc(100% - 80px); font-size: 32px; }
.home-product .key-row__text { flex-basis: 100%; min-width: 0; font-size: 15px; }
.home-product .key-row__time { flex-basis: 100%; text-align: left; }
.home-product .estimate { padding: var(--space-24); }
.home-product .estimate__weeks, .home-product .estimate__price { transition: opacity .2s ease; }
.home-product .estimate.is-updating .estimate__weeks, .home-product .estimate.is-updating .estimate__price { opacity: .35; }
.home-product .estimate__weeks { font-size: 48px; }
.home-product .toggle { height: 44px; padding: 0 12px; }
}
/* ==========================================================================
17. Home — Web (light/home-web.html, dark/home-web.html)
Palette: paper #faf8f3 · slate #22252b · butter #f2e3a0
Signature: live browser mock with breakpoint toggles, artefact steps,
score rings, three packages (middle one recommended).
========================================================================== */
.home-web {
--base: #faf8f3;
--surface: #f1ede4;
--contrast: #22252b; /* scores band, package cards */
--contrast-deep: #1a1c21; /* packages band, ring cards */
--text-primary: #22252b;
--text-muted: rgba(34, 37, 43, 0.7);
--text-on-contrast: #faf8f3;
--border: rgba(34, 37, 43, 0.15);
--accent: #f2e3a0; /* butter */
--on-accent: #22252b;
--step-card: #faf8f3;
--featured: #f2e3a0; /* recommended package */
--on-featured: #22252b;
}
[data-bs-theme="dark"] .home-web {
--base: #0f0f0f;
--surface: #171717;
--contrast: #262626;
--contrast-deep: #171717;
--text-primary: #f2efe9;
--text-muted: #a8a29a;
--text-on-contrast: #f2efe9;
--border: #34302c;
--step-card: #1f1f1f;
--featured: #2d2a1e;
--on-featured: #f2efe9;
}
[data-bs-theme="dark"] .home-web .btn-m--primary { background: #262626; color: #f2efe9; }
[data-bs-theme="dark"] .home-web .btn-m--primary:hover { background: var(--accent); color: var(--on-accent); }
[data-bs-theme="dark"] .home-web .packages-band { background: #0f0f0f; }
/* 17.1 Shared pieces -------------------------------------------------------- */
.home-web .web-band { padding: var(--space-128) 0; background: var(--base); }
.home-web .web-band--surface { background: var(--surface); }
.home-web .web-band--ink,
.home-web .web-band--deep {
background: var(--contrast);
color: var(--text-on-contrast);
--text-muted: rgba(250, 248, 243, 0.75);
--border: rgba(250, 248, 243, 0.18);
}
.home-web .web-band--deep { background: var(--contrast-deep); }
.home-web .t-label { color: var(--text-muted); }
.home-web .web-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-32); margin-bottom: 56px; }
.home-web .web-head__title { display: flex; flex-direction: column; gap: var(--space-16); }
.home-web .web-head__title h2 { max-width: 760px; font-size: 60px; line-height: 1; }
.home-web .web-head__text { flex: 0 0 320px; margin: 0; font-weight: 400; font-size: 16px; line-height: 1.5; color: color-mix(in srgb, currentColor 80%, transparent); }
/* 17.2 Hero ------------------------------------------------------------------- */
.home-web .web-hero { padding: 32px 0 112px; background: var(--base); overflow-x: clip; }
.home-web .web-hero__inner { display: flex; flex-direction: column; gap: var(--space-64); }
.home-web .web-hero__row { display: flex; align-items: stretch; gap: 56px; }
.home-web .web-hero__copy { flex: 0 0 480px; display: flex; flex-direction: column; gap: var(--space-40); }
.home-web .web-hero__title { display: flex; flex-direction: column; gap: 8px; }
.home-web .web-hero__line-1 { font-size: 132px; line-height: .84; white-space: nowrap; }
.home-web .web-hero__line-2 { font-size: 96px; line-height: .88; }
.home-web .web-hero__intro { display: flex; flex-direction: column; gap: 24px; }
.home-web .web-hero__lead { margin: 0; font-size: 20px; line-height: 1.45; }
.home-web .web-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-16); }
.home-web .web-hero .btn-m:not(.btn-m--sm) { height: 52px; }
/* Browser mock — fills the rest of the hero row, inside the container.
home-web.js loads the live page into an