/*
 * Mirror Mindset Performance — the public website's shared look (Sep 2026).
 * Every page loads this plus /site/site.js (header + footer). Dark only.
 * Fonts: Archivo (display; its width axis gives the tall headline cut) and
 * Plus Jakarta Sans (body). Gold is the one accent.
 */
:root {
  --bg: #0a0b0f;
  --bg-2: #0f1116;
  --card: #13151b;
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.16);
  --gold: #f5c84b;
  --gold-2: #e7ae2f;
  --gold-ink: #17130a;
  --text: #f1eee8;
  --muted: #b3aea6;
  --dim: #85807a;
  --green: #6ee7b7;
  --radius: 14px;
  --wrap: 1140px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.6 "Plus Jakarta Sans", -apple-system, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
img { max-width: 100%; display: block; }
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 760px; }

/* Type */
.display, h1, h2 {
  font-family: "Archivo", sans-serif;
  font-stretch: 72%;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 0.95;
  text-transform: uppercase;
}
h1 { font-size: clamp(44px, 7.4vw, 86px); }
h2 { font-size: clamp(34px, 5vw, 56px); }
h3 { font: 800 20px/1.25 "Archivo", sans-serif; letter-spacing: -0.005em; }
.gold { color: var(--gold); }
.kicker {
  display: inline-block;
  font: 800 12px/1 "Archivo", sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.lead { font-size: clamp(17px, 2vw, 20px); line-height: 1.55; color: #ddd8cf; max-width: 560px; }
.sub { color: var(--muted); font-size: 16px; line-height: 1.65; max-width: 640px; }
.note { color: var(--dim); font-size: 13px; }
p + p { margin-top: 12px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 10px; border: 0;
  background: var(--gold); color: var(--gold-ink);
  font: 800 16px "Plus Jakarta Sans", sans-serif; cursor: pointer; text-decoration: none !important;
  box-shadow: 0 10px 30px rgba(245, 200, 75, 0.18);
  transition: transform 0.12s, background 0.12s;
}
.btn:hover { background: #ffd563; transform: translateY(-1px); }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: 10px;
  border: 1.5px solid var(--line-2); background: rgba(255, 255, 255, 0.02); color: var(--text);
  font: 700 16px "Plus Jakarta Sans", sans-serif; text-decoration: none !important; cursor: pointer;
}
.btn-ghost:hover { border-color: var(--gold); }
.btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 20px; border-radius: 8px;
  border: 1.5px solid var(--gold); color: var(--text);
  font: 700 15px "Plus Jakarta Sans", sans-serif; text-decoration: none !important;
}
.btn-outline:hover { background: rgba(245, 200, 75, 0.1); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Header */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 11, 15, 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap { display: flex; align-items: center; gap: 22px; min-height: 72px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none !important; }
.brand img { width: 44px; height: auto; }
.brand b { display: block; font: 900 19px/1 "Archivo", sans-serif; font-stretch: 85%; letter-spacing: 0.01em; }
.brand small { display: block; margin-top: 5px; color: var(--gold); font: 800 9.5px "Archivo", sans-serif; letter-spacing: 0.42em; }
.site-nav { display: flex; gap: 4px; margin-left: auto; }
.site-nav a { white-space: nowrap; padding: 10px 12px; border-radius: 8px; color: #dcd7cf; font-size: 14.5px; font-weight: 600; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--gold); text-decoration: none; }
.site-head .btn { min-height: 42px; padding: 0 18px; font-size: 14.5px; box-shadow: none; }
.menu-btn { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line-2); background: none; color: var(--text); cursor: pointer; }
.menu-btn svg { margin: auto; }
@media (max-width: 900px) {
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 72px; flex-direction: column; gap: 0; padding: 8px 20px 18px; background: #0c0d12; border-bottom: 1px solid var(--line); }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 14px 4px; font-size: 17px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .menu-btn { display: grid; }
  .site-head .btn { display: none; }
  .brand b { font-size: 17px; }
}

/* Sections */
.sec { padding: 88px 0; }
.sec-tight { padding: 56px 0; }
.sec-line { border-top: 1px solid var(--line); }
.center { text-align: center; }
.center .sub, .center .lead { margin-left: auto; margin-right: auto; }

/* Hero on a photo */
.hero { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero-bg { position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: center; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 11, 15, 0.96) 0%, rgba(10, 11, 15, 0.8) 38%, rgba(10, 11, 15, 0.2) 75%), linear-gradient(0deg, var(--bg) 0%, transparent 30%); }
.hero .wrap { padding-top: 90px; padding-bottom: 80px; }
.hero h1 { max-width: 760px; }
.hero .lead { margin-top: 22px; }
@media (max-width: 700px) {
  .hero-bg::after { background: linear-gradient(180deg, rgba(10, 11, 15, 0.55) 0%, rgba(10, 11, 15, 0.9) 55%, var(--bg) 100%); }
  .hero .wrap { padding-top: 64px; padding-bottom: 56px; }
}
.page-hero .wrap { padding-top: 72px; padding-bottom: 56px; }

/* Feature trio under a hero */
.trio { display: flex; flex-wrap: wrap; gap: 18px 34px; margin-top: 34px; }
.trio span { display: flex; align-items: center; gap: 12px; color: #d8d3ca; font-size: 14.5px; line-height: 1.3; max-width: 170px; }
.trio svg { flex: none; color: var(--gold); }

/* Cards */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.card-gold { border-color: rgba(245, 200, 75, 0.35); background: linear-gradient(160deg, rgba(245, 200, 75, 0.07), var(--card) 60%); }
.grid-2, .grid-3, .grid-4 { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
.card h3 + p, .card h3 + ul { margin-top: 10px; }
.card p { color: var(--muted); }

/* Checklist */
.checks { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; color: #e6e2da; }
.checks li::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--gold); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5c84b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/13px no-repeat; }

/* Photo role cards */
.role { position: relative; isolation: isolate; overflow: hidden; min-height: 380px; border-radius: var(--radius); border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: flex-end; padding: 26px; }
.role-bg { position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: center; transition: transform 0.4s; }
.role:hover .role-bg { transform: scale(1.03); }
/* Photo sits in the top of the card, words below it, so the subject (the
   ball, the stands, the whistle) isn't under the text. */
.role.role--top { min-height: 470px; }
.role--top .role-bg { background-size: 112% auto; background-repeat: no-repeat; background-color: #0f1013; }
.role--top .role-bg { background-color: #0f1013; }
.role--top .role-bg::after { background: linear-gradient(180deg, rgba(10, 11, 15, 0) 40%, rgba(10, 11, 15, 0.35) 55%, rgba(10, 11, 15, 0.6) 100%); }
.role-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 11, 15, 0.05) 20%, rgba(10, 11, 15, 0.92) 78%); }
.role h3 { font: 900 38px/1 "Archivo", sans-serif; font-stretch: 72%; text-transform: uppercase; }
.role p { color: #e2ddd4; margin: 10px 0 20px; font-size: 16px; }
.ai-tag { position: absolute; top: 12px; right: 12px; padding: 4px 9px; border-radius: 999px; background: rgba(0, 0, 0, 0.6); color: #d6d1c8; font-size: 11px; letter-spacing: 0.04em; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.stats > div { text-align: center; padding: 8px 16px; border-left: 1px solid var(--line); }
.stats > div:first-child { border-left: 0; }
.stats b { display: block; font: 900 clamp(40px, 5vw, 56px)/1 "Archivo", sans-serif; font-stretch: 78%; color: var(--gold); }
.stats b small { font-size: 0.55em; }
.stats span { display: block; margin-top: 10px; color: var(--muted); font-size: 13.5px; letter-spacing: 0.08em; text-transform: uppercase; }
@media (max-width: 700px) { .stats { grid-template-columns: 1fr 1fr; gap: 26px 0; } .stats > div:nth-child(3) { border-left: 0; } }

/* Quote */
.quote { font-size: clamp(19px, 2.2vw, 23px); line-height: 1.5; color: #f3efe8; }
.quote-by { margin-top: 18px; color: var(--muted); font-size: 15px; }
.quote-by b { color: var(--gold); font-weight: 700; }

/* Phones (real app screenshots) */
.phones { display: flex; gap: 18px; justify-content: center; align-items: flex-end; }
.phone { flex: 1; max-width: 250px; border-radius: 34px; padding: 9px; background: #1b1d23; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55); }
.phone img { border-radius: 26px; width: 100%; }
.phone:nth-child(2) { transform: translateY(-18px); }
@media (max-width: 640px) { .phones { gap: 10px; } .phone { border-radius: 22px; padding: 5px; } .phone img { border-radius: 18px; } }

/* CTA band */
.cta-band { position: relative; isolation: isolate; overflow: hidden; }
.cta-band .hero-bg::after { background: linear-gradient(90deg, rgba(10, 11, 15, 0.94), rgba(10, 11, 15, 0.7)); }
.cta-band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; padding-top: 54px; padding-bottom: 54px; }
.cta-band h2 { font-size: clamp(30px, 4vw, 44px); }

/* FAQ */
details { border-bottom: 1px solid var(--line); padding: 18px 0; }
summary { cursor: pointer; font: 700 17px/1.4 "Plus Jakarta Sans", sans-serif; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
summary::after { content: "+"; color: var(--gold); font-size: 22px; line-height: 1; }
details[open] summary::after { content: "–"; }
details p { margin-top: 12px; color: var(--muted); }

/* Forms */
.field { width: 100%; min-height: 52px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line-2); background: #0d0f14; color: #fff; font: 16px "Plus Jakarta Sans", sans-serif; outline: none; }
.field:focus { border-color: var(--gold); }
textarea.field { padding: 14px 16px; min-height: 120px; resize: vertical; }

/* Prose (legal, articles) */
.prose { max-width: 760px; }
.prose h2 { font-size: clamp(26px, 3.4vw, 34px); margin: 44px 0 14px; }
.prose h3 { margin: 28px 0 10px; }
.prose p, .prose li { color: #d9d4cb; }
.prose ul, .prose ol { padding-left: 22px; margin: 12px 0; }
.prose li + li { margin-top: 6px; }

/* Footer */
.site-foot { border-top: 1px solid var(--line); background: #08090c; padding: 56px 0 34px; margin-top: 0; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 30px; }
.foot-grid h4 { font: 800 12px "Archivo", sans-serif; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.foot-grid a { display: block; color: #cfcac1; font-size: 14.5px; padding: 4px 0; }
.foot-grid p { color: var(--dim); font-size: 14px; margin-top: 12px; max-width: 280px; }
.socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.socials a { padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(245, 200, 75, 0.35); color: var(--gold); font: 700 11.5px "Archivo", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; }
.socials a:hover { background: var(--gold); color: var(--gold-ink); text-decoration: none; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--dim); font-size: 13px; }
.foot-base .mag { font: 800 11px "Archivo", sans-serif; letter-spacing: 0.3em; color: #5d5a55; }
@media (max-width: 800px) { .foot-grid { grid-template-columns: 1fr 1fr; } }

/* Sticky mobile CTA */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(10, 11, 15, 0.94); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
.sticky-cta span { flex: 1; color: var(--muted); font-size: 13px; }
.sticky-cta .btn { min-height: 44px; padding: 0 20px; font-size: 14.5px; box-shadow: none; }
@media (min-width: 761px) { .sticky-cta { display: none !important; } }

/* Link lists (Start here, contact card) */
.links { display: flex; flex-direction: column; gap: 10px; }
.link { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--text); text-decoration: none !important; transition: border-color 0.12s, transform 0.12s; }
.link:hover { border-color: rgba(245, 200, 75, 0.5); transform: translateY(-1px); }
.link span { flex: 1; min-width: 0; }
.link b { display: block; font: 800 17px/1.3 "Archivo", sans-serif; }
.link small { display: block; margin-top: 3px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.link i { flex: none; font-style: normal; color: var(--gold); font-size: 20px; }
.link-lead { padding: 24px 22px; border-color: rgba(245, 200, 75, 0.45); background: linear-gradient(160deg, rgba(245, 200, 75, 0.1), var(--card) 65%); }
.link-lead b { font-size: clamp(22px, 3vw, 28px); line-height: 1.15; }
.list-h { font: 800 12px "Archivo", sans-serif; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin: 34px 0 12px; }
.safety { margin-top: 30px; padding: 18px 20px; border-radius: 12px; border: 1px solid var(--line); color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.safety b { color: var(--text); }

/* App landing (/get, /ios) */
.appcard .badges { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.appcard .badge { display: inline-block; }
.appcard .badge svg { width: 220px; height: auto; }
.appcard .hint { display: none; margin-top: 16px; padding: 14px; border-radius: 10px; background: rgba(245, 200, 75, 0.08); border: 1px solid rgba(245, 200, 75, 0.3); color: var(--text); font-size: 14px; line-height: 1.6; text-align: left; }
.appcard .selfserve { margin-top: 18px; color: var(--muted); font-size: 14px; }
.alt { margin-top: 18px; color: var(--muted); font-size: 14.5px; }

/* Form labels and messages */
.form label { display: flex; flex-direction: column; gap: 7px; color: #d6d1c8; font-size: 14px; font-weight: 600; }
.form select.field { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.formmsg { margin-top: 12px; font-size: 14.5px; }
.formmsg.ok { color: var(--green); }
.formmsg.err { color: #f0a39d; }

/* Request forms (sessions, lessons) */
.success { display: none; }
.success.show { display: block; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.price-tag { font: 900 44px/1 "Archivo", sans-serif; font-stretch: 78%; color: var(--gold); margin-top: 14px; }
.price-tag small { font: 500 15px "Plus Jakarta Sans", sans-serif; color: var(--muted); }
.steps-list { list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 18px; margin-top: 24px; }
.steps-list li { counter-increment: s; display: flex; gap: 16px; color: var(--muted); }
.steps-list li::before { content: counter(s); flex: none; font: 900 32px/1 "Archivo", sans-serif; font-stretch: 78%; color: var(--gold); width: 28px; }
.steps-list b { color: var(--text); }
.photo-credit { margin-top: 8px; color: var(--dim); font-size: 12px; }
.stats-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) { .stats-3 { grid-template-columns: 1fr; gap: 22px; } .stats-3 > div { border-left: 0; } }

/* "Say this instead" line under a parent card */
.say { margin-top: 14px; padding: 12px 14px; border-left: 3px solid var(--gold); background: rgba(245, 200, 75, .07); border-radius: 0 10px 10px 0; color: var(--text); font-size: 14.5px; line-height: 1.55; }
.say b { color: var(--gold); }

/* Car ride quiz */
.qbar { height: 4px; background: rgba(255, 255, 255, .08); border-radius: 99px; overflow: hidden; }
.qbar i { display: block; height: 100%; width: 0; background: var(--gold); border-radius: 99px; transition: width .25s ease; }
.qcount { margin-top: 14px; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.qtext { margin-top: 10px; font-family: "Archivo", sans-serif; font-weight: 800; font-size: clamp(22px, 3vw, 28px); line-height: 1.25; color: var(--text); }
.qopts { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.qopts .opt { text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; color: var(--text); font: inherit; font-size: 15.5px; line-height: 1.45; cursor: pointer; transition: border-color .15s, background .15s; }
.qopts .opt:hover, .qopts .opt:focus-visible { border-color: rgba(245, 200, 75, .6); background: rgba(245, 200, 75, .07); }
.qback { margin-top: 18px; background: none; border: 0; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; padding: 6px 0; }

/* Guide cover, drawn in CSS so it stays sharp */
.book { aspect-ratio: 3 / 4; max-width: 360px; margin: 0 auto; padding: 34px 30px; border-radius: 6px 16px 16px 6px; background: linear-gradient(160deg, #1b1d25, #0e0f14 70%); border: 1px solid rgba(245, 200, 75, .35); box-shadow: -10px 0 0 -4px #07080b, 0 30px 70px rgba(0, 0, 0, .6); display: flex; flex-direction: column; }
.book .bk { font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.book .bt { margin-top: 16px; font-family: "Archivo", sans-serif; font-stretch: 72%; font-weight: 900; text-transform: uppercase; font-size: 44px; line-height: .95; color: var(--text); }
.book .bs { margin-top: 16px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.book .brule { margin: auto 0 14px; height: 2px; width: 48px; background: var(--gold); }
.book .bby { font-size: 13px; color: var(--text); font-weight: 700; }
.book .bmag { margin-top: 4px; font-size: 10px; letter-spacing: .24em; color: var(--gold); font-weight: 800; text-transform: uppercase; }

/* ---- The ballpark behind the page (Sep 27 2026) ----
   The season page's look, site-wide: one real photo fixed behind the
   content, golden hour at the top of the page, dusk halfway, night with the
   field lights on at the bottom. site.js adds it to pages with a hero and
   turns on section reveals. Content sits on a dark wash, so every existing
   section stays readable. */
html.has-world { background: #05070f; }
html.has-world body { background: transparent; }
.site-world { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; background: #05070f; }
.site-world .photo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(var(--zoom, 1.04)); filter: var(--grade); will-change: transform, filter; }
.site-world .photo img { display: block; width: 100%; height: 100%; }
.site-world .photo.lamps { filter: none; }
.site-world .lamp { position: absolute; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; opacity: var(--lamp, 0);
  background: radial-gradient(circle, rgba(255,247,214,.95) 0%, rgba(255,231,163,.45) 18%, rgba(255,231,163,0) 60%); mix-blend-mode: screen; }
.site-world .tint { position: absolute; inset: 0; background: var(--tint, transparent); mix-blend-mode: soft-light; }
.site-world .stars { position: absolute; inset: 0 0 55% 0; opacity: var(--stars, 0);
  background-image: radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 42%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 44% 12%, #fff, transparent), radial-gradient(1px 1px at 63% 30%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 78% 8%, #fff, transparent), radial-gradient(1px 1px at 88% 36%, #fff, transparent),
    radial-gradient(1px 1px at 8% 50%, #fff, transparent), radial-gradient(1.5px 1.5px at 52% 55%, #fff, transparent); }
.site-world .wash { position: absolute; inset: 0; background: rgba(6, 7, 10, var(--wash, .62)); }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .site-world .photo { transform: translate(-50%, -50%); } }