/* ==========================================================================
   Southern Patio Enclosures — Shared Design System
   Used by both the public website and the internal CRM.
   The CRM loads the same file and sets data-theme="crm" on <html>.
   ========================================================================== */

:root {
  /* Native UI (select popups, scrollbars, date pickers) follows the OS theme
     unless we name ours. Undeclared, a dark-mode OS painted this form's
     dropdown popups dark while the options kept their navy text -- Marci
     reported the boxes "not showing any options" (1 Sept 2026). The CRM
     block below needs the opposite for the same reason. */
  color-scheme: light;
  /* --- Brand palette ---
     Was "pulled from the live site", which had drifted off the printed brand.
     Re-sampled 1 Sept 2026 from the artwork itself -- the submittal pack in
     source-docs/ and Marci's trifold -- so the site, the documents and the
     brochures are one family:

       red   #a82a2c -> #c5232a   the print red; the old one read muddy beside it
       wash  #f8f8f8 -> #f6f2e7   her panels are warm cream, not cool grey
       blue  #88bbc8 -> slate     a pale cyan that appears nowhere in her work
                                  or in the pack; retoned into the navy family
                                  so it stops competing with the red and navy.
     Navy #1d2647 -> #272944, the pack's own, so headings match the print
     exactly (Tom, 2 Sept 2026: the trifold's theme on everything customer-facing). */
  --spe-red:        #c5232a;
  --spe-red-hover:  #d63a41;
  --spe-red-dark:   #96161c;
  --spe-blue:       #6e7aa6;
  --spe-blue-hover: #565f85;
  --spe-blue-light: #9aa4c8;
  --spe-green:      #35a950;
  --spe-navy:       #272944;
  --spe-navy-2:     #28345e;
  --spe-charcoal:   #393939;
  --spe-ink:        #222222;
  --spe-body:       #444444;
  --spe-muted:      #706a6a;
  --spe-line:       #e3ded2;
  --spe-wash:       #f6f2e7;
  --spe-wash2:      #efe9da;

  /* --- Semantic tokens: WEBSITE theme --- */
  --primary:        var(--spe-red);
  --primary-hover:  var(--spe-red-hover);
  --primary-dark:   var(--spe-red-dark);
  --primary-ink:    #ffffff;
  --accent:         var(--spe-blue);
  --accent-hover:   var(--spe-blue-hover);
  --accent-soft:    #eceef6;

  --bg:             #ffffff;
  --surface:        #ffffff;
  --surface-2:      var(--spe-wash);
  --surface-3:      var(--spe-wash2);
  --dark:           var(--spe-navy-2);
  --darker:         var(--spe-navy);

  --text:           var(--spe-body);
  --text-strong:    var(--spe-navy);
  --text-muted:     var(--spe-muted);
  --text-invert:    #ffffff;
  --border:         var(--spe-line);
  --border-strong:  #cfcfcf;

  --ok:             var(--spe-green);
  --warn:           #e0a217;
  --danger:         #c0392b;
  --info:           var(--spe-blue-hover);

  /* --- Type --- */
  --font-sans: "Jost", "Helvetica Neue", Helvetica, Arial, "Segoe UI", system-ui, sans-serif;
  --font-head: "Jost", "Helvetica Neue", Helvetica, Arial, "Segoe UI", system-ui, sans-serif;
  --font-mono: "SFMono-Regular", Menlo, Consolas, monospace;

  /* --- Shape & depth --- */
  --r-sm: 3px;
  --r:    5px;
  --r-lg: 10px;
  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.08);
  --sh-2: 0 2px 6px rgba(0,0,0,.07), 0 6px 18px rgba(0,0,0,.08);
  --sh-3: 0 10px 40px rgba(0,0,0,.16);

  /* --- Rhythm --- */
  --gut: 24px;
  --max: 1180px;
  --sec: 84px;
}

/* --- Semantic tokens: CRM theme (deep navy + steel blue) --- */
/* Hot Ticket runs hot: charcoal ground, ember surfaces, orange and amber
   doing the work the navy used to do.

   The contrast is deliberately high -- warm off-white on near-black is about
   13:1, better than the navy theme managed -- because Brian reads an 88-row
   payment table in here and reps read it on a phone in a car park. A dark
   theme that looks great and cannot be read at midday is a worse theme.

   Every page inherits from this one block, so the whole CRM turns together
   rather than the dashboard being hot and the rest staying cold. */
[data-theme="crm"] {
  /* Dark shell: keep native popups dark on a light-mode OS too. */
  color-scheme: dark;
  --font-sans: "Helvetica Neue", Helvetica, Arial, "Segoe UI", system-ui, sans-serif;
  --font-head: "Helvetica Neue", Helvetica, Arial, "Segoe UI", system-ui, sans-serif;
  --text-strong:    #fff6ea;
  --primary:        #ef6c2b;
  --primary-hover:  #ff8544;
  --primary-dark:   #b81a14;
  --primary-ink:    #2a0e04;
  --accent:         #ffd166;
  --accent-hover:   #ffe08a;
  --accent-soft:    #3a1f10;

  --bg:             #14100e;
  --surface:        #1e1815;
  --surface-2:      #26201b;
  --surface-3:      #322922;
  --dark:           #2a0e04;
  --darker:         #1b0d06;

  --text:           #e8ddd0;
  --text-strong:    #fff6ea;
  --text-muted:     #b09a86;
  --border:         #3a2f26;
  --border-strong:  #52443a;

  --ok:             #6fbf73;
  --warn:           #ffb44d;
  --danger:         #ff6b5e;
  --info:           #ffd166;

  --sec: 0px;
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
hr { border: 0; border-top: 1px solid var(--border); margin: 32px 0; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  color: var(--text-strong);
  line-height: 1.16;
  margin: 0 0 .5em;
  font-weight: 600;
}
h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); letter-spacing: .005em; }
h2 { font-size: clamp(1.55rem, 2.9vw, 2.2rem); letter-spacing: .01em; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.08rem; }
h5 { font-size: .95rem; }
p  { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.25em; }
li { margin-bottom: .4em; }
strong { font-weight: 700; color: var(--text-strong); }
small { font-size: .82em; }

.eyebrow {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: .7em;
}
.lead { font-size: 1.14rem; color: var(--text); }
.muted { color: var(--text-muted); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

/* ==========================================================================
   Layout
   ========================================================================== */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.wrap-narrow { max-width: 820px; }
.wrap-wide { max-width: 1400px; }

.section { padding: var(--sec) 0; }
.section--tight { padding: 52px 0; }
.section--wash { background: var(--surface-2); }
.section--wash2 { background: var(--surface-3); }
.section--dark { background: var(--dark); color: #cfd4da; }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark .eyebrow { color: var(--accent); }

.grid { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-sidebar { grid-template-columns: minmax(0,1fr) 320px; gap: 48px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }

.stack > * + * { margin-top: 14px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.row-between { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.spacer { flex: 1 1 auto; }

@media (max-width: 900px) {
  .grid-3, .grid-4, .grid-sidebar, .split { grid-template-columns: 1fr; }
  .split { gap: 32px; }
}
@media (max-width: 620px) {
  .grid-2 { grid-template-columns: 1fr; }
  :root { --sec: 56px; --gut: 18px; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: 13px 26px;
  border: 2px solid transparent;
  border-radius: var(--r);
  background: var(--primary);
  color: var(--primary-ink);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease, box-shadow .18s ease;
  white-space: nowrap;
}
.btn:hover { background: var(--primary-hover); color: var(--primary-ink); text-decoration: none; transform: translateY(-1px); box-shadow: var(--sh-2); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.btn--accent { background: var(--accent); color: #14323b; }
.btn--accent:hover { background: var(--accent-hover); color: #fff; }
.btn--dark { background: var(--dark); color: #fff; }
.btn--dark:hover { background: var(--darker); color: #fff; }
.btn--ghost { background: transparent; border-color: var(--spe-navy); color: var(--spe-navy); }
.btn--ghost:hover { background: var(--primary); color: var(--primary-ink); }
.btn--ghost-light { background: transparent; border-color: rgba(255,255,255,.7); color: #fff; }
.btn--ghost-light:hover { background: #fff; color: var(--text-strong); }
.btn--quiet { background: var(--surface-3); color: var(--text-strong); }
.btn--quiet:hover { background: var(--border-strong); color: var(--text-strong); }
.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover { background: #a5301f; }
.btn--ok { background: var(--ok); color: #fff; }
.btn--ok:hover { background: #2b8f42; }
.btn--sm { padding: 8px 16px; font-size: .76rem; }
.btn--lg { padding: 17px 36px; font-size: 1rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .45; pointer-events: none; }

/* ==========================================================================
   Cards & panels
   ========================================================================== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.card--pad { padding: 28px; }
.card--hover:hover { box-shadow: var(--sh-2); transform: translateY(-3px); border-color: var(--border-strong); }
.card__media { aspect-ratio: 16/10; background: var(--surface-3); position: relative; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 24px; }
.card__title { margin: 0 0 .45em; font-size: 1.15rem; }
.card__title a { color: var(--text-strong); }
.card__title a:hover { color: var(--primary); text-decoration: none; }
.card__meta { font-size: .82rem; color: var(--text-muted); letter-spacing: .04em; text-transform: uppercase; }

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.panel__head {
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.panel__head h3, .panel__head h4 { margin: 0; }
.panel__body { padding: 22px; }
.panel__foot { padding: 14px 22px; border-top: 1px solid var(--border); background: var(--surface-2); }

.callout {
  border-left: 5px solid var(--primary);
  background: var(--surface-2);
  padding: 20px 24px;
  border-radius: 0 var(--r) var(--r) 0;
  margin: 26px 0;
}
.callout--accent { border-left-color: var(--accent); }
.callout--ok { border-left-color: var(--ok); }
.callout--warn { border-left-color: var(--warn); }
.callout p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Badges, pills, tags
   ========================================================================== */
.badge {
  display: inline-flex; align-items: center; gap: .4em;
  padding: 3px 11px;
  border-radius: var(--r-pill);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  background: var(--surface-3); color: var(--text-strong);
  white-space: nowrap;
}
.badge--primary { background: var(--primary); color: var(--primary-ink); }
.badge--accent  { background: var(--accent); color: #14323b; }
.badge--ok      { background: #e4f6e9; color: #1e6b32; }
.badge--warn    { background: #fdf3dc; color: #8a6210; }
.badge--danger  { background: #fbe6e3; color: #8f2618; }
.badge--info    { background: var(--accent-soft); color: #35707f; }
.badge--muted   { background: var(--surface-3); color: var(--text-muted); }

.tag {
  display: inline-flex; align-items: center; gap: .35em;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: .74rem; font-weight: 600;
  background: var(--accent-soft); color: #2f6a79;
  border: 1px solid rgba(102,153,166,.28);
}
.tag button { border: 0; background: none; padding: 0 0 0 2px; color: inherit; opacity: .6; font-size: 1rem; line-height: 1; }
.tag button:hover { opacity: 1; }

.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--text-muted); }
.dot--ok { background: var(--ok); }
.dot--warn { background: var(--warn); }
.dot--danger { background: var(--danger); }
.dot--info { background: var(--info); }

/* ==========================================================================
   Forms
   ========================================================================== */
.field { margin-bottom: 18px; }
.field > label, .label {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-strong);
  margin-bottom: 6px;
}
.field .hint { display: block; font-size: .8rem; color: var(--text-muted); margin-top: 5px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.req { color: var(--primary); }

.input, .select, .textarea, .inp,
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], input[type="date"], input[type="search"], input[type="password"],
/* An <input> with no type= defaults to text but matches no [type] selector,
   so it used to inherit none of this and rendered noticeably smaller than the
   typed field next to it. */
input:not([type]),
select, textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  /* background-COLOR, never the shorthand -- see the note in the CRM theme
     block. The shorthand resets background-repeat and background-position,
     which is what tiles the select chevron. */
  background-color: var(--surface);
  color: var(--text-strong);
  font-size: .95rem;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none;
  appearance: none;
}
/* Imported blog posts: one hero image up top, the rest in a two-up gallery.
   Figures come from the importer with no classes beyond these. */
.postimg { margin: 0 0 1.4em; }
.postimg img { width: 100%; height: auto; border-radius: 10px; display: block; }
.postimg--hero { margin: 0 0 1.8em; }
.postgallery { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 2em; }
.postgallery .postimg { margin: 0; }
@media (max-width: 620px) { .postgallery { grid-template-columns: 1fr; } }

/* A file input keeps the field's border and sizing, but its own button has to
   be re-dressed -- the padding above leaves it sitting off-centre otherwise. */
input[type="file"].input { padding: 8px 10px; line-height: 1.4; }
input[type="file"].input::file-selector-button {
  margin-right: 12px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-2, #f3f5f8);
  color: var(--text-strong);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
input[type="file"].input::file-selector-button:hover { border-color: var(--brand-red, #c8102e); }

select, select.inp, select.input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7a90' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 34px;
}
/* Small selects keep room for the arrow as well. */
select.inp--sm, select.select--sm { padding-right: 30px; background-position: right 10px center; }
textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.input:focus, .select:focus, .textarea:focus, .inp:focus, input:not([type]):focus,
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent-hover);
  box-shadow: 0 0 0 3px rgba(110,122,166,.32);
}
.input--sm, .select--sm, .inp--sm,
input.inp--sm, select.inp--sm, textarea.inp--sm { padding: 7px 10px; font-size: .86rem; }

.check { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; font-size: .93rem; }
.check input { width: 17px; height: 17px; margin-top: 3px; flex: 0 0 auto; accent-color: var(--primary); }
.check label { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: .93rem; margin: 0; color: var(--text); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 620px) { .field-row, .field-row-3 { grid-template-columns: 1fr; } }

.form-note { font-size: .82rem; color: var(--text-muted); }
.field.has-error .input, .field.has-error select, .field.has-error textarea { border-color: var(--danger); }
.field .err { display: none; color: var(--danger); font-size: .8rem; margin-top: 5px; }
.field.has-error .err { display: block; text-transform: none; letter-spacing: 0; font-weight: 500; }
/* The short list by the Submit button: which boxes still need something. */
.form-alert { margin-top: 16px; padding: 10px 14px; border-left: 4px solid var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); color: var(--text); font-size: .92rem; border-radius: 4px; }
.form-alert .linkish { color: var(--danger); font-weight: 600; }

/* ==========================================================================
   Tables
   ========================================================================== */
.table-wrap { overflow-x: auto; border-radius: var(--r-lg); }
table.data { width: 100%; border-collapse: collapse; font-size: .9rem; background: var(--surface); }
table.data th {
  text-align: left;
  padding: 11px 14px;
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  font-weight: 700;
}
table.data td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.data tbody tr:hover { background: var(--surface-2); }
table.data tbody tr.is-clickable { cursor: pointer; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data .t-strong { font-weight: 700; color: var(--text-strong); }
table.data .t-sub { display: block; font-size: .8rem; color: var(--text-muted); }

.empty {
  padding: 54px 24px;
  text-align: center;
  color: var(--text-muted);
}
.empty h4 { color: var(--text-strong); margin-bottom: .4em; }

/* ==========================================================================
   Website: header
   ========================================================================== */
.topbar {
  background: var(--darker);
  color: #b9bec6;
  font-size: .82rem;
  padding: 7px 0;
}
.topbar a { color: #e6e9ed; }
.topbar a:hover { color: #fff; }
.topbar .row-between { gap: 18px; }
/* The service line reads the same as every other topbar link otherwise --
   an existing customer scanning for help has no reason to notice it over
   Contact Us. A filled pill in the accent color pulls the eye first. */
.topbar__cta {
  background: var(--primary); color: #fff !important; font-weight: 700;
  padding: 3px 11px; border-radius: 999px; letter-spacing: .01em;
}
.topbar__cta:hover { background: var(--primary-dark, var(--primary)); color: #fff !important; }

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: #fff;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}
.site-header .wrap { display: flex; align-items: center; gap: 26px; min-height: 84px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: 0 0 auto; }
.brand:hover { text-decoration: none; }
.brand__logo { display: block; height: 44px; overflow: hidden; flex: 0 0 auto; }
.brand__logo img { display: block; height: 59px; width: auto; object-fit: cover; object-position: top; }
.brand__logo--light img { filter: brightness(0) invert(1); }
/* The compact two-line lockup (script "Southern" over "PATIO ENCLOSURES",
   star on the divider) cropped from the source artwork -- replaces the
   wide single-line wordmark that was eating the header's menu space. */
.brand__mark { display: block; height: 58px; width: auto; flex: 0 0 auto; }
/* Navy text and red accents read fine on the white header but vanish on the
   dark footer, so the footer copy is flattened to white -- same technique
   already used on .brand__logo--light above. */
.brand__mark--light { filter: brightness(0) invert(1); }

.nav { margin-left: auto; }
.nav > ul { display: flex; list-style: none; margin: 0; padding: 0; gap: 2px; align-items: center; }
.nav > ul > li { position: relative; margin: 0; }
.nav > ul > li > a {
  display: block; padding: 10px 13px;
  font-size: .84rem; font-weight: 600; letter-spacing: .03em;
  color: var(--text-strong); text-transform: uppercase; border-radius: var(--r);
}
.nav > ul > li > a:hover, .nav > ul > li.is-active > a { color: var(--primary); background: var(--surface-2); text-decoration: none; }
.nav .has-sub > a::after { content: "▾"; font-size: .7em; margin-left: .4em; opacity: .6; }
.nav .sub {
  position: absolute; top: 100%; left: 0; min-width: 268px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: var(--sh-3);
  list-style: none; margin: 0; padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.nav .has-sub:hover .sub, .nav .has-sub:focus-within .sub { opacity: 1; visibility: visible; transform: translateY(0); }
.nav .sub li { margin: 0; }
.nav .sub a { display: block; padding: 9px 13px; font-size: .88rem; color: var(--text); border-radius: var(--r-sm); }
.nav .sub a:hover { background: var(--surface-2); color: var(--primary); text-decoration: none; }
/* Three system types read as interchangeable text links otherwise -- a
   photo makes Motorized/Manual/Sun Shades recognizable before reading the
   word. Only dropdowns that pass a thumbnail get this layout. */
.nav .sub--thumbs { min-width: 220px; }
.nav .sub--thumbs a { display: flex; align-items: center; gap: 12px; padding: 8px; font-weight: 600; }
.sub__thumb { width: 56px; height: 56px; border-radius: var(--r-sm); object-fit: cover; flex: 0 0 auto; }
.sub__icon { width: 56px; height: 56px; flex: 0 0 auto; background: var(--surface-2); border-radius: var(--r-sm); padding: 6px; box-sizing: border-box; }

.nav-cta { display: flex; gap: 10px; align-items: center; flex: 0 0 auto; }
.nav-toggle {
  display: none; border: 1px solid var(--border-strong); background: #fff;
  border-radius: var(--r); padding: 9px 12px; margin-left: auto;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--text-strong); }
.nav-toggle span + span { margin-top: 5px; }

@media (max-width: 1100px) {
  .nav > ul > li > a { padding: 10px 9px; font-size: .78rem; }
  .nav-cta .btn { padding: 11px 16px; font-size: .78rem; }
}
@media (max-width: 980px) {
  .nav-toggle { display: block; }
  .nav {
    display: none; order: 10; width: 100%;
    margin: 0 0 16px; border-top: 1px solid var(--border); padding-top: 12px;
  }
  .site-header .wrap { flex-wrap: wrap; }
  .site-header.is-open .nav { display: block; }
  .nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav > ul > li > a { padding: 12px 4px; border-bottom: 1px solid var(--border); border-radius: 0; }
  .nav .sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; padding: 4px 0 10px 16px; min-width: 0;
    display: none;
  }
  .nav .has-sub.is-open .sub { display: block; }
  .nav-cta { display: none; }
}

/* ==========================================================================
   Website: hero & page header
   ========================================================================== */
.hero {
  position: relative;
  min-height: 560px;
  display: grid; align-items: center;
  color: #fff;
  background: linear-gradient(115deg, #1c1c1c 0%, #2f2f2f 45%, #3a3a3a 100%);
  overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(1100px 500px at 78% 18%, rgba(110,122,166,.20), transparent 62%),
    linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.42) 52%, rgba(0,0,0,.15) 100%);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 2; padding: 96px 0; max-width: 760px; }
.hero h1 { color: #fff; margin-bottom: .38em; text-shadow: 0 2px 22px rgba(0,0,0,.4); }
.hero p { font-size: 1.16rem; color: #e3e6e9; max-width: 620px; }
.hero .eyebrow { color: var(--accent); }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.hero__stats { display: flex; gap: 44px; flex-wrap: wrap; margin-top: 46px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.18); }
.hero__stat b { display: block; font-size: 2rem; color: #fff; line-height: 1.1; }
.hero__stat span { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: #b9c0c7; }

/* -- hero slideshow -- */
.hero__slides { position: absolute; inset: 0; z-index: 0; }
.hero__slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 1.6s ease;
}
.hero__slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; }
}
/* Spans the hero but stays click-through, so only the buttons themselves take
   pointer events and the headline underneath is still selectable. */
.hero__controls { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hero__controls > * { pointer-events: auto; }
.hero__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.55);
  color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.hero__arrow:hover { background: rgba(0,0,0,.6); }
.hero__arrow--prev { left: 16px; }
.hero__arrow--next { right: 16px; }
.hero__dots {
  position: absolute; left: 0; right: 0; bottom: 18px; z-index: 4;
  pointer-events: none;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.hero__dot {
  pointer-events: auto;
  width: 9px; height: 9px; border-radius: 50%; padding: 0; border: none;
  background: rgba(255,255,255,.45); cursor: pointer;
  transition: background .15s, transform .15s;
}
.hero__dot:hover { background: rgba(255,255,255,.75); }
.hero__dot.is-active { background: #fff; transform: scale(1.3); }
@media (max-width: 640px) {
  .hero__arrow { width: 34px; height: 34px; font-size: 1.25rem; }
}

.pagehead {
  background: linear-gradient(115deg, var(--spe-navy) 0%, var(--spe-navy-2) 100%);
  color: #fff; padding: 74px 0 62px; position: relative; overflow: hidden;
}
.pagehead::after {
  content:""; position:absolute; inset:0;
  background: radial-gradient(760px 320px at 88% 0%, rgba(110,122,166,.22), transparent 65%);
}
.pagehead--photo {
  min-height: 460px; display: flex; align-items: center; padding: 74px 0;
}
.pagehead--photo::after {
  background:
    radial-gradient(760px 320px at 88% 0%, rgba(110,122,166,.16), transparent 65%),
    linear-gradient(90deg, rgba(21,28,55,.72) 0%, rgba(21,28,55,.40) 55%, rgba(21,28,55,.10) 100%);
}
.pagehead--photo .wrap { width: 100%; }
.pagehead .wrap { position: relative; z-index: 2; }
.pagehead h1 { color: #fff; margin-bottom: .3em; max-width: 900px; }
.pagehead p { color: #dfe3e6; max-width: 720px; font-size: 1.08rem; margin: 0; }
.crumbs { font-size: .8rem; color: #a9b0b7; margin-bottom: 18px; letter-spacing: .04em; }
.crumbs a { color: #d5dade; }
.crumbs span { opacity: .55; margin: 0 7px; }

/* ==========================================================================
   Website: content blocks
   ========================================================================== */
.section-head { max-width: 760px; margin: 0 auto 52px; text-align: center; }
.section-head h2::after {
  content: ""; display: block; width: 190px; height: 15px;
  margin: 18px auto 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.5 5.9 6.4.5-4.9 4.2 1.5 6.3L12 16l-5.5 3.4 1.5-6.3-4.9-4.2 6.4-.5z' fill='%23c5232a' stroke='%231d2647' stroke-width='1.1'/%3E%3C/svg%3E") center/15px 15px no-repeat,
    linear-gradient(var(--primary), var(--primary)) left center/72px 1px no-repeat,
    linear-gradient(var(--primary), var(--primary)) right center/72px 1px no-repeat;
}
.section-head--left h2::after { margin-left: 0; }
.section-head p { font-size: 1.06rem; color: var(--text-muted); margin: 0; }
.section-head--left { margin-left: 0; text-align: left; }

.feature { text-align: left; }
.feature__icon {
  width: 58px; height: 58px; border-radius: 50%;
  background: transparent; color: var(--primary);
  border: 2px solid var(--spe-navy);
  display: grid; place-items: center; font-size: 1.3rem; margin-bottom: 16px;
  transition: border-color .18s, color .18s;
}
.feature:hover .feature__icon { border-color: var(--primary); }
.feature h3 { font-size: 1.12rem; margin-bottom: .4em; }
.feature p { color: var(--text-muted); font-size: .95rem; margin: 0; }

.logo-strip { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; }
.logo-strip .logo-chip {
  padding: 13px 22px; border: 1px solid var(--border); border-radius: var(--r);
  background: #fff; color: var(--text-muted);
  font-weight: 700; font-size: .88rem; letter-spacing: .02em;
  transition: color .18s, border-color .18s;
}
.logo-strip .logo-chip:hover { color: var(--text-strong); border-color: var(--border-strong); }

.spec-list { list-style: none; padding: 0; margin: 0; }
.spec-list li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 13px 0; border-bottom: 1px solid var(--border); margin: 0;
}
.spec-list li:last-child { border-bottom: 0; }
.spec-list .k { flex: 0 0 190px; font-weight: 700; color: var(--text-strong); font-size: .9rem; }
.spec-list .v { flex: 1; color: var(--text); font-size: .95rem; }
@media (max-width: 620px) { .spec-list li { flex-direction: column; gap: 3px; } .spec-list .k { flex: none; } }

.checklist { list-style: none; padding: 0; }
.checklist li { position: relative; padding-left: 30px; margin-bottom: 11px; }
.checklist li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--ok); font-weight: 800;
}

.numbered { counter-reset: n; list-style: none; padding: 0; }
.numbered li { counter-increment: n; position: relative; padding-left: 52px; margin-bottom: 24px; }
.numbered li::before {
  content: counter(n); position: absolute; left: 0; top: -2px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--primary); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: .92rem;
}
.numbered li h4 { margin-bottom: .25em; }
.numbered li p { margin: 0; color: var(--text-muted); font-size: .95rem; }

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.shot {
  position: relative; aspect-ratio: 4/3; border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(135deg, #3d4a52, #6b7d87);
  display: flex; align-items: flex-end;
}
.shot figcaption {
  position: relative; z-index: 2; width: 100%;
  padding: 46px 18px 16px; color: #fff; font-size: .86rem; line-height: 1.4;
  background: linear-gradient(transparent, rgba(0,0,0,.82));
}
.shot figcaption b { display: block; font-size: .96rem; margin-bottom: 2px; }

.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative;
  font-weight: 700; color: var(--text-strong); font-size: 1.03rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--primary); line-height: 1;
}
.faq-item[open] summary::after { content: "–"; }
.faq-item .faq-body { padding: 0 40px 22px 0; color: var(--text); }
.faq-item .faq-body p:last-child { margin-bottom: 0; }

/* The collateral's own tagline as a slim navy band -- wide-tracked light
   caps, the exact voice of the brochure covers. */
.tagband {
  background: var(--spe-navy); color: #fff;
  padding: 17px 0; text-align: center;
}
.tagband span {
  font-weight: 300; font-size: clamp(.92rem, 1.7vw, 1.18rem);
  letter-spacing: .34em; text-transform: uppercase; text-indent: .34em;
}

/* Thin red keyline box, straight off the brochure intro blocks. */
.keyline {
  border: 1px solid var(--primary);
  padding: 26px 30px;
}

.cta-band { background: var(--spe-navy); color: #fff; padding: 64px 0; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.9); font-size: 1.1rem; max-width: 660px; margin: 0 auto 28px; }
.cta-band .row { justify-content: center; }

/* ---------------------------------------------------------------- Hot Ticket
   splash hero. Full-bleed photo of the boat with the greeting laid over a
   bottom-weighted scrim, so white type stays readable whether the shot is a
   bright golden-hour bow-on or the dark Harvest Moon. One of three, picked at
   random each load (see renderWelcome). */
.hthero { position: relative; border-radius: 14px; overflow: hidden;
          margin: 14px 0 18px; background: #0A1826; isolation: isolate; }
.hthero__img { display: block; width: 100%; height: clamp(210px, 34vw, 380px);
               object-fit: cover; object-position: center 42%; }
.hthero__scrim { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,15,25,.52) 0%, rgba(6,15,25,.10) 38%,
              rgba(6,15,25,.60) 78%, rgba(6,15,25,.88) 100%); }
.hthero__txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 26px 22px;
               color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.55); }
.hthero__day { margin: 0 0 4px; font-size: .74rem; letter-spacing: .16em;
               text-transform: uppercase; opacity: .82; }
.hthero__h { margin: 0; font-size: clamp(1.6rem, 3.6vw, 2.4rem); line-height: 1.1;
             color: #fff; }
.hthero__sub { margin: 5px 0 0; font-size: 1rem; opacity: .92;
               display: flex; align-items: center; gap: 8px; }
.hthero__cap { position: absolute; top: 12px; right: 14px; color: #fff;
               font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
               background: rgba(6,15,25,.42); padding: 5px 10px; border-radius: 999px;
               backdrop-filter: blur(3px); }
@media (max-width: 640px) {
  .hthero__cap { display: none; }
  .hthero__txt { padding: 16px 18px 18px; }
}

.stat-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); }
.stat-band > div { background: var(--surface); padding: 34px 22px; text-align: center; }
.stat-band b { display: block; font-size: 2.3rem; color: var(--primary); line-height: 1.1; font-weight: 800; }
.stat-band span { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
@media (max-width: 760px) { .stat-band { grid-template-columns: repeat(2, 1fr); } }

.quote-block {
  background: var(--surface-2); border-radius: var(--r-lg); padding: 34px;
  border-left: 5px solid var(--accent);
}
.quote-block blockquote { margin: 0 0 16px; font-size: 1.12rem; line-height: 1.6; color: var(--text-strong); font-style: italic; }
.quote-block cite { font-style: normal; font-size: .88rem; color: var(--text-muted); }

/* ==========================================================================
   Website: footer
   ========================================================================== */
.site-footer { background: var(--darker); color: #a8aeb5; padding: 62px 0 0; font-size: .92rem; }
.site-footer h4 { color: #fff; font-size: .8rem; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 18px; }
.site-footer a { color: #c6ccd2; }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 9px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 46px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-bar {
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 20px 0; font-size: .82rem; color: #838a92;
}
.social { display: flex; gap: 10px; }
.social a {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.08); display: grid; place-items: center;
  font-size: .75rem; font-weight: 700; color: #c6ccd2; text-decoration: none;
}
.social a:hover { background: var(--primary); color: #fff; }

/* ==========================================================================
   Utility
   ========================================================================== */
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:32px}.mt-5{margin-top:48px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.mb-4{margin-bottom:32px}
.hide { display: none !important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.scroll-y { overflow-y: auto; }

@media print {
  .site-header, .site-footer, .topbar, .cta-band, .nav-toggle { display: none !important; }
  body { font-size: 12px; }
}

/* ==========================================================================
   Mobile sticky contact bar
   Desktop shows the call button in the header; below 980px the header CTA
   is hidden, so this bar carries call + quote instead. Mobile is where
   most search traffic converts, so these stay reachable at all times.
   ========================================================================== */
.mobile-cta { display: none; }

@media (max-width: 980px) {
  .mobile-cta {
    display: flex; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,.97);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 14px rgba(0,0,0,.10);
  }
  .mobile-cta .btn { flex: 1 1 0; padding: 13px 10px; font-size: .82rem; }
  /* keep the sticky bar from covering page content or the footer */
  body { padding-bottom: 74px; }
}
@media print { .mobile-cta { display: none !important; } }

/* ==========================================================================
   Window comparison — standard vs MaxView
   Pre-shrunk clear comes in 108" x 54" sheets. A standard motorized window
   is one sheet -- 54" tall. MaxView stacks two, giving 108". The difference
   is height, not width, so the figure holds width constant.
   ========================================================================== */
.winviz { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 30px 0 6px; }
.winviz figure { margin: 0; }
.winviz__frame {
  aspect-ratio: 4 / 3; background: var(--dark); border-radius: var(--r);
  display: grid; place-items: center; box-shadow: var(--sh-1);
}
.winviz__glass {
  line-height: 1.35;
  background: linear-gradient(150deg, #dfe9ef 0%, #f4f8fa 45%, #cfdde5 100%);
  border: 1px solid rgba(255,255,255,.55); border-radius: 2px;
  display: grid; place-items: center; text-align: center;
  font-size: .78rem; font-weight: 700; color: #46606e; letter-spacing: .02em;
}
.winviz--std .winviz__glass { width: 86%; height: 40%; }
.winviz--max .winviz__glass { width: 86%; height: 80%; }
.winviz figcaption { text-align: center; margin-top: 10px; font-size: .88rem; color: var(--text-muted); }
.winviz figcaption b { display: block; color: var(--text-strong); font-size: .98rem; }
@media (max-width: 560px) { .winviz { grid-template-columns: 1fr; } }


/* ==========================================================================
   Website assistant
   A launcher and a panel, not an auto-opening bubble — an unprompted chat
   window over a commercial site reads as a gimmick to the people we want.
   ========================================================================== */
.chatbtn {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border: 0; border-radius: 40px; cursor: pointer;
  background: var(--primary); color: var(--primary-ink);
  font: 600 .92rem/1 var(--font-sans);
  box-shadow: 0 6px 20px rgba(20,28,34,.22);
}
.chatbtn:hover { background: var(--primary-hover); }
.chatbtn__i { font-size: .6rem; opacity: .8; }
.chatpanel {
  position: fixed; right: 20px; bottom: 78px; z-index: 61;
  width: min(380px, calc(100vw - 40px)); max-height: min(560px, calc(100vh - 120px));
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: 0 14px 44px rgba(20,28,34,.26);
  overflow: hidden;
}
.chatpanel[hidden] { display: none; }
.chatpanel__h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; background: var(--dark); color: #fff;
}
.chatpanel__x {
  background: none; border: 0; color: #fff; font-size: 1.4rem; line-height: 1;
  cursor: pointer; padding: 0 4px; opacity: .8;
}
.chatpanel__x:hover { opacity: 1; }
.chatpanel__log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.chatmsg { margin: 0; padding: 9px 12px; border-radius: 12px; font-size: .9rem; line-height: 1.5; white-space: pre-wrap; }
.chatmsg--bot { background: var(--surface-2); color: var(--text); border-bottom-left-radius: 3px; }
.chatmsg--you { background: var(--accent-soft); color: var(--text-strong); align-self: flex-end; border-bottom-right-radius: 3px; }
.chatmsg--err { background: #fdecec; color: #a3231f; }
.chatpanel__f { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); }
.chatpanel__in {
  flex: 1; padding: 9px 11px; border: 1px solid var(--border);
  border-radius: var(--r); font: inherit; font-size: .9rem;
  background: var(--surface); color: var(--text);
}
.chatpanel__in:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.chatpanel__n { margin: 0; padding: 0 12px 11px; font-size: .74rem; color: var(--text-muted); }
@media (max-width: 520px) {
  .chatbtn { right: 12px; bottom: 12px; }
  .chatpanel { right: 12px; left: 12px; bottom: 66px; width: auto; }
}
@media print { .chatbtn, .chatpanel { display: none !important; } }

/* ==========================================================================
   Sales Thermostat  (CRM)
   Dell printed one of these on the sales sheet. It is a joke, and it is also
   the only number anybody actually looks at -- which is the joke's whole
   point. Chrome bevels, hard shadows, a marquee. Deliberately 1996.

   Built in CSS rather than as a GIF so it stays crisp on any screen, follows
   the real number, and works in both themes without a second asset.
   ========================================================================== */
.thermos { display: flex; flex-wrap: wrap; gap: 22px; }

.thermo {
  flex: 1 1 320px;
  border: 3px solid #6b7a90;
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(220,228,238,.55)),
    var(--surface-2);
  box-shadow: inset -2px -2px 0 rgba(0,0,0,.22), inset 2px 2px 0 rgba(255,255,255,.85),
              4px 4px 0 rgba(27,42,65,.28);
  overflow: hidden;
}
.thermo__head {
  padding: 9px 14px;
  font: 800 .82rem/1.2 var(--font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0,0,0,.45);
  background: linear-gradient(180deg, #4c6d8f 0%, #1b2a41 55%, #16233a 100%);
  border-bottom: 2px solid #16233a;
}
.thermo__body { display: flex; gap: 18px; padding: 18px 16px 26px; align-items: stretch; }

/* The gauge wrapper is NOT clipped, so tick labels, steam and the bulb can sit
   outside the tube. The tube itself is clipped so the mercury takes its
   rounded top -- that clip is what was eating the tick labels. */
.thermo__gauge { position: relative; flex: 0 0 96px; width: 96px; min-height: 230px; }

/* -- the tube -- */
.thermo__tube {
  position: absolute; left: 0; top: 0; bottom: 26px; width: 40px;
  border: 3px solid #6b7a90; border-radius: 20px 20px 6px 6px;
  background: linear-gradient(90deg, #cfd8e3 0%, #ffffff 38%, #eef2f7 62%, #b9c4d2 100%);
  box-shadow: inset 0 0 8px rgba(27,42,65,.35);
  overflow: hidden;
}
.thermo__mercury {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, #7c1113 0%, #d2342f 40%, #ff6b5e 55%, #a81f1c 100%);
  box-shadow: 0 0 10px rgba(200,40,30,.7);
  transition: height .9s cubic-bezier(.2,.9,.25,1);
}
.thermo--goal     .thermo__mercury { background: linear-gradient(90deg,#0f5b25,#35a950 45%,#7ce39a 58%,#1e7a37); box-shadow:0 0 10px rgba(53,169,80,.65); }
.thermo--overflow .thermo__mercury { background: linear-gradient(90deg,#8a5a06,#e0a217 45%,#ffd77a 58%,#a97b0c); box-shadow:0 0 12px rgba(224,162,23,.75); }
.thermo--exploding .thermo__mercury { animation: thermoPulse .9s ease-in-out infinite alternate; }
@keyframes thermoPulse {
  from { box-shadow: 0 0 8px rgba(200,40,30,.6); filter: none; }
  to   { box-shadow: 0 0 26px rgba(255,90,60,1); filter: brightness(1.22); }
}

/* zone stripes behind the mercury, so the bands read even at a glance */
.thermo__zone { position: absolute; left: 0; right: 0; pointer-events: none; }
.thermo__zone--goal { bottom: 76.9%; height: 7.7%;  background: rgba(53,169,80,.30); }
.thermo__zone--over { bottom: 84.6%; height: 7.7%;  background: rgba(224,162,23,.34); }
.thermo__zone--boom { bottom: 92.3%; height: 7.7%;  background: rgba(200,40,30,.34); }

/* Ticks are positioned against the tube's own span, which stops 26px up from
   the wrapper's floor to leave room for the bulb. */
.thermo__tick { position: absolute; left: 0; right: 0; height: 0; margin-bottom: 26px; }
.thermo__tick i {
  position: absolute; left: 30px; width: 14px; height: 2px; background: rgba(22,35,58,.5);
}
.thermo__tick b {
  position: absolute; left: 48px; transform: translateY(-52%);
  font: 700 .68rem/1 var(--font-mono); color: var(--text-muted); white-space: nowrap;
}

.thermo__bulb {
  position: absolute; left: -4px; bottom: 0; width: 48px; height: 48px;
  border: 3px solid #6b7a90; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ff8a7a, #c8281e 60%, #7c1113);
  box-shadow: inset -2px -3px 6px rgba(0,0,0,.45);
}
.thermo--exploding .thermo__bulb { animation: thermoPulse .9s ease-in-out infinite alternate; }

/* steam, only once somebody is past 120 */
.thermo__steam { position: absolute; top: -6px; left: 20px; }
.thermo__steam i {
  position: absolute; bottom: 0; width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,.85); opacity: 0;
  animation: thermoSteam 2.2s ease-out infinite;
}
.thermo__steam i:nth-child(1) { left: -13px; animation-delay: 0s; }
.thermo__steam i:nth-child(2) { left: 0;     animation-delay: .5s; }
.thermo__steam i:nth-child(3) { left: 13px;  animation-delay: 1s; }
@keyframes thermoSteam {
  0%   { opacity: 0;  transform: translateY(0)     scale(.6); }
  25%  { opacity: .9; }
  100% { opacity: 0;  transform: translateY(-46px) scale(1.9); }
}

/* -- the readout -- */
.thermo__read { flex: 1; min-width: 0; }
.thermo__deg {
  display: block; font: 800 3.4rem/.9 var(--font-mono); letter-spacing: -.03em;
  color: var(--text-strong); text-shadow: 2px 2px 0 rgba(27,42,65,.18);
}
.thermo__deg sup { font-size: .42em; top: -1.1em; }
.thermo--exploding .thermo__deg { color: #c8281e; }
.thermo--overflow  .thermo__deg { color: #a97b0c; }
.thermo--goal      .thermo__deg { color: #1e7a37; }

.thermo__word {
  display: inline-block; margin: 8px 0 12px; padding: 4px 11px; border-radius: 3px;
  font: 800 .72rem/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase;
  color: #fff; background: #6b7a90; text-shadow: 1px 1px 0 rgba(0,0,0,.4);
  box-shadow: inset -1px -1px 0 rgba(0,0,0,.3), inset 1px 1px 0 rgba(255,255,255,.4);
}
.thermo--goal      .thermo__word { background: #1e7a37; }
.thermo--overflow  .thermo__word { background: #a97b0c; }
.thermo--exploding .thermo__word { background: #c8281e; animation: thermoBlink 1s steps(1) infinite; }
@keyframes thermoBlink { 50% { opacity: .35; } }

.thermo__facts { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0 0 10px; }
.thermo__facts dt { font-size: .74rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .07em; }
.thermo__facts dd { margin: 0; font: 700 .9rem/1.3 var(--font-mono); color: var(--text-strong); }
.thermo__src { display: block; font-size: .72rem; color: var(--text-muted); }

.thermo__marq {
  overflow: hidden; white-space: nowrap;
  background: repeating-linear-gradient(45deg,#c8281e 0 12px,#7c1113 12px 24px);
  color: #fff; font: 800 .72rem/1 var(--font-sans); letter-spacing: .18em; padding: 7px 0;
  border-top: 2px solid #7c1113;
}
.thermo__marq span { display: inline-block; padding-left: 100%; animation: thermoMarq 12s linear infinite; }
@keyframes thermoMarq { to { transform: translateX(-100%); } }

/* Q4 stretch hit (Tom, 4 Oct 2026: "gush over in a big explosion" ... "more
   explosion, less shake"): a flash burst at the top of the tube and thirty
   mercury and gold droplets blasting out over the page. No shake. */
.thermo__gush { position: absolute; left: 50%; top: -6px; width: 0; height: 0; pointer-events: none; z-index: 5; }
.thermo__gush b { position: absolute; left: -60px; top: -60px; width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,243,176,.95) 0 18%, rgba(242,183,5,.7) 35%, rgba(200,40,30,.35) 55%, transparent 70%);
  animation: thermoFlash 1.4s ease-out infinite; }
@keyframes thermoFlash { 0% { transform: scale(.2); opacity: 1; } 70% { opacity: .5; } 100% { transform: scale(2.6); opacity: 0; } }
.thermo__gush i { position: absolute; width: 14px; height: 14px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 35% 35%, #ff8a7a, #c8281e 60%, #7c1113);
  box-shadow: 0 0 12px rgba(242,183,5,.75);
  animation: thermoGush 1.8s cubic-bezier(.12,.75,.3,1) infinite; }
.thermo__gush i:nth-of-type(odd) { background: radial-gradient(circle at 35% 35%, #fff3b0, #f2b705 60%, #b07d00); }
.thermo__gush i:nth-of-type(1) { --dx: -79px; --dy: -148px; --s: 1.29; animation-delay: 0.10s; }
.thermo__gush i:nth-of-type(2) { --dx: 20px; --dy: -208px; --s: 0.75; animation-delay: 0.71s; }
.thermo__gush i:nth-of-type(3) { --dx: -213px; --dy: -61px; --s: 0.76; animation-delay: 0.13s; }
.thermo__gush i:nth-of-type(4) { --dx: -62px; --dy: -290px; --s: 0.81; animation-delay: 0.31s; }
.thermo__gush i:nth-of-type(5) { --dx: 111px; --dy: -300px; --s: 1.22; animation-delay: 0.56s; }
.thermo__gush i:nth-of-type(6) { --dx: 144px; --dy: -35px; --s: 1.47; animation-delay: 0.41s; }
.thermo__gush i:nth-of-type(7) { --dx: -136px; --dy: -88px; --s: 0.98; animation-delay: 1.14s; }
.thermo__gush i:nth-of-type(8) { --dx: -194px; --dy: -157px; --s: 1.28; animation-delay: 0.52s; }
.thermo__gush i:nth-of-type(9) { --dx: 20px; --dy: -150px; --s: 0.75; animation-delay: 0.29s; }
.thermo__gush i:nth-of-type(10) { --dx: 106px; --dy: -193px; --s: 0.98; animation-delay: 0.82s; }
.thermo__gush i:nth-of-type(11) { --dx: -25px; --dy: -195px; --s: 1.41; animation-delay: 0.98s; }
.thermo__gush i:nth-of-type(12) { --dx: -163px; --dy: -188px; --s: 1.17; animation-delay: 1.23s; }
.thermo__gush i:nth-of-type(13) { --dx: 116px; --dy: -156px; --s: 1.58; animation-delay: 0.17s; }
.thermo__gush i:nth-of-type(14) { --dx: -64px; --dy: -276px; --s: 0.84; animation-delay: 0.68s; }
.thermo__gush i:nth-of-type(15) { --dx: -256px; --dy: -74px; --s: 1.39; animation-delay: 0.80s; }
.thermo__gush i:nth-of-type(16) { --dx: 173px; --dy: -99px; --s: 1.33; animation-delay: 0.83s; }
.thermo__gush i:nth-of-type(17) { --dx: 50px; --dy: -221px; --s: 1.46; animation-delay: 1.32s; }
.thermo__gush i:nth-of-type(18) { --dx: -19px; --dy: -265px; --s: 0.75; animation-delay: 0.98s; }
.thermo__gush i:nth-of-type(19) { --dx: 131px; --dy: -301px; --s: 1.44; animation-delay: 0.40s; }
.thermo__gush i:nth-of-type(20) { --dx: -83px; --dy: -253px; --s: 0.72; animation-delay: 0.65s; }
.thermo__gush i:nth-of-type(21) { --dx: -129px; --dy: -97px; --s: 0.75; animation-delay: 1.08s; }
.thermo__gush i:nth-of-type(22) { --dx: -160px; --dy: -95px; --s: 1.05; animation-delay: 1.22s; }
.thermo__gush i:nth-of-type(23) { --dx: -207px; --dy: -87px; --s: 1.19; animation-delay: 1.24s; }
.thermo__gush i:nth-of-type(24) { --dx: 236px; --dy: -191px; --s: 0.95; animation-delay: 0.58s; }
.thermo__gush i:nth-of-type(25) { --dx: -118px; --dy: -284px; --s: 1.56; animation-delay: 0.21s; }
.thermo__gush i:nth-of-type(26) { --dx: -144px; --dy: -113px; --s: 0.91; animation-delay: 0.68s; }
.thermo__gush i:nth-of-type(27) { --dx: 46px; --dy: -184px; --s: 0.70; animation-delay: 0.59s; }
.thermo__gush i:nth-of-type(28) { --dx: -88px; --dy: -231px; --s: 1.56; animation-delay: 0.97s; }
.thermo__gush i:nth-of-type(29) { --dx: 11px; --dy: -257px; --s: 1.31; animation-delay: 0.08s; }
.thermo__gush i:nth-of-type(30) { --dx: 258px; --dy: -126px; --s: 1.49; animation-delay: 1.12s; }
@keyframes thermoGush {
  0%   { transform: translate(-7px, 0) scale(.4); opacity: 0; }
  8%   { opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translate(calc(var(--dx) - 7px), var(--dy)) scale(var(--s, 1.2)); opacity: 0; }
}
.thermo.thermo--exploding { overflow: visible; position: relative; z-index: 3; }
.thermo__marq--boom { background: repeating-linear-gradient(45deg,#f2b705 0 12px,#c8281e 12px 24px); color: #1a1a1a; border-top-color: #b07d00; }
.thermo__marq--boom span { animation-duration: 8s; }
@media (prefers-reduced-motion: reduce) {
  .thermo__gush i, .thermo__gush b { animation: none; }
  .thermo__gush i { opacity: 1; transform: translate(var(--dx), var(--dy)); }
}

/* nothing to show yet */
.thermo--none .thermo__empty { padding: 26px 18px; text-align: center; }
.thermo--none .thermo__empty b { display: block; font: 800 2rem/1 var(--font-mono); color: var(--text-strong); }
.thermo--none .thermo__empty span { display: block; font-size: .76rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .09em; margin-top: 4px; }
.thermo--none .thermo__empty p { margin: 14px 0 0; font-size: .86rem; color: var(--text-muted); }

/* Somebody will have this open on a phone at a jobsite. */
@media (max-width: 620px) {
  .thermo__body { padding: 14px 12px 20px; gap: 12px; }
  .thermo__gauge { flex: 0 0 86px; width: 86px; }
  .thermo__deg { font-size: 2.6rem; }
}
/* The pulse, blink, steam and marquee are decoration -- switch them off for
   anyone who has asked the OS to stop moving things. The colours and the
   number still carry the whole message. */
@media (prefers-reduced-motion: reduce) {
  .thermo__mercury, .thermo--exploding .thermo__mercury, .thermo--exploding .thermo__bulb,
  .thermo--exploding .thermo__word, .thermo__steam i, .thermo__marq span { animation: none; transition: none; }
  .thermo__marq span { padding-left: 0; }
}

/* who is signed in, in the sidebar foot */
.side__me { font-size: .78rem; color: var(--text-muted); margin: 0 0 8px; }
.side__out { color: var(--accent); text-decoration: underline; }

/* The area context beside each goal box: what that patch of the map has been
   worth, and how much of it the rep already owns. */
.areanote { margin: 6px 0 0; max-width: 30em; }
.areanote b { font: 700 1rem/1.2 var(--font-mono); color: var(--text-strong); }
.areanote span { font-size: .84rem; color: var(--text); }
.areanote small { display: block; font-size: .76rem; color: var(--text-muted); margin-top: 3px; }
.areanote__warn { color: #a97b0c; }
.goalbox { margin-right: 6px; }

/* Discount approvals. A request, and Mark's decision on it. */
.disc { list-style: none; margin: 0 0 16px; padding: 0; }
.disc__row { padding: 14px 0; border-bottom: 1px solid var(--border); }
.disc__row:last-child { border-bottom: 0; }
.disc__row > div:first-child { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.disc__row b { font-size: 1.02rem; color: var(--text-strong); }
.disc__row small { display: block; width: 100%; font-size: .76rem; }
.disc__why {
  margin: 7px 0 0; padding: 9px 12px; border-left: 3px solid var(--border-strong);
  background: var(--surface-2); font-size: .9rem; color: var(--text);
}
.disc__note { margin: 9px 0 0; font-size: .88rem; color: var(--text); }
.disc__wait { margin: 9px 0 0; font-size: .84rem; }
.disc__act { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
.disc__act .inp { flex: 1 1 220px; }
.disc__form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* Each control gets a basis wide enough for its own longest option text.
   Without these the select clipped "the price they want" and the agreed
   field clipped its placeholder mid-word. */
.disc__form select { flex: 0 1 200px; min-width: 175px; }
.disc__form #dval { flex: 0 0 110px; }
.disc__form #dreason { flex: 3 1 280px; }
.disc__form #dagreed { flex: 2 1 240px; }
.panel--approve { border-left: 4px solid var(--warn); }

/* Final payments -- Brian's chase list. */
.tbl--pay td { vertical-align: top; }
.pay__job small { display: block; font-size: .76rem; }
.pay__form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; min-width: 300px; }
.pay__hist { list-style: none; margin: 8px 0 0; padding: 0; }
.pay__hist li {
  font-size: .78rem; color: var(--text-muted); padding: 3px 0;
  border-top: 1px dotted var(--border);
}
.pay__hist li.is-void { text-decoration: line-through; opacity: .6; }
.pay__hist li.is-void b { text-decoration: none; color: var(--danger); }
.lnk {
  border: 0; background: none; padding: 0; font: inherit; font-size: .76rem;
  color: var(--accent-hover); text-decoration: underline; cursor: pointer;
}
.panel--pay .callout { margin: 18px 0; }

/* Year to date: company quarters beside per-rep totals. */
.qtr { display: grid; grid-template-columns: 1fr 1.15fr; gap: 26px; }
.qtr__half h4 {
  margin: 0 0 10px; font-size: .74rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--text-muted);
}
.qtr__tot td { border-top: 2px solid var(--border-strong); }
.qtr__half small { display: block; font-size: .72rem; }
.qdeg { font: 800 1.02rem/1 var(--font-mono); }
.qdeg--exploding { color: #c8281e; }
.qdeg--overflow  { color: #a97b0c; }
.qdeg--goal      { color: #1e7a37; }
.qdeg--warm, .qdeg--cold { color: var(--text-muted); }
@media (max-width: 900px) { .qtr { grid-template-columns: 1fr; gap: 18px; } }
.tbl--qtr small { display: block; font-size: .7rem; font-weight: 700; }
.tbl--qtr small.up   { color: #1e7a37; }
.tbl--qtr small.down { color: #c8281e; }
.tbl--qtr th small { font-weight: 400; color: var(--text-muted); text-transform: none; letter-spacing: 0; }

/* Brian's imported workbooks. */
.panel--brian .sub {
  margin: 26px 0 10px; font-size: .74rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--text-muted);
}
.panel--brian .sub:first-of-type { margin-top: 18px; }
.spark { display: inline-flex; align-items: flex-end; gap: 1px; height: 20px; margin: 0 6px; vertical-align: middle; }
.spark i { width: 4px; background: var(--accent-hover); border-radius: 1px 1px 0 0; opacity: .75; }
.spark i:last-child { background: var(--primary); opacity: 1; }
tr.is-suspect td { opacity: .5; text-decoration: line-through; }
tr.is-suspect td:first-child { text-decoration: none; }
tr.is-suspect small.bad { display: block; color: var(--danger); text-decoration: none;
  font-size: .72rem; text-transform: none; letter-spacing: 0; }
.panel--brian td small { display: block; font-size: .72rem; }

/* The 47 unpaid jobs with no amount -- derived verdicts awaiting confirmation. */
.vhead {
  margin: 22px 0 8px; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); display: flex; align-items: center; gap: 8px;
}
.vhead span {
  background: var(--surface-3); color: var(--text-strong); border-radius: 10px;
  padding: 1px 8px; font-size: .72rem; letter-spacing: 0;
}
.vhead--warn  { color: #a97b0c; } .vhead--warn span  { background: #fdf3dc; color: #8a6210; }
.vhead--bad   { color: #c8281e; } .vhead--bad span   { background: #fbe6e3; color: #8f2618; }
.vhead--ok    { color: #1e7a37; } .vhead--ok span    { background: #e4f6e9; color: #1e6b32; }
.vhead--muted { opacity: .7; }
.tbl--verdict td { vertical-align: top; padding: 9px 12px; }
.tbl--verdict small { display: block; font-size: .74rem; }
.vnote { color: var(--text); font-style: italic; margin-top: 3px; }
.vline {
  display: inline-block; margin: 0 6px 3px 0; padding: 2px 7px; border-radius: 3px;
  background: var(--surface-2); font: 600 .74rem/1.4 var(--font-mono); color: var(--text);
}
.vline small { display: inline; color: var(--text-muted); font-weight: 400; }

/* Live pipeline -- the dozen jobs actually moving. */
.tbl--pipe td { vertical-align: top; }
.tbl--pipe small { display: block; font-size: .74rem; }
.pipe__last {
  margin-top: 5px; padding: 5px 9px; border-left: 2px solid var(--border-strong);
  background: var(--surface-2); color: var(--text); font-size: .78rem; max-width: 46em;
}
.pipe__wait { color: #a97b0c; font-weight: 700; margin-top: 4px; }
.chip--info  { background: var(--accent-soft); color: #2f6a79; }
.chip--muted { background: var(--surface-3); color: var(--text-muted); }

/* Sold job trail -- the Dropbox stages, laid out the way the folders are. */
.trail { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.trail__col {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r); padding: 12px 12px 14px; min-width: 0;
}
.trail__col.is-empty { opacity: .62; border-style: dashed; }
.trail__h { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.trail__h b { font-size: .82rem; color: var(--text-strong); line-height: 1.25; }
.trail__n {
  flex: 0 0 auto; background: var(--dark); color: #fff; border-radius: 10px;
  padding: 1px 8px; font: 700 .72rem/1.5 var(--font-mono);
}
.trail__col.is-empty .trail__n { background: var(--border-strong); color: var(--text-muted); }
.trail__sub { margin: 4px 0 10px; font-size: .72rem; color: var(--text-muted); line-height: 1.35; }
.trail__list { list-style: none; margin: 0; padding: 0; }
.trail__job {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 7px 9px; margin-bottom: 7px;
}
.trail__job b { display: block; font-size: .8rem; line-height: 1.3; color: var(--text-strong); }
.trail__job small { display: block; margin-top: 3px; font-size: .7rem; color: #a97b0c; font-weight: 700; }
.trail__job--sub { border-left: 3px solid var(--warn); }
.trail__b { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
.bld {
  font-style: normal; font-size: .64rem; font-weight: 700; letter-spacing: .04em;
  padding: 1px 6px; border-radius: 9px; background: var(--surface-3); color: var(--text-muted);
}
.bld--double   { background: #e4f6e9; color: #1e6b32; }
.bld--beat     { background: #fdf3dc; color: #8a6210; }
.bld--droptine { background: var(--accent-soft); color: #2f6a79; }
.trail__none { margin: 0; font-size: .74rem; color: var(--text-muted); font-style: italic; }
@media (max-width: 1100px) { .trail { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .trail { grid-template-columns: 1fr; } }

/* Quoting from a lead: what was carried across, and what was not. */
.calcfor b { display: inline-block; margin-right: 8px; }
.calcfor p { margin: 6px 0 0; }
.calcfor__dim { font-size: .88rem; }
.calcfor__dim .ok   { color: #1e7a37; font-weight: 700; }
.calcfor__dim .warn { color: #a97b0c; font-weight: 700; }
.calcfor .chip { vertical-align: middle; }
.calcfor .quote {
  margin-top: 8px; padding: 8px 12px; border-left: 3px solid var(--border-strong);
  background: var(--surface); font-size: .88rem; font-style: italic;
}
.calcfor .btn { margin-top: 12px; }
.callout--ok { border-left-color: var(--ok); }

/* Lead routing -- who is nearest, and who it would cost too much to send. */
.route { border-top: 1px solid var(--border); padding-top: 10px; }
.route__h { display: block; font-size: .72rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 7px; }
.route__list { list-style: none; margin: 0; padding: 0; }
.route__r {
  display: grid; grid-template-columns: 1fr auto; gap: 0 10px;
  padding: 5px 8px; border-radius: var(--r-sm); margin-bottom: 3px;
  background: var(--surface-2);
}
.route__r small { grid-column: 1 / -1; font-size: .72rem; color: var(--text-muted); }
.route__r.is-best { background: #e4f6e9; }
.route__r.is-best .route__n { font-weight: 800; color: #1e6b32; }
.route__r.has-warn { opacity: .72; }
.route__r.has-warn small { color: #a97b0c; }
.route__n { font-size: .86rem; color: var(--text-strong); }
.route__m { font: 700 .82rem/1.4 var(--font-mono); color: var(--text); }
.route__cost { margin: 8px 0 0; font-size: .8rem; color: var(--text); }
.route__note { margin: 6px 0 0; font-size: .72rem; color: var(--text-muted); font-style: italic; }
.route__none { font-size: .8rem; }

/* ==========================================================================
   Hot Ticket
   The CRM's own name. Temperature is the running joke -- the thermostat is
   the first thing on every dashboard -- so the wordmark carries a flame.
   Drawn in CSS rather than shipped as an image: sharp at any size, themes
   with everything else, and no extra request.
   ========================================================================== */
.brandname {
  display: none;                     /* earns its place only where there is room */
  align-items: center; gap: 7px;
  margin: 10px 0 0; padding: 0 2px;
  font: 800 1.02rem/1 var(--font-sans);
  letter-spacing: .04em; text-transform: uppercase; color: #fff;
}
@media (min-width: 1100px) { .brandname { display: flex; } }

.flame { position: relative; width: 15px; height: 20px; flex: 0 0 15px; }
.flame b {
  position: absolute; bottom: 0; left: 50%; border-radius: 50% 50% 45% 45%;
  transform: translateX(-50%);
  animation: flicker 1.7s ease-in-out infinite alternate;
}
.flame b:nth-child(1) { width: 15px; height: 20px; background: #c8281e; animation-delay: 0s; }
.flame b:nth-child(2) { width: 10px; height: 14px; background: #ef6c2b; animation-delay: .25s; }
.flame b:nth-child(3) { width: 5px;  height: 8px;  background: #ffd166; animation-delay: .5s; }
@keyframes flicker {
  from { transform: translateX(-50%) scaleY(.88) scaleX(1.04); opacity: .85; }
  to   { transform: translateX(-50%) scaleY(1.1)  scaleX(.94); opacity: 1; }
}

/* Flames along the thermostat when somebody is past EXPLODING. Big screens
   only -- on a phone the gauge needs its space more than it needs a joke. */
@media (min-width: 1100px) {
  /* Sits at the foot of the tube, licking up around the bulb. Drawn INSIDE
     the gauge because .thermo clips its overflow for the marquee -- anything
     below the box is simply not painted. */
  .thermo--exploding .thermo__gauge::after {
    content: ""; position: absolute; left: -6px; right: 0; bottom: 0; height: 46px;
    background:
      radial-gradient(closest-side, rgba(255,209,102,.9), rgba(255,209,102,0) 70%) 10px 100%/20px 30px no-repeat,
      radial-gradient(closest-side, rgba(239,108,43,.85), rgba(239,108,43,0)  70%) 0    100%/26px 42px no-repeat,
      radial-gradient(closest-side, rgba(200,40,30,.8),   rgba(200,40,30,0)   70%) 24px 100%/24px 36px no-repeat;
    animation: flicker 1.3s ease-in-out infinite alternate;
    pointer-events: none;
  }
}

/* -------------------------------------------------- collapsible panels */
.panel__h { cursor: pointer; user-select: none; }
.panel__h:hover h3 { color: var(--primary); }
.panel__x {
  flex: 0 0 auto; width: 26px; height: 26px; margin-left: auto;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); cursor: pointer; position: relative;
}
.panel__x::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px;
  border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted);
  transform: translate(-50%, -70%) rotate(45deg); transition: transform .18s ease;
}
.panel.is-shut .panel__x::before { transform: translate(-50%, -30%) rotate(-135deg); }
.panel.is-shut .panel__b { display: none; }
.panel.is-shut .panel__h { border-bottom: 0; }
.panel.is-shut { opacity: .88; }
@media (prefers-reduced-motion: reduce) {
  .flame b, .thermo--exploding .thermo__gauge::after { animation: none; }
  .panel__x::before { transition: none; }
}

/* ==========================================================================
   Hot Ticket — the boat
   Company performance is the thermostat; a person's own is a boat that sails
   according to how they are doing. Fiery palette: charcoal ground, deep reds
   through orange into yellow, which is also the thermostat's own scale.
   ========================================================================== */
.boat {
  flex: 1 1 340px;
  border: 3px solid #7c2b0c; border-radius: 4px; overflow: hidden;
  background: linear-gradient(180deg, #17100c 0%, #241309 100%);
  box-shadow: inset 0 0 40px rgba(200,40,30,.25), 4px 4px 0 rgba(27,42,65,.28);
}
.boat__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 9px 14px;
  font: 800 .82rem/1.2 var(--font-sans); letter-spacing: .14em; text-transform: uppercase;
  color: #ffd166; text-shadow: 1px 1px 0 rgba(0,0,0,.6);
  background: linear-gradient(180deg, #7c2b0c 0%, #3a1305 60%, #2a0e04 100%);
  border-bottom: 2px solid #14100e;
}
.boat__name { font-size: .7rem; letter-spacing: .08em; color: #ef6c2b; text-transform: none; }
.boat__body { display: flex; gap: 16px; padding: 14px; align-items: stretch; }
.boat__svg { flex: 0 0 190px; width: 190px; height: auto; border-radius: 3px; }
/* The gauge art is a photograph of the boat now (one per state). Same slot the
   SVG occupied, so the surrounding flex layout is untouched.
   BLENDING (Tom, 30 Aug): a raw photo sat on this panel like a pasted sticker --
   hard rectangle, cool blue against the panel's warm near-black, and brighter
   than the number it is supposed to support. Three things fix it: feather every
   edge so it dissolves into the panel, wash it in the panel's own ember so the
   blues stop fighting the amber, and hold it a stop darker than the readout. */
.boat__shot {
  flex: 0 0 190px; width: 190px; margin: 0; position: relative; line-height: 0;
  display: flex; align-self: stretch; min-height: 150px;
  border-radius: 12px; overflow: hidden;
  /* Rounded and full-height now, so the feathered mask is gone -- an inner
     vignette plus a hairline of the panel's ember does the nesting instead. */
  box-shadow: inset 0 0 0 1px rgba(255,168,92,.16),
              inset 0 0 30px rgba(23,16,12,.60);
}
.boat__shot img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 55%;
  display: block;
  filter: saturate(.58) brightness(.82) contrast(1.06) sepia(.20);
}
.boat__shot::after {          /* ember wash, married to the panel gradient */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(205deg, rgba(255,146,54,.26) 0%,
              rgba(150,52,16,.30) 52%, rgba(23,16,12,.42) 100%);
  mix-blend-mode: overlay;
}
/* She still moves, just quietly -- the old SVG bob, carried over to the photo
   so the panel does not go stiff. Faster the better she is doing. */
@keyframes shotdrift { from { transform: scale(1.06) translateY(0); }
                       to   { transform: scale(1.06) translateY(-4px); } }
.boat__shot img { will-change: transform; }
.boat--becalmed .boat__shot img { animation: shotdrift 6s ease-in-out infinite alternate; }
.boat--making   .boat__shot img { animation: shotdrift 4.2s ease-in-out infinite alternate; }
.boat--cruising .boat__shot img { animation: shotdrift 3s ease-in-out infinite alternate; }
.boat--flying   .boat__shot img { animation: shotdrift 1.9s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .boat__shot img { animation: none; } }

/* -- the three rigs -- */
.boat__hullgroup { transform-origin: 120px 128px; transition: transform .9s cubic-bezier(.2,.9,.25,1); }
.boat--becalmed .boat__hullgroup { animation: bob 5s ease-in-out infinite alternate; }
.boat--making   .boat__hullgroup { animation: bob 3.4s ease-in-out infinite alternate; }
.boat--cruising .boat__hullgroup { animation: bob 2.6s ease-in-out infinite alternate; }
.boat--flying   .boat__hullgroup { animation: charge 1.1s ease-in-out infinite alternate; }
@keyframes bob    { from { transform: translateY(1px) rotate(0deg); }
                    to   { transform: translateY(-2px) rotate(-2deg); } }
@keyframes charge { from { transform: translateY(0) rotate(-18deg); }
                    to   { transform: translateY(-3px) rotate(-22deg); } }

.boat--flying .boat__spin { animation: belly 1.3s ease-in-out infinite alternate; transform-origin: 118px 40px; }
@keyframes belly { from { transform: scaleX(1); } to { transform: scaleX(1.09); } }

.boat__wave { animation: swell 3.4s ease-in-out infinite alternate; }
.boat__wave--back  { animation-duration: 5s; }
.boat__wave--front { animation-duration: 2.2s; }
.boat--flying .boat__wave { animation-duration: 1.4s; }
@keyframes swell { from { transform: translateX(0); } to { transform: translateX(-18px); } }
.boat__spray { animation: spray .7s ease-out infinite; }
@keyframes spray { 0% { opacity: 0; transform: translate(0,0) scale(.6); }
                   40% { opacity: 1; } 100% { opacity: 0; transform: translate(-16px,-18px) scale(1.5); } }

/* -- the readout -- */
.boat__read { flex: 1; min-width: 0; }
.boat__deg { display: block; font: 800 3rem/.9 var(--font-mono); letter-spacing: -.03em; color: #ffd166;
  text-shadow: 0 0 22px rgba(239,108,43,.65); }
.boat__deg sup { font-size: .4em; top: -1.1em; }
.boat--becalmed .boat__deg { color: #9aa6b5; text-shadow: none; }
.boat__word {
  display: inline-block; margin: 8px 0 6px; padding: 4px 11px; border-radius: 3px;
  font: 800 .72rem/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase;
  color: #2a0e04; background: #ffd166;
}
.boat--becalmed .boat__word { background: #55606f; color: #e6eaf0; }
.boat--flying .boat__word { animation: thermoBlink 1s steps(1) infinite; }
.boat__line { margin: 0 0 10px; font-size: .84rem; color: #f0d9bd; }
.boat__facts { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0; }
.boat__facts dt { font-size: .72rem; color: #c99a6f; text-transform: uppercase; letter-spacing: .07em; }
.boat__facts dd { margin: 0; font: 700 .88rem/1.3 var(--font-mono); color: #fff4e0; }
.boat--none .boat__empty { padding: 26px 18px; text-align: center; color: #f0d9bd; }
.boat--none .boat__empty b { display: block; font: 800 2rem/1 var(--font-mono); color: #ffd166; }
.boat--none .boat__empty span { display: block; font-size: .74rem; color: #c99a6f;
  text-transform: uppercase; letter-spacing: .09em; margin-top: 4px; }
.boat--none .boat__empty p { margin: 12px 0 0; font-size: .86rem; }

/* Heat shimmer behind the pair of them, large displays only. */
@media (min-width: 1100px) {
  .panel--thermo .panel__b { position: relative; }
  .panel--thermo .panel__b::before {
    content: ""; position: absolute; inset: -6px -10px 40px; pointer-events: none; z-index: 0;
    background:
      radial-gradient(60% 40% at 20% 100%, rgba(239,108,43,.13), transparent 70%),
      radial-gradient(50% 36% at 78% 100%, rgba(200,40,30,.12), transparent 70%);
    animation: shimmer 5s ease-in-out infinite alternate;
  }
  .panel--thermo .thermos { position: relative; z-index: 1; }
}
@keyframes shimmer { from { opacity: .55; transform: translateY(2px); }
                     to   { opacity: 1;   transform: translateY(-3px); } }

@media (max-width: 620px) {
  .boat__body { flex-direction: column; align-items: stretch; gap: 10px; }
  .boat__svg { flex: 0 0 auto; width: 100%; }
  .boat__shot { flex: 0 0 auto; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .boat__hullgroup, .boat__wave, .boat__spray, .boat__spin, .boat__word,
  .panel--thermo .panel__b::before { animation: none; }
}

/* -------------------------------------------------------------- Talk to CJ */
.cjbtn {
  margin-left: 14px; display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border: 0; border-radius: var(--r-pill); cursor: pointer;
  font: 800 .74rem/1 var(--font-sans); letter-spacing: .1em; text-transform: uppercase;
  color: #2a0e04; background: linear-gradient(180deg, #ffd166, #ef6c2b);
  box-shadow: 0 2px 10px rgba(239,108,43,.45);
}
.cjbtn:hover { filter: brightness(1.08); }
.flame--sm { width: 11px; height: 15px; flex: 0 0 11px; }
.flame--sm b:nth-child(1) { width: 11px; height: 15px; }
.flame--sm b:nth-child(2) { width: 7px;  height: 10px; }
.flame--sm b:nth-child(3) { width: 4px;  height: 6px; }

.cjwrap {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: end center;
  background: rgba(20,16,14,.55); padding: 0 16px 16px;
}
.cjbox {
  width: min(560px, 100%); max-height: min(70vh, 640px); display: flex; flex-direction: column;
  border: 2px solid #7c2b0c; border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--surface); box-shadow: 0 -10px 50px rgba(0,0,0,.45); overflow: hidden;
}
.cjhead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 16px; color: #ffd166;
  background: linear-gradient(180deg, #7c2b0c, #2a0e04);
  font: 800 .84rem/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase;
}
.cjhead span { display: inline-flex; align-items: center; gap: 8px; }
.cjx { border: 0; background: none; color: #ffd166; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.cjlog { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; }
.cjmsg { padding: 9px 13px; border-radius: 13px; font-size: .92rem; line-height: 1.55; white-space: pre-wrap; max-width: 88%; }
.cjmsg--assistant { background: var(--surface-2); color: var(--text); border-bottom-left-radius: 3px; align-self: flex-start; }
.cjmsg--user { background: linear-gradient(180deg,#ffd166,#ef6c2b); color: #2a0e04; font-weight: 600;
  border-bottom-right-radius: 3px; align-self: flex-end; }
.cjmsg.is-think { opacity: .6; font-style: italic; }
.cjfoot { display: flex; gap: 8px; padding: 11px 14px; border-top: 1px solid var(--border); background: var(--surface-2); }
.cjin { flex: 1; padding: 10px 13px; border: 1px solid var(--border-strong); border-radius: var(--r);
  font: inherit; font-size: .92rem; background: var(--surface); color: var(--text); }
.cjin:focus { outline: 2px solid #ef6c2b; outline-offset: 1px; }
@media (max-width: 620px) { .cjbtn { margin-left: 0; } .cjbox { max-height: 80vh; } }

/* ==========================================================================
   Hot Ticket — bringing the rest of the CRM with it
   The token swap above turns every page. These are the few places that had
   hardcoded light-theme colours and would otherwise be left behind.
   ========================================================================== */
[data-theme="crm"] body { background: var(--bg); }

/* Sidebar: ember, with the active item burning */
[data-theme="crm"] .side { background: linear-gradient(180deg, #1b0d06, #14100e); border-right: 1px solid #3a2f26; }
[data-theme="crm"] .side a { color: #c7b6a4; }
[data-theme="crm"] .side a:hover { color: #fff6ea; background: rgba(239,108,43,.12); }
/* Sidebar groups: fold-up sections with a caret. The header is a button so
   it is keyboard-reachable; it deliberately looks like a label, not a link. */
[data-theme="crm"] .side__grp { margin-top: 10px; }
[data-theme="crm"] .side__grp__h {
  display: flex; align-items: center; gap: 6px; width: 100%;
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: 4px 14px; font: inherit; font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted, #8a8f99);
  opacity: .75;
}
[data-theme="crm"] .side__grp__h:hover { opacity: 1; }
[data-theme="crm"] .side__grp__car { font-size: .8em; }

[data-theme="crm"] .side a.is-active {
  background: linear-gradient(90deg, rgba(239,108,43,.28), rgba(239,108,43,.05));
  color: #ffd166; box-shadow: inset 3px 0 0 #ef6c2b;
}
[data-theme="crm"] .side .pill { background: rgba(255,209,102,.16); color: #ffd166; }
[data-theme="crm"] .side__brand { border-bottom-color: #3a2f26; }

/* Panels lift off the ground rather than sitting flat on it */
[data-theme="crm"] .panel {
  background: var(--surface); border-color: var(--border);
  box-shadow: 0 1px 0 rgba(255,255,255,.03), 0 10px 30px rgba(0,0,0,.35);
}
[data-theme="crm"] .panel__h { background: linear-gradient(180deg, #241d18, #1e1815); }
[data-theme="crm"] .panel__h h3 { color: #ffd166; }
[data-theme="crm"] .panel__foot { background: var(--surface-2); }

/* Tables: banded so a long list stays readable in the dark */
[data-theme="crm"] table.data th, [data-theme="crm"] .tbl th {
  background: #241d18; color: #b09a86; border-bottom-color: var(--border);
}
[data-theme="crm"] .tbl tbody tr:nth-child(even) { background: rgba(255,255,255,.018); }
[data-theme="crm"] .tbl tbody tr:hover { background: rgba(239,108,43,.10); }
[data-theme="crm"] .tbl td { border-bottom-color: var(--border); }

/* Inputs have to look like inputs on a dark ground */
/* background-COLOR, not the background shorthand.

   The shorthand resets every background-* longhand it does not mention, so it
   was throwing away the "no-repeat" and the position that the base select rule
   sets alongside the dropdown chevron. The chevron then tiled across the whole
   control -- the repeating pattern behind "Assign to" on the lead card, and on
   every other select in the CRM. */
[data-theme="crm"] .inp, [data-theme="crm"] input, [data-theme="crm"] select,
[data-theme="crm"] textarea {
  background-color: #14100e; border-color: var(--border-strong); color: var(--text-strong);
}
[data-theme="crm"] .inp:focus, [data-theme="crm"] input:focus,
[data-theme="crm"] select:focus, [data-theme="crm"] textarea:focus {
  border-color: #ef6c2b; box-shadow: 0 0 0 3px rgba(239,108,43,.25);
}
[data-theme="crm"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23b09a86' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
}

/* KPIs and callouts */
[data-theme="crm"] .kpi { background: var(--surface-2); border-color: var(--border); }
[data-theme="crm"] .kpi__v { color: #ffd166; }
[data-theme="crm"] .callout { background: var(--surface-2); border-left-color: #ef6c2b; }
[data-theme="crm"] .callout--warn { background: #2e2113; border-left-color: var(--warn); }
[data-theme="crm"] .callout--ok { background: #16250f; border-left-color: var(--ok); }

/* Chips keep their meaning, warmed up */
[data-theme="crm"] .chip--good, [data-theme="crm"] .chip--ok { background: #16250f; color: #8fd694; }
[data-theme="crm"] .chip--warn { background: #33240f; color: #ffc978; }
[data-theme="crm"] .chip--bad, [data-theme="crm"] .chip--stop { background: #331410; color: #ff8f84; }
/* Info is BLUE, not gold. It was #2a1f0c/#ffd166 -- within a shade of
   .chip--warn (#33240f/#ffc978), so "Mark's house account, call away and
   loop Mark in" rendered in the same amber as a warning and Ayden's Call
   list still read as a wall of do-not-touch on 31 Aug. Changing the words
   was not enough while the colour still said stop. Blue also suits every
   other chip--info in the app -- Assigned, saved, both, Deferred, New. */
[data-theme="crm"] .chip--info { background: #102530; color: #86ccea; }
/* Call list "What they have" -- vendor, a thumbnail off the job folder, and a
   count, so a rep walking in cold can see the patio before the door. */
.jobsum { white-space: nowrap; }
.jobsum__v { display: inline-block; font-weight: 600; margin-right: 8px; }
.jobsum__t { width: 46px; height: 34px; object-fit: cover; border-radius: 4px;
             vertical-align: middle; margin-right: 8px; background: var(--surface-3); }
.jobsum__n, .jobsum__none { font-size: 12px; opacity: .7; }
[data-theme="crm"] .jobsum__t { box-shadow: 0 0 0 1px rgba(255,255,255,.08); }

[data-theme="crm"] .chip--muted { background: var(--surface-3); color: var(--text-muted); }
[data-theme="crm"] .tag { background: #2a1f0c; color: #ffd166; border-color: rgba(255,209,102,.25); }

/* The trail keeps its shape, in ember */
[data-theme="crm"] .trail__col { background: var(--surface-2); border-color: var(--border); }
[data-theme="crm"] .trail__job { background: #1a1512; border-color: var(--border); }
[data-theme="crm"] .trail__n { background: #ef6c2b; color: #2a0e04; }
[data-theme="crm"] .bld--double   { background: #16250f; color: #8fd694; }
[data-theme="crm"] .bld--beat     { background: #33240f; color: #ffc978; }
[data-theme="crm"] .bld--droptine { background: #2a1f0c; color: #ffd166; }

/* Thermostat sits in the same world as the boat now */
[data-theme="crm"] .thermo {
  background: linear-gradient(180deg, #241d18, #1a1512); border-color: #52443a;
}
[data-theme="crm"] .thermo__tube { background: linear-gradient(90deg,#2a231d,#4a3f36 38%,#3a312a 62%,#231d18); }
[data-theme="crm"] .thermo__deg { color: #ffd166; text-shadow: 0 0 22px rgba(239,108,43,.5); }
[data-theme="crm"] .thermo__facts dd { color: #fff6ea; }
[data-theme="crm"] .panel__x { background: var(--surface-2); border-color: var(--border-strong); }
[data-theme="crm"] .searchbar, [data-theme="crm"] .qsearch__in { background: var(--surface); }
[data-theme="crm"] .empty { color: var(--text-muted); }
[data-theme="crm"] .lnk { color: #ffd166; }
[data-theme="crm"] a { color: #ffb46b; }
[data-theme="crm"] a:hover { color: #ffd166; }

/* The thermostat still carried hardcoded navy from the 90s-Dell version --
   the token swap could not reach it. Reskinned to match the boat so the pair
   read as one instrument panel. */
[data-theme="crm"] .thermo__head {
  background: linear-gradient(180deg, #a8480f 0%, #5e1f0a 55%, #2a0e04 100%);
  color: #ffe8b0; border-bottom-color: #14100e;
}
[data-theme="crm"] .thermo__body {
  background: linear-gradient(180deg, rgba(255,209,102,.05), rgba(0,0,0,.2));
}
[data-theme="crm"] .thermo { box-shadow: inset 0 0 40px rgba(200,40,30,.18), 4px 4px 0 rgba(0,0,0,.4); }
[data-theme="crm"] .thermo__tick i { background: rgba(255,225,180,.4); }
[data-theme="crm"] .thermo__tick b { color: #b09a86; }
[data-theme="crm"] .thermo__word { text-shadow: 1px 1px 0 rgba(0,0,0,.5); }
[data-theme="crm"] .thermo__src { color: #b09a86; }
[data-theme="crm"] .thermo--goal .thermo__deg { color: #8fd694; }
[data-theme="crm"] .thermo--overflow .thermo__deg { color: #ffc978; }
[data-theme="crm"] .thermo--exploding .thermo__deg { color: #ff8f84; }

/* Give both instruments more room -- they are the reason people open this. */
.thermos { gap: 18px; }
.thermo, .boat { flex: 1 1 400px; }
@media (min-width: 1100px) {
  .boat__svg { flex: 0 0 240px; width: 240px; }
  .boat__shot { flex: 0 0 240px; width: 240px; }
  .boat__deg { font-size: 3.4rem; }
}
@media (min-width: 1500px) {
  .boat__svg { flex: 0 0 280px; width: 280px; }
}

/* ==========================================================================
   Hot Ticket — the performance section, polished
   Tom's note on the v113 dashboard: the two cards did not carry equal weight,
   the degree numbers were not big enough for the most important figure on the
   screen, and the thermostat looked thin next to the boat.
   Everything here is presentation only -- no gauge maths, no markup depended
   on, and the panel stays collapsible.
   ========================================================================== */

/* -- equal weight -----------------------------------------------------------
   flex-basis 400px let whichever card had more text win the extra space. Both
   cards now claim an equal share of the row and lay out as columns so their
   bodies stretch to the same height instead of ending wherever the text does. */
.thermos { align-items: stretch; gap: 20px; }
.thermo, .boat {
  flex: 1 1 0; min-width: 340px;
  display: flex; flex-direction: column;
  border-radius: 10px;
}
.thermo__body, .boat__body { flex: 1 1 auto; }
.thermo__head, .boat__head { border-radius: 0; }

/* Matching frames. The thermostat kept the old blue-grey border, which read as
   a different component to the boat sitting next to it. */
[data-theme="crm"] .thermo,
[data-theme="crm"] .boat {
  border: 1px solid #52443a;
  box-shadow: 0 1px 0 rgba(255,209,102,.10) inset, 0 12px 34px rgba(0,0,0,.45);
}
[data-theme="crm"] .thermo { background: linear-gradient(180deg, #241d18, #17120f); }
[data-theme="crm"] .boat   { background: linear-gradient(180deg, #221610, #17100c); }
[data-theme="crm"] .thermo__head,
[data-theme="crm"] .boat__head {
  padding: 11px 16px;
  background: linear-gradient(180deg, #93400e 0%, #561c09 58%, #2a0e04 100%);
  border-bottom: 1px solid #14100e;
  color: #ffe8b0;
}

/* -- the number -------------------------------------------------------------
   The one figure everybody is looking for. Sized off the viewport so it is
   large on the wall display Tom uses without overflowing a laptop. */
.thermo__deg, .boat__deg {
  font-size: clamp(3.6rem, 5.4vw, 5.6rem);
  line-height: .82;
  letter-spacing: -.045em;
  margin: 2px 0 0;
}
.thermo__deg sup, .boat__deg sup { font-size: .34em; top: -1.5em; }
/* A warm vertical gradient through the digits, with the flat colour kept as
   the fallback for anything that cannot clip a background to text. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  [data-theme="crm"] .thermo__deg,
  [data-theme="crm"] .boat__deg {
    background-image: linear-gradient(180deg, #fff6ea 4%, #ffd166 42%, #ef6c2b 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 3px 16px rgba(239,108,43,.42));
  }
  /* background-IMAGE, not the shorthand -- exactly the same trap as the select
     chevron. "background:" resets background-clip to border-box, which threw
     away the clip-to-text set just above and painted the gradient as a solid
     slab where the number should be. It only showed once the company dropped
     into the goal band, because that is the only state with an override. */
  [data-theme="crm"] .thermo--goal .thermo__deg {
    background-image: linear-gradient(180deg, #f0fff2 4%, #8fd694 45%, #2f8f45 100%);
  }
  [data-theme="crm"] .boat--becalmed .boat__deg {
    background-image: linear-gradient(180deg, #e9edf3 4%, #9aa6b5 50%, #5d6874 100%);
    filter: none;
  }
}

/* -- the state badge --------------------------------------------------------
   Was a flat 90s bevel. Now a pill: hairline border, tinted glass, soft glow.
   The exploding/flying blink was a steps(1) flash; a slow swell says the same
   thing without strobing at somebody all afternoon. */
.thermo__word, .boat__word {
  margin: 12px 0 14px; padding: 7px 15px; border-radius: 999px;
  font: 800 .72rem/1 var(--font-sans); letter-spacing: .2em;
  color: #ffe8b0; text-shadow: none;
  background: linear-gradient(180deg, rgba(255,209,102,.20), rgba(239,108,43,.10));
  border: 1px solid rgba(255,209,102,.45);
  box-shadow: 0 2px 16px rgba(239,108,43,.22);
}
[data-theme="crm"] .thermo--goal .thermo__word {
  color: #b9efc0; background: linear-gradient(180deg, rgba(143,214,148,.20), rgba(47,143,69,.10));
  border-color: rgba(143,214,148,.45); box-shadow: 0 2px 16px rgba(47,143,69,.22);
}
[data-theme="crm"] .thermo--overflow .thermo__word,
[data-theme="crm"] .thermo--exploding .thermo__word,
[data-theme="crm"] .boat--flying .boat__word {
  color: #ffe0b0; background: linear-gradient(180deg, rgba(255,143,132,.22), rgba(200,40,30,.12));
  border-color: rgba(255,143,132,.5);
}
[data-theme="crm"] .boat--becalmed .boat__word {
  color: #cfd6df; background: linear-gradient(180deg, rgba(154,166,181,.18), rgba(85,96,111,.10));
  border-color: rgba(154,166,181,.4); box-shadow: none;
}
.thermo--exploding .thermo__word,
.boat--flying .boat__word { animation: wordSwell 2.4s ease-in-out infinite alternate; }
@keyframes wordSwell {
  from { box-shadow: 0 2px 14px rgba(239,108,43,.20); }
  to   { box-shadow: 0 2px 26px rgba(255,143,132,.60); }
}

/* -- the gauge --------------------------------------------------------------
   Wider tube, bigger bulb, taller travel. The tick column moves out with it;
   .thermo__tick's bottom margin has to stay equal to .thermo__tube's bottom
   offset or every label drifts off its mark. */
.thermo__body { gap: 22px; padding: 20px 18px 26px; align-items: center; }
.thermo__gauge { flex: 0 0 124px; width: 124px; min-height: 268px; }
.thermo__tube {
  width: 54px; bottom: 32px; border-radius: 27px 27px 8px 8px;
  border-width: 2px;
  box-shadow: inset 0 0 14px rgba(0,0,0,.55);
}
.thermo__tick { margin-bottom: 32px; }
.thermo__tick i { left: 42px; width: 15px; }
.thermo__tick b { left: 63px; font-size: .72rem; }
.thermo__bulb {
  width: 62px; height: 62px; left: -4px; border-width: 2px;
  box-shadow: inset -3px -4px 10px rgba(0,0,0,.5), 0 0 26px rgba(200,40,30,.45);
}
.thermo__steam { left: 27px; }
/* Glass: a highlight down the left of the tube and a soft bloom off the
   mercury, so the column reads as a lit tube rather than a coloured bar. */
.thermo__tube::after {
  content: ""; position: absolute; top: 8px; bottom: 8px; left: 9px; width: 9px;
  border-radius: 6px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.05));
}
[data-theme="crm"] .thermo__tube { border-color: #52443a; }
[data-theme="crm"] .thermo__bulb { border-color: #52443a; }
[data-theme="crm"] .thermo__zone--goal { background: rgba(143,214,148,.26); }
[data-theme="crm"] .thermo__zone--over { background: rgba(255,201,120,.30); }
[data-theme="crm"] .thermo__zone--boom { background: rgba(255,143,132,.32); }

/* -- the boat ---------------------------------------------------------------
   Bigger and heeled harder, but the card is not allowed to grow with it: the
   drawing takes more of the same box, it does not make a new one. */
.boat__body { gap: 18px; padding: 16px; }
@media (min-width: 1100px) {
  .boat__svg { flex: 0 0 262px; width: 262px; }
}
@media (min-width: 1500px) {
  .boat__svg { flex: 0 0 300px; width: 300px; }
}
@keyframes charge { from { transform: translateY(0)   rotate(-21deg); }
                    to   { transform: translateY(-4px) rotate(-26deg); } }
.boat--flying .boat__wave { animation-duration: 1.15s; }

/* -- the scale legend -------------------------------------------------------
   Three chips coloured like the bands they name, instead of one grey sentence. */
.scale { display: flex; flex-wrap: wrap; gap: 7px; margin-left: auto; }
.scale__c {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  font: 800 .78rem/1 var(--font-mono);
  border: 1px solid var(--border-strong); background: rgba(0,0,0,.25);
}
.scale__c i {
  font: 700 .64rem/1 var(--font-sans); font-style: normal;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted);
}
[data-theme="crm"] .scale__c--base { color: #e8ddd0; }
[data-theme="crm"] .scale__c--str  { color: #ffc978; border-color: rgba(255,201,120,.38); }
[data-theme="crm"] .scale__c--boom { color: #ff8f84; border-color: rgba(255,143,132,.40); }
/* Narrow: the chips get their own line rather than squeezing into whatever
   the heading leaves them. width:100% is not enough on a flex row -- the item
   still shrinks to fit -- so force the line break with the basis. */
@media (max-width: 900px) {
  .panel--thermo .panel__h { flex-wrap: wrap; }
  .scale { flex: 1 0 100%; margin: 6px 0 0; }
}

/* -- Talk to CJ -------------------------------------------------------------
   Kept loud, given a warmer edge and a little lift so it reads as the one
   thing in the header you can press. */
.cjbtn {
  padding: 8px 17px; font-size: .76rem; letter-spacing: .12em;
  border: 1px solid rgba(255,232,176,.55);
  background: linear-gradient(180deg, #ffd97e 0%, #ef6c2b 62%, #d4531b 100%);
  box-shadow: 0 3px 16px rgba(239,108,43,.5), 0 1px 0 rgba(255,255,255,.35) inset;
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.cjbtn:hover { filter: brightness(1.06); transform: translateY(-1px);
               box-shadow: 0 6px 22px rgba(239,108,43,.62), 0 1px 0 rgba(255,255,255,.4) inset; }
.cjbtn:active { transform: translateY(0); }
.cjbtn:focus-visible { outline: 2px solid #ffd166; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .thermo__word, .boat__word, .cjbtn { animation: none; transition: none; }
}

/* ==========================================================================
   The quarter, under the year gauge
   Tom wants the year and the quarter side by side. A second thermometer would
   double the panel's height, so the quarter is a bar on the same scale: 100 is
   quota, the ticks are quota and stretch, and it says which months it counted.
   ========================================================================== */
.qtr { margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid var(--border); }
.qtr__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.qtr__l {
  font: 700 .68rem/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted);
}
.qtr__d { font: 800 1.15rem/1 var(--font-mono); color: var(--text-strong); }
.qtr__bar {
  position: relative; height: 9px; margin: 7px 0 6px; border-radius: 999px;
  background: rgba(0,0,0,.42); overflow: hidden;
}
.qtr__fill {
  position: absolute; inset: 0 auto 0 0; border-radius: 999px;
  background: linear-gradient(90deg, #b8480f, #ef6c2b 60%, #ffd166);
  transition: width .9s cubic-bezier(.2,.9,.25,1);
}
/* Where quota and stretch fall on the same 0-140 scale as the thermometer. */
.qtr__mark { position: absolute; top: -2px; bottom: -2px; width: 2px; background: rgba(255,246,234,.55); }
.qtr__mark--str { background: rgba(255,201,120,.75); }
.qtr__foot { font: 600 .74rem/1.3 var(--font-mono); color: var(--text-muted); }

.qtr--cold .qtr__fill,
.qtr--warm .qtr__fill { background: linear-gradient(90deg, #6b4a34, #b0764a); }
.qtr--goal .qtr__fill { background: linear-gradient(90deg, #2f8f45, #8fd694); }
.qtr--overflow  .qtr__fill { background: linear-gradient(90deg, #b8480f, #ffc978); }
.qtr--exploding .qtr__fill { background: linear-gradient(90deg, #b81a14, #ff8f84 70%, #ffd166); }

.qtr--none { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.qtr__no { font-size: .74rem; color: var(--text-muted); font-style: italic; text-align: right; }

/* The boat card runs on its own warmer palette. */
.boat .qtr { border-top-color: #3a2f26; }
.boat .qtr__l, .boat .qtr__foot { color: #c99a6f; }
.boat .qtr__d { color: #fff4e0; }

/* The crew ladder: each individual's year on the same bar the quarter uses,
   laid out in columns under the company thermostat. */
.crew {
  margin-top: 16px; display: grid; gap: 4px 26px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.crew__h {
  grid-column: 1 / -1; margin: 0 0 2px;
  font: 700 .72rem/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-muted);
}
.crew .qtr { margin-top: 8px; }
.crew .qtr__l small { text-transform: none; letter-spacing: 0; font-weight: 600; }

/* ==========================================================================
   The negotiation on a quote
   What was asked, what was offered, what was promised. Reads top to bottom in
   the order it happened, because the last number is the one that matters.
   ========================================================================== */
.thr { list-style: none; margin: 12px 0 0; padding: 0; }
.thr__i {
  position: relative; margin: 0 0 10px; padding: 10px 12px 10px 14px;
  border-left: 3px solid var(--border-strong); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--surface-2);
}
.thr__i--void { opacity: .5; }
.thr__i--void b, .thr__i--void .thr__n { text-decoration: line-through; }
.thr__n { margin: 6px 0 0; font-size: .9rem; color: var(--text); }
.thr__m {
  display: block; margin-top: 6px;
  font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em;
}
.lnk--sm { font-size: .72rem; }

.thr__add {
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);
}
.thr__add label { display: flex; flex-direction: column; gap: 4px; font-size: .74rem;
  text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); }
.thr__note { flex: 1 1 240px; }
.thr__note .inp { width: 100%; }

[data-theme="crm"] .thr__i { background: var(--surface-2); border-left-color: #52443a; }
[data-theme="crm"] .thr__i .chip--ok   { border-left-color: #2f8f45; }

/* Outlook events on the calendar. Deliberately a different colour from
   anything the CRM owns -- they come from somewhere else and cannot be edited
   here, and that should be visible at a glance. */
.cal__e--outlook {
  background: #1d2c3a; color: #9fc7e8; border-left: 3px solid #4a86b8;
}
[data-theme="crm"] .cal__e--outlook {
  background: #17232e; color: #9fc7e8; border-left-color: #3f7099;
}
.icsl { list-style: none; margin: 0 0 12px; padding: 0; }
.icsf { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: .9rem; }
.icsf:last-child { border-bottom: 0; }
.icsadd { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.icsadd .inp[type="url"] { flex: 1 1 320px; }
.icsadd__how { margin-top: 10px; font-size: .8rem; }

/* CJ's first-visit questions. Asked once, then never again. */
.panel--intake .cj__q { display: block; margin: 0 0 16px; font-size: .92rem; }
.panel--intake .cj__q b { display: block; margin: 0 0 6px; font-weight: 700; }
.cj__dial { width: 100%; max-width: 420px; accent-color: #ef6c2b; }
.cj__scale { display: flex; justify-content: space-between; max-width: 420px;
  font-size: .7rem; color: var(--text-muted); font-style: normal; }
.cj__scale i { font-style: normal; }
.cj__out { display: block; margin-top: 6px; font: 700 .86rem/1 var(--font-mono); color: var(--accent); }

/* -- video facade -------------------------------------------------------
   A thumbnail that becomes the real player on click. Sized by aspect-ratio so
   the swap to the iframe causes no layout shift. */
.video { margin: 0; }
.video__btn {
  display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--r-sm); background: #000;
}
.video__thumb {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .3s, opacity .2s;
}
.video__btn:hover .video__thumb { transform: scale(1.03); opacity: .85; }
.video__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 62px; height: 44px; border-radius: 10px; background: rgba(0,0,0,.72);
  transition: background .15s;
}
.video__play::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-42%, -50%);
  border-style: solid; border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
}
.video__btn:hover .video__play { background: var(--primary); }
.video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-sm); display: block; }
.video__h { margin: 14px 0 6px; font-size: 1.05rem; }
.video__cap { margin-top: 8px; font-size: .92rem; color: var(--text-muted); }

/* -- manual roll animation -- */
.rollanim { margin: 0; }
.rollanim svg { width: 100%; height: auto; max-width: 380px; display: block; }
.rollanim__t { font: 600 9px var(--font); fill: var(--text-muted); }
.rollanim__step { font-size: 10px; fill: var(--text-strong); }
.rollanim figcaption { margin-top: 14px; color: var(--text); font-size: .95rem; max-width: 46ch; }
/* The panel is fixed to the header rail, so it shrinks from the BOTTOM upward
   (transform-origin top). The bar and its coil ride up to meet it, and the coil
   thickens as more material wraps around it -- which is what makes it read as
   rolling on itself rather than retracting into a tube. The cords shorten with
   the same factor so they stay attached to the bar. */
.rollanim__panel { transform-origin: 160px 25px; animation: rollPanel 8s ease-in-out infinite; }
.rollanim__cords { transform-origin: 160px 25px; animation: rollPanel 8s ease-in-out infinite; }
.rollanim__roll  { animation: rollBar 8s ease-in-out infinite; }
.rollanim__coil  { animation: rollCoil 8s ease-in-out infinite; transform-origin: 160px 160px; }
@keyframes rollPanel {
  0%, 15%   { transform: scaleY(1); }
  45%, 65%  { transform: scaleY(.10); }
  95%, 100% { transform: scaleY(1); }
}
@keyframes rollBar {
  0%, 15%   { transform: translateY(0); }
  45%, 65%  { transform: translateY(-115px); }
  95%, 100% { transform: translateY(0); }
}
@keyframes rollCoil {
  0%, 15%   { transform: scaleY(.25); opacity: 0; }
  45%, 65%  { transform: scaleY(2.6); opacity: .5; }
  95%, 100% { transform: scaleY(.25); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rollanim__panel, .rollanim__cords, .rollanim__roll, .rollanim__coil { animation: none; }
}


/* -- engineering figures ------------------------------------------------
   Brochure drafting voice: navy line work, red leaders, generous space. */
.engfig { margin: 0; }
.engfig svg { width: 100%; height: auto; max-width: 640px; display: block; }
.engfig__labels text { font: 400 11.5px var(--font-sans); fill: var(--text); }
.engfig__labels .engfig__h { font-weight: 600; font-size: 12.5px; fill: var(--spe-navy); }
.engfig__labels .engfig__h--bad, .engfig__labels .engfig__bad { fill: var(--danger); }
.engfig__labels .engfig__bad { font-size: 10.5px; }
.engfig__note { font: italic 400 10.5px var(--font-sans); fill: var(--text-muted); }
.engfig figcaption { margin-top: 12px; font-size: .95rem; color: var(--text); max-width: 54ch; }

/* ------------------------------------------------------- design consults */
/* The electric DC packet. Inputs sit inside the measurement table the way
   the paper sheet has ruled boxes, so it reads like the thing it replaces. */
.tbl--dc td { padding: 4px 6px; }
.tbl--dc .inp--sm { width: 100%; min-width: 70px; }
.dcsheet .calc__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.hist { list-style: none; margin: 0; padding: 0; }
.hist li { padding: 6px 0; border-bottom: 1px solid var(--border, #eadfd2); font-size: .92rem; }
.hist li:last-child { border-bottom: none; }

/* ==========================================================================
   Trip -- the page CJ hands a rep after "planning a trip to <town>".
   Cards reuse .lead; the photo is the proof of the roof, so it leads the card.
   ========================================================================== */
.trip__bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 16px; }
.trip__btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.trip__sec { margin-top: 22px; }
.trip__sec .panel__h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.trip__grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
.trip__grid--board { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.trip__stop { display: grid; grid-template-columns: 200px 1fr; overflow: hidden; }
.trip__grid--board .trip__stop { grid-template-columns: 1fr; }
.trip__stop--kept { outline: 2px solid var(--accent); outline-offset: -2px; }
.trip__photo { position: relative; display: block; background: var(--surface-3); min-height: 150px; }
.trip__photo img { width: 100%; height: 100%; min-height: 150px; object-fit: cover; display: block; }
.trip__grid--board .trip__photo, .trip__grid--board .trip__photo img { height: 170px; min-height: 170px; }
.trip__strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.trip__strip a { display: block; min-height: 150px; }
.trip__strip a:only-child { grid-column: 1 / -1; }
.trip__strip a:first-child:nth-last-child(2), .trip__strip a:first-child:nth-last-child(2) ~ a { grid-column: span 1; }
.trip__strip a:first-child:nth-last-child(2) { grid-column: 1 / 3; }
.trip__links { margin: 0; font-size: .82rem; }
.trip__photo--none { display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: .82rem; }
.trip__proof { position: absolute; left: 8px; bottom: 8px; right: 8px; background: rgba(20,16,14,.82); color: #fff6ea;
  font-size: .72rem; padding: 4px 8px; border-radius: 4px; border-left: 3px solid var(--accent); line-height: 1.3; }
.trip__b { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.trip__why { margin: 0; font-size: .92rem; }
.spec--tight { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; font-size: .88rem; }
.spec--tight dt { color: var(--text-muted); } .spec--tight dd { margin: 0; }
.trip__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  border-top: 1px solid var(--border); padding-top: 8px; margin-top: auto; }
.chip--gold { background: var(--accent); color: #1b0d06; }
.chip--quiet { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
.trip__day { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); padding: 12px 16px; }
.trip__list { margin: 0; padding-left: 22px; } .trip__list li { margin: 6px 0; }
.ask__trip { margin: 8px 0 0; }
@media (max-width: 720px) { .trip__stop { grid-template-columns: 1fr; } .trip__photo, .trip__photo img { height: 160px; } }
/* Print the day, not the app. */
@media print {
  body.print-trip .side, body.print-trip .qsearch, body.print-trip .btn, body.print-trip .trip__sec:not(.trip__day),
  body.print-trip .trip__btns, body.print-trip .head p { display: none !important; }
  body.print-trip .main { margin: 0 !important; padding: 0 !important; }
  body.print-trip .trip__day { background: #fff; border: 0; padding: 0; color: #000; }
  body.print-trip .trip__list a { color: #000; text-decoration: none; }
}

/* Print the packet, not the app: the print button stamps body.print-dc, and
   everything that is not the sheet steps aside. Buttons and selects flatten
   so the page prints like the paper form it mimics. */
@media print {
  body.print-dc .side, body.print-dc .qsearch, body.print-dc .btn,
  body.print-dc .back { display: none !important; }
  body.print-dc .main { margin: 0 !important; padding: 0 !important; }
  body.print-dc .panel { border: 1px solid #999; box-shadow: none; break-inside: avoid; }
  body.print-dc .inp { border: none; border-bottom: 1px solid #999; border-radius: 0; }
}

/* ---------- quote form: goals, inline hints, email suggestion ---------- */

/* "What are you trying to fix?" -- tick-any, laid out as chips so nine options
   read as one glanceable row rather than nine stacked checkboxes. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-check { position: relative; }
.chip-check input {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.chip-check span {
  display: inline-block; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--spe-line); background: var(--surface);
  font-size: .88rem; font-weight: 600; color: var(--text);
  cursor: pointer; transition: background .12s, border-color .12s, color .12s;
  user-select: none;
}
.chip-check span:hover { border-color: var(--primary); color: var(--primary); }
.chip-check input:checked + span {
  background: var(--primary); border-color: var(--primary); color: #fff;
}
/* Keyboard users get the same ring the inputs use; without this the chip is
   reachable by tab and gives no sign of it. */
.chip-check input:focus-visible + span {
  outline: 2px solid var(--primary); outline-offset: 2px;
}

.hint-inline {
  font-weight: 400; font-size: .78rem; color: var(--text-muted);
  text-transform: none; letter-spacing: 0;
}

/* The "did you mean gmail.com?" fix, which has to look clickable inside a
   line of hint text without becoming a button-shaped thing. */
.linkish {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--primary); font-weight: 700; text-decoration: underline;
}

/* Territory suggestion on a lead card: a quiet line above the assign row, so
   it reads as advice rather than as a second control competing with it. */
[data-theme="crm"] .lead__hint {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px; border-top: 1px dashed var(--spe-line);
  font-size: .86rem;
}
[data-theme="crm"] .lead__hint .btn { margin-left: auto; }
[data-theme="crm"] .calcfor__goals { margin: 8px 0 0; font-size: .9rem; }
[data-theme="crm"] .calcfor__goals .tag { margin-right: 4px; }

/* ------------------------------------------------ shared account notes */
.notes { list-style: none; margin: 0; padding: 0; }
.note { padding: 10px 0; border-bottom: 1px solid var(--line); }
.note:last-child { border-bottom: 0; }
.note p { margin: 4px 0 0; white-space: pre-wrap; }
.note__meta { font-size: .82rem; color: var(--muted); }
.note__meta b { color: var(--ink); }
.note__at { color: var(--primary); font-weight: 700; }
.note__void { color: var(--muted); font-size: .8rem; margin-left: 8px; }
.note--void p { text-decoration: line-through; opacity: .55; }
.note__form { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; }
.note__form textarea { flex: 1 1 auto; }
.lead__notes { padding: 0 16px 12px; }
.lead__notes summary { cursor: pointer; font-size: .88rem; color: var(--muted); }
.lead__notes .panel { margin-top: 10px; }

/* ------------------------------------------------ install packets */
.ipfiles { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.ipthumb { display: inline-block; padding: 6px 10px; border: 1px solid var(--line);
           border-radius: var(--r-sm); font-size: .85rem; text-decoration: none;
           background: var(--surface-2); max-width: 210px; overflow: hidden;
           text-overflow: ellipsis; white-space: nowrap; }
.iplist { list-style: none; margin: 6px 0 10px; padding: 0; }
.iplist li { padding: 5px 0; border-bottom: 1px solid var(--line); }
.iplist li:last-child { border-bottom: 0; }
.iplist s { opacity: .55; }


/* ------------------------------------------------ phone-first field screens
   Design Consults and Service are used from the truck. Below 700px: list
   tables become stacked cards (the column name rides along on each cell via
   data-label), the measurement sheet tightens to fit a 375px screen without
   sideways scrolling, and the Save controls pin to the bottom so they are
   never off-screen under twenty-five rows of measurements. */
@media (max-width: 700px) {
  .tbl--stack thead { display: none; }
  .tbl--stack, .tbl--stack tbody, .tbl--stack tr, .tbl--stack td { display: block; width: 100%; }
  .tbl--stack tr { border: 1px solid var(--border, #e1d7cb); border-radius: 8px;
                   padding: 8px 12px; margin: 0 0 10px; background: var(--surface, transparent); }
  .tbl--stack td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
                   padding: 4px 0; border: none; text-align: right; }
  .tbl--stack td::before { content: attr(data-label); flex: 0 0 auto; text-align: left;
                           font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
                           color: var(--text-muted, #8a8a8a); }
  .tbl--stack td.num { text-align: right; }
  .tbl--stack td:first-child { font-size: 1rem; }

  .tbl--dc { table-layout: fixed; width: 100%; }
  .tbl--dc th, .tbl--dc td { padding: 3px 2px; font-size: .78rem; }
  /* The markup gives the number column 44px inline for desktop; on a phone
     every pixel goes to the four value columns, so it is overridden here. */
  .tbl--dc th:first-child, .tbl--dc td:first-child { width: 22px !important; padding-left: 0; padding-right: 0; }
  .tbl--dc th:nth-child(2), .tbl--dc th:nth-child(3), .tbl--dc th:nth-child(4) { width: 22%; }
  .tbl--dc .inp--sm { min-width: 0; width: 100%; padding: 8px 4px; font-size: .95rem; box-sizing: border-box; }
  .tblwrap:has(.tbl--dc) { margin: 0 -8px; }   /* claw back the panel padding */
  .tbl--dc .inp--sm::placeholder { font-size: .7rem; }

  .dcsheet .calc__grid { grid-template-columns: 1fr; }
  .dcsheet .calc__f .inp, .dcsheet select.inp { width: 100%; }

  /* Pin the save row to the bottom of the screen on the DC sheet and the
     service ticket. :has() keeps the markup untouched; on an older browser
     that lacks it the buttons simply sit in the flow as before. */
  .dcsheet div:has(> #dc-save), .main p:has(> [data-tsave]) {
    position: sticky; bottom: 0; z-index: 20; margin: 12px -6px 0;
    padding: 10px 6px calc(10px + env(safe-area-inset-bottom));
    background: var(--surface, #fff); border-top: 1px solid var(--border, #e1d7cb);
    box-shadow: 0 -6px 18px rgba(0,0,0,.18);
    display: flex; flex-wrap: wrap; gap: 8px;
  }
  .dcsheet div:has(> #dc-save) .btn, .main p:has(> [data-tsave]) .btn { flex: 1 1 auto; }
}


/* ------------------------------------------------------------ order sheets
   One printable document per manufacturer, living on the DC packet. Styled to
   read like the form the shop already knows: a header block, a field grid,
   a ruled units table, a parts list. */
.os-toggles { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 14px; }
.os-toggle { font-size: .92rem; display: inline-flex; align-items: center; gap: 6px; }
.os-toggle small { margin-left: 4px; }
.os-sheet { border: 1px solid var(--border, #e1d7cb); border-radius: 8px; padding: 16px 18px; margin: 14px 0 0;
            background: var(--surface, #fff); }
.os-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start;
           border-bottom: 2px solid var(--border, #e1d7cb); padding-bottom: 10px; margin-bottom: 12px; }
.os-head b { display: block; font-size: 1.05rem; letter-spacing: .04em; }
.os-head small { display: block; color: var(--text-muted, #8a8a8a); }
.os-meta { display: grid; grid-template-columns: auto auto; gap: 2px 10px; margin: 0; font-size: .85rem; }
.os-meta dt { color: var(--text-muted, #8a8a8a); } .os-meta dd { margin: 0; font-weight: 600; }
.os-sheet h4 { margin: 16px 0 8px; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
               color: var(--text-muted, #8a8a8a); }
.os-sheet .tbl--os td { padding: 3px 4px; } .os-sheet .tbl--os .inp--sm { min-width: 54px; }
.os-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 14px; }
.os-parts--wide { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.os-parts label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .9rem; }
.os-parts label .inp--sm { width: 88px; flex: 0 0 auto; }
.os-parts--wide label .inp--sm { width: 100%; }
.os-actions { margin-top: 14px; align-items: center; gap: 8px; flex-wrap: wrap; }

@media print {
  /* Print ONE order sheet: everything else on the packet steps aside. */
  body.print-os .dcsheet > *:not(.os-wrap) { display: none !important; }
  body.print-os .os-wrap .panel__h, body.print-os .os-toggles { display: none !important; }
  body.print-os .os-sheet { display: none !important; border: none; padding: 0; }
  body.print-os .os-sheet.is-printing { display: block !important; }
  body.print-os .os-actions, body.print-os [data-osaddrow] { display: none !important; }
  body.print-os .os-sheet select, body.print-os .os-sheet input, body.print-os .os-sheet textarea {
    border: none; border-bottom: 1px solid #999; border-radius: 0; background: transparent; -webkit-appearance: none; appearance: none; }
}
@media (max-width: 700px) {
  .os-meta { grid-template-columns: auto auto; }
  .os-parts { grid-template-columns: 1fr; }
}


/* The job folder read off disk, grouped the way Dropbox groups it. */
.tbl--ff td { padding: 5px 8px; vertical-align: top; }
.tbl--ff .tag { white-space: nowrap; }
.tbl--ff td:first-child { width: 55%; }
.ff__n b { font-weight: 600; word-break: break-word; }
.ff__n small { display: block; font-size: .74rem; }
.ff__h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
         margin: 18px 0 6px; font-size: .8rem; letter-spacing: .09em; text-transform: uppercase; }
.ff__h:first-of-type { margin-top: 6px; }
.ff__h .muted { font-size: .72rem; letter-spacing: .02em; text-transform: none; }


/* Attachment status under a file input: what is picked, and the way out. */
.file-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 4px; font-size: .9rem; }
.file-status [data-file-count] { color: var(--text-muted, #6b6b6b); }


/* Quote calculator openings: five number boxes and a select across one row
   were collapsing to two digits on a laptop. Each box gets enough room for
   "288" and the Kind select enough for "Motorized"; the row scrolls inside
   .tblwrap before anything is allowed to clip. */
.tbl td input.inp[data-open-field] { min-width: 84px; }
.tbl td select.inp[data-open-field] { min-width: 124px; }
.tbl td:has([data-open-field]) { white-space: nowrap; }


/* Quote form: the expander for the optional extras. Reads as a disclosure,
   not as a button you must press, and nothing like the Submit underneath. */
.form-optional { display: inline-block; margin-left: 8px; font-size: .78rem; font-weight: 500; letter-spacing: .02em;
                 color: var(--text-muted, #6b6b6b); text-transform: none; }
.more-toggle { display: flex; align-items: center; gap: 10px; width: 100%; margin: 18px 0 4px; padding: 12px 14px;
               background: transparent; border: 1px dashed var(--border-strong, #bdb3a7); border-radius: 8px;
               font: inherit; font-size: .95rem; text-align: left; color: var(--text, #333); cursor: pointer; }
.more-toggle:hover { background: rgba(0,0,0,.03); border-style: solid; }
.more-toggle__plus { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
                     border-radius: 50%; background: var(--accent, #c0392b); color: #fff; font-weight: 700; flex: 0 0 auto; }
.more-toggle .form-optional { margin-left: auto; }


/* Job files -- the Dropbox folder, in Hot Ticket. Photos as tiles, the rest as
   rows, each Dropbox sub-folder its own group. */
.jf.is-drop { outline: 2px dashed var(--accent, #ef6c2b); outline-offset: -4px; }
.jf__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; margin: 6px 0 12px; }
.jf__tile { display: block; position: relative; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden;
            background: var(--surface-2, #f2ece5); text-decoration: none; }
.jf__tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .15s ease; }
.jf__tile:hover img { transform: scale(1.04); }
.jf__tile span { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 8px 6px; font-size: .68rem; line-height: 1.2;
                 color: #fff; background: linear-gradient(180deg, transparent, rgba(0,0,0,.65)); white-space: nowrap;
                 overflow: hidden; text-overflow: ellipsis; }
.jf__add { margin-left: auto; font-size: .72rem; letter-spacing: .02em; text-transform: none; color: var(--accent-hover, #c85a1e);
           cursor: pointer; text-decoration: underline; }
.jf__add input { display: none; }
.jf__drop { margin-top: 16px; padding: 12px 14px; border: 1px dashed var(--border-strong, #bdb3a7); border-radius: 8px; }
.jf__drop .btn input { display: none; }
.lb { position: fixed; inset: 0; z-index: 1000; background: rgba(10,8,6,.92); display: flex; flex-direction: column;
      align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.lb img { max-width: 96vw; max-height: 86vh; object-fit: contain; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,.6); cursor: default; }
.lb__cap { margin-top: 10px; color: #eee; font-size: .85rem; }
.lb__cap a { color: #ffd166; }
.lb__x { position: absolute; top: 12px; right: 16px; font-size: 2rem; line-height: 1; color: #fff; background: none; border: 0; cursor: pointer; }
@media (max-width: 700px) { .jf__grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); } }

.jf__tile--video { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
                   background: #1c1512; color: #fff; }
.jf__tile--video b { font-size: 2rem; line-height: 1; opacity: .9; }
.jf__tile--video small { font-size: .7rem; opacity: .7; }
.lb video { max-width: 96vw; max-height: 86vh; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,.6); background: #000; }

.jf__push { margin-top: 10px; }
.jf__bar { height: 6px; border-radius: 3px; background: var(--surface-2, #eee); overflow: hidden; }
.jf__bar i { display: block; height: 100%; background: var(--accent, #ef6c2b); transition: width .2s ease; }


/* Unlinked files: one row per parked Dropbox folder, guess + thumbnails + pick. */
.ul-list { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.ul-row { border: 1px solid var(--border, #e1d7cb); border-radius: 8px; padding: 12px 14px; background: var(--surface, #fff); }
.ul-row__h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ul-row__h b { font-size: 1rem; }
.ul-note { margin-top: 6px; font-size: .85rem; font-style: italic; color: var(--muted, #8a7c6d); }
/* Pipeline grouped by customer: the group row carries the caret, quotes nest under it. */
.pq__grp td { background: var(--surface-2, rgba(255,255,255,.03)); }
.pq__caret { display: inline-block; width: 1.1em; color: var(--accent, #ef6c2b); }
.pq__row td:first-child { padding-left: 30px; }
.pq__tick { display: inline-block; width: 10px; height: 10px; margin-right: 8px;
  border-left: 1px solid var(--border, #3a3a3a); border-bottom: 1px solid var(--border, #3a3a3a); }
.pq__acts { white-space: nowrap; }
.pq__acts .btn { margin-right: 4px; }
/* The windshield call list: one row per account, thumb-sized everything. */
.ncalls { display: flex; flex-direction: column; gap: 10px; }
.ncall { display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer;
  background: var(--surface-2, rgba(255,255,255,.04)); border: 1px solid var(--border, #3a3a3a);
  border-radius: 10px; }
.ncall__d { flex: 0 0 52px; text-align: center; }
.ncall__d b { display: block; font-size: 1.25rem; color: var(--accent, #ef6c2b); }
.ncall__d span { font-size: .72rem; color: var(--muted, #8a7c6d); }
.ncall__w { flex: 1 1 0; min-width: 0; }
.ncall__w b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ncall__w small { color: var(--muted, #8a7c6d); }
.ncall__a { display: flex; gap: 8px; flex: 0 0 auto; }
.ncall__btn { min-width: 64px; min-height: 44px; display: inline-flex; align-items: center;
  justify-content: center; }
@media (max-width: 640px) {
  .ncall { flex-wrap: wrap; }
  .ncall__a { flex: 1 1 100%; }
  .ncall__btn { flex: 1 1 auto; }
}
/* The signature box: white on purpose in every theme — it is the paper. */
.socanvas { width: 100%; max-width: 640px; height: 200px; background: #fff;
  border: 2px dashed var(--border, #cbbfae); border-radius: 8px; touch-action: none;
  display: block; cursor: crosshair; }
.ul-cands { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.ul-cand { font-size: .82rem; opacity: .9; }
.ul-cand.is-on { border-color: var(--accent, #ef6c2b); color: var(--accent, #ef6c2b); opacity: 1; }
.ul-row__act { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.ul-row__act .ul-pick { flex: 1 1 320px; }
.jf__grid--sm { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; margin: 10px 0 0; }
.jf__tile--sm { aspect-ratio: 1 / 1; }


/* Column sort on plain tables: the heading is the control. */
th.domsort { cursor: pointer; user-select: none; }
th.domsort:hover { color: var(--text-strong, #222); }
th.domsort::after { content: ""; display: inline-block; width: 1em; }
th.domsort[data-dir="asc"]::after  { content: " \25B2"; font-size: .7em; }
th.domsort[data-dir="desc"]::after { content: " \25BC"; font-size: .7em; }

/* Customise-this-page: handles on every panel while editing. */
.lay-toggle { margin: 6px 0 0; font-size: .8rem; }
.lay-host { position: relative; }
.lay { position: absolute; top: 8px; right: 10px; z-index: 5; display: flex; gap: 4px; }
.lay__b { border: 1px solid var(--border-strong, #b9aa99); background: var(--surface, #fff);
          border-radius: 6px; font: inherit; font-size: .74rem; padding: 2px 8px; cursor: pointer; }
.lay__b:hover { background: var(--surface-2, #f0eae2); }
.is-layout-hidden { display: none !important; }
.is-layout-dimmed { opacity: .45; outline: 2px dashed var(--border-strong, #b9aa99); outline-offset: -2px; }


/* Move this job: the one panel that writes the trail. */
.panel--stage { border-left: 4px solid var(--accent, #ef6c2b); }
.stage-hist { list-style: none; margin: 12px 0 0; padding: 0; font-size: .82rem; }
.stage-hist li { padding: 3px 0; border-top: 1px dotted var(--border, #ddd); }


/* ---- the second button, readable at last. The base ghost borrows the
   website's navy, which vanishes on the CRM's dark ground; inside the CRM it
   speaks accent instead, in both day and night. */
[data-theme="crm"] .btn--ghost { border: 1px solid var(--accent, #ef6c2b); color: var(--accent, #ef6c2b); background: transparent; }
[data-theme="crm"] .btn--ghost:hover { background: rgba(239,108,43,.16); color: var(--accent-hover, #ff8d4e); }
[data-theme="crm"] .btn--ghost:disabled { opacity: .45; }

/* Old versions fold away, the way Brian's eye already skips the old/ folder. */
.jf-old { margin-top: 18px; border-top: 1px dashed var(--border-strong, #b9aa99); padding-top: 8px; }
.jf-old > summary { cursor: pointer; font-size: .85rem; color: var(--text-muted, #8a8a8a); padding: 4px 0; }
.jf-old > summary:hover { color: var(--text, #333); }

/* Trail cards: clickable, draggable, and the deposit type rides along. */
.trail__job { cursor: pointer; }
.trail__job[draggable] { cursor: grab; }
.trail__job[draggable]:active { cursor: grabbing; }
.trail__col.is-over { outline: 2px dashed var(--accent, #ef6c2b); outline-offset: -3px; }
.trail__b .dep { display: inline-block; font-style: normal; font-size: .62rem; padding: 1px 5px;
                 border-radius: 3px; margin-left: 4px; opacity: .9; }
.dep--warn { background: rgba(216,146,58,.2); color: #d8923a; }
.dep--info { background: rgba(120,160,220,.18); color: #9ec1ef; }
.dep--good { background: rgba(90,180,120,.18); color: #7fd0a0; }

/* CJ: room to read once a conversation exists. */
.cjbox--tall { width: min(780px, 100%); max-height: 92vh; height: min(86vh, 900px); }
.cjbox.is-drop, .ask.is-drop { outline: 2px dashed var(--accent, #ef6c2b); outline-offset: -4px; }
.askchips { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.askchip { display: inline-flex; gap: 4px; align-items: center; font-size: .78rem; padding: 3px 8px;
           border-radius: 12px; background: var(--surface-2, #f0eae2); border: 1px solid var(--border, #ddd); }
.askchip__x { border: 0; background: none; cursor: pointer; font-size: .95rem; line-height: 1; color: inherit; padding: 0 2px; }
.askclip { padding: 4px 9px; }

/* cache-bust 27 Aug 2026: edge caches held 401s from the staging-password window */

/* ---- Dashboard fun (9 Oct 2026, Tom: "more fun for sure is needed") ---- */
/* Mercury fills up from the bulb when the dashboard draws. */
.thermo__mercury { transform-origin: bottom; animation: mercRise 1.4s cubic-bezier(.2,.9,.25,1) both; overflow: hidden; }
.thermo--exploding .thermo__mercury { animation: mercRise 1.4s cubic-bezier(.2,.9,.25,1) both, thermoPulse .9s ease-in-out 1.4s infinite alternate; }
@keyframes mercRise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
/* Bubbles fizzing up the column. */
.thermo__fizz { position: absolute; inset: 0; pointer-events: none; }
.thermo__fizz i { position: absolute; bottom: -8px; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.55); box-shadow: 0 0 3px rgba(255,255,255,.6); animation: fizz 2.6s linear infinite; }
.thermo__fizz i:nth-child(1) { left: 8px;  animation-delay: .2s; }
.thermo__fizz i:nth-child(2) { left: 22px; animation-delay: 1.1s; width: 4px; height: 4px; }
.thermo__fizz i:nth-child(3) { left: 14px; animation-delay: 1.9s; }
.thermo__fizz i:nth-child(4) { left: 27px; animation-delay: .7s; width: 5px; height: 5px; }
.thermo__fizz i:nth-child(5) { left: 5px;  animation-delay: 1.5s; width: 3px; height: 3px; }
.thermo__fizz i:nth-child(6) { left: 18px; animation-delay: .4s; }
.thermo__fizz i:nth-child(7) { left: 25px; animation-delay: 2.2s; width: 4px; height: 4px; }
.thermo__fizz i:nth-child(8) { left: 11px; animation-delay: 1.3s; width: 5px; height: 5px; }
.thermo--goal .thermo__fizz i, .thermo--overflow .thermo__fizz i { animation-duration: 1.8s; }
.thermo--exploding .thermo__fizz i { animation-duration: 1.1s; }
@keyframes fizz { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; }
  100% { transform: translateY(-260px) scale(1.1); opacity: 0; } }
/* A glint that sweeps up the glass now and then. */
.thermo__shine { position: absolute; left: 0; right: 0; height: 40px; bottom: -40px;
  background: linear-gradient(0deg, transparent, rgba(255,255,255,.45), transparent); animation: shine 4.5s ease-in-out 1.6s infinite; }
@keyframes shine { 0%, 70% { transform: translateY(0); } 100% { transform: translateY(-320px); } }

/* The boat is a moving clip now. */
.boat__shot video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Company year chart (Tom's dashboard). */
.cc { margin: 18px 0 6px; }
.cc__keys { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0 8px; font-size: .8rem; }
.cc__k { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); }
.cc__k::before { content: ""; width: 18px; height: 3px; border-radius: 2px; background: currentColor; }
.cc__k--now { color: #e2552b; font-weight: 700; }
.cc__k--prev { color: #7b8aa3; }
.cc__k--goal { color: #35a950; }
.cc__k--two { color: #e0a217; }
.cc__wrap { overflow-x: auto; }
.cc__svg { width: 100%; min-width: 520px; height: auto; display: block; }
.cc__grid { stroke: rgba(127,140,160,.22); stroke-width: 1; }
.cc__ax { fill: var(--text-muted); font: 600 11px var(--font-mono, monospace); }
.cc__line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.cc__line--prev { stroke: #7b8aa3; stroke-dasharray: 6 5; }
.cc__line--goal { stroke: #35a950; stroke-dasharray: 2 5; stroke-width: 3; }
.cc__line--two  { stroke: #e0a217; stroke-dasharray: 1 6; stroke-width: 3; opacity: .85; }
.cc__line--now  { stroke: #e2552b; stroke-width: 4; stroke-dasharray: 1; stroke-dashoffset: 1;
  filter: drop-shadow(0 0 4px rgba(226,85,43,.55)); animation: ccDraw 1.8s cubic-bezier(.3,.8,.3,1) .2s forwards; }
@keyframes ccDraw { to { stroke-dashoffset: 0; } }
.cc__bar { fill: rgba(226,85,43,.28); transform-box: fill-box; transform-origin: bottom; animation: mercRise .7s ease-out both; }
.cc__dot { fill: #e2552b; stroke: #fff; stroke-width: 2; animation: ccPing 1.6s ease-out 2s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ccPing { 0% { filter: drop-shadow(0 0 0 rgba(226,85,43,.9)); } 100% { filter: drop-shadow(0 0 14px rgba(226,85,43,0)); } }
.cc__now { fill: #e2552b; font: 700 13px var(--font-mono, monospace); }
@media (prefers-reduced-motion: reduce) {
  .thermo__mercury, .cc__bar, .thermo__fizz i, .thermo__shine { animation: none !important; }
  .cc__line--now { animation: none; stroke-dashoffset: 0; }
}
/* pace line under the gauges (828) */
.pace{margin:10px 16px 0;padding:10px 14px;border-left:4px solid var(--ember,#e2552b);background:rgba(226,85,43,.08);border-radius:0 8px 8px 0;font-size:15px}
.pace b{color:var(--ember,#e2552b)}