/* =========================================================
   DICTATOR OF STYLE
   A direct translation of the Barb Webflow template's component
   vocabulary — its container, its 1px hairlines, its 2px radii,
   its section-title block, its service-list cells, its facts
   panel, its black appointment band, its review-wrap, its
   story-wrap and its 3-tier footer — recoloured white/black/gold.

   The price list (#services) follows the Clipster treatments
   layout: black band, serif-italic category, two columns of
   leader-line rows that invert to white on hover.
   ========================================================= */

:root{
  --title:#000;
  --body:#333;
  --muted:#7d7d7d;
  --bg:#f9f9f9;
  --paper:#fff;

  --primary:#c2924e;          /* gold — the template's --primary slot */
  --tint:#efe2cb;             /* the pale panel fill (template: #cedad1) */
  --wash:#faf6ef;             /* cell hover */

  --hair:#0000001a;
  --hair-strong:#0000004d;
  --line:#0003;               /* the template's title-line / navbar border */
  --hair-dark:#ffffff33;

  --sans:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --sp:150px;                 /* the template's vertical rhythm token */
  /* Two more rhythm tokens, so the inside of a section is spaced against --sp
     instead of against the template's flat 25px. --gap-head is every section
     head → its first content; --gap-blk is the air before a numbered sub-block
     head inside a section. Both step down with --sp at each breakpoint. */
  --gap-head:48px;
  --gap-blk:110px;
  --r:2px;
  --maxw:1920px;
  --pad:90px;                 /* requested side gutter */

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
@media (max-width:1280px){ :root{ --pad:60px; --gap-blk:92px } }
@media (max-width:991px){  :root{ --sp:100px; --pad:40px; --gap-head:38px; --gap-blk:76px } }
@media (max-width:767px){  :root{ --sp:80px;  --pad:24px; --gap-head:30px; --gap-blk:60px } }
@media (max-width:479px){  :root{ --sp:60px;  --pad:20px; --gap-head:26px; --gap-blk:50px } }

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
section[id]{scroll-margin-top:80px}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
body{
  margin:0;background:var(--paper);color:var(--body);
  font-family:var(--sans);font-size:16px;font-weight:400;line-height:150%;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,iframe{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,h5,p,figure,blockquote,ol,ul{margin:0}
ol,ul{list-style:none;padding:0}
::selection{background:var(--title);color:#fff}

/* the template's type scale */
h1{color:var(--title);font-size:50px;font-weight:500;line-height:120%}
h2{color:var(--title);font-size:36px;font-weight:500;line-height:120%}
h3{color:var(--title);font-size:28px;font-weight:400;line-height:130%}
h4{color:var(--title);font-size:22px;font-weight:400;line-height:130%}
h5{color:var(--title);font-size:18px;font-weight:500;line-height:150%}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.sec{margin-bottom:var(--sp)}

/* ---------- section title (template .section-title) ---------- */
.sec-head{display:flex;flex-direction:column;gap:12px;margin-bottom:var(--gap-head)}
.sec-h{margin-bottom:0}
.sec-h em{font-style:normal;color:var(--primary)}
.sec-rule{width:100%;height:1px;background:var(--line)}
.sec-sub{display:flex;align-items:center;gap:8px;font-size:14px;line-height:110%;color:var(--body)}
.dot{display:block;min-width:10px;max-width:10px;min-height:10px;max-height:10px;
  border-radius:50%;background:var(--primary)}

/* the template's single-text lead paragraph */
.lead{max-width:70ch;margin-bottom:0}
.lead--wide{max-width:92ch}
.blk-h{margin:0;font-size:28px;font-weight:400;line-height:130%;color:var(--title)}
/* A .blk-sub only ever follows a .blk-head, which already opens the full
   --gap-head below itself. The negative top margin pulls the paragraph back up
   against its heading, then the paragraph re-opens the gap under the pair — so
   heads with and without a sub both clear their content by the same amount. */
.blk-sub{max-width:80ch;margin-top:calc(20px - var(--gap-head));margin-bottom:var(--gap-head)}
/* the gutter between heading and paragraph is wide on purpose (client
   request) — the paragraph stays flush right and reads as a separate column */
.split{display:flex;gap:80px;justify-content:space-between;align-items:flex-start;
  margin-bottom:var(--gap-head)}
.split>*{width:100%}
.split__h{max-width:38%;font-size:32px;font-weight:400;line-height:130%;color:var(--title)}
.split__t{max-width:50%}

/* ---------- buttons (template .primary-button / .nav-button) ---------- */
.btn{
  --bg-c:#000;--fg:#fff;--bd:#000;
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 24px;border:1px solid var(--bd);border-radius:var(--r);
  background:var(--bg-c);color:var(--fg);
  font-size:14px;font-weight:500;line-height:130%;cursor:pointer;overflow:hidden;
  transition:background-color .3s,color .3s,border-color .3s;
}
.btn__t{display:block;position:relative;overflow:hidden;height:1.3em}
.btn__t span{display:block;transition:transform .45s var(--ease-out)}
.btn__t span+span{position:absolute;inset:0;transform:translateY(110%)}
.btn:hover .btn__t span{transform:translateY(-110%)}
.btn:hover .btn__t span+span{transform:translateY(0)}
.btn:hover{background:var(--primary);border-color:var(--primary);color:#fff}
.btn--outline{--bg-c:transparent;--fg:#000;--bd:#000}
.btn--light{--bg-c:#fff;--fg:#000;--bd:#fff}
.btn--sm{padding:9px 18px;font-size:13px}

/* template .secondary-button + .arrow-wrap */
.slink{display:inline-flex;align-items:center;gap:6px;
  font-size:14px;font-weight:500;line-height:130%;color:var(--title)}
.slink__arw{position:relative;display:block;min-width:18px;max-width:18px;
  min-height:18px;max-height:18px;overflow:hidden;flex:none}
.slink__arw i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-style:normal;transition:transform .4s var(--ease-out)}
.slink__arw i+i{transform:translateX(-120%)}
.slink:hover .slink__arw i{transform:translateX(120%)}
.slink:hover .slink__arw i+i{transform:translateX(0)}
.slink--gold{color:var(--primary)}

/* template .hero-btn — 40px accent circle */
.circle{display:flex;align-items:center;justify-content:center;
  min-width:40px;max-width:40px;min-height:40px;max-height:40px;border-radius:50%;
  background:var(--primary);color:#fff;transition:background-color .3s}
.circle:hover{background:#000}
.circle__arw{position:relative;display:flex;align-items:center;justify-content:center;
  min-width:20px;max-width:20px;min-height:20px;max-height:20px;overflow:hidden}
.circle__arw i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-style:normal;font-size:15px;transition:transform .4s var(--ease-out)}
.circle__arw i+i{transform:translateY(-120%)}
.circle:hover .circle__arw i{transform:translateY(120%)}
.circle:hover .circle__arw i+i{transform:translateY(0)}

.chip{display:inline-flex;align-items:center;border:1px solid var(--hair);border-radius:var(--r);
  padding:5px 12px;font-size:12px;line-height:120%;color:var(--body)}

/* ---------- motion (template .on-scroll wipe + masked headline) ---------- */
.mask{overflow:hidden}
[data-mask]{transform:translateY(105%);transition:transform 1s var(--ease-out) var(--md,0s)}
[data-mask].is-in{transform:none}
[data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--ease-out) var(--d,0s),transform .8s var(--ease-out) var(--d,0s)}
[data-reveal].is-in{opacity:1;transform:none}

.ph{position:relative;margin:0;overflow:hidden;border-radius:var(--r);background:var(--bg)}
.ph img{width:100%;transition:filter .3s}
.ph__cover{position:absolute;inset:0;background:var(--bg);transform-origin:50% 100%;
  transition:transform 1s var(--ease-out) var(--d,0s)}
[data-reveal-img].is-in .ph__cover{transform:translateY(-101%)}

@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  [data-reveal],[data-mask]{opacity:1;transform:none}
  .ph__cover{display:none}
}

/* =========================================================
   PRELOADER
   =========================================================
   The one piece of chrome on this site that is NOT in the Barb
   template — added on client instruction, after the earlier note
   that a preloader fought the resemblance. It is kept as quiet as
   that history demands: pure #fff, no panel, no counter, no
   progress bar, no wordmark set in type. Only the supplied lockup,
   revealed once.

   Everything here animates opacity / filter / transform / mask-size
   and nothing else — no layout property is touched, so the whole
   sequence stays on the compositor. GSAP drives it (assets/js/
   preloader.js); the rules below are only the resting state.

   .pl is display:none by default and only shown under
   html.is-preloading, which is set by an inline <head> script. With
   JS off the overlay never exists and the page is never gated. */
.pl{display:none}
html.is-preloading .pl{
  position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:var(--paper);
  /* the exit is a pure opacity fade, so give it its own layer up front */
  will-change:opacity;
}
/* the page waits underneath at opacity 0 — GSAP fades it up as the overlay
   fades down, which is what makes the hand-off invisible */
html.is-preloading body>*:not(.pl){opacity:0}

.pl__logo{
  position:relative;width:clamp(210px,32vw,420px);
  /* the lockup's own viewBox ratio — so the sheen mask, which is the same
     artwork, lands on the glyphs to the pixel */
  aspect-ratio:972.28/348.66;
  /* THE REVEAL. A soft-edged radial mask scaled horizontally from nothing to
     wider than the logo: the lockup surfaces at the centre and spreads out to
     both ends. --rv is written by GSAP; at 0% the logo is simply not there. */
  --rv:0%;
  -webkit-mask-image:radial-gradient(125% 135% at 50% 50%,#000 38%,transparent 76%);
          mask-image:radial-gradient(125% 135% at 50% 50%,#000 38%,transparent 76%);
  -webkit-mask-size:var(--rv) 100%;   mask-size:var(--rv) 100%;
  -webkit-mask-position:50% 50%;      mask-position:50% 50%;
  -webkit-mask-repeat:no-repeat;      mask-repeat:no-repeat;
  opacity:0;filter:blur(14px) contrast(.86);
  will-change:opacity,filter,transform;
}
.pl__art{width:100%;height:100%;overflow:visible}

/* The O of DICTATOR briefly thins to a clipper ring. The letterform itself is
   never redrawn or replaced — the glyph fades and an outline sized off its own
   bounding box fades in over it, then the letter comes straight back. */
.pl__ring{opacity:0;transform-box:fill-box;transform-origin:50% 50%}

/* THE REFLECTION. .pl__sheen is masked to the lockup and never moves; the band
   inside it is what travels, so the light stays inside the letterforms.
   It crosses exactly once, at an opacity you are meant to feel, not see. */
.pl__sheen{
  position:absolute;inset:0;opacity:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:url("../media/logo-primary-black.svg");
          mask-image:url("../media/logo-primary-black.svg");
  -webkit-mask-size:100% 100%;   mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
/* peak alpha is deliberately low: measured against the black letterforms it
   lifts them to a dark grey and no further, so the pass reads as a reflection
   rather than a white streak */
.pl__band{
  position:absolute;top:-20%;bottom:-20%;left:0;width:46%;
  background:linear-gradient(100deg,transparent 6%,#ffffff6b 50%,transparent 94%);
  will-change:transform;
}

@media (max-width:479px){
  .pl__logo{width:min(68vw,300px)}
}
/* No reveal, no sweep, no ring: the overlay simply is not worth 2 seconds of
   someone's time if they have asked the OS for less motion. preloader.js clears
   it on the next frame; this keeps the logo still in the meantime. */
@media (prefers-reduced-motion:reduce){
  .pl__logo{opacity:1;filter:none;-webkit-mask-image:none;mask-image:none}
  .pl__sheen{display:none}
}

/* =========================================================
   HEADER  (template .navbar — centred logo, hairline bottom)
   ========================================================= */
.hdr{position:sticky;top:0;z-index:120;background:#fff;border-bottom:1px solid var(--line)}
/* logo flush left, nav centred, action right */
.hdr__inner{position:relative;width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:16px var(--pad);display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:24px}

.logo{display:block;line-height:1;color:var(--title);text-align:left}
.logo img{width:100%;max-width:150px;height:auto}
.logo__name{display:block;font-size:18px;font-weight:700;letter-spacing:.18em}
.logo__sub{display:block;margin-top:4px;font-style:normal;font-size:8px;letter-spacing:.6em;
  color:var(--primary);padding-left:.6em}

/* nav links use the template's two-label vertical slide */
.nav{display:flex;align-items:center;justify-content:center;gap:26px}
.nav a{position:relative;display:block;height:1.2em;overflow:hidden;
  font-size:14px;line-height:120%;color:#000}
.nav a span{display:block;transition:transform .4s var(--ease-out)}
.nav a span+span{position:absolute;inset:0;transform:translateY(100%)}
.nav a:hover span{transform:translateY(-100%)}
.nav a:hover span+span{transform:translateY(0);color:var(--primary)}
.nav a.is-current span{color:var(--primary)}
.nav--accent span{color:var(--primary)}

.hdr__side{display:flex;align-items:center;gap:20px;justify-content:flex-end}

.brg{display:none;padding:0;background:none;border:0;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center}
.brg span{display:block;width:24px;height:1px;background:#000;transition:transform .4s var(--ease)}
.brg span+span{margin-top:6px}
body.mob-open .brg span:first-child{transform:translateY(3.5px) rotate(45deg)}
body.mob-open .brg span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

.mob{position:fixed;inset:0;z-index:115;background:#fff;color:#000;overflow-y:auto;
  padding:90px var(--pad) 40px;display:flex;flex-direction:column;justify-content:space-between;
  clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease-out)}
body.mob-open .mob{clip-path:inset(0 0 0 0)}
.mob__nav{display:flex;flex-direction:column}
.mob__nav a{padding:12px 0;border-bottom:1px solid var(--hair);font-size:20px;font-weight:500;
  text-align:center;opacity:0;transform:translateY(14px);
  transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
body.mob-open .mob__nav a{opacity:1;transform:none}
.mob__nav a.is-gold{color:var(--primary)}
/* stretch, not centre: the client asked for the booking button at the foot of
   the burger menu to span the screen. The Instagram link keeps its centring
   from text-align, since it is now a full-width box too. */
.mob__foot{display:flex;flex-direction:column;gap:16px;align-items:stretch;
  text-align:center;margin-top:30px}
.mob__foot .btn{width:100%}
.mob__soc{font-size:18px;font-weight:600;color:var(--primary)}

/* =========================================================
   HERO  (template .hero — 180px centred title, data row, full-bleed image)
   ========================================================= */
/* no bottom rhythm — the black price band butts straight up against the hero photo */
.hero{padding-top:60px;margin-bottom:0}
.hero__wrap{margin-bottom:40px}
/* Tracking is matched to the primary lockup, not picked by eye. Two things used
   to close the C|T pair up until the letters touched: the -.02em tracking, and
   Montserrat's own "CT" kern pair (worth about another .016em on top of it), so
   the one gap in DICTATOR that is already the tightest optically lost roughly
   two thirds of its air while D|I and I|C kept theirs. Measured against the SVG
   logo at equal cap height, the lockup there is 7.52 caps wide with a C|T gap of
   .067 cap; font-kerning:none plus .02em reproduces both (7.52 / .066), which is
   why the pair is disabled rather than the tracking simply nudged — tracking
   alone would have to run to ~.045em to clear the kern, and that blows the word
   far wider than the logo. Change the two together or not at all. */
.hero__title{
  text-align:center;text-transform:uppercase;color:var(--title);margin-bottom:0;
  font-size:clamp(46px,12.4vw,180px);font-weight:600;line-height:100%;
  letter-spacing:.02em;font-kerning:none;
  /* letter-spacing hangs its em after the R too, so centring pulls the word a
     half-space left; the same padding trick .hero__title--sub already uses. */
  padding-left:.02em;
}
/* Client asked twice to tighten the lockup. What reads as the gap is mostly NOT
   margin — it is the ~.145em of empty box that line-height:100% still reserves
   under DICTATOR's baseline. So the pull is negative, and it has to sit on the
   .mask WRAPPER: a negative margin on .hero__title--sub itself is inside that
   overflow:hidden box and simply slices the top off OF STYLE. It also has to
   scale with the display size (the same clamp as .hero__title), never a fixed
   px, or the lockup re-opens on wide screens and collides on phones. */
.mask--sub{margin-top:calc(clamp(46px,12.4vw,180px) * -0.11)}
.hero__title--sub{
  font-size:clamp(13px,2.2vw,31px);font-weight:500;letter-spacing:.6em;line-height:100%;
  padding-left:.6em;margin-top:0;color:var(--title);
}
/* The lead paragraph sits left in a 35% column with the booking button right —
   the template's own hero-data row. It was briefly centred across the page; the
   client had that reverted, and centring now happens ONLY on phones, in the
   mobile pass at the end of this file. */
.hero__data{display:flex;justify-content:space-between;align-items:center;gap:40px;margin-top:25px}
.hero__text{width:100%;max-width:35%;margin-bottom:0;font-size:16px;line-height:150%}
.hero__right{display:flex;justify-content:flex-end;align-items:center;gap:20px}
/* the scroll .circle next to it is gone (client request) — the button stands alone */
/* the label that used to sit here is a booking button now (client request) —
   one step up from the standard .btn so it carries the hero */
.hero__btn{padding:16px 34px;font-size:15px;letter-spacing:.02em}
/* Parallax window: the frame is a fixed-height viewport and the photo is
   --over taller than it, so the image can drift downward as the page scrolls.
   Crop anchored at 60% rather than the bottom — the full-res IMG_2212 frame
   carries no corner lockup, and the interest (the four DICTATOR signs, the
   mirrors, the chairs) sits in the middle band; a bottom anchor filled the
   window with plain floor. --over is 20% so the drift is actually readable. */
.hero__img{--over:20%;width:100%;height:clamp(360px,48vw,760px);border-radius:0}
.hero__img img{
  position:absolute;left:0;bottom:0;top:auto;width:100%;height:calc(100% + var(--over));
  max-height:none;object-fit:cover;object-position:50% 60%;
  /* --shift is written by dictator.js in px: 0 = bottom aligned (also the
     no-JS default, so the crop is still right), rising to the overflow height. */
  transform:translate3d(0,var(--shift,0px),0);will-change:transform;
}
@media (prefers-reduced-motion:reduce){
  .hero__img{--over:0%}
  .hero__img img{transform:none;will-change:auto}
}

/* =========================================================
   HAIRLINE CELL GRID  (template .service-list / .service-block)
   Separators are box-shadows on the children inside an
   overflow:hidden bordered box, so a half-empty last row
   stays white instead of showing a grey block.
   ========================================================= */
.cards{display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;background:var(--paper)}
.cards--2{grid-template-columns:repeat(2,1fr)}
.cards--3{grid-template-columns:repeat(3,1fr)}
.cards--5{grid-template-columns:repeat(5,1fr)}
.cards>*{background:var(--paper);padding:25px 25px 20px;display:flex;flex-direction:column;
  align-items:flex-start;gap:15px;transition:background-color .35s var(--ease);
  box-shadow:1px 0 0 0 var(--hair),0 1px 0 0 var(--hair)}
.cards>*:hover{background:var(--wash)}

/* school / franchise / branch cell content */
.bc__n{font-size:12px;line-height:120%;color:var(--primary);font-weight:600;letter-spacing:.1em}
.fc__tick{position:relative;min-width:24px;max-width:24px;min-height:24px;max-height:24px;
  border:1px solid var(--primary);border-radius:var(--r)}
.fc__tick::after{content:"";position:absolute;left:7px;top:9px;width:9px;height:5px;
  border-left:1.5px solid var(--primary);border-bottom:1.5px solid var(--primary);transform:rotate(-45deg)}
.fc__h{font-size:18px;font-weight:500;line-height:150%;color:var(--title);margin-bottom:0}
.fc__t{font-size:14px;line-height:150%}

/* =========================================================
   PROMO CARDS (#promo) — two full-bleed photo cards, client screenshot
   ========================================================= */
.promos{display:grid;grid-template-columns:repeat(2,1fr);gap:40px}
.pm{position:relative;isolation:isolate;overflow:hidden;border-radius:16px;
  min-height:clamp(320px,26vw,420px);display:flex;
  box-shadow:0 18px 40px -28px #00000038}
.pm__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:100% 50%;
  transform:scale(1.02);transition:transform 1.2s var(--ease-out)}
.pm:hover .pm__bg{transform:scale(1.06)}
.pm::before{content:"";position:absolute;inset:0;z-index:-1}
.pm--dark{background:#0d0b0a;color:#ffffffb3}
.pm--dark::before{background:linear-gradient(90deg,#0d0b0ae6 0%,#0d0b0ac2 34%,#0d0b0a5c 62%,#0d0b0a00 82%)}
.pm--light{background:#f7f3ec;color:var(--body)}
.pm--light::before{background:linear-gradient(90deg,#f7f3ecf2 0%,#f7f3ecd9 38%,#f7f3ec66 64%,#f7f3ec00 84%)}

.pm__ghost{position:absolute;left:clamp(34px,6.1vw,105px);top:27%;z-index:-1;pointer-events:none;user-select:none;
  font-size:clamp(80px,8.6vw,132px);font-weight:600;line-height:1;letter-spacing:-.02em;
  color:#ffffff0d;white-space:nowrap}

.pm__body{position:relative;display:flex;flex-direction:column;align-items:flex-start;
  padding:clamp(26px,2.6vw,44px);width:100%}
.pm__title{margin:clamp(18px,1.8vw,28px) 0 0;font-size:clamp(26px,2.5vw,42px);font-weight:500;
  line-height:122%;letter-spacing:-.005em}
.pm--dark .pm__title{color:#fff}
.pm--light .pm__title{color:var(--title)}
.pm__rule{display:block;width:30px;height:1px;margin:clamp(18px,1.5vw,24px) 0 0;background:var(--primary)}
.pm__desc{margin:clamp(16px,1.4vw,22px) 0 0;font-size:18px;line-height:150%;max-width:19em}
.pm--dark .pm__desc{color:#ffffffbf}
.pm__cta{margin-top:auto;padding:clamp(20px,1.8vw,30px) 0 14px;font-size:18px;gap:10px;
  border-bottom:1px solid #c2924e73;transition:border-color .3s,color .3s}
.pm__cta:hover{border-bottom-color:var(--primary)}
.pm__cta .slink__arw{min-width:20px;max-width:20px;min-height:20px;max-height:20px}

.chip--gold{border-color:#c2924e8c;color:var(--primary);padding:9px 17px;
  font-size:14px;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.pm--light .chip--gold{color:var(--title)}

@media (max-width:991px){
  .promos{grid-template-columns:1fr;gap:24px}
  .pm{min-height:min(62vw,340px)}
  .pm__ghost{top:22%}
}
@media (max-width:767px){
  .pm{min-height:0}
  .pm__desc{font-size:16px;max-width:26em}
  .pm--dark::before{background:linear-gradient(90deg,#0d0b0aeb 0%,#0d0b0ad6 46%,#0d0b0a8f 76%,#0d0b0a26 100%)}
  .pm--light::before{background:linear-gradient(90deg,#f7f3ecf7 0%,#f7f3ece8 46%,#f7f3ec9e 76%,#f7f3ec33 100%)}
}

/* branches / contacts cells */
.bc,.cb{cursor:pointer}
.bc.is-active,.cb.is-active{background:var(--tint)}
.bc.is-active:hover,.cb.is-active:hover{background:var(--tint)}
.bc__name,.cb__name{font-size:22px;font-weight:400;line-height:130%;color:var(--title);margin-bottom:0}
.bc__addr,.cb__addr,.cb__hours{font-size:14px;line-height:150%}
.cb__hours{color:var(--muted)}
.bc__dot{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--title)}
.bc__clock{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.bc__actions,.cb__foot{display:flex;flex-wrap:wrap;gap:20px;align-items:center;
  margin-top:auto;padding-top:15px;border-top:1px solid var(--hair);width:100%}
.cb__foot{justify-content:space-between}
.cb__phone{font-size:18px;font-weight:500;color:var(--title);transition:color .3s}
.cb__phone:hover{color:var(--primary)}

/* =========================================================
   PRICE LIST  (Clipster treatments layout on a black band)
   ========================================================= */
.menu-band{background:#000;color:#fff;padding-block:80px;margin-bottom:var(--sp)}
.menu-band .sec-h,.menu-band h2{color:#fff}
.menu-band .sec-rule{background:#ffffff2e}
.menu-band .sec-sub{color:#ffffffa6}
.menu-band .lead{color:#ffffffa6}

.menu{margin-top:var(--gap-head);border-bottom:1px solid #ffffff1f}
.menu__group{border-top:1px solid #ffffff1f;padding:46px 0 40px}
/* the .sec-rule already sits above the first category — no second rule there */
.menu__group:first-child{border-top:0;padding-top:0}
/* Montserrat, upright — the client dropped the Clipster serif italic here
   ("вони там не пасують"), which retired Instrument Serif from the site
   entirely. The heading keeps the reference's scale, so the categories still
   carry the list; it just reads in our own face. */
.menu__cat{font-weight:500;font-size:clamp(26px,2.8vw,40px);line-height:115%;
  letter-spacing:-.01em;color:#ffffffd9;margin-bottom:30px}
/* column-major, so each column reads top-to-bottom like the reference */
.menu__grid{display:grid;grid-auto-flow:column;
  grid-template-rows:repeat(var(--rows,4),auto);
  grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(40px,6vw,110px)}

.pr{display:grid;grid-template-columns:auto minmax(20px,1fr) auto;align-items:center;gap:16px;
  padding:13px 14px;color:#fff;transition:background-color .28s var(--ease),color .28s var(--ease)}
.pr__name{font-size:14px;font-weight:500;line-height:130%;letter-spacing:.05em;text-transform:uppercase}
.pr__dur{margin-left:10px;font-style:normal;font-size:11px;font-weight:400;letter-spacing:.08em;
  color:#ffffff59;transition:color .28s var(--ease)}
.pr__lead{display:block;height:1px;background:#ffffff2e;transition:background-color .28s var(--ease)}
.pr__price{font-size:14px;font-weight:500;line-height:130%;white-space:nowrap}
.pr__price i{font-style:normal;color:#ffffff8c;transition:color .28s var(--ease)}
.pr:hover{background:#fff;color:#000}
.pr:hover .pr__lead{background:var(--hair)}
.pr:hover .pr__dur{color:#00000059}
.pr:hover .pr__price i{color:#0000008c}
.menu-band__foot{display:flex;justify-content:center;margin-top:50px}

/* =========================================================
   TICKER  (live-site band, kept quiet: hairline rules, no fill)
   ========================================================= */
/* sits flush between the hero photo and the black price band — no rhythm either
   side, and black, so it reads as one piece with the price band below it */
.ticker{overflow:hidden;padding:18px 0;margin:0;background:#000;border:0}
.ticker__track{display:flex;width:max-content;animation:marquee 46s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__set{display:flex;align-items:center;gap:32px;padding-right:32px}
.ticker__set span{font-size:13px;letter-spacing:.24em;color:#fff;white-space:nowrap}
.ticker__set i{display:block;min-width:6px;max-width:6px;min-height:6px;max-height:6px;
  border-radius:50%;background:var(--primary)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* =========================================================
   FACTS PANEL  (template .facts-wrap / .facts-block)
   ========================================================= */
.panel{display:grid;grid-template-columns:repeat(4,1fr);gap:60px;
  background:var(--tint);border-radius:var(--r);padding:60px}
.panel--3{grid-template-columns:repeat(3,1fr)}
.panel--flat{background:var(--bg)}
.fact{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line);padding-top:10px}
.fact__num{color:#000;font-size:44px;font-weight:600;line-height:120%;letter-spacing:-.02em}
.fact--sm .fact__num{font-size:32px}
.fact__lbl{font-size:16px;line-height:150%;color:#000}
.fact__note{font-size:13px;line-height:150%;color:#00000099}

/* =========================================================
   BRANCHES  (two standalone cards side by side rather than the
   joined .cards box — the active one carries the tint fill, the
   gold booking button)
   ========================================================= */
.brs{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.brs>.bc{position:relative;overflow:hidden;display:flex;flex-direction:column;
  align-items:flex-start;gap:15px;padding:40px;background:var(--paper);
  border:1px solid var(--hair);border-radius:var(--r);
  transition:background-color .35s var(--ease),border-color .35s var(--ease)}
.brs>.bc:hover{border-color:var(--hair-strong)}
.brs>.bc.is-active{background:var(--tint);border-color:transparent}
.brs>.bc .bc__actions{margin-top:auto}

/* booking button: gold outline, filling solid gold on the selected branch */
.bc__book{--bg-c:transparent;--fg:var(--primary);--bd:var(--primary);gap:10px}
.bc__book .bc__arw{font-style:normal;line-height:1;transition:transform .4s var(--ease-out)}
.bc__book:hover .bc__arw{transform:translateX(4px)}
.bc.is-active .bc__book{--bg-c:var(--primary);--fg:#fff;--bd:var(--primary)}
.bc.is-active .bc__book:hover{background:#000;border-color:#000}

/* =========================================================
   ADVANTAGES  (#adv — "Чому DICTATOR")
   The yadovit reference gave this block a sticky lead left and a
   scroll-lit numbered rail right. The rail is gone: the client
   read the 44px double-ring discs, the connector line and the
   18px uppercase titles as a stock "process steps" widget.
   What replaced it keeps the scroll-lit idea and nothing else —
   four statements at display scale, no hairlines and no boxes,
   each led by a big --tint numeral in a hanging column that goes
   solid gold once the playhead has passed it. Air does the
   separating, which is also what keeps it distinct from the
   hairline lists (.why, .tbl, and now .tl, which lost its warm
   plate and became one of them).
   ========================================================= */
.adv-flow{display:flex;justify-content:space-between;align-items:flex-start;
  gap:clamp(40px,5vw,90px)}
.adv-flow__left{width:100%;max-width:34%;position:sticky;top:120px}
.adv-flow__lead{margin-bottom:0;font-size:clamp(26px,2.9vw,42px);font-weight:400;
  line-height:125%;letter-spacing:-.01em;color:var(--title)}
.adv-flow__right{position:relative;width:100%;max-width:58%}
.adv-list{display:flex;flex-direction:column;gap:clamp(44px,4vw,66px)}
/* the numeral hangs beside both rows, top-aligned with the statement. The
   column is a fixed width, not `auto` — 01 and 04 set different glyph widths
   and the titles would step in and out by a few px down the list. */
.stp{position:relative;display:grid;grid-template-columns:clamp(58px,5.4vw,92px) minmax(0,1fr);
  column-gap:clamp(18px,1.8vw,30px);align-items:start}
.stp__n{grid-column:1;grid-row:1/span 2;
  font-size:clamp(38px,3.6vw,60px);font-weight:600;line-height:.82;
  letter-spacing:-.04em;color:var(--tint);
  transition:color .55s var(--ease)}
.stp.is-on .stp__n{color:var(--primary)}
.stp__h{grid-column:2;grid-row:1;margin-bottom:0;
  font-size:clamp(20px,1.85vw,27px);font-weight:500;line-height:132%;
  letter-spacing:0;text-transform:none;color:var(--title)}
.stp__t{grid-column:2;grid-row:2;margin:14px 0 0;font-size:16px;line-height:175%;
  color:var(--body);max-width:52ch}

/* =========================================================
   MAP
   ========================================================= */
.mapbox{position:relative;margin-top:30px;border-radius:var(--r);overflow:hidden;
  background:var(--bg);height:clamp(300px,32vw,460px)}
.mapbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0;
  filter:grayscale(100%) contrast(1.05);transition:filter .5s var(--ease),opacity .3s}
.mapbox:hover iframe{filter:grayscale(35%)}
/* our lockup pin, covering Google's own marker, which the embed plants tip-down on
   the map centre at every width. Ours is anchored 8px LOWER than that point on
   purpose: the two teardrops are nearly the same height, but Google's tapers wider
   than ours, so tip-on-tip leaves a grey fringe of Google's point sticking out
   below. 8px is ~2x the measured break-even (leftover Google pixels appear again
   at ~4px) and is scale-independent — both cones keep their angle, so the same
   offset covers the 46px mobile pin and the 64px desktop one. The shadow is kept
   tight: a wide blur under a pointed tip reads as a crooked pin. */
.mapbox__pin{position:absolute;left:50%;top:50%;z-index:2;
  width:clamp(46px,4vw,64px);height:auto;
  transform:translate(-50%,calc(-100% + 8px));transform-origin:50% 100%;pointer-events:none;
  filter:drop-shadow(0 3px 6px #0000003d)}

/* =========================================================
   TEAM  (LUSHY slider composition: dark band, arrows beside the
   heading, a 4-up snapping track, role above name — rendered in
   our own type, palette and copy)
   ========================================================= */
/* The band runs on white (client request). It used to redefine the tokens dark,
   the way #school did; that is gone, so the section inherits the root palette
   like every other one and only the portrait tiles stay dark. It keeps its own
   class rather than .sec because the track has to bleed past the gutters. */
.tm-band{background:var(--paper);margin-bottom:var(--sp)}

/* Reference head: small dotted label, then the heading, no rule, arrows right.
   The one section that does NOT use .sec-head — the client asked for this
   arrangement specifically. Type, gold dot and caps are still ours. */
.tm-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;
  margin-bottom:var(--gap-head)}
.tm-head__eyebrow{display:flex;align-items:center;gap:8px;margin-bottom:14px;
  font-size:14px;line-height:110%;color:var(--body)}
.tm-head__h{margin-bottom:0;color:var(--title);font-size:clamp(28px,3vw,44px);font-weight:500;
  line-height:120%;letter-spacing:-.01em}

.tm-nav{display:flex;gap:12px;flex:none}
.circle--ghost{background:#0000;border:1px solid var(--hair-strong);color:var(--title);cursor:pointer;padding:0;
  transition:background-color .3s,border-color .3s,opacity .3s}
.circle--ghost:hover{background:var(--primary);border-color:var(--primary);color:#fff}
.circle--ghost:disabled{opacity:.3;pointer-events:none}
.circle--lg{min-width:60px;max-width:60px;min-height:60px;max-height:60px}
.circle--lg .circle__arw{min-width:24px;max-width:24px;min-height:24px;max-height:24px}
.circle--lg .circle__arw i{font-size:19px}

.tm-track{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:calc((100% - 3*30px)/4);
  gap:30px;padding:0 var(--pad);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-padding-left:var(--pad);
  scrollbar-width:none;-ms-overflow-style:none;
}
.tm-track::-webkit-scrollbar{display:none}

.tm{display:block;width:100%;scroll-snap-align:start;color:var(--body)}
/* The tile still carries the monogram as the bottom layer, so a card with no
   photo degrades to what it used to be; the placeholder portrait sits on top. */
.tm__img{position:relative;display:flex;align-items:center;justify-content:center;
  aspect-ratio:445/498;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--hair);background:linear-gradient(160deg,#2b2b2b,#403a30)}
.tm__img::before{content:attr(data-monogram);font-size:76px;font-weight:600;letter-spacing:.04em;
  color:#0000;-webkit-text-stroke:1px #efe2cb99;
  transition:transform .7s var(--ease-out),-webkit-text-stroke-color .4s}
/* One identical framing on every card (client request): the portrait is
   centred horizontally and cropped to the head, so the whole track reads as
   one set. The per-card --z / --fx / --fy variation is gone. */
.tm__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 22%;
  transition:transform .9s var(--ease),filter .45s var(--ease);filter:grayscale(.15)}
.tm:hover .tm__img img{transform:scale(1.05);filter:none}
.tm__cta{position:absolute;left:0;right:0;bottom:0;padding:13px;text-align:center;
  background:var(--primary);color:#fff;font-size:14px;font-weight:500;
  transform:translateY(101%);transition:transform .45s var(--ease-out)}
.tm:hover .tm__cta{transform:none}
/* role above name, the reference's stacking */
.tm__role{display:block;margin-top:16px;font-size:14px;line-height:150%;color:var(--muted)}
.tm__name{display:block;margin-top:2px;color:var(--title);font-size:18px;font-weight:500;line-height:150%;
  transition:color .3s}
.tm:hover .tm__name{color:var(--primary)}
.tm__meta{display:flex;align-items:center;gap:10px;margin-top:6px;font-size:12px;color:var(--muted)}
.tm__meta i{display:block;min-width:3px;max-width:3px;height:3px;border-radius:50%;background:var(--primary)}

/* =========================================================
   WORK GRID  (template .work-wrap — staggered columns, grayscale hover)
   ========================================================= */
/* The two outer columns carry the only intrinsic height in the grid — two
   3:4 cells each. The middle column stretches into that same row and splits
   it into three equal cells, so all three columns start AND end on the same
   line (client request: the stagger that used to push the middle column down
   60px is gone). The images are absolutely positioned so they add no height
   of their own — that is what makes the stretch work. */
.work{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.work__col{display:grid;grid-auto-rows:1fr;gap:24px;width:100%}
.work__col--down{margin-top:0}
.work .ph{min-height:0;cursor:zoom-in}
.work__col:not(.work__col--down) .ph{aspect-ratio:3/4}
.work .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease),filter .45s var(--ease)}
.work .ph:hover img{filter:grayscale(1);transform:scale(1.03)}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:160;display:flex;align-items:center;justify-content:center;
  gap:20px;padding:40px 80px;background:#0b0b0bf2;opacity:0;
  transition:opacity .35s var(--ease)}
.lb[hidden]{display:none}      /* the class's display: flex outranks the UA [hidden] rule */
.lb.is-on{opacity:1}
.lb__img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:var(--r)}
.lb__x,.lb__nav{display:flex;align-items:center;justify-content:center;flex:none;
  background:#0000;border:1px solid #ffffff4d;border-radius:50%;color:#fff;cursor:pointer;
  transition:background-color .3s var(--ease),border-color .3s var(--ease)}
.lb__nav{width:52px;height:52px;font-size:20px}
.lb__x{position:absolute;top:24px;right:24px;width:44px;height:44px;font-size:26px;line-height:1}
.lb__x:hover,.lb__nav:hover{background:var(--primary);border-color:var(--primary)}
.lb__count{position:absolute;left:0;right:0;bottom:24px;text-align:center;
  color:#ffffffa6;font-size:14px;letter-spacing:.1em}

/* =========================================================
   COURSE TABLE
   ========================================================= */
/* An indexed spec sheet: 01 · course · who it suits · duration pill.
   The row hover carries the accent — index, name and pill flip gold. */
.tbl{border-top:1px solid var(--line)}
.tbl__row{display:grid;grid-template-columns:60px minmax(0,1.05fr) minmax(0,1.5fr) 140px;gap:30px;
  padding:24px 0;border-bottom:1px solid var(--hair);align-items:center;
  font-size:14px;line-height:150%;transition:background-color .35s var(--ease),padding .35s var(--ease)}
.tbl__n{font-size:13px;font-weight:600;letter-spacing:.12em;color:var(--muted);transition:color .35s var(--ease)}
.tbl__name{color:var(--title);font-size:20px;font-weight:500;line-height:135%;transition:color .35s var(--ease)}
.tbl__desc{font-size:15px;line-height:160%;color:var(--body)}
.tbl__dur{justify-self:end;display:inline-flex;align-items:center;justify-content:center;
  padding:8px 16px;border:1px solid var(--hair-strong);border-radius:var(--r);
  font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--title);white-space:nowrap;
  transition:background-color .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease)}
.tbl__row:hover{background:var(--wash);padding-inline:20px}
.tbl__row:hover .tbl__n,.tbl__row:hover .tbl__name{color:var(--primary)}
.tbl__row:hover .tbl__dur{background:var(--primary);border-color:var(--primary);color:#fff}

/* =========================================================
   BLACK APPOINTMENT BAND  (template .appointment-wrapper)
   ========================================================= */
.band{background:#000;padding-block:60px;margin-top:var(--sp)}
.band__wrap{display:flex;justify-content:space-between;align-items:center;gap:60px}
.band__left{display:flex;flex-direction:column;gap:25px;width:100%;max-width:42%}
.band__left .ph{background:#141414}
.band__left .ph__cover{background:#141414}
.band__left .ph img{width:100%;max-height:440px;object-fit:cover}
.band__info{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.band__row{display:flex;align-items:center;gap:20px;color:#d9d9d9;font-size:14px;line-height:150%}
.band__right{width:100%;max-width:58%;color:#fff}
.band__title{color:#fff;font-size:28px;font-weight:400;line-height:130%;margin-bottom:10px}
.band__sub{width:100%;padding:0 60px 40px 0;font-size:14px;line-height:150%;color:#d9d9d9}
.band__form{display:grid;grid-template-columns:repeat(2,1fr);column-gap:40px;row-gap:32px}
.ff{display:block}
.ff--wide{grid-column:1/-1}
.ff span{display:block;margin-bottom:4px;font-size:14px;line-height:150%;color:#d9d9d9}
.ff input,.ff select,.ff textarea{
  width:100%;padding:0 0 4px;background:transparent;color:#fff;border:0;
  border-bottom:1px solid #fff3;border-radius:0;font-size:14px;line-height:150%;
  transition:border-color .3s}
.ff textarea{resize:vertical;min-height:90px}
.ff input::placeholder,.ff textarea::placeholder{color:#666;font-size:14px}
.ff input:focus,.ff select:focus,.ff textarea:focus{outline:none;border-bottom-color:#ffffff80}
.ff select{color:#fff}
.ff select option{color:#111}
.ff__foot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap}
.fnote{font-size:13px;line-height:150%;color:#ffffff59;max-width:46ch}

/* =========================================================
   STEPS / QUOTE
   ========================================================= */
/* Sixth pass. The five earlier ones are in CLAUDE.md; the two that still matter:
   equal boxes ruled off by a hairline cross read as a stock feature grid, and
   four paragraphs laid out flat cost ~770px of page. The accordion answered
   both, but it sat on a #f7f3ec plate and the client cut that too — "прибери
   фон в цьому кольорі бо виглядає так собі", "реалізуй мінімалістичніше але в
   цьому стилі". So the plate, its radius, its padding and its gold cap bar are
   gone: the accordion is now a bare hairline list on white, sharing the exact
   index vocabulary as .why-item (64px 13px/.12em muted index that goes gold on
   hover) instead of the big solid-gold numerals. Nothing was added.

   The accordion mechanics are unchanged: all four titles stay visible, one
   paragraph open at a time. `<details name="tlstage">` gives the exclusive
   behaviour natively — there is deliberately NO JS here, and with scripting off
   it still opens and closes. Older engines that ignore `name` just let several
   open at once, which is a fine degradation. Height is not animated (details
   has no animatable box); the paragraph fades in instead. */
.tl{--tl-ind:64px;--tl-gap:30px;border-top:1px solid var(--hair)}
.tl__step{border-bottom:1px solid var(--hair)}
.tl__sum{display:grid;grid-template-columns:var(--tl-ind) minmax(0,1fr) auto;
  column-gap:var(--tl-gap);align-items:center;
  padding:clamp(20px,1.9vw,28px) 0;cursor:pointer;list-style:none}
.tl__sum::-webkit-details-marker{display:none}
.tl__n{font-size:13px;font-weight:600;letter-spacing:.12em;line-height:1;
  color:var(--muted);transition:color .3s var(--ease)}
.tl__h{font-size:20px;font-weight:500;line-height:140%;
  color:var(--title);transition:color .3s var(--ease)}
.tl__sum:hover .tl__n,.tl__step[open] .tl__n{color:var(--primary)}
.tl__sum:hover .tl__h,.tl__step[open] .tl__h{color:var(--primary)}
/* a 14px + that loses its upright bar when the stage opens */
.tl__ico{position:relative;display:block;width:14px;height:14px;flex:none}
.tl__ico::before,.tl__ico::after{content:"";position:absolute;left:50%;top:50%;
  background:var(--muted);transform:translate(-50%,-50%);
  transition:background .3s var(--ease),transform .35s var(--ease)}
.tl__ico::before{width:14px;height:1px}
.tl__ico::after{width:1px;height:14px}
.tl__sum:hover .tl__ico::before,.tl__sum:hover .tl__ico::after,
.tl__step[open] .tl__ico::before{background:var(--primary)}
.tl__step[open] .tl__ico::after{transform:translate(-50%,-50%) scaleY(0)}
.tl__t{padding:0 0 clamp(20px,2vw,30px) calc(var(--tl-ind) + var(--tl-gap));
  font-size:17px;line-height:180%;color:var(--body);max-width:76ch;
  animation:tlIn .45s var(--ease-out) both}
@keyframes tlIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .tl__t{animation:none} }

/* =========================================================
   REVIEWS  (template .review-wrap — big image + 3 bordered blocks)
   ========================================================= */
/* Google-review cards (client request). The 1100+ summary column went first, then
   the 01/02 pager and its arrows — so there is nothing left to page and every
   card is simply visible. auto-fit sizes the track to the card count on its own:
   three reviews give three equal columns wherever three fit, two where they do
   not, one on a phone — no per-breakpoint override, and no lone half-width card
   in the tail row. */
.gr{display:block}

.stars{display:flex;gap:3px;margin-top:14px}
.stars svg{width:15px;height:15px;fill:var(--primary)}

/* the control bar the pager used to sit in — one button, right-aligned */
.gr__act{display:flex;justify-content:flex-end;margin-bottom:30px}
.gr__all{padding:13px 28px}

.gr__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:24px;align-items:stretch}
/* the Google card: mark top-right, avatar + name + secondary line, stars, quote.
   The big gold ” glyph the old card carried is gone — Google's cards have no
   such ornament and it was the main thing reading as "testimonial block". */
.gcard{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:16px;
  padding:34px 36px 36px;background:var(--paper);
  border:1px solid var(--hair);border-radius:var(--r);
  transition:border-color .35s var(--ease),background-color .35s var(--ease),transform .45s var(--ease)}
.gcard:hover{border-color:var(--hair-strong);background:var(--wash);transform:translateY(-3px)}
.gcard__g{position:absolute;right:30px;top:32px;display:block;line-height:0;opacity:.9}
.gcard__g svg{width:21px;height:21px}
.gcard__top{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;
  align-items:center;width:100%;padding-right:34px}
.gcard__ava{display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:50%;background:linear-gradient(140deg,#2b2b2b,#403a30);
  color:#fff;font-size:15px;font-weight:600;letter-spacing:.06em}
.gcard__name{display:block;font-size:17px;font-weight:500;line-height:140%;color:var(--title)}
/* plain grey secondary line, the slot Google fills with "N reviews" — the old
   uppercase letterspaced treatment read as a design caption, not a review */
.gcard__branch{display:block;margin-top:2px;font-size:14px;line-height:140%;color:var(--muted)}
.gcard .stars{position:relative;margin-top:0}
.gcard__text{position:relative;font-size:17px;line-height:175%;color:var(--body);max-width:46ch}


/* =========================================================
   ABOUT  (template .story-wrap — 38% text column + 62% image)
   ========================================================= */
.story{display:flex;justify-content:space-between;align-items:stretch;gap:40px}
.story__left{display:flex;flex-direction:column;gap:40px;width:100%;max-width:38%}
.story__h{margin-bottom:10px;font-size:22px;font-weight:400;line-height:130%;color:var(--title)}
.story__t{margin-bottom:10px;font-size:16px;line-height:150%}
.story__t:last-of-type{margin-bottom:0}
.story__info{display:flex;align-items:flex-end;gap:10px;margin-top:25px;color:#000;
  font-size:16px;line-height:150%}
.story__fact{font-size:38px;font-weight:600;line-height:100%;letter-spacing:-.02em}
.story__cap{padding-bottom:2px;font-size:14px;line-height:120%;color:var(--body)}
/* the text block keeps its natural height; the small photo takes the slack so the
   left column always ends flush with the tall photo — template .story-wrap bottoms */
.story__left>.ph{flex:1 1 auto;min-height:200px}
.story__left>.ph img,.story__img img{display:block;width:100%;height:100%;object-fit:cover}
.story__img{width:100%;max-width:62%;align-self:stretch}

/* =========================================================
   FOOTER  (template 3-tier footer)
   ========================================================= */
.footer{background:#000}
/* No bottom padding on purpose: the photo column bottoms out ON .footer__center's
   border-top, so that hairline is the rule the client's screenshot draws under
   the text column. Give the block bottom padding and the image floats off it. */
.footer__top{padding:clamp(50px,5.2vw,92px) 0 0}
.footer__tw{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,36%);
  column-gap:clamp(30px,3.4vw,60px);align-items:stretch}
.footer__ctw{display:flex;flex-direction:column;justify-content:space-between;
  gap:clamp(40px,5vw,80px);padding-bottom:clamp(40px,4.2vw,68px)}
.footer__cta{color:#fff;margin-bottom:0;text-transform:uppercase;
  font-size:clamp(32px,4.8vw,84px);font-weight:600;line-height:100%;letter-spacing:-.02em}
.footer__acts{display:flex;align-items:center;gap:clamp(22px,3vw,44px);flex-wrap:wrap}
.footer__btn{padding:16px 30px;letter-spacing:.08em;text-transform:uppercase}
/* symmetric padding so the label centres against the button's, not 7px above it */
.footer__link{color:#fff;gap:12px;padding:7px 0;letter-spacing:.08em;text-transform:uppercase;
  border-bottom:1px solid #ffffff59;transition:color .3s,border-color .3s}
.footer__link:hover{color:var(--primary);border-bottom-color:var(--primary)}
.footer__ph{position:relative;overflow:hidden;margin:0;background:#141414;
  min-height:clamp(280px,25vw,440px)}
.footer__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 45%;transition:transform 1.1s var(--ease)}
.footer__ph:hover img{transform:scale(1.04)}
.footer__center{border-top:1px solid #fff3;padding-block:40px}
.footer__cw{display:flex;justify-content:space-between;align-items:stretch;gap:40px}
.footer__left{display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.footer__logo{width:100%;max-width:230px;height:auto}
.footer__text{margin-top:15px;font-size:14px;line-height:140%;color:#d9d9d9;max-width:34ch}
.footer__right{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;
  width:100%;max-width:60%}
.footer__col{display:flex;flex-direction:column}
.footer__hd{color:#fff;margin-bottom:12px;font-size:16px;font-weight:500}
.footer__col a{color:#999;padding-block:3px;font-size:14px;line-height:150%;transition:color .3s}
.footer__col a:hover{color:var(--primary)}
.footer__bottom{border-top:1px solid #fff3;padding-block:20px}
.footer__bw{display:flex;justify-content:space-between;align-items:center;gap:40px;
  color:#999;font-size:14px;line-height:150%}
.footer__legal{display:flex;gap:22px;flex-wrap:wrap}
.footer__legal a:hover{color:var(--primary)}

/* =========================================================
   STICKY / MODAL / COOKIE
   ========================================================= */
/* The bottom bar is a ROW now (client request): the booking CTA plus a phone
   button that opens #callModal, because each branch has its own number and a
   single tel: link would have had to pick one. .sticky is the rail; the pill
   styling moved down to .sticky__btn. */
/* --sticky-h is the row's one height (client: the booking button must match the
   phone square). Both children read it, so they cannot drift apart again — the
   button used to take its height from padding alone, which left it ~42px against
   the square's 46px and read as a misalignment. */
.sticky{--sticky-h:46px;
  position:fixed;right:16px;bottom:16px;z-index:100;display:none;
  align-items:center;gap:10px;transform:translateY(140%);
  transition:transform .5s var(--ease-out)}
.sticky.is-on{transform:none}
/* The hairline is what keeps the black pill from vanishing where the bar floats
   over a black surface — the price band and the whole footer (client). #ffffff59
   is the site's existing border-on-black value (.footer__link's underline), not
   a new alpha. box-sizing is border-box everywhere, so the 1px does not push the
   button past the phone square's height. On hover the fill goes gold and the
   border goes with it, or the pill would read as gold inside a white outline. */
.sticky__btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--sticky-h);padding:0 24px;border:1px solid #ffffff59;
  border-radius:var(--r);background:#000;color:#fff;
  font-size:14px;font-weight:500;line-height:130%;
  transition:background-color .3s,border-color .3s}
.sticky__btn:hover{background:var(--primary);border-color:var(--primary)}
.sticky__tel{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:var(--sticky-h);height:var(--sticky-h);padding:0;border:0;border-radius:var(--r);
  background:var(--primary);color:#fff;cursor:pointer;transition:background-color .3s}
.sticky__tel:hover{background:#000}
.sticky__tel svg{width:19px;height:19px;fill:currentColor}

.bmodal{position:fixed;inset:0;z-index:150;display:grid;place-items:center;
  visibility:hidden;opacity:0;transition:opacity .35s var(--ease),visibility .35s}
.bmodal.is-open{visibility:visible;opacity:1}
.bmodal__backdrop{position:absolute;inset:0;background:#0a0a0ab8}
.bmodal__panel{position:relative;width:min(560px,calc(100vw - 28px));background:#fff;
  border-radius:var(--r);padding:clamp(25px,4vw,40px);
  transform:translateY(18px);transition:transform .5s var(--ease-out)}
.bmodal.is-open .bmodal__panel{transform:none}
.bmodal__close{position:absolute;right:14px;top:14px;width:36px;height:36px;
  display:grid;place-items:center;background:none;border:1px solid var(--hair);
  border-radius:var(--r);cursor:pointer;color:#000;transition:background-color .3s,color .3s}
.bmodal__close:hover{background:#000;color:#fff}
.bmodal__title{font-size:28px;font-weight:400;line-height:130%;margin-bottom:12px}
.bmodal .sec-sub{margin-top:12px}
.bmodal__list{border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;margin-top:25px}
.bmodal__item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;
  background:#fff;padding:18px 20px;transition:background-color .3s;box-shadow:0 1px 0 0 var(--hair)}
.bmodal__item:hover{background:var(--wash)}
.bmodal__num{font-size:12px;color:var(--primary);font-weight:600}
.bmodal__name{display:block;color:var(--title);font-weight:500}
.bmodal__addr{display:block;margin-top:3px;font-size:13px;color:var(--muted)}
/* the call modal shows the branch's number in the slot the booking modal gives
   the address — it is the thing being chosen, so it carries the accent */
.bmodal__tel{display:block;margin-top:4px;font-size:16px;font-weight:500;color:var(--primary)}
.bmodal__arrow{color:var(--primary);font-size:17px;transition:transform .4s var(--ease-out)}
.bmodal__item:hover .bmodal__arrow{transform:translateX(5px)}

.cookie{position:fixed;left:16px;bottom:16px;z-index:140;width:min(400px,calc(100vw - 32px));
  background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:20px 22px;
  box-shadow:0 26px 50px -30px #0e0e0e80;transform:translateY(140%);
  transition:transform .6s var(--ease-out),bottom .5s var(--ease-out)}
.cookie.is-on{transform:none}
.cookie[hidden]{display:none}
.cookie__text{font-size:14px;line-height:150%}
.cookie__link{color:var(--primary);text-decoration:underline;text-underline-offset:3px}
.cookie__btns{display:flex;gap:10px;margin-top:14px}
/* Below 991px the cookie card and the bottom bar share the same fixed corner,
   and the card wins on z-index (140 vs 100) — so while the bar is out it lay on
   top of the booking CTA and swallowed every click on it. Lift the card clear of
   the bar's 46px + its offset. Specificity beats the plain .cookie{bottom} rules
   in the responsive blocks below, so this holds wherever it applies. */
@media (max-width:991px){ body.sticky-on .cookie{bottom:74px} }
@media (max-width:767px){ body.sticky-on .cookie{bottom:70px} }

/* =========================================================
   RESPONSIVE  (the template's breakpoints: 991 / 767 / 479)
   ========================================================= */
@media (max-width:1280px){
  .nav{gap:20px}
  .nav a{font-size:13px}
  .panel{gap:40px;padding:50px}
}
@media (max-width:991px){
  h1{font-size:44px}
  .hdr__inner{grid-template-columns:auto 1fr;gap:14px}
  .nav{display:none}
  .brg{display:flex}
  .hdr__side{grid-column:2}
  .hdr__side .btn{display:none}

  .hero{padding-top:50px}
  .hero__wrap{margin-bottom:30px}
  .hero__data{flex-direction:column;align-items:flex-start;gap:20px;margin-top:20px}
  .hero__text{max-width:100%}
  .hero__right{justify-content:flex-start}
  .hero__img img{min-height:480px;max-height:480px}

  .split{flex-direction:column;gap:20px}
  .split__h,.split__t{max-width:100%}
  .cards,.cards--3,.cards--4,.cards--5{grid-template-columns:repeat(2,1fr)}
  .brs>.bc{padding:30px}

  .adv-flow{flex-direction:column;gap:30px}
  .adv-flow__left{position:static;max-width:100%}
  .adv-flow__right{max-width:100%}

  .menu-band{padding-block:60px}
  .menu__group{padding:40px 0 32px}
  .menu__grid{grid-auto-flow:row;grid-template-rows:auto;grid-template-columns:1fr}

  .panel,.panel--3{grid-template-columns:repeat(2,1fr);gap:40px;padding:40px}

  .tm-track{grid-auto-columns:calc((100% - 20px)/2);gap:20px}

  .work__col--down{margin-top:0}
  .work{gap:14px}
  .work__col{gap:14px}


  .band{padding-block:50px}
  .band__wrap{flex-direction:column;align-items:flex-start;gap:30px}
  .band__left,.band__right{max-width:100%}
  .band__sub{padding-right:0;padding-bottom:30px}

  .story{flex-direction:column-reverse;align-items:flex-start}
  .story__left{flex-direction:column-reverse;max-width:100%;gap:25px}
  .story__left>.ph{flex:0 0 auto}
  .story__img{max-width:100%}
  .story__img img{max-height:520px}

  .footer__tw{grid-template-columns:minmax(0,1fr);row-gap:34px}
  .footer__ctw{padding-bottom:0;gap:30px}
  .footer__ph{min-height:min(58vw,320px);margin-bottom:0}
  .footer__cw{flex-direction:column;gap:30px}
  .footer__right{max-width:100%}
  .footer__left{flex-direction:row;justify-content:space-between;align-items:center}

  .sticky{display:flex}
}
@media (max-width:767px){
  h2{font-size:32px}
  .sec-head{gap:10px}
  .blk-h{font-size:24px}
  .cards,.cards--2,.cards--3,.cards--4,.cards--5{grid-template-columns:1fr}
  .cards>*{padding:20px 20px 16px;gap:12px}
  .brs{grid-template-columns:1fr;gap:16px}
  .brs>.bc{padding:26px;gap:12px}

  .stp{column-gap:16px}
  .stp__t{margin-top:10px;font-size:15px}
  .footer__top{padding-top:40px}   /* bottom stays 0 — the photo sits on the divider */
  .footer__center{padding-block:30px}
  .footer__right{flex-wrap:wrap;gap:30px}
  .footer__bw{flex-direction:column;align-items:flex-start;gap:6px}
  .band__form{grid-template-columns:1fr;row-gap:25px}
  .tm-head{flex-direction:column;align-items:flex-start;gap:20px}
  .circle--lg{min-width:48px;max-width:48px;min-height:48px;max-height:48px}
  .tm-track{grid-auto-columns:calc((100% - 14px)/2);gap:14px}
  .tm__img::before{font-size:54px}
  .tbl__row{grid-template-columns:1fr;gap:6px;padding:16px 0}
  .tbl__dur{text-align:left}
  .panel,.panel--3{grid-template-columns:1fr;gap:25px;padding:30px}
  .fact__num{font-size:38px}
  .gcard{padding:28px 28px 30px}
  .gcard__text{font-size:16px}
  .story__info{margin-top:12px;font-size:14px}
  .story__fact{font-size:30px}
  .story__img img{max-height:420px}
  .work{grid-template-columns:repeat(2,1fr);gap:10px}
  .work__col{gap:10px}
  .work__col--down{margin-top:0}
  .work__col .ph,.work__col:not(.work__col--down) .ph{aspect-ratio:3/4}
  .lb{padding:20px;gap:10px}
  .lb__nav{width:42px;height:42px;font-size:17px}
  .lb__x{top:14px;right:14px}
  .menu__cat{margin-bottom:24px}
  .pr{padding:11px 10px;gap:12px}
}
@media (max-width:479px){
  .logo img{max-width:120px}
  h2{font-size:28px}
  h3{font-size:24px}
  h4{font-size:20px}
  .sec-head{gap:8px}
  .footer__right{display:grid;grid-template-columns:1fr 1fr;gap:30px}
  .footer__left{flex-direction:column;align-items:flex-start;gap:16px}
  .tm-track{grid-auto-columns:78%}
  .work{grid-template-columns:1fr}
  .lb{padding:16px}
  .fact__num{font-size:28px}
  .fact--sm .fact__num{font-size:24px}
  .gcard{padding:22px 22px 24px}
  .gcard__g{right:20px;top:22px}
  .gcard__g svg{width:18px;height:18px}
  .band__row{flex-direction:column;align-items:flex-start;gap:2px}
  .cookie{left:10px;right:10px;bottom:10px;width:auto}
  /* the bar's own edge-to-edge step lives in the mobile pass at the end */
  .pr{grid-template-columns:1fr auto;gap:10px}
  .pr__lead{display:none}
}

/* =========================================================
   BARBER ACADEMY (#school) — editorial rebuild
   Lead = heading ‖ paragraph ‖ tall shot with the big numbers
   pinned to the image's bottom edge (the .story device), then
   three numbered sub-blocks. It ran on black for a while; the
   client has since had it returned to white with only the
   booking .band left dark — see the note at the end.
   ========================================================= */

/* ---------- numbered block head ---------- */
.blk-head{display:flex;align-items:baseline;gap:20px;margin:var(--gap-blk) 0 var(--gap-head)}
.blk-head__n{flex:none;font-size:13px;font-weight:600;letter-spacing:.14em;color:var(--primary)}
.blk-head .blk-h{margin:0;flex:0 1 auto;min-width:0}

/* ---------- lead ---------- */
.sch-lead{display:grid;grid-template-columns:minmax(0,31%) minmax(0,1fr) minmax(0,25%);
  column-gap:50px;row-gap:60px;align-items:start}
.sch-lead__h{grid-column:1;grid-row:1;font-size:clamp(28px,2.3vw,40px);font-weight:500;
  line-height:120%;letter-spacing:-.01em;color:var(--title)}
/* client asked for this lead paragraph a step down from the 18px setting */
.sch-lead__t{grid-column:2;grid-row:1;font-size:16px;line-height:170%;color:var(--body)}
.sch-lead__img{grid-column:3;grid-row:1/3;align-self:stretch;min-height:clamp(360px,24vw,520px)}
.sch-lead__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}

/* Big figures on a hairline with a gold cap — shared by the academy
   (bottom-aligned against its photo) and by the franchise investment
   numbers, which replaced the tinted .panel there. */
.figs{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.fig{position:relative;padding-top:22px;border-top:1px solid var(--line)}
.fig::before{content:"";position:absolute;left:0;top:-1px;width:56px;height:2px;background:var(--primary)}
.fig__n{display:block;font-size:clamp(32px,3.2vw,54px);font-weight:600;line-height:100%;
  letter-spacing:-.03em;color:var(--title)}
.figs--lg .fig__n{font-size:clamp(38px,3.8vw,64px)}
.fig__l{display:block;margin-top:10px;font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.fig__note{display:block;margin-top:8px;font-size:13px;line-height:150%;color:var(--muted)}
.sch-stats{grid-column:1/3;grid-row:2;align-self:end}

/* ---------- academy cells: roomier, indexed, accent on hover ---------- */
.cards--sch>*{position:relative;padding:32px 30px 34px;gap:14px}
.cards--sch>*::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--primary);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .45s var(--ease)}
.cards--sch>*:hover::after{transform:none}
.cards--sch .bc__n{font-size:13px}

/* tick and heading share one line (client request), text beneath both */
.cards--sch>.fc{display:grid;grid-template-columns:24px minmax(0,1fr);
  column-gap:14px;row-gap:12px;align-items:center}
.cards--sch .fc__tick{grid-area:1/1;background:var(--primary);border-color:var(--primary)}
.cards--sch .fc__tick::after{border-left-color:#fff;border-bottom-color:#fff}
.cards--sch .fc__h{grid-area:1/2;font-size:20px;line-height:140%}
.cards--sch .fc__t{grid-area:2/2;font-size:15px;line-height:160%}

/* ---------- "Чому обирають" — 5 rows ‖ tall shot (client request) ---------- */
.why{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,34%);gap:60px}
.why-list{border-top:1px solid var(--hair)}
.why-item{display:grid;grid-template-columns:64px minmax(0,30%) minmax(0,1fr);column-gap:30px;
  align-items:baseline;padding:28px 0;border-bottom:1px solid var(--hair);
  transition:background-color .35s var(--ease),padding .35s var(--ease)}
.why-item:hover{background:var(--wash);padding-inline:20px}
.why__n{font-size:13px;font-weight:600;letter-spacing:.12em;color:var(--muted);
  transition:color .35s var(--ease)}
.why-item:hover .why__n{color:var(--primary)}
.why__h{font-size:20px;font-weight:500;line-height:140%;color:var(--title);
  transition:color .35s var(--ease)}
.why-item:hover .why__h{color:var(--primary)}
.why__t{font-size:15px;line-height:165%;color:var(--body)}
.why__img{align-self:stretch;min-height:420px}
.why__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
/* the franchise's "Що ви отримуєте" reuses the same list-left / photo-right
   composition (client request) — the component is token-driven, so it renders
   on white there and on the academy's black here with no extra rules */
.why--fr .why__img img{object-position:50% 50%}

/* ---------- booking band, a step louder ---------- */
/* Both bands are #000 again. The academy band used to be lifted to #0E0E0E to
   sit seamlessly on the dark chapter around it; that chapter is white now, so
   this band is the section's single black plate (client request) and wants the
   full contrast. */
.band__title{font-size:32px}
.band__sub{font-size:16px;line-height:160%;color:#c9c9c9}
.band__left .ph img{max-height:520px}
.band__info{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  margin-top:44px;padding-top:28px;border-top:1px solid #ffffff1f}
.band__row{flex-direction:column;align-items:flex-start;gap:4px}
.band__row span:first-child{color:var(--primary);font-size:12px;
  letter-spacing:.1em;text-transform:uppercase}

@media (max-width:1280px){
  .sch-lead{column-gap:40px}
}
@media (max-width:991px){
  .sch-lead{grid-template-columns:minmax(0,1fr);row-gap:28px}
  .sch-lead__h,.sch-lead__t,.sch-stats,.sch-lead__img{grid-column:1;grid-row:auto}
  .sch-stats{grid-template-columns:repeat(3,1fr)}
  .sch-lead__t{font-size:16px}
  .sch-lead__img{min-height:340px;order:3}
  .sch-stats{order:4;gap:24px;align-self:auto;grid-template-columns:repeat(3,1fr)}
  .blk-head{gap:14px}
  .cards--sch>*{padding:26px 24px 28px}
  .figs{gap:30px}
  .tl{--tl-ind:44px;--tl-gap:20px}
  .tl__h{font-size:18px}
  .tl__t{font-size:16px;line-height:175%}
  .why{grid-template-columns:minmax(0,1fr);gap:30px}
  .why-item{grid-template-columns:44px minmax(0,1fr);column-gap:20px;row-gap:6px;padding:22px 0}
  .why-item:hover{padding-inline:14px}
  .why__n{grid-column:1;grid-row:1}
  .why__h{grid-column:2;grid-row:1;font-size:18px}
  .why__t{grid-column:2;grid-row:2}
  .why__img{min-height:320px}
  .tbl__row{grid-template-columns:44px minmax(0,1fr) auto;gap:4px 20px;padding:20px 0}
  .tbl__n{grid-column:1;grid-row:1}
  .tbl__name{grid-column:2;grid-row:1;font-size:18px}
  .tbl__desc{grid-column:2;grid-row:2}
  .tbl__dur{grid-column:3;grid-row:1;padding:6px 12px}
  .band__title{font-size:28px}
}
@media (max-width:767px){
  .sch-stats{gap:18px}
  .sch-stats .fig{padding-top:16px}
  .sch-stats .fig__l{font-size:11px;letter-spacing:.08em}
  .blk-head{flex-wrap:wrap;gap:6px 14px}
  .why__img{min-height:260px}
  .figs{grid-template-columns:1fr;gap:26px}
  .sch-stats{grid-template-columns:repeat(3,1fr)}   /* the academy's 3 short figures still fit */
  .tl{--tl-ind:34px;--tl-gap:14px}
  .band__info{grid-template-columns:1fr;gap:16px;margin-top:34px}
}
@media (max-width:479px){
  .sch-lead__img{min-height:280px}
  .why-item{grid-template-columns:34px minmax(0,1fr);column-gap:14px;padding:20px 0}
  .why__t{font-size:14px}
  .sch-stats{gap:12px;grid-template-columns:repeat(3,1fr)}
  .sch-stats .fig{padding-top:12px}
  .sch-stats .fig::before{width:32px}
  .sch-stats .fig__n{font-size:30px}
  .sch-stats .fig__l{margin-top:6px;font-size:10px}
  .tbl__row{grid-template-columns:34px minmax(0,1fr);gap:6px 14px;padding:18px 0}
  .tbl__dur{grid-column:2;grid-row:3;justify-self:start;margin-top:6px}
  .tbl__name{font-size:17px}
  .tbl__desc{font-size:14px}
}

/* ---------------------------------------------------------
   The academy ran as a dark chapter for a while; the client has
   since asked for it back on white, with ONLY the "Забронювати
   місце на курсі" band left black. So the section no longer
   redefines any token — it inherits the root palette like every
   other one, and .band supplies the single black plate at the
   end, from its own component rule (#000, same as the franchise).
   Everything inside (.sch-lead, .why, .tbl, .cards--sch, .figs)
   is token-driven and needed no change to come back to light.
   --------------------------------------------------------- */


/* =========================================================
   MOBILE PASS  (client request — phones only, ≤767px)
   =========================================================
   Everything below is deliberately scoped to the template's
   mobile breakpoints and kept in ONE block at the end of the
   file, so the desktop composition above is untouched and this
   pass can be read (or reverted) as a single unit. Nothing here
   changes a token or a component's desktop rule.
   ========================================================= */
@media (max-width:767px){

  /* --- 1. hero booking button spans the screen, and the lead paragraph
     centres under the lockup (client request: centred on phones only —
     desktop and tablet keep the left-hand 35% column) --- */
  .hero__text{text-align:center}
  /* two CTAs now (booking + franchise) — they stack full-width on phones */
  .hero__right{width:100%;flex-direction:column;align-items:stretch;gap:12px}
  .hero__btn{width:100%}

  /* --- 2. price-list booking button spans the screen --- */
  .menu-band__foot{display:block}
  .menu-band__foot .btn{width:100%}

  /* --- 3. gallery: the cards stack over one another as you scroll ---
     The three columns collapse to one flow (display:contents flattens
     them into .work) and every figure becomes position:sticky at the
     same top, so each new card rides up and covers the one before it.
     --i staggers the resting tops by 6px so the stack's edge stays
     readable; the indices are written per column because nth-child
     still counts inside the real DOM parent, not the flattened box
     tree. The images are already absolutely positioned inside .ph, so
     the cards keep their 3:4 box and nothing reflows. */
  .work{display:block;gap:0}
  .work__col{display:contents}
  .work .ph{
    position:sticky;top:calc(90px + var(--i,0) * 6px);
    margin-bottom:16px;
    box-shadow:0 -16px 34px -22px #00000066;
  }
  .work__col:nth-child(1) .ph:nth-child(1){--i:0}
  .work__col:nth-child(1) .ph:nth-child(2){--i:1}
  .work__col:nth-child(2) .ph:nth-child(1){--i:2}
  .work__col:nth-child(2) .ph:nth-child(2){--i:3}
  .work__col:nth-child(2) .ph:nth-child(3){--i:4}
  .work__col:nth-child(3) .ph:nth-child(1){--i:5}
  .work__col:nth-child(3) .ph:nth-child(2){--i:6}

  /* --- 4 + 6. both black booking bands: heading, then photo, then form ---
     .band__right goes display:contents so its own children become items
     of .band__wrap and can be ordered against the photo column. It keeps
     inheriting color:#fff (a contents box is still in the inheritance
     chain), and its [data-reveal] simply no-ops here — no box, no
     opacity to animate, so the content is plainly visible. */
  .band__wrap{align-items:stretch;gap:26px}
  .band__right{display:contents}
  .band__intro{order:1}
  .band__left{order:2}
  .band__form{order:3}
  .band__info{order:4;margin-top:0}
  .band__sub{padding-bottom:0}
  /* submit spans the screen, note above it */
  .ff__foot{flex-direction:column;align-items:stretch;gap:16px}
  .ff__foot .btn{width:100%}
  .fnote{max-width:none}

  /* --- 5. academy lead heading --- */
  .sch-lead__h{font-size:24px}

  /* --- 6. franchise lead heading --- */
  .split__h{font-size:24px}

  /* --- 7. reviews: horizontal scroll, button underneath ---
     The list bleeds to both screen edges and pads itself back to the
     gutter, so the second card peeks in as the swipe affordance; it
     clips its own overflow, so the page still cannot scroll sideways. */
  .gr{display:flex;flex-direction:column}
  .gr__list{
    order:1;display:flex;grid-template-columns:none;
    margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;scroll-padding-left:var(--pad);
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .gr__list::-webkit-scrollbar{display:none}
  .gcard{flex:0 0 85%;scroll-snap-align:start}
  .gcard:hover{transform:none}          /* no lift inside a scroller */
  .gr__act{order:2;justify-content:center;margin:26px 0 0}
  .gr__all{width:100%}

  /* --- 8. about: one photo only, text first --- */
  .story{flex-direction:column}
  .story__left{flex-direction:column}
  .story__left>.ph{display:none}        /* the second interior shot (client request) */

  /* --- 10. the bottom bar spans the gutters: CTA takes the slack,
     the phone button keeps its square --- */
  .sticky{left:var(--pad);right:var(--pad);bottom:12px}
  .sticky__btn{flex:1}

  /* --- 11. branch cards ("Наші локації"): the booking button spans the card
     (client request). .bc__actions is already width:100%, so the button just
     takes the whole row and "Детальніше про філію" keeps the line below it. */
  .bc__book{width:100%}

  /* --- 9. footer: full-width CTA button, everything centred --- */
  .footer__ctw{align-items:center;text-align:center}
  .footer__cta{text-align:center}
  .footer__acts{flex-direction:column;align-items:stretch;width:100%;gap:18px}
  .footer__btn{width:100%}
  .footer__link{justify-content:center}
  .footer__cw{align-items:center;text-align:center}
  .footer__left{flex-direction:column;align-items:center;text-align:center}
  .footer__logo{margin-inline:auto}
  .footer__text{max-width:none}
  .footer__right{justify-content:center;text-align:center}
  .footer__col{align-items:center}
  .footer__bw{align-items:center;text-align:center}
  .footer__legal{justify-content:center}
}
@media (max-width:479px){
  /* the two-column footer grid at this step needs the same centring */
  .footer__left{align-items:center}
  .footer__right{justify-items:center}
}

/* =========================================================
   ПРЕВ'Ю КАДРУ НАД РЯДКОМ ПРАЙСУ (.svcpeek)
   Клієнт дав по одному кадру на позицію прайсу, а сам прайс — текстовий
   список без місця під фото. Кадр не втискаємо в потік: він спливає біля
   курсора над рядком, який має data-shot. Один вузол на сторінку, src
   підставляється на наведення — доти не вантажиться жоден із цих файлів.
   На тачі блок вимкнений повністю, тож мобільний трафік не росте.
   ========================================================= */
.svcpeek{position:fixed;top:0;left:0;z-index:60;width:clamp(160px,14vw,210px);
  aspect-ratio:3/4;margin:0;border-radius:var(--r);overflow:hidden;
  pointer-events:none;background:#141414;box-shadow:0 24px 60px #00000059;
  opacity:0;transform:translate3d(var(--x,0px),var(--y,0px),0) scale(.96);
  transition:opacity .26s var(--ease),transform .26s var(--ease)}
.svcpeek.is-on{opacity:1;transform:translate3d(var(--x,0px),var(--y,0px),0) scale(1)}
.svcpeek img{display:block;width:100%;height:100%;object-fit:cover}
/* Курсор на тачі "наводиться" тапом і превʼю зависає — вимикаємо разом із
   завантаженням кадрів. */
@media (hover:none),(pointer:coarse){.svcpeek{display:none}}
@media (prefers-reduced-motion:reduce){
  .svcpeek{transition:opacity .12s linear;transform:translate3d(var(--x,0px),var(--y,0px),0)}
  .svcpeek.is-on{transform:translate3d(var(--x,0px),var(--y,0px),0)}
}

/* ---------- статус відправки заявки ---------- */
/* Пастка для ботів: поле є в розмітці, але людина його не бачить і не заповнює. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.fstatus{grid-column:1/-1;margin:0;padding:14px 18px;border:1px solid #ffffff26;border-radius:var(--r);
  font-size:14px;line-height:150%;color:#fff;background:#ffffff0d}
.fstatus[hidden]{display:none}
.fstatus--ok{border-color:#c2924e73;background:#c2924e26}
.fstatus--err{border-color:#e0555573;background:#e0555526}
.band__form button[disabled]{opacity:.55;pointer-events:none}