/* ==========================================================================
   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: 20px; }

.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.
--------------------------------------------------------------------------- */
.site-header__item { position: relative; }

.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);
}

/* 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);
}

/* ---------------------------------------------------------------- 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 1px 2px 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; }

/* --- messages --- */
.chat__botrow { left: 8px; top: 44px; width: 163px; height: 54px; }
.chat__botrow > * { position: absolute; }

.chat__botava {
  left: 0; top: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
}

.chat__botava img {
  display: block;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 0.2px solid var(--chat-bar);
  object-fit: cover;
}

.chat__botlabel {
  left: 30px; top: 11px; width: 37px;
  color: #000;
  opacity: 0.75;
  font-size: 6px;
  line-height: 7px;
}

.chat__botbubble {
  left: 22px; top: 22px;
  width: 141px; height: 32px;
  background: var(--chat-bubble);
  border-radius: 0 12px 12px 12px;
}

.chat__botbubble p {
  position: absolute;
  left: 8px; top: 6px; width: 110px;
  color: #000;
  opacity: 0.75;
  font-size: 8px;
  line-height: 10px;
}

.chat__userbubble {
  left: 87px; top: 150px;
  width: 142px; height: 22px;
  background: var(--gold);
  border-radius: 12px 0 12px 12px;
}

.chat__userbubble p {
  position: absolute;
  left: 8px; top: 6px; width: 116px;
  color: var(--white);
  opacity: 0.75;
  font-size: 8px;
  line-height: 10px;
}

/* --- reply chips inside the bot message --- */
.chat__replies { left: 30px; top: 102px; width: 161px; height: 28px; }

.chat__chip {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  padding: 0;
  border: 0;
  height: 11px;
  background: var(--chat-bubble);
  border-radius: 0 2px 0 2px;
  color: #000;
  opacity: 0.4;
  font-family: var(--font-body);
  font-size: 6px;
  line-height: 11px;
  text-align: center;
  cursor: pointer;
}

.chat__chip:hover, .chat__chip:focus-visible { opacity: 0.7; }

/* the file draws chip 2 in its selected state: gold plate, white label */
.chat__chip--on {
  background: var(--gold);
  box-shadow: 0 1px 3px 0 rgba(45, 45, 45, 0.25);
  color: var(--white);
  opacity: 0.85;
  font-weight: var(--fw-med);
}

.chat__chip--on:hover, .chat__chip--on:focus-visible { opacity: 1; }

.chat__chip--r1 { left: 0;    top: 0;    width: 76px; }
.chat__chip--r2 { left: 84px; top: 0;    width: 77px; }
.chat__chip--r3 { left: 0;    top: 17px; width: 62px; }
.chat__chip--r4 { left: 70px; top: 17px; width: 73px; }

/* --- quick actions above the composer --- */
.chat__actions { left: 8px; top: 312px; width: 231px; height: 11px; }

.chat__actions .chat__chip--a1 { left: 0;     width: 48px; }
.chat__actions .chat__chip--a2 { left: 60px;  width: 68px; }
.chat__actions .chat__chip--a3 { left: 140px; width: 68px; }

.chat__wa {
  position: absolute;
  left: 220px; top: 0;
  width: 11px; height: 11px;
  padding: 0;
  border: 0;
  background: var(--chat-field);
  border-radius: 0 2px 0 2px;
  cursor: pointer;
}

.chat__wa img { display: block; width: 9px; height: 9px; margin: 1px; }

/* --- 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; }

/* Below the desktop breakpoint the canvas is not scaled, so the 6-8px type
   would be unreadable. The widget is desktop-only until the mobile frames
   are ported. */
@media (max-width: 1199px) { .chat { display: none; } }


/* ==========================================================================
   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 — NOT from the file. The 390 stage frames draw no
     tab row, leaving the three pages unreachable from one another on a
     phone. It sits in the 350-573 gap below the nav; the actions below are
     absolutely positioned, so nothing that was measured moves. Styled a step
     down from the nav so it reads as secondary, and it mirrors the wording
     and order of the home hero's tabs. */
  .site-drawer__stages {
    left: 23px; top: 366px;
    width: 260px;
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .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; }

  .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 */
  .chat { right: 16px; bottom: 16px; }
}

  /* 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); }

  /* NOT IN FIGMA — see the header note */
  .site-drawer__stages { left: 51px; top: 369px; width: 260px; }
  .site-drawer__stages-label {
    margin: 0 0 6px;
    color: var(--gold);
    font-family: var(--font-body);
    font-weight: var(--fw-semi);
    font-size: 11px;
    line-height: 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .site-drawer__stages a {
    display: inline-block;
    margin-right: 16px;
    color: var(--white);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 20px;
  }
  .site-drawer__stages a[aria-current] { color: var(--gold); }

  /* #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; }
}