/* ============================================================
   LAKA EVENT COMPANY — index-2.css
   Editorial landing modelled closely on torcianowedding.com,
   rebuilt on Laka's bordeaux / gold / cream palette.
   Type system: Playfair Display (Latin display) · Noto Serif
   Georgian (GE display) · Jost (UI/eyebrows) · EB Garamond
   (italic accents) · FiraGO (GE body).
   Loads AFTER style.css and only on this page, so header/hero
   overrides here are page-scoped by file, not by selector.
   ============================================================ */

:root{
  --disp: "Playfair Display", "Noto Serif Georgian", Georgia, serif;
  --ge-disp: var(--head-font);
  --brand-head: "Bebas Neue", "FiraGO", "Noto Serif Georgian", Georgia, sans-serif; /* Latin→Bebas, Georgian→FiraGO ExtraBold */
  --ui: "Jost", "FiraGO", "Noto Sans Georgian", sans-serif;
  --accent: "EB Garamond", "Cormorant Garamond", Georgia, serif;
  --head: #3A171F;            /* deep, solid bordeaux-charcoal for headings */
  --tan:  #C6AF83;            /* champagne band */
  --tan-soft:#E7DFCD;
  --cream-2:#EADFCA;          /* deepened a touch so light sections step clearly */
  --seam:rgba(58,23,31,.07);  /* hairline between light sections */
}

/* ---------- editorial type primitives ---------- */
.eyebrow{
  display:block;
  font-family:var(--ui);
  font-size:11px; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold);
  margin-bottom:20px;
}
.section-head .eyebrow{ text-align:center; }
.script-accent{
  font-family:var(--accent);
  font-style:italic; font-weight:500;
  font-size:clamp(28px, 3.2vw, 46px);
  line-height:1.1;
  color:var(--gold);
  display:block;
}

/* headings tuned to the reference (uppercase, tracked, solid) */
.ed-h{
  font-family:var(--head-font);
  color:var(--head);
  text-transform:uppercase;
  letter-spacing:.05em;
  font-weight:800;
  line-height:1.12;
}
h1.ed-h{ font-size:clamp(40px, 5vw, 66px); }
h2.ed-h{ font-size:clamp(30px, 3.8vw, 52px); }
.section-head{ text-align:center; margin-bottom:clamp(40px, 5vw, 66px); }
.section-head .ed-h{ margin-inline:auto; max-width:22ch; }
.section-sub{
  margin:18px auto 0; max-width:60ch;
  color:var(--ink-soft); font-size:15px; line-height:1.7;
}
.rule{
  display:block; width:50px; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  margin:16px auto 0;
}

/* ---------- editorial buttons / links ---------- */
.btn-line{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--ui);
  font-size:11px; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--wine);
  background:transparent;
  border:1px solid rgba(87,26,40,.38);
  padding:15px 30px; border-radius:2px;
  transition:background .4s var(--ease-out), color .4s, border-color .4s, transform .45s var(--ease-out);
}
.btn-line .arw{ transition:transform .45s var(--ease-out); }
.btn-line:hover{ background:var(--wine); color:var(--cream); border-color:var(--wine); transform:translateY(-2px); }
.btn-line:hover .arw{ transform:translateX(5px); }
.btn-line.light{ color:var(--cream); border-color:rgba(245,241,232,.5); }
.btn-line.light:hover{ background:var(--cream); color:var(--wine); border-color:var(--cream); }
.btn-line.gold{ border-color:rgba(198,175,131,.65); color:var(--wine-deep); background:var(--gold-2); }
.btn-line.gold:hover{ background:var(--cream); border-color:var(--cream); color:var(--wine); }

/* ============================================================
   HEADER — centered logo, split nav, transparent over hero
   ============================================================ */
#siteHeader{
  background:transparent;
  box-shadow:none;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
#siteHeader::after{  /* faint top scrim so nav reads on the video */
  content:""; position:absolute; inset:0 0 auto 0; height:150%;
  background:linear-gradient(180deg, rgba(42,9,15,.42), transparent);
  z-index:-1; pointer-events:none;
  transition:opacity .45s;
}
.header-inner{
  position:relative;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
  padding:24px 0;
}
.header-inner .main-nav{ margin:0; }
.burger{ position:absolute; right:0; top:50%; transform:translateY(-50%); }
.nav-left{ justify-self:start; }
.nav-right{ justify-self:end; align-items:center; }
.header-inner .logo{ justify-self:center; }
.header-inner .logo img{
  height:58px; width:auto;
  filter:brightness(0) invert(1);       /* white over the video */
  transition:height .45s var(--ease-out), filter .45s;
}
.main-nav .nav-link{
  font-family:var(--ui);
  font-size:13px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:rgba(245,241,232,.92);
  padding:6px 0;
}
.main-nav .nav-link::after{ background:var(--gold-2); height:1px; }
.main-nav .nav-link:hover,
.main-nav .nav-link.active{ color:#fff; }
.hdr-cta{
  font-family:var(--ui);
  font-size:10.5px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--wine-deep);
  background:var(--gold-2);
  padding:11px 22px; border-radius:2px;
  border:1px solid transparent;
  transition:background .35s, color .35s, transform .45s var(--ease-out);
}
.hdr-cta:hover{ transform:translateY(-2px); background:var(--cream); }
.burger span{ background:var(--cream); }

/* scrolled state → solid cream, dark text, natural logo */
#siteHeader.scrolled{
  background:rgba(253,249,242,.9);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:0 10px 34px -20px rgba(69,16,29,.28);
}
#siteHeader.scrolled::after{ opacity:0; }
#siteHeader.scrolled .header-inner{ padding:12px 0; }
#siteHeader.scrolled .logo img{ height:44px; filter:none; }
#siteHeader.scrolled .main-nav .nav-link{ color:var(--ink); }
#siteHeader.scrolled .main-nav .nav-link:hover,
#siteHeader.scrolled .main-nav .nav-link.active{ color:var(--wine); }
#siteHeader.scrolled .burger span{ background:var(--wine); }

/* ============================================================
   VIDEO HERO — minimal, centered crest (torciano rhythm)
   ============================================================ */
#hero.vhero{
  position:relative;
  isolation:isolate;              /* own stacking context — keeps the video layer inside the hero */
  min-height:100svh;
  padding:150px 0 130px;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  overflow:hidden;
}
.vhero-media{ position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--wine-deep); }
.vhero-media video,
.vhero-media img.vhero-poster{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center 38%;
  display:block;
}
.vhero-media img.vhero-poster{ z-index:0; }
.vhero-media video{ z-index:1; }
.vhero-veil{
  position:absolute; inset:0; z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(42,9,15,.24) 0%, transparent 26%, transparent 70%, rgba(42,9,15,.26) 100%),
    radial-gradient(46% 42% at 50% 50%, rgba(42,9,15,.22) 0%, transparent 62%);
}
/* light veil → keep hero text legible on the bright video with soft shadows */
.vhero-eyebrow{ text-shadow:0 2px 16px rgba(42,9,15,.6); }
.vhero-script{ text-shadow:0 3px 24px rgba(42,9,15,.55); }
.vhero-scroll{ text-shadow:0 2px 14px rgba(42,9,15,.6); }
.vhero .container{ position:relative; z-index:2; }
.vhero-content{
  max-width:900px; margin-inline:auto;
  display:flex; flex-direction:column; align-items:center;
}
.vhero-eyebrow{
  font-family:var(--ui);
  font-size:11px; font-weight:500;
  letter-spacing:.4em; text-transform:uppercase;
  color:rgba(245,241,232,.8);
  margin-bottom:30px;
}
.vhero-crest{
  height:104px; width:auto; margin-bottom:20px;
  filter:brightness(0) invert(1) drop-shadow(0 12px 30px rgba(42,9,15,.55));
  opacity:.97;
}
.vhero-script{
  font-family:var(--accent);
  font-style:italic; font-weight:500;
  font-size:clamp(26px, 3.2vw, 40px);
  color:var(--gold-2);
}
.vhero-content .divider{
  width:1px; height:54px; margin:26px auto 0;
  background:linear-gradient(var(--gold-2), transparent);
}
/* scroll cue */
.vhero-scroll{
  position:absolute; left:50%; bottom:38px; transform:translateX(-50%);
  z-index:3; display:flex; flex-direction:column; align-items:center; gap:12px;
  color:rgba(245,241,232,.85);
  font-family:var(--ui);
  font-size:10px; letter-spacing:.34em; text-transform:uppercase;
}
.vhero-scroll .arw{
  font-size:16px; animation:heroArrow 1.9s var(--ease-out) infinite;
}
@keyframes heroArrow{
  0%,100%{ transform:translateY(0); opacity:.5; }
  50%{ transform:translateY(7px); opacity:1; }
}

/* fade-in entrance for hero children (uses body.loaded from main.js) */
.vhero-content > *{ opacity:0; transform:translateY(22px); transition:opacity 1s var(--ease-out), transform 1s var(--ease-out); }
body.loaded .vhero-content > *{ opacity:1; transform:none; }
body.loaded .vhero-eyebrow{ transition-delay:.4s; }
body.loaded .vhero-crest{ transition-delay:.55s; }
body.loaded .vhero-script{ transition-delay:.75s; }
body.loaded .vhero-content .divider{ transition-delay:.95s; }
.vhero-scroll{ opacity:0; transition:opacity 1s 1.2s var(--ease-out); }
body.loaded .vhero-scroll{ opacity:1; }

/* hero slogan — main brand line, set a touch below centre */
.vhero-slogan-wrap{
  position:absolute; left:50%; top:80%; transform:translate(-50%,-50%);
  z-index:3; width:min(92%, 940px); text-align:center; pointer-events:none;
}
.vhero-slogan-line{
  display:block; width:64px; height:1px; margin:0 auto 26px;
  background:linear-gradient(90deg, transparent, var(--gold-2), transparent);
  opacity:0; transition:opacity 1s .5s var(--ease-out);
}
.vhero-slogan{
  margin:0;
  font-family:var(--head-font);
  font-weight:400;
  font-size:clamp(30px, 5.4vw, 68px);
  line-height:1.16; letter-spacing:.004em;
  color:var(--cream);
  text-shadow:0 3px 30px rgba(42,9,15,.55);
  opacity:0; transform:translateY(18px);
  transition:opacity 1.2s .55s var(--ease-out), transform 1.2s .55s var(--ease-out);
}
.vhero-slogan em{ font-style:normal; color:var(--gold-2); }
.vhero-slogan .q{ color:var(--gold-2); font-weight:400; }
body.loaded .vhero-slogan{ opacity:1; transform:none; }
body.loaded .vhero-slogan-line{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .vhero-slogan, .vhero-slogan-line{ transition:none; opacity:1; transform:none; }
}

/* ============================================================
   FEATURE SPLITS (image / text alternating)
   ============================================================ */
.feature{ padding:clamp(58px, 6.2vw, 100px) 0; position:relative; }
.feature.tint{ background:var(--cream-2); }
.feature .container{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(44px, 6vw, 100px); align-items:center;
}
.feature.rev .feature-media{ order:2; }
.feature.rev .feature-text{ order:1; }
.feature-media{
  position:relative;
  width:100%;
  /* A FIXED frame. It used to stretch to the text column, which meant the copy
     length decided the crop — long copy blew the photo up. The wrapper now owns
     the ratio, so neither the copy nor the upload's own dimensions can shift it. */
  align-self:center;
  aspect-ratio:3/2;
  min-height:0;
  overflow:hidden; border-radius:3px;
}
.feature-media > img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
  border-radius:3px;
}
/* Shape modifiers stay landscape on the homepage: every feature photo there is
   cut 3:2. Only the About page overrides these to portrait (see below). */
.feature-media.f-tall{ aspect-ratio:3/2; }
.feature-media.f-wide{ aspect-ratio:3/2; }
.feature-media::after{           /* refined inset frame (visible inside the reveal mask) */
  content:""; position:absolute; z-index:5;
  inset:13px; border:1px solid rgba(245,241,232,.5);
  border-radius:3px; pointer-events:none;
}
.feature-text{ max-width:560px; }
.feature.rev .feature-text{ margin-left:auto; }
.feature-text .ed-h{ margin-bottom:24px; }
.feature-text p{ color:var(--ink-soft); font-size:15.5px; line-height:1.9; margin-bottom:20px; }
.feature-text p strong{ color:var(--wine); font-weight:600; }
.feature-text .btn-line{ margin-top:16px; }

/* ============================================================
   AS SEEN IN / PARTNERS
   ============================================================ */
/* Single uninterrupted line at every width. Georgian has no uppercase, so the old
   text-transform bought nothing while .14em tracking pushed six long words onto a
   second row — tighter tracking plus a fluid size keeps them on one. */
.seenin{
  position:relative;
  padding:clamp(30px, 3.6vw, 48px) 0;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(255,255,255,.55), transparent 62%),
    linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 50%, var(--cream) 100%);
  border-top:1px solid rgba(156,124,59,.22);
  border-bottom:1px solid rgba(156,124,59,.22);
}
/* hairline rules flanking the label */
.seenin .eyebrow{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(10px, 1.4vw, 18px);
  margin-bottom:clamp(15px, 1.8vw, 24px);
  color:var(--gold);
  opacity:1;
  font-size:10px;
  letter-spacing:.3em;
}
.seenin .eyebrow::before,
.seenin .eyebrow::after{
  content:"";
  height:1px; width:clamp(20px, 6vw, 88px);
  background:linear-gradient(90deg, transparent, rgba(156,124,59,.55));
}
.seenin .eyebrow::after{ transform:scaleX(-1); }

.seenin-row{
  display:flex; flex-wrap:nowrap; align-items:center;
  justify-content:center;
  gap:0;
  overflow-x:auto;
  scrollbar-width:none; -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
}
.seenin-row::-webkit-scrollbar{ display:none; }

.seenin-logo{
  position:relative;
  flex:0 0 auto;
  padding:2px clamp(11px, 2.3vw, 36px);
  font-family:var(--sans);
  font-size:clamp(11.5px, 1.08vw, 16px);
  font-weight:500;
  letter-spacing:.05em;
  text-transform:none;
  white-space:nowrap;
  color:var(--wine);
  opacity:.74;
  transition:opacity .35s var(--ease-out), color .35s var(--ease-out);
}
/* gold lozenge between neighbours, echoing the section ornaments */
.seenin-logo + .seenin-logo::before{
  content:"";
  position:absolute; left:-2px; top:50%;
  width:4px; height:4px; margin-top:-2px;
  background:var(--gold); opacity:.55;
  transform:rotate(45deg);
}
.seenin-logo::after{
  content:"";
  position:absolute; left:50%; right:50%; bottom:-5px;
  height:1px; background:var(--gold);
  transition:left .4s var(--ease-out), right .4s var(--ease-out);
}
.seenin-logo:hover{ opacity:1; color:var(--wine-deep); }
.seenin-logo:hover::after{ left:clamp(11px, 2.3vw, 36px); right:clamp(11px, 2.3vw, 36px); }

/* Narrow screens: stay on one line and scroll instead of wrapping. */
@media (max-width:720px){
  .seenin-row{
    justify-content:flex-start;
    /* fade the cut edges so the overflow reads as scrollable */
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent);
            mask-image:linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent);
  }
  .seenin-logo:first-child{ padding-left:22px; }
  .seenin-logo:last-child{ padding-right:22px; }
}
@media (prefers-reduced-motion:reduce){
  .seenin-logo, .seenin-logo::after{ transition:none; }
}

/* ============================================================
   FILMS & REELS
   ============================================================ */
.reels{ padding:clamp(80px, 10vw, 140px) 0; background:var(--cream-2); }
.reels-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(16px, 2vw, 24px); }
.reel{
  position:relative; border-radius:4px; overflow:hidden;
  aspect-ratio:3/4; cursor:pointer;
  box-shadow:0 26px 54px -32px rgba(42,9,15,.55);
}
.reel img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease-out), filter .6s; }
.reel::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(42,9,15,.72) 0%, rgba(42,9,15,.05) 46%, rgba(42,9,15,.16) 100%);
}
.reel:hover img{ transform:scale(1.06); filter:saturate(1.06); }
.reel-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:3; width:60px; height:60px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(245,241,232,.94); color:var(--wine);
  box-shadow:0 12px 30px -10px rgba(42,9,15,.6);
  transition:transform .45s var(--ease-out), background .35s;
}
.reel-play svg{ margin-left:3px; }
.reel:hover .reel-play{ transform:translate(-50%,-50%) scale(1.12); background:var(--gold-2); }
.reels-grid > .reveal:nth-child(2){ transition-delay:.1s; }
.reels-grid > .reveal:nth-child(3){ transition-delay:.2s; }
.reels-grid > .reveal:nth-child(4){ transition-delay:.3s; }
/* inline playback — the reel plays right inside its own frame */
.reel-video{
  position:absolute; inset:0; z-index:4;
  width:100%; height:100%; object-fit:cover;
  background:#000; border:0; border-radius:inherit;
}
.reel.playing{ cursor:default; }
.reel.playing::after,
.reel.playing .reel-play{ opacity:0; pointer-events:none; transition:opacity .3s; }

/* ============================================================
   MEMORIES  (uniform grid — every tile the same size)
   ============================================================ */
.memories{ padding:clamp(80px, 10vw, 140px) 0; background:var(--cream); }
.mem-masonry{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.mem-masonry .shot{ margin:0; border-radius:6px; aspect-ratio:1/1; }
.mem-masonry .shot img{ width:100%; height:100%; object-fit:cover; }
.mem-masonry .shot figcaption{ padding:34px 14px 14px; }
@media (max-width:1000px){ .mem-masonry{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:640px){ .mem-masonry{ grid-template-columns:repeat(2, 1fr); gap:12px; } }

/* ============================================================
   MENUS / PACKAGES — two wide cards
   ============================================================ */
.menus{ padding:clamp(80px, 10vw, 140px) 0; background:var(--cream); }
.menus-intro{ max-width:640px; margin:0 auto clamp(40px,5vw,60px); text-align:center; color:var(--ink-soft); font-size:15px; line-height:1.8; }
.menu-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px, 2.6vw, 32px); }
.menu-card{
  position:relative; overflow:hidden; border-radius:4px;
  display:flex; align-items:flex-end; min-height:clamp(300px, 34vw, 420px);
  box-shadow:0 30px 60px -34px rgba(42,9,15,.5);
}
.menu-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-out); z-index:0; }
.menu-card::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(42,9,15,.82), rgba(42,9,15,.15) 60%, rgba(42,9,15,.05)); }
.menu-card:hover img{ transform:scale(1.06); }
.menu-body{ position:relative; z-index:2; padding:34px 30px 30px; color:var(--cream); }
.menu-body .eyebrow{ color:var(--gold-2); margin-bottom:10px; }
.menu-body h3{
  font-family:var(--ge-disp); color:var(--cream);
  font-size:clamp(22px, 2.4vw, 28px); line-height:1.2;
  margin-bottom:18px; max-width:20ch;
}
.menu-body .btn-line{ color:var(--cream); border-color:rgba(245,241,232,.5); }
.menu-body .btn-line:hover{ background:var(--cream); color:var(--wine); border-color:var(--cream); }

/* ============================================================
   PROJECTS — portfolio carousel
   ============================================================ */
.projects{
  padding:clamp(80px, 10vw, 140px) 0;
  background:var(--cream);
  border-top:1px solid var(--seam);
  overflow:hidden;
}
.proj-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:28px;
  margin-bottom:clamp(28px, 3.5vw, 46px);
}
.proj-head-text{ text-align:left; max-width:640px; }
.proj-head-text .eyebrow{ text-align:left; }
.proj-head-text .section-sub{ margin:14px 0 0; }
.proj-all{ margin-top:22px; }
.proj-nav{ display:flex; gap:12px; flex:0 0 auto; }
.proj-viewport{ overflow:hidden; }
.proj-track{
  display:flex; align-items:flex-start; gap:clamp(20px, 2.4vw, 34px);
  padding:44px 0 10px;
  cursor:grab; user-select:none; -webkit-user-select:none;
  will-change:transform;
}
.proj-track.dragging{ cursor:grabbing; }
.proj-card{
  flex:0 0 clamp(270px, 30vw, 366px);
  text-decoration:none; color:inherit;
}
.proj-card:nth-child(even){ margin-top:44px; }          /* editorial stagger */
.proj-media{
  position:relative; aspect-ratio:4 / 5;
  overflow:hidden; border-radius:3px;
}
.proj-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-out); pointer-events:none; -webkit-user-drag:none; }
.proj-card:hover .proj-media img{ transform:scale(1.05); }
.proj-media::after{                                     /* refined inset frame */
  content:""; position:absolute; inset:14px;
  border:1px solid rgba(245,241,232,.55);
  z-index:2; pointer-events:none;
  transition:inset .55s var(--ease-out), border-color .4s;
}
.proj-card:hover .proj-media::after{ inset:9px; border-color:rgba(198,175,131,.9); }
/* .proj-num removed — the 01/02/03 overlays were dropped from the cards */

.proj-body{ padding:18px 4px 0; }
.proj-cat{
  display:block; font-family:var(--ui);
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); margin-bottom:9px;
}
.proj-title{
  font-family:var(--ge-disp); color:var(--head);
  font-size:clamp(19px, 2vw, 24px); line-height:1.22; letter-spacing:.01em;
  position:relative; display:inline-block; padding-bottom:6px;
}
.proj-title::after{
  content:""; position:absolute; left:0; bottom:0; width:22px; height:1.5px;
  background:var(--gold); transition:width .45s var(--ease-out);
}
.proj-card:hover .proj-title::after{ width:52px; }
.proj-arrow{
  width:52px; height:52px; border-radius:50%;
  border:1px solid rgba(156,124,59,.5);
  background:transparent; color:var(--wine);
  display:grid; place-items:center; font-size:24px; line-height:0; padding-bottom:4px;
  transition:background .3s, color .3s, transform .35s var(--ease-out), border-color .3s, opacity .3s;
}
.proj-arrow:hover{ background:var(--wine); color:var(--cream); border-color:var(--wine); transform:translateY(-2px); }
.proj-arrow:disabled{ opacity:.3; }
.proj-arrow:disabled:hover{ background:transparent; color:var(--wine); border-color:rgba(156,124,59,.5); transform:none; }
@media (max-width: 640px){
  .proj-card{ flex-basis:78vw; }
  .proj-card:nth-child(even){ margin-top:0; }
  .proj-head{ flex-direction:column; align-items:flex-start; gap:18px; }
}

/* ============================================================
   PROJECTS ARCHIVE (works.html — grid, no hero)
   ============================================================ */
/* solid header for hero-less pages (dark text on cream) */
#siteHeader.header-solid{
  background:rgba(253,249,242,.92);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:0 10px 34px -20px rgba(69,16,29,.28);
}
#siteHeader.header-solid::after{ opacity:0; }
#siteHeader.header-solid .logo img{ filter:none; }
#siteHeader.header-solid .main-nav .nav-link{ color:var(--ink); }
#siteHeader.header-solid .main-nav .nav-link:hover,
#siteHeader.header-solid .main-nav .nav-link.active{ color:var(--wine); }
#siteHeader.header-solid .burger span{ background:var(--wine); }

.works-archive{
  padding:clamp(132px, 16vh, 190px) 0 clamp(80px, 10vw, 140px);
  background:var(--cream);
}
.works-intro{ text-align:center; max-width:640px; margin:0 auto clamp(40px, 5vw, 64px); }
.works-intro .ed-h{ margin-bottom:14px; }
.works-intro .section-sub{ margin-inline:auto; }
.works-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(26px, 3vw, 44px) clamp(20px, 2.2vw, 32px);
}
.works-grid .proj-card{ margin-top:0; }
@media (max-width: 900px){ .works-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 560px){ .works-grid{ grid-template-columns:1fr; max-width:400px; margin-inline:auto; } }

/* project detail — meta list inside the dark book-card */
.pj-meta{ display:grid; gap:2px; margin:4px 0 24px; }
.pj-meta li{
  display:flex; justify-content:space-between; gap:14px;
  padding:11px 0; border-bottom:1px solid rgba(220,192,132,.22);
  font-family:var(--ui); font-size:13.5px;
}
.pj-meta li span{ color:rgba(251,246,238,.62); letter-spacing:.04em; }
.pj-meta li strong{ color:var(--cream); font-weight:500; }

/* ============================================================
   EVENTS — two wide category cards
   ============================================================ */
.events{ padding:clamp(80px, 10vw, 140px) 0; background:var(--cream-2); }
.ev-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px, 2.6vw, 32px); }
.ev-card{
  position:relative; overflow:hidden; border-radius:4px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:clamp(320px, 36vw, 460px);
  box-shadow:0 30px 60px -34px rgba(42,9,15,.5);
}
.ev-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-out); z-index:0; }
.ev-card::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(42,9,15,.35), rgba(42,9,15,.62)); transition:background .5s; }
.ev-card:hover img{ transform:scale(1.06); }
.ev-card:hover::after{ background:linear-gradient(180deg, rgba(42,9,15,.3), rgba(42,9,15,.55)); }
.ev-body{ position:relative; z-index:2; color:var(--cream); padding:30px; max-width:34ch; }
.ev-body .eyebrow{ color:var(--gold-2); }
.ev-body h3{
  font-family:var(--ge-disp); color:var(--cream);
  font-size:clamp(26px, 3vw, 40px); text-transform:uppercase; letter-spacing:.05em;
  margin-bottom:14px;
}
.ev-body p{ color:rgba(245,241,232,.82); font-size:14.5px; line-height:1.7; margin-bottom:24px; }
.ev-body .btn-line{ color:var(--cream); border-color:rgba(245,241,232,.55); }
.ev-body .btn-line:hover{ background:var(--cream); color:var(--wine); border-color:var(--cream); }

/* ============================================================
   CTA — "your story begins here"
   ============================================================ */
.ed-cta{
  position:relative; overflow:hidden; text-align:center;
  /* content sits low in the band (not vertically centred): far more top than bottom padding */
  padding-top:clamp(170px, 24vw, 320px);
  padding-bottom:clamp(56px, 7vw, 90px);
  background:var(--wine-deep);
}
.ed-cta-bg{ position:absolute; inset:0; z-index:0; opacity:.2; }
.ed-cta-bg img{ width:100%; height:100%; object-fit:cover; filter:saturate(.5); }
.ed-cta::before{ content:""; position:absolute; inset:0; z-index:1; background:radial-gradient(70% 90% at 50% 50%, transparent, var(--wine-deep) 92%); }
.ed-cta .container{ position:relative; z-index:2; }
.ed-cta .script-accent{ color:var(--gold-2); margin-bottom:14px; }
.ed-cta h2{ color:var(--cream); max-width:20ch; margin:0 auto 22px; }
.ed-cta p{ color:rgba(245,241,232,.78); max-width:540px; margin:0 auto 36px; font-size:15.5px; line-height:1.8; }
.ed-cta-actions{ display:flex; gap:26px; align-items:center; justify-content:center; flex-wrap:wrap; }
.ed-cta-phone{
  font-family:var(--ui); font-size:12px; letter-spacing:.16em;
  color:var(--gold-2); transition:color .3s;
}
.ed-cta-phone:hover{ color:var(--cream); }

/* ============================================================
   KEEP IN TOUCH
   ============================================================ */
.keep{
  position:relative; overflow:hidden; text-align:center;
  padding:clamp(80px, 10vw, 130px) 0;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(220,192,132,.16), transparent 70%),
    var(--cream);
}
.keep .container{ position:relative; z-index:1; max-width:680px; }
.keep h2{ margin:0 auto 14px; }
.keep p{ color:var(--ink-soft); font-size:15px; line-height:1.8; margin-bottom:30px; }
.keep .newsletter{ margin-inline:auto; max-width:520px; min-width:0; }

/* ============================================================
   FOOTER — photo strip + numbered nav + get in touch
   ============================================================ */
.foot-strip{ display:grid; grid-template-columns:repeat(8, 1fr); }
.foot-strip a{ position:relative; overflow:hidden; aspect-ratio:1; }
.foot-strip img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease-out), filter .5s; filter:saturate(.9); }
.foot-strip a:hover img{ transform:scale(1.08); filter:saturate(1.05); }

.ed-foot{ background:var(--wine-deep); color:var(--cream); }
.ed-foot-grid{
  display:grid; grid-template-columns:1.3fr 1fr 1fr;
  gap:clamp(34px, 5vw, 70px);
  padding:clamp(56px, 7vw, 88px) 0 46px;
  align-items:start;
}
.ed-foot .fb-logo{ height:60px; width:auto; margin-bottom:20px; filter:brightness(0) invert(1); opacity:.95; }
.ed-foot-brand p{ color:rgba(245,241,232,.66); font-size:13.5px; line-height:1.8; max-width:34ch; }
.ed-foot h5{
  font-family:var(--ui); font-size:11px; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; color:var(--gold-2);
  margin-bottom:20px;
}
.foot-nav{ display:grid; gap:11px; }
.foot-nav a{
  display:flex; gap:12px; align-items:baseline;
  font-family:var(--ge-disp); font-size:15px; letter-spacing:.04em; text-transform:uppercase;
  color:rgba(245,241,232,.9); transition:color .3s, padding-left .35s var(--ease-out);
}
.foot-nav a .n{ font-family:var(--ui); font-size:10px; letter-spacing:.1em; color:var(--gold); }
.foot-nav a:hover{ color:#fff; padding-left:5px; }
.get-in-touch a{ display:block; color:rgba(245,241,232,.85); font-size:14px; padding:5px 0; transition:color .3s; }
.get-in-touch a:hover{ color:var(--gold-2); }
.get-in-touch .git-line{ display:flex; align-items:center; gap:10px; }
.ed-foot .btn-line{ margin-top:16px; color:var(--cream); border-color:rgba(245,241,232,.4); }
.ed-foot .btn-line:hover{ background:var(--gold-2); color:var(--wine-deep); border-color:var(--gold-2); }
.ed-foot-bar{
  border-top:1px solid rgba(245,241,232,.12);
  padding:22px 0;
}
.ed-foot-bar .fb-inner{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-family:var(--ui); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(245,241,232,.55);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px){
  .reels-grid{ grid-template-columns:repeat(2, 1fr); }
  .reels-grid > .reveal:nth-child(3){ transition-delay:.1s; }
  .reels-grid > .reveal:nth-child(4){ transition-delay:.2s; }
}
@media (max-width: 900px){
  .feature .container{ grid-template-columns:1fr; gap:40px; }
  .feature .feature-media, .feature.rev .feature-media,
  .feature .feature-text, .feature.rev .feature-text{ order:0; margin:0 auto; }
  .feature-media{ max-width:560px; width:100%; }
  .menu-grid, .ev-grid{ grid-template-columns:1fr; }
  .ed-foot-grid{ grid-template-columns:1fr 1fr; }
  .ed-foot-brand{ grid-column:1 / -1; }
  .foot-strip{ grid-template-columns:repeat(4, 1fr); }
}
@media (max-width: 620px){
  .reels-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .ed-foot-grid{ grid-template-columns:1fr; text-align:center; }
  .ed-foot-brand{ display:flex; flex-direction:column; align-items:center; }
  .foot-nav a{ justify-content:center; }
  .get-in-touch .git-line{ justify-content:center; }
  .ed-foot-bar .fb-inner{ justify-content:center; text-align:center; }
  .foot-strip{ grid-template-columns:repeat(4, 1fr); }
  .vhero-crest{ height:80px; }
}

/* ============================================================
   INNER PAGES (about / services / service)
   ============================================================ */
/* premium centered page hero (overrides style.css .page-hero) */
.page-hero{
  min-height:clamp(680px, 96vh, 940px);
  align-items:flex-end;            /* text sits low in the hero band, not vertically centred */
  text-align:center;
  padding:200px 0 clamp(120px, 12vh, 172px);   /* generous top, modest bottom keeps the title above the wave */
}
.page-hero .ph-bg img{ animation:phZoom 9s var(--ease-out) both; object-position:center 28%; }
@keyframes phZoom{ from{ transform:scale(1.12); } to{ transform:scale(1); } }
.page-hero .ph-veil{
  background:
    linear-gradient(180deg, rgba(42,9,15,.28) 0%, rgba(42,9,15,.06) 46%, rgba(42,9,15,.40) 100%),
    radial-gradient(60% 56% at 50% 52%, rgba(42,9,15,.30) 0%, transparent 72%);
}
.page-hero .ph-veil::before{ display:none; }
.page-hero .container{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }
.page-hero .eyebrow{ color:var(--gold-2); margin-bottom:18px; }
.page-hero .ph-title{
  font-family:var(--head-font);
  font-weight:800;
  letter-spacing:.05em;
  font-size:clamp(46px, 6vw, 84px);
  margin-bottom:22px;
}
.breadcrumb{
  font-family:var(--ui); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  justify-content:center;
}

/* embedded video inside a feature slot (founder / about) */
.feature-media > video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
  border-radius:3px; background:#000;
}
.about-vid{ cursor:pointer; }
.about-vid .vid-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:6; width:76px; height:76px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(245,241,232,.94); color:var(--wine);
  box-shadow:0 16px 40px -12px rgba(42,9,15,.6);
  transition:transform .45s var(--ease-out), background .35s, opacity .35s;
}
.about-vid .vid-play svg{ margin-left:4px; }
.about-vid:hover .vid-play{ transform:translate(-50%,-50%) scale(1.1); background:var(--gold-2); }
.about-vid.playing .vid-play{ opacity:0; pointer-events:none; }
.about-vid .frame-tag{
  position:absolute; left:16px; bottom:16px; z-index:6;
  font-family:var(--ui); font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--cream); background:rgba(42,9,15,.5); padding:7px 12px; border-radius:2px;
  backdrop-filter:blur(4px); transition:opacity .35s;
}
.about-vid.playing .frame-tag{ opacity:0; }

/* inner section heads reuse .ed-h; keep old .script-label as gold eyebrow-italic if present */
.page-section .section-head .ed-h{ margin-inline:auto; }

/* services archive cards keep style.css .svc-card, add editorial link arrow */
.svc-card .svc-link .arw{ transition:transform .4s var(--ease-out); display:inline-block; }
.svc-card:hover .svc-link .arw{ transform:translateX(5px); }

/* ============================================================
   SERVICE PAGE — extensive inline booking form (per service)
   ============================================================ */
.sv-booking{
  position:relative; overflow:hidden;
  padding:clamp(74px, 9vw, 128px) 0;
  background:
    radial-gradient(60% 70% at 12% 0%, rgba(220,192,132,.18), transparent 62%),
    radial-gradient(60% 70% at 100% 100%, rgba(135,33,49,.06), transparent 60%),
    var(--cream-2);
}
.svb-head{ text-align:center; max-width:620px; margin:0 auto clamp(34px, 4vw, 52px); }
.svb-head .script-accent{ color:var(--gold); margin-bottom:10px; }
.svb-head p{ color:var(--ink-soft); font-size:15px; line-height:1.8; margin-top:14px; }

.svb-card{
  max-width:940px; margin:0 auto;
  background:#fff;
  border:1px solid rgba(185,138,62,.22);
  border-radius:24px;
  padding:clamp(26px, 3.6vw, 48px);
  box-shadow:var(--shadow-soft);
}

/* the selected-service banner (auto-filled per page) */
.svb-chip{
  display:flex; align-items:center; gap:16px;
  background:
    radial-gradient(80% 120% at 90% 0%, rgba(135,33,49,.28), transparent 60%),
    linear-gradient(135deg, var(--wine), var(--wine-deep));
  color:var(--cream);
  border-radius:16px;
  padding:18px 24px;
  margin-bottom:28px;
}
.svb-chip .svb-chip-ic{
  flex:0 0 auto; width:46px; height:46px; border-radius:12px;
  display:grid; place-items:center;
  background:rgba(220,192,132,.16); color:var(--gold-2);
  border:1px solid rgba(220,192,132,.4);
}
.svb-chip .svb-chip-txt{ display:flex; flex-direction:column; gap:3px; }
.svb-chip .k{ font-family:var(--ui); font-size:10.5px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-2); }
.svb-chip .v{ font-family:var(--ge-disp); font-size:clamp(19px, 2vw, 24px); letter-spacing:.02em; color:var(--cream); }

.svb-form{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.svb-form label{
  display:flex; flex-direction:column; gap:8px;
  font-family:var(--ui);
  font-size:12px; font-weight:500; letter-spacing:.04em;
  color:var(--wine); text-align:left;
}
.svb-form label .req{ color:var(--red); }
.svb-form input,
.svb-form select,
.svb-form textarea{
  width:100%;
  font-family:var(--sans);
  font-size:14.5px; font-weight:400;
  color:var(--ink);
  padding:13px 16px;
  border:1px solid rgba(109,26,43,.22);
  border-radius:12px;
  background:var(--cream);
  outline:none;
  transition:border-color .3s, box-shadow .3s, background .3s;
}
.svb-form input::placeholder,
.svb-form textarea::placeholder{ color:rgba(92,74,79,.5); }
.svb-form input:focus,
.svb-form select:focus,
.svb-form textarea:focus{
  border-color:var(--gold);
  background:#fff;
  box-shadow:0 0 0 3px rgba(185,138,62,.15);
}
.svb-form textarea{ resize:vertical; min-height:104px; }
.svb-full{ grid-column:1 / -1; }
.svb-submit{ grid-column:1 / -1; margin-top:6px; }
.svb-form .btn{ width:100%; }
.svb-note{
  grid-column:1 / -1;
  font-family:var(--ui); font-size:11.5px; letter-spacing:.02em;
  color:var(--ink-soft); text-align:center; margin-top:2px;
}

/* success state */
.svb-success{ text-align:center; padding:26px 10px 10px; }
.svb-check{
  width:78px; height:78px; border-radius:50%;
  display:grid; place-items:center; margin:0 auto 20px;
  background:linear-gradient(135deg, var(--wine), var(--red));
  color:var(--cream); font-size:32px;
  box-shadow:0 18px 40px -14px rgba(135,33,49,.5);
  animation:popIn .6s var(--ease-out);
}
.svb-success h4{ font-size:24px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:10px; }
.svb-success p{ color:var(--ink-soft); font-size:14.5px; max-width:44ch; margin:0 auto; }

@media (max-width: 620px){
  .svb-form{ grid-template-columns:1fr; }
  .svb-card{ border-radius:18px; }
}

/* ============================================================
   SECTION SEPARATION & POLISH
   crisp seams so adjacent tones never blur into each other
   ============================================================ */
.feature,
.reels, .memories, .menus, .events, .keep,
.page-section, .sv-booking{
  border-top:1px solid var(--seam);
}

/* light closing CTA — no more stacked dark blocks before the footer */
.cta-strip.cta-light{
  background:
    radial-gradient(66% 92% at 50% 0%, rgba(220,192,132,.20), transparent 72%),
    var(--cream);
  border-top:1px solid var(--seam);
}
.cta-strip.cta-light .script-accent{ color:var(--gold); }
.cta-strip.cta-light h2{ color:var(--head); }
.cta-strip.cta-light p{ color:var(--ink-soft); }
.cta-strip.cta-light .btn-line.light{
  color:var(--wine); border-color:rgba(87,26,40,.42); background:transparent;
}
.cta-strip.cta-light .btn-line.light:hover{
  background:var(--wine); color:var(--cream); border-color:var(--wine);
}

/* page-scoped mission band tone (keeps clean alternation on about) */
.mission-band.mb-light{
  background:
    radial-gradient(60% 70% at 10% 100%, rgba(135,33,49,.06), transparent 60%),
    var(--cream);
}

/* keep the founder section padding in step with the other feature blocks */
#founder.feature{ padding-block:clamp(58px, 6.2vw, 100px); }

/* ============================================================
   FEATURED / THANK-YOU VIDEO (facebook embed) — About page
   ============================================================ */
.featured-video{
  position:relative; overflow:hidden;
  padding:clamp(74px, 9vw, 122px) 0;
  background:
    radial-gradient(72% 90% at 50% 0%, rgba(135,33,49,.22), transparent 62%),
    var(--wine-deep);
  border-top:1px solid rgba(198,175,131,.16);
}
.featured-video .eyebrow{ color:var(--gold-2); }
.featured-video .ed-h{ color:var(--cream); }
.featured-video .section-sub{
  color:rgba(245,241,232,.78);
  max-width:min(980px, 100%);  /* was 60ch (~660px) — too narrow for a multi-paragraph note */
  text-align:left;             /* centred ragged text reads poorly over many paragraphs */
  margin-inline:auto;
}
.featured-video .section-sub p{ margin:0 0 15px; line-height:1.85; }
.featured-video .section-sub p:last-child{ margin-bottom:0; }
@media (max-width:640px){ .featured-video .section-sub{ text-align:center; } }
.fv-embed{
  position:relative;
  width:min(760px, 100%); margin:0 auto;
  aspect-ratio:16 / 9;                    /* definite box, so the iframe can't collapse it */
  border:1px solid rgba(198,175,131,.30);
  border-radius:14px; overflow:hidden;
  background:#000;
  box-shadow:0 44px 90px -44px rgba(0,0,0,.8);
}
.fv-embed iframe,
.fv-embed video{
  position:absolute; inset:0;
  width:100%; height:100%; border:0; display:block;
  object-fit:cover; background:#000;
}
.fv-link{
  display:block; text-align:center; margin-top:18px;
  font-family:var(--ui); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-2); transition:color .3s;
}
.fv-link:hover{ color:var(--cream); }

/* ============================================================
   ORNAMENTS — classic gold flourishes that draw in on scroll
   (soften transitions, add a refined editorial rhythm)
   ============================================================ */
.ornament{ display:block; --orn: var(--gold); text-align:center; }

/* horizontal section-divider flourish */
.orn-divider{ padding:clamp(22px, 3.8vw, 50px) 0; }
.orn-divider svg{
  width:min(340px, 58%); height:auto; display:block;
  margin-inline:auto; overflow:visible;
}
/* smaller accent flourish (sits under a heading) */
.orn-sm{ padding:16px 0 2px; }
.orn-sm svg{
  width:min(188px, 46%); height:auto; display:block;
  margin-inline:auto; overflow:visible;
}

/* the drawn linework (leaves, rule, diamond) */
.ornament [data-draw]{
  fill:none; stroke:var(--orn); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
  vector-effect:non-scaling-stroke;             /* even line weight regardless of svg scale */
  opacity:.95;
  stroke-dasharray:1; stroke-dashoffset:1;      /* initial hide (pathLength=1); JS drives the draw */
}
.ornament .orn-rule{ transition-duration:1.2s; transition-delay:.34s; }
.ornament.in-view [data-draw]{ stroke-dashoffset:0; }

/* leaves fill in once the stems have drawn (JS drives .orn-fill opacity) */
.ornament .orn-leaf{
  fill:var(--orn); opacity:0;
  transition:opacity .7s ease .5s;
}
.ornament.in-view .orn-leaf{ opacity:.92; }
.ornament .orn-leaf-tip{ opacity:0; }
.ornament.in-view .orn-leaf-tip{ opacity:.78; }
.ornament .orn-midrib{ stroke-width:1.1; opacity:.8; }

/* legacy dot/centre fills, kept so any older markup still animates */
.ornament .orn-dot,
.ornament .orn-core{
  fill:var(--orn); opacity:0;
  transition:opacity .6s ease 1s;
}
.ornament.in-view .orn-dot,
.ornament.in-view .orn-core{ opacity:.9; }

/* champagne gold on dark sections */
.ornament.on-dark{ --orn: var(--gold-2); }
.ornament.on-dark [data-draw]{ opacity:.95; }

/* corner flourishes — Art-Deco frames on SECTION corners (sunburst TR + bracket BL) */
.orn-corner{
  position:absolute; width:clamp(150px, 15vw, 280px); height:auto;
  z-index:4; pointer-events:none;
}
/* every framed section anchors its corners; the ornament now sits OVER the content & photos */
.sec-framed{ position:relative; }
.sec-framed > .container{ position:relative; }
.orn-corner svg{ width:100%; height:auto; display:block; overflow:visible;
  filter:drop-shadow(0 1px 3px rgba(20,8,12,.3)); }   /* reads over photos & dark areas */
/* base ornament runs from the top-left corner along both edges */
.orn-corner.tl{ top:16px;    left:16px; }
.orn-corner.tr{ top:16px;    right:16px;  transform:scaleX(-1); }
.orn-corner.bl{ bottom:16px; left:16px;   transform:scaleY(-1); }
.orn-corner.br{ bottom:16px; right:16px;  transform:scale(-1,-1); }
/* metallic gold gradient — thin L-frame + delicate floral, drawn in */
.orn-corner [data-draw]{ stroke:url(#laka-gold); stroke-width:1.5; opacity:1; }
.orn-corner .orn-thin{ stroke-width:0.85; opacity:0.6; }
.orn-corner .orn-fill{ fill:url(#laka-gold); }
/* corner vine leaves take the metallic gradient, not the flat gold */
.orn-corner .orn-leaf{ fill:url(#laka-gold); stroke:none; }
.orn-corner.in-view .orn-leaf{ opacity:.95; }
.orn-corner.in-view .orn-leaf-tip{ opacity:.8; }
.orn-corner .orn-core{ fill:url(#laka-gold); }
.orn-corner.orn-dark svg{ filter:drop-shadow(0 1px 5px rgba(0,0,0,.45)); }

/* hero emblem — logo inside a champagne medallion that draws in on load */
.vhero-emblem{
  position:relative; display:grid; place-items:center;
  width:clamp(230px, 31vw, 322px); aspect-ratio:1;
  margin-inline:auto; --orn: var(--gold-2);
}
.vhero-ring{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.vhero-ring [data-draw]{ stroke-width:1.4; }
.vhero-logo{
  position:relative; width:54%; height:auto;
  filter:brightness(0) invert(1) drop-shadow(0 10px 26px rgba(42,9,15,.55));
  transform:scale(.92);
  transition:transform 1.2s cubic-bezier(.22,1,.36,1) .25s;
}
.vhero-emblem.is-drawn .vhero-logo{ transform:scale(1); }

/* header logo flourishes — small leaf sprays flanking the logo (draw in on load) */
.header-inner .logo{ display:inline-flex; align-items:center; gap:clamp(10px, 1.5vw, 22px); }
.logo-orn{ display:block; width:clamp(38px, 4.8vw, 68px); flex:0 0 auto; }
.logo-orn-svg{ width:100%; height:auto; display:block; overflow:visible; }
.logo-orn [data-draw]{ stroke:var(--gold-2); stroke-width:1.3; }
.logo > .logo-orn:last-child{ transform:scaleX(-1); }
/* scrolled / solid header → deeper gold reads on cream */
#siteHeader.scrolled .logo-orn [data-draw],
#siteHeader.header-solid .logo-orn [data-draw]{ stroke:var(--gold); }
@media (max-width:768px){ .logo-orn{ display:none; } }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-main{ padding:clamp(58px, 7vw, 108px) 0; }
.contact-grid{
  display:grid; grid-template-columns:0.95fr 1.05fr;
  gap:clamp(36px, 5vw, 78px); align-items:start;
}
.contact-info .eyebrow{ color:var(--gold); }
.contact-info > p{ margin-top:18px; max-width:46ch; color:var(--ink-soft); line-height:1.75; }
.ci-list{ list-style:none; margin:36px 0 0; padding:0; display:flex; flex-direction:column; gap:20px; }
.ci-item{ display:flex; gap:16px; align-items:center; }
.ci-ic{
  flex:0 0 auto; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; color:var(--wine);
  background:var(--cream-2); border:1px solid rgba(156,124,59,.3);
}
.ci-txt{ display:flex; flex-direction:column; gap:3px; }
.ci-k{ font-family:var(--ui); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft); }
.ci-v{ font-family:var(--ge-disp); font-size:19px; color:var(--head); text-decoration:none; transition:color .3s; }
a.ci-v:hover{ color:var(--wine); }
.ci-socials{ display:flex; flex-wrap:wrap; gap:24px; margin-top:34px; }
.ci-socials a{
  font-family:var(--ui); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--wine); text-decoration:none; position:relative; padding-bottom:4px;
}
.ci-socials a::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--gold-2); transform:scaleX(.35); transform-origin:left; transition:transform .35s var(--ease-out); }
.ci-socials a:hover::after{ transform:scaleX(1); }
.contact-card{ position:relative; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }

/* ============================================================
   DIRECTIONS
   ============================================================ */
/* latin brand label on the direction cards */
.svc-latin{
  display:block; font-family:var(--ui);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); margin-bottom:7px;
}
/* direction tag inside a project's detail card */
.pj-dir-tag{
  display:flex; align-items:center; gap:9px; margin:6px 0 18px;
  padding:11px 15px; border:1px solid rgba(156,124,59,.32); border-radius:9px;
  text-decoration:none; background:var(--cream-2); transition:border-color .3s;
}
.pj-dir-tag > span:first-child{
  font-family:var(--ui); font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-soft);
}
.pj-dir-tag em{ font-family:var(--ge-disp); font-style:normal; font-size:15px; color:var(--wine); }
.pj-dir-tag .arw{ margin-left:auto; color:var(--gold); transition:transform .3s; }
.pj-dir-tag:hover{ border-color:var(--gold); }
.pj-dir-tag:hover .arw{ transform:translateX(4px); }

/* directions archive — all four cards together, perfectly responsive */
.svc-grid-4{ grid-template-columns:repeat(4, 1fr); gap:clamp(16px, 1.8vw, 26px); }
@media (max-width:1040px){ .svc-grid-4{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:540px){ .svc-grid-4{ grid-template-columns:1fr; max-width:430px; margin-inline:auto; } }

/* ============================================================
   MOBILE POLISH
   ============================================================ */
@media (max-width:760px){
  /* corner ornaments smaller so they frame, not crowd, on phones */
  .orn-corner{ width:clamp(70px, 20vw, 104px); }
  .orn-corner.tl,.orn-corner.tr{ top:12px; }
  .orn-corner.bl,.orn-corner.br{ bottom:12px; }
  .orn-corner.tl,.orn-corner.bl{ left:12px; }
  .orn-corner.tr,.orn-corner.br{ right:12px; }
  /* hero slogan sits a touch higher & tighter on phones */
  .vhero-slogan-wrap{ top:76%; width:94%; }
  .vhero-slogan{ font-size:clamp(26px, 8.4vw, 40px); }
}
@media (max-width:440px){
  .orn-corner{ width:78px; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .vhero-scroll .arw{ animation:none; }
  .vhero-content > *{ opacity:1 !important; transform:none !important; }
  .ornament [data-draw]{ transition:none; stroke-dashoffset:0; }
  .ornament .orn-dot, .ornament .orn-core{ transition:none; opacity:.9; }
}

/* Lead paragraphs under the projects-archive intro (client source copy). */
.works-lead{ max-width:70ch; margin-inline:auto; }
.works-lead p{
  margin:0 0 14px;
  color:var(--ink-soft); font-size:15px; line-height:1.85; text-align:center;
}
.works-lead p:last-child{ margin-bottom:0; }


/* ============================================================
   IMAGE STANDARDISATION
   Admin uploads arrive at any size or shape. Every framed image
   wrapper below owns its aspect ratio, and the <img> inside fills
   that frame with object-fit:cover — so an upload is cropped to
   fit, never stretched, and never changes the page layout.
   ============================================================ */
.feature-media > img,  .feature-media > video,
.proj-media > img,     .ev-card > img,
.shot > img,           .reel > img,
.ph-bg > img,          .qb-bg > img,
.ed-cta-bg > img,      .fb-strip img,
.am-main img,          .founder-media img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
  max-width:none;                 /* beat the global img{max-width:100%} */
}

/* the frames themselves — one ratio per context */
.proj-media{ aspect-ratio:4/5; overflow:hidden; }
.ev-card{ aspect-ratio:16/10; overflow:hidden; }
.reel{ aspect-ratio:3/4; }
.mem-masonry .shot{ aspect-ratio:1/1; }
.sv-gallery .shot{ aspect-ratio:5/4; overflow:hidden; }
.fb-strip a{ aspect-ratio:1/1; overflow:hidden; display:block; }

/* reusable helpers for any frame added later */
.ratio-1x1{ aspect-ratio:1/1; overflow:hidden; }
.ratio-4x5{ aspect-ratio:4/5; overflow:hidden; }
.ratio-3x2{ aspect-ratio:3/2; overflow:hidden; }
.ratio-16x9{ aspect-ratio:16/9; overflow:hidden; }
.ratio-1x1 > img, .ratio-4x5 > img, .ratio-3x2 > img, .ratio-16x9 > img{
  width:100%; height:100%; object-fit:cover; display:block; max-width:none;
}

/* About page reads as portraits; the homepage stays landscape.
   The height is also capped: a 4:5 plate at full column width grew taller than
   its own text column and filled the whole viewport, so it is bounded and
   centred in the column instead. */
.page-template-template-about .feature-media,
.page-template-template-about .feature-media.f-wide,
.page-template-template-about .feature-media.f-tall{
  /* Full column width, like the homepage panels. Square rather than 3:2 because
     the founder portrait is a tall frame — a landscape crop loses the diploma. */
  aspect-ratio:1/1;
  width:100%;
  height:auto;
  max-width:100%;
  margin-inline:0;
}


/* Founder portrait shows in FULL — no crop.
   The frame matches the photo's own 2:3 ratio, so cover has nothing to trim, and
   object-fit:contain keeps that true even if a differently shaped photo is
   uploaded later (it letterboxes onto the cream instead of cutting). The height
   is capped so a tall portrait can't dominate the page. */
.page-template-template-about #founder .feature-media,
.page-template-template-about #founder .feature-media.f-tall,
.page-template-template-about #founder .feature-media.f-wide{
  aspect-ratio:2/3;
  height:min(700px, 76vh);
  width:auto;
  max-width:100%;
  margin-inline:auto;
  background:var(--cream-2);
}
.page-template-template-about #founder .feature-media > img{
  object-fit:contain;
  object-position:center;
}


/* About page: align each split row to the TOP. The rows are centred site-wide,
   which pushed the who-we-are photo far down beside its very tall text column. */
.page-template-template-about .feature .container{ align-items:start; }
.page-template-template-about .feature-media{ align-self:start; }


/* ============================================================
   GLOBAL IMAGE FITTING — whole photo, stable layout
   ------------------------------------------------------------
   Two behaviours, chosen by what the element has to protect:

   1. CARDS IN GRIDS keep a fixed aspect-ratio and use object-fit:contain.
      The frame never depends on the image, so columns and rows cannot shift;
      an off-shape upload is matted in the section colour instead of cropped.

   2. LARGE SINGLE PANELS (the feature/welcome splits) let the box follow the
      photo, bounded by a max-height. No crop and no wide empty mat — the panel
      simply takes the photo's shape, and the ceiling stops a tall upload from
      ballooning the row.

   Full-bleed backdrops stay on cover: they are decoration, and contain would
   letterbox a page banner.
   ============================================================ */

/* ---- 1. grid cards: fixed frame, contained image, matted ---------------- */
.proj-media > img,
.ev-card > img,
.reel > img,
.mem-masonry .shot img,
.sv-gallery .shot img,
.fb-strip img{
  object-fit:contain;
  object-position:center;
  width:100%; height:100%;
  max-width:100%; max-height:100%;
}
.proj-media,
.sv-gallery .shot{ background:var(--cream-2); }
.mem-masonry .shot,
.reel{ background:var(--cream-3); }
.ev-card{ background:var(--wine-deep); }

/* height ceilings — a second guard on top of the fixed ratios */
.mem-masonry .shot{ max-height:420px; }
.reel{ max-height:520px; }
.proj-media{ max-height:520px; }
.ev-card{ max-height:480px; }
.sv-gallery .shot{ max-height:380px; }

/* ---- 2. large panels: the box follows the photo, with a ceiling --------- */
.feature-media,
.feature-media.f-wide,
.feature-media.f-tall{      /* the shape modifiers still pinned 3:2 and outrank a bare .feature-media */
  aspect-ratio:auto;
  height:auto;
  min-height:0;
  max-height:min(560px, 62vh);
  background:transparent;
  /* hug the photo: a portrait upload gives a narrow panel centred in the column
     rather than a wide box with empty space either side. */
  width:fit-content;
  max-width:100%;
  margin-inline:auto;
}
.feature-media > img{
  position:static;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:min(560px, 62vh);
  object-fit:contain;
  display:block;
  margin-inline:auto;
}

/* ---- 3. backdrops keep covering ---------------------------------------- */
.ph-bg > img,
.qb-bg > img,
.ed-cta-bg > img,
.vhero-media > img,
.vhero-media > video{
  object-fit:cover;
  object-position:center;
}


/* ============================================================
   DIRECTION CARDS — copy sits bottom-left, not centred
   ============================================================ */
.ev-card{
  align-items:flex-end;        /* was centre */
  justify-content:flex-start;
  text-align:left;
}
.ev-body{
  padding:clamp(22px, 2.4vw, 34px);
  max-width:36ch;
  width:100%;
}
.ev-body h3{ text-wrap:balance; }
/* the scrim was an even wash; weight it to the bottom so the copy stays legible
   now that it sits over the lower part of the photo */
.ev-card::after{
  background:linear-gradient(180deg, rgba(42,9,15,.18) 0%, rgba(42,9,15,.34) 45%, rgba(42,9,15,.76) 100%);
}
.ev-card:hover::after{
  background:linear-gradient(180deg, rgba(42,9,15,.14) 0%, rgba(42,9,15,.28) 45%, rgba(42,9,15,.70) 100%);
}
@media (max-width:640px){
  .ev-body{ max-width:none; }
}

/* ============================================================
   HOMEPAGE PANEL PHOTO — larger, still bounded
   ------------------------------------------------------------
   The ceiling was min(560px, 62vh), which left a portrait upload only ~372px
   wide in a 637px column. Raised so the photo reads at a proper size while the
   row height stays capped and the proportions are untouched.
   ============================================================ */
.feature-media,
.feature-media.f-wide,
.feature-media.f-tall{
  max-height:min(760px, 78vh);
}
.feature-media > img{
  max-height:min(760px, 78vh);
}


/* ============================================================
   ORNAMENT LAYERING — decoration always sits behind the content
   ------------------------------------------------------------
   The corner vines were set to z-index:4 and injected after .container in the
   DOM, so they painted over headings, pager links and body copy. They are
   decorative only, so they now sit behind everything the reader needs, at every
   breakpoint. Content gets an explicit stacking context so nothing can slip
   above it; the ornaments are already pointer-events:none, so they never
   intercept clicks either.
   ============================================================ */
.orn-corner{ z-index:0; }
/* the hero wave keeps its own absolute full-width positioning (z-index:5);
   forcing position:relative here collapsed it to a half-width in-flow shape. */

.sec-framed > .container,
.feature > .container,
.events > .container,
.reels > .container,
.memories > .container,
.projects > .container,
.page-section > .container,
.works-archive > .container,
.featured-video > .container,
.quote-band > .container,
.ed-cta > .container{
  position:relative;
  z-index:2;
}

/* the page-hero band keeps its own order: backdrop, veil, then copy */
.page-hero > .container{ position:relative; z-index:3; }

/* belt and braces: any ornament anywhere stays behind sibling content */
.ornament.orn-corner{ z-index:0 !important; }


/* ============================================================
   REVEAL ZOOM — removed for content images
   ------------------------------------------------------------
   .ir > img was scaled to 1.14 and animated back to 1 inside an
   overflow:hidden wrapper. That clips 14% off every edge for the duration of
   the reveal, and permanently on any card whose observer never fires. Since
   these photos must never be cropped, keep the curtain wipe (::before) and
   drop the zoom. The deliberate hover zoom on gallery tiles is untouched.
   ============================================================ */
.ir > img,
.ir.in-view > img{ transform:none; }
.shot.ir:hover > img,
.shot.ir.in-view:hover > img{ transform:scale(1.07); }


/* ============================================================
   ABOUT PANELS — mat the photo inside its frame
   ------------------------------------------------------------
   The image filled the panel edge to edge, so the decorative inset border
   (.feature-media::after, inset:13px) was drawn ACROSS the photo — a line just
   above the subject's head, which reads as the top being cut. The photo now
   sits inside a mat, so the border frames it rather than crossing it, and the
   subject never collides with the panel edge.
   ============================================================ */
.page-template-template-about .feature-media{
  box-sizing:border-box;
  padding:clamp(14px, 1.4vw, 20px);
  background:var(--cream-2);
  display:flex;
  align-items:center;      /* even mat top and bottom */
  justify-content:center;
}
.page-template-template-about .feature-media > img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
/* keep the inset frame just outside the photo, not over it */
.page-template-template-about .feature-media::after{
  inset:clamp(6px, 0.7vw, 10px);
}


/* ============================================================
   DIRECTION CARDS — sizing fix
   ------------------------------------------------------------
   `.ev-card` kept a min-height from before it was given an aspect-ratio.
   A grid item that has a ratio AND a definite size in one axis stops
   stretching to its track and derives the other axis from the ratio, so
   460px tall x 16/10 produced a 736px card in a 664px track (the two
   desktop columns overlapped) and a 512px card in a 339px track on mobile
   (137px past the screen edge).

   Wide: the ratio owns the shape, so the min-height goes.
   One column (<=900px): the ratio would leave ~212px, less than the copy
   needs, so the ratio steps aside and a min-height takes over — with no
   ratio the card stretches to its track again.
   ============================================================ */
.ev-card{
  width:100%;
  min-height:0;
}
@media (max-width:900px){
  .ev-grid{ max-width:560px; margin-inline:auto; }
  .ev-card{
    aspect-ratio:auto;
    max-height:none;
    min-height:clamp(280px, 68vw, 400px);
  }
}


/* ============================================================
   ABOUT — the who-we-are panel takes the photo's shape
   ------------------------------------------------------------
   The panel was pinned square because the photo was square. The replacement is
   a 4:5 portrait, which a square frame would band with cream down both sides.
   Pinned to the photo's own ratio and driven from its height (like the founder
   frame below it), so the mat is even on all four sides and the inset border
   frames the picture instead of crossing it.
   ============================================================ */
.page-template-template-about .feature-media.f-wide{
  aspect-ratio:4/5;
  height:min(720px, 76vh);
  width:auto;
  max-width:100%;
  max-height:none;
  margin-inline:0;
}


/* ============================================================
   LANGUAGE SWITCHER (TranslatePress) — matches the header nav
   Light over the hero/video; dark on the scrolled + solid headers.
   ============================================================ */
.lang-switch{
  display:inline-flex; align-items:center; gap:9px;
  position:relative; margin-left:8px; padding-left:24px;
  font-family:var(--ui);
  font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
}
.lang-switch::before{                      /* hairline divider from the CTA */
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:16px; background:rgba(245,241,232,.28);
}
.lang-switch .lang-opt{ color:rgba(245,241,232,.7); transition:color .3s; text-decoration:none; }
.lang-switch a.lang-opt:hover{ color:#fff; }
.lang-switch .lang-opt.is-active{ color:var(--gold-2); }
.lang-switch .lang-sep{ color:rgba(245,241,232,.38); font-weight:400; }

/* scrolled (home, after scroll) + solid (inner pages) → dark text on cream */
#siteHeader.scrolled .lang-switch::before,
#siteHeader.header-solid .lang-switch::before{ background:rgba(42,9,15,.16); }
#siteHeader.scrolled .lang-switch .lang-opt,
#siteHeader.header-solid .lang-switch .lang-opt{ color:rgba(42,9,15,.55); }
#siteHeader.scrolled .lang-switch a.lang-opt:hover,
#siteHeader.header-solid .lang-switch a.lang-opt:hover{ color:var(--wine); }
#siteHeader.scrolled .lang-switch .lang-opt.is-active,
#siteHeader.header-solid .lang-switch .lang-opt.is-active{ color:var(--gold); }
#siteHeader.scrolled .lang-switch .lang-sep,
#siteHeader.header-solid .lang-switch .lang-sep{ color:rgba(42,9,15,.28); }

/* mobile slide-out variant — centred in the footer, on the dark overlay */
.lang-switch--mm{
  margin:0 0 16px; padding:0; justify-content:center;
  gap:14px; font-size:15px; letter-spacing:.18em;
}
.lang-switch--mm::before{ display:none; }
.lang-switch--mm .lang-opt{ color:rgba(245,241,232,.72); }
.lang-switch--mm a.lang-opt:hover{ color:#fff; }
.lang-switch--mm .lang-opt.is-active{ color:var(--gold-2); }
.lang-switch--mm .lang-sep{ color:rgba(245,241,232,.4); }


/* ============================================================
   FORM CONTROLS — consistent height + clean custom select
   Native <select>/<date>/<number> rendered taller (47px) than text
   inputs (45px) with OS chrome (dropdown arrow, spinners), so the rows
   looked ragged. All controls are normalised to one height, the select
   gets a custom champagne chevron, and number spinners are removed.
   Applies to both the contact form (.svb-form) and the booking modal
   (.bm-form).
   ============================================================ */
.svb-form input:not([type="hidden"]),
.svb-form select,
.bm-form input:not([type="hidden"]),
.bm-form select{
  height:48px;
  box-sizing:border-box;
}
.svb-form select,
.bm-form select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  padding-right:44px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239C7C3B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  cursor:pointer;
}
/* strip number spinners so numeric fields match the text fields */
.svb-form input[type="number"],
.bm-form input[type="number"]{ -moz-appearance:textfield; }
.svb-form input[type="number"]::-webkit-outer-spin-button,
.svb-form input[type="number"]::-webkit-inner-spin-button,
.bm-form input[type="number"]::-webkit-outer-spin-button,
.bm-form input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
/* date field: keep the native picker but align its box + icon tint */
.svb-form input[type="date"],
.bm-form input[type="date"]{ -webkit-appearance:none; appearance:none; }
.svb-form input[type="date"]::-webkit-calendar-picker-indicator,
.bm-form input[type="date"]::-webkit-calendar-picker-indicator{ opacity:.55; cursor:pointer; }
/* keep the placeholder-selected option muted like a real placeholder */
.svb-form select:required:invalid,
.bm-form select:required:invalid{ color:rgba(92,74,79,.6); }
.svb-form select option,
.bm-form select option{ color:var(--ink); }


/* ============================================================
   DIRECTION CARDS — phone layout (<=768px)  [hardened, !important]
   The Bebas/FiraGO titles + copy + button crowded the small card and
   sat over the photo. Everything is drastically trimmed and forced
   with !important so no earlier stylesheet can override it; the card
   keeps a modest height so the background image stays fully visible.
   ============================================================ */
@media (max-width:768px){
  .ev-grid{ grid-template-columns:1fr !important; max-width:520px !important; margin-inline:auto !important; }
  .ev-card{
    aspect-ratio:auto !important;
    max-height:none !important;
    min-height:clamp(300px, 78vw, 380px) !important;
    align-items:flex-end !important;
    justify-content:flex-start !important;
  }
  .ev-body{ padding:18px 16px !important; max-width:none !important; width:100% !important; }
  .ev-body .eyebrow{ font-size:9.5px !important; letter-spacing:.16em !important; margin-bottom:5px !important; }
  .ev-body h3{ font-size:18px !important; line-height:1.15 !important; letter-spacing:.02em !important; margin-bottom:7px !important; }
  .ev-body p{ font-size:12px !important; line-height:1.45 !important; margin-bottom:12px !important; }
  .ev-body .btn-line{ padding:8px 16px !important; font-size:9.5px !important; letter-spacing:.12em !important; }
  /* bottom-weighted scrim keeps small text legible without darkening the photo */
  .ev-card::after{ background:linear-gradient(180deg, rgba(42,9,15,.08) 0%, rgba(42,9,15,.26) 40%, rgba(42,9,15,.72) 100%) !important; }
}


/* ============================================================
   REELS FROM PASTED LINKS
   Embeddable links (IG / TikTok / YouTube / MP4) fill the card;
   anything else becomes a click-through card over its poster.
   ============================================================ */
.reel{ position:relative; }
.reel-embed{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; object-fit:cover; background:#000; z-index:1; }
.reel-has-embed{ background:#000; }
.reel-link{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px;
  text-decoration:none; color:var(--cream);
  background:linear-gradient(150deg, var(--wine), var(--wine-deep)); z-index:1;
}
.reel-link::after{ content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(42,9,15,.28), rgba(42,9,15,.68)); }
.reel-link > *{ position:relative; z-index:1; }
.reel-link .reel-play{
  position:static; transform:none; width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center; background:rgba(245,241,232,.92); color:var(--wine);
  transition:transform .35s var(--ease-out), background .35s;
}
.reel-link:hover .reel-play{ transform:scale(1.08); background:var(--gold-2); }
.reel-link-label{ font-family:var(--ui); font-size:11px; letter-spacing:.16em; text-transform:uppercase; text-align:center; padding:0 14px; }


/* Reels section subtitle — two centered paragraphs under the heading */
.reels .section-sub{ max-width:64ch; }
.reels .section-sub p{ margin:0 0 12px; }
.reels .section-sub p:last-child{ margin-bottom:0; }