/*
Theme Name: Kwintex v3
Theme URI: https://kwintex.ee
Author: Kwintex
Description: Editorial scroll-led workwear factory site. Custom theme. Migration build of the 7-section redesign — installs alongside the previous Kwintex theme so the old one remains activatable as rollback.
Version: 3.0.2
Text Domain: kwintex
*/
/* ============================================================
0. FONTS — self-hosted (no third-party requests)
Bebas Neue + DM Mono (300/400/500/italic-400), WOFF2,
latin + latin-ext subsets, font-display: swap.
Source: Google Fonts API, downloaded 2026-05-27 and vendored.
============================================================ */
@font-face {
font-family: 'Bebas Neue';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("files/fonts/JTUSjIg69CK48gW7PXoo9WdhyyTh89ZNpQ.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Bebas Neue';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("files/fonts/JTUSjIg69CK48gW7PXoo9WlhyyTh89Y.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'DM Mono';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("files/fonts/aFTW7PB1QTsUX8KYth-gCKSIQq_0XmBO.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'DM Mono';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("files/fonts/aFTW7PB1QTsUX8KYth-gBqSIQq_0Xg.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'DM Mono';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("files/fonts/aFTR7PB1QTsUX8KYvrGyEY2tbYf-Vlh3uA.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'DM Mono';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("files/fonts/aFTR7PB1QTsUX8KYvrGyEYOtbYf-Vlg.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'DM Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("files/fonts/aFTU7PB1QTsUX8KYthSQBK6PYK3EXw.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'DM Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("files/fonts/aFTU7PB1QTsUX8KYthqQBK6PYK0.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'DM Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("files/fonts/aFTR7PB1QTsUX8KYvumzEY2tbYf-Vlh3uA.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'DM Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("files/fonts/aFTR7PB1QTsUX8KYvumzEYOtbYf-Vlg.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ============================================================
1. RESET
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body { line-height: 1.5; min-height: 100dvh; }
img, picture, svg, video { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; background: none; border: 0; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--steel); outline-offset: 4px; border-radius: 2px; }
/* Accessibility: skip-link.
The WP template renders a Skip to content link for WCAG 2.4.1; the
static reference design does not. Hide it visually until it receives
keyboard focus so it does not push the hero section content downward.
This matches the static reference's vertical layout exactly. */
.skip-link {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.skip-link:focus {
position: fixed;
top: 0;
left: 0;
width: auto;
height: auto;
padding: 0.75rem 1rem;
margin: 0;
overflow: visible;
clip: auto;
background: var(--ink, #0E0F12);
color: var(--paper, #F2EDE5);
z-index: 1000;
font-family: var(--font-mono, monospace);
font-size: 0.875rem;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: underline;
}
/* ============================================================
2. TOKENS
============================================================ */
:root {
/* Palette */
--paper: #F2EDE5;
--paper-soft: #EBE5DA;
--paper-deep: #E2DBCD;
--ink: #0E0F12;
--ink-soft: #1A1C20;
--ink-mute: #5C5E66;
--thread: #5C5444; /* darkened from #756A56 for AA contrast */
--thread-soft: #8A7D66;
--mute: #C4BCAC;
--steel: #1E5A9C;
--teal: #1FA89A;
--steel-deep: #163F6E;
--teal-deep: #14756B;
--rust: #B05530;
--white: #FFFFFF;
/* Alpha */
--ink-a04: rgba(14, 15, 18, 0.04);
--ink-a08: rgba(14, 15, 18, 0.08);
--ink-a12: rgba(14, 15, 18, 0.12);
--ink-a20: rgba(14, 15, 18, 0.20);
--ink-a40: rgba(14, 15, 18, 0.40);
--ink-a60: rgba(14, 15, 18, 0.60);
--paper-a80: rgba(242, 237, 229, 0.80);
--paper-a92: rgba(242, 237, 229, 0.92);
--steel-a08: rgba(30, 90, 156, 0.08);
--steel-a16: rgba(30, 90, 156, 0.16);
/* Brand gradient */
--grad-brand: linear-gradient(135deg, var(--steel) 0%, var(--teal) 100%);
--grad-brand-soft: linear-gradient(135deg, rgba(30, 90, 156, 0.15) 0%, rgba(31, 168, 154, 0.15) 100%);
/* Type */
--font-display: 'Bebas Neue', 'Impact', sans-serif;
--font-mono: 'DM Mono', 'SFMono-Regular', ui-monospace, monospace;
/* Fluid type scale */
--fs-micro: clamp(0.6875rem, 0.65rem + 0.2vw, 0.75rem);
--fs-meta: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
--fs-body: clamp(0.9375rem, 0.85rem + 0.4vw, 1.0625rem);
--fs-lead: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
--fs-h3: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
--fs-h2: clamp(2.25rem, 1.5rem + 3.4vw, 4.5rem);
--fs-h1: clamp(3.5rem, 1.8rem + 7.8vw, 9rem);
--fs-mono-eyebrow: clamp(0.6875rem, 0.65rem + 0.18vw, 0.75rem);
/* Space */
--sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
--sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem;
--sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem;
--sp-32: 8rem; --sp-40: 10rem;
/* Side gutter for all content. max() folds in the iPhone notch safe-area
so text/nav clear the notch in landscape (viewport-fit=cover) while
section backgrounds still bleed edge-to-edge. env() is 0 on desktop and
portrait, so this is identical to the plain clamp() there. */
--gutter: max(clamp(1.25rem, 0.5rem + 3vw, 3rem), env(safe-area-inset-left), env(safe-area-inset-right));
--max-w: 84rem;
--max-w-text: 38rem;
/* Radii / borders */
--r-sm: 4px; --r-md: 8px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;
/* Z-index */
--z-base: 1; --z-content: 10; --z-header: 50; --z-cursor: 90;
--z-overlay: 100; --z-panel: 110; --z-thread: 5;
/* Easing */
--ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-out: cubic-bezier(0.32, 0.72, 0, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
/* Duration */
--d-fast: 200ms; --d-base: 400ms; --d-slow: 800ms; --d-slower: 1200ms;
}
/* ============================================================
3. BASE / TYPOGRAPHY
============================================================ */
html {
background: var(--paper);
/* iOS Safari delegates horizontal scroll to , not ; without
this the page can be swiped left into an empty area on the iPhone. */
overflow-x: hidden;
}
body {
font-family: var(--font-mono);
font-size: var(--fs-body);
font-weight: 400;
color: var(--ink);
background: var(--paper);
overflow-x: hidden;
/* position:relative + width:100% closes the same iOS Safari quirk —
belt-and-suspenders defense alongside the html rule above. */
position: relative;
width: 100%;
letter-spacing: 0.005em;
}
::selection { background: var(--ink); color: var(--paper); }
h1, h2, h3 {
font-family: var(--font-display);
font-weight: 400;
line-height: 0.92;
letter-spacing: -0.01em;
text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1; }
.eyebrow {
font-family: var(--font-mono);
font-size: var(--fs-mono-eyebrow);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--ink-mute);
}
/* ============================================================
4. LAYOUT PRIMITIVES + 3D STAGE
NOTE: perspective/transform must NOT live on .stage because that
would create a containing block for `position: fixed` and break
ScrollTrigger pins. Perspective is applied per-element via the
inline `perspective(...)` function in transform — see [data-tilt].
============================================================ */
.stage {
position: relative;
}
.container {
width: 100%;
max-width: var(--max-w);
margin-inline: auto;
padding-inline: var(--gutter);
}
.section { padding-block: clamp(4rem, 8vw, 10rem); }
/* Persistent zipper down the gutter — closed teeth below the slider, open teeth above */
.zipper-trail {
position: fixed;
left: clamp(6px, 1.5vw, 18px);
top: 0; /* chain runs full viewport height — extends behind the navbar at the top */
width: 14px;
height: 100vh;
pointer-events: none;
color: rgba(14, 15, 18, 0.55); /* slightly more present than --ink-a40 — reads deliberate on cream, still subtle */
z-index: var(--z-thread);
opacity: 1;
--zip-y: 0px;
--zip-tilt: 0deg;
--zip-stopper-progress: 0;
}
.zipper-trail__layer {
position: absolute;
inset: 0;
background-color: currentColor;
-webkit-mask-size: 14px 12px;
mask-size: 14px 12px;
-webkit-mask-repeat: repeat-y;
mask-repeat: repeat-y;
/* Cream halo: 8-direction stacked drop-shadows = thin outline that vanishes on cream bg and pops on dark bg */
filter:
drop-shadow(1px 0 0 var(--paper))
drop-shadow(-1px 0 0 var(--paper))
drop-shadow(0 1px 0 var(--paper))
drop-shadow(0 -1px 0 var(--paper));
}
.zipper-trail__layer--closed {
/* Alternating teeth: row 1 = left tooth, row 2 = right tooth. Each crosses centre by 0.5px (slim outer extent) */
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
/* Closed teeth render only BELOW the slider — top edge follows current zip-y position.
Bottom clip still follows the stopper's visual top edge so no teeth render past it. */
clip-path: inset(var(--zip-y, 109px) 0 max(0px, calc(var(--zip-stopper-progress, 0) * 60px - 24px)) 0);
}
.zipper-trail__layer--open {
/* Open: same alternating layout, same 4.5px tooth width — each tooth shifts 1.5px outward from closed position, leaves a 2px gap at centre while keeping teeth inset from container edges */
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
/* Open teeth render between navbar bottom and slider — no teeth render in the navbar zone, so the chain reads as starting clean at the slider. */
clip-path: inset(var(--zip-header, 86px) 0 calc(100% - var(--zip-y)) 0);
}
/* End-of-chain stopper: chunky bar anchored to the footer; slides up from below viewport as you approach the page end.
Resting position is 16px above viewport bottom; pre-reveal it sits 60px lower (off-screen). */
.zipper-trail__stopper {
position: absolute;
bottom: 32px;
left: 50%;
width: 8px;
height: 4px;
margin-left: -4px;
background-color: currentColor;
border-radius: 1px;
opacity: 1;
transform: translateY(calc((1 - var(--zip-stopper-progress, 0)) * 60px));
filter:
drop-shadow(1px 0 0 var(--paper))
drop-shadow(-1px 0 0 var(--paper))
drop-shadow(0 1px 0 var(--paper))
drop-shadow(0 -1px 0 var(--paper))
drop-shadow(0 1.5px 2px rgba(0,0,0,0.18));
}
.zipper-trail__pull {
position: absolute;
left: 50%;
top: 0;
width: 48px;
height: 72px;
margin-left: -24px;
margin-top: -36px;
transform: translateY(var(--zip-y)) rotate(var(--zip-tilt));
transform-origin: 50% 30%;
/* Soft cast shadow for separation; the PNG carries its own outline */
filter: drop-shadow(0 2px 3.5px rgba(0,0,0,0.28));
}
.zipper-trail__pull img,
.zipper-trail__pull svg { width: 100%; height: 100%; display: block; object-fit: contain; overflow: visible; }
/* Mobile: tight gutters can't host the 14px chain + 48px slider without colliding with card content */
@media (max-width: 700px) {
.zipper-trail { display: none; }
}
/* ============================================================
4b. CURSOR SPOTLIGHT — soft radial follower, blends with section
============================================================ */
.cursor-spotlight {
position: fixed;
top: 0;
left: 0;
width: 600px;
height: 600px;
border-radius: 50%;
transform: translate3d(-50%, -50%, 0);
pointer-events: none;
z-index: 1;
background: radial-gradient(circle, rgba(31, 168, 154, 0.10) 0%, rgba(30, 90, 156, 0.06) 35%, transparent 70%);
mix-blend-mode: multiply;
filter: blur(40px);
opacity: 0;
transition: opacity 0.6s var(--ease-out);
will-change: transform;
}
.cursor-spotlight.is-active { opacity: 1; }
.site-head[data-theme="dark"] ~ main ~ .cursor-spotlight,
body[data-section-theme="dark"] .cursor-spotlight {
background: radial-gradient(circle, rgba(31, 168, 154, 0.22) 0%, rgba(30, 90, 156, 0.16) 35%, transparent 70%);
mix-blend-mode: screen;
}
@media (hover: none) and (pointer: coarse), (max-width: 900px) {
.cursor-spotlight { display: none; }
}
/* ============================================================
4c. SCROLL PROGRESS (right edge)
============================================================ */
.scroll-progress {
position: fixed;
top: 0;
right: 0;
width: 2px;
height: 100vh;
pointer-events: none;
z-index: var(--z-header);
background: linear-gradient(to bottom, transparent 0%, rgba(14,15,18,0.05) 8%, rgba(14,15,18,0.05) 92%, transparent 100%);
}
.scroll-progress__bar {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0%;
background: var(--grad-brand);
box-shadow: 0 0 12px rgba(31,168,154,0.4);
transition: height 80ms linear;
}
/* ============================================================
4d. REVEAL ON ENTER — mask + translateY
============================================================ */
[data-reveal] {
opacity: 0;
transform: translate3d(0, 32px, 0);
transition:
opacity 0.9s var(--ease-expo),
transform 0.9s var(--ease-expo),
clip-path 0.9s var(--ease-expo);
will-change: transform, opacity, clip-path;
}
[data-reveal-mask] {
clip-path: inset(100% 0 0 0);
}
[data-reveal].is-revealed {
opacity: 1;
transform: translate3d(0, 0, 0);
}
[data-reveal-mask].is-revealed {
clip-path: inset(0 0 0 0);
}
[data-reveal-stagger] > * {
opacity: 0;
transform: translate3d(0, 24px, 0);
transition: opacity 0.8s var(--ease-expo), transform 0.8s var(--ease-expo);
}
[data-reveal-stagger].is-revealed > * { opacity: 1; transform: translate3d(0, 0, 0); }
[data-reveal-stagger].is-revealed > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-stagger].is-revealed > *:nth-child(2) { transition-delay: 90ms; }
[data-reveal-stagger].is-revealed > *:nth-child(3) { transition-delay: 180ms; }
[data-reveal-stagger].is-revealed > *:nth-child(4) { transition-delay: 270ms; }
[data-reveal-stagger].is-revealed > *:nth-child(5) { transition-delay: 360ms; }
[data-reveal-stagger].is-revealed > *:nth-child(6) { transition-delay: 450ms; }
[data-reveal-stagger].is-revealed > *:nth-child(7) { transition-delay: 540ms; }
[data-reveal-stagger].is-revealed > *:nth-child(8) { transition-delay: 630ms; }
[data-reveal-stagger].is-revealed > *:nth-child(9) { transition-delay: 720ms; }
[data-reveal-stagger].is-revealed > *:nth-child(10) { transition-delay: 810ms; }
/* ============================================================
4e. SECTION WATERMARK — large translucent number in corner
============================================================ */
.section-watermark {
position: absolute;
top: clamp(2rem, 5vw, 4rem);
right: clamp(1rem, 3vw, 3rem);
font-family: var(--font-display);
font-size: clamp(7rem, 16vw, 14rem);
line-height: 0.8;
letter-spacing: -0.04em;
color: var(--ink);
opacity: 0.045;
pointer-events: none;
z-index: 0;
user-select: none;
}
.section-watermark--light { color: var(--paper); opacity: 0.06; }
/* ============================================================
4f. MARQUEE TICKER
============================================================ */
.marquee {
position: relative;
overflow: hidden;
background: var(--ink);
color: var(--paper);
padding: clamp(1.25rem, 2vw, 1.75rem) 0;
border-block: 1px solid rgba(255,255,255,0.06);
z-index: 1;
}
.marquee__track {
display: flex;
width: max-content;
gap: clamp(2rem, 4vw, 4rem);
animation: marquee-roll 38s linear infinite;
will-change: transform;
}
.marquee__group {
display: flex;
align-items: center;
gap: clamp(2rem, 4vw, 4rem);
flex: none;
}
.marquee__group span {
font-family: var(--font-display);
font-size: clamp(1.5rem, 3vw, 2.5rem);
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1;
white-space: nowrap;
color: var(--paper);
}
.marquee__sep {
color: var(--teal) !important;
font-family: var(--font-mono) !important;
font-size: 1rem !important;
opacity: 0.7;
}
@keyframes marquee-roll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
.marquee__track { animation: none; }
}
/* Seam dividers — running stitches between sections */
.seam-divider {
position: absolute;
left: 0;
right: 0;
height: 24px;
width: 100%;
color: var(--ink-a20);
pointer-events: none;
z-index: 4;
}
.seam-divider--top { top: 0; }
.seam-divider--bottom { bottom: 0; }
.seam-divider__path {
stroke-dasharray: 8 10;
animation: seam-creep 18s linear infinite;
}
@keyframes seam-creep {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: -180; }
}
/* Parallax helpers (transform applied by JS) */
[data-parallax] { will-change: transform; }
/* 3D tilt helpers (transform applied by JS, perspective in stage) */
[data-tilt] { transform-style: preserve-3d; transition: transform var(--d-base) var(--ease-out); }
/* ============================================================
5. SITE HEADER + LOGO
============================================================ */
.site-head {
position: fixed;
inset: 0 0 auto 0;
z-index: var(--z-header);
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--sp-5) var(--gutter);
background: var(--paper-a80);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
transition: background 220ms var(--ease-out), border-color 220ms var(--ease-out), color 220ms var(--ease-out);
border-bottom: 1px solid transparent;
color: var(--ink);
}
.site-head[data-scrolled="true"] {
background: var(--paper-a92);
border-bottom-color: var(--ink-a08);
}
.site-head[data-theme="dark"] {
background: rgba(14, 15, 18, 0.72);
border-bottom-color: rgba(255, 255, 255, 0.08);
color: var(--paper);
}
.site-head[data-theme="dark"] .site-nav a { color: rgba(242, 237, 229, 0.7); }
.site-head[data-theme="dark"] .site-nav a:hover { color: var(--paper); }
.site-head[data-theme="dark"] .site-nav a::after { background: var(--paper); }
.site-head[data-theme="dark"] .site-nav a.nav-cta { background: var(--paper); color: var(--ink); }
.site-head[data-theme="dark"] .site-nav a.nav-cta:hover { background: var(--teal); color: var(--paper); }
.brand {
display: inline-flex;
align-items: center;
gap: var(--sp-3);
text-decoration: none;
}
.brand__mark {
width: 44px;
height: 44px;
flex: none;
transition: transform var(--d-base) var(--ease-expo);
will-change: transform;
}
.brand:hover .brand__mark { transform: rotate(-6deg) scale(1.05); }
.brand__name {
font-family: var(--font-display);
font-size: 1.4rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.site-nav {
display: none;
gap: var(--sp-6);
align-items: center;
}
.site-nav a {
font-size: var(--fs-meta);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-soft);
position: relative;
padding: var(--sp-2) 0;
transition: color var(--d-fast) var(--ease-out);
}
.site-nav a::after {
content: '';
position: absolute;
inset: auto 0 -2px 0;
height: 1px;
background: var(--ink);
transform: scaleX(0);
transform-origin: right;
transition: transform var(--d-base) var(--ease-expo);
}
.site-nav a:hover { color: var(--ink); }
.site-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.site-nav a.nav-cta {
background: var(--ink);
color: var(--paper);
padding: var(--sp-3) var(--sp-5);
border-radius: var(--r-pill);
letter-spacing: 0.08em;
transition: background var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-expo), color var(--d-base) var(--ease-out);
}
.site-nav a.nav-cta::after { display: none; }
.site-nav a.nav-cta:hover {
background: var(--steel);
transform: translateY(-1px);
}
@media (min-width: 900px) {
.site-nav { display: flex; }
}
/* ── NAV TOGGLE (hamburger) ── */
.nav-toggle {
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: var(--sp-2);
color: inherit;
z-index: var(--z-panel);
}
@media (min-width: 900px) { .nav-toggle { display: none; } }
.nav-toggle__bar {
display: block;
width: 22px;
height: 2px;
background: currentColor;
border-radius: 1px;
transition: transform var(--d-base) var(--ease-expo), opacity var(--d-fast) var(--ease-out);
transform-origin: center;
}
.site-head[data-menu-open="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-head[data-menu-open="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.site-head[data-menu-open="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ── MOBILE MENU ── */
.mobile-menu {
position: fixed;
inset: 0;
z-index: calc(var(--z-header) - 1);
background: var(--paper);
display: flex;
flex-direction: column;
align-items: center;
justify-content: safe center;
padding: calc(var(--sp-20) + env(safe-area-inset-top)) var(--sp-6) calc(var(--sp-12) + env(safe-area-inset-bottom));
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
pointer-events: none;
opacity: 0;
transition: opacity var(--d-base) var(--ease-out);
}
.mobile-menu[aria-hidden="false"] { pointer-events: auto; opacity: 1; }
.mobile-menu__nav { display: flex; flex-direction: column; align-items: center; gap: var(--sp-6); width: 100%; }
.mobile-menu__link {
font-family: var(--font-display);
font-size: clamp(2.4rem, 10vw, 3.8rem);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink);
text-decoration: none;
opacity: 0;
transform: translateY(16px);
transition: opacity var(--d-base) var(--ease-expo), transform var(--d-base) var(--ease-expo), color var(--d-fast) var(--ease-out);
}
.mobile-menu__link:hover { color: var(--teal); }
.mobile-menu[aria-hidden="false"] .mobile-menu__link { opacity: 1; transform: translateY(0); }
.mobile-menu[aria-hidden="false"] .mobile-menu__link:nth-child(1) { transition-delay: 50ms; }
.mobile-menu[aria-hidden="false"] .mobile-menu__link:nth-child(2) { transition-delay: 95ms; }
.mobile-menu[aria-hidden="false"] .mobile-menu__link:nth-child(3) { transition-delay: 140ms; }
.mobile-menu[aria-hidden="false"] .mobile-menu__link:nth-child(4) { transition-delay: 185ms; }
.mobile-menu[aria-hidden="false"] .mobile-menu__link:nth-child(5) { transition-delay: 230ms; }
.mobile-menu__cta {
font-family: var(--font-mono);
font-size: var(--fs-meta);
letter-spacing: 0.1em;
background: var(--ink);
color: var(--paper) !important;
padding: var(--sp-4) var(--sp-8);
border-radius: var(--r-pill);
margin-top: var(--sp-4);
}
.mobile-menu__cta:hover { background: var(--teal); color: var(--paper) !important; }
@media (min-width: 900px) { .mobile-menu { display: none; } }
/* ============================================================
6. CTA BUTTON
============================================================ */
.cta {
display: inline-flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-4) var(--sp-6);
background: var(--ink);
color: var(--paper);
font-family: var(--font-mono);
font-size: var(--fs-meta);
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
border-radius: var(--r-pill);
position: relative;
overflow: hidden;
isolation: isolate;
transition: transform var(--d-base) var(--ease-expo), color var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out);
will-change: transform;
}
.cta::before {
content: '';
position: absolute;
inset: 0;
background: var(--grad-brand);
z-index: -1;
transform: translateY(101%);
transition: transform var(--d-slow) var(--ease-expo);
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(14,15,18,0.18); }
.cta:hover::before { transform: translateY(0); }
.cta:active { transform: translateY(0); }
.cta__arrow { width: 16px; height: 16px; transition: transform var(--d-base) var(--ease-expo); }
.cta:hover .cta__arrow { transform: translateX(4px); }
.cta--ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.cta--ghost::before { background: var(--ink); }
.cta--ghost:hover { color: var(--paper); }
.cta--block { width: 100%; justify-content: center; }
.cta--large { padding: var(--sp-5) var(--sp-8); font-size: var(--fs-body); letter-spacing: 0.14em; }
.cta--large .cta__arrow { width: 20px; height: 20px; }
/* ============================================================
7. HERO
============================================================ */
.hero {
position: relative;
min-height: 100dvh;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: clamp(7rem, 10vh, 9rem) var(--gutter) clamp(2.5rem, 5vh, 4rem);
overflow: hidden;
}
.hero__inner {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
gap: clamp(1rem, 1.6vw, 1.5rem);
max-width: var(--max-w);
width: 100%;
margin-inline: auto;
/* hero stage transform: scale + opacity driven by JS on scroll */
transform: translate3d(0, var(--hero-y, 0px), 0) scale(var(--hero-scale, 1));
transform-origin: 0% 100%;
opacity: var(--hero-opacity, 1);
will-change: transform, opacity;
}
.hero__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--sp-3);
opacity: 0;
font-size: var(--fs-mono-eyebrow);
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--thread);
}
.hero__eyebrow::before {
content: '';
width: 28px;
height: 1px;
background: currentColor;
display: inline-block;
opacity: 0.45;
}
.hero__title {
font-size: var(--fs-h1);
line-height: 0.88;
letter-spacing: -0.025em;
position: relative;
}
.hero__title-row {
display: block;
overflow: hidden;
padding-block: 0.06em;
}
.hero__title-row .word { display: inline-block; margin-right: 0.25em; }
.hero__title-row .char {
display: inline-block;
will-change: transform, opacity;
transform: translateY(110%) rotate(4deg);
opacity: 0;
}
.hero__title-row--accent { letter-spacing: -0.015em; }
.hero__title-row--accent .char {
background-image: var(--grad-brand);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
.hero__title-row--accent .char { background: none; color: var(--teal); }
}
.hero__lead {
font-size: var(--fs-lead);
line-height: 1.4;
max-width: 36ch;
color: var(--ink-soft);
opacity: 0;
transform: translateY(20px);
}
.hero__cta-row {
display: flex;
flex-wrap: wrap;
gap: var(--sp-4) var(--sp-6);
align-items: center;
opacity: 0;
transform: translateY(20px);
}
.hero__cta-meta {
font-size: var(--fs-meta);
color: var(--ink-mute);
letter-spacing: 0.04em;
display: inline-flex;
align-items: center;
gap: var(--sp-2);
}
.hero__cta-meta::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--teal);
box-shadow: 0 0 0 4px rgba(31, 168, 154, 0.18);
animation: dot-pulse 2.4s var(--ease-in-out) infinite;
}
@keyframes dot-pulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(31, 168, 154, 0.18); }
50% { box-shadow: 0 0 0 8px rgba(31, 168, 154, 0); }
}
.hero__foot {
position: relative;
z-index: 3;
margin-top: clamp(3rem, 6vw, 5rem);
padding-top: var(--sp-5);
border-top: 1px dashed var(--ink-a20);
max-width: var(--max-w);
width: 100%;
margin-inline: auto;
opacity: 0;
}
.hero__foot-meta {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2) var(--sp-6);
font-size: var(--fs-mono-eyebrow);
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--ink-mute);
}
.hero__foot-meta span { white-space: nowrap; }
/* On narrow screens the stats row wraps; reserve room on the right so it
never slides under the vertical SCROLL cue (absolute at the hero's right
gutter). Keeps both elements visible instead of hiding the cue. */
@media (max-width: 900px) {
.hero__foot-meta { padding-right: 3rem; }
}
/* Hero ambient: soft gradient halo */
.hero__halo {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(ellipse 60% 50% at 30% 60%, rgba(31, 168, 154, 0.10), transparent 70%),
radial-gradient(ellipse 40% 40% at 80% 30%, rgba(30, 90, 156, 0.08), transparent 70%);
filter: blur(20px);
will-change: transform;
}
/* Hero grid lines (subtle blueprint feel) */
.hero__grid {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background-image:
linear-gradient(to right, var(--ink-a04) 1px, transparent 1px),
linear-gradient(to bottom, var(--ink-a04) 1px, transparent 1px);
background-size: clamp(60px, 10vw, 120px) clamp(60px, 10vw, 120px);
mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 75%);
opacity: 0;
}
/* Hero photo background (parallax) */
.hero__photo {
position: absolute;
inset: 0;
z-index: 1;
overflow: hidden;
pointer-events: none;
opacity: 0;
transition: opacity 1.4s var(--ease-expo);
}
.hero__photo.is-loaded { opacity: 1; }
.hero__photo img {
position: absolute;
inset: -10% -10% -10% auto;
width: clamp(420px, 60vw, 900px);
height: 120%;
object-fit: cover;
object-position: center;
filter: contrast(0.96) brightness(1.04) saturate(0.92);
mix-blend-mode: multiply;
mask-image: radial-gradient(ellipse 70% 70% at 70% 50%, rgba(0,0,0,0.6), rgba(0,0,0,0));
-webkit-mask-image: radial-gradient(ellipse 70% 70% at 70% 50%, rgba(0,0,0,0.6), rgba(0,0,0,0));
}
/* Scroll cue */
.scroll-cue {
position: absolute;
bottom: clamp(1.5rem, 3vh, 2.5rem);
right: var(--gutter);
display: inline-flex;
flex-direction: column;
align-items: center;
gap: var(--sp-2);
font-size: var(--fs-mono-eyebrow);
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--ink-soft);
opacity: 0;
z-index: 3;
writing-mode: vertical-rl;
transform: rotate(180deg);
}
.scroll-cue__line {
display: block;
width: 1px;
height: 32px;
background: var(--ink-a20);
position: relative;
overflow: hidden;
writing-mode: horizontal-tb;
}
.scroll-cue__line::before {
content: '';
position: absolute;
inset: 0;
background: var(--ink);
transform-origin: top;
animation: scroll-cue-pulse 2.4s var(--ease-in-out) infinite;
}
@keyframes scroll-cue-pulse {
0% { transform: scaleY(0); transform-origin: top; }
50% { transform: scaleY(1); transform-origin: top; }
51% { transform: scaleY(1); transform-origin: bottom; }
100% { transform: scaleY(0); transform-origin: bottom; }
}
/* ============================================================
8. INDUSTRIES SECTION (Section 2) — editorial asymmetric photo grid
No pin, no scrub. Reveal-on-enter cascade via data-reveal-stagger,
subtle continuous parallax on photos via data-parallax.
============================================================ */
.industries {
position: relative;
background: var(--ink);
color: var(--paper);
padding: clamp(4.5rem, 8vw, 7.5rem) var(--gutter);
isolation: isolate;
overflow: hidden;
}
.industries > .section-watermark {
top: clamp(2.5rem, 5vw, 4rem);
}
.industries__head {
max-width: var(--max-w);
margin: 0 auto clamp(2.5rem, 5vw, 5rem);
display: flex;
flex-direction: column;
gap: clamp(1rem, 1.6vw, 1.5rem);
}
.industries__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--sp-3);
font-family: var(--font-mono);
font-size: var(--fs-mono-eyebrow);
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--teal);
align-self: flex-start;
}
.industries__eyebrow::before {
content: '';
width: 28px;
height: 1px;
background: currentColor;
display: inline-block;
opacity: 0.45;
}
.industries__title {
font-family: var(--font-display);
font-size: var(--fs-h2);
line-height: 0.95;
letter-spacing: -0.01em;
color: var(--paper);
max-width: 22ch;
text-transform: none;
}
.industries__title-accent {
background: var(--grad-brand);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.industries__lede {
font-family: var(--font-mono);
font-size: var(--fs-lead);
line-height: 1.5;
color: var(--mute);
max-width: 56ch;
}
.industries__grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: clamp(72px, 8vw, 120px);
gap: clamp(0.5rem, 1vw, 1rem);
max-width: var(--max-w);
margin: 0 auto;
}
/* Row 1: large / narrow / mid — span 4 grid-rows = tallest hero row */
.industry-1 { grid-column: span 5; grid-row: span 4; }
.industry-2 { grid-column: span 3; grid-row: span 4; }
.industry-3 { grid-column: span 4; grid-row: span 4; }
/* Row 2: mid / narrow / large — span 3 = mid */
.industry-4 { grid-column: span 4; grid-row: span 3; }
.industry-5 { grid-column: span 3; grid-row: span 3; }
.industry-6 { grid-column: span 5; grid-row: span 3; }
/* Row 3: extra wide / mid — span 4 = tall closer */
.industry-7 { grid-column: span 7; grid-row: span 4; }
.industry-8 { grid-column: span 5; grid-row: span 4; }
/* Tile base — overlapping layers: photo, gradient overlay, meta */
.industry {
position: relative;
/* NO overflow: hidden — Chromium flattens nested preserve-3d when the
ancestor has overflow != visible, killing the text translateZ parallax.
Clipping is done on .industry__photo (the only bleeding child).
NO isolation: isolate — it creates a compositing barrier that can
interfere with how preserve-3d children project through perspective. */
border-radius: var(--r-md);
background: var(--ink-soft);
cursor: pointer;
transition: box-shadow var(--d-base) var(--ease-out);
outline: none;
/* Vanilla-Tilt needs 3D context for child translateZ + glare layer */
transform-style: preserve-3d;
will-change: transform;
}
.industry__photo {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden; /* contain bleed locally — keeps .industry 3D-pure */
border-radius: inherit; /* clip to tile's rounded corners */
will-change: transform;
}
.industry__photo picture {
display: block;
width: 100%;
height: 100%;
}
.industry__photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
filter: brightness(0.74) contrast(1.06) saturate(0.92);
/* Slightly larger baseline scale so the hover bump (1.06) has visible travel
and the inner crop hides any edge artifacts. */
transform: scale(1.04);
transition: transform var(--d-slow) var(--ease-expo), filter var(--d-slow) var(--ease-expo);
}
.industry__overlay {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(180deg, rgba(14,15,18,0) 0%, rgba(14,15,18,0.25) 45%, rgba(14,15,18,0.82) 100%),
linear-gradient(0deg, rgba(0,0,0,0.05), rgba(0,0,0,0.05));
pointer-events: none;
transition: opacity var(--d-base) var(--ease-out);
}
.industry__meta {
position: absolute;
/* bottom: clamp(0.75rem, 2vw, 1.75rem) — lifts the text block off the tile's
bottom edge so it sits in the lower-third instead of hugging the corner.
Scales with viewport: ~12px on small screens up to ~28px on desktop. */
inset: auto 0 clamp(0.75rem, 2vw, 1.75rem) 0;
z-index: 2;
padding: clamp(1rem, 2.2vw, 1.75rem);
color: var(--paper);
display: flex;
flex-direction: column;
gap: 0.35rem;
/* Single-plate lift on the WHOLE text block at Z=85. translateZ(85px) gives
perspective enlargement of 500/415 = 1.205×; counter-scale(0.83) trims
back to ≈1.0× net — no visual size change. Because meta spans the full
tile width its horizontal center sits at the tile's center, so perspective
enlargement is symmetric (no off-center push). All three leaves ride this
same plate, so their left edges stay PERFECTLY ALIGNED across all 8 tiles
— and they all share the same parallax rate against the photo. Parallax
during tilt: 85 × sin(4°–8°) = 5.9–11.8px relative to the photo. */
transform-style: preserve-3d;
transform: translateZ(85px) scale(0.83);
}
/* Leaves carry NO 3D transforms — they all ride the meta plate at Z=35 above.
This keeps left edges aligned identically across all 8 tiles. */
.industry__num {
font-family: var(--font-mono);
font-size: var(--fs-mono-eyebrow);
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 0.5rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.industry__num::after {
content: '';
width: 24px;
height: 1px;
background: rgba(255, 255, 255, 0.45);
}
.industry__name {
font-family: var(--font-display);
font-size: clamp(1.5rem, 2.4vw, 2.5rem);
line-height: 0.95;
letter-spacing: 0.005em;
color: var(--paper);
text-transform: none;
/* Shadow amplifies the sense that text is lifted off the photo surface. */
text-shadow:
0 4px 8px rgba(0, 0, 0, 0.45),
0 18px 40px rgba(0, 0, 0, 0.75);
}
.industry__spec {
font-family: var(--font-mono);
font-size: var(--fs-meta);
line-height: 1.5;
color: rgba(248, 243, 233, 0.88);
/* max-width: 100% so the spec never widens past its container (= meta's content
box = tile width minus padding). Was 36ch — that overflowed narrow 3-col tiles
because 36ch is wider than a 3-column tile's content area. */
max-width: 100%;
margin-top: 0.35rem;
/* Hover reveal: slides up 8px while fading in. No 3D — the whole meta plate
already carries the depth lift; the spec just rides it. */
opacity: 0;
transform: translateY(8px);
transition: transform var(--d-base) var(--ease-expo), opacity var(--d-base) var(--ease-expo);
}
/* Desktop hover only — keyboard focus mirrors hover.
Lift comes from Vanilla-Tilt's scale3d; we only ramp the shadow + lift
z-index so the tilted tile renders above DOM-later neighbours. */
@media (hover: hover) and (pointer: fine) {
.industry:hover,
.industry:focus-visible {
z-index: 2;
box-shadow: 0 22px 64px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(31, 168, 154, 0.18);
}
.industry:hover .industry__photo img,
.industry:focus-visible .industry__photo img {
transform: scale(1.06);
filter: brightness(0.84) contrast(1.08) saturate(1);
}
.industry:hover .industry__overlay,
.industry:focus-visible .industry__overlay {
opacity: 0.85;
}
.industry:hover .industry__spec,
.industry:focus-visible .industry__spec {
/* Settles into place (Y=0). Depth lift lives on the parent meta plate. */
transform: translateY(0);
opacity: 1;
}
.industry:focus-visible {
outline: 2px solid var(--teal);
outline-offset: 4px;
}
}
/* TABLET (≤ 1024px): 2-column layout, large tiles span both columns
Spec line always visible — no hover on touch */
@media (max-width: 1024px) {
.industries__grid {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: clamp(120px, 22vw, 180px);
gap: clamp(0.625rem, 1.4vw, 1rem);
}
.industry-1, .industry-2, .industry-3,
.industry-4, .industry-5, .industry-6,
.industry-7, .industry-8 {
grid-column: span 1;
grid-row: span 2;
}
/* Hero tiles span full width for emphasis */
.industry-1, .industry-6, .industry-7 {
grid-column: span 2;
grid-row: span 2;
}
.industry__spec {
opacity: 1;
transform: none;
}
}
/* PHONE (≤ 640px): single column stack */
@media (max-width: 640px) {
.industries {
padding: clamp(3rem, 8vw, 5rem) var(--gutter) clamp(2.5rem, 6vw, 4rem);
}
.industries__head {
margin-bottom: clamp(1.75rem, 6vw, 2.5rem);
}
.industries__grid {
grid-template-columns: 1fr;
grid-auto-rows: clamp(220px, 65vw, 320px);
gap: 0.5rem;
}
.industry-1, .industry-2, .industry-3,
.industry-4, .industry-5, .industry-6,
.industry-7, .industry-8 {
grid-column: 1;
grid-row: span 1;
}
.industry__meta {
padding: clamp(1rem, 4vw, 1.25rem);
}
}
/* Reduced motion — neutralize parallax + transitions */
@media (prefers-reduced-motion: reduce) {
.industry,
.industry__photo img,
.industry__overlay,
.industry__spec {
transition: none;
}
.industry__photo img {
transform: none;
}
.industry__spec {
opacity: 1;
transform: none;
}
}
/* ============================================================
9. TRUST (Section 3) — Editorial heading + animated stat counters
============================================================ */
.trust {
--ease-product: cubic-bezier(0.32, 0.72, 0, 1);
--ease-product-out: cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
background: var(--paper);
padding: clamp(4.5rem, 8vw, 7.5rem) 0;
}
.trust__inner {
position: relative;
width: 100%;
max-width: calc(var(--max-w) + 2 * var(--gutter));
margin: 0 auto;
padding-inline: var(--gutter);
display: flex;
flex-direction: column;
gap: clamp(3rem, 7vw, 6rem);
}
/* ---- Top row: text head (left) + machine image (right) ---- */
.trust__top {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
gap: clamp(2rem, 5vw, 5rem);
}
/* ---- Head: eyebrow + display title + lede paragraph ---- */
.trust__head {
display: flex;
flex-direction: column;
gap: clamp(1rem, 2vw, 1.6rem);
max-width: 56ch;
}
/* ---- Machine image: creative entrance reveal + idle float ----
Initial state set by GSAP on first paint. The keyframe is the
continuous idle float that runs after the entrance settles. */
.trust__machine {
position: relative;
width: 100%;
max-width: 620px;
aspect-ratio: 1 / 1;
margin: 0 0 0 auto; /* right-align inside its column */
display: block;
isolation: isolate; /* contain the drop-shadow */
--float-amp: 0px; /* unlocked by JS after entrance */
/* Wrapper carries the idle float so it can't fight the entrance transform on the img */
animation: trust-machine-float 5.6s ease-in-out infinite alternate;
}
.trust__machine-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
/* Cinematic drop shadow + slight contrast lift */
filter: drop-shadow(0 32px 60px rgba(14,15,18,0.10))
drop-shadow(0 6px 14px rgba(14,15,18,0.06))
contrast(1.02) saturate(0.98);
/* No CSS initial state — JS sets the initial off-screen position with GSAP.
Mixing CSS transform + GSAP xPercent stacks two translates and breaks the slide. */
will-change: transform, opacity;
}
/* Cream radial halo behind the machine — extra depth, blends into paper */
.trust__machine-vignette {
position: absolute;
inset: 6%;
z-index: -1;
border-radius: 50%;
background:
radial-gradient(circle at 50% 55%,
rgba(255,255,255,0.55) 0%,
rgba(242,237,229,0.0) 65%);
pointer-events: none;
opacity: 0;
transition: opacity 1.2s ease 0.7s;
}
.trust__machine.is-revealed .trust__machine-vignette { opacity: 1; }
@keyframes trust-machine-float {
0% { transform: translate3d(0, calc(var(--float-amp) * -1), 0); }
100% { transform: translate3d(0, var(--float-amp), 0); }
}
.trust__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--sp-3);
font-family: var(--font-mono);
font-size: var(--fs-mono-eyebrow);
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--thread);
font-weight: 400;
}
.trust__eyebrow::before {
content: '';
width: 28px;
height: 1px;
background: currentColor;
display: inline-block;
opacity: 0.45;
}
.trust__display {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(2.8rem, 7.6vw, 7rem);
line-height: 0.92;
letter-spacing: -0.005em;
text-transform: uppercase;
color: var(--ink);
margin: 0;
display: flex;
flex-direction: column;
}
.trust__display-line { display: block; }
.trust__display-line--accent {
color: var(--ink);
background: var(--grad-brand, linear-gradient(135deg, #1FA89A, #2c7d9f));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.trust__lede {
font-family: var(--font-mono);
font-size: clamp(0.95rem, 1.05vw, 1.1rem);
font-weight: 400;
line-height: 1.6;
letter-spacing: 0;
color: var(--thread);
max-width: 56ch;
margin: 0;
}
/* ---- Specs: persistent monospace numbers strip ---- */
.trust__specs {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(1rem, 2.5vw, 2.5rem);
align-items: end;
padding-top: clamp(1.5rem, 3vw, 2.5rem);
border-top: 1px solid rgba(14,15,18,0.08);
}
.trust__spec {
display: flex;
flex-direction: column;
gap: var(--sp-2);
}
.trust__spec-num {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(2.4rem, 5.2vw, 4.4rem);
line-height: 0.9;
letter-spacing: -0.01em;
color: var(--ink);
background: var(--grad-brand, linear-gradient(135deg, #1FA89A, #2c7d9f));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-feature-settings: "tnum" 1, "lnum" 1;
}
.trust__spec-label {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.22em;
color: var(--thread);
font-weight: 500;
}
/* ---- Responsive (mobile collapse) ---- */
@media (max-width: 900px) {
.trust__top {
grid-template-columns: 1fr;
gap: clamp(2rem, 5vw, 3rem);
}
.trust__machine {
max-width: 420px;
margin: 0 auto; /* center on mobile */
}
.trust__display { font-size: clamp(2.1rem, 9vw, 3.6rem); }
.trust__lede { font-size: 0.95rem; }
.trust__specs {
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-5) var(--sp-4);
}
.trust__spec-num { font-size: clamp(1.9rem, 7vw, 2.6rem); }
}
@media (prefers-reduced-motion: reduce) {
.trust__machine { animation: none !important; }
.trust__machine-img {
clip-path: none !important;
transform: none !important;
opacity: 1 !important;
}
.trust__machine-vignette { opacity: 1 !important; }
}
/* ============================================================
10. PRODUCTS (Section 4) — expandable cards
============================================================ */
.products {
position: relative;
padding: clamp(4.5rem, 8vw, 7.5rem) 0;
background: var(--paper-soft);
overflow: hidden;
}
.products::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 24px;
background-image: repeating-linear-gradient(to right, var(--ink-a12) 0 6px, transparent 6px 12px);
background-size: 18px 1px;
background-repeat: repeat-x;
background-position: 0 12px;
opacity: 0.35;
pointer-events: none;
}
.products::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 100px;
background: linear-gradient(to right, transparent, var(--paper-soft));
pointer-events: none;
z-index: 2;
}
.products__head {
padding-inline: var(--gutter);
max-width: calc(var(--max-w) + 2 * var(--gutter));
margin: 0 auto var(--sp-10);
}
.products__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--sp-3);
font-family: var(--font-mono);
font-size: var(--fs-mono-eyebrow);
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--thread);
margin-bottom: var(--sp-3);
}
.products__eyebrow::before {
content: '';
width: 28px;
height: 1px;
background: currentColor;
display: inline-block;
opacity: 0.45;
}
.products__title {
font-family: var(--font-display);
font-size: var(--fs-h2);
line-height: 0.95;
letter-spacing: -0.01em;
color: var(--ink);
}
.products__title-accent {
background: var(--grad-brand);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.products__sub {
margin-top: var(--sp-3);
font-family: var(--font-mono);
font-size: var(--fs-meta);
color: var(--ink-mute);
letter-spacing: 0.04em;
}
.products__track {
display: flex;
gap: var(--sp-4);
padding-inline: max(var(--gutter), calc((100vw - var(--max-w)) / 2));
padding-top: 8px;
padding-bottom: 64px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-padding-inline: max(var(--gutter), calc((100vw - var(--max-w)) / 2));
scroll-behavior: smooth;
cursor: grab;
user-select: none;
}
@media (prefers-reduced-motion: reduce) {
.products__track { scroll-behavior: auto; }
}
.products__track::-webkit-scrollbar { display: none; }
.products__track.is-dragging { cursor: grabbing; }
.products__track.is-dragging .product-card { pointer-events: none; }
.product-card {
flex: 0 0 260px;
position: relative;
display: block;
padding: 0;
border: 1px dashed var(--mute);
border-radius: var(--r-lg);
background: var(--paper);
transition: border-color 0.4s var(--ease-out), transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
scroll-snap-align: start;
overflow: hidden;
min-height: 360px;
}
.product-card:hover {
border-color: var(--teal);
border-style: solid;
transform: translateY(-4px);
box-shadow: 0 1px 2px rgba(14,15,18,0.04), 0 16px 40px rgba(14,15,18,0.12), 0 32px 80px rgba(14,15,18,0.06);
}
.product-card__face {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-4);
padding: var(--sp-8) var(--sp-5) var(--sp-6);
transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
z-index: 2;
}
.product-card__svg { width: 110px; height: 130px; flex: none; }
.product-card__svg path,
.product-card__svg line,
.product-card__svg polyline {
fill: none;
stroke: var(--ink);
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.product-card__name {
font-family: var(--font-mono);
font-size: var(--fs-meta);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink);
text-align: center;
}
.product-card__hint {
display: inline-flex;
align-items: center;
gap: var(--sp-1);
font-family: var(--font-mono);
font-size: var(--fs-mono-eyebrow);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--teal);
margin-top: var(--sp-1);
opacity: 0.7;
transition: opacity var(--d-base) var(--ease-out);
}
.product-card__hint::before { content: '↘'; }
.product-card:hover .product-card__hint { opacity: 1; }
/* Back panel reveals on hover */
.product-card__back {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--sp-6) var(--sp-5);
background: var(--paper);
border-radius: var(--r-lg);
opacity: 0;
transform: translateY(12px);
pointer-events: none;
transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
z-index: 3;
}
.product-card:hover .product-card__back,
.product-card:focus-within .product-card__back,
.product-card[data-open="true"] .product-card__back {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.product-card:hover .product-card__face,
.product-card:focus-within .product-card__face,
.product-card[data-open="true"] .product-card__face {
opacity: 0;
transform: translateY(-8px);
}
.product-card__specs {
display: grid;
gap: var(--sp-3);
}
.product-card__specs li {
display: block;
padding-bottom: var(--sp-2);
border-bottom: 1px dashed var(--ink-a12);
font-family: var(--font-mono);
font-size: var(--fs-meta);
}
.product-card__specs li:last-child { border-bottom: 0; }
.product-card__specs li span {
display: block;
margin-bottom: 2px;
font-size: var(--fs-mono-eyebrow);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--thread);
}
.product-card__specs li b {
display: block;
font-weight: 500;
color: var(--ink);
letter-spacing: 0.01em;
overflow-wrap: anywhere;
line-height: 1.35;
}
/* Slider nav arrows (desktop only) */
.products__nav {
display: none;
justify-content: center;
align-items: center;
gap: var(--sp-4);
margin-top: var(--sp-6);
padding-inline: var(--gutter);
}
@media (min-width: 901px) {
.products__nav { display: flex; }
}
.products__nav-btn {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px dashed var(--mute);
border-radius: 50%;
background: var(--paper);
color: var(--ink);
cursor: pointer;
transition: border-color 0.4s var(--ease-out), border-style 0.4s var(--ease-out), color 0.4s var(--ease-out), background 0.4s var(--ease-out), transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.products__nav-btn:hover:not(:disabled) {
border-color: var(--teal);
border-style: solid;
color: var(--teal);
transform: translateY(-2px);
box-shadow: 0 1px 2px rgba(14,15,18,0.04), 0 10px 24px rgba(14,15,18,0.08);
}
.products__nav-btn:focus-visible {
outline: 2px solid var(--teal);
outline-offset: 3px;
}
.products__nav-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.products__nav-btn svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
@media (max-width: 900px) {
.products::after { display: none; }
.products__track {
flex-direction: column;
overflow-x: visible;
cursor: default;
padding-bottom: var(--sp-4);
}
.product-card { flex: 1; width: 100%; min-height: 0; }
.product-card:hover {
transform: none;
box-shadow: none;
border-color: var(--mute);
border-style: dashed;
}
.product-card__face {
flex-direction: row;
align-items: center;
gap: var(--sp-5);
padding: var(--sp-5);
}
.product-card__svg { width: 64px; height: 80px; }
.product-card__name { text-align: left; flex: 1; }
.product-card__hint { display: none; }
/* On mobile back panel is always-visible alongside face */
.product-card__back {
position: relative;
inset: auto;
opacity: 1;
transform: none;
pointer-events: auto;
padding: 0 var(--sp-5) var(--sp-5);
background: transparent;
}
.product-card:hover .product-card__face,
.product-card[data-open="true"] .product-card__face { opacity: 1; transform: none; }
.product-card__specs li { padding-bottom: var(--sp-3); }
}
/* ============================================================
11. END-TO-END (Section 5) — photo tile grid
============================================================ */
.endtoend {
position: relative;
padding: clamp(4rem, 10vw, 9rem) var(--gutter);
background: var(--ink);
color: var(--paper);
overflow: hidden;
}
.endtoend::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 80% 50% at 70% 30%, rgba(31,168,154,0.06), transparent 70%);
pointer-events: none;
}
.endtoend__inner { max-width: var(--max-w); margin-inline: auto; position: relative; z-index: 1; }
.endtoend__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--sp-3);
font-family: var(--font-mono);
font-size: var(--fs-mono-eyebrow);
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--teal);
margin-bottom: var(--sp-3);
}
.endtoend__eyebrow::before {
content: '';
width: 28px;
height: 1px;
background: currentColor;
display: inline-block;
opacity: 0.45;
}
.endtoend__title {
font-family: var(--font-display);
font-size: var(--fs-h2);
line-height: 0.95;
letter-spacing: -0.01em;
color: var(--paper);
}
.endtoend__title-accent {
background: var(--grad-brand);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.endtoend__lead {
margin-top: var(--sp-4);
margin-bottom: clamp(2.5rem, 5vw, 4rem);
font-family: var(--font-mono);
font-size: var(--fs-lead);
color: var(--mute);
max-width: 56ch;
}
.cap-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-4);
}
.cap-grid > .cap-tile:nth-child(1),
.cap-grid > .cap-tile:nth-child(7) { grid-column: span 2; }
/* Horizontal scroll mode (set by JS on desktop) — flex row, fixed-width tiles */
@media (min-width: 1101px) {
.endtoend[data-horizontal="true"] .cap-grid {
display: flex;
grid-template-columns: none;
gap: clamp(1rem, 2vw, 1.5rem);
width: max-content;
will-change: transform;
}
.endtoend[data-horizontal="true"] .cap-grid > .cap-tile {
flex: 0 0 clamp(260px, 24vw, 360px);
grid-column: auto;
min-height: 0;
transition: transform 0.55s var(--ease-expo), border-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), opacity 0.45s var(--ease-out);
}
.endtoend[data-horizontal="true"] .cap-tile__photo {
aspect-ratio: 5 / 3;
}
.endtoend[data-horizontal="true"] .cap-tile__body {
padding: clamp(0.9rem, 2vh, 1.4rem) clamp(1.1rem, 1.8vw, 1.5rem) clamp(1.1rem, 2.4vh, 1.75rem);
gap: clamp(0.25rem, 0.8vh, 0.5rem);
}
.endtoend[data-horizontal="true"] .cap-tile__title {
font-size: clamp(1.15rem, 1.9vw, 1.65rem);
}
.endtoend[data-horizontal="true"] .cap-tile__desc {
font-size: clamp(0.78rem, 0.85vw, 0.9rem);
line-height: 1.5;
}
.endtoend[data-horizontal="true"] .cap-tile[data-cap-focus="true"] {
transform: scale(1.02);
border-color: rgba(31, 168, 154, 0.5);
box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(31,168,154,0.25);
z-index: 2;
}
.endtoend[data-horizontal="true"] .cap-tile:not([data-cap-focus="true"]) {
opacity: 0.6;
}
.endtoend[data-horizontal="true"] {
overflow: hidden;
padding-block: 0;
height: 100vh;
}
.endtoend[data-horizontal="true"] .endtoend__inner {
display: flex;
flex-direction: column;
gap: clamp(0.5rem, 1.2vh, 1rem);
height: 100vh;
justify-content: flex-start;
max-width: var(--max-w);
padding: clamp(6.5rem, 10vh, 8rem) 0 clamp(0.25rem, 0.75vh, 0.6rem);
margin-inline: auto;
}
.endtoend[data-horizontal="true"] .endtoend__lead {
margin-bottom: clamp(1.25rem, 3vh, 2.5rem);
}
.endtoend[data-horizontal="true"] .endtoend__title {
font-size: clamp(1.85rem, 4.2vw, 3.5rem);
max-width: 22ch;
line-height: 1;
}
.endtoend[data-horizontal="true"] .endtoend__lead {
font-size: clamp(0.85rem, 1vw, 1rem);
}
/* Watermark stays consistent with other sections (top-right), pushed below navbar */
.endtoend[data-horizontal="true"] .section-watermark {
top: clamp(6.5rem, 12vh, 8.5rem);
right: clamp(1rem, 3vw, 3rem);
}
/* Horizontal progress rail at section bottom */
.endtoend[data-horizontal="true"]::after {
content: '';
position: absolute;
left: clamp(2rem, 6vw, 5rem);
right: clamp(2rem, 6vw, 5rem);
bottom: clamp(0.75rem, 1.5vh, 1.25rem);
height: 1px;
background: linear-gradient(to right, rgba(242,237,229,0.08) 0 var(--cap-progress, 0%), rgba(31,168,154,0.55) var(--cap-progress, 0%) calc(var(--cap-progress, 0%) + 6%), rgba(242,237,229,0.08) calc(var(--cap-progress, 0%) + 6%));
z-index: 3;
pointer-events: none;
}
/* Stronger focus state — depth + teal halo */
.endtoend[data-horizontal="true"] .cap-tile[data-cap-focus="true"] {
transform: translateY(-6px) scale(1.015);
border-color: rgba(31, 168, 154, 0.55);
box-shadow: 0 30px 70px rgba(0,0,0,0.55), 0 0 0 1px rgba(31,168,154,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
z-index: 2;
}
.endtoend[data-horizontal="true"] .cap-tile[data-cap-focus="true"] .cap-tile__photo img {
transform: scale(1.04);
filter: contrast(1.1) brightness(0.95) saturate(1.05);
}
.endtoend[data-horizontal="true"] .cap-tile[data-cap-focus="true"] .cap-tile__photo--icon img {
transform: translate(-50%, -50%) scale(1.08);
}
.endtoend[data-horizontal="true"] .cap-tile__photo--icon img {
transition: transform 0.55s var(--ease-expo);
}
.endtoend[data-horizontal="true"] .cap-tile:not([data-cap-focus="true"]) {
opacity: 0.45;
transform: translateY(0) scale(0.98);
}
.endtoend[data-horizontal="true"] .endtoend__title { max-width: 22ch; }
}
.cap-tile {
position: relative;
overflow: hidden;
border-radius: var(--r-lg);
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.06);
display: flex;
flex-direction: column;
min-height: 220px;
opacity: 1;
transform: translateY(0);
transition: transform var(--d-slow) var(--ease-expo), border-color var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out);
}
/* Opacity transition only on desktop horizontal-pin (focus dim ↔ active).
Mobile reveal is GSAP-scrubbed — a CSS opacity transition would fight
the per-frame scrub and visually stick tiles at opacity 1. */
.endtoend[data-horizontal="true"] .cap-tile {
transition: transform var(--d-slow) var(--ease-expo), opacity var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out);
}
.cap-tile[data-state="enter"] { opacity: 0; transform: translateY(28px); }
.cap-tile:hover {
border-color: rgba(31, 168, 154, 0.45);
box-shadow: 0 16px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(31,168,154,0.2);
}
.cap-tile__photo {
position: relative;
width: 100%;
aspect-ratio: 5 / 3;
overflow: hidden;
flex: none;
background: var(--ink-soft);
}
.cap-tile__photo img {
width: 100%;
height: 100%;
object-fit: cover;
filter: contrast(1.05) brightness(0.85) saturate(0.95);
transition: transform 1.4s var(--ease-expo), filter var(--d-slow) var(--ease-out);
}
.cap-tile:hover .cap-tile__photo img { transform: scale(1.06); filter: contrast(1.08) brightness(0.95) saturate(1); }
.cap-tile__photo::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(14,15,18,0) 40%, rgba(14,15,18,0.7) 100%);
pointer-events: none;
}
.cap-tile__photo--icon { background: var(--paper); position: relative; aspect-ratio: 5 / 3; padding: var(--sp-3); }
.cap-tile__photo--icon img {
position: absolute;
top: 50%;
left: 50%;
width: calc(100% - 2 * var(--sp-3));
height: calc(100% - 2 * var(--sp-3));
max-width: 180px;
max-height: 180px;
object-fit: contain;
filter: none !important;
mix-blend-mode: multiply;
transform: translate(-50%, -50%);
transition: transform 0.6s var(--ease-expo);
}
.cap-tile:hover .cap-tile__photo--icon img { transform: translate(-50%, -50%) scale(1.06); }
.cap-tile__photo--icon::after { display: none; }
.cap-tile__body {
padding: var(--sp-5) var(--sp-5) var(--sp-6);
display: flex;
flex-direction: column;
gap: var(--sp-2);
flex: 1;
}
.cap-tile__num {
font-family: var(--font-mono);
font-size: var(--fs-mono-eyebrow);
letter-spacing: 0.18em;
color: var(--teal);
text-transform: uppercase;
}
.cap-tile__title {
font-family: var(--font-display);
font-size: clamp(1.5rem, 2.4vw, 2.25rem);
line-height: 1;
letter-spacing: 0.02em;
color: var(--paper);
}
.cap-tile__desc {
font-family: var(--font-mono);
font-size: var(--fs-meta);
line-height: 1.55;
color: rgba(242, 237, 229, 0.74);
max-width: 32ch;
}
@media (max-width: 1100px) {
.cap-grid { grid-template-columns: repeat(3, 1fr); }
.cap-grid > .cap-tile:nth-child(1),
.cap-grid > .cap-tile:nth-child(7) { grid-column: span 1; }
}
@media (max-width: 700px) {
.cap-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
.cap-tile { min-height: 180px; }
.cap-tile__body { padding: var(--sp-4); }
}
@media (max-width: 460px) {
.cap-grid { grid-template-columns: 1fr; }
}
/* ============================================================
12. PROCESS (Section 6) — compressed pin
============================================================ */
.process {
background: var(--paper);
position: relative;
overflow: hidden;
}
.process > .section-watermark {
top: clamp(6.5rem, 12vh, 8.5rem);
}
.process__pin {
height: 100dvh;
display: flex;
align-items: center;
padding: 0 var(--gutter);
}
.process__pin-inner {
max-width: var(--max-w);
margin-inline: auto;
width: 100%;
}
.process__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--sp-3);
font-family: var(--font-mono);
font-size: var(--fs-mono-eyebrow);
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--thread);
margin-bottom: var(--sp-3);
}
.process__eyebrow::before {
content: '';
width: 28px;
height: 1px;
background: currentColor;
display: inline-block;
opacity: 0.45;
}
.process__heading {
font-family: var(--font-display);
font-size: var(--fs-h2);
line-height: 0.95;
letter-spacing: -0.01em;
color: var(--ink);
margin-bottom: var(--sp-8);
}
.process__heading-accent {
background: var(--grad-brand);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.process__progress-meta {
display: flex;
align-items: baseline;
gap: var(--sp-3);
margin-bottom: var(--sp-5);
font-family: var(--font-mono);
font-size: var(--fs-mono-eyebrow);
letter-spacing: 0.18em;
text-transform: uppercase;
}
.process__progress-label { color: var(--thread); }
.process__progress-counter {
font-family: var(--font-display);
font-size: var(--fs-h3);
letter-spacing: 0.04em;
background: var(--grad-brand);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}
.process__steps {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--sp-5);
position: relative;
padding-top: var(--sp-10);
border-top: 2px dashed var(--mute);
}
.process__steps::after {
content: '';
position: absolute;
top: -2px;
left: 0;
height: 2px;
width: var(--process-fill, 0%);
background: var(--grad-brand);
transition: width 0.18s linear;
}
.process__step {
display: flex;
flex-direction: column;
gap: var(--sp-2);
opacity: 0.35;
transition: opacity 0.45s ease-out;
}
.process__step[data-active="true"] { opacity: 1; }
.process__step-num {
font-family: var(--font-mono);
font-size: var(--fs-meta);
color: var(--thread);
letter-spacing: 0.1em;
}
.process__step-name {
font-family: var(--font-display);
font-size: clamp(1.5rem, 2.5vw, 2.25rem);
line-height: 1;
letter-spacing: -0.005em;
color: var(--ink);
margin-bottom: var(--sp-2);
}
.process__step[data-active="true"] .process__step-name {
background: var(--grad-brand);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}
.process__step-desc {
font-family: var(--font-mono);
font-size: var(--fs-meta);
color: var(--ink-soft);
line-height: 1.55;
max-width: 22ch;
}
.process__step:not([data-active="true"]) .process__step-desc { color: var(--ink-mute); }
@media (max-width: 900px) {
.process__pin { height: auto; padding: clamp(4rem, 10vw, 6rem) var(--gutter); }
.process__steps {
grid-template-columns: 1fr;
border-top: none;
border-left: 2px dashed var(--mute);
padding-top: 0;
padding-left: var(--sp-5);
gap: var(--sp-8);
}
.process__steps::after {
top: 0;
left: -2px;
width: 2px;
height: var(--process-fill, 0%);
}
.process__step { opacity: 1; }
}
/* ============================================================
13. QUOTE CTA (Section 7)
============================================================ */
.quote-cta {
background: var(--ink);
padding: clamp(4.5rem, 8vw, 7.5rem) var(--gutter);
position: relative;
overflow: hidden;
--gx: 70%;
--gy: 50%;
}
.quote-cta__photo {
position: absolute;
inset: -5% 0 -5% 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.quote-cta__photo img {
width: 100%;
height: 110%;
object-fit: cover;
object-position: right center;
opacity: 0.22;
filter: contrast(1.05) brightness(0.85);
mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,1) 60%, rgba(0,0,0,1) 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,1) 60%, rgba(0,0,0,1) 100%);
}
.quote-cta__glow {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
background:
radial-gradient(620px circle at var(--gx) var(--gy), rgba(31, 168, 154, 0.22) 0%, rgba(31, 168, 154, 0.08) 30%, transparent 65%),
radial-gradient(900px circle at calc(100% - var(--gx)) calc(100% - var(--gy)), rgba(196, 188, 172, 0.05) 0%, transparent 55%);
transition: background 240ms ease-out;
}
.quote-cta__stitch {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
opacity: 0;
transform: translate3d(0, 18px, 0);
transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.quote-cta__stitch path {
stroke-dashoffset: 800;
/* No animation in base state — re-applied when .is-revealed lands so the
draw replays every time the section re-enters the viewport. */
}
.quote-cta.is-revealed .quote-cta__stitch { opacity: 1; transform: translate3d(0, 0, 0); }
.quote-cta.is-revealed .quote-cta__stitch path {
animation: qc-stitch-draw 2.4s ease forwards;
}
@keyframes qc-stitch-draw {
to { stroke-dashoffset: 0; }
}
.quote-cta__inner {
max-width: 720px;
margin-inline: auto;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--sp-6);
position: relative;
z-index: 2;
}
.quote-cta__eyebrow {
font-family: var(--font-mono);
font-size: var(--fs-mono-eyebrow);
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--teal);
opacity: 0;
transform: translate3d(0, 12px, 0);
transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.quote-cta__eyebrow.is-revealed { opacity: 1; transform: none; }
.quote-cta__title {
font-family: var(--font-display);
font-size: var(--fs-h1);
line-height: 0.92;
letter-spacing: -0.01em;
color: var(--paper);
text-wrap: balance;
}
.qc-word {
display: inline-block;
overflow: hidden;
vertical-align: top;
margin-right: 0.18em;
padding-bottom: 0.08em;
}
.qc-word i {
display: inline-block;
font-style: normal;
transform: translate3d(0, 110%, 0);
opacity: 0;
transition: transform 900ms cubic-bezier(0.2, 0.85, 0.2, 1), opacity 700ms ease;
transition-delay: calc(var(--i, 0) * 90ms + 120ms);
}
.quote-cta__title.is-revealed .qc-word i { transform: translate3d(0, 0, 0); opacity: 1; }
.quote-cta__sub {
font-family: var(--font-mono);
font-size: var(--fs-lead);
color: var(--mute);
max-width: 50ch;
line-height: 1.5;
opacity: 0;
transform: translate3d(0, 12px, 0);
transition: opacity 700ms ease 420ms, transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1) 420ms;
}
.quote-cta__sub.is-revealed { opacity: 1; transform: none; }
.quote-cta__inner .cta--large {
--mx: 0px;
--my: 0px;
transform: translate3d(var(--mx), var(--my), 0);
transition: transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color 240ms ease, color 240ms ease;
}
.quote-cta__inner .cta--large:hover {
transition: transform 120ms ease-out, background-color 240ms ease, color 240ms ease;
}
/* ============================================================
14. FOOTER
============================================================ */
.site-foot {
background: var(--ink);
border-top: 1px dashed rgba(196, 188, 172, 0.18);
padding: var(--sp-8) var(--gutter);
font-family: var(--font-mono);
font-size: var(--fs-meta);
color: var(--mute);
}
.site-foot__inner {
max-width: var(--max-w);
margin-inline: auto;
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
gap: var(--sp-5);
}
.site-foot__contact {
display: flex;
flex-direction: column;
gap: var(--sp-1);
}
.site-foot__tagline {
font-family: var(--font-display);
font-size: clamp(1.5rem, 2.5vw, 2rem);
letter-spacing: 0.02em;
line-height: 1;
background: var(--grad-brand);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
margin-bottom: var(--sp-2);
}
.site-foot__contact a {
color: var(--mute);
transition: color 0.3s ease-out;
}
.site-foot__contact a:hover { color: var(--teal); }
.site-foot__right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--sp-3);
}
.site-foot__links {
display: flex;
gap: var(--sp-4);
}
.lang-toggle { display: flex; gap: var(--sp-3); }
.lang-toggle__item {
background: none;
border: 0;
padding: 0;
font-family: var(--font-mono);
font-size: var(--fs-meta);
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--mute);
cursor: pointer;
transition: color 0.3s ease-out;
border-bottom: 1px dashed transparent;
padding-bottom: 2px;
}
.lang-toggle__item[data-active="true"] { color: var(--paper); border-bottom-color: var(--teal); border-bottom-style: solid; }
.lang-toggle__item:disabled { opacity: 0.5; cursor: not-allowed; }
.site-foot__legal {
color: var(--mute);
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-thickness: 1px;
text-decoration-color: rgba(196,188,172,0.4);
transition: color 0.3s ease-out;
}
.site-foot__legal:hover { color: var(--paper); }
@media (max-width: 700px) {
.site-foot__inner { flex-direction: column; align-items: flex-start; }
.site-foot__right { align-items: flex-start; }
}
/* ============================================================
15. QUOTE PANEL
============================================================ */
.quote-overlay {
position: fixed;
inset: 0;
background: rgba(14, 15, 18, 0.5);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
opacity: 0;
pointer-events: none;
z-index: var(--z-overlay);
transition: opacity var(--d-base) var(--ease-out);
}
.quote-overlay[data-open="true"] { opacity: 1; pointer-events: auto; }
.quote-panel {
position: fixed;
inset: 0 0 0 auto;
width: min(100%, 560px);
background: var(--paper);
z-index: var(--z-panel);
transform: translateX(100%);
transition: transform var(--d-slow) var(--ease-expo);
display: flex;
flex-direction: column;
box-shadow: -24px 0 60px rgba(14, 15, 18, 0.22);
}
.quote-panel[data-open="true"] { transform: translateX(0); }
.quote-panel__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--sp-4) var(--sp-6);
border-bottom: 1px dashed var(--ink-a12);
flex: none;
}
.quote-panel__title {
font-family: var(--font-mono);
font-size: var(--fs-mono-eyebrow);
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--ink-mute);
font-weight: 500;
}
.quote-panel__close {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-2) var(--sp-3);
font-family: var(--font-mono);
font-size: var(--fs-mono-eyebrow);
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--ink-mute);
border-radius: var(--r-pill);
transition: color var(--d-fast) var(--ease-out), background var(--d-fast) var(--ease-out);
}
.quote-panel__close:hover { color: var(--ink); background: var(--ink-a04); }
.quote-panel__body {
flex: 1;
/* Cap the scrollable region so it ends ABOVE the absolutely-positioned
Send-Request bar — form content can never sit underneath the bar. */
min-height: 0;
margin-bottom: var(--quote-bar-h, 130px);
overflow-y: auto;
padding: var(--sp-5) var(--sp-6) var(--sp-3);
display: grid;
gap: var(--sp-4);
scrollbar-width: thin;
scrollbar-color: var(--ink-a20) transparent;
scroll-padding-bottom: var(--sp-3);
}
.quote-panel__intro h2 {
font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
line-height: 0.95;
margin-bottom: var(--sp-1);
}
.quote-panel__intro p { color: var(--ink-mute); font-size: var(--fs-meta); }
.quote-form { display: grid; gap: var(--sp-3); }
.field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-4);
}
@media (max-width: 480px) {
.field-row { grid-template-columns: 1fr; gap: var(--sp-4); }
}
.field {
display: grid;
gap: var(--sp-1);
position: relative;
}
.field__label {
font-family: var(--font-mono);
font-size: var(--fs-mono-eyebrow);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink-mute);
display: flex;
align-items: baseline;
justify-content: space-between;
}
.field__label em { font-style: normal; text-transform: none; letter-spacing: 0.02em; color: var(--thread); font-size: 0.95em; }
.field__input,
.field select {
width: 100%;
padding: var(--sp-2) 0;
border: 0;
border-bottom: 1px solid var(--ink-a20);
font-family: var(--font-mono);
font-size: var(--fs-body);
color: var(--ink);
background: transparent;
border-radius: 0;
transition: border-color var(--d-base) var(--ease-out);
}
.field__input::placeholder { color: var(--mute); }
.field__input:focus,
.field select:focus { border-bottom-color: var(--ink); outline: 0; }
.field__seam {
position: absolute;
inset: auto 0 -1px 0;
height: 2px;
background: var(--grad-brand);
transform-origin: left;
transform: scaleX(0);
transition: transform var(--d-slow) var(--ease-expo);
pointer-events: none;
}
.field:focus-within .field__seam { transform: scaleX(1); }
.field select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0.25rem center;
background-size: 12px;
padding-right: 1.5rem;
cursor: pointer;
}
/* Upload zone */
.upload-zone {
position: relative;
display: grid;
place-items: center;
padding: var(--sp-3) var(--sp-4);
border: 1px dashed var(--ink-a20);
border-radius: var(--r-md);
text-align: center;
cursor: pointer;
transition: border-color var(--d-base) var(--ease-out), background var(--d-base) var(--ease-out), padding var(--d-base) var(--ease-out);
background: var(--paper-soft);
}
/* Collapse the upload prompt once files are attached — keeps the form short */
.field:has(.upload-files:not(:empty)) .upload-zone { padding: var(--sp-2) var(--sp-4); }
.field:has(.upload-files:not(:empty)) .upload-zone__inner {
grid-auto-flow: column;
grid-template-columns: auto auto;
gap: var(--sp-2);
align-items: center;
}
.field:has(.upload-files:not(:empty)) .upload-zone__icon { width: 16px; height: 16px; }
.field:has(.upload-files:not(:empty)) .upload-zone__hint { display: none; }
.field:has(.upload-files:not(:empty)) .upload-zone__text::before { content: '+ '; }
.upload-zone:hover,
.upload-zone[data-drag="true"] { border-color: var(--steel); background: var(--steel-a08); }
.upload-zone input[type="file"] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.upload-zone__inner { display: grid; gap: var(--sp-1); justify-items: center; pointer-events: none; }
.upload-zone__icon { width: 22px; height: 22px; color: var(--ink-mute); margin-bottom: 0; }
.upload-zone__text { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--ink); font-weight: 500; }
.upload-zone__text strong {
background: var(--grad-brand);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 500;
}
.upload-zone__hint {
font-family: var(--font-mono);
font-size: var(--fs-mono-eyebrow);
color: var(--ink-mute);
text-transform: uppercase;
letter-spacing: 0.12em;
}
.upload-files {
display: grid;
gap: var(--sp-2);
margin-top: var(--sp-3);
max-height: 196px;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: var(--ink-a20) transparent;
padding-right: var(--sp-1);
}
.upload-files:empty { display: none; }
.upload-file {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-2) var(--sp-3);
background: var(--paper-soft);
border: 1px dashed var(--ink-a12);
border-radius: var(--r-md);
font-size: var(--fs-meta);
animation: upload-file-in var(--d-base) var(--ease-expo);
}
@keyframes upload-file-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.upload-file__icon {
width: 36px; height: 36px;
flex: none;
border-radius: var(--r-sm);
background: var(--paper-deep);
display: grid;
place-items: center;
font-family: var(--font-mono);
font-size: 0.625rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--ink-mute);
font-weight: 500;
overflow: hidden;
}
.upload-file__icon img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-sm); }
.upload-file__info { flex: 1; min-width: 0; display: grid; gap: 2px; }
.upload-file__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-meta); color: var(--ink); }
.upload-file__size { color: var(--ink-mute); font-size: var(--fs-mono-eyebrow); letter-spacing: 0.05em; }
.upload-file__remove {
width: 28px; height: 28px;
display: grid;
place-items: center;
border-radius: 50%;
color: var(--ink-mute);
flex: none;
transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}
.upload-file__remove:hover { background: var(--ink-a08); color: var(--ink); }
/* Sticky bar: submit + legal — always visible at panel bottom.
Absolutely positioned to the panel (the panel is position: fixed), so it
never overlaps form content. The body reserves --quote-bar-h of bottom
padding to leave room for it. */
.quote-form__bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0;
padding: var(--sp-3) var(--sp-6) var(--sp-4);
background: var(--paper);
display: grid;
gap: var(--sp-2);
z-index: 2;
}
.quote-form__bar::before {
content: '';
position: absolute;
inset: -1px 0 auto 0;
height: 1px;
background-image: repeating-linear-gradient(to right, var(--ink-a20) 0 6px, transparent 6px 10px);
}
.quote-form__submit { margin: 0; }
.quote-form__legal {
font-family: var(--font-mono);
font-size: var(--fs-mono-eyebrow);
color: var(--ink-mute);
letter-spacing: 0.02em;
line-height: 1.4;
text-transform: none;
margin: 0;
}
.quote-form__legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.quote-success {
display: none;
text-align: center;
padding: var(--sp-8) var(--sp-4);
}
.quote-success[data-active="true"] { display: grid; gap: var(--sp-3); }
.quote-success__check {
width: 56px; height: 56px;
border-radius: 50%;
background: var(--grad-brand);
display: grid;
place-items: center;
margin-inline: auto;
margin-bottom: var(--sp-3);
}
.quote-success__check svg { width: 24px; height: 24px; color: var(--paper); }
.quote-success__title { font-size: var(--fs-h3); }
.quote-success__lead { color: var(--ink-mute); font-size: var(--fs-meta); }
/* ============================================================
16. UTILITIES
============================================================ */
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
.no-scroll { overflow: hidden; }
/* Logo breath animation */
@keyframes brand-breath {
0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(31, 168, 154, 0)); }
50% { transform: scale(1.022); filter: drop-shadow(0 4px 12px rgba(31, 168, 154, 0.18)); }
}
.brand__mark { animation: brand-breath 4.2s var(--ease-in-out) infinite; }
/* ============================================================
17. REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.brand__mark { animation: none !important; }
.hero__title-row .char { transform: none !important; opacity: 1 !important; }
.hero__lead, .hero__cta-row, .hero__foot, .hero__eyebrow, .hero__grid, .scroll-cue,
.hero__photo { opacity: 1 !important; transform: none !important; }
.chain__node, .chain__arrow, .cap-tile { opacity: 1 !important; transform: none !important; }
.scroll-cue__line::before { animation: none !important; }
.hero__cta-meta::before { animation: none !important; }
.seam-divider__path { animation: none !important; }
.zipper-trail__layer--open { display: none; }
.zipper-trail__layer--closed { clip-path: none; }
.zipper-trail__pull { display: none; }
}