/* ThatsKrispy homepage, Direction C "Studio, dark mode" (2026-09-26, Andy: "dark theme
   looks nicer"). Loads after tkheader.css. Every rule is scoped under body.home-dark,
   which only index.html carries, so no other page changes.

   The shared header (.tkh / .tkh-sheet), footer (footer.ft) and form (.tkf*) keep their
   markup; they are re-themed here by redefining the tkheader.css tokens they already
   read (--ink, --cream, --paper, --line, --gray, --blue-text) on body.home-dark, plus a
   few targeted size fixes. New page sections use the hd- prefix so nothing collides
   with the shared .tile / .sec / .btn components.

   Z-index: nothing here sets a z-index above 2. The header (9999), mobile sheet (9998)
   and the hosted krispy-widget layers stay on top, untouched. */

/* ---------------------------------------------------------------- tokens */
html:has(body.home-dark) { background: #070a12; color-scheme: dark; scroll-padding-top: 5.5rem; }
body.tk.home-dark {
  /* type: self-hosted Satoshi (declared in tkheader.css), same on every OS */
  --tk-sans: "Satoshi", ui-sans-serif, system-ui, sans-serif;

  /* dark palette */
  --bg: #070a12;
  --bg-2: #0b101b;
  --panel: #0f1522;
  --text: #f2f5fa;
  --hd-soft: #c9d2e0;      /* 12.4:1 on --bg */
  --mute: #8e9ab0;         /* 7.0:1 on --bg, 6.4:1 on --panel */
  --hd-line: rgba(255, 255, 255, 0.09);
  --hd-line-2: rgba(255, 255, 255, 0.16);
  --hd-blue: #2563eb;      /* fills, white text 5.2:1 */
  --hd-blue-press: #1d55d6;
  --hd-sky: #8fb8ff;       /* accent text, 9.1:1 on --bg */
  --hd-glow: rgba(56, 120, 255, 0.2);
  --hd-r: 24px;
  --hd-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* tkheader.css tokens, remapped so the shared header, sheet, footer, form and
     language switch turn dark without touching their markup */
  --ink: #f2f5fa;
  --body: #f2f5fa;
  --cream: #0f1522;
  --paper: #0b101b;
  --line: rgba(255, 255, 255, 0.14);
  --gray: #8e9ab0;
  --sub: #8e9ab0;
  --blue: #2563eb;
  --blue-press: #1d55d6;
  --blue-text: #8fb8ff;
  --wrap: 1320px;
  --hdr: 4.5rem;

  background: var(--bg);
  color: var(--text);
  font-family: var(--tk-sans);
  font-size: 18px;
  line-height: 1.55;
  letter-spacing: 0;
}
@media (max-width: 559px) { body.tk.home-dark { font-size: 17px; } }
body.home-dark ::selection { background: var(--hd-blue); color: #fff; }
body.home-dark :focus-visible { outline: 2px solid var(--hd-sky); outline-offset: 3px; }
body.home-dark main a:not([class]) { color: var(--hd-sky); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
body.home-dark main a:not([class]):hover { color: #fff; }
body.home-dark h1, body.home-dark h2, body.home-dark h3 { margin: 0; font-family: var(--tk-sans); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; color: var(--text); }
body.home-dark main p { margin: 0; }

/* ---------------------------------------------------------------- header (dark) */
body.home-dark .tkh {
  background: rgba(7, 10, 18, 0.72);
  border-bottom: 1px solid var(--hd-line);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
}
body.home-dark .tkh.scrolled { background: rgba(7, 10, 18, 0.86); border-bottom-color: var(--hd-line); }
body.home-dark .tkh-logo, body.home-dark footer.ft .ft-mark img { filter: invert(1); }
body.home-dark .tkh-logo { height: 3.25rem; }
body.home-dark .tkh-nav { gap: clamp(1.1rem, 2vw, 1.9rem); }
body.home-dark .tkh-nav > a, body.home-dark .tkh-drop > summary { font-size: 15px; font-weight: 500; color: var(--hd-soft) !important; opacity: 1; }
body.home-dark .tkh-nav > a:hover, body.home-dark .tkh-drop > summary:hover, body.home-dark .tkh-drop[open] > summary { color: #fff !important; }
body.home-dark .tkh-nav > a.active { color: #fff !important; }
body.home-dark .tkh-drop-menu { background: #0f1522; border-color: var(--hd-line-2); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7); }
body.home-dark .tkh-drop-menu a { color: var(--hd-soft) !important; font-size: 15px; }
body.home-dark .tkh-drop-menu a:hover { background: rgba(255, 255, 255, 0.06); color: #fff !important; }
body.home-dark .tkh-drop-label { color: var(--mute); }
body.home-dark .tkh-phone { font-size: 15px; font-weight: 500; color: var(--hd-soft) !important; opacity: 1; }
body.home-dark .tkh-phone:hover { color: #fff !important; }
body.home-dark .tkh-btn {
  min-height: 2.6rem;
  padding: 0.5rem 1.15rem;
  font-size: 15px;
  font-weight: 500;
  background: var(--hd-blue);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
body.home-dark .tkh-btn:hover { background: var(--hd-blue-press); }
body.home-dark .tkh-burger span { background: var(--text); }
body.home-dark .langsw { background: transparent; border-color: var(--hd-line-2); }
body.home-dark .langsw button { color: var(--mute); }
body.home-dark .langsw button + button { border-left-color: var(--hd-line-2); }
body.home-dark .langsw button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
@media (max-width: 560px) {
  body.home-dark .tkh-logo { height: 2.85rem; }
  body.home-dark .tkh-right .tkh-btn { min-height: 2.6rem; padding: 0.45rem 0.95rem; font-size: 14px; }
}

/* mobile sheet */
body.home-dark .tkh-sheet { background: #070a12; box-shadow: none; }
body.home-dark .tkh-sheet > a { font-size: 1.35rem; letter-spacing: -0.02em; border-bottom-color: var(--hd-line); }
body.home-dark .tkh-sheet-group { border-bottom-color: var(--hd-line); }
body.home-dark .tkh-sheet-group > p { color: var(--mute); }
body.home-dark .tkh-sheet-group--grid a { background: rgba(255, 255, 255, 0.04); border-color: var(--hd-line-2); color: var(--hd-soft) !important; }
body.home-dark .tkh-sheet-cta { background: #070a12; border-top-color: var(--hd-line); }
body.home-dark .tkh-sheet-cta .tkh-btn { font-size: 1rem; min-height: 3rem; }
body.home-dark .tkh-sheet-cta .tkh-phone { border-color: var(--hd-line-2); color: var(--text) !important; font-size: 1rem; }

/* ---------------------------------------------------------------- shared bits */
body.home-dark .hd-sec { padding-block: clamp(5.5rem, 10vw, 9rem); }
body.home-dark .hd-h2 { font-size: clamp(2.3rem, 4.6vw, 4.2rem); letter-spacing: -0.04em; text-wrap: balance; }
body.home-dark .hd-lede { margin-top: 1.25rem; font-size: clamp(1.08rem, 1.3vw, 1.22rem); color: var(--mute); max-width: 44ch; text-wrap: pretty; }

body.home-dark .hd-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  height: 3.25rem;
  padding: 0 1.6rem;
  border-radius: 999px;
  font-family: var(--tk-sans);
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: transform 0.5s var(--hd-ease), background-color 0.3s var(--hd-ease), box-shadow 0.5s var(--hd-ease);
}
body.home-dark .hd-btn:active { transform: scale(0.98); }
body.home-dark .hd-btn--primary {
  padding-right: 0.45rem;
  background: var(--hd-blue);
  color: #fff;
  box-shadow: 0 10px 40px -12px rgba(37, 99, 235, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
body.home-dark .hd-btn--primary:hover { background: var(--hd-blue-press); }
body.home-dark .hd-btn-dot { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: rgba(255, 255, 255, 0.16); transition: transform 0.5s var(--hd-ease); }
body.home-dark .hd-btn:hover .hd-btn-dot { transform: translate(2px, -1px) scale(1.05); }
body.home-dark .hd-btn svg { width: 16px; height: 16px; }
body.home-dark .hd-btn--ghost { background: rgba(255, 255, 255, 0.06); color: var(--text); box-shadow: inset 0 0 0 1px var(--hd-line-2); }
body.home-dark .hd-btn--ghost:hover { background: rgba(255, 255, 255, 0.11); }
body.home-dark .hd-btn .tk-wa-ic { width: 20px; height: 20px; margin-left: -0.2rem; color: var(--hd-sky); }

body.home-dark .hd-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  color: var(--hd-sky);
  text-decoration: none;
  border-bottom: 1px solid rgba(143, 184, 255, 0.45);
  padding-bottom: 2px;
  transition: color 0.3s var(--hd-ease), border-color 0.3s var(--hd-ease);
}
body.home-dark .hd-link:hover { color: #fff; border-color: #fff; }

/* nested bezel: a hairline tray around a rounded core */
body.home-dark .hd-bezel { margin: 0; padding: 6px; border-radius: calc(var(--hd-r) + 6px); background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--hd-line); }
body.home-dark .hd-core { border-radius: var(--hd-r); overflow: hidden; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
body.home-dark .hd-core img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* reveal: tkheader.css owns .rv and js/beta.js adds .in; this only slows it down */
body.home-dark .rv { transform: translateY(24px); transition: opacity 0.9s var(--hd-ease), transform 1s var(--hd-ease); transition-delay: calc(var(--d, 0) * 100ms); }
body.home-dark .rv.in { transform: none; }

/* ---------------------------------------------------------------- hero */
/* 2026-09-27 revamp (HOME-REVAMP-SPEC): the single food hero plate is gone. The hero is
   now copy on one side and a small cross-vertical collage of real work (a business
   portrait, a client event, a family and two client site captures) on the other, so the
   local-agency story reads in one glance without a food photo anywhere in it. */
body.home-dark .hd-hero { position: relative; padding-top: clamp(7rem, 11vw, 9.5rem); padding-bottom: clamp(3rem, 6vw, 5.5rem); overflow: hidden; }
body.home-dark .hd-hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
body.home-dark .hd-hero-copy { grid-column: 1 / 6; }
body.home-dark .hd-hero-collage { grid-column: 6 / 13; }
body.home-dark .hd-hero h1 { font-size: clamp(2.5rem, 4.6vw, 4.6rem); letter-spacing: -0.045em; line-height: 1.02; max-width: 14ch; }
body.home-dark .hd-hero h1 span { color: var(--hd-sky); }
body.home-dark .hd-hero-sub { margin-top: 1.5rem; font-size: clamp(1.1rem, 1.4vw, 1.3rem); color: var(--hd-soft); max-width: 40ch; text-wrap: pretty; }
body.home-dark .hd-ctas { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.25rem; }

/* floating 3-photo stack (restores the pre-revamp hero: HOME-RESTORE-SPEC 2026-09-27),
   restyled for dark: same 3 images/labels as the old light hero, deep-panel bezel and
   shadow instead of a plain drop shadow. */
body.home-dark .hd-stack { grid-column: 6 / 13; position: relative; width: 100%; aspect-ratio: 4 / 4.6; min-height: 320px; max-width: 660px; justify-self: stretch; }
body.home-dark .hd-stack figure {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  background: var(--panel);
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.7), inset 0 0 0 1px var(--hd-line-2);
}
body.home-dark .hd-stack img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.home-dark .hd-stack .s1 { width: 60%; aspect-ratio: 3 / 4; right: 12%; top: 0; transform: rotate(2.2deg); z-index: 2; }
body.home-dark .hd-stack .s2 { width: 50%; aspect-ratio: 4 / 3; left: 0; bottom: 4%; transform: rotate(-3deg); z-index: 3; }
body.home-dark .hd-stack .s3 { width: 38%; aspect-ratio: 1 / 1; right: 0; bottom: 12%; transform: rotate(4deg); z-index: 4; }
body.home-dark .hd-stack .s3 img { object-position: 50% 22%; }
body.home-dark .hd-stack figcaption {
  position: absolute;
  left: 0.7rem;
  bottom: 0.7rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(7, 10, 18, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

@media (max-width: 899px) {
  body.home-dark .hd-hero-grid { display: block; }
  body.home-dark .hd-stack { margin-top: clamp(2.25rem, 6vw, 3rem); max-width: 420px; }
}
/* mobile: copy first, stack below it, so the stack's height never affects where the
   primary CTA lands (must clear the consent banner top at 375x812). */
@media (max-width: 767px) {
  /* the H1 is longer than the old "We power brands." and the ES sub runs a line
     longer than EN, so mobile spacing is trimmed hard here: the target is the
     primary CTA bottom clearing the consent banner top in BOTH languages, not
     just English. Measured live, not guessed. */
  body.home-dark .hd-hero { padding-top: 4.75rem; padding-bottom: 2rem; }
  body.home-dark .hd-hero h1 { font-size: clamp(1.9rem, 7.6vw, 2.6rem); line-height: 1.05; max-width: none; }
  body.home-dark .hd-hero-sub { margin-top: 0.9rem; font-size: 0.98rem; line-height: 1.36; }
  body.home-dark .hd-ctas { margin-top: 1.1rem; }
  body.home-dark .hd-hero-note { margin-top: 1rem; }
  body.home-dark .hd-stack { max-width: 300px; margin-inline: auto; aspect-ratio: 4 / 4.8; }
}
html[data-a11y-motion="reduced"] .hd-stack figure { transform: none !important; }

/* ---------------------------------------------------------------- client roll (HOME-REFINE-SPEC) */
body.home-dark .hd-roll { border-top: 1px solid var(--hd-line); border-bottom: 1px solid var(--hd-line); padding: 2.5rem 0; }
body.home-dark .hd-roll-wrap, body.home-dark .hd-roll-eyebrow, body.home-dark .hd-roll-list { text-align: center; }
body.home-dark .hd-roll-list span { white-space: nowrap; }
body.home-dark .hd-roll-eyebrow { margin: 0 0 0.75rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
body.home-dark .hd-roll-list { margin: 0 auto; max-width: 900px; font-size: 0.95rem; line-height: 1.7; color: var(--mute); }
@media (max-width: 767px) {
  body.home-dark .hd-roll { padding: 2rem 0; }
  body.home-dark .hd-roll-list { font-size: 0.88rem; line-height: 1.6; }
}

/* ---------------------------------------------------------------- type helpers */
body.home-dark .hd-eyebrow { display: inline-block; margin: 0 0 1.25rem !important; padding: 0.35rem 0.85rem; border-radius: 999px; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hd-sky); box-shadow: inset 0 0 0 1px rgba(143, 184, 255, 0.3); background: rgba(143, 184, 255, 0.06); }
body.home-dark .hd-h2 span, body.home-dark .hd-hero h1 span { color: var(--hd-sky); }
body.home-dark .hd-h3 { font-size: clamp(2rem, 3.4vw, 3.1rem); letter-spacing: -0.04em; line-height: 1.04; }
body.home-dark .hd-tag { margin-bottom: 1rem !important; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hd-sky); }
body.home-dark .hd-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 2rem 0 0; padding: 0; }
body.home-dark .hd-chips li { padding: 0.5rem 1rem; border-radius: 999px; font-size: 0.95rem; font-weight: 500; color: var(--hd-soft); background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--hd-line-2); }
body.home-dark .hd-hero-note { margin-top: 1.5rem; font-size: 1rem; color: var(--mute); }
body.home-dark .hd-hero-note a { color: var(--text) !important; font-weight: 500; text-decoration: none !important; border-bottom: 1px solid var(--hd-line-2); }
body.home-dark .hd-hero-note a:hover { color: var(--hd-sky) !important; }

/* ---------------------------------------------------------------- browser-frame card */
/* Shared by the hero collage's site-capture tiles and the proof wall below: a plain
   3-dot browser bar over a real client site capture, so it reads as "a website we
   built" rather than another photo tile. */
body.home-dark .hd-browser { border-radius: 14px; overflow: hidden; background: #141a29; box-shadow: inset 0 0 0 1px var(--hd-line-2); }
body.home-dark .hd-browser-bar { display: flex; gap: 6px; padding: 9px 11px; background: #10151f; }
body.home-dark .hd-browser-bar span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
body.home-dark .hd-browser-img { display: block; aspect-ratio: 16 / 10; }
body.home-dark .hd-browser-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ---------------------------------------------------------------- proof wall */
body.home-dark .hd-wall { background: var(--bg-2); border-top: 1px solid var(--hd-line); border-bottom: 1px solid var(--hd-line); }
body.home-dark .hd-wall-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.5rem; margin-top: clamp(2.75rem, 5vw, 4rem); }
body.home-dark .hd-wall-card { margin: 0; }
body.home-dark .hd-wall-card:hover .hd-browser-img img { transform: scale(1.04); }
body.home-dark .hd-wall-card .hd-browser-img img { transition: transform 1.2s var(--hd-ease); }
body.home-dark .hd-wall-card figcaption { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.9rem; }
body.home-dark .hd-wall-name { font-weight: 700; font-size: 1.05rem; color: var(--text); letter-spacing: -0.01em; }
body.home-dark .hd-wall-trade { font-size: 0.9rem; color: var(--mute); }
body.home-dark .hd-wall-foot { margin-top: clamp(2.5rem, 4vw, 3.5rem); text-align: center; }
@media (max-width: 899px) {
  body.home-dark .hd-wall-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 559px) {
  body.home-dark .hd-wall-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 0.9rem; }
  body.home-dark .hd-wall-name { font-size: 0.92rem; }
  body.home-dark .hd-wall-trade { font-size: 0.8rem; }
}

/* ---------------------------------------------------------------- behind the scenes band */
body.home-dark .hd-bts { background: var(--bg-2); border-top: 1px solid var(--hd-line); border-bottom: 1px solid var(--hd-line); }
body.home-dark .hd-bts-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
body.home-dark .hd-bts-list { margin: 1.5rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
body.home-dark .hd-bts-list li { display: flex; align-items: center; font-size: 1rem; color: var(--mute); }
body.home-dark .hd-bts-list .dot { display: inline-block; flex: 0 0 auto; width: 7px; height: 7px; margin-right: 0.5rem; border-radius: 50%; background: #34d399; }
body.home-dark .hd-bts-copy .hd-link, body.home-dark .hd-bts-copy .hd-btn { margin-top: 1.75rem; }
body.home-dark .hd-bts-collage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
body.home-dark .hd-bts-collage figure { margin: 0; overflow: hidden; border-radius: 16px; background: var(--panel); aspect-ratio: 3 / 2; box-shadow: inset 0 0 0 1px var(--hd-line); }
body.home-dark .hd-bts-collage img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--hd-ease); }
body.home-dark .hd-bts-collage figure:hover img { transform: scale(1.05); }
@media (max-width: 899px) {
  body.home-dark .hd-bts-grid { display: block; }
  body.home-dark .hd-bts-collage { margin-top: 2.25rem; }
}
@media (max-width: 559px) {
  body.home-dark .hd-bts-collage { gap: 0.6rem; }
}

/* ---------------------------------------------------------------- four crafts */
/* 2x2 at >=900 (old layout: half-width cards, tall photos), single column below,
   per PM review of 43f0fb3: 4 narrow columns read too small. */
body.home-dark .hd-craft-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; margin-top: clamp(2.75rem, 5vw, 4rem); }
body.home-dark .hd-craft { display: flex; flex-direction: column; color: var(--text); text-decoration: none; }
body.home-dark .hd-craft .hd-core { aspect-ratio: 3 / 2; margin-bottom: 1.25rem; }
body.home-dark .hd-craft .hd-core img { transition: transform 1.2s var(--hd-ease); }
body.home-dark .hd-craft:hover .hd-core img { transform: scale(1.05); }
body.home-dark .hd-craft-num { margin-bottom: 0.6rem; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hd-sky); }
body.home-dark .hd-craft h3 { font-size: clamp(1.2rem, 1.5vw, 1.4rem); letter-spacing: -0.02em; line-height: 1.2; }
body.home-dark .hd-craft ul.hd-chips { margin-top: 1rem; gap: 0.5rem; }
body.home-dark .hd-craft ul.hd-chips li { padding: 0.4rem 0.8rem; font-size: 0.85rem; }
body.home-dark .hd-craft .hd-link { margin-top: 1.1rem; font-size: 0.95rem; }
@media (min-width: 900px) {
  body.home-dark .hd-craft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 2rem; }
  body.home-dark .hd-craft .hd-core { aspect-ratio: 3 / 2; }
  /* the social collage is a fixed 2x3 grid of faces with almost no headroom at its
     top edge (native ratio 1306x868 = 1.505:1, already ~3:2); a 16:9 crop slices the
     top-left face's hairline. Keep it near-native instead of forcing the wider crop. */
  body.home-dark .hd-craft--collage .hd-core { aspect-ratio: 3 / 2; }
}

/* ---------------------------------------------------------------- five-step timeline */
body.home-dark .hd-timeline-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(2.5rem, 5vw, 4rem); }
body.home-dark .hd-timeline-sticky { position: sticky; top: calc(var(--hdr) + 2rem); align-self: start; }
body.home-dark .hd-steps { display: grid; gap: 0; }
body.home-dark .hd-step { position: relative; display: flex; gap: 1.5rem; padding: 1.75rem 0; border-top: 1px solid var(--hd-line); }
body.home-dark .hd-step:last-child { border-bottom: 1px solid var(--hd-line); }
body.home-dark .hd-step-num { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--hd-blue); color: #fff; font-weight: 700; font-size: 0.95rem; box-shadow: 0 10px 30px -12px rgba(37, 99, 235, 0.7); }
body.home-dark .hd-step-body h3 { font-size: 1.3rem; letter-spacing: -0.025em; margin-bottom: 0.4rem; }
body.home-dark .hd-step-body p { color: var(--hd-soft); max-width: 48ch; }
@media (max-width: 899px) {
  body.home-dark .hd-timeline-grid { display: block; }
  body.home-dark .hd-timeline-sticky { position: static; margin-bottom: 2.5rem; }
}

/* ---------------------------------------------------------------- dream band */
body.home-dark .hd-dream { padding-top: clamp(3rem, 6vw, 5rem); }
body.home-dark .hd-dream-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; align-items: center; }
body.home-dark .hd-dream-copy { grid-column: 1 / 7; }
body.home-dark .hd-dream .hd-h2 { max-width: 14ch; }
body.home-dark .hd-outcomes { list-style: none; margin: clamp(2.25rem, 4vw, 3rem) 0 0; padding: 0; }
body.home-dark .hd-outcomes li { padding: 1.1rem 0; border-top: 1px solid var(--hd-line); font-size: clamp(1.4rem, 2.3vw, 2rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1.2; color: var(--text); }
body.home-dark .hd-outcomes li:last-child { border-bottom: 1px solid var(--hd-line); }
body.home-dark .hd-dream-line { margin-top: 1.75rem !important; max-width: 40ch; font-size: clamp(1.08rem, 1.3vw, 1.22rem); color: var(--hd-soft); }
body.home-dark .hd-dream .hd-ctas { margin-top: 2rem; }
body.home-dark .hd-dream-photo { grid-column: 8 / 13; }
body.home-dark .hd-dream-photo .hd-core { aspect-ratio: 4 / 5; }
@media (max-width: 767px) {
  body.home-dark .hd-dream-grid { display: block; }
  body.home-dark .hd-dream-photo { margin-top: 2.75rem; }
  body.home-dark .hd-dream-photo .hd-core { aspect-ratio: 4 / 3; }
}

/* ---------------------------------------------------------------- the two halves */
body.home-dark .hd-halves-head { padding-top: clamp(2rem, 4vw, 3.5rem); }
body.home-dark .hd-halves-head .hd-h2 { max-width: 20ch; }
body.home-dark .hd-half { padding-block: clamp(3.5rem, 7vw, 6rem); }
body.home-dark .hd-half-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; align-items: center; }
body.home-dark .hd-half-copy > p:not(.hd-tag) { margin-top: 1.25rem; max-width: 42ch; font-size: clamp(1.08rem, 1.3vw, 1.2rem); color: var(--hd-soft); }
body.home-dark .hd-half-copy .hd-link { margin-top: 2rem; }
body.home-dark .hd-half--biz { position: relative; overflow: hidden; background: var(--bg-2); border-block: 1px solid var(--hd-line); }
body.home-dark .hd-half--biz::before { content: ""; position: absolute; right: -10%; top: -40%; width: 60%; aspect-ratio: 1; background: radial-gradient(circle, var(--hd-glow), rgba(7, 10, 18, 0) 62%); pointer-events: none; }
body.home-dark .hd-half--biz::after { content: ""; position: absolute; inset: 0; background: image-set(url(/images/art-studio/tex-caustics-tile.webp) type("image/webp"), url(/images/art-studio/tex-caustics-tile.jpg) type("image/jpeg")) 0 0 / 520px repeat; opacity: 0.12; mix-blend-mode: screen; pointer-events: none; -webkit-mask-image: linear-gradient(to left, #000, transparent 75%); mask-image: linear-gradient(to left, #000, transparent 75%); }
body.home-dark .hd-half--biz .wrap { position: relative; z-index: 1; }
body.home-dark .hd-half--biz .hd-half-copy { grid-column: 1 / 6; }
body.home-dark .hd-smart .hd-half-copy { grid-column: 1 / 5; }
body.home-dark .hd-smart-phone { grid-column: 5 / 9; display: grid; justify-items: center; gap: 1rem; align-self: center; }
body.home-dark .hd-smart-phone .hd-phone { width: clamp(190px, 15vw, 230px); }
body.home-dark .hd-inflow { grid-column: 7 / 13; list-style: none; margin: 0; padding: 0; }
body.home-dark .hd-smart .hd-inflow { grid-column: 9 / 13; }
body.home-dark .hd-inflow li { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding: 1.35rem 0; border-top: 1px solid var(--hd-line); }
body.home-dark .hd-inflow li:last-child { border-bottom: 1px solid var(--hd-line); }
body.home-dark .hd-inflow li::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--hd-sky); transition: width 0.8s var(--hd-ease); }
body.home-dark .hd-inflow li:hover::before { width: 100%; }
body.home-dark .hd-inflow b { font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
body.home-dark .hd-inflow span { flex: none; font-size: 1rem; color: var(--hd-sky); text-align: right; }
@media (max-width: 899px) {
  body.home-dark .hd-half-grid { display: flex; flex-direction: column; align-items: stretch; gap: 2.5rem; }
  body.home-dark .hd-half--biz .hd-half-grid { flex-direction: column; }
  body.home-dark .hd-smart-phone .hd-phone { width: min(260px, 70vw); }
}
@media (max-width: 559px) {
  body.home-dark .hd-inflow li { flex-direction: column; gap: 0.3rem; padding: 1.1rem 0; }
  body.home-dark .hd-inflow span { text-align: left; }
}

/* ---------------------------------------------------------------- plans (no prices) */
body.home-dark .hd-plans { position: relative; overflow: hidden; }
body.home-dark .hd-plans::before { content: ""; position: absolute; left: 50%; top: 10%; width: 70%; aspect-ratio: 1; transform: translateX(-50%); background: radial-gradient(circle, rgba(56, 120, 255, 0.12), rgba(7, 10, 18, 0) 62%); pointer-events: none; }
body.home-dark .hd-plans .wrap { position: relative; }
body.home-dark .hd-plans-head { max-width: 820px; margin-inline: auto; text-align: center; }
body.home-dark .hd-plan-grid { display: grid; grid-template-columns: 1fr 1.08fr 1fr; gap: 1.25rem; align-items: stretch; margin-top: clamp(3rem, 5vw, 4.5rem); }
body.home-dark .hd-plan .hd-core { display: flex; flex-direction: column; height: 100%; padding: clamp(1.75rem, 2.6vw, 2.5rem); background: var(--panel); }
body.home-dark .hd-core img.hd-plan-art { display: block; width: 76px; height: 76px; margin: -0.5rem 0 1rem -0.5rem; object-fit: contain; filter: drop-shadow(0 12px 28px rgba(37, 99, 235, 0.25)); }
body.home-dark .hd-plan h3 { font-size: clamp(2rem, 2.8vw, 2.6rem); letter-spacing: -0.04em; }
body.home-dark .hd-plan-what { margin-top: 0.75rem !important; font-size: 1.15rem; line-height: 1.4; color: var(--text); max-width: 24ch; }
body.home-dark .hd-plan ul { list-style: none; display: grid; gap: 0.85rem; margin: 2rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid var(--hd-line); font-size: 1rem; color: var(--hd-soft); }
body.home-dark .hd-plan li { position: relative; padding-left: 1.4rem; }
body.home-dark .hd-plan li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 7px; height: 7px; border-radius: 50%; background: var(--hd-sky); }
body.home-dark .hd-plan--feature { background: linear-gradient(160deg, rgba(143, 184, 255, 0.45), rgba(37, 99, 235, 0.25) 40%, rgba(255, 255, 255, 0.05)); box-shadow: none; }
@media (min-width: 900px) {
  body.home-dark .hd-plan--feature.rv.in { transform: translateY(-12px); }
}
body.home-dark .hd-plan--feature .hd-core { background: linear-gradient(180deg, #121b30, #0f1522 60%); }
body.home-dark .hd-plan-tag { align-self: flex-start; margin-bottom: 1.25rem !important; padding: 0.3rem 0.8rem; border-radius: 999px; font-size: 0.85rem; font-weight: 500; color: var(--hd-sky); box-shadow: inset 0 0 0 1px rgba(143, 184, 255, 0.35); }
body.home-dark .hd-plans-foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.25rem 2rem; margin-top: 3.25rem; }
@media (max-width: 899px) {
  body.home-dark .hd-plan-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
}

/* ---------------------------------------------------------------- content: collage + phone */
body.home-dark .hd-content { background: var(--bg-2); border-top: 1px solid var(--hd-line); }
body.home-dark .hd-content-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem 2rem; align-items: end; }
body.home-dark .hd-content-head > div { grid-column: 1 / 8; }
body.home-dark .hd-content-head .hd-lede { grid-column: 8 / 13; margin: 0; }
body.home-dark .hd-show { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 4vw, 4rem); align-items: start; margin-top: clamp(2.75rem, 5vw, 4rem); }
/* feed grid: a plain 3x3 mosaic (restores the pre-revamp "feed that looks like you"
   layout, HOME-RESTORE-SPEC 2026-09-27), square tiles, at most 3 of the 9 are food. */
body.home-dark .hd-feed-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
body.home-dark .hd-feed-grid figure { margin: 0; overflow: hidden; border-radius: 14px; aspect-ratio: 1; background: var(--panel); box-shadow: inset 0 0 0 1px var(--hd-line); }
body.home-dark .hd-feed-grid img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--hd-ease); }
body.home-dark .hd-feed-grid figure:hover img { transform: scale(1.05); }

/* phone: a real frame around the real reel */
body.home-dark .hd-phone-col { position: sticky; top: calc(var(--hdr) + 2rem); display: grid; justify-items: center; gap: 1.1rem; }
body.home-dark .hd-phone {
  position: relative;
  width: clamp(270px, 25vw, 360px);
  aspect-ratio: 9 / 19;
  padding: 11px;
  border-radius: 54px;
  background: linear-gradient(150deg, #2a3246 0%, #11151f 45%, #1c2230 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    inset 0 0 0 4px #06080e,
    0 50px 120px -40px rgba(37, 99, 235, 0.55),
    0 30px 60px -24px rgba(0, 0, 0, 0.85);
}
body.home-dark .hd-phone::before, body.home-dark .hd-phone::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #2a3246; }
body.home-dark .hd-phone::before { right: -3px; top: 26%; height: 13%; }
body.home-dark .hd-phone::after { left: -3px; top: 20%; height: 18%; box-shadow: 0 -10% 0 #2a3246; }
body.home-dark .hd-phone-screen { position: relative; height: 100%; overflow: hidden; border-radius: 44px; background: #000; }
body.home-dark .hd-phone-screen video, body.home-dark .hd-phone-screen img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.home-dark .hd-smart-phone .hd-phone-screen img { object-position: top; }
body.home-dark .hd-phone-island { position: absolute; z-index: 2; top: 11px; left: 50%; width: 31%; height: 27px; transform: translateX(-50%); border-radius: 20px; background: #000; }
body.home-dark .hd-phone-bar { position: absolute; z-index: 2; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 0.5rem; padding: 50px 16px 22px; font-size: 0.85rem; font-weight: 700; color: #fff; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)); pointer-events: none; }
body.home-dark .hd-phone-bar img { width: 26px; height: 26px; border-radius: 50%; background: #fff; }
body.home-dark .hd-phone-cap { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); text-align: center; }
body.home-dark .hd-content-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; margin-top: clamp(2.5rem, 4vw, 3.5rem); }
body.home-dark .hd-content-foot .hd-chips { margin: 0; }

@media (max-width: 1023px) {
  body.home-dark .hd-content-head { display: block; }
  body.home-dark .hd-content-head .hd-lede { margin-top: 1.25rem; }
  /* phone first, as the centerpiece, then the gallery */
  body.home-dark .hd-show { display: flex; flex-direction: column-reverse; align-items: stretch; }
  body.home-dark .hd-phone-col { position: static; }
  body.home-dark .hd-phone { width: min(300px, 76vw); }
}
@media (max-width: 559px) {
  body.home-dark .hd-feed-grid { gap: 0.5rem; }
  body.home-dark .hd-feed-grid figure { border-radius: 10px; }
}

/* ---------------------------------------------------------------- studio */
body.home-dark .hd-studio-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; align-items: center; }
body.home-dark .hd-studio-copy { grid-column: 1 / 7; }
body.home-dark .hd-studio-lead { margin-top: 1.5rem !important; font-size: clamp(1.2rem, 1.8vw, 1.5rem); line-height: 1.45; letter-spacing: -0.015em; color: var(--hd-soft); max-width: 36ch; text-wrap: pretty; }
body.home-dark .hd-studio-copy .hd-link { margin-top: 2rem; }
body.home-dark .hd-studio-reach { margin-top: 1.25rem !important; max-width: 40ch; font-size: 1.05rem; color: var(--mute); }
body.home-dark .hd-studio-reach a[href^="tel"] { color: var(--text) !important; font-weight: 500; text-decoration: none !important; border-bottom: 1px solid var(--hd-line-2); }
body.home-dark .hd-own { grid-column: 8 / 13; }
body.home-dark .hd-own .hd-core { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 40%; align-items: center; gap: 1rem; padding: clamp(1.75rem, 3vw, 2.75rem); background: linear-gradient(160deg, #121b30, var(--panel) 60%); }
body.home-dark .hd-core img.hd-own-art { width: 100%; height: auto; aspect-ratio: 1200 / 1490; object-fit: cover; mix-blend-mode: screen; }
body.home-dark .hd-own-h { font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; }
body.home-dark .hd-own ul { list-style: none; display: grid; grid-template-columns: 1fr; gap: 0.9rem 1.5rem; margin: 1.75rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid var(--hd-line); color: var(--hd-soft); }
body.home-dark .hd-own li { position: relative; padding-left: 1.4rem; }
body.home-dark .hd-own li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 7px; height: 7px; border-radius: 50%; background: var(--hd-sky); }
@media (max-width: 899px) {
  body.home-dark .hd-studio-grid { display: block; }
  body.home-dark .hd-own { margin-top: 2.5rem; }
}
@media (max-width: 559px) {
  body.home-dark .hd-own .hd-core { grid-template-columns: minmax(0, 1fr) 30%; }
}

/* ---------------------------------------------------------------- faq */
body.home-dark .hd-faq { padding-top: 0; }
body.home-dark .hd-faq-inner { max-width: 860px; margin-inline: auto; }
body.home-dark .hd-faq .hd-h2 { text-align: center; }
body.home-dark .hd-faq-list { margin-top: 2.5rem; }
body.home-dark .hd-faq details { border-top: 1px solid var(--hd-line); }
body.home-dark .hd-faq details:last-child { border-bottom: 1px solid var(--hd-line); }
body.home-dark .hd-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.6rem 0; list-style: none; cursor: pointer; font-size: clamp(1.12rem, 1.5vw, 1.35rem); font-weight: 500; }
body.home-dark .hd-faq summary::-webkit-details-marker { display: none; }
body.home-dark .hd-faq summary i { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--hd-line-2); transition: background-color 0.3s var(--hd-ease); }
body.home-dark .hd-faq summary:hover i { background: rgba(255, 255, 255, 0.06); }
body.home-dark .hd-faq summary i::before, body.home-dark .hd-faq summary i::after { content: ""; position: absolute; left: 10px; top: 15px; width: 12px; height: 2px; border-radius: 2px; background: var(--text); transition: transform 0.4s var(--hd-ease); }
body.home-dark .hd-faq summary i::after { transform: rotate(90deg); }
body.home-dark .hd-faq details[open] summary i::after { transform: rotate(0deg); }
body.home-dark .hd-faq details p { padding: 0 3rem 1.75rem 0; color: var(--hd-soft); max-width: 60ch; }

/* ---------------------------------------------------------------- contact + form */
body.home-dark .hd-contact { background: var(--bg-2); border-top: 1px solid var(--hd-line); }
body.home-dark .hd-contact-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; align-items: start; }
body.home-dark .hd-contact-copy { grid-column: 1 / 6; position: sticky; top: calc(var(--hdr) + 2rem); }
body.home-dark .hd-contact-copy > p { margin-top: 1.25rem; font-size: 1.15rem; color: var(--hd-soft); }
body.home-dark .hd-contact-copy .hd-tel-label { margin-top: 2.75rem; font-size: 0.95rem; color: var(--mute); }
body.home-dark .hd-tel { display: inline-block; margin-top: 0.35rem; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: -0.03em; color: var(--text); text-decoration: none; font-variant-numeric: tabular-nums; transition: color 0.3s var(--hd-ease); }
body.home-dark .hd-tel:hover { color: var(--hd-sky); }
body.home-dark .hd-contact-wa { margin-top: 0.9rem !important; font-size: 1.05rem; }
body.home-dark .hd-contact-copy .hd-contact-where { margin-top: 1rem; font-size: 1rem; color: var(--mute); }
body.home-dark .hd-formwrap { grid-column: 7 / 13; }
body.home-dark .hd-formwrap .hd-core { padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--panel); }
@media (max-width: 899px) {
  body.home-dark .hd-contact-grid { display: block; }
  body.home-dark .hd-contact-copy { position: static; }
  body.home-dark .hd-formwrap { margin-top: 2.5rem; }
}
@media (max-width: 559px) { body.home-dark .hd-formwrap .hd-core { padding: 1.35rem 1.15rem; } }

/* the shared form (.tkf), re-themed */
body.home-dark .tkf { gap: 1.1rem 1rem; }
body.home-dark .tkf-label { font-size: 0.92rem; font-weight: 500; color: var(--hd-soft); }
body.home-dark .tkf-label .opt { font-weight: 400; color: var(--mute); }
body.home-dark .tkf-input {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--hd-line-2);
  color: var(--text);
  font-weight: 400;
  box-shadow: none;
  transition: border-color 0.3s var(--hd-ease), box-shadow 0.3s var(--hd-ease);
}
body.home-dark .tkf-input:hover { border-color: rgba(255, 255, 255, 0.28); }
body.home-dark .tkf-input:focus-visible { outline: none; border-color: var(--hd-sky); box-shadow: 0 0 0 3px rgba(143, 184, 255, 0.22); }
body.home-dark .tkf-input[aria-invalid="true"] { border-color: #ff9d9d; }
body.home-dark select.tkf-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 d='M1 1.5l5 5 5-5' fill='none' stroke='%23c9d2e0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; }
body.home-dark select.tkf-input option { background: #0f1522; color: #f2f5fa; }
body.home-dark .tkf-error { color: #ffb4b4; font-weight: 500; }
body.home-dark .tkf-status { color: var(--hd-sky); font-weight: 500; }
body.home-dark .tkf-actions { margin-top: 0.35rem; }
body.home-dark .tkf .btn-red {
  width: 100%;
  min-height: 3.25rem;
  padding: 0 1.6rem;
  border-radius: 999px;
  background: var(--hd-blue);
  color: #fff;
  font-family: var(--tk-sans);
  font-size: 1rem;
  font-weight: 500;
  box-shadow: 0 10px 40px -12px rgba(37, 99, 235, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  transition: transform 0.5s var(--hd-ease), background-color 0.3s var(--hd-ease);
}
body.home-dark .tkf .btn-red:hover { background: var(--hd-blue-press); }
body.home-dark .tkf .btn-red:active { transform: scale(0.98); }
body.home-dark .tkf-done h3 { color: var(--text); font-family: var(--tk-sans); font-weight: 700; }
body.home-dark .tkf-done p { color: var(--hd-soft); }

/* ---------------------------------------------------------------- footer (dark) */
body.home-dark footer.ft { background: var(--bg); border-top: 1px solid var(--hd-line); color: var(--hd-soft); font-size: 15px; line-height: 1.6; }
body.home-dark footer.ft .ft-wrap { max-width: var(--wrap); padding-top: clamp(4rem, 7vw, 6rem); }
body.home-dark footer.ft .ft-grid { gap: 2.5rem 2rem; padding-bottom: clamp(3rem, 5vw, 4rem); }
body.home-dark footer.ft .ft-mark img { height: 3.6rem; }
body.home-dark footer.ft .ft-tag { margin-top: 1.25rem; max-width: 28ch; font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--mute); }
body.home-dark footer.ft .ft-meta { margin-top: 1rem; font-size: 1rem; color: var(--mute); }
body.home-dark footer.ft .ft-phone { font-weight: 500; color: var(--text) !important; }
body.home-dark footer.ft .ft-h { margin-bottom: 0.9rem; font-size: 0.95rem; font-weight: 500; color: var(--mute); }
body.home-dark footer.ft .ft-col a { padding: 0.25rem 0; font-size: 1rem; font-weight: 400; color: var(--hd-soft) !important; }
body.home-dark footer.ft a:hover, body.home-dark footer.ft .ft-col a:hover { color: #fff !important; text-decoration: none; }
body.home-dark footer.ft .ft-base { padding-top: 1.5rem; border-top-color: var(--hd-line); font-size: 0.9rem; color: var(--mute); }
body.home-dark footer.ft .ft-legal a { font-size: 0.9rem; color: var(--mute) !important; }
body.home-dark footer.ft .ft-legal a:hover { color: #fff !important; }
/* photo path cards: the kicker sits over bright plates, so it goes white on a scrim */
body.home-dark .hd-path--photo .hd-path-k { color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7); }
body.home-dark .hd-path-h { text-wrap: balance; }
@media (max-width: 899px) {
  body.home-dark .hd-path--photo .hd-core::after { background: linear-gradient(to top, rgba(7, 10, 18, 0.96) 0%, rgba(7, 10, 18, 0.85) 48%, rgba(7, 10, 18, 0.35) 70%, rgba(7, 10, 18, 0) 86%); }
}

/* ---------------------------------------------------------------- work smarter band */
body.home-dark .hd-smart .hd-half-copy > p { margin-top: 1.25rem; }
body.home-dark .hd-own-strip { display: flex; align-items: center; gap: 1.25rem; max-width: 760px; margin: clamp(3rem, 5vw, 4rem) auto 0; padding: 1rem 1.5rem 1rem 1rem; border-radius: calc(var(--hd-r) + 6px); background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px var(--hd-line); }
body.home-dark .hd-own-strip img.hd-own-key { flex: none; width: 76px; height: auto; mix-blend-mode: screen; }
body.home-dark .hd-own-strip p { font-size: 1.02rem; color: var(--hd-soft); }
body.home-dark .hd-own-strip b { color: var(--text); font-weight: 700; }