/* =========================================================================
CAPITAL HOME BUILDERS — Elementor widgets
Generated from the static build by build/make-plugin-css.py — the design is
ported, not re-authored, so the WordPress site matches the static one.
Everything is scoped to `.chb-w`, the wrapper printed on every widget root.
Page-level chrome (.chb-bg-field, .chb-spine) sits outside the widgets and
keeps its own prefix.
========================================================================= */
/* ===== tokens.css ===== */
/* =========================================================================
CAPITAL HOME BUILDERS — design tokens (single source of truth)
Black · Champagne Gold · Warm Off-White, sampled from the logo artwork.
========================================================================= */
.chb-w{
/* ---------- colour ---------- */
--black: #000000;
--ink: #0a0a0b; /* a hair off-black — reads richer than pure #000 */
--ink-2: #131315; /* raised dark panels */
--ink-3: #1d1d20; /* hairline dividers on dark */
--white: #ffffff;
--cream: #f6f3ee; /* primary warm off-white */
--cream-2: #ece7dd; /* alternate light ground */
--cream-3: #e0d9cc; /* light hairlines */
--gold: #c9a56a; /* champagne gold — sampled from the logo */
--gold-lt: #dcc08a; /* highlight / hover */
--gold-dp: #a3803f; /* deep gold */
--gold-ink: #8a6a30; /* gold that still passes contrast on cream */
/* text roles */
--on-dark: var(--white);
--on-dark-soft: rgba(255,255,255,.66);
--on-dark-faint: rgba(255,255,255,.40);
--on-light: #16161a;
--on-light-soft: rgba(18,18,22,.66);
/* .42 measured 2.66:1 on cream — below AA, and it is the tier that carries
every form label, the slider hint and the project captions. .60 measures
~4.6:1 and still reads as the faint tier. The dark-side twin is fine as it
is (rgba(255,255,255,.40) on ink measures ~7.4:1). */
--on-light-faint: rgba(18,18,22,.60);
/* lines */
--line-dark: rgba(255,255,255,.14);
--line-dark-2: rgba(255,255,255,.08);
--line-light: rgba(18,18,22,.14);
--line-light-2:rgba(18,18,22,.07);
/* the continuous background field starts here */
--tone: var(--ink);
/* ---------- type ---------- */
--f-display: "Marcellus", "Cormorant Garamond", Georgia, "Times New Roman", serif;
--f-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
--t-hero: clamp(2.75rem, 6.2vw, 6.1rem);
--t-h1: clamp(2.35rem, 5.1vw, 4.5rem);
--t-h2: clamp(1.95rem, 3.9vw, 3.35rem);
--t-h3: clamp(1.35rem, 2.1vw, 1.95rem);
--t-h4: clamp(1.08rem, 1.4vw, 1.28rem);
--t-lead: clamp(1.02rem, 1.16vw, 1.2rem);
--t-body: clamp(.95rem, 1vw, 1.03rem);
--t-small: .875rem;
--t-eyebrow: .70rem;
--t-sheet: .68rem; /* drawing-sheet numerals */
--lh-display: 1.06;
--lh-head: 1.14;
--lh-body: 1.72;
--ls-display: -.015em;
--ls-eyebrow: .30em;
--ls-sheet: .22em;
/* ---------- layout ---------- */
--gutter: clamp(20px, 5vw, 68px);
--container: 1280px;
--narrow: 760px;
--wide: 1560px;
--chapter-y: clamp(72px, 9.5vh, 132px);
--spine: clamp(0px, 3.2vw, 46px); /* left drawing-margin on desktop */
--radius: 2px;
--radius-lg: 3px;
/* ---------- motion ---------- */
--ease: cubic-bezier(.22,.61,.36,1);
--ease-out: cubic-bezier(.16,1,.3,1);
--ease-in: cubic-bezier(.55,.06,.68,.19);
--dur: .62s;
--dur-slow: 1.05s;
/* ---------- depth ---------- */
--z-bg: 0;
--z-body: 1;
--z-spine: 40;
--z-header: 60;
--z-menu: 80;
--z-top: 100;
}
/* Reduced-motion is the first branch, not an afterthought. */
@media (prefers-reduced-motion: reduce) {
.chb-w{ --dur: .001s; --dur-slow: .001s; }
}
/* =========================================================================
INHERITED-COLOUR ARMOUR
The design colours very little text directly. A chapter sets one colour —
white on dark, ink on light — and every heading, paragraph and span below it
INHERITS that colour. On the standalone site nothing competes, so it works.
Inside WordPress it does not, and the reason is a rule of the cascade that
has no workaround: inheritance is what an element falls back to when no rule
matches it at all. ANY matching rule beats it, however weak. So a theme or an
Elementor kit that ships something as ordinary as
h1,h2,h3,h4,h5,h6 { color: #54595F }
p, li, span { color: #7A7A7A }
takes every one of those elements away from the chapter and paints it grey —
on a black background. Measured on the harness before this block existed: the
hero h1 came out rgb(84,89,95) and the title spans rgb(122,122,122).
The cure is to make inheritance explicit, so it is a rule and can win.
It has to land in a very narrow band of the cascade: strong enough to beat
the theme, weak enough to lose to our own design colours and to the Style-tab
colour pickers. FOUR THINGS ARE DELIBERATE, and each one is load-bearing:
1. `.chb-w.chb-w` — the wrapper class is repeated. That is a specificity
trick, not a typo: two classes beat the single class in
`.elementor-kit-7 h2` and `.elementor-widget-container p`, whichever
stylesheet the host happens to load last.
2. `:where()`, NOT `:is()`. They select identically; they score differently.
`:is()` contributes the weight of its argument, so `.chb-w.chb-w :is(p)`
lands on (0,2,1) — one notch ABOVE the design's own `.chb-w .eyebrow`
(0,2,0), which flattened the gold eyebrows to white the first time this
block was built. `:where()` contributes nothing, so the whole selector
sits at exactly (0,2,0): still above the theme's (0,1,1), now level with
the design instead of above it.
3. `*`, not a list of text tags. A hand-written list of h1..h6/p/span/li was
the second attempt, and it leaked: the theme simply coloured the DIV
wrapping them instead, and every `inherit` underneath dutifully followed
it down. Protecting the text tags while leaving their containers exposed
protects nothing. Universal inheritance is also what the design already
intends — the site's own reset does `color: inherit` on form controls,
just at a specificity too low to survive a theme.
4. It sits BEFORE the ported design CSS, because being level with the design
means ties are settled by source order. First = the design wins every tie
and only the theme loses. Moving this block to the end of the file would
flatten every accent colour in it.
5. No `!important` anywhere. The Style-tab colour pickers render at far
higher specificity and must keep working; forcing colour here would kill
every colour control in all 21 widgets.
Links and buttons pass through this rule too, then get overridden by their
own armour further down, where the pink has to be beaten with !important.
========================================================================= */
.chb-w.chb-w :where(*) { color: inherit; }
/* Inheritance needs something to inherit FROM, and on the standalone site that
something is `body { color: var(--on-dark) }`. A plugin has no body of its
own, so the default is restated on the widget root itself. Without it the
header — the one widget with no tone and no chapter class — inherits the
host's body colour and every `inherit` below it follows, which is precisely
how the whole navigation turns grey.
`.chb-w.chb-w` again, to sit level with the rules below rather than under
them: the tone rules, `.chb-w .footer` and the chapter classes all score
(0,2,0) and all come later, so each one overrides this default in turn. */
.chb-w.chb-w { color: var(--fg); font-family: var(--f-sans); }
/* The same three-rule shape as the colour armour, for the same reason, and it
has to be all three:
1. the root carries the default sans face
2. everything below inherits it — which is ALSO what carries a heading's
display face DOWN into the spans its text is wrapped in. The old armour
forced `.chb-w span` to the sans face instead, and since the span is the
element actually holding the glyphs, every `.lines` heading lost
Marcellus while the h1 itself still reported it
3. the display face is restated at (0,2,0), because the ported rule for it
is `.chb-w h1` at (0,1,1) and would lose to rule 2
Class-level font rules in the ported CSS also score (0,2,0) and come later,
so they still win their ties — as do the Style-tab typography controls. */
.chb-w.chb-w :where(*) { font-family: inherit; }
.chb-w.chb-w :where(h1, h2, h3, .display, .chb-title) { font-family: var(--f-display); }
/* =========================================================================
TONE-DERIVED SEMANTICS
The ported CSS asks for --fg / --fg-soft / --fg-faint / --fg-gold /
--fg-line, and the TONE answers. That indirection is the whole point: on the
standalone site every chapter had a fixed tone, so its CSS could hard-code
"dark text here". Here the tone is a control, and a section set to a tone the
design never gave it must still read correctly.
--panel is the same idea for the elements that paint their own ground — the
Difference cards, the belief and next-step panels, the stat tiles. If the
ground stayed cream while the inherited text went white, the text vanished
on its own card. Ground and text move together instead.
========================================================================= */
.chb-w.chb-w,
.chb-w[data-tone="ink"], .chb-w[data-tone="black"] {
--fg: var(--on-dark);
--fg-soft: var(--on-dark-soft);
--fg-faint: var(--on-dark-faint);
--fg-gold: var(--gold);
--fg-line: var(--line-dark);
--fg-line-2: var(--line-dark-2);
--panel: var(--ink-2);
--ground: var(--ink);
}
.chb-w[data-tone="cream"], .chb-w[data-tone="cream-2"] {
--fg: var(--on-light);
--fg-soft: var(--on-light-soft);
--fg-faint: var(--on-light-faint);
--fg-gold: var(--gold-ink); /* the only gold that passes contrast on cream */
--fg-line: var(--line-light);
--fg-line-2: var(--line-light-2);
--panel: var(--white);
--ground: var(--cream);
}
/* Category C: a bleed section's ground is a PHOTOGRAPH. No tone control
changes that, so the tone must not be allowed to lighten its text — every
token snaps back to the dark set inside one. */
.chb-w.chb-sec--bleed, .chb-w .chb-sec--bleed {
--fg: var(--on-dark);
--fg-soft: var(--on-dark-soft);
--fg-faint: var(--on-dark-faint);
--fg-gold: var(--gold);
--fg-line: var(--line-dark);
--fg-line-2: var(--line-dark-2);
--panel: var(--ink-2);
--ground: var(--ink);
color: var(--on-dark);
}
/* ===== base.css ===== */
/* =========================================================================
CAPITAL HOME BUILDERS — base layer
Reset · type · continuous background field · drawing spine · header ·
footer · buttons · frames · forms · reveal system
All element-level resets are wrapped in :where() so component rules win.
========================================================================= */
/* ------------------------------------------------------------------ reset */
.chb-w *, .chb-w *::before, .chb-w *::after{ box-sizing: border-box; }
.chb-w :where(html){
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
overflow-x: clip; /* clip, never hidden — hidden creates a scroller */
height: auto;
}
.chb-w :where(body){
margin: 0;
overflow-x: clip;
height: auto;
background: var(--ink);
color: var(--on-dark);
font-family: var(--f-sans);
font-size: var(--t-body);
line-height: var(--lh-body);
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
.chb-w :where(h1, .chb-w h2, .chb-w h3, .chb-w h4, .chb-w h5, .chb-w h6, .chb-w p, .chb-w figure, .chb-w blockquote, .chb-w dl, .chb-w dd, .chb-w ul, .chb-w ol){ margin: 0; }
.chb-w :where(ul, .chb-w ol){ padding: 0; list-style: none; }
.chb-w :where(img, .chb-w picture, .chb-w video, .chb-w canvas, .chb-w svg){ display: block; max-width: 100%; }
.chb-w :where(img){ height: auto; }
.chb-w :where(a){ color: inherit; text-decoration: none; }
.chb-w :where(button, .chb-w input, .chb-w select, .chb-w textarea){ font: inherit; color: inherit; }
.chb-w :where(button){
background: none; border: 0; padding: 0; cursor: pointer;
border-radius: 0; box-shadow: none; width: auto; display: inline-flex;
-webkit-tap-highlight-color: transparent;
}
.chb-w :where(fieldset){ border: 0; margin: 0; padding: 0; }
.chb-w :where(legend){ padding: 0; }
.chb-w :where(hr){ border: 0; }
.chb-w ::selection{ background: var(--gold); color: var(--ink); }
.chb-w :focus-visible{
outline: 2px solid var(--gold);
outline-offset: 3px;
}
.chb-w .vh{
position: absolute !important; width: 1px; height: 1px; padding: 0;
margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* ------------------------------------------- continuous background field */
/* One fixed ground whose tone is interpolated between chapters, so the page
reads as a single sheet rather than stacked blocks. */
.chb-bg-field__grain{
position: absolute; inset: -120px; opacity: .5; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
.chb-bg-field__glow{
position: absolute; left: 50%; top: -10%; width: 130vw; aspect-ratio: 1;
transform: translateX(-50%);
background: radial-gradient(circle at 50% 40%, rgba(201,165,106,.10), transparent 62%);
opacity: 0; transition: opacity .5s var(--ease);
}
html.tone-dark .chb-bg-field__glow{ opacity: 1; }
/* --------------------------------------------------- drawing-sheet spine */
/* A hairline margin down the left edge with the live chapter number — the
page reads like a sheet in an architect's drawing set. */
@media (min-width: 1180px) { }
.chb-spine__rail{ position: absolute; inset: 0; background: currentColor; opacity: .16; }
.chb-spine__fill{
position: absolute; left: 0; top: 0; width: 1px; height: 0;
background: var(--gold); box-shadow: 0 0 14px rgba(201,165,106,.5);
}
.chb-spine__num{
position: absolute; left: 10px; top: 50vh; transform: translateY(-50%);
font: 500 var(--t-sheet)/1 var(--f-sans);
letter-spacing: var(--ls-sheet); color: var(--fg-gold);
writing-mode: vertical-rl; text-orientation: mixed;
display: flex; align-items: center; gap: 12px;
}
.chb-spine__num span{ color: currentColor; opacity: .45; }
/* ------------------------------------------------------------ containers */
.chb-w .wrap{ width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto; }
.chb-w .wrap--wide{ width: min(100% - var(--gutter) * 2, var(--wide)); margin-inline: auto; }
.chb-w .wrap--narrow{ width: min(100% - var(--gutter) * 2, var(--narrow)); margin-inline: auto; }
.chb-w .bleed{ width: 100%; }
.chb-w .chapter{ position: relative; padding-block: var(--chapter-y); }
.chb-w .chapter--flush-top{ padding-block-start: 0; }
.chb-w .chapter--tight{ padding-block: clamp(56px, 7vh, 104px); }
.chb-w .chapter--dark{ color: var(--on-dark); }
.chb-w .chapter--light{ color: var(--on-light); }
/* EVERY chapter carries its own ground, keyed to its own tone — light ones
too. Relying on the morphing tone field alone means that while the field is
blending toward the next chapter, the chapter still on screen sits on the
wrong ground: near-black text on a dark field, i.e. an unreadable section.
The veil is opaque through the middle and fades out at both edges, so
neighbouring veils cross-fade and the page still reads as one sheet. */
.chb-w[data-tone]::before{
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
/* opaque across the body of the chapter, feathered only in a narrow band at
each end so neighbouring veils cross-fade instead of butting into a line */
background: linear-gradient(to bottom,
transparent 0%, var(--veil) clamp(28px, 6%, 120px),
var(--veil) calc(100% - clamp(28px, 6%, 120px)), transparent 100%);
}
.chb-w[data-tone="ink"]{ --veil: rgba(10,10,11,.96); }
.chb-w[data-tone="black"]{ --veil: rgba(0,0,0,.96); }
.chb-w[data-tone="cream"]{ --veil: rgba(246,243,238,.97); }
.chb-w[data-tone="cream-2"]{ --veil: rgba(236,231,221,.97); }
/* Sections that already carry their own photographic ground must not also
take the veil — two stacked overlays crush the image. */
.chb-w .hero::before, .chb-w .page-hero::before, .chb-w .closer::before, .chb-w .utility::before{ display: none; }
/* ---------------------------------------------------------- typographic */
.chb-w .eyebrow{
display: inline-flex; align-items: center; gap: 14px;
font: 600 var(--t-eyebrow)/1 var(--f-sans);
letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
color: var(--fg-gold);
}
.chb-w .eyebrow::before{
content: ""; width: clamp(24px, 4vw, 54px); height: 1px;
background: currentColor; opacity: .7;
}
.chb-w .chapter--light .eyebrow{ color: var(--gold-ink); }
.chb-w .display, .chb-w h1, .chb-w h2, .chb-w h3{
font-family: var(--f-display); font-weight: 400;
line-height: var(--lh-display); letter-spacing: var(--ls-display);
}
.chb-w h1{ font-size: var(--t-h1); }
.chb-w h2{ font-size: var(--t-h2); line-height: var(--lh-head); }
.chb-w h3{ font-size: var(--t-h3); line-height: var(--lh-head); }
.chb-w .h4{ font: 600 var(--t-h4)/1.35 var(--f-sans); letter-spacing: .01em; }
.chb-w .accent{ color: var(--fg-gold); }
.chb-w .chapter--light .accent{ color: var(--gold-ink); }
.chb-w .lead{
font-size: var(--t-lead); line-height: 1.68;
color: var(--fg-soft); max-width: 62ch;
}
.chb-w .chapter--light .lead{ color: var(--on-light-soft); }
.chb-w .body-copy p + p{ margin-top: 1.15em; }
.chb-w .body-copy{ color: var(--fg-soft); max-width: 66ch; }
.chb-w .chapter--light .body-copy{ color: var(--on-light-soft); }
.chb-w .sheet-no{
font: 500 var(--t-sheet)/1 var(--f-sans);
letter-spacing: var(--ls-sheet); text-transform: uppercase;
color: var(--fg-gold); display: inline-block;
}
.chb-w .chapter--light .sheet-no{ color: var(--gold-ink); }
/* section head: eyebrow + title, used everywhere */
.chb-w .chapter-head{ display: grid; gap: clamp(18px, 2.4vw, 28px); max-width: 44ch; }
.chb-w .chapter-head--wide{ max-width: 60ch; }
.chb-w .chapter-head--center{ margin-inline: auto; text-align: center; justify-items: center; }
.chb-w .chapter-head--center .eyebrow::before{ display: none; }
/* the roofline rule — the logo's chevron, drawn as a divider */
.chb-w .chevron-rule{
display: block; width: min(100%, 260px); height: 22px; margin-inline: auto;
color: var(--fg-gold); opacity: .55;
}
.chb-w .chevron-rule svg{ width: 100%; height: 100%; overflow: visible; }
.chb-w .chevron-rule path{ fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
/* ---------------------------------------------------------------- links */
.chb-w .ulink{
position: relative; display: inline-flex; align-items: center; gap: .6em;
font: 600 var(--t-small)/1 var(--f-sans); letter-spacing: .14em;
text-transform: uppercase; color: var(--fg-gold); padding-block: 6px;
}
.chb-w .chapter--light .ulink{ color: var(--gold-ink); }
.chb-w .ulink::after{
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
background: currentColor; transform: scaleX(1); transform-origin: right;
transition: transform .5s var(--ease-out);
}
.chb-w .ulink:hover::after{ transform: scaleX(0); }
.chb-w .ulink .arw{ transition: transform .45s var(--ease-out); }
.chb-w .ulink:hover .arw{ transform: translateX(5px); }
/* --------------------------------------------------------------- buttons */
.chb-w .btn{
--btn-fg: var(--ink); --btn-bg: var(--gold); --btn-bd: var(--gold);
position: relative; display: inline-flex; align-items: center; justify-content: center;
gap: .7em; min-height: 54px; padding: 0 clamp(22px, 2.6vw, 34px);
font: 600 var(--t-small)/1 var(--f-sans); letter-spacing: .13em; text-transform: uppercase;
color: var(--btn-fg); background: var(--btn-bg);
border: 1px solid var(--btn-bd); border-radius: var(--radius);
overflow: hidden; isolation: isolate; text-align: center;
transition: color .4s var(--ease), border-color .4s var(--ease), background-color .4s var(--ease);
}
.chb-w .btn::before{
content: ""; position: absolute; inset: 0; z-index: -1;
background: var(--gold-lt);
transform: scaleY(0); transform-origin: bottom;
transition: transform .45s var(--ease-out);
}
.chb-w .btn:hover::before{ transform: scaleY(1); }
.chb-w .btn--ghost{
--btn-fg: var(--white); --btn-bg: transparent; --btn-bd: rgba(255,255,255,.34);
}
.chb-w .btn--ghost::before{ background: var(--white); }
.chb-w .btn--ghost:hover{ --btn-fg: var(--ink); --btn-bd: var(--white); }
.chb-w .btn--ghost-dark{
--btn-fg: var(--on-light); --btn-bg: transparent; --btn-bd: rgba(18,18,22,.28);
}
.chb-w .btn--ghost-dark::before{ background: var(--ink); }
.chb-w .btn--ghost-dark:hover{ --btn-fg: var(--cream); --btn-bd: var(--ink); }
.chb-w .btn--block{ width: 100%; }
.chb-w .btn-row{ display: flex; flex-wrap: wrap; gap: 14px; }
/* --------------------------------------------------- image frame system */
/* Every photograph sits in a tall frame with an offset gold hairline —
the client's portrait-format photography becomes the signature. */
.chb-w .frame{
position: relative; display: block; overflow: hidden;
background: var(--ink-2); border-radius: var(--radius);
aspect-ratio: 3 / 4;
}
.chb-w .frame img{
width: 100%; height: 100%; object-fit: cover; object-position: center;
transform: scale(1.001);
transition: transform 1.15s var(--ease-out);
}
.chb-w .frame--wide{ aspect-ratio: 16 / 9; }
.chb-w .frame--tall{ aspect-ratio: 2 / 3; }
.chb-w .frame--square{ aspect-ratio: 1; }
.chb-w .framed{ position: relative; }
.chb-w .framed::after{
content: ""; position: absolute; z-index: 0; pointer-events: none;
inset: clamp(10px, 1.6vw, 22px) calc(-1 * clamp(10px, 1.6vw, 22px))
calc(-1 * clamp(10px, 1.6vw, 22px)) clamp(10px, 1.6vw, 22px);
border: 1px solid var(--gold); opacity: .42;
}
.chb-w .framed > *{ position: relative; z-index: 1; }
.chb-w .zoomable:hover img, .chb-w a:hover > .frame img{ transform: scale(1.045); }
.chb-w .caption{
margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px 14px;
align-items: baseline;
font: 500 var(--t-small)/1.4 var(--f-sans); color: var(--fg-faint);
letter-spacing: .04em;
}
.chb-w .chapter--light .caption{ color: var(--on-light-faint); }
.chb-w .caption b{ font-weight: 600; color: var(--fg); letter-spacing: .02em; }
.chb-w .chapter--light .caption b{ color: var(--on-light); }
/* ---------------------------------------------------------------- header */
.chb-w .header{
position: fixed; inset-inline: 0; top: 0; z-index: var(--z-header);
transition: background-color .5s var(--ease), border-color .5s var(--ease),
transform .5s var(--ease), backdrop-filter .5s var(--ease);
border-bottom: 1px solid transparent;
}
.chb-w .header__in{
width: min(100% - var(--gutter) * 2, var(--wide));
margin-inline: auto;
display: flex; align-items: center; justify-content: space-between;
gap: clamp(16px, 3vw, 44px);
height: clamp(74px, 8.4vh, 98px);
transition: height .5s var(--ease);
}
.chb-w .header.is-stuck{
background: rgba(7,7,8,.86);
-webkit-backdrop-filter: saturate(140%) blur(14px);
backdrop-filter: saturate(140%) blur(14px);
border-bottom-color: var(--fg-line-2);
}
.chb-w .header.is-stuck .header__in{ height: clamp(64px, 7vh, 76px); }
.chb-w .header.is-hidden{ transform: translateY(-102%); }
.chb-w .brand{ display: inline-flex; align-items: center; gap: clamp(10px, 1.2vw, 15px); }
.chb-w .brand__mark{ width: clamp(38px, 3.6vw, 50px); height: auto; }
.chb-w .brand__type{ display: grid; gap: 4px; }
.chb-w .brand__word{ width: clamp(104px, 10vw, 138px); height: auto; }
.chb-w .brand__strap{ width: clamp(76px, 7.2vw, 100px); height: auto; opacity: .95; }
.chb-w .brand__type img{ transition: opacity .4s var(--ease); }
/* light-ground pages swap the wordmark to the dark cut */
.chb-w .brand [data-word-dark]{ display: none; }
html.brand-dark .chb-w .brand [data-word-light]{ display: none; }
html.brand-dark .chb-w .brand [data-word-dark]{ display: block; }
.chb-w .nav{ display: none; }
@media (min-width: 1024px) {
.chb-w .nav{ display: flex; align-items: center; gap: clamp(20px, 2.4vw, 38px); }
}
.chb-w .nav a{
position: relative; padding-block: 10px;
font: 500 var(--t-small)/1 var(--f-sans);
letter-spacing: .16em; text-transform: uppercase;
color: rgba(255,255,255,.80);
transition: color .35s var(--ease);
}
.chb-w .nav a::after{
content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
background: var(--gold); transform: scaleX(0); transform-origin: left;
transition: transform .45s var(--ease-out);
}
.chb-w .nav a:hover, .chb-w .nav a[aria-current="page"]{ color: var(--white); }
.chb-w .nav a:hover::after, .chb-w .nav a[aria-current="page"]::after{ transform: scaleX(1); }
.chb-w .header__cta{ display: none; }
@media (min-width: 1024px) { .chb-w .header__cta{ display: inline-flex; } }
.chb-w .header .btn{ min-height: 46px; font-size: .78rem; }
/* burger */
.chb-w .burger{
display: inline-flex; flex-direction: column; justify-content: center; gap: 6px;
width: 46px; height: 46px; align-items: flex-end; margin-inline-end: -6px;
}
@media (min-width: 1024px) { .chb-w .burger{ display: none; } }
.chb-w .burger i{
display: block; height: 1px; width: 26px; background: var(--white);
transition: transform .45s var(--ease-out), width .45s var(--ease-out), opacity .3s;
}
.chb-w .burger i:last-child{ width: 17px; }
.chb-w .burger[aria-expanded="true"] i:first-child{ transform: translateY(3.5px) rotate(45deg); }
.chb-w .burger[aria-expanded="true"] i:last-child{ width: 26px; transform: translateY(-3.5px) rotate(-45deg); }
/* -------------------------------------------------------- mobile menu */
/* The overlay carries its own top bar and close control — it never relies on
the header's button peeking out from underneath. */
.chb-w .menu{
position: fixed; inset: 0; z-index: var(--z-menu);
background: var(--ink); color: var(--on-dark);
display: grid; grid-template-rows: auto 1fr auto;
transform: translateY(-100%); visibility: hidden;
transition: transform .7s var(--ease-out), visibility .7s;
overscroll-behavior: contain;
padding-bottom: env(safe-area-inset-bottom);
}
.chb-w .menu.is-open{ transform: none; visibility: visible; }
.chb-w .menu__bar{
width: min(100% - var(--gutter) * 2, var(--wide)); margin-inline: auto;
height: clamp(74px, 8.4vh, 98px);
display: flex; align-items: center; justify-content: space-between;
}
.chb-w .menu__body{
width: min(100% - var(--gutter) * 2, var(--wide)); margin-inline: auto;
display: flex; flex-direction: column; justify-content: center;
overflow-y: auto; padding-block: 20px;
}
.chb-w .menu__list{ display: grid; gap: clamp(6px, 1.4vh, 14px); }
.chb-w .menu__list a{
display: inline-block;
font-family: var(--f-display); font-size: clamp(2.1rem, 9vw, 3.4rem);
line-height: 1.16; letter-spacing: -.01em;
opacity: 0; transform: translateY(18px);
transition: opacity .55s var(--ease-out), transform .55s var(--ease-out), color .3s;
}
.chb-w .menu.is-open .menu__list a{ opacity: 1; transform: none; }
.chb-w .menu__list a:hover{ color: var(--gold); }
.chb-w .menu__list li:nth-child(1) a{ transition-delay: .14s; }
.chb-w .menu__list li:nth-child(2) a{ transition-delay: .20s; }
.chb-w .menu__list li:nth-child(3) a{ transition-delay: .26s; }
.chb-w .menu__list li:nth-child(4) a{ transition-delay: .32s; }
.chb-w .menu__list li:nth-child(5) a{ transition-delay: .38s; }
.chb-w .menu__foot{
width: min(100% - var(--gutter) * 2, var(--wide)); margin-inline: auto;
padding-block: clamp(20px, 4vh, 40px); display: grid; gap: 18px;
border-top: 1px solid var(--line-dark-2);
}
/* size rules target links inside the list only — never the CTA button */
.chb-w .menu__foot .btn{ font-size: .78rem; }
.chb-w .menu__meta{ display: grid; gap: 6px; font-size: var(--t-small); color: var(--on-dark-soft); }
.chb-w .menu__meta a:hover{ color: var(--gold); }
/* ---------------------------------------------------------------- footer */
.chb-w .footer{
position: relative; background: var(--black); color: var(--on-dark);
padding-block: clamp(64px, 8vw, 104px) 0;
}
.chb-w .footer__top{
display: grid; gap: clamp(38px, 5vw, 60px);
grid-template-columns: 1fr;
}
@media (min-width: 760px) { .chb-w .footer__top{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .chb-w .footer__top{ grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }
.chb-w .footer__brand{ display: grid; gap: 20px; align-content: start; }
/* The footer brand is a LINK in the plugin build (it points at the home page),
so it must stay clickable. It was `pointer-events: none` here because the
static page renders it as an inert , where the declaration did
nothing anyway — and once ported it silently killed the link. */
.chb-w .footer__tag{
font-family: var(--f-display); font-size: 1.12rem; letter-spacing: .04em;
color: var(--gold);
}
.chb-w .footer__col h4{
font: 600 var(--t-eyebrow)/1 var(--f-sans);
letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
color: var(--on-dark-faint); margin-bottom: 20px;
}
.chb-w .footer__col ul{ display: grid; gap: 11px; }
.chb-w .footer__col a, .chb-w .footer address a{
color: var(--on-dark-soft); font-size: var(--t-small);
transition: color .3s var(--ease);
}
.chb-w .footer__col a:hover, .chb-w .footer address a:hover{ color: var(--gold); }
.chb-w .footer address{ font-style: normal; display: grid; gap: 14px; font-size: var(--t-small); color: var(--on-dark-soft); }
.chb-w .footer__social{ display: flex; gap: 10px; margin-top: 4px; }
.chb-w .footer__social a{
width: 40px; height: 40px; display: grid; place-items: center;
border: 1px solid var(--line-dark); border-radius: 50%;
transition: border-color .35s var(--ease), color .35s var(--ease), background-color .35s var(--ease);
}
.chb-w .footer__social a:hover{ border-color: var(--gold); color: var(--ink); background: var(--gold); }
.chb-w .footer__social svg{ width: 16px; height: 16px; fill: currentColor; }
.chb-w .footer__bar{
margin-top: clamp(46px, 6vw, 74px); padding-block: 26px;
border-top: 1px solid var(--line-dark-2);
display: flex; flex-wrap: wrap; gap: 12px 26px;
align-items: center; justify-content: space-between;
font-size: .8rem; color: var(--on-dark-faint);
}
.chb-w .footer__legal{ display: flex; flex-wrap: wrap; gap: 8px 22px; }
.chb-w .footer__legal a:hover{ color: var(--gold); }
/* ----------------------------------------------------------------- forms */
.chb-w .field{ display: grid; gap: 9px; }
.chb-w .field > label, .chb-w .field-label{
font: 600 var(--t-eyebrow)/1 var(--f-sans);
letter-spacing: .17em; text-transform: uppercase; color: var(--fg-faint);
}
.chb-w .chapter--light .field > label, .chb-w .chapter--light .field-label{ color: var(--on-light-faint); }
.chb-w .field .req{ color: var(--fg-gold); }
.chb-w .input, .chb-w .select, .chb-w .textarea{
width: 100%; min-height: 54px; padding: 15px 2px;
background: transparent; color: inherit;
border: 0; border-bottom: 1px solid var(--fg-line);
border-radius: 0; font-size: var(--t-body);
transition: border-color .35s var(--ease);
appearance: none; -webkit-appearance: none;
}
.chb-w .chapter--light .input, .chb-w .chapter--light .select, .chb-w .chapter--light .textarea{
border-bottom-color: var(--line-light);
}
.chb-w .textarea{ min-height: 118px; resize: vertical; line-height: 1.6; }
.chb-w .input::placeholder, .chb-w .textarea::placeholder{ color: var(--fg-faint); }
.chb-w .chapter--light .input::placeholder, .chb-w .chapter--light .textarea::placeholder{ color: var(--on-light-faint); }
.chb-w .input:focus, .chb-w .select:focus, .chb-w .textarea:focus{ outline: none; border-bottom-color: var(--gold); }
.chb-w .select-wrap{ position: relative; }
.chb-w .select-wrap::after{
content: ""; position: absolute; right: 4px; top: 50%; width: 8px; height: 8px;
border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
transform: translateY(-70%) rotate(45deg); opacity: .5; pointer-events: none;
}
.chb-w .select option{ background: var(--ink); color: var(--white); }
.chb-w .chapter--light .select option{ background: var(--cream); color: var(--on-light); }
.chb-w .file-drop{
display: flex; align-items: center; gap: 14px; padding: 18px 20px;
border: 1px dashed var(--fg-line); border-radius: var(--radius);
color: var(--fg-soft); font-size: var(--t-small); cursor: pointer;
transition: border-color .3s var(--ease), color .3s var(--ease);
}
.chb-w .chapter--light .file-drop{ border-color: var(--line-light); color: var(--on-light-soft); }
.chb-w .file-drop:hover{ border-color: var(--gold); color: var(--fg-gold); }
.chb-w .file-drop input{ position: absolute; opacity: 0; width: 0; height: 0; }
.chb-w .form-grid{ display: grid; gap: clamp(20px, 2.4vw, 30px); }
@media (min-width: 640px) { .chb-w .form-cols-2{ grid-template-columns: 1fr 1fr; } }
.chb-w .span-2{ grid-column: 1 / -1; }
.chb-w .form-note{ font-size: .8rem; color: var(--fg-faint); }
.chb-w .chapter--light .form-note{ color: var(--on-light-faint); }
.chb-w .hp{ position: absolute !important; left: -9999px; opacity: 0; height: 0; width: 0; }
/* ------------------------------------------------------ cursor spotlight */
/* A restrained gold glow that follows the pointer across a card grid.
Pointer-driven only, so touch devices are unaffected. */
.chb-w .spot{ position: relative; isolation: isolate; overflow: hidden; }
@media (hover: hover) and (pointer: fine) {
.chb-w .spot::before{
content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
rgba(201,165,106,.16), transparent 70%);
transition: opacity .4s var(--ease);
}
.chb-w .spot:hover::before{ opacity: 1; }
}
/* --------------------------------------------------------- reveal system */
/* Content is fully visible without JS. The gate class is only added after a
successful init, so a failure can never leave the page blank. */
html.chb-motion .chb-w .reveal{ opacity: 0; transform: translateY(26px); }
html.chb-motion .chb-w .reveal.is-in{ opacity: 1; transform: none; }
html.chb-motion .chb-w .reveal{
transition: opacity var(--dur-slow) var(--ease-out),
transform var(--dur-slow) var(--ease-out),
clip-path var(--dur-slow) var(--ease-out);
}
/* The wipe is applied to the CHILDREN, never to the observed element itself:
a clip-path on the target collapses its intersection rect, so
IntersectionObserver would never fire and the reveal would never run. */
html.chb-motion .chb-w .reveal--mask{ opacity: 1; transform: none; }
html.chb-motion .chb-w .reveal--mask > *{
clip-path: inset(100% 0 0 0);
transition: clip-path var(--dur-slow) var(--ease-out);
}
html.chb-motion .chb-w .reveal--mask.is-in > *{ clip-path: inset(0 0 0 0); }
html.chb-motion .chb-w .reveal--rise{ transform: translateY(46px); }
html.chb-motion .chb-w .reveal--fade{ transform: none; }
html.chb-motion .chb-w .reveal[data-d="1"]{ transition-delay: .09s; }
html.chb-motion .chb-w .reveal[data-d="2"]{ transition-delay: .18s; }
html.chb-motion .chb-w .reveal[data-d="3"]{ transition-delay: .27s; }
html.chb-motion .chb-w .reveal[data-d="4"]{ transition-delay: .36s; }
html.chb-motion .chb-w .reveal[data-d="5"]{ transition-delay: .45s; }
/* line-by-line display reveal */
.chb-w .lines .ln{ display: block; }
html.chb-motion .chb-w .lines .ln{ overflow: hidden; }
html.chb-motion .chb-w .lines .ln > span{
display: block; transform: translateY(102%);
transition: transform 1s var(--ease-out);
}
html.chb-motion .chb-w .lines.is-in .ln > span{ transform: none; }
html.chb-motion .chb-w .lines.is-in .ln:nth-child(2) > span{ transition-delay: .09s; }
html.chb-motion .chb-w .lines.is-in .ln:nth-child(3) > span{ transition-delay: .18s; }
html.chb-motion .chb-w .lines.is-in .ln:nth-child(4) > span{ transition-delay: .27s; }
@media (prefers-reduced-motion: reduce) {
.chb-w :where(html){ scroll-behavior: auto; }
html.chb-motion .chb-w .reveal, html.chb-motion .chb-w .reveal--mask, html.chb-motion .chb-w .reveal--mask > *{ opacity: 1 !important; transform: none !important; clip-path: none !important; }
html.chb-motion .chb-w .lines .ln > span{ transform: none !important; }
}
/* ------------------------------------------------------------- QA mode */
/* ?qa=1 flattens the page for trustworthy screenshots: tones paint per
section, sticky/pin is released, reveals are resolved. */
html.chb-qa{ scroll-behavior: auto !important; }
html.chb-qa .chb-bg-field{ display: none; }
html.chb-qa .chb-spine{ display: none; }
html.chb-qa .chb-w .reveal, html.chb-qa .chb-w .reveal--mask, html.chb-qa .chb-w .reveal--mask > *{ opacity: 1 !important; transform: none !important; clip-path: none !important; }
html.chb-qa .chb-w .lines .ln > span{ transform: none !important; }
html.chb-qa .chb-w [data-tone="ink"], html.chb-qa .chb-w [data-tone="black"]{ background: var(--ink); }
html.chb-qa .chb-w [data-tone="cream"]{ background: var(--cream); }
html.chb-qa .chb-w [data-tone="cream-2"]{ background: var(--cream-2); }
html.chb-qa .chb-w .header{ position: absolute; }
html.chb-qa .chb-w .sticky-media, html.chb-qa .chb-w .is-sticky, html.chb-qa .chb-w .faq__head{ position: static !important; }
/* vh-driven heights are pinned so a tall capture window cannot inflate them */
html.chb-qa .chb-w .hero{ min-height: 780px !important; padding-block: 150px 90px !important; }
html.chb-qa .chb-w .closer{ min-height: 620px !important; }
html.chb-qa .chb-w .page-hero{ min-height: 520px !important; }
html.chb-qa .chb-w .scroll-cue{ display: none !important; }
/* ------------------------------------------------- experience + finance */
/* Shared: the homepage and the About page both use this block. */
.chb-w .stats__grid{
display: grid; gap: 1px; background: var(--fg-line);
border-block: 1px solid var(--fg-line);
grid-template-columns: 1fr 1fr;
}
@media (min-width: 900px) { .chb-w .stats__grid{ grid-template-columns: repeat(4, 1fr); } }
.chb-w .stats__grid li{
background: var(--panel); padding: clamp(28px, 3.4vw, 50px) clamp(18px, 2vw, 30px);
display: grid; gap: 10px; align-content: start;
}
.chb-w .stats__grid b{
font-family: var(--f-display); font-weight: 400;
font-size: clamp(2.2rem, 5vw, 3.9rem); line-height: 1; color: var(--fg-gold);
letter-spacing: -.015em;
}
.chb-w .stats__grid span{
font: 600 var(--t-eyebrow)/1.5 var(--f-sans); letter-spacing: .2em;
text-transform: uppercase; color: var(--fg-soft);
}
.chb-w .stats__note{
margin-top: clamp(38px, 4.6vw, 64px); display: grid; gap: 14px;
max-width: 62ch;
}
.chb-w .stats__note h3{ font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.chb-w .stats__note p{ color: var(--fg-soft); }
.chb-w .finance{
margin-top: clamp(40px, 5vw, 68px); padding: clamp(26px, 3.2vw, 44px);
border: 1px solid var(--fg-line); border-radius: var(--radius-lg);
display: grid; gap: clamp(20px, 3vw, 44px); align-items: center;
grid-template-columns: 1fr;
background: linear-gradient(180deg, rgba(255,255,255,.03), transparent);
}
@media (min-width: 860px) { .chb-w .finance{ grid-template-columns: 1fr auto; } }
.chb-w .finance h3{ margin-block: 12px 12px; font-size: clamp(1.4rem, 2.3vw, 1.95rem); }
.chb-w .finance h3 em{ font-style: italic; }
.chb-w .finance p{ color: var(--fg-soft); max-width: 74ch; font-size: var(--t-small); }
/* ------------------------------------------------------------ ACCORDION */
/* Lives here, not in home.css, because two pages use it now: the homepage
FAQ chapter and the dedicated FAQ page. home.css is only loaded by the
homepage, so while this sat there the FAQ page rendered raw
elements — native disclosure triangles, no rules, no gold plus-sign. */
.chb-w .qa{ border-top: 1px solid var(--fg-line); }
.chb-w .qa:last-child{ border-bottom: 1px solid var(--fg-line); }
.chb-w .qa summary{
list-style: none; cursor: pointer; padding-block: clamp(18px, 2.1vw, 26px);
display: flex; align-items: center; justify-content: space-between; gap: 20px;
font-family: var(--f-display); font-size: clamp(1.05rem, 1.6vw, 1.32rem);
line-height: 1.4; color: var(--fg);
transition: color .3s var(--ease);
}
.chb-w .qa summary::-webkit-details-marker{ display: none; }
.chb-w .qa summary:hover{ color: var(--fg-gold); }
.chb-w .qa summary i{
position: relative; flex: none; width: 14px; height: 14px;
}
.chb-w .qa summary i::before, .chb-w .qa summary i::after{
content: ""; position: absolute; inset: 50% 0 auto 0; height: 1px;
background: var(--fg-gold); transform: translateY(-50%);
transition: transform .45s var(--ease-out), opacity .3s;
}
.chb-w .qa summary i::after{ transform: translateY(-50%) rotate(90deg); }
.chb-w .qa[open] summary i::after{ transform: translateY(-50%) rotate(0deg); opacity: 0; }
.chb-w .qa__body{ overflow: hidden; }
.chb-w .qa__body p{
padding-block: 0 clamp(18px, 2.1vw, 26px);
color: var(--fg-soft); max-width: 68ch; font-size: var(--t-small);
}
/* ===== home.css ===== */
/* =========================================================================
CAPITAL HOME BUILDERS — homepage chapters
========================================================================= */
/* ------------------------------------------------------------------ HERO */
.chb-w .hero{
position: relative;
min-height: 100vh;
min-height: 100lvh;
display: flex; flex-direction: column; justify-content: center;
padding-block: clamp(112px, 14vh, 168px) clamp(72px, 9vh, 112px);
color: var(--on-dark);
overflow: hidden;
}
.chb-w .hero__ground{ position: absolute; inset: 0; z-index: -1; }
.chb-w .hero__ground img{
width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%;
opacity: .40; filter: saturate(.72) contrast(1.05);
}
.chb-w .hero__ground::after{
content: ""; position: absolute; inset: 0;
background:
linear-gradient(to right, rgba(6,6,7,.95) 0%, rgba(6,6,7,.74) 48%, rgba(6,6,7,.40) 100%),
radial-gradient(120% 90% at 18% 42%, rgba(6,6,7,.42), rgba(6,6,7,.90) 80%);
}
.chb-w .hero__in{
display: grid; gap: clamp(38px, 5vw, 72px);
grid-template-columns: 1fr;
align-items: center;
}
@media (min-width: 1024px) {
.chb-w .hero__in{ grid-template-columns: minmax(0, 1.32fr) minmax(0, .68fr); gap: clamp(44px, 5vw, 82px); }
}
.chb-w .hero__text{ display: grid; gap: clamp(18px, 2.1vw, 28px); justify-items: start; }
.chb-w .hero__title{
/* sized against the viewport height too, so the hero always fits one screen */
font-size: clamp(2.6rem, min(5.8vw, 9.4vh), 5.6rem);
line-height: 1.04; letter-spacing: -.018em; max-width: 16ch;
}
.chb-w .hero__title em{ font-style: italic; }
.chb-w .hero__lead{
font-size: clamp(.94rem, 1.05vw, 1.06rem); line-height: 1.62;
color: var(--fg-soft); max-width: 52ch;
}
.chb-w .hero__meta{
display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
font: 500 var(--t-small)/1 var(--f-sans); letter-spacing: .05em;
color: var(--fg-faint);
}
.chb-w .hero__meta i{ width: 4px; height: 4px; border-radius: 50%; background: var(--gold); opacity: .8; }
/* the framed portrait plate — the client's 3:4 photography, uncropped */
.chb-w .hero__plate{ position: relative; margin: 0; }
@media (max-width: 1023px) { .chb-w .hero__plate{ max-width: 420px; } }
.chb-w .hero__plate-frame{
position: absolute; inset: 30px -30px -30px 30px;
border: 1px solid var(--gold); opacity: .62; pointer-events: none;
}
.chb-w .hero__plate img{
position: relative; z-index: 1;
width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
border-radius: var(--radius);
}
.chb-w .hero__plate figcaption{
position: relative; z-index: 2; margin-top: 18px;
display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline;
font: 500 var(--t-small)/1.4 var(--f-sans); color: var(--fg-faint);
}
.chb-w .hero__plate figcaption b{ font-weight: 600; color: var(--fg); }
.chb-w .scroll-cue{
position: absolute; left: 50%; bottom: clamp(20px, 3.5vh, 40px);
transform: translateX(-50%);
display: none; flex-direction: column; align-items: center; gap: 12px;
font: 500 var(--t-sheet)/1 var(--f-sans); letter-spacing: var(--ls-sheet);
text-transform: uppercase; color: var(--on-dark-faint);
}
@media (min-width: 1024px) { .chb-w .scroll-cue{ display: flex; } }
.chb-w .scroll-cue i{
display: block; width: 1px; height: 54px; background: currentColor; opacity: .4;
position: relative; overflow: hidden;
}
.chb-w .scroll-cue i::after{
content: ""; position: absolute; inset-inline: 0; height: 18px; background: var(--gold);
animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue { 0% { top: -20px; } 100% { top: 60px; } }
@media (prefers-reduced-motion: reduce) { .chb-w .scroll-cue i::after{ animation: none; top: 0; } }
/* ------------------------------------------------------------- TRUST BAR */
.chb-w .trust{ position: relative; padding-block: clamp(26px, 3.4vw, 40px); color: var(--on-dark); }
.chb-w .trust::before, .chb-w .trust::after{
content: ""; position: absolute; inset-inline: 0; height: 1px;
background: linear-gradient(to right, transparent, var(--line-dark), transparent);
}
.chb-w .trust::before{ top: 0; } .chb-w .trust::after{ bottom: 0; }
.chb-w .trust__list{
display: flex; flex-wrap: wrap; justify-content: center;
gap: 14px clamp(24px, 4vw, 64px);
font: 600 var(--t-eyebrow)/1 var(--f-sans);
letter-spacing: .22em; text-transform: uppercase; color: var(--fg-soft);
text-align: center;
}
.chb-w .trust__list li{ display: inline-flex; align-items: center; gap: clamp(24px, 4vw, 64px); }
.chb-w .trust__list li:not(:last-child)::after{
content: ""; width: 14px; height: 6px; flex: none;
background: currentColor; color: var(--gold);
clip-path: polygon(0 100%, 50% 0, 100% 100%, 50% 42%);
}
/* ----------------------------------------------------------- WHO WE ARE */
.chb-w .who__in{
display: grid; gap: clamp(38px, 5vw, 80px); align-items: center;
grid-template-columns: 1fr;
}
@media (min-width: 900px) { .chb-w .who__in{ grid-template-columns: minmax(0,.82fr) minmax(0,1fr); } }
.chb-w .who__media{ position: relative; }
@media (max-width: 899px) { .chb-w .who__media{ max-width: 440px; } }
.chb-w .who__text{ display: grid; gap: clamp(18px, 2.2vw, 28px); justify-items: start; }
.chb-w .who__text h2{ max-width: 14ch; }
.chb-w .who__text h2 em{ font-style: italic; }
.chb-w .who__pull{
font-family: var(--f-display); font-size: clamp(1.25rem, 2vw, 1.72rem);
line-height: 1.34; color: var(--fg);
padding-inline-start: clamp(18px, 2vw, 26px);
border-inline-start: 1px solid var(--gold);
}
/* ------------------------------------------------------- BEFORE & AFTER */
.chb-w .ba__tabs{ display: flex; flex-wrap: wrap; gap: 10px; margin-block: clamp(28px, 3.4vw, 44px) clamp(20px, 2.4vw, 30px); }
.chb-w .chip{
display: inline-flex; align-items: center; justify-content: center;
width: auto; min-height: 42px; padding: 0 20px;
background: transparent !important; border: 1px solid var(--fg-line) !important;
border-radius: 999px !important; box-shadow: none !important;
font: 600 var(--t-eyebrow)/1 var(--f-sans); letter-spacing: .16em; text-transform: uppercase;
color: var(--fg-soft) !important;
transition: color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.chb-w .chip:hover{ color: var(--fg) !important; border-color: var(--gold) !important; }
.chb-w .chip.is-active{
color: var(--ink) !important; background: var(--gold) !important; border-color: var(--gold) !important;
}
.chb-w .chapter--dark .chip{ border-color: var(--line-dark) !important; color: var(--on-dark-soft) !important; }
.chb-w .chapter--dark .chip:hover{ color: var(--on-dark) !important; }
.chb-w .chapter--dark .chip.is-active{ color: var(--ink) !important; background: var(--gold) !important; }
.chb-w .ba__stage{ position: relative; }
.chb-w .ba-slider{
position: relative; width: 100%; aspect-ratio: 16 / 9;
overflow: hidden; border-radius: var(--radius);
background: var(--ink-2); user-select: none; touch-action: pan-y;
display: none;
}
.chb-w .ba-slider.is-active{ display: block; }
@media (max-width: 640px) { .chb-w .ba-slider{ aspect-ratio: 4 / 3; } }
.chb-w .ba-slider__after, .chb-w .ba-slider__before{ position: absolute; inset: 0; }
.chb-w .ba-slider__after img, .chb-w .ba-slider__before img{ width: 100%; height: 100%; object-fit: cover; }
.chb-w .ba-slider__before{ clip-path: inset(0 calc(100% - var(--x, 50%)) 0 0); }
.chb-w .ba-plate{
/* the label hugs the left edge so the handle never cuts it in half */
position: absolute; inset: 0; display: grid; place-content: center start; justify-items: start;
gap: 12px; padding: 20px clamp(20px, 4vw, 46px); text-align: start; color: var(--on-dark-soft);
background:
linear-gradient(rgba(10,10,11,.92), rgba(10,10,11,.92)),
repeating-linear-gradient(0deg, rgba(201,165,106,.16) 0 1px, transparent 1px 44px),
repeating-linear-gradient(90deg, rgba(201,165,106,.16) 0 1px, transparent 1px 44px);
background-color: var(--ink);
}
.chb-w .ba-plate__mark{ width: 62px; height: 22px; color: var(--fg-gold); opacity: .8; }
.chb-w .ba-plate__mark path{ fill: none; stroke: currentColor; stroke-width: 2; }
.chb-w .ba-plate p{ font-family: var(--f-display); font-size: clamp(1.02rem, 1.8vw, 1.35rem); color: var(--on-dark); line-height: 1.3; }
.chb-w .ba-plate small{ font-size: .72rem; max-width: 26ch; color: var(--on-dark-faint); line-height: 1.55; }
/* at narrow widths the handle sits at 50% of a small stage — the small print
would be sliced in half, so keep only the headline */
@media (max-width: 700px) { .chb-w .ba-plate small{ display: none; } }
.chb-w .ba-tag{
position: absolute; top: 16px; z-index: 3;
font: 600 var(--t-sheet)/1 var(--f-sans); letter-spacing: var(--ls-sheet); text-transform: uppercase;
padding: 8px 12px; background: rgba(8,8,9,.7); color: var(--white);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.chb-w .ba-tag--before{ left: 16px; }
.chb-w .ba-tag--after{ right: 16px; }
.chb-w .ba-handle{
position: absolute; top: 0; bottom: 0; left: var(--x, 50%); z-index: 4;
width: 56px; transform: translateX(-50%); cursor: ew-resize;
display: grid; place-items: center; background: none;
}
.chb-w .ba-handle::before{
content: ""; position: absolute; top: 0; bottom: 0; width: 1px;
background: rgba(255,255,255,.85); box-shadow: 0 0 12px rgba(0,0,0,.4);
}
.chb-w .ba-handle__grip{
position: relative; width: 52px; height: 52px; border-radius: 50%;
background: var(--gold); display: grid; place-items: center; gap: 0;
grid-auto-flow: column; box-shadow: 0 8px 26px rgba(0,0,0,.35);
transition: transform .35s var(--ease-out);
}
.chb-w .ba-handle:hover .ba-handle__grip{ transform: scale(1.07); }
.chb-w .ba-handle__grip i{
width: 7px; height: 7px; border-top: 1.5px solid var(--ink); border-right: 1.5px solid var(--ink);
}
.chb-w .ba-handle__grip i:first-child{ transform: rotate(-135deg); margin-inline-end: 3px; }
.chb-w .ba-handle__grip i:last-child{ transform: rotate(45deg); margin-inline-start: 3px; }
.chb-w .ba__hint{
margin-top: 16px; font: 500 var(--t-sheet)/1.5 var(--f-sans);
letter-spacing: .16em; text-transform: uppercase; color: var(--fg-faint);
}
/* --------------------------------------------------------- WHAT WE DO */
.chb-w .services__grid{ display: grid; gap: clamp(32px, 4vw, 68px); margin-top: clamp(44px, 5vw, 74px); }
@media (min-width: 980px) {
/* stretch, not start: with `align-items:start` the media column collapses to
the height of the sticky panel, so the panel stops travelling a third of
the way down the list and the column is empty for the rest of it. */
.chb-w .services__grid{ grid-template-columns: minmax(0,.62fr) minmax(0,1fr); align-items: stretch; }
}
.chb-w .services__media{ display: none; }
@media (min-width: 980px) { .chb-w .services__media{ display: block; height: 100%; } }
.chb-w .services__sticky{ position: sticky; top: clamp(110px, 15vh, 160px); }
.chb-w .services__sticky .frame{ background: var(--ink-2); }
.chb-w .services__sticky img{
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
opacity: 0; transform: scale(1.06);
transition: opacity .8s var(--ease-out), transform 1.3s var(--ease-out);
}
.chb-w .services__sticky img.is-active{ opacity: 1; transform: none; }
.chb-w .services__list{ display: grid; }
.chb-w .svc{
position: relative; display: grid; gap: clamp(12px, 1.6vw, 18px);
grid-template-columns: auto 1fr;
padding-block: clamp(26px, 3vw, 38px);
border-top: 1px solid var(--fg-line);
transition: border-color .4s var(--ease);
}
.chb-w .svc:last-child{ border-bottom: 1px solid var(--fg-line); }
.chb-w .svc__no{
font: 500 var(--t-sheet)/1.9 var(--f-sans); letter-spacing: var(--ls-sheet);
color: var(--fg-gold); opacity: .75; transition: opacity .4s var(--ease);
}
.chb-w .svc__body{ display: grid; gap: 12px; justify-items: start; }
.chb-w .svc h3{ transition: color .4s var(--ease); }
.chb-w .svc p{ color: var(--fg-soft); max-width: 60ch; }
.chb-w .svc.is-active .svc__no{ opacity: 1; }
.chb-w .svc.is-active h3{ color: var(--fg-gold); }
/* inline thumbnail — the mobile/tablet path, hidden where the sticky panel runs */
.chb-w .svc__thumb{ grid-column: 1 / -1; margin-top: 6px; max-width: 320px; }
@media (min-width: 980px) { .chb-w .svc__thumb{ display: none; } }
/* ------------------------------------------------------- CONSULTATION */
.chb-w .consult__in{
display: grid; gap: clamp(38px, 5vw, 80px); align-items: start;
grid-template-columns: 1fr;
}
@media (min-width: 960px) { .chb-w .consult__in{ grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); } }
.chb-w .consult__text{ display: grid; gap: clamp(18px, 2.2vw, 28px); justify-items: start; }
.chb-w .consult__text h2 em{ font-style: italic; }
.chb-w .consult__points{ display: grid; gap: 12px; }
.chb-w .consult__points li{
position: relative; padding-inline-start: 26px; color: var(--fg-soft); font-size: var(--t-small);
}
.chb-w .consult__points li::before{
content: ""; position: absolute; inset-inline-start: 0; top: .62em;
width: 12px; height: 6px; background: var(--gold);
clip-path: polygon(0 100%, 50% 0, 100% 100%, 50% 45%);
}
.chb-w .consult__direct{ font-size: var(--t-small); color: var(--fg-faint); }
.chb-w .consult__direct a{ color: var(--fg-gold); border-bottom: 1px solid currentColor; }
.chb-w .consult__form{
padding: clamp(24px, 3.4vw, 42px);
border: 1px solid var(--fg-line);
background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
border-radius: var(--radius-lg);
}
/* ------------------------------------------------- THE CAPITAL DIFFERENCE */
.chb-w .diff__head{
display: grid; gap: clamp(24px, 3vw, 48px);
grid-template-columns: 1fr; align-items: end;
margin-bottom: clamp(40px, 5vw, 68px);
}
@media (min-width: 900px) { .chb-w .diff__head{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
.chb-w .diff__head h2 em{ font-style: italic; }
.chb-w .diff__intro b{ font-weight: 600; color: var(--fg); }
.chb-w .diff__grid{ display: grid; gap: 1px; background: var(--fg-line); border: 1px solid var(--fg-line); }
@media (min-width: 700px) { .chb-w .diff__grid{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .chb-w .diff__grid{ grid-template-columns: repeat(3, 1fr); } }
.chb-w .diff__card{
position: relative; display: grid; gap: 12px; align-content: start;
padding: clamp(26px, 2.8vw, 40px);
background: var(--panel);
isolation: isolate; overflow: hidden;
}
.chb-w .diff__no{
font: 500 var(--t-sheet)/1 var(--f-sans); letter-spacing: var(--ls-sheet);
color: var(--fg-gold); opacity: .6;
}
.chb-w .diff__card h3{ font-size: clamp(1.2rem, 1.7vw, 1.5rem); }
.chb-w .diff__card > p:last-child{ color: var(--fg-soft); font-size: var(--t-small); line-height: 1.68; }
.chb-w .diff__card .eyebrow{ font-size: .64rem; }
.chb-w .diff__card .eyebrow::before{ display: none; }
/* ------------------------------------------------------- VISUALIZATION */
.chb-w .viz__in{
display: grid; gap: clamp(36px, 4.6vw, 72px); align-items: center;
grid-template-columns: 1fr;
}
@media (min-width: 960px) { .chb-w .viz__in{ grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); } }
.chb-w .viz__text{ display: grid; gap: clamp(18px, 2.2vw, 28px); justify-items: start; }
.chb-w .viz__text h2 em{ font-style: italic; }
.chb-w .viz__split{ display: grid; gap: clamp(14px, 1.8vw, 24px); grid-template-columns: 1fr 1fr; }
.chb-w .viz__pane{ margin: 0; }
.chb-w .viz__pane .frame{ aspect-ratio: 3 / 4; }
.chb-w .viz__pane figcaption{ margin-top: 12px; }
.chb-w .viz__wash{
position: absolute; inset: 0; z-index: 1;
background:
linear-gradient(180deg, rgba(120,140,168,.30), rgba(18,22,30,.46)),
linear-gradient(180deg, rgba(201,165,106,.12), transparent 60%);
}
.chb-w .viz__pane:first-child .frame img{ filter: saturate(.42) contrast(.92) brightness(1.04); }
.chb-w .viz__pane:first-child .frame::after{
content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
background:
repeating-linear-gradient(0deg, rgba(255,255,255,.22) 0 1px, transparent 1px 34px),
repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 1px, transparent 1px 34px);
opacity: .62;
}
.chb-w .viz__pane figcaption .sheet-no{
display: inline-flex; align-items: center; gap: 9px;
}
.chb-w .viz__pane figcaption .sheet-no::before{
content: ""; width: 20px; height: 1px; background: currentColor; opacity: .8;
}
/* ---------------------------------------------------- FEATURED PROJECT */
.chb-w .feature__head{
display: grid; gap: clamp(22px, 3vw, 48px); align-items: end;
grid-template-columns: 1fr; margin-bottom: clamp(34px, 4vw, 56px);
}
@media (min-width: 900px) { .chb-w .feature__head{ grid-template-columns: minmax(0,1fr) minmax(0,.9fr); } }
.chb-w .feature__head h2 em{ font-style: italic; }
.chb-w .feature__loc{
font: 500 var(--t-sheet)/1 var(--f-sans); letter-spacing: var(--ls-sheet);
text-transform: uppercase; color: var(--fg-faint);
}
.chb-w .feature__copy{ display: grid; gap: 18px; justify-items: start; }
.chb-w .feature__gallery{ display: grid; gap: clamp(14px, 1.6vw, 22px); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .chb-w .feature__gallery{ grid-template-columns: repeat(4, 1fr); } }
.chb-w .feature__hero{ grid-column: 1 / -1; margin: 0; }
.chb-w .feature__gallery figure{ margin: 0; }
/* --------------------------------------------------------- OUR PROJECTS */
.chb-w .work__head{
display: grid; gap: clamp(20px, 2.6vw, 40px); align-items: end;
grid-template-columns: 1fr; margin-bottom: clamp(34px, 4vw, 58px);
}
@media (min-width: 900px) { .chb-w .work__head{ grid-template-columns: minmax(0,1fr) minmax(0,.86fr); } }
.chb-w .work__head h2 em{ font-style: italic; }
.chb-w .work__grid{ display: grid; gap: clamp(18px, 2.2vw, 30px); grid-template-columns: 1fr; }
@media (min-width: 700px) { .chb-w .work__grid{ grid-template-columns: 1fr 1fr; } }
.chb-w .work__item a{ display: block; }
.chb-w .work__item--lead{ grid-column: 1 / -1; }
.chb-w .work__meta{
position: relative; z-index: 2;
margin-top: 16px; display: grid; gap: 5px;
grid-template-areas: "t a" "s a"; grid-template-columns: 1fr auto; align-items: center;
}
.chb-w .work__meta b{
grid-area: t; font-family: var(--f-display); font-weight: 400;
font-size: clamp(1.12rem, 1.7vw, 1.45rem); letter-spacing: -.005em;
}
.chb-w .work__meta em{
grid-area: s; font-style: normal; font-size: var(--t-small); color: var(--fg-faint);
letter-spacing: .04em;
}
.chb-w .work__meta .arw{
grid-area: a; color: var(--fg-gold); font-style: normal; font-size: 1.2rem;
transition: transform .45s var(--ease-out);
}
.chb-w .work__item a:hover .arw{ transform: translateX(7px); }
.chb-w .work__foot{ margin-top: clamp(34px, 4vw, 56px); display: flex; justify-content: center; }
/* ------------------------------------------------------------- PROCESS */
.chb-w .steps{
margin-top: clamp(40px, 5vw, 70px);
display: grid; gap: 0;
counter-reset: step;
}
.chb-w .step{
display: grid; gap: clamp(14px, 2vw, 34px); align-items: start;
grid-template-columns: auto 1fr;
padding-block: clamp(26px, 3vw, 40px);
border-top: 1px solid var(--fg-line);
}
.chb-w .step:last-child{ border-bottom: 1px solid var(--fg-line); }
@media (min-width: 760px) { .chb-w .step{ grid-template-columns: minmax(90px, 12%) 1fr; } }
.chb-w .step__no{
font-family: var(--f-display); font-size: clamp(1.7rem, 3.4vw, 2.9rem);
line-height: 1; color: var(--fg-gold); opacity: .5;
}
.chb-w .step h3{ margin-bottom: 10px; }
.chb-w .step p{ color: var(--fg-soft); max-width: 66ch; }
/* ---------------------------------------------------------------- DEAN */
.chb-w .dean__in{
display: grid; gap: clamp(38px, 5vw, 80px); align-items: center;
grid-template-columns: 1fr;
}
@media (min-width: 900px) { .chb-w .dean__in{ grid-template-columns: minmax(0,1fr) minmax(0,.78fr); } }
.chb-w .dean__text{ display: grid; gap: clamp(18px, 2.2vw, 28px); justify-items: start; }
.chb-w .dean__text h2 em{ font-style: italic; }
.chb-w .dean__quote{
margin: 0; padding-inline-start: clamp(18px, 2vw, 26px);
border-inline-start: 1px solid var(--gold);
font-family: var(--f-display); font-size: clamp(1.18rem, 1.9vw, 1.6rem);
line-height: 1.42; color: var(--fg);
}
.chb-w .dean__media{ margin: 0; }
@media (max-width: 899px) { .chb-w .dean__media{ max-width: 430px; } }
/* ----------------------------------------------------------------- FAQ */
.chb-w .faq__in{
display: grid; gap: clamp(32px, 4vw, 72px); align-items: start;
grid-template-columns: 1fr;
}
@media (min-width: 900px) { .chb-w .faq__in{ grid-template-columns: minmax(0,.72fr) minmax(0,1fr); } }
.chb-w .faq__head{ display: grid; gap: clamp(18px, 2vw, 26px); justify-items: start; }
@media (min-width: 900px) { .chb-w .faq__head{ position: sticky; top: clamp(110px, 15vh, 160px); } }
.chb-w .faq__head h2 em{ font-style: italic; }
.chb-w .faq__list{ display: grid; }
/* ------------------------------------------------------------- CLOSER */
.chb-w .closer{
position: relative; overflow: hidden;
min-height: clamp(560px, 86vh, 860px);
display: grid; align-items: center;
padding-block: clamp(90px, 12vh, 150px);
color: var(--on-dark);
}
.chb-w .closer__ground{ position: absolute; inset: -8% 0; z-index: -1; }
.chb-w .closer__ground img{ width: 100%; height: 100%; object-fit: cover; opacity: .62; filter: saturate(.78) contrast(1.04); }
.chb-w .closer__ground::after{
content: ""; position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(6,6,7,.86) 0%, rgba(6,6,7,.50) 42%, rgba(6,6,7,.90) 100%),
radial-gradient(78% 70% at 50% 52%, rgba(6,6,7,.10), rgba(6,6,7,.72));
}
.chb-w .closer__in{ display: grid; gap: clamp(20px, 2.6vw, 32px); justify-items: center; text-align: center; }
.chb-w .closer__title{ font-size: var(--t-h1); }
.chb-w .closer__title em{ font-style: italic; }
.chb-w .closer .lead{ text-align: center; margin-inline: auto; max-width: 58ch; }
.chb-w .closer .btn-row{ justify-content: center; }
/* ------------------------------------------------- BLUEPRINT BUILD ------ */
/* A structure that draws itself as the process is read: ground line, walls,
the roofline from the logo, the tower, the door, then the window aperture.
Nothing here depends on the animation — with no JS every stroke is already
at full length, so the finished drawing simply sits there. */
.chb-w .process__in{
display: grid; gap: clamp(30px, 4vw, 68px); align-items: start;
grid-template-columns: 1fr;
}
@media (min-width: 980px) {
.chb-w .process__in{ grid-template-columns: minmax(0,.72fr) minmax(0,1fr); align-items: stretch; }
}
.chb-w .process__media{ display: none; }
@media (min-width: 980px) { .chb-w .process__media{ display: block; height: 100%; } }
.chb-w .bp{ position: sticky; top: clamp(110px, 16vh, 170px); display: grid; gap: 18px; }
.chb-w .bp__draw{ width: 100%; height: auto; color: var(--fg-gold); overflow: visible; }
.chb-w .chapter--dark .bp__draw{ color: var(--gold); }
/* the ground the structure stands on */
.chb-w .bp__plot{
position: relative; padding: clamp(18px, 2.4vw, 30px);
border: 1px solid var(--fg-line); border-radius: var(--radius-lg);
background:
repeating-linear-gradient(0deg, rgba(138,106,48,.07) 0 1px, transparent 1px 26px),
repeating-linear-gradient(90deg, rgba(138,106,48,.07) 0 1px, transparent 1px 26px);
}
.chb-w .chapter--dark .bp__plot{
border-color: var(--line-dark);
background:
repeating-linear-gradient(0deg, rgba(201,165,106,.09) 0 1px, transparent 1px 26px),
repeating-linear-gradient(90deg, rgba(201,165,106,.09) 0 1px, transparent 1px 26px);
}
/* Each stroke is normalised to a length of 1 (pathLength), so one number
drives it: 1 = not drawn, 0 = fully drawn. */
.chb-w .bp__p{ stroke-dasharray: 1; stroke-dashoffset: 0; }
.chb-w .bp__roof{ stroke-width: 2.2; }
.chb-w .bp__cell{ fill: currentColor; opacity: .85; stroke: none; }
.chb-w .bp__grid{ opacity: 1; }
html.chb-anim .chb-w .bp__p{ stroke-dashoffset: 1; transition: stroke-dashoffset .12s linear; }
html.chb-anim .chb-w .bp__grid{ opacity: 0; transition: opacity .5s var(--ease); }
.chb-w .bp__caption{
display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
font: 500 var(--t-sheet)/1 var(--f-sans);
letter-spacing: var(--ls-sheet); text-transform: uppercase;
color: var(--fg-faint);
}
.chb-w .chapter--dark .bp__caption{ color: var(--on-dark-faint); }
.chb-w .bp__stage{ color: var(--fg-gold); }
.chb-w .chapter--dark .bp__stage{ color: var(--gold); }
.chb-w .bp__pct{ font-variant-numeric: tabular-nums; }
/* mobile: the drawing leads the steps instead of sitting beside them */
.chb-w .bp--inline{ display: block; margin-bottom: clamp(26px, 4vw, 40px); }
@media (min-width: 980px) { .chb-w .bp--inline{ display: none; } }
@media (prefers-reduced-motion: reduce) {
html.chb-anim .chb-w .bp__p{ stroke-dashoffset: 0 !important; }
html.chb-anim .chb-w .bp__grid{ opacity: 1 !important; }
}
/* ===== pages.css ===== */
/* =========================================================================
CAPITAL HOME BUILDERS — inner pages
Projects · About · Contact · Thank You · 404
========================================================================= */
/* ------------------------------------------------------------- page hero */
.chb-w .page-hero{
position: relative; overflow: hidden;
min-height: clamp(460px, 74vh, 720px);
display: grid; align-items: end;
padding-block: clamp(150px, 20vh, 220px) clamp(48px, 7vh, 88px);
color: var(--on-dark);
}
.chb-w .page-hero__ground{ position: absolute; inset: 0; z-index: -1; }
.chb-w .page-hero__ground img{
width: 100%; height: 100%; object-fit: cover; object-position: 50% 48%;
opacity: .72; filter: saturate(.74) contrast(1.03);
}
.chb-w .page-hero__ground::after{
content: ""; position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(6,6,7,.88) 0%, rgba(6,6,7,.34) 46%, rgba(6,6,7,.88) 100%),
linear-gradient(to right, rgba(6,6,7,.80) 0%, rgba(6,6,7,.34) 62%, rgba(6,6,7,.16) 100%);
}
.chb-w .page-hero__in{ display: grid; gap: clamp(18px, 2.4vw, 28px); justify-items: start; }
.chb-w .page-hero h1{ font-size: clamp(2.3rem, min(5vw, 8vh), 4.4rem); max-width: 20ch; line-height: 1.06; }
.chb-w .page-hero h1 em{ font-style: italic; }
.chb-w .page-hero .lead{ max-width: 64ch; }
/* breadcrumb / sheet line */
.chb-w .crumb{
display: flex; align-items: center; gap: 10px;
font: 500 var(--t-sheet)/1 var(--f-sans); letter-spacing: var(--ls-sheet);
text-transform: uppercase; color: var(--fg-faint);
}
.chb-w .crumb a:hover{ color: var(--fg-gold); }
.chb-w .crumb i{ width: 16px; height: 1px; background: currentColor; opacity: .5; }
/* ----------------------------------------------------------- filter bar */
.chb-w .filter{
display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center;
padding-block: clamp(22px, 2.6vw, 34px);
border-bottom: 1px solid var(--fg-line);
}
.chb-w .filter__btn{
position: relative; width: auto; background: none !important; border: 0 !important;
box-shadow: none !important; border-radius: 0 !important; padding: 6px 0;
font: 600 var(--t-eyebrow)/1 var(--f-sans); letter-spacing: .18em; text-transform: uppercase;
color: var(--fg-faint) !important; transition: color .35s var(--ease);
}
.chb-w .filter__btn::after{
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
background: var(--fg-gold); transform: scaleX(0); transform-origin: left;
transition: transform .45s var(--ease-out);
}
.chb-w .filter__btn:hover{ color: var(--fg) !important; }
.chb-w .filter__btn.is-active{ color: var(--fg) !important; }
.chb-w .filter__btn:hover::after, .chb-w .filter__btn.is-active::after{ transform: scaleX(1); }
.chb-w .filter__count{ margin-inline-start: auto; font: 500 var(--t-sheet)/1 var(--f-sans);
letter-spacing: var(--ls-sheet); text-transform: uppercase; color: var(--fg-faint); }
.chb-w .empty-state{
padding: clamp(48px, 7vw, 96px) 0; text-align: center; display: grid; gap: 14px;
justify-items: center;
}
.chb-w .empty-state h3{ font-size: clamp(1.25rem, 2vw, 1.7rem); }
.chb-w .empty-state p{ color: var(--fg-soft); max-width: 46ch; font-size: var(--t-small); }
/* ------------------------------------------------- editorial project grid */
/* Deliberately irregular — never a repeating three-column template. */
.chb-w .pgrid{ display: grid; gap: clamp(26px, 3.4vw, 60px); margin-top: clamp(38px, 4.6vw, 62px); }
.chb-w .pcard{ position: relative; }
.chb-w .pcard__inner{ display: grid; gap: clamp(18px, 2.4vw, 34px); align-items: center; }
.chb-w .pcard__media{ position: relative; }
.chb-w .pcard__body{ display: grid; gap: 12px; align-content: center; justify-items: start; }
.chb-w .pcard__cat{
font: 600 var(--t-eyebrow)/1 var(--f-sans); letter-spacing: var(--ls-eyebrow);
text-transform: uppercase; color: var(--fg-gold);
}
.chb-w .pcard h3{ font-size: clamp(1.4rem, 2.4vw, 2.2rem); }
.chb-w .pcard__loc{ font-size: var(--t-small); color: var(--fg-faint); letter-spacing: .04em; }
.chb-w .pcard__desc{ color: var(--fg-soft); font-size: var(--t-small); max-width: 48ch; }
.chb-w .pcard__cta{
display: inline-flex; align-items: center; gap: .6em; width: auto;
background: none !important; border: 0 !important; padding: 6px 0;
font: 600 var(--t-small)/1 var(--f-sans); letter-spacing: .14em; text-transform: uppercase;
color: var(--fg-gold) !important; position: relative;
}
.chb-w .pcard__cta::after{
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
background: currentColor; transform-origin: right;
transition: transform .5s var(--ease-out);
}
.chb-w .pcard__cta:hover::after{ transform: scaleX(0); }
.chb-w .pcard__cta .arw{ transition: transform .45s var(--ease-out); }
.chb-w .pcard__cta:hover .arw{ transform: translateX(5px); }
.chb-w .pcard__count{
position: absolute; z-index: 3; right: 14px; bottom: 14px;
font: 600 var(--t-sheet)/1 var(--f-sans); letter-spacing: var(--ls-sheet);
padding: 8px 12px; background: rgba(8,8,9,.66); color: var(--white);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
/* layout variants */
.chb-w .pcard--feature .pcard__inner{ grid-template-columns: 1fr; }
.chb-w .pcard--feature .frame{ aspect-ratio: 16 / 9; }
@media (min-width: 900px) {
.chb-w .pcard--feature .pcard__inner{ grid-template-columns: 1fr; }
.chb-w .pcard--feature .pcard__body{
grid-template-columns: 1fr auto; align-items: end; width: 100%;
justify-items: start; gap: 10px 40px;
}
.chb-w .pcard--feature .pcard__cta{ grid-column: 2; grid-row: 1 / span 3; align-self: end; }
.chb-w .pcard--split .pcard__inner{ grid-template-columns: minmax(0,1fr) minmax(0,.85fr); }
.chb-w .pcard--split.is-flipped .pcard__media{ order: 2; }
.chb-w .pcard--split .frame{ aspect-ratio: 4 / 5; }
.chb-w .pcard--pair .pcard__inner{ grid-template-columns: minmax(0,.85fr) minmax(0,1fr); }
}
.chb-w .pcard--duo{ display: grid; gap: clamp(20px, 2.6vw, 40px); }
@media (min-width: 760px) { .chb-w .pcard--duo{ grid-template-columns: 1fr 1fr; align-items: start; } }
.chb-w .pcard--duo .pcard__inner{ grid-template-columns: 1fr; }
/* ---------------------------------------------------------------- lightbox */
.chb-w.lightbox{
position: fixed; inset: 0; z-index: var(--z-top);
background: rgba(6,6,7,.96);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
display: grid; grid-template-rows: auto 1fr auto;
opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility .45s;
}
.chb-w.lightbox.is-open{ opacity: 1; visibility: visible; }
.chb-w .lightbox__bar{
width: min(100% - var(--gutter) * 2, var(--wide)); margin-inline: auto;
height: clamp(70px, 9vh, 96px); display: flex; align-items: center;
justify-content: space-between; gap: 20px; color: var(--on-dark);
}
.chb-w .lightbox__title{ display: grid; gap: 3px; }
.chb-w .lightbox__title b{ font-family: var(--f-display); font-weight: 400; font-size: 1.15rem; }
.chb-w .lightbox__title span{ font-size: .78rem; color: var(--on-dark-faint); letter-spacing: .05em; }
.chb-w .lightbox__close{ width: 44px; height: 44px; display: grid; place-items: center; color: var(--on-dark); }
.chb-w .lightbox__close::before, .chb-w .lightbox__close::after{
content: ""; position: absolute; width: 24px; height: 1px; background: currentColor;
}
.chb-w .lightbox__close{ position: relative; }
.chb-w .lightbox__close::before{ transform: rotate(45deg); }
.chb-w .lightbox__close::after{ transform: rotate(-45deg); }
.chb-w .lightbox__close:hover{ color: var(--gold); }
.chb-w .lightbox__stage{
position: relative; display: grid; place-items: center;
padding-inline: clamp(12px, 3vw, 48px); min-height: 0;
}
.chb-w .lightbox__stage img{
max-width: min(100%, 1100px); max-height: 100%; width: auto; height: auto;
object-fit: contain; border-radius: var(--radius);
opacity: 0; transition: opacity .35s var(--ease);
}
.chb-w .lightbox__stage img.is-shown{ opacity: 1; }
.chb-w .lb-nav{
position: absolute; top: 50%; transform: translateY(-50%);
width: clamp(44px, 5vw, 60px); height: clamp(44px, 5vw, 60px);
display: grid; place-items: center; border-radius: 50%;
border: 1px solid var(--line-dark) !important; color: var(--on-dark);
transition: border-color .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.chb-w .lb-nav:hover{ background: var(--gold) !important; border-color: var(--gold) !important; color: var(--ink); }
.chb-w .lb-nav--prev{ left: clamp(6px, 1.4vw, 20px); }
.chb-w .lb-nav--next{ right: clamp(6px, 1.4vw, 20px); }
.chb-w .lb-nav i{ width: 11px; height: 11px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; }
.chb-w .lb-nav--prev i{ transform: rotate(-135deg); margin-inline-start: 4px; }
.chb-w .lb-nav--next i{ transform: rotate(45deg); margin-inline-end: 4px; }
.chb-w .lightbox__foot{
width: min(100% - var(--gutter) * 2, var(--wide)); margin-inline: auto;
padding-block: clamp(14px, 2vh, 26px);
display: flex; align-items: center; justify-content: center; gap: 8px;
}
.chb-w .lb-dot{ width: 26px; height: 2px; background: var(--line-dark); transition: background-color .3s var(--ease); }
.chb-w .lb-dot.is-on{ background: var(--gold); }
/* ------------------------------------------------------------- mid CTA */
.chb-w .midcta{
position: relative; overflow: hidden; color: var(--fg);
padding-block: clamp(70px, 9vw, 128px);
}
.chb-w .midcta__in{ display: grid; gap: clamp(18px, 2.4vw, 30px); justify-items: center; text-align: center; }
.chb-w .midcta h2{ font-size: clamp(1.9rem, 3.6vw, 3.1rem); }
.chb-w .midcta h2 em{ font-style: italic; }
.chb-w .midcta .lead{ text-align: center; margin-inline: auto; max-width: 56ch; }
/* --------------------------------------------------------------- ABOUT */
.chb-w .split{
display: grid; gap: clamp(36px, 4.6vw, 78px); align-items: center;
grid-template-columns: 1fr;
}
@media (min-width: 900px) { .chb-w .split{ grid-template-columns: minmax(0,1fr) minmax(0,.82fr); } }
.chb-w .split--flip > :first-child{ order: 2; }
@media (max-width: 899px) { .chb-w .split--flip > :first-child{ order: 0; } }
.chb-w .split__text{ display: grid; gap: clamp(18px, 2.2vw, 28px); justify-items: start; }
.chb-w .split__text h2 em{ font-style: italic; }
.chb-w .split__media{ margin: 0; }
@media (max-width: 899px) { .chb-w .split__media{ max-width: 440px; } }
.chb-w .decisions{
display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 4px; max-width: 52ch;
}
.chb-w .decisions li{
font: 500 var(--t-small)/1 var(--f-sans); letter-spacing: .04em;
padding: 9px 15px; border: 1px solid var(--fg-line); border-radius: 999px;
color: var(--fg-soft);
}
.chb-w .chapter--dark .decisions li{ border-color: var(--line-dark); color: var(--on-dark-soft); }
.chb-w .beliefs{ display: grid; gap: 1px; background: var(--fg-line); border: 1px solid var(--fg-line);
margin-top: clamp(38px, 4.6vw, 64px); }
@media (min-width: 700px) { .chb-w .beliefs{ grid-template-columns: 1fr 1fr; } }
.chb-w .belief{
background: var(--panel); padding: clamp(26px, 3vw, 44px);
display: grid; gap: 12px; align-content: start;
}
.chb-w .belief .eyebrow::before{ display: none; }
.chb-w .belief h3{ font-size: clamp(1.15rem, 1.7vw, 1.45rem); }
.chb-w .belief p{ color: var(--fg-soft); font-size: var(--t-small); }
.chb-w .capabilities{ display: grid; gap: 0; width: 100%; justify-self: stretch;
margin-top: clamp(30px, 3.6vw, 48px); max-width: 46ch; }
.chb-w .capabilities li{
display: flex; align-items: baseline; gap: 16px;
padding-block: 15px; border-bottom: 1px solid var(--fg-line);
font-size: var(--t-body);
}
.chb-w .chapter--dark .capabilities li{ border-color: var(--line-dark); }
.chb-w .capabilities li::before{
content: ""; flex: none; width: 13px; height: 6px; background: var(--gold);
clip-path: polygon(0 100%, 50% 0, 100% 100%, 50% 45%);
}
/* ------------------------------------------------------------- CONTACT */
.chb-w .contact__in{
display: grid; gap: clamp(38px, 5vw, 78px); align-items: start;
grid-template-columns: 1fr;
}
@media (min-width: 980px) { .chb-w .contact__in{ grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); } }
.chb-w .contact-form{
padding: clamp(24px, 3.4vw, 46px);
border: 1px solid var(--fg-line); border-radius: var(--radius-lg);
background: rgba(255,255,255,.4);
}
.chb-w .contact-form > h2{ font-size: clamp(1.5rem, 2.4vw, 2.05rem); margin-bottom: clamp(24px, 3vw, 34px); }
.chb-w .field.has-error .input, .chb-w .field.has-error .select, .chb-w .field.has-error .textarea{ border-bottom-color: #b4462f; }
.chb-w .contact__aside{ display: grid; gap: clamp(26px, 3vw, 40px); align-content: start; }
.chb-w .contact__block{ display: grid; gap: 8px; }
.chb-w .contact__block h4{
font: 600 var(--t-eyebrow)/1 var(--f-sans); letter-spacing: var(--ls-eyebrow);
text-transform: uppercase; color: var(--fg-gold);
}
.chb-w .contact__block a, .chb-w .contact__block address{ font-style: normal; color: var(--fg-soft); font-size: var(--t-body); }
.chb-w .contact__block a:hover{ color: var(--fg-gold); }
.chb-w .contact__frame{ margin: 0; }
.chb-w .nextsteps{ display: grid; gap: 1px; background: var(--fg-line);
border: 1px solid var(--fg-line); margin-top: clamp(44px, 5vw, 76px); }
@media (min-width: 760px) { .chb-w .nextsteps{ grid-template-columns: repeat(3, 1fr); } }
.chb-w .nextstep{ background: var(--panel); padding: clamp(24px, 2.8vw, 40px); display: grid; gap: 10px; align-content: start; }
.chb-w .nextstep b{
font-family: var(--f-display); font-weight: 400; font-size: clamp(1.6rem, 2.6vw, 2.3rem);
color: var(--fg-gold); opacity: .6; line-height: 1;
}
.chb-w .nextstep h3{ font-size: clamp(1.05rem, 1.5vw, 1.25rem); }
.chb-w .nextstep p{ color: var(--fg-soft); font-size: var(--t-small); }
.chb-w .map{
margin-top: clamp(44px, 5vw, 74px);
border: 1px solid var(--fg-line); border-radius: var(--radius-lg);
overflow: hidden; background: var(--panel);
}
.chb-w .map iframe{ display: block; width: 100%; height: clamp(300px, 42vh, 440px); border: 0; filter: grayscale(1) contrast(.94); }
/* -------------------------------------------------------------- utility */
.chb-w .utility{
min-height: 100vh; min-height: 100lvh;
display: grid; place-items: center; text-align: center;
padding-block: clamp(150px, 20vh, 220px) clamp(70px, 10vh, 120px);
color: var(--on-dark); position: relative; overflow: hidden;
}
.chb-w .utility__ground{ position: absolute; inset: 0; z-index: -1; }
.chb-w .utility__ground img{ width: 100%; height: 100%; object-fit: cover; opacity: .55; filter: saturate(.7); }
.chb-w .utility__ground::after{
content: ""; position: absolute; inset: 0;
background: radial-gradient(85% 75% at 50% 50%, rgba(6,6,7,.58), rgba(6,6,7,.93));
}
.chb-w .utility__in{ display: grid; gap: clamp(20px, 2.6vw, 32px); justify-items: center; max-width: 62ch; }
.chb-w .utility h1{ font-size: clamp(2.1rem, 4.6vw, 3.7rem); }
.chb-w .utility h1 em{ font-style: italic; }
.chb-w .utility .lead{ text-align: center; }
.chb-w .utility .btn-row{ justify-content: center; }
.chb-w .utility__mark{ width: clamp(64px, 8vw, 96px); height: auto; opacity: .9; }
/* ═══════════════════════════════════════════════════════ SERVICES ═══ */
/* Editorial service cards. No panel ground on purpose — a hairline rule and
the photograph carry the card, which keeps them legible at every tone
without needing a ground that has to move with it. */
.chb-w .svc-cards{
display: grid; gap: clamp(38px, 4.4vw, 68px);
grid-template-columns: 1fr;
/* .chapter-head carries no bottom margin of its own — every other section
spaces itself. Without this the lead sat 14px above the first card. */
margin-top: clamp(40px, 5vw, 72px);
}
@media (min-width: 760px) { .chb-w .svc-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .chb-w .svc-cards{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.chb-w .svc-card{ display: grid; gap: 18px; align-content: start; position: relative; }
.chb-w .svc-card__media{
position: relative; overflow: hidden;
aspect-ratio: 4 / 3; background: var(--ink-2);
}
.chb-w .svc-card__media img{
width: 100%; height: 100%; object-fit: cover;
transition: transform 1.1s var(--ease-out);
}
.chb-w .svc-card:hover .svc-card__media img{ transform: scale(1.045); }
.chb-w .svc-card__no{
position: absolute; left: 0; top: 0; z-index: 2;
padding: 9px 13px; background: rgba(8,8,9,.72);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
font: 600 var(--t-sheet)/1 var(--f-sans); letter-spacing: var(--ls-sheet);
color: var(--gold);
}
.chb-w .svc-card h3{
font-family: var(--f-display); font-weight: 400;
font-size: clamp(1.24rem, 1.9vw, 1.6rem); line-height: 1.24;
}
.chb-w .svc-card > p{ color: var(--fg-soft); font-size: var(--t-small); line-height: 1.68; max-width: 46ch; }
.chb-w .svc-card__tags{ display: flex; flex-wrap: wrap; gap: 7px 9px; }
.chb-w .svc-card__tags span{
font: 500 var(--t-sheet)/1 var(--f-sans); letter-spacing: .12em; text-transform: uppercase;
padding: 7px 11px; border: 1px solid var(--fg-line); color: var(--fg-faint);
}
/* WHAT WE CAN DO — the capability list from the service-page template */
.chb-w .caps{ display: grid; gap: clamp(30px, 4vw, 56px); grid-template-columns: 1fr; }
@media (min-width: 1000px) { .chb-w .caps{ grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: start; } }
.chb-w .caps__list{
display: grid; gap: 0 clamp(24px, 3vw, 48px);
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 760px) { .chb-w .caps__list{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.chb-w .caps__list li{
display: flex; align-items: center; gap: 11px;
padding-block: clamp(11px, 1.3vw, 15px);
border-bottom: 1px solid var(--fg-line-2);
font-size: var(--t-small); color: var(--fg-soft);
}
.chb-w .caps__list li::before{
content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%;
background: var(--fg-gold);
}
/* ════════════════════════════════════════════════════════════ FAQ ═══ */
.chb-w .faq-groups{ display: grid; gap: clamp(34px, 4vw, 60px); grid-template-columns: 1fr; }
@media (min-width: 1000px) { .chb-w .faq-groups{ grid-template-columns: minmax(0, .3fr) minmax(0, 1fr); } }
/* the category index — a quiet rail, sticky only where there is room for it */
.chb-w .faq-index{ display: none; }
@media (min-width: 1000px) {
.chb-w .faq-index{ display: grid; gap: 3px; align-content: start; position: sticky; top: calc(var(--chapter-y) * .5 + 78px); }
}
.chb-w .faq-index a{
padding: 9px 0 9px 15px; border-left: 1px solid var(--fg-line);
font: 500 var(--t-small)/1.3 var(--f-sans); color: var(--fg-faint);
transition: color .3s var(--ease), border-color .3s var(--ease);
}
.chb-w .faq-index a:hover, .chb-w .faq-index a.is-on{ color: var(--fg); border-left-color: var(--fg-gold); }
.chb-w .faq-group{ display: grid; gap: 0; }
.chb-w .faq-group + .faq-group{ margin-top: clamp(38px, 4.4vw, 64px); }
.chb-w .faq-group > h3{
font: 600 var(--t-eyebrow)/1 var(--f-sans); letter-spacing: var(--ls-eyebrow);
text-transform: uppercase; color: var(--fg-gold); margin-bottom: 14px;
}
/* =========================================================================
THEME ARMOUR
Hello Elementor's reset.css forces colour #cc3366 (pink) and a matching
border on every a / button / [type=submit], with !important, and it loads
AFTER this file. Fixing only the resting state is what let the pink come
back through :hover, :focus and :active on earlier projects — so every
state is neutralised here at once, including the mobile tap highlight.
NO PINK ANYWHERE, IN ANY STATE, ON ANY ELEMENT.
Two deliberately separate jobs:
1. COLOUR is forced with !important, because the theme uses !important and
loads last. This is the only way it never returns.
2. GEOMETRY is reset WITHOUT !important, at element-level specificity, so
our own class rules (.btn, .chip, .burger) outrank it naturally — and
so do the Style-tab controls, which must stay editable. Forcing
geometry here is what silently squashed the burger on a past build.
========================================================================= */
/* Buttons are excluded from the link armour on purpose. `:link` and
`:visited` are pseudo-CLASSES, so `.chb-w a:link` scores (0,2,1) and
outranks `.chb-w .chb-btn` (0,2,0) — the armour was stripping the border
off every outline button. `:not()` takes its argument's specificity, so
this both raises the score and simply stops matching buttons. */
.chb-w a:not(.btn):not(.chb-btn),
.chb-w a:not(.btn):not(.chb-btn):link,
.chb-w a:not(.btn):not(.chb-btn):visited,
.chb-w a:not(.btn):not(.chb-btn):hover,
.chb-w a:not(.btn):not(.chb-btn):focus,
.chb-w a:not(.btn):not(.chb-btn):active {
/* !important on BOTH colour and border: Hello Elementor sets
`color:#cc3366!important` and `border:1px solid #cc3366!important` on every
, and it loads after this file. Writing `color:inherit` without
!important — as an earlier build did — loses, and the pink comes straight
back on every text link. */
color: inherit !important;
border-color: currentColor !important;
border-style: none !important;
border-width: 0 !important;
text-decoration: none !important;
-webkit-tap-highlight-color: rgba(0,0,0,0) !important;
}
/* the few links that legitimately draw a rule do it with a pseudo-element,
so the border reset above cannot take it away */
.chb-w .chb-btn, .chb-w .btn {
border-style: solid !important;
border-width: 1px !important;
}
.chb-w button,
.chb-w [type="button"], .chb-w [type="submit"], .chb-w [type="reset"],
.chb-w button:hover, .chb-w button:focus, .chb-w button:active, .chb-w button:visited,
.chb-w [type="submit"]:hover, .chb-w [type="submit"]:focus, .chb-w [type="submit"]:active,
.chb-w [type="button"]:hover, .chb-w [type="button"]:focus {
color: inherit !important;
border-color: currentColor !important;
outline-color: transparent !important;
text-decoration: none !important;
-webkit-tap-highlight-color: rgba(0,0,0,0) !important;
}
.chb-w button, .chb-w [type="button"], .chb-w [type="submit"], .chb-w [type="reset"] {
-webkit-appearance: none; appearance: none;
background-image: none;
font: inherit; cursor: pointer;
}
/* -------------------------------------------------------------------------
BARE ICON BUTTONS — TRANSPARENT BACKGROUND IN EVERY STATE
The colour armour above neutralises the theme's pink TEXT and BORDER, but
never its pink BACKGROUND, because most of our buttons already declare
their own: `.chip`, `.filter__btn` and `.pcard__cta` each carry
`background: transparent !important` on their own class rule, so the theme
can't reach them.
Four buttons were never given that armour and are the only ones the theme
could still paint:
.burger — the header hamburger AND the menu's close button
(both carry `.burger`); it declared no background at
all, so :hover / :focus / :active / [aria-expanded]
went straight to the theme's #cc3366 block
.ba-handle — the Before & After drag handle; it declared
`background: none` at (0,2,0), which an !important
theme rule outranks regardless of source order, so the
56px-wide hit area lit up pink across the images
.lightbox__close
.lb-nav — same shape of defect in the portfolio lightbox
Each class is DOUBLED — `.chb-w .burger.burger` — to score (0,3,0) rather
than (0,2,0). Matching the theme's specificity is not enough: it loads
after this file, so an equal-specificity !important tie is decided by
source order and the theme wins it. The doubled class puts the question
beyond a tie. This is the same idiom as `.chb-w.chb-w` further up.
Only the background travels here. `border-color` is deliberately left
alone — `.lb-nav` draws a real 1px ring and a transparent border-color at
(0,3,0) would erase it — and `outline` is untouched so the gold
:focus-visible ring still shows on keyboard navigation.
None of this collides with the Style-tab controls: the header's burger
picker targets `.burger i` (the bars) and the Before & After picker targets
`.ba-handle__grip` (the gold disc INSIDE the button), never the button box
itself, so both keep working and the grip stays gold.
------------------------------------------------------------------------- */
.chb-w .burger.burger,
.chb-w .burger.burger:hover,
.chb-w .burger.burger:focus,
.chb-w .burger.burger:focus-visible,
.chb-w .burger.burger:focus-within,
.chb-w .burger.burger:active,
.chb-w .burger.burger[aria-expanded="true"],
.chb-w .burger.burger[aria-expanded="true"]:hover,
.chb-w .burger.burger[aria-expanded="true"]:focus,
.chb-w .burger.burger[aria-expanded="true"]:active,
.chb-w .ba-handle.ba-handle,
.chb-w .ba-handle.ba-handle:hover,
.chb-w .ba-handle.ba-handle:focus,
.chb-w .ba-handle.ba-handle:focus-visible,
.chb-w .ba-handle.ba-handle:focus-within,
.chb-w .ba-handle.ba-handle:active,
.chb-w .ba-handle.ba-handle.is-dragging,
.chb-w .lightbox__close.lightbox__close,
.chb-w .lightbox__close.lightbox__close:hover,
.chb-w .lightbox__close.lightbox__close:focus,
.chb-w .lightbox__close.lightbox__close:focus-visible,
.chb-w .lightbox__close.lightbox__close:active,
.chb-w .lb-nav.lb-nav,
.chb-w .lb-nav.lb-nav:focus,
.chb-w .lb-nav.lb-nav:focus-visible,
.chb-w .lb-nav.lb-nav:active {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
-webkit-tap-highlight-color: rgba(0,0,0,0) !important;
}
/* `.lb-nav` is the one of the four that DOES fill on hover — gold, by design.
It is listed above without `:hover` for exactly that reason, and its own
hover rule is restated here, after the transparent block, so the fill is
never a question of source order. */
.chb-w .lb-nav.lb-nav:hover {
background: var(--gold) !important;
background-color: var(--gold) !important;
}
/* =========================================================================
THE OUTLINE BUTTON, AT ANY TONE
The design ships two variants because each chapter had a fixed tone:
`--ghost` (white text, for dark) and `--ghost-dark` (ink text, for light).
With tone as a control, whichever one is in the markup is wrong half the
time — measured as "Ask About Financing" in white on cream, ratio 1.11.
`--ghost` is therefore expressed against the tone instead of against a
colour: text takes --fg, the sweep fill takes --fg, and on hover the text
flips to --ground, the tone's own background. At a dark tone every value
resolves to exactly what the design authored, so nothing changes where it
was already right. `--ghost-dark` is left intact as an explicit override.
========================================================================= */
.chb-w .btn--ghost, .chb-w .chb-btn--ghost {
--btn-fg: var(--fg);
--btn-bg: transparent;
--btn-bd: var(--fg-line);
}
.chb-w .btn--ghost::before, .chb-w .chb-btn--ghost::before { background: var(--fg); }
.chb-w .btn--ghost:hover, .chb-w .chb-btn--ghost:hover {
--btn-fg: var(--ground);
--btn-bd: var(--fg);
}
/* our own button system re-asserts its colours after the armour above */
.chb-w .chb-btn, .chb-w .btn {
color: var(--btn-fg) !important;
background-color: var(--btn-bg) !important;
border-color: var(--btn-bd) !important;
}
.chb-w .chb-btn:hover, .chb-w .btn:hover { color: var(--btn-fg) !important; }
.chb-w .chb-btn--ghost:hover, .chb-w .btn--ghost:hover { color: var(--ground) !important; }
.chb-w .chb-btn--ghost-dark:hover, .chb-w .btn--ghost-dark:hover { color: var(--cream) !important; }
.chb-w .chip.is-active { color: var(--ink) !important; }
.chb-w .filter__btn.is-active { color: var(--fg) !important; }
/* The theme's `img { height:auto }` (Elementor, Hello and WooCommerce all ship
one) beats object-fit and lets framed images float, leaving a gap. Every
framed image is pinned here; the Style-tab fill control re-states it too. */
.chb-w .frame img,
.chb-w .hero__plate img,
.chb-w .services__sticky img,
.chb-w .ba-slider__after img {
height: 100% !important;
width: 100% !important;
max-width: none !important;
object-fit: cover;
}
/* The font armour lives in the INHERITED-COLOUR block near the top of the
file, alongside the colour armour, because both need to sit BELOW the ported
design rules in the cascade. It used to live here, at the end, and listed
`span` among the elements forced to the sans face — which quietly stripped
Marcellus from every heading whose text is wrapped in spans (the whole
`.lines` treatment: each hero and chapter title). Measured on the live site:
.hero__title computed Marcellus, the span inside it computed Inter. */
/* =========================================================================
REVEAL SYSTEM — VISIBLE BY DEFAULT
This replaces the old pre-paint gate. The ported base.css still carries the
`html.chb-motion .reveal{opacity:0}` rules, but the plugin never adds
`chb-motion` any more, so those rules are inert — content is visible with no
CSS, no JavaScript, nothing.
Hiding for animation happens ONLY under `html.chb-anim`, which the motion
script (chb-motion.js) adds to AFTER it has started successfully and
already revealed everything on screen, and ONLY for elements it has not yet
revealed (`:not(.is-in)`). If the script never runs, throws, is stripped by
a minifier, or its reveal engine cannot finish on a given host, `chb-anim`
is simply never present (or is removed by the script's own watchdog) and the
page stays fully visible. A blank page is no longer reachable.
`.is-in` is added by the script's position sweep (see chb-motion.js): to
everything on screen the instant it starts, and to the rest as they scroll
into view. Elements above the fold therefore carry `.is-in` before
`chb-anim` is added, so they never flash hidden.
========================================================================= */
.chb-w .reveal {
transition: opacity var(--dur-slow) var(--ease-out),
transform var(--dur-slow) var(--ease-out),
clip-path var(--dur-slow) var(--ease-out);
}
html.chb-anim .chb-w .reveal:not(.is-in) { opacity: 0; transform: translateY(26px); }
html.chb-anim .chb-w .reveal--rise:not(.is-in) { transform: translateY(46px); }
html.chb-anim .chb-w .reveal--fade:not(.is-in) { transform: none; }
html.chb-anim .chb-w .reveal[data-d="1"] { transition-delay: .09s; }
html.chb-anim .chb-w .reveal[data-d="2"] { transition-delay: .18s; }
html.chb-anim .chb-w .reveal[data-d="3"] { transition-delay: .27s; }
html.chb-anim .chb-w .reveal[data-d="4"] { transition-delay: .36s; }
html.chb-anim .chb-w .reveal[data-d="5"] { transition-delay: .45s; }
.chb-w .reveal--mask > * { transition: clip-path var(--dur-slow) var(--ease-out); }
html.chb-anim .chb-w .reveal--mask:not(.is-in) > * { clip-path: inset(100% 0 0 0); }
.chb-w .lines .ln { display: block; }
.chb-w .lines .ln > span { display: block; }
html.chb-anim .chb-w .lines .ln { overflow: hidden; }
html.chb-anim .chb-w .lines .ln > span { transition: transform 1s var(--ease-out); }
html.chb-anim .chb-w .lines:not(.is-in) .ln > span { transform: translateY(102%); }
html.chb-anim .chb-w .lines.is-in .ln:nth-child(2) > span { transition-delay: .09s; }
html.chb-anim .chb-w .lines.is-in .ln:nth-child(3) > span { transition-delay: .18s; }
html.chb-anim .chb-w .lines.is-in .ln:nth-child(4) > span { transition-delay: .27s; }
@media (prefers-reduced-motion: reduce) {
html.chb-anim .chb-w .reveal,
html.chb-anim .chb-w .reveal--mask > *,
html.chb-anim .chb-w .lines .ln > span {
opacity: 1 !important; transform: none !important; clip-path: none !important;
}
}
/* Optional buttons that the client adds to a section that had none. */
.chb-w .chb-extra-buttons { margin-top: clamp(24px, 3vw, 40px); }
.chb-w .chb-btn--block { width: 100%; }
/* Form status message, shown in place when no redirect is configured. */
.chb-w .chb-form-status {
margin-top: 16px; font-size: var(--t-small); line-height: 1.6;
padding: 12px 16px; border-inline-start: 2px solid currentColor;
}
.chb-w .chb-form-status.is-ok { color: var(--gold); }
.chb-w .chb-form-status.is-error { color: #d08b6f; }
/* =========================================================================
HERO BACKGROUND VIDEO
A muted, looping cinematic clip behind the headline. It sits in the same
place the background photograph did, under the same left-dark scrim
(.hero__ground::after), so the white headline stays perfectly legible. On
phones the video is dropped entirely and the poster photograph shows instead
— no autoplay video on mobile data or battery.
========================================================================= */
.chb-w .hero__video {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: 50% 46%;
opacity: .9; filter: saturate(.8) contrast(1.04);
pointer-events: none; border: 0;
}
.chb-w .hero__ground-fallback { display: none; }
/* Editorial hero: on phones the video stands down and the poster photo shows. */
@media (max-width: 768px) {
.chb-w .hero:not(.hero--cinema) .hero__video { display: none; }
.chb-w .hero:not(.hero--cinema) .hero__ground-fallback {
display: block; position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: 50% 46%;
opacity: .9; filter: saturate(.72) contrast(1.05);
}
}
/* -------------------------------------------------------------------------
CINEMA HERO — the video is the subject; headline + buttons centre over it.
The scrim is lighter and even (not the editorial left-dark wash) so the
footage stays vivid, with a text-shadow guaranteeing legibility over any
frame. Full-height uses svh so the mobile browser chrome never clips it.
------------------------------------------------------------------------- */
.chb-w .hero--cinema { min-height: 100vh; min-height: 100svh; }
.chb-w .hero--cinema .hero__video { opacity: 1; filter: saturate(.88) contrast(1.05); }
.chb-w .hero--cinema .hero__ground img { opacity: 1; filter: saturate(.82) contrast(1.05); }
.chb-w .hero--cinema .hero__ground::after {
background:
linear-gradient(to bottom, rgba(6,6,7,.56) 0%, rgba(6,6,7,.34) 40%, rgba(6,6,7,.74) 100%),
radial-gradient(120% 95% at 50% 44%, rgba(6,6,7,.10), rgba(6,6,7,.64) 92%);
}
.chb-w .hero--cinema .hero__in {
grid-template-columns: 1fr; justify-items: center; text-align: center;
max-width: 1040px; margin-inline: auto;
}
.chb-w .hero--cinema .hero__text { justify-items: center; }
.chb-w .hero--cinema .hero__title { max-width: 22ch; }
.chb-w .hero--cinema .hero__lead { margin-inline: auto; }
.chb-w .hero--cinema .chb-btn-row { justify-content: center; }
.chb-w .hero--cinema .hero__meta { justify-content: center; }
.chb-w .hero--cinema .eyebrow::before { display: none; }
.chb-w .hero--cinema .eyebrow { padding-inline-start: 0; }
.chb-w .hero--cinema .hero__title,
.chb-w .hero--cinema .eyebrow,
.chb-w .hero--cinema .hero__lead,
.chb-w .hero--cinema .hero__meta { text-shadow: 0 2px 34px rgba(0,0,0,.45); }
@media (min-width: 1024px) {
.chb-w .hero--cinema .hero__in { grid-template-columns: 1fr; }
}
/* Elementor wraps widgets in containers that would clip a full-bleed section. */
.chb-w { position: relative; }
.elementor-widget-container > .chb-w { overflow: visible; }
/* =========================================================================
EDITOR CANVAS
Animations never run in the editor, so pinned/sticky/viewport-height pieces
are flattened and every reveal is resolved — the client edits a readable,
static version of the section.
========================================================================= */
.chb-editor-preview .hero,
.chb-editor-preview .page-hero,
.chb-editor-preview .utility { min-height: 520px !important; }
.chb-editor-preview .closer { min-height: 420px !important; }
.chb-editor-preview .services__sticky,
.chb-editor-preview .faq__head { position: static !important; }
/* Below 980px the sticky element is the OUTER panel, not the inner one, so it
needs flattening by name too — otherwise the photograph pins itself inside
Elementor's mobile preview, which is the one place it must not. Its header
clearance goes with it: with nothing to clear, that padding is dead space. */
.chb-editor-preview .services__media {
position: static !important;
padding-top: 0 !important;
}
.chb-editor-preview .reveal,
.chb-editor-preview .reveal--mask,
.chb-editor-preview .reveal--mask > *,
.chb-editor-preview .lines .ln > span {
opacity: 1 !important; transform: none !important; clip-path: none !important;
}
.chb-editor-preview .scroll-cue { display: none !important; }
body.elementor-editor-active .chb-bg-field,
body.elementor-editor-active .chb-spine { display: none !important; }
/* =========================================================================
OVERLAY SCROLL LOCK
The static site locks BOTH html and body while the mobile menu or the
lightbox is open. Those rules are keyed on `html.menu-open` / `html.lb-open`,
which the porter drops as page chrome — and nothing re-added them under the
`chb-` names the engine actually sets. The engine sets `body.style.overflow`
inline, which is not enough: measured with the menu open on a 390px viewport,
the document still scrolled to y=1200 behind the overlay, so closing the menu
left the reader somewhere else on the page. Locking the root is what stops it.
========================================================================= */
html.chb-menu-open, html.chb-menu-open body,
html.chb-lb-open, html.chb-lb-open body {
overflow: hidden;
overscroll-behavior: none;
}
/* =========================================================================
PAGE CHROME
The tone field is deliberately NOT a ground any more. A fixed, viewport-
sized dark layer is the single most dangerous element in a plugin: any
host theme or plugin that gives the content wrapper its own stacking
context, a transform, or a lower z-index leaves that layer painting over
the whole page — a black screen. Each section already paints its own
feathered veil, and neighbouring veils cross-fade, so the continuous sheet
survives without it. What is left here is only grain and glow, pinned
behind everything.
========================================================================= */
.chb-bg-field {
position: fixed; inset: 0; z-index: -1; pointer-events: none;
background: transparent;
}
.chb-bg-field__grain {
position: absolute; inset: -120px; opacity: .5; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
.chb-bg-field__glow {
position: absolute; left: 50%; top: -10%; width: 130vw; aspect-ratio: 1;
transform: translateX(-50%);
background: radial-gradient(circle at 50% 40%, rgba(201,165,106,.10), transparent 62%);
opacity: 0; transition: opacity .5s var(--ease);
}
html.tone-dark .chb-bg-field__glow { opacity: 1; }
.chb-spine {
position: fixed; left: max(14px, calc(var(--gutter) * .38)); top: 0; bottom: 0;
width: 1px; z-index: 40; pointer-events: none; display: none;
}
@media (min-width: 1180px) { .chb-spine { display: block; } }
.chb-spine__rail { position: absolute; inset: 0; background: currentColor; opacity: .16; }
.chb-spine__fill {
position: absolute; left: 0; top: 0; width: 1px; height: 0;
background: var(--gold); box-shadow: 0 0 14px rgba(201,165,106,.5);
}
.chb-spine__num {
position: absolute; left: 10px; top: 50vh; transform: translateY(-50%);
font: 500 var(--t-sheet)/1 var(--f-sans);
letter-spacing: var(--ls-sheet); color: var(--gold);
writing-mode: vertical-rl; text-orientation: mixed;
display: flex; align-items: center; gap: 12px;
}
.chb-spine__num span { color: currentColor; opacity: .45; }
html.tone-light .chb-spine { color: var(--on-light); }
html.tone-dark .chb-spine { color: var(--on-dark); }
/* Every section is opaque in its own right, so nothing depends on stacking. */
.chb-w[data-tone] { background-color: var(--veil, var(--ink)); }
.chb-w[data-tone]::before { z-index: 0; }
.chb-w[data-tone] > * { position: relative; z-index: 1; }
/* A widget whose section paints its own photographic ground suppresses the
generic tone veil — two stacked overlays crush the photograph. */
.chb-w.chb-sec--bleed::before { display: none !important; }
/* =========================================================================
MOBILE GUARDS
Nothing may overflow, no text may be clipped, every tap target stays real.
========================================================================= */
@media (max-width: 1024px) {
.chb-w { overflow-x: clip; }
/* A grid or flex item defaults to `min-width: auto`, which floors its track
at the item's MIN-CONTENT width. An contributes its `size` to
min-content, so the consultation form's two-column field grid floored the
track at 389px inside a 350px container — the child overflowed its parent,
the document grew to 409px against a 390px viewport, and every fixed
element (header, menu, background field) stretched to match. That is the
19px of horizontal scroll measured on the live homepage.
`min-width: 0` lets the track shrink and the content wrap, which is what
it should have done. Kept to the mobile range, where it is the fix, rather
than applied globally where it would let desktop layouts collapse. */
.chb-w :where(*) { min-width: 0; }
.chb-w :where(input, select, textarea) { max-width: 100%; }
.chb-w .wrap, .chb-w .wrap--wide, .chb-w .wrap--narrow { width: min(100% - var(--gutter) * 2, 100%); }
}
@media (max-width: 700px) {
.chb-w .chb-btn, .chb-w .btn { min-height: 52px; width: 100%; }
.chb-w .chb-btn-row, .chb-w .btn-row { width: 100%; }
.chb-w .hero__title, .chb-w .chb-title { overflow-wrap: break-word; hyphens: none; }
.chb-w .frame { max-width: 100%; }
/* The hero's offset gold outline is drawn 30px OUTSIDE the plate on the right
and bottom. On a phone the plate already sits against the 20px gutter, so
those 30px land past the viewport and `overflow-x: clip` cuts the outline
off mid-edge — measured 10px beyond a 390px viewport. Pulled inside the
gutter, the frame keeps its offset look and stays whole. */
.chb-w .hero__plate-frame { inset: 14px -14px -14px 14px; }
}
/* =========================================================================
TOUCH TARGETS
Measured on a 390px viewport: the text links run 17-26px tall and the
project filters 23px — well under the 44px a fingertip needs. They cannot
simply be padded, because each one draws its underline with `::after`
positioned against the padding box, so growing the box moves the rule away
from the text and changes the design.
`::before` is free on all of them, so the hit area is an invisible 44px
overlay centred on the link. Nothing moves, nothing repaints, the target is
real. Kept to touch pointers so a mouse never picks up a hidden hotspot.
========================================================================= */
@media (max-width: 1024px) and (hover: none) {
.chb-w :where(.ulink, .pcard__cta, .filter__btn, .chip,
.footer__col a, .footer address a, .footer__social a,
.nav a, .menu__list a, .crumb a,
.consult__direct a, .contact__block a, .menu__meta a) { position: relative; }
.chb-w :where(.ulink, .pcard__cta, .filter__btn, .chip,
.footer__col a, .footer address a, .footer__social a,
.nav a, .menu__list a, .crumb a,
.consult__direct a, .contact__block a, .menu__meta a)::before {
content: "";
position: absolute;
left: 0; right: 0;
top: 50%;
transform: translateY(-50%);
height: 44px;
/* Height only — NEVER a min-width. A 44px-wide overlay on the narrow
project filters ("All" is 27px) reached across the gap into its
neighbour: hit-testing the centre of one filter landed on a DIFFERENT
filter. A control that fires the wrong action is worse than a small one.
Vertical growth cannot collide, because these sit on their own lines. */
background: transparent;
pointer-events: auto;
z-index: 0;
}
/* the link's own content stays above its hit area so text is selectable */
.chb-w :where(.ulink, .pcard__cta, .filter__btn) > * { position: relative; z-index: 1; }
/* The project filters wrap onto three rows on a phone, and at `row-gap:10px`
with 23px buttons the pitch is 33px — a 44px target physically cannot fit
between two rows without overlapping them, which is what made a tap land
on the filter above. The gap is opened to give each row a real 44px of
pitch; that is the only way the target can exist at all. Costs ~22px of
height per extra row, on phones only. */
.chb-w .filter { row-gap: 22px; }
}
/* Touch has no hover: anything that would only appear on hover is shown. */
@media (hover: none) {
.chb-w .work__meta, .chb-w .pcard__cta, .chb-w .caption { opacity: 1 !important; transform: none !important; }
.chb-w .zoomable:hover img, .chb-w a:hover > .frame img { transform: none !important; }
}
/* =========================================================================
08 · OUR PROCESS — THE STEPS PASS BEHIND THE BLUEPRINT, NOT THROUGH IT
On a phone the drawing leads the steps instead of sitting beside them, and
`.bp` is sticky at every width, so the plate parks ~135px down the viewport
while the step list scrolls past it. The plate had nothing to hide the list
with: `.bp--inline` sets no background at all, and `.bp__plot` paints only
two `repeating-linear-gradient`s of 7%-alpha rules over transparency. Every
step ran straight through the drawing — measured on the live homepage,
`background-color: rgba(0, 0, 0, 0)` on both.
It reads as text sitting ON TOP of the blueprint. It is the opposite: the
text is behind it and the panel is a window.
So the panel is given the section's own ground to paint with, and a
z-index so it cannot lose the paint order to a step that happens to gain a
stacking context of its own. The padding is what makes the pass look
deliberate — a step fades out against the ground a few pixels before it
would touch the plate's rule, rather than being guillotined by it.
Deliberately NOT touched, because the request was only about what covers
what: `position`/`top` (the plate sticks exactly where it did), the
stroke-drawing animation on `.bp__p`, the `.reveal` entrance on the steps,
and the whole desktop layout — `.bp--inline` is `display: none` from 980px
up, where the plate sits in its own column and nothing ever overlaps.
========================================================================= */
@media (max-width: 979px) {
/* the offset `.bp` sticks at, named so the band below is exactly as tall */
.chb-w .process { --bp-lift: clamp(110px, 16vh, 170px); }
.chb-w .bp--inline {
background: var(--ground);
z-index: 2;
padding-block: clamp(10px, 2.4vw, 18px);
}
/* THE BAND ABOVE THE PLATE
Painting the panel fixed what scrolled UNDER it, but the plate parks
135px down a 390px viewport, and that strip above it was still open: a
step rose out from behind the drawing and sat over the section, which is
what the second screenshot showed. Measured across the scroll range, two
to three step paragraphs were visible in that strip at any moment.
The band is a pseudo-element rather than padding on the panel, and that
choice is the whole point: padding would push the plate 135px further
down the flow and grow the section by the same amount. An absolutely
positioned box is OUT of flow, so the drawing does not move by a pixel —
neither where it starts nor where it sticks — which is what was asked.
Its height is `--bp-lift`, the same expression `.bp` sticks at, so the
band reaches exactly the top of the viewport and no further. Any taller
and it would reach back over the section above this one. */
.chb-w .bp--inline::before {
content: "";
position: absolute;
left: 0; right: 0;
bottom: 100%;
height: var(--bp-lift);
background: var(--ground);
}
/* Before the plate sticks, that band lies over the section title. The title
is lifted above it so it stays legible — the band only ever has to hide
the steps, which are unpositioned and therefore paint below both. By the
time the plate is stuck the title has left the viewport entirely (its
bottom sits 6px below the panel's flow top), so the two never compete
where a reader can see it. */
.chb-w .process .chapter-head { position: relative; z-index: 3; }
}
/* =========================================================================
THE LIGHTBOX PHOTOGRAPH MUST FIT THE SCREEN
`.lightbox__stage img` asks for `max-height: 100%`, and that percentage
never resolves. Measured on a 1440x900 desktop with a portrait photograph:
lightbox rows = 81px 819px 0px the stage track IS definite
stage = 1440x819 min-height:0, as the fix requires
image = 1000x1333 drawn at NATURAL size, 514px of it
below the fold
A percentage max-height resolves against the containing block's height, and
the image's containing block is a grid area whose height comes from a `1fr`
track. Chrome treats that as indefinite for a replaced element with
`height: auto`, so the declaration is dropped and nothing caps the picture.
Five candidate fixes were measured in the live DOM; `height:100%` on the
stage, an explicit pixel height on the stage, `align-self:stretch` on the
image and `minmax(0,1fr)` on the row ALL still drew 1000x1333. Only an
absolute length worked.
So the cap is expressed against the viewport, which is always definite —
and the overlay is `position: fixed; inset: 0`, so the viewport is exactly
the box we are fitting into. The two subtractions mirror the chrome the
photograph shares the screen with, named here so they cannot drift from it.
Landscape photographs are unaffected: they are capped first by
`max-width: min(100%, 1100px)` and never reach this height. Phones are
unaffected for the same reason — at 390px the stage is 366px wide, so even
a 3:4 portrait lands at 488px tall, well inside the cap. This only ever
binds where it was broken: a tall photograph on a wide screen.
========================================================================= */
.chb-w.lightbox {
--lb-bar: clamp(70px, 9vh, 96px); /* mirrors .lightbox__bar height */
--lb-gap: clamp(34px, 5.5vh, 72px); /* the dot strip, or air where hidden */
}
.chb-w .lightbox__stage img {
/* vh first, dvh second: the second wins where supported, and on a phone it
follows the browser chrome instead of assuming it away. */
max-height: calc(100vh - var(--lb-bar) - var(--lb-gap));
max-height: calc(100dvh - var(--lb-bar) - var(--lb-gap));
}
/* =========================================================================
THE `hidden` ATTRIBUTE HAS TO WIN
`hidden` is styled by the browser as `[hidden]{display:none}` — a USER-AGENT
rule, which any author `display` beats, however weak. Three elements in this
stylesheet declare one and are hidden by the script through the attribute,
so all three stayed on screen:
.lb-nav the lightbox arrows (display:grid). A gallery with one
photograph sets prev.hidden/next.hidden, yet both arrows
kept painting — two controls that visibly do nothing,
because stepping a one-item list lands on the same item.
.lightbox__foot the dot strip (display:flex), same call, same result
.empty-state "no projects match this filter" (display:grid). The
script sets `empty.hidden = shown > 0`, so it should
appear only when a filter empties the grid. Measured on
the live /projects/: hidden=true, display=grid, painted —
the empty-state message was on the page permanently,
underneath a full grid of projects.
Filtering the cards themselves was never affected: `.chb-w .pcard` sets only
`position`, so the user-agent rule was free to apply and `card.hidden` did
hide the card. That is the whole difference, and it is why this was easy to
miss.
`!important` rather than source order: the design rules score (0,2,0) and so
does this one, so a tie would be decided by position in the file and any
later rule could take it back. `hidden` is not a style, it is a statement
that the element is not there — nothing should ever outrank it.
========================================================================= */
.chb-w [hidden] { display: none !important; }
/* =========================================================================
THE TWO "SPLIT" SLIDERS, CONSUMED AT DESKTOP ONLY
`add_responsive_control` emits a control's DESKTOP value with no media
query around it, at `.elementor-N .elementor-element-XXXX .target` — (0,3,1).
Every column rule in this stylesheet is (0,2,0), so an untouched slider
sitting at its own default was quietly overriding the stacked phone layout
of both widgets that use one:
.hero__in 66% → a 231px text column beside an 81px image column
.services__grid 38% → a 133px photograph beside a 217px list
both measured on a live 390px viewport, and both on controls whose own
description says "on desktop". The Columns SELECT controls are unaffected —
each declares a `mobile_default`, so Elementor emits a phone rule too.
Both sliders now write a custom property instead, read back here inside the
same media query the two-column layout already lives in. The fallback is
each control's own default, so a widget that has never been touched renders
byte-identically to before; below the breakpoint the property is simply
never read, and the stacked layout stands.
========================================================================= */
@media (min-width: 1024px) {
.chb-w .hero__in { grid-template-columns: var(--hero-split, 66%) minmax(0, 1fr); }
}
@media (min-width: 980px) {
.chb-w .services__grid { grid-template-columns: var(--svc-split, 38%) minmax(0, 1fr); }
}
/* =========================================================================
04 · WHAT WE DO — THE PHONE AND TABLET LAYOUT
Desktop (>= 980px) is untouched: a sticky photograph in the left column,
the service list scrolling past it on the right, the photograph swapping to
whichever service the reader has reached.
Below 980px the design fell back to something else entirely — the sticky
panel was hidden outright and EVERY list item grew its own inline
thumbnail. Six 3:4 photographs at 320px wide, one per service, interleaved
with the copy: roughly 2,500px of images threaded through 1,900px of text.
That is what made the section read as a cramped, unordered stack on a
phone. The reader never sees a service and its photograph together, only an
alternating strip of the two.
The fix is to STACK the desktop layout rather than replace it. The
photograph moves to the top and stays there; the list scrolls underneath it
and drives it, exactly as the right-hand column does on a desktop. One
photograph, always the one belonging to the service being read.
Four things make that work, and all four are required:
1. Media and list are placed in the SAME single-column grid cell, one on
top of the other. A grid item's containing block is its grid area, so
sharing a cell is what gives the sticky panel the whole length of the
list to travel — as its own row it would stick for a distance of zero.
Sharing the cell is also what keeps the panel OUT of the row holding
`.chb-extra-buttons`: a sticky element comes to rest flush with the
bottom of its containing block, so had the buttons been inside that
block the photograph would have parked itself on top of the section's
call to action. It now releases at the end of the list instead, and
the buttons get clear air.
2. The list reserves the panel's exact height as padding-top, so the two
share a cell without the photograph landing on the first service. The
height is composed from the same three custom properties the panel is
built from, so the reservation can never drift out of step with it.
3. The panel sticks at `top: 0` and clears the fixed header with its own
PADDING rather than an offset. That band is painted `var(--ground)`,
so list items scrolling up vanish into the section's own background
instead of sliding through the gap between the header and the
photograph — and `--ground` tracks the Background-tone control, so the
band follows whatever tone the section is set to.
4. `.frame--tall` is 2:3. At phone width that is a 585px-tall photograph,
which would leave almost nothing of the viewport for the text it is
meant to accompany. The ratio is dropped for an explicit ~30vh, so the
photograph and the copy are both always on screen — the entire point
of the pattern.
The list itself goes single-column. The number was a first grid track, so
on a 390px screen it took width from a heading that had none to spare; it
now sits on its own line above the title as a label, and the active item
takes a gold rule across its top. `.svc` already transitions border-colour
for precisely this, it was simply never used.
Scroll-driven swapping lives in chb-motion.js, which used to bail out below
980px and now measures its focus line from the panel's bottom edge.
========================================================================= */
@media (max-width: 979px) {
.chb-w .services__grid {
/* the panel's three bands, named once so the list can reserve their sum */
--svc-clear: clamp(66px, 8.6vh, 84px); /* header clearance */
--svc-photo: clamp(176px, 30vh, 268px); /* the photograph */
--svc-under: clamp(18px, 4vw, 26px); /* the band below it */
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0;
/* the panel's own clearance band is the space under the section lead now */
margin-top: 0;
}
.chb-w .services__media {
display: block;
grid-column: 1; grid-row: 1;
/* start, not stretch: the item must keep its content height for the grid
area to be longer than the item — which is the room sticky travels in */
align-self: start;
position: sticky; top: 0; z-index: 2;
padding-top: var(--svc-clear);
padding-bottom: var(--svc-under);
background: var(--ground);
}
/* the outer element is the sticky one now, so the inner panel stands down */
.chb-w .services__sticky { position: static; top: auto; }
.chb-w .services__sticky .frame,
.chb-w .services__sticky .frame--tall {
aspect-ratio: auto;
height: var(--svc-photo);
}
.chb-w .services__list {
grid-column: 1; grid-row: 1;
padding-top: calc(var(--svc-clear) + var(--svc-photo) + var(--svc-under));
}
.chb-w .chb-extra-buttons { grid-column: 1; grid-row: 2; }
/* one photograph at the top replaces six inline ones down the list */
.chb-w .svc__thumb { display: none; }
.chb-w .svc {
grid-template-columns: minmax(0, 1fr);
gap: 7px;
padding-block: clamp(22px, 5.6vw, 32px);
}
/* line-height 1.9 was leading for a side column; on its own row it is just
an empty band between the numeral and the heading it labels */
.chb-w .svc__no { line-height: 1; opacity: .6; }
.chb-w .svc__body { gap: 10px; }
/* NOTE: the copy keeps the design's 60ch measure. A tighter cap was tried
and reverted — below ~430px the column is already narrower than 42ch so
it changed nothing on a phone, while at tablet width it bound hard and
left the right third of every service empty. */
/* which service the photograph belongs to, said three ways so it reads at a
glance while scrolling: the rule, the numeral, the title */
.chb-w .svc.is-active { border-top-color: var(--fg-gold); }
.chb-w .svc.is-active .svc__no { opacity: 1; }
}
/* A phone in landscape, or a short window: 84px of header clearance plus 30vh
of photograph would leave too little room to read by. The panel gives up
its stickiness and simply sits at the top of the section — the list then
has the whole viewport, which is the right trade at this height. The list's
reservation goes with it, or it would be padding against nothing. */
@media (max-width: 979px) and (max-height: 560px) {
.chb-w .services__media {
position: static;
grid-row: 1;
padding-top: 0;
padding-bottom: clamp(16px, 3.5vw, 24px);
background: none;
}
.chb-w .services__list { grid-row: 2; padding-top: 0; }
.chb-w .chb-extra-buttons { grid-row: 3; }
.chb-w .services__sticky .frame,
.chb-w .services__sticky .frame--tall { height: clamp(150px, 40vh, 230px); }
}
/* =========================================================================
1.4.0 REFRESH — "more interesting, still clear"
Four moves the client chose from their references (spdc.net, Craftline,
Premiere): photo service cards with a notched corner, a giant word band,
a bigger before/after with project chips, and a motion + depth layer.
Everything hidden for animation is hidden ONLY under html.chb-anim, which
the motion script adds after a clean boot — so with no JS, in QA and under
reduced motion the page is complete and still.
========================================================================= */
/* ------------------------------------------------ word-by-word chapter titles */
.chb-w .wr__w{
display: inline-block; overflow: hidden; vertical-align: top;
/* room for italic overhang and descenders, given back with the margin so
the line box does not move */
padding: 0 .1em .14em 0; margin: 0 -.1em -.14em 0;
}
.chb-w .wr__w > span{ display: inline-block; transition: transform 1.05s var(--ease-out); }
html.chb-anim .chb-w .wr:not(.is-in) .wr__w > span{ transform: translateY(112%); }
/* ------------------------------------------------------ photographs open up */
.chb-w .ir{ transition: clip-path 1.25s var(--ease-out); }
.chb-w .ir img{ transition: transform 1.5s var(--ease-out); }
html.chb-anim .chb-w .ir:not(.is-in){ clip-path: inset(12% 9% 12% 9% round 18px); }
html.chb-anim .chb-w .ir:not(.is-in) img{ transform: scale(1.18); }
/* slow drift inside project frames (desktop, fine pointer only — set by JS).
`translate`/`scale` are the individual properties, so they compose with the
hover zoom and the reveal, which both use `transform`. */
.chb-w img.drift{ scale: 1.1; translate: 0 var(--drift, 0%); }
/* ----------------------------------------------------------- SERVICE CARDS */
.chb-w .wwd-cards{
list-style: none; margin: clamp(44px, 5vw, 74px) 0 0; padding: 0;
display: grid; gap: clamp(16px, 1.8vw, 26px); grid-template-columns: 1fr;
align-items: stretch;
}
@media (min-width: 640px) { .chb-w .wwd-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .chb-w .wwd-cards{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.chb-w .wwd-card{ position: relative; min-width: 0; }
.chb-w .wwd-card__link{
/* the card always paints its own LIGHT ground, whatever the section tone,
so its text is keyed to card-local tokens rather than the tone ones */
--wwd-card-bg: var(--cream);
--wwd-card-ink: var(--ink);
--wwd-card-soft: rgba(18,18,22,.68);
--wwd-card-gold: #8a6a30;
position: relative; isolation: isolate;
display: flex; flex-direction: column; height: 100%;
padding: 10px; border-radius: 26px;
text-decoration: none !important; border: 0 !important; background: transparent !important;
color: var(--wwd-card-ink) !important;
transition: transform .7s var(--ease-out);
}
/* the card's ground is a pseudo-element so the notch can be a real cut-out
(a mask), independent of whatever colour the section behind it is */
.chb-w .wwd-card__link::before{
content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
background: var(--wwd-card-bg);
-webkit-mask: radial-gradient(circle 41px at calc(100% - 32px) calc(100% - 32px), #0000 97%, #000 100%);
mask: radial-gradient(circle 41px at calc(100% - 32px) calc(100% - 32px), #0000 97%, #000 100%);
}
.chb-w .chapter--light .wwd-card__link{ --wwd-card-bg: var(--white); }
.chb-w .chapter--light .wwd-card__link::before{ box-shadow: 0 18px 50px -24px rgba(44,32,14,.28); }
.chb-w .wwd-card__media{
display: block; position: relative; overflow: hidden; border-radius: 18px;
aspect-ratio: 3 / 4; background: var(--ink-2);
}
.chb-w .wwd-card__media img{
display: block; width: 100%; height: 100%; object-fit: cover;
transition: transform 1.2s var(--ease-out);
}
.chb-w .wwd-card__body{ display: grid; gap: 8px; padding: 18px 86px 22px 12px; }
.chb-w .wwd-card__no{
font: 600 var(--t-eyebrow)/1 var(--f-sans); letter-spacing: .22em;
color: var(--wwd-card-gold) !important;
}
.chb-w.chb-w .wwd-card__title{
margin: 0; font-family: var(--f-display); font-weight: 400;
font-size: clamp(1.35rem, 1.1rem + .9vw, 1.75rem); line-height: 1.12; letter-spacing: -.01em;
color: var(--wwd-card-ink) !important;
}
.chb-w.chb-w .wwd-card__text{
margin: 0; font-size: .94rem; line-height: 1.55; color: var(--wwd-card-soft) !important;
}
.chb-w .wwd-card__more{
position: absolute !important; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap;
}
.chb-w .wwd-card__go{
position: absolute; right: 8px; bottom: 8px; width: 48px; height: 48px;
border-radius: 50%; background: var(--gold); display: grid; place-items: center;
transition: transform .6s var(--ease-out), background-color .3s var(--ease);
}
.chb-w .wwd-card__go svg{ width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) {
.chb-w .wwd-card__link:hover{ transform: translateY(-6px); }
.chb-w .wwd-card__link:hover .wwd-card__media img{ transform: scale(1.06); }
.chb-w .wwd-card__link:hover .wwd-card__go{ transform: rotate(45deg); background: var(--gold-lt); }
}
.chb-w .wwd-card__link:focus-visible{ outline: 2px solid var(--gold); outline-offset: 4px; }
/* phones: one swipeable row with the next card peeking in, instead of a
4,000px stack of portrait photographs */
@media (max-width: 639px) {
.chb-w .wwd-cards{
grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%;
overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 10px;
scroll-padding-inline: var(--gutter); scrollbar-width: none;
}
.chb-w .wwd-cards::-webkit-scrollbar{ display: none; }
.chb-w .wwd-card{ scroll-snap-align: start; }
}
/* --------------------------------------------------------------- WORD BAND */
.chb-w .mq{
--mq-size: clamp(3.4rem, 1.6rem + 8vw, 10rem);
--mq-outline: var(--fg-gold);
--mq-solid: var(--fg);
--mq-sep: var(--gold);
padding-block: clamp(44px, 6vw, 104px); overflow: hidden;
}
.chb-w .mq__row{ overflow: hidden; white-space: nowrap; }
.chb-w .mq__row + .mq__row{ margin-top: clamp(2px, .6vw, 10px); }
.chb-w .mq__track{
display: inline-flex; align-items: center; will-change: transform;
font-family: var(--f-display); font-size: var(--mq-size); line-height: 1.08; letter-spacing: -.01em;
}
.chb-w .mq__track > span{ flex: none; margin-right: .32em; }
.chb-w .mq__row--outline .mq__word{
color: transparent !important; -webkit-text-stroke: max(1px, .012em) var(--mq-outline);
}
.chb-w .mq__row--solid .mq__word{ color: var(--mq-solid) !important; }
.chb-w .mq__sep{ color: var(--mq-sep) !important; font-family: var(--f-sans); font-weight: 200; font-size: .55em; }
/* ------------------------------------------------- BEFORE & AFTER, bigger */
.chb-w .ba__stage{ margin-top: clamp(36px, 4.4vw, 60px); }
.chb-w .ba-slider{ border-radius: clamp(16px, 2vw, 28px); }
.chb-w .ba-slider.is-active{ animation: chb-ba-in .7s var(--ease-out); }
@keyframes chb-ba-in{ from{ opacity: 0; transform: scale(.985); } to{ opacity: 1; transform: none; } }
.chb-w .ba-tag{ border-radius: 999px; padding: 9px 15px; top: 18px; }
.chb-w .ba-tag--before{ left: 18px; }
.chb-w .ba-tag--after{ right: 18px; }
.chb-w .ba-handle__grip{ width: 58px; height: 58px; }
.chb-w .ba__tabs--cards{ margin-block: 16px 0; gap: 10px; }
.chb-w .ba__tabs--cards .chip{
flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px;
min-height: 58px; padding: 10px 20px; border-radius: 14px !important;
text-transform: none; letter-spacing: 0; text-align: start;
}
.chb-w .ba__tabs--cards .chip__t{ font: 600 .74rem/1.15 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; }
.chb-w .ba__tabs--cards .chip__s{ font: 400 .78rem/1.3 var(--f-sans); letter-spacing: 0; opacity: .78; }
@media (max-width: 639px) {
.chb-w .ba__tabs--cards{
flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
}
.chb-w .ba__tabs--cards::-webkit-scrollbar{ display: none; }
.chb-w .ba__tabs--cards .chip{ flex: none; }
}
@media (prefers-reduced-motion: reduce) {
.chb-w .ba-slider.is-active{ animation: none; }
.chb-w img.drift{ scale: none; translate: none; }
.chb-w .wwd-card__link, .chb-w .wwd-card__media img, .chb-w .wwd-card__go{ transition: none; }
}
/* =========================================================================
1.4.1 MOBILE PASS — measured on the live site at 360 / 390 / 430
========================================================================= */
@media (max-width: 767px) {
/* Eyebrows, sheet numbers and the before/after tags measured 10.2–10.9px
on a phone: legible on a monitor, a squint in the hand. Raised to ~12px;
desktop is untouched. */
.chb-w { --t-eyebrow: .8rem; --t-sheet: .76rem; }
/* The form's full-width submit carried 16px caps at .13em tracking: the
label measured 293px inside a 300px button, touching both edges. */
.chb-w.chb-w form .btn--block { font-size: .84rem; letter-spacing: .12em; padding-inline: 16px; }
}
@media (max-width: 639px) {
/* Project chips share the row instead of pushing the second one off the
edge; with more than three they still scroll sideways. */
.chb-w .ba__tabs--cards .chip { flex: 1 1 0; min-width: 150px; }
.chb-w .ba__tabs--cards .chip__s { white-space: normal; }
}
@media (max-width: 767px) {
/* the Difference cards pin their own eyebrow at .64rem (10.2px) */
.chb-w .diff__card .eyebrow { font-size: .74rem; }
}
@media (max-width: 1024px) and (hover: none) {
/* Footer links sat on a 35px pitch, so each 44px touch overlay reached
into its neighbour and a tap near the edge could open the wrong page.
A 20px gap gives every link a full 44px of its own. */
.chb-w .footer__col ul { gap: 20px; }
}
@media (max-width: 767px) {
/* The site's two floating icons (footer template, sticky bottom) parked
over the last line of the page — Privacy Policy and Accessibility could
not be tapped. The bar keeps a clear strip below it for them. */
.chb-w .footer__bar { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 1024px) and (hover: none) {
.chb-w .footer__legal a { position: relative; }
.chb-w .footer__legal a::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.chb-w .footer__legal { row-gap: 26px; }
}
/* The footer template's sticky icons stayed on top of the open mobile menu,
over its contact lines. They step aside while the menu is open. */
html.chb-menu-open .elementor-sticky--active { visibility: hidden; }
@media (max-width: 767px) {
/* The closer's photograph is 16:9, but on a phone the section is a tall
portrait box, so `cover` kept only a narrow darkened slice of it (a cabinet
edge). On phones it sits whole at the top of the section, at its own
ratio, and fades into the ground behind the text. */
.chb-w .closer { background: var(--ink); padding-top: clamp(150px, 44vw, 210px); min-height: 0; align-items: start; }
.chb-w .closer__ground { inset: 0 0 auto 0; aspect-ratio: 16 / 9; height: auto; }
.chb-w .closer__ground img { opacity: .9; }
.chb-w .closer__ground::after {
background: linear-gradient(180deg, rgba(6,6,7,.18) 0%, rgba(6,6,7,.42) 55%, var(--ink) 100%);
}
}