/* =========================================================
   SOULSIS COLLECTIVE
   Brow & lash artistry — Vitality House, West Leederville
   ---------------------------------------------------------
   Edit colours, type and rhythm from the tokens below.
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Surfaces */
  --paper:      #FFFFFF;   /* base white                     */
  --bone:       #F6F4F1;   /* soft warm light grey            */
  --stone:      #E5E0DA;   /* hairline rules, borders         */
  --carbon:     #171717;   /* dark sections + footer          */

  /* Ink */
  --ink:        #2A2A2A;   /* body copy                       */
  --ash:        #6E6A66;   /* secondary copy — 5.3:1 on white */
  --chalk:      #F2EFEB;   /* copy on dark                    */
  --chalk-dim:  #A9A39C;   /* secondary copy on dark          */

  /* Accent — taken from the Soulsis logo mark */
  --accent:       #E8066B; /* rules, marks, large type (3:1+) */
  --accent-ink:   #C2005A; /* small text on light — 6.1:1     */
  --accent-light: #FF4D93; /* small text on dark  — 5.6:1     */

  /* Type */
  --display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --sans:    "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Rhythm */
  --gutter:  clamp(1.25rem, 5vw, 5.5rem);
  --section: clamp(5.5rem, 13vw, 12.5rem);
  --measure: 34ch;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --slow: .9s;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(1rem, .95rem + .2vw, 1.0625rem);
  line-height:1.75;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
figure{ margin:0; }
ul{ list-style:none; margin:0; padding:0; }
address{ font-style:normal; }
h1,h2,h3{ margin:0; font-weight:300; }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

a{ color:inherit; }
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:1px;
}
.skip-link{
  position:absolute; left:0; top:-100px; z-index:200;
  background:var(--carbon); color:var(--chalk);
  padding:.85rem 1.4rem; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; transition:top .2s var(--ease);
}
.skip-link:focus{ top:0; }

/* ---------- 3. SHARED TYPE ---------- */
.eyebrow{
  font-size:.6875rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ash);
  margin:0 0 1.6rem;
  font-weight:400;
}
.eyebrow--light{ color:var(--chalk-dim); }

.section-h{
  font-family:var(--display);
  font-size:clamp(2.5rem, 6vw, 4.75rem);
  line-height:1.02;
  letter-spacing:-.015em;
  margin:0 0 1.9rem;
}
.section-h--light{ color:var(--chalk); }

/* ---------- 4. BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px;
  padding:.95rem 2.1rem;
  font-family:var(--sans);
  font-size:.75rem; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none;
  transition:background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.btn--solid{
  background:var(--carbon); color:var(--chalk);
  border:1px solid var(--carbon);
}
.btn--solid:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn--quiet{
  background:transparent; color:var(--ink);
  border:1px solid var(--stone);
}
.btn--quiet:hover{ border-color:var(--ink); }
.btn--wide{ min-width:min(340px, 100%); }

/* ---------- 5. HEADER / NAV ---------- */
.site-head{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:transparent;
  transition:background .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.site-head.is-stuck{
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom-color:var(--stone);
}
.site-head__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
  padding:1.35rem var(--gutter);
  transition:padding .5s var(--ease);
}
.site-head.is-stuck .site-head__inner{ padding-block:.95rem; }

.brand{
  display:inline-flex; align-items:center; line-height:0; flex:0 0 auto;
  min-height:44px; padding-block:.35rem;
}
.brand__mark{ width:clamp(132px, 15vw, 190px); height:auto; }

.nav{ display:flex; align-items:center; gap:clamp(1.5rem,3vw,3rem); }
.nav__list{ display:flex; gap:clamp(1.4rem,2.6vw,2.6rem); }
.nav__list a{
  position:relative;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:var(--ink);
  display:inline-flex; align-items:center;
  min-height:44px;               /* comfortable tap target at every size */
}
.nav__list a::after{
  content:""; position:absolute; left:0; right:0; bottom:11px;
  height:1px; background:var(--accent);
  transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.nav__list a:hover::after,
.nav__list a:focus-visible::after{ transform:scaleX(1); transform-origin:left; }

.nav__book{
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; color:var(--ink);
  border:1px solid var(--ink);
  padding:.72rem 1.6rem; min-height:44px;
  display:inline-flex; align-items:center;
  transition:background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.nav__book:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }

/* Burger */
.burger{
  display:none;
  width:48px; height:48px; margin-right:-12px;
  background:none; border:0; padding:0; cursor:pointer;
  position:relative;
}
.burger__bar{
  position:absolute; left:12px; width:24px; height:1px; background:var(--ink);
  transition:transform .45s var(--ease), opacity .3s var(--ease);
}
.burger__bar:nth-child(1){ top:20px; }
.burger__bar:nth-child(2){ top:27px; }
.burger.is-open .burger__bar:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.burger.is-open .burger__bar:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

/* ---------- 6. HERO ---------- */
.hero{
  display:grid;
  grid-template-columns:1fr minmax(0,46%);
  align-items:center;
  gap:clamp(2rem,5vw,5rem);
  padding:clamp(9rem,16vh,12rem) 0 clamp(4rem,9vw,7.5rem) var(--gutter);
  min-height:min(92vh, 900px);
}
.hero__type{ max-width:36rem; padding-right:1rem; }
.hero__h{
  font-family:var(--display);
  font-size:clamp(2.9rem, 6.4vw, 6rem);
  line-height:1.0;
  letter-spacing:-.02em;
  margin:0 0 1.7rem;
}
.hero__h em{
  font-style:italic;
  font-weight:300;
  color:var(--ink);
}
.hero__lede{
  max-width:30rem;
  color:var(--ash);
  font-size:clamp(1rem,.95rem + .3vw,1.15rem);
  margin-bottom:2.6rem;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:.85rem; }
.hero__figure{ overflow:hidden; }
.hero__figure img{
  width:100%; height:min(78vh, 760px); object-fit:cover; object-position:center 42%;
}

/* ---------- 7. BRAND STATEMENT ---------- */
.statement{
  padding:var(--section) var(--gutter);
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,6vw,6rem);
  align-items:end;
}
.statement__h{
  font-family:var(--display);
  font-size:clamp(2.6rem, 7.2vw, 6.5rem);
  line-height:1.0;
  letter-spacing:-.025em;
  max-width:11ch;
}
.statement__body{
  color:var(--ash);
  max-width:var(--measure);
  font-size:clamp(1rem,.95rem + .25vw,1.12rem);
  padding-bottom:.6rem;
}

/* ---------- 8. SERVICES ---------- */
.services{
  background:var(--bone);
  padding:var(--section) var(--gutter);
}
.services__head{ margin-bottom:clamp(3rem,7vw,6rem); }
.services__head .section-h{ margin-bottom:0; }

.craft{
  display:grid;
  gap:clamp(1.75rem,4vw,4.5rem);
  align-items:center;
  margin-bottom:clamp(3.5rem,8vw,7rem);
}
.craft--brows{ grid-template-columns:minmax(0,.42fr) minmax(0,.58fr); }
.craft--lashes{
  grid-template-columns:minmax(0,.58fr) minmax(0,.42fr);
  margin-left:auto;
  max-width:min(100%, 62rem);
}
.craft__img img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.craft__img--a{ transform:translateY(-1.5rem); }
.craft__img--b{ transform:translateY(1.5rem); }

.craft__h{
  font-family:var(--display);
  font-size:clamp(1.75rem,2.7vw,2.5rem);
  line-height:1.1;
  margin:0 0 1.1rem;
}
.craft__text p{ color:var(--ash); max-width:36ch; }

/* Menu — editorial list, not cards */
.menu{
  max-width:44rem;
  margin-top:clamp(2rem,5vw,4rem);
  border-top:1px solid var(--accent);
  padding-top:2.2rem;
}
.menu__h{
  font-size:.6875rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ash); font-weight:400; margin:0 0 2.2rem;
}
.menu__group + .menu__group{ margin-top:clamp(2.25rem,4vw,3.25rem); }
.menu__cat{
  font-family:var(--display);
  font-size:clamp(1rem,1.4vw,1.15rem);
  font-weight:400; font-style:italic;
  color:var(--accent-ink);
  letter-spacing:.01em;
  margin:0 0 .35rem;
}
.menu__item{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:1.5rem;
  padding:1.15rem 0;
  border-bottom:1px solid var(--stone);
}
.menu__name{
  font-family:var(--display);
  font-size:clamp(1.15rem,1.9vw,1.5rem);
  line-height:1.25;
  flex:1 1 auto;
}
.menu__meta{
  display:flex; align-items:baseline; gap:1.35rem;
  flex:0 0 auto;
  font-size:.8rem; letter-spacing:.06em;
}
.menu__dur{ color:var(--ash); }
.menu__price{ color:var(--ink); min-width:3.2rem; text-align:right; }
.menu__note{
  font-size:.8rem; color:var(--ash);
  margin:1.5rem 0 2.4rem;
}

/* ---------- 9. EXPERIENCE ---------- */
.experience{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,42%);
  gap:clamp(2rem,6vw,6rem);
  align-items:center;
  padding:var(--section) 0 var(--section) var(--gutter);
}
.experience__text{ max-width:34rem; }
.experience__body{ color:var(--ash); max-width:32ch; font-size:clamp(1rem,.95rem + .25vw,1.12rem); }
.experience__figure img{
  width:100%; height:min(76vh,720px); object-fit:cover;
}

/* ---------- 10. THE SPACE ---------- */
.space{ padding:0 0 var(--section); }
.space__wide img{
  width:100%; height:clamp(280px, 52vh, 620px); object-fit:cover;
}
.space__grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(1.25rem,3vw,2.5rem);
  padding:clamp(3.5rem,8vw,7rem) var(--gutter) 0;
  align-items:start;
}
.space__text{ grid-column:1 / span 5; }
.space__text p{ color:var(--ash); max-width:34ch; }
.space__addr{
  margin-top:2rem; padding-top:1.5rem;
  border-top:1px solid var(--stone);
  font-size:.85rem; letter-spacing:.05em; color:var(--ink);
}
.space__img--tall{ grid-column:7 / span 6; }
.space__img--tall img{ width:100%; aspect-ratio:3/2; object-fit:cover; }
/* Tucked under the text, left-aligned with it — an L, not an orphan */
.space__img--small{ grid-column:1 / span 4; margin-top:clamp(1.75rem,4vw,3rem); }
.space__img--small img{ width:100%; aspect-ratio:3/2; object-fit:cover; }

/* ---------- 11. FOUNDER ---------- */
.founder{
  display:grid;
  grid-template-columns:minmax(0,.4fr) minmax(0,.6fr);
  gap:clamp(2rem,6vw,6rem);
  align-items:center;
  padding:var(--section) var(--gutter);
  background:var(--bone);
}
.founder__img img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.founder__text{ max-width:34rem; }
.founder__text p{ color:var(--ash); max-width:36ch; }

/* ---------- 12. WHAT'S NEXT (dark) ---------- */
.next{
  position:relative;
  background:var(--carbon);
  min-height:clamp(440px, 78vh, 720px);
  display:grid;
  align-items:center;
  overflow:hidden;
}
.next__bg{
  position:absolute; inset:0; margin:0;
}
.next__bg img{
  width:100%; height:100%; object-fit:cover; opacity:.72;
}
.next::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(23,23,23,.93) 0%, rgba(23,23,23,.76) 40%, rgba(23,23,23,.18) 100%);
}
.next__text{
  position:relative; z-index:1;
  padding:clamp(4rem,10vw,8rem) var(--gutter);
  max-width:40rem;
}
.next__body{ color:var(--chalk-dim); max-width:32ch; font-size:clamp(1rem,.95rem + .25vw,1.12rem); }

/* ---------- 13. BOOK / CONTACT ---------- */
.book{
  padding:var(--section) var(--gutter);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:clamp(2rem,6vw,6rem);
  row-gap:clamp(2.5rem,5vw,3.5rem);
  align-items:start;
}
.book__h{
  grid-column:1; grid-row:1;
  font-family:var(--display);
  font-size:clamp(2.6rem,7vw,6rem);
  line-height:1.0; letter-spacing:-.025em;
  max-width:11ch;
  margin:0;
}
.book .btn--wide{ grid-column:1; grid-row:2; align-self:start; justify-self:start; }
.book__cols{
  grid-column:2; grid-row:1 / span 2;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%,14rem), 1fr));
  gap:clamp(2rem,4vw,3.5rem);
}
.book__sub{
  font-size:.6875rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ash); font-weight:400; margin:0 0 1.5rem;
  padding-bottom:1rem; border-bottom:1px solid var(--accent);
}
.hours{ margin:0; font-size:.92rem; }
.hours__row{
  display:flex; justify-content:space-between; gap:1.5rem;
  padding:.6rem 0;
  border-bottom:1px solid var(--stone);
}
.hours__row dt{ color:var(--ink); }
.hours__row dd{ margin:0; color:var(--ash); text-align:right; }
.hours__row--off dd{ color:var(--ash); }
.book__note{ font-size:.78rem; color:var(--ash); margin-top:1.2rem; }
.book__addr{ font-size:.95rem; line-height:1.9; color:var(--ash); }

/* ---------- 14. FOOTER ---------- */
.foot{
  background:var(--carbon); color:var(--chalk-dim);
  padding:clamp(3.5rem,8vw,6rem) var(--gutter) clamp(2.5rem,5vw,3.5rem);
}
.foot__inner{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:clamp(1.75rem,4vw,3.5rem);
  align-items:start;
}
.foot__mark{ width:180px; height:auto; }
.foot__addr{ font-size:.85rem; line-height:1.85; margin:0; }
.foot__nav{ display:flex; flex-direction:column; gap:.15rem; align-items:flex-end; }
.foot__nav a{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:var(--chalk-dim);
  min-height:44px; display:inline-flex; align-items:center;
  transition:color .4s var(--ease);
}
.foot__nav a:hover{ color:var(--accent-light); }
.foot__fine{
  grid-column:1 / -1;
  margin:clamp(1.75rem,3.5vw,2.5rem) 0 0;
  padding-top:1.75rem;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:.72rem; letter-spacing:.06em;
}

/* =========================================================
   15. RESPONSIVE
   ========================================================= */

/* --- Laptop 992–1199 --- */
@media (max-width:1199px){
  .hero{ grid-template-columns:1fr minmax(0,44%); }
  .space__text{ grid-column:1 / span 6; }
  .space__img--tall{ grid-column:7 / span 6; }
  .space__img--small{ grid-column:3 / span 5; }
}

/* --- Tablet 768–991 --- */
@media (max-width:991px){
  .nav__list{ gap:1.15rem; }
  .nav__list a{ font-size:.72rem; letter-spacing:.1em; }

  .hero{
    grid-template-columns:1fr;
    padding:clamp(7.5rem,14vh,9rem) var(--gutter) 0;
    gap:clamp(2.5rem,6vw,3.5rem);
    min-height:0;
  }
  .hero__type{ padding-right:0; }
  .hero__figure{ margin-inline:calc(var(--gutter) * -1); }
  .hero__figure img{ height:clamp(340px, 56vh, 520px); }

  .statement{ grid-template-columns:1fr; gap:2.25rem; align-items:start; }
  .statement__h{ max-width:14ch; }

  .craft--brows,
  .craft--lashes{ grid-template-columns:1fr; max-width:none; margin-left:0; }
  .craft__img--a,
  .craft__img--b{ transform:none; max-width:26rem; }
  .craft--lashes .craft__img{ margin-left:auto; }
  .craft__img img{ aspect-ratio:5/4; }

  .experience{
    grid-template-columns:1fr;
    padding:var(--section) var(--gutter);
    gap:2.75rem;
  }
  .experience__figure{ margin-inline:calc(var(--gutter) * -1); }
  .experience__figure img{ height:clamp(320px, 50vh, 460px); }

  .space__grid{ grid-template-columns:1fr; }
  .space__text,
  .space__img--tall,
  .space__img--small{ grid-column:1 / -1; }
  .space__img--small{ max-width:70%; margin-top:0; }

  .founder{ grid-template-columns:1fr; gap:2.5rem; }
  .founder__img{ max-width:24rem; }

  .book{ grid-template-columns:1fr; }
  .book__h,
  .book__cols,
  .book .btn--wide{ grid-column:1; grid-row:auto; }

  .foot__inner{ grid-template-columns:1fr 1fr; }
  .foot__mark{ grid-column:1 / -1; }
  .foot__nav{ align-items:flex-end; }
}

/* --- Mobile 480–767 --- */
@media (max-width:767px){
  :root{ --section:clamp(4.25rem,15vw,6rem); }

  .nav{
    position:fixed; inset:0;
    background:var(--paper);
    flex-direction:column;
    align-items:flex-start; justify-content:center;
    gap:0;
    padding:5.5rem var(--gutter) 3rem;
    transform:translateY(-100%);
    visibility:hidden;
    /* Visibility flips instantly on open so focus() lands; on close it waits
       for the slide-out to finish. Never interpolate it — focus breaks. */
    transition:transform .55s var(--ease), visibility 0s linear .55s;
  }
  .nav.is-open{
    transform:translateY(0);
    visibility:visible;
    transition:transform .55s var(--ease), visibility 0s linear 0s;
  }
  .nav__list{
    flex-direction:column; gap:0; width:100%;
    margin-bottom:2.5rem;
  }
  .nav__list li{ border-bottom:1px solid var(--stone); }
  .nav__list a{
    display:flex; width:100%;
    font-family:var(--display);
    font-size:1.85rem; letter-spacing:0; text-transform:none;
    padding:.85rem 0; min-height:60px;
  }
  .nav__list a::after{ display:none; }
  .nav__book{ align-self:flex-start; }

  .burger{ display:block; z-index:110; }
  body.nav-open{ overflow:hidden; }

  .hero__h{ font-size:clamp(2.6rem, 11.5vw, 3.6rem); }
  .hero__actions .btn{ flex:1 1 auto; }

  .craft__img--a,
  .craft__img--b{ max-width:100%; }
  .craft--lashes .craft__img{ margin-left:0; }

  .menu__item{
    flex-direction:column; align-items:flex-start; gap:.5rem;
    padding:1rem 0;
  }
  .menu__meta{ gap:1rem; }
  .menu__price{ text-align:left; min-width:0; }

  .space__img--small{ max-width:100%; }

  .book__cols{ grid-template-columns:1fr; gap:2.75rem; }
  .btn--wide{ width:100%; }

  .foot__inner{ grid-template-columns:1fr; gap:2rem; }
  .foot__nav{ flex-direction:row; flex-wrap:wrap; gap:1.25rem; align-items:flex-start; }
}

/* --- Small mobile below 480 --- */
@media (max-width:479px){
  :root{ --gutter:1.25rem; }
  .hero__h{ font-size:clamp(2.3rem, 12vw, 2.9rem); }
  .hero__actions{ flex-direction:column; align-items:stretch; }
  .hero__actions .btn{ width:100%; }
  .statement__h{ max-width:100%; }
  .nav__list a{ font-size:1.6rem; }
  .brand__mark{ width:126px; }
  .hours__row{ font-size:.85rem; }
}

/* --- Large desktop 1440+ --- */
@media (min-width:1440px){
  :root{ --gutter:clamp(5.5rem, 8vw, 9rem); }
  .hero__type{ max-width:40rem; }
}

/* =========================================================
   16. MOTION
   ========================================================= */
/* Hiding is opt-in: only applied once the inline head script confirms JS.
   Without JS every element stays visible. */
.js .reveal,
.js .reveal-img{ will-change:opacity, transform; }

.js .reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
}
.js .reveal.is-in{ opacity:1; transform:none; }

.reveal-img{ overflow:hidden; }
.js .reveal-img img{
  opacity:0; transform:scale(1.055);
  transition:opacity 1.15s var(--ease), transform 1.5s var(--ease);
}
.js .reveal-img.is-in img{ opacity:1; transform:scale(1); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .js .reveal,
  .js .reveal-img img{ opacity:1 !important; transform:none !important; }
}