/* 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 */
body.home-dark .hd-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: min(calc(100svh - var(--hdr)), 900px);
  overflow: hidden;
}
/* the snapper plate is anchored right and capped at its native width, so it is never
   upscaled soft on a wide screen; the left edge dissolves into the page */
body.home-dark .hd-hero-img { position: absolute; top: 0; bottom: 0; right: 0; width: min(100%, 1400px); z-index: -2; }
body.home-dark .hd-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 55%; transform: scale(1.04); animation: hdSettle 2.4s var(--hd-ease) forwards; }
@keyframes hdSettle { to { transform: scale(1); } }
body.home-dark .hd-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, var(--bg) 0%, rgba(7, 10, 18, 0.82) 24%, rgba(7, 10, 18, 0.2) 58%, rgba(7, 10, 18, 0.35) 100%),
    linear-gradient(90deg, var(--bg) 0%, rgba(7, 10, 18, 0.9) max(8%, calc(50% - 560px)), rgba(7, 10, 18, 0.5) 42%, rgba(7, 10, 18, 0) 68%);
}
body.home-dark .hd-hero-copy { width: 100%; padding-top: 8rem; padding-bottom: clamp(3.5rem, 7vw, 6rem); }
body.home-dark .hd-hero h1 { font-size: clamp(2.7rem, 5.8vw, 5.6rem); letter-spacing: -0.045em; line-height: 0.98; max-width: 12ch; }
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: 36ch; text-wrap: pretty; }
body.home-dark .hd-ctas { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.25rem; }
@media (min-width: 768px) and (max-width: 1023px) {
  /* tablet portrait: shorter hero, crop toward the snapper's head */
  body.home-dark .hd-hero { min-height: min(calc(100svh - var(--hdr)), 760px); }
  body.home-dark .hd-hero-img img { object-position: 22% 55%; }
}
@media (min-width: 1024px) {
  /* the plate sits right of the headline instead of under it, so the snapper's head
     and the lime are visible, not buried under type */
  body.home-dark .hd-hero { --hx: max(38%, calc(50% - 170px)); }
  body.home-dark .hd-hero-img { left: var(--hx); width: auto; }
  body.home-dark .hd-hero-img img { object-position: 12% 55%; }
  body.home-dark .hd-hero::before {
    background:
      linear-gradient(to top, var(--bg) 0%, rgba(7, 10, 18, 0.6) 16%, rgba(7, 10, 18, 0) 40%),
      linear-gradient(to bottom, rgba(7, 10, 18, 0.5) 0%, rgba(7, 10, 18, 0) 18%),
      linear-gradient(90deg, var(--bg) 0%, var(--bg) var(--hx), rgba(7, 10, 18, 0.6) calc(var(--hx) + 6%), rgba(7, 10, 18, 0) calc(var(--hx) + 20%));
  }
}
@media (prefers-reduced-motion: reduce) { body.home-dark .hd-hero-img img { animation: none; transform: none; } }
html[data-a11y-motion="reduced"] body.home-dark .hd-hero-img img { animation: none; transform: none; }

@media (max-width: 767px) {
  body.home-dark .hd-hero { display: block; min-height: 0; }
  body.home-dark .hd-hero-img { position: relative; width: 100%; aspect-ratio: 4 / 5; }
  body.home-dark .hd-hero-img img { object-position: 30% 50%; }
  body.home-dark .hd-hero::before { background: linear-gradient(to top, var(--bg) 0%, var(--bg) 36%, rgba(7, 10, 18, 0.55) 52%, rgba(7, 10, 18, 0) 70%); }
  body.home-dark .hd-hero-copy { position: relative; margin-top: -9.5rem; padding-top: 0; padding-bottom: 3.5rem; }
  body.home-dark .hd-hero h1 { font-size: clamp(2.6rem, 11.5vw, 3.4rem); }
  body.home-dark .hd-hero .hd-eyebrow { display: none; }
}

/* ---------------------------------------------------------------- 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; }

/* ---------------------------------------------------------------- paths bento */
body.home-dark .hd-paths { padding-top: clamp(4rem, 8vw, 7rem); }
body.home-dark .hd-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.25rem; margin-top: clamp(2.5rem, 4vw, 3.5rem); }
body.home-dark .hd-path { display: block; color: var(--text); text-decoration: none; transition: transform 0.6s var(--hd-ease); }
body.home-dark .hd-path:active { transform: scale(0.99); }
body.home-dark .hd-path .hd-core { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-height: 20rem; padding: clamp(1.5rem, 2.6vw, 2.25rem); background: var(--panel); isolation: isolate; }
body.home-dark .hd-path--a { grid-column: 1 / 8; }
body.home-dark .hd-path--b { grid-column: 8 / 13; }
body.home-dark .hd-path--c { grid-column: 1 / 6; }
body.home-dark .hd-path--d { grid-column: 6 / 13; }
body.home-dark .hd-path--photo .hd-core { min-height: clamp(22rem, 34vw, 30rem); }
body.home-dark .hd-path--photo img { position: absolute; inset: 0; z-index: -2; transition: transform 1.2s var(--hd-ease); }
body.home-dark .hd-path--photo .hd-core::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(7, 10, 18, 0.94) 0%, rgba(7, 10, 18, 0.78) 40%, rgba(7, 10, 18, 0.3) 60%, rgba(7, 10, 18, 0) 78%); }
body.home-dark .hd-path--a img { object-position: 50% 45%; }
body.home-dark .hd-path--b img { object-position: 50% 40%; }
body.home-dark .hd-path:hover img { transform: scale(1.04); }
body.home-dark .hd-path-copy { display: grid; gap: 0.5rem; }
body.home-dark .hd-path-h { font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; }
body.home-dark .hd-path-p { max-width: 34ch; color: var(--hd-soft); }
body.home-dark .hd-path-go { justify-self: start; margin-top: 0.75rem; padding-bottom: 2px; font-weight: 500; color: var(--hd-sky); border-bottom: 1px solid rgba(143, 184, 255, 0.45); transition: color 0.3s var(--hd-ease), border-color 0.3s var(--hd-ease); }
body.home-dark .hd-path:hover .hd-path-go { color: #fff; border-color: #fff; }
/* the two art cards: one smoked-glass object (images/art-studio) over a deep panel, never
   in place of real work; the photo cards carry the food */
body.home-dark .hd-path--art .hd-core { justify-content: space-between; gap: 1.5rem; background: radial-gradient(120% 90% at 85% 0%, rgba(37, 99, 235, 0.16), rgba(15, 21, 34, 0) 60%), linear-gradient(160deg, #121b30, var(--panel) 55%); }
body.home-dark .hd-core img.hd-path-art { align-self: flex-end; width: clamp(130px, 13vw, 190px); height: auto; margin: -0.75rem -0.75rem 0 0; object-fit: contain; filter: drop-shadow(0 18px 40px rgba(37, 99, 235, 0.25)); transition: transform 1.2s var(--hd-ease); }
body.home-dark .hd-path--art:hover .hd-path-art { transform: translateY(-4px) rotate(-3deg); }
body.home-dark .hd-path-k { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hd-sky); }
@media (prefers-reduced-motion: reduce) { body.home-dark .hd-path--art:hover .hd-path-art { transform: none; } }
@media (max-width: 899px) {
  body.home-dark .hd-path--a, body.home-dark .hd-path--b, body.home-dark .hd-path--c, body.home-dark .hd-path--d { grid-column: 1 / -1; }
  body.home-dark .hd-path--photo .hd-core { min-height: 24rem; }
  body.home-dark .hd-path--art .hd-core { min-height: 0; }
  body.home-dark .hd-core img.hd-path-art { width: 120px; }
}
@media (min-width: 560px) and (max-width: 899px) {
  body.home-dark .hd-path--c { grid-column: 1 / 7; }
  body.home-dark .hd-path--d { grid-column: 7 / 13; }
}

/* ---------------------------------------------------------------- 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--brand .hd-mosaic { grid-column: 1 / 8; }
body.home-dark .hd-half--brand .hd-half-copy { grid-column: 9 / 13; }
body.home-dark .hd-mosaic { display: grid; grid-template-columns: 1fr 1.35fr; grid-template-rows: auto auto; gap: 1rem; }
body.home-dark .hd-mosaic .hd-m1 { grid-row: 1 / 3; }
body.home-dark .hd-mosaic .hd-m1 .hd-core { height: 100%; }
body.home-dark .hd-mosaic .hd-m2 .hd-core { aspect-ratio: 3 / 2; }
body.home-dark .hd-mosaic .hd-m3 .hd-core { aspect-ratio: 3 / 2; }
body.home-dark .hd-mosaic .hd-m3 img { object-position: 50% 55%; }
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-inflow { grid-column: 7 / 13; list-style: none; margin: 0; padding: 0; }
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; }
}
@media (max-width: 559px) {
  body.home-dark .hd-mosaic { gap: 0.6rem; }
  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); }
body.home-dark .hd-collage {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: clamp(52px, 5.2vw, 76px);
  gap: 0.75rem;
  grid-template-areas:
    "a a a a b b"
    "a a a a b b"
    "a a a a b b"
    "c c d d e e"
    "c c d d e e"
    "c c d d e e"
    "f f f g g g"
    "f f f g g g"
    "f f f g g g";
}
body.home-dark .hd-collage figure { margin: 0; overflow: hidden; border-radius: 18px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--hd-line); }
body.home-dark .hd-collage img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--hd-ease); }
body.home-dark .hd-collage figure:hover img { transform: scale(1.04); }
body.home-dark .hd-collage figure:nth-child(1) { grid-area: a; }
body.home-dark .hd-collage figure:nth-child(2) { grid-area: b; }
body.home-dark .hd-collage figure:nth-child(3) { grid-area: c; }
body.home-dark .hd-collage figure:nth-child(4) { grid-area: d; }
body.home-dark .hd-collage figure:nth-child(5) { grid-area: e; }
body.home-dark .hd-collage figure:nth-child(6) { grid-area: f; }
body.home-dark .hd-collage figure:nth-child(7) { grid-area: g; }
body.home-dark .hd-collage figure:nth-child(3) img { object-position: 60% 50%; }

/* 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 { display: block; width: 100%; height: 100%; object-fit: cover; }
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: 767px) {
  body.home-dark .hd-collage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 40vw;
    gap: 0.6rem;
    grid-template-areas:
      "a a"
      "a a"
      "b c"
      "d e"
      "f f"
      "g g";
  }
  body.home-dark .hd-collage figure { border-radius: 14px; }
}

/* ---------------------------------------------------------------- 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%); }
}

/* ---------------------------------------------------------------- two pillars (2026-09-26, Andy: "We power brands") */
body.home-dark .hd-hero h1 { max-width: 10ch; }
body.home-dark .hd-h2--xl { font-size: clamp(3rem, 7vw, 6.4rem); letter-spacing: -0.05em; }
body.home-dark .hd-look { background: var(--bg); border-top: 0; }
body.home-dark .hd-look-row { margin-top: clamp(2.75rem, 5vw, 4rem); }
body.home-dark .hd-look-row + .hd-show { margin-top: clamp(3rem, 6vw, 5rem); }
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; }