/* ============================================================
   WORKPLACE — Kyiv coworking
   Hard brutalist / Swiss editorial. Acid lime accent.

   DESIGN SYSTEM
   Spacing   4px base scale, 3xs…4xl. No raw pixel spacing below.
   Rhythm    One fluid --section-y drives every section; --stack-*
             drives heading→content and text→button distances.
   Type      Five body steps + display/heading tokens. Tracking,
             line-height and measure are all tokenised, so uppercase
             micro-type is consistent everywhere it appears.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Core palette */
  --ink:#0A0A0A;
  --ink-80:#2E2E2C;
  --bone:#F2F0EB;
  --bone-dim:#E4E1D9;
  --paper:#FFFFFF;
  --lime:#C8FF00;
  --lime-dark:#A8D900;
  --concrete:#8A8781;
  --hair:#0A0A0A;

  /* Semantic */
  --bg:var(--bone);
  --fg:var(--ink);
  --muted-fg:#5B5954;
  --rule:rgba(10,10,10,.16);
  --rule-strong:rgba(10,10,10,.85);
  --on-dark:rgba(242,240,235,.78);
  --on-dark-mute:rgba(242,240,235,.6);
  --rule-dark:rgba(242,240,235,.2);

  /* ---- Spacing: 4px base. Every spacing value maps to a step. ---- */
  --space-3xs:4px;
  --space-2xs:8px;
  --space-xs:12px;
  --space-sm:16px;
  --space-md:24px;
  --space-lg:32px;
  --space-xl:48px;
  --space-2xl:64px;
  --space-3xl:96px;
  --space-4xl:128px;

  /* ---- Vertical rhythm ---- */
  --section-y:clamp(64px,8.5vw,var(--space-4xl)); /* section padding-block */
  --stack-xl:clamp(32px,4vw,var(--space-xl));     /* chapter rule → content */
  --stack-lg:clamp(24px,2.6vw,var(--space-lg));   /* heading → content     */
  --stack-md:var(--space-md);                     /* text → button         */
  --stack-sm:var(--space-sm);                     /* label → value         */

  /* ---- Page grid ---- */
  --gutter:clamp(var(--space-sm),3.2vw,var(--space-xl));
  --header-clear:120px; /* utility bar + header height, for the mobile menu */
  --maxw:1680px;
  --panel-pad:clamp(24px,3.2vw,var(--space-xl));  /* inside bordered panels */

  /* ---- Type families ---- */
  --font-display:'Unbounded',ui-sans-serif,system-ui,sans-serif;
  --font-body:'Inter Tight','Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;

  /* ---- Type scale ----
     The headline sits on one line, so its size is whatever makes the
     longest string fit the gutters. English runs wider than Ukrainian,
     so it gets its own coefficient (html[lang="en"] below). */
  --fs-display:min(5.4vw,6rem);
  --fs-h2:clamp(1.65rem,4.2vw,3.75rem);
  --fs-h3:clamp(1.15rem,1.5vw,1.5rem);
  --fs-lead:clamp(1.05rem,1.55vw,1.5rem);
  --fs-body:clamp(1rem,1.05vw,1.0625rem);
  --fs-small:.875rem;    /* dense card body            */
  --fs-caption:.8125rem; /* helper text, errors        */
  --fs-label:.75rem;     /* uppercase micro-type       */
  --fs-label-sm:.6875rem;/* uppercase in tight columns */

  /* ---- Tracking ---- */
  --track-caps:.14em;       /* all uppercase micro-type */
  --track-caps-tight:.08em; /* uppercase in tight columns */
  --track-display:-.03em;
  --track-tight:-.02em;
  --track-num:-.04em;

  /* ---- Line height ---- */
  --lh-display:.92;      /* single-line hero only */
  --lh-display-multi:1.02; /* display headings that wrap */
  --lh-tight:1.15;
  --lh-snug:1.3;
  --lh-body:1.5;
  --lh-relaxed:1.6;

  /* ---- Measure (line length) ---- */
  --measure-xs:22ch;
  --measure-sm:32ch;
  --measure-md:40ch;
  --measure-lg:58ch;

  --dur-fast:150ms;
  --dur:240ms;
  --ease:cubic-bezier(.2,.7,.3,1);
}

html[lang="en"]{--fs-display:min(4.9vw,5.4rem)}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
p{text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
svg{display:block}
/* Ink by default: lime on the bone ground is only ~1.05:1 and effectively
   invisible. Dark surfaces flip it back to lime. */
:focus-visible{
  outline:3px solid var(--ink);
  outline-offset:3px;
}
.utility :focus-visible,
.mobile-nav :focus-visible,
.footer :focus-visible,
.book :focus-visible,
.blk-ink :focus-visible,
.plan--ink :focus-visible,
.marquee--ink :focus-visible{outline-color:var(--lime)}
.skip-link:focus-visible{outline-color:var(--lime)}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:fixed;top:var(--space-2xs);left:var(--space-2xs);z-index:200;
  background:var(--ink);color:var(--lime);
  padding:var(--space-xs) var(--space-md);
  font-weight:600;letter-spacing:var(--track-caps);
  text-transform:uppercase;font-size:var(--fs-label);
  transform:translateY(-200%);
}
.skip-link:focus-visible{transform:none}

/* ---------- 3. PRIMITIVES ---------- */
.wrap{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--gutter);
}
.wrap-full{width:100%;padding-inline:var(--gutter)}

.label{
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:var(--track-caps);
  text-transform:uppercase;
  line-height:1;
}
.display{
  font-family:var(--font-display);
  font-weight:700;
  line-height:var(--lh-display);
  letter-spacing:var(--track-display);
  text-transform:uppercase;
  text-wrap:balance;
}
.lead{
  font-size:var(--fs-lead);
  line-height:var(--lh-snug);
  letter-spacing:var(--track-tight);
  max-width:var(--measure-sm);
  text-wrap:pretty;
}

/* Section chapter head: 01 ————————— Title */
.chapter{
  display:flex;align-items:baseline;gap:var(--space-md);
  border-top:1px solid var(--rule-strong);
  padding-top:var(--space-sm);
  margin-bottom:var(--stack-xl);
}
.chapter__num{
  font-family:var(--font-display);font-weight:600;
  font-size:var(--fs-label);letter-spacing:var(--track-caps);
  line-height:1;
}
.chapter__title{flex:1;text-align:center}
.chapter__meta{text-align:right;color:var(--muted-fg)}
@media (max-width:720px){
  .chapter__title{text-align:left}
  .chapter__meta{display:none}
}

/* One rhythm token drives every section. The modifiers exist because
   consecutive sections must not stack two full paddings. */
.section{padding-block:var(--section-y)}
.section--flush-top{padding-top:0}
.section--flush-bottom{padding-bottom:0}

/* Statement heading that opens a section, sized below the hero display. */
.section__statement{
  font-size:var(--fs-h2);
  line-height:var(--lh-display-multi);
  max-width:24ch;
  margin-bottom:var(--stack-lg);
}
/* Inside gap-driven panels the heading's own margin would double the gap. */
.loc__info .section__statement,
.book__aside .section__statement{margin-bottom:0}

/* Buttons */
.btn{
  --btn-bg:var(--ink);--btn-fg:var(--paper);
  display:inline-flex;align-items:center;justify-content:space-between;
  gap:var(--space-lg);
  min-height:56px;padding:var(--space-sm) var(--space-md);
  background:var(--btn-bg);color:var(--btn-fg);
  font-size:var(--fs-label);font-weight:600;
  letter-spacing:var(--track-caps);text-transform:uppercase;
  line-height:1;
  border:1px solid var(--ink);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur-fast) var(--ease);
  cursor:pointer;
}
.btn .arw{transition:transform var(--dur) var(--ease)}
.btn:hover{--btn-bg:var(--lime);--btn-fg:var(--ink)}
.btn:hover .arw{transform:translate(4px,4px)}
.btn:active{transform:translateY(1px)}
.btn--lime{--btn-bg:var(--lime);--btn-fg:var(--ink)}
.btn--lime:hover{--btn-bg:var(--ink);--btn-fg:var(--lime)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink)}
.btn--block{display:flex;width:100%}

.arw{width:18px;height:18px;flex:none}

/* Inline text link that carries an underline */
.link-u{
  text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px;
}

/* Blocks */
.blk-lime{background:var(--lime);color:var(--ink)}
.blk-ink{background:var(--ink);color:var(--bone)}
.blk-bone{background:var(--bone-dim);color:var(--ink)}

/* ---------- 4. TOP UTILITY BAR ---------- */
.utility{
  background:var(--ink);color:var(--bone);
  font-size:var(--fs-label);
  position:relative;z-index:60;
}
.utility__in{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-md);min-height:44px;
}
.utility a{display:inline-flex;align-items:center;min-height:44px}
.utility a:hover{color:var(--lime)}
.utility__links{display:flex;gap:var(--space-md);align-items:center}
@media (max-width:900px){.utility__links .u-hide{display:none}}

/* Language toggle */
.lang{display:flex;border:1px solid rgba(242,240,235,.35)}
.lang__btn{
  min-width:48px;min-height:32px;padding:var(--space-2xs) var(--space-xs);
  font-size:var(--fs-label);font-weight:600;
  letter-spacing:var(--track-caps-tight);line-height:1;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.lang__btn[aria-pressed="true"]{background:var(--lime);color:var(--ink)}
.lang__btn:hover[aria-pressed="false"]{background:rgba(242,240,235,.16)}

/* ---------- 5. HEADER ---------- */
.header{
  position:sticky;top:0;z-index:50;
  background:var(--bone);
  border-bottom:1px solid var(--rule-strong);
  transition:transform 400ms var(--ease);
}
.header--hidden{transform:translateY(-101%)}
.header__in{
  display:flex;align-items:center;gap:var(--space-xl);
  min-height:72px;
}
.brand{display:flex;align-items:center;flex:none;min-height:44px;padding-block:var(--space-2xs)}
.brand img{width:clamp(140px,14vw,190px);height:auto}
.nav{display:flex;gap:var(--space-lg);flex:1}
.nav a{
  position:relative;display:inline-flex;align-items:center;
  font-size:var(--fs-label);font-weight:600;
  letter-spacing:var(--track-caps);text-transform:uppercase;
  min-height:44px;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:var(--space-xs);height:2px;
  background:var(--ink);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur) var(--ease);
}
.nav a:hover::after,.nav a[aria-current="true"]::after{transform:scaleX(1)}
.header__cta{flex:none}
.header__cta .btn{min-height:52px}
@media (max-width:1080px){
  .nav{display:none}
  .header__in{justify-content:space-between}
}
@media (max-width:560px){
  .header__cta .btn{gap:var(--space-sm);padding-inline:var(--space-sm)}
  .header__cta .btn span{display:none}
}
@media (max-width:400px){
  /* Brand + CTA + burger stop fitting on a wide gap below ~360px. */
  .header__in{gap:var(--space-sm)}
  .brand img{width:118px}
}

/* Mobile menu */
.burger{
  display:none;flex:none;width:48px;height:48px;
  align-items:center;justify-content:center;
  border:1px solid var(--ink);
  transition:background var(--dur-fast) var(--ease);
}
.burger:hover{background:var(--lime)}
.burger span{display:block;width:20px;height:2px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink);
  transition:transform var(--dur) var(--ease);
}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1080px){.burger{display:flex}}

.mobile-nav{
  position:fixed;inset:0;z-index:45;
  background:var(--ink);color:var(--bone);
  padding:var(--header-clear) var(--gutter) var(--space-2xl);
  display:flex;flex-direction:column;
  transform:translateY(-100%);
  transition:transform 420ms var(--ease);
  overflow-y:auto;
}
.mobile-nav[data-open="true"]{transform:none}
.mobile-nav a{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.6rem,7vw,2.6rem);text-transform:uppercase;
  letter-spacing:var(--track-tight);line-height:var(--lh-tight);
  border-bottom:1px solid var(--rule-dark);
  padding-block:var(--space-sm);
  transition:color var(--dur) var(--ease),padding-left var(--dur) var(--ease);
}
.mobile-nav a:hover{color:var(--lime);padding-left:var(--space-xs)}

/* ---------- 6. HERO ---------- */
.hero{border-bottom:1px solid var(--rule-strong)}
/* Full-bleed lime stripe; the label inside still holds the page grid. */
.hero__stripe{border-bottom:1px solid var(--rule-strong)}
.hero__stripe .wrap{
  display:flex;align-items:center;
  min-height:clamp(52px,5.5vw,88px);
}
.hero__stripe small{
  font-size:var(--fs-label);font-weight:600;
  letter-spacing:var(--track-caps);text-transform:uppercase;line-height:1;
}
.hero__top{padding-block:clamp(var(--space-lg),5.5vw,var(--space-3xl))}
/* The square marker hangs at the grid edge; the text is deliberately
   indented off it, matching the reference's editorial device. */
.hero__eyebrow{
  display:flex;gap:var(--space-sm);align-items:flex-start;
  margin-bottom:var(--stack-lg);max-width:var(--measure-md);
  font-size:var(--fs-body);
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
  line-height:var(--lh-snug);
  text-wrap:pretty;
}
.hero__eyebrow i{
  width:9px;height:9px;background:var(--ink);flex:none;
  margin-top:.45em;font-style:normal;
}
.hero h1{font-size:var(--fs-display);white-space:nowrap}
@media (max-width:860px){
  .hero__eyebrow{margin-bottom:var(--space-sm)}
}

/* Hero block row — 4 panels like the reference */
.hero__band{
  display:grid;
  grid-template-columns:1fr 1.6fr .85fr .6fr;
  min-height:clamp(280px,38vw,520px);
}
.hero__band>*{position:relative;overflow:hidden}
.hero__band figure{margin:0;height:100%}
.hero__band figure img{width:100%;height:100%;object-fit:cover}
.hero__note{
  padding:var(--space-md);
  display:flex;align-items:flex-start;
}
.hero__note p{
  font-size:var(--fs-lead);line-height:var(--lh-snug);
  letter-spacing:var(--track-tight);max-width:var(--measure-xs);
}
.hero__arrow{display:flex;align-items:flex-end;justify-content:flex-end;padding:var(--space-md)}
.hero__arrow svg{width:clamp(32px,4vw,56px);height:auto}
.hero__arrow--tl{align-items:flex-start;justify-content:flex-start}
@media (max-width:960px){
  /* Four columns leave a dead half-cell here, so the decorative block goes
     and the photo takes the full width above the message and the arrow. */
  .hero__band{grid-template-columns:1.7fr 1fr;grid-auto-rows:auto;min-height:0}
  .hero__band>.blk-bone{display:none}
  .hero__band figure{grid-column:span 2;order:-1;height:clamp(220px,44vw,420px)}
  .hero__band .hero__note{min-height:0}
  .hero__band .hero__arrow{min-height:110px}
}

/* ---------- 7. MARQUEE ---------- */
.marquee{
  border-block:1px solid var(--rule-strong);
  overflow:hidden;padding-block:clamp(12px,1.4vw,var(--space-md));
  background:var(--bone);
}
.marquee--ink{background:var(--ink);color:var(--lime);border-color:var(--ink)}
.marquee__track{
  display:flex;width:max-content;gap:0;
  will-change:transform;
}
.marquee__track span{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2rem,6.5vw,6rem);line-height:1;
  letter-spacing:var(--track-display);text-transform:uppercase;
  padding-inline:.28em;white-space:nowrap;
}
.marquee__track i{
  align-self:center;width:.22em;height:.22em;background:currentColor;flex:none;
  font-size:clamp(2rem,6.5vw,6rem);
}

/* ---------- 8. INTRO / STATS ---------- */
.intro{display:grid;grid-template-columns:1fr 1fr}
.intro__text{
  /* Aligns to the page grid, not to an arbitrary panel inset, so the lead
     sits on the same line as every section heading. max() keeps it correct
     once the viewport passes --maxw and .wrap starts centring. */
  padding-inline-start:max(var(--gutter),calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  padding-inline-end:var(--gutter);
  padding-block:clamp(32px,4vw,var(--space-3xl));
  display:flex;flex-direction:column;justify-content:center;
  gap:var(--stack-md);align-items:flex-start;
}
.intro figure{margin:0;min-height:clamp(280px,40vw,620px);overflow:hidden}
.intro figure img{width:100%;height:100%;object-fit:cover;min-height:inherit}
@media (max-width:860px){
  .intro{grid-template-columns:1fr}
  .intro__text{padding-inline:var(--gutter)}
}

.stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--rule-strong);
}
.stat{
  padding:var(--space-lg) var(--space-md);
  border-right:1px solid var(--rule);
}
/* Outer cells drop their outer padding so the first figure aligns to the
   page grid and the last one closes flush on it. */
.stat:first-child{padding-left:0}
.stat:last-child{padding-right:0;border-right:0}
.stat__num{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.6rem,3.2vw,3.4rem);line-height:1;
  letter-spacing:var(--track-num);
  display:flex;align-items:baseline;gap:2px;
  white-space:nowrap;
}
.stat__label{
  margin-top:var(--space-xs);color:var(--muted-fg);
  max-width:20ch;font-size:var(--fs-small);line-height:var(--lh-snug);
}
@media (max-width:1024px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{border-right:1px solid var(--rule)}
  .stat:nth-child(2n+1){padding-left:0}
  .stat:nth-child(2n){padding-right:0;border-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--rule)}
}

/* ---------- 9. AMENITIES ---------- */
.amenities{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--bone);
}
.amenity{
  background:var(--bone);padding:var(--space-md);
  box-shadow:0 0 0 1px var(--rule-strong);
  display:flex;flex-direction:column;gap:var(--space-xs);min-height:170px;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.amenity:hover{background:var(--lime)}
.amenity svg{
  width:26px;height:26px;margin-bottom:var(--space-3xs);
  stroke:currentColor;stroke-width:1.4;fill:none;
  stroke-linecap:square;stroke-linejoin:miter;
}
.amenity h3{
  font-size:var(--fs-body);font-weight:600;
  letter-spacing:var(--track-tight);line-height:var(--lh-tight);
}
.amenity p{font-size:var(--fs-small);color:var(--muted-fg);line-height:var(--lh-snug)}
.amenity:hover p{color:var(--ink-80)}
@media (max-width:1080px){.amenities{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.amenities{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.amenities{grid-template-columns:1fr}}

/* ---------- 10. PHOTO BAND ---------- */
.band{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:1px;background:var(--rule-strong)}
.band figure{
  margin:0;position:relative;overflow:hidden;background:var(--bone);
  height:clamp(240px,30vw,520px);
}
.band figure img{width:100%;height:100%;object-fit:cover;transform-origin:center;transition:transform 900ms var(--ease)}
.band figure:hover img{transform:scale(1.05)}
.band figcaption{
  position:absolute;left:0;bottom:0;
  background:var(--ink);color:var(--bone);
  padding:var(--space-2xs) var(--space-sm);
  font-size:var(--fs-label);font-weight:600;line-height:1;
  letter-spacing:var(--track-caps);text-transform:uppercase;
}
@media (max-width:760px){.band{grid-template-columns:1fr 1fr}.band figure:first-child{grid-column:span 2}}

/* ---------- 11. PRICING ---------- */
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--bone)}
.plan{
  background:var(--bone);padding:var(--space-md);
  display:flex;flex-direction:column;gap:var(--space-sm);
  box-shadow:0 0 0 1px var(--rule-strong);
}
.plan--lime{background:var(--lime)}
.plan--ink{background:var(--ink);color:var(--bone)}
.plan--ink .plan__feat li{color:var(--on-dark)}
.plan--ink .btn{--btn-bg:var(--lime);--btn-fg:var(--ink);border-color:var(--lime)}
.plan--ink .btn:hover{--btn-bg:var(--bone);--btn-fg:var(--ink);border-color:var(--bone)}
.plan--ink .plan__hr{border-color:rgba(242,240,235,.3)}
.plan__head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-xs)}
.plan h3{
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-h3);
  text-transform:uppercase;letter-spacing:var(--track-tight);line-height:var(--lh-tight);
}
.plan__seats{
  border:1px solid currentColor;border-radius:999px;
  padding:var(--space-3xs) var(--space-2xs);
  font-size:var(--fs-label-sm);font-weight:600;line-height:1;white-space:nowrap;
  display:flex;align-items:center;gap:var(--space-3xs);
}
.plan__seats svg{width:12px;height:12px;stroke:currentColor;stroke-width:1.6;fill:none}
.plan__desc{
  font-size:var(--fs-small);line-height:var(--lh-snug);
  color:var(--muted-fg);
}
@media (min-width:621px){
  .plan h3{min-height:calc(2 * var(--lh-tight) * 1em)}
  .plan__desc{min-height:3.9em}
}
.plan--ink .plan__desc{color:var(--on-dark)}
.plan--lime .plan__desc{color:var(--ink-80)}
.plan__price{padding-top:var(--space-md)}
.plan__from{
  font-size:var(--fs-label-sm);font-weight:600;line-height:1;
  letter-spacing:var(--track-caps);text-transform:uppercase;
  display:block;margin-bottom:var(--space-2xs);
}
/* Price and its VAT note share a baseline. */
.plan__amount{display:flex;align-items:baseline;gap:var(--space-2xs);flex-wrap:wrap}
/* Deliberately NOT the .label treatment. Uppercase + 600 + wide tracking
   is how this site marks emphasis, so a footnote wearing it competes with
   the price. Lowercase, regular weight, no tracking makes it recede. */
.plan__vat{
  font-size:var(--fs-label-sm);font-weight:400;line-height:1;
  letter-spacing:0;text-transform:none;
  color:var(--muted-fg);white-space:nowrap;
}
.plan--ink .plan__vat{color:var(--on-dark-mute)}
.plan--lime .plan__vat{color:var(--ink-80)}
.plan__price b{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.35rem,2vw,2.05rem);
  letter-spacing:var(--track-num);line-height:1;
  display:block;white-space:nowrap;
  /* Reserve the numeric line box so the word-based tier keeps the
     button and feature rows on the same line as its siblings. */
  min-height:clamp(1.35rem,2vw,2.05rem);
}
.plan__price b.is-word{
  font-size:clamp(1.05rem,1.4vw,1.45rem);white-space:normal;
}
.plan__price > small{
  font-size:var(--fs-caption);color:var(--muted-fg);
  display:block;margin-top:var(--space-2xs);line-height:var(--lh-snug);
}
.plan--ink .plan__price > small{color:var(--on-dark-mute)}
.plan--lime .plan__price > small{color:var(--ink-80)}
.plan__hr{border:0;border-top:1px solid var(--rule);margin:var(--space-sm) 0 0}
.plan .btn{
  gap:var(--space-2xs);padding:var(--space-sm) var(--space-xs);
  letter-spacing:var(--track-caps-tight);font-size:var(--fs-label-sm);
  min-height:52px;
}
.plan .btn .arw{width:15px;height:15px}
.plan__feat{display:flex;flex-direction:column;gap:var(--space-2xs);font-size:var(--fs-caption)}
.plan__feat li{display:flex;gap:var(--space-2xs);align-items:flex-start;color:var(--muted-fg);line-height:var(--lh-snug)}
.plan--lime .plan__feat li{color:var(--ink-80)}
.plan__feat svg{width:13px;height:13px;flex:none;margin-top:.28em;stroke:currentColor;stroke-width:2;fill:none}
@media (max-width:1200px){.plans{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.plans{grid-template-columns:1fr}}

/* ---------- 12. LOCATION ---------- */
.loc{display:grid;grid-template-columns:1fr 1.15fr;border:1px solid var(--rule-strong)}
.loc__info{
  padding:var(--panel-pad);
  display:flex;flex-direction:column;gap:var(--stack-lg);
}
.loc__list{display:flex;flex-direction:column;gap:var(--space-md)}

/* Location tabs. Geometry mirrors .loc__row exactly so the number column
   stays on the same grid line as the Години / Контакти labels below. */
.loc__sites{display:flex;flex-direction:column;gap:var(--space-md)}
.loc__site{
  display:grid;grid-template-columns:120px 1fr;gap:var(--space-sm);
  width:100%;text-align:left;
  border-top:1px solid var(--rule);padding-top:var(--space-xs);
  color:inherit;cursor:pointer;
  transition:color var(--dur) var(--ease);
}
.loc__site-num{
  color:var(--muted-fg);font-size:var(--fs-label);font-weight:600;
  letter-spacing:var(--track-caps);text-transform:uppercase;
  line-height:1;padding-top:.35em;
}
/* Padding and negative margin cancel out, so the lime chip bleeds around
   the digits without moving them off the column. */
.loc__site-num b{
  font-weight:600;display:inline-block;
  padding:var(--space-3xs) 6px;margin:calc(var(--space-3xs) * -1) -6px;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.loc__site-body{font-size:var(--fs-body);line-height:var(--lh-snug)}
.loc__site:hover .loc__site-num{color:var(--ink)}
.loc__site[aria-selected="true"] .loc__site-num{color:var(--ink)}
.loc__site[aria-selected="true"] .loc__site-num b{background:var(--lime)}
.loc__site[aria-selected="true"] .loc__site-body{font-weight:500}
.loc__row{
  display:grid;grid-template-columns:120px 1fr;gap:var(--space-sm);
  border-top:1px solid var(--rule);padding-top:var(--space-xs);
}
.loc__row dt{
  color:var(--muted-fg);font-size:var(--fs-label);font-weight:600;
  letter-spacing:var(--track-caps);text-transform:uppercase;
  line-height:1;padding-top:.35em;
}
.loc__row dd{margin:0;font-size:var(--fs-body);line-height:var(--lh-snug)}
.loc__row dd a{display:inline-flex;align-items:center;min-height:32px}
/* Floor line sits under each address as secondary information. */
.loc__floor{display:block;color:var(--muted-fg);font-size:var(--fs-small)}
.loc__row a:hover{color:var(--lime-dark);text-decoration:underline}
.loc__map{position:relative;min-height:clamp(300px,36vw,560px);background:var(--ink)}
.loc__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(1) contrast(1.1)}
@media (max-width:900px){
  .loc{grid-template-columns:1fr}
  .loc__row,.loc__site{grid-template-columns:100px 1fr}
}

/* ---------- 13. FAQ ---------- */
.faq{border-top:1px solid var(--rule-strong)}
.faq__item{border-bottom:1px solid var(--rule-strong)}
.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-md);padding-block:clamp(var(--space-md),2.2vw,var(--space-lg));
  text-align:left;min-height:56px;
  transition:color var(--dur) var(--ease),padding-left var(--dur) var(--ease);
}
.faq__q:hover{padding-left:var(--space-xs)}
.faq__item h3{margin:0;font-size:inherit;font-weight:inherit}
.faq__qt{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(.95rem,1.65vw,1.35rem);
  letter-spacing:var(--track-tight);line-height:var(--lh-tight);
  text-transform:uppercase;
}
.faq__sign{flex:none;width:24px;height:24px;position:relative}
.faq__sign::before,.faq__sign::after{
  content:"";position:absolute;background:var(--ink);
  transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease);
}
.faq__sign::before{left:0;top:11px;width:24px;height:2px}
.faq__sign::after{top:0;left:11px;width:2px;height:24px}
.faq__q[aria-expanded="true"] .faq__sign::after{transform:rotate(90deg);opacity:0}
/* Height is measured and set in JS: the 0fr→1fr grid trick collapses to
   zero here, because overflow:hidden zeroes the track's minimum size. */
.faq__a{
  height:0;overflow:hidden;
  transition:height 380ms var(--ease);
}
/* Without JS the answers can never be opened, so leave them expanded. */
.no-js .faq__a{height:auto}
.no-js .faq__sign{display:none}
.faq__a p{
  max-width:var(--measure-lg);color:var(--muted-fg);
  line-height:var(--lh-relaxed);
  padding-bottom:clamp(var(--space-md),2.2vw,var(--space-lg));
}

/* ---------- 14. BOOKING FORM ---------- */
.book{display:grid;grid-template-columns:.85fr 1.15fr;border:1px solid var(--rule-strong);background:var(--ink);color:var(--bone)}
.book__aside{
  padding:var(--panel-pad);
  display:flex;flex-direction:column;gap:var(--stack-md);
  border-right:1px solid var(--rule-dark);
}
.book__aside h2{
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-h2);
  text-transform:uppercase;letter-spacing:-.035em;
  line-height:var(--lh-display-multi);
  margin-bottom:var(--space-2xs);
}
.book__aside p{color:var(--on-dark);max-width:var(--measure-sm)}
.book__aside a{display:inline-flex;align-items:center;min-height:32px}
.book__aside .lead{color:var(--lime)}
.book__form{
  padding:var(--panel-pad);
  display:grid;gap:var(--space-md);grid-template-columns:1fr 1fr;align-content:start;
}
.field{display:flex;flex-direction:column;gap:var(--space-2xs)}
.field--full{grid-column:span 2}
.field label{
  font-size:var(--fs-label);font-weight:600;line-height:1;
  letter-spacing:var(--track-caps);text-transform:uppercase;
  color:rgba(242,240,235,.8);
}
.field input,.field select,.field textarea{
  font:inherit;font-size:var(--fs-body);
  background:transparent;color:var(--bone);
  border:0;border-bottom:1px solid rgba(242,240,235,.4);
  padding:var(--space-xs) 0;min-height:48px;border-radius:0;
  transition:border-color var(--dur) var(--ease);
  width:100%;
}
.field textarea{resize:vertical;min-height:var(--space-3xl)}
.field select{cursor:pointer}
.field select option{background:var(--ink);color:var(--bone)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(242,240,235,.7)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--lime);outline:none}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
/* --- Custom select -------------------------------------------------
   Progressive enhancement: JS swaps the native control for a listbox
   that follows the system. The <select> stays in the DOM (hidden) so
   the form still submits and works with JS off. */
.sel{position:relative}
.sel__native{display:none}

.sel__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-sm);
  font:inherit;font-size:var(--fs-body);text-align:left;color:var(--bone);
  background:transparent;
  border:0;border-bottom:1px solid rgba(242,240,235,.4);
  padding:var(--space-xs) 0;min-height:48px;border-radius:0;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease);
  cursor:pointer;
}
.sel__btn:hover{border-color:rgba(242,240,235,.7)}
.sel[data-open="true"] .sel__btn{border-color:var(--lime)}
.sel__btn[data-placeholder="true"] .sel__value{color:var(--on-dark-mute)}
.sel__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sel__chev{
  width:14px;height:14px;flex:none;stroke:currentColor;stroke-width:1.6;fill:none;
  transition:transform var(--dur) var(--ease);
}
.sel[data-open="true"] .sel__chev{transform:rotate(180deg)}

.sel__list{
  position:absolute;top:calc(100% + var(--space-2xs));left:0;right:0;z-index:30;
  background:var(--ink);border:1px solid var(--lime);
  max-height:min(320px,50vh);overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateY(calc(var(--space-3xs) * -1));
  /* visibility is discrete: flip it instantly on open and delay it on close,
     rather than interpolating it (which can stall). */
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility 0s var(--dur);
}
.sel[data-open="true"] .sel__list{
  opacity:1;visibility:visible;transform:none;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility 0s;
}
/* Flips above the trigger when there isn't room below it. */
.sel[data-drop="up"] .sel__list{
  top:auto;bottom:calc(100% + var(--space-2xs));
  transform:translateY(var(--space-3xs));
}
.sel[data-drop="up"][data-open="true"] .sel__list{transform:none}

.sel__opt{
  display:flex;align-items:center;gap:var(--space-2xs);
  padding:var(--space-xs) var(--space-sm);
  min-height:44px;
  font-size:var(--fs-body);line-height:var(--lh-snug);color:var(--on-dark);
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.sel__opt+.sel__opt{border-top:1px solid var(--rule-dark)}
/* The square marker echoes the hero eyebrow's bullet. */
.sel__opt::before{
  content:"";width:7px;height:7px;flex:none;background:currentColor;
  opacity:0;transition:opacity var(--dur-fast) var(--ease);
}
.sel__opt[aria-selected="true"]{color:var(--lime)}
.sel__opt[aria-selected="true"]::before{opacity:1}
.sel__opt.is-active,.sel__opt:hover{background:var(--lime);color:var(--ink)}
.sel__opt.is-active::before,.sel__opt:hover::before{opacity:1}

.field[data-invalid="true"] .sel__btn{border-color:var(--lime)}

/* Native date control: strip the browser's own chrome so it reads as
   part of the form. The picker popup itself is drawn by the OS. */
.field input[type="date"]{color-scheme:dark}
.field input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(1);opacity:.55;cursor:pointer;
  transition:opacity var(--dur) var(--ease);
}
.field input[type="date"]:hover::-webkit-calendar-picker-indicator,
.field input[type="date"]:focus::-webkit-calendar-picker-indicator{opacity:1}

.field__help{font-size:var(--fs-caption);color:var(--on-dark-mute);line-height:var(--lh-snug)}
.field__err{font-size:var(--fs-caption);color:var(--lime);min-height:1.1em;font-weight:500;line-height:var(--lh-snug)}
.field[data-invalid="true"] input,.field[data-invalid="true"] select{border-color:var(--lime)}
.book__form .btn{--btn-bg:var(--lime);--btn-fg:var(--ink);border-color:var(--lime)}
.book__form .btn:hover{--btn-bg:var(--bone);--btn-fg:var(--ink);border-color:var(--bone)}
.form-status{
  grid-column:span 2;border:1px solid var(--lime);background:rgba(200,255,0,.1);
  padding:var(--space-sm) var(--space-md);color:var(--lime);font-weight:500;
  line-height:var(--lh-snug);
}
.form-status[hidden]{display:none}
@media (max-width:900px){
  .book{grid-template-columns:1fr}
  .book__aside{border-right:0;border-bottom:1px solid var(--rule-dark)}
}
@media (max-width:560px){
  .book__form{grid-template-columns:1fr}
  .field--full{grid-column:auto}
  .form-status{grid-column:auto}
}

/* ---------- 15. FOOTER ---------- */
.footer{background:var(--ink);color:var(--bone);padding-top:var(--space-2xl)}
.footer__logo{padding-bottom:var(--space-lg);border-bottom:1px solid var(--rule-dark)}
/* No max-width: the wordmark closes exactly on the page grid. */
.footer__logo img{width:100%;opacity:.96}
.footer__cols{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--space-xl) var(--space-lg);
  padding-block:var(--space-2xl);
}
/* The tagline moved up out of the legal bar to hold the first track, so the
   two link groups sit right instead of two columns hugging the left edge.
   Deliberately set at body size against the label-sized link columns: it
   reads as the footer's statement rather than a third, headless list. */
.footer__note p{
  font-size:var(--fs-body);line-height:var(--lh-snug);
  color:var(--on-dark);max-width:var(--measure-xs);
}
/* Addresses inherit .footer li, so they keep the same 32px row rhythm as the
   link columns beside them. Muted rather than --on-dark because they are not
   links — the colour is the cue. Still 6.5:1 on ink, so the contrast floor holds.
   The gap is 2xs, not sm: the tagline is taller than the lime headings, and this
   is the step that drops the first address onto the same line as the first link
   in the columns beside it. */
.footer__addr{margin-top:var(--space-2xs)}
.footer__addr li{color:var(--on-dark-mute)}
.footer h4{
  font-size:var(--fs-label);font-weight:600;line-height:1;
  letter-spacing:var(--track-caps);text-transform:uppercase;
  color:var(--lime);margin-bottom:var(--space-sm);
}
.footer li{min-height:32px;display:flex;align-items:center;font-size:var(--fs-small)}
.footer li+li{margin-top:var(--space-3xs)}
.footer a{
  color:var(--on-dark);display:inline-flex;align-items:center;min-height:32px;
  transition:color var(--dur-fast) var(--ease);
}
.footer a:hover{color:var(--lime)}
.footer__bottom{
  display:flex;justify-content:space-between;gap:var(--space-md);flex-wrap:wrap;
  border-top:1px solid var(--rule-dark);padding-block:var(--space-md);
  font-size:var(--fs-label);letter-spacing:var(--track-caps-tight);
  line-height:1;text-transform:uppercase;color:var(--on-dark-mute);
}
@media (max-width:860px){.footer__cols{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.footer__cols{grid-template-columns:1fr}}

/* ---------- 16. MOTION ---------- */
[data-reveal]{opacity:0;transform:translateY(24px)}
.no-js [data-reveal],.reveal-done[data-reveal]{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1 !important;transform:none !important}
  .band figure:hover img{transform:none}
}