/* Project pages in the cinematic dark look (Nov 1, 2026). Loaded last, after site.css, rosy.css, compact.css and noir.css,
   so the case studies, the email deck, the 30-day plan and the QR review page wear the home page's palette:
   warm charcoal, cream type, Archivo for titles and figures, cherry only for buttons, the active state and small marks.
   The work itself (emails, Reels, the IMT phone page, TATE's black and white) keeps its own colors. */
:root {
  --ink: #F4EDE5; --ink-2: #ABA09A; --petal: #1F1A1D; --lace: #0B0809; --pink: #F4EDE5;
  --blush: rgba(244, 237, 229, .08); --blush-2: rgba(244, 237, 229, .12); --line-2: rgba(244, 237, 229, .06);
  --accent: #D72C43; --accent-hi: #E9475C; --slate-3: #6E6468;
  --panel: #1F1A1D;                 /* cards and panels */
  --wash: rgba(244, 237, 229, .05); /* rows inside a panel */
  --cherry-lite: #EE6276;           /* cherry for small text on charcoal (5.4:1 on a panel) */
  --shadow: 0 30px 60px -30px #000;
}
html:has(> body.noir) { background: var(--night); }
body.noir.page-ec { --accent: var(--cherry); --ec-ink: var(--cream); --ec-ink-2: var(--mute); --ec-line: var(--line); background: var(--night); color: var(--cream); }
.noir ::selection { background: var(--cherry); color: #fff; }
.noir :focus-visible { outline-color: var(--cherry); }

/* ---------- chrome ---------- */
.noir .header, .noir .header.solid { background: rgba(21, 18, 20, .88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); box-shadow: none; }
.noir .footer { background: transparent; color: var(--mute); border-top: 1px solid var(--line); }
.noir .footer a { color: var(--cream); }
.noir .footer small { color: var(--mute); font-size: 14px; }
.noir .btn { border-radius: 3px; box-shadow: none; }
.noir .btn-primary { background: var(--cherry); border-color: var(--cherry); color: #fff; }
.noir .btn-primary:hover { background: var(--cherry-press); border-color: var(--cherry-press); }
.noir .btn-ghost { background: transparent; border-color: rgba(244, 237, 229, .5); color: var(--cream); }
.noir .btn-ghost:hover { background: rgba(244, 237, 229, .08); border-color: var(--cream); }
.noir .ec-back { color: var(--mute); font-weight: 600; }
.noir .ec-back:hover { color: var(--cream); text-decoration-color: var(--cherry); }

/* ---------- titles, labels and numbers ---------- */
.noir .ec-eyebrow { font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--mute); }
.noir .ec-eyebrow .tag { margin-right: 10px; }
.noir .tag { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 3px; border: 1px solid rgba(244, 237, 229, .4); background: transparent; color: var(--cream); font-size: 12.5px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.noir .tag-real { background: var(--cherry); border-color: var(--cherry); color: #fff; }
.noir .tag-plan, .noir .tag-spec, .noir .tag-class { background: transparent; border-color: rgba(244, 237, 229, .4); color: var(--cream); }

.noir .dk-h1, .noir .ec-top h1, .noir .dk-head h1, .noir .ec-hero h1, .noir .ec-end h2, .noir .dk-big, .noir .sim-verdict, .noir .nb h2,
.noir .dk-stats b, .noir .ec-stats b, .noir .dk-nums b, .noir .ec-label, .noir .pillar h3, .noir .mv-head h3 {
  font-family: var(--display); font-stretch: 72%; font-weight: 800; letter-spacing: 0; color: var(--cream); }
.noir.page-case .dk-h1 { max-width: 17em; font-size: clamp(36px, 3.6vw, 54px) !important; line-height: .95 !important; }
.noir .dk-head h1 { font-size: clamp(48px, 5.6vw, 84px); line-height: .9; }
.noir .ec-top h1 { font-size: clamp(42px, 4.6vw, 70px); line-height: .92; }
.noir .ec-sub { color: var(--mute); }

/* numbers: no boxes, a rule above each, like the home page's results */
.noir .dk-stats, .noir .ec-stats { gap: 14px 28px; }
.noir .dk-stats li, .noir .ec-stats li, .noir.page-case .ec > .dk-head .dk-stats li { padding: 12px 0 0; border: 0; border-top: 1px solid rgba(244, 237, 229, .24); border-radius: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.noir .dk-stats b { font-size: 42px; line-height: .95; }
.noir .ec-stats b, .noir .ec-top .ec-stats b { font-size: clamp(36px, 3.6vw, 52px); line-height: .95; }
.noir .dk-stats span, .noir .ec-stats span { color: var(--mute); font-weight: 500; }
.noir .dk-src, .noir .ec-label-note, .noir .ec-note, .noir .ec-lead { color: var(--mute); }
.noir .ec-note b { color: var(--cream); }

/* section labels become small titles */
.noir .ec-label { font-size: clamp(28px, 2.6vw, 38px); line-height: 1; text-transform: none; }
.noir .ec-label i { margin-bottom: 8px; font-family: var(--body); font-stretch: 100%; font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--mute); }
.noir .ec-sec.ec-full .ec-label i { margin-right: 12px; vertical-align: 6px; }
.noir .ec-end { border-top-color: var(--line); padding-block: 40px 80px; }
.noir .ec-end h2 { font-size: clamp(34px, 3.8vw, 56px); line-height: .95; }

/* ---------- panels ---------- */
.noir .ec-think > div, .noir .ec-details, .noir .ec-card, .noir .ec-more a, .noir .pillar, .noir .cal-scroll, .noir .sim, .noir .dk-pop, .noir .rv-qrtile {
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.noir .ec-think dt, .noir .ec-dl dt, .noir .dk-pop dt { font-size: 13.5px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--mute); }
.noir .ec-think dd, .noir .ec-dl dd, .noir .dk-pop dd { color: var(--cream); }
.noir .ec-tags li { border-radius: 3px; background: rgba(244, 237, 229, .08); color: var(--cream); }
.noir .ec-details summary { color: var(--cream); }
.noir .ec-details summary::after { border-radius: 3px; background: rgba(244, 237, 229, .08); color: var(--cream); }
.noir .ec-details summary:focus-visible { border-radius: 6px; }
.noir .ec-fine, .noir .dk-fine { color: var(--mute); }
.noir .ec-more .art { background: rgba(215, 44, 67, .14); color: var(--cherry-lite); border-color: var(--line); }
.noir .ec-more em { color: var(--cream); text-decoration: underline; text-decoration-color: var(--cherry); text-underline-offset: 5px; }
.noir .ec-media img { border: 0; border-radius: 6px; box-shadow: var(--shadow); }
.noir .ec-shotwide img, .noir .ec-gallery img { border-color: var(--line); border-radius: 6px; }
.noir .ec-arrows button { border-radius: 3px; border-color: rgba(244, 237, 229, .35); background: transparent; color: var(--cream); }
.noir .ec-arrows button:hover { background: rgba(244, 237, 229, .08); }

/* ---------- the swipe decks ---------- */
.noir .dk-card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; color: var(--cream); box-shadow: 0 40px 80px -40px #000; }
.noir .dk.on .dk-card::after { background: var(--night); opacity: calc(var(--dim, 0) * .72); }
.noir .dk-face { background: var(--panel); }
.noir .dk-card.dk-reel { background: #0B0809; border: 0; }
.noir .dk.on .dk-card.dk-reel::after { background: var(--night); }
.noir .dk-reelcap { border-radius: 0 0 8px 8px; background: linear-gradient(180deg, rgba(11, 8, 9, 0), rgba(11, 8, 9, .86)); }
.noir .dk-reelcap a span[aria-hidden] { color: rgba(244, 237, 229, .7); }
.noir .dk-kicker { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--mute); }
.noir .dk-kicker i { color: rgba(244, 237, 229, .45); }
.noir .dk-icon { border-radius: 6px; background: rgba(215, 44, 67, .14); color: var(--cherry-lite); }
.noir .dk-big { font-size: clamp(30px, 2.8vw, 40px); line-height: .98; }
.noir .dk-think .dk-big { font-size: clamp(28px, 2.5vw, 36px); }
.noir .dk-big em { color: var(--cherry-lite); }
.noir .dk-small { color: var(--mute); }
.noir .dk-mid { color: var(--cream); }
.noir .dk-rows li, .noir .dk-nums li, .noir .dk-tools li { border-radius: 4px; background: var(--wash); }
.noir .dk-rows .dk-icon { background: rgba(215, 44, 67, .16); border-radius: 4px; }
.noir .dk-rows span, .noir .dk-nums span { color: var(--mute); }
.noir .dk-rows.dk-plain li > span { color: var(--cream); }
.noir .dk-nums b { font-size: 32px; }
.noir .dk-mail { border: 0; border-radius: 4px; background: #fff; }
.noir .dk-mail span { border-radius: 3px; background: rgba(21, 18, 20, .88); color: var(--cream); }
.noir .dk-date { color: var(--mute); }
.noir .dk-goal { color: var(--cream); }
.noir .dk-goal b { font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--mute); }
.noir .dk-more, .noir .dk-pill, .noir .dk-menu summary, .noir .dk-arrow, .noir .sim-fixes button, .noir .rv-qrtile button {
  border-radius: 3px; border: 1px solid rgba(244, 237, 229, .35); background: transparent; color: var(--cream); -webkit-backdrop-filter: none; backdrop-filter: none; }
.noir .dk-more:hover, .noir .dk-pill:hover, .noir .dk-menu summary:hover, .noir .dk-arrow:hover, .noir .sim-fixes button:hover, .noir .rv-qrtile button:hover { background: rgba(244, 237, 229, .08); border-color: rgba(244, 237, 229, .6); }
.noir .dk-arrow:disabled { background: transparent; }
.noir .dk-pill-red, .noir .dk-pill-red:hover { background: var(--cherry); border-color: var(--cherry); color: #fff; }
.noir .dk-pill-red:hover { background: var(--cherry-press); border-color: var(--cherry-press); }
.noir .dk-pop { box-shadow: 0 30px 60px -24px #000; }
.noir .dk-aud span { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--mute); }
.noir .dk-aud b { border-radius: 3px; border: 1px solid rgba(244, 237, 229, .3); background: transparent; color: var(--cream); font-weight: 700; }
.noir .dk-cap { font-weight: 600; letter-spacing: .02em; color: var(--mute); text-shadow: none; }
.noir .dk-dot { background: rgba(244, 237, 229, .25); }
.noir .dk-dot[aria-current="true"] { background: var(--cherry); }
.noir .dk-srcs a { color: var(--cream); text-decoration-color: var(--cherry); }
.noir .dk-toggle { border-radius: 4px; background: var(--panel); border: 1px solid var(--line); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.noir .dk-toggle button { border-radius: 3px; color: rgba(244, 237, 229, .78); }
.noir .dk-toggle button[aria-selected="true"] { color: #fff; }
.noir .dk-toggle-dot { border-radius: 3px; background: var(--cherry); box-shadow: none; }

/* email type marks */
.noir .ec-type { padding: 4px 9px; border-radius: 3px; font-size: 12.5px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.noir .ec-type.t-promo { background: var(--cherry); color: #fff; }
.noir .ec-type.t-nurture { background: transparent; box-shadow: inset 0 0 0 1px rgba(244, 237, 229, .45); color: var(--cream); }
.noir .ec-type.t-event { background: var(--cream); color: var(--night); }

/* the full-size email */
.noir .mail-view { background: var(--panel); color: var(--cream); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 40px 120px #000; }
.noir .mail-view::backdrop { background: rgba(8, 6, 7, .74); }
.noir .mv-head { background: var(--panel); border-bottom: 1px solid var(--line); }
.noir .mv-head h3 { font-size: 26px; line-height: 1; }
.noir .mv-head p { color: var(--mute); }
.noir.page-ec .mv-head .mv-why { color: var(--cream); }
.noir .mv-body { background: #0E0C0D; }

/* ---------- the ROI simulator ---------- */
.noir .sim { border-radius: 8px; }
.noir .sim-lead { color: var(--cream); }
.noir .sim-lead b { color: var(--cherry-lite); }
.noir .sim-fixes span, .noir .sim-kicker { letter-spacing: 0; text-transform: none; font-size: 13px; font-weight: 600; color: var(--mute); }
.noir .sim-fixes button { color: var(--cream); }
.noir .sim-fixes button[aria-pressed="true"] { background: var(--cherry); border-color: var(--cherry); color: #fff; }
.noir .sim-lever { background: var(--wash); border-color: var(--line); border-radius: 6px; }
.noir .sim-lever label { color: var(--cream); }
.noir .sim-lever output { color: var(--cream); }
.noir .sim-lever input[type=range] { background: linear-gradient(90deg, var(--cherry) var(--p, 50%), rgba(244, 237, 229, .14) var(--p, 50%)); }
.noir .sim-lever input[type=range]::-webkit-slider-thumb { background: var(--night); border-color: var(--cherry); box-shadow: none; }
.noir .sim-lever input[type=range]::-moz-range-thumb { background: var(--night); border-color: var(--cherry); }
.noir .sim-hint, .noir .sim-scaleends, .noir .sim-fine, .noir .sim-mini span { color: var(--mute); }
.noir .sim-result { --tone: var(--cherry-lite); --tone-bg: rgba(238, 98, 118, .12); background: var(--wash); border: 1px solid var(--line); border-top: 4px solid var(--tone); border-radius: 6px; }
.noir .sim[data-status="thin"] .sim-result { --tone: #E2B46C; --tone-bg: rgba(226, 180, 108, .12); }
.noir .sim[data-status="win"] .sim-result { --tone: #62C394; --tone-bg: rgba(98, 195, 148, .12); }
.noir .sim-verdict { font-size: clamp(40px, 4vw, 58px); line-height: .95; }
.noir .sim-sub, .noir .sim-mini b, .noir .sim-need, .noir .sim-need b { color: var(--cream); }
.noir .sim-track { background: rgba(244, 237, 229, .1); }
.noir .sim-mark { background: var(--cream); }
.noir .sim-mark em { color: var(--cream); }
.noir .sim-mark.sim-scale { background: #62C394; }
.noir .sim-mark.sim-scale em { color: #62C394; }
.noir .sim-mini li { border-radius: 4px; }
.noir .sim-need { border-radius: 4px; background: var(--wash); }
@media (min-width: 901px) and (max-height: 860px) { .noir .sim-verdict { font-size: 44px; } }

/* ---------- TATE 01 ---------- */
.noir .tt-card .tt-text { color: var(--cream); }
.noir .tt-card .tt-small { color: var(--mute); }
.noir .tt-frame, .noir .tt-vis { border-radius: 4px; }

/* ---------- the 30-day plan ---------- */
/* four kinds of Reels, keyed like a funnel: dim to bright, and cherry for the one that books tours */
.noir .p-seen { --pc: #6E6266; --pw: var(--wash); }
.noir .p-talk { --pc: #A0938D; --pw: var(--wash); }
.noir .p-follow { --pc: #E2D8CF; --pw: var(--wash); }
.noir .p-tour { --pc: var(--cherry); --pw: rgba(215, 44, 67, .14); }
.noir .pillar { border-top: 3px solid var(--pc); }
.noir .pj { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--mute); }
.noir .pl-4 .pillar h3, .noir .pillar h3 { font-size: 28px; line-height: 1; }
.noir .pillar > p:not(.pj):not(.pm) { color: var(--mute); }
.noir .hooks li { border-radius: 4px; background: var(--pw); color: var(--cream); font-weight: 600; }
.noir .pm { color: var(--mute); }
.noir .pm b { font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--cream); }
.noir .cal th, .noir .cal td { border-bottom-color: var(--line); }
.noir .cal thead th { background: rgba(244, 237, 229, .04); color: var(--cream); font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.noir .cal tbody th, .noir .cal td { color: var(--cream); }
.noir .cal tbody th small, .noir .cal td b { color: var(--mute); }
.noir .cal td b { font-size: 12.5px; letter-spacing: 0; text-transform: none; }
.noir .cal td:nth-child(2) { box-shadow: inset 3px 0 0 #6E6266; }
.noir .cal td:nth-child(3) { box-shadow: inset 3px 0 0 #A0938D; }
.noir .cal td:nth-child(4) { box-shadow: inset 3px 0 0 #E2D8CF; }
.noir .cal td:nth-child(5) { box-shadow: inset 3px 0 0 var(--cherry); }
.noir .diary-phone { border-color: #0B0809; background: #0B0809; box-shadow: var(--shadow); }
.noir .diary-phone::before { background: #0B0809; }
.noir .diary figcaption { color: var(--mute); }
.noir .diary-cta { background: var(--cherry); }

/* ---------- the QR review page ---------- */
/* the story as a plain panel: one row per part, label above */
.noir .nb { margin: 4px 0 0; padding: 26px 28px 28px; border-radius: 6px; background: var(--panel); background-image: none; border: 1px solid var(--line); box-shadow: none; }
.noir .nb::before { content: none; }
.noir .nb h2 { height: auto; margin-bottom: 18px; font-size: 38px; line-height: 1; }
.noir .nb li { padding: 16px 0 0; margin-top: 16px; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.55; color: rgba(244, 237, 229, .88); }
.noir .nb li:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.noir .nb li b { display: block; margin: 0 0 4px; padding: 0; border-radius: 0; background: none; color: var(--mute); font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; line-height: 1.4; }
.noir .nb li em { color: var(--cream); font-weight: 800; }
.noir .nb-arrow { color: var(--cream); text-decoration: underline; text-decoration-color: var(--cherry); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.noir .rv-qrtile p { color: var(--mute); }
.noir .rv-qrtile p b { color: var(--cream); }
.noir .rv-note { color: var(--mute); }
.noir .rv-phone { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08), 0 40px 80px -30px #000; }

@media (max-width: 700px) {
  .noir .dk-stats b { font-size: 34px; }
  .noir .dk-head h1 { font-size: 52px; }
}
@media (max-width: 560px) {
  .noir .ec-stats li, .noir .ec-top .ec-stats li { padding: 12px 0 0; }
  .noir .nb { padding: 22px 18px 24px; }
}

/* wider pages, so case-study titles keep to two lines beside their numbers */
.noir .ec { max-width: 1200px; }
.noir.page-case .dk-h1 { font-size: clamp(34px, 3.3vw, 48px) !important; }
.noir .diary-top { color: var(--night); }
/* the deck caption wraps on phones instead of running under the Next button */
@media (max-width: 700px) {
  .noir .dk-bar { gap: 10px; }
  .noir .dk-where { flex: 1 1 0; min-width: 0; }
  .noir .dk-cap { white-space: normal; text-align: center; font-size: 12.5px; line-height: 1.35; }
}
/* header links and the contact drawer: undo the old light styles so they match the home page exactly */
.noir .nav-links a { min-height: 0; padding: 0; border-radius: 0; background: none; }
.noir .nav-links a:hover { background: none; }
.noir .contact-item { padding: 20px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.noir .contact-item .addr { word-break: normal; }
.noir .contact-item .btn { min-height: 50px; padding: 0 26px; font-size: 15px; }