/* COMPARE CAR OFFERS — STUDIO 2027 / EDITORIAL AUTOMOTIVE SYSTEM
 * Design-only layer built over the supplied v5.7 site. No API/JS, copy, heading,
 * URL, data, canonical, schema, consent or event handler is replaced.
 * This stylesheet can be removed to restore the original visual appearance.
 */
:root{--c27-ink:#101b21;--c27-blue:#2348f5;--c27-sky:#dfeafa;--c27-paper:#fafbf7;--c27-lime:#cafd58;--c27-muted:#536474;--c27-line:#d6e0e5;--c27-radius:25px;--blue:#2348f5;--blue-deep:#1634d0;--blue-light:#4c69ef;--paper-2:#f3f7fa;--ink:#101b21;--ink-2:#263644;--grey:#667887;--container:1320px;--sp:clamp(70px,8vw,136px)}
/* Inter comes from Google Fonts, which is a third-party request that
   can be slow, blocked, or refused by a privacy extension. Falling
   back to the generic "sans-serif" in that case drops the whole site
   onto the browser's default face; the system stack keeps it looking
   like the design. This matches the stack the original stylesheet
   already used. */
body{background:var(--c27-paper);color:var(--c27-ink);font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;letter-spacing:-.008em}
h1,h2,h3,h4{letter-spacing:-.065em}
h2{font-size:clamp(2.6rem,5.45vw,5.7rem);line-height:.99;font-weight:800}
.btn{border-radius:14px;font-weight:700;transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s,background .22s}
.btn--blue{background:var(--c27-blue);color:white;border-color:var(--c27-blue);box-shadow:0 9px 0 -4px rgba(35,72,245,.11),0 20px 35px -21px #2348f5}
.btn--blue:hover{background:#172fbb;box-shadow:0 12px 0 -4px rgba(35,72,245,.15),0 24px 40px -22px #2348f5;transform:translateY(-3px)}
.btn--line-d{background:#fff;color:var(--c27-ink);border-color:#dce3e6}
.btn--line-d:hover{color:var(--c27-blue);background:#eef3ff;border-color:#aabbe7}
.wrap{max-width:var(--container)}
/* Architectural header, not the previous dark floating navigation. */
.hdr,.hdr.is-stuck{background:rgba(250,251,247,.94);border-bottom:1px solid rgba(14,31,44,.10);backdrop-filter:blur(28px) saturate(1.6);-webkit-backdrop-filter:blur(28px) saturate(1.6)}
.hdr-in{height:82px}
.brand{gap:13px}
.brand svg{width:35px;height:35px;transform:rotate(-5deg)}
.brand b{font-size:1.16rem;letter-spacing:-.055em;color:var(--c27-ink)}
.nav{gap:clamp(13px,1.75vw,28px)}
.nav a{color:#3b4a56;font-size:.88rem;font-weight:650}
.nav a:hover{color:var(--c27-blue)}
.hdr-act .btn{border-radius:12px;min-height:43px}
.burger{border-color:#c9d4d9;background:#fff}
.burger span{background:var(--c27-ink)}
.mnav{background:rgba(250,251,247,.98);border-bottom:1px solid #dce3e6}
.mnav a{color:var(--c27-ink);border-bottom:1px solid #e0e8ed}
.mnav .btn{color:#fff}
/* FULL-BLEED HERO / 2027 CAMPAIGN SYSTEM */
.hero{padding-top:115px;background:#fbfcf8;overflow:hidden;border-bottom:1px solid #dbe5ee}
.hero-bg::before{background:radial-gradient(710px 430px at 2% 8%,#e6f0ff 0,transparent 75%),radial-gradient(650px 440px at 100% 12%,#e0e9f8 0,transparent 70%),linear-gradient(180deg,#fbfcf9 0%,#f8faf8 45%,#edf3fd 100%)}
.hero-bg::after{content:"";position:absolute;top:26px;right:-180px;width:680px;height:680px;border:1px solid rgba(36,72,244,.13);border-radius:50%;box-shadow:0 0 0 80px rgba(36,72,244,.035),0 0 0 160px rgba(36,72,244,.025)}
.grid-floor,.haze,.sweep,.mote,.vignette{display:none!important}
.hero-in{grid-template-columns:minmax(0,1fr) minmax(360px,458px);align-items:start;gap:clamp(28px,4vw,68px);padding-bottom:4px}
.hero-copy{max-width:860px;padding-top:37px;min-width:0}
.hero-copy::before{content:'CCO / 2027    —    A BETTER WAY TO SELL';display:block;color:#2853e7;font:700 .7rem/1.3 'JetBrains Mono',monospace;letter-spacing:.13em;margin-bottom:24px}
.hero-kick{color:#1e4bce;background:rgba(217,229,255,.8);border-color:#b7cafa;border-radius:7px;padding:10px 13px;font-size:.79rem;font-weight:750;margin-bottom:23px}
.hero-kick i{background:#2350f0;box-shadow:0 0 0 4px rgba(35,80,240,.14)}
.hero h1{color:var(--c27-ink);font-weight:800;letter-spacing:-.095em;line-height:.91;font-size:clamp(3.6rem,6.3vw,6.65rem);max-width:unset;text-wrap:balance}
.hero h1 .lit{color:var(--c27-blue);animation:none;text-shadow:none;position:relative;white-space:nowrap}
.hero h1 .lit::after{content:"";height:7px;position:absolute;bottom:.01em;left:0;right:0;border-radius:4px;background:var(--c27-lime);z-index:-1;transform:rotate(-1deg)}
.hero-sub{color:#53616e;font-size:clamp(1.02rem,1.4vw,1.19rem);max-width:56ch;margin-top:27px;line-height:1.65}
/* A genuinely light, reassuring, distinctly designed vehicle-entry experience. */
.console{margin-top:46px;border-radius:26px;background:rgba(255,255,255,.96);border:1px solid rgba(37,73,112,.16);box-shadow:0 42px 96px -55px #284d89,0 12px 32px -23px #5978ac,inset 0 1px 0 #fff;backdrop-filter:blur(23px)}
.console::before{content:"START HERE     /     01";display:block;padding:15px 24px 0;font:700 .65rem 'JetBrains Mono',monospace;letter-spacing:.14em;color:#4564b7}
.console-bar{background:transparent;border-color:#e8edf3;padding:12px 24px 15px}
.console-bar b{color:#1b2c37;font-size:.84rem}
.prog-txt{color:#788997}
.prog{background:#e2e8ef}
.console-body{padding:24px 24px 25px}
.pane h3{color:#111b22;font-weight:800;font-size:1.48rem;letter-spacing:-.058em}
.pane .hint{color:#697a88;font-size:.88rem}
.plate{border:2px solid #152127;border-radius:12px;box-shadow:0 9px 24px -18px rgba(10,15,25,.4)}
.plate-gb{background:linear-gradient(145deg,#1439b8,#102a75)}
.plate input{color:#142027}
.console .btn--blue{min-height:60px;border-radius:12px}
.note,.pane .note{color:#647787}
.note a{color:#2348d6}
.consent{background:#f6f8ff;border-color:#dfe8f5}
.consent p{color:#657586}
.opt span{color:#253544}
.opt input{background:#fff;border-color:#9dabb9}
.fld label,.model-ask label,.q>span.lbl{color:#4e6070}
.fld input,.model-ask select,.model-ask input{color:#11232f;border:1px solid #cbd6e0;background:#f8fafc}
.fld input::placeholder{color:#9eacb9}
.fld input:focus,.model-ask select:focus,.model-ask input:focus{background:#fff;border-color:#2348f5}
.model-ask option{background:#fff;color:#11232f}
.qgrid .opt-btn,.chip{background:#f7f9fc;border:1px solid #dce4ee;color:#344455}
.opt-btn:hover,.chip:hover{color:#2348f5;border-color:#2348f5;background:#eef3ff}
.opt-btn.sel{background:#e5fbd5;border-color:#55bd73;color:#173d28}
.chip small{color:#78899a}
.vfound{background:#eef2ff;border-color:#b9cbf5}
.vfound b{color:#23364d}
.vfound #vSpec{color:#617a91}
.saved{background:#e8f9ef;border-color:#b9dfcb;color:#155d36}
.match li{color:#677789}.match li.done{color:#234050}
.offer{background:#fff;border-color:#d8e0ea}.offer.best{background:#f0fdf1;border-color:#c2dec5}
.offer-who b{color:#293947}.offer-amt{color:#122532}
.spread{background:#eef3ff;border-color:#c9d7f1}.spread span{color:#526477}.spread b{color:#2348f5}
.err{color:#a11a34;background:#fff0f2}
.link-mini{color:#587489}.link-mini:hover{color:#2348f5}
.ph-wrap{background:#f6f9ff;border-color:#d9e2ef}
.ph-wrap h4{color:#223442}.ph-wrap>p,.ph-slot span{color:#667789}.ph-slot{background:#fff;border-color:#b8c8d8}
/* Oversized chrome/car theatre: decorative visual, does not alter SEO text. */
.hero-stage{width:min(1600px,118%);margin-top:8px;isolation:isolate;min-height:260px}
.hero-stage::before{content:"";position:absolute;z-index:-2;inset:0 3% 1%;border-radius:40px 40px 0 0;background:radial-gradient(ellipse at 50% 35%,rgba(255,255,255,.9),rgba(213,228,249,.65) 44%,rgba(173,204,255,.4) 75%,rgba(248,250,249,0) 98%);border-top:1px solid rgba(88,129,210,.24)}
.hero-stage::after{content:'COMPARE BETTER.     SELL SMARTER.';position:absolute;z-index:-1;left:8%;right:8%;top:10%;white-space:nowrap;overflow:hidden;text-align:center;font:900 clamp(4.2rem,13vw,14rem)/1 'Inter Tight',sans-serif;letter-spacing:-.075em;color:rgba(26,68,203,.095);pointer-events:none}
.hero-stage>svg{filter:drop-shadow(0 16px 16px rgba(51,76,109,.20));animation:c27glide 13s ease-in-out infinite;position:relative;z-index:2}
@keyframes c27glide{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.rail{border-top:1px solid #cbd9e6;margin-top:0;padding:20px 0 24px}
.rail li{color:#344c5e;font-size:.83rem;font-weight:600}
.rail svg{color:#2450ec}
/* Editorial deductions spread: pale blush with an authoritative ledger. */
.promise{background:#f6f4f0;padding:var(--sp) 0;isolation:isolate}
.promise::before{background:linear-gradient(140deg,rgba(255,255,255,.8),transparent 55%),radial-gradient(circle at 100% 10%,#ffece0,transparent 47%)}
.promise .eyebrow{color:#bf4b48;letter-spacing:.08em;text-transform:uppercase}
.promise h2[style]{color:#15212a!important;max-width:15ch}
.promise .lede--d{color:#556370}
.promise-list li{color:#273947;line-height:1.55}
.promise-list svg{color:#da5f56}
.promise-in{grid-template-columns:1.05fr .95fr;gap:clamp(48px,5vw,80px)}
.ledger{background:#fff;border:1px solid #e8dcd9;border-radius:26px;box-shadow:0 30px 80px -54px rgba(160,84,80,.35);transform:rotate(1deg)}
.ledger-h{background:#18252e;color:#eef3f5;border:0;padding:19px 23px}
.ledger-r{color:#4c5864;border-color:#edf0f2;padding:17px 23px}
.ledger-r b{color:#192831}
.ledger-r.cut b,.ledger-r.cut span::before{color:#d1524f}
.ledger-r.total{background:#fff0e9;border-color:#fadcd5}
.ledger-r.total b{color:#c73535;font-size:1.42rem}
.ledger-r.total span{color:#7b2222}
.promise .note{color:#9a7880}
/* The hero proof point: offer comparison is designed as an automotive gallery. */
.idea{background:#dce8ff;padding:var(--sp) 0 0;isolation:isolate}
.idea::before{background:radial-gradient(800px 600px at 50% 57%,rgba(255,255,255,.92),transparent 72%)}
.idea::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(90deg,rgba(23,71,200,.07) 1px,transparent 1px),linear-gradient(rgba(23,71,200,.055) 1px,transparent 1px);background-size:90px 90px;mask-image:linear-gradient(to bottom,transparent 0,#000 55%,transparent 100%);z-index:1}
.idea h2{color:#102439;max-width:18ch;font-size:clamp(3rem,5.4vw,6rem)}
.idea .lede--d{color:#4e6279}
.idea-stage{width:min(1450px,119%);margin-top:12px}
.idea-stage svg{filter:drop-shadow(0 15px 16px rgba(35,56,81,.22))}
.board{max-width:960px;gap:12px;margin-top:-28px}
.tick{border:1px solid #c5d2ee;background:rgba(255,255,255,.95);border-radius:18px;padding:19px 20px;box-shadow:0 20px 46px -30px rgba(31,72,127,.26)}
.tick span{color:#63768a;font-weight:600}
.tick b{color:#162e41;font-size:1.29rem;font-weight:700}
.tick.win{background:#2149f0;border:1px solid #2149f0;box-shadow:0 20px 36px -23px #2149f0}
.tick.win span{color:#dbe5ff}.tick.win b{color:#fff}
.diff{background:var(--c27-lime);border:0;border-radius:19px;margin-top:27px;padding:24px 44px;box-shadow:0 16px 40px -30px #7b8e29}
.diff span{color:#31503a;font-weight:700}.diff b{color:#142a24;font-size:clamp(2.5rem,5vw,4rem);font-weight:750}
.idea-note{color:#536884;padding-bottom:var(--sp);font-size:.79rem}
/* 2027 editorial interior surfaces */
.sec{padding:var(--sp) 0}
.sec--soft{background:#eff5f7}
.head{max-width:1000px;margin-bottom:clamp(30px,4vw,55px)}
.eyebrow{color:#2a4ef0;letter-spacing:.12em;text-transform:uppercase;font-weight:750;font-size:.72rem}
.lede{color:#5a6d7d}
.flow-row{grid-template-columns:95px .75fr 1fr;border-color:#d8e1e6;gap:30px;padding:30px 0}
.flow-n{font-size:1.1rem;color:#244df0;letter-spacing:-.05em}
.flow-row h3{font-size:clamp(2rem,3vw,3rem)}
.flow-row p{color:#596b77}
.sec--dark{background:#122232;color:#a9b9c8;position:relative;overflow:hidden}
.sec--dark::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 540px at 100% 0%,rgba(68,108,244,.26),transparent 75%);pointer-events:none}
.sec--dark .wrap{position:relative;z-index:1}
.sec--dark h2{color:#fff;max-width:16ch}
.sec--dark .why-row{border-color:rgba(225,240,255,.15)}
.why-row h3{font-size:clamp(1.48rem,2.3vw,2.2rem)}
.why-stat b{color:var(--c27-lime);font-size:clamp(1.2rem,1.9vw,1.85rem)}
.why-stat span{color:#9db0c1}
.meter{background:rgba(255,255,255,.13)}.meter i{background:var(--c27-lime)}
/* EV studio: optimistic clean surface with data-viz identity. */
.ev{background:#e5f2ed;position:relative}
.ev::before{background:radial-gradient(circle at 100% 30%,rgba(107,219,180,.25),transparent 50%),radial-gradient(circle at 0% 100%,rgba(255,255,255,.8),transparent 60%)}
.ev::after{content:'ELECTRIC  /  INTELLIGENCE';position:absolute;bottom:0;right:-3%;font:900 clamp(4rem,12vw,12rem)/1 'Inter Tight',sans-serif;letter-spacing:-.08em;white-space:nowrap;color:rgba(27,107,77,.065);pointer-events:none}
.ev .eyebrow{color:#166d60}
.ev h2[style]{color:#13362e!important}
.ev .lede--d{color:#48665c}
.ev .pill{background:rgba(255,255,255,.55);color:#1f4d40;border-color:#a8d2c3}
.ev .pill:hover{background:white;border-color:#217c67;color:#15392c}
.ev-spec{background:#fff;border:1px solid #c5e1d6;border-radius:24px;padding:11px 25px;box-shadow:0 24px 48px -33px #5e9c82}
.ev-spec div{border-color:#e1eee9;padding:16px 0}
.ev-spec span{color:#667f75}.ev-spec b{color:#193a31}.ev-spec b.hi{color:#07815e}
.ev-vs div{border-radius:15px;background:rgba(255,255,255,.8);border-color:#bedacd}
.ev-vs div.win{background:#153f34;border-color:#153f34}
.ev-vs span{color:#647f73}.ev-vs b{color:#173c31}
.ev-vs div.win span{color:#a6cfc0}.ev-vs div.win b{color:#b8fbda}
.ev .note{color:#60796e}
.calc{border-radius:27px;box-shadow:0 34px 75px -45px #60717e;border-color:#d6e0e6}
.calc-out{border-radius:19px}
.list a{padding:27px 0}.list h3{font-size:clamp(1.36rem,2.2vw,2rem)}
.cols{gap:32px}.cols h4{text-transform:uppercase;letter-spacing:.06em;font-size:.75rem}
.trust div{padding-top:32px;padding-bottom:32px}
.faq summary{font-size:clamp(1.05rem,1.65vw,1.45rem);padding-block:25px}
.final{background:#2047e8;padding:var(--sp) 0 0}
.final::before{background:radial-gradient(circle at 48% 110%,rgba(255,255,255,.27),transparent 58%)}
.final h2{font-size:clamp(3rem,6.4vw,6.5rem);max-width:17ch;letter-spacing:-.085em}
.final-stage{opacity:.85}
.final .btn--blue{background:var(--c27-lime);color:#122e27;border-color:var(--c27-lime)}
.ft{background:#111f2b;border-color:rgba(255,255,255,.12)}.ft h4{color:#e8f3fb}.ft a:hover{color:#bfdbff}
.sticky{background:rgba(250,251,247,.98);border-color:#d3dce4}
.sticky .btn--blue{min-height:49px}
/* Not an imitation of a luxury microsite at the expense of selling a car. */
@media(max-width:1180px){.hero-in{grid-template-columns:minmax(0,1fr) 410px;gap:28px}.hero h1{font-size:clamp(3.35rem,6vw,5.65rem)}}
@media(max-width:1024px){
 .nav,.hdr-act>.btn{display:none}
 .hero{padding-top:108px}
 .hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(310px,.82fr);gap:30px}
 .hero-copy{padding-top:20px}
 .hero h1{font-size:clamp(3rem,5.8vw,5.3rem)}
 .console{margin-top:20px}
 .hero-stage{width:136%}
 .promise-in{grid-template-columns:1fr}
 .ev-in{grid-template-columns:1fr}
 .split{grid-template-columns:1fr}
}
@media(max-width:800px){
 :root{--sp:clamp(60px,9vw,84px)}
 .hdr-in{height:70px}
 .brand b{font-size:1.05rem}
 .hero{padding-top:90px}
 .hero-in{display:flex;flex-direction:column;gap:23px}
 .hero-copy{padding-top:20px}
 .hero-copy::before{font-size:.58rem;margin-bottom:17px}
 .hero h1{font-size:clamp(3.1rem,10.4vw,6rem);line-height:.94;letter-spacing:-.085em}
 .hero-kick{font-size:.72rem;margin-bottom:18px}
 .hero-sub{font-size:1.02rem;line-height:1.54;margin-top:19px}
 .console{width:100%;max-width:650px;margin-top:10px}
 .hero-stage{width:166%;margin-top:10px;min-height:0}
 .hero-stage::after{font-size:17vw;top:13%}
 .rail{gap:12px 18px;padding:16px 0 19px}
 .rail li{font-size:.76rem}
 .promise-in{gap:33px}
 .ledger{transform:none}
 .idea-stage{width:155%}
 .board{margin-top:-4px;max-width:540px}
 .flow-row{grid-template-columns:42px 1fr;gap:15px}
 .flow-row p{grid-column:2}
 .ev .ev-vs{grid-template-columns:1fr 1fr}
 .ft-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
 .wrap{padding:0 20px}
 .hero{padding-top:78px}
 .hero-copy::before{letter-spacing:.075em}
 .hero h1{font-size:clamp(2.85rem,12.2vw,4.85rem);line-height:.92}
 .hero h1 .lit{white-space:nowrap}
 .hero-sub{font-size:.96rem}
 .hero-stage{width:188%;margin-top:20px}
 .hero-stage::before{border-radius:17px 17px 0 0}
 .console{border-radius:19px;margin-top:5px}
 .console::before{padding:13px 17px 0}
 .console-bar{padding:11px 17px 13px}
 .console-body{padding:18px 17px 20px}
 .pane h3{font-size:1.35rem}
 .plate input{font-size:1.75rem}
 .hero-in{gap:24px}
 .rail li:nth-child(n+5){display:none}
 .board{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:0 20px}
 .tick{padding:13px 12px;border-radius:12px}
 .tick span{font-size:.7rem}.tick b{font-size:1.05rem}
 .diff{width:calc(100% - 40px);padding:20px 17px}
 .promise h2,.idea h2,.ev h2,.final h2{font-size:clamp(2.65rem,10vw,4rem)}
 .ev .ev-vs{grid-template-columns:1fr}
 .hero-stage>svg{animation:none}
 .wa{right:14px}
}
@media(prefers-reduced-motion:reduce){.hero-stage>svg{animation:none!important}}

/* Award-direction cinema frame: original car SVG is retained in the source as a rollback asset. */
.cco2027-home .hero-stage{width:min(1540px,calc(100% - 48px));margin:20px auto 0;transform:none;height:clamp(385px,42vw,570px);min-height:0;overflow:hidden;border-radius:30px;box-shadow:0 45px 75px -65px #2e5685;border:1px solid rgba(119,166,216,.22)}
.cco2027-home .hero-stage::before{inset:0;z-index:1;border:0;border-radius:inherit;background:linear-gradient(180deg,rgba(236,244,255,.08) 0%,transparent 38%,rgba(9,35,70,.04) 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.cco2027-home .hero-stage::after{content:'STUDIO 27 / THE BETTER WAY TO SELL';font:800 .74rem/1.1 'JetBrains Mono',monospace;letter-spacing:.07em;color:#1a3856;background:rgba(255,255,255,.89);padding:12px 16px;border-radius:10px;position:absolute;top:22px;left:22px;right:auto;bottom:auto;z-index:3;white-space:nowrap;width:auto;max-width:calc(100% - 44px);box-shadow:0 7px 22px rgba(57,96,148,.13)}
.cco2027-home .hero-stage>svg{display:none}
.cco2027-home .hero-stage .cco2027-hero-photo{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 55%;position:relative;z-index:0}
.cco2027-home .hero-stage .haze,.cco2027-home .hero-stage .sweep{display:none}
.cco2027-home .hero .rail{margin-top:23px}
@media(max-width:800px){.cco2027-home .hero-stage{width:calc(100% - 32px);height:clamp(290px,65vw,430px);margin:7px auto 0;border-radius:20px}.cco2027-home .hero-stage .cco2027-hero-photo{object-position:center 51%}.cco2027-home .hero-stage::after{font-size:.58rem;top:12px;left:12px;padding:9px 10px}}
@media(max-width:560px){.cco2027-home .hero-stage{width:calc(100% - 28px);height:260px}.cco2027-home .hero-stage .cco2027-hero-photo{object-position:center 55%}}
/* Desktop film-still framing: image is visible above the fold without
   moving, cloning or re-binding the working DVLA valuation form. */
@media(min-width:1100px){
 .cco2027-home .hero{min-height:925px}
 .cco2027-home .hero-in{padding-bottom:115px;z-index:6}
 .cco2027-home .hero-stage{position:absolute;top:110px;right:0;left:auto;width:76%;height:654px;margin:0;border:0;border-radius:0;box-shadow:none;z-index:1}
 /* The photograph is mirrored and framed at 45% 42% so the car sits
    in the clear middle of the stage. Unmirrored and centred, it sat
    at 68% across — directly behind the white valuation console —
    and all you could see of it was two wheels. */
 .cco2027-home .hero-stage .cco2027-hero-photo{object-position:45% 42%}
 .cco2027-home .hero-stage::before{inset:0;background:linear-gradient(90deg,#fbfcf9 0%,rgba(251,252,249,.91) 12%,rgba(251,252,249,.18) 57%,transparent 90%);box-shadow:none}
 .cco2027-home .hero-stage::after{right:20px;left:auto;top:14px;opacity:.85}
 /* The standfirst was running the full 56ch across the photograph, so
    its last words sat on the car's wheel arch where the scrim has
    already faded out — grey text on a mid-grey car. Narrowing it to
    the clear part of the frame keeps every line on the solid wash.
    The headline still crosses the image deliberately: it is near-black
    at 90px and reads cleanly there. */
 .cco2027-home .hero-sub{max-width:38ch}
 .cco2027-home .hero-copy{position:relative;z-index:6}
 .cco2027-home .hero .rail{position:relative;z-index:6}
 .cco2027-home .hero-bg::after{display:none}
}
/* ==================================================================
   SUBPAGE HEROES — the other 166 pages.

   These were being held at the old near-black (#080d16) while the
   homepage went bright, which left the site reading as two different
   brands: one page cinematic and light, every other page dark. The
   rules below carry the same light studio treatment across all of
   them so the whole site is one design, not a redesigned homepage
   with 166 pages of the previous one behind it.

   The dark decorative layers (grid-floor, haze, sweep, vignette) are
   already globally hidden further up this file, so the work here is
   the canvas, the type colours, the console card and the car stage.
   ================================================================== */
.cco2027-inner .hero{
  background:#fbfcf8;
  border-bottom:1px solid #dbe5ee;
  padding-top:112px;
  overflow:hidden
}
/* The dark canvas is painted by .hero-bg ITSELF — its own
   background-image ends in linear-gradient(180deg,#0A0D13,…,#04060A).
   It is not on the ::before, whose `content` is `none`, so it never
   renders and overriding it changes nothing. This is the rule that
   actually has to win, and it is why simply recolouring the heading
   produced dark-on-dark. Same two corner washes the homepage uses,
   so the light comes from the same place on every page. */
.cco2027-inner .hero-bg{
  background:
    radial-gradient(720px 430px at 0% 4%,#e8f1ff 0,transparent 72%),
    radial-gradient(640px 430px at 100% 10%,#e2eaf9 0,transparent 68%),
    linear-gradient(180deg,#fbfcf9 0%,#f8faf8 52%,#eef4fd 100%)
}
.cco2027-inner .hero-bg::after{
  content:"";position:absolute;top:18px;right:-200px;
  width:660px;height:660px;border:1px solid rgba(36,72,244,.12);
  border-radius:50%;
  box-shadow:0 0 0 78px rgba(36,72,244,.032),0 0 0 156px rgba(36,72,244,.022)
}
.cco2027-inner .hero h1{
  color:var(--c27-ink);
  font-weight:800;
  font-size:clamp(2.45rem,5.3vw,4.5rem);
  letter-spacing:-.072em;
  line-height:.95;
  text-wrap:balance
}
.cco2027-inner .hero-sub{color:#53616e;max-width:54ch;line-height:1.62}

/* Breadcrumbs: these were pale grey for a black background and are
   close to invisible on the light canvas. */
.cco2027-inner .crumbs,
.cco2027-inner .crumbs ol,
.cco2027-inner .crumbs li{color:#64727c}
.cco2027-inner .crumbs a{color:#3d5ad8;text-decoration:none}
.cco2027-inner .crumbs a:hover{text-decoration:underline}
.cco2027-inner .crumbs [aria-current]{color:#1d2c38;font-weight:650}

/* Trust row ticks were a dark-background green. */
.cco2027-inner .hero .trust-row{color:#44535f}
.cco2027-inner .hero .trust-row li{color:#44535f}
.cco2027-inner .hero .trust-row svg{color:#19794a;stroke:#19794a}

/* The registration console. The subpages use .capture where the home
   page uses .console, so it needs lifting to the same white card
   rather than inheriting the old dark panel. */
.cco2027-inner .hero .capture{
  background:rgba(255,255,255,.97);
  border:1px solid rgba(37,73,112,.16);
  border-radius:22px;
  box-shadow:0 40px 92px -56px #284d89,0 12px 30px -22px #5978ac,inset 0 1px 0 #fff;
  padding:24px
}
.cco2027-inner .hero .capture h2{color:#111b22;font-weight:800;letter-spacing:-.05em}
.cco2027-inner .hero .capture .hint{color:#647583}
.cco2027-inner .hero .capture .note{color:#647787}
.cco2027-inner .hero .capture .note a{color:#2348d6}
.cco2027-inner .hero .capture input[type=text]{color:#142027}

/* The car. The artwork is a dark vehicle built for a black stage, so
   on the light canvas it is given a studio floor to stand on and its
   shadow is warmed up — otherwise it reads as a cut-out floating on
   white. */
.cco2027-inner .hero-stage{position:relative;isolation:isolate;margin-top:6px}
.cco2027-inner .hero-stage::before{
  content:"";position:absolute;z-index:-2;inset:12% 2% 0;
  border-radius:38px 38px 0 0;
  background:radial-gradient(ellipse at 50% 42%,
      rgba(255,255,255,.95) 0,
      rgba(214,229,250,.62) 46%,
      rgba(176,206,255,.34) 76%,
      rgba(248,250,249,0) 97%);
  border-top:1px solid rgba(88,129,210,.22);
  display:block
}
.cco2027-inner .hero-stage::after{display:none}
.cco2027-inner .hero-stage>svg{
  filter:drop-shadow(0 20px 20px rgba(51,76,109,.22));
  position:relative;z-index:2
}
.cco2027-inner .hero .btn--line-d{
  background:transparent;color:#1d2c38;border-color:rgba(29,44,56,.22)
}
.cco2027-inner .hero .btn--line-d:hover{border-color:#2348f5;color:#2348f5}

@media(max-width:800px){
 .cco2027-inner .hero{padding-top:92px}
 .cco2027-inner .hero h1{font-size:clamp(2.6rem,8.6vw,4.2rem)}
 .cco2027-inner .hero-bg::after{display:none}
 .cco2027-inner .hero .capture{padding:19px;border-radius:18px}
 /* The stage is blown out to 166–188% at these widths, which pushes
    both wheels off the screen and leaves a part of a car in the hero.
    A whole car is the stronger image, so the bleed is pulled back to
    just past the edges.

    transform:none is required, not optional: the base .hero-stage
    carries a translate that offsets it by roughly -230px at this
    width, so setting the width alone slides the car off to the left
    and you see its back half. The homepage rule sets transform:none
    for the same reason. */
 .cco2027-inner .hero-stage{
   width:114%;margin-left:-7%;margin-right:-7%;transform:none
 }
 .cco2027-inner .hero-stage::before{inset:16% 0 0;border-radius:22px 22px 0 0}
}
@media(max-width:560px){
 .cco2027-inner .hero-stage{
   width:120%;margin-left:-10%;margin-right:-10%;transform:none
 }
}

/* ==================================================================
   REAL PHOTOGRAPHY IN PLACE OF THE DRAWN CAR

   Every page carried a 15KB inline vector drawing of a car with
   painted-on reflections, shown at photographic scale. An illustration
   doing an impression of a photograph always reads as fake, however
   well it is lit, so the drawing is replaced with an actual
   photograph on all 166 subpages.

   The SVG is hidden rather than deleted. It stays in the markup as a
   rollback asset and costs nothing to render, and removing it from
   167 files would be a far larger change than this needs to be.

   Two body styles: saloon by default, SUV on the 44 make and model
   pages where a saloon would be plainly wrong (Land Rover, Cayenne,
   X5, Model Y and the rest). The class is set on <body>.
   ================================================================== */
.cco2027-inner .hero-stage{
  height:clamp(228px,29vw,432px);
  width:100%;
  margin:6px 0 0;
  transform:none;
  overflow:hidden;
  background-image:url("/assets/cco-2027-car-saloon.webp?v=6.2");
  background-size:cover;
  background-position:center 56%;
  background-repeat:no-repeat
}
.cco2027-inner.cco2027-suv .hero-stage{
  background-image:url("/assets/cco-2027-car-suv.webp?v=6.2")
}
/* The drawn car and the studio floor that was built for it. The
   photograph brings its own floor, lighting and shadow. */
.cco2027-inner .hero-stage>svg{display:none}
.cco2027-inner .hero-stage::before{display:none}

@media(max-width:800px){
 .cco2027-inner .hero-stage{
   height:clamp(176px,38vw,280px);
   width:100%;margin-left:0;margin-right:0;
   background-position:center 58%
 }
}
@media(max-width:560px){
 .cco2027-inner .hero-stage{
   height:168px;width:100%;margin-left:0;margin-right:0
 }
}

/* ==================================================================
   v6.0 — REFINEMENT PASS

   Nothing below touches a word of page content. Every label removed
   here is a decorative string injected by CSS, not copy, and the one
   piece of real text affected ("Why we built this") is authored in
   sentence case in the HTML and was only being shouted by a
   text-transform.

   The problem being fixed: the page was wearing every accessory at
   once. Three injected eyebrow labels, two giant ghost words behind
   sections, a monospace face used as decoration rather than for
   data, all-caps labels, and three bright accents competing — brand
   blue, a lime, and the yellow of the number plate.

   The idea: the most characteristic object in UK car selling is the
   yellow plate, and it is already the first thing a seller types
   into. So the accent is the plate. Not picked from a palette, taken
   from the subject. One accent, one meaning, and the lime goes.
   ================================================================== */

:root{
  --c27-ink:#0c171d;          /* deepened; more authority at 90px */
  --c27-plate:#f3d51b;        /* THE accent — it is the number plate */
  --c27-cut:#a8372a;          /* deductions: a considered red, not alarm */
  --c27-line:#dce4ea;
  /* Two-layer shadows. One flat grey drop under everything is the
     SaaS-card default; near-surface contact plus a wide soft cast is
     how real objects sit on a page. */
  --c27-lift-1:0 1px 2px rgba(14,32,45,.06), 0 8px 20px -12px rgba(14,32,45,.18);
  --c27-lift-2:0 2px 4px rgba(14,32,45,.07), 0 28px 60px -34px rgba(20,44,70,.34);
}

/* ---------- 1. Remove the decorative chrome ---------- */
/* "CCO / 2027 — A BETTER WAY TO SELL" above the headline. The
   headline already says what the page is. */
.hero-copy::before{content:none !important}
/* "START HERE / 01". The console is a sequence, but the label was
   doing decoration rather than wayfinding — the form shows its own
   progress immediately below. */
.console::before{content:none !important}
/* "STUDIO 27 / THE BETTER WAY TO SELL" floating on the photograph. */
.cco2027-home .hero-stage::after{content:none !important}
/* Giant ghost words set behind two sections at 14rem. */
.hero-stage::after,.ev::after{content:none !important}

/* ---------- 2. Labels speak, they don't shout ---------- */
.eyebrow,.promise .eyebrow,.ev .eyebrow{
  text-transform:none;
  letter-spacing:-.01em;
  font-family:'Inter Tight',sans-serif;
  font-weight:650;
  font-size:.95rem
}
.eyebrow{color:#5b6a78}
.eyebrow--d{color:#7e8da0}
.promise .eyebrow{color:#9c4b43}
.ev .eyebrow{color:#2d7a64}

/* ---------- 3. One accent ---------- */
/* The headline mark was a lime bar; it is now the plate's yellow, so
   the accent under the word and the plate the seller types into are
   the same colour and the same idea. */
.hero h1 .lit::after{
  background:var(--c27-plate);
  height:9px;border-radius:2px;transform:none;
  bottom:.015em;opacity:.92
}

/* ---------- 4. Typographic refinement ---------- */
h1,h2{text-wrap:balance}
p,li{text-wrap:pretty}                /* kills single-word last lines */
.hero h1{letter-spacing:-.085em}
h2{letter-spacing:-.07em}
.hero-sub,.sec p,.prose p{hanging-punctuation:first allow-end}
/* Figures line up in columns, as figures should. */
.ledger-r b,.ledger-h span:last-child,.cmp b,.cmp td,.num,.stat b{
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1
}

/* ---------- 5. Depth, applied by hierarchy ---------- */
.console{box-shadow:var(--c27-lift-2),inset 0 1px 0 #fff}
.cco2027-inner .hero .capture{box-shadow:var(--c27-lift-2),inset 0 1px 0 #fff}
.ledger{box-shadow:var(--c27-lift-2);border-color:#e9eef2;border-radius:20px}
.card,.tile,.panel{box-shadow:var(--c27-lift-1)}

/* ---------- 6. The ledger: the one moment on the page ---------- */
/* The argument of the whole site is that a quoted number quietly
   becomes a smaller one. The ledger says it in figures; here it
   performs it. The deductions strike through in sequence as the
   ledger arrives, and the figure that actually reaches the seller
   lands last. Nothing else on the page moves. */
.ledger{position:relative}
.ledger-h{background:#101c24}
.ledger-r.cut b{color:var(--c27-cut)}
.ledger-r.cut span{position:relative}
.ledger-r.total{background:#fdf6ec;border-color:#f2e4cd}
.ledger-r.total span{color:#6b4a14}
.ledger-r.total b{color:#2f1e05;font-size:1.52rem;letter-spacing:-.03em}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    /* A rule drawn through each deduction, one after the next. */
    .ledger-r.cut b{
      background-image:linear-gradient(var(--c27-cut),var(--c27-cut));
      background-repeat:no-repeat;
      background-position:0 56%;
      background-size:0% 1.5px;
      animation:c27strike linear forwards;
      animation-timeline:view();
      animation-range:cover 32% cover 62%
    }
    .ledger-r.cut:nth-of-type(3) b{animation-range:cover 36% cover 64%}
    .ledger-r.cut:nth-of-type(4) b{animation-range:cover 40% cover 66%}
    .ledger-r.cut:nth-of-type(5) b{animation-range:cover 44% cover 68%}
    .ledger-r.cut:nth-of-type(6) b{animation-range:cover 48% cover 70%}
    /* The figure that actually reaches you arrives after them. */
    .ledger-r.total{
      animation:c27land linear forwards;
      animation-timeline:view();
      animation-range:cover 58% cover 78%
    }
  }
}
@keyframes c27strike{from{background-size:0% 1.5px}to{background-size:100% 1.5px}}
@keyframes c27land{
  from{background-color:#fff;box-shadow:inset 0 0 0 0 rgba(243,213,27,0)}
  to{background-color:#fdf6ec;box-shadow:inset 3px 0 0 0 var(--c27-plate)}
}

/* ---------- 7. The photograph dissolves instead of butting up ----
   The hero photograph was a hard-edged rectangle: a visible vertical
   seam ran the full height of the hero where the pale page met the
   near-white image, and another across the bottom. Feathering both
   edges lets the picture sit in the page rather than on it.

   (A gradient was tried across the joins between the colour bands
   too. It had to paint over the content to be seen, which put a wash
   across the small print at the foot of a section. A crisp join is
   better than a soft one that costs legibility.) */
@media(min-width:1100px){
  .cco2027-home .hero-stage{
    -webkit-mask-image:
      linear-gradient(90deg,transparent 0,rgba(0,0,0,.4) 8%,#000 27%),
      linear-gradient(to bottom,transparent 0,#000 8%,#000 86%,transparent 100%);
    mask-image:
      linear-gradient(90deg,transparent 0,rgba(0,0,0,.4) 8%,#000 27%),
      linear-gradient(to bottom,transparent 0,#000 8%,#000 86%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-composite:intersect
  }
  /* The white scrim over the photograph is no longer doing the work
     of hiding that seam, so it can be lighter and let more of the
     car through. */
  .cco2027-home .hero-stage::before{
    background:linear-gradient(90deg,
      rgba(251,252,249,.92) 0%,
      rgba(251,252,249,.62) 18%,
      rgba(251,252,249,.12) 52%,
      transparent 78%)
  }
}

/* ---------- 8. Quality floor ---------- */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2.5px solid var(--c27-blue);
  outline-offset:3px;
  border-radius:4px
}
.plate:focus-within{
  box-shadow:0 0 0 4px rgba(35,72,245,.22),0 9px 24px -18px rgba(10,15,25,.4)
}
.btn,.btn--blue{transition:transform .14s cubic-bezier(.2,.7,.3,1),box-shadow .14s}
.btn:active,.btn--blue:active{transform:translateY(1px)}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ==================================================================
   v6.1 — CLARET

   The action colour moves from a bright primary blue to a deep
   claret. The blue was the least elite thing on the page: a
   saturated, almost electric primary used across every button at
   full area.

   Two decisions worth recording.

   1. THE DEDUCTIONS GO GREY. Red already meant something here — it
      was the colour of money being taken off a quote. A red CTA and
      red deductions on the same page would make "sell your car" and
      "you just lost £480" the same signal. One colour, one meaning,
      so the deductions become graphite and the strike-through
      carries the story instead.

   2. THE PLATE'S GB FLASH STAYS BLUE. It is a real UK number plate.
      Recolouring it to match the brand would make it a graphic
      instead of a plate, and the plate is the whole idea.

   The plate yellow is untouched and remains the one accent.
   ================================================================== */

:root{
  --c27-blue:#8e1f2b;        /* action: deep claret */
  --blue:#8e1f2b;
  --blue-deep:#6d1621;       /* hover / pressed */
  --blue-light:#a8394a;
  --c27-cut:#6b6f74;         /* deductions: graphite, no longer red */
}

/* Hardcoded blues that would otherwise show through the variables. */
.hero-kick{
  background:rgba(243,228,230,.88) !important;
  border-color:#e6c6cb !important;
  color:#7b1b26 !important
}
.hero-kick i{background:#8e1f2b !important;box-shadow:0 0 0 4px rgba(142,31,43,.14) !important}
.hero h1 .lit{color:#8e1f2b}
.hero-copy::before{color:#8e1f2b}
.note a,.pane .note a{color:#7b1b26}
.cco2027-inner .crumbs a{color:#8a2432}
.eyebrow{color:#5b6a78}
.promise .eyebrow{color:#8e1f2b}

/* Buttons and focus. */
.btn--blue,.console .btn--blue{background:#8e1f2b}
.btn--blue:hover{background:#6d1621}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline-color:#8e1f2b}
.plate:focus-within{box-shadow:0 0 0 4px rgba(142,31,43,.24),0 9px 24px -18px rgba(10,15,25,.4)}
.fld input:focus,.model-ask select:focus,.model-ask input:focus{border-color:#8e1f2b}

/* Tints that were blue-based. */
.consent{background:#fdf6f6;border-color:#f0dcdf}
.qgrid .opt-btn:hover,.chip:hover{border-color:#c9a3a9}
.hero-bg::after,.cco2027-inner .hero-bg::after{
  border-color:rgba(142,31,43,.12);
  box-shadow:0 0 0 78px rgba(142,31,43,.03),0 0 0 156px rgba(142,31,43,.02)
}
.idea::after{
  background-image:linear-gradient(90deg,rgba(142,31,43,.055) 1px,transparent 1px),
                   linear-gradient(rgba(142,31,43,.045) 1px,transparent 1px)
}
.sec--dark::before{background:radial-gradient(700px 540px at 100% 0%,rgba(142,31,43,.24),transparent 75%)}

/* Confirmation ticks stay green. A tick means "yes, included"; that
   is not the action colour's job, and green against claret reads
   clearly. */
.trust-row svg,.hero .trust-row svg,.cco2027-inner .hero .trust-row svg{
  color:#19794a;stroke:#19794a
}

/* The deductions, now graphite. The strike-through does the work. */
.ledger-r.cut b{color:#6b6f74}
.ledger-r.cut span::before{color:#7f868d}   /* darkened: #9aa1a7 was 2.62 against white, under the 3.0 floor */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .ledger-r.cut b{background-image:linear-gradient(#6b6f74,#6b6f74)}
  }
}

/* ---------- claret: the three places that were still blue ---------- */

/* The closing call-to-action was a solid blue band with a lime
   button — the last two survivors of the old palette, and the lime
   was retired everywhere else. Claret band, plate-yellow button:
   the brand's two colours doing the biggest moment on the page. */
.final{background:#8e1f2b}
.final::before{background:radial-gradient(circle at 48% 110%,rgba(255,255,255,.2),transparent 58%)}
.final .btn--blue{background:#f3d51b;color:#2a1a02;border-color:#f3d51b}
.final .btn--blue:hover{background:#e6c711;border-color:#e6c711}

/* The brand mark's chevrons are coloured by inline stroke attributes
   in the markup, so they survived the variable change and left a
   blue logo on a claret site. A CSS rule outranks a presentation
   attribute, so this recolours them without touching the HTML. The
   green dot stays: it reads as "live", matches the confirmation
   ticks, and is not the action colour. */
.brand svg path[stroke]{stroke:#8e1f2b}
.brand svg path[stroke][opacity]{stroke:#b4616c}

/* The lime was meant to be retired when the accent became the plate
   yellow, but it was only replaced under the headline. It survived
   on the comparison panel, the statistics in the dark section and
   the meter fills. Redefining the variable retires it everywhere at
   once rather than leaving a fourth colour loose in the system. */
:root{--c27-lime:#f3d51b}

/* ---------- the last four blues ----------
   Found by walking the rendered page and flagging any computed
   colour that was still reading as blue, rather than by trusting
   the variable swap. Each of these was set with a literal hex, so
   redefining the tokens never touched them. */

/* The hero's trust ticks. These sit in .rail, not .trust-row, so
   the earlier rule for the ticks went straight past them and left
   six blue checkmarks under a claret hero. */
.rail svg{color:#19794a}

/* Step numbers in the how-it-works flow. */
.flow-n{color:#8e1f2b}

/* The winning row in the buyer comparison. */
.tick.win{background:#8e1f2b;border-color:#8e1f2b;box-shadow:0 20px 36px -23px rgba(142,31,43,.75)}
.tick.win span{color:#f4dcdf}

/* Links inside the dark section were a pale blue. On near-black a
   pale rose carries the same brand without going muddy. */
.sec--dark a,.final a{color:#edb3bc}
.sec--dark a:hover,.final a:hover{color:#f7d3d9}

/* The cookie banner's policy link. It sits on the dark banner and was
   inheriting the old pale blue, so it was the single blue thing left
   on every page. */
.consent-bar a,.cookie-bar a,#consent a,.cc a{color:#edb3bc}
.consent-bar a:hover,.cookie-bar a:hover,#consent a:hover,.cc a:hover{color:#f7d3d9}

/* The hero stage's hairline was a pale blue-grey. */
.cco2027-inner .hero-stage,.hero-stage{border-top-color:rgba(190,170,174,.3)}

/* ---------- the pale blue surfaces ----------
   The section tints were cool blues chosen to sit under a blue
   brand. Under claret they are the last thing on the page still
   pulling the other way, so they move to a warm stone and a soft
   blush. The palette is now entirely warm apart from the number
   plate's GB flash, which is blue because real plates are. */
.idea{background:#f3e9ea}
.idea::before{background:radial-gradient(800px 600px at 50% 57%,rgba(255,255,255,.94),transparent 72%)}
.hero-bg::before{
  background:
    radial-gradient(710px 430px at 2% 8%,#f7eeef 0,transparent 75%),
    radial-gradient(650px 440px at 100% 12%,#f4eae6 0,transparent 70%),
    linear-gradient(180deg,#fbfcf9 0%,#faf8f6 45%,#f6eef0 100%)
}
.cco2027-inner .hero-bg{
  background:
    radial-gradient(720px 430px at 0% 4%,#f8eff0 0,transparent 72%),
    radial-gradient(640px 430px at 100% 10%,#f4eae6 0,transparent 68%),
    linear-gradient(180deg,#fbfcf9 0%,#faf8f6 52%,#f6eef0 100%)
}
.cco2027-inner .hero-stage::before{
  background:radial-gradient(ellipse at 50% 42%,
    rgba(255,255,255,.95) 0,rgba(244,232,233,.6) 46%,
    rgba(234,210,213,.34) 76%,rgba(248,250,249,0) 97%)
}
:root{--c27-sky:#f4e7e8;--paper-2:#f8f3f2}

/* ---------- the last two drawn cars ----------
   The homepage still had the vector car in two places: behind the
   buyer comparison, and in the closing band. Both were missed when
   the subpages moved to photography, so the one page most people
   see had a real photograph at the top and a drawing further down.

   Comparison section: the photograph, feathered into the blush so
   it reads as a car on a surface rather than a pasted rectangle.
   The four buyer cards sit over it, so it is deliberately quiet. */
.cco2027-home .idea-stage{
  height:clamp(230px,26vw,390px);
  width:100%;margin:12px 0 0;transform:none;overflow:hidden;
  background:url("/assets/cco-2027-car-saloon.webp?v=6.2") center 54%/cover no-repeat;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 82%,transparent 100%),
                     linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 82%,transparent 100%),
             linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  opacity:.92
}
.cco2027-home .idea-stage svg{display:none}

/* Closing band: no car at all. It is a claret field with the largest
   type on the page and a plate-yellow button. A washed-out car
   behind that would only dilute it, and a bright studio photograph
   on a deep claret ground would read as a pasted-on rectangle. */
.cco2027-home .final-stage{display:none}

@media(max-width:800px){
  .cco2027-home .idea-stage{height:clamp(170px,36vw,260px);width:100%}
}

/* ==================================================================
   v6.2 — TYPE SPACING

   The display type was tracked at -0.085em and set on a 0.91
   line-height. That is extreme compression, and the side effect is
   the thing you can actually see: negative letter-spacing shrinks
   the SPACE character along with the letters. At 90px, -0.085em
   takes roughly 7.6px out of every word gap, and Inter's space is
   only about 23px wide — so a third of the gap between words
   disappears and the words run into each other.

   Squeezed type reads as cheap, not expensive. Restraint at display
   size means tight-but-breathing, not crammed. So the tracking comes
   back to around -0.03em, a positive word-spacing restores the gaps
   the tracking takes away, and the lines get room to sit.
   ================================================================== */

h1,h2,h3,h4{letter-spacing:-.028em;word-spacing:.02em}

.hero h1{
  letter-spacing:-.032em;
  word-spacing:.05em;      /* gives back what the tracking removes */
  line-height:1.0
}
h2{letter-spacing:-.03em;word-spacing:.03em;line-height:1.04}
.final h2{letter-spacing:-.032em;word-spacing:.04em}
.idea h2{letter-spacing:-.03em}
.cco2027-inner .hero h1{letter-spacing:-.03em;word-spacing:.045em;line-height:1.02}
.cco2027-inner .hero .capture h2{letter-spacing:-.022em}
.pane h3{letter-spacing:-.024em}
.brand b{letter-spacing:-.022em}
.flow-n{letter-spacing:-.02em}

/* Body copy was very slightly condensed too. At text sizes there is
   nothing to gain from it, so it sits at normal. */
body{letter-spacing:normal}
.hero-sub,.sec p,.prose p,li{letter-spacing:normal;word-spacing:normal}

/* Figures read better with a touch of air, and tabular lining
   numerals keep the columns aligned. */
.ledger-r b,.cmp b,.num,.stat b,.why-stat b{letter-spacing:-.01em}

@media(max-width:800px){
  .hero h1{letter-spacing:-.03em;word-spacing:.045em;line-height:1.02}
  .cco2027-inner .hero h1{letter-spacing:-.028em;line-height:1.04}
}