/* ==========================================================================
   Bella Vita Salon — site styles
   Brand tokens sampled directly from the salon's logo file:
     deep purple  #62037B  (the "Bella Vita / Salon" wordmark)
     bright purple#85179C  (the violet band in the hair)
     cool gray    #A7A9AC  (the scissors)
     mid gray     #808285  (the gray band in the hair)
     black        #0A0A0A  (the hair — the largest single ink area in the mark)

   Type, three families each with one job:
     Jost         display headings AND UI. Geometric with a single-storey a, which
                  is what the logo wordmark itself is set in, so the headings and
                  the logo are the same voice. Set light (300) and large for the
                  display sizes: elegant without sacrificing legibility.
                  A high-contrast didone was tried here first and pulled: its
                  hairline strokes are hard to read at heading sizes and they
                  swallow hyphens and numerals outright.
     Karla        body copy. Warm grotesque, reads well at 17px.

   Buttons are square with a wipe fill. The logo is a flat hard-edged vector and
   rounding everything is the fastest way to look templated.
   ========================================================================== */

:root{
  --ink:#0A0A0A;
  --plum:#62037B;
  --plum-dk:#48005C;
  --violet:#85179C;
  --steel:#808285;        /* brand grey, from the logo. Non-text use. */
  --muted:#6A6C70;        /* small print. 5.26:1 on white, 4.78:1 on the shell. */
  --mist:#A7A9AC;
  --paper:#FFFFFF;
  --shell:#F6F3F7;
  --line:#E4E0E6;
  --body:#332D37;

  --content:1240px;
  --gutter:28px;

  /* type scale: seven steps, nothing off-scale */
  --fs-micro:.75rem;      /* 12px  eyebrows, nav, buttons, labels, tags, table heads */
  --fs-small:.875rem;     /* 14px  notes, roles, captions, footer, fine print */
  --fs-body:1.0625rem;    /* 17px  body copy */
  --fs-lead:1.1875rem;    /* 19px  lead paragraphs, FAQ questions */
  --fs-h3:1.375rem;       /* 22px  h3, stylist card names */
  --fs-h2:clamp(1.875rem,3.4vw,2.75rem);
  --fs-h1:clamp(2.25rem,5.2vw,4.25rem);

  /* spacing rhythm */
  --sp-xs:12px; --sp-s:20px; --sp-m:32px; --sp-l:48px; --sp-xl:64px; --sp-sec:96px;

  --display:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ui:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --text:'Karla',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --ease:cubic-bezier(.4,0,.2,1);

  /* phone glyph, masked so it inherits currentColor and follows hover states */
  --phone-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--text);font-size:var(--fs-body);line-height:1.7;
  color:var(--body);background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--plum);text-decoration-thickness:1px;text-underline-offset:4px}
a:hover{color:var(--violet)}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px}

/* keyboard skip link: off-screen until focused */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--plum);color:#fff;padding:14px 22px;
  font-family:var(--ui);font-size:var(--fs-micro);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none
}
.skip:focus{left:0}

/* ---------- type scale ---------- */
h1,h2,h3,h4{margin:0;color:var(--ink)}
h1,h2{font-family:var(--display);font-weight:300;font-style:normal}
h1{font-size:var(--fs-h1);line-height:1.06;letter-spacing:-.025em}
h2{font-size:var(--fs-h2);line-height:1.14;letter-spacing:-.022em}
h3{font-family:var(--ui);font-size:var(--fs-h3);line-height:1.32;font-weight:500;letter-spacing:-.012em}
h4{font-family:var(--ui);font-weight:600}
p,ul,ol{margin:0 0 1.15rem}
p:last-child{margin-bottom:0}

/* prose width is capped on the ELEMENT and stays left-aligned, so every block
   on the page keeps the same left edge */
.wrap p,.wrap li,.lead{max-width:44rem}
.lead{font-size:var(--fs-lead);line-height:1.62;color:var(--body)}

.wrap{width:100%;max-width:var(--content);margin-inline:auto;padding-inline:var(--gutter)}

/* Vertical rhythm lives here, not in the markup. Every gap on the site comes from
   one of these rules, so spacing stays consistent without inline styles. */
h2 + p, h2 + .lead, h2 + .stars, h2 + address, h2 + div, h2 + table{margin-top:var(--sp-s)}
h3 + p{margin-top:var(--sp-xs)}
p + h3, address + h3, div + h3, ul + h3{margin-top:var(--sp-m)}
p + h2, div + h2, ul + h2{margin-top:var(--sp-l)}
p + .btnrow, .lead + .btnrow, address + .btnrow, ul + .btnrow, div + .btnrow{margin-top:var(--sp-m)}
.lead + .split, h2 + .split, p + .split{margin-top:var(--sp-l)}
.note{margin-top:var(--sp-m);color:var(--muted);font-size:var(--fs-small)}
.addr__name{font-family:var(--display);font-size:var(--fs-h3);font-weight:400;color:var(--ink);letter-spacing:-.012em}
.sec--ink .lead{color:#C4BCCA}
.eyebrow{
  font-family:var(--ui);font-size:var(--fs-micro);font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--plum);margin:0 0 18px
}
.eyebrow--onDark{color:#C98BDB}

section{padding:var(--sp-sec) 0}
.sec--tight{padding:56px 0}
.sec--shell{background:var(--shell)}
.sec--ink{background:var(--ink);color:#E9E5EC}
.sec--ink h2,.sec--ink h3{color:#fff}
.sec--plum{background:var(--plum);color:#EFDFF4}
.sec--plum h2{color:#fff}

/* ---------- buttons ---------- */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:52px;padding:15px 30px;
  font-family:var(--ui);font-size:var(--fs-micro);font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;
  border:1px solid var(--plum);background:var(--plum);color:#fff;
  border-radius:0;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
/* the wipe: a panel slides up from the bottom on hover */
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:translateY(101%);transition:transform .38s var(--ease);
}
.btn:hover{color:#fff;border-color:var(--ink)}
.btn:hover::before{transform:translateY(0)}
.btn svg{width:18px;height:18px;flex:none;fill:currentColor;transition:transform .38s var(--ease)}
.btn:hover svg{transform:translateX(3px)}

.btn--ghost{background:transparent;color:var(--plum);border-color:var(--plum)}
.btn--ghost::before{background:var(--plum)}
.btn--ghost:hover{color:#fff;border-color:var(--plum)}

.btn--onDark{background:#fff;border-color:#fff;color:var(--ink)}
.btn--onDark::before{background:var(--violet)}
.btn--onDark:hover{color:#fff;border-color:var(--violet)}

.btn--onDarkGhost{background:transparent;border-color:rgba(255,255,255,.45);color:#fff}
.btn--onDarkGhost::before{background:#fff}
.btn--onDarkGhost:hover{color:var(--ink);border-color:#fff}

.btnrow{display:flex;flex-wrap:wrap;gap:16px;align-items:center}

/* ---------- demo banner (delete this block and the markup before launch) ---- */
.demobar{background:#1C1720;color:#D9CFE0;font-size:var(--fs-micro);padding:11px 0;font-family:var(--ui);letter-spacing:.01em}
.demobar strong{color:#D9A7E8;font-weight:600}
.demobar .wrap{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:28px;min-height:92px}
.hdr__logo{flex:none;line-height:0}
.hdr__logo img{height:62px;width:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:36px}
.nav a{
  position:relative;font-family:var(--ui);font-weight:500;font-size:var(--fs-micro);
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink);
  text-decoration:none;padding:8px 0
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--plum);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease)
}
.nav a:hover{color:var(--plum)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--plum)}
.hdr .btn{flex:none;padding:13px 24px;min-height:46px;font-size:var(--fs-micro)}
.navtoggle{
  display:none;margin-left:auto;align-items:center;gap:10px;
  background:none;border:1px solid var(--ink);color:var(--ink);
  font-family:var(--ui);font-weight:600;font-size:var(--fs-micro);letter-spacing:.13em;
  text-transform:uppercase;padding:12px 18px;border-radius:0;cursor:pointer
}

/* ---------- hero ---------- */
.hero{padding:0;position:relative;background:var(--ink);isolation:isolate;overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover}
/* two layers: a constant scrim over the whole frame, then a stronger one behind the copy */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(10,10,10,.58)}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(10,10,10,.88) 0%,rgba(10,10,10,.6) 52%,rgba(10,10,10,.2) 100%) /* unslop-ignore: second scrim layer, required for text contrast over a photo */
}
.hero .wrap{position:relative;padding-block:112px 100px;min-height:72vh;display:flex;flex-direction:column;justify-content:center}
.hero h1{color:#fff;max-width:15ch}
.hero .lead{color:#D5CDDA;margin-top:var(--sp-s)}
.hero .btnrow{margin-top:var(--sp-m)}
.hero__now{
  margin-top:var(--sp-m);display:inline-flex;align-items:center;gap:12px;align-self:flex-start;
  font-family:var(--ui);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:#EDEAEE;
  border:1px solid rgba(255,255,255,.24);padding:11px 18px
}
.dot{width:7px;height:7px;background:#5FD08A;flex:none;border-radius:50%} /* unslop-ignore: a status dot is a circle */
.dot--shut{background:var(--mist)}

.hero--page .wrap{padding-block:88px 76px;min-height:0}
.hero--page h1{max-width:19ch}

/* ---------- booking strip ---------- */
.howto{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:var(--sp-l);counter-reset:s;padding:0}
.howto li{list-style:none;border-top:1px solid rgba(255,255,255,.22);padding-top:24px;max-width:none}
.howto li::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  display:block;font-family:var(--ui);font-size:2.25rem;font-weight:300;line-height:1;
  letter-spacing:.02em;color:var(--violet);margin-bottom:16px
}
.howto h3{margin-bottom:8px;font-size:var(--fs-h3)}
.howto p{font-size:var(--fs-small);margin:0;line-height:1.65}
.sec--ink .howto p{color:#B9B1BF}
.sec--shell .howto li{border-top-color:var(--mist)}
.sec--shell .howto li::before{color:var(--plum)}

/* ---------- service menu ---------- */
.menu{margin:var(--sp-m) 0 0;padding:0;list-style:none;columns:2;column-gap:72px}
.menu li{
  break-inside:avoid;display:flex;align-items:baseline;gap:10px;
  padding:15px 0;border-bottom:1px solid var(--line);max-width:none
}
.menu .m__name{font-family:var(--ui);font-size:var(--fs-body);font-weight:500;color:var(--ink)}
.menu .m__dots{flex:1;border-bottom:1px dotted var(--mist);transform:translateY(-4px)}
.menu .m__price{font-family:var(--ui);font-size:var(--fs-body);font-weight:600;letter-spacing:.02em;color:var(--plum);white-space:nowrap}
.menu .m__note{display:block;font-size:var(--fs-small);color:var(--muted);font-family:var(--text);line-height:1.5;margin-top:3px}
.menugroup{margin-top:var(--sp-xl)}
.menugroup:first-child{margin-top:0}
.menugroup h3{
  font-family:var(--ui);font-size:var(--fs-micro);letter-spacing:.24em;text-transform:uppercase;
  color:var(--plum);font-weight:600;padding-bottom:14px;border-bottom:1px solid var(--plum)
}

/* ---------- stylist grid ---------- */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:var(--sp-l);padding:0;list-style:none}
.team li{max-width:none}
.tcard{display:block;text-decoration:none;color:inherit;height:100%}
.tcard__img{display:block;position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--shell)}
.tcard__img::after{
  content:"";position:absolute;inset:0;background:var(--plum);opacity:0;
  transition:opacity .4s var(--ease);mix-blend-mode:multiply
}
.tcard:hover .tcard__img::after{opacity:.22}
.tcard__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.tcard:hover .tcard__img img{transform:scale(1.05)}
.tcard__name{display:block;font-family:var(--display);font-size:var(--fs-h3);font-weight:400;color:var(--ink);margin:18px 0 5px;letter-spacing:-.015em}
.tcard:hover .tcard__name{color:var(--plum)}
.tcard__role{display:block;font-family:var(--ui);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.tcard__more{display:block;font-family:var(--ui);font-size:var(--fs-micro);font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--plum)}
.tcard:hover .tcard__more{color:var(--violet)}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:start}
.split--flip{grid-template-columns:7fr 5fr}
.split__media img{width:100%}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:var(--sp-s) 0 0;padding:0;list-style:none}
.tags li{
  max-width:none;font-family:var(--ui);font-size:var(--fs-micro);font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;
  border:1px solid var(--mist);padding:8px 14px;color:var(--ink)
}

/* ---------- proof ---------- */
.stars{color:var(--violet);letter-spacing:.18em;font-size:var(--fs-h3)}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:var(--sp-l);padding:0;list-style:none}
.quotes li{max-width:none;background:#fff;border:1px solid var(--line);padding:32px}
.quotes blockquote{margin:0;font-size:var(--fs-body);line-height:1.68}
.quotes blockquote::before{
  content:"";display:block;width:32px;height:2px;background:var(--plum);margin-bottom:20px
}
.quotes cite{display:block;margin-top:18px;font-style:normal;font-family:var(--ui);font-weight:600;font-size:var(--fs-micro);letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}

/* ---------- facts / hours ---------- */
.facts{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:var(--sp-l)}
.hours{width:100%;border-collapse:collapse;max-width:none}
.hours th,.hours td{
  text-align:left;padding:13px 0;border-bottom:1px solid var(--line);
  font-family:var(--ui);font-weight:400;font-size:var(--fs-small);letter-spacing:.02em
}
.hours th{font-weight:500;color:var(--ink);text-transform:uppercase;font-size:var(--fs-micro);letter-spacing:.13em}
.hours td{text-align:right;color:var(--body)}
.hours tr[data-today] th,.hours tr[data-today] td{color:var(--plum);font-weight:600}
.addr{font-style:normal;font-size:var(--fs-body);line-height:1.75}
.dirpanel{
  margin-top:var(--sp-xl);display:grid;grid-template-columns:1fr auto;gap:36px;align-items:center;
  background:var(--shell);border-left:2px solid var(--plum);padding:40px
}
.dirpanel__addr{font-family:var(--display);font-size:var(--fs-h3);font-weight:400;line-height:1.4;color:var(--ink);margin:0;letter-spacing:-.015em}
.dirpanel__note{margin:var(--sp-xs) 0 0;color:var(--muted);font-size:var(--fs-small)}

/* ---------- inline tap-to-call number ----------
   Every visible phone number on the site is one of these. On a phone it dials.
   On desktop it shows a prompt on hover so the affordance is obvious either way. */
.telink{
  position:relative;display:inline-block;white-space:nowrap;
  color:var(--plum);font-weight:600;text-decoration:none;
  border-bottom:1px dashed currentColor;
  transition:color .2s var(--ease),border-bottom-color .2s var(--ease)
}
.telink::before{
  content:"";display:inline-block;width:.82em;height:.82em;margin-right:.36em;
  vertical-align:-.06em;background:currentColor;
  -webkit-mask:var(--phone-mask) center/contain no-repeat;
          mask:var(--phone-mask) center/contain no-repeat
}
.telink:hover{color:var(--violet);border-bottom-style:solid}
/* inside a heading it inherits the heading weight, so it does not look pasted in */
h1 .telink,h2 .telink,h3 .telink{font-weight:inherit;border-bottom-width:2px}
/* on dark bands */
.sec--ink .telink,.sec--plum .telink,.hero .telink{color:#D9A7E8}
.sec--ink .telink:hover,.sec--plum .telink:hover,.hero .telink:hover{color:#fff}

/* the hover prompt: pointer devices only, so it never sticks on a phone */
@media (hover:hover) and (pointer:fine){
  .telink::after{
    content:"Click to call";
    position:absolute;left:50%;bottom:calc(100% + 10px);
    transform:translateX(-50%) translateY(4px);
    background:var(--ink);color:#fff;
    font-family:var(--ui);font-size:11px;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;
    padding:7px 11px;white-space:nowrap;pointer-events:none;
    opacity:0;transition:opacity .18s var(--ease),transform .18s var(--ease);
    z-index:5
  }
  .telink:hover::after,.telink:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)}
}
/* comfortable tap target on touch */
@media (hover:none){
  .telink{padding:2px 0}
}

/* ---------- in-page jump links (one long services page stays navigable) ---- */
.jumps{display:flex;flex-wrap:wrap;gap:10px;margin:var(--sp-m) 0 0;padding:0;list-style:none}
.jumps li{max-width:none}
.jump{
  display:inline-block;font-family:var(--ui);font-size:var(--fs-micro);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  color:#fff;border:1px solid rgba(255,255,255,.34);padding:10px 16px;
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)
}
.jump:hover{background:#fff;border-color:#fff;color:var(--ink)}
/* the sticky header must not cover a section you just jumped to */
section[id]{scroll-margin-top:104px}

/* ---------- breadcrumbs ---------- */
.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 18px;
  font-family:var(--ui);font-size:var(--fs-micro);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase
}
.crumbs a{color:#C98BDB;text-decoration:none}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs [aria-current]{color:rgba(255,255,255,.62)}
.crumbs__sep{color:rgba(255,255,255,.32)}

/* ---------- definition list (service "what's included" / "how it works") ---- */
.deflist{display:grid;grid-template-columns:repeat(2,1fr);gap:32px 48px;margin:var(--sp-xl) 0 0;padding:0;list-style:none;counter-reset:d}
.deflist li{max-width:none;border-top:1px solid var(--line);padding-top:20px}
.deflist h3{margin-bottom:10px}
.deflist p{font-size:var(--fs-small);line-height:1.65;margin:0;max-width:34rem}
.deflist--num li::before{
  counter-increment:d;content:counter(d,decimal-leading-zero);
  display:block;font-family:var(--ui);font-size:1.75rem;font-weight:300;line-height:1;
  color:var(--plum);margin-bottom:12px
}
.deflist--num{grid-template-columns:repeat(3,1fr)}
.sec--shell .deflist li{border-top-color:var(--mist)}

/* ---------- FAQ ---------- */
.faq{margin-top:var(--sp-l);border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:22px 48px 22px 0;position:relative;
  font-family:var(--ui);font-size:var(--fs-lead);font-weight:500;color:var(--ink);
  transition:color .25s var(--ease)
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:10px;top:50%;width:14px;height:1px;
  background:var(--plum);transition:transform .3s var(--ease)
}
.faq summary::before{
  content:"";position:absolute;right:10px;top:50%;width:14px;height:1px;
  background:var(--plum);transform:rotate(90deg);transition:transform .3s var(--ease)
}
.faq details[open] summary::before{transform:rotate(0deg)}
.faq summary:hover,.faq details[open] summary{color:var(--plum)}
.faq p{padding:0 0 24px;max-width:44rem}

/* ---------- final call band ---------- */
.callband .tel{
  display:inline-block;font-family:var(--ui);font-weight:300;
  font-size:clamp(2.25rem,5.2vw,3.75rem);color:#fff;text-decoration:none;
  letter-spacing:.005em;margin-top:var(--sp-xs);transition:color .3s var(--ease)
}
.callband .tel:hover{color:#E6B8F5}

/* ---------- footer ---------- */
.ftr{background:var(--ink);color:#A9A1B0;padding:80px 0 28px;font-size:var(--fs-small)}
.ftr a{color:#E0DAE4;text-decoration:none}
.ftr a:hover{color:#E6B8F5}
.ftr__grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1.2fr;gap:36px}
/* the logo's hair illustration cannot be knocked out to white: inverting it turns
   the face into a black void. It sits on a white plate instead, as drawn. */
.ftr__plate{display:inline-block;background:#fff;padding:16px 22px;margin-bottom:24px}
.ftr__plate img{height:66px;width:auto}
.ftr__h{font-family:var(--ui);color:#fff;font-size:var(--fs-micro);letter-spacing:.2em;text-transform:uppercase;font-weight:600;margin:0 0 16px}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:10px;max-width:none}
.ftr__t{color:#7C7483}
.ftr__affil{margin:18px 0 0;font-size:var(--fs-micro);letter-spacing:.04em;color:#8D8593}
.ftr__base{margin-top:56px;padding-top:24px;border-top:1px solid #221D26;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;font-size:var(--fs-micro);letter-spacing:.02em;color:#7C7483}

/* ---------- sticky mobile call bar ---------- */
.callbar{display:none}

/* ---------- responsive ---------- */
@media (max-width:1023px){
  section{padding:96px 0}
  .deflist,.deflist--num{grid-template-columns:repeat(2,1fr);gap:28px 36px}
  .team{grid-template-columns:repeat(2,1fr);gap:36px}
  .quotes{grid-template-columns:1fr;gap:20px}
  .howto{grid-template-columns:1fr;gap:32px;margin-top:48px}
  .split,.split--flip{grid-template-columns:1fr;gap:40px}
  .facts{grid-template-columns:1fr;gap:48px}
  .ftr__grid{grid-template-columns:repeat(3,1fr);gap:32px}
  .dirpanel{grid-template-columns:1fr;gap:28px;padding:36px}
}
@media (max-width:960px){
  .hdr .btn{display:none}
  .navtoggle{display:inline-flex}
  .nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--line);padding:8px var(--gutter) 24px
  }
  .nav.is-open{display:flex}
  .nav a{padding:18px 0;border-bottom:1px solid var(--line);font-size:.875rem}
  .nav a::after{display:none}
  body{padding-bottom:70px}
  .callbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    align-items:center;justify-content:center;gap:10px;
    min-height:62px;background:var(--plum);color:#fff;text-decoration:none;
    font-family:var(--ui);font-weight:600;font-size:var(--fs-micro);
    letter-spacing:.12em;text-transform:uppercase;
    box-shadow:0 -2px 20px rgba(10,10,10,.28)
  }
  .callbar:hover,.callbar:visited{color:#fff}
  .callbar svg{width:18px;height:18px;fill:currentColor}
}

@media (max-width:767px){
  :root{--gutter:18px}
  .deflist,.deflist--num{grid-template-columns:1fr;gap:24px}
  .crumbs{gap:8px;letter-spacing:.1em}
  section{padding:72px 0}
  .sec--tight{padding:44px 0}
  .hero .wrap{padding-block:84px 76px;min-height:0}
  .hero--page .wrap{padding-block:68px 56px}
  .hero::after{background:linear-gradient(180deg,rgba(10,10,10,.5) 0%,rgba(10,10,10,.82) 100%)} /* unslop-ignore: mobile scrim */
  .hero__now{margin-top:32px}
  .menu{columns:1}
  .menugroup{margin-top:56px}
  .team{grid-template-columns:repeat(2,1fr);gap:24px}
  .tcard__name{font-size:1.25rem;margin-top:16px}
  .ftr__grid{grid-template-columns:1fr;gap:36px}
  .ftr{padding:72px 0 24px}
  .hdr .wrap{min-height:76px}
  .hdr__logo img{height:48px}
  .quotes li{padding:32px}
  .dirpanel{padding:28px 24px}
  .dirpanel__addr{font-size:1.375rem}
}
@media (max-width:400px){
  .team{grid-template-columns:1fr}
  /* .btn is nowrap + overflow:hidden, so a long label (a stylist's name) is
     clipped silently rather than overflowing visibly. Let it wrap down here. */
  .btn{white-space:normal;text-align:center;padding-left:20px;padding-right:20px;letter-spacing:.08em}
  .hdr .btn{white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}