/* =============================================================================
Elite Cost Solutions - "The Blueprint" visual system
Light + architectural. Crisp cool paper, ink, fine structural grid lines,
one warm copper accent. Grift (single family, display + body + label).
Plain CSS, mobile-first, token-driven, no build step.
COPY RULE: plain hyphens only, no em/en dashes.
ACCENT BUDGET (copper): CTAs, the Elite compare column, key figures, spec
ticks, link underlines, focus halo. Never small body text.
========================================================================== */
/* ============================ 0. WEB FONTS (Grift Variable) =============== */
/* Single variable font covers weights 100-900 + italic ~ 59KB total */
@font-face {
font-family: "Grift";
src: url("/assets/fonts/grift/Grift-Variable.woff2") format("woff2-variations"),
url("/assets/fonts/grift/Grift-Variable.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Grift";
src: url("/assets/fonts/grift/Grift-Variable.woff2") format("woff2-variations"),
url("/assets/fonts/grift/Grift-Variable.woff2") format("woff2");
font-weight: 100 900;
font-style: italic;
font-display: swap;
}
/* ============================ 1. TOKENS =================================== */
:root {
/* OFFICIAL 5-color palette: INK / NAVY / STEEL / BRASS / PAPER
Rule: No greens. No dollar signs. No glow.
Brass reads "elite" without the cost-seg-mill look. */
--paper: #F0EBE0; /* matte cream - Swiss Industrial substrate */
--paper-2: #E5DFD0; /* recessed cream-2 */
--white: #FFFFFF;
--ink: #0F1A26; /* near-black navy (carbon ink, not pure black) */
--navy: #1F3D5E; /* deep brand navy */
--steel: #4F7491; /* mid blue-gray */
--graphite: #1F3D5E; /* dark surface alias -> navy */
--slate: #4F7491; /* muted text alias -> steel */
--slate-2: #7B95AC; /* lighter steel for non-critical meta */
--line: #DDD3BB; /* hairline tuned to cream */
--line-2: #C7BC9F;
--line-dark: rgba(255,255,255,0.13);
--copper: #A07A4B; /* brass - sandstone-leaning, restrained */
--copper-deep: #7A5A33; /* brass-deep (AA on cream 5.5:1) */
--copper-soft: rgba(160,122,75,0.10);
--copper-line: rgba(160,122,75,0.34);
/* Fonts */
--font-display: "Grift", serif;
--font-body: "Grift", sans-serif;
--font-mono: "Grift", monospace;
/* Type scale */
--fs-display: clamp(2.6rem, 6.4vw, 5.4rem);
--fs-h1: clamp(2.3rem, 4.8vw, 4rem);
--fs-h2: clamp(1.85rem, 3.4vw, 2.9rem);
--fs-h3: clamp(1.2rem, 1.5vw, 1.55rem);
--fs-lead: clamp(1.1rem, 1.45vw, 1.38rem);
--fs-body: 1.0625rem;
--fs-small: 0.9rem;
--fs-spec: 0.75rem; /* mono labels */
--fs-figure: clamp(2.6rem, 6vw, 5rem);
/* Spacing (4-base) */
--sp-4:4px; --sp-8:8px; --sp-12:12px; --sp-16:16px; --sp-20:20px;
--sp-24:24px; --sp-32:32px; --sp-40:40px; --sp-48:48px; --sp-64:64px;
--sp-80:80px; --sp-96:96px; --sp-128:128px;
--section-y: clamp(5rem, 9vw, 10rem); /* macro-whitespace per minimalist */
--container: 1240px;
--measure: 64ch;
--gutter: 20px;
/* Rounded corners site-wide per user request (was 0 / Swiss Industrial) */
--r: 14px;
--r-lg: 22px;
--grid-cell: 38px; /* blueprint grid module */
--t-fast: 140ms cubic-bezier(0.4,0,0.2,1);
--t-base: 280ms cubic-bezier(0.4,0,0.2,1);
--t-reveal: 720ms cubic-bezier(0.16,1,0.3,1);
--ease-out: cubic-bezier(0.16,1,0.3,1);
--z-header: 100; --z-overlay: 200; --z-menu: 300;
}
@media (min-width: 900px){ :root{ --gutter: 40px; } }
/* ============================ 2. RESET / BASE ============================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
margin:0;
font-family:var(--font-body);
font-size:var(--fs-body);
font-weight:400;
line-height:1.62;
color:var(--ink);
background:var(--paper);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
overflow-x:hidden;
}
img,picture,svg,video{ max-width:100%; height:auto; display:block; }
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--ink); margin:0 0 var(--sp-16); font-weight:700; line-height:1.08; letter-spacing:-0.014em; text-wrap:balance; }
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); letter-spacing:-0.006em; line-height:1.22; }
p{ margin:0 0 var(--sp-16); }
a{ color:var(--copper-deep); text-decoration:none; }
ul,ol{ margin:0 0 var(--sp-16); padding-left:1.2rem; }
strong{ font-weight:700; }
hr{ border:0; border-top:1px solid var(--line); margin:0; }
::selection{ background:var(--copper); color:#fff; }
/* ============================ 3. LAYOUT / UTILITIES ====================== */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section-y); position:relative; }
.section--paper2{ background:var(--paper-2); }
.section--ink{ background:var(--ink); color:#fff; }
.section--graphite{ background:var(--graphite); color:#fff; }
.section--ink h1,.section--ink h2,.section--ink h3,
.section--graphite h1,.section--graphite h2,.section--graphite h3{ color:#fff; }
.measure{ max-width:var(--measure); }
.lead{ font-size:var(--fs-lead); line-height:1.5; color:var(--slate); }
.section--ink .lead,.section--graphite .lead{ color:rgba(255,255,255,0.82); }
.visually-hidden{ position:absolute!important; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; }
.text-center{ text-align:center; }
.stack-sm > * + *{ margin-top:var(--sp-12); }
/* ---- Blueprint grid background (faint structural module) ---------------- */
.blueprint-grid{ position:relative; }
.blueprint-grid::before{
content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
background-image:
linear-gradient(to right, var(--line) 1px, transparent 1px),
linear-gradient(to bottom, var(--line) 1px, transparent 1px);
background-size:var(--grid-cell) var(--grid-cell);
-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%, #000 35%, transparent 78%);
mask-image:radial-gradient(ellipse 80% 70% at 50% 40%, #000 35%, transparent 78%);
opacity:0.5;
}
.blueprint-grid > *{ position:relative; z-index:1; }
.section--ink .blueprint-grid::before,.section--graphite.blueprint-grid::before{
background-image:
linear-gradient(to right, var(--line-dark) 1px, transparent 1px),
linear-gradient(to bottom, var(--line-dark) 1px, transparent 1px);
}
/* ---- Spec labels (mono blueprint annotation system) --------------------- */
.spec{
font-family:var(--font-mono); font-size:var(--fs-spec); font-weight:500;
letter-spacing:0.18em; text-transform:uppercase; color:var(--slate);
display:inline-flex; align-items:center; gap:var(--sp-8);
}
.spec--copper{ color:var(--copper-deep); }
.section--ink .spec,.section--graphite .spec{ color:rgba(255,255,255,0.62); }
/* Brutalist ASCII bracketing - replaces the hairline tick */
.spec::before{ content:"[ "; opacity:0.7; font-weight:600; }
.spec::after { content:" ]"; opacity:0.7; font-weight:600; }
.spec--plain::before, .spec--plain::after{ content:none; }
.index-num{ font-family:var(--font-mono); font-weight:500; color:var(--copper-deep); font-size:var(--fs-spec); letter-spacing:0.12em; }
.section-head{ max-width:48rem; margin-bottom:var(--sp-48); }
.section-head .spec{ margin-bottom:var(--sp-20); }
/* ---- Hairline rules + ticks --------------------------------------------- */
.rule-c{ width:46px; height:2px; background:var(--copper); border:0; margin:0 0 var(--sp-24); }
/* ---- Framed image (architectural crop frame with corner ticks) ---------- */
.frame{ position:relative; background:var(--white); border:1px solid var(--line-2); padding:10px; }
.frame__img{ position:relative; overflow:hidden; background:var(--paper-2); }
.frame__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.frame::before,.frame::after{
content:""; position:absolute; width:14px; height:14px; pointer-events:none; z-index:2;
border-color:var(--copper); border-style:solid; border-width:0;
}
.frame::before{ top:-1px; left:-1px; border-top-width:2px; border-left-width:2px; }
.frame::after{ bottom:-1px; right:-1px; border-bottom-width:2px; border-right-width:2px; }
.frame__cap{ position:absolute; left:18px; bottom:18px; z-index:3;
font-family:var(--font-mono); font-size:var(--fs-spec); letter-spacing:0.14em; text-transform:uppercase;
color:#fff; background:rgba(21,24,27,0.72); padding:6px 10px; backdrop-filter:blur(4px); }
/* ============================ 4. BUTTONS ================================= */
.btn{
--bx:26px;
display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-8);
font-family:var(--font-body); font-weight:700; font-size:var(--fs-small); line-height:1;
letter-spacing:0.01em; padding:15px var(--bx); border:1.5px solid transparent; border-radius:var(--r);
cursor:pointer; text-align:center; white-space:nowrap;
transition:background-color var(--t-base),border-color var(--t-base),color var(--t-base),transform var(--t-fast);
}
.btn:active{ transform:translateY(1px); }
.btn--copper{ background:var(--copper); color:#fff; }
.btn--copper:hover{ background:var(--copper-deep); }
.btn--ink{ background:var(--ink); color:#fff; }
.btn--ink:hover{ background:#000; }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn--ghost:hover{ border-color:var(--ink); }
.section--ink .btn--ghost,.section--graphite .btn--ghost{ color:#fff; border-color:var(--line-dark); }
.section--ink .btn--ghost:hover,.section--graphite .btn--ghost:hover{ border-color:#fff; }
.btn .arr{ transition:transform var(--t-base); }
.btn:hover .arr{ transform:translateX(3px); }
.btn--lg{ --bx:34px; padding:18px var(--bx); font-size:1rem; }
.link-arrow{ display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--copper-deep);
font-family:var(--font-body); letter-spacing:0.01em; }
.link-arrow .arr{ transition:transform var(--t-base); }
.link-arrow:hover .arr{ transform:translateX(4px); }
.link-inline{ color:var(--copper-deep); text-decoration:underline; text-decoration-color:var(--copper-line);
text-underline-offset:3px; text-decoration-thickness:1.5px; }
.link-inline:hover{ text-decoration-color:var(--copper); }
/* ============================ 5. HEADER ================================== */
.site-header{
position:sticky; top:0; z-index:var(--z-header); background:rgba(241,242,240,0.82);
backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid transparent;
transition:border-color var(--t-base), background-color var(--t-base);
}
.site-header.is-scrolled{ border-bottom-color:var(--line); background:rgba(241,242,240,0.94); }
.site-header__inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-24);
min-height:72px; }
.brand{ display:inline-flex; align-items:center; gap:10px; color:var(--ink); font-family:var(--font-display);
font-weight:800; letter-spacing:-0.02em; font-size:1.05rem; }
.brand__mark{ width:30px; height:30px; flex:none; }
.brand small{ display:block; font-family:var(--font-mono); font-weight:500; font-size:0.6rem; letter-spacing:0.22em;
text-transform:uppercase; color:var(--copper-deep); margin-top:1px; }
.nav{ display:none; align-items:center; gap:var(--sp-32); }
.nav a{ color:var(--ink); font-weight:600; font-size:0.95rem; position:relative; padding-block:6px; }
.nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--copper); transition:right var(--t-base); }
.nav a:hover::after,.nav a[aria-current="page"]::after{ right:0; }
.header__cta{ display:none; }
.nav-toggle{ display:inline-flex; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:10px; margin-right:-10px; }
.nav-toggle span{ width:24px; height:2px; background:var(--ink); transition:transform var(--t-base),opacity var(--t-base); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media (min-width:900px){
.nav,.header__cta{ display:inline-flex; }
.nav-toggle{ display:none; }
}
/* mobile menu */
.mobile-menu{ position:fixed; inset:0; z-index:var(--z-menu); background:var(--paper); transform:translateY(-100%);
transition:transform 420ms var(--ease-out); display:flex; flex-direction:column; padding:var(--sp-24);
visibility:hidden; }
.mobile-menu.is-open{ transform:translateY(0); visibility:visible; }
.mobile-menu__top{ display:flex; justify-content:space-between; align-items:center; min-height:72px; }
.mobile-menu nav{ display:flex; flex-direction:column; gap:var(--sp-8); margin-top:var(--sp-24); }
.mobile-menu nav a{ font-family:var(--font-display); font-weight:800; font-size:2rem; color:var(--ink); padding-block:8px; letter-spacing:-0.02em; }
.mobile-menu .btn{ margin-top:var(--sp-32); }
.menu-close{ background:none; border:0; cursor:pointer; font-family:var(--font-mono); font-size:0.8rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink); }
/* ============================ 6. HERO =================================== */
.hero{ padding-top:clamp(2.5rem,5vw,4.5rem); padding-bottom:var(--section-y); }
.hero__grid{ display:grid; gap:var(--sp-40); align-items:center; }
@media (min-width:980px){ .hero__grid{ grid-template-columns:1.05fr 0.95fr; gap:var(--sp-64); } }
.hero__eyebrow{ margin-bottom:var(--sp-24); }
.hero h1{ font-size:var(--fs-display); letter-spacing:-0.018em; line-height:1.0; margin-bottom:var(--sp-24); }
.hero h1 .accent{ color:var(--copper); }
.hero__lead{ max-width:42ch; margin-bottom:var(--sp-32); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:var(--sp-12); align-items:center; }
.hero__media{ position:relative; }
.hero__media .frame__img{ aspect-ratio:4/5; }
.hero__spec-row{ display:flex; gap:var(--sp-24); flex-wrap:wrap; margin-top:var(--sp-32); padding-top:var(--sp-24); border-top:1px solid var(--line); }
.hero__spec{ display:flex; flex-direction:column; }
.hero__spec b{ font-family:var(--font-display); font-weight:800; font-size:1.5rem; letter-spacing:-0.02em; }
.hero__spec span{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--slate); }
/* ============================ 7. TRUST BAR ============================== */
.trustbar{ border-block:1px solid var(--line); background:var(--white); }
.trustbar__row{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-16) var(--sp-32);
padding-block:var(--sp-20); list-style:none; margin:0; padding-inline:0; justify-content:space-between; }
.trustbar__item{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono);
font-size:0.78rem; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink); }
.trustbar__item svg{ width:18px; height:18px; flex:none; color:var(--copper); }
/* ============================ 8. FEATURE GRID (why choose) ============== */
.feature-grid{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
@media (min-width:640px){ .feature-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .feature-grid{ grid-template-columns:repeat(3,1fr); } }
.feature{ background:var(--white); padding:var(--sp-32); position:relative; }
.feature__num{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.12em; color:var(--copper-deep); margin-bottom:var(--sp-16); display:block; }
.feature h3{ margin-bottom:var(--sp-8); }
.feature p{ color:var(--slate); margin:0; font-size:0.98rem; }
/* ============================ 9. RAIL (drag/swipe carousel) ============= */
.rail{ position:relative; }
.rail__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:var(--sp-24); margin-bottom:var(--sp-32); flex-wrap:wrap; }
.rail__nav{ display:flex; gap:var(--sp-8); }
.rail__btn{ width:48px; height:48px; border:1.5px solid var(--line-2); background:var(--white); border-radius:var(--r);
cursor:pointer; display:inline-flex; align-items:center; justify-content:center; color:var(--ink); transition:border-color var(--t-base),color var(--t-base),background var(--t-base); }
.rail__btn:hover{ border-color:var(--ink); }
.rail__btn[disabled]{ opacity:0.34; cursor:default; }
.rail__btn svg{ width:20px; height:20px; }
.rail__viewport{ overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-inline:calc(-1*var(--gutter)); padding-inline:var(--gutter); padding-bottom:4px; }
.rail__viewport::-webkit-scrollbar{ display:none; }
.rail__track{ display:flex; gap:var(--sp-20); }
.rail.is-grab .rail__viewport{ cursor:grab; }
.rail.is-grabbing .rail__viewport{ cursor:grabbing; user-select:none; scroll-snap-type:none; }
.rail__item{ flex:0 0 auto; width:min(82vw,360px); scroll-snap-align:start; }
.rail__progress{ height:2px; background:var(--line); margin-top:var(--sp-24); position:relative; overflow:hidden; }
.rail__progress span{ position:absolute; left:0; top:0; bottom:0; width:100%; transform-origin:left; transform:scaleX(0.3); background:var(--copper); transition:transform var(--t-base); }
/* No-JS / reduced motion fallback: native scroll-snap */
.rail__viewport.is-static{ overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.rail__viewport.is-static .rail__item{ scroll-snap-align:start; }
/* service / segment cards used inside rails */
.card{ background:var(--white); border:1px solid var(--line-2); border-radius:var(--r); height:100%; display:flex; flex-direction:column; transition:border-color var(--t-base),transform var(--t-base); }
.card:hover{ border-color:var(--copper-line); }
.card__media{ position:relative; overflow:hidden; aspect-ratio:16/11; background:var(--paper-2); border-bottom:1px solid var(--line); }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform 700ms var(--ease-out); }
.card:hover .card__media img{ transform:scale(1.05); }
.card__media .tag{ position:absolute; top:12px; left:12px; font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.14em; text-transform:uppercase; background:rgba(21,24,27,0.78); color:#fff; padding:5px 9px; border-radius:var(--r); }
.card__body{ padding:var(--sp-24); display:flex; flex-direction:column; gap:var(--sp-8); flex:1; }
.card__body h3{ margin:0; }
.card__body p{ margin:0; color:var(--slate); font-size:0.96rem; }
.card__num{ font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.12em; color:var(--copper-deep); }
/* ============================ 10. PROCESS JOURNEY ======================= */
.process{ position:relative; }
.process__track{ display:grid; gap:var(--sp-24); }
@media (min-width:760px){ .process__track{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .process__track{ grid-template-columns:repeat(4,1fr); } }
.step{ background:var(--white); border:1px solid var(--line); border-top:2px solid var(--copper); padding:var(--sp-32) var(--sp-24); position:relative; }
.step__n{ font-family:var(--font-mono); font-weight:600; font-size:0.78rem; letter-spacing:0.12em; color:var(--copper-deep); margin-bottom:var(--sp-20); display:block; }
.step h3{ font-size:1.15rem; margin-bottom:var(--sp-8); }
.step p{ color:var(--slate); font-size:0.95rem; margin:0; }
/* pinned horizontal scroll-through variant (enhanced) */
.process--pin .process__viewport{ overflow:hidden; }
.process--pin .process__track{ display:flex; gap:var(--sp-32); grid-template-columns:none; }
.process--pin .step{ flex:0 0 auto; width:min(78vw,420px); }
/* ============================ 11. COMPARISON ============================ */
.compare{ width:100%; border-collapse:collapse; font-size:0.98rem; }
.compare-wrap{ border:1px solid var(--line); background:var(--white); overflow-x:auto; }
.compare th,.compare td{ padding:16px clamp(10px,2vw,22px); text-align:center; border-bottom:1px solid var(--line); }
.compare thead th{ font-family:var(--font-display); font-weight:800; font-size:0.95rem; vertical-align:bottom; }
.compare tbody th{ text-align:left; font-family:var(--font-body); font-weight:600; color:var(--ink); white-space:nowrap; }
.compare .col-elite{ background:var(--copper-soft); position:relative; }
.compare thead .col-elite{ color:var(--copper-deep); }
.compare .col-elite::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--copper); }
.compare .mark{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; font-size:0.9rem; }
.mark--yes{ background:var(--copper); color:#fff; }
.mark--part{ color:var(--slate-2); }
.mark--no{ color:var(--slate-2); }
.compare tbody tr:last-child th,.compare tbody tr:last-child td{ border-bottom:0; }
/* ============================ 12. ESTIMATOR ============================= */
.estimator{ background:var(--white); border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:hidden; }
.estimator__grid{ display:grid; }
@media (min-width:880px){ .estimator__grid{ grid-template-columns:1fr 1fr; } }
.estimator__inputs{ padding:clamp(24px,3vw,44px); border-bottom:1px solid var(--line); }
@media (min-width:880px){ .estimator__inputs{ border-bottom:0; border-right:1px solid var(--line); } }
.estimator__out{ padding:clamp(24px,3vw,44px); background:var(--ink); color:#fff; display:flex; flex-direction:column; }
.field{ margin-bottom:var(--sp-24); }
.field__label{ display:flex; justify-content:space-between; align-items:baseline; font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--slate); margin-bottom:var(--sp-12); }
.field__label b{ font-family:var(--font-display); font-size:1.05rem; color:var(--ink); letter-spacing:-0.01em; }
.seg{ display:flex; flex-wrap:wrap; gap:8px; }
.seg button{ font-family:var(--font-body); font-weight:600; font-size:0.9rem; padding:10px 14px; border:1.5px solid var(--line-2); background:var(--white); border-radius:var(--r); cursor:pointer; color:var(--ink); transition:all var(--t-fast); }
.seg button[aria-pressed="true"]{ border-color:var(--copper); background:var(--copper-soft); color:var(--copper-deep); }
input[type="range"]{ -webkit-appearance:none; appearance:none; width:100%; height:3px; background:var(--line-2); border-radius:2px; outline-offset:6px; }
input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:var(--copper); border:3px solid #fff; box-shadow:0 0 0 1px var(--line-2); cursor:pointer; }
input[type="range"]::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:var(--copper); border:3px solid #fff; cursor:pointer; }
.estimator__out .spec{ color:rgba(255,255,255,0.6); margin-bottom:var(--sp-12); }
.est-range{ font-family:var(--font-display); font-weight:800; letter-spacing:-0.03em; line-height:1; font-size:clamp(2.2rem,4.5vw,3.4rem); color:#fff; }
.est-range .copper{ color:var(--copper); }
.est-sub{ color:rgba(255,255,255,0.7); font-size:0.92rem; margin-top:var(--sp-12); }
.est-disclaimer{ font-family:var(--font-mono); font-size:0.68rem; line-height:1.6; letter-spacing:0.02em; color:rgba(255,255,255,0.5); margin-top:auto; padding-top:var(--sp-24); border-top:1px solid var(--line-dark); }
.est-gate{ margin-top:var(--sp-20); display:flex; gap:8px; flex-wrap:wrap; }
.est-gate input{ flex:1; min-width:180px; font-family:var(--font-body); font-size:0.95rem; padding:13px 14px; border:1.5px solid var(--line-dark); background:rgba(255,255,255,0.06); color:#fff; border-radius:var(--r); }
.est-gate input::placeholder{ color:rgba(255,255,255,0.45); }
.est-range.est-locked{ filter:blur(10px); opacity:0.6; user-select:none; }
/* ============================ 13. PRICING =============================== */
/* Centered section head + pill badge */
.section-head--center { text-align:center; max-width:760px; margin-inline:auto; }
.section-head--center .lead { max-width:620px; margin-inline:auto; }
.pill-badge {
display:inline-block;
padding:6px 16px;
border-radius:999px;
background:var(--ink);
color:#fff;
font-family:var(--font-body);
font-weight:600;
font-size:0.8rem;
line-height:1.3;
margin-bottom:22px;
}
.price-grid{ display:grid; gap:24px; grid-template-columns:1fr; }
@media (min-width:720px){ .price-grid{ grid-template-columns:repeat(2,1fr); gap:26px; } }
@media (min-width:1120px){ .price-grid{ grid-template-columns:repeat(4,1fr); gap:24px; } }
.price{
background:#fff;
border:1px solid var(--line-2);
border-radius:18px;
padding:32px 28px 28px;
display:flex;
flex-direction:column;
gap:24px;
box-shadow:0 8px 24px rgba(15,26,38,0.04);
transition:transform 320ms cubic-bezier(0.22,1,0.36,1), box-shadow 320ms cubic-bezier(0.22,1,0.36,1), border-color 320ms cubic-bezier(0.22,1,0.36,1);
}
.price:hover{
transform:translateY(-3px);
box-shadow:0 14px 30px rgba(15,26,38,0.08);
}
.price--feat{
border:2px solid var(--copper);
padding:31px 27px 27px;
box-shadow:0 24px 60px rgba(15,26,38,0.14), 0 8px 20px rgba(15,26,38,0.06);
position:relative;
}
.price--feat:hover{
box-shadow:0 32px 72px rgba(15,26,38,0.18), 0 12px 24px rgba(15,26,38,0.08);
}
.price__head{ display:flex; flex-direction:column; gap:10px; }
.price__title{
font-family:var(--font-display);
font-size:1.55rem;
font-weight:600;
line-height:1.12;
letter-spacing:-0.018em;
color:var(--ink);
margin:0;
}
.price__desc{
font-size:0.88rem;
line-height:1.55;
color:var(--slate);
margin:0;
}
.price__amt{
display:flex;
align-items:baseline;
flex-wrap:wrap;
gap:8px;
margin:0;
font-family:var(--font-display);
}
.price__num{
font-size:2.1rem;
font-weight:700;
color:var(--ink);
letter-spacing:-0.02em;
line-height:1;
}
.price__unit{
font-family:var(--font-mono);
font-size:0.7rem;
color:var(--slate);
letter-spacing:0.08em;
text-transform:uppercase;
font-weight:500;
}
.price__features{
list-style:none;
padding:22px 0 0;
margin:0;
display:flex;
flex-direction:column;
gap:14px;
border-top:1px solid var(--line-2);
}
.price__features li{
display:flex;
gap:12px;
align-items:flex-start;
}
.price__check{
flex:0 0 auto;
width:20px;
height:20px;
margin-top:2px;
color:var(--copper-deep);
display:inline-flex;
align-items:center;
justify-content:center;
}
.price__feat-body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.price__feat-title{
color:var(--ink);
font-weight:500;
font-size:0.9rem;
line-height:1.4;
margin:0;
}
.price__feat-detail{
color:var(--slate);
font-size:0.8rem;
line-height:1.5;
margin:0;
}
.price__cta{
margin-top:auto;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
height:46px;
border-radius:10px;
border:1px solid var(--line-2);
background:#fff;
color:var(--ink);
font-family:var(--font-body);
font-weight:500;
font-size:0.92rem;
text-decoration:none;
transition:background-color 220ms ease, border-color 220ms ease, color 220ms ease, transform 220ms ease;
}
.price__cta svg{ transition:transform 260ms cubic-bezier(0.22,1,0.36,1); }
.price__cta:hover{
border-color:var(--ink);
background:var(--ink);
color:#fff;
}
.price__cta:hover svg{ transform:translateX(3px); }
.price__cta--solid{
background:var(--ink);
color:#fff;
border-color:var(--ink);
}
.price__cta--solid:hover{
background:var(--copper-deep);
border-color:var(--copper-deep);
}
.price-grid__note{ margin-top:36px !important; text-align:center; }
@media (prefers-reduced-motion: reduce){
.price, .price__cta, .price__cta svg{ transition:none; }
.price:hover{ transform:none; }
.price__cta:hover svg{ transform:none; }
}
/* ============================ 14. FAQ =================================== */
.faq{ border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{ width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:var(--sp-24) 0; display:flex; gap:var(--sp-24); align-items:center; justify-content:space-between; font-family:var(--font-display); font-weight:800; font-size:1.1rem; color:var(--ink); letter-spacing:-0.015em; }
.faq__q .pm{ flex:none; width:26px; height:26px; position:relative; }
.faq__q .pm::before,.faq__q .pm::after{ content:""; position:absolute; background:var(--copper); transition:transform var(--t-base); }
.faq__q .pm::before{ left:0; right:0; top:12px; height:2px; }
.faq__q .pm::after{ top:0; bottom:0; left:12px; width:2px; }
.faq__q[aria-expanded="true"] .pm::after{ transform:scaleY(0); }
.faq__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--t-base); }
.faq__a.is-open{ grid-template-rows:1fr; }
.faq__a > div{ overflow:hidden; }
.faq__a > div > *{ color:var(--slate); max-width:62ch; }
.faq__a.is-open > div{ padding-bottom:var(--sp-24); }
/* ============================ 15. CTA BAND ============================== */
.cta-band{ position:relative; overflow:hidden; }
.cta-band .container{ position:relative; z-index:2; }
.cta-band h2{ font-size:var(--fs-h1); max-width:18ch; }
.cta-band__row{ display:flex; gap:var(--sp-12); flex-wrap:wrap; margin-top:var(--sp-32); }
/* ============================ 16. WHO-WE-HELP / segments ================ */
.segment{ background:var(--white); border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden; height:100%; display:flex; flex-direction:column; }
.segment__media{ aspect-ratio:3/2; overflow:hidden; background:var(--paper-2); }
.segment__media img{ width:100%; height:100%; object-fit:cover; transition:transform 700ms var(--ease-out); }
.segment:hover .segment__media img{ transform:scale(1.05); }
.segment__body{ padding:var(--sp-24); }
.segment__body h3{ font-size:1.12rem; margin-bottom:6px; }
.segment__body p{ margin:0; color:var(--slate); font-size:0.94rem; }
/* ============================ 17. TEAM ================================== */
.team-grid{ display:grid; gap:var(--sp-20); align-items:start; }
@media (min-width:560px){ .team-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){
.team-grid{ grid-template-columns:repeat(4,1fr); gap:var(--sp-32); }
.member--real{ grid-column:span 2; }
}
.member{ background:var(--white); border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden; }
.member__photo{ aspect-ratio:1; background:var(--paper-2); position:relative; display:flex; align-items:flex-end; justify-content:center; overflow:hidden; }
.member__photo .ph{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--slate); position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.member__photo .mono-initial{ font-family:var(--font-display); font-weight:800; font-size:3.5rem; color:var(--line-2); }
.member__body{ padding:var(--sp-20); }
.member__body h3{ font-size:1.05rem; margin-bottom:2px; }
.member__role{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--copper-deep); margin:0 0 8px; }
.member__body p{ margin:0; color:var(--slate); font-size:0.9rem; }
/* ============================ 18. FORM ================================== */
.form-grid{ display:grid; gap:var(--sp-20); }
@media (min-width:620px){ .form-grid{ grid-template-columns:1fr 1fr; } }
.form-field{ display:flex; flex-direction:column; }
.form-field--full{ grid-column:1/-1; }
.form-field label{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink); margin-bottom:8px; display:block; }
.form-field input,.form-field select,.form-field textarea{ font-family:var(--font-body); font-size:1rem; padding:13px 14px; border:1.5px solid var(--line-2); background:var(--white); border-radius:var(--r); color:var(--ink); width:100%; }
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{ border-color:var(--copper); }
.form-note{ font-family:var(--font-mono); font-size:0.78rem; color:var(--ink); letter-spacing:0.03em; }
/* ============================ 19. FOOTER ================================ */
.site-footer{ background:var(--ink); color:rgba(255,255,255,0.7); padding-block:var(--sp-64) var(--sp-32); }
.site-footer a{ color:rgba(255,255,255,0.7); }
.site-footer a:hover{ color:#fff; }
.footer-grid{ display:grid; gap:var(--sp-40); margin-bottom:var(--sp-48); }
@media (min-width:760px){ .footer-grid{ grid-template-columns:1.6fr 1fr 1fr; } }
.footer-brand .brand{ color:#fff; }
.footer-brand p{ max-width:42ch; font-size:0.94rem; margin-top:var(--sp-16); }
.footer-col h4{ font-family:var(--font-mono); font-weight:500; font-size:0.7rem; letter-spacing:0.16em; text-transform:uppercase; color:rgba(255,255,255,0.5); margin-bottom:var(--sp-16); }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:0.95rem; }
.footer-bottom{ border-top:1px solid var(--line-dark); padding-top:var(--sp-24); display:flex; flex-wrap:wrap; gap:var(--sp-16); justify-content:space-between; font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.06em; color:rgba(255,255,255,0.45); }
.vet-badge{ display:inline-flex; align-items:center; gap:8px; color:var(--copper); font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; }
/* ============================ 20. MOTION / REVEAL ======================= */
/* Transform-only: content is ALWAYS visible; the slide/settle is enhancement.
Never gate content visibility behind a class (headless renderers freeze it). */
.js-reveal .reveal{ opacity:1; }
.js-reveal.gsap-ready .reveal{ transform:translateY(26px); transition:transform var(--t-reveal); }
.js-reveal.gsap-ready .reveal.is-in{ transform:none; }
.js-reveal.gsap-ready .reveal[data-reveal="stagger"] > *{ transform:translateY(26px); transition:transform var(--t-reveal); }
.js-reveal.gsap-ready .reveal.is-in[data-reveal="stagger"] > * { transform:none; }
.js-reveal.gsap-ready .reveal.is-in[data-reveal="stagger"] > *:nth-child(2){ transition-delay:60ms; }
.js-reveal.gsap-ready .reveal.is-in[data-reveal="stagger"] > *:nth-child(3){ transition-delay:120ms; }
.js-reveal.gsap-ready .reveal.is-in[data-reveal="stagger"] > *:nth-child(4){ transition-delay:180ms; }
.js-reveal.gsap-ready .reveal.is-in[data-reveal="stagger"] > *:nth-child(5){ transition-delay:240ms; }
.js-reveal.gsap-ready .reveal.is-in[data-reveal="stagger"] > *:nth-child(6){ transition-delay:300ms; }
[data-parallax]{ will-change:transform; }
/* ============================ 21. FOCUS / A11Y ========================== */
:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; box-shadow:0 0 0 4px var(--copper-soft); border-radius:2px; }
.section--ink :focus-visible,.section--graphite :focus-visible,.estimator__out :focus-visible,.site-footer :focus-visible{ outline-color:#fff; }
.skip-link{ position:absolute; left:-9999px; top:0; z-index:999; background:var(--ink); color:#fff; padding:12px 18px; }
.skip-link:focus{ left:8px; top:8px; }
/* ============================ 22. REDUCED MOTION / NO-JS ================ */
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior:auto; }
*,*::before,*::after{ animation-duration:0.001ms!important; transition-duration:0.001ms!important; }
.js-reveal.gsap-ready .reveal,.js-reveal.gsap-ready .reveal[data-reveal="stagger"] > *{ transform:none!important; opacity:1!important; }
.card:hover .card__media img,.segment:hover .segment__media img{ transform:none; }
}
/* Defensive: if JS never runs, the reveal classes above only apply under .gsap-ready,
so plain content stays fully visible. */
/* ============================ 23. REVEAL FAILSAFE ======================= */
/* Inline script adds .reveals-safe after 2.6s so content can NEVER stay
hidden if IO/ticker freezes (headless renderers, hung rAF). Belt + braces. */
.reveals-safe .reveal,
.reveals-safe .reveal[data-reveal="stagger"] > *{ opacity:1!important; transform:none!important; }
/* anchor targets clear the sticky header on native scroll (Lenis removed) */
[id]{ scroll-margin-top: 90px; }
/* =============================================================================
v2 "SURVEY" OVERLAY (last cascade, additive only)
Loaded under DESIGN.md contract: cooler paper, burnt amber, dark Field Notes
surface, atmospheric grain, split-text reveal-ready, magnetic CTAs, dimensional
card hover, custom cursor (desktop only). Sharp 2px radii everywhere.
========================================================================== */
/* === Token overrides - OFFICIAL 5-color palette (INK/NAVY/STEEL/BRASS/PAPER) === */
:root {
--paper: #F0EBE0; /* matte cream substrate */
--paper-2: #E5DFD0;
--ink: #0F1A26; /* near-black navy */
--ink-2: #1F3D5E; /* navy */
--navy: #1F3D5E;
--steel: #4F7491;
--slate: #4F7491; /* alias -> steel */
--slate-2: #7B95AC;
--field-notes: #0F1A26; /* ink for dark surfaces */
--field-notes-2:#1F3D5E; /* navy-2 */
--line: #DDD3BB;
--line-2: #C7BC9F;
--line-dark: rgba(255,255,255,0.13);
--amber: #A07A4B; /* brass */
--amber-deep: #7A5A33;
--copper: #A07A4B; /* legacy alias -> brass */
--copper-deep: #7A5A33;
--copper-soft: rgba(160,122,75,0.10);
--copper-line: rgba(160,122,75,0.34);
--fs-display: clamp(2.4rem, 5vw, 4.2rem); /* dialed down from 7.5rem (120px) -> 4.2rem (~67px) */
--fs-h1: clamp(2rem, 4.2vw, 3.6rem);
--fs-h2: clamp(1.9rem, 3.8vw, 3.2rem);
--fs-h3: clamp(1.18rem, 1.55vw, 1.6rem);
--fs-lead: clamp(1.12rem, 1.5vw, 1.42rem);
--fs-spec: 0.72rem;
--fs-fig: 0.66rem;
--tr-display: -0.034em;
--tr-h: -0.02em;
--tr-mono: 0.22em;
--section-y: clamp(5rem, 9vw, 10rem);
--container: 1280px;
--t-magnetic: 480ms cubic-bezier(0.2, 1.06, 0.4, 1);
--shadow-card: 0 1px 0 rgba(20,23,28,0.04), 0 24px 60px -32px rgba(20,23,28,0.20);
--shadow-lift: 0 1px 0 rgba(20,23,28,0.04), 0 38px 80px -28px rgba(20,23,28,0.30);
}
body { background: var(--paper); color: var(--ink); }
.section--ink, .section--graphite { background: var(--field-notes); }
.section--ink, .section--graphite, .site-footer, .cta-band { background: var(--field-notes); }
/* === Atmospheric grain — site-wide fixed overlay, GPU-only === */
.atmosphere {
position: fixed; inset: 0; z-index: var(--z-noise);
pointer-events: none; mix-blend-mode: overlay; opacity: 0.015;
background-image: url("data:image/svg+xml;utf8,");
transform: translateZ(0);
will-change: opacity;
}
@media (prefers-reduced-motion: reduce){ .atmosphere { opacity: 0.008; } }
/* === Type — display refined === */
h1, h2 { font-family: var(--font-display); color: var(--ink); }
h1 { font-size: var(--fs-h1); letter-spacing: var(--tr-h); line-height: 1.04; font-weight: 700; text-wrap: balance; }
h2 { font-size: var(--fs-h2); letter-spacing: var(--tr-h); line-height: 1.08; font-weight: 700; text-wrap: balance; }
h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.012em; }
.hero h1 {
font-size: var(--fs-display);
letter-spacing: var(--tr-display);
line-height: 0.94;
font-weight: 800;
text-wrap: balance;
}
p { text-wrap: pretty; }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); max-width: 56ch; }
.spec { letter-spacing: var(--tr-mono); }
.spec--copper { color: var(--amber-deep); }
/* === Hero refinement === */
.hero .container { padding-block: clamp(3rem, 6vw, 6rem) clamp(4rem, 8vw, 8rem); }
.hero__eyebrow { margin-bottom: var(--sp-32); }
.hero__lead { margin-block: var(--sp-32) var(--sp-40); }
.hero__cta { gap: var(--sp-16); }
.hero__media { position: relative; }
.hero__media .frame { padding: 12px; }
/* Frame: more refined corner ticks, drawn-in on load via stroke-dashoffset */
.frame { background: var(--white); border-color: var(--line-2); box-shadow: var(--shadow-card); }
.frame::before, .frame::after { width: 16px; height: 16px; }
.frame__img { background: var(--paper-2); overflow: hidden; }
.frame__img img { transition: transform 700ms var(--ease-out), filter 700ms var(--ease-out); }
@media (hover: hover) and (pointer: fine){
.frame:hover .frame__img img { transform: scale(1.025); }
}
.frame__cap {
font-family: var(--font-mono); font-size: var(--fs-fig);
letter-spacing: 0.18em; text-transform: uppercase;
padding: 6px 10px; background: rgba(20,23,28,0.78);
backdrop-filter: blur(6px);
}
/* === FIG annotations overlay (hero) === */
.hero__annotations {
position: absolute; inset: 12px;
pointer-events: none;
display: none;
}
@media (min-width: 900px){ .hero__annotations { display: block; } }
.hero__annot {
position: absolute;
font-family: var(--font-mono); font-size: var(--fs-fig);
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--amber); font-weight: 500;
display: inline-flex; align-items: center; gap: 8px;
white-space: nowrap;
opacity: 0; transform: translateY(8px);
transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
transition-delay: 1400ms;
background: rgba(20,23,28,0.78); padding: 5px 9px;
backdrop-filter: blur(6px);
border: 1px solid var(--amber-line);
border-radius: 2px;
}
.hero__annot::before {
content: ""; width: 18px; height: 1px; background: var(--amber);
}
.js-reveal .hero__annot.is-in { opacity: 1; transform: translateY(0); }
.hero__annot--a { top: 14%; left: 8%; transition-delay: 1400ms; }
.hero__annot--b { top: 38%; right: 4%; transition-delay: 1620ms; }
.hero__annot--c { bottom: 24%; left: 6%; transition-delay: 1820ms; }
/* === Buttons — sharper, AA-verified, magnetic === */
.btn { will-change: transform; transition: background-color var(--t-base), color var(--t-base), border-color var(--t-base), transform var(--t-magnetic), box-shadow var(--t-base); }
.btn--copper { background: var(--amber); color: #fff; }
.btn--copper:hover { background: var(--amber-deep); transform: translateY(-1px); box-shadow: 0 12px 28px -10px rgba(184,100,38,0.40); }
.btn--ghost { color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--ink); transform: translateY(-1px); }
/* Magnetic CTA — JS adds the inline transform via custom prop --mx/--my,
CSS composites on top so hover-lift + magnet stack. */
@media (hover: hover) and (pointer: fine){
.btn[data-magnet] {
--mx: 0px; --my: 0px;
transform: translate3d(var(--mx), var(--my), 0);
}
.btn[data-magnet]:hover {
transform: translate3d(var(--mx), calc(var(--my) - 1px), 0);
}
}
/* === Cards — 3D tilt + crisp lift on hover === */
.card { transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base); transform-style: preserve-3d; }
@media (hover: hover) and (pointer: fine){
.card { will-change: transform; }
.card:hover {
border-color: var(--copper-line);
transform: translateY(-3px) rotateX(0.6deg);
box-shadow: var(--shadow-lift);
}
}
/* === Section heads — refined hairline divider === */
.section-head { padding-bottom: var(--sp-24); border-bottom: 1px solid var(--line); margin-bottom: var(--sp-48); max-width: 56rem; }
.section-head .spec { margin-bottom: var(--sp-20); }
.section-head h2 { margin: 0; }
.section-head .lead { margin-top: var(--sp-20); }
/* === Header — glassmorphic when scrolled === */
.site-header { border-bottom: 1px solid transparent; transition: background 360ms var(--ease-out), border-color 360ms var(--ease-out), backdrop-filter 360ms var(--ease-out); }
.site-header.is-scrolled {
background: rgba(238,239,238,0.74);
border-bottom-color: var(--line);
backdrop-filter: saturate(180%) blur(12px);
-webkit-backdrop-filter: saturate(180%) blur(12px);
}
/* === Scroll progress — refined === */
.scroll-progress, [data-progress] { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: var(--z-overlay); background: rgba(20,23,28,0.05); }
[data-progress] .scroll-progress__bar, .progress-bar {
height: 100%; width: 100%; transform-origin: left;
transform: scaleX(0);
background: linear-gradient(90deg, var(--amber-deep), var(--amber) 60%, var(--amber));
box-shadow: 0 0 14px rgba(184,100,38,0.55);
transition: transform 60ms linear;
}
/* === Custom cursor (desktop only) === */
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: var(--z-overlay); will-change: transform; }
.cursor-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--amber);
transform: translate3d(-50px, -50px, 0);
}
.cursor-ring {
width: 36px; height: 36px; border-radius: 50%;
border: 1.5px solid rgba(184,100,38,0.55);
transform: translate3d(-50px, -50px, 0) scale(0.65);
transition: transform 220ms var(--ease-out), opacity 200ms var(--ease-out), border-color 200ms var(--ease-out);
opacity: 0;
}
.cursor-ring.is-hover { transform: translate3d(var(--rx, -50px), var(--ry, -50px), 0) scale(1); opacity: 0.85; border-color: var(--amber); }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce){
.cursor-dot, .cursor-ring { display: none; }
html, body, a, button { cursor: auto; }
}
@media (hover: hover) and (pointer: fine){
html { cursor: none; }
a, button, [role="button"], input, select, textarea { cursor: none; }
input, select, textarea { cursor: text; }
}
/* === Split-text reveal === */
.js-reveal .split { display: inline-block; }
.js-reveal .split__word { display: inline-block; overflow: hidden; }
.js-reveal .split__word > span {
display: inline-block; transform: translateY(110%);
transition: transform 800ms var(--ease-out);
}
.js-reveal .split.is-in .split__word > span { transform: translateY(0); }
.js-reveal .split.is-in .split__word:nth-child(1) > span { transition-delay: 30ms; }
.js-reveal .split.is-in .split__word:nth-child(2) > span { transition-delay: 90ms; }
.js-reveal .split.is-in .split__word:nth-child(3) > span { transition-delay: 150ms; }
.js-reveal .split.is-in .split__word:nth-child(4) > span { transition-delay: 210ms; }
.js-reveal .split.is-in .split__word:nth-child(5) > span { transition-delay: 270ms; }
.js-reveal .split.is-in .split__word:nth-child(6) > span { transition-delay: 330ms; }
.js-reveal .split.is-in .split__word:nth-child(7) > span { transition-delay: 390ms; }
.js-reveal .split.is-in .split__word:nth-child(8) > span { transition-delay: 450ms; }
.js-reveal .split.is-in .split__word:nth-child(9) > span { transition-delay: 510ms; }
.js-reveal .split.is-in .split__word:nth-child(10) > span { transition-delay: 570ms; }
.js-reveal .split.is-in .split__word:nth-child(n+11) > span { transition-delay: 630ms; }
@media (prefers-reduced-motion: reduce){
.js-reveal .split__word > span { transform: none !important; transition: none !important; }
.frame__img img { transition: none !important; }
.card:hover { transform: none !important; }
.btn--copper:hover { transform: none !important; }
}
/* === Selection === */
::selection { background: var(--amber); color: #fff; }
/* === Compare table — refined === */
.compare .col-elite { background: var(--copper-soft); }
.compare .col-elite::before { height: 2px; background: var(--amber); }
/* === Footer — Field Notes === */
.site-footer { background: var(--field-notes); color: rgba(255,255,255,0.78); }
.site-footer a { color: rgba(255,255,255,0.78); }
.site-footer a:hover { color: #fff; }
/* ===== A11Y + PERFORMANCE FIXES (Lighthouse 100 floor per DESIGN.md §9) === */
:root {
/* Deeper brass for BUTTON BG so white-on-brass clears WCAG AA 4.5:1
(brand brass #A07A4B alone = ~3:1 fail; this deeper variant = ~6:1 pass) */
--amber-btn: #7A5A33;
--amber-btn-hov: #5E4423;
/* Lighter brass for brass TEXT on INK/NAVY dark surfaces (passes AA 7:1) */
--amber-on-dark: #C8A06C;
}
/* The single visible "Get a Proposal" button uses the AA-safe deeper amber */
.btn--copper, .btn.btn--copper { background: var(--amber-btn); }
.btn--copper:hover, .btn.btn--copper:hover { background: var(--amber-btn-hov); }
/* Amber TEXT on dark surfaces becomes the lighter amber-on-dark variant.
Covers .section--ink, .section--graphite, .cta-band, .estimator__out. */
.section--ink .spec--copper,
.section--graphite .spec--copper,
.cta-band .spec--copper,
.estimator__out .spec--copper,
.estimator__out [style*="color:var(--copper)"],
.cta-band [style*="color:var(--copper)"],
.section--ink [style*="color:var(--copper)"],
.section--graphite [style*="color:var(--copper)"],
.estimator__out .copper, .section--ink .copper, .section--graphite .copper { color: var(--amber-on-dark) !important; }
/* Inline colored links (in text blocks) get underlines so color isn't the only
visual cue (link-in-text-block). The .link-arrow / .btn variants are exempt. */
p > a[style*="color"]:not(.btn):not(.link-arrow),
.lead > a[style*="color"]:not(.btn):not(.link-arrow),
.est-disclaimer > a:not(.btn):not(.link-arrow) {
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 3px;
}
/* CLS — reserve the hero CTA min-height so font swap doesn't shift it */
.hero__cta { min-height: 60px; }
/* Final Lighthouse a11y polish (Cap A11y at 100) */
.vet-badge { color: var(--amber-on-dark); }
.footer-bottom { color: rgba(255,255,255,0.62); } /* was 0.45 - now AA */
.site-footer .est-disclaimer { color: rgba(255,255,255,0.65); } /* same as above */
/* Catch the "" dark inline panels */
[style*="background:var(--ink)"] .spec,
[style*="background:var(--graphite)"] .spec,
[style*="background:var(--ink)"] [style*="color:var(--copper)"],
[style*="background:var(--graphite)"] [style*="color:var(--copper)"] {
color: var(--amber-on-dark) !important;
}
/* CLS - the hero CTA buttons need an explicit height so font-swap doesn't shift them */
.hero__cta .btn--lg, .hero__cta .btn { min-height: 56px; line-height: 1.05; }
.hero__cta { min-height: 64px; align-items: center; }
/* CLS hardening - reserve exact heights so font swap can't shift */
.hero__cta { min-height: 68px; }
.hero h1 { min-height: calc(var(--fs-display) * 0.94 * 2); /* ~2 lines */ }
@media (min-width: 900px){ .hero h1 { min-height: calc(var(--fs-display) * 0.94 * 2.4); } }
/* HARD CLS lock - buttons and hero CTA get fixed pixel heights */
.hero__cta .btn--lg { height: 56px; padding-block: 0; }
.hero__cta .btn { height: 48px; padding-block: 0; }
.hero__cta { min-height: 62px; }
.hero h1 { min-height: 130px; }
@media (min-width: 900px){ .hero h1 { min-height: 200px; } }
@media (min-width: 900px){ .hero__grid { grid-template-columns: 1.25fr 0.95fr; } }
/* ===== TEAM - real-member elevated card (v2 Survey - frame ticks + Spectral) === */
.member--real { background: var(--white); border: 0; padding: 0; display: flex; flex-direction: column; }
.member--real .member__frame { position: relative; margin: 0; background: var(--white); border: 1px solid var(--line-2); padding: 8px; }
.member--real .member__img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-2); }
.member--real .member__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; filter: saturate(0.92); transition: transform 700ms cubic-bezier(0.16,1,0.3,1), filter 400ms ease; }
.member--real:hover .member__img img { transform: scale(1.025); filter: saturate(1); }
.member--real .member__corner { position: absolute; width: 14px; height: 14px; pointer-events: none; z-index: 2; border-color: var(--copper); border-style: solid; border-width: 0; }
.member--real .member__corner--tl { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.member--real .member__corner--br { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }
.member--real .member__body { padding: 24px 4px 0; }
.member--real .member__body h3 { font-family: var(--font-display); font-size: clamp(1.35rem, 1.7vw, 1.6rem); font-weight: 700; letter-spacing: -0.012em; line-height: 1.15; color: var(--ink); margin: 0 0 4px; }
.member--real .member__role { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--copper-deep); margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.member--real .member__badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--copper-deep); margin: 0 0 14px; }
.member--real .member__badge > span { color: var(--copper); font-size: 0.78rem; line-height: 1; }
.member--real .member__bio { color: var(--slate); font-size: 0.94rem; line-height: 1.62; margin: 0 0 12px; }
.member--real .member__bio:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
.member--real .member__img img { transition: none; }
.member--real:hover .member__img img { transform: none; }
}
/* (FIG tooltip block removed - data-tip elements no longer in markup) */
/* ===== HERO v3 — full-bleed Survey (replaces .hero on index) ============= */
.hero3 {
position: relative;
min-height: clamp(560px, 88vh, 940px);
padding-top: clamp(5.5rem, 11vh, 8rem);
padding-bottom: clamp(3rem, 6vh, 5.5rem);
display: flex;
overflow: hidden;
isolation: isolate;
background: var(--paper);
}
.hero3__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero3__photo {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: center 38%;
filter: grayscale(0.18) brightness(1.05);
opacity: 0.55;
}
.hero3__wash {
position: absolute; inset: 0;
background: linear-gradient(180deg,
rgba(241,242,240,0.92) 0%,
rgba(241,242,240,0.42) 30%,
rgba(241,242,240,0.55) 68%,
rgba(241,242,240,0.96) 100%);
}
.hero3__inner {
position: relative; z-index: 1;
flex: 1;
display: flex; flex-direction: column;
justify-content: space-between;
gap: clamp(2.5rem, 7vh, 5rem);
}
/* TOP cluster: eyebrow + proof + marquee */
.hero3__top { display: flex; flex-direction: column; gap: var(--sp-20); }
.hero3__top > .spec { margin: 0; }
.hero3__proof { display: flex; align-items: center; gap: var(--sp-16); flex-wrap: wrap; }
.hero3__avatars {
display: inline-flex; align-items: center; gap: 14px;
text-decoration: none; color: var(--ink);
padding: 4px 0;
}
.hero3__avatars > .hero3__avatar:nth-child(2) { margin-left: -22px; }
.hero3__avatar {
width: 52px; height: 52px;
border-radius: 50%;
border: 2px solid var(--paper);
overflow: hidden;
background: var(--paper-2);
box-shadow: 0 1px 0 var(--line-2), 0 6px 18px rgba(20,23,28,0.10);
flex: none; display: inline-block;
}
.hero3__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
.hero3__avatars-label {
font-family: var(--font-mono);
font-size: 0.72rem; font-weight: 500;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--slate); white-space: nowrap;
}
.hero3__avatars:hover .hero3__avatars-label { color: var(--copper-deep); }
/* Marquee */
.hero3__marquee {
border-block: 1px solid var(--line);
background: rgba(241,242,240,0.45);
backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
padding-block: 12px;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.hero3__marquee-track {
display: inline-flex; align-items: center; gap: 24px;
width: max-content;
animation: hero3-marquee 42s linear infinite;
}
.hero3__marquee:hover .hero3__marquee-track { animation-play-state: paused; }
@keyframes hero3-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.hero3__chip {
font-family: var(--font-mono);
font-size: 0.76rem;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--ink); white-space: nowrap;
}
.hero3__chip b { font-weight: 600; }
.hero3__chip-sep {
color: var(--copper);
font-family: var(--font-mono);
opacity: 0.55;
}
/* BOTTOM cluster: headline + pull-quote */
.hero3__bottom {
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-32);
align-items: end;
}
@media (min-width: 900px) {
.hero3__bottom { grid-template-columns: 1.45fr 1fr; gap: clamp(2rem, 4vw, 5rem); }
}
.hero3__lead-col { display: flex; flex-direction: column; gap: var(--sp-32); }
.hero3__h1 {
font-family: var(--font-display);
font-size: clamp(2.4rem, 5vw, 4.4rem);
font-weight: 700;
letter-spacing: -0.018em;
line-height: 0.98;
color: var(--ink);
margin: 0;
text-wrap: balance;
}
.hero3__accent { color: var(--copper-deep); font-style: italic; }
.hero3__cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-20); }
.btn-split {
display: inline-flex; align-items: stretch;
background: var(--amber-btn);
color: #fff;
font-family: var(--font-body);
font-weight: 700;
font-size: 1rem;
text-decoration: none;
border-radius: var(--r);
overflow: hidden;
transition: background-color 240ms ease, transform 200ms ease;
--mx: 0; --my: 0;
transform: translate(var(--mx), var(--my));
}
.btn-split:hover { background: var(--amber-btn-hov); }
.btn-split:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 4px var(--amber-btn); }
.btn-split__label { padding: 14px 22px; display: inline-flex; align-items: center; height: 48px; box-sizing: border-box; }
.btn-split__icon {
padding: 0 16px;
display: inline-flex; align-items: center; justify-content: center;
border-left: 1px solid rgba(255,255,255,0.30);
transition: transform 240ms ease;
height: 48px;
}
.btn-split:hover .btn-split__icon { transform: translateX(3px); }
.hero3__secondary {
font-family: var(--font-body);
font-size: 0.95rem;
color: var(--ink);
text-decoration: underline;
text-decoration-color: var(--copper);
text-decoration-thickness: 1.5px;
text-underline-offset: 4px;
transition: color 200ms ease;
}
.hero3__secondary:hover { color: var(--copper-deep); }
.hero3__pull-col { padding-bottom: 6px; }
.hero3__pull {
font-family: var(--font-display);
font-size: clamp(1.1rem, 1.5vw, 1.45rem);
font-style: italic;
font-weight: 500;
line-height: 1.45;
color: var(--copper-deep);
margin: 0;
max-width: 36ch;
text-wrap: pretty;
}
@media (min-width: 900px) {
.hero3__pull-col { padding-bottom: 12px; }
.hero3__pull { text-align: right; margin-left: auto; }
}
/* Mobile tightening */
@media (max-width: 640px) {
.hero3 { min-height: clamp(520px, 92vh, 720px); }
.hero3__h1 { font-size: clamp(2rem, 8vw, 2.8rem); }
.hero3__avatars-label { display: none; }
.hero3__marquee-track { animation-duration: 28s; }
.hero3__pull { font-size: 1.05rem; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.hero3__marquee-track { animation: none; transform: translateX(0); }
.btn-split, .btn-split__icon { transition: none; }
}
/* ===== BRAND LOGO (official wordmark - replaces inline brand__mark + text) === */
.brand--logo {
display: inline-flex;
align-items: center;
gap: 0;
text-decoration: none;
padding: 4px 0;
line-height: 0;
}
.brand__logo {
display: block;
height: 64px; /* was 40px - bumped for prominence */
width: auto;
max-width: 100%;
}
@media (max-width: 640px) {
.brand__logo { height: 48px; } /* was 34px */
}
/* Footer uses the dark variant at a slightly larger size */
.footer-brand .brand__logo { height: 56px; }
@media (max-width: 640px) {
.footer-brand .brand__logo { height: 48px; }
}
/* ===== COMPARE TABLE - elevated per Swiss Industrial + Minimalist synthesis === */
.compare-wrap {
border: 1px solid var(--ink);
background: var(--white);
position: relative;
padding: 0;
}
.compare__caption {
font-family: var(--font-mono);
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--copper-deep); /* AA-safe 5.2:1 on paper-2 */
margin: 0;
padding: 14px 20px;
border-bottom: 1px solid var(--line);
background: var(--paper-2);
}
/* Column headers - asymmetric weighting: ECS dominant, competitors recessed */
.compare thead th {
font-family: var(--font-display);
font-weight: 700;
font-size: 0.95rem;
vertical-align: bottom;
color: var(--ink); /* base ink - competitor cols use lower weight feel */
padding: 28px clamp(10px, 2vw, 24px) 20px;
position: relative;
}
.compare__sub {
display: block;
font-family: var(--font-mono);
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-2); /* navy - AA 7:1 on white */
margin-bottom: 8px;
opacity: 0.85;
}
.compare thead .col-elite {
color: var(--ink);
padding-top: 24px;
padding-bottom: 16px;
}
.compare thead .col-elite .compare__sub {
color: var(--copper-deep);
}
.compare__logo {
height: 38px;
width: auto;
display: block;
margin: 6px auto 0;
}
/* Brass anchor rule on the ECS column - bigger than before */
.compare .col-elite::before {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 4px;
background: var(--copper);
}
.compare .col-elite {
background: rgba(160,122,75,0.085); /* slightly stronger tint */
position: relative;
}
/* Row rhythm */
.compare th, .compare td {
padding: 18px clamp(10px, 2vw, 24px);
text-align: center;
border-bottom: 1px solid var(--line);
}
.compare tbody th {
text-align: left;
font-family: var(--font-body);
font-weight: 600;
color: var(--ink);
white-space: nowrap;
font-size: 1.02rem;
}
.compare tbody tr { transition: background-color 160ms ease; }
.compare tbody tr:hover { background-color: rgba(15,26,38,0.025); }
.compare tbody tr:hover .col-elite { background-color: rgba(160,122,75,0.13); }
/* Markers - brutalist 90deg square, no circles */
.compare .mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 0;
font-size: 0.9rem;
}
.mark--yes {
background: var(--copper);
color: #fff;
}
.mark--part, .mark--no {
background: transparent;
color: var(--slate-2);
}
/* Last row - no border, breathing room */
.compare tbody tr:last-child th,
.compare tbody tr:last-child td { border-bottom: 0; }
/* ===== BENTO - "The difference is in the method, not the volume" ========== */
.bento {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
}
@media (min-width: 720px){
.bento { grid-template-columns: repeat(6, 1fr); }
.bento__card--method { grid-column: span 2; }
.bento__card--compliance { grid-column: span 2; }
.bento__card--oversight { grid-column: span 2; }
.bento__card--service { grid-column: span 3; }
.bento__card--defense { grid-column: span 3; }
.bento__card--cta { grid-column: span 6; }
}
@media (min-width: 1100px){
.bento__card--service { grid-column: span 2; }
.bento__card--defense { grid-column: span 2; }
.bento__card--cta { grid-column: span 2; }
}
.bento__card {
background: var(--white);
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
}
.bento__viz {
position: relative;
padding: 32px 32px 12px;
display: flex;
align-items: center;
justify-content: center;
min-height: 168px;
color: var(--ink);
}
.bento__body {
padding: 20px 32px 32px;
}
.bento__body .feature__num {
display: block;
font-family: var(--font-mono);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--copper-deep);
margin-bottom: 8px;
}
.bento__body h3 { margin-bottom: 8px; }
.bento__body p { color: var(--slate); margin: 0; font-size: 0.98rem; }
/* ---- 1. Asset class ladder ---------------------------------------------- */
.ladder { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; width: 100%; max-width: 240px; }
.ladder__step {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 12px;
padding: 6px 10px;
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--white);
position: relative;
overflow: hidden;
}
.ladder__step b {
font-family: var(--font-display);
font-weight: 800;
font-size: 0.95rem;
letter-spacing: -0.01em;
}
.ladder__step--5 { background: var(--copper-deep); width: 100%; }
.ladder__step--7 { background: var(--copper-deep); width: 88%; }
.ladder__step--15 { background: var(--steel); width: 74%; }
.ladder__step--27 { background: var(--navy); width: 56%; color: var(--white); }
.ladder__step--39 { background: var(--ink); width: 42%; }
.ladder__caption {
margin: 14px 0 0;
font-family: var(--font-mono);
font-size: 0.6rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-2);
opacity: 0.85;
}
.bento__viz--ladder { flex-direction: column; align-items: flex-start; padding-left: 32px; }
/* ---- 2. Document mock --------------------------------------------------- */
.doc {
position: relative;
width: 200px;
background: var(--paper-2);
padding: 18px 20px 22px;
border: 1px solid var(--line-2);
color: var(--ink);
}
.doc__corner {
position: absolute;
width: 12px; height: 12px;
border-color: var(--copper);
border-style: solid;
border-width: 0;
pointer-events: none;
}
.doc__corner--tl { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.doc__corner--br { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }
.doc__head {
margin: 0 0 14px;
font-family: var(--font-mono);
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-2);
}
.doc__row {
display: block;
height: 4px;
background: var(--line);
margin-bottom: 8px;
}
.doc__row--80 { width: 80%; }
.doc__row--60 { width: 60%; }
.doc__row--90 { width: 90%; }
.doc__row--40 { width: 40%; }
.doc__stamp {
position: absolute;
bottom: 12px;
right: 14px;
font-family: var(--font-mono);
font-size: 0.58rem;
font-weight: 700;
letter-spacing: 0.18em;
color: var(--copper-deep);
border: 1px solid var(--copper-deep);
padding: 3px 6px;
transform: rotate(-6deg);
}
/* ---- 3. EA Seal --------------------------------------------------------- */
.seal {
width: 130px;
height: 130px;
background: var(--ink);
color: var(--copper);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.seal::before, .seal::after {
content: ""; position: absolute;
width: 10px; height: 10px;
border-color: var(--copper);
border-style: solid;
border-width: 0;
}
.seal::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.seal::after { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }
.seal__svg { width: 100%; height: 100%; }
/* ---- 4. Humans (avatar stack + ghost competitor) ------------------------ */
.humans {
display: flex;
align-items: center;
gap: 8px;
position: relative;
}
.humans__avatar {
width: 56px; height: 56px;
background: var(--paper-2);
border: 2px solid var(--white);
overflow: hidden;
flex: none;
display: inline-block;
box-shadow: 0 0 0 1px var(--line-2);
}
.humans__avatar:nth-child(2) { margin-left: -16px; z-index: 1; }
.humans__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
.humans__line {
width: 28px;
height: 1px;
background: var(--line-2);
margin-left: 12px;
}
.humans__ghost {
font-family: var(--font-mono);
font-size: 0.62rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--slate-2);
text-decoration: line-through;
text-decoration-color: var(--copper);
text-decoration-thickness: 1.5px;
opacity: 0.7;
}
/* ---- 5. Shield mark ----------------------------------------------------- */
.shield-mark {
width: 110px;
height: auto;
color: var(--copper);
}
/* ---- 6. CTA card (dark navy) ------------------------------------------- */
.bento__card--cta {
background: var(--ink);
color: var(--white);
}
.bento__card--cta .bento__viz { color: var(--copper); min-height: 120px; padding-top: 36px; padding-bottom: 4px; }
.bento__card--cta .bento__body .feature__num { color: var(--amber-on-dark); }
.bento__card--cta h3 { color: var(--white); }
.bento__card--cta p { color: rgba(255,255,255,0.72); }
.compass-mark { width: 72px; height: 72px; }
.bento__cta {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 16px;
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--amber-on-dark);
text-decoration: underline;
text-decoration-color: var(--copper);
text-decoration-thickness: 1.5px;
text-underline-offset: 4px;
--mx: 0; --my: 0;
transform: translate(var(--mx), var(--my));
}
.bento__cta:hover { color: #fff; }
@media (prefers-reduced-motion: reduce) {
.bento__cta { transform: none; }
}
/* ===== SERVICES GRID - modern image-led cards w/ hover-lift + arrow CTA === */
.services-grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(20px, 2.5vw, 32px);
}
@media (min-width: 640px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px){ .services-grid { grid-template-columns: repeat(3, 1fr); } }
.svc-card {
display: flex;
flex-direction: column;
text-decoration: none;
color: var(--ink);
background: var(--white);
border: 1px solid var(--line);
transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
border-color 280ms ease;
}
.svc-card:hover { transform: translateY(-3px); border-color: var(--copper); }
.svc-card:focus-visible {
outline: 2px solid var(--copper);
outline-offset: 3px;
}
.svc-card__media {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--paper-2);
margin: 0;
}
.svc-card__media img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
filter: saturate(0.96);
}
.svc-card:hover .svc-card__media img { transform: scale(1.04); }
.svc-card__tag {
position: absolute;
top: 12px;
left: 12px;
font-family: var(--font-mono);
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink);
background: var(--paper);
padding: 6px 10px;
border: 1px solid var(--ink);
}
.svc-card__body {
padding: 24px 24px 28px;
display: flex;
flex-direction: column;
gap: 12px;
flex: 1;
}
.svc-card__body h3 {
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 700;
letter-spacing: -0.012em;
line-height: 1.18;
color: var(--ink);
margin: 0;
}
.svc-card__body p {
font-size: 0.96rem;
line-height: 1.55;
color: var(--slate);
margin: 0;
flex: 1;
}
.svc-card__cta {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 4px;
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--copper-deep);
}
.svc-card__cta svg {
flex: none;
transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.svc-card:hover .svc-card__cta svg { transform: translate(3px, -3px); }
.services-grid__more {
margin: clamp(28px, 4vw, 48px) 0 0;
text-align: center;
}
.services-grid__more .link-arrow {
font-family: var(--font-mono);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink);
border-bottom: 1px solid var(--copper);
padding-bottom: 4px;
display: inline-flex;
align-items: center;
gap: 8px;
}
.services-grid__more .link-arrow:hover { color: var(--copper-deep); }
.services-grid__more .link-arrow .arr { transition: transform 240ms ease; }
.services-grid__more .link-arrow:hover .arr { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
.svc-card,
.svc-card__media img,
.svc-card__cta svg,
.services-grid__more .link-arrow .arr { transition: none; }
.svc-card:hover { transform: none; }
.svc-card:hover .svc-card__media img { transform: none; }
.svc-card:hover .svc-card__cta svg { transform: none; }
}
/* ===== COMPARE TABLE - Apple-style restraint (overrides earlier elevation) === */
.compare-wrap {
border: 0;
background: transparent;
padding: 0;
}
.compare {
width: 100%;
border-collapse: collapse;
font-size: 1rem;
}
/* Column headers - quiet, content-first */
.compare thead th {
font-family: var(--font-display);
font-weight: 600;
font-size: 0.98rem;
color: var(--ink);
padding: 28px 16px 24px;
vertical-align: middle;
text-align: center;
border-bottom: 1px solid var(--line);
}
.compare thead .col-elite { padding: 20px 16px 16px; }
/* Strip all chrome from ECS column - logo carries the weight */
.compare .col-elite { background: transparent; position: static; }
.compare .col-elite::before { content: none; } /* kill the per-row brass top rule */
.compare thead .col-elite { background: transparent; }
/* Subtle column background ONLY on the column body, not every cell */
.compare tbody .col-elite { background: rgba(160,122,75,0.05); }
.compare__logo {
height: 44px;
width: auto;
display: block;
margin: 0 auto;
}
/* Row cells - generous, quiet hairlines */
.compare th, .compare td {
padding: 22px 16px;
border-bottom: 1px solid var(--line);
text-align: center;
}
.compare tbody th {
text-align: left;
font-family: var(--font-body);
font-weight: 500;
font-size: 1rem;
color: var(--ink);
white-space: nowrap;
padding-left: 0;
}
.compare tbody tr:last-child th,
.compare tbody tr:last-child td { border-bottom: 0; }
/* Strip row hover - was visual noise */
.compare tbody tr { transition: none; }
.compare tbody tr:hover,
.compare tbody tr:hover .col-elite { background-color: transparent; }
.compare tbody tr:hover .col-elite { background: rgba(160,122,75,0.05); }
/* Markers - quiet glyphs, no block backgrounds */
.compare .mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto; height: auto;
background: transparent;
border-radius: 0;
}
.mark--yes { color: var(--copper-deep); } /* brass-deep checkmark, no block */
.mark--no { color: var(--slate-2); opacity: 0.6; }
.mark--part { color: var(--slate-2); opacity: 0.7; }
.compare .mark svg { width: 16px; height: 16px; }
.mark--yes svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: no-preference) {
.compare tbody tr { transition: none; } /* keep stripped */
}
/* ===== SERVICES BENTO — 6 unique variants =================================== */
.svc-bento {
display: grid;
grid-template-columns: 1fr;
gap: clamp(16px, 2vw, 24px);
}
@media (min-width: 720px) {
.svc-bento { grid-template-columns: repeat(2, 1fr); }
.svc-card--feature { grid-column: span 2; }
.svc-card--bare { grid-column: span 2; }
}
@media (min-width: 1100px) {
.svc-bento { grid-template-columns: repeat(12, 1fr); }
.svc-card--feature { grid-column: span 8; }
.svc-card--stat { grid-column: span 4; }
.svc-card--tall { grid-column: span 4; }
.svc-card--split { grid-column: span 4; }
.svc-card--ticks { grid-column: span 4; }
.svc-card--bare { grid-column: span 12; }
}
/* GSAP initial-state hook (hidden until GSAP fades them in).
Falls back to fully-visible if .gsap-ready never gets added. */
.gsap-ready [data-svc-animate] .svc-card { opacity: 0; transform: translateY(40px); }
/* === Variant 1: CORE (image-bg with overlay headline) === */
.svc-card--feature {
position: relative;
overflow: hidden;
min-height: clamp(360px, 36vw, 520px);
border: 1px solid var(--line);
background: var(--ink);
color: #fff;
}
.svc-card--feature .svc-card__media--bg {
position: absolute; inset: 0;
margin: 0; overflow: hidden;
aspect-ratio: auto;
background: var(--paper-2);
}
.svc-card--feature .svc-card__media--bg img {
width: 100%; height: 100%;
object-fit: cover; display: block;
filter: saturate(0.95) brightness(0.92);
transition: transform 900ms cubic-bezier(0.16,1,0.3,1), filter 400ms ease;
}
.svc-card--feature::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg,
rgba(15,26,38,0.10) 0%,
rgba(15,26,38,0.30) 45%,
rgba(15,26,38,0.88) 100%);
pointer-events: none;
}
.svc-card--feature .svc-card__body--overlay {
position: relative; z-index: 2;
margin-top: auto;
padding: clamp(20px, 3vw, 36px) clamp(20px, 3vw, 40px);
display: flex; flex-direction: column; gap: 12px;
color: #fff;
}
.svc-card--feature h3 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.6rem); font-weight: 700; letter-spacing: -0.018em; line-height: 1.06; margin: 0; }
.svc-card--feature .svc-card__body p { color: rgba(255,255,255,0.85); font-size: 1.02rem; max-width: 56ch; }
.svc-card--feature .svc-card__tag {
top: 16px; left: 16px;
background: rgba(255,255,255,0.92);
border-color: var(--ink);
z-index: 3;
}
.svc-card--feature .svc-card__cta { color: var(--amber-on-dark); }
.svc-card--feature:hover .svc-card__media--bg img { transform: scale(1.04); filter: saturate(1) brightness(0.95); }
.svc-card--feature:hover { transform: translateY(-3px); }
/* === Variant 2: PLANNING (stat tile) === */
.svc-card--stat .svc-card__stat {
display: flex; flex-direction: column;
border: 1px solid var(--line);
padding: 12px 16px;
background: var(--paper-2);
margin-bottom: 4px;
align-self: flex-start;
}
.svc-card__stat-label {
font-family: var(--font-mono);
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--copper-deep);
}
.svc-card__stat-val {
font-family: var(--font-display);
font-size: 1.3rem;
font-weight: 700;
color: var(--ink);
letter-spacing: -0.01em;
margin-top: 2px;
}
/* === Variant 3: ACQUIRED (tall portrait) === */
.svc-card--tall .svc-card__media--portrait { aspect-ratio: 3 / 4; }
/* === Variant 4: NEW BUILD (horizontal split) === */
@media (min-width: 720px) {
.svc-card--split { display: grid; grid-template-columns: 1fr 1fr; }
.svc-card--split .svc-card__media--side { aspect-ratio: auto; height: 100%; margin: 0; }
.svc-card--split .svc-card__media--side img { height: 100%; object-fit: cover; }
.svc-card--split .svc-card__body { padding: 22px 22px 24px; }
}
/* === Variant 5: DEFENSE (corner ticks frame) === */
.svc-card--ticks .svc-card__media--ticked { position: relative; }
.svc-card__corner {
position: absolute;
width: 14px; height: 14px;
pointer-events: none;
z-index: 3;
border-color: var(--copper);
border-style: solid;
border-width: 0;
}
.svc-card__corner--tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.svc-card__corner--br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
/* === Variant 6: ADVISORY (full-width dark, no image) === */
.svc-card--bare {
background: var(--ink);
color: #fff;
border: 1px solid var(--ink);
padding: clamp(24px, 3vw, 40px);
}
.svc-card--bare:hover { transform: translateY(-3px); border-color: var(--copper); }
.svc-card__bare-inner {
display: grid;
grid-template-columns: 1fr;
gap: clamp(16px, 2vw, 32px);
align-items: end;
}
@media (min-width: 900px) {
.svc-card__bare-inner { grid-template-columns: 1.4fr 1fr; gap: clamp(32px, 5vw, 80px); }
}
.svc-card__bare-left { display: flex; flex-direction: column; gap: 16px; }
.svc-card__bare-right { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.svc-card--bare .svc-card__tag--on-dark {
position: static;
background: transparent;
border: 1px solid var(--copper);
color: var(--amber-on-dark);
display: inline-flex;
width: max-content;
}
.svc-card--bare h3 {
color: #fff;
font-size: clamp(1.4rem, 2.6vw, 2.2rem);
font-weight: 700;
letter-spacing: -0.018em;
line-height: 1.08;
margin: 0;
max-width: 18ch;
}
.svc-card--bare p { color: rgba(255,255,255,0.78); margin: 0; font-size: 1rem; max-width: 42ch; }
.svc-card__cta--on-dark {
color: var(--amber-on-dark);
font-size: 0.8rem;
}
.svc-card--bare:hover .svc-card__cta--on-dark { color: #fff; }
.svc-card--bare:hover .svc-card__cta svg { transform: translate(4px, -4px); }
@media (prefers-reduced-motion: reduce) {
.svc-card--feature .svc-card__media--bg img,
.svc-card--bare .svc-card__cta svg { transition: none; }
.svc-card--feature:hover .svc-card__media--bg img,
.svc-card--bare:hover { transform: none; }
.gsap-ready [data-svc-animate] .svc-card { opacity: 1; transform: none; }
}
/* ===== HERO-PHOTO - full-bleed image hero (inner pages) ================= */
.hero-photo {
position: relative;
min-height: clamp(420px, 56vh, 620px);
display: flex;
align-items: center;
overflow: hidden;
isolation: isolate;
background: var(--paper);
padding-block: clamp(5rem, 10vh, 8rem);
}
.hero-photo__bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.hero-photo__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 38%;
filter: grayscale(0.18) brightness(1.04);
opacity: 0.55;
display: block;
}
.hero-photo__wash {
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(240,235,224,0.90) 0%,
rgba(240,235,224,0.40) 32%,
rgba(240,235,224,0.55) 68%,
rgba(240,235,224,0.96) 100%);
}
.hero-photo__container {
position: relative;
z-index: 1;
width: 100%;
}
.hero-photo .section-head { max-width: 56rem; }
.hero-photo h1 { color: var(--ink); }
.hero-photo .lead { color: var(--ink-2); max-width: 50ch; }
/* ===== BENTO image variant (real product-shot imagery in viz slot) ====== */
.bento__viz--img {
padding: 0; /* image goes edge-to-edge in viz area */
min-height: 200px;
overflow: hidden;
background: var(--ink); /* matches the dark backgrounds in the source images */
}
.bento__viz--img img {
width: 100%;
height: 100%;
max-height: 240px;
object-fit: cover;
display: block;
filter: saturate(1.02) brightness(1.0);
transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.bento__card:hover .bento__viz--img img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
.bento__viz--img img { transition: none; }
.bento__card:hover .bento__viz--img img { transform: none; }
}
/* The CTA card uses an ink-bg background already; its image should sit inside */
.bento__card--cta .bento__viz--img { background: transparent; }
/* ===== TEAM SCROLL - editorial cards in a horizontal-scroll track ========= */
.team-scroll {
position: relative;
margin-top: clamp(2rem, 4vw, 3.5rem);
}
.team-scroll__track {
display: flex;
gap: clamp(48px, 6vw, 96px);
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--gutter);
padding: 1rem var(--gutter) 1rem 0;
margin: 0;
list-style: none;
scrollbar-width: thin;
scrollbar-color: var(--copper) transparent;
-webkit-overflow-scrolling: touch;
}
.team-scroll__track::-webkit-scrollbar { height: 6px; }
.team-scroll__track::-webkit-scrollbar-track { background: transparent; }
.team-scroll__track::-webkit-scrollbar-thumb { background: var(--copper); }
/* Nav buttons - top-right */
.team-scroll__nav {
display: flex;
gap: 8px;
position: absolute;
top: -56px;
right: 0;
z-index: 2;
}
.team-scroll__btn {
width: 44px; height: 44px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent;
border: 1px solid var(--line-2);
color: var(--ink);
cursor: pointer;
transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.team-scroll__btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.team-scroll__btn:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
.team-scroll__btn[disabled] { opacity: 0.3; pointer-events: none; }
.team-scroll__hint {
margin: 18px 0 0;
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--slate-2);
}
/* ===== Editorial team card ============================================== */
.team-card {
flex: 0 0 auto;
width: min(880px, 92vw);
scroll-snap-align: start;
display: flex;
flex-direction: column;
gap: clamp(20px, 2vw, 28px);
position: relative;
}
.team-card__role {
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ink);
opacity: 0.55;
margin: 0;
}
.team-card[data-team-pos="right"] .team-card__role { text-align: left; }
.team-card__layout {
display: flex;
align-items: stretch;
position: relative;
}
.team-card[data-team-pos="right"] .team-card__layout { flex-direction: row-reverse; }
/* Portrait */
.team-card__media {
position: relative;
flex: 0 0 auto;
width: clamp(260px, 28vw, 360px);
aspect-ratio: 3 / 4;
margin: 0;
overflow: hidden;
background: var(--ink);
}
.team-card__media img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center 22%;
display: block;
filter: saturate(0.96);
transition: transform 700ms cubic-bezier(0.16,1,0.3,1);
}
.team-card:hover .team-card__media img { transform: scale(1.035); }
.team-card__grain {
position: absolute; inset: 0;
z-index: 2;
background: linear-gradient(180deg, transparent 60%, rgba(15,26,38,0.18) 100%);
pointer-events: none;
}
/* Placeholder portrait */
.team-card__media--ph {
background: var(--paper-2);
display: flex; align-items: center; justify-content: center;
flex-direction: column;
gap: 12px;
}
.team-card__mono-initial {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(5rem, 8vw, 7rem);
color: var(--line-2);
letter-spacing: -0.02em;
line-height: 1;
}
.team-card__placeholder-label {
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--slate);
}
/* Info block - sits beside portrait with a clean gap */
.team-card__info {
flex: 1 1 0;
min-width: 0;
position: relative;
margin-left: clamp(24px, 3vw, 44px);
z-index: 3;
display: flex;
flex-direction: column;
gap: clamp(20px, 2.5vw, 32px);
justify-content: flex-start;
align-self: stretch;
padding-block: clamp(8px, 1.5vw, 20px);
align-items: flex-start;
text-align: left;
}
.team-card[data-team-pos="right"] .team-card__info {
margin-left: 0;
margin-right: clamp(24px, 3vw, 44px);
align-items: flex-start;
text-align: left;
}
/* Name - monumental editorial type, capped so it stays in-column */
.team-card__name {
font-family: var(--font-display);
font-size: clamp(2.2rem, 4.2vw, 3.6rem);
font-weight: 300;
line-height: 1.04;
letter-spacing: -0.022em;
color: var(--ink);
margin: 0;
max-width: 100%;
overflow-wrap: break-word;
hyphens: auto;
}
.team-card__family { font-weight: 500; }
/* Row: CTA + bio */
.team-card__row { display: contents; }
.team-card__cta { display: none; }
/* Bio block */
.team-card__bio {
max-width: none;
width: 100%;
display: flex;
flex-direction: column;
gap: 14px;
}
.team-card__bio p {
font-size: 0.92rem;
line-height: 1.7;
color: var(--slate);
margin: 0;
}
.team-card__badge {
font-family: var(--font-mono);
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--copper-deep);
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
}
.team-card__badge > span { color: var(--copper); font-size: 0.78rem; line-height: 1; }
/* Mobile: stack the layout vertically, name on top of bio */
@media (max-width: 720px) {
.team-card__layout, .team-card[data-team-pos="right"] .team-card__layout { flex-direction: column; }
.team-card__media { width: 100%; aspect-ratio: 4/5; }
.team-card__info, .team-card[data-team-pos="right"] .team-card__info {
margin: -32px 0 0;
align-items: flex-start;
text-align: left;
padding-block: 0;
}
.team-card__row, .team-card[data-team-pos="right"] .team-card__row {
flex-direction: row;
justify-content: flex-start;
}
.team-card__bio { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.team-card__media img { transition: none; }
.team-card:hover .team-card__media img { transform: none; }
.team-card__cta svg { transition: none; }
}
/* ===== HOME PAGE - sections stack on each other as a card deck ============ */
.home-stack { position: relative; isolation: isolate; }
.home-stack > section {
position: relative;
border-radius: var(--r-lg);
}
.home-stack > section + section {
margin-top: clamp(-44px, -3.5vw, -28px);
box-shadow: 0 -16px 40px -8px rgba(15,26,38,0.16);
}
/* Increase z-index so each later section layers on top of the earlier one */
.home-stack > section:nth-of-type(2) { z-index: 1; }
.home-stack > section:nth-of-type(3) { z-index: 2; }
.home-stack > section:nth-of-type(4) { z-index: 3; }
.home-stack > section:nth-of-type(5) { z-index: 4; }
.home-stack > section:nth-of-type(6) { z-index: 5; }
.home-stack > section:nth-of-type(7) { z-index: 6; }
.home-stack > section:nth-of-type(8) { z-index: 7; }
.home-stack > section:nth-of-type(9) { z-index: 8; }
.home-stack > section:nth-of-type(10) { z-index: 9; }
/* Hero is the bottom of the deck - no border-radius on top edge, only bottom */
.home-stack > .hero3 { border-radius: 0 0 var(--r-lg) var(--r-lg); }
/* Smaller radius / smaller overlap on mobile */
@media (max-width: 760px) {
.home-stack > section + section { margin-top: clamp(-24px, -3vw, -14px); }
}
@media (prefers-reduced-motion: reduce) {
/* Same visual but no animated transitions during reveal */
.home-stack > section { transition: none; }
}
/* ===== TEAM SCROLL - OVERRIDE: switch to 2-col grid, no horizontal scroll = */
.team-scroll__track {
display: grid;
grid-template-columns: 1fr;
gap: clamp(32px, 4vw, 56px);
overflow: visible;
scroll-snap-type: none;
padding: 0;
}
@media (min-width: 900px) {
.team-scroll__track { grid-template-columns: 1fr 1fr; }
}
.team-scroll__track::-webkit-scrollbar { display: none; }
/* Each card fills its grid cell */
.team-card { width: 100%; }
/* Hide nav + scroll hint - no longer needed since all cards fit at once */
.team-scroll__nav { display: none; }
.team-scroll__hint { display: none; }
/* Tighten card layout for the narrower grid cell on desktop */
@media (min-width: 900px) {
.team-card__media { width: clamp(220px, 22vw, 280px); }
.team-card__name { font-size: clamp(2.2rem, 3.6vw, 3.4rem); }
.team-card__bio { max-width: 280px; }
.team-card__info { gap: clamp(20px, 2.5vw, 36px); }
.team-card__cta { width: 56px; height: 56px; }
.team-card__cta svg { width: 18px; height: 18px; }
}
/* ===== SITE-WIDE ROUNDED SWEEP - all images + media containers get a radius == */
/* Card containers */
.svc-card,
.bento__card,
.member,
.member--real,
.card,
.segment,
.compare-wrap,
.hero3 .frame,
.frame { border-radius: var(--r-lg); overflow: hidden; }
/* Media wrappers (the box around the image) */
.svc-card__media,
.bento__viz,
.bento__viz--img,
.bento__viz--ladder,
.bento__viz--doc,
.bento__viz--seal,
.bento__viz--humans,
.bento__viz--shield,
.bento__viz--compass,
.team-card__media,
.team-card__media--ph,
.member__img,
.member__frame,
.card__media,
.segment__media,
.frame__img,
.hero-photo__bg,
.hero3__bg,
.doc { border-radius: var(--r); overflow: hidden; }
/* The actual image elements */
.svc-card__media img,
.bento__viz img,
.team-card__media img,
.member__img img,
.member__frame img,
.card__media img,
.segment__media img,
.frame__img img,
.hero-photo__img,
.hero3__photo,
.humans__avatar img,
.compare__logo,
.brand__logo,
img.hero3__photo,
img.hero-photo__img { border-radius: var(--r); }
/* Avatars and circles stay circular */
.humans__avatar,
.hero3__avatar,
.hero3__avatar img,
.member__corner,
.team-card__cta { border-radius: 50%; }
/* Service tags + brand tags - pill shape rather than full square */
.svc-card__tag,
.bento__card .feature__num,
.compare__tag { border-radius: var(--r); }
/* Small UI items - nav buttons, marker chips */
.btn,
.btn--copper,
.btn--ink,
.btn--ghost,
.btn--lg,
.btn-split,
.btn-split__label,
.btn-split__icon,
.rail__btn,
.team-scroll__btn,
.hero3__chip,
.svc-card__tag,
.svc-card__cta { border-radius: var(--r); }
/* Form fields */
.form-field input,
.form-field select,
.form-field textarea,
.est-gate input { border-radius: var(--r); }
/* The full-bleed hero photo background - keep its rounding off because it
covers entire section and rounding would crop the wash. The PARENT section
already has rounded corners via the home-stack rule on index. */
.hero3__bg, .hero-photo__bg { border-radius: 0; }
.hero3__photo, .hero-photo__img { border-radius: 0; }
/* ===== STEP CARDS - image-led glassmorphism (how-it-works) =============== */
.step-scroll {
position: relative;
margin-top: clamp(2rem, 3vw, 3rem);
padding-block: clamp(16px, 2vw, 24px);
overflow-x: auto;
overflow-y: visible;
scrollbar-width: thin;
scrollbar-color: var(--copper) transparent;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--gutter);
}
.step-scroll::-webkit-scrollbar { height: 6px; }
.step-scroll::-webkit-scrollbar-track { background: transparent; }
.step-scroll::-webkit-scrollbar-thumb { background: var(--copper); border-radius: 3px; }
.step-scroll__track {
display: flex;
gap: clamp(20px, 2vw, 32px);
padding: 8px var(--gutter);
margin: 0;
list-style: none;
width: max-content;
}
/* Card - image-backed, tall, glassmorphism accents, full-visible */
.step-card {
position: relative;
flex: 0 0 auto;
width: clamp(320px, 30vw, 420px);
aspect-ratio: 5 / 7;
min-height: 500px;
border-radius: var(--r-lg);
overflow: hidden;
scroll-snap-align: start;
background: var(--ink);
box-shadow:
0 20px 40px -12px rgba(15,26,38,0.28),
0 6px 16px -6px rgba(15,26,38,0.16);
transition:
transform 500ms cubic-bezier(0.16,1,0.3,1),
box-shadow 500ms ease;
}
.step-card:hover {
transform: translateY(-6px);
box-shadow:
0 32px 60px -14px rgba(15,26,38,0.36),
0 12px 24px -8px rgba(15,26,38,0.20);
}
/* Background image */
.step-card__img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
transform: scale(1.02);
transition: transform 900ms cubic-bezier(0.16,1,0.3,1);
filter: saturate(0.98) brightness(0.94);
z-index: 0;
}
.step-card:hover .step-card__img { transform: scale(1.1); }
/* Dark scrim so text stays readable */
.step-card__scrim {
position: absolute; inset: 0;
z-index: 1;
background:
linear-gradient(180deg,
rgba(15,26,38,0.20) 0%,
rgba(15,26,38,0.15) 30%,
rgba(15,26,38,0.60) 62%,
rgba(15,26,38,0.90) 100%);
pointer-events: none;
}
/* Glassmorphism step number pill - top-left */
.step-card__num {
position: absolute;
top: 20px; left: 20px;
z-index: 3;
padding: 10px 16px;
font-family: var(--font-mono);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #fff;
background: rgba(255,255,255,0.14);
border: 1px solid rgba(255,255,255,0.28);
border-radius: var(--r);
backdrop-filter: blur(14px) saturate(1.2);
-webkit-backdrop-filter: blur(14px) saturate(1.2);
box-shadow: 0 4px 20px rgba(15,26,38,0.20);
}
/* Content at bottom */
.step-card__body {
position: absolute;
bottom: 0; left: 0; right: 0;
z-index: 3;
padding: clamp(24px, 3vw, 32px);
display: flex;
flex-direction: column;
gap: 12px;
color: #fff;
transform: translateY(0);
transition: transform 500ms cubic-bezier(0.16,1,0.3,1);
}
.step-card:hover .step-card__body { transform: translateY(-4px); }
.step-card__body h3 {
font-family: var(--font-display);
font-size: clamp(1.5rem, 2vw, 2rem);
font-weight: 700;
letter-spacing: -0.014em;
line-height: 1.1;
color: #fff;
margin: 0;
}
.step-card__body p {
font-family: var(--font-body);
font-size: 0.94rem;
line-height: 1.55;
color: rgba(255,255,255,0.86);
margin: 0;
}
/* Mobile: single column stack, shorter cards */
@media (max-width: 720px) {
.step-card {
width: min(88vw, 380px);
aspect-ratio: auto;
min-height: 460px;
}
}
@media (prefers-reduced-motion: reduce) {
.step-card,
.step-card__img,
.step-card__body { transition: none; }
.step-card:hover { transform: none; }
.step-card:hover .step-card__img { transform: scale(1.02); }
.step-card:hover .step-card__body { transform: none; }
}
/* ============ DIVISION OF WORK / WHAT YOU PROVIDE + WHAT WE HANDLE ============ */
.dow-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px;
max-width: 980px;
margin: 40px auto 0;
}
.dow-card {
position: relative;
background: var(--ink);
color: #fff;
border: 1px solid rgba(255,255,255,0.10);
border-radius: var(--r-lg);
padding: 48px 40px 44px;
text-align: center;
overflow: hidden;
box-shadow: 0 10px 30px rgba(15,26,38,0.14);
transition: transform 320ms cubic-bezier(0.22,1,0.36,1),
border-color 320ms cubic-bezier(0.22,1,0.36,1),
box-shadow 320ms cubic-bezier(0.22,1,0.36,1);
}
.dow-card::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 0%, rgba(160,122,75,0.16), transparent 55%);
pointer-events: none;
}
.dow-card:hover {
transform: translateY(-4px);
border-color: rgba(160,122,75,0.55);
box-shadow: 0 22px 46px rgba(15,26,38,0.22);
}
.dow-card__badge {
position: relative;
z-index: 1;
width: 64px;
height: 64px;
margin: 0 auto 22px;
display: grid;
place-items: center;
border-radius: 999px;
color: var(--copper);
background: rgba(160,122,75,0.10);
border: 1px solid rgba(160,122,75,0.38);
}
.dow-card h3 {
position: relative;
z-index: 1;
color: #fff;
font-size: 1.5rem;
margin: 0 0 12px;
letter-spacing: -0.014em;
}
.dow-card p {
position: relative;
z-index: 1;
color: rgba(255,255,255,0.78);
font-size: 0.98rem;
line-height: 1.6;
margin: 0 auto;
max-width: 42ch;
}
@media (max-width: 720px) {
.dow-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.dow-card {
padding: 36px 26px 32px;
}
}
@media (prefers-reduced-motion: reduce) {
.dow-card { transition: none; }
.dow-card:hover { transform: none; }
}
/* ============ CONTACT FORM: POLISHED PILL FIELDS ============ */
.form-grid--polished .form-field label {
display: flex;
align-items: baseline;
gap: 8px;
}
.field-optional {
font-family: var(--font-body);
font-size: 0.68rem;
font-weight: 500;
color: var(--copper-deep);
background: var(--copper-soft);
padding: 2px 8px;
border-radius: 999px;
letter-spacing: 0;
text-transform: none;
}
.field-pill {
position: relative;
display: flex;
align-items: center;
height: 52px;
padding: 0 20px 0 18px;
background: #fff;
border: 1.5px solid var(--line-2);
border-radius: 999px;
overflow: hidden;
transition: border-color 220ms ease, box-shadow 220ms ease;
}
.field-pill:hover {
border-color: rgba(160,122,75,0.45);
}
.field-pill:focus-within {
border-color: var(--copper);
box-shadow: 0 0 0 4px rgba(160,122,75,0.14);
}
.field-pill__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
margin-right: 12px;
color: var(--steel);
flex-shrink: 0;
}
.field-pill:focus-within .field-pill__icon {
color: var(--copper-deep);
}
.field-pill input,
.field-pill select {
flex: 1;
height: 100%;
padding: 0;
border: 0;
background: transparent;
color: var(--ink);
font-family: var(--font-body);
font-size: 1rem;
outline: none;
border-radius: 0;
min-width: 0;
}
.field-pill input::placeholder {
color: rgba(15,26,38,0.42);
}
.field-pill select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding-right: 22px;
cursor: pointer;
}
.field-pill__chev {
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
color: var(--steel);
pointer-events: none;
display: inline-flex;
}
.field-pill input[type="date"] {
color: var(--ink);
}
.field-pill input[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0.7;
cursor: pointer;
color: var(--copper-deep);
}
.field-box {
background: #fff;
border: 1.5px solid var(--line-2);
border-radius: 20px;
padding: 14px 18px;
transition: border-color 220ms ease, box-shadow 220ms ease;
}
.field-box:hover {
border-color: rgba(160,122,75,0.45);
}
.field-box:focus-within {
border-color: var(--copper);
box-shadow: 0 0 0 4px rgba(160,122,75,0.14);
}
.field-box textarea {
width: 100%;
border: 0;
outline: none;
resize: vertical;
background: transparent;
color: var(--ink);
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.55;
min-height: 96px;
padding: 0;
border-radius: 0;
}
.field-box textarea::placeholder {
color: rgba(15,26,38,0.42);
}
.btn--arrow {
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.btn--arrow svg {
transition: transform 260ms cubic-bezier(0.22,1,0.36,1);
}
.btn--arrow:hover svg {
transform: translateX(4px);
}
@media (max-width: 720px) {
.field-pill { height: 48px; padding: 0 18px 0 16px; }
.field-pill__icon { width: 20px; height: 20px; margin-right: 10px; }
.field-box { padding: 12px 16px; }
}
@media (prefers-reduced-motion: reduce) {
.field-pill, .field-box, .btn--arrow svg { transition: none; }
.btn--arrow:hover svg { transform: none; }
}
/* ============ CONTACT PAGE LAYOUT: PAPER CARD + FLOATING DARK ASIDE ============ */
.contact-grid {
gap: 32px;
background: transparent;
border: 0;
}
.form-card {
background: var(--paper-2);
border-radius: 32px;
padding: 56px 56px 48px;
box-shadow: 0 12px 32px rgba(15,26,38,0.06);
}
.form-aside {
background: var(--ink);
color: #fff;
border-radius: 32px;
padding: 44px 40px;
box-shadow: 0 20px 44px rgba(15,26,38,0.14);
position: sticky;
top: 100px;
}
.form-aside__kicker {
color: var(--copper);
margin: 0 0 20px;
}
.form-aside__rule {
border: 0;
height: 1px;
background: rgba(255,255,255,0.14);
margin: 0 0 28px;
}
.form-aside__specs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px 24px;
margin-bottom: 28px;
}
.form-aside__spec {
display: flex;
flex-direction: column;
gap: 4px;
}
.form-aside__spec--wide {
margin-bottom: 28px;
}
.form-aside__spec b {
font-family: var(--font-display);
font-weight: 700;
color: #fff;
font-size: 1.6rem;
letter-spacing: -0.014em;
line-height: 1.1;
}
.form-aside__spec span {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.62);
}
.form-aside__lede {
color: rgba(255,255,255,0.78);
line-height: 1.6;
margin: 0 0 32px;
font-size: 0.98rem;
}
.form-aside__vet {
display: inline-flex;
align-items: center;
gap: 8px;
color: #fff;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
margin: 0;
}
.form-aside__vet svg {
color: var(--copper);
}
@media (max-width: 900px) {
.contact-grid {
grid-template-columns: 1fr !important;
gap: 24px !important;
}
.form-aside {
position: static;
top: auto;
}
}
@media (max-width: 640px) {
.form-card {
padding: 32px 24px;
border-radius: 24px;
}
.form-aside {
padding: 32px 26px;
border-radius: 24px;
}
.form-aside__specs {
grid-template-columns: 1fr;
gap: 20px;
}
}