/* =========================================================
   VIBES ON ICE — Noir Reserve
   Shared stylesheet for index / experiences / inquire
   ========================================================= */

/* ================= BASE ================= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{background:#0A0908;font-family:'Manrope',system-ui,sans-serif;line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;cursor:pointer;background:none;border:none;color:inherit}
.concept{min-height:100vh;overflow-x:clip}
[hidden]{display:none!important}
::selection{background:#C6A15B;color:#0A0908}

/* skip link — keyboard users land here first */
.voi-skip{
  position:absolute;left:-9999px;top:0;z-index:2000;
  padding:14px 22px;background:#C8A45D;color:#0A0908;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  text-decoration:none;border-radius:0 0 6px 0;
}
.voi-skip:focus{left:0}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* =========================================================
   NOIR RESERVE PALETTE
   ========================================================= */
.c3{
  --bg:#070605;--panel:#100E0B;--text:#EFE6D4;--muted:#BDAF93;
  --gold:#C8A45D;--champ:#E8D5AE;--line:rgba(200,164,93,.28);
  background:var(--bg);color:var(--text);
  font-family:'Manrope',sans-serif;font-weight:300;
}
.c3 .disp{font-family:'Italiana',serif;font-weight:400}
.c3-wrap{width:min(1240px,calc(100% - 48px));margin-inline:auto}
body[data-concept="3"].cursor-on,
body[data-concept="3"].cursor-on *{cursor:none!important}

/* ================= NAV ================= */
.c3-nav{position:fixed;top:0;left:0;right:0;z-index:30;pointer-events:none}
.c3-nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0}
.c3-nav a, .c3-nav button{pointer-events:auto}
.c3-nav .mark{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
.c3-nav .voi{font-family:'Italiana',serif;font-size:1.7rem;color:var(--gold);line-height:1}
.c3-nav .word{font-size:.66rem;letter-spacing:.4em;text-transform:uppercase;color:var(--champ)}

/* nav links + CTA cluster */
.c3-nav-right{display:flex;align-items:center;gap:clamp(16px,2.4vw,34px)}
.c3-nav-links{display:flex;align-items:center;gap:clamp(16px,2.4vw,32px);list-style:none}
.c3-nav-links a{
  position:relative;text-decoration:none;
  font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--champ);
  padding:6px 0;transition:color .35s ease;
}
.c3-nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.c3-nav-links a:hover{color:var(--gold)}
.c3-nav-links a:hover::after,
.c3-nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.c3-nav-links a[aria-current="page"]{color:var(--gold)}

.c3-nav .c3-gold-btn{padding:13px 28px;font-size:.7rem;box-shadow:0 8px 26px rgba(198,164,93,.22)}

/* scrolled state — nav gains a ground so links stay legible over content.
   Extends past the bar's own height and stays near-opaque through it, so form
   fields and body copy cannot bleed through behind the links. */
.c3-nav::before{
  content:"";position:absolute;left:0;right:0;top:0;bottom:-28px;z-index:-1;
  background:linear-gradient(to bottom,
    rgba(7,6,5,.97) 0%,
    rgba(7,6,5,.95) 62%,
    rgba(7,6,5,.72) 82%,
    rgba(7,6,5,0) 100%);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;transition:opacity .45s ease;
}
.c3-nav.is-scrolled::before{opacity:1}

@media (max-width:900px){
  .c3-nav-links{gap:16px}
  .c3-nav-links a{font-size:.62rem;letter-spacing:.2em}
  .c3-nav .c3-gold-btn{padding:11px 20px;font-size:.62rem;letter-spacing:.16em}
}
@media (max-width:620px){
  .c3-nav-in{padding:14px 0}
  .c3-nav-right{gap:14px}
  .c3-nav-links{gap:14px}
  /* CTA is reachable on every page via hero + footer; keep the bar uncluttered */
  .c3-nav .c3-gold-btn{display:none}
}

/* four nav items overflow the wrap on the narrowest phones — tighten the
   tracking rather than dropping a link or hiding the site behind a menu */
@media (max-width:430px){
  .c3-nav-in{gap:10px}
  .c3-nav-right{gap:10px}
  .c3-nav-links{gap:12px}
  .c3-nav-links a{font-size:.58rem;letter-spacing:.13em}
  .c3-nav .mark img{height:36px}
}

.c3-ghost{
  display:inline-block;padding:13px 30px;border:1px solid var(--line);border-radius:999px;
  color:var(--champ);font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;text-decoration:none;
  background:rgba(7,6,5,.35);backdrop-filter:blur(8px);
  transition:background .35s ease,color .35s ease,border-color .35s ease;
}
.c3-ghost:hover{background:var(--gold);color:#0A0908;border-color:var(--gold)}

/* ================= HERO ================= */
.c3-hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:clip}
.c3-gl,.c3-hero-art{position:absolute;inset:0;width:100%;height:100%}
.c3-gl{z-index:0}
.c3.gl-fallback .c3-gl{display:none}
.c3.gl-fallback .c3-hero{background:radial-gradient(120% 90% at 70% 80%,rgba(198,164,93,.22),transparent 60%),radial-gradient(80% 60% at 30% 20%,rgba(232,213,174,.08),transparent 60%),var(--bg)}
.c3-hero-art{z-index:1;display:flex;align-items:flex-end;pointer-events:none}
.c3-hero-art img{
  width:100%;height:72%;object-fit:cover;object-position:center bottom;
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.95) 40%,transparent 100%);
  mask-image:linear-gradient(to top,rgba(0,0,0,.95) 40%,transparent 100%);
  opacity:.9;will-change:transform;
}
.c3-hero-veil{position:absolute;inset:0;z-index:2;background:radial-gradient(60% 55% at 50% 46%,rgba(7,6,5,.5),transparent 100%),linear-gradient(to top,rgba(7,6,5,.78) 0%,rgba(7,6,5,.26) 38%,rgba(7,6,5,.38) 100%)}
.c3-hero-content{position:relative;z-index:3;text-align:center;padding:110px 24px 130px}
.c3-eyebrow{font-size:.7rem;letter-spacing:.5em;text-transform:uppercase;color:var(--gold);font-weight:500}
.c3-hero h1{
  font-family:'Italiana',serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(3.2rem,11.5vw,10.5rem);line-height:.95;letter-spacing:.04em;
  margin:26px 0 8px;color:var(--champ);
  text-shadow:0 2px 60px rgba(0,0,0,.55);
}
.c3-hero h1 .word{display:inline-block;white-space:nowrap}
.c3-hero h1 .ch{display:inline-block;will-change:transform,opacity}
.c3-hero .subword{font-size:clamp(.72rem,1.4vw,.95rem);letter-spacing:clamp(.5em,1.2vw,.9em);text-transform:uppercase;color:var(--gold);margin-left:.45em}
.c3-hero-tag{max-width:52ch;margin:34px auto 0;color:var(--champ);font-size:1rem;line-height:1.8;font-weight:300;text-shadow:0 1px 22px rgba(0,0,0,.9),0 0 3px rgba(0,0,0,.7)}
.c3-hero-cta{margin-top:44px;display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.c3-gold-btn{
  display:inline-block;padding:17px 42px;background:var(--gold);color:#0A0908;border-radius:999px;
  font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;text-decoration:none;
  transition:background .35s ease,transform .35s ease;box-shadow:0 10px 40px rgba(198,164,93,.25);
}
.c3-gold-btn:hover{background:var(--champ);transform:translateY(-2px)}
.c3-scrollcue{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;
  font-size:.62rem;letter-spacing:.4em;text-transform:uppercase;color:var(--muted);
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.c3-scrollcue::after{content:"";width:1px;height:44px;background:linear-gradient(to bottom,var(--gold),transparent)}

/* ================= SECTIONS ================= */
.c3-manifesto{padding:clamp(120px,18vh,220px) 0}
.c3-manifesto .label{font-size:.68rem;letter-spacing:.44em;text-transform:uppercase;color:var(--gold);margin-bottom:34px}
.c3-manifesto p{
  font-family:'Italiana',serif;font-size:clamp(1.9rem,4.6vw,3.9rem);line-height:1.28;
  max-width:26ch;color:var(--champ);
}
.c3-manifesto .w{display:inline-block}

.c3-panel{position:relative;padding:clamp(80px,12vh,150px) 0}
.c3-panel-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,90px);align-items:center}
@media (max-width:880px){.c3-panel-grid{grid-template-columns:1fr}}
.c3-figure{position:relative;overflow:hidden;border-radius:6px;border:1px solid var(--line);aspect-ratio:4/5;max-height:78vh}
.c3-figure img{width:100%;height:118%;object-fit:cover;will-change:transform}
.c3-figure .frame-label{
  position:absolute;left:18px;bottom:16px;z-index:2;font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;color:var(--champ);
  background:rgba(7,6,5,.55);border:1px solid var(--line);border-radius:999px;padding:8px 16px;backdrop-filter:blur(6px);
}
.c3-panel-copy .label{font-size:.68rem;letter-spacing:.44em;text-transform:uppercase;color:var(--gold)}
.c3-panel-copy h2{font-family:'Italiana',serif;font-size:clamp(2.2rem,4.6vw,3.9rem);line-height:1.08;margin:22px 0 24px;color:var(--champ)}
.c3-panel-copy p{color:var(--muted);line-height:1.85;max-width:50ch}
.c3-panel-copy p + p{margin-top:1.1em}

.c3-services{padding:clamp(70px,10vh,130px) 0 clamp(90px,13vh,160px)}
.c3-services .label{font-size:.68rem;letter-spacing:.44em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.c3-services .lead{color:var(--muted);max-width:56ch;line-height:1.8;margin-bottom:clamp(40px,6vh,64px)}
.c3-srow{
  display:grid;grid-template-columns:90px minmax(0,1fr) minmax(0,1.1fr);gap:18px 40px;align-items:baseline;
  padding:36px 0;border-top:1px solid var(--line);transition:padding-left .45s cubic-bezier(.2,.7,.2,1);
}
.c3-srow:last-of-type{border-bottom:1px solid var(--line)}
.c3-srow:hover{padding-left:18px}
@media (max-width:820px){.c3-srow{grid-template-columns:56px 1fr}.c3-srow p{grid-column:2}}
.c3-srow .n{font-family:'Italiana',serif;font-size:1.3rem;color:var(--gold)}
.c3-srow h3{font-family:'Italiana',serif;font-weight:400;font-size:clamp(1.7rem,3.4vw,2.7rem);color:var(--champ);transition:color .4s}
.c3-srow:hover h3{color:var(--gold)}
.c3-srow p{color:var(--muted);line-height:1.75;max-width:46ch;font-size:.97rem}

/* services rows that link through to the experiences page */
a.c3-srow{text-decoration:none}
a.c3-srow:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

.c3-process{position:relative;overflow:clip;padding:clamp(110px,16vh,190px) 0}
.c3-process-bg{position:absolute;inset:-12% 0;z-index:0}
.c3-process-bg img{width:100%;height:100%;object-fit:cover;opacity:.32;will-change:transform}
.c3-process-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,var(--bg) 0%,rgba(7,6,5,.55) 30%,rgba(7,6,5,.55) 70%,var(--bg) 100%)}
.c3-process .c3-wrap{position:relative;z-index:1}
.c3-process h2{font-family:'Italiana',serif;font-size:clamp(2.2rem,4.8vw,4rem);color:var(--champ);max-width:18ch;line-height:1.1}
.c3-process .sub{color:var(--muted);margin:20px 0 clamp(40px,6vh,64px);max-width:52ch;line-height:1.8}
.c3-pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,28px)}
@media (max-width:880px){.c3-pcards{grid-template-columns:1fr}}
.c3-pcard{
  background:rgba(16,14,11,.72);border:1px solid var(--line);border-radius:6px;
  padding:34px 28px 38px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .45s;
}
.c3-pcard:hover{transform:translateY(-6px);border-color:var(--gold)}
.c3-pcard .n{font-family:'Italiana',serif;font-size:2.2rem;color:var(--gold)}
.c3-pcard h3{font-family:'Italiana',serif;font-size:1.6rem;color:var(--champ);margin:14px 0 12px}
.c3-pcard p{color:var(--muted);font-size:.95rem;line-height:1.75}

.c3-proof{padding:clamp(90px,13vh,150px) 0;text-align:center}
.c3-proof .quote{
  font-family:'Italiana',serif;font-size:clamp(1.7rem,3.6vw,3rem);line-height:1.35;
  max-width:28ch;margin:0 auto 36px;color:var(--champ);
}
.c3-proof .quote em{color:var(--gold);font-style:normal}
.c3-proof-list{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 34px;list-style:none;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}

.c3-cta{position:relative;overflow:clip;text-align:center;padding:clamp(130px,20vh,230px) 0}
.c3-cta-bg{position:absolute;inset:-10% 0;z-index:0}
.c3-cta-bg img{width:100%;height:100%;object-fit:cover;opacity:.4;will-change:transform}
.c3-cta-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 90% at 50% 50%,rgba(7,6,5,.42) 0%,var(--bg) 88%)}
.c3-cta .c3-wrap{position:relative;z-index:1}
.c3-cta h2{font-family:'Italiana',serif;font-size:clamp(2.6rem,6.4vw,5.6rem);line-height:1.05;color:var(--champ);max-width:16ch;margin:20px auto 26px}
.c3-cta p{color:var(--muted);max-width:52ch;margin:0 auto 46px;line-height:1.8}
.c3-cta .c3-gold-btn{cursor:pointer}

/* =========================================================
   SUBPAGE HEADER (experiences / inquire)
   ========================================================= */
.c3-pagehead{position:relative;overflow:clip;padding:clamp(150px,22vh,240px) 0 clamp(50px,8vh,90px)}
.c3-pagehead-bg{position:absolute;inset:-10% 0;z-index:0}
.c3-pagehead-bg img{width:100%;height:100%;object-fit:cover;opacity:.28}
.c3-pagehead-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(7,6,5,.86) 0%,rgba(7,6,5,.6) 45%,var(--bg) 100%)}
.c3-pagehead .c3-wrap{position:relative;z-index:1}
.c3-pagehead h1{
  font-family:'Italiana',serif;font-weight:400;
  font-size:clamp(2.6rem,7vw,5.4rem);line-height:1.02;color:var(--champ);
  margin:18px 0 22px;max-width:18ch;
}
.c3-pagehead .lead{color:var(--muted);max-width:62ch;line-height:1.75;font-size:clamp(1.12rem,1.45vw,1.28rem);text-wrap:pretty}
.c3-pagehead h1.c3-h1-tight{font-size:clamp(2.2rem,5.4vw,4.2rem);max-width:none}
.c3-nowrap-desktop{display:inline-block;white-space:nowrap}
@media (max-width:680px){
  .c3-nowrap-desktop{white-space:normal!important;display:inline!important}
}

/* =========================================================
   EXPERIENCES PAGE
   ========================================================= */
.c3-exp{padding:clamp(30px,6vh,60px) 0 clamp(90px,13vh,150px)}
.c3-exp-item{
  display:grid;grid-template-columns:88px minmax(0,1fr);gap:8px 40px;
  padding:clamp(38px,6vh,60px) 0;border-top:1px solid var(--line);
}
.c3-exp-item:last-of-type{border-bottom:1px solid var(--line)}
.c3-exp-item .n{font-family:'Italiana',serif;font-size:1.4rem;color:var(--gold);line-height:1.4}
.c3-exp-item h2{
  font-family:'Italiana',serif;font-weight:400;
  font-size:clamp(1.9rem,4vw,3.1rem);line-height:1.1;color:var(--champ);margin-bottom:18px;
}
.c3-exp-item .desc{color:var(--muted);line-height:1.85;max-width:56ch;margin-bottom:26px}
.c3-exp-body{min-width:0}

/* "best for" tags */
.c3-exp-tags{display:flex;flex-wrap:wrap;gap:8px 10px;list-style:none;margin-bottom:26px}
.c3-exp-tags li{
  font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--champ);
  border:1px solid var(--line);border-radius:999px;padding:7px 15px;background:rgba(16,14,11,.55);
}

/* pricing placeholder — replaced when the client supplies real numbers */
.c3-exp-price{
  font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);
  padding-left:16px;border-left:2px solid var(--line);margin-bottom:24px;
}
.c3-exp-price span{display:block;color:var(--muted);letter-spacing:.14em;margin-top:6px;font-size:.66rem}

@media (max-width:760px){
  .c3-exp-item{grid-template-columns:1fr;gap:14px}
  .c3-exp-item .n{font-size:1.15rem}
}

/* =========================================================
   ABOUT PAGE
   ========================================================= */

/* role line sitting directly under the page-head h1 */
.voi-role{
  font-size:.7rem;letter-spacing:.36em;text-transform:uppercase;
  color:var(--gold);font-weight:500;margin:-8px 0 24px;
}

/* ---------- founder photograph ----------
   The source is a wide 2-up portrait of both owners, so it is never cropped
   into a column — it spans the full measure and keeps its cinematic framing
   at every width. Cropping it narrower would cut one of them out of frame. */
.voi-founder{padding:clamp(6px,1.5vh,20px) 0 0}
.voi-founder-figure{
  position:relative;overflow:hidden;border-radius:8px;border:1px solid var(--line);
  box-shadow:0 40px 120px rgba(0,0,0,.55);
}
.voi-founder-figure img{
  width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center 42%;
}
/* the photo is warm and bright; a foot gradient seats it in the noir page
   and gives the caption chip a ground to sit on */
.voi-founder-figure::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(7,6,5,.74) 0%,rgba(7,6,5,.14) 32%,transparent 60%);
}
.voi-founder-cap{
  position:absolute;z-index:2;
  left:clamp(16px,2.6vw,30px);bottom:clamp(14px,2.4vw,26px);
  font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--champ);
  background:rgba(7,6,5,.55);border:1px solid var(--line);border-radius:999px;
  padding:8px 16px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
@media (max-width:620px){
  /* a 16:9 band is a ~175px sliver on a phone — narrow screens get the 4:3
     crop instead (see build_about_assets.py), so the photo keeps real presence */
  .voi-founder-figure img{aspect-ratio:4/3}
  .voi-founder-cap{font-size:.56rem;letter-spacing:.18em;padding:7px 13px}
}

/* ---------- the story ---------- */
.voi-about-story{padding:clamp(56px,9vh,110px) 0 clamp(70px,11vh,130px)}
.voi-about-grid{
  display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);
  gap:clamp(26px,5vw,80px);
}
@media (max-width:900px){.voi-about-grid{grid-template-columns:1fr;gap:24px}}
.voi-about-aside{position:sticky;top:120px;align-self:start}
@media (max-width:900px){.voi-about-aside{position:static}}
.voi-about-aside .label{
  font-size:.68rem;letter-spacing:.44em;text-transform:uppercase;color:var(--gold);
}
.voi-about-aside .rule{
  display:block;width:56px;height:1px;background:var(--gold);margin:18px 0;opacity:.7;
}
.voi-about-aside .who{
  font-family:'Italiana',serif;font-size:1.5rem;line-height:1.3;color:var(--champ);
}
.voi-about-aside .who span{
  display:block;font-family:'Manrope',sans-serif;font-size:.64rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--muted);margin-top:10px;
}
@media (max-width:900px){.voi-about-aside .rule{margin:14px 0}}

.voi-about-body p{
  color:var(--muted);line-height:1.9;max-width:62ch;
  font-size:clamp(1.02rem,1.2vw,1.14rem);text-wrap:pretty;
}
.voi-about-body p + p{margin-top:1.35em}
/* opening beat of the story carries a touch more presence */
.voi-about-body p.opener{color:var(--champ);font-size:clamp(1.15rem,1.6vw,1.35rem);line-height:1.75}

/* three-up of the values named in the story, on the page's own hairline grid */
.voi-rooted{margin-top:clamp(44px,7vh,76px)}
.voi-rooted > .label{
  font-size:.68rem;letter-spacing:.44em;text-transform:uppercase;color:var(--gold);
  margin-bottom:20px;
}
.voi-rooted-list{
  display:grid;grid-template-columns:repeat(3,1fr);list-style:none;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.voi-rooted-list li{
  padding:26px clamp(16px,2vw,30px);border-left:1px solid var(--line);
}
.voi-rooted-list li:first-child{border-left:none;padding-left:0}
.voi-rooted-list .n{font-family:'Italiana',serif;font-size:1.1rem;color:var(--gold)}
.voi-rooted-list .k{
  display:block;margin-top:10px;font-family:'Italiana',serif;
  font-size:clamp(1.2rem,2.1vw,1.6rem);line-height:1.2;color:var(--champ);
}
@media (max-width:760px){
  .voi-rooted-list{grid-template-columns:1fr}
  .voi-rooted-list li{border-left:none;border-top:1px solid var(--line);padding:22px 0}
  .voi-rooted-list li:first-child{border-top:none}
}

/* ---------- legacy ---------- */
.voi-legacy{
  padding:clamp(90px,14vh,160px) 0;background:var(--panel);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.voi-legacy h2{
  font-family:'Italiana',serif;font-weight:400;
  font-size:clamp(2.1rem,4.6vw,3.8rem);line-height:1.1;color:var(--champ);
  max-width:20ch;margin:18px 0 26px;
}
.voi-legacy p{color:var(--muted);line-height:1.85;max-width:58ch;font-size:1.06rem}
.voi-legacy blockquote{
  margin-top:clamp(32px,5vh,48px);padding-left:24px;border-left:2px solid var(--gold);
  font-family:'Italiana',serif;font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.35;
  color:var(--champ);max-width:26ch;
}
.voi-legacy blockquote em{color:var(--gold);font-style:italic}

/* =========================================================
   INQUIRY FORM (page-level, was modal)
   ========================================================= */
.voi-form-page{padding:clamp(20px,4vh,50px) 0 clamp(90px,13vh,150px)}
.voi-form-shell{
  width:min(880px,100%);margin-inline:auto;
  background:linear-gradient(180deg,rgba(16,14,11,.96),rgba(7,6,5,.98));
  border:1px solid var(--line);border-radius:8px;
  padding:clamp(24px,4vw,48px);
  box-shadow:0 40px 120px rgba(0,0,0,.5),0 0 0 1px rgba(200,164,93,.06);
}
.voi-form{text-align:left}

/* section grouping */
.voi-fieldset{border:none;margin:0 0 clamp(26px,4vh,38px)}
.voi-fieldset:last-of-type{margin-bottom:0}
.voi-legend{
  display:flex;align-items:center;gap:14px;width:100%;
  font-size:.64rem;letter-spacing:.36em;text-transform:uppercase;color:var(--gold);
  font-weight:500;margin-bottom:16px;padding:0;
}
.voi-legend::after{content:"";flex:1;height:1px;background:var(--line)}

.voi-form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 18px}
@media (max-width:840px){.voi-form-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:580px){.voi-form-grid{grid-template-columns:1fr}}
.voi-form-group{display:flex;flex-direction:column;gap:6px;min-width:0}
.voi-form-group--full{grid-column:1 / -1}
.voi-form-group--half{grid-column:span 1}
.voi-form-group label{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:500}
.voi-form-group input,
.voi-form-group select,
.voi-form-group textarea{
  width:100%;padding:11px 14px;border:1px solid var(--line);background:rgba(16,14,11,.65);
  color:var(--text);font-family:inherit;font-size:.9rem;border-radius:4px;
  outline:none;transition:border-color .4s, box-shadow .4s, background-color .4s;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.voi-form-group input::placeholder,
.voi-form-group textarea::placeholder{color:rgba(189,175,147,.5)}
.voi-form-group input:focus,
.voi-form-group select:focus,
.voi-form-group textarea:focus{
  border-color:var(--gold);box-shadow:0 0 24px rgba(200,164,93,.22);background:rgba(16,14,11,.85);
}
.voi-form-group input:focus-visible,
.voi-form-group select:focus-visible,
.voi-form-group textarea:focus-visible{outline:none}

/* dark-mode select arrow */
.voi-form-group select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23C8A45D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;
}
/* dark-mode date/time pickers */
.voi-form-group input[type="date"]::-webkit-calendar-picker-indicator,
.voi-form-group input[type="time"]::-webkit-calendar-picker-indicator{
  filter:invert(75%) sepia(35%) saturate(550%) hue-rotate(345deg) brightness(95%) contrast(85%);
  cursor:pointer;
}

.voi-checkbox-grid{
  display:flex;flex-wrap:wrap;gap:10px 22px;background:rgba(16,14,11,.65);
  padding:13px 16px;border:1px solid var(--line);border-radius:4px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.voi-checkbox-grid label{
  display:flex;align-items:center;gap:9px;font-size:.84rem;color:var(--champ);
  cursor:pointer;text-transform:none;font-weight:300;letter-spacing:normal;
  min-height:24px;
}
.voi-checkbox-grid input[type="checkbox"]{accent-color:var(--gold);width:16px;height:16px;cursor:pointer;flex-shrink:0}

/* ---------- OPTIONAL disclosure ---------- */
/* Native <details>. No JS, keyboard accessible, reduced-motion safe.
   HARD RULE: nothing inside may carry `required` — a hidden required control
   makes the browser throw "not focusable" and silently block submission. */
.voi-optional{
  margin:clamp(28px,4vh,40px) 0 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.voi-optional > summary{
  display:flex;align-items:center;gap:12px;
  padding:18px 2px;cursor:pointer;list-style:none;
  font-size:.66rem;letter-spacing:.36em;text-transform:uppercase;
  color:var(--gold);font-weight:500;
  transition:color .35s ease;
}
.voi-optional > summary::-webkit-details-marker{display:none}
.voi-optional > summary:hover{color:var(--champ)}
.voi-optional > summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.voi-optional .chev{
  width:14px;height:14px;flex-shrink:0;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.voi-optional[open] .chev{transform:rotate(180deg)}
.voi-optional .hint{
  margin-left:auto;font-size:.6rem;letter-spacing:.18em;
  color:var(--muted);text-transform:none;font-weight:300;
}
.voi-optional-body{padding:4px 2px 26px}
@media (max-width:620px){
  .voi-optional > summary{letter-spacing:.24em}
  .voi-optional .hint{display:none}
}

.voi-form-submit{margin-top:clamp(28px,4vh,38px);text-align:center}
.voi-form-submit .c3-gold-btn{
  width:100%;max-width:320px;border:none;cursor:pointer;font-weight:600;
  padding:17px 42px;font-size:.8rem;border-radius:999px;
  box-shadow:0 10px 34px rgba(198,164,93,.25);
}
.voi-form-submit .c3-gold-btn:disabled{opacity:.6;cursor:wait;transform:none}
.voi-form-note{
  margin-top:16px;font-size:.72rem;color:var(--muted);
  text-align:center;line-height:1.7;
}
.voi-form-error{
  margin-top:18px;padding:14px 18px;border-radius:4px;
  border:1px solid rgba(214,120,96,.5);background:rgba(60,26,20,.45);
  color:#F0C9BC;font-size:.86rem;line-height:1.6;text-align:center;
}

/* ---------- confirmation ---------- */
.voi-confirmation-message{
  padding:clamp(30px,6vw,60px) 0;text-align:center;max-width:680px;margin-inline:auto;
}
.voi-confirmation-inner .seal{height:84px;width:auto;margin:0 auto 26px;filter:drop-shadow(0 8px 30px rgba(200,164,93,.28))}
.voi-confirmation-inner h2{font-family:'Italiana',serif;font-size:clamp(1.9rem,4vw,2.6rem);color:var(--champ);margin-bottom:18px;font-weight:400}
.voi-confirmation-inner p{color:var(--muted);font-size:1.02rem;line-height:1.8}
.voi-confirmation-inner p + p{margin-top:1em}
.voi-confirmation-inner .c3-ghost{margin-top:32px}

/* =========================================================
   GALLERY PAGE — page furniture only
   The scattered photo field is a separate component. Everything
   that positions, sizes, or animates an individual photo belongs
   to that component, NOT here. This file only provides the stage
   it renders into and the centered brand cluster it sits behind.
   Layers: field (z0) → veil (z1) → centered cluster (z2).
   ========================================================= */
.voi-gallery{position:relative;padding:clamp(16px,3vh,40px) 0 clamp(80px,12vh,140px)}
.voi-gallery-stage{
  position:relative;overflow:clip;
  min-height:min(90vh,940px);
  display:flex;align-items:center;justify-content:center;
  border-radius:8px;
}

/* mount layer — the component renders its photos in here */
.voi-gallery-field{position:absolute;inset:0;z-index:0}

/* keeps the centre legible no matter how bright the photos are */
.voi-gallery-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(46% 42% at 50% 50%,rgba(7,6,5,.86) 0%,rgba(7,6,5,.5) 55%,transparent 100%);
}

.voi-gallery-center{position:relative;z-index:2;text-align:center;padding:24px;max-width:34ch}
.voi-gallery-center .seal{
  height:clamp(88px,11vw,132px);width:auto;margin:0 auto 24px;
  filter:drop-shadow(0 8px 34px rgba(200,164,93,.32));
}
.voi-gallery-center .wordmark{
  font-family:'Italiana',serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(2.3rem,6.4vw,4.4rem);line-height:.98;letter-spacing:.04em;
  color:var(--champ);text-shadow:0 2px 50px rgba(0,0,0,.7);
}
.voi-gallery-center .sub{
  margin-top:14px;font-size:.66rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--gold);
}

/* Placeholder shown until real photography lands. The component
   replaces this — delete it when the field is populated. */
.voi-gallery-empty{
  position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--line);border-radius:8px;background:rgba(16,14,11,.35);
}
.voi-gallery-empty p{
  align-self:flex-end;margin-bottom:26px;
  font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);opacity:.55;
}

/* caption strip under the stage */
.voi-gallery-note{
  margin-top:26px;display:flex;flex-wrap:wrap;gap:10px 26px;
  align-items:center;justify-content:center;
  font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);
}
.voi-gallery-note span::before{content:"·";margin-right:26px;color:var(--gold)}
.voi-gallery-note span:first-child::before{content:none;margin:0}

@media (max-width:620px){
  .voi-gallery-stage{min-height:min(78vh,680px)}
  .voi-gallery-note{letter-spacing:.18em}
}

/* ================= FOOTER ================= */
.c3-footer{border-top:1px solid var(--line);padding:46px 0 38px}
.c3-footer-in{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px 40px;
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
}
.c3-footer-col-left{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
}
.c3-footer-brand{color:var(--text);font-weight:400}
.c3-footer-tag{color:var(--muted);font-size:.66rem;letter-spacing:.18em}
.c3-footer-email{
  text-transform:lowercase;letter-spacing:.06em;font-size:.74rem;color:var(--muted);
  transition:color .3s;margin-top:2px;
}
.c3-footer-email:hover{color:var(--gold)}

.c3-footer-col-center{
  display:flex;align-items:center;justify-content:center;
}
.c3-footer-ig{
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--muted);transition:color .3s,transform .3s;padding:6px;
}
.c3-footer-ig svg{width:22px;height:22px;display:block}
.c3-footer-ig:hover{color:var(--gold);transform:scale(1.12)}

.c3-footer-col-right{
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;text-align:right;
}
.c3-footer a{text-decoration:none;transition:color .3s}
.c3-footer a:hover{color:var(--gold)}
.c3-footer-nav a{display:inline-block;padding:2px 0}
.c3-footer-nav a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

@media (max-width:860px){
  .c3-footer-in{grid-template-columns:1fr auto;gap:28px 24px}
  .c3-footer-col-center{grid-column:span 2;order:3;justify-content:flex-start}
}
@media (max-width:580px){
  .c3-footer{padding:36px 0 28px}
  .c3-footer-in{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
  .c3-footer-col-right{align-items:flex-start;text-align:left}
  .c3-footer-col-center{order:0;justify-content:flex-start}
}

/* ================= CUSTOM CURSOR ================= */
.voi-cursor{position:fixed;inset:0;z-index:1200;pointer-events:none;display:none}
body[data-concept="3"].cursor-on .voi-cursor{display:block}
.voi-dot,.voi-ring{position:absolute;top:0;left:0;border-radius:50%;will-change:transform}
.voi-dot{width:7px;height:7px;background:var(--gold,#C8A45D);margin:-3.5px 0 0 -3.5px}
.voi-ring{
  width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid rgba(200,164,93,.75);
  transition:width .3s ease,height .3s ease,margin .3s ease,background .3s ease;
}
.voi-cursor.is-hover .voi-ring{width:62px;height:62px;margin:-31px 0 0 -31px;background:rgba(200,164,93,.12)}

/* ================= BRAND MARK ================= */
.c3-nav .mark img{height:58px;width:auto;filter:drop-shadow(0 2px 14px rgba(0,0,0,.5))}
.c3-seal{height:clamp(96px,12vw,140px);width:auto;margin:0 auto 24px;filter:drop-shadow(0 8px 34px rgba(200,164,93,.3))}
@media (max-width:900px){.c3-nav .mark img{height:48px}}
@media (max-width:620px){
  .c3-nav .mark img{height:40px}
  .c3-nav .mark .word{display:none}
}