/* =========================================================================
   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.
   ========================================================================= */

:root{
  /* ---------- 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);
  --on-light-faint: rgba(18,18,22,.42);

  /* 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) {
  :root{ --dur: .001s; --dur-slow: .001s; }
}

/* ===== 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,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.36'/></svg>");
}
.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(--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. */


/* ---------------------------------------------------------- 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(--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(--gold); }
.chb-w .chapter--light .accent{ color: var(--gold-ink); }

.chb-w .lead{
  font-size: var(--t-lead); line-height: 1.68;
  color: var(--on-dark-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(--on-dark-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(--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(--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(--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(--on-dark-faint);
  letter-spacing: .04em;
}
.chb-w .chapter--light .caption{ color: var(--on-light-faint); }
.chb-w .caption b{ font-weight: 600; color: var(--on-dark); 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(--line-dark-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; }
.chb-w .footer__brand .brand{ pointer-events: none; }
.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(--on-dark-faint);
}
.chb-w .chapter--light .field > label, .chb-w .chapter--light .field-label{ color: var(--on-light-faint); }
.chb-w .field .req{ color: var(--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(--line-dark);
  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(--on-dark-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(--line-dark); border-radius: var(--radius);
  color: var(--on-dark-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(--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(--on-dark-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(--line-dark);
  border-block: 1px solid var(--line-dark);
  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(--black); 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(--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(--on-dark-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(--on-dark-soft); }

.chb-w .finance{
  margin-top: clamp(40px, 5vw, 68px); padding: clamp(26px, 3.2vw, 44px);
  border: 1px solid var(--line-dark); 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(--on-dark-soft); max-width: 74ch; 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(--on-dark-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(--on-dark-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(--on-dark-faint);
}
.chb-w .hero__plate figcaption b{ font-weight: 600; color: var(--on-dark); }

.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(--on-dark-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(--on-light);
  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(--line-light) !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(--on-light-soft) !important;
  transition: color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.chb-w .chip:hover{ color: var(--on-light) !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(--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(--on-light-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(--line-dark);
  transition: border-color .4s var(--ease);
}
.chb-w .svc:last-child{ border-bottom: 1px solid var(--line-dark); }
.chb-w .svc__no{
  font: 500 var(--t-sheet)/1.9 var(--f-sans); letter-spacing: var(--ls-sheet);
  color: var(--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(--on-dark-soft); max-width: 60ch; }
.chb-w .svc.is-active .svc__no{ opacity: 1; }
.chb-w .svc.is-active h3{ color: var(--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(--on-dark-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(--on-dark-faint); }
.chb-w .consult__direct a{ color: var(--gold); border-bottom: 1px solid currentColor; }

.chb-w .consult__form{
  padding: clamp(24px, 3.4vw, 42px);
  border: 1px solid var(--line-dark);
  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(--on-light); }

.chb-w .diff__grid{ display: grid; gap: 1px; background: var(--line-light); border: 1px solid var(--line-light); }
@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(--cream);
  isolation: isolate; overflow: hidden;
}
.chb-w .diff__no{
  font: 500 var(--t-sheet)/1 var(--f-sans); letter-spacing: var(--ls-sheet);
  color: var(--gold-ink); 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(--on-light-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(--on-dark-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(--on-dark-faint);
  letter-spacing: .04em;
}
.chb-w .work__meta .arw{
  grid-area: a; color: var(--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(--line-light);
}
.chb-w .step:last-child{ border-bottom: 1px solid var(--line-light); }
@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(--gold-ink); opacity: .5;
}
.chb-w .step h3{ margin-bottom: 10px; }
.chb-w .step p{ color: var(--on-light-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(--on-light);
}
.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; }
.chb-w .qa{ border-top: 1px solid var(--line-light); }
.chb-w .qa:last-child{ border-bottom: 1px solid var(--line-light); }
.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(--on-light);
  transition: color .3s var(--ease);
}
.chb-w .qa summary::-webkit-details-marker{ display: none; }
.chb-w .qa summary:hover{ color: var(--gold-ink); }
.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(--gold-ink); 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(--on-light-soft); max-width: 68ch; font-size: var(--t-small);
}

/* ------------------------------------------------------------- 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; }

/* ===== pages.css ===== */
/* =========================================================================
   CAPITAL HOME BUILDERS — inner pages
   Projects · About · Contact · Thank You · 404
   ========================================================================= */

/* ------------------------------------------------------------- page hero */









/* 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(--on-dark-faint);
}
.chb-w .crumb a:hover{ color: var(--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(--line-light);
}
.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(--on-light-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(--gold-ink); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease-out);
}
.chb-w .filter__btn:hover{ color: var(--on-light) !important; }
.chb-w .filter__btn.is-active{ color: var(--on-light) !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(--on-light-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(--on-light-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(--gold-ink);
}
.chb-w .pcard h3{ font-size: clamp(1.4rem, 2.4vw, 2.2rem); }
.chb-w .pcard__loc{ font-size: var(--t-small); color: var(--on-light-faint); letter-spacing: .04em; }
.chb-w .pcard__desc{ color: var(--on-light-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(--gold-ink) !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(--on-dark);
  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(--line-light); border-radius: 999px;
  color: var(--on-light-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(--line-light); border: 1px solid var(--line-light);
  margin-top: clamp(38px, 4.6vw, 64px); }
@media (min-width: 700px)  { .chb-w .beliefs{ grid-template-columns: 1fr 1fr; } }
.chb-w .belief{
  background: var(--cream); 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(--on-light-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(--line-light);
  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(--line-light); 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(--gold-ink);
}
.chb-w .contact__block a, .chb-w .contact__block address{ font-style: normal; color: var(--on-light-soft); font-size: var(--t-body); }
.chb-w .contact__block a:hover{ color: var(--gold-ink); }
.chb-w .contact__frame{ margin: 0; }

.chb-w .nextsteps{ display: grid; gap: 1px; background: var(--line-light);
  border: 1px solid var(--line-light); margin-top: clamp(44px, 5vw, 76px); }
@media (min-width: 760px) { .chb-w .nextsteps{ grid-template-columns: repeat(3, 1fr); } }
.chb-w .nextstep{ background: var(--cream); 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(--gold-ink); opacity: .6; line-height: 1;
}
.chb-w .nextstep h3{ font-size: clamp(1.05rem, 1.5vw, 1.25rem); }
.chb-w .nextstep p{ color: var(--on-light-soft); font-size: var(--t-small); }

.chb-w .map{
  margin-top: clamp(44px, 5vw, 74px);
  border: 1px solid var(--line-light); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--cream-2);
}
.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; }


/* =========================================================================
   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.
   ========================================================================= */
.chb-w a,
.chb-w a:link, .chb-w a:visited, .chb-w a:hover,
.chb-w a:focus, .chb-w a:active {
  /* !important on BOTH colour and border: Hello Elementor sets
     `color:#cc3366!important` and `border:1px solid #cc3366!important` on every
     <a>, 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;
}
/* 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(--ink) !important; }
.chb-w .chb-btn--ghost-dark:hover, .chb-w .btn--ghost-dark:hover { color: var(--cream) !important; }
.chb-w .chip.is-active, .chb-w .filter__btn.is-active { color: var(--ink) !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;
}

/* Elementor sets a font-family on the widget wrapper and our text would
   otherwise inherit the theme's font instead of the brand's. */
.chb-w, .chb-w p, .chb-w li, .chb-w a, .chb-w span, .chb-w button,
.chb-w input, .chb-w select, .chb-w textarea, .chb-w label {
  font-family: var(--f-sans);
}
.chb-w h1, .chb-w h2, .chb-w h3, .chb-w .chb-title, .chb-w .display,
.chb-w .menu__list a, .chb-w .qa summary, .chb-w .step__no, .chb-w .stats__grid b {
  font-family: var(--f-display);
}

/* =========================================================================
   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 <html> 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; }

/* 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; }
.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; }

/* =========================================================================
   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,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.36'/></svg>");
}
.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; }
  .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%; }
}
/* 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; }
}