/* ============================================================
   COOL ESTATE — colors_and_type.css
   Source of truth for tokens. TRI-TONE, LIGHT-ANCHORED. Import once per page.

   Repositioning (2026): outcomes-led "HVAC intelligence" company.
   The page is a deliberate rhythm of THREE section background modes —
   bone/WHITE (default), a deep cerulean BLUE block, and near-black INK —
   threaded with full-bleed imagery bands. Light still leads (it appears
   most), but blue and black are now first-class structural beats, not
   rare exceptions. Sympathetic to facil.ai's white/blue/black energy
   without copying it (see context/references/facil-ai-analysis.md).

   The brand scale (logo blue + ink + bone) never changes — only the
   semantic layer flips. Add one class to retheme a whole section:
     .ce-dark  / [data-theme="dark"]  → near-black ink beat
     .ce-blue  / [data-theme="blue"]  → deep cerulean blue beat
   (default / [data-theme="light"]    → bone canvas)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* ---------- BRAND ANCHOR (never altered) ---------- */
  --ce-blue-400: #6BA9DD;        /* THE logo blue. Never recolored. */
  --ce-blue-300: #8FC0E8;        /* Tint — hovers on light mode */
  --ce-blue-500: #4A8EC8;        /* Shade — keyword highlight + accent on light */
  --ce-blue-600: #2F6FA6;        /* Deep shade — text-on-bone link contrast */
  --ce-blue-700: #0C5BA6;        /* Deep cerulean — THE blue-section background (white text passes AA) */
  --ce-blue-800: #083D70;        /* Deepest cerulean — depth/cards/dividers on blue sections */
  --ce-electric: #3BA0FF;        /* Saturated sibling for dark-mode + on-blue glow accents */

  /* ---------- INK (darks) ---------- */
  --ce-ink-050: #06090D;         /* Deepest — dark-section background */
  --ce-ink-100: #0B1017;         /* Primary dark surface */
  --ce-ink-200: #111722;         /* Elevated dark surface 1 */
  --ce-ink-300: #18202E;         /* Elevated dark surface 2 (cards) */
  --ce-ink-400: #202A3B;         /* Hairlines on dark, subtle dividers */
  --ce-ink-500: #2B3750;         /* Disabled strokes */
  --ce-ink-600: #12263F;         /* The wordmark navy (from PNG) */

  /* ---------- BONE (lights) ---------- */
  --ce-bone-050: #FAFAF7;        /* Warm off-white — primary light canvas */
  --ce-bone-100: #F2F1EC;        /* Elevated light surface */
  --ce-bone-200: #E6E4DB;        /* Light hairlines */
  --ce-bone-300: #C9C6BA;        /* Disabled on light */

  /* ---------- NEUTRAL GREY (cross-mode) ---------- */
  --ce-grey-400: #8A93A3;        /* Meta text on dark */
  --ce-grey-500: #5F6878;        /* Meta text on light */

  /* ---------- SIGNATURE EDGE (surgical use only) ---------- */
  /* Blue-spectrum gradient. No magenta/pink — keeps the mark aligned with #6BA9DD. */
  --ce-cyan:    #3BE5E0;
  --ce-gradient: linear-gradient(95deg, #6BA9DD 0%, #3BA0FF 48%, #3BE5E0 100%);
  /* On-LIGHT gradient keyword (designer direction: gradient highlights, not solid).
     The signature --ce-gradient is too light for white (its stops fail contrast),
     so headline keywords on white/bone use this deeper variant. Both stops clear
     ~3:1 on white, so it is LARGE/DISPLAY ONLY (>=24px); body highlights stay
     solid --accent-ink. Never on the cerulean .ce-blue beat (use cyan .t-key). */
  --ce-gradient-on-light: linear-gradient(95deg, #2F6FA6 0%, #2E92E8 100%);
  /* Themeable heading-keyword gradient: picks the legible variant per section
     mode. .t-accent-grad reads this, so a gradient keyword auto-adapts. */
  --grad-key: var(--ce-gradient-on-light);
  /* Dark-section depth wash (designer direction: low-transparency gradient on
     dark sections). A near-flat, off-center RADIAL blue glow for depth, NOT a
     linear two-stop sweep (anti-slop). Scoped to .ce-dark only; reads as solid. */
  --ce-dark-grad: radial-gradient(120% 95% at 80% 8%, rgba(59,160,255,0.10) 0%, transparent 56%);

  /* ---------- PARTNERSHIP CO-BRAND (Facil.AI) ----------
     Facil's signature orange, woven in ONLY inside the .ce-facil partner block
     to symbolise the partnership. Cool Estate stays cold cerulean everywhere
     else; this is the single sanctioned exception to the "no facil orange" rule.
     --ce-facil-orange is the brand-true accent for large/graphical use (the
     co-brand gradient end, a hairline, a glow). --ce-facil-orange-300 is the
     lighter tint reserved for small text (the mono pillar keys) so it clears
     AA (~7:1) on the navy partner ground. The co-brand gradient runs Cool
     Estate cerulean INTO Facil orange: two brands meeting in one keyword. */
  --ce-facil-orange:     #FF6A1A;
  --ce-facil-orange-300: #FF8A45;
  --ce-facil-gradient:   linear-gradient(95deg, #6BA9DD 0%, #3BA0FF 45%, #FF6A1A 100%);

  /* ---------- SIGNAL (system states only) ---------- */
  --ce-ok:     #35C678;
  --ce-warn:   #F6B33C;
  --ce-danger: #E5484D;
  --ce-info:   var(--ce-blue-400);

  /* ---------- SEMANTIC (TRI-TONE — light is the default mode) ---------- */
  /* Canvas is SOLID WHITE (designer direction). Bone is retained as a
     first-class warm surface (--bg-warm) for opt-in sections, not demoted. */
  --bg-page:     #FFFFFF;
  --bg-warm:     var(--ce-bone-050); /* opt-in warm bone surface */
  --bg-elev-1:   var(--ce-bone-100);
  --bg-elev-2:   #FFFFFF;
  --bg-card:     #FFFFFF;
  --fg-primary:  var(--ce-ink-100);
  --fg-secondary:#2E384A;
  --fg-muted:    var(--ce-grey-500);
  --fg-inverse:  var(--ce-bone-050);
  --line-hair:   rgba(10,14,23,0.08);
  --line-soft:   rgba(10,14,23,0.12);
  --line-strong: rgba(10,14,23,0.20);
  --accent:      var(--ce-blue-500);   /* large/display keyword highlight on light (>=24px) */
  --accent-ink:  var(--ce-blue-600);   /* AA body-safe blue: links + body keyword (~5:1) */
  /* PRIMARY ACTION + highlight spark = #3BA0FF (designer direction). Used on CTA
     fills (with DARK ink — white text on #3BA0FF is 2.7:1, BANNED), glows,
     focus accents and hover. Text accents stay --accent/--accent-ink for AA. */
  --action:      var(--ce-electric);

  /* ---------- TYPE ---------- */
  --ff-display: 'Space Grotesk', system-ui, sans-serif;
  --ff-body:    'Space Grotesk', system-ui, sans-serif;
  --ff-mono:    'JetBrains Mono', ui-monospace, 'Menlo', monospace;
  --ff-serif:   'Instrument Serif', 'Times New Roman', serif;

  /* Type scale — RESPONSIVE with generous minimums.
     Every floor is legible when screen-shared / zoomed out: body never
     below 16px, headings clamp up fluidly and never shrink past their floor. */
  --fs-eyebrow: clamp(12px, 0.55vw + 0.45rem, 14px);
  --fs-micro:   13px;
  --fs-caption: 12px;                              /* disclaimers / attribution */
  --fs-body:    clamp(16px, 0.40vw + 0.92rem, 19px);
  --fs-body-lg: clamp(18px, 0.60vw + 1.00rem, 22px);
  --fs-nav:     clamp(15px, 0.30vw + 0.85rem, 17px); /* header/menu legibility floor */
  --fs-h6: clamp(18px, 0.40vw + 1.00rem, 20px);
  --fs-h5: clamp(20px, 1.00vw + 0.90rem, 24px);
  --fs-h4: clamp(24px, 1.60vw + 0.90rem, 30px);
  --fs-h3: clamp(28px, 2.40vw + 0.90rem, 40px);
  --fs-h2: clamp(36px, 4.00vw + 0.50rem, 60px);
  --fs-h1: clamp(46px, 6.00vw + 0.40rem, 92px);
  --fs-mega: clamp(60px, 10vw, 168px);

  --lh-display: 0.94;
  --lh-heading: 1.08;
  --lh-body:    1.55;
  --lh-tight:   1.2;

  --ls-display: -0.04em;
  --ls-heading: -0.02em;
  --ls-body:    0em;
  --ls-eyebrow: 0.14em;
  --ls-mono:    0.04em;

  /* ---------- IMAGERY TREATMENT ("seed image → styled output") ---------- */
  /* Client/manufacturer reference images are normalised with a consistent
     treatment so everything looks bespoke: reduced saturation so colour
     doesn't fight the UI, a confident contrast lift, and a cool darkening tint.
     Owner direction (2026-06): keep the cinematic feel but read BRIGHTER, with
     more contrast and a cooler blue cast, not moody. So brightness is lifted to
     0.97, contrast to 1.12, and the tint is a softer, bluer navy (top barely
     touched, bottom kept enough for headline legibility on image bands). */
  --img-saturate:   0.82;
  --img-contrast:   1.12;
  --img-brightness: 0.97;
  --img-tint:  linear-gradient(180deg, rgba(8,22,42,0.06) 0%, rgba(7,16,30,0.40) 100%);
  --img-tint-blue: linear-gradient(180deg, rgba(24,46,76,0.16) 0%, rgba(7,16,30,0.48) 100%);

  /* ---------- PRODUCT STUDIO (cutout → one branded backdrop) ---------- */
  /* STUDIO MODE: transparent-PNG product cutouts dropped onto ONE coherent
     cool→graphite backdrop with a consistent contact shadow and one implied
     light direction, so a stainless monoblock and a retail box read as the
     same shoot. Raw green-screen / white-box shots are never used. */
  --studio-bg:       radial-gradient(118% 92% at 50% 16%, #20344A 0%, #0E1925 56%, #080D14 100%);
  --studio-vignette: radial-gradient(120% 100% at 50% 44%, transparent 50%, rgba(4,7,11,0.58) 100%);
  --studio-pool:     radial-gradient(58% 48% at 50% 36%, rgba(107,169,221,0.20) 0%, transparent 72%);
  --studio-shadow:   radial-gradient(closest-side, rgba(4,7,11,0.60) 0%, transparent 76%);
  --studio-light:    drop-shadow(0 22px 26px rgba(4,7,11,0.45)); /* one implied top light */

  /* ---------- SPACING (4px base) ---------- */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 96px;
  --s-13: 128px;
  --s-14: 160px;

  /* ---------- RADII ---------- */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;       /* buttons */
  --r-3: 8px;       /* card ceiling — catalogue cards / message blocks / buttons stay <= this */
  --r-4: 12px;      /* image frames inside cards */
  --r-5: 24px;      /* MAX radius — large contained blocks only; never on catalogue cards/buttons; 48px is forbidden */
  --r-pill: 999px;  /* status badges ONLY */

  /* ---------- SHADOWS (usable on the light canvas, kept restrained) ---------- */
  --sh-1: 0 1px 2px rgba(10, 14, 23, 0.06), 0 1px 1px rgba(10, 14, 23, 0.04);
  --sh-2: 0 4px 12px rgba(10, 14, 23, 0.08), 0 1px 2px rgba(10, 14, 23, 0.05);
  --sh-3: 0 18px 40px rgba(10, 14, 23, 0.12), 0 2px 6px rgba(10, 14, 23, 0.06);
  --sh-glow: 0 0 0 1px rgba(107,169,221,0.45), 0 0 48px 0 rgba(59,160,255,0.30);
  --sh-glow-electric: 0 0 0 1px rgba(59,160,255,0.6), 0 0 60px 0 rgba(59,160,255,0.55);

  /* ---------- MOTION ---------- */
  --ease-out:  cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in:   cubic-bezier(0.6, 0, 0.8, 0.2);
  --ease-io:   cubic-bezier(0.5, 0, 0.2, 1);
  --d-fast:    140ms;
  --d-base:    220ms;
  --d-slow:    520ms;

  /* ---------- GRID ---------- */
  --grid-max: 1360px;
  --grid-gutter: var(--s-8);
  --grid-gutter-lg: var(--s-10);
}

/* Explicit light scheme — identical to root, kept so [data-theme="light"]
   markup keeps resolving to the bone canvas. */
[data-theme="light"] {
  --bg-page:     #FFFFFF;
  --bg-warm:     var(--ce-bone-050);
  --bg-elev-1:   var(--ce-bone-100);
  --bg-elev-2:   #FFFFFF;
  --bg-card:     #FFFFFF;
  --fg-primary:  var(--ce-ink-100);
  --fg-secondary:#2E384A;
  --fg-muted:    var(--ce-grey-500);
  --fg-inverse:  var(--ce-bone-050);
  --line-hair:   rgba(10,14,23,0.08);
  --line-soft:   rgba(10,14,23,0.12);
  --line-strong: rgba(10,14,23,0.20);
  --accent:      var(--ce-blue-500);
  --accent-ink:  var(--ce-blue-600);
  --grad-key:    var(--ce-gradient-on-light);
}

/* Dark scheme — used SPARINGLY for contrast sections (hero scrim, dealer CTA,
   footer). .ce-dark also paints the element so a single class flips a section. */
[data-theme="dark"], .ce-dark {
  --bg-page:     var(--ce-ink-050);
  --bg-elev-1:   var(--ce-ink-100);
  --bg-elev-2:   var(--ce-ink-200);
  --bg-card:     var(--ce-ink-300);
  --fg-primary:  #F5F6F8;
  --fg-secondary:#B7BFCE;
  --fg-muted:    var(--ce-grey-400);
  --fg-inverse:  var(--ce-ink-100);
  --line-hair:   rgba(255,255,255,0.06);
  --line-soft:   rgba(255,255,255,0.10);
  --line-strong: rgba(255,255,255,0.18);
  --accent:      var(--ce-blue-400);
  --accent-ink:  var(--ce-blue-300);
  /* On dark beats the signature blue gradient reads with full contrast. */
  --grad-key:    var(--ce-gradient);
}
/* Dark sections carry a near-flat radial depth wash over the solid ink fill
   (designer direction: low-transparency gradient on dark). Depth, not colour. */
.ce-dark { background: var(--ce-dark-grad), var(--bg-page); color: var(--fg-primary); }

/* Blue scheme — a deep cerulean section beat (the tri-tone's middle voice).
   A SOLID colour block, never a gradient. White text; the keyword spark on
   blue becomes cyan/white. .ce-blue also paints the element so one class flips
   a whole section. The sacred logo blue #6BA9DD stays the accent, not the bg. */
[data-theme="blue"], .ce-blue {
  --bg-page:     var(--ce-blue-700);
  --bg-elev-1:   #0E66B8;
  --bg-elev-2:   var(--ce-blue-800);
  --bg-card:     rgba(255,255,255,0.06);
  --fg-primary:  #F4F8FD;
  --fg-secondary:#D6E6F6;
  --fg-muted:    #A9C6E4;
  --fg-inverse:  var(--ce-ink-100);
  --line-hair:   rgba(255,255,255,0.14);
  --line-soft:   rgba(255,255,255,0.22);
  --line-strong: rgba(255,255,255,0.34);
  --accent:      var(--ce-cyan);        /* cyan keyword spark pops on deep blue */
  --accent-ink:  #FFFFFF;
}
.ce-blue { background: var(--bg-page); color: var(--fg-primary); }

/* ===== BASE RESET ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--ce-blue-400); color: var(--ce-ink-100); }

/* ===== TYPE UTILITIES ===== */
.t-mega {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs-mega);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}
.t-h1 {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}
.t-h2 {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}
.t-h3 {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  margin: 0;
  text-wrap: balance;
}
.t-h4 {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs-h4);
  line-height: 1.15;
  letter-spacing: var(--ls-heading);
  margin: 0;
}
.t-h5 {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs-h5);
  line-height: 1.25;
  letter-spacing: var(--ls-heading);
  margin: 0;
}
.t-h6 {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--fs-h6);
  line-height: 1.3;
  margin: 0;
}
.t-body    { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-secondary); text-wrap: pretty; }
.t-body-lg { font-size: var(--fs-body-lg); line-height: 1.5; color: var(--fg-secondary); text-wrap: pretty; }
.t-micro   { font-size: var(--fs-micro); line-height: 1.5; color: var(--fg-muted); }

.t-eyebrow {
  font-family: var(--ff-mono);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--fg-muted);
  font-weight: 500;
}
.t-mono {
  font-family: var(--ff-mono);
  letter-spacing: var(--ls-mono);
}

/* ----- FONT MIXING: serif + sans is a SYSTEM RULE, not a one-off ----- */
/* Sans (Space Grotesk) carries everything structural — display, body, UI.
   Serif (Instrument Serif italic) is reserved for EMPHASIS KEYWORDS dropped
   inside a sans headline. It is never a body font and never a UI font. */
.t-serif {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}
/* Inline emphasis keyword inside a display headline: serif italic, sentence
   case (drops the headline's uppercase), optically aligned. */
.t-emph {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.005em;
}

/* ----- KEYWORD HIGHLIGHT: brand blue mid-sentence emphasis ----- */
/* The reusable "highlight keyword" text style. Wrap a word or short phrase
   INSIDE a headline to draw the eye mid-sentence — not just for links/buttons.
   Resolves to the bone-safe blue shade on light, the logo blue on dark. */
.t-key { color: var(--accent); }
.t-key--ink { color: var(--accent-ink); }
/* Combine with .t-emph for a serif-italic blue keyword: class="t-key t-emph" */

.t-accent-blue { color: var(--accent); }
/* Heading-keyword gradient. Reads the themeable --grad-key so it auto-picks the
   legible variant per mode: the deeper on-light gradient on white/bone, the
   signature blue gradient on dark beats. LARGE/DISPLAY keywords only (>=24px);
   never on body copy, never on a primary CTA fill, never on the cerulean beat. */
.t-accent-grad {
  background: var(--grad-key);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ----- PRODUCT NAME LOCKUPS ----- */
/* Brand product names render in their own lockup, never as plain body text. */
.ce-lockup {
  font-family: var(--ff-display);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.ce-lockup--facil { letter-spacing: -0.015em; }
/* "dubbll" is ALWAYS all-lowercase — enforced here so it can't be title-cased. */
.ce-lockup--dubbll {
  text-transform: lowercase !important;
  font-weight: 700;
  letter-spacing: -0.035em;
}

/* ----- DISCLAIMER / ATTRIBUTION CAPTION ----- */
/* Low-emphasis, de-prioritised. Must never read as prominent. */
.ce-disclaimer, .t-caption {
  font-family: var(--ff-mono);
  font-size: var(--fs-caption);
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--fg-muted);
  opacity: 0.7;
  font-weight: 400;
}

/* ===== LAYOUT UTILITIES ===== */
.ce-container {
  width: 100%;
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: 0 var(--s-8);
}
.ce-section {
  padding-block: var(--s-13);
}
.ce-hair-top    { border-top: 1px solid var(--line-hair); }
.ce-hair-bottom { border-bottom: 1px solid var(--line-hair); }

/* ===== BUTTONS ===== */
.ce-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 14px 22px;
  font-family: var(--ff-display);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid transparent;
  border-radius: var(--r-2);
  cursor: pointer;
  transition: background var(--d-base) var(--ease-out),
              color var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out),
              transform var(--d-fast) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out);
  background: transparent;
  color: inherit;
}
.ce-btn:active { transform: scale(0.98); }
/* PRIMARY = #3BA0FF (--action) with DARK INK text. White text on #3BA0FF is
   2.7:1 (fails AA) and is BANNED; dark ink on #3BA0FF is ~7:1. This is the one
   primary fill (the legacy --electric/--gradient aliases route here too). */
.ce-btn--primary {
  background: var(--action);
  color: var(--ce-ink-050);
  border-color: var(--action);
}
.ce-btn--primary:hover {
  background: #5AB0FF;
  border-color: #5AB0FF;
  box-shadow: var(--sh-glow-electric);
}
/* On dark sections the electric primary already reads bright; keep dark ink. */
.ce-dark .ce-btn--primary, [data-theme="dark"] .ce-btn--primary {
  background: var(--action); color: var(--ce-ink-050); border-color: var(--action);
}
.ce-dark .ce-btn--primary:hover, [data-theme="dark"] .ce-btn--primary:hover {
  background: #5AB0FF; border-color: #5AB0FF;
}
/* On a blue section the primary inverts to a white button with blue text. */
.ce-blue .ce-btn--primary, [data-theme="blue"] .ce-btn--primary {
  background: #FFFFFF; color: var(--ce-blue-700); border-color: #FFFFFF;
}
.ce-blue .ce-btn--primary:hover, [data-theme="blue"] .ce-btn--primary:hover {
  background: #EAF3FC; border-color: #EAF3FC; box-shadow: none;
}
.ce-blue .ce-btn--ghost, [data-theme="blue"] .ce-btn--ghost { color: #FFFFFF; }
.ce-blue .ce-btn--ghost:hover, [data-theme="blue"] .ce-btn--ghost:hover {
  border-color: #FFFFFF; color: #FFFFFF;
}
.ce-btn--electric {
  background: var(--ce-electric);
  color: var(--ce-ink-050);
  border-color: var(--ce-electric);
}
.ce-btn--electric:hover { box-shadow: var(--sh-glow-electric); background: #5AB0FF; border-color: #5AB0FF; }
/* Legacy alias — retained so existing markup doesn't break. Routes to electric blue, not pink. */
.ce-btn--gradient {
  background: var(--ce-electric);
  color: var(--ce-ink-050);
  border-color: var(--ce-electric);
}
.ce-btn--gradient:hover { box-shadow: var(--sh-glow-electric); }
.ce-btn--ghost {
  background: transparent;
  color: var(--fg-primary);
  border-color: var(--line-strong);
}
.ce-btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.ce-btn--link {
  padding: 0;
  border: 0;
  color: var(--accent-ink); /* AA on bone (#2F6FA6 ~5:1); --accent #4A8EC8 is large-display only */
  letter-spacing: 0.06em;
}

/* ===== KEYBOARD FOCUS — visible tokenized ring on every interactive surface.
   WCAG 2.4.7 / 2.4.13. Ring = --accent-ink with a --bg-page gap so it adapts per
   theme (bone → deep blue, dark → light blue, blue → white). ===== */
.ce-btn:focus-visible,
.ce-btn--link:focus-visible,
.ce-input:focus-visible, .ce-select:focus-visible, .ce-textarea:focus-visible,
.ce-logostrip__item:focus-visible,
.ce-badge:focus-visible,
a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg-page), 0 0 0 4px var(--accent-ink);
  border-radius: var(--r-2);
}

/* ===== BADGE / CHIP ===== */
.ce-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  border: 1px solid var(--line-strong);
  color: var(--fg-secondary);
  background: transparent;
}
.ce-badge--ok     { color: #157A45; border-color: color-mix(in oklab, var(--ce-ok) 50%, transparent); }
.ce-badge--warn   { color: #9A6A12; border-color: color-mix(in oklab, var(--ce-warn) 55%, transparent); }
.ce-badge--danger { color: #C0353A; border-color: color-mix(in oklab, var(--ce-danger) 50%, transparent); }
.ce-badge--accent { color: var(--ce-blue-600); border-color: color-mix(in oklab, var(--ce-blue-400) 60%, transparent); }
.ce-badge--neutral { color: var(--fg-muted); border-color: var(--line-soft); }
.ce-dark .ce-badge--ok, [data-theme="dark"] .ce-badge--ok       { color: var(--ce-ok); }
.ce-dark .ce-badge--warn, [data-theme="dark"] .ce-badge--warn   { color: var(--ce-warn); }
.ce-dark .ce-badge--accent, [data-theme="dark"] .ce-badge--accent { color: var(--ce-blue-400); }
.ce-blue .ce-badge, [data-theme="blue"] .ce-badge { color: #F4F8FD; border-color: rgba(255,255,255,0.34); }
.ce-blue .ce-badge--accent, [data-theme="blue"] .ce-badge--accent { color: var(--ce-cyan); border-color: color-mix(in oklab, var(--ce-cyan) 55%, transparent); }

/* ===== CARDS ===== */
.ce-card {
  background: var(--bg-card);
  border: 1px solid var(--line-hair);
  border-radius: var(--r-0);
  padding: var(--s-8);
  transition: border-color var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-out);
}
.ce-card:hover { border-color: var(--accent); box-shadow: var(--sh-2); }
.ce-dark .ce-card:hover, [data-theme="dark"] .ce-card:hover { box-shadow: none; }
.ce-blue .ce-card, [data-theme="blue"] .ce-card { backdrop-filter: blur(2px); }
.ce-blue .ce-card:hover, [data-theme="blue"] .ce-card:hover { box-shadow: none; border-color: rgba(255,255,255,0.5); }
.ce-card--photo { border-radius: var(--r-4); } /* 12px image frame, within the 24px ceiling */

/* ===== IMAGERY: "seed image → styled output" pipeline ===== */
/* Wrap any reference image in .ce-media. The img gets the consistent
   bespoke treatment; .ce-media--seed adds the darkening tint overlay. */
.ce-media {
  position: relative;
  overflow: hidden;
  background: var(--ce-ink-200);
}
.ce-media > img,
.ce-media > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(var(--img-saturate)) contrast(var(--img-contrast)) brightness(var(--img-brightness));
}
.ce-media--seed::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--img-tint);
}
.ce-media--blue::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--img-tint-blue);
  mix-blend-mode: multiply;
}
/* Full-bleed, large hi-res section image placeholder when no photo is supplied. */
.ce-media--placeholder {
  background:
    radial-gradient(120% 90% at 50% 0%, #1a2338 0%, #0a0f18 72%),
    var(--ce-ink-100);
}
/* .ce-media--intel: the optional "intelligence layer" composited over a
   cinematic shot. A restrained Cool Estate blue glow plus a few hairline scan
   lines, so a real photograph reads as a custom, brand-owned frame and not
   stock. The blue shimmer ties the landscape back to the brand (cool, never
   orange). Screen blend so it adds light, not muddy paint. Subtle by design:
   reserved for Technologies/Home heroes and Built-Estate bands; compose with
   .ce-media--seed. Honours prefers-reduced-motion (it is static anyway). */
.ce-media--intel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;                 /* above the seed darkening tint so the glow reads */
  pointer-events: none;
  background:
    radial-gradient(64% 56% at 80% 16%, rgba(59,160,255,0.24) 0%, transparent 62%),
    radial-gradient(50% 60% at 12% 92%, rgba(59,229,224,0.12) 0%, transparent 64%),
    repeating-linear-gradient(116deg, rgba(143,192,232,0.06) 0 1px, transparent 1px 30px);
  mix-blend-mode: screen;
}

/* ===== PRODUCT STUDIO (cutout → one branded backdrop) =====
   STUDIO MODE for Products + Resources. The product image must be a clean
   transparent-PNG cutout; drop it into .ce-studio__stage and it lands on one
   coherent cool→graphite backdrop with a consistent contact shadow and one
   implied light direction. Same backdrop, same shadow, same light across the
   whole catalogue, so a family on a grid reads as one shoot. Never object-fit:
   cover a cutout (it must keep its silhouette) and never publish a raw green/
   white-box shot here. .ce-studio--pool adds the faint light pool behind a hero
   item; .ce-studio--in-context swaps the backdrop for a treated environment
   photo (IN-CONTEXT MODE) carried by a nested .ce-media. */
.ce-studio {
  position: relative;
  overflow: hidden;
  background: var(--studio-bg);
  display: grid;
  isolation: isolate;
}
.ce-studio::before {            /* vignette keeps the eye on the product */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--studio-vignette); pointer-events: none;
}
.ce-studio--pool::before {      /* + faint light pool to hint the intelligence layer */
  background: var(--studio-pool), var(--studio-vignette);
}
.ce-studio__stage {
  position: relative; z-index: 2;
  display: grid; place-items: center;
  width: 100%; height: 100%;
  padding: var(--s-8);
}
.ce-studio__stage > img {       /* the cutout — contain, never cover */
  max-width: 76%; max-height: 76%;
  width: auto; height: auto;
  object-fit: contain;
  filter: var(--studio-light);
}
/* Consistent soft contact shadow at the base: same direction + softness everywhere. */
.ce-studio__shadow {
  position: absolute; z-index: 1;
  left: 50%; bottom: 12%;
  width: 54%; height: 5%;
  transform: translateX(-50%);
  background: var(--studio-shadow);
  filter: blur(4px);
  pointer-events: none;
}
.ce-studio__cap {
  position: absolute; z-index: 3; left: var(--s-5); bottom: var(--s-4);
  font-family: var(--ff-mono); font-size: 11px;
  letter-spacing: var(--ls-mono); color: var(--ce-blue-300);
}
/* IN-CONTEXT MODE: the same product composited into a treated Built-Estate
   environment. The environment photo rides a nested .ce-media (seed treatment)
   so the composite shares the catalogue grade. */
.ce-studio--in-context { background: var(--ce-ink-200); }
.ce-studio--in-context > .ce-media { position: absolute; inset: 0; z-index: 0; }
/* .ce-studio--intel: the product "intelligence" treatment. A subtle Cool Estate
   blue glow behind the cutout plus one hairline contour ring, inferring the
   intelligence layer around real equipment. The product itself is NEVER
   recoloured (buyers must trust what they see); the glint lives in the backdrop
   and a soft blue drop-shadow on the silhouette. Subtle but noticeable; pairs
   with --pool for hero items. */
.ce-studio--intel::after {
  content: ""; position: absolute; z-index: 1; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(44% 40% at 50% 44%, rgba(59,160,255,0.24) 0%, transparent 70%),
    radial-gradient(closest-side at 50% 44%, transparent 0 37%, rgba(107,169,221,0.34) 37% 38%, transparent 39%);
}
.ce-studio--intel .ce-studio__stage > img {
  filter: var(--studio-light) drop-shadow(0 0 24px rgba(59,160,255,0.34));
}

/* ===== HERO ===== */
.ce-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(560px, 74vh, 780px);
  overflow: hidden;
  isolation: isolate;
}
.ce-hero__media { position: absolute; inset: 0; z-index: 0; }
/* Darker overlay (designer direction) — applied to the SCRIM ONLY, so headline
   and CTAs stay legible without darkening the global photo grade (--img-* stay
   brighter per the owner's imagery direction). */
.ce-hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6,9,13,0.45) 0%, rgba(6,9,13,0.20) 32%, rgba(6,9,13,0.82) 100%),
    linear-gradient(90deg, rgba(6,9,13,0.66) 0%, transparent 62%);
}
.ce-hero__inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--grid-max);
  margin: 0 auto;
  padding: var(--s-12) var(--s-10) var(--s-13);
  color: #F5F6F8;
}
.ce-hero__cta { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-8); }
/* subtle scroll-driven motion element */
.ce-hero__scroll {
  position: absolute; left: 50%; bottom: var(--s-6); z-index: 3;
  transform: translateX(-50%);
  width: 24px; height: 40px; border: 1px solid rgba(255,255,255,0.35);
  border-radius: var(--r-pill);
}
.ce-hero__scroll::after {
  content: ""; position: absolute; left: 50%; top: 7px;
  width: 3px; height: 8px; border-radius: 2px; background: var(--ce-blue-400);
  transform: translateX(-50%);
  animation: ce-scroll 1.8s var(--ease-io) infinite;
}
@keyframes ce-scroll {
  0% { opacity: 0; transform: translate(-50%, 0); }
  35% { opacity: 1; }
  70% { opacity: 0; transform: translate(-50%, 14px); }
  100% { opacity: 0; }
}

/* ===== FULL-BLEED IMAGE BAND ===== */
/* A 100%-width image strip used as a rhythm beat BETWEEN colour blocks
   (white → [image band] → blue → [image band] → black). Carries the seed
   treatment; an optional overlaid headline sits bottom-left. This is how
   full-bleed imagery threads the tri-tone, not a floating boxed photo. */
.ce-imageband {
  position: relative;
  width: 100%;
  min-height: clamp(320px, 46vh, 560px);
  overflow: hidden;
  display: grid;
  align-items: end;
  isolation: isolate;
}
.ce-imageband .ce-media { position: absolute; inset: 0; z-index: 0; }
.ce-imageband__inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--grid-max);
  margin: 0 auto;
  padding: var(--s-10) var(--s-10) var(--s-11);
  color: #F5F6F8;
}
.ce-imageband--tall { min-height: clamp(440px, 64vh, 760px); }

/* ===== LOGO STRIP / SOCIAL PROOF ===== */
.ce-logostrip {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-6) var(--s-9);
}
.ce-logostrip__item {
  font-family: var(--ff-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-secondary);
  opacity: 0.85;
  transition: opacity var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out);
}
.ce-logostrip__item:hover { opacity: 1; color: var(--fg-primary); }
.ce-logostrip__item img { height: 22px; width: auto; opacity: 0.8; filter: grayscale(1); }
.ce-logostrip__item:hover img { opacity: 1; filter: grayscale(0); }

/* ===== "3 LAYERS OF INTELLIGENCE" overview ===== */
.ce-layers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-hair);
  border: 1px solid var(--line-hair);
}
.ce-layer {
  background: var(--bg-card);
  padding: var(--s-9);
  display: grid;
  gap: var(--s-4);
  align-content: start;
  border: 1px solid transparent;
  transition: background var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-out);
}
/* Hover: primary-blue border + a slight grow for a more interactive feel
   (designer direction HV1/HV2). transform via transition, not a keyframe;
   reduced-motion disables the grow below. */
.ce-layer:hover {
  background: var(--bg-elev-1);
  border-color: var(--action);
  box-shadow: var(--sh-2);
  transform: scale(1.02);
  position: relative; z-index: 1;
}
.ce-dark .ce-layer:hover, [data-theme="dark"] .ce-layer:hover { box-shadow: none; }
.ce-layer__index {
  font-family: var(--ff-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

/* ===== STATS / CREDIBILITY BAND ===== */
.ce-statband {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-8);
}
.ce-stat { display: grid; gap: var(--s-2); border-top: 1px solid var(--line-strong); padding-top: var(--s-4); }
.ce-stat__num {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.ce-stat__label { font-family: var(--ff-mono); font-size: 11px; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-muted); }
.ce-stat__cap   { font-family: var(--ff-mono); font-size: var(--fs-micro); color: var(--fg-muted); letter-spacing: var(--ls-mono); }

/* ===== MESSAGE BLOCK: "no hardware / no capex / friction-free" ===== */
/* Prominent reassurance block that disarms integration / training / BOM fear. */
.ce-message {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-3);
  background:
    radial-gradient(900px 360px at 12% -10%, color-mix(in oklab, var(--ce-blue-400) 14%, transparent), transparent 60%),
    var(--bg-card);
  padding: clamp(var(--s-9), 5vw, var(--s-12));
  box-shadow: var(--sh-2);
}
.ce-dark .ce-message, [data-theme="dark"] .ce-message { box-shadow: none; }
.ce-blue .ce-message, [data-theme="blue"] .ce-message { box-shadow: none; background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.22); }
.ce-message__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-8);
  margin-top: var(--s-9);
}
.ce-message__item { display: grid; gap: var(--s-3); border-top: 2px solid var(--accent); padding-top: var(--s-5); }
.ce-message__no {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--fs-h4);
  text-transform: uppercase;
  letter-spacing: var(--ls-heading);
}

/* ===== SECTOR IMAGERY SLOTS ===== */
/* Per-technology imagery that maps to each solution's target sector. */
.ce-sector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-5);
}
.ce-sector-tile {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-3);
  overflow: hidden;
  display: grid;
  align-items: end;
}
.ce-sector-tile .ce-media { position: absolute; inset: 0; }
.ce-sector-tile__body { position: relative; z-index: 2; padding: var(--s-6); color: #F5F6F8; }
.ce-sector-tile__label {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--fs-h5);
  text-transform: uppercase;
  letter-spacing: var(--ls-heading);
  line-height: 1.04;
}
.ce-sector-tile__eyebrow {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ce-blue-300);
}

/* ===== FACIL PARTNER BLOCK ===== */
/* Co-brand beat for Cool Estate's primary technology (Facil.AI). Borrows Facil's
   energy (navy ground, four value pillars, founder quote) rendered in Cool
   Estate's system. Use on a .ce-blue or .ce-dark section. Highest edge on dial. */
.ce-facil { position: relative; }
/* Partnership co-brand: Facil's orange is scoped to this block only. The one
   gradient keyword in the headline runs cerulean -> Facil orange. */
.ce-facil .t-accent-grad {
  background: var(--ce-facil-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ce-facil__pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6);
  margin-top: var(--s-9);
}
.ce-facil__pillar {
  display: grid;
  gap: var(--s-2);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255,255,255,0.22);
}
.ce-facil__pillar-k {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  /* Co-brand spark: Facil orange (light tint, ~7:1 on navy) instead of cyan. */
  color: var(--ce-facil-orange-300);
}
.ce-facil__pillar-v {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--fs-h5);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: var(--ls-heading);
  color: #F5F6F8;
}
.ce-facil__quote {
  margin-top: var(--s-10);
  max-width: 44ch;
  /* Co-brand: the Facil CEO quote carries a thin Facil-orange rule. */
  border-left: 2px solid var(--ce-facil-orange);
  padding-left: var(--s-6);
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: var(--fs-h4);
  line-height: 1.2;
  color: #F5F6F8;
}
.ce-facil__cite {
  margin-top: var(--s-4);
  font-family: var(--ff-mono);
  font-size: 12px;
  /* Small uppercase mono label: craft/typography.md caps floor is 0.06em.
     --ls-mono (0.04em) is for tabular numerals/code, not ALL CAPS. */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ce-blue-300);
}

/* ===== FORMS ===== */
.ce-input, .ce-select, .ce-textarea {
  width: 100%;
  background: var(--bg-elev-1);
  color: var(--fg-primary);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-2);
  padding: 12px 14px;
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  transition: border-color var(--d-base) var(--ease-out);
}
.ce-input:focus, .ce-select:focus, .ce-textarea:focus { outline: none; border-color: var(--accent); }
.ce-label { font-family: var(--ff-mono); font-size: 11px; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-muted); }

/* ===== TEXTURES ===== */
.ce-grid-bg {
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--fg-primary) 5%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--fg-primary) 5%, transparent) 1px, transparent 1px);
  background-size: 80px 80px;
}
.ce-noise::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMDAnIGhlaWdodD0nMjAwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPScyJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzIwMCcgaGVpZ2h0PScyMDAnIGZpbHRlcj0ndXJsKCNuKScgb3BhY2l0eT0nMC45Jy8+PC9zdmc+");
}

/* ===== MOTION PRIMITIVES ===== */
@keyframes ce-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ce-rise { animation: ce-rise var(--d-slow) var(--ease-out) both; }
.ce-rise--d1 { animation-delay: 60ms; }
.ce-rise--d2 { animation-delay: 120ms; }
.ce-rise--d3 { animation-delay: 180ms; }
.ce-rise--d4 { animation-delay: 240ms; }

/* ===== RESPONSIVE ===== */
@media (max-width: 860px) {
  .ce-layers, .ce-message__row { grid-template-columns: 1fr; }
  .ce-facil__pillars { grid-template-columns: repeat(2, 1fr); }
  .ce-statband { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .ce-hero__scroll::after { animation: none; }
  .ce-layer:hover { transform: none; } /* no grow when motion is reduced */
}