/* ==========================================================================
   DIRECTION 1: GOLDEN HOUR (client-selected, 2026-08-28)
   Palette: warm dark ground so the low sun does the lighting.
   Layout:  a poster. Display type overlaps the photograph the way a printed
            poster overlaps its image, and nothing sits in a neat box.
   Signature: pointer-reactive depth (CL-05). Three hero planes drift toward
            the cursor, foreground furthest, so the scene reads as a place
            you are standing in. Light rays turn behind it, slowly.
   ========================================================================== */
:root {
  /* 2026-08-28: darker green and more-orange gold pulled directly from the
     client's logo file (SC 2026-08-10 at 16.09.11.png), background lifted to
     make room for them. Card and soft panel tones lift by the same amount so
     they still read as raised above the page rather than blending into it. */
  --bg:#1E1A11; --ink:#F3EEE1; --muted:#a9a190;
  --primary:#587F44; --secondary:#D3872B; --accent:#D3872B;
  --support:#C97A3A; --soft:#282317; --card:#262116;
  --line:rgba(211,135,43,.18); --hero-ink:#F7F2E4;
  --display:'Poppins',system-ui,sans-serif; --body:'Source Sans 3',system-ui,sans-serif;
  --glow:rgba(211,135,43,.14); --glow-size:520px;
}
body { background:var(--bg); }

/* ---------- nav ---------- */
.nav { position:fixed; inset:0 0 auto 0; z-index:60; display:flex; align-items:center;
  justify-content:space-between; padding:15px var(--gutter); transition:background .45s, box-shadow .45s; }
.nav.solid { background:rgba(30,26,17,.88); box-shadow:0 1px 0 var(--line); }
.nav-brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--hero-ink);
  font-family:var(--display); font-weight:700; font-size:.95rem; }
.nav-brand svg, .nav-brand img { width:28px; --mk-arch:#E8A23D; --mk-f1:#9DB37A; --mk-f2:#F3EEE1; --mk-f3:#E8A23D; --mk-h1:#2b2a1d; --mk-h2:#C97A3A; --mk-h3:#9DB37A; }
.nav-links { display:flex; gap:26px; }
.nav-links a { text-decoration:none; font-size:.88rem; color:var(--ink); opacity:.66; }
.nav-links a:hover { opacity:1; color:var(--accent); }
@media (max-width:760px){ .nav-links{ display:none; } }

/* ---------- hero: the poster ---------- */
.poster { position:relative; min-height:100svh; overflow:hidden; display:flex; align-items:center; }
.plane { position:absolute; inset:0; will-change:transform;
  transition:transform .5s cubic-bezier(.2,.8,.3,1); }

/* rays turn behind everything, one composited rotation */
.rays { position:absolute; left:62%; top:38%; width:190vmax; height:190vmax; z-index:0;
  transform:translate3d(-50%,-50%,0); pointer-events:none; opacity:.16;
  background:conic-gradient(from 0deg,
    rgba(211,135,43,0) 0deg, rgba(211,135,43,.85) 8deg, rgba(211,135,43,0) 18deg,
    rgba(211,135,43,0) 42deg, rgba(211,135,43,.6) 50deg, rgba(211,135,43,0) 62deg,
    rgba(211,135,43,0) 96deg, rgba(211,135,43,.75) 104deg, rgba(211,135,43,0) 116deg,
    rgba(211,135,43,0) 160deg, rgba(211,135,43,.5) 168deg, rgba(211,135,43,0) 182deg,
    rgba(211,135,43,0) 230deg, rgba(211,135,43,.7) 240deg, rgba(211,135,43,0) 252deg,
    rgba(211,135,43,0) 300deg, rgba(211,135,43,.55) 310deg, rgba(211,135,43,0) 322deg,
    rgba(211,135,43,0) 360deg);
  animation:rays-turn 220s linear infinite;
  -webkit-mask-image:radial-gradient(closest-side, #000 6%, rgba(0,0,0,.6) 32%, transparent 66%);
          mask-image:radial-gradient(closest-side, #000 6%, rgba(0,0,0,.6) 32%, transparent 66%);
}
@keyframes rays-turn { to { transform:translate3d(-50%,-50%,0) rotate(360deg); } }

.plane-tree { z-index:2; display:flex; justify-content:flex-end; align-items:flex-end; }
.plane-tree img { width:min(56vw,760px); height:100%; object-fit:cover; object-position:52% 28%; }
.plane-tree::after { content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--bg) 4%, rgba(30,26,17,.86) 26%, rgba(30,26,17,.25) 52%, transparent 72%),
             linear-gradient(180deg, rgba(30,26,17,.8), transparent 26%, rgba(30,26,17,.92)); }
@media (max-width:820px){ .plane-tree img{ width:100%; } }

.poster-copy { position:relative; z-index:5; width:min(1200px,100% - var(--gutter)*2); margin:0 auto; padding:130px 0 90px; }
.poster-copy .name { font-size:.76rem; letter-spacing:.3em; text-transform:uppercase; color:var(--secondary); margin:0 0 20px; }
.poster-copy h1 { font-family:var(--display); font-weight:800; margin:0 0 6px;
  font-size:clamp(2.7rem,10.5vw,8rem); line-height:.86; letter-spacing:-.045em; color:var(--hero-ink); }
.poster-copy h1 span { display:block; }
.poster-copy h1 .a { color:var(--primary); }
.poster-copy h1 .t { color:var(--hero-ink); margin-left:.06em; }
.poster-copy h1 .n { color:var(--accent); margin-left:.12em; }
.poster-copy .lock { display:inline-block; margin:26px 0 22px; padding:.55em 1.4em; border-radius:999px;
  background:var(--primary); color:#12110C; font-family:var(--display); font-weight:700; font-size:clamp(.85rem,1.6vw,1rem); }
.poster-copy p { font-size:clamp(1rem,1.9vw,1.16rem); color:#ded8c9; max-width:50ch; }
.poster-actions { display:flex; gap:14px; flex-wrap:wrap; margin-top:12px; }
.poster-actions .btn { background:var(--accent); color:#12110C; }
.poster-actions .btn.ghost { color:var(--ink); border-color:rgba(243,238,225,.4); }

/* ---------- the band ---------- */
.band { position:relative; height:clamp(180px,26vh,300px); overflow:hidden; }
.band img { width:110%; max-width:none; height:100%; object-fit:cover; transform:translate3d(-4%,0,0);
  animation:band-pan 140s ease-in-out infinite alternate; }
@keyframes band-pan { from { transform:translate3d(-8%,0,0); } to { transform:translate3d(-1%,0,0); } }
.band::after { content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, var(--bg), rgba(30,26,17,.35) 40%, rgba(30,26,17,.4) 60%, var(--bg)); }

/* ---------- sections ---------- */
.slab { width:min(1200px,100% - var(--gutter)*2); margin:0 auto; padding:var(--rhythm) 0; }
.slab h2 { font-family:var(--display); font-weight:700; font-size:clamp(1.9rem,4.6vw,3.2rem);
  letter-spacing:-.025em; color:var(--hero-ink); max-width:18ch; }
.slab p { color:var(--muted); font-size:1.05rem; }
.duo { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(30px,6vw,80px); align-items:start; }
@media (max-width:880px){ .duo{ grid-template-columns:1fr; } }
.duo .lede { color:#e5dfd0; font-size:clamp(1.1rem,2.1vw,1.3rem); line-height:1.6; }
.tallies { display:grid; gap:2px; background:var(--line); border:1px solid var(--line); }
.tallies div { background:var(--card); padding:20px 24px; display:flex; align-items:baseline; gap:16px; }
.tallies b { font-family:var(--display); font-weight:700; font-size:2.2rem; line-height:1; color:var(--accent); min-width:2.6em; }
.tallies span { font-size:.86rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }

.stack { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; margin-top:42px; }
.block { position:relative; background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:0 0 30px; overflow:hidden; }
.block-top { position:relative; aspect-ratio:16/10; overflow:hidden; }
.block-top img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.02); transition:transform 1.1s cubic-bezier(.2,.8,.3,1); }
.block:hover .block-top img { transform:scale(1.08); }
.block-top::after { content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, var(--card) 100%); }
.block-body { padding:20px 28px 0; }
.block time { font-family:var(--body); font-weight:600; font-size:.73rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--secondary); }
.block h3 { font-family:var(--display); font-weight:700; font-size:1.3rem; color:var(--hero-ink); margin:.4em 0 .3em; letter-spacing:-.02em; }
.block p { font-size:.97rem; color:var(--muted); margin:0 0 .9em; }
.block .plate { font-size:.71rem; letter-spacing:.08em; text-transform:uppercase; color:#7e7767; }
.block a { font-size:.84rem; font-weight:600; color:var(--accent); text-decoration:none;
  border-bottom:1.5px solid rgba(211,135,43,.35); padding-bottom:2px; }
.block a:hover { border-color:var(--accent); }

/* ---------- partners as a slow marquee ---------- */
.marquee-band { border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:34px 0; overflow:hidden; margin-top:var(--rhythm); }
.marquee { display:flex; width:max-content; animation:marquee 74s linear infinite; animation-play-state:paused; }
.marquee-band.running .marquee { animation-play-state:running; }
@keyframes marquee { from { transform:translate3d(0,0,0); } to { transform:translate3d(-50%,0,0); } }
.marquee span { font-family:var(--display); font-weight:600; font-size:clamp(1.1rem,2.4vw,1.7rem);
  color:var(--muted); padding:0 30px; white-space:nowrap; letter-spacing:-.01em; transition:color .3s; }
.marquee span:hover { color:var(--accent); }
.marquee span::after { content:"\25CF"; color:var(--accent); opacity:.4; font-size:.4em; vertical-align:middle; margin-left:30px; }
.marquee-note { width:min(1200px,100% - var(--gutter)*2); margin:22px auto 0; font-size:.76rem;
  letter-spacing:.16em; text-transform:uppercase; color:#7e7767; }

/* ---------- footer ---------- */
.foot { padding:clamp(46px,7vw,74px) 0 34px; }
.foot-grid { width:min(1200px,100% - var(--gutter)*2); margin:0 auto; display:flex;
  justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; }
.foot-brand { display:flex; align-items:center; gap:14px; }
.foot-brand svg, .foot-brand img { width:50px; --mk-arch:#E8A23D; --mk-f1:#9DB37A; --mk-f2:#F3EEE1; --mk-f3:#E8A23D; --mk-h1:#2b2a1d; --mk-h2:#C97A3A; --mk-h3:#9DB37A; }
.foot-name { font-family:var(--display); font-weight:700; font-size:1.25rem; color:var(--hero-ink); }
.foot-line { font-size:.9rem; color:var(--muted); }

/* Live logo candidate. Fitted, never stretched, so each page shows one
   real recommendation at true proportion. */
.nav-brand img, .foot-brand img, img.mark, img.hero-mark, .foot-brandline img {
  object-fit:contain; height:auto; }

/* ---------- plain accessibility motion toggle (not review tooling) ---------- */
.motion-toggle { position:fixed; right:14px; bottom:14px; z-index:50; border:1px solid var(--line);
  background:var(--card); color:var(--muted); font-family:var(--body); font-size:.76rem;
  padding:.5em .9em; border-radius:999px; cursor:pointer; opacity:.75; }
.motion-toggle:hover, .motion-toggle:focus-visible { opacity:1; }