/*!
 * redesign.css - "prioritet-v5" design system.
 *
 * Extracted verbatim from the approved static mock `prioritet-v5.html`.
 * Loaded on EVERY page (after css/style.css), because the new header, mobile
 * menu, bottom action bar and footer are site-wide chrome.
 *
 * Deviations from the source file, all of them collision fixes (see the theme
 * migration notes):
 *   1. `.slide-btn`     -> `.pr-slide-btn`   (css/style.css already defines
 *                          `.slide-btn`, including a `!important` hover rule)
 *   2. `body.menu-open` -> `body.pr-menu-open` (css/style.css already defines
 *                          `body.menu-open` for the legacy drawer menu)
 *   3. Bare `section{}` and the typography half of bare `body{}` are scoped to
 *      the home page (`body.pr-home`), so the 49 `<section>` elements on the
 *      legacy inner pages keep their own spacing and font. `:where()` is used
 *      so the scoping adds NO specificity and the original cascade is intact.
 *   4. Admin bar offset for the fixed nav appended at the very end.
 */

  /* Every colour token now lives in css/palette.css, which loads before this
     file and ships two palettes behind one `data-palette` attribute. Only the
     non-colour token is left here. */
  :root{
    --ease:cubic-bezier(.22,.7,.2,1);
    /* Corner radius, as two tokens instead of 53 literals.
       The Arbat design is soft rectangles - 18px cards and fully round 100px
       pills - and that shape is most of what a visitor recognises about a page
       before reading a word of it. This branch's palette sits only dE 7.2 from
       bark (see the note in css/palette.css), too close for colour alone to
       say "different site", so the geometry has to carry the difference.
       2px reads square without the brutalism of a hard 0. Circles - dots,
       rings, the assay gauge - keep border-radius:50% and are not cards.

       Do NOT paste a border-radius literal in from the Volkhonka theme. Both
       times this went wrong it went wrong that way: a block copied across
       kept its 100px and turned into the one round object on a square page.
       If a rule needs a corner here, it needs one of these two tokens. */
    --r-box:2px;
    --r-btn:2px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  /* [scoped] source rule was a bare `body{}`; typography/background are limited
     to the redesigned home page so the legacy inner pages keep Montserrat and
     their own backgrounds. The chrome selectors below re-apply Manrope to the
     new header/menu/footer, which do render on every page. */
  /* `clip` instead of the source's `hidden`: overflow-x:hidden turns <body> into
     a scroll container, which silently breaks every position:sticky descendant
     (the pinned process track). `clip` suppresses overflow without doing that. */
  body{-webkit-font-smoothing:antialiased;overflow-x:clip}
  /* Client: no orphaned single word wrapping onto its own line when there was
     room to fit it above - "как книга, строчка к строчке". Progressive
     enhancement (Chrome/Edge 114+, Firefox 121+); browsers without support
     just keep the plain wrap they already had. */
  h1,h2,h3,h4,.wsplit .ln,.eyebrow,.hero-lede,.hero-pill{text-wrap:balance}
  p{text-wrap:pretty}
  /* Instrument Serif shipped a single weight, so these headings never declared
     font-weight and simply inherited it. Manrope carries 300-700, so without a
     declaration they drop to the browser's BOLD default - the "излишняя
     жирность текста" from the client's review. Display sizes read expensive
     light; small card headings need 500 to keep their presence. Anything with
     its own font-weight (.svc-card h3, .phero h1, ...) outranks this. */
  h1,h2,h3,h4,h5,h6{font-weight:500}
  .hero h1,.sec-head h2,.charity h2,.tg-banner h3{font-weight:400}
  body.pr-home,body.pr-page{font-family:'Manrope',sans-serif;color:var(--ink);background:var(--paper)}
  nav.top,.mmenu,.bbar,.loader,footer{font-family:'Manrope',sans-serif}
  body.locked{overflow:hidden}
  img{max-width:100%;display:block}
  a{color:inherit;text-decoration:none}
  a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:var(--r-box)}
  .serif{font-family:'Manrope',sans-serif;font-weight:400}
  .mono{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums}
  .wrap{max-width:1220px;margin:0 auto;padding:0 34px}
  /* --gold-ink, not --gold: this label is 11px, and plain --gold scores 2.74:1
     on paper - it fails AA at any size. See css/palette.css. */
  .eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-ink)}
  /* ...and to the inverted accent wherever the label sits on a DARK band: the
     light-surface accent measures 2.18:1 there. Found by scanning with the
     reveal state forced on - these sections are opacity:0 until they scroll
     in, so an ordinary visibility check walks straight past them.
     .charity and .tg-banner are handled at their own definitions further down,
     where they redeclare these and would win the tie on source order. */
  .brands .eyebrow,.price-note .eyebrow{color:var(--accent-on-dark)}
  .brands .sec-head h2 .it{color:var(--accent-on-dark)}

  /* ================= PRELOADER ================= */
  .loader{position:fixed;inset:0;z-index:999;background:var(--cream);display:grid;place-items:center;transition:transform .85s var(--ease);will-change:transform}
  .loader.done{transform:translateY(-101%)}
  /* The wordmark is clipped so the letters can rise out of nothing. The bottom
     padding is for the descender of "р" - without it the tails are shaved. */
  /* text-align:center is load-bearing. The block is as wide as the widest thing
     in the loader - the tracked-out tagline, 225px - while the wordmark at the
     34px floor is only ~150px, so left-aligned text sat 37px off centre on a
     phone. On desktop the mark grows to fill the box and the fault is hidden. */
  .loader-logo{font-family:'Manrope',sans-serif;font-size:clamp(34px,5vw,54px);letter-spacing:.04em;
    overflow:hidden;padding:0 .06em .16em;line-height:1.06;text-align:center}
  .loader-logo .lg{color:var(--gold)}
  .loader-bar{width:180px;height:1px;background:var(--line);margin:22px auto 0;overflow:hidden;position:relative}
  .loader-bar i{display:block;height:100%;width:0;background:var(--gold);transition:width .2s linear}
  .loader-sub{margin-top:14px;text-align:center;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--bronze-ink)}

  /* ---------- preloader animation ----------
     CSS-only, and the letters are split server-side by
     fast_vid_loader_wordmark(). Nothing waits on JavaScript: the deferred
     bundle can start a second or more into a cold load, and hiding a mark the
     visitor is already looking at reads as a flicker.

     `both` fill is what makes this safe - the resting state of every rule below
     is the visible one, so a stalled animation cannot leave the mark blank.

     Timing is bounded by the existing progress loop (550-1000ms): the last
     letter lands at 8 x 34 + 620 = 890ms, so the intro costs no extra wait. */
  .loader-logo .ll{display:inline-block;white-space:pre;
    animation:ldr-rise .62s var(--ease) both;animation-delay:calc(var(--i) * 34ms)}
  @keyframes ldr-rise{from{transform:translateY(112%);opacity:0}to{transform:none;opacity:1}}

  /* A gold sheen crossing the progress track - the same struck-metal idea as
     the coin faces, at 1px tall. */
  .loader-bar::before{content:"";position:absolute;inset:0;
    background:linear-gradient(90deg,transparent,rgba(var(--gold-rgb),.65),transparent);
    transform:translateX(-100%);animation:ldr-sheen 1.15s linear .2s infinite}

  @keyframes ldr-sheen{to{transform:translateX(100%)}}

  .loader-sub{animation:ldr-fade .5s var(--ease) .52s both}
  @keyframes ldr-fade{from{opacity:0}to{opacity:1}}

  /* The whole mark settles a hair, like a stamp coming to rest. */
  .loader-in{animation:ldr-settle .9s var(--ease) both}
  @keyframes ldr-settle{from{transform:scale(.965)}to{transform:none}}

  @media (prefers-reduced-motion:reduce){
    .loader .ll,.loader-sub,.loader-in{animation:none!important;opacity:1!important;transform:none!important}
    .loader-bar::before{display:none}
  }

  /* ================= CURSOR / PROGRESS / INDICATOR ================= */
  .progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--gold);z-index:300}
  .cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:400;border-radius:50%;transform:translate(-50%,-50%)}
  .cursor-dot{width:6px;height:6px;background:var(--gold)}
  /* The ring is the assay punch, not a circle - the pointer is the mark. */
  .cursor-ring{width:34px;height:34px;border-radius:0;transition:width .25s,height .25s,opacity .25s}
  .cursor-ring svg{width:100%;height:100%;display:block;fill:none;
    stroke:rgba(var(--gold-rgb),.55);stroke-width:1.4;stroke-linejoin:round;transition:stroke .25s}
  .cursor-ring.hovered{width:54px;height:54px}
  .cursor-ring.hovered svg{stroke:var(--gold)}

  /* Struck on click: the punch is pressed into the page and lifts away. */
  .stamp{position:fixed;top:0;left:0;z-index:390;width:38px;height:38px;pointer-events:none;
    transform:translate(-50%,-50%);animation:stamp-strike .62s var(--ease) forwards}
  .stamp svg{width:100%;height:100%;display:block;fill:none;stroke:var(--gold);
    stroke-width:1.6;stroke-linejoin:round}
  @keyframes stamp-strike{
    0%{opacity:0;transform:translate(-50%,-50%) scale(.45) rotate(-12deg)}
    22%{opacity:.95;transform:translate(-50%,-50%) scale(.86) rotate(0)}
    100%{opacity:0;transform:translate(-50%,-50%) scale(1.5) rotate(6deg)}
  }
  @media (hover:none){.cursor-dot,.cursor-ring{display:none}}
  @media (prefers-reduced-motion:reduce){.stamp{display:none}}

  /* Fixed, so it floats over whatever scrolls beneath - including the dark
     bands, where bare --ink-soft text was 2.2:1. The paper pill makes it
     readable over any section instead of only the light ones. */
  .sec-ind{position:fixed;left:28px;bottom:26px;z-index:120;display:flex;align-items:center;gap:12px;
    font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
    background:rgba(var(--paper-rgb),.9);backdrop-filter:blur(8px);border:1px solid var(--line);
    border-radius:var(--r-btn);padding:9px 16px 9px 13px;transition:opacity .3s}
  .sec-ind .num{color:var(--gold-ink)}
  .sec-ind::before{content:"";width:26px;height:1px;background:var(--gold)}
  /* Idle by default. Giving it a solid pill made it legible over the dark bands
     but turned it into furniture that sits on top of whatever is at the bottom
     left - measured across the page it covered a FAQ question, a rail of brand
     chips and the "как это считается" link. It is a wayfinding cue, so it is
     worth exactly the moment the section changes: js/home-redesign.js wakes it
     then and lets it fade. */
  .sec-ind{opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
  .sec-ind.awake{opacity:1}
  .sec-ind.flip{opacity:0}
  /* set by the footer observer in js/home-redesign.js */
  .sec-ind.hide-ind{opacity:0;pointer-events:none}
  @media(max-width:920px){.sec-ind{display:none}}

  /* ================= NAV ================= */
  nav.top{position:fixed;inset:0 0 auto 0;z-index:200;display:flex;align-items:center;justify-content:space-between;
    padding:15px 34px;transition:transform .45s var(--ease),background .45s,padding .45s,border-color .45s;border-bottom:1px solid transparent}
  /* Scrolled state in the brand colour. The header is the one surface a visitor
     sees on every page and every scroll, so this is where the colour has to
     live if it is going to read as the brand rather than as "the dark section".
     Over the hero it stays transparent - the entrance should not open on a
     solid bar. */
  nav.top.scrolled{background:rgba(var(--espresso-rgb),.94);backdrop-filter:blur(16px);
    border-color:rgba(var(--cream-rgb),.14);padding:10px 34px}
  nav.top.scrolled .logo{color:var(--cream)}
  /* the scrolled bar is the same espresso as the footer - so is the problem */
  nav.top.scrolled .logo span{color:var(--accent-on-dark)}
  nav.top.scrolled .nav-links{color:rgba(var(--cream-rgb),.75)}
  nav.top.scrolled .nav-links a:hover,nav.top.scrolled .mega-trigger{color:var(--cream)}
  nav.top.scrolled .call{color:var(--cream);border-color:rgba(var(--cream-rgb),.4)}
  nav.top.scrolled .call:hover{background:var(--cream);color:var(--espresso);border-color:var(--cream)}
  nav.top.scrolled .burger span{background:var(--cream)}
  nav.top.hide{transform:translateY(-110%)}
  /* Client: "полосу-приоритет тоже можно уменьшить, чуть-чуть сделать потоньше".
     The bar loses 14px of height and the wordmark 5px; header.hero's top padding
     follows it down, otherwise the space the bar used to occupy stays behind. */
  /* 8px of vertical padding rather than 4: the wordmark was a 34px tap target,
     two short of the 36 a finger needs, and it is the link back to the home
     page from every inner page. */
  nav.top .logo{font-family:'Manrope',sans-serif;font-weight:400;font-size:19px;letter-spacing:.04em;padding:8px 0}
  nav.top .logo span{color:var(--gold)}
  nav.top .nav-links{display:flex;gap:32px;font-size:13px;color:var(--ink-soft)}
  nav.top .nav-links a{position:relative;transition:.2s}
  /* The hover underline has to take the whole box back from the legacy sheen in
     css/style.css, which styles every `a::after` as a sliding highlight:
       inset:0                -> pinned the line to the TOP of the link
       transform:translateX()  -> pushed it 120% of its width to the right
       opacity:0               -> kept it invisible until hover
       z-index:-1              -> painted it behind the link
     Overriding only background/width/height left all of those in force, so the
     line appeared beside the next item instead of growing under the hovered one. */
  nav.top .nav-links a::after{content:"";position:absolute;inset:auto auto -4px 0;width:0;height:1px;
    background:var(--gold);border-radius:0;transform:none;opacity:1;z-index:auto;
    transition:width .3s var(--ease)}
  nav.top .nav-links a:hover{color:var(--ink)}
  /* also outranks the legacy `a:hover::after{transform:translateX(120%);opacity:1}` */
  nav.top .nav-links a:hover::after{width:100%;transform:none;opacity:1}
  nav.top .call{font-family:'JetBrains Mono',monospace;font-size:13px;border:1px solid var(--gold);padding:9px 16px;border-radius:var(--r-btn);transition:.25s}
  nav.top .call:hover{background:var(--espresso);color:var(--cream);border-color:var(--espresso)}
  @media(max-width:1180px){nav.top .nav-links{gap:22px;font-size:12.5px}}
  @media(max-width:1040px){nav.top .nav-links,nav.top .call{display:none}}

  /* ---------- mega panel ---------- */
  /* `static`, deliberately: the panel is 940px wide and the trigger sits at
     x~455, so centring on the trigger pushed the panel 15px off the left edge.
     With the item static the containing block becomes nav.top, which spans the
     viewport, and translateX(-50%) centres the panel on screen at every width.
     The panel stays a DOM child of the item, so mouseleave still fires only
     once the pointer has left both the trigger and the panel. */
  /* The vertical padding is the fix for a dead zone, not decoration: the item's
     own box is only as tall as the trigger text (18px), while the panel opens
     below the nav (29px lower). Travelling down from the trigger left the item
     after 7px and mouseleave closed the panel before the pointer could reach
     it. The padding stretches the hit area to the nav's bottom edge; the
     negative margin keeps the row's layout identical. */
  .nav-item{position:static;padding:24px 0;margin:-24px 0}
  .mega-trigger{background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit;
    display:inline-flex;align-items:center;gap:6px;position:relative;transition:.2s}
  .mega-trigger i{font-style:normal;font-size:9px;transition:transform .3s var(--ease);opacity:.6}
  .has-mega.open .mega-trigger{color:var(--ink)}
  .has-mega.open .mega-trigger i{transform:rotate(180deg)}
  /* same underline the plain nav links get - see the note on a::after above */
  .mega-trigger::after{content:"";position:absolute;inset:auto auto -4px 0;width:0;height:1px;
    background:var(--gold);border-radius:0;transform:none;opacity:1;z-index:auto;transition:width .3s var(--ease)}
  .has-mega.open .mega-trigger::after,.mega-trigger:hover::after{width:100%}

  .mega{position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%,-8px);
    width:min(940px,calc(100vw - 48px));background:var(--paper);border:1px solid var(--line);border-radius:var(--r-box);
    box-shadow:0 40px 90px rgba(var(--ink-rgb),.16);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .26s var(--ease),transform .26s var(--ease),visibility 0s .26s;z-index:10}
  .has-mega.open .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition-delay:0s}
  /* bridges whatever gap the padding above does not cover */
  .mega::before{content:"";position:absolute;left:0;right:0;top:-22px;height:22px}
  .mega-in{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:28px 28px 22px}
  .mega-col h4{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--bronze-ink);font-weight:400;margin-bottom:14px;padding:0 10px}
  .mega-col a{display:block;font-size:13.5px;line-height:1.35;color:var(--ink-soft);
    padding:9px 10px;border-radius:var(--r-box);transition:background .2s,color .2s}
  .mega-col a:hover{background:var(--cream-2);color:var(--ink)}
  .mega-col .mega-more{margin-top:6px;color:var(--gold-ink);font-weight:600;font-size:12.5px}
  .mega-col .mega-more i{font-style:normal;display:inline-block;transition:transform .3s var(--ease)}
  .mega-col .mega-more:hover{background:none}
  .mega-col .mega-more:hover i{transform:translateX(4px)}
  .mega-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
    border-top:1px solid var(--line);background:var(--cream-2);border-radius:0 0 var(--r-box) var(--r-box);
    padding:16px 28px;font-size:13px;color:var(--ink-soft)}
  .mega-foot a{color:var(--gold-ink);font-weight:600;white-space:nowrap}
  .mega-foot a i{font-style:normal;display:inline-block;transition:transform .3s var(--ease)}
  .mega-foot a:hover i{transform:translateX(4px)}

  /* ================= HERO ================= */
  header.hero{position:relative;background:var(--cream);overflow:hidden;padding:152px 0 0}
  .orb{position:absolute;border-radius:50%;pointer-events:none;will-change:transform}
  /* The second orb, a gold haze 640px across, used to sit directly on top of the
     dial and turn it into fog - most of the client's "чуть-чуть мусорит". Gone;
     only the far bottom-left one remains, where it touches nothing. */
  .o2{bottom:-220px;left:-180px;width:560px;height:560px;background:radial-gradient(circle,rgba(var(--bronze-rgb),.14),transparent 60%)}
  @keyframes spin{to{transform:rotate(360deg)}}

  /* ---- hero gem ----
     A brilliant's crown as a line drawing. Third occupant of this slot: the
     watch dial belongs to the Arbat site, and the balance that replaced it was
     rejected as too heavy and literal. This one is only strokes, which is what
     lets it sit inside a minimal layout instead of on top of it.

     Two things move, both slowly. The figure turns once every 120s - at that
     rate it is never caught moving, but it is never in the same place twice
     either. And on load the facets DRAW themselves, outside in, over about
     1.9s: girdle, then the bezel spines, then the star edges, then the table.
     That is the whole animation - there is no second act, because a technical
     drawing that keeps performing stops reading as one. */
  /* Large, and running off the right edge - about half the figure on screen,
     the way the Arbat dial does it. Being fully on screen was a rule inherited
     from the balance, where a missing pan read as a mistake because the whole
     shape WAS its symmetry. A brilliant's crown is eight-fold symmetric: any
     half of it still states the whole figure, so it crops like a dial. */
  .hgem-wrap{position:absolute;top:var(--hgem-top);right:var(--hgem-right);
    --hgem-w:560px;--hgem-top:76px;--hgem-right:-268px;
    width:var(--hgem-w);height:var(--hgem-w);pointer-events:none;z-index:1}
  .hgem{width:100%;height:100%;overflow:visible;
    fill:none;stroke:var(--gold);stroke-width:1;
    /* Keeps the hairline a hairline at every --hgem-w. Without it the stroke
       scales with the viewBox: fat on the desktop size, invisible on the
       phone one. */
    vector-effect:non-scaling-stroke}
  .hgem-spin{transform-origin:200px 200px;animation:spin 120s linear infinite}
  .hgem-girdle{opacity:.55;stroke-width:1.4}
  .hgem-bezel{opacity:.42}
  .hgem-upper{opacity:.3}
  .hgem-star{opacity:.36}
  .hgem-table{opacity:.6;stroke-width:1.4;fill:rgba(var(--gold-rgb),.05)}

  /* Every path carries pathLength="1", so one dash length draws all of them at
     the same rate whatever their real length - otherwise the short edges
     finish first and the figure assembles in a visibly wrong order. */
  .hgem-girdle,.hgem-bezel,.hgem-upper,.hgem-star,.hgem-table{
    stroke-dasharray:1;stroke-dashoffset:1}
  .hgem-wrap.in .hgem-girdle{animation:hgem-draw 1s var(--ease) .35s both}
  .hgem-wrap.in .hgem-bezel {animation:hgem-draw .8s var(--ease) .70s both}
  .hgem-wrap.in .hgem-upper {animation:hgem-draw .8s var(--ease) 1.00s both}
  .hgem-wrap.in .hgem-star  {animation:hgem-draw .8s var(--ease) 1.20s both}
  .hgem-wrap.in .hgem-table {animation:hgem-draw .7s var(--ease) 1.45s both}
  @keyframes hgem-draw{to{stroke-dashoffset:0}}

  .hero-in{position:relative;z-index:2}
  .hero-eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:32px}
  .hero-eyebrow .rule{width:52px;height:1px;background:var(--gold);opacity:.7;transform-origin:left;transform:scaleX(0);transition:transform 1s var(--ease) .2s}
  .hero-eyebrow.in .rule{transform:none}
  /* "Экспертная оценка" is ONE line, and the only break is the <br> before the
     rotating word. The two-column version of this hero capped the text at 15ch
     to keep it clear of the balance, which broke the first line in half - the
     figure is a light line drawing sitting behind the copy at z-index 1, so it
     does not need the room and the cap was buying nothing.

     The size floor is what actually holds the line together: below about 30px
     "Экспертная оценка" no longer fits a 320px screen and the browser breaks
     it wherever it likes. The clamp is set so the line survives every width
     from 320 up - verified by counting the rendered line boxes, not by eye. */
  .hero h1{font-family:'Manrope',sans-serif;font-size:clamp(30px,6.2vw,92px);line-height:1.05;letter-spacing:-.01em}
  /* char split */
  .split .cw{display:inline-block;white-space:nowrap}
  .split .char{display:inline-block;opacity:0;transform:translateY(.55em) rotate(4deg);transition:opacity .5s ease,transform .7s var(--ease)}
  .split.in .char{opacity:1;transform:none}
  /* rotating word */
  .rot-wrap{display:inline-block;vertical-align:top}
  .rot{position:relative;display:inline-block;height:1.12em;overflow:hidden;vertical-align:top;transition:width .55s var(--ease);white-space:nowrap}
  /* The resting state has to be transparent. The rotator parks the word that just
     left by removing .off, which sends it from -110% back to +110% - a transition,
     not a reset, so it travelled straight back down THROUGH the visible box. With
     opacity in the resting state as well, .off and no-class are both invisible and
     that return trip cannot be seen. */
  .rot i{position:absolute;left:0;top:0;font-style:normal;color:var(--gold);white-space:nowrap;
    transform:translateY(110%);opacity:0;transition:transform .65s var(--ease),opacity .4s}
  .rot i.on{transform:none;opacity:1}
  .rot i.off{transform:translateY(-110%);opacity:0}
  .hero-lower{display:grid;grid-template-columns:1fr auto;column-gap:44px;row-gap:24px;align-items:end;margin-top:46px;padding-bottom:64px}
  .hero-lede{color:var(--ink-soft);font-size:17px;line-height:1.65;max-width:430px}
  .hero-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
  .hero-pill{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--paper);
    border-radius:var(--r-btn);padding:10px 18px;font-size:13px;color:var(--ink-soft)}
  .hero-pill b{font-family:'Manrope',sans-serif;font-variant-numeric:tabular-nums;font-weight:600;color:var(--gold-ink)}
  .hero-pill-link{transition:border-color .25s,color .25s}
  .hero-pill-link i{font-style:normal;transition:transform .3s var(--ease)}
  .hero-pill-link:hover{border-color:var(--gold);color:var(--gold-ink)}
  .hero-pill-link:hover i{transform:translateX(4px)}
  /* The telephone is a link, not a chip. No border, and it has to read as
     tappable standing still rather than only under a cursor - which is why it
     keeps an underline at rest and carries a handset. A bare number in body
     colour is just a number; people do not try tapping it. */
  .hero-tel{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;
    color:var(--gold-ink);text-decoration:underline;text-decoration-thickness:1px;
    text-underline-offset:5px;text-decoration-color:rgba(var(--gold-rgb),.45);
    transition:text-decoration-color .25s}
  .hero-tel:hover{text-decoration-color:var(--gold-ink)}
  .hero-tel svg{width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;
    stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

  /* Address and opening hours share one centred column under both hero columns.
     They are wrapped rather than made two grid rows because only the address
     is framed - the hours sit outside the frame, and a shared wrapper spaces
     the two by 9px instead of the grid's 24px row-gap. */
  .hero-place{grid-column:1/-1;justify-self:center;display:flex;flex-direction:column;
    align-items:center;gap:9px}
  .hero-where{display:flex;flex-direction:column;align-items:center;text-align:center;
    gap:3px;line-height:1.3;border:1px solid var(--line);background:var(--paper);
    border-radius:var(--r-btn);padding:9px 22px;transition:border-color .25s}
  .hero-where:hover{border-color:var(--gold)}
  .hero-where b{font-weight:500;font-size:14px;color:var(--ink);transition:color .25s}
  .hero-where i{font-style:normal;font-size:12.5px;color:var(--ink-soft)}
  .hero-where:hover b{color:var(--gold-ink)}
  .hero-hours{font-size:12.5px;color:var(--ink-soft);text-align:center}
  @media(max-width:479px){
    .hero-tel{font-size:14px}
    .hero-where{padding:8px 18px}
    .hero-where b{font-size:13px}
    .hero-where i{font-size:12px}
    .hero-hours{font-size:12px}
  }
  /* "Как пройти от метро". A link, not a button, and styled like the telephone
     link above it: it is an action, so it keeps an underline at rest. The
     40px minimum height is the tap target - the text alone is 17px tall. */
  .hero-route{display:inline-flex;align-items:center;gap:7px;min-height:40px;font-size:13px;
    font-weight:600;color:var(--gold-ink);text-decoration:underline;text-decoration-thickness:1px;
    text-underline-offset:4px;text-decoration-color:rgba(var(--gold-rgb),.45);
    transition:text-decoration-color .25s}
  .hero-route:hover{text-decoration-color:var(--gold-ink)}
  .hero-route svg{width:15px;height:15px;flex-shrink:0;fill:none;stroke:currentColor;
    stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

  /* The route diagram in a native <dialog>. The pictures are tall - a phone
     screenshot, four steps with captions baked into the pixels - so the image
     is bounded by both viewport dimensions and never upscaled or cropped: a
     caption cut off at the bottom is the last step of the directions. */
  .route-lb{border:0;padding:0;margin:auto;background:transparent;max-width:94vw;
    max-height:94vh;overflow:visible}
  .route-lb::backdrop{background:rgba(var(--espresso-rgb),.88)}
  .route-lb img{display:block;width:auto;height:auto;max-width:94vw;max-height:94vh;
    border-radius:var(--r-box);background:var(--paper)}
  .route-lb-close{position:absolute;top:10px;right:10px;width:40px;height:40px;border:0;
    border-radius:50%;background:rgba(var(--espresso-rgb),.72);color:#fff;font-size:22px;
    line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .2s}
  .route-lb-close:hover{background:rgba(var(--espresso-rgb),.9)}
  /* Every way of reaching them, in the first screen, because the client asked
     for exactly that - and because the branch site that does convert
     (moscow-lombard.ru) puts its telephones and its rating above the fold
     rather than below it. The telephone moved out of the pill row into here,
     so the three channels read as one set instead of one chip and one link. */
  .hero-chan{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
  .hero-chan a{display:inline-flex;align-items:center;gap:8px;min-height:42px;
    padding:9px 16px;border:1px solid var(--line);background:var(--paper);
    border-radius:var(--r-btn);font-size:13px;font-weight:600;color:var(--ink);
    transition:border-color .25s,color .25s}
  .hero-chan a:hover{border-color:var(--gold);color:var(--gold-ink)}
  .hero-chan svg{width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;
    stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .hero-chan .hc-tel{font-variant-numeric:tabular-nums;color:var(--gold-ink);
    border-color:var(--gold)}

  /* One line of proof, because the metrics band that carries it sits at 1065px
     and the fold on a phone is at 844 - nobody saw it before scrolling. */
  .hero-proof{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:14px;
    font-size:12.5px;line-height:1.4;color:var(--ink-soft)}
  .hero-proof b{color:var(--ink);font-weight:600}
  @media(max-width:479px){
    .hero-chan{gap:7px;margin-top:12px}
    .hero-chan a{padding:9px 13px;font-size:12.5px}
    .hero-proof{font-size:12px;margin-top:12px}
  }
  .hero-cta{display:flex;gap:12px;flex-wrap:wrap}
  /* Filled in the dark brand colour, not gold. Two reasons: white on gold is
     2.85:1 and fails AA on every call to action on the site, and the brand
     colour has to appear where the eye actually goes. Gold stays as the
     ornament - rules, eyebrows, italic accents - which is what it is good at.
     The class name is unchanged: it is in every template. */
  .btn-gold{background:var(--espresso);color:var(--cream);padding:17px 30px;border-radius:var(--r-btn);font-weight:600;font-size:14px;transition:background .3s,box-shadow .3s;box-shadow:0 10px 30px rgba(var(--espresso-rgb),.22);will-change:transform}
  .btn-gold:hover{background:var(--espresso-lift);box-shadow:0 16px 42px rgba(var(--espresso-rgb),.3)}
  /* .btn-gold is espresso-on-paper. On the dark bands that leaves espresso on
     espresso: the button disappears and only its floating label remains - the
     client's "тут как-то кнопку не видно". The contrast scan cannot see this,
     because it measures TEXT against its backdrop and cream-on-espresso passes;
     what vanishes is the button SHAPE. Invert the fill on every dark surface. */
  .tg-banner .btn-gold,.cta-band .btn-gold,.charity .btn-gold{
    background:var(--cream);color:var(--espresso);box-shadow:0 12px 30px rgba(0,0,0,.3)}
  .tg-banner .btn-gold:hover,.cta-band .btn-gold:hover,.charity .btn-gold:hover{
    background:#FFFFFF;box-shadow:0 18px 42px rgba(0,0,0,.38)}
  .btn-line{border:1px solid var(--gold);padding:17px 30px;border-radius:var(--r-btn);font-weight:600;font-size:14px;transition:.3s;will-change:transform}
  .btn-line:hover{background:var(--espresso);color:var(--cream);border-color:var(--espresso)}
  .scroll-hint{position:absolute;left:34px;bottom:250px;display:flex;align-items:center;gap:10px;
    font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--bronze-ink);
    writing-mode:vertical-rl;transform:rotate(180deg)}
  .scroll-hint::before{content:"";width:1px;height:44px;background:var(--gold);animation:hint 1.8s var(--ease) infinite}
  @keyframes hint{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
  @media(max-width:1100px){.scroll-hint{display:none}}

  /* metrics band */
  .metrics{background:var(--paper);border-top:1px solid var(--line);position:relative;z-index:2}
  .metrics-in{display:grid;grid-template-columns:repeat(4,1fr)}
  .metrics .m{padding:46px 30px;border-right:1px solid var(--line)}
  .metrics .m:last-child{border-right:0}
  .metrics .n{font-family:'Manrope',sans-serif;font-size:clamp(42px,4.2vw,66px);line-height:1;color:var(--gold);white-space:nowrap}
  .metrics .n .u{font-size:.42em;color:var(--bronze-ink);vertical-align:super;margin-left:2px}
  /* A price range is twice as many glyphs as the other metrics, so it gets its
     own smaller step - at the shared 66px it overflowed the 1fr column. */
  .metrics .n-range{font-size:clamp(27px,2.6vw,40px)}
  .metrics .n-range i{font-style:normal;color:var(--bronze-ink);margin:0 .1em}
  .metrics .l{color:var(--ink-soft);font-size:13px;line-height:1.5;margin-top:12px;max-width:200px}
  @media(max-width:860px){.metrics-in{grid-template-columns:1fr 1fr}.metrics .m:nth-child(2){border-right:0}.metrics .m{border-bottom:1px solid var(--line);padding:32px 14px}}

  /* marquee */
  .marquee{background:var(--espresso);color:var(--cream);overflow:hidden;padding:15px 0}
  .mq-track{display:flex;width:max-content;animation:scrollx 36s linear infinite}
  .mq-track span{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(var(--cream-rgb),.6);padding:0 28px;position:relative}
  .mq-track span::after{content:"◆";position:absolute;right:-5px;top:50%;transform:translateY(-50%);color:var(--gold);font-size:8px}
  /* Press mentions read as a credential rather than one more feature. */
  .mq-track .mq-mark{color:var(--accent-on-dark);font-weight:500}
  /* The second ticker sits between two light sections. Repeating the dark band
     there would have read as one long dark slab with the hero one, so this one
     is a quiet rule-to-rule line instead. */
  .marquee-quiet{background:var(--paper);color:var(--ink);padding:13px 0;
    border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .marquee-quiet .mq-track span{color:var(--ink-soft)}
  .marquee-quiet .mq-track span::after{color:var(--bronze)}
  @keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* ================= SECTION SHELL ================= */
  /* [scoped] source rule was a bare `section{}`. `:where()` keeps specificity at
     0-0-1 so every override below (.marquee, .charity, inline padding) still wins. */
  /* 112px in the mock. Fourteen sections carried 3136px of pure padding, and the
     client's first note was that the home page scrolls too long - this is the
     cheapest 730px on the page and the rhythm still reads as generous. */
  :where(body.pr-home) section{padding:86px 0;position:relative}
  /* 60px in the mock; 46 across thirteen sections is another 180px off the scroll. */
  .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:46px}
  .kicker{display:flex;align-items:center;gap:12px;margin-bottom:20px}
  .kicker .rule{width:34px;height:1px;background:var(--gold);transform-origin:left;transform:scaleX(0);transition:transform .9s var(--ease)}
  .in .kicker .rule,.kicker.in .rule{transform:none}
  .sec-head h2{font-family:'Manrope',sans-serif;font-size:clamp(34px,4.6vw,60px);line-height:1.03}
  .sec-head h2 .it{color:var(--gold)}
  .sec-head p{color:var(--ink-soft);max-width:320px;font-size:15px;line-height:1.6}
  /* outbound links from a home section to the matching inner page */
  .sec-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;max-width:320px}
  /* Was an inline-block 24px high - under the 36px a finger needs. Same look,
     real hit area. */
  .news-all{display:inline-flex;align-items:center;min-height:40px;
    color:var(--gold-ink);font-weight:600}
  .sec-link{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--paper);
    border-radius:var(--r-btn);padding:8px 16px;font-size:12.5px;font-weight:600;color:var(--ink);transition:.25s}
  .sec-link i{font-style:normal;color:var(--gold-ink);transition:transform .3s var(--ease)}
  .sec-link:hover{border-color:var(--gold);color:var(--gold)}
  .sec-link:hover i{transform:translateX(4px)}
  /* on the inverted sections the pill has to invert too */
  .brands .sec-link{background:transparent;border-color:rgba(var(--cream-rgb),.22);color:var(--cream)}
  /* the arrow is --gold-ink by default, which is 2.57:1 on this dark band */
  .brands .sec-link i{color:var(--gold)}
  .brands .sec-link:hover{border-color:var(--gold);color:var(--gold)}
  .svc-side .sec-links{justify-content:flex-end}
  @media(max-width:860px){.sec-links{max-width:none}.svc-side .sec-links{justify-content:flex-start}}
  /* word-split for h2 */
  .wsplit .ln{display:block}
  .wsplit .wm{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
  .wsplit .wd{display:inline-block;transform:translateY(115%);transition:transform .85s var(--ease)}
  .wsplit.in .wd{transform:none}
  /* generic reveal + stagger */
  .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
  .rv.in{opacity:1;transform:none}
  .stagger>*{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
  .stagger.in>*{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){
    .rv,.stagger>*,.split .char,.wsplit .wd,.kicker .rule,.hero-eyebrow .rule{opacity:1!important;transform:none!important;transition:none!important}
    .hgem-spin,.mq-track,.brow,.scroll-hint::before,.addr-tag i,
    .cnm-disc,.cnm-disc::before,.cnm-disc::after{animation:none!important}
    /* The draw-on IS what makes the facets visible - they start at
       stroke-dashoffset:1, which is a blank square. Killing the animation
       without this leaves an empty hero. */
    .hgem-girdle,.hgem-bezel,.hgem-upper,.hgem-star,.hgem-table{
      animation:none!important;stroke-dashoffset:0!important}
  }

  /* ================= PRICES ================= */
  .pcard{border:1px solid var(--line);border-radius:var(--r-box);padding:34px;background:var(--cream-2);transition:box-shadow .35s,border-color .35s;transform-style:preserve-3d;will-change:transform}

  /* metals carousel: one card per metal, swiped horizontally */
  /* Equal heights across the rail. Ragged bottoms are exactly the "по размерам
     разные, грязно смотрится" look; .prows below takes the slack so every
     "Подробно о выкупе" sits on one baseline, and the slack in the short cards
     is filled by the element watermark rather than reading as dead space. */
  .price-rail{padding-bottom:6px;align-items:stretch}
  /* Scoped to .ig-rail on purpose: css/infographics.css sets `.ig-rail>*{flex:0 0 auto}`
     at the same specificity and loads later, so a bare `.pslide` lost the tie and
     the cards stretched to their content width. */
  .ig-rail .pslide{flex:0 0 clamp(300px,30vw,412px)}
  .pslide{display:flex;flex-direction:column;position:relative;overflow:hidden}
  .pslide .prows{flex:1}
  /* Chemical symbol as a watermark - visual weight instead of another line of text. */
  .psym{position:absolute;right:18px;bottom:6px;font-family:'Manrope',sans-serif;font-size:130px;line-height:.8;
    color:var(--gold);opacity:.07;pointer-events:none;user-select:none}
  .pslide>*{position:relative}
  .pslide-link{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);
    font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.06em;color:var(--bronze-ink);transition:color .25s}
  .pslide-link i{transition:transform .3s var(--ease);display:inline-block}
  .pslide-link:hover{color:var(--gold)}
  .pslide-link:hover i{transform:translateX(5px)}
  .pslide.price-note .psym{color:var(--gold);opacity:.14;font-size:96px;right:24px;bottom:auto;top:18px}
  .pslide.price-note .eyebrow{position:relative}
  .pcard:hover{box-shadow:0 34px 70px rgba(var(--ink-rgb),.1);border-color:var(--gold)}
  .pcard .ph{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--line)}
  .pcard .ph .mn{font-family:'Manrope',sans-serif;font-size:30px}
  .pcard .ph .badge{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;color:var(--bronze-ink);text-transform:uppercase}
  .plead{color:var(--ink-soft);font-size:13px;line-height:1.6;margin:-8px 0 20px}
  .prow{display:grid;grid-template-columns:1fr auto;gap:16px;padding:11px 0;border-bottom:1px dashed var(--line);font-size:14px;align-items:baseline}
  .prow:last-child{border-bottom:0}
  .prow>span:first-child{color:var(--ink-soft)}
  /* The figures used to be JetBrains Mono with wide tracking, which read as a
     terminal readout rather than a price list. Manrope's tabular figures keep the
     columns aligned without the machine look the client flagged. */
  .prow .val{font-family:'Manrope',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
    font-size:16px;font-weight:600;letter-spacing:-.005em;color:var(--ink);white-space:nowrap;text-align:right}
  .pnote{display:block;font-style:normal;font-weight:400;font-size:11px;letter-spacing:.02em;
    color:var(--gold-ink);margin-top:2px}
  /* Padding deliberately inherited from .pcard: its own 30px sat the CTA rule 4px
     below the other three cards once the heights were equalised. */
  .price-note{background:var(--espresso);color:var(--cream);border-radius:var(--r-box);display:flex;flex-direction:column;justify-content:space-between}
  .ig-rail .pslide.price-note{flex:0 0 clamp(300px,30vw,412px)}
  .price-note .big{font-family:'Manrope',sans-serif;font-size:34px;color:var(--accent-on-dark);margin:6px 0}
  .price-note p{color:rgba(var(--cream-rgb),.6);font-size:13.5px;line-height:1.55}
  /* Same metrics as .pslide-link - the cards are equal height now, so the rule
     above the CTA has to land on one line across all four. */
  .price-note a{margin-top:22px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.06em;color:var(--cream);border-top:1px solid rgba(var(--cream-rgb),.18);padding-top:16px;display:block;transition:color .25s}
  .price-note a:hover{color:var(--gold)}

  /* ================= PROCESS ================= */
  .process{background:var(--paper)}
  .proc-line{height:1px;background:var(--line);position:relative;margin:0 0 -1px}
  .proc-line i{position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--ease) .2s}
  .proc-line.in i{transform:none}
  .proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r-box);overflow:hidden}
  .pstep{padding:40px 30px 44px;border-right:1px solid var(--line);background:var(--cream-2);position:relative;transition:background .35s}
  .pstep:last-child{border-right:0}
  .pstep:hover{background:var(--paper)}
  .pstep .pn{width:44px;height:44px;border-radius:50%;border:1px solid var(--gold);display:grid;place-items:center;
    font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--gold-ink);margin-bottom:26px;transition:.35s}
  .pstep:hover .pn{background:var(--espresso);color:var(--cream);border-color:var(--espresso)}
  .pstep h3{font-family:'Manrope',sans-serif;font-size:22px;margin-bottom:10px}
  .pstep p{color:var(--ink-soft);font-size:13.5px;line-height:1.6}
  @media(max-width:860px){.proc-grid{grid-template-columns:1fr 1fr}.pstep:nth-child(2){border-right:0}.pstep:nth-child(1),.pstep:nth-child(2){border-bottom:1px solid var(--line)}}

  /* advantages */
  .adv-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--r-box);overflow:hidden;margin-top:18px}
  .adv{padding:34px 28px;border-right:1px solid var(--line);background:var(--paper);transition:.35s;position:relative;overflow:hidden}
  /* Guilloche rosette - the fine concentric engraving used on documents and
     banknotes. Stands in for the "watermark" the client asked for on the trust
     cards; a real state emblem is not ours to print. */
  .adv-seal::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;transition:opacity .35s;
    background:
      repeating-radial-gradient(circle at 84% 116%,transparent 0 8px,rgba(var(--gold-rgb),.17) 8px 9px),
      repeating-radial-gradient(circle at 104% 92%,transparent 0 12px,rgba(var(--gold-rgb),.11) 12px 13px);
    -webkit-mask-image:linear-gradient(305deg,#000,transparent 58%);mask-image:linear-gradient(305deg,#000,transparent 58%)}
  .adv-seal:hover::before{opacity:.3}
  .adv>*{position:relative}
  .adv:last-child{border-right:0}
  .adv:hover{background:var(--espresso);color:var(--cream)}
  .adv:hover p{color:rgba(255,255,255,.78)}
  .adv:hover .adv-num{color:rgba(255,255,255,.7)}
  .adv-num{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--gold-ink);margin-bottom:40px}
  .adv h3{font-family:'Manrope',sans-serif;font-size:22px;margin-bottom:9px}
  .adv p{color:var(--ink-soft);font-size:13.5px;line-height:1.55}
  @media(max-width:860px){.adv-grid{grid-template-columns:1fr }.adv:nth-child(2){border-right:0}.adv:nth-child(1),.adv:nth-child(2){border-bottom:1px solid var(--line)}}

  /* ================= BRANDS ================= */
  .brands{background:var(--espresso);color:var(--cream)}
  .brands .sec-head h2{color:var(--cream)}
  .brands .sec-head p{color:rgba(var(--cream-rgb),.55)}
  .brand-track-wrap{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  .brow{display:flex;gap:12px;width:max-content;animation:scrollx 48s linear infinite}
  .brow.r2{animation-duration:62s;animation-direction:reverse;margin-top:12px}
  .brow.r3{animation-duration:54s;margin-top:12px}
  .brand-track-wrap:hover .brow{animation-play-state:paused}
  .chip{border:1px solid rgba(var(--cream-rgb),.16);border-radius:var(--r-btn);padding:13px 24px;font-family:'Manrope',sans-serif;font-size:20px;white-space:nowrap;transition:.3s;color:rgba(var(--cream-rgb),.9)}
  .chip:hover{border-color:var(--gold);color:var(--gold);background:rgba(var(--gold-rgb),.08)}
  .brands-cats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:60px}
  .bcat{border:1px solid rgba(var(--cream-rgb),.16);border-radius:var(--r-box);padding:26px 22px;transition:.35s}
  .bcat:hover{background:rgba(var(--gold-rgb),.09);border-color:var(--gold);transform:translateY(-4px)}
  .bcat h4{font-family:'Manrope',sans-serif;font-size:20px;margin-bottom:10px}
  .bcat p{color:rgba(var(--cream-rgb),.55);font-size:12px;line-height:1.55}
  /* On a phone five stacked cards were 750px of scroll; they swipe instead, the
     same treatment the client asked for on the other long lists. */
  @media(max-width:900px){
    .brands-cats{display:flex;grid-template-columns:none;overflow-x:auto;gap:12px;margin-top:34px;
      scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:4px}
    .brands-cats::-webkit-scrollbar{display:none}
    .brands-cats>*{flex:0 0 74%;scroll-snap-align:start}
  }

  /* ================= WATCHES ================= */
  /* The brand marquee also runs on the light watches section, where the chip has
     to switch from cream-on-espresso to ink-on-paper. */
  .brand-track-wrap.light{margin:30px 0 54px}
  .brand-track-wrap.light .chip{border-color:var(--line);color:var(--ink);background:var(--paper)}
  .brand-track-wrap.light .chip:hover{border-color:var(--gold);color:var(--gold);background:rgba(var(--gold-rgb),.06)}
  .wcat-rail .wcat{flex:0 0 clamp(260px,26vw,330px)}
  .wcat{display:flex;gap:16px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r-box);padding:20px 22px;background:var(--cream-2);transition:.3s}
  .wcat:hover{border-color:var(--gold);transform:translateY(-5px)}
  .wcat .wi{font-family:'JetBrains Mono',monospace;color:var(--gold-ink);font-size:12px;padding-top:4px}
  .wcat h4{font-family:'Manrope',sans-serif;font-size:19px;margin-bottom:3px}
  .wcat p{color:var(--ink-soft);font-size:12.5px;line-height:1.5}


  /* ================= 4C STONES ================= */
  .stones{background:var(--cream)}
  .c4-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  .c4{border:1px solid var(--line);border-radius:var(--r-box);padding:32px 28px;background:var(--paper);transition:.35s;position:relative;overflow:hidden}
  .c4::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:var(--gold-soft);transition:transform .5s var(--ease)}
  .c4:hover::after{transform:scale(2.4)}
  .c4:hover{border-color:var(--gold)}
  .c4>*{position:relative;z-index:1}
  .c4 .cl{font-family:'Manrope',sans-serif;font-size:46px;color:var(--gold);line-height:1;margin-bottom:18px}
  .c4 h4{font-family:'Manrope',sans-serif;font-size:22px;margin-bottom:8px}
  .c4 p{color:var(--ink-soft);font-size:13px;line-height:1.55}
  .stone-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
  .stag{border:1px solid var(--line);background:var(--paper);border-radius:var(--r-btn);padding:10px 20px;font-size:13.5px;color:var(--ink-soft);transition:.25s}
  .stag:hover{border-color:var(--gold);color:var(--gold)}
  @media(max-width:900px){.c4-grid{grid-template-columns:1fr 1fr}}

  /* ================= COINS ================= */
  /* The cards carry a photo now, and they travel sideways in a rail rather than
     stacking into a second row. */
  .ig-rail .coin{flex:0 0 clamp(260px,26vw,330px)}
  .coin{border:1px solid var(--line);border-radius:var(--r-box);background:var(--cream-2);transition:.35s;min-height:212px;overflow:hidden;display:flex;flex-direction:column}
  .coin:not(.has-img){padding:26px 22px}
  .coin:hover{border-color:var(--gold);box-shadow:0 24px 48px rgba(var(--ink-rgb),.08);transform:translateY(-5px)}
  /* ---------- struck coin, drawn not photographed ---------- */
  /* Perspective is what makes the scroll turn read as a coin rotating rather
     than an ellipse being squashed: without it rotateY is a flat scaleX. */
  .cnm{aspect-ratio:16/10;display:grid;place-items:center;position:relative;overflow:hidden;
    perspective:620px;
    background:radial-gradient(circle at 50% 42%,var(--cream) 0%,var(--cream-2) 62%,var(--paper) 100%)}
  /* faint field rings, so the coin sits on something rather than floating. The
     mask is what keeps them from being clipped into a visible rectangle by the
     card's 16/10 box. */
  .cnm::before{content:"";position:absolute;width:190%;aspect-ratio:1;border-radius:50%;
    background:repeating-radial-gradient(circle,transparent 0 13px,rgba(var(--gold-rgb),.08) 13px 14px);
    -webkit-mask:radial-gradient(circle,#000 22%,transparent 58%);mask:radial-gradient(circle,#000 22%,transparent 58%)}
  .cnm-disc{position:relative;width:52%;max-width:104px;aspect-ratio:1;border-radius:50%;
    background:radial-gradient(circle at 34% 26%,var(--c-hi),var(--c-mid) 44%,var(--c-lo) 78%,var(--c-edge));
    box-shadow:0 8px 18px rgba(var(--ink-rgb),.22),inset 0 0 0 1px rgba(255,255,255,.35);
    animation:cnm-bob 5.5s var(--ease) infinite}
  .cnm--gold{--c-hi:#fff6e2;--c-mid:#e2c184;--c-lo:#b8935a;--c-edge:#8f6d3a;--c-ink:#6b4f26}
  .cnm--silver{--c-hi:#ffffff;--c-mid:#e4e2dc;--c-lo:#b9b6ad;--c-edge:#8e8b83;--c-ink:#5d5a53}
  /* Milled edge: fine radial teeth around the rim, turning slowly. The mask band
     has to be several pixels wide - at 87% of a 104px disc it was half a pixel
     and the milling was invisible. */
  .cnm-disc::before{content:"";position:absolute;inset:-2px;border-radius:50%;
    background:repeating-conic-gradient(var(--c-edge) 0deg 1.5deg,transparent 1.5deg 4.4deg);
    -webkit-mask:radial-gradient(circle,transparent 79%,#000 82%,#000 97%,transparent 99%);
    mask:radial-gradient(circle,transparent 79%,#000 82%,#000 97%,transparent 99%);
    opacity:.55;animation:spin 26s linear infinite}
  /* specular sweep across the field */
  .cnm-disc::after{content:"";position:absolute;inset:0;border-radius:50%;overflow:hidden;
    background:linear-gradient(74deg,transparent 38%,rgba(255,255,255,.62) 50%,transparent 62%);
    background-size:260% 100%;background-repeat:no-repeat;background-position:-80% 0;
    animation:cnm-shine 6.5s var(--ease) infinite}
  /* Two-sided coin. The disc keeps its own bob animation, so the scroll-driven
     turn lives on .cnm-disc's own custom property and is composed into the
     keyframe - putting rotateY on the disc directly would be overwritten by the
     animation on every frame. --turn is written by js/home-redesign.js and
     defaults to 0, so with no JS the obverse simply faces front. */
  .cnm-disc{--turn:0deg;transform-style:preserve-3d}
  .cnm-face{position:absolute;inset:0;width:100%;height:100%;
    backface-visibility:hidden;-webkit-backface-visibility:hidden}
  .cnm-face--rev{transform:rotateY(180deg)}
  .cnm-punch{fill:none;stroke:var(--c-ink);stroke-width:2;stroke-linejoin:round;opacity:.55}
  .cnm-rim{fill:none;stroke:var(--c-ink);stroke-width:1.1;opacity:.45}
  .cnm-rim2{opacity:.25}
  .cnm-motif{fill:none;stroke:var(--c-ink);stroke-width:2;stroke-linecap:round;opacity:.62}
  .cnm-motif--sun{stroke-width:1.6;opacity:.5}
  .cnm-legend{font-family:'Manrope',sans-serif;font-size:20px;fill:var(--c-ink);opacity:.85}
  .cnm-legend--long{font-size:14px;letter-spacing:.04em}
  /* Everything that moves the disc goes through the keyframe, because a running
     animation overrides a plain `transform` declaration - the old hover rule set
     transform:scale() next to a merely paused animation and never had any
     effect. Hover and turn are custom properties instead, which the keyframe
     composes; the base transform is what reduced motion falls back to. */
  .cnm-disc{transform:rotateY(var(--turn)) scale(var(--pop,1))}
  .coin:hover .cnm-disc{animation-play-state:paused;--pop:1.06}
  @keyframes cnm-bob{
    0%,100%{transform:translateY(-3px) rotateY(var(--turn)) scale(var(--pop,1))}
    50%{transform:translateY(3px) rotateY(var(--turn)) scale(var(--pop,1))}
  }
  @keyframes cnm-shine{0%,58%{background-position:-80% 0}88%,100%{background-position:180% 0}}
  .coin.has-art .coin-txt{padding:22px}
  .coin .cn{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--gold-ink);letter-spacing:.1em;margin-bottom:24px}
  .coin.has-art .cn{margin-bottom:12px}
  .coin h4{font-family:'Manrope',sans-serif;font-size:19px;line-height:1.1;margin-bottom:10px}
  .coin p{color:var(--ink-soft);font-size:12px;line-height:1.5}

  /* ================= REVIEWS ================= */
  .reviews{background:var(--cream)}

  /* ----- press: the television report, first thing in the section ----- */
  /* 1280x704 is the broadcast frame the file actually carries. Declaring it as
     aspect-ratio (and as width/height on the tag) reserves the box before the
     poster decodes, so the scores below do not jump. */
  .press{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:34px;align-items:start;margin-bottom:46px}
  .press-video{margin:0}
  .press-frame{position:relative;border-radius:var(--r-box);overflow:hidden;border:1px solid var(--line);background:var(--espresso)}
  .press-media{display:block;width:100%;height:auto;aspect-ratio:1280/704;background:var(--espresso)}
  /* Sits over the video and under the play button until playback starts. */
  .press-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .press-video figcaption{margin-top:11px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;color:var(--ink-soft)}
  /* Built by JS, so it never covers the native player for a visitor without it. */
  .press-play{position:absolute;inset:0;display:grid;place-items:center;border:0;padding:0;cursor:pointer;font:inherit;color:#fff;
    background:linear-gradient(180deg,rgba(var(--espresso-rgb),.06) 45%,rgba(var(--espresso-rgb),.34) 100%)}
  .press-play-i{width:76px;height:76px;border-radius:50%;background:rgba(255,255,255,.94);display:grid;place-items:center;
    box-shadow:0 14px 40px rgba(var(--espresso-rgb),.35);transition:transform .32s var(--ease),background .32s}
  .press-play-i::after{content:'';width:0;height:0;margin-left:6px;border-left:21px solid var(--espresso);
    border-top:13px solid transparent;border-bottom:13px solid transparent}
  .press-play:hover .press-play-i,.press-play:focus-visible .press-play-i{transform:scale(1.09);background:#fff}
  .press-side{padding-top:2px}
  .press-badge{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--gold-ink);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-btn);padding:7px 15px}
  .press-side h3{font-family:'Manrope',sans-serif;font-size:27px;line-height:1.15;margin:17px 0 12px}
  .press-side p{font-size:14px;line-height:1.65;color:var(--ink-soft)}
  .press-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:24px}
  .press-strip figure{margin:0}
  .press-shot{display:block;position:relative;border-radius:var(--r-box);overflow:hidden;cursor:zoom-in}
  .press-shot::after{content:'';position:absolute;inset:0;background:rgba(var(--espresso-rgb),0);transition:background .25s}
  .press-shot:hover::after,.press-shot:focus-visible::after{background:rgba(var(--espresso-rgb),.18)}
  /* height:auto is load-bearing. The tags carry their real intrinsic width and
     height, and those attributes are presentational hints: with both sides set,
     aspect-ratio is ignored and the frames stretched into portraits. */
  .press-strip img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-box);border:1px solid var(--line)}
  .press-strip figcaption{margin-top:8px;font-size:11px;line-height:1.35;color:var(--ink-soft)}
  @media(max-width:1040px){.press{gap:26px}.press-side h3{font-size:23px}}
  @media(max-width:860px){
    .press{grid-template-columns:1fr;gap:22px;margin-bottom:34px}
    .press-side h3{font-size:21px}
    .press-play-i{width:62px;height:62px}
    .press-play-i::after{border-left-width:17px;border-top-width:11px;border-bottom-width:11px}
  }
  @media(max-width:479px){
    .press-strip{gap:7px}
    .press-strip figcaption{font-size:10px;margin-top:6px}
    .press-play-i{width:56px;height:56px}
  }

  /* ----- lightbox for the press stills ----- */
  /* A native <dialog>: Esc, the focus trap and the backdrop come from the
     browser, so the whole thing is a few lines instead of a component.
     margin:auto is what centres it, and the reset at the top of this file
     (`*{margin:0}`) had already taken that away - the box sat in the corner. */
  .press-lb{border:0;padding:0;margin:auto;background:transparent;max-width:min(1180px,94vw);max-height:96vh;overflow:visible;color:#fff}
  .press-lb::backdrop{background:rgba(var(--espresso-rgb),.88)}
  .press-lb-fig{position:relative;margin:0}
  .press-lb-fig img{display:block;width:100%;height:auto;max-height:80vh;object-fit:contain;border-radius:var(--r-box);background:var(--espresso)}
  .press-lb-fig figcaption{margin-top:13px;text-align:center;font-size:13px;color:rgba(255,255,255,.84)}
  .press-lb-btn{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border:0;border-radius:50%;
    background:rgba(255,255,255,.9);color:var(--espresso);font-size:24px;line-height:1;cursor:pointer;
    display:grid;place-items:center;transition:background .2s,transform .2s}
  .press-lb-btn:hover{background:#fff;transform:translateY(-50%) scale(1.07)}
  .press-lb-prev{left:14px}
  .press-lb-next{right:14px}
  .press-lb-close{position:absolute;top:12px;right:12px;width:40px;height:40px;border:0;border-radius:50%;
    background:rgba(var(--espresso-rgb),.6);color:#fff;font-size:21px;line-height:1;cursor:pointer;
    display:grid;place-items:center;transition:background .2s}
  .press-lb-close:hover{background:rgba(var(--espresso-rgb),.85)}
  @media(max-width:600px){
    .press-lb-btn{width:38px;height:38px;font-size:20px}
    .press-lb-prev{left:6px}
    .press-lb-next{right:6px}
    .press-lb-fig figcaption{font-size:12px}
  }
  .rev-top{display:flex;gap:14px;margin-bottom:44px;flex-wrap:wrap}
  .rev-score{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:var(--r-btn);padding:14px 26px;background:var(--paper)}
  .rev-score .s{font-family:'Manrope',sans-serif;font-size:34px;color:var(--gold)}
  .rev-score .lbl{font-size:12px;color:var(--ink-soft);line-height:1.35}
  .rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .rcard{border:1px solid var(--line);border-radius:var(--r-box);padding:30px;background:var(--paper);display:flex;flex-direction:column;transition:box-shadow .3s;transform-style:preserve-3d;will-change:transform}
  .rcard:hover{box-shadow:0 26px 54px rgba(var(--ink-rgb),.09)}
  .rcard .stars{color:var(--gold-ink);letter-spacing:3px;font-size:14px;margin-bottom:16px}
  .rcard p{font-size:14px;line-height:1.65;flex:1}
  .rcard .who{margin-top:20px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.06em;color:var(--ink-soft);text-transform:uppercase}
  @media(max-width:860px){.rev-grid{grid-template-columns:1fr}}

  /* ================= OFFICE GALLERY ================= */
  .gal{overflow-x:auto;cursor:grab;scrollbar-width:none;-ms-overflow-style:none;padding:6px 0 26px}
  .gal::-webkit-scrollbar{display:none}
  .gal.grabbing{cursor:grabbing}
  .gal-track{display:flex;gap:16px;width:max-content;padding:0 34px}
  .gal figure{position:relative;width:440px;height:320px;border-radius:var(--r-box);overflow:hidden;background:var(--cream);flex-shrink:0;display:block}
  .gal figure img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
  .gal figure:hover img{transform:scale(1.06)}
  .gal figure .cap{position:absolute;left:18px;bottom:16px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.22em;
    text-transform:uppercase;color:#fff;background:rgba(var(--espresso-rgb),.72);backdrop-filter:blur(6px);padding:8px 14px;border-radius:var(--r-btn)}
  .gal-hint{display:flex;align-items:center;gap:10px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze-ink);margin-top:4px}
  .gal-hint::before{content:"";width:34px;height:1px;background:var(--gold)}
  @media(max-width:700px){.gal figure{width:300px;height:220px}}

  /* ================= NEWS + TG ================= */
  .news-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  .ncard{border:1px solid var(--line);border-radius:var(--r-box);padding:26px;background:var(--cream-2);display:flex;flex-direction:column;min-height:230px;transition:.35s}
  .ncard:hover{border-color:var(--gold);transform:translateY(-5px);box-shadow:0 24px 48px rgba(var(--ink-rgb),.08)}
  .ncard .date{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--bronze-ink);letter-spacing:.1em;margin-bottom:16px}
  .ncard h4{font-family:'Manrope',sans-serif;font-size:20px;line-height:1.15;flex:1}
  .ncard .more{margin-top:20px;font-size:13px;color:var(--gold-ink);font-weight:600;display:inline-flex;align-items:center;gap:8px}
  .ncard .more i{transition:transform .3s var(--ease);font-style:normal}
  .ncard:hover .more i{transform:translateX(6px)}
  .tg-banner{margin-top:18px;background:var(--espresso);color:var(--cream);border-radius:var(--r-box);padding:40px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;position:relative;overflow:hidden}
  /* The bloom used to be --gold at .25, which is brown on brown now that gold is
     retired - invisible, and it left the slab reading as one flat dark mass
     ("слишком тёмное"). Cream at .10 lifts the corner without a fourth colour. */
  .tg-banner::before{content:"";position:absolute;right:-60px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(var(--cream-rgb),.10),transparent 65%)}
  .tg-banner h3{font-family:'Manrope',sans-serif;font-size:clamp(24px,3vw,34px);line-height:1.1;position:relative}
  .tg-banner h3 .it{color:var(--accent-on-dark)}
  .tg-banner p{color:rgba(var(--cream-rgb),.6);font-size:14px;margin-top:10px;max-width:420px;position:relative}
  @media(max-width:900px){.news-grid{grid-template-columns:1fr 1fr}}
  @media(max-width:560px){.news-grid{grid-template-columns:1fr}}

  /* ================= FAQ ================= */
  .faq-list{max-width: auto}
  .fq{border-bottom:1px solid var(--line)}
  .fq button{width:100%;background:none;border:0;display:flex;justify-content:space-between;align-items:center;gap:20px;
    padding:26px 0;cursor:pointer;text-align:left;font-family:'Manrope',sans-serif;font-size:clamp(19px,2.2vw,24px);color:var(--ink)}
  .fq .pl{width:34px;height:34px;border:1px solid var(--gold);border-radius:50%;position:relative;flex-shrink:0;transition:.35s}
  .fq .pl::before,.fq .pl::after{content:"";position:absolute;background:var(--gold);top:50%;left:50%;transition:.35s}
  .fq .pl::before{width:12px;height:1px;transform:translate(-50%,-50%)}
  .fq .pl::after{width:1px;height:12px;transform:translate(-50%,-50%)}
  .fq.open .pl{background:var(--gold)}
  .fq.open .pl::before,.fq.open .pl::after{background:#fff}
  .fq.open .pl::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
  .fq .ans{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
  .fq .ans p{padding:0 60px 26px 0;color:var(--ink-soft);font-size:15px;line-height:1.7}

  /* ================= CHARITY ================= */
  .charity{background:var(--espresso);color:var(--cream);text-align:center}
  .charity .eyebrow{color:var(--accent-on-dark)}
  .charity h2{font-family:'Manrope',sans-serif;font-size:clamp(30px,4.4vw,54px);line-height:1.08;margin:22px auto 20px;max-width:760px}
  .charity h2 .it{color:var(--accent-on-dark)}
  .charity p{color:rgba(var(--cream-rgb),.62);font-size:16px;line-height:1.7;max-width:640px;margin:0 auto}

  /* ================= CONTACTS ================= */
  /* Address band. Each site now shows only its own office, so this is a single
     card - but it is NOT stretched across the full width: an address is a
     short block of text and a 1150px-wide card holding four short lines reads
     as an empty box. It keeps a column and a half. */
  .addr-band{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:6px 0 34px}
  .addr-band--single{grid-template-columns:minmax(0,1fr)}
  .addr-band--single .addr{max-width:520px}
  .addr{border:1px solid var(--line);border-radius:var(--r-box);padding:26px 28px;background:var(--paper);position:relative;overflow:hidden}
  .addr-tag{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:10.5px;
    letter-spacing:.14em;text-transform:uppercase;color:var(--bronze-ink);margin-bottom:18px}
  .addr-live .addr-tag{color:var(--gold-ink)}
  .addr-tag i{width:7px;height:7px;border-radius:50%;background:var(--gold);animation:addr-live 2.4s var(--ease) infinite}
  @keyframes addr-live{0%,100%{box-shadow:0 0 0 0 rgba(var(--gold-rgb),.5)}50%{box-shadow:0 0 0 7px rgba(var(--gold-rgb),0)}}
  .addr-name{font-family:'Manrope',sans-serif;font-size:26px;line-height:1.1}
  .addr-line{font-size:15px;margin-top:8px}
  .addr-meta{color:var(--ink-soft);font-size:13px;margin-top:6px}
  @media(max-width:720px){.addr-band{grid-template-columns:1fr}}

  .contacts-in{display:grid;grid-template-columns:1fr 1fr;gap:40px}
  .contact-card{border:1px solid var(--line);border-radius:var(--r-box);padding:38px;background:var(--cream-2)}
  .contact-card .phone{font-family:'Manrope',sans-serif;font-size:38px;margin-bottom:22px;display:block;transition:color .25s}
  .contact-card .phone:hover{color:var(--gold)}
  .contact-card .row{display:flex;gap:14px;padding:15px 0;border-bottom:1px solid var(--line);align-items:baseline}
  .contact-card .row:last-of-type{border-bottom:0}
  .contact-card .k{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--bronze-ink);width:92px;flex-shrink:0}
  .contact-card .v{font-size:15px;line-height:1.5}
  .contact-btns{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:26px}
  .cbtn{border:1px solid var(--line);border-radius:var(--r-btn);padding:13px;text-align:center;font-size:13px;transition:.3s;background:var(--paper)}
  .cbtn:hover{background:var(--espresso);color:var(--cream);border-color:var(--espresso)}
  .map-box{border:1px solid var(--line);border-radius:var(--r-box);overflow:hidden;min-height:460px;background:var(--cream)}
  .map-box iframe{width:100%;height:100%;min-height:460px;border:0;filter:sepia(.15) contrast(1.02)}
  @media(max-width:860px){.contacts-in{grid-template-columns:1fr}}

  /* ================= FOOTER ================= */
  footer{background:var(--espresso);color:rgba(var(--cream-rgb),.65);padding:66px 0 40px}
  footer .fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:34px}
  footer .logo{font-family:'Manrope',sans-serif;font-size:26px;color:var(--cream);margin-bottom:16px}
  /* --gold is a bark tone now, so the second half of the wordmark measured
     2.18:1 against the espresso footer. See --accent-on-dark in css/palette.css. */
  footer .logo span{color:var(--accent-on-dark)}
  .foot-tag{font-size:13px;line-height:1.6;max-width:280px;color:rgba(var(--cream-rgb),.62)}
  footer h5{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-on-dark);margin-bottom:18px}
  footer a{display:block;font-size:13px;padding:5px 0;transition:.2s}
  /* 28px tall on a phone is under the comfortable tap size */
  @media(max-width:900px){footer a{padding:10px 0;font-size:13.5px}}
  footer a:hover{color:var(--cream)}
  footer .fbot{margin-top:50px;padding-top:24px;border-top:1px solid rgba(var(--cream-rgb),.15);font-size:12px;color:rgba(var(--cream-rgb),.55);line-height:1.7}
  @media(max-width:1080px){footer .fgrid{grid-template-columns:1fr 1fr 1fr;gap:30px}}
  @media(max-width:860px){footer .fgrid{grid-template-columns:1fr 1fr}}

  @media(max-width:860px){
    .wrap{padding:0 20px}
    .hero-lower{grid-template-columns:1fr;gap:26px}
    /* The phone is the client's primary view and the one she said scrolls too
       long, so the vertical rhythm tightens further here. */
    :where(body.pr-home) section{padding:56px 0}
    /* 60px below every heading on a phone is 13 sections x 60px of dead scroll. */
    .sec-head{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:30px}
    .sec-head h2{font-size:clamp(30px,8.4vw,40px)}
    .sec-head p{font-size:14px;line-height:1.55}
    /* the price rows carry two-line labels at this width, so the padding comes off */
    .pcard{padding:24px 22px}
    .prow{padding:8px 0;font-size:13.5px}
    .prow .val{font-size:15px}
    /* the lead repeats what the rows already say - it is the desktop's breathing room */
    .plead{display:none}
    .hide-sm{display:none}
    /* the last targets still under ~36px on a phone */
    .mmenu-foot .ph{padding:3px 0}
    .pslide-link{padding-top:20px;padding-bottom:4px}
    #news .sec-head a{display:inline-block;padding:1px 0}
    nav.top{padding:12px 20px}
    header.hero{padding-top:126px}
    .gal-track{padding:0 20px}
    /* 40px of air above a one-line label costs 4x40px across the advantages grid */
    .adv-num{margin-bottom:20px}
    .adv{padding:26px 22px}
    /* 460px of map on an 844px screen is most of a swipe */
    .map-box,.map-box iframe{min-height:320px}
    .addr{padding:20px 22px}
    .addr-tag{margin-bottom:12px}
  }

  /* ================= MOBILE, 375 -> 768 =================
     The phone is the client's primary view ("я смотрю с мобильной версии,
     считаю что она первостепенно важнее") and 375 is her own screen.

     Everything here is FLUID rather than stepped. A plain 400px breakpoint
     left a cliff at 414: the heading jumped 34 -> 43px, the section rhythm
     46 -> 56, and the page grew a full 1000px on one pixel of width.

     Every value below reads `clamp(at375, Avw + Bpx, at768)` - the middle
     term is a plain length so it stays valid CSS. (A ratio variable would be
     tidier, but `(100vw - 375px) / 393` yields a LENGTH, not the unitless
     number a multiplier needs, so that form does not work here.) */
  @media(max-width:768px){
    .wrap{padding:0 clamp(18px, 4.07vw + 2.7px, 34px)}
    :where(body.pr-home) section{padding:clamp(46px, 4.58vw + 28.8px, 64px) 0}
    header.hero{padding-top:clamp(112px, 5.09vw + 93px, 132px)}
    /* 40px split "Экспертная" and "оценка" across two ragged lines; 34 holds
       the phrase together - "строчка к строчке, как в книге".
       The 860px rule setting the old clamp sits FURTHER DOWN this file, so
       matching its specificity is not enough: a later rule wins the tie. The
       body class outranks it instead of relying on source order. */
    body.pr-home header.hero h1{font-size:clamp(34px, 5.6vw + 13px, 56px);line-height:1.07}
    .hero-lede{font-size:clamp(15.5px, .38vw + 14.1px, 17px);line-height:1.62}
    .hero-pill{font-size:clamp(12px, .25vw + 11px, 13px);padding:9px 15px}
    .hero-pills{gap:8px;margin-top:16px}
    .sec-head{margin-bottom:clamp(24px, 2.04vw + 16.4px, 32px)}
    .sec-head h2{font-size:clamp(27px, 3.31vw + 14.6px, 40px);line-height:1.12}
    .metrics .l{font-size:clamp(12px, .25vw + 11px, 13px);line-height:1.45}
    .eyebrow{letter-spacing:.16em}
    .ig-note{font-size:10px;letter-spacing:.06em}
    .ig-head{margin-bottom:clamp(16px, 1.53vw + 10.3px, 22px)}
    .pcard{padding:clamp(20px, 1.53vw + 14.3px, 26px) clamp(18px, 1.53vw + 12.3px, 24px)}
    .pcard .ph{margin-bottom:16px;padding-bottom:14px}
    .pcard .ph .mn{font-size:clamp(25px, 1.27vw + 20.2px, 30px)}
    .prow{font-size:clamp(13px, .13vw + 12.5px, 13.5px);padding:7px 0}
    .prow .val{font-size:clamp(14px, .25vw + 13px, 15px)}
    .btn-gold,.btn-line{padding:15px 24px;font-size:13.5px}
    .adv{padding:clamp(22px, 2.04vw + 14.4px, 30px) clamp(18px, 2.04vw + 10.4px, 26px)}
    .adv h3{font-size:clamp(20px, .51vw + 18.1px, 22px)}
    .coin h4,.bcat h4,.wcat h4{font-size:clamp(18px, .51vw + 16.1px, 20px)}
    .rcard p{font-size:clamp(13.5px, .13vw + 13px, 14px)}
    .faq-list .fq button{font-size:clamp(17px, .51vw + 15.1px, 19px);padding:22px 0}
    .charity h2{font-size:clamp(26px, 2.04vw + 18.4px, 34px)}
    .contact-card .phone{font-size:clamp(30px, 2.04vw + 22.4px, 38px)}
    .addr-name{font-size:clamp(23px, .76vw + 20.1px, 26px)}
    .tg-banner h3{font-size:clamp(22px, 1.02vw + 18.2px, 26px)}

    /* ---- metrics ----
       A `1fr` track keeps min-width:auto, so the nowrap "13 500 – 45 000 ₽"
       stretched its own column and left the pair at 290/143 instead of
       50/50 - the client's "по размерам разные, грязно смотрится", here in
       the hero. min-width:0 restores equal halves. The range then no longer
       fits on one line at any readable size in half a phone, so it is the one
       figure allowed to wrap. */
    .metrics .m{min-width:0}
    .metrics .n{font-size:clamp(28px, 3.56vw + 14.6px, 42px)}
    .metrics .n-range{font-size:clamp(19px, 2.04vw + 11.4px, 27px);white-space:normal;line-height:1.12}

    /* ---- advantages ----
       Four full-width cards ran 656px on a phone. Two by two halves that and
       keeps all four trust triggers on screen instead of hiding them in a
       rail. The border logic has to be rebuilt for the 2-column shape. */
    .adv-grid{grid-template-columns:1fr 1fr}
    .adv{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
    .adv:nth-child(2n){border-right:0}
    .adv:nth-child(n+3){border-bottom:0}
    .adv-num{margin-bottom:clamp(12px, 2.04vw + 4.4px, 20px)}

    /* ---- reviews scoreboard ----
       Three pills that wrapped to three rows on a phone and to 2+1 up to 600px,
       and whose widths ran 200/200/189 even when they did share a row. A grid
       puts them on one strip at every phone width and makes them identical. */
    .rev-top{display:grid;grid-template-columns:repeat(3,1fr);
      gap:clamp(6px, .76vw + 3.1px, 12px);
      margin-bottom:clamp(26px, 2.54vw + 16.5px, 36px)}
    .rev-score{flex-direction:column;align-items:center;text-align:center;
      gap:clamp(2px, .51vw + .1px, 6px);border-radius:var(--r-box);
      padding:clamp(10px, 1.02vw + 6.2px, 14px) clamp(6px, 1.53vw + .3px, 12px)}
    .rev-score .s{font-size:clamp(22px, 2.04vw + 14.4px, 30px);line-height:1}
    .rev-score .lbl{font-size:clamp(10px, .25vw + 9px, 11px);line-height:1.3}

    /* ---- telegram banner ----
       40px of padding on a phone made the dark slab taller than its content
       needed, which is most of why it read as "слишком тёмное". */
    .tg-banner{padding:clamp(24px, 3.05vw + 12.6px, 36px)}
  }

  /* ================= NARROW PHONES, <= 479 =================
     Everything below is a LAYOUT change, not a scale change, so it needs a
     breakpoint rather than a clamp. 480 is where each of these three stops
     being broken on its own: the link pairs fall onto one row, the calculator
     heading fits one line, and the advantages columns stop clipping. */
  @media(max-width:479px){
    /* Two outbound links stacked into two rows and came out 212 and 182 wide.
       Equal halves put them on one strip; the label wraps inside its own half
       instead of pushing the pair apart. One link gets the full width.

       Counted with :has() rather than applied blindly: the metals head carries
       THREE links, and three pills do not fit 284px - forcing them onto one row
       gave that heading a 339px floor and scrolled the whole page sideways.
       minmax(0,1fr), not 1fr: a plain 1fr track keeps min-width:auto and the
       pills would push the row open again. */
    .sec-links{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
    .sec-links:has(> :nth-child(2)):not(:has(> :nth-child(3))){
      grid-template-columns:repeat(2,minmax(0,1fr))}
    .sec-links:has(> :nth-child(3)){display:flex;flex-wrap:wrap}
    .sec-link{justify-content:center;text-align:center;
      border-radius:var(--r-box);padding:12px 10px;line-height:1.25}

    /* text-wrap:balance split this into "Посчитайте" / "сумму до визита",
       which breaks the phrase in the wrong place. Balance off, and .it as a
       block puts the break exactly after "сумму". */
    #calc-sec .sec-head h2 .ln{text-wrap:initial}
    #calc-sec .sec-head h2 .it{display:block}

    /* ---- advantages ----
       2x2 gave "Конфиденциально" a 155px column, where overflow:hidden clipped
       it outright, and four blocks of very different text length left the grid
       ragged - the client's "выглядит не очень красиво". Below 480 it becomes a
       plain list: letter, title, explanation. Shorter than the 2x2 as well. */
    .adv-grid{grid-template-columns:1fr;border-radius:var(--r-box)}
    .adv{display:grid;grid-template-columns:20px 1fr;column-gap:14px;align-items:start;
      padding:16px 16px 17px;border-right:0}
    .adv:nth-child(n+3){border-bottom:1px solid var(--line)}
    .adv:last-child{border-bottom:0}
    /* the letter sits in its own column beside both lines, not above them */
    .adv-num{grid-row:1 / 3;margin-bottom:0;padding-top:3px}
    .adv h3{font-size:17.5px;line-height:1.2;margin-bottom:4px}
    .adv p{font-size:12.5px;line-height:1.5}
    /* the guilloche reads as noise once the card is a short wide row */
    .adv-seal::before{opacity:.3}

    /* ---- pre-existing 320px page scroll ----
       Not introduced here, but it sits inside the range: below ~356px the page
       scrolled sideways by 37px. Two floors caused it. The footer grid's `1fr`
       tracks keep min-width:auto and refused to go under 169px each;
       minmax(0,1fr) lets them shrink, and the labels are short enough to wrap.
       The contact card wanted 326px for a 30px phone number inside 38px
       padding, against 284px of screen. */
    footer .fgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 18px}
    /* the wordmark does not wrap and is wider than half of 320, so once the
       tracks were allowed to shrink it ran over "Разделы" next door */
    footer .fgrid > :first-child{grid-column:1 / -1}
    .contact-card{padding:24px 20px}
    /* At 320 the shrunk type left this at 35px - one short of 36, and it is the
       call button on the contacts card. min-height rather than a bigger font,
       so the number still fits the narrowest screen on one line. */
    .contact-card .phone{font-size:clamp(25px, 3.14vw + 15px, 30px);
      min-height:40px;display:flex;align-items:center}
    .contact-card .k{width:78px}
  }

  /* ================= SERVICES CAROUSEL (reconstructed client block) ================= */
  .services{background:var(--cream)}
  .svc-side{display:flex;flex-direction:column;align-items:flex-end;gap:20px}
  .svc-side p{text-align:right;color:var(--ink-soft);max-width:320px;font-size:15px;line-height:1.6}
  .svc-controls{display:flex;gap:10px}
  /* The arrow itself is --gold-ink: it is the only thing in the button that has
     to be legible, and gold on paper is 2.74:1. The ring stays --gold - it is a
     46px target with a hover fill, so it reads as a control on its own. */
  .pr-slide-btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--gold);background:var(--paper);color:var(--gold-ink);
    font-size:17px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:.3s}
  .pr-slide-btn:hover{background:var(--espresso);color:var(--cream);border-color:var(--espresso)}
  .pr-slide-btn:active{transform:scale(.92)}
  .svc-scroll{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
  .svc-scroll::-webkit-scrollbar{display:none}
  .svc-scroll.grabbing{cursor:grabbing}
  .svc-track{display:flex;gap:14px;width:max-content;padding:6px 34px 14px}
  .svc-card{flex:0 0 252px;background:var(--cream-2);border:1px solid var(--line);border-radius:var(--r-box);padding:5px;transition:.35s}
  .svc-card:hover{border-color:var(--gold);transform:translateY(-5px);box-shadow:0 26px 52px rgba(var(--ink-rgb),.1)}
  .svc-in{position:relative;height:100%;display:flex;flex-direction:column;text-align:center;
    border:1px solid rgba(var(--gold-rgb),.45);border-radius:var(--r-box);padding:16px 14px 14px;
    background:linear-gradient(180deg,var(--paper),#FFFFFF 70%)}
  .svc-in .idx{position:absolute;top:10px;left:13px;font-size:10px;letter-spacing:.14em;color:var(--bronze-ink)}
  .svc-img{height:104px;display:flex;align-items:center;justify-content:center;margin-top:8px}
  .svc-img img{max-height:104px;width:auto;object-fit:contain;transition:transform .5s var(--ease)}
  .svc-card:hover .svc-img img{transform:scale(1.06)}
  /* flex:1 with a zero basis, not a min-height guess: the title box takes ALL the
     slack in the card, so the buttons sit the same distance from the bottom edge
     whatever the title does. min-height stays as a floor for a one-word title.
     A fixed 62px only held while every title fit two lines - "Изделия с
     бриллиантами и драгоценными камнями" needs three and pushed its pair 23px
     below the rest of the rail. */
  .svc-card h3{font-family:'Manrope',sans-serif;font-weight:400;font-size:18.5px;line-height:1.15;
    flex:1;min-height:62px;display:flex;align-items:center;justify-content:center;margin:10px 0 12px}
  .svc-btns{display:flex;flex-direction:column;gap:6px;flex-shrink:0}
  .sb{border-radius:var(--r-btn);padding:9px 10px;font-size:12.5px;font-weight:600;border:1px solid transparent;transition:.25s}
  .sb-wa{background:var(--espresso);color:var(--cream)}
  .sb-wa:hover{background:var(--espresso-lift)}
  .sb-tg{border-color:var(--gold);color:var(--ink)}
  .sb-tg:hover{background:var(--espresso);color:var(--cream)}
  .sb-mx{border-color:var(--line);color:var(--ink-soft)}
  .sb-mx:hover{border-color:var(--bronze);color:var(--ink)}
  .svc-foot{margin-top:auto;padding-top:12px;font-size:11px;color:var(--ink-soft)}
  .svc-foot a{display:block;margin-top:3px;font-size:13px;color:var(--ink);transition:color .25s}
  .svc-foot a:hover{color:var(--gold)}
  @media(max-width:860px){
    .svc-controls{display:none}
    .svc-side{align-items:flex-start}
    .svc-side p{text-align:left}
    .svc-track{padding:6px 20px 12px}
    .services .swipe-line{margin:14px 20px 0}
  }

  /* ================= MOBILE LAYER ================= */
  .burger{display:none;position:relative;z-index:260;width:44px;height:44px;border:1px solid var(--gold);border-radius:50%;
    background:none;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:6px;transition:border-color .3s}
  .burger span{display:block;width:16px;height:1.5px;background:var(--ink);transition:transform .45s var(--ease),background .3s}
  /* Left over from when the mobile menu was a dark full-screen takeover: on the
     white sheet it replaced, cream bars on paper measured 1.21:1 - the close
     button was invisible, which is the complaint that started this rebuild.
     Written against `nav.top` so it also outranks the scrolled-nav rule above,
     which is more specific than a plain `.burger span`. */
  body.pr-menu-open nav.top .burger{border-color:var(--gold)}
  body.pr-menu-open nav.top .burger span{background:var(--ink)}
  /* Same trap for the logo: open the menu after scrolling and the nav goes
     white while `.scrolled` is still on it, leaving a cream wordmark on a cream
     sheet. Written against nav.top so it outranks the scrolled rule. */
  body.pr-menu-open nav.top .logo{color:var(--ink)}
  body.pr-menu-open .burger span:first-child{transform:translateY(3.75px) rotate(45deg)}
  body.pr-menu-open .burger span:last-child{transform:translateY(-3.75px) rotate(-45deg)}

  /* The client asked for a menu that does not take the whole screen and that
     looks "expensive": a white sheet drops from under the nav over a dimmed
     page, so the site stays visible behind it. .mmenu is the scrim, and tapping
     it closes the menu (js/site-redesign.js). */
  .mmenu{position:fixed;inset:0;z-index:240;background:rgba(var(--espresso-rgb),.44);
    opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility 0s .4s}
  body.pr-menu-open .mmenu{opacity:1;visibility:visible;transition:opacity .4s var(--ease)}
  body.pr-menu-open{overflow:hidden}
  /* The drawer runs the full height from the top, as on the previous site, so
     the bar steps out of the way instead of sitting on top of it. The burger
     goes with it - the drawer carries its own close button (header.php). */
  body.pr-menu-open nav.top,body.pr-menu-open nav.top.hide{transform:translateY(-110%)}

  /* Client asked for the previous site's drawer: it comes in from the LEFT,
     takes 80vw up to 345px, and runs the full height. Every group is listed
     flat - the accordions it replaced hid most of the site behind a tap. */
  .mmenu-sheet{position:absolute;inset:0 auto 0 0;width:80vw;max-width:345px;
    background:var(--paper);color:var(--ink);display:flex;flex-direction:column;
    padding:18px 20px 0;border-right:1px solid var(--line);
    box-shadow:26px 0 60px rgba(var(--ink-rgb),.18);
    transform:translateX(-101%);transition:transform .48s var(--ease)}
  body.pr-menu-open .mmenu-sheet{transform:none}

  .mmenu-head{display:flex;align-items:center;justify-content:space-between;
    padding-bottom:12px;margin-bottom:18px;border-bottom:1px solid var(--line);flex:0 0 auto}
  .mmenu-head span{font-size:21px;line-height:1;color:var(--ink-soft)}
  /* 40px, and pulled out by the panel padding so the glyph still lines up with
     the edge - at 32 it was under a comfortable finger target. */
  .mmenu-close{width:40px;height:40px;margin-right:-9px;background:none;border:0;cursor:pointer;
    position:relative;flex-shrink:0}
  .mmenu-close::before,.mmenu-close::after{content:"";position:absolute;left:50%;top:50%;
    width:17px;height:1px;background:var(--ink);transform-origin:50% 50%}
  .mmenu-close::before{transform:translate(-50%,-50%) rotate(45deg)}
  .mmenu-close::after{transform:translate(-50%,-50%) rotate(-45deg)}

  /* the menu carries every page group, so it has to scroll on a phone */
  .mmenu-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding-bottom:24px;
    /* fades whatever the drawer cuts off, so it reads as "more below" */
    -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 24px),transparent);
    mask-image:linear-gradient(180deg,#000 calc(100% - 24px),transparent)}
  .mmenu-scroll::-webkit-scrollbar{display:none}

  .mmenu-links{position:relative;display:flex;flex-direction:column;gap:2px}
  .mmenu .ml{display:block;position:relative;font-family:'Manrope',sans-serif;font-size:19px;
    padding:9px 0;color:var(--ink);
    opacity:0;transform:translateX(-14px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
  /* the old site drew a rule under each main link that stopped short of the edge */
  .mmenu .ml i{position:absolute;left:0;right:34px;bottom:0;height:1px;background:var(--line);display:block}
  .mmenu .ml:last-child i{display:none}
  body.pr-menu-open .mmenu .ml{opacity:1;transform:none}
  body.pr-menu-open .mmenu .ml:nth-child(1){transition-delay:.10s}
  body.pr-menu-open .mmenu .ml:nth-child(2){transition-delay:.14s}
  body.pr-menu-open .mmenu .ml:nth-child(3){transition-delay:.18s}
  body.pr-menu-open .mmenu .ml:nth-child(4){transition-delay:.22s}
  body.pr-menu-open .mmenu .ml:nth-child(5){transition-delay:.26s}
  body.pr-menu-open .mmenu .ml:nth-child(6){transition-delay:.30s}

  /* ---------- mobile menu groups ----------
     Folded, not flat: listing every group open ran the drawer to 1775px of
     scroll, which is the client's "меню слишком большое". Shut by default, so
     what opens is a short list of headings. */
  .mgroup{border-bottom:1px solid var(--line);opacity:0;transform:translateX(-14px);
    transition:opacity .4s var(--ease) .30s,transform .4s var(--ease) .30s}
  .mgroup:first-of-type{margin-top:22px;border-top:1px solid var(--line)}
  body.pr-menu-open .mgroup{opacity:1;transform:none}
  .mgroup-head{width:100%;background:none;border:0;cursor:pointer;font:inherit;text-align:left;
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:14px 0;font-size:15px;color:var(--ink-soft)}
  .mgroup.open .mgroup-head{color:var(--ink)}
  /* plus sign drawn from two rules, so it can rotate into a minus */
  .mgroup-head i{position:relative;width:11px;height:11px;flex-shrink:0;
    transition:transform .3s var(--ease)}
  .mgroup-head i::before,.mgroup-head i::after{content:"";position:absolute;left:50%;top:50%;
    background:var(--gold-ink)}
  .mgroup-head i::before{width:11px;height:1px;transform:translate(-50%,-50%)}
  .mgroup-head i::after{width:1px;height:11px;transform:translate(-50%,-50%);
    transition:opacity .3s var(--ease)}
  .mgroup.open .mgroup-head i{transform:rotate(180deg)}
  .mgroup.open .mgroup-head i::after{opacity:0}
  /* The collapse sizes the FIRST grid row only, so the links live in one
     wrapper - as direct children, rows 2..n fall back to auto and a shut group
     still shows most of itself. */
  .mgroup-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s var(--ease)}
  .mgroup.open .mgroup-body{grid-template-rows:1fr}
  .mgroup-list{overflow:hidden;min-height:0;display:flex;flex-direction:column;padding-left:10px}
  /* 10px, not 8: at 8 the rows measured 36px and 27 of the 35 links in this
     drawer fell under a comfortable finger target. */
  .mgroup-list a{display:block;font-size:14.5px;color:var(--ink-soft);padding:10px 0;line-height:1.35}
  /* No trimming the first row's padding: it took the opening link of every
     group down to 32px. The breathing room comes from the list instead. */
  .mgroup-list{padding-top:2px}
  .mgroup-list a:last-child{padding-bottom:14px}
  .mgroup-list a:active{color:var(--ink)}

  .mmenu-cta{display:flex;align-items:center;justify-content:space-between;gap:14px;
    margin-top:32px;padding:16px 20px;border-radius:var(--r-btn);
    background:var(--espresso);color:var(--cream);font-size:15px;
    opacity:0;transform:translateX(-14px);
    transition:opacity .4s var(--ease) .34s,transform .4s var(--ease) .34s}
  body.pr-menu-open .mmenu-cta{opacity:1;transform:none}
  .mmenu-cta i{font-style:normal;font-size:18px;line-height:1}

  .mmenu-foot{position:relative;margin-top:26px;padding-top:16px;border-top:1px solid var(--line);
    opacity:0;transform:translateX(-14px);
    transition:opacity .4s var(--ease) .38s,transform .4s var(--ease) .38s}
  body.pr-menu-open .mmenu-foot{opacity:1;transform:none}
  .mmenu-foot .ph{font-family:'Manrope',sans-serif;font-size:21px;display:block;padding:4px 0;margin-bottom:4px}
  .mmenu-foot .ad{font-size:12.5px;color:var(--ink-soft);line-height:1.6;margin-bottom:14px}
  .mmenu-soc{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .mmenu-soc a{border:1px solid var(--line);border-radius:var(--r-btn);padding:11px;text-align:center;font-size:13px;
    color:var(--ink-soft);background:var(--cream-2)}

  /* Sticky call to action.
     It used to be display:none above 1040px, so on a desktop there was no
     fixed button at all - the client's "кнопки не поставили зафиксированные,
     они нужны 1000%". Now it shows at every width: a compact dock in the
     bottom-RIGHT corner on desktop (.sec-ind owns the bottom-left), and the
     full-width two-button bar it has always been on a phone. */
  .bbar{position:fixed;right:24px;bottom:24px;z-index:210;
    display:flex;gap:10px;
    transform:translateY(180%);transition:transform .5s var(--ease)}
  .bbar.on{transform:none}
  body.pr-menu-open .bbar{transform:translateY(180%)}
  .bbar a{border-radius:var(--r-btn);padding:15px 26px;text-align:center;font-weight:600;font-size:14px;
    white-space:nowrap;box-shadow:0 14px 38px rgba(var(--espresso-rgb),.16)}
  .bb-call{background:var(--paper);border:1px solid var(--line);color:var(--ink)}
  .bb-msg{background:var(--espresso);color:var(--cream);display:flex;align-items:center;justify-content:center;gap:9px}
  .bb-msg .ping{width:8px;height:8px;border-radius:50%;background:#fff;position:relative;flex-shrink:0}
  .bb-msg .ping::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid #fff;animation:ping 1.6s var(--ease) infinite}
  @keyframes ping{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.6);opacity:0}}

  /* swipe progress line under mobile carousels */
  .swipe-line{display:none;height:2px;background:var(--line);margin-top:16px;border-radius:2px;overflow:hidden}
  .swipe-line i{display:block;height:100%;width:8%;background:var(--gold);transition:width .15s linear}

  @media(max-width:1040px){
    .burger{display:flex}
    /* One variable resizes the whole figure; only the placement is retuned.
       Same crop proportion as the desktop size, so the composition does not
       change character across the breakpoint. */
    .hgem-wrap{--hgem-w:440px;--hgem-top:70px;--hgem-right:-210px}
    /* Phone: back to the full-width pair. `.bbar.on` is two classes, so it
       still wins the transform and the bar slides in as before. */
    .bbar{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));
      display:grid;grid-template-columns:1fr 1.7fr;transform:translateY(140%)}
    .bbar a{padding:16px 10px}
  }
  /* ---------- touch targets on the home page ----------
     Everything a finger has to hit gets at least ~40px of height. */
  @media(max-width:900px){
    .svc-foot a{padding:11px 0}


    .sec-link{padding:12px 18px}
    .price-note a{padding-top:18px;padding-bottom:6px}
    .stag{padding:13px 20px}
    .chip{padding:14px 24px}
  }

  @media(max-width:860px){
    header.hero h1{font-size:clamp(40px,10.5vw,64px)}
    /* The city is dropped and the tracking tightened so the positioning line
       fits on one row next to the 52px rule at 390px. */
    .eb-city{display:none}
    .hero-eyebrow .eyebrow{font-size:9.5px;letter-spacing:.13em}
    .hero-eyebrow{gap:10px}
    .hero-eyebrow .rule{width:34px}
    /* Phone: the balance is a backdrop behind the headline, so it drops to the
       right and dims. It stays fully on screen rather than running off the edge
       - a scale cropped down the middle stops reading as a scale, which is not
       true of a dial. */
    /* Sized so the whole object ENDS above the lede. At 216/150 the plinth - a
       solid 6px brass bar - ran straight through "Выкуп по честной рыночной
       цене" and read as a strikethrough. Behind the headline it is fine: the
       headline is 78px type at full weight and the balance is a 34% ghost
       behind it. Across a 17px paragraph it is not. */
    /* Phone keeps the same idea - cropped by the right edge - but the crop is
       deeper and the figure fainter, because forty facet lines behind a 30px
       headline on a 360px screen is clutter, not texture. */
    .hgem-wrap{--hgem-w:300px;--hgem-top:96px;--hgem-right:-168px;opacity:.55}

    footer{padding-bottom:130px}
    .swipe-line{display:block}
    .news-grid,.rev-grid,.c4-grid{display:flex;grid-template-columns:none;overflow-x:auto;gap:12px;
      scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:4px}
    .news-grid::-webkit-scrollbar,.rev-grid::-webkit-scrollbar,.c4-grid::-webkit-scrollbar{display:none}
    .news-grid>*,.rev-grid>*,.c4-grid>*{flex:0 0 78%;scroll-snap-align:start;min-height:0}
  }
  @media(hover:none){
    .btn-gold:active,.btn-line:active,.cbtn:active,.chip:active,.bb-call:active,.bb-msg:active,.stag:active{transform:scale(.96)}
    .ncard:active,.coin:active,.wcat:active,.bcat:active,.rcard:active,.c4:active{transform:scale(.98)}
  }

  /* The "legacy interaction layer" that used to live here is gone with
     css/style.css: it existed only to cancel that sheet's blanket a:hover lift
     and `a::after` sheen, which no longer load. The nav underline rule above
     still declares every property explicitly, so it does not depend on it. */

  /* anchors land clear of the fixed nav instead of under it */
  :target,[id]{scroll-margin-top:96px}

  /* ================= WORDPRESS ADMIN BAR ================= */
  /* Not in the source mock: keep the fixed chrome clear of the WP admin bar. */
  body.admin-bar nav.top{top:32px}
  body.admin-bar .progress{top:32px}
  body.admin-bar .mmenu,body.admin-bar .loader{top:32px}
  @media (max-width:782px){
    body.admin-bar nav.top{top:46px}
    body.admin-bar .progress{top:46px}
    body.admin-bar .mmenu,body.admin-bar .loader{top:46px}
  }

  /* ================= CBR QUOTATION STRIP ================= */
  /* Reference data, so it is deliberately quieter than the price cards next to
     it: a hairline card, mono figures, no gold fill. If it looked like a price
     card the two would be read as the same thing. */
  .cbr{border:1px solid var(--line);border-radius:var(--r-box);background:var(--cream-2);padding:22px 26px;margin-bottom:26px}
  .cbr-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:16px}
  .cbr-date{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;color:var(--ink-soft)}
  .cbr-rows{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
  .cbr-row{display:flex;align-items:baseline;gap:9px;padding:12px 16px;border:1px solid var(--line);
    border-radius:var(--r-box);background:var(--paper);min-width:0}
  .cbr-sym{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--gold-ink);flex-shrink:0}
  .cbr-lbl{font-size:13px;color:var(--ink-soft);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cbr-row b{font-family:'Manrope',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
    font-weight:600;font-size:14px;white-space:nowrap}
  .cbr-row b span{font-weight:400;color:var(--ink-soft);font-size:12px}
  .cbr-cur{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px;font-size:13px;color:var(--ink-soft)}
  .cbr-cur b{font-family:'Manrope',sans-serif;font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}
  .cbr-note{margin-top:16px;font-size:12.5px;line-height:1.6;color:var(--ink-soft);max-width:760px}
  .cbr-note a{color:var(--gold-ink);font-weight:600;white-space:nowrap}
  .cbr-note a i{font-style:normal;display:inline-block;transition:transform .3s var(--ease)}
  .cbr-note a:hover i{transform:translateX(4px)}

  /* The narrowest phones. "Экспертная оценка" has to hold one line, and the
     860px rule's 34px floor is 5px too big to do it inside 269px of usable
     width - measured, not guessed: at 34px the phrase needs 312px and it broke
     into two ragged lines at 320. Placed last and carrying the body class so it
     outranks both earlier rules regardless of source order. */
  @media (max-width:374px){
    body.pr-home header.hero h1{font-size:28px}
  }

  @media (max-width:860px){
    .cbr{padding:18px;margin-bottom:20px}
    /* Two up rather than a four-column squeeze, and the figure drops to its own
       line: side by side in half a phone width the names ellipsised to "П…",
       which left platinum and palladium identical. */
    .cbr-rows{grid-template-columns:repeat(2,1fr);gap:8px}
    .cbr-row{padding:10px 12px;gap:2px 7px;flex-wrap:wrap;align-items:center}
    .cbr-lbl{font-size:12px;flex:1 1 auto}
    .cbr-row b{flex:1 0 100%;font-size:14px}
  }

  /* ================= LOGO MARK ================= */
  /* An assay punch with the П monogram. The punch inherits currentColor, so it
     turns cream on its own wherever the logo sits on the dark brand colour; the
     monogram is gold, matching the "ритет" half of the wordmark.

     Stroke lengths are hand-measured from the paths, not guessed: an inflated
     dasharray leaves a gap that never closes, a short one clips the draw. */
  .lm{width:1em;height:1em;flex-shrink:0;overflow:visible;fill:none;
    stroke-linecap:round;stroke-linejoin:round;vertical-align:-.09em}
  .lm-punch{stroke:currentColor;stroke-width:1.7}
  .lm-rule{stroke:currentColor;stroke-width:.7;opacity:.42}
  .lm-mono{stroke:var(--gold);stroke-width:2.1}
  /* Margin on the mark, NOT `gap` on the logo: the wordmark is a bare text node
     plus a <span>, so flex makes them two separate items and a gap opens up
     inside the word - "Прио ритет". */
  nav.top .logo,footer .logo{display:inline-flex;align-items:center}
  nav.top .logo .lm,footer .logo .lm{margin-right:.3em}

  /* --- wordmark with the branch under it ---------------------------------
     The branch line is set in the mono face at 9px with wide tracking, so it
     reads as a stamped sub-label rather than as a second word competing with
     the wordmark - the same register as the section eyebrows.

     `align-items:flex-start` on the stack and a tuned line-height keep the two
     lines tight enough to stay one object; without it the pair drifts apart
     and the mark stops being a lockup. The hallmark punch is centred against
     BOTH lines, not just the first, which is why the alignment moves to the
     parent rather than living on .lm. */
  nav.top .logo--branch{align-items:center}
  .logo-stack{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1}
  nav.top .logo-name{line-height:1.05}
  .logo-branch{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.28em;
    text-transform:uppercase;color:var(--bronze-ink);margin-top:3px;
    /* the tracking on the last letter pushes the block right; pull it back so
       the two lines are optically flush on the left */
    margin-right:-.28em;transition:color .25s}
  nav.top.scrolled .logo-branch{color:var(--accent-on-dark)}
  body.pr-menu-open nav.top .logo-branch{color:var(--bronze-ink)}
  /* The lockup is taller than the plain wordmark, so the nav's own padding is
     trimmed to keep the bar the height it was. min-height rather than more
     padding: the two stacked lines landed at 35.x, a hair under the 36px a
     finger needs, and this is the link home from every page. */
  nav.top .logo--branch{padding:2px 0;min-height:40px}
  .loader-in .lm{width:44px;height:44px;margin:0 auto 20px;display:block}

  /* draw-on, once, at first paint - `both` so the resting state is the finished
     mark and a stalled animation cannot leave it half-struck */
  /* getTotalLength(): 89.3 / 69.1 / 32.8 - rounded up by a hair so the join
     closes. Guessed values were 15% long, which held the stroke invisible for
     the first sixth of the animation. */
  .lm-punch{stroke-dasharray:90;stroke-dashoffset:90;animation:lm-draw .85s var(--ease) .1s both}
  .lm-rule{stroke-dasharray:70;stroke-dashoffset:70;animation:lm-draw .8s var(--ease) .5s both}
  .lm-mono{stroke-dasharray:33;stroke-dashoffset:33;animation:lm-draw .5s var(--ease) .62s both}
  @keyframes lm-draw{to{stroke-dashoffset:0}}

  /* hover: the punch is pressed and released, which is what a hallmark does */
  nav.top .logo .lm,footer .logo .lm{transition:transform .32s var(--ease)}
  nav.top .logo:hover .lm,footer .logo:hover .lm{animation:lm-strike .5s var(--ease)}
  @keyframes lm-strike{
    0%{transform:scale(1)}
    38%{transform:scale(.84) rotate(-4deg)}
    100%{transform:scale(1) rotate(0)}
  }

  @media (prefers-reduced-motion:reduce){
    .lm-punch,.lm-rule,.lm-mono{animation:none!important;stroke-dashoffset:0!important}
    nav.top .logo:hover .lm,footer .logo:hover .lm{animation:none!important;transform:none!important}
  }
  /* Square, like everything else on this site: the tokens, never a literal. */
  .hx{--hx-r:var(--r-box);--hx-rb:var(--r-btn)}

  /* ==========================================================================
     HERO, LOWER HALF - one composition instead of a column of boxes
     --------------------------------------------------------------------------
     It had become seven objects of equal weight stacked down the screen; the
     client's word was "налеплено". Now two roles. Left: what we do and the one
     step to take. Right: the facts, set out the way a valuation certificate
     sets them out - small gold labels in the mono face the site already uses
     for its eyebrows, plain values, hairlines between. Only the button has a
     shape, so the theme's geometry (--hx-r / --hx-rb, set above) lands on one
     object rather than on a pile of them.

     Life without pictures: the certificate's gold rule draws itself in, the
     facts arrive in a short cascade, the arrow on the button calls every few
     seconds, and the hours say whether the office is open right now.
     ========================================================================== */
  .hero-lower.hx{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    column-gap:clamp(40px,5.5vw,88px);row-gap:28px;align-items:start;margin-top:48px;padding-bottom:64px}
  .hx .hero-lede{max-width:440px}

  /* ---- the one step ---- */
  .hx-act{margin-top:28px;max-width:430px}
  .hx-go{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:66px;
    padding:11px 11px 11px 26px;border-radius:var(--hx-rb);background:var(--espresso);color:var(--cream);
    box-shadow:0 20px 44px -18px rgba(var(--espresso-rgb),.6);transition:background .3s,box-shadow .3s}
  .hx-go:hover{background:var(--espresso-lift);box-shadow:0 26px 52px -18px rgba(var(--espresso-rgb),.66)}
  .hx-go-t{display:flex;flex-direction:column;gap:4px;font-size:16px;font-weight:600;line-height:1.15}
  .hx-go-t small{font-size:12.5px;font-weight:500;opacity:.7}
  .hx-go-a{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;
    border-radius:var(--hx-rb);background:rgba(255,255,255,.13);color:var(--cream);
    transition:background .3s}
  .hx-go:hover .hx-go-a{background:rgba(255,255,255,.2)}
  .hx-go-a svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round;animation:hxCall 6s var(--ease) 2.4s infinite}
  .hx-go:hover .hx-go-a svg{animation:none;transform:translateX(3px);transition:transform .3s var(--ease)}
  /* A short double nudge, then stillness for most of the cycle: it should read
     as the button breathing, not as something that wants attention. */
  @keyframes hxCall{0%,78%,100%{transform:none}84%{transform:translateX(5px)}90%{transform:none}95%{transform:translateX(2px)}}

  .hx-alt{display:flex;margin-top:12px}
  .hx-alt a{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:9px;
    min-height:46px;font-size:14px;font-weight:600;color:var(--ink);transition:color .25s}
  .hx-alt a + a{border-left:1px solid var(--line)}
  .hx-alt a:hover{color:var(--gold-ink)}
  .hx-alt svg{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:currentColor;
    stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .hx-alt .hx-tel{color:var(--gold-ink);font-variant-numeric:tabular-nums}

  /* ---- the sheet ---- */
  .hx-sheet{position:relative;display:grid;grid-template-columns:1fr 1fr;background:var(--paper);
    border:1px solid var(--line);border-radius:var(--hx-r);overflow:hidden;
    box-shadow:0 34px 70px -44px rgba(var(--espresso-rgb),.45)}
  /* The certificate's gold rule, drawn in when the sheet arrives. */
  .hx-sheet::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:1;
    background:linear-gradient(90deg,var(--gold),rgba(var(--gold-rgb),.35));
    transform:scaleX(0);transform-origin:left;transition:transform 1.3s var(--ease) .2s}
  .hx-sheet.in::before{transform:scaleX(1)}

  .hx-f{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0;
    padding:19px 24px 18px;border-top:1px solid var(--line)}
  .hx-sheet > :nth-child(-n+2){border-top:0}
  .hx-f--r{border-left:1px solid var(--line)}
  .hx-f--w{grid-column:1/-1}
  a.hx-f{transition:background .25s}
  a.hx-f:hover{background:rgba(var(--gold-rgb),.07)}

  .hx-k{display:flex;align-items:center;gap:7px;font-family:'JetBrains Mono',monospace;
    font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--gold-ink)}
  .hx-k i{font-style:normal;letter-spacing:0;transition:transform .3s var(--ease)}
  a.hx-f:hover .hx-k i{transform:translateX(3px)}
  .hx-v{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:500;line-height:1.2;
    letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
  .hx-f--w .hx-v{white-space:normal}
  .hx-s{font-size:12.5px;line-height:1.4;color:var(--ink-soft)}

  .hx-stars{display:inline-block;width:64px;height:12px;background:var(--gold);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 .5l1.7 3.4 3.8.5-2.8 2.6.7 3.7L6 8.9l-3.4 1.8.7-3.7L.5 4.4l3.8-.5z'/%3E%3C/svg%3E") 0 0/13px 12px repeat-x;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 .5l1.7 3.4 3.8.5-2.8 2.6.7 3.7L6 8.9l-3.4 1.8.7-3.7L.5 4.4l3.8-.5z'/%3E%3C/svg%3E") 0 0/13px 12px repeat-x}

  /* Open right now, by Moscow time - js/home-redesign.js sets the class. */
  [data-hours-state]{display:inline-flex;align-items:center;gap:8px}
  .hx-f.is-open [data-hours-state],.hx-f.is-closed [data-hours-state]{font-weight:500}
  .hx-f.is-open [data-hours-state]{color:#2F7A4E}
  .hx-f.is-open [data-hours-state]::before,.hx-f.is-closed [data-hours-state]::before{
    content:"";width:7px;height:7px;border-radius:50%;flex:0 0 auto}
  .hx-f.is-open [data-hours-state]::before{background:#3E9B64;animation:hxOpen 2.2s ease-out infinite}
  .hx-f.is-closed [data-hours-state]::before{background:var(--ink-soft);opacity:.45}
  @keyframes hxOpen{0%{box-shadow:0 0 0 0 rgba(62,155,100,.45)}100%{box-shadow:0 0 0 7px rgba(62,155,100,0)}}

  .hx-route{grid-column:1/-1;display:flex;align-items:center;gap:10px;min-height:52px;padding:0 24px;
    border-top:1px solid var(--line);font-size:14px;font-weight:600;color:var(--ink);
    transition:background .25s,color .25s}
  .hx-route svg{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:currentColor;
    stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .hx-route i{margin-left:auto;font-style:normal;color:var(--gold-ink);transition:transform .3s var(--ease)}
  .hx-route:hover{background:rgba(var(--gold-rgb),.07);color:var(--gold-ink)}
  .hx-route:hover i{transform:translateX(4px)}
  .hx-sheet a:focus-visible{outline-offset:-3px}

  /* The facts arrive in a short cascade after the sheet itself (.rv) fades in. */
  .hx-f > *,.hx-route > *{opacity:0;transform:translateY(8px);
    transition:opacity .7s var(--ease),transform .7s var(--ease);
    transition-delay:calc(.3s + var(--i,0) * 85ms)}
  .hx-sheet.in .hx-f > *,.hx-sheet.in .hx-route > *{opacity:1;transform:none}

  @media(max-width:860px){
    .hero-lower.hx{grid-template-columns:1fr;row-gap:22px;margin-top:26px;padding-bottom:40px}
    .hx-act{max-width:none;margin-top:22px}
    .hx-sheet{grid-template-columns:1.14fr 1fr}
    .hx-f{padding:14px 15px 13px;gap:5px}
    .hx-v{font-size:16.5px;gap:8px}
    .hx-stars{width:57px;height:11px;-webkit-mask-size:11.6px 11px;mask-size:11.6px 11px}
    .hx-s{font-size:12px}
    .hx-route{min-height:48px;padding:0 15px}
    .hx-dk{display:none}
  }
  @media(max-width:374px){
    .hx-v{font-size:15px}
    .hx-f{padding:13px 12px 12px}
  }
  @media (prefers-reduced-motion:reduce){
    .hx-sheet::before{transform:none;transition:none}
    .hx-f > *,.hx-route > *{opacity:1;transform:none;transition:none}
    .hx-go-a svg,.hx-f.is-open [data-hours-state]::before{animation:none}
  }