/*
Theme Name: CC Beauty Studios
Theme URI: https://www.ccbeautystudios.com
Author: CC Beauty Studios
Description: Custom theme for CC Beauty Studios — a private-suite hair salon in Covina, California. Client-facing salon site with per-stylist booking, price lists and hours, plus editable suite availability for leasing.
Version: 1.0.6
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: cc-beauty-studios
*/

/* ==========================================================================
   CC BEAUTY STUDIOS — Design System  ("Light Editorial Luxe")
   Display: Cormorant Garamond (light, high-contrast serif)
   Body/UI: Jost (geometric sans)
   Palette inherited from sister brand Hair by Juliet: mauve + ivory + charcoal
   ========================================================================== */

:root{
  /* --- Surfaces --- */
  --ivory:        #F7F4EF;
  --ivory-deep:   #EFEAE2;
  --white:        #FFFFFF;
  --ink:          #1C1A19;
  --ink-rich:     #12100F;

  /* --- Text --- */
  --ink-soft:     #675F5B;
  /* Darkened from #948C87, which only reached 2.5–3.3:1 and failed WCAG AA on
     every surface it was used on. This clears 4.5:1 against white, --ivory,
     --ivory-deep and the darker placeholder fill. Faint text is now separated
     from --ink-soft by size and tracking rather than by colour alone. */
  --ink-faint:    #6A625D;

  /* --- Brand mauve ---
     --mauve is the sister-brand hue. --mauve-deep is darkened from it so text
     and buttons clear WCAG AA (4.5:1) on both --ivory and --white; --mauve-mid
     clears 3:1 for icons, rules and other non-text usage. */
  --mauve:        #A986B4;
  --mauve-mid:    #8F6C9B;
  --mauve-deep:   #75567F;
  --mauve-tint:   #F1EAF3;

  /* --- Lines & effects --- */
  --line:         rgba(28,26,25,0.13);
  --line-soft:    rgba(28,26,25,0.07);
  --line-invert:  rgba(255,255,255,0.20);
  --focus:        #A9601C;

  --radius:       2px;
  --ease:         cubic-bezier(.16,.84,.28,1);

  /* --- Type --- */
  --display: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --body:    'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- Rhythm --- */
  --gutter:  clamp(22px, 5vw, 56px);
  --section: clamp(72px, 11vw, 152px);
}

*, *::before, *::after{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  font-family:var(--body);
  background:var(--ivory);
  color:var(--ink);
  font-size:1rem;
  font-weight:300;
  line-height:1.72;
  letter-spacing:0.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input, textarea, select{ font-family:inherit; font-size:1rem; color:inherit; }
::selection{ background:var(--mauve-tint); color:var(--ink); }

/* ==========================================================================
   Accessibility
   ========================================================================== */

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, summary:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
  border-radius:var(--radius);
}

.skip-link{
  position:absolute; left:18px; top:-70px;
  background:var(--ink); color:var(--white);
  padding:13px 22px;
  font-size:0.78rem; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase;
  z-index:3000;
  transition:top .28s var(--ease);
}
.skip-link:focus-visible{ top:16px; }

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

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

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5{
  font-family:var(--display);
  font-weight:300;
  line-height:1.06;
  letter-spacing:-0.012em;
  color:var(--ink);
}

h1{ font-size:clamp(2.9rem, 7vw, 5.6rem); }
h2{ font-size:clamp(2.1rem, 4.4vw, 3.5rem); }
h3{ font-size:clamp(1.45rem, 2.2vw, 1.95rem); line-height:1.16; }
h4{ font-size:1.16rem; line-height:1.3; letter-spacing:0; }

.display-xl{ font-size:clamp(3.2rem, 9vw, 7rem); line-height:0.98; }

em, .italic{ font-style:italic; }

/* Micro-label: wide-tracked uppercase, the workhorse "expensive" cue */
.eyebrow{
  display:flex; align-items:center; gap:14px;
  font-size:0.7rem; font-weight:400;
  letter-spacing:0.3em; text-transform:uppercase;
  color:var(--mauve-deep);
  margin-bottom:26px;
}
.eyebrow::before{
  content:''; width:clamp(24px, 5vw, 46px); height:1px;
  background:var(--mauve-mid); flex:none;
}
.eyebrow-plain{ display:block; }
.eyebrow-plain::before{ display:none; }
.eyebrow-center{ justify-content:center; }

.lede{
  font-size:clamp(1.06rem, 1.5vw, 1.22rem);
  line-height:1.68;
  color:var(--ink-soft);
  font-weight:300;
}

/* Large serif manifesto paragraph */
.statement{
  font-family:var(--display);
  font-size:clamp(1.6rem, 3.1vw, 2.6rem);
  line-height:1.34;
  font-weight:300;
  letter-spacing:-0.008em;
  color:var(--ink);
}

.muted{ color:var(--ink-soft); }
.faint{ color:var(--ink-faint); }

.numeral{
  font-family:var(--display);
  font-size:clamp(2.4rem, 4vw, 3.2rem);
  line-height:1;
  font-weight:300;
  color:var(--mauve);
}

/* ==========================================================================
   Layout
   ========================================================================== */

.container{
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:0 var(--gutter);
}
.container-narrow{ max-width:880px; }
.container-wide{  max-width:1480px; }

.section{ padding:var(--section) 0; }
.section-tight{ padding:clamp(52px, 7vw, 92px) 0; }
.section-ivory-deep{ background:var(--ivory-deep); }
.section-white{ background:var(--white); }

.rule{ height:1px; background:var(--line); border:0; }
.rule-soft{ height:1px; background:var(--line-soft); border:0; }

.stack-sm > * + *{ margin-top:12px; }
.stack    > * + *{ margin-top:22px; }
.stack-lg > * + *{ margin-top:38px; }

.center{ text-align:center; }

/* Reveal-on-scroll */
html.js .reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
html.js .reveal.is-visible{ opacity:1; transform:none; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:15px 30px;
  font-family:var(--body);
  font-size:0.74rem; font-weight:400;
  letter-spacing:0.19em; text-transform:uppercase;
  border-radius:var(--radius);
  border:1px solid transparent;
  transition:background .4s var(--ease), color .4s var(--ease),
             border-color .4s var(--ease), transform .4s var(--ease);
  white-space:nowrap;
  text-align:center;
}
.btn:hover{ transform:translateY(-2px); }

.btn-primary{ background:var(--ink); color:var(--white); border-color:var(--ink); }
.btn-primary:hover{ background:var(--mauve-deep); border-color:var(--mauve-deep); }

.btn-outline{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-outline:hover{ border-color:var(--ink); background:var(--ink); color:var(--white); }

.btn-mauve{ background:var(--mauve-deep); color:var(--white); border-color:var(--mauve-deep); }
.btn-mauve:hover{ background:var(--ink); border-color:var(--ink); }

.btn-ghost-light{ background:transparent; color:var(--white); border-color:var(--line-invert); }
.btn-ghost-light:hover{ background:var(--white); color:var(--ink); border-color:var(--white); }

.btn-block{ width:100%; }
.btn-sm{ padding:12px 22px; font-size:0.68rem; }

/* Understated text link with animated rule */
.link-line{
  display:inline-flex; align-items:center; gap:9px;
  font-size:0.74rem; letter-spacing:0.17em; text-transform:uppercase;
  color:var(--ink);
  padding-bottom:5px;
  border-bottom:1px solid var(--line);
  transition:border-color .4s var(--ease), color .4s var(--ease), gap .4s var(--ease);
}
.link-line:hover{ border-color:var(--mauve-deep); color:var(--mauve-deep); gap:15px; }
.link-line::after{ content:'→'; font-size:0.9rem; letter-spacing:0; }

.btn-row{ display:flex; flex-wrap:wrap; gap:12px; }

/* ==========================================================================
   Image placeholders
   Deliberately plain: flat fill + hairline + small caps caption. No faked
   gradients or fake cutouts — these are swapped for real <img> at launch.
   ========================================================================== */

.ph{
  position:relative;
  background:var(--ivory-deep);
  border:1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  min-height:240px;
}
.section-ivory-deep .ph{ background:#E6E0D7; }
.ph-label{
  font-size:0.66rem; font-weight:400;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--ink-faint);
  text-align:center; line-height:2; padding:20px;
}
.ph-tall     { aspect-ratio:3/4;  min-height:0; }
.ph-portrait { aspect-ratio:4/5;  min-height:0; }
.ph-square   { aspect-ratio:1/1;  min-height:0; }
.ph-wide     { aspect-ratio:16/10; min-height:0; }
.ph-pano     { aspect-ratio:21/9; min-height:0; }

/* ==========================================================================
   Real imagery
   Same footprint as .ph, so a placeholder can be swapped for a <figure class="media">
   without touching layout. The crop is done here with object-fit rather than in
   the file, so one source works at every aspect ratio.
   ========================================================================== */

.media{
  position:relative;
  overflow:hidden;
  background:var(--ivory-deep);
  border:1px solid var(--line-soft);
}
.media img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  /* Faces sit in the upper-middle of the source frame, so bias the crop upward
     and slightly left to keep both the stylist and the client in shot. */
  object-position:42% 38%;
}
.media-portrait{ aspect-ratio:4/5; }
.media-wide    { aspect-ratio:16/10; }
.media-square  { aspect-ratio:1/1; }

@media (max-width: 900px){
  /* Hero goes landscape on narrow screens. A touch taller than 16/11 now that
     it runs full-bleed, so it holds the top of the page with some presence. */
  .hero-media .media-portrait{ aspect-ratio:4/3; }
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(247,244,239,0.88);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.site-header.is-stuck{
  border-bottom-color:var(--line);
  background:rgba(247,244,239,0.96);
}

.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:30px;
  height:clamp(72px, 8vw, 92px);
}

.wordmark{ display:flex; flex-direction:column; line-height:1; flex:none; }
.wordmark-name{
  font-family:var(--display);
  font-size:clamp(1.25rem, 2vw, 1.6rem);
  font-weight:400; letter-spacing:0.04em;
  color:var(--ink);
}
.wordmark-sub{
  font-size:0.55rem; font-weight:400;
  letter-spacing:0.34em; text-transform:uppercase;
  color:var(--mauve-deep);
  margin-top:6px;
}

.nav{ display:flex; align-items:center; gap:clamp(20px, 2.6vw, 38px); }
.nav a{
  font-size:0.73rem; font-weight:400;
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ink-soft);
  padding:6px 0;
  position:relative;
  transition:color .35s var(--ease);
}
.nav a::after{
  content:''; position:absolute; left:0; bottom:0;
  width:0; height:1px; background:var(--mauve-deep);
  transition:width .4s var(--ease);
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after{ width:100%; }
.nav a.is-active{ color:var(--ink); }
.nav a.is-active::after{ width:100%; }

.header-cta{ display:flex; align-items:center; gap:16px; flex:none; }
.header-phone{
  font-size:0.73rem; letter-spacing:0.1em;
  color:var(--ink-soft);
  transition:color .35s var(--ease);
}
.header-phone:hover{ color:var(--mauve-deep); }

/* Mobile menu */
.menu-toggle{
  display:none;
  width:44px; height:44px;
  align-items:center; justify-content:center;
  flex-direction:column; gap:5px;
  flex:none;
}
.menu-toggle span{
  display:block; width:22px; height:1px; background:var(--ink);
  transition:transform .35s var(--ease), opacity .3s var(--ease);
}
.menu-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (max-width: 980px){
  /* backdrop-filter creates a containing block for fixed-position descendants,
     which collapsed the off-canvas panel to the header's height and pushed the
     first nav links off the top of the screen. Drop it at the widths where the
     panel exists; the solid background reads the same. */
  .site-header{ backdrop-filter:none; background:var(--ivory); }
  .site-header.is-stuck{ background:var(--ivory); }

  /* Booking lives on each stylist's profile, so the header carries no CTA
     button — the phone number stays visible on mobile as the only header action.
     The toggle is ordered last so the hamburger sits at the right edge rather
     than between the wordmark and the phone (its DOM position). It also sits
     above the open panel so it stays tappable as the close button. */
  .menu-toggle{ display:flex; order:3; margin-right:-10px; position:relative; z-index:1300; }
  .header-cta{ order:2; margin-left:auto; margin-right:6px; }
  .header-phone{ font-size:0.8rem; letter-spacing:0.02em; }
  .nav{
    position:fixed; inset:0 0 0 auto;
    /* 40% of the viewport, with a floor so it never gets too narrow to read on
       a small phone — 40vw alone is ~144px on a 360px screen, which can't hold
       "Our Stylists" on one line at any comfortable size. */
    width:max(178px, 40vw);
    background:var(--ivory);
    border-left:1px solid var(--line);
    flex-direction:column;
    align-items:flex-start;
    /* flex-start, not center: centring pushed links off-screen once the panel
       was shorter than its content. Top padding clears the header so the first
       link never sits under the wordmark, and overflow lets a short landscape
       viewport scroll instead of clipping. */
    justify-content:flex-start;
    gap:6px;
    padding:calc(clamp(72px, 8vw, 92px) + 20px) var(--gutter) 40px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    transform:translateX(102%);
    /* visibility (not just transform) keeps the closed panel's links out of the
       keyboard tab order, and stops the off-canvas panel inflating scrollWidth. */
    visibility:hidden;
    transition:transform .5s var(--ease), visibility .5s var(--ease);
    z-index:1200;
  }
  .nav.is-open{ transform:none; visibility:visible; }
  .nav a{
    font-family:var(--display);
    /* Sized so the longest label ("Our Stylists") stays on one line inside the
       narrower panel. */
    font-size:1.4rem;
    text-transform:none;
    letter-spacing:0;
    color:var(--ink);
    padding:10px 0;
    white-space:nowrap;
  }
  .nav a::after{ display:none; }
  .nav-backdrop{
    position:fixed; inset:0;
    background:rgba(28,26,25,0.42);
    opacity:0; pointer-events:none;
    transition:opacity .45s var(--ease);
    z-index:1100;
  }
  .nav-backdrop.is-open{ opacity:1; pointer-events:auto; }
}

/* ==========================================================================
   Hero — editorial split
   ========================================================================== */

.hero{ padding:clamp(48px, 7vw, 96px) 0 clamp(60px, 8vw, 110px); }
.hero-grid{
  display:grid;
  grid-template-columns:1.06fr 0.94fr;
  gap:clamp(34px, 6vw, 84px);
  align-items:center;
}
.hero-copy{ max-width:640px; }
.hero h1{ margin-bottom:30px; }
.hero .hero-tagline{
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(1.15rem, 1.9vw, 1.5rem);
  line-height:1.5;
  color:var(--ink-soft);
  max-width:34ch;
  margin-bottom:20px;
}
.hero .lede{ max-width:50ch; margin-bottom:38px; }
.hero-media{ position:relative; }
.hero-media .ph{ aspect-ratio:4/5; min-height:0; }

/* Thin stat strip under hero */
.hero-strip{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:clamp(22px, 3vw, 34px) 0;
}
.hero-strip-inner{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
}
.hero-stat{ display:flex; flex-direction:column; gap:8px; }
.hero-stat dt{
  font-size:0.66rem; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--ink-faint);
  order:2;
}
.hero-stat dd{
  font-family:var(--display);
  font-size:clamp(1.5rem, 2.4vw, 2.1rem);
  line-height:1; font-weight:300;
  color:var(--ink);
  order:1;
}

@media (max-width: 900px){
  .hero-grid{ grid-template-columns:1fr; }
  /* Full-bleed on mobile: cancel the container's gutter so the hero image runs
     edge to edge, and drop the hairline that would otherwise sit on the screen
     edge. body already has overflow-x:hidden, so the negative margins can't
     create a horizontal scrollbar. */
  .hero-media{
    order:-1;
    margin-left:calc(var(--gutter) * -1);
    margin-right:calc(var(--gutter) * -1);
  }
  .hero-media .media,
  .hero-media .ph{ border-left:0; border-right:0; }
  .hero-media .ph{ aspect-ratio:4/3; }
  .hero-strip-inner{ grid-template-columns:repeat(2, 1fr); gap:26px 20px; }
}

/* ==========================================================================
   Split feature blocks (image / copy, alternating)
   ========================================================================== */

.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(32px, 5.5vw, 78px);
  align-items:center;
}
.split-reverse .split-media{ order:2; }
.split-copy{ max-width:540px; }
.split-copy h2{ margin-bottom:24px; }
.split-copy p{ color:var(--ink-soft); }
.split-copy .btn-row{ margin-top:34px; }

@media (max-width: 900px){
  .split{ grid-template-columns:1fr; gap:32px; }
  .split-reverse .split-media{ order:0; }
}

/* ==========================================================================
   Three-column numbered principles
   ========================================================================== */

.principles{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0;
  border-top:1px solid var(--line);
}
.principle{
  padding:clamp(30px, 3.6vw, 48px) clamp(22px, 2.6vw, 40px);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.principle:first-child{ padding-left:0; }
.principle:last-child{ border-right:0; padding-right:0; }
.principle .numeral{ margin-bottom:20px; display:block; }
.principle h3{ margin-bottom:12px; font-size:1.16rem; letter-spacing:0; line-height:1.3; }
.principle p{ font-size:0.94rem; color:var(--ink-soft); }

@media (max-width: 820px){
  .principles{ grid-template-columns:1fr; }
  .principle, .principle:first-child, .principle:last-child{
    border-right:0; padding-left:0; padding-right:0;
  }
}

/* ==========================================================================
   Section headers
   ========================================================================== */

.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:32px;
  margin-bottom:clamp(38px, 5vw, 66px);
}
.section-head-copy{ max-width:620px; }
.section-head h2{ margin-bottom:18px; }
.section-head p{ color:var(--ink-soft); }
.section-head-center{
  flex-direction:column; align-items:center; text-align:center;
}
.section-head-center .section-head-copy{ max-width:660px; }

@media (max-width: 780px){
  .section-head{ flex-direction:column; align-items:flex-start; }
}

/* ==========================================================================
   Professional profile cards  (occupied suites)
   ========================================================================== */

.profiles{ display:flex; flex-direction:column; gap:clamp(56px, 8vw, 108px); }

.profile{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:clamp(28px, 5vw, 68px);
  align-items:center;
}
/* Reversed rows must also swap the track widths, or the copy lands in the
   narrow column and the photo grows — making alternating rows inconsistent. */
.profile-reverse{ grid-template-columns:1.15fr 0.85fr; }
.profile-reverse .profile-media{ order:2; }
.profile-media .ph{ aspect-ratio:4/5; min-height:0; }

.profile-body{ max-width:560px; }

.profile-suite{
  font-size:0.68rem; letter-spacing:0.26em; text-transform:uppercase;
  color:var(--mauve-deep);
  margin-bottom:16px;
  display:block;
}
.profile-name{
  font-size:clamp(2rem, 3.4vw, 2.9rem);
  margin-bottom:12px;
}
.profile-title{
  font-family:var(--body);
  font-size:0.74rem; font-weight:400;
  letter-spacing:0.2em; text-transform:uppercase;
  color:var(--ink-soft);
  padding-bottom:22px;
  margin-bottom:24px;
  border-bottom:1px solid var(--line);
  display:block;
}
.profile-bio{
  color:var(--ink-soft);
  margin-bottom:26px;
}
.profile-specialties{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-bottom:32px;
}
.tag{
  font-size:0.66rem; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--mauve-deep);
  background:var(--mauve-tint);
  padding:7px 14px;
  border-radius:var(--radius);
}
.section-white .tag{ background:var(--mauve-tint); }

/* Each stylist sets their own hours, so these live on the profile rather than
   as one studio-wide opening time. */
.hours{
  margin:0 0 30px;
  max-width:420px;
}
.hours-label{
  font-size:0.66rem; font-weight:400;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--ink-faint);
  display:block;
  margin-bottom:10px;
}
.hours-list{ border-top:1px solid var(--line); }
.hours-row{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:20px;
  padding:9px 0;
  border-bottom:1px solid var(--line);
  font-size:0.92rem;
}
.hours-day{ color:var(--ink-soft); }
.hours-time{ color:var(--ink); white-space:nowrap; }
.hours-note{
  font-size:0.82rem;
  color:var(--ink-faint);
  margin-top:10px;
}

@media (max-width: 420px){
  .hours-row{ flex-direction:column; gap:2px; }
  .hours-time{ white-space:normal; }
}

.profile-actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.profile-actions .btn{ min-width:172px; }

@media (max-width: 900px){
  .profile{ grid-template-columns:1fr; gap:28px; }
  .profile-reverse .profile-media{ order:0; }
  .profile-media .ph{ aspect-ratio:4/3; }
  .profile-actions .btn{ flex:1 1 auto; min-width:0; }
}

/* ==========================================================================
   Available suite blocks
   ========================================================================== */

.suite-avail{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:clamp(28px, 5vw, 68px);
  align-items:center;
}
.suite-avail-reverse{ grid-template-columns:1.15fr 0.85fr; }
.suite-avail-reverse .suite-avail-media{ order:2; }
.suite-avail-media .ph{ aspect-ratio:4/5; min-height:0; }
.suite-avail-body{ max-width:560px; }

.badge{
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.63rem; font-weight:400;
  letter-spacing:0.2em; text-transform:uppercase;
  padding:7px 14px;
  border-radius:var(--radius);
  border:1px solid transparent;
}
/* Solid white lifts the badge off the ivory ground so availability reads at a
   glance — the one label on the page that should actively catch the eye. */
.badge-available{
  color:var(--mauve-deep);
  border-color:var(--mauve-mid);
  background:var(--white);
  font-weight:500;
  box-shadow:0 3px 12px -4px rgba(28,26,25,0.20);
}
.badge-available::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--mauve-deep); flex:none;
}
/* On a white section the fill alone can't separate it, so lean on the border. */
.section-white .badge-available{
  border-color:var(--mauve-deep);
  box-shadow:none;
}
.badge-occupied{
  color:var(--ink-soft);
  border-color:var(--line);
}

.suite-head{
  display:flex; align-items:center; gap:16px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.suite-head h3{ font-size:clamp(1.8rem, 3.2vw, 2.6rem); }

/* Spec list — the "square footage / good for" table */
.spec-list{
  border-top:1px solid var(--line);
  margin:24px 0 26px;
}
.spec-row{
  display:grid;
  grid-template-columns:minmax(120px, 0.42fr) 1fr;
  gap:18px;
  padding:15px 0;
  border-bottom:1px solid var(--line);
  align-items:baseline;
}
.spec-key{
  font-size:0.66rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--ink-faint);
}
.spec-val{ font-size:0.97rem; color:var(--ink); }
.spec-val-lg{
  font-family:var(--display);
  font-size:1.5rem; line-height:1.1;
  color:var(--ink);
}

.suite-avail-note{
  font-size:0.84rem;
  color:var(--ink-faint);
  margin-top:18px;
}

@media (max-width: 900px){
  .suite-avail{ grid-template-columns:1fr; gap:28px; }
  .suite-avail-reverse .suite-avail-media{ order:0; }
  .suite-avail-media .ph{ aspect-ratio:4/3; }
  .spec-row{ grid-template-columns:1fr; gap:4px; }
}

/* ==========================================================================
   Suite index (compact roster at top of Suites page)
   ========================================================================== */

.roster{
  border-top:1px solid var(--line);
  margin-top:clamp(34px, 5vw, 54px);
}
.roster-row{
  display:grid;
  grid-template-columns:88px 1fr 1fr auto;
  gap:20px;
  align-items:center;
  padding:22px 0;
  border-bottom:1px solid var(--line);
  transition:padding-left .4s var(--ease);
}
.roster-row:hover{ padding-left:10px; }
.roster-num{
  font-family:var(--display);
  font-size:1.7rem; line-height:1;
  color:var(--mauve);
}
.roster-name{ font-family:var(--display); font-size:1.35rem; line-height:1.2; }
.roster-meta{ font-size:0.8rem; letter-spacing:0.06em; color:var(--ink-soft); }

@media (max-width: 760px){
  .roster-row{ grid-template-columns:56px 1fr; gap:6px 16px; }
  .roster-meta{ grid-column:2; }
  .roster-row .badge{ grid-column:2; margin-top:6px; }
}

/* ==========================================================================
   Filters
   ========================================================================== */

.filters{ display:flex; flex-wrap:wrap; gap:10px; }
.filter-btn{
  font-size:0.7rem; letter-spacing:0.17em; text-transform:uppercase;
  padding:11px 20px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--ink-soft);
  transition:all .35s var(--ease);
}
.filter-btn:hover{ border-color:var(--ink); color:var(--ink); }
.filter-btn[aria-pressed="true"]{
  background:var(--ink); border-color:var(--ink); color:var(--white);
}

/* ==========================================================================
   Amenities
   ========================================================================== */

/* Outer top/left edges come from the container; each cell draws its own
   right/bottom, which together close the box. That only holds if the last row
   is full — an empty trailing cell has no borders and breaks the outline. So
   columns are explicit per grid (never auto-fit) and chosen to divide the item
   count evenly at every breakpoint: 8-card grids use 4/2/1, 6-card use 3/2/1. */
.amenity-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.amenity-grid-3{ grid-template-columns:repeat(3, 1fr); }

@media (max-width: 1080px){
  .amenity-grid, .amenity-grid-3{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 620px){
  .amenity-grid, .amenity-grid-3{ grid-template-columns:1fr; }
}
.amenity{
  padding:clamp(26px, 3vw, 40px) clamp(20px, 2.4vw, 36px);
  border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);
}
.amenity h3{ margin-bottom:10px; font-size:1.06rem; letter-spacing:0; line-height:1.3; }
.amenity p{ font-size:0.9rem; color:var(--ink-soft); }
.amenity-icon{
  font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--mauve-deep);
  display:block; margin-bottom:16px;
}

/* Simple two-column checklist */
.checklist{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:0 clamp(24px, 4vw, 60px);
}
.checklist li{
  display:flex; align-items:flex-start; gap:14px;
  padding:15px 0;
  border-bottom:1px solid var(--line);
  font-size:0.95rem;
}
.checklist li::before{
  content:'—';
  color:var(--mauve-mid);
  flex:none;
  line-height:1.6;
}
@media (max-width: 700px){ .checklist{ grid-template-columns:1fr; } }

/* ==========================================================================
   Price list  (one page per stylist — each runs an independent business)
   ========================================================================== */

.notice{
  border:1px solid var(--mauve-mid);
  background:var(--mauve-tint);
  padding:clamp(20px, 3vw, 32px);
}
.notice h3{ margin-bottom:10px; font-size:1.25rem; }
.notice p{ color:var(--ink-soft); font-size:0.93rem; }
.notice p + p{ margin-top:10px; }

.price-group + .price-group{ margin-top:clamp(38px, 5vw, 62px); }
.price-group-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  margin-bottom:6px;
}
.price-group-head h3{ font-size:clamp(1.4rem, 2.2vw, 1.85rem); }
.price-group-note{ font-size:0.82rem; color:var(--ink-faint); }

.price-table{ border-top:1px solid var(--line); }
.price-item{
  display:grid;
  grid-template-columns:1fr auto;
  gap:2px 26px;
  padding:17px 0;
  border-bottom:1px solid var(--line);
  align-items:baseline;
}
.price-name{ font-size:1.02rem; color:var(--ink); }
.price-amount{
  font-family:var(--display);
  font-size:1.28rem; line-height:1;
  color:var(--ink);
  white-space:nowrap;
  text-align:right;
}
/* Until the stylist supplies her menu, amounts render as an obvious dash so a
   placeholder can never be mistaken for a real price. */
.price-amount-tbd{ color:var(--ink-faint); font-size:1.1rem; }
.price-desc{
  grid-column:1;
  font-size:0.86rem;
  color:var(--ink-soft);
  max-width:60ch;
}
.price-from{
  font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ink-faint);
  display:block;
}

@media (max-width: 560px){
  .price-item{ grid-template-columns:1fr; }
  .price-amount{ text-align:left; grid-row:2; }
  .price-desc{ grid-row:3; }
}

/* ==========================================================================
   Quote / testimonial
   ========================================================================== */

.quote-section{
  background:var(--ink);
  color:var(--white);
  padding:clamp(72px, 10vw, 138px) 0;
}
.quote-section .eyebrow{ color:var(--mauve); }
.quote-section .eyebrow::before{ background:var(--mauve); }
.quote{
  font-family:var(--display);
  font-size:clamp(1.55rem, 3.4vw, 2.75rem);
  line-height:1.32;
  font-weight:300;
  font-style:italic;
  color:var(--white);
  max-width:24ch;
}
.quote-attr{
  margin-top:34px;
  font-size:0.7rem; letter-spacing:0.24em; text-transform:uppercase;
  color:rgba(255,255,255,0.62);
}

/* ==========================================================================
   CTA banner
   ========================================================================== */

.cta{
  background:var(--ivory-deep);
  padding:clamp(64px, 9vw, 122px) 0;
  text-align:center;
}
.cta h2{ margin-bottom:22px; }
.cta p{
  color:var(--ink-soft);
  max-width:52ch;
  margin:0 auto 38px;
}
.cta .btn-row{ justify-content:center; }

/* ==========================================================================
   Page hero (interior pages)
   ========================================================================== */

.page-hero{
  padding:clamp(52px, 7vw, 104px) 0 clamp(36px, 5vw, 62px);
  border-bottom:1px solid var(--line);
}
.page-hero-inner{ max-width:820px; }
.page-hero h1{ margin-bottom:26px; }
.page-hero .lede{ max-width:56ch; }

.breadcrumb{
  display:flex; gap:10px; align-items:center;
  font-size:0.68rem; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:28px;
}
.breadcrumb a:hover{ color:var(--mauve-deep); }

/* ==========================================================================
   Forms
   ========================================================================== */

.form-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:22px;
}
.field{ display:flex; flex-direction:column; gap:9px; }
.field-full{ grid-column:1 / -1; }
.field label{
  font-size:0.68rem; letter-spacing:0.19em; text-transform:uppercase;
  color:var(--ink-soft);
}
.field .req{ color:var(--mauve-deep); }
.field input, .field select, .field textarea{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 16px;
  font-size:0.97rem;
  font-weight:300;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field input:hover, .field select:hover, .field textarea:hover{ border-color:var(--ink-faint); }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;
  border-color:var(--mauve-deep);
  box-shadow:0 0 0 3px var(--mauve-tint);
}
.field textarea{ resize:vertical; min-height:132px; }
.field-hint{ font-size:0.78rem; color:var(--ink-faint); }

.form-note{ font-size:0.8rem; color:var(--ink-faint); margin-top:18px; }

.form-success{
  border:1px solid var(--mauve-mid);
  background:var(--mauve-tint);
  padding:clamp(28px, 4vw, 46px);
  text-align:center;
}
.form-success h3{ margin-bottom:14px; }
.form-success p{ color:var(--ink-soft); }

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

/* ==========================================================================
   Contact details
   ========================================================================== */

.contact-grid{
  display:grid;
  grid-template-columns:1fr 0.85fr;
  gap:clamp(34px, 6vw, 82px);
  align-items:start;
}
.detail-list{ border-top:1px solid var(--line); }
.detail{
  padding:22px 0;
  border-bottom:1px solid var(--line);
}
.detail dt{
  font-size:0.66rem; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:9px;
}
.detail dd{ font-size:1rem; color:var(--ink); line-height:1.7; }
.detail dd a:hover{ color:var(--mauve-deep); }

.map-embed{
  border:1px solid var(--line);
  filter:grayscale(100%) contrast(0.94);
  transition:filter .5s var(--ease);
}
.map-embed:hover{ filter:grayscale(0%); }
.map-embed iframe{ display:block; width:100%; height:clamp(280px, 40vw, 420px); border:0; }

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

/* ==========================================================================
   Accordion (FAQ)
   ========================================================================== */

.accordion{ border-top:1px solid var(--line); }
.acc-item{ border-bottom:1px solid var(--line); }
.acc-trigger{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding:26px 0;
  text-align:left;
  font-family:var(--display);
  font-size:clamp(1.1rem, 1.7vw, 1.35rem);
  font-weight:300;
  color:var(--ink);
  transition:color .35s var(--ease);
}
.acc-trigger:hover{ color:var(--mauve-deep); }
.acc-icon{
  position:relative; width:14px; height:14px; flex:none;
}
.acc-icon::before, .acc-icon::after{
  content:''; position:absolute; background:var(--mauve-deep);
  transition:transform .4s var(--ease), opacity .3s var(--ease);
}
.acc-icon::before{ left:0; top:6.5px; width:14px; height:1px; }
.acc-icon::after{ left:6.5px; top:0; width:1px; height:14px; }
.acc-trigger[aria-expanded="true"] .acc-icon::after{ transform:scaleY(0); }
.acc-panel{
  overflow:hidden;
  max-height:0;
  transition:max-height .5s var(--ease);
}
.acc-panel-inner{
  padding:0 0 28px;
  max-width:70ch;
  color:var(--ink-soft);
  font-size:0.97rem;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer{
  background:var(--ink);
  color:rgba(255,255,255,0.72);
  padding:clamp(56px, 8vw, 96px) 0 34px;
  font-size:0.92rem;
}
.footer-top{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.1fr;
  gap:clamp(30px, 4vw, 56px);
  padding-bottom:clamp(38px, 5vw, 62px);
  border-bottom:1px solid var(--line-invert);
}
.footer-brand .wordmark-name{ color:var(--white); }
.footer-brand .wordmark-sub{ color:var(--mauve); }
.footer-brand p{
  margin-top:22px;
  max-width:34ch;
  color:rgba(255,255,255,0.62);
  font-size:0.9rem;
}
.footer-col h2{
  font-family:var(--body);
  font-size:0.66rem; font-weight:400;
  letter-spacing:0.22em; text-transform:uppercase;
  color:rgba(255,255,255,0.5);
  margin-bottom:20px;
}
.footer-col li + li{ margin-top:12px; }
.footer-col a{ color:rgba(255,255,255,0.78); transition:color .3s var(--ease); }
.footer-col a:hover{ color:var(--white); }
.footer-col address{ font-style:normal; line-height:1.85; color:rgba(255,255,255,0.78); }

.social{ display:flex; gap:10px; margin-top:22px; }
.social a{
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-invert);
  border-radius:50%;
  font-size:0.66rem; letter-spacing:0.04em;
  color:rgba(255,255,255,0.8);
  transition:all .35s var(--ease);
}
.social a:hover{ background:var(--white); color:var(--ink); border-color:var(--white); }

/* Stacked, not side-by-side, so the disclaimer gets the footer's full width
   instead of being squeezed into a column beside the utility links. */
.footer-bottom{
  padding-top:30px;
  display:flex; flex-direction:column; gap:14px;
  align-items:flex-start;
}
.footer-bottom p, .footer-bottom a{
  font-size:0.76rem;
  color:rgba(255,255,255,0.46);
  line-height:1.8;
}
.footer-bottom a:hover{ color:rgba(255,255,255,0.8); }
.footer-disclaimer{ max-width:none; }

@media (max-width: 940px){
  .footer-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 620px){
  .footer-top{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Utility spacing
   ========================================================================== */

.mt-0{ margin-top:0; }
.mb-0{ margin-bottom:0; }
.mt-sm{ margin-top:14px; }
.mt-md{ margin-top:26px; }
.mt-lg{ margin-top:44px; }
.mb-sm{ margin-bottom:14px; }
.mb-md{ margin-bottom:26px; }
.mb-lg{ margin-bottom:44px; }
.is-hidden{ display:none !important; }