/* ===========================================================================
home.css — HALCYON CLEARANCE — homepage-only stylesheet
---------------------------------------------------------------------------
Ported from the picked design option
`high-end-visual-leftbar-pill.html` (ui-review run halcyon-home-20260720),
a self-contained static mockup carrying its own complete stylesheet.
SCOPE — index.html ONLY. Every other page (about.html, account.html,
staff.html, driver.html, quote.html, etc.) loads styles.css alone and never
sees this file.
NOT YET LINKED (Wave 1, 2026-07-21) — index.html still carries its OLD
markup. Linking this file against the old markup would break the live
homepage mid-flight, since the classes below only match the NEW markup.
Wave 3 ports the homepage markup AND adds
`` to index.html in the same step,
loaded AFTER styles.css (same load order as every other page's second
stylesheet, e.g. account.html -> styles.css then account.css).
RENAMES — a full selector-set diff against styles.css found 19 colliding
class names and 3 colliding custom properties (different values under the
same name). Every one is renamed here under an `hc-` prefix; every
non-colliding class/property keeps the mockup's original name unchanged.
The exact mapping lives in `scratchpad/wave1/rename-map.json` (Wave 1
working copy) — Wave 3 MUST consume it when porting the markup, or a
missed rename is a silently unstyled element on the live homepage.
Bare element selectors (body, h1-h4, p, a, img/svg, section, footer, html,
the universal box-sizing reset) are NOT renamed — they can't be scoped by
name, and since this file only ever loads on index.html, letting them
fully re-theme the homepage's base type is intended, not a collision.
========================================================================= */
:root{
--ink:#111820;
--ink-2:#161f28;
--hc-ink-3:#1c2530;
--graphite:#292B2D;
--steel:#4C4F51;
--ash:#B2B1B0;
--zinc:#E4E4E7;
--paper:#F6F7F9;
--sand:#847D70;
--bronze:#846B45;
--amber:#F2A900;
--hc-amber-ink:#2b1f00;
/* Hanken Grotesk is NOT re-declared here, and neither is --display. styles.css
already self-hosts all four weights (500/600/700/800) as real .woff2 at
/vendor/fonts/hanken-*.woff2 and owns the canonical --display stack; this file
is only ever loaded AFTER it on index.html, so var(--display) below inherits
that stack. Re-declaring it here would fork the fallback face: index.html would
drop to a different system font from the other 15 pages whenever the woff2
fails to load. That also keeps out the mockup's original ~55KB of base64. */
--body: -apple-system, BlinkMacSystemFont, "Segoe UI", ui-sans-serif, system-ui, Helvetica, Arial, sans-serif;
--hc-ease: cubic-bezier(.16,1,.3,1);
--ease-press: cubic-bezier(.32,.72,0,1);
--container: 1280px;
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
margin:0;
background:var(--ink);
color:var(--paper);
font-family:var(--body);
line-height:1.5;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:-0.02em;margin:0;text-wrap:balance;}
p{margin:0;}
.wrap{max-width:var(--container);margin:0 auto;padding-inline:clamp(1.25rem,4vw,3rem);}
.hc-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
/* focus — DUAL RING, matching styles.css:117. Ground-agnostic by construction:
ink clears the 3:1 floor on every light ground (16.9:1 on Paper, 8.6:1 on
amber) and amber clears it on every dark one (8.6:1 on Ink), so whichever
band a control lands in, one of the two colours is always visible. This
replaces an amber-default + light-ground-allowlist, which silently failed
at 2.02:1 for any focusable element placed in a white bezel outside the
allowlist — see DESIGN.md "Amber-on-light is fill-only". */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible,
[tabindex]:focus-visible{
outline:3px solid var(--ink);
outline-offset:3px;
box-shadow:0 0 0 3px var(--amber);
border-radius:4px;
}
@media (prefers-reduced-motion:reduce){
*{transition-duration:.001ms !important;animation-duration:.001ms !important;scroll-behavior:auto !important;}
}
/* ---------- DOUBLE-BEZEL (nested card architecture) ---------- */
.bezel{padding:.4rem;border-radius:1.75rem;background:rgba(246,247,249,.05);border:1px solid rgba(246,247,249,.12);}
.bezel-core{border-radius:1.4rem;background:var(--ink-2);box-shadow:inset 0 1px 0 rgba(246,247,249,.07);}
.bezel-light{padding:.4rem;border-radius:1.5rem;background:rgba(17,24,32,.04);border:1px solid rgba(17,24,32,.09);}
.bezel-light .bezel-core{border-radius:1.15rem;background:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(17,24,32,.05);}
/* ---------- BUTTONS (magnetic press physics) ---------- */
.hc-btn{
display:inline-flex;align-items:center;gap:.55rem;
padding:.68rem .5rem .68rem 1.35rem;border-radius:999px;
font-size:.9rem;font-weight:700;font-family:var(--body);
transition:transform .35s var(--ease-press),background .3s var(--hc-ease),color .3s var(--hc-ease),border-color .3s var(--hc-ease),box-shadow .3s var(--hc-ease);
border:1px solid transparent;
cursor:pointer;min-height:44px;
}
.hc-btn:hover{transform:translateY(-1px);}
.hc-btn:active{transform:scale(.97) translateY(0);}
.btn-icon{
flex:none;width:1.85rem;height:1.85rem;border-radius:999px;
display:flex;align-items:center;justify-content:center;
transition:transform .35s var(--ease-press),background .3s var(--hc-ease);
}
.btn-icon svg{width:.95rem;height:.95rem;}
.hc-btn:hover .btn-icon{transform:translate(2px,-2px);}
.hc-btn-amber{background:var(--amber);color:var(--ink);}
.hc-btn-amber .btn-icon{background:rgba(17,24,32,.14);}
.hc-btn-amber:hover{background:#ffbe1f;}
.btn-outline{border-color:rgba(246,247,249,.35);color:var(--paper);background:transparent;padding-right:1.35rem;}
.btn-outline:hover{border-color:var(--paper);background:rgba(246,247,249,.06);}
.hc-btn-ink{background:var(--ink);color:var(--paper);}
.hc-btn-ink .btn-icon{background:rgba(246,247,249,.12);}
.hc-btn-ink:hover{background:var(--graphite);}
.band-paper .btn-outline{border-color:rgba(17,24,32,.25);color:var(--ink);padding-right:1.35rem;}
.band-paper .btn-outline:hover{border-color:var(--ink);background:rgba(17,24,32,.05);}
/* ---------- TRADE CHIP (hero, pre-launch — 2026-08-08) ----------
Sits UNDER the main CTAs, not beside them: the trade offer is a second
audience, not a second choice for the same person. Deliberately quieter
than the amber button — a builder scanning for "£250" finds it, and a
householder is not pulled towards a rate that is not for them. */
.hero-trade{margin:.9rem 0 0;}
/* A second chip sits tighter to the first than the first does to the CTAs —
the two chips are one group (offers for people who are not the main
audience), not two separate afterthoughts. */
.hero-trade--second{margin-top:.5rem;}
.trade-chip{display:inline-flex;align-items:center;gap:.6rem;
padding:.5rem .55rem .5rem .5rem;border-radius:999px;
background:rgba(246,247,249,.07);border:1px solid rgba(246,247,249,.22);
color:var(--paper);text-decoration:none;font-size:.9rem;line-height:1.25;
transition:background .18s ease,border-color .18s ease;}
.trade-chip:hover{background:rgba(246,247,249,.13);border-color:rgba(246,247,249,.45);}
.trade-chip:focus-visible{outline:2px solid var(--amber);outline-offset:2px;}
.trade-chip__tag{flex:none;background:var(--amber);color:var(--ink);
font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
padding:.24rem .5rem;border-radius:999px;}
.trade-chip__text strong{color:#fff;font-weight:700;}
.trade-chip__go{flex:none;display:inline-flex;align-items:center;justify-content:center;
width:1.35rem;height:1.35rem;border-radius:50%;background:rgba(246,247,249,.14);
transition:transform .18s ease;}
.trade-chip__go svg{width:.8rem;height:.8rem;fill:none;stroke:currentColor;
stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.trade-chip:hover .trade-chip__go{transform:translate(2px,-2px);}
@media (max-width:520px){
/* Wrapping a pill mid-sentence looks broken, so below the fold-width it
becomes a full-width block with the tag on its own line.
The arrow is REORDERED onto that first line beside the tag (2026-08-10,
independent walk): left in source order it fell alone into the bottom
right corner of a 119px-tall card, and the empty corner read as an
unfinished box rather than a chip. */
.trade-chip{display:flex;flex-wrap:wrap;border-radius:14px;padding:.6rem .7rem;
row-gap:.35rem;}
.trade-chip__tag{order:1;}
.trade-chip__go{order:2;margin-left:auto;}
.trade-chip__text{order:3;flex:1 1 100%;}
}
}
@media (prefers-reduced-motion:reduce){
.trade-chip,.trade-chip__go{transition:none;}
.trade-chip:hover .trade-chip__go{transform:none;}
}
/* ---------- NAV (floating island, not edge-to-edge) ---------- */
header.hc-site-nav{
position:fixed;top:1rem;left:50%;transform:translateX(-50%);z-index:80;
width:min(94%,1320px);
border-radius:999px;
background:rgba(17,24,32,.82);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
border:1px solid rgba(246,247,249,.12);
box-shadow:0 12px 34px rgba(0,0,0,.28);
}
/* Top bar left-aligned: wordmark, nav and utilities read as one left-anchored cluster.
Nothing is pushed to the right edge — the empty right side of the bar is the point. */
.nav-row{display:flex;align-items:center;justify-content:flex-start;gap:clamp(1.5rem,3vw,3rem);padding:.55rem 1.35rem;}
.nav-row .nav-util{margin-left:0;}
.hc-brand{display:flex;align-items:center;gap:.6rem;font-family:var(--display);font-weight:800;font-size:1.02rem;letter-spacing:-0.01em;}
.hc-brand .mark{
width:2rem;height:2rem;border-radius:7px;background:var(--amber);
color:var(--ink);display:flex;align-items:center;justify-content:center;
font-family:var(--display);font-weight:800;font-size:.85rem;flex:none;
}
.nav-links{display:flex;align-items:center;gap:1.6rem;font-size:.88rem;color:var(--zinc);}
.nav-links a{white-space:nowrap;transition:color .2s var(--hc-ease);position:relative;padding-block:.25rem;}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:var(--amber);transition:right .3s var(--hc-ease);}
.nav-links a:hover{color:var(--paper);}
.nav-links a:hover::after{right:0;}
.nav-util{display:flex;align-items:center;gap:.35rem;font-size:.82rem;color:var(--ash);}
.nav-util a{display:inline-flex;align-items:center;min-height:44px;padding:0 .6rem;transition:color .2s var(--hc-ease);}
.nav-util a:hover{color:var(--paper);}
/* Login + Get a quote as one paired control. flex:none and nowrap so the pair can never split
or drop to a second row — that orphaning is what the operator's screenshot showed. */
.nav-util{flex-wrap:nowrap;}
.nav-actions{display:inline-flex;align-items:center;gap:.4rem;flex:none;margin-left:.35rem;}
.nav-util .hc-btn{padding:.5rem .5rem .5rem 1.05rem;font-size:.85rem;}
.nav-util .btn-ghost-nav{padding:.5rem 1.05rem;}
/* Ghost pill on the ink bar: Paper text measures ~15.9:1 against the bar, and the border
composites to ~3.8:1 — over the 3:1 floor for a non-text boundary. */
.btn-ghost-nav{color:var(--paper);background:rgba(246,247,249,.06);border-color:rgba(246,247,249,.45);}
.btn-ghost-nav:hover{color:var(--paper);background:rgba(246,247,249,.14);border-color:var(--paper);}
.hamburger{
display:none;width:2.75rem;height:2.75rem;flex:none;
border:1px solid rgba(246,247,249,.3);border-radius:999px;background:transparent;color:var(--paper);
align-items:center;justify-content:center;cursor:pointer;padding:0;
}
.hamburger svg{width:1.2rem;height:1.2rem;}
.mobile-panel{display:none;}
.mobile-panel.hc-open{
display:flex;position:fixed;inset:0;z-index:95;
flex-direction:column;background:var(--ink);
}
.mobile-top{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.25rem;border-bottom:1px solid rgba(246,247,249,.1);}
.mobile-links{display:flex;flex-direction:column;padding:.5rem 1.5rem 2rem;overflow-y:auto;}
.mobile-links a{padding:1rem 0;border-bottom:1px solid rgba(246,247,249,.1);font-size:1.05rem;min-height:44px;display:flex;align-items:center;}
.mobile-links .hc-btn{margin-top:1.5rem;justify-content:center;}
/* ---------- HERO ---------- */
.hc-hero{
position:relative;
min-height:100svh;
/* 2026-08-10 (operator: "shift this all up"): the block was pinned to the
BOTTOM of a full-viewport hero, which left a dead band of sky above the
headline and pushed the rate card and the trade chip onto the fold line.
Centring lifts the whole group without shrinking the image. */
display:flex;align-items:center;
padding-top:6rem;
background:var(--ink);
}
.hero-bg{
position:absolute;inset:0;
/* home.css lives in web-app/public/ alongside img/ — the mockup's source
path ('../assets/...', relative to the ui-review options folder) does
not resolve here. Fixed to the site's real asset path (Wave 3). */
/* R57 (2026-07-27): swapped to the two-service image — the tipper and a
Halcyon skip in one frame — the day skip hire went live as the second
product line. The hero has to say "we do both" before a word is read.
Generated illustration, like the livery renders it replaced.
W3.1 (2026-08-07, bk-f95c3187): that is exactly why it is an OFFER
surface, and being a stylesheet background it is the one skip surface no
[data-skips-only] attribute can reach — it kept advertising a
Halcyon-liveried skip with the flag off. It is now keyed to the body
class app.js sets from CFG.SKIPS_ENABLED.
The DEFAULT here (no class — i.e. before app.js has run, or with JS off)
is the pre-R57 single-service tipper, so the skip artwork can never
flash up on a visitor mid-load. The two-service image returns with
.skips-on when the flag flips back. Nothing is deleted either way. */
background-image:linear-gradient(180deg,rgba(17,24,32,.32) 0%,rgba(17,24,32,.55) 45%,rgba(17,24,32,.97) 100%),
url('img/livery-tipper-hero.webp');
background-size:cover;background-position:center 38%;
}
body.skips-on .hero-bg{
background-image:linear-gradient(180deg,rgba(17,24,32,.32) 0%,rgba(17,24,32,.55) 45%,rgba(17,24,32,.97) 100%),
url('img/skip-hero-both.webp');
}
.hero-inner{position:relative;z-index:2;width:100%;padding-bottom:clamp(1rem,3vw,2rem);}
.hc-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.5fr);gap:2.5rem;align-items:end;}
.hero-copy h1{
font-size:clamp(2.5rem,6.6vw,5.25rem);
line-height:.98;
color:var(--paper);
}
.hero-copy p.lede{
margin-top:1.4rem;max-width:38rem;
font-size:clamp(1.02rem,1.4vw,1.2rem);
color:var(--zinc);
}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem;}
/* inline-block, NOT inline-flex — flex splits the bare text + the location span
into side-by-side flex items, so on phones the sentence wrapped as a broken
two-column lozenge (same anonymous-box trap as .area-fuel) */
.hc-eyebrow{
display:inline-block;width:fit-content;white-space:nowrap;
font-size:.68rem;letter-spacing:.16em;font-weight:700;text-transform:uppercase;
color:var(--amber);
background:var(--ink);
padding:.34rem .7rem;border:1px solid rgba(242,169,0,.55);border-radius:999px;
}
.offer-card{max-width:23rem;justify-self:end;width:100%;}
.offer-card .bezel-core{padding:1.4rem 1.5rem 1.6rem;}
.offer-table{margin:1rem 0 0;display:flex;flex-direction:column;}
.offer-row{
display:flex;justify-content:space-between;gap:1rem;
padding-block:.62rem;border-top:1px solid rgba(246,247,249,.1);
}
.offer-row:first-of-type{border-top:none;}
.offer-row dt{font-size:.87rem;color:var(--zinc);font-weight:500;}
.offer-row dd{margin:0;font-family:var(--display);font-weight:800;font-size:.98rem;color:var(--amber);white-space:nowrap;}
.offer-card .hc-btn{width:100%;justify-content:center;margin-top:1.35rem;}
.guide-note{margin-top:1.7rem;font-size:.85rem;color:var(--ash);max-width:34rem;}
/* ---------- SECTION shells ---------- */
section{position:relative;}
.band-ink{background:var(--ink);}
.band-graphite{background:var(--graphite);}
.band-paper{background:var(--paper);color:var(--ink);}
.pad{padding-block:clamp(4rem,8vw,7.5rem);}
h2.headline{font-size:clamp(1.9rem,4.2vw,3.1rem);line-height:1.05;}
.lead-copy{font-size:clamp(1rem,1.4vw,1.15rem);color:var(--zinc);max-width:44rem;margin-top:1.1rem;}
.band-paper .lead-copy{color:var(--steel);}
/* R40 FIX (2026-07-26, LIVE DEFECT) — styles.css:98 sets a blanket
`h1,h2,h3,h4{color:var(--ink-900)}` (near-black). On a dark band that beats
any inherited light body colour, so every h2.headline sitting directly on
.band-ink/.band-graphite (services, how-it-works, gallery, livery) rendered
at ~1:1 contrast — effectively invisible, leaving a floating paragraph with
~200px of dead space above it. Individual components already carrying an
explicit heading colour (.hero-copy h1, .service-row h3, .hc-step h3,
.hc-trust-badge h4, .cta-inner h2) were unaffected — this only ever hit the
bare h2.headline in each dark band. Band-scoped override, higher specificity
than the global element-list rule, so it wins regardless of source order;
covers h1-h4 (not just h2) so it holds for any future heading added to a
dark band. Paper (#F6F7F9) on Ink (#111820) = ~17.9:1, on Graphite
(#292B2D) = ~13.9:1 — both far past the 4.5:1 floor. */
.band-ink h1, .band-ink h2, .band-ink h3, .band-ink h4,
.band-graphite h1, .band-graphite h2, .band-graphite h3, .band-graphite h4 {
color: var(--paper);
}
/* .band-paper already gets correct dark headings from styles.css's global
rule (color:var(--ink-900) on white/paper ground is right), but that only
holds by accident of specificity — pin it explicitly here too so it can
never regress if the global rule ever changes. */
.band-paper h1, .band-paper h2, .band-paper h3, .band-paper h4 {
color: var(--ink);
}
/* ---------- TRUST STRIP ---------- */
.trust-top{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:start;}
.trust-quick{display:flex;flex-direction:column;gap:1.1rem;margin-top:1.75rem;}
.quick-item{display:flex;align-items:center;gap:.8rem;font-size:1rem;font-weight:600;}
.icon-chip{
flex:none;width:2.5rem;height:2.5rem;border-radius:999px;
background:var(--ink);color:var(--amber);
display:flex;align-items:center;justify-content:center;
}
.icon-chip svg{width:1.15rem;height:1.15rem;stroke-width:1.5;}
/* R47 (2026-07-26): 4 badges in a single column made the right side ~570px tall
against a ~230px left column, leaving the "Why trust us, in full" link and the
whole left column stranded above ~330px of dead paper. 2x2 puts the two
columns within ~30px of each other. The 820px rule below still stacks it 1-up
on phones, where a single column is the right shape. */
.hc-trust-badges{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-top:2.5rem;}
.hc-trust-badge .bezel-core{background:#fff;padding:1.15rem 1.25rem;display:flex;gap:.85rem;height:100%;}
.hc-trust-badge .icon-chip{background:var(--ink);color:var(--amber);}
.hc-trust-badge h3,.hc-trust-badge h4{font-family:var(--body);font-weight:700;font-size:.98rem;color:var(--ink);}
.hc-trust-badge p{font-size:.86rem;color:var(--steel);margin-top:.3rem;}
.why-link{display:inline-flex;margin-top:2rem;font-weight:700;font-size:.95rem;color:var(--ink);border-bottom:2px solid var(--ink);padding-bottom:.15rem;}
/* ---------- SERVICES ---------- */
.service-row{
display:grid;grid-template-columns:4.5rem 1fr 1.7fr;gap:1.75rem;
padding-block:2rem;border-top:1px solid rgba(246,247,249,.14);
align-items:start;transition:padding-left .35s var(--hc-ease);
}
/* The closing rule belongs to the LIST, not to its last child (W3.1 fix,
2026-08-07). Each row draws its own border-top; the list closes itself off
underneath. It used to be `.service-row:last-of-type{border-bottom:…}`,
which matched the skip-hire row — and when that row went dark behind the
flag it took the closing line with it, leaving the visible list hanging
open with a 0px bottom border. A rule keyed to "the last element" is
always one hidden element away from being wrong; the container cannot be
hidden by any gate. */
.service-list{border-bottom:1px solid rgba(246,247,249,.14);}
.service-row:hover{padding-left:.5rem;}
.service-num{font-family:var(--display);font-weight:800;font-size:1.6rem;color:var(--amber);}
.service-row h3{font-size:clamp(1.2rem,2vw,1.55rem);color:var(--paper);}
.service-row p{color:var(--ash);font-size:.98rem;max-width:38rem;}
.services-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1.5rem;}
/* deep-link cue appended inside each service-row's
(W3.3, Wave 3
2026-07-21) — the mockup's service-row had no link at all. */
.service-row .fit{display:inline-block;margin-left:.35rem;font-weight:700;color:var(--amber);white-space:nowrap;}
/* ---------- PRICING ---------- */
.pricing-inner{display:grid;grid-template-columns:1fr 1.05fr;gap:3rem;align-items:start;}
.pricing-copy .lead-copy{margin-top:1.4rem;}
.ladder{margin:0;display:flex;flex-direction:column;}
.ladder-row{
display:grid;grid-template-columns:1fr auto;column-gap:1rem;row-gap:.15rem;
padding-block:1rem;border-top:1px solid rgba(17,24,32,.08);
}
.ladder-row:first-of-type{border-top:none;}
.ladder-row dt{grid-column:1;margin:0;font-family:var(--display);font-weight:800;font-size:.82rem;letter-spacing:.05em;color:var(--ink);text-transform:uppercase;}
.ladder-row dd{grid-column:2;grid-row:1;margin:0;font-family:var(--display);font-weight:800;font-size:1.35rem;color:var(--ink);white-space:nowrap;}
.ladder-row dd.hc-sub{grid-column:1;grid-row:2;font-family:var(--body);font-weight:400;font-size:.85rem;color:var(--steel);white-space:normal;}
/* real-terms line (additive, 2026-07-21) — third row, doesn't touch hc-sub.
white-space:normal on both sub-lines: they are dd elements, so the price's
.ladder-row dd nowrap otherwise applies and forces ~387px min width at 390. */
.ladder-row dd.hc-realterms{grid-column:1;grid-row:3;margin:.15rem 0 0;font-family:var(--body);font-weight:400;font-size:.78rem;color:var(--steel);opacity:.82;white-space:normal;}
.hc-deposit-strip{
display:flex;align-items:flex-start;gap:.9rem;margin-top:1.5rem;
padding-top:1.5rem;border-top:1px solid rgba(17,24,32,.1);
font-size:.92rem;color:var(--steel);
}
.hc-deposit-strip strong{color:var(--ink);}
.hc-deposit-strip .icon-chip{background:var(--paper);color:var(--bronze);width:2.1rem;height:2.1rem;}
.hc-deposit-strip .icon-chip svg{width:1rem;height:1rem;}
.pricing-note{margin-top:1.35rem;font-size:.85rem;color:var(--steel);}
.pricing-note strong{color:var(--ink);}
.pricing-cta{margin-top:1.75rem;}
/* ---------- HOW IT WORKS ---------- */
.hc-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2.75rem;}
.hc-step .bezel-core{padding:2rem 1.6rem;position:relative;height:100%;}
.hc-step-num{
display:flex;align-items:center;gap:.6rem;
font-family:var(--display);font-weight:800;font-size:.85rem;letter-spacing:.08em;
color:var(--amber);text-transform:uppercase;margin-bottom:1.2rem;
}
.hc-step-num .icon-chip{background:rgba(242,169,0,.14);color:var(--amber);}
.hc-step h3{font-size:1.2rem;color:var(--paper);}
.hc-step p{margin-top:.6rem;color:var(--ash);font-size:.93rem;}
/* ---------- GALLERY (before/after) — RULES REMOVED 2026-07-28 ----------
The before/after section was removed from index.html on the operator's
instruction, taking .ba-grid / .ba-frame / .ba-tag / .ba-caption / .ba-scene
with it — verified zero users across every .html and .js under public/.
.disclosure survives BELOW and is still live: it styles #livery-disclosure.
It was written here, inside the gallery block, which is why it looks like an
orphan at a glance; it is not. The matching mobile overrides were removed
from the 720px block further down. */
.disclosure{
margin-top:1.75rem;padding:1.4rem 1.6rem;border-radius:1rem;
background:rgba(246,247,249,.06);border:1px solid rgba(246,247,249,.16);
}
.disclosure p{font-size:.94rem;color:var(--zinc);}
.disclosure p + p{margin-top:.6rem;}
/* ---------- LIVERY ---------- */
.livery-inner{display:grid;grid-template-columns:1.4fr 1fr;gap:1rem;}
.livery-main .bezel-core,.livery-tile .bezel-core{position:relative;overflow:hidden;}
.livery-main{min-height:22.8rem;}
.livery-main .bezel-core{min-height:22rem;}
.livery-main img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform .6s var(--hc-ease);}
.livery-side{display:flex;flex-direction:column;gap:1rem;}
.livery-tile{flex:1;min-height:10.8rem;}
.livery-tile .bezel-core{min-height:10rem;height:100%;}
.livery-tile img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform .6s var(--hc-ease);}
.livery-main:hover img,.livery-tile:hover img{transform:scale(1.035);}
.livery-cap{
position:absolute;left:0;right:0;bottom:0;z-index:2;
padding:1rem 1.1rem;
background:linear-gradient(0deg,rgba(17,24,32,.88),transparent);
font-size:.85rem;font-weight:700;color:var(--paper);letter-spacing:.02em;
}
/* ---------- QUOTE CTA (the one full-bleed amber moment) ---------- */
.cta-amber{background:var(--amber);color:var(--ink);}
.cta-inner{display:grid;grid-template-columns:1.4fr 1fr;gap:2.5rem;align-items:center;}
.cta-inner h2{color:var(--ink);font-size:clamp(2rem,4.4vw,3.4rem);}
.cta-inner .lead-copy{color:var(--hc-amber-ink);max-width:34rem;}
.cta-side{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;}
.cta-inner .hc-btn-ink{padding:.9rem .6rem .9rem 1.75rem;font-size:1rem;}
.cta-fine{font-size:.85rem;color:var(--hc-amber-ink);opacity:.85;}
/* ---------- FOOTER ---------- */
footer{background:var(--graphite);border-top:1px solid rgba(246,247,249,.1);}
.footer-top{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:2.5rem;}
.hc-footer-brand p{margin-top:1rem;color:var(--ash);font-size:.92rem;max-width:20rem;}
/* R53 (2026-07-26): this file re-declares h1-h4 at weight 800 (line ~71) and
ONLY index.html loads it, which is why the shared footer's column labels
have always drawn heavier on the homepage than on the other thirteen pages.
When those labels moved
->
for heading order, styles.css pinned
them to 700 for the pages that do not load this file; this pin restores the
homepage's own 800 so the promotion is pixel-identical everywhere. Verified
by full-page diff: 14/14 pages byte-identical before vs after. */
.footer-grid h2, .footer-grid h4 { font-weight: 800; }
.footer-col h3{
font-family:var(--body);font-size:.72rem;letter-spacing:.14em;
color:var(--zinc);font-weight:700;margin-bottom:1rem;
}
.footer-col a{display:flex;align-items:center;min-height:44px;color:var(--zinc);font-size:.92rem;transition:color .2s var(--hc-ease);}
.footer-col a:hover{color:var(--amber);}
/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px){
.hc-hero-grid{grid-template-columns:1fr;}
.offer-card{justify-self:start;max-width:26rem;}
.pricing-inner{grid-template-columns:1fr;}
.livery-inner{grid-template-columns:1fr;}
.livery-main{min-height:17rem;}
.livery-main .bezel-core{min-height:16.2rem;}
}
/* Between ~1140 and 1280 the cluster is wide enough to eat the right-hand void that makes
the left-alignment legible. Tighten the gaps first — that buys back ~60px without dropping
a single nav item — then collapse at 1210, measured as the width where the void falls under
80px even after tightening. Re-measured 2026-07-21 once Login became a pill: the pills
are wider than the text links they replaced, so the collapse moved 1180 -> 1210. */
@media (max-width:1280px){
.nav-row{gap:1.75rem;}
.nav-links{gap:1.15rem;}
}
@media (max-width:1210px){
.nav-links,.nav-util{display:none;}
.hamburger{display:flex;}
.nav-row{justify-content:space-between;}
}
/* R47 (2026-07-26): with the badges at 2-up, the right-hand column has to be
wide enough for them. Below ~1100 it is not — at 834 each badge got a ~165px
text column and "Agreed before we start — no surprises" wrapped over five
lines. So the COPY drops below the badges first (here), and the badges only
go 1-up at 820. Three states: side-by-side + 2x2 above 1280; stacked + 2-up
between 820 and 1280; stacked + 1-up below 820. 1280 is the width the nav
already breaks at, so the page changes shape once, not twice. */
@media (max-width:1280px){
.trust-top{grid-template-columns:1fr;gap:2rem;}
}
@media (max-width:820px){
.trust-top{grid-template-columns:1fr;gap:2rem;}
.hc-trust-badges{grid-template-columns:1fr;}
.hc-steps{grid-template-columns:1fr;}
.service-row{grid-template-columns:3rem 1fr;}
.service-row p{grid-column:1 / -1;}
/* the .ba-* phone overrides were removed here 2026-07-28 with the rest of
the gallery — see the note in the desktop block above */
/* livery: main panel + the two detail tiles as one compact row, not three
full-width stacked panels */
.livery-main{min-height:13rem;}
.livery-main .bezel-core{min-height:12.4rem;}
.livery-side{flex-direction:row;}
.livery-tile{min-height:8.5rem;}
.livery-tile .bezel-core{min-height:8rem;}
.cta-inner{grid-template-columns:1fr;}
.footer-top{grid-template-columns:1fr 1fr;}
}
@media (max-width:520px){
.footer-top{grid-template-columns:1fr;}
.hero-ctas .hc-btn{width:100%;justify-content:center;}
.hero-ctas{flex-direction:column;}
.offer-card{max-width:100%;}
}
/* ======================================================================
R57 (2026-07-27) — TWO-SERVICE HOME PAGE
Skip hire went live as Halcyon's second product line, so the home page
stopped being about one service. Everything below belongs to that change:
the hero's service flag, the rate card's clearance/skip switcher, the
fifth services row, and the skip section itself.
Tokens are the estate's own (Ink #111820 / Amber #F2A900 / Hanken) —
nothing new is invented here.
====================================================================== */
/* The "we do both now" flag above the H1. DESIGN.md forbids a kicker BADGE
above the hero H1 (operator, 2026-07-21: "Remove it altogether"). This is
deliberately NOT a badge — no pill, no border, no chip — just an amber rule
and a label, because the two-service change is the one thing this page now
exists to announce. Do not turn it back into a pill. */
.two-svc-flag{display:block;font-size:.72rem;font-weight:800;letter-spacing:.12em;
text-transform:uppercase;color:var(--amber);margin-bottom:14px;padding-left:34px;position:relative}
.two-svc-flag::before{content:"";position:absolute;left:0;top:.52em;width:24px;height:2px;background:var(--amber)}
/* styles.css scopes .amber-line to `.hero`; this page's hero is `.hc-hero`, so
the highlight silently did nothing here. "skip it" is the half of the
headline that announces the new service — it must carry the accent. */
.hc-hero h1 .amber-line{color:var(--amber)}
/* Rate card service switcher. Progressive enhancement: with JS off the
clearance ladder is the one in the markup and the skip pane stays [hidden],
so the card is still correct and complete — it just does not switch. */
.svc-toggle{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;
background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:999px}
.svc-tab{appearance:none;background:transparent;border:0;cursor:pointer;
font-family:var(--display);font-weight:800;font-size:.82rem;letter-spacing:.01em;
color:rgba(255,255,255,.72);padding:9px 10px;border-radius:999px;
transition:background .18s var(--ease),color .18s var(--ease)}
.svc-tab:hover{color:#fff}
.svc-tab.is-on{background:var(--amber);color:var(--amber-ink)}
.svc-tab:focus-visible{outline:3px solid var(--amber-2);outline-offset:2px}
/* Services list — the new fifth row. */
.service-row.is-new h3{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.new-flag{font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
background:var(--amber);color:var(--amber-ink);padding:3px 8px;border-radius:999px}
/* ---- skip section ---- */
.skip-main{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:start;margin:38px 0 44px}
.skip-shot{margin:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--card)}
.skip-shot img{width:100%;height:auto;display:block}
.skip-shot figcaption{font-size:.76rem;color:var(--ink-3);padding:10px 14px;background:var(--paper-2);line-height:1.45}
.skip-ladder{width:100%;border-collapse:collapse;margin:0 0 6px}
.skip-ladder caption{text-align:left;font-size:.7rem;font-weight:800;letter-spacing:.1em;
text-transform:uppercase;color:var(--steel);padding-bottom:12px}
.skip-ladder th{text-align:left;font-weight:700;padding:12px 0;border-bottom:1px solid var(--line-2);font-size:1rem}
.skip-ladder th small{display:block;font-weight:500;color:var(--ink-3);font-size:.82rem;margin-top:3px;letter-spacing:0}
.skip-ladder td{text-align:right;font-weight:800;padding:12px 0 12px 14px;border-bottom:1px solid var(--line-2);
font-variant-numeric:tabular-nums;font-size:1.16rem;vertical-align:top;white-space:nowrap}
.skip-ladder tr:last-child th,.skip-ladder tr:last-child td{border-bottom:0}
.skip-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:40px}
.skip-fact{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px 20px}
.skip-fact h3{font-size:1rem;margin:0 0 8px}
.skip-fact p{font-size:.9rem;color:var(--ink-3);margin:0}
.skip-gallery{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:900px){
.skip-main,.skip-gallery{grid-template-columns:1fr;gap:24px}
.skip-facts{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){ .skip-facts{grid-template-columns:1fr} }
/* ---------- SHORT VIEWPORTS ----------
1280x720 laptops and 375x667 phones. The hero is a full-height band, so the
second chip pushed the pair through the fold on anything under ~844px tall:
an independent walk measured the referral chip at 665-745 against a 667
fold, i.e. a 2px sliver that reads as a clipped card. This block reclaims
~90px from the hero's top padding and the button margin -- the two places
with slack -- rather than shrinking the headline or the rate card.
IT LIVES AT THE END OF THE FILE ON PURPOSE. The first attempt sat above
`.hc-hero{}` and lost to it on source order: same specificity, later rule
wins, so the media query was dead and measured as if it were not there. */
@media (max-height:780px){
.hc-hero{padding-top:1rem;}
.hero-ctas{margin-top:1rem;}
.hero-trade{margin-top:.5rem;}
.hero-trade--second{margin-top:.35rem;}
.trade-chip{padding-top:.45rem;padding-bottom:.45rem;}
}
/* Short AND wide (a 1280x720 laptop).
Padding alone CANNOT fix this one: the hero centres its content, so trimming
the top padding just re-centres the same block and the chips come back down
-- the first attempt at this rule actually pushed them 6px LOWER. On a short
wide screen the block is top-aligned instead, which is what buys the room. */
@media (max-height:780px) and (min-width:900px){
.hc-hero{align-items:flex-start;padding-top:1rem;}
}