/* ───────── fonts ───────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500&display=swap');

/* ───────── tokens ───────── */
#sg-chooser{
  --ink:#1d1714;
  --ink-soft:#2a221d;
  --cream:#f6efe6;
  --sand:#e7dccd;
  --gold:#c2a06a;
  --gold-soft:#d8c19a;
  --spa:#BDA485;      /* SG Aesthetics button */
  --surg:#12836D;     /* Plastic Surgery button */
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Jost', system-ui, sans-serif;
}

/* ───────── shell ───────── */
#sg-chooser.sgc{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);-webkit-font-smoothing:antialiased;padding:clamp(14px,3vw,40px);box-sizing:border-box;}
#sg-chooser.sgc[hidden]{display:none;}
#sg-chooser *{box-sizing:border-box;}
.sgc__veil{position:absolute;inset:0;background:rgba(20,15,12,.72);backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);animation:sgc-veil .5s ease both;}
@keyframes sgc-veil{from{opacity:0}to{opacity:1}}

/* ───────── card ───────── */
.sgc__card{position:relative;width:min(1080px,100%);max-height:94vh;overflow:auto;
  background:var(--ink);border:1px solid rgba(194,160,106,.28);border-radius:6px;
  padding:clamp(26px,4vw,48px) clamp(20px,4vw,52px) clamp(22px,3vw,40px);
  box-shadow:0 40px 120px -30px rgba(0,0,0,.8);
  animation:sgc-rise .6s cubic-bezier(.2,.7,.2,1) both;}
@keyframes sgc-rise{from{opacity:0;transform:translateY(26px) scale(.98)}to{opacity:1;transform:none}}

.sgc__close{position:absolute;top:14px;right:14px;width:40px;height:40px;display:grid;place-items:center;
  background:transparent;border:1px solid rgba(255,255,255,.18);border-radius:50%;color:var(--sand);
  cursor:pointer;transition:.25s;z-index:5;}
.sgc__close:hover{border-color:var(--gold);color:var(--gold);transform:rotate(90deg);}

/* ───────── heading ───────── */
.sgc__head{text-align:center;margin-bottom:clamp(20px,3vw,30px);}
.sgc__eyebrow{display:inline-block;font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold);font-weight:400;}
.sgc__eyebrow::before,.sgc__eyebrow::after{content:"";display:inline-block;width:26px;height:1px;
  background:var(--gold);vertical-align:middle;margin:0 12px;opacity:.6;}
.sgc__title{font-family:var(--serif);font-weight:500;color:var(--cream);
  font-size:clamp(28px,4.6vw,46px);line-height:1.05;margin:.5rem 0 .35rem;letter-spacing:.01em;}
.sgc__sub{color:rgba(231,220,205,.7);font-weight:300;font-size:clamp(13px,1.5vw,15px);margin:0;letter-spacing:.02em;}

/* ───────── panels ───────── */
.sgc__panels{display:flex;gap:14px;align-items:stretch;}

.sgc__panel{position:relative;flex:1 1 0;min-height:clamp(300px,42vh,420px);
  display:flex;overflow:hidden;border-radius:4px;text-decoration:none;isolation:isolate;
  border:1px solid rgba(255,255,255,.08);
  transition:flex-grow .55s cubic-bezier(.2,.7,.2,1);}
.sgc__bg{position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1.06);transition:transform .7s cubic-bezier(.2,.7,.2,1);}
.sgc__panel--spa  .sgc__bg{background-image:url('https://sgaestheticsandwellness.com/wp-content/uploads/2026/02/Consultation-scaled.jpg');}
.sgc__panel--surg .sgc__bg{background-image:url('https://www.sweetgrassplasticsurgery.com/wp-content/uploads/2026/01/big-untitled-9124-2.jpg');}
.sgc__shade{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,15,12,.25) 0%,rgba(20,15,12,.55) 45%,rgba(20,15,12,.92) 100%);
  transition:background .5s;}

.sgc__content{position:relative;z-index:2;margin-top:auto;width:100%;
  padding:clamp(20px,2.4vw,30px);color:var(--cream);display:flex;flex-direction:column;gap:11px;
  transform:translateY(8px);transition:transform .5s;}
.sgc__kicker{font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-soft);}
.sgc__brand{font-family:var(--serif);font-weight:600;font-size:clamp(25px,3.2vw,34px);line-height:1;
  display:flex;flex-direction:column;}
.sgc__brand em{font-style:italic;font-weight:400;font-size:.62em;opacity:.92;margin-top:5px;letter-spacing:.01em;}
.sgc__desc{font-weight:300;font-size:13.5px;line-height:1.55;color:rgba(246,239,230,.86);max-width:38ch;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .5s,opacity .45s,margin .5s;}
.sgc__tags{list-style:none;display:flex;flex-wrap:wrap;gap:7px;padding:0;margin:0;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .5s,opacity .45s,margin .5s;}
.sgc__tags li{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--sand);
  border:1px solid rgba(216,193,154,.4);border-radius:40px;padding:5px 11px;}
.sgc__cta{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:3px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  padding:11px 20px;border-radius:40px;transition:.35s;}
.sgc__cta svg{transition:transform .35s;}

/* brand button colours */
.sgc__panel--spa  .sgc__cta{background:var(--spa); color:#1d1714;}
.sgc__panel--surg .sgc__cta{background:var(--surg);color:#f6efe6;}
.sgc__panel--spa{border-top:2px solid var(--spa);}
.sgc__panel--surg{border-top:2px solid var(--surg);}

/* hover / focus reveal + split-screen grow */
.sgc__panel:hover,.sgc__panel:focus-visible{flex-grow:1.7;outline:none;}
.sgc__panel:hover .sgc__bg{transform:scale(1);}
.sgc__panel:hover .sgc__shade{
  background:linear-gradient(180deg,rgba(20,15,12,.15) 0%,rgba(20,15,12,.45) 40%,rgba(20,15,12,.93) 100%);}
.sgc__panel:hover .sgc__content,.sgc__panel:focus-visible .sgc__content{transform:translateY(0);}
.sgc__panel:hover .sgc__desc,.sgc__panel:hover .sgc__tags,
.sgc__panel:focus-visible .sgc__desc,.sgc__panel:focus-visible .sgc__tags{max-height:120px;opacity:1;}
.sgc__panel:hover .sgc__cta{filter:brightness(1.07);}
.sgc__panel:hover .sgc__cta svg{transform:translateX(4px);}

/* skip link */
.sgc__skip{display:block;margin:clamp(18px,2.5vw,26px) auto 0;background:none;border:none;cursor:pointer;
  color:rgba(231,220,205,.55);font-family:var(--sans);font-size:12px;letter-spacing:.06em;
  border-bottom:1px solid transparent;padding:2px 0;transition:.25s;}
.sgc__skip:hover{color:var(--gold);border-bottom-color:var(--gold);}

/* ───────── mobile ───────── */
@media (max-width:720px){
  .sgc__panels{flex-direction:column;gap:12px;}
  .sgc__panel{min-height:200px;flex:none;}
  .sgc__panel:hover,.sgc__panel:focus-visible{flex-grow:0;}
  .sgc__content{transform:none;}
  .sgc__desc,.sgc__tags{max-height:120px;opacity:1;}
  .sgc__panel .sgc__bg{transform:scale(1);}
}
@media (prefers-reduced-motion:reduce){
  #sg-chooser *{animation:none!important;transition:none!important;}
}