/* ============================================================
   Windsor Photo and Video Co.
   Palette + type derived from the logo.
   ============================================================ */

:root{
  --cream:      #F5F1EA;
  --paper:      #FAF8F5;
  --ink:        #111111;
  --ink-soft:   #4A463F;
  --gold:       #A08B5B;
  --taupe:      #D9D1C5;

  --display: "Playfair Display", Georgia, serif;
  --sans:    "Jost", "Helvetica Neue", Arial, sans-serif;

  --gut: clamp(1.25rem, 4vw, 3rem);
  --max: 1240px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(0.95rem, 0.9rem + 0.2vw, 1.0625rem);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }

.skip{
  position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--cream);
  padding:.75rem 1rem; z-index:200;
}
.skip:focus{ left:0; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* ---------- type ---------- */

h1,h2,h3{ font-family:var(--display); font-weight:400; margin:0; line-height:1.15; }

.eyebrow{
  font-family:var(--sans);
  font-size:.6875rem;
  font-weight:400;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 1.25rem;
}

.rule{
  width:64px; height:1px; background:var(--gold);
  border:0; margin:1.75rem 0;
}
.rule.center{ margin-inline:auto; }

/* ---------- header ---------- */

.site-head{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding-block:1.15rem;
  transition:background .4s ease, padding .4s ease, box-shadow .4s ease;
}
.site-head.solid{
  background:rgba(245,241,234,.94);
  backdrop-filter:blur(10px);
  padding-block:.6rem;
  box-shadow:0 1px 0 rgba(17,17,17,.08);
}

.head-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }

.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--ink); }
.brand-mark{ color:var(--ink); display:block; }
.brand-type{ display:flex; flex-direction:column; line-height:1; }
.brand-name{
  font-family:var(--display); font-size:1.15rem; letter-spacing:.16em; text-transform:uppercase;
}
.brand-sub{
  font-family:var(--sans); font-size:.5rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--ink-soft); margin-top:.3rem;
}

.nav{ display:flex; align-items:center; gap:2rem; }
.nav a{
  text-decoration:none; font-size:.75rem; letter-spacing:.2em;
  text-transform:uppercase; position:relative; padding-block:.3rem;
}
.nav a:not(.nav-cta)::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--gold); transition:width .35s ease;
}
.nav a:not(.nav-cta):hover::after{ width:100%; }

.nav-cta{
  border:1px solid var(--ink); padding:.6rem 1.2rem;
  transition:background .3s ease, color .3s ease;
}
.nav-cta:hover{ background:var(--ink); color:var(--cream); }

.nav-toggle{
  display:none; background:none; border:0; cursor:pointer;
  width:34px; height:26px; padding:0; position:relative;
}
.nav-toggle span{
  display:block; height:1px; background:var(--ink); width:100%;
  position:absolute; left:0; transition:transform .3s ease, opacity .3s ease;
}
.nav-toggle span:nth-child(1){ top:8px; }
.nav-toggle span:nth-child(2){ top:16px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ transform:translateY(-4px) rotate(-45deg); }

/* ---------- hero ---------- */

.hero{
  position:relative; min-height:100svh;
  display:grid; place-items:center;
  overflow:hidden; background:var(--ink);
}

.hero-media{
  position:absolute; inset:0;
  clip-path:circle(0% at 50% 50%);
  animation:aperture 1.7s cubic-bezier(.65,.02,.2,1) .25s forwards;
}
@keyframes aperture{ to{ clip-path:circle(85% at 50% 50%); } }

.hero-media img,
.hero-media .ph{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.12);
  animation:heroDrift 14s ease-out .25s forwards;
}
@keyframes heroDrift{ to{ transform:scale(1); } }

.hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(17,17,17,.34) 0%, rgba(17,17,17,.12) 40%, rgba(17,17,17,.6) 100%);
}

.hero-inner{
  position:relative; z-index:2; text-align:center; color:var(--cream);
  padding-inline:var(--gut);
  opacity:0; animation:fadeUp 1.1s ease 1.3s forwards;
}
@keyframes fadeUp{ from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:none;} }

.hero h1{
  font-size:clamp(2.4rem, 1.4rem + 4.6vw, 5.2rem);
  letter-spacing:.02em;
}
.hero h1 em{ font-style:italic; color:#EFE7D6; }

.hero-sub{
  font-size:.75rem; letter-spacing:.34em; text-transform:uppercase;
  margin:1.6rem 0 0; color:rgba(245,241,234,.85);
}

.hero-actions{ margin-top:2.6rem; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

.btn{
  display:inline-block; text-decoration:none;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  padding:1rem 2rem; border:1px solid currentColor;
  transition:background .35s ease, color .35s ease, border-color .35s ease;
}
.btn-light{ color:var(--cream); }
.btn-light:hover{ background:var(--cream); color:var(--ink); }
.btn-dark{ color:var(--ink); }
.btn-dark:hover{ background:var(--ink); color:var(--cream); }
.btn-gold{ color:var(--gold); border-color:var(--gold); }
.btn-gold:hover{ background:var(--gold); color:var(--paper); border-color:var(--gold); }

.scroll-hint{
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  z-index:2; color:rgba(245,241,234,.7);
  font-size:.6rem; letter-spacing:.3em; text-transform:uppercase;
  opacity:0; animation:fadeUp 1s ease 2s forwards;
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
}
.scroll-hint::after{
  content:""; width:1px; height:44px;
  background:linear-gradient(180deg, rgba(245,241,234,.7), transparent);
}

/* ---------- sections ---------- */

.section{ padding-block:clamp(4.5rem, 9vw, 8.5rem); }
.section-paper{ background:var(--paper); }

.statement{ max-width:62ch; margin-inline:auto; text-align:center; }
.statement h2{
  font-size:clamp(1.5rem, 1rem + 2vw, 2.5rem);
  line-height:1.35;
}
.statement p{ color:var(--ink-soft); margin-top:1.5rem; }

/* ---------- services ---------- */

.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; margin-bottom:3rem; }
.sec-head h2{ font-size:clamp(1.9rem, 1.2rem + 2.4vw, 3.2rem); }
.sec-head p{ max-width:46ch; color:var(--ink-soft); margin:0; }

.svc-grid{ display:grid; gap:1.5rem; grid-template-columns:repeat(3, 1fr); }

.svc{ text-decoration:none; color:inherit; display:block; }
.svc-figure{ position:relative; overflow:hidden; aspect-ratio:3/4; background:var(--taupe); }
.svc-figure img,
.svc-figure .ph{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.svc:hover .svc-figure img,
.svc:hover .svc-figure .ph{ transform:scale(1.06); }

.svc-figure::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 45%, rgba(17,17,17,.55));
  opacity:0; transition:opacity .5s ease;
}
.svc:hover .svc-figure::after{ opacity:1; }

.svc-body{ padding-top:1.35rem; }
.svc-body h3{ font-size:1.4rem; }
.svc-body p{ color:var(--ink-soft); font-size:.9rem; margin:.6rem 0 0; }
.svc-more{
  display:inline-block; margin-top:1rem;
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold);
}

/* ---------- gallery ---------- */

.gal{ display:grid; gap:1rem; grid-template-columns:repeat(4, 1fr); }
.gal > *{ overflow:hidden; background:var(--taupe); }
.gal img, .gal .ph{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s cubic-bezier(.2,.7,.2,1); }
.gal > *:hover img, .gal > *:hover .ph{ transform:scale(1.05); }
.gal .tall{ grid-row:span 2; }
.g1{ aspect-ratio:3/4; } .g2{ aspect-ratio:4/5; } .g3{ aspect-ratio:1; }

/* ---------- split / about ---------- */

.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.split-media{ aspect-ratio:4/5; overflow:hidden; background:var(--taupe); }
.split-media img, .split-media .ph{ width:100%; height:100%; object-fit:cover; }
.split h2{ font-size:clamp(1.8rem, 1.2rem + 2vw, 2.9rem); }
.split p{ color:var(--ink-soft); }

.stats{ display:flex; gap:2.5rem; margin-top:2.5rem; flex-wrap:wrap; }
.stat b{ font-family:var(--display); font-size:2rem; font-weight:400; display:block; line-height:1; }
.stat span{ font-size:.65rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-soft); }

/* ---------- quote ---------- */

.quote{ max-width:60ch; margin-inline:auto; text-align:center; }
.quote blockquote{
  font-family:var(--display); font-size:clamp(1.25rem,1rem + 1.4vw,1.9rem);
  font-style:italic; line-height:1.5; margin:0;
}
.quote cite{
  display:block; margin-top:1.8rem; font-style:normal;
  font-size:.68rem; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-soft);
}

/* ---------- faq ---------- */

.faq{ max-width:820px; margin-inline:auto; }
.faq details{ border-top:1px solid rgba(17,17,17,.14); }
.faq details:last-of-type{ border-bottom:1px solid rgba(17,17,17,.14); }
.faq summary{
  cursor:pointer; list-style:none; padding:1.5rem 2.5rem 1.5rem 0;
  font-family:var(--display); font-size:clamp(1.05rem,1rem + .35vw,1.3rem);
  position:relative;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:.3rem; top:50%; width:11px; height:1px;
  background:var(--gold); transition:transform .3s ease;
}
.faq summary::before{
  content:""; position:absolute; right:.3rem; top:50%; width:11px; height:1px;
  background:var(--gold); transform:rotate(90deg); transition:transform .3s ease, opacity .3s ease;
}
.faq details[open] summary::before{ opacity:0; transform:rotate(0); }
.faq p{ margin:0 0 1.6rem; color:var(--ink-soft); max-width:66ch; }

/* ---------- cta ---------- */

.cta{ background:var(--ink); color:var(--cream); text-align:center; }
.cta h2{ font-size:clamp(1.9rem,1.2rem + 2.6vw,3.4rem); max-width:18ch; margin-inline:auto; }
.cta p{ color:rgba(245,241,234,.72); max-width:46ch; margin:1.4rem auto 2.4rem; }

/* ---------- footer ---------- */

.site-foot{ background:var(--paper); padding-block:4rem 2rem; border-top:1px solid rgba(17,17,17,.1); }
.foot-top{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:2.5rem; }
.foot-brand .brand-name{ font-family:var(--display); font-size:1.3rem; letter-spacing:.16em; text-transform:uppercase; display:block; }
.foot-brand .brand-sub{ font-size:.55rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-soft); display:block; margin-top:.4rem; }
.foot-line{ margin-top:1.4rem; color:var(--ink-soft); max-width:38ch; font-size:.9rem; }
.foot-col h3{ font-family:var(--sans); font-size:.65rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); margin-bottom:1.1rem; }
.foot-col a, .foot-static{ display:block; text-decoration:none; font-size:.9rem; color:var(--ink-soft); padding-block:.35rem; }
.foot-col a:hover{ color:var(--ink); }
.foot-base{
  margin-top:3rem; padding-top:1.5rem; border-top:1px solid rgba(17,17,17,.1);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);
}

/* ---------- placeholders (delete once real photos are in) ---------- */

.ph{
  background:
    repeating-linear-gradient(45deg, rgba(160,139,91,.07) 0 12px, transparent 12px 24px),
    linear-gradient(160deg, #E3DCD0, #CFC5B6);
  display:grid; place-items:center; text-align:center;
}
.ph span{
  font-size:.58rem; letter-spacing:.26em; text-transform:uppercase;
  color:#7C7263; padding:.5rem 1rem; border:1px solid rgba(124,114,99,.4);
}

/* ---------- reveal on scroll ---------- */

.reveal{ opacity:0; transform:translateY(26px); transition:opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- responsive ---------- */

@media (max-width: 900px){
  .svc-grid{ grid-template-columns:1fr 1fr; }
  .gal{ grid-template-columns:repeat(2,1fr); }
  .split{ grid-template-columns:1fr; }
  .foot-top{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 680px){
  .nav-toggle{ display:block; position:relative; z-index:2001; }
  .nav{
    position:fixed; top:0; left:0; right:0;
    width:100vw; height:100vh; height:100dvh; min-height:100vh;
    background:var(--cream);
    flex-direction:column; justify-content:center; gap:2rem;
    transform:translateX(100%); transition:transform .45s cubic-bezier(.2,.7,.2,1);
    z-index:2000; overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  .nav.open{ transform:none; }
  .nav a{ font-size:1rem; }
  .svc-grid{ grid-template-columns:1fr; }
  .foot-top{ grid-template-columns:1fr; }
  .sec-head{ flex-direction:column; align-items:flex-start; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .hero-media{ clip-path:none; }
  .hero-inner,.scroll-hint{ opacity:1; }
  .reveal{ opacity:1; transform:none; }
}

/* ============================================================
   v2 — dynamic layer
   ============================================================ */

/* ---- hero slideshow ---- */
.hero-slides{ position:absolute; inset:0; }
.hero-slide{
  position:absolute; inset:0; opacity:0;
  transition:opacity 1.6s ease;
}
.hero-slide.active{ opacity:1; }
.hero-slide > *{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1);
  transition:transform 7s linear;
}
.hero-slide.active > *{ transform:scale(1.09); }

.hero-dots{
  position:absolute; bottom:2.2rem; right:var(--gut); z-index:3;
  display:flex; gap:.6rem;
}
.hero-dots button{
  width:26px; height:2px; border:0; padding:0; cursor:pointer;
  background:rgba(245,241,234,.35); transition:background .4s ease;
}
.hero-dots button.on{ background:var(--cream); }

/* ---- marquee ---- */
.marquee{
  overflow:hidden; border-block:1px solid rgba(17,17,17,.12);
  background:var(--paper); padding-block:1.1rem;
}
.marquee-track{
  display:flex; gap:2.5rem; width:max-content;
  animation:slide 38s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-50%); } }

.marquee-item{
  display:flex; align-items:center; gap:2.5rem;
  font-family:var(--display); font-size:clamp(1rem,.8rem + .8vw,1.5rem);
  font-style:italic; white-space:nowrap; color:var(--ink);
}
.marquee-item::after{
  content:""; width:5px; height:5px; border-radius:50%; background:var(--gold); flex:none;
}
.marquee-thumb{ width:74px; height:52px; flex:none; overflow:hidden; }

/* ---- horizontal drag portfolio ---- */
.hscroll-head{ margin-bottom:2rem; }
.hscroll{
  display:flex; gap:1.25rem; overflow-x:auto; padding-bottom:1.5rem;
  scroll-snap-type:x proximity; cursor:grab;
  scrollbar-width:thin; scrollbar-color:var(--taupe) transparent;
  padding-inline:var(--gut);
}
.hscroll.dragging{ cursor:grabbing; scroll-snap-type:none; }
.hscroll::-webkit-scrollbar{ height:2px; }
.hscroll::-webkit-scrollbar-thumb{ background:var(--taupe); }
.hscroll-item{
  flex:0 0 clamp(230px, 26vw, 360px); scroll-snap-align:start;
  user-select:none;
}
.hscroll-figure{ aspect-ratio:3/4; overflow:hidden; background:var(--taupe); }
.hscroll-figure > *{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1), filter .6s ease;
}
.hscroll-item:hover .hscroll-figure > *{ transform:scale(1.07); }
.hscroll-cap{
  display:flex; justify-content:space-between; gap:1rem;
  margin-top:.9rem; font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft);
}
.hscroll-hint{
  font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold);
}

/* ---- filterable gallery + lightbox ---- */
.filters{ display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:2.2rem; }
.filters button{
  background:none; border:1px solid rgba(17,17,17,.18); cursor:pointer;
  font-family:var(--sans); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  padding:.65rem 1.15rem; color:var(--ink-soft);
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.filters button:hover{ border-color:var(--ink); color:var(--ink); }
.filters button.on{ background:var(--ink); border-color:var(--ink); color:var(--cream); }

.gal-item{ transition:opacity .5s ease, transform .5s ease; cursor:zoom-in; }
.gal-item.hide{ display:none; }

.lightbox{
  position:fixed; inset:0; z-index:300; background:rgba(17,17,17,.94);
  display:none; place-items:center; padding:var(--gut);
}
.lightbox.open{ display:grid; }
.lightbox figure{ margin:0; max-width:min(1100px,92vw); max-height:86vh; }
.lightbox figure > *{ max-width:100%; max-height:78vh; width:auto; height:auto; }
.lightbox figcaption{
  color:rgba(245,241,234,.7); margin-top:1rem; text-align:center;
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
}
.lb-close, .lb-prev, .lb-next{
  position:absolute; background:none; border:0; cursor:pointer;
  color:var(--cream); font-size:1.6rem; line-height:1; padding:1rem;
}
.lb-close{ top:1rem; right:1rem; }
.lb-prev{ left:.5rem; top:50%; transform:translateY(-50%); }
.lb-next{ right:.5rem; top:50%; transform:translateY(-50%); }

/* ---- sticky split ---- */
.sticky-split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:start; }
.sticky-media{ position:sticky; top:14vh; aspect-ratio:4/5; overflow:hidden; background:var(--taupe); }
.sticky-media > *{ width:100%; height:100%; object-fit:cover; }
.sticky-copy > div{ min-height:52vh; display:flex; flex-direction:column; justify-content:center; }

/* ---- counters ---- */
.stat b{ font-variant-numeric:tabular-nums; }

/* ---- varied placeholders so motion is visible ---- */
.ph.t1{ background:linear-gradient(150deg,#8E8375,#4A4038); }
.ph.t2{ background:linear-gradient(150deg,#D8CDBB,#A79880); }
.ph.t3{ background:linear-gradient(150deg,#6E6A63,#2A2723); }
.ph.t4{ background:linear-gradient(150deg,#E6DCCB,#BFAE93); }
.ph.t5{ background:linear-gradient(150deg,#A08B5B,#5C4E33); }
.ph.t6{ background:linear-gradient(150deg,#B9AE9C,#6B6157); }
.ph.t1 span,.ph.t3 span,.ph.t5 span{ color:rgba(245,241,234,.75); border-color:rgba(245,241,234,.4); }

@media (max-width:900px){
  .sticky-split{ grid-template-columns:1fr; }
  .sticky-media{ position:relative; top:0; }
  .sticky-copy > div{ min-height:0; padding-block:2rem; }
}

/* real images inside the gallery grid keep their aspect boxes */
.gal-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.gal-item{ overflow:hidden; background:var(--taupe); }
.gal-item.tall{ grid-row:span 2; }
.gal-item:not(.tall){ aspect-ratio:1; }
.gal-item.tall{ aspect-ratio:3/4; }
.marquee-thumb img{ width:100%; height:100%; object-fit:cover; }
.hero-slide img{ object-position:center 38%; }
.lightbox figure img{ object-fit:contain; }

/* ============================================================
   v3 — advanced scroll motion
   ============================================================ */

/* image wipe reveal */
.wipe{ overflow:hidden; }
.wipe > img, .wipe > .ph{
  clip-path:inset(0 0 100% 0);
  transform:scale(1.16);
  transition:clip-path 1.35s cubic-bezier(.76,0,.24,1), transform 1.8s cubic-bezier(.16,1,.3,1);
}
.wipe.in > img, .wipe.in > .ph{ clip-path:inset(0 0 0 0); transform:scale(1); }

/* line-by-line heading reveal */
.lines{ overflow:hidden; }
.line-mask{ display:block; overflow:hidden; }
.line-mask > span{
  display:block;
  transform:translateY(105%);
  transition:transform 1.05s cubic-bezier(.16,1,.3,1);
}
.lines.in .line-mask > span{ transform:translateY(0); }
.lines.in .line-mask:nth-child(2) > span{ transition-delay:.09s; }
.lines.in .line-mask:nth-child(3) > span{ transition-delay:.18s; }

/* parallax layers */
.par{ will-change:transform; }

/* hero text parallax + fade on scroll */
.hero-inner{ will-change:transform, opacity; }

/* section number ticks */
.tick{
  font-size:.6rem; letter-spacing:.3em; color:var(--gold);
  display:block; margin-bottom:.8rem;
}

@media (prefers-reduced-motion: reduce){
  .wipe > img, .wipe > .ph{ clip-path:none !important; transform:none !important; }
  .line-mask > span{ transform:none !important; }
  .par{ transform:none !important; }
}


/* ============================================================
   v8 — varied photo reveals (trigger-based, like v4)
   Each class opens a photo a different way.
   ============================================================ */

.rv{ overflow:hidden; }
.rv > img{ display:block; width:100%; height:100%; object-fit:cover; will-change:clip-path, transform, opacity, filter; }

/* 1. wipe up from the bottom edge */
.rv-wipe > img{
  clip-path:inset(0 0 100% 0); transform:scale(1.14);
  transition:clip-path 1.25s cubic-bezier(.76,0,.24,1), transform 1.7s cubic-bezier(.16,1,.3,1);
}
.rv-wipe.in > img{ clip-path:inset(0 0 0 0); transform:scale(1); }

/* 2. sweep in from the left */
.rv-sweep > img{
  clip-path:inset(0 100% 0 0); transform:translateX(-6%) scale(1.1);
  transition:clip-path 1.15s cubic-bezier(.76,0,.24,1), transform 1.5s cubic-bezier(.16,1,.3,1);
}
.rv-sweep.in > img{ clip-path:inset(0 0 0 0); transform:none; }

/* 3. iris open from the centre */
.rv-iris > img{
  clip-path:inset(46% 0 46% 0); transform:scale(1.28);
  transition:clip-path 1.3s cubic-bezier(.72,0,.24,1), transform 1.9s cubic-bezier(.16,1,.3,1);
}
.rv-iris.in > img{ clip-path:inset(0 0 0 0); transform:scale(1); }

/* 4. settle down out of a zoom */
.rv-settle > img{
  transform:scale(1.3); opacity:0;
  transition:transform 1.8s cubic-bezier(.16,1,.3,1), opacity .9s ease;
}
.rv-settle.in > img{ transform:scale(1); opacity:1; }

/* 5. focus pull — blurred to sharp */
.rv-focus > img{
  filter:blur(18px); transform:scale(1.12); opacity:.25;
  transition:filter 1.4s cubic-bezier(.16,1,.3,1), transform 1.8s cubic-bezier(.16,1,.3,1), opacity 1s ease;
}
.rv-focus.in > img{ filter:none; transform:scale(1); opacity:1; }

/* 6. curtain — splits open from the middle, vertically */
.rv-curtain{ position:relative; }
.rv-curtain > img{ transform:scale(1.1); transition:transform 1.8s cubic-bezier(.16,1,.3,1); }
.rv-curtain::before,.rv-curtain::after{
  content:""; position:absolute; top:0; bottom:0; width:50%; background:var(--cream); z-index:2;
  transition:transform 1.15s cubic-bezier(.76,0,.24,1);
}
.rv-curtain::before{ left:0; }
.rv-curtain::after{ right:0; }
.rv-curtain.in > img{ transform:scale(1); }
.rv-curtain.in::before{ transform:translateX(-101%); }
.rv-curtain.in::after{ transform:translateX(101%); }
.section-paper .rv-curtain::before,.section-paper .rv-curtain::after{ background:var(--paper); }

/* 7. slow rise with a whisper of tilt */
.rv-rise > img{
  transform:translateY(48px) scale(1.06) rotate(.6deg); opacity:0;
  transition:transform 1.5s cubic-bezier(.16,1,.3,1), opacity 1.1s ease;
}
.rv-rise.in > img{ transform:none; opacity:1; }

/* stagger inside grids */
.rv[data-delay="1"] > img,.rv[data-delay="1"]::before,.rv[data-delay="1"]::after{ transition-delay:.10s; }
.rv[data-delay="2"] > img,.rv[data-delay="2"]::before,.rv[data-delay="2"]::after{ transition-delay:.20s; }
.rv[data-delay="3"] > img,.rv[data-delay="3"]::before,.rv[data-delay="3"]::after{ transition-delay:.30s; }

/* thin gold scroll progress bar (pure CSS where supported) */
@supports (animation-timeline: scroll()) {
  @keyframes grow{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
  .progress{
    position:fixed; top:0; left:0; height:2px; width:100%; z-index:120;
    background:var(--gold); transform-origin:0 50%;
    animation:grow linear both; animation-timeline:scroll(root);
  }
}
@supports not (animation-timeline: scroll()) { .progress{ display:none; } }

/* mobile sticky enquiry bar */
@media (max-width: 680px){
  .hero{ min-height:100svh; }
  .sticky-media{ position:relative; top:auto; }
  .mobile-cta{
    position:fixed; left:0; right:0; bottom:0; z-index:110;
    background:rgba(17,17,17,.96); backdrop-filter:blur(8px);
    display:flex; gap:.5rem; padding:.7rem;
    transform:translateY(120%); transition:transform .4s cubic-bezier(.2,.7,.2,1);
  }
  .mobile-cta.show{ transform:none; }
  .mobile-cta a{
    flex:1; text-align:center; text-decoration:none; color:var(--cream);
    border:1px solid rgba(245,241,234,.5); padding:.85rem;
    font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  }
  .mobile-cta a.solid{ background:var(--cream); color:var(--ink); border-color:var(--cream); }
}
@media (min-width: 681px){ .mobile-cta{ display:none; } }

@media (prefers-reduced-motion: reduce){
  .rv > img{ clip-path:none !important; transform:none !important; opacity:1 !important; filter:none !important; }
  .rv-curtain::before,.rv-curtain::after{ display:none; }
}

/* ============================================================
   v9 — auto-looping story ticker (right to left)
   ============================================================ */

.ticker{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.ticker-track{
  display:flex; width:max-content;
  animation:tickerRun 46s linear infinite;
}
.ticker:hover .ticker-track,
.ticker:focus-within .ticker-track,
.ticker.paused .ticker-track{ animation-play-state:paused; }

@keyframes tickerRun{ to{ transform:translateX(-50%); } }

.ticker-set{
  display:flex; gap:1.25rem;
  padding-right:1.25rem;      /* keeps the seam even */
  flex:none;
}

.ticker .hscroll-item{
  flex:0 0 clamp(230px, 26vw, 360px);
}
.ticker .hscroll-figure{ aspect-ratio:3/4; overflow:hidden; background:var(--taupe); }
.ticker .hscroll-figure img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.ticker .hscroll-item:hover .hscroll-figure img{ transform:scale(1.06); }

/* inside a moving track the one-shot reveals never fire — show them open */
.ticker .rv > img{
  clip-path:none !important; filter:none !important;
  opacity:1 !important; transform:none !important;
}
.ticker .rv-curtain::before,.ticker .rv-curtain::after{ display:none; }

@media (max-width: 680px){
  .ticker-track{ animation-duration:32s; }
  .ticker .hscroll-item{ flex:0 0 62vw; }
}

@media (prefers-reduced-motion: reduce){
  .ticker{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
  .ticker-track{ animation:none; }
  .ticker-set[aria-hidden="true"]{ display:none; }
}

/* ---------- keyword line inside the hero H1 ---------- */
.h1-kw{
  display:block; font-family:var(--sans); font-weight:400;
  font-size:.68rem; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(245,241,234,.82); margin-bottom:1.4rem;
}
.h1-display{
  display:block; font-family:var(--display);
  font-size:clamp(2.4rem, 1.4rem + 4.6vw, 5.2rem); line-height:1.1;
}
.hero h1{ font-size:inherit; }

/* ---------- pricing cards ---------- */
.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.price-card{ border-top:1px solid rgba(17,17,17,.16); padding-top:1.6rem; }
.price-card h3{ font-size:1.35rem; }
.price-card .price{
  font-family:var(--display); font-size:clamp(1.8rem,1.4rem + 1.4vw,2.6rem);
  color:var(--gold); margin:.7rem 0 .9rem; line-height:1;
}
.price-note{ color:var(--ink-soft); font-size:.9rem; margin:0; }
.price-foot{
  margin-top:2.6rem; padding-top:1.6rem; border-top:1px solid rgba(17,17,17,.12);
  color:var(--ink-soft); max-width:60ch;
}
@media (max-width:900px){ .price-grid{ grid-template-columns:1fr; gap:2rem; } }

/* ---------- inner page hero ---------- */
.page-hero{ position:relative; min-height:66svh; display:grid; place-items:center; background:var(--ink); overflow:hidden; }
.page-hero .hero-media{ position:absolute; inset:0; clip-path:none; animation:none; }
.page-hero .hero-media img{ width:100%; height:100%; object-fit:cover; transform:none; animation:none; }
.page-hero .hero-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(17,17,17,.45), rgba(17,17,17,.6)); }
.page-hero .hero-inner{ animation:fadeUp 1s ease .15s forwards; }
.crumbs{ font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; color:rgba(245,241,234,.7); margin:0 0 1.2rem; }
.crumbs a{ text-decoration:none; }
.crumbs a:hover{ color:var(--cream); }

/* ---------- prose blocks on inner pages ---------- */
.prose{ max-width:70ch; }
.prose h2{ font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem); margin-top:2.8rem; }
.prose h3{ font-size:1.25rem; margin-top:2rem; }
.prose p{ color:var(--ink-soft); }
.prose ul{ color:var(--ink-soft); padding-left:1.1rem; }
.prose li{ margin-bottom:.5rem; }

/* ---------- contact form ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.field{ display:flex; flex-direction:column; gap:.5rem; }
.field.full{ grid-column:1 / -1; }
.field label{ font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-soft); }
.field input,.field select,.field textarea{
  font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid rgba(17,17,17,.25);
  padding:.7rem 0; border-radius:0;
}
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-bottom-color:var(--gold); }
.form-note{ font-size:.8rem; color:var(--ink-soft); }
.form-msg{ padding:1rem 1.2rem; border-left:2px solid var(--gold); background:var(--paper); margin-bottom:2rem; }
.form-msg.err{ border-left-color:#9B3B33; }
.hp{ position:absolute; left:-9999px; }
@media (max-width:680px){ .form-grid{ grid-template-columns:1fr; } }

/* ---------- contact detail list ---------- */
.contact-side h3{ font-family:var(--sans); font-size:.65rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); margin-bottom:.8rem; }
.contact-side p, .contact-side a{ color:var(--ink-soft); text-decoration:none; display:block; }
.contact-side a:hover{ color:var(--ink); }
.contact-block{ margin-bottom:2.2rem; }

/* ============================================================
   v11 — per-page layout variations
   Same palette, type and reveals. Different page shapes.
   ============================================================ */

/* ---------- WEDDINGS: full-bleed gallery + day timeline ---------- */
.bleed{ width:100%; }
.bleed-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
}
.bleed-grid > div{ overflow:hidden; background:var(--taupe); aspect-ratio:4/5; }
.bleed-grid > div.wide{ grid-column:span 2; aspect-ratio:8/5; }
.bleed-grid img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:680px){
  .bleed-grid{ grid-template-columns:1fr 1fr; }
  .bleed-grid > div.wide{ grid-column:span 2; }
}

.timeline{ max-width:840px; margin-inline:auto; }
.tl-item{
  display:grid; grid-template-columns:auto 1fr; gap:1.6rem;
  padding-block:1.9rem; border-top:1px solid rgba(17,17,17,.14);
}
.tl-item:last-child{ border-bottom:1px solid rgba(17,17,17,.14); }
.tl-time{
  font-family:var(--display); font-size:1.15rem; color:var(--gold);
  min-width:5.5rem; line-height:1.4;
}
.tl-body h3{ font-size:1.2rem; margin-bottom:.5rem; }
.tl-body p{ color:var(--ink-soft); margin:0; font-size:.92rem; }
@media (max-width:600px){
  .tl-item{ grid-template-columns:1fr; gap:.6rem; }
  .tl-time{ font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; }
}

/* ---------- PORTRAITS: offset masonry + stacked session list ---------- */
.masonry{ columns:3; column-gap:1.25rem; }
.masonry > div{ break-inside:avoid; margin-bottom:1.25rem; overflow:hidden; background:var(--taupe); }
.masonry img{ width:100%; height:auto; display:block; }
@media (max-width:900px){ .masonry{ columns:2; } }
@media (max-width:560px){ .masonry{ columns:1; } }

.stack{ border-top:1px solid rgba(17,17,17,.14); }
.stack-row{
  display:grid; grid-template-columns:auto 1fr auto; gap:1.5rem; align-items:baseline;
  padding-block:1.7rem; border-bottom:1px solid rgba(17,17,17,.14);
  transition:padding-left .4s cubic-bezier(.2,.7,.2,1);
}
.stack-row:hover{ padding-left:.9rem; }
.stack-num{ font-size:.62rem; letter-spacing:.26em; color:var(--gold); }
.stack-row h3{ font-size:clamp(1.2rem,1rem + .9vw,1.7rem); margin:0; }
.stack-row p{ color:var(--ink-soft); font-size:.9rem; margin:.4rem 0 0; }
.stack-price{ font-family:var(--display); font-size:1.15rem; color:var(--ink-soft); white-space:nowrap; }
@media (max-width:600px){
  .stack-row{ grid-template-columns:1fr; gap:.4rem; }
  .stack-price{ color:var(--gold); }
}

/* ---------- EVENTS: rate table ---------- */
.rates{ width:100%; border-collapse:collapse; }
.rates caption{ text-align:left; color:var(--ink-soft); padding-bottom:1.2rem; font-size:.9rem; }
.rates th,.rates td{
  text-align:left; padding:1.25rem .8rem;
  border-bottom:1px solid rgba(17,17,17,.14); vertical-align:top;
}
.rates thead th{
  font-family:var(--sans); font-weight:400; font-size:.62rem;
  letter-spacing:.26em; text-transform:uppercase; color:var(--gold);
  border-bottom-color:rgba(17,17,17,.25);
}
.rates tbody th{ font-family:var(--display); font-weight:400; font-size:1.12rem; }
.rates td.rate{ font-family:var(--display); font-size:1.12rem; color:var(--ink); white-space:nowrap; }
.rates td small{ display:block; color:var(--ink-soft); font-size:.82rem; margin-top:.35rem; }
@media (max-width:680px){
  .rates thead{ position:absolute; left:-9999px; }
  .rates tr{ display:block; border-bottom:1px solid rgba(17,17,17,.14); padding-block:1.1rem; }
  .rates th,.rates td{ display:block; border:0; padding:.25rem .8rem; }
  .rates td.rate{ color:var(--gold); }
}

/* ============================================================
   v12 — real logo (inline SVG, recolours with currentColor)
   ============================================================ */

.brand{ display:block; line-height:0; color:var(--cream); }
.brand svg{
  display:block; width:auto; height:54px;
  transition:height .4s ease;
}
.site-head.solid .brand{ color:var(--ink); }
.site-head.solid .brand svg{ height:42px; }

/* mobile nav panel is cream, so the mark needs to be dark while it is open */
body:has(.nav.open) .brand{ color:var(--ink); }

@media (max-width:680px){
  .brand svg{ height:42px; }
  .site-head.solid .brand svg{ height:36px; }
}

.foot-logo{ display:block; color:var(--ink); margin-bottom:1.2rem; line-height:0; }
.foot-logo svg{ width:auto; height:78px; display:block; }

.head-inner .brand-type{ display:none; }

/* ============================================================
   v13 — crop safety: bias crops toward faces (upper third)
   ============================================================ */
.gal-item img,
.svc-figure img,
.hscroll-figure img,
.bleed-grid img,
.split-media img,
.sticky-media img,
.ticker .hscroll-figure img{
  object-position: center 22%;
}
/* horizontals hold centre; verticals need the top */
.page-hero .hero-media img{ object-position:center 28%; }
.hero-slide img{ object-position:center 30%; }

/* masonry keeps natural proportions — never crop portraits there */
.masonry img{ object-fit:contain; height:auto; object-position:center; }

/* slightly taller gallery tiles so faces have room */
.gal-item:not(.tall){ aspect-ratio:4/5; }
.bleed-grid > div{ aspect-ratio:3/4; }
.bleed-grid > div.wide{ aspect-ratio:16/10; }
.svc-figure{ aspect-ratio:4/5; }

/* ============================================================
   v14 — blog list + post styling
   ============================================================ */
.blog-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.blog-card{ text-decoration:none; color:inherit; display:block; }
.blog-card-media{ aspect-ratio:4/5; overflow:hidden; background:var(--taupe); margin-bottom:1.2rem; }
.blog-card-media img{ width:100%; height:100%; object-fit:cover; }
.blog-card h2{ font-size:1.3rem; margin:.5rem 0 .6rem; }
.blog-card p{ color:var(--ink-soft); font-size:.9rem; }

.blog-body{ color:var(--ink-soft); line-height:1.85; }
.blog-body h1,.blog-body h2,.blog-body h3{ font-family:var(--display); color:var(--ink); margin-top:2.2rem; }
.blog-body h2{ font-size:1.7rem; }
.blog-body h3{ font-size:1.3rem; }
.blog-body p{ margin-bottom:1.2rem; }
.blog-body a{ color:var(--gold); text-decoration:underline; }
.blog-body blockquote{ border-left:2px solid var(--gold); padding-left:1.2rem; font-style:italic; margin:1.5rem 0; }
.blog-body ul, .blog-body ol{ padding-left:1.4rem; margin-bottom:1.2rem; }
.blog-body img{ width:100%; height:auto; margin:1.5rem 0; }

@media (max-width:900px){ .blog-list{ grid-template-columns:1fr 1fr; } }
@media (max-width:680px){ .blog-list{ grid-template-columns:1fr; } }