/* JETCHARGE web proposal — Neutral variant (Phase J)
Matches the PDF palette: near-white surfaces, cool-charcoal text,
neutral-charcoal dark surfaces. Cover keeps its warm backdrop image
for the photographic moment, but interior pages read crisp and
business-grade — the editorial cream was distracting from the
proposal content. */
/* Self-hosted webfonts (latin subset, variable weight axis). Served
from the asset pipeline rather than Google Fonts so the proposal
loads no third-party resources — keeps customer IPs off Google's
servers and clears the SonarCloud SRI finding on the external
. Propshaft digests these url() refs at precompile. The
unicode-range matches Google's latin subset (covers Latin-1
accents, ™, € and common punctuation). */
@font-face {
font-family: "Sora";
font-style: normal;
font-weight: 100 800;
font-display: swap;
src: url("/assets/proposal/sora-latin-9b0855ce.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("/assets/proposal/inter-latin-496a588b.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "JetBrains Mono";
font-style: normal;
font-weight: 100 800;
font-display: swap;
src: url("/assets/proposal/jetbrains-mono-latin-77c7bd91.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Brand v2.1 typefaces — GC Gambio (display) + Figtree (body), shared
with the PDF/share surfaces (jetcharge.css). Referenced from the
app/assets/fonts load path so Propshaft digests them; Sora/Inter stay
above as fallbacks. */
@font-face {
font-family: "GC Gambio";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("/assets/jetcharge/gambio-sans-286b097b.ttf") format("truetype");
}
@font-face {
font-family: "Figtree";
font-style: normal;
font-weight: 300 900;
font-display: swap;
src: url("/assets/jetcharge/figtree-89352678.ttf") format("truetype");
}
@font-face {
font-family: "Figtree";
font-style: italic;
font-weight: 300 900;
font-display: swap;
src: url("/assets/jetcharge/figtree-italic-cdc1fc1e.ttf") format("truetype");
}
:root {
/* ── Brand v2.1 — exact brand-guideline palette (unified with the
PDF/share jetcharge.css). ──────────────────────────────────── */
--orange: #FF4E17; /* Tangerine / JET Orange — primary */
--orange-2: #FF6B2C; /* mid tangerine, gradient only */
--amber: #FFAF22; /* Solar Yellow — gradient partner + highlights */
--amber-soft: #FFCB6B; /* soft yellow tint */
--grey: #ADADAD; /* neutral brand grey */
/* Surfaces — clean white working pages per guidelines */
--paper: #FFFFFF; /* primary body surface */
--paper-2: #F6F6F7; /* sub-surface for cards / strips */
--paper-edge: #E4E4E6; /* dividers */
/* Text — near-black #262626 is the brand "black", never pure #000 */
--ink-900: #262626; /* headings on light */
--ink-800: #333333; /* body on light */
--ink-700: #555555; /* mid emphasis */
--ink-600: #767676; /* secondary */
--ink-500: #ADADAD; /* captions / meta — brand grey */
--white: #FFFFFF;
--lime: #C6FF34; /* Acid Lime — sparing accent only */
/* Near-black dark surface (cover backdrop, dialog interior). */
--warm-dark: #262626;
--warm-dark-fg: #F5F5F5;
/* Signature grain — fine monochrome noise layered over the gradient. */
--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.07'/%3E%3C/svg%3E");
/* Signature gradient — freeform "lit" orange→yellow with a cool grey
fade + grain, matching the PDF hero. NOT a clean linear ramp. */
--power:
var(--grain),
radial-gradient(120% 90% at 12% 88%, #FFAF22 0%, rgba(255,175,34,0) 45%),
radial-gradient(120% 110% at 50% 40%, #FF4E17 0%, rgba(255,78,23,0) 60%),
radial-gradient(90% 90% at 92% 18%, #ADADAD 0%, rgba(173,173,173,0) 50%),
linear-gradient(0deg, #FF4E17, #FF4E17);
/* Lightning-bolt hero device (white layered, for the gradient cover). */
--bolt-white: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20360%20480%22%20fill%3D%22none%22%3E%3Cg%20fill%3D%22%23FFFFFF%22%3E%3Cpath%20d%3D%22M196%200%20L56%20300%20L146%20300%20L114%20480%20L300%20216%20L196%20216%20Z%22%20transform%3D%22translate%28-44%208%29%20scale%280.86%29%22%20opacity%3D%220.10%22%2F%3E%3Cpath%20d%3D%22M196%200%20L56%20300%20L146%20300%20L114%20480%20L300%20216%20L196%20216%20Z%22%20transform%3D%22translate%286%204%29%20scale%280.93%29%22%20opacity%3D%220.24%22%2F%3E%3Cpath%20d%3D%22M196%200%20L56%20300%20L146%20300%20L114%20480%20L300%20216%20L196%20216%20Z%22%20transform%3D%22translate%2840%200%29%20scale%281%29%22%20opacity%3D%220.92%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
/* Gradient-filled lightning bolt (for light / near-black sections where
a white bolt would vanish). */
--bolt-gradient: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%20480%22%20fill%3D%22none%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22jcbg%22%20x1%3D%220.1%22%20y1%3D%220%22%20x2%3D%220.9%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23FFAF22%22%2F%3E%3Cstop%20offset%3D%220.55%22%20stop-color%3D%22%23FF4E17%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23FF4E17%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M196%200%20L56%20300%20L146%20300%20L114%20480%20L300%20216%20L196%20216%20Z%22%20transform%3D%22translate%28-44%206%29%20scale%280.9%29%22%20fill%3D%22%23FF4E17%22%20opacity%3D%220.12%22%2F%3E%3Cpath%20d%3D%22M196%200%20L56%20300%20L146%20300%20L114%20480%20L300%20216%20L196%20216%20Z%22%20transform%3D%22translate%280%200%29%20scale%280.9%29%22%20fill%3D%22url%28%23jcbg%29%22%2F%3E%3C%2Fsvg%3E");
/* Brand fonts only — GC Gambio (display) + Figtree (body). No off-brand
named fallbacks (Sora/Inter/Segoe retired); system-ui is the only
non-brand safety net. */
--font-display: "GC Gambio","Figtree",system-ui,sans-serif;
--font-body: "Figtree",system-ui,sans-serif;
--font-mono: "JetBrains Mono",ui-monospace,Menlo,monospace;
--maxw: 1240px;
--gutter: clamp(20px, 4vw, 56px);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body.proposal-body{
font-family:var(--font-body);
color:var(--ink-800);
background:var(--paper);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
/* GC Gambio puts its showy ligatures (the "st" arch in "Australia",
plus ct/Th/tt) in the STANDARD `liga` feature — the font has no
dlig/calt — so `no-discretionary-ligatures` never touched them.
`none` is the only setting that kills them. Set here so every
descendant (headlines included) inherits; costs the fi/fl
ligatures in Figtree body text, which are invisible at body
sizes. Same fix applied to h1–h4 in layouts/print.html.erb. */
font-variant-ligatures:none;
line-height:1.5;
overflow-x:hidden;
}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:2px}
/* Type system */
.proposal-body .display{
font-family:var(--font-display);
font-weight:700;
letter-spacing:-0.025em;
/* GC Gambio carries deep descenders; sub-1.0 leading clipped the foot
of g/p/y. ≥1.04 gives the line box room to contain them. */
line-height:1.04;
padding-bottom:0.04em;
text-wrap:balance;
}
.proposal-body .eyebrow{
font-family:var(--font-body);
font-weight:600;
font-size:12px;
letter-spacing:0.18em;
text-transform:uppercase;
color:var(--orange);
display:inline-flex;
align-items:center;
gap:10px;
}
.proposal-body .eyebrow::before{
content:"";
width:24px;height:1px;background:var(--orange);
display:inline-block;
}
.proposal-body .wordmark{
font-family:var(--font-display);
font-weight:800;
letter-spacing:0.02em;
font-size:clamp(20px,2.4vw,30px);
}
.proposal-body .wordmark .dot{
display:inline-block;
width:.34em;height:.34em;
background:var(--orange);
border-radius:50%;
margin:0 .05em .12em .08em;
vertical-align:middle;
}
/* Cover — warm-brown dark surface */
.proposal-body #cover{
background:var(--warm-dark);
color:var(--warm-dark-fg);
min-height:100vh;
position:relative;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:clamp(28px,4vw,56px) var(--gutter);
overflow:hidden;
}
/* Backdrop photo (cover-backdrop.jpg, base64-inlined by the helper).
The same JC visual device used by the PDF cover. Layered: photo at
z=0, dark gradient overlay at z=1, flame accent + text at z=2. */
.proposal-body #cover .cover-bg{
position:absolute;inset:0;
width:100%;height:100%;
object-fit:cover;object-position:center center;
z-index:0;
/* Image rides at near-full opacity so the photo carries the
cover — the previous .55 + heavy gradient combination was
drowning the JC brand visual under a near-black wash. */
opacity:.95;
}
.proposal-body #cover .cover-bg-overlay{
position:absolute;inset:0;
/* Lighter, asymmetric gradient: image reads clean across the
top two-thirds; a soft warm-dark fade only at the bottom
where the title block sits, keeping white text legible
against the photo without smothering the rest of the frame. */
background: linear-gradient(180deg,
rgba(38, 38, 38, 0) 0%,
rgba(38, 38, 38, 0) 45%,
rgba(38, 38, 38, .35) 75%,
rgba(38, 38, 38, .65) 100%);
z-index:1;
}
.proposal-body #cover.has-backdrop .top,
.proposal-body #cover.has-backdrop .cover-title,
.proposal-body #cover.has-backdrop .center,
.proposal-body #cover.has-backdrop .bottom{position:relative;z-index:2}
/* Brand-preferred cover (no customer photo): freeform orange→yellow
grain gradient + the layered lightning-bolt hero device. Mirrors the
PDF cover (§8). */
.proposal-body #cover.cover--gradient{ background:var(--power); background-size:cover; }
.proposal-body #cover.cover--gradient .top,
.proposal-body #cover.cover--gradient .cover-title,
.proposal-body #cover.cover--gradient .center,
.proposal-body #cover.cover--gradient .bottom{position:relative;z-index:2}
/* Layered lightning bolt, white, cropped off the top-right edge. */
.proposal-body #cover .cover-bolt{
position:absolute;
top:-6%; right:-6%;
width:48%; height:86%;
background:var(--bolt-white) no-repeat center/contain;
z-index:1;
pointer-events:none;
}
/* On the orange field the orange site-name would vanish — set it white
(the italic still distinguishes it from the "EV charging for" lead). */
.proposal-body #cover.cover--gradient .cover-headline em{ color:var(--white); }
/* Phase J cover-title block — sits in the lower-third over the
backdrop photo. Replaces the previous gigantic "Peace of mind"
headline with the PDF-matching "EV charging for {site}" pattern.
(min-height:100vh is already set on #cover in the base rule above,
giving the title block a known viewport anchor.) */
.proposal-body #cover .cover-title{
margin-top:auto;
max-width:var(--maxw);
width:100%;
display:flex;flex-direction:column;gap:14px;
color:var(--warm-dark-fg);
padding-bottom: 8px;
}
.proposal-body #cover .cover-title .kicker{
font-family:var(--font-mono);font-size:11px;letter-spacing:.32em;
text-transform:uppercase;color:var(--orange);font-weight:700;
}
.proposal-body #cover .cover-headline{
font-family:var(--font-display);font-weight:700;
letter-spacing:-0.022em;line-height:1.08;
font-size:clamp(36px, 5.4vw, 76px);
max-width:18ch;text-wrap:balance;
margin:0;color:var(--warm-dark-fg);
}
.proposal-body #cover .cover-headline em{
font-style:italic;color:var(--orange-2);
}
.proposal-body #cover .attribution{
font-family:var(--font-body);font-size:clamp(15px,1.2vw,18px);
color:rgba(245,245,245,.82);margin:4px 0 0;max-width:64ch;
}
.proposal-body #cover .attribution strong{
color:var(--warm-dark-fg);font-weight:600;
}
.proposal-body #cover .top,
.proposal-body #cover .bottom{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:24px;
font-size:11px;
letter-spacing:0.32em;
text-transform:uppercase;
color:rgba(247,234,211,.55);
font-family:var(--font-display);
font-weight:700;
position:relative;
z-index:1;
}
.proposal-body #cover .top .meta{
display:flex;
gap:24px;
flex-wrap:wrap;
align-items:baseline;
}
.proposal-body #cover .cover-brand{
display:flex;align-items:center;
}
.proposal-body #cover .cover-brand-logo{
display:block;
/* Matches the PDF cover's "shrunk-to-fit" lockup height —
readable as the JC brand without dominating the title block. */
height: clamp(28px, 3.2vw, 44px);
width: auto;
}
.proposal-body #cover .top .meta b{
color:var(--warm-dark-fg);
letter-spacing:0.12em;
margin-left:8px;
font-family:var(--font-mono);
font-weight:500;
}
.proposal-body #cover .center{
max-width:var(--maxw);
width:100%;
margin:0 auto;
display:flex;
flex-direction:column;
gap:24px;
padding:clamp(40px,8vw,120px) 0;
position:relative;
z-index:1;
}
.proposal-body #cover h1{
font-family:var(--font-display);
font-weight:700;
letter-spacing:-0.025em;
line-height:0.98;
font-size:clamp(48px,7.4vw,112px);
color:var(--warm-dark-fg);
max-width:18ch;
text-wrap:balance;
margin:0;
}
.proposal-body #cover h1 em{
font-style:italic;
color:var(--orange-2);
}
.proposal-body #cover .sub{
font-size:clamp(17px,1.4vw,22px);
line-height:1.45;
color:rgba(247,234,211,.82);
max-width:60ch;
margin:0;
}
.proposal-body #cover .bottom .left{
display:flex;
flex-direction:column;
gap:14px;
}
.proposal-body #cover .bottom .right-meta{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:6px;
text-align:right;
}
.proposal-body #cover .bottom .right-meta .label{
opacity:.55;
}
.proposal-body #cover .bottom .right-meta b{
color:var(--warm-dark-fg);
letter-spacing:0.06em;
text-transform:none;
font-family:var(--font-body);
font-weight:600;
font-size:13px;
}
.proposal-body #cover .scrollhint{
color:rgba(247,234,211,.45);
font-size:10px;
letter-spacing:0.4em;
}
/* Lightning-bolt section accent (brand v2.1) — replaces the retired
flame/sail. Cropped off the top-right corner. One device per view.
--white on dark/gradient sections, --gradient on light sections. */
.proposal-body .section-bolt{
position:absolute;
top:-4%;
right:-3%;
width:clamp(180px,24vw,380px);
height:clamp(220px,40vh,520px);
background-repeat:no-repeat;
background-position:top right;
background-size:contain;
pointer-events:none;
z-index:0;
}
.proposal-body .section-bolt--white{ background-image:var(--bolt-white); opacity:.9; }
/* Provided brand zap imagery (orange-gradient layered bolt) — replaces the
hand-rolled approximation. The SVG carries its own layered translucency. */
.proposal-body .section-bolt--gradient{ background-image:url("/assets/jetcharge/lightning-gradient-e36b12b6.svg"); opacity:.95; }
.proposal-body .section-bolt--lime{ background-image:url("/assets/jetcharge/lightning-lime-d020ed38.svg"); opacity:.95; }
/* Section shell ─────────────────────────────────────── */
.proposal-body section{
position:relative;
padding: clamp(72px, 9vw, 140px) var(--gutter);
}
.proposal-body .wrap{max-width:var(--maxw);margin:0 auto;position:relative}
.proposal-body .section-head{
display:flex;flex-direction:column;gap:14px;
margin-bottom: clamp(40px, 5vw, 72px);
}
.proposal-body .h2{font-size:clamp(36px,5.2vw,76px);line-height:1.1;letter-spacing:-0.022em;padding-bottom:0.04em}
.proposal-body .h3{font-size:clamp(22px,2.2vw,30px);line-height:1.15;letter-spacing:-0.012em}
.proposal-body .lead{
font-size:clamp(17px,1.4vw,20px);
line-height:1.55;
color:var(--ink-700);
max-width:62ch;
}
.proposal-body .hair{height:1px;background:rgba(38,38,38,.20);border:0;margin:24px 0 40px}
.proposal-body .kicker-line{
color:var(--orange);
font-family:var(--font-display);
font-weight:600;
font-size:clamp(18px,1.6vw,22px);
letter-spacing:-0.01em;
}
/* 02 OPENING ─────────────────────────────────────────── */
.opening .grid{
display:grid;grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: clamp(40px, 6vw, 96px);
align-items:start;
}
.opening h2{margin:8px 0 28px}
.opening .body p{font-size:18px;line-height:1.6;max-width:54ch;color:var(--ink-800)}
.opening .body p + p{margin-top:18px}
/* 03 STATS — paper surface, ink-on-cream ─────────────── */
.stats .row{
display:grid;
grid-template-columns: repeat(5, minmax(0,1fr));
gap: 0;
border-top:1px solid rgba(38,38,38,.20);
}
.stats .cell{
padding: 36px 24px 28px;
border-right:1px solid rgba(38,38,38,.20);
display:flex;flex-direction:column;gap:14px;
min-height: 240px;
}
.stats .cell:last-child{border-right:0}
.stats .cell .num{
font-family:var(--font-display);
font-weight:700;
font-size: clamp(30px, 3vw, 48px);
letter-spacing:-0.035em;
line-height:1.14;
padding:0.04em 0;
color:var(--ink-900);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.stats .cell.surprise .num{
background: var(--power);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.stats .lbl{
font-size:13px;letter-spacing:.04em;
color:var(--ink-600);
max-width: 20ch;
margin-top:auto;
}
@media (max-width: 880px){
.stats .row{grid-template-columns: 1fr 1fr; border-top:0}
.stats .cell{
border-right:0;
border-top:1px solid rgba(38,38,38,.20);
min-height:auto;padding:28px 0;
}
.stats .cell:nth-child(odd){
padding-right:24px;
border-right:1px solid rgba(38,38,38,.20);
}
}
/* 04 DIFFERENCE — pillar cards ───────────────────────── */
.diff .pillars{
display:grid;grid-template-columns: repeat(5, minmax(0,1fr));
gap:0;
border-top:1px solid rgba(38,38,38,.20);
}
.diff .pcard{
padding: 28px 24px 32px;
border-right:1px solid rgba(38,38,38,.20);
display:flex;flex-direction:column;gap:14px;
min-height: 280px;
}
.diff .pcard:last-child{border-right:0}
.chip{
display:inline-flex;align-items:center;
align-self:flex-start;
background:var(--orange);color:#fff;
font-family:var(--font-mono);
font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
padding: 5px 10px;border-radius: 3px;font-weight:500;
}
.diff .pcard h3{
font-family:var(--font-display);font-weight:700;
font-size:22px;line-height:1.15;letter-spacing:-0.012em;
margin:6px 0 4px;color:var(--ink-900);
text-wrap:balance;
}
.diff .pcard p{margin:0;color:var(--ink-600);font-size:14.5px;line-height:1.5}
.diff .pcard .pnum{
font-family:var(--font-mono);font-size:11px;color:var(--ink-500);
letter-spacing:.12em;margin-top:auto;
}
@media (max-width: 1020px){
.diff .pillars{grid-template-columns: 1fr 1fr}
.diff .pcard{
border-right:0;
border-top:1px solid rgba(38,38,38,.20);
min-height:auto;padding:24px 0;
}
.diff .pcard:nth-child(odd){
padding-right:24px;
border-right:1px solid rgba(38,38,38,.20);
}
}
/* Photo break — full-bleed dark interstitial ─────────── */
.photo-break{
position:relative;
height: clamp(440px, 62vh, 720px);
overflow:hidden;
padding: 0;
background: var(--warm-dark);
color: #fff;
}
.photo-break img{
position:absolute; inset:0;
width:100%; height:100%;
object-fit:cover;
object-position: 30% 35%;
}
.photo-break-overlay{
position:absolute; inset:0;
background:
linear-gradient(95deg,
rgba(27,17,8,.78) 0%,
rgba(27,17,8,.55) 32%,
rgba(27,17,8,.12) 68%,
rgba(27,17,8,0) 100%),
linear-gradient(180deg,
rgba(27,17,8,.25) 0%,
rgba(27,17,8,0) 35%,
rgba(27,17,8,0) 60%,
rgba(27,17,8,.55) 100%);
display:flex; align-items:flex-end;
padding: clamp(40px, 6vw, 96px) var(--gutter);
}
.photo-break .caption{
max-width: var(--maxw);
margin: 0 auto;
width: 100%;
position:relative;
z-index:1;
}
.photo-break .eyebrow{ color: var(--amber); }
.photo-break .display{
font-family:var(--font-display); font-weight:700;
font-size: clamp(34px, 4.4vw, 68px);
letter-spacing:-0.025em; line-height:1.16;
margin: 16px 0 0;
color:#fff;
text-wrap:balance;
max-width: 22ch;
}
.photo-break .display em{
font-style:normal;
background: var(--power);
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent; color:transparent;
}
.photo-break .corner-tag{
position:absolute;
top: clamp(20px, 3vw, 40px); right: var(--gutter);
font-family: var(--font-mono); font-size: 11px;
letter-spacing: .18em; color: rgba(255,255,255,.55);
text-transform: uppercase;
}
/* 05 END-TO-END ──────────────────────────────────────── */
.endto .cols{
display:grid;grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 1px solid rgba(38,38,38,.20);
}
.endto .col{
padding: 32px 28px 24px;
border-right:1px solid rgba(38,38,38,.20);
}
.endto .col:last-child{border-right:0}
.endto .col .step{
font-family:var(--font-mono);font-size:11px;
letter-spacing:.18em;color:var(--orange);text-transform:uppercase;
}
.endto .col h3{
font-family:var(--font-display);font-weight:700;
font-size:26px;letter-spacing:-0.012em;
margin:14px 0 18px;color:var(--ink-900);
}
.endto .col ul{
list-style:none;padding:0;margin:0;
color:var(--ink-700);
font-size:15px;line-height:1.7;
}
.endto .col li{padding-left:18px;position:relative}
.endto .col li::before{
content:"";position:absolute;left:0;top:11px;
width:6px;height:6px;border-radius:50%;
background:var(--orange);
}
.endto .bottomline{
margin-top:48px;text-align:center;
}
@media (max-width:900px){
.endto .cols{grid-template-columns: 1fr; border-top:0}
.endto .col{
border-right:0;
border-top:1px solid rgba(38,38,38,.20);
padding:28px 0;
}
}
/* 06 YOUR SITE — neutral light surface (Phase J) ─ */
.site{
background:var(--paper);
color:var(--ink-800);
overflow:hidden;
}
.site h2{color:var(--ink-900) !important}
.site .stage{
position:relative;
display:grid;grid-template-columns: 1fr;
gap: 0;
margin-top: 24px;
}
.site .frame{
position:relative;
aspect-ratio: 16/10;
/* Frame stays dark so the radial-map SVG (white-text labels +
light-stroke grid lines, designed against a dark surface) reads
correctly. The surrounding section keeps its light paper from
Phase J — the frame is the only dark moment. */
background:var(--ink-900);
border:1px solid var(--paper-edge);
border-radius: 4px;
overflow:hidden;
min-height: 380px;
}
/* Live site map (web proposal) — full-bleed + tall so the real aerial site
plan is the section hero. Breaks out of the centred .wrap to 100vw; the
map canvas fills the frame and the corner tag overlays it. No map controls
(the read-only Stimulus controller disables zoom/drag/scroll). */
.site .frame--map{
/* Transform-free full-bleed: width:100vw + margin-left:calc(50% - 50vw)
aligns the element's centre with the (centred) .wrap's centre, so it
spans the viewport edge-to-edge regardless of the wrap width. The old
margin-left:50% + translateX(-50%) version left the map shifted right of
the viewport (it offset by the wrap's gutter, not the true centre), which
pushed the centred site plan off to the right. A CSS transform on the map
parent also throws Leaflet's pane maths. */
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
height: clamp(460px, 66vh, 780px);
min-height: 0;
border-left: 0;
border-right: 0;
border-radius: 0;
}
.site .site-map-canvas{
position: absolute;
inset: 0;
height: 100%;
width: 100%;
}
/* Depth treatment — isometric/3D tiles aren't available in Leaflet's 2D
raster renderer, so we fake depth on the flat satellite view: a soft
radial vignette + edge gradients + an inset shadow lift the centre (where
the site plan sits) and sink the edges. pointer-events:none so it never
blocks the map; sits under the corner-tag (z-index 6). */
.site .frame--map::after{
content:"";
position:absolute;inset:0;z-index:5;pointer-events:none;
background:
radial-gradient(120% 95% at 50% 46%, transparent 52%, rgba(0,0,0,0.26) 100%),
linear-gradient(to bottom, rgba(0,0,0,0.20) 0%, transparent 14%, transparent 84%, rgba(0,0,0,0.16) 100%);
box-shadow: inset 0 0 70px rgba(0,0,0,0.28);
}
/* Keep Leaflet's attribution quiet + on-brand, no zoom buttons remain. */
.site .frame--map .leaflet-control-attribution{
font-size: 9px;
background: rgba(0, 0, 0, .4);
color: rgba(255, 255, 255, .6);
}
.site .frame--map .leaflet-control-attribution a{ color: rgba(255, 255, 255, .75); }
/* Map-view placeholder — shown when the quote wasn't drawn on the planner.
Dark frame so it reads as a "viewport" rather than a missing image. */
.site .frame-placeholder{
display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;
padding: 48px 32px;
}
.site .map-placeholder{
max-width: 480px;
display:flex;flex-direction:column;align-items:center;gap:18px;
}
.site .map-placeholder-icon{
width:64px;height:64px;
color:rgba(255,255,255,.35);
}
.site .map-placeholder-title{
font-family:var(--font-display);font-weight:700;
font-size:22px;letter-spacing:-0.01em;
color:rgba(255,255,255,.95);
margin:0;
}
.site .map-placeholder-sub{
font-size:14px;line-height:1.55;
color:rgba(255,255,255,.6);
margin:0;max-width:42ch;
}
.site .map-placeholder-sub strong{
color:rgba(255,255,255,.85);font-weight:600;
}
.site .corner-tag{
position:absolute;top:14px;left:14px;z-index:6;
font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;
color:rgba(255,255,255,.7);text-transform:uppercase;
background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.14);
padding:6px 10px;border-radius:2px;
display:flex;align-items:center;gap:8px;
}
.site .corner-tag .blip{
width:6px;height:6px;border-radius:50%;
background:var(--orange);
box-shadow:0 0 8px var(--orange);
}
.site svg.map{
position:absolute;inset:0;width:100%;height:100%;display:block;
}
.site .panel{
/* auto-fit so the key-facts strip reads intentionally whether it holds
two facts (one charger model + capacity) or several (multi-model +
capacity + range-added). Sits ABOVE the map as the section's lede. */
display:grid;grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 0;
border-top: 1px solid var(--paper-edge);
padding: 0;
background: transparent;
margin-top: 0;
}
/* Facts strip caps each stat so one or two facts read as a tidy strip,
left-aligned, rather than stretching edge-to-edge. */
.site .panel--facts{
grid-template-columns: repeat(auto-fit, minmax(190px, 260px));
justify-content:start;
}
.site .panel--facts .stat .l{ text-transform:none; }
/* "Up to" qualifier on the range-added stat — small, quiet, sits before
the figure so the number stays the hero. */
.site .panel .stat .v .pre{
font-family:var(--font-mono);font-weight:500;
font-size:13px;letter-spacing:.04em;color:var(--ink-500);
align-self:center;
}
/* Charger identity line(s) — sit above the map as the section lede.
"1× Autel AC Single … · 22 kW per charging bay". */
/* Charger facts — one row per charger model + the "up to" range stat. Lives
in the Charger overview, against the charger (not by the site map). */
.charger-overview .charger-facts{
margin:28px 0 0;padding:28px 0 0;
border-top:1px solid var(--paper-edge);
display:flex;flex-direction:column;gap:18px;
}
.charger-overview .charger-fact{
display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
}
.charger-overview .cf-qty{
font-family:var(--font-display);font-weight:700;
font-size:38px;line-height:1.1;letter-spacing:-0.02em;
color:var(--ink-900);font-variant-numeric:tabular-nums;padding-bottom:0.02em;
}
.charger-overview .cf-x{ font-size:22px;color:var(--ink-500);margin-left:3px; }
.charger-overview .cf-meta{ display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap; }
.charger-overview .cf-name{
font-family:var(--font-display);font-weight:600;
font-size:clamp(20px,2vw,28px);letter-spacing:-0.01em;color:var(--ink-900);
}
.charger-overview .cf-kw{
font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
text-transform:uppercase;color:var(--orange);
padding:5px 12px;border:1px solid var(--paper-edge);border-radius:999px;
background:var(--paper-2);
}
.charger-overview .charger-range{
display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
padding-top:4px;
}
.charger-overview .cr-pre{
font-family:var(--font-mono);font-size:13px;color:var(--ink-500);align-self:center;
}
.charger-overview .cr-v{
font-family:var(--font-display);font-weight:700;
font-size:clamp(34px,3.4vw,48px);line-height:1.12;letter-spacing:-0.02em;
padding-bottom:0.02em;
background:var(--power);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.charger-overview .cr-unit{ font-size:15px;color:var(--ink-500);font-weight:500; }
.charger-overview .cr-label{
font-size:13px;color:var(--ink-600);align-self:center;margin-left:6px;
}
.site .panel .stat{
padding: 22px 24px 24px;
border-right: 1px solid var(--paper-edge);
display:flex;flex-direction:column;gap:6px;
}
.site .panel .stat:last-child{border-right:0}
.site .panel .stat .v{
font-family:var(--font-display);font-weight:700;
font-size: 36px;letter-spacing:-0.02em;color:var(--ink-900);line-height:1.12;
display:flex;align-items:baseline;gap:8px;
font-variant-numeric: tabular-nums;
}
.site .panel .stat .v .unit{
font-size:14px;color:var(--ink-500);
font-weight:500;letter-spacing:0;
}
.site .panel .stat .l{
font-size:12px;letter-spacing:.04em;color:var(--ink-600);
}
@media (max-width:780px){
.site .panel{grid-template-columns: 1fr 1fr}
.site .panel .stat{border-right:0;border-top:1px solid var(--paper-edge)}
.site .panel .stat:nth-child(odd){border-right:1px solid var(--paper-edge)}
}
/* 07 HARDWARE ─────────────────────────────────────────── */
.hw .cards{
display:grid;grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.hw .hwcard{
background:#fff;border-radius:4px;
border:1px solid rgba(38,38,38,.12);
overflow:hidden;
display:flex;flex-direction:column;
}
.hw .ph{
aspect-ratio: 4/3;
background:
repeating-linear-gradient(135deg, rgba(38,38,38,.05) 0 10px, rgba(38,38,38,.08) 10px 11px),
var(--paper-2);
display:flex;align-items:center;justify-content:center;
border-bottom:1px solid rgba(38,38,38,.08);
position:relative;
}
.hw .ph .ph-tag{
font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
color:var(--ink-600);
padding: 6px 10px;background:rgba(255,255,255,.7);
border:1px solid rgba(38,38,38,.10);
border-radius:2px;
text-align:center;
max-width: 90%;
}
.hw .hwcard .body{
padding: 22px 22px 24px;
display:flex;flex-direction:column;gap:10px;
}
.hw .hwcard h3{
font-family:var(--font-display);font-weight:700;
font-size:24px;letter-spacing:-0.014em;margin:0;color:var(--ink-900);
}
.hw .hwcard .meta{
display:flex;flex-wrap:wrap;gap:14px;align-items:center;
font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--ink-600);
padding-top:8px;border-top:1px solid rgba(38,38,38,.08);margin-top:6px;
}
.hw .hwcard .meta .mfr{
margin-left:auto;
background:transparent;color:var(--orange);border:1px solid var(--orange);
padding: 4px 8px;border-radius:2px;
font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
}
.hw .mfrs{
margin-top: 64px;
padding-top: 28px;
border-top:1px solid rgba(38,38,38,.20);
display:flex;flex-wrap:wrap;gap: 8px 28px;
font-family:var(--font-display);font-weight:600;
font-size:14px;letter-spacing:.04em;color:var(--ink-600);
text-transform:uppercase;
align-items:center;
}
.hw .mfrs .lbl{
font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;
color:var(--ink-500);
margin-right:8px;text-transform:uppercase;font-weight:500;
}
.hw .mfrs .sep{color:var(--ink-500)}
@media (max-width: 760px){
.hw .cards{grid-template-columns:1fr}
}
/* 08 SCOPE ────────────────────────────────────────────── */
.scope .cols{
display:grid;grid-template-columns: repeat(3,1fr);gap:0;
border-top:1px solid rgba(38,38,38,.20);
}
.scope .col{
padding: 32px 24px 32px 0;
border-right:1px solid rgba(38,38,38,.20);
}
.scope .col:last-child{border-right:0;padding-right:0}
.scope .col + .col{padding-left:24px}
.scope .step{
font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;color:var(--orange);
text-transform:uppercase;display:flex;align-items:center;gap:10px;
}
.scope .step .n{color:var(--ink-500);font-size:11px}
.scope .col h3{
font-family:var(--font-display);font-weight:700;
font-size:28px;letter-spacing:-0.012em;margin:14px 0 18px;
color:var(--ink-900);
}
.scope ul{
list-style:none;padding:0;margin:0;
color:var(--ink-800);
font-size:15px;line-height:1.65;
}
.scope li{padding-left:18px;position:relative;padding-top:4px;padding-bottom:4px}
.scope li::before{
content:"";position:absolute;left:0;top:13px;
width:6px;height:6px;border-radius:50%;
background:var(--orange);
}
@media (max-width:900px){
.scope .cols{grid-template-columns:1fr;border-top:0}
.scope .col{border-right:0;border-top:1px solid rgba(38,38,38,.20);padding:24px 0}
.scope .col + .col{padding-left:0}
}
/* Charger overview — single-charger spotlight (placeholder copy /
image until Charger model carries marketing fields). ─────────── */
.charger-overview{
background:var(--paper);
color:var(--ink-800);
}
/* One spotlight per recommended charger — divide stacked entries so a
multi-charger quote reads as distinct sections, not one run-on block. */
.charger-overview .charger-entry + .charger-entry{
margin-top:64px;padding-top:56px;border-top:1px solid var(--paper-edge);
}
.charger-overview .charger-headline{
font-size: clamp(34px, 4.2vw, 56px);
letter-spacing:-0.02em;line-height:1.05;
margin: 12px 0 8px;color:var(--ink-900);
max-width: 24ch;
}
/* Quantity folded into the headline — "10× Autel …". The × is de-emphasised. */
.charger-overview .charger-qty-x{ color:var(--ink-500);font-weight:500; }
.charger-overview .charger-subtitle{
font-family:var(--font-display);
font-weight:600;
font-size: clamp(18px, 1.8vw, 26px);
letter-spacing:-0.01em;line-height:1.25;
color: var(--orange);
margin: 0 0 24px;
max-width: 40ch;
}
.charger-overview .charger-paragraph{
font-size: clamp(15px, 1.2vw, 17px);
line-height:1.6;color:var(--ink-700);
max-width: 60ch;margin: 0 0 40px;
}
/* Each entry is a 2-col grid. The left column stacks the header (row 1) and the
spec table (row 2); the product gallery fills the right column and spans BOTH
rows, so the charger photo runs the full height of the header + specs and sits
high on the page next to the headline. */
.charger-entry{
display:grid;
/* LHS text/specs gets a bit more width and the gap tightens so the columns
read as balanced — the image no longer dwarfs the spec table. */
grid-template-columns: minmax(0, 1.1fr) minmax(440px, 1.3fr);
grid-template-rows: auto 1fr;
column-gap: 36px;
row-gap: 8px;
}
.charger-entry-text{ grid-column:1; grid-row:1; }
.charger-entry > .charger-specs{ grid-column:1; grid-row:2; align-self:start; }
.charger-entry > .charger-gallery{ grid-column:2; grid-row:1 / span 2; }
.charger-specs table{
width:100%;border-collapse:collapse;
font-size:15px;
}
.charger-specs th{
text-align:left;font-weight:600;
padding: 15px 18px;
background: var(--paper-2);
border-bottom: 1px solid var(--paper-edge);
vertical-align: top;
width: 38%;
color: var(--ink-900);
}
.charger-specs td{
padding: 15px 18px;
border-bottom: 1px solid var(--paper-edge);
vertical-align: top;
color: var(--ink-700);line-height:1.55;
}
.charger-specs tr:last-child th,
.charger-specs tr:last-child td{border-bottom:0}
.charger-specs .spec-label{display:block;color:var(--ink-900)}
.charger-specs .spec-sub{
display:block;color:var(--ink-600);font-weight:400;
font-size:12px;margin-top:2px;
}
.charger-image{
/* Flex item inside .charger-gallery: takes the gallery width left over by the
thumbnail strip, and centres the photo vertically within the full-height
gallery (which spans the header + specs rows). */
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
}
.charger-image img{
display: block;
/* No max-width — the image scales to whatever the grid column
gives it. Height derives naturally from the tight-trim's
~0.61:1 portrait aspect; max-height is a safety brake to
stop a very narrow column producing a freakishly tall image. */
width: 100%;
height: auto;
max-height: 900px;
object-fit: contain;
}
/* Specs-only variant — no product image. Single column; the spec table owns the
full row (capped width) instead of leaving a dead image column. */
.charger-entry--specs-only{grid-template-columns: minmax(0, 1fr)}
.charger-entry--specs-only > .charger-specs{max-width: 760px}
@media (max-width: 900px){
.charger-entry{grid-template-columns: 1fr;row-gap: 24px}
/* Stack: header, then the gallery, then specs. */
.charger-entry-text{order: 0}
.charger-entry > .charger-gallery{grid-column: 1;grid-row: auto;order: 1}
.charger-entry > .charger-specs{order: 2}
}
/* 09 INVESTMENT ───────────────────────────────────────── */
.invest .ptable{
margin-top: 8px;
border-top: 1px solid rgba(38,38,38,.22);
}
.invest .prow{
display:grid;
grid-template-columns: 1fr 90px 140px 160px;
align-items:baseline;
gap: 18px;
padding: 16px 0;
border-bottom: 1px solid rgba(38,38,38,.10);
}
.invest .prow.head{
font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
color:var(--ink-500);text-transform:uppercase;padding-bottom:14px;
}
.invest .prow .lbl{font-size:15.5px;color:var(--ink-800)}
.invest .prow .lbl .sub{
display:block;font-size:13px;color:var(--ink-600);margin-top:2px;
}
.invest .prow .qty,
.invest .prow .unit,
.invest .prow .tot{
font-family:var(--font-mono);text-align:right;
font-size:15px;color:var(--ink-800);
font-variant-numeric: tabular-nums;
}
.invest .prow .qty{font-size:13.5px;color:var(--ink-600)}
.invest .total{
display:grid;
grid-template-columns: 1fr 90px 140px 160px;
gap: 18px;
align-items:baseline;
padding: 22px 0 0;
margin-top: 6px;
border-top: 2px solid var(--orange);
}
.invest .total .lbl{
font-family:var(--font-display);font-weight:700;
font-size:22px;letter-spacing:-0.012em;
color:var(--ink-900);
}
.invest .total .tot{
font-family:var(--font-display);font-weight:700;
font-size:32px;letter-spacing:-0.018em;text-align:right;
color:var(--ink-900);
font-variant-numeric: tabular-nums;
}
.invest .opt-head{
margin-top: 56px;
font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;
color:var(--ink-500);text-transform:uppercase;
}
.invest .opt .prow{border-bottom-color: rgba(38,38,38,.06)}
.invest .opt .lbl{color:var(--ink-600)}
.invest .opt .tot{color:var(--ink-600)}
.invest .disclaim{
margin-top: 24px;
font-style:italic;color:var(--ink-600);font-size:13.5px;
}
@media (max-width: 720px){
.invest .prow, .invest .total{grid-template-columns: 1fr 70px 110px}
.invest .prow .unit{display:none}
}
/* PDF-parity invest cards (Phase J). Two side-by-side cards: capex
upfront on the left, opex recurring on the right when present.
Same content + ordering the PDF emits via Quotes::PdfPricingPresenter. */
.invest-cards{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
gap: 24px;
margin-top: 24px;
}
.invest-card{
background:var(--paper);
border:1px solid var(--paper-edge);
border-radius:6px;
padding: 28px 28px 24px;
}
.invest-card-header{
display:flex;align-items:baseline;justify-content:space-between;
gap:12px;
padding-bottom:14px;
border-bottom:1px solid var(--paper-edge);
margin-bottom:18px;
}
.invest-card-header h3{
font-family:var(--font-display);font-weight:700;
font-size:18px;letter-spacing:-0.01em;
color:var(--ink-900);margin:0;
}
.invest-card-sub{
font-size:12px;color:var(--ink-600);
}
.invest-group{margin-bottom: 18px}
.invest-group:last-child{margin-bottom:0}
.invest-group-row{
display:flex;align-items:baseline;justify-content:space-between;gap:12px;
}
.invest-group-label{
font-family:var(--font-display);font-weight:600;
font-size:15px;color:var(--ink-800);letter-spacing:-0.005em;
}
.invest-group-total{
font-family:var(--font-mono);font-weight:600;
font-size:14px;color:var(--ink-900);
font-variant-numeric: tabular-nums;
}
.invest-estimate-only{
margin: 4px 0 0;font-size:12px;font-style:italic;color:var(--ink-600);
}
.invest-inclusions{
list-style:none;margin: 8px 0 0;padding: 0;
font-size:13.5px;line-height:1.55;
}
.invest-inclusions li{
display:flex;gap:8px;align-items:flex-start;padding: 2px 0;
}
.invest-inclusions .ic{
width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;
font-weight:700;font-size:11px;margin-top:3px;flex-shrink:0;
}
.invest-inclusions .included .ic{color:#1F8A4C} /* green tick */
.invest-inclusions .excluded .ic{color:var(--amber)} /* amber warning */
.invest-inclusions .included span:last-child{color:var(--ink-800)}
.invest-inclusions .excluded span:last-child{color:#A66F00;font-style:italic}
.invest-items{
list-style:none;margin: 6px 0 0;padding: 0;
font-size:12.5px;color:var(--ink-600);line-height:1.55;
}
.invest-items li{
display:block;
padding: 1px 0;
}
/* Row 1: description (left, wraps) + price (right). A generous gutter
keeps long descriptions clear of the price; the price never wraps and
reserves a column even when empty so descriptions don't run under it. */
.invest-row{ display:flex; align-items:baseline; gap:3rem; }
.invest-row .invest-desc{ flex:1 1 auto; min-width:0; }
.invest-items .tot{
font-family:var(--font-mono);font-variant-numeric: tabular-nums;
white-space:nowrap;
flex:0 0 auto; min-width:4.5rem; text-align:right;
}
/* Row 2: charger/pedestal per-unit treatment — struck single-unit RRP,
net price per unit, then the green "save N%" saving. Replaces the old
standalone "% off RRP" pill so the discount is stated once per line. */
.invest-unit{ margin-top:3px; padding-left:.75rem; font-size:11px; line-height:1.4; }
.invest-unit .invest-rrp{ text-decoration:line-through; color:var(--ink-600); margin-right:6px; }
.invest-unit .invest-net{
font-family:var(--font-mono); font-variant-numeric:tabular-nums;
color:var(--ink-900); font-weight:600;
}
.invest-unit .invest-save{ color:#1F8A4C; font-weight:600; margin-left:4px; }
.invest-grand-total{
display:flex;align-items:baseline;justify-content:space-between;
gap:12px;padding-top:18px;margin-top:18px;
border-top:2px solid var(--orange);
}
.invest-grand-total .lbl{
font-family:var(--font-display);font-weight:700;
font-size:16px;letter-spacing:-0.012em;color:var(--ink-900);
}
.invest-grand-total .fig{
font-family:var(--font-display);font-weight:700;
font-size:26px;letter-spacing:-0.018em;color:var(--ink-900);
font-variant-numeric: tabular-nums;
}
.invest-per-port{
margin: 6px 0 0;font-size:12px;color:var(--ink-600);
}
/* Scope of works & terms — bundled beneath the investment in the same
section, separated by a hairline so it reads as a continuation. */
.invest-scope{
margin-top: clamp(40px, 5vw, 64px);
padding-top: clamp(32px, 4vw, 48px);
border-top: 1px solid var(--paper-edge);
}
.invest-scope-head{ margin-bottom: 20px; }
.invest-scope-title{
font-family:var(--font-display);font-weight:700;
font-size:clamp(24px,2.6vw,34px);line-height:1.12;
letter-spacing:-0.015em;color:var(--ink-900);
margin:10px 0 0;
}
.invest-scope-sub{
margin:10px 0 0;max-width:62ch;
font-size:15px;line-height:1.55;color:var(--ink-600);
}
.invest-scope .scope-terms{
margin-top:20px;border:1px solid var(--paper-edge);
border-radius:8px;background:var(--paper);overflow:hidden;
}
.invest-scope .scope-terms summary{
cursor:pointer;padding:16px 20px;list-style:none;
display:flex;align-items:center;gap:8px;
}
.invest-scope .scope-terms summary::-webkit-details-marker{ display:none; }
.invest-scope .scope-open-label{
font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;
text-transform:uppercase;color:var(--ink-600);
}
.invest-scope .scope-open-caret{ margin-left:auto;color:var(--ink-500); }
.invest-scope details[open] .scope-open-caret{ transform:rotate(180deg); }
.invest-scope .scope-rendered{
padding:16px 20px 24px;border-top:1px solid var(--paper-edge);
font-size:14px;line-height:1.6;color:var(--ink-800);
}
/* 10 TIMELINE — paper surface with gradient connector ── */
.tl .strip{
position:relative;
margin-top: 32px;
padding: 60px 0 8px;
}
.tl .strip .line{
position:absolute;left:0;right:0;top:48px;height:2px;
background:var(--power);
border-radius:2px;
}
.tl .nodes{
display:grid;grid-template-columns: repeat(5, 1fr);
position:relative;
}
.tl .node{
display:flex;flex-direction:column;align-items:flex-start;gap:14px;
position:relative;padding-right:18px;
}
.tl .dot{
width:22px;height:22px;border-radius:50%;
background:var(--paper);border:2px solid var(--orange);
position:relative;z-index:2;
margin-top: 38px;
box-shadow: 0 0 0 6px var(--paper);
}
.tl .node:last-child .dot{background:var(--orange)}
.tl .node .wk{
font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
color:var(--orange);text-transform:uppercase;
position:absolute;top:0;left:0;
}
.tl .node h3{
font-family:var(--font-display);font-weight:700;
font-size:18px;letter-spacing:-0.005em;
color:var(--ink-900);margin:0;
text-wrap:balance;
}
.tl .node p{
margin:0;color:var(--ink-600);
font-size:13px;line-height:1.5;max-width:22ch;
}
@media (max-width: 900px){
.tl .nodes{grid-template-columns:1fr;gap:32px}
.tl .strip .line{left:10px;right:auto;top:0;bottom:0;width:2px;height:auto}
.tl .node{padding-left:36px;padding-right:0}
.tl .dot{
position:absolute;left:0;top:0;margin-top:0;
box-shadow:0 0 0 6px var(--paper);
}
.tl .node .wk{position:static}
}
/* 11 PROVEN — neutral light, logo wall + case-study trio ─ */
.proof{
background:var(--paper);
color:var(--ink-800);
}
.proof h2{color:var(--ink-900) !important}
.proof .logo-groups{
display:grid;grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top:1px solid var(--paper-edge);
margin-top: 16px;
}
.proof .lg{
padding: 28px 24px 28px 0;
border-right:1px solid var(--paper-edge);
}
.proof .lg + .lg{padding-left:24px}
.proof .lg:last-child{border-right:0;padding-right:0}
.proof .lg .cat{
font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;
color:var(--orange);text-transform:uppercase;
}
.proof .lg .names{
margin-top:18px;display:flex;flex-direction:column;gap:8px;
font-family:var(--font-display);font-weight:600;font-size:15px;
color:var(--ink-700);letter-spacing:-0.005em;
}
.proof .lg .names span{padding:3px 0}
@media (max-width:900px){
.proof .logo-groups{grid-template-columns: 1fr 1fr}
.proof .lg{border-right:0;border-top:1px solid var(--paper-edge);padding:22px 0}
.proof .lg:nth-child(odd){padding-right:24px;border-right:1px solid var(--paper-edge)}
}
/* Phase J — flat grid of every reference customer. Each cell hosts
either a real coloured logo PNG (preserved brand colour) or a
styled text fallback. Grid keeps composition even regardless of
logo aspect ratios. */
.proof .logo-grid{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 24px 32px;
margin-top: 40px;
padding: 32px 0;
border-top:1px solid var(--paper-edge);
border-bottom:1px solid var(--paper-edge);
align-items:center;
}
.proof .logo-cell{
display:flex;align-items:center;justify-content:center;
min-height: 48px;
}
.proof .logo-cell .jc-proven-logo{
display:block;max-height:36px;width:auto;max-width:140px;
object-fit:contain;object-position:center;
/* No filter — keep brand colours so customers see real logos. */
}
.proof .logo-cell .jc-proven-logo-text{
font-family:var(--font-display);font-weight:600;font-size:15px;
color:var(--ink-700);text-align:center;
letter-spacing:-0.005em;
}
.proof .cases{
margin-top: 72px;
display:grid;grid-template-columns: repeat(3,1fr);
gap: 20px;
}
.proof .cs{
background:var(--paper-2);border:1px solid var(--paper-edge);
border-radius:6px;
padding: 30px 28px 26px;
display:flex;flex-direction:column;gap:14px;
text-align:left;
cursor:pointer;
font-family:inherit;font-size:inherit;
transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
position:relative;
}
.proof .cs:hover{
transform:translateY(-2px);
border-color:var(--orange);
box-shadow: 0 8px 24px rgba(10,10,10,.06);
}
.proof .cs .stat{
font-family:var(--font-display);font-weight:700;
font-size: clamp(40px, 4.4vw, 58px);
/* line-height MUST clear the glyph height: with background-clip:text the
gradient paint-box is the line box, and any glyph that overshoots it
renders transparent (reads as a top/bottom crop). */
letter-spacing:-0.025em;line-height:1.16;
display:inline-block;padding:0.06em 0.02em;
background:var(--power);
-webkit-background-clip:text;background-clip:text;
color:transparent;
}
.proof .cs .who{
font-family:var(--font-display);font-weight:700;
font-size:18px;color:var(--ink-900);
letter-spacing:-0.005em;
}
.proof .cs .desc{color:var(--ink-600);font-size:14px;line-height:1.5}
.proof .cs .more{
margin-top:auto;
display:inline-flex;align-items:center;gap:8px;
font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
color:var(--amber);
opacity:.7;transition:opacity .25s ease, gap .25s ease;
}
.proof .cs:hover .more{opacity:1;gap:14px}
@media (max-width:900px){.proof .cases{grid-template-columns: 1fr}}
/* ── Customer logo wall — four substantiation categories ─────────── */
.proof .logo-wall{
margin-top: clamp(36px, 4vw, 56px);
display:grid;grid-template-columns: repeat(4, 1fr);gap: 32px;
border-top:1px solid var(--paper-edge);
border-bottom:1px solid var(--paper-edge);
padding: 36px 0;
}
.proof .logo-group-title{
font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
text-transform:uppercase;color:var(--orange);font-weight:600;
margin:0 0 18px;
}
.proof .logo-group-grid{
display:grid;grid-template-columns: 1fr 1fr;gap: 20px 16px;align-items:center;
}
.proof .logo-cell .logo-mark{
max-height:40px;max-width:100%;width:auto;object-fit:contain;
}
.proof .logo-cell .logo-mark-text{
font-family:var(--font-display);font-weight:600;font-size:14px;
color:var(--ink-600);text-align:center;line-height:1.15;
}
@media (max-width:1024px){ .proof .logo-wall{grid-template-columns: 1fr 1fr;gap:28px} }
@media (max-width:560px){ .proof .logo-wall{grid-template-columns: 1fr} }
/* "Chosen for you" note above the case-study carousel. */
.proof .cs-chosen{ margin-top: clamp(36px, 4vw, 56px); }
.proof .cs-chosen p{
margin:12px 0 0;max-width:60ch;
font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--ink-700);
}
/* ── Case-study carousel — full-width, paged ─────────────────────── */
.proof .cs-carousel{ position:relative;margin-top: 22px; }
.proof .cs-carousel-viewport{ overflow:hidden;border-radius:16px; }
.proof .cs-carousel-track{ display:flex;will-change:transform; }
.proof .cs-slide{ flex:0 0 100%;min-width:0; }
.proof .cs-card{
display:grid;grid-template-columns: 1.05fr 1fr;min-height:440px;
background:var(--paper-2);border:1px solid var(--paper-edge);
border-radius:16px;overflow:hidden;
}
.proof .cs-card-media{ position:relative;min-height:300px;background:var(--ink-900); }
.proof .cs-card-img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; }
.proof .cs-card-img--placeholder{ background:linear-gradient(135deg,#2c2c2c,#171717); }
.proof .cs-card-stat{
position:absolute;left:0;right:0;bottom:0;padding:20px 24px;
background:linear-gradient(0deg, rgba(10,10,10,.82), rgba(10,10,10,0));
display:flex;flex-direction:column;gap:2px;
}
.proof .cs-card-stat .v{
font-family:var(--font-display);font-weight:700;
font-size:clamp(34px,3.4vw,52px);line-height:1.14;letter-spacing:-0.02em;
padding-bottom:0.04em;
background:var(--power);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.proof .cs-card-stat .l{
font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
text-transform:uppercase;color:rgba(255,255,255,.85);
}
.proof .cs-card-body{ padding: clamp(28px,3vw,46px);display:flex;flex-direction:column; }
.proof .cs-card-name{
font-family:var(--font-display);font-weight:700;
font-size:clamp(26px,2.6vw,40px);line-height:1.1;letter-spacing:-0.015em;
color:var(--ink-900);margin:12px 0 0;padding-bottom:0.04em;
}
.proof .cs-card-headline{
font-family:var(--font-display);font-weight:600;
font-size:clamp(17px,1.5vw,22px);line-height:1.3;color:var(--ink-700);margin:10px 0 0;
}
.proof .cs-card-excerpt{ font-size:15px;line-height:1.6;color:var(--ink-600);margin:16px 0 0; }
.proof .cs-card-cta{
align-self:flex-start;
font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
color:var(--ink-900);background:var(--lime);border:0;border-radius:999px;
padding:13px 24px;cursor:pointer;margin-top:28px;
transition: transform .2s ease, box-shadow .2s ease;
}
.proof .cs-card-cta:hover{ transform:translateY(-1px);box-shadow:0 6px 18px rgba(10,10,10,.14); }
/* arrows + dots (shared with the gallery) */
.cs-arrow{
position:absolute;top:50%;transform:translateY(-50%);z-index:4;
width:48px;height:48px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:var(--white);border:1px solid var(--paper-edge);color:var(--ink-900);
font-size:26px;line-height:1;cursor:pointer;box-shadow:0 4px 16px rgba(10,10,10,.12);
transition: background .2s ease, color .2s ease, transform .2s ease;
}
.cs-arrow:hover{ background:var(--orange);color:var(--white);border-color:var(--orange); }
.cs-arrow--prev{ left:-18px; }
.cs-arrow--next{ right:-18px; }
.cs-dots{ display:flex;gap:10px;justify-content:center;margin-top:24px; }
.cs-dot{
width:9px;height:9px;border-radius:50%;border:0;padding:0;cursor:pointer;
background:var(--paper-edge);transition: background .2s ease, transform .2s ease;
}
.cs-dot.is-active{ background:var(--orange);transform:scale(1.3); }
.cs-carousel.is-single .cs-arrow, .cs-carousel.is-single .cs-dots, .cs-carousel.is-single .cs-tabs,
.cs-gallery.is-single .cs-arrow, .cs-gallery.is-single .cs-dots{ display:none; }
/* Named tab strip — replaces anonymous dots so the reader sees the whole set
and can jump to any slide. Reuses the carousel `dot` target (is-active). */
.cs-tabs{
display:flex;gap:0;margin-top:26px;
border-top:1px solid var(--paper-edge);
}
.cs-tabs .cs-tab{
flex:1 1 0;min-width:0;
position:relative;
display:flex;align-items:baseline;gap:10px;
padding:18px 18px 0;
background:none;border:0;border-top:2px solid transparent;margin-top:-1px;
cursor:pointer;text-align:left;color:var(--ink-500);
transition: color .2s ease;
}
.cs-tabs .cs-tab + .cs-tab{ border-left:1px solid var(--paper-edge); }
.cs-tabs .cs-tab-i{
font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;flex:none;
}
.cs-tabs .cs-tab-label{
font-family:var(--font-display);font-weight:600;font-size:15px;line-height:1.2;
}
.cs-tabs .cs-tab:hover{ color:var(--ink-800); }
.cs-tabs .cs-tab.is-active{ color:var(--ink-900); }
.cs-tabs .cs-tab.is-active .cs-tab-i{ color:var(--orange); }
/* The active tab's orange line doubles as the auto-advance progress bar: it
fills left->right over the dwell time (JS drives --cs-progress 0->1); with no
JS / reduced motion it rests full at scaleX(1). */
.cs-tabs .cs-tab.is-active::after{
content:"";position:absolute;left:0;right:0;top:-2px;height:2px;
background:var(--orange);transform-origin:left center;
transform:scaleX(var(--cs-progress, 1));
will-change:transform;
}
@media (max-width:680px){
.cs-tabs{ flex-direction:column; border-top:0; }
.cs-tabs .cs-tab{ border-top:1px solid var(--paper-edge);border-left:0;padding:14px 0;margin-top:0; }
.cs-tabs .cs-tab + .cs-tab{ border-left:0; }
}
@media (max-width:820px){
.proof .cs-card{ grid-template-columns:1fr; }
.proof .cs-card-media{ min-height:220px;height:250px; }
.cs-arrow--prev{ left:8px; }
.cs-arrow--next{ right:8px; }
}
/* ── Case-study popup gallery ────────────────────────────────────── */
.cs-gallery{ position:relative;margin:18px 0 6px; }
.cs-gallery-viewport{ position:relative;overflow:hidden;border-radius:12px;background:var(--ink-900); }
.cs-gallery-track{ display:flex;will-change:transform; }
.cs-gallery-slide{ flex:0 0 100%;min-width:0; }
.cs-gallery-img{ width:100%;height:clamp(220px,40vh,440px);object-fit:cover;display:block; }
.cs-gallery .cs-arrow{ width:42px;height:42px;font-size:22px; }
.cs-gallery .cs-arrow--prev{ left:12px; }
.cs-gallery .cs-arrow--next{ right:12px; }
/* Thumbnail strip — every gallery photo shown; click to jump straight to it
(the thumbnails reuse the carousel `dot` target so the active one lights). */
.cs-thumbs{ display:flex;flex-wrap:wrap;gap:8px;margin-top:10px; }
.cs-thumb{
flex:0 0 auto;width:74px;height:54px;padding:0;border:0;border-radius:6px;
overflow:hidden;cursor:pointer;background:var(--ink-900);
opacity:.5;outline:2px solid transparent;outline-offset:0;
transition:opacity .18s ease, outline-color .18s ease;
}
.cs-thumb:hover{ opacity:.85; }
.cs-thumb.is-active{ opacity:1;outline-color:var(--orange); }
.cs-thumb-img{ width:100%;height:100%;object-fit:cover;display:block; }
.proposal-modal .cs-story-head{
font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
text-transform:uppercase;color:var(--orange);margin:24px 0 8px;
}
.proposal-modal .cs-learn-more{
display:inline-block;margin-top:24px;
font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--orange);
text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px;
}
/* ── Platform feature cards (Core / Illuminate / JC Assist) ──────────
Same card shell as the case studies: a real product photo fills the
media panel (the .proof .cs-card-media / .cs-card-img cover rules
apply because the section also carries the .proof class), the body
carries the copy. No wordmark, no stat overlay. The .platform background is
set once in the platform-cards block lower in this file. */
.pf-outcomes{ list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:11px; }
.pf-outcomes li{
position:relative;padding-left:28px;font-size:15px;line-height:1.5;color:var(--ink-700);
}
.pf-outcomes li::before{
content:"";position:absolute;left:0;top:6px;width:15px;height:15px;border-radius:50%;
background:var(--lime);
box-shadow: inset 0 0 0 4px rgba(38,38,38,.06);
}
/* Minor "learn more" link per platform card — green, opens the product page in
a new tab. A readable green (the acid lime is too light for small text on
the pale card). */
.platform .pf-learn-more{
display:inline-block;margin-top:24px;
font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;font-weight:600;
color:#3E8E1E;text-decoration:none;
border-bottom:1px solid currentColor;padding-bottom:2px;
transition: color .2s ease;
}
.platform .pf-learn-more:hover{ color:#2F6E16; }
/* ───────────────────────────────────────────────────────────
Scroll-driven section reveals. Generic engine: every section
wired with data-controller="reveal" lifts itself + fades in
when it crosses the viewport. Inner elements stagger their own
reveal via `.is-revealed` descendant selectors; that's how each
section ends up with a slightly different motion personality
without bespoke controllers everywhere.
prefers-reduced-motion: the controller adds .is-revealed
immediately and the no-preference media query below is the
only place that introduces transitions, so a reduce-motion
user sees everything land at final state with no animation.
─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
/* Section host — what every reveal-controlled section does on
entry. Sits 22px below its rest position with the eyebrow +
headline + body initially hidden via their own selectors. */
[data-controller~="reveal"] {
opacity: 0;
transform: translateY(22px);
transition:
opacity 800ms cubic-bezier(.2,.7,.2,1),
transform 800ms cubic-bezier(.2,.7,.2,1);
will-change: opacity, transform;
}
[data-controller~="reveal"].is-revealed {
opacity: 1;
transform: translateY(0);
}
/* Display headlines wipe in left-to-right behind a clip-path
mask. Reads as "the words are being printed across the page"
— engineered, deliberate. Pairs with the existing JC display
font (GC Gambio fallback) which has the right weight to carry
the effect at 60–80px. */
[data-controller~="reveal"] .display,
[data-controller~="reveal"] h1.display,
[data-controller~="reveal"] h2.display {
clip-path: inset(0 100% 0 0);
transition: clip-path 1000ms cubic-bezier(.2,.7,.2,1) 120ms;
}
[data-controller~="reveal"].is-revealed .display,
[data-controller~="reveal"].is-revealed h1.display,
[data-controller~="reveal"].is-revealed h2.display {
clip-path: inset(0 0 0 0);
}
/* Eyebrow + lead paragraph rise behind the headline. Eyebrow
leads (it's the smallest, fastest read), lead follows. */
[data-controller~="reveal"] .eyebrow,
[data-controller~="reveal"] .kicker,
[data-controller~="reveal"] .platform-card-kicker,
[data-controller~="reveal"] .charger-overview .eyebrow {
opacity: 0;
transform: translateY(10px);
transition:
opacity 500ms cubic-bezier(.2,.7,.2,1) 60ms,
transform 500ms cubic-bezier(.2,.7,.2,1) 60ms;
}
[data-controller~="reveal"].is-revealed .eyebrow,
[data-controller~="reveal"].is-revealed .kicker,
[data-controller~="reveal"].is-revealed .platform-card-kicker,
[data-controller~="reveal"].is-revealed .charger-overview .eyebrow {
opacity: 1;
transform: translateY(0);
}
[data-controller~="reveal"] .lead,
[data-controller~="reveal"] .platform-card-lead p,
[data-controller~="reveal"] .charger-paragraph {
opacity: 0;
transform: translateY(12px);
transition:
opacity 700ms cubic-bezier(.2,.7,.2,1) 280ms,
transform 700ms cubic-bezier(.2,.7,.2,1) 280ms;
}
[data-controller~="reveal"].is-revealed .lead,
[data-controller~="reveal"].is-revealed .platform-card-lead p,
[data-controller~="reveal"].is-revealed .charger-paragraph {
opacity: 1;
transform: translateY(0);
}
/* Stat grids — counter-up text owns its own value transition;
this CSS handles the surrounding card / divider fade. */
[data-controller~="reveal"] .platform-card-stats > div,
[data-controller~="reveal"] .site .panel .stat,
[data-controller~="reveal"] .invest-grand-total {
opacity: 0;
transform: translateY(14px);
transition:
opacity 600ms cubic-bezier(.2,.7,.2,1),
transform 600ms cubic-bezier(.2,.7,.2,1);
}
[data-controller~="reveal"].is-revealed .platform-card-stats > div,
[data-controller~="reveal"].is-revealed .site .panel .stat,
[data-controller~="reveal"].is-revealed .invest-grand-total {
opacity: 1;
transform: translateY(0);
}
/* Stagger stat columns 80ms each. */
[data-controller~="reveal"].is-revealed .platform-card-stats > div:nth-child(1),
[data-controller~="reveal"].is-revealed .site .panel .stat:nth-child(1) { transition-delay: 380ms }
[data-controller~="reveal"].is-revealed .platform-card-stats > div:nth-child(2),
[data-controller~="reveal"].is-revealed .site .panel .stat:nth-child(2) { transition-delay: 460ms }
[data-controller~="reveal"].is-revealed .platform-card-stats > div:nth-child(3),
[data-controller~="reveal"].is-revealed .site .panel .stat:nth-child(3) { transition-delay: 540ms }
[data-controller~="reveal"].is-revealed .platform-card-stats > div:nth-child(4),
[data-controller~="reveal"].is-revealed .site .panel .stat:nth-child(4) { transition-delay: 620ms }
/* Charger overview image — scales 96% → 100% as the section
lands, suggesting the camera focusing rather than the photo
popping in. */
[data-controller~="reveal"] .charger-image img {
opacity: 0;
transform: scale(.96);
transition:
opacity 900ms cubic-bezier(.2,.7,.2,1) 200ms,
transform 900ms cubic-bezier(.2,.7,.2,1) 200ms;
}
[data-controller~="reveal"].is-revealed .charger-image img {
opacity: 1;
transform: scale(1);
}
/* Spec table rows tip in top-to-bottom — reinforces the
"reading from the top" rhythm. */
[data-controller~="reveal"] .charger-specs tr {
opacity: 0;
transform: translateY(8px);
transition:
opacity 450ms cubic-bezier(.2,.7,.2,1),
transform 450ms cubic-bezier(.2,.7,.2,1);
}
[data-controller~="reveal"].is-revealed .charger-specs tr {
opacity: 1;
transform: translateY(0);
}
[data-controller~="reveal"].is-revealed .charger-specs tr:nth-child(1) { transition-delay: 320ms }
[data-controller~="reveal"].is-revealed .charger-specs tr:nth-child(2) { transition-delay: 380ms }
[data-controller~="reveal"].is-revealed .charger-specs tr:nth-child(3) { transition-delay: 440ms }
[data-controller~="reveal"].is-revealed .charger-specs tr:nth-child(4) { transition-delay: 500ms }
[data-controller~="reveal"].is-revealed .charger-specs tr:nth-child(5) { transition-delay: 560ms }
[data-controller~="reveal"].is-revealed .charger-specs tr:nth-child(6) { transition-delay: 620ms }
[data-controller~="reveal"].is-revealed .charger-specs tr:nth-child(7) { transition-delay: 680ms }
[data-controller~="reveal"].is-revealed .charger-specs tr:nth-child(8) { transition-delay: 740ms }
[data-controller~="reveal"].is-revealed .charger-specs tr:nth-child(9) { transition-delay: 800ms }
[data-controller~="reveal"].is-revealed .charger-specs tr:nth-child(10) { transition-delay: 860ms }
/* Proven section — logo wall pinwheels in cell-by-cell, then
case-study cards stagger left-to-right. */
[data-controller~="reveal"] .proof .logo-cell {
opacity: 0;
transform: translateY(8px) scale(.95);
transition:
opacity 380ms cubic-bezier(.2,.7,.2,1),
transform 380ms cubic-bezier(.2,.7,.2,1);
}
[data-controller~="reveal"].is-revealed .proof .logo-cell {
opacity: 1;
transform: translateY(0) scale(1);
}
/* Crude stagger by nth-child — fine up to ~24 cells. */
[data-controller~="reveal"].is-revealed .proof .logo-cell:nth-child(n) {
transition-delay: calc(200ms + (var(--i, 0) * 40ms));
}
[data-controller~="reveal"] .proof .cases .cs {
opacity: 0;
transform: translateY(20px);
transition:
opacity 600ms cubic-bezier(.2,.7,.2,1),
transform 600ms cubic-bezier(.2,.7,.2,1);
}
[data-controller~="reveal"].is-revealed .proof .cases .cs {
opacity: 1;
transform: translateY(0);
}
[data-controller~="reveal"].is-revealed .proof .cases .cs:nth-child(1) { transition-delay: 700ms }
[data-controller~="reveal"].is-revealed .proof .cases .cs:nth-child(2) { transition-delay: 800ms }
[data-controller~="reveal"].is-revealed .proof .cases .cs:nth-child(3) { transition-delay: 900ms }
/* Invest cards — slide up from below the divider, generous
500ms ease so the grand-total figure has time to count-up
into place inside the card. */
[data-controller~="reveal"] .invest-card {
opacity: 0;
transform: translateY(28px);
transition:
opacity 700ms cubic-bezier(.2,.7,.2,1) 180ms,
transform 700ms cubic-bezier(.2,.7,.2,1) 180ms;
}
[data-controller~="reveal"].is-revealed .invest-card {
opacity: 1;
transform: translateY(0);
}
[data-controller~="reveal"].is-revealed .invest-card:nth-child(2) { transition-delay: 280ms }
/* Cover gets a special treatment — backdrop image scales in from
1.06 → 1.0 over a long curve, gives the page a cinematic
"lens settling" feel on the first paint. */
#cover.is-revealed .cover-bg,
#cover .cover-bg {
transform: scale(1.06);
transition: transform 1800ms cubic-bezier(.2,.7,.2,1);
}
#cover.is-revealed .cover-bg {
transform: scale(1);
}
}
/* ───────────────────────────────────────────────────────────
Chapter break — full-bleed charcoal band between the "your
project" half of the proposal and the "why JET Charge" half.
Editorial chapter-divider treatment: orange eyebrow, big display
headline, soft sub-paragraph. No surrounding chrome.
─────────────────────────────────────────────────────────── */
.chapter-break{
background: var(--ink-900);
color: #F5F5F5;
/* Generous lead-in, but a tighter foot so the band reads as the header
FOR the proof section below rather than a free-floating interstitial. */
padding: clamp(72px, 11vw, 140px) 0 clamp(40px, 6vw, 72px);
position: relative;
overflow: hidden;
}
.chapter-break::before{
/* Dark-warm scrim over the live gradient (jc-gradient-hero, z-index 0) so
the white headline + orange stats stay legible — the band reads as a
living warm glow rather than a bright-orange marketing wash. */
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
radial-gradient(130% 100% at 50% 46%, rgba(9,6,4,0) 0%, rgba(9,6,4,.08) 100%),
linear-gradient(180deg,
rgba(9,6,4,.10) 0%, rgba(9,6,4,.03) 30%,
rgba(9,6,4,.06) 58%, rgba(9,6,4,.20) 100%);
}
.chapter-break .wrap{
position: relative;
z-index: 2;
max-width: var(--maxw);
margin: 0 auto;
/* No extra horizontal padding here — the .proposal-body section gutter
already insets the content (same as the full-bleed CTA wrap). Adding
it again double-guttered the band so its heading sat 1 gutter right of
every other section. */
}
.chapter-break-eyebrow{
display: inline-block;
/* White on the live orange gradient (was orange — too low-contrast once the
scrim was lightened). Matches the CTA eyebrow treatment. */
color: rgba(255,255,255,.88) !important;
font-family: var(--font-mono);
font-weight: 700;
font-size: 12px;
letter-spacing: .24em;
text-transform: uppercase;
margin-bottom: 24px;
}
.chapter-break .eyebrow::before{ background: rgba(255,255,255,.55); }
.chapter-break-headline{
font-family: var(--font-display);
font-weight: 700;
/* Sized so the longest balanced line still fits the cb-text grid column —
the band clips (overflow:hidden) for the gradient, so an oversized
headline would lose its last word. */
font-size: clamp(40px, 5.2vw, 78px);
letter-spacing: -0.028em;
line-height: 1.0;
color: #F5F5F5 !important;
margin: 0;
max-width: 20ch;
text-wrap: balance;
}
.chapter-break-headline em{
font-style: italic;
/* White (was orange) — the italic still sets "day one" apart, and white
reads on the live orange gradient where orange-on-orange washed out. */
color: #fff;
}
.chapter-break-sub{
font-family: var(--font-body);
font-size: clamp(16px, 1.4vw, 20px);
line-height: 1.55;
color: rgba(245, 245, 245, .72);
margin: 32px 0 0;
max-width: 56ch;
}
/* Down-cue that ties the band to the case-study wall directly below. */
.chapter-break-cue{
display: inline-block;
margin-top: 36px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(245, 245, 245, .55);
}
/* Team photo beside the headline — "the same team delivers yours". Shown at
natural aspect (no cover-crop) so every face stays in frame. */
.chapter-break .cb-grid{
display:grid;grid-template-columns: 1fr 1.08fr;
gap: clamp(32px, 5vw, 72px);
align-items:center;
}
.chapter-break .cb-team-img{
width:100%;height:auto;display:block;
border-radius:10px;
box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
/* Track-record stat bar across the foot of the band — a deliberate stat
ledger: equal columns split by hairline dividers, values aligned along the
top, labels hung beneath. */
.chapter-break .cb-stats{
display:grid;grid-template-columns:repeat(5,1fr);
gap:0;
margin-top:clamp(40px,6vw,72px);
padding-top:clamp(32px,4vw,52px);
border-top:1px solid rgba(245,245,245,.16);
}
.chapter-break .cb-stat{
display:flex;flex-direction:column;gap:10px;
padding:0 clamp(18px,2.2vw,38px);
border-left:1px solid rgba(245,245,245,.12);
}
.chapter-break .cb-stat:first-child{ border-left:0;padding-left:0; }
.chapter-break .cb-stat-v{
font-family:var(--font-display);font-weight:700;
font-size:clamp(30px,3.4vw,50px);line-height:1.02;
letter-spacing:-0.02em;color:#fff;
padding-bottom:0.04em;
white-space:nowrap;
}
.chapter-break .cb-stat-l{
font-family:var(--font-body);font-size:13px;line-height:1.42;
color:rgba(245,245,245,.66);max-width:18ch;
}
@media (max-width:880px){
.chapter-break .cb-grid{ grid-template-columns: 1fr; gap:32px; }
.chapter-break .cb-stats{ grid-template-columns:repeat(2,1fr);gap:30px clamp(24px,5vw,40px); }
.chapter-break .cb-stat{ border-left:0;padding:0; }
}
/* ───────────────────────────────────────────────────────────
Page navigator — fixed right-rail dots, one per section. The
page_nav controller toggles .is-active as the reader scrolls;
hover reveals the section label as a left-pointing tooltip.
─────────────────────────────────────────────────────────── */
.page-nav{
position: fixed;
top: 50%;
right: clamp(12px, 2vw, 24px);
transform: translateY(-50%);
z-index: 30;
/* On screens narrower than 1080px the nav would collide with
the content; hide it and let the floating CTA carry the
"where am I / get me out" job at small sizes. */
}
@media (max-width: 1080px){
.page-nav{ display: none }
}
.page-nav-list{
list-style: none;
margin: 0;
padding: 8px 6px;
display: flex;
flex-direction: column;
gap: 6px;
background: rgba(255, 255, 255, .65);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(10, 10, 10, .08);
border-radius: 999px;
}
.page-nav-item{ margin: 0 }
.page-nav-dot{
display: block;
position: relative;
width: 10px; height: 10px;
border-radius: 50%;
background: rgba(10, 10, 10, .22);
border: 0;
text-decoration: none;
transition: background 200ms ease, transform 200ms ease;
}
.page-nav-dot::after{
/* The hover tooltip — sits to the left of the rail. */
content: attr(aria-label);
position: absolute;
right: calc(100% + 14px);
top: 50%;
transform: translateY(-50%) translateX(8px);
background: var(--ink-900);
color: #fff;
font-family: var(--font-display);
font-weight: 600;
font-size: 12px;
letter-spacing: -0.005em;
padding: 6px 12px;
border-radius: 4px;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 180ms ease, transform 180ms ease;
}
.page-nav-dot::before{
/* Tooltip arrow */
content: "";
position: absolute;
right: calc(100% + 8px);
top: 50%;
transform: translateY(-50%);
border: 5px solid transparent;
border-left-color: var(--ink-900);
opacity: 0;
transition: opacity 180ms ease;
}
.page-nav-dot:hover{
background: var(--ink-900);
transform: scale(1.3);
}
.page-nav-dot:hover::after,
.page-nav-dot:hover::before{
opacity: 1;
transform: translateY(-50%) translateX(0);
}
.page-nav-dot.is-active{
background: var(--orange);
transform: scale(1.5);
box-shadow: 0 0 0 4px rgba(255, 78, 23, .15);
}
.page-nav-label{
/* Original inline label hidden — tooltip handles the affordance. */
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@media (prefers-reduced-motion: reduce){
.page-nav-dot, .page-nav-dot::after, .page-nav-dot::before{
transition: none;
}
}
/* ───────────────────────────────────────────────────────────
Section background rhythm — alternate paper / paper-2 / dark
so the page reads as discrete chapters not a single tonal blur.
─────────────────────────────────────────────────────────── */
#site, .charger-overview, #scope_of_works_and_terms{
background: var(--paper-2);
}
/* .platform gets its --paper background from the "12 PLATFORM" rule
below (which also sets the text colour) — kept single-source there
to avoid a duplicate selector. */
/* Floating CTA — fixed bottom-right, reveals on scroll past the
cover and hides while the actual CTA section is in view. The
cta-float controller toggles .is-visible; transitions live here. */
.cta-float{
position: fixed;
bottom: clamp(16px, 3vw, 28px);
right: clamp(16px, 3vw, 28px);
z-index: 40;
opacity: 0;
transform: translateY(12px);
pointer-events: none;
transition: opacity 260ms cubic-bezier(.4,0,.2,1),
transform 260ms cubic-bezier(.4,0,.2,1);
}
.cta-float.is-visible{
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.cta-float-button{
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 22px;
/* Acid Lime CTA — the brand's high-energy "active state" accent. Bright
lime needs a near-black label (white would vanish). One CTA per view
keeps lime sparing per the guidelines. */
background: var(--lime);
color: var(--ink-900);
font-family: var(--font-display);
font-weight: 700;
font-size: 15px;
letter-spacing: -0.005em;
border-radius: 999px;
text-decoration: none;
box-shadow:
0 10px 24px rgba(198, 255, 52, .40),
0 2px 6px rgba(10, 10, 10, .18);
transition: transform 180ms cubic-bezier(.4,0,.2,1),
box-shadow 180ms cubic-bezier(.4,0,.2,1),
filter 180ms ease;
}
.cta-float-button:hover{
filter: brightness(1.06);
transform: translateY(-1px);
box-shadow:
0 14px 30px rgba(198, 255, 52, .48),
0 3px 8px rgba(10, 10, 10, .22);
}
.cta-float-button:active{
transform: translateY(0);
}
.cta-float-arrow{
width: 18px; height: 18px;
transition: transform 180ms cubic-bezier(.4,0,.2,1);
}
.cta-float-button:hover .cta-float-arrow{
transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
.cta-float, .cta-float-button, .cta-float-arrow { transition: none }
}
/* System-layout reveal — paired with system_layout_reveal_controller.
The controller measures each SVG line and animates stroke-dashoffset
via inline styles; this CSS handles the node cards + distance labels.
Initial state hides cards/labels; .system-layout-reveal-shown plays
them in with a stagger that lands after the line draw completes. */
.system-layout-reveal-armed .system-layout .scope-node,
.system-layout-reveal-armed .system-layout svg g {
opacity: 0;
transform: translateY(6px);
transition: opacity 500ms cubic-bezier(.4,0,.2,1),
transform 500ms cubic-bezier(.4,0,.2,1);
}
.system-layout-reveal-shown .system-layout .scope-node,
.system-layout-reveal-shown .system-layout svg g {
opacity: 1;
transform: translateY(0);
}
/* Stagger card / label arrival behind the lines drawing in. The base
delay (.system-layout-reveal-shown .scope-node) lines up with the
last connection finishing. */
.system-layout-reveal-shown .system-layout .scope-node {
transition-delay: 450ms;
}
.system-layout-reveal-shown .system-layout svg g {
transition-delay: 600ms;
}
@media (prefers-reduced-motion: reduce) {
.system-layout-reveal-armed .system-layout .scope-node,
.system-layout-reveal-armed .system-layout svg g {
opacity: 1;
transform: none;
transition: none;
}
}
/* 12 PLATFORM — case-study-style product cards. Each card stacks
meta → lead paragraph → stats / diagram → outcomes list. Cards
alternate visual emphasis (left-aligned diagram, right-aligned
diagram) when there's more than one. ───────────────────────── */
.platform{background:var(--paper);color:var(--ink-800);}
.platform .platform-cards{
display:flex;flex-direction:column;gap:64px;margin-top:48px;
}
.platform-card{
background: var(--paper-2);
border: 1px solid var(--paper-edge);
border-radius: 10px;
overflow: hidden;
transition: border-color 200ms cubic-bezier(.2,.7,.2,1),
box-shadow 200ms cubic-bezier(.2,.7,.2,1);
}
.platform-card:hover{
border-color: rgba(255, 78, 23, .35);
}
.platform-card.is-open{
border-color: rgba(255, 78, 23, .6);
box-shadow: 0 10px 30px rgba(10, 10, 10, .06);
}
/* Summary — always-visible kicker + name + tagline. Clicking
anywhere on it toggles. The right-hand chevron rotates 180° on
open. Removes native disclosure marker so we own the affordance. */
.platform-card-summary{
list-style: none;
cursor: pointer;
padding: clamp(28px, 4vw, 44px) clamp(28px, 4vw, 56px);
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 24px;
}
.platform-card-summary::-webkit-details-marker { display: none }
.platform-card-summary::marker { content: "" }
.platform-card-chevron{
width: 36px; height: 36px;
border-radius: 50%;
background: var(--paper);
border: 1px solid var(--paper-edge);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-700);
transition: transform 280ms cubic-bezier(.2,.7,.2,1),
background 200ms ease,
border-color 200ms ease;
}
.platform-card-chevron svg { width: 18px; height: 18px }
.platform-card.is-open .platform-card-chevron{
transform: rotate(180deg);
background: var(--orange);
color: #fff;
border-color: var(--orange);
}
.platform-card-summary:hover .platform-card-chevron{
border-color: var(--orange);
color: var(--orange);
}
.platform-card.is-open .platform-card-summary:hover .platform-card-chevron{
/* keep the white-on-orange combo when already open */
color: #fff;
}
/* Body — the grid-template-rows 0fr → 1fr trick gives us a smooth
height animation without measuring the content height in JS.
Modern browsers (Chrome 117+, Firefox 116+, Safari 17.4+) handle
it natively; older browsers fall back to instant open which is
fine for a progressive enhancement like this. */
.platform-card-body{
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition:
grid-template-rows 450ms cubic-bezier(.2,.7,.2,1),
opacity 350ms cubic-bezier(.2,.7,.2,1) 50ms;
}
.platform-card-body > *{
min-height: 0; /* required for the grid-rows trick to actually clip */
}
.platform-card.is-open .platform-card-body{
grid-template-rows: 1fr;
opacity: 1;
}
.platform-card-inner{
padding: 0 clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px);
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 32px;
}
.platform-card-meta{display:flex;flex-direction:column;gap:4px;max-width:60ch}
.platform-card-kicker{
font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;
text-transform:uppercase;color:var(--orange);font-weight:700;
}
.platform-card-name{
font-family:var(--font-display);font-weight:700;
font-size: clamp(36px, 4vw, 56px);
letter-spacing:-0.022em;line-height:1.02;margin:8px 0 0;
color:var(--ink-900);
}
.platform-card-tag{
font-family:var(--font-display);font-weight:600;
font-style:italic;font-size:16px;color:var(--ink-600);
margin: 6px 0 0;
}
.platform-card-lead p{
font-size: clamp(16px, 1.25vw, 19px);
line-height: 1.6;color:var(--ink-800);
max-width: 60ch;margin: 0;
}
.platform-card-stats{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 0;
border-top:1px solid var(--paper-edge);
border-bottom:1px solid var(--paper-edge);
padding: 18px 0;
}
.platform-card-stats > div{
padding: 12px 20px;
border-right:1px solid var(--paper-edge);
display:flex;flex-direction:column;gap:4px;
}
.platform-card-stats > div:last-child{border-right:0}
.platform-card-stats .stat-v{
font-family:var(--font-display);font-weight:700;
font-size: clamp(28px, 2.6vw, 40px);
letter-spacing:-0.02em;line-height:1;
color:var(--ink-900);
font-variant-numeric:tabular-nums;
}
.platform-card-stats .stat-l{
font-size:12px;color:var(--ink-600);letter-spacing:.02em;line-height:1.4;
}
.platform-card-outcomes h4{
font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;
text-transform:uppercase;color:var(--orange);font-weight:700;
margin:0 0 12px;
}
.platform-card-outcomes ul{
list-style:none;padding:0;margin:0;
display:flex;flex-direction:column;gap:10px;
}
.platform-card-outcomes li{
font-size: 14.5px;line-height:1.55;color:var(--ink-700);
padding-left: 20px;position:relative;
}
.platform-card-outcomes li::before{
content:"→";position:absolute;left:0;top:0;
color:var(--orange);font-weight:700;
}
.platform-card-outcomes strong{color:var(--ink-900);font-weight:600}
/* CORE before/after diagram */
.core-diagram{
display:grid;
grid-template-columns: 1fr auto 1fr;
gap: 24px;align-items:center;
background: var(--paper);
border: 1px solid var(--paper-edge);
border-radius: 6px;
padding: 28px 24px;
}
.core-side{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.core-side-label{
font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
text-transform:uppercase;color:var(--ink-600);
}
.core-side-label--win{color:var(--orange)}
.core-grid{
display:grid;
grid-template-columns: repeat(6, 1fr);
gap: 4px;width:100%;
}
.core-port{
display:block;aspect-ratio:1;border-radius:2px;
background:var(--paper-edge);
}
.core-port.on{background:var(--orange);box-shadow:0 0 0 1px rgba(255,78,23,.25)}
.core-side-cap{font-size:13px;color:var(--ink-700);font-weight:500}
.core-arrow{
font-family:var(--font-display);font-weight:700;font-size:28px;
color:var(--orange);text-align:center;
}
@media (max-width: 720px){
.core-diagram{grid-template-columns:1fr;gap:18px}
.core-arrow{transform:rotate(90deg)}
}
/* Platform screenshot — generic wrapper for real product imagery
(JC's CORE infographic, the Illuminate dashboard screenshot,
the JC Assist dashboard screenshot). Keeps each image in a
tidy frame without imposing a fixed aspect on the source. */
.platform-card-screenshot{
margin: 0;
padding: clamp(16px, 2vw, 28px);
background: var(--paper);
border: 1px solid var(--paper-edge);
border-radius: 8px;
text-align: center;
}
.platform-card-screenshot img{
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}
.platform-card-screenshot--core img{
/* CORE infographic is a portrait 750x654 — cap the height so
it doesn't dominate the expanded card. */
max-height: 460px;
width: auto;
}
.platform-card-screenshot figcaption{
margin-top: 12px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ink-600);
}
/* Illuminate dashboard mock */
.illuminate-diagram{padding: 0}
.ill-frame{
background:#0E0E0E;color:#F5F5F5;
border-radius:8px;overflow:hidden;
border: 1px solid var(--ink-900);
}
.ill-frame-bar{
background:var(--ink-900);padding: 10px 14px;
display:flex;align-items:center;gap:8px;
border-bottom: 1px solid #2A2A2A;
}
.ill-dot{width:8px;height:8px;border-radius:50%;background:var(--ink-700)}
.ill-dot.ok{background:#22C55E}
.ill-dot.warn{background:var(--amber)}
.ill-frame-title{
margin-left:12px;font-family:var(--font-mono);font-size:11px;
letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.7);
}
.ill-grid{
padding: 16px;
display:grid;grid-template-columns: repeat(3, 1fr);gap: 10px;
}
.ill-tile{
background:var(--ink-900);border:1px solid #2A2A2A;
border-radius:4px;padding:12px 14px;
display:flex;flex-direction:column;gap:6px;
}
.ill-tile.ok{border-left:3px solid #22C55E}
.ill-tile.warn{border-left:3px solid var(--amber)}
.ill-tile.idle{opacity:.5}
.ill-tile-name{
font-family:var(--font-display);font-weight:700;font-size:14px;
color:#fff;
}
.ill-tile-meta{
font-family:var(--font-mono);font-size:11px;
color:rgba(255,255,255,.65);line-height:1.4;
}
@media (max-width: 720px){
.ill-grid{grid-template-columns: 1fr 1fr}
}
/* JC Assist resolution flow */
.assist-diagram{
background:var(--paper);
border: 1px solid var(--paper-edge);
border-radius: 6px;
padding: 24px;
}
.assist-flow{
list-style:none;padding:0;margin:0;
display:grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
position:relative;
}
.assist-flow::before{
content:"";position:absolute;
top: 22px;left: 12%;right: 12%;
height: 2px;background: linear-gradient(to right, var(--orange), var(--amber));
opacity:.4;z-index:0;
}
.assist-flow li{
position:relative;z-index:1;
display:flex;flex-direction:column;gap:6px;
padding: 0 12px;text-align:center;align-items:center;
}
.assist-step{
display:inline-flex;align-items:center;justify-content:center;
width: 44px;height: 44px;border-radius:50%;
background:var(--ink-900);color:#fff;
font-family:var(--font-mono);font-weight:700;font-size:13px;
letter-spacing:.06em;
}
.assist-step-title{
font-family:var(--font-display);font-weight:700;
font-size:14px;color:var(--ink-900);
}
.assist-step-sub{
font-size:12px;color:var(--ink-600);line-height:1.4;
}
@media (max-width: 720px){
.assist-flow{grid-template-columns: 1fr;gap:16px}
.assist-flow::before{display:none}
}
/* 13 FAQ — accordion ──────────────────────────────────── */
.faq .list{margin-top: 8px;border-top:1px solid rgba(38,38,38,.22)}
.faq details{border-bottom:1px solid rgba(38,38,38,.14)}
.faq summary{
list-style:none;cursor:pointer;
padding: 24px 56px 24px 0;
position:relative;
display:flex;align-items:flex-start;gap:24px;
font-family:var(--font-display);font-weight:600;
font-size: clamp(18px, 1.6vw, 22px);
letter-spacing:-0.005em;color:var(--ink-900);
text-wrap:balance;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .n{
font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;
color:var(--orange);
margin-top:8px;flex-shrink:0;min-width:36px;
}
.faq summary::after{
content:"";position:absolute;right:6px;top:50%;
width:14px;height:14px;
background:
linear-gradient(currentColor, currentColor) center/14px 1.5px no-repeat,
linear-gradient(currentColor, currentColor) center/1.5px 14px no-repeat;
transform: translateY(-50%) rotate(0);
transition: transform .35s ease, background-size .35s ease;
color:var(--orange);
}
.faq details[open] summary::after{
background:
linear-gradient(currentColor, currentColor) center/14px 1.5px no-repeat,
linear-gradient(currentColor, currentColor) center/0px 14px no-repeat;
}
.faq .answer{
overflow:hidden;
max-height: 0;
transition: max-height .4s ease;
color:var(--ink-700);font-size:15.5px;line-height:1.65;max-width:64ch;
padding-left: 60px;
}
.faq details[open] .answer{max-height: 600px;padding-bottom:24px}
/* 14 NEXT STEPS — warm-brown dark closer ──────────────── */
.cta{
/* Live animated brand gradient (jc-gradient-hero) behind the content;
the static var(--power) shows through when the WebGL mesh can't run. */
background:var(--power);
color:var(--warm-dark-fg);
position:relative;
overflow:hidden;
}
.cta > .wrap{ position:relative; z-index:2; }
/* Contrast scrim — the live gradient is bright in the centre/lower area where
the body + contacts sit, washing out the light text. A bottom-weighted dark
veil deepens the orange so the text reads, without killing the gradient. */
.cta::after{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(180deg,
rgba(15,7,2,.04) 0%, rgba(15,7,2,.0) 22%,
rgba(15,7,2,.06) 50%, rgba(15,7,2,.14) 70%, rgba(15,7,2,.24) 100%);
}
.cta .eyebrow{ color:rgba(255,255,255,.9); }
.cta .eyebrow::before{ background:rgba(255,255,255,.6); }
/* Full-width headline row above the rep/contacts grid — lets the headline run
horizontally across the section instead of stacking tall in a narrow column. */
.cta .cta-head{ margin-bottom: clamp(28px, 4vw, 56px); }
.cta .cta-headline{
color:#fff;
font-size:clamp(42px, 7vw, 92px);
line-height:0.98;
letter-spacing:-0.03em;
margin:14px 0 0;
max-width:22ch;
text-wrap:balance;
padding-bottom:0.06em;
}
.cta .grid{
display:grid;grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: clamp(40px, 6vw, 96px);
align-items:start;
margin-top: 0;
}
.cta .left h2{margin:8px 0 28px;max-width:14ch}
.cta .rep{
background: #22150b;
border:1px solid rgba(255,255,255,.10);
border-radius:4px;padding:28px;
display:grid;grid-template-columns: 84px 1fr;gap:22px;align-items:center;
}
.cta .rep .avatar{
width:84px;height:84px;border-radius:50%;overflow:hidden;flex:none;
background:
radial-gradient(circle at 50% 45%, #2a1a0a 0%, #160d05 100%);
display:flex;align-items:center;justify-content:center;
font-family:var(--font-display);font-weight:700;font-size:30px;
color:var(--amber-soft);
border: 1.5px solid var(--orange);
}
.cta .rep .avatar img{ width:100%;height:100%;object-fit:cover; }
/* Project-summary rep sign-off — avatar (Entra photo / initials) + name. */
.summary-signoff{
display:flex;align-items:center;gap:14px;margin-top:28px;
}
.summary-signoff .signoff-avatar{
width:52px;height:52px;border-radius:50%;overflow:hidden;flex:none;
display:flex;align-items:center;justify-content:center;
background:var(--paper-2);border:1px solid var(--paper-edge);
}
.summary-signoff .signoff-avatar img{ width:100%;height:100%;object-fit:cover; }
.summary-signoff .signoff-initials{
font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--ink-700);
}
.summary-signoff .signoff-meta{ display:flex;flex-direction:column;line-height:1.25; }
.summary-signoff .signoff-name{
font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--ink-900);
}
.summary-signoff .signoff-role{
font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
text-transform:uppercase;color:var(--ink-500);margin-top:2px;
}
.cta .rep h3{
margin:0;font-family:var(--font-display);font-weight:700;
font-size:22px;letter-spacing:-0.012em;color:var(--warm-dark-fg);
}
.cta .rep .role{font-size:13px;color:rgba(247,234,211,.55);margin-top:2px}
.cta .rep .lines{margin-top:12px;display:flex;flex-direction:column;gap:6px;font-size:14px}
.cta .rep .lines a{color:rgba(247,234,211,.78)}
.cta .rep .lines a:hover{color:var(--amber)}
.cta .rep .book{
grid-column:1 / -1;
margin-top:18px;
display:inline-flex;align-items:center;justify-content:center;gap:10px;
/* Acid Lime CTA + near-black label (see .cta-float-button). */
background:var(--lime);color:var(--ink-900);
padding:14px 22px;border-radius:3px;
font-weight:700;letter-spacing:.02em;font-size:14px;
transition: filter .2s ease, transform .2s ease;
text-align:center;
}
.cta .rep .book:hover{filter:brightness(1.06);transform:translateY(-1px)}
.cta .contacts{
margin-top: 32px;
display:grid;grid-template-columns: 1fr 1fr;gap:0;
border-top:1px solid rgba(255,255,255,.14);
}
.cta .contacts .c{
padding: 22px 22px 22px 0;
border-right:1px solid rgba(255,255,255,.14);
}
.cta .contacts .c + .c{padding-left:22px}
.cta .contacts .c:last-child{border-right:0;padding-right:0}
.cta .contacts .c .reg{
font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;
color:rgba(255,255,255,.92);text-transform:uppercase;
}
.cta .contacts .c .lines{
margin-top:10px;display:flex;flex-direction:column;gap:4px;
font-size:14.5px;color:rgba(255,255,255,.9);
}
.cta .contacts .c .lines a:hover{color:var(--amber)}
@media (max-width: 900px){
.cta .grid{grid-template-columns:1fr}
}
/* Footer strip — the only place "a power move" appears ─ */
.footer-strip{
padding: 36px var(--gutter) 40px;
background:var(--ink-900);color:#fff;
display:flex;justify-content:space-between;align-items:flex-end;
border-top: 1px solid rgba(255,255,255,.08);
}
.footer-strip .footer-lockup{ height: 34px; width:auto; display:block; }
.footer-strip .tag{
font-family:var(--font-display);font-style:italic;font-weight:500;
font-size: clamp(18px, 1.8vw, 24px);color:rgba(255,255,255,.6);
letter-spacing:-0.01em;
}
/* Case-study + ecosystem modals — native