/* ============================================================
   MKOR · tokens.css - house design system
   Single source of truth. Shared by מקור · מבוא · מנוף · מקום.
   Every colour, size, radius and space on the site comes from here.
   ============================================================ */

:root {
  /* ---- palette (LOCKED) ---- */
  --ivory:        #EDE4D3;   /* PAGE GROUND. */
  --ivory-text:   #F7F3EA;   /* Same value, different job: the only legal text colour
                                over dark or over a photograph. Split deliberately so
                                the day the page ground moves, text over dark does not
                                move with it. Never find-and-replace #F7F3EA blindly. */
  --warm-white:   #F1EADC;
  --card:         #FFFFFF;
  --ink:          #1A1714;
  --espresso:     #241C13;
  --bronze:       #B88B4E;
  --bronze-deep:  #7C5626;
  --plum:         #54405C;   /* the third colour. ONE role only since 19.10: one data band
                                per page (.eyebrow and card link retired).
                                Ivory on plum 8.37:1. BRONZE ON PLUM IS 3.02:1 -
                                forbidden as text. Never a button, border, divider,
                                card background, or text over a photograph. */
  --stone:        #C9BBA0;   /* borders and dividers ONLY - never text (MVOE acceptance test).
                                MKOR's sheet ships .footer-fine/.footer-link as stone; MVOE
                                overrides that to ivory. Documented deviation, not a drift. */
  --muted:        #5C544A;
  --line:         #DAD0BE;   /* borders and dividers ONLY - never text, same rule as --stone. */

  /* ---- type: one family token. Assistant carries no Cyrillic, so RU swaps
     to Rubik at the ROOT and every component inherits it. Never hardcode
     a family in a component rule - that is what broke Russian once. ---- */
  --font: Assistant, sans-serif;

  /* ---- error ----------------------------------------------------
     Dimmed brick. The house never had an error colour; this is a real
     addition to the palette, not an alignment. 6.40:1 on --ivory,
     7.09:1 on --card.
     LEGAL USE: error text and the border of an invalid field. Nothing
     else - not a fill, not a badge, not an icon, not a background.
     And never the only carrier of the message: an error must also be
     stated in words (WCAG 1.4.1, 3.3.1). Colour reinforces, never informs.
     ---------------------------------------------------------------- */
  --error:        #8A4438;

  /* approved external-brand exception #2 - WhatsApp green */
  --whatsapp:     #25D366;

  /* ---- type scale: 7 steps, no others ---- */
  --fs-micro: 13px;
  --fs-sm:    15px;
  --fs-body:  17px;
  --fs-lead:  20px;
  --fs-h3:    24px;
  --fs-h2:    27px;
  --fs-h1:    34px;

  /* ---- fluid heading scales: 4 ---- */
  --fluid-hero:    clamp(32px, 6.4vw, 72px);
  --fluid-page:    clamp(27px, 5vw, 56px);
  --fluid-section: clamp(24px, 3.9vw, 39px);   /* 19.10: +15% (was 21/3.4vw/34) */
  --fluid-sub:     clamp(16px, 1.5vw, 20px);

  /* ---- letter-spacing: 2 values ---- */
  --track-tight: 0;          /* MKOR measured 0. The LOCKUP does not read this token - it
                                 keeps -0.035em written out. When MKOR folded this to 0 its
                                 logo silently lost the tracking; that is why the mark is
                                 pinned by value, not by token. */
  --track-wide:   0.06em;    /* eyebrows / small caps */

  /* ---- radius: 8 button · 16 card · named brand shapes ---- */
  --r-btn:  8px;
  --r-card: 16px;
  --r-pill: 999px;   /* chips */
  --r-seal: 12%;     /* the brand's own shape - MVOE's square seal */

  /* ---- elevation: one whisper shadow ---- */
  --shadow-card: 0 4px 16px rgba(26, 23, 20, .05);

  /* ---- rhythm ---- */
  --section-y:  clamp(44px, 6vw, 72px);
  --section-x:  24px;
  --wrap:       1200px;
  --wrap-read:  820px;

  /* ---- APPROVED EXCEPTION #1 ----------------------------------
     --scrim: the ONLY gradient permitted anywhere in the system.
     Legal use: over a photograph, nothing else. Any other use is a bug.

     FOUR layers. The floor is not flat - it fades toward the free edge
     so the sea stays turquoise instead of going grey.

     ❗ --scrim-accent and --scrim-floor are ACCESSIBILITY values, measured
       against THIS photograph by sampling real pixels (see CLAUDE.md).
       MVOE's values were re-measured against hero-bay-mvoe (Haifa bay from
       the Bahá'í Gardens): min contrast 4.57-4.77 across nine widths.
     ❗ --scrim-far must never drop below .05 - under that the free edge
       detaches from the dark half and the hero reads as two images glued
       together.
     ------------------------------------------------------------ */
  --scrim-dir:    left;
  --scrim-hold:   58%;
  --scrim-accent: .50;
  --scrim-floor:  .28;
  --scrim-far:    .05;

  /* mobile vertical ramp - re-measured for MVOE's photograph.
     MKOR's .80/.72/.30 measured 6.6-7.0 here, over the 5.2 ceiling. */
  --scrim-m-base: .70;
  --scrim-m-mid:  .62;
  --scrim-m-top:  .24;
}

/* LTR flips the scrim, exactly like the logo seal rule. Nothing else changes. */
html[dir="ltr"] { --scrim-dir: right; }

/* Russian: Rubik, set once at the root. */
html[lang="ru"] { --font: Rubik, Assistant, sans-serif; }

/* ---- THE ONLY EXPLICIT FONT NAME IN THE PROJECT ----------------
   The wordmark is pinned to Assistant in every language, so `מבוא` and
   `MVOE` render identically in HE, EN and RU. Everything else in the
   system reads var(--font); this rule is the single exception.

   `.wordmark` is FAMILY ONLY - deliberately not `.brand__word`, which
   also carries size, weight, colour and tracking. The footer crosslink
   mark must inherit the 14px of the sentence it sits inside, so it takes
   `.wordmark` and nothing else.
   ---------------------------------------------------------------- */
.wordmark { font-family: Assistant, sans-serif; }

/* ============================================================
   base
   ============================================================ */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--ivory);
  color: var(--ink);
  font-size: var(--fs-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-weight: 800;
  letter-spacing: var(--track-tight);
  line-height: 1.14;
  /* Russian compounds (Конфиденциальности) are longer than a 375px column at
     --fluid-page. Without this a single word overflows the viewport instead of
     breaking - measured 36px of horizontal scroll on /ru/privacy. */
  overflow-wrap: break-word;
}
/* 15.10: balance h1 lines so the seal-coupled last word does not drop to a line
   of its own. 19.10k: extended to h2 (Michael) - no lone last word in any page heading. */
h1, h2 { text-wrap: balance; }

a { color: var(--bronze-deep); }
a:hover { color: var(--ink); }

img { max-width: 100%; }

::selection { background: var(--bronze); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .hero__media { animation: none !important; }
}

/* ============================================================
   layout
   ============================================================ */

.section      { padding: var(--section-y) var(--section-x); }
.section--alt { background: var(--warm-white); }
.section--card{ background: var(--card); }
.section--dark{ background: var(--espresso); color: var(--ivory-text); }

.wrap      { max-width: var(--wrap); margin: 0 auto; }
.wrap-read { max-width: var(--wrap-read); margin: 0 auto; }

/* ============================================================
   hero - full-bleed photograph, headline on top of it
   ============================================================ */

.hero {
  position: relative;
  min-height: clamp(560px, 46vw, 880px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--espresso);
}

.hero__media {
  position: absolute;
  inset: -4%;                 /* required: without it the Ken Burns scale exposes edges */
  width: 108%;
  height: 108%;
  max-width: none;            /* the global img cap would defeat the bleed */
  object-fit: cover;
  object-position: center 58%;
  filter: saturate(1.12) contrast(1.04);
  will-change: transform;
  animation: kenburns 26s ease-in-out infinite alternate;
}

@keyframes kenburns {
  from { transform: scale(1.000) translate3d(0, 0, 0); }
  to   { transform: scale(1.075) translate3d(1.2%, -1.4%, 0); }
}

/* the one legal gradient in the system - four layers */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    /* 1 - directional accent: darkens only the copy side */
    linear-gradient(to var(--scrim-dir),
      rgba(36, 28, 19, var(--scrim-accent))  0%,
      rgba(36, 28, 19, var(--scrim-accent))  var(--scrim-hold),
      rgba(36, 28, 19, 0)                   100%),
    /* 2 - vertical depth: shields the headline from the sky, anchors the base */
    linear-gradient(to bottom,
      rgba(36, 28, 19, .10)   0%,
      rgba(36, 28, 19, 0)    34%,
      rgba(36, 28, 19, .18) 100%),
    /* 3 - a floor that fades: this is what keeps the sea alive */
    linear-gradient(to var(--scrim-dir),
      rgba(36, 28, 19, var(--scrim-floor))  0%,
      rgba(36, 28, 19, var(--scrim-floor))  var(--scrim-hold),
      rgba(36, 28, 19, var(--scrim-far))   100%);
}

/* Phone and tablet: the copy spans nearly the whole width, so there is no
   far side to protect. The scrim goes VERTICAL and the copy sits at the
   bottom - the alignment is mandatory, not cosmetic: without it the
   headline floats above the dark zone and measures 2.31:1. */
@media (max-width: 1199px) {
  /* the inner must FILL the hero, otherwise flex-end has no free space to
     act on and the copy stays optically centred */
  .hero { align-items: stretch; }
  .hero__scrim {
    background: linear-gradient(to top,
      rgba(36, 28, 19, var(--scrim-m-base))   0%,
      rgba(36, 28, 19, var(--scrim-m-mid))   84%,
      rgba(36, 28, 19, var(--scrim-m-top))  100%);
  }
  .hero .hero__inner { display: flex; align-items: flex-end; }
  /* 540-1199: the wide photograph, framed higher so the bay stays in shot above the bottom-aligned copy.
     Below 540 the Home hero serves the 4:5 crop (20.10d) and the same position keeps sky, bay, Shrine and stairs. */
  .hero__media { object-position: center 42%; }
}

/* A short window puts the viewport-bottom-pinned floats exactly where the
   bottom-aligned hero CTA lands. The copy cannot move: lifting it pushes the
   headline out of the vertical scrim's dark zone (measured 2.3:1 at 390px).
   So the floats move instead - only on short viewports, only vertically, and
   ONLY on a page that actually has a full-bleed hero (:has(.hero) keeps this
   off the 20+ pages whose ivory hero band puts a headline under a top pin).
   BOTH floats, not one: the CTA sits on the inline-start edge, so RTL collides
   with the right-pinned a11y widget and LTR with the left-pinned WhatsApp one. */
/* 20.10y: the short-viewport lift to top:92px is removed - floats move only for a bottom banner (house rule). */

.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--section-y) var(--section-x);
  text-align: start;          /* direction comes from <html dir>, never hardcoded */
}

.hero__copy { max-width: 640px; }

.hero__title {
  margin: 0;
  font-size: var(--fluid-hero);
  font-weight: 800;
  letter-spacing: var(--track-tight);
  line-height: 1.08;
  color: var(--ivory-text);
}

.hero__sub {
  margin: 22px 0 0;
  font-size: var(--fluid-sub);
  line-height: 1.7;
  color: var(--ivory-text);
}

.hero__note {
  margin: 18px 0 0;
  font-size: var(--fs-body);
  color: var(--ivory-text);
}

.hero__note a {
  color: var(--ivory-text);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* staged reveal - the hidden state is gated on .js so that if the script
   never runs (blocked, error, no-JS) the copy is visible by default */
.rv {
  opacity: 1;
  transform: none;
  transition: opacity .9s cubic-bezier(.2, .8, .2, 1),
              transform .9s cubic-bezier(.2, .8, .2, 1);
}
html.js .rv { opacity: 0; transform: translateY(18px); }
html.js .hero.on .rv { opacity: 1; transform: none; }
.hero.on .rv:nth-child(1) { transition-delay: .05s; }
.hero.on .rv:nth-child(2) { transition-delay: .16s; }
.hero.on .rv:nth-child(3) { transition-delay: .27s; }
.hero.on .rv:nth-child(4) { transition-delay: .38s; }

/* scroll cue - a line, no label */
.cue {
  position: absolute;
  bottom: 26px;
  inset-inline-start: 50%;
  transform: translateX(50%);
}
html[dir="ltr"] .cue { transform: translateX(-50%); }
.cue i {
  display: block;
  width: 1px;
  height: 44px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom, rgba(247, 243, 234, 0), var(--bronze));
}
.cue i::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: -44px;
  width: 1px;
  height: 44px;
  background: var(--ivory);
  animation: drop 2.4s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes drop {
  0%   { transform: translateY(0);    opacity: 0; }
  20%  {                              opacity: 1; }
  100% { transform: translateY(88px); opacity: 0; }
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

/* ============================================================
   buttons - bronze fill always carries INK text
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 14px 30px;
  border: 0;
  border-radius: var(--r-btn);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}

.btn--primary        { background: var(--bronze); color: var(--ink); }
.btn--primary:hover  { background: var(--bronze-deep); color: var(--ivory-text); }
@media (hover: hover) and (pointer: fine) { .btn--primary:hover { transform: translateY(-2px); } }

.btn--ghost          { background: transparent; color: var(--ivory-text); border: 1px solid var(--ivory-text); }
.btn--ghost:hover    { background: var(--ivory); color: var(--ink); }

.btn--quiet          { background: transparent; color: var(--ink); border: 1px solid var(--ink); }   /* CLAUDE.md: secondary = ink outline (1.4.11) */
.btn--quiet:hover    { border-color: var(--bronze); color: var(--bronze-deep); }

/* ============================================================
   cards
   ============================================================ */

.card {
  background: var(--card);
  border: 0.5px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 26px;
}

/* services grid - fixed flex basis, so the per-row count is deterministic AND
   a short last row centres. */
.svc-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.svc-grid > * { flex: 0 0 260px; min-width: 0; }
.svc-grid:has(> :nth-child(5)) > * { flex: 0 0 320px; }

@media (max-width: 1151px) {
  .svc-grid > *,
  .svc-grid:has(> :nth-child(5)) > * { flex: 0 0 340px; }
}
@media (max-width: 767px) {
  .svc-grid > *,
  .svc-grid:has(> :nth-child(5)) > * { flex: 0 0 100%; }
}

/* ============================================================
   type helpers
   ============================================================ */

/* .eyebrow retired 19.10 (Michael): section labels removed site-wide. */
/* Section h2 - a little more air above (19.10). Matches every section heading,
   whether it uses .h-section or the inline token. */
h2.h-section, h2[style*="--fluid-section"] { padding-block-start: .3em; }

/* Latin data inside RTL/LTR copy (figures, names, licence numbers): isolated, left-to-right. 19.10c */
.ltr { direction: ltr; unicode-bidi: isolate; }

.h-page    { font-size: var(--fluid-page); }
.h-section { font-size: var(--fluid-section); }
.lead      { font-size: var(--fluid-sub); line-height: 1.7; color: var(--muted); }
.muted     { color: var(--muted); }

/* ---- house shapes - four brands, all filled bronze ---- */
.seal {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bronze);
}
.seal--sq  { border-radius: var(--r-seal); }           /* מבוא · MVOE */
/* מנוף · MNOF - equilateral, rounded corners (r 1.9 on h 18), same path as the MNOF logo. Approved by Michael 26.10. */
.seal--tri {
  width: 20.13px;
  height: 18px;
  border: 0;
  border-radius: 0;
  background: var(--bronze);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20.128 18'%3E%3Cpath d='M2.124 18A2.124 2.124 0 0 1 .285 14.814L8.224 1.062a2.124 2.124 0 0 1 3.679 0l7.94 13.752A2.124 2.124 0 0 1 18.004 18Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20.128 18'%3E%3Cpath d='M2.124 18A2.124 2.124 0 0 1 .285 14.814L8.224 1.062a2.124 2.124 0 0 1 3.679 0l7.94 13.752A2.124 2.124 0 0 1 18.004 18Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.seal--sm  { width: 9px; height: 9px; }
.seal--tri.seal--sm { width: 10.06px; height: 9px; }

/* Brand lockup: word, THEN seal. Always. `dir` is what flips it - never the
   DOM order.
   The class is REQUIRED on any anchor that wraps a lockup: the global `a`
   rule paints bronze-deep + underline, which would restyle the locked mark.
   Explicit and greppable - never widen this to a :has() selector. */
.lockup { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }

.crosslink {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 10px;
}
.crosslink__sep  { color: var(--muted); }
.crosslink__self { color: var(--ink); }

/* ============================================================
   site header
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--card);
  border-bottom: 0.5px solid var(--line);
  box-shadow: 0 1px 12px rgba(26, 23, 20, .05);
  font-family: var(--font);
}

.site-header__bar {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 14px var(--section-x);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  flex-shrink: 0;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
@media (hover: hover) and (pointer: fine) { .brand:hover { transform: translateY(-4px); } }

.brand__word {
  font-size: var(--fs-h3);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.035em;   /* pinned by value - see --track-tight */
}

.site-nav { align-items: center; gap: 28px; }

.mvoe-nav-link {
  position: relative;
  display: inline-block;
  min-width: 24px;   /* 2.5.8 - nav, not a link inside running text */
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 500;
  padding-bottom: 7px;
  transition: color .2s ease;
}
.mvoe-nav-link::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  height: 2.5px;
  width: 100%;
  background: var(--bronze);
  border-radius: var(--r-btn);
  transform: scaleX(0);
  transform-origin: right center;   /* transform-origin takes no logical keywords */
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
html[dir="ltr"] .mvoe-nav-link::after { transform-origin: left center; }
.mvoe-nav-link:hover { color: var(--bronze-deep); }
.mvoe-nav-link:hover::after { transform: scaleX(1); }

.mvoe-nav-link--caret { display: inline-flex; align-items: center; gap: 5px; }

.dropdown { position: relative; }
.dropdown__panel {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  padding-top: 14px;
  z-index: 70;
}
.menu-card {
  background: var(--card);
  border: 0.5px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: 0 14px 34px rgba(26, 23, 20, .12);
  padding: 8px;
  min-width: 260px;
}
.menu-item {
  display: block;
  padding: 11px 14px;
  border-radius: var(--r-btn);
  text-decoration: none;
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: background .2s ease, color .2s ease;
}
.menu-item:hover { background: var(--ivory); color: var(--bronze-deep); }

.header-actions { align-items: center; gap: 12px; flex-shrink: 0; }

.btn--sm   { min-height: 0; padding: 11px 22px; font-size: var(--fs-sm); }
.btn--dark { background: var(--espresso); color: var(--ivory-text); border: 1px solid var(--ink); }
.btn--dark:hover { background: var(--bronze); border-color: var(--bronze); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .btn--dark:hover { transform: translateY(-2px); } }

.lang {
  display: flex;
  border: 0.5px solid var(--line);
  border-radius: var(--r-btn);
  overflow: hidden;
  flex-shrink: 0;
}
.lang__opt {
  padding: 8px 11px;
  font-family: var(--font);
  font-size: var(--fs-micro);
  font-weight: 700;
  text-decoration: none;
  color: var(--muted);
  transition: background .2s ease, color .2s ease;
}
.lang__opt--on { background: var(--espresso); color: var(--ivory-text); }

.burger {
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.burger span { width: 24px; height: 2px; background: var(--espresso); display: block; }

.mobile-menu { border-top: 0.5px solid var(--line); padding: 8px var(--section-x) 18px; }
.mobile-menu__link {
  display: block;
  padding: 13px 0;
  text-decoration: none;
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 500;
  border-bottom: 0.5px solid var(--line);
}
.mobile-menu__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  margin-top: 14px;
  text-decoration: none;
  font-size: var(--fs-body);
  font-weight: 700;
  padding: 12px;
  border-radius: var(--r-btn);
}
.mobile-menu__langs { display: flex; gap: 8px; margin-top: 10px; }
.lang-m {
  flex: 1;
  text-align: center;
  padding: 12px;
  border: 0.5px solid var(--line);
  border-radius: var(--r-btn);
  text-decoration: none;
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--muted);
}
.lang-m--on { background: var(--espresso); color: var(--ivory-text); border-color: var(--ink); }

/* ============================================================
   site footer
   ============================================================ */

.site-footer {
  background: var(--espresso);
  color: var(--ivory-text);
  font-family: var(--font);
}
.site-footer__grid {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 72px var(--section-x) 36px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
}
.footer-brand { display: flex; align-items: center; gap: 9px; }
.footer-brand__word { font-size: var(--fs-h2); font-weight: 800; color: var(--ivory-text); }
.footer-gloss { margin: 14px 0 0; font-size: var(--fs-micro); color: var(--muted); letter-spacing: var(--track-wide); }
.footer-lead {
  margin: 16px 0 0;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--ivory-text);
  max-width: 280px;
}
.footer-h {
  margin: 0 0 16px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ivory-text);
  letter-spacing: var(--track-wide);
}
.footer-link {
  display: block;
  padding: 7px 0;
  text-decoration: none;
  color: var(--ivory-text);
  font-size: var(--fs-sm);
}
.footer-link:hover { color: var(--bronze); }
.footer-text { margin: 0 0 9px; font-size: var(--fs-sm); color: var(--ivory-text); }
.footer-cta {
  display: inline-block;
  margin-top: 8px;
  color: var(--bronze);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 700;
}
.footer-cta:hover { color: var(--ivory-text); }

/* house trio - circle · triangle · square, the four brands' own shapes */
.house {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--section-x) 34px;
}
.house__shapes { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.house__note { margin: 0; font-size: var(--fs-micro); line-height: 1.7; color: var(--ivory-text); }

.footer-bar { border-top: 0.5px solid var(--muted); }
.footer-bar__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 22px var(--section-x);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.footer-fine { font-size: var(--fs-micro); color: var(--ivory-text); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-legal a { color: var(--ivory-text); text-decoration: none; font-size: var(--fs-micro); }
.footer-legal a:hover { color: var(--bronze); }

/* WhatsApp: approved external-brand exception #2. */
.mvoe-wa-float {
  position: fixed;
  bottom: 24px;
  right: 24px;   /* bottom-RIGHT; the a11y button owns bottom-left (25.09) */
  z-index: 80;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--whatsapp);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(37, 211, 102, .35);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
}
@media (hover: hover) and (pointer: fine) { .mvoe-wa-float:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 12px 26px rgba(37, 211, 102, .45); } }

.mvoe-sticky-bar { display: none; }

@media (max-width: 767px) {
  .mvoe-sticky-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    inset-inline: 0;
    z-index: 90;
    background: var(--card);
    border-top: 0.5px solid var(--line);
    box-shadow: 0 -4px 16px rgba(26, 23, 20, .08);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    gap: 10px;
  }
  /* 20.10z: the bar reserve lives in the footer (.mvoe-footer-end), espresso, not as body padding. */
}

/* ============================================================
   FAQ accordion - <details> is the house pattern
   ============================================================ */

summary::-webkit-details-marker { display: none; }
summary::marker { content: ""; }

details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
}
/* Accordion = MKOR's (20.10za): a chevron that points DOWN and flips to UP on open (rotateX-free 180deg),
   the same 250ms house easing in RTL and LTR, and the answer eases in from 4px above. Summaries that already
   carry an <svg> chevron use it; the rest draw the same chevron as a mask, so every FAQ on the site matches. */
details > summary:not(:has(svg))::after {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
details > summary > svg { flex: 0 0 auto; transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
details[open] > summary:not(:has(svg))::after,
details[open] > summary > svg { transform: rotate(180deg); }
details[open] > summary ~ * { animation: mvoeFaqIn .25s cubic-bezier(.2, .8, .2, 1); }
@keyframes mvoeFaqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
details > summary:hover { color: var(--bronze-deep); }

/* ============================================================
   plum data band - ONE per page, and never on a page that also
   carries the espresso section. One dark moment per page.
   ============================================================ */

.plum-block {
  background: var(--plum);
  border-radius: var(--r-card);
  padding: clamp(26px, 4vw, 40px);
  color: var(--ivory-text);
}
.plum-block h2,
.plum-block h3,
.plum-block strong { color: var(--ivory-text); }
.plum-block a {
  color: var(--ivory-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Deliberate deviation from MKOR, which uses --stone for secondary text on its
   olive block. This sheet forbids stone as a text colour (MVOE acceptance test),
   so ALL text on plum is ivory and the hierarchy is carried by weight and size.
   The hover is opacity for the same reason - it cannot fall back to stone. */
.plum-block a:hover { opacity: .82; }
/* The band's own proportions: a thin strip, a big gap, and a small label
   against a huge number. The contrast is made by SIZE and AIR, never by
   dimming the label - stone as text is forbidden here and opacity on text
   is not a substitute for it. */
.plum-block--band { padding: 28px 32px; }   /* MKOR .trust-card measured 28px 32px */
.trust__label { font-size: var(--fs-sm); color: var(--ivory-text); }

.plum-block .step-num {
  background: var(--ivory-text) !important;
  border-color: var(--ivory-text) !important;
  color: var(--plum) !important;
}

/* Card cue (19.10, option A). The whole card is ONE <a>; its accessible name
   comes from the card's own text. This square is the visual cue only
   (aria-hidden): the house square - 40px, radius 12%, 1.5px bronze ring - in a
   44px footprint, at the card's bottom inline-end. The arrow points in the
   reading direction (RTL flips it). Hover/focus: square fills bronze, arrow ink.
   Plum no longer carries a card-link role. */
.card-go { margin-top: auto; padding-top: 14px; align-self: flex-end; display: flex; }
.card-go i {
  width: 40px; height: 40px; margin: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--bronze); border-radius: var(--r-seal);
  color: var(--bronze-deep); background: transparent;
  transition: background .25s ease, color .25s ease;
}
html[dir="rtl"] .card-go svg { transform: scaleX(-1); }
:is(.mvoe-card, .mvoe-pcard):is(:hover, :focus-visible) .card-go i { background: var(--bronze); color: var(--ink); }
:is(.mvoe-card, .mvoe-pcard):focus-visible { outline: 2px solid var(--bronze-deep); outline-offset: 3px; }

/* ============================================================
   trust band - ONE centred group, not three equal columns.
   A grid of equal columns centres each item inside its own column,
   so the gaps read as uneven even though the columns are identical.
   ============================================================ */

.trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(40px, 9vw, 110px);
}

/* At 375 two paddings were stacking: the section's 24px OUTSIDE the plum fill
   and the block's 26px INSIDE it - 100px of the 375 gone, which squeezed the
   label track to 141.6px and wrapped every label. They are not redundant
   (one insets the band from the screen, one insets text from the colour), so
   the fix is to drop the OUTER one and let the band go full-bleed: the text
   keeps its 26px breathing room and the content box grows 275 -> 323.
   Radius goes with it - a 16px corner against the screen edge reads as a
   rendering error, not a card.

   ❗ The radius reset is scoped to .plum-section, NOT to .plum-block. The
     service pages' process block is also a .plum-block but is NOT full-bleed
     - it keeps 24px side padding at every width - and an unscoped reset gave
     it square corners 24px in from the screen edge, which is the same
     "looks like a rendering error" it is meant to prevent, inverted. */
@media (max-width: 767px) {
  .plum-section { padding-inline: 0 !important; }
  .plum-section .plum-block { border-radius: 0; }

  .trust {
    display: grid;
    /* The label track must be allowed to shrink and wrap: Russian's longest
       label is 213px of a 260px content box on its own, so a rigid max-content
       second track pushes the row out of the block. */
    grid-template-columns: max-content minmax(0, max-content);
    justify-content: center;
    align-items: baseline;
    column-gap: 14px;
    row-gap: 20px;
  }
  /* display:contents promotes the number and the label to direct grid items,
     so all three rows share ONE pair of columns instead of each pair centring
     on its own width. No role/aria on the wrapper, so nothing is lost to AT. */
  .trust > * { display: contents; }
  .trust > * > :first-child {
    text-align: end;
    font-variant-numeric: tabular-nums;
    /* WIDTH, not min-width, and em, not ch.
       The track is `max-content`, which is content-driven BY DEFINITION: a
       min-width is absorbed the moment a string exceeds it, so data-countup
       changing the DIGIT COUNT ("0" -> "200+") grows the track mid-animation
       and slides every label. A definite width makes the item's max-content
       contribution the width itself, so the track stops depending on content
       at all. tabular-nums fixes digit WIDTH, not digit count.
       em, never ch: ch chases font metrics (Rubik's ch is ~2.8x what the string
       needs and pushed the row out of the block); em scales with --fluid-page,
       so the ratio holds at every width inside the clamp.
       2.6em = 88.4px at the 34px floor. It must clear RUBIK's "200+" (85.1px),
       not only Assistant's (68.7px) - the headroom is 3.3px, and THAT is the
       number being preserved here, not 2.6. A longer string will overflow this
       box rather than widen the track; that is the intended trade. */
    width: 2.6em;
  }
  .trust > * > :last-child { text-align: start; margin-top: 0 !important; }
}

/* Title seal (Michael 15.10): every page h1 ends with the MVOE seal - the logo's
   filled bronze square, same 12% radius. Sized in em so it scales with the heading.
   Markup: the h1's LAST word and the seal share <span class="h1-end"
   style="white-space:nowrap">, so the seal never wraps alone onto a line. A final
   period is replaced by the seal; ? and other punctuation stay, seal after them.
   aria-hidden: it is decoration, also over a photograph. h1 only, never h2/h3. */
.title-seal {
  display: inline-block; width: .24em; height: .24em;
  border-radius: 12%; background: var(--bronze);
  margin-inline-start: .12em; vertical-align: baseline;
}

/* ============================================================
   Team rail + team card - MKOR's rules, ported 20.10l (Michael: "exactly MKOR's").
   One mechanism on both sites: team-rail.js is MKOR's script. MVOE keeps its own
   order, titles and bios; the seal and buttons use --r-seal (MVOE's square).
   ============================================================ */
.team-card {
  background: var(--card);
  border: 0.5px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  padding-bottom: 18px;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
@media (hover: hover) and (pointer: fine) {
  .team-card:hover { transform: translateY(-4px); border-color: var(--bronze); box-shadow: 0 10px 28px rgba(26, 23, 20, .08); }
}
/* The portraits carry dead space above the head and are bottom-flush: a box a little wider
   than 4:5 makes cover discard rows, and object-position must be BOTTOM (MKOR, measured). */
.team-card__photo {
  display: block; width: 100%; height: auto;   /* MKOR sets img{height:auto} in its base; without it the 875 height attribute wins */
  aspect-ratio: 4 / 3.85;
  object-fit: cover; object-position: center bottom;
  background: var(--card);
}
.team-card__name { margin: 16px 18px 0; font-size: var(--fs-body); font-weight: 700; }
.team-card__role { margin: 2px 18px 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); }
.team-card__bio { margin: 18px 18px 0; padding-top: 16px; border-top: 0.5px solid var(--line); }
.team-card__bio p { margin: 0 0 10px; font-size: var(--fs-sm); line-height: 1.6; color: var(--muted); }
.team-card__bio p:last-child { margin-bottom: 0; }
.team-rail-wrap { position: relative; padding-inline: 26px; }
.team-rail-nav { display: contents; }
.team-rail-nav .team-rail-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
.team-rail-nav [data-team-prev] { inset-inline-start: 0; }
.team-rail-nav [data-team-next] { inset-inline-end: 0; }
@media (max-width: 767px) { .team-rail-wrap { padding-inline: 0; } .team-rail-nav { display: none; } }
.team-rail-btn {
  width: 44px; height: 44px; border-radius: var(--r-seal);
  border: 1px solid var(--ink); background: var(--card); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s ease, color .2s ease;
}
.team-rail-btn:hover:not([aria-disabled="true"]) { background: var(--ink); color: var(--ivory-text); }
.team-rail-btn[aria-disabled="true"] { opacity: .4; cursor: default; }
.team-rail-btn:focus-visible, .team-rail:focus-visible { outline: 2px solid var(--bronze-deep); outline-offset: 3px; }
.team-rail {
  display: flex; gap: 22px; align-items: stretch;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; padding-block-end: 4px;
  overscroll-behavior-x: contain;
}
.team-rail::-webkit-scrollbar { display: none; }
.team-rail > .team-card { flex: 0 0 clamp(260px, 78vw, 300px); scroll-snap-align: start; }
@media (prefers-reduced-motion: reduce) { .team-rail { scroll-behavior: auto; } }
/* Every card as tall as the tallest; the bio is clamped to 7 lines (the longest Hebrew bio at 375),
   a longer bio gets a real <button> from team-rail.js that opens that card only. */
.team-rail > .team-card { display: flex; flex-direction: column; }
.team-rail > .team-card > picture { display: block; }
.team-rail .team-card__bio { font-size: var(--fs-sm); line-height: 1.6; max-height: calc(7 * 1.6em + 10px + 16px + 1.5px); overflow: hidden; }
.team-rail .team-card[data-bio-open] .team-card__bio { max-height: none; }
.team-rail.has-open { align-items: flex-start; }
.team-rail.has-open > .team-card { min-height: var(--rail-h); }
.team-card__more {
  align-self: flex-start; margin: auto 18px 0; padding: 12px 0 0;
  min-height: 24px; background: none; border: 0; cursor: pointer;
  font-family: var(--font); font-size: var(--fs-sm); font-weight: 700;
  color: var(--bronze-deep); text-decoration: underline; text-underline-offset: 3px;
}
.team-card__more:hover { color: var(--ink); }
.team-card__more:focus-visible { outline: 2px solid var(--bronze-deep); outline-offset: 3px; border-radius: 4px; }
/* Missing team photo (rail): the <picture> becomes the frame - MVOE sand ground (MKOR: stone), initials in ink. */
picture[data-photo-fallback] { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4 / 3.85; background: var(--ivory); color: var(--ink); }
picture[data-photo-fallback] img { display: none; }
picture[data-photo-fallback]::before { content: attr(data-initials); font-family: var(--font); font-weight: 800; font-size: var(--fs-h1); line-height: 1; }

/* Missing-photo fallback (20.10): team-rail.js swaps a failed team photo for this block. Same box and
   radius (the frame clips it), sand ground, initials in ink. role="img" + aria-label keep the name. */
.photo-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
                  background: var(--ivory); color: var(--ink); font-family: var(--font); font-weight: 800;
                  font-size: var(--fs-h1); line-height: 1; }
.photo-fallback--sm { font-size: var(--fs-lead); }


/* Professional-team card (About, 3 people). NOT .team-card: that is the vertical
   portrait card on Home. Different content shape, own geometry. The separator
   keeps the house spacing: 18px above the line, 16px between line and text. */
.pro-card { background: var(--card); border: 0.5px solid var(--line); box-shadow: var(--shadow-card);
            border-radius: var(--r-card); padding: 24px;
            display: flex; flex-direction: column; }
.pro-card__head { display: flex; align-items: flex-start; gap: 16px; }
.pro-card__name { font-size: var(--fs-body); font-weight: 800; }
.pro-card__role { font-size: var(--fs-micro); color: var(--muted); margin-top: 2px; }
.pro-card__bio  { margin-top: 18px; padding-top: 16px; border-top: 0.5px solid var(--line); }
.pro-card__bio p { margin: 0 0 10px; font-size: var(--fs-sm); line-height: 1.7; color: var(--muted); text-wrap: pretty; }
.pro-card__bio p:last-child { margin-bottom: 0; }

/* Bio portrait - MKOR measured 472 x 507. The frame background ALTERNATES
   against its section: white on an ivory section, ivory on a white one. A
   frame the same colour as its section disappears and the portrait floats. */
.bio-photo {
  aspect-ratio: 472 / 507;
  overflow: hidden;
  border-radius: var(--r-card);
  border: 0.5px solid var(--line);
}
.bio-photo img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 100%;
}

/* Steps read-through (19.10h): MKOR production rules, names adapted. Driven by mvoe-steps-anim.js. */
/* "How it works" read-through - driven by steps-anim.js. The faded start state
   applies only once the script arms a block (data-armed), so without JS every
   step shows in full. Opacity and transform carry the motion; the number
   circle's fill is a short paint transition, no layout moves. */
[data-steps] > * { position: relative; }
[data-steps][data-armed] > * { opacity: .35; transform: translateY(8px); transition: opacity .4s ease-out, transform .4s ease-out; }
[data-steps][data-armed] > .is-on { opacity: 1; transform: none; }
[data-steps] > * > :first-child { position: relative; transition: background-color .4s ease-out, color .4s ease-out; }
[data-steps][data-armed] > :not(.is-on) > :first-child { background: transparent !important; box-shadow: inset 0 0 0 1.5px var(--bronze); }
.plum-block [data-steps][data-armed] > :not(.is-on) > :first-child { box-shadow: inset 0 0 0 1.5px var(--ivory-text); color: var(--ivory-text) !important; }
.plum-block [data-steps] > * > :first-child::before { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 6px rgba(255,255,255,.12); opacity: 0; pointer-events: none; }
.plum-block [data-steps][data-armed] > .is-on > :first-child::before { animation: stepsHalo .9s ease-out 1; }
@keyframes stepsHalo { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0; } }
[data-steps] > [data-link]::after { content: ''; position: absolute; pointer-events: none; background: var(--line); }
.plum-block [data-steps] > [data-link]::after { background: rgba(247,243,234,.35); }
[data-steps] > [data-link="h"]::after { top: calc(var(--dot, 44px) / 2); inset-inline-start: calc(var(--dot, 44px) + 12px); width: var(--link-len, 0); height: 1.5px; transform-origin: var(--link-origin, left); }
[data-steps] > [data-link="v"]::after { top: calc(100% + 6px); inset-inline-start: calc(var(--dot, 44px) / 2); width: 1.5px; height: var(--link-len, 0); transform-origin: top; }
[data-steps][data-armed] > [data-link="h"]::after { transform: scaleX(0); transition: transform var(--link-dur, 1100ms) linear; }
[data-steps][data-armed] > [data-link="v"]::after { transform: scaleY(0); transition: transform var(--link-dur, 1100ms) linear; }
[data-steps][data-armed] > .is-linked::after { transform: none; }
@media (prefers-reduced-motion: reduce) { [data-steps][data-armed] > * { opacity: 1; transform: none; transition: none; } }

/* One primary per screen (20.10b, same as MKOR). mvoe-accessibility.js sets html[data-hero-primary] while the
   page's first section - when it holds a primary button - is in view. The header CTA and the mobile sticky
   bar's CTA then render as secondary (ink outline, drawn with an inset shadow so the box does not move). */
.hdr-cta, .mvoe-sticky-bar > .sticky-cta { transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease; }
html[data-hero-primary] .hdr-cta,
html[data-hero-primary] .mvoe-sticky-bar > .sticky-cta { background: transparent !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1px var(--ink) !important; }
html[data-hero-primary] .hdr-cta:hover,
html[data-hero-primary] .mvoe-sticky-bar > .sticky-cta:hover { background: transparent !important; color: var(--bronze-deep) !important; box-shadow: inset 0 0 0 1px var(--bronze) !important; transform: none !important; }
@media (forced-colors: active) { html[data-hero-primary] .hdr-cta, html[data-hero-primary] .mvoe-sticky-bar > .sticky-cta { border: 1px solid CanvasText; } }

/* ============================================================
   20.10e - touch and phone fixes (Michael, from the design-eng review). No look change on desktop.
   ============================================================ */
/* iOS zooms on focus into any field under 16px and stays zoomed. Coarse pointers only; never maximum-scale.
   The rule only RAISES the small tokens (micro 13, sm 15) - fields at 17+ keep their size. */
@media (pointer: coarse) {
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):is([style*="--fs-sm"], [style*="--fs-micro"], [style*="font-size:13px"], [style*="font-size:14px"], [style*="font-size:15px"]) { font-size: max(16px, var(--fs-sm)) !important; }
}
/* Phones: no Ken Burns, no compositor layer (MKOR parity). hero-motion.js skips the parallax below 768 too. */
@media (max-width: 767px) {
  .hero__media { animation: none; will-change: auto; }
  .hero { min-height: 78vh; min-height: 78svh; }      /* svh: the hero does not jump when the iOS toolbar collapses */
}
html { -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-a11y-motion]) :is(.btn, .team-card__more, .mvoe-sticky-bar > a, button[type="submit"]):active { transform: scale(.97); transition-duration: .1s; }
}
/* Lift hovers only where a real hover exists. The runtime's inline style-hover cannot take a media query,
   so on touch it is neutralised here (the colour change stays, the lift goes). */
@media (hover: none), (pointer: coarse) {
  .lockup:hover, .btn:hover, button[type="submit"]:hover { transform: none !important; }
}
/* viewport-fit=cover: keep content clear of a landscape notch. 0 everywhere else. */
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

/* Home pull-quote (20.10f). The --fs-h2 step; one step down on phones so it stays within four lines at 375 (Russian two steps). */
.pull-quote { font-size: var(--fs-h2); }
@media (max-width: 767px) { .pull-quote { font-size: var(--fs-h3); } html[lang="ru"] .pull-quote { font-size: var(--fs-lead); } }   /* Russian runs 20-35% longer: one more step keeps it within four lines */

/* Booking frame (20.10o) - MKOR's .cal-card rules, verbatim. The section renders only when
   MVOE_CALENDAR_URL (cal-loader.js) holds a URL. */
.cal-embed { position: relative; height: clamp(560px, 78vh, 760px); background: var(--card); }
.cal-embed iframe { display: block; width: 100%; height: 100%; border: 0; }
.cal-card { background: var(--card); border: 0.5px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; }
.cal-card__head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: var(--ivory); border-bottom: 0.5px solid var(--line); }
.cal-card__title { display: block; font-size: var(--fs-body); font-weight: 700; color: var(--ink); }
.cal-card .cal-embed { border: 0; border-radius: 0; box-shadow: none; }
.cal-loader { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--ivory); transition: opacity .3s ease; }
.cal-embed.is-loaded .cal-loader { opacity: 0; pointer-events: none; }
.cal-loader__seal { width: 22px; height: 22px; border-radius: var(--r-seal); background: var(--bronze); animation: mvoeCalPulse 1.2s ease-in-out infinite; }
.cal-loader__t { font-size: var(--fs-sm); color: var(--muted); }
@keyframes mvoeCalPulse { 0%, 100% { transform: scale(.9); opacity: .55; } 50% { transform: scale(1.08); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cal-loader__seal { animation: none; } }
.cal-phone { margin: 16px 0 0; text-align: center; font-size: var(--fs-sm); color: var(--muted); }
.cal-phone a { color: var(--bronze-deep); font-weight: 700; text-decoration: none; }
.cal-phone a:hover { color: var(--ink); }

/* About team grid (20.10t) - MKOR's .team-grid rules, verbatim. Cards are .team-card (rules above). */
.team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.team-grid--founders { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: calc(75% - 5px); margin-inline: auto; }
@media (max-width: 899px) { .team-grid--founders { max-width: none; } .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 679px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 419px) { .team-grid { grid-template-columns: minmax(0, 1fr); } }

/* ONE card hover for every linked card (20.10w, MKOR parity): service lead cards, the row of four,
   cross-link panel, article and press cards, property cards. Lift 4px, bronze border, the cue fills
   bronze with an ink arrow (rule above). Pages carry NO card hover rules of their own. */
:is(.mvoe-card, .mvoe-pcard) { transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .3s ease, box-shadow .3s ease; }
@media (hover: hover) and (pointer: fine) {
  :is(.mvoe-card, .mvoe-pcard):hover { transform: translateY(-4px); border-color: var(--bronze) !important; box-shadow: 0 14px 30px rgba(26, 23, 20, .1) !important; }   /* !important: cards carry their resting whisper shadow inline */
}
@media (prefers-reduced-motion: reduce) { :is(.mvoe-card, .mvoe-pcard):hover { transform: none; } }

/* Value cards (20.10za) - MKOR's .value-card rules, verbatim; markup in MvoeValueCards{,-en,-ru}.dc.html. */
.value-card {
  flex: 1 1 280px;
  max-width: 340px;
  background: var(--card);
  border: 0.5px solid var(--line);
  border-radius: var(--r-card);
  padding: 28px;
  box-shadow: var(--shadow-card);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
@media (hover: hover) and (pointer: fine) {
  .value-card:hover { transform: translateY(-4px); border-color: var(--bronze); box-shadow: 0 10px 28px rgba(26, 23, 20, .08); }
}
@media (prefers-reduced-motion: reduce) { .value-card:hover { transform: none; } }