@layer components {
/* ===================================================================
   Clever Builds — site stylesheet
   Visual DNA inherited from the Clever Tiny Homes Figma reference:
   vivid purple + cyan + yellow, bold geometric sans, big typographic
   moments, full-bleed dark sections, generous rounded cards.
   =================================================================== */

:root {
  /* ----- core palette -----
     Neutrals and accents are the Clever Tiny Homes ramp. CTH is the visual
     template for both sites, so every value below is one CTH renders today. */
  --purple:        #8C52FF;
  --purple-deep:   #6B33E0;
  --purple-soft:   #C5A8FF;
  --purple-tint:   #EFE6FF;
  /* Cyan Soft — the muted cyan CTH sets on near-black for links, marks and
     the secondary "cyan" button. It is a surface/accent colour, never body
     text on white. */
  --cyan:          #5CE1E6;
  /* Clever Cyan — the electric end of the signature gradient. */
  --cyan-deep:     #00D9FF;
  --cyan-soft:     #C9F4F6;
  --yellow:        #FFE100;
  --sky:           #72B9EE;

  /* Text neutrals */
  --ink:           #111111;
  --ink-2:         #222222;
  --ink-3:         #444444;
  --muted:         #666666;
  --rule:          #EEEEEE;

  /* Surfaces. CTH has exactly three: white, the #EEEEEE band, and the
     #1A1A1A dark band. --cream, --stone and --paper-2 were Clever Builds
     inventions; they stay as aliases so existing markup keeps working, but
     they now render as one of CTH's three surfaces. */
  --paper:         #FFFFFF;
  --band:          #EEEEEE;
  --surface-dark:  #1A1A1A;
  --paper-2:       #FFFFFF;
  --cream:         #EEEEEE;
  --stone:         #EEEEEE;

  --ok:    #2E9C5C;
  --warn:  #C97B3C;
  --err:   #B23A48;

  /* ----- gradients -----
     One signature gradient, left to right, purple to Clever Cyan. This is
     the exact declaration CTH's button_component and navbar CTA emit. */
  --grad-pc:  linear-gradient(90deg, #8C52FF 0%, #00D9FF 100%);
  --grad-pc-soft: linear-gradient(90deg, #C5A8FF 0%, #C9F4F6 100%);
  --grad-pc-radial: radial-gradient(120% 80% at 0% 0%, #A375FF 0%, #8C52FF 35%, #00D9FF 95%);

  /* Text sitting on a bright gradient band. CTH runs white copy straight on
     the band with no scrim, so Clever Builds does the same and buys the
     contrast back with a shadow instead of a darker gradient. Small print on
     a band is also raised to 15px and set in solid white. */
  --band-text-shadow: 0 1px 3px rgba(0,0,0,0.30), 0 2px 14px rgba(0,0,0,0.22);

  /* ----- type -----
     --display is the stack CTH's `font-nobeluno` utility emits.
     --nav-font is the stack CTH's `font-blauernue` utility emits; CTH uses it
     for navigation links and testimonial copy.
     --body is what CTH body copy actually resolves to. CTH's <body> carries a
     `font-roboto` class, but no Tailwind utility and no @font-face defines it,
     so the class is inert and running text falls through to Tailwind's default
     sans stack. Repeating that stack here makes Clever Builds render the same
     body face as Clever Tiny Homes on every platform. */
  --display:  "Nobel Uno", ui-sans-serif, system-ui, sans-serif;
  --nav-font: "Blauer Nue", ui-sans-serif, system-ui, sans-serif;
  --body:     ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  /* ----- radii + shadow -----
     CTH uses 10px almost everywhere, 5px on small chrome, 20px on a big panel. */
  --r-sm: 5px;
  --r:    10px;
  --r-lg: 10px;
  --r-xl: 20px;
  --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.04);
  --sh-2: 0 6px 24px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  --sh-3: 0 18px 60px rgba(26,26,26,.18), 0 4px 12px rgba(26,26,26,.08);

  /* ----- layout ----- */
  --maxw:  1280px;
  --gutter: clamp(20px, 4vw, 64px);
}

/* ===================================================================
   Reset + base — SCOPED to .brand-cb so these rules ONLY apply on
   Clever Builds pages. The CTH layout shares this stylesheet because
   `stylesheet_link_tag :app` globs every CSS file in app/assets/, so
   without scoping the typography/element rules below would override
   CTH defaults (and previously turned the THOW hero h1 from white to
   black). `.brand-cb` is set on <body> by `app/views/layouts/clever_builds.html.erb`.
   =================================================================== */
.brand-cb, .brand-cb *, .brand-cb *::before, .brand-cb *::after { box-sizing: border-box; }
.brand-cb { margin: 0; padding: 0; overflow-x: clip; }
/* The mobile drawer is `position: fixed` and parks itself at translateX(100%),
   one viewport width to the right. A fixed element's containing block is the
   viewport, so `overflow-x: clip` on <body> above cannot clip it, and the root
   grows a horizontal scroll area on every Clever Builds page. Clip the root as
   well. `clip` (not `hidden`) keeps the root a non-scroll container, so
   `position: sticky` on the navbar still works. */
html:has(body.brand-cb) { overflow-x: clip; }
.brand-cb {
  font-family: var(--body);
  /* CTH steps running text from 16px on mobile to 20px on desktop and sets
     leading-[1.5]. 16px is the base both sites share. */
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.brand-cb img, .brand-cb svg, .brand-cb video { display: block; max-width: 100%; }
.brand-cb button { font: inherit; color: inherit; cursor: pointer; }
.brand-cb a { color: inherit; text-decoration: none; }
.brand-cb input, .brand-cb textarea, .brand-cb select { font: inherit; color: inherit; }

/* ===================================================================
   Typography — matched to what Clever Tiny Homes renders.

   CTH's section_title helper emits `font-nobeluno leading-[1.2]` with no
   weight and no tracking class, so a section heading is Nobel Uno 400 at
   line-height 1.2 with normal letter-spacing. Its hero_section helper adds
   `font-semibold`, so a hero H1 is 600. Sizes are CTH's own steps: 32px
   mobile to 55px desktop for a section title, 40 to 64 for a hero.

   Clever Builds used to run weight 500, tracking down to -0.03em, leading
   1.02 and sizes up to 88px. That is the single biggest reason the two
   sites did not look related. It is gone.

   Scoped to .brand-cb so CTH heading defaults remain intact.
   =================================================================== */
.brand-cb .display,
.brand-cb h1, .brand-cb h2, .brand-cb h3, .brand-cb h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: normal;
  margin: 0;
  text-wrap: balance;
  color: var(--ink);
}
.brand-cb h1, .brand-cb .h1 { font-size: clamp(36px, 5vw, 64px); font-weight: 600; }
.brand-cb h2, .brand-cb .h2 { font-size: clamp(32px, 4vw, 55px); font-weight: 400; }
.brand-cb h3, .brand-cb .h3 { font-size: clamp(24px, 2.5vw, 32px); font-weight: 400; }
.brand-cb h4, .brand-cb .h4 { font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; }

/* Eyebrow — CTH's section_tagline. A 25px hairline in #d9d9d9, a 10px gap,
   then uppercase Nobel Uno at 14px on a phone and 20px on desktop, with no
   extra tracking, in the same colour as the copy it introduces. */
.eyebrow {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 10px;
}
@media (min-width: 1024px) {
  .eyebrow { font-size: 20px; }
}
.eyebrow::before {
  content: ""; display: inline-block; flex-shrink: 0;
  width: 25px; height: 1px; background: #d9d9d9;
}
.eyebrow.on-dark { color: #fff; }
.eyebrow.on-dark::before { background: #fff; }

.lead {
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.5;
  color: var(--ink-3);
  text-wrap: pretty;
  font-weight: 400;
}
.lead.on-dark { color: #fff; }

.tabular { font-variant-numeric: tabular-nums; }
.serif-feel { font-family: var(--display); font-weight: 600; }

/* ===================================================================
   Layout
   =================================================================== */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: clamp(64px, 9vw, 140px); }
.section--tight { padding-block: clamp(40px, 6vw, 80px); }
.section--dark { background: var(--surface-dark); color: #fff; }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
/* White / paper cards inside dark sections should render dark text by default.
   --cream and --stone joined this list when they stopped being off-white and
   became the #EEEEEE band grey; a card on either is now as light as a white
   one, so white text on it would vanish the same way. */
.section--dark [style*="background: #fff"],
.section--dark [style*="background:#fff"],
.section--dark [style*="background: white"],
.section--dark [style*="background: var(--paper-2)"],
.section--dark [style*="background:var(--paper-2)"],
.section--dark [style*="background: var(--paper)"],
.section--dark [style*="background:var(--paper)"],
.section--dark [style*="background: var(--cream)"],
.section--dark [style*="background:var(--cream)"],
.section--dark [style*="background: var(--stone)"],
.section--dark [style*="background:var(--stone)"],
.section--dark [style*="background: var(--band)"],
.section--dark [style*="background:var(--band)"] { color: var(--ink); }
/* The rule above recolours the card's own text, but
   `.section--dark h1..h4 { color: #fff }` still wins for headings inside it,
   so a card heading on a light panel rendered white on near-white (the
   "Five steps" process cards on /products/single-story-adu). `:is()` takes
   the specificity of its heaviest argument, which lifts this to (0,2,1). */
.section--dark :is(
  [style*="background: #fff"],
  [style*="background:#fff"],
  [style*="background: white"],
  [style*="background: var(--paper-2)"],
  [style*="background:var(--paper-2)"],
  [style*="background: var(--paper)"],
  [style*="background:var(--paper)"],
  [style*="background: var(--cream)"],
  [style*="background:var(--cream)"],
  [style*="background: var(--stone)"],
  [style*="background:var(--stone)"],
  [style*="background: var(--band)"],
  [style*="background:var(--band)"]
) :is(h1, h2, h3, h4) { color: var(--ink); }
/* CTH alternates white with one band grey, #EEEEEE. These three class names
   are kept so existing markup keeps working, but all three now paint a CTH
   surface: --cream and --stone are #EEEEEE, --paper-2 is white. */
.section--cream { background: var(--cream); }
.section--stone { background: var(--stone); }
.section--paper2 { background: var(--paper-2); }
.section--purple {
  background: var(--grad-pc);
  color: #fff;
}
.section--purple h1, .section--purple h2, .section--purple h3 { color: #fff; }

/* ===================================================================
   Text on a bright gradient band
   ───────────────────────────────────────────────────────────────────
   CTH runs white copy straight on the purple-to-cyan band with no scrim.
   Clever Builds now does the same, so the band keeps CTH's look. Contrast
   comes back three ways instead of from a darker gradient:

     1. every band gets the shadow below, which lifts white type off the
        light cyan end of the gradient;
     2. small print on a band is raised to at least 15px and set in solid
        white, not white at 70 or 80 per cent;
     3. anything that has to stay small — the law chips on the home stat
        band — sits on its own dark pill.

   Buttons, inputs and chips carry their own surface, so they opt out.
   =================================================================== */
.brand-cb :is(.section--purple, .stat-band, .gstat-band, .partnership, .nav__mega-feature, .mobile-cta) {
  text-shadow: var(--band-text-shadow);
}
.brand-cb :is(.section--purple, .stat-band, .gstat-band, .partnership, .nav__mega-feature, .mobile-cta)
  :is(.btn, .chip, input, select, textarea, .card, .tile, .stat-band__law) {
  text-shadow: none;
}

/* Dark copy keeps the full CTH gradient readable, including its cyan end. */
.brand-cb .cb-final-cta,
.brand-cb .cb-final-cta h2,
.brand-cb .cb-final-cta .lead {
  color: #111;
  text-shadow: none;
}

.divider { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* ===================================================================
   Buttons
   =================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 26px;
  border-radius: 10px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.005em;
  border: 1.5px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { opacity: 0.9; transform: scale(1.02); }
.btn:active { transform: scale(0.98); }
.btn .arrow { transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* CTH primary button: purple→cyan gradient, Nobel Uno bold, rounded-[10px] */
.btn--primary {
  background: linear-gradient(90deg, #8c52ff 0%, #00D9FF 100%);
  color: #fff;
  box-shadow: 0 6px 22px rgba(140,82,255,0.25);
}
.btn--primary:hover { box-shadow: 0 10px 32px rgba(140,82,255,0.45); }

.btn--gradient {
  background: linear-gradient(90deg, #8c52ff 0%, #00D9FF 100%);
  color: #fff;
  box-shadow: 0 6px 22px rgba(140,82,255,0.35);
}
.btn--gradient:hover { box-shadow: 0 10px 32px rgba(140,82,255,0.5); }

/* CTH secondary button: dark ink */
.btn--solid-purple,
.btn--secondary {
  background: #222222; color: #fff; border-radius: 10px;
}
.btn--solid-purple:hover,
.btn--secondary:hover { background: #000; }

.btn--ghost-dark {
  background: transparent; color: var(--ink); border-color: var(--ink);
}
.btn--ghost-dark:hover { background: var(--ink); color: #fff; }

.btn--ghost-light {
  background: transparent; color: #fff; border: 3px dashed rgba(255,255,255,0.85);
}
.btn--ghost-light:hover { background: rgba(255,255,255,0.1); border-color: #fff; }

.btn--cyan {
  background: var(--cyan); color: var(--ink);
}
.btn--cyan:hover { background: var(--cyan-deep); }

.btn--sm { height: 40px; padding: 0 18px; font-size: 14px; }
.btn--lg { height: 60px; padding: 0 32px; font-size: 18px; }

/* `.btn` is `white-space: nowrap` with a fixed height, so a long label such as
   "Get a personalized feasibility" could not shrink and ran past the right edge
   on a phone. Below 560px let the label wrap and let the button grow taller
   instead of wider. */
@media (max-width: 560px) {
  .brand-cb .btn {
    white-space: normal;
    text-align: center;
    height: auto;
    min-height: 52px;
    padding-block: 12px;
    max-width: 100%;
  }
  .brand-cb .btn--sm { min-height: 40px; padding-block: 8px; }
  .brand-cb .btn--lg { min-height: 60px; padding-block: 14px; }
}

/* The reset above sets `.brand-cb a { color: inherit }` and
   `.brand-cb button { color: inherit }`. Both score (0,1,1), which outranks
   every unscoped `.btn--*` rule above at (0,1,0). Anchor and button elements
   therefore took the surrounding text colour instead of their own: white
   "Get a Quote" turned near-black on the purple gradient, and
   "Explore the Clever 2F" rendered #0B0B0F on #222 (1.2:1).
   Re-state each variant's colour at (0,2,0) so it wins. */
.brand-cb .btn--primary,
.brand-cb .btn--gradient,
.brand-cb .btn--solid-purple,
.brand-cb .btn--secondary,
.brand-cb .btn--ghost-light { color: #fff; }
.brand-cb .btn--ghost-dark,
.brand-cb .btn--cyan { color: var(--ink); }
.brand-cb .btn--ghost-dark:hover { color: #fff; }

/* Clever Purple measures 4.41:1 on white and 3.66:1 on Purple Tint. Both sit
   under the 4.5:1 floor for text at body size, so anywhere purple has to
   CARRY small text it becomes Purple Deep (#6B33E0, 6.61:1 on white) — the
   substitute DESIGN.md names for exactly this. Re-pointing --purple on these
   elements also fixes the chips, which set `color: var(--purple)` inline: a
   custom property still cascades, so the inline var() reads the new value.
   The brand purple is untouched for surfaces, gradients and display type. */
.brand-cb .link,
.brand-cb .chip,
.brand-cb .process__time,
.brand-cb .hero__lead-only,
.brand-cb .law-status,
.brand-cb .law-card__new,
.brand-cb .pip { --purple: #6B33E0; }

.link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--purple);
  font-weight: 600;
  font-size: 15px;
  border-bottom: 1.5px solid transparent;
  padding-bottom: 2px;
  transition: border-color .2s ease, transform .2s ease;
}
.link:hover { border-color: var(--purple); }
/* `.brand-cb a { color: inherit }` in the reset scores (0,1,1) and outranked
   `.link` at (0,1,0), so inline links rendered in the surrounding body colour
   with no underline — indistinguishable from plain text. Re-state the colours
   at (0,2,0). */
.brand-cb .link { color: var(--purple); }
.brand-cb .link:hover { border-color: var(--purple); }
.brand-cb .link.on-dark { color: var(--cyan); }
.brand-cb .link.on-dark:hover { border-color: var(--cyan); }
.link .arrow { transition: transform .2s ease; }
.link:hover .arrow { transform: translateX(4px); }
.link.on-dark { color: var(--cyan); }
.link.on-dark:hover { border-color: var(--cyan); }

/* ===================================================================
   Navigation
   =================================================================== */
/* CTH's navbar is dark: a solid #1A1A1A bar on pages without a hero photo,
   white Blauer Nue links at 15px, dropdown panels on 90% black at 10px, and a
   gradient call to action closing the row. Clever Builds used to be a 92%
   white bar with a blur, which is what made the two sites read as different
   products at first glance. It is now the same dark bar. */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--surface-dark);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nav__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  height: 76px;
}
/* CTH sets a white wordmark on the dark bar. Clever Builds has no white logo
   file, so the inline mark keeps its white stroke and sits in a translucent
   white tile, and the wordmark beside it turns white. */
.nav__logo {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: normal;
  color: #fff;
  white-space: nowrap;
}
.nav__logo-mark {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.14); color: #fff;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
.nav__logo-mark svg { width: 22px; height: 22px; }
/* `.brand-cb a { color: inherit }` in the reset scores (0,1,1) and outranks
   `.nav__logo` at (0,1,0), so the wordmark took the page colour and rendered
   near-black on the near-black bar. Re-state it at (0,2,0). */
.brand-cb .nav__logo { color: #fff; }
.brand-cb .nav__burger { color: #fff; }
.nav__links {
  display: flex; align-items: center; gap: 8px;
  list-style: none; padding: 0; margin: 0;
}
/* Scoped to `.brand-cb` on purpose. The two mega-menu toggles are <button>
   elements, and the reset `.brand-cb button { font: inherit; color: inherit }`
   scores (0,1,1) — it beat the unscoped `.nav__link` at (0,1,0) and reset the
   toggles to 17px/400 while the sibling <a> links stayed 15px/500. Scoping
   lifts these to (0,2,0) so buttons and links render identically. */
.brand-cb .nav__link {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 10px 14px;
  border-radius: 10px;
  font-family: var(--nav-font);
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.brand-cb .nav__link:hover { background: rgba(255,255,255,0.10); color: #fff; opacity: 0.85; }
.brand-cb .nav__link.is-active { color: #fff; background: rgba(255,255,255,0.14); }

/* Generic tab buttons (cb-tabs) */
.cb-tab-btn { transition: background .15s ease, color .15s ease, box-shadow .15s ease; }
.cb-tab-btn:hover { color: var(--ink); }
button.cb-tab-btn.is-active {
  background: #fff !important;
  color: var(--ink) !important;
  box-shadow: 0 1px 2px rgba(26,26,26,0.06), 0 2px 6px rgba(26,26,26,0.06);
}

.nav__cta { display: flex; align-items: center; gap: 12px; }
.nav__burger {
  display: none;
  width: 44px; height: 44px;
  border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,0.55);
  background: transparent;
  color: #fff;
  align-items: center; justify-content: center;
}
.nav__burger svg { width: 22px; height: 22px; }

/* CTH opens its dropdowns on a 90% black panel at 10px radius with white
   links. The mega panel is full-bleed rather than a small card, so it keeps
   square top corners against the bar and rounds its bottom two. */
.nav__mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: rgba(0,0,0,0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.45);
  overflow: hidden;
  max-height: 0;
  /* `max-height: 0` + `overflow: hidden` hides the panel visually but leaves
     every link in the tab order, so keyboard users tabbed into an invisible
     menu. `visibility: hidden` takes them out; the delayed transition keeps
     the open/close slide intact. */
  visibility: hidden;
  transition: max-height .25s ease, visibility 0s linear .25s;
}
.nav__mega.is-open {
  max-height: 520px;
  visibility: visible;
  transition: max-height .25s ease, visibility 0s linear 0s;
}
.nav__mega-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 36px 0;
}
.nav__mega h4 {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin: 0 0 14px;
  font-family: var(--nav-font);
}
.nav__mega ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.brand-cb .nav__mega a { font-family: var(--nav-font); font-size: 15px; color: #fff; font-weight: 400; }
.brand-cb .nav__mega a:hover { color: #fff; opacity: 0.75; }
/* Supporting line under a mega-menu link. It used to be an inline
   `color: var(--muted)` — #666666, which reads at 3.2:1 on the 90% black
   panel. White at 78% clears 4.5:1. */
.nav__mega-desc {
  font-family: var(--nav-font);
  font-size: 13px;
  margin-top: 2px;
  color: rgba(255,255,255,0.78);
}
.nav__mega-feature {
  background: var(--grad-pc);
  border-radius: 10px;
  padding: 24px;
  color: #fff;
  display: flex; flex-direction: column; gap: 12px;
}
.nav__mega-feature h3 { color: #fff; font-size: 24px; }
.nav__mega-feature p { color: #fff; font-size: 15px; margin: 0; }
/* --cyan on the cyan end of the card gradient reads at 2.9:1 */
.nav__mega-feature .link.on-dark { color: #fff; }
.nav__mega-feature .link.on-dark:hover { border-color: #fff; }

@media (max-width: 1023px) {
  .nav__links, .nav__cta .btn { display: none; }
  .nav__burger { display: inline-flex; }
}

/* mobile drawer */
/* CTH's phone menu is a near-black panel with white links. */
.mobile-drawer {
  position: fixed; inset: 0; z-index: 100;
  background: var(--surface-dark);
  color: #fff;
  padding: 24px;
  display: flex; flex-direction: column; gap: 20px;
  transform: translateX(100%);
  transition: transform .3s ease, visibility 0s linear .3s;
  overflow-y: auto;
  visibility: hidden;
}
.mobile-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform .3s ease, visibility 0s linear 0s;
}
.mobile-drawer__row {
  display: flex; align-items: center; justify-content: space-between;
}
.mobile-drawer__group { display: flex; flex-direction: column; gap: 8px; }
.mobile-drawer__group h4 {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin: 16px 0 4px;
  font-family: var(--nav-font);
}
.brand-cb .mobile-drawer a {
  font-family: var(--nav-font);
  font-size: 16px; font-weight: 400; padding: 10px 0;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
/* The drawer's own call to action keeps its gradient fill and Nobel Uno. */
.brand-cb .mobile-drawer a.btn {
  font-family: var(--display); font-weight: 700; font-size: 16px;
  border-bottom: 0;
}
.brand-cb .mobile-drawer .nav__logo { border-bottom: 0; }

/* ===================================================================
   Footer
   =================================================================== */
.cross-link {
  background: var(--cream);
  text-align: center;
  padding: 28px 24px;
  font-size: 16px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
/* Purple on the #EEEEEE band reads 3.8:1; Purple Deep reads 5.7:1. */
.brand-cb .cross-link a { color: var(--purple-deep); font-weight: 600; border-bottom: 1.5px solid var(--purple-deep); padding-bottom: 1px; }

.footer { background: var(--surface-dark); color: #fff; padding: 80px 0 36px; }
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 48px;
  align-items: start;
}
.footer__brand h3 {
  color: #fff; font-size: 28px; margin-bottom: 16px;
  font-family: var(--display); font-weight: 700;
  letter-spacing: normal;
}
.footer__brand p { color: rgba(255,255,255,0.65); font-size: 15px; max-width: 30ch; }
.footer__col h4 {
  font-family: var(--body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 18px;
}
.footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer__col a { color: rgba(255,255,255,0.85); font-size: 15px; }
.footer__col a:hover { color: var(--cyan); }
.footer__newsletter {
  margin-top: 28px;
  display: flex; gap: 8px; max-width: 380px;
}
.footer__newsletter input {
  /* min-width: 0 lets the field shrink past its intrinsic size on narrow
     phones instead of forcing the footer column wider than the screen. */
  flex: 1; min-width: 0; height: 46px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  padding: 0 14px;
  color: #fff;
}
.footer__newsletter input::placeholder { color: rgba(255,255,255,0.5); }
.footer__bottom {
  margin-top: 64px; padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px;
  color: rgba(255,255,255,0.55); font-size: 14px;
}
.footer__social { display: flex; gap: 12px; }
.footer__social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  display: grid; place-items: center;
}
.footer__social a:hover { background: var(--purple); border-color: var(--purple); }
.footer__social svg { width: 16px; height: 16px; }
/* Privacy Policy / Terms of Service, sitting on the copyright line. `.brand-cb a`
   strips link color and underline, so both are restored here. */
.footer__legal { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-left: 8px; }
.footer__legal a { color: rgba(255,255,255,0.72); text-decoration: underline; text-underline-offset: 2px; }
.footer__legal a:hover { color: #fff; }

/* `1fr` is `minmax(auto, 1fr)`, so the track grows to the min-content width of
   .footer__brand — 380px, set by the newsletter input's intrinsic size. At
   390px that pushed the whole footer past the right edge. `minmax(0, 1fr)`
   lets the track shrink to the container. */
@media (max-width: 900px) {
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}
@media (max-width: 600px) {
  .footer__top { grid-template-columns: minmax(0, 1fr); }
}

/* ===================================================================
   Cards
   =================================================================== */
/* Fixed-ratio image band at the top of a card.
   The wrapper used to carry `aspect-ratio: 16/10` as an inline style. Inside
   a column flex card that is not enough: a flex item's automatic minimum
   height is its content's height, so a portrait photo stretched the band to
   629px instead of 236px and pushed the card text far down. `min-height: 0`
   lets the aspect ratio win; `overflow: hidden` crops the photo. */
.cb-card-media {
  position: relative;   /* badges and play buttons sit on top of the photo */
  aspect-ratio: 16 / 10;
  background: var(--stone);
  min-height: 0;
  overflow: hidden;
}
.cb-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Founder callout on /contact: avatar, copy, and a call-to-action on one row.
   At 390px three items in a row leave the copy about 80px wide and it breaks
   to one word per line, so below 560px the card stacks instead. */
.cb-founder-card {
  background: var(--surface-dark); color: #fff;
  padding: 24px; border-radius: 10px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.cb-founder-card__copy { flex: 1; min-width: 0; }
@media (max-width: 560px) {
  .cb-founder-card { flex-direction: column; align-items: flex-start; }
  .cb-founder-card__copy { width: 100%; }
}

.card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 28px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }

.tile {
  display: flex; flex-direction: column; gap: 12px;
  padding: 28px;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--rule);
  text-align: left;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--purple); }
.tile__icon {
  width: 48px; height: 48px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: var(--purple-tint); color: var(--purple);
}
.tile__icon svg { width: 22px; height: 22px; }

/* product cards (Figma style: dark band, purple buttons) */
.product-card {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 20px;
  align-items: center;
  background: var(--surface-dark);
  color: #fff;
  padding: 14px 14px 14px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform .15s ease, border-color .2s ease;
}
.product-card:hover { transform: translateY(-2px); border-color: var(--purple); }
.product-card__thumb {
  width: 90px; height: 64px; border-radius: 5px;
  background: #1B1B22 center/cover no-repeat;
}
.product-card h4 { color: #fff; font-size: 18px; margin: 0 0 2px; font-family: var(--display); font-weight: 700; }
.product-card p { color: rgba(255,255,255,0.6); font-size: 13px; margin: 0; }
.product-card .btn { background: var(--purple); color: #fff; height: 38px; padding: 0 16px; font-size: 13px; border-radius: var(--r-pill); }

/* ===================================================================
   Stat band (homepage section 2)
   =================================================================== */
.stat-band {
  background: var(--grad-pc);
  color: #fff;
  border-radius: 0;
  padding: 64px 0;
}
.stat-band__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  align-items: stretch;
}
.stat-band__cell {
  padding: 24px 32px;
  display: flex; flex-direction: column; gap: 12px;
}
.stat-band__cell + .stat-band__cell { border-left: 1px solid rgba(255,255,255,0.25); }
.stat-band__num {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(48px, 6vw, 80px);
  line-height: 1.1;
  letter-spacing: normal;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.stat-band__cap { color: #fff; font-size: 16px; max-width: 24ch; }

@media (max-width: 760px) {
  .stat-band__grid { grid-template-columns: 1fr; }
  .stat-band__cell + .stat-band__cell { border-left: 0; border-top: 1px solid rgba(255,255,255,0.25); }
}

/* ===================================================================
   Press strip
   =================================================================== */
.press {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 40px 64px;
}
.press img {
  height: 48px; max-width: 160px; object-fit: contain;
  /* Source PNGs are white-on-transparent; invert so they read on light bg */
  filter: invert(1) grayscale(1) brightness(0.45);
  opacity: 0.85;
  transition: opacity .2s ease, filter .2s ease;
}
.press img:hover { opacity: 1; filter: invert(1) grayscale(1) brightness(0.2); }
@media (max-width: 720px) {
  .press { gap: 28px 36px; }
  .press img { height: 36px; max-width: 120px; }
}
/* Press article-card logo (white PNGs need inversion on light card bg) */
.press-card-logo {
  max-height: 36px; max-width: 110px; object-fit: contain;
  filter: invert(1) grayscale(1) brightness(0.45);
  opacity: 0.85;
}

/* ===================================================================
   Block diagram (Clever Elements visual)
   =================================================================== */
.block-diagram {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--cream);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-2);
  display: grid;
  place-items: center;
}

/* SVG illustration of a two-story unit */
.elements-illust {
  width: 92%; max-width: 540px;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,0.18));
}

/* ===================================================================
   Forms
   =================================================================== */
.field {
  min-width: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.field label {
  font-size: 13px; font-weight: 600;
  color: var(--ink-2);
}
.field label .req { color: var(--err); margin-left: 2px; }
.field input, .field select, .field textarea {
  /* Form controls carry an intrinsic minimum width. Without this they refuse
     to shrink and drag their grid column past the edge of a phone screen. */
  min-width: 0;
  height: 50px;
  padding: 0 16px;
  border: 1.5px solid var(--rule);
  border-radius: 10px;
  background: #fff;
  font-size: 16px;
  font-family: var(--body);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { height: auto; min-height: 120px; padding: 14px 16px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(140,82,255,0.16);
}
.field--row {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
}
@media (max-width: 640px) {
  .field--row { grid-template-columns: minmax(0, 1fr); }
}

/* Install partners coverage map grid */
.cb-coverage-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 860px) {
  .cb-coverage-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* Lead form on dark sections */
.section--dark .field label { color: rgba(255,255,255,0.92); }
.section--dark .field input,
.section--dark .field select,
.section--dark .field textarea {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
  color: #fff;
}
.section--dark .field input::placeholder,
.section--dark .field textarea::placeholder { color: rgba(255,255,255,0.45); }
.section--dark .field input:focus,
.section--dark .field select:focus,
.section--dark .field textarea:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0,209,224,0.22);
  background: rgba(255,255,255,0.10);
}
.section--dark form label.row,
.section--dark form label.row span { color: rgba(255,255,255,0.82); }
.section--dark form .muted { color: rgba(255,255,255,0.55); }

/* ...but a lead form can also sit on a white card inside a dark section (the
   feasibility form on /sb-1211/calculator). The rules above then painted every
   label white on white and left only the red asterisks showing. Put the light
   treatment back for forms inside a light panel. */
.section--dark :is(
  [style*="background: #fff"],
  [style*="background:#fff"],
  [style*="background: white"],
  [style*="background: var(--paper-2)"],
  [style*="background:var(--paper-2)"]
) .field label { color: var(--ink-2); }
.section--dark :is(
  [style*="background: #fff"],
  [style*="background:#fff"],
  [style*="background: white"],
  [style*="background: var(--paper-2)"],
  [style*="background:var(--paper-2)"]
) :is(.field input, .field select, .field textarea) {
  background: #fff;
  border-color: var(--rule);
  color: var(--ink);
}
.section--dark :is(
  [style*="background: #fff"],
  [style*="background:#fff"],
  [style*="background: white"],
  [style*="background: var(--paper-2)"],
  [style*="background:var(--paper-2)"]
) :is(.field input::placeholder, .field textarea::placeholder) { color: var(--muted); }
.section--dark :is(
  [style*="background: #fff"],
  [style*="background:#fff"],
  [style*="background: white"],
  [style*="background: var(--paper-2)"],
  [style*="background:var(--paper-2)"]
) :is(form label.row, form label.row span) { color: var(--ink-3); }
.section--dark :is(
  [style*="background: #fff"],
  [style*="background:#fff"],
  [style*="background: white"],
  [style*="background: var(--paper-2)"],
  [style*="background:var(--paper-2)"]
) form .muted { color: var(--muted); }

/* ===================================================================
   Hero (homepage)
   =================================================================== */
.hero {
  position: relative;
  padding: clamp(40px, 7vw, 90px) 0 0;
  overflow: hidden;
}
.hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: end;
}
.hero__copy { padding-bottom: 36px; }
.hero__copy h1 { margin: 18px 0 18px; }
.hero__copy .lead { max-width: 36ch; margin-bottom: 28px; }
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__visual {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 5 / 4;
  background: var(--surface-dark);
  box-shadow: var(--sh-3);
}
.hero__visual::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.4) 100%);
  pointer-events: none;
}
.hero__chip {
  position: absolute; left: 24px; bottom: 22px; z-index: 2;
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.96);
  color: var(--ink);
  padding: 12px 18px;
  border-radius: var(--r-pill);
  font-weight: 600; font-size: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}
.hero__chip-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--purple);
  box-shadow: 0 0 0 4px rgba(140,82,255,0.18);
}
.hero__floater {
  position: absolute; top: -40px; right: -50px;
  width: 360px; height: 360px;
  background: var(--grad-pc);
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.25;
  pointer-events: none;
  z-index: -1;
}

/* Hero variant whose illustration column is wider than the copy column.
   This used to be an inline `grid-template-columns` on /sb-1211, and an inline
   style cannot be overridden by the collapse below: on a phone the copy's
   min-content claimed the whole row, the illustration track shrank to 0px, and
   its 520px min-height left a tall empty band where the drawing should be. */
.hero__inner--wide-visual { grid-template-columns: 1fr 1.15fr; }

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__copy { padding-bottom: 0; }
}

/* ===================================================================
   Audience tiles (homepage section 3)
   =================================================================== */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.audience-tile {
  display: flex; flex-direction: column; gap: 16px;
  padding: 28px;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  min-height: 260px;
}
.audience-tile::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--grad-pc);
  transform: translateY(100%);
  transition: transform .25s ease;
}
.audience-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-2);
  border-color: transparent;
}
.audience-tile:hover::after { transform: translateY(0); }
.audience-tile__icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--purple-tint); color: var(--purple);
}
.audience-tile__icon svg { width: 26px; height: 26px; }
.audience-tile h3 { font-size: 22px; }
.audience-tile p { font-size: 15px; color: var(--muted); margin: 0; }
.audience-tile .link { margin-top: auto; }

@media (max-width: 900px) {
  .audience-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .audience-grid { grid-template-columns: 1fr; }
}

/* ===================================================================
   Split section (image + content)
   =================================================================== */
.split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.split--reverse { grid-template-columns: 1fr 1.05fr; }
.split--reverse .split__visual { order: 2; }
.split__visual {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 5 / 4;
  background: var(--cream);
  box-shadow: var(--sh-2);
}
.split__visual img { width: 100%; height: 100%; object-fit: cover; }
.split__copy h2 { margin-bottom: 18px; }
.split__copy p { margin-bottom: 16px; font-size: 16px; color: var(--ink-3); }
.split__copy .actions { margin-top: 24px; display: flex; gap: 14px; flex-wrap: wrap; }

@media (max-width: 860px) {
  .split, .split--reverse { grid-template-columns: 1fr; }
  .split--reverse .split__visual { order: 0; }
}

/* ===================================================================
   Process timeline
   =================================================================== */
.process {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.process__step {
  position: relative;
  padding: 26px 24px;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--rule);
}
.process__num {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--grad-pc);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 16px;
}
.process__step h4 { font-size: 18px; margin-bottom: 4px; }
.process__step p { font-size: 13.5px; color: var(--muted); margin: 0; }
.process__time { display: block; font-size: 12px; color: var(--purple); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; }

@media (max-width: 1100px) { .process { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .process { grid-template-columns: 1fr; } }

/* ===================================================================
   Capabilities strip
   =================================================================== */
.caps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.caps__cell {
  padding: 28px 24px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.005em;
  text-align: center;
  color: var(--ink);
}
.caps__cell + .caps__cell { border-left: 1px solid var(--rule); }
@media (max-width: 900px) {
  .caps { grid-template-columns: 1fr 1fr; }
  .caps__cell + .caps__cell { border-left: 0; }
  .caps__cell { border-top: 1px solid var(--rule); }
}

/* ===================================================================
   Marquee / scrolling text
   =================================================================== */
.marquee {
  overflow: hidden;
  background: var(--surface-dark);
  color: #fff;
  padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.marquee__track {
  display: inline-flex;
  gap: 60px;
  white-space: nowrap;
  animation: marquee 38s linear infinite;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 36px);
  letter-spacing: normal;
}
.marquee__item { display: inline-flex; align-items: center; gap: 24px; }
.marquee__star {
  display: inline-block;
  width: 24px; height: 24px;
  background: var(--cyan);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ===================================================================
   Stat tiles grid (SB 1211 page)
   =================================================================== */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.stat-tile {
  padding: 32px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  display: flex; flex-direction: column; gap: 6px;
}
.stat-tile__num {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(40px, 4.5vw, 64px);
  line-height: 1.1; letter-spacing: normal;
  color: var(--purple);
  font-variant-numeric: tabular-nums;
}
.stat-tile__cap { font-size: 15px; color: var(--ink-3); }

@media (max-width: 760px) { .stat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .stat-grid { grid-template-columns: 1fr; } }

/* ===================================================================
   FAQ accordion
   =================================================================== */
.faq { border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 22px 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(18px, 1.8vw, 22px);
  background: transparent;
  border: 0; cursor: pointer; text-align: left;
  color: var(--ink);
}
.faq__plus {
  width: 32px; height: 32px;
  border-radius: 50%; border: 1.5px solid var(--ink);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: background .15s ease, color .15s ease, transform .25s ease, border-color .15s ease;
}
.faq__item.is-open .faq__plus { background: var(--purple); border-color: var(--purple); color: #fff; transform: rotate(45deg); }
.faq__a {
  max-height: 0; overflow: hidden;
  transition: max-height .35s ease;
  color: var(--ink-3);
  font-size: 16px;
  line-height: 1.6;
}
.faq__a-inner { padding: 0 0 22px; max-width: 70ch; }

/* ===================================================================
   Comparison table
   =================================================================== */
.cmp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--rule);
}
.cmp__col { padding: 32px; }
.cmp__col h4 {
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
  font-family: var(--body);
  margin: 0 0 14px;
}
.cmp__col--before { background: var(--band); color: var(--ink-3); }
.cmp__col--after  { background: var(--purple-tint); color: var(--ink); }
/* 13px purple on Purple Tint reads 3.66:1; Purple Deep reads 5.5:1. */
.cmp__col--after h4 { color: var(--purple-deep); }
.cmp__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.cmp__col li {
  font-size: 16px;
  padding-left: 26px;
  position: relative;
}
.cmp__col--before li::before {
  content: "—"; position: absolute; left: 0; color: var(--muted);
}
.cmp__col--after li::before {
  content: "✓"; position: absolute; left: 0; color: var(--purple); font-weight: 700;
}
@media (max-width: 720px) { .cmp { grid-template-columns: 1fr; } }

/* ===================================================================
   Calculator
   =================================================================== */
.calc {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-3);
  background: #fff;
}
.calc__inputs {
  background: var(--surface-dark);
  color: #fff;
  padding: 40px;
}
.calc__inputs h3 { color: #fff; margin-bottom: 8px; }
.calc__inputs .lead { color: rgba(255,255,255,0.7); font-size: 15px; margin-bottom: 24px; }
.calc__field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.calc__field label { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.7); display: flex; justify-content: space-between; }
.calc__field label .val { color: var(--cyan); font-family: var(--display); font-size: 14px; letter-spacing: 0; text-transform: none; font-weight: 700; }
.calc__field input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px;
  background: rgba(255,255,255,0.12);
  border-radius: 999px; outline: 0;
}
.calc__field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--cyan);
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  cursor: pointer;
}
.calc__field input[type="number"], .calc__field select {
  height: 46px; padding: 0 14px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06); color: #fff;
}
.calc__field input[type="number"]:focus, .calc__field select:focus {
  outline: 0; border-color: var(--cyan);
}
.calc__seg {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  gap: 4px;
  background: rgba(255,255,255,0.06); padding: 4px; border-radius: 10px;
}
.calc__seg button {
  height: 38px; border: 0; background: transparent; color: rgba(255,255,255,0.8);
  border-radius: 5px; font-weight: 600; font-size: 14px;
}
.calc__seg button.is-on { background: var(--purple); color: #fff; }

.calc__results { padding: 40px; background: #fff; }
.calc__big {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(48px, 6vw, 80px);
  line-height: 1.1; letter-spacing: normal;
  background: var(--grad-pc); -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}
.calc__big-label { color: var(--muted); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
.calc__metrics {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 28px;
}
.calc__metric {
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: 10px; padding: 16px;
}
.calc__metric-num {
  font-family: var(--display); font-weight: 700;
  font-size: 28px; line-height: 1.1; letter-spacing: normal;
  color: var(--ink); font-variant-numeric: tabular-nums;
  margin-bottom: 2px;
}
.calc__metric-cap { font-size: 12px; color: var(--muted); letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600; }
.calc__note { font-size: 12px; color: var(--muted); margin-top: 18px; line-height: 1.5; }

@media (max-width: 900px) { .calc { grid-template-columns: 1fr; } }

/* ===================================================================
   Tweaks panel
   =================================================================== */
.tweaks-panel {
  position: fixed; right: 24px; bottom: 24px;
  width: 320px; max-width: calc(100vw - 32px);
  background: #fff;
  border-radius: 10px;
  box-shadow: var(--sh-3);
  border: 1px solid var(--rule);
  padding: 18px;
  z-index: 200;
  transform: translateY(20px); opacity: 0; pointer-events: none;
  transition: transform .25s ease, opacity .25s ease;
}
.tweaks-panel.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.tweaks-panel__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.tweaks-panel__head h4 { font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; margin: 0; }
.tweaks-panel__close { width: 28px; height: 28px; border: 0; background: var(--stone); border-radius: 50%; }
.tweaks-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--rule); }
.tweaks-row:first-of-type { border-top: 0; }
.tweaks-row__label { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.tweaks-swatches { display: flex; gap: 6px; }
.tweaks-swatch {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  outline: 1px solid rgba(0,0,0,0.06);
}
.tweaks-swatch.is-on { border-color: var(--ink); }

/* ===================================================================
   Utility / responsive helpers
   =================================================================== */
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Check-list rows are an icon plus a run of text. `.row` wraps its children,
   so a label wider than the space left dropped onto its own flex line and
   lost its alignment with the tick. `nowrap` makes the text shrink and wrap
   beside the icon instead. */
.brand-cb li.row,
.brand-cb label.row { flex-wrap: nowrap; }
.between { display: flex; align-items: center; justify-content: space-between; }
.muted { color: var(--muted); }
.center { text-align: center; }
.max-prose { max-width: 64ch; }

/* Three-up photo gallery used on the product pages. It replaces an inline
   `grid-template-columns: 1fr 1fr 1fr`, which stayed three columns wide on a
   phone: each tile shrank to about 105px and the caption pill ended up wider
   than the photo it labelled. */
.cb-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 860px) {
  .cb-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .cb-gallery-grid { grid-template-columns: minmax(0, 1fr); }
  /* Feature tiles carry an inline `grid-column: span 2` for the wide layout.
     In a single-column track that span invents an empty second column and
     pushes every tile off the left edge, so it has to be cancelled here.
     `!important` is the only thing that outranks the inline style. */
  .cb-gallery-grid > * { grid-column: auto !important; grid-row: auto !important; }
}

/* `minmax(0, 1fr)` rather than `1fr`: a bare `1fr` track never shrinks below
   its content's min-content width, so a column holding a form or a wide table
   pushed the whole grid past the right edge of the phone screen. */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .grid-4 { grid-template-columns: minmax(0, 1fr); }
}

/* ===================================================================
   Page-specific (hero variants, gallery, etc.)
   =================================================================== */

/* sticky bottom CTA on mobile */
.mobile-cta {
  display: none;
  position: fixed; left: 12px; right: 12px; bottom: 12px;
  background: var(--grad-pc);
  color: #fff;
  padding: 14px 18px;
  border-radius: 10px;
  font-weight: 600;
  z-index: 80;
  box-shadow: var(--sh-3);
  text-align: center;
}
@media (max-width: 720px) { .mobile-cta { display: block; } }

/* breadcrumb */
.crumb {
  display: flex; gap: 8px; align-items: center;
  font-size: 13px; color: var(--muted);
  padding: 24px 0 0;
}
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--purple); }
.crumb span { color: var(--ink-2); font-weight: 500; }

/* hero stat ribbon (used on Elements page) */
.ribbon {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  padding: 18px 24px;
  background: var(--surface-dark);
  color: #fff;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-2);
  font-size: 14px;
  font-weight: 500;
}
.ribbon strong { color: var(--cyan); font-weight: 700; font-family: var(--display); font-size: 18px; }

/* small chip */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: var(--purple-tint); color: var(--purple);
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
}
.chip--cyan { background: var(--cyan-soft); color: #0F6B70; }
.chip--ink  { background: var(--surface-dark); color: #fff; }
.chip--yellow { background: var(--yellow); color: var(--ink); }

/* The reset sets `.brand-cb a { color: inherit }` at (0,1,1), which outranks
   every `.chip*` rule above at (0,1,0). A chip that is a link therefore took
   the surrounding text colour: a `chip--ink` category link on the blog post
   header rendered near-black on near-black and disappeared. Re-state each
   colour at (0,2,1) so it wins, exactly as the `.btn--*` block above does. */
.brand-cb a.chip { color: var(--purple); }
.brand-cb a.chip--cyan { color: #0F6B70; }
.brand-cb a.chip--ink { color: #fff; }
.brand-cb a.chip--yellow { color: var(--ink); }

/* image placeholder */
.placeholder {
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(45deg, rgba(140,82,255,0.06) 0 12px, rgba(140,82,255,0.02) 12px 24px),
    var(--cream);
  color: var(--muted);
  border-radius: var(--r-lg);
  padding: 24px;
  text-align: center;
  font-size: 13px;
  border: 1.5px dashed rgba(140,82,255,0.25);
}
.placeholder__tag {
  display: inline-block;
  padding: 4px 10px;
  background: var(--purple); color: #fff;
  border-radius: 999px;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
  margin-bottom: 8px;
}

/* reveal-on-scroll (opt-in: requires .reveal-armed) */
.reveal { transition: opacity .6s ease, transform .6s ease; }
.reveal-armed.reveal:not(.is-in) { opacity: 0; transform: translateY(16px); }
.reveal.is-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  html:has(body.brand-cb) { scroll-behavior: auto; }
  .reveal, .reveal-armed.reveal:not(.is-in) { opacity: 1; transform: none; transition: none; }
  .marquee__track { animation: none; }
}

/* ===================================================================
   FIGMA-STYLE COMPONENTS
   ─ a refresh layer that brings homepage sections in line with the
   clevertinyhomes.com reference: photo hero, black product list,
   purple→cyan stat band, big alternating keypoints, testimonial grid
   with a purple highlight card, factory video, partnership band.
   =================================================================== */

/* ---- Photo hero (Header5Desktop) ---- */
.photo-hero {
  position: relative;
  min-height: clamp(560px, 86vh, 820px);
  display: flex; align-items: center;
  color: #fff;
  overflow: hidden;
}
.photo-hero__bg { position: absolute; inset: 0; z-index: 0; }
.photo-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.photo-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.7) 100%);
}
.photo-hero .wrap { position: relative; z-index: 1; padding-top: 64px; padding-bottom: 64px; }
.photo-hero__inner { max-width: 720px; }
.photo-hero__eye {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 14px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 999px;
  color: rgba(255,255,255,0.95);
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
}
.photo-hero__eye-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 0 4px rgba(92,225,230,0.22);
}
.photo-hero h1 {
  color: #fff;
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: normal;
  margin: 22px 0 22px;
  max-width: 16ch;
}
.photo-hero h1 em {
  color: var(--cyan);
  font-style: normal;
  font-weight: 600;
}
.photo-hero__lead {
  color: rgba(255,255,255,0.88);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.5;
  max-width: 56ch;
  margin: 0 0 32px;
}
.photo-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.photo-hero__meta {
  margin-top: 38px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,0.2);
  display: flex; flex-wrap: wrap; gap: 28px 40px;
  align-items: center;
  color: rgba(255,255,255,0.88);
  font-size: 13.5px;
}
.photo-hero__meta strong { color: #fff; font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: normal; display: block; }
.photo-hero__meta-cell { line-height: 1.3; }

/* ---- Stat band (purple → cyan gradient with 3 big stats) ---- */
.gstat-band {
  background: var(--grad-pc);
  color: #fff;
  padding: clamp(56px, 8vw, 100px) 0;
}
.gstat-band__head { text-align: center; max-width: 880px; margin: 0 auto 56px; }
.gstat-band__head h2 {
  color: #fff;
  font-size: clamp(32px, 4vw, 55px);
  font-weight: 400;
  line-height: 1.2;
}
.gstat-band__head p { color: #fff; font-size: 16px; margin: 16px auto 0; max-width: 60ch; }
.gstat-band__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255,255,255,0.28);
}
.gstat-band__cell {
  padding: 36px 28px 4px;
  display: flex; flex-direction: column; gap: 10px;
  border-right: 1px solid rgba(255,255,255,0.28);
}
.gstat-band__cell:last-child { border-right: 0; }
.gstat-band__num {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(48px, 6vw, 80px);
  line-height: 1;
  letter-spacing: normal;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.gstat-band__num sup { font-size: 0.42em; vertical-align: 0.4em; font-weight: 600; letter-spacing: 0; }
.gstat-band__cap { color: #fff; font-size: 15px; max-width: 26ch; line-height: 1.45; }
@media (max-width: 780px) {
  .gstat-band__row { grid-template-columns: 1fr; }
  .gstat-band__cell { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.28); padding: 28px 0; }
  .gstat-band__cell:last-child { border-bottom: 0; }
}

/* ---- Black products section (horizontal list) ---- */
.products-dark {
  background: var(--surface-dark);
  color: #fff;
  padding: clamp(72px, 8vw, 110px) 0 clamp(80px, 8vw, 120px);
}
.products-dark__head {
  text-align: center; max-width: 820px; margin: 0 auto 56px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.products-dark__head .eyebrow { color: #fff; }
.products-dark__head .eyebrow::before { background: #fff; }
.products-dark__head h2 {
  color: #fff;
  font-size: clamp(32px, 4vw, 55px);
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.2;
}
.products-dark__head p { color: rgba(255,255,255,0.7); font-size: 16px; margin: 0; max-width: 60ch; }

.product-row {
  display: grid;
  grid-template-columns: 220px 1fr auto;
  gap: 28px;
  align-items: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 14px 22px 14px 14px;
  margin-bottom: 14px;
  transition: background .15s ease, border-color .2s ease, transform .15s ease;
  color: #fff;
}
.product-row:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
  transform: translateX(2px);
}
.product-row__thumb {
  width: 100%; aspect-ratio: 220 / 110; border-radius: 10px;
  overflow: hidden;
  background: #1B1B22 center/cover no-repeat;
}
.product-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-row__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(20px, 2.1vw, 26px);
  letter-spacing: normal;
  color: #fff;
  line-height: 1.2;
}
.product-row__sub { color: rgba(255,255,255,0.6); font-size: 14px; margin-top: 6px; }
.product-row__cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 22px;
  height: 44px;
  border-radius: 999px;
  background: var(--purple);
  color: #fff;
  font-size: 14px; font-weight: 600;
  white-space: nowrap;
  transition: background .15s ease;
}
.product-row__cta::after {
  content: "";
  width: 14px; height: 14px;
  background: var(--cyan);
  border-radius: 50%;
  display: inline-block;
}
.product-row:hover .product-row__cta { background: var(--purple-deep); }
@media (max-width: 760px) {
  .product-row { grid-template-columns: 1fr; padding: 14px; }
  .product-row__thumb { aspect-ratio: 16/9; }
  .product-row__cta { width: 100%; justify-content: center; }
}

/* ---- Big keypoint rows (image left/right, sidebar text) ---- */
.keypoint {
  padding: clamp(48px, 6vw, 80px) 0;
  background: #fff;
}
.keypoint__row {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
.keypoint--reverse .keypoint__row { grid-template-columns: 320px 1fr; }
.keypoint--reverse .keypoint__copy { order: 0; }
.keypoint--reverse .keypoint__visual { order: 1; }
.keypoint__visual {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--stone);
}
.keypoint__visual img { width: 100%; height: 100%; object-fit: cover; }
.keypoint__copy { max-width: 32ch; }
.keypoint__copy h2 {
  font-size: clamp(32px, 4vw, 55px);
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.2;
  margin-bottom: 18px;
}
.keypoint__copy p {
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0 0 14px;
}
.keypoint__copy .link { margin-top: 12px; }
@media (max-width: 860px) {
  .keypoint__row,
  .keypoint--reverse .keypoint__row { grid-template-columns: 1fr; gap: 24px; }
  .keypoint--reverse .keypoint__visual { order: 0; }
}

/* ---- Testimonial grid (4 cards, center = purple highlight) ---- */
.testimonials {
  padding: clamp(72px, 8vw, 110px) 0;
  background: var(--paper-2);
}
.testimonials__head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.testimonials__head h2 {
  font-size: clamp(32px, 4vw, 55px);
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.2;
}
.testimonials__head p { color: var(--muted); font-size: 16px; margin-top: 14px; }
.testimonials__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
  align-items: start;
}
.tcard {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 24px 22px;
  display: flex; flex-direction: column; gap: 16px;
  position: relative;
}
.tcard__stars { display: flex; gap: 4px; }
.tcard__stars svg { width: 18px; height: 18px; color: var(--yellow); }
.tcard__body { font-family: var(--nav-font); font-size: 16px; line-height: 1.5; color: var(--ink-2); margin: 0; }
.tcard__person { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.tcard__avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: var(--stone); }
.tcard__name { font-weight: 700; font-size: 14px; line-height: 1.2; }
.tcard__role { font-size: 12px; color: var(--muted); margin-top: 2px; }

.tcard--feature {
  background: var(--purple);
  border-color: var(--purple);
  color: #fff;
}
.tcard--feature .tcard__body { color: #fff; }
.tcard--feature .tcard__name { color: #fff; }
.tcard--feature .tcard__role { color: rgba(255,255,255,0.78); }
.tcard--feature .tcard__stars svg { color: var(--yellow); }

@media (max-width: 900px) {
  .testimonials__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .testimonials__grid { grid-template-columns: 1fr; }
}

/* ---- Factory video block ---- */
.factory-block {
  padding: clamp(72px, 8vw, 110px) 0;
  background: #fff;
}
.factory-block__row {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.factory-block__media {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 16 / 11;
  background: var(--surface-dark);
}
.factory-block__media img { width: 100%; height: 100%; object-fit: cover; }
.factory-block__play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(0,0,0,0.25);
  cursor: pointer;
  transition: background .2s ease;
}
.factory-block__play:hover { background: rgba(0,0,0,0.15); }
.factory-block__play-btn {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: var(--purple);
  display: grid; place-items: center;
  box-shadow: 0 14px 40px rgba(140,82,255,0.5);
  transition: transform .2s ease;
}
.factory-block__play:hover .factory-block__play-btn { transform: scale(1.05); }
.factory-block__play svg { width: 32px; height: 32px; color: #fff; margin-left: 4px; }
.factory-block__copy h2 {
  font-size: clamp(32px, 3.8vw, 48px);
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.2;
  margin-bottom: 18px;
  max-width: 14ch;
}
.factory-block__copy p {
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0 0 12px;
}
.factory-block__copy .actions { margin-top: 22px; }
@media (max-width: 860px) {
  .factory-block__row { grid-template-columns: 1fr; }
}

/* ---- Partnership gradient final CTA ---- */
.partnership {
  background: var(--grad-pc);
  color: #fff;
  padding: clamp(72px, 9vw, 130px) 0;
  text-align: center;
}
.partnership h2 {
  color: #fff;
  font-size: clamp(32px, 4.6vw, 64px);
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.2;
}
.partnership__big {
  display: block;
}
.partnership p {
  color: #fff;
  font-size: 16px;
  max-width: 56ch;
  margin: 22px auto 36px;
}
.partnership .btn--solid-ink {
  background: var(--surface-dark); color: #fff;
}
.partnership .btn--solid-ink:hover { background: #000; }

/* ---- Black footer (matches figma's deep gray with cyan brand) ---- */
.footer--dark { background: var(--surface-dark); }
.footer--dark .footer__brand h3 { font-weight: 500; letter-spacing: normal; }
.footer--dark .footer__brand .footer__logo-mark {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 500; font-size: 24px;
  color: #fff;
  margin-bottom: 8px;
  letter-spacing: normal;
}
.footer--dark .footer__logo-icon {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 1.5px solid #fff;
  border-radius: 50%;
  color: var(--cyan);
  font-weight: 700; font-size: 14px;
}

/* ---- Nav variant: transparent over photo hero ---- */
.nav--transparent {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  position: absolute; top: 0; left: 0; right: 0;
}
.nav--transparent .nav__logo,
.nav--transparent .nav__link { color: #fff; }
.nav--transparent .nav__link:hover { background: rgba(255,255,255,0.12); color: #fff; }
.nav--transparent .nav__logo-mark { background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.32); }
.nav--transparent .nav__burger { border-color: #fff; color: #fff; }
.nav--transparent.is-scrolled {
  position: sticky;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(255,255,255,0.1);
}


/* ===================================================================
   Home page (index.html) inline styles — ported verbatim from the
   <style> block in claude-design/index.html.
   =================================================================== */

  /* Hero v2 — Q&A treatment, restyled in the new system (no Fraunces;
     italic-purple accent replaced with semibold-purple in headline). */
  .hero--v2 .hero__inner {
    align-items: center;
    padding-top: clamp(20px, 3vw, 56px);
  }
  .hero__q {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(22px, 2.6vw, 34px);
    color: var(--ink-3);
    margin: 20px 0 6px;
    letter-spacing: normal;
    line-height: 1.2;
    display: flex; align-items: center; gap: 14px;
  }
  .hero__q::before {
    content: "";
    display: inline-block;
    width: 36px;
    height: 2px;
    background: var(--purple);
    border-radius: 1px;
    flex-shrink: 0;
  }
  .hero__copy h1.hero__a {
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.2;
    letter-spacing: normal;
    color: var(--ink);
    margin: 4px 0 28px;
  }
  .hero__a em {
    font-style: normal;
    font-weight: 600;
    color: var(--purple);
  }
  .hero__a-dot {
    color: var(--cyan-deep);
    display: inline-block;
    transform: translateX(-0.04em);
  }
  .hero__copy .lead { max-width: 50ch; }
  .hero__lead-emph {
    color: var(--ink); font-weight: 600;
  }
  .hero__lead-only {
    font-weight: 600;
    color: var(--purple);
  }
  /* Stat band v2 — Factory-built value prop */
  .stat-band--v2 { padding: clamp(72px, 9vw, 120px) 0; }
  .stat-band__head {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(24px, 4vw, 64px);
    align-items: end;
    margin-bottom: clamp(40px, 5vw, 64px);
  }
  .stat-band__head .eyebrow.on-dark { margin-bottom: 14px; }
  .stat-band__title {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(32px, 4vw, 55px);
    line-height: 1.2;
    letter-spacing: normal;
    color: #fff;
    margin: 0;
    text-wrap: balance;
  }
  /* Cyan on the cyan end of the band is invisible. The emphasis stays
     white and leans on weight instead. */
  .stat-band__title em {
    font-style: normal;
    font-weight: 600;
    color: #fff;
  }
  .stat-band__lede {
    font-size: clamp(16px, 1.25vw, 19px);
    line-height: 1.5;
    color: #fff;
    max-width: 46ch;
    margin: 0;
    text-wrap: pretty;
  }
  .stat-band__lede strong { color: #fff; font-weight: 600; }
  @media (max-width: 900px) {
    .stat-band__head { grid-template-columns: 1fr; align-items: start; }
  }

  /* Pillars row */
  .stat-band__pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid rgba(255,255,255,0.22);
    border-bottom: 1px solid rgba(255,255,255,0.22);
  }
  .stat-pillar {
    padding: clamp(28px, 3.5vw, 44px) clamp(18px, 2.4vw, 36px);
    display: flex; flex-direction: column; gap: 14px;
    position: relative;
  }
  .stat-pillar + .stat-pillar {
    border-left: 1px solid rgba(255,255,255,0.22);
  }
  /* Was 11px in --cyan, which is unreadable on the cyan end of the band.
     Solid white, and up to 13px. */
  .stat-pillar__tag {
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: #fff;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .stat-pillar__tag::before {
    content: "";
    width: 18px; height: 1px;
    background: rgba(255,255,255,0.85);
  }
  .stat-pillar__num {
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(48px, 6vw, 80px);
    line-height: 1.1;
    letter-spacing: normal;
    color: #fff;
    font-variant-numeric: tabular-nums;
    display: flex; align-items: baseline; gap: 4px;
  }
  .stat-pillar__unit {
    font-size: 0.42em;
    font-weight: 500;
    color: rgba(255,255,255,0.88);
    letter-spacing: normal;
  }
  .stat-pillar__label {
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(18px, 1.5vw, 22px);
    color: #fff;
    line-height: 1.2;
    letter-spacing: normal;
  }
  .stat-pillar__sub {
    font-size: 15px;
    line-height: 1.45;
    color: #fff;
    max-width: 28ch;
  }
  @media (max-width: 860px) {
    .stat-band__pillars { grid-template-columns: 1fr; }
    .stat-pillar + .stat-pillar {
      border-left: 0;
      border-top: 1px solid rgba(255,255,255,0.22);
    }
  }

  /* Law tracker tucked below as supporting context */
  .stat-band__laws {
    margin-top: clamp(28px, 3.5vw, 44px);
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  }
  .stat-band__laws-label {
    color: #fff; font-weight: 700; font-size: 13px;
    letter-spacing: 0.14em; text-transform: uppercase;
    margin-right: 4px;
  }
  .stat-band__law {
    display: inline-flex; align-items: center; gap: 8px;
    /* A dark backing pill so 13px type keeps its contrast wherever the
       chip lands on the gradient. */
    padding: 9px 14px;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.32);
    border-radius: 999px;
    font-size: 13px;
    color: #fff;
    font-weight: 500;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
  }
  .stat-band__law:hover {
    background: rgba(0,0,0,0.44);
    border-color: rgba(255,255,255,0.46);
    transform: translateY(-1px);
  }
  .stat-band__law-id {
    font-family: var(--display); font-weight: 700; color: var(--cyan);
    letter-spacing: -0.005em;
  }
  .stat-band__law-sep { color: rgba(255,255,255,0.32); }
  .stat-band__law-t { color: #fff; }
  .stat-band__more {
    margin-left: auto;
    /* sits at the cyan end of the band, so it stays solid white at 15px */
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .stat-band__more:hover { text-decoration: underline; }
  @media (max-width: 720px) {
    .stat-band__more { margin-left: 0; }
    .stat-band__laws-label { width: 100%; margin-bottom: 4px; }
  }


/* ===================================================================
   Keyboard focus — WCAG 2.1 AA, 2.4.7 Focus Visible
   ───────────────────────────────────────────────────────────────────
   Every interactive element gets the same two-tone ring: a 1.5px inner
   ring against the element, then a 3px halo against the page. The ring
   is drawn with box-shadow, so it follows each element's own
   border-radius. On a white page the halo is purple, matching the form
   field focus above.

   Two custom properties carry the ring colours. They inherit, so a
   control picks up the right pair from whatever container it sits in:
   cyan on near-black, near-black on the purple-to-cyan gradient. The
   ring never animates, on any motion setting.
   =================================================================== */
.brand-cb {
  --focus-inner: #FFFFFF;
  --focus-halo:  rgba(140,82,255,0.35);
}

/* Near-black containers: a cyan halo, held off the element by a dark
   inner ring. The navbar and its dropdown panels joined this list when the
   bar went from white to #1A1A1A. */
.brand-cb .nav,
.brand-cb .nav__mega,
.brand-cb .section--dark,
.brand-cb .hero,
.brand-cb .photo-hero,
.brand-cb .products-dark,
.brand-cb .product-card,
.brand-cb .marquee,
.brand-cb .ribbon,
.brand-cb .calc__inputs,
.brand-cb .mobile-drawer,
.brand-cb .footer,
.brand-cb .nav--transparent:not(.is-scrolled) {
  --focus-inner: rgba(26,26,26,0.85);
  --focus-halo:  rgba(0,217,255,0.5);
}

/* Purple-to-cyan gradient containers: cyan would vanish into the cyan
   end of the gradient, so the halo goes near-black and the inner ring
   goes white. That pair reads against both ends of the gradient. */
.brand-cb .section--purple,
.brand-cb .stat-band,
.brand-cb .gstat-band,
.brand-cb .partnership,
.brand-cb .mobile-cta {
  --focus-inner: #FFFFFF;
  --focus-halo:  rgba(26,26,26,0.9);
}
/* The gradient call to action sits inside the dark bar, so it inherits the
   bar's cyan halo — which disappears into the button's own cyan end. Give it
   the gradient pair instead: a white inner ring and a near-black halo. */
.brand-cb .nav .btn--primary,
.brand-cb .nav .btn--gradient,
.brand-cb .mobile-drawer .btn--primary,
.brand-cb .mobile-drawer .btn--gradient {
  --focus-inner: #FFFFFF;
  --focus-halo:  rgba(26,26,26,0.9);
}

.brand-cb a:focus-visible,
.brand-cb button:focus-visible,
.brand-cb .btn:focus-visible,
.brand-cb .chip:focus-visible,
.brand-cb .card:is(a):focus-visible,
.brand-cb summary:focus-visible,
.brand-cb [role="button"]:focus-visible,
.brand-cb [tabindex]:not([tabindex="-1"]):focus-visible,
.brand-cb input[type="range"]:focus-visible,
.brand-cb input[type="checkbox"]:focus-visible,
.brand-cb input[type="radio"]:focus-visible,
.brand-cb .skip-link:focus,
.brand-cb .skip-link:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 1.5px var(--focus-inner, #FFFFFF),
    0 0 0 4.5px var(--focus-halo, rgba(140,82,255,0.35));
  transition: none;
}

/* The tab button sets its own box-shadow at a higher specificity, so it
   needs the ring spelled out again. */
.brand-cb button.cb-tab-btn:focus-visible,
.brand-cb button.cb-tab-btn.is-active:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 1.5px var(--focus-inner, #FFFFFF),
    0 0 0 4.5px var(--focus-halo, rgba(140,82,255,0.35));
  transition: none;
}

/* Text inputs keep their own softer ring (see .field ...:focus above).
   This adds the same treatment to the calculator's number and select
   fields, which had a border colour change and nothing else. */
.brand-cb .calc__field input[type="number"]:focus,
.brand-cb .calc__field input[type="number"]:focus-visible,
.brand-cb .calc__field select:focus,
.brand-cb .calc__field select:focus-visible {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0,217,255,0.32);
  transition: none;
}

/* The range slider drops its outline, so the thumb carries the ring. */
.brand-cb .calc__field input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(0,217,255,0.5);
}
.brand-cb .calc__field input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px rgba(0,217,255,0.5);
}

/* Windows high-contrast mode ignores box-shadow, so draw a real outline. */
@media (forced-colors: active) {
  .brand-cb a:focus-visible,
  .brand-cb button:focus-visible,
  .brand-cb .btn:focus-visible,
  .brand-cb summary:focus-visible,
  .brand-cb [role="button"]:focus-visible,
  .brand-cb input:focus-visible,
  .brand-cb select:focus-visible,
  .brand-cb textarea:focus-visible,
  .brand-cb .skip-link:focus {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }
}

/* ===================================================================
   Skip link — the first item in the tab order on every page.
   Off-screen until it takes focus, then a pill in the top-left corner.
   =================================================================== */
.skip-link {
  position: absolute;
  top: 0;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 200;
}
.skip-link:focus,
.skip-link:focus-visible {
  position: fixed;
  top: 16px;
  left: 16px;
  width: auto;
  height: auto;
  overflow: visible;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  border-radius: 10px;
  background: linear-gradient(90deg, #8c52ff 0%, #00D9FF 100%);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
}

/* The main landmark takes focus from the skip link. It must never show
   a ring of its own — the ring belongs on controls, not on a region. */
.brand-cb main:focus,
.brand-cb main:focus-visible {
  outline: none;
  box-shadow: none;
}

/* The two mega-menu toggles are <button> elements that wear .nav__link.
   Strip the button chrome so they look exactly like the nav links beside
   them. :where() keeps the specificity at zero, so .nav__link:hover and
   .nav__link.is-active still set the background. */
:where(.brand-cb button.nav__link) {
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
}

/* ===================================================================
   Pass 2 — layouts that kept their desktop column tracks on a phone
   ───────────────────────────────────────────────────────────────────
   Every class below replaces an inline `grid-template-columns` that
   was written for 1280px and never changed at 390px. The symptom was
   always one of two things: a text column squeezed to one word per
   line, or content clipped by an ancestor's `overflow: hidden` (which
   is why the page never reported horizontal overflow).
   =================================================================== */

/* An icon (or dot) plus its label. `.row` wraps its children, so a label
   wider than the space left dropped onto its own line and lost the icon.
   Pass 1 fixed this for `li.row` and `label.row`; the same pattern also
   appears on plain `div.row`, which has to opt in by name. */
.brand-cb .row--nowrap { flex-wrap: nowrap; }

/* /about — "By the numbers". Six cells in a bordered, clipped box. The
   inline track was `repeat(3, 1fr)`, and a bare `1fr` never shrinks below
   its content, so "85K sq ft" at 56px pushed the grid past the box and the
   right-hand column was cut off. The separators moved from inline styles
   (which no media query can outrank) into nth-child rules that change with
   the column count. */
.cb-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.cb-stat-grid__cell { padding: 32px; }
.cb-stat-grid__cell:not(:nth-child(3n + 1)) { border-left: 1px solid var(--rule); }
.cb-stat-grid__cell:nth-child(n + 4) { border-top: 1px solid var(--rule); }
.cb-stat-grid__n {
  font-family: var(--display); font-weight: 600; font-size: 56px;
  line-height: 1.1; letter-spacing: normal; color: var(--purple);
  font-variant-numeric: tabular-nums;
}
.cb-stat-grid__l { margin-top: 8px; font-size: 15px; color: var(--ink-3); }
.cb-stat-grid__cell--hl { background: var(--surface-dark); color: #fff; }
.cb-stat-grid__cell--hl .cb-stat-grid__n { color: var(--cyan); }
.cb-stat-grid__cell--hl .cb-stat-grid__l { color: rgba(255,255,255,0.78); }
@media (max-width: 900px) {
  .cb-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cb-stat-grid__cell { padding: 26px; border-left: 0; border-top: 0; }
  .cb-stat-grid__cell:not(:nth-child(2n + 1)) { border-left: 1px solid var(--rule); }
  .cb-stat-grid__cell:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .cb-stat-grid__n { font-size: 44px; }
}
@media (max-width: 560px) {
  .cb-stat-grid { grid-template-columns: minmax(0, 1fr); }
  .cb-stat-grid__cell { padding: 22px 24px; border-left: 0; border-top: 0; }
  .cb-stat-grid__cell:nth-child(n + 2) { border-top: 1px solid var(--rule); }
  .cb-stat-grid__n { font-size: 40px; }
}

/* /about/press — one press article per card: logo, headline block, arrow.
   The inline track `120px 1fr auto` left the headline about 100px wide on a
   phone. Below 720px the card stacks and the arrow is dropped, because the
   whole card is the link. */
.cb-press-card {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 24px 28px;
}
.cb-press-card__logo { height: 40px; display: grid; place-items: center; }
@media (max-width: 720px) {
  .cb-press-card { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 22px 24px; }
  .cb-press-card__logo { justify-items: start; height: 34px; }
  .cb-press-card__arrow { display: none; }
}

/* /about/press — the awards table: year, award, who won it. `100px 1fr 1.4fr`
   put every award name on four lines at 390px. */
.cb-award-row {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 12px;
  padding: 22px 28px;
  align-items: center;
}
.cb-award-row + .cb-award-row { border-top: 1px solid var(--rule); }
.cb-award-row__y { font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--purple); }
.cb-award-row__n { font-family: var(--display); font-weight: 700; font-size: 17px; }
.cb-award-row__w { color: var(--muted); font-size: 14px; }
@media (max-width: 720px) {
  .cb-award-row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 20px 24px; }
  .cb-award-row__y { font-size: 18px; }
}

/* /about/careers — one open role per row: title, team chip, location, Apply.
   `1.4fr 1fr 1fr auto` clipped the word "Apply" off the right edge at 390px. */
.cb-role-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 20px 24px;
}
.cb-role-row__t { font-family: var(--display); font-weight: 700; font-size: 17px; }
.cb-role-row__loc { color: var(--muted); font-size: 14px; }
@media (max-width: 860px) {
  .cb-role-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; }
  .cb-role-row__team { grid-column: 1; }
  .cb-role-row__loc { grid-column: 1; }
  .cb-role-row__apply { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
}
@media (max-width: 480px) {
  .cb-role-row { grid-template-columns: minmax(0, 1fr); }
  .cb-role-row__team, .cb-role-row__loc, .cb-role-row__apply { grid-column: 1; grid-row: auto; }
}

/* /about/careers — the wide factory photo with a caption laid over it. At
   21/9 the band is only 167px tall on a phone, and the caption (two chips, a
   30px heading, and a line of body copy) spilled straight out of it. Below
   860px the band gets a taller crop and the caption drops under the photo. */
.cb-photo-banner {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 21 / 9;
  background: #000;
}
.cb-photo-banner__img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.cb-photo-banner__cap {
  position: absolute; left: 32px; right: 32px; bottom: 28px;
  max-width: 520px; color: #fff;
}
.cb-photo-banner__cap h3 { color: #fff; font-size: 30px; margin-bottom: 8px; }
.cb-photo-banner__cap p { color: rgba(255,255,255,0.85); margin: 0; font-size: 16px; }
@media (max-width: 860px) {
  .cb-photo-banner { aspect-ratio: auto; background: var(--surface-dark); }
  .cb-photo-banner__img { aspect-ratio: 16 / 10; opacity: 1; }
  .cb-photo-banner__cap {
    position: static; max-width: none; padding: 22px 24px 26px;
  }
  .cb-photo-banner__cap h3 { font-size: 24px; }
}

/* /factory and /factory/materials — a wide photo beside a narrow column that
   holds a second photo and a dark quote card. `2fr 1fr` kept both columns at
   390px, which left the quote about 55px wide: one word per line. */
.cb-quote-split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; }
.cb-quote-split__side { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 860px) {
  .cb-quote-split { grid-template-columns: minmax(0, 1fr); }
}

/* /process — the seven build steps. `100px 1fr` gave the step number column
   100px and left the step text about 160px wide on a phone. */
.cb-step-row {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 28px;
  padding: 28px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
}
@media (max-width: 700px) {
  .cb-step-row { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 24px; }
  .cb-step-row__meta { display: flex; align-items: center; gap: 14px; }
  .cb-step-row__meta > * + * { margin-top: 0 !important; }
}

/* /resources/faq and /resources/sb-1211-guide — a sticky nav column beside the
   article. `240px 1fr` and `220px 1fr` held at 390px, so the nav took most of
   the screen and the article was clipped off the right edge. Below 900px the
   nav stops being sticky and sits above the article. */
.cb-doc-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: start; }
.cb-doc-layout--wide-gap { grid-template-columns: 220px minmax(0, 1fr); gap: 56px; }
.cb-doc-layout__nav { position: sticky; top: 100px; }
@media (max-width: 900px) {
  .cb-doc-layout,
  .cb-doc-layout--wide-gap { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .cb-doc-layout__nav { position: static; top: auto; }
  /* The nav becomes a horizontal strip of links so it costs one row, not ten. */
  .cb-doc-layout__nav ul { display: flex !important; flex-wrap: wrap; gap: 6px !important; }
  .cb-doc-layout__nav ul a {
    border-left: 0 !important;
    background: var(--paper-2);
    border-radius: 999px;
    padding: 8px 14px !important;
  }
}

/* /solutions/agencies — six program use-case cards. The inline `1fr 1fr` held
   at 390px, leaving each card about 150px wide with a three-line label, and
   the bullet dot dropped onto its own line above the label on some cards and
   not others. */
.cb-usecase-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cb-usecase-grid__item {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: #fff;
}
.cb-usecase-grid__dot {
  width: 8px; height: 8px; border-radius: 99px;
  background: var(--purple); margin-top: 8px; flex-shrink: 0;
}
.cb-usecase-grid__label { font-weight: 600; font-size: 15px; }
@media (max-width: 560px) {
  .cb-usecase-grid { grid-template-columns: minmax(0, 1fr); }
}

/* /resources/case-studies — the type/region filter bar. `auto 1fr auto 1fr`
   squeezed each chip group to about 60px, so every chip sat on its own line. */
.cb-filter-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 18px; align-items: center; }
.cb-filter-bar__label { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 860px) {
  .cb-filter-bar { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cb-filter-bar__label { margin-top: 6px; }
}

/* Shared Clever Tiny Homes design: keep the existing palette and components. */
.brand-cb { --maxw: 1440px; --gutter: 20px; --paper-2: #eeeeee; padding-top: 60px; }
.brand-cb.cb-home { padding-top: 0; }
.brand-cb .section { padding-block: 64px; }
.brand-cb .btn { white-space: normal; text-align: center; box-shadow: none; }
.brand-cb .btn--primary:hover { box-shadow: none; }
.brand-cb .nav { position: fixed; inset: 0 0 auto; border: 0; }
.brand-cb.cb-home .nav { background: transparent; }
.brand-cb.cb-home .nav.is-scrolled { background: #1a1a1a; }
.brand-cb .nav__row { height: 60px; gap: 16px; }
.brand-cb .nav__links { background: rgba(0,0,0,.4); border-radius: 10px; padding: 4px 12px; gap: 0; }
.brand-cb .nav__logo { font-size: 18px; }
.brand-cb .nav__logo-mark { background: none; border: 0; width: 34px; height: 43px; }
.brand-cb .nav__logo-mark svg { width: 34px; height: 34px; }
.brand-cb .nav__burger { border: 0; background: transparent; }
.brand-cb .nav__cta > a { display: inline-flex; }
.brand-cb .nav__cta .btn--sm { padding: 4px 14px; height: auto; min-height: 32px; font-size: 14px; }
@media (min-width: 1024px) {
  .brand-cb { padding-top: 80px; --gutter: 50px; }
  .brand-cb .section { padding-block: 80px; }
  .brand-cb .nav__row { height: 80px; }
  .brand-cb .nav__logo { width: 200px; justify-content: center; }
  .brand-cb .nav__cta .btn--sm { padding: 4px 30px; font-size: 16px; }
}
@media (max-width: 420px) {
  .brand-cb .nav__logo { font-size: 16px; gap: 6px; }
  .brand-cb .nav__cta { gap: 6px; }
  .brand-cb .nav__cta .btn--sm { font-size: 12px; padding: 5px 8px; }
  .brand-cb .nav__cta .arrow { display: none; }
}
@media (max-width: 767px) {
  .brand-cb .hero__inner { gap: 24px; }
  .brand-cb .hero__visual { min-height: 260px; }
  .brand-cb .hero .ribbon { margin-top: 16px !important; }
  .brand-cb .hero .hero__copy .lead { margin-bottom: 20px; }
}

.brand-cb .grid > * { min-width: 0; }
.brand-cb input, .brand-cb select, .brand-cb textarea { min-width: 0; max-width: 100%; }

}