/* ==========================================================================
   Milton Salon & Barber Shop
   Palette: porcelain, nickel and ink from the shop's own materials; crimson and
   gold from the 2026-10 logo (red gradient wordmark, gold rules and tools).
   ========================================================================== */

@font-face{font-family:Anton;src:url(../fonts/anton-latin.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Newsreader;src:url(../fonts/newsreader-var.woff2) format('woff2');
  font-weight:200 800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --porcelain:#F6F4F0;
  --talc:#FFFFFF;
  --ink:#141418;
  --ink-soft:#2C2C33;
  --nickel:#6E6E76;
  --hair:#DFDAD2;          /* hairline rules on porcelain */
  --hair-dk:#33333B;       /* hairline rules on ink */
  /* 2026-10 logo: red gradient wordmark (#E50300 -> #A30501), gold rules and tools,
     red/white/blue pole. Crimson is the action colour, gold the ornament. */
  --crimson:#A30501;       /* wordmark base - 7.4:1 on porcelain, white on it 8.1:1 */
  --crimson-hi:#C30400;    /* hover; the top of the wordmark gradient */
  --crimson-deep:#8E0A08;  /* pressed */
  --gold:#7D5A0C;          /* logo gold darkened to carry text on porcelain (5.7:1) */
  --gold-lt:#D4AF4A;       /* logo gold on ink (8.8:1) */
  --gold-hi:#E8CA77;       /* logo highlight - decorative only, never text */
  --brass:var(--gold);     /* aliases: the rest of the sheet keeps var(--brass) / var(--brass-lt) */
  --brass-lt:var(--gold-lt);
  --cobalt:#24476B;        /* inner-page illustrations only; the shell uses crimson */
  --pole-red:#C30400;      /* barber pole - matches the logo pole */
  --pole-blue:#1B3F8F;
  --shell:1200px;
  --gut:clamp(18px,4vw,40px);

  --f-display:Anton,"Arial Narrow",Impact,sans-serif;
  --f-text:Newsreader,Georgia,"Times New Roman",serif;

  /* major third from 17px */
  --t-0:17px; --t-1:21px; --t-2:27px; --t-3:33px;
  --t-4:clamp(33px,4.4vw,42px);
  --t-5:clamp(40px,6.2vw,53px);
  --t-6:clamp(46px,8.4vw,66px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--porcelain);color:var(--ink);
  font-family:var(--f-text);font-size:var(--t-0);line-height:1.7;
  font-weight:400;letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--crimson);text-underline-offset:.18em;text-decoration-thickness:.06em}
a:hover{color:var(--ink)}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:400;line-height:.98;
  letter-spacing:.004em;margin:0;text-wrap:balance}
h1{font-size:var(--t-6)}
h2{font-size:var(--t-5)}
h3{font-size:var(--t-2)}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}

::selection{background:var(--crimson);color:#fff}
:focus-visible{outline:3px solid var(--crimson);outline-offset:3px;border-radius:2px}

.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
.u-hide{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;position:fixed;background:var(--ink);
  color:var(--porcelain);padding:12px 18px;text-decoration:none}

/* --------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--f-text);font-weight:600;font-size:16px;
  padding:13px 24px;border:1.5px solid transparent;border-radius:2px;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.btn-solid{background:var(--crimson);color:#fff;border-color:var(--crimson)}
.btn-solid:hover{background:var(--crimson-hi);border-color:var(--crimson-hi);color:#fff}
.btn-solid:active{background:var(--crimson-deep);border-color:var(--crimson-deep)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--porcelain)}
.btn-brass{background:var(--brass);border-color:var(--brass);color:#fff}
.btn-brass:hover{background:var(--ink);border-color:var(--ink)}
.btn-wide{width:100%;margin-top:10px}
/* `.on-ink a` (0,1,1) outranks `.btn-solid` (0,1,0), so the colour is restated here.
   The button stays crimson on ink - the logo itself is red on black - with the
   lighter crimson as its edge so the fill reads against the dark ground. */
.on-ink .btn-solid{background:var(--crimson);border-color:var(--crimson-hi);color:#fff}
.on-ink .btn-solid:hover{background:var(--crimson-hi);border-color:var(--crimson-hi);color:#fff}
.on-ink .btn-line{color:var(--porcelain);border-color:#54545E}
.on-ink .btn-line:hover{background:var(--porcelain);color:var(--ink);border-color:var(--porcelain)}

/* ---------------------------------------------------------------- header */
.site-head{
  position:sticky;top:0;z-index:90;background:rgba(246,244,240,.93);
  backdrop-filter:saturate(1.4) blur(12px);
}
/* barber pole - the header's bottom edge, so it travels with the sticky bar */
.site-head .pole{height:6px;border:0;margin:0;
  background:repeating-linear-gradient(114deg,
    var(--pole-red) 0 14px,var(--porcelain) 14px 28px,var(--pole-blue) 28px 42px)}
.head-bar{display:flex;align-items:center;gap:22px;min-height:76px}
.brand{text-decoration:none;color:var(--ink);line-height:1.05}
.brand-name{display:block;font-family:var(--f-display);font-size:23px;letter-spacing:.006em}
.brand-sub{display:block;font-size:11.5px;color:var(--nickel);letter-spacing:.04em;margin-top:2px}
.site-head .brand-logo{height:48px;width:auto;max-width:none}
@media(min-width:1100px){.site-head .brand-logo{height:60px}}
.head-nav{display:none}
.nav-list{display:flex;gap:24px;list-style:none;margin:0;padding:0}
.nav-list a{color:var(--ink-soft);text-decoration:none;font-size:16px;font-weight:500}
.nav-list a:hover,.nav-list a[aria-current]{color:var(--crimson)}
/* the menu sits beside the logo; auto margin pushes the button to the far right */
.head-act{display:flex;align-items:center;gap:14px;margin-left:auto}
.head-act .btn-solid{display:none}

.burger{background:none;border:0;padding:8px;cursor:pointer;color:var(--ink)}
.burger-box{display:block;width:26px;height:14px;position:relative}
.burger-box i,.burger-box::before,.burger-box::after{
  content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;
  transition:transform .2s ease,opacity .2s ease}
.burger-box::before{top:0}
.burger-box i{top:6.25px}
.burger-box::after{bottom:0}
.burger[aria-expanded=true] .burger-box::before{transform:translateY(6.25px) rotate(45deg)}
.burger[aria-expanded=true] .burger-box i{opacity:0}
.burger[aria-expanded=true] .burger-box::after{transform:translateY(-6.25px) rotate(-45deg)}

.mobile-nav{border-top:1px solid var(--hair);background:var(--porcelain);padding:20px 0 26px}
.mob-nav .nav-list{flex-direction:column;gap:0}
.mob-nav .nav-list a{display:block;padding:13px 0;font-size:20px;
  border-bottom:1px solid var(--hair)}

@media(min-width:900px){
  .head-nav{display:block;margin-left:50px}
  .head-act .btn-solid{display:inline-flex}
  .burger{display:none}
  .mobile-nav{display:none!important}
}


/* ------------------------------------------------------------- dropdowns */
/* WP marks parents .menu-item-has-children and nests <ul class="sub-menu">.
   Three levels: Services > Barber Shop > Men's Haircut. Desktop opens on
   hover AND :focus-within so the keyboard works without JS; below 900px the
   same markup becomes an accordion driven by the .sub-toggle buttons app.js
   injects, hidden via the [hidden] attribute like the mobile panel itself. */
.nav-list .sub-menu{list-style:none;margin:0;padding:0}

/* chevron on anything with children */
.head-nav .menu-item-has-children>a::after{
  content:"";display:inline-block;width:.4em;height:.4em;margin-left:.45em;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-.18em) rotate(45deg);opacity:.72}

@media(min-width:900px){
  .head-nav .menu-item-has-children{position:relative}
  .head-nav .sub-menu{
    position:absolute;top:100%;left:-16px;z-index:5;min-width:234px;
    padding:7px 0;background:var(--talc);border:1px solid var(--hair);
    border-radius:2px;box-shadow:0 18px 40px -16px rgba(20,20,24,.30);
    opacity:0;visibility:hidden;transform:translateY(-4px);
    transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s}
  .head-nav .menu-item-has-children:hover>.sub-menu,
  .head-nav .menu-item-has-children:focus-within>.sub-menu{
    opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .head-nav .sub-menu a{
    display:block;padding:9px 18px;font-size:15.5px;font-weight:400;line-height:1.35}
  .head-nav .sub-menu a:hover{background:var(--porcelain)}
  /* third level flies out to the right of its parent panel */
  .head-nav .sub-menu .sub-menu{top:-8px;left:100%;margin-left:1px}
  .head-nav .sub-menu .menu-item-has-children>a::after{
    float:right;margin-top:.3em;transform:rotate(-45deg)}
}

/* The header carries 7 top-level items plus carets now, so keep each label and
   its caret on one line, and tighten the bar in the band just above the
   breakpoint where brand + nav + button would otherwise stack. */
.head-nav .menu-item-has-children>a{white-space:nowrap}
@media(min-width:900px) and (max-width:1099.98px){
  .head-bar{gap:13px}
  .site-head .brand-logo{height:50px}
  .head-nav{margin-left:20px}
  .nav-list{gap:16px}
  .nav-list a{font-size:14.5px}
  .head-act{gap:10px}
  .head-act .btn-solid{padding-inline:14px;font-size:14.5px}
}

@media(max-width:899.98px){
  /* parent row: link | toggle, with the panel dropping onto its own line */
  .mob-nav .menu-item-has-children{display:flex;flex-wrap:wrap;align-items:stretch}
  .mob-nav .menu-item-has-children>a{flex:1 1 auto}
  .mob-nav .sub-menu{flex:1 0 100%;padding-left:16px}
  .mob-nav .sub-menu a{font-size:17px;padding:11px 0}
  .mob-nav .sub-menu .sub-menu a{font-size:15.5px;padding:10px 0}
  .sub-toggle{
    flex:0 0 54px;display:flex;align-items:center;justify-content:center;
    padding:0;background:none;border:0;border-bottom:1px solid var(--hair);
    color:var(--ink-soft);cursor:pointer;font-size:20px}
  .sub-toggle::before{
    content:"";width:.42em;height:.42em;
    border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
    transform:translateY(-.16em) rotate(45deg);transition:transform .18s ease}
  .sub-toggle[aria-expanded=true]{color:var(--crimson)}
  .sub-toggle[aria-expanded=true]::before{transform:translateY(.12em) rotate(225deg)}
}

@media(prefers-reduced-motion:reduce){
  .head-nav .sub-menu{transition:none}
  .sub-toggle::before{transition:none}
}

/* ------------------------------------------------------------------ dock */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:95;display:flex;gap:10px;
  padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  background:rgba(246,244,240,.97);border-top:1px solid var(--hair);
  backdrop-filter:blur(10px);
}
.dock .btn{flex:1;padding:14px 8px}
body{padding-bottom:74px}
@media(min-width:900px){.dock{display:none}body{padding-bottom:0}}

/* --------------------------------------------------------------- section */
.sec{padding:clamp(56px,8vw,104px) 0}
.sec-tight{padding:clamp(28px,3.5vw,44px) 0}
.sec-talc{background:var(--talc);border-block:1px solid var(--hair)}
.on-ink{background:var(--ink);color:var(--porcelain)}
.on-ink h1,.on-ink h2,.on-ink h3{color:var(--porcelain)}
.on-ink a{color:var(--brass-lt)}
.on-ink a:hover{color:var(--porcelain)}

.sec-head{max-width:38ch;margin-bottom:clamp(28px,4vw,48px)}
.sec-head h1,.sec-head h2{margin-bottom:16px}
.sec-head p{color:var(--nickel);font-size:var(--t-1);line-height:1.55;margin:0}
.on-ink .sec-head p{color:#A9A9B2}
/* Wide head: 38ch stacks a long heading and its intro into 3+3 lines with
   empty space beside them. Sized from the fonts: "Barbering and salon," is
   439px at 53px Anton, and the intro 968px at 21px, so 500/620 give 2+2. */
.sec-head-wide p{font-size:18px}
@media(min-width:720px){
  .sec-head-wide{max-width:none}
  .sec-head-wide h2{max-width:500px}
  .sec-head-wide p{max-width:620px;font-size:var(--t-1)}
}
.rule{height:1px;background:var(--hair);border:0;margin:0}
.on-ink .rule{background:var(--hair-dk)}
.lede{font-size:var(--t-1);line-height:1.6;max-width:60ch}

/* ------------------------------------------------------------------ hero */
.hero{position:relative;background:var(--ink)}
.hero-media{position:relative;min-height:clamp(430px,62vh,620px);overflow:hidden}
.hero .hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 18%}
.hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(196deg,rgba(10,10,12,.74) 0%,rgba(10,10,12,.42) 46%,rgba(10,10,12,.68) 100%)}
.hero-copy{position:absolute;inset:auto 0 0 0;z-index:2;padding-bottom:clamp(44px,7vw,86px)}
.hero-copy h1{color:#fff;max-width:15ch;
  text-shadow:0 2px 30px rgba(0,0,0,.42)}
.hero-say{color:#EDE9E2;font-size:clamp(18px,2.3vw,22px);line-height:1.5;
  max-width:44ch;margin-top:20px;text-shadow:0 1px 18px rgba(0,0,0,.5)}
.hero-say b{color:#fff;font-weight:600}
.hero-stars{color:var(--brass-lt);letter-spacing:.14em;font-size:15px}

/* the reservation bar - the one element that breaks a section boundary */
.resbar-wrap{position:relative;z-index:3;margin-top:clamp(-46px,-5vw,-34px)}
.resbar{
  background:var(--talc);border:1px solid var(--hair);border-radius:3px;
  box-shadow:0 22px 54px -18px rgba(20,20,24,.34);
  padding:16px;display:grid;gap:12px;
  animation:resbar-in .5s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes resbar-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.resbar{animation:none}}
.resbar-f{position:relative;display:flex;flex-direction:column;gap:7px;min-width:0}
.resbar-f label{font-size:12.5px;color:var(--nickel);font-weight:600;letter-spacing:.02em}
/* Boxed fields with inner padding, so values never sit on the field edge.
   .dd-btn is the styled stand-in app.js puts in front of each <select>. */
.resbar-f select,.resbar-f input,.dd-btn{
  display:flex;align-items:center;width:100%;height:50px;margin:0;padding:0 40px 0 14px;
  font-family:var(--f-text);font-size:16px;line-height:1.3;color:var(--ink);text-align:left;
  background:var(--porcelain);border:1px solid var(--hair);border-radius:2px;
  appearance:none;-webkit-appearance:none;cursor:pointer;
  transition:border-color .15s ease,box-shadow .15s ease}
.resbar-f input{padding-right:12px}
.resbar-f input::-webkit-date-and-time-value{text-align:left}
.resbar-f select:hover,.resbar-f input:hover,.dd-btn:hover{border-color:#CBC3B6}
.resbar-f select:focus-visible,.resbar-f input:focus-visible,.dd-btn:focus-visible,
.resbar-f.is-open .dd-btn{
  border-color:var(--brass);box-shadow:0 0 0 3px rgba(125,90,12,.14);outline:none}
.dd-val{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.resbar-f.has-caret::after{content:"";position:absolute;right:17px;bottom:22px;
  width:7px;height:7px;border-right:1.5px solid var(--nickel);
  border-bottom:1.5px solid var(--nickel);transform:rotate(45deg);pointer-events:none;
  transition:transform .18s ease}
.resbar-f.is-open::after{transform:translateY(4px) rotate(-135deg);border-color:var(--brass)}
.resbar .btn{height:50px;padding:0 26px}

/* the real select stays in the form as the value the handoff reads */
.resbar-f select.dd-native{position:absolute;bottom:0;left:0;width:1px;height:1px;
  padding:0;border:0;opacity:0;pointer-events:none}

/* the open list */
.resbar-f.is-open{z-index:10}
.dd-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:10;
  margin:0;padding:6px;list-style:none;max-height:340px;overflow-y:auto;overscroll-behavior:contain;
  background:var(--talc);border:1px solid var(--hair);border-radius:3px;
  box-shadow:0 22px 48px -18px rgba(20,20,24,.34)}
.dd-group{padding:14px 12px 6px;font-size:11.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--brass)}
.dd-group:first-child{padding-top:8px}
.dd-opt{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:9px 12px;border-radius:2px;font-size:15.5px;line-height:1.35;
  color:var(--ink-soft);cursor:pointer}
.dd-opt .dd-pr{flex:none;font-size:14.5px;color:var(--nickel);font-variant-numeric:tabular-nums}
.dd-opt.is-active{background:var(--porcelain);color:var(--ink)}
.dd-opt[aria-selected=true]{background:rgba(125,90,12,.09);color:var(--brass);font-weight:600}
.dd-opt[aria-selected=true] .dd-pr{color:var(--brass)}
@media(prefers-reduced-motion:reduce){.resbar-f.has-caret::after{transition:none}}
@media(min-width:780px){
  .resbar{grid-template-columns:1.25fr 1fr 1fr auto;gap:26px;align-items:end;padding:20px 22px}
}

/* ------------------------------------------------------------ proof strip */
.proof{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 16px}
@media(min-width:720px){.proof{grid-template-columns:repeat(4,1fr);gap:20px}}
.proof-i{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.proof-ic{display:grid;place-items:center;width:52px;height:52px;margin-bottom:8px;
  border:1.5px solid var(--hair);border-radius:50%;color:var(--brass)}
.proof-ic i{font-size:20px;line-height:1}
.proof-n{font-family:var(--f-display);font-size:28px;line-height:1;color:var(--ink)}
@media(min-width:720px){.proof-n{font-size:var(--t-3)}}
.proof-l{font-size:15px;color:var(--nickel);line-height:1.4;text-wrap:balance}

/* ---------------------------------------------------------------- pillars */
.pillars{display:grid;gap:clamp(20px,2.6vw,30px)}
@media(min-width:820px){.pillars{grid-template-columns:repeat(3,1fr)}}
/* The photo is capped and centred, so the card content centres under it */
.pillar{display:flex;flex-direction:column;align-items:center;text-align:center}
.pillar-img{width:min(100%,290px);aspect-ratio:4/5;overflow:hidden;background:var(--hair);margin-bottom:20px}
.pillar .pillar-img img{width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.pillar:hover .pillar-img img{transform:scale(1.035)}
@media(prefers-reduced-motion:reduce){.pillar-img img{transition:none}
  .pillar:hover .pillar-img img{transform:none}}
.pillar h3{margin-bottom:6px}
.pillar p{color:var(--nickel);font-size:16px;line-height:1.6;margin:0 0 20px}
/* two classes: `.pillar p` would otherwise turn the price grey */
.pillar .pillar-from{color:var(--brass);font-weight:600;font-size:15.5px;margin-bottom:8px}
/* Outlined link with a text arrow. */
.pillar-link{
  margin-top:auto;align-self:center;display:inline-flex;align-items:center;gap:10px;
  padding:11px 20px;border:1.5px solid var(--ink);border-radius:2px;
  font-size:15.5px;font-weight:600;line-height:1.2;color:var(--ink);text-decoration:none;
  transition:background .16s ease,color .16s ease,border-color .16s ease}
.pillar-link::after{content:"→";font:inherit;font-size:12px;
  transition:transform .16s ease}
.pillar-link:hover{background:var(--ink);color:var(--porcelain)}
.pillar-link:hover::after{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){.pillar-link::after{transition:none}
  .pillar-link:hover::after{transform:none}}

/* ------------------------------------------------------------ price board */
.board{display:grid;gap:clamp(30px,4vw,54px)}
@media(min-width:860px){.board{grid-template-columns:1fr 1fr}}
.board-grp h3{font-size:var(--t-1);margin-bottom:4px}
.board-note{color:var(--nickel);font-size:15px;margin-bottom:16px}
.board-list{list-style:none;margin:0;padding:0}
.board-list li{display:flex;align-items:baseline;gap:10px;padding:11px 0;
  border-bottom:1px solid var(--hair)}
.board-list li:last-child{border-bottom:0}
.board-nm{font-weight:500}
.board-nm small{display:block;font-weight:400;font-size:14.5px;color:var(--nickel);
  line-height:1.45;margin-top:2px}
.board-dot{flex:1;border-bottom:1px dotted #C6C0B6;transform:translateY(-4px);min-width:16px}
.board-pr{font-family:var(--f-display);font-size:21px;color:var(--brass);white-space:nowrap}

/* --------------------------------------------------------------- gallery */
.gal{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.gal{grid-template-columns:repeat(4,1fr);gap:14px}}
.gal figure{margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--hair)}
.gal figure img{width:100%;height:100%;object-fit:cover}
.gal .tall{grid-row:span 2;aspect-ratio:4/10}
.sec-more{display:flex;justify-content:center;margin-top:clamp(26px,3.5vw,40px)}
.sec-more .btn{gap:10px}
.sec-more .btn i{font-size:12px;transition:transform .16s ease}
.sec-more .btn:hover i{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){.sec-more .btn i{transition:none}
  .sec-more .btn:hover i{transform:none}}
@media(max-width:759px){.gal .tall{grid-row:span 1;aspect-ratio:4/5}}

/* --------------------------------------------------------------- reviews */
.rev-top{display:flex;flex-wrap:wrap;align-items:flex-end;gap:24px;
  justify-content:space-between;margin-bottom:clamp(28px,4vw,44px)}
.rev-score{display:flex;align-items:baseline;gap:12px}
.rev-score b{font-family:var(--f-display);font-size:var(--t-4);font-weight:400;line-height:1}
/* One snapping row instead of wrapped rows: 1 full-width card
   on phones, 2 on tablets, 3 on desktop. app.js adds the arrow buttons. */
.rev-grid{--rev-gap:18px;display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:var(--rev-gap);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rev-grid::-webkit-scrollbar{display:none}
@media(min-width:700px){.rev-grid{--rev-gap:22px;grid-auto-columns:calc((100% - var(--rev-gap)) / 2)}}
@media(min-width:1040px){.rev-grid{grid-auto-columns:calc((100% - 2 * var(--rev-gap)) / 3)}}
.rev{border:1px solid var(--hair-dk);padding:24px;display:flex;flex-direction:column;gap:12px;
  scroll-snap-align:center;scroll-snap-stop:always}
@media(min-width:700px){.rev{scroll-snap-align:start;scroll-snap-stop:normal}}
.rev-nav{display:flex;justify-content:center;gap:12px;margin-top:clamp(20px,3vw,28px)}
.rev-arrow{display:grid;place-items:center;width:48px;height:48px;padding:0;
  border:1px solid #54545E;border-radius:50%;background:transparent;color:var(--porcelain);
  font-size:15px;cursor:pointer;transition:background .16s ease,color .16s ease,border-color .16s ease,opacity .16s ease}
.rev-arrow:hover:not(:disabled){background:var(--porcelain);border-color:var(--porcelain);color:var(--ink)}
.rev-arrow:disabled{opacity:.3;cursor:default}
.rev-stars{color:var(--brass-lt);letter-spacing:.16em;font-size:14px}
/* stars left, Google "G" badge right */
.rev-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rev-g{flex:none;width:30px;height:30px;padding:6px;border-radius:50%;background:#fff}
.rev-score .rev-g-lg{width:36px;height:36px;padding:7px;align-self:center}
.rev-nav+.sec-more{margin-top:22px}
.rev p{font-size:16.5px;line-height:1.65;color:#DEDAD3;margin:0}
.rev-who{margin-top:auto;font-size:14.5px;color:#8E8E98}
.rev-who b{color:var(--porcelain);font-weight:600;display:block;font-size:15.5px}

/* ------------------------------------------------------------------ split */
.split{display:grid;gap:clamp(26px,4vw,56px);align-items:center}
@media(min-width:880px){.split{grid-template-columns:1fr 1fr}}
.split-img{aspect-ratio:4/3;overflow:hidden;background:var(--hair)}
.split .split-img img{width:100%;height:100%;object-fit:cover}
.split-img.portrait{aspect-ratio:4/5}

/* ------------------------------------------------------------------ hours */
.hours{list-style:none;margin:0;padding:0;max-width:420px}
.hours li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;
  border-bottom:1px solid var(--hair);font-size:16.5px}
.hours .is-sun{color:var(--crimson);font-weight:600}
.hours .is-sun span:last-child{font-weight:600}
.map-slot{aspect-ratio:4/3;background:var(--hair);position:relative;overflow:hidden}
.map-slot iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map-load{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;cursor:pointer;border:0;
  background:var(--hair);color:var(--ink);font-family:var(--f-text);font-size:16px}
.map-load b{font-family:var(--f-display);font-size:var(--t-1);font-weight:400}

/* -------------------------------------------------------------------- faq */
.faq{max-width:74ch}
.faq details{border-bottom:1px solid var(--hair);padding:4px 0}
.faq summary{cursor:pointer;list-style:none;padding:18px 40px 18px 0;position:relative;
  font-size:var(--t-1);font-weight:500;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--brass);border-bottom:1.5px solid var(--brass);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .faq-a{padding:0 0 20px;color:var(--nickel);max-width:66ch}

/* ------------------------------------------------------------------- CTA */
.cta-band{text-align:left}
.cta-band h2{max-width:16ch;margin-bottom:18px}
.cta-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
/* desktop: copy on the left, the two buttons parked at the right end */
@media(min-width:900px){
  .cta-band{display:grid;grid-template-columns:1fr auto;column-gap:48px;align-items:center}
  .cta-band h2{grid-column:1}
  .cta-band .lede{grid-column:1;margin:0}
  .cta-band .cta-acts{grid-column:2;grid-row:1 / span 2;margin-top:0;flex-wrap:nowrap}
}

/* ---------------------------------------------------------------- footer */
.site-foot{background:var(--ink);color:#A9A9B2;padding-top:clamp(48px,6vw,76px);
  font-size:16px;border-top:0;position:relative}
/* tapered gold rule like the logo's own lines; it also parts the footer from a dark section above */
.site-foot::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold-hi) 50%,transparent)}
/* Brand | Pages | Visit | Hours on desktop, 2x2 on tablets, stacked on phones */
.foot-grid{display:grid;gap:38px 30px;padding-bottom:48px}
@media(min-width:640px){.foot-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.foot-grid{grid-template-columns:1.35fr .8fr .8fr 1.1fr 1.15fr;gap:40px 34px}}
.site-foot .foot-logo{height:72px;width:auto;max-width:100%}
.foot-blurb{margin:18px 0 20px;max-width:36ch;line-height:1.65;font-size:15.5px}
.foot-h{font-family:var(--f-display);font-size:17px;font-weight:400;color:var(--porcelain);
  letter-spacing:.05em;margin-bottom:18px;padding-bottom:10px;position:relative}
.foot-h::after{content:"";position:absolute;left:0;bottom:0;width:28px;height:2px;background:var(--brass-lt)}
.site-foot a{color:#C9C4BB;text-decoration:none;transition:color .15s ease}
.site-foot a:hover{color:var(--brass-lt)}

.foot-social{display:flex;gap:10px;list-style:none;margin:0;padding:0}
.foot-social a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  border:1px solid #3E3E47;color:var(--porcelain);font-size:16px;
  transition:background .15s ease,border-color .15s ease,color .15s ease}
.foot-social a:hover{background:var(--brass-lt);border-color:var(--brass-lt);color:var(--ink)}

.foot-links{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:15.5px}
@media(max-width:639.98px){.foot-links{grid-template-columns:repeat(2,1fr);column-gap:24px}}

.foot-contact{list-style:none;margin:0;padding:0;display:grid;gap:14px;font-size:15.5px}
.foot-contact li{display:grid;grid-template-columns:18px 1fr;gap:12px;align-items:start;line-height:1.55}
.foot-contact i{color:var(--brass-lt);font-size:15px;margin-top:4px;text-align:center}
.site-foot address{font-style:normal;margin:0}

.foot-hours{list-style:none;margin:0;padding:0}
.foot-hours li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:15px;
  border-bottom:1px solid var(--hair-dk)}
.foot-hours li:first-child{padding-top:0}
.foot-hours li:last-child{border-bottom:0}
.foot-hours .is-sun{color:var(--brass-lt)}
.foot-base{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  border-top:1px solid var(--hair-dk);padding-block:20px 26px;font-size:14px;color:#7C7C86}
.foot-base p{margin:0}
.foot-legal{display:flex;gap:18px}

/* ------------------------------------------------------------------ prose */
.prose-wrap{padding-block:clamp(48px,7vw,88px)}
.prose{max-width:68ch}
.prose h1{margin-bottom:22px}
.prose h2{font-size:var(--t-3);margin:1.5em 0 .5em}
.prose .btn{margin-right:10px;margin-top:10px}

/* Elementor: strip the container padding that fights the theme's own rhythm */
.elementor-section.elementor-section-boxed>.elementor-container{max-width:var(--shell)}

/* ---------------------------------------------------- Elementor plumbing
   Sections are full-width and padding-free; the theme's own .sec / .shell
   classes on the section and column control the box, so page markup here
   matches the markup everywhere else in the theme. */
.elementor-section>.elementor-container{width:100%;max-width:none}
.elementor-column.shell{width:100%;max-width:var(--shell);margin-inline:auto}
.elementor-column>.elementor-widget-wrap{padding:0}
.elementor-widget-wrap>.elementor-element{margin-bottom:0}
.elementor-widget-html .elementor-widget-container,
.elementor-widget-shortcode .elementor-widget-container{margin:0}
.elementor-section.sec>.elementor-container{padding-block:0}

/* [hidden] has to beat component display rules, or a hidden .btn still shows. */
[hidden]{display:none!important}

/* Three service groups read better as three columns once there is room. */
@media(min-width:1000px){.board{grid-template-columns:repeat(3,1fr);gap:34px}}

/* Elementor ships `.elementor img{height:auto}` at the same specificity as a
   single-class selector and loads after the theme, so every object-fit rule
   above is written with two classes to win outright. This note exists so the
   next person does not "simplify" them back. */
.mb-opt-t{display:block}

/* A heading immediately followed by body copy needs air; .sec-head supplies it
   but the split sections set their headings directly. */
.split h2{margin-bottom:18px}

/* The FAQ measure is deliberately narrow, so on wide screens the heading sits
   beside the questions rather than leaving half the page empty. */
.faq-wrap{display:grid;gap:clamp(24px,3vw,56px)}
@media(min-width:940px){
  .faq-wrap{grid-template-columns:.85fr 1.15fr;align-items:start}
  .faq-wrap .sec-head{margin-bottom:0;position:sticky;top:96px}
}
.faq-wrap .faq{max-width:none}

/* ==========================================================================
   Contact page (/contact/): built from native Elementor widgets so the client
   can edit it. Every section carries `ms-page`; two-column rows are inner
   sections with `ms-row`. Selectors here sit one step above Elementor's
   global widget styles (0,2,0) and below a per-element panel edit (0,3,0+),
   so the brand look is the default and anything set in the panel still wins.
   ========================================================================== */

/* rhythm: Elementor's 20px widget spacing is replaced by margin-top between
   siblings, kept at :where() weight so a margin set in the panel overrides it */
.ms-page .elementor-widget:not(:last-child){margin-block-end:0}
:where(.ms-page .elementor-widget-wrap)>.elementor-element+.elementor-element:not(.ms-btn){margin-top:18px}
:where(.ms-page .elementor-widget-wrap)>.elementor-widget-heading+.elementor-widget-text-editor{margin-top:20px}
:where(.ms-page .elementor-widget-wrap)>.elementor-element+.elementor-inner-section{margin-top:clamp(30px,4vw,52px)}
:where(.ms-page .elementor-widget-wrap)>.elementor-inner-section+.elementor-element{margin-top:clamp(36px,5vw,64px)}
/* Buttons sit on one line, so both need the same top margin. They are kept out
   of the rhythm rule above: its `+` selector would space the second button on
   its own and drop it below the first. */
:where(.ms-page .elementor-widget-wrap)>.ms-btn{margin-top:30px;margin-right:12px}
:where(.ms-page .elementor-widget-wrap)>.ms-btn+.ms-btn{margin-top:30px}
:where(.ms-page .elementor-widget-wrap)>.ms-btn:last-child{margin-right:0}
.ms-page .elementor-widget-text-editor p:last-child{margin-bottom:0}

/* two-column rows: gutters are column padding, not flex gap, because
   Elementor's container wraps and percentage widths + gap would overflow */
.ms-row{--ms-gap:clamp(32px,5vw,76px)}
.elementor-section.ms-row>.elementor-container{align-items:center}
.elementor-section.ms-row.ms-top>.elementor-container{align-items:flex-start}
.ms-row>.elementor-container>.elementor-column>.elementor-widget-wrap{padding-inline:calc(var(--ms-gap) / 2)}
.ms-row>.elementor-container>.elementor-column:first-child>.elementor-widget-wrap{padding-left:0}
.ms-row>.elementor-container>.elementor-column:last-child>.elementor-widget-wrap{padding-right:0}
@media(max-width:899.98px){
  .elementor-section.ms-row>.elementor-container>.elementor-column{width:100%}
  .ms-row>.elementor-container>.elementor-column>.elementor-widget-wrap{padding-inline:0}
  .ms-row>.elementor-container>.elementor-column+.elementor-column{margin-top:clamp(30px,6vw,44px)}
}

/* headings and text inside these sections */
.ms-page h1.elementor-heading-title{font-size:var(--t-6);line-height:.98;max-width:13ch}
.ms-page h2.elementor-heading-title{font-size:var(--t-5);line-height:.98;max-width:18ch}
.ms-page h3.elementor-heading-title{font-size:var(--t-2);line-height:1.05}
.ms-page div.elementor-widget-text-editor{font-family:var(--f-text);color:var(--ink-soft);max-width:60ch}
.ms-page div.ms-lede{font-size:var(--t-1);line-height:1.6}
.ms-page div.ms-muted{color:var(--nickel)}

/* buttons: same language as the theme's .btn */
.ms-btn a.elementor-button{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--f-text);font-weight:600;font-size:16px;line-height:1.2;
  padding:13px 24px;border:1.5px solid transparent;border-radius:2px;fill:currentColor;
  transition:background .16s ease,color .16s ease,border-color .16s ease}
.ms-btn .elementor-button-content-wrapper{gap:10px;align-items:center}
.ms-btn .elementor-button-icon svg{width:14px;height:14px}
.ms-btn-solid a.elementor-button,.ms-btn-solid a.elementor-button:visited{background:var(--crimson);color:#fff;border-color:var(--crimson)}
.ms-btn-solid a.elementor-button:hover,.ms-btn-solid a.elementor-button:focus-visible{background:var(--crimson-hi);border-color:var(--crimson-hi);color:#fff}
.ms-btn-line a.elementor-button,.ms-btn-line a.elementor-button:visited{background:transparent;color:var(--ink);border-color:var(--ink)}
.ms-btn-line a.elementor-button:hover,.ms-btn-line a.elementor-button:focus-visible{background:var(--ink);color:var(--porcelain)}
.ms-copy a.elementor-button.is-done{background:var(--brass);border-color:var(--brass);color:#fff}
.on-ink .ms-btn-solid a.elementor-button,.on-ink .ms-btn-solid a.elementor-button:visited{background:var(--crimson);border-color:var(--crimson-hi);color:#fff}
.on-ink .ms-btn-solid a.elementor-button:hover{background:var(--crimson-hi);border-color:var(--crimson-hi);color:#fff}
.on-ink .ms-btn-line a.elementor-button,.on-ink .ms-btn-line a.elementor-button:visited{color:var(--porcelain);border-color:#54545E}
.on-ink .ms-btn-line a.elementor-button:hover{background:var(--porcelain);border-color:var(--porcelain);color:var(--ink)}
/* On phones the buttons go full width and stack. These selectors have to carry
   four classes: Elementor writes `width:auto` per element for every button set
   to inline width, at 0,3,0, and a lighter rule would leave the pair sitting
   side by side with mismatched top margins. */
@media(max-width:559.98px){
  .ms-page .elementor-widget-wrap>.elementor-element.ms-btn{width:100%;max-width:100%;margin-right:0}
  .ms-page .elementor-widget-wrap>.elementor-element.ms-btn+.ms-btn{margin-top:10px}
  .ms-btn a.elementor-button{width:100%}
}

/* ---------------------------------------------------------- hero + door */
.ms-ct-top{padding-block:clamp(44px,6.5vw,88px)}

.door{position:relative;background:var(--ink);color:#E9E5DE;border-radius:3px;
  padding:clamp(26px,3.4vw,40px);box-shadow:0 26px 60px -22px rgba(20,20,24,.45)}
/* gold-leaf pinstripe, the way hours are lettered on a shop door */
.door::before{content:"";position:absolute;inset:10px;border:1px solid rgba(212,175,74,.42);
  border-radius:2px;pointer-events:none}
.door-status{position:relative;display:flex;align-items:center;gap:12px;margin:0 0 20px;
  padding-bottom:18px;border-bottom:1px solid var(--hair-dk);
  font-size:18px;font-weight:600;line-height:1.3;color:#fff}
.door-light{flex:none;width:11px;height:11px;border-radius:50%;background:#54545E}
.door[data-state=open] .door-light{background:var(--brass-lt);
  box-shadow:0 0 0 4px rgba(212,175,74,.2),0 0 16px 2px rgba(214,170,80,.65);
  animation:door-lit .9s ease-out both}
.door[data-state=soon] .door-light{background:var(--brass-lt);box-shadow:0 0 0 4px rgba(212,175,74,.16)}
@keyframes door-lit{from{opacity:0;box-shadow:0 0 0 0 rgba(212,175,74,0),0 0 0 0 rgba(214,170,80,0)}}
@media(prefers-reduced-motion:reduce){.door[data-state=open] .door-light{animation:none}}
.door .door-h{position:relative;font-size:var(--t-2);color:var(--brass-lt);margin:0 0 8px;letter-spacing:.01em}
.door-hours{position:relative;list-style:none;margin:0;padding:0}
.door-hours li{display:flex;justify-content:space-between;gap:16px;padding:10px 12px;margin-inline:-12px;
  border-bottom:1px solid var(--hair-dk);font-family:var(--f-display);font-size:20px;
  letter-spacing:.02em;line-height:1.2;font-variant-numeric:tabular-nums}
.door-hours li:last-child{border-bottom:0}
.door-hours li span:last-child{white-space:nowrap}
.door-hours .is-today{background:rgba(212,175,74,.13);color:var(--brass-lt);border-radius:2px}
.door-foot{position:relative;margin:16px 0 0;font-size:15.5px;color:#A9A9B2}

/* ----------------------------------------------------- ways to reach us */
.ms-reach .elementor-section.ms-row>.elementor-container{align-items:stretch}
@media(min-width:900px){
  .ms-reach .ms-row>.elementor-container>.elementor-column+.elementor-column>.elementor-widget-wrap{
    border-left:1px solid var(--hair)}
  .ms-reach .ms-row{--ms-gap:clamp(28px,3vw,44px)}
}
@media(min-width:560px) and (max-width:899.98px){
  .ms-reach .elementor-section.ms-row>.elementor-container>.elementor-column{width:50%}
  .ms-reach .ms-row>.elementor-container>.elementor-column:nth-child(odd)>.elementor-widget-wrap{padding-right:14px}
  .ms-reach .ms-row>.elementor-container>.elementor-column:nth-child(even)>.elementor-widget-wrap{padding-left:14px}
  .ms-reach .ms-row>.elementor-container>.elementor-column:nth-child(2){margin-top:0}
}
.ms-page .ms-ib .elementor-icon-box-wrapper{gap:16px;align-items:flex-start}
.ms-page .ms-ib .elementor-icon-box-icon{margin:0}
/* the ring is an inset shadow: the icon colour control also paints border-color */
.ms-page .ms-ib .elementor-icon{display:grid;place-items:center;width:46px;height:46px;
  border:0;box-shadow:inset 0 0 0 1.5px var(--hair);border-radius:50%;font-size:18px}
.ms-page .ms-ib .elementor-icon svg{width:18px;height:18px}
.ms-page .ms-ib h3.elementor-icon-box-title{font-family:var(--f-display);font-size:21px;line-height:1.1;margin:2px 0 6px}
.ms-page .ms-ib .elementor-icon-box-title a{text-decoration:none}
.ms-page .ms-ib .elementor-icon-box-title a:hover{color:var(--brass)}
.ms-page .ms-ib p.elementor-icon-box-description{font-family:var(--f-text);font-size:15.5px;line-height:1.5;color:var(--nickel)}

/* ---------------------------------------------------------- finding us */
.ms-page .ms-find-img img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px}
.elementor-widget-image.ms-find-img img{height:auto}
.ms-page .ms-facts .elementor-icon-list-items{border-top:1px solid var(--hair)}
.ms-page .ms-facts .elementor-icon-list-item{padding:12px 0;border-bottom:1px solid var(--hair);align-items:flex-start}
.ms-page .ms-facts .elementor-icon-list-icon{width:22px;margin-top:5px;justify-content:center}
.ms-page .ms-facts .elementor-icon-list-icon svg{width:15px;height:15px}
.ms-page .ms-facts span.elementor-icon-list-text{font-family:var(--f-text);font-size:16.5px;line-height:1.5;
  color:var(--ink-soft);padding-inline-start:12px}
.ms-page .ms-map iframe{border:1px solid var(--hair);border-radius:2px}

/* ------------------------------------------------------------- message */
.ms-page div.ms-hiring{margin-top:34px;padding-top:24px;border-top:1px solid var(--hair)}
.ms-page .ms-hiring h3{font-size:var(--t-1);margin:0 0 8px}
.ms-page .ms-hiring p{font-size:16px;color:var(--nickel)}

.ms-form .elementor-field-group>label.elementor-field-label{font-family:var(--f-text);font-size:13px;
  font-weight:600;letter-spacing:.02em;color:var(--nickel);margin-bottom:7px}
.ms-form .elementor-field-group input.elementor-field-textual,
.ms-form .elementor-field-group textarea.elementor-field-textual,
.ms-form .elementor-field-group select.elementor-field-textual{
  font-family:var(--f-text);font-size:16px;line-height:1.4;color:var(--ink);
  background-color:var(--porcelain);border:1px solid var(--hair);border-radius:2px;
  min-height:50px;padding:12px 14px;transition:border-color .15s ease,box-shadow .15s ease}
.ms-form .elementor-field-group textarea.elementor-field-textual{min-height:150px;resize:vertical}
.ms-form .elementor-field-group .elementor-field-textual:hover{border-color:#CBC3B6}
.ms-form .elementor-field-group .elementor-field-textual:focus{border-color:var(--brass);
  box-shadow:0 0 0 3px rgba(125,90,12,.14);outline:0}
.ms-form .elementor-select-wrapper .select-caret-down-wrapper{inset-inline-end:14px}
.ms-form .elementor-select-wrapper .select-caret-down-wrapper svg{fill:var(--nickel)}
.ms-form.elementor-widget-form .elementor-mark-required .elementor-field-label::after{color:var(--brass)}
.ms-form .e-form__buttons button.elementor-button{font-family:var(--f-text);font-weight:600;font-size:16px;
  background:var(--ink);color:var(--porcelain);border:1.5px solid var(--ink);border-radius:2px;
  min-height:50px;padding-inline:26px;transition:background .16s ease,border-color .16s ease}
.ms-form .e-form__buttons button.elementor-button:hover,
.ms-form .e-form__buttons button.elementor-button:focus-visible{background:var(--brass);border-color:var(--brass);color:#fff}
.ms-form div.elementor-message{font-family:var(--f-text);font-size:16px;line-height:1.5;margin-top:16px}
.ms-form div.elementor-message.elementor-message-success{color:var(--brass)}
.ms-form div.elementor-message.elementor-message-danger,.ms-form span.elementor-message{color:#9B2C22}

/* -------------------------------------------------------- good to know */
.ms-know .ms-ib{padding-top:20px;border-top:1px solid var(--hair)}
:where(.ms-know .elementor-widget-wrap)>.ms-ib+.ms-ib{margin-top:30px}
.elementor-section.ms-row.ms-know-row>.elementor-container{align-items:flex-start}

/* --------------------------------------------------------- closing band */
.on-ink h1.elementor-heading-title,.on-ink h2.elementor-heading-title,.on-ink h3.elementor-heading-title{color:var(--porcelain)}
.on-ink div.elementor-widget-text-editor{color:#C9C4BB}
@media(min-width:900px){
  .ms-close-acts>.elementor-widget-wrap{justify-content:flex-end;align-items:flex-start}
  :where(.ms-close-acts .elementor-widget-wrap)>.ms-btn,
  :where(.ms-close-acts .elementor-widget-wrap)>.ms-btn+.ms-btn{margin-top:0}
  :where(.ms-close-acts .elementor-widget-wrap)>.ms-btn:last-child{margin-right:0}
}

/* The header is sticky, so an in-page jump (the "Write to us" tile -> #message)
   must stop short of it rather than under it. */
.ms-page[id]{scroll-margin-top:96px}

/* Between 900 and 1150px the actions column is too narrow for both buttons on
   one line, and a right-aligned wrap reads as a mistake. Stack that band's
   copy and buttons instead, left aligned like the rest of the page. */
@media(min-width:900px) and (max-width:1149.98px){
  .ms-close .elementor-section.ms-row>.elementor-container>.elementor-column{width:100%}
  .ms-close .ms-row>.elementor-container>.elementor-column>.elementor-widget-wrap{padding-inline:0}
  .ms-close .ms-row>.elementor-container>.elementor-column+.elementor-column{margin-top:26px}
  .ms-close-acts>.elementor-widget-wrap{justify-content:flex-start}
}

/* ==========================================================================
   Area pages (/barber-shop-hair-salon-roswell-ga/, later Johns Creek), built
   from the same native widgets as /contact/. The contact layer above does
   most of the work (ms-page, ms-row, ms-btn*, ms-ib, ms-know, ms-facts,
   ms-map, ms-find-img, ms-close*); this adds the full-bleed hero, the numbered
   route, and the review row. Same weight rule: 0,2,1 or lighter wherever a
   panel edit should still win. Optimized markup is on, so a Text Editor
   widget's HTML sits directly inside the .elementor-widget div.
   ========================================================================== */

/* hero: the photo and scrim are the section's own Style > Background settings
   (client-editable); the theme sizes the box and parks the copy on its bottom
   edge, as .hero-copy does on the homepage. */
.elementor-section.ms-hero>.elementor-container{position:relative;z-index:1;
  min-height:clamp(430px,62vh,620px);align-items:flex-end;padding-block:clamp(44px,7vw,86px)}
.ms-hero h1.elementor-heading-title{color:#fff;max-width:16ch;text-shadow:0 2px 30px rgba(0,0,0,.42)}
.ms-page div.ms-hero-say{color:#EDE9E2;font-size:clamp(18px,2.3vw,22px);line-height:1.5;
  max-width:44ch;text-shadow:0 1px 18px rgba(0,0,0,.5)}
.ms-hero-say b{color:#fff;font-weight:600}

/* the route: an <ol> in a Text Editor widget. The numerals are Anton because
   the turns genuinely are a sequence; hairlines do the separating. */
.ms-page div.ms-route{max-width:none}
.ms-route ol{list-style:none;margin:0;padding:0;counter-reset:turn;border-top:1px solid var(--hair)}
.ms-route li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--hair);font-size:17px;line-height:1.5}
.ms-route li::before{counter-increment:turn;content:counter(turn);
  font-family:var(--f-display);font-size:var(--t-3);line-height:1;color:var(--brass)}

/* the price board wants the same air under its intro as a .sec-head gives */
.ms-page.ms-costs .elementor-widget-wrap>.elementor-widget-milton-prices{margin-top:clamp(28px,4vw,48px)}

/* reviews on ink: one Text Editor widget per review carrying `rev`, three to
   a row. .rev's flex column and border already apply to the widget; the row
   is stretched so the boxes share a height, and the <p> lines get the sizes
   .rev p would otherwise override. */
.ms-rev .ms-row{--ms-gap:22px}
.ms-rev .elementor-section.ms-row>.elementor-container{align-items:stretch}
.ms-rev .ms-row>.elementor-container>.elementor-column>.elementor-widget-wrap{align-content:stretch}
.rev p.rev-stars{font-size:14px;letter-spacing:.16em;color:var(--brass-lt)}
.rev p.rev-who{margin-top:auto;font-size:14.5px;line-height:1.4;color:#8E8E98}
.rev p.rev-who b{display:block;font-size:15.5px;font-weight:600;color:var(--porcelain)}
.ms-rev p.rev-score{margin-top:18px}
.ms-rev .rev-score b{color:var(--porcelain)}
@media(max-width:899.98px){
  .ms-rev .ms-row>.elementor-container>.elementor-column+.elementor-column{margin-top:18px}
}

/* FAQ in a Text Editor widget: .faq's own measure, not the text-editor's */
.ms-page div.faq{max-width:74ch}

/* ==========================================================================
   Locations overview (/locations/): one card per town, two to a row. On these
   rows the gutter moves from the widget-wrap to the column, so the widget-wrap
   itself can be the card. Each override is one class heavier than the ms-row
   rule it replaces, and the card is plain widgets the client can edit.
   ========================================================================== */
.ms-cards .ms-row{--ms-gap:clamp(16px,2vw,24px)}
.ms-cards .elementor-section.ms-row>.elementor-container{align-items:stretch}
.ms-cards .ms-row>.elementor-container>.elementor-column{padding-inline:calc(var(--ms-gap) / 2)}
.ms-cards .ms-row>.elementor-container>.elementor-column:first-child{padding-left:0}
.ms-cards .ms-row>.elementor-container>.elementor-column:last-child{padding-right:0}
.ms-cards .ms-row>.elementor-container>.elementor-column>.elementor-widget-wrap{
  padding:clamp(24px,3vw,36px);background:var(--talc);border:1px solid var(--hair);border-radius:2px;
  align-content:flex-start}
.ms-cards .elementor-widget-wrap>.elementor-inner-section+.elementor-inner-section{margin-top:var(--ms-gap)}
.ms-page div.ms-card-when{color:var(--brass);font-weight:600;font-size:15.5px;line-height:1.4}
.ms-cards .elementor-widget-wrap>.elementor-widget-heading+.ms-card-when{margin-top:6px}
.ms-cards .elementor-widget-wrap>.elementor-element+.ms-muted{margin-top:12px}
.ms-cards .elementor-widget-wrap>.elementor-element.ms-btn{margin-top:22px}
@media(max-width:899.98px){
  .ms-cards .ms-row>.elementor-container>.elementor-column{padding-inline:0}
  .ms-cards .ms-row>.elementor-container>.elementor-column+.elementor-column{margin-top:var(--ms-gap)}
}

/* ==========================================================================
   Gallery page (/gallery/). The walls are free Elementor `image-gallery`
   widgets, so the markup is WordPress's own html5 gallery
   (figure.gallery-item > .gallery-icon > a > img + figcaption.gallery-caption)
   wrapped in .elementor-image-gallery. Elementor styles .gallery-item at 0,2,0
   and prints per-element rules at 0,3,0, so the grid and crop rules here carry
   four classes to win without needing !important.

   The grid is deliberately the homepage's `.gal` grid - same 4:5 crops, same
   10/14px gaps - so the "Recent work" teaser and this page read as one object.
   ========================================================================== */
.ms-gal .gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:0}
@media(min-width:760px){.ms-gal .gallery{grid-template-columns:repeat(4,1fr);gap:14px}}

/* undo Elementor's inline-block column widths; the grid owns the layout now */
.ms-page .ms-gal .gallery .gallery-item{display:block;width:auto;max-width:none;
  margin:0;padding:0;text-align:left;float:none}
.ms-page .ms-gal .gallery .gallery-icon{margin:0;background:var(--hair);overflow:hidden}
.ms-page .ms-gal .gallery .gallery-icon a{display:block}
/* two classes minimum, because `.elementor img{height:auto}` loads after the
   theme and would otherwise cancel the crop */
.ms-page .ms-gal .gallery-icon img{width:100%;aspect-ratio:4/5;object-fit:cover;
  object-position:50% 30%;margin:0;border-radius:2px}

/* the caption is the style name; it stays put, and hover only changes colour */
.ms-page .ms-gal .gallery .gallery-caption{font-family:var(--f-text);font-size:15px;
  line-height:1.4;color:var(--nickel);margin:8px 0 0;padding:0;width:auto;text-align:left}
.ms-page .ms-gal .gallery-item:hover .gallery-caption{color:var(--ink)}
.ms-gal .gallery-icon a{cursor:zoom-in}

/* before and after: square composites, bigger, on the ink band */
.ms-gal.ms-ba .gallery{grid-template-columns:1fr;gap:14px}
@media(min-width:600px){.ms-gal.ms-ba .gallery{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.ms-gal.ms-ba .gallery{grid-template-columns:repeat(3,1fr);gap:18px}}
.ms-page .ms-ba .gallery-icon img{aspect-ratio:1/1;object-position:50% 50%}
.on-ink .ms-gal .gallery .gallery-icon{background:var(--ink-soft)}
.on-ink .ms-gal .gallery .gallery-caption{color:#A9A9B2}
.on-ink .ms-gal .gallery-item:hover .gallery-caption{color:var(--porcelain)}

/* section heads: the name on the left, what it costs and one action on the
   right, both sitting on the same baseline */
.ms-gal-sec .ms-row.ms-gal-head{--ms-gap:clamp(28px,4vw,60px)}
@media(min-width:900px){
  .ms-gal-head>.elementor-container{align-items:flex-end}
  .ms-gal-head>.elementor-container>.elementor-column+.elementor-column>.elementor-widget-wrap{padding-bottom:4px}
}
.ms-page .ms-gal-head div.elementor-widget-text-editor{font-size:16.5px;color:var(--nickel)}
.on-ink .ms-gal-head div.elementor-widget-text-editor{color:#A9A9B2}
:where(.ms-gal-head .elementor-widget-wrap)>.elementor-widget-text-editor+.ms-btn{margin-top:18px}
/* the wall clears the head by a section's worth of air, not a widget's */
:where(.ms-gal-sec .elementor-widget-wrap)>.elementor-inner-section+.elementor-widget-image-gallery{margin-top:clamp(26px,3.5vw,40px)}

/* the filter row under the intro. They are anchor links first (no JS, no
   loss: every wall is on the page and the chip jumps to it) and app.js turns
   them into filters, so they are drawn as chips rather than links: a hairline
   box, an ink fill for the one in use, and the photo count beside the name. */
.ms-page div.ms-jump{max-width:none;margin-top:clamp(26px,3.5vw,38px)}
.ms-jump ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:18px 0 0;
  border-top:1px solid var(--hair)}
.ms-jump li{margin:0}
.ms-jump a{display:inline-flex;align-items:baseline;gap:8px;padding:9px 15px;
  font-family:var(--f-text);font-size:16px;line-height:1.2;color:var(--ink);text-decoration:none;
  background:var(--talc);border:1px solid var(--hair);border-radius:2px;
  transition:border-color .16s ease,background-color .16s ease,color .16s ease}
.ms-jump a:hover{border-color:var(--brass);color:var(--brass)}
.ms-jump a.is-on{background:var(--ink);border-color:var(--ink);color:var(--porcelain)}
.ms-jump a.is-on:hover{background:var(--ink-soft);border-color:var(--ink-soft);color:var(--porcelain)}
.ms-chip-n{font-size:13px;color:var(--nickel);font-variant-numeric:tabular-nums}
.ms-jump a:hover .ms-chip-n{color:var(--brass)}
.ms-jump a.is-on .ms-chip-n{color:var(--brass-lt)}
@media(prefers-reduced-motion:reduce){.ms-jump a{transition:none}}

/* ==========================================================================
   About page (/about-us/), same native-widget layer as the area pages. Gus
   opens the page beside his portrait; the one loud element is the timeline,
   its years lettered big in brass on a double rule, the way gold leaf is laid
   on a shop door. The team is a board like the price board on the wall: name,
   dotted leader, role. Same weight rules as above: 0,2,1 or lighter wherever a
   panel edit should still win, and every margin override carries 0,3,0 because
   the base rhythm rule does.
   ========================================================================== */
.sec.ms-ab-top{padding-top:clamp(36px,5vw,72px)}
/* The headline is set to two full-width lines rather than the default 13ch
   stack. In Anton it measures 18.3em, and its longer natural line ("cutting
   hair since 1990") 9.2em with letter-spacing, so the size is the line width
   divided by 9.6: two lines edge to edge on any phone, 37px at 390px. From
   900px the text column is 56% of the shell, so 4.9vw keeps it at two lines
   down to the breakpoint, capped at 56px. */
.ms-ab-top h1.elementor-heading-title{max-width:none;
  font-size:min(56px,calc((100vw - 2 * var(--gut)) / 9.6))}
@media(min-width:900px){.ms-ab-top h1.elementor-heading-title{font-size:min(56px,4.9vw)}}

/* the portrait: the phone hero, cropped 4:5 with his face kept in frame, and
   the same inset pinstripe the door panel on /contact/ carries */
.elementor-widget-image.ms-portrait{position:relative}
.ms-page .ms-portrait img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  object-position:50% 30%;border-radius:2px}
.elementor-widget-image.ms-portrait::after{content:"";position:absolute;inset:12px;
  border:1px solid rgba(212,175,74,.55);border-radius:2px;pointer-events:none}
/* Below 900px the columns stack, and the portrait (second in the markup) would
   land under the buttons. It opens the page instead, above the headline, in a
   shorter 4:3 crop that still holds Gus from head to knee: about 265px tall on
   a 390px phone rather than 440px. */
@media(max-width:899.98px){
  .ms-ab-top .ms-row>.elementor-container>.elementor-column.ms-ab-pic{order:-1;margin-top:0;
    margin-bottom:clamp(26px,6vw,40px)}
  .ms-page .ms-portrait img{aspect-ratio:4/3;object-position:50% 42%}
}

/* his own words, set off by a brass rule rather than big quote marks */
:where(.ms-ab-top .elementor-widget-wrap)>.elementor-element+.elementor-element.ms-quote{margin-top:30px}
.ms-quote blockquote{margin:0;padding:2px 0 2px 22px;border-left:2px solid var(--brass)}
.ms-page .ms-quote blockquote p{font-size:var(--t-1);line-height:1.5;color:var(--ink);margin:0}
.ms-page .ms-quote p.ms-quote-who{margin-top:10px;font-size:15.5px;font-weight:600;color:var(--nickel)}
.ms-quote-who::before{content:"\2014\00a0"}

/* the timeline: a vertical rule on phones, a horizontal one from 760px */
:where(.ms-years .elementor-widget-wrap)>.elementor-widget-heading+.elementor-widget-text-editor.ms-years-list{
  margin-top:clamp(32px,4.5vw,56px)}
.ms-page div.ms-years-list{max-width:none}
.ms-years-list ol{list-style:none;margin:0;padding:0 0 0 24px;border-left:3px double var(--brass)}
.ms-years-list li{position:relative;padding-bottom:34px;font-size:17.5px;line-height:1.5;color:var(--ink-soft)}
.ms-years-list li:last-child{padding-bottom:0}
.ms-years-list li::before{content:"";position:absolute;left:-24px;width:14px;height:1.5px;
  background:var(--brass)}
.ms-years-list li b{display:block;margin-bottom:10px;font-family:var(--f-display);font-weight:400;
  font-size:clamp(60px,15vw,76px);line-height:.9;letter-spacing:.005em;color:var(--brass);
  font-variant-numeric:lining-nums}
.ms-years-list li::before{top:calc(clamp(60px,15vw,76px) * .45)}
@media(min-width:760px){
  .ms-years-list ol{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px);
    padding:0;border-left:0;border-top:3px double var(--brass)}
  .ms-years-list li{padding:30px 0 0 20px;max-width:30ch}
  .ms-years-list li::before{left:0;top:0;width:1.5px;height:22px}
  .ms-years-list li b{font-size:clamp(76px,9.6vw,118px);margin-bottom:14px}
}

/* the team board: headshot on the left, spanning the name, quote and who
   lines; everything else sits in the second column */
.ms-page div.ms-barber{display:grid;grid-template-columns:84px minmax(0,1fr);column-gap:20px;
  align-items:start;max-width:none;padding:20px 0 22px;border-bottom:1px solid var(--hair)}
.ms-barber>:not(.ms-barber-pic){grid-column:2}
.ms-page .ms-barber p.ms-barber-pic{grid-row:1 / span 3;margin:0;line-height:0}
.ms-page .ms-barber .ms-barber-pic img{width:84px;height:84px;object-fit:cover;border-radius:2px;
  background:var(--hair)}
:where(.ms-roster .elementor-widget-wrap)>.elementor-element+.elementor-element.ms-barber{margin-top:0}
.ms-roster .elementor-widget-wrap>.ms-barber:first-child{border-top:1px solid var(--hair)}
.ms-page .ms-barber h3{display:flex;align-items:baseline;gap:12px;margin:0 0 8px;
  font-family:var(--f-display);font-weight:400;font-size:var(--t-2);line-height:1.05;color:var(--ink)}
.ms-barber h3::after{content:"";order:1;flex:1;min-width:20px;border-bottom:1px dotted #C6C0B6;
  transform:translateY(-5px)}
.ms-page .ms-barber h3 small{order:2;font-family:var(--f-text);font-size:15.5px;line-height:1.3;
  letter-spacing:0;color:var(--nickel);text-align:right}
.ms-page .ms-barber p{margin:0;font-size:16.5px;line-height:1.55;color:var(--ink-soft)}
.ms-page .ms-barber p.ms-barber-who{margin-top:6px;font-size:14.5px;color:var(--nickel)}
@media(max-width:899.98px){
  /* stacked, the two columns read as one continuous board */
  .ms-row.ms-roster>.elementor-container>.elementor-column+.elementor-column{margin-top:0}
  .ms-roster .elementor-column+.elementor-column .elementor-widget-wrap>.ms-barber:first-child{border-top:0}
}
@media(max-width:479.98px){
  .ms-page div.ms-barber{grid-template-columns:64px minmax(0,1fr);column-gap:14px}
  .ms-page .ms-barber .ms-barber-pic img{width:64px;height:64px}
  .ms-page .ms-barber h3{flex-direction:column;align-items:flex-start;gap:4px}
  .ms-barber h3::after{display:none}
  .ms-page .ms-barber h3 small{text-align:left}
}

/* reviews, on porcelain before the ink closing band: heading and score on
   the left, the reviews stacked on the right with a hairline between each */
.ms-said-sec p.rev-score{flex-wrap:wrap;margin-top:18px}
.ms-said-sec .rev-stars{color:var(--brass)}
.ms-said-sec .rev-score b{color:var(--ink)}
.ms-page div.ms-said{max-width:none;padding:26px 0 28px;border-bottom:1px solid var(--hair)}
:where(.ms-said-list .elementor-widget-wrap)>.elementor-element+.elementor-element.ms-said{margin-top:0}
.ms-said-list .elementor-widget-wrap>.ms-said:first-child{border-top:1px solid var(--hair)}
.ms-page .ms-said p{margin:0;max-width:60ch;font-size:var(--t-1);line-height:1.5;color:var(--ink)}
.ms-page .ms-said p.ms-said-stars{margin-bottom:12px;font-size:14px;line-height:1;letter-spacing:.16em;color:var(--brass)}
.ms-page .ms-said p.ms-said-who{margin-top:14px;font-size:15.5px;line-height:1.4;color:var(--nickel)}
.ms-said-who b{font-weight:600;color:var(--ink)}
@media(max-width:559.98px){.ms-page .ms-said p{font-size:18.5px}}

/* the shop */
.ms-page .ms-shop-img img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:2px}
:where(.ms-shop .elementor-widget-wrap)>.elementor-element+.elementor-element.ms-facts{margin-top:26px}
:where(.ms-shop .elementor-widget-wrap)>.elementor-element+.elementor-element.ms-ib{margin-top:28px}

/* ==========================================================================
   Service page: Men's haircut (/mens-haircut-alpharetta/). Same native-widget
   layer as the area pages (ms-page, ms-row, ms-btn*, ms-facts, ms-rev, faq,
   ms-close). What is new: the price ticket in the hero - the page's one bold
   object and its one motion - the numbered "what you get" strip, the style
   board of real cuts, and the priced sibling list. Selectors are prefixed
   .ms-svc- / .ms-ticket / .ms-steps / .ms-styles / .ms-sibs so the other
   service pages can reuse them. Breadcrumb styles (.ms-crumbs) live with
   inc/breadcrumbs.php's block, not here.
   ========================================================================== */

/* hero: ink ground, copy left, photo right with the ticket over its edge */
.ms-page.ms-svc-hero{padding-block:clamp(40px,6vw,84px) clamp(64px,9vw,112px);overflow:hidden}
.elementor-section.ms-row.ms-svc-top>.elementor-container{align-items:center}
.ms-svc-hero h1.elementor-heading-title{max-width:11ch}
.ms-svc-hero.sv-hero h1.elementor-heading-title{max-width:26ch}
.ms-page div.ms-svc-lede{font-size:var(--t-1);line-height:1.55;color:#DEDAD3;max-width:44ch}
.ms-svc-lede b{color:#fff;font-weight:600}
.ms-page div.ms-svc-proof{margin-top:16px}
.ms-svc-stars{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:16px;color:#A9A9B2}
.ms-svc-stars span{color:var(--brass-lt);letter-spacing:.16em;font-size:14px}
.ms-svc-stars b{font-family:var(--f-display);font-weight:400;font-size:var(--t-2);line-height:1;color:var(--porcelain)}
.ms-page div.ms-svc-factrow{max-width:none;margin-top:clamp(30px,4vw,44px)}
.ms-svc-facts{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--hair-dk)}
.ms-svc-facts li{padding:14px 0;border-bottom:1px solid var(--hair-dk);font-size:15.5px;line-height:1.4;color:#A9A9B2}
.ms-svc-facts b{display:block;font-weight:600;font-size:16.5px;color:var(--porcelain)}
@media(min-width:560px){
  .ms-svc-facts{grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--hair-dk)}
  .ms-svc-facts li{border-bottom:0;padding-right:16px}
  .ms-svc-facts li+li{padding-left:16px;border-left:1px solid var(--hair-dk)}
}

/* the photo: a real cut, cropped to a portrait; two classes minimum so the
   crop beats `.elementor img{height:auto}` */
.ms-page .ms-svc-photo img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;border-radius:2px}
.ms-svc-media>.elementor-widget-wrap{position:relative}

/* The ticket: a paper price ticket tucked over the photo's lower corner,
   the way a barber's numbered ticket is handed over at the counter. The two
   notches at the tear line are a mask on the inner .tk; the shadow sits on
   the widget as a drop-shadow, which a mask would otherwise cut away. */
.ms-page div.ms-ticket{position:relative;z-index:2;width:min(318px,84%);max-width:none;
  margin:-128px 0 0 auto;margin-right:clamp(10px,3vw,24px);
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.55));
  transform:rotate(-2.5deg);transform-origin:70% 100%;
  animation:ms-ticket-in .8s cubic-bezier(.2,.75,.25,1) .2s both}
@keyframes ms-ticket-in{from{opacity:0;transform:translateY(34px) rotate(3deg)}}
@media(prefers-reduced-motion:reduce){.ms-page div.ms-ticket{animation:none}}
@media(min-width:900px){
  .ms-page div.ms-ticket{margin:-168px 0 0 -44px}
}
.ms-ticket .tk{--tear:62px;position:relative;background:var(--porcelain);color:var(--ink);
  padding:22px 26px 0;border-radius:3px;
  -webkit-mask:radial-gradient(circle 11px at 0 calc(100% - var(--tear)),#0000 97%,#000) left/51% 100% no-repeat,
               radial-gradient(circle 11px at 100% calc(100% - var(--tear)),#0000 97%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle 11px at 0 calc(100% - var(--tear)),#0000 97%,#000) left/51% 100% no-repeat,
               radial-gradient(circle 11px at 100% calc(100% - var(--tear)),#0000 97%,#000) right/51% 100% no-repeat}
/* a faint brass pinstripe inside the edge, like the door panel's */
.ms-ticket .tk::before{content:"";position:absolute;inset:8px 8px calc(var(--tear) + 8px);
  border:1px solid rgba(125,90,12,.28);border-radius:2px;pointer-events:none}
.ms-ticket .tk p{margin:0}
.ms-ticket p.tk-name{font-family:var(--f-display);font-size:23px;line-height:1.05;letter-spacing:.01em}
.ms-ticket p.tk-price{font-family:var(--f-display);font-size:clamp(96px,11vw,128px);line-height:.86;
  letter-spacing:-.01em;margin-top:10px;font-variant-numeric:lining-nums}
.ms-ticket .tk-cur{font-size:.4em;vertical-align:.95em;margin-right:4px;color:var(--brass)}
.ms-ticket p.tk-inc{margin-top:12px;font-size:17px;line-height:1.35;color:var(--ink-soft)}
.ms-ticket p.tk-sub{display:flex;justify-content:space-between;gap:12px;margin-top:12px;padding:10px 0 20px;
  border-top:1px solid var(--hair);font-size:15px;line-height:1.35;color:var(--nickel)}
.ms-ticket p.tk-sub b{color:var(--ink);font-weight:600}
/* the stub below the tear: dashed, and the whole stub is the link */
.ms-ticket p.tk-go{height:var(--tear);margin-inline:-26px;border-top:1.5px dashed #CFC8BC}
.ms-ticket .tk-go a{display:flex;align-items:center;justify-content:space-between;height:100%;padding:0 26px;
  font-weight:600;font-size:16.5px;color:var(--ink);text-decoration:none;transition:color .16s ease,background .16s ease}
.ms-ticket .tk-go a::after{content:"";width:9px;height:9px;border-top:1.75px solid currentColor;border-right:1.75px solid currentColor;
  transform:rotate(45deg);margin-right:4px}
.ms-ticket .tk-go a:hover,.ms-ticket .tk-go a:focus-visible{color:var(--brass);background:#EFEBE4}

/* 2. what $25 gets you: a real sequence, so the numerals are Anton */
.ms-page div.ms-steps-w{max-width:none;margin-top:clamp(28px,4vw,48px)}
.ms-steps{list-style:none;margin:0;padding:0;counter-reset:step;display:grid;gap:0}
.ms-steps li{position:relative;padding:22px 0 24px 64px;border-top:1px solid var(--hair)}
.ms-steps li:last-child{border-bottom:1px solid var(--hair)}
.ms-steps li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:18px;
  font-family:var(--f-display);font-size:var(--t-4);line-height:1;color:var(--brass)}
.ms-steps h3{font-size:var(--t-1);line-height:1.1;margin:0 0 8px}
.ms-steps p{margin:0;font-size:16px;line-height:1.55;color:var(--nickel)}
@media(min-width:700px){
  .ms-steps{grid-template-columns:repeat(2,1fr);column-gap:clamp(24px,3vw,40px)}
  .ms-steps li:nth-last-child(2){border-bottom:1px solid var(--hair)}
}
@media(min-width:1040px){
  .ms-steps{grid-template-columns:repeat(4,1fr)}
  .ms-steps li{padding:74px 0 0;border-bottom:0;border-top:1.5px solid var(--ink)}
  .ms-steps li:last-child,.ms-steps li:nth-last-child(2){border-bottom:0}
  .ms-steps li::before{top:20px}
}

/* 3. the style board: a snapping row on phones, a four-up grid on desktop */
.ms-page div.ms-styles-w{max-width:none;margin-top:clamp(28px,4vw,48px)}
.ms-styles{list-style:none;margin:0 calc(-1 * var(--gut));padding:0 var(--gut) 4px;
  display:grid;grid-auto-flow:column;grid-auto-columns:min(78%,300px);gap:16px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ms-styles::-webkit-scrollbar{display:none}
.ms-styles>li{scroll-snap-align:start;min-width:0}
.ms-styles figure{margin:0}
.ms-page .ms-styles figure img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:2px;background:var(--hair)}
.ms-styles figcaption{padding-top:14px}
.ms-styles h3{font-size:var(--t-1);line-height:1.1;margin:0 0 6px}
.ms-styles figcaption p{margin:0;font-size:15.5px;line-height:1.5;color:var(--nickel)}
.ms-styles li.ms-styles-fade{display:flex;flex-direction:column;justify-content:flex-end;gap:10px;
  aspect-ratio:4/5;padding:24px;background:var(--ink);color:#C9C4BB;border-radius:2px}
.ms-styles li.ms-styles-fade h3{font-size:var(--t-3);color:var(--porcelain);margin:0}
.ms-styles li.ms-styles-fade p{margin:0;font-size:16px;line-height:1.5}
.ms-styles li.ms-styles-fade a{color:var(--brass-lt);font-weight:600}
.ms-styles li.ms-styles-fade a:hover{color:var(--porcelain)}
@media(min-width:900px){
  .ms-styles{margin:0;padding:0;grid-auto-flow:row;grid-template-columns:repeat(4,1fr);
    gap:clamp(30px,3vw,40px) clamp(18px,2vw,24px);overflow:visible;scroll-snap-type:none}
}

/* 5. senior + the other barber services, priced like the board */
.ms-page div.ms-sibs-w{max-width:none}
:where(.ms-svc-more .elementor-widget-wrap)>.elementor-widget-heading+.ms-sibs-w{margin-top:18px}
.ms-sibs{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.ms-sibs li{display:flex;align-items:baseline;gap:12px;padding:14px 0;border-bottom:1px solid var(--hair)}
.ms-sibs li span{order:1;flex:0 1 auto;font-weight:600;font-size:17px;line-height:1.35;color:var(--ink)}
.ms-sibs li span a{color:var(--ink);text-decoration-color:var(--brass)}
.ms-sibs li span a:hover{color:var(--brass)}
.ms-sibs small{display:block;font-weight:400;font-size:14.5px;color:var(--nickel)}
/* dot leader between the name and the price */
.ms-sibs li::after{content:"";order:2;flex:1 1 24px;align-self:center;border-bottom:1.5px dotted #C3BBAE}
.ms-sibs li b{order:3;font-family:var(--f-display);font-weight:400;font-size:var(--t-2);line-height:1;color:var(--ink)}
.ms-page p.ms-sibs-all{margin-top:18px;font-weight:600}

/* ==========================================================================
   Breadcrumbs (inc/breadcrumbs.php, printed by page.php for pages with
   _ms_crumbs). They only appear on service pages, whose heroes are ink, so
   the strip is ink too and reads as the top of the hero. Unbuilt parents are
   plain <span>s; the current page is brass.
   ========================================================================== */
.ms-crumbs{background:var(--ink);color:#A9A9B2;font-size:14.5px;line-height:1.4}
.ms-crumbs ol{list-style:none;margin:0;padding:18px 0 0;display:flex;flex-wrap:wrap;gap:4px 0}
.ms-crumbs li{display:flex;align-items:center}
.ms-crumbs li+li::before{content:"";width:6px;height:6px;margin:0 12px 0 10px;
  border-top:1.5px solid #6E6E76;border-right:1.5px solid #6E6E76;transform:rotate(45deg)}
.ms-crumbs a{color:#E9E5DE;text-decoration:none;border-bottom:1px solid #54545E}
.ms-crumbs a:hover{color:var(--brass-lt);border-color:var(--brass-lt)}
.ms-crumbs [aria-current]{color:var(--brass-lt)}
/* the hero right below loses a little of its top air, so the two read as one */
.ms-crumbs+.elementor .ms-page.ms-svc-hero:first-child{padding-top:clamp(28px,4vw,56px)}

/* ==========================================================================
   Service page: Fade haircut (/fade-haircut-alpharetta/). Hero, reviews,
   priced list and FAQ come from the shared layers above (.ms-svc-*, .ms-rev,
   .ms-sibs, .faq). New here is the Fade Finder: nine styles, each with a real
   cut from the shop where one exists and a profile diagram of where the fade
   starts. It is the page's one bold object and its one motion: when a panel
   opens, the faded zone rises from the neckline and the brass guide settles
   on the fade line. Without JS every panel shows, stacked, as a style guide.
   ========================================================================== */
.ms-page div.ff-wrap,.ms-finder .elementor-widget-html{max-width:none}
:where(.ms-finder .elementor-widget-wrap)>.elementor-widget-html{margin-top:clamp(26px,3.5vw,40px)}

/* the chips: jump links first; app.js makes them tabs (aria-current marks the open one) */
.ff-chips{position:relative;display:flex;gap:8px;margin:0 calc(-1 * var(--gut));padding:0 var(--gut) 6px;
  overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.ff-chips::-webkit-scrollbar{display:none}
@media(min-width:900px){.ff-chips{flex-wrap:wrap;margin:0;padding:0;overflow:visible}}
.ff-chips a.ff-chip{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;
  border:1.5px solid var(--hair);border-radius:2px;background:var(--talc);
  font-weight:600;font-size:15.5px;color:var(--ink);text-decoration:none;white-space:nowrap;
  transition:border-color .16s ease,background .16s ease,color .16s ease}
.ff-chips a.ff-chip:hover{border-color:var(--ink)}
.ff-chips a.ff-chip[aria-current=true]{background:var(--ink);border-color:var(--ink);color:var(--porcelain);
  box-shadow:inset 0 -3px 0 var(--brass-lt)}

/* a panel: the cut on the left, the brief on the right */
.ff-panels{margin-top:clamp(22px,3vw,34px)}
.ff-panel{display:grid;gap:clamp(22px,3vw,48px);padding-block:clamp(26px,3.5vw,40px);border-top:1px solid var(--hair)}
.ff.is-live .ff-panel{border-top:0;padding-top:0}
.ff-panel[id]{scroll-margin-top:110px}
@media(min-width:900px){.ff-panel{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center}}

.ff-photo{margin:0}
.ff-photo .ff-img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 30%;border-radius:2px;background:var(--hair)}
@media(min-width:900px){.ff-photo .ff-img{aspect-ratio:4/5}}
.ff-photo-dia{display:grid;place-items:center;aspect-ratio:1/1;background:var(--porcelain);border:1px solid var(--hair);border-radius:2px;padding:24px}
@media(min-width:900px){.ff-photo-dia{aspect-ratio:4/5}}
.ff-photo-dia .ff-dia{width:min(78%,300px);height:auto}
.ff-photo figcaption{margin-top:10px;font-size:14.5px;line-height:1.45;color:var(--nickel)}
.ff-photo-dia figcaption{align-self:end;text-align:left;width:100%}

.ff-body h3{font-family:var(--f-display);font-weight:400;font-size:var(--t-4);line-height:1;margin:0}
.ff-where{display:flex;align-items:center;gap:18px;margin-top:20px;padding:14px 0;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.ff-where .ff-dia{flex:none;width:92px;height:auto}
.ff-where p,.ff-body p{margin:0}
.ff-where b,.ff-ask b{display:block;font-size:14px;font-weight:600;letter-spacing:.01em;color:var(--nickel);margin-bottom:2px}
.ff-where p{font-size:18px;line-height:1.35;color:var(--ink)}
.ff-body p.ff-what{margin-top:18px;font-size:17px;line-height:1.65;color:var(--ink-soft);max-width:58ch}
.ff-body p.ff-ask{margin-top:18px;padding:14px 18px;background:var(--porcelain);border-left:3px solid var(--brass);
  font-size:17px;line-height:1.5;color:var(--ink);max-width:58ch}
.ff-body p.ff-act{margin-top:24px}

/* the diagram */
.ff-dia .ff-guide{fill:none;stroke:var(--brass-lt);stroke-width:3.5;stroke-dasharray:7 5;stroke-linecap:round}
.ff.is-live .ff-panel .ff-zone{transform-box:fill-box;animation:ff-zone .7s cubic-bezier(.2,.7,.25,1) both}
.ff.is-live .ff-panel .ff-guide{animation:ff-guide .55s ease-out .3s both}
@keyframes ff-zone{from{opacity:0;transform:translateY(22px)}}
@keyframes ff-guide{from{opacity:0;transform:translateY(10px)}}
@media(prefers-reduced-motion:reduce){
  .ff.is-live .ff-panel .ff-zone,.ff.is-live .ff-panel .ff-guide{animation:none}
}

/* proof band: before-and-after squares, then the reviews */
.ff-ba{display:grid;gap:16px}
@media(min-width:700px){.ff-ba{grid-template-columns:1fr 1fr}}
.ff-ba figure{margin:0}
.ff-ba .ff-ba-img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:2px}
.ff-ba figcaption{margin-top:10px;font-size:14.5px;line-height:1.45;color:#A9A9B2}
.ms-proof .elementor-widget-html{max-width:none}
:where(.ms-proof .elementor-widget-wrap)>.elementor-widget-html{margin-top:clamp(26px,3.5vw,40px)}
.ms-page .elementor-widget.ms-proof-h{margin-top:clamp(56px,7vw,96px)}
.ms-page .ms-proof-h h3.elementor-heading-title{font-size:var(--t-4);line-height:1}

/* ==========================================================================
   Service page: Men's hair color (/mens-hair-color-alpharetta/). Reuses the
   men's haircut layer (.ms-svc-*, .ms-ticket, .ms-steps, .ms-styles, .ms-sibs).
   What is new is the gray dial: one band that runs from gray to your own
   colour, with three stops on it (soft blend, deep blend, full color). The
   band is the page's one bold object, so it has no motion. Vertical on
   phones, horizontal over three columns from 800px.
   ========================================================================== */
/* the H1 is longer than the haircut page's, so it gets a wider measure */
.ms-color-hero h1.elementor-heading-title{max-width:15ch}

.ms-page div.ms-dial-w{max-width:none;margin-top:clamp(30px,4vw,52px)}
.ms-dial{--dir:180deg;list-style:none;margin:0;padding:0 0 0 44px;position:relative;display:grid;gap:34px}
/* the band: gray at one end, a deep natural brown-black at the other */
.ms-dial::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:12px;border-radius:6px;
  background:linear-gradient(var(--dir),#DAD7D1 0%,#ABA69E 28%,#6E665D 56%,#3B322C 80%,#1D1917 100%)}
.ms-dial>li{position:relative;min-width:0}
/* each stop is a ring sitting on the band, showing the band's colour through it */
.ms-dial>li::before{content:"";position:absolute;left:-49px;top:5px;width:22px;height:22px;border-radius:50%;
  border:2px solid var(--ink);box-shadow:0 0 0 3px var(--porcelain);box-sizing:border-box}
.ms-dial h3{font-size:var(--t-3);line-height:1;margin:0}
.ms-dial p.dial-keep{margin:8px 0 14px;font-weight:600;font-size:16px;color:var(--brass)}
.ms-dial dl{margin:0;border-top:1px solid var(--hair)}
.ms-dial dt{margin-top:12px;font-weight:600;font-size:14.5px;line-height:1.3;color:var(--ink)}
.ms-dial dd{margin:3px 0 0;font-size:16px;line-height:1.5;color:var(--nickel)}
@media(min-width:800px){
  .ms-dial{--dir:90deg;padding:52px 0 0;grid-template-columns:repeat(3,1fr);column-gap:clamp(24px,3.5vw,48px)}
  .ms-dial::before{left:0;right:0;top:0;bottom:auto;width:auto;height:12px}
  .ms-dial>li::before{left:0;top:-57px}
}
.ms-page div.ms-dial-note{margin-top:14px;font-size:15.5px}
.ms-styles-w p.ms-color-more{margin:clamp(24px,3vw,34px) 0 0;font-weight:600}

/* ==========================================================================
   Kids' page (/kids-haircut-alpharetta/). Reuses the service-page block above
   (hero + ticket, steps, style board, sibs) and adds three things: the age
   ruler - the page's one bold object, a door-frame growth chart that answers
   "how much, and does my kid count" - the first-haircut / nervous-kids pair,
   and the piano row inside the reviews. Selectors are prefixed .ms-kids- / .kr.
   ========================================================================== */

/* the ruler: a brass run for ages 1-11, ink from 12. Ticks and bands share one
   column template (eleven 1fr years, then 12 and 13+ at 2fr each) so the
   bands sit exactly under their ages. The scale is decoration (aria-hidden);
   the bands are the content. */
.ms-page div.ms-kids-ruler{max-width:none;margin-top:clamp(30px,4vw,52px)}
.kr{--kr-cols:repeat(11,1fr) 2fr 2fr;--kr-split:calc(100% * 11 / 15)}
.kr-ticks{position:relative;display:grid;grid-template-columns:var(--kr-cols);padding-top:14px}
.kr-ticks::before{content:"";position:absolute;inset:0 0 auto;height:8px;border-radius:1px;
  background:linear-gradient(90deg,var(--brass) 0 var(--kr-split),var(--ink) var(--kr-split))}
.kr-ticks span{position:relative;padding:12px 0 0 6px;font-size:13px;line-height:1;color:var(--nickel);
  font-variant-numeric:lining-nums tabular-nums}
.kr-ticks span::before{content:"";position:absolute;left:0;top:-6px;height:14px;border-left:1px solid #B9B1A4}
.kr-ticks span.kr-at{color:var(--ink);font-weight:600}
.kr-ticks span.kr-at::before{top:-14px;height:26px;border-left:2px solid var(--ink)}
.kr-bands{list-style:none;margin:clamp(22px,3vw,34px) 0 0;padding:0;display:grid;gap:26px}
.kr-bands li{min-width:0;padding-top:18px;border-top:4px solid var(--brass)}
.kr-bands li.kr-grown{border-top-color:var(--ink)}
.kr-bands p{margin:0;font-size:16px;line-height:1.5;color:var(--nickel);max-width:40ch}
.kr-bands p.kr-age{font-weight:600;font-size:15px;color:var(--brass)}
.kr-bands li.kr-grown p.kr-age{color:var(--ink)}
.kr-bands h3{margin:6px 0 0;font-size:var(--t-2);line-height:1.05}
.kr-bands h3 a{color:inherit;text-decoration-color:var(--brass)}
.kr-bands p.kr-price{margin:8px 0 10px;font-family:var(--f-display);font-size:clamp(72px,10vw,120px);
  line-height:.9;color:var(--ink);font-variant-numeric:lining-nums}
.kr-bands li.kr-grown p.kr-price{font-size:clamp(48px,6vw,66px);color:var(--ink-soft)}
@media(min-width:760px){
  .kr-bands{grid-template-columns:var(--kr-cols);gap:0}
  .kr-bands li.kr-kids{grid-column:1 / 12;padding-right:clamp(24px,4vw,56px)}
  .kr-bands li.kr-grown{grid-column:12 / 14;padding-left:18px;border-left:1px solid var(--hair)}
}

/* first haircut / if they're nervous: two plain columns with the same tip list */
.ms-kids-care .ms-row{--ms-gap:clamp(24px,4vw,56px)}
@media(max-width:767px){.ms-kids-calm{margin-top:40px}}
.ms-kids-tips{list-style:none;margin:18px 0 0;padding:0}
.ms-kids-tips li{position:relative;padding:10px 0 10px 24px;border-top:1px solid var(--hair);font-size:17px;line-height:1.5}
.ms-kids-tips li:last-child{border-bottom:1px solid var(--hair)}
.ms-kids-tips li::before{content:"";position:absolute;left:2px;top:21px;width:10px;height:2px;background:var(--brass)}
.ms-kids-quote blockquote{margin:0;padding:2px 0 2px 22px;border-left:2px solid var(--brass)}
.ms-page .ms-kids-quote blockquote p{margin:0;font-size:var(--t-1);line-height:1.5;color:var(--ink)}
.ms-kids-quote footer{margin-top:10px;font-size:15.5px;font-weight:600;color:var(--nickel)}
:where(.ms-kids-first .elementor-widget-wrap)>.elementor-element+.ms-kids-quote{margin-top:30px}

/* 3 steps, not 4: a three-up row from 700px */
@media(min-width:700px){
  .ms-kids-steps .ms-steps{grid-template-columns:repeat(3,1fr)}
  .ms-kids-steps .ms-steps li,.ms-kids-steps .ms-steps li:nth-last-child(2){border-bottom:1px solid var(--hair)}
}
@media(min-width:1040px){
  .ms-kids-steps .ms-steps li,.ms-kids-steps .ms-steps li:nth-last-child(2){border-bottom:0}
}

/* the piano: photo and a one-line quote, inside the ink reviews section */
.ms-page div.ms-kids-pianow{max-width:none;margin-top:clamp(36px,5vw,64px)}
.ms-kids-piano{display:grid;gap:22px;align-items:center;padding-top:clamp(28px,4vw,44px);border-top:1px solid var(--hair-dk)}
.ms-page .ms-kids-piano img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:2px}
.ms-kids-piano h3{margin:0 0 14px;font-size:var(--t-3);line-height:1.05}
.ms-kids-piano blockquote{margin:0;padding:2px 0 2px 22px;border-left:2px solid var(--brass-lt)}
.ms-page .ms-kids-piano blockquote p{margin:0;font-size:var(--t-1);line-height:1.5;color:#EDE9E2}
.ms-kids-piano footer{margin-top:10px;font-size:15.5px;font-weight:600;color:#A9A9B2}
@media(min-width:760px){.ms-kids-piano{grid-template-columns:5fr 7fr;gap:clamp(28px,4vw,56px)}}

/* Men's haircut: the breadcrumb sits inside the hero, above the H1, in white
   ([ms_crumbs] shortcode, class ms-crumbs-in). Undoes the stand-alone strip's
   ink band and top padding; the separator dot stays from the Breadcrumbs block. */
.ms-page nav.ms-crumbs-in{background:none;color:rgba(255,255,255,.72);font-size:14.5px;line-height:1.4}
.ms-page .ms-crumbs-in ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 0}
.ms-page .ms-crumbs-in li{display:flex;align-items:center}
.ms-page .ms-crumbs-in a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.ms-page .ms-crumbs-in a:hover{color:var(--brass-lt);border-color:var(--brass-lt)}
.ms-page .ms-crumbs-in [aria-current]{color:#fff;font-weight:600}
.ms-page .ms-crumbs-in li+li::before{border-color:rgba(255,255,255,.55)}
:where(.ms-svc-hero .elementor-widget-wrap)>.ms-svc-crumbs+.elementor-widget-heading{margin-top:clamp(22px,3vw,34px)}

/* ==========================================================================
   Hub page: Barber shop (/barber-shop-alpharetta/). Reuses the service-page
   layer (ms-svc-hero, ms-ticket, ms-sibs, ms-know, ms-rev, ms-crumbs-in).
   New here: the ticket as a three-line menu, and the service cards - the
   page's bold element, each one link down to its service page, the price
   stamped on the photo as a paper tag with a torn (dashed) edge.
   ========================================================================== */

/* hero photo: the shop floor is landscape, so a gentler crop than a cut */
.ms-page .ms-hub-photo img{aspect-ratio:5/4;object-position:50% 45%}

/* the ticket as a menu: each row is a link to that service's page */
.ms-ticket .tk-rows{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid var(--hair)}
.ms-ticket .tk-rows li{border-bottom:1px solid var(--hair)}
.ms-ticket .tk-rows li>a,.ms-ticket .tk-rows li>span{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:9px 0;color:var(--ink);text-decoration:none}
.ms-ticket .tk-rows span{font-size:17px;line-height:1.3}
.ms-ticket .tk-rows b{font-family:var(--f-display);font-weight:400;font-size:32px;line-height:1}
.ms-ticket .tk-rows a:hover span,.ms-ticket .tk-rows a:focus-visible span{color:var(--brass);text-decoration:underline;text-underline-offset:.18em}
.ms-ticket .tk-menu p.tk-sub{border-top:0;padding-top:10px}

/* the service cards: a snapping row on phones, 2-up on tablets, 4-up wide */
.ms-page div.ms-cards-w{max-width:none;margin-top:clamp(28px,4vw,48px)}
.ms-cards-svc{list-style:none;margin:0 calc(-1 * var(--gut));padding:0 var(--gut) 4px;
  display:grid;grid-auto-flow:column;grid-auto-columns:min(80%,320px);gap:16px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ms-cards-svc::-webkit-scrollbar{display:none}
.ms-cards-svc>li{scroll-snap-align:start;min-width:0}
@media(min-width:600px){
  .ms-cards-svc{margin:0;padding:0;grid-auto-flow:row;grid-template-columns:repeat(2,1fr);
    gap:clamp(30px,3.5vw,44px) clamp(18px,2.4vw,28px);overflow:visible;scroll-snap-type:none}
}
@media(min-width:1040px){.ms-cards-svc{grid-template-columns:repeat(4,1fr)}}
.ms-cards-svc .ms-card{display:block;color:var(--ink);text-decoration:none;border-radius:2px}
.ms-cards-svc a.ms-card:focus-visible{outline:3px solid var(--crimson);outline-offset:6px}
.ms-card-img{position:relative;display:block;overflow:hidden;border-radius:2px;background:var(--hair)}
.ms-page .ms-card-img img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.ms-cards-svc a.ms-card:hover .ms-card-img img{transform:scale(1.03)}
@media(prefers-reduced-motion:reduce){.ms-page .ms-card-img img{transition:none}}
/* the price tag: porcelain paper, a torn edge down its left side */
.ms-card-tag{position:absolute;top:14px;right:14px;padding:6px 12px 5px 14px;
  background:var(--porcelain);color:var(--ink);border-left:2px dashed #CFC8BC;border-radius:2px;
  font-family:var(--f-display);font-size:28px;line-height:1;letter-spacing:.01em;
  box-shadow:0 10px 24px -12px rgba(0,0,0,.55)}
.ms-cards-svc h3{font-size:var(--t-2);line-height:1.05;margin:18px 0 8px}
.ms-cards-svc .ms-card p{margin:0;font-size:16px;line-height:1.5;color:var(--nickel)}
.ms-card-go,.ms-cards-svc p.ms-card-go{display:inline-flex;align-items:center;gap:10px;margin-top:14px;
  font-weight:600;font-size:16px;color:var(--brass)}
.ms-card-go::after{content:"";width:8px;height:8px;border-top:1.75px solid currentColor;border-right:1.75px solid currentColor;
  transform:rotate(45deg);transition:transform .2s ease}
.ms-cards-svc a.ms-card:hover .ms-card-go{color:var(--ink)}
.ms-cards-svc a.ms-card:hover .ms-card-go::after{transform:translateX(4px) rotate(45deg)}
@media(prefers-reduced-motion:reduce){.ms-card-go::after{transition:none}}

/* the priced extras under the cards */
.ms-hub-svcs .elementor-section.ms-hub-extras{margin-top:clamp(40px,5vw,64px);padding-top:clamp(24px,3vw,32px);border-top:1.5px solid var(--ink)}
.ms-hub-extras h3.elementor-heading-title{font-size:var(--t-3)}

/* the barbers: headshots in a loose row */
.ms-page div.ms-team-w{max-width:none}
.ms-team-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:26px 18px}
.ms-team-row li{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.ms-page .ms-team-row img{width:96px;height:96px;object-fit:cover;border-radius:50%;box-shadow:0 0 0 1px var(--hair)}
.ms-team-row b{margin-top:12px;font-family:var(--f-display);font-weight:400;font-size:var(--t-1);line-height:1.1}
.ms-team-row span{font-size:14.5px;line-height:1.35;color:var(--nickel)}

/* the storefront keeps its sign in frame */
.ms-page .ms-store-img img{object-position:50% 30%}

/* FAQ: the hours door sits under the heading */
:where(.ms-hub-faq-side .elementor-widget-wrap)>.elementor-element+.elementor-widget-ms-door{margin-top:clamp(26px,3vw,36px)}

/* ==========================================================================
   Service page: Hot towel shave (/hot-towel-shave-alpharetta/). Reuses the
   men's haircut layer (.ms-svc-* hero + .ms-ticket, .ms-styles, .ms-sibs,
   .ms-rev, .faq, .ms-close). New here, prefixed .hts-:
   - the temperature rail: the five steps of a shave on one bar that runs from
     barber-pole red (hot towel) to barber-pole blue (cold towel). It is the
     page's one bold object and its one motion: steam rises off step 1 three
     times when the rail first scrolls into view (app.js adds .is-in).
     Horizontal from 900px, a vertical rail on the left below that.
   - the chooser: shave it off ($30, ink card) or keep the beard (two line-ups).
   ========================================================================== */
.ms-page .hts-photo img{object-position:50% 38%}

/* the rail */
.ms-page div.hts-rail-w{max-width:none;margin-top:clamp(34px,5vw,60px)}
.hts-rail{--r-hot:var(--pole-red);--r-warm:var(--brass);--r-blade:var(--ink);--r-cold:var(--pole-blue);--r-fin:var(--cobalt);
  --r-grad:var(--pole-red),var(--gold-lt) 30%,#BDB6AA 52%,var(--pole-blue) 78%,var(--cobalt)}
.hts-rail p.hts-rail-ends{display:none}
.hts-steps{list-style:none;margin:0;padding:0;counter-reset:hts;position:relative;display:grid}
.hts-steps::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:6px;border-radius:3px;
  background:linear-gradient(180deg,var(--r-grad))}
.hts-steps li{--c:var(--r-blade);position:relative;padding:0 0 30px 58px}
.hts-steps li:last-child{padding-bottom:0}
.hts-steps li.hts-hot{--c:var(--r-hot)}
.hts-steps li.hts-warm{--c:var(--r-warm)}
.hts-steps li.hts-cold{--c:var(--r-cold)}
.hts-steps li.hts-finish{--c:var(--r-fin)}
/* the stop on the bar */
.hts-steps li::before{content:"";position:absolute;left:4px;top:6px;width:20px;height:20px;border-radius:50%;
  background:var(--porcelain);border:4px solid var(--c);box-sizing:border-box}
.hts-steps h3{display:flex;align-items:baseline;gap:12px;font-size:var(--t-2);line-height:1.05;margin:0 0 8px}
.hts-steps h3::before{counter-increment:hts;content:counter(hts);font-size:var(--t-4);line-height:.9;color:var(--c)}
.hts-steps p{margin:0;font-size:16.5px;line-height:1.55;color:var(--nickel);max-width:36ch}

/* steam off the hot towel: three wisps */
.hts-steam{position:absolute;left:2px;top:-30px;width:24px;height:32px;display:flex;justify-content:space-between;pointer-events:none}
.hts-steam i{width:3px;height:100%;border-radius:3px;opacity:0;
  background:linear-gradient(180deg,rgba(110,110,118,0),rgba(110,110,118,.55) 60%,rgba(110,110,118,0))}
.hts-rail.is-in .hts-steam i{animation:hts-steam 2.4s ease-out 3 both}
.hts-rail.is-in .hts-steam i:nth-child(2){animation-delay:.45s}
.hts-rail.is-in .hts-steam i:nth-child(3){animation-delay:.9s}
@keyframes hts-steam{
  0%{opacity:0;transform:translateY(10px) scaleY(.6)}
  35%{opacity:1}
  100%{opacity:0;transform:translateY(-16px) scaleY(1.1) skewX(-8deg)}}
@media(prefers-reduced-motion:reduce){
  .hts-rail.is-in .hts-steam i{animation:none}
  .hts-steam i{opacity:.6}
}

@media(min-width:900px){
  .hts-rail p.hts-rail-ends{display:flex;justify-content:space-between;margin:0 0 14px;
    font-size:15px;line-height:1;color:var(--nickel)}
  .hts-rail-ends span:first-child{color:var(--pole-red)}
  .hts-rail-ends span:last-child{color:var(--pole-blue)}
  .hts-steps{grid-template-columns:repeat(5,1fr);column-gap:clamp(18px,2.4vw,34px);padding-top:0}
  .hts-steps::before{left:0;right:0;top:7px;bottom:auto;width:auto;height:6px;
    background:linear-gradient(90deg,var(--r-grad))}
  .hts-steps li{padding:52px 0 0}
  .hts-steps li::before{left:0;top:0}
  .hts-steam{left:-2px;top:-40px;height:38px}
}
.ms-page .hts-ritual .elementor-widget-wrap>.hts-rail-w+.ms-btn{margin-top:clamp(34px,4vw,48px)}

/* the chooser */
.ms-page div.hts-picks-w{max-width:none;margin-top:clamp(28px,4vw,48px)}
.hts-picks{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.hts-pick{display:flex;flex-direction:column;padding:26px 26px 0;background:var(--porcelain);
  border:1px solid var(--hair);border-radius:2px;color:var(--ink-soft)}
.hts-pick h3{font-size:var(--t-2);line-height:1.05;margin:0;color:var(--ink)}
.hts-picks p{margin:0}
.hts-pick p.hts-pick-price{font-family:var(--f-display);font-size:clamp(64px,7vw,84px);line-height:.9;
  margin-top:14px;color:var(--ink);font-variant-numeric:lining-nums}
.hts-pick-price span{font-size:.42em;vertical-align:.9em;margin-right:3px;color:var(--brass)}
.hts-pick p.hts-pick-result{margin-top:16px;font-weight:600;font-size:18.5px;line-height:1.35;color:var(--ink)}
.hts-pick p.hts-pick-for{margin-top:6px;font-size:15.5px;line-height:1.5;color:var(--nickel);flex:1 0 auto}
.hts-pick p.hts-pick-go{margin:22px -26px 0;border-top:1.5px dashed #CFC8BC}
.hts-pick-go a{display:flex;align-items:center;justify-content:space-between;padding:18px 26px;
  font-weight:600;font-size:16.5px;color:var(--ink);text-decoration:none;transition:color .16s ease,background .16s ease}
.hts-pick-go a::after{content:"";width:9px;height:9px;border-top:1.75px solid currentColor;border-right:1.75px solid currentColor;
  transform:rotate(45deg);margin-right:4px}
.hts-pick-go a:hover,.hts-pick-go a:focus-visible{color:var(--brass);background:#EFEBE4}
.hts-pick p.hts-pick-more{margin-top:10px;font-size:15px;font-weight:600}
/* the shave itself: ink, and a touch larger on desktop */
.hts-pick.hts-pick-main{background:var(--ink);border-color:var(--ink);color:#C9C4BB}
.hts-pick-main h3,.hts-pick-main p.hts-pick-price,.hts-pick-main p.hts-pick-result{color:var(--porcelain)}
.hts-pick-main .hts-pick-price span{color:var(--brass-lt)}
.hts-pick-main p.hts-pick-for{color:#A9A9B2}
.hts-pick-main p.hts-pick-go{border-top-color:#3E3E47}
.hts-pick-main .hts-pick-go a{color:var(--porcelain)}
.hts-pick-main .hts-pick-go a:hover,.hts-pick-main .hts-pick-go a:focus-visible{color:var(--ink);background:var(--brass-lt)}
@media(min-width:800px){
  .hts-picks{grid-template-columns:1.3fr 1fr 1fr;align-items:stretch}
  .hts-pick.hts-pick-main{padding-top:34px}
}

/* ==========================================================================
   Service page: Beard trim (/beard-trim-alpharetta/). Reuses the men's
   haircut layer (.ms-svc-* hero + .ms-ticket, .ms-steps, .ms-styles, .ms-sibs,
   .ms-rev, .faq, .ms-close). New here is the Edge Map (.em-*): a face with the
   three edges of a beard line-up (cheek line, lip line, neckline) and two ways
   to finish them. It is the page's one bold object and its one motion: the
   lines redraw when you switch between clipper (soft, broken, stubble across
   the edge) and razor (solid, clean skin outside the edge). Without JS both
   briefs show, stacked, beside the razor diagram. app.js: edgeMap IIFE.
   ========================================================================== */
.ms-beard-hero h1.elementor-heading-title{max-width:14ch}

.ms-page div.ms-edge-w,.ms-edge .elementor-widget-html{max-width:none}
:where(.ms-edge .elementor-widget-wrap)>.elementor-widget-html{margin-top:clamp(28px,4vw,48px)}
.ms-page div.ms-edge-note{margin-top:18px;font-size:15.5px}

.em{display:grid;gap:clamp(24px,4vw,56px)}
@media(min-width:900px){.em{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start}}
.em-fig{background:var(--talc);border:1px solid var(--hair);border-radius:2px;padding:clamp(14px,3vw,34px) clamp(8px,2vw,24px)}
@media(min-width:900px){.em-fig{position:sticky;top:110px}}
.em-dia{display:block;width:100%;height:auto;max-width:460px;margin-inline:auto}

/* the diagram: brass lines on the edge, one finish layer showing at a time */
.em-g{fill:none;stroke:var(--brass-lt);stroke-width:3.5;stroke-linecap:round}
.em-clean,.em-stub{transition:opacity .45s ease}
.em[data-mode=razor] .em-stub{opacity:0}
.em[data-mode=clipper] .em-clean{opacity:0}
.em[data-mode=clipper] .em-g{stroke-dasharray:3 6;stroke-width:3}
.em-lab path{fill:none;stroke:var(--nickel);stroke-width:1}
.em-lab circle{fill:var(--ink)}
.em-lab text{font-family:var(--f-text);font-size:14px;fill:var(--ink)}
/* the one motion: switching mode swaps the animation name, which restarts it */
.em.is-live[data-mode=razor] .em-g{stroke-dasharray:100;animation:em-draw .75s cubic-bezier(.3,.7,.25,1) both}
.em.is-live[data-mode=clipper] .em-g{animation:em-dots .5s ease-out both}
@keyframes em-draw{from{stroke-dashoffset:100}}
@keyframes em-dots{from{opacity:0}}
@media(prefers-reduced-motion:reduce){
  .em.is-live[data-mode] .em-g{animation:none}
  .em-clean,.em-stub{transition:none}
}

/* the switch: two halves of one control, the open one inked */
.em-chips{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1.5px solid var(--ink);border-radius:2px}
.em:not(.is-live) .em-chips{display:none}
.em-chips a.em-chip{display:flex;align-items:baseline;justify-content:center;gap:10px;min-height:56px;padding:12px 16px;
  font-weight:600;font-size:17px;color:var(--ink);text-decoration:none;transition:background .16s ease,color .16s ease}
.em-chips a.em-chip+a.em-chip{border-left:1.5px solid var(--ink)}
.em-chip b{font-family:var(--f-display);font-weight:400;font-size:var(--t-2);line-height:1}
.em-chips a.em-chip:hover{background:#EFEBE4}
.em-chips a.em-chip[aria-current=true]{background:var(--ink);color:var(--porcelain);box-shadow:inset 0 -3px 0 var(--brass-lt)}

/* a brief */
.em-way{padding-top:clamp(24px,3vw,34px)}
.em:not(.is-live) .em-way+.em-way{margin-top:clamp(28px,4vw,44px);border-top:1px solid var(--hair)}
.em-way[id]{scroll-margin-top:110px}
.em-way header{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:1.5px solid var(--ink)}
.em-way h3{font-size:var(--t-3);line-height:1;margin:0;max-width:14ch}
.em-way p{margin:0}
.em-way p.em-price{font-family:var(--f-display);font-size:clamp(64px,8vw,96px);line-height:.82;color:var(--ink);font-variant-numeric:lining-nums}
.em-price span{font-size:.4em;vertical-align:.95em;margin-right:3px;color:var(--brass)}
.em-way p.em-what{margin-top:18px;font-size:var(--t-0);line-height:1.6;color:var(--ink-soft);max-width:52ch}
.em-way dl{margin:18px 0 0;max-width:52ch}
.em-way dt{margin-top:14px;font-weight:600;font-size:14.5px;line-height:1.3;color:var(--ink)}
.em-way dd{margin:3px 0 0;font-size:16px;line-height:1.55;color:var(--nickel)}
.em-way p.em-act{margin-top:26px}

/* ==========================================================================
   Hub page: Shave & beard (/shave-and-beard/). Reuses the hub/service layer
   (ms-svc-hero + tk-menu ticket, ms-sibs, ms-styles, ms-know, ms-rev, faq,
   ms-close). New here, prefixed .sb-: "How much razor?", the three services
   in order of how much of the face the razor touches. They stand on one brass
   strop that gets thicker from the clipper line-up to the full shave, each
   with a small face drawn in the beard page's Edge Map language. The only
   motion answers the visitor: hovering or focusing a service redraws its lines.
   ========================================================================== */
.ms-page .ms-sb-photo img{object-position:50% 38%}

.ms-page div.ms-sb-w,.ms-sb-menu .elementor-widget-html{max-width:none}
:where(.ms-sb-menu .elementor-widget-wrap)>.elementor-widget-html{margin-top:clamp(30px,4.5vw,56px)}
.ms-page div.ms-sb-note{margin-top:clamp(22px,3vw,32px);font-size:15.5px}

.sb-menu{--p:clamp(20px,2.6vw,36px);list-style:none;margin:0;padding:0;display:grid;gap:clamp(40px,7vw,56px)}
.sb-step{min-width:0;display:flex;flex-direction:column}
@media(min-width:900px){
  .sb-menu{grid-template-columns:repeat(3,1fr);gap:0}
  .sb-step{padding:0 var(--p)}
  .sb-step:first-child{padding-left:0}
  .sb-step:last-child{padding-right:0}
  .sb-step+.sb-step{border-left:1px solid var(--hair)}
}

.sb-card{display:flex;flex-direction:column;flex:1;color:var(--ink);text-decoration:none;border-radius:2px}
.sb-card:hover{color:var(--ink)}
.sb-card:focus-visible{outline:3px solid var(--crimson);outline-offset:8px}
.sb-fig{display:block}
.sb-dia{display:block;width:min(200px,58%);height:auto}

/* the strop: one band across the three steps, thicker as the razor does more */
.sb-strop{display:block;height:var(--sb-h,3px);margin:22px 0 22px;background:var(--brass);border-radius:1px}
.sb-clip{--sb-h:3px}
.sb-razor{--sb-h:7px}
.sb-shave{--sb-h:12px}
@media(min-width:900px){
  .sb-strop{margin-inline:calc(-1 * var(--p))}
  .sb-step:first-child .sb-strop{margin-left:0}
  .sb-step:last-child .sb-strop{margin-right:0;border-radius:1px 6px 6px 1px}
}

.sb-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.sb-card h3{margin:0;font-size:var(--t-3);line-height:1;max-width:9ch}
.sb-price{font-family:var(--f-display);font-size:clamp(58px,6vw,78px);line-height:.82;font-variant-numeric:lining-nums}
.sb-price span{font-size:.4em;vertical-align:.95em;margin-right:3px;color:var(--brass)}
.sb-what{display:block;margin-top:16px;font-size:var(--t-0);line-height:1.55;color:var(--ink-soft);max-width:34ch}
.sb-inc{display:block;margin-top:14px;padding-top:12px;border-top:1px solid var(--hair);font-size:15.5px;line-height:1.45;color:var(--nickel)}
.sb-go{display:inline-flex;align-items:center;gap:10px;margin-top:auto;padding-top:18px;font-weight:600;font-size:16.5px;color:var(--brass);
  text-decoration:underline;text-decoration-color:rgba(125,90,12,.4);text-underline-offset:.2em}
.sb-go::after{content:"";width:8px;height:8px;border-top:1.75px solid currentColor;border-right:1.75px solid currentColor;transform:rotate(45deg)}
.sb-card:hover .sb-go{color:var(--ink);text-decoration-color:var(--ink)}
.sb-step p.sb-book{margin:14px 0 0}
.sb-book a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1.5px solid var(--ink);border-radius:2px;
  font-weight:600;font-size:15.5px;color:var(--ink);text-decoration:none;transition:background .16s ease,color .16s ease}
.sb-book a:hover,.sb-book a:focus-visible{background:var(--ink);color:var(--porcelain)}

/* the faces' lines, and the one motion */
.sb-g{fill:none;stroke:var(--brass-lt);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.sb-clip .sb-g{stroke-dasharray:3 6;stroke-width:3}
.sb-razor .sb-card:hover .sb-g,.sb-razor .sb-card:focus-visible .sb-g,
.sb-shave .sb-card:hover .sb-g,.sb-shave .sb-card:focus-visible .sb-g{stroke-dasharray:100;animation:sb-draw .75s cubic-bezier(.3,.7,.25,1) both}
.sb-clip .sb-card:hover .sb-g,.sb-clip .sb-card:focus-visible .sb-g{animation:sb-dots .5s ease-out both}
@keyframes sb-draw{from{stroke-dashoffset:100}}
@keyframes sb-dots{from{opacity:0}}
@media(prefers-reduced-motion:reduce){.sb-card .sb-g{animation:none!important}}

.ms-page p.ms-sb-up{margin-top:18px;font-size:15.5px}

/* ==========================================================================
   Service page: Keratin treatment (/keratin-treatment-alpharetta/). Reuses the
   men's haircut layer (.ms-svc-* hero + .ms-ticket, .ms-styles, .ms-sibs,
   .ms-know, .ms-rev, .faq, .ms-close) and the Fade Finder's chips and panels
   (.ff-*, data-ff) for the hair-type chooser. New here, prefixed .kt-:
   - the smoothing strand: one lock of hair drawn twice (frizzy, then sleek)
     in two stacked SVGs. The sleek copy has an opaque background and a
     clip-path, and a flat iron marks the edge. It is the page's one bold
     object and its one motion: when the strand first scrolls into view the
     iron travels in from the tip and the sleek lock follows it (app.js adds
     .is-live, then .is-in). Without JS, or with reduced motion, the finished
     state shows: a third still frizzy, the rest smooth.
   - the verdict panels in the chooser, the price "what moves it" list, and
     the comparison table (stacked label/value rows below 700px).
   ========================================================================== */
.ms-page .kt-photo img{object-position:50% 30%}

/* the strand */
.ms-page div.kt-strand-w{max-width:none;margin-top:clamp(30px,4.5vw,56px)}
.kt{--kt-bg:var(--talc);--kt-at:34%}
.kt p.kt-ends{display:flex;justify-content:space-between;gap:16px;margin:0 0 14px;font-size:15px;line-height:1.3;color:var(--nickel)}
.kt-ends span:last-child{text-align:right;color:var(--brass)}
.kt-lock{position:relative;height:clamp(92px,12vw,150px)}
.kt-lock svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.kt-lock path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.kt-hairs path{stroke-width:2.1}
.kt-sleek .kt-hairs path{stroke-width:2.6}
.kt-lock .kt-h1{stroke:var(--ink-soft)}
.kt-lock .kt-h2{stroke:var(--brass)}
.kt-lock .kt-h3{stroke:var(--nickel)}
.kt-frizz .kt-hairs{opacity:.85}
.kt-fly path{stroke:var(--nickel);stroke-width:1.3;opacity:.7}
.kt-lock path.kt-shine{stroke:#F3E6C8;stroke-width:2.4}
.kt-sleek{background:var(--kt-bg);clip-path:inset(0 0 0 var(--kt-at))}
/* the flat iron: an ink handle with a hot brass plate, ringed in the section colour */
.kt-iron{position:absolute;top:-14px;bottom:-14px;left:var(--kt-at);width:16px;margin-left:-8px;border-radius:5px;
  background:var(--ink);box-shadow:0 0 0 3px var(--kt-bg)}
.kt-iron::after{content:"";position:absolute;inset:12px 5px;border-radius:2px;background:var(--brass-lt)}
.kt.is-live .kt-sleek{clip-path:inset(0 0 0 100%)}
.kt.is-live .kt-iron{left:calc(100% - 8px)}
.kt.is-live.is-in .kt-sleek{clip-path:inset(0 0 0 var(--kt-at));transition:clip-path 1.8s cubic-bezier(.55,.1,.25,1) .15s}
.kt.is-live.is-in .kt-iron{left:var(--kt-at);transition:left 1.8s cubic-bezier(.55,.1,.25,1) .15s}
@media(prefers-reduced-motion:reduce){
  .kt.is-live .kt-sleek,.kt.is-live.is-in .kt-sleek{clip-path:inset(0 0 0 var(--kt-at));transition:none}
  .kt.is-live .kt-iron,.kt.is-live.is-in .kt-iron{left:var(--kt-at);transition:none}
}

/* the five steps under it: a real sequence, so numbered */
.kt-steps{list-style:none;margin:clamp(34px,4.5vw,56px) 0 0;padding:0;counter-reset:kt;display:grid;gap:26px}
.kt-steps li{position:relative;padding-left:54px}
.kt-steps li::before{counter-increment:kt;content:counter(kt);position:absolute;left:0;top:-2px;
  font-family:var(--f-display);font-size:var(--t-4);line-height:1;color:var(--brass)}
.kt-steps h3{font-size:var(--t-1);line-height:1.15;margin:0 0 6px}
.kt-steps p{margin:0;font-size:16px;line-height:1.55;color:var(--nickel);max-width:36ch}
@media(min-width:900px){
  .kt-steps{grid-template-columns:repeat(5,1fr);column-gap:clamp(18px,2.4vw,32px)}
  .kt-steps li{padding:22px 0 0;border-top:1px solid var(--hair)}
  .kt-steps li::before{position:static;display:block;margin-bottom:12px}
}
.ms-page .kt-how .elementor-widget-wrap>.kt-strand-w+.ms-btn{margin-top:clamp(34px,4vw,48px)}

/* the chooser: the verdict sits where the Fade Finder has its photo */
.kt-types .kt-verdict{display:flex;align-items:flex-end;min-height:clamp(150px,20vw,260px);padding:clamp(22px,3vw,34px);
  background:var(--ink);border-radius:2px;box-shadow:inset 0 -4px 0 var(--brass-lt)}
.kt-types .kt-verdict p{margin:0;font-family:var(--f-display);font-size:var(--t-6);line-height:.95;color:var(--porcelain)}
.kt-types .ff-body p.ff-what a,.kt-cmp a{color:inherit;text-decoration-color:var(--brass);text-underline-offset:3px}

/* price: what moves it */
.ms-page ul.kt-moves{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--hair)}
.kt-moves li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--hair);
  font-size:16.5px;line-height:1.4;color:var(--nickel)}
.kt-moves b{flex:none;color:var(--ink);font-weight:600}
.kt-moves li{text-align:right}
.kt-moves li b{text-align:left}

/* the comparison */
.ms-page div.kt-cmp-wrap{max-width:none;margin-top:clamp(26px,3.5vw,40px)}
.kt-cmp{width:100%;border-collapse:collapse;font-size:16.5px;line-height:1.45}
.kt-cmp caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kt-cmp thead th{text-align:left;font-weight:600;font-size:14.5px;color:var(--nickel);padding:0 16px 12px 0;border-bottom:1.5px solid var(--ink)}
.kt-cmp thead th:last-child{text-align:right;padding-right:0}
.kt-cmp tbody th,.kt-cmp td{text-align:left;vertical-align:top;padding:18px 16px 18px 0;border-bottom:1px solid var(--hair)}
.kt-cmp tbody th{width:22%;font-family:var(--f-display);font-weight:400;font-size:var(--t-1);line-height:1.1;color:var(--ink)}
.kt-cmp td{color:var(--ink-soft)}
.kt-cmp td.kt-cmp-price{text-align:right;padding-right:0;white-space:nowrap;font-family:var(--f-display);font-size:var(--t-2);line-height:1;color:var(--ink)}
.kt-cmp tr.kt-cmp-main>*{background:var(--talc)}
.kt-cmp tr.kt-cmp-main th{padding-left:16px;box-shadow:inset 3px 0 0 var(--brass)}
.kt-cmp tr.kt-cmp-main td.kt-cmp-price{padding-right:16px}
@media(max-width:699px){
  .kt-cmp thead{display:none}
  .kt-cmp,.kt-cmp tbody,.kt-cmp tr,.kt-cmp tbody th,.kt-cmp td{display:block;width:auto}
  .kt-cmp tr{padding:18px 0;border-bottom:1px solid var(--hair)}
  .kt-cmp tbody th,.kt-cmp td{padding:0;border:0}
  .kt-cmp tbody th{font-size:var(--t-2);margin-bottom:10px}
  .kt-cmp td{display:flex;gap:12px;padding:3px 0}
  .kt-cmp td::before{content:attr(data-l);flex:0 0 100px;padding-top:2px;font-family:var(--f-text);font-size:14px;color:var(--nickel)}
  .kt-cmp td.kt-cmp-price{text-align:left;font-size:var(--t-1)}
  .kt-cmp tr.kt-cmp-main{padding-inline:16px;background:var(--talc);box-shadow:inset 3px 0 0 var(--brass)}
  .kt-cmp tr.kt-cmp-main>*{background:none}
  .kt-cmp tr.kt-cmp-main th{padding-left:0;box-shadow:none}
  .kt-cmp tr.kt-cmp-main td.kt-cmp-price{padding-right:0}
}
.ms-page div.kt-cmp-note{margin-top:20px}

/* ==========================================================================
   Service page: Brazilian Blowout (/brazilian-blowout-alpharetta/). Reuses the
   men's haircut layer (.ms-svc-* hero + .ms-ticket, .ms-steps, .ms-styles,
   .ms-sibs, .ms-rev, .faq, .ms-close). New here is the humidity test (.bb-*):
   two heads of long hair seen from behind, untreated and after a Brazilian
   Blowout, driven by one number, --f (0 = dry air, 1 = soaking), set by the
   slider. The untreated hair puffs out and its flyaways draw in one by one
   (each has --d, the frizz level where it starts); the treated hair shows a
   tenth of that. It is the page's one bold object and its one motion: app.js
   (brazilHumidity) raises the humidity once when it scrolls into view. Without
   JS the 90% state renders and the controls are hidden. Also here: the fit
   list, the vs table, and the "from $80" price.
   ========================================================================== */
.ms-bb-hero h1.elementor-heading-title{max-width:12ch}
.ms-ticket .tk-plus{font-size:.5em;vertical-align:.7em;margin-left:2px;color:var(--brass)}

/* the humidity test */
.ms-page.ms-bb-test{border-top:1px solid var(--hair-dk)}
.ms-bb-test h2.elementor-heading-title{max-width:16ch}
.ms-page div.bb-intro{color:#C9C4BB;max-width:56ch}
.ms-page div.ms-bb-w,.ms-bb-test .elementor-widget-html{max-width:none}
:where(.ms-bb-test .elementor-widget-wrap)>.elementor-widget-html{margin-top:clamp(28px,4vw,52px)}

.bb{--f:.9;display:grid;gap:clamp(28px,4vw,56px)}
@media(min-width:900px){.bb{grid-template-columns:minmax(0,4fr) minmax(0,7fr);align-items:center}}

.bb-ctl p{margin:0}
.bb p.bb-read{display:flex;align-items:flex-start;font-family:var(--f-display);font-size:clamp(104px,15vw,176px);
  line-height:.8;color:var(--porcelain);font-variant-numeric:tabular-nums lining-nums}
.bb-read span{font-size:.36em;line-height:1;margin:.12em 0 0 .06em;color:var(--brass-lt)}
.bb p.bb-read-l{margin-top:14px;font-size:17px;color:#A9A9B2}
.bb-lab{display:block;margin-top:clamp(22px,3vw,34px);font-size:15px;color:#A9A9B2}

/* the slider: a hairline track that fills brass up to the thumb */
.bb-range{--p:86%;-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:4px 0 0;background:transparent;cursor:pointer}
.bb-range::-webkit-slider-runnable-track{height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--brass-lt) var(--p),#3A3A44 var(--p))}
.bb-range::-moz-range-track{height:4px;border-radius:2px;background:#3A3A44}
.bb-range::-moz-range-progress{height:4px;border-radius:2px;background:var(--brass-lt)}
.bb-range::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-11px;border-radius:50%;
  background:var(--porcelain);border:4px solid var(--brass-lt);box-shadow:0 2px 10px rgba(0,0,0,.5)}
.bb-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--porcelain);border:4px solid var(--brass-lt)}
.bb-range:focus-visible{outline:3px solid var(--brass-lt);outline-offset:4px}

.bb-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.bb-chips button{font:600 15px/1.2 var(--f-text);color:#DEDAD3;background:transparent;
  border:1.5px solid #54545E;border-radius:999px;padding:9px 16px;min-height:40px;cursor:pointer;
  transition:background .16s ease,color .16s ease,border-color .16s ease}
.bb-chips button:hover{border-color:var(--porcelain);color:var(--porcelain)}
.bb-chips button[aria-pressed=true]{background:var(--porcelain);border-color:var(--porcelain);color:var(--ink)}
.bb p.bb-note{margin-top:clamp(20px,3vw,30px);font-size:14.5px;line-height:1.5;color:#8A8A94;max-width:34ch}
.bb:not(.is-live) .bb-lab,.bb:not(.is-live) .bb-range,.bb:not(.is-live) .bb-chips{display:none}

/* the two heads, in humid air: the cobalt panel mists over as --f rises */
.bb-fig{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,2vw,20px)}
.bb-head{margin:0;min-width:0}
.bb-svg{display:block;width:100%;height:auto;border-radius:2px;
  background:radial-gradient(120% 90% at 50% 20%,rgba(246,244,240,calc(var(--f) * .16)),transparent 70%),var(--cobalt)}
.bb-body{fill:var(--ink-soft)}
.bb-mass{fill:var(--brass)}
.bb-strands path{fill:none;stroke:rgba(20,20,24,.3);stroke-width:1.4;stroke-linecap:round}
.bb-sheen{fill:none;stroke:rgba(246,244,240,.4);stroke-width:5;stroke-linecap:round}
.bb-fly path{fill:none;stroke:var(--brass-lt);stroke-width:1.5;stroke-linecap:round;
  stroke-dasharray:1 1;stroke-dashoffset:calc(1 - clamp(0,(var(--f) - var(--d)) * 2.2,1));
  transition:stroke-dashoffset .2s linear}
.bb-done .bb-fly path{stroke-dashoffset:calc(1 - clamp(0,(var(--f) - var(--d)) * .22,1))}
/* the puff: the untreated hair widens from the crown down */
.bb-hair{transform-box:fill-box;transform-origin:50% 0;transition:transform .2s linear}
.bb-raw .bb-hair{transform:scale(calc(1 + var(--f) * .12),calc(1 + var(--f) * .03))}

.bb-head figcaption{padding-top:14px}
.bb-head figcaption b{display:block;font-family:var(--f-display);font-weight:400;font-size:var(--t-1);line-height:1.1;color:var(--porcelain)}
.bb-head figcaption span{display:block;margin-top:6px;font-size:15.5px;line-height:1.45;color:#A9A9B2}
.bb-done figcaption b{color:var(--brass-lt)}
@media(prefers-reduced-motion:reduce){.bb-fly path,.bb-hair{transition:none}}

/* is it right for you: four plain statements, ruled like the steps */
.ms-page div.bb-fit-w{max-width:none}
.bb-fit{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.bb-fit li{position:relative;padding:18px 0 18px 36px;border-bottom:1px solid var(--hair);font-size:16px;line-height:1.5;color:var(--nickel)}
.bb-fit li::before{content:"";position:absolute;left:4px;top:25px;width:12px;height:7px;
  border-left:2px solid var(--brass);border-bottom:2px solid var(--brass);transform:rotate(-45deg)}
.bb-fit b{display:block;font-weight:600;font-size:var(--t-0);color:var(--ink)}

/* the comparison: this page's column is inked */
.ms-bb-fit h3.bb-vs-h{margin-top:clamp(48px,6vw,80px)}
.ms-page div.bb-vs-w{max-width:none;margin-top:clamp(18px,2.5vw,28px)}
.bb-vs-scroll{overflow-x:auto;margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut)}
.bb-vs{width:100%;min-width:640px;border-collapse:collapse;font-size:16px;line-height:1.5}
.bb-vs th,.bb-vs td{text-align:left;vertical-align:top;padding:16px 18px;border-bottom:1px solid var(--hair)}
.bb-vs thead th{font-family:var(--f-display);font-weight:400;font-size:var(--t-1);line-height:1.1;color:var(--ink);
  border-bottom:1.5px solid var(--ink)}
.bb-vs thead th a{color:var(--ink);text-decoration-color:var(--brass)}
.bb-vs thead th a:hover{color:var(--brass)}
.bb-vs tbody th{width:18%;font-weight:600;font-size:15px;color:var(--ink)}
.bb-vs td{color:var(--nickel)}
.bb-vs td b{font-family:var(--f-display);font-weight:400;font-size:var(--t-2);line-height:1;color:var(--ink)}
.bb-vs .is-this{background:var(--ink);color:#DEDAD3;border-bottom-color:var(--hair-dk)}
.bb-vs thead .is-this{color:var(--porcelain);border-bottom-color:var(--brass-lt)}
.bb-vs td.is-this b{color:var(--porcelain)}
.bb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ms-page div.bb-vs-note{margin-top:22px;font-size:16px;max-width:72ch}

/* the price: "from" set small over a big Anton $80 */
.bb-price p.bb-from{display:flex;flex-direction:column;margin:6px 0 18px}
.bb-from span{font-size:17px;color:var(--nickel)}
.bb-from b{font-family:var(--f-display);font-weight:400;font-size:clamp(96px,12vw,140px);line-height:.85;color:var(--ink)}
.bb-from sup{font-size:.36em;vertical-align:.9em;margin-right:4px;color:var(--brass);top:0}

/* ==========================================================================
   Service page: Men's facial (/mens-facial-alpharetta/). Reuses the men's
   haircut layer (.ms-svc-* hero + .ms-ticket, .ms-know, .ms-sibs, .ms-rev,
   .faq, .ms-close). New here, prefixed .mf-:
   - the peel: the page's one bold object and its one motion. "Clean slate."
     sits on a white sheet under a charcoal layer. When the sheet first scrolls
     into view, app.js arms it (.mf-armed shows the mask) and then peels it
     (.is-in): the mask's clip retreats left to right with a rolled edge
     (.mf-curl) riding on it, the way a peel-off mask comes away. Without JS,
     or with reduced motion, the mask is never shown, so the words are always
     readable.
   - the four stages under it, each with a swatch that runs clean skin ->
     charcoal -> half peeled -> finished (brass ring).
   - "who books it": four reasons under a top rule, not boxed cards.
   ========================================================================== */
.ms-page .mf-photo img{object-position:50% 42%}

/* the sheet */
.ms-page div.mf-peel-w{max-width:none;margin-top:clamp(30px,4.5vw,54px)}
.mf-sheet{--char:#1E1E23;position:relative;overflow:hidden;display:flex;align-items:center;
  min-height:clamp(200px,27vw,320px);padding:clamp(26px,5vw,64px);
  background:var(--talc);border:1px solid var(--hair);border-radius:2px}
.mf-sheet p.mf-under{margin:0;display:flex;flex-direction:column;gap:12px}
.mf-under span{font-family:var(--f-display);font-weight:400;font-size:clamp(58px,11.5vw,148px);
  line-height:.88;color:var(--ink)}
.mf-under small{font-size:17px;line-height:1.4;color:var(--brass);font-weight:600}
/* charcoal: matte, with a fine grain from two offset dot grids */
.mf-mask{display:none;position:absolute;inset:0;clip-path:inset(0 0 0 0);
  background-color:var(--char);
  background-image:linear-gradient(115deg,rgba(255,255,255,.06),rgba(255,255,255,0) 42%),
    radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.3px),
    radial-gradient(rgba(0,0,0,.45) 1px,transparent 1.3px);
  background-size:auto,7px 7px,11px 11px;background-position:0 0,0 0,3px 5px}
/* the lifted edge: a rolled strip of mask with a soft shadow on the skin */
.mf-curl{display:none;position:absolute;top:-2px;bottom:-2px;left:0;width:clamp(22px,3vw,40px);
  border-radius:0 40% 40% 0/0 6% 6% 0;
  background:linear-gradient(90deg,#2A2A31 0%,#4A4A53 38%,#7A7A83 55%,#3A3A42 74%,var(--char) 100%);
  box-shadow:-14px 0 22px -8px rgba(20,20,24,.35)}
.mf-sheet.mf-armed .mf-mask,.mf-sheet.mf-armed .mf-curl{display:block}
.mf-sheet.mf-armed.is-in .mf-mask{animation:mf-peel 1.8s cubic-bezier(.62,.04,.3,1) .35s forwards}
.mf-sheet.mf-armed.is-in .mf-curl{animation:mf-curl 1.8s cubic-bezier(.62,.04,.3,1) .35s forwards}
@keyframes mf-peel{to{clip-path:inset(0 0 0 100%)}}
@keyframes mf-curl{88%{opacity:1}to{left:100%;opacity:0}}
@media(prefers-reduced-motion:reduce){
  .mf-sheet.mf-armed .mf-mask,.mf-sheet.mf-armed .mf-curl{display:none}
}

/* the four stages */
.mf-stages{list-style:none;margin:clamp(28px,3.5vw,44px) 0 0;padding:0;display:grid;gap:28px;counter-reset:mf}
.mf-stages li{position:relative;padding-left:62px}
.mf-sw{position:absolute;left:0;top:0;width:42px;height:42px;border-radius:50%;box-sizing:border-box;
  background:var(--porcelain);border:1.5px solid #CFC8BC}
.mf-stages li.mf-st-mask .mf-sw{background-color:#1E1E23;border-color:#1E1E23;
  background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1.3px);background-size:6px 6px}
.mf-stages li.mf-st-peel .mf-sw{border-color:#1E1E23;
  background:linear-gradient(90deg,var(--porcelain) 50%,#1E1E23 50%)}
.mf-stages li.mf-st-finish .mf-sw{background:var(--talc);border:3px solid var(--brass)}
.mf-stages h3{display:flex;align-items:baseline;gap:10px;font-size:var(--t-2);line-height:1.05;margin:0 0 8px}
.mf-stages h3::before{counter-increment:mf;content:counter(mf);font-size:var(--t-1);color:var(--brass)}
.mf-stages p{margin:0;font-size:16.5px;line-height:1.55;color:var(--nickel);max-width:34ch}
@media(min-width:900px){
  .mf-stages{grid-template-columns:repeat(4,1fr);column-gap:clamp(20px,2.6vw,36px)}
  .mf-stages li{padding:62px 0 0}
  /* a hairline joins the swatches, the same order the facial goes in */
  .mf-stages::before{content:"";position:absolute;left:21px;right:21px;top:21px;height:1.5px;background:#CFC8BC}
  .mf-stages{position:relative}
  .mf-sw{z-index:1}
}
.ms-page .mf-peel .elementor-widget-wrap>.mf-peel-w+.ms-btn{margin-top:clamp(34px,4vw,48px)}

/* who books it */
.ms-page div.mf-whys-w{max-width:none;margin-top:clamp(28px,4vw,46px)}
.mf-whys{list-style:none;margin:0;padding:0;display:grid;gap:30px}
.mf-whys li{border-top:2px solid var(--ink);padding-top:18px}
.mf-whys i{font-size:19px;color:var(--brass)}
.mf-whys h3{font-size:var(--t-2);line-height:1.05;margin:14px 0 8px}
.mf-whys p{margin:0;font-size:16.5px;line-height:1.55;color:var(--nickel);max-width:34ch}
@media(min-width:700px){.mf-whys{grid-template-columns:repeat(2,1fr);column-gap:clamp(24px,3vw,40px)}}
@media(min-width:1040px){.mf-whys{grid-template-columns:repeat(4,1fr)}}

/* ==========================================================================
   Service page: Permanent straightening (/hair-straightening-alpharetta/).
   Reuses the men's haircut layer (.ms-svc-* hero + .ms-ticket, .ms-steps,
   .ms-sibs, .ms-know, .ms-rev, .faq, .ms-close). New here, prefixed .pst-:
   - the spectrum: four salon treatments hanging from one rail that runs from
     "keeps its wave" to "straight for good", each drawn as the strand it
     leaves (the SVG wave amplitude is the curl left). Permanent straightening
     is the ink card. The page's one bold object. Four across from 900px;
     below that a vertical list with the rail down the left.
   - the regrowth figure: the same strand three times (day one / as it grows /
     root touch-up). Its one motion: the new growth draws in at the root when
     it scrolls into view. app.js adds .is-ready then .is-in, so without JS
     the figure is simply drawn complete.
   ========================================================================== */
.ms-page .pst-photo img{object-position:50% 40%}
.ms-ticket .tk-plus{font-size:.42em;vertical-align:.95em;margin-left:2px;color:var(--brass)}

/* the spectrum */
.ms-page div.pst-spec-w{max-width:none;margin-top:clamp(34px,5vw,60px)}
.pst-spec{--rail:linear-gradient(90deg,#CBBFA9,var(--brass-lt) 45%,var(--brass) 70%,var(--ink))}
.pst-ends{display:none}
.pst-stops{list-style:none;margin:0;padding:0 0 0 22px;position:relative;display:grid;gap:14px}
.pst-stops::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;border-radius:3px;
  background:linear-gradient(180deg,#CBBFA9,var(--brass-lt) 45%,var(--brass) 70%,var(--ink))}
.pst-stops>li{--strand:var(--ink-soft);display:grid;grid-template-columns:40px 1fr;gap:18px;
  padding:20px 22px 22px 16px;background:var(--talc);border:1px solid var(--hair);border-radius:3px}
.pst-stops>li.pst-s1{--strand:#A89C86}
.pst-stops>li.pst-s2{--strand:var(--brass)}
.pst-stops>li.pst-s4{--strand:var(--ink)}
.pst-stops>li.is-here{--strand:var(--brass-lt);background:var(--ink);border-color:var(--ink);color:#C9C4BB}
.pst-hair{width:40px;height:150px;overflow:visible}
.pst-hair path{fill:none;stroke:var(--strand);stroke-width:3.5;stroke-linecap:round}
.pst-stop h3{font-size:var(--t-2);line-height:1.05;margin:0}
.pst-stop h3 a{color:var(--ink);text-decoration-color:var(--brass)}
.pst-stop h3 a:hover{color:var(--brass)}
.is-here .pst-stop h3{color:var(--porcelain)}
.pst-stop p{margin:0}
.pst-stop p.pst-here{margin-bottom:8px;font-size:14.5px;font-weight:600;color:var(--brass-lt)}
.pst-stop p.pst-price{margin-top:6px;font-family:var(--f-display);font-size:var(--t-3);line-height:1;color:var(--brass)}
.is-here .pst-stop p.pst-price{color:var(--brass-lt)}
.pst-stop dl{margin:16px 0 0;font-size:15.5px;line-height:1.5}
.pst-stop dt{font-weight:600;color:var(--ink)}
.pst-stop dd{margin:0 0 10px;color:var(--nickel)}
.pst-stop dd:last-child{margin-bottom:0}
.is-here .pst-stop dt{color:var(--porcelain)}
.is-here .pst-stop dd{color:#B4B0A8}
.ms-page div.pst-spec-note{margin-top:14px}
@media(min-width:900px){
  .pst-ends{display:flex;justify-content:space-between;margin:0 0 14px;font-weight:600;font-size:15.5px;color:var(--nickel)}
  .pst-ends span:last-child{color:var(--ink)}
  /* the rail runs across the top; each strand hangs from it */
  .pst-stops{padding:0;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px);padding-top:6px}
  .pst-stops::before{left:0;right:0;top:0;bottom:auto;width:auto;height:6px;background:var(--rail)}
  .pst-stops>li{grid-template-columns:1fr;gap:0;padding:0 22px 26px;border-top:0;border-radius:0 0 3px 3px}
  .pst-hair{display:block;width:48px;height:170px;margin:0 0 18px -4px}
}

/* the regrowth figure */
.ms-page div.pst-grow-w{max-width:none}
.pst-grow{margin:0;max-width:520px}
.pst-grow svg{display:block;width:100%;height:auto;overflow:visible}
.pst-scalp rect{fill:var(--ink-soft)}
.pst-grow path{fill:none;stroke-width:4;stroke-linecap:round}
.pst-g-str,.pst-g-touch{stroke:var(--ink)}
.pst-g-new{stroke:var(--brass)}
.pst-g-line{stroke:var(--nickel);stroke-width:1.5;stroke-dasharray:4 4}
.pst-grow.is-ready .pst-g-new{stroke-dasharray:1;stroke-dashoffset:1}
.pst-grow.is-ready .pst-g-line{opacity:0}
.pst-grow.is-in .pst-g-new{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s cubic-bezier(.45,.05,.3,1) .2s}
.pst-grow.is-in .pst-g-line{opacity:1;transition:opacity .5s ease 1.6s}
@media(prefers-reduced-motion:reduce){
  .pst-grow.is-ready .pst-g-new{stroke-dashoffset:0}
  .pst-grow.is-ready .pst-g-line{opacity:1}
}
.pst-grow ol{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;text-align:center}
.pst-grow h3{font-size:var(--t-1);line-height:1.1;margin:0 0 6px}
.pst-grow ol p{margin:0;font-size:15px;line-height:1.45;color:var(--nickel)}
@media(max-width:519.98px){.pst-grow ol p{font-size:14px}}

/* is it right for you */
.ms-page .pst-chair img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 45%;border-radius:2px}
:where(.pst-fit .elementor-widget-wrap)>.elementor-widget-image{margin-top:clamp(26px,3vw,36px)}
.ms-page div.pst-fit-h h3.elementor-heading-title{font-size:var(--t-1)}
:where(.pst-fit .elementor-widget-wrap)>.pst-fit-warn{margin-top:clamp(36px,4vw,48px)}
.ms-page p.pst-cap{font-size:14.5px}

/* the first 72 hours */
.ms-page div.pst-dont-w{max-width:none}
.pst-dont{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.pst-dont li{position:relative;padding:16px 0 16px 44px;border-bottom:1px solid var(--hair);color:var(--nickel);font-size:16.5px;line-height:1.5}
.pst-dont b{display:block;font-weight:600;color:var(--ink);font-size:17px}
/* a crossed-out mark for the three don'ts, a tick for the last line */
.pst-dont li::before,.pst-dont li::after{content:"";position:absolute;left:4px;top:25px;width:18px;height:2px;border-radius:1px;background:var(--brass)}
.pst-dont li::before{transform:rotate(45deg)}
.pst-dont li::after{transform:rotate(-45deg)}
.pst-dont li:last-child::before{width:7px;left:5px;top:28px;background:var(--ink)}
.pst-dont li:last-child::after{width:14px;left:9px;top:25px;background:var(--ink)}

/* ==========================================================================
   Service page: Hair relaxer (/hair-relaxer-alpharetta/). Reuses the men's
   haircut layer (.ms-svc-*, .ms-ticket, .ms-steps, .ms-sibs, .ms-know).
   What is new, all prefixed .hr-:
   - the strand: one hair drawn by build-hair-relaxer-page.php, tight coil on
     the left, loose wave in the middle, straight on the right, with the three
     zones (natural / texturizer / relaxer) captioned under the part of the
     line they describe. It is the page's one bold object and its one motion:
     app.js draws it once when it scrolls into view. On phones the strand
     turns vertical and hangs down beside the captions.
   - the growth ruler: new growth, the line of demarcation, relaxed length.
   - the chooser: a real <table> on desktop, stacked cards on phones.
   ========================================================================== */
.hr-hero h1.elementor-heading-title{max-width:14ch}
.ms-ticket .tk-plus{font-size:.46em;vertical-align:.9em;margin-left:2px;color:var(--brass)}

/* 2. the strand. Same ink as the hero, split from it by a hairline. */
.ms-page.hr-strand-sec{border-top:1px solid var(--hair-dk)}
.hr-strand-sec div.hr-muted{color:#A9A9B2}
.ms-page div.hr-strand-w{margin-top:clamp(30px,4.5vw,56px)}
.hr-strand{--hr-a:30fr;--hr-b:36fr;--hr-c:34fr;--hr-len:620px;--hr-w:78px;
  position:relative;margin:0;display:grid;grid-template-columns:var(--hr-w) 1fr;column-gap:18px}
/* vertical on phones: the svg is laid out --hr-len wide, then turned a
   quarter so the coil sits at the top and the straight end hangs down */
.hr-strand svg{position:absolute;left:0;top:0;width:var(--hr-len);height:var(--hr-w);overflow:visible;
  transform-origin:0 0;transform:rotate(90deg) translateY(-100%)}
.hr-strand figcaption{grid-column:2}
.hr-zones{list-style:none;margin:0;padding:0;height:var(--hr-len);display:grid;
  grid-template-rows:var(--hr-a) var(--hr-b) var(--hr-c)}
.hr-zones li{padding:2px 0 0 16px;border-left:2px solid var(--brass-lt);margin-bottom:10px}
.hr-zones li:nth-child(2){border-left-color:#D9C9A6}
.hr-zones li:nth-child(3){border-left-color:var(--porcelain)}
.hr-zones h3{font-size:var(--t-2);line-height:1.05;margin:0 0 6px;color:var(--porcelain)}
.hr-zones p{margin:0;font-size:16px;line-height:1.5;color:#A9A9B2;max-width:34ch}
@media(min-width:760px){
  .hr-strand{display:block}
  .hr-strand svg{position:static;display:block;width:100%;height:clamp(120px,13vw,160px);transform:none}
  .hr-zones{height:auto;grid-template-rows:none;grid-template-columns:var(--hr-a) var(--hr-b) var(--hr-c);
    margin-top:clamp(18px,2.4vw,28px)}
  .hr-zones li{border-left:0;border-top:2px solid var(--brass-lt);padding:16px clamp(14px,2vw,28px) 0 0;margin:0}
  .hr-zones li:nth-child(2){border-top-color:#D9C9A6}
  .hr-zones li:nth-child(3){border-top-color:var(--porcelain)}
}
/* the draw: armed by app.js only when motion is allowed, so without JS (or
   with reduced motion) the strand and the captions are simply there */
.hr-strand.is-armed .hr-strand-line{stroke-dasharray:1;stroke-dashoffset:1}
.hr-strand.is-armed .hr-zones li{opacity:.25}
.hr-strand.is-armed.is-in .hr-strand-line{stroke-dashoffset:0;transition:stroke-dashoffset 2.6s cubic-bezier(.45,.05,.3,1)}
.hr-strand.is-armed.is-in .hr-zones li{opacity:1;transition:opacity .6s ease}
.hr-strand.is-armed.is-in .hr-zones li:nth-child(1){transition-delay:.2s}
.hr-strand.is-armed.is-in .hr-zones li:nth-child(2){transition-delay:1.1s}
.hr-strand.is-armed.is-in .hr-zones li:nth-child(3){transition-delay:2s}

/* 3. the growth ruler: scalp, new growth (hatched brass), the line, relaxed length */
.ms-page div.hr-ruler-w{margin-top:6px}
.hr-ruler{margin:0}
.hr-bar{display:flex;align-items:center;height:22px}
.hr-bar span{display:block;height:100%}
.hr-scalp{width:10px;background:var(--ink);border-radius:3px 0 0 3px}
.hr-new{width:24%;background:repeating-linear-gradient(135deg,var(--brass) 0 6px,#C9AE78 6px 11px)}
.hr-line{width:4px;height:38px!important;background:var(--ink);border-radius:2px}
.hr-old{flex:1;background:var(--cobalt);border-radius:0 11px 11px 0}
.hr-keys{margin:22px 0 0;display:grid;gap:18px}
.hr-keys div{position:relative;padding-left:28px}
.hr-keys div::before{content:"";position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:3px}
.hr-k-new::before{background:repeating-linear-gradient(135deg,var(--brass) 0 4px,#C9AE78 4px 7px)}
.hr-k-line::before{width:4px!important;left:6px!important;background:var(--ink)}
.hr-k-old::before{background:var(--cobalt)}
.hr-keys dt{font-weight:600;font-size:17px;line-height:1.3;color:var(--ink)}
.hr-keys dd{margin:4px 0 0;font-size:16px;line-height:1.5;color:var(--nickel)}
@media(min-width:700px){
  .hr-keys{grid-template-columns:repeat(3,1fr);column-gap:clamp(18px,2.4vw,30px)}
}
/* aftercare row under the ruler */
.elementor-section.ms-row.hr-care{margin-top:clamp(40px,5vw,64px)}
.hr-care .ms-ib{padding-top:20px;border-top:1px solid var(--hair)}

/* 4. the chooser */
.ms-page div.hr-cmp-w{max-width:none;margin-top:clamp(28px,4vw,48px)}
.hr-cmp{width:100%;border-collapse:collapse;font-size:16px;line-height:1.5}
.hr-cmp thead th{text-align:left;font-weight:600;font-size:14.5px;color:var(--nickel);padding:0 16px 12px 0;border-bottom:1.5px solid var(--ink)}
.hr-cmp tbody th,.hr-cmp td{text-align:left;vertical-align:top;padding:18px 16px 18px 0;border-bottom:1px solid var(--hair)}
.hr-cmp tbody th{font-family:var(--f-display);font-weight:400;font-size:var(--t-1);line-height:1.15;color:var(--ink);width:22%}
.hr-cmp tbody th a{color:var(--ink);text-decoration-color:var(--brass);text-underline-offset:3px}
.hr-cmp tbody th a:hover{color:var(--brass)}
.hr-cmp th small{display:block;margin-top:6px;font-family:var(--f-text);font-size:14px;color:var(--brass)}
.hr-cmp td{color:var(--ink-soft)}
.hr-cmp td:last-child{white-space:nowrap;font-weight:600;color:var(--ink)}
.hr-cmp tr.is-here th,.hr-cmp tr.is-here td{background:var(--porcelain)}
.hr-cmp tr.is-here th{box-shadow:inset 3px 0 0 var(--brass);padding-left:16px}
@media(max-width:759.98px){
  .hr-cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .hr-cmp,.hr-cmp tbody,.hr-cmp tr,.hr-cmp th,.hr-cmp td{display:block;width:auto}
  .hr-cmp tr{padding:18px 0;border-top:1px solid var(--hair)}
  .hr-cmp tr:last-child{border-bottom:1px solid var(--hair)}
  .hr-cmp tbody th,.hr-cmp td{padding:0;border:0}
  .hr-cmp tbody th{margin-bottom:10px}
  .hr-cmp td{display:grid;grid-template-columns:8.5em 1fr;gap:12px;padding:5px 0}
  .hr-cmp td::before{content:attr(data-k);font-size:14px;color:var(--nickel)}
  .hr-cmp td:last-child{white-space:normal}
  .hr-cmp tr.is-here{padding-inline:16px;background:var(--porcelain);box-shadow:inset 3px 0 0 var(--brass)}
  .hr-cmp tr.is-here th{box-shadow:none;padding-left:0}
}

/* ==========================================================================
   Service page: Hair color (/hair-color-alpharetta/, wp/build-hair-color-page.php).
   Reuses the service-page layer (.ms-svc-hero, .ms-ticket, .ms-steps,
   .ms-styles, .ms-sibs, .ms-rev, .faq, .ms-form). New here: the Strand Board,
   the page's one bold object - five hair locks hanging from a brass rail like
   a colorist's swatch ring, each painted in CSS to show where the color sits
   from root to end - plus the highlights-vs-balayage table and a ticket that
   carries "priced for your hair" instead of a number (no color price is
   verified). The hair shades are content, not brand colours, so they live as
   local custom properties on .hc-board and nowhere else.
   ========================================================================== */

/* hero: the H1 is longer than the barber pages', so give it a wider measure */
.ms-page.hc-hero h1.elementor-heading-title{max-width:15ch}
.ms-ticket .hc-tk p.hc-tk-big{font-family:var(--f-display);font-size:clamp(44px,5vw,58px);line-height:.94;
  margin-top:12px;max-width:8ch}
.ms-ticket .hc-tk p.tk-inc{margin-bottom:20px}

/* ---- the Strand Board ---- */
.ms-page div.hc-board-w{max-width:none;margin-top:clamp(30px,4vw,52px)}
.hc-board{
  --h-root:#3B2A20; --h-lift:#D7B07A; --h-lift2:#BE9460; --h-new:#7E3B22; --h-gray:#CFCBC4;
  --lh:clamp(220px,34vw,340px);
  display:grid;gap:clamp(30px,4vw,48px)}
@media(min-width:900px){.hc-board{grid-template-columns:1.1fr 1fr;gap:clamp(40px,5vw,80px);align-items:start}}

.hc-ring{position:relative;padding-left:40px}
.hc-axis{position:absolute;left:0;top:26px;height:var(--lh);margin:0;display:flex;flex-direction:column;
  justify-content:space-between;font-size:13px;line-height:1;color:var(--nickel);border-left:1px solid var(--hair);padding-left:8px}
.hc-locks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);
  gap:clamp(6px,1.6vw,20px);border-top:6px solid var(--brass);border-radius:3px}
.hc-locks li{min-width:0}
.hc-lock{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--ink);
  transform-origin:50% 0;border-radius:3px}
/* the crimp that holds each lock on the ring */
.hc-lock::before{content:"";width:64%;height:16px;border-radius:0 0 3px 3px;
  background:linear-gradient(180deg,var(--brass-lt),var(--brass))}
.hc-hair{display:block;width:78%;height:var(--lh);margin-top:-2px;
  clip-path:polygon(4% 0,96% 0,92% 70%,78% 96%,64% 100%,36% 100%,22% 96%,8% 70%);
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px 4px,rgba(0,0,0,.09) 4px 5px,transparent 5px 7px),
    linear-gradient(90deg,transparent 18%,rgba(255,255,255,.16) 36%,transparent 52%),
    var(--paint);
  transition:transform .35s cubic-bezier(.2,.75,.25,1),filter .2s ease}
.hc-name{margin-top:12px;font-weight:600;font-size:clamp(13px,1.5vw,16px);line-height:1.2;text-align:center;
  padding-bottom:4px;border-bottom:2px solid transparent}

/* where the color sits, lock by lock */
.hc-lock--full-color .hc-hair{--paint:linear-gradient(180deg,#6E321D 0,#80391F 45%,#93472A 100%)}
.hc-lock--highlights .hc-hair{--paint:
  linear-gradient(180deg,var(--h-root) 0 4%,transparent 4%),
  repeating-linear-gradient(90deg,transparent 0 7px,var(--h-lift) 7px 10px,transparent 10px 14px,var(--h-lift2) 14px 16px),
  linear-gradient(180deg,var(--h-root),#4A3526)}
.hc-lock--balayage .hc-hair{--paint:
  linear-gradient(180deg,var(--h-root) 0 16%,rgba(59,42,32,.85) 30%,rgba(59,42,32,0) 68%),
  repeating-linear-gradient(90deg,var(--h-lift) 0 6px,var(--h-lift2) 6px 10px,transparent 10px 16px,#E2C08E 16px 19px,transparent 19px 26px),
  linear-gradient(180deg,var(--h-root) 0,#6A4A31 55%,#B98B55 100%)}
/* root touch-up: fresh color on the new growth only, above a dashed line */
.hc-lock--root-touch-up .hc-hair{position:relative;--paint:
  linear-gradient(180deg,var(--h-new) 0 17%,transparent 17%),
  linear-gradient(180deg,#95502F 17%,#A65C37 100%)}
.hc-lock--root-touch-up .hc-hair::after{content:"";position:absolute;left:0;right:0;top:17%;
  border-top:1.5px dashed rgba(246,244,240,.85)}
/* gray coverage: salt and pepper on the left half, covered on the right */
.hc-lock--gray-coverage .hc-hair{--paint:
  linear-gradient(90deg,transparent 0 49%,rgba(246,244,240,.7) 49% 50.5%,#5E3A26 50.5%),
  repeating-linear-gradient(90deg,transparent 0 4px,var(--h-gray) 4px 6px,transparent 6px 9px,#A9A49C 9px 10px),
  linear-gradient(180deg,#4C3526,#5E3A26)}

/* picking a lock (JS tabs); without JS every lock is a jump link */
.hc-lock:hover .hc-hair{transform:translateY(4px)}
.hc-lock:focus-visible{outline:3px solid var(--crimson);outline-offset:4px}
.hc-board.is-live .hc-lock[aria-current="true"] .hc-hair{transform:translateY(10px)}
.hc-board.is-live .hc-lock[aria-current="true"] .hc-name{color:var(--brass);border-bottom-color:var(--brass);margin-top:22px}
.hc-board.is-live .hc-lock[aria-current="false"] .hc-hair{filter:saturate(.8) brightness(.94)}

/* the one motion: the locks drop onto the ring the first time it is seen */
.hc-board.is-armed .hc-lock{opacity:0}
.hc-board.is-in .hc-lock{animation:hc-drop .75s cubic-bezier(.2,.8,.25,1) calc(var(--i) * 80ms) both}
@keyframes hc-drop{from{opacity:0;transform:translateY(-22px) rotate(-5deg)}60%{transform:translateY(3px) rotate(1.5deg)}}
@media(prefers-reduced-motion:reduce){
  .hc-board.is-armed .hc-lock{opacity:1}
  .hc-board.is-in .hc-lock{animation:none}
  .hc-hair{transition:none}
}

/* the panels: stacked without JS, one at a time with it */
.hc-panel{border-top:1.5px solid var(--ink);padding-top:22px}
.hc-panel+.hc-panel{margin-top:36px}
.hc-board.is-live .hc-panel+.hc-panel{margin-top:0}
.hc-panel[id]{scroll-margin-top:110px}
.hc-panel h3{font-size:var(--t-4);margin:0}
.hc-panel p.hc-where{margin:12px 0 0;font-size:var(--t-1);line-height:1.45;color:var(--ink-soft);max-width:34ch}
.hc-panel dl{margin:22px 0 0;display:grid;grid-template-columns:minmax(96px,auto) 1fr;border-top:1px solid var(--hair)}
.hc-panel dt,.hc-panel dd{margin:0;padding:12px 0;border-bottom:1px solid var(--hair);font-size:16px;line-height:1.5}
.hc-panel dt{font-weight:600;padding-right:16px}
.hc-panel dd{color:var(--nickel)}
.hc-up{display:inline-flex;gap:3px;margin-right:10px;vertical-align:.1em}
.hc-up i{width:16px;height:6px;border-radius:1px;background:var(--hair)}
.hc-up[data-l="1"] i:nth-child(-n+1),.hc-up[data-l="2"] i:nth-child(-n+2),.hc-up[data-l="3"] i{background:var(--brass)}
.hc-panel p.hc-ask{margin:18px 0 0;font-weight:600}
@media(max-width:559px){
  .hc-ring{padding-left:0}
  .hc-axis{display:none}
  .hc-name{font-size:12.5px}
}

/* ---- highlights vs balayage ---- */
.ms-page div.hc-vs-w{max-width:none}
.hc-vs{width:100%;border-collapse:collapse;font-size:16px;line-height:1.45}
.hc-vs thead th{font-family:var(--f-display);font-weight:400;font-size:var(--t-2);line-height:1;text-align:left;
  padding:0 12px 14px 0;border-bottom:1.5px solid var(--ink)}
.hc-vs tbody th{font-weight:600;text-align:left;width:32%;color:var(--ink)}
.hc-vs tbody th,.hc-vs tbody td{padding:14px 12px 14px 0;border-bottom:1px solid var(--hair);vertical-align:top}
.hc-vs tbody td{color:var(--ink-soft)}
@media(max-width:559px){.hc-vs{font-size:14.5px}.hc-vs tbody th{width:30%}}

/* ---- photos: the copper before/after is nearly square, keep both halves ---- */
.ms-page .hc-styles li:first-child figure img{object-position:50% 50%}

/* ---- consultation form column ---- */
.ms-page.hc-consult .ms-lede p+p{margin-top:14px}

/* ---- salon siblings are unpriced links, so no dot leader ---- */
.ms-sibs.hc-sibs li::after{display:none}

/* ==========================================================================
   Service page: Women's haircut (/womens-haircut-alpharetta/). Reuses the
   men's haircut layer (.ms-svc-* hero + .ms-ticket, .ms-styles, .ms-sibs,
   .ms-rev, .faq, .ms-close). New here, prefixed .wf-:
   - the finish selector: two radio cards (Haircut $35 / Cut & blowout $50)
     and a panel whose four stops light up for what that visit includes. The
     stops sit on a strand of hair that is curly while there is no blow-dry
     and pulled straight when there is. It is the page's one bold object and
     its one motion, and only moves when someone picks a card.
     State comes from :has() on the checked radio, or from the .is-cut /
     .is-blow class app.js mirrors (womensFinish) for browsers without :has.
     The two are separate rules on purpose: an unsupported :has() in a
     selector list would void the whole rule. With neither, the panel shows
     Cut & blowout, which is the card checked in the markup.
   ========================================================================== */
.ms-page .wf-photo img{object-position:50% 22%}

.ms-page div.wf-w{max-width:none;margin-top:clamp(28px,4vw,48px)}
.wf{--off:1;--curl:0;--flat:1;display:grid;gap:clamp(18px,3vw,36px)}
.wf.is-cut{--off:.36;--curl:1;--flat:0}
.wf:has(.wf-in[value="cut"]:checked){--off:.36;--curl:1;--flat:0}
.wf.is-blow{--off:1;--curl:0;--flat:1}

/* the two cards: real radios, visually replaced by the card */
.wf-opts{margin:0;padding:0;border:0;min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start}
.wf-opts legend.wf-q{grid-column:1/-1;float:left;width:100%;padding:0;margin:0 0 12px;font-size:15.5px;color:var(--nickel)}
.wf-opt{position:relative;display:block;cursor:pointer}
.wf-opt input.wf-in{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.wf-card{display:flex;flex-direction:column;height:100%;padding:18px 18px 20px;background:var(--talc);
  border:1px solid var(--hair);border-radius:2px;color:var(--ink-soft);
  transition:background .2s ease,border-color .2s ease,color .2s ease}
.wf-name{font-family:var(--f-display);font-size:var(--t-1);line-height:1.05;color:var(--ink)}
.wf-price{font-family:var(--f-display);font-size:clamp(48px,7vw,72px);line-height:.9;margin-top:10px;
  color:var(--ink);font-variant-numeric:lining-nums}
.wf-price span{font-size:.42em;vertical-align:.9em;margin-right:3px;color:var(--brass)}
.wf-line{margin-top:12px;font-size:15px;line-height:1.45;color:var(--nickel)}
.wf-opt:hover .wf-card{border-color:#BDB4A6}
.wf-in:checked+.wf-card{background:var(--ink);border-color:var(--ink);color:#C9C4BB}
.wf-in:checked+.wf-card .wf-name,.wf-in:checked+.wf-card .wf-price{color:var(--porcelain)}
.wf-in:checked+.wf-card .wf-price span{color:var(--brass-lt)}
.wf-in:checked+.wf-card .wf-line{color:#A9A9B2}
.wf-in:focus-visible+.wf-card{outline:3px solid var(--crimson);outline-offset:3px}

/* the panel */
.wf-out{position:relative;padding:clamp(22px,4vw,40px);background:var(--talc);border:1px solid var(--hair);border-radius:2px}
.wf-out p{margin:0}
.wf-out p.wf-total{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:18px;border-bottom:1px solid var(--hair);font-family:var(--f-display);font-size:var(--t-2);line-height:1.05}
.wf-total b{font-weight:400;font-size:clamp(72px,10vw,112px);line-height:.82;font-variant-numeric:lining-nums}
.wf-total .wf-cur{font-size:.4em;vertical-align:.95em;margin-right:4px;color:var(--brass)}

/* what each state shows */
.wf .wf-for-cut{display:none}
.wf.is-cut .wf-for-cut{display:inline}
.wf.is-cut .wf-for-blow{display:none}
.wf:has(.wf-in[value="cut"]:checked) .wf-for-cut{display:inline}
.wf:has(.wf-in[value="cut"]:checked) .wf-for-blow{display:none}
.wf.is-blow .wf-for-cut{display:none}
.wf.is-blow .wf-for-blow{display:inline}

/* the strand and its stops: vertical on phones, across the panel from 700px */
.wf-track{position:relative;margin-top:26px}
.wf-strand{position:absolute;overflow:visible;pointer-events:none}
.wf-strand path{fill:none;vector-effect:non-scaling-stroke;transform-box:fill-box}
.wf-strand .wf-curl{stroke:#B9B0A2;stroke-width:2.5;stroke-linecap:round;opacity:var(--curl);transition:opacity .5s ease}
.wf-strand .wf-flat{stroke:var(--brass);stroke-width:3.5;stroke-linecap:round;
  transition:transform .8s cubic-bezier(.3,.7,.2,1)}
.wf-strand-h{display:none}
.wf-strand-v{left:0;top:10px;bottom:10px;width:30px;height:calc(100% - 20px)}
.wf-strand-v .wf-flat{transform-origin:50% 0;transform:scaleY(var(--flat))}
.wf-strand-h .wf-flat{transform-origin:0 50%;transform:scaleX(var(--flat))}

.wf-stops{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:22px}
.wf-stop{position:relative;padding-left:52px;transition:opacity .35s ease}
.wf-stop::before{content:"";position:absolute;left:5px;top:3px;width:20px;height:20px;border-radius:50%;
  background:var(--ink);box-shadow:0 0 0 4px var(--talc);transition:background .3s ease,box-shadow .3s ease}
.wf-stop h3{font-size:var(--t-1);line-height:1.1;margin:0 0 6px}
.wf-stop p{margin:0;font-size:15.5px;line-height:1.5;color:var(--nickel);max-width:34ch}
/* wash and blow-dry drop out for a cut on its own */
.wf-stop.wf-s-wash,.wf-stop.wf-s-dry{opacity:var(--off)}
.wf.is-cut .wf-s-wash::before,.wf.is-cut .wf-s-dry::before{background:var(--talc);box-shadow:inset 0 0 0 2px #B9B0A2,0 0 0 4px var(--talc)}
.wf:has(.wf-in[value="cut"]:checked) .wf-s-wash::before,
.wf:has(.wf-in[value="cut"]:checked) .wf-s-dry::before{background:var(--talc);box-shadow:inset 0 0 0 2px #B9B0A2,0 0 0 4px var(--talc)}

.wf-out p.wf-note{margin-top:24px;font-size:16px;line-height:1.5;color:var(--ink-soft)}
.wf-out p.wf-go{margin:22px calc(-1 * clamp(22px,4vw,40px)) calc(-1 * clamp(22px,4vw,40px));border-top:1.5px dashed #CFC8BC}
.wf-go a{display:flex;align-items:center;justify-content:space-between;padding:20px clamp(22px,4vw,40px);
  font-weight:600;font-size:17px;color:var(--ink);text-decoration:none;transition:color .16s ease,background .16s ease}
.wf .wf-go a.wf-for-cut{display:none}
.wf.is-cut .wf-go a.wf-for-cut{display:flex}
.wf:has(.wf-in[value="cut"]:checked) .wf-go a.wf-for-cut{display:flex}
.wf.is-blow .wf-go a.wf-for-cut{display:none}
.wf.is-blow .wf-go a.wf-for-blow{display:flex}
.wf-go a::after{content:"";width:9px;height:9px;border-top:1.75px solid currentColor;border-right:1.75px solid currentColor;
  transform:rotate(45deg);margin-right:4px}
.wf-go a:hover,.wf-go a:focus-visible{color:var(--ink);background:var(--brass-lt)}
.wf-out p.wf-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

@media(min-width:700px){
  .wf-strand-v{display:none}
  .wf-strand-h{display:block;left:10px;right:10px;top:0;width:calc(100% - 20px);height:26px}
  .wf-stops{grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,26px)}
  .wf-stop{padding:48px 0 0}
  .wf-stop::before{left:0;top:3px}
}
@media(min-width:1000px){
  .wf{grid-template-columns:minmax(260px,4fr) 8fr;align-items:start}
  .wf-opts{grid-template-columns:1fr}
  .wf-card{padding:24px 26px 26px}
}
@media(prefers-reduced-motion:reduce){
  .wf-strand path,.wf-stop,.wf-stop::before,.wf-card{transition:none}
}

/* the cut: icon boxes as in the hot towel "worth it" section */
.ms-page .wf-how h2.elementor-heading-title{max-width:14ch}

/* blowout: text left, the salon chairs right, and the Brazilian Blowout note */
.ms-page div.wf-aside{max-width:52ch;margin-top:22px;padding:16px 20px;border-left:3px solid var(--brass);
  background:var(--porcelain);font-size:16px;line-height:1.55;color:var(--ink-soft)}
.ms-page div.wf-aside b{color:var(--ink)}
.ms-page .wf-blowout .elementor-widget-wrap>.wf-aside+.ms-btn{margin-top:26px}
.ms-page .wf-salon-photo img{aspect-ratio:4/5;object-position:50% 50%}
.ms-page div.wf-cap{margin-top:10px;font-size:14.5px;color:var(--nickel)}
@media(min-width:900px){
  .elementor-section.ms-row.wf-blow-row>.elementor-container{align-items:center}
}

/* the stylist */
.ms-page .wf-stylist-mark{width:min(240px,64vw);height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%;
  box-shadow:0 0 0 6px var(--porcelain),0 0 0 7px var(--hair)}
.ms-page p.wf-who-q{margin-top:18px;padding-left:18px;border-left:3px solid var(--brass);font-style:italic;color:var(--ink)}
.wf-who-q span{display:block;margin-top:6px;font-style:normal;font-size:14.5px;color:var(--nickel)}
.ms-page .wf-who .elementor-widget-wrap>.ms-btn{margin-top:22px}
.ms-page p.wf-team{margin-top:14px;font-weight:600}
@media(min-width:900px){
  .elementor-section.ms-row.wf-who-row>.elementor-container{align-items:center}
}

/* ==========================================================================
   Hub page: Hair salon (/hair-salon-alpharetta/). Reuses the Barber hub layer
   (ms-hub-hero + tk-menu ticket, ms-cards-svc, ms-sibs, ms-know, ms-rev,
   ms-hub-find, ms-hub-faq-side). New here, prefixed .hs-:
   - three service cards to a row (cuts, color, facial);
   - the straightness scale: the page's one bold object. One lock of hair runs
     from curly (left) to dead straight (right) and the four smoothing
     treatments are pinned on it where their result sits, each label under its
     pin. Its one motion: the lock is revealed left to right and the pins drop
     on, once, when it scrolls into view (app.js hsScale: .is-live, then .is-in).
     Below 700px the labels stack in scale order;
   - the stylist portrait.
   ========================================================================== */
.ms-page .hs-photo img{object-position:50% 35%}

/* cards: three to a row on wide screens; hair color's tag is words, not a price */
@media(min-width:1040px){.ms-cards-svc.hs-cards{grid-template-columns:repeat(3,1fr)}}
.ms-card-tag.hs-tag-ask{font-family:var(--f-text);font-weight:600;font-size:14.5px;letter-spacing:0;padding:8px 12px 7px 14px}

/* the scale */
.ms-page div.hs-scale-w{max-width:none;margin-top:clamp(30px,4.5vw,56px)}
.hs{--g:clamp(14px,2.2vw,30px);--bg:var(--talc)}
.hs p.hs-ends{display:flex;justify-content:space-between;gap:16px;margin:0 0 8px;font-size:15px;line-height:1.3;color:var(--nickel)}
.hs-ends span:last-child{text-align:right}
.hs-bar{position:relative;height:clamp(84px,10vw,120px)}
.hs-lock{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hs-lock path{fill:none;stroke-width:2.2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.hs-lock .hs-h0{stroke:var(--ink-soft)}
.hs-lock .hs-h1{stroke:var(--brass)}
.hs-lock .hs-h2{stroke:var(--nickel)}
/* a pin sits on the lock; a hairline drops from it to its label */
.hs-pin{position:absolute;top:50%;left:calc(var(--i) * 25% + 12.5%);width:20px;height:20px;border-radius:50%;
  background:var(--bg);border:4px solid var(--ink);box-shadow:0 0 0 4px var(--bg);transform:translate(-50%,-50%)}
.hs-stops{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:22px}
.hs-stops li{position:relative;padding-left:34px}
.hs-stops li::before{content:"";position:absolute;left:4px;top:.45em;width:12px;height:12px;border-radius:50%;border:3px solid var(--ink);background:var(--bg)}
.hs-stops h3{font-size:var(--t-2);line-height:1.05;margin:0 0 8px}
.hs-stops h3 a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--brass);text-decoration-thickness:2px;text-underline-offset:.16em}
.hs-stops h3 a:hover,.hs-stops h3 a:focus-visible{color:var(--brass)}
.hs-stops p{margin:0;font-size:16px;line-height:1.55;color:var(--nickel);max-width:32ch}
.hs-stops p.hs-from{margin-top:10px;font-family:var(--f-display);font-size:var(--t-2);line-height:1;color:var(--ink)}
@media(min-width:700px){
  /* pins line up with the left edge of their label column */
  .hs-pin{left:calc(var(--i) * ((100% - 3 * var(--g)) / 4 + var(--g)) + 10px)}
  .hs-pin::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:calc(clamp(84px,10vw,120px) / 2 + 12px);
    margin-left:-.5px;background:var(--ink);opacity:.35}
  .hs-stops{grid-template-columns:repeat(4,1fr);column-gap:var(--g)}
  .hs-stops li{padding:0}
  .hs-stops li::before{display:none}
}
/* the one motion */
.hs.is-live .hs-lock{clip-path:inset(0 100% 0 0)}
.hs.is-live .hs-pin{opacity:0;transform:translate(-50%,-140%)}
.hs.is-live.is-in .hs-lock{clip-path:inset(0 0 0 0);transition:clip-path 1.4s cubic-bezier(.45,.05,.3,1)}
.hs.is-live.is-in .hs-pin{opacity:1;transform:translate(-50%,-50%);
  transition:opacity .3s ease calc(1.1s + var(--i) * .14s),transform .45s cubic-bezier(.3,1.4,.5,1) calc(1.1s + var(--i) * .14s)}
@media(prefers-reduced-motion:reduce){
  .hs.is-live .hs-lock,.hs.is-live.is-in .hs-lock{clip-path:none;transition:none}
  .hs.is-live .hs-pin,.hs.is-live.is-in .hs-pin{opacity:1;transform:translate(-50%,-50%);transition:none}
}
.ms-page .hs-scale-sec .elementor-widget-wrap>.hs-scale-w+.ms-btn{margin-top:clamp(34px,4vw,48px)}

/* the stylist */
.ms-page div.hs-stylist-w{max-width:none}
.hs-stylist{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.ms-page .hs-stylist img{width:clamp(128px,16vw,180px);height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%;
  box-shadow:0 0 0 1px var(--hair),0 0 0 8px var(--talc),0 0 0 9px var(--hair)}
.hs-stylist p.hs-who{margin:0}
.hs-who b{display:block;font-family:var(--f-display);font-weight:400;font-size:var(--t-3);line-height:1}
.hs-who{font-size:15.5px;color:var(--nickel)}

/* ==========================================================================
   Services overview (/services/). Reuses the hub layer (ms-hub-hero + tk-menu
   ticket, ms-rev, ms-faq, ms-close). New here:
   - .sv-*: the menu board. One block per category: a photo, a line and the
     hub link on the side; the services as rows, name and price joined by a
     dotted leader like the board by the door. Every row links to its page.
   ========================================================================== */
.ms-page .sv-photo img{object-position:50% 50%}

/* the menu board */
.ms-page div.sv-board-w{max-width:none;margin-top:clamp(22px,3vw,36px)}
.sv-cat{display:grid;gap:clamp(22px,3vw,48px)}
@media(min-width:900px){.sv-cat{grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:start}}
.sv-cat-img{display:block;overflow:hidden;border-radius:2px;background:var(--hair)}
.ms-page .sv-cat-img img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.sv-cat p{margin:0}
.sv-cat p.sv-cat-line{margin-top:14px;font-size:16.5px;line-height:1.55;color:var(--nickel);max-width:40ch}
.sv-cat p.sv-cat-hub{margin-top:18px}
.sv-cat-hub a.btn-solid{color:var(--porcelain)}
.sv-cat-hub a.btn-solid:hover{color:var(--porcelain)}
@media(max-width:899px){.sv-cat-side{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:16px;align-items:start}
  .sv-cat-side .sv-cat-img{grid-row:span 2}.sv-cat p.sv-cat-line{margin-top:0}}
.sv-menu{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.sv-menu li{border-bottom:1px solid var(--hair)}
.sv-item{display:block;padding:15px 0 14px;color:var(--ink);text-decoration:none}
a.sv-item:focus-visible{outline:3px solid var(--crimson);outline-offset:2px}
.sv-row{display:flex;align-items:baseline;gap:10px}
.sv-name{font-family:var(--f-display);font-size:var(--t-1);line-height:1.15}
.sv-dots{flex:1 1 auto;min-width:18px;border-bottom:2px dotted #C9C2B6;transform:translateY(-5px)}
.sv-price{flex:none;font-family:var(--f-display);font-size:var(--t-1);line-height:1.15;font-variant-numeric:lining-nums}
.sv-line{display:block;margin-top:3px;font-size:15.5px;line-height:1.45;color:var(--nickel)}
a.sv-item:hover .sv-name,a.sv-item:focus-visible .sv-name{color:var(--brass);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.16em}
.sec-talc .sv-dots{border-color:#D6CFC3}

/* ---- Homepage hero: award plate (sits between the hero text and the booking bar) ----
   A white shop-sign plate with a barber-pole spine on the left edge. Text only, our own
   artwork, links to the award listing. The hero grows to hold it (min-height below),
   and the bottom padding is just enough to clear the booking bar that overlaps the hero. */
.hero .hero-media{min-height:clamp(500px,68vh,660px)}
.hero .hero-copy{padding-bottom:clamp(50px,calc(5vw + 16px),62px)}
.hero .hero-award{
  display:inline-flex;align-items:center;gap:14px;margin-top:14px;max-width:100%;
  padding:9px 16px 9px 0;overflow:hidden;
  background:#fff;border-radius:6px;
  color:var(--ink);text-decoration:none;
  box-shadow:0 8px 26px rgba(0,0,0,.3);
  transition:background-color .2s}
.hero .hero-award:hover{color:var(--ink);background:var(--porcelain)}
.hero .hero-award:focus-visible{outline:3px solid #fff;outline-offset:3px}
.hero-award::before{content:"";align-self:stretch;flex:0 0 7px;margin:-9px 0;
  background:repeating-linear-gradient(-45deg,var(--pole-red) 0 6px,#fff 6px 12px,var(--pole-blue) 12px 18px)}
.ha-medal{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:50%;
  border:1.5px solid var(--ink);color:var(--ink);
  box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 4px var(--hair)}
.ha-medal i{font-size:18px;line-height:1}
.ha-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.ha-txt b{font-weight:600;font-size:clamp(16px,2vw,18px);line-height:1.25;text-wrap:balance}
.ha-txt span{font-size:14px;line-height:1.3;color:var(--nickel)}
.ha-ext{flex:0 0 auto;font-size:12px;color:var(--nickel);align-self:flex-start;margin-top:4px}
/* Phones: the headline goes back up into the clear top of the photo so it stops covering
   the people in the chairs. Sub-line and badge stay together at the bottom. */
@media(max-width:600px){
  .hero .hero-media{min-height:560px}
  .hero .hero-copy{top:0;padding-top:22px}
  .hero .hero-copy .shell{display:flex;flex-direction:column;height:100%}
  .hero .hero-say{margin-top:auto}
  .hero .hero-award{gap:12px;align-self:flex-start}
}

/* Reviews on the ink sections: each card is a Text Editor widget carrying .rev.
   Pin it to a single column (head row, quote, byline at the foot) so nothing
   sits beside the quote, and line the score row up on one centre line. */
.ms-rev .elementor-widget.rev{display:flex;flex-direction:column;align-items:stretch;gap:14px;padding:26px;width:100%;max-width:none;box-sizing:border-box}
.ms-rev .rev>*{min-width:0;max-width:100%}
.ms-rev .rev .rev-head{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%}
.ms-rev .rev .rev-head p.rev-stars{margin:0}
.ms-rev .rev p.rev-who{margin-top:auto;padding-top:6px}
.ms-rev .rev p.rev-who b{margin-bottom:2px}
.ms-rev p.rev-score{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:22px}
.ms-rev p.rev-score .rev-stars{margin:0;line-height:1}
.ms-rev p.rev-score b{line-height:1}
.ms-rev p.rev-score .rev-g-lg{margin:0}

/* Services hero facts, mobile only: icon on each fact, two across then one
   full-width row. From 560px the plain three-column strip applies as before. */
:is(.sv-hero,.bs-hero,.mh-hero,.hs-hero) .ms-svc-facts .sv-ico{display:none}
@media(max-width:559.98px){
  :is(.sv-hero,.bs-hero,.mh-hero,.hs-hero) .ms-svc-facts{grid-template-columns:1fr 1fr;border-bottom:1px solid var(--hair-dk)}
  :is(.sv-hero,.bs-hero,.mh-hero,.hs-hero) .ms-svc-facts li{padding:14px 12px 14px 0;font-size:14.5px}
  :is(.sv-hero,.bs-hero,.mh-hero,.hs-hero) .ms-svc-facts li:nth-child(2){padding-left:14px;border-left:1px solid var(--hair-dk)}
  :is(.sv-hero,.bs-hero,.mh-hero,.hs-hero) .ms-svc-facts li:nth-child(3){grid-column:1/-1;border-top:1px solid var(--hair-dk);border-bottom:0;padding-right:0}
  :is(.sv-hero,.bs-hero,.mh-hero,.hs-hero) .ms-svc-facts li:nth-child(1){border-bottom:0}
  :is(.sv-hero,.bs-hero,.mh-hero,.hs-hero) .ms-svc-facts li:nth-child(2){border-bottom:0}
  :is(.sv-hero,.bs-hero,.mh-hero,.hs-hero) .ms-svc-facts b{display:flex;align-items:center;gap:9px;font-size:16px}
  :is(.sv-hero,.bs-hero,.mh-hero,.hs-hero) .ms-svc-facts .sv-ico{display:inline-block;width:1.1em;text-align:center;color:var(--brass-lt);font-size:15px}
}

/* Services menus, mobile: a smaller hub button sitting right under the intro
   line, so the photo/text/button block is compact in all three sections. */
@media(max-width:899.98px){
  .sv-cat-side{row-gap:8px;align-content:start}
  .sv-cat p.sv-cat-hub{margin-top:0;align-self:start}
  .sv-cat-hub a.btn{padding:8px 14px;font-size:14px;line-height:1.2}
}

/* Barber shop hub hero: H1 smaller and held to two lines
   ("Barber shop in / Alpharetta, GA"). */
.ms-page.bs-hero h1.elementor-heading-title{font-size:clamp(36px,6.2vw,54px);line-height:1.02;max-width:16ch}

/* Team row, mobile: two even columns, each portrait and name centred in its
   half, equal side gutters, and an odd last person centred across both. */
@media(max-width:699.98px){
  .ms-team-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 12px;padding-inline:10px}
  .ms-team-row li{align-items:center;text-align:center}
  .ms-team-row li:last-child:nth-child(odd){grid-column:1/-1}
}

/* Men's haircut hero, desktop: the trail and headline start level with the top
   of the photo, and the price ticket becomes a small card set in the open
   space between the headline and the photo (it overlaps the photo's edge a
   little). Below 1200px the original ticket over the photo's corner applies. */
@media(min-width:1200px){
  .ms-page.mh-hero .ms-svc-top>.elementor-container{align-items:flex-start}
  .ms-page.mh-hero{--tw:clamp(180px,13.5vw,232px)}
  /* The card owns the right-hand strip of the text column (its width plus a
     gap either side), so the headline and intro are held clear of it at
     every desktop width instead of relying on where they happen to wrap. */
  .ms-page.mh-hero h1.elementor-heading-title{font-size:clamp(38px,4.3vw,62px);max-width:calc(100% - var(--tw) - 56px)}
  .ms-page.mh-hero div.ms-svc-lede{max-width:min(44ch,calc(100% - var(--tw) - 56px))}
  .ms-page.mh-hero div.ms-ticket{position:absolute;top:60px;left:calc(-28px - var(--tw));margin:0;width:var(--tw);
    transform:rotate(-3deg);transform-origin:50% 50%;filter:drop-shadow(0 16px 22px rgba(0,0,0,.5))}
  .ms-page.mh-hero .ms-ticket .tk{--tear:44px;padding:16px 18px 0}
  .ms-page.mh-hero .ms-ticket .tk::before{inset:6px 6px calc(var(--tear) + 6px)}
  .ms-page.mh-hero .ms-ticket p.tk-name{font-size:17px}
  .ms-page.mh-hero .ms-ticket p.tk-price{font-size:60px;margin-top:6px}
  .ms-page.mh-hero .ms-ticket p.tk-inc{margin-top:8px;font-size:14px}
  .ms-page.mh-hero .ms-ticket p.tk-sub{margin-top:8px;padding:8px 0 14px;font-size:13px}
  .ms-page.mh-hero .ms-ticket p.tk-go{margin-inline:-18px}
  .ms-page.mh-hero .ms-ticket .tk-go a{padding:0 18px;font-size:14.5px}
}

/* Gray-dial CTA (men's hair color): the "Not sure which?" note sits on the
   button's row, centred on it. On phones the button is full width, so the
   note drops below it as before. */
@media(min-width:700px){
  .ms-page .ms-dial-sec>.elementor-container>.elementor-column>.elementor-widget-wrap{align-items:center}
  .ms-page .ms-dial-sec div.ms-dial-note{width:auto;flex:1 1 280px;max-width:44ch;margin-top:30px}
  .ms-page .ms-dial-sec div.ms-dial-note p{margin:0}
}
@media(min-width:700px){
  .ms-page .ms-dial-sec .elementor-widget-wrap{align-items:center}
  .ms-page .ms-dial-sec .elementor-widget-wrap>div.ms-dial-note{align-self:center}
}

/* Gray-dial CTA: button and note in one flex row, the note centred on the
   button. Stacks (button, then note) on phones. */
.ms-page div.ms-dial-cta{max-width:none;margin-top:clamp(28px,4vw,40px)}
.ms-dial-cta .dial-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.ms-dial-cta .dial-cta .btn{flex:none}
.ms-dial-cta .dial-cta p{margin:0;font-size:15.5px;line-height:1.4;color:var(--nickel);max-width:44ch}
@media(max-width:699.98px){.ms-dial-cta .dial-cta .btn{width:100%}}

/* "See every ... in the gallery" links under the style boards (beard trim,
   shave & beard, hot towel shave, women's haircut) are buttons, not text. */
.ms-styles-w p.ms-color-more a{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--f-text);font-weight:600;font-size:16px;line-height:1.2;padding:13px 24px;
  background:var(--ink);color:var(--porcelain);border:1.5px solid var(--ink);border-radius:2px;
  text-decoration:none;transition:background .16s ease,color .16s ease,border-color .16s ease}
.ms-styles-w p.ms-color-more a:hover,.ms-styles-w p.ms-color-more a:focus-visible{background:var(--brass);border-color:var(--brass);color:var(--porcelain)}
@media(max-width:559.98px){.ms-styles-w p.ms-color-more a{display:flex;width:100%;white-space:normal;text-align:center}}

/* "See every price" / "Every salon service" under the sibling lists: a button
   on every service page. Shares the gallery-link button look above. */
.ms-sibs-w p.ms-sibs-all a{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--f-text);font-weight:600;font-size:16px;line-height:1.2;padding:13px 24px;
  background:var(--ink);color:var(--porcelain);border:1.5px solid var(--ink);border-radius:2px;
  text-decoration:none;transition:background .16s ease,color .16s ease,border-color .16s ease}
.ms-sibs-w p.ms-sibs-all a:hover,.ms-sibs-w p.ms-sibs-all a:focus-visible{background:var(--brass);border-color:var(--brass);color:var(--porcelain)}
@media(max-width:559.98px){.ms-sibs-w p.ms-sibs-all a{display:flex;width:100%;white-space:normal;text-align:center}}

/* "Shave and a haircut?" tile is dark, so its link is a light button. */
.ms-styles li.ms-styles-fade p:last-child a{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--f-text);font-weight:600;font-size:15.5px;line-height:1.2;padding:12px 22px;margin-top:4px;
  background:var(--porcelain);color:var(--ink);border:1.5px solid var(--porcelain);border-radius:2px;
  text-decoration:none;transition:background .16s ease,color .16s ease,border-color .16s ease}
.ms-styles li.ms-styles-fade p:last-child a:hover,.ms-styles li.ms-styles-fade p:last-child a:focus-visible{background:var(--brass-lt);border-color:var(--brass-lt);color:var(--ink)}

/* Hair salon hub hero, desktop: no ticket, so the trail and headline start
   level with the top of the photo. */
@media(min-width:900px){
  .ms-page.hs-hero .ms-svc-top>.elementor-container{align-items:flex-start}
}

/* Hair salon service cards: the "go" line is a button. */
.ms-cards-svc.hs-cards .ms-card-go,.ms-cards-svc.hs-cards p.ms-card-go{margin-top:18px;padding:11px 18px;
  background:var(--ink);color:var(--porcelain);border:1.5px solid var(--ink);border-radius:2px;font-size:15.5px;line-height:1.2;
  transition:background .16s ease,border-color .16s ease,color .16s ease}
.ms-cards-svc.hs-cards p.ms-card-go a{color:inherit;text-decoration:none}
.ms-cards-svc.hs-cards a.ms-card:hover .ms-card-go,.ms-cards-svc.hs-cards .ms-card:hover .ms-card-go{background:var(--brass);border-color:var(--brass);color:var(--porcelain)}

/* Stylist block. Mobile: portrait and name centred. Desktop: the text column
   is centred vertically against the portrait card. */
@media(max-width:899.98px){
  .hs-stylist{align-items:center;text-align:center}
}
@media(min-width:900px){
  .ms-page .hs-stylist-sec .elementor-container{align-items:center}
  .ms-page .hs-stylist-sec .elementor-widget-wrap{align-content:center}
}
.ms-page .hs-stylist{align-items:center;text-align:center;width:fit-content;margin-inline:auto}

/* Hair color hero: the small desktop ticket has no price, just "Priced for
   your hair", so that line is set to fit and the long explainer is left out
   (the intro says it). */
@media(min-width:1200px){
  .ms-page.mh-hero .ms-ticket .hc-tk p.hc-tk-big{font-size:30px;line-height:1;max-width:none;margin-top:8px}
  .ms-page.mh-hero .ms-ticket .hc-tk p.tk-inc{display:none}
  .ms-page.mh-hero .ms-ticket .hc-tk p.tk-go{margin-top:16px}
}

/* "Ask about ..." under each colour panel is a button. */
.hc-panel p.hc-ask a{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--f-text);font-weight:600;font-size:16px;line-height:1.2;padding:13px 24px;
  background:var(--ink);color:var(--porcelain);border:1.5px solid var(--ink);border-radius:2px;
  text-decoration:none;transition:background .16s ease,color .16s ease,border-color .16s ease}
.hc-panel p.hc-ask a:hover,.hc-panel p.hc-ask a:focus-visible{background:var(--brass);border-color:var(--brass);color:var(--porcelain)}

/* Area-page hero (Johns Creek, Roswell), desktop: headline and intro on the
   left, the two buttons stacked on the right and centred on the height of the
   headline plus intro together. Below 900px everything stacks as before. */
@media(min-width:900px){
  .ms-page.ms-hero .elementor-widget-wrap:has(>.ms-hero-say){display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:clamp(32px,5vw,72px);align-content:end}
  .ms-page.ms-hero .elementor-widget-wrap>.elementor-widget-heading{grid-column:1;grid-row:1}
  .ms-page.ms-hero .elementor-widget-wrap>.ms-hero-say{grid-column:1;grid-row:2;margin:0}
  .ms-page.ms-hero .elementor-widget-wrap>.ms-btn{grid-column:2;grid-row:1/3;align-self:center;width:auto;margin:0;justify-self:stretch}
  .ms-page.ms-hero .elementor-widget-wrap>.ms-btn-solid{transform:translateY(calc(-50% - 7px))}
  .ms-page.ms-hero .elementor-widget-wrap>.ms-btn-line{transform:translateY(calc(50% + 7px))}
  .ms-page.ms-hero .elementor-widget-wrap>.ms-btn a.elementor-button{width:100%}
}

/* Direct booking handoff to Fresha. */
.resbar.fresha-handoff{grid-template-columns:minmax(0,1fr);align-items:center}
.fresha-handoff p{margin:6px 0 0}
@media(min-width:768px){.resbar.fresha-handoff{grid-template-columns:minmax(0,1fr) auto}}

/* Booking and trust details stay readable without external icon fonts. */
.site-icon{display:inline-block;width:1em;height:1em;flex-shrink:0;vertical-align:-.125em}
.proof-ic .site-icon{width:22px;height:22px}
.foot-contact .site-icon{color:var(--brass-lt);width:16px;height:16px;margin-top:4px}
.award-support{display:flex;align-items:center;justify-content:center;gap:9px;text-align:center;font-size:14px;line-height:1.5;color:var(--nickel);margin:0 0 28px}
.award-support .site-icon{width:24px;height:24px;color:var(--brass)}
.award-support strong{font-weight:600;color:var(--ink)}
.booking-note{font-size:15px;line-height:1.5;margin:12px 0;color:inherit}

/* Highlight today's hours in Alpharetta, including grouped weekday rows. */
.hours .is-today{color:var(--crimson);font-weight:600;background:rgba(176,0,0,.05)}
.foot-hours .is-today{color:var(--brass-lt);font-weight:600}
.hours-status{font-weight:600;color:var(--ink);margin:0 0 12px}
.hours-live[data-state=open] .hours-status::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#31824a;margin-right:9px}
.hours-live[data-state=soon] .hours-status::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--brass);margin-right:9px}

/* Long service menus remain scrollable on phones. */
@media(max-width:899px){
  .mobile-nav{max-height:calc(100vh - 82px);max-height:calc(100dvh - 82px);overflow-y:auto;overscroll-behavior:contain}
}

/* Current stylist identity, without attributing a former employee's portrait. */
.staff-profile-mark{display:grid;place-items:center;flex:none;width:160px;height:160px;border-radius:50%;background:var(--ink);color:var(--brass-lt);font:400 68px/1 var(--f-display);border:1px solid var(--hair)}
.ms-page .ms-barber .staff-profile-mark--small{width:84px;height:84px;border-radius:2px;font-size:38px}
.ms-page .wf-stylist-mark{display:grid;place-items:center;margin-inline:auto;font-size:84px}
.staff-review-grid.elementor-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:24px}
.staff-review-grid.elementor-container>.elementor-column{width:100%}
@media(max-width:600px){.ms-page .ms-barber .staff-profile-mark--small{width:64px;height:64px;font-size:32px}}