/* ==========================================================================
   THE TREE JOURNEY — golden layer over the v3 dark system.
   One fixed WebGL tree behind every page; scenes scroll past it and the
   camera flies. Gold is the soul (IBL), navy stays the ground.
   ========================================================================== */
:root{
  --gold:#FFD77A;
  --gold-soft:#FFE9B8;
  --gold-deep:#C98A3E;
  --copper:#FF9D5C;
  --gold-line:rgba(255,215,122,.18);
  --gold-line-strong:rgba(255,215,122,.38);
}

#treeCanvas{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; opacity:0;
  transition:opacity .5s ease;
}
body[data-tree]{ background:#070810; }
body[data-tree] main, body[data-tree] .scene, body[data-tree] footer,
body[data-tree] .section, body[data-tree] .arthead, body[data-tree] .arthero{
  position:relative; z-index:1;
}
body[data-tree] .nav{ z-index:60; }

/* ---- scenes (homepage journey) ---- */
.scene{ position:relative; z-index:1; min-height:108vh; display:flex; align-items:center; padding:14vh 0; }
.scene-hero{ min-height:100vh; padding-top:8vh; }
.scene-last{ min-height:92vh; }

.jpanel{
  background:rgba(7,9,18,.58);
  border:1px solid var(--gold-line);
  border-radius:22px;
  padding:44px 48px;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  max-width:920px;
  box-shadow:0 28px 72px rgba(1,4,12,.6), 0 0 46px rgba(255,215,122,.05);
}
.jpanel-narrow{ max-width:660px; }
.jpanel-hero{
  background:transparent; border:none; box-shadow:none;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  padding:0; max-width:760px;
  position:relative;
}
/* readability scrim: a soft dark breath behind the hero copy, no box */
.jpanel-hero::before{
  content:''; position:absolute; inset:-70px -90px;
  background:radial-gradient(ellipse at 42% 45%, rgba(6,7,14,.82) 0%, rgba(6,7,14,.55) 48%, rgba(6,7,14,0) 74%);
  z-index:-1; pointer-events:none;
}
.jsub{ color:#CFC8B0; text-shadow:0 1px 14px rgba(4,5,10,.95); }

.scene .eyebrow{ color:var(--gold); border-color:var(--gold-line-strong); }

.jh1{
  font-family:'Space Grotesk',Inter,sans-serif; font-weight:700;
  font-size:clamp(2.6rem,6.2vw,5.2rem); line-height:1.0;
  color:#F5E9CB; margin:18px 0 22px; letter-spacing:-.02em;
  text-transform:uppercase; text-wrap:balance;
  text-shadow:0 2px 30px rgba(4,5,12,.9);
}
.jh1 em{
  font-style:normal;
  background:linear-gradient(92deg,#FFE9B8,#FFD77A 55%,#FF9D5C);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.jh2{
  font-family:'Space Grotesk',Inter,sans-serif; font-weight:700;
  font-size:clamp(1.9rem,4vw,3rem); line-height:1.1;
  color:#F2E5C4; margin:14px 0 22px; letter-spacing:-.01em; text-wrap:balance;
}
.jsub{ color:#BAB49E; font-size:1.06rem; line-height:1.75; max-width:60ch; }
.jsub b{ color:var(--gold-soft); font-weight:600; }

/* ---- card grids in scenes ---- */
.jgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:26px; }
.jgrid-3{ grid-template-columns:repeat(3,1fr); }
.jcard{
  display:block; padding:20px 22px; border-radius:16px;
  background:rgba(255,233,184,.045);
  border:1px solid var(--gold-line);
  text-decoration:none;
  transition:border-color .25s, background .25s, transform .25s;
}
.jcard:hover{ border-color:var(--gold-line-strong); background:rgba(255,233,184,.09); transform:translateY(-3px); }
.jcard b{ display:block; color:var(--gold-soft); font-weight:600; font-size:1.02rem; margin-bottom:6px; }
.jcard span{ color:#9C967F; font-size:.9rem; line-height:1.55; }

/* ---- numbered steps ---- */
.jsteps{ list-style:none; counter-reset:jstep; margin:26px 0 0; padding:0; }
.jsteps li{
  counter-increment:jstep; position:relative;
  padding:18px 0 18px 74px; border-top:1px solid var(--gold-line);
}
.jsteps li::before{
  content:counter(jstep,decimal-leading-zero);
  position:absolute; left:0; top:16px;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.7rem;
  background:linear-gradient(180deg,#FFE9B8,#C98A3E);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.jsteps b{ display:block; color:var(--gold-soft); font-size:1.08rem; margin-bottom:4px; }
.jsteps span{ color:#9C967F; line-height:1.6; }

/* ---- scroll cue, gold ---- */
.scene-hero .scroll-cue span{ color:var(--gold); letter-spacing:.28em; }
.scene-hero .scroll-cue i{ border-color:var(--gold); }
.scene-hero .scroll-cue i::after{ background:var(--gold); }

/* ==========================================================================
   THE TRIBUTE SYSTEM — every inner page carries the homepage's signatures:
   the tree glowing through, scrims instead of slabs, gold rim-lights
   between movements, glass panels for reading. No flat boxes.
   ========================================================================== */

/* bands stop being slabs: transparent, with a soft focus-scrim and rims */
body[data-tree]:not([data-tree="hero"]) .section,
body[data-tree]:not([data-tree="hero"]) [class*="band-"]{
  background:transparent !important;
  position:relative;
}
body[data-tree]:not([data-tree="hero"]) .section::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(120% 90% at 50% 40%, rgba(6,7,13,.62) 0%, rgba(6,7,13,.34) 55%, rgba(6,7,13,.12) 100%);
}
body[data-tree]:not([data-tree="hero"]) .section > *{ position:relative; z-index:1; }

/* alternating movements: every second band gets the hero's golden breath */
body[data-tree] .band-blue::before,
body[data-tree] .band-deep::before{
  background:
    radial-gradient(56% 70% at 82% 0%, rgba(255,215,122,.10), transparent 62%),
    radial-gradient(120% 90% at 50% 40%, rgba(6,7,13,.66) 0%, rgba(6,7,13,.38) 55%, rgba(6,7,13,.14) 100%) !important;
}
body[data-tree] .band-blue{ border-top:1px solid var(--gold-line); }
body[data-tree] .band-deep{ border-top:1px solid var(--gold-line); border-bottom:1px solid var(--gold-line); }

/* inner-page heroes: the tree IS the backdrop, text gets the hero scrim */
body[data-tree] .phero{ background:transparent !important; }
body[data-tree] .phero .container{ position:relative; }
body[data-tree] .phero .container::before{
  content:''; position:absolute; inset:-60px -80px;
  background:radial-gradient(ellipse at 38% 45%, rgba(6,7,14,.8) 0%, rgba(6,7,14,.5) 50%, rgba(6,7,14,0) 75%);
  z-index:-1; pointer-events:none;
}
body[data-tree] .phero h1{ text-shadow:0 2px 28px rgba(4,5,12,.9); }
body[data-tree] .lead-sub{ color:#CFC8B0; text-shadow:0 1px 12px rgba(4,5,10,.9); }

/* cards float as glass over the tree — the jpanel's children */
body[data-tree] .card{
  background:rgba(10,10,18,.6);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--gold-line);
}
body[data-tree] .swipe-card{
  background:rgba(10,10,18,.66);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}

/* blog: the golden reading column — long-form gets the jpanel treatment */
body[data-tree] .arthead{ position:relative; }
body[data-tree] .arthead .container{ position:relative; }
body[data-tree] .arthead .container::before{
  content:''; position:absolute; inset:-50px -70px;
  background:radial-gradient(ellipse at 40% 50%, rgba(6,7,14,.8), rgba(6,7,14,0) 74%);
  z-index:-1; pointer-events:none;
}
body[data-tree] .arthero img,
body[data-tree] .arthero figure{
  border-radius:18px;
  border:1px solid var(--gold-line);
  box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 42px rgba(255,215,122,.08);
}
body[data-tree] .prose{
  background:linear-gradient(180deg, rgba(9,10,17,.74), rgba(9,10,17,.62));
  border:1px solid var(--gold-line);
  border-radius:22px;
  padding:clamp(22px,4vw,44px);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
body[data-tree] .prose h2, body[data-tree] .prose h3{ color:#F2E5C4; }
body[data-tree] .prose a{ color:var(--gold); }

/* the ground floor stays solid — footer anchors every journey */
body[data-tree] .footer{ background-color:rgba(4,5,10,.92); border-top:1px solid var(--gold-line); }

/* ==========================================================================
   THE SERVICE DECK — tile-by-tile 3D showcase (pinned on desktop,
   swipe-snap on mobile). Intensity lives here.
   ========================================================================== */
.scene-deck{ position:relative; z-index:1; height:560vh; }
.deck-pin{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; flex-direction:column;
}
.deck-head{ position:absolute; top:12vh; left:50%; transform:translateX(-50%); text-align:center; z-index:5; }
.deck-head .jh2{ margin-bottom:0; }

.deck-menu{
  position:absolute; left:5vw; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:14px; z-index:6;
}
.deck-menu a{
  font-family:'Space Grotesk',sans-serif; font-size:.82rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; text-decoration:none;
  color:#8d8468; padding-left:26px; position:relative; transition:color .3s;
}
.deck-menu a::before{
  content:''; position:absolute; left:0; top:50%; width:14px; height:1px;
  background:#5c543d; transition:width .3s, background .3s;
}
.deck-menu a.on{ color:var(--gold); }
.deck-menu a.on::before{ width:20px; background:var(--gold); box-shadow:0 0 8px var(--gold); }

.deck-stage{ position:absolute; inset:0; perspective:1400px; }
.tile{
  position:absolute; left:50%; top:56%;
  width:min(560px,42vw); aspect-ratio:16/10.5;
  transform:translate(-50%,-50%);
  border-radius:18px; overflow:hidden; display:block; text-decoration:none;
  background:#0B0A14;
  border:1px solid var(--gold-line);
  box-shadow:0 40px 90px rgba(0,0,0,.65);
  will-change:transform,opacity,filter;
  backface-visibility:hidden;
}
.tile figure{
  position:absolute; inset:0; margin:0;
  background-size:cover; background-position:center;
  filter:saturate(.9) brightness(.85);
}
.tile figure::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(7,8,16,0) 38%,rgba(7,8,16,.94) 82%),
             linear-gradient(120deg,rgba(255,215,122,.12),transparent 45%);
}
.tile-txt{ position:absolute; left:26px; right:26px; bottom:20px; z-index:2; }
.tile-txt i{
  font-style:normal; font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:.8rem; letter-spacing:.3em; color:var(--gold-deep);
  display:block; margin-bottom:6px;
}
.tile-txt b{
  display:block; font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:clamp(1.3rem,2.1vw,1.9rem); letter-spacing:.02em;
  text-transform:uppercase; color:var(--gold-soft); margin-bottom:6px;
}
.tile-txt span{ color:#B7AE93; font-size:.94rem; line-height:1.5; display:block; max-width:46ch; }
.tile.front{ border-color:var(--gold-line-strong); box-shadow:0 46px 110px rgba(0,0,0,.7), 0 0 60px rgba(255,215,122,.14); }
.tile.front figure{ filter:saturate(1) brightness(1); }

.deck-hint{
  position:absolute; bottom:4vh; left:50%; transform:translateX(-50%);
  font-size:.72rem; letter-spacing:.34em; text-transform:uppercase; color:#79704F;
}

/* the wheel on mobile: same scroll-turned cylinder, smaller drum.
   Page scroll turns it — no swiping. */
@media (max-width:900px){
  .scene-deck{ height:420vh; }
  .deck-head{ top:9vh; width:88vw; text-align:left; left:6vw; transform:none; }
  .deck-menu{ left:6vw; top:auto; bottom:7vh; transform:none;
    flex-direction:row; flex-wrap:wrap; gap:8px 14px; right:6vw; }
  .deck-stage{ perspective:900px; }
  .tile{ width:80vw; aspect-ratio:16/11.5; top:50%; }
  .deck-hint{ display:none; }
}

/* ---- the golden thread: REMAP the brand tokens to gold sitewide.
   Navy grounds stay (they are the night); every blue ACCENT becomes gold.
   One block, every component follows — that is what tokens are for. ---- */
body[data-tree]{
  /* surfaces: warm black replaces every navy ground — no blue left */
  --bg-0:#070810;
  --bg-1:#0D0C15;
  --bg-2:#14121D;
  --bg-3:#050508;
  --glass:rgba(255,235,190,.045);
  --glass-2:rgba(255,235,190,.07);
  --glass-3:rgba(255,235,190,.11);
  --on-brand:#241804;
  --brand:#FFD77A;
  --brand-deep:#C98A3E;
  --brand-soft:#FFE9B8;
  --cyan:#FFD77A;
  --cyan-soft:#FFE9B8;
  --grad-brand:linear-gradient(120deg,#C98A3E,#FFD77A 55%,#FFE9B8);
  --grad-brand-soft:linear-gradient(120deg,#E0A952,#FFE9B8);
  --grad-text:linear-gradient(92deg,#FFE9B8,#FFD77A 90%);
  --fill-soft:rgba(255,215,122,.10);
  --fill-cyan:rgba(255,215,122,.08);
  --sh-brand:0 12px 36px rgba(255,215,122,.26);
  --line:rgba(199,178,122,.16);
  --line-strong:rgba(199,178,122,.30);
}

/* ---- the golden thread: buttons & accents follow the tree sitewide ---- */
body[data-tree] .btn-primary{
  background:linear-gradient(120deg,#C98A3E,#FFD77A 58%,#FFE9B8);
  color:#241804; font-weight:700;
  box-shadow:0 10px 32px rgba(255,215,122,.22);
}
body[data-tree] .btn-primary:hover{ box-shadow:0 14px 40px rgba(255,215,122,.34); }
body[data-tree] .btn-ghost{
  border-color:var(--gold-line-strong); color:var(--gold-soft);
}
body[data-tree] .btn-ghost:hover{ border-color:var(--gold); background:rgba(255,215,122,.08); }
body[data-tree] .eyebrow{ color:var(--gold); }
body[data-tree] .ea-fab{
  background:rgba(20,16,8,.85); border:1px solid var(--gold-line-strong);
  color:var(--gold-soft); box-shadow:0 10px 30px rgba(255,215,122,.14);
}
body[data-tree] ::selection{ background:rgba(255,215,122,.32); color:#FFF6E3; }
/* CTA bands: a dark stage with a golden rim-light — never a gold flood.
   White text stays readable; ghost buttons stay visible. */
body[data-tree] .cta-band{
  background:
    radial-gradient(58% 130% at 50% 0%, rgba(255,215,122,.16), transparent 70%),
    linear-gradient(180deg,#0D0B14,#080711) !important;
  border-top:1px solid var(--gold-line);
  border-bottom:1px solid var(--gold-line);
}
body[data-tree] .cta-band h2{ color:#F5E9CB; }
body[data-tree] .cta-band p, body[data-tree] .cta-band span{ color:#BAB49E; }
body[data-tree] .cta-band a[href^="mailto:"]{ color:var(--gold); }
body[data-tree] .cta-band .btn-ghost{
  border-color:var(--gold-line-strong); color:var(--gold-soft); opacity:1;
}

/* nav CTA: slimmer, quieter */
body[data-tree] .nav .btn-primary{
  padding:9px 18px; font-size:.9rem; line-height:1.2;
}

/* anything that ends up ON a gold surface must speak in dark bronze */
body[data-tree] .btn-primary, body[data-tree] .btn-primary *{ color:#241804; }

/* gold edition wordmark */
body[data-tree] .lw1{ color:#F5E9CB !important; }
body[data-tree] .lw1 .thin{ color:var(--gold) !important; }
body[data-tree] .lw2{ color:#9d8d6b !important; }

/* ---- mobile ---- */
@media (max-width:900px){
  .jgrid,.jgrid-3{ grid-template-columns:1fr 1fr; }
  .jpanel{ padding:30px 24px; }
}
@media (max-width:600px){
  .jgrid,.jgrid-3{ grid-template-columns:1fr; }
  .scene{ min-height:auto; padding:16vh 0; }
}
@media (prefers-reduced-motion:reduce){
  .jcard{ transition:none; }
}