/* ===================================================================
   camerababe — shared design system
   =================================================================== */
:root{
  --ink:#150E0D;
  --ink-soft:#241A18;
  --wine:#631D2C;
  --wine-deep:#3A0F19;
  --gold:#A9803F;
  --gold-light:#D8BD8E;
  --paper:#F6EFE3;
  --paper-dim:#EDE2D0;
  --text-on-ink:#F3EAE0;
  --text-muted:#C9B9AC;
  --rose:#A9616C;
  --line: rgba(243,234,224,0.16);
  --line-dark: rgba(21,14,13,0.14);
  --theme-transition: background .35s ease, color .35s ease, border-color .35s ease;
}

/* Light mode — same brand identity (wine + gold), softened contrast bands and brighter paper */
:root[data-theme="light"]{
  --ink:#4A342C;
  --ink-soft:#5C443A;
  --wine-deep:#6B2436;
  --paper:#FCF9F3;
  --paper-dim:#F3ECDF;
  --line: rgba(243,234,224,0.22);
  --line-dark: rgba(74,52,44,0.14);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
html.nav-open, html.nav-open body{ overflow:hidden; height:100%; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Archivo', sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:var(--theme-transition);
}
body, body *{ transition:var(--theme-transition); }
img{display:block; max-width:100%; height:auto;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4{
  font-family:'Fraunces', serif;
  font-weight:500;
  letter-spacing:-0.01em;
  line-height:1.05;
}
.wrap{ max-width:1280px; margin:0 auto; padding:0 6vw; }
@media(max-width:640px){ .wrap{ padding:0 6.5vw; } }

::selection{ background:var(--wine); color:var(--text-on-ink); }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

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

/* ---------- NAV ---------- */
header.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem 6vw;
  transition:background .4s ease, padding .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
header.site-nav.scrolled{
  background:rgba(21,14,13,0.92);
  backdrop-filter:blur(10px);
  padding:1rem 6vw;
  border-bottom:1px solid var(--line);
}
.brand-mark{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-weight:500;
  font-size:1.35rem;
  color:var(--text-on-ink);
  letter-spacing:-0.01em;
  display:flex;
  align-items:center;
  gap:0.55rem;
}
.brand-mark img{ height:30px; width:auto; display:block; }
.footer-brand{ display:flex; align-items:center; gap:0.7rem; }
.footer-brand img{ height:38px; width:auto; display:block; }
nav.links{ display:flex; gap:2rem; align-items:center; }
nav.links a{
  font-size:0.86rem;
  color:var(--text-on-ink);
  opacity:0.82;
  position:relative;
  padding-bottom:2px;
}
nav.links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--gold-light); transition:width .3s ease;
}
nav.links a:hover{ opacity:1; }
nav.links a:hover::after{ width:100%; }
nav.links a.active{ opacity:1; }
nav.links a.active::after{ width:100%; }
nav.links a.cta{
  border:1px solid var(--gold-light);
  padding:0.55rem 1.1rem;
  border-radius:2px;
  opacity:1;
}
nav.links a.cta::after{ display:none; }
nav.links a.cta:hover{ background:var(--gold-light); color:var(--ink); }

.menu-btn{ display:none; background:none; border:0; cursor:pointer; z-index:250; position:relative; }
.menu-btn span{ display:block; width:24px; height:2px; background:var(--text-on-ink); margin:5px 0; transition:transform .3s ease, opacity .3s ease; }

.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line);
  background:transparent; color:var(--text-on-ink);
  cursor:pointer; flex-shrink:0; position:relative; z-index:230;
  margin-left:0.6rem;
}
.theme-toggle:hover{ border-color:var(--gold-light); }
.theme-toggle svg{ width:16px; height:16px; position:absolute; transition:opacity .25s ease, transform .35s ease; }
.theme-toggle .icon-sun{ opacity:0; transform:rotate(-40deg) scale(0.7); }
.theme-toggle .icon-moon{ opacity:1; transform:rotate(0) scale(1); }
:root[data-theme="light"] .theme-toggle .icon-sun{ opacity:1; transform:rotate(0) scale(1); }
:root[data-theme="light"] .theme-toggle .icon-moon{ opacity:0; transform:rotate(40deg) scale(0.7); }

@media(max-width:900px){
  nav.links{
    position:fixed; inset:0; background:var(--ink);
    flex-direction:column; justify-content:center; align-items:center;
    gap:2.2rem; z-index:220;
    transform:translateX(100%);
    transition:transform .45s ease, visibility 0s linear .45s;
    pointer-events:none; visibility:hidden;
  }
  nav.links.open{
    transform:translateX(0); pointer-events:auto; visibility:visible;
    transition:transform .45s ease, visibility 0s linear 0s;
  }
  nav.links a{ font-size:1.3rem; }
  .menu-btn{ display:block; }
  .menu-btn.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .menu-btn.open span:nth-child(2){ opacity:0; }
  .menu-btn.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}

/* ---------- HERO (home, full) ---------- */
.hero{
  position:relative; height:100svh; min-height:560px;
  display:flex; align-items:flex-end;
  overflow:hidden;
  background:var(--ink);
}
.hero-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:50% 22%;
  opacity:0;
  transform:scale(1.08);
  animation:heroIn 1.6s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes heroIn{ to{ opacity:1; transform:scale(1); } }
.hero::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(21,14,13,0.18) 0%, rgba(21,14,13,0.15) 38%, rgba(21,14,13,0.86) 92%);
}
.hero-content{
  position:relative; z-index:2;
  padding:0 6vw 5.5rem;
  width:100%;
  opacity:0;
  animation:riseIn 1.1s cubic-bezier(.2,.7,.2,1) 0.5s forwards;
}
@keyframes riseIn{ from{ opacity:0; transform:translateY(22px);} to{ opacity:1; transform:translateY(0);} }
.hero-eyebrow{
  color:var(--gold-light); font-size:0.82rem; letter-spacing:0.02em;
  margin-bottom:1rem; max-width:420px;
}
.hero h1{
  color:var(--text-on-ink);
  font-size:clamp(2.6rem, 7vw, 5.4rem);
  max-width:14ch;
}
.hero h1 em{ font-style:italic; color:var(--gold-light); }
.hero-sub{
  color:var(--text-muted); font-size:1rem; max-width:36ch; margin-top:1.3rem;
  line-height:1.55;
}
.hero-actions{ display:flex; gap:1rem; margin-top:2.2rem; flex-wrap:wrap; }
.btn{
  display:inline-block; padding:0.9rem 1.6rem; font-size:0.85rem;
  border:1px solid var(--gold-light); color:var(--text-on-ink);
  border-radius:2px; transition:background .3s ease, color .3s ease, border-color .3s ease;
  cursor:pointer; background:none; font-family:'Archivo',sans-serif;
}
.btn:hover{ background:var(--gold-light); color:var(--ink); }
.btn.solid{ background:var(--gold-light); color:var(--ink); }
.btn.solid:hover{ background:transparent; color:var(--text-on-ink); }
.btn.on-paper{ border-color:var(--wine); color:var(--wine); }
.btn.on-paper:hover{ background:var(--wine); color:var(--text-on-ink); }

.scroll-cue{
  position:absolute; right:6vw; bottom:2.2rem; z-index:2;
  color:var(--text-muted); font-size:0.72rem;
  display:flex; align-items:center; gap:0.6rem;
  opacity:0; animation:riseIn 1s ease 1.1s forwards;
}
.scroll-cue .line{ width:34px; height:1px; background:var(--text-muted); }

/* ---------- PAGE HERO (sub-pages: About / Portfolio / Services / Booking) ---------- */
.page-hero{
  position:relative; min-height:48vh; height:auto;
  display:flex; align-items:flex-end;
  overflow:hidden; background:var(--ink);
  padding-top:7rem;
}
.page-hero-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0.55;
}
.page-hero::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(21,14,13,0.55) 0%, rgba(21,14,13,0.75) 60%, var(--ink) 100%);
}
.page-hero-content{ position:relative; z-index:2; padding-block:3.5rem 4rem; width:100%; }
.page-hero-eyebrow{ color:var(--gold-light); font-size:0.82rem; letter-spacing:0.02em; margin-bottom:0.9rem; }
.page-hero h1{ color:var(--text-on-ink); font-size:clamp(2.2rem, 5.5vw, 3.6rem); max-width:18ch; }
.page-hero-sub{ color:var(--text-muted); font-size:1.02rem; max-width:52ch; margin-top:1.1rem; line-height:1.6; }

/* ---------- SECTION LABELS ---------- */
.section-head{
  display:flex; align-items:baseline; gap:1.2rem;
  margin-bottom:3rem;
}
.section-num{ font-family:'Fraunces',serif; font-style:italic; color:var(--wine); font-size:1rem; }
.section-head h2{ font-size:clamp(1.9rem, 4vw, 2.9rem); }
.section-head.on-ink h2{ color:var(--text-on-ink); }
.section-head.on-ink .section-num{ color:var(--gold-light); }

/* ---------- ABOUT ---------- */
.about{ padding:6.5rem 0 7rem; background:var(--paper); }
.about-grid{
  display:grid; grid-template-columns: 1.05fr 0.95fr; gap:5vw; align-items:center;
}
.about-copy p{ font-size:1.06rem; line-height:1.75; color:var(--ink-soft); margin-bottom:1.2rem; max-width:52ch; }
.about-copy p:first-of-type{ font-family:'Fraunces', serif; font-size:1.4rem; line-height:1.5; color:var(--ink); font-weight:400; }
.about-figure{ position:relative; }
.about-figure img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.about-tag{
  position:absolute; left:-1.4rem; bottom:-1.4rem;
  background:var(--wine); color:var(--text-on-ink);
  padding:1.1rem 1.4rem; max-width:220px;
  font-family:'Fraunces', serif; font-style:italic; font-size:1.02rem; line-height:1.4;
}
@media(max-width:840px){
  .about-grid{ grid-template-columns:1fr; }
  .about-figure{ order:-1; max-width:420px; margin:0 auto 1rem; }
  .about-tag{ left:1rem; bottom:-1.2rem; }
}

.about-values{ background:var(--paper-dim); padding:6rem 0; }
.values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.4rem; }
.value-card{ padding:0; }
.value-card .v-num{ font-family:'Fraunces',serif; font-style:italic; color:var(--wine); font-size:1.1rem; display:block; margin-bottom:0.8rem; }
.value-card h3{ font-size:1.3rem; margin-bottom:0.7rem; }
.value-card p{ color:var(--ink-soft); font-size:0.96rem; line-height:1.65; }
@media(max-width:780px){ .values-grid{ grid-template-columns:1fr; gap:2.2rem; } }

/* ---------- HOME: FEATURED ---------- */
.featured{ background:var(--paper); padding:7rem 0; }
.featured-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.3rem; }
.featured-item{ position:relative; overflow:hidden; aspect-ratio:4/5; background:var(--ink-soft); }
.featured-item img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.featured-item:hover img{ transform:scale(1.06); }
.featured-item .f-label{
  position:absolute; left:0; right:0; bottom:0; padding:1.1rem 1rem;
  background:linear-gradient(0deg, rgba(21,14,13,0.85), transparent);
  color:var(--text-on-ink); font-family:'Fraunces',serif; font-style:italic; font-size:0.98rem;
}
.featured-cta{ text-align:center; margin-top:3rem; }
@media(max-width:900px){ .featured-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- HOME: INTRO STRIP ---------- */
.home-intro{ background:var(--ink); color:var(--text-on-ink); padding:6.5rem 0; }
.home-intro-grid{ display:grid; grid-template-columns:1fr 1fr; gap:5vw; align-items:center; }
.home-intro p{ color:var(--text-muted); font-size:1.08rem; line-height:1.75; max-width:48ch; }
.home-intro .lede{ font-family:'Fraunces',serif; font-size:1.6rem; color:var(--text-on-ink); line-height:1.4; font-weight:400; margin-bottom:1.2rem; }
@media(max-width:840px){ .home-intro-grid{ grid-template-columns:1fr; } }

/* ---------- HOME: SERVICES TEASER ---------- */
.teaser-strip{ background:var(--paper-dim); padding:6rem 0; }
.teaser-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.teaser-card{ background:var(--paper); border:1px solid var(--line-dark); padding:2.2rem; }
.teaser-card h3{ font-size:1.25rem; margin-bottom:0.7rem; }
.teaser-card p{ color:var(--ink-soft); font-size:0.94rem; line-height:1.6; }
@media(max-width:780px){ .teaser-grid{ grid-template-columns:1fr; } }

/* ---------- CTA BAND ---------- */
.cta-band{ background:var(--wine-deep); color:var(--text-on-ink); padding:5.5rem 0; text-align:center; }
.cta-band h2{ font-size:clamp(1.8rem,4vw,2.6rem); color:var(--text-on-ink); margin-bottom:1.2rem; }
.cta-band p{ color:var(--text-muted); max-width:50ch; margin:0 auto 2rem; font-size:1.02rem; line-height:1.6; }

/* ---------- PORTFOLIO: CATEGORY TILES ---------- */
.portfolio-intro{ background:var(--paper); padding:6rem 0 5rem; }
.portfolio-intro p{ color:var(--ink-soft); font-size:1.04rem; line-height:1.7; max-width:60ch; }
.cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:3rem; }
.cat-tile{
  position:relative; overflow:hidden; aspect-ratio:3/4; display:block;
  background:var(--ink-soft);
}
.cat-tile img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.cat-tile:hover img{ transform:scale(1.07); }
.cat-tile::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(21,14,13,0.05) 30%, rgba(21,14,13,0.88) 100%);
}
.cat-tile-label{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1.4rem 1.2rem;
}
.cat-tile-label .cat-count{ color:var(--gold-light); font-size:0.74rem; letter-spacing:0.04em; text-transform:uppercase; display:block; margin-bottom:0.35rem; }
.cat-tile-label h3{ color:var(--text-on-ink); font-size:1.25rem; }
.cat-tile.soon .cat-tile-label .cat-count{ color:var(--rose); }
@media(max-width:900px){ .cat-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .cat-grid{ grid-template-columns:1fr; } }

/* ---------- FILMS ---------- */
.film-grid-section{ background:var(--paper); padding:2rem 0 6rem; }
.film-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.6rem; justify-items:center; }
.film-grid blockquote.tiktok-embed{ margin:0; }
.film-card{ width:100%; max-width:320px; }
.film-card video{ width:100%; aspect-ratio:9/16; object-fit:cover; display:block; background:#000; border-radius:2px; }
.film-card-caption{ margin-top:0.7rem; color:var(--ink-soft); font-size:0.9rem; line-height:1.5; }

/* ---------- PORTFOLIO: CATEGORY VIEWER PAGES ---------- */
.viewer{ background:var(--ink); color:var(--text-on-ink); padding:6.5rem 0 3rem; min-height:100svh; display:flex; flex-direction:column; }
.viewer-top{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:2.4rem; }
.viewer-eyebrow{ color:var(--gold-light); font-size:0.8rem; letter-spacing:0.04em; text-transform:uppercase; }
.viewer-top h1{ font-size:clamp(1.8rem,4vw,2.6rem); color:var(--text-on-ink); margin-top:0.4rem; }
.viewer-back{ font-size:0.84rem; color:var(--text-muted); border-bottom:1px solid var(--line); padding-bottom:2px; }
.viewer-back:hover{ color:var(--text-on-ink); border-color:var(--gold-light); }

.viewer-stage{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2.2rem; padding-block:1rem 2rem;
}
.viewer-frame{
  width:100%; max-width:900px; max-height:62svh;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink-soft); overflow:hidden;
}
.viewer-frame img{
  width:auto; height:auto; max-width:100%; max-height:62svh;
  object-fit:contain; display:block;
  opacity:0; animation:viewerFade .5s ease forwards;
}
@keyframes viewerFade{ to{ opacity:1; } }
@media(prefers-reduced-motion: reduce){ .viewer-frame img{ animation:none; opacity:1; } }

.viewer-copy{ max-width:60ch; text-align:center; }
.viewer-num{ color:var(--gold-light); font-size:0.82rem; letter-spacing:0.03em; display:block; margin-bottom:0.6rem; }
.viewer-title{ font-size:clamp(1.4rem,2.6vw,1.9rem); color:var(--text-on-ink); margin-bottom:0.9rem; }
.viewer-text{ color:var(--text-muted); font-size:1.02rem; line-height:1.7; }

.viewer-controls{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1.2rem;
  margin-top:2.6rem; padding-top:1.6rem; border-top:1px solid var(--line);
}
.viewer-nav-btn{
  display:inline-flex; align-items:center; gap:0.5rem; font-size:0.86rem;
  color:var(--text-on-ink); opacity:0.85; white-space:nowrap;
}
.viewer-nav-btn:hover{ opacity:1; }
.viewer-nav-btn.next{ justify-self:end; text-align:right; }
.viewer-nav-btn.prev{ justify-self:start; }
.viewer-nav-btn .arrow{ font-family:'Fraunces',serif; font-size:1.1rem; }
.viewer-counter{
  font-family:'Fraunces',serif; font-variant-numeric:tabular-nums;
  font-size:0.95rem; color:var(--text-muted); white-space:nowrap;
}
@media(max-width:640px){
  .viewer-controls{ grid-template-columns:1fr; gap:1rem; text-align:center; }
  .viewer-nav-btn.next{ justify-self:center; text-align:center; }
  .viewer-nav-btn.prev{ justify-self:center; }
}

/* ---------- PORTFOLIO: CATEGORY SECTIONS ---------- */
.cat-section{ background:var(--ink); color:var(--text-on-ink); padding:6rem 0; scroll-margin-top:6rem; }
.cat-section:nth-child(even){ background:#1A1211; }
.cat-section .section-head p{ color:var(--text-muted); max-width:46ch; font-size:1.02rem; line-height:1.6; margin-top:0.6rem; }
.story{
  display:grid; grid-template-columns: 1fr 1fr; gap:5vw;
  align-items:center;
  padding:3.4rem 0;
  border-top:1px solid var(--line);
}
.story:last-child{ border-bottom:1px solid var(--line); }
.story:nth-child(even) .story-figure{ order:2; }
.story-figure{ position:relative; overflow:hidden; background:var(--ink-soft); }
.story-figure img{
  width:100%; height:auto; display:block;
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.story-figure:hover img{ transform:scale(1.045); }
.story-num{ font-family:'Fraunces', serif; font-style:italic; color:var(--gold-light); font-size:1rem; margin-bottom:0.9rem; display:block; }
.story-title{ font-size:clamp(1.5rem,3vw,2.1rem); margin-bottom:1rem; }
.story-text{ color:var(--text-muted); font-size:1.02rem; line-height:1.7; max-width:46ch; }
@media(max-width:780px){
  .story{ grid-template-columns:1fr; gap:1.6rem; padding:2.6rem 0; }
  .story:nth-child(even) .story-figure{ order:0; }
}

/* ---------- TESTIMONIALS / REVIEWS ---------- */
.testimonials{ background:var(--paper-dim); padding:7rem 0; }
.t-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.4rem; }
.t-card{ background:var(--paper); border:1px solid var(--line-dark); padding:2.2rem 1.8rem; display:flex; flex-direction:column; gap:1.4rem; }
.t-stars{ color:var(--gold); font-size:0.95rem; letter-spacing:0.15em; }
.t-quote{ font-family:'Fraunces', serif; font-size:1.12rem; line-height:1.55; color:var(--ink-soft); flex:1; }
.t-name{ font-size:0.85rem; color:var(--wine); font-weight:600; }
@media(max-width:900px){ .t-grid{ grid-template-columns:1fr; } }
.t-grid:has(> .t-card:only-child){ grid-template-columns:minmax(0,480px); justify-content:center; }

.review-intro{ color:var(--ink-soft); font-size:1.02rem; line-height:1.6; max-width:56ch; margin-top:-1.6rem; margin-bottom:2.4rem; }
.t-empty{ grid-column:1/-1; text-align:center; padding:3.2rem 2rem; border:1px dashed var(--line-dark); }
.t-empty .t-stars{ display:block; margin-bottom:0.9rem; opacity:0.3; }
.t-empty p{ color:var(--ink-soft); font-size:1.02rem; }

.review-form-wrap{ margin-top:3.5rem; padding-top:2.6rem; border-top:1px solid var(--line-dark); max-width:640px; }
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.review-form-wrap h3{ font-size:1.5rem; margin-bottom:1.5rem; }
.review-form{ display:flex; flex-direction:column; gap:1.5rem; }
.review-form .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.review-form .field{ display:flex; flex-direction:column; gap:0.5rem; }
.review-form .field label{ font-size:0.78rem; letter-spacing:0.01em; color:var(--ink-soft); }
.review-form .field input, .review-form .field select, .review-form .field textarea{
  background:transparent; border:none; border-bottom:1px solid var(--line-dark);
  color:var(--ink); font-family:'Archivo',sans-serif; font-size:1rem;
  padding:0.6rem 0.1rem; transition:border-color .3s ease;
}
.review-form .field input::placeholder, .review-form .field textarea::placeholder{ color:rgba(21,14,13,0.35); }
.review-form .field input:focus, .review-form .field select:focus, .review-form .field textarea:focus{ border-color:var(--wine); }
.review-form .field textarea{ resize:vertical; min-height:80px; }
.form-note-light{ font-size:0.82rem; color:var(--ink-soft); opacity:0.75; margin-top:-0.4rem; }
.confirm-msg.on-paper{ color:var(--wine); border-color:var(--wine); }
@media(max-width:640px){ .review-form .field-row{ grid-template-columns:1fr; } }

/* ---------- SERVICES / PRICING ---------- */
.services{ background:var(--paper); padding:6rem 0 4rem; }
.service-list{ border-top:1px solid var(--line-dark); margin-bottom:4.5rem; }
.service{
  display:grid; grid-template-columns: 0.5fr 1.6fr 1.4fr; gap:2rem;
  padding:2.6rem 0; border-bottom:1px solid var(--line-dark);
  align-items:baseline;
}
.service-num{ font-family:'Fraunces',serif; font-style:italic; color:var(--wine); }
.service h3{ font-size:clamp(1.4rem,2.6vw,1.9rem); }
.service p{ color:var(--ink-soft); line-height:1.65; font-size:0.98rem; max-width:44ch; }
@media(max-width:780px){ .service{ grid-template-columns:1fr; gap:0.5rem; } }

.pricing{ padding-top:1rem; }
.rate-intro{ color:var(--ink-soft); font-size:1rem; line-height:1.65; max-width:62ch; margin-bottom:3rem; }

.rate-compare{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; margin-bottom:2.6rem; }
.rate-panel{ background:var(--ink); color:var(--text-on-ink); padding:2.2rem 2rem; }
.rate-panel.alt{ background:var(--wine); }
.rate-panel h4{ font-family:'Fraunces',serif; font-style:italic; font-weight:500; font-size:1.25rem; color:var(--gold-light); }
.rate-panel .rate-sub{ font-size:0.78rem; color:var(--text-muted); margin-top:0.2rem; margin-bottom:1.3rem; letter-spacing:0.02em; }
.rate-row{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:0.85rem 0; border-bottom:1px solid var(--line); }
.rate-row:last-child{ border-bottom:none; }
.rate-name{ font-size:0.98rem; }
.rate-name small{ display:block; color:var(--text-muted); font-size:0.76rem; margin-top:0.2rem; }
.rate-price{ font-family:'Fraunces',serif; font-style:italic; color:var(--gold-light); font-size:1.05rem; white-space:nowrap; }

.rate-simple-group{ margin-bottom:2.4rem; }
.rate-label{ font-family:'Archivo',sans-serif; font-weight:600; font-size:0.78rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--wine); margin-bottom:0.9rem; }
.rate-simple-row{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:0.85rem 0; border-bottom:1px solid var(--line-dark); }
.rate-simple-row span:first-child{ font-size:1rem; color:var(--ink); }
.rate-simple-row small{ display:block; color:var(--ink-soft); opacity:0.7; font-size:0.78rem; margin-top:0.2rem; }
.rate-simple-row .amt{ font-family:'Fraunces',serif; font-style:italic; color:var(--wine); font-size:1.02rem; white-space:nowrap; }

.rate-notes{ background:var(--paper-dim); padding:2rem 2.2rem; margin-top:0.6rem; }
.rate-notes h4{ font-family:'Archivo',sans-serif; font-weight:600; font-size:0.78rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--wine); margin-bottom:1.1rem; }

.family-block{ background:var(--ink); padding:2.6rem; margin-bottom:2.6rem; }
.family-heading{ display:flex; align-items:baseline; gap:0.7rem; margin-bottom:0.3rem; }
.family-heading h4{ font-family:'Fraunces',serif; font-style:italic; font-weight:500; color:var(--gold-light); font-size:1.4rem; }
.family-sub{ color:var(--text-muted); font-size:0.85rem; margin-bottom:1.6rem; }
.family-table-wrap{ overflow-x:auto; margin-bottom:0.8rem; }
.family-table{ width:100%; border-collapse:collapse; min-width:480px; }
.family-table th{
  text-align:left; font-family:'Archivo',sans-serif; font-weight:600; font-size:0.74rem;
  letter-spacing:0.05em; text-transform:uppercase; color:var(--gold-light);
  padding:0 0 0.9rem; border-bottom:1px solid var(--line);
}
.family-table td{ padding:1rem 0; border-bottom:1px solid var(--line); color:var(--text-on-ink); font-size:0.96rem; vertical-align:top; }
.family-table tr:last-child td{ border-bottom:none; }
.family-table td:nth-child(2){ font-family:'Fraunces',serif; font-style:italic; color:var(--gold-light); white-space:nowrap; }
.family-table td:nth-child(3){ color:var(--text-muted); font-size:0.9rem; }
.family-extra{ color:var(--text-muted); font-size:0.86rem; margin-top:0.2rem; }
.family-divider{ height:1px; background:var(--line); margin:1.8rem 0; }
.family-iphone-row{ display:flex; justify-content:space-between; align-items:baseline; padding:0.7rem 0; border-bottom:1px solid var(--line); }
.family-iphone-row:last-child{ border-bottom:none; }
.family-iphone-row span:first-child{ color:var(--text-on-ink); font-size:0.96rem; }
.family-iphone-row span:last-child{ font-family:'Fraunces',serif; font-style:italic; color:var(--gold-light); }
@media(max-width:600px){ .family-block{ padding:1.8rem 1.4rem; } }
.notes-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0.7rem 2rem; }
.notes-grid span{ font-size:0.92rem; color:var(--ink-soft); padding-left:1rem; position:relative; line-height:1.5; }
.notes-grid span::before{ content:'—'; position:absolute; left:0; color:var(--gold); }

@media(max-width:780px){
  .rate-compare{ grid-template-columns:1fr; }
  .notes-grid{ grid-template-columns:1fr; }
}

.note-line{
  margin-top:2.4rem; color:var(--ink-soft); font-size:0.92rem; max-width:60ch; line-height:1.6;
  border-left:2px solid var(--gold); padding-left:1rem;
}

/* ---------- FAQ ---------- */
.faq{ background:var(--paper); padding:3rem 0 7rem; }
.faq-list{ border-top:1px solid var(--line-dark); max-width:820px; }
.faq-item{ border-bottom:1px solid var(--line-dark); }
.faq-item summary{
  cursor:pointer; list-style:none; padding:1.6rem 0; display:flex; justify-content:space-between; align-items:center;
  font-family:'Fraunces',serif; font-size:1.15rem; gap:1rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:'+'; font-size:1.4rem; color:var(--wine); flex-shrink:0; transition:transform .3s ease; }
.faq-item[open] summary::after{ content:'–'; }
.faq-item p{ padding-bottom:1.6rem; color:var(--ink-soft); line-height:1.7; max-width:60ch; font-size:0.98rem; }

/* ---------- BOOKING ---------- */
.booking{ background:var(--wine-deep); color:var(--text-on-ink); padding:6.5rem 0; position:relative; }
.booking-grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap:5vw; }
.booking-intro .section-num{ color:var(--gold-light); }
.booking-intro h2{ color:var(--text-on-ink); font-size:clamp(2rem,4vw,2.8rem); margin-bottom:1.4rem; }
.booking-intro p{ color:var(--text-muted); line-height:1.7; font-size:1.02rem; max-width:40ch; margin-bottom:1.6rem; }
.booking-quote{
  font-family:'Fraunces', serif; font-style:italic; font-size:1.3rem;
  color:var(--gold-light); border-left:2px solid var(--gold); padding-left:1.1rem;
  margin-top:2rem; max-width:32ch; line-height:1.4;
}

form.book-form{ display:flex; flex-direction:column; gap:1.5rem; }
.payment-box{ margin-top:2rem; border:1px solid var(--gold); padding:1.5rem 1.7rem; }
.payment-box h4{ font-family:'Archivo',sans-serif; font-weight:600; font-size:0.76rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--gold-light); margin-bottom:0.9rem; }
.payment-box p{ color:var(--text-muted); font-size:0.88rem; line-height:1.65; margin:0 0 0.9rem; }
.payment-box .bank-details{ font-family:'Archivo',sans-serif; font-size:0.92rem; color:var(--text-on-ink); line-height:1.9; }
.payment-box .bank-details strong{ color:var(--gold-light); font-weight:600; }

/* Pay deposit widget (Paystack) */
.pay-deposit-form{ display:none; margin-top:1rem; padding-top:1.1rem; border-top:1px solid var(--line); }
.pay-deposit-form.open{ display:block; }
.pay-deposit-note{ font-size:0.85rem; color:var(--text-muted); margin-bottom:1rem; }
.pay-deposit-form .field{ margin-bottom:0.9rem; }
.pay-deposit-form label{ display:block; font-size:0.76rem; letter-spacing:0.03em; text-transform:uppercase; color:var(--gold-light); margin-bottom:0.4rem; }
.pay-deposit-form input, .pay-deposit-form select{
  width:100%; background:var(--ink); border:1px solid var(--line); color:var(--text-on-ink);
  padding:0.7rem 0.9rem; font-family:'Archivo',sans-serif; font-size:0.94rem;
}
.pay-deposit-form select option{ color:var(--ink); }
.pay-deposit-form select optgroup{ color:var(--ink); font-style:normal; font-weight:600; }
.pay-deposit-form input:focus, .pay-deposit-form select:focus{ outline:none; border-color:var(--gold-light); }
.pay-deposit-form .confirm-msg{ margin-top:0.9rem; }

.deposit-summary{
  background:var(--ink); border:1px solid var(--line); padding:0.9rem 1rem 1rem;
  margin-bottom:0.9rem;
}
.deposit-line{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  font-family:'Archivo',sans-serif; font-size:0.98rem; color:var(--text-on-ink);
  padding:0.35rem 0;
}
.deposit-line.full span:last-child{ color:var(--text-muted); }
.deposit-line.highlight{
  border-top:1px solid var(--line); margin-top:0.2rem; padding-top:0.6rem;
}
.deposit-line.highlight span:first-child{ color:var(--gold-light); text-transform:uppercase; font-size:0.78rem; letter-spacing:0.03em; align-self:center; }
.deposit-line.highlight span:last-child{ font-family:'Fraunces',serif; font-size:1.3rem; color:var(--gold-light); }
.deposit-note{ font-size:0.78rem; color:var(--text-muted); margin-top:0.5rem; }

.bank-toggle{ margin-top:1.4rem; padding-top:1.1rem; border-top:1px solid var(--line); }
.bank-toggle summary{
  cursor:pointer; list-style:none; font-size:0.9rem; color:var(--text-muted);
  display:flex; align-items:center; justify-content:space-between; gap:0.6rem;
}
.bank-toggle summary::-webkit-details-marker{ display:none; }
.bank-toggle summary::after{ content:'+'; font-size:1.2rem; color:var(--gold-light); flex-shrink:0; }
.bank-toggle[open] summary::after{ content:'–'; }
.bank-toggle summary:hover{ color:var(--text-on-ink); }
.bank-toggle .bank-details{ margin-top:1rem; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.field{ display:flex; flex-direction:column; gap:0.5rem; }
.field label{ font-size:0.78rem; letter-spacing:0.01em; color:var(--text-muted); }
.field input, .field select, .field textarea{
  background:transparent; border:none; border-bottom:1px solid var(--line);
  color:var(--text-on-ink); font-family:'Archivo',sans-serif; font-size:1rem;
  padding:0.6rem 0.1rem; transition:border-color .3s ease;
}
.field select option{ color:var(--ink); }
.field input::placeholder, .field textarea::placeholder{ color:rgba(243,234,224,0.35); }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--gold-light); }
.field textarea{ resize:vertical; min-height:90px; }
.book-form .btn{ align-self:flex-start; margin-top:0.6rem; }
@media(max-width:840px){
  .booking-grid{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
}
.form-note{ font-size:0.82rem; color:var(--text-muted); margin-top:-0.3rem; }
.confirm-msg{
  display:none; margin-top:0.8rem; font-size:0.95rem; color:var(--gold-light);
  border:1px solid var(--gold); padding:0.9rem 1.1rem;
}
.confirm-msg.show{ display:block; }

/* ---------- BOOKING CALENDAR ---------- */
.date-picker{
  border:1px solid var(--line); padding:1.1rem 1.1rem 1.3rem;
}
.date-picker-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:0.9rem; font-family:'Fraunces',serif; font-style:italic;
  color:var(--gold-light); font-size:1rem;
}
.cal-nav{
  background:none; border:1px solid var(--line); color:var(--text-on-ink);
  width:30px; height:30px; line-height:1; cursor:pointer; font-size:1rem;
  transition:border-color .2s ease, color .2s ease;
}
.cal-nav:hover{ border-color:var(--gold-light); color:var(--gold-light); }
.cal-nav:disabled{ opacity:0.3; cursor:default; }
.cal-nav:disabled:hover{ border-color:var(--line); color:var(--text-on-ink); }
.date-picker-dow{
  display:grid; grid-template-columns:repeat(7,1fr); gap:4px;
  font-size:0.68rem; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--text-muted); text-align:center; margin-bottom:0.4rem;
}
.date-picker-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.date-picker-grid .cal-pad{ visibility:hidden; }
.cal-day{
  aspect-ratio:1; border:1px solid transparent; background:transparent;
  color:var(--text-on-ink); font-family:'Archivo',sans-serif; font-size:0.86rem;
  cursor:pointer; transition:border-color .2s ease, background .2s ease, color .2s ease;
  display:flex; align-items:center; justify-content:center; position:relative;
}
.cal-day:hover:not(:disabled){ border-color:var(--gold-light); }
.cal-day.selected{ background:var(--gold-light); color:var(--ink); font-weight:600; }
.cal-day.partial::after{
  content:''; position:absolute; bottom:4px; width:4px; height:4px; border-radius:50%;
  background:var(--gold-light);
}
.cal-day.selected.partial::after{ background:var(--ink); }
.cal-day:disabled{ color:var(--text-muted); opacity:0.3; cursor:not-allowed; text-decoration:line-through; }
.date-picker-legend{
  margin-top:0.8rem; font-size:0.74rem; color:var(--text-muted);
  display:flex; align-items:center; gap:0.3rem;
}
.date-picker-legend .dot{ width:7px; height:7px; border-radius:50%; display:inline-block; }
.date-picker-legend .dot.full{ background:var(--text-muted); opacity:0.5; }
.date-picker-legend .dot.partial{ background:var(--gold-light); margin-left:0.6rem; }
.date-picker-hint{ font-size:0.82rem; color:var(--text-muted); margin-top:0.5rem; }
.date-picker-hint.chosen{ color:var(--gold-light); }
.slot-options{ display:flex; flex-wrap:wrap; gap:0.6rem; }
.slot-btn{
  border:1px solid var(--line); background:none; color:var(--text-on-ink);
  font-family:'Archivo',sans-serif; font-size:0.86rem; padding:0.6rem 1rem;
  cursor:pointer; transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.slot-btn:hover:not(:disabled){ border-color:var(--gold-light); }
.slot-btn.selected{ background:var(--gold-light); color:var(--ink); border-color:var(--gold-light); font-weight:600; }
.slot-btn:disabled{ color:var(--text-muted); opacity:0.35; cursor:not-allowed; text-decoration:line-through; }

/* ---------- FOOTER ---------- */
footer{ background:var(--ink); color:var(--text-muted); padding:4rem 0 2.4rem; }
.footer-grid{
  display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:2.5rem;
  padding-bottom:2.6rem; border-bottom:1px solid var(--line);
}
.footer-brand{ font-family:'Fraunces',serif; font-style:italic; font-size:1.6rem; color:var(--text-on-ink); }
.footer-brand span{ display:block; }
.footer-cols{ display:flex; gap:4.5rem; flex-wrap:wrap; }
.footer-col h4{ font-family:'Archivo',sans-serif; font-weight:600; font-size:0.78rem; letter-spacing:0.03em; color:var(--gold-light); margin-bottom:0.9rem; }
.footer-col a, .footer-col span{ display:block; font-size:0.92rem; margin-bottom:0.55rem; color:var(--text-muted); }
.footer-col a:hover{ color:var(--text-on-ink); }
.footer-bottom{ display:flex; justify-content:space-between; padding-top:1.6rem; font-size:0.8rem; flex-wrap:wrap; gap:0.6rem; }

/* ---------- MOTION LAYER (motion.js) ---------- */
/* Word-mask text reveal: each word sits behind its own overflow-hidden
   mask so it can be animated up into place without affecting layout. */
.word-mask{ display:inline-block; overflow:hidden; vertical-align:top; }
.word-mask .word{ display:inline-block; will-change:transform; }

/* Image wipe-reveal panel — added as a sibling of the <img> inside tiles
   that already have position:relative; overflow:hidden (.featured-item,
   .cat-tile), so no markup changes were needed. pointer-events:none means
   it can never block a click even if a script error leaves it on screen. */
.reveal-img-mask{
  position:absolute; inset:0; z-index:5; background:var(--ink);
  transform-origin:left center; pointer-events:none;
}

/* Cursor accent — layered on top of the real system cursor (never hides
   it), so it stays safe to use while typing into the booking form. */
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:9999;
  border-radius:50%; transform:translate(-50%,-50%); will-change:transform;
}
.cursor-dot{ width:7px; height:7px; background:var(--gold-light); }
.cursor-ring{
  width:34px; height:34px; border:1px solid var(--gold-light); opacity:0.65;
  transition:width .25s ease, height .25s ease, opacity .25s ease;
}
.cursor-ring.is-hover{ width:58px; height:58px; opacity:1; }
@media (hover:none), (pointer:coarse){ .cursor-dot, .cursor-ring{ display:none; } }

/* Reviews strip — drifts left, pauses on hover */
.t-marquee{ display:flex; flex-direction:column; gap:1.4rem; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.t-row{ display:flex; width:max-content; animation:t-scroll var(--dur,60s) linear infinite; }
.t-row.rev{ animation-direction:reverse; }
.t-set{ display:flex; gap:1.4rem; padding-right:1.4rem; }
.t-marquee .t-card{ width:340px; flex:none; padding:1.8rem 1.6rem; }
.t-marquee .t-quote{ display:-webkit-box; -webkit-line-clamp:8; -webkit-box-orient:vertical; overflow:hidden; font-size:1.02rem; }
.t-marquee:hover .t-row, .t-marquee:focus-within .t-row{ animation-play-state:paused; }
@keyframes t-scroll{ to{ transform:translateX(-50%); } }
@media(max-width:600px){ .t-marquee .t-card{ width:280px; } }
@media(prefers-reduced-motion:reduce){
  .t-marquee{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
  .t-row{ animation:none; }
  .t-set[aria-hidden="true"]{ display:none; }
}

/* Rate card teaser on the Services page + inline links */
.rate-teaser{ display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap;
  background:var(--ink); color:var(--text-on-ink); padding:2.4rem 2.6rem; margin-top:1rem; }
.rate-teaser .section-num{ color:var(--gold-light); display:block; margin-bottom:0.5rem; }
.rate-teaser h3{ font-size:1.6rem; color:var(--text-on-ink); margin-bottom:0.6rem; }
.rate-teaser p{ color:var(--text-muted); max-width:46ch; line-height:1.6; font-size:0.98rem; }
@media(max-width:600px){ .rate-teaser{ padding:1.8rem 1.4rem; } }
.inline-link{ color:var(--gold-light); border-bottom:1px solid var(--gold); }
.inline-link:hover{ color:var(--text-on-ink); }