/* bodaq.net: the Bodaq installer network, in the main Bodaq branding.
   Charcoal heroes and bands with a dotted "network" grid, light sections between them. The colours
   are bodaq.com's (the --bq-* tokens below): charcoal as the only dark surface, Bodaq teal as the
   working accent, mint for small accents on charcoal, white and warm grey surfaces, and the logo amber
   only in the logo and in the accent part of the line icons (as bodaq.com's icons do).
   Teal comes in three roles: --teal-line (#099883: strokes, borders, focus), --teal-ink (#07806e:
   teal text on white; the deeper --bq-teal-deep on the warm grey) and --teal (#07806e: fills that carry
   white text, since white on #099883 is only 3.6:1).
   Tokens first; every colour below comes from them.
   Type comes from the shared Bodaq kit, assets/css/bodaq-type.css (loaded before this file): Proxima
   Nova at the main site's sizes. This file sets no font-family and no
   letter-spacing. Text roles use a kit class in the markup (.t-hero, .t-lead, .t-h2 to .t-h4,
   .t-eyebrow, .t-stat, .t-nav-menu) or a kit alias (.kicker, .lede, .hero-sub, .btn, .nav-link,
   .foot-h, .footer-link, .foot-blurb); component rules below take --t-* tokens. The few rem values
   are copies of bodaq.com's own form options; the px sizes left are icons
   and the map labels. */
:root {
  /* Bodaq brand tokens, the same values as bodaq.com */
  --bq-teal: #099883;
  --bq-teal-text: #07806e;
  --bq-charcoal: #222021;
  --bq-amber: #de992a;
  --bq-heading: #333333;
  --bq-body: #5c5b5b;
  --bq-body-2: #656565;
  --bq-surface: #ffffff;
  --bq-warm: #f6f5f4;
  --bq-border: #e4e2e2;
  --bq-mint: #c8faeb;
  --bq-tint: #dfede9;
  /* Two shades derived from the brand tokens:
     teal-deep: hover on teal fills, card hovers under dimmed white text, and teal text where the
     background is not plain white (warm grey 6.0:1, mint 5.7:1; #07806e is only 4.46:1 on the warm grey);
     amber-light: the icon accent on charcoal and teal (amber 40% on white, as bodaq.com's light icons). */
  --bq-teal-deep: #066a5c;
  --bq-amber-light: #f2d6aa;

  /* This site's colour roles, mapped to the tokens */
  --char: var(--bq-charcoal);
  --char2: #2b292a; /* charcoal a step lighter: step dots on charcoal */
  --char3: #353334; /* swatch frames on charcoal */
  --deep: var(--bq-teal-deep);
  --teal: var(--bq-teal-text);
  --teal2: var(--bq-teal-deep);
  --teal-ink: var(--bq-teal-text);
  --teal-line: var(--bq-teal);
  --teal-t: rgba(9, 152, 131, 0.08);
  --mint: var(--bq-mint);
  --brass: var(--bq-amber);
  --brass-t: rgba(223, 237, 233, 0.35);
  --paper: var(--bq-surface);
  --wash: var(--bq-warm);
  --wash2: #edebeb;
  --line: var(--bq-border);
  --line2: #d4d2d2;
  --ink: var(--bq-heading);
  --soft: var(--bq-body);
  --mute: var(--bq-body-2);
  --error: #b3261e;
  --note-bg: #fff6e0;
  --maxw: 1320px;
  --px: clamp(16px, 4vw, 40px);
  --py: clamp(56px, 7vw, 104px);
  --radius: 10px;
  --shadow: 0 30px 70px -40px rgba(34, 32, 33, 0.45);
  --dots: radial-gradient(rgba(200, 250, 235, 0.12) 1px, transparent 1.4px);
  color-scheme: light;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
/* Headings, paragraphs, labels and inputs take their type from the kit's element defaults. */
h1, h2, h3, h4 { margin: 0; }
p { margin: 0; color: var(--soft); }
p + p { margin-top: 14px; }
ul, ol { margin: 0; padding: 0; }
[hidden] { display: none !important; }
[id], .success, .form { scroll-margin-top: 100px; }
:focus-visible { outline: 3px solid var(--teal-line); outline-offset: 2px; border-radius: 4px; }
.sec.dark :focus-visible, .sec.deep :focus-visible, .hero :focus-visible, .phero :focus-visible, .site-foot :focus-visible { outline-color: var(--mint); }
::selection { background: var(--bq-mint); color: var(--bq-heading); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--mint); color: var(--char); padding: 10px 16px; border-radius: 8px; font-size: var(--t-btn-size); line-height: var(--t-btn-lh); text-transform: uppercase; }
.skip:focus { top: 12px; }
.wrap { max-width: var(--maxw); margin: 0 auto; }

/* ------------------------------------------------------------------ sections */
.sec { position: relative; padding: var(--py) var(--px); background-color: var(--paper); background-image: radial-gradient(ellipse at 88% 6%, var(--teal-t), transparent 42%), radial-gradient(ellipse at 6% 96%, var(--brass-t), transparent 40%); }
/* teal text on the warm grey takes the deeper teal (AA); on plain white it is #07806e */
.sec.wash, .way-list, .navmob-panel, .dir-empty { --teal-ink: var(--bq-teal-deep); }
.sec.wash { background-color: var(--wash); background-image: radial-gradient(ellipse at 10% 8%, var(--teal-t), transparent 44%); }
.sec.dark { background-color: var(--char); color: #fff; background-image: radial-gradient(ellipse at 85% 10%, rgba(9, 152, 131, 0.36), transparent 48%), radial-gradient(ellipse at 8% 95%, rgba(200, 250, 235, 0.06), transparent 42%), var(--dots); background-size: auto, auto, 22px 22px; }
/* the "deep" band: charcoal washed with Bodaq teal (stays dark, so the dimmed white copy keeps AA) */
.sec.deep { background-color: var(--char); color: #fff; background-image: radial-gradient(ellipse at 82% 0%, rgba(9, 152, 131, 0.42), transparent 50%), radial-gradient(ellipse at 6% 100%, rgba(7, 128, 110, 0.3), transparent 55%), var(--dots), linear-gradient(160deg, rgba(7, 128, 110, 0.4) 0%, rgba(34, 32, 33, 0) 75%); background-size: auto, auto, 22px 22px, auto; }
.sec.dark h2, .sec.dark h3, .sec.deep h2, .sec.deep h3 { color: #fff; }
.sec.dark p, .sec.deep p { color: rgba(255, 255, 255, 0.76); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 38px; }
.sec-head > div { max-width: 780px; }
.sec-head .lede { margin-top: 16px; }
/* .kicker is the kit's eyebrow (alias of .t-eyebrow): 13 / 12px Regular, uppercase. */
.kicker { margin: 0 0 14px; display: flex; align-items: center; gap: 12px; color: var(--teal-ink); }
.kicker .no { display: inline-grid; place-items: center; min-width: 30px; height: 24px; padding: 0 6px; border-radius: 6px; border: 1px solid currentColor; font-variant-numeric: tabular-nums; }
.kicker .node { position: relative; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor; flex: none; }
.kicker .node::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: currentColor; }
.sec.dark .kicker, .sec.deep .kicker, .hero .kicker, .phero .kicker { color: var(--mint); }
/* .lede is the kit's section intro (alias of .t-intro). Page header intros use .t-lead instead. */
.lede { color: var(--soft); max-width: 66ch; }
.note { font-size: var(--t-small-size); font-weight: var(--t-regular); line-height: var(--t-small-lh); color: var(--mute); }
.sec.dark .note, .sec.deep .note { color: rgba(255, 255, 255, 0.62); }
.mt { margin-top: 28px; }
.center { text-align: center; }

/* ------------------------------------------------------------------ buttons */
/* .btn is the kit's button type (alias of .t-btn): 14 / 17px Regular, uppercase, every variant. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 13px 24px; border-radius: 8px; border: 1.5px solid transparent; text-align: center; cursor: pointer; transition: background-color 0.15s, color 0.15s, border-color 0.15s, transform 0.15s; }
.btn:hover { transform: translateY(-1px); }
.btn-teal { background: var(--teal); color: #fff; border-color: var(--teal); }
.btn-teal:hover { background: var(--teal2); border-color: var(--teal2); }
/* .btn-teal is the primary everywhere, on charcoal too; .btn-mint (Bodaq mint) is kept for a quiet light-on-dark button */
.btn-mint { background: var(--mint); color: var(--char); border-color: var(--mint); }
.btn-mint:hover { background: #fff; border-color: #fff; }
.btn-dark { background: var(--char); color: #fff; border-color: var(--char); }
.btn-dark:hover { background: #000; }
.btn-outline { background: transparent; color: var(--teal-ink); border-color: var(--teal-line); }
.btn-outline:hover { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.btn-ghost:hover { background: var(--teal); border-color: var(--teal); }
.btn-sm { min-height: 40px; padding: 9px 16px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btns { display: flex; gap: 12px; flex-wrap: wrap; }
/* Inline link in running copy: same weight as the words around it, as on bodaq.com. */
.link { color: var(--teal-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.link:hover { color: var(--bq-teal-deep); }
a[href^="tel:"] { white-space: nowrap; }
.sec.dark .link, .sec.deep .link, .hero .link, .phero .link { color: var(--mint); }
/* Arrow link at the foot of a card: the kit's text link (.t-link) type. */
.go { display: inline-block; margin-top: 14px; font-size: var(--t-btn-size); font-weight: var(--t-regular); line-height: var(--t-btn-lh); text-transform: uppercase; color: var(--teal-ink); }

/* ------------------------------------------------------------------ header */
/* White header: the main Bodaq logo (img/brand/bodaq-logo.svg), then the site name, "Installer
   Network", in Proxima Semibold at the kit's h4 size, with a short description under it, after a
   hairline. 148px wide as in the bodaq.com header, 128px on narrow desktops, 112px on phones. */
.site-head { position: sticky; top: 0; z-index: 60; background: rgba(255, 255, 255, 0.97); color: var(--ink); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.nav-inner { max-width: var(--maxw); margin: 0 auto; padding: 12px var(--px); display: flex; align-items: center; gap: 24px; min-height: 72px; }
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; min-width: 0; }
.brand-logo { display: block; width: 148px; height: auto; flex: none; }
/* .brand-name on its own is the footer lockup (white on charcoal) */
.brand-name { display: block; padding: 3px 0 3px 12px; border-left: 1px solid rgba(255, 255, 255, 0.28); font-size: var(--t-h4-size); font-weight: var(--t-semibold); line-height: 1.2; color: #fff; white-space: nowrap; }
.brand-text { display: block; min-width: 0; padding: 2px 0 2px 12px; border-left: 1px solid var(--line2); }
.brand-text .brand-name { padding: 0; border: 0; color: var(--ink); }
.brand-desc { display: block; margin-top: 2px; font-size: var(--t-small-size); font-weight: var(--t-regular); line-height: 1.3; color: var(--mute); }
.main-nav { display: flex; align-items: center; gap: 18px; }
/* .nav-link is the kit's nav bar type (alias of .t-nav): 14 / 25px Regular, uppercase. */
.nav-link { color: var(--ink); white-space: nowrap; padding: 6px 0; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; }
.nav-link:hover { color: var(--teal-ink); }
.nav-link[aria-current="page"] { color: var(--teal-ink); border-bottom-color: var(--teal-line); }
.navmob { display: none; position: relative; }
.navmob > summary { list-style: none; cursor: pointer; width: 44px; height: 44px; border: 1px solid var(--line2); border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.navmob > summary::-webkit-details-marker { display: none; }
.burger { display: flex; flex-direction: column; gap: 4px; width: 18px; }
.burger i { display: block; height: 2px; background: var(--ink); border-radius: 1px; transition: transform 0.2s, opacity 0.2s; }
.navmob[open] .burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.navmob[open] .burger i:nth-child(2) { opacity: 0; }
.navmob[open] .burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.navmob-panel { position: absolute; right: 0; top: 54px; width: min(86vw, 320px); background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 26px 60px rgba(0, 0, 0, 0.18); padding: 10px; display: flex; flex-direction: column; }
/* Menu links carry .t-nav-menu (18 / 27px Semibold, as typed), the main site's phone menu. */
.navmob-panel a { padding: 13px 14px; border-radius: 6px; }
.navmob-panel a:hover, .navmob-panel a[aria-current="page"] { background: var(--wash); color: var(--teal-ink); }
.navmob-panel .btn { margin-top: 8px; color: #fff; }
.navmob-panel .btn:hover, .navmob-panel .btn[aria-current="page"] { background: var(--teal2); color: #fff; }
.head-cta { flex: none; white-space: nowrap; }
/* The nav bar keeps the kit's 14px type, so, as on bodaq.com, it shows from 1280px and the menu
   takes over below that. With five tabs the gaps are tighter, so the logo, the name and the
   two-line description still fit; between 1280 and 1360 the logo is a little smaller too. */
@media (min-width: 1280px) { .nav-inner { gap: 16px; } .main-nav { gap: 14px; } }
@media (min-width: 1280px) and (max-width: 1360px) { .main-nav { gap: 12px; } .site-head .brand-logo { width: 120px; } }
@media (max-width: 1279px) { .main-nav, .head-cta { display: none; } .navmob { display: block; } }
@media (min-width: 1280px) { .site-head .brand-desc { max-width: 24ch; } }
@media (max-width: 1439px) { .brand-logo { width: 128px; } }
@media (max-width: 560px) { .brand { gap: 10px; } .brand-text { padding-left: 10px; } .brand-logo { width: 112px; } .brand-desc { max-width: 24ch; } }
@media (max-width: 380px) { .nav-inner { gap: 12px; } .brand-logo { width: 100px; } }
/* Below 380px the description is left out so the sticky header stays short. */
@media (max-width: 379px) { .site-head .brand-desc { display: none; } }
/* Narrow phones: the site name may take two lines, in the header and the footer lockup. */
@media (max-width: 420px) { .brand-name { white-space: normal; } .brand-foot .brand-name { width: min-content; line-height: 1.15; } }

/* ------------------------------------------------------------------ home hero */
.hero { position: relative; overflow: hidden; background-color: var(--char); color: #fff; background-image: radial-gradient(ellipse at 78% 20%, rgba(9, 152, 131, 0.42), transparent 50%), radial-gradient(ellipse at 0% 100%, rgba(6, 106, 92, 0.45), transparent 55%), var(--dots); background-size: auto, auto, 22px 22px; padding: clamp(48px, 7vw, 96px) var(--px) clamp(56px, 7vw, 104px); }
.netlines { position: absolute; right: -4%; top: 0; width: 62%; height: 100%; opacity: 0.55; pointer-events: none; }
.netlines path { fill: none; stroke: var(--teal-line); stroke-width: 1; stroke-dasharray: 6 7; animation: netdash 14s linear infinite; }
.netlines circle { fill: var(--char); stroke: var(--teal-line); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: netpulse 4.8s ease-in-out infinite; }
.netlines circle:nth-of-type(2n) { animation-delay: -1.6s; }
.netlines circle:nth-of-type(3n) { animation-delay: -3.2s; stroke: var(--mint); }
@keyframes netdash { to { stroke-dashoffset: -260; } }
@keyframes netpulse { 0%, 100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.5); opacity: 1; } }
.hero-grid { position: relative; max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-kick { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 22px; color: var(--mint); }
.hero-kick img { height: 17px; width: auto; filter: brightness(0) invert(1); opacity: 0.9; }
.hero-kick .sep { width: 22px; height: 1px; background: currentColor; opacity: 0.6; }
/* The home hero h1 carries .t-hero (52 / 32px, line height 1.1). */
.hero h1 { color: #fff; max-width: 18ch; }
/* the accent words of the hero title in Bodaq teal (4.5:1 on charcoal, large text) */
.hero h1 em { font-style: normal; color: var(--teal-line); }
.hero-sub { margin: 22px 0 32px; color: rgba(255, 255, 255, 0.78); max-width: 56ch; }
.hero-alt { margin-top: 26px; color: rgba(255, 255, 255, 0.7); }
.hero .rise { animation: rise 0.8s ease-out both; }
.hero .rise:nth-child(2) { animation-delay: 0.08s; }
.hero .rise:nth-child(3) { animation-delay: 0.16s; }
.hero .rise:nth-child(4) { animation-delay: 0.24s; }
.hero .rise:nth-child(5) { animation-delay: 0.32s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero-visual { position: relative; padding-bottom: 64px; }
.hero-photo { margin: 0; position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3.6; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7); border: 1px solid rgba(255, 255, 255, 0.12); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(9, 152, 131, 0) 50%, rgba(6, 106, 92, 0.5)); }
.hero-photo figcaption { position: absolute; left: 16px; top: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(34, 32, 33, 0.72); font-size: var(--t-small-size); font-weight: var(--t-regular); line-height: var(--t-small-lh); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero-photo figcaption::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 0 rgba(200, 250, 235, 0.7); animation: live 2.4s ease-out infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(200, 250, 235, 0.7); } 70%, 100% { box-shadow: 0 0 0 10px rgba(200, 250, 235, 0); } }
.finder { position: absolute; left: -36px; right: 36px; bottom: 0; background: #fff; color: var(--ink); border-radius: 12px; padding: 20px 22px; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.55); display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; align-items: end; }
/* Carries .t-h4 (small card title). */
.finder-h { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; color: var(--ink); }
.finder-h .ico { width: 30px; height: 30px; }
.finder .field { gap: 6px; }
.finder-note { grid-column: 1 / -1; font-size: var(--t-small-size); font-weight: var(--t-regular); line-height: var(--t-small-lh); color: var(--mute); }
.finder-note b { color: var(--ink); }
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero h1 { max-width: 18ch; }
  .netlines { width: 100%; right: -20%; opacity: 0.3; -webkit-mask-image: linear-gradient(to left, #000 20%, transparent 70%); mask-image: linear-gradient(to left, #000 20%, transparent 70%); }
  .finder { left: 16px; right: 16px; }
}
@media (max-width: 600px) { .netlines { display: none; } }
@media (max-width: 560px) {
  .hero-visual { padding-bottom: 0; }
  .finder { position: relative; left: auto; right: auto; margin-top: -48px; margin-left: 12px; margin-right: 12px; grid-template-columns: 1fr; }
  .finder .btn { width: 100%; }
}

/* ------------------------------------------------------------------ sub-page hero */
.phero { position: relative; overflow: hidden; background-color: var(--char); color: #fff; background-image: radial-gradient(ellipse at 20% 0%, rgba(9, 152, 131, 0.36), transparent 52%), var(--dots); background-size: auto, 22px 22px; }
.phero-media { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; margin: 0; }
.phero-media img { width: 100%; height: 100%; object-fit: cover; }
.phero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--char) 0%, rgba(34, 32, 33, 0.55) 30%, rgba(34, 32, 33, 0.1) 70%), linear-gradient(0deg, rgba(6, 106, 92, 0.3), transparent 50%); }
.phero-inner { position: relative; max-width: var(--maxw); margin: 0 auto; padding: clamp(52px, 7vw, 96px) var(--px) clamp(52px, 6vw, 88px); }
.phero-inner > div { max-width: 640px; }
.phero h1 { color: #fff; }
/* Page header intro: .t-lead (20 / 18px Light). */
.phero .t-lead { margin-top: 20px; color: rgba(255, 255, 255, 0.8); max-width: 66ch; }
.phero .btns { margin-top: 30px; }
.phero .rise { animation: rise 0.8s ease-out both; animation-delay: 0.1s; }
/* Breadcrumb: the kit's small type (13px Regular, as typed), like bodaq.com's breadcrumb. */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; font-size: var(--t-small-size); font-weight: var(--t-regular); line-height: var(--t-small-lh); color: rgba(255, 255, 255, 0.6); }
.crumbs a:hover { color: var(--mint); }
.crumbs span[aria-hidden] { opacity: 0.5; }
@media (max-width: 900px) {
  .phero-media { width: 100%; }
  .phero-media::after { background: linear-gradient(0deg, rgba(34, 32, 33, 0.96) 0%, rgba(34, 32, 33, 0.86) 55%, rgba(34, 32, 33, 0.7) 100%); }
}

/* ------------------------------------------------------------------ stats bar */
.stats { background: #fff; border-bottom: 1px solid var(--line); }
.stats-grid { max-width: var(--maxw); margin: 0 auto; padding: 30px var(--px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stat { display: grid; justify-items: center; align-content: start; text-align: center; gap: 4px; }
.stat .ico { width: 40px; height: 40px; margin-bottom: 4px; }
/* Figure .t-stat (32 / 28px Semibold), label .t-stat-label (16px Light, sentence case). */
.stat span { color: var(--mute); }
@media (max-width: 980px) { .stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: 28px; } }
@media (max-width: 520px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }

/* ------------------------------------------------------------------ icons (line icons and their motion classes) */
.ico { width: 52px; height: 52px; display: block; flex: none; fill: none; stroke: var(--teal-line); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.ico .fill { fill: var(--teal-line); fill-opacity: 0.1; stroke: none; }
.ico .brass { stroke: var(--brass); }
.ico .bfill { fill: var(--brass); fill-opacity: 0.18; stroke: none; }
.sec.dark .ico, .sec.deep .ico, .hero .ico, .phero .ico { stroke: var(--mint); }
.sec.dark .ico .fill, .sec.deep .ico .fill { fill: var(--mint); }
.sec.dark .ico .brass, .sec.deep .ico .brass, .hero .ico .brass, .phero .ico .brass, .way.dark .ico .brass, .job .ico .brass { stroke: var(--bq-amber-light); }
.sec.dark .ico .bfill, .sec.deep .ico .bfill, .way.dark .ico .bfill { fill: var(--bq-amber-light); }
.ico .draw { stroke-dasharray: 80; stroke-dashoffset: 80; animation: draw 4s ease-in-out infinite; }
.ico .d2 { animation-delay: 0.3s; }
.ico .d3 { animation-delay: 0.6s; }
@keyframes draw { 0%, 15% { stroke-dashoffset: 80; } 45%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 80; } }
.ico .spin { transform-box: fill-box; transform-origin: center; animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ico .bob { transform-box: fill-box; transform-origin: center; animation: bob 3.6s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.ico .pulse { transform-box: fill-box; transform-origin: center; animation: pulse 3.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: 0.75; } }
.ico .slide { animation: slide 4s ease-in-out infinite; }
@keyframes slide { 0%, 20%, 100% { transform: translateX(0); } 50%, 70% { transform: translateX(5px); } }
.ico .grow { transform-box: fill-box; transform-origin: bottom; animation: grow 4s ease-in-out infinite; }
.ico .g2 { animation-delay: 0.2s; }
.ico .g3 { animation-delay: 0.4s; }
@keyframes grow { 0%, 15% { transform: scaleY(0.35); } 45%, 80% { transform: scaleY(1); } 100% { transform: scaleY(0.35); } }
.ico .blink { animation: blink 4s ease-in-out infinite; }
.ico .b2 { animation-delay: 0.4s; }
.ico .b3 { animation-delay: 0.8s; }
.ico .b4 { animation-delay: 1.2s; }
@keyframes blink { 0%, 60%, 100% { fill-opacity: 0.1; } 20%, 40% { fill-opacity: 0.5; } }

/* ------------------------------------------------------------------ cards */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cards.three { grid-template-columns: repeat(3, 1fr); }
.cards.two { grid-template-columns: repeat(2, 1fr); }
.cards.five { grid-template-columns: repeat(5, 1fr); }
.card { display: block; position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px; color: inherit; transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s, background-color 0.25s, color 0.25s; }
.card .ico { width: 60px; height: 60px; margin-bottom: 18px; transform-origin: center bottom; animation: icofloat 5s ease-in-out infinite; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), stroke 0.25s; }
.cards .card:nth-child(2n) .ico { animation-delay: -1.6s; }
.cards .card:nth-child(3n) .ico { animation-delay: -3.1s; }
@keyframes icofloat { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-4px) rotate(-2.5deg); } 65% { transform: translateY(-2px) rotate(2deg); } }
/* Card title: h3 (24 / 18px); flat cards in dense grids carry .t-h4. Card copy: the kit's card copy size. */
.card h3 { margin-bottom: 8px; }
.card p { font-size: var(--t-body-sm-size); line-height: var(--t-body-sm-lh); }
.card .num { position: absolute; top: 18px; right: 20px; font-size: var(--t-eyebrow-size); font-weight: var(--t-regular); line-height: var(--t-eyebrow-lh); text-transform: uppercase; color: var(--mute); font-variant-numeric: tabular-nums; }
a.card:hover, .card.hov:hover { background: var(--deep); border-color: var(--deep); color: #fff; transform: translateY(-3px); box-shadow: 0 24px 46px -28px rgba(34, 32, 33, 0.55); }
a.card:hover p, .card.hov:hover p { color: rgba(255, 255, 255, 0.84); }
a.card:hover .go, a.card:hover .num, .card.hov:hover .num { color: var(--mint); }
a.card:hover .ico, .card.hov:hover .ico { stroke: var(--mint); transform: translateY(-6px) scale(1.12) rotate(-3deg); animation-play-state: paused; }
a.card:hover .ico .fill, .card.hov:hover .ico .fill { fill: var(--mint); fill-opacity: 0.2; }
a.card:hover .ico .brass, .card.hov:hover .ico .brass { stroke: var(--bq-amber-light); }
a.card:hover .ico .bfill, .card.hov:hover .ico .bfill { fill: var(--bq-amber-light); fill-opacity: 0.3; }
a.card:hover .ico *, .card.hov:hover .ico * { animation-duration: 1.8s; }
.sec.dark .card, .sec.deep .card { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.14); color: #fff; }
.sec.dark .card p, .sec.deep .card p { color: rgba(255, 255, 255, 0.72); }
.sec.dark a.card:hover, .sec.deep a.card:hover { background: var(--deep); border-color: var(--deep); }
.card.flat { padding: 22px; }
.card.flat .ico { width: 44px; height: 44px; margin-bottom: 14px; }
/* Photo variant of .card.flat: a real install photo fills the card, title and copy overlaid on a
   gradient scrim (as the home page job-type gallery, .job below), with a small film credit chip. */
.card.photo { padding: 0; overflow: hidden; background: var(--char); aspect-ratio: 16 / 10; }
.card.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card.photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(34, 32, 33, 0) 44%, rgba(34, 32, 33, 0.86)); pointer-events: none; }
.card.photo .cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 16px 18px; color: #fff; }
.card.photo .cap .ico { width: 26px; height: 26px; margin-bottom: 8px; stroke: var(--mint); animation: none; }
.card.photo .cap .ico .fill { fill: var(--mint); }
.card.photo .cap h3 { color: #fff; margin-bottom: 3px; }
.card.photo .cap p { color: rgba(255, 255, 255, 0.84); }
.card.photo .credit { position: absolute; top: 12px; right: 12px; z-index: 1; padding: 4px 10px; border-radius: 6px; background: rgba(34, 32, 33, 0.72); color: #fff; font-size: var(--t-small-size); font-weight: var(--t-regular); line-height: var(--t-small-lh); }
@media (max-width: 1100px) { .cards.five { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 940px) { .cards, .cards.three { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .cards, .cards.three, .cards.two, .cards.five { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ two ways in */
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.way { position: relative; overflow: hidden; border-radius: 14px; padding: clamp(28px, 4vw, 44px); border: 1px solid var(--line); background: #fff; }
.way.dark { background-color: var(--char); color: #fff; border-color: var(--char); background-image: radial-gradient(ellipse at 90% 0%, rgba(9, 152, 131, 0.42), transparent 55%), var(--dots); background-size: auto, 22px 22px; }
.way.dark h2, .way.dark h3 { color: #fff; }
.way.dark p { color: rgba(255, 255, 255, 0.76); }
.way.dark .kicker { color: var(--mint); }
.way.dark .ico { stroke: var(--mint); }
.way.dark .ico .fill { fill: var(--mint); }
.way > p { margin-top: 12px; max-width: 52ch; }
.way-list { list-style: none; margin-top: 26px; display: grid; gap: 10px; }
.way-list a { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--wash); transition: border-color 0.15s, background-color 0.15s, transform 0.15s; }
.way-list a:hover { border-color: var(--teal-line); background: #fff; transform: translateX(4px); }
.way.dark .way-list a { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.14); }
.way.dark .way-list a:hover { background: rgba(200, 250, 235, 0.1); border-color: var(--mint); }
.way-list .ico { width: 44px; height: 44px; }
/* Row title .t-h4; the line under it is card copy. */
.way-list b { display: block; }
.way-list span { display: block; color: var(--mute); }
.way-list b + span { font-size: var(--t-body-sm-size); font-weight: var(--t-light); line-height: var(--t-body-sm-lh); }
.way.dark .way-list span { color: rgba(255, 255, 255, 0.64); }
.way-list .arr { font-size: var(--t-h4-size); line-height: 1; color: var(--teal-line); }
.way.dark .way-list .arr { color: var(--mint); }
@media (max-width: 900px) { .ways { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ job types */
.jobs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; list-style: none; }
.job a { position: relative; display: block; overflow: hidden; border-radius: 12px; background: var(--char); aspect-ratio: 4 / 5.2; color: #fff; }
.job img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
.job a:hover img { transform: scale(1.05); }
.job a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(34, 32, 33, 0) 35%, rgba(34, 32, 33, 0.9)); }
.job .job-t { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 18px; }
.job .ico { width: 36px; height: 36px; stroke: var(--mint); margin-bottom: 10px; }
.job .ico .fill { fill: var(--mint); }
/* Title .t-h4 over the photo; the line under it is card copy. */
.job b { display: block; }
.job span { display: block; margin-top: 6px; color: rgba(255, 255, 255, 0.8); }
.job b + span { font-size: var(--t-body-sm-size); font-weight: var(--t-light); line-height: var(--t-body-sm-lh); }
.job .go { color: var(--mint); margin-top: 10px; }
@media (max-width: 1100px) { .jobs { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .jobs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .jobs { grid-template-columns: 1fr; } .job a { aspect-ratio: 16 / 11; } }

/* ------------------------------------------------------------------ timeline (five steps) */
.timeline { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; list-style: none; }
.timeline::before, .timeline::after { content: ""; position: absolute; left: 27px; top: 27px; height: 2px; z-index: 0; }
.timeline::before { right: 27px; background: var(--line2); }
.timeline::after { width: calc(100% - 54px); background: var(--teal-line); transform-origin: left; animation: tl 6s ease-in-out infinite; }
@keyframes tl { 0% { transform: scaleX(0); } 70%, 100% { transform: scaleX(1); } }
.tstep { position: relative; padding-top: 74px; }
.tstep .dot { position: absolute; z-index: 1; left: 0; top: 0; width: 54px; height: 54px; border-radius: 50%; background: #fff; border: 2px solid var(--line2); display: grid; place-items: center; }
.tstep .dot .ico { width: 28px; height: 28px; }
.tstep .dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--teal-line); opacity: 0; animation: ping 6s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes ping { 0%, 8% { opacity: 0; transform: scale(0.8); } 12% { opacity: 0.8; transform: scale(1); } 30%, 100% { opacity: 0; transform: scale(1.25); } }
/* Step label .t-eyebrow, step title .t-h4, then card copy (as the main site's process steps). */
.tstep em { display: block; font-style: normal; color: var(--mute); }
.tstep b { display: block; margin: 6px 0 8px; }
.tstep p { font-size: var(--t-body-sm-size); line-height: var(--t-body-sm-lh); }
.sec.dark .timeline::before, .sec.deep .timeline::before { background: rgba(255, 255, 255, 0.2); }
.sec.dark .timeline::after, .sec.deep .timeline::after { background: var(--mint); }
.sec.dark .tstep .dot, .sec.deep .tstep .dot { background: var(--char2); border-color: rgba(255, 255, 255, 0.25); }
.sec.dark .tstep .dot::after, .sec.deep .tstep .dot::after { border-color: var(--mint); }
.sec.dark .tstep em, .sec.deep .tstep em { color: rgba(255, 255, 255, 0.55); }
@media (max-width: 940px) {
  .timeline { grid-template-columns: 1fr; gap: 6px; }
  .timeline::before, .timeline::after { left: 26px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; transform-origin: top; animation-name: tlv; }
  .tstep { padding: 6px 0 22px 76px; min-height: 76px; }
}
@keyframes tlv { 0% { transform: scaleY(0); } 70%, 100% { transform: scaleY(1); } }

/* ------------------------------------------------------------------ image strip + split layouts */
.strip { position: relative; margin: 0 0 36px; height: clamp(120px, 16vw, 210px); border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 18px 40px -30px rgba(34, 32, 33, 0.4); }
.strip img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); animation: stripdrift 18s ease-in-out infinite alternate; }
@keyframes stripdrift { from { object-position: 48% 50%; transform: scale(1.04); } to { object-position: 52% 50%; transform: scale(1.08); } }
.strip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9, 152, 131, 0.26), rgba(9, 152, 131, 0) 45%), linear-gradient(0deg, rgba(34, 32, 33, 0.3), rgba(34, 32, 33, 0) 55%); }
.strip figcaption { position: absolute; left: 18px; bottom: 14px; z-index: 1; font-size: var(--t-small-size); font-weight: var(--t-regular); line-height: var(--t-small-lh); color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.split.top { align-items: start; }
.split.wide-left { grid-template-columns: 1.15fr 0.85fr; }
.frame { margin: 0; position: relative; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); background: var(--wash); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame figcaption { position: absolute; left: 14px; bottom: 12px; padding: 5px 10px; border-radius: 6px; background: rgba(34, 32, 33, 0.72); color: #fff; font-size: var(--t-small-size); font-weight: var(--t-regular); line-height: var(--t-small-lh); }
@media (max-width: 900px) { .split, .split.wide-left { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ checklist rows + detail lists */
.ticks { list-style: none; display: grid; gap: 10px; }
.ticks li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; animation: rowhi 10s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 2s); }
.ticks li .ico { width: 40px; height: 40px; }
/* Row title .t-h4, the line under it card copy. */
.ticks li b { display: block; color: var(--ink); }
.sec.dark .ticks li, .sec.deep .ticks li { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.14); }
.sec.dark .ticks li b, .sec.deep .ticks li b { color: #fff; }
.sec.dark .ticks li span, .sec.deep .ticks li span { color: rgba(255, 255, 255, 0.72); }
@keyframes rowhid { 0%, 16%, 100% { border-color: rgba(255, 255, 255, 0.14); transform: none; } 5%, 12% { border-color: var(--mint); transform: translateX(8px); } }
.sec.dark .ticks li, .sec.deep .ticks li { animation-name: rowhid; }
.ticks li span { display: block; color: var(--soft); }
.ticks li b + span { font-size: var(--t-body-sm-size); font-weight: var(--t-light); line-height: var(--t-body-sm-lh); }
@keyframes rowhi { 0%, 16%, 100% { border-color: var(--line); box-shadow: none; transform: none; } 5%, 12% { border-color: var(--teal-line); box-shadow: 0 16px 34px -22px rgba(9, 152, 131, 0.6); transform: translateX(8px); } }
.deflist { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 0; }
.deflist > div { background: #fff; padding: 16px 18px; }
/* Label in the kit's spec label type (13 / 12px Regular, uppercase), value in body copy. */
.deflist dt { font-size: var(--t-spec-label-size); font-weight: var(--t-regular); line-height: var(--t-spec-label-lh); text-transform: uppercase; color: var(--mute); }
.deflist dd { margin: 5px 0 0; font-size: var(--t-body-size); font-weight: var(--t-light); line-height: var(--t-body-lh); color: var(--ink); }
.deflist.one { grid-template-columns: 1fr; }
@media (max-width: 600px) { .deflist { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ map card
   The coverage map: a dotted Canada and US drawn on a canvas by assets/js/coverage-map.js (dots and city
   positions precomputed in coverage-data.js by scripts/build-coverage.mjs). Decoration only: not
   installer data, and a marker is not an installer location. The canvas reads its colours from the
   --cov-* variables; --cov-bg must stay the card colour (the city halos use it). */
.tmap-card { --cov-bg: #fbf7f1; --cov-dot: #cdbba2; --cov-accent: var(--teal-line); background: var(--cov-bg); border: 1px solid #ede3d3; border-radius: 28px; padding: clamp(10px, 2vw, 22px); box-shadow: var(--shadow); }
.cov-canvas { display: block; width: 100%; height: auto; aspect-ratio: 800 / 600; opacity: 0; transition: opacity 0.4s ease; }
.cov.is-ready .cov-canvas { opacity: 1; }

/* ------------------------------------------------------------------ faq */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
/* As bodaq.com's FAQ: questions 18 / 17px Semibold in sentence case, answers in body copy. */
.faq summary { list-style: none; cursor: pointer; padding: 20px 44px 20px 0; font-size: var(--t-intro-size); font-weight: var(--t-semibold); line-height: 1.375; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 8px; top: 15px; font-size: 28px; font-weight: var(--t-light); line-height: 1; color: var(--teal-ink); transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .ans { padding: 0 44px 22px 0; max-width: 78ch; }
.faq .ans ul { margin: 10px 0 0 20px; color: var(--soft); font-size: var(--t-body-size); font-weight: var(--t-light); line-height: var(--t-body-lh); }
.faq .ans li { margin: 4px 0; }
.faq .src { margin-top: 10px; font-size: var(--t-small-size); font-weight: var(--t-regular); line-height: var(--t-small-lh); color: var(--mute); }

/* ------------------------------------------------------------------ bands + marquee */
.band { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; }
.band h2 { max-width: 20ch; }
.band .lede { margin-top: 14px; }
.band .btns { justify-content: flex-end; }
.band.stack .btns { flex-direction: column; align-items: stretch; min-width: 300px; }
@media (max-width: 900px) { .band { grid-template-columns: 1fr; } .band .btns { justify-content: flex-start; } .band.stack .btns { min-width: 0; max-width: 420px; } }
.marquee { position: relative; display: flex; overflow: hidden; margin-top: 44px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track { list-style: none; display: flex; gap: 16px; padding-right: 16px; flex: none; animation: marquee 70s linear infinite; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }
.sw { display: block; width: 176px; color: #fff; }
.sw img { width: 176px; height: 234px; object-fit: cover; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.16); background: var(--char3); transition: transform 0.3s; }
.sw:hover img, .sw:focus-visible img { transform: translateY(-4px); }
.sw span { display: block; margin-top: 10px; }
/* As bodaq.com's swatch marquee: 15px Semibold name, 13px code. */
.sw b { display: block; font-size: var(--t-body-sm-size); font-weight: var(--t-semibold); line-height: 1.375; }
.sw i { display: block; font-style: normal; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: rgba(255, 255, 255, 0.62); }

/* ------------------------------------------------------------------ locations + resources */
.loc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; list-style: none; }
.loc { position: relative; overflow: hidden; border-radius: 12px; padding: 24px; background: #fff; border: 1px solid var(--line); }
.loc .ico { width: 44px; height: 44px; margin-bottom: 12px; }
/* Card title .t-h3, then card copy. */
.loc b { display: block; }
.loc span { display: block; margin-top: 6px; font-size: var(--t-body-sm-size); font-weight: var(--t-light); line-height: var(--t-body-sm-lh); color: var(--soft); }
@media (max-width: 760px) { .loc-cards { grid-template-columns: 1fr; } }
.res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.res { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: clamp(20px, 3vw, 30px); }
.res h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.res h3 .ico { width: 40px; height: 40px; }
.res > p { font-size: var(--t-body-sm-size); line-height: var(--t-body-sm-lh); }
.res-list { list-style: none; margin-top: 16px; border-top: 1px solid var(--line); }
.res-list a { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 13px 2px; border-bottom: 1px solid var(--line); font-size: var(--t-body-sm-size); font-weight: var(--t-semibold); line-height: 1.375; color: var(--ink); }
.res-list a:hover { color: var(--teal-ink); }
.res-list small { font-size: var(--t-spec-label-size); font-weight: var(--t-regular); line-height: var(--t-spec-label-lh); text-transform: uppercase; color: var(--mute); }
.res-list em { display: block; margin-top: 2px; font-style: normal; font-size: var(--t-small-size); font-weight: var(--t-regular); line-height: var(--t-small-lh); color: var(--mute); }
@media (max-width: 900px) { .res-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ video facade */
.yt { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--char); box-shadow: var(--shadow); }
.yt img { width: 100%; height: 100%; object-fit: cover; opacity: 0.86; transition: opacity 0.2s, transform 0.4s; }
.yt:hover img { opacity: 1; transform: scale(1.02); }
.yt .play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: rgba(34, 32, 33, 0.82); border: 2px solid var(--mint); display: grid; place-items: center; transition: transform 0.2s, background-color 0.2s; }
.yt .play::after { content: ""; margin-left: 6px; border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent var(--mint); }
.yt:hover .play { transform: scale(1.08); background: var(--teal); }
.yt .yt-label { position: absolute; left: 14px; bottom: 12px; padding: 5px 10px; border-radius: 6px; background: rgba(34, 32, 33, 0.78); color: #fff; font-size: var(--t-small-size); font-weight: var(--t-regular); line-height: var(--t-small-lh); }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ------------------------------------------------------------------ forms */
.form-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: clamp(24px, 4vw, 56px); align-items: start; }
.form-aside { position: sticky; top: 92px; display: grid; gap: 16px; }
@media (max-width: 1000px) { .form-layout { grid-template-columns: 1fr; } .form-aside { position: static; } }
.form { display: grid; gap: 22px; }
.fs { margin: 0; padding: clamp(20px, 3vw, 30px); border: 1px solid var(--line); border-radius: 14px; background: #fff; min-width: 0; }
/* Fieldset title: card title type (h3, 24 / 18px Semibold, Title Case). */
.fs legend { float: left; width: 100%; padding: 0; margin: 0 0 18px; display: flex; align-items: center; gap: 12px; font-size: var(--t-h3-size); font-weight: var(--t-semibold); line-height: var(--t-h3-lh); color: var(--ink); text-wrap: balance; }
.fs legend + * { clear: both; }
.fs legend .no { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--char); color: var(--mint); font-size: var(--t-label-size); font-weight: var(--t-semibold); line-height: 1; font-variant-numeric: tabular-nums; flex: none; }
.fs > p.note { clear: both; margin: -6px 0 16px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid2 + .grid2, .grid2 + .field, .field + .grid2, .field + .field, .grid3 + .field, .field + .grid3, .choice-grid + .field, .field + .choice-grid, .grid2 + .choice-grid, .choice-grid + .grid2 { margin-top: 16px; }
.grid2, .grid3 { row-gap: 22px; }
.grid2 > .field, .grid3 > .field { margin-top: 0; }
.full { grid-column: 1 / -1; }
.group + .grid2, .group + .grid3, .group + .field, .grid2 + .group, .grid3 + .group, .field + .group { margin-top: 20px; }
@media (max-width: 700px) { .grid2, .grid3 { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
/* Field labels are the kit's label (14 / 21px Semibold, as typed); .group-label is a span, so it takes the tokens. */
.field > label, .group-label { color: var(--soft); }
.group-label { display: block; font-size: var(--t-label-size); font-weight: var(--t-semibold); line-height: var(--t-label-lh); }
.req { color: var(--error); margin-left: 2px; }
/* "(optional)" after a label: 13px Light, as bodaq.com's form fields. */
.opt { font-size: var(--t-small-size); font-weight: var(--t-light); color: var(--mute); }
.field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--line2); border-radius: 9px; background: #fff; color: var(--ink); transition: border-color 0.15s, box-shadow 0.15s; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23099883' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; }
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--teal-line); box-shadow: 0 0 0 4px rgba(9, 152, 131, 0.16); }
.hint { font-size: var(--t-small-size); font-weight: var(--t-regular); line-height: var(--t-small-lh); color: var(--mute); }
.err { display: none; align-items: center; gap: 6px; font-size: var(--t-label-size); font-weight: var(--t-regular); line-height: 1.375; color: var(--error); }
.err::before { content: "!"; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--error); color: #fff; font-size: 12px; font-weight: var(--t-semibold); line-height: 1; flex: none; }
.invalid > .err, .invalid .err { display: flex; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--error); }
.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.choice-grid.two { grid-template-columns: 1fr 1fr; }
.choice-grid.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 800px) { .choice-grid, .choice-grid.four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .choice-grid, .choice-grid.two, .choice-grid.four { grid-template-columns: 1fr; } }
.choice { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; padding: 14px; min-height: 56px; border: 1.5px solid var(--line2); border-radius: 10px; background: #fff; cursor: pointer; transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice .ico { width: 36px; height: 36px; grid-row: span 2; }
/* Option title 16px Semibold, the line under it the kit's small type. */
.choice b { font-size: 1rem; font-weight: var(--t-semibold); line-height: 1.375; }
.choice small { color: var(--mute); }
.choice .box { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--line2); display: grid; place-items: center; grid-row: span 2; background: #fff; }
.choice input[type="radio"] ~ .box { border-radius: 50%; }
.choice:hover { border-color: var(--teal-line); }
.choice:has(input:checked) { border-color: var(--teal-line); background: rgba(9, 152, 131, 0.06); box-shadow: 0 0 0 1px var(--teal-line) inset; }
.choice:has(input:checked) .box { background: var(--teal); border-color: var(--teal); }
.choice:has(input:checked) .box::after { content: ""; width: 10px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.choice input[type="radio"]:checked ~ .box::after { width: 8px; height: 8px; border: 0; border-radius: 50%; background: #fff; transform: none; }
.choice:has(input:focus-visible) { outline: 3px solid var(--teal-line); outline-offset: 2px; }
.choice.compact { min-height: 48px; padding: 10px 14px; }
.choice:not(.compact):has(input:checked)::after { content: ""; position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%; background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat; }
/* 1 to 5 scale (certification questionnaire) */
.scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.scale .choice { grid-template-columns: 1fr; justify-items: center; align-content: center; text-align: center; gap: 2px; padding: 10px 6px; min-height: 66px; }
/* The 1 to 5 figures use the kit's spec figure type (26 / 22px Semibold). */
.scale .choice b { font-size: var(--t-spec-size); line-height: var(--t-spec-lh); font-variant-numeric: tabular-nums; }
.scale .choice small { line-height: 1.25; }
.scale-hint { margin-top: 8px; }
@media (max-width: 560px) { .scale { gap: 6px; } .scale .choice small { display: none; } }
.fs-wait { border-style: dashed; background: transparent; }
.fs-wait legend .no { background: var(--line2); color: var(--ink); }
.res-grid.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .res-grid.three { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .res-grid.three { grid-template-columns: 1fr; } }
.facts { background: #fff; border-bottom: 1px solid var(--line); }
.facts .deflist { max-width: var(--maxw); margin: 0 auto; grid-template-columns: repeat(4, 1fr); border: 0; border-radius: 0; background: var(--line); }
.facts .deflist > div { padding: 22px var(--px); }
@media (max-width: 900px) { .facts .deflist { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .facts .deflist { grid-template-columns: 1fr; } }
.group.invalid .choice { border-color: var(--error); }
.group > .err { margin-top: 10px; }
.check { display: grid; grid-template-columns: 24px 1fr; gap: 8px 12px; align-items: start; }
.check label { font-size: var(--t-body-sm-size); font-weight: var(--t-regular); line-height: 1.5; color: var(--soft); cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--teal); cursor: pointer; }
.check .err { grid-column: 1 / -1; }
.check.invalid label { color: var(--error); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.form-status { font-size: var(--t-label-size); font-weight: var(--t-regular); line-height: 1.375; color: var(--error); }
.form-note { font-size: var(--t-small-size); font-weight: var(--t-regular); line-height: var(--t-small-lh); color: var(--mute); }
.aside-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 24px; }
.aside-card.dark { background-color: var(--char); color: #fff; border-color: var(--char); background-image: radial-gradient(ellipse at 100% 0%, rgba(9, 152, 131, 0.42), transparent 60%), var(--dots); background-size: auto, 22px 22px; }
.aside-card.dark h2, .aside-card.dark h3 { color: #fff; }
.aside-card.dark p { color: rgba(255, 255, 255, 0.74); }
/* Aside titles are h2 for the outline but card titles in type: .t-h3. */
.aside-card h2 { margin-bottom: 10px; }
.aside-card > p { font-size: var(--t-body-sm-size); line-height: var(--t-body-sm-lh); }
.aside-card .contact-lines { display: grid; gap: 4px; margin-top: 14px; }
.aside-card .contact-lines a { color: var(--mint); }
.aside-card .contact-lines a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mini-steps { list-style: none; counter-reset: s; display: grid; gap: 12px; margin-top: 14px; }
.mini-steps li { counter-increment: s; display: grid; grid-template-columns: 30px 1fr; gap: 12px; font-size: var(--t-body-sm-size); font-weight: var(--t-light); line-height: var(--t-body-sm-lh); color: var(--soft); }
.mini-steps li::before { content: counter(s); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--teal-line); color: var(--teal-ink); font-size: var(--t-small-size); font-weight: var(--t-semibold); line-height: 1; font-variant-numeric: tabular-nums; }
.mini-steps b { color: var(--ink); display: block; font-weight: var(--t-semibold); }
.aside-card.dark .mini-steps li { color: rgba(255, 255, 255, 0.7); }
.aside-card.dark .mini-steps li::before { border-color: var(--mint); color: var(--mint); }
.aside-card.dark .mini-steps b { color: #fff; }

/* success state */
.success { border: 1px solid var(--teal-line); border-radius: 14px; background: #fff; padding: clamp(22px, 3vw, 34px); box-shadow: 0 30px 60px -40px rgba(34, 32, 33, 0.45); }
.success:focus { outline: 0; }
.success:focus-visible { outline: 3px solid var(--teal-line); outline-offset: 3px; }
@media (max-width: 560px) { .success .btns { display: grid; } }
.success-head { display: flex; gap: 16px; align-items: center; }
.success-head .ico { width: 56px; height: 56px; }
.success .notice { margin-top: 18px; padding: 14px 16px; border-radius: 10px; background: var(--note-bg); border: 1px dashed #d8a64a; color: #5c3d00; font-size: var(--t-body-sm-size); font-weight: var(--t-regular); line-height: var(--t-body-sm-lh); }
.success .notice b { color: #3f2a00; }
.success pre { margin: 18px 0 0; padding: 16px 18px; max-height: 360px; overflow: auto; border-radius: 10px; background: var(--wash); border: 1px solid var(--line); font-family: inherit; font-size: var(--t-small-size); font-weight: var(--t-regular); line-height: var(--t-small-lh); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
.success .btns { margin-top: 20px; }

/* pattern picker */
.pp { position: relative; }
.pp-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; max-height: 340px; overflow: auto; list-style: none; background: #fff; border: 1px solid var(--line2); border-radius: 10px; box-shadow: 0 24px 50px -20px rgba(34, 32, 33, 0.4); padding: 6px; }
.pp-opt { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: center; padding: 7px 8px; border-radius: 7px; cursor: pointer; }
.pp-opt img { width: 38px; height: 50px; object-fit: cover; border-radius: 4px; background: var(--wash); }
.pp-opt b { display: block; font-size: var(--t-body-sm-size); font-weight: var(--t-semibold); line-height: 1.375; }
.pp-opt span { display: block; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--mute); }
.pp-opt[aria-selected="true"], .pp-opt:hover { background: var(--wash); box-shadow: 0 0 0 1.5px var(--teal-line) inset; }
.pp-empty { padding: 12px; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--mute); }
.pp-sel { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pp-chip { display: inline-flex; align-items: center; gap: 10px; padding: 5px 6px 5px 5px; border: 1px solid var(--line2); border-radius: 10px; background: #fff; max-width: 100%; }
.pp-chip img { width: 30px; height: 40px; object-fit: cover; border-radius: 5px; }
/* A chip: the kit's small type (13px Regular), name in Semibold. */
.pp-chip span { display: grid; font-size: var(--t-small-size); line-height: 1.375; min-width: 0; }
.pp-chip span b { font-weight: var(--t-semibold); }
.pp-chip a { font-size: var(--t-small-size); font-weight: var(--t-regular); color: var(--teal2); }
.pp-chip a:hover { text-decoration: underline; }
.pp-chip button { width: 34px; height: 34px; border: 0; border-radius: 7px; background: var(--wash); font-size: 20px; font-weight: var(--t-light); line-height: 1; color: var(--soft); cursor: pointer; flex: none; }
.pp-chip button:hover { background: var(--error); color: #fff; }


/* ------------------------------------------------------------------ find an installer: card, map, numbers */
/* The hero card on the home page: no search, one big call to action. */
.finder-cta { grid-template-columns: 1fr; }
.finder-cta .finder-note { font-size: var(--t-body-sm-size); line-height: var(--t-body-sm-lh); color: var(--soft); }
.finder-cta .btn { justify-self: start; }
.btn-lg { min-height: 60px; padding: 18px 40px; }
.na-stats { display: flex; flex-wrap: wrap; gap: 14px 40px; }
.na-stat { display: grid; gap: 2px; }
.na-stat .t-eyebrow { color: var(--teal-ink); }
.na-stat .t-stat { color: var(--ink); }
.na-stat .t-stat-label { color: var(--mute); }

/* ------------------------------------------------------------------ videos */
/* Real Bodaq videos: a local still and a play button that opens YouTube, or plays a youtube-nocookie
   embed in place once pressed (site.js). Nothing loads from YouTube before that. */
.vid-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.vids { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 28px; }
.vid { display: grid; gap: 10px; align-content: start; }
.vid .yt { box-shadow: none; border: 1px solid var(--line); border-radius: 12px; }
.vid .yt img { opacity: 1; }
.vids .yt .play { width: 58px; height: 58px; margin: -29px 0 0 -29px; }
.vids .yt .play::after { border-width: 10px 0 10px 16px; margin-left: 5px; }
.vid-note { font-size: var(--t-eyebrow-size); font-weight: var(--t-regular); line-height: var(--t-eyebrow-lh); text-transform: uppercase; color: var(--teal-ink); }
.vid-title { color: var(--ink); }
.vid .vid-note + .vid-title { margin-top: -6px; }
.sec.dark .vid-title, .sec.deep .vid-title { color: #fff; }
@media (max-width: 900px) { .vid-feature { grid-template-columns: 1fr; } .vids { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .vids { gap: 22px 14px; } .vids .vid-title { font-size: var(--t-body-sm-size); line-height: var(--t-body-sm-lh); } .vids .yt .play { width: 44px; height: 44px; margin: -22px 0 0 -22px; } }

/* ------------------------------------------------------------------ footer */
.site-foot { background-color: var(--char); color: #fff; background-image: radial-gradient(ellipse at 90% 0%, rgba(9, 152, 131, 0.22), transparent 50%), var(--dots); background-size: auto, 22px 22px; }
.foot-inner { max-width: var(--maxw); margin: 0 auto; padding: 64px var(--px) 34px; }
.grid-footer { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: 40px; margin-bottom: 44px; }
.grid-footer > div { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.brand-foot { margin: 0 0 4px; }
.brand-foot .brand-logo { width: 168px; }
/* .foot-blurb, .foot-h and .footer-link are kit aliases (.t-footer-text, .t-footer-h, .t-footer-link). */
.foot-blurb { margin: 8px 0 0; color: rgba(255, 255, 255, 0.62); max-width: 36ch; }
.foot-h { color: rgba(255, 255, 255, 0.5); margin: 0 0 4px; }
.footer-link { color: rgba(255, 255, 255, 0.84); padding: 2px 0; }
.footer-link:hover { color: var(--mint); text-decoration: underline; text-underline-offset: 3px; }
.foot-note { font-size: var(--t-footer-text-size); font-weight: var(--t-regular); line-height: var(--t-footer-text-lh); color: rgba(255, 255, 255, 0.6); }
.foot-hy { height: 18px; width: auto; margin-top: 14px; filter: brightness(0) invert(1); opacity: 0.7; }
.footer-family { border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 22px; margin-bottom: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.footer-family .foot-h { margin: 0; }
.footer-family .footer-link { color: rgba(255, 255, 255, 0.7); }
.footer-family .is-here { color: var(--mint); }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 22px; display: flex; justify-content: space-between; gap: 12px 24px; font-size: var(--t-small-size); font-weight: var(--t-regular); line-height: var(--t-small-lh); color: rgba(255, 255, 255, 0.5); flex-wrap: wrap; }
@media (max-width: 940px) { .grid-footer { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .grid-footer { grid-template-columns: 1fr; gap: 30px; } }

/* ------------------------------------------------------------------ 404 */
.nf { min-height: 60vh; display: grid; place-items: center; text-align: center; }
.nf .btns { justify-content: center; margin-top: 26px; }

/* ------------------------------------------------------------------ contact page */
.contact-cards { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.contact-cards .card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.contact-cards .card .ico { margin-bottom: 8px; }
.contact-cards .card p { color: var(--soft); }
.contact-cards .card .btn { margin-top: 10px; }
.contact-line { font-size: var(--t-body-size); font-weight: var(--t-regular); line-height: var(--t-body-lh); }
.handoff-note { margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--teal-line); border-radius: 10px; background: #fff; color: var(--ink); font-size: var(--t-body-sm-size); font-weight: var(--t-regular); line-height: var(--t-body-sm-lh); }
/* Footer button that opens the assistant: looks like the footer links, 44px tall to tap. */
.foot-ask { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: rgba(255, 255, 255, 0.84); text-align: left; cursor: pointer; }
.foot-ask:hover { color: var(--mint); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------------ assistant (assets/js/assistant.js) */
/* The launcher: a teal pill at the bottom right (an icon-only circle on phones), below the sticky
   header in the stacking order. It steps aside (.is-tucked) while it would sit over a form, and
   --ask-lift (on html) raises it above any bar fixed to the bottom of the screen. */
.ask-launch { position: fixed; z-index: 50; right: max(24px, env(safe-area-inset-right)); bottom: calc(max(24px, env(safe-area-inset-bottom)) + var(--ask-lift, 0px)); display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px 0 14px; border: 2px solid #fff; border-radius: 999px; background: var(--teal); color: #fff; box-shadow: 0 18px 40px -16px rgba(34, 32, 33, 0.6); cursor: pointer; font-size: var(--t-btn-size); font-weight: var(--t-regular); line-height: var(--t-btn-lh); text-transform: uppercase; }
.ask-launch .ico { width: 30px; height: 30px; stroke: #fff; stroke-width: 2.6; }
.ask-launch:hover { background: var(--teal2); }
.ask-launch.is-tucked { opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none; }
@media (max-width: 640px) {
  .ask-launch { right: max(16px, env(safe-area-inset-right)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + var(--ask-lift, 0px)); width: 56px; height: 56px; padding: 0; justify-content: center; }
  .ask-launch-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* room under the footer's last line, so the launcher never sits on it at the end of the page */
  .has-ask .foot-inner { padding-bottom: 104px; }
}
/* The panel: a modal dialog at the bottom right on wider screens, full screen on phones. */
.ask { position: fixed; inset: auto max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) auto; margin: 0; padding: 0; width: min(420px, calc(100vw - 48px)); height: min(660px, calc(100vh - 48px)); height: min(660px, calc(100dvh - 48px)); max-width: none; max-height: none; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--ink); box-shadow: 0 40px 90px -30px rgba(34, 32, 33, 0.6); overflow: hidden; }
.ask[open] { display: flex; flex-direction: column; }
.ask::backdrop { background: rgba(34, 32, 33, 0.28); }
.ask-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 10px 12px 16px; background-color: var(--char); color: #fff; background-image: radial-gradient(ellipse at 100% 0%, rgba(9, 152, 131, 0.42), transparent 60%), var(--dots); background-size: auto, 22px 22px; }
.ask-badge { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid rgba(200, 250, 235, 0.55); }
.ask-badge .ico { width: 26px; height: 26px; stroke: var(--mint); stroke-width: 2.4; }
.ask-head-t { min-width: 0; }
.ask-title { color: #fff; font-size: var(--t-h4-size); line-height: 1.25; }
.ask-title:focus { outline: none; }
.ask-desc { margin-top: 2px; color: rgba(255, 255, 255, 0.78); font-size: var(--t-small-size); font-weight: var(--t-regular); line-height: var(--t-small-lh); }
.ask-close { flex: none; margin-left: auto; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #fff; cursor: pointer; }
.ask-close:hover { background: rgba(255, 255, 255, 0.12); }
.ask-close:focus-visible { outline-color: var(--mint); outline-offset: -3px; }
.ask-log { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 12px; padding: 18px 16px 12px; background: var(--wash); }
.ask-log:focus-visible { outline-offset: -3px; }
.ask-msg { max-width: 92%; }
.ask-msg.is-bot { align-self: flex-start; }
.ask-msg.is-you { align-self: flex-end; max-width: 85%; }
.ask-bubble { margin: 0; padding: 12px 14px; border-radius: 14px; }
.ask-bubble, .ask-bubble p, .ask-bubble li { font-size: var(--t-body-sm-size); font-weight: var(--t-light); line-height: 1.55; }
.is-bot .ask-bubble { background: #fff; border: 1px solid var(--line); border-top-left-radius: 4px; color: var(--ink); }
.is-bot .ask-bubble p, .is-bot .ask-bubble li { color: var(--ink); }
.ask-bubble p + p, .ask-bubble .ask-list + p { margin-top: 8px; }
.is-you .ask-bubble { background: var(--teal); color: #fff; border-top-right-radius: 4px; font-weight: var(--t-regular); white-space: pre-wrap; overflow-wrap: anywhere; }
.ask-list { margin: 8px 0 0; padding-left: 20px; }
.ask-list li + li { margin-top: 4px; }
.ask-bubble .ask-src { margin-top: 10px; font-size: var(--t-small-size); font-weight: var(--t-regular); line-height: var(--t-small-lh); color: var(--mute); }
.ask-src-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--teal-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ask-src-link:hover { color: var(--bq-teal-deep); }
.ask-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ask-act { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 10px 14px; border: 1.5px solid var(--teal-line); border-radius: 8px; background: #fff; color: var(--teal-ink); font-size: var(--t-btn-size); font-weight: var(--t-regular); line-height: var(--t-btn-lh); text-transform: uppercase; text-align: left; cursor: pointer; }
.ask-act:hover, .ask-act.is-primary { background: var(--teal); border-color: var(--teal); color: #fff; }
.ask-act.is-primary:hover { background: var(--teal2); border-color: var(--teal2); }
.ask-nb { white-space: nowrap; }
.ask-dots { display: inline-flex; gap: 5px; padding: 4px 2px; }
.ask-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--mute); opacity: 0.6; }
.ask-chips { flex: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px 4px; border-top: 1px solid var(--line); background: #fff; }
.ask-chip { min-height: 44px; padding: 9px 14px; border: 1.5px solid var(--teal-line); border-radius: 999px; background: #fff; color: var(--teal-ink); font-size: var(--t-label-size); font-weight: var(--t-regular); line-height: 1.3; text-align: left; cursor: pointer; }
.ask-chip:hover { background: var(--teal); border-color: var(--teal); color: #fff; }
.ask-form { flex: none; display: flex; gap: 8px; padding: 10px 16px 8px; background: #fff; }
.ask-input { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 11px 14px; border: 1.5px solid #8a8889; border-radius: 10px; background: #fff; color: var(--ink); }
.ask-input::placeholder { color: var(--mute); opacity: 1; }
.ask-input:focus { outline: 0; border-color: var(--teal-line); box-shadow: 0 0 0 4px rgba(9, 152, 131, 0.2); }
.ask-send { flex: none; padding: 12px 20px; }
.ask-note { flex: none; padding: 0 16px 14px; background: #fff; color: var(--mute); font-size: var(--t-small-size); font-weight: var(--t-regular); line-height: var(--t-small-lh); }
@media (max-width: 640px) {
  .ask { inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; }
  html.ask-open { overflow: hidden; }
  .ask-msg { max-width: 100%; }
  /* suggestions in one row that scrolls sideways, so the conversation keeps the room */
  .ask-chips { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-padding-inline: 16px; scrollbar-width: none; padding-bottom: 8px; }
  .ask-chips::-webkit-scrollbar { display: none; }
  .ask-chip { flex: none; white-space: nowrap; }
}
@media (prefers-reduced-motion: no-preference) {
  .ask-launch { transition: opacity 0.2s, transform 0.2s, visibility 0s linear 0s, background-color 0.15s; }
  .ask-launch.is-tucked { transition: opacity 0.2s, transform 0.2s, visibility 0s linear 0.2s; }
  .ask[open] { animation: ask-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .ask[open]::backdrop { animation: ask-fade 0.22s ease-out; }
  .ask-dots i { animation: ask-dot 1.2s ease-in-out infinite; }
  .ask-dots i:nth-child(2) { animation-delay: 0.15s; }
  .ask-dots i:nth-child(3) { animation-delay: 0.3s; }
}
@keyframes ask-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ask-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ask-dot { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }

/* ------------------------------------------------------------------ motion off */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .ico .draw { stroke-dashoffset: 0; }
  .timeline::after { transform: none; }
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .marquee-track[aria-hidden="true"] { display: none; }
}