/* Cleveland City Bonding - site stylesheet
Tokens + layout engine + every component style, scoped under .ccb-page.
Pages without the .ccb-page body class are untouched by this file. */
/* ==========================================================================
Cleveland City Bonding — design tokens
Generated from the active NovaMira design `cleveland-city-bonding`
(readiness: ready · token_sources: explicit · waivers: [Inter])
Values are authored in oklch() per the impeccable build laws. The trailing
comment on each line is the source hex from Design System/tokens/colors.css,
which is what ships to the Elementor Kit — Elementor Global Colors take hex.
Same colour, two notations: the hex is the contract, the oklch is the
authoring surface.
Two declared exceptions to the "neutrals carry min 0.005 chroma" law:
--ink and --paper are the logo's own pure black and white, declared in the
active design. Every other neutral here is tinted cool (hue ~286), never
dead grey.
========================================================================== */
:root {
/* --- Brand ------------------------------------------------------------ */
--ccb-red: oklch(51.78% 0.1923 23.39); /* #BE1E2D logo crimson — the one accent */
--ccb-red-press: oklch(44.38% 0.1641 23.37); /* #9A1723 pressed / active */
--ccb-red-bright: oklch(60.93% 0.2159 23.27); /* #E8323F red as TYPE on black only — 4.5:1 */
--ccb-gold: oklch(85.03% 0.1575 87.03); /* #FAC63A logo gold — dark surfaces ONLY.
No pressed variant: gold is never a button
or an interactive surface in this system. */
/* --- Canvas ----------------------------------------------------------- */
--ink: oklch(0% 0 0); /* #000000 declared: the logo's black */
--surface-elevated: oklch(17.30% 0 89.88); /* #101010 cards on the black canvas */
--paper: oklch(100% 0 89.88); /* #FFFFFF declared: the logo's white */
--paper-alt: oklch(97.07% 0.0027 286.35); /* #F5F5F7 separates stacked light tiles */
/* --- Text ------------------------------------------------------------- */
--ink-80: oklch(23.16% 0.0038 286.10); /* #1D1D1F body on light — never pure black */
--ink-56: oklch(53.99% 0.0077 286.14); /* #6E6E73 captions, legal, disabled */
--paper-72: oklch(100% 0 0 / 0.72); /* body on dark */
--paper-56: oklch(100% 0 0 / 0.56); /* captions on dark */
/* --- Lines ------------------------------------------------------------ */
--hairline-light: oklch(86.52% 0.0068 286.26); /* #D2D2D7 */
--hairline-dark: oklch(100% 0 0 / 0.16);
--hairline-width: 1px;
/* --- Semantic — light canvas (default) -------------------------------- */
--surface-page: var(--paper);
--surface-page-alt: var(--paper-alt);
--text-strong: var(--ink);
--text-body: var(--ink-80);
--text-muted: var(--ink-56);
--text-link: var(--ccb-red);
--border-hairline: var(--hairline-light);
--focus-ring: var(--ccb-red);
/* --- Action ----------------------------------------------------------- */
--action-primary-bg: var(--ccb-red);
--action-primary-bg-press: var(--ccb-red-press);
--action-primary-fg: var(--paper);
--action-disabled-bg: var(--hairline-light);
--action-disabled-fg: var(--ink-56);
/* --- Type families ---------------------------------------------------- */
--font-display: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
--font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
--font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
/* --- Type scale — 8 sizes, nothing between them ----------------------- */
--size-12: 0.75rem; --lh-12: 1.33; /* utility / legal / mono register */
--size-14: 0.875rem; --lh-14: 1.43; /* caption, secondary */
--size-17: 1.0625rem; --lh-17: 1.47; /* BODY BASE */
--size-21: 1.3125rem; --lh-21: 1.38; /* lead */
--size-28: 1.75rem; --lh-28: 1.28; /* subhead */
--size-40: 2.5rem; --lh-40: 1.10; /* section */
--size-56: 3.5rem; --lh-56: 1.05; /* hero */
--size-80: 5rem; --lh-80: 1.0; /* display */
--track-display-xl: -0.03em; /* >=48px */
--track-display: -0.02em; /* 28-47px */
--track-body: -0.01em;
--track-mono: 0.08em;
/* --- Spacing — 8px base ----------------------------------------------- */
--space-xxs: 4px; --space-xs: 8px; --space-sm: 12px;
--space-md: 16px; --space-lg: 24px; --space-xl: 32px;
--space-xxl: 48px; --space-section: 80px; --space-section-lg: 120px;
/* --- Layout ----------------------------------------------------------- */
--content-max: 980px;
--tile-max: 1440px;
--gutter-mobile: 24px;
--gutter-tablet: 40px;
--gutter-desktop: 88px;
--tap-min: 44px;
/* --- Shape — one radius rule, followed everywhere --------------------- */
--radius-sm: 6px; /* inputs, chips */
--radius-md: 12px; /* buttons, cards */
--radius-lg: 18px; /* large panels */
--radius-pill: 999px; /* the status dot only */
/* --- Elevation — the only shadow in the system ------------------------ */
--shadow-photo: 0 24px 48px -12px oklch(0% 0 0 / 0.24);
/* --- Motion ----------------------------------------------------------- */
--ease-ccb: cubic-bezier(0.28, 0.11, 0.32, 1);
--dur-micro: 240ms;
--dur-standard: 400ms;
--dur-skyline: 1200ms;
--reveal-shift: 24px;
--reveal-stagger: 60ms;
}
/* --- Dark canvas ---------------------------------------------------------
Components stay canvas-agnostic. The tile flips the semantics, not the
component. This is the only theme selector in the system.
------------------------------------------------------------------------ */
.ccb-dark {
--surface-page: var(--ink);
--surface-page-alt: var(--surface-elevated);
--text-strong: var(--paper);
--text-body: var(--paper-72);
--text-muted: var(--paper-56);
--text-link: var(--ccb-red-bright); /* never --ccb-red as type on dark: 3.4:1 */
--text-accent: var(--ccb-gold); /* gold lives here and nowhere else */
--border-hairline: var(--hairline-dark);
--focus-ring: var(--ccb-red-bright);
color: var(--text-body);
background: var(--surface-page);
}
@media (prefers-reduced-motion: reduce) {
:root {
--dur-micro: 0ms;
--dur-standard: 0ms;
--dur-skyline: 0ms;
--reveal-shift: 0px;
--reveal-stagger: 0ms;
}
}
/* ================= scoped ================= */
.ccb-page,
.ccb-page *,
.ccb-page *::before,
.ccb-page *::after { box-sizing: border-box; }.ccb-page {
font-family: var(--font-body);
font-size: var(--size-17);
line-height: var(--lh-17);
letter-spacing: var(--track-body);
color: var(--text-body);
background: var(--surface-page);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-wrap: pretty;
}.ccb-page :where(img,
.ccb-page svg,
.ccb-page video) { max-width: 100%; display: block; }.ccb-page :where(a) {
color: var(--text-link);
text-decoration: none;
transition: color var(--dur-micro) var(--ease-ccb);
}.ccb-page :where(a):hover { color: var(--ccb-red-press); text-decoration: underline; }.ccb-page :where(.ccb-dark a):hover { color: oklch(68% 0.19 20); }.ccb-page *:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
border-radius: var(--radius-sm);
}.ccb-page .tile {
position: relative;
background: var(--surface-page);
color: var(--text-body);
padding-block: var(--space-section-lg);
padding-inline: var(--gutter-desktop);
}.ccb-page .tile--alt { --surface-page: var(--paper-alt); }.ccb-page .tile--flush { padding-block: 0; }.ccb-page .tile__inner {
max-width: var(--tile-max);
margin-inline: auto;
}.ccb-page .tile__content {
max-width: var(--content-max);
}.ccb-page .tile__content--centered {
margin-inline: auto;
text-align: center;
}@media (max-width: 1067px) {.ccb-page .tile { padding-block: var(--space-section); padding-inline: var(--gutter-tablet); }}@media (max-width: 767px) {.ccb-page .tile { padding-block: 56px; padding-inline: var(--gutter-mobile); }}.ccb-page .display,
.ccb-page .headline,
.ccb-page .subhead {
font-family: var(--font-display);
color: var(--text-strong);
margin: 0;
text-wrap: balance;
}.ccb-page .display { font-size: var(--size-80); line-height: var(--lh-80); letter-spacing: var(--track-display-xl); font-weight: var(--weight-bold); }.ccb-page .headline { font-size: var(--size-56); line-height: var(--lh-56); letter-spacing: var(--track-display-xl); font-weight: var(--weight-bold); }.ccb-page .subhead { font-size: var(--size-40); line-height: var(--lh-40); letter-spacing: var(--track-display); font-weight: var(--weight-semibold); }.ccb-page .lead {
font-size: var(--size-21);
line-height: var(--lh-21);
color: var(--text-body);
max-width: 62ch;
margin: var(--space-lg) 0 0;
}.ccb-page .body {
max-width: 66ch;
margin: var(--space-md) 0 0;
}.ccb-page .caption {
font-size: var(--size-14);
line-height: var(--lh-14);
color: var(--text-muted);
}@media (max-width: 1067px) {.ccb-page .display { font-size: var(--size-56); line-height: var(--lh-56); }.ccb-page .headline { font-size: var(--size-40); line-height: var(--lh-40); }.ccb-page .subhead { font-size: var(--size-28); line-height: var(--lh-28); }}@media (max-width: 767px) {.ccb-page .display { font-size: var(--size-40); line-height: var(--lh-40); }.ccb-page .headline { font-size: var(--size-28); line-height: var(--lh-28); }}.ccb-page .eyebrow {
font-family: var(--font-mono);
font-size: var(--size-12);
line-height: var(--lh-12);
font-weight: var(--weight-medium);
letter-spacing: var(--track-mono);
text-transform: uppercase;
color: var(--text-muted);
margin: 0 0 var(--space-lg);
}.ccb-page .ccb-dark .eyebrow { color: var(--ccb-gold); }.ccb-page .figure {
font-family: var(--font-mono);
font-size: var(--size-40);
line-height: var(--lh-40);
font-weight: var(--weight-medium);
color: var(--text-strong);
font-variant-numeric: tabular-nums;
}.ccb-page .btn {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
min-height: var(--tap-min);
padding: var(--space-sm) var(--space-lg);
border-radius: var(--radius-md);
border: var(--hairline-width) solid transparent;
font-family: var(--font-body);
font-size: var(--size-17);
font-weight: var(--weight-medium);
letter-spacing: var(--track-body);
text-decoration: none;
cursor: pointer;
transition: background-color var(--dur-micro) var(--ease-ccb),
color var(--dur-micro) var(--ease-ccb),
border-color var(--dur-micro) var(--ease-ccb);
}.ccb-page .btn:hover { text-decoration: none; }.ccb-page .btn--lg { padding: var(--space-md) var(--space-xl); }.ccb-page .btn--primary {
background: var(--action-primary-bg);
color: var(--action-primary-fg);
}.ccb-page .btn--primary:hover,
.ccb-page .btn--primary:active { background: var(--action-primary-bg-press); color: var(--action-primary-fg); }.ccb-page .btn--secondary {
background: transparent;
border-color: var(--border-hairline);
color: var(--text-strong);
}.ccb-page .btn--secondary:hover { background: oklch(50% 0 0 / 0.06); color: var(--text-strong); }.ccb-page .btn--tertiary {
padding-inline: 0;
background: transparent;
color: var(--text-link);
}.ccb-page .btn--tertiary:hover { text-decoration: underline; }.ccb-page .btn--tertiary .chev { transition: transform var(--dur-micro) var(--ease-ccb); }.ccb-page .btn--tertiary:hover .chev { transform: translateX(2px); }.ccb-page .btn[aria-disabled="true"] {
background: var(--action-disabled-bg);
color: var(--action-disabled-fg);
pointer-events: none;
}.ccb-page .btn-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
margin-top: var(--space-xl);
}.ccb-page .skyline-rule {
display: block;
width: 100%;
height: 40px;
overflow: hidden;
}.ccb-page .skyline-rule {
fill: none;
stroke: var(--border-hairline);
stroke-width: 1;
}@media (max-width: 767px) {.ccb-page .skyline-rule { height: 28px; }}.ccb-page .skyline-rule--animate {
stroke-dasharray: var(--skyline-len, 3000);
stroke-dashoffset: var(--skyline-len, 3000);
animation: skyline-draw var(--dur-skyline) var(--ease-ccb) forwards;
}@keyframes skyline-draw { to { stroke-dashoffset: 0; } }@media (prefers-reduced-motion: reduce) {.ccb-page .skyline-rule--animate { stroke-dashoffset: 0; animation: none; }}.ccb-page .card {
border: var(--hairline-width) solid var(--border-hairline);
border-radius: var(--radius-md);
padding: var(--space-xl);
background: transparent;
}.ccb-page .card--photo { padding: 0; overflow: hidden; box-shadow: var(--shadow-photo); }.ccb-page .card--photo img { filter: grayscale(1) contrast(1.05); width: 100%; }.ccb-page .card__body { padding: var(--space-xl); }.ccb-page .split {
display: grid;
grid-template-columns: 5fr 7fr;
gap: var(--space-xxl);
align-items: center;
max-width: var(--tile-max);
margin-inline: auto;
}.ccb-page .split--reverse { grid-template-columns: 7fr 5fr; }@media (max-width: 1067px) {.ccb-page .split,
.ccb-page .split--reverse { grid-template-columns: 1fr; gap: var(--space-xl); }}.ccb-page .reveal {
opacity: 0;
transform: translateY(var(--reveal-shift));
transition: opacity var(--dur-standard) var(--ease-ccb),
transform var(--dur-standard) var(--ease-ccb);
}.ccb-page .reveal.is-in { opacity: 1; transform: none; }.ccb-page .no-js .reveal { opacity: 1; transform: none; }@media (prefers-reduced-motion: reduce) {.ccb-page .reveal { opacity: 1; transform: none; }}.ccb-page .visually-hidden {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip-path: inset(50%); white-space: nowrap;
}.ccb-page .nav {
position: sticky; top: 0; z-index: 60;
background: rgba(0,0,0,.92);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}.ccb-page .nav__skip {
position: absolute; left: -9999px; top: 0;
background: var(--ccb-red); color: #fff; padding: var(--space-sm) var(--space-md);
border-radius: 0 0 var(--radius-sm) 0;
}.ccb-page .nav__skip:focus { left: 0; z-index: 1; }.ccb-page .nav__inner {
display: flex; align-items: center; gap: var(--space-lg);
min-height: 48px;
max-width: var(--tile-max); margin-inline: auto;
padding-inline: var(--gutter-desktop);
}.ccb-page .nav__group { display: flex; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; flex: 1; }.ccb-page .nav__group--right { justify-content: flex-end; }.ccb-page .nav__group a {
font-size: var(--size-12); line-height: 1;
letter-spacing: .04em; text-transform: uppercase;
color: rgba(255,255,255,.72); white-space: nowrap;
}.ccb-page .nav__group a:hover { color: #fff; text-decoration: none; }.ccb-page .nav__badge { display: block; flex: none; }.ccb-page .nav__badge img { width: 32px; height: 32px; }.ccb-page .nav__end { display: flex; align-items: center; gap: var(--space-md); flex: none; }.ccb-page .nav__status {
font-family: var(--font-mono); font-size: var(--size-12);
letter-spacing: var(--track-mono); text-transform: uppercase;
color: var(--ccb-gold); white-space: nowrap;
}.ccb-page .nav__cta {
background: var(--ccb-red); color: #fff;
min-height: 32px; padding: 6px var(--space-md);
font-size: var(--size-14); white-space: nowrap;
}.ccb-page .nav__cta:hover { background: var(--ccb-red-press); color: #fff; text-decoration: none; }.ccb-page .nav__toggle { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; }.ccb-page .nav__toggle i,
.ccb-page .nav__toggle i::before,
.ccb-page .nav__toggle i::after {
display: block; width: 20px; height: 1.5px; background: #fff; content: ""; position: relative;
}.ccb-page .nav__toggle i::before { top: -6px; }.ccb-page .nav__toggle i::after { top: 4.5px; }.ccb-page .nav__sheet { display: none; }.ccb-page .callbar { display: none; }@media (max-width: 1067px) {.ccb-page .nav__inner { padding-inline: var(--gutter-tablet); }}@media (max-width: 900px) {.ccb-page .nav__group,
.ccb-page .nav__status { display: none; }.ccb-page .nav__inner { justify-content: space-between; padding-inline: var(--gutter-mobile); }.ccb-page .nav__toggle { display: block; }.ccb-page .nav__sheet[hidden] { display: none; }.ccb-page .nav__sheet {
display: grid; gap: var(--space-lg);
padding: var(--space-xl) var(--gutter-mobile) var(--space-xxl);
border-top: 1px solid rgba(255,255,255,.16);
}.ccb-page .nav__sheet a { color: #fff; font-family: var(--font-display); font-size: var(--size-28); letter-spacing: var(--track-display); }}@media (max-width: 767px) {.ccb-page .nav__end .nav__cta { display: none; }.ccb-page .callbar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
display: grid; justify-items: stretch; gap: 6px;
background: #000; padding: 10px var(--gutter-mobile) calc(10px + env(safe-area-inset-bottom));
border-top: 1px solid rgba(255,255,255,.16);
}.ccb-page .callbar__status {
font-family: var(--font-mono); font-size: var(--size-12);
letter-spacing: var(--track-mono); text-transform: uppercase;
color: var(--ccb-gold); text-align: center;
}.ccb-page .callbar__btn { justify-content: center; }.ccb-page body { padding-bottom: 104px; }}.ccb-page .hero { position: relative; background: var(--ink); }.ccb-page .hero__static { position: relative; min-height: 100svh; display: grid; }.ccb-page .hero__static img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: center 40%;
}.ccb-page .hero__static::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.10) 38%, rgba(0,0,0,.82) 100%);
}.ccb-page .hero__static-copy {
position: relative; z-index: 1; align-self: end;
padding: var(--gutter-desktop) var(--gutter-desktop) var(--space-section-lg);
max-width: min(52ch, 100%);
}.ccb-page .hero__static-copy .display { color: var(--paper); margin: 0; max-width: none; text-wrap: nowrap; }.ccb-page .hero__static-copy .lead { color: var(--paper-72); max-width: min(40ch, 100%); }@media (max-width: 1067px) {.ccb-page .hero__static-copy { padding: var(--gutter-tablet) var(--gutter-tablet) var(--space-section); }}@media (max-width: 767px) {.ccb-page .hero__static-copy { padding: var(--gutter-mobile) var(--gutter-mobile) 56px; }.ccb-page .hero__static-copy .display { text-wrap: balance; }}.ccb-page #ccb-hero-world .sw-copy__num,
.ccb-page #ccb-hero-world .sw-hint,
.ccb-page #ccb-hero-world .sw-route,
.ccb-page #ccb-hero-world .sw-scrollbar,
.ccb-page #ccb-hero-world .sw-topbar,
.ccb-page #ccb-hero-world .sw-pt { display: none !important; }.ccb-page #ccb-hero-world {
--sw-bg: #000000;
--sw-ink: #FFFFFF;
--sw-ink-soft: rgba(255,255,255,.72);
--sw-accent: #E8323F;
--sw-font-display: var(--font-display);
--sw-font-body: var(--font-body);
}.ccb-page #ccb-hero-world .sw-copy__title {
font-family: var(--font-display);
font-size: var(--size-56); line-height: var(--lh-56);
letter-spacing: var(--track-display-xl); font-weight: var(--weight-bold);
color: var(--paper); text-wrap: balance;
}.ccb-page #ccb-hero-world .sw-copy__body { font-size: var(--size-21); line-height: var(--lh-21); color: var(--paper-72); max-width: 46ch; }.ccb-page #ccb-hero-world .sw-copy__cta a {
border-radius: var(--radius-md); min-height: var(--tap-min);
font-family: var(--font-body); font-weight: var(--weight-medium);
letter-spacing: var(--track-body);
}@media (max-width: 767px) {.ccb-page #ccb-hero-world .sw-copy__title { font-size: var(--size-28); line-height: var(--lh-28); }}.ccb-page .numbers { padding-block: var(--space-section); }.ccb-page .numbers__row {
display: grid; grid-template-columns: repeat(3, 1fr);
margin: 0; border-top: 1px solid var(--border-hairline);
}.ccb-page .numbers__item {
padding: var(--space-xl) var(--space-xl) var(--space-lg) 0;
border-right: 1px solid var(--border-hairline);
}.ccb-page .numbers__item:last-child { border-right: 0; }.ccb-page .numbers__item:not(:first-child) { padding-left: var(--space-xl); }.ccb-page .numbers__row dt { margin: 0 0 var(--space-sm); }.ccb-page .numbers__row dd {
margin: 0; max-width: 34ch;
font-size: var(--size-17); line-height: var(--lh-17); color: var(--text-body);
}@media (max-width: 767px) {.ccb-page .numbers__row { grid-template-columns: 1fr; }.ccb-page .numbers__item { border-right: 0; border-bottom: 1px solid var(--border-hairline); padding: var(--space-lg) 0; }.ccb-page .numbers__item:last-child { border-bottom: 0; }.ccb-page .numbers__item:not(:first-child) { padding-left: 0; }}.ccb-page .receipt {
margin: 0;
border: 1px solid var(--border-hairline);
border-radius: var(--radius-md);
background: var(--paper);
padding: var(--space-xl);
}.ccb-page .receipt__head {
display: flex; justify-content: space-between; align-items: baseline;
font-family: var(--font-mono); font-size: var(--size-12);
letter-spacing: var(--track-mono); text-transform: uppercase;
color: var(--text-muted);
padding-bottom: var(--space-md); border-bottom: 1px solid var(--border-hairline);
}.ccb-page .receipt__lines { margin: 0; }.ccb-page .receipt__lines > div {
display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md);
padding: var(--space-md) 0; border-bottom: 1px solid var(--border-hairline);
}.ccb-page .receipt__lines dt { color: var(--text-body); font-size: var(--size-17); }.ccb-page .receipt__lines dd {
margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
font-size: var(--size-21); color: var(--text-strong);
}.ccb-page .receipt__rule dd { color: var(--ccb-red); }.ccb-page .receipt__note {
margin: var(--space-lg) 0 0; max-width: 44ch;
font-size: var(--size-14); line-height: var(--lh-14); color: var(--text-muted);
}.ccb-page .process .subhead { color: var(--paper); margin-bottom: var(--space-xxl); max-width: 20ch; }.ccb-page .steps {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(4, 1fr);
}.ccb-page .steps__item {
padding: var(--space-lg) var(--space-lg) 0 0;
border-top: 1px solid var(--border-hairline);
}.ccb-page .steps__item:not(:first-child) { padding-left: var(--space-lg); border-left: 1px solid var(--border-hairline); }.ccb-page .steps__num {
display: block; margin-bottom: var(--space-md);
font-family: var(--font-mono); font-size: var(--size-12);
letter-spacing: var(--track-mono); color: var(--ccb-gold);
}.ccb-page .steps h3 {
margin: 0 0 var(--space-sm);
font-family: var(--font-display); font-size: var(--size-21);
letter-spacing: var(--track-body); font-weight: var(--weight-semibold);
color: var(--paper);
}.ccb-page .steps p { margin: 0; font-size: var(--size-17); line-height: var(--lh-17); color: var(--paper-72); max-width: 32ch; }@media (max-width: 1067px) {.ccb-page .steps { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-xl); }}@media (max-width: 767px) {.ccb-page .steps { grid-template-columns: 1fr; row-gap: 0; }.ccb-page .steps__item,
.ccb-page .steps__item:not(:first-child) { border-left: 0; padding: var(--space-lg) 0; }}.ccb-page .coverage .subhead { margin-bottom: var(--space-xxl); }.ccb-page .coverage__grid {
display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-lg);
align-items: stretch;
}.ccb-page .coverage__lead { display: flex; flex-direction: column; }.ccb-page .coverage__lead img { flex: 1; min-height: 320px; object-fit: cover; }.ccb-page .coverage__stack { display: grid; grid-template-rows: 1fr 1fr; gap: var(--space-lg); }.ccb-page .coverage h3 {
margin: 0 0 var(--space-sm);
font-family: var(--font-display); font-size: var(--size-28);
line-height: var(--lh-28); letter-spacing: var(--track-display);
font-weight: var(--weight-semibold); color: var(--text-strong);
}.ccb-page .coverage p { margin: 0 0 var(--space-md); max-width: 46ch; }.ccb-page .coverage .card p:last-of-type { margin-bottom: 0; }.ccb-page .coverage__addr {
font-family: var(--font-mono); font-size: var(--size-12);
letter-spacing: var(--track-mono); text-transform: uppercase;
color: var(--text-muted); margin-top: var(--space-md) !important;
}.ccb-page .coverage .card { display: flex; flex-direction: column; justify-content: center; }@media (max-width: 1067px) {.ccb-page .coverage__grid { grid-template-columns: 1fr; }.ccb-page .coverage__stack { grid-template-rows: auto auto; }.ccb-page .coverage__lead img { min-height: 240px; }}.ccb-page .questions .subhead { color: var(--paper); margin-bottom: var(--space-xxl); }.ccb-page .faq { border-top: 1px solid var(--border-hairline); }.ccb-page .faq__item { border-bottom: 1px solid var(--border-hairline); }.ccb-page .faq__item summary {
list-style: none; cursor: pointer;
display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg);
padding: var(--space-lg) 0; min-height: var(--tap-min);
font-family: var(--font-display); font-size: var(--size-21); line-height: var(--lh-21);
font-weight: var(--weight-semibold); letter-spacing: var(--track-body);
color: var(--paper);
}.ccb-page .faq__item summary::-webkit-details-marker { display: none; }.ccb-page .faq__item summary::after {
content: "+"; flex: none;
font-family: var(--font-mono); font-size: var(--size-21); font-weight: 400;
color: var(--ccb-gold);
transition: transform var(--dur-standard) var(--ease-ccb);
}.ccb-page .faq__item[open] summary::after { transform: rotate(45deg); }.ccb-page .faq__body { padding: 0 0 var(--space-lg); }.ccb-page .faq__body p { margin: 0; max-width: 64ch; color: var(--paper-72); }.ccb-page .faq__foot { margin-top: var(--space-xl); color: var(--paper-56); font-size: var(--size-17); }.ccb-page .faq__foot a { color: var(--ccb-red-bright); }.ccb-page .location__map { padding: 0; overflow: hidden; min-height: 380px; display: flex; }.ccb-page .location__map iframe { border: 0; width: 100%; min-height: 380px; filter: grayscale(1) contrast(1.05); }.ccb-page .location__addr {
font-style: normal; margin: var(--space-lg) 0 0;
font-family: var(--font-mono); font-size: var(--size-14); line-height: 1.7;
letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-muted);
}@media (max-width: 1067px) {.ccb-page .location__map,
.ccb-page .location__map iframe { min-height: 280px; }}.ccb-page .closing .headline { color: var(--paper); }.ccb-page .closing .lead { color: var(--paper-72); margin-inline: auto; }.ccb-page .closing__row { justify-content: center; }.ccb-page .foot { padding-block: var(--space-section) var(--space-xxl); }.ccb-page .foot__cols {
display: grid; grid-template-columns: 5fr 3fr 4fr; gap: var(--space-xxl);
padding-bottom: var(--space-xl); border-bottom: 1px solid var(--border-hairline);
}.ccb-page .foot__mark { width: 240px; height: auto; margin-bottom: var(--space-lg); }.ccb-page .foot__line { margin: 0 0 var(--space-lg); max-width: 44ch; color: var(--paper-72); font-size: var(--size-14); line-height: var(--lh-14); }.ccb-page .foot__col h2,
.ccb-page .foot__brand h2 {
margin: 0 0 var(--space-md);
font-family: var(--font-mono); font-size: var(--size-12);
letter-spacing: var(--track-mono); text-transform: uppercase;
font-weight: var(--weight-medium); color: var(--ccb-gold);
}.ccb-page .foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }.ccb-page .foot__col a,
.ccb-page .foot__social a { color: var(--paper-72); font-size: var(--size-14); }.ccb-page .foot__col a:hover,
.ccb-page .foot__social a:hover { color: var(--paper); text-decoration: underline; }.ccb-page .foot__social { display: flex; gap: var(--space-lg); }.ccb-page .foot__phone { font-family: var(--font-mono); letter-spacing: var(--track-mono); }.ccb-page .foot__hours { font-family: var(--font-mono); font-size: var(--size-12); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ccb-gold); }.ccb-page .foot address {
font-style: normal; margin-top: var(--space-lg);
font-size: var(--size-14); line-height: 1.6; color: var(--paper-56);
}.ccb-page .foot__legal { padding-top: var(--space-xl); }.ccb-page .foot__legal p { margin: 0 0 var(--space-md); max-width: 88ch; font-size: var(--size-12); line-height: 1.6; color: var(--paper-56); }.ccb-page .foot__legal strong { color: var(--paper-72); font-weight: var(--weight-medium); }.ccb-page .foot__todo {
color: var(--ccb-gold); font-family: var(--font-mono);
letter-spacing: var(--track-mono); border-bottom: 1px dashed currentColor;
}.ccb-page .foot__copy { margin-top: var(--space-lg); }@media (max-width: 1067px) {.ccb-page .foot__cols { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }}@media (max-width: 767px) {.ccb-page .foot__cols { grid-template-columns: 1fr; }}
/* ===== elementor bridge ===== */
/* ==========================================================================
Elementor bridge
Elementor renders its own inner markup and puts our class on the widget
WRAPPER, not on the /
/ inside. These rules let the wrapper
class cascade through, so one stylesheet drives both the static preview and
the Elementor build.
========================================================================== */
/* Headings and text: inherit everything from the wrapper we styled. */
.ccb-page .elementor-widget-heading .elementor-heading-title {
font: inherit; color: inherit;
letter-spacing: inherit; line-height: inherit;
text-transform: inherit; font-style: inherit;
margin: 0;
}
.ccb-page .elementor-widget-text-editor p {
font: inherit; color: inherit;
letter-spacing: inherit; line-height: inherit;
margin: 0 0 var(--space-md);
}
.ccb-page .elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.ccb-page .elementor-widget-text-editor a { color: var(--text-link); }
/* Elementor containers must not fight the tile system. */
.ccb-page .e-con.tile,
.ccb-page .e-con.hero-tile { --padding-block-start: 0; --padding-block-end: 0;
--padding-inline-start: 0; --padding-inline-end: 0; }
.ccb-page .e-con > .e-con-inner { width: 100%; max-width: none; padding: 0; }
/* Buttons: the wrapper carries the class, the anchor carries the look. */
.ccb-page .cta.elementor-widget-button { background: none; border: 0; padding: 0; min-height: 0; }
.ccb-page .cta .elementor-button {
display: inline-flex; align-items: center; gap: var(--space-xs);
min-height: var(--tap-min);
padding: var(--space-sm) var(--space-lg);
border-radius: var(--radius-md);
border: var(--hairline-width) solid transparent;
font-family: var(--font-body); font-size: var(--size-17);
font-weight: var(--weight-medium); letter-spacing: var(--track-body);
line-height: 1.2; text-decoration: none; background: none;
transition: background-color var(--dur-micro) var(--ease-ccb),
color var(--dur-micro) var(--ease-ccb),
border-color var(--dur-micro) var(--ease-ccb);
}
.ccb-page .cta .elementor-button-content-wrapper { gap: var(--space-xs); }
.ccb-page .cta .elementor-button-icon { display: none; }
.ccb-page .cta--primary .elementor-button {
background: var(--action-primary-bg); color: var(--action-primary-fg);
}
.ccb-page .cta--primary .elementor-button:hover { background: var(--action-primary-bg-press); color: var(--action-primary-fg); }
.ccb-page .cta--secondary .elementor-button {
background: transparent; border-color: var(--border-hairline); color: var(--text-strong);
}
.ccb-page .cta--secondary .elementor-button:hover { background: rgba(127,127,127,.08); color: var(--text-strong); }
.ccb-page .cta--lg .elementor-button { padding: var(--space-md) var(--space-xl); }
/* A row of buttons sitting inside a tile. */
.ccb-page .e-con.btn-row { flex-direction: row; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
/* --- Structures that only exist in the Elementor build ------------------
The hand-written components nested these as `.receipt__lines > div`; in
Elementor each row is its own container with its own class. */
.ccb-page .e-con.receipt {
border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
background: var(--paper); padding: var(--space-xl);
}
.ccb-page .e-con.receipt__head {
justify-content: space-between; align-items: baseline;
padding-bottom: var(--space-md); border-bottom: 1px solid var(--border-hairline);
}
.ccb-page .receipt__lbl, .ccb-page .receipt__no {
font-family: var(--font-mono); font-size: var(--size-12);
letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-muted);
}
.ccb-page .e-con.receipt__line {
justify-content: space-between; align-items: baseline; gap: var(--space-md);
padding-block: var(--space-md); border-bottom: 1px solid var(--border-hairline);
}
.ccb-page .receipt__k { font-size: var(--size-17); color: var(--text-body); }
.ccb-page .receipt__v {
font-family: var(--font-mono); font-variant-numeric: tabular-nums;
font-size: var(--size-21); color: var(--text-strong);
}
.ccb-page .receipt__rule .receipt__v { color: var(--ccb-red); }
.ccb-page .receipt__note {
margin-top: var(--space-lg); max-width: 46ch;
font-size: var(--size-14); line-height: var(--lh-14); color: var(--text-muted);
}
.ccb-page .steps__h {
font-family: var(--font-display); font-size: var(--size-21);
font-weight: var(--weight-semibold); color: var(--paper);
}
.ccb-page .e-con.steps__item > .elementor-widget-text-editor { max-width: 34ch; }
/* Split and tile inner as Elementor containers. */
.ccb-page .e-con.split { align-items: center; gap: var(--space-xxl); }
.ccb-page .e-con.split > .e-con:first-child { flex: 5 1 0; }
.ccb-page .e-con.split > .e-con:last-child { flex: 7 1 0; }
.ccb-page .e-con.split--reverse > .e-con:first-child { flex: 7 1 0; }
.ccb-page .e-con.split--reverse > .e-con:last-child { flex: 5 1 0; }
@media (max-width: 1067px) { .ccb-page .e-con.split { flex-direction: column; align-items: stretch; } }
.ccb-page .e-con.tile__inner { max-width: var(--tile-max); margin-inline: auto; width: 100%; }
.ccb-page .e-con.tile__content { max-width: var(--content-max); }
.ccb-page .e-con.numbers__row { gap: 0; border-top: 1px solid var(--border-hairline); }
.ccb-page .e-con.steps { gap: 0; align-items: stretch; }
/* Cards on the coverage tile. */
.ccb-page .e-con.card { border: 1px solid var(--border-hairline); border-radius: var(--radius-md); padding: var(--space-xl); justify-content: center; }
.ccb-page .e-con.card--photo { padding: 0; overflow: hidden; box-shadow: var(--shadow-photo); }
.ccb-page .e-con.card--photo .elementor-widget-image img { filter: grayscale(1) contrast(1.05); width: 100%; display: block; }
.ccb-page .e-con.card__body { padding: var(--space-xl); }
.ccb-page .card__h { font-family: var(--font-display); font-size: var(--size-28); line-height: var(--lh-28); letter-spacing: var(--track-display); font-weight: var(--weight-semibold); }
.ccb-page .e-con.coverage__grid { gap: var(--space-lg); align-items: stretch; }
.ccb-page .e-con.coverage__grid > .e-con:first-child { flex: 7 1 0; }
.ccb-page .e-con.coverage__grid > .e-con:last-child { flex: 5 1 0; gap: var(--space-lg); }
@media (max-width: 1067px) { .ccb-page .e-con.coverage__grid { flex-direction: column; } }
/* Closing tile: the one centred moment on the page. */
.ccb-page .e-con.closing__inner { align-items: center; text-align: center; }
.ccb-page .e-con.closing__inner .e-con.btn-row { justify-content: center; width: auto; }
.ccb-page .e-con.btn-row > .elementor-widget { width: auto; flex: 0 0 auto; }
.ccb-page .e-con.split > .e-con { min-width: 0; }
.ccb-page .e-con.closing__inner .elementor-widget-text-editor { max-width: 62ch; }
/* --- SkylineRule must be edge-to-edge, not inset by the tile gutter ----- */
.ccb-page .e-con.tile > .elementor-widget-html:last-child {
width: auto; align-self: stretch;
margin-inline: calc(-1 * var(--gutter-desktop));
}
.ccb-page .e-con.tile > .elementor-widget-html:last-child .skyline-rule { width: 100%; }
@media (max-width: 1067px) {
.ccb-page .e-con.tile > .elementor-widget-html:last-child { margin-inline: calc(-1 * var(--gutter-tablet)); align-self: stretch; }
}
@media (max-width: 767px) {
.ccb-page .e-con.tile > .elementor-widget-html:last-child { margin-inline: calc(-1 * var(--gutter-mobile)); align-self: stretch; }
}
/* --- FAQ: Elementor toggle, restyled as the hairline list --------------- */
.ccb-page .faq .elementor-toggle-item { border-bottom: 1px solid var(--border-hairline); }
.ccb-page .faq .elementor-toggle-item:first-child { border-top: 1px solid var(--border-hairline); }
.ccb-page .faq .elementor-tab-title {
padding: var(--space-lg) 0; border: 0; background: none;
font-family: var(--font-display); font-size: var(--size-21); line-height: var(--lh-21);
font-weight: var(--weight-semibold); letter-spacing: var(--track-body);
color: var(--text-strong);
display: flex; align-items: center; justify-content: space-between;
flex-direction: row-reverse; gap: var(--space-lg);
}
.ccb-page .faq .elementor-tab-title a { color: inherit; }
.ccb-page .faq .elementor-toggle-icon { color: var(--ccb-gold); width: auto; margin: 0; }
.ccb-page .faq .elementor-tab-content {
padding: 0 0 var(--space-lg); border: 0; background: none;
font-size: var(--size-17); line-height: var(--lh-17); color: var(--text-body);
}
.ccb-page .faq .elementor-tab-content p { max-width: 68ch; margin: 0; }
.ccb-page .faq__foot { margin-top: var(--space-xl); color: var(--text-muted); }
.ccb-page .faq__foot a { color: var(--ccb-red-bright); }
/* --- Map ---------------------------------------------------------------- */
.ccb-page .location__map .elementor-custom-embed {
border: 1px solid var(--border-hairline); border-radius: var(--radius-md); overflow: hidden;
}
.ccb-page .location__map iframe { filter: grayscale(1) contrast(1.05); display: block; width: 100%; min-height: 380px; }
/* --- Tiles: the canvas flip is the separation, so kill widget gaps ------ */
.ccb-page .e-con.tile { row-gap: var(--space-xl); }
.ccb-page .e-con.hero-tile { padding: 0; }
/* --- Interior pages: compact hero + hairline rows ----------------------- */
.ccb-page .e-con.hero-compact { padding-block: var(--space-section); }
.ccb-page .e-con.hero-compact .headline { color: var(--paper); }
.ccb-page .e-con.hero-compact .lead { color: var(--paper-72); }
.ccb-page .e-con.rows { gap: 0; border-top: 1px solid var(--border-hairline); }
.ccb-page .e-con.row {
align-items: center; gap: var(--space-xl);
padding-block: var(--space-lg);
border-bottom: 1px solid var(--border-hairline);
}
.ccb-page .e-con.row__main { flex: 1 1 auto; gap: var(--space-xxs); }
.ccb-page .row__k {
font-family: var(--font-display); font-size: var(--size-21); line-height: var(--lh-21);
font-weight: var(--weight-medium); color: var(--text-strong);
}
.ccb-page .row__meta {
flex: none; font-family: var(--font-mono); font-size: var(--size-14);
letter-spacing: var(--track-mono); color: var(--text-muted); white-space: nowrap;
}
.ccb-page .row__action { flex: none; }
.ccb-page .row__action a { color: var(--ccb-red); font-weight: var(--weight-medium); }
.ccb-page .ccb-dark .row__action a { color: var(--ccb-red-bright); }
@media (max-width: 767px) {
.ccb-page .e-con.row { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
}
/* Group heading inside a directory-style tile. */
.ccb-page .group__h {
font-family: var(--font-display); font-size: var(--size-28); line-height: var(--lh-28);
letter-spacing: var(--track-display); font-weight: var(--weight-semibold); color: var(--text-strong);
}
/* Composed empty state. */
.ccb-page .e-con.empty {
border: 1px dashed var(--border-hairline); border-radius: var(--radius-lg);
padding: var(--space-section) var(--space-xxl);
align-items: center; text-align: center; gap: var(--space-lg);
}
.ccb-page .e-con.empty .elementor-widget-text-editor { max-width: 62ch; }
/* Payment panel + trust column. */
.ccb-page .e-con.panel {
border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
padding: var(--space-xxl); gap: var(--space-lg);
}
.ccb-page .mono-url {
font-family: var(--font-mono); font-size: var(--size-14);
letter-spacing: 0.02em; color: var(--text-strong);
background: var(--paper-alt); border-radius: var(--radius-sm);
padding: var(--space-sm) var(--space-md);
}
/* --- Override the old Kit's global typography ---------------------------
The existing Elementor Kit sets H1 to Bebas Neue, uppercase. This design
system is sentence case everywhere, so the type classes must win. The Kit
itself is left alone so the pages that have not been rebuilt keep working. */
.ccb-page .display, .ccb-page .headline, .ccb-page .subhead,
.ccb-page .row__k, .ccb-page .card__h, .ccb-page .group__h, .ccb-page .steps__h,
.ccb-page .faq .elementor-tab-title, .ccb-page .receipt__k {
text-transform: none;
font-family: var(--font-display);
}
.ccb-page .display { font-size: var(--size-80); line-height: var(--lh-80); letter-spacing: var(--track-display-xl); font-weight: var(--weight-bold); }
.ccb-page .headline { font-size: var(--size-56); line-height: var(--lh-56); letter-spacing: var(--track-display-xl); font-weight: var(--weight-bold); }
.ccb-page .subhead { font-size: var(--size-40); line-height: var(--lh-40); letter-spacing: var(--track-display); font-weight: var(--weight-semibold); }
.ccb-page .lead, .ccb-page .body, .ccb-page .caption,
.ccb-page .elementor-widget-text-editor {
font-family: var(--font-body); text-transform: none;
}
.ccb-page .eyebrow, .ccb-page .row__meta, .ccb-page .figure,
.ccb-page .receipt__v, .ccb-page .receipt__lbl, .ccb-page .receipt__no,
.ccb-page .steps__num, .ccb-page .mono-url {
font-family: var(--font-mono);
}
@media (max-width: 1067px) {
.ccb-page .display { font-size: var(--size-56); line-height: var(--lh-56); }
.ccb-page .headline { font-size: var(--size-40); line-height: var(--lh-40); }
.ccb-page .subhead { font-size: var(--size-28); line-height: var(--lh-28); }
}
@media (max-width: 767px) {
.ccb-page .display { font-size: var(--size-40); line-height: var(--lh-40); }
.ccb-page .headline { font-size: var(--size-28); line-height: var(--lh-28); }
}
/* Ninja Forms, wearing the design system's field styling. */
.ccb-page .ccb-form .nf-form-title, .ccb-page .ccb-form .nf-form-fields-required { display: none; }
.ccb-page .ccb-form .nf-field-label label {
font-family: var(--font-body); font-size: var(--size-14); font-weight: var(--weight-medium);
color: var(--text-body); text-transform: none;
}
.ccb-page .ccb-form input[type=text], .ccb-page .ccb-form input[type=tel],
.ccb-page .ccb-form input[type=email], .ccb-page .ccb-form textarea {
width: 100%; min-height: 56px; padding: var(--space-md);
border: 1px solid var(--border-hairline); border-radius: var(--radius-sm);
background: var(--paper); color: var(--text-body);
font-family: var(--font-body); font-size: var(--size-17);
}
.ccb-page .ccb-form textarea { min-height: 120px; }
.ccb-page .ccb-form input[type=button], .ccb-page .ccb-form input[type=submit] {
background: var(--action-primary-bg); color: var(--action-primary-fg);
border: 0; border-radius: var(--radius-md);
min-height: var(--tap-min); padding: var(--space-md) var(--space-xl);
font-family: var(--font-body); font-size: var(--size-17); font-weight: var(--weight-medium);
cursor: pointer; text-transform: none;
}
.ccb-page .ccb-form input[type=button]:hover { background: var(--action-primary-bg-press); }
.ccb-page .e-con.quote { background: var(--paper-alt); border-radius: var(--radius-md); padding: var(--space-xl); gap: var(--space-md); }
/* ===== chrome ===== */
/* ==========================================================================
Site chrome - header, footer, mobile call bar
Scoped under .ccb-chrome, which goes on EVERY page, because the Theme
Builder header and footer render everywhere. Deliberately separate from
.ccb-page: the content stylesheet must not touch pages that still run the
old design, but the chrome must look right on all of them.
========================================================================== */
.ccb-chrome .ccb-nav {
position: sticky; top: 0; z-index: 90;
background: rgba(0,0,0,.92);
-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.ccb-chrome .ccb-nav.e-con {
padding: 0 var(--gutter-desktop); min-height: 56px;
display: flex; flex-direction: row; flex-wrap: nowrap;
align-items: center; justify-content: flex-start; gap: var(--space-xl);
}
.ccb-chrome .ccb-nav .e-con { padding: 0; }
/* Elementor widgets are width:100% by default, which made these overlap. */
.ccb-chrome .ccb-nav > .elementor-widget { width: auto; flex: 0 0 auto; }
.ccb-chrome .ccb-nav > .ccb-nav__menu { flex: 1 1 auto; }
.ccb-chrome .ccb-nav__end.e-con {
flex: 0 0 auto; margin-left: auto;
display: flex; flex-direction: row; align-items: center;
gap: var(--space-md); width: auto;
}
.ccb-chrome .ccb-nav__end > .elementor-widget { width: auto; flex: 0 0 auto; }
.ccb-chrome .ccb-nav__badge img { width: 34px; height: 34px; display: block; }
.ccb-chrome .ccb-nav .elementor-nav-menu {
display: flex; flex-wrap: nowrap; gap: var(--space-lg); align-items: center;
}
.ccb-chrome .ccb-nav .elementor-nav-menu li { white-space: nowrap; }
.ccb-chrome .ccb-nav .elementor-nav-menu a.elementor-item {
font-family: var(--font-mono); font-size: var(--size-12);
letter-spacing: var(--track-mono); text-transform: uppercase;
color: rgba(255,255,255,.72); padding: 8px 0;
}
.ccb-chrome .ccb-nav .elementor-nav-menu a.elementor-item:hover,
.ccb-chrome .ccb-nav .elementor-nav-menu a.elementor-item.elementor-item-active { color: #fff; }
.ccb-chrome .ccb-nav .elementor-nav-menu--main .elementor-item:before,
.ccb-chrome .ccb-nav .elementor-nav-menu--main .elementor-item:after { display: none; }
.ccb-chrome .ccb-nav__status {
font-family: var(--font-mono); font-size: var(--size-12);
letter-spacing: var(--track-mono); text-transform: uppercase;
color: var(--ccb-gold); white-space: nowrap;
}
.ccb-chrome .ccb-nav__cta .elementor-button {
background: var(--ccb-red); color: #fff;
border-radius: var(--radius-md); border: 0;
padding: 9px var(--space-md); min-height: 0;
font-family: var(--font-body); font-size: var(--size-14);
font-weight: var(--weight-medium); text-transform: none; letter-spacing: 0;
white-space: nowrap;
}
.ccb-chrome .ccb-nav__cta .elementor-button:hover { background: var(--ccb-red-press); color: #fff; }
.ccb-chrome .ccb-nav__cta .elementor-button-icon { display: none; }
/* --- Mobile call bar: the phone number never scrolls away ---------------- */
.ccb-chrome .ccb-callbar { display: none; }
@media (max-width: 767px) {
.ccb-chrome .ccb-nav__status, .ccb-chrome .ccb-nav__cta { display: none; }
.ccb-chrome .ccb-callbar.e-con {
display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
background: #000; border-top: 1px solid rgba(255,255,255,.16);
padding: 10px var(--gutter-mobile) calc(10px + env(safe-area-inset-bottom));
gap: 6px; align-items: stretch;
}
.ccb-chrome .ccb-callbar .ccb-nav__status { display: block; text-align: center; }
.ccb-chrome .ccb-callbar .elementor-button {
background: var(--ccb-red); color: #fff; width: 100%;
justify-content: center; border-radius: var(--radius-md);
min-height: var(--tap-min); font-family: var(--font-body);
font-size: var(--size-17); font-weight: var(--weight-medium); text-transform: none;
}
.ccb-chrome .ccb-callbar .elementor-button-icon { display: none; }
.ccb-chrome body, body.ccb-chrome { padding-bottom: 104px; }
}
@media (max-width: 1067px) { .ccb-chrome .ccb-nav.e-con { padding-inline: var(--gutter-tablet); } }
@media (max-width: 767px) { .ccb-chrome .ccb-nav.e-con { padding-inline: var(--gutter-mobile); } }
/* --- Footer -------------------------------------------------------------- */
.ccb-chrome .ccb-foot.e-con {
background: #000; color: rgba(255,255,255,.72);
padding: var(--space-section) var(--gutter-desktop) var(--space-xxl);
}
.ccb-chrome .ccb-foot .e-con { padding: 0; }
.ccb-chrome .ccb-foot__cols { gap: var(--space-xxl); align-items: flex-start; }
.ccb-chrome .ccb-foot__mark img { width: 240px; height: auto; }
.ccb-chrome .ccb-foot p { color: rgba(255,255,255,.72); font-size: var(--size-14); line-height: var(--lh-14); max-width: 46ch; }
.ccb-chrome .ccb-foot__h {
font-family: var(--font-mono); font-size: var(--size-12);
letter-spacing: var(--track-mono); text-transform: uppercase;
color: var(--ccb-gold); font-weight: var(--weight-medium);
}
.ccb-chrome .ccb-foot .elementor-nav-menu { display: block; }
.ccb-chrome .ccb-foot .elementor-nav-menu a.elementor-item {
font-family: var(--font-body); font-size: var(--size-14);
color: rgba(255,255,255,.72); text-transform: none; padding: 3px 0; letter-spacing: 0;
}
.ccb-chrome .ccb-foot .elementor-nav-menu a.elementor-item:hover { color: #fff; }
.ccb-chrome .ccb-foot__phone a, .ccb-chrome .ccb-foot__phone {
font-family: var(--font-mono); font-size: var(--size-17);
letter-spacing: var(--track-mono); color: #fff;
}
.ccb-chrome .ccb-foot__hours {
font-family: var(--font-mono); font-size: var(--size-12);
letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ccb-gold);
}
.ccb-chrome .ccb-foot__addr { font-size: var(--size-14); line-height: 1.6; color: rgba(255,255,255,.56); }
.ccb-chrome .ccb-foot__legal { border-top: 1px solid rgba(255,255,255,.16); padding-top: var(--space-xl); margin-top: var(--space-xl); }
.ccb-chrome .ccb-foot__legal p { font-size: var(--size-12); line-height: 1.6; color: rgba(255,255,255,.56); max-width: 92ch; }
.ccb-chrome .ccb-foot__legal strong { color: rgba(255,255,255,.72); font-weight: var(--weight-medium); }
.ccb-chrome .ccb-foot__todo {
color: var(--ccb-gold); font-family: var(--font-mono);
letter-spacing: var(--track-mono); border-bottom: 1px dashed currentColor;
}
.ccb-chrome .ccb-foot .elementor-social-icon { background: transparent; border: 1px solid rgba(255,255,255,.16); }
.ccb-chrome .ccb-foot .elementor-social-icon svg { fill: rgba(255,255,255,.72); }
.ccb-chrome .ccb-foot .elementor-social-icon:hover svg { fill: #fff; }
@media (max-width: 1067px) { .ccb-chrome .ccb-foot.e-con { padding-inline: var(--gutter-tablet); } .ccb-chrome .ccb-foot__cols { flex-wrap: wrap; } }
@media (max-width: 767px) { .ccb-chrome .ccb-foot.e-con { padding-inline: var(--gutter-mobile); } .ccb-chrome .ccb-foot__cols { flex-direction: column; } }
/* --- Scroll-engine CTAs -------------------------------------------------
The engine renders its own anchors inside @layer sw, so they need explicit
pill styling rather than inheriting the .btn classes. */
.ccb-page #ccb-hero-world .sw-copy__cta {
display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl);
}
.ccb-page #ccb-hero-world .sw-copy__cta a {
display: inline-flex; align-items: center; gap: var(--space-xs);
min-height: var(--tap-min); padding: var(--space-md) var(--space-xl);
border-radius: var(--radius-md); border: 1px solid transparent;
font-family: var(--font-body); font-size: var(--size-17);
font-weight: var(--weight-medium); letter-spacing: var(--track-body);
text-decoration: none; line-height: 1.2;
background: var(--ccb-red); color: #fff;
transition: background-color var(--dur-micro) var(--ease-ccb);
}
.ccb-page #ccb-hero-world .sw-copy__cta a:hover { background: var(--ccb-red-press); color: #fff; text-decoration: none; }
.ccb-page #ccb-hero-world .sw-copy__cta a + a {
background: transparent; border-color: rgba(255,255,255,.5); color: #fff;
}
.ccb-page #ccb-hero-world .sw-copy__cta a + a:hover { background: rgba(255,255,255,.1); }
/* --- Header: hold one line, never wrap ---------------------------------
The menu shrinks before anything else; the badge, availability line and
call pill are fixed. Below the phone breakpoint the burger takes over and
the call pill moves to the fixed bottom bar. */
.ccb-chrome .ccb-nav .elementor-nav-menu { flex-wrap: nowrap; }
.ccb-chrome .ccb-nav > .ccb-nav__menu { min-width: 0; overflow: hidden; }
.ccb-chrome .ccb-nav__end.e-con { flex-shrink: 0; white-space: nowrap; }
.ccb-chrome .ccb-nav__badge { flex-shrink: 0; }
/* Tighten the menu before the layout is ever forced to wrap. */
@media (max-width: 1240px) {
.ccb-chrome .ccb-nav .elementor-nav-menu { gap: var(--space-md); }
.ccb-chrome .ccb-nav.e-con { gap: var(--space-lg); padding-inline: var(--gutter-tablet); }
}
@media (max-width: 1080px) {
.ccb-chrome .ccb-nav .elementor-nav-menu { gap: var(--space-sm); }
.ccb-chrome .ccb-nav__status { display: none; }
}
/* Burger, when it appears, sits hard right next to the call pill. */
/* Elementor ships `margin: 0 auto` on the toggle, which centres it. Override
both sides so the burger sits hard right. */
.ccb-chrome .ccb-nav .elementor-menu-toggle {
margin: 0 0 0 auto; color: #fff; background: transparent; order: 2;
}
/* Only the widget container is realigned. Targeting `nav` here forced
display:flex onto the menu Elementor hides at phone width, which stopped it
collapsing to the burger at all. */
.ccb-chrome .ccb-nav > .ccb-nav__menu > .elementor-widget-container {
display: flex; justify-content: flex-end;
}
@media (max-width: 767px) {
.ccb-chrome .ccb-nav.e-con { justify-content: space-between; }
/* The end group is empty at this width (call pill moved to the bottom bar),
so remove it entirely rather than let it hold space. */
.ccb-chrome .ccb-nav__end.e-con { display: none; }
.ccb-chrome .ccb-nav > .ccb-nav__menu { flex: 0 0 auto; margin-left: auto; overflow: visible; }
.ccb-chrome .ccb-nav .elementor-nav-menu--dropdown {
background: rgba(0,0,0,.96); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.ccb-chrome .ccb-nav .elementor-nav-menu--dropdown a.elementor-item {
font-family: var(--font-display); font-size: var(--size-21);
text-transform: none; letter-spacing: var(--track-body);
color: #fff; padding: var(--space-md) var(--gutter-mobile);
}
}
/* Anchor the burger to the right edge. Elementor sets width and margin on the
widget and the toggle from several places; !important here beats escalating
specificity against a moving target in a third-party framework. */
@media (max-width: 767px) {
.ccb-chrome .ccb-nav > .ccb-nav__menu {
margin-left: auto !important; margin-right: 0 !important;
flex: 0 0 auto !important; width: auto !important;
}
.ccb-chrome .ccb-nav > .ccb-nav__menu > .elementor-widget-container { width: auto !important; }
.ccb-chrome .ccb-nav .elementor-menu-toggle { margin: 0 !important; }
}
/* Final anchor. Elementor reserves space on the right of the bar through its
own container variables, and fighting that with flex sizing kept failing.
Positioning the toggle absolutely is deterministic and immune to it. */
@media (max-width: 767px) {
.ccb-chrome .ccb-nav.e-con { position: relative; overflow: visible !important; }
.ccb-chrome .ccb-nav__end.e-con { display: none !important; --display: none !important; }
/* The menu widget carries overflow:hidden at wider sizes to let the links
shrink; on phones that clipped the absolutely-positioned toggle out of
existence and left no way to open the menu. */
.ccb-chrome .ccb-nav > .ccb-nav__menu,
.ccb-chrome .ccb-nav > .ccb-nav__menu > .elementor-widget-container {
overflow: visible !important;
}
.ccb-chrome .ccb-nav .elementor-menu-toggle {
position: absolute; right: 0; top: 50%;
transform: translateY(-50%); margin: 0 !important; z-index: 2;
display: flex !important;
}
}
/* ==========================================================================
Post-audit fixes
========================================================================== */
/* 1. Sticky nav.
`position: sticky` only travels inside its own parent's box, and
.elementor-location-header is exactly as tall as the bar, so the nav had
nowhere to stick. Move the stickiness to the wrapper, which is a direct
child of . */
.ccb-chrome .elementor-location-header {
position: sticky; top: 0; z-index: 90;
}
.ccb-chrome .ccb-nav.e-con { position: static; }
/* 2. The scroll engine's layers are position:fixed and built to own the whole
page, so they stayed pinned over every section below the hero. A class
toggled by IntersectionObserver retires them once the hero's scroll range
is done. Layout is preserved (visibility, not display) so the track keeps
its height. */
#ccb-hero-world.sw-offscreen .sw-sky,
#ccb-hero-world.sw-offscreen .sw-stage,
#ccb-hero-world.sw-offscreen .sw-copylayer { visibility: hidden; }
/* 3. Nav links were a ~28px hit area. Bring them to the 44px minimum without
changing the visual rhythm of the bar. */
.ccb-chrome .ccb-nav .elementor-nav-menu a.elementor-item {
min-height: var(--tap-min);
display: inline-flex; align-items: center;
padding-block: 0;
}
.ccb-chrome .ccb-nav .elementor-nav-menu li { display: flex; align-items: center; }
/* 4. Focus is visible on the dark chrome, not just inside .ccb-page. */
.ccb-chrome .elementor-location-header a:focus-visible,
.ccb-chrome .elementor-location-header button:focus-visible,
.ccb-chrome .elementor-location-footer a:focus-visible {
outline: 2px solid var(--ccb-gold); outline-offset: 3px; border-radius: var(--radius-sm);
}
/* ==========================================================================
1440px content box
Backgrounds stay full-bleed; the CONTENT sits in a centred 1440 box with the
88px gutter inside it. This is what Elementor calls "Boxed": one variable
does it without an extra wrapper element, and the content column is then
identical at 1440px and at 2560px instead of growing with the viewport.
========================================================================== */
:root {
--page-box: 1440px;
--page-gutter: max(var(--gutter-desktop), calc((100% - var(--page-box)) / 2 + var(--gutter-desktop)));
}
.ccb-page .e-con.tile { padding-inline: var(--page-gutter); }
.ccb-chrome .ccb-nav.e-con { padding-inline: var(--page-gutter); }
.ccb-chrome .ccb-foot.e-con { padding-inline: var(--page-gutter); }
/* tile__inner already centres; with the box in place it must not cap again. */
.ccb-page .e-con.tile__inner { max-width: none; }
/* The hero engine positions its copy off the viewport edge. Pull it onto the
same box so the headline lines up with every section below it. */
.ccb-page #ccb-hero-world .sw-copy {
left: var(--page-gutter);
right: var(--page-gutter);
width: auto;
max-width: calc(var(--page-box) - (var(--gutter-desktop) * 2));
}
.ccb-page .hero__static-copy {
padding-inline: var(--page-gutter);
max-width: none;
}
.ccb-page .hero__static-copy > * { max-width: 52ch; }
@media (max-width: 1067px) {
:root { --page-gutter: var(--gutter-tablet); }
.ccb-page .hero__static-copy > * { max-width: none; }
}
@media (max-width: 767px) {
:root { --page-gutter: var(--gutter-mobile); }
}
/* ==========================================================================
Phone: stop the collapsed menu widening the page
The burger fix needed overflow:visible on the menu widget, which then let
Elementor's hidden dropdown panel contribute its full width to layout and
pushed every page 130px wide at 390. Take the panel out of flow instead.
========================================================================== */
@media (max-width: 767px) {
.ccb-chrome .ccb-nav { position: relative; }
.ccb-chrome .ccb-nav .elementor-nav-menu--dropdown,
.ccb-chrome .ccb-nav .elementor-menu-toggle + nav,
.ccb-chrome .ccb-nav nav.elementor-nav-menu--dropdown {
position: absolute !important;
left: 0 !important; right: 0 !important;
top: 100% !important;
width: auto !important; max-width: 100vw !important;
}
/* The widget itself is only ever as wide as the burger. */
.ccb-chrome .ccb-nav > .ccb-nav__menu { max-width: 60px !important; }
}
/* NOTE: an `html, body { overflow-x: clip }` rule lived here as a belt-and-
braces guard against horizontal scroll. It was removed: `clip` on the root
element suppresses viewport scroll propagation, which left the document
unscrollable. The actual overflow cause (the collapsed nav dropdown) is
fixed above, so the guard was both unnecessary and harmful. */
/* The badge is a square mark. Elementor's per-element width rule ties on
specificity and leaves height at the intrinsic value, which stretched it to
34x100. Lock the box and the ratio. */
.ccb-chrome .ccb-nav__badge img,
.ccb-chrome .ccb-nav__badge .elementor-widget-container img {
width: 34px !important;
height: 34px !important;
aspect-ratio: 1 / 1;
object-fit: contain;
display: block;
}
.ccb-chrome .ccb-foot__mark img { height: auto !important; }
/* ==========================================================================
Hero headline
6rem on desktop, fluid below so it never overflows the box on small screens.
clamp lands on exactly 96px at 1440 and holds there on wider displays.
This puts the hero back at the top of the hierarchy: 96 hero > 56 interior
H1 > 40 section heading.
========================================================================== */
.ccb-page .hero__static-copy .display,
.ccb-page #ccb-hero-world .sw-copy__title {
font-size: clamp(2.25rem, 6.66vw, 6rem);
line-height: 1.02;
letter-spacing: -0.03em;
text-wrap: balance;
}
/* The engine's copy column is narrow by default; give the bigger type room. */
.ccb-page #ccb-hero-world .sw-copy__title { max-width: 18ch; }
.ccb-page .hero__static-copy .display { max-width: none; }
/* ==========================================================================
Hero tail
The engine adds one extra viewport-height of scroll so the final clip can
finish. During it the render loop fades that scene to opacity 0 while the
last section's copy is pinned at 1, so the hero ended on a black screen with
floating text. Pin the final scene for the duration of that tail instead.
!important is required because the render loop writes opacity inline on
every frame.
========================================================================== */
#ccb-hero-world.sw-tail .sw-scene:last-of-type {
opacity: 1 !important;
z-index: 115 !important;
}
/* ==========================================================================
Static hero fallback must actually hide
`.hero__static { display: grid }` outranks the [hidden] attribute, so once
the engine mounted and set hidden=true the fallback kept occupying a full
viewport. That pushed #ccb-hero-world down by ~729px while the engine still
computes its segment offsets from scrollY 0, putting the whole scrub out of
phase and leaving ~1400px of scroll with every scene faded to black.
========================================================================== */
.ccb-page .hero__static[hidden],
.ccb-page .hero__world[hidden] { display: none !important; }
/* ==========================================================================
Header logo: full lockup, every breakpoint
The lockup is 754.7 x 388 (1.945:1), so height drives the bar. Sized by
height rather than width so the bar stays predictable, with the old square
badge rules retired.
========================================================================== */
.ccb-chrome .ccb-nav__logo img,
.ccb-chrome .ccb-nav__logo .elementor-widget-container img {
height: 52px !important;
width: auto !important;
max-width: none !important;
aspect-ratio: 754.7 / 388;
object-fit: contain;
display: block;
}
.ccb-chrome .ccb-nav__logo { flex: 0 0 auto; line-height: 0; }
.ccb-chrome .ccb-nav.e-con { min-height: 76px; padding-block: 8px; }
@media (max-width: 1240px) {
.ccb-chrome .ccb-nav__logo img,
.ccb-chrome .ccb-nav__logo .elementor-widget-container img { height: 46px !important; }
.ccb-chrome .ccb-nav.e-con { min-height: 68px; }
}
@media (max-width: 767px) {
.ccb-chrome .ccb-nav__logo img,
.ccb-chrome .ccb-nav__logo .elementor-widget-container img { height: 40px !important; }
.ccb-chrome .ccb-nav.e-con { min-height: 60px; }
}
/* ==========================================================================
Mobile burger icon
The toggle was positioned and visible, but its SVG measured 0px wide and
inherited a dark grey fill (#33373d) - invisible on a black bar. Size it,
paint it white, and give it a proper 44px touch target.
========================================================================== */
@media (max-width: 767px) {
.ccb-chrome .ccb-nav .elementor-menu-toggle {
width: 44px !important; height: 44px !important;
display: flex !important; align-items: center; justify-content: center;
padding: 0 !important; background: transparent !important; border: 0;
}
.ccb-chrome .ccb-nav .elementor-menu-toggle svg,
.ccb-chrome .ccb-nav .elementor-menu-toggle i {
width: 26px !important; height: 26px !important;
font-size: 26px !important;
fill: #FFFFFF !important; color: #FFFFFF !important;
display: block;
}
.ccb-chrome .ccb-nav .elementor-menu-toggle .e-font-icon-svg { fill: #FFFFFF !important; }
/* The widget collapses to 0x0 because the toggle is absolutely positioned;
keep enough box for the tap target to sit in. */
.ccb-chrome .ccb-nav > .ccb-nav__menu { min-width: 44px !important; min-height: 44px; }
}
/* Elementor ships both toggle icons and swaps them on aria-expanded. Forcing
display:block on every svg above showed the hamburger and the close mark at
the same time, so restore the swap. */
@media (max-width: 767px) {
.ccb-chrome .ccb-nav .elementor-menu-toggle .elementor-menu-toggle__icon--close { display: none !important; }
.ccb-chrome .ccb-nav .elementor-menu-toggle .elementor-menu-toggle__icon--open { display: block !important; }
.ccb-chrome .ccb-nav .elementor-menu-toggle[aria-expanded="true"] .elementor-menu-toggle__icon--close { display: block !important; }
.ccb-chrome .ccb-nav .elementor-menu-toggle[aria-expanded="true"] .elementor-menu-toggle__icon--open { display: none !important; }
}
/* ==========================================================================
Mobile hero + dropdown fixes
========================================================================== */
/* 1. The scene media measured 500x0 - full width, zero height - which is the
black band under the image on first load. It only corrected once a video
loaded on scroll. Force the media to fill its scene on every state. */
.ccb-page #ccb-hero-world .sw-scene__still,
.ccb-page #ccb-hero-world .sw-scene__video,
.ccb-page #ccb-hero-world .sw-scene img,
.ccb-page #ccb-hero-world .sw-scene video {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
min-height: 100% !important;
object-fit: cover !important;
object-position: center 42%;
}
.ccb-page #ccb-hero-world .sw-scene,
.ccb-page #ccb-hero-world .sw-stage,
.ccb-page #ccb-hero-world .sw-sky { position: fixed !important; inset: 0 !important; }
/* 2. Hero copy sat at the bottom on phones (engine default). Centre it.
`translate` is a separate property from `transform`, so the engine's
per-frame parallax transform still composes on top of this. */
@media (max-width: 767px) {
.ccb-page #ccb-hero-world .sw-copy {
top: 50% !important;
bottom: auto !important;
translate: 0 -50%;
left: var(--gutter-mobile) !important;
right: var(--gutter-mobile) !important;
width: auto !important;
max-width: none !important;
}
.ccb-page .hero__static-copy { align-self: center; }
}
/* 3. The dropdown panel measured 44x0, because it is absolutely positioned
inside a menu widget that collapses to the width of the burger, and Elementor
keeps it at max-height 0 until its own slide animation runs. Rather than fight
that animation, drive the panel entirely off the toggle's aria-expanded, which
is the one bit of state Elementor sets reliably (the icon swap already keys on
it). The panel becomes a sheet pinned under the bar, so the bar itself — logo
and close button — is never covered and no stacking context is needed. */
:root { --ccb-navh: 60px; }
@media (max-width: 767px) {
.ccb-chrome .ccb-nav .elementor-menu-toggle:not([aria-expanded="true"]) + .elementor-nav-menu--dropdown {
display: none !important;
}
.ccb-chrome .ccb-nav .elementor-menu-toggle[aria-expanded="true"] + .elementor-nav-menu--dropdown {
display: block !important;
/* Elementor parks the collapsed panel at scaleY(0) and only its own
.elementor-active class restores it. That zeroes the rendered box while
leaving the computed height intact, which is why the panel measured
390x0 with a 325px layout height. Clear the transform outright. */
transform: none !important;
visibility: visible !important;
opacity: 1 !important;
position: fixed !important;
left: 0 !important; right: 0 !important;
top: var(--ccb-navh) !important;
width: 100vw !important;
max-width: 100vw !important;
height: auto !important;
max-height: calc(100dvh - var(--ccb-navh)) !important;
overflow-y: auto !important;
background: rgba(0,0,0,.97) !important;
-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
border-top: 1px solid rgba(255,255,255,.16);
padding-block: var(--space-sm) var(--space-xxl);
z-index: 95;
}
.ccb-chrome .ccb-nav .elementor-nav-menu--dropdown ul.elementor-nav-menu {
display: block !important; width: 100% !important;
}
.ccb-chrome .ccb-nav .elementor-nav-menu--dropdown li {
width: 100% !important; display: block !important;
border-bottom: 1px solid rgba(255,255,255,.10);
}
.ccb-chrome .ccb-nav .elementor-nav-menu--dropdown li:last-child { border-bottom: 0; }
.ccb-chrome .ccb-nav .elementor-nav-menu--dropdown a.elementor-item {
display: flex !important; align-items: center;
justify-content: flex-start !important;
min-height: var(--tap-min);
padding: var(--space-md) var(--gutter-mobile) !important;
font-family: var(--font-display);
font-size: var(--size-21);
font-weight: var(--weight-semibold);
letter-spacing: var(--track-body);
text-transform: none;
color: #fff !important;
}
}
/* ==========================================================================
Hero -> next section hand-off
The pinned layers are position:fixed, so the tile below the hero stayed
hidden behind them for the whole scrub and then snapped into view the
moment the world went offscreen. The engine lays down one extra viewport
height of track past the last segment, which means at the end of the scrub
the world's bottom edge sits exactly at the bottom of the viewport.
Switching the layers from viewport-fixed to world-bottom-absolute at that
instant is pixel-identical, and from there they scroll up with the page so
the section below rises into place instead of appearing.
--sw-rel and --sw-vh are both stamped by the mount script at the instant of
the flip, from the live scroll position and window.innerHeight. --sw-rel is
the world-local offset that puts the released layer exactly where the pinned
one was, so a scroll event that overshoots the boundary still hands off
without a snap. Height comes from innerHeight rather than vh or svh, which
both disagree with it while a mobile toolbar is on screen.
========================================================================== */
.ccb-page #ccb-hero-world { position: relative; }
.ccb-page #ccb-hero-world.sw-tail .sw-stage,
.ccb-page #ccb-hero-world.sw-tail .sw-sky,
.ccb-page #ccb-hero-world.sw-tail .sw-copylayer {
position: absolute !important;
top: var(--sw-rel, 0px) !important;
bottom: auto !important;
left: 0 !important;
right: 0 !important;
height: var(--sw-vh, 100svh) !important;
}
/* Scenes are forced fixed further up so they fill the viewport on first paint.
Inside a released stage they have to go back to being its children. */
.ccb-page #ccb-hero-world.sw-tail .sw-scene {
position: absolute !important;
inset: 0 !important;
}