/* ============================================================
   ZA WORKS — THE ART OF BECOMING  |  v3 / Light Edition
   style.css — Full light warm palette, proper 3D animations
============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,700;1,400;1,500&family=DM+Sans:wght@200;300;400;500;600&display=swap');

/* ─── RESET ─── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

/* ─── DESIGN TOKENS ─── */
:root {
  /* ── Light warm palette — no dark backgrounds ── */
  --cream:      #FAF8F3;
  --off-white:  #F7F4EE;
  --paper:      #F3EDE2;
  --blush:      #EFE5D6;
  --sand:       #E6DAC8;
  --border:     #DDD3C2;
  --border-lt:  #EAE3D8;

  --ink:        #2A1F16;   /* warm near-black */
  --ink-mid:    #5A4738;
  --ink-light:  #96816F;

  --gold:       #C4935A;
  --gold-lt:    #DFAF7A;
  --gold-dk:    #9A6E34;
  --terracotta: #C97858;

  --white: #FFFFFF;

  --font-disp: 'Playfair Display', Georgia, serif;
  --font-body: 'DM Sans', sans-serif;

  --shadow-sm:  0 4px 14px rgba(42,31,22,.06);
  --shadow-md:  0 18px 44px -12px rgba(42,31,22,.14);
  --shadow-lg:  0 44px 88px -20px rgba(42,31,22,.20);
  --ring-gold:  0 0 0 1px rgba(196,147,90,.22);

  --ease-out:  cubic-bezier(.22,1,.36,1);
  --ease-back: cubic-bezier(.34,1.56,.64,1);
}

html {
  scroll-behavior:smooth;
  overflow-x:hidden;
  /* Fixed nav clears section headings when using hash / in-page scroll */
  scroll-padding-top:clamp(72px, 12vw, 96px);
}

body {
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:300;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img { max-width:100%; display:block; }
::selection { background:var(--gold); color:var(--white); }

/* ─── KEYFRAMES (shared) ─── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes ldFade   { to { opacity:1; } }
@keyframes ldSlide  { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
@keyframes lineGrow { to { transform:scaleY(1); } }
@keyframes wordIn   { to { transform:translateY(0); } }
@keyframes orbDrift {
  0%,100% { transform:translate(0,0) scale(1); }
  33%     { transform:translate(36px,-24px) scale(1.06); }
  66%     { transform:translate(-22px,18px) scale(.95); }
}
@keyframes muralShine {
  0%,76%   { transform:translateX(-100%); }
  90%,100% { transform:translateX(280%); }
}
@keyframes heroPlanetBob {
  0%,100% { transform:translateY(0) rotate(0deg); }
  50%     { transform:translateY(-14px) rotate(3deg); }
}
@keyframes leafSway {
  0%,100% { transform:rotate(-2deg); }
  50%     { transform:rotate(4deg); }
}

/* ─── SCROLL PROGRESS ─── */
#progress-bar {
  position:fixed; top:0; left:0; height:2px; width:0;
  background:linear-gradient(to right, var(--gold-dk), var(--gold), var(--gold-lt));
  z-index:9997; transition:width .04s linear;
  box-shadow:0 0 10px rgba(196,147,90,.5);
}

/* ─── PAGE LOADER ─── */
#loader {
  position:fixed; inset:0;
  background:var(--cream);
  z-index:99999;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:22px;
  transition:opacity .8s ease;
}
.loader-logo {
  display:flex; align-items:center; justify-content:center;
  line-height:0;
}
.loader-logo img {
  width:min(88vw, 280px);
  height:auto;
  opacity:0;
  animation:ldFade .85s var(--ease-out) .12s forwards;
}

.loader-bar {
  width:120px; height:1px; background:var(--border);
  position:relative; overflow:hidden;
}
.loader-bar span {
  position:absolute; inset:0;
  background:linear-gradient(to right, transparent, var(--gold), transparent);
  transform:translateX(-100%);
  animation:ldSlide 1.4s ease .4s infinite;
}
.loader-sub {
  font-family:var(--font-disp); font-style:italic;
  font-size:.85rem; color:var(--ink-light); letter-spacing:.18em;
  opacity:0; animation:ldFade .8s ease .8s forwards;
}

/* ─── NAV (site header only — never matches footer/section <nav>) ─── */
.site-nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; justify-content:space-between; align-items:center;
  padding:22px 38px;
  transition:background .5s, padding .4s, border-color .5s, box-shadow .4s;
  border-bottom:1px solid transparent;
  background:transparent;
  width:100%;
  min-height:64px;
  pointer-events:auto;
}
.site-nav.scrolled {
  background:rgba(250,248,243,.92);
  backdrop-filter:blur(20px) saturate(1.15);
  -webkit-backdrop-filter:blur(20px) saturate(1.15);
  padding:12px 38px;
  border-color:var(--border-lt);
  box-shadow:0 4px 24px -10px rgba(42,31,22,.12);
}
.nav-logo {
  display:flex; align-items:center;
  line-height:0;
  text-decoration:none;
  flex-shrink:0;
}
/* Wide lockup: cap height + width so both lines stay legible next to nav links */
.nav-logo img {
  display:block;
  width:auto;
  height:auto;
  max-height:40px;
  max-width:min(220px, calc(100vw - 600px));
  object-fit:contain;
}
.site-nav.scrolled .nav-logo img {
  max-height:34px;
  max-width:min(200px, calc(100vw - 580px));
}
/* Desktop inline nav links */
.nav-links {
  display:flex;
  gap:clamp(14px, 1.8vw, 28px);
  list-style:none;
  align-items:center;
  margin:0;
  padding:0;
  flex-wrap:nowrap;
}
.nav-links a {
  display:inline-block;
  font-size:.66rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-mid);
  text-decoration:none;
  position:relative;
  padding:8px 4px;
  transition:color .3s ease;
}
.nav-links a::after {
  content:'';
  position:absolute;
  bottom:2px;
  left:4px;
  right:4px;
  height:1px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .35s var(--ease-out);
}
.nav-links a:hover { color:var(--ink); }
.nav-links a:hover::after { transform:scaleX(1); }
.nav-links a.nav-cta {
  border:1px solid var(--ink);
  padding:10px 22px;
  color:var(--ink);
  border-radius:2px;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.nav-links a.nav-cta::after { display:none; }
.nav-links a.nav-cta:hover {
  background:var(--ink);
  color:var(--white);
}

/* Burger button — hidden on desktop, visible on mobile (≤768px) */
.nav-burger {
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:6px;
  width:46px;
  height:46px;
  padding:10px 8px;
  margin:0;
  border:1px solid transparent;
  background:transparent;
  cursor:pointer;
  color:var(--ink);
  border-radius:12px;
  flex-shrink:0;
  position:relative;
  z-index:1002;
  transition:background .25s ease, border-color .25s ease;
}
.nav-burger:hover {
  background:rgba(42,31,22,.06);
  border-color:rgba(42,31,22,.10);
}
.nav-burger:focus-visible {
  outline:2px solid rgba(204,170,108,.55);
  outline-offset:2px;
}
.nav-burger span {
  display:block;
  width:24px;
  height:2px;
  background:var(--ink);
  border-radius:2px;
  transform-origin:center;
  transition:transform .3s var(--ease-out), opacity .2s ease;
}
body.nav-menu-open .nav-burger span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
body.nav-menu-open .nav-burger span:nth-child(2) { opacity:0; transform:scaleX(0); }
body.nav-menu-open .nav-burger span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }

/* Unified slide-out drawer (used by every viewport) */
.nav-drawer-root {
  position:fixed;
  inset:0;
  z-index:9000;
  pointer-events:none;
  visibility:hidden;
  transition:visibility 0s linear .4s;
}
.nav-drawer-root.is-open {
  pointer-events:auto;
  visibility:visible;
  transition:visibility 0s linear 0s;
}
.nav-drawer-scrim {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  padding:0;
  margin:0;
  cursor:pointer;
  background:rgba(42,31,22,.42);
  opacity:0;
  transition:opacity .4s var(--ease-out);
}
.nav-drawer-root.is-open .nav-drawer-scrim { opacity:1; }
.nav-drawer {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:min(380px, 92vw);
  background:var(--cream);
  border-left:1px solid var(--border-lt);
  box-shadow:-32px 0 60px -28px rgba(42,31,22,.28);
  display:flex;
  flex-direction:column;
  transform:translate3d(105%,0,0);
  -webkit-transform:translate3d(105%,0,0);
  transition:transform .42s cubic-bezier(.22,1,.36,1);
}
.nav-drawer-root.is-open .nav-drawer {
  transform:translate3d(0,0,0);
  -webkit-transform:translate3d(0,0,0);
}
.nav-drawer-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:24px 26px 20px;
  border-bottom:1px solid var(--border-lt);
}
.nav-drawer-title {
  margin:0;
  font-size:.62rem;
  letter-spacing:.36em;
  text-transform:uppercase;
  color:var(--gold-dk);
}
.nav-drawer-close {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid transparent;
  border-radius:12px;
  background:transparent;
  color:var(--ink);
  font-size:1.6rem;
  line-height:1;
  cursor:pointer;
  transition:background .25s ease, border-color .25s ease;
}
.nav-drawer-close:hover {
  background:rgba(42,31,22,.06);
  border-color:rgba(42,31,22,.10);
}
.nav-drawer-links {
  list-style:none;
  margin:0;
  padding:18px 18px 8px;
  display:flex;
  flex-direction:column;
  gap:2px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  flex:1 1 auto;
}
.nav-drawer-links a {
  display:flex;
  align-items:baseline;
  gap:18px;
  padding:14px 18px;
  border-radius:12px;
  text-decoration:none;
  color:var(--ink-mid);
  font-family:var(--font-disp);
  transition:background .25s ease, color .25s ease, transform .25s ease;
}
.nav-drawer-links a:hover,
.nav-drawer-links a:focus-visible {
  color:var(--ink);
  background:rgba(204,170,108,.10);
  transform:translateX(2px);
  outline:none;
}
.nav-drawer-num {
  font-size:.62rem;
  letter-spacing:.24em;
  color:var(--gold-dk);
  font-family:var(--font-body);
  min-width:1.6rem;
}
.nav-drawer-name {
  font-size:1.35rem;
  letter-spacing:-.005em;
  font-style:italic;
}
.nav-drawer-cta {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:14px 26px 18px;
  padding:14px 22px;
  border:1px solid var(--ink);
  border-radius:999px;
  background:var(--ink);
  color:var(--white);
  font-size:.66rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  text-decoration:none;
  transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.nav-drawer-cta:hover {
  background:var(--gold-dk);
  border-color:var(--gold-dk);
  color:var(--white);
  transform:translateY(-1px);
}
.nav-drawer-note {
  margin:0;
  padding:0 26px 24px;
  font-size:.58rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--ink-light);
}
body.nav-menu-open { overflow:hidden; }

/* ─── SECTION SHARED ─── */
section { position:relative; overflow:hidden; }

.section-label {
  font-size:.6rem; letter-spacing:.45em; text-transform:uppercase;
  color:var(--gold-dk); display:flex; align-items:center; gap:14px; margin-bottom:22px;
}
.section-label::before {
  content:''; display:block; width:36px; height:1px;
  background:linear-gradient(to right, var(--gold), rgba(196,147,90,.22));
}
.section-heading {
  font-family:var(--font-disp);
  font-size:clamp(2.4rem,5vw,5rem); font-weight:400;
  line-height:1.08; letter-spacing:-.015em; color:var(--ink);
}
.section-heading em { font-style:italic; color:var(--gold); }
.section-body { font-size:.88rem; line-height:2; color:var(--ink-mid); max-width:500px; }

.gold-rule {
  width:1px; height:56px;
  background:linear-gradient(to bottom, var(--gold), transparent);
  margin:28px 0;
}

/* ─── REVEAL ─── */
.reveal {
  opacity:0; transform:translateY(34px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.reveal.in { opacity:1; transform:translateY(0); }
.d1{transition-delay:.12s} .d2{transition-delay:.24s}
.d3{transition-delay:.36s} .d4{transition-delay:.48s}
.d5{transition-delay:.6s}

/* ─── BUTTONS ─── */
.btn-dark, .btn-outline, .btn-gold, .btn-warm {
  --btn-pad-x: 38px;
  position:relative; display:inline-flex; align-items:center; gap:14px;
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  padding:16px var(--btn-pad-x); text-decoration:none; cursor:pointer;
  overflow:hidden; transition:color .4s, transform .35s var(--ease-out);
  will-change:transform;
}
.btn-arrow {
  font-style:normal; font-size:.9rem; line-height:1; display:inline-block;
  transition:transform .4s var(--ease-out);
}
.btn-dark {
  background:var(--ink); color:var(--white); border:1px solid var(--ink);
}
.btn-dark::before {
  content:''; position:absolute; inset:0; background:var(--gold);
  transform:translateX(-101%); transition:transform .45s var(--ease-out);
}
.btn-dark:hover { color:var(--ink); }
.btn-dark:hover::before { transform:translateX(0); }
.btn-dark:hover .btn-arrow { transform:translateX(6px); }
.btn-dark > span, .btn-dark > .btn-arrow { position:relative; z-index:1; }

.btn-outline {
  border:1px solid var(--ink); color:var(--ink); background:transparent;
  transition:background .35s, color .35s, border-color .35s;
}
.btn-outline:hover { background:var(--ink); color:var(--white); }

.btn-gold {
  background:var(--gold); color:var(--white); border:1px solid var(--gold);
  box-shadow:0 14px 30px -8px rgba(196,147,90,.42);
}
.btn-gold::before {
  content:''; position:absolute; inset:0; background:var(--gold-dk);
  transform:translateX(-101%); transition:transform .45s var(--ease-out);
}
.btn-gold:hover::before  { transform:translateX(0); }
.btn-gold:hover .btn-arrow { transform:translateX(6px); }
.btn-gold > span, .btn-gold > .btn-arrow { position:relative; z-index:1; }

.btn-warm {
  border:1px solid var(--border); color:var(--ink-mid); background:var(--paper);
  transition:background .35s, color .35s, border-color .35s;
}
.btn-warm:hover { border-color:var(--gold); color:var(--gold-dk); background:var(--blush); }

/* ═══════════════════════════════════════════
   SECTION 1 — HERO  (v4 — Premium Collage)
═══════════════════════════════════════════ */
@keyframes hcRise   { from { opacity:0; transform:translateY(34px) scale(.96); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes hcDrift  { 0%,100% { transform:translate(0,0) rotate(0deg); } 50% { transform:translate(0,-14px) rotate(.6deg); } }
@keyframes hcDriftAlt { 0%,100% { transform:translate(0,0) rotate(0deg); } 50% { transform:translate(-12px,10px) rotate(-1deg); } }
@keyframes hcChime  { 0%,100% { transform:rotate(-2.5deg); } 50% { transform:rotate(2.5deg); } }
@keyframes hcSpin   { to { transform:rotate(360deg); } }
@keyframes hcSpinRev{ to { transform:rotate(-360deg); } }
@keyframes hcPulse  { 0%,100% { transform:scale(1); opacity:.85; } 50% { transform:scale(1.4); opacity:.35; } }
@keyframes hcShine  { 0%,72% { transform:translateX(-120%) skewX(-12deg); } 90%,100% { transform:translateX(260%) skewX(-12deg); } }
@keyframes hcCueDot { 0% { transform:translateY(-100%); } 60%,100% { transform:translateY(220%); } }
@keyframes hcFloatA { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
@keyframes hcFloatB { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-14px); } }
@keyframes hcFloatC { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
@keyframes hcDash   { to { stroke-dashoffset:0; } }
@keyframes hcSparkle{ 0%,100% { opacity:0; transform:scale(.4) rotate(0deg); } 50% { opacity:1; transform:scale(1) rotate(180deg); } }
@keyframes hcArrowSlide { 0%,100% { transform:translateX(0); } 50% { transform:translateX(6px); } }

#hero {
  min-height:100svh;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  grid-template-rows:1fr;
  align-items:center;
  padding:clamp(110px,12vw,150px) clamp(40px,5vw,72px) clamp(80px,10vw,130px);
  gap:0 clamp(40px,5vw,80px);
  background:
    radial-gradient(ellipse 90% 70% at 90% 0%, rgba(239,229,214,.85), transparent 60%),
    radial-gradient(ellipse 70% 60% at 5% 100%, rgba(196,147,90,.10), transparent 65%),
    linear-gradient(162deg, var(--paper) 0%, var(--cream) 44%, var(--blush) 100%);
  position:relative; isolation:isolate; overflow:hidden;
}
.hero-grain {
  position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.45; mix-blend-mode:multiply;
  background-image:
    radial-gradient(circle at 25% 30%, rgba(196,147,90,.05) 0, transparent 1.5px),
    radial-gradient(circle at 75% 60%, rgba(42,31,22,.04) 0, transparent 1.5px),
    radial-gradient(circle at 40% 80%, rgba(196,147,90,.03) 0, transparent 1px);
  background-size: 6px 6px, 8px 8px, 5px 5px;
}
.hero-atmosphere { position:absolute; inset:0; pointer-events:none; z-index:0; }
.hero-orb { position:absolute; border-radius:50%; filter:blur(6px); }
.hero-orb-1 {
  width:560px; height:560px; top:-120px; right:-80px;
  background:radial-gradient(circle, rgba(196,147,90,.18) 0%, rgba(239,210,170,.08) 40%, transparent 70%);
  animation:orbDrift 22s ease-in-out infinite;
}
.hero-orb-2 {
  width:320px; height:320px; bottom:-60px; left:6%;
  background:radial-gradient(circle, rgba(201,120,88,.14) 0%, transparent 65%);
  animation:orbDrift 28s ease-in-out -8s infinite reverse;
}
.hero-orb-3 {
  width:220px; height:220px; top:32%; left:42%;
  background:radial-gradient(circle, rgba(138,154,136,.12) 0%, transparent 65%);
  animation:orbDrift 18s ease-in-out -4s infinite;
}

/* ── COL 1: TEXT CONTENT ── */
.hero-content {
  grid-column:1; grid-row:1;
  position:relative; z-index:2;
  display:flex; flex-direction:column; justify-content:center;
  padding-right:clamp(0px,1vw,16px);
}
.hero-eyebrow {
  font-size:.62rem; letter-spacing:.48em; text-transform:uppercase;
  color:var(--gold-dk); margin-bottom:30px;
  display:inline-flex; align-items:center; gap:12px;
  padding:8px 18px 8px 12px;
  background:rgba(255,255,255,.7);
  border:1px solid var(--border-lt);
  border-radius:999px;
  box-shadow:0 6px 18px -10px rgba(42,31,22,.14);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  width:fit-content;
  opacity:0; animation:fadeUp 1s ease .4s forwards;
}
.hero-eyebrow-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 4px rgba(196,147,90,.18);
  animation:hcPulse 2.6s ease-in-out infinite;
}
.hero-title {
  font-family:var(--font-disp);
  font-size:clamp(3rem,6.2vw,7rem); font-weight:400;
  line-height:.98; letter-spacing:-.02em; color:var(--ink); margin-bottom:30px;
}
.hero-word { display:inline-block; overflow:hidden; vertical-align:bottom; line-height:.98; margin-right:.22em; }
.hero-word > span {
  display:inline-block; transform:translateY(110%);
  animation:wordIn .9s var(--ease-out) forwards;
}
.hero-word:nth-of-type(1) > span { animation-delay:.55s; }
.hero-word:nth-of-type(2) > span { animation-delay:.68s; }
.hero-word:nth-of-type(3) > span { animation-delay:.80s; }
.hero-word.hero-word-em > span   { animation-delay:.94s; }
.hero-word em { font-style:italic; color:var(--gold); }

.hero-sub {
  font-size:.95rem; line-height:1.95; color:var(--ink-mid); max-width:460px; margin-bottom:0;
  opacity:0; animation:fadeUp 1s ease 1.15s forwards;
}
.hero-contact-cta {
  /* Shrink to label width (column flex defaults to stretch) */
  align-self:flex-start;
  width:fit-content;
  max-width:100%;
  box-sizing:border-box;
  margin-top:clamp(28px, 3.6vw, 44px);
  padding:clamp(16px, 2vw, 20px) clamp(36px, 4.5vw, 48px);
  justify-content:center;
  text-align:center;
  line-height:1.25;
  opacity:0;
  animation:fadeUp 1s ease 1.32s forwards;
}
.hero-contact-cta:focus-visible {
  outline:2px solid rgba(204,170,108,.55);
  outline-offset:3px;
}

/* ═══════════════════════════════════════════
   HERO RIGHT — Open Sensory Composition
   A free-floating collage of natural elements
   (palm, leaves, clouds, windchime, planets)
   surrounding a soft circular wash. No frame,
   no slideshow, no captions — just movement.
═══════════════════════════════════════════ */

.hero-stage {
  grid-column:2; grid-row:1;
  position:relative; z-index:1;
  height:clamp(520px, 72vh, 680px);
  padding:clamp(10px,1.4vw,18px) clamp(28px,3vw,40px) clamp(56px,6vw,72px) clamp(28px,3vw,40px);
  perspective:1500px; perspective-origin:50% 50%;
  transform-style:preserve-3d;
  will-change:transform;
}

/* Legacy backdrop layers — hidden */
.hero-stage-glow,
.hero-stage-ring,
.hero-stage-grid,
.hero-halo,
.hero-aurora,
.hero-rim,
.hero-art { display:none !important; }

/* ── Keyframes ── */
@keyframes hxDecoEnter {
  from { opacity:0; transform:translate3d(0, 24px, 0) scale(.78); }
  to   { opacity:1; transform:translate3d(0, 0, 0)  scale(1); }
}
/* Palm enter — preserves the -50% horizontal centre translate */
@keyframes hxPalmEnter {
  from { opacity:0; translate:-50% 24px; }
  to   { opacity:1; translate:-50% 0; }
}

/* Orbit-style float keyframes — smoother, elliptical, longer durations.
   Each combines gentle translate, rotation, and subtle scale so planets
   feel like they're drifting in a celestial orbit. */
@keyframes hxOrbitA {
  0%, 100% { transform:translate3d(0, 0, 0)            rotate(0deg)  scale(1); }
  25%      { transform:translate3d(-12px, -16px, 0)    rotate(4deg)  scale(1.03); }
  50%      { transform:translate3d(8px, -22px, 0)      rotate(-3deg) scale(1.01); }
  75%      { transform:translate3d(14px, -8px, 0)      rotate(5deg)  scale(.98); }
}
@keyframes hxOrbitB {
  0%, 100% { transform:translate3d(0, 0, 0)            rotate(0deg)  scale(1); }
  30%      { transform:translate3d(14px, 12px, 0)      rotate(-4deg) scale(1.04); }
  60%      { transform:translate3d(-6px, 18px, 0)      rotate(3deg)  scale(.98); }
}
@keyframes hxOrbitC {
  0%, 100% { transform:translate3d(0, 0, 0)            rotate(-2deg) scale(1); }
  35%      { transform:translate3d(-10px, -12px, 0)    rotate(4deg)  scale(1.05); }
  70%      { transform:translate3d(6px, -16px, 0)      rotate(-3deg) scale(.98); }
}
@keyframes hxOrbitD {
  0%, 100% { transform:translate3d(0, 0, 0)            rotate(2deg)  scale(1); }
  40%      { transform:translate3d(12px, 10px, 0)      rotate(-4deg) scale(1.04); }
  75%      { transform:translate3d(-8px, 14px, 0)      rotate(3deg)  scale(.97); }
}
@keyframes hxOrbitE {
  0%, 100% { transform:translate3d(0, 0, 0)            rotate(0deg)  scale(1); }
  45%      { transform:translate3d(-14px, -10px, 0)    rotate(-5deg) scale(1.04); }
}
@keyframes hxOrbitF {
  0%, 100% { transform:translate3d(0, 0, 0)            rotate(-3deg) scale(1); }
  50%      { transform:translate3d(12px, -14px, 0)     rotate(5deg)  scale(1.05); }
}
/* Architecture (centered) — rises with soft settle, preserves -50% X translate */
@keyframes hxArchRiseCenter {
  0%   { opacity:0; translate:-50% 36px; transform:scale(.92); filter:blur(8px); }
  60%  { opacity:1; translate:-50% -4px; transform:scale(1.01); filter:blur(0); }
  100% { opacity:1; translate:-50% 0;    transform:scale(1);    filter:blur(0); }
}
/* Architecture (centered) — gentle breathing once seated */
@keyframes hxArchBreatheCenter {
  0%, 100% { transform:scale(1)     rotate(0deg); }
  50%      { transform:scale(1.018) rotate(.4deg); }
}
@keyframes hxSwayLeaf {
  0%, 100% { transform:rotate(-4deg) translateY(0); }
  50%      { transform:rotate(4deg)  translateY(-6px); }
}
@keyframes hxSwayChime {
  0%, 100% { transform:rotate(-3deg); }
  50%      { transform:rotate(3deg); }
}
@keyframes hxSwayPalm {
  0%, 100% { transform:rotate(-1.5deg) translateY(0); }
  50%      { transform:rotate(2deg)    translateY(-4px); }
}
@keyframes hxDriftCloud {
  0%, 100% { transform:translate3d(0, 0, 0); }
  50%      { transform:translate3d(14px, -8px, 0); }
}
@keyframes hxDriftCloudFar {
  0%, 100% { transform:translate3d(0, 0, 0) scale(1); }
  50%      { transform:translate3d(-18px, 6px, 0) scale(1.03); }
}
@keyframes hxOrbitSpin {
  from { transform:translate(-50%, -50%) rotate(0deg); }
  to   { transform:translate(-50%, -50%) rotate(360deg); }
}
@keyframes hxOrbitFade {
  from { opacity:0; }
  to   { opacity:.32; }
}
@keyframes hxWashPulse {
  0%, 100% { transform:translate(-50%, -50%) scale(1);    opacity:.55; }
  50%      { transform:translate(-50%, -50%) scale(1.05); opacity:.75; }
}
@keyframes hxSparkle {
  0%, 100% { transform:scale(.6); opacity:0; }
  35%      { transform:scale(1);   opacity:.95; }
  65%      { transform:scale(1.15); opacity:.65; }
}

/* ── Soft circular wash behind the composition ── */
.hero-wash {
  position:absolute;
  top:50%; left:54%;
  width:min(78%, 520px);
  aspect-ratio:1/1;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(239,210,170,.55) 0%,
      rgba(196,147,90,.18) 38%,
      transparent 70%);
  filter:blur(34px);
  mix-blend-mode:multiply;
  transform:translate(-50%, -50%);
  pointer-events:none;
  z-index:0;
  animation:hxWashPulse 10s ease-in-out 1s infinite;
}

/* ── Decorative artwork base ── */
.hero-deco {
  position:absolute;
  pointer-events:none;
  user-select:none;
  z-index:2;
  opacity:0;
  will-change:transform;
  filter:drop-shadow(0 14px 22px rgba(42,31,22,.16)) saturate(1.04);
}

/* Palm tree — SIDE accent at far left, clear of the architecture */
.hero-deco-palm {
  width:clamp(120px, 14vw, 180px);
  bottom:-2%;
  left:-2%;
  transform-origin:60% 100%;
  z-index:7;
  filter:drop-shadow(0 22px 30px rgba(42,31,22,.22)) saturate(1.06);
  animation:
    hxDecoEnter 1.3s var(--ease-out) .45s forwards,
    hxSwayPalm 14s ease-in-out 2.6s infinite;
}

/* Leaves — far upper-right, sways like wind */
.hero-deco-leaves {
  width:clamp(110px, 13vw, 160px);
  top:-6%;
  right:-4%;
  transform-origin:80% 20%;
  z-index:7;
  filter:drop-shadow(0 18px 26px rgba(42,31,22,.20)) saturate(1.08) hue-rotate(-4deg);
  animation:
    hxDecoEnter 1.1s var(--ease-out) .7s forwards,
    hxSwayLeaf 8s ease-in-out 2s infinite;
}

/* Cloud — near top-left, drifts laterally */
.hero-deco-cloud {
  width:clamp(110px, 13vw, 160px);
  top:18%;
  left:-4%;
  z-index:6;
  filter:drop-shadow(0 12px 20px rgba(42,31,22,.10));
  animation:
    hxDecoEnter 1.1s var(--ease-out) .9s forwards,
    hxDriftCloud 18s ease-in-out 3s infinite;
}

/* Cloud (smaller, far) — top right, slower drift */
.hero-deco-cloud-2 {
  width:clamp(70px, 8vw, 100px);
  top:6%;
  right:42%;
  z-index:2;
  opacity:0;
  filter:drop-shadow(0 10px 16px rgba(42,31,22,.08)) brightness(1.05);
  animation:
    hxDecoEnter 1.2s var(--ease-out) 1.1s forwards,
    hxDriftCloudFar 22s ease-in-out 3.4s infinite;
}

/* Windchime — top-right, dangles with a sway */
.hero-deco-windchime {
  width:clamp(80px, 9vw, 120px);
  top:-2%;
  right:24%;
  transform-origin:50% 0%;
  z-index:7;
  animation:
    hxDecoEnter 1.1s var(--ease-out) 1.05s forwards,
    hxSwayChime 5.5s ease-in-out 2.4s infinite;
}

/* Architecture motif — CENTRE focal point, large hero piece.
   Shifted slightly right of centre so the palm sits clear on the left. */
.hero-deco-arch {
  width:clamp(300px, 38vw, 480px);
  bottom:8%;
  left:56%;
  translate:-50% 0;
  transform-origin:50% 100%;
  z-index:5;
  opacity:0;
  filter:drop-shadow(0 30px 38px rgba(42,31,22,.24)) saturate(1.06) contrast(1.02);
  animation:
    hxArchRiseCenter 1.6s var(--ease-out) .35s forwards,
    hxArchBreatheCenter 12s ease-in-out 2.6s infinite;
}
/* Warm halo behind the arch — late-afternoon light catching the structure */
.hero-deco-arch::before {
  content:'';
  position:absolute;
  inset:-10% -14% -6% -14%;
  background:radial-gradient(58% 60% at 50% 60%,
    rgba(239,210,170,.55) 0%,
    rgba(196,147,90,.22) 42%,
    transparent 78%);
  filter:blur(22px);
  pointer-events:none;
  z-index:-1;
}

/* ── Six planets orbiting the central tree — bigger, smoother motion ──
   LEFT SIDE: planets 2, 4, 6      RIGHT SIDE: planets 1, 3, 5         */

/* Planet 1 — large, bottom-right corner (below arch baseline) */
.hero-deco-planet-1 {
  width:clamp(86px, 10vw, 130px);
  bottom:0%;
  right:-1%;
  z-index:6;
  filter:drop-shadow(0 22px 32px rgba(42,31,22,.22)) saturate(1.06);
  animation:
    hxDecoEnter 1.3s var(--ease-out) .85s forwards,
    hxOrbitA 22s ease-in-out 3s infinite;
}
/* Planet 2 — medium, far top-right corner (above arch) */
.hero-deco-planet-2 {
  width:clamp(60px, 7vw, 88px);
  top:6%;
  right:1%;
  z-index:6;
  filter:drop-shadow(0 18px 26px rgba(42,31,22,.20)) saturate(1.04);
  animation:
    hxDecoEnter 1.3s var(--ease-out) 1.0s forwards,
    hxOrbitB 24s ease-in-out 3.2s infinite;
}
/* Planet 3 — small, far top-left corner (clear of arch top) */
.hero-deco-planet-3 {
  width:clamp(40px, 4.6vw, 58px);
  top:8%;
  left:24%;
  z-index:6;
  filter:drop-shadow(0 12px 18px rgba(42,31,22,.20)) saturate(1.1);
  animation:
    hxDecoEnter 1.3s var(--ease-out) 1.15s forwards,
    hxOrbitC 18s ease-in-out 3.4s infinite;
}
/* Planet 4 — small, lower-left between palm and arch */
.hero-deco-planet-4 {
  width:clamp(40px, 4.6vw, 58px);
  bottom:14%;
  left:18%;
  z-index:6;
  filter:drop-shadow(0 12px 18px rgba(42,31,22,.18)) saturate(1.08);
  animation:
    hxDecoEnter 1.3s var(--ease-out) 1.3s forwards,
    hxOrbitD 20s ease-in-out 3.6s infinite;
}
/* Planet 5 — medium, far right edge mid-height */
.hero-deco-planet-5 {
  width:clamp(50px, 5.6vw, 72px);
  top:50%;
  right:-1%;
  z-index:6;
  filter:drop-shadow(0 14px 22px rgba(42,31,22,.20)) saturate(1.06);
  animation:
    hxDecoEnter 1.3s var(--ease-out) 1.45s forwards,
    hxOrbitE 26s ease-in-out 3.8s infinite;
}
/* Planet 6 — small accent, upper-left near cloud */
.hero-deco-planet-6 {
  width:clamp(36px, 4vw, 52px);
  top:30%;
  left:12%;
  z-index:6;
  filter:drop-shadow(0 10px 16px rgba(42,31,22,.18)) saturate(1.1);
  animation:
    hxDecoEnter 1.3s var(--ease-out) 1.6s forwards,
    hxOrbitF 19s ease-in-out 4s infinite;
}

/* Dashed orbit ring — slow celestial trace */
.hero-deco-orbit {
  position:absolute;
  top:50%; left:54%;
  width:min(78%, 480px);
  aspect-ratio:1/1;
  border:1px dashed rgba(196,147,90,.28);
  border-radius:50%;
  pointer-events:none;
  z-index:1;
  opacity:0;
  transform:translate(-50%, -50%);
  animation:
    hxOrbitFade 1.4s ease 1.5s forwards,
    hxOrbitSpin 100s linear 1.5s infinite;
}

/* Tiny sparkle dots — gold dust scattered around the scene */
.hero-spark {
  position:absolute;
  width:6px; height:6px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #fff8ec, var(--gold));
  box-shadow:0 0 0 4px rgba(196,147,90,.14), 0 4px 10px -3px rgba(42,31,22,.18);
  pointer-events:none;
  z-index:5;
  opacity:0;
  animation:hxSparkle 4.4s ease-in-out infinite;
}
.hero-spark-1 { top:30%;  left:34%; animation-delay:2.2s; }
.hero-spark-2 { top:66%;  left:46%; animation-delay:3.0s; width:5px; height:5px; }
.hero-spark-3 { top:18%;  right:36%; animation-delay:3.6s; width:7px; height:7px; }
.hero-spark-4 { bottom:24%; right:22%; animation-delay:4.4s; width:5px; height:5px; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .hero-wash,
  .hero-deco,
  .hero-deco-orbit,
  .hero-spark {
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
  .hero-wash       { transform:translate(-50%, -50%) !important; opacity:.55 !important; }
  .hero-deco-orbit { transform:translate(-50%, -50%) !important; opacity:.25 !important; }
  .hero-spark      { opacity:.5 !important; }
}

/* ═══════════════════════════════════════════
   SECTION 2 — LANDSCAPE
═══════════════════════════════════════════ */
#landscape {
  background:var(--paper);
  border-top:1px solid var(--border-lt); border-bottom:1px solid var(--border-lt);
}
.landscape-header {
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:60px; padding:clamp(80px,9vw,128px) 60px clamp(40px,5vw,60px);
}
.landscape-header .landscape-intro {
  flex:0 0 400px;
  max-width:400px;
  min-width:0;
}
.wall-strip {
  overflow:hidden; cursor:grab; position:relative;
  border-top:1px solid var(--border-lt); border-bottom:1px solid var(--border-lt);
  background:var(--sand);
  touch-action:pan-x;
  overscroll-behavior-x:contain;
  user-select:none;
  -webkit-user-select:none;
}
.wall-strip:active { cursor:grabbing; }
.wall-pan {
  display:inline-block;
  vertical-align:top;
  will-change:transform;
}
.wall-track {
  display:flex;
  width:max-content;
}
.wall-track img { height:340px; width:auto; display:block; opacity:.9; pointer-events:none; -webkit-user-drag:none; user-drag:none; }

.stats-row { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); border-top:1px solid var(--border-lt); }
.stat-block {
  padding:clamp(36px, 4vw, 50px) clamp(20px, 2.2vw, 36px);
  border-right:1px solid var(--border-lt);
  position:relative; overflow:hidden; cursor:pointer;
  transition:background .4s var(--ease-out);
  text-align:center;
}
.stat-block:last-child { border-right:none; }
.stat-block::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(196,147,90,.07), transparent);
  opacity:0; transition:opacity .4s;
}
.stat-block:hover { background:var(--blush); }
.stat-block:hover::before { opacity:1; }
.stat-deco {
  position:absolute; top:28px; right:28px;
  font-family:var(--font-disp); font-style:italic;
  font-size:.62rem; color:var(--gold); letter-spacing:.1em;
}
.stat-num {
  font-family:var(--font-disp);
  font-size:clamp(1.5rem, 2.4vw, 2.35rem);
  line-height:1.08;
  color:var(--ink);
  margin-bottom:10px;
  text-wrap:balance;
}
.stat-label {
  font-size:.58rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-light);
  line-height:1.55;
  text-wrap:balance;
}

/* ═══════════════════════════════════════════
   SECTION 2.5 — THE THREE JOURNEYS (editorial flow)
═══════════════════════════════════════════ */
#journeys {
  position:relative;
  padding:clamp(72px,9vw,128px) clamp(28px,6vw,72px) clamp(80px,10vw,140px);
  background:
    radial-gradient(1200px 700px at 12% 0%, rgba(204,170,108,.10), transparent 62%),
    radial-gradient(900px 600px at 100% 100%, rgba(192,140,90,.08), transparent 65%),
    linear-gradient(180deg, var(--cream) 0%, var(--off-white) 55%, var(--blush) 100%);
  border-top:1px solid var(--border-lt);
  border-bottom:1px solid var(--border-lt);
  overflow:hidden;
}
#journeys::before {
  content:'';
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(135deg, rgba(196,147,90,.04) 0 1px, transparent 1px 22px);
  pointer-events:none;
  opacity:.6;
  mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 75%);
  -webkit-mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 75%);
}

.journeys-shell {
  position:relative;
  max-width:1240px;
  margin:0 auto;
  z-index:1;
}

/* ─── HEAD ─── */
.journeys-head {
  position:relative;
  max-width:44rem;
  margin:0 auto clamp(64px,8vw,110px);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.journeys-head .section-label { justify-content:center; }
.journeys-head .section-label::before { display:block; }
.journeys-head .section-heading {
  font-size:clamp(2.1rem, 4.4vw, 3.8rem);
  margin-top:4px;
}
.journeys-deck {
  margin:clamp(18px,2.4vw,26px) auto 0;
  max-width:36rem;
}
.journeys-thread {
  display:block;
  width:1px;
  height:clamp(56px, 7vw, 92px);
  margin-top:clamp(28px,3.6vw,40px);
  background:linear-gradient(to bottom, var(--gold) 0%, rgba(196,147,90,.0) 100%);
  position:relative;
}
.journeys-thread::after {
  content:'';
  position:absolute;
  left:50%; bottom:0;
  width:7px; height:7px;
  margin-left:-3px; margin-bottom:-3px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 4px rgba(196,147,90,.15);
}

/* ─── FLOW (vertical thread + alternating rows) ─── */
.journeys-flow {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:clamp(64px, 8vw, 120px);
  padding:0 clamp(0px,2vw,32px);
}
.journeys-flow::before {
  content:'';
  position:absolute;
  left:50%; top:-30px; bottom:-30px;
  width:1px;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(196,147,90,.45) 0 6px,
      transparent 6px 14px
    );
  transform:translateX(-50%);
  z-index:0;
}

/* ─── ROW ─── */
.jflow-row {
  position:relative;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:clamp(36px, 5vw, 80px);
  align-items:center;
  z-index:1;
}
.jflow-row--right { direction:rtl; }
.jflow-row--right > * { direction:ltr; }

/* center dot on thread */
.jflow-dot {
  position:absolute;
  left:50%; top:50%;
  width:14px; height:14px;
  margin:-7px 0 0 -7px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff, var(--gold) 55%, var(--gold-dk) 100%);
  box-shadow:
    0 0 0 5px rgba(255,250,240,.95),
    0 0 0 6px rgba(196,147,90,.35),
    0 6px 14px -4px rgba(80,55,30,.35);
  z-index:2;
  transform:scale(.85);
  opacity:.85;
  transition:transform .7s var(--ease-out), opacity .7s var(--ease-out);
}
.jflow-row.in .jflow-dot { transform:scale(1); opacity:1; }

/* ─── MEDIA ─── */
.jflow-media {
  position:relative;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.jflow-num-bg {
  position:absolute;
  top:-46px;
  font-family:var(--font-disp);
  font-style:italic;
  font-weight:400;
  font-size:clamp(7rem, 14vw, 13rem);
  line-height:.85;
  letter-spacing:-.04em;
  color:transparent;
  -webkit-text-stroke:1px rgba(196,147,90,.45);
  text-stroke:1px rgba(196,147,90,.45);
  pointer-events:none;
  user-select:none;
  z-index:0;
  opacity:0;
  transform:translateY(20px);
  transition:opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.jflow-row--left .jflow-num-bg  { left:-12px; }
.jflow-row--right .jflow-num-bg { right:-12px; }
.jflow-row.in .jflow-num-bg { opacity:1; transform:translateY(0); }

.jflow-frame {
  position:relative;
  z-index:1;
  aspect-ratio: 5 / 4;
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(135deg, #F4ECDD, #E9DDC4);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 30px 70px -32px rgba(80,55,30,.35);
  transform:translateZ(0);
  transition:transform .9s var(--ease-out), box-shadow .9s var(--ease-out);
}
.jflow-frame::after {
  content:'';
  position:absolute; inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(160deg, rgba(196,147,90,.55), rgba(196,147,90,0) 45%, rgba(196,147,90,.4) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
  z-index:3;
}
.jflow-frame img {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.06);
  transition:transform 1.6s var(--ease-out), filter .9s var(--ease-out);
  filter:saturate(1) contrast(1.02);
  will-change:transform;
}
.jflow-media:hover .jflow-frame { transform:translateY(-6px); }
.jflow-media:hover .jflow-frame img {
  transform:scale(1.12);
  filter:saturate(1.05) contrast(1.04);
}
.jflow-frame-veil {
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,12,4,0) 60%, rgba(30,18,8,.22) 100%);
  pointer-events:none;
  z-index:2;
}

.jflow-caption {
  display:flex;
  align-items:baseline;
  gap:14px;
  padding:0 4px;
  font-size:.65rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--ink-light);
}
.jflow-caption .jflow-tag-em {
  font-family:var(--font-disp);
  font-style:italic;
  font-size:.85rem;
  letter-spacing:.04em;
  text-transform:none;
  color:var(--gold-dk);
}

/* ─── TEXT ─── */
.jflow-text {
  position:relative;
  max-width:32rem;
}
.jflow-row--right .jflow-text { margin-left:auto; }

.jflow-meta {
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
}
.jflow-num {
  font-family:var(--font-disp);
  font-style:italic;
  font-size:1.8rem;
  color:var(--gold-dk);
  line-height:1;
}
.jflow-rule {
  flex:0 0 36px;
  height:1px;
  background:linear-gradient(to right, var(--gold), rgba(196,147,90,.15));
}
.jflow-kicker {
  font-size:.62rem;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--ink-light);
}
.jflow-title {
  font-family:var(--font-disp);
  font-weight:400;
  font-size:clamp(1.9rem, 3.2vw, 2.8rem);
  line-height:1.08;
  letter-spacing:-.015em;
  color:var(--ink);
  margin:0 0 18px;
}
.jflow-title em { font-style:italic; color:var(--gold); }
.jflow-lede {
  font-size:.92rem;
  line-height:1.95;
  color:var(--ink-mid);
  margin:0;
}

.jflow-keywords {
  list-style:none;
  margin:24px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.jflow-keywords li {
  font-size:.62rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold-dk);
  padding:8px 14px;
  border:1px solid rgba(196,147,90,.35);
  border-radius:999px;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  opacity:0;
  transform:translateY(8px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.jflow-row.in .jflow-keywords li { opacity:1; transform:translateY(0); }
.jflow-row.in .jflow-keywords li:nth-child(1) { transition-delay:.30s; }
.jflow-row.in .jflow-keywords li:nth-child(2) { transition-delay:.38s; }
.jflow-row.in .jflow-keywords li:nth-child(3) { transition-delay:.46s; }
.jflow-row.in .jflow-keywords li:nth-child(4) { transition-delay:.54s; }

/* ─── ENTRANCE ANIMATION (per side) ─── */
.jflow-row .jflow-media,
.jflow-row .jflow-text {
  opacity:0;
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.jflow-row--left  .jflow-media { transform:translateX(-40px); }
.jflow-row--left  .jflow-text  { transform:translateX(40px); }
.jflow-row--right .jflow-media { transform:translateX(40px); }
.jflow-row--right .jflow-text  { transform:translateX(-40px); }

.jflow-row.in .jflow-media,
.jflow-row.in .jflow-text {
  opacity:1;
  transform:translateX(0);
}
.jflow-row.in .jflow-text  { transition-delay:.12s; }

/* ─── RESPONSIVE: TABLET (single column, image above text) ─── */
@media (max-width: 880px) {
  #journeys {
    padding:clamp(64px,9vw,96px) clamp(22px,5vw,40px) clamp(72px,10vw,110px);
  }

  /* Hide the desktop thread — mobile uses chapter separators instead */
  .journeys-flow::before { display:none; }

  .journeys-flow {
    gap:clamp(36px,6vw,48px);
    padding:0;
    max-width:560px;
    margin:0 auto;
  }

  /* Each row becomes a stacked "scene poster" */
  .jflow-row,
  .jflow-row--right { direction:ltr; }
  .jflow-row {
    grid-template-columns:1fr;
    gap:0;
    padding:0;
    text-align:center;
    align-items:start;
  }
  /* No decorative separators on mobile — keep chapters tight */
  .jflow-row::before,
  .jflow-row::after { display:none; }

  /* Remove the absolute center dot — irrelevant in single-column flow */
  .jflow-dot { display:none; }

  /* MEDIA — full-width hero image */
  .jflow-media {
    position:relative;
    gap:14px;
    align-items:stretch;
  }
  .jflow-frame {
    aspect-ratio: 4 / 3;
    border-radius:18px;
  }

  /* Number badge — sits in the top-left corner of every image */
  .jflow-row--left .jflow-num-bg,
  .jflow-row--right .jflow-num-bg {
    position:absolute;
    top:auto; bottom:14px;
    left:14px; right:auto;
    width:clamp(60px,16vw,82px);
    height:clamp(60px,16vw,82px);
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:
      radial-gradient(120% 120% at 30% 25%, rgba(255,248,232,.96) 0%, rgba(244,228,200,.9) 60%, rgba(232,212,176,.95) 100%);
    border:1px solid rgba(196,147,90,.45);
    box-shadow:
      0 1px 0 rgba(255,255,255,.7) inset,
      0 14px 28px -16px rgba(80,55,30,.5);
    font-size:clamp(1.6rem,5vw,2.1rem);
    line-height:1;
    letter-spacing:0;
    color:var(--gold-dk);
    -webkit-text-stroke:0;
    text-stroke:0;
    z-index:4;
  }
  .jflow-caption {
    justify-content:center;
    padding:0;
    gap:12px;
  }

  /* TEXT — centered editorial block under the image */
  .jflow-text {
    max-width:none;
    margin:clamp(22px,4vw,30px) auto 0 !important;
    padding:0 clamp(4px,2vw,12px);
  }
  .jflow-meta {
    justify-content:center;
    gap:12px;
    margin-bottom:14px;
  }
  .jflow-num { display:none; }
  .jflow-rule {
    flex:0 0 22px;
  }
  .jflow-rule + .jflow-kicker::after {
    content:'';
    display:inline-block;
    width:22px; height:1px;
    background:linear-gradient(to left, var(--gold), rgba(196,147,90,.15));
    vertical-align:middle;
    margin-left:12px;
  }
  .jflow-title {
    font-size:clamp(1.7rem, 6.5vw, 2.4rem);
    margin:0 0 14px;
  }
  .jflow-lede {
    font-size:.9rem;
    line-height:1.85;
    max-width:38rem;
    margin:0 auto;
  }
  .jflow-keywords {
    justify-content:center;
    margin-top:22px;
  }

  /* Entrance: simple rise (no horizontal slide on mobile) */
  .jflow-row .jflow-media,
  .jflow-row .jflow-text {
    transform:translateY(28px) !important;
  }
  .jflow-row.in .jflow-media,
  .jflow-row.in .jflow-text {
    transform:translateY(0) !important;
  }
}

@media (max-width: 520px) {
  #journeys { padding-left:18px; padding-right:18px; }
  .journeys-head { margin-bottom:clamp(40px,8vw,56px); }
  .journeys-thread { height:48px; }

  .jflow-frame { aspect-ratio: 5 / 4; border-radius:14px; }
  .jflow-row--left .jflow-num-bg,
  .jflow-row--right .jflow-num-bg {
    width:58px; height:58px;
    bottom:10px; left:10px;
    font-size:1.55rem;
  }
  .jflow-caption {
    font-size:.6rem;
    letter-spacing:.28em;
  }
  .jflow-caption .jflow-tag-em {
    font-size:.78rem;
  }
  .jflow-title { font-size:clamp(1.5rem, 7.5vw, 2rem); margin-bottom:12px; }
  .jflow-lede  { font-size:.85rem; line-height:1.8; }
  .jflow-keywords { gap:6px; margin-top:18px; }
  .jflow-keywords li {
    font-size:.56rem;
    letter-spacing:.26em;
    padding:7px 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jflow-row .jflow-media,
  .jflow-row .jflow-text,
  .jflow-keywords li,
  .jflow-num-bg,
  .jflow-frame,
  .jflow-frame img,
  .jflow-dot {
    transition:none !important;
    transform:none !important;
    opacity:1 !important;
  }
}

/* ═══════════════════════════════════════════
   SECTION 3 — MATERIALS (chaptered interactive stage)
═══════════════════════════════════════════ */
#materials {
  position:relative;
  padding:clamp(80px,11vw,128px) clamp(20px,5vw,56px);
  background:
    radial-gradient(1100px 700px at 18% 0%, rgba(204,170,108,.10), transparent 60%),
    radial-gradient(900px 600px at 100% 100%, rgba(192,140,90,.08), transparent 65%),
    linear-gradient(170deg, var(--cream) 0%, var(--off-white) 48%, var(--blush) 100%);
  border-top:1px solid var(--border-lt);
  border-bottom:1px solid var(--border-lt);
  overflow:hidden;
}
.emrg-shell {
  max-width:1280px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:clamp(36px,5.5vw,60px);
}

/* ─── HEAD ─── */
.emrg-head {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  max-width:42rem;
  margin:0 auto;
  padding:0 clamp(8px,2vw,16px);
}
.emrg-head .section-label,
.emrg-label {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0;
  margin:0 0 clamp(18px,2.5vw,26px);
  padding:0;
}
.emrg-head .section-label::before,
.emrg-label::before { display:none; }
.emrg-head .section-label::after,
.emrg-label::after { display:none; }
/* Decorative rule sits between label and title (centered in its own row) */
.emrg-head .emrg-label-rule,
.emrg-label-rule {
  display:block;
  width:clamp(48px,8vw,72px);
  height:1px;
  margin:0 auto clamp(18px,2.5vw,24px);
  background:linear-gradient(to right, transparent, var(--gold), transparent);
}
.emrg-hero-title {
  font-family:var(--font-disp);
  font-size:clamp(2.4rem,5vw,4rem);
  line-height:1.04;
  letter-spacing:-.02em;
  font-weight:400;
  margin:0;
  color:var(--ink);
}
.emrg-hero-title em {
  display:inline;
  font-style:italic;
  color:var(--gold);
  background:linear-gradient(180deg, var(--gold) 0%, var(--gold-dk) 100%);
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
}
.emrg-deck {
  margin:clamp(18px,2.5vw,24px) auto 0;
  max-width:36rem;
  font-size:clamp(0.88rem,1.05vw,0.98rem);
  line-height:1.75;
  color:var(--ink-mid);
}

/* ─── STAGE GRID ─── */
.emrg-stage {
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) minmax(260px,360px);
  gap:clamp(24px,3.5vw,48px);
  align-items:stretch;
  min-height:0;
}

/* ─── LEFT RAIL ─── */
.emrg-rail {
  position:relative;
  display:flex;
  align-items:center;
}
.emrg-chapters {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:clamp(8px,1.4vw,14px);
}
.emrg-chapters::before {
  content:'';
  position:absolute;
  top:14px;
  bottom:14px;
  left:11px;
  width:1px;
  background:linear-gradient(to bottom,
    transparent 0%,
    rgba(168,142,99,.35) 18%,
    rgba(168,142,99,.35) 82%,
    transparent 100%);
}
.emrg-chap {
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  padding:8px 12px 8px 30px;
  background:transparent;
  border:none;
  cursor:pointer;
  font:inherit;
  color:var(--ink-light);
  text-align:left;
  transition:color .35s var(--ease-out), transform .35s var(--ease-out);
  outline:none;
}
.emrg-chap::before {
  content:'';
  position:absolute;
  left:5px;
  top:50%;
  width:13px;
  height:13px;
  border-radius:50%;
  border:1px solid rgba(168,142,99,.5);
  background:var(--off-white);
  transform:translateY(-50%) scale(1);
  transition:
    background .35s var(--ease-out),
    border-color .35s var(--ease-out),
    box-shadow .45s var(--ease-out),
    transform .45s var(--ease-out);
}
.emrg-chap::after {
  content:'';
  position:absolute;
  left:11px;
  top:50%;
  width:0;
  height:1px;
  background:var(--gold);
  transform:translate(0,-50%);
  transition:width .45s var(--ease-out), opacity .35s var(--ease-out);
  opacity:0;
}
.emrg-chap:hover { color:var(--ink); transform:translateX(2px); }
.emrg-chap.is-active {
  color:var(--ink);
}
.emrg-chap.is-active::before {
  background:var(--gold);
  border-color:var(--gold-dk);
  transform:translateY(-50%) scale(1.15);
  box-shadow:0 0 0 5px rgba(204,170,108,.18);
}
.emrg-chap.is-active::after {
  width:14px;
  opacity:1;
}
.emrg-chap-num {
  font-family:var(--font-disp);
  font-size:.82rem;
  letter-spacing:.06em;
  color:var(--ink-light);
  transition:color .35s var(--ease-out);
}
.emrg-chap.is-active .emrg-chap-num { color:var(--gold-dk); }
.emrg-chap-name {
  font-size:.74rem;
  letter-spacing:.22em;
  text-transform:uppercase;
}

/* ─── CENTER CANVAS ─── */
.emrg-canvas {
  --emrg-planet-side:min(460px, min(70vw, 56vh));
  position:relative;
  margin:0;
  border-radius:32px;
  overflow:hidden;
  min-height:clamp(360px,52vh,620px);
  background:
    radial-gradient(ellipse 90% 80% at 50% 38%, rgba(255,253,249,.96) 0%, var(--paper) 50%, var(--sand) 100%);
  border:1px solid var(--border-lt);
  box-shadow:
    0 32px 70px -36px rgba(42,31,22,.22),
    0 0 0 1px rgba(255,255,255,.55) inset;
  isolation:isolate;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  outline:none;
  transition:box-shadow .35s ease;
}
.emrg-canvas:focus-visible {
  box-shadow:
    0 32px 70px -36px rgba(42,31,22,.22),
    0 0 0 1px rgba(255,255,255,.55) inset,
    0 0 0 3px rgba(204,170,108,.4);
}
.emrg-canvas.is-dragging .emrg-planet-stack {
  transition:none;
}
.emrg-canvas::before {
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 12%, rgba(255,255,255,.6), transparent 55%),
    radial-gradient(circle at 88% 92%, rgba(204,170,108,.08), transparent 50%);
  pointer-events:none;
  z-index:1;
}

/* Decorative orbit rings */
.emrg-orbit {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
  z-index:1;
}
.emrg-orbit-ring {
  position:absolute;
  width:var(--emrg-planet-side);
  height:var(--emrg-planet-side);
  border-radius:50%;
  border:1px dashed rgba(168,142,99,.25);
  animation:emrgOrbitSpin 60s linear infinite;
}
.emrg-orbit-ring.is-2 {
  width:calc(var(--emrg-planet-side) * 1.22);
  height:calc(var(--emrg-planet-side) * 1.22);
  border-style:solid;
  border-color:rgba(168,142,99,.10);
  animation-duration:90s;
  animation-direction:reverse;
}
@keyframes emrgOrbitSpin {
  to { transform:rotate(360deg); }
}

.emrg-planet-stack {
  position:absolute;
  inset:0;
  z-index:2;
  display:grid;
  place-items:center;
  transform:translate3d(var(--emrg-px,0px), var(--emrg-py,0px), 0);
  transition:transform .8s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.emrg-planet-layer {
  grid-area:1 / 1;
  width:var(--emrg-planet-side);
  height:var(--emrg-planet-side);
  object-fit:contain;
  object-position:center center;
  opacity:0;
  transform:scale(.97);
  will-change:opacity, transform;
  transition:
    opacity .7s cubic-bezier(.22,1,.36,1),
    transform .9s cubic-bezier(.22,1,.36,1),
    filter .7s ease;
  pointer-events:none;
  filter:drop-shadow(0 22px 40px rgba(42,31,22,.16));
  animation:emrgFloat 9s ease-in-out infinite;
}
.emrg-planet-layer:first-child {
  opacity:1;
  transform:scale(1);
}
@keyframes emrgFloat {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}
@media (prefers-reduced-motion: reduce) {
  .emrg-planet-layer { animation:none; }
  .emrg-orbit-ring   { animation:none; }
  .emrg-planet-stack { transition:none; }
}

/* Auto-advance progress bar + chapter counter */
.emrg-progress {
  position:absolute;
  left:clamp(20px,3vw,30px);
  right:clamp(20px,3vw,30px);
  bottom:clamp(20px,2.6vw,28px);
  height:2px;
  border-radius:2px;
  background:rgba(168,142,99,.18);
  overflow:hidden;
  z-index:4;
}
.emrg-progress-fill {
  display:block;
  height:100%;
  width:0%;
  background:linear-gradient(to right, var(--gold-dk), var(--gold));
  transform-origin:left center;
}

/* Prev / next arrows */
.emrg-arrow {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid var(--border-lt);
  background:rgba(255,255,255,.85);
  color:var(--ink);
  font-size:1rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 6px 16px -8px rgba(42,31,22,.25);
  transition:
    background .3s var(--ease-out),
    transform .35s var(--ease-out),
    box-shadow .3s var(--ease-out),
    color .3s var(--ease-out);
}
.emrg-arrow:hover {
  background:var(--ink);
  color:var(--off-white);
  transform:translateY(-50%) scale(1.06);
  box-shadow:0 12px 24px -10px rgba(42,31,22,.45);
}
.emrg-arrow:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:3px;
}
.emrg-arrow-prev { left:clamp(12px,2vw,20px); }
.emrg-arrow-next { right:clamp(12px,2vw,20px); }

/* Auto / pause toggle */
.emrg-playpause {
  position:absolute;
  left:clamp(18px,2.4vw,28px);
  top:clamp(18px,2.4vw,26px);
  z-index:5;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px 6px 8px;
  border:1px solid rgba(168,142,99,.4);
  border-radius:999px;
  background:rgba(255,255,255,.7);
  color:var(--ink-mid);
  font-size:.6rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  cursor:pointer;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:color .3s var(--ease-out), background .3s var(--ease-out), border-color .3s var(--ease-out);
}
.emrg-playpause:hover {
  color:var(--ink);
  background:rgba(255,255,255,.92);
  border-color:var(--gold);
}
.emrg-playpause:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:2px;
}
.emrg-playpause-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 3px rgba(204,170,108,.18);
  animation:emrgPulse 1.6s ease-in-out infinite;
}
.emrg-playpause[aria-pressed="true"] .emrg-playpause-dot {
  background:var(--ink-mid);
  box-shadow:none;
  animation:none;
}
@keyframes emrgPulse {
  0%,100% { transform:scale(1);   opacity:1;   }
  50%     { transform:scale(1.3); opacity:.55; }
}
@media (prefers-reduced-motion: reduce) {
  .emrg-playpause-dot { animation:none; }
}
.emrg-counter {
  position:absolute;
  right:clamp(18px,2.4vw,28px);
  top:clamp(18px,2.4vw,26px);
  margin:0;
  z-index:4;
  font-family:var(--font-disp);
  font-size:.85rem;
  letter-spacing:.06em;
  color:var(--ink-mid);
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.emrg-counter-sep { color:var(--gold); }
.emrg-counter > span:first-child {
  color:var(--ink);
  font-weight:500;
  display:inline-block;
  min-width:1.4em;
  text-align:right;
  transition:transform .35s var(--ease-out), opacity .35s var(--ease-out);
}

/* ─── RIGHT CAPTION ─── */
.emrg-caption {
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(20px,2.4vw,28px);
  min-width:0;
}
.emrg-caption-track {
  position:relative;
  display:grid;
  grid-template-columns:1fr;
}
.emrg-card {
  grid-area:1 / 1;
  display:flex;
  flex-direction:column;
  gap:clamp(10px,1.2vw,14px);
  padding:clamp(22px,2.4vw,30px) clamp(22px,2.4vw,30px);
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border:1px solid rgba(221,211,194,.85);
  border-radius:18px 22px 22px 18px;
  border-left:3px solid var(--gold);
  box-shadow:
    0 22px 40px -22px rgba(42,31,22,.14),
    0 0 0 1px rgba(255,255,255,.6) inset;
  opacity:0;
  transform:translateY(14px);
  visibility:hidden;
  pointer-events:none;
  transition:
    opacity .55s cubic-bezier(.22,1,.36,1),
    transform .65s cubic-bezier(.22,1,.36,1),
    visibility 0s linear .55s;
}
.emrg-card.is-active {
  opacity:1;
  transform:translateY(0);
  visibility:visible;
  pointer-events:auto;
  transition:
    opacity .55s cubic-bezier(.22,1,.36,1),
    transform .65s cubic-bezier(.22,1,.36,1),
    visibility 0s linear 0s;
}
.emrg-card-eyebrow {
  margin:0;
  font-size:.62rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold-dk);
}
.emrg-card-title {
  margin:0;
  font-family:var(--font-disp);
  font-size:clamp(1.4rem,1.9vw,1.85rem);
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--ink);
}
/* When a card has no body copy, keep comfortable space before the pull-quote */
.emrg-card-title + .emrg-card-quote {
  margin-top:clamp(14px, 2.2vw, 22px);
}
.emrg-card-body {
  margin:0;
  font-size:clamp(.86rem,1.05vw,.95rem);
  line-height:1.78;
  color:var(--ink-mid);
}
.emrg-card-quote {
  margin:clamp(6px,1vw,10px) 0 0;
  padding:clamp(10px,1.4vw,14px) 0 0;
  border:none;
  border-top:1px solid rgba(168,142,99,.22);
  background:transparent;
  font-family:var(--font-disp);
  font-style:italic;
  font-size:clamp(.95rem,1.2vw,1.08rem);
  line-height:1.55;
  color:var(--ink);
  position:relative;
  padding-left:22px;
}
.emrg-card-quote::before {
  content:'\201C';
  position:absolute;
  left:0;
  top:6px;
  font-family:var(--font-disp);
  font-size:1.6rem;
  line-height:1;
  color:var(--gold);
  opacity:.5;
}
.emrg-card-quote-note {
  display:block;
  margin-top:6px;
  font-family:var(--font-body, inherit);
  font-style:normal;
  font-size:.62rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-light);
  opacity:.85;
}
.emrg-cta {
  display:flex;
  justify-content:flex-start;
  padding-left:clamp(4px,1vw,8px);
}

/* ─── RESPONSIVE ─── */
@media (max-width:1100px) {
  .emrg-stage {
    grid-template-columns:1fr;
    gap:clamp(22px,4vw,32px);
  }
  .emrg-rail {
    order:3;
    justify-content:center;
  }
  .emrg-chapters {
    flex-direction:row;
    gap:clamp(4px,1.2vw,10px);
    flex-wrap:wrap;
    justify-content:center;
  }
  .emrg-chapters::before { display:none; }
  .emrg-chap {
    flex-direction:column;
    align-items:center;
    gap:6px;
    padding:8px 10px 4px;
    text-align:center;
  }
  .emrg-chap::before {
    position:relative;
    left:auto;
    top:auto;
    transform:none;
    margin:0 auto 4px;
  }
  .emrg-chap.is-active::before {
    transform:scale(1.15);
  }
  .emrg-chap::after { display:none; }
  .emrg-chap-num { font-size:.74rem; }
  .emrg-chap-name { font-size:.62rem; letter-spacing:.18em; }
  .emrg-canvas {
    order:1;
    --emrg-planet-side:min(440px, min(78vw, 50vh));
    min-height:min(56vh,460px);
  }
  .emrg-caption {
    order:2;
    text-align:left;
  }
  .emrg-cta { justify-content:flex-start; }
}
@media (max-width:640px) {
  .emrg-canvas {
    --emrg-planet-side:min(360px, 78vw);
    min-height:min(58vh,420px);
    border-radius:24px;
  }
  .emrg-card { border-radius:16px 18px 18px 16px; padding:20px; }
  .emrg-progress { left:18px; right:18px; bottom:16px; }
  .emrg-counter  { right:16px; top:14px; font-size:.78rem; }
  /* Bigger tap targets so iOS Safari registers reliably */
  .emrg-arrow {
    width:44px;
    height:44px;
    z-index:6;
    touch-action:manipulation;
  }
  .emrg-arrow-prev { left:10px; }
  .emrg-arrow-next { right:10px; }
  .emrg-playpause {
    left:14px;
    top:12px;
    padding:6px 11px 6px 8px;
    font-size:.55rem;
    touch-action:manipulation;
    z-index:6;
  }
  /* Hide the chapter rail on mobile — controls become arrows + auto-advance */
  .emrg-rail { display:none; }
}

/* ═══════════════════════════════════════════
   SECTION 4 — PHILOSOPHY
═══════════════════════════════════════════ */
#philosophy {
  padding:140px 60px; text-align:center;
  background:linear-gradient(138deg, var(--blush) 0%, var(--paper) 40%, var(--sand) 100%);
  border-top:1px solid var(--border-lt); position:relative;
}
.phil-watermark { position:absolute; pointer-events:none; filter:saturate(.25) brightness(1.06); opacity:.07; }
.phil-watermark:first-of-type { left:-80px; top:-50px; width:340px; }
.phil-watermark-2 { right:-60px; bottom:-40px; width:280px; }

.phil-eyebrow {
  font-size:.6rem; letter-spacing:.5em; text-transform:uppercase;
  color:var(--gold-dk); margin-bottom:28px;
}
.phil-statement {
  font-family:var(--font-disp);
  font-size:clamp(3rem,7vw,7rem); font-weight:400;
  line-height:1.02; letter-spacing:-.015em; color:var(--ink);
  max-width:800px; margin:0 auto 48px;
}
.phil-statement em { font-style:italic; color:var(--gold); }
.phil-sep { display:flex; align-items:center; gap:20px; max-width:400px; margin:0 auto 48px; }
.phil-sep-line { flex:1; height:1px; background:var(--border); }
.phil-sep-mark { color:var(--gold); font-size:.8rem; }
.phil-body { font-size:.92rem; line-height:2.1; color:var(--ink-mid); max-width:680px; margin:0 auto 48px; }

/* —— Our Projects carousel —— */
.phil-projects {
  max-width:1180px;
  margin:0 auto 64px;
  padding:0 clamp(8px,2vw,16px);
}
.phil-projects:focus-visible {
  outline:2px solid var(--gold-dk);
  outline-offset:10px;
  border-radius:4px;
}
.phil-projects-title {
  font-family:var(--font-disp);
  font-size:clamp(1.05rem,2vw,1.35rem);
  font-weight:400;
  font-style:italic;
  color:var(--gold-dk);
  letter-spacing:.06em;
  margin:0 0 clamp(22px,3vw,32px);
  text-align:center;
}
.phil-carousel {
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:clamp(10px,2vw,18px);
}
.phil-carousel-viewport {
  overflow:hidden;
  min-width:0;
  border-radius:18px;
  cursor:grab;
  touch-action:pan-y pinch-zoom;
  container-type:inline-size;
  container-name:philcar;
  box-shadow:
    0 1px 0 rgba(255,255,255,.75) inset,
    0 28px 56px -32px rgba(42,31,22,.22);
}
.phil-carousel-viewport:active { cursor:grabbing; }
.phil-carousel-track {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:20px;
  transition:transform .75s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
@media (prefers-reduced-motion: reduce) {
  .phil-carousel-track { transition-duration:.01ms; }
}
/* Card width = viewport of carousel; gaps 20px between cards */
.phil-project-card {
  flex:0 0 100%;
  min-width:0;
}
@container philcar (min-width: 560px) {
  .phil-project-card { flex-basis:calc((100cqi - 20px) / 2); }
}
@container philcar (min-width: 960px) {
  .phil-project-card { flex-basis:calc((100cqi - 40px) / 3); }
}
@supports not (container-type: inline-size) {
  @media (min-width: 560px) {
    .phil-project-card { flex:0 0 calc(50vw - 80px); max-width:420px; }
  }
  @media (min-width: 960px) {
    .phil-project-card { flex:0 0 calc(33.333vw - 70px); max-width:360px; }
  }
}
.phil-project-card > a {
  display:block;
  height:100%;
  text-decoration:none;
  color:inherit;
  -webkit-tap-highlight-color:transparent;
}
.phil-project-inner {
  position:relative;
  margin:0;
  height:100%;
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(145deg, var(--sand), var(--blush));
  border:1px solid var(--border-lt);
  transition:
    transform .5s cubic-bezier(.22,1,.36,1),
    box-shadow .5s cubic-bezier(.22,1,.36,1),
    border-color .4s ease;
}
.phil-project-inner::before {
  content:'';
  position:absolute; inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(165deg, rgba(196,147,90,.45), transparent 45%, rgba(196,147,90,.25));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
  z-index:2;
  opacity:0;
  transition:opacity .45s ease;
}
.phil-project-card:hover .phil-project-inner,
.phil-project-card:focus-within .phil-project-inner {
  transform:translateY(-6px);
  box-shadow:0 22px 48px -24px rgba(42,31,22,.28);
  border-color:rgba(196,147,90,.4);
}
.phil-project-card:hover .phil-project-inner::before,
.phil-project-card:focus-within .phil-project-inner::before { opacity:1; }
.phil-project-inner img {
  display:block;
  width:100%;
  aspect-ratio:auto;
  object-fit:contain;
  transform:scale(1);
  transition:transform 1.1s cubic-bezier(.22,1,.36,1);
}
.phil-project-card:hover .phil-project-inner img { transform:scale(1.04); }
.phil-project-inner figcaption {
  position:absolute;
  left:0; right:0; bottom:0;
  padding:clamp(14px,2vw,20px) clamp(14px,2.2vw,22px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  text-align:left;
  background:linear-gradient(to top, rgba(42,31,22,.82) 0%, rgba(42,31,22,.35) 55%, transparent 100%);
  color:#fff;
}
.phil-project-num {
  font-size:.55rem;
  letter-spacing:.38em;
  text-transform:uppercase;
  color:rgba(255,248,232,.75);
}
.phil-project-name {
  font-family:var(--font-disp);
  font-size:clamp(1.05rem,1.8vw,1.28rem);
  font-weight:400;
  line-height:1.15;
}
.phil-project-meta {
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,248,232,.72);
}
.phil-carousel-nav {
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid rgba(196,147,90,.45);
  background:rgba(255,255,255,.85);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .35s ease, border-color .35s ease, transform .25s ease, box-shadow .35s ease;
  flex-shrink:0;
}
.phil-carousel-nav span {
  display:block;
  width:10px;
  height:10px;
  flex-shrink:0;
  border-right:2px solid var(--gold-dk);
  border-bottom:2px solid var(--gold-dk);
  transform:rotate(-45deg);
  transform-origin:50% 50%;
  margin:0;
}
.phil-carousel-prev span { transform:rotate(135deg); }
.phil-carousel-nav:hover {
  background:var(--gold);
  border-color:var(--gold);
  box-shadow:0 10px 24px -12px rgba(154,110,52,.55);
}
.phil-carousel-nav:hover span {
  border-color:#fff;
}
.phil-carousel-nav:active { transform:scale(.94); }
.phil-carousel-nav:focus-visible {
  outline:2px solid var(--gold-dk);
  outline-offset:3px;
}
.phil-carousel-dots {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-top:clamp(22px,3vw,30px);
}
.phil-carousel-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  padding:0;
  border:none;
  background:rgba(90,71,56,.22);
  cursor:pointer;
  transition:transform .35s ease, background .35s ease, box-shadow .35s ease;
}
.phil-carousel-dot:hover { background:rgba(196,147,90,.55); }
.phil-carousel-dot.is-active {
  background:var(--gold-dk);
  transform:scale(1.35);
  box-shadow:0 0 0 4px rgba(196,147,90,.2);
}
.phil-projects.phil-projects--static .phil-carousel-nav,
.phil-projects.phil-projects--static .phil-carousel-dots { display:none; }
@media (max-width: 520px) {
  /* Stack the carousel: viewport spans the top row,
     arrows sit side-by-side in a centered row beneath it.
     Use 1fr 1fr (not auto auto) so the viewport row spans the full
     width of the parent — auto tracks shrink-wrap and pin the slide narrow. */
  .phil-carousel {
    display:grid;
    width:100%;
    max-width:100%;
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto;
    grid-template-areas:
      "view view"
      "prev next";
    justify-content:center;
    column-gap:24px;
    row-gap:18px;
  }
  .phil-carousel-viewport {
    grid-area:view;
    border-radius:14px;
    width:100%;
    min-width:0;
  }
  .phil-carousel-prev {
    grid-area:prev;
    justify-self:end;
  }
  .phil-carousel-next {
    grid-area:next;
    justify-self:start;
  }
  .phil-carousel-prev,
  .phil-carousel-next {
    width:48px;
    height:48px;
    touch-action:manipulation;
  }
  /* Snug card chrome on small screens */
  .phil-project-inner { border-radius:14px; }
  .phil-project-inner img { aspect-ratio:auto; }
  .phil-project-name { font-size:1.1rem; }
  .phil-project-meta { font-size:.6rem; letter-spacing:.16em; }
}

/* ═══════════════════════════════════════════
   SECTION 5 — CLOSING (editorial card)
═══════════════════════════════════════════ */
#closing {
  padding:clamp(88px,13vw,160px) clamp(20px,5vw,60px);
  text-align:center;
  background:linear-gradient(162deg, var(--sand) 0%, var(--blush) 35%, var(--paper) 65%, var(--cream) 100%);
  border-top:1px solid var(--border-lt);
  position:relative;
  overflow:hidden;
}
.closing-inner {
  position:relative;
  z-index:1;
  max-width:880px;
  margin:0 auto;
  padding:clamp(48px,7vw,88px) clamp(28px,5vw,72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,253,249,.35) 100%);
  border:1px solid var(--border-lt);
  border-radius:clamp(20px,3vw,28px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 40px 80px -42px rgba(80,55,30,.28);
  backdrop-filter:blur(10px) saturate(1.05);
  -webkit-backdrop-filter:blur(10px) saturate(1.05);
  isolation:isolate;
}
.closing-inner::before {
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(160deg, rgba(196,147,90,.45), rgba(196,147,90,0) 45%, rgba(196,147,90,.35) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
  z-index:0;
}
.closing-inner > * { position:relative; z-index:1; }

/* Decorative top mark */
.closing-mark {
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 clamp(22px,3vw,30px);
  color:var(--gold);
}
.closing-mark-line {
  display:block;
  width:clamp(36px,5vw,56px);
  height:1px;
  background:linear-gradient(to right, transparent, var(--gold), transparent);
}
.closing-mark-icon {
  font-size:.85rem;
  color:var(--gold-dk);
  transform:translateY(-1px);
}

/* Editorial signature row replacing the buttons */
.closing-signature {
  display:inline-flex;
  align-items:center;
  gap:clamp(14px,2vw,22px);
  padding:14px clamp(18px,3vw,28px);
  border-radius:999px;
  border:1px solid rgba(196,147,90,.35);
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.closing-signature-rule {
  display:block;
  width:clamp(28px,4vw,44px);
  height:1px;
  background:linear-gradient(to right, transparent, var(--gold), transparent);
}
.closing-signature-text {
  font-family:var(--font-disp);
  font-style:italic;
  font-size:clamp(.78rem,1.1vw,.88rem);
  letter-spacing:.04em;
  color:var(--gold-dk);
  white-space:nowrap;
}
/* Decorative dot pattern */
.closing-deco-dots {
  position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(1.5px 1.5px at 15% 28%, rgba(196,147,90,.28) 0, transparent 1.5px),
    radial-gradient(1px 1px at 65% 42%, rgba(196,147,90,.20) 0, transparent 1.5px),
    radial-gradient(1.2px 1.2px at 82% 78%, rgba(196,147,90,.24) 0, transparent 1.5px),
    radial-gradient(1px 1px at 38% 55%, rgba(42,31,22,.08) 0, transparent 1.5px),
    radial-gradient(1.1px 1.1px at 90% 20%, rgba(196,147,90,.18) 0, transparent 1.5px);
  background-size:200px 200px, 240px 240px, 180px 180px, 220px 220px, 260px 260px;
  opacity:.75;
}
.closing-bg-palm {
  position:absolute;
  left:clamp(-80px,-6vw,-40px);
  bottom:clamp(-60px,-5vw,-30px);
  width:clamp(220px,32vw,420px);
  opacity:.05;
  pointer-events:none;
  filter:saturate(.2);
}
.closing-bg-planet {
  position:absolute;
  right:clamp(-80px,-6vw,-40px);
  top:clamp(-80px,-6vw,-40px);
  width:clamp(160px,24vw,300px);
  opacity:.06;
  pointer-events:none;
  filter:saturate(.2);
}
.closing-label {
  font-size:clamp(.55rem,1.6vw,.6rem);
  letter-spacing:.5em;
  text-transform:uppercase;
  color:var(--gold-dk);
  margin:0 0 clamp(22px,3vw,36px);
}
.closing-heading {
  font-family:var(--font-disp);
  font-size:clamp(2.1rem,5.4vw,5rem);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.015em;
  color:var(--ink);
  max-width:18ch;
  margin:0 auto clamp(20px,2.6vw,28px);
  text-wrap:balance;
}
.closing-heading em {
  font-style:italic;
  background:linear-gradient(180deg, var(--gold) 0%, var(--gold-dk) 100%);
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
}
.closing-sub {
  font-family:var(--font-disp);
  font-style:italic;
  font-size:clamp(.92rem,1.4vw,1.05rem);
  color:var(--ink-mid);
  margin:0 auto clamp(28px,4vw,40px);
  max-width:34rem;
  line-height:1.6;
}

/* ─── CONTACT ─── */
#contact {
  position:relative;
  padding:130px 60px;
  background:var(--paper);
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:clamp(40px, 6vw, 100px);
  align-items:start;
  border-top:1px solid var(--border);
  overflow:hidden;
}
.contact-grain {
  position:absolute !important;
  inset:0;
  background:
    radial-gradient(circle at 12% 18%, rgba(196,147,90,.10), transparent 42%),
    radial-gradient(circle at 88% 82%, rgba(201,120,88,.07), transparent 50%);
  pointer-events:none;
  z-index:0;
  grid-area:unset;
}
#contact > .contact-text,
#contact > .contact-form { position:relative; z-index:1; }
.contact-text { min-width:0; }

.contact-head {
  font-family:var(--font-disp);
  font-size:clamp(2.8rem,4.6vw,4.6rem);
  font-weight:400;
  line-height:1.1;
  letter-spacing:-.015em;
  color:var(--ink);
  margin-bottom:26px;
}
.contact-head em { font-style:italic; color:var(--gold); }
.contact-sub {
  font-size:.88rem;
  line-height:2;
  color:var(--ink-mid);
  max-width:420px;
  margin-bottom:50px;
}
.contact-clients {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px clamp(20px, 3vw, 32px);
  margin-top:4px;
  padding-top:28px;
  border-top:1px solid var(--border-lt);
}
.contact-clients p {
  display:flex;
  align-items:baseline;
  gap:12px;
  margin:0;
  padding:6px 0;
  min-width:0;
}
.contact-clients-num {
  font-family:var(--font-disp);
  font-style:italic;
  font-size:1rem;
  line-height:1.2;
  color:var(--gold);
  letter-spacing:.04em;
  flex-shrink:0;
}
.contact-clients-txt {
  font-size:.62rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-mid);
  line-height:1.55;
  overflow-wrap:break-word;
}
@media (max-width:1100px) {
  .contact-clients {
    grid-template-columns:1fr;
    gap:0;
  }
  .contact-clients p {
    padding:14px 0;
    border-bottom:1px solid rgba(221,211,194,.65);
  }
  .contact-clients p:last-child {
    border-bottom:none;
  }
}

/* Social links — left column under client types */
.contact-social {
  margin-top:clamp(24px, 3vw, 36px);
  padding-top:clamp(22px, 3vw, 30px);
  border-top:1px solid var(--border-lt);
}
.contact-social-list {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:clamp(10px, 1.8vw, 16px);
}
.contact-social-list li { margin:0; padding:0; }
.contact-social-list a {
  display:flex;
  align-items:center;
  justify-content:center;
  width:clamp(44px, 5vw, 52px);
  height:clamp(44px, 5vw, 52px);
  border-radius:50%;
  border:1px solid rgba(42,31,22,.14);
  background:rgba(255,255,255,.55);
  box-shadow:0 4px 14px -6px rgba(42,31,22,.12);
  transition:border-color .25s ease, background .25s ease, transform .3s var(--ease-out), box-shadow .25s ease;
}
.contact-social-list a:hover {
  border-color:rgba(196,147,90,.45);
  background:rgba(255,252,246,.95);
  transform:translateY(-2px);
  box-shadow:0 10px 22px -10px rgba(42,31,22,.18);
}
.contact-social-list a:focus-visible {
  outline:2px solid rgba(204,170,108,.55);
  outline-offset:3px;
}
.contact-social-list img {
  width:clamp(20px, 2.2vw, 24px);
  height:auto;
  display:block;
  opacity:.92;
  transition:opacity .2s ease;
}
.contact-social-list a:hover img { opacity:1; }

/* — Light form card — */
.contact-form {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:22px;
  background:var(--white);
  color:var(--ink);
  padding:clamp(28px, 4vw, 48px);
  border-radius:8px;
  border:1px solid var(--border-lt);
  box-shadow:0 30px 70px -30px rgba(42,31,22,.18), 0 8px 24px -10px rgba(42,31,22,.06);
  overflow:hidden;
}
.contact-form::before {
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 100% 0%, rgba(196,147,90,.08), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(196,147,90,.06), transparent 50%);
  pointer-events:none;
}
.contact-form > * { position:relative; z-index:1; }

.contact-form-head {
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:8px;
}
.contact-form-eyebrow {
  font-family:var(--font-disp);
  font-style:italic;
  font-size:1.05rem;
  color:var(--gold-dk);
  letter-spacing:.01em;
  white-space:nowrap;
}
.contact-form-rule {
  flex:1;
  height:1px;
  background:linear-gradient(90deg, rgba(196,147,90,.45), rgba(196,147,90,0));
}

.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

/* — Underline fields on light card — */
.field { position:relative; padding-top:18px; }
.field label {
  position:absolute;
  top:34px;
  left:0;
  font-family:var(--font-body);
  font-size:.95rem;
  letter-spacing:.01em;
  color:var(--ink-light);
  pointer-events:none;
  background:transparent;
  padding:0;
  transform-origin:left center;
  transition:transform .28s var(--ease-out), color .28s ease, font-size .28s ease, letter-spacing .28s ease;
}
.field input,
.field textarea,
.field select {
  width:100%;
  box-sizing:border-box;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--border);
  border-radius:0;
  padding:10px 0 12px;
  font-family:var(--font-body);
  font-size:1rem;
  color:var(--ink);
  outline:none;
  display:block;
  cursor:text;
  transition:border-color .28s ease;
}
.field input::placeholder,
.field textarea::placeholder { color:transparent; }
.field input:hover,
.field textarea:hover,
.field select:hover { border-bottom-color:var(--ink-light); }
.field input:focus,
.field textarea:focus,
.field select:focus { border-bottom-color:var(--gold); }

.field input:focus ~ label,
.field textarea:focus ~ label,
.field input:not(:placeholder-shown) ~ label,
.field textarea:not(:placeholder-shown) ~ label {
  transform:translateY(-26px);
  font-size:.6rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold-dk);
}
.field textarea {
  resize:vertical;
  min-height:120px;
  line-height:1.6;
  appearance:none; -webkit-appearance:none;
  margin:0;
}
.field input:-webkit-autofill {
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 1000px var(--white) inset;
  caret-color:var(--ink);
}

/* — Select field (Project Type) — */
.field--select { position:relative; }
.field--select select {
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right:28px;
  cursor:pointer;
  background-color:transparent;
}
.field--select select:invalid { color:transparent; }
.field--select select option {
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:.95rem;
  padding:10px;
}
.field--select select option[disabled] { color:var(--ink-light); }

.field-chev {
  position:absolute;
  right:0;
  bottom:14px;
  font-style:normal;
  font-size:.85rem;
  color:var(--gold-dk);
  pointer-events:none;
  transition:color .28s ease, transform .28s ease;
}
.field--select select:focus ~ .field-chev {
  color:var(--gold);
  transform:rotate(180deg);
}

/* Floating label states for select */
.field--select select:focus ~ label,
.field--select select:valid ~ label {
  transform:translateY(-26px);
  font-size:.6rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold-dk);
}

/* — Submit — */
.form-actions {
  margin-top:14px;
}
.contact-submit {
  --btn-pad-x:32px;
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:14px;
  width:100%;
  justify-content:center;
  padding:18px 28px;
  font-family:var(--font-body);
  font-size:.7rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--white);
  background:var(--ink);
  border:none;
  border-radius:4px;
  cursor:pointer;
  transition:transform .35s var(--ease-out), box-shadow .35s ease, background-color .35s ease;
  box-shadow:0 18px 40px -16px rgba(42,31,22,.45);
}
.contact-submit:hover {
  transform:translateY(-2px);
  background:linear-gradient(180deg, var(--gold-dk) 0%, var(--gold) 100%);
  box-shadow:0 24px 50px -16px rgba(196,147,90,.55);
}
.contact-submit:disabled {
  filter:grayscale(.2) brightness(.92);
  cursor:not-allowed;
  transform:none;
}
.contact-submit .btn-arrow { transition:transform .35s var(--ease-out); }
.contact-submit:hover .btn-arrow { transform:translateX(4px); }

/* ─── FOOTER ─── */
footer {
  background:var(--ink); color:var(--white);
  padding:70px 60px 40px;
}
.footer-top {
  display:flex; align-items:flex-start; justify-content:space-between; gap:60px;
  padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-logo { font-family:var(--font-disp); font-size:1.6rem; letter-spacing:.28em; color:var(--white); text-transform:uppercase; }
.footer-tagline { font-family:var(--font-disp); font-style:italic; font-size:.9rem; color:rgba(255,255,255,.42); max-width:380px; line-height:1.7; }
.footer-bottom {
  display:flex;
  justify-content:center;
  align-items:center;
  padding-top:30px;
  text-align:center;
}
.footer-copy {
  display:block;
  max-width:min(100%, 40rem);
  margin:0 auto;
  font-size:.62rem;
  letter-spacing:.06em;
  line-height:1.65;
  color:rgba(255,255,255,.34);
}
.footer-copy a {
  color:rgba(255,255,255,.52);
  text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.25);
  text-underline-offset:2px;
  transition:color .25s ease, text-decoration-color .25s ease;
}
.footer-copy a:hover {
  color:var(--gold-lt);
  text-decoration-color:rgba(196,147,90,.55);
}
.footer-copy strong {
  font-weight:600;
  color:rgba(255,255,255,.62);
}

/* ─── RESPONSIVE ─── */
@media(max-width:1100px){
  .site-nav { padding:18px 22px; } .site-nav.scrolled { padding:10px 22px; }
  #hero {
    grid-template-columns:1fr;
    grid-auto-rows:auto;
    min-height:auto;
    padding-top:clamp(100px,18vw,130px);
    padding-bottom:clamp(28px,6vw,52px);
    gap:clamp(32px,6vw,52px);
  }
  /* Atmospheric layers span full stacked hero */
  .hero-grain,
  .hero-atmosphere {
    grid-column:1 / -1;
    grid-row:1 / -1;
  }
  /* Stage moves above the content on tablet & mobile */
  .hero-stage {
    grid-column:1; grid-row:1;
    order:1;
    height:clamp(440px, 76vw, 580px);
    width:100%;
    max-width:560px;
    margin:0 auto;
    translate:0 0 !important;
    padding-left:clamp(40px, 8vw, 60px);
    padding-right:clamp(40px, 8vw, 60px);
  }
  .hero-content {
    grid-column:1; grid-row:2;
    order:2;
    align-items:center;
    text-align:center;
    padding-right:0;
    max-width:38rem;
    margin-inline:auto;
    width:100%;
    transform:none !important;
    translate:0 0 !important;
  }
  .hero-contact-cta { align-self:center; }
  .hero-eyebrow { margin-inline:auto; }
  /* Decoration — tablet (stacked layout) */
  .hero-wash          { width:min(80%, 440px); left:50%; }
  .hero-deco-orbit    { width:min(78%, 440px); left:50%; }
  .hero-deco-leaves   { width:clamp(96px, 14vw, 140px); top:-6%;   right:-4%; }
  .hero-deco-palm     { width:clamp(100px, 13vw, 160px); bottom:-2%; left:-2%; }
  .hero-deco-cloud    { width:clamp(90px,  12vw, 130px); top:14%;   left:-2%;  }
  .hero-deco-cloud-2  { width:clamp(60px,  8vw, 90px);   top:8%;    right:36%; }
  .hero-deco-windchime{ width:clamp(70px,  9vw, 100px);  top:-2%;   right:24%; }
  .hero-deco-arch     { width:clamp(260px, 36vw, 420px); bottom:8%;  left:56%; }
  .hero-deco-planet-1 { width:clamp(72px,  9vw, 110px);  bottom:0%;  right:-1%; }
  .hero-deco-planet-2 { width:clamp(52px,  6vw, 76px);   top:6%;     right:1%; }
  .hero-deco-planet-3 { width:clamp(36px,  4.4vw, 52px); top:8%;     left:24%; }
  .hero-deco-planet-4 { width:clamp(36px,  4.4vw, 52px); bottom:14%; left:18%; }
  .hero-deco-planet-5 { width:clamp(44px,  5vw, 64px);   top:50%;    right:-1%; }
  .hero-deco-planet-6 { width:clamp(32px,  3.8vw, 46px); top:30%;    left:12%; }
  .hero-orb-1 { width:min(360px,85vw); height:min(360px,85vw); top:-60px; right:-40px; }
  .hero-orb-2 { width:min(240px,55vw); height:min(240px,55vw); left:4%; }
  .hero-orb-3 { width:min(160px,38vw); height:min(160px,38vw); top:42%; left:40%; }
  #contact { grid-template-columns:1fr; gap:60px; padding:100px 30px; }
  #materials {
    gap:clamp(32px,7vw,52px);
    padding-top:clamp(64px,12vw,100px);
    /* Less air before Philosophy on stacked layouts */
    padding-bottom:clamp(40px,8vw,72px);
  }
  /* Philosophy was still using 140px vertical padding here — tightens Materials→Philosophy */
  #philosophy {
    padding-top:clamp(56px,9vw,100px);
    padding-bottom:clamp(48px,8vw,88px);
  }
  .emrg-stage {
    display:flex;
    flex-direction:column;
    gap:clamp(22px,4vw,32px);
  }
  .emrg-scrolly { min-height:calc(280vh + 24vh); }
  .emrg-canvas {
    min-height:min(48vh,400px);
  }
  .landscape-header { flex-direction:column; align-items:flex-start; padding:clamp(48px,10vw,80px) 30px clamp(28px,6vw,40px); gap:clamp(20px,4vw,32px); }
  .landscape-header .landscape-intro {
    flex:none;
    max-width:100%;
    width:100%;
  }
  /* Stats: keep all 5 phases in one row (2-col grid was forcing 4+1 wrap) */
  .stats-row {
    grid-template-columns:repeat(5, minmax(0, 1fr));
  }
  .stat-block {
    border-bottom:none;
    border-right:1px solid var(--border-lt);
    padding:clamp(28px, 3.5vw, 44px) clamp(8px, 1.4vw, 18px);
  }
  .stat-block:last-child { border-right:none; }
  .stats-row .stat-num { font-size:clamp(1.2rem, 2vw, 1.75rem); }
  .stats-row .stat-label { font-size:.52rem; letter-spacing:.14em; }
  #hero,#closing,#philosophy,#materials,#journeys { padding-left:30px; padding-right:30px; }
  .footer-top { flex-direction:column; gap:24px; }
  footer { padding:48px 30px 28px; }
}
@media(max-width:900px){
  .nav-links { display:none; }
  .nav-burger { display:flex; }
  .nav-logo img {
    max-width:min(220px, calc(100vw - 120px));
  }
  .site-nav.scrolled .nav-logo img {
    max-width:min(200px, calc(100vw - 120px));
  }
}
@media(max-width:768px){
  .nav-logo img {
    max-height:32px;
    max-width:min(200px, calc(100vw - 80px));
  }
  .site-nav.scrolled .nav-logo img {
    max-height:28px;
    max-width:min(180px, calc(100vw - 80px));
  }
  .nav-drawer-name { font-size:1.2rem; }
  .form-row { grid-template-columns:1fr; }
  .contact-form { padding:28px 22px; }
  .contact-form-eyebrow { font-size:.95rem; }
  .footer-bottom { flex-direction:column; gap:14px; text-align:center; }
  #materials .emrg-canvas {
    min-height:220px;
    height:min(46vh,340px);
    border-radius:22px;
  }
  #materials {
    padding-bottom:clamp(28px,6vw,48px);
  }
  .emrg-hero-title { font-size:clamp(1.95rem,7.5vw,2.65rem); }
  .emrg-card-quote { font-size:0.95rem; }
  /* ════════════════════════════════════════════════════
     HERO / BANNER — Mobile redesign
     Visual composition first (floating scene), then the
     title block and CTA below for a stronger hero image
     hook on small screens.
  ════════════════════════════════════════════════════ */
  #hero {
    padding-top:clamp(96px,22vw,120px);
    padding-bottom:clamp(28px,7vw,56px);
    gap:clamp(22px,5vw,36px);
    padding-left:max(22px, env(safe-area-inset-left, 0px));
    padding-right:max(22px, env(safe-area-inset-right, 0px));
  }
  /* Composition on top, copy below (matches tablet ≤1100px) */
  .hero-stage   { order:1; grid-row:1; }
  .hero-content { order:2; grid-row:2; }

  .hero-eyebrow {
    font-size:.54rem;
    letter-spacing:.34em;
    margin-bottom:clamp(14px,3.6vw,20px);
    padding:6px 14px 6px 10px;
  }
  .hero-title {
    font-size:clamp(2.4rem,11vw,3.6rem);
    margin-bottom:clamp(14px,3.6vw,22px);
    line-height:1.05;
  }
  .hero-sub {
    font-size:.92rem;
    line-height:1.75;
    max-width:36ch;
    margin-inline:auto;
  }
  .hero-contact-cta {
    margin-top:clamp(20px,5vw,30px);
    padding:14px 32px;
  }

  /* Stage — compact, centred composition area */
  .hero-stage {
    height:clamp(320px, 70vw, 440px);
    min-height:0;
    width:100%;
    max-width:460px;
    margin:0 auto;
    padding:clamp(8px,3vw,18px);
    aspect-ratio:auto;
    perspective:none;
  }

  /* Hide layers that become visual noise on phones */
  .hero-deco-orbit,
  .hero-deco-cloud-2,
  .hero-deco-windchime,
  .hero-spark-3,
  .hero-spark-4 {
    display:none !important;
  }

  /* Wash centred on phone */
  .hero-wash {
    width:min(90%, 360px);
    left:50%;
  }

  /* Decoration — phones */
  .hero-deco-palm     { width:clamp(80px,  20vw, 130px); bottom:-1%; left:-3%; }
  .hero-deco-leaves   { width:clamp(70px,  16vw, 110px); top:-4%;    right:-4%; }
  .hero-deco-cloud    { width:clamp(60px,  14vw, 90px);  top:14%;    left:-2%; z-index:5; }
  .hero-deco-arch     { width:clamp(200px, 90vw, 330px); bottom:8%;  left:56%; }
  .hero-deco-planet-1 { width:clamp(56px,  14vw, 90px);  bottom:0%;  right:-2%; }
  .hero-deco-planet-2 { width:clamp(40px,  10vw, 64px);  top:4%;     right:0%; }
  .hero-deco-planet-3 { width:clamp(28px,  6vw, 42px);   top:8%;     left:26%; }
  .hero-deco-planet-4 { display:none !important; }
  .hero-deco-planet-5 { width:clamp(34px,  8vw, 50px);   top:50%;    right:-2%; }
  .hero-deco-planet-6 { display:none !important; }
  .hero-spark-1 { top:34%; left:30%; }
  .hero-spark-2 { top:60%; left:54%; }
  /* Less space between Philosophy (carousel) and this card */
  #closing {
    padding-top:clamp(32px,7vw,56px);
    padding-bottom:clamp(48px,10vw,88px);
  }
  .closing-inner {
    padding:clamp(36px,7vw,56px) clamp(20px,5vw,28px);
    border-radius:20px;
  }
  .closing-signature {
    gap:12px;
    padding:11px 18px;
  }
  .closing-signature-text { font-size:.78rem; }
  .btn-dark, .btn-outline, .btn-gold, .btn-warm { padding:14px 28px; font-size:.62rem; }
  .hero-contact-cta {
    align-self:center;
    margin-top:clamp(24px,6vw,40px);
    padding:16px 40px;
  }
  /* One horizontal row on phone — swipe to see all 5 */
  .stats-row {
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    gap:0;
  }
  .stat-block {
    flex:0 0 min(38vw, 168px);
    min-width:112px;
    scroll-snap-align:start;
    border-bottom:none;
    border-right:1px solid var(--border-lt);
    padding:28px 12px;
  }
  .stats-row .stat-block:last-child {
    border-right:1px solid var(--border-lt);
    padding-inline-end:max(16px, env(safe-area-inset-right, 0px));
  }
  .stats-row .stat-num { font-size:clamp(1.1rem, 4.2vw, 1.45rem); }
  .stats-row .stat-label { font-size:.5rem; letter-spacing:.12em; }

  /* The Full Landscape — mobile: edge-to-edge mural, tighter intro */
  #landscape .landscape-header {
    padding-left:max(20px, env(safe-area-inset-left, 0px));
    padding-right:max(20px, env(safe-area-inset-right, 0px));
    padding-top:clamp(40px, 11vw, 72px);
    padding-bottom:clamp(18px, 5vw, 28px);
    gap:clamp(14px, 4vw, 22px);
    align-items:stretch;
  }
  #landscape .landscape-header > div { width:100%; min-width:0; }
  #landscape .landscape-header .section-heading {
    font-size:clamp(1.75rem, 7.4vw, 2.35rem);
    line-height:1.06;
  }
  #landscape .landscape-intro {
    font-size:0.9rem;
    line-height:1.72;
  }
  #landscape .wall-strip {
    width:100%;
    border-left:none;
    border-right:none;
    /* Hint compositor for smoother sub-pixel drag */
    transform:translateZ(0);
    -webkit-transform:translateZ(0);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    will-change:transform;
  }
  #landscape .wall-pan {
    /* Keep panel layered on its own for cleaner touch repaint */
    transform:translateZ(0);
    -webkit-transform:translateZ(0);
    will-change:transform;
  }
  #landscape .wall-track img {
    display:block;
    width:auto;
    max-width:none;
    height:clamp(220px, 56vw, 360px);
    -webkit-user-drag:none;
    user-drag:none;
  }

  /* Philosophy — tighter stack on phones + full-bleed carousel */
  #philosophy {
    padding-top:clamp(44px,10vw,72px);
    padding-bottom:clamp(32px,7vw,56px);
  }
  #philosophy .phil-statement {
    margin-bottom:clamp(26px,4.5vw,40px);
  }
  #philosophy .phil-sep {
    margin-bottom:clamp(24px,4vw,36px);
  }
  #philosophy .phil-body {
    margin-bottom:clamp(24px,4vw,36px);
  }
  /* Philosophy — Our Projects: edge-to-edge slides, larger imagery, no dot row */
  #philosophy .phil-projects {
    max-width:none;
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    margin-bottom:clamp(12px,3.5vw,28px);
    padding-left:max(0px, env(safe-area-inset-left, 0px));
    padding-right:max(0px, env(safe-area-inset-right, 0px));
    box-sizing:border-box;
  }
  #philosophy .phil-projects-title {
    padding-left:clamp(20px, 5vw, 32px);
    padding-right:clamp(20px, 5vw, 32px);
  }
  #philosophy .phil-carousel-dots {
    display:none !important;
  }
  #philosophy .phil-carousel {
    width:100%;
    max-width:100%;
  }
  #philosophy .phil-carousel-viewport {
    border-radius:clamp(12px, 2.8vw, 18px);
    touch-action:pan-x pinch-zoom;
    min-width:0;
    margin-inline:clamp(16px, 5vw, 28px);
    width:auto;
    justify-self:stretch;
  }
  #philosophy .phil-project-inner img {
    aspect-ratio:auto;
    min-height:0;
    object-fit:contain;
    transform:scale(1);
  }
}
@media(prefers-reduced-motion:reduce){
  *, *::before, *::after {
    animation-duration:.001s !important;
    transition-duration:.001s !important;
    animation-iteration-count:1 !important;
  }
  html { scroll-behavior:auto; }
}