/* ============================================================================
   THE GRADUATE HOUSE — v3. Real media, Scout-tier kinetic. Navy→gold→navy arc.
   Real photos (media/real), real videos (media/vid), real copy, motion everywhere.
   ========================================================================== */
:root{
  --navy-900:#080D16; --navy-800:#0F1724; --navy-700:#131E33; --navy-600:#1A2744; --navy-500:#2B4570;
  --gold-600:#B8922E; --gold-500:#D4A843; --gold-400:#E0B655;
  --cream-100:#E0D9CB; --cream-200:#D8D0BE; --cream-300:#C8C0AE; --cream-400:#C0B8A6;
  --brown:#8B7355; --ink-900:#1A1A1A; --paper:#F7F3EA;
  --bg:var(--navy-900); --fg:var(--cream-100); --accent:var(--gold-500);
  --maxw:1240px; --ease-settle:cubic-bezier(.2,.7,.2,1); --ease-weight:cubic-bezier(.65,.05,.36,1);
  --fs-eyebrow:clamp(.72rem,.68rem + .3vw,.82rem);
  --fs-body:clamp(1rem,.96rem + .4vw,1.18rem);
  --fs-h2:clamp(2rem,1.3rem + 3.6vw,4.25rem);
  --fs-hero:clamp(2.15rem,1rem + 4.7vw,4.7rem);
  --fs-band:clamp(2.1rem,1rem + 4.4vw,4.6rem);
  --fs-count:clamp(2.6rem,1rem + 5vw,5rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:transparent; color:var(--fg); font-family:Inter,system-ui,"Segoe UI",sans-serif;
  font-size:var(--fs-body); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
h1,h2,h3,.display{font-family:Fraunces,Georgia,serif; font-weight:600; line-height:1.05; letter-spacing:-.02em; margin:0}
p{margin:0 0 1em} a{color:inherit; text-decoration:none} img{max-width:100%; display:block}

#bg-arc{position:fixed; inset:0; z-index:-3; background:var(--bg)}
#glow{position:fixed; inset:0; z-index:-2; pointer-events:none; background:radial-gradient(60vw 50vw at 82% -6%, rgba(224,182,85,.20), transparent 60%); mix-blend-mode:screen; opacity:1}
#grain{position:fixed; inset:0; z-index:1000; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>")}
#cursor{position:fixed; top:0; left:0; width:30px; height:30px; border:1.5px solid var(--gold-500); border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; z-index:1200; opacity:0; transition:width .22s var(--ease-settle),height .22s var(--ease-settle),background-color .22s,opacity .3s}
#cursor.on{opacity:1} #cursor.grow{width:56px; height:56px; background:rgba(212,168,67,.12)}
#cursor-dot{position:fixed; top:0; left:0; width:5px; height:5px; background:var(--gold-500); border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; z-index:1201; opacity:0}
#cursor-dot.on{opacity:1}
@media (pointer:fine){ .cursor-hide-native{cursor:none} }

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,56px)}
.eyebrow{font-family:Inter; font-size:var(--fs-eyebrow); letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:var(--accent); margin:0 0 1.1em}
.eyebrow.on-cream{color:var(--navy-700)}
.h2{font-size:var(--fs-h2)}
.lead{font-size:clamp(1.05rem,1rem + .5vw,1.35rem); max-width:44ch; color:color-mix(in srgb,var(--fg) 88%,transparent)}
.body{max-width:52ch; color:color-mix(in srgb,var(--fg) 80%,transparent)}
section{position:relative; padding:clamp(84px,12vh,150px) 0; scroll-margin-top:64px}
.reveal{opacity:0; transform:translateY(16px); transition:opacity .9s var(--ease-settle),transform .9s var(--ease-settle)}
.reveal.in{opacity:1; transform:none}
.no-gsap .reveal{opacity:1; transform:none}
.clip{clip-path:inset(0 0 100% 0); transition:clip-path 1s var(--ease-weight)}
.clip.in{clip-path:inset(0 0 0% 0)} .no-gsap .clip{clip-path:none}
.bgvid{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1}
/* ambient background videos keep playing even under reduced-motion (owner intent — a looping fire/water bg is ambient, not vestibular motion); heavy parallax/zoom/reveals stay reduced-motion-safe */

.btn{display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:1rem; padding:15px 26px; border-radius:12px; border:1.5px solid transparent; cursor:pointer; transition:transform .22s var(--ease-settle),box-shadow .22s,background-color .22s,color .22s; font-family:Inter; min-height:44px}
.btn .arw{transition:transform .22s var(--ease-settle)}
.btn-primary{background:var(--gold-500); color:var(--navy-800); box-shadow:0 1px 0 rgba(0,0,0,.18),0 8px 18px -8px rgba(0,0,0,.5),0 14px 40px -16px rgba(212,168,67,.75)}
.btn-primary:hover{transform:translateY(-3px)} .btn-primary:hover .arw{transform:translateX(5px)}
.btn-navy{background:var(--navy-700); color:var(--gold-400); box-shadow:0 1px 0 rgba(0,0,0,.25),0 12px 30px -12px rgba(8,13,22,.7)}
.btn-navy:hover{transform:translateY(-3px); background:var(--navy-800)} .btn-navy:hover .arw{transform:translateX(5px)}
.btn-ghost{background:transparent; color:var(--fg); border-color:color-mix(in srgb,var(--gold-500) 70%,transparent)}
.btn-ghost:hover{background:color-mix(in srgb,var(--gold-500) 14%,transparent)}

/* NAV */
#nav{position:fixed; top:0; left:0; right:0; z-index:1100; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px clamp(20px,5vw,56px); transition:padding .3s var(--ease-settle),background-color .3s,box-shadow .3s,border-color .3s; border-bottom:1px solid transparent}
#nav .brand{display:flex; align-items:center; gap:11px; font-family:Fraunces; font-weight:700; letter-spacing:.03em; font-size:1.02rem; color:var(--cream-100); text-transform:uppercase; min-width:0}
#nav .brand .mark{width:34px; height:34px; border-radius:50%; object-fit:contain; background:transparent; flex-shrink:0; box-shadow:0 0 0 1px color-mix(in srgb,var(--gold-500) 24%,transparent)}
#nav .links{display:none; gap:26px; font-size:.9rem; color:color-mix(in srgb,var(--cream-100) 82%,transparent); font-weight:500}
#nav .links a{position:relative; padding:4px 0}
#nav .links a::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--gold-500); transform:scaleX(0); transform-origin:center; transition:transform .3s var(--ease-settle)}
#nav .links a:hover{color:var(--cream-100)} #nav .links a:hover::after{transform:scaleX(1)}
#nav .pill{background:var(--gold-500); color:var(--navy-800); font-weight:700; font-size:.88rem; padding:12px 20px; min-height:44px; display:inline-flex; align-items:center; border-radius:999px; white-space:nowrap; flex-shrink:0}
#nav.scrolled{padding:11px clamp(20px,5vw,56px); background:color-mix(in srgb,var(--cream-100) 96%,transparent); border-bottom-color:color-mix(in srgb,var(--navy-700) 18%,transparent); box-shadow:0 10px 30px -20px rgba(8,13,22,.6); backdrop-filter:blur(8px)}
#nav.scrolled .brand{color:var(--navy-800)} #nav.scrolled .links{color:color-mix(in srgb,var(--navy-700) 82%,transparent)}
.hamb{display:grid; gap:5px; place-content:center; min-width:44px; min-height:44px; background:none; border:0; cursor:pointer; flex-shrink:0}
.hamb span{width:24px; height:2px; background:var(--cream-100); display:block}
#nav.scrolled .hamb span{background:var(--navy-800)}
@media(min-width:960px){ #nav .links{display:flex} .hamb{display:none} }
#navMenu{position:fixed; inset:0; z-index:1090; background:color-mix(in srgb,var(--navy-900) 97%,transparent); backdrop-filter:blur(6px); display:flex; flex-direction:column; justify-content:center; gap:6px; padding:0 40px; transform:translateY(-100%); transition:transform .4s var(--ease-weight); visibility:hidden}
#navMenu.open{transform:none; visibility:visible}
#navMenu a{font-family:Fraunces; font-size:clamp(1.6rem,1rem + 4vw,2.4rem); color:var(--cream-100); padding:13px 0; border-bottom:1px solid color-mix(in srgb,var(--cream-100) 12%,transparent)}
#navMenu a.cta{color:var(--gold-400)}
body.menu-open{overflow:hidden}

/* HERO */
#hero{min-height:100svh; display:flex; align-items:center; padding-top:120px; overflow:hidden}
#hero .plate{position:absolute; inset:-8% 0; z-index:-1}
#hero .plate img{width:100%; height:100%; object-fit:cover}
#hero .scrim{position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(8,13,22,.40) 0%,rgba(8,13,22,.16) 44%,rgba(19,30,51,.80) 100%),linear-gradient(90deg,rgba(8,13,22,.50) 0%,rgba(8,13,22,.18) 44%,transparent 74%),radial-gradient(70vw 60vw at 78% 8%,rgba(224,182,85,.14),transparent 55%)}
#hero .inner{position:relative; z-index:2; width:min(1180px,92vw); margin:0; padding:0 clamp(20px,5vw,56px); text-align:left}
#hero h1{font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:clamp(2.5rem,7vw,5.4rem); color:#F4EEE0; line-height:1.02; letter-spacing:-.015em; max-width:16ch; text-wrap:balance; text-shadow:0 4px 40px rgba(8,13,22,.5)}
#hero .sub{margin-top:26px; max-width:46ch; color:#E7E0D2; font-size:clamp(1.02rem,1.9vw,1.28rem); line-height:1.5}
#hero .badge{display:inline-flex; flex-wrap:wrap; gap:14px; row-gap:6px; align-items:center; margin-top:22px; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-400); font-weight:600}
#hero .badge b{color:#F4EEE0; font-weight:700}
#hero .cta-row{margin-top:30px; display:flex; align-items:center; gap:16px; flex-wrap:wrap}
#hero .reassure{margin-top:16px; font-size:.9rem; color:color-mix(in srgb,#E7E0D2 78%,transparent)}
.scrollcue{position:absolute; left:50%; bottom:24px; transform:translateX(-50%); z-index:2; display:grid; justify-items:center; gap:8px; color:color-mix(in srgb,var(--gold-400) 85%,transparent); font-size:.68rem; letter-spacing:.24em; text-transform:uppercase}
.scrollcue .line{width:1px; height:42px; background:linear-gradient(var(--gold-400),transparent); animation:cue 2.4s var(--ease-weight) infinite}
@keyframes cue{0%{transform:scaleY(.3);transform-origin:top;opacity:.4}50%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.3);transform-origin:bottom;opacity:.4}}

/* PHOTO MARQUEE */
#marquee-sec{padding:clamp(40px,7vh,90px) 0; overflow:hidden}
.pm-head{max-width:var(--maxw); margin:0 auto 26px; padding:0 clamp(20px,5vw,56px)}
.pmrow{display:flex; gap:18px; width:max-content; will-change:transform}
.pmrow.a{animation:pmL 48s linear infinite}
.pmrow.b{animation:pmR 54s linear infinite; margin-top:18px}
#marquee-sec:hover .pmrow,#marquee-sec:focus-within .pmrow{animation-play-state:paused}
@keyframes pmL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes pmR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.pm{flex:0 0 clamp(240px,32vw,420px); aspect-ratio:16/10; border-radius:14px; overflow:hidden; box-shadow:0 20px 40px -24px rgba(8,13,22,.7); position:relative}
.pm img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-settle)}
.pm:hover img{transform:scale(1.06)}
@media (prefers-reduced-motion:reduce){ .pmrow{animation:none!important; flex-wrap:wrap; width:auto; justify-content:center} .pmrow .pm:nth-child(n+9){display:none} }

/* STATS */
#stats{text-align:center}
#stats .grid{display:grid; grid-template-columns:repeat(2,1fr); gap:34px 20px; max-width:960px; margin:36px auto 0}
@media(min-width:720px){ #stats .grid{grid-template-columns:repeat(5,1fr)} }
#stats .stat b{display:block; font-family:Fraunces; font-weight:800; font-size:var(--fs-count); color:var(--gold-400); font-variant-numeric:tabular-nums; line-height:1}
#stats .stat>span{font-size:.86rem; letter-spacing:.1em; text-transform:uppercase; color:color-mix(in srgb,var(--cream-100) 72%,transparent)}

/* big statement sections */
.statement{text-align:center}
.statement .big{font-family:Fraunces; font-weight:500; font-size:var(--fs-band); line-height:1.14; max-width:22ch; margin:0 auto; text-wrap:balance}
.statement .big em{font-style:italic; color:var(--gold-400)}

/* THE HOUSE */
#the-house .grid{display:grid; grid-template-columns:1fr; gap:34px; align-items:center}
@media(min-width:900px){ #the-house .grid{grid-template-columns:1.05fr .95fr; gap:56px} }
.media{position:relative; overflow:hidden; border-radius:16px; background:var(--ph,linear-gradient(135deg,var(--navy-700),var(--navy-500))); box-shadow:0 30px 60px -30px rgba(8,13,22,.7)}
.media img{width:100%; height:100%; object-fit:cover}
.mask img{clip-path:inset(0 0 100% 0); transform:scale(1.06); transition:clip-path 1s var(--ease-weight),transform 1.2s var(--ease-weight)}
.mask.in img{clip-path:inset(0 0 0% 0); transform:scale(1)} .no-gsap .mask img{clip-path:none; transform:none}
#the-house .hero-shot{aspect-ratio:16/11}
#the-house .thumbs{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px}
#the-house .thumbs .media{aspect-ratio:4/5}

/* RESIDENCE TOUR (horizontal pin) */
#residence .head{max-width:min(92vw,820px); margin:0 auto 8px; text-align:center}
#residence .h2{color:var(--navy-700)} #residence .sub{color:color-mix(in srgb,var(--navy-800) 78%,transparent); max-width:56ch; margin:0 auto}
.pin{position:relative; height:100svh; display:flex; align-items:center; overflow:hidden}
.track{display:flex; gap:26px; padding:0 max(20px,calc((100vw - var(--maxw))/2 + 20px)); outline:none}
.panel{position:relative; flex:0 0 clamp(260px,44vw,460px); aspect-ratio:3/4; border-radius:16px; overflow:hidden; box-shadow:0 30px 60px -30px rgba(8,13,22,.7); background:linear-gradient(135deg,var(--navy-700),var(--navy-500))}
.panel img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.panel .veil{position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,13,22,.05),rgba(8,13,22,.72))}
.panel .txt{position:absolute; left:22px; right:22px; bottom:22px; color:#F4EEE0}
.panel .rn{font-family:Fraunces; font-weight:700; font-size:1.6rem; color:#F6F0E2}
.panel .rl{font-size:.95rem; margin-top:4px; color:var(--gold-400)}
.is-mobile-track .pin{height:auto; display:block}
.is-mobile-track .track{overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:18px}
.is-mobile-track .panel{scroll-snap-align:center}
.dots{display:none; justify-content:center; flex-wrap:wrap; gap:2px; margin-top:10px}
.dots button{width:44px; height:44px; padding:18px; background-clip:content-box; box-sizing:border-box; border:0; border-radius:50%; background-color:color-mix(in srgb,var(--navy-700) 55%,transparent); cursor:pointer}
.dots button.active{background-color:var(--gold-600); transform:scale(1.25)}
.is-mobile-track .dots{display:flex}

/* MISSION */
#mission .body{color:color-mix(in srgb,var(--cream-100) 82%,transparent); max-width:none}
.mission-cols{display:grid; grid-template-columns:1fr; gap:32px; margin-top:40px}
@media(min-width:800px){ .mission-cols{grid-template-columns:1fr 1fr; gap:56px} }
.mission-quote{margin:48px 0 0; border-left:2px solid var(--gold-500); padding-left:28px; font-family:Fraunces; font-style:italic; font-size:clamp(1.3rem,1rem + 1.6vw,2rem); line-height:1.4; color:color-mix(in srgb,var(--cream-100) 92%,transparent); max-width:44ch}

/* APPROACH */
.approach-grid{display:grid; grid-template-columns:1fr; gap:20px; margin-top:44px}
@media(min-width:720px){ .approach-grid{grid-template-columns:1fr 1fr} }
@media(min-width:1040px){ .approach-grid{grid-template-columns:repeat(3,1fr)} }
.approach-card{background:color-mix(in srgb,var(--paper) 72%,transparent); border:1px solid color-mix(in srgb,var(--navy-700) 12%,transparent); border-radius:14px; padding:26px 24px; box-shadow:0 20px 40px -30px rgba(8,13,22,.5)}
.approach-card h3{font-family:Fraunces; font-size:1.28rem; color:var(--navy-700); margin:0 0 10px}
.approach-card p{color:color-mix(in srgb,var(--navy-800) 80%,transparent); font-size:.97rem; line-height:1.6; margin:0}

/* full-bleed bands */
.band{min-height:min(86svh,720px); display:grid; place-items:center; text-align:center; position:relative; overflow:hidden; padding:0}
.band .plate{position:absolute; inset:-8% 0; z-index:0} .band .plate img{width:100%; height:100%; object-fit:cover}
.band .veil{position:absolute; inset:0; z-index:1}
.band .inner{position:relative; z-index:2; max-width:min(92vw,760px); padding:0 24px}
.band .eyebrow{color:var(--gold-400); justify-self:center}
.band .line{font-family:Fraunces; font-weight:500; font-size:var(--fs-band); line-height:1.1; color:#F6F0E2; text-wrap:balance}
.band .sub{margin-top:16px; color:color-mix(in srgb,#F6F0E2 82%,transparent); font-size:1.05rem; max-width:36ch; margin-left:auto; margin-right:auto}
#firepit .veil{background:radial-gradient(46% 46% at 50% 74%,rgba(255,150,66,.30),transparent 64%),linear-gradient(180deg,rgba(8,13,22,.60) 0%,rgba(8,13,22,.54) 44%,rgba(8,13,22,.30) 100%),linear-gradient(90deg,rgba(8,13,22,.20),transparent 24%,transparent 76%,rgba(8,13,22,.20))}
#backyard .veil{background:radial-gradient(80% 120% at 50% 8%,rgba(224,182,85,.10),transparent 55%),linear-gradient(180deg,rgba(8,13,22,.34) 0%,rgba(8,13,22,.30) 45%,rgba(8,13,22,.70) 100%),linear-gradient(90deg,rgba(8,13,22,.20),transparent 24%,transparent 76%,rgba(8,13,22,.20))}

/* BROTHERHOOD polaroid wall */
#brotherhood{overflow:hidden}
#brotherhood .head{text-align:center; max-width:min(92vw,900px); margin:0 auto 12px}
#brotherhood .h2{color:var(--navy-700)} #brotherhood .sub{color:color-mix(in srgb,var(--navy-800) 80%,transparent); max-width:52ch; margin:0 auto}
.wall{position:relative; margin:44px auto 0; max-width:1120px; min-height:640px}
.polaroid{position:absolute; width:var(--w,220px); background:var(--paper); padding:12px 12px 46px; border-radius:3px; box-shadow:0 14px 30px -12px rgba(8,13,22,.55),0 2px 6px rgba(8,13,22,.25); transform:translate(var(--dx,0px),var(--dy,46px)) rotate(calc(var(--r,0deg) * .35)) scale(.9); opacity:0; transition:transform .82s cubic-bezier(.22,1.12,.4,1),opacity .7s var(--ease-settle),box-shadow .3s}
.polaroid.in{opacity:1; transform:translate(0,0) rotate(var(--r,0deg)) scale(1)}
.no-gsap .polaroid{opacity:1; transform:translate(0,0) rotate(var(--r,0deg)) scale(1)}
.polaroid .pic{position:relative; aspect-ratio:1/1; overflow:hidden; background:linear-gradient(135deg,var(--navy-700),var(--cream-300))}
.polaroid .pic img{width:100%; height:100%; object-fit:cover}
.polaroid .cap{position:absolute; left:0; right:0; bottom:12px; text-align:center; font-family:"Bradley Hand","Segoe Script",cursive; font-size:1.02rem; color:#3a3630; transform:rotate(-1.2deg)}
.polaroid .tape{position:absolute; top:-11px; left:50%; width:74px; height:26px; transform:translateX(-50%) rotate(var(--tr,-3deg)); background:linear-gradient(180deg,rgba(224,217,203,.86),rgba(200,192,174,.7)); opacity:.85}
.polaroid:hover{z-index:40; box-shadow:0 26px 50px -14px rgba(8,13,22,.6)}
/* DISCREET treatment for real resident photos */
.polaroid--real .pic img{filter:sepia(.42) saturate(.78) contrast(.95) brightness(1.04) blur(3px); transition:filter .45s var(--ease-settle)}
.polaroid--real .pic::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(19,30,51,.26),rgba(139,115,85,.22)); mix-blend-mode:multiply}
@media(hover:hover){ .polaroid--real:hover .pic img{filter:sepia(.3) saturate(.9) contrast(.98) brightness(1.03) blur(1.4px)} }
.privacy-note{text-align:center; margin:26px auto 0; font-size:1.12rem; color:color-mix(in srgb,var(--navy-800) 88%,transparent); max-width:60ch}
.privacy-note em{font-style:italic}

/* DETAILS band */
#details .head{text-align:center; max-width:40ch; margin:0 auto}
#details .h2{color:var(--navy-700)}
.det-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:26px 20px; margin-top:44px}
@media(min-width:760px){ .det-grid{grid-template-columns:repeat(4,1fr)} }
.det{display:flex; flex-direction:column; width:100%; justify-self:stretch; margin:0}
.det-pic{position:relative; width:100%; aspect-ratio:4/5; border-radius:14px; overflow:hidden; box-shadow:0 22px 42px -26px rgba(8,13,22,.55); background:linear-gradient(135deg,var(--navy-700),var(--cream-300))}
.det-pic img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-settle)}
@media(hover:hover){ .det:hover .det-pic img{transform:scale(1.05)} }
.det-cap{margin-top:12px; text-align:center; font-size:.94rem; font-weight:600; color:var(--navy-700); line-height:1.32; padding:0 4px}

/* FAMILY */
#family .grid{display:grid; grid-template-columns:1fr; gap:34px; align-items:center}
@media(min-width:900px){ #family .grid{grid-template-columns:.95fr 1.05fr; gap:56px} }
#family .media{aspect-ratio:3/2} #family .eyebrow,#family .h2,#family .body{color:var(--navy-800)} #family .h2{max-width:18ch}

/* THE ASK */
#the-ask{text-align:center; overflow:hidden}
#the-ask .plate{position:absolute; inset:-10% 0; z-index:-1; opacity:.55} #the-ask .plate img{width:100%; height:100%; object-fit:cover}
#the-ask .scrim{position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(8,13,22,.55),rgba(8,13,22,.85))}
#the-ask h2{font-size:var(--fs-h2); color:#F4EEE0; max-width:16ch; margin:0 auto}
#the-ask .sub{max-width:46ch; margin:20px auto 0; color:#E7E0D2}
#the-ask .cta-row{margin-top:32px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap}
#the-ask .contact{margin-top:24px; font-size:.92rem; letter-spacing:.03em; color:color-mix(in srgb,var(--gold-400) 92%,transparent)}
#the-ask .contact a{text-decoration:underline}

/* LEGAL */
.legal-grid{display:grid; grid-template-columns:1fr; gap:14px; margin-top:40px}
@media(min-width:720px){ .legal-grid{grid-template-columns:1fr 1fr} }
@media(min-width:1040px){ .legal-grid{grid-template-columns:repeat(3,1fr)} }
.legal-card{display:block; padding:22px; border:1px solid color-mix(in srgb,var(--gold-500) 20%,transparent); border-radius:12px; background:color-mix(in srgb,var(--navy-600) 32%,transparent); transition:transform .2s,border-color .2s}
.legal-card:hover{transform:translateY(-3px); border-color:var(--gold-500)}
.legal-card h3{font-family:Fraunces; font-size:1.05rem; color:var(--gold-400); margin:0 0 8px}
.legal-card span{color:color-mix(in srgb,var(--cream-100) 76%,transparent); font-size:.9rem; line-height:1.5}

/* FOOTER */
footer{padding:0 0 60px; color:var(--cream-100)}
.marquee{overflow:hidden; border-top:1px solid color-mix(in srgb,var(--gold-500) 22%,transparent); border-bottom:1px solid color-mix(in srgb,var(--gold-500) 22%,transparent); padding:26px 0; margin-bottom:56px}
.marquee .row{display:inline-flex; white-space:nowrap; animation:scroll 26s linear infinite}
.marquee:hover .row{animation-play-state:paused}
.marquee span{font-family:Fraunces; font-weight:700; font-size:clamp(1.4rem,1rem + 2vw,2.4rem); color:var(--gold-500); padding:0 .5em}
.marquee .dot{color:color-mix(in srgb,var(--gold-500) 55%,transparent)}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.f-top{display:flex; flex-direction:column; align-items:center; gap:24px; margin-bottom:44px; text-align:center}
@media(min-width:800px){ .f-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; align-items:center; text-align:left} .f-top .f-brand{grid-column:1 / 3} .f-top .f-logo{grid-column:3; justify-self:center} }
.f-logo{background:transparent; border-radius:50%; padding:0; display:inline-flex}
.f-logo img{height:120px; width:120px; object-fit:contain; border-radius:50%; box-shadow:0 12px 32px -12px rgba(0,0,0,.6),0 0 0 1px color-mix(in srgb,var(--gold-500) 26%,transparent)}
.f-logo{gap:22px; align-items:center}
.f-mash{display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding-left:22px; border-left:1px solid rgba(255,255,255,.25)}
.f-mash img{height:36px; width:auto; border-radius:0; box-shadow:none}
.f-mash a{font-family:Inter; font-size:11px; letter-spacing:1.4px; text-transform:uppercase; color:#8fa3c8; text-decoration:none}
.f-mash a:hover{color:#c9d6ef; text-decoration:underline}
.f-grid{display:grid; grid-template-columns:1fr; gap:36px}
@media(min-width:800px){ .f-grid{grid-template-columns:1.4fr 1fr 1fr 1fr} }
.f-brand p{margin-top:2px; max-width:34ch; color:color-mix(in srgb,var(--cream-100) 72%,transparent); font-size:.95rem}
.fcol h3{font-family:Inter; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-400); margin:0 0 14px; font-weight:600}
.fcol a{display:block; padding:10px 0; color:color-mix(in srgb,var(--cream-100) 80%,transparent); font-size:.95rem}
.fcol a:hover{color:var(--cream-100)}
.legal-line{margin-top:48px; padding-top:22px; border-top:1px solid color-mix(in srgb,var(--cream-100) 12%,transparent); font-size:.82rem; color:color-mix(in srgb,var(--cream-100) 58%,transparent)}

.skip{position:absolute; left:-999px; top:0; z-index:2000; background:var(--gold-500); color:var(--navy-900); padding:10px 16px; border-radius:8px}
.skip:focus{left:16px; top:16px}
:focus-visible{outline:2px solid var(--navy-900); outline-offset:2px; box-shadow:0 0 0 4px rgba(224,182,85,.9); border-radius:4px}

@media(max-width:900px){
  #nav .brand{font-size:.82rem; white-space:nowrap; gap:8px} #nav{padding:14px 18px}
  #grain{display:none} #glow{mix-blend-mode:normal; opacity:.35}
  .wall{min-height:0; text-align:center}
  .polaroid{position:relative; left:auto!important; top:auto!important; right:auto!important; width:min(78vw,320px)!important; margin:0 auto 26px!important; display:block}
  .polaroid:nth-child(odd){--r:-4deg} .polaroid:nth-child(even){--r:4deg}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important; scroll-behavior:auto!important}
  .reveal{opacity:1!important; transform:none!important} .clip,.mask img{clip-path:none!important; transform:none!important}
  .polaroid{opacity:1!important; transform:rotate(var(--r,0deg))!important; position:relative!important; margin:12px!important; display:inline-block!important}
  #cursor,#cursor-dot,#cursor-label{display:none!important}
  /* word-ribbon: Doug's explicit choice (2026-07-14) — keep it SCROLLING even under reduced-motion, same exemption the ambient background fire/water videos already have. Re-assert the animation at higher specificity than the global *{animation:none} kill above so it wins. */
  .marquee{overflow:hidden!important}
  .marquee .row{animation:scroll 26s linear infinite !important; flex-wrap:nowrap!important; white-space:nowrap!important; justify-content:flex-start!important}
}
/* --- ultrareview polish --- */
@media(max-width:600px){ #nav .pill{display:inline-flex; font-size:.78rem; padding:10px 14px; letter-spacing:0} }
.approach-card{transition:transform .24s var(--ease-settle),box-shadow .24s var(--ease-settle),border-color .24s}
@media(hover:hover){ .approach-card:hover{transform:translateY(-4px); box-shadow:0 30px 56px -30px rgba(8,13,22,.55); border-color:color-mix(in srgb,var(--gold-500) 40%,transparent)} }
.approach-grid>.reveal:nth-child(2){transition-delay:.07s} .approach-grid>.reveal:nth-child(3){transition-delay:.14s}
.approach-grid>.reveal:nth-child(4){transition-delay:.21s} .approach-grid>.reveal:nth-child(5){transition-delay:.28s}
.approach-grid>.reveal:nth-child(6){transition-delay:.35s}
@media (prefers-reduced-motion:reduce){ .approach-grid>.reveal{transition-delay:0s!important} }
/* --- elevation round 1 --- */
/* H1 word-mask reveal (failsafe: words visible unless JS arms them) */
#hero h1 .hw{display:inline-block; overflow:hidden; vertical-align:top; line-height:1.05; padding-bottom:.12em; margin-bottom:-.12em}
#hero h1 .hw>span{display:inline-block; transition:transform .9s var(--ease-weight)}
#hero h1.stagger-armed .hw>span{transform:none}
#hero h1.stagger-armed.go .hw>span{transform:none}
#hero h1.stagger-armed .hw:nth-child(1)>span{transition-delay:.05s} #hero h1.stagger-armed .hw:nth-child(2)>span{transition-delay:.11s} #hero h1.stagger-armed .hw:nth-child(3)>span{transition-delay:.17s} #hero h1.stagger-armed .hw:nth-child(4)>span{transition-delay:.23s} #hero h1.stagger-armed .hw:nth-child(5)>span{transition-delay:.29s}
#hero h1.stagger-armed .hw:nth-child(6)>span{transition-delay:.35s} #hero h1.stagger-armed .hw:nth-child(7)>span{transition-delay:.41s} #hero h1.stagger-armed .hw:nth-child(8)>span{transition-delay:.47s} #hero h1.stagger-armed .hw:nth-child(9)>span{transition-delay:.53s} #hero h1.stagger-armed .hw:nth-child(10)>span{transition-delay:.59s}
@media (prefers-reduced-motion:reduce){ #hero h1 .hw>span{transform:none!important} }
/* hero video breathing */
#hero .bgvid,#hero .plate img{transform:none}
/* marquee edge-fade + per-photo lift & gold ring */
.pm-rows{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.pm{transition:box-shadow .4s var(--ease-settle),transform .5s var(--ease-settle)}
.pm:hover{transform:translateY(-4px); box-shadow:0 30px 56px -22px rgba(8,13,22,.82),0 0 0 1.5px color-mix(in srgb,var(--gold-500) 55%,transparent)}
@media (prefers-reduced-motion:reduce){ .pm-rows{-webkit-mask-image:none; mask-image:none} }

/* ============================================================
   A FIRST LOOK — MOBILE (<=767px)
   Desktop is untouched: it keeps the two opposing marquee rows.
   On a phone the auto-scroll is replaced by ONE swipeable row the
   visitor drives with their thumb. Same section height as before,
   but each photo is roughly twice the area.
   This stays a GLANCE — no room names, no captions. The full
   room-by-room tour is #residence further down the page.
   ============================================================ */
/* Hidden on desktop. Only phones get the swipe hint and the position rail. */
.pm-hint,.pm-rail{display:none}

@media (max-width:767px){
  /* --- the scroller -------------------------------------------------
     .pm-rows is the scroll container. The two .pmrow divs sit inside it
     side by side, so all 16 photos form one continuous horizontal track.
     Nested flex is used on purpose instead of display:contents — it has
     no accessibility-tree edge cases and works in older mobile browsers. */
  .pm-rows{
    display:flex; flex-wrap:nowrap; gap:14px; align-items:flex-start;
    width:auto; max-width:100%;
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding-inline-start:20px;
    padding:4px 20px 0;
    overscroll-behavior-x:contain;    /* swiping past photo 1 must never trigger browser Back */
    touch-action:pan-x pan-y;         /* allow both axes; never swallow the page scroll */
    -webkit-overflow-scrolling:touch; /* iOS momentum */
    scrollbar-width:none;
    /* fade the trailing edge only, so photo 1 is never clipped */
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 90%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 90%,transparent 100%);
  }
  .pm-rows::-webkit-scrollbar{display:none}

  /* Both rows become plain inline segments of the one track.
     flex-wrap:nowrap and width:auto are declared here because the global
     prefers-reduced-motion rule sets flex-wrap:wrap — without this override,
     any phone with Reduce Motion switched on would wrap the row and the
     swipe would break. */
  .pmrow{display:flex; flex-wrap:nowrap; gap:14px; width:auto; margin:0;
         animation:none!important; justify-content:flex-start}

  /* Photos 9-16 of each row are the duplicates that made the old loop
     seamless. A row you swipe needs no loop.
     8 from row A + 8 from row B = all 16 real photos, each once. */
  .pmrow .pm:nth-child(n+9){display:none}

  .pm{
    flex:0 0 78vw;              /* 430px phone -> 335px wide (was 240px) */
    /* Square, with a hard floor. The old section stacked two 150px rows with an
       18px gap between them = 318px of photo. A single photo has to beat that or
       the section feels emptier than what it replaced, so the floor is 320px. */
    aspect-ratio:1/1;
    min-height:320px;
    scroll-snap-align:start;    /* start, not center: photo 1 always lands flush on the gutter */
    border-radius:16px;
    /* navy underlay so a photo that is still downloading shows the house
       colours rather than an empty white hole */
    background:linear-gradient(135deg,var(--navy-700),var(--navy-600));
  }
  /* :hover sticks after a tap on touch devices — neutralise it */
  .pm:hover{transform:none; box-shadow:0 20px 40px -24px rgba(8,13,22,.7)}
  .pm:hover img{transform:none}
  .pm:focus-visible{outline:2px solid var(--gold-400); outline-offset:3px}
  /* Fade each photo in as it decodes — no white flash, no popping.
     Gated behind a class that JS adds, so if JS never runs the photos
     simply show up normally instead of staying invisible. */
  #marquee-sec.jsfade .pm img{opacity:0; transition:opacity .45s var(--ease-settle)}
  #marquee-sec.jsfade .pm img.rdy{opacity:1}

  /* --- "you can swipe this" hint ------------------------------------
     Sits directly under the eyebrow. Small, gold, lowercase-spaced.
     The arrow drifts right on a slow loop — enough to read as an
     invitation, quiet enough not to nag. Disappears for good once the
     visitor swipes. */
  .pm-hint{display:flex; align-items:center; gap:9px; margin:10px 0 0;
           font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
           color:color-mix(in srgb,var(--gold-400) 78%,transparent);
           transition:opacity .5s var(--ease-settle), transform .5s var(--ease-settle)}
  .pm-hint .dash{width:26px; height:1px; background:currentColor; opacity:.5}
  .pm-hint .arw{display:inline-block; animation:pmNudge 2.6s var(--ease-settle) infinite}
  #marquee-sec.swiped .pm-hint{opacity:0; transform:translateY(-4px); pointer-events:none}

  /* --- position rail ------------------------------------------------
     Always rendered. JS drives it via --pmp (0 to 1). With no JS it
     simply rests at the left, which still reads as "there is more". */
  .pm-rail{display:block; height:2px; margin:16px 20px 0; border-radius:2px;
           background:color-mix(in srgb,var(--gold-500) 16%,transparent); overflow:hidden}
  .pm-rail i{display:block; height:100%; width:22%; border-radius:2px;
             background:var(--gold-500); transform-origin:left;
             transform:translateX(calc(var(--pmp,0) * 354%));
             transition:transform .12s linear}
}

@keyframes pmNudge{
  0%,58%,100%{transform:translateX(0)}
  72%{transform:translateX(5px)}
  86%{transform:translateX(0)}
}
@media (prefers-reduced-motion:reduce){
  .pm-hint .arw{animation:none}
  .pm-rail i{transition:none}
  /* no fade-in either — photos just appear. Specificity has to match the
     .jsfade rule above or it would lose to it. */
  #marquee-sec.jsfade .pm img{transition:none}
}
/* scroll-progress hairline */
#scrollbar{position:fixed; top:0; left:0; right:0; height:2px; z-index:1150; transform:scaleX(0); transform-origin:0 50%; background:linear-gradient(90deg,var(--gold-500),var(--gold-400)); pointer-events:none}
/* eyebrow underline draw (marquee / stats / philosophy) */
#marquee-sec .eyebrow,#stats .eyebrow,#philosophy .eyebrow{position:relative; display:inline-block}
#marquee-sec .eyebrow::after,#stats .eyebrow::after,#philosophy .eyebrow::after{content:""; position:absolute; left:0; right:0; bottom:-9px; height:1px; background:linear-gradient(90deg,var(--gold-500),transparent); transform:scaleX(0); transform-origin:left; transition:transform .9s var(--ease-weight) .15s}
#marquee-sec .eyebrow.in::after,#stats .eyebrow.in::after,#philosophy .eyebrow.in::after{transform:scaleX(1)}
/* --- elevation wave 2 --- */
/* band plate cinematic filter */
#backyard .plate img,#backyard .bgvid{filter:saturate(1.05) contrast(1.03)}
#firepit .plate img,#firepit .bgvid{filter:saturate(1.08) contrast(1.05) brightness(.98)}
#firepit .plate{inset:0}
#firepit .plate img,#firepit .bgvid{object-position:50% 78%}
#firepit{min-height:min(94svh,780px)}
/* band gold hairline frame on entry */
.band::before,.band::after{content:""; position:absolute; left:0; right:0; height:1px; z-index:3; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--gold-400) 85%,transparent) 20%,color-mix(in srgb,var(--gold-400) 85%,transparent) 80%,transparent); transform:scaleX(0); transition:transform 1s var(--ease-weight)}
.band::before{top:0; transform-origin:left} .band::after{bottom:0; transform-origin:right}
.band.in::before,.band.in::after{transform:scaleX(1)}
#statement.in::before,#statement.in::after{background:linear-gradient(90deg,transparent,var(--navy-700) 75%,transparent)}
/* the-house gallery frame + thumb stagger */
#the-house .media{position:relative}
#the-house .media::after{content:""; position:absolute; inset:0; border-radius:16px; border:1px solid transparent; pointer-events:none; transition:border-color .8s var(--ease-settle) .3s}
#the-house .media.in::after{border-color:color-mix(in srgb,var(--gold-500) 34%,transparent)}
#the-house .thumbs .media:nth-child(1) img{transition-delay:.12s} #the-house .thumbs .media:nth-child(2) img{transition-delay:.24s}
/* stat cascade + settle-pop + hairline dividers */
#stats .stat{position:relative}
#stats .grid .stat:nth-child(2){transition-delay:.08s} #stats .grid .stat:nth-child(3){transition-delay:.16s} #stats .grid .stat:nth-child(4){transition-delay:.24s} #stats .grid .stat:nth-child(5){transition-delay:.32s}
@media(min-width:720px){ #stats .stat + .stat::before{content:""; position:absolute; left:-10px; top:18%; bottom:18%; width:1px; background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--gold-500) 40%,transparent),transparent)} }
#stats .stat.counted b{animation:statpop .5s var(--ease-settle)}
@keyframes statpop{0%{transform:scale(1.06)}100%{transform:scale(1)}}
/* brotherhood idle float (desktop) + face-sharpen hover */
@keyframes polyfloat{0%,100%{transform:translate(0,0) rotate(var(--r,0deg)) scale(1)}50%{transform:translate(0,-7px) rotate(var(--r,0deg)) scale(1)}}
@media(min-width:901px){
  #wall .polaroid.in{animation:polyfloat 7s ease-in-out 2.2s infinite}
  #wall .polaroid.in:nth-child(2n){animation-duration:8.4s; animation-delay:2.6s}
  #wall .polaroid.in:nth-child(3n){animation-duration:9.1s; animation-delay:3s}
  #wall .polaroid.in:hover{animation-play-state:paused}
}
/* --- elevation wave 3 --- */
/* details wipe-cascade */
#details .det-grid>*:nth-child(2){transition-delay:.09s} #details .det-grid>*:nth-child(3){transition-delay:.18s} #details .det-grid>*:nth-child(4){transition-delay:.27s}
#details .det-pic.mask img{transition:clip-path 1s var(--ease-weight),transform .6s var(--ease-settle)}
#details .det-grid>*:nth-child(2) img{transition-delay:.09s} #details .det-grid>*:nth-child(3) img{transition-delay:.18s} #details .det-grid>*:nth-child(4) img{transition-delay:.27s}
/* family line cascade + photo breathing */
#family .grid>div>.reveal:nth-child(2){transition-delay:.09s} #family .grid>div>.reveal:nth-child(3){transition-delay:.18s} #family .grid>div>.reveal:nth-child(4){transition-delay:.27s} #family .grid>div>.reveal:nth-child(5){transition-delay:.36s}
@keyframes famBreath{from{transform:scale(1)}to{transform:scale(1.035)}}
@media(min-width:901px){ #family .media.in img{animation:famBreath 16s ease-in-out 1.8s infinite alternate} }
/* --- elevation wave 4: word-mask reveal (band lines + philosophy) --- */
.wm{display:inline-block; overflow:hidden; vertical-align:top; line-height:1.1; padding-bottom:.14em; margin-bottom:-.14em}
.wm>*{display:inline-block; transform:translateY(122%); transition:transform .9s var(--ease-weight)}
.reveal.in .wm>*{transform:none}
#philosophy .big.reveal,.band .line.reveal{transform:none}
@media (prefers-reduced-motion:reduce){ .wm>*{transform:none!important} }
/* --- elevation wave 5: residence tour HUD + scroll hint --- */
.tour-hud{position:absolute; left:max(20px,calc((100vw - var(--maxw))/2 + 20px)); bottom:26px; z-index:5; display:flex; align-items:center; gap:16px; opacity:0; transition:opacity .5s var(--ease-settle)}
#residence.tour-live .tour-hud{opacity:1}
.tour-hud .thi{font-family:Fraunces; font-variant-numeric:tabular-nums; font-size:1rem; letter-spacing:.05em; color:var(--navy-700)}
.tour-hud .thi b{color:var(--gold-600); font-weight:700}
.tour-hud .thn{font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:color-mix(in srgb,var(--navy-800) 68%,transparent); min-width:11ch}
.tour-hud .thr{position:relative; width:110px; height:2px; background:color-mix(in srgb,var(--navy-700) 20%,transparent); border-radius:2px; overflow:hidden}
.tour-hud .thr i{position:absolute; inset:0; transform:scaleX(0); transform-origin:left; background:linear-gradient(90deg,var(--gold-600),var(--gold-400)); transition:transform .18s linear}
.tour-hint{position:absolute; right:max(20px,calc((100vw - var(--maxw))/2 + 20px)); bottom:26px; z-index:5; display:flex; align-items:center; gap:10px; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:color-mix(in srgb,var(--navy-800) 66%,transparent); pointer-events:none; transition:opacity .5s var(--ease-settle)}
.tour-hint .ar{font-style:normal; animation:hintArrow 1.8s var(--ease-weight) infinite}
@keyframes hintArrow{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
#residence.tour-scrolled .tour-hint{opacity:0}
.is-mobile-track .tour-hud,.is-mobile-track .tour-hint{display:none}
@media (prefers-reduced-motion:reduce){ .tour-hud,.tour-hud .thr i,.tour-hint{transition:none} .tour-hint .ar{animation:none} }
/* --- elevation wave 5b: cursor CTA label + brotherhood scatter-in --- */
#cursor-label{position:fixed; top:0; left:0; z-index:1201; padding:5px 12px; border-radius:999px; background:var(--navy-800); color:var(--gold-400); font-family:Inter; font-size:.7rem; font-weight:600; letter-spacing:.03em; white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .22s var(--ease-settle); box-shadow:0 8px 22px -10px rgba(8,13,22,.7)}
#cursor-label.on{opacity:1}
#wall .polaroid:nth-child(1){--dx:-72px;--dy:58px} #wall .polaroid:nth-child(2){--dx:-30px;--dy:-42px} #wall .polaroid:nth-child(3){--dx:0px;--dy:64px} #wall .polaroid:nth-child(4){--dx:38px;--dy:-32px} #wall .polaroid:nth-child(5){--dx:74px;--dy:52px} #wall .polaroid:nth-child(6){--dx:-58px;--dy:60px} #wall .polaroid:nth-child(7){--dx:-26px;--dy:62px} #wall .polaroid:nth-child(8){--dx:32px;--dy:-34px} #wall .polaroid:nth-child(9){--dx:64px;--dy:56px}
@media(max-width:900px){ #wall .polaroid{--dx:0px!important; --dy:34px!important} }
/* --- brotherhood scattered collage (37 photos, dense, taped, blends) --- */
.pcollage{column-count:8; column-gap:13px; max-width:1240px; margin:30px auto 0; padding:0 clamp(18px,5vw,56px)}
@media(max-width:1024px){.pcollage{column-count:6}}
@media(max-width:800px){.pcollage{column-count:5}}
@media(max-width:560px){.pcollage{column-count:3; column-gap:10px; padding:0 16px}}
.pp{break-inside:avoid; -webkit-column-break-inside:avoid; width:100%; margin:0 0 13px; position:relative; background:var(--paper); padding:6px 6px 14px; border-radius:2px; box-shadow:0 11px 24px -13px rgba(8,13,22,.5),0 2px 5px rgba(8,13,22,.2); transform:rotate(var(--r,0deg)) scale(.94); opacity:0; transition:transform .48s cubic-bezier(.34,1.3,.5,1),opacity .6s var(--ease-settle),box-shadow .35s}
.pp.in{opacity:1; transform:rotate(var(--r,0deg)) scale(1)}
.no-gsap .pp{opacity:1; transform:rotate(var(--r,0deg)) scale(1)}
.pp .tape{position:absolute; top:-8px; left:50%; width:54px; height:19px; transform:translateX(-50%) rotate(var(--tr,-3deg)); background:linear-gradient(180deg,rgba(224,217,203,.8),rgba(200,192,174,.62)); opacity:.78; z-index:3}
.pp .pic{position:relative; aspect-ratio:1/1; overflow:hidden; background:linear-gradient(135deg,var(--navy-700),var(--cream-300)); line-height:0}
.pp .pic img{width:100%; height:100%; object-fit:cover; object-position:50% 30%; display:block; transition:filter .5s var(--ease-settle)}
.pp.face .pic img{filter:sepia(.4) saturate(.76) contrast(.95) brightness(1.04) blur(2.8px); -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; pointer-events:none}
.pp.face .pic::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(19,30,51,.22),rgba(139,115,85,.18)); mix-blend-mode:multiply; pointer-events:none}
@media(hover:hover){
  .pp:hover{z-index:50; transform:rotate(0deg) translateY(-8px) scale(1.06); box-shadow:0 28px 48px -16px rgba(8,13,22,.6)}
  .pp:not(.face):hover .pic img{filter:none}
  .pp.face:hover .pic img{filter:sepia(.18) saturate(.9) contrast(.98) brightness(1.02) blur(0.9px)}
}
@keyframes ppjig{0%{transform:rotate(var(--r,0deg)) scale(1)}34%{transform:rotate(3deg) translateY(-9px) scale(1.1)}60%{transform:rotate(-2deg) translateY(-7px) scale(1.08)}100%{transform:rotate(0deg) translateY(-7px) scale(1.08)}}
@media (prefers-reduced-motion:reduce){ .pp.reveal{transform:rotate(var(--r,0deg))!important; opacity:1!important} .pp:hover{transform:rotate(var(--r,0deg)) translateY(-5px) scale(1.04)} .pp .pic img{transition:none} }
/* --- inquiry form (the-ask) --- */
.inq{max-width:640px; margin:36px auto 0; text-align:left; display:grid; gap:16px}
.inq-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:560px){ .inq-row{grid-template-columns:1fr} }
.inq-f{display:grid; gap:7px}
.inq-f>span{font-family:Inter; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--gold-400)}
.inq input,.inq textarea{font-family:Inter; font-size:1rem; color:#F4EEE0; background:color-mix(in srgb,var(--navy-600) 55%,transparent); border:1px solid color-mix(in srgb,var(--gold-500) 24%,transparent); border-radius:11px; padding:14px 15px; width:100%; min-height:48px; transition:border-color .2s,box-shadow .2s}
.inq textarea{resize:vertical; min-height:120px; line-height:1.5}
.inq input:focus,.inq textarea:focus{outline:none; border-color:var(--gold-500); box-shadow:0 0 0 3px color-mix(in srgb,var(--gold-500) 22%,transparent)}
.inq .inq-submit{justify-self:start; margin-top:4px}
.inq .hp{position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden; opacity:0}
.inq-status{margin:8px 0 0; font-size:1.06rem; line-height:1.5; color:var(--gold-400); font-family:Fraunces,Georgia,serif}
.inq-status.ok{color:#F4EEE0}
.inq-status.err{color:#F0A98A}
/* --- MOBILE hero art-direction: show the WHOLE 4-seasons video (full width) instead of a center-cropped sliver, copy below on navy --- */
@media (max-width:700px){
  #hero{display:block; min-height:0; padding-top:0; overflow:visible; align-items:stretch}
  #hero .plate{position:relative; inset:0; height:auto; aspect-ratio:4/3; z-index:0; overflow:hidden; transform:none!important}
  #hero .plate .bgvid,#hero .plate img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:none!important}
  #hero .plate::before{content:""; position:absolute; top:0; left:0; right:0; height:92px; z-index:2; background:linear-gradient(180deg,rgba(8,13,22,.5),transparent); pointer-events:none}
  #hero .plate::after{content:""; position:absolute; left:0; right:0; bottom:0; height:40%; z-index:2; background:linear-gradient(180deg,transparent,var(--navy-700) 94%); pointer-events:none}
  #hero .scrim{display:none}
  #hero .inner{position:relative; z-index:3; width:100%; margin:0; padding:22px clamp(20px,6vw,26px) 48px; background:var(--navy-700); text-align:left}
  #hero h1{font-size:clamp(2.1rem,8.4vw,3rem); max-width:none}
  #hero .sub{margin-top:16px; max-width:none}
  #hero .badge{margin-top:20px}
  #hero .cta-row{margin-top:24px}
  #hero .scrollcue{display:none}
}
/* --- tap-to-reveal on touch devices (no hover): tapping a community photo eases the privacy blur --- */
/* NATIVE checkbox tap-to-reveal (iOS-proof). The input is hidden with opacity:0 (NOT display:none —
   display:none makes the label tap fail on iOS), the label wrapping the photo is the tap target,
   and :checked eases the blur. cursor:pointer on the label is the classic iOS label-tap fix. */
.pp .rv,.polaroid--real .rv{position:absolute; top:0; left:0; width:1px; height:1px; opacity:0; margin:0; pointer-events:none}
.pp.face .pic-label,.polaroid--real .pic-label{display:block; cursor:pointer; -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none}
.pp.face .rv:checked ~ .pic-label .pic img{filter:sepia(.06) saturate(.98) contrast(1) brightness(1.02) blur(0.3px)!important}
.polaroid--real .rv:checked ~ .pic-label .pic img{filter:sepia(.1) saturate(.96) contrast(1) brightness(1.02) blur(0.5px)!important}
.pp.face .rv:checked ~ .pic-label .pic::after,.polaroid--real .rv:checked ~ .pic-label .pic::after{opacity:.15}
/* touch affordance: a small "tap" pill marks the blurred photos (hidden once revealed / on hover-capable desktop) */
@media (hover:none){
  .pp.face .pic::before,.polaroid--real .pic::before{content:"tap"; position:absolute; z-index:5; bottom:7px; right:7px; font:700 8px/1 Inter,system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:#F4EEE0; background:color-mix(in srgb,var(--navy-900) 58%,transparent); padding:4px 7px; border-radius:999px; pointer-events:none; opacity:.82}
  .pp.face .rv:checked ~ .pic-label .pic::before,.polaroid--real .rv:checked ~ .pic-label .pic::before{display:none}
}


/* ============================================================================
   GRADUATE RECOVERY HOMES — two-house additions (Nov 2026).
   Everything ABOVE this line is the original homepage stylesheet, unchanged.
   Everything below only adds: the Union House chapter on the homepage, the
   pieces the Union House page needs, and one nav tweak for a sixth link.
   Same tokens, same easing, same radii as the rest of the file.
   ========================================================================== */

/* nav: six links instead of five. The brand stays on one line from 1100px up (as it did before at
   1180px+); between 960 and 1099px, where the old five links already wrapped, the menu button takes over. */
#nav .links a{white-space:nowrap}
@media(min-width:1100px){ #nav .brand{white-space:nowrap} }
@media(min-width:960px) and (max-width:1099px){ #nav .links{display:none} .hamb{display:grid} }
@media(min-width:1100px) and (max-width:1180px){ #nav .links{gap:13px; font-size:.8rem} #nav .brand{font-size:.84rem; gap:9px} #nav .pill{padding:11px 16px; font-size:.82rem} }
@media(min-width:1181px) and (max-width:1240px){ #nav .links{gap:16px; font-size:.84rem} #nav .brand{font-size:.92rem} }
@media(min-width:1241px) and (max-width:1340px){ #nav .links{gap:18px; font-size:.86rem} }

/* "you may know it as The Graduate House" — the bridge line under the house headline */
.aka{font-family:Fraunces,Georgia,serif; font-style:italic; font-size:clamp(1.02rem,.96rem + .4vw,1.22rem); line-height:1.4; color:var(--gold-400); margin:16px 0 0}

/* ---------- homepage: THE UNION HOUSE chapter ---------- */
/* intro band — real drone footage, same band component as the pool and the fire pit */
#union-band .veil{background:radial-gradient(80% 120% at 50% 6%,rgba(224,182,85,.10),transparent 55%),linear-gradient(180deg,rgba(8,13,22,.46) 0%,rgba(8,13,22,.34) 45%,rgba(8,13,22,.66) 100%),linear-gradient(90deg,rgba(8,13,22,.22),transparent 24%,transparent 76%,rgba(8,13,22,.22))}
#union-band .plate img,#union-band .bgvid{filter:saturate(1.06) contrast(1.03)}
#union-band .line{text-shadow:0 4px 40px rgba(8,13,22,.55)}

/* the chapter itself — mirror image of #the-house (photos left, words right) on warm cream */
#union .grid{display:grid; grid-template-columns:1fr; gap:34px; align-items:center}
@media(min-width:900px){ #union .grid{grid-template-columns:.95fr 1.05fr; gap:56px} #union .grid>.u-media{order:-1} }
#union .eyebrow{color:var(--navy-700)}
#union .h2{color:var(--navy-700); max-width:14ch}
#union .lead{color:color-mix(in srgb,var(--navy-800) 90%,transparent)}
#union .body{color:color-mix(in srgb,var(--navy-800) 80%,transparent)}
#union .hero-shot{aspect-ratio:16/11}
#union .thumbs{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px}
#union .thumbs .media{aspect-ratio:4/5}
#union .media::after{content:""; position:absolute; inset:0; border-radius:16px; border:1px solid transparent; pointer-events:none; transition:border-color .8s var(--ease-settle) .3s}
#union .media.in::after{border-color:color-mix(in srgb,var(--gold-600) 40%,transparent)}
#union .thumbs .media:nth-child(1) img{transition-delay:.12s} #union .thumbs .media:nth-child(2) img{transition-delay:.24s}
.house-note{margin:18px 0 0; font-size:.86rem; letter-spacing:.03em; color:color-mix(in srgb,var(--navy-800) 66%,transparent)}

/* inquiry form: "Which house?" select, styled to match the inputs beside it */
.inq select{font-family:Inter; font-size:1rem; color:#F4EEE0; background-color:color-mix(in srgb,var(--navy-600) 55%,transparent); border:1px solid color-mix(in srgb,var(--gold-500) 24%,transparent); border-radius:11px; padding:14px 42px 14px 15px; width:100%; min-height:48px; transition:border-color .2s,box-shadow .2s; -webkit-appearance:none; appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1.5l6 6 6-6' fill='none' stroke='%23E0B655' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat:no-repeat; background-position:right 16px center}
.inq select:focus{outline:none; border-color:var(--gold-500); box-shadow:0 0 0 3px color-mix(in srgb,var(--gold-500) 22%,transparent)}
.inq select option{color:#131E33; background:#F7F3EA}

/* ---------- THE UNION HOUSE page ---------- */
/* a section sitting on the gold (the color of the Union House's own walls) needs navy type, like #family */
.on-gold .eyebrow,.on-gold .h2{color:var(--navy-800)}
.on-gold .lead{color:color-mix(in srgb,var(--navy-800) 90%,transparent)}
.on-gold .body{color:color-mix(in srgb,var(--navy-800) 80%,transparent)}
.on-gold .media.in::after{border-color:color-mix(in srgb,var(--navy-700) 30%,transparent)!important}
/* the porch band */
#porch .veil{background:linear-gradient(180deg,rgba(8,13,22,.50) 0%,rgba(8,13,22,.36) 45%,rgba(8,13,22,.62) 100%),linear-gradient(90deg,rgba(8,13,22,.22),transparent 24%,transparent 76%,rgba(8,13,22,.22))}
#porch .line{text-shadow:0 4px 40px rgba(8,13,22,.5)}
/* program section: link out to the full mission + the honest certification line */
.more-link{display:inline-flex; align-items:center; gap:8px; margin-top:34px; font-weight:600; color:var(--gold-400); border-bottom:1px solid color-mix(in srgb,var(--gold-400) 45%,transparent); padding-bottom:3px}
.more-link .arw{transition:transform .22s var(--ease-settle)} .more-link:hover .arw{transform:translateX(5px)}
.standing{margin:40px 0 0; padding-top:22px; border-top:1px solid color-mix(in srgb,var(--cream-100) 14%,transparent); max-width:62ch; font-size:.95rem; color:color-mix(in srgb,var(--cream-100) 76%,transparent)}
/* the "see the flagship" band */
#sister .veil{background:linear-gradient(180deg,rgba(8,13,22,.44),rgba(8,13,22,.62))}
#sister .cta-row{margin-top:30px; display:flex; justify-content:center}
/* the ask, without a crest: the house name set in type instead */
.wordmark{font-family:Fraunces,Georgia,serif; font-weight:500; font-style:italic; font-size:clamp(1.3rem,1.1rem + 1vw,1.7rem); color:var(--gold-400); margin:0 0 20px; letter-spacing:.01em}
/* nav: mark the page you are on with the same gold underline the hover uses */
#nav .links a[aria-current="page"]{color:var(--cream-100)} #nav.scrolled .links a[aria-current="page"]{color:var(--navy-800)}
#nav .links a[aria-current="page"]::after{transform:scaleX(1)}
/* the Union ask sits on a daytime photo, so it gets a deeper scrim than the night shot on the homepage */
#the-ask.ask-day .plate{opacity:.42}
#the-ask.ask-day .scrim{background:linear-gradient(180deg,rgba(8,13,22,.72),rgba(8,13,22,.92))}
/* phones: the full brand name never fit beside the button — it was clipped mid-word behind it.
   Set the name as a two-line lockup next to the crest so all of it shows. */
@media(max-width:600px){
  #nav .brand{white-space:normal; font-size:.64rem; line-height:1.2; letter-spacing:.045em; max-width:calc(42px + 11.4em)}
  #nav .pill{padding:9px 12px; font-size:.74rem}
}

/* ---------- homepage: the expanded Union House chapter ---------- */
/* a second set of gliding photo rows. "A First Look" keys its styles to #marquee-sec; .pm-sec carries the
   same rules so the component can appear more than once on a page. */
.pm-sec{padding:clamp(40px,7vh,90px) 0; overflow:hidden}
.pm-sec:hover .pmrow,.pm-sec:focus-within .pmrow{animation-play-state:paused}
.pm-sec .eyebrow{position:relative; display:inline-block}
.pm-sec .eyebrow::after{content:""; position:absolute; left:0; right:0; bottom:-9px; height:1px; background:linear-gradient(90deg,var(--gold-500),transparent); transform:scaleX(0); transform-origin:left; transition:transform .9s var(--ease-weight) .15s}
.pm-sec .eyebrow.in::after{transform:scaleX(1)}
@media (max-width:767px){
  .pm-sec.jsfade .pm img{opacity:0; transition:opacity .45s var(--ease-settle)}
  .pm-sec.jsfade .pm img.rdy{opacity:1}
  .pm-sec.swiped .pm-hint{opacity:0; transform:translateY(-4px); pointer-events:none}
}
@media (prefers-reduced-motion:reduce){ .pm-sec.jsfade .pm img{transition:none} }
/* the Union rows glide the opposite way from the flagship's, so the two never look like one strip repeated */
#union-look .pmrow.a{animation-name:pmR; animation-duration:52s}
#union-look .pmrow.b{animation-name:pmL; animation-duration:46s}

/* interior film band */
#union-inside .veil{background:linear-gradient(180deg,rgba(8,13,22,.52) 0%,rgba(8,13,22,.36) 45%,rgba(8,13,22,.62) 100%),linear-gradient(90deg,rgba(8,13,22,.24),transparent 24%,transparent 76%,rgba(8,13,22,.24))}
#union-inside .line{text-shadow:0 4px 40px rgba(8,13,22,.55)}

/* room by room — the same room card as the residence tour, laid out as a grid instead of a pinned track */
.rooms-sec .head{max-width:min(92vw,820px); margin:0 auto 8px; text-align:center}
.rooms-sec .h2{color:var(--navy-700)}
.rooms-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:clamp(30px,5vh,48px)}
@media(min-width:900px){ .rooms-grid{grid-template-columns:repeat(3,1fr); gap:24px} }
.rooms-grid .panel{display:block; width:100%; color:#F4EEE0}
.rooms-grid .panel img{transition:transform .7s var(--ease-settle)}
@media(hover:hover){ .rooms-grid .panel:hover img{transform:scale(1.05)} }
.rooms-grid .panel .rn{font-size:clamp(1.02rem,.72rem + 1.3vw,1.6rem); line-height:1.12}
.rooms-grid .panel .rl{font-size:clamp(.78rem,.7rem + .3vw,.95rem)}
@media(max-width:600px){ .rooms-grid .panel .txt{left:13px; right:13px; bottom:13px} }
.rooms-grid>.reveal:nth-child(2){transition-delay:.07s} .rooms-grid>.reveal:nth-child(3){transition-delay:.14s}
.rooms-grid>.reveal:nth-child(5){transition-delay:.07s} .rooms-grid>.reveal:nth-child(6){transition-delay:.14s}
.rooms-cta{margin-top:clamp(28px,5vh,44px); display:flex; justify-content:center}

/* koi pond band (Abington House page) */
#koi .veil{background:radial-gradient(58% 52% at 50% 46%,rgba(8,13,22,.50),transparent 74%),linear-gradient(180deg,rgba(8,13,22,.50) 0%,rgba(8,13,22,.34) 45%,rgba(8,13,22,.64) 100%)}
#koi .line{text-shadow:0 4px 40px rgba(8,13,22,.55)}

/* film bands with no words on them: footage at full strength, a light shade at the top and bottom edge only */
#union-band.bare .veil,#union-inside.bare .veil{background:linear-gradient(180deg,rgba(8,13,22,.30) 0%,transparent 22%,transparent 80%,rgba(8,13,22,.26) 100%)}
#koi.bare .veil{background:linear-gradient(180deg,rgba(8,13,22,.34) 0%,rgba(8,13,22,.14) 30%,rgba(8,13,22,.14) 75%,rgba(8,13,22,.34) 100%)}

/* Union rooms: the whole video frame, landscape, so each room is seen in full */
.rooms-grid.wide{grid-template-columns:1fr; gap:16px}
.rooms-grid.wide .panel{aspect-ratio:16/9}
@media(min-width:700px){ .rooms-grid.wide{grid-template-columns:repeat(2,1fr); gap:24px} }
#residence.wide .panel{flex-basis:clamp(300px,min(62vw,calc((100svh - 230px)*1.7778)),940px); aspect-ratio:16/9}
@media(max-width:700px){ #residence.wide .panel{flex-basis:86vw} }
.rooms-grid.wide .panel .veil,#residence.wide .panel .veil{background:linear-gradient(180deg,transparent 58%,rgba(8,13,22,.66))}

/* a house introduction with no photo block beside it: one centred column */
#union .grid.solo,#the-house .grid.solo{grid-template-columns:1fr; max-width:min(92vw,760px); margin-left:auto; margin-right:auto; text-align:center}
#union .grid.solo .h2,#the-house .grid.solo .h2{max-width:none}
.grid.solo .cta-row{justify-content:center}
/* photo strip: the looped second copy of each photo is only for the desktop glide */
@media (max-width:767px){ .pmrow .pm.dup{display:none} }
@media (prefers-reduced-motion:reduce){ .pmrow .pm.dup{display:none} }

/* A First Look: a row the visitor moves. Arrows, drag and a scroll bar on a computer; swipe on a phone. */
.pm-nav{display:none}
.pm .bgvid{object-position:50% 50%; filter:none}
.pmv::after{content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(180deg,transparent 56%,rgba(8,13,22,.62))}
.pm-cap{position:absolute; left:16px; right:16px; bottom:13px; z-index:3; margin:0; font-family:Fraunces,Georgia,serif; font-weight:500; font-size:clamp(.98rem,.8rem + .5vw,1.2rem); line-height:1.15; color:#F6F0E2; text-shadow:0 2px 18px rgba(8,13,22,.7)}
@media (min-width:768px){
  #marquee-sec .pm-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px}
  #marquee-sec .pm-head .eyebrow{margin-bottom:0}
  #marquee-sec .pm-nav{display:flex; gap:10px}
  .pm-nav button{width:44px; height:44px; border-radius:50%; border:1px solid color-mix(in srgb,var(--gold-400) 60%,transparent); background:transparent; color:var(--gold-400); font:500 1.05rem/1 Inter,system-ui,sans-serif; cursor:pointer; transition:background .25s,color .25s,opacity .25s}
  .pm-nav button:hover:not(:disabled){background:var(--gold-400); color:#131E33}
  .pm-nav button:disabled{opacity:.3; cursor:default}
  .pm-nav button:focus-visible{outline:2px solid var(--gold-400); outline-offset:3px}
  #marquee-sec .pm-rows{display:block; width:min(calc(100% - 2*clamp(20px,5vw,56px)),calc(var(--maxw) - 2*clamp(20px,5vw,56px))); margin:0 auto; overflow-x:auto; overflow-y:hidden; -webkit-mask-image:none; mask-image:none; padding:0 0 18px; cursor:grab; overscroll-behavior-x:contain}
  #marquee-sec .pm-rows.drag{cursor:grabbing; user-select:none}
  #marquee-sec .pm-rows::-webkit-scrollbar{height:10px}
  #marquee-sec .pm-rows::-webkit-scrollbar-track{background:rgba(244,238,224,.13); border-radius:10px}
  #marquee-sec .pm-rows::-webkit-scrollbar-thumb{background:var(--gold-500); border-radius:10px}
  #marquee-sec .pm-rows::-webkit-scrollbar-thumb:hover{background:var(--gold-400)}
  #marquee-sec .pmrow{animation:none!important; flex-wrap:nowrap!important; width:max-content!important; justify-content:flex-start!important}
  #marquee-sec .pm img,#marquee-sec .pm video{-webkit-user-drag:none; user-select:none}
  #marquee-sec .pm-rail{display:none!important}
}
@supports not selector(::-webkit-scrollbar){ @media (min-width:768px){ #marquee-sec .pm-rows{scrollbar-width:thin; scrollbar-color:var(--gold-500) rgba(244,238,224,.13)} } }

/* phones: the two house buttons sit side by side under the headline, so both are in reach without scrolling past them */
@media (max-width:600px){
  .hide-sm{display:none}
  #hero .cta-row{flex-wrap:nowrap; gap:10px}
  #hero .cta-row .btn{flex:1 1 0; min-width:0; justify-content:center; padding:13px 8px; font-size:.94rem; white-space:nowrap}
  #hero .inner{padding-top:16px}
  #hero .sub{margin-top:12px}
  #hero .badge{margin-top:14px}
  #hero .cta-row{margin-top:18px}
}

/* phones: a film band with no words shows the whole frame, edge to edge, instead of a tall slice cut from its middle */
@media (max-width:767px){
  .band.bare{min-height:0; aspect-ratio:16/9}
  .band.bare .plate{inset:0; transform:none!important}
}

/* phones: a photo band with a long quote gets breathing room above and below the words
   (it used to grow to exactly the height of its text, so the label sat on the band's top edge) */
@media (max-width:767px){ .band:not(.bare) .inner{padding-top:52px; padding-bottom:52px} }

/* phones: the room-tour dots stay on one row however many rooms there are (ten used to wrap to 8 + 2).
   Each dot keeps a full-height tap area. */
@media (max-width:600px){
  .dots{flex-wrap:nowrap; gap:0; padding:0 8px}
  .dots button{flex:0 1 44px; width:auto; min-width:0; padding:18px 0; background-color:transparent; border-radius:0; position:relative}
  .dots button::after{content:""; position:absolute; left:50%; top:50%; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; background:color-mix(in srgb,var(--navy-700) 55%,transparent)}
  .dots button.active{background-color:transparent; transform:none}
  .dots button.active::after{background:var(--gold-600); transform:scale(1.25)}
}

/* phones: the hero headline sits on solid navy here, so its soft shadow has nothing to lift it from.
   Each word is clipped for the entrance animation, which cut that shadow into a faint box behind every word. */
@media (max-width:700px){ #hero h1{text-shadow:none} }

/* homepage: the philosophy statement now follows the photo row directly (the numbers strip between them is gone),
   so it gives up most of its top padding and the two sit close together */
#marquee-sec + #philosophy{padding-top:clamp(24px,4vh,44px)}