/* ═══════════════════════════════════════════════
   Avant Cosmetic Clinic
   ═══════════════════════════════════════════════ */

:root{
  --gold:#cfbb78;
  --bronze:#a8907b;
  --dark:#3b3a3a;
  --body:#5e5e5e;
  --black:#161616;
  --ink:#0d0d0c;
  --grey:#f6f6f6;
  --offwhite:#f7f5f5;
  --white:#fff;

  --head:'League Spartan', arial, helvetica, sans-serif;
  --text:Helvetica, Arial, sans-serif;

  --container:1200px;
  --gutter:66px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:150px;-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--text);
  font-size:18px;
  line-height:1.5;
  color:var(--body);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block;border:0}
a{color:inherit}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ── Headings ────────────────────────────────── */
/* The "dark" headings (Welcome to / Our Philosophy / Our Inspiration) are set
   in the body face, not League Spartan — matched to the source design. */
.h-dark{
  font-family:var(--text);
  font-weight:400;
  font-size:38px;
  line-height:1.25;
  color:var(--dark);
  margin:0 0 .3em;
}
.h-gold,.h-bronze{
  font-family:var(--head);
  font-weight:700;
  line-height:1.2;
  margin:0 0 .35em;
}
.h-gold{color:var(--gold);font-size:36px}
.h-bronze{color:var(--bronze);font-size:44px}

.section__title{text-align:center}

.rule{
  display:block;width:64px;height:1px;
  background:#d6d0ca;margin:22px auto 56px;
}
.rule--left{margin:22px 0 34px}

/* ── Sections ────────────────────────────────── */
.section{padding:52px 0}
.section--white{background:var(--white)}
.section--grey{background:var(--grey)}
.section--offwhite{background:var(--offwhite)}

/* ── Buttons ─────────────────────────────────── */
.btn{
  display:inline-block;
  font-family:var(--head);
  font-size:14px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:1.3;
  text-align:center;
  text-decoration:none;
  padding:16px 30px;
  border:1px solid transparent;
  border-radius:0;
  cursor:pointer;
  transition:opacity .2s ease, background .2s ease, color .2s ease;
}
.btn:hover{opacity:.82}
.btn--white{background:var(--white);color:var(--ink)}
.btn--dark{background:var(--black);color:var(--white)}

/* ═══ Announcement bar ═══════════════════════ */
.announce{background:var(--black);color:var(--white)}
.announce p{
  margin:0;
  padding:6px 20px;
  text-align:center;
  font-family:var(--text);
  font-size:14px;
  font-weight:700;
  line-height:1.4;
}

/* ═══ Header ════════════════════════════════ */
.header{
  position:sticky;top:0;z-index:50;
  background:var(--white);
  transition:box-shadow .25s ease;
}
.header.is-stuck{box-shadow:0 1px 14px rgba(0,0,0,.09)}

.header__inner{
  max-width:1320px;margin:0 auto;
  padding:14px 48px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:20px;
}

.logo img{width:230px;height:auto;margin:0 auto}

.nav{display:flex;align-items:center;gap:30px}
.nav--left{justify-self:start}
.nav--right{justify-self:end}

.nav__link{
  font-family:var(--head);
  font-size:14px;
  font-weight:500;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#8d8d90;
  text-decoration:none;
  background:none;border:0;padding:0;
  cursor:pointer;
  white-space:nowrap;
  transition:color .2s ease;
}
.nav__link:hover,.nav__link:focus-visible{color:var(--ink)}
.nav__link.is-active{color:var(--ink);font-weight:700}

/* More dropdown */
.nav__more{position:relative}
.nav__more-btn{display:inline-flex;align-items:center;gap:7px}
.caret{width:9px;height:6px;flex:none;transition:transform .2s ease}
.nav__more-btn[aria-expanded="true"] .caret{transform:rotate(180deg)}

.nav__dropdown{
  position:absolute;top:calc(100% + 18px);right:0;
  min-width:210px;
  background:var(--white);
  box-shadow:0 3px 18px rgba(0,0,0,.14);
  padding:8px 0;
  display:none;
  flex-direction:column;
}
.nav__dropdown.is-open{display:flex}
.nav__dropdown .nav__link{padding:12px 22px;text-align:left}
.nav__dropdown .nav__link:hover{background:var(--grey)}

/* Hamburger */
.hamburger{
  display:none;
  flex-direction:column;justify-content:center;gap:5px;
  width:34px;height:34px;
  background:none;border:0;padding:0;cursor:pointer;
}
.hamburger span{display:block;height:2px;width:24px;background:var(--ink);transition:transform .25s ease,opacity .2s ease}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-nav{
  display:none;
  flex-direction:column;
  border-top:1px solid #ececec;
  background:var(--white);
}
.mobile-nav.is-open{display:flex}
.mobile-nav__link{
  font-family:var(--head);
  font-size:15px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dark);text-decoration:none;
  padding:16px 28px;
  border-bottom:1px solid #f0f0f0;
}
.mobile-nav__link:hover{background:var(--grey)}

/* ═══ Hero ══════════════════════════════════ */
.hero{
  min-height:900px;
  display:flex;
  background-image:linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.25)), url('../img/hero.jpg');
  background-size:cover;
  /* full uncropped frame; biased upward so the face stays in shot when wide
     viewports crop vertically */
  background-position:center 28%;
}
/* The hero content block sits bottom-right and uses a tighter gutter than the
   page container, so its right edge runs closer to the viewport edge. */
.hero__inner{
  width:100%;max-width:1440px;
  margin:0 auto;padding:0 30px 70px;
  display:flex;align-items:flex-end;
}
.hero__content{
  margin-left:auto;
  width:100%;max-width:600px;
  text-align:center;
  color:var(--white);
}
.hero__title{
  font-family:var(--head);
  font-weight:700;
  font-size:44px;
  line-height:1.115;
  margin:0 0 20px;
  color:var(--white);
}
.hero__phone{
  display:block;
  font-family:var(--head);
  font-size:22px;font-weight:500;
  color:var(--white);
  text-decoration:underline;
  text-underline-offset:4px;
  margin-bottom:32px;
}
.hero__phone:hover{opacity:.85}

/* ═══ Split (Welcome / About) ═══════════════ */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}
.split--center{align-items:center}
.split--reverse .split__media{order:2}
.split--reverse .split__body{order:1}

.welcome{padding:104px 0}
.about{padding:96px 0}
.about .split + .split{margin-top:96px}
.treatments{padding:40px 0}
.facials{padding:60px 0}
.gallery{padding:82px 0}

.split__media img{width:100%;object-fit:cover}
/* About photos are cropped 2:1 by the source design; the Welcome photo is not. */
.about .split__media img{aspect-ratio:2/1}
.split__body p{margin:0 0 1em;font-size:22px;line-height:1.6}
.split__body p:last-child{margin-bottom:0}
.split__body--centered{text-align:center}
.split__body .h-dark{margin-bottom:.5em}
.split__body .h-gold{margin-bottom:.7em}

/* ═══ Treatments ════════════════════════════ */
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:48px;
}
.card__img{width:100%;margin-bottom:20px}
.card__body{text-align:center}
.card__body p{margin:0 0 1.1em;font-size:18px;line-height:1.5}
.card__body p:last-child{margin-bottom:0}
.card__body--italic p{font-style:italic}
.card__body strong{color:var(--dark);font-weight:700}
.card__body ul{
  margin:0 0 1.1em;padding:0 0 0 20px;
  text-align:left;font-size:18px;line-height:1.5;
}
.card__body li{margin-bottom:.9em}

/* The facials strip is set one step smaller than the treatments grid above it. */
.facials .card__body p,
.facials .card__body ul{font-size:16px}

/* ═══ Gallery ═══════════════════════════════ */
/* Full before/after frame, uncropped — both halves visible end to end. */
.gallery__figure{margin:0;display:flex;justify-content:center}
.gallery__figure img{
  width:100%;max-width:900px;
  height:auto;
}

/* ═══ Contact ═══════════════════════════════ */
.contact__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:stretch;
  min-height:640px;
}
.contact__info{
  padding:80px 60px 80px max(30px, calc((100vw - var(--container)) / 2 + 30px));
  align-self:center;
}
.contact__info .h-bronze{text-align:left;margin-bottom:0}

.contact__name{
  font-family:var(--text);
  font-size:24px;font-weight:400;color:var(--dark);
  margin:0 0 18px;
}
.contact__addr,.contact__tel{margin:0 0 18px;font-size:16px}
.contact__tel a{text-decoration:none}
.contact__tel a:hover{text-decoration:underline}

.contact__hours-title{
  font-family:var(--text);
  font-size:24px;font-weight:400;color:var(--dark);
  margin:30px 0 14px;
}

.hours__toggle{
  display:inline-flex;align-items:center;gap:8px;
  background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--text);font-size:15px;color:var(--body);
  margin-bottom:18px;
}
.hours__open{color:var(--dark)}
.hours__toggle .caret{transition:transform .25s ease}
.hours__toggle[aria-expanded="false"] .caret{transform:rotate(-90deg)}

.hours{border-collapse:collapse;margin:0 0 32px;font-size:15px}
.hours[hidden]{display:none}
.hours th{
  font-weight:400;text-align:left;color:var(--body);
  padding:2px 24px 2px 0;white-space:nowrap;
}
.hours td{padding:2px 0;color:var(--body)}

.contact__map{position:relative;min-height:520px}
.contact__map iframe{
  position:absolute;inset:0;
  width:100%;height:100%;border:0;
}
.map__directions{
  position:absolute;top:16px;left:50%;transform:translateX(-50%);
  z-index:2;
  display:inline-flex;align-items:center;gap:8px;
  background:var(--black);color:var(--white);
  font-family:var(--head);font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  padding:11px 20px;border-radius:999px;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.map__directions:hover{background:#2c2c2c}
.map__directions svg{width:15px;height:15px}

/* ═══ Connect ═══════════════════════════════ */
.connect{padding:48px 0}
.connect .section__title{
  font-family:var(--head);font-weight:700;font-size:44px;
  color:var(--ink);margin-bottom:44px;
}
.socials{
  list-style:none;margin:0;padding:0;
  display:flex;justify-content:space-between;align-items:center;
  gap:30px;flex-wrap:wrap;
}
.socials img{width:86px;height:auto}
.socials li:last-child img{width:100px}
.socials a{display:block;transition:transform .2s ease}
.socials a:hover{transform:translateY(-3px)}

/* ═══ Reviews ═══════════════════════════════ */
.reviews{
  background-image:linear-gradient(rgba(0,0,0,.24),rgba(0,0,0,.24)), url('../img/reviews-bg.png');
  background-size:cover;
  background-position:center;
  padding:58px 0 60px;
  color:var(--white);
  text-align:center;
}
/* The marble artwork carries the brandmark, so the review card sits well below
   the title to keep it clear. */
.reviews__title{
  font-family:var(--head);font-weight:700;font-size:44px;
  color:var(--white);margin:0 0 330px;
}
.review{
  max-width:480px;margin:0 auto;
  background:rgba(255,255,255,.94);
  color:var(--body);
  padding:20px 26px;
}
.review__score{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:4px}
.review__num{font-family:var(--head);font-size:26px;font-weight:700;color:var(--dark)}
.stars{color:var(--gold);font-size:18px;letter-spacing:2px}
.review__biz{font-family:var(--head);font-size:18px;font-weight:600;color:var(--dark);margin:0 0 2px}
.review__count{font-size:13px;margin:0 0 12px}
.review__quote{
  margin:0 0 8px;padding:0;
  font-size:15px;font-style:italic;
}
.review__author{font-size:13px;font-style:normal;color:#8a8a8a}

/* ═══ Partners ══════════════════════════════ */
.partners{padding:52px 0 62px}
.partners__title{
  font-family:var(--text);font-size:30px;font-weight:400;
  margin-bottom:38px;
}
/* Two rows, each justified across the container. The source design renders
   the first row noticeably larger than the second — matched here. */
.partners__row{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;
  justify-content:space-between;align-items:center;
  gap:26px 40px;
}
.partners__row + .partners__row{margin-top:34px}
.partners__row img{width:auto;object-fit:contain}
.partners__row--1 img{height:77px}
.partners__row--2 img{height:56px}

/* ═══ Subscribe ═════════════════════════════ */
.subscribe{
  background-image:linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.18)), url('../img/subscribe-bg.jpg');
  background-size:cover;
  background-position:center;
  padding:42px 0;
  text-align:center;
  color:var(--white);
}
.subscribe__title{
  font-family:var(--head);font-weight:700;font-size:44px;
  color:var(--white);margin:0 0 14px;
}
.subscribe__text{
  margin:0 auto 28px;max-width:620px;
  font-size:15px;
  text-shadow:0 1px 3px rgba(0,0,0,.35);
}
.subscribe__form{
  display:flex;justify-content:center;
  max-width:603px;margin:0 auto;
}
.subscribe__form input{
  flex:1;min-width:0;
  font-family:var(--text);font-size:15px;
  padding:15px 18px;
  border:1px solid rgba(255,255,255,.85);
  background:rgba(255,255,255,.12);
  color:var(--white);
}
.subscribe__form input::placeholder{color:rgba(255,255,255,.9)}
.subscribe__form input:focus{outline:2px solid var(--white);outline-offset:-1px}
.subscribe__form .btn{flex:none;padding:15px 34px}

.form__msg{margin:14px 0 0;font-size:14px;min-height:1.2em}
.form__msg.is-ok{color:#2e7d32}
.form__msg.is-err{color:#c62828}
.subscribe .form__msg.is-ok{color:#d8f5da}
.subscribe .form__msg.is-err{color:#ffd6d6}

/* ═══ Footer ════════════════════════════════ */
.footer{background:var(--black);color:#b8b8b8;padding:56px 20px}
.footer p{margin:0;text-align:center;font-size:14px}

/* disabled state for the subscribe button while it is submitting */
.btn[disabled]{opacity:.55;cursor:progress}

/* ═══ Cookie banner ═════════════════════════ */
.cookies{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:var(--white);
  box-shadow:0 -2px 18px rgba(0,0,0,.16);
}
.cookies[hidden]{display:none}
.cookies__inner{
  max-width:1240px;margin:0 auto;
  padding:22px 30px;
  display:flex;align-items:center;gap:30px;
}
.cookies h3{
  font-family:var(--head);font-size:19px;font-weight:700;
  color:var(--dark);margin:0 0 5px;
}
.cookies p{margin:0;font-size:14px;line-height:1.6}
.cookies .btn{flex:none}

/* ═══════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════ */
@media (max-width:1023px){
  :root{--gutter:40px}
  .header__inner{
    grid-template-columns:auto 1fr auto;
    padding:16px 24px;
  }
  .hamburger{display:flex}
  .nav--left,.nav--right{display:none}
  .logo img{width:190px}
  .logo{justify-self:center}

  .hero{min-height:620px}
  .hero__content{margin:0 auto;max-width:100%}
  .hero__title{font-size:36px}

  .split{grid-template-columns:1fr;gap:32px}
  .split--reverse .split__media,
  .split--reverse .split__body{order:initial}
  .split__body{text-align:center}

  .cards{grid-template-columns:repeat(2,1fr);gap:44px 32px}

  .contact__grid{grid-template-columns:1fr;min-height:0}
  .contact__info{padding:60px 30px}
  .contact__map{min-height:420px}

  .socials{gap:44px}
  .reviews__title{margin-bottom:340px}
}

@media (max-width:640px){
  :root{--gutter:22px}
  .h-bronze{font-size:32px}
  .h-dark{font-size:30px}
  .h-gold{font-size:26px}

  .section{padding:52px 0}
  .hero{min-height:520px}
  .hero__title{font-size:29px}
  .hero__inner{padding-bottom:44px}

  .cards{grid-template-columns:1fr;gap:44px}

  .connect .section__title,
  .reviews__title,
  .subscribe__title{font-size:32px}
  .reviews__title{margin-bottom:250px}

  .socials{gap:30px}
  .socials img{width:62px}
  .socials li:last-child img{width:72px}

  .partners__row{justify-content:center;gap:22px 30px}
  .partners__row--1 img{height:48px}
  .partners__row--2 img{height:34px}

  .subscribe__form{flex-direction:column;gap:12px}
  .subscribe__form .btn{padding:15px}

  .cookies__inner{flex-direction:column;align-items:stretch;gap:18px;padding:20px}
}

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