/* ==========================================================================
   THE DESIGNERS HUB — site chrome (header / footer / cookie banner)
   Source: UI KIT / STYLE GUIDE frame #2129:9995
     header desktop #2129:10165 (bar 1460x64, frame h76)
     footer  desktop #2129:10104 ("подвал", 1440x220)
     cookies desktop #2129:10317 (1440x94)
   The header artboard is 1460 wide; its elements are kept at their literal x
   values, which land on an 81px right margin against the 1440 page.
   ========================================================================== */

/* --- shared logo plate: 147x76, #000 with a 1px #F8F8F8 edge -------------- */
.logo-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 147px;
  height: 76px;
  padding: 16px 29px;
  background: var(--black);
  border: var(--stroke-1) solid var(--bg);
}

.logo-plate img { width: 102px; height: 58px; object-fit: contain; }

/* ==========================================================================
   HEADER — #2129:10165
   ========================================================================== */
.site-header { position: relative; background: var(--color-surface-dark); }

.site-header__inner { position: relative; margin-inline: auto; }

.site-header__nav { display: flex; align-items: center; gap: 16px; }

.site-header__link {
  position: relative;
  font-family: var(--font-body);
  font-weight: var(--fw-reg);
  font-size: 13px;
  color: var(--white);
}

/* --- Consultation submenu -------------------------------------------------
   Not part of the style guide. The nav measures 540px against the 577px
   available before the logo plate at x:657, so a 9th top-level item cannot fit
   at the designed 20px gap. Both consultation pages hang off this instead, so
   the header keeps its verified geometry.
--------------------------------------------------------------------------- */
/* The caret is out of flow (see below) so the submenu label's box ends at the
   text — but the caret still draws 12px into the gap that follows (4px offset +
   8px glyph). Left uncompensated, the space after "Programs" and "Team" reads
   ~12px tighter than every other gap (the caret nearly touches the next tab).
   Adding the caret's own 12px back as trailing margin makes every VISIBLE gap
   equal, without the caret re-entering flow and growing the nav (which the
   Russian labels have no room for — ~11px of clearance to the logo). */
.site-header__item { position: relative; margin-inline-end: 12px; }

.site-header__toggle {
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  color: var(--white);
  line-height: inherit;
}

/* Out of flow on purpose: in the flex row the caret added 13px to the nav and
   pushed every tab after Consultation along, shifting the header on all pages.
   Absolute keeps the nav at its verified 540px; the caret sits inside the 20px
   gap that already follows the label. */
.site-header__caret {
  position: absolute;
  left: 100%;
  top: 50%;
  width: 8px;
  height: 5px;
  margin-left: 4px;
  transform: translateY(-50%);
  opacity: 0.7;
  transition: transform var(--dur) var(--ease);
}

.site-header__toggle[aria-expanded="true"] .site-header__caret {
  transform: translateY(-50%) rotate(180deg);
}

.site-header__menu {
  position: absolute;
  left: -16px;
  top: calc(100% + 14px);
  z-index: 20;
  min-width: 196px;
  padding: 6px 0;
  background: var(--grey-900);
  border: var(--stroke-1) solid rgba(255, 255, 255, 0.12);
  border-top: var(--stroke-1) solid var(--gold-deep);
}

.site-header__menu[hidden] { display: none; }

.site-header__menu a {
  display: block;
  padding: 9px 16px;
  font-size: 13px;
  color: var(--white);
  white-space: nowrap;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.site-header__menu a:hover,
.site-header__menu a:focus-visible { background: rgba(255, 255, 255, 0.06); color: var(--gold); }

.site-header__menu a[aria-current="page"] { color: var(--gold); }

/* active item carries a 37.5px gold rule (#2129:10185) */
.site-header__link--active::after {
  content: "";
  position: absolute;
  left: 0;
  top: 19.5px;
  width: 37.5px;
  height: 1px;
  background: var(--gold-deep);
}

.site-header__actions { display: flex; align-items: center; }

.site-header__cart { position: relative; display: block; width: 20px; height: 21px; }
.site-header__cart svg { width: 100%; height: 100%; }

.site-header__count {
  position: absolute;
  left: 14px;
  top: 0;
  font-weight: var(--fw-bold);
  font-size: 8px;
  line-height: 10px;
  color: var(--white);
}

/* "RU | EN | AR" with a gold box around the active locale (#2129:10184) */
.site-header__lang {
  font-size: var(--fs-meta);
  font-weight: var(--fw-reg);
  color: var(--white);
  white-space: nowrap;
}

.site-header__lang .is-active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 17px;
  border: var(--stroke-1) solid var(--gold-deep);
}

/* language toggle (RU/EN/AR) — plain-text buttons, active one keeps the box */
.site-header__lang .lang-opt,
.site-drawer__lang .lang-opt {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: inherit;
  line-height: inherit;
  cursor: pointer;
}
.site-header__lang .lang-opt:not(.is-active),
.site-drawer__lang .lang-opt:not(.is-active) { border: 0; }
.site-header__lang .lang-opt:not(.is-active):hover,
.site-drawer__lang .lang-opt:not(.is-active):hover { opacity: 0.7; }
.site-drawer__lang .lang-opt.is-active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 17px;
  border: var(--stroke-1) solid var(--gold-deep);
}

/* outlined CTA: 146 wide, 1px white edge, no fill (#2129:10181) */
.site-header__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  width: 146px;
  padding: 11px 10px 12px;
  border: var(--stroke-1) solid var(--white);
  background: none;
  font-size: var(--fs-meta);
  font-weight: var(--fw-reg);
  color: var(--white);
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.site-header__cta:hover,
.site-header__cta:focus-visible { background: var(--white); color: var(--ink); }

.site-header__logo { display: block; }

/* ==========================================================================
   FOOTER — #2129:10104
   ========================================================================== */
.site-footer {
  position: relative;
  background: var(--color-surface-dark);
  color: var(--white);
}

.site-footer__inner { position: relative; margin-inline: auto; }

.site-footer__heading {
  font-family: var(--font-button);
  font-weight: var(--fw-bold);
  font-size: 11px;
  line-height: 15px;
  color: var(--white);
}

.site-footer__list { margin-top: 8px; }

.site-footer__list li { line-height: 22px; }

.site-footer__list a,
.site-footer__text {
  font-family: var(--font-button);
  font-weight: var(--fw-reg);
  font-size: var(--fs-meta);
  color: var(--white);
}

/* phone numbers are Inter 11 in the file, not Open Sans 12 */
.site-footer__tel {
  font-family: var(--font-body);
  font-weight: var(--fw-reg);
  font-size: 11px;
  color: var(--white);
}

.site-footer__booklink { text-decoration: underline; }

.site-footer__rule {
  height: 1px;
  background: var(--cream-line);
  opacity: 0.8;
}

.site-footer__meta {
  font-family: var(--font-button);
  font-weight: var(--fw-reg);
  font-size: 11px;
  line-height: 15px;
  color: var(--cream-line);
}

/* ==========================================================================
   COOKIE BANNER — #2129:10317 (1440x94)
   bar #2D2D2D with a 1px #D8A025 edge; icon ring at x:170 y:28 (36x36);
   title x:224 y:19; body x:224 y:43 (643 wide); buttons x:906 y:29, gap 10
   ========================================================================== */
.cookie-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: var(--color-surface-dark);
  border: var(--stroke-1) solid var(--gold);
}

.cookie-bar[hidden] { display: none; }

.cookie-bar__inner { position: relative; margin-inline: auto; }

.cookie-bar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: var(--stroke-1) solid var(--gold);
  border-radius: 50%;
  background: var(--color-surface-dark);
  font-size: 14px;
  line-height: 1;
}

.cookie-bar__title {
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  font-size: var(--fs-label);
  line-height: 1.12em;
  color: var(--white);
}

.cookie-bar__text {
  font-family: var(--font-body);
  font-weight: var(--fw-reg);
  font-size: var(--fs-meta);
  line-height: 1.25;
  color: var(--white);
}

.cookie-bar__actions { display: flex; align-items: center; gap: 10px; }

.cookie-bar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  height: 36px;
  padding: 10px 12px 10px 13px;
  border: var(--stroke-1) solid var(--gold);
  background: none;
  font-family: var(--font-body);
  font-weight: var(--fw-reg);
  font-size: var(--fs-meta);
  color: var(--white);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.cookie-bar__btn:hover,
.cookie-bar__btn:focus-visible { background: var(--gold); }

/* "Accept all" is filled gold with a semibold label */
.cookie-bar__btn--accept {
  background: var(--gold);
  border-color: var(--gold);
  font-weight: var(--fw-semi);
}

.cookie-bar__btn--accept:hover,
.cookie-bar__btn--accept:focus-visible { background: var(--gold-deep); border-color: var(--gold-deep); }

/* narrow-width fallback */
.cookie-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-16) var(--page-pad-mob);
}

.cookie-bar__copy { flex: 1 1 320px; }
.cookie-bar__text { margin-top: 4px; }

/* On a phone the three action buttons ("Manage preferences", "Reject
   non-essential", "Accept all") did not fit one row and "Accept all" was cut
   off past the right edge. Below 768 they take the full width and stack. */
@media (max-width: 767px) {
  /* The cookie bar is fixed CHROME, not canvas content, so it must NOT ride the
     mobile canvas zoom. canvas.js zooms <body> by clientWidth/390, which scales
     every fixed descendant — so on a phone wider than the 390 design (e.g. a
     430px Pro Max the zoom is ~1.10) the bar was drawn oversized, and WebKit
     (iOS Safari / in-app browsers such as Telegram's) positions and scales a
     fixed element under an ancestor `zoom` differently from Chrome. That is why
     it looked wrong on one phone and fine on another. Cancelling the canvas
     zoom on the bar with its inverse makes the net zoom 1.0, so the banner
     renders at true device pixels and looks the same on every phone width.
     --canvas-scale is published on <html> by canvas.js and inherits here. */
  .cookie-bar { zoom: calc(1 / var(--canvas-scale, 1)); }
  .cookie-bar__actions { width: 100%; flex-wrap: wrap; gap: var(--space-8); }
  .cookie-bar__btn { flex: 1 1 100%; justify-content: center; }
  /* keep the buttons clear of the iOS home indicator / bottom browser chrome */
  .cookie-bar__inner { padding-bottom: calc(var(--space-16) + env(safe-area-inset-bottom, 0px)); }
}

@media (min-width: 768px) {
  .cookie-bar__inner { padding-inline: var(--page-pad-tab); }
}

@media (min-width: 1200px) {
  .cookie-bar { height: 94px; }
  .cookie-bar__inner {
    display: block;
    width: var(--frame-desktop);
    height: 94px;
    padding: 0;
  }
  .cookie-bar__icon  { position: absolute; left: 170px; top: 28px; }
  .cookie-bar__copy  { position: static; }
  /* Figma renders this on one line (121x18); the browser measures it a hair
     wider, which wrapped it into the body copy below. */
  .cookie-bar__title { position: absolute; left: 224px; top: 19px; width: 121px; white-space: nowrap; }
  .cookie-bar__text  { position: absolute; left: 224px; top: 43px; width: 643px; margin: 0; }
  .cookie-bar__actions { position: absolute; left: 906px; top: 29px; }
}

/* ==========================================================================
   Narrow-width fallback (the 768 / 390 chrome frames are not ported yet)
   ========================================================================== */
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: 12px var(--page-pad-mob);
  flex-wrap: wrap;
}

.site-header__nav { flex-wrap: wrap; gap: 12px; }

.site-footer__inner { padding: var(--space-32) var(--page-pad-mob); }

.site-footer__cols { display: grid; gap: var(--space-24); margin-top: var(--space-24); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  justify-content: space-between;
  margin-top: var(--space-24);
  padding-top: var(--space-16);
}

@media (min-width: 768px) {
  .site-header__inner { padding-inline: var(--page-pad-tab); }
  .site-footer__inner { padding-inline: var(--page-pad-tab); }
  .site-footer__cols { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   DESKTOP — literal style-guide geometry
   ========================================================================== */
@media (min-width: 1200px) {

  /* --- header: bar 1440x64, frame height 76 --- */
  .site-header { height: 76px; }
  .site-header__inner {
    display: block;
    width: var(--frame-desktop);
    height: 76px;
    padding: 0;
  }
  .site-header::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 64px;
    background: var(--color-surface-dark);
  }
  .site-header__nav {
    position: absolute;
    left: 80px;
    top: 23px;
    gap: 20px;
    flex-wrap: nowrap;
    z-index: 2;
  }
  .site-header__logo { position: absolute; left: 657px; top: 0; z-index: 3; }
  .site-header__actions { position: absolute; z-index: 2; display: block; }
  .site-header__cart { position: absolute; left: 1067px; top: 18px; }
  .site-header__lang { position: absolute; left: 1115px; top: 23px; }
  .site-header__cta  { position: absolute; left: 1213px; top: 12px; }

  /* --- footer: 1440x220 --- */
  .site-footer { height: 220px; }
  .site-footer__inner { width: var(--frame-desktop); height: 220px; padding: 0; }
  .site-footer__logo { position: absolute; left: 123px; top: 36px; }
  .site-footer__cols { display: block; margin: 0; }
  .site-footer__col  { position: absolute; top: 33px; }
  .site-footer__col--quick   { left: 370px; }
  .site-footer__col--legal   { left: 568px; }
  .site-footer__col--contact { left: 808px; }
  .site-footer__list { margin-top: 8px; }
  .site-footer__rule { position: absolute; left: 123px; top: 170px; width: 1197px; }
  .site-footer__bottom { display: block; margin: 0; padding: 0; }
  .site-footer__meta--left  { position: absolute; left: 123px;  top: 185px; width: 186px; }
  .site-footer__meta--right { position: absolute; left: 1008px; top: 185px; width: 308px; text-align: right; }

  /* --- minimal checkout header (#2129:3613) -------------------------------
     Same 1440x76 shell and 64px bar, but the logo moves to x:79 and the nav /
     cart / language / CTA are all absent. */
  .site-header--checkout .site-header__logo { left: 79px; }

  .site-header--checkout .site-header__secure {
    position: absolute;
    left: 669px; top: 25px; width: 104px;
    color: #999999;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 16px;
    text-align: center;
  }

  .site-header--checkout .site-header__ssl {
    position: absolute;
    left: 1111px; top: 25px; width: 247px;
    color: var(--gold);
    /* Arial is Figma's own choice on this node */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 15px;
    text-align: right;
  }

  /* --- slim footer variant (commerce frames, e.g. cart #2278:4155) ---------
     Same 1440x220 shell and the same rule/meta row; only the columns move and
     the logo sits 2px higher. */
  .site-footer--slim .site-footer__logo { top: 34px; }
  .site-footer--slim .site-footer__col--legal { left: 483px; }
  .site-footer--slim .site-footer__col--help  { left: 722px; }
  .site-footer--slim .site-footer__meta--right { width: 309px; }
}


/* ==========================================================================
   THE DESIGNERS HUB — chat widget
   Source of truth: Figma frames "chat bot final" #2129:8734 (closed) and
   #2129:8866 (open), panel #2129:8870.

   This is a floating widget, not a page, so it lives in both footer partials
   and is position:fixed. Every size and colour below is the file's own value.

   ANCHORING IS A JUDGEMENT CALL AND IS FLAGGED: the frames compose the icon
   against a 985-tall page (icon at x:1364 y:669, footer at y:739), not
   against a viewport. The RIGHT offset is read from the file — the icon's
   right edge is 1402 on the 1440 canvas, so 38px. The BOTTOM offset is set to
   the same 38px for symmetry; the file does not specify one. Both frames put
   the panel's right and bottom edges on the icon's, which the file confirms
   via the panel's square bottom-right corner (radius "8px 8px 0px 8px") —
   that corner is square because the launcher sits over it.

   The conversation shown is the file's scripted example. Nothing here talks to
   a backend: the composer is inert and the reply buttons only echo. See
   chatbot.js.
   ========================================================================== */

.chat {
  --chat-panel-bg: #F8F8F8;
  --chat-bar: #2D2D2D;
  --chat-bubble: rgba(222, 222, 222, 0.6);
  --chat-field: rgba(222, 222, 222, 0.4);
  --chat-chip: #DEDEDE;
  --chat-online: #78DA3C;
  position: fixed;
  right: 38px;
  bottom: 38px;
  z-index: 900;
  font-family: var(--font-body);
  /* The widget lives inside the canvas-zoomed body, so it would otherwise scale
     with the viewport — tiny on a small desktop, huge on a wide tablet, and
     unhidden on mobile it would render at the Figma design's literal 6-8px text.
     Counter the canvas zoom (canvas.js exposes --canvas-scale on :root) and
     apply a fixed 1.4x, so the whole widget is a consistent, readable size at
     every breakpoint: launcher 48->67px, panel 248->347px, text 8->11px. */
  zoom: calc(1.4 / var(--canvas-scale, 1));
}

/* ---------------------------------------------------------------- launcher */
.chat__launcher {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  position: relative;
  z-index: 2;
  margin-left: auto;
  padding: 0;
  border: 0;
  width: 48px;
  height: 48px;
  background: none;
  cursor: pointer;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.25);
}

.chat__launcher img { display: block; width: 48px; height: 48px; object-fit: cover; }

/* ------------------------------------------------------------------- panel */
.chat__panel {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 248px;
  height: 360px;
  background: var(--chat-panel-bg);
  border-radius: 8px 8px 0 8px;
  box-shadow: 0 4px 7px 1px rgba(45, 45, 45, 0.15);
  overflow: hidden;
}

.chat__panel > * { position: absolute; }

.chat[hidden] { display: none; }
.chat__panel[hidden] { display: none; }

/* --- title bar --- */
.chat__bar {
  left: 0; top: 0;
  width: 248px; height: 36px;
  background: var(--chat-bar);
  border-radius: 8px 8px 0 0;
}

.chat__ava {
  position: absolute;
  left: 8px; top: 7px;
  width: 22px; height: 22px;
  border-radius: 50%;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.25);
}

.chat__ava img { display: block; width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }

/* the green presence dot, drawn over the avatar's lower-right */
.chat__online {
  position: absolute;
  left: 26px; top: 25px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--chat-online);
  border: 0.2px solid var(--chat-bar);
}

.chat__name {
  position: absolute;
  left: 36px; top: 10px; width: 49px;
  color: var(--chat-panel-bg);
  font-size: 8px;
  line-height: 10px;
}

.chat__status {
  position: absolute;
  left: 36px; top: 19px; width: 18px;
  color: var(--chat-panel-bg);
  opacity: 0.75;
  font-size: 6px;
  line-height: 7px;
}

.chat__close {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  left: 224px; top: 12px;
  width: 12px; height: 12px;
  padding: 0;
  border: 0;
  background: none;
  opacity: 0.45;
  cursor: pointer;
}

.chat__close img { display: block; width: 12px; height: 12px; }
.chat__close:hover, .chat__close:focus-visible { opacity: 0.8; }

/* --- conversation thread (scrolls between the bar and the composer) --- */
.chat__thread {
  left: 0; top: 36px;
  width: 248px; height: 291px;
  padding: 10px 8px;
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: 8px;
  background: var(--chat-panel-bg);
}
.chat__thread::-webkit-scrollbar { width: 4px; }
.chat__thread::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); border-radius: 2px; }

.chat__msg { position: relative; display: flex; align-items: flex-end; gap: 5px; max-width: 100%; }
.chat__msg--user { justify-content: flex-end; }

.chat__botava {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  border-radius: 50%;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
}
.chat__botava img { display: block; width: 18px; height: 18px; border-radius: 50%; border: 0.2px solid var(--chat-bar); object-fit: cover; }

.chat__bubble {
  max-width: 185px;
  padding: 6px 8px;
  color: #000;
  font-size: 8px;
  line-height: 11px;
  word-break: break-word;
}
.chat__bubble p { margin: 0; padding: 0; }
.chat__bubble--bot  { background: var(--chat-bubble); border-radius: 0 10px 10px 10px; }
.chat__bubble--user { background: var(--gold); color: var(--white); border-radius: 10px 0 10px 10px; }
.chat__bubble--typing { opacity: 0.6; font-style: italic; }

/* --- starter prompt chips (send their text when tapped) --- */
.chat__prompts { display: flex; flex-wrap: wrap; gap: 5px; padding-left: 23px; }
.chat__chip {
  -webkit-appearance: none; appearance: none;
  padding: 3px 8px;
  border: 0;
  background: var(--chat-bubble);
  border-radius: 0 8px 8px 8px;
  color: #000; opacity: 0.85;
  font-family: var(--font-body);
  font-size: 7px; line-height: 10px;
  cursor: pointer;
}
.chat__chip:hover, .chat__chip:focus-visible { opacity: 1; }

/* --- WhatsApp shortcut in the bar --- */
.chat__wa {
  -webkit-appearance: none; appearance: none;
  position: absolute;
  left: 206px; top: 12px;
  width: 12px; height: 12px;
  padding: 0; border: 0;
  background: none;
  opacity: 0.55;
  cursor: pointer;
}
.chat__wa:hover, .chat__wa:focus-visible { opacity: 0.9; }
.chat__wa img { display: block; width: 12px; height: 12px; object-fit: contain; }

/* --- composer --- */
.chat__composer {
  left: 8px; top: 327px;
  width: 232px; height: 25px;
  background: var(--chat-field);
  border-radius: 0 8px 0 8px;
}

.chat__input {
  position: absolute;
  left: 8px; top: 7px;
  width: 190px; height: 11px;
  padding: 0;
  border: 0;
  background: none;
  color: #000;
  font-family: var(--font-body);
  font-size: 8px;
  line-height: 10px;
}

.chat__input::placeholder { color: #000; opacity: 0.25; }
.chat__input:focus { outline: none; }

.chat__send {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  left: 209px; top: 4px;
  width: 17px; height: 17px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.chat__send img { display: block; width: 17px; height: 17px; }

/* The widget shows at every breakpoint. It is sized in real pixels by the
   1.4x counter-zoom on `.chat` (see there), so it stays legible on tablet and
   mobile where the canvas is scale 1 rather than relying on the desktop zoom. */


/* ==========================================================================
   MOBILE CHROME — the 390 canvas
   Sources: header #2129:10148 (390x81) · hamburger drawer #2129:10224
   (panel 330x810) · nav list #2129:10293 · sticky menu #2129:10430 (390x86)
   · footer #2129:9020 (385x388, read off the 404 mobile frame — the style
   guide carries only 1440 and 768 footers).

   Below 768 the body is zoomed so the viewport is exactly 390 (see
   canvas.js), which makes every value here a literal Figma number.

   Line steps (Inter auto is 1.2102em):
     drawer nav  Inter 400 16, 1.79em -> 28.64px
     sticky lbl  Inter 600 9, 1.12em  -> 10px
     footer head Open Sans 700 12     -> 16px
     footer item Open Sans 400 12     -> 16px
     footer tel  Inter 400 11         -> 13px
     footer fine Open Sans 400 10     -> 14px
   ========================================================================== */

/* the desktop bar and the mobile bar are mutually exclusive */
.site-header__mobile,
.site-drawer,
.site-drawer__scrim,
.site-sticky { display: none; }

/* the two extra footer rules exist only on the mobile canvas */
.site-footer__rule--m1,
.site-footer__rule--m2 { display: none; position: absolute; }

/* Stays at 767. Widening this to 1199 to bring the drawer and sticky along to
   tablet was tried and REVERTED: this block also carries the 390 header and
   footer geometry, and it leaked — the header outer box came out 390x81 and
   the footer 385x220 inside a 768 viewport, with the footer columns collapsed
   to 8px tall, because the block positions each footer item individually at
   390 coordinates and the tablet block does not override all of it.
   Splitting the drawer and sticky into their own <=1199 query is the right
   fix; it is a refactor of verified CSS and is deliberately left for the
   session that ports the 768 drawer geometry. */
@media (max-width: 767px) {

  /* ---------------------------------------------------------------- header */
  .site-header__inner { display: none; }

  .site-header {
    position: relative;
    width: 390px;
    height: 81px;
    background: var(--color-surface-dark);
  }

  .site-header__mobile { display: block; }
  .site-header__mobile > * { position: absolute; }

  /* #2129:10155 — 97x50.15 black plate, 0.66px light stroke */
  .site-header__mobile .logo-plate {
    left: 9px; top: 15px;
    width: 97px; height: 50.15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--black);
    border: 0.6598639488220215px solid var(--bg);
    box-sizing: border-box;
  }

  .site-header__mobile .logo-plate img { width: 70.86px; height: 40.29px; }

  .site-header__cart { left: 310px; top: 28px; width: 20px; height: 20.29px; }

  .site-header__burger {
    left: 354px; top: 32px;
    width: 24px; height: 16px;
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }

  /* three 1.5px rules, as the node SVG draws them */
  .site-header__burger span {
    position: absolute;
    left: 0;
    width: 24px;
    height: 1.5px;
    background: var(--white);
  }

  .site-header__burger span:nth-child(1) { top: 0; }
  .site-header__burger span:nth-child(2) { top: 7.25px; }
  .site-header__burger span:nth-child(3) { top: 14.5px; }

  /* ---------------------------------------------------------------- drawer */
  .site-drawer__scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 950;
  }

  .site-drawer__scrim[hidden] { display: none; }

  /* #2129:10225 — 330x810 panel, 34 from the top, sitting 55 in from the
     left so it ends at 385 on the 390 canvas */
  .site-drawer {
    display: block;
    position: fixed;
    left: 55px; top: 34px;
    width: 330px; height: 810px;
    background: var(--color-surface-dark);
    border: 1px solid #AFC4A2;
    border-radius: 4px 0 0 0;
    box-sizing: border-box;
    z-index: 960;
  }

  .site-drawer[hidden] { display: none; }
  .site-drawer > * { position: absolute; }

  .site-drawer .logo-plate {
    left: 22px; top: 21px;
    width: 97px; height: 50.15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--black);
    border: 0.6598639488220215px solid var(--bg);
    box-sizing: border-box;
  }

  .site-drawer .logo-plate img { width: 70.86px; height: 40.29px; }

  .site-drawer__lang { left: 151px; top: 40px; width: 70px; color: var(--white); font-size: 12px; line-height: 15px; white-space: nowrap; }
  .site-drawer__langbox { left: 175px; top: 39px; width: 23px; height: 17px; border: var(--stroke-1) solid #C8962A; }
  .site-drawer__cart { left: 253px; top: 37px; width: 20px; height: 20.29px; }

  /* #2129:10293 — 8 items, 1px gap, Inter 16/1.79em */
  .site-drawer__nav {
    left: 23px; top: 113px;
    width: 168px;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .site-drawer__nav a {
    color: var(--white);
    font-size: var(--fs-body);
    line-height: 28.64px;
  }

  .site-drawer__nav a:hover,
  .site-drawer__nav a[aria-current="page"] { color: var(--gold); }

  /* Brand-stage switcher moved OUT of the mobile drawer 2026-07-22 (client
     request): the Launch/Growth/Scale switch now lives on the stage hero card
     itself (see .lx-tabs in launch.css). Hidden here so it is not in the menu
     as well. The action pills below are absolutely positioned, so removing it
     moves nothing. Tablet keeps the drawer switcher (see the 768-1199 block)
     because its stage heroes still carry no on-card tab row. */
  .site-drawer__stages,
  .site-drawer__stages-label { display: none; }

  .site-drawer__stages-label {
    margin: 0;
    color: var(--grey-300);
    font-size: 11px;
    line-height: 13px;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .site-drawer__stages a {
    color: var(--white);
    font-size: 13px;
    line-height: 20px;
    white-space: nowrap;
  }

  .site-drawer__stages a:hover,
  .site-drawer__stages a[aria-current="page"] { color: var(--gold); }

  /* the three pill actions — 168x29, 37px apart */
  .site-drawer__act {
    left: 22px;
    width: 168px; height: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 11px;
    line-height: 13px;
    box-sizing: border-box;
  }

  .site-drawer__act--book {
    top: 572px;
    background: var(--white);
    border: var(--stroke-1) solid var(--white);
    color: var(--color-surface-dark);
    font-weight: var(--fw-med);
  }

  .site-drawer__act--tel,
  .site-drawer__act--wa {
    border: var(--stroke-1) solid var(--gold);
    color: var(--white);
  }

  .site-drawer__act--tel { top: 609px; }
  .site-drawer__act--wa { top: 646px; }
  .site-drawer__act img { width: 13px; height: 13px; }

  .site-drawer__meta {
    left: 22px;
    display: flex;
    align-items: center;
    gap: 7px;
    width: 180px;
    color: var(--white);
    font-size: 11px;
    line-height: 13px;
  }

  .site-drawer__meta--mail { top: 683px; }
  .site-drawer__meta--addr { top: 706px; gap: 8px; }
  .site-drawer__meta img { width: 11px; height: 13px; }

  /* ----------------------------------------------------------- sticky menu */
  /* #2129:10430 — appears after the first block, replaces the top menu, and
     blurs what is behind it. Hidden while the drawer is open, per the style
     guide note that the sticky menu hides when the hamburger opens. */
  .site-sticky {
    display: block;
    position: fixed;
    left: 0; top: 0;
    width: 390px; height: 86px;
    background: rgba(255, 255, 255, 0.19);
    border: var(--stroke-1) solid var(--color-surface-dark);
    -webkit-backdrop-filter: blur(8.55px);
    backdrop-filter: blur(8.55px);
    box-sizing: border-box;
    z-index: 940;
    transform: translateY(-100%);
    transition: transform var(--dur) var(--ease);
  }

  .site-sticky > * { position: absolute; }
  .site-sticky.is-on { transform: none; }

  .site-sticky__btn {
    left: 9px; top: 18px;
    width: 199px; height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-dark);
    border: var(--stroke-1) solid var(--white);
    color: var(--white);
    font-family: var(--font-button);
    font-weight: var(--fw-reg);
    font-size: 14px;
    line-height: 19px;
    box-sizing: border-box;
  }

  .site-sticky__cart { left: 285px; top: 26px; width: 20px; height: 20.29px; }

  .site-sticky__burger {
    left: 332px; top: 31px;
    width: 18px; height: 11px;
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }

  .site-sticky__burger span {
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    background: var(--white);
  }

  .site-sticky__burger span:nth-child(1) { top: 0; }
  .site-sticky__burger span:nth-child(2) { top: 4.5px; }
  .site-sticky__burger span:nth-child(3) { top: 9px; }

  .site-sticky__label {
    color: var(--white);
    font-weight: var(--fw-semi);
    font-size: 9px;
    line-height: 10px;
  }

  .site-sticky__label--cart { left: 285px; top: 51px; width: 18px; }
  .site-sticky__label--menu { left: 329px; top: 51px; width: 25px; }

  /* ---------------------------------------------------------------- footer */
  /* #2129:9020 — 385x388, sitting 3px in from the left edge. Same DOM as
     desktop, repositioned: logo top-left, Legal top-right, Quick Links
     bottom-left, Contact bottom-right. */
  .site-footer {
    position: relative;
    width: 385px;
    height: 388px;
    margin-left: 3px;
    background: var(--color-surface-dark);
    padding: 0;
  }

  .site-footer__inner { position: static; width: auto; padding: 0; }
  .site-footer__inner > * { position: absolute; }

  /* margin:0 is load-bearing, not tidying. Both of these keep the 24px
     margin-top the <=1199 flow rules give them, and .site-footer__cols has
     ZERO height here because its own children are absolutely positioned. So
     the two margins collapse together and — with .site-footer__inner and
     .site-footer both padding:0 and borderless on top — escape the footer
     entirely and become its own margin-top. That pushed the footer 24px
     below `main` on every mobile page. The 404 frame is the only one that
     draws the footer (at y:372) and is what exposed it. */
  .site-footer__cols { position: static; display: block; margin: 0; }
  .site-footer__bottom { margin: 0; }

  .site-footer__logo {
    left: 7px; top: 32px;
    width: 97px; height: 50.15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--black);
    border: 0.6598639488220215px solid var(--bg);
    box-sizing: border-box;
  }

  .site-footer__logo img { width: 70.86px; height: 40.29px; }

  .site-footer__heading {
    color: var(--white);
    font-family: var(--font-button);
    font-weight: var(--fw-bold);
    font-size: 12px;
    line-height: 16px;
  }

  .site-footer__list { list-style: none; margin: 0; padding: 0; }

  .site-footer__list a {
    color: var(--white);
    font-family: var(--font-button);
    font-size: 12px;
    line-height: 16px;
  }

  .site-footer__col { position: absolute; }
  .site-footer__col .site-footer__heading { position: absolute; left: 0; top: 0; }
  .site-footer__col li { position: absolute; left: 0; }

  .site-footer__col--legal { left: 193px; top: 32px; width: 130px; }
  .site-footer__col--legal li:nth-child(1) { top: 24px; }
  .site-footer__col--legal li:nth-child(2) { top: 48px; }
  .site-footer__col--legal li:nth-child(3) { top: 72px; }
  .site-footer__col--legal li:nth-child(4) { top: 96px; }

  .site-footer__col--quick { left: 8px; top: 179px; width: 130px; }
  .site-footer__col--quick li:nth-child(1) { top: 23px; }
  .site-footer__col--quick li:nth-child(2) { top: 47px; }
  .site-footer__col--quick li:nth-child(3) { top: 71px; }
  .site-footer__col--quick li:nth-child(4) { top: 95px; }

  /* The contact rows are not on an even step in the file, and the two phone
     numbers are in the opposite order to desktop (930 above 441), so they are
     placed individually rather than swapped in the DOM. */
  .site-footer__col--contact { left: 191px; top: 179px; width: 170px; }
  .site-footer__col--contact li:nth-child(1) { top: 21px; }
  .site-footer__col--contact li:nth-child(2) { top: 72px; }
  .site-footer__col--contact li:nth-child(3) { top: 49px; }
  .site-footer__col--contact li:nth-child(4) { top: 96px; }

  /* SLIM footer (cart / checkout) has only Legal + "Need help?" columns. The
     standard rules above position `--legal`, but `--help` had no mobile rule,
     so its heading and email both landed at top:0 and overlapped. Place it
     bottom-left, where Quick Links sits on the standard footer, with the email
     one row below the heading. */
  .site-footer--slim .site-footer__col--help { left: 8px; top: 179px; width: 220px; }
  .site-footer--slim .site-footer__col--help li { top: 24px; }

  .site-footer__tel { font-family: var(--font-body); font-size: 11px; line-height: 13px; }

  /* two short rules under the lower headings — mobile only */
  .site-footer__rule--m1,
  .site-footer__rule--m2 { display: block; top: 161px; width: 111px; height: 1px; background: var(--white); }
  .site-footer__rule--m1 { left: 8px; }
  .site-footer__rule--m2 { left: 191px; }

  .site-footer__rule { left: 8px; top: 311px; width: 343.5px; height: 1px; background: var(--white); opacity: 1; }

  .site-footer__bottom { position: static; }

  .site-footer__meta {
    position: absolute;
    font-family: var(--font-button);
    font-size: 10px;
    line-height: 14px;
    color: var(--white);
  }

  /* the file swaps these against desktop: the address sits above the
     copyright, and the copyright is right-aligned in a 169 box at x:8 */
  .site-footer__meta--right { left: 8px; top: 319px; width: 287px; text-align: left; }
  .site-footer__meta--left  { left: 8px; top: 339px; width: 169px; text-align: right; }

  /* the chat launcher would collide with the sticky bar and the drawer */
  /* The 1.4x counter-zoom (from the base rule) is right for desktop/tablet but
     makes the panel 347x504 — ~89% of a 390 phone and prone to overrunning a
     short/landscape viewport. Drop the multiplier to 1.15 on mobile: the panel
     becomes 285x414 (~73% width, launcher 55px) and the text stays legible
     (~9.5px). The internal layout is unchanged — only the whole-widget scale. */
  .chat { right: 16px; bottom: 16px; zoom: calc(1.15 / var(--canvas-scale, 1)); }
}

  /* the sticky bar is suppressed while the drawer is open */
  .site-sticky.is-suppressed { transform: translateY(-100%); }

/* ==========================================================================
   TABLET CHROME — 768 band (768-1199)
   ==========================================================================
   Read off the 404 tablet frame #2129:9044, which draws its own header
   (#2129:9056) and footer (#2129:9067) — the same route the 390 footer was
   read from the 404 mobile frame, because the style guide's own tablet
   artboards are inside a 10944x4868 frame and this is a cheaper, equally
   literal source.

   TWO THINGS THE 768 CHROME SETTLES:

   1. The tablet header is a HAMBURGER header, not the desktop nav. It is
      768x81 — the SAME height as mobile, not the desktop 76 — so `main`
      starts at 81 in this band too, exactly as it does at 390.
   2. The tablet footer is the DESKTOP shape (three columns, 220 tall), not
      the mobile stack (385x388). So the footer partial's normal DOM order is
      used unchanged; only the coordinates differ.

   The footer group is declared at x:27 on a 768 canvas with a 768-wide dark
   background, which would leave a 27px light gutter down the left and hang 27
   off the right. That is a file artifact, not a design: the header on the same
   frame is full-bleed (769 at x:-1), and a one-sided gutter is not a thing the
   footer does at any other width. Placed at x:0 and the children kept at their
   group-relative coordinates, which is the same call the project already made
   for the mobile programs frame's own footer. FLAGGED.

   NOT READ FROM FIGMA — the drawer and the sticky bar at this width. The style
   guide specifies a hamburger menu and a sticky menu for "mobile and tablet",
   and both are switched on here, but their 768 GEOMETRY has not been ported:
   they reuse the verified 390 geometry. That is a deliberate, flagged reuse,
   not a port. The drawer panel is 330 wide against a 768 viewport, which works
   but is certainly not what the file draws.
   ========================================================================== */
/* Both of these belong to the 768 header only: the 390 header draws neither.
   Hidden unscoped and turned on inside the band below — declared BEFORE the
   band so source order lets the band win, and after it everywhere else. */
.site-header__mcta { display: none; }
.site-header__mobile .site-header__count { display: none; }

/* The header swap was gated behind `html[data-tablet-canvas]` while the 768
   drawer was unported. The drawer has now landed (see the tablet drawer block
   at the end of this file), so the burger opens a real panel and the gate is
   removed: the whole 768-1199 band gets the tablet chrome. */

@media (min-width: 768px) and (max-width: 1199px) {

  /* ---- swap the desktop bar for the hamburger header ------------------- */
  .site-header__inner { display: none; }
  .site-header__mobile { display: block; }

  .site-header {
    position: relative;
    height: 81px;
    background: var(--color-surface-dark);
  }

  /* A CENTRED 768 BLOCK, not a fluid bar. Every coordinate below is the
     literal Figma value, which only lines up at exactly 768 — and this band is
     768-1199 wide. Rather than re-anchor each item to the right edge, the
     whole bar is a 768 box centred in the viewport: at 768 it is pixel-exact,
     and above it the dark background simply extends either side. The footer
     does the same, so the two agree. (Canvas scaling is NOT used here: it is
     opt-in per page, and the chrome is shared by pages that have not opted in.) */
  /* OVERLAID, not stacked. `.site-header__mobile` is a SIBLING of
     `.site-header`, not a child — so leaving it in flow at 81 tall put 162px
     of chrome above main instead of 81. The 390 block gets away with a bare
     `display: block` because it never gives the bar a height (its children are
     absolute and resolve against the page), but that also means it cannot be
     centred. Here it is taken out of flow and centred explicitly, so
     `.site-header` alone contributes the 81 of flow height while the bar's
     children still resolve against a 768 box. */
  .site-header__mobile {
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -384px;
    width: 768px;
    height: 81px;
    z-index: 2;
  }
  .site-header__mobile > * { position: absolute; }

  /* #2129:9063 — 90x46.53 plate, black fill, 0.61 hairline */
  .site-header__mobile .logo-plate {
    left: 39px; top: 16.81px;
    width: 90px; height: 46.53px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    border: 0.612px solid var(--bg);
  }
  .site-header__mobile .logo-plate img { width: 54.49px; height: 26.94px; }

  /* #2129:9065 — 146x38, transparent with a 1px white edge, Inter 12/15.
     11 + 15 + 12 = 38, so the height falls out of the padding exactly. */
  .site-header__mcta {
    display: flex;
    align-items: center;
    justify-content: center;
    left: 489px; top: 23px;
    width: 146px; height: 38px;
    background: none;
    border: 1px solid var(--white);
    color: var(--white);
    font-family: var(--font-body);
    font-weight: var(--fw-reg);
    font-size: 12px;
    line-height: 15px;
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
  }

  /* #2129:9058 cart 20x20.29, #2129:9057 burger 24x16 */
  .site-header__mobile .site-header__cart { left: 659px; top: 30px;
                                            width: 20px; height: 20.29px; }
  .site-header__mobile .site-header__cart svg { width: 20px; height: 20.29px; }
  .site-header__mobile .site-header__count {
    display: block;
    position: absolute;
    left: 20px; top: -4px;
    color: var(--white);
    font-family: var(--font-body);
    font-size: 9px;
    line-height: 11px;
  }

  .site-header__mobile .site-header__burger {
    left: 703px; top: 34px;
    width: 24px; height: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .site-header__mobile .site-header__burger span {
    display: block; width: 24px; height: 1.5px; background: var(--white);
  }

  /* ---- drawer + sticky: NOT enabled at tablet yet ----------------------
     The style guide puts both on tablet, but their 768 geometry is not ported
     and the 390 rules live inside the <=767 block, so switching them on here
     would give an empty 330x810 panel. Left off; see the note on that block. */

  /* ---- footer: #2129:9067, 768x220, three columns --------------------- */
  .site-footer { height: 220px; background: var(--color-surface-dark); }

  .site-footer__inner {
    position: relative;
    width: 768px;
    height: 220px;
    margin-inline: auto;
    padding: 0;
  }
  .site-footer__inner > * { position: absolute; }

  /* #2129:9087 — 112x57.9 plate */
  .site-footer__logo {
    left: 43px; top: 32.05px;
    width: 112px; height: 57.9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    border: 0.762px solid var(--bg);
  }
  .site-footer__logo img { width: 67.81px; height: 33.52px; }

  .site-footer__cols { position: static; display: block; margin: 0; }
  .site-footer__col  { position: absolute; }
  .site-footer__col--quick   { left: 232px; top: 33px; }
  .site-footer__col--legal   { left: 374px; top: 33px; }
  .site-footer__col--contact { left: 512px; top: 33px; }

  /* headings #2129:9069/9074/9079 — Open Sans 700 11, 15 tall */
  .site-footer__heading {
    margin: 0;
    color: var(--white);
    font-family: var(--font-button);
    font-weight: var(--fw-bold);
    font-size: 11px;
    line-height: 15px;
    white-space: nowrap;
  }

  /* the first link sits 23 below the heading top, then a 22 step */
  .site-footer__list { margin: 8px 0 0; padding: 0; list-style: none; }
  .site-footer__list li { margin: 0; }
  .site-footer__list a,
  .site-footer__booklink {
    display: block;
    color: var(--white);
    font-family: var(--font-button);
    font-weight: var(--fw-reg);
    font-size: 12px;
    line-height: 16px;
    white-space: nowrap;
  }
  .site-footer__list li + li { margin-top: 6px; }

  /* the two phone lines are Inter 11/13, not Open Sans 12 — read per node */
  .site-footer__tel {
    display: block;
    color: var(--white);
    font-family: var(--font-body);
    font-weight: var(--fw-reg);
    font-size: 11px;
    line-height: 13px;
    white-space: nowrap;
  }
  .site-footer__booklink { text-decoration: underline; }

  /* The contact column is NOT on the 22px step the other two are: its two
     phone rows are Inter 11/13 rather than Open Sans 12/16, so Figma puts them
     at 80 and 102 against the 78/100 a uniform step gives. Nudged per row. */
  .site-footer__col--contact .site-footer__list li:nth-child(2) { margin-top: 8px; }
  .site-footer__col--contact .site-footer__list li:nth-child(4) { margin-top: 4px; }

  /* the mobile block's two extra rules have no 768 counterpart */
  .site-footer__rule--m1, .site-footer__rule--m2 { display: none; }

  /* #2129:9084 — declared 773 wide from x:28, i.e. it runs 28..801 on a 768
     canvas and is clipped by the frame. Reproduced as drawn and FLAGGED: a
     divider that is inset 28 on the left and flush on the right is almost
     certainly the same nudge that put the whole group at x:27. */
  .site-footer__rule {
    display: block;
    left: 28px; top: 170px;
    width: 773px; height: 1px;
    background: #EDE7DF;
    opacity: 0.8;
  }

  .site-footer__bottom { position: static; margin: 0; padding: 0; }

  .site-footer__meta {
    position: absolute;
    top: 185px;
    margin: 0;
    color: #EDE7DF;
    font-family: var(--font-button);
    font-weight: var(--fw-reg);
    font-size: 11px;
    line-height: 15px;
    white-space: nowrap;
  }
  .site-footer__meta--left  { left: 43px;  width: 186px; }
  .site-footer__meta--right { left: 419px; width: 308px; text-align: right; }
}

/* ==========================================================================
   TABLET DRAWER — style guide #2129:10255 ("Hamburger menu tablet")
   ==========================================================================
   The 390 drawer rules live inside the max-width:767 block, so nothing there
   reaches this band. Rather than widen that block — which was tried and
   reverted, because it also carries the 390 header and footer geometry and
   leaked badly — the tablet drawer is written out in full here. The
   coordinates genuinely differ anyway, so there is little to share:

     panel   #2129:10256  358x810 at x:410 on the 768 canvas -> FLUSH RIGHT,
                          where the 390 panel is 330 at x:55 and leaves a 5px
                          gap. Written as right:0 so it stays anchored to the
                          edge across the whole band.
     content  shifts +28 against mobile (logo 22 -> 50, nav 24 -> 51)

   #2129:10302 — the nav is Inter 16 at 1.79em = 28.64 -> 29 per row, with a
   1px gap, so 8 rows measure 8*29 + 7*1 = 239 and the block runs 113 -> 352.

   NOT IN FIGMA — the brand-stage row, exactly as on mobile: the 768 stage
   frames draw no tab row either, so without it Launch/Growth/Scale are
   unreachable once you are on one. Placed in the 220px of clear space between
   the nav (ends 352) and the action pills (start 572).

   NOT PORTED — the sticky bar at this width. The style guide's note says the
   sticky menu appears on "mobile and tablet", but it only DRAWS it at 390
   (#2129:10419 / #2129:10430, both 390x86, the two background variants). There
   is no 768 sticky artboard, so it stays off in this band rather than being
   invented. FLAGGED.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1199px) {

  .site-drawer__scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 950;
  }
  .site-drawer__scrim[hidden] { display: none; }

  .site-drawer {
    display: block;
    position: fixed;
    right: 0; top: 34px;
    width: 358px; height: 810px;
    background: var(--color-surface-dark);
    border: 1px solid #AFC4A2;
    border-radius: 4px 0 0 0;
    box-sizing: border-box;
    z-index: 960;
  }
  .site-drawer[hidden] { display: none; }
  .site-drawer > * { position: absolute; }

  /* #2129:10315 — same 97x50.15 plate as mobile, moved 22 -> 50 */
  .site-drawer .logo-plate {
    left: 50px; top: 21px;
    width: 97px; height: 50.15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    border: 0.66px solid var(--bg);
  }
  .site-drawer .logo-plate img { width: 58.73px; height: 29.03px; }

  /* #2129:10257 / 10258 — the box is a separate 23x17 outline around "EN" */
  .site-drawer__lang {
    left: 179px; top: 40px; width: 70px;
    margin: 0;
    color: var(--white);
    font-family: var(--font-body);
    font-weight: var(--fw-reg);
    font-size: 12px;
    line-height: 15px;
    white-space: nowrap;
  }
  .site-drawer__langbox {
    left: 203px; top: 39px;
    width: 23px; height: 17px;
    border: 1px solid var(--gold-deep);
  }

  /* #2129:10259 */
  .site-drawer__cart { left: 281px; top: 37px; width: 20px; height: 20.29px; }
  .site-drawer__cart svg { width: 20px; height: 20.29px; }

  /* #2129:10302 — 8 rows, 29 each, 1px gap */
  .site-drawer__nav {
    left: 51px; top: 113px;
    width: 166px;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .site-drawer__nav a {
    display: block;
    height: 29px;
    color: var(--white);
    font-family: var(--font-body);
    font-weight: var(--fw-reg);
    font-size: 16px;
    line-height: 29px;
    white-space: nowrap;
  }
  .site-drawer__nav a[aria-current] { color: var(--gold); }

  /* Stage switcher moved OUT of the tablet drawer 2026-07-22 (client request):
     the Launch/Growth/Scale switch now lives on the stage hero card at tablet
     too (see .lx-tabs in launch-tablet.css), matching mobile. Hidden here so
     it is not in the menu as well. The action pills below are absolutely
     positioned, so removing it moves nothing. */
  .site-drawer__stages,
  .site-drawer__stages-label { display: none; }

  /* #2129:10269 / 10264 / 10272 — three 29-tall pills at x:50 */
  .site-drawer__act {
    left: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 29px;
    font-family: var(--font-body);
    font-weight: var(--fw-reg);
    font-size: 12px;
    line-height: 15px;
    white-space: nowrap;
  }
  .site-drawer__act--book {
    top: 572px; width: 168px;
    background: var(--white);
    color: var(--color-text);
    border: 1px solid var(--white);
  }
  .site-drawer__act--tel {
    top: 609px; width: 168px;
    background: none;
    color: var(--white);
    border: 1px solid var(--gold);
  }
  .site-drawer__act--wa {
    top: 646px; width: 168px;
    background: none;
    color: var(--white);
    border: 1px solid var(--gold);
  }

  /* #2129:10282 / 10277 — Inter 11, 160 wide */
  .site-drawer__meta {
    left: 50px; width: 160px;
    margin: 0;
    color: var(--white);
    font-family: var(--font-body);
    font-weight: var(--fw-reg);
    font-size: 11px;
    line-height: 13px;
    white-space: nowrap;
  }
  .site-drawer__meta--mail { top: 683px; }
  .site-drawer__meta--addr { top: 706px; }
  .site-drawer__meta a { color: inherit; }
}

/* ==========================================================================
   RTL / Arabic — chrome mirror
   --------------------------------------------------------------------------
   The chrome is a fixed-width absolutely-positioned canvas at each breakpoint,
   so dir="rtl" alone only reorders flow/flex content (nav items, footer text)
   and does not move an absolutely-positioned box. Every such box is mirrored
   here: within any containing block, right:L is the exact horizontal mirror of
   left:L, so each coordinate simply moves from left to right. [dir="rtl"] adds
   an attribute to the selector, so these outrank the LTR rules they mirror
   without depending on source order.
   ========================================================================== */

/* ---- chat widget: move to the left edge and mirror the panel ------------- */
[dir="rtl"] .chat { left: 38px; right: auto; }
[dir="rtl"] .chat__launcher { margin-left: 0; margin-right: auto; }
[dir="rtl"] .chat__panel { left: 0; right: auto; border-radius: 8px 8px 8px 0; }
[dir="rtl"] .chat__ava      { left: auto; right: 8px; }
[dir="rtl"] .chat__online   { left: auto; right: 26px; }
[dir="rtl"] .chat__name     { left: auto; right: 36px; }
[dir="rtl"] .chat__status   { left: auto; right: 36px; }
[dir="rtl"] .chat__wa       { left: auto; right: 206px; }
[dir="rtl"] .chat__close    { left: auto; right: 224px; }
[dir="rtl"] .chat__composer { left: auto; right: 8px; }
[dir="rtl"] .chat__input    { left: auto; right: 8px; }
[dir="rtl"] .chat__send     { left: auto; right: 209px; }
[dir="rtl"] .chat__prompts  { padding-left: 0; padding-right: 23px; }
/* bot bubble tail flips to the right, user bubble tail to the left */
[dir="rtl"] .chat__bubble--bot  { border-radius: 10px 0 10px 10px; }
[dir="rtl"] .chat__bubble--user { border-radius: 0 10px 10px 10px; }

/* ---- header caret / dropdown / active underline (all breakpoints) -------- */
[dir="rtl"] .site-header__caret { left: auto; right: 100%; margin-left: 0; margin-right: 4px; }
[dir="rtl"] .site-header__menu  { left: auto; right: -16px; }
[dir="rtl"] .site-header__link--active::after { left: auto; right: 0; }
[dir="rtl"] .site-header__count { left: auto; right: 14px; }

/* ==========================  DESKTOP  (>=1200)  ========================== */
@media (min-width: 1200px) {
  [dir="rtl"] .site-header__nav    { left: auto; right: 80px; }
  [dir="rtl"] .site-header__logo   { left: auto; right: 657px; }
  /* actions is a zero-width absolute box; make it full-width so its children
     can be anchored from the right */
  [dir="rtl"] .site-header__actions { left: 0; right: 0; }
  [dir="rtl"] .site-header__cart   { left: auto; right: 1067px; }
  [dir="rtl"] .site-header__lang   { left: auto; right: 1115px; }
  [dir="rtl"] .site-header__cta    { left: auto; right: 1213px; }

  [dir="rtl"] .site-header--checkout .site-header__logo   { left: auto; right: 79px; }
  [dir="rtl"] .site-header--checkout .site-header__secure { left: auto; right: 669px; }
  [dir="rtl"] .site-header--checkout .site-header__ssl    { left: auto; right: 1111px; text-align: left; }

  [dir="rtl"] .site-footer__logo         { left: auto; right: 123px; }
  [dir="rtl"] .site-footer__col--quick   { left: auto; right: 370px; }
  [dir="rtl"] .site-footer__col--legal   { left: auto; right: 568px; }
  [dir="rtl"] .site-footer__col--contact { left: auto; right: 808px; }
  [dir="rtl"] .site-footer__rule         { left: auto; right: 123px; }
  [dir="rtl"] .site-footer__meta--left   { left: auto; right: 123px; }
  [dir="rtl"] .site-footer__meta--right  { left: auto; right: 1008px; text-align: left; }
  [dir="rtl"] .site-footer--slim .site-footer__col--legal { left: auto; right: 483px; }
  [dir="rtl"] .site-footer--slim .site-footer__col--help  { left: auto; right: 722px; }

  [dir="rtl"] .cookie-bar__icon    { left: auto; right: 170px; }
  [dir="rtl"] .cookie-bar__title   { left: auto; right: 224px; }
  [dir="rtl"] .cookie-bar__text    { left: auto; right: 224px; }
  [dir="rtl"] .cookie-bar__actions { left: auto; right: 906px; }
}

/* ==========================  TABLET  (768-1199)  ========================== */
@media (min-width: 768px) and (max-width: 1199px) {
  /* mobile bar stays centred (left:50%/-384 margin), only its children flip */
  [dir="rtl"] .site-header__mobile .logo-plate    { left: auto; right: 39px; }
  [dir="rtl"] .site-header__mcta                   { left: auto; right: 489px; }
  [dir="rtl"] .site-header__mobile .site-header__cart  { left: auto; right: 659px; }
  [dir="rtl"] .site-header__mobile .site-header__count { left: auto; right: 20px; }
  [dir="rtl"] .site-header__mobile .site-header__burger { left: auto; right: 703px; }

  [dir="rtl"] .site-footer__logo         { left: auto; right: 43px; }
  [dir="rtl"] .site-footer__col--quick   { left: auto; right: 232px; }
  [dir="rtl"] .site-footer__col--legal   { left: auto; right: 374px; }
  [dir="rtl"] .site-footer__col--contact { left: auto; right: 512px; }
  [dir="rtl"] .site-footer__rule         { left: auto; right: 28px; }
  [dir="rtl"] .site-footer__meta--left   { left: auto; right: 43px; }
  [dir="rtl"] .site-footer__meta--right  { left: auto; right: 419px; text-align: left; }

  /* drawer slides from the LEFT in RTL */
  [dir="rtl"] .site-drawer { right: auto; left: 0; border-radius: 0 4px 0 0; }
  [dir="rtl"] .site-drawer .logo-plate  { left: auto; right: 50px; }
  [dir="rtl"] .site-drawer__lang        { left: auto; right: 179px; }
  [dir="rtl"] .site-drawer__langbox     { left: auto; right: 203px; }
  [dir="rtl"] .site-drawer__cart        { left: auto; right: 281px; }
  [dir="rtl"] .site-drawer__nav         { left: auto; right: 51px; }
  [dir="rtl"] .site-drawer__act         { left: auto; right: 50px; }
  [dir="rtl"] .site-drawer__meta        { left: auto; right: 50px; }
}

/* ==========================  MOBILE  (<=767)  ============================ */
@media (max-width: 767px) {
  [dir="rtl"] .chat { left: 16px; right: auto; }

  [dir="rtl"] .site-header__mobile .logo-plate { left: auto; right: 9px; }
  [dir="rtl"] .site-header__cart               { left: auto; right: 310px; }
  [dir="rtl"] .site-header__burger             { left: auto; right: 354px; }

  /* drawer slides from the LEFT (panel ends 5px in on the right in RTL) */
  [dir="rtl"] .site-drawer { left: 0; right: auto; border-radius: 0 4px 0 0; }
  [dir="rtl"] .site-drawer .logo-plate { left: auto; right: 22px; }
  [dir="rtl"] .site-drawer__lang       { left: auto; right: 151px; }
  [dir="rtl"] .site-drawer__langbox    { left: auto; right: 175px; }
  [dir="rtl"] .site-drawer__cart       { left: auto; right: 253px; }
  [dir="rtl"] .site-drawer__nav        { left: auto; right: 23px; }
  [dir="rtl"] .site-drawer__act        { left: auto; right: 22px; }
  [dir="rtl"] .site-drawer__meta       { left: auto; right: 22px; }

  /* sticky mini-bar */
  [dir="rtl"] .site-sticky__logo         { left: auto; right: 9px; }
  [dir="rtl"] .site-sticky__cart         { left: auto; right: 285px; }
  [dir="rtl"] .site-sticky__burger       { left: auto; right: 332px; }
  [dir="rtl"] .site-sticky__label--cart  { left: auto; right: 285px; }
  [dir="rtl"] .site-sticky__label--menu  { left: auto; right: 329px; }

  /* footer (385x388): logo top-right, Legal top-left, Quick bottom-right,
     Contact bottom-left — mirrored from the LTR placement */
  [dir="rtl"] .site-footer__logo             { left: auto; right: 7px; }
  [dir="rtl"] .site-footer__col .site-footer__heading { left: auto; right: 0; }
  [dir="rtl"] .site-footer__col li           { left: auto; right: 0; }
  [dir="rtl"] .site-footer__col--legal       { left: auto; right: 193px; }
  [dir="rtl"] .site-footer__col--quick       { left: auto; right: 8px; }
  [dir="rtl"] .site-footer__col--contact     { left: auto; right: 191px; }
  [dir="rtl"] .site-footer--slim .site-footer__col--help { left: auto; right: 8px; }
  [dir="rtl"] .site-footer__rule--m1         { left: auto; right: 8px; }
  [dir="rtl"] .site-footer__rule--m2         { left: auto; right: 191px; }
  [dir="rtl"] .site-footer__rule             { left: auto; right: 8px; }
  [dir="rtl"] .site-footer__meta--right      { left: auto; right: 8px; text-align: right; }
  [dir="rtl"] .site-footer__meta--left       { left: auto; right: 8px; text-align: left; }
}

/* i18n nav fit — Russian labels are ~18% longer than English, so the 8-tab
   desktop nav grew past the centred logo plate at x:657. Tighten the gap for RU
   only; EN and AR fit. 4px (not 8) because the two submenu items now each carry
   a 12px caret-compensation margin (see .site-header__item) — the tighter base
   gap keeps the RU nav within its ~11px of clearance while making every visible
   gap equal, and it also removes the old caret overlap RU had (its 8px gap was
   narrower than the 12px the caret drew into it). */
@media (min-width: 1200px) {
  html[lang="ru"] .site-header__nav { gap: 4px; }
}

/* ==========================================================================
   Cookie preferences panel — Figma #2129:10385
   A consent modal with per-category toggles. Counter-zoomed (like the toast)
   so it renders at real size regardless of the canvas zoom.
   ========================================================================== */
.cookie-prefs {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, .55);
}
.cookie-prefs[hidden] { display: none; }

.cookie-prefs__panel {
  zoom: calc(1 / var(--canvas-scale, 1));
  position: relative;
  width: 748px;
  max-width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 28px 34px 30px;
  background: #FFFFFF;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
  font-family: Inter, system-ui, sans-serif;
}

.cookie-prefs__close {
  position: absolute;
  top: 20px;
  right: 26px;
  appearance: none;
  border: 0;
  background: none;
  color: var(--gold);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}

.cookie-prefs__title { margin: 0 0 8px; font-weight: 700; font-size: 16px; color: #111111; }

.cookie-prefs__intro {
  margin: 0 0 16px;
  max-width: 420px;
  font-family: 'Open Sans', Inter, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: #5A5A5A;
}
.cookie-prefs__intro a { color: #5A5A5A; text-decoration: underline; }

.cookie-prefs__list {
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  padding: 14px 0 6px;
}

.cookie-cat { margin-bottom: 14px; }
.cookie-cat__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cookie-cat__name { font-weight: 700; font-size: 13px; color: #111111; }
.cookie-cat__desc { margin: 4px 0 0; font-size: 11px; line-height: 1.4; color: #5A5A5A; }

.cookie-toggle {
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 20px;
  border: 0;
  border-radius: 10px;
  background: #2D2D2D;
  cursor: pointer;
  padding: 0;
  appearance: none;
  transition: background .15s ease;
}
.cookie-toggle__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #FFFFFF;
  transition: left .15s ease;
}
.cookie-toggle.is-on,
.cookie-toggle[aria-checked="true"] { background: var(--gold); }
.cookie-toggle.is-on .cookie-toggle__knob,
.cookie-toggle[aria-checked="true"] .cookie-toggle__knob { left: 22px; }
.cookie-toggle.is-locked { cursor: default; }

.cookie-prefs__actions { display: flex; align-items: center; gap: 16px; margin-top: 22px; flex-wrap: wrap; }
.cookie-prefs__btn {
  appearance: none;
  border: 1px solid var(--gold);
  background: transparent;
  color: #333333;
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 11px;
  padding: 10px 14px;
  min-height: 36px;
  cursor: pointer;
  border-radius: 2px;
}
.cookie-prefs__btn:hover,
.cookie-prefs__btn:focus-visible { background: rgba(216, 160, 37, .1); }
.cookie-prefs__btn--accept { background: var(--gold); color: #FFFFFF; }
.cookie-prefs__btn--accept:hover,
.cookie-prefs__btn--accept:focus-visible { background: var(--gold-deep, #b3821a); }

@media (max-width: 767px) {
  .cookie-prefs__btn { flex: 1 1 100%; text-align: center; }
}

/* RTL: the close button moves to the left so it clears the right-aligned title */
[dir="rtl"] .cookie-prefs__close { right: auto; left: 26px; }