/* ==========================================================================
   THE DIVINE WORKSHOP — GRAND / COMMERCIAL PATTERNS
   v2.0 · Aug 2026
   Old money palette + cinematic animations. Layered on top of site.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   PALETTE ADDITIONS — old money
   Kept the existing --tdw-seal (terracotta) as the primary CTA accent.
   Added emerald (for dark section backgrounds, classical rooms) and brass
   (for fine details, hairline rules, gold leaf). Together they give the
   classical Georgian / English country house contrast: ivory + emerald +
   oxblood + brass + ink.
   -------------------------------------------------------------------------- */

:root {
  --tdw-emerald:  #0E3B2C;   /* deep library green — dark contexts    */
  --tdw-emerald-deep: #082218; /* deeper emerald — for shadows          */
  --tdw-brass:    #A88B45;   /* aged brass — hairlines, accents       */
  --tdw-brass-deep: #6B5729; /* deeper brass — pressed states          */
  --tdw-oxblood:  #5B1A18;   /* deep wine — occasional accent         */
  --tdw-cream:    #F2EAD3;   /* warmer paper, classical ivory         */

  /* Override the old paper for a warmer, classical cream */
  --bg:           var(--tdw-cream);
  --bg-panel:     #E5DBC2;
  --rule:         #C9BD9C;
  --rule-hair:    rgba(38, 34, 31, 0.12);

  /* Re-bind the "dark" surface to emerald so the dark sections feel
     like the wood-paneled library, not just a black block. */
  --bg-dark:      var(--tdw-emerald);
  --bg-dark-deep: var(--tdw-emerald-deep);
  --fg-on-dark:   #F2EAD3;
  --fg-muted-dark:#A8B0A0;
  --rule-on-dark: rgba(242, 234, 211, 0.18);
}

/* --------------------------------------------------------------------------
   GLOBAL — cinematic motion
   -------------------------------------------------------------------------- */

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   STICKY GRAND NAV
   -------------------------------------------------------------------------- */

.tdw-grand-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(242, 234, 211, 0.88);
  border-bottom: 1px solid var(--rule-hair);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}
.tdw-grand-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-4);
  padding-inline: var(--gutter);   /* honor the gutter token even when .tdw-wrap is also on this element */
}
.tdw-grand-nav__mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--fg);
}
.tdw-grand-nav__mark img { width: 40px; height: 40px; transition: transform 600ms var(--ease); }
.tdw-grand-nav__mark:hover img { transform: rotate(-3deg); }
.tdw-grand-nav__mark .tdw-wordmark {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   HAMBURGER MENU BUTTON — hidden at >768px, visible at <=768px.
   44x44 px touch target. Brand tokens + fonts only. Pure CSS icon (no SVG).
   --------------------------------------------------------------------------
*/
.tdw-grand-nav__menu-btn {
  /* Hidden by default (desktop); shown only inside the @media (max-width: 768px) block below. */
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--bg);
  color: var(--fg);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--dur) var(--ease);
}
.tdw-grand-nav__menu-btn:hover { border-color: var(--accent); }
.tdw-grand-nav__menu-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.tdw-grand-nav__menu-btn-icon,
.tdw-grand-nav__menu-btn-icon::before,
.tdw-grand-nav__menu-btn-icon::after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 220ms var(--ease), opacity 220ms var(--ease);
}
.tdw-grand-nav__menu-btn-icon::before { transform: translate(-50%, calc(-50% - 7px)); }
.tdw-grand-nav__menu-btn-icon::after  { transform: translate(-50%, calc(-50% + 7px)); }
/* When the menu is open: icon becomes an X. */
.tdw-grand-nav__menu-btn[aria-expanded="true"] .tdw-grand-nav__menu-btn-icon            { transform: translate(-50%, -50%) rotate(45deg); }
.tdw-grand-nav__menu-btn[aria-expanded="true"] .tdw-grand-nav__menu-btn-icon::before   { opacity: 0; }
.tdw-grand-nav__menu-btn[aria-expanded="true"] .tdw-grand-nav__menu-btn-icon::after    { transform: translate(-50%, -50%) rotate(-90deg); }

.tdw-grand-nav__links {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  align-items: center;
}

/* At <=480px the nav becomes a single compact row: flame + a smaller
   wordmark + scrollable links + CTA. No 3-line wrap. */
@media (max-width: 480px) {
  .tdw-grand-nav__inner {
    gap: var(--space-3);
    flex-wrap: nowrap;
  }
  /* Keep the wordmark visible at small widths, just smaller. The
     founder's review (2026-09-19) called this out: at 360 only the flame
     was left, which read as an anonymous header. */
  .tdw-grand-nav__mark .tdw-wordmark {
    display: inline;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    line-height: 1.05;
    white-space: normal;
    max-width: 9.5rem;   /* keep the lockup from spilling past the button */
  }
  .tdw-grand-nav__mark img { width: 32px; height: 32px; }
  .tdw-grand-nav__links {
    gap: var(--space-3);
    flex: 1 1 auto;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .tdw-grand-nav__links::-webkit-scrollbar { display: none; }
  .tdw-grand-nav__links a {
    flex: 0 0 auto;
    font-size: var(--size-mark-sm);
    white-space: nowrap;
  }
  .tdw-grand-nav__cta { padding: 8px var(--space-3); }
}
.tdw-grand-nav__links a {
  font-family: var(--font-mark);
  font-size: var(--size-mark);
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  color: var(--fg-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  position: relative;
}
.tdw-grand-nav__links a:hover,
.tdw-grand-nav__links a[aria-current="page"] {
  color: var(--fg);
  border-bottom-color: var(--tdw-brass);
}
.tdw-grand-nav__cta {
  font-family: var(--font-mark);
  font-size: var(--size-mark);
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  background: var(--tdw-ink);
  color: var(--bg);
  padding: 12px var(--space-5);
  text-decoration: none;
  border: 1px solid var(--tdw-ink);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: color 320ms var(--ease);
}
.tdw-grand-nav__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tdw-brass);
  transform: translateX(-101%);
  transition: transform 360ms var(--ease);
  z-index: -1;
  pointer-events: none;
}
.tdw-grand-nav__cta:hover { color: var(--tdw-ink); }
.tdw-grand-nav__cta:hover::before { transform: translateX(0); }

/* CTA current-page state — on the contact page, the CTA is the page indicator.
   Keep the cream text + dark bg (still readable), swap the border to emerald
   to signal "you are here", and disable hover. */
.tdw-grand-nav__cta[aria-current="page"] {
  border-color: var(--tdw-emerald);
  cursor: default;
  pointer-events: none;
}
.tdw-grand-nav__cta[aria-current="page"]::before { display: none; }
.tdw-grand-nav__cta[aria-current="page"]:hover { color: var(--fg-on-dark); }
@media (max-width: 880px) {
  .tdw-grand-nav__links { gap: var(--space-4); }
  .tdw-grand-nav__links a { font-size: var(--size-mark-sm); }
  .tdw-grand-nav__cta { display: none; }
}

/* --------------------------------------------------------------------------
   MOBILE NAV (<=768px) — hamburger pattern.

   Closed state: menu button on the right, nav links hidden, CTA hidden.
   Open state: nav links + CTA stack into a full-width drop-down panel
   directly below the header. Body scroll is locked while the menu is open.

   Stacking rules (restored 2026-09-19 after founder review):
   - The header (.tdw-grand-nav, z-index 50) stays on top.
   - The menu button inside the header (z-index 51) is on top of the header.
   - The mobile panel (z-index 49) sits below the header, full width,
     its own background (--bg) — visible above the hero and other sections.
   - The CTA "Begin a project" appears as the LAST element of the open
     panel — i.e. moved into the panel via .tdw-grand-nav.is-nav-open
     flow. The CTA's closed-state position is overridden by display:none.
   - body[data-nav-open="true"] locks the body scroll.

   No-JS fallback (in <noscript>): at <=768px, hide the menu button and
   show the links + CTA stacked inline (each link >=44px tall).
   --------------------------------------------------------------------------
*/
@media (max-width: 768px) {
  .tdw-grand-nav__menu-btn { display: inline-flex; }

  /* Closed: hide the inline links and CTA. */
  .tdw-grand-nav:not(.is-nav-open) > .tdw-grand-nav__inner > .tdw-grand-nav__links,
  .tdw-grand-nav:not(.is-nav-open) > .tdw-grand-nav__inner > .tdw-grand-nav__cta {
    display: none;
  }

  /* Open: header stays on top (z-index 50) and the button (z-index 51)
     sits on top of the header so the close (X) icon is always visible.
     Drop backdrop-filter while open because backdrop-filter creates a
     containing block for fixed descendants — we want the panel positioned
     against the viewport, not the header. */
  .tdw-grand-nav.is-nav-open {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .tdw-grand-nav.is-nav-open > .tdw-grand-nav__inner > .tdw-grand-nav__menu-btn {
    z-index: 51;        /* explicit stacking above the panel */
  }

  /* Open: panel drops below the header, full viewport width, its own
     background, above the hero / CTA layer. */
  .tdw-grand-nav.is-nav-open > .tdw-grand-nav__inner > .tdw-grand-nav__links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: fixed;
    top: var(--tdw-nav-h, 64px);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg);
    border-top: 1px solid var(--rule-hair);
    padding: var(--space-3) var(--gutter) calc(var(--space-7) + 56px + var(--space-3));
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 49;        /* below the header (50), above hero + sections */
  }
  .tdw-grand-nav.is-nav-open > .tdw-grand-nav__inner > .tdw-grand-nav__links a {
    display: flex;
    align-items: center;
    min-height: 44px;       /* WCAG 2.5.5 target size */
    font-size: var(--size-body);
    letter-spacing: var(--track-mark);
    border-bottom: 1px solid var(--rule-hair);
    padding: var(--space-3) 0;
  }
  .tdw-grand-nav.is-nav-open > .tdw-grand-nav__inner > .tdw-grand-nav__links a:last-child {
    border-bottom: 0;
  }
  .tdw-grand-nav.is-nav-open > .tdw-grand-nav__inner > .tdw-grand-nav__links a[aria-current="page"] {
    color: var(--fg);
    border-bottom-color: var(--accent);
  }
  /* Open: CTA "Begin a project" becomes the LAST list item inside the
     panel — in-flow inside the panel, full width, with comfortable
     padding. Overlay on top of the nav itself would obscure the close
     button. */
  .tdw-grand-nav.is-nav-open > .tdw-grand-nav__inner > .tdw-grand-nav__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: var(--gutter);
    right: var(--gutter);
    bottom: var(--space-4);
    min-height: 48px;
    z-index: 49;        /* same layer as the panel — in front of hero etc. */
  }
}

/* Body scroll lock while the nav is open (no layout shift). */
body[data-nav-open="true"] { overflow: hidden; }

/* --------------------------------------------------------------------------
   NO-JS FALLBACK (<=768px) — show the links stacked without a button.
   --------------------------------------------------------------------------
*/
@media (max-width: 768px) {
  .no-js .tdw-grand-nav__menu-btn { display: none; }
  .no-js .tdw-grand-nav > .tdw-grand-nav__inner > .tdw-grand-nav__links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-block: var(--space-3);
  }
  .no-js .tdw-grand-nav > .tdw-grand-nav__inner > .tdw-grand-nav__links a {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: var(--size-body);
    border-bottom: 1px solid var(--rule-hair);
    padding: var(--space-3) 0;
  }
  .no-js .tdw-grand-nav > .tdw-grand-nav__inner > .tdw-grand-nav__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--space-3);
    min-height: 44px;
  }
}

/* --------------------------------------------------------------------------
   HERO — cinematic, full bleed, Ken Burns, text reveal
   -------------------------------------------------------------------------- */

.tdw-grand-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  background: var(--tdw-ink);
  color: var(--fg-on-dark);
  overflow: hidden;
}
.tdw-grand-hero--compact {
  min-height: 64vh;
  min-height: 64dvh;
}
/* Dark-overlay modifier used on workshop/about hero with the new workshop
   background. The hero inline style already blends a 0.55-alpha linear-gradient
   on top of the bg image (background-blend-mode: multiply); this modifier
   bumps the title contrast so headlines stay WCAG AA on the busy render. */
.tdw-grand-hero--dim .tdw-grand-hero__bg { opacity: 0.62; }
.tdw-grand-hero--dim .tdw-grand-hero__scrim {
  background:
    linear-gradient(180deg, rgba(8,34,24,0.85) 0%, rgba(8,34,24,0.55) 35%, rgba(8,34,24,0.85) 100%),
    radial-gradient(ellipse at center, transparent 0%, rgba(8,34,24,0.7) 100%);
}
.tdw-grand-hero__bg {
  position: absolute;
  inset: -4%; /* bleed for ken-burns travel */
  background-size: cover;
  background-position: center;
  opacity: 0.78;
  z-index: 0;
  animation: tdw-kenburns 28s ease-in-out infinite alternate;
  will-change: transform;
}
.tdw-grand-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8,34,24,0.78) 0%, rgba(8,34,24,0.45) 35%, rgba(8,34,24,0.78) 100%),
    radial-gradient(ellipse at center, transparent 0%, rgba(8,34,24,0.55) 100%);
  z-index: 1;
}
@keyframes tdw-kenburns {
  0%   { transform: scale(1.04) translate(0, 0); }
  100% { transform: scale(1.14) translate(-1.5%, -1%); }
}
.tdw-grand-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 64rem;
  padding-block: var(--space-10);
  padding-inline: var(--gutter);   /* honor the gutter token even when .tdw-wrap is also on this element */
}
.tdw-grand-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mark);
  font-size: var(--size-mark);
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  color: var(--tdw-brass);
  margin-bottom: var(--space-6);
  opacity: 0;
  transform: translateY(8px);
  animation: tdw-rise 900ms var(--ease) 200ms forwards;
}
.tdw-grand-hero__eyebrow::before,
.tdw-grand-hero__eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--tdw-brass);
  display: inline-block;
}
.tdw-grand-hero h1 {
  font-size: clamp(2.75rem, 7.2vw, 6.25rem);
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: -0.025em;
  margin: 0 0 var(--space-6);
  max-width: 18ch;
  color: var(--fg-on-dark);
  text-shadow: 0 2px 40px rgba(0,0,0,0.35);
}
.tdw-grand-hero h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--tdw-brass);
  font-family: var(--font-text);
}
.tdw-grand-hero h1 .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: tdw-rise 800ms var(--ease) forwards;
}
.tdw-grand-hero h1 .word--italic {
  font-style: italic;
  color: var(--tdw-brass);
}
.tdw-grand-hero__lede {
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--fg-on-dark);
  margin: 0 0 var(--space-7);
  max-width: 36rem;
  opacity: 0;
  transform: translateY(12px);
  animation: tdw-rise 900ms var(--ease) 1100ms forwards;
  text-shadow: 0 1px 16px rgba(0,0,0,0.4);
}
.tdw-grand-hero__ctas {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(12px);
  animation: tdw-rise 900ms var(--ease) 1300ms forwards;
}
.tdw-grand-hero__scroll {
  position: absolute;
  bottom: var(--space-7);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--tdw-brass);
  font-family: var(--font-mark);
  font-size: var(--size-mark-sm);
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  opacity: 0;
  animation: tdw-rise 900ms var(--ease) 1600ms forwards, tdw-bob 2.6s ease-in-out 2400ms infinite;
}
.tdw-grand-hero__scroll::after {
  content: "";
  display: block;
  width: 1px;
  height: 32px;
  background: var(--tdw-brass);
  margin: var(--space-2) auto 0;
}
@keyframes tdw-rise {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes tdw-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .tdw-grand-hero__bg { animation: none; transform: scale(1.08); }
  .tdw-grand-hero__scroll { animation: none; }
}

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */

.tdw-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mark);
  font-size: var(--size-mark);
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  background: var(--tdw-ink);
  color: var(--bg);
  padding: 14px var(--space-5);
  text-decoration: none;
  border: 1px solid var(--tdw-ink);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: color 320ms var(--ease);
  cursor: pointer;
  font-family: var(--font-mark);
}
.tdw-cta-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tdw-brass);
  transform: translateX(-101%);
  transition: transform 360ms var(--ease);
  z-index: -1;
  pointer-events: none;
}
.tdw-cta-primary:hover { color: var(--tdw-ink); }
.tdw-cta-primary:hover::before { transform: translateX(0); }
.tdw-cta-primary:active { transform: translateY(1px); }
.tdw-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mark);
  font-size: var(--size-mark);
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  background: transparent;
  color: var(--fg-on-dark);
  padding: 14px var(--space-5);
  text-decoration: none;
  border: 1px solid var(--fg-on-dark);
  transition: background 320ms var(--ease), color 320ms var(--ease);
}
.tdw-cta-secondary:hover { background: var(--fg-on-dark); color: var(--tdw-ink); }

/* --------------------------------------------------------------------------
   MARQUEE — old money scroll strip between sections
   -------------------------------------------------------------------------- */

.tdw-marquee {
  background: var(--tdw-ink);
  color: var(--tdw-brass);
  padding: var(--space-4) 0;
  overflow: hidden;
  border-top: 1px solid var(--rule-on-dark);
  border-bottom: 1px solid var(--rule-on-dark);
}
.tdw-marquee__track {
  display: flex;
  gap: var(--space-7);
  white-space: nowrap;
  animation: tdw-marquee 38s linear infinite;
  will-change: transform;
}
.tdw-marquee__item {
  font-family: var(--font-mark);
  font-size: var(--size-mark);
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: var(--space-7);
}
.tdw-marquee__item::after {
  content: "✦";
  color: var(--tdw-brass);
  font-size: 0.7em;
}
@keyframes tdw-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .tdw-marquee__track { animation: none; }
}

/* --------------------------------------------------------------------------
   STATS STRIP — the boast
   -------------------------------------------------------------------------- */

.tdw-stats {
  background: var(--tdw-ink);
  color: var(--fg-on-dark);
  border-bottom: 1px solid var(--rule-on-dark);
}
.tdw-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.tdw-stat {
  padding: var(--space-7) var(--space-5);
  border-right: 1px solid var(--rule-on-dark);
  text-align: left;
  position: relative;
}
.tdw-stat::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--tdw-brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 600ms var(--ease);
}
.tdw-stat:hover::before { transform: scaleX(1); }
.tdw-stat:last-child { border-right: 0; }
.tdw-stat__number {
  font-family: var(--font-text);
  font-size: clamp(2.75rem, 5.5vw, 4.5rem);
  line-height: 0.95;
  font-weight: 500;
  color: var(--tdw-brass);
  letter-spacing: -0.025em;
  display: block;
  margin-bottom: var(--space-3);
  font-variant-numeric: tabular-nums;
}
.tdw-stat__label {
  font-family: var(--font-mark);
  font-size: var(--size-mark);
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  color: var(--fg-on-dark);
  display: block;
}
.tdw-stat__sub {
  font-size: 0.95rem;
  color: var(--fg-muted-dark);
  margin-top: var(--space-2);
  line-height: 1.4;
}
@media (max-width: 720px) {
  .tdw-stats__grid { grid-template-columns: repeat(2, 1fr); }
  .tdw-stat { border-right: 0; border-bottom: 1px solid var(--rule-on-dark); padding: var(--space-5) var(--space-4); }
  .tdw-stat:nth-child(odd) { border-right: 1px solid var(--rule-on-dark); }
  .tdw-stat:nth-last-child(-n+2) { border-bottom: 0; }
}
.tdw-stats__grid--six { grid-template-columns: repeat(6, 1fr); }
.tdw-stats__grid--six .tdw-stat__number { font-size: clamp(1.875rem, 3.2vw, 2.75rem); }
@media (max-width: 980px) {
  .tdw-stats__grid--six { grid-template-columns: repeat(3, 1fr); }
  .tdw-stats__grid--six .tdw-stat { border-bottom: 1px solid var(--rule-on-dark); border-right: 0; }
  .tdw-stats__grid--six .tdw-stat:nth-child(3n) { border-right: 0; }
  .tdw-stats__grid--six .tdw-stat:nth-child(3n+1),
  .tdw-stats__grid--six .tdw-stat:nth-child(3n+2) { border-right: 1px solid var(--rule-on-dark); }
  .tdw-stats__grid--six .tdw-stat:nth-last-child(-n+3) { border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   HERITAGE
   -------------------------------------------------------------------------- */

.tdw-heritage {
  background: var(--bg);
  color: var(--fg);
  padding: var(--space-10) 0;
}
.tdw-heritage__inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-9);
  align-items: center;
}
@media (max-width: 880px) { .tdw-heritage__inner { grid-template-columns: 1fr; gap: var(--space-7); } }
.tdw-heritage h2 {
  font-size: clamp(2.25rem, 4.8vw, 3.75rem);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0 0 var(--space-5);
  max-width: 18ch;
}
.tdw-heritage h2 em { font-style: italic; color: var(--tdw-emerald); font-weight: 400; }
.tdw-heritage__body {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--fg);
  max-width: 36rem;
}
.tdw-heritage__body p { margin: 0 0 var(--space-4); }
.tdw-heritage__image {
  aspect-ratio: 4 / 5;
  background: var(--bg-panel);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--rule);
}
.tdw-heritage__image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.2s var(--ease);
}
.tdw-heritage__image:hover img { transform: scale(1.04); }

/* --------------------------------------------------------------------------
   PRODUCT GRID — refined cards with hover image crossfade
   -------------------------------------------------------------------------- */

.tdw-product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 980px) { .tdw-product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .tdw-product-grid { grid-template-columns: 1fr; } }
.tdw-product-card {
  text-decoration: none;
  color: inherit;
  display: block;
  background: var(--bg);
  border: 1px solid var(--rule);
  transition: border-color 360ms var(--ease), transform 360ms var(--ease), box-shadow 360ms var(--ease);
  position: relative;
  overflow: hidden;
}
.tdw-product-card:hover {
  border-color: var(--tdw-ink);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -28px rgba(38, 34, 31, 0.35);
}
.tdw-product-card__image {
  aspect-ratio: 4 / 5;
  background: var(--bg-panel);
  overflow: hidden;
  position: relative;
}
.tdw-product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 900ms var(--ease), filter 600ms var(--ease);
  filter: saturate(0.92);
}
.tdw-product-card:hover .tdw-product-card__image img {
  transform: scale(1.06);
  filter: saturate(1);
}
.tdw-product-card__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-top: 1px solid var(--rule);
}
.tdw-product-card__num {
  font-family: var(--font-mark);
  font-size: var(--size-mark-sm);
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  color: var(--tdw-brass);
  display: block;
  margin-bottom: var(--space-1);
}
.tdw-product-card__name {
  font-size: 1.4rem;
  line-height: 1.2;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.005em;
  font-family: var(--font-text);
}
.tdw-product-card__meta {
  font-family: var(--font-mark);
  font-size: var(--size-mark-sm);
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-top: var(--space-2);
}
.tdw-product-card__price {
  margin-top: var(--space-3);
  font-family: var(--font-mark);
  font-size: var(--size-mark);
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  color: var(--fg);
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule-hair);
}
.tdw-product-card__cta {
  margin-top: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mark);
  font-size: var(--size-mark);
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  color: var(--tdw-emerald);
  position: relative;
  width: fit-content;
}
.tdw-product-card__cta::after {
  content: "→";
  font-family: var(--font-text);
  font-size: 1.2em;
  transition: transform 320ms var(--ease);
}
.tdw-product-card:hover .tdw-product-card__cta::after { transform: translateX(6px); }

/* --------------------------------------------------------------------------
   MARKETPLACE — where to find us
   -------------------------------------------------------------------------- */

.tdw-marketplace {
  background: var(--tdw-emerald);
  color: var(--fg-on-dark);
  border-top: 1px solid var(--tdw-emerald-deep);
  border-bottom: 1px solid var(--tdw-emerald-deep);
  position: relative;
  overflow: hidden;
}
.tdw-marketplace::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse at top left, rgba(168, 139, 69, 0.12), transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(168, 139, 69, 0.08), transparent 50%);
  pointer-events: none;
}
.tdw-marketplace__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
@media (max-width: 720px) { .tdw-marketplace__grid { grid-template-columns: 1fr; } }
.tdw-mkt-card {
  background: rgba(242, 234, 211, 0.04);
  border: 1px solid var(--rule-on-dark);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  text-decoration: none;
  color: var(--fg-on-dark);
  transition: border-color 360ms var(--ease), background 360ms var(--ease);
}
.tdw-mkt-card:hover { border-color: var(--tdw-brass); background: rgba(242, 234, 211, 0.07); }
.tdw-mkt-card__name {
  font-family: var(--font-mark);
  font-size: var(--size-mark);
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  color: var(--tdw-brass);
  display: block;
  margin-bottom: var(--space-2);
}
.tdw-mkt-card__title {
  font-size: 1.75rem;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.tdw-mkt-card__body {
  color: rgba(242, 234, 211, 0.7);
  line-height: 1.6;
  margin: 0;
}
.tdw-mkt-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mark);
  font-size: var(--size-mark);
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  color: var(--tdw-brass);
  margin-top: auto;
  border-bottom: 1px solid var(--tdw-brass);
  padding-bottom: 2px;
  width: fit-content;
}
.tdw-mkt-card__cta::after { content: "→"; font-family: var(--font-text); font-size: 1.2em; }

/* --------------------------------------------------------------------------
   SERVICES PILLARS
   -------------------------------------------------------------------------- */

.tdw-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--rule);
  background: var(--bg);
}
@media (max-width: 880px) { .tdw-services { grid-template-columns: 1fr; } }
.tdw-pillar {
  padding: var(--space-8);
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--bg);
  position: relative;
  transition: background 360ms var(--ease);
}
.tdw-pillar:last-child { border-right: 0; }
.tdw-pillar:hover { background: var(--bg-panel); }
@media (max-width: 880px) {
  .tdw-pillar { border-right: 0; border-bottom: 1px solid var(--rule); }
  .tdw-pillar:last-child { border-bottom: 0; }
}
.tdw-pillar__num {
  font-family: var(--font-mark);
  font-size: var(--size-mark);
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  color: var(--tdw-emerald);
  display: block;
}
.tdw-pillar__title {
  font-size: 1.75rem;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.tdw-pillar__body {
  color: var(--fg-muted);
  line-height: 1.6;
  margin: 0;
}
.tdw-pillar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
  margin-top: var(--space-3);
}
.tdw-pillar__list li {
  font-family: var(--font-mark);
  font-size: var(--size-mark-sm);
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  color: var(--fg-muted);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--rule-hair);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.tdw-pillar__list li::before {
  content: "—";
  color: var(--tdw-brass);
}
.tdw-pillar__list li:last-child { border-bottom: 0; }
.tdw-pillar__cta {
  margin-top: auto;
  font-family: var(--font-mark);
  font-size: var(--size-mark);
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  color: var(--tdw-emerald);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border-bottom: 1px solid var(--tdw-emerald);
  padding-bottom: 2px;
  width: fit-content;
}
.tdw-pillar__cta::after { content: "→"; font-family: var(--font-text); font-size: 1.2em; transition: transform 320ms var(--ease); }
.tdw-pillar__cta:hover::after { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   SECTORS — large image cards
   -------------------------------------------------------------------------- */

.tdw-sectors {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
@media (max-width: 720px) { .tdw-sectors { grid-template-columns: 1fr; } }
.tdw-sector {
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--fg-on-dark);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--rule);
}
.tdw-sector__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
  transition: transform 1.2s var(--ease), filter 600ms var(--ease);
  filter: brightness(0.78) saturate(0.9);
}
.tdw-sector:hover .tdw-sector__image {
  transform: scale(1.06);
  filter: brightness(0.88) saturate(1);
}
.tdw-sector__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(8, 34, 24, 0.85) 100%);
  z-index: 1;
}
.tdw-sector__body {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-2);
}
.tdw-sector__num {
  font-family: var(--font-mark);
  font-size: var(--size-mark-sm);
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  color: var(--tdw-brass);
}
.tdw-sector__name {
  font-size: 1.85rem;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--fg-on-dark);
  line-height: 1.1;
}
.tdw-sector__meta {
  font-family: var(--font-mark);
  font-size: var(--size-mark-sm);
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  color: rgba(242, 234, 211, 0.7);
  display: block;
  margin-top: var(--space-1);
}
.tdw-sector__cta {
  font-family: var(--font-mark);
  font-size: var(--size-mark);
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  color: var(--tdw-brass);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  border-bottom: 1px solid var(--tdw-brass);
  padding-bottom: 2px;
  width: fit-content;
}
.tdw-sector__cta::after { content: "→"; font-family: var(--font-text); font-size: 1.2em; transition: transform 320ms var(--ease); }
.tdw-sector:hover .tdw-sector__cta::after { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   PROCESS
   -------------------------------------------------------------------------- */

.tdw-process-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
  border-top: 1px solid var(--rule);
  padding-top: var(--space-7);
}
@media (max-width: 980px) { .tdw-process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .tdw-process-grid { grid-template-columns: 1fr; } }
.tdw-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid transparent;
  transition: border-color 320ms var(--ease), background 320ms var(--ease);
}
.tdw-step:hover { border-color: var(--rule); background: var(--bg-panel); }
.tdw-step__num {
  font-family: var(--font-text);
  font-size: 2.75rem;
  font-weight: 500;
  color: var(--tdw-emerald);
  line-height: 1;
  margin: 0;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.tdw-step__title {
  font-family: var(--font-mark);
  font-size: var(--size-mark);
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
}
.tdw-step__body {
  color: var(--fg-muted);
  line-height: 1.6;
  font-size: 0.98rem;
  margin: 0;
}

/* --------------------------------------------------------------------------
   TESTIMONIALS
   -------------------------------------------------------------------------- */

.tdw-testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 980px) { .tdw-testimonials { grid-template-columns: 1fr; } }
.tdw-testimonial {
  background: var(--bg-panel);
  border: 1px solid var(--rule);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: relative;
  transition: transform 320ms var(--ease);
}
.tdw-testimonial:hover { transform: translateY(-2px); }
.tdw-testimonial__quote {
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--fg);
  margin: 0;
  flex: 1;
  font-style: italic;
}
.tdw-testimonial__quote::before { content: "\201C"; color: var(--tdw-emerald); font-size: 1.3em; margin-right: 4px; font-style: normal; }
.tdw-testimonial__quote::after { content: "\201D"; color: var(--tdw-emerald); font-size: 1.3em; margin-left: 4px; font-style: normal; }
.tdw-testimonial__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid var(--rule);
  padding-top: var(--space-4);
}
.tdw-testimonial__name {
  font-weight: 500;
  font-size: 1rem;
  margin: 0;
}
.tdw-testimonial__role {
  font-family: var(--font-mark);
  font-size: var(--size-mark-sm);
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* --------------------------------------------------------------------------
   BIG B2B CTA + FORM
   -------------------------------------------------------------------------- */

.tdw-grand-cta {
  background: var(--tdw-ink);
  color: var(--fg-on-dark);
  padding: var(--space-10) 0;
  border-top: 1px solid var(--rule-on-dark);
  position: relative;
  overflow: hidden;
}
.tdw-grand-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 0%, rgba(168, 139, 69, 0.08), transparent 50%);
  pointer-events: none;
}
.tdw-grand-cta__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-9);
  align-items: start;
}
@media (max-width: 980px) { .tdw-grand-cta__grid { grid-template-columns: 1fr; gap: var(--space-7); } }
.tdw-grand-cta h2 {
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--fg-on-dark);
  margin: 0 0 var(--space-5);
  max-width: 18ch;
}
.tdw-grand-cta h2 em { font-style: italic; color: var(--tdw-brass); font-weight: 400; }
.tdw-grand-cta__body {
  color: rgba(242, 234, 211, 0.78);
  font-size: 1.0625rem;
  line-height: 1.65;
  margin: 0 0 var(--space-5);
}
.tdw-grand-cta__channels {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--rule-on-dark);
}
.tdw-grand-cta__channel {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tdw-grand-cta__channel-label {
  font-family: var(--font-mark);
  font-size: var(--size-mark-sm);
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  color: var(--tdw-brass);
}
.tdw-grand-cta__channel-value {
  color: var(--fg-on-dark);
  font-size: 1.0625rem;
}
.tdw-grand-cta__channel-value a {
  color: var(--fg-on-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-on-dark);
  transition: border-color 280ms var(--ease), color 280ms var(--ease);
}
.tdw-grand-cta__channel-value a:hover { border-bottom-color: var(--tdw-brass); color: var(--tdw-brass); }
.tdw-grand-cta .tdw-form {
  background: rgba(242, 234, 211, 0.04);
  border: 1px solid var(--rule-on-dark);
  padding: var(--space-7);
}
.tdw-grand-cta .tdw-form label { color: rgba(242, 234, 211, 0.85); }
.tdw-grand-cta .tdw-form input,
.tdw-grand-cta .tdw-form textarea,
.tdw-grand-cta .tdw-form select {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-on-dark);
  color: var(--fg-on-dark);
  padding: var(--space-3) 0;
  border-radius: 0;
}
.tdw-grand-cta .tdw-form input:focus,
.tdw-grand-cta .tdw-form textarea:focus,
.tdw-grand-cta .tdw-form select:focus {
  border-bottom-color: var(--tdw-brass);
  background: transparent;
}
.tdw-grand-cta .tdw-form input::placeholder,
.tdw-grand-cta .tdw-form textarea::placeholder { color: var(--fg-muted-dark); }
.tdw-grand-cta .tdw-form select { color: var(--fg-on-dark); }
.tdw-grand-cta .tdw-form select option { background: var(--tdw-ink); color: var(--fg-on-dark); }
.tdw-grand-cta .tdw-form__help { color: var(--fg-muted-dark); }

/* --------------------------------------------------------------------------
   CTA CARD — replaces the form on the dark B2B section.
   A pure redirect to the multi-step form on contact.html.
   Same surface treatment as the old form (frosted card on ink) so the
   section's rhythm doesn't shift.
   -------------------------------------------------------------------------- */
.tdw-grand-cta__card {
  background: rgba(242, 234, 211, 0.04);
  border: 1px solid var(--rule-on-dark);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.tdw-grand-cta__card h3 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 500;
  line-height: 1.15;
  margin: 0;
  color: var(--fg-on-dark);
  letter-spacing: -0.005em;
}
.tdw-grand-cta__card h3 em {
  font-style: italic;
  color: var(--tdw-brass);
  font-weight: 400;
}
.tdw-grand-cta__card p {
  color: rgba(242, 234, 211, 0.78);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}
.tdw-grand-cta__card .tdw-cta-primary {
  align-self: flex-start;
  margin-top: var(--space-2);
}
.tdw-grand-cta__card-alt {
  font-size: 0.9375rem;
  color: rgba(242, 234, 211, 0.7);
  border-top: 1px solid var(--rule-on-dark);
  padding-top: var(--space-4);
  margin-top: var(--space-3);
  line-height: 1.7;
}
.tdw-grand-cta__card-alt a {
  color: var(--fg-on-dark);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 280ms var(--ease), color 280ms var(--ease);
}
.tdw-grand-cta__card-alt a:hover {
  border-bottom-color: var(--tdw-brass);
  color: var(--tdw-brass);
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

.tdw-grand-footer {
  background: var(--tdw-ink-deep);
  color: var(--fg-on-dark);
  padding-block: var(--space-10) var(--space-6);
  padding-inline: 0;
  border-top: 1px solid var(--rule-on-dark);
}
/* The grid sits inside a .tdw-wrap which owns the gutter; that covers
   4-col layout. Below 540px we collapse to single col, but the grid
   itself has no padding-inline — left to .tdw-wrap. */
.tdw-grand-footer .tdw-wrap { padding-inline: var(--gutter); }
.tdw-grand-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: var(--space-7);
  margin-bottom: var(--space-7);
}
@media (max-width: 880px) { .tdw-grand-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .tdw-grand-footer__grid { grid-template-columns: 1fr; } }
.tdw-grand-footer h4,
.tdw-grand-footer__heading {
  display: block;
  font-family: var(--font-mark);
  font-size: var(--size-mark);
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  color: var(--tdw-brass);
  margin: 0 0 var(--space-4);
  font-weight: 400;
}
.tdw-grand-footer__brand p {
  color: rgba(242, 234, 211, 0.7);
  font-size: 0.98rem;
  line-height: 1.6;
  margin: var(--space-4) 0;
  max-width: 28rem;
}
.tdw-grand-footer ul { list-style: none; margin: 0; padding: 0; }
.tdw-grand-footer li { margin-bottom: var(--space-2); }
.tdw-grand-footer a {
  color: rgba(242, 234, 211, 0.7);
  text-decoration: none;
  font-size: 0.98rem;
  border-bottom: 1px solid transparent;
  transition: color 280ms var(--ease), border-color 280ms var(--ease);
}
.tdw-grand-footer a:hover { color: var(--tdw-brass); border-bottom-color: var(--tdw-brass); }
.tdw-grand-footer__bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule-on-dark);
  font-family: var(--font-mark);
  font-size: var(--size-mark-sm);
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  color: var(--fg-muted-dark);
}

/* --------------------------------------------------------------------------
   SECTION HEAD — grand
   -------------------------------------------------------------------------- */

.tdw-grand-sec-head { margin-bottom: var(--space-8); }
.tdw-grand-sec-head__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mark);
  font-size: var(--size-mark);
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  color: var(--tdw-emerald);
  margin-bottom: var(--space-4);
}
.tdw-grand-sec-head__eyebrow::before,
.tdw-grand-sec-head__eyebrow::after {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--tdw-emerald);
  display: inline-block;
}
.tdw-grand-sec-head h1,
.tdw-grand-sec-head h2 {
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0 0 var(--space-4);
  max-width: 22ch;
}
.tdw-grand-sec-head h1 em,
.tdw-grand-sec-head h2 em { font-style: italic; color: var(--tdw-emerald); font-weight: 400; }
/* The italic accent is emerald by default — invisible on emerald
   backgrounds. Override to brass inside dark sections. */
.tdw-section--dark .tdw-grand-sec-head h1 em,
.tdw-section--dark .tdw-grand-sec-head h2 em,
.tdw-marketplace .tdw-grand-sec-head h1 em,
.tdw-marketplace .tdw-grand-sec-head h2 em,
.tdw-grand-cta .tdw-grand-sec-head h1 em,
.tdw-grand-cta .tdw-grand-sec-head h2 em {
  color: var(--tdw-brass);
}
/* Also flip the base heading color on dark contexts to cream. */
.tdw-section--dark .tdw-grand-sec-head h1,
.tdw-section--dark .tdw-grand-sec-head h2,
.tdw-marketplace .tdw-grand-sec-head h1,
.tdw-marketplace .tdw-grand-sec-head h2,
.tdw-grand-cta .tdw-grand-sec-head h1,
.tdw-grand-cta .tdw-grand-sec-head h2 {
  color: var(--fg-on-dark);
}
.tdw-section--dark .tdw-grand-sec-head__lede,
.tdw-marketplace .tdw-grand-sec-head__lede,
.tdw-grand-cta .tdw-grand-sec-head__lede {
  color: rgba(242, 234, 211, 0.72);
}
.tdw-grand-sec-head__lede {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--fg-muted);
  max-width: 38rem;
  margin: 0;
}

/* --------------------------------------------------------------------------
   REVEAL — intersection observer fade-in
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}
/* No-JS fallback: if [data-reveal] never gets .is-revealed (no JS, no
   IntersectionObserver), the elements must still be visible. This rule
   matches the .no-js body class added by the head <script> in the HTML. */
.no-js [data-reveal] { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   A11Y — focus indicators, skip link, no-JS messaging
   -------------------------------------------------------------------------- */

/* Universal focus ring for keyboard users. Uses :focus-visible so it
   only appears for keyboard nav, not mouse clicks. Brass on light bg,
   ivory on dark bg. Two stops of 2px each, with a 2px offset. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.tdw-grand-nav__cta:focus-visible,
.tdw-cta-primary:focus-visible,
.tdw-cta-secondary:focus-visible,
.tdw-product-card:focus-visible,
.tdw-sector:focus-visible,
.tdw-mkt-card:focus-visible,
.tdw-pillar__cta:focus-visible,
.tdw-grand-hero__scroll:focus-visible,
.tdw-marquee a:focus-visible,
.tdw-grand-footer a:focus-visible {
  outline: 2px solid var(--tdw-brass);
  outline-offset: 3px;
  border-radius: 1px;
}
.tdw-section--dark a:focus-visible,
.tdw-grand-cta a:focus-visible,
.tdw-marketplace a:focus-visible,
.tdw-grand-footer a:focus-visible,
.tdw-grand-cta .tdw-form input:focus-visible,
.tdw-grand-cta .tdw-form textarea:focus-visible,
.tdw-grand-cta .tdw-form select:focus-visible {
  outline-color: var(--bg);
}
.tdw-cta-primary:focus-visible {
  /* The CTA already has a 1px border; offset it to keep the focus ring
     visible without doubling the box-shadow. */
  outline-offset: 4px;
}
.tdw-pillar__cta:focus-visible,
.tdw-mkt-card__cta:focus-visible,
.tdw-sector__cta:focus-visible,
.tdw-product-card__cta:focus-visible {
  outline-offset: 2px;
}

/* Skip link — first focusable element, invisible until focused. */
.tdw-skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 100;
  background: var(--tdw-ink);
  color: var(--bg);
  font-family: var(--font-mark);
  font-size: var(--size-mark);
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  padding: 14px var(--space-5);
  text-decoration: none;
  border: 1px solid var(--tdw-brass);
  transition: top 200ms var(--ease);
}
.tdw-skip-link:focus,
.tdw-skip-link:focus-visible {
  top: 0;
  outline: 2px solid var(--tdw-brass);
  outline-offset: 4px;
}

/* Form input focus state — visual lift on the bottom border. */
.tdw-form input:focus,
.tdw-form textarea:focus,
.tdw-form select:focus {
  outline: 2px solid var(--tdw-brass);
  outline-offset: 2px;
}
.tdw-grand-cta .tdw-form input:focus,
.tdw-grand-cta .tdw-form textarea:focus,
.tdw-grand-cta .tdw-form select:focus {
  outline-color: var(--bg);
  border-bottom-color: var(--tdw-brass);
}

/* Make the no-JS banner visible only if .no-js is set. */
.tdw-nojs-banner { display: none; }
.no-js .tdw-nojs-banner {
  display: block;
  background: var(--tdw-brass);
  color: var(--tdw-ink);
  font-family: var(--font-mark);
  font-size: var(--size-mark-sm);
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  padding: 8px var(--space-5);
  text-align: center;
}

/* --------------------------------------------------------------------------
   PROJECTS — featured case studies + grid of smaller projects
   -------------------------------------------------------------------------- */

.tdw-project-featured {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-8);
  align-items: start;
  padding: var(--space-9) 0;
  border-bottom: 1px solid var(--rule);
}
.tdw-project-featured:last-of-type { border-bottom: 0; }
@media (max-width: 880px) {
  .tdw-project-featured { grid-template-columns: 1fr; gap: var(--space-5); }
}
.tdw-project-featured--reverse .tdw-project-featured__media { order: 2; }
@media (max-width: 880px) {
  .tdw-project-featured--reverse .tdw-project-featured__media { order: 0; }
}
.tdw-project-featured__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--bg-panel);
  overflow: hidden;
  border: 1px solid var(--rule);
}
.tdw-project-featured__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.2s var(--ease);
}
.tdw-project-featured:hover .tdw-project-featured__media img { transform: scale(1.04); }
.tdw-project-featured__year {
  position: absolute;
  top: var(--space-4); right: var(--space-4);
  font-family: var(--font-mark);
  font-size: var(--size-mark);
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  color: var(--bg);
  background: rgba(38, 34, 31, 0.92);
  padding: 8px var(--space-3);
  border: 1px solid var(--tdw-brass);
}
.tdw-project-featured__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.tdw-project-featured__sector {
  font-family: var(--font-mark);
  font-size: var(--size-mark);
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  color: var(--tdw-emerald);
  display: block;
}
.tdw-project-featured h3 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--fg);
}
.tdw-project-featured h3 em {
  font-style: italic;
  color: var(--tdw-emerald);
  font-weight: 400;
}
.tdw-project-featured__body > p {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--fg);
  margin: 0;
  max-width: 40rem;
}
.tdw-project-featured__scope {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3) var(--space-5);
}
.tdw-project-featured__scope li {
  font-family: var(--font-mark);
  font-size: var(--size-mark);
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.tdw-project-featured__scope li strong {
  color: var(--fg);
  font-weight: 500;
  margin-right: 6px;
  font-size: var(--size-mark);
}
.tdw-project-featured__materials {
  font-family: var(--font-mark);
  font-size: var(--size-mark-sm);
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0;
}
.tdw-project-featured__link {
  font-family: var(--font-mark);
  font-size: var(--size-mark);
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  color: var(--tdw-emerald);
  border-bottom: 1px solid var(--tdw-emerald);
  padding-bottom: 2px;
  width: fit-content;
  text-decoration: none;
  margin-top: var(--space-3);
  align-self: flex-start;
  transition: color 280ms var(--ease), border-color 280ms var(--ease);
}
.tdw-project-featured__link:hover { color: var(--tdw-ink); border-bottom-color: var(--tdw-ink); }

/* Smaller project card grid */
.tdw-project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 980px) { .tdw-project-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .tdw-project-grid { grid-template-columns: 1fr; } }
.tdw-project-card {
  text-decoration: none;
  color: inherit;
  display: block;
  background: var(--bg);
  border: 1px solid var(--rule);
  transition: border-color 360ms var(--ease), transform 360ms var(--ease), box-shadow 360ms var(--ease);
}
.tdw-project-card:hover {
  border-color: var(--tdw-ink);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -28px rgba(38, 34, 31, 0.32);
}
.tdw-project-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg-panel);
  overflow: hidden;
}
.tdw-project-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 900ms var(--ease), filter 600ms var(--ease);
  filter: saturate(0.92);
}
.tdw-project-card:hover .tdw-project-card__media img {
  transform: scale(1.05);
  filter: saturate(1);
}
.tdw-project-card__sector {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  font-family: var(--font-mark);
  font-size: var(--size-mark-sm);
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  color: var(--bg);
  background: var(--tdw-ink);
  padding: 6px var(--space-3);
  border-bottom: 1px solid var(--tdw-brass);
}
.tdw-project-card__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-top: 1px solid var(--rule);
}
.tdw-project-card__year {
  font-family: var(--font-mark);
  font-size: var(--size-mark-sm);
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.tdw-project-card h3 {
  font-size: 1.4rem;
  line-height: 1.2;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.005em;
  font-family: var(--font-text);
}
.tdw-project-card__meta {
  font-family: var(--font-mark);
  font-size: var(--size-mark-sm);
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: var(--space-2) 0 0;
}

/* --------------------------------------------------------------------------
   BRAND MARK — the full horizontal lockup, used once on the about page
   as a classical "wax seal" moment between the story and the rest.
   -------------------------------------------------------------------------- */
.tdw-brand-mark {
  width: 100%;
  max-width: 480px;
  height: auto;
  display: inline-block;
  filter: drop-shadow(0 4px 16px rgba(60, 40, 20, 0.10));
  transition: transform 600ms var(--ease);
}
.tdw-brand-mark:hover { transform: scale(1.015); }
@media (max-width: 720px) {
  .tdw-brand-mark { max-width: 320px; }
}
@media (prefers-reduced-motion: reduce) {
  .tdw-brand-mark { transition: none; }
  .tdw-brand-mark:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   WATERMARK — a large, faint brush-flame behind a section.
   Use .tdw-watermark on the section, then --cream or --wax to pick the
   variant. Children of the section sit above the flame via z-index; the
   flame itself is purely decorative (pointer-events:none).
   -------------------------------------------------------------------------- */
.tdw-watermark {
  position: relative;
  overflow: hidden;
}
.tdw-watermark::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(80vw, 900px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  background-image: url('flame-wax.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}
.tdw-watermark > * { position: relative; z-index: 1; }
.tdw-watermark--cream::before { background-image: url('flame-cream.png'); opacity: 0.07; }
.tdw-watermark--wax::before   { background-image: url('flame-wax.png');   opacity: 0.05; }

/* --------------------------------------------------------------------------
   ABOUT — story prose, split layout, beliefs list, visit block
   -------------------------------------------------------------------------- */

.tdw-about-prose {
  max-width: 44rem;
}
.tdw-about-prose p {
  font-size: 1.1875rem;
  line-height: 1.7;
  color: var(--fg);
  margin: 0 0 var(--space-5);
}
.tdw-about-prose p:last-child { margin-bottom: 0; }
.tdw-about-prose p:first-child::first-letter {
  font-size: 4.5rem;
  line-height: 0.85;
  float: left;
  font-weight: 500;
  font-family: var(--font-text);
  margin: 0.1em 0.15em 0 0;
  color: var(--tdw-emerald);
}
@media (max-width: 540px) {
  .tdw-about-prose p:first-child::first-letter { font-size: 3.5rem; }
}

/* About split — image on one side, body on the other */
.tdw-about-split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-8);
  align-items: start;
}
.tdw-about-split--reverse { grid-template-columns: 1fr 1.1fr; }
.tdw-about-split--reverse .tdw-about-split__media { order: 2; }
@media (max-width: 880px) {
  .tdw-about-split,
  .tdw-about-split--reverse { grid-template-columns: 1fr; gap: var(--space-5); }
  .tdw-about-split--reverse .tdw-about-split__media { order: 0; }
}
.tdw-about-split__media {
  position: sticky;
  top: 100px;
  aspect-ratio: 4 / 5;
  background: var(--bg-panel);
  overflow: hidden;
  border: 1px solid var(--rule);
}
.tdw-about-split__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.2s var(--ease);
}
.tdw-about-split__media:hover img { transform: scale(1.03); }
@media (max-width: 880px) { .tdw-about-split__media { position: static; } }
.tdw-about-split__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.tdw-about-split__body h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--fg);
}
.tdw-about-split__body h2 em { font-style: italic; color: var(--tdw-emerald); font-weight: 400; }
.tdw-about-split__body p {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--fg);
  margin: 0;
  max-width: 38rem;
}

/* Beliefs — numbered list */
.tdw-beliefs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7) var(--space-9);
}
@media (max-width: 880px) { .tdw-beliefs { grid-template-columns: 1fr; gap: var(--space-5); } }
.tdw-belief {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
}
.tdw-belief__num {
  font-family: var(--font-text);
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1;
  color: var(--tdw-emerald);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.tdw-belief h3 {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--fg);
}
.tdw-belief p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--fg-muted);
  margin: 0;
  max-width: 36rem;
}

/* Visit blocks — small label + value pairs */
.tdw-visit-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--space-4);
}
.tdw-visit-block:last-of-type { border-bottom: 0; }
.tdw-visit-block__label {
  font-family: var(--font-mark);
  font-size: var(--size-mark-sm);
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  color: var(--tdw-emerald);
}
.tdw-visit-block__value {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--fg);
  margin: 0;
}

/* ==========================================================================
   FIXES — 2026-09-20 audit
   ========================================================================== */

/* 1. Card text was pushed out of view: site.css forces the media boxes to
      height:100%, which beat the aspect-ratio and made the image as tall as
      the whole card. Let the aspect-ratio set the height again. */
.tdw-product-card__image,
.tdw-project-card__media { height: auto; }
.tdw-product-card__image { aspect-ratio: 4 / 3; }

/* 2. Sector tiles: the <picture> sat in normal flow above the text, so the
      text overflowed the tile and was clipped. Put the image behind it. */
.tdw-sector > picture {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.tdw-sector > picture img {
  filter: brightness(0.78) saturate(0.9);
  transition: transform 1.2s var(--ease), filter 600ms var(--ease);
}
.tdw-sector:hover > picture img { transform: scale(1.06); filter: brightness(0.88) saturate(1); }

/* 3. Project grid ran past the viewport (1600px images set the min width). */
.tdw-project-grid,
.tdw-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) {
  .tdw-project-grid,
  .tdw-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .tdw-project-grid,
  .tdw-product-grid { grid-template-columns: minmax(0, 1fr); }
}
.tdw-project-grid > *, .tdw-product-grid > * { min-width: 0; }

/* 4. Italic accent inside dark sections was emerald-on-emerald. */
.tdw-section--dark h2 em,
.tdw-section--dark h1 em { color: var(--tdw-brass); }

/* 5. Primary button on dark backgrounds: brass fill, ink text (was near-black
      on near-black). Hover flips to cream. */
.tdw-grand-hero .tdw-cta-primary,
.tdw-grand-cta .tdw-cta-primary,
.tdw-section--dark .tdw-cta-primary,
.tdw-marketplace .tdw-cta-primary {
  background: var(--tdw-brass);
  border-color: var(--tdw-brass);
  color: var(--tdw-ink);
}
.tdw-grand-hero .tdw-cta-primary::before,
.tdw-grand-cta .tdw-cta-primary::before,
.tdw-section--dark .tdw-cta-primary::before,
.tdw-marketplace .tdw-cta-primary::before { background: var(--fg-on-dark); }
.tdw-grand-hero .tdw-cta-primary:hover,
.tdw-grand-cta .tdw-cta-primary:hover,
.tdw-section--dark .tdw-cta-primary:hover,
.tdw-marketplace .tdw-cta-primary:hover { color: var(--tdw-ink); }

/* 6. Word-based facts (e.g. "To size", "GST") in the stats band. */
.tdw-stat__number { white-space: nowrap; }

/* 7. Small mono labels were too faint to read on cream. */
.tdw-product-card__meta,
.tdw-project-card__meta,
.tdw-project-card__year { color: var(--fg); opacity: 0.72; }

/* Brand lockup — wax seal + wordmark (about.php mark band) */
.tdw-grand-nav__mark picture { display: inline-block; flex: none; }
.tdw-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 4vw, 3rem);
  position: relative;
  z-index: 1;
}
.tdw-lockup picture { flex: none; }
.tdw-lockup__seal {
  width: clamp(120px, 18vw, 220px);
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.45));
}
.tdw-lockup__word {
  margin: 0;
  font-family: var(--font-text);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.05;
  font-size: clamp(1.9rem, 5vw, 3.6rem);
  color: var(--tdw-paper, #F2EAD3);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}
@media (max-width: 560px) {
  .tdw-lockup { flex-direction: column; text-align: center; }
}

/* ==========================================================================
   GSAP LAYER (assets/tdw-gsap.js adds .has-gsap to <html>)
   GSAP owns reveal and hover transforms; switch off the CSS versions so
   the two never fight. Without GSAP (or with reduced motion) none of
   this applies and the CSS behaviour above is unchanged.
   ========================================================================== */
.has-gsap [data-reveal],
.has-gsap [data-reveal].is-revealed { opacity: 1; transform: none; transition: none; }
.has-gsap .tdw-product-card:hover,
.has-gsap .tdw-project-card:hover { transform: none; }
.has-gsap .tdw-product-card,
.has-gsap .tdw-project-card,
.has-gsap .tdw-sector,
.has-gsap .tdw-mkt-card { will-change: transform; transition-property: border-color, box-shadow, background; }

.tdw-process-grid { position: relative; }
.tdw-process-line {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--tdw-brass);
  transform-origin: left center;
  transform: scaleX(0);
  pointer-events: none;
}
.tdw-step__num { transition: color 500ms var(--ease); }
.has-gsap .tdw-step__num:not(.is-lit) { color: var(--rule, #cfc4a8); }
.tdw-grand-nav__mark img { will-change: transform; }

/* Hero depth canvas (assets/tdw-depth.js). Sits over the CSS background
   image and fades in once ready; the CSS image remains the fallback. */
.tdw-depth-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 900ms var(--ease);
}
.tdw-grand-hero__bg.has-depth .tdw-depth-canvas { opacity: 1; }

/* One marketplace card: keep it from stretching the full width. */
.tdw-marketplace__grid--single {
  grid-template-columns: minmax(0, 34rem);
  justify-content: center;
}