/* ─────────────────────────────────────────────
   Thalazzo — Design Tokens & Global Styles
   "Luxury Healing by Nature"
   ───────────────────────────────────────────── */

:root {
  /* Brand — exact values from brand identity spec */
  --tlz-blue:    #2966B1;   /* Primary */
  --tlz-blue-d:  #1E4F8F;   /* hover / pressed */
  --tlz-teal:    #55C6D0;   /* Secondary */
  --tlz-teal-d:  #3FAAB4;
  --tlz-grey:    #878888;   /* Tertiary */

  /* Neutrals — white background per spec ("good visibility for logo") */
  --ink:         #0F1F3A;   /* deep navy text */
  --ink-2:       #2B3A55;
  --muted:       #878888;   /* matches tertiary */
  --muted-2:     #A8AFB5;
  --line:        #E8EAED;   /* divider on white */
  --line-2:      #D5D9DD;
  --ivory:       #FFFFFF;   /* primary surface — white per brand spec */
  --ivory-2:     #F7F8FA;   /* subtle surface alt */
  --sand:        #F1F3F5;
  --paper:       #FFFFFF;

  /* Type — Work Sans only, per spec.
     Sizes 18/25/50/75/100. Letter-spacing 0%. */
  --f-display:   "Work Sans", "Helvetica Neue", Arial, sans-serif;
  --f-body:      "Work Sans", "Helvetica Neue", Arial, sans-serif;
  --f-mono:      "JetBrains Mono", ui-monospace, monospace;

  /* Grid system — Figma spec
     Columns 12 · Gutter 24 · Margins 240 (on 1440 design width)
     Scaled responsively below */
  --grid-cols:   12;
  --grid-gutter: 24px;
  --pad-page:    clamp(20px, 16.6vw, 240px);
  --gap:         24px;
  --radius:      2px;       /* editorial = sharp */
  --radius-lg:   4px;

  /* Type scale — anchored to Figma spec sizes 18/25/50/75/100 */
  --t-mega:      clamp(56px, 7vw, 100px);    /* 100 */
  --t-hero:      clamp(48px, 5.2vw, 75px);   /* 75  */
  --t-h1:        clamp(36px, 3.5vw, 50px);   /* 50  */
  --t-h2:        clamp(28px, 2.6vw, 38px);   /* 38  */
  --t-h3:        clamp(22px, 1.8vw, 25px);   /* 25  */
  --t-body:      16px;
  --t-small:     14px;
  --t-eyebrow:   12px;
}

* { box-sizing: border-box; }

html, body, #root {
  margin: 0; padding: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0; /* per spec */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

a { color: inherit; text-decoration: none; }

::selection { background: var(--tlz-teal); color: #fff; }

/* ───── Typography utilities ───── */
/* Per spec: letter-spacing 0%. Editorial feel comes from weight + size, not tracking. */
.display { font-family: var(--f-display); font-weight: 300; line-height: 1.0; letter-spacing: 0; }
.display-thin { font-weight: 200; }
.display-light { font-weight: 300; }
.eyebrow {
  font-family: var(--f-body);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.18em;          /* slight track on eyebrows only — for legibility at 12px */
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.eyebrow-ink { color: var(--ink); }
.mono { font-family: var(--f-mono); letter-spacing: 0; }

/* ───── Layout ───── */
.page {
  min-height: 100vh;
  background: var(--ivory);
}
.frame {
  padding: 0 var(--pad-page);
  max-width: 1440px;
  margin: 0 auto;
}
.frame-wide {
  padding: 0 var(--pad-page);
  max-width: 1920px;
  margin: 0 auto;
}
/* 12-col grid helper — matches Figma spec */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: var(--grid-gutter);
}
.section {
  padding-top: clamp(64px, 10vw, 140px);
  padding-bottom: clamp(64px, 10vw, 140px);
}
.section.tight { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(40px, 6vw, 80px); }
.divider { height: 1px; background: var(--line); width: 100%; }

/* ───── Buttons ───── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 28px;
  border-radius: var(--radius);
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: all .25s ease;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn-primary { background: var(--ink); color: var(--ivory); }
.btn-primary:hover { background: var(--tlz-blue); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--ivory); }
.btn-blue { background: var(--tlz-blue); color: #fff; }
.btn-blue:hover { background: var(--tlz-blue-d); }
.btn-sm { height: 40px; padding: 0 18px; font-size: 11px; }
.btn-lg { height: 56px; padding: 0 36px; }
.btn .arrow { transition: transform .25s ease; }
.btn:hover .arrow { transform: translateX(4px); }

/* ───── TikTok carousel ───── */
.tt-track { scrollbar-width: none; -ms-overflow-style: none; }
.tt-track::-webkit-scrollbar { display: none; }
.tt-nav {
  width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid var(--line-2); background: #fff; color: var(--ink);
  font-size: 22px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s, background .2s, color .2s;
}
.tt-nav:hover { border-color: var(--ink); background: var(--ink); color: #fff; }

/* ───── Testimonial carousel arrows ───── */
.testi-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
}
.testi-prev { left: clamp(8px, 2vw, 24px); }
.testi-next { right: clamp(8px, 2vw, 24px); }
/* Touch devices swipe instead — hide the arrows there */
@media (hover: none) and (pointer: coarse) {
  .testi-arrow { display: none; }
}

/* ───── Placeholder image ───── */
.ph {
  position: relative;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(41,102,177,0.06) 0 1px,
      transparent 1px 14px
    ),
    linear-gradient(180deg, #E8F1F8 0%, #D2E4EF 100%);
  border: 1px solid rgba(41,102,177,0.14);
  overflow: hidden;
}
.ph::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(15, 31, 58, 0.42);
  text-transform: lowercase;
  text-align: center;
  padding: 16px;
}
.ph.ph-sand {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(15,31,58,0.04) 0 1px,
      transparent 1px 14px
    ),
    linear-gradient(180deg, #F1F3F5 0%, #E5E8EB 100%);
  border-color: rgba(15,31,58,0.08);
}
.ph.ph-teal {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,0.18) 0 1px,
      transparent 1px 14px
    ),
    linear-gradient(180deg, var(--tlz-teal) 0%, var(--tlz-blue) 100%);
  border-color: transparent;
}
.ph.ph-teal::after { color: rgba(255,255,255,0.7); }
.ph.ph-ink {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,0.05) 0 1px,
      transparent 1px 14px
    ),
    linear-gradient(180deg, #1c3258 0%, #0F1F3A 100%);
  border-color: transparent;
}
.ph.ph-ink::after { color: rgba(255,255,255,0.45); }

/* ───── Header ───── */
.tlz-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.tlz-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  gap: 32px;
}
.nav-links {
  display: flex;
  gap: 36px;
  align-items: center;
}
/* Logo lockup: mark pulled out to the very left corner,
   wordmark sits at the original (padded) start position. */
.logo-btn {
  position: relative;
  display: flex;
  align-items: center;
  /* room on the left for the absolutely-positioned mark */
  padding-left: 56px;
}
.logo-mark {
  position: absolute;
  left: calc(-1 * var(--pad-page) + 16px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
}
.nav-link {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 6px 0;
  position: relative;
  white-space: nowrap;
  transition: color .2s ease;
}
.nav-link:hover { color: var(--tlz-blue); }
.nav-link.active { color: var(--ink); font-weight: 500; }
.nav-link.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: var(--tlz-blue);
}
.nav-actions { display: flex; align-items: center; gap: 16px; }
.lang-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: transparent;
  transition: all .2s ease;
}
.lang-pill svg { display: block; flex-shrink: 0; }
.lang-pill:hover { border-color: var(--ink); color: var(--ink); }
.cart-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 8px 10px;
}
.cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--tlz-blue);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
}

/* ───── Footer ───── */
.tlz-footer {
  background: var(--ink);
  color: var(--ivory);
  padding: clamp(56px, 8vw, 100px) var(--pad-page) 40px;
}
.tlz-footer .footer-grid {
  display: block;
  max-width: 1440px;
  margin: 0 auto;
}
.tlz-footer .footer-nav-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.tlz-footer .footer-nav-row a {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.tlz-footer .footer-nav-row a:hover { color: var(--tlz-teal); }
.tlz-footer .footer-grid > div > div a[aria-label]:hover {
  border-color: var(--tlz-teal) !important;
  color: var(--tlz-teal) !important;
}
.tlz-footer h5 {
  font-family: var(--f-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin: 0 0 22px 0;
  font-weight: 500;
}
.tlz-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.tlz-footer a { color: rgba(255,255,255,0.82); font-size: 14px; }
.tlz-footer a:hover { color: var(--tlz-teal); }
.tlz-footer .footer-bottom {
  max-width: 1440px;
  margin: 64px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}

/* ───── Density mod ───── */
.density-compact { --pad-page: clamp(16px, 2.4vw, 36px); }
.density-compact .section { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(40px, 6vw, 80px); }
.density-compact .tlz-header-inner { height: 64px; }

/* ───── Mobile menu button (shown only <900px) ───── */
.menu-btn {
  display: none;
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  padding: 0;
  margin-left: 4px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
}
.menu-btn:hover { border-color: var(--ink); }

/* Slide-down sheet for nav (mobile) */
.mobile-nav-sheet {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: var(--paper);
  z-index: 80;
  transform: translateY(-100%);
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
  border-bottom: 1px solid var(--line);
  padding: 80px 0 36px;
  display: flex;
  flex-direction: column;
}
.mobile-nav-sheet.open { transform: translateY(0); }
.mobile-nav-sheet .mn-close {
  position: absolute;
  top: 20px;
  right: var(--pad-page);
  width: 40px; height: 40px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  display: inline-flex;
  align-items: center; justify-content: center;
}
.mobile-nav-sheet .mn-list {
  display: flex;
  flex-direction: column;
  padding: 0 var(--pad-page);
  gap: 4px;
}
.mobile-nav-sheet .mn-list button {
  font-family: var(--f-display);
  text-align: left;
  font-size: clamp(28px, 8vw, 40px);
  font-weight: 300;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
}
.mobile-nav-sheet .mn-list button.active { color: var(--tlz-blue); }
.mobile-nav-sheet .mn-meta {
  display: flex;
  justify-content: space-between;
  padding: 24px var(--pad-page) 0;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.mobile-nav-scrim {
  position: fixed; inset: 0;
  background: rgba(15,31,58,0.35);
  z-index: 75;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
.mobile-nav-scrim.open { opacity: 1; pointer-events: auto; }

/* ─────────────────────────────────────────────
   Responsive overrides
   Many grids are declared via inline style props in JSX,
   so we use attribute substring selectors with !important
   to neutralize them at mobile widths.
   ───────────────────────────────────────────── */

/* Thai needs more leading — stacked tone marks & vowels collide at tight line-height */
/* Thai hero: shrink from the giant Latin display size (Thai wraps to many lines)
   and use just enough leading to clear stacked tone marks — no large gaps */
html[lang="th"] .hero3d-copy .display {
  font-size: clamp(38px, 5.2vw, 72px) !important;
  line-height: 1.18 !important;
}

/* Highlights 3-up row keeps its 3-across layout at every width (scales like desktop) */
.frame .hl-row[style*="grid-template-columns: repeat(3"] {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: clamp(8px, 2vw, 24px) !important;
  row-gap: clamp(8px, 2vw, 24px) !important;
}

/* Tablet — softer page padding, 3-col → 2-col where possible */
@media (max-width: 1024px) {
  :root { --pad-page: clamp(24px, 5vw, 56px); }

  .frame [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Community gallery 4-col → 3-col on tablet */
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .menu-btn { display: inline-flex; }
  .tlz-header-inner { height: 68px; gap: 8px; }
  .nav-actions { gap: 6px; }
  /* "Cart" label is redundant with the icon at this width */
  .cart-btn > span:not(.cart-count) { display: none; }
  .cart-btn { padding: 6px 8px; }
  .lang-pill { padding: 5px 10px; font-size: 10px; letter-spacing: 0.14em; }
  .tlz-footer .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Mobile — stack everything */
@media (max-width: 760px) {
  :root {
    --t-mega:    clamp(44px, 12vw, 68px);
    --t-hero:    clamp(36px, 10vw, 52px);
    --t-h1:      clamp(28px, 8vw, 40px);
    --t-h2:      clamp(24px, 6.6vw, 32px);
    --t-h3:      20px;
    --t-body:    15px;
    --pad-page:  20px;
    --grid-gutter: 16px;
    --gap:       16px;
  }
  body { font-size: 15px; }

  /* Header — shrink logo and hide lang globe icon to give actions room */
  .tlz-header-inner { height: 60px; gap: 6px; }
  .logo-btn { padding-left: 44px; }
  .logo-mark { left: calc(-1 * var(--pad-page) + 8px); }
  .logo-mark img { height: 30px !important; }
  .logo-btn > img { height: 14px !important; }
  .lang-pill { padding: 5px 8px; font-size: 10px; }
  .lang-pill svg { display: none; }
  .cart-btn { padding: 4px 6px; gap: 4px; }
  .cart-btn > span:not(.cart-count) { display: none; }

  /* Section spacing */
  .section { padding-top: 56px !important; padding-bottom: 56px !important; }
  .section.tight { padding-top: 32px !important; padding-bottom: 32px !important; }

  /* Stack any frame-level grid declared inline */
  .frame[style*="grid-template-columns"],
  .frame [style*="grid-template-columns: repeat(3"],
  .frame [style*="grid-template-columns: repeat(2"],
  .frame [style*="grid-template-columns: 1fr 1fr"],
  .frame [style*="grid-template-columns: 1fr 1.2fr"],
  .frame [style*="grid-template-columns: 1.15fr 1fr"],
  .frame [style*="grid-template-columns: 1.2fr 1fr"],
  .frame [style*="grid-template-columns: 1.4fr 1fr"],
  .frame [style*="grid-template-columns: 1.6fr 1fr"],
  .frame [style*="grid-template-columns: 1fr 1.4fr"],
  .frame [style*="grid-template-columns: 1fr 1.6fr"],
  .frame [style*="grid-template-columns: 1fr 2fr"],
  .frame [style*="grid-template-columns: 2fr 1fr 1fr"],
  .frame [style*="grid-template-columns: 1fr 1fr 1fr"],
  .frame [style*="grid-template-columns: 1.4fr 1fr 1fr"],
  .frame [style*="grid-template-columns: 120px 1fr 1fr auto"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    row-gap: 32px !important;
  }

  /* Field rows in forms (Name/Last, City/Postal/Country, etc.) */
  form [style*="grid-template-columns: 1fr 1fr"],
  form [style*="grid-template-columns: 1fr 1fr 1fr"],
  form [style*="grid-template-columns: 2fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  /* Checkout "Row" 140px label · content → stack */
  [style*="grid-template-columns: 140px 1fr"],
  [style*="grid-template-columns: 80px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  /* Collaboration row 120px · 1fr · 1fr · auto → 2 col on mobile */
  [style*="grid-template-columns: 120px 1fr 1fr auto"] {
    grid-template-columns: auto 1fr !important;
    row-gap: 4px !important;
    gap: 12px !important;
  }
  [style*="grid-template-columns: 120px 1fr 1fr auto"] > :nth-child(3),
  [style*="grid-template-columns: 120px 1fr 1fr auto"] > :nth-child(4) {
    grid-column: 1 / -1;
  }

  /* Disable sticky cols once stacked — sticky in a 1-col layout looks broken */
  .frame [style*="position: sticky"],
  aside[style*="position: sticky"] {
    position: static !important;
  }

  /* Cap obscenely tall hero placeholders */
  .ph[style*="height: 620px"],
  .ph[style*="height: 600px"],
  .ph[style*="height: 560px"],
  .ph[style*="height: 480px"],
  .ph[style*="height: 460px"],
  .ph[style*="height: 380px"] {
    height: 56vh !important;
    min-height: 280px;
    max-height: 460px;
  }

  /* Masonry gallery 3 cols → 2 cols */
  [style*="column-count: 3"] { column-count: 2 !important; }

  /* Community gallery 4-col → 2-col on phones */
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }

  /* Buttons sized down */
  .btn { height: 46px; padding: 0 22px; font-size: 12px; letter-spacing: 0.14em; }
  .btn-lg { height: 52px; padding: 0 26px; font-size: 12px; }
  .btn-sm { height: 38px; padding: 0 16px; font-size: 11px; }

  /* Hero overlay paddings tighter */
  .frame [style*="height: min(720px, 78vh)"] { height: min(560px, 70vh) !important; }

  /* Footer */
  .tlz-footer { padding-top: 56px; padding-bottom: 32px; }
  .tlz-footer .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 36px; }
  .tlz-footer .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: 40px;
  }

  /* Cart drawer — full width on mobile */
  aside[style*="box-shadow: -20px"] { width: 100vw !important; }

  /* Checkout stepper — labels become tiny, hide on smallest */
  .frame > div > div > div > div[style*="display: flex"][style*="opacity"] .eyebrow {
    font-size: 10px;
    letter-spacing: 0.14em;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  :root { --pad-page: 16px; }

  /* Masonry 2 → 1 col */
  [style*="column-count: 3"] { column-count: 1 !important; }

  /* Footer single col */
  .tlz-footer .footer-grid { grid-template-columns: 1fr !important; }

  /* Hide collab number column for cleaner stack */
  [style*="grid-template-columns: 120px 1fr 1fr auto"] > :nth-child(1) {
    grid-column: 1 / -1;
    font-size: 10px !important;
  }
}

/* ───── Animations ───── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp .8s ease both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.fade-in { animation: fadeIn .6s ease both; }

@keyframes hlRowDissolve {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.hl-row-fade { animation: hlRowDissolve .55s ease both; }

@keyframes hlSwipeFromRight {
  from { opacity: 0; transform: translateX(7%); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes hlSwipeFromLeft {
  from { opacity: 0; transform: translateX(-7%); }
  to   { opacity: 1; transform: translateX(0); }
}
.hl-row-swipe-l { animation: hlSwipeFromRight .45s cubic-bezier(.4,0,.2,1) both; }
.hl-row-swipe-r { animation: hlSwipeFromLeft .45s cubic-bezier(.4,0,.2,1) both; }

@keyframes splashLogo {
  0%   { opacity: 0; transform: scale(0.94); }
  20%  { opacity: 1; transform: scale(1); }
  80%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.02); }
}

/* Circular loader — spins around the brand mark */
@keyframes tlzSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes tlzBreathe {
  0%, 100% { transform: scale(1);    opacity: 0.92; }
  50%      { transform: scale(1.04); opacity: 1; }
}

/* ─────────────────────────────────────────────
   AI Concierge — floating helper bubble + chat panel
   ───────────────────────────────────────────── */
.ask {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  pointer-events: none;
}
.ask > * { pointer-events: auto; }

/* Launcher */
.ask-fab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 22px 0 18px;
  border-radius: 999px;
  background: var(--tlz-blue);
  color: #fff;
  box-shadow: 0 10px 30px rgba(15,31,58,0.28);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.ask-fab:hover { background: var(--tlz-blue-d); transform: translateY(-1px); box-shadow: 0 14px 34px rgba(15,31,58,0.32); }
.ask-fab.is-open {
  width: 56px; height: 56px; padding: 0; justify-content: center;
  background: var(--ink);
}
.ask-fab-icon { display: inline-flex; align-items: center; justify-content: center; }
.ask-fab-label {
  font-size: 13px; font-weight: 500; letter-spacing: 0.04em; white-space: nowrap;
}

/* Panel */
.ask-panel {
  width: min(380px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 140px));
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(15,31,58,0.22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform-origin: bottom right;
  transform: translateY(12px) scale(0.96);
  opacity: 0;
  pointer-events: none;
  transition: opacity .26s ease, transform .26s cubic-bezier(.2,.8,.2,1);
}
.ask-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

/* Header */
.ask-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 16px 18px;
  background: var(--tlz-blue);
  color: #fff;
}
.ask-head-id { display: flex; align-items: center; gap: 12px; }
.ask-dot {
  width: 9px; height: 9px; border-radius: 999px; background: var(--tlz-teal);
  box-shadow: 0 0 0 4px rgba(85,198,208,0.25);
  flex-shrink: 0;
}
.ask-title { font-size: 15px; font-weight: 600; letter-spacing: 0.01em; }
.ask-sub { font-size: 11px; color: rgba(255,255,255,0.72); margin-top: 2px; }
.ask-x {
  width: 32px; height: 32px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.85);
  transition: background .2s ease;
}
.ask-x:hover { background: rgba(255,255,255,0.14); color: #fff; }

/* Scroll area */
.ask-scroll {
  flex: 1; overflow-y: auto;
  padding: 18px 16px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--ivory-2);
}
.ask-row { display: flex; }
.ask-row.user { justify-content: flex-end; }
.ask-row.assistant { justify-content: flex-start; }
.ask-bubble {
  max-width: 84%;
  padding: 11px 14px;
  font-size: 14px;
  line-height: 1.5;
  border-radius: 14px;
  text-wrap: pretty;
}
.ask-bubble.assistant {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
}
.ask-bubble.user {
  background: var(--tlz-blue);
  color: #fff;
  border-bottom-right-radius: 4px;
}

/* Typing indicator */
.ask-typing { display: inline-flex; gap: 4px; align-items: center; }
.ask-typing span {
  width: 6px; height: 6px; border-radius: 999px; background: var(--muted-2);
  animation: askBlink 1.2s infinite ease-in-out;
}
.ask-typing span:nth-child(2) { animation-delay: .18s; }
.ask-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes askBlink {
  0%, 80%, 100% { opacity: .25; transform: translateY(0); }
  40%           { opacity: 1;   transform: translateY(-2px); }
}

/* Suggestion chips */
.ask-suggest { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ask-suggest button {
  font-size: 12.5px;
  padding: 8px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-2);
  transition: all .18s ease;
  text-align: left;
}
.ask-suggest button:hover { border-color: var(--tlz-blue); color: var(--tlz-blue); }

/* Input */
.ask-input {
  display: flex; align-items: center; gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--line);
  background: #fff;
}
.ask-input input {
  flex: 1;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: border-color .18s ease;
}
.ask-input input:focus { border-color: var(--tlz-blue); }
.ask-input button {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 999px;
  background: var(--tlz-blue);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .18s ease, opacity .18s ease;
}
.ask-input button:hover:not(:disabled) { background: var(--tlz-blue-d); }
.ask-input button:disabled { opacity: 0.4; cursor: default; }

@media (max-width: 480px) {
  .ask { right: 14px; bottom: 14px; left: 14px; align-items: flex-end; }
  .ask-panel { width: 100%; height: min(72vh, calc(100vh - 110px)); }
}

/* ─────────────────────────────────────────────
   About — atelier map
   ───────────────────────────────────────────── */
.about-map {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ivory-2);
}
.about-map-frame {
  display: block;
  width: 100%;
  height: 460px;
  border: 0;
  filter: grayscale(0.35) contrast(1.02);
}
.about-map-card {
  position: absolute;
  top: 24px;
  left: 24px;
  width: min(300px, calc(100% - 48px));
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 16px 40px rgba(15,31,58,0.16);
  border-radius: var(--radius-lg);
  padding: 22px 22px 24px;
}

@media (max-width: 760px) {
  .about-map-frame { height: 360px; }
  .about-map-card {
    position: static;
    width: 100%;
    border: none;
    border-top: 1px solid var(--line);
    box-shadow: none;
    border-radius: 0;
  }
}

/* ─────────────────────────────────────────────
   Hero · 3D interactive product (Marine Renewal Serum)
   CSS-built bottle on a gradient stage.
   Tilts to cursor · drag to spin · drifts on scroll.
   ───────────────────────────────────────────── */
.hero3d {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  min-height: min(800px, 92vh);
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.hero3d-bg {
  position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(118% 105% at 72% 24%,
    #5fb9c9 0%, #379ab1 22%, #2f74bd 46%, #1c4276 74%, #122e55 100%);
}
.hero3d-bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(125% 120% at 50% 38%, transparent 52%, rgba(7,17,36,0.55) 100%);
}
/* faint drifting light spots */
.hero3d-bg::before {
  content: ""; position: absolute; inset: -10%;
  background:
    radial-gradient(28% 36% at 18% 78%, rgba(120,224,232,0.30), transparent 70%),
    radial-gradient(24% 30% at 86% 18%, rgba(255,255,255,0.22), transparent 70%);
  filter: blur(8px);
  animation: hero3dDrift 18s ease-in-out infinite alternate;
}
@keyframes hero3dDrift {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(2.5%, -2%, 0); }
}
.hero3d-inner {
  position: relative;
  width: 100%;
  max-width: 1580px;
  margin: 0 auto;
  padding: 72px clamp(20px, 3vw, 48px) 72px var(--pad-page);
  display: grid;
  grid-template-columns: minmax(380px, 0.72fr) 1.28fr;
  align-items: center;
  gap: 32px;
  z-index: 1;
}
.hero3d-copy { color: #fff; max-width: 540px; }
.hero3d-copy .eyebrow { color: rgba(255,255,255,0.74); }
.hero3d-copy h1 { color: #fff; }
.hero3d-copy p { color: rgba(255,255,255,0.86); }
.hero3d-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero3d .btn-white { background: #fff; color: var(--ink); }
.hero3d .btn-white:hover { background: #eaf4f6; }
.hero3d .btn-glass {
  background: rgba(255,255,255,0.06);
  color: #fff;
  border-color: rgba(255,255,255,0.5);
  backdrop-filter: blur(4px);
}
.hero3d .btn-glass:hover { background: rgba(255,255,255,0.16); border-color: #fff; }

/* Stage */
.hero3d-stage {
  position: relative;
  height: min(520px, 62vh);
  perspective: 1500px;
  perspective-origin: 50% 42%;
  cursor: grab;
  display: flex; align-items: center; justify-content: center;
  touch-action: pan-y;
}
.hero3d-stage.grabbing { cursor: grabbing; }
.hero3d-glow {
  position: absolute; width: 56%; height: 62%; border-radius: 50%;
  background: radial-gradient(circle, rgba(195,240,246,0.55), rgba(195,240,246,0) 62%);
  filter: blur(14px); z-index: 0; pointer-events: none;
}
.bottle-shadow {
  position: absolute; bottom: 6%; left: 50%; width: 44%; height: 40px;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(5,14,30,0.6), rgba(5,14,30,0) 70%);
  filter: blur(7px); z-index: 0; pointer-events: none;
}
.hero3d-hint {
  position: absolute; bottom: 2%; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.6);
  pointer-events: none; z-index: 3; white-space: nowrap;
}
.hero3d-hint::before { content: ""; width: 14px; height: 1px; background: rgba(255,255,255,0.5); }

/* Bottle scene */
.bottle {
  --bw: 150px; --bh: 322px; --bd: 56px;     /* body w/h/depth */
  --cw: 72px;  --ch: 58px;  --cd: 50px;      /* collar */
  --th: 470px;                               /* total scene height */
  position: relative;
  width: var(--bw);
  height: var(--th);
  transform-style: preserve-3d;
  will-change: transform;
  z-index: 2;
}
.bottle > * { position: absolute; transform-style: preserve-3d; }

/* a centered 0-size anchor point; faces hang off it via translate(-50%,-50%) */
.b-body { left: 50%; top: calc(var(--th) - var(--bh) / 2); width: 0; height: 0; }
.b-cap  { left: 50%; top: calc(var(--th) - var(--bh) - var(--ch) / 2 + 5px); width: 0; height: 0; }

.b-face { position: absolute; left: 0; top: 0; backface-visibility: hidden; }

/* glass body faces */
.b-front, .b-back {
  width: var(--bw); height: var(--bh); border-radius: 12px / 9px;
  background:
    linear-gradient(90deg,
      rgba(8,28,52,0.42) 0%, rgba(8,28,52,0.10) 14%,
      rgba(255,255,255,0.0) 30%, rgba(255,255,255,0.55) 46%,
      rgba(255,255,255,0.0) 62%, rgba(8,28,52,0.16) 84%, rgba(8,28,52,0.5) 100%),
    linear-gradient(180deg,
      rgba(228,246,250,0.92) 0%, rgba(222,242,247,0.88) 30%,
      rgba(150,216,222,0.92) 37%, var(--tlz-teal) 43%,
      #2f86c0 72%, var(--tlz-blue) 100%);
  box-shadow: inset 0 2px 6px rgba(255,255,255,0.5), inset 0 -16px 30px rgba(10,30,60,0.35);
}
.b-front { transform: translate(-50%, -50%) translateZ(calc(var(--bd) / 2)); }
.b-back  { transform: translate(-50%, -50%) rotateY(180deg) translateZ(calc(var(--bd) / 2)); }
.b-left, .b-right {
  width: var(--bd); height: var(--bh); border-radius: 6px / 9px;
  background: linear-gradient(180deg, rgba(120,196,210,0.85) 0%, #2f86c0 60%, var(--tlz-blue-d) 100%);
  box-shadow: inset 0 0 20px rgba(8,26,52,0.4);
}
.b-right { transform: translate(-50%, -50%) rotateY(90deg)  translateZ(calc(var(--bw) / 2)); }
.b-left  { transform: translate(-50%, -50%) rotateY(-90deg) translateZ(calc(var(--bw) / 2)); }
.b-shoulder {
  width: var(--bw); height: var(--bd); border-radius: 10px;
  background: linear-gradient(180deg, #d6eef2 0%, #bfe6ec 100%);
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(calc(var(--bh) / 2));
}

/* wrapped label on front + back */
.b-label {
  position: absolute; left: 50%; top: 51%;
  width: calc(var(--bw) - 22px);
  transform: translate(-50%, -50%) translateZ(1px);
  background: linear-gradient(180deg, #ffffff 0%, #f3f7f9 100%);
  border-radius: 3px;
  padding: 13px 12px 12px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(10,30,60,0.18);
  pointer-events: none;
}
.b-label .bl-mark { font-family: var(--f-display); font-weight: 600; font-size: 12px; letter-spacing: 0.28em; color: var(--ink); text-transform: uppercase; }
.b-label .bl-rule { width: 20px; height: 1px; background: var(--tlz-teal); margin: 7px auto; }
.b-label .bl-name { font-family: var(--f-display); font-weight: 300; font-size: 12.5px; line-height: 1.25; color: var(--ink-2); }
.b-label .bl-meta { font-family: var(--f-mono); font-size: 8.5px; letter-spacing: 0.16em; color: var(--muted); text-transform: uppercase; margin-top: 7px; }

/* glass vertical sheen */
.b-sheen {
  position: absolute; left: calc(50% - var(--bw) / 2 + 20px); top: calc(50% - var(--bh) / 2 + 16px);
  width: 14px; height: calc(var(--bh) - 40px); border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.12));
  filter: blur(3px);
  transform: translateZ(calc(var(--bd) / 2 + 1px));
  pointer-events: none;
}

/* dropper collar (navy prism) */
.c-front, .c-back {
  width: var(--cw); height: var(--ch); border-radius: 4px;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.4) 0%, rgba(255,255,255,0.18) 44%, rgba(255,255,255,0.0) 60%, rgba(0,0,0,0.45) 100%),
    linear-gradient(180deg, #1b3252 0%, var(--ink) 100%);
}
.c-front { transform: translate(-50%, -50%) translateZ(calc(var(--cd) / 2)); }
.c-back  { transform: translate(-50%, -50%) rotateY(180deg) translateZ(calc(var(--cd) / 2)); }
.c-left, .c-right {
  width: var(--cd); height: var(--ch); border-radius: 3px;
  background: linear-gradient(180deg, #16304f, #0a1626);
}
.c-right { transform: translate(-50%, -50%) rotateY(90deg)  translateZ(calc(var(--cw) / 2)); }
.c-left  { transform: translate(-50%, -50%) rotateY(-90deg) translateZ(calc(var(--cw) / 2)); }
.c-top {
  width: var(--cw); height: var(--cd); border-radius: 4px;
  background: linear-gradient(180deg, #24405f, #15293f);
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(calc(var(--ch) / 2));
}
/* rubber bulb on top of the collar */
.c-bulb {
  left: 0; top: calc(-1 * var(--ch) / 2 - 30px);
  width: 80px; height: 64px;
  border-radius: 50% 50% 46% 46%;
  background:
    radial-gradient(60% 50% at 38% 30%, rgba(255,255,255,0.5), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #2b6fb8 0%, var(--tlz-blue) 50%, #1a4a7e 100%);
  transform: translate(-50%, -50%) translateZ(0);
  box-shadow: inset 0 -8px 16px rgba(8,26,52,0.4);
}

@media (max-width: 900px) {
  .hero3d-inner { grid-template-columns: 1fr !important; gap: 8px; padding-top: 56px; padding-bottom: 24px; text-align: center; }
  .hero3d-copy { margin: 0 auto; }
  .hero3d-lede { text-align: left !important; margin-left: auto; margin-right: auto; }
  .hero3d-actions { justify-content: center; }
  .hero3d-stage { height: min(440px, 56vh); order: 2; }
  .bottle { transform-origin: 50% 50%; }
  /* Hero product shot: contain to the stage and clip — no bleed into copy */
  .hero3d--dark .hero3d-stage { overflow: hidden; }
  .hero3d--dark .hero3d-stage img { transform: scale(0.95) rotate(0deg) !important; }
  /* Cut-out shots (images 2–4): fit fully within the stage on tablet/mobile,
     no forced rotation or extra zoom — keeps the whole tub visible instead
     of clipping it against the stage's overflow:hidden edges. */
  .hero3d-stage img.hero-cut { --hrot: 0deg !important; }
}
@media (max-width: 760px) {
  .bottle { --bw: 122px; --bh: 262px; --bd: 46px; --cw: 60px; --ch: 48px; --cd: 42px; --th: 390px; }
  .hero3d-stage { height: min(320px, 42vh); }
  .hero3d--dark .hero3d-stage img { transform: scale(0.88) rotate(0deg) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hero3d-bg::before { animation: none; }
}

/* ─────────────────────────────────────────────
   Hero · 3D interactive product — PHOTO variant (Raffiné-2P)
   Real product shot on a marine-night stage.
   Tilts to cursor · drag to rotate · floats · scroll drift.
   ───────────────────────────────────────────── */
.hero3d--dark .hero3d-bg {
  background: radial-gradient(125% 120% at 60% 46%,
    #0d2840 0%, #091e33 32%, #050f1f 60%, #03090f 84%, #020509 100%),
    #020509;
}
.hero3d--dark .hero3d-bg::after {
  background: radial-gradient(130% 125% at 50% 44%, transparent 40%, rgba(1,4,9,0.78) 100%);
}
.hero3d--dark .hero3d-bg::before {
  background:
    radial-gradient(26% 34% at 22% 74%, rgba(60,170,220,0.34), transparent 70%),
    radial-gradient(22% 28% at 82% 22%, rgba(120,220,235,0.20), transparent 70%);
}
.hero3d--dark .hero3d-copy p { color: rgba(225,238,245,0.82); }

/* blue spotlight pooled behind the tub, parallaxes opposite the tilt */
.hero3d--dark .hero3d-glow {
  position: absolute; left: 50%; top: 50%;
  width: 86%; height: 84%; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(64,180,232,0.34), rgba(64,180,232,0.08) 48%, transparent 70%);
  filter: blur(34px); z-index: 0; pointer-events: none;
}

.product3d {
  position: relative;
  width: min(640px, 52vw);
  transform-style: preserve-3d;
  will-change: transform;
  z-index: 2;
  filter: drop-shadow(0 36px 60px rgba(0,0,0,0.55));
}
.product3d-img {
  display: block; width: 100%; height: auto;
  border-radius: 14px;
  /* feather the dark photo edges so they melt into the night stage */
  -webkit-mask-image: radial-gradient(125% 125% at 50% 46%, #000 58%, transparent 92%);
          mask-image: radial-gradient(125% 125% at 50% 46%, #000 58%, transparent 92%);
  user-select: none; -webkit-user-drag: none;
}
/* travelling specular highlight across the acrylic shell */
.product3d-sheen {
  position: absolute; inset: 0; border-radius: 14px;
  background: linear-gradient(105deg, transparent 36%, rgba(255,255,255,0.16) 50%, transparent 64%);
  mix-blend-mode: screen; pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 120% at 50% 46%, #000 56%, transparent 88%);
          mask-image: radial-gradient(120% 120% at 50% 46%, #000 56%, transparent 88%);
}
.hero3d--dark .product-shadow {
  position: absolute; bottom: 9%; left: 50%; width: 50%; height: 52px;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(2,8,18,0.9), rgba(2,8,18,0) 72%);
  filter: blur(11px); z-index: 0; pointer-events: none;
}
.hero3d--dark .hero3d-hint { color: rgba(220,236,245,0.55); }
.hero3d--dark .hero3d-hint::before { background: rgba(220,236,245,0.45); }

/* ─────────────────────────────────────────────
   Photoreal product hero — real Raffiné-2P shots
   (¾ / top / side), cursor parallax + float, angle chips cross-fade.
   ───────────────────────────────────────────── */
.hero3d--dark .hero3d-stage { perspective: 1600px; }
.product-photo {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  transform-style: preserve-3d; will-change: transform;
}
.product-photo .pp-img {
  position: absolute; left: 50%; top: 50%;
  width: clamp(420px, 138%, 900px); max-width: none; height: auto;
  transform: translate(-50%, -50%);
  opacity: 0; transition: opacity .55s ease;
  -webkit-mask-image: radial-gradient(140% 132% at 50% 48%, #000 72%, rgba(0,0,0,0.4) 88%, transparent 99%);
          mask-image: radial-gradient(140% 132% at 50% 48%, #000 72%, rgba(0,0,0,0.4) 88%, transparent 99%);
  filter: drop-shadow(0 28px 48px rgba(0,0,0,0.55));
  pointer-events: none;
}
.product-photo .pp-img.on { opacity: 1; }
.angle-switch {
  position: absolute; bottom: 3%; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 5;
}
.angle-chip {
  font-family: inherit; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 8px 15px; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,0.07); color: rgba(225,238,245,0.72);
  border: 1px solid rgba(255,255,255,0.16); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.angle-chip:hover { background: rgba(255,255,255,0.14); color: #fff; }
.angle-chip.on { background: #fff; color: #0a1b2e; border-color: #fff; }

/* Three.js canvas fills the hero stage; transparent so the marine bg shows through */
.tub-mount {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 2; touch-action: pan-y;
}
.tub-mount canvas { display: block; cursor: grab; }
.tub-mount canvas:active { cursor: grabbing; }

/* ─────────────────────────────────────────────
   3D MODEL — Raffiné-2P spa tub (CSS geometry)
   Espresso woodgrain cabinet · white glossy acrylic deck ·
   two asymmetric wells · grey THALAZZO pad · chrome jets · cyan corner LEDs.
   Modelled from the product photos (top / back / left / right).
   --W width · --D depth · --H cabinet height · --Pd well depth
   ───────────────────────────────────────────── */
.tub-scene {
  position: relative; width: 0; height: 0;
  transform-style: preserve-3d;
  will-change: transform;
  z-index: 2;
  --W: 452px; --D: 360px; --H: 150px; --Pd: 60px;
  --wood1: #342d27; --wood2: #221b15; --wood3: #15100c;
  --acryl1: #ffffff; --acryl2: #eef3f5; --acryl3: #dbe5e8;
  --grey1: #74787d; --grey2: #565a5f;
  --led: #7fe6ff;
}
.tub { position: relative; width: 0; height: 0; transform-style: preserve-3d; }
.tub > *, .deck { position: absolute; transform-style: preserve-3d; }

/* ---- cabinet (espresso woodgrain box, horizontal grain) ---- */
.cab {
  left: 0; top: 0;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.22) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 14px),
    linear-gradient(180deg, var(--wood1) 0%, var(--wood2) 58%, var(--wood3) 100%);
  border-top: 5px solid var(--acryl2);              /* white acrylic lip overhang */
  box-shadow: inset 0 0 55px rgba(0,0,0,0.5);
}
.cab-front  { width: var(--W); height: var(--H); transform: translate(-50%,-50%) translateZ(calc(var(--D)/2)); }
.cab-back   { width: var(--W); height: var(--H); transform: translate(-50%,-50%) rotateY(180deg) translateZ(calc(var(--D)/2)); box-shadow: inset 0 0 80px rgba(0,0,0,0.72); }
.cab-left   { width: var(--D); height: var(--H); transform: translate(-50%,-50%) rotateY(-90deg) translateZ(calc(var(--W)/2)); box-shadow: inset 0 0 80px rgba(0,0,0,0.66); }
.cab-right  { width: var(--D); height: var(--H); transform: translate(-50%,-50%) rotateY(90deg)  translateZ(calc(var(--W)/2)); box-shadow: inset 0 0 70px rgba(0,0,0,0.55); }
.cab-bottom { width: var(--W); height: var(--D); transform: translate(-50%,-50%) rotateX(-90deg) translateZ(calc(var(--H)/2)); background: #0a0807; border-top: 0; }
/* perforated vent grille — rounded panel on the front-left, like the photo */
.cab-front::after {
  content: ""; position: absolute; left: 8%; top: 22%; width: 44%; height: 56%;
  border-radius: 10px;
  background-color: rgba(0,0,0,0.22);
  background-image: radial-gradient(rgba(0,0,0,0.65) 1.2px, transparent 1.9px);
  background-size: 12px 10px;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.3), inset 0 3px 8px rgba(0,0,0,0.45);
}
/* faint vertical access-door seam on the front-right */
.cab-front::before {
  content: ""; position: absolute; right: 14%; top: 12%; width: 1px; height: 76%;
  background: rgba(0,0,0,0.4);
}
/* subtle grain sheen on the side + back faces */
.cab-left::after, .cab-right::after, .cab-back::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.05), transparent 22%, transparent 78%, rgba(0,0,0,0.28));
}

/* ---- LED corner strips (cyan glow) ---- */
.led {
  width: 7px; height: calc(var(--H) - 8px);
  background: linear-gradient(180deg, #8fe6ff, #2bb6ef 55%, #1280c8);
  box-shadow: 0 0 14px 3px rgba(60,200,245,0.85), 0 0 30px 6px rgba(60,200,245,0.4);
  border-radius: 4px;
}
.led-fl { left: 0; top: 0; transform: translate(-50%,-50%) translateZ(calc(var(--D)/2 + 1px)) translateX(calc(var(--W)/-2 + 3px)); }
.led-fr { left: 0; top: 0; transform: translate(-50%,-50%) translateZ(calc(var(--D)/2 + 1px)) translateX(calc(var(--W)/2 - 3px)); }
.led-bl { left: 0; top: 0; transform: translate(-50%,-50%) rotateY(-90deg) translateZ(calc(var(--W)/2 + 1px)) translateX(calc(var(--D)/-2 + 3px)); }
.led-br { left: 0; top: 0; transform: translate(-50%,-50%) rotateY(90deg)  translateZ(calc(var(--W)/2 + 1px)) translateX(calc(var(--D)/2 - 3px)); }

/* ---- deck (top face — white glossy acrylic coaming around two wells) ---- */
.deck {
  left: 0; top: 0; width: var(--W); height: var(--D);
  transform: translate(-50%,-50%) rotateX(90deg) translateZ(calc(var(--H)/2));
}
.deck * { position: absolute; }
/* white acrylic coaming pieces (wells live at y 54..304) */
.dframe {
  background: linear-gradient(180deg, #ffffff 0%, var(--acryl2) 55%, var(--acryl3) 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.9), inset 0 -3px 7px rgba(150,170,180,0.28);
}
.dframe-t   { left: 0;   top: 0;    width: 452px; height: 54px;  border-radius: 30px 30px 0 0; }
.dframe-b   { left: 0;   top: 304px; width: 452px; height: 56px; border-radius: 0 0 26px 44px; }
.dframe-l   { left: 0;   top: 54px; width: 52px;  height: 250px; }
.dframe-r   { left: 404px; top: 54px; width: 48px;  height: 250px; border-radius: 0 0 24px 0; }
.dframe-div { left: 230px; top: 54px; width: 32px;  height: 250px; }

/* grey THALAZZO pad at the foot of the left well */
.deck-pillow {
  left: 58px; top: 298px; width: 156px; height: 56px; border-radius: 14px;
  background: linear-gradient(165deg, var(--grey1), var(--grey2) 72%, #4a4e53);
  box-shadow: inset 0 2px 3px rgba(255,255,255,0.16), inset 0 -3px 6px rgba(0,0,0,0.32), 0 3px 6px rgba(0,0,0,0.35);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  transform: translateZ(3px);
}
.dp-logo { position: relative; font-family: var(--f-display); font-size: 15px; letter-spacing: 0.26em; color: rgba(238,244,248,0.82); line-height: 1; }
.dp-sub  { position: relative; font-size: 5.5px; letter-spacing: 0.3em; color: rgba(238,244,248,0.5); line-height: 1; }
/* topside control pads (Balboa-style oval, cyan readout) */
.deck-panel {
  background: radial-gradient(130% 130% at 50% 0%, #3a3f45, #191c20);
  border-radius: 16px; border: 1px solid rgba(0,0,0,0.45);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.16), 0 2px 4px rgba(0,0,0,0.4);
  transform: translateZ(3px);
}
.deck-panel-1 { left: 296px; top: 320px; width: 86px; height: 22px; }
.deck-panel-2 { left: 330px; top: 16px;  width: 66px; height: 20px; }
.deck-panel::after {
  content: ""; position: absolute; left: 9px; top: 6px; width: 28px; height: 9px;
  background: var(--led); border-radius: 2px; box-shadow: 0 0 8px rgba(127,230,255,0.85);
}

/* ---- recessed wells (white acrylic basins) ---- */
.well { transform-style: preserve-3d; }
.well-left  { left: 52px;  top: 54px; width: 178px; height: 250px; }
.well-right { left: 262px; top: 54px; width: 142px; height: 250px; }
.w-wall { background: linear-gradient(180deg, #ffffff, #e2ecef); box-shadow: inset 0 0 16px rgba(120,150,165,0.34); }
.w-n { left: 0; top: 0;    width: 100%; height: var(--Pd); transform-origin: 50% 0%;   transform: rotateX(-90deg); }
.w-s { left: 0; bottom: 0; width: 100%; height: var(--Pd); transform-origin: 50% 100%; transform: rotateX(90deg); }
.w-w { left: 0; top: 0;    width: var(--Pd); height: 100%; transform-origin: 0% 50%;   transform: rotateY(90deg); }
.w-e { right: 0; top: 0;   width: var(--Pd); height: 100%; transform-origin: 100% 50%; transform: rotateY(-90deg); }
.w-floor {
  left: 0; top: 0; width: 100%; height: 100%;
  background: radial-gradient(62% 58% at 50% 42%, #ffffff, #d4e3e8);
  transform: translateZ(calc(-1 * var(--Pd)));
}
/* lit water surface, set just below the rim */
.w-water {
  left: 5px; top: 5px; width: calc(100% - 10px); height: calc(100% - 10px);
  border-radius: 16px; overflow: hidden;
  background:
    linear-gradient(165deg, rgba(150,236,252,0.74) 0%, rgba(54,190,238,0.84) 40%, rgba(20,120,200,0.9) 100%);
  box-shadow: inset 0 0 30px rgba(8,60,110,0.55), 0 0 28px rgba(90,210,245,0.5);
  transform: translateZ(calc(-1 * var(--Pd) + 42px));
}
.w-shimmer {
  position: absolute; inset: -20%;
  background:
    radial-gradient(38% 24% at 30% 28%, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(30% 18% at 68% 62%, rgba(255,255,255,0.4), transparent 60%),
    repeating-linear-gradient(118deg, rgba(255,255,255,0.10) 0 6px, transparent 6px 16px);
  animation: tubShimmer 7s ease-in-out infinite alternate;
}
.well-right .w-shimmer { animation-duration: 4.5s; }
@keyframes tubShimmer {
  from { transform: translate(0,0); }
  to   { transform: translate(5%, 4%); }
}
/* chrome jet clusters near the head wall */
.w-jets {
  left: 50%; width: 92px; height: 50px; transform: translateX(-50%) translateZ(calc(-1 * var(--Pd) + 44px));
  background-repeat: repeat;
  background-image:
    radial-gradient(circle at 50% 42%, #f2fbff 0.7px, #d2e2ea 1.7px, #93a8b1 2.7px, #5a6c75 3.6px, rgba(120,150,165,0) 4.4px);
  background-size: 20px 17px;
  opacity: 0.9;
}
.w-jets-l { top: 26px; width: 70px; height: 34px; opacity: 0.8; }
.w-jets-r { top: 22px; }
/* grey ergonomic headrest at the head of each well */
.w-rest {
  left: 50%; top: 3px; width: 58%; height: 28px; transform: translateX(-50%) translateZ(calc(-1 * var(--Pd) + 50px));
  border-radius: 7px 7px 13px 13px;
  background: linear-gradient(180deg, var(--grey1), var(--grey2) 70%, #494d52);
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.18), 0 3px 5px rgba(0,0,0,0.32);
}

@media (max-width: 1100px) { .tub { transform: scale(0.82); } }
@media (max-width: 900px)  { .tub { transform: scale(0.72); } }
@media (max-width: 760px)  { .tub { transform: scale(0.58); } }
@media (prefers-reduced-motion: reduce) {
  .w-shimmer { animation: none; }
}