/* =========================================================
   HOME v2 — editorial / minimal redesign
   Namespace: .tmh-* / .tm-home-*  |  Loaded only on home.php
   Principles:
     • Big confident typography over decoration
     • One dark "feature" section (pillars + triangle image)
     • Single accent (red #ec2024), used sparingly
     • Two motion primitives: fade-up reveal + image hover-zoom
     • Generous whitespace; asymmetric layouts
     • Honors prefers-reduced-motion
========================================================= */

:root {
  --tmh-red: #ec2024;
  --tmh-red-soft: #ff4f53;
  --tmh-bg: #ffffff;
  --tmh-bg-alt: #f7f7f7;
  --tmh-bg-alt-2: #efefef;
  --tmh-bg-dark: #0a0a0d;
  --tmh-bg-dark-2: #131318;
  --tmh-text: #0e0e10;
  --tmh-text-soft: #555560;
  --tmh-text-muted: #8a8a92;
  --tmh-text-on-dark: #ffffff;
  --tmh-text-on-dark-soft: #b8b8c0;
  --tmh-text-on-dark-muted: #80808a;
  --tmh-line: rgba(0, 0, 0, 0.08);
  --tmh-line-2: rgba(0, 0, 0, 0.14);
  --tmh-line-dark: rgba(255, 255, 255, 0.10);
  --tmh-line-dark-2: rgba(255, 255, 255, 0.18);
  --tmh-radius: 12px;
  --tmh-radius-lg: 20px;
  --tmh-radius-pill: 999px;
  --tmh-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tmh-section-y: 140px;
  --tmh-section-y-sm: 80px;
}

/* ===== KEYFRAMES (only what we use) ===== */
@keyframes tmh-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes tmh-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes tmh-float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

/* ===== PAGE WRAPPER ===== */
.tm-home {
  background: var(--tmh-bg);
  color: var(--tmh-text);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
.tm-home section { position: relative; }
.tm-home section + section { /* nothing — each section sets own padding */ }

/* Reveal-on-scroll utility */
.tmh-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--tmh-ease), transform 0.8s var(--tmh-ease);
  will-change: opacity, transform;
}
.tmh-reveal.is-in { opacity: 1; transform: translateY(0); }
.tmh-reveal[data-d="1"].is-in { transition-delay: 0.08s; }
.tmh-reveal[data-d="2"].is-in { transition-delay: 0.16s; }
.tmh-reveal[data-d="3"].is-in { transition-delay: 0.24s; }
.tmh-reveal[data-d="4"].is-in { transition-delay: 0.32s; }
.tmh-reveal[data-d="5"].is-in { transition-delay: 0.40s; }

/* ===== TYPOGRAPHY PRIMITIVES ===== */
.tmh-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: 'Urbanist', sans-serif;
  font-size: 12px; font-weight: 600;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--tmh-text-soft);
  margin: 0 0 22px;
}
.tmh-eyebrow::before {
  content: ""; width: 28px; height: 1px;
  background: var(--tmh-red);
}
.on-dark .tmh-eyebrow { color: var(--tmh-text-on-dark-soft); }

.tmh-h1, .tmh-h2 {
  font-family: 'Urbanist', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.04;
  margin: 0 0 24px;
  color: var(--tmh-text);
}
.tmh-h1 { font-size: clamp(2.5rem, 6.5vw, 5rem); }
.tmh-h2 { font-size: clamp(2.1rem, 4.5vw, 3.5rem); line-height: 1.08; }
.on-dark .tmh-h1, .on-dark .tmh-h2 { color: var(--tmh-text-on-dark); }
.tmh-h2 .tmh-accent { color: var(--tmh-red); }
.tmh-h2 .tmh-thin { font-weight: 200; }

.tmh-lede {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.7;
  color: var(--tmh-text-soft);
  max-width: 60ch;
  margin: 0;
}
.on-dark .tmh-lede { color: var(--tmh-text-on-dark-soft); }

/* ===== BUTTONS ===== */
.tmh-btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 28px;
  font-family: 'Urbanist', sans-serif;
  font-size: 15px; font-weight: 600;
  letter-spacing: 0.2px;
  border: 1px solid transparent;
  border-radius: var(--tmh-radius-pill);
  text-decoration: none; cursor: pointer;
  transition: transform 0.35s var(--tmh-ease),
              background 0.35s var(--tmh-ease),
              color 0.35s var(--tmh-ease),
              border-color 0.35s var(--tmh-ease);
  white-space: nowrap;
}
.tmh-btn:hover { transform: translateY(-2px); }
.tmh-btn .tmh-arr {
  display: inline-flex; transition: transform 0.4s var(--tmh-ease);
}
.tmh-btn:hover .tmh-arr { transform: translateX(5px); }

.tmh-btn-primary {
  background: var(--tmh-red);
  color: #fff; border-color: var(--tmh-red);
}
.tmh-btn-primary:hover { background: #ff2c30; color: #fff; border-color: #ff2c30; }

.tmh-btn-ghost {
  background: transparent;
  color: var(--tmh-text);
  border-color: var(--tmh-line-2);
}
.tmh-btn-ghost:hover {
  background: var(--tmh-text);
  color: #fff;
  border-color: var(--tmh-text);
}
.on-dark .tmh-btn-ghost { color: #fff; border-color: var(--tmh-line-dark-2); }
.on-dark .tmh-btn-ghost:hover { background: #fff; color: var(--tmh-text); border-color: #fff; }

/* Inline arrow link */
.tmh-arrlink {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Urbanist', sans-serif;
  font-size: 13px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--tmh-text);
  text-decoration: none;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.tmh-arrlink::after {
  content: ""; width: 28px; height: 1px;
  background: currentColor;
  transition: width 0.35s var(--tmh-ease);
}
.tmh-arrlink:hover::after { width: 44px; }
.on-dark .tmh-arrlink { color: #fff; }

/* =========================================================
   1. PRESS / TRUST STRIP
========================================================= */
.tm-home-trust {
  padding: 72px 0 48px;
  background: var(--tmh-bg);
  border-bottom: 1px solid var(--tmh-line);
}
.tm-home-trust-label {
  text-align: center;
  font-size: 12px; font-weight: 600;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--tmh-text-muted);
  margin: 0 0 32px;
}
.tm-home-trust-marquee {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.tm-home-trust-track {
  display: flex; align-items: center; gap: 84px;
  width: max-content;
  animation: tmh-marquee 42s linear infinite;
}
.tm-home-trust:hover .tm-home-trust-track { animation-play-state: paused; }
.tm-home-trust-track .tmh-press {
  flex-shrink: 0; height: 32px;
  display: flex; align-items: center;
  filter: grayscale(1);
  opacity: 0.55;
  transition: filter 0.3s var(--tmh-ease), opacity 0.3s var(--tmh-ease);
}
.tm-home-trust-track .tmh-press:hover { filter: grayscale(0); opacity: 1; }
.tm-home-trust-track .tmh-press img { max-height: 100%; width: auto; display: block; }

/* =========================================================
   2. THREE PILLARS — anchored by triangle image (DARK FEATURE)
========================================================= */
.tm-home-pillars {
  padding: var(--tmh-section-y) 0;
  background: var(--tmh-bg-dark);
  color: var(--tmh-text-on-dark);
}
.tm-home-pillars.on-dark { color: var(--tmh-text-on-dark); }
/* SCROLL-PIN WRAPPER
   Gives the section ~2.5x viewport-height of scroll distance so the
   inner section can be `position: sticky` and "pin" while the
   user's scroll advances the active tab. After all 3 tabs have been
   shown, the wrapper exits and natural scrolling resumes.
   Disabled on tablet/mobile + reduced-motion (where the pin-and-
   advance pattern feels jarring or breaks the layout).

   IMPORTANT: common.css has `.main { overflow: hidden }`, which makes
   <main> a containing block for sticky and breaks pinning entirely.
   Replace it with `overflow-x: clip` (clip does not create a sticky
   containing block) so the home page can still horizontally clip
   bleeds without disabling sticky. Scoped to body.home so other
   templates are untouched. */
body.home main.main {
  overflow: visible;
  overflow-x: clip;
}
.tm-home-pillars-wrap {
  position: relative;
  min-height: 250vh;     /* 100vh sticky + 150vh of pinned scroll = 3 tab beats */
}
.tm-home-pillars-wrap > .tm-home-pillars {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
}
@media (max-width: 991px) {
  .tm-home-pillars-wrap { min-height: 0; }
  .tm-home-pillars-wrap > .tm-home-pillars {
    position: static;
    min-height: 0;
    padding: var(--tmh-section-y) 0;
    display: block;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tm-home-pillars-wrap { min-height: 0; }
  .tm-home-pillars-wrap > .tm-home-pillars {
    position: static;
    min-height: 0;
    padding: var(--tmh-section-y) 0;
    display: block;
  }
}

/* OUTER layout: 8/4 split per the legacy markup. Left column holds
   the heading + tab/panel combo, right column holds the triangle
   image full-height. Matches `.col-lg-8 / .col-lg-4` from the live
   site exactly. */
.tm-home-pillars-stage {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 991px) {
  .tm-home-pillars-stage { grid-template-columns: 1fr; gap: 36px; }
}

/* LEFT column wrapper — heading sits on top, tab+panel grid below */
.tm-home-pillars-left {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.tm-home-pillars-head {
  /* heading (eyebrow + h2) inside the left col, no longer full-width */
  max-width: 100%;
}

/* The tab+panel sub-grid: vertical tabs on the left, panel on the right */
.tm-home-pillars-inner {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 767px) {
  .tm-home-pillars-inner { grid-template-columns: 1fr; gap: 32px; }
}

/* === LEFT: vertical tab list with huge bold labels === */
.tm-home-pillars-tabs {
  display: flex;
  flex-direction: column;
  gap: 18px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.tmh-pillar-tab {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: 'Urbanist', sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  /* Inactive uses a desaturated version of the tab's tint so the
     three colours read as a soft triad even at rest, then bloom to
     full saturation on hover/active. Each tab gets its own --tint
     inline (salmon / sky-blue / gold). */
  color: rgba(255, 255, 255, 0.28);
  transition: color 0.4s var(--tmh-ease), transform 0.4s var(--tmh-ease);
}
.tmh-pillar-tab:hover {
  color: var(--tint, rgba(255, 255, 255, 0.65));
  opacity: 0.85;
}
.tmh-pillar-tab.is-active {
  color: var(--tint, #ffffff);
  opacity: 1;
}
.tmh-pillar-tab.is-active::after {
  content: "";
  display: block;
  width: 36px;
  height: 2px;
  background: var(--tint, var(--tmh-red));
  margin-top: 10px;
}

/* === MIDDLE: panel content (description + CTA), only active visible === */
.tm-home-pillars-panels {
  position: relative;
  min-height: 280px;
}
@media (max-width: 767px) { .tm-home-pillars-panels { min-height: 0; } }

.tmh-pillar-panel {
  display: none;
  max-width: 56ch;
}
.tmh-pillar-panel.is-active {
  display: block;
  animation: tmh-pillar-fade 0.5s var(--tmh-ease);
}
@keyframes tmh-pillar-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tmh-pillar-panel p {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 32px;
}
.tmh-pillar-panel-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  background: var(--tmh-red);
  color: #fff;
  font-family: 'Urbanist', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border-radius: 999px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background 0.3s var(--tmh-ease), gap 0.3s var(--tmh-ease), transform 0.3s var(--tmh-ease);
}
.tmh-pillar-panel-cta:hover {
  background: #ff2c30;
  color: #fff;
  gap: 14px;
  transform: translateY(-2px);
}
.tmh-pillar-panel-cta svg { width: 18px; height: 18px; }

/* === RIGHT: triangle image === */
.tm-home-pillars-image {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 12px;
}
.tm-home-pillars-image::before {
  content: ""; position: absolute;
  width: 80%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(236,32,36,0.18), transparent 65%);
  filter: blur(50px);
  z-index: 0;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.tm-home-pillars-image img {
  position: relative; z-index: 1;
  max-width: 480px; width: 100%; height: auto;
  display: block;
  animation: tmh-float-y 8s ease-in-out infinite;
}
@media (max-width: 991px) {
  .tm-home-pillars-image img { max-width: 380px; }
}
@media (prefers-reduced-motion: reduce) {
  .tm-home-pillars-image img { animation: none; }
  .tmh-pillar-panel.is-active { animation: none; }
}

/* =========================================================
   3. CAPABILITIES — editorial numbered rows
========================================================= */
.tm-home-cap {
  padding: var(--tmh-section-y) 0;
  background: var(--tmh-bg);
}
.tm-home-cap-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 80px;
}
@media (max-width: 991px) {
  .tm-home-cap-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 56px; }
}

.tm-home-cap-list {
  list-style: none;
  padding: 0; margin: 0;
  border-top: 1px solid var(--tmh-line);
}
.tmh-cap-row {
  display: grid;
  grid-template-columns: 80px 1.2fr 2fr auto;
  gap: 24px;
  align-items: center;
  padding: 32px 0;
  border-bottom: 1px solid var(--tmh-line);
  text-decoration: none;
  color: var(--tmh-text);
  position: relative;
  transition: padding 0.45s var(--tmh-ease);
  cursor: pointer;
}
.tmh-cap-row::after {
  content: ""; position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--tmh-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--tmh-ease);
}
.tmh-cap-row:hover { padding-left: 16px; padding-right: 16px; color: var(--tmh-text); }
.tmh-cap-row:hover::after { transform: scaleX(1); }
.tmh-cap-num {
  font-family: 'Urbanist', sans-serif;
  font-size: 13px; font-weight: 600;
  letter-spacing: 2.5px;
  color: var(--tmh-text-muted);
}
.tmh-cap-title {
  font-family: 'Urbanist', sans-serif;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 600; line-height: 1.2;
  margin: 0;
  letter-spacing: -0.01em;
}
.tmh-cap-desc {
  font-size: 15px; line-height: 1.6;
  color: var(--tmh-text-soft);
  margin: 0;
  max-width: 52ch;
}
.tmh-cap-arr {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--tmh-bg-alt);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.4s var(--tmh-ease), transform 0.4s var(--tmh-ease);
}
.tmh-cap-arr svg { width: 18px; height: 18px; }
.tmh-cap-row:hover .tmh-cap-arr {
  background: var(--tmh-red);
  transform: rotate(-45deg);
}
.tmh-cap-row:hover .tmh-cap-arr svg path { stroke: #fff; }
@media (max-width: 991px) {
  .tmh-cap-row { grid-template-columns: 56px 1fr; grid-template-rows: auto auto; row-gap: 12px; }
  .tmh-cap-num { grid-column: 1; grid-row: 1; }
  .tmh-cap-title { grid-column: 2; grid-row: 1; }
  .tmh-cap-desc { grid-column: 1 / -1; grid-row: 2; }
  .tmh-cap-arr { display: none; }
}

/* =========================================================
   4. STATS — clean, type-led
========================================================= */
.tm-home-stats {
  padding: var(--tmh-section-y-sm) 0;
  background: var(--tmh-bg-alt);
  border-top: 1px solid var(--tmh-line);
  border-bottom: 1px solid var(--tmh-line);
}
.tm-home-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
@media (max-width: 767px) { .tm-home-stats-grid { grid-template-columns: repeat(2, 1fr); } }

.tmh-stat {
  padding: 12px 24px;
  text-align: left;
  border-right: 1px solid var(--tmh-line);
}
.tmh-stat:last-child { border-right: 0; }
@media (max-width: 767px) {
  .tmh-stat { padding: 24px; }
  .tmh-stat:nth-child(2n) { border-right: 0; }
  .tmh-stat:nth-child(-n+2) { border-bottom: 1px solid var(--tmh-line); }
}
.tmh-stat-num {
  font-family: 'Urbanist', sans-serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 200;
  line-height: 1;
  color: var(--tmh-text);
  margin: 0 0 12px;
  letter-spacing: -0.03em;
  display: block;
}
.tmh-stat-num .tmh-stat-suffix { color: var(--tmh-red); font-weight: 400; }
.tmh-stat-label {
  font-size: 14px;
  color: var(--tmh-text-soft);
  line-height: 1.5;
  display: block;
}

/* =========================================================
   5. FEATURED WORK — image-led editorial cards
========================================================= */
.tm-home-work {
  padding: var(--tmh-section-y) 0;
  background: var(--tmh-bg);
}
.tm-home-work-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: end;
  margin-bottom: 64px;
}
@media (max-width: 767px) { .tm-home-work-head { grid-template-columns: 1fr; } }

.tm-home-work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
@media (max-width: 767px) { .tm-home-work-grid { grid-template-columns: 1fr; gap: 22px; } }

.tmh-case {
  display: block;
  text-decoration: none;
  color: var(--tmh-text);
}
.tmh-case-img {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  border-radius: var(--tmh-radius-lg);
  background: var(--tmh-bg-alt);
  margin-bottom: 22px;
}
.tmh-case-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--tmh-ease);
}
.tmh-case:hover .tmh-case-img img { transform: scale(1.05); }
.tmh-case-tag {
  position: absolute;
  top: 18px; left: 18px;
  padding: 7px 14px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--tmh-radius-pill);
  font-size: 11px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--tmh-text);
}
.tmh-case-meta {
  display: flex; gap: 16px; align-items: center;
  font-size: 12px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--tmh-text-muted);
  margin-bottom: 12px;
}
.tmh-case-meta .tmh-case-meta-dot { width: 4px; height: 4px; background: var(--tmh-text-muted); border-radius: 50%; }
.tmh-case-title {
  font-family: 'Urbanist', sans-serif;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-weight: 600; line-height: 1.2;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.tmh-case-desc {
  font-size: 15px; line-height: 1.6;
  color: var(--tmh-text-soft);
  margin: 0;
  max-width: 56ch;
}

/* =========================================================
   6. TESTIMONIALS — quote-first, big type, twin Swiper
========================================================= */
.tm-home-tx {
  padding: var(--tmh-section-y) 0;
  background: var(--tmh-bg-alt);
  border-top: 1px solid var(--tmh-line);
}
.tm-home-tx-head { margin-bottom: 56px; max-width: 720px; }

.tm-home-tx-shell {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 991px) {
  .tm-home-tx-shell { grid-template-columns: 1fr; gap: 40px; }
}

.tmh-tx-quote {
  position: relative;
  padding-top: 12px;
}
.tmh-tx-quote::before {
  content: "\201C";
  font-family: 'Urbanist', sans-serif;
  position: absolute;
  top: -42px; left: -8px;
  font-size: 140px;
  line-height: 1; font-weight: 700;
  color: var(--tmh-red);
  opacity: 0.18;
  pointer-events: none;
}
.tmh-tx-quote .swiper { width: 100%; }
.tmh-tx-q {
  font-family: 'Urbanist', sans-serif;
  font-size: clamp(1.2rem, 2.2vw, 1.65rem);
  font-weight: 400; line-height: 1.5;
  color: var(--tmh-text);
  margin: 0 0 32px;
  letter-spacing: -0.01em;
}
.tmh-tx-name {
  font-family: 'Urbanist', sans-serif;
  font-size: 18px; font-weight: 700;
  color: var(--tmh-text);
  margin: 0 0 4px;
}
.tmh-tx-role {
  font-size: 13px;
  color: var(--tmh-text-soft);
  letter-spacing: 0.5px;
  margin: 0;
}

.tmh-tx-controls {
  display: flex; align-items: center; gap: 16px;
  margin-top: 40px;
}
.tmh-tx-btn {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--tmh-line-2);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.3s var(--tmh-ease), border-color 0.3s var(--tmh-ease);
}
.tmh-tx-btn:hover {
  background: var(--tmh-text); border-color: var(--tmh-text);
}
.tmh-tx-btn:hover svg path { stroke: #fff; }
.tmh-tx-pag {
  font-family: 'Urbanist', sans-serif;
  font-size: 14px; font-weight: 600;
  color: var(--tmh-text-soft);
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
}

.tm-home-tx-media {
  position: relative;
}
.tm-home-tx-media .swiper-slide {
  border-radius: var(--tmh-radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  position: relative;
  background: var(--tmh-bg-dark);
}
.tm-home-tx-media .swiper-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--tmh-ease);
}
.tm-home-tx-media .swiper-slide-active img { transform: scale(1.03); }
.tmh-tx-play {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: flex-end;
  padding: 28px;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.5) 100%);
  border: 0; cursor: pointer;
  transition: background 0.4s var(--tmh-ease);
}
.tmh-tx-play:hover { background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.65) 100%); }
.tmh-tx-play .tmh-tx-pcircle {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,0.96);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.4s var(--tmh-ease);
  box-shadow: 0 12px 28px rgba(0,0,0,0.25);
}
.tmh-tx-play:hover .tmh-tx-pcircle { transform: scale(1.08); }
.tmh-tx-play .tmh-tx-pcircle::after {
  content: "";
  width: 0; height: 0;
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--tmh-red);
  margin-left: 5px;
}

/* =========================================================
   7. HOW WE WORK — 4 engagement models
========================================================= */
.tm-home-how {
  padding: var(--tmh-section-y) 0;
  background: var(--tmh-bg);
}
.tm-home-how-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 64px;
}
@media (max-width: 991px) {
  .tm-home-how-head { grid-template-columns: 1fr; gap: 24px; }
}

.tm-home-how-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--tmh-line);
  border-bottom: 1px solid var(--tmh-line);
}
@media (max-width: 991px) { .tm-home-how-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .tm-home-how-grid { grid-template-columns: 1fr; } }

.tmh-how {
  padding: 36px 28px;
  border-right: 1px solid var(--tmh-line);
  display: flex; flex-direction: column;
  position: relative;
  transition: background 0.4s var(--tmh-ease);
  text-decoration: none;
  color: inherit;
}
.tm-home-how-grid .tmh-how:last-child { border-right: 0; }
@media (max-width: 991px) {
  .tmh-how:nth-child(2n) { border-right: 0; }
  .tmh-how:nth-child(-n+2) { border-bottom: 1px solid var(--tmh-line); }
}
@media (max-width: 575px) {
  .tmh-how { border-right: 0; border-bottom: 1px solid var(--tmh-line); }
  .tmh-how:last-child { border-bottom: 0; }
}
.tmh-how:hover { background: var(--tmh-bg-alt); }
.tmh-how-num {
  font-family: 'Urbanist', sans-serif;
  font-size: 13px; font-weight: 600;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--tmh-red);
  margin-bottom: 56px;
}
.tmh-how-title {
  font-family: 'Urbanist', sans-serif;
  font-size: 22px; font-weight: 600;
  line-height: 1.25;
  margin: 0 0 12px;
  color: var(--tmh-text);
}
.tmh-how-desc {
  font-size: 14px; line-height: 1.65;
  color: var(--tmh-text-soft);
  margin: 0 0 32px;
  flex: 1;
}
.tmh-how-cta {
  font-family: 'Urbanist', sans-serif;
  font-size: 12px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--tmh-text);
  display: inline-flex; align-items: center; gap: 10px;
  border: 0; background: 0; padding: 0; cursor: pointer;
  transition: gap 0.3s var(--tmh-ease), color 0.3s var(--tmh-ease);
  align-self: flex-start;
}
.tmh-how:hover .tmh-how-cta { gap: 14px; color: var(--tmh-red); }
.tmh-how:hover .tmh-how-cta svg path { stroke: var(--tmh-red); }

/* =========================================================
   8. CONTACT — clean two-column
========================================================= */
.tm-home-contact {
  padding: var(--tmh-section-y) 0;
  background: var(--tmh-bg-alt);
  border-top: 1px solid var(--tmh-line);
}
.tm-home-contact-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 64px;
}
@media (max-width: 991px) {
  .tm-home-contact-head { grid-template-columns: 1fr; gap: 24px; }
}

.tm-home-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: stretch;
}
@media (max-width: 991px) { .tm-home-contact-grid { grid-template-columns: 1fr; } }

.tmh-contact-info {
  padding: 40px;
  background: #fff;
  border: 1px solid var(--tmh-line);
  border-radius: var(--tmh-radius-lg);
  display: flex; flex-direction: column;
}
.tmh-contact-info h3 {
  font-family: 'Urbanist', sans-serif;
  font-size: 22px; font-weight: 600;
  margin: 0 0 28px;
  color: var(--tmh-text);
}
.tmh-contact-list {
  list-style: none;
  padding: 0; margin: 0 0 32px;
  display: flex; flex-direction: column; gap: 22px;
}
.tmh-contact-list li {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 20px;
  align-items: start;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--tmh-line);
}
.tmh-contact-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.tmh-contact-list .tmh-c-label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--tmh-text-muted);
  padding-top: 4px;
}
.tmh-contact-list a {
  font-size: 15px; line-height: 1.55;
  color: var(--tmh-text);
  text-decoration: none;
  transition: color 0.3s var(--tmh-ease);
}
.tmh-contact-list a:hover { color: var(--tmh-red); }

.tmh-contact-social {
  margin-top: auto;
  display: flex; gap: 10px;
  padding-top: 32px;
  border-top: 1px solid var(--tmh-line);
}
.tmh-contact-social a {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--tmh-bg-alt);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  transition: background 0.3s var(--tmh-ease), transform 0.3s var(--tmh-ease);
}
.tmh-contact-social a:hover { background: var(--tmh-red); transform: translateY(-2px); }
.tmh-contact-social svg { width: 16px; height: 16px; fill: var(--tmh-text); transition: fill 0.3s var(--tmh-ease); }
.tmh-contact-social a:hover svg { fill: #fff; }

.tmh-form-card {
  padding: 40px;
  background: #fff;
  border: 1px solid var(--tmh-line);
  border-radius: var(--tmh-radius-lg);
}
.tmh-form-card h3 {
  font-family: 'Urbanist', sans-serif;
  font-size: 22px; font-weight: 600;
  margin: 0 0 8px;
}
.tmh-form-sub {
  font-size: 15px;
  color: var(--tmh-text-soft);
  margin: 0 0 28px;
}
.tmh-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.tmh-form .tmh-form-full { grid-column: span 2; }
@media (max-width: 575px) {
  .tmh-form { grid-template-columns: 1fr; }
  .tmh-form .tmh-form-full { grid-column: span 1; }
}
.tmh-form-input { position: relative; }
.tmh-form-input input,
.tmh-form-input textarea {
  width: 100%;
  padding: 16px 0 14px;
  border: 0;
  border-bottom: 1px solid var(--tmh-line-2);
  background: transparent;
  font-family: 'Urbanist', sans-serif;
  font-size: 15px;
  color: var(--tmh-text);
  outline: none;
  transition: border-color 0.3s var(--tmh-ease);
  border-radius: 0;
}
.tmh-form-input textarea { resize: vertical; min-height: 80px; padding-top: 12px; }
.tmh-form-input input::placeholder,
.tmh-form-input textarea::placeholder { color: var(--tmh-text-muted); }
.tmh-form-input input:focus,
.tmh-form-input textarea:focus {
  border-color: var(--tmh-red);
}
.tmh-form-input .error-message {
  display: block;
  font-size: 12px;
  color: var(--tmh-red);
  margin-top: 6px;
  min-height: 16px;
}
.tmh-form-check {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px;
  color: var(--tmh-text-soft);
  user-select: none;
}
.tmh-form-check input {
  width: 18px; height: 18px;
  accent-color: var(--tmh-red);
  cursor: pointer;
}
.tmh-form-submit {
  border: 0;
  padding: 16px 32px;
  background: var(--tmh-red);
  color: #fff;
  border-radius: var(--tmh-radius-pill);
  font-family: 'Urbanist', sans-serif;
  font-size: 15px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 12px;
  cursor: pointer;
  transition: transform 0.3s var(--tmh-ease), background 0.3s var(--tmh-ease);
}
.tmh-form-submit:hover { background: #ff2c30; transform: translateY(-2px); }
.tmh-form-submit svg { transition: transform 0.3s var(--tmh-ease); }
.tmh-form-submit:hover svg { transform: translateX(4px); }

/* =========================================================
   9. FAQ + BLOG TABS
========================================================= */
.tm-home-faq {
  padding: var(--tmh-section-y) 0;
  background: var(--tmh-bg);
}
.tm-home-faq-head {
  text-align: center;
  margin-bottom: 40px;
  max-width: 640px;
  margin-left: auto; margin-right: auto;
}
.tm-home-faq-head .tmh-eyebrow { justify-content: center; }
.tm-home-faq-head .tmh-eyebrow::before { display: none; }
.tm-home-faq-head .tmh-eyebrow::after {
  content: ""; width: 28px; height: 1px; background: var(--tmh-red);
  margin-left: 12px;
}
.tm-home-faq-head .tmh-eyebrow {
  display: inline-flex; gap: 0;
}
.tm-home-faq-head .tmh-eyebrow::before {
  content: ""; display: inline-block;
  width: 28px; height: 1px;
  background: var(--tmh-red);
  margin-right: 12px;
}

.tm-home-faq-tabs {
  display: inline-flex;
  background: var(--tmh-bg-alt);
  border: 1px solid var(--tmh-line);
  border-radius: var(--tmh-radius-pill);
  padding: 5px;
  margin: 0 auto 56px;
  position: relative;
  left: 50%; transform: translateX(-50%);
  gap: 4px;
}
.tm-home-faq-tabs button {
  border: 0; background: transparent;
  font-family: 'Urbanist', sans-serif;
  font-size: 13px; font-weight: 600;
  color: var(--tmh-text-soft);
  padding: 11px 26px;
  border-radius: var(--tmh-radius-pill);
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: background 0.35s var(--tmh-ease), color 0.35s var(--tmh-ease);
}
.tm-home-faq-tabs button.is-on {
  background: var(--tmh-text);
  color: #fff;
}

.tm-home-faq-panel { display: none; }
.tm-home-faq-panel.is-on {
  display: block;
  animation: tmh-fade-in 0.5s var(--tmh-ease);
}

.tm-home-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 767px) { .tm-home-faq-grid { grid-template-columns: 1fr; } }

.tmh-faq {
  background: #fff;
  border: 1px solid var(--tmh-line);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.3s var(--tmh-ease);
}
.tmh-faq.is-open { border-color: var(--tmh-line-2); }
.tmh-faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 22px 24px;
  border: 0; background: transparent;
  cursor: pointer;
  font-family: 'Urbanist', sans-serif;
  font-size: 16px; font-weight: 600;
  color: var(--tmh-text);
  text-align: left;
  line-height: 1.4;
}
.tmh-faq-icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  position: relative;
  border-radius: 50%;
  background: var(--tmh-bg-alt);
  transition: background 0.3s var(--tmh-ease);
}
.tmh-faq-icon::before,
.tmh-faq-icon::after {
  content: ""; position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 1.5px;
  background: var(--tmh-text);
  transform: translate(-50%, -50%);
  transition: transform 0.4s var(--tmh-ease), background 0.3s var(--tmh-ease);
}
.tmh-faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.tmh-faq.is-open .tmh-faq-icon { background: var(--tmh-red); }
.tmh-faq.is-open .tmh-faq-icon::before,
.tmh-faq.is-open .tmh-faq-icon::after { background: #fff; }
.tmh-faq.is-open .tmh-faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }

.tmh-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--tmh-ease);
}
.tmh-faq-a-inner {
  padding: 0 24px 24px;
  font-size: 15px; line-height: 1.7;
  color: var(--tmh-text-soft);
}
.tmh-faq.is-open .tmh-faq-a { max-height: 600px; }

/* Blog grid */
.tm-home-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1180px;
  margin: 0 auto;
}
@media (max-width: 991px) { .tm-home-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .tm-home-blog-grid { grid-template-columns: 1fr; } }

.tmh-blog {
  display: block;
  padding: 28px 26px;
  background: #fff;
  border: 1px solid var(--tmh-line);
  border-radius: 14px;
  text-decoration: none;
  color: var(--tmh-text);
  transition: border-color 0.4s var(--tmh-ease), transform 0.4s var(--tmh-ease);
  min-height: 180px;
  display: flex; flex-direction: column;
  justify-content: space-between;
}
.tmh-blog:hover {
  transform: translateY(-3px);
  border-color: var(--tmh-line-2);
  color: var(--tmh-text);
}
.tmh-blog-cat {
  font-family: 'Urbanist', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--tmh-red);
  margin-bottom: 14px;
  display: block;
}
.tmh-blog-title {
  font-family: 'Urbanist', sans-serif;
  font-size: 17px; font-weight: 600;
  line-height: 1.4;
  margin: 0 0 24px;
  letter-spacing: -0.01em;
  color: var(--tmh-text);
}
.tmh-blog-foot {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--tmh-text-muted);
  margin-top: auto;
  transition: color 0.3s var(--tmh-ease), gap 0.3s var(--tmh-ease);
}
.tmh-blog:hover .tmh-blog-foot { color: var(--tmh-red); gap: 12px; }

/* =========================================================
   SERVICES — AURORA GLASS BENTO
   Soft animated mesh-gradient background (cream + peach + a
   blush of brand red) with frosted-glass cards floating on
   top. The cards are quiet at rest; on hover, a gradient
   border lights up in the brand red and the card lifts.
   Modern + elegant — no marquees, no parallax, no scatter.
========================================================= */
@keyframes tmh-aurora-drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(60px, -40px, 0) scale(1.06); }
}
@keyframes tmh-aurora-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-50px, 50px, 0) scale(0.94); }
}
@keyframes tmh-aurora-drift-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(40px, 30px, 0) scale(1.04); }
}

.tm-home-aurora {
  position: relative;
  padding: var(--tmh-section-y) 0 calc(var(--tmh-section-y) - 20px);
  background:
    radial-gradient(60% 80% at 50% 0%,   rgba(255, 232, 220, 0.55), transparent 65%),
    radial-gradient(50% 60% at 100% 100%,rgba(255, 215, 200, 0.40), transparent 65%),
    linear-gradient(180deg, #fdf9f4 0%, #fff7f0 100%);
  color: var(--tmh-text);
  overflow: hidden;
  isolation: isolate;
}

/* Three drifting gradient blobs that animate the bg subtly */
.tm-home-aurora-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.tm-home-aurora-bg span {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform;
}
.tm-home-aurora-bg span:nth-child(1) {
  width: 540px; height: 540px;
  background: rgba(236, 32, 36, 0.16);
  top: -160px; left: 8%;
  animation: tmh-aurora-drift-a 22s ease-in-out infinite;
}
.tm-home-aurora-bg span:nth-child(2) {
  width: 420px; height: 420px;
  background: rgba(255, 165, 130, 0.30);
  bottom: -120px; right: 10%;
  animation: tmh-aurora-drift-b 26s ease-in-out infinite;
}
.tm-home-aurora-bg span:nth-child(3) {
  width: 360px; height: 360px;
  background: rgba(255, 100, 100, 0.10);
  top: 40%; left: 50%; transform: translate(-50%, -50%);
  animation: tmh-aurora-drift-c 30s ease-in-out infinite;
}

/* Subtle grain texture overlay for tactile premium feel */
.tm-home-aurora::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.25 0 0 0 0 0.18 0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  opacity: 0.55;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}
.tm-home-aurora > .container { position: relative; z-index: 2; }

/* Header */
.tm-home-aurora-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 64px;
}
@media (max-width: 991px) {
  .tm-home-aurora-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; }
}
.tm-home-aurora-title {
  font-family: 'Urbanist', sans-serif;
  font-size: clamp(2.1rem, 4.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--tmh-text);
  margin: 0;
}
.tm-home-aurora-title .accent {
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--tmh-red);
}
.tm-home-aurora-lede {
  font-size: 16px;
  line-height: 1.7;
  color: #6a6055;
  max-width: 56ch;
  margin: 0;
}

/* The bento — 4 col x 2 rows (responsive collapses) */
.tm-home-aurora-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 991px) { .tm-home-aurora-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 575px) { .tm-home-aurora-grid { grid-template-columns: 1fr; gap: 12px; } }

/* Frosted-glass card */
.tmh-aur-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 240px;
  padding: 28px 26px 26px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),  /* glassy top highlight */
    0 1px 2px rgba(26, 23, 20, 0.04),
    0 6px 20px rgba(26, 23, 20, 0.06);
  text-decoration: none;
  color: var(--tmh-text);
  isolation: isolate;
  transition: transform 0.5s var(--tmh-ease),
              background 0.45s var(--tmh-ease),
              box-shadow 0.5s var(--tmh-ease),
              border-color 0.45s var(--tmh-ease);
  cursor: pointer;
  overflow: hidden;
}

/* Animated gradient border that appears on hover (uses a pseudo-element
   with linear-gradient + mask trick — no extra DOM). */
.tmh-aur-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(
    135deg,
    var(--tint, var(--tmh-red)) 0%,
    rgba(255, 255, 255, 0.4) 40%,
    transparent 70%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.5s var(--tmh-ease);
  pointer-events: none;
  z-index: 0;
}

/* Subtle radial accent in the corner */
.tmh-aur-card::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 60%; height: 60%;
  background: radial-gradient(circle at top right, var(--tint, var(--tmh-red)) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.5s var(--tmh-ease);
  pointer-events: none;
  z-index: 0;
  filter: blur(20px);
}

.tmh-aur-card:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.85);
  border-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 18px 40px rgba(26, 23, 20, 0.10),
    0 4px 14px rgba(236, 32, 36, 0.10);
  color: var(--tmh-text);
}
.tmh-aur-card:hover::before { opacity: 1; }
.tmh-aur-card:hover::after  { opacity: 0.32; }

.tmh-aur-card > * { position: relative; z-index: 1; }

/* Top: numeral + tag — refined typographic hierarchy */
.tmh-aur-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
}
.tmh-aur-num {
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 38px;
  line-height: 0.9;
  color: rgba(26, 23, 20, 0.38);
  letter-spacing: -0.025em;
  transition: color 0.4s var(--tmh-ease);
}
.tmh-aur-card:hover .tmh-aur-num { color: var(--tint, var(--tmh-red)); }
.tmh-aur-tag {
  font-family: 'Urbanist', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(26, 23, 20, 0.55);
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(26, 23, 20, 0.05);
  transition: background 0.4s var(--tmh-ease), color 0.4s var(--tmh-ease);
}
.tmh-aur-card:hover .tmh-aur-tag {
  background: rgba(26, 23, 20, 0.08);
  color: var(--tmh-text);
}

/* Body */
.tmh-aur-body { flex: 1; }
.tmh-aur-title {
  font-family: 'Urbanist', sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.018em;
  margin: 0 0 12px;
  color: var(--tmh-text);
  transition: color 0.4s var(--tmh-ease);
}
.tmh-aur-desc {
  font-size: 15px;
  line-height: 1.65;
  color: #6a6055;
  margin: 0;
}

/* Bottom arrow link */
.tmh-aur-arr {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  font-family: 'Urbanist', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--tmh-text);
  transition: color 0.4s var(--tmh-ease), gap 0.35s var(--tmh-ease);
}
.tmh-aur-arr svg {
  width: 15px; height: 15px;
  transition: transform 0.4s var(--tmh-ease);
}
.tmh-aur-card:hover .tmh-aur-arr {
  color: var(--tint, var(--tmh-red));
  gap: 14px;
}
.tmh-aur-card:hover .tmh-aur-arr svg { transform: translateX(2px); }
.tmh-aur-card:hover .tmh-aur-arr svg path { stroke: var(--tint, var(--tmh-red)); }

/* CTA cell — RED by default, BLUE on hover. Always white text. */
.tmh-aur-card.is-cta {
  background: linear-gradient(135deg, #ec2024 0%, #ff5054 100%);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 8px 26px rgba(236, 32, 36, 0.28);
}
.tmh-aur-card.is-cta::before { display: none; }   /* the per-tint border is unnecessary on a solid CTA */
.tmh-aur-card.is-cta::after  { display: none; }   /* corner glow not needed */

/* Reset all the inner text to white at rest */
.tmh-aur-card.is-cta .tmh-aur-num,
.tmh-aur-card.is-cta .tmh-aur-title,
.tmh-aur-card.is-cta .tmh-aur-desc,
.tmh-aur-card.is-cta .tmh-aur-arr { color: #fff; }
.tmh-aur-card.is-cta .tmh-aur-desc { color: rgba(255, 255, 255, 0.88); }
.tmh-aur-card.is-cta .tmh-aur-tag {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.tmh-aur-card.is-cta .tmh-aur-arr svg path { stroke: #fff; }

/* Hover → swap to BLUE gradient (deep indigo → bright blue), keep white text */
.tmh-aur-card.is-cta:hover {
  background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
  border-color: rgba(255, 255, 255, 0.20);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 12px 32px rgba(30, 58, 138, 0.34);
}
/* Hover keeps text white (override the generic hover tint rules) */
.tmh-aur-card.is-cta:hover .tmh-aur-num,
.tmh-aur-card.is-cta:hover .tmh-aur-title,
.tmh-aur-card.is-cta:hover .tmh-aur-arr { color: #fff; }
.tmh-aur-card.is-cta:hover .tmh-aur-arr svg path { stroke: #fff; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tm-home-aurora-bg span { animation: none !important; }
  .tmh-aur-card { transition: none; }
}

/* =========================================================
   WHITE LABEL — ENTERPRISE CATALOG
   B2B product listing style: clean horizontal rows with a
   compact thumbnail, product info, a stats row, and an
   arrow CTA. Restrained palette (mostly white + grays + one
   red accent), thin separators, content-dense and scannable.
   Inspired by Stripe products / HubSpot marketplace listings.
========================================================= */
.tm-home-catalog {
  position: relative;
  padding: var(--tmh-section-y) 0;
  background: #ffffff;
  color: var(--tmh-text);
}
.tm-home-catalog > .container { position: relative; z-index: 1; }

/* Header — left-aligned with a small "5 products" counter pill on the right */
.tm-home-catalog-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: end;
  margin-bottom: 48px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--tmh-line);
}
@media (max-width: 767px) {
  .tm-home-catalog-head { grid-template-columns: 1fr; gap: 16px; }
}
.tm-home-catalog-title {
  font-family: 'Urbanist', sans-serif;
  font-size: clamp(1.85rem, 3.4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.022em;
  color: var(--tmh-text);
  margin: 8px 0 12px;
  max-width: 22ch;
}
.tm-home-catalog-title .accent { color: var(--tmh-red); }
.tm-home-catalog-lede {
  font-size: 15px;
  line-height: 1.6;
  color: var(--tmh-text-soft);
  max-width: 56ch;
  margin: 0;
}
.tm-home-catalog-pill {
  align-self: end;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 14px;
  background: var(--tmh-bg-alt);
  border: 1px solid var(--tmh-line);
  border-radius: 999px;
  font-family: 'Urbanist', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--tmh-text-soft);
  white-space: nowrap;
}
.tm-home-catalog-pill::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--tmh-red);
}
.tm-home-catalog-pill strong {
  color: var(--tmh-text);
  font-weight: 700;
}

/* The list — clean rows */
.tm-home-catalog-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Each row */
.tmh-cat-row {
  position: relative;
  display: grid;
  grid-template-columns: 140px 1.4fr 1fr 64px;
  gap: 32px;
  align-items: center;
  padding: 28px 0;
  border-bottom: 1px solid var(--tmh-line);
  text-decoration: none;
  color: var(--tmh-text);
  transition: padding 0.4s var(--tmh-ease), background 0.4s var(--tmh-ease);
  cursor: pointer;
}
.tmh-cat-row:hover {
  padding-left: 16px;
  padding-right: 16px;
  background: var(--tmh-bg-alt);
  color: var(--tmh-text);
}
@media (max-width: 991px) {
  .tmh-cat-row {
    grid-template-columns: 100px 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 22px;
    row-gap: 16px;
  }
}
@media (max-width: 575px) {
  .tmh-cat-row { grid-template-columns: 80px 1fr; column-gap: 16px; }
}

/* Thumbnail */
.tmh-cat-thumb {
  position: relative;
  width: 140px;
  height: 100px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--tmh-bg-alt);
  border: 1px solid var(--tmh-line);
  flex-shrink: 0;
}
@media (max-width: 991px) { .tmh-cat-thumb { width: 100px; height: 80px; grid-row: 1 / span 2; } }
@media (max-width: 575px) { .tmh-cat-thumb { width: 80px; height: 64px; } }
.tmh-cat-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--tmh-ease);
}
.tmh-cat-row:hover .tmh-cat-thumb img { transform: scale(1.04); }

/* Content (middle column) */
.tmh-cat-body {
  min-width: 0;
}
@media (max-width: 991px) { .tmh-cat-body { grid-column: 2; grid-row: 1; } }
.tmh-cat-meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  font-family: 'Urbanist', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.tmh-cat-num {
  color: var(--tmh-text-muted);
  font-variant-numeric: tabular-nums;
}
.tmh-cat-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background: rgba(236, 32, 36, 0.08);
  color: var(--tmh-red);
  border-radius: 4px;
  letter-spacing: 1.4px;
}
.tmh-cat-name {
  font-family: 'Urbanist', sans-serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--tmh-text);
  margin: 0 0 6px;
}
.tmh-cat-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--tmh-text-soft);
  margin: 0;
}

/* Stats column */
.tmh-cat-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: end;
}
@media (max-width: 991px) {
  .tmh-cat-stats { grid-column: 2; grid-row: 2; gap: 14px; }
}
@media (max-width: 575px) {
  .tmh-cat-stats { grid-column: 1 / -1; grid-row: 3; padding-top: 4px; }
}
.tmh-cat-stat {
  display: flex;
  flex-direction: column;
}
.tmh-cat-stat-num {
  font-family: 'Urbanist', sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--tmh-text);
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.tmh-cat-stat-num .unit {
  font-size: 11px;
  font-weight: 600;
  margin-left: 1px;
  color: var(--tmh-red);
  letter-spacing: 0;
}
.tmh-cat-stat-label {
  font-family: 'Urbanist', sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.4px;
  color: var(--tmh-text-muted);
  text-transform: uppercase;
  line-height: 1.2;
}

/* Arrow */
.tmh-cat-arr {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--tmh-line-2);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.4s var(--tmh-ease),
              border-color 0.4s var(--tmh-ease),
              transform 0.4s var(--tmh-ease);
}
@media (max-width: 991px) { .tmh-cat-arr { grid-column: 3; grid-row: 1 / span 2; align-self: center; } }
@media (max-width: 575px) { .tmh-cat-arr { width: 44px; height: 44px; grid-column: 2; grid-row: 1; align-self: start; justify-self: end; } }
.tmh-cat-arr svg {
  width: 16px; height: 16px;
  transition: stroke 0.3s var(--tmh-ease);
}
.tmh-cat-row:hover .tmh-cat-arr {
  background: var(--tmh-red);
  border-color: var(--tmh-red);
  transform: rotate(-45deg);
}
.tmh-cat-row:hover .tmh-cat-arr svg path { stroke: #fff; }

/* Footer CTA bar */
.tm-home-catalog-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 36px;
  padding: 22px 28px;
  background: var(--tmh-bg-alt);
  border-radius: 14px;
  flex-wrap: wrap;
}
.tm-home-catalog-foot-text {
  font-family: 'Urbanist', sans-serif;
  font-size: 14px;
  color: var(--tmh-text-soft);
  margin: 0;
}
.tm-home-catalog-foot-text strong { color: var(--tmh-text); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .tmh-cat-thumb img,
  .tmh-cat-arr,
  .tmh-cat-row { transition: none !important; transform: none !important; }
}

/* =========================================================
   WHITE LABEL — MAGAZINE PAGES (legacy, replaced by catalog)
   Kept inert below for archival; no markup uses it now.
========================================================= */
.tm-home-pages {
  position: relative;
  padding: var(--tmh-section-y) 0;
  background:
    radial-gradient(40% 40% at 0% 0%,   rgba(236, 32, 36, 0.04), transparent 65%),
    radial-gradient(40% 40% at 100% 100%, rgba(255, 200, 180, 0.10), transparent 65%),
    #ffffff;
  color: var(--tmh-text);
  overflow: hidden;
  isolation: isolate;
}

/* Header — centered, magazine-spread style */
.tm-home-pages-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 96px;
}
.tm-home-pages-head .tmh-eyebrow { justify-content: center; }
.tm-home-pages-head .tmh-eyebrow::before { background: var(--tmh-red); }
.tm-home-pages-title {
  font-family: 'Urbanist', sans-serif;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--tmh-text);
  margin: 0 auto 18px;
  max-width: 18ch;
}
.tm-home-pages-title .accent {
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--tmh-red);
}
.tm-home-pages-lede {
  font-size: 16px;
  line-height: 1.7;
  color: var(--tmh-text-soft);
  max-width: 56ch;
  margin: 0 auto;
}

/* The list of spreads */
.tm-home-pages-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Each spread is a full-width row, image + content side-by-side */
.tmh-page {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  padding: 80px 0;
  border-bottom: 1px solid var(--tmh-line);
}
.tmh-page:last-child { border-bottom: 0; }
@media (max-width: 991px) {
  .tmh-page {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 56px 0;
  }
}

/* Alternate image left/right on every other spread */
.tmh-page:nth-child(even) .tmh-page-img    { order: 2; }
.tmh-page:nth-child(even) .tmh-page-body   { order: 1; }
@media (max-width: 991px) {
  .tmh-page:nth-child(even) .tmh-page-img,
  .tmh-page:nth-child(even) .tmh-page-body { order: initial; }
}

/* === IMAGE SIDE === */
.tmh-page-img {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: 24px;
  overflow: hidden;
  background: var(--tmh-bg-alt);
  isolation: isolate;
}
.tmh-page-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--tmh-ease);
}
.tmh-page:hover .tmh-page-img img { transform: scale(1.04); }

/* Subtle accent gradient overlay on image */
.tmh-page-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 50%, var(--accent-soft, rgba(236, 32, 36, 0.16)) 100%);
  pointer-events: none;
  z-index: 1;
}

/* The big italic-serif numeral hovers over the image's outer corner */
.tmh-page-num {
  position: absolute;
  z-index: 3;
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(80px, 9vw, 160px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--accent, var(--tmh-red));
  pointer-events: none;
  text-shadow: 0 0 40px rgba(255, 255, 255, 0.6);
}
/* Default: top-right of image */
.tmh-page-num { top: -22px; right: -8px; }
/* On even rows, image sits on right, so put numeral on the left */
.tmh-page:nth-child(even) .tmh-page-num { right: auto; left: -8px; }

/* Glassy ready-tag in the image's other top corner */
.tmh-page-ready {
  position: absolute;
  top: 24px; left: 24px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 12px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
  font-family: 'Urbanist', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--accent, var(--tmh-red));
}
.tmh-page-ready::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent, var(--tmh-red));
}
/* On even rows, image is on the right; ready-tag stays top-left of the image area */
.tmh-page:nth-child(even) .tmh-page-ready { left: 24px; right: auto; }

/* === CONTENT SIDE === */
.tmh-page-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.tmh-page-tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Urbanist', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent, var(--tmh-red));
  margin-bottom: 24px;
}
.tmh-page-tag::before {
  content: "";
  width: 32px; height: 1px;
  background: var(--accent, var(--tmh-red));
}
.tmh-page-title {
  font-family: 'Urbanist', sans-serif;
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--tmh-text);
  margin: 0 0 22px;
  max-width: 18ch;
  transition: color 0.4s var(--tmh-ease);
}
.tmh-page:hover .tmh-page-title { color: var(--accent, var(--tmh-red)); }
.tmh-page-desc {
  font-size: 16px;
  line-height: 1.7;
  color: var(--tmh-text-soft);
  margin: 0 0 28px;
  max-width: 52ch;
}
.tmh-page-points {
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tmh-page-points li {
  font-family: 'Urbanist', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.8px;
  color: var(--tmh-text);
  padding: 8px 14px;
  background: var(--tmh-bg-alt);
  border: 1px solid var(--tmh-line);
  border-radius: 999px;
  transition: background 0.3s var(--tmh-ease),
              border-color 0.3s var(--tmh-ease),
              color 0.3s var(--tmh-ease);
}
.tmh-page:hover .tmh-page-points li {
  background: rgba(255, 255, 255, 0.7);
  border-color: var(--accent, var(--tmh-red));
  color: var(--accent, var(--tmh-text));
}

.tmh-page-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  background: var(--tmh-text);
  color: #fff;
  font-family: 'Urbanist', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  border-radius: 999px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background 0.3s var(--tmh-ease), gap 0.3s var(--tmh-ease), transform 0.3s var(--tmh-ease);
}
.tmh-page-cta:hover {
  background: var(--accent, var(--tmh-red));
  color: #fff;
  gap: 14px;
  transform: translateY(-2px);
}
.tmh-page-cta svg { width: 14px; height: 14px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tmh-page-img img { transition: none !important; transform: none !important; }
}

/* =========================================================
   WHITE LABEL — RICH ASYMMETRIC BENTO (legacy, replaced by pages)
   Kept inert below for archival; no markup uses it now.
========================================================= */
.tm-home-bento {
  position: relative;
  padding: var(--tmh-section-y) 0 calc(var(--tmh-section-y) - 20px);
  background:
    radial-gradient(50% 60% at 0% 0%,   rgba(236, 32, 36, 0.06), transparent 60%),
    radial-gradient(45% 55% at 100% 100%,rgba(255, 200, 180, 0.18), transparent 60%),
    linear-gradient(180deg, #faf8f3 0%, #ffffff 60%);
  color: var(--tmh-text);
  overflow: hidden;
  isolation: isolate;
}

/* Header */
.tm-home-bento-head {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 56px;
}
@media (max-width: 991px) {
  .tm-home-bento-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 36px; }
}
.tm-home-bento-title {
  font-family: 'Urbanist', sans-serif;
  font-size: clamp(2.1rem, 4.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--tmh-text);
  margin: 0;
}
.tm-home-bento-title .accent {
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--tmh-red);
}
.tm-home-bento-lede {
  font-size: 16px;
  line-height: 1.7;
  color: var(--tmh-text-soft);
  max-width: 56ch;
  margin: 0;
}

/* The bento grid — 4 cols × 3 rows on desktop, named areas */
.tm-home-bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: minmax(280px, auto) minmax(280px, auto) minmax(280px, auto);
  grid-template-areas:
    "feat feat c2 c2"
    "feat feat c3 c3"
    "c4 c4 c5 c5";
  gap: 18px;
}
@media (max-width: 991px) {
  .tm-home-bento-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "feat" "c2" "c3" "c4" "c5";
    gap: 14px;
  }
}

/* ========== FEATURE CARD (2×2, dark, full-bleed image) ========== */
.tmh-bento-feat {
  grid-area: feat;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 580px;
  padding: 40px;
  border-radius: 28px;
  overflow: hidden;
  background: #1a1714;
  color: #fff;
  isolation: isolate;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: transform 0.55s var(--tmh-ease),
              box-shadow 0.55s var(--tmh-ease);
}
@media (max-width: 991px) { .tmh-bento-feat { min-height: 480px; padding: 32px; } }
.tmh-bento-feat:hover {
  transform: translateY(-4px);
  box-shadow: 0 32px 64px rgba(26, 23, 20, 0.18);
  color: #fff;
}
.tmh-bento-feat-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.tmh-bento-feat-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--tmh-ease);
}
.tmh-bento-feat:hover .tmh-bento-feat-img img { transform: scale(1.06); }
/* Strong gradient overlay so content reads */
.tmh-bento-feat::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(26, 23, 20, 0.10) 0%, rgba(26, 23, 20, 0.78) 65%, rgba(26, 23, 20, 0.92) 100%),
    linear-gradient(135deg, transparent 50%, rgba(236, 32, 36, 0.32) 100%);
  z-index: 1;
  pointer-events: none;
}
/* Subtle dotted pattern in the top */
.tmh-bento-feat::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 50%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 50%);
  z-index: 2;
  pointer-events: none;
}
.tmh-bento-feat > * { position: relative; z-index: 3; }

.tmh-bento-feat-badge {
  position: absolute;
  top: 32px; left: 32px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 14px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 999px;
  font-family: 'Urbanist', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--tmh-red);
}
.tmh-bento-feat-badge::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--tmh-red);
  box-shadow: 0 0 0 4px rgba(236, 32, 36, 0.18);
  animation: tmh-bento-pulse 2.4s var(--tmh-ease) infinite;
}
@keyframes tmh-bento-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(236, 32, 36, 0.18); }
  50%      { box-shadow: 0 0 0 9px rgba(236, 32, 36, 0.04); }
}

.tmh-bento-feat-tag {
  font-family: 'Urbanist', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.tmh-bento-feat-tag::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--tmh-red);
}
.tmh-bento-feat-title {
  font-family: 'Urbanist', sans-serif;
  font-size: clamp(1.85rem, 3.4vw, 2.8rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0 0 16px;
  max-width: 14ch;
}
.tmh-bento-feat-desc {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 26px;
  max-width: 56ch;
}
.tmh-bento-feat-points {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tmh-bento-feat-points li {
  font-family: 'Urbanist', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #fff;
  padding: 7px 13px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.tmh-bento-feat-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: var(--tmh-red);
  color: #fff;
  font-family: 'Urbanist', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  border-radius: 999px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background 0.3s var(--tmh-ease), gap 0.3s var(--tmh-ease), transform 0.3s var(--tmh-ease);
  align-self: flex-start;
}
.tmh-bento-feat-cta:hover {
  background: #ff2c30;
  gap: 14px;
  color: #fff;
  transform: translateY(-2px);
}
.tmh-bento-feat-cta svg { width: 14px; height: 14px; }

/* ========== ROW CARDS (2×1, image-left + content-right) ========== */
.tmh-bento-row {
  position: relative;
  display: grid;
  grid-template-columns: 200px 1fr;
  background: #ffffff;
  border: 1px solid var(--tmh-line);
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  color: var(--tmh-text);
  cursor: pointer;
  transition: transform 0.5s var(--tmh-ease),
              border-color 0.5s var(--tmh-ease),
              box-shadow 0.5s var(--tmh-ease);
}
@media (max-width: 1199px) { .tmh-bento-row { grid-template-columns: 170px 1fr; } }
@media (max-width: 575px)  { .tmh-bento-row { grid-template-columns: 1fr; } }
.tmh-bento-row.r-c2 { grid-area: c2; }
.tmh-bento-row.r-c3 { grid-area: c3; }
.tmh-bento-row.r-c4 { grid-area: c4; }
.tmh-bento-row.r-c5 { grid-area: c5; }

.tmh-bento-row:hover {
  transform: translateY(-4px);
  border-color: var(--accent, var(--tmh-red));
  box-shadow: 0 20px 44px rgba(26, 23, 20, 0.10),
              0 4px 12px var(--accent-soft, rgba(236, 32, 36, 0.10));
  color: var(--tmh-text);
}

.tmh-bento-row-img {
  position: relative;
  overflow: hidden;
  background: var(--tmh-bg-alt);
}
@media (max-width: 575px) { .tmh-bento-row-img { aspect-ratio: 16/9; } }
.tmh-bento-row-img img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s var(--tmh-ease);
}
.tmh-bento-row:hover .tmh-bento-row-img img { transform: scale(1.06); }
/* Tinted accent overlay on the image, accent color comes from --accent */
.tmh-bento-row-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 55%, var(--accent-soft, rgba(236, 32, 36, 0.18)) 100%);
  pointer-events: none;
}
.tmh-bento-row-tag {
  position: absolute;
  top: 14px; left: 14px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
  font-family: 'Urbanist', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent, var(--tmh-text));
  z-index: 1;
}

.tmh-bento-row-body {
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 240px;
}
@media (max-width: 575px) { .tmh-bento-row-body { min-height: 0; padding: 24px; } }

.tmh-bento-row-num {
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  font-style: italic;
  font-size: 18px;
  color: var(--accent, var(--tmh-red));
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.tmh-bento-row-num::before {
  content: "—";
  color: var(--accent, var(--tmh-red));
  font-style: normal;
}
.tmh-bento-row-title {
  font-family: 'Urbanist', sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.018em;
  color: var(--tmh-text);
  margin: 0 0 10px;
  transition: color 0.4s var(--tmh-ease);
}
.tmh-bento-row:hover .tmh-bento-row-title { color: var(--accent, var(--tmh-red)); }
.tmh-bento-row-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--tmh-text-soft);
  margin: 0 0 18px;
}
.tmh-bento-row-arr {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Urbanist', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--tmh-text);
  margin-top: auto;
  align-self: flex-start;
}
.tmh-bento-row-arr::after {
  content: "";
  width: 22px; height: 1px;
  background: currentColor;
  transition: width 0.3s var(--tmh-ease), background 0.3s var(--tmh-ease);
}
.tmh-bento-row:hover .tmh-bento-row-arr {
  color: var(--accent, var(--tmh-red));
}
.tmh-bento-row:hover .tmh-bento-row-arr::after {
  width: 36px;
  background: var(--accent, var(--tmh-red));
}

@media (prefers-reduced-motion: reduce) {
  .tmh-bento-feat-img img,
  .tmh-bento-row-img img { transition: none !important; transform: none !important; }
  .tmh-bento-feat-badge::before { animation: none !important; }
}

/* =========================================================
   WHITE LABEL — PRODUCT THEATRE (legacy, replaced by bento)
   Kept inert below for archival; no markup uses it now.
========================================================= */
.tm-home-theatre {
  position: relative;
  padding: var(--tmh-section-y) 0;
  background:
    radial-gradient(50% 60% at 100% 0%,  rgba(236, 32, 36, 0.045), transparent 65%),
    linear-gradient(180deg, #faf8f3 0%, #ffffff 100%);
  color: var(--tmh-text);
  overflow: hidden;
  isolation: isolate;
}

/* Header */
.tm-home-theatre-head {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 56px;
}
@media (max-width: 991px) {
  .tm-home-theatre-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 36px; }
}
.tm-home-theatre-title {
  font-family: 'Urbanist', sans-serif;
  font-size: clamp(2.1rem, 4.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--tmh-text);
  margin: 0;
}
.tm-home-theatre-title .accent {
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--tmh-red);
}
.tm-home-theatre-lede {
  font-size: 16px;
  line-height: 1.7;
  color: var(--tmh-text-soft);
  max-width: 56ch;
  margin: 0;
}

/* ===== STAGE — full-width split panel ===== */
.tm-home-theatre-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 0;
  background: #ffffff;
  border: 1px solid var(--tmh-line);
  border-radius: 28px;
  overflow: hidden;
  margin-bottom: 28px;
  min-height: 560px;
  isolation: isolate;
  box-shadow: 0 18px 48px rgba(26, 23, 20, 0.08);
}
@media (max-width: 991px) {
  .tm-home-theatre-stage { grid-template-columns: 1fr; min-height: 0; }
}

/* Image side — layered panels, only active one visible */
.tmh-thtr-stage-img {
  position: relative;
  overflow: hidden;
  background: #fafaf7;
  min-height: 560px;
  isolation: isolate;
}
@media (max-width: 991px) { .tmh-thtr-stage-img { min-height: 380px; } }
.tmh-thtr-stage-img img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.7s var(--tmh-ease), transform 8s linear;
  will-change: opacity, transform;
}
.tmh-thtr-stage-img img.is-active {
  opacity: 1;
  transform: scale(1.02);
}
/* Subtle red gradient kiss in the corner */
.tmh-thtr-stage-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 55%, rgba(236, 32, 36, 0.10) 100%);
  pointer-events: none;
  z-index: 2;
}

/* Floating "ready to ship" badge with pulsing dot */
.tmh-thtr-stage-badge {
  position: absolute;
  top: 24px; left: 24px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 14px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 999px;
  font-family: 'Urbanist', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--tmh-red);
}
.tmh-thtr-stage-badge::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--tmh-red);
  box-shadow: 0 0 0 4px rgba(236, 32, 36, 0.18);
  animation: tmh-thtr-pulse 2.4s var(--tmh-ease) infinite;
}
@keyframes tmh-thtr-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(236, 32, 36, 0.18); }
  50%      { box-shadow: 0 0 0 9px rgba(236, 32, 36, 0.04); }
}

/* Content side — layered panels too */
.tmh-thtr-stage-body {
  position: relative;
  padding: 56px;
  display: flex;
  align-items: center;
}
@media (max-width: 991px) { .tmh-thtr-stage-body { padding: 36px 32px; } }
@media (max-width: 575px) { .tmh-thtr-stage-body { padding: 28px 24px; } }
.tmh-thtr-panel {
  position: absolute;
  inset: 56px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.55s var(--tmh-ease), transform 0.55s var(--tmh-ease);
  pointer-events: none;
}
@media (max-width: 991px) { .tmh-thtr-panel { inset: 36px 32px; } }
@media (max-width: 575px) { .tmh-thtr-panel { inset: 28px 24px; } }
.tmh-thtr-panel.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0.15s;     /* let the image fade in slightly first */
}
.tmh-thtr-panel-counter {
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  color: var(--tmh-red);
  letter-spacing: -0.01em;
  margin-bottom: 16px;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.tmh-thtr-panel-counter .total { color: rgba(26, 23, 20, 0.45); font-size: 13px; }
.tmh-thtr-panel-tag {
  font-family: 'Urbanist', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--tmh-text-muted);
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.tmh-thtr-panel-tag::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--tmh-red);
}
.tmh-thtr-panel-title {
  font-family: 'Urbanist', sans-serif;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--tmh-text);
  margin: 0 0 18px;
}
.tmh-thtr-panel-desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--tmh-text-soft);
  margin: 0 0 24px;
}
.tmh-thtr-panel-points {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
}
@media (max-width: 575px) { .tmh-thtr-panel-points { grid-template-columns: 1fr; } }
.tmh-thtr-panel-points li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--tmh-text-soft);
}
.tmh-thtr-panel-points li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 12px; height: 2px;
  background: var(--tmh-red);
  border-radius: 2px;
}
.tmh-thtr-panel-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.tmh-thtr-panel-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: var(--tmh-red);
  color: #fff;
  font-family: 'Urbanist', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  border-radius: 999px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background 0.3s var(--tmh-ease), gap 0.3s var(--tmh-ease), transform 0.3s var(--tmh-ease);
}
.tmh-thtr-panel-cta:hover {
  background: #ff2c30;
  gap: 14px;
  color: #fff;
  transform: translateY(-2px);
}
.tmh-thtr-panel-cta svg { width: 14px; height: 14px; }

/* ===== THUMBNAIL RAIL ===== */
.tm-home-theatre-rail {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
@media (max-width: 991px) { .tm-home-theatre-rail { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
@media (max-width: 575px) { .tm-home-theatre-rail { grid-template-columns: 1fr; } }

.tmh-thtr-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: #ffffff;
  border: 1px solid var(--tmh-line);
  border-radius: 16px;
  cursor: pointer;
  text-align: left;
  font-family: 'Urbanist', sans-serif;
  color: var(--tmh-text);
  overflow: hidden;
  transition: border-color 0.4s var(--tmh-ease),
              background 0.4s var(--tmh-ease),
              transform 0.4s var(--tmh-ease);
}
.tmh-thtr-tab:hover {
  transform: translateY(-2px);
  border-color: var(--tmh-line-2);
  background: #fff;
}
.tmh-thtr-tab.is-active {
  border-color: var(--tmh-red);
  background: #fff;
  box-shadow: 0 6px 20px rgba(236, 32, 36, 0.10);
}
/* Progress bar at the bottom of the active tab */
.tmh-thtr-tab::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: 0%;
  background: var(--tmh-red);
}
.tmh-thtr-tab.is-active::after {
  animation: tmh-thtr-progress 6s linear forwards;
}
@keyframes tmh-thtr-progress {
  from { width: 0%; }
  to   { width: 100%; }
}

.tmh-thtr-tab-thumb {
  flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--tmh-bg-alt);
  position: relative;
}
.tmh-thtr-tab-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.tmh-thtr-tab-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.32);
  color: #fff;
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  font-style: italic;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.02em;
  opacity: 0;
  transition: opacity 0.4s var(--tmh-ease);
}
.tmh-thtr-tab.is-active .tmh-thtr-tab-num,
.tmh-thtr-tab:hover .tmh-thtr-tab-num { opacity: 1; }

.tmh-thtr-tab-meta {
  flex: 1;
  min-width: 0;
}
.tmh-thtr-tab-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--tmh-text-muted);
  margin-bottom: 4px;
  display: block;
  transition: color 0.3s var(--tmh-ease);
}
.tmh-thtr-tab.is-active .tmh-thtr-tab-tag { color: var(--tmh-red); }
.tmh-thtr-tab-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--tmh-text);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tmh-thtr-stage-img img,
  .tmh-thtr-panel { transition: opacity 0.01ms !important; transform: none !important; }
  .tmh-thtr-stage-badge::before { animation: none !important; }
  .tmh-thtr-tab.is-active::after { animation: none !important; width: 100%; }
}

/* =========================================================
   WHITE LABEL — FEATURED + GRID (legacy, replaced by theatre)
   Kept inert below for archival; no markup uses it now.
========================================================= */
.tm-home-launch {
  position: relative;
  padding: var(--tmh-section-y) 0 calc(var(--tmh-section-y) - 20px);
  background:
    radial-gradient(60% 50% at 100% 0%, rgba(236, 32, 36, 0.05), transparent 65%),
    radial-gradient(50% 60% at 0% 100%, rgba(255, 200, 180, 0.18), transparent 60%),
    #ffffff;
  color: var(--tmh-text);
  overflow: hidden;
  isolation: isolate;
}
.tm-home-launch > .container { position: relative; z-index: 1; }

/* Header */
.tm-home-launch-head {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 56px;
}
@media (max-width: 991px) {
  .tm-home-launch-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 36px; }
}
.tm-home-launch-title {
  font-family: 'Urbanist', sans-serif;
  font-size: clamp(2.1rem, 4.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--tmh-text);
  margin: 0;
}
.tm-home-launch-title .accent {
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--tmh-red);
}
.tm-home-launch-lede {
  font-size: 16px;
  line-height: 1.7;
  color: var(--tmh-text-soft);
  max-width: 56ch;
  margin: 0;
}

/* ===== FEATURE CARD — full-width, split layout ===== */
.tmh-launch-feature {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  background: #ffffff;
  border: 1px solid var(--tmh-line);
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 22px;
  isolation: isolate;
  transition: border-color 0.5s var(--tmh-ease),
              box-shadow 0.5s var(--tmh-ease);
}
.tmh-launch-feature:hover {
  border-color: rgba(236, 32, 36, 0.32);
  box-shadow: 0 24px 60px rgba(26, 23, 20, 0.10);
}
@media (max-width: 991px) {
  .tmh-launch-feature { grid-template-columns: 1fr; }
}

.tmh-launch-feature-img {
  position: relative;
  overflow: hidden;
  background: var(--tmh-bg-alt);
  min-height: 460px;
}
@media (max-width: 991px) { .tmh-launch-feature-img { min-height: 320px; } }
.tmh-launch-feature-img img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--tmh-ease);
}
.tmh-launch-feature:hover .tmh-launch-feature-img img { transform: scale(1.04); }
/* Subtle red gradient wash on the image */
.tmh-launch-feature-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 50%, rgba(236, 32, 36, 0.10) 100%);
  pointer-events: none;
}

/* Floating badge in the top-left of the image */
.tmh-launch-feature-badge {
  position: absolute;
  top: 24px; left: 24px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 14px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 999px;
  font-family: 'Urbanist', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--tmh-red);
}
.tmh-launch-feature-badge::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--tmh-red);
  box-shadow: 0 0 0 4px rgba(236, 32, 36, 0.18);
  animation: tmh-launch-pulse 2.4s var(--tmh-ease) infinite;
}
@keyframes tmh-launch-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(236, 32, 36, 0.18); }
  50%      { box-shadow: 0 0 0 8px rgba(236, 32, 36, 0.04); }
}

/* Right side: content */
.tmh-launch-feature-body {
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 575px) { .tmh-launch-feature-body { padding: 32px 28px; } }

.tmh-launch-feature-tag {
  font-family: 'Urbanist', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--tmh-text-muted);
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.tmh-launch-feature-tag::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--tmh-red);
}
.tmh-launch-feature-title {
  font-family: 'Urbanist', sans-serif;
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--tmh-text);
  margin: 0 0 16px;
}
.tmh-launch-feature-desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--tmh-text-soft);
  margin: 0 0 24px;
}
.tmh-launch-feature-points {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 28px;
}
@media (max-width: 575px) { .tmh-launch-feature-points { grid-template-columns: 1fr; } }
.tmh-launch-feature-points li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--tmh-text-soft);
}
.tmh-launch-feature-points li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 12px; height: 2px;
  background: var(--tmh-red);
  border-radius: 2px;
}
.tmh-launch-feature-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.tmh-launch-feature-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: var(--tmh-red);
  color: #fff;
  font-family: 'Urbanist', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  border-radius: 999px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background 0.3s var(--tmh-ease), gap 0.3s var(--tmh-ease), transform 0.3s var(--tmh-ease);
}
.tmh-launch-feature-cta:hover {
  background: #ff2c30;
  gap: 14px;
  color: #fff;
  transform: translateY(-2px);
}
.tmh-launch-feature-cta svg { width: 14px; height: 14px; }
.tmh-launch-feature-link {
  font-family: 'Urbanist', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--tmh-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap 0.3s var(--tmh-ease), color 0.3s var(--tmh-ease);
}
.tmh-launch-feature-link:hover { color: var(--tmh-red); gap: 12px; }
.tmh-launch-feature-link::after {
  content: "";
  width: 22px; height: 1px;
  background: currentColor;
  transition: width 0.3s var(--tmh-ease);
}
.tmh-launch-feature-link:hover::after { width: 36px; }

/* ===== GRID — 4 secondary cards ===== */
.tm-home-launch-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
@media (max-width: 767px) { .tm-home-launch-grid { grid-template-columns: 1fr; gap: 16px; } }

.tmh-launch-card {
  position: relative;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  background: #fff;
  border: 1px solid var(--tmh-line);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: var(--tmh-text);
  transition: transform 0.5s var(--tmh-ease),
              border-color 0.5s var(--tmh-ease),
              box-shadow 0.5s var(--tmh-ease);
  cursor: pointer;
}
@media (max-width: 991px) { .tmh-launch-card { grid-template-columns: 180px 1fr; } }
@media (max-width: 575px) { .tmh-launch-card { grid-template-columns: 1fr; } }
.tmh-launch-card:hover {
  transform: translateY(-4px);
  border-color: rgba(236, 32, 36, 0.24);
  box-shadow: 0 18px 44px rgba(26, 23, 20, 0.10);
  color: var(--tmh-text);
}
.tmh-launch-card-img {
  position: relative;
  overflow: hidden;
  background: var(--tmh-bg-alt);
  min-height: 200px;
}
@media (max-width: 575px) { .tmh-launch-card-img { aspect-ratio: 16/10; min-height: 0; } }
.tmh-launch-card-img img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s var(--tmh-ease);
}
.tmh-launch-card:hover .tmh-launch-card-img img { transform: scale(1.06); }
.tmh-launch-card-tag {
  position: absolute;
  top: 14px; left: 14px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
  font-family: 'Urbanist', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tmh-text);
}
.tmh-launch-card-body {
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.tmh-launch-card-title {
  font-family: 'Urbanist', sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.012em;
  color: var(--tmh-text);
  margin: 0 0 8px;
}
.tmh-launch-card-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--tmh-text-soft);
  margin: 0 0 16px;
}
.tmh-launch-card-arr {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Urbanist', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--tmh-text);
  margin-top: auto;
}
.tmh-launch-card-arr::after {
  content: "";
  width: 18px; height: 1px;
  background: currentColor;
  transition: width 0.3s var(--tmh-ease), background 0.3s var(--tmh-ease);
}
.tmh-launch-card:hover .tmh-launch-card-arr {
  color: var(--tmh-red);
}
.tmh-launch-card:hover .tmh-launch-card-arr::after {
  width: 30px;
  background: var(--tmh-red);
}

@media (prefers-reduced-motion: reduce) {
  .tmh-launch-feature-img img,
  .tmh-launch-card-img img { transition: none !important; transform: none !important; }
  .tmh-launch-feature-badge::before { animation: none !important; }
}

/* =========================================================
   SERVICES — ELEGANT GRID (legacy, replaced by aurora glass)
   Kept inert below for archival; no markup uses it now.
========================================================= */
.tm-home-elegant {
  position: relative;
  padding: var(--tmh-section-y) 0 calc(var(--tmh-section-y) - 20px);
  background: #ffffff;
  color: var(--tmh-text);
}
.tm-home-elegant > .container { position: relative; z-index: 1; }

/* Header */
.tm-home-elegant-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 64px;
}
@media (max-width: 991px) {
  .tm-home-elegant-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; }
}
.tm-home-elegant-title {
  font-family: 'Urbanist', sans-serif;
  font-size: clamp(2.1rem, 4.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--tmh-text);
  margin: 0;
}
.tm-home-elegant-title .accent {
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--tmh-red);
}
.tm-home-elegant-lede {
  font-size: 16px;
  line-height: 1.7;
  color: var(--tmh-text-soft);
  max-width: 56ch;
  margin: 0;
}

/* The grid — 4 columns x 2 rows. Thin hairlines BETWEEN cells
   (drawn as cell borders that only appear on the right/bottom of
   the first row, and left/top stay clear). The whole grid sits in
   a thin outer frame for symmetry. */
.tm-home-elegant-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--tmh-line);
  border-left: 1px solid var(--tmh-line);
}
@media (max-width: 991px) { .tm-home-elegant-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .tm-home-elegant-grid { grid-template-columns: 1fr; } }

.tmh-eleg-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 280px;
  padding: 32px 28px;
  border-right: 1px solid var(--tmh-line);
  border-bottom: 1px solid var(--tmh-line);
  text-decoration: none;
  color: var(--tmh-text);
  background: #ffffff;
  transition: background 0.45s var(--tmh-ease);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
}
.tmh-eleg-cell:hover {
  background: #faf8f3;          /* same warm cream as elsewhere — quiet shift */
  color: var(--tmh-text);
}
/* Red hairline that draws across the bottom on hover */
.tmh-eleg-cell::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--tmh-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--tmh-ease);
  z-index: 2;
}
.tmh-eleg-cell:hover::after { transform: scaleX(1); }

/* Top: italic-serif numeral + tag chip */
.tmh-eleg-cell-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}
.tmh-eleg-num {
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 36px;
  line-height: 1;
  color: var(--tmh-text-muted);
  letter-spacing: -0.02em;
  transition: color 0.4s var(--tmh-ease);
}
.tmh-eleg-cell:hover .tmh-eleg-num { color: var(--tmh-red); }

.tmh-eleg-tag {
  font-family: 'Urbanist', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--tmh-text-muted);
}

/* Middle: title + description */
.tmh-eleg-body { flex: 1; }
.tmh-eleg-title {
  font-family: 'Urbanist', sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  color: var(--tmh-text);
  transition: transform 0.45s var(--tmh-ease);
}
.tmh-eleg-cell:hover .tmh-eleg-title { transform: translateX(4px); }
.tmh-eleg-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--tmh-text-soft);
  margin: 0;
}

/* Bottom: arrow link */
.tmh-eleg-arr {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Urbanist', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tmh-text);
  margin-top: 28px;
}
.tmh-eleg-arr::after {
  content: "";
  width: 22px; height: 1px;
  background: currentColor;
  transition: width 0.4s var(--tmh-ease), background 0.3s var(--tmh-ease);
}
.tmh-eleg-cell:hover .tmh-eleg-arr {
  color: var(--tmh-red);
}
.tmh-eleg-cell:hover .tmh-eleg-arr::after {
  width: 40px;
  background: var(--tmh-red);
}

/* Final cell — soft CTA "need something else?" */
.tmh-eleg-cell.is-cta {
  background: #faf8f3;
}
.tmh-eleg-cell.is-cta:hover {
  background: var(--tmh-red);
  color: #fff;
}
.tmh-eleg-cell.is-cta:hover .tmh-eleg-num,
.tmh-eleg-cell.is-cta:hover .tmh-eleg-title,
.tmh-eleg-cell.is-cta:hover .tmh-eleg-desc,
.tmh-eleg-cell.is-cta:hover .tmh-eleg-tag,
.tmh-eleg-cell.is-cta:hover .tmh-eleg-arr { color: #fff; }
.tmh-eleg-cell.is-cta:hover .tmh-eleg-arr::after { background: #fff; }
.tmh-eleg-cell.is-cta::after { display: none; }
.tmh-eleg-cell.is-cta .tmh-eleg-num {
  color: var(--tmh-red);
}

/* =========================================================
   SERVICES — TYPE TAPE WALL (legacy, replaced by elegant grid)
   Kept inert below for archival; no markup uses it now.
========================================================= */
@keyframes tmh-tape-left  { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes tmh-tape-right { from { transform: translate3d(-50%,0,0); } to { transform: translate3d(0,0,0); } }

.tm-home-tape {
  position: relative;
  padding: var(--tmh-section-y) 0 calc(var(--tmh-section-y) - 20px);
  background: #0a0a0d;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
/* Atmospheric red glow under the type */
.tm-home-tape::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 20% 35%, rgba(236, 32, 36, 0.20), transparent 60%),
    radial-gradient(50% 50% at 80% 70%, rgba(236, 32, 36, 0.12), transparent 60%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
.tm-home-tape > .container { position: relative; z-index: 1; }

/* Header */
.tm-home-tape-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 64px;
}
@media (max-width: 991px) {
  .tm-home-tape-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; }
}
.tm-home-tape-head .tmh-eyebrow { color: rgba(255,255,255,0.55); }
.tm-home-tape-head .tmh-eyebrow::before { background: var(--tmh-red); }
.tm-home-tape-title {
  font-family: 'Urbanist', sans-serif;
  font-size: clamp(2.1rem, 4.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
}
.tm-home-tape-title .accent {
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--tmh-red);
}
.tm-home-tape-lede {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,255,255,0.65);
  max-width: 56ch;
  margin: 0;
}

/* The wall — three rows stacked, full-bleed */
.tm-home-tape-wall {
  position: relative;
  z-index: 1;
  margin: 0 calc(50% - 50vw);   /* break out of the container */
  padding: 0;
  /* Soft side fades so items appear from off-screen */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

/* A single horizontal row */
.tmh-tape-row {
  position: relative;
  display: flex;
  overflow: hidden;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.tmh-tape-row:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.tmh-tape-row.row-tagline {
  background: rgba(255, 255, 255, 0.02);
}

/* The track inside a row — duplicated content for seamless loop */
.tmh-tape-track {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  will-change: transform;
}
/* Per-row speeds + directions */
.row-titles  .tmh-tape-track { animation: tmh-tape-left  72s linear infinite; }
.row-tagline .tmh-tape-track { animation: tmh-tape-right 48s linear infinite; }
.row-descs   .tmh-tape-track { animation: tmh-tape-left  60s linear infinite; gap: 56px; }

/* Pause everything when the user hovers anywhere on the wall */
.tm-home-tape-wall:hover .tmh-tape-track { animation-play-state: paused; }

/* Item: the service title in the big row */
.tmh-tape-title-item {
  display: inline-flex;
  align-items: center;
  gap: 36px;
  padding: 0 36px;
  text-decoration: none;
  color: #fff;
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(60px, 9vw, 140px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  transition: color 0.4s var(--tmh-ease), opacity 0.4s var(--tmh-ease);
  white-space: nowrap;
}
.tmh-tape-title-item .num {
  font-size: 0.32em;
  vertical-align: super;
  color: var(--tmh-red);
  margin-right: 8px;
  font-style: italic;
}
/* Hollow-text effect at rest, fills on hover */
.tmh-tape-title-item .word {
  -webkit-text-stroke: 1.5px #fff;
  -webkit-text-fill-color: transparent;
          color: transparent;
  transition: -webkit-text-fill-color 0.4s var(--tmh-ease),
              color 0.4s var(--tmh-ease);
}
.tmh-tape-title-item:hover .word,
.tmh-tape-title-item.is-hot .word {
  -webkit-text-fill-color: #fff;
  color: #fff;
}
.tmh-tape-title-item:hover {
  color: var(--tmh-red-soft);
}
.tmh-tape-title-item:hover .word {
  -webkit-text-stroke-color: var(--tmh-red);
  -webkit-text-fill-color: var(--tmh-red);
  color: var(--tmh-red);
}
/* Star/asterisk separator */
.tmh-tape-title-item::after {
  content: "✱";
  font-style: normal;
  color: var(--tmh-red);
  font-size: 0.4em;
  -webkit-text-stroke: 0;
  -webkit-text-fill-color: var(--tmh-red);
}
.tmh-tape-title-item[data-last]::after { display: none; }

/* Item: tag pills in the middle row */
.tmh-tape-tag-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 14px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  margin: 0 12px;
  font-family: 'Urbanist', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  white-space: nowrap;
  transition: background 0.3s var(--tmh-ease), border-color 0.3s var(--tmh-ease), color 0.3s var(--tmh-ease);
  text-decoration: none;
}
.tmh-tape-tag-item::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--tmh-red);
}
.tmh-tape-tag-item:hover {
  background: var(--tmh-red);
  border-color: var(--tmh-red);
  color: #fff;
}
.tmh-tape-tag-item:hover::before { background: #fff; }

/* Item: small italic description in the bottom row */
.tmh-tape-desc-item {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 0 12px;
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  font-style: italic;
  font-size: 18px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  transition: color 0.3s var(--tmh-ease);
  text-decoration: none;
}
.tmh-tape-desc-item:hover { color: #fff; }
.tmh-tape-desc-item::before {
  content: "—";
  color: var(--tmh-red);
  margin-right: 6px;
  font-style: normal;
}

/* Section CTA below the wall */
.tm-home-tape-foot {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}
.tm-home-tape-foot .tmh-btn {
  background: var(--tmh-red);
  color: #fff;
  border: 1px solid var(--tmh-red);
  padding: 16px 28px;
}
.tm-home-tape-foot .tmh-btn:hover { background: #ff2c30; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tmh-tape-track { animation: none !important; }
  .tm-home-tape-wall { -webkit-mask-image: none; mask-image: none; }
}

/* =========================================================
   SERVICES — HOVER CINEMA (legacy, replaced by tape wall)
   Kept inert below for archival; no markup uses it now.
========================================================= */
.tm-home-cinema {
  position: relative;
  padding: var(--tmh-section-y) 0 calc(var(--tmh-section-y) - 20px);
  background: #faf8f3;          /* warm cream — cinematic neutral */
  color: #1a1714;
  overflow: hidden;
}
.tm-home-cinema::before {
  /* Faint giant numeral in the corner for editorial polish */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(26,23,20,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,23,20,0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  z-index: 0;
}
.tm-home-cinema > .container { position: relative; z-index: 1; }

/* Header */
.tm-home-cinema-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 56px;
}
@media (max-width: 991px) {
  .tm-home-cinema-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 36px; }
}
.tm-home-cinema-head .tmh-eyebrow { color: #7a7166; }
.tm-home-cinema-title {
  font-family: 'Urbanist', sans-serif;
  font-size: clamp(2.1rem, 4.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #1a1714;
  margin: 0;
}
.tm-home-cinema-title .accent {
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--tmh-red);
}
.tm-home-cinema-lede {
  font-size: 16px;
  line-height: 1.7;
  color: #6a6055;
  max-width: 56ch;
  margin: 0;
}

/* Stage — split into list + visual */
.tm-home-cinema-stage {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: stretch;
}
@media (max-width: 991px) {
  .tm-home-cinema-stage { grid-template-columns: 1fr; gap: 32px; }
}

/* LEFT: vertical list of service names (the "menu") */
.tm-home-cinema-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid rgba(26, 23, 20, 0.12);
}
.tmh-cin-row {
  display: block;
  width: 100%;
  text-align: left;
  text-decoration: none;
  background: transparent;
  border: 0;
  padding: 22px 0 18px;
  border-bottom: 1px solid rgba(26, 23, 20, 0.12);
  cursor: pointer;
  font-family: 'Urbanist', sans-serif;
  color: #1a1714;
  position: relative;
  transition: padding 0.5s var(--tmh-ease);
}
.tmh-cin-row:hover { padding-left: 18px; padding-right: 18px; }
/* The big italic-serif name */
.tmh-cin-name {
  display: block;
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: rgba(26, 23, 20, 0.32);   /* dim by default */
  transition: color 0.5s var(--tmh-ease), transform 0.5s var(--tmh-ease);
}
.tmh-cin-row.is-active .tmh-cin-name {
  color: #1a1714;
  transform: translateX(8px);
}
.tmh-cin-row:hover .tmh-cin-name {
  color: #1a1714;
}
/* Tag + counter ribbon */
.tmh-cin-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  font-family: 'Urbanist', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #9a8e7e;
  transition: color 0.4s var(--tmh-ease), opacity 0.4s var(--tmh-ease);
  opacity: 0;
  height: 0;
  overflow: hidden;
}
.tmh-cin-row.is-active .tmh-cin-meta,
.tmh-cin-row:hover .tmh-cin-meta {
  opacity: 1;
  height: auto;
}
.tmh-cin-row.is-active .tmh-cin-meta {
  color: var(--tmh-red);
}
.tmh-cin-num {
  display: inline-flex;
  align-items: baseline;
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  font-style: italic;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: rgba(26, 23, 20, 0.45);
  margin-right: 6px;
  transition: color 0.4s var(--tmh-ease);
}
.tmh-cin-row.is-active .tmh-cin-num { color: var(--tmh-red); }

/* Underline that animates */
.tmh-cin-row::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--tmh-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--tmh-ease);
}
.tmh-cin-row.is-active::after,
.tmh-cin-row:hover::after { transform: scaleX(1); }

/* RIGHT: big visual stage that morphs */
.tm-home-cinema-visual {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 24px;
  overflow: hidden;
  background: #1a1714;
  isolation: isolate;
  align-self: start;
  position: sticky;
  top: 100px;
}
@media (max-width: 991px) {
  .tm-home-cinema-visual { position: relative; top: 0; aspect-ratio: 4/5; }
}

/* Each panel is layered absolutely; only the active one is visible */
.tmh-cin-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px;
  color: #fff;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.6s var(--tmh-ease), transform 6s linear;
  background:
    radial-gradient(120% 80% at 0% 100%, rgba(255,255,255,0.18), transparent 55%),
    radial-gradient(120% 80% at 100% 0%, rgba(0,0,0,0.55), transparent 55%),
    var(--panel-tint, #1a1714);
  pointer-events: none;
}
.tmh-cin-panel.is-active {
  opacity: 1;
  transform: scale(1);    /* slow Ken Burns when active */
  pointer-events: auto;
  z-index: 2;
}
/* Pattern overlay for visual texture */
.tmh-cin-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
}
/* Top row: tag pill + small counter */
.tmh-cin-panel-top {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.tmh-cin-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 12px;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  font-family: 'Urbanist', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #fff;
}
.tmh-cin-pill::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.18);
}
.tmh-cin-counter {
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  font-style: italic;
  font-size: 22px;
  color: rgba(255,255,255,0.7);
  letter-spacing: -0.02em;
}
.tmh-cin-counter .total {
  font-size: 14px;
  margin-left: 4px;
  color: rgba(255,255,255,0.4);
}

/* Big icon centered */
.tmh-cin-panel-core {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
}
.tmh-cin-panel-core img {
  width: clamp(80px, 14vw, 140px);
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

/* Bottom row: title + cta */
.tmh-cin-panel-bottom {
  position: relative;
  z-index: 2;
}
.tmh-cin-panel-title {
  font-family: 'Urbanist', sans-serif;
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  color: #fff;
}
.tmh-cin-panel-desc {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
  margin: 0 0 20px;
  max-width: 38ch;
}
.tmh-cin-panel-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border-radius: 999px;
  background: #fff;
  color: #1a1714;
  font-family: 'Urbanist', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  transition: gap 0.3s var(--tmh-ease), background 0.3s var(--tmh-ease), color 0.3s var(--tmh-ease);
  border: 0;
  cursor: pointer;
}
.tmh-cin-panel-cta:hover {
  background: var(--tmh-red);
  color: #fff;
  gap: 14px;
}
.tmh-cin-panel-cta svg { width: 14px; height: 14px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tmh-cin-panel { transition: opacity 0.01ms !important; transform: none !important; }
}

/* =========================================================
   SERVICES — CARD SPREAD (legacy, replaced by hover-cinema)
   Kept inert below for archival; no markup uses it now.
========================================================= */
.tm-home-spread {
  position: relative;
  padding: var(--tmh-section-y) 0 calc(var(--tmh-section-y) + 40px);
  background:
    radial-gradient(circle at 18% 22%, rgba(236, 32, 36, 0.06), transparent 45%),
    radial-gradient(circle at 82% 78%, rgba(236, 32, 36, 0.04), transparent 50%),
    linear-gradient(180deg, #f7f5ef 0%, #efebe1 100%);
  overflow: hidden;
  perspective: 1600px;
  perspective-origin: center 40%;
}
.tm-home-spread::before,
.tm-home-spread::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
/* Subtle paper-grain noise via SVG data URI */
.tm-home-spread::before {
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.25 0 0 0 0 0.18 0 0 0 0.045 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
  opacity: 0.6;
  mix-blend-mode: multiply;
}
/* Decorative "deck" stack behind everything (top corner) */
.tm-home-spread::after {
  width: 240px;
  height: 320px;
  border: 1px dashed rgba(0, 0, 0, 0.12);
  border-radius: 18px;
  top: 80px;
  right: -120px;
  transform: rotate(8deg);
}

.tm-home-spread > .container { position: relative; z-index: 1; }

/* Section header */
.tm-home-spread-head {
  max-width: 720px;
  margin: 0 0 56px;
  position: relative;
  z-index: 2;
}
.tm-home-spread-head .tmh-eyebrow { color: #6e6555; }
.tm-home-spread-title {
  font-family: 'Urbanist', sans-serif;
  font-size: clamp(2.1rem, 4.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #1a1714;
  margin: 0 0 14px;
}
.tm-home-spread-title .accent {
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--tmh-red);
}
.tm-home-spread-lede {
  font-size: 16px;
  line-height: 1.7;
  color: #6e6555;
  max-width: 56ch;
  margin: 0;
}

/* The canvas where cards float */
.tm-home-spread-canvas {
  position: relative;
  width: 100%;
  height: 760px;
  transform-style: preserve-3d;
  transition: transform 0.8s var(--tmh-ease);
  will-change: transform;
}
/* While cursor is in the section, JS drives canvas transform per
   frame — kill the transition so each rAF update applies instantly,
   no flicker from interrupted 0.8s eases. Snap-back on mouseleave
   uses the default transition above. */
.tm-home-spread-canvas.is-following { transition: none; }
@media (max-width: 1199px) { .tm-home-spread-canvas { height: 720px; } }
@media (max-width: 991px) { .tm-home-spread-canvas { height: auto; } }

/* Individual card */
.tmh-spread-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  padding: 24px 22px 22px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 14px 32px rgba(0, 0, 0, 0.10);
  text-decoration: none;
  color: #1a1714;
  transform-style: preserve-3d;
  transform: rotate(var(--rot, 0deg)) translateZ(var(--z, 0px));
  transition: transform 0.55s var(--tmh-ease),
              box-shadow 0.55s var(--tmh-ease);
  cursor: pointer;
  will-change: transform;
}
.tmh-spread-card::before {
  /* a fake corner-fold shadow for paper feel */
  content: "";
  position: absolute;
  bottom: 0; right: 0;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.06) 50%);
  border-radius: 0 0 14px 0;
}
.tmh-spread-card:hover {
  /* z-index: 99 — must beat every resting z-index by a wide margin so
     the lifted card always wins the stacking war when overlapping a
     neighbour. translateZ(60) also wins on the 3D z-axis. */
  z-index: 99;
  transform: rotate(0deg) translateZ(60px) scale(1.03);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.18),
    0 4px 8px rgba(236, 32, 36, 0.12);
  color: #1a1714;
}
/* While JS is updating transform per-frame for cursor-tilt, kill the
   transition on transform so each frame applies instantly. The
   `transition: none` only zeroes transform — box-shadow still eases
   so the lift/glow is smooth on enter/leave. */
.tmh-spread-card.is-tilting {
  transition: box-shadow 0.55s var(--tmh-ease);
}
/* Dim siblings ONLY when a card is actively hovered (not when cursor
   is just somewhere in the section). Using :has() instead of :hover
   on the parent prevents the "all cards dim during transit between
   overlapping cards" flicker — siblings stay at full clarity until
   one card is locked-in as hovered, then ALL OTHERS dim together. */
.tm-home-spread-canvas:has(.tmh-spread-card:hover) .tmh-spread-card:not(:hover) {
  filter: saturate(0.7) brightness(0.96);
  opacity: 0.86;
}

/* Numeral + tag at top */
.tmh-spread-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}
.tmh-spread-num {
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 32px;
  line-height: 1;
  color: var(--tmh-red);
  letter-spacing: -0.02em;
}
.tmh-spread-tag {
  font-family: 'Urbanist', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #6e6555;
  padding-bottom: 1px;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.18);
}

.tmh-spread-title {
  font-family: 'Urbanist', sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: #1a1714;
}
.tmh-spread-card.is-feature .tmh-spread-title {
  font-size: 30px;
  line-height: 1.1;
  margin-bottom: 14px;
}
.tmh-spread-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: #5a5246;
  margin: 0;
  flex: 1;
}
.tmh-spread-cta {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Urbanist', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #1a1714;
  align-self: flex-start;
}
.tmh-spread-cta::after {
  content: "";
  width: 22px; height: 1px;
  background: currentColor;
  transition: width 0.4s var(--tmh-ease), background 0.3s var(--tmh-ease);
}
.tmh-spread-card:hover .tmh-spread-cta { color: var(--tmh-red); }
.tmh-spread-card:hover .tmh-spread-cta::after { width: 36px; background: var(--tmh-red); }

/* Hand-placed positions — overlapping spread (the "impressive" layout
   the user wants kept). Hover trap fixed below by using :has() so
   siblings only dim when a card is ACTIVELY hovered, and by raising
   the hovered card's z-index very high. */

/* Hand-placed positions — overlapping spread, but tuned so each
   neighbor pair only shares a corner-sliver (≤30px on either axis),
   never a big chunk of card body. Visual rules:
     • c-1 ↔ c-2: c-2 just kisses c-1's right edge
     • c-7 ↔ c-4: c-4 starts ~25px before c-7 ends → corner only
     • c-5 ↔ c-6: c-6 nudged way right so it just kisses c-5's
       bottom-right corner (no body overlap)                    */

.tmh-spread-card.c-1 { /* AI Agent — feature dark slab (top-left) */
  top: 0; left: 4%; width: 300px; height: 360px;
  --rot: -3deg; --z: 30px;
  background: #1a1714; color: #fff;
  border-color: rgba(255,255,255,0.08);
  z-index: 6;
}
.tmh-spread-card.c-1 .tmh-spread-title,
.tmh-spread-card.c-1 .tmh-spread-cta { color: #fff; }
.tmh-spread-card.c-1 .tmh-spread-desc { color: rgba(255,255,255,0.72); }
.tmh-spread-card.c-1 .tmh-spread-tag { color: rgba(255,255,255,0.55); border-bottom-color: rgba(255,255,255,0.18); }
.tmh-spread-card.c-1 .tmh-spread-num { color: var(--tmh-red-soft); }
.tmh-spread-card.c-1::before { display: none; }

.tmh-spread-card.c-2 { /* Mobile — top-mid, kisses c-1 right edge */
  top: 60px; left: 30%; width: 220px; height: 250px;
  --rot: 4deg; --z: 0px;
  z-index: 5;
}

.tmh-spread-card.c-3 { /* Chatbot — top-right, freestanding */
  top: 30px; right: 6%; width: 250px; height: 290px;
  --rot: -5deg; --z: 18px;
  background: #faf3ec;
  z-index: 4;
}
.tmh-spread-card.c-3 .tmh-spread-num { font-size: 38px; }

.tmh-spread-card.c-4 { /* Software — wide, mid-row */
  top: 400px; left: 22%; width: 340px; height: 210px;
  --rot: 2deg; --z: 12px;
  z-index: 3;
}
.tmh-spread-card.c-4 .tmh-spread-title { font-size: 22px; }

.tmh-spread-card.c-5 { /* Digital Marketing — light yellow */
  top: 380px; right: 22%; width: 230px; height: 240px;
  --rot: 6deg; --z: 24px;
  background: #fff8e8;
  z-index: 5;
}

.tmh-spread-card.c-6 { /* Consulting — brand red, bottom-right corner */
  top: 540px; right: 1%; width: 220px; height: 180px;
  --rot: -7deg; --z: 8px;
  background: var(--tmh-red);
  color: #fff;
  border-color: rgba(255,255,255,0.16);
  z-index: 4;
}
.tmh-spread-card.c-6 .tmh-spread-title,
.tmh-spread-card.c-6 .tmh-spread-cta { color: #fff; }
.tmh-spread-card.c-6 .tmh-spread-desc { color: rgba(255,255,255,0.86); }
.tmh-spread-card.c-6 .tmh-spread-tag { color: rgba(255,255,255,0.7); border-bottom-color: rgba(255,255,255,0.3); }
.tmh-spread-card.c-6 .tmh-spread-num { color: #fff; }
.tmh-spread-card.c-6::before { display: none; }

.tmh-spread-card.c-7 { /* CMS — mid-left */
  top: 430px; left: 2%; width: 220px; height: 220px;
  --rot: -2deg; --z: 6px;
  z-index: 3;
}

/* Tablet (992-1199px) — same arrangement, scaled in */
@media (max-width: 1199px) {
  .tmh-spread-card.c-1 { left: 2%;   top: 0;   width: 270px; height: 320px; }
  .tmh-spread-card.c-2 { left: 32%;  top: 50px; width: 200px; height: 230px; }
  .tmh-spread-card.c-3 { right: 3%;  top: 30px; width: 230px; height: 270px; }
  .tmh-spread-card.c-4 { left: 22%;  top: 360px; width: 320px; height: 200px; }
  .tmh-spread-card.c-5 { right: 22%; top: 340px; width: 210px; height: 220px; }
  .tmh-spread-card.c-6 { right: 0;   top: 510px; width: 200px; height: 180px; }
  .tmh-spread-card.c-7 { left: 1%;   top: 390px; width: 210px; height: 210px; }
}

/* On tablet/mobile we drop the absolute spread and use a clean
   stacked deck instead — the spread layout falls apart on narrow
   widths. Keeps the dark + red + cream card variety for visual
   interest. */
@media (max-width: 991px) {
  .tm-home-spread-canvas {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: auto;
    perspective: none;
    transform: none !important;
  }
  .tmh-spread-card {
    position: static;
    width: 100% !important;
    height: auto !important;
    max-width: 520px;
    min-height: 180px;
    margin: 0 auto;
    --rot: 0deg !important;
    --z: 0px !important;
    transform: none !important;
  }
  .tmh-spread-card:hover {
    transform: translateY(-4px) !important;
  }
  .tm-home-spread-canvas:hover .tmh-spread-card:not(:hover) {
    filter: none; opacity: 1;
  }
  .tmh-spread-card:nth-child(odd) {
    align-self: flex-start;
  }
  .tmh-spread-card:nth-child(even) {
    align-self: flex-end;
  }
}
@media (max-width: 575px) {
  .tmh-spread-card {
    align-self: stretch !important;
    max-width: 100%;
  }
}

/* Reduced motion — kill 3D / parallax */
@media (prefers-reduced-motion: reduce) {
  .tm-home-spread-canvas { transform: none !important; transition: none; }
  .tmh-spread-card { transition: none; }
}

/* =========================================================
   TESTIMONIALS — VIDEO ROW
   Row of 6 portrait cards. Each shows a still image at rest;
   on hover the video plays inline (muted loop). Italic-serif
   caption below each card. White background. Inspired by
   neosapien.xyz feature row.
========================================================= */
.tm-home-spotlight {
  position: relative;
  padding: var(--tmh-section-y) 0;
  background: #ffffff;
  color: var(--tmh-text);
  overflow: hidden;
}
.tm-home-spotlight::before {
  content: "\201C";
  position: absolute;
  top: -40px;
  right: -10px;
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(280px, 40vw, 520px);
  line-height: 1;
  color: rgba(236, 32, 36, 0.05);
  pointer-events: none;
  z-index: 0;
  user-select: none;
}
.tm-home-spotlight > .container { position: relative; z-index: 1; }

/* Header */
.tm-home-spotlight-head {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 64px;
}
@media (max-width: 991px) {
  .tm-home-spotlight-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; }
}
.tm-home-spotlight-title {
  font-family: 'Urbanist', sans-serif;
  font-size: clamp(2.1rem, 4.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--tmh-text);
  margin: 0;
}
.tm-home-spotlight-title .accent {
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--tmh-red);
}
.tm-home-spotlight-lede {
  font-size: 16px;
  line-height: 1.7;
  color: var(--tmh-text-soft);
  max-width: 56ch;
  margin: 0 0 24px;
}

/* Lede + scroll arrow buttons grouped together (the user wanted the
   arrows sitting "near to this text"). */
.tmh-spot-head-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.tmh-spot-arrows {
  display: flex;
  gap: 10px;
}
.tmh-spot-arrow {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--tmh-line-2);
  background: transparent;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.3s var(--tmh-ease),
              border-color 0.3s var(--tmh-ease),
              opacity 0.3s var(--tmh-ease);
}
.tmh-spot-arrow:hover { background: var(--tmh-text); border-color: var(--tmh-text); }
.tmh-spot-arrow:hover svg path { stroke: #fff; }
.tmh-spot-arrow:disabled {
  opacity: 0.30;
  cursor: not-allowed;
  background: transparent;
  border-color: var(--tmh-line-2);
}
.tmh-spot-arrow:disabled:hover svg path { stroke: #0e0e10; }

/* Row of testimonial cards — horizontal scroll, 4 visible at a time.
   Scrollbar hidden; user navigates via the prev/next buttons in the
   head (or native trackpad/touch swipe). Scroll-snap keeps cards
   aligned to the leading edge after a flick. */
.tm-home-spotlight-row {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 0 8px;
  margin: 0 -4px;
}
.tm-home-spotlight-row::-webkit-scrollbar { display: none; }

.tmh-spot-card {
  /* 4 cards visible with 3 gaps between → fixed flex-basis so two
     more cards live off-screen until the user scrolls. */
  flex: 0 0 calc((100% - 54px) / 4);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  scroll-snap-align: start;
}
@media (max-width: 1199px) {
  .tmh-spot-card { flex: 0 0 calc((100% - 36px) / 3); } /* 3 visible */
}
@media (max-width: 767px) {
  .tmh-spot-card { flex: 0 0 calc((100% - 18px) / 2); } /* 2 visible */
}
@media (max-width: 480px) {
  .tmh-spot-card { flex: 0 0 78%; } /* peek of next */
}

/* Portrait media frame — image by default, video fades in on hover */
.tmh-spot-card-media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  overflow: hidden;
  background: var(--tmh-bg-dark);
  isolation: isolate;
  cursor: pointer;
  transition: transform 0.5s var(--tmh-ease),
              box-shadow 0.5s var(--tmh-ease);
}
.tmh-spot-card:hover .tmh-spot-card-media {
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.16);
}
.tmh-spot-card-media img,
.tmh-spot-card-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tmh-spot-card-media img {
  z-index: 1;
  transition: opacity 0.45s var(--tmh-ease),
              transform 6s linear;
}
.tmh-spot-card-media video {
  z-index: 2;
  opacity: 0;
  transition: opacity 0.45s var(--tmh-ease);
}
.tmh-spot-card.is-playing .tmh-spot-card-media video { opacity: 1; }
.tmh-spot-card.is-playing .tmh-spot-card-media img { opacity: 0; }

/* Tinted color overlay (per-card hue from --tint).
   At rest: a gradient color wash + slight darkening at the bottom for
   legibility. On hover (.is-playing) it fades out so the video shows
   in full color. The tint colour is set inline on each card via
   `style="--tint: #...."`. */
.tmh-spot-card-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, var(--tint, #1a1714) 0%, rgba(0,0,0,0.10) 100%);
  mix-blend-mode: multiply;
  opacity: 0.55;
  transition: opacity 0.45s var(--tmh-ease);
  pointer-events: none;
}
.tmh-spot-card.is-playing .tmh-spot-card-media::before { opacity: 0; }

/* Subtle dark bottom gradient — keeps the play hint readable at rest,
   fades out on hover. */
.tmh-spot-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
  transition: opacity 0.4s var(--tmh-ease);
}
.tmh-spot-card.is-playing .tmh-spot-card-media::after { opacity: 0; }

/* Tiny "play" hint badge in bottom-right of card at rest */
.tmh-spot-card-hint {
  position: absolute;
  bottom: 14px; right: 14px;
  z-index: 4;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  transition: opacity 0.4s var(--tmh-ease), transform 0.4s var(--tmh-ease);
}
.tmh-spot-card-hint::after {
  content: "";
  width: 0; height: 0;
  border-style: solid;
  border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent var(--tmh-red);
  margin-left: 2px;
}
.tmh-spot-card.is-playing .tmh-spot-card-hint {
  opacity: 0;
  transform: scale(0.7);
}

/* Caption below the card */
.tmh-spot-card-cap {
  margin: 18px 4px 0;
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.4;
  color: var(--tmh-text-soft);
  text-align: center;
}
.tmh-spot-card-cap .name {
  font-family: 'Urbanist', sans-serif;
  font-style: normal;
  font-weight: 700;
  color: var(--tmh-text);
  font-size: clamp(15px, 1.15vw, 17px);
  display: block;
  margin-bottom: 2px;
  letter-spacing: -0.01em;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tmh-spot-card-media,
  .tmh-spot-card-media video,
  .tmh-spot-card-media img { transition: none !important; }
  .tmh-spot-card-media video { display: none; }
  .tmh-spot-card.is-playing .tmh-spot-card-media img { opacity: 1; }
}

/* =========================================================
   SERVICES — EDITORIAL INDEX (legacy, replaced by spread)
   Kept inert below for archival; no markup uses it now.
========================================================= */
.tm-home-index {
  position: relative;
  padding: var(--tmh-section-y) 0;
  background: #faf8f3;          /* warm cream — unique to this section */
  color: #1a1714;
}
.tm-home-index::before {
  /* Soft top + bottom hairlines for editorial polish */
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: rgba(0, 0, 0, 0.06);
}

/* Header — two-column editorial */
.tm-home-index-head {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 80px;
}
@media (max-width: 991px) {
  .tm-home-index-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 56px; }
}

/* Eyebrow recolor for cream bg */
.tm-home-index .tmh-eyebrow {
  color: #7a7166;
}

/* Title — sans + italic serif mix */
.tm-home-index-title {
  font-family: 'Urbanist', sans-serif;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #1a1714;
  margin: 0 0 8px;
}
.tm-home-index-title .serif {
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--tmh-red);
}

/* Lede paragraph */
.tm-home-index-lede {
  font-size: 16px;
  line-height: 1.7;
  color: #6a6055;
  max-width: 56ch;
  margin: 0;
}

/* Counter strip — small marker that says "01 / 07" */
.tm-home-index-counter {
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  color: #9a8e7e;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.tm-home-index-counter::before {
  content: "—";
  color: var(--tmh-red);
}

/* The list */
.tm-home-index-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid rgba(26, 23, 20, 0.10);
}
.tmh-idx-row {
  display: grid;
  grid-template-columns: 160px 1.2fr 2fr 56px;
  gap: 36px;
  align-items: center;
  padding: 36px 0;
  border-bottom: 1px solid rgba(26, 23, 20, 0.10);
  text-decoration: none;
  color: #1a1714;
  position: relative;
  transition: padding 0.5s var(--tmh-ease), background 0.5s var(--tmh-ease);
  cursor: pointer;
}
/* Hover: red line slides in from left along the bottom */
.tmh-idx-row::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--tmh-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--tmh-ease);
}
.tmh-idx-row:hover::after { transform: scaleX(1); }
.tmh-idx-row:hover {
  padding-left: 24px;
  padding-right: 24px;
  background: rgba(255, 255, 255, 0.5);
  color: #1a1714;
}

/* Italic serif numeral — the visual hero */
.tmh-idx-num {
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(60px, 10vw, 120px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: #1a1714;
  transition: color 0.45s var(--tmh-ease), transform 0.55s var(--tmh-ease);
  display: block;
  user-select: none;
}
.tmh-idx-row:hover .tmh-idx-num {
  color: var(--tmh-red);
  transform: translateX(-6px);
}

/* Title block (service name + tag) */
.tmh-idx-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tmh-idx-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Urbanist', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--tmh-red);
  align-self: flex-start;
}
.tmh-idx-tag::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
}
.tmh-idx-title {
  font-family: 'Urbanist', sans-serif;
  font-size: clamp(1.3rem, 2.2vw, 1.85rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0;
  color: #1a1714;
}

/* Description column */
.tmh-idx-desc {
  font-size: 15px;
  line-height: 1.6;
  color: #6a6055;
  margin: 0;
  max-width: 52ch;
}

/* Arrow circle — rotates -45° on hover */
.tmh-idx-arr {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(26, 23, 20, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  flex-shrink: 0;
  transition: background 0.45s var(--tmh-ease),
              border-color 0.45s var(--tmh-ease),
              transform 0.55s var(--tmh-ease);
}
.tmh-idx-arr svg {
  width: 18px;
  height: 18px;
  transition: stroke 0.3s var(--tmh-ease);
}
.tmh-idx-row:hover .tmh-idx-arr {
  background: var(--tmh-red);
  border-color: var(--tmh-red);
  transform: rotate(-45deg);
}
.tmh-idx-row:hover .tmh-idx-arr svg path { stroke: #fff; }

/* Mobile responsive */
@media (max-width: 991px) {
  .tmh-idx-row {
    grid-template-columns: 84px 1fr 56px;
    grid-template-rows: auto auto;
    column-gap: 22px;
    row-gap: 14px;
    padding: 28px 0;
  }
  .tmh-idx-num {
    grid-column: 1;
    grid-row: 1 / span 2;
    font-size: 64px;
    align-self: center;
  }
  .tmh-idx-meta { grid-column: 2; grid-row: 1; }
  .tmh-idx-desc { grid-column: 2; grid-row: 2; max-width: none; }
  .tmh-idx-arr  { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
}
@media (max-width: 575px) {
  .tmh-idx-row {
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto;
    column-gap: 18px;
  }
  .tmh-idx-num { font-size: 48px; grid-column: 1; grid-row: 1 / span 2; }
  .tmh-idx-meta { grid-column: 2; grid-row: 1; }
  .tmh-idx-desc { grid-column: 1 / -1; grid-row: 2; }
  .tmh-idx-arr { display: none; }
  .tmh-idx-row:hover { padding-left: 12px; padding-right: 12px; }
}

/* (Old SERVICES ORBIT block removed — replaced by .tm-home-index above.
   Old chip/center/info-panel CSS deleted. Mobile orbit list also gone.) */

/* =========================================================
   SERVICES (legacy bento grid — replaced by orbit, kept for
   archival; no markup currently uses these classes)
========================================================= */
.tm-home-services {
  position: relative;
  padding: var(--tmh-section-y) 0;
  background: var(--tmh-bg);
  overflow: hidden;
  isolation: isolate;
}

/* Atmospheric drifting blobs */
.tm-home-services-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.tm-home-services-bg::before,
.tm-home-services-bg::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}
.tm-home-services-bg::before {
  width: 520px; height: 520px;
  background: rgba(236, 32, 36, 0.10);
  top: -160px; left: -120px;
  animation: tmh-svc-blob-a 22s ease-in-out infinite;
}
.tm-home-services-bg::after {
  width: 460px; height: 460px;
  background: rgba(236, 32, 36, 0.07);
  bottom: -180px; right: -120px;
  animation: tmh-svc-blob-b 26s ease-in-out infinite;
}
@keyframes tmh-svc-blob-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(80px, 60px) scale(1.08); }
}
@keyframes tmh-svc-blob-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-100px, -50px) scale(0.94); }
}
.tm-home-services > .container { position: relative; z-index: 1; }

.tm-home-services-head {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: end;
  margin-bottom: 56px;
}
@media (max-width: 991px) {
  .tm-home-services-head { grid-template-columns: 1fr; gap: 24px; }
}

.tm-home-services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 991px) { .tm-home-services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .tm-home-services-grid { grid-template-columns: 1fr; } }

/* Card */
.tmh-svc-card {
  position: relative;
  display: block;
  padding: 32px 28px 28px;
  background: #fff;
  border: 1px solid var(--tmh-line);
  border-radius: 18px;
  text-decoration: none;
  color: var(--tmh-text);
  overflow: hidden;
  isolation: isolate;
  min-height: 260px;
  transition: transform 0.5s var(--tmh-ease),
              border-color 0.5s var(--tmh-ease),
              box-shadow 0.5s var(--tmh-ease);
}
.tmh-svc-card.is-feature {
  grid-column: span 2;
  min-height: 280px;
}
@media (max-width: 575px) {
  .tmh-svc-card.is-feature { grid-column: span 1; }
}

/* Cursor-aware gradient sweep */
.tmh-svc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 0%),
    rgba(236, 32, 36, 0.16),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.5s var(--tmh-ease);
  pointer-events: none;
  z-index: -1;
}
.tmh-svc-card:hover::before { opacity: 1; }

/* Lift + glow on hover */
.tmh-svc-card:hover {
  transform: translateY(-6px);
  border-color: rgba(236, 32, 36, 0.32);
  box-shadow: 0 18px 48px rgba(236, 32, 36, 0.12);
  color: var(--tmh-text);
}

/* Icon tile (black → red, rotates on hover) */
.tmh-svc-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--tmh-text);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
  transition: background 0.45s var(--tmh-ease),
              transform 0.5s var(--tmh-ease);
  position: relative;
}
.tmh-svc-icon img {
  width: 26px; height: 26px;
  filter: brightness(0) invert(1);
  transition: transform 0.55s var(--tmh-ease);
}
.tmh-svc-card.is-feature .tmh-svc-icon { width: 64px; height: 64px; }
.tmh-svc-card.is-feature .tmh-svc-icon img { width: 30px; height: 30px; }
.tmh-svc-card:hover .tmh-svc-icon {
  background: var(--tmh-red);
  transform: rotate(-8deg) scale(1.06);
}
.tmh-svc-card:hover .tmh-svc-icon img { transform: rotate(8deg); }

/* Title + desc */
.tmh-svc-title {
  font-family: 'Urbanist', sans-serif;
  font-size: 20px; font-weight: 600;
  line-height: 1.25;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
  color: var(--tmh-text);
}
.tmh-svc-card.is-feature .tmh-svc-title { font-size: 28px; line-height: 1.2; }
.tmh-svc-desc {
  font-size: 14px; line-height: 1.6;
  color: var(--tmh-text-soft);
  margin: 0;
}
.tmh-svc-card.is-feature .tmh-svc-desc { font-size: 15px; max-width: 52ch; }

/* Floating arrow chip in top-right (appears on hover) */
.tmh-svc-arrow {
  position: absolute;
  top: 22px; right: 22px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--tmh-red);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transform: translate(10px, -10px) scale(0.7);
  transition: opacity 0.4s var(--tmh-ease), transform 0.45s var(--tmh-ease);
  pointer-events: none;
}
.tmh-svc-arrow svg { width: 14px; height: 14px; stroke: #fff; }
.tmh-svc-card:hover .tmh-svc-arrow {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* =========================================================
   PREFERS-REDUCED-MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
  .tm-home *,
  .tm-home *::before,
  .tm-home *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .tmh-reveal { opacity: 1; transform: none; }
  .tm-home-trust-track { animation: none; }
}