/* ============================================================
   THE CLOVIS CASTLE — shared styles
   ============================================================ */
/* Fraunces — self-hosted variable display serif (opsz + wght axes).
   Our unique high-contrast editorial face; no third-party font requests. */
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url("fraunces.woff2") format("woff2");
}
:root{
  --paper:#FCFCFB; --paper-2:#F1F1EF; --paper-3:#E8E8E5;
  --ink:#171719; --ink-soft:#47474B; --taupe:#8A8A8E;
  --olive:#6E6E72; --olive-deep:#38383C;
  --line:rgba(22,22,24,.13); --line-2:rgba(22,22,24,.07);
  --warm-white:#F6F6F4; --stone:#131315;
  --display:'Marcellus',Georgia,serif;
  --fashion:'Fraunces','Didot',Georgia,serif;
  --accent:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost','Futura','Avenir Next',system-ui,sans-serif;
  --pad:clamp(22px,5vw,96px); --maxw:1320px;
  --ease:cubic-bezier(.19,1,.22,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--ink);color:var(--paper)}
h1,h2,h3{font-weight:400;margin:0}
.eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:.36em;font-size:11px;font-weight:500;color:var(--olive-deep)}
.eyebrow.on-dark{color:rgba(245,241,232,.7)}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.paper{background:var(--paper)} .paper-2{background:var(--paper-2)} .paper-3{background:var(--paper-3)}

/* ---------- film grain ---------- */
.grain{position:fixed;inset:-8%;z-index:105;pointer-events:none;opacity:.4;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(3) infinite}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}100%{transform:translate(0,0)}}

/* ---------- page cover (entrance + wipe transitions) ---------- */
.cover{position:fixed;inset:0;z-index:160;background:var(--ink);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:22px;color:var(--paper);transform:translateY(0);
  animation:coverOut .95s var(--ease) .15s forwards;will-change:transform}
.cover.in{animation:coverIn .7s var(--ease) forwards}
.cover svg{width:40px;height:52px;opacity:.9}
.cover .cname{font-family:var(--display);font-size:13px;letter-spacing:.5em;text-transform:uppercase;opacity:.8}
@keyframes coverOut{to{transform:translateY(-100%)}}
@keyframes coverIn{from{transform:translateY(100%)}to{transform:translateY(0)}}

/* ---------- custom cursor ---------- */
.cursor{position:fixed;top:0;left:0;z-index:120;pointer-events:none;mix-blend-mode:difference;transform:translate(-50%,-50%);will-change:transform}
.cursor .ring{width:12px;height:12px;border-radius:50%;background:#fff;transition:width .35s var(--ease),height .35s var(--ease),background .3s}
.cursor.grow .ring{width:76px;height:76px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.7)}
.cursor .lbl{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-family:var(--sans);font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:0;transition:opacity .3s;white-space:nowrap}
.cursor.grow .lbl{opacity:1}
@media (hover:none){.cursor{display:none}}
/* On desktop, hide the native OS cursor so only the custom black dot shows
   (no arrow riding inside it). Interactive elements set their own cursor, so
   they're overridden explicitly; form fields keep a caret so typing is clear. */
@media (hover:hover) and (pointer:fine){
  html,body,a,button,.btn,.play,.menu-toggle,.g-track,.g-track.drag,[data-cursor],label,summary{cursor:none}
  input,textarea,select,[contenteditable="true"]{cursor:auto}
}

/* ---------- scroll progress ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--olive);z-index:110;will-change:transform}

/* ---------- media slot ---------- */
.media{position:relative;overflow:hidden;background:linear-gradient(160deg,#e7e7e4 0%,#d8d8d5 55%,#c6c6c3 100%)}
.media > img,.media > video{position:relative;z-index:2;width:100%;height:100%;object-fit:cover}
.media .placeholder{position:absolute;inset:0;z-index:1;display:flex;align-items:flex-end;padding:22px 26px}
.media .placeholder::before{content:"";position:absolute;inset:14px;border:1px solid rgba(22,22,24,.22)}
.media .placeholder span{font-family:var(--sans);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(22,22,24,.6);display:flex;align-items:center;gap:12px;position:relative}
.media .placeholder span::before{content:"";width:26px;height:1px;background:var(--olive-deep);flex:none}
.kb{animation:kb 16s ease-out both}
@keyframes kb{from{transform:scale(1.16)}to{transform:scale(1)}}
/* cinematic image motions beyond ken-burns zoom, for variety */
.pan{animation:panX 26s linear both}
@keyframes panX{from{transform:scale(1.18) translateX(-3.6%)}to{transform:scale(1.18) translateX(3.6%)}}
.sink{animation:sink 24s ease-out both}
@keyframes sink{from{transform:scale(1.14) translateY(-3%)}to{transform:scale(1.14) translateY(2.4%)}}
.mrev{clip-path:inset(0 0 100% 0);transform:scale(1.12);transition:clip-path 1.2s var(--ease),transform 1.5s var(--ease)}
.mrev.in{clip-path:inset(0 0 0% 0);transform:scale(1)}

/* ---------- reveals ---------- */
.mask{overflow:hidden;display:block}
.mask > *{display:block;transform:translateY(115%);transition:transform 1s var(--ease)}
.mask.in > *{transform:translateY(0)}
.words span{display:inline-block;overflow:hidden;vertical-align:top}
.words span > i{display:inline-block;font-style:inherit;transform:translateY(115%);transition:transform .9s var(--ease)}
.words.in span > i{transform:translateY(0)}
.words.in span:nth-child(2) > i{transition-delay:.06s}
.words.in span:nth-child(3) > i{transition-delay:.12s}
.words.in span:nth-child(4) > i{transition-delay:.18s}
.words.in span:nth-child(5) > i{transition-delay:.24s}
.words.in span:nth-child(6) > i{transition-delay:.3s}
.fade{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.fade.in{opacity:1;transform:none}
[data-delay="1"]{transition-delay:.09s}[data-delay="2"]{transition-delay:.18s}
[data-delay="3"]{transition-delay:.27s}[data-delay="4"]{transition-delay:.36s}

/* ---------- header ---------- */
header{position:fixed;inset:0 0 auto 0;z-index:90;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px var(--pad);transition:background .3s var(--ease),padding .3s var(--ease),box-shadow .3s,color .3s;color:var(--warm-white)}
header.solid{background:rgba(252,252,251,.86);backdrop-filter:blur(10px) saturate(1.05);padding:16px var(--pad);box-shadow:0 1px 0 var(--line);color:var(--ink)}
header.on-light:not(.solid){color:var(--ink)}
.brand{display:flex;align-items:center;gap:13px}
.brand svg{width:24px;height:32px;flex:none}
.brand .wm{font-family:var(--display);font-size:19px;letter-spacing:.2em;text-transform:uppercase;line-height:1;padding-top:2px}
nav.primary{display:flex;gap:36px;font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500}
nav.primary a{position:relative;padding:6px 0;opacity:.85;transition:opacity .3s}
nav.primary a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:currentColor;transition:width .45s var(--ease)}
nav.primary a:hover,nav.primary a.current{opacity:1} nav.primary a:hover::after,nav.primary a.current::after{width:100%}
.btn{font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;padding:14px 28px;border:1px solid currentColor;color:inherit;transition:background .45s var(--ease),color .45s var(--ease),border-color .45s;white-space:nowrap;cursor:pointer;background:transparent;display:inline-block;will-change:transform}
header .btn:hover{background:currentColor}
header:not(.solid):not(.on-light) .btn:hover{background:var(--warm-white);color:var(--ink);border-color:var(--warm-white)}
header.solid .btn:hover,header.on-light .btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn--light{border-color:rgba(245,241,232,.55);color:var(--warm-white)} .btn--light:hover{background:var(--warm-white);color:var(--ink);border-color:var(--warm-white)}
.btn.solid{background:var(--ink);color:var(--paper);border-color:var(--ink)} .btn.solid:hover{background:var(--olive-deep);border-color:var(--olive-deep);color:var(--paper)}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:620px;display:flex;align-items:flex-end;color:var(--warm-white);overflow:hidden}
.hero.sub{height:82vh;min-height:520px}
.hero .media{position:absolute;inset:-13% 0;height:126%;will-change:transform}
.hero .media > video,.hero .media > img{height:100%}
.hero::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(14,14,16,.32) 0%,rgba(14,14,16,0) 28%,rgba(14,14,16,.64) 100%)}
.hero-inner{position:relative;z-index:4;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) clamp(54px,9vh,120px);display:flex;flex-direction:column;gap:24px}
.hero.sub .hero-inner{padding-bottom:clamp(44px,7vh,84px)}
.hero h1{font-family:var(--display);font-size:clamp(50px,8.6vw,142px);line-height:1;letter-spacing:-.005em;max-width:15ch}
.hero.sub h1{font-size:clamp(44px,7vw,108px)}
.hero h1 em{font-family:var(--accent);font-style:italic;font-weight:500}
.hero .sub-txt{font-family:var(--accent);font-style:italic;font-size:clamp(18px,1.7vw,24px);color:rgba(245,241,232,.9);max-width:42ch;line-height:1.5;margin:0}
.scrollcue{position:absolute;right:var(--pad);bottom:clamp(40px,8vh,70px);z-index:4;writing-mode:vertical-rl;font-family:var(--sans);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(245,241,232,.72);display:flex;align-items:center;gap:14px}
.scrollcue::after{content:"";width:1px;height:56px;background:linear-gradient(rgba(245,241,232,.8),transparent);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(.3);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- generic content blocks ---------- */
.statement{padding:clamp(96px,15vh,210px) 0}
.statement .wrap{max-width:940px;display:flex;flex-direction:column;gap:34px}
.lede{font-family:var(--accent);font-style:italic;font-weight:500;font-size:clamp(30px,4.4vw,58px);line-height:1.12;letter-spacing:-.005em;margin:0;text-wrap:balance}
.prose p{font-size:clamp(15px,1.15vw,18px);line-height:1.9;color:var(--ink-soft);max-width:58ch;margin:0}
.rule{width:46px;height:1px;background:var(--olive)}
.section{padding:clamp(80px,12vh,170px) 0}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;padding-bottom:clamp(40px,7vh,84px)}
.section-head h2{font-family:var(--display);font-size:clamp(34px,5vw,70px);line-height:1.03;margin:.35em 0 0}
.section-head .aside{max-width:32ch;color:var(--taupe);font-size:15px;line-height:1.7}

/* rooms (alternating) */
.room{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(30px,5vw,84px);align-items:center;padding:clamp(30px,5vh,56px) 0}
.room:nth-child(even) .room-media{order:2}
.room-media{aspect-ratio:4/3.2;width:100%}
.room-body{display:flex;flex-direction:column;gap:18px;max-width:44ch}
.room-body .lbl{font-family:var(--sans);font-size:11px;letter-spacing:.28em;color:var(--olive-deep);text-transform:uppercase;font-weight:500}
.room-body h3{font-family:var(--display);font-size:clamp(28px,3.6vw,46px);line-height:1.04}
.room-body p{margin:0;font-family:var(--accent);font-size:clamp(17px,1.4vw,21px);line-height:1.6;color:var(--ink-soft)}
.spec{display:flex;gap:26px;flex-wrap:wrap;margin-top:6px;padding-top:18px;border-top:1px solid var(--line)}
.spec div{display:flex;flex-direction:column;gap:3px}
.spec .k{font-family:var(--sans);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe)}
.spec .v{font-family:var(--accent);font-size:19px;color:var(--ink)}

/* marquee */
.marquee{padding:clamp(30px,6vh,70px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;white-space:nowrap}
.marquee .track{display:inline-flex;gap:.6em;will-change:transform;animation:marq 32s linear infinite}
.marquee span{font-family:var(--display);font-size:clamp(38px,7vw,104px);letter-spacing:.02em;color:transparent;-webkit-text-stroke:1px rgba(22,22,24,.4);padding-right:.4em}
.marquee span em{font-family:var(--accent);font-style:italic;color:var(--olive-deep);-webkit-text-stroke:0}
@keyframes marq{to{transform:translateX(-50%)}}

/* text-over-image band */
.band{position:relative;min-height:96vh;display:flex;align-items:center;color:var(--warm-white);overflow:hidden}
.band.short{min-height:70vh}
.band .media{position:absolute;inset:-13% 0;height:126%;will-change:transform}
.band .media > img{height:100%}
.band::after{content:"";position:absolute;inset:0;z-index:3;background:linear-gradient(90deg,rgba(14,14,16,.8) 0%,rgba(14,14,16,.44) 46%,rgba(14,14,16,.08) 100%)}
.band.center::after{background:linear-gradient(180deg,rgba(14,14,16,.5),rgba(14,14,16,.5))}
.band .wrap{position:relative;z-index:4;width:100%}
.band .col{max-width:56ch;display:flex;flex-direction:column;gap:26px}
.band.center .col{max-width:40ch;margin:0 auto;text-align:center;align-items:center}
.band .big{font-family:var(--display);font-size:clamp(36px,5.6vw,86px);line-height:1.03;letter-spacing:-.01em;text-wrap:balance}
.band .big em{font-family:var(--accent);font-style:italic}
.band p{font-family:var(--accent);font-size:clamp(18px,1.5vw,23px);line-height:1.55;color:rgba(245,241,232,.9);max-width:50ch;margin:0}

/* split (text + image) */
.split{padding:clamp(84px,13vh,180px) 0}
.split .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,6vw,96px);align-items:center}
.split.flip .wrap{grid-template-columns:1.1fr .9fr}
.split.flip .split-media{order:-1}
.split .col{display:flex;flex-direction:column;gap:22px;max-width:46ch}
.split h2{font-family:var(--display);font-size:clamp(34px,4.8vw,66px);line-height:1.03;margin:.2em 0 0}
.split p{margin:0;font-family:var(--accent);font-size:clamp(17px,1.4vw,21px);line-height:1.6;color:var(--ink-soft)}
.split .split-media{aspect-ratio:5/4;width:100%}

/* horizontal gallery */
.gallery{padding:clamp(70px,11vh,150px) 0;overflow:hidden}
.gallery .g-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;padding-bottom:clamp(30px,5vh,56px)}
.gallery .g-head h2{font-family:var(--display);font-size:clamp(30px,4.2vw,58px);margin:.3em 0 0}
.gallery .g-head .hint{font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--taupe)}
.g-track{display:flex;gap:clamp(16px,2vw,30px);padding:0 var(--pad);cursor:grab;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x proximity}
.g-track::-webkit-scrollbar{display:none}
.g-track.drag{cursor:grabbing}
.g-item{flex:none;width:clamp(240px,32vw,440px);aspect-ratio:3/4;scroll-snap-align:center}
.g-item.wide{aspect-ratio:4/3;width:clamp(320px,44vw,620px)}

/* masonry grid gallery */
.grid-gallery{columns:3;column-gap:clamp(12px,1.6vw,22px);padding:clamp(20px,4vh,50px) 0 0}
.grid-gallery .gi{break-inside:avoid;margin-bottom:clamp(12px,1.6vw,22px)}
.grid-gallery .gi .media{width:100%}
@media (max-width:820px){.grid-gallery{columns:2}}
@media (max-width:520px){.grid-gallery{columns:1}}

/* film */
.film{position:relative;height:90vh;min-height:540px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--warm-white);overflow:hidden}
.film .media{position:absolute;inset:0}
.film .media > video,.film .media > img{height:100%}
.film::after{content:"";position:absolute;inset:0;z-index:3;background:rgba(14,14,16,.42)}
.film .inner{position:relative;z-index:4;display:flex;flex-direction:column;align-items:center;gap:30px;padding:0 var(--pad)}
.play{width:82px;height:82px;border-radius:50%;border:1px solid rgba(245,241,232,.7);display:grid;place-items:center;transition:background .45s var(--ease),transform .45s var(--ease);cursor:pointer;background:transparent}
.play:hover{background:var(--warm-white);transform:scale(1.06)} .play svg{width:20px;height:20px;margin-left:3px}
.play:hover svg path{fill:var(--ink)}
.film blockquote{font-family:var(--accent);font-style:italic;font-size:clamp(26px,3.6vw,50px);line-height:1.18;margin:0;max-width:20ch;text-wrap:balance}
.film cite{font-family:var(--sans);font-style:normal;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:rgba(245,241,232,.72)}

/* visit / cta band */
.visit{position:relative;overflow:hidden;color:var(--warm-white)}
.visit .media{position:absolute;inset:-13% 0;height:126%;will-change:transform}
.visit .media > img{height:100%}
.visit::after{content:"";position:absolute;inset:0;z-index:3;background:rgba(14,14,16,.66)}
.visit .wrap{position:relative;z-index:4;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,7vw,110px);align-items:center;padding-top:clamp(96px,16vh,210px);padding-bottom:clamp(96px,16vh,210px)}
.visit h2{font-family:var(--display);font-size:clamp(40px,6vw,92px);line-height:1;margin:.2em 0 0}
.visit h2 em{font-family:var(--accent);font-style:italic}
.visit .col > p{font-family:var(--accent);font-size:clamp(19px,1.6vw,24px);line-height:1.5;color:rgba(245,241,232,.9);max-width:40ch;margin:22px 0 0}
.visit .actions{display:flex;gap:18px;flex-wrap:wrap;margin-top:36px}
.contactcard{display:flex;flex-direction:column;gap:22px;border-left:1px solid rgba(245,241,232,.28);padding-left:clamp(24px,4vw,50px)}
.contactcard .k{font-family:var(--sans);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(245,241,232,.6)}
.contactcard .v{font-family:var(--accent);font-size:21px;color:var(--warm-white);margin-top:6px;line-height:1.4}

/* enquiry form */
.form{display:grid;grid-template-columns:1fr 1fr;gap:26px 30px}
.form .full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:9px}
.field label{font-family:var(--sans);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--taupe)}
.field input,.field select,.field textarea{font-family:var(--accent);font-size:19px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line);padding:8px 2px;outline:none;transition:border-color .4s;border-radius:0}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--olive)}
.field textarea{resize:vertical;min-height:64px}

/* footer */
footer{background:var(--stone);color:var(--warm-white);padding:clamp(60px,10vh,100px) 0 40px}
footer .wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;align-items:start}
footer .fbrand{display:flex;flex-direction:column;gap:18px}
footer .fbrand .top{display:flex;align-items:center;gap:12px}
footer .fbrand svg{width:24px;height:32px} footer .fbrand .wm{font-family:var(--display);font-size:19px;letter-spacing:.2em;text-transform:uppercase}
footer .fbrand p{font-family:var(--accent);color:rgba(245,241,232,.66);font-size:18px;line-height:1.5;max-width:30ch;margin:0}
footer .col h4{font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(245,241,232,.5);margin:0 0 18px;font-weight:500}
footer .col a,footer .col span{display:block;font-size:15px;line-height:1.95;color:rgba(245,241,232,.82)}
footer .col a:hover{color:#fff}
.footer-base{max-width:var(--maxw);margin:60px auto 0;padding:24px var(--pad) 0;border-top:1px solid rgba(245,241,232,.16);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,241,232,.5)}

@media (max-width:900px){
  nav.primary{display:none}
  .room{grid-template-columns:1fr;gap:22px} .room:nth-child(even) .room-media{order:0}
  .split .wrap,.split.flip .wrap{grid-template-columns:1fr;gap:28px} .split.flip .split-media{order:0}
  .visit .wrap{grid-template-columns:1fr;gap:44px}
  .contactcard{border-left:0;border-top:1px solid rgba(245,241,232,.28);padding-left:0;padding-top:30px}
  footer .wrap{grid-template-columns:1fr;gap:34px}
  .form{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mask>*,.words span>i,.fade,.mrev,.kb{transition:none!important;animation:none!important;transform:none!important;opacity:1!important;clip-path:none!important}
  .marquee .track,.scrollcue::after,.grain{animation:none}
  .cover{display:none}
}

/* ---------- 3D depth: scroll-tilt + coverflow gallery ---------- */
.room,.split .wrap{perspective:1500px}
.room-media,.split-media{will-change:transform;backface-visibility:hidden;transition:transform .12s linear}
.hero .media img,.hero .media video,.hero-inner{transition:transform .4s var(--ease)}
.gallery .g-track{perspective:1600px;padding-top:30px;padding-bottom:30px}
.g-item{will-change:transform;transition:transform .12s linear}
@media (prefers-reduced-motion:reduce){
  .room-media,.split-media,.g-item{transform:none!important}
}

/* ---------- WebGL 3D stage (homepage hero) ---------- */
.stage{position:relative;height:500vh;min-height:600px;background:#17141f}
.stage-sticky{position:sticky;top:0;width:100%;height:100svh;min-height:600px;overflow:hidden;display:flex;align-items:flex-end}
.stage-video{transform-origin:center center;will-change:transform}
#lh3d,.stage-video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;z-index:0}
.stage-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.stage-vignette{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,12,20,.35) 0%,rgba(14,12,20,0) 26%,rgba(14,12,20,.55) 100%)}
.stage-copy{position:relative;z-index:5;width:100%;max-width:var(--maxw);margin:0 auto;
  padding:0 var(--pad) clamp(54px,9vh,120px);display:flex;flex-direction:column;gap:22px;color:var(--warm-white)}
.stage-copy h1{font-family:var(--display);font-weight:400;font-size:clamp(50px,8.6vw,142px);line-height:1;letter-spacing:-.005em;max-width:15ch;margin:0}
.stage-copy h1 em{font-family:var(--accent);font-style:italic}
.stage-copy .sub-txt{font-family:var(--accent);font-style:italic;font-size:clamp(18px,1.7vw,24px);color:rgba(245,241,232,.9);max-width:42ch;line-height:1.5;margin:0}
.stage-reveal{position:absolute;inset:0;z-index:8;pointer-events:none;background:var(--paper);opacity:0}
.no3d .stage{height:100svh}
.no3d .stage-sticky{position:relative}
#hero-canvas{z-index:1;background:#17141f}
@media (prefers-reduced-motion:reduce){
  .stage{height:100svh}
  .stage-sticky{position:relative}
}

/* ---------- momentum smooth scroll (Lenis) ---------- */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto!important}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}

/* ---------- portal landing: through the window, into the tower ---------- */
.stage-reveal img{width:100%;height:100%;object-fit:cover;display:block}
.portal-land{position:relative;height:100svh;min-height:600px;overflow:hidden;display:flex;align-items:flex-end;color:var(--warm-white)}
.portal-land .pl-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.portal-land .pl-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(14,14,16,.28) 0%,rgba(14,14,16,0) 34%,rgba(14,14,16,.74) 100%)}
.portal-land .wrap{position:relative;z-index:2;width:100%;padding-bottom:clamp(54px,9vh,120px)}
.portal-land .pl-copy{display:flex;flex-direction:column;gap:16px;max-width:42ch}
.portal-land .big{font-family:var(--display);font-weight:400;font-size:clamp(40px,6vw,92px);line-height:1;letter-spacing:-.01em;margin:0}
@media (prefers-reduced-motion:reduce){.portal-land{height:auto;min-height:0}}

/* ---------- dusk hero revealed THROUGH the window (held, no duplicate) ---------- */
.stage-reveal{z-index:8}
.stage-reveal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0}
.stage-reveal::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(14,14,16,.18) 0%,rgba(14,14,16,0) 38%,rgba(14,14,16,.72) 100%)}
.stage-reveal-copy{position:absolute;z-index:2;left:0;right:0;bottom:0;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) clamp(54px,9vh,120px);display:flex;flex-direction:column;gap:16px;color:var(--warm-white);opacity:0}
.stage-reveal-copy .eyebrow{color:rgba(245,241,232,.72)}
.stage-reveal-copy h2{font-family:var(--display);font-weight:400;font-size:clamp(40px,6vw,92px);line-height:1;letter-spacing:-.01em;margin:0;text-wrap:balance}
.stage-reveal-copy .btn{align-self:flex-start;margin-top:6px}

/* ---------- brand logo (real mark; one black file, inverted to white on dark) ---------- */
.logo{display:block;width:auto;flex:none}
header .brand .logo{height:38px}
footer .fbrand .logo{height:30px}
.cover .logo{height:56px;margin-bottom:2px}
header:not(.solid):not(.on-light) .brand .logo,
footer .fbrand .logo,
.cover .logo{filter:invert(1)}

/* ---------- header legibility scrim (keeps white logo/nav readable over any hero) ---------- */
header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,0) 100%);opacity:0;transition:opacity .3s var(--ease)}
header:not(.solid):not(.on-light)::before{opacity:1}

/* ---------- intro blends to white + logo (not a second photo) ---------- */
.stage-reveal{background:var(--paper)}
.stage-reveal::before{content:none}
.stage-reveal img.stage-mark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:auto;height:clamp(64px,9vw,112px);object-fit:contain;opacity:0}

/* ---------- centered-logo header + full-screen menu (Villa Cimbrone style) ---------- */
.brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;gap:12px}
.menu-toggle{display:inline-flex;flex-direction:column;justify-content:center;gap:6px;width:34px;height:26px;background:none;border:0;padding:0;cursor:pointer;color:inherit;z-index:2}
.menu-toggle span{display:block;width:28px;height:1.5px;background:currentColor;transition:transform .4s var(--ease),opacity .3s}
.menu-toggle.open span:first-child{transform:translateY(3.75px) rotate(45deg)}
.menu-toggle.open span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
header .btn{z-index:2}
.menu-overlay{position:fixed;inset:0;z-index:85;background:var(--stone);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .55s var(--ease),visibility .55s}
.menu-overlay.open{opacity:1;visibility:visible}
.menu-links{display:flex;flex-direction:column;gap:clamp(10px,3vh,26px);text-align:center}
.menu-links a{font-family:var(--display);font-size:clamp(30px,6.5vw,64px);line-height:1.04;color:var(--warm-white);opacity:.8;transition:opacity .3s var(--ease),letter-spacing .5s var(--ease);position:relative}
.menu-links a:hover,.menu-links a.current{opacity:1;letter-spacing:.015em}
body.menu-open{overflow:hidden}
body.menu-open #site-header{color:var(--warm-white);background:transparent;box-shadow:none}
body.menu-open #site-header::before{opacity:0}
body.menu-open .brand .logo{filter:invert(1)}
.brand .wm{white-space:nowrap}
@media (max-width:560px){.brand .wm{display:none}}

/* ---------- Cimbrone-style prestige section (fly-in lands here) ---------- */
.prestige{padding:clamp(90px,15vh,200px) 0;text-align:center}
.prestige .wrap{max-width:800px;display:flex;flex-direction:column;align-items:center;gap:26px}
.prestige h2{font-family:var(--display);font-weight:400;font-size:clamp(34px,5.4vw,74px);line-height:1.05;letter-spacing:-.01em;text-wrap:balance;margin:0}
.prestige p{font-family:var(--accent);font-size:clamp(18px,1.6vw,23px);line-height:1.6;color:var(--ink-soft);max-width:56ch;margin:0}

/* ---------- cross-fading photo slideshow (a couple of pictures) ---------- */
.slides .slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 3s var(--ease)}
.slides .slide.active{opacity:1}

/* ---------- full-bleed photo that dissolves into the white sections (a "bleed") ---------- */
.bleed{position:relative;height:94vh;min-height:520px;overflow:hidden;background:var(--paper)}
.bleed .bleed-media{position:absolute;inset:-16% 0;height:132%;will-change:transform}
.bleed .bleed-media img,.bleed .bleed-media video{width:100%;height:100%;object-fit:cover}
.bleed::before,.bleed::after{content:"";position:absolute;left:0;right:0;z-index:2;pointer-events:none;height:26%}
.bleed::before{top:0;background:linear-gradient(to bottom,var(--paper),transparent)}
.bleed::after{bottom:0;background:linear-gradient(to top,var(--paper),transparent)}

/* ---------- italic accent emphasis in light section headings (mas-rose-style flow) ---------- */
.split h2 em,.section-head h2 em,.room-body h3 em,.prestige h2 em{font-family:var(--accent);font-style:italic;font-weight:500}

/* ============================================================
   Editorial flow — varied, non-patterned homepage sections.
   Oversized type + mixed image scale + staggered clusters,
   deliberately breaking the 50/50 rhythm (Mas de la Rose feel).
   ============================================================ */
.xl{font-family:var(--display);font-size:clamp(42px,7.2vw,112px);line-height:.98;letter-spacing:-.02em;margin:0}
.lg{font-family:var(--display);font-size:clamp(32px,4.6vw,64px);line-height:1.02;letter-spacing:-.01em;margin:0}
.xl em,.lg em{font-family:var(--accent);font-style:italic;font-weight:500}

/* full-width rotating showcase (property images cycle) */
.showcase{padding:clamp(24px,5vh,64px) clamp(16px,2.5vw,44px)}
.showcase .frame{max-width:1560px;width:100%;margin:0 auto;aspect-ratio:16/9}
.showcase .frame .slide{object-position:center 40%}
.showcase .cap{max-width:1560px;margin:18px auto 0;padding:0;display:flex;justify-content:space-between;gap:20px;
  font-family:var(--sans);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--taupe)}

/* asymmetric feature — oversized headline + a SMALL, offset portrait image */
.feature{padding:clamp(84px,13vh,196px) 0;overflow:hidden}
.feature .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,104px);align-items:center}
.feature .fig{width:min(82%,440px);aspect-ratio:4/5}
.feature.right .fig{order:2;margin-left:auto}
.feature .body{display:flex;flex-direction:column;gap:20px;max-width:46ch}
.feature .body .lbl{font-family:var(--sans);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--olive-deep);font-weight:500}
.feature .body p{font-family:var(--accent);font-size:clamp(17px,1.5vw,22px);line-height:1.62;color:var(--ink-soft);margin:0}

/* duo — two images at different heights, vertically staggered, beside a headline */
.duo{padding:clamp(60px,9vh,128px) 0;overflow:hidden}
.duo .wrap{display:grid;grid-template-columns:1.34fr .66fr;gap:clamp(34px,4.5vw,74px);align-items:center}
.duo .stack{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,1.5vw,24px)}
.duo .stack .fa{aspect-ratio:3/4}
.duo .stack .fb{aspect-ratio:3/4;margin-top:clamp(16px,3.5vh,40px)}
.duo .body{display:flex;flex-direction:column;gap:20px;max-width:40ch}
.duo .body .lbl{font-family:var(--sans);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--olive-deep);font-weight:500}
.duo .body p{font-family:var(--accent);font-size:clamp(17px,1.5vw,22px);line-height:1.62;color:var(--ink-soft);margin:0}

@media (max-width:900px){
  .feature .wrap,.duo .wrap{grid-template-columns:1fr;gap:34px}
  .feature .fig,.feature.right .fig{width:min(92%,440px);order:0;margin:0}
  .duo .stack .fb{margin-top:0}
}

/* ============================================================
   Depth hero — Apple-aerial-screensaver feel: a slow cinematic
   drift + pointer/tilt parallax so a still photo reads as 3D.
   ============================================================ */
.depth{position:relative;height:92vh;min-height:560px;overflow:hidden;background:var(--stone);color:var(--warm-white)}
.depth-stage{position:absolute;inset:0;perspective:1300px;overflow:hidden}
.depth-inner{position:absolute;inset:-3.5%;will-change:transform;transform-style:preserve-3d}
.depth-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  animation:aerialDrift 26s ease-in-out infinite alternate;will-change:transform}
.depth-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@keyframes aerialDrift{from{transform:scale(1) translate3d(-1.5%,-0.9%,0)}to{transform:scale(1.08) translate3d(1.5%,1.2%,0)}}
.depth::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,14,16,.34) 0%,rgba(14,14,16,0) 28%,rgba(14,14,16,.30) 58%,rgba(14,14,16,.74) 100%)}
.depth-copy{position:absolute;z-index:3;left:0;right:0;bottom:0;max-width:var(--maxw);margin:0 auto;
  padding:0 var(--pad) clamp(48px,9vh,112px);display:flex;flex-direction:column;gap:16px;will-change:transform}
.depth-copy .xl{color:var(--warm-white)}
.depth-copy .eyebrow{color:rgba(245,241,232,.72)}
@media (prefers-reduced-motion:reduce){.depth-img{animation:none}.depth-inner{transform:none!important}}
/* .depth.hero — page hero variant: deeper scrim + text shadow so the headline
   reads cleanly over any frame of the background video */
.depth.hero::after{background:linear-gradient(180deg,rgba(14,14,16,.44) 0%,rgba(14,14,16,.14) 30%,rgba(14,14,16,.46) 60%,rgba(14,14,16,.86) 100%)}
.depth.hero .depth-copy .xl{text-shadow:0 2px 34px rgba(0,0,0,.5)}
.depth.hero .depth-copy .sub-txt{color:rgba(245,241,232,.96);text-shadow:0 1px 20px rgba(0,0,0,.5)}
.depth.hero .depth-copy .eyebrow{color:rgba(245,241,232,.86)}

/* ---------- mobile tuning ---------- */
@media (max-width:640px){
  /* the tower fly-in resolves in ~3 swipes on a phone instead of ~5 */
  .stage{height:300vh}
  /* keep big headlines from eating the whole first screen on tiny widths */
  .xl{font-size:clamp(38px,11vw,64px)}
  .depth{height:88svh}
  .depth-copy{padding-bottom:clamp(40px,10vh,80px)}
}

/* ============================================================
   Editorial type elevation — high-contrast Didone (Bodoni Moda)
   for the statement headlines, giving the fashion-masthead
   register. Marcellus stays for structural sub-heads (rooms,
   section heads, splits); Cormorant italic stays for the em
   accents and the lede/quote, for contrast against the Didone.
   ============================================================ */
.stage-copy h1,.hero h1,.prestige h2,.xl,.lg,.band .big,.visit h2,.marquee span{
  font-family:var(--fashion);font-weight:500;
  font-variation-settings:"opsz" 144,"wght" 490,"SOFT" 0,"WONK" 0}
.stage-copy h1,.hero h1{letter-spacing:-.025em}
.hero.sub h1{letter-spacing:-.02em}
.xl{letter-spacing:-.03em}
.lg{letter-spacing:-.022em}
.visit h2{letter-spacing:-.03em}
.band .big{letter-spacing:-.024em}
.prestige h2{letter-spacing:-.018em}
.marquee span{-webkit-text-stroke-width:.8px;letter-spacing:0}
/* keep the swashy italic accents in Cormorant, upright Didone around them */
.stage-copy h1 em,.hero h1 em,.xl em,.lg em,.band .big em,.visit h2 em,.prestige h2 em{
  font-family:var(--accent);font-style:italic;font-weight:600}
/* small caps labels: a hair more tracking for editorial rhythm */
.eyebrow{letter-spacing:.42em}
.room-body .lbl,.feature .body .lbl,.duo .body .lbl,.split .col .eyebrow{letter-spacing:.32em}
/* screen-reader-only (crawlable h1 on the clean hero) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============================================================
   Visit page — animated typographic hero (no photo).
   The lighthouse mark draws itself in, the type rises, on cream.
   ============================================================ */
.visit-hero{position:relative;min-height:90svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:clamp(116px,17vh,175px) var(--pad) clamp(108px,15vh,150px);overflow:hidden;
  background:radial-gradient(135% 105% at 50% 20%, var(--warm-white) 0%, var(--paper) 52%, var(--paper-2) 100%)}
.vh-inner{max-width:960px;display:flex;flex-direction:column;align-items:center;gap:clamp(18px,2.4vw,28px)}
@keyframes vhFade{to{opacity:1}}
@keyframes vhUp{to{opacity:1;transform:none}}
@keyframes vhRule{to{width:clamp(64px,7vw,92px)}}
.vh-eyebrow{color:var(--olive-deep);opacity:0;transform:translateY(10px);animation:vhUp .9s var(--ease) .25s forwards}
.vh-title{font-family:var(--fashion);font-weight:500;font-variation-settings:"opsz" 144,"wght" 490,"SOFT" 0,"WONK" 0;
  font-size:clamp(46px,7.6vw,112px);line-height:.98;letter-spacing:-.028em;color:var(--ink);margin:0;
  text-wrap:balance;opacity:0}
.vh-title.is-split{opacity:1}
.vh-title em{font-family:var(--accent);font-style:italic;font-weight:600;font-variation-settings:normal}
/* the unique bit: each letter resolves out of a soft blur, rising in a left-to-right wave */
.vh-title .ltr{display:inline-block;opacity:0;filter:blur(16px);transform:translateY(.32em) scale(1.08);
  animation:ltrIn .95s cubic-bezier(.2,.75,.25,1) both;animation-delay:calc(.45s + var(--i) * .04s);will-change:transform,filter,opacity}
.vh-title .ltr.sp{filter:none;animation:none;opacity:1}
/* the italic word arrives last, with a touch more lift and a whisper of skew that settles out */
.vh-title em .ltr{filter:blur(20px);transform:translateY(.42em) scale(1.12) skewX(-7deg)}
@keyframes ltrIn{to{opacity:1;filter:blur(0);transform:none}}
.vh-rule{width:0;height:1px;background:var(--olive-deep);opacity:.45;animation:vhRule 1.1s var(--ease) 1.1s forwards}
.vh-sub{font-family:var(--accent);font-size:clamp(19px,1.6vw,24px);line-height:1.55;color:var(--ink-soft);
  max-width:46ch;margin:0;opacity:0;transform:translateY(12px);animation:vhUp 1s var(--ease) 1.2s forwards}
.vh-meta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:center;margin-top:6px;
  font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--taupe);
  opacity:0;transform:translateY(10px);animation:vhUp 1s var(--ease) 1.4s forwards}
.vh-meta .vh-sep{color:var(--line)}
.vh-cue{position:absolute;bottom:clamp(26px,5vh,50px);left:50%;transform:translateX(-50%);
  font-family:var(--sans);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--taupe);
  display:flex;flex-direction:column;align-items:center;gap:12px;opacity:0;animation:vhFade 1s var(--ease) 1.7s forwards}
.vh-cue::after{content:"";width:1px;height:38px;background:linear-gradient(var(--taupe),transparent);
  transform-origin:top;animation:vhCue 2s ease-in-out infinite 1.8s}
@keyframes vhCue{0%,100%{transform:scaleY(.45);opacity:.35}50%{transform:scaleY(1);opacity:.9}}
@media(max-width:640px){.visit-hero{min-height:84svh;padding-top:clamp(110px,16vh,150px)}}
/* short viewports: give the content the room; the scroll cue would collide */
@media(max-height:680px){.visit-hero{min-height:0}.vh-cue{display:none}}
@media(prefers-reduced-motion:reduce){
  .vh-eyebrow,.vh-title,.vh-title .ltr,.vh-sub,.vh-meta,.vh-cue{
    animation:none!important;opacity:1!important;transform:none!important;filter:none!important}
  .vh-rule{animation:none!important;width:clamp(64px,7vw,92px)!important}
  .vh-cue::after{animation:none!important}
}

/* ============================================================
   Homepage "The Grounds" — full-bleed bird's-eye aerial with a
   slow cinematic push-in; text overlaid on a left scrim.
   ============================================================ */
/* overflow:visible so the map's linework can bleed up into the showcase and
   down into the duo; the bg reaches 240px into each neighbour and the mask
   dissolves the lines there, so there's no hard section edge. */
.aerial{position:relative;min-height:84svh;display:flex;align-items:center;overflow:visible;background:var(--paper)}
.aerial .aerial-bg{position:absolute;top:-240px;bottom:-170px;left:0;right:0;z-index:0;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 20%,#000 84%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 20%,#000 84%,transparent 100%)}
.aerial .aerial-bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.aerial-kb{opacity:.2}
/* lift the neighbouring sections' content above the bleeding watermark */
.showcase .frame,.showcase .cap,.duo .wrap{position:relative;z-index:1}
.aerial .wrap{position:relative;z-index:2;width:100%}
.aerial .col{max-width:min(46ch,540px);display:flex;flex-direction:column;gap:20px;color:var(--ink)}
.aerial .col .xl{color:var(--ink)}
.aerial .col .xl em{color:var(--olive-deep)}
.aerial .col p{font-family:var(--accent);font-size:clamp(18px,1.5vw,23px);line-height:1.6;color:var(--ink-soft);margin:0;max-width:44ch}
@media(max-width:640px){
  .aerial{min-height:70svh}
}
@media(prefers-reduced-motion:reduce){.aerial-kb{animation:none;transform:scale(1.04)}}

/* ===== Gallery — drifting marquee + lightbox (gallery.html) ===== */
.galleria{padding:clamp(38px,6vh,84px) 0 clamp(58px,10vh,128px);overflow:hidden;background:var(--paper)}
.galleria .g-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:clamp(22px,4vh,46px)}
.marquee{display:flex;flex-direction:column;gap:clamp(12px,1.5vw,22px)}
.mq-row{overflow:hidden}
.mq-track{display:flex;gap:clamp(12px,1.5vw,22px);width:max-content;will-change:transform}
.mq-item{position:relative;flex:none;height:clamp(208px,29vw,356px);margin:0;overflow:hidden;background:var(--paper-2);cursor:none}
.mq-item img{height:100%;width:auto;display:block;object-fit:cover;transition:transform 1s var(--ease),filter .6s var(--ease)}
.mq-item:hover img{transform:scale(1.05)}
.mq-row:hover .mq-item img{filter:saturate(.92) brightness(.84)}
.mq-row:hover .mq-item:hover img{filter:none}
@media (hover:none){.mq-item{cursor:pointer}}
@media (prefers-reduced-motion:reduce){.mq-row{overflow-x:auto;scrollbar-width:none}.mq-row::-webkit-scrollbar{display:none}}

.lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:rgba(19,19,21,.94);opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox .lb-img{max-width:88vw;max-height:86vh;object-fit:contain;box-shadow:0 30px 90px rgba(0,0,0,.55);transform:scale(.955);transition:transform .5s var(--ease)}
.lightbox.open .lb-img{transform:scale(1)}
.lightbox .lb-close,.lightbox .lb-nav{position:absolute;background:none;border:0;color:var(--warm-white);cursor:none;line-height:1;padding:10px}
.lightbox .lb-close{top:22px;right:28px;font-size:22px;opacity:.8;transition:opacity .3s}
.lightbox .lb-close:hover{opacity:1}
.lightbox .lb-nav{top:50%;transform:translateY(-50%);font-size:40px;opacity:.6;transition:opacity .3s,transform .3s}
.lightbox .lb-nav:hover{opacity:1}
.lightbox .lb-prev{left:clamp(8px,2vw,28px)}
.lightbox .lb-next{right:clamp(8px,2vw,28px)}
.lightbox .lb-count{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);color:var(--warm-white);font-family:var(--sans);font-size:11px;letter-spacing:.24em;opacity:.75}
@media (hover:none){.lightbox .lb-close,.lightbox .lb-nav{cursor:pointer}}

/* ===== full-height side-by-side feature (homepage aerial) ===== */
.sbs{display:grid;grid-template-columns:1fr 1fr;min-height:90svh;background:var(--paper)}
.sbs .sbs-media{position:relative;overflow:hidden}
.sbs .sbs-media img{width:100%;height:100%;object-fit:cover;display:block}
.sbs .sbs-body{display:flex;flex-direction:column;justify-content:center;gap:22px;padding:clamp(36px,6vw,104px)}
.sbs .sbs-body .xl{color:var(--ink)}
.sbs .sbs-body .xl em{color:var(--olive-deep)}
.sbs .sbs-body p{font-family:var(--accent);font-size:clamp(18px,1.5vw,23px);line-height:1.6;color:var(--ink-soft);margin:0;max-width:40ch}
@media(max-width:820px){.sbs{grid-template-columns:1fr}.sbs .sbs-media{min-height:56svh;order:-1}}

/* ===== full-width feature band (homepage aerial, edge-to-edge) ===== */
.wideshot{position:relative;width:100%;height:86svh;min-height:480px;overflow:hidden;background:var(--stone)}
.wideshot > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 46%}
.wideshot::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,14,16,.6) 0%,rgba(14,14,16,.12) 40%,rgba(14,14,16,0) 68%)}
.wideshot-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) clamp(38px,7vh,88px);display:flex;flex-direction:column;gap:14px;color:var(--warm-white)}
.wideshot-cap .xl,.wideshot-cap .xl em{color:var(--warm-white)}
@media(max-width:640px){.wideshot{height:66svh}}

/* opt a split-media out of the scroll-tilt (static photo) */
.split-media.no-tilt{transform:none!important}

/* spec strip readable on a dark full-bleed .band (Tower Courtyard feature) */
.band .spec{border-top-color:rgba(245,241,232,.22)}
.band .spec .k{color:rgba(245,241,232,.6)}
.band .spec .v{color:var(--warm-white)}

/* grounds Visit — show the full lighthouse (no zoom crop; favor top of frame) */
.visit.visit-lh{min-height:88svh}
.visit.visit-lh .media{inset:0;height:100%;transform:none}
.visit.visit-lh .media > img{height:100%;object-position:center 12%}

/* Story "Nothing else quite like it" — full-width stage, no box: generated
   objects (lighthouse + ribbon) float and slowly tumble across the whole pane
   like in zero-gravity, with depth-scaled cursor parallax (clay.global feel). */
.promise{position:relative;overflow:hidden;perspective:1300px;padding:clamp(120px,22vh,270px) 0}
.promise .wrap{position:relative;z-index:2;max-width:760px;text-align:center}
.promise-body{display:flex;flex-direction:column;align-items:center;gap:22px}
.promise-body .eyebrow{color:var(--olive-deep)}
.promise-body h2{font-family:var(--display);font-size:clamp(36px,5.4vw,68px);line-height:1.03;margin:0}
.promise-body h2 em{font-family:var(--accent);font-style:italic}
.promise-body p{font-family:var(--accent);font-size:clamp(18px,1.5vw,22px);line-height:1.6;color:var(--ink-soft);max-width:52ch;margin:0}
.pfloats{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.pfloat-w{position:absolute;will-change:transform;transition:transform .6s var(--ease)}
.pfloat-w > *{display:block;animation:ptumble 64s linear infinite}
.pfloat-w img{width:100%;height:auto;opacity:.88;filter:drop-shadow(0 24px 46px rgba(30,26,20,.15))}
.pfloat-w:nth-child(2) > *{animation-duration:82s;animation-direction:reverse}
.pfloat-w:nth-child(3) > *{animation-duration:98s}
.pfloat-w:nth-child(4) > *{animation-duration:72s;animation-direction:reverse}
.pfloat-w:nth-child(5) > *{animation-duration:108s}
.pfloat-w:nth-child(6) > *{animation-duration:88s;animation-direction:reverse}
@keyframes ptumble{
  0%{transform:translate(0,0) rotate(0deg)}
  25%{transform:translate(18px,-22px) rotate(90deg)}
  50%{transform:translate(2px,-34px) rotate(180deg)}
  75%{transform:translate(-18px,-16px) rotate(270deg)}
  100%{transform:translate(0,0) rotate(360deg)}
}
@media (prefers-reduced-motion:reduce){.pfloat-w > *{animation:none}}

/* Story "Come write the next chapter" — silk ribbon backdrop drifting in the
   wind, on a light paper ground (scoped so the shared dark .visit is untouched) */
.visit.visit-ribbon{background:var(--paper);color:var(--ink)}
.visit.visit-ribbon::after{display:none}
.visit.visit-ribbon .eyebrow{color:var(--olive-deep)}
.visit.visit-ribbon .col > p{color:var(--ink-soft)}
.visit.visit-ribbon .contactcard{border-left-color:var(--line)}
.visit.visit-ribbon .contactcard .k{color:var(--taupe)}
.visit.visit-ribbon .contactcard .v{color:var(--ink)}
@media(max-width:640px){.visit.visit-ribbon .contactcard{border-top-color:var(--line)}}
.ribbonwind{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.ribbonwind .rw{position:absolute;will-change:transform;filter:drop-shadow(0 24px 44px rgba(30,26,20,.12))}
.ribbonwind .rw.a{top:-6%;right:-6%;width:min(52vw,680px);opacity:.55;animation:windwave 9s ease-in-out infinite alternate}
.ribbonwind .rw.b{bottom:-12%;left:-8%;width:min(42vw,560px);opacity:.4;animation:windwave 12.5s ease-in-out infinite alternate-reverse}
@keyframes windwave{
  0%{transform:translate3d(0,0,0) rotate(-2.5deg) skewX(-4deg) scaleY(1)}
  50%{transform:translate3d(-1.5%,-1%,0) rotate(1.5deg) skewX(3deg) scaleY(1.03)}
  100%{transform:translate3d(1%,1.5%,0) rotate(-1deg) skewX(-2deg) scaleY(.975)}
}
@media (prefers-reduced-motion:reduce){.ribbonwind .rw{animation:none}}

/* Story closing — ONE continuous section: lighthouses tumble up top, silk
   ribbons flow up from the "Come write the next chapter" area into the tower
   area, so the two read as a single floating scene (no seam between them). */
.storyclose{position:relative;overflow:hidden;perspective:1300px;background:var(--paper);color:var(--ink)}
.floatfield{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.floatfield .rw{position:absolute;will-change:transform;filter:drop-shadow(0 24px 44px rgba(30,26,20,.12))}
.floatfield .rw.a{top:17%;right:-5%;width:min(46vw,620px);opacity:.5;animation:windwave 9.5s ease-in-out infinite alternate}
.floatfield .rw.b{top:43%;left:-8%;width:min(40vw,540px);opacity:.42;animation:windwave 12s ease-in-out infinite alternate-reverse}
.floatfield .rw.c{bottom:-8%;right:1%;width:min(42vw,560px);opacity:.5;animation:windwave 11s ease-in-out infinite alternate}
.storyclose .wrap{position:relative;z-index:2}
.sc-promise{text-align:center;padding-top:clamp(120px,20vh,250px);padding-bottom:clamp(56px,8vh,110px)}
.sc-promise .promise-body{max-width:760px;margin:0 auto}
.sc-visit{display:grid;grid-template-columns:1.1fr auto .9fr;gap:clamp(28px,5vw,74px);align-items:center;padding-top:clamp(30px,5vh,70px);padding-bottom:clamp(120px,18vh,220px)}
.sc-visit .col{display:flex;flex-direction:column}
.sc-visit h2{font-family:var(--display);font-size:clamp(40px,6vw,88px);line-height:1;margin:.2em 0 0;letter-spacing:-.03em}
.sc-visit h2 em{font-family:var(--accent);font-style:italic}
.sc-visit .col > p{font-family:var(--accent);font-size:clamp(19px,1.6vw,24px);line-height:1.5;color:var(--ink-soft);max-width:40ch;margin:22px 0 0}
.sc-visit .actions{display:flex;gap:18px;flex-wrap:wrap;margin-top:36px}
.sc-visit .contactcard{border-left:0;padding-left:0}
.sc-visit .contactcard .k{color:var(--taupe)}
.sc-visit .contactcard .v{color:var(--ink)}
.sc-sep{display:flex;align-items:center;justify-content:center;align-self:stretch}
.sc-sep img{height:clamp(150px,25vh,250px);width:auto;display:block;opacity:.95;transform:rotate(10deg);
  filter:drop-shadow(0 20px 26px rgba(30,26,20,.20)) drop-shadow(0 3px 5px rgba(30,26,20,.12))}
@media(max-width:640px){
  .sc-visit{grid-template-columns:1fr;gap:30px}
  .sc-visit .contactcard{border-left:0;border-top:0;padding-left:0;padding-top:0}
  .sc-sep img{height:120px}
}

/* the centered lighthouse tucked in the gap under the promise paragraph stays
   upright with a gentle sway (a full tumble is too tall for that small space) */
.floatfield .pfloat-w:nth-child(3) > *{animation:swaylite 13s ease-in-out infinite alternate}
.floatfield .pfloat-w:nth-child(4) > *{animation:swaycastle 16s ease-in-out infinite alternate}
@keyframes swaylite{from{transform:translateY(-7px) rotate(-7deg)}to{transform:translateY(9px) rotate(7deg)}}
@keyframes swaycastle{from{transform:translateY(-10px) rotate(-4deg)}to{transform:translateY(11px) rotate(4deg)}}

/* Story closing — marble crest centerpiece (Module: Our Story emblem) */
.sc-emblem{position:relative;z-index:4;text-align:center;margin:4px auto 10px}
.sc-emblem img{display:inline-block;width:clamp(122px,15vw,182px);height:auto;
  filter:drop-shadow(0 22px 32px rgba(30,26,20,.20)) drop-shadow(0 2px 4px rgba(30,26,20,.10))}
@media (max-width:640px){.sc-emblem img{width:118px}}

/* Story hero — marble crest at the top */
.hero-crest{margin:0 0 22px}
.hero-crest img{display:block;width:clamp(76px,7.2vw,108px);height:auto;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.55)) drop-shadow(0 2px 4px rgba(0,0,0,.4))}
@media (max-width:640px){.hero-crest img{width:72px}}

/* Story hero — emblem showcase (photo removed; marble crest with depth) */
.hero-emblem{color:var(--ink);align-items:flex-start;justify-content:center;text-align:center;
  background:radial-gradient(125% 105% at 50% 42%, #F7F4ED 0%, #EFEAE0 56%, #E6E0D4 100%)}
.hero.sub.hero-emblem{height:auto;min-height:92vh}
.hero-emblem::after{display:none}
.hero-emblem .hero-inner{max-width:840px;margin:0 auto;padding:clamp(138px,19vh,198px) var(--pad) clamp(64px,9vh,104px);
  align-items:center;text-align:center;gap:20px}
.hero-emblem .eyebrow{color:var(--taupe)}
.hero-emblem h1{color:var(--ink);max-width:16ch}
.hero-emblem .sub-txt{color:var(--ink-soft);margin:0 auto}
.he-crest{margin:0 0 12px;cursor:pointer;-webkit-tap-highlight-color:transparent;perspective:1200px}
.coin{position:relative;width:clamp(196px,26vw,326px);margin:0 auto;transform-style:preserve-3d;
  animation:heFloat 7.5s ease-in-out infinite alternate;will-change:transform}
.coin img{display:block;width:100%;height:auto}
.coin .coin-edge{position:absolute;inset:0}
.coin .coin-face{position:relative;filter:drop-shadow(0 38px 44px rgba(30,26,20,.30))}
.he-crest.spin .coin{animation:heSpin 1.25s cubic-bezier(.42,.04,.2,1)}
@keyframes heFloat{from{transform:translateY(-7px)}to{transform:translateY(9px)}}
@keyframes heSpin{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}
@media (prefers-reduced-motion:reduce){.coin{animation:none}}
@media (max-width:640px){.coin{width:min(64vw,240px)}}

/* Story band — text on the RIGHT (real dusk shot: tower sits on the left) */
.band-right::after{background:linear-gradient(270deg,rgba(14,14,16,.82) 0%,rgba(14,14,16,.42) 46%,rgba(14,14,16,.06) 100%)}
.band-right .wrap{display:flex}
.band-right .col{margin-left:auto}

/* Story band — keep the tower (right edge) visible on narrow/phone screens */
@media (max-width:760px){
  .band img.tower-band{object-position:86% 50% !important}
}

/* Story hero crest — coin flip: handled in the .coin block above */

/* ===== Gallery — 3D floating photo field ===== */
.gallery3d{position:relative;height:100svh;min-height:660px;overflow:hidden;
  background:radial-gradient(130% 115% at 50% 40%, #FCFAF4 0%, #F1ECE1 60%, #E2DBCD 100%);
  perspective:1250px;perspective-origin:50% 47%}
.gallery3d::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 46%, transparent 55%, rgba(40,36,28,.14) 100%)}
.g3d-stage{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;z-index:2}
.g3d-photo{position:absolute;top:50%;left:50%;margin:0;will-change:transform,filter}
.g3d-photo img{display:block;width:100%;height:100%;object-fit:cover;border-radius:3px;
  box-shadow:0 30px 60px rgba(30,26,20,.26), 0 4px 12px rgba(30,26,20,.16);
  -webkit-user-drag:none;user-select:none;pointer-events:none}
.g3d-photo.front{cursor:pointer}
.g3d-photo.front img{box-shadow:0 55px 95px rgba(30,26,20,.42), 0 10px 24px rgba(30,26,20,.24)}
.g3d-photo .cap{position:absolute;left:50%;transform:translateX(-50%);bottom:-30px;white-space:nowrap;
  opacity:0;transition:opacity .5s ease;font-family:var(--sans);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-soft)}
.g3d-photo.front .cap{opacity:1}
.g3d-ui{position:absolute;left:0;right:0;bottom:clamp(26px,5.5vh,60px);z-index:5;text-align:center;pointer-events:none;color:var(--ink)}
.g3d-ui .eyebrow{color:var(--taupe)}
.g3d-h{font-family:var(--display);font-weight:400;font-size:clamp(30px,5vw,62px);line-height:1;margin:6px 0 0;letter-spacing:.01em}
.g3d-h em{font-family:var(--accent);font-style:italic}
.g3d-hint{font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--taupe);margin:13px 0 0}
.g3d-fallback{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding-top:90px}
.g3d-fallback img{width:100%;height:100%;object-fit:cover;border-radius:3px}
@media (max-width:760px){
  .g3d-hint{display:none}
  .g3d-fallback{grid-template-columns:repeat(2,1fr)}
}

/* ===== Wedding story page ===== */
.story-gallery{padding:clamp(12px,3vh,44px) 0 clamp(44px,7vh,96px)}
.sg-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:1fr;gap:12px}
.sg-grid figure{margin:0;position:relative;overflow:hidden;border-radius:2px}
.sg-grid img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:3/2}
.sg-grid .sg-wide{grid-column:span 4}
.sg-grid .sg-sq{grid-column:span 2}
.sg-grid .sg-tall{grid-column:span 2}
.sg-grid .sg-tall img{aspect-ratio:2/3}
@media(max-width:760px){.sg-grid{grid-template-columns:repeat(2,1fr)}.sg-grid .sg-wide,.sg-grid .sg-sq,.sg-grid .sg-tall{grid-column:span 1}.sg-grid .sg-tall img{aspect-ratio:3/2}}
.story-details ul{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:16px 44px}
.story-details li{font-family:var(--accent);font-size:19px;color:var(--ink-soft);border-top:1px solid var(--line);padding-top:13px}
.story-details li b{display:block;font-family:var(--sans);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--taupe);margin-bottom:5px;font-weight:500}
@media(max-width:640px){.story-details ul{grid-template-columns:1fr}}
.story-back{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe)}

/* ===== Gallery — calm mosaic wall with hover depth ===== */
.gal-wall{background:var(--paper);padding:clamp(118px,16vh,188px) 0 clamp(70px,11vh,140px)}
.gw-head{text-align:center;margin-bottom:clamp(34px,5vh,62px)}
.gw-head .eyebrow{color:var(--taupe)}
.gw-h{font-family:var(--display);font-weight:400;font-size:clamp(34px,6vw,78px);line-height:1;margin:8px 0 0;letter-spacing:.01em}
.gw-h em{font-family:var(--accent);font-style:italic}
.gal-grid{column-count:4;column-gap:16px}
.gal-item{break-inside:avoid;margin:0 0 16px;position:relative;display:block;cursor:pointer;
  transition:transform .5s var(--ease);will-change:transform}
.gal-item img{width:100%;height:auto;display:block;border-radius:2px;
  box-shadow:0 14px 34px rgba(30,26,20,.13);transition:box-shadow .5s var(--ease)}
.gal-item:hover{transform:translateY(-9px) scale(1.02);z-index:3}
.gal-item:hover img{box-shadow:0 36px 68px rgba(30,26,20,.30)}
.gg-cap{position:absolute;left:0;right:0;bottom:0;padding:44px 18px 16px;color:#fff;
  font-family:var(--display);font-size:21px;line-height:1.05;opacity:0;transition:opacity .45s var(--ease);
  background:linear-gradient(to top,rgba(14,12,10,.74),rgba(14,12,10,0));border-radius:0 0 2px 2px;pointer-events:none}
.gg-cap span{display:block;font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.9);margin-top:7px}
.gal-item.has-story:hover .gg-cap{opacity:1}
.gal-item.has-story::after{content:"Story";position:absolute;top:12px;left:12px;z-index:2;
  font-family:var(--sans);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:#fff;
  background:rgba(14,12,10,.5);backdrop-filter:blur(3px);padding:5px 10px;border-radius:20px;opacity:0;transition:opacity .45s}
.gal-item.has-story:hover::after{opacity:1}
@media(max-width:1100px){.gal-grid{column-count:3}}
@media(max-width:760px){.gal-grid{column-count:2;column-gap:12px}.gal-item{margin-bottom:12px}}
@media(max-width:430px){.gal-grid{column-count:1}}
@media (prefers-reduced-motion:reduce){.gal-item,.gal-item img{transition:none}.gal-item:hover{transform:none}}

/* ===== Gallery — three drifting photo rows ===== */
.gal-strips{background:var(--paper);padding:clamp(112px,15vh,176px) 0 clamp(52px,8vh,96px);overflow:hidden}
.gs-head{text-align:center;margin-bottom:clamp(28px,4.5vh,54px)}
.gs-head .eyebrow{color:var(--taupe)}
.gs-h{font-family:var(--display);font-weight:400;font-size:clamp(32px,5.5vw,74px);line-height:1;margin:7px 0 0;letter-spacing:.01em}
.gs-h em{font-family:var(--accent);font-style:italic}
.gs-rows{display:flex;flex-direction:column;gap:clamp(12px,1.5vw,20px)}
.gs-row{overflow:hidden}
.gs-track{display:flex;gap:clamp(12px,1.5vw,20px);width:max-content;will-change:transform}
.gs-item{position:relative;height:clamp(188px,25vh,300px);flex:0 0 auto;cursor:pointer;
  transition:transform .5s var(--ease)}
.gs-item img{height:100%;width:auto;display:block;border-radius:2px;
  box-shadow:0 14px 32px rgba(30,26,20,.14);transition:box-shadow .5s var(--ease)}
.gs-item:hover{transform:translateY(-8px) scale(1.03);z-index:3}
.gs-item:hover img{box-shadow:0 34px 64px rgba(30,26,20,.30)}
.gs-item .gg-cap{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 14px;color:#fff;
  font-family:var(--display);font-size:19px;line-height:1.05;opacity:0;transition:opacity .45s var(--ease);
  background:linear-gradient(to top,rgba(14,12,10,.74),rgba(14,12,10,0));border-radius:0 0 2px 2px;pointer-events:none}
.gs-item .gg-cap span{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.9);margin-top:6px}
.gs-item.has-story:hover .gg-cap{opacity:1}
.gs-item.has-story::after{content:"Story";position:absolute;top:11px;left:11px;z-index:2;
  font-family:var(--sans);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#fff;
  background:rgba(14,12,10,.5);backdrop-filter:blur(3px);padding:5px 9px;border-radius:20px;opacity:0;transition:opacity .45s}
.gs-item.has-story:hover::after{opacity:1}
@media(max-width:760px){.gs-item{height:clamp(150px,20vh,220px)}}

/* Gallery — photography credits */
.gs-credits{text-align:center;margin-top:clamp(44px,7.5vh,96px)}
.gs-credits .eyebrow{color:var(--taupe)}
.gs-cred-list{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 30px;margin:15px 0 0}
.gs-cred-list a{font-family:var(--display);font-size:clamp(20px,2.4vw,30px);line-height:1.4;color:var(--ink);transition:color .3s var(--ease)}
.gs-cred-list a:hover{color:var(--taupe)}
.gs-cred-note{font-family:var(--accent);font-style:italic;font-size:15px;color:var(--taupe);margin:16px auto 0;max-width:54ch}
.gs-cred-todo{opacity:.6;font-style:normal;font-family:var(--sans);font-size:11px;letter-spacing:.06em}

/* Lightbox — subtle per-photo photography credit */
.lb-credit{position:absolute;left:0;right:0;bottom:24px;text-align:center;pointer-events:none;
  font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,241,232,.62)}

/* Weddings — separate the "What We Host" heading from the first room image below it */
#host .section-head{padding-bottom:clamp(64px,11vh,124px)}
@media(max-width:760px){#host .section-head{padding-bottom:52px}}

/* ---- Images show immediately: no grey placeholder box, no wipe/reveal delay ---- */
.media{background:transparent}
.media .placeholder{display:none!important}
.mrev,.mrev.in{clip-path:none!important;transform:none!important;opacity:1!important}