/* ============================================================
Le Webexy — design system
Meridian Green × Cabinet Grotesk × Bold 800 (§16.2 / §16.3, 16 Aug 2026)
Platform-agnostic: no framework, no build step, no CMS markup (§12.1)
============================================================ */
:root{
--anchor:var(--color-anchor,#06222A); --anchor-2:var(--color-anchor-deep,#0C2F39); --anchor-line:var(--color-anchor-line,#16414D);
--paper:#F7FAFA; --paper-2:#E9F1F2; --line:#D2E0E3;
--primary:var(--color-meridian-green,#15D16C); --primary-text:var(--color-green-text,#0B7A3F); --on-primary:var(--color-on-green,#04351F);
--accent:var(--color-gold,#D9A441); --accent-text:var(--color-gold-text,#75570F);
--ink:#06222A; --body:#3E5359; --dim:#5A6F76;
--on-anchor:#F2FAFB; --dim-anchor:#8FAEB5;
--display:var(--font-heading,"Cabinet Grotesk"),system-ui,-apple-system,sans-serif;
--mono:var(--font-body,"JetBrains Mono"),ui-monospace,monospace;
--dw:800;
--w:1160px;
/* ---- GOLDEN RATIO SYSTEM · φ = 1.618 -------------------------------
Type: base 16, stepped by √φ (1.272). Every SECOND step is exactly φ,
so body→h3→h2→h1 is a true golden progression.
Space: Fibonacci (5·8·13·21·34·55·89·144), which converges on φ.
Layout: column splits are 1.618:1, not eyeballed.
Measure: container ÷ φ = 717px for prose.
Honest note: colour VALUES are not φ-derived — they are AA-verified brand
values. φ governs colour *proportion* instead (see --ink-share below). ---- */
--phi:1.618034;
--phi-inv:.618034; /* 1/φ */
--phi-sq:2.618034; /* φ² */
/* ---- WIDTH LADDER ----------------------------------------------------
Each rung is the one above ÷ φ. The defining property of the ratio is
that any two adjacent rungs sum to the rung above them:
717 + 443 = 1160 443 + 274 = 717 274 + 169 = 443
That identity is why a `1.618fr 1fr` split of the canvas lands exactly
on 717 + 443 — the grid and the ladder are the same numbers, so a
primary column and a secondary column are never approximations. */
--w:1160px; /* canvas */
--w-1:717px; /* 1160 ÷ φ — primary / measure */
--w-2:443px; /* 717 ÷ φ — secondary column */
--w-3:274px; /* 443 ÷ φ — card / rail column */
--w-4:169px; /* 274 ÷ φ — tile */
--w-5:104px; /* 169 ÷ φ — chip */
/* ---- THE GOLDEN RECTANGLE -------------------------------------------
Every image frame on the site is φ:1. Not 16/10 (1.600) and not 16/9
(1.778) — the actual ratio. It is the one proportion a visitor sees on
every page, so it is the one that has to be exact. */
--rect:1.618034;
--fr:1.618034fr; /* the ratio as a grid track —
needed because `var(--fr)` does NOT concatenate: CSS parses it as
the function plus a separate `fr` ident and drops the declaration. */
/* ---- FIBONACCI PADDING PAIRS ----------------------------------------
Consecutive Fibonacci numbers converge on φ, so a padding pair taken
from adjacent terms IS a golden pair, provably:
13:21 = 1.615 21:34 = 1.619 34:55 = 1.618
Buttons, fields and panels all take their x:y from this table. */
--f-xs:9.89px; --f-sm:12.58px; --f-body:16px; --f-lede:20.35px;
--f-h3:25.89px; --f-h2s:32.93px; --f-h2:41.89px; --f-h1s:53.28px; --f-h1:67.77px;
--lh-body:1.618; /* φ */
--lh-lede:1.472; /* φ / √φ^0.5 */
--lh-head:1.272; /* √φ */
--lh-display:1.05; /* optical exception — φ ratios are unreadable at 68px */
--s5:5px; --s8:8px; --s13:13px; --s21:21px; --s34:34px;
--s55:55px; --s89:89px; --s144:144px;
--r-sm:8px; --r-md:13px; --r-lg:21px; --r-xl:34px; /* Fibonacci radii */
--measure:var(--w-1); /* prose sits on rung 1 */
/* Sand ground, promoted sitewide 17 Aug 2026 when directions A and D were
retired and B became the only design. Beige derived from the scheme's own
gold (#D9A441, H=39) taken to paper lightness — not an imported colour.
Verified on sand: ink 15.2:1, body 7.5:1, dim 4.9:1, primary-text 5.0:1,
accent-text 6.2:1. */
--sand:var(--color-sand,#F8F5EF); --sand-2:var(--color-sand-warm,#F0EBE3); --sand-line:var(--color-sand-line,#E1DACE);
--f-micro:12.58px; /* φ scale, one step below body */
--ease:cubic-bezier(.16,1,.3,1); /* exponential ease-out, used everywhere */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--sand);color:var(--ink);font-family:var(--display);
font-size:var(--f-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--s34)}
h1,h2,h3,h4,.n{font-weight:var(--dw);letter-spacing:-.03em;line-height:var(--lh-display);margin:0}
p{margin:0}
a{color:inherit}
img{max-width:100%}
.mono{font-family:var(--mono)}
.eyebrow{font-family:var(--mono);font-size:var(--f-xs);font-weight:500;letter-spacing:.16em;
text-transform:uppercase;color:var(--primary-text)}
.on-dark .eyebrow{color:var(--primary)}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;background:var(--primary);color:var(--on-primary);
padding:12px 18px;z-index:200;font-weight:700}
.skip:focus{left:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* buttons — hairline REQUIRED: #15D16C on paper is 1.93:1 (WCAG 1.4.11) */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;
font-size:var(--f-body);text-decoration:none;padding:var(--s13) var(--s21);
border-radius:var(--r-sm);min-height:44px;
background:var(--primary);color:var(--on-primary);border:1px solid var(--primary-text);
transition:transform .15s ease,background .15s ease}
.btn:hover{background:#2ee07f;transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--sand-line)}
.btn.ghost:hover{background:#fff;transform:none}
.on-dark .btn.ghost{color:var(--on-anchor);border-color:var(--anchor-line)}
.on-dark .btn.ghost:hover{background:var(--anchor-2)}
/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:100;--f-body:16px;background:rgba(6,34,42,.95);
backdrop-filter:blur(12px);border-bottom:1px solid var(--anchor-line)}
/* 89 = 55 x φ, so the header stands in φ relation to the hero's 55px lead-in. */
header.site > .wrap{display:flex;align-items:center;gap:var(--s34);height:var(--s89)}
.logo{font-weight:800;font-size:var(--f-lede);letter-spacing:-.04em;color:var(--on-anchor);
text-decoration:none;margin-right:auto;min-height:44px;display:inline-flex;align-items:center}
.logo span{color:var(--primary)}
.nav{display:flex;gap:var(--s34)}
.nav a{color:var(--dim-anchor);text-decoration:none;font-size:var(--f-body);font-weight:500;
min-height:44px;display:inline-flex;align-items:center}
.nav a:hover,.nav a[aria-current]{color:var(--on-anchor)}
.hdr-cta{font-size:var(--f-sm);padding:var(--s8) var(--s13)}
/* ---------- bands ---------- */
.band,section.s{padding:var(--s89) 0;background:var(--sand);color:var(--ink);
border-bottom:1px solid var(--sand-line)}
/* .alt is the white relief band; .ink is the dark one. Two grounds against
sand is the whole rhythm — a third would only dilute it. */
.band.alt,section.s.light{background:#fff}
.band.on-dark,section.s.ink{background:var(--anchor);color:var(--on-anchor);border-bottom:none}
.band.on-dark .lede,section.s.ink .lead{color:var(--dim-anchor)}
.band.tight{padding:var(--s55) 0}
/* B's heading scale, promoted sitewide: an inner page carries the same voice
as the homepage, not a quieter version of it. */
h2,h2.big{font-size:clamp(var(--f-h2s),4.6vw,var(--f-h1s));line-height:1.04;
letter-spacing:-.042em;max-width:17ch;margin-top:var(--s13);text-wrap:balance}
.lead{color:var(--body);font-size:var(--f-lede);line-height:var(--lh-lede);
max-width:52ch;margin-top:var(--s21)}
.lede{color:var(--body);font-size:var(--f-lede);line-height:var(--lh-lede);
max-width:56ch;margin-top:var(--s21)}
.head{margin-bottom:var(--s55)}
.head.mid{text-align:center;max-width:720px;margin-left:auto;margin-right:auto}
.head.mid h2,.head.mid .lede{margin-left:auto;margin-right:auto}
/* ---------- page hero (inner pages) ---------- */
/* Inner-page hero on the sand ground, carrying B's gold bloom and B's type
scale. The dark slab it replaced made every inner page read as a different
site from the homepage. */
/* Hero frames are golden rectangles of the canvas, and the two hero sizes are
themselves a rung apart: the homepage stands at 1160 x 717 (w : w/φ) and an
inner page at 1160 x 443 (w : w/φ²). So the page you land on and the page you
click into are the same shape, one step down. */
/* No min-height. A 443px floor on a single-column text hero produced a large
empty right-hand field with nothing in it — the ratio was satisfied and the
composition was worse. The hero is sized by its content again; φ still governs
the type scale inside it and the 61.8% measure the headline stops at. */
.phero{position:relative;overflow:hidden;background:var(--sand);color:var(--ink);
padding:var(--s55) 0 var(--s89);border-bottom:1px solid var(--sand-line)}
/* the bloom starts at the φ point of the canvas — 61.8% across */
.phero::before{content:"";position:absolute;inset:-40% -10% auto 61.8%;
height:calc(var(--w-1) * var(--phi));
background:radial-gradient(closest-side,rgba(217,164,65,.20),transparent 70%);pointer-events:none}
.phero .wrap{position:relative}
.phero h1{font-size:clamp(var(--f-h2),5.6vw,var(--f-h1));line-height:1.0;letter-spacing:-.045em;
max-width:16ch;margin-top:var(--s21);text-wrap:balance;font-weight:800}
.phero h1 .hl{color:var(--primary-text)}
.phero .lede{color:var(--body);font-size:var(--f-lede);margin-top:var(--s21);max-width:50ch}
.phero .btnrow{display:flex;gap:var(--s13);flex-wrap:wrap;margin-top:var(--s34)}
/* align-items:center is load-bearing. The links are inline-flex with a 24px
min-height (the WCAG 2.2 target floor) while the "/" separators are plain
spans; under the default `normal` the spans stretch to 24px and render their
text at the TOP of that box while the links centre theirs — a 4px stagger
across the whole trail. */
.crumb{font-family:var(--mono);font-size:var(--f-xs);letter-spacing:.1em;text-transform:uppercase;
color:var(--dim);display:flex;align-items:center;gap:var(--s8);flex-wrap:wrap;
margin-bottom:var(--s21)}
.crumb + .eyebrow{display:block;margin-bottom:4px}
/* 24px floor: WCAG 2.5.8 (AA). These measured 31x18 with min-height:auto,
which was set to stop breadcrumbs inheriting the 44px nav rule. 24 satisfies
AA without making a breadcrumb look like a button. */
.crumb a{color:var(--dim);text-decoration:none;min-height:24px;
display:inline-flex;align-items:center}
.crumb a:hover{color:var(--primary-text)}
.on-dark .crumb,.on-dark .crumb a{color:var(--dim-anchor)}
/* home hero */
.hero{background:var(--anchor);color:var(--on-anchor);padding:var(--s89) 0 0}
.hero h1{font-size:clamp(var(--f-h1s),5.5vw,var(--f-h1));max-width:17ch;margin-top:var(--s21);text-wrap:balance}
.hero h1 .hl{color:var(--primary)}
.hero .lede{color:var(--dim-anchor);font-size:var(--f-lede);margin-top:24px;max-width:52ch}
.hero .btnrow{display:flex;gap:var(--s13);flex-wrap:wrap;margin-top:34px}
.beliefs{display:flex;gap:var(--s34);flex-wrap:wrap;margin-top:46px;padding-top:26px;
border-top:1px solid var(--anchor-line)}
.beliefs span{font-family:var(--mono);font-size:var(--f-sm);color:var(--dim-anchor)}
.beliefs b{color:var(--primary);font-weight:500}
/* ---------- credential strip ---------- */
.creds{background:var(--anchor);padding:var(--s13) 0}
.creds .wrap{display:flex;gap:var(--s13) 30px;flex-wrap:wrap;align-items:center}
.creds a,.creds span{font-family:var(--mono);font-size:var(--f-sm);color:var(--dim-anchor);
text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.creds a{min-height:44px}
.creds a:hover{color:var(--on-anchor)}
.creds a::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--primary)}
.creds .verify{color:var(--primary);font-size:var(--f-xs);letter-spacing:.1em;text-transform:uppercase}
/* ---------- canonical trio (§7.1 — homepage only) ---------- */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s34);margin-bottom:46px;
padding-bottom:40px;border-bottom:1px solid var(--line)}
.trio .n{display:block;font-size:clamp(var(--f-h3),2.9vw,var(--f-h2s));font-weight:var(--dw);
letter-spacing:-.035em;line-height:1.08;color:var(--ink)}
.trio .n em{font-style:normal;color:var(--primary-text)}
.trio p{color:var(--body);font-size:var(--f-body);margin-top:11px;max-width:34ch}
/* ---------- logo wall ---------- */
.wall{list-style:none;padding:0;margin:0;display:grid;
grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:var(--s13)}
.wall li{border:1px solid var(--sand-line);background:#fff;border-radius:var(--r-sm);height:89px;
display:grid;place-items:center;padding:16px 20px;transition:border-color .15s ease}
.wall li:hover{border-color:var(--primary-text)}
/* explicit box: width/height:auto = 0x0 until decode, so lazy never fires */
.wall img{width:100%;height:56px;object-fit:contain;
filter:grayscale(1);opacity:.72;transition:filter .2s ease,opacity .2s ease}
.wall li:hover img{filter:grayscale(0);opacity:1}
.wall li.txt{border-style:dashed}
.wall li.txt span{font-size:var(--f-body);font-weight:700;letter-spacing:-.02em;color:var(--dim);text-align:center}
/* ---------- generic cards ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s21)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s21)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s21)}
/* De-carded, matching B's .v2-split: a rule above the statement, not a box
around it. Boxes on every section were the template tell. */
.card{border:none;border-top:2px solid var(--primary-text);border-radius:0;
padding:var(--s21) 0 0;background:none}
.card:nth-child(even){border-top-color:var(--accent)}
.on-dark .card{border-top-color:var(--primary)}
.card h3{font-size:var(--f-h3);letter-spacing:-.03em;line-height:1.15;margin-bottom:var(--s13)}
.card p{color:var(--body);font-size:var(--f-body);line-height:var(--lh-body)}
.on-dark .card p{color:var(--dim-anchor)}
.card .tag{font-family:var(--mono);font-size:var(--f-xs);letter-spacing:.13em;text-transform:uppercase;
color:var(--accent-text);display:block;margin-bottom:13px}
/* ---------- service cards ---------- */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s21)}
.svc article{border:none;border-top:1px solid var(--sand-line);border-radius:0;padding:var(--s21) 0 0;
background:var(--paper);display:flex;flex-direction:column}
.svc .idx{font-family:var(--mono);font-size:var(--f-xs);letter-spacing:.14em;color:var(--primary-text)}
.svc h3{font-size:var(--f-h3);letter-spacing:-.03em;margin:var(--s13) 0 var(--s8)}
.svc p{color:var(--body);font-size:var(--f-body);margin-bottom:var(--s21);line-height:1.5}
.svc ul{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-direction:column;gap:9px}
.svc li{font-size:var(--f-body);color:var(--body);padding-left:18px;position:relative}
.svc li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:1.5px;background:var(--primary)}
.more{margin-top:auto;font-family:var(--mono);font-size:var(--f-sm);letter-spacing:.06em;
color:var(--primary-text);text-decoration:none;font-weight:500;min-height:44px;
display:inline-flex;align-items:center}
.more:hover{text-decoration:underline;text-underline-offset:4px}
/* ---------- deliverables list ---------- */
.deliv{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s13) 40px;list-style:none;padding:0;margin:0}
.deliv li{padding:var(--s13) 0 var(--s13) 22px;border-bottom:1px solid var(--sand-line);
position:relative;font-size:var(--f-body)}
.deliv li::before{content:"";position:absolute;left:0;top:24px;width:10px;height:2px;background:var(--primary)}
.deliv li b{display:block;font-weight:800;letter-spacing:-.02em;margin-bottom:3px}
.deliv li span{color:var(--body);font-size:var(--f-micro)}
/* ---------- process steps ---------- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.step{border-top:1px solid var(--anchor-line);padding-top:20px}
.step:first-child{border-top-color:var(--primary)}
.band:not(.on-dark) .step{border-top-color:var(--line)}
.band:not(.on-dark) .step:first-child{border-top-color:var(--primary)}
.step .k{font-family:var(--mono);font-size:var(--f-xs);letter-spacing:.14em;color:var(--primary);
display:block;margin-bottom:10px}
.band:not(.on-dark) .step .k{color:var(--primary-text)}
.step h3{font-size:var(--f-body);margin-bottom:8px}
.step p{font-size:var(--f-sm);color:var(--dim-anchor)}
.band:not(.on-dark) .step p{color:var(--body)}
/* ---------- proof numbers ---------- */
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s21)}
.pf{border-top:2px solid var(--primary);padding-top:22px}
.pf .n{font-size:clamp(var(--f-h2s),4.2vw,var(--f-h1s));font-weight:var(--dw);letter-spacing:-.035em;
color:var(--on-anchor);font-variant-numeric:tabular-nums;line-height:1.04}
.band:not(.on-dark) .pf .n{color:var(--ink)}
.pf .n em{font-style:normal;color:var(--accent)}
.band:not(.on-dark) .pf .n em{color:var(--accent-text)}
.pf .who{font-family:var(--mono);font-size:var(--f-xs);letter-spacing:.12em;text-transform:uppercase;
color:var(--primary);display:block;margin-bottom:12px}
.band:not(.on-dark) .pf .who{color:var(--primary-text)}
.pf p{color:var(--dim-anchor);font-size:var(--f-body);margin-top:11px}
.band:not(.on-dark) .pf p{color:var(--body)}
/* ---------- case studies ---------- */
.case{text-decoration:none;display:flex;flex-direction:column}
.frame{margin:0;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--sand-line);
background:var(--anchor-2);box-shadow:0 18px 40px -24px rgba(6,34,42,.5)}
.frame .bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;
background:var(--anchor-2);border-bottom:1px solid var(--anchor-line)}
.frame .bar i{width:8px;height:8px;border-radius:50%;background:#31505c;display:block}
.frame .bar em{font-family:var(--mono);font-style:normal;font-size:var(--f-xs);color:var(--dim-anchor);
margin-left:10px;letter-spacing:.03em}
.frame img{display:block;width:100%;height:auto;background:#fff}
.case:hover .frame{border-color:var(--primary-text)}
.case.feature{display:grid;grid-template-columns:1.618fr 1fr;gap:40px;align-items:center;
margin-bottom:56px;padding-bottom:56px;border-bottom:1px solid var(--line)}
.case.feature .frame img{height:auto;aspect-ratio:var(--rect);object-fit:cover;object-position:top center}
.case.feature h3{font-size:clamp(var(--f-h3),3vw,var(--f-h2s));margin:10px 0 12px}
.case.feature p{font-size:var(--f-body)}
.case.feature .out{font-size:var(--f-body);margin-top:20px}
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s34)}
.cases .frame img{height:auto;aspect-ratio:var(--rect);object-fit:cover;object-position:top center}
.case .body{padding:18px 2px 0;display:flex;flex-direction:column;flex:1}
.case .cat{font-family:var(--mono);font-size:var(--f-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.case h3{font-size:var(--f-h3);letter-spacing:-.03em;margin:var(--s8) 0}
.case:hover h3{color:var(--primary-text)}
.case p{color:var(--body);font-size:var(--f-body);margin-bottom:var(--s13);line-height:1.5}
.case .out{margin-top:auto;font-size:var(--f-body);font-weight:800;letter-spacing:-.025em;
color:var(--primary-text);font-variant-numeric:tabular-nums}
/* ---------- events feature ---------- */
.fourth{margin-top:var(--s21);border:none;border-top:2px solid var(--accent);border-radius:0;padding:var(--s21) 0 0;
display:grid;grid-template-columns:1fr var(--fr);gap:var(--s34);align-items:start;background:var(--paper)}
.fourth h3{font-size:var(--f-h3);letter-spacing:-.03em}
.fourth p{color:var(--body);font-size:var(--f-body);max-width:52ch;margin-top:var(--s8);line-height:1.5}
.ev-feature{position:relative;display:block;border-radius:var(--r-md);overflow:hidden;text-decoration:none;
border:1px solid var(--line);min-height:var(--w-3)}
.ev-feature img{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:cover}
.ev-cap{position:relative;z-index:1;padding:22px 24px 24px;margin-top:150px;background:rgba(5,28,35,.94)}
.ev-cap::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:64px;
background:linear-gradient(transparent,rgba(5,28,35,.94))}
.ev-cap .k{font-family:var(--mono);font-size:var(--f-xs);letter-spacing:.12em;text-transform:uppercase;
color:var(--primary);display:block;margin-bottom:9px}
.ev-cap h4{font-size:var(--f-lede);color:#fff;margin-bottom:8px}
.ev-cap p{font-size:var(--f-sm);color:#c2d6d3}
/* ---------- testimonials ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s21)}
.q{border:none;border-radius:0;padding:0;background:none;
display:flex;flex-direction:column}
/* Matches B's .v2-quotes: the words carry it, the rule underneath attributes it. */
.q blockquote{margin:0 0 var(--s21);font-size:var(--f-lede);color:var(--ink);line-height:1.472;
letter-spacing:-.02em;font-weight:500}
.on-dark .q blockquote{color:var(--on-anchor)}
.q .by{margin-top:auto;padding-top:var(--s13);border-top:1px solid var(--sand-line)}
.q .by b{display:block;font-size:var(--f-body);font-weight:800;letter-spacing:-.02em}
.q .by span{font-size:var(--f-micro);color:var(--dim)}
.on-dark .q .by{border-top-color:var(--anchor-line)}
.on-dark .q .by span{color:var(--dim-anchor)}
.vids{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s21);margin-top:20px}
.vid{border:1px solid var(--line);border-radius:var(--r-md);aspect-ratio:var(--rect);background:var(--anchor);
display:grid;place-items:center;text-decoration:none}
.vid div{display:grid;justify-items:center}
.vid span{font-family:var(--mono);font-size:var(--f-xs);color:var(--dim-anchor);letter-spacing:.08em}
.vid .play{width:46px;height:46px;border-radius:50%;background:var(--primary);display:grid;
place-items:center;color:var(--on-primary);font-size:var(--f-body);margin-bottom:10px}
/* ---------- industries ---------- */
.ind{border:none;border-top:1px solid var(--sand-line);border-radius:0;padding:var(--s21) 0 0;background:none;
text-decoration:none;display:block}
.ind:hover{border-top-color:var(--primary-text)}
.ind h3{font-size:var(--f-h3);letter-spacing:-.03em;margin-bottom:var(--s8)}
.ind:hover h3{color:var(--primary-text)}
.ind p{color:var(--body);font-size:var(--f-body);line-height:1.5}
.ind .who2{font-family:var(--mono);font-size:var(--f-micro);color:var(--dim);display:block;margin-top:var(--s13)}
/* ---------- FAQ ---------- */
.faq{max-width:840px}
.faq details{border-bottom:1px solid var(--sand-line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 44px 20px 0;font-size:var(--f-body);
font-weight:800;letter-spacing:-.02em;position:relative;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:16px;font-size:var(--f-h3);
font-weight:500;color:var(--primary-text);line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq p{color:var(--body);font-size:var(--f-body);margin:0 0 var(--s21);max-width:70ch;line-height:var(--lh-body)}
/* ---------- showcase grid ---------- */
.showcase{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s21)}
.sc{text-decoration:none;display:block}
.sc .frame img{height:auto;aspect-ratio:var(--rect);object-fit:cover;object-position:top center}
.sc h3{font-size:var(--f-body);margin:var(--s13) 0 4px}
.sc span{font-family:var(--mono);font-size:var(--f-xs);color:var(--dim)}
.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:36px}
.filters button{font-family:var(--display);font-size:var(--f-sm);font-weight:700;cursor:pointer;
border:1.5px solid var(--line);background:var(--paper);color:var(--body);
padding:10px 16px;border-radius:var(--r-sm);min-height:44px}
.filters button:hover{border-color:var(--primary-text);color:var(--ink)}
.filters button{background:#fff;border-color:var(--sand-line)}
.filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:1fr 1.618fr;gap:var(--s55);align-items:start}
.form{background:#fff;border:1px solid var(--sand-line);border-radius:var(--r-lg);padding:var(--s34);
box-shadow:0 34px 70px -34px rgba(6,34,42,.35)}
.field{margin-bottom:13px}
.field label{display:block;font-size:var(--f-sm);font-weight:700;margin-bottom:6px;color:var(--body)}
.field input,.field textarea,.field select{width:100%;font-family:var(--display);font-size:var(--f-body);
padding:13px 14px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--paper);
color:var(--ink);min-height:48px}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--primary);background:#fff;outline:none}
.reassure{font-size:var(--f-sm);color:var(--dim);margin-top:12px;text-align:center}
.routes{display:grid;gap:var(--s13)}
.route{border:none;border-top:1px solid var(--sand-line);border-radius:0;padding:var(--s21) 0 0;background:none}
.on-dark .route{border-top-color:var(--anchor-line);background:none}
.route .k{font-family:var(--mono);font-size:var(--f-xs);letter-spacing:.13em;text-transform:uppercase;
color:var(--primary-text);display:block;margin-bottom:10px}
.on-dark .route .k{color:var(--primary)}
.route h3{font-size:var(--f-h3);letter-spacing:-.03em;margin-bottom:var(--s8)}
.route p{color:var(--body);font-size:var(--f-body);margin-bottom:var(--s13);line-height:1.5}
.on-dark .route p{color:var(--dim-anchor)}
.route .go{font-family:var(--mono);font-size:var(--f-sm);color:var(--primary-text);text-decoration:none;
font-weight:500;display:inline-flex;align-items:center;min-height:44px}
.on-dark .route .go{color:var(--primary)}
.route .go:hover{text-decoration:underline;text-underline-offset:4px}
/* ---------- final CTA ---------- */
.final{background:var(--anchor);color:var(--on-anchor);padding:var(--s89) 0}
.final .wrap{max-width:840px;text-align:center}
.final h2{margin:16px auto 0;max-width:17ch}
.final .lede{color:var(--dim-anchor);margin:22px auto 0}
.final .routes{grid-template-columns:repeat(3,1fr);margin-top:38px;text-align:left}
/* --dim-anchor is a light grey for dark grounds. .fine now appears on sand
too (thank-you, 404), where it measured 2.17:1 — so the base colour is the
light-ground one and dark grounds restate it. */
.fine{font-family:var(--mono);font-size:var(--f-sm);color:var(--dim);margin-top:var(--s34)}
.on-dark .fine,.final .fine{color:var(--dim-anchor)}
.fine a{color:inherit}
.fine a:hover{color:var(--primary-text)}
.on-dark .fine a:hover,.final .fine a:hover{color:var(--primary)}
.fine a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
/* ---------- prose (legal, insights) ---------- */
.prose{max-width:var(--measure)}
.prose h2{font-size:var(--f-h2s);margin-top:var(--s55);max-width:none}
.prose h3{font-size:var(--f-h3);margin-top:var(--s34)}
.prose p,.prose li{color:var(--body);font-size:var(--f-lede);line-height:var(--lh-lede);margin-top:var(--s21)}
.prose ul{padding-left:20px}
/* ---------- footer — direction B, selected 23 Aug 2026 ----------
Three faults in the old one, all measurable:
1. 40 / 52 / 14 / 12 / 22px — the only spacing on the site that was not
Fibonacci.
2. every link a 44px flex row, so Company alone stood 264px tall.
3. contact split in two, with the phone numbers stranded in the legal strip.
Link rows are 34px here and go back to 44px under 700px, where the pointer is
a thumb. 34 still clears the 24px floor of WCAG 2.2 (2.5.8), and these are
inline text links in a list. */
footer.site{background:var(--anchor);color:var(--dim-anchor);
padding:var(--s55) 0 var(--s34);
border-top:1px solid var(--anchor-line);font-size:var(--f-sm)}
footer.site .cols{display:grid;grid-template-columns:var(--fr) 1fr 1fr 1fr;gap:var(--s34)}
footer.site h4{font-family:var(--mono);font-size:var(--f-xs);letter-spacing:.14em;text-transform:uppercase;
color:var(--on-anchor);margin-bottom:var(--s8);font-weight:500}
footer.site a{color:var(--dim-anchor);text-decoration:none;display:flex;align-items:center;
min-height:34px;font-size:var(--f-body)}
footer.site a:hover{color:var(--on-anchor)}
/* brand column — the 1.618 major term */
.f-brand{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s21)}
.f-mark{font-size:var(--f-h3);letter-spacing:-.035em;margin-right:0;min-height:auto}
.f-line{margin:0;font-size:var(--f-body);line-height:var(--lh-body);max-width:38ch;color:var(--dim-anchor)}
/* the page above already closes with a CTA, so this is one button in a column,
not a second full-width ask */
/* `footer.site a` scores (0,1,2) and beats a bare .f-cta or .btn at (0,1,0),
so the button text rendered in --dim-anchor on green: measured 1.17:1.
Every footer link that is not a plain list link has to out-specify it. */
footer.site a.f-cta{color:var(--on-primary);min-height:44px;font-size:var(--f-body)}
footer.site a.f-cta:hover{color:var(--on-primary)}
.f-block{display:flex;flex-direction:column;gap:var(--s5)}
/* #5F8791 measured 4.22:1 on the anchor — under the floor, on all 36 pages.
These labels are already distinguished by face, size, tracking and case, so
they do not need to be distinguished by being dimmer as well. */
.f-k{font-family:var(--mono);font-size:var(--f-xs);letter-spacing:.14em;
text-transform:uppercase;color:var(--dim-anchor)}
.f-v{font-size:var(--f-body);color:var(--on-anchor);line-height:1.5}
footer.site a.f-v{color:var(--on-anchor)}
footer.site a.f-mail{min-height:26px}
.f-tel{display:flex;flex-wrap:wrap;gap:0 var(--s21);font-family:var(--mono);font-size:var(--f-sm)}
.f-tel a{min-height:26px}
.f-creds{display:flex;flex-wrap:wrap;gap:var(--s8) var(--s21);
padding-top:var(--s13);border-top:1px solid var(--anchor-line);width:100%}
.f-creds span{display:inline-flex;align-items:center;gap:var(--s8);
font-family:var(--mono);font-size:var(--f-sm);color:var(--primary)}
/* Company held seven links in one 44px column — 264px of tower */
.f-two{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s13)}
.legal{margin-top:var(--s34);padding-top:var(--s21);border-top:1px solid var(--anchor-line);
font-family:var(--mono);font-size:var(--f-sm);display:flex;gap:var(--s13) var(--s34);
flex-wrap:wrap;align-items:center}
.legal a{min-height:34px;display:inline-flex;align-items:center;font-size:var(--f-sm)}
footer.site .legal a.f-showcase{margin-left:auto;color:var(--primary);gap:var(--s8)}
footer.site .legal a.f-showcase:hover{color:var(--on-anchor)}
@media(max-width:700px){
footer.site a,.legal a{min-height:44px}
.f-two{grid-template-columns:1fr}
.f-showcase{margin-left:0}
}
@media(max-width:1000px){
.grid2,.grid3,.grid4,.svc,.cases,.quotes,.vids,.proof,.showcase,.deliv,
.contact,.final .routes{grid-template-columns:1fr}
.grid4,.steps{grid-template-columns:1fr 1fr}
.case.feature,.fourth{grid-template-columns:1fr;gap:var(--s34)}
.trio{grid-template-columns:1fr 1fr}
footer.site .cols{grid-template-columns:1fr 1fr}
.nav{display:none}
}
@media(max-width:560px){
.steps,.grid4,.trio,footer.site .cols{grid-template-columns:1fr}
.wrap{padding:0 20px}
.band{padding:60px 0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}
/* ---------- sitewide CTA with form ---------- */
.final .wrap{max-width:var(--w);text-align:left}
.final h2{margin:16px 0 0;max-width:16ch}
.final .lede{margin:20px 0 0}
.cta-split{display:grid;grid-template-columns:1.618fr 1fr;gap:var(--s55);align-items:start}
.final .routes{grid-template-columns:1fr 1fr;gap:var(--s13)}
.cta-form{background:#fff;border:1px solid var(--sand-line);border-radius:var(--r-lg);padding:var(--s34);
box-shadow:0 34px 70px -34px rgba(0,0,0,.5)}
.cta-form h3{font-size:var(--f-h3);letter-spacing:-.03em;margin-bottom:var(--s8);color:var(--ink)}
.cta-form .sub{font-size:var(--f-body);color:var(--body);margin-bottom:var(--s21);line-height:1.5}
.cta-form .btn{width:100%;justify-content:center;margin-top:4px}
@media(max-width:1000px){
.cta-split{grid-template-columns:1fr;gap:34px}
.final .routes{grid-template-columns:1fr}
}
/* ============================================================
ROUND 4 — craft floor + nav dropdowns
============================================================ */
/* ---- browser surfaces: the parts we did not draw still carry the design ---- */
::selection{background:var(--primary);color:var(--on-primary)}
::-moz-selection{background:var(--primary);color:var(--on-primary)}
input,textarea,select{caret-color:var(--primary-text)}
html{scrollbar-color:var(--line) var(--sand);scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--sand-2)}
::-webkit-scrollbar-thumb{background:var(--sand-line);border-radius:99px;border:3px solid var(--sand-2)}
::-webkit-scrollbar-thumb:hover{background:var(--primary-text)}
a{text-underline-offset:.22em;text-decoration-thickness:.08em}
.tabular{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:2px}
/* ---- icon system: drawn, one stroke weight, never a glyph ---- */
.ico{width:1em;height:1em;flex:none;stroke:currentColor;fill:none;
stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.11em}
.ico-lg{width:1.28em;height:1.28em}
/* ---- one authored motion moment: the hero states its case, once ---- */
@media (prefers-reduced-motion:no-preference){
@keyframes riseIn{
from{opacity:0;transform:translate3d(0,var(--rise,22px),0);filter:blur(7px)}
to {opacity:1;transform:none;filter:blur(0)}
}
.hero h1,.hero .lede,.hero .btnrow,.hero .beliefs,.phero h1,.phero .lede,.phero .btnrow{
animation:riseIn .82s cubic-bezier(.16,1,.3,1) both; /* exponential ease-out */
}
.hero .lede,.phero .lede{animation-delay:.09s}
.hero .btnrow,.phero .btnrow{animation-delay:.16s}
.hero .beliefs{animation-delay:.23s;--rise:14px}
}
/* ---- nav dropdowns ---- */
.nav{gap:var(--s5)}
.nav > li{list-style:none} /* NOT position:relative — .mega spans the header */
.nav ul{list-style:none;margin:0;padding:0}
.nav .top{display:inline-flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;
font-family:var(--display);font-size:var(--f-body);font-weight:500;color:var(--dim-anchor);
min-height:44px;padding:0 11px;border-radius:var(--r-sm);text-decoration:none}
.nav .top:hover,.nav li[data-open="true"] .top,.nav .top[aria-current]{color:var(--on-anchor);background:rgba(255,255,255,.05)}
.nav .top .ico{transition:transform .22s cubic-bezier(.16,1,.3,1)}
.nav li[data-open="true"] .top .ico{transform:rotate(180deg)}
/* full-bleed panel: anchored to the header, spans the viewport.
A floating 640px card hung off a right-hand item pushed the page wider;
an edge-to-edge panel cannot. */
.mega{position:absolute;top:100%;left:0;right:0;z-index:120;
background:var(--anchor-2);border-top:1px solid var(--anchor-line);
border-bottom:1px solid var(--anchor-line);
box-shadow:0 34px 70px -30px rgba(0,0,0,.75);
opacity:0;visibility:hidden;transform:translateY(-8px);
transition:opacity .22s ease,transform .3s cubic-bezier(.16,1,.3,1),visibility .22s}
.nav li[data-open="true"] .mega{opacity:1;visibility:visible;transform:none}
.mega-in{display:grid;grid-template-columns:1fr 1.618fr;gap:var(--s55);
padding-top:var(--s34);padding-bottom:var(--s34)}
.mega-lede p{color:var(--dim-anchor);font-size:var(--f-body);max-width:30ch;line-height:1.5}
.mega-lede a{display:inline-flex;align-items:center;gap:var(--s8);margin-top:var(--s21);
color:var(--primary);font-size:var(--f-sm);font-weight:700;text-decoration:none;min-height:44px}
.mega-lede a:hover{text-decoration:underline;text-underline-offset:4px}
.mega .cols2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s5) var(--s21)}
.mega a.item{display:grid;grid-template-columns:auto 1fr;gap:var(--s13);align-items:start;
padding:var(--s13);border-radius:var(--r-sm);text-decoration:none;min-height:auto;
border:1px solid transparent}
.mega a.item:hover{background:rgba(255,255,255,.05);border-color:var(--anchor-line)}
.mega a.item .ico{color:var(--primary);margin-top:3px}
.mega a.item b{display:block;color:var(--on-anchor);font-size:var(--f-body);font-weight:800;letter-spacing:-.02em}
.mega a.item span{display:block;color:var(--dim-anchor);font-size:var(--f-sm);line-height:1.45;margin-top:3px}
@media(max-width:1000px){.nav{display:none}}
.rot90{transform:rotate(90deg)}
.rot270{transform:rotate(-90deg)}
.more .ico,.go .ico,.btn .ico{transition:transform .22s cubic-bezier(.16,1,.3,1)}
.more:hover .ico,.go:hover .ico,.btn:hover .ico{transform:translateX(3px)}
/* ---- hero: evidence in the frame, not type on flat colour ---- */
.hero{padding:var(--s89) 0 var(--s55);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.618fr 1fr;gap:var(--s55);align-items:center}
.hero-copy h1{margin-top:0}
.beliefs{display:flex;gap:var(--s21);flex-wrap:wrap;margin-top:var(--s34);
padding-top:var(--s21);border-top:1px solid var(--anchor-line)}
.beliefs span{font-size:var(--f-sm);color:var(--dim-anchor);display:inline-flex;align-items:center;gap:8px}
.beliefs span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--primary);flex:none}
.hero-proof{position:relative;min-height:var(--w-3)}
.hero-proof .frame{position:absolute;width:100%;box-shadow:0 26px 60px -22px rgba(0,0,0,.72)}
.hero-proof .frame img{height:auto;aspect-ratio:var(--rect);object-fit:cover;object-position:top center}
.hp-back{top:0;right:-8%;transform:rotate(2.6deg) scale(.9);opacity:.62;filter:saturate(.7)}
.hp-front{top:58px;left:-14%;transform:rotate(-1.6deg)}
.hp-chip{position:absolute;right:-4%;bottom:-14px;z-index:3;background:var(--primary);
color:var(--on-primary);border-radius:var(--r-md);padding:var(--s13) var(--s21);
box-shadow:0 16px 34px -12px rgba(0,0,0,.6);display:grid;gap:2px}
.hp-chip .v{font-size:var(--f-h3);font-weight:800;letter-spacing:-.04em;line-height:1}
.hp-chip .l{font-size:var(--f-sm);font-weight:600;line-height:1.35;opacity:.82}
@media (prefers-reduced-motion:no-preference){
.hero-proof .frame,.hp-chip{animation:riseIn .95s cubic-bezier(.16,1,.3,1) both}
.hp-back{animation-delay:.18s} .hp-front{animation-delay:.28s} .hp-chip{animation-delay:.42s}
}
/* ---- services as editorial rows: the card grid was the template tell ---- */
.svc-rows{border-top:1px solid var(--sand-line)}
.svc-row{display:grid;grid-template-columns:1.618fr 1fr auto;gap:var(--s55);align-items:center;
padding:var(--s34) 0;border-bottom:1px solid var(--sand-line);text-decoration:none;
transition:padding-left .3s var(--ease)}
.svc-row:hover{padding-left:var(--s13)}
.svc-row h3{font-size:var(--f-h2s);line-height:var(--lh-head);letter-spacing:-.035em}
.svc-row:hover h3{color:var(--primary-text)}
.svc-row .sr-name p{color:var(--body);font-size:var(--f-body);margin-top:var(--s8);max-width:46ch}
.sr-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:var(--s5) var(--s13)}
.sr-list li{font-size:var(--f-sm);color:var(--dim);white-space:nowrap}
.sr-list li::before{content:"";display:inline-block;width:7px;height:1.5px;background:var(--primary);
vertical-align:middle;margin-right:7px}
.sr-go{color:var(--sand-line);transition:color .25s ease,transform .3s cubic-bezier(.16,1,.3,1)}
.svc-row:hover .sr-go{color:var(--primary-text);transform:translateX(5px)}
@media(max-width:1000px){
.hero-grid{grid-template-columns:1fr;gap:var(--s55)}
.hero-proof{min-height:270px;margin-top:var(--s21)}
.hp-back{right:0;transform:rotate(2.2deg) scale(.88)} .hp-front{left:0}
.hp-chip{right:0}
.svc-row{grid-template-columns:1fr;gap:var(--s13);align-items:start}
.sr-go{display:none}
}
/* ---- mobile navigation: the desktop nav hides, so something must replace it ---- */
.burger{display:none;width:44px;height:44px;border:1px solid var(--anchor-line);border-radius:var(--r-sm);
background:transparent;cursor:pointer;padding:0;place-items:center;gap:5px;flex-direction:column}
.burger span{display:block;width:17px;height:1.8px;background:var(--on-anchor);border-radius:2px;
transition:transform .28s cubic-bezier(.16,1,.3,1),opacity .2s}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.4px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.4px) rotate(-45deg)}
.mnav{background:var(--anchor-2);border-top:1px solid var(--anchor-line)}
.mnav .wrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--s21);padding-top:var(--s21);padding-bottom:var(--s34)}
.mnav h4{font-size:var(--f-xs);font-weight:800;letter-spacing:.14em;text-transform:uppercase;
color:var(--primary);margin-bottom:var(--s8)}
.mnav a{display:flex;align-items:center;gap:var(--s8);color:var(--dim-anchor);text-decoration:none;
font-size:var(--f-body);min-height:44px}
.mnav a:hover,.mnav a:focus-visible{color:var(--on-anchor)}
.mnav a .ico{color:var(--primary);opacity:.75}
@media(max-width:1000px){
.burger{display:flex}
.hdr-cta{display:none}
header.site > .wrap{gap:var(--s13)}
}
@media(max-width:560px){.mnav .wrap{grid-template-columns:1fr}}
/* ---- case study: ROAS journey, channel split, why-it-matters ---- */
.journey{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--s13);
align-items:end;height:233px;margin-top:var(--s34);
padding:var(--s21) var(--s21) 0;border:1px solid var(--sand-line);border-radius:var(--r-md);
background:#fff}
.jb{display:grid;grid-template-rows:auto 1fr auto;gap:var(--s8);height:100%;align-items:end;justify-items:center}
.jv{font-size:var(--f-sm);font-weight:800;color:var(--primary-text);letter-spacing:-.02em}
.jbar{width:100%;max-width:62px;background:linear-gradient(var(--primary),var(--primary-text));
border-radius:var(--r-sm) var(--r-sm) 0 0;align-self:end;min-height:8px}
.jm{font-family:var(--mono);font-size:var(--f-xs);color:var(--dim);padding-bottom:var(--s13)}
.chspend{font-size:var(--f-h3);font-weight:800;letter-spacing:-.035em;color:var(--primary-text);
margin:var(--s8) 0 var(--s13)}
.whyblock{max-width:var(--measure)}
.whyblock p{color:var(--body);font-size:var(--f-lede);line-height:var(--lh-lede);margin-top:var(--s21)}
@media(max-width:700px){.journey{height:190px;gap:var(--s5);padding:var(--s13) var(--s13) 0}.jv{font-size:var(--f-xs)}}
/* a dropdown on a right-hand nav item must not push the page wider */
/* ============================================================
B SYSTEM, SITEWIDE — promoted 17 Aug 2026
Directions A, C and D retired. B is the design, so the devices that made B
work stop being homepage-only.
============================================================ */
/* ---- scroll reveal ----
Lives here, not in home.css, because every page reveals now. The paired JS is
in the shared page script (NAV_JS) with a 1200ms failsafe: .rv starts at
opacity 0, so if the observer never reports the copy MUST still appear.
Invisible copy is a worse failure than no animation. */
/* ---- scroll reveal: movement only, never opacity ----
The reveal animates transform and nothing else. That is a deliberate
constraint, not an oversight, and it is what makes this safe.
Every opacity-based version was measured and every one could leave real copy
invisible:
- IntersectionObserver alone -> silent in headless and in the preview pane
- scroll-event sweep -> 3 of 4 pages got zero scroll events
- requestAnimationFrame sweep -> starves as soon as the runtime throttles
- animation-timeline:view() -> `view()` resolves against the NEAREST
scroll container, so .site-card inside the horizontal .rail tracks
sideways scroll, and elements near the end of the document never finish
their entry range because the page runs out of scroll. Both hold the
from-state permanently. The CTA .route blocks sit at the bottom of every
page, so this was about to hide part of the CTA sitewide.
With transform alone the worst possible outcome is an element resting 21px
low. It is always readable, always selectable, always in the accessibility
tree. A missed animation costs nothing; missed copy costs the page.
No JavaScript is involved. */
@supports (animation-timeline: view()){
@media (prefers-reduced-motion:no-preference){
@keyframes rvIn{
from{transform:translate3d(0,21px,0)}
to {transform:none}
}
.rv{animation:rvIn .01s linear both;animation-timeline:view();
animation-range:entry 0% entry 72%}
}
}
/* ---- icons set into headings, as on the homepage ---- */
h2 .ico,h3 .ico{color:var(--accent-text);flex:none}
.on-dark h2 .ico,.on-dark h3 .ico{color:var(--accent)}
h3.with-ico{display:flex;gap:var(--s13);align-items:flex-start}
h3.with-ico .ico{margin-top:4px}
/* ---- section heads sit on the ratio ----
The claim takes the major term, the lede takes the minor: 1.618 : 1. Every
section head on the site is the same subdivision of the canvas as the hero
above it (717 + 443), so the eye meets one proportion repeatedly rather than
a different arrangement per section.
A head with no lede still occupies only the major term — 61.8% of the
canvas — which is why headings stop short of the right margin. */
.head{display:grid;grid-template-columns:var(--fr) 1fr;gap:var(--s55);
align-items:end;margin-bottom:var(--s55)}
.head .lede,.head .lead{margin-top:0;align-self:end}
.head h2{margin-top:0}
/* centred heads are a deliberate exception: a centred φ split reads as a
mistake rather than as a ratio */
.head.mid{display:block;text-align:center;max-width:var(--w-1);margin-left:auto;margin-right:auto}
.head.mid .lede,.head.mid .lead{margin-top:var(--s21)}
@media(max-width:1000px){
.head{grid-template-columns:1fr;gap:var(--s21)}
.head .lede,.head .lead{margin-top:0}
}
/* ---- the closing CTA restated in B's voice ---- */
.final{background:var(--anchor);color:var(--on-anchor);padding:var(--s144) 0;
border-bottom:none}
.final h2{font-size:clamp(var(--f-h2),5vw,var(--f-h1s));line-height:1.02;
letter-spacing:-.045em;color:#fff;max-width:16ch}
.final .lede{color:var(--dim-anchor);font-size:var(--f-lede)}
.final .route h3{color:#fff}
@media(max-width:1000px){.final{padding:var(--s89) 0}}
/* ---- steps on the sand ground ---- */
.band:not(.on-dark) .step,section.s:not(.ink) .step{border-top-color:var(--sand-line)}
.band:not(.on-dark) .step:first-child,section.s:not(.ink) .step:first-child{border-top-color:var(--primary-text)}
.step h3{font-size:var(--f-body);letter-spacing:-.02em;margin-bottom:var(--s8)}
.step p{font-size:var(--f-micro);line-height:1.45}
/* ---- proof figures: B's oversized-numeral treatment ---- */
.pf{border-top:2px solid var(--primary-text);padding-top:var(--s21)}
.on-dark .pf{border-top-color:var(--primary)}
.pf .n{font-size:clamp(var(--f-h2s),4.2vw,var(--f-h1s));letter-spacing:-.05em;line-height:.9}
/* :not(.n) is REQUIRED — .band:not(.on-dark) .pf p scores (0,3,1) and beats
.pf .n at (0,2,0), which silently reset the headline figure to 16px. */
.band:not(.on-dark) .pf p:not(.n),section.s:not(.ink) .pf p:not(.n){
font-size:var(--f-body);line-height:1.5}
/* ---- generic grids inherit B's Fibonacci gutter ---- */
.grid2,.grid3,.grid4{gap:var(--s34)}
.cases{gap:var(--s34)}
@media(max-width:560px){
.band,section.s{padding:var(--s55) 0}
.phero{padding:var(--s34) 0 var(--s55)}
.final{padding:var(--s55) 0}
}
/* ---- dark grounds: body ink is unreadable on anchor ----
Promoting the sand ground moved most components to a light-ground colour.
Anywhere a component lands inside a dark band it must restate its
foreground, or it inherits --body (#3E5359) on --anchor (#06222A) at 2.04:1.
Measured on /industries/healthcare/ before this block existed. */
.on-dark .card p,.on-dark .ind p,.on-dark .route p,.on-dark .svc p,.on-dark .svc li,
.on-dark .deliv li span,.on-dark .faq p,.on-dark .case p,.on-dark .fourth p,
.on-dark .prose p,.on-dark .prose li,.on-dark .lede,.on-dark .lead,
section.s.ink .card p,section.s.ink .svc li,section.s.ink .route p{color:var(--dim-anchor)}
.on-dark .deliv li{border-bottom-color:var(--anchor-line)}
.on-dark .ind,.on-dark .svc article,.on-dark .route{border-top-color:var(--anchor-line)}
.on-dark .faq details{border-bottom-color:var(--anchor-line)}
.on-dark .faq summary,.on-dark .deliv li b,.on-dark .ind h3,.on-dark .card h3{color:var(--on-anchor)}
.on-dark .ind:hover h3,.on-dark .case:hover h3{color:var(--primary)}
.on-dark .count-pill{background:var(--anchor-2);border-color:var(--anchor-line);color:var(--primary)}
/* ---- statement lists ----
One claim per line, at reading size, on the prose measure. These were
previously .svc (a three-up card grid) forced to display:block inline, which
left them at bullet size in a half-empty column. */
.blist{list-style:none;padding:0;margin:var(--s34) 0 0;max-width:var(--measure)}
.blist li{position:relative;padding:var(--s13) 0 var(--s13) var(--s34);
font-size:var(--f-lede);line-height:var(--lh-lede);color:var(--body);
border-bottom:1px solid var(--sand-line)}
.blist li:last-child{border-bottom:none}
.blist li::before{content:"";position:absolute;left:0;top:calc(var(--s13) + .62em);
width:var(--s21);height:2px;background:var(--primary-text)}
.blist.tight li{font-size:var(--f-body);padding-top:var(--s8);padding-bottom:var(--s8)}
.on-dark .blist li{color:var(--dim-anchor);border-bottom-color:var(--anchor-line)}
.on-dark .blist li::before{background:var(--primary)}
/* a single figure standing on its own needs a full-width rule, not a 340px stub */
.pf.standalone{margin-top:var(--s34);border-top-width:2px}
/* process steps: 12.58px was too small to read comfortably at five across */
.step p{font-size:var(--f-body);line-height:1.5}
.step h3{font-size:var(--f-lede);letter-spacing:-.025em}
/* credential strip: even wrapping instead of one orphan on a second line */
.creds .wrap{gap:var(--s8) var(--s34);row-gap:var(--s5)}
.creds a,.creds span{min-height:34px}
/* §16.9 pending-signoff flag. It sits inside the dark results band, where
--accent-text (#75570F) measured 2.46:1. The gold has to flip with the ground
like every other accent does. */
.fine.pending{color:var(--accent-text);margin-top:var(--s21)}
.on-dark .fine.pending,.final .fine.pending{color:var(--accent)}
/* ---- long-form prose ----
.prose p sets --f-lede, which flattened the opening .lede to the same size as
the body and left the section with no hierarchy at all. The lead paragraph
takes the next step up and the ink colour, so a wall of text gains an entry
point. */
.prose .lede{font-size:var(--f-h3);line-height:var(--lh-head);color:var(--ink);
font-weight:500;letter-spacing:-.02em;max-width:32ch;margin-bottom:var(--s34)}
.prose > p:first-child{margin-top:0}
.on-dark .prose .lede{color:var(--on-anchor)}
/* ---- vertical rhythm on the ratio ----
Three section heights, each a φ step from the last (55 · 89 · 144). They are
assigned by role, not sprinkled: the band that opens a page and the band that
closes it take the major term, the body of the page takes the middle, and
supporting strips take the minor. A uniform 89 everywhere was rhythmically
flat — every section arrived with identical weight. */
.band.tight,section.s.tight{padding:var(--s55) 0}
.creds + .band,.creds + section.s{padding-top:var(--s144)}
.final{padding:var(--s144) 0}
@media(max-width:1000px){
.creds + .band,.creds + section.s{padding-top:var(--s89)}
.phero{min-height:0}
}
/* hero content sits above the background bloom */
.v2-hero > .wrap,.phero > .wrap{position:relative;z-index:1}
/* ============================================================
SHOWCASE — floating filter dock + full-width grid
The filter was a 287px sidebar column. Six links did not earn a permanent
sixth of the canvas, so it floats over the page instead and the grid takes
the full 1160. Same idiom as the direction switcher this project used during
review: a fixed pill, blurred ground, thumb-height off the bottom edge.
============================================================ */
.sc-band{padding-top:var(--s89);
/* the dock overlays the page, so the last row must clear it */
padding-bottom:var(--s144)}
/* Centred with auto margins, NOT translateX(-50%). The riseIn entrance
animation below ends on `transform:none`, and an animation with `both` fill
holds its end state permanently — which silently cancelled the centring
transform and pushed the dock 18px off the right edge. Animated properties
cannot also be layout-critical properties. */
.sc-dock{position:fixed;left:0;right:0;margin-inline:auto;width:max-content;
bottom:var(--s21);z-index:90;
display:flex;align-items:center;gap:var(--s8);
max-width:calc(100vw - var(--s34) * 2);
padding:var(--s8);border-radius:999px;
background:rgba(6,34,42,.94);backdrop-filter:blur(14px);
border:1px solid var(--anchor-line);
box-shadow:0 21px 55px -20px rgba(0,0,0,.8)}
.sc-dock-lbl{font-family:var(--mono);font-size:var(--f-xs);letter-spacing:.14em;
text-transform:uppercase;color:var(--dim-anchor);padding:0 var(--s5) 0 var(--s13);flex:none}
.sc-dock-in{display:flex;align-items:center;gap:2px;overflow-x:auto;scrollbar-width:none}
.sc-dock-in::-webkit-scrollbar{display:none}
.sc-f{display:inline-flex;align-items:center;gap:var(--s8);flex:none;
background:none;border:1px solid transparent;border-radius:999px;cursor:pointer;
font-family:var(--display);padding:var(--s8) var(--s13);min-height:44px;
color:var(--dim-anchor);white-space:nowrap;
transition:background .2s ease,color .2s ease}
.sc-f span{font-size:var(--f-sm);font-weight:700;letter-spacing:-.01em}
.sc-f b{font-family:var(--mono);font-size:var(--f-xs);font-weight:500;color:var(--dim-anchor)}
.sc-f:hover{background:rgba(255,255,255,.07);color:var(--on-anchor)}
.sc-f[aria-pressed="true"]{background:var(--primary);color:var(--on-primary)}
.sc-f[aria-pressed="true"] b{color:var(--on-primary);opacity:.72}
/* Reclaiming the sidebar buys a COLUMN, not bigger cards. Rung 3 (274) as the
floor gave three columns at ~350px — the same count as before, just larger,
which is not what the extra width was for. 210 lands four at ~252px: more
sites per screen and still wider than the three-column layout managed. */
.sc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
gap:var(--s34) var(--s21)}
/* Card internals. These were lost when the rail block was deleted, which left
the three labels running together inline — "Visit WebsiteNirmalayanirmalaya.com". */
.site-card{display:flex;flex-direction:column;text-decoration:none}
.site-card .visit{display:flex;align-items:center;justify-content:center;gap:var(--s8);
background:var(--primary);color:var(--on-primary);
border:1px solid var(--primary-text);border-top:none;
border-radius:0 0 var(--r-md) var(--r-md);
font-weight:700;font-size:var(--f-sm);min-height:44px;transition:background .15s ease}
.site-card:hover .visit{background:#2ee07f}
.site-card .visit .ico{width:13px;height:13px}
.site-card .nm{display:block;font-size:var(--f-body);font-weight:800;letter-spacing:-.02em;
margin-top:var(--s13);color:var(--ink);line-height:1.25}
.site-card .dm{display:block;font-family:var(--mono);font-size:var(--f-xs);
color:var(--dim);margin-top:4px;word-break:break-all}
.site-card[hidden]{display:none}
/* a portrait golden rectangle — 1 : φ. The captures are 660x979 (0.674), so
this trims a little from the sides rather than distorting. */
.site-card .shot{border:1px solid var(--sand-line);border-radius:var(--r-md) var(--r-md) 0 0;
overflow:hidden;background:#fff;height:auto;aspect-ratio:1 / var(--rect)}
/* --dim on --sand-2 measures 4.46:1 — under the 4.5 floor for text this size.
--body clears it comfortably. */
/* Without this the image keeps its natural 979px height, is squeezed to the
column width, and object-fit falls back to `fill` — measured 255x979 against
a natural 660x979, i.e. genuinely distorted rather than cropped. It was lost
with the rail block; the text labels were restored at the time and this was
not. */
.site-card .shot img{display:block;width:100%;height:100%;
object-fit:cover;object-position:top center}
.sc-pending{height:100%;display:grid;place-items:center;background:var(--sand-2);
font-family:var(--mono);font-size:var(--f-xs);color:var(--body);text-align:center;
padding:var(--s13);line-height:1.5}
@media(max-width:700px){
.sc-dock{left:var(--s13);right:var(--s13);width:auto;max-width:none;
bottom:var(--s13);border-radius:var(--r-lg)}
.sc-dock-lbl{display:none}
.sc-dock-in{width:100%}
.sc-cards{grid-template-columns:repeat(auto-fill,minmax(var(--w-4),1fr))}
}
@media (prefers-reduced-motion:no-preference){
.sc-dock{animation:riseIn .6s var(--ease) both;animation-delay:.2s}
}
/* ============================================================
RESULT VISUALISATIONS
Three shapes, each drawn from a figure that genuinely supports it (see
result_viz() in build.py). 11 of the 36 published figures qualify; the rest
are qualitative outcomes and get nothing rather than a chart of nothing.
Inline SVG and CSS widths only — no JS, so a figure can never render as an
empty frame. Every value below is a token.
============================================================ */
.viz{display:block;margin:var(--s13) 0 var(--s8);max-width:var(--w-3)}
.viz-cap{display:block;font-family:var(--mono);font-size:var(--f-xs);
color:var(--dim);margin-top:var(--s5);letter-spacing:.06em}
.on-dark .viz-cap{color:var(--dim-anchor)}
/* --- before → after ------------------------------------------------------ */
.viz-ba{display:grid;gap:var(--s5)}
.viz-row{display:flex;align-items:center;gap:var(--s8)}
.viz-row i{display:block;height:var(--s8);border-radius:var(--r-sm);
background:var(--sand-line);flex:none;min-width:2px}
.on-dark .viz-row i{background:var(--anchor-line)}
.viz-row.is-now i{background:var(--primary)}
.viz-row em{font-style:normal;font-family:var(--mono);font-size:var(--f-xs);
color:var(--dim);white-space:nowrap}
.on-dark .viz-row em{color:var(--dim-anchor)}
.viz-row.is-now em{color:var(--ink)}
.on-dark .viz-row.is-now em{color:var(--on-anchor)}
.viz-delta{font-family:var(--mono);font-size:var(--f-xs);letter-spacing:.06em;
margin-top:2px}
.viz-delta.is-up{color:var(--primary-text)}
.viz-delta.is-down{color:var(--primary-text)}
.on-dark .viz-delta.is-up,.on-dark .viz-delta.is-down{color:var(--primary)}
/* --- ROAS against the 1× break-even line --------------------------------- */
.viz-track{position:relative;display:block;height:var(--s8);border-radius:var(--r-sm);
background:var(--sand-line);overflow:visible}
.on-dark .viz-track{background:var(--anchor-line)}
.viz-track i{display:block;height:100%;border-radius:var(--r-sm);
background:linear-gradient(90deg,var(--primary-text),var(--primary))}
/* the break-even marker has to sit ABOVE the fill or it disappears into it */
.viz-track b{position:absolute;top:-3px;bottom:-3px;width:2px;
background:var(--accent);border-radius:1px}
/* --- share of a whole ---------------------------------------------------- */
.viz-dial{display:flex;align-items:center;gap:var(--s13)}
.viz-dial svg{width:var(--s55);height:var(--s55);flex:none}
.viz-dial .tr{fill:none;stroke:var(--sand-line);stroke-width:8}
.on-dark .viz-dial .tr{stroke:var(--anchor-line)}
.viz-dial .fl{fill:none;stroke:var(--primary);stroke-width:8;stroke-linecap:round}
.viz-dial .viz-cap{margin-top:0;max-width:12ch;line-height:1.4}
@media(max-width:560px){.viz{max-width:none}}
/* ---- industries hub cards ----
The hub was four text blocks. Each now leads with an image: a generated file
if one has been dropped into assets/industries/, otherwise a real client
screenshot from that sector (credited, because it is evidence and should be
attributable rather than decoration).
.ind-card only — the bare .ind is still used on service pages as a text link
and must not grow a frame there. */
.ind-card{border-top:none;padding-top:0}
.ind-shot{margin:0 0 var(--s21);border:1px solid var(--sand-line);border-radius:var(--r-md);
overflow:hidden;background:#fff}
.ind-shot img{display:block;width:100%;height:auto;aspect-ratio:var(--rect);
object-fit:cover;object-position:top center;
transition:transform .55s var(--ease)}
.ind-card:hover .ind-shot{border-color:var(--primary-text)}
.ind-card:hover .ind-shot img{transform:scale(1.03)}
.ind-credit{display:block;font-family:var(--mono);font-size:var(--f-xs);color:var(--dim);
margin-top:var(--s8);letter-spacing:.06em}
.on-dark .ind-credit{color:var(--dim-anchor)}
@media(prefers-reduced-motion:reduce){.ind-shot img{transition:none}}
/* ============================================================
Le Webexy — homepage v2
Persuade mode: the metric is form completion, not time on page.
φ DISCIPLINE: every font-size below comes from the scale. No exceptions.
9.89 · 12.58 · 16 · 20.35 · 25.89 · 32.93 · 41.89 · 53.28 · 67.77 · 109.6
Every spacing value is Fibonacci. Every split is 1.618 : 1.
============================================================ */
.v2{
--f-micro:12.58px; --f-body:16px; --f-lede:20.35px; --f-h3:25.89px;
--f-h2s:32.93px; --f-h2:41.89px; --f-h1s:53.28px; --f-h1:67.77px; --f-mega:109.6px;
--ease:cubic-bezier(.16,1,.3,1);
/* Beige derived from the scheme's own gold (#D9A441, H=39) taken to paper
lightness — not an imported colour. Verified: ink 15.2:1, body 7.5:1,
dim 4.9:1, primary-text 5.0:1, accent-text 6.2:1. */
--sand:var(--color-sand,#F8F5EF); --sand-2:var(--color-sand-warm,#F0EBE3); --sand-line:var(--color-sand-line,#E1DACE);
background:var(--sand);color:var(--ink);
}
.v2 ::selection{background:var(--primary);color:var(--on-primary)}
/* ---------------- hero: headline left, the form itself right ---------------- */
/* 1160 x 717 — the canvas and its own φ division. The homepage hero is a
golden rectangle, and an inner-page hero is the next rung down (443). */
.v2-hero{position:relative;overflow:hidden;padding:var(--s55) 0 var(--s89);
min-height:var(--w-1);display:flex;align-items:center;
background:var(--sand);border-bottom:1px solid var(--sand-line)}
.v2-hero > .wrap{width:100%}
/* bloom anchored to the φ point of the canvas, not an eyeballed 40% */
.v2-hero::before{content:"";position:absolute;inset:-30% -10% auto 61.8%;
height:calc(var(--w-1) * var(--phi));
background:radial-gradient(closest-side,rgba(217,164,65,.20),transparent 70%);pointer-events:none}
.v2-hero .wrap{position:relative;display:grid;grid-template-columns:1.618fr 1fr;
gap:var(--s55);align-items:start}
.v2-badge{display:inline-flex;align-items:center;gap:var(--s8);border:1px solid var(--sand-line);
background:#fff;border-radius:999px;padding:var(--s8) var(--s13);font-size:var(--f-micro);
font-weight:700;color:var(--body);letter-spacing:.02em}
.v2-badge .ico{color:var(--primary-text);width:14px;height:14px}
.v2-badge i{width:6px;height:6px;border-radius:50%;background:var(--primary);flex:none;
box-shadow:0 0 0 4px rgba(21,209,108,.16)}
.v2-hero h1{font-size:clamp(var(--f-h1s),7.4vw,var(--f-mega));line-height:.94;
letter-spacing:-.045em;margin:var(--s21) 0 0;max-width:13ch;font-weight:800}
/* --primary (#15D16C) on sand measures 1.86:1 at 106px — it fails even the
3:1 large-text floor. --primary-text (#0B7A3F) is the same hue at 5.0:1 on
sand. The brand green stays for fills and markers, never for words. */
.v2-hero h1 em{font-style:normal;color:var(--primary-text);display:inline-block}
.v2-hero .sub{font-size:var(--f-lede);color:var(--body);max-width:46ch;margin:var(--s21) 0 0;
line-height:1.472}
/* the numbers that make the argument, immediately under the claim */
.v2-kpi{display:grid;grid-template-columns:repeat(3,max-content);gap:var(--s34);
margin:var(--s34) 0 0;padding-top:var(--s21);border-top:1px solid var(--sand-line)}
.v2-kpi .k{display:block;font-size:var(--f-h2);font-weight:800;letter-spacing:-.045em;
line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.v2-kpi .k b{color:var(--primary-text);font-weight:800}
.v2-kpi .t{display:flex;gap:6px;font-size:var(--f-micro);color:var(--dim);margin-top:var(--s8);
max-width:21ch;line-height:1.4}
.v2-kpi .t .ico{color:var(--accent-text);flex:none;margin-top:2px;width:13px;height:13px}
/* ---------------- the form is the hero, not an afterthought ---------------- */
.v2-form{background:#fff;color:var(--ink);border-radius:var(--r-lg);padding:var(--s34);
border:1px solid var(--sand-line);box-shadow:0 34px 70px -34px rgba(6,34,42,.35);position:relative}
.v2-form h2{font-size:var(--f-h3);letter-spacing:-.03em;line-height:1.15;margin:0;max-width:none}
.v2-form .why{font-size:var(--f-body);color:var(--body);margin:var(--s8) 0 var(--s21)}
.v2-form label{display:block;font-size:var(--f-micro);font-weight:700;color:var(--body);margin-bottom:var(--s5)}
.v2-form .f{margin-bottom:var(--s13)}
.v2-form input,.v2-form select{width:100%;font-family:var(--display);font-size:var(--f-body);
padding:var(--s13);border:1.5px solid var(--line);border-radius:var(--r-sm);
background:var(--paper);color:var(--ink);min-height:var(--s55);caret-color:var(--primary-text)}
.v2-form input:focus,.v2-form select:focus{border-color:var(--primary);background:#fff;outline:none;
box-shadow:0 0 0 4px rgba(21,209,108,.14)}
.v2-form .go{width:100%;justify-content:center;font-size:var(--f-body);min-height:var(--s55);margin-top:var(--s5)}
/* .fine is a mono metadata style sitewide; this one is a sentence of prose,
so it takes the display face. Mono made it read as a code snippet. */
.v2-form .fine{font-family:var(--display);font-size:var(--f-micro);color:var(--dim);
text-align:center;margin-top:var(--s13);line-height:1.45}
.v2-form .trust{display:flex;gap:var(--s13);flex-wrap:wrap;margin-top:var(--s21);
padding-top:var(--s21);border-top:1px solid var(--line)}
.v2-form .trust span{font-size:var(--f-micro);color:var(--dim);display:inline-flex;align-items:center;gap:6px}
.v2-form .trust .ico{color:var(--primary-text);width:14px;height:14px}
/* ---------------- results ticker: the marketing engine, visible ---------------- */
.v2-ticker{background:var(--anchor);overflow:hidden;padding:var(--s21) 0}
.v2-track{display:flex;gap:var(--s55);width:max-content;will-change:transform}
.v2-track span{display:inline-flex;align-items:baseline;gap:var(--s8);white-space:nowrap;
font-size:var(--f-lede);font-weight:800;letter-spacing:-.03em;color:#fff}
.v2-track span i{font-style:normal;font-size:var(--f-micro);font-weight:700;color:var(--dim-anchor);
letter-spacing:.06em;text-transform:uppercase}
.v2-track span u{text-decoration:none;color:var(--primary)}
@media (prefers-reduced-motion:no-preference){
@keyframes tick{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.v2-track{animation:tick 46s linear infinite}
.v2-ticker:hover .v2-track{animation-play-state:paused}
}
/* ---------------- sections ---------------- */
.v2 section.s{padding:var(--s89) 0;background:var(--sand);color:var(--ink);
border-bottom:1px solid var(--sand-line)}
.v2 section.s.ink{background:var(--anchor);color:var(--on-anchor);border-bottom:none}
.v2 section.s.light{background:#fff;color:var(--ink);border-bottom-color:var(--sand-line)}
.v2 h2.big{font-size:clamp(var(--f-h2s),5vw,var(--f-h1));line-height:1.02;letter-spacing:-.042em;
max-width:16ch;font-weight:800;margin:0}
.v2 .lead{font-size:var(--f-lede);color:var(--body);max-width:52ch;margin:var(--s21) 0 0;line-height:1.472}
.v2 .ink .lead{color:var(--dim-anchor)}
/* problem: two blunt statements, no cards */
.v2-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s55);margin-top:var(--s55)}
.v2-split > div{padding-top:var(--s21);border-top:2px solid var(--primary-text)}
.v2-split > div:last-child{border-top-color:var(--accent)}
.v2-split h3{font-size:var(--f-h3);letter-spacing:-.03em;line-height:1.15;margin:0 0 var(--s13);
display:flex;gap:var(--s13);align-items:flex-start}
.v2-split h3 .ico{color:var(--accent-text);flex:none;margin-top:4px}
.v2-split p{font-size:var(--f-body);color:var(--body);line-height:1.618}
.v2 .ink .v2-split p{color:var(--dim-anchor)}
/* proof: oversized figures, scroll-revealed */
.v2-proof{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s55) var(--s89);margin-top:var(--s55)}
.v2-proof article{display:grid;grid-template-columns:auto 1fr;gap:var(--s21);align-items:baseline}
.v2-proof .n{font-size:var(--f-h1s);font-weight:800;letter-spacing:-.05em;line-height:.9;
font-variant-numeric:tabular-nums;color:var(--primary);white-space:nowrap}
.v2-proof h3{font-size:var(--f-lede);letter-spacing:-.025em;margin:0 0 var(--s5)}
.v2-proof p{font-size:var(--f-body);color:var(--dim-anchor);line-height:1.5}
/* work: screenshots at scale */
.v2-work{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s34);margin-top:var(--s55)}
.v2-card{text-decoration:none;display:block}
.v2-card figure{margin:0;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);
background:#fff;box-shadow:0 21px 55px -28px rgba(0,0,0,.6)}
/* height:auto is REQUIRED — without it the height="750" attribute wins,
aspect-ratio is ignored, and cover zooms into a fragment of the page.
16/10 matches the source 1200x750 exactly, so nothing is cropped. */
.v2-card img{display:block;width:100%;height:auto;aspect-ratio:var(--rect);
object-fit:cover;object-position:top center;transition:transform .55s var(--ease)}
.v2-card:hover img{transform:scale(1.04)}
.v2-card .r{display:block;font-size:var(--f-h3);font-weight:800;letter-spacing:-.04em;
color:var(--primary-text);margin-top:var(--s21);font-variant-numeric:tabular-nums}
.v2-card .c{display:flex;gap:7px;align-items:center;font-size:var(--f-body);font-weight:800;letter-spacing:-.02em;margin-top:var(--s5)}
.v2-card .c .ico{color:var(--primary-text);width:15px;height:15px}
.v2-card .d{display:block;font-size:var(--f-micro);color:var(--dim);margin-top:var(--s5)}
/* services: full-bleed rows */
.v2-rows{margin-top:var(--s55);border-top:1px solid var(--sand-line)}
.v2-row{display:grid;grid-template-columns:auto 1.618fr 1fr auto;gap:var(--s34);align-items:center;
padding:var(--s34) 0;border-bottom:1px solid var(--sand-line);text-decoration:none;
transition:padding-left .4s var(--ease),background .3s ease}
.v2-row .ic{width:var(--s55);height:var(--s55);border:1px solid var(--sand-line);border-radius:var(--r-sm);
display:grid;place-items:center;color:var(--primary-text);background:#fff}
.v2-row:hover .ic{border-color:var(--primary-text)}
.v2-row:hover{padding-left:var(--s21)}
.v2-row h3{font-size:var(--f-h2s);letter-spacing:-.038em;line-height:1.1;margin:0}
.v2-row:hover h3{color:var(--primary-text)}
.v2-row p{font-size:var(--f-body);color:var(--body);margin-top:var(--s8);max-width:44ch;line-height:1.5}
.v2-row ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s5) var(--s13)}
.v2-row li{font-size:var(--f-micro);color:var(--dim)}
.v2-row .go{color:var(--sand-line);transition:color .3s ease,transform .4s var(--ease)}
.v2-row:hover .go{color:var(--primary-text);transform:translateX(var(--s8))}
/* logos */
.v2-logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(144px,1fr));gap:var(--s13);
margin-top:var(--s55)}
.v2-logos li{list-style:none;background:#fff;border:1px solid var(--sand-line);border-radius:var(--r-sm);height:89px;
display:grid;place-items:center;padding:var(--s13) var(--s21)}
/* A logo wall exists to be recognised. grayscale at .66 opacity made six of the
twelve unreadable — unify with grayscale + a contrast lift, not with fading. */
.v2-logos img{width:100%;height:var(--s55);object-fit:contain;
filter:grayscale(1) contrast(1.18);opacity:1;
transition:filter .3s var(--ease)}
.v2-logos li:hover img{filter:none}
.v2-logos li{transition:border-color .25s ease,transform .3s var(--ease)}
.v2-logos li:hover{border-color:var(--primary-text);transform:translateY(-2px)}
/* quotes */
.v2-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s34);margin-top:var(--s55)}
.v2-quotes blockquote{margin:0;font-size:var(--f-lede);line-height:1.472;letter-spacing:-.02em;
color:var(--ink);font-weight:500}
.v2-quotes .qm{color:var(--accent-text);margin-bottom:var(--s13);display:block}
.v2-quotes figcaption{margin-top:var(--s21);padding-top:var(--s13);border-top:1px solid var(--sand-line);
font-size:var(--f-micro)}
.v2-quotes figcaption b{display:block;font-size:var(--f-body);letter-spacing:-.02em}
.v2-quotes figcaption span{color:var(--dim)}
.v2-quotes figure{margin:0}
/* closing CTA */
/* dark band: the root now sets light-ground ink, so this section must state
its own foreground or it inherits dark-on-dark (measured 1.17:1). */
.v2-close{padding:var(--s144) 0;text-align:center;background:var(--anchor);color:var(--on-anchor)}
.v2-close h2{font-size:clamp(var(--f-h2),6.4vw,var(--f-h1));line-height:1;letter-spacing:-.045em;
max-width:18ch;margin:0 auto;font-weight:800;color:#fff}
.v2-close .btn.ghost{color:var(--on-anchor);border-color:var(--anchor-line)}
.v2-close .btn.ghost:hover{background:var(--anchor-2)}
.v2-close p{font-size:var(--f-lede);color:var(--dim-anchor);max-width:48ch;margin:var(--s21) auto 0}
.v2-close .row{display:flex;gap:var(--s13);justify-content:center;margin-top:var(--s34);flex-wrap:wrap}
.v2-close .tel{font-size:var(--f-micro);color:var(--dim-anchor);margin-top:var(--s21)}
.v2-close .tel a{color:var(--dim-anchor);text-decoration:none;min-height:44px;
display:inline-flex;align-items:center;padding:0 var(--s5)}
.v2-close .tel a:hover{color:#fff}
/* sticky conversion bar — appears once the hero form is out of view */
.v2-bar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:rgba(6,34,42,.97);
backdrop-filter:blur(13px);border-top:1px solid var(--anchor-line);
transform:translateY(101%);transition:transform .42s var(--ease)}
.v2-bar[data-show="true"]{transform:none}
.v2-bar .wrap{display:flex;align-items:center;gap:var(--s21);
padding-top:var(--s13);padding-bottom:var(--s13)}
.v2-bar p{font-size:var(--f-body);font-weight:700;letter-spacing:-.02em;margin-right:auto;color:#fff}
.v2-bar p span{display:block;font-size:var(--f-micro);font-weight:500;color:var(--dim-anchor);
letter-spacing:0;margin-top:2px}
@media(max-width:700px){.v2-bar p span{display:none}}
/* scroll reveal lives in site.css now — transform-only, CSS-driven, shared by
every page. The opacity version that used to live here could leave copy
invisible whenever the observer stayed silent; see the note there. */
@media(max-width:1000px){
.v2-hero .wrap{grid-template-columns:1fr;gap:var(--s34)}
.v2-hero{padding-bottom:var(--s55)}
.v2-kpi{grid-template-columns:1fr;gap:var(--s21)}
.v2-split,.v2-proof,.v2-work,.v2-quotes{grid-template-columns:1fr;gap:var(--s34)}
.v2-row{grid-template-columns:1fr;gap:var(--s13);align-items:start}
.v2-row .go{display:none}
.v2-close{padding:var(--s89) 0}
}
/* ---------------- fold 2: the interactive proof console ----------------
Same component as direction D, restated for the sand ground. Green marks
positive movement, gold marks the peak figure. */
.console-fold{background:var(--anchor) !important;color:var(--on-anchor) !important;
border-bottom:none !important;position:relative;overflow:hidden}
.console-fold::before{content:"";position:absolute;inset:0;pointer-events:none;
background-image:linear-gradient(rgba(143,174,181,.11) 1px,transparent 1px),
linear-gradient(90deg,rgba(143,174,181,.11) 1px,transparent 1px);
background-size:89px 89px;
mask-image:radial-gradient(120% 90% at 72% 0%,#000,transparent 74%)}
.console-fold .wrap{position:relative}
.cf-head{display:grid;grid-template-columns:1.618fr 1fr;gap:var(--s55);align-items:end;
margin-bottom:var(--s55)}
.console-fold h2.big{color:#fff}
.console-fold h2.big em{font-style:normal;color:var(--primary)}
.console-fold .lead{color:var(--dim-anchor);margin:0}
.v4-panel{border:1px solid var(--anchor-line);border-radius:var(--r-md);
background:var(--anchor-2);overflow:hidden}
.v4-tabs{display:flex;border-bottom:1px solid var(--anchor-line);overflow-x:auto;scrollbar-width:none}
.v4-tabs::-webkit-scrollbar{display:none}
.v4-tab{flex:none;background:none;border:none;cursor:pointer;font-family:var(--display);
font-size:var(--f-micro);font-weight:700;color:var(--dim-anchor);padding:var(--s13) var(--s21);
min-height:47px;border-bottom:2px solid transparent;white-space:nowrap;
transition:color .2s ease,background .2s ease}
.v4-tab:hover{color:var(--on-anchor);background:rgba(255,255,255,.04)}
.v4-tab[aria-selected="true"]{color:var(--anchor);background:var(--primary);border-bottom-color:var(--primary)}
.v4-body{padding:var(--s34)}
.v4-meta{display:flex;align-items:baseline;gap:var(--s13);flex-wrap:wrap;margin-bottom:var(--s21)}
.v4-meta b{font-size:var(--f-h3);letter-spacing:-.035em;color:#fff}
.v4-meta span{font-size:var(--f-micro);color:var(--dim-anchor)}
.v4-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s21);
padding-bottom:var(--s21);border-bottom:1px solid var(--anchor-line)}
.v4-stat .v{display:block;font-size:var(--f-h2s);font-weight:800;letter-spacing:-.045em;
line-height:1;font-variant-numeric:tabular-nums;color:#fff}
.v4-stat .v u{text-decoration:none;color:var(--primary)}
.v4-stat .l{display:block;font-size:var(--f-micro);color:var(--dim-anchor);margin-top:var(--s8);line-height:1.4}
.v4-stat .d{display:inline-flex;font-size:var(--f-micro);font-weight:700;color:var(--primary);margin-top:var(--s5)}
.v4-chart{margin-top:var(--s21)}
.v4-chart .ttl{display:flex;justify-content:space-between;align-items:baseline;
font-size:var(--f-micro);color:var(--dim-anchor);margin-bottom:var(--s13)}
.v4-bars{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--s8);
align-items:stretch;height:144px}
.v4-bar{display:grid;grid-template-rows:1fr auto auto;gap:var(--s5);justify-items:center;height:100%}
.v4-bar .fill{width:100%;max-width:47px;border-radius:5px 5px 0 0;align-self:end;
background:linear-gradient(var(--primary),var(--primary-text));min-height:5px;
transition:height .5s var(--ease)}
.v4-bar.peak .fill{background:linear-gradient(var(--accent),var(--accent-text))}
.v4-bar .n{font-size:var(--f-micro);font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.v4-bar .m{font-size:var(--f-micro);color:var(--dim-anchor)}
.v4-note{font-size:var(--f-micro);color:var(--dim-anchor);margin-top:var(--s21);
padding-top:var(--s13);border-top:1px solid var(--anchor-line);line-height:1.5;max-width:82ch}
.v4-note b{color:#fff}
@media(max-width:1000px){
.cf-head{grid-template-columns:1fr;gap:var(--s21)}
.v4-stats{grid-template-columns:1fr;gap:var(--s13)}
.v4-body{padding:var(--s21)}
}
/* ---------------- subtle motion, one family ----------------
Everything below is opacity/transform only, exponential ease-out, and every
element is already visible without it (see .rv failsafe in the page script). */
@media (prefers-reduced-motion:no-preference){
/* form fields settle in when the hero arrives */
.v2-form .f,.v2-form .go,.v2-form .trust{animation:riseIn .7s var(--ease) both}
.v2-form .f:nth-of-type(1){animation-delay:.24s}
.v2-form .f:nth-of-type(2){animation-delay:.30s}
.v2-form .f:nth-of-type(3){animation-delay:.36s}
.v2-form .f:nth-of-type(4){animation-delay:.42s}
.v2-form .go{animation-delay:.48s}
.v2-form .trust{animation-delay:.54s}
/* the live dot breathes — the only looping motion besides the ticker */
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 4px rgba(21,209,108,.16)}
50%{box-shadow:0 0 0 8px rgba(21,209,108,.05)}}
.v2-badge i{animation:pulseDot 2.6s var(--ease) infinite}
/* console tab change: the numbers acknowledge the click */
@keyframes statIn{from{opacity:0;transform:translate3d(0,7px,0)}to{opacity:1;transform:none}}
.v4-stat{animation:statIn .42s var(--ease) both}
.v4-stat:nth-child(2){animation-delay:.06s}
.v4-stat:nth-child(3){animation-delay:.12s}
/* work cards lift on approach */
.v2-card figure{transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.v2-card:hover figure{transform:translateY(-5px);box-shadow:0 34px 70px -30px rgba(6,34,42,.45)}
/* proof figures count in visually via a short slide, not a JS counter */
.v2-proof .n{transition:transform .5s var(--ease)}
.v2-proof article:hover .n{transform:translateX(3px)}
}
/* ---- showcase: authored cards, external links, no internal page ----
Not a post type: {{items:}} only ever links inward, and the requirement is a
link to the client's own site. */
.sc-group{margin-top:var(--s55)}
.sc-group-h{font-family:var(--mono);font-size:var(--f-xs);letter-spacing:.14em;
text-transform:uppercase;color:var(--dim);margin:0 0 var(--s21);max-width:none}
.sc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
gap:var(--s34) var(--s21)}
.site-card{display:flex;flex-direction:column;min-width:0}
.site-card .shot{border:1px solid var(--sand-line);border-radius:var(--r-md) var(--r-md) 0 0;
overflow:hidden;background:#fff;aspect-ratio:1 / var(--rect);display:block}
.site-card .sc-shot{display:block;width:100%;height:100%;
object-fit:cover;object-position:top center}
.sc-pending{height:100%;display:grid;place-items:center;background:var(--sand-2);
font-family:var(--mono);font-size:var(--f-xs);color:var(--body);text-align:center;padding:var(--s13)}
.site-card .visit{display:flex;align-items:center;justify-content:center;gap:var(--s8);
background:var(--primary);color:var(--on-primary);border:1px solid var(--primary-text);
border-top:none;border-radius:0 0 var(--r-md) var(--r-md);
font-family:var(--mono);font-size:var(--f-xs);font-weight:500;min-height:44px;
text-decoration:none;transition:background .15s ease;word-break:break-all;padding:0 var(--s8)}
.site-card .visit:hover{background:#2ee07f}
.site-card .nm{display:block;font-size:var(--f-body);font-weight:800;letter-spacing:-.02em;
margin-top:var(--s13);color:var(--ink);order:-1}
.site-card{position:relative}
.site-card .nm{order:3;margin-top:var(--s13)}
/* ---- the engine's spam honeypot ----
Form::renderForm() emits and
expects the THEME to hide it. Unstyled it rendered as the only visible field
on the live form, so a real visitor filling it was scored as spam. */
.mcms-form input[name="mcms_website"],
.mcms-form label:has(input[name="mcms_website"]){
position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* ---- the engine's menu ----
{{menu:main}} renders , not the
this stylesheet was written for, so every nav rule
matched nothing and the header links rendered as browser defaults. */
header.site nav[aria-label]{display:flex;gap:var(--s5);align-items:center;
margin-left:auto;margin-right:var(--s21)}
header.site nav[aria-label] a{color:var(--dim-anchor);text-decoration:none;
font-size:var(--f-body);font-weight:500;min-height:44px;
display:inline-flex;align-items:center;padding:0 11px;border-radius:var(--r-sm)}
header.site nav[aria-label] a:hover,
header.site nav[aria-label] a[aria-current]{color:var(--on-anchor);
background:rgba(255,255,255,.05)}
@media(max-width:1000px){header.site nav[aria-label]{display:none}}
/* ---- engine-rendered forms (contract §51.4) ----
Form::renderForm() emits its own markup and discards whatever the bundle
shipped, so these eight classes are the only hooks that exist. .mcms-form-msg
is the one that gets forgotten; .mcms-ok / .mcms-err are modifiers on it. */
.mcms-form{background:#fff;border:1px solid var(--sand-line);border-radius:var(--r-lg);
padding:var(--s34);box-shadow:0 34px 70px -34px rgba(6,34,42,.35);display:grid;gap:var(--s13)}
.mcms-field{display:grid;gap:var(--s5)}
.mcms-field label{font-size:var(--f-sm);font-weight:700;color:var(--body)}
.mcms-field input,.mcms-field select,.mcms-field textarea{width:100%;font-family:var(--display);
font-size:var(--f-body);padding:var(--s13);border:1.5px solid var(--line);
border-radius:var(--r-sm);background:var(--paper);color:var(--ink);min-height:var(--s55)}
.mcms-field input:focus,.mcms-field select:focus,.mcms-field textarea:focus{
border-color:var(--primary);background:#fff;outline:none;box-shadow:0 0 0 4px rgba(21,209,108,.14)}
.mcms-field--textarea textarea{min-height:110px;resize:vertical}
.mcms-field--checkbox,.mcms-check{display:flex;align-items:center;gap:var(--s8);font-size:var(--f-body)}
.mcms-check input{width:auto;min-height:auto}
.mcms-hint{font-size:var(--f-sm);color:var(--dim);line-height:1.5}
.mcms-submit{display:inline-flex;align-items:center;justify-content:center;gap:var(--s8);
width:100%;background:var(--primary);color:var(--on-primary);border:1px solid var(--primary-text);
border-radius:var(--r-sm);padding:var(--s13) var(--s21);min-height:var(--s55);
font-family:var(--display);font-weight:700;font-size:var(--f-body);cursor:pointer}
.mcms-submit:hover{background:#2ee07f}
.mcms-form-msg{font-size:var(--f-body);padding:var(--s13);border-radius:var(--r-sm);line-height:1.5}
.mcms-form-msg.mcms-ok{background:rgba(21,209,108,.12);color:var(--primary-text);
border:1px solid var(--primary-text)}
.mcms-form-msg.mcms-err{background:rgba(217,164,65,.14);color:var(--accent-text);
border:1px solid var(--accent-text)}
/* ---- showcase filter: radios + sibling combinator, no JavaScript ----
The sanitiser breaks page scripts, so the filter and the dynamic heading
are CSS. Radios stay focusable (offscreen, not display:none) and the chips
are real