/* ══════════════════════════════════════════════════════════════════════
   DTR Home — "The Reveal" wave 1. Signature WOW moments, vanilla, no deps.
   Pairs with dtr-home.js. Reduced-motion aware. Gold/dark per CLAUDE.md.
   · Split-text hero title   · Magnetic CTAs   · Brand marquee
   · Drag-to-reveal before/after centerpiece
   ══════════════════════════════════════════════════════════════════════ */

/* ── Split-text hero headline ─────────────────────────────────────────── */
#pg-home .dtr-split br{ display:none; }
#pg-home .dtr-line{ display:block; overflow:hidden; padding-bottom:.04em; }
#pg-home .dtr-line-inner{
  display:inline-block;
  transform:translateY(115%);
  filter:blur(5px);
  transition:transform .9s cubic-bezier(.22,.61,.36,1), filter .9s ease;
  will-change:transform,filter;
}
#pg-home .dtr-split.on .dtr-line-inner{ transform:none; filter:blur(0); }

/* Self-drawing gold underline under the italic hero line */
#pg-home .dtr-split em{ position:relative; }
#pg-home .dtr-split em::after{
  content:""; position:absolute; left:0; right:0; bottom:-.06em; height:2px;
  background:linear-gradient(90deg, var(--gold-light,#e0b862), var(--gold,#b88723));
  transform:scaleX(0); transform-origin:left;
  transition:transform .9s cubic-bezier(.22,.61,.36,1) .5s;
}
#pg-home .dtr-split.on em::after{ transform:scaleX(1); }

/* ── Magnetic buttons (JS nudges toward cursor; this is just the easing) ── */
.dtr-magnetic{ transition:transform .25s cubic-bezier(.22,.61,.36,1); }

/* ── Brand trust marquee ──────────────────────────────────────────────── */
.dtr-brands{ background:var(--bg,#0a0f14); padding:30px 0; border-top:1px solid rgba(184,135,35,.2); border-bottom:1px solid rgba(184,135,35,.2); }
.dtr-brands .mui-marquee{ --mui-marquee-gap:70px; --mui-marquee-speed:38s; }
.dtr-brands img{
  height:34px; width:auto; object-fit:contain; opacity:.45;
  filter:brightness(0) invert(1);           /* white-out logos on navy */
  transition:opacity .3s ease, filter .3s ease;
}
.dtr-brands img:hover{ opacity:.9; }

/* ── Drag-to-reveal before/after centerpiece ──────────────────────────── */
.dtr-reveal-sec{ background:var(--bg,#0a0f14); padding:104px 0; position:relative; overflow:hidden; }
.dtr-reveal-sec .wrap{ position:relative; z-index:2; }
.dtr-reveal-eyebrow{ text-align:center; font-family:var(--sans,'DM Sans',sans-serif); font-size:11px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-light,#e0b862); margin-bottom:26px; }
.dtr-ba{
  position:relative; aspect-ratio:16/9; max-width:1100px; margin:0 auto;
  border-radius:24px; overflow:hidden; cursor:ew-resize; user-select:none; touch-action:pan-y;
  --p:.5;   /* reveal position 0..1, set by JS */
  box-shadow:
    0 0 0 1px rgba(232,201,110,.55),
    0 0 28px 4px rgba(184,135,35,.40),
    0 28px 80px 0 rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(232,201,110,.4);
}
.dtr-ba img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.dtr-ba-beforewrap{ position:absolute; inset:0; clip-path:inset(0 calc((1 - var(--p)) * 100%) 0 0); will-change:clip-path; }
.dtr-ba-handle{
  position:absolute; top:0; bottom:0; left:calc(var(--p) * 100%);
  width:2px; margin-left:-1px; background:var(--gold-light,#e0b862);
  box-shadow:0 0 14px 2px rgba(224,184,98,.6); pointer-events:none; z-index:3;
}
.dtr-ba-grip{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:48px; height:48px; border-radius:50%;
  background:rgba(10,15,20,.6); backdrop-filter:blur(6px);
  border:2px solid var(--gold-light,#e0b862);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 24px rgba(0,0,0,.5), 0 0 18px rgba(224,184,98,.45);
}
.dtr-ba-grip::before{ content:"\2194"; color:var(--gold-light,#e0b862); font-size:20px; line-height:1; font-weight:700; }
/* corner tags (icon-only, no translatable prose) */
.dtr-ba-tag{ position:absolute; bottom:16px; z-index:3; font-family:var(--sans,'DM Sans',sans-serif); font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#fff; background:rgba(10,15,20,.55); backdrop-filter:blur(4px); padding:6px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.18); }
.dtr-ba-tag.l{ left:16px; }
.dtr-ba-tag.r{ right:16px; color:var(--gold-light,#e0b862); border-color:rgba(224,184,98,.35); }
.dtr-reveal-sec .mui-gridbg{ opacity:.35; }

@media (max-width:680px){ .dtr-ba{ aspect-ratio:4/5; } }

@media (prefers-reduced-motion: reduce){
  #pg-home .dtr-line-inner{ transform:none !important; filter:none !important; transition:none !important; }
  #pg-home .dtr-split em::after{ transform:scaleX(1) !important; transition:none !important; }
  .dtr-magnetic{ transition:none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   BRIGHT EDITORIAL HERO (redesign v2) — light, welcoming, premium.
   Replaces the dark studio hero. Warm-white bg + gold glow, big serif
   headline, gold-framed Ken-Burns photo, floating review card, stat ledger.
   ══════════════════════════════════════════════════════════════════════ */
.dtrx-stage{ position:relative; overflow:hidden;
  background:linear-gradient(180deg,#ffffff 0%,#fbfbfa 55%,#f5f5f5 100%);
  padding:clamp(44px,6vh,72px) 0 clamp(36px,4.5vh,52px); }
.dtrx-glow{ position:absolute; top:-12%; right:-6%; width:60%; height:95%;
  background:radial-gradient(ellipse at 68% 28%, rgba(224,184,98,.26), rgba(224,184,98,.07) 45%, transparent 65%);
  pointer-events:none; z-index:0; }
.dtrx-grid{ position:relative; z-index:1; max-width:1280px; margin:0 auto;
  padding:0 clamp(20px,5vw,64px); display:grid; grid-template-columns:1.02fr 1.08fr;
  gap:clamp(32px,5vw,76px); align-items:center; }
.dtrx-copy{ max-width:600px; }
.dtrx-eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:var(--sans,'DM Sans',sans-serif);
  font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#6f4e12; margin-bottom:16px; }
.dtrx-dot{ width:7px; height:7px; border-radius:50%; background:var(--gold,#b88723); box-shadow:0 0 0 4px rgba(184,135,35,.16); }
.dtrx-title{ font-family:var(--serif,'Cormorant Garamond',serif); font-weight:300;
  font-size:clamp(42px,5.2vw,76px); line-height:1; letter-spacing:-.02em; color:#16202b; margin:0 0 18px; }
.dtrx-title em{ font-style:italic; color:#6f4e12; }
.dtrx-sub{ font-family:var(--sans,'DM Sans',sans-serif); font-size:clamp(16px,1.5vw,19px);
  line-height:1.65; color:#55626f; margin:0 0 24px; max-width:470px; }
.dtrx-ctas{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-bottom:30px; }
.dtrx-ghost{ display:inline-flex; align-items:center; gap:11px; font-family:var(--sans,'DM Sans',sans-serif);
  font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#16202b; text-decoration:none;
  padding:13px 26px; border:1.5px solid rgba(184,135,35,.5); border-radius:40px; background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); transition:color .25s,border-color .25s,background .25s; }
.dtrx-ghost svg{ color:#6f4e12; }
.dtrx-ghost:hover{ color:#6f4e12; border-color:rgba(184,135,35,.85); background:rgba(255,255,255,.85); }
.dtrx-ledger{ display:flex; gap:clamp(18px,3vw,40px); }
.dtrx-fig{ position:relative; }
.dtrx-fig + .dtrx-fig{ padding-left:clamp(18px,3vw,40px); }
.dtrx-fig + .dtrx-fig::before{ content:""; position:absolute; left:0; top:4px; bottom:4px; width:1px; background:rgba(184,135,35,.3); }
.dtrx-fig-n{ font-family:var(--serif,'Cormorant Garamond',serif); font-size:clamp(28px,3vw,42px); font-weight:500; line-height:1;
  background:linear-gradient(135deg,#b88723 0%,#8a6418 50%,#6e4f12 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; white-space:nowrap; }
.dtrx-fig-l{ font-family:var(--sans,'DM Sans',sans-serif); font-size:12.5px; color:#6b7682; margin-top:7px; max-width:108px; line-height:1.3; }

.dtrx-media{ position:relative; }
.dtrx-photo{ position:relative; aspect-ratio:16/11; border-radius:26px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(232,201,110,.5), 0 34px 80px -22px rgba(20,30,45,.42), 0 0 44px rgba(184,135,35,.16); }
.dtrx-photo img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.04);
  animation:dtr-kenburns 20s ease-in-out infinite alternate; }
@keyframes dtr-kenburns{ from{ transform:scale(1.04) translate(0,0); } to{ transform:scale(1.13) translate(-2%,-2%); } }
.dtrx-rev{ position:absolute; left:-24px; bottom:34px; background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(12px) saturate(150%); backdrop-filter:blur(12px) saturate(150%);
  border:1px solid rgba(184,135,35,.25); border-radius:16px; padding:15px 20px;
  box-shadow:0 22px 54px -16px rgba(20,30,45,.5); display:flex; flex-direction:column; gap:5px; }
.dtrx-rev-stars{ color:#e0b862; font-size:15px; letter-spacing:2px; }
.dtrx-rev-row{ display:flex; align-items:center; gap:12px; }
.dtrx-rev-num{ font-family:var(--serif,'Cormorant Garamond',serif); font-size:40px; font-weight:500; color:#16202b; line-height:1; }
.dtrx-rev-cap{ font-family:var(--sans,'DM Sans',sans-serif); font-size:11px; color:#6b7682; line-height:1.45; }
@media (max-width:980px){
  .dtrx-grid{ grid-template-columns:1fr; gap:40px; }
  .dtrx-media{ order:-1; max-width:560px; }
  .dtrx-rev{ left:0; }
}
@media (max-width:560px){ .dtrx-ledger{ flex-wrap:wrap; gap:18px 22px; } }

/* ── Full-bleed faded hero: studio "video" behind the lettering (2026-06-11) ── */
.dtrx-stage--bg{ display:flex; align-items:center; min-height:clamp(500px,72vh,700px);
  padding:clamp(40px,6vh,64px) 0; background:#f4f6f8; }
.dtrx-bgmedia{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.dtrx-bgmedia .dtrx-photo{ position:absolute; inset:0; width:100%; height:100%;
  aspect-ratio:auto; border-radius:0; box-shadow:none; }
.dtrx-bgmedia .dtrs-host{ background:#eef1f4 !important; }
/* keep the real photo painted BEHIND the WebGL canvas so the image always fills
   edge-to-edge (no host-colour sliver) even mid-resize */
.dtrx-stage--bg .dtrx-bgmedia .dtrx-photo .dtr-studio-fallback{ display:block !important;
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
/* white veil: opaque over the text (left), clears toward the photo (right) + soft top/bottom blend */
.dtrx-bgfade{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(100deg,#ffffff 0%,#ffffff 27%,rgba(255,255,255,.86) 44%,rgba(255,255,255,.5) 66%,rgba(255,255,255,.26) 100%),
    linear-gradient(to top,#ffffff 0%,rgba(255,255,255,0) 20%,rgba(255,255,255,0) 80%,rgba(255,255,255,.45) 100%); }
.dtrx-stage--bg .dtrx-glow{ z-index:1; }
/* left-anchor the copy to the same column the rest of the site uses (.wrap = 1320px)
   so it lines up with every section below instead of floating centre-right */
.dtrx-stage--bg .dtrx-grid{ position:relative; z-index:3; display:block;
  width:100%; max-width:1320px; margin:0 auto; padding:0 clamp(20px,4vw,48px); }
.dtrx-stage--bg .dtrx-copy{ max-width:600px; }
/* Tablet/mid widths: keep the white veil opaque under the full copy block so the
   dark hero text never washes out over the busy photo (761–1100px). (DSGN-14) */
@media (min-width:761px) and (max-width:1100px){
  .dtrx-bgfade{ background:
    linear-gradient(100deg,#ffffff 0%,#ffffff 40%,rgba(255,255,255,.88) 60%,rgba(255,255,255,.4) 100%),
    linear-gradient(to top,#ffffff 0%,rgba(255,255,255,0) 20%,rgba(255,255,255,0) 80%,rgba(255,255,255,.45) 100%); }
}
@media (max-width:760px){
  .dtrx-stage--bg{ min-height:auto; }
  .dtrx-bgfade{ background:linear-gradient(180deg,rgba(255,255,255,.93) 0%,rgba(255,255,255,.72) 48%,rgba(255,255,255,.56) 100%); }
}

/* ── Ultrawide hero centering fix (HERO-01) ──────────────────────────────────
   Below 1920px the hero copy is deliberately anchored to the site's 1320px rail
   and reads balanced. Above 1920px the rail + white-veil gradient stops (which
   are viewport-percentage based) drift the headline off the opaque veil and left
   of centre. Every value below equals the computed value at exactly 1920px
   (÷1920 → vw), so 1280–1920px is pixel-identical and >1920px the whole
   composition — copy, veil and photo crop — scales together up to 3840px. */
@media (min-width:1921px){
  .dtrx-stage--bg{ min-height:min(36.46vw,88vh); }
  .dtrx-stage--bg .dtrx-grid{ max-width:68.75vw; padding:0 2.5vw; }
  .dtrx-stage--bg .dtrx-copy{ max-width:31.25vw; }
  .dtrx-stage--bg .dtrx-title{ font-size:3.96vw; }
  .dtrx-stage--bg .dtrx-sub{ font-size:.99vw; max-width:24.5vw; }
  .dtrx-stage--bg .dtrx-eyebrow{ font-size:.625vw; }
  .dtrx-stage--bg .dtrx-fig-n{ font-size:2.19vw; }
  .dtrx-stage--bg .dtrx-fig-l{ font-size:.65vw; max-width:5.63vw; }
}

/* Why strip — light feature band under the hero */
.dtr-whystrip{ background:#ffffff; border-top:1px solid #ededed; border-bottom:1px solid #ededed; padding:40px 0; }
.dtr-whystrip-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:26px; }
.dtr-whystrip .hv-feature-h{ color:#16202b; }
.dtr-whystrip .hv-feature-p{ color:#69727c; }
.dtr-whystrip .hv-feature::after{ background:linear-gradient(to bottom,transparent,rgba(184,135,35,.22) 30%,rgba(184,135,35,.22) 70%,transparent); }
@media (max-width:900px){ .dtr-whystrip-grid{ grid-template-columns:repeat(2,1fr); gap:22px 26px; } }
@media (max-width:520px){ .dtr-whystrip-grid{ grid-template-columns:1fr; } }

/* Brand marquee → flipped to LIGHT */
.dtr-brands{ background:#ffffff; border-top:1px solid #ededed; border-bottom:1px solid #ededed; }
.dtr-brands img{ filter:grayscale(1) brightness(.55); opacity:.5; }
.dtr-brands img:hover{ filter:none; opacity:1; }

@media (prefers-reduced-motion: reduce){
  .dtrx-photo img{ animation:none; transform:none; }
}