/* =========================================================
   SUBPAGES — branch pages (/filii/*) and the three documents
   (/privacy-policy-ua, /terms, /cookies).

   Loaded ONLY by the subpages, after dictator.css. Everything
   here is built out of the same tokens and the same Barb
   vocabulary as the homepage (.sec-head, .btn, .slink, .ph,
   .mapbox, .tm, .menu-band, hairlines at --hair, radius --r);
   nothing in this file touches a homepage rule, so the front
   page cannot regress from an edit here.

   Breakpoints are the template's: 991 / 767 / 479.
   ========================================================= */

/* The homepage holds the hero clear of the sticky header with its
   own padding; subpages need the same air under .hdr. */
.subpage main{padding-top:0}

/* =========================================================
   PAGE HERO  (.phero) — the homepage hero's device at a
   quieter scale: back link, dotted eyebrow, masked display
   line, then a lead/actions row over a full-bleed photo.
   ========================================================= */
.phero{padding-top:60px;margin-bottom:0}
.phero__back{display:inline-flex;align-items:center;gap:10px;margin-bottom:26px;
  font-size:14px;font-weight:500;color:var(--muted);transition:color .3s,gap .3s var(--ease-out)}
.phero__back span{font-style:normal;line-height:1;transition:transform .4s var(--ease-out)}
.phero__back:hover{color:var(--title)}
.phero__back:hover span{transform:translateX(-4px)}

.phero__eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:14px;
  font-size:14px;line-height:130%;color:var(--body)}

/* One step below the homepage's 180px display: a branch name is a
   heading, not the brand itself. */
.phero__h{text-transform:uppercase;color:var(--title);margin-bottom:0;
  font-size:clamp(34px,6.6vw,92px);font-weight:600;line-height:100%;letter-spacing:-.02em}
.phero__h--doc{font-size:clamp(30px,4.6vw,64px)}

.phero__row{display:flex;justify-content:space-between;align-items:flex-end;
  gap:40px;margin-top:28px;padding-bottom:40px}
.phero__lead{max-width:36%;margin-bottom:0;font-size:16px;line-height:150%}
.phero__acts{display:flex;align-items:center;gap:26px;flex:none}
.phero__btn{padding:16px 34px;font-size:15px;letter-spacing:.02em}

/* Full-bleed, like .hero__img — a sibling of .wrap, not a child — and the same
   parallax window: the frame is a fixed height, the photo is --over taller than
   it, and dictator.js writes --shift in px (0 -> the real overflow) as the frame
   travels the viewport, so the image lags the page. Two things carry over from
   the homepage rule and are load-bearing: the shift is in PIXELS (a % would
   resolve against the image height while --over is a share of the frame's, which
   leaves a sliver at the bottom), and the image is bottom:0 anchored so the
   no-JS fallback (--shift unset -> 0px) still shows the intended crop. */
.phero__img{--over:22%;position:relative;overflow:hidden;width:100%;
  height:clamp(280px,34vw,520px);margin:0}
.phero__img img{position:absolute;left:0;bottom:0;top:auto;width:100%;
  height:calc(100% + var(--over));object-fit:cover;object-position:50% 55%;display:block;
  transform:translate3d(0,var(--shift,0px),0);will-change:transform}
@media (prefers-reduced-motion:reduce){
  .phero__img{--over:0%}
  .phero__img img{transform:none;will-change:auto}
}

/* The document hero has no photo, so it carries its own bottom air. */
.phero--doc{padding-bottom:0}
.phero--doc .wrap{padding-bottom:var(--gap-head)}

/* =========================================================
   BRANCH INFO ROWS (.binfo) — the .band__info device: gold
   uppercase label, value under it.

   Client: this row belongs UNDER THE PHOTO, with no rule. So it
   sits one --gap-head below the image instead of a full --sp — the
   same token that ties a section head to its content, which is the
   relationship being drawn here — and the hairline border-top is
   gone. The photo's own bottom edge is the line now; drawing a
   second one 150px below it made the row look like the start of a
   new section rather than the caption of the one above.
   ========================================================= */
/* The address column is wider than the other three on purpose: at four equal
   columns both branch addresses wrap and leave a single orphan ("…Костомарівська
   / 4", "…Зоряний Бульвар / 1М"). The extra 0.4fr holds each on one line at the
   90px-gutter widths, measured down to 1285px. Between there and the 991px step
   the longer address can still take a second line; the row stacks below that
   anyway, so no width is left looking broken. */
.binfo{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:0 40px;
  margin-top:var(--gap-head)}
/* no padding-top here any more: the 22px existed only to clear the rule that is
   now gone. The stacked breakpoints still draw separators between rows, so they
   put it back on exactly the items that carry one. */
.binfo__k{margin-bottom:10px;font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--primary)}
.binfo__v{margin-bottom:0;font-size:16px;line-height:150%;color:var(--title)}
.binfo__v a{color:var(--title);transition:color .3s}
.binfo__v a:hover{color:var(--primary)}

/* Client: two lines, not three. The measure is what sets the break, so this is
   deliberately wider than the 62ch it used to carry — one lead sentence can run
   past the usual comfortable measure, a paragraph of them could not. Verified
   to hold at 2 lines from the 991px step up to 1920px. */
.binfo__desc{max-width:min(100%,1080px);margin:var(--gap-head) 0 0;
  font-size:18px;line-height:170%}

/* =========================================================
   BRANCH GALLERY (.bgal) — three .ph figures, the homepage's
   own component, in a plain even row (no stagger: the client
   had that removed from #gallery too).
   ========================================================= */
.bgal{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.bgal .ph{position:relative;overflow:hidden;aspect-ratio:3/4;border-radius:var(--r);margin:0}
.bgal .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1);transition:filter .6s var(--ease),transform .8s var(--ease)}
.bgal .ph:hover img{filter:grayscale(0);transform:scale(1.03)}

/* The address is the map's caption, so it owns the whole gap between the section
   head and the frame. .mapbox carries a 30px margin-top of its own on the
   homepage (where it sits inside a branch card with no caption above it); left
   in place here it collapses against this margin and makes the pair read as two
   loose blocks instead of a caption and its map. */
.bmap__addr{margin:0 0 24px;font-size:16px;line-height:150%;color:var(--title)}
.subpage .mapbox{margin-top:0}

/* =========================================================
   BRANCH TEAM (.bteam) — the .tm card, three across, static
   (no slider: three cards do not need a track).

   On phones it becomes the homepage's masters slider instead — see the
   ≤767px block at the end of this file. The arrows exist in the markup at
   every width but only show there.
   ========================================================= */
.bteam{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.bteam-nav{display:none}

/* =========================================================
   PRICE BAND on a subpage.

   The white gap above the plate stays a full --sp like every other seam — the
   band's own padding is NOT a substitute for it. Those are two different spaces
   with a hard black edge between them, and closing the white one puts the team
   names right up against that edge.

   What does change is the inset: on the homepage the band butts straight up
   against the hero photo, so 80px is all it needs. Here it is an isolated plate
   in the middle of a white page, and 80px inside a full-bleed black block reads
   tight against the 90px side gutters. It steps with the page instead.

   There is no .bcta ("Онлайн запис") plate under it any more — the client had it
   removed as a duplicate of the footer CTA, so the band is the last block before
   the footer. Its --sp margin-bottom goes too (client): the band's black and the
   footer's black now meet with no white strip between them, the way the hero and
   the price band meet on the homepage. The band's own bottom padding is what
   keeps the button clear of the footer's headline.
   ========================================================= */
.subpage .menu-band{padding-block:clamp(70px,7vw,110px);margin-bottom:0}

/* =========================================================
   DOCUMENTS (.doc) — sticky contents left, prose right. The
   sticky-lead-beside-a-column idea is the .adv-flow device;
   a legal page is exactly the case it was built for.
   ========================================================= */
.doc{display:grid;grid-template-columns:30% 1fr;gap:clamp(40px,6vw,110px);align-items:start}
.doc__aside{position:sticky;top:120px}
.doc__toc{display:flex;flex-direction:column;border-top:1px solid var(--hair)}
.doc__toch{padding:18px 0 12px;font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--primary)}
.doc__toc a{padding:11px 0;border-top:1px solid var(--hair);
  font-size:15px;line-height:140%;color:var(--body);transition:color .3s,padding-left .3s var(--ease-out)}
.doc__toc a:hover{color:var(--title);padding-left:8px}
.doc__upd{margin:26px 0 0;font-size:13px;line-height:150%;color:var(--muted)}

.doc__sec{scroll-margin-top:120px}
.doc__sec + .doc__sec{margin-top:clamp(38px,3.6vw,58px);
  padding-top:clamp(38px,3.6vw,58px);border-top:1px solid var(--hair)}
/* the gold cap the section rules carry elsewhere on the site */
.doc__sec + .doc__sec{position:relative}
.doc__sec + .doc__sec::before{content:"";position:absolute;top:-1px;left:0;
  width:56px;height:1px;background:var(--primary)}
.doc__h{margin-bottom:18px;font-size:clamp(20px,1.9vw,28px);font-weight:500;
  line-height:130%;color:var(--title)}
.doc__h3{margin:28px 0 10px;font-size:18px;font-weight:500;line-height:140%;color:var(--title)}
.doc__p{margin-bottom:16px;font-size:17px;line-height:180%}
.doc__p:last-child{margin-bottom:0}
.doc__p a{color:var(--primary);text-decoration:underline;text-underline-offset:3px}

/* list rows as hairlines — the .why-item / .tl vocabulary, so the
   documents read as part of the same system as the franchise lists */
.doc__list{list-style:none;margin:6px 0 16px;padding:0;border-top:1px solid var(--hair)}
.doc__list li{position:relative;padding:13px 0 13px 26px;border-bottom:1px solid var(--hair);
  font-size:16px;line-height:160%}
.doc__list li::before{content:"";position:absolute;left:0;top:23px;
  width:6px;height:6px;border-radius:50%;background:var(--primary)}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1280px){
  .phero__lead{max-width:44%}
}
@media (max-width:991px){
  .phero{padding-top:50px}
  .phero__row{flex-direction:column;align-items:flex-start;gap:22px}
  .phero__lead{max-width:100%}
  .binfo{grid-template-columns:repeat(2,1fr);gap:0 30px}
  .binfo__i:nth-child(n+3){margin-top:26px;padding-top:22px;border-top:1px solid var(--hair)}
  .binfo__desc{font-size:16px}
  .bgal{grid-template-columns:1fr 1fr;gap:16px}
  .bgal .ph:nth-child(3){display:none}   /* two clean columns beat an orphan */
  .bteam{grid-template-columns:1fr 1fr;gap:16px}

  /* the sticky contents column stops paying for itself once it is
     a full-width block above the prose */
  .doc{grid-template-columns:1fr;gap:34px}
  .doc__aside{position:static}
}
@media (max-width:767px){
  /* a shallower frame wants a shallower drift, or the crop swings too far
     across a short scroll and the photo reads as sliding rather than lagging */
  .phero__img{--over:12%;height:clamp(220px,52vw,320px)}
  .phero__acts{width:100%;flex-direction:column;align-items:stretch;gap:18px}
  .phero__btn{width:100%}
  .phero__acts .slink{justify-content:center}
  .binfo{grid-template-columns:1fr}
  .binfo__i:nth-child(n+2){margin-top:22px;padding-top:22px;border-top:1px solid var(--hair)}
  .bgal{grid-template-columns:1fr}
  .bgal .ph:nth-child(3){display:block}
  .doc__p{font-size:16px}

  /* =======================================================
     TEAM BLOCK ON PHONES — the homepage's #masters, one to one.

     Client: "блок команди реалізуй як на головній один в один". Below 768px
     the three stacked full-width cards become the same snapping track the
     homepage uses, under the same head arrangement.

     Head: .sec-head is heading -> rule -> dotted label. The masters head is
     the reverse — small dotted label first, heading under it, NO rule, arrows
     below. Reordering with `order` rather than editing the markup keeps the
     desktop head exactly as it was (it is still a plain .sec-head there).

     Track: .tm-track's own values, verbatim — 2-up at 14px gap here, 78% at
     the 479 step, proximity snapping, scrollbar hidden. Two differences are
     forced by position, not by choice: .tm-track is a sibling of .wrap and
     bleeds by living outside it, while .bteam is inside one, so it bleeds with
     the negative-margin + matching-padding pair (#reviews does the same); and
     grid-template-columns has to be reset, or the 991px rule above would leave
     two explicit columns for the items to fill before any auto-flow happens.
     ======================================================= */
  .bteam-head{gap:14px}
  .bteam-head .sec-sub{order:1}
  .bteam-head .sec-rule{display:none}
  /* .tm-head__h's own scale, not h2's: between 480 and 767 the section h2 is
     32px while the masters heading is still 28px, and .sec-h carries no
     negative tracking. The 14px gap above plus this rule's 6px below reproduce
     the homepage's 14px eyebrow margin and 20px gap before the arrows exactly —
     both heads measure 131px tall at 390px. */
  .bteam-head .sec-h{order:2;font-size:clamp(28px,3vw,44px);
    line-height:120%;letter-spacing:-.01em}
  .bteam-head .bteam-nav{order:3;display:flex;margin-top:6px}

  .bteam{
    display:grid;grid-template-columns:none;grid-auto-flow:column;
    grid-auto-columns:calc((100% - 14px)/2);
    gap:14px;
    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;
  }
  .bteam::-webkit-scrollbar{display:none}
}
@media (max-width:479px){
  .bteam{grid-auto-columns:78%}
}