/* ==========================================================================
   Apgujeong Hair Studio — shared stylesheet

   White leads. Black is the accompanying colour: type, the plates, one dark band
   per page, the footer. Copper (#764C28, the exact value on the studio's own unit
   plates) is held back to eyebrows, links and one or two accents, so the site is
   not flatly monochrome but is never warm-dominant either.
   ========================================================================== */

:root{
  --ink:#101010;          /* true black, not the brown-black that read as dull */
  --ink-2:#1E1E1E;
  --copper:#764C28;       /* from the salon unit plates; used sparingly */
  --copper-dp:#5B3A1E;
  --brass:#C08A4A;        /* copper lifted, for type on black */
  --paper:#FFFFFF;        /* the page */
  --shade:#F6F6F4;        /* the quiet alternate band */
  --panel:#EDECE8;        /* the stronger panel */
  --sage:#6E7F62;
  --text:#3C3C3A;
  --muted:#78776F;
  --line:#E7E6E2;
  --line-2:#CCCBC5;

  --shell:1180px;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --body:Figtree,system-ui,-apple-system,sans-serif;

  --r-sm:10px;
  --r-md:18px;
  --r-lg:28px;
  --lift:0 18px 40px -30px rgba(16,16,16,.35);
  --lift-2:0 28px 60px -36px rgba(16,16,16,.42);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:var(--body);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
p{margin:0}
ul,ol{margin:0;padding:0}
a{color:var(--copper);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px;border-radius:4px}

.shell{max-width:var(--shell);margin:0 auto;padding:0 26px}
.shell--narrow{max-width:820px}

/* ---------- type roles ---------- */
h1,h2,h3,h4{
  margin:0;color:var(--ink);font-family:var(--body);
  font-weight:700;line-height:1.1;
}
h1{font-size:clamp(38px,5.6vw,66px);line-height:1.04}
h2{font-size:clamp(28px,3.6vw,42px)}
h3{font-size:clamp(20px,2.1vw,24px);line-height:1.2}
h4{font-size:18px;line-height:1.3}

.eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--copper);margin:0 0 16px;
}
.eyebrow--light{color:var(--brass)}
.lede{font-size:clamp(17px,1.55vw,19.5px);line-height:1.58;max-width:56ch}
.small{font-size:14.5px;line-height:1.55}
.muted{color:var(--muted)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 28px;border-radius:999px;border:1.5px solid var(--ink);
  background:var(--ink);color:#fff;text-decoration:none;
  font-family:var(--body);font-size:15px;font-weight:600;letter-spacing:.01em;
  transition:background .2s,color .2s,border-color .2s,transform .2s;
}
.btn:hover{background:transparent;color:var(--ink);transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn--ghost:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn--onink{background:#fff;border-color:#fff;color:var(--ink)}
.btn--onink:hover{background:transparent;border-color:#fff;color:#fff}
.btn--outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.btn--outline-light:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn--sm{padding:10px 20px;font-size:14px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* ---------- masthead ---------- */
.masthead{background:var(--paper);border-bottom:1px solid var(--line);position:relative;z-index:40}
.masthead__bar{display:flex;align-items:center;gap:22px;padding:16px 0}
.masthead__logo img{width:158px;filter:invert(1)}
.masthead__logo{display:block;flex:none}
.nav{display:flex;gap:4px;margin-left:auto;list-style:none;align-items:center}
.nav a{
  display:block;padding:9px 13px;border-radius:999px;text-decoration:none;
  font-size:14.5px;font-weight:500;color:var(--text);white-space:nowrap;
  transition:background .18s,color .18s;
}
.nav a:hover{background:var(--shade);color:var(--ink)}
.nav a[aria-current="page"]{background:var(--ink);color:#fff}
.masthead .btn{flex:none}
.navtoggle{display:none}

.nav__caret{
  display:inline-block;width:7px;height:7px;margin-left:6px;margin-bottom:1px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);vertical-align:middle;opacity:.55;
}
.nav__sub{
  list-style:none;display:flex;flex-direction:column;gap:2px;
  margin:2px 0 8px 13px;padding-left:11px;border-left:1px solid var(--line-2);
}
.nav__sub a{font-size:14px;padding:8px 12px}

@media(min-width:1100px){
  .nav__has-sub{position:relative}
  .nav__has-sub > a[aria-current="page"] .nav__caret{opacity:.9}
  .nav__sub{
    /* top:100% with no margin, so the dropdown's hoverable box starts the
       instant the "Prices" link's own box ends — a real mouse moving in a
       straight line down from the link used to cross a 6px gap here where
       nothing was hovered, which closed the menu before the pointer ever
       reached it. padding-top keeps the same visual breathing room as
       before without that dead zone. */
    display:none;position:absolute;left:0;top:100%;margin:0;padding:12px 6px 6px;
    min-width:180px;background:var(--paper);border:1px solid var(--line);
    border-radius:14px;box-shadow:var(--lift);border-left:none;z-index:41;
  }
  .nav__has-sub:hover .nav__sub,
  .nav__has-sub:focus-within .nav__sub{display:flex}
  .nav__sub a{border-radius:10px;white-space:nowrap}
}

@media(max-width:1099px){
  .masthead__bar{gap:14px}
  .nav{
    position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;
    align-items:stretch;gap:2px;background:var(--paper);
    border-bottom:1px solid var(--line);padding:12px 26px 22px;box-shadow:var(--lift);
  }
  .nav a{padding:12px 14px;font-size:16px}
  .nav__sub a{font-size:15px}
  .navtoggle{
    display:inline-flex;align-items:center;gap:9px;margin-left:auto;
    background:transparent;border:1.5px solid var(--line-2);border-radius:999px;
    padding:9px 16px;font-family:var(--body);font-size:14px;font-weight:600;
    color:var(--ink);cursor:pointer;
  }
  .navtoggle span{display:block;width:16px;height:1.5px;background:var(--ink);position:relative}
  .navtoggle span::before,.navtoggle span::after{
    content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--ink)}
  .navtoggle span::before{top:-5px}
  .navtoggle span::after{top:5px}
  .masthead[data-open="true"] .nav{display:flex}
  .masthead .btn--book{display:none}
}

/* ---------- generic band ---------- */
.band{padding:84px 0}
.band--tight{padding:60px 0}
.band--panel{background:var(--panel)}
.band--shade{background:var(--shade)}
.band--ink{background:var(--ink);color:rgba(255,255,255,.76)}
.band--ink h1,.band--ink h2,.band--ink h3,.band--ink h4{color:#fff}
.band--copper{background:var(--copper);color:rgba(255,255,255,.86)}
.band--copper h2,.band--copper h3{color:#fff}
.band--copper .eyebrow{color:rgba(255,255,255,.7)}
.band__head{max-width:62ch;margin-bottom:38px}
.band__head p{margin-top:14px}
.band__head--split{display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px 40px;max-width:none}
.band__head--split>div{max-width:58ch}
.band__head--split .btn{margin-left:auto}

/* ==========================================================================
   Page tops. Every page gets its own structure here, because the top of a page
   is the largest thing on it and eight identical banners would say nothing.
   What they share: the eyebrow, the h1, the lede, and the rhythm.
   What changes: the field colour and the device carrying the page's content.
   ========================================================================== */
.top{padding:62px 0 70px;position:relative;overflow:hidden}
.top .lede{margin-top:20px}
.top--dark{background:var(--ink);color:rgba(255,255,255,.74)}
.top--dark h1,.top--dark h2{color:#fff}
.top--dark .lede{color:rgba(255,255,255,.74)}
.top--panel{background:var(--panel)}
.top--shade{background:var(--shade)}

/* wet vs dry: the page is a binary, so the top shows both, side by side */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:40px}
.duo figure{margin:0}
.duo img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-md);
  border:1px solid var(--line)}
.duo figcaption{padding-top:13px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.duo figcaption b{display:block;font-family:var(--body);
  font-weight:700;font-size:16.5px;letter-spacing:0;text-transform:none;color:var(--ink);
  margin-bottom:3px}
@media(max-width:559px){.duo{grid-template-columns:minmax(0,1fr)}}

/* promotions: the two percentages are the page, so they are the top */
.offerjump{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:40px}
.offerjump a{display:block;padding:24px 26px 26px;border-radius:var(--r-lg);background:var(--paper);
  border:1px solid var(--line);
  text-decoration:none;color:inherit;box-shadow:var(--lift);transition:transform .3s,box-shadow .3s}
.offerjump a:hover{transform:translateY(-5px);box-shadow:var(--lift-2)}
.offerjump .pct{display:block;font-family:var(--body);
  font-weight:700;font-size:clamp(44px,7vw,80px);color:var(--copper);line-height:.88}
.offerjump b{display:block;font-family:var(--body);
  font-weight:700;font-size:18px;color:var(--ink);margin-top:14px}
.offerjump span.who{display:block;font-size:14.5px;color:var(--muted);margin-top:4px}
@media(max-width:559px){.offerjump{grid-template-columns:minmax(0,1fr)}}

/* a top that ends in a device does not need the full 70px under it */
.top--device{padding-bottom:22px}

.member{scroll-margin-top:24px}

/* press: an archive, so the top is the clippings themselves */
.top--archive{padding-bottom:74px}
.archive{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:52px;align-items:center}
.fan{display:flex;justify-content:center;align-items:center;padding:10px 0}
.fan img{width:52%;border-radius:12px;box-shadow:var(--lift-2);background:#fff}
.fan img:first-child{transform:rotate(-5deg) translateX(11%);position:relative;z-index:1}
.fan img:last-child{transform:rotate(5deg) translateX(-11%)}
.outletlist{display:flex;flex-wrap:wrap;gap:9px 10px;margin-top:30px;list-style:none}
.outletlist li{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text);background:var(--shade);border-radius:999px;padding:6px 13px}
@media(max-width:859px){.archive{grid-template-columns:minmax(0,1fr);gap:34px}
  .fan{order:-1}.fan img{width:46%}}

@media(max-width:759px){
  .top{padding:46px 0 54px}
}

/* ---------- home hero (centered intro over the studio's five-service panorama) ---------- */
.hero{background:var(--paper);padding:72px 0 60px}
.hero__copy{max-width:640px;margin:0 auto;text-align:center}
.hero__copy .lede{margin:22px auto 0;max-width:52ch}
.hero__copy .btn-row{justify-content:center}
.hero h1{color:var(--ink)}

.panorama{
  /* Narrower than the full 1180px shell on purpose — it's a strip of
     photography under the hero, not a full-width banner — and centred
     within it. */
  max-width:860px;margin:50px auto 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--lift-2);background:var(--shade);
}
.panorama__panel{position:relative;display:block}
.panorama__panel img{display:block;width:100%;height:auto;aspect-ratio:220/336;object-fit:cover}

@media(max-width:759px){
  .hero{padding:48px 0 44px}
  .panorama{
    max-width:none;margin-top:32px;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
    border-radius:0;box-shadow:none;
  }
}

/* ---------- split feature ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.band--ink .split,.band--copper .split{align-items:start}
.split--wide-left{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
.split__fig{margin:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--lift)}
.split__fig img{width:100%;aspect-ratio:4/3;object-fit:cover}
.split p+p{margin-top:16px}
@media(max-width:899px){.split,.split--wide-left{grid-template-columns:minmax(0,1fr);gap:32px}}

/* ---------- salon cards, built around the studio's unit-number plates ---------- */
.salons{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
@media(min-width:660px){.salons{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.salons{grid-template-columns:repeat(3,minmax(0,1fr))}}
.salon{
  background:var(--paper);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--lift);display:flex;flex-direction:column;
  transition:transform .3s,box-shadow .3s;
}
.salon:hover{transform:translateY(-5px);box-shadow:var(--lift-2)}
.salon__plate{background:var(--ink);padding:26px 26px 22px}
.salon__plate b{display:block;font-family:var(--body);
  font-weight:700;color:var(--brass);font-size:26px;line-height:1.15}
.salon__plate span{display:block;margin-top:10px;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.salon__unit{background:var(--shade);padding:17px 26px 15px;display:flex;align-items:baseline;gap:11px}
.salon__unit span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--copper-dp);opacity:.7}
.salon__unit b{font-family:var(--body);font-weight:700;
  font-size:21px;line-height:1.15;color:var(--copper-dp)}
.salon__body{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
.salon__body h3{font-size:22px}
.salon__addr{font-size:14.5px;color:var(--muted);margin-top:9px;line-height:1.5}
.salon__mrt{
  display:inline-block;margin-top:13px;padding:5px 12px;border-radius:999px;
  background:var(--shade);color:var(--copper-dp);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
}
.salon__meta{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  list-style:none;font-size:14px}
.salon__meta li{display:flex;gap:10px;padding:3px 0}
.salon__meta dt,.salon__meta .k{
  flex:0 0 74px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);padding-top:4px}
.salon__meta a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-2)}
.salon__meta a:hover{color:var(--copper);border-bottom-color:var(--copper)}
.salon__actions{display:flex;gap:10px;margin-top:auto;padding-top:22px}
.salon__actions .btn{flex:1;padding:11px 14px;font-size:14px}

/* ---------- team ---------- */
/* always exactly three directors: one column, then straight to three even columns, no
   awkward two-plus-one halfway stage */
.team{display:grid;gap:24px;grid-template-columns:minmax(0,1fr)}
@media(min-width:660px){.team{grid-template-columns:repeat(3,minmax(0,1fr))}}
.team--wide{grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.team--wide{grid-template-columns:repeat(2,minmax(0,1fr))}}
.member{background:var(--paper);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--lift);
  border:1px solid var(--line);
  display:flex;flex-direction:column}
.member img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%}
.member__body{padding:22px 24px 26px}
.member__body h3{font-size:21px}
.member__role{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--copper);margin-top:8px}
.member__salon{font-size:14px;color:var(--muted);margin-top:4px}
.member__bio{font-size:15px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.member--row{display:grid;grid-template-columns:38% minmax(0,1fr)}
.member--row img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
@media(max-width:559px){.member--row{grid-template-columns:minmax(0,1fr)}
  .member--row img{aspect-ratio:4/3;height:auto}}

/* ---------- price tables ---------- */
/* the studio's own price-list graphic */
.pricelist{margin:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--lift);
  background:var(--paper);border:1px solid var(--line)}
.pricelist img{width:100%;height:auto}
.pricelist figcaption{padding:14px 20px 16px;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  border-top:1px solid var(--line)}

/* cut tiers */
.tiers{display:grid;gap:14px;grid-template-columns:repeat(4,minmax(0,1fr))}
.tier{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:22px 22px 20px;display:flex;flex-direction:column;gap:5px}
.tier__rank{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted)}
.tier h3{font-size:19px}
.tier__amt{margin-top:auto;padding-top:18px;font-family:var(--mono);font-size:23px;font-weight:600;
  color:var(--copper);font-variant-numeric:tabular-nums}
.tier__amt .cur{font-size:14px;opacity:.55}
.tier--top{background:var(--ink);border-color:var(--ink)}
.tier--top h3{color:#fff}
.tier--top .tier__rank{color:rgba(255,255,255,.55)}
.tier--top .tier__amt{color:var(--brass)}
@media(max-width:899px){.tiers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:479px){.tiers{grid-template-columns:minmax(0,1fr)}}

/* ---------- length guide ---------- */
.guide__fig{margin:38px 0;width:100%}
.guide__fig img{width:100%;display:block}
.guide__list{list-style:none;border-top:1px solid var(--line-2);max-width:640px}
.guide__list li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:16px;align-items:baseline;
  padding:14px 6px;border-bottom:1px solid var(--line);transition:background .2s}
.guide__list code{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;
  color:var(--muted);text-transform:uppercase}
.guide__list b{display:block;color:var(--ink);font-family:var(--body);
  font-weight:700;font-size:17px}
.guide__list span{font-size:14.5px}

/* ---------- notes / fine print ---------- */
.notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px;list-style:none;
  border-top:1px solid var(--line-2)}
.notes li{padding:16px 0;border-bottom:1px solid var(--line);font-size:15px}
.notes b{display:block;color:var(--ink);font-family:var(--body);
  font-weight:700;font-size:16px;margin-bottom:3px}
@media(max-width:859px){.notes{grid-template-columns:minmax(0,1fr)}}

/* ---------- offer cards ---------- */
.offers{display:grid;gap:26px;grid-template-columns:minmax(0,1fr)}
@media(min-width:840px){.offers{grid-template-columns:repeat(2,minmax(0,1fr))}}
.offer{background:var(--paper);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--lift);
  border:1px solid var(--line);
  display:flex;flex-direction:column}
.offer img{width:100%;aspect-ratio:1/1;object-fit:cover}
.offer__body{padding:28px 30px 30px;display:flex;flex-direction:column;flex:1}
.offer__pct{font-family:var(--body);font-weight:700;
  font-size:clamp(40px,5vw,58px);color:var(--copper);line-height:.95}
.offer h3{margin-top:10px}
.offer p{margin-top:12px}
.offer__terms{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);list-style:none;
  font-size:14px;color:var(--muted)}
.offer__terms li{position:relative;padding:4px 0 4px 18px}
.offer__terms li::before{content:"";position:absolute;left:0;top:14px;width:9px;height:1px;
  background:var(--sage)}
.offer__terms{margin-bottom:22px}
.offer .btn{margin-top:auto;align-self:flex-start}

/* ---------- compare (wet vs dry) ---------- */
.compare{display:grid;gap:26px;grid-template-columns:minmax(0,1fr)}
@media(min-width:840px){.compare{grid-template-columns:repeat(2,minmax(0,1fr))}}
.compare__card{background:var(--paper);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--lift);
  border:1px solid var(--line);
  display:flex;flex-direction:column}
.compare__card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.compare__card--text{border-top:4px solid var(--copper)}
.compare__card--text .compare__body{padding-top:30px}
.compare__body{padding:28px 30px 30px}
.compare__body h3{font-size:24px}
.compare__body p{margin-top:12px}
.compare__list{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);list-style:none;
  font-size:15px}
.compare__list li{position:relative;padding:5px 0 5px 22px}
.compare__list li::before{content:"";position:absolute;left:0;top:15px;width:12px;height:1px;
  background:var(--copper)}
.compare__list--con li::before{background:var(--line-2)}

.prose h2{margin-top:44px}
.prose h3{margin-top:34px}
.prose p{margin-top:14px;max-width:70ch}
.prose>*:first-child{margin-top:0}

/* ---------- press ---------- */
.press{list-style:none;border-top:1px solid var(--line-2)}
.press>li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px 36px;
  padding:26px 0;border-bottom:1px solid var(--line);align-items:start}
.press__when{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--copper);padding-top:5px}
.press h3{font-size:21px}
.press p{margin-top:9px;max-width:64ch}
.press__partner{display:inline-block;margin-top:12px;padding:5px 12px;border-radius:999px;
  background:var(--shade);color:var(--copper-dp);font-size:12.5px;font-weight:500}
@media(max-width:699px){.press>li{grid-template-columns:minmax(0,1fr);gap:6px}
  .press__when{padding-top:0}}

.clips{display:grid;gap:20px;grid-template-columns:minmax(0,1fr);margin-top:34px}
@media(min-width:660px){.clips{grid-template-columns:repeat(2,minmax(0,1fr))}}
.clips{max-width:760px}
.clip{margin:0;background:var(--paper);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--lift);
  border:1px solid var(--line)}
.clip img{width:100%;aspect-ratio:3/4;object-fit:cover}
.clip figcaption{padding:14px 16px 16px;font-size:14px;color:var(--muted)}

/* ---------- booking outlets ---------- */
.outlets{list-style:none;border-top:1px solid rgba(255,255,255,.16)}
.outlets li{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.13)}
.outlets .name{font-family:var(--body);font-weight:700;
  color:#fff;font-size:17px;flex:1 1 170px}
.outlets a{font-size:14px;color:var(--brass);text-decoration:none;
  border-bottom:1px solid rgba(185,130,67,.45);padding-bottom:2px}
.outlets a:hover{color:#fff;border-bottom-color:#fff}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:rgba(255,255,255,.6);padding:60px 0 40px}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));gap:36px 44px}
.foot img{width:150px;margin-bottom:18px}
.foot h4{font-family:var(--body);font-size:17px;
  color:var(--brass);font-weight:700;margin-bottom:14px}
.foot ul{list-style:none;display:grid;gap:8px}
.foot a{color:rgba(255,255,255,.66);text-decoration:none;font-size:15px}
.foot a:hover{color:#fff}
.foot__social{display:flex;align-items:center;gap:9px}
.foot__icon{flex:none;opacity:.85}
.foot__social:hover .foot__icon{opacity:1}
.foot__note{font-size:14.5px;max-width:40ch}
.foot__base{margin-top:38px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:8px 26px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.42)}
@media(max-width:759px){.foot__grid{grid-template-columns:minmax(0,1fr);gap:30px}}

/* ---------- shared responsive ---------- */
@media(max-width:759px){
  body{font-size:16.5px}
  .shell{padding:0 20px}
  .band{padding:58px 0}
  .band--tight{padding:44px 0}
  .phero{padding:48px 0 56px}
  .band__head{margin-bottom:28px}
  .band__head--split .btn{margin-left:0}
  .tiers{grid-template-columns:minmax(0,1fr);gap:10px}
  .tier{flex-direction:row;align-items:center;flex-wrap:wrap;gap:6px 14px;padding:16px 20px}
  .tier__rank{flex:none;order:1}
  .tier h3{order:2;flex:1 1 auto;font-size:17px}
  .tier__amt{order:3;margin-top:0;padding-top:0;font-size:19px}
  .figure{width:78px;height:135px}
  .split__fig img,.phero__fig img{aspect-ratio:4/3}
  .hero__facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}

}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* ==========================================================================
   WordPress theme additions. Everything above this line is the studio's
   original stylesheet, unchanged. Everything below is new: WordPress core
   conventions (skip link, screen-reader text, block alignment classes) and
   the small number of styling additions the WordPress conversion itself
   required, documented inline.
   ========================================================================== */

/* ---------- accessibility / WP core utility classes ---------- */
.screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;
  overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;
}
.skip-link.screen-reader-text{
  background:var(--ink);color:#fff;display:block;font-family:var(--body);font-weight:600;
  padding:14px 22px;position:fixed;top:-100px;left:14px;z-index:100000;border-radius:0 0 10px 10px;
  transition:top .2s;
}
.skip-link.screen-reader-text:focus{
  clip:auto!important;clip-path:none;height:auto;width:auto;top:0;
}

/* ---------- block editor alignment support, for the_content() on
   generic pages, single posts and the blog archive ---------- */
.alignwide{max-width:calc(var(--shell) + 120px);margin-left:auto;margin-right:auto}
.alignfull{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.alignleft{float:left;margin:6px 24px 12px 0}
.alignright{float:right;margin:6px 0 12px 24px}
.aligncenter{display:block;margin-left:auto;margin-right:auto}
.wp-caption{max-width:100%}
.wp-caption-text,.gallery-caption{font-size:13.5px;color:var(--muted);margin-top:8px}
.wp-block-image img{border-radius:var(--r-md)}

/* ---------- generic entry content (blog / single / search / 404 fallbacks) ---------- */
.entry-content{max-width:70ch}
.entry-content>*+*{margin-top:14px}
.entry-content h2{margin-top:44px}
.entry-content h3{margin-top:34px}
.entry-content ul,.entry-content ol{padding-left:1.3em;margin-top:14px}
.entry-content ul{list-style:disc}
.entry-content ol{list-style:decimal}
.entry-content blockquote{
  margin:26px 0;padding:4px 0 4px 22px;border-left:3px solid var(--copper);
  color:var(--muted);font-style:italic;
}
.entry-meta{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted)}
.entry-list{display:grid;gap:24px;grid-template-columns:minmax(0,1fr);margin-top:34px}
@media(min-width:660px){.entry-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.entry-card{background:var(--paper);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--lift);
  border:1px solid var(--line);padding:26px}
.entry-card h2{font-size:22px}
.entry-card .entry-meta{margin-bottom:10px}
.pagination{display:flex;flex-wrap:wrap;gap:10px;margin-top:44px}
.pagination a,.pagination span{
  display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;
  padding:0 12px;border-radius:999px;border:1px solid var(--line-2);text-decoration:none;
  color:var(--ink);font-size:14px;font-weight:600;
}
.pagination .current{background:var(--ink);border-color:var(--ink);color:#fff}
.search-form{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;max-width:480px}
.search-form__field{
  flex:1 1 220px;padding:12px 18px;border-radius:999px;border:1.5px solid var(--line-2);
  font-family:var(--body);font-size:15px;background:var(--paper);color:var(--text);
}
.search-form__submit{flex:none}

/* ---------- homepage service panels: the studio's original photos had the
   category name baked into the JPEG, which a non-technical admin could never
   edit. Same five tall panels, same photos, but the label is now real HTML
   text in a scrim overlay so "Service names" stay editable per the brief. ---------- */
.panorama__panel{position:relative}
.panorama__label{
  position:absolute;left:0;right:0;bottom:0;padding:14px 14px 12px;
  background:linear-gradient(180deg,rgba(16,16,16,0) 0%,rgba(16,16,16,.72) 78%);
  color:#fff;font-family:var(--body);font-weight:700;font-size:15px;line-height:1.15;
  text-transform:uppercase;letter-spacing:.01em;
}
@media(max-width:759px){.panorama__label{font-size:11.5px;padding:10px 8px 8px}}

/* ---------- salon card optional outlet photo: the brief asks every outlet
   to support an editable photo; the original card design didn't carry one,
   so it's added as a small thumbnail beside the name rather than replacing
   the plate device, kept optional so cards look identical when no photo is
   set (see salon-card.php: the markup is skipped entirely if empty). ---------- */
.salon__photo{
  width:44px;height:44px;border-radius:999px;object-fit:cover;flex:none;
  border:2px solid rgba(255,255,255,.5);
}
/* .salon__plate keeps its original block stacking (name over unit); the
   photo is positioned in the corner so it never disturbs that text flow */
.salon__plate{position:relative}
.salon__plate .salon__photo{position:absolute;top:20px;right:22px}
.salon__unit .salon__photo{width:36px;height:36px;border-color:var(--paper);align-self:center}