/* ============================================================
   SCIN MATTERS — Editorial Luxury Design System
   Palette: charcoal · olive · premium gold
   Type: Cormorant Garamond (display serif) + Plus Jakarta Sans (UI)
   ============================================================ */

:root{
  /* surfaces — warm earthy near-black, Archon-style */
  --bg:           #1b1a15;
  --bg-deep:      #131208;
  --bg-elev:      #242318;
  --bg-elev-2:    #2c2b1f;
  --olive-section:#2a2d1d;
  --cream:        #f4f1ea;
  --cream-2:      #e7e1d2;

  /* brand */
  --olive:        #5d6140;
  --olive-light:  #828759;
  --olive-deep:   #3c3f28;
  --gold:         #c4a56c;
  --gold-light:   #ddc8a0;
  --gold-deep:    #a07e44;

  /* text */
  --text:         #ece7d9;
  --text-muted:   #a8a290;
  --text-dim:     #78746a;
  --text-on-light:#23231b;
  --muted-on-light:#67634f;

  /* lines */
  --line:         rgba(216,197,160,.14);
  --line-soft:    rgba(216,197,160,.08);
  --line-dark:    rgba(0,0,0,.10);

  /* type */
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "Plus Jakarta Sans", system-ui, sans-serif;

  /* motion */
  --ease: cubic-bezier(.32,.72,0,1);
  --ease-soft: cubic-bezier(.22,1,.36,1);

  /* rhythm */
  --gutter: clamp(20px, 5vw, 80px);
  --maxw: 1280px;
  --radius: 22px;
}

*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  font-size:16px;
  letter-spacing:.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
::selection{ background:var(--gold); color:var(--bg-deep) }

/* film grain overlay — fixed, non-interactive */
body::after{
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- typography ---------- */
h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; line-height:1.04; letter-spacing:-.01em; color:var(--text) }
.display{ font-size:clamp(2.8rem,7vw,6.2rem); font-weight:400; letter-spacing:-.02em }
.h-xl{ font-size:clamp(2.4rem,5vw,4.2rem); font-weight:400 }
.h-lg{ font-size:clamp(2rem,3.6vw,3.1rem) }
.h-md{ font-size:clamp(1.5rem,2.4vw,2.1rem) }
.serif-italic{ font-style:italic; color:var(--gold-light) }
p{ color:var(--text-muted); max-width:62ch }
.lead{ font-size:clamp(1.05rem,1.5vw,1.25rem); color:var(--text); line-height:1.7 }

/* eyebrow tag */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--sans); font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.28em; color:var(--gold);
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--gold); opacity:.6 }
.eyebrow.center::after{ content:""; width:26px; height:1px; background:var(--gold); opacity:.6 }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter) }
section{ position:relative }
.section{ padding-block:clamp(80px,12vh,160px) }
.section--tight{ padding-block:clamp(60px,8vh,100px) }
.bg-deep{ background:var(--bg-deep) }
.bg-elev{ background:var(--bg-elev) }
.bg-cream{ background:var(--cream); color:var(--text-on-light) }
.bg-cream h1,.bg-cream h2,.bg-cream h3,.bg-cream h4{ color:var(--text-on-light) }
.bg-cream p{ color:var(--muted-on-light) }
.bg-olive{ background:linear-gradient(150deg,var(--olive-deep),var(--olive)) }

.center{ text-align:center }
.center p{ margin-inline:auto }
.grid{ display:grid; gap:clamp(18px,2vw,30px) }
.cols-2{ grid-template-columns:repeat(2,1fr) }
.cols-3{ grid-template-columns:repeat(3,1fr) }
.cols-4{ grid-template-columns:repeat(4,1fr) }
.divider{ height:1px; background:var(--line); border:0 }

/* ---------- buttons ---------- */
.btn{
  --b: var(--gold);
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--sans); font-weight:600; font-size:.86rem; letter-spacing:.02em;
  padding:.95em 1.1em .95em 1.45em; border-radius:999px;
  transition:transform .5s var(--ease), background .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease);
  cursor:pointer; border:1px solid transparent; white-space:nowrap;
}
.btn:active{ transform:scale(.97) }
.btn__ico{
  width:30px; height:30px; border-radius:999px; display:grid; place-items:center;
  font-size:.8rem; transition:transform .5s var(--ease), background .5s var(--ease);
}
.btn--gold{ background:var(--gold); color:#211d14; box-shadow:0 10px 30px -12px rgba(194,163,107,.7) }
.btn--gold .btn__ico{ background:rgba(0,0,0,.16) }
.btn--gold:hover{ background:var(--gold-light); box-shadow:0 16px 44px -14px rgba(216,197,160,.85) }
.btn--gold:hover .btn__ico{ transform:translate(2px,-2px) scale(1.06) }
.btn--ghost{ background:transparent; color:var(--text); border-color:var(--line) }
.btn--ghost .btn__ico{ background:rgba(216,197,160,.12) }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold-light) }
.btn--ghost:hover .btn__ico{ transform:translate(2px,-2px) }
.btn--dark{ background:var(--text-on-light); color:var(--cream) }
.btn--dark .btn__ico{ background:rgba(255,255,255,.14) }
.btn--lg{ font-size:.95rem; padding:1.05em 1.2em 1.05em 1.6em }
.link-underline{
  display:inline-flex; align-items:center; gap:.5em; font-weight:600; font-size:.85rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--gold-light);
  padding-bottom:4px; background-image:linear-gradient(var(--gold),var(--gold));
  background-size:0% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .5s var(--ease), color .4s ease;
}
.link-underline:hover{ background-size:100% 1px; color:var(--gold) }
.link-underline .ar{ transition:transform .5s var(--ease) }
.link-underline:hover .ar{ transform:translateX(4px) }

/* ---------- double-bezel card ---------- */
.shell{
  background:rgba(216,197,160,.05); border:1px solid var(--line-soft);
  padding:7px; border-radius:var(--radius);
  transition:transform .7s var(--ease), border-color .7s var(--ease), box-shadow .7s var(--ease);
}
.shell:hover{ transform:translateY(-7px); border-color:var(--line); box-shadow:0 40px 80px -50px rgba(0,0,0,.8) }
.core{
  position:relative; background:var(--bg-elev); border-radius:calc(var(--radius) - 7px);
  overflow:hidden; box-shadow:inset 0 1px 1px rgba(216,197,160,.08);
}

/* treatment card */
.tcard .core{ display:flex; flex-direction:column; height:100% }
.tcard__media{ position:relative; aspect-ratio:4/3; overflow:hidden }
.tcard__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); transform:scale(1.02) }
.tcard:hover .tcard__media img{ transform:scale(1.09) }
.tcard__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(18,18,17,.55),transparent 55%) }
.tcard__tag{
  position:absolute; top:14px; left:14px; z-index:2; font-size:10px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold-light);
  background:rgba(18,18,17,.55); backdrop-filter:blur(6px);
  padding:.5em .9em; border-radius:999px; border:1px solid var(--line);
}
.tcard__body{ padding:26px 26px 28px; display:flex; flex-direction:column; gap:12px; flex:1 }
.tcard__body h3{ font-size:1.7rem }
.tcard__body p{ font-size:.92rem; color:var(--text-muted) }
.tcard__foot{ margin-top:auto; padding-top:14px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line-soft) }
.tcard__price{ font-family:var(--serif); font-size:1.25rem; color:var(--gold-light) }

/* ---------- navigation: fluid island ---------- */
.nav{ position:fixed; inset:18px 0 auto; z-index:80; display:flex; justify-content:center; transition:top .5s var(--ease) }
.nav__inner{
  width:min(var(--maxw), calc(100% - 32px));
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:10px 12px 10px 22px; border-radius:999px;
  background:rgba(26,26,24,.55); backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid var(--line); box-shadow:0 20px 50px -30px rgba(0,0,0,.9);
  transition:background .5s var(--ease), padding .5s var(--ease), border-color .5s var(--ease);
}
.nav.scrolled .nav__inner{ background:rgba(18,18,17,.82); padding-top:8px; padding-bottom:8px }
.nav__logo img{ height:52px; width:auto }
.nav__menu{ display:flex; align-items:center; gap:4px; margin-inline:auto }
.nav__menu > a, .nav__item > a{
  display:inline-flex; align-items:center; gap:6px; font-size:.84rem; font-weight:500;
  letter-spacing:.01em; color:var(--text); padding:9px 15px; border-radius:999px;
  transition:color .4s ease, background .4s ease;
}
.nav__menu > a:hover, .nav__item:hover > a, .nav__item.open > a{ color:var(--gold-light); background:rgba(216,197,160,.07) }
.nav__item{ position:relative }
.nav__item .caret{ font-size:.6rem; opacity:.7; transition:transform .4s var(--ease) }
.nav__item:hover .caret, .nav__item.open .caret{ transform:rotate(180deg) }
.nav__cta{ display:flex; align-items:center; gap:8px }
.nav__cta .btn{ padding:.7em 1.05em; font-size:.8rem; min-width:138px; justify-content:center }
.nav__cta .btn__ico{ width:26px; height:26px }

/* mega menu */
.mega{
  position:absolute; top:calc(100% + 16px); left:50%; transform:translate(-50%,12px);
  width:min(720px,86vw); padding:10px; border-radius:24px;
  background:rgba(20,20,18,.92); backdrop-filter:blur(22px);
  border:1px solid var(--line); box-shadow:0 40px 90px -40px rgba(0,0,0,.95);
  opacity:0; visibility:hidden; transition:opacity .45s var(--ease), transform .45s var(--ease);
  display:grid; grid-template-columns:repeat(3,1fr); gap:6px;
}
.nav__item:hover .mega, .nav__item.open .mega{ opacity:1; visibility:visible; transform:translate(-50%,0) }
/* invisible hover bridge so the cursor can cross the gap to the submenu */
.nav__item .mega::before{ content:""; position:absolute; top:-18px; left:0; right:0; height:18px }
.mega__col{ padding:16px }
.mega__h{ font-family:var(--sans); font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:12px }
.mega a{ display:block; padding:9px 12px; border-radius:12px; font-size:.9rem; color:var(--text); transition:background .35s ease, color .35s ease }
.mega a small{ display:block; font-size:.72rem; color:var(--text-dim); margin-top:2px }
.mega a:hover{ background:rgba(216,197,160,.08); color:var(--gold-light) }

/* burger + mobile */
.nav__burger{ display:none; width:44px; height:44px; border-radius:999px; background:rgba(216,197,160,.08); border:1px solid var(--line); position:relative; cursor:pointer }
.nav__burger span{ position:absolute; left:12px; right:12px; height:1.5px; background:var(--gold-light); transition:transform .5s var(--ease), opacity .3s ease; }
.nav__burger span:nth-child(1){ top:17px } .nav__burger span:nth-child(2){ bottom:17px }
body.menu-open .nav__burger span:nth-child(1){ transform:translateY(4px) rotate(45deg) }
body.menu-open .nav__burger span:nth-child(2){ transform:translateY(-4px) rotate(-45deg) }
.mobile{
  position:fixed; inset:0; z-index:90; background:var(--bg);
  display:flex; flex-direction:column; padding:16px var(--gutter) 30px;
  opacity:0; visibility:hidden; overflow-y:auto;
  transition:opacity .5s var(--ease), visibility .5s;
}
body.menu-open .mobile{ opacity:1; visibility:visible }
.mobile__head{ display:flex; align-items:center; justify-content:space-between; padding:4px 0 18px }
.mobile__head .nav__logo img{ height:50px }
.mobile__close{ width:48px; height:48px; border-radius:999px; border:1px solid var(--line); background:rgba(216,197,160,.06); color:var(--gold-light); font-size:1.7rem; line-height:1; cursor:pointer; display:grid; place-items:center; transition:background .4s var(--ease), transform .4s var(--ease) }
.mobile__close:hover{ background:var(--gold); color:#211d12 }
.mobile__close:active{ transform:scale(.92) }
.mobile__nav{ display:flex; flex-direction:column; border-top:1px solid var(--line-soft) }
.mobile__nav > a, .mobile__toggle{
  display:flex; align-items:center; justify-content:space-between; width:100%; text-align:left;
  background:none; border:0; border-bottom:1px solid var(--line-soft); cursor:pointer;
  font-family:var(--serif); font-weight:500; font-size:1.7rem; color:var(--text);
  padding:19px 2px; transition:color .3s ease;
  opacity:0; transform:translateY(18px);
}
.mobile__nav > a:hover, .mobile__toggle:hover{ color:var(--gold-light) }
.mobile__group{ display:flex; flex-direction:column }
.mobile__group .mobile__toggle{ border-bottom:1px solid var(--line-soft) }
.mobile__group.open .mobile__toggle{ color:var(--gold-light) }
.mobile__group.open .mobile__toggle .chev{ transform:rotate(180deg) }
.chev{ color:var(--gold); font-size:.9rem; transition:transform .45s var(--ease) }
.mobile__sub{ max-height:0; overflow:hidden; transition:max-height .55s var(--ease) }
.mobile__group.open .mobile__sub{ max-height:560px }
.mobile__sub a{
  display:block; font-family:var(--sans); font-size:1.02rem; color:var(--text-muted);
  padding:13px 2px 13px 18px; border-bottom:1px solid var(--line-soft);
  opacity:1; transform:none; transition:color .3s ease;
}
.mobile__sub a:first-child{ padding-top:18px }
.mobile__sub a:last-child{ border-bottom:0 }
.mobile__sub a:hover{ color:var(--gold-light) }
/* staggered reveal of top-level items */
body.menu-open .mobile__nav > a,
body.menu-open .mobile__group > .mobile__toggle{ opacity:1; transform:none; transition:opacity .5s var(--ease), transform .5s var(--ease), color .3s ease }
body.menu-open .mobile__nav > *:nth-child(1) > .mobile__toggle,
body.menu-open .mobile__nav > *:nth-child(1){ transition-delay:.08s }
body.menu-open .mobile__nav > *:nth-child(2) > .mobile__toggle,
body.menu-open .mobile__nav > *:nth-child(2){ transition-delay:.13s }
body.menu-open .mobile__nav > *:nth-child(3) > .mobile__toggle,
body.menu-open .mobile__nav > *:nth-child(3){ transition-delay:.18s }
body.menu-open .mobile__nav > *:nth-child(4) > .mobile__toggle,
body.menu-open .mobile__nav > *:nth-child(4){ transition-delay:.23s }
body.menu-open .mobile__nav > *:nth-child(5) > .mobile__toggle,
body.menu-open .mobile__nav > *:nth-child(5){ transition-delay:.28s }
.mobile__cta{ margin-top:auto; padding-top:26px; display:flex; flex-direction:column; gap:12px; opacity:0; transition:opacity .5s var(--ease) .3s }
body.menu-open .mobile__cta{ opacity:1 }
.mobile__cta .btn{ width:100%; justify-content:center }

/* ---------- hero ---------- */
.hero{ position:relative; min-height:100dvh; display:flex; align-items:flex-end; overflow:hidden }
.hero__bg{ position:absolute; inset:-12% 0; z-index:0; will-change:transform }
.hero__bg img, .hero__bg video{ width:100%; height:100%; object-fit:cover; filter:saturate(.9) brightness(.62) }
.hero__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top,var(--bg) 2%,rgba(18,18,17,.2) 45%,rgba(18,18,17,.5)) }
.hero__inner{ position:relative; z-index:2; width:100%; padding-bottom:clamp(50px,9vh,110px); padding-top:140px }
.hero h1{ max-width:15ch }
.hero__sub{ max-width:46ch; margin-top:24px; font-size:clamp(1rem,1.4vw,1.2rem); color:var(--text) }
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:38px }
.hero__meta{ display:flex; gap:40px; margin-top:54px; flex-wrap:wrap }
.hero__meta .num{ font-family:var(--serif); font-size:2.4rem; color:var(--gold-light); line-height:1 }
.hero__meta .lbl{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-muted); margin-top:6px }

/* ---------- marquee strip ---------- */
.strip{ border-block:1px solid var(--line); overflow:hidden; background:var(--bg-deep) }
.marquee{ display:flex; gap:60px; padding:22px 0; width:max-content; animation:slide 32s linear infinite }
.marquee span{ font-family:var(--serif); font-size:1.5rem; font-style:italic; color:var(--text-dim); display:inline-flex; align-items:center; gap:60px }
.marquee span::after{ content:"✦"; color:var(--gold); font-style:normal; font-size:.8rem }
@keyframes slide{ to{ transform:translateX(-50%) } }

/* ---------- split feature ---------- */
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,80px); align-items:center }
.split--rev .split__media{ order:2 }
.split__media .core{ aspect-ratio:4/5 }
.split__media img{ width:100%; height:100%; object-fit:cover }
.stack{ display:flex; flex-direction:column; gap:22px }
.feat-list{ list-style:none; display:flex; flex-direction:column; gap:2px; margin-top:8px }
.feat-list li{ display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line-soft); align-items:flex-start }
.feat-list .ic{ color:var(--gold); font-size:.9rem; margin-top:3px }
.feat-list b{ color:var(--text); font-family:var(--sans); font-weight:600; font-size:.98rem }
.feat-list small{ display:block; color:var(--text-muted); font-size:.86rem; margin-top:3px }

/* ---------- carousel ---------- */
.carousel{ position:relative }
.carousel__track{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:14px; scrollbar-width:none; -ms-overflow-style:none }
.carousel__track::-webkit-scrollbar{ display:none }
.carousel__track > *{ scroll-snap-align:start; flex:0 0 clamp(260px,30vw,360px) }
.carousel__nav{ display:flex; gap:10px }
.cbtn{ width:52px; height:52px; border-radius:999px; border:1px solid var(--line); background:rgba(216,197,160,.05); color:var(--text); display:grid; place-items:center; cursor:pointer; transition:background .4s var(--ease), color .4s ease, transform .4s var(--ease) }
.cbtn:hover{ background:var(--gold); color:#211d14 }
.cbtn:active{ transform:scale(.92) }

/* ---------- testimonial ---------- */
.quote{ font-family:var(--serif); font-size:clamp(1.6rem,3vw,2.6rem); line-height:1.3; font-weight:400; color:var(--text) }
.quote .serif-italic{ color:var(--gold-light) }
.tmeta{ display:flex; align-items:center; gap:14px; margin-top:30px }
.tmeta .av{ width:48px; height:48px; border-radius:999px; object-fit:cover; border:1px solid var(--line) }
.tmeta b{ display:block; font-family:var(--sans); font-weight:600; color:var(--text); font-size:.92rem }
.tmeta small{ color:var(--text-muted); font-size:.8rem }
.stars{ color:var(--gold); letter-spacing:.15em; font-size:.85rem; margin-bottom:18px }

/* ---------- pricing ---------- */
.price-group{ border-top:1px solid var(--line) }
.price-row{ display:flex; align-items:baseline; justify-content:space-between; gap:18px; padding:22px 0; border-bottom:1px solid var(--line-soft) }
.price-row__name{ font-family:var(--serif); font-size:1.35rem; color:var(--text) }
.price-row__desc{ font-size:.85rem; color:var(--text-muted); margin-top:3px; max-width:54ch }
.price-row .dots{ flex:1; border-bottom:1px dotted var(--line); transform:translateY(-6px); min-width:30px }
.price-row__val{ font-family:var(--serif); font-size:1.4rem; color:var(--gold-light); white-space:nowrap }

/* ---------- instagram strip ---------- */
.ig-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px }
.ig-grid a{ position:relative; aspect-ratio:1; border-radius:14px; overflow:hidden; border:1px solid var(--line-soft) }
.ig-grid img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease) }
.ig-grid a:hover img{ transform:scale(1.12) }
.ig-grid a::after{ content:""; position:absolute; inset:0; background:rgba(67,71,47,.0); transition:background .4s ease }
.ig-grid a:hover::after{ background:rgba(67,71,47,.35) }

/* ---------- contact form ---------- */
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px }
.field label{ font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold) }
.field input,.field textarea,.field select{
  font-family:var(--sans); font-size:.95rem; color:var(--text); background:rgba(216,197,160,.04);
  border:1px solid var(--line); border-radius:14px; padding:15px 17px; transition:border-color .4s ease, background .4s ease;
}
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--gold); background:rgba(216,197,160,.07) }
.field textarea{ resize:vertical; min-height:130px }

/* info card */
.info-card{ display:flex; flex-direction:column; gap:4px; padding:26px 28px; border-radius:18px; background:var(--bg-elev); border:1px solid var(--line-soft) }
.info-card .k{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold) }
.info-card .v{ font-size:1.05rem; color:var(--text) }

/* ---------- page hero (interior) ---------- */
.phero{ padding-top:170px; padding-bottom:clamp(40px,6vh,80px); position:relative; overflow:hidden }
.phero .eyebrow{ margin-bottom:22px }
.phero h1{ max-width:18ch }
.phero p{ margin-top:20px; max-width:54ch }
.crumbs{ display:flex; gap:10px; font-size:.78rem; color:var(--text-dim); margin-bottom:26px; letter-spacing:.04em }
.crumbs a:hover{ color:var(--gold-light) }
.crumbs span{ color:var(--gold) }

/* ---------- footer ---------- */
.footer{ background:var(--bg-deep); border-top:1px solid var(--line); padding-top:clamp(70px,9vh,120px) }
.footer__top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:60px; border-bottom:1px solid var(--line-soft) }
.footer__brand img{ height:66px; margin-bottom:22px }
.footer__brand p{ font-size:.9rem; max-width:34ch }
.fcol h4{ font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:18px }
.fcol a, .fcol p{ display:block; font-size:.9rem; color:var(--text-muted); padding:5px 0; transition:color .35s ease; max-width:none }
.fcol a:hover{ color:var(--gold-light) }
.footer__bottom{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:30px 0 44px; flex-wrap:wrap }
.footer__bottom small{ color:var(--text-dim); font-size:.8rem }
.socials{ display:flex; gap:10px }
.socials a{ width:42px; height:42px; border-radius:999px; border:1px solid var(--line); display:grid; place-items:center; color:var(--text-muted); transition:all .4s var(--ease) }
.socials a:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-3px) }

/* big CTA band */
.cta-band{ position:relative; overflow:hidden; border-radius:32px; padding:clamp(50px,8vw,90px); text-align:center; background:linear-gradient(150deg,var(--olive-deep),#2f3322 60%,var(--bg-elev)) }
.cta-band::before{ content:""; position:absolute; inset:0; background:radial-gradient(600px 300px at 70% 0%,rgba(194,163,107,.22),transparent 70%) }
.cta-band > *{ position:relative; z-index:1 }

/* ---------- scroll reveal ---------- */
[data-reveal]{ opacity:0; transform:translateY(40px); filter:blur(6px); transition:opacity .9s var(--ease-soft), transform .9s var(--ease-soft), filter .9s var(--ease-soft) }
[data-reveal].in{ opacity:1; transform:none; filter:none }
[data-reveal][data-d="1"]{ transition-delay:.08s } [data-reveal][data-d="2"]{ transition-delay:.16s }
[data-reveal][data-d="3"]{ transition-delay:.24s } [data-reveal][data-d="4"]{ transition-delay:.32s }
[data-reveal][data-d="5"]{ transition-delay:.4s }

/* prose for legal */
.prose{ max-width:760px }
.prose h2{ font-size:1.8rem; margin:48px 0 16px } .prose h3{ font-size:1.3rem; margin:34px 0 12px; color:var(--gold-light) }
.prose p{ margin-bottom:16px; color:var(--text-muted); max-width:none }
.prose ul{ margin:0 0 20px 0; padding-left:20px } .prose li{ color:var(--text-muted); padding:5px 0 }
.prose li::marker{ color:var(--gold) }
.toc{ position:sticky; top:120px; display:flex; flex-direction:column; gap:6px }
.toc a{ font-size:.86rem; color:var(--text-muted); padding:7px 0; border-left:1px solid var(--line); padding-left:16px; transition:all .3s ease }
.toc a:hover, .toc a.active{ color:var(--gold-light); border-color:var(--gold) }

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .footer__top{ grid-template-columns:1fr 1fr }
  .ig-grid{ grid-template-columns:repeat(4,1fr) }
}
@media (max-width:880px){
  .nav__menu{ display:none } .nav__cta .btn--ghost{ display:none } .nav__burger{ display:block }
  .split{ grid-template-columns:1fr } .split--rev .split__media{ order:0 }
  .cols-3,.cols-4{ grid-template-columns:1fr 1fr }
  .hero__meta{ gap:26px }
}
@media (max-width:560px){
  .cols-2,.cols-3,.cols-4{ grid-template-columns:1fr }
  .ig-grid{ grid-template-columns:repeat(3,1fr) }
  .footer__top{ grid-template-columns:1fr } .nav__inner{ padding-left:16px }
  .hero__meta .num{ font-size:2rem }
  .price-row{ flex-wrap:wrap } .price-row .dots{ display:none }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important }
  [data-reveal]{ opacity:1; transform:none; filter:none }
}

/* ============================================================
   ARCHON-INSPIRED COMPONENTS (v2)
   ============================================================ */

.bg-olive-section{ background:var(--olive-section) }

/* ---- editorial two-up (It matters to you / us) ---- */
.editorial{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,90px); align-items:start }
.editorial h2{ font-size:clamp(2rem,3.4vw,3rem); max-width:14ch }
.editorial .ed-body p + p{ margin-top:18px }

/* ---- ARCHED CARDS (signature) ---- */
.arch-rail{ display:flex; align-items:flex-start; gap:clamp(16px,1.6vw,24px); overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; padding:18px 0 22px; scrollbar-width:none }
.arch-rail::-webkit-scrollbar{ display:none }
/* full-bleed rail: first card aligns with content/logo left edge, cards run off the right edge */
.rail-full{
  padding-left:max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  padding-right:var(--gutter);
  scroll-padding-left:max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
}
/* liquid morph on hover — the arch INVERTS vertically: the dome flows from
   the top to the bottom (arch-up -> arch-down) and STICKS while hovered,
   then flows back on leave. Springy easing gives the fluid, gooey motion. */
.acard{
  position:relative; flex:0 0 clamp(230px,23vw,300px); scroll-snap-align:start;
  aspect-ratio:3/4.3; overflow:hidden;
  border-radius:50% 50% 14% 14% / 62% 62% 12% 12%;
  border:1px solid var(--line-soft); cursor:pointer;
  transition:border-radius 1.1s cubic-bezier(.34,1.28,.44,1), transform .8s var(--ease), border-color .8s var(--ease), box-shadow .8s var(--ease);
  will-change:border-radius, transform;
}
.acard:hover{
  transform:translateY(-8px); border-color:var(--line);
  box-shadow:0 50px 90px -50px rgba(0,0,0,.85);
  border-radius:14% 14% 50% 50% / 12% 12% 62% 62%;
}
.acard img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); transform:scale(1.04) }
.acard:hover img{ transform:scale(1.12) }
.acard::after{ content:""; position:absolute; inset:0; background:radial-gradient(135% 78% at 50% 50%, rgba(15,14,8,.62), rgba(15,14,8,.16) 72%) }
.acard__cap{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:0 22px; text-align:center }
.acard__cap h3{ font-size:clamp(1.15rem,1.5vw,1.5rem); line-height:1.12; color:var(--cream) }
.acard__cap .pr{ display:block; margin-top:8px; font-family:var(--sans); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-light) }

/* arched cards in a grid (hub pages) */
.arch-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:clamp(16px,2vw,26px) }
.arch-grid .acard{ flex:none; width:auto; aspect-ratio:3/4 }
@media (max-width:560px){ .arch-grid{ grid-template-columns:1fr 1fr } }

/* ---- CIRCULAR CONCERN PILLS ---- */
.concerns{ display:flex; gap:clamp(18px,2.4vw,40px); overflow-x:auto; scrollbar-width:none; padding-bottom:8px }
.concerns::-webkit-scrollbar{ display:none }
.concern{ flex:0 0 auto; text-align:center; cursor:pointer }
.concern__img{ width:clamp(96px,10vw,140px); height:clamp(96px,10vw,140px); border-radius:999px; overflow:hidden; border:1px solid var(--line); margin:0 auto; position:relative }
.concern__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease) }
.concern:hover .concern__img img{ transform:scale(1.14) }
.concern__img::after{ content:""; position:absolute; inset:0; border-radius:999px; box-shadow:inset 0 0 0 0 var(--gold); transition:box-shadow .5s var(--ease) }
.concern:hover .concern__img::after{ box-shadow:inset 0 0 0 2px var(--gold) }
.concern span{ display:block; margin-top:14px; font-size:.84rem; letter-spacing:.08em; color:var(--text-muted); transition:color .4s ease }
.concern:hover span{ color:var(--gold-light) }

/* ---- FULL-WIDTH IMAGE BAND (Take a moment...) ---- */
.band{ position:relative; min-height:62vh; display:grid; place-items:center; text-align:center; overflow:hidden }
.band__bg{ position:absolute; inset:-12% 0; z-index:0; will-change:transform }
.band__bg img{ width:100%; height:100%; object-fit:cover; filter:brightness(.5) saturate(.9) }
.band__bg::after{ content:""; position:absolute; inset:0; background:radial-gradient(80% 80% at 50% 50%,rgba(15,14,8,.35),rgba(15,14,8,.72)) }
.band__inner{ position:relative; z-index:2; padding:clamp(60px,10vh,120px) var(--gutter); max-width:760px }
.band h2{ font-size:clamp(2.4rem,5vw,4rem); color:var(--cream) }

/* ---- FAQ ACCORDION (JS-driven) ---- */
.acc{ border-top:1px solid var(--line) }
.acc__item{ border-bottom:1px solid var(--line-soft) }
.acc__head{ width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:24px 0; display:flex; align-items:center; justify-content:space-between; gap:20px; font-family:var(--serif); font-size:clamp(1.15rem,1.8vw,1.5rem); color:var(--text); transition:color .4s ease }
.acc__head:hover{ color:var(--gold-light) }
.acc__head .ic{ flex:0 0 auto; width:34px; height:34px; border-radius:999px; border:1px solid var(--line); display:grid; place-items:center; color:var(--gold); font-size:1.1rem; transition:transform .5s var(--ease), background .5s var(--ease), color .5s var(--ease) }
.acc__item.open .acc__head .ic{ transform:rotate(45deg); background:var(--gold); color:#211d12 }
.acc__item.open .acc__head{ color:var(--gold-light) }
.acc__body{ overflow:hidden; max-height:0; transition:max-height .55s var(--ease) }
.acc__body p{ padding:0 0 26px; color:var(--text-muted); max-width:70ch }

/* ---- testimonial dots ---- */
.dots{ display:flex; gap:9px; justify-content:center; margin-top:34px }
.dots i{ width:8px; height:8px; border-radius:999px; background:var(--line); transition:all .5s var(--ease) }
.dots i.on{ width:26px; background:var(--gold) }

/* ---- newsletter offer bar ---- */
.news{ display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center; padding:clamp(40px,6vw,68px); border-radius:28px; background:var(--olive-section); border:1px solid var(--line) }
.news form{ display:flex; gap:10px }
.news input{ flex:1; font-family:var(--sans); font-size:.95rem; color:var(--text); background:rgba(244,241,234,.05); border:1px solid var(--line); border-radius:999px; padding:15px 20px }
.news input:focus{ outline:none; border-color:var(--gold) }

@media (max-width:880px){
  .editorial{ grid-template-columns:1fr; gap:18px }
  .news{ grid-template-columns:1fr; gap:24px }
  .band{ min-height:54vh }
}