/* =========================================================
   PRIME LOOK STUDIO — Design Tokens
   ========================================================= */
:root{
  --ivory:#FBF8F2;
  --white:#FFFFFF;
  --cream:#F4ECDD;
  --gold:#B8935A;
  --gold-light:#DCC08C;
  --gold-deep:#8C6A34;
  --gold-line: rgba(184,147,90,0.35);
  --charcoal:#211C17;
  --charcoal-soft:#332C24;
  --text:#2B2620;
  --text-muted:#7C7264;
  --text-light: rgba(251,248,242,0.78);

  --font-display: 'Fraunces', serif;
  --font-body: 'Manrope', sans-serif;

  --container: 1240px;
  --radius: 2px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ivory);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; }
ul{ list-style:none; margin:0; padding:0; }
::selection{ background:var(--gold-light); color:var(--charcoal); }

:focus-visible{
  outline: 2px solid var(--gold-deep);
  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; }
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:500;
  color:var(--text);
  margin:0;
  letter-spacing:-0.01em;
}
h2{ font-size:clamp(2rem, 3.4vw, 3rem); line-height:1.15; margin-bottom:1.1rem; }
h3{ font-size:1.35rem; margin-bottom:.6rem; }
em{ font-style:italic; color:var(--gold-deep); }

.eyebrow{
  font-family:var(--font-body);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-deep);
  margin:0 0 1rem;
}
.eyebrow-light{ color:var(--gold-light); }
.center{ text-align:center; margin-left:auto; margin-right:auto; }

.body-text{ color:var(--text-muted); font-size:1.02rem; max-width:46ch; margin:0 0 1.1rem; }
.light-text{ color:var(--text-light); }
.section-lead{ color:var(--text-muted); max-width:56ch; margin:0 auto 3rem; font-size:1rem; }

/* =========================================================
   LAYOUT HELPERS
   ========================================================= */
.section{ padding:7.5rem 0; position:relative; }
.section-inner{ max-width:var(--container); margin:0 auto; padding:0 2.5rem; }
.section-inner.narrow{ max-width:760px; }
.section-inner.split{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:5rem;
  align-items:center;
}
.section-inner.split.reverse{ grid-template-columns:1.1fr 0.9fr; }
.split-visual{ order:0; }
.section-inner.split.reverse .split-text{ order:0; }
.section-inner.split.reverse .split-visual{ order:1; }

@media (max-width: 900px){
  .section{ padding:5rem 0; }
  .section-inner.split, .section-inner.split.reverse{ grid-template-columns:1fr; gap:2.5rem; }
  .section-inner.split.reverse .split-text{ order:0; }
  .section-inner.split.reverse .split-visual{ order:0; }
}

/* thin gold hairline divider between sections */
.section::before{
  content:"";
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(90%, 1100px); height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-line) 20%, var(--gold-line) 80%, transparent);
}
.section:first-of-type::before,
.hero + .section::before{ display:none; }

/* =========================================================
   PRELOADER
   ========================================================= */
.preloader{
  position:fixed; inset:0; z-index:9999;
  background:var(--ivory);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .8s var(--ease), visibility .8s var(--ease);
}
.preloader.done{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader-inner{ text-align:center; }
.preloader-logo{ width:88px; height:auto; margin:0 auto 1.4rem; opacity:0; animation: fadeIn .8s var(--ease) .1s forwards; }
.preloader-line{ width:160px; height:1px; background:var(--gold-line); margin:0 auto; overflow:hidden; }
.preloader-line span{
  display:block; height:100%; width:0%;
  background:var(--gold);
  animation: loadLine 1.4s var(--ease) forwards .3s;
}
@keyframes fadeIn{ to{ opacity:1; } }
@keyframes loadLine{ to{ width:100%; } }

/* =========================================================
   NAVBAR
   ========================================================= */
.navbar{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:1.4rem 0;
  transition: padding .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.navbar.scrolled{
  padding:.8rem 0;
  background:rgba(251,248,242,0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 rgba(184,147,90,0.18), 0 12px 30px rgba(33,28,23,0.05);
}
.nav-container{
  max-width:var(--container); margin:0 auto; padding:0 2.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.nav-logo img{ height:44px; width:auto; transition: height .4s var(--ease); }
.navbar.scrolled .nav-logo img{ height:36px; }

.nav-links{ display:flex; gap:2.1rem; margin:0 auto; }
.nav-links a{
  position:relative;
  font-size:.86rem; font-weight:600; letter-spacing:.02em;
  color:var(--text);
  padding:.3rem 0;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px;
  background:var(--gold-deep); transition:width .35s var(--ease);
}
.nav-links a:hover::after{ width:100%; }

.btn-book{
  background:var(--charcoal); color:var(--ivory);
  padding:.85rem 1.6rem; font-size:.82rem; font-weight:700; letter-spacing:.03em;
  border-radius: 1px;
  transition: background .35s var(--ease), transform .35s var(--ease);
  white-space:nowrap;
}
.btn-book:hover{ background:var(--gold-deep); transform:translateY(-1px); }
.nav-book{ display:inline-flex; }

.hamburger{ display:none; flex-direction:column; gap:5px; width:26px; padding:.4rem; }
.hamburger span{ display:block; height:1.5px; width:100%; background:var(--charcoal); transition: transform .35s var(--ease), opacity .35s var(--ease); }
.hamburger.active span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.hamburger.active span:nth-child(2){ opacity:0; }
.hamburger.active span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.mobile-menu{
  position:fixed; top:0; right:0; height:100vh; width:min(78vw,340px);
  background:var(--ivory);
  box-shadow:-20px 0 50px rgba(33,28,23,0.12);
  transform:translateX(100%);
  transition: transform .5s var(--ease);
  z-index:999;
  display:flex; flex-direction:column; justify-content:center; gap:2.5rem;
  padding:2rem;
}
.mobile-menu.open{ transform:translateX(0); }
.mobile-menu nav{ display:flex; flex-direction:column; gap:1.4rem; }
.mobile-menu nav a{ font-family:var(--font-display); font-size:1.4rem; }
.mobile-menu .btn-book{ align-self:flex-start; }

@media (max-width: 980px){
  .nav-links, .nav-book{ display:none; }
  .hamburger{ display:flex; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:100vh;
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items:center;
  gap:2rem;
  padding:9rem 2.5rem 5rem;
  max-width:var(--container);
  margin:0 auto;
  overflow:hidden;
}
.hero-thread{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.55; }
.hero-thread svg{ width:100%; height:100%; }
.hero-thread path{
  fill:none; stroke:var(--gold); stroke-width:1.4;
  stroke-dasharray: 2400; stroke-dashoffset:2400;
}

.hero-content{ position:relative; z-index:2; }
.hero-title{ margin:0 0 1.4rem; }
.hero-title .line{ display:block; overflow:hidden; }
.hero-title .line-inner{
  display:block;
  font-size:clamp(2.6rem, 5vw, 4.2rem);
  line-height:1.08;
  transform:translateY(110%);
}
.hero-sub{ max-width:46ch; color:var(--text-muted); font-size:1.08rem; margin-bottom:2.2rem; }

.hero-actions{ display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap; margin-bottom:3rem; }
.btn-primary{
  display:inline-flex; align-items:center; gap:.6rem;
  background:var(--charcoal); color:var(--ivory);
  padding:1.05rem 1.9rem; font-size:.9rem; font-weight:700; letter-spacing:.02em;
  border-radius:1px;
  position:relative; overflow:hidden;
  transition: background .4s var(--ease), transform .3s var(--ease), box-shadow .4s var(--ease);
}
.btn-primary::before{
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,0.22), transparent);
  transform:skewX(-20deg);
  transition:left .8s var(--ease);
}
.btn-primary:hover::before{ left:130%; }
.btn-primary svg{ transition: transform .35s var(--ease); }
.btn-primary:hover{ background:var(--gold-deep); transform:translateY(-2px); box-shadow:0 14px 30px rgba(140,106,52,0.3); }
.btn-primary:hover svg{ transform:translateX(4px); }
.btn-large{ padding:1.25rem 2.4rem; font-size:.95rem; }

.btn-ghost{
  position:relative; font-size:.9rem; font-weight:600; color:var(--text);
  padding-bottom:.3rem;
  border-bottom:1px solid var(--gold-line);
  transition: border-color .35s var(--ease), color .35s var(--ease);
}
.btn-ghost:hover{ border-color:var(--gold-deep); color:var(--gold-deep); }

.hero-trust{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; }
.trust-item{ display:flex; flex-direction:column; }
.trust-item strong{ font-family:var(--font-display); font-size:1.3rem; color:var(--gold-deep); }
.trust-item span{ font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); }
.divider-dot{ width:4px; height:4px; border-radius:50%; background:var(--gold-line); }

.hero-visual{ position:relative; z-index:2; }
.hero-frame{
  position:relative; aspect-ratio:3/4; width:100%; max-width:420px; margin-left:auto;
  border-radius:2px; overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(33,28,23,0.25);
  clip-path: inset(0 0 0 0);
}
.hero-placeholder{
  height:100%; width:100%;
  position:relative;
  background: linear-gradient(160deg, var(--cream), var(--gold-light));
}
.hero-placeholder img{
  height:100%; width:100%; object-fit:cover; object-position:center 30%;
}
.hero-placeholder img.ken-burns{
  animation: kenBurns 22s ease-in-out infinite alternate;
}
@keyframes kenBurns{
  0%{ transform:scale(1) translate(0,0); }
  100%{ transform:scale(1.12) translate(-1.5%, -1.5%); }
}
.hero-placeholder::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(33,28,23,0.05), rgba(33,28,23,0.02) 40%, rgba(33,28,23,0.35));
}
.hero-frame-caption{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(0deg, rgba(33,28,23,0.72), transparent);
  color:var(--ivory); padding:1.4rem 1.4rem 1.1rem;
  display:flex; flex-direction:column; gap:.15rem;
  font-size:.82rem;
}
.caption-gold{ color:var(--gold-light); font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:.68rem; }

.hero-badge{
  position:absolute; left:-1.2rem; bottom:-1.4rem;
  background:var(--white); padding:1.2rem 1.4rem;
  box-shadow:0 20px 40px rgba(33,28,23,0.12);
  display:flex; align-items:center; gap:.9rem;
  max-width:230px;
}
.float-badge{ animation: floatBadge 5s ease-in-out infinite; }
@keyframes floatBadge{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}
.badge-num{ font-family:var(--font-display); font-size:1.8rem; color:var(--gold-deep); }
.badge-text{ font-size:.76rem; line-height:1.4; color:var(--text-muted); font-weight:600; }

@media (max-width: 980px){
  .hero{ grid-template-columns:1fr; padding-top:8rem; text-align:left; }
  .hero-frame{ margin:0 auto; max-width:340px; }
  .hero-badge{ left:0; }
}

.scroll-cue{
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  width:1px; height:56px; z-index:2;
}
.scroll-cue span{
  display:block; width:1px; height:100%; background:var(--gold-line);
  position:relative;
}
.scroll-cue span::after{
  content:""; position:absolute; top:0; left:-2px; width:5px; height:5px; border-radius:50%;
  background:var(--gold-deep);
  animation: scrollDot 2.2s ease-in-out infinite;
}
@keyframes scrollDot{ 0%{ top:0; opacity:1; } 90%{ opacity:1;} 100%{ top:100%; opacity:0; } }
@media (max-width: 980px){ .scroll-cue{ display:none; } }

/* =========================================================
   REVEAL UTILITIES (JS toggles .is-visible)
   ========================================================= */
.reveal-up{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-up.is-visible{ opacity:1; transform:translateY(0); }
.reveal-frame{ opacity:0; clip-path: inset(6% 6% 6% 6%); transition:opacity .9s var(--ease), clip-path 1s var(--ease); }
.reveal-frame.is-visible{ opacity:1; clip-path: inset(0 0 0 0); }
.stagger{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.stagger.is-visible{ opacity:1; transform:translateY(0); }

/* =========================================================
   UNDERSTANDING / SPLIT DIAGRAM
   ========================================================= */
.visual-block{
  width:100%; aspect-ratio:1/1;
  background:var(--white);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 24px 50px rgba(33,28,23,0.06);
}
.diagram-block{ position:relative; overflow:hidden; }
.diagram-photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition: transform 1.4s var(--ease);
}
.diagram-block::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(33,28,23,0.12), rgba(33,28,23,0.32));
}
.diagram-block:hover .diagram-photo{ transform:scale(1.07); }
.diagram-ring{
  width:74%; aspect-ratio:1/1; border-radius:50%;
  border:1px solid rgba(251,248,242,0.55);
  display:flex; align-items:center; justify-content:center;
  position:relative; z-index:2;
}
.diagram-ring::before{
  content:""; position:absolute; inset:14%; border-radius:50%;
  border:1px dashed var(--gold-line);
}
.diagram-core{
  width:44%; aspect-ratio:1/1; border-radius:50%;
  background:linear-gradient(160deg, var(--cream), var(--gold-light));
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--font-display); color:var(--charcoal); font-size:1rem;
}

.tick-list{ margin-top:1.4rem; }
.tick-list li{ display:flex; align-items:flex-start; gap:.7rem; margin-bottom:.7rem; color:var(--text); font-weight:600; font-size:.95rem; }
.tick{ color:var(--gold-deep); font-family:var(--font-display); }

/* =========================================================
   PILLARS
   ========================================================= */
.pillar-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.2rem; margin-top:3.5rem; }
.pillar-card{
  background:var(--white); padding:2.6rem 2rem; text-align:center;
  border:1px solid rgba(184,147,90,0.14);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.pillar-card:hover{ transform:translateY(-6px); box-shadow:0 26px 50px rgba(33,28,23,0.08); border-color:var(--gold-line); }
.pillar-icon{
  width:56px; height:56px; margin:0 auto 1.3rem; border-radius:50%;
  background:var(--cream); color:var(--gold-deep);
  display:flex; align-items:center; justify-content:center;
  transition: transform .5s var(--ease), background .5s var(--ease);
}
.pillar-card:hover .pillar-icon{ transform:rotate(-8deg) scale(1.08); background:var(--gold-light); }
.pillar-card p{ color:var(--text-muted); font-size:.94rem; }

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

/* =========================================================
   BEFORE / AFTER SLIDER
   ========================================================= */
.transformations{ background:var(--white); }
.ba-slider{
  position:relative; width:100%; max-width:820px; margin:0 auto;
  aspect-ratio:16/9;
  overflow:hidden;
  box-shadow:0 30px 60px rgba(33,28,23,0.1);
  cursor: ew-resize;
  user-select:none;
}
.ba-side{
  position:absolute; inset:0;
  display:flex; align-items:flex-end; padding:1.6rem;
}
.ba-before{
  background: linear-gradient(150deg, #d8cfb9, #b3a889);
  color: rgba(33,28,23,0.55);
}
.ba-after{
  background: linear-gradient(150deg, var(--cream), var(--gold-light) 75%, #e8c987);
  clip-path: inset(0 0 0 52%);
  color: var(--gold-deep);
}
.ba-art{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-52%);
  width:62%; max-width:280px; height:auto;
}
.ba-tag{
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(33,28,23,0.75); color:var(--ivory); padding:.5rem .9rem;
}
.ba-after .ba-tag{ background:rgba(140,106,52,0.85); }
.ba-handle{
  position:absolute; top:0; bottom:0; left:52%;
  width:2px; background:var(--white);
  display:flex; align-items:center; justify-content:center;
  transform:translateX(-1px);
}
.ba-handle::before{ content:""; position:absolute; inset:0; box-shadow:0 0 0 1px rgba(255,255,255,0.4); }
.ba-handle svg{
  position:relative; z-index:2;
  width:38px; height:38px; padding:10px; border-radius:50%;
  background:var(--white); color:var(--charcoal);
  box-shadow:0 10px 24px rgba(33,28,23,0.18);
}

.ba-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3rem; }
.ba-thumb{
  aspect-ratio:4/3;
  position:relative;
  background: linear-gradient(160deg,var(--cream),#e6d8b8);
  display:flex; align-items:flex-end; justify-content:center; padding:1rem;
  transition: transform .4s var(--ease);
  color: var(--gold-deep);
}
.thumb-art{
  position:absolute; top:12%; left:50%; transform:translateX(-50%);
  width:42%; height:auto; opacity:.85;
}
.patch-thumb{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.ba-thumb:hover{ transform:translateY(-5px); }
.ba-thumb:hover .thumb-art{ transform:translateX(-50%) scale(1.08) rotate(-3deg); }
.thumb-art{ transition: transform .5s var(--ease); }
.thumb-label{ font-size:.78rem; font-weight:700; color:var(--charcoal-soft); background:rgba(255,255,255,0.7); padding:.4rem .7rem; }

@media (max-width:700px){ .ba-strip{ grid-template-columns:1fr; } }

/* =========================================================
   ATMOSPHERE BAND
   ========================================================= */
.atmosphere{
  position:relative;
  height:52vh; min-height:340px; max-height:560px;
  overflow:hidden;
}
.atmosphere img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.atmosphere-overlay{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(33,28,23,0.55), rgba(33,28,23,0.15) 60%);
  display:flex; align-items:center;
}
.atmosphere-line{
  font-family:var(--font-display); font-style:italic; font-weight:400;
  color:var(--ivory);
  font-size:clamp(1.6rem, 3.2vw, 2.6rem);
  max-width:var(--container); margin:0 auto; padding:0 2.5rem;
}

/* =========================================================
   METHODS
   ========================================================= */
.method-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; margin-top:3.5rem; }
.method-card{
  background:var(--ivory); border:1px solid rgba(184,147,90,0.18);
  padding:2.2rem 1.6rem; position:relative; overflow:hidden;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), background .45s var(--ease);
}
.method-card:hover{ transform:translateY(-8px); background:var(--white); box-shadow:0 30px 55px rgba(33,28,23,0.1); }
.method-index{
  font-family:var(--font-display); font-size:2.2rem; color:var(--gold-line);
  margin-bottom:.6rem; transition:color .4s var(--ease);
}
.method-card:hover .method-index{ color:var(--gold-deep); }
.method-card p{ color:var(--text-muted); font-size:.9rem; margin-bottom:1.2rem; }
.method-tag{
  font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold-deep);
}
@media (max-width:980px){ .method-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .method-grid{ grid-template-columns:1fr; } }

/* =========================================================
   JOURNEY
   ========================================================= */
.journey{ background:var(--white); }
.journey-track{
  position:relative;
  display:grid; grid-template-columns:repeat(5,1fr); gap:1.6rem;
  margin-top:4rem;
}
.journey-line{
  position:absolute; top:14px; left:5%; right:5%; height:1px; background:var(--gold-line);
  overflow:hidden;
}
.journey-line span{
  display:block; height:100%; width:0%; background:var(--gold-deep);
  transition: width 1.2s var(--ease);
}
.journey-step{ position:relative; text-align:center; padding-top:2.6rem; }
.step-num{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:30px; height:30px; border-radius:50%;
  background:var(--white); border:1px solid var(--gold-line);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:.85rem; color:var(--gold-deep);
}
.journey-step p{ color:var(--text-muted); font-size:.86rem; }

@media (max-width:980px){
  .journey-track{ grid-template-columns:1fr; gap:2.4rem; }
  .journey-line{ display:none; }
  .journey-step{ padding-top:0; padding-left:3.2rem; text-align:left; }
  .step-num{ left:0; top:0; transform:none; }
}

/* =========================================================
   BENEFITS
   ========================================================= */
.benefit-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem 2rem; margin-top:3.5rem; }
.benefit-item{ border-top:1px solid var(--gold-line); padding-top:1.4rem; }
.benefit-num{ font-family:var(--font-display); color:var(--gold-deep); font-size:1rem; }
.benefit-item h4{ font-family:var(--font-display); font-weight:500; font-size:1.15rem; margin:.5rem 0 .4rem; }
.benefit-item p{ color:var(--text-muted); font-size:.9rem; }
@media (max-width:900px){ .benefit-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .benefit-grid{ grid-template-columns:1fr; } }

/* =========================================================
   ABOUT (DARK)
   ========================================================= */
.about-dark{
  background: var(--charcoal);
  color:var(--ivory);
}
.about-dark::before{ background:linear-gradient(90deg, transparent, rgba(220,192,140,0.18) 20%, rgba(220,192,140,0.18) 80%, transparent); }
.light-heading{ color:var(--ivory); }
.about-stats{ display:flex; gap:2.4rem; margin-top:2rem; }
.about-stats .stat{ display:flex; flex-direction:column; }
.about-stats strong{ font-family:var(--font-display); font-size:1.7rem; color:var(--gold-light); }
.about-stats span{ font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-light); }

.about-visual{
  position:relative; overflow:hidden;
  background:rgba(255,255,255,0.03); border:1px solid rgba(220,192,140,0.18);
}
.about-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.about-visual-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(33,28,23,0.55), rgba(33,28,23,0.78));
}
.about-monogram{ position:relative; z-index:2; width:52%; opacity:.96; filter:drop-shadow(0 14px 30px rgba(0,0,0,0.4)); }

/* =========================================================
   FAQ ACCORDION
   ========================================================= */
.accordion-item{
  border-bottom:1px solid var(--gold-line);
}
.accordion-head{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:1.5rem 0; text-align:left;
  font-family:var(--font-display); font-size:1.08rem; color:var(--text);
}
.accordion-icon{ position:relative; width:16px; height:16px; flex:none; margin-left:1.5rem; }
.accordion-icon::before, .accordion-icon::after{
  content:""; position:absolute; top:50%; left:50%; background:var(--gold-deep);
  transform:translate(-50%,-50%);
}
.accordion-icon::before{ width:16px; height:1px; }
.accordion-icon::after{ width:1px; height:16px; transition: transform .35s var(--ease); }
.accordion-item.open .accordion-icon::after{ transform:translate(-50%,-50%) rotate(90deg) scaleY(0); }

.accordion-body{
  max-height:0; overflow:hidden;
  transition: max-height .5s var(--ease);
}
.accordion-body p{ padding:0 0 1.6rem; color:var(--text-muted); max-width:60ch; font-size:.95rem; }

/* =========================================================
   LOCATIONS
   ========================================================= */
.location-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-top:3.5rem; }
.location-card{
  background:var(--white); padding:2.6rem;
  border-left:2px solid var(--gold);
  box-shadow:0 20px 45px rgba(33,28,23,0.06);
}
.location-tag{
  font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep);
}
.location-address{ color:var(--text-muted); margin:.8rem 0 1.2rem; font-size:.94rem; }
.location-link{ font-weight:700; border-bottom:1px solid var(--gold-line); padding-bottom:.2rem; }
@media (max-width:800px){ .location-grid{ grid-template-columns:1fr; } }

/* =========================================================
   FINAL CTA
   ========================================================= */
.cta-final{
  position:relative;
  background:var(--charcoal);
  color:var(--ivory);
  padding:7rem 2.5rem;
  text-align:center;
  overflow:hidden;
}
.cta-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.28;
}
.cta-final::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(33,28,23,0.55), var(--charcoal) 85%);
}
.cta-thread{ position:absolute; inset:0; opacity:.5; z-index:1; }
.cta-thread svg{ width:100%; height:100%; }
.cta-thread path{ fill:none; stroke:var(--gold); stroke-width:1.2; }
.cta-inner{ position:relative; z-index:2; max-width:680px; margin:0 auto; }
.cta-inner .body-text{ margin-left:auto; margin-right:auto; }
.cta-inner .btn-primary{ margin-top:1rem; background:var(--gold-deep); }
.cta-inner .btn-primary:hover{ background:var(--gold-light); color:var(--charcoal); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background:var(--charcoal-soft); color:var(--text-light); padding:5rem 2.5rem 2rem; }
.footer-inner{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:3rem;
  padding-bottom:3rem; border-bottom:1px solid rgba(220,192,140,0.14);
}
.footer-logo{ height:40px; width:auto; margin-bottom:1rem; }
.footer-brand p{ font-size:.88rem; max-width:32ch; margin-bottom:1.4rem; }
.footer-social{ display:flex; gap:.9rem; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(220,192,140,0.3);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold-light);
  transition: background .35s var(--ease), transform .35s var(--ease);
}
.footer-social a:hover{ background:var(--gold-deep); color:var(--ivory); transform:translateY(-3px); }
.footer-col h5{
  font-family:var(--font-body); font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-light); margin-bottom:1.2rem;
}
.footer-col{ display:flex; flex-direction:column; gap:.7rem; font-size:.88rem; }
.footer-col a:hover{ color:var(--gold-light); }
.footer-bottom{
  max-width:var(--container); margin:0 auto; padding-top:2rem;
  font-size:.78rem; color:var(--text-light); text-align:center;
}
@media (max-width:900px){
  .footer-inner{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .footer-inner{ grid-template-columns:1fr; }
}

/* =========================================================
   FLOATING BUTTONS
   ========================================================= */
.floating-stack{
  position:fixed; right:1.8rem; bottom:1.8rem; z-index:900;
  display:flex; flex-direction:column; gap:.9rem;
}
.float-btn{
  width:54px; height:54px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 16px 34px rgba(33,28,23,0.25);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.float-btn:hover{ transform:translateY(-4px) scale(1.05); }
.float-whatsapp{ background:#25D366; color:#fff; }
.float-insta{
  background:linear-gradient(135deg,#feda75,#d62976,#4f5bd5);
  color:#fff;
}

.back-to-top{
  position:fixed; left:1.8rem; bottom:1.8rem; z-index:900;
  width:46px; height:46px; border-radius:50%;
  background:var(--white); color:var(--charcoal);
  box-shadow:0 14px 30px rgba(33,28,23,0.14);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
.back-to-top.visible{ opacity:1; visibility:visible; transform:translateY(0); }

@media (max-width:640px){
  .floating-stack{ right:1.1rem; bottom:1.1rem; }
  .back-to-top{ left:1.1rem; bottom:1.1rem; width:42px; height:42px; }
  .float-btn{ width:48px; height:48px; }
}

/* =========================================================
   RESPONSIVE TYPE / SPACING FINE-TUNE
   ========================================================= */
@media (max-width:640px){
  .section-inner{ padding:0 1.4rem; }
  .hero{ padding-left:1.4rem; padding-right:1.4rem; }
  h2{ font-size:1.8rem; }
}