/* ============================================================================
   Perfect Home — theme custom layer  (perfect.millend.eu)
   Faithful rebuild of the Intorio Webflow template: Poppins, warm-beige canvas
   (#f4efec) + near-black ink (#010101), 960/1170/1350 container, 100px section
   rhythm, 100px-pill buttons. Foundation (reset, --space-*, --radius-*, utilities)
   comes from globals.css (linked first). Class names mirror the Intorio template
   so the markup lifts over 1:1. Animations reproduced 1:1 from RECON/intorio/
   animations.md (IX2 spec) — modern CSS + minimal JS, no jQuery/Webflow runtime.

   Layout: (1) re-point semantic tokens to the Intorio palette UNLAYERED (beats
   every @layer), (2) element typography in @layer base, (3) all chrome in
   @layer custom.
   ============================================================================ */

/* ---- TEST: self-hosted Rawer + Open Sans (from perfecthome72.ru source) ----- */
/* Rawer — full condensed weight ladder, family name matches the source site */
@font-face {
  font-family: 'Rawer'; font-weight: 100; font-style: normal; font-display: swap;
  src: url('fonts/Rawer-CondensedThin.woff2') format('woff2'),
       url('fonts/Rawer-CondensedThin.woff') format('woff');
}
@font-face {
  font-family: 'Rawer'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('fonts/Rawer-Condensed.woff2') format('woff2'),
       url('fonts/Rawer-Condensed.woff') format('woff');
}
@font-face {
  font-family: 'Rawer'; font-weight: 500; font-style: normal; font-display: swap;
  src: url('fonts/Rawer-CondensedBook.woff2') format('woff2'),
       url('fonts/Rawer-CondensedBook.woff') format('woff');
}
@font-face {
  font-family: 'Rawer'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('fonts/Rawer-CondensedBold.woff2') format('woff2'),
       url('fonts/Rawer-CondensedBold.woff') format('woff');
}
@font-face {
  font-family: 'Rawer'; font-weight: 900; font-style: normal; font-display: swap;
  src: url('fonts/Rawer-CondensedHeavy.woff2') format('woff2'),
       url('fonts/Rawer-CondensedHeavy.woff') format('woff');
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-Regular.woff2') format('woff2'),
       url('fonts/OpenSans-Regular.woff') format('woff');
  font-weight: 400 600;
  font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal; font-display: swap;
}

/* ---- token overrides (unlayered → win over globals.css token layer) ------- */
:root {
  color-scheme: light;

  /* Intorio palette (exact, from intorio.webflow.shared.css :root) */
  --secondary:   #010101;   /* near-black — text, borders, dark sections */
  --primary:     #f4efec;   /* warm beige — page canvas, soft fills */
  --ph-white:    #ffffff;
  --ph-black:    #000000;
  --accent:      #D1BB6E;   /* brand accent (warm gold) — reuse wherever an accent is wanted */

  /* mapped onto millend-css semantic tokens */
  --surface:        var(--ph-white);
  --surface-raised: var(--ph-white);
  --surface-beige:  var(--primary);
  --text:           var(--secondary);
  --text-soft:      #5b5b5b;
  --border:         var(--secondary);
  --on-primary:     var(--secondary);

  /* type — TEST: Rawer Condensed (display/headings) + Open Sans (body) */
  --font-display: 'Rawer', 'Arial Narrow', system-ui, sans-serif;
  --font-body:    'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-family: var(--font-body);
  --font-primary: var(--font-body);
  --font-secondary: var(--font-display);
  --line-height: 1.5;
  --line-height-tight: 1.2;

  /* Fluid type scale — clamp(mobile@375px, vw-preferred, desktop@1440px).
     Self-responsive: no breakpoint overrides needed. px ranges in comments. */
  --fs-h1: clamp(2rem,     1.614rem + 1.648vw, 3.097rem);  /* 32 → 49.6px */
  --fs-h2: clamp(1.75rem,  1.424rem + 1.390vw, 2.675rem);  /* 28 → 42.8px */
  --fs-h3: clamp(1.5rem,   1.285rem + 0.919vw, 2.112rem);  /* 24 → 33.8px */
  --fs-h4: clamp(1.25rem,  1.095rem + 0.660vw, 1.689rem);  /* 20 → 27px */
  --fs-body:   clamp(1rem,     0.956rem + 0.188vw, 1.125rem); /* 16 → 18px */
  --fs-body-s: clamp(0.875rem, 0.831rem + 0.188vw, 1rem);     /* 14 → 16px */
  --fs-eyebrow: clamp(0.8125rem, 0.769rem + 0.188vw, 0.9375rem); /* 13 → 15px */
  --fs-lead:   clamp(1.125rem, 1.033rem + 0.394vw, 1.375rem); /* 18 → 22px — section leads */

  /* container widths per breakpoint (Intorio .main-container) */
  --container: 960px;
  --container-pad: 15px;

  /* section rhythm */
  --section-y: 100px;

  /* radii */
  --radius-card: 16px;
  --radius-pill: 100px;

  /* motion — easings mapped from Webflow IX2 (see animations.md) */
  --ease-out-quad:  cubic-bezier(.5, 1, .89, 1);
  --ease-out-quart: cubic-bezier(.25, 1, .5, 1);
  --ease-in-out:    cubic-bezier(.45, 0, .55, 1);
  --dur-hover: .5s;
}

/* ============================================================================
   @layer base — element-level typography (mirrors Intorio, overrides globals base)
   ============================================================================ */
@layer base {
  body {
    font-family: var(--font-family);
    font-size: var(--fs-body);
    font-weight: 300;   /* Open Sans Light — refined baseline for running content text;
                           chrome (nav/filters/buttons/headings/labels) pins its own weight */
    line-height: var(--line-height);
    color: var(--text);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);   /* TEST: Rawer (condensed display) */
    font-weight: 500;                   /* Rawer Book */
    line-height: var(--line-height-tight);
    color: var(--secondary);
    text-wrap: balance;
    margin: 0;
  }
  h1 { font-size: var(--fs-h1); }
  h2 { font-size: var(--fs-h2); }
  h3 { font-size: var(--fs-h3); }
  h4 { font-size: var(--fs-h4); }
  p  { max-width: none; }
  a  { color: inherit; text-decoration: none; }
  a:hover { color: inherit; }
}

/* ============================================================================
   @layer custom — layout primitives + components (Intorio class names)
   ============================================================================ */
@layer custom {

  /* ---- skip link (keyboard a11y): off-screen until focused -------------- */
  .skip-link {
    position: fixed; top: 8px; left: 8px; z-index: 1000;
    transform: translateY(-150%);
    background: var(--secondary); color: var(--ph-white);
    padding: 12px 20px; border-radius: var(--radius-card);
    font-size: var(--fs-body-s); font-weight: 500;
    transition: transform .2s var(--ease-out-quad);
  }
  .skip-link:focus { transform: none; color: var(--ph-white); outline: 2px solid var(--accent); outline-offset: 2px; }
  .site-main:focus { outline: none; }   /* tabindex=-1 skip target — no focus ring */

  /* ---- 404 action row --------------------------------------------------- */
  .error-404__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }

  /* ---- layout ----------------------------------------------------------- */
  .main-container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--container-pad);
  }

  .section-y-axis-gap { padding-block: var(--section-y); }
  .section-bottom-gap { padding-bottom: var(--section-y); }
  .section-top-gap    { padding-top: var(--section-y); }

  /* ---- buttons (a-/a-2: arrow moves +5px on hover) ---------------------- */
  .primary-button-block {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 20px;
    border: 1px solid var(--secondary);
    border-radius: var(--radius-pill);
    background: var(--ph-white);
    color: var(--secondary);
    line-height: 1.4;
    position: relative;
    cursor: pointer;
    transition: border-color var(--dur-hover), color var(--dur-hover), background-color var(--dur-hover);
  }
  .primary-button-block:hover { background: var(--secondary); color: var(--ph-white); }
  .primary-button-block.bg-transparent { background: transparent; }
  .primary-button-block.bg-transparent:hover { background: var(--secondary); color: var(--ph-white); }
  .primary-button-block.without-border { border-color: transparent; }
  .primary-button-text { z-index: 10; font-size: 1rem; font-weight: 400; line-height: 1.4; }
  .arrow-icon {
    display: flex; align-items: center; justify-content: center;
    transition: transform var(--dur-hover) var(--ease-out-quad);
  }
  .primary-button-block:hover .arrow-icon { transform: translateX(5px); }
  .arrow-icon svg { width: 1em; height: 1em; display: block; }

  /* ---- section heading cluster (eyebrow + title + optional CTA) --------- */
  .section-heading-block { display: flex; flex-direction: column; }
  .section-heading-block.align-center { align-items: center; text-align: center; }

  .section-subtitle-block { display: flex; align-items: center; gap: 10px; }
  .breadcrumb-icon { display: flex; align-items: center; justify-content: center; color: var(--accent); }
  /* a-3: decorative spinner icon rotates 360° / 8s, infinite */
  .breadcrumb-icon svg, .breadcrumb-icon img { width: 22px; height: 22px; animation: ph-spin 8s linear infinite; }
  /* font-weight:inherit so an <h2 class="subtitle-text"> eyebrow (used as the heading of
     "related" sections) matches the <span> eyebrows elsewhere instead of going 600-bold */
  .subtitle-text { text-transform: uppercase; font-size: var(--fs-eyebrow); font-weight: inherit; line-height: 1.6; letter-spacing: .01em; }

  .section-title-block { margin-top: 20px; }
  .section-title { font-size: var(--fs-h1); }
  .section-title.text-white, .text-white { color: var(--ph-white); }

  .section-title-and-button-block {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--space-l); flex-wrap: wrap;
  }

  /* max-width helpers used on section titles (legacy Intorio names — value, not name,
     is authoritative; .max-width-1070px is 550px). hero title no longer uses these. */
  .max-width-1070px { max-width: 550px; }
  .max-width-800px { max-width: 800px; }
  .margin-top-24px { margin-top: 20px; }

  /* ---- keyframes -------------------------------------------------------- */
  @keyframes ph-spin { to { transform: rotate(360deg); } }

  /* ============================================================================
     REVEAL ANIMATIONS — one-shot on scroll-into-view (IntersectionObserver adds
     .is-inview). Recipes reproduced exactly from animations.md. Elements carry a
     data-reveal="<name>" attribute; CSS sets the from-state, .is-inview the to-state.
     ============================================================================ */
  [data-reveal] { will-change: transform, opacity; }

  /* a-45 "Text View Animation" (×100): opacity 0→1, y -20px→0, 1000ms delay 250ms outQuad */
  [data-reveal="text"] { opacity: 0; transform: translateY(-20px);
    transition: opacity 1s var(--ease-out-quad) .25s, transform 1s var(--ease-out-quad) .25s; }
  [data-reveal="text"].is-inview { opacity: 1; transform: none; }

  /* a-34/a-33 "Slide Up" (y 70px→0, opacity, 800ms ease, delays 0.6s/0.4s) */
  [data-reveal="up"] { opacity: 0; transform: translateY(70px);
    transition: opacity .8s ease, transform .8s ease; }
  [data-reveal="up"].is-inview { opacity: 1; transform: none; }
  [data-reveal="up"][data-delay="400"] { transition-delay: .4s; }
  [data-reveal="up"][data-delay="600"] { transition-delay: .6s; }
  /* gentle stagger for heading clusters (eyebrow → title → lead) — text reveals
     had no delay mapping, so all fired at once. Keep it subtle. */
  [data-reveal="text"][data-delay="400"] { transition-delay: .1s; }
  [data-reveal="text"][data-delay="600"] { transition-delay: .2s; }

  /* slideInBottom (×17): opacity 0, y 100px→0, 1000ms outQuart */
  [data-reveal="slide-bottom"] { opacity: 0; transform: translateY(100px);
    transition: opacity 1s var(--ease-out-quart), transform 1s var(--ease-out-quart); }
  [data-reveal="slide-bottom"].is-inview { opacity: 1; transform: none; }

  /* fadeIn (×20): opacity 0→1, 1000ms outQuart */
  [data-reveal="fade"] { opacity: 0; transition: opacity 1s var(--ease-out-quart); }
  [data-reveal="fade"].is-inview { opacity: 1; }

  /* staggered grid entry: cards rise+fade in sequence when the grid scrolls into
     view (JS sets per-card transition-delay, then flips .is-staggered). Same
     rise+fade vocabulary as the projects filter swap, so entry and re-filter feel
     identical. Applied to .projects-wrapper / .blog-wrapper / .reviews-wrapper. */
  [data-stagger] > *:not([aria-hidden="true"]) { opacity: 0; transform: translateY(14px);
    transition: opacity .5s var(--ease-out-quad), transform .5s var(--ease-out-quad); }
  [data-stagger].is-staggered > *:not([aria-hidden="true"]) { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    [data-stagger] > *:not([aria-hidden="true"]),
    [data-stagger].is-staggered > *:not([aria-hidden="true"]) { opacity: 1; transform: none; transition: none; }
  }

  /* a-21/a-22 "Fade In" : opacity + scale .99→1 + y 5px→0 */
  [data-reveal="fade-rise"] { opacity: 0; transform: translateY(5px) scale(.99);
    transition: opacity 1s var(--ease-out-quad), transform .5s var(--ease-out-quad); }
  [data-reveal="fade-rise"].is-inview { opacity: 1; transform: none; }

  /* a-41 "Image Reveal" (×38): inner image scale 1.5→1, 1200ms delay 200ms outQuad.
     Apply to a wrapper with overflow:hidden; the <img> is the scaled child. */
  [data-reveal="image"] { overflow: hidden; }
  [data-reveal="image"] > img,
  [data-reveal="image"] > picture > img { transform: scale(1.5); transform-origin: center;
    transition: transform 1.2s var(--ease-out-quad) .2s; }
  [data-reveal="image"].is-inview > img,
  [data-reveal="image"].is-inview > picture > img { transform: scale(1); }

  /* flipInLeft (×9): rotateY -90deg→0 + opacity, 1000ms outQuart */
  [data-reveal="flip-left"] { opacity: 0; transform: perspective(800px) rotateY(-90deg); transform-origin: left center;
    transition: opacity 1s var(--ease-out-quart), transform 1s var(--ease-out-quart); }
  [data-reveal="flip-left"].is-inview { opacity: 1; transform: none; }

  /* growIn: opacity + scale .75→1, 1000ms outQuart */
  [data-reveal="grow"] { opacity: 0; transform: scale(.75);
    transition: opacity 1s var(--ease-out-quart), transform 1s var(--ease-out-quart); }
  [data-reveal="grow"].is-inview { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1 !important; transform: none !important; }
    [data-reveal="image"] > img { transform: none !important; }
    .breadcrumb-icon svg, .breadcrumb-icon img { animation: none !important; }
  }
}

/* ============================================================================
   @layer custom (cont.) — site header / nav / mobile menu
   Intorio header: fixed bar over the hero, dark wordmark + link row + pill CTA;
   gains a solid backdrop once scrolled (.is-scrolled, toggled in app.js).
   ============================================================================ */
@layer custom {
  .site-header {
    position: fixed; inset: 0 0 auto 0; z-index: 1000;
    padding-block: 22px;
    transition: background-color .4s ease, box-shadow .4s ease, padding .4s ease;
  }
  .site-header.is-scrolled {
    background: var(--surface-beige);
    box-shadow: 0 1px 0 rgba(1,1,1,.06);
    padding-block: 14px;
  }
  .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-l); }

  .nav-brand {
    font-weight: 700; font-size: 1.625rem; line-height: 1; letter-spacing: -.01em;
    color: var(--secondary); white-space: nowrap;
  }
  .nav-brand__logo { width: 11.875rem; height: auto; display: block; } /* 190px */

  .nav-menu { margin-inline: auto; }
  .nav-list { display: flex; align-items: center; gap: 36px; }
  .nav-link { position: relative; font-size: 1.0625rem; font-weight: 400; color: var(--secondary); padding-block: 4px; }
  .nav-link::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
    background: var(--accent); transform: scaleX(0); transform-origin: left;
    transition: transform .4s var(--ease-out-quad);
  }
  .nav-link:hover::after,
  .nav-link[aria-current="page"]::after { transform: scaleX(1); }
  .nav-link[aria-current="page"] { font-weight: 600; }

  .nav-cta { flex: none; }

  .menu-button { display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px;
    align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; }
  .menu-button span { display: block; width: 24px; height: 2px; background: var(--secondary);
    transition: transform .3s ease, opacity .3s ease; }
  .menu-button[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-button[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-button[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .mobile-nav { background: var(--surface-beige); border-top: 1px solid rgba(1,1,1,.08); }
  .mobile-nav[hidden] { display: none; }
  .mobile-nav__list { padding: var(--space-s) var(--container-pad) var(--space-l); }
  .mobile-nav__list li { border-bottom: 1px solid rgba(1,1,1,.08); }
  .mobile-nav__list a { display: block; padding: 16px 4px; font-size: 1.25rem; color: var(--secondary); }

  @media screen and (max-width: 991px) {
    .nav-menu, .nav-cta { display: none; }
    .menu-button { display: flex; }
  }
}

/* ============================================================================
   @layer custom (cont.) — footer (dark near-black band, light text, social pills)
   ============================================================================ */
@layer custom {
  .footer-section { background: var(--secondary); color: var(--ph-white); padding-block: 80px 32px; }
  .footer-section .nav-brand { color: var(--ph-white); }
  .footer-logo-block { display: inline-block; margin-bottom: var(--space-s); }
  .footer-logo-block .nav-brand__logo { width: 10.625rem; } /* 170px */

  .footer-section, .cta-section { position: relative; isolation: isolate; }
  /* footer: gold birds (background-v2) sitting in the two bottom corners — natural
     size, no stretch. Bottom-right is mirrored for symmetry. Tune --footer-birds-opacity. */
  .footer-section::before, .footer-section::after {
    content: ""; position: absolute; bottom: 0; z-index: -1; width: 600px; height: 422px;
    max-width: 55%; background: url("decor/footer-birds.webp") bottom left / contain no-repeat;
    opacity: var(--footer-birds-opacity, .32); pointer-events: none;
    /* recolour the silhouette to brand gold */
    filter: brightness(0) saturate(100%) invert(73%) sepia(88%) saturate(214%) hue-rotate(3deg) brightness(88%) contrast(88%);
  }
  /* flocks lean toward the middle: left corner mirrored, right corner natural */
  .footer-section::before { left: 0; transform: scaleX(-1); }
  .footer-section::after  { right: 0; }
  .footer-upper-block {
    display: grid; gap: var(--space-2xl);
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    padding-bottom: 56px;
  }
  .footer-summary { max-width: 36ch; color: rgba(255,255,255,.72); font-size: var(--text-s); }
  .footer-social-block-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
  /* Flatica review badge (star + 5,0 over the флатика wordmark) — links to the
     public reviews profile. Sits beside the social icons. */
  .footer-flatica { display: inline-flex; flex-direction: column; gap: 5px; justify-content: center;
    margin-left: 6px; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.18); }
  .footer-flatica__rating { display: inline-flex; align-items: center; gap: 6px;
    font-size: .9375rem; font-weight: 600; color: var(--ph-white); line-height: 1; }
  .footer-flatica__star { display: inline-flex; color: var(--accent); }
  .footer-flatica__star svg { width: 14px; height: 14px; }
  .footer-flatica__logo { display: inline-flex; color: rgba(255,255,255,.7);
    transition: color var(--dur-hover); }
  .footer-flatica__logo svg { height: 18px; width: auto; display: block; }
  .footer-flatica:hover .footer-flatica__logo { color: var(--ph-white); }
  .footer-social-block {
    display: grid; place-items: center; width: 44px; height: 44px;
    border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: var(--ph-white);
    transition: background-color var(--dur-hover), color var(--dur-hover), border-color var(--dur-hover);
  }
  .footer-social-block:hover { background: var(--ph-white); color: var(--secondary); border-color: var(--ph-white); }
  .footer-menu-title { font-size: 1.0625rem; font-weight: 600; margin-bottom: 22px; }
  .footer-menu-block, .footer-contact-info-block { display: flex; flex-direction: column; gap: 14px; }
  .footer-menu-link { color: rgba(255,255,255,.72); transition: color var(--dur-hover); width: fit-content; }
  .footer-menu-link:hover { color: var(--ph-white); }
  .footer-location { color: rgba(255,255,255,.72); }
  .footer-lower-border { height: 1px; background: rgba(255,255,255,.14); }
  .footer-copyright-block { display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); padding-top: 28px; flex-wrap: wrap; }
  .footer-copyright-text, .footer-menu-flex { color: rgba(255,255,255,.6); font-size: .9375rem; }
  .footer-menu-flex { display: flex; gap: 20px; }

  @media screen and (max-width: 991px) {
    .footer-upper-block { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
    .footer-single-column-block.first-column { grid-column: 1 / -1; }
  }
  @media screen and (max-width: 479px) {
    .footer-upper-block { grid-template-columns: 1fr; }
    .footer-copyright-block { flex-direction: column; align-items: flex-start; }
  }
}

/* ============================================================================
   @layer custom (cont.) — home sections (Intorio home-one)
   ============================================================================ */
@layer custom {

  /* ---- HERO (crossfade slider, Ken-Burns + staggered content; a-4/a-5) --- */
  /* pan-y so the browser keeps vertical scroll while JS handles horizontal swipe */
  .slider__track { touch-action: pan-y; }
  .hero-section { padding-top: 150px; }
  .hero-slider-block { position: relative; border-radius: var(--radius-card); overflow: hidden; }
  .hero-slider-mask { position: relative; height: clamp(520px, 82vh, 880px); }
  .hero-slider-item { position: absolute; inset: 0; opacity: 0; pointer-events: none;
    transition: opacity .8s var(--ease-out-quad); }
  .hero-slider-item.is-active { opacity: 1; pointer-events: auto; }
  .hero-slider-item-wrap { position: absolute; inset: 0; }
  .hero-slide-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .hero-slider-item.is-active .hero-slide-image { animation: kenburns 7s var(--ease-out-quad) forwards; }
  @keyframes kenburns { from { transform: scale(1.18); } to { transform: scale(1); } }
  /* two-axis scrim so light text reads on every slide: a left→right pass darkens the
     text column (decisive on the white-render first slide) and fades to clear by ~60%,
     keeping each photo's right/focal half bright; plus the original bottom darkening. */
  .hero-image-overlay { position: absolute; inset: 0; z-index: 2;
    background:
      linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.32) 30%, rgba(0,0,0,0) 60%),
      linear-gradient(180deg, rgba(1,1,1,.05) 0%, rgba(1,1,1,.15) 45%, rgba(1,1,1,.65) 100%); }
  /* single width authority for the hero column: the title fills it (no inner cap),
     while .hero-sub keeps its own 46ch reading width. widened for a bigger headline. */
  .hero-slider-content-block { position: absolute; z-index: 3; inset: auto 60px 56px; inline-size: min(100%, 56rem); color: var(--ph-white); }
  /* font-weight/line-height kept explicit so non-first slides (a <p>, for single-h1) match the h1 */
  .hero-title { color: var(--ph-white); font-family: var(--font-display); font-size: clamp(2.534rem, 1.577rem + 3.829vw, 5.5rem); font-weight: 500; line-height: 1; text-wrap: balance; margin: 0; }
  .hero-sub { margin-top: 18px; max-width: 46ch; color: rgba(255,255,255,.9); font-size: 1.125rem; }
  .hero-button-wrap { margin-top: 28px; }
  .hero-section .primary-button-block { background: var(--ph-white); color: var(--secondary); border-color: var(--ph-white); }
  .hero-section .primary-button-block:hover { background: transparent; color: var(--ph-white); }
  .hero-author-block { display: flex; align-items: center; gap: 16px; margin-top: 32px; }
  .hero-author-image-block { display: flex; }
  .hero-author-image { width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--ph-white); margin-left: -14px; }
  .hero-author-image:first-child { margin-left: 0; }
  .hero-author-text { font-size: 1rem; color: rgba(255,255,255,.92); line-height: 1.4; }
  /* staggered content entrance on the active slide (mirrors a-4 delays) */
  .hero-slider-item .hero-title-block, .hero-slider-item .hero-sub,
  .hero-slider-item .hero-button-wrap, .hero-slider-item .hero-author-block {
    opacity: 0; transform: translateY(30px); transition: opacity 1.6s ease, transform 1.6s ease; }
  .hero-slider-item.is-active .hero-title-block { opacity: 1; transform: none; transition-delay: .2s; }
  .hero-slider-item.is-active .hero-sub { opacity: 1; transform: none; transition-delay: .35s; }
  .hero-slider-item.is-active .hero-button-wrap { opacity: 1; transform: none; transition-delay: .5s; }
  .hero-slider-item.is-active .hero-author-block { opacity: 1; transform: none; transition-delay: .65s; }
  .slider__nav { position: absolute; z-index: 4; left: 60px; bottom: 28px; display: flex; gap: 10px; }
  .slider__dot { width: 28px; height: 3px; border: 0; border-radius: 2px; background: rgba(255,255,255,.4); cursor: pointer; transition: background .3s; }
  .slider__dot.is-active { background: var(--ph-white); }

  /* ---- WHO WE ARE (cross-sliding side images; a-44 via view-timeline) ---- */
  .wwa-wrapper { position: relative; display: grid; grid-template-columns: 1fr minmax(auto, 600px) 1fr;
    align-items: center; gap: var(--space-xl); }
  /* tilted framed cards; the photo drifts WITHIN the clipped frame (never cut off) */
  .wwa-left-image-block, .wwa-right-image-block { aspect-ratio: 3/4; border-radius: var(--radius-card);
    overflow: hidden; will-change: translate; }
  /* tilt lives on the independent `rotate` property so the scroll-driven `translate`
     can move the whole tilted card without clobbering the tilt */
  .wwa-left-image-block  { rotate: -4deg; }
  .wwa-right-image-block { rotate: 4deg; }
  .wwa-image { width: 100%; height: 100%; object-fit: cover; }
  .wwa-button-wrap { margin-top: 28px; }
  /* a-44 (Intorio): the two side cards counter-slide as the section crosses the
     viewport — left drifts up, right drifts down. The original swept ±70-100% of the
     card height, which overlapped neighbours and looked cut off; ±20% (of the card's
     own height, so it scales per breakpoint) keeps it lively while staying inside the
     section's padding band. At cover 50% both cards rest in their designed position;
     nothing clips them (no overflow on the section/wrapper). */
  @supports (animation-timeline: view()) {
    .wwa-wrapper { view-timeline-name: --wwa; view-timeline-axis: block; }
    .wwa-left-image-block  { animation: wwa-up   linear both; animation-timeline: --wwa; animation-range: cover 0% cover 100%; }
    .wwa-right-image-block { animation: wwa-down linear both; animation-timeline: --wwa; animation-range: cover 0% cover 100%; }
    @keyframes wwa-up   { from { translate: 0 20%;  } to { translate: 0 -20%; } }
    @keyframes wwa-down { from { translate: 0 -20%; } to { translate: 0 20%;  } }
  }

  /* ---- SERVICES sticky showcase (a-52: cards Y 0→-75%, images X 0→-300%) - */
  .service-section .main-container { margin-bottom: var(--space-l); }
  .service-showcase { position: relative; height: calc(var(--count, 4) * 78vh); }
  .service-showcase__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden;
    display: grid; grid-template-columns: 1fr 1fr; }
  .service-showcase__cards, .service-showcase__images { position: relative; overflow: hidden; height: 100%; }
  /* large bleeding image: round the inner (left) corners only */
  .service-showcase__images { border-radius: var(--radius-card) 0 0 var(--radius-card); }
  /* LEFT text + RIGHT image both pinned & crossfaded per scroll segment — the
     heading column stays put while the four services advance in sync (a-52 spirit). */
  /* The slide items are absolutely positioned (inset:0), so they ignore any padding
     on the cards column — the inset has to live on the items themselves. Align their
     left edge to the site container's CONTENT edge so the service titles line up with
     the "Как мы работаем" heading above (which sits inside .main-container). */
  .service-showcase__cards { position: relative; }
  .service-single-item-wrap { position: absolute; inset: 0; display: flex; flex-direction: column;
    justify-content: center; gap: 18px; opacity: 0;
    padding-left: max(var(--container-pad), calc((100vw - var(--container)) / 2 + var(--container-pad)));
    padding-right: clamp(2.8rem, 6vw, 5.5rem); }
  .service-single-item-wrap:first-child { opacity: 1; }
  .service-number-wrap { display: flex; align-items: baseline; gap: 8px; font-size: 1.125rem; color: var(--text-soft); }
  .service-number { font-weight: 600; }
  .service-title-v2 { font-size: var(--fs-h2); color: var(--secondary);
    transition: color var(--dur-hover) var(--ease-out-quad); }
  /* heading hover mirrors the publications list (accent on hover/focus) */
  .service-title-link:hover .service-title-v2,
  .service-title-link:focus-visible .service-title-v2 { color: var(--accent); }
  .service-summary-text { max-width: 55ch; color: var(--text-soft); }
  .service-showcase__images .service-bg-image-wrap { position: absolute; inset: 0; opacity: 0; }
  .service-showcase__images .service-bg-image-wrap:first-child { opacity: 1; }
  .service-large-bg-image { width: 100%; height: 100%; object-fit: cover; }
  @supports (animation-timeline: view()) {
    .service-showcase { view-timeline-name: --svc; view-timeline-axis: block; }
    .service-single-item-wrap, .service-showcase__images .service-bg-image-wrap {
      opacity: 0; animation: svc-fade linear both; animation-timeline: --svc; }
    .service-single-item-wrap:nth-child(1), .service-showcase__images .service-bg-image-wrap:nth-child(1) {
      animation-name: svc-fade-first; animation-range: cover 0%  cover 27%; }
    .service-single-item-wrap:nth-child(2), .service-showcase__images .service-bg-image-wrap:nth-child(2) { animation-range: cover 25% cover 52%; }
    .service-single-item-wrap:nth-child(3), .service-showcase__images .service-bg-image-wrap:nth-child(3) { animation-range: cover 50% cover 77%; }
    .service-single-item-wrap:nth-child(4), .service-showcase__images .service-bg-image-wrap:nth-child(4) { animation-range: cover 75% cover 100%; }
    @keyframes svc-fade       { 0% { opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; } }
    @keyframes svc-fade-first { 0% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; } }
  }

  /* ---- FEATURED PROJECTS (grid; image scale-in reveal + hover zoom; a-41/a-43) */
  .projects-wrapper { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-l); margin-top: var(--space-2xl); }

  /* filter transition: whole grid fades out fast, matching cards rise+fade back in (staggered via JS) */
  .project-single-item-block { transition: opacity .5s var(--ease-out-quad), transform .5s var(--ease-out-quad); }
  .projects-wrapper.is-leaving .project-single-item-block { transition-duration: .17s; opacity: 0; transform: translateY(6px); }
  .project-single-item-block.is-entering { opacity: 0; transform: translateY(14px); }
  @media (prefers-reduced-motion: reduce) {
    .project-single-item-block, .projects-wrapper.is-leaving .project-single-item-block { transition: none; transform: none; }
  }

  /* projects room-type filter bar (sits between heading and grid) */
  .proj-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
  .proj-filter { padding: 9px 20px; border-radius: var(--radius-pill); border: 1px solid rgba(1,1,1,.18);
    background: none; color: var(--secondary); font-size: .9375rem; font-weight: 400; line-height: 1; cursor: pointer;
    transition: background-color var(--dur-hover) var(--ease-out-quad), color var(--dur-hover) var(--ease-out-quad), border-color var(--dur-hover) var(--ease-out-quad); }
  .proj-filter:hover { border-color: var(--secondary); }
  .proj-filter.is-active { background: var(--accent); border-color: var(--accent); color: var(--secondary); }
  .project-image-link { position: relative; display: block; border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 4/3; }
  /* tiny room tag, top-left over the image (archive only) — flat white chip, regular weight */
  .project-tag { position: absolute; top: 10px; left: 10px; z-index: 2;
    background: color-mix(in srgb, var(--ph-white) 55%, transparent);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    color: var(--secondary); font-size: .6875rem; font-weight: 400;
    line-height: 1; letter-spacing: .02em; padding: 5px 9px; border-radius: var(--radius-pill); }
  .project-image { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out-quad); }
  .project-image-link:hover .project-image { transform: scale(1.05); }
  .project-content-block { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-m); margin-top: 18px; }
  .project-title { font-size: var(--text-l); font-weight: 500; transition: opacity .3s; line-height: 1.1; }
  .project-title-link:hover .project-title { opacity: .65; }
  .project-location { color: var(--text-soft); white-space: nowrap; text-transform: uppercase; font-size: .85rem; letter-spacing: .03em; }
  .project-button-wrap { display: flex; justify-content: center; margin-top: var(--space-2xl); }
  .project-image--placeholder, .blog-thumbnail--placeholder { display: block; width: 100%; height: 100%; background: var(--surface-beige); }

  /* ---- APPROACH + COUNTERS ---------------------------------------------- */
  .approach-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: center; margin-top: var(--space-2xl); }
  .approach-image { width: 100%; border-radius: var(--radius-card); aspect-ratio: 1/1; object-fit: cover; }
  .approach-summary { font-size: var(--fs-lead); color: var(--text); }
  .approach-funfact-block { display: flex; gap: var(--space-2xl); margin-top: var(--space-xl); flex-wrap: wrap; }
  .funfact-number { font-size: clamp(2.5rem, 1.8rem + 2.6vw, 3.75rem); font-weight: 600; line-height: 1; }
  .number-text-label { margin-top: 8px; color: var(--text-soft); font-size: var(--text-m); font-weight: 500; }

  /* ---- TESTIMONIALS slider (a-46/a-47 staggered) ------------------------ */
  .testimonial-wrapper { margin-top: var(--space-2xl); }
  .testimonial-slider-block { position: relative; }
  /* horizontal slide carousel: the viewport clips, the track translates with a
     smooth ease. JS sets translateX(-i*100%) on the track (one slide per page). */
  .testimonial-viewport { overflow: hidden; }
  .testimonial-slider-mask { display: flex; will-change: transform;
    transition: transform .7s cubic-bezier(0.22, 1, 0.36, 1); }
  .testimonial-slider-mask > .slider__slide { flex: 0 0 100%; min-width: 0; }
  /* home 2-up: two testimonial cards side by side per slide */
  .testimonial-pair-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-l); align-items: stretch; }
  .testimonial-pair-grid > .testimonial-slide-item .testimonial-slide-wrap { height: 100%; }
  /* match the mask's min-height so the card always fills the mask exactly — keeps the
     absolutely-centered (top:50%) prev/next arrows on the card's true vertical center */
  .testimonial-slide-wrap { display: grid; grid-template-columns: 1fr; gap: var(--space-2xl); align-items: start;
    min-height: 0; background: var(--surface-beige); border-radius: var(--radius-card); padding: var(--space-2xl); }
  .testimonial-avatar { width: 140px; height: 140px; border-radius: 50%; display: grid; place-items: center;
    background: var(--secondary); color: var(--ph-white); font-size: 2.5rem; font-weight: 600; }
  .testimonial-rating-block { display: flex; align-items: center; gap: 4px; color: var(--accent); }
  .testimonial-rating-icon svg { width: 18px; height: 18px; }
  .testimonial-rating-text { margin-left: 8px; color: var(--text-soft); font-size: var(--text-s); }
  .testimonial-review { margin-top: 18px; font-size: calc(var(--fs-body) * .9); line-height: 1.6; white-space: pre-line;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--quote-clamp, 6); overflow: hidden; }
  .testimonial-more { margin-top: 12px; background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; font-size: .9375rem; font-weight: 600; color: var(--accent);
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    transition: border-color var(--dur-hover); }
  .testimonial-more:hover { border-bottom-color: var(--accent); }
  .testimonial-author-block { margin-top: 22px; }
  .testimonial-author-name { font-weight: 600; font-size: 1.125rem; }
  .testimonial-author-designation { color: var(--text-soft); }
  .testimonial-arrow-block { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--secondary); background: var(--surface);
    display: grid; place-items: center; cursor: pointer; transition: background .4s, color .4s; }
  .testimonial-arrow-block:hover { background: var(--secondary); color: var(--ph-white); }
  .testimonial-arrow-block.left { left: -10px; } .testimonial-arrow-block.right { right: -10px; }
  .testimonial-arrow-icon { display: flex; align-items: center; justify-content: center; line-height: 0; }
  .testimonial-arrow-icon svg { display: block; width: 16px; height: 12px; }
  .testimonial-arrow-icon.flip { transform: rotate(180deg); }
  .testimonial-nav { position: static; justify-content: center; margin-top: var(--space-l); }
  .testimonial-nav .slider__dot { background: rgba(1,1,1,.2); }
  .testimonial-nav .slider__dot.is-active { background: var(--secondary); }
  /* small understated "all reviews" text link under the dots */
  .testimonial-all { text-align: center; margin-top: var(--space-m); }
  .testimonial-all-link { display: inline-flex; align-items: center; gap: 7px;
    font-size: .9375rem; font-weight: 600; letter-spacing: .01em; color: var(--text-soft);
    border-bottom: 1px solid transparent; padding-bottom: 2px;
    transition: color var(--dur-hover), border-color var(--dur-hover); }
  .testimonial-all-link:hover { color: var(--accent);
    border-bottom-color: color-mix(in srgb, var(--accent) 45%, transparent); }
  .testimonial-all-arrow { display: inline-flex; line-height: 0; }
  .testimonial-all-arrow svg { width: 14px; height: 10px; transition: transform var(--dur-hover); }
  .testimonial-all-link:hover .testimonial-all-arrow svg { transform: translateX(3px); }
  /* related-projects 3-up carousel (single project page) — same slide mechanics as
     the testimonials slider (viewport clips, flex track translates), but three
     project cards per slide. Reuses .testimonial-arrow/-nav/-all chrome. */
  .project-slider-wrapper { margin-top: var(--space-2xl); }
  .project-slider-block { position: relative; }
  .project-viewport { overflow: hidden; }
  .project-slider-mask { display: flex; will-change: transform;
    transition: transform .7s cubic-bezier(0.22, 1, 0.36, 1); }
  .project-slider-mask > .slider__slide { flex: 0 0 100%; min-width: 0; }
  .project-triple-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-l); align-items: start; }
  /* arrows must sit on the IMAGE centre, not the card centre (card = image + title +
     meta, so 50% lands too low). margin-% resolves against the row width, and the
     image is aspect-ratio 4/3, so half the image height = (rowWidth - 2·gap)/8 for the
     3-up layout. top:0 + that margin + the inherited translateY(-50%) → image centre. */
  .project-arrow-block { top: 0; margin-top: calc((100% - 2 * var(--space-l)) / 8); }

  /* ---- BLOG (3-up; thumb scale-in reveal + hover zoom; a-12) ------------ */
  .blog-wrapper { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); margin-top: var(--space-2xl); }

  /* blog single — "read also" horizontal carousel of other posts (arrows + drag) */
  .blog-carousel-head { display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--space-l); margin-bottom: var(--space-xl); }
  .blog-carousel__nav { display: flex; gap: 12px; flex: none; }
  .blog-carousel__arrow { width: 52px; height: 52px; border-radius: 50%;
    border: 1px solid rgba(1,1,1,.18); background: transparent; cursor: pointer; color: var(--secondary);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .3s var(--ease-out-quad), color .3s, border-color .3s; }
  .blog-carousel__arrow:hover { background: var(--secondary); color: var(--ph-white); border-color: var(--secondary); }
  .blog-carousel__arrow .arrow-icon { width: 20px; height: 20px; }
  .blog-carousel { overflow: hidden; }
  .blog-carousel__track { display: flex; gap: var(--space-l); overflow-x: auto; padding-bottom: 4px;
    scroll-snap-type: x mandatory; scroll-behavior: smooth; cursor: grab;
    scrollbar-width: none; -ms-overflow-style: none; }
  .blog-carousel__track::-webkit-scrollbar { display: none; }
  .blog-carousel__track.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
  .blog-carousel__track.is-dragging a { pointer-events: none; }
  .blog-carousel__item { flex: 0 0 calc((100% - var(--space-l) * 2) / 3); scroll-snap-align: start; }
  .blog-thumbnail-block { border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 4/3; }
  .blog-thumbnail-link { display: block; height: 100%; }
  .blog-thumbnail { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out-quad); }
  .blog-thumbnail-block:hover .blog-thumbnail { transform: scale(1.05); }
  .blog-meta-block { display: flex; align-items: center; gap: 12px; margin-top: 18px; color: var(--text-soft); font-size: .95rem; }
  .blog-meta-separator { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
  .blog-title { margin-top: 12px; font-size: var(--text-l); font-weight: 500; transition: opacity .3s; }
  .blog-title-link:hover .blog-title { opacity: .65; }

  /* ---- CTA band --------------------------------------------------------- */
  .cta-section { background: var(--secondary); padding-block: clamp(80px, 10vw, 140px); }
  .cta-content-block { max-width: 800px; margin-inline: auto; }
  .cta-section .section-title { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); }
  .cta-button-wrap { margin-top: 32px; }
  .cta-section .primary-button-block { background: var(--ph-white); color: var(--secondary); }
  .cta-section .primary-button-block:hover { background: transparent; color: var(--ph-white); border-color: var(--ph-white); }

  /* ---- section responsive ----------------------------------------------- */
  @media screen and (max-width: 991px) {
    .hero-slider-content-block { inset: auto 28px 32px; }
    .slider__nav { left: 28px; }
    .wwa-wrapper { grid-template-columns: 1fr; }
    .wwa-left-image-block, .wwa-right-image-block { display: none; }
    .service-showcase { height: auto; }
    .service-showcase__sticky { position: relative; height: auto; grid-template-columns: 1fr; }
    .service-showcase__cards { padding-inline: var(--container-pad); }
    .service-single-item-wrap { position: static; opacity: 1 !important; animation: none !important;
      padding-block: var(--space-l); border-top: 1px solid rgba(1,1,1,.1); }
    .service-showcase__images { display: none; }
    .approach-wrapper { grid-template-columns: 1fr; }
    .blog-wrapper { grid-template-columns: 1fr; }
    .projects-wrapper { grid-template-columns: repeat(2, 1fr); }
    .project-triple-grid { grid-template-columns: repeat(2, 1fr); }
    /* 2-up: half image height = (rowWidth - 1·gap)/2 · 3/4 / 2 = (rowWidth - gap)·3/16 */
    .project-arrow-block { margin-top: calc((100% - var(--space-l)) * 3 / 16); }
    .blog-carousel__item { flex-basis: calc((100% - var(--space-l)) / 2); }
  }
  @media screen and (max-width: 767px) {
    .projects-wrapper { grid-template-columns: 1fr; }
    .project-triple-grid { grid-template-columns: 1fr; }
    /* 1-up: image spans full row, half height = rowWidth · 3/4 / 2 = rowWidth · 3/8 */
    .project-arrow-block { margin-top: calc(100% * 3 / 8); }
    .blog-carousel__item { flex-basis: 82%; }
    .blog-carousel-head { align-items: center; }
    .testimonial-slide-wrap { grid-template-columns: 1fr; text-align: center; justify-items: center; }
    .testimonial-pair-grid { grid-template-columns: 1fr; gap: var(--space-l); }
    .approach-funfact-block { gap: var(--space-l); }
    /* hero: move the slider up (less top gap under the fixed header) and give the
       nav dots clearance from the bottom-anchored content */
    .hero-section { padding-top: 96px; }
    .hero-slider-content-block { inset: auto 24px 60px; }
    .slider__nav { bottom: 22px; }
  }
}

/* ============================================================================
   Responsive — Intorio breakpoints (≤991 tablet, ≤767, ≤479 mobile; ≥1280/1440 up)
   ============================================================================ */
@media screen and (min-width: 1280px) { :root { --container: 1170px; } }
@media screen and (min-width: 1440px) { :root { --container: 1350px; --section-y: 135px; } }

@media screen and (max-width: 991px) {
  :root { --container: 740px; --section-y: 90px; }   /* type is fluid via clamp() — no fs overrides */
}
@media screen and (max-width: 767px) {
  :root { --container: 100%; --section-y: 80px; }
  .section-title-and-button-block { flex-direction: column; align-items: flex-start; }
}

/* ============================================================================
   Lenis smooth scroll — required helper rules. Classes are added to <html> by
   the Lenis runtime (app.js) only while active, so under reduced-motion (Lenis
   not started) the native `scroll-behavior` from globals.css stays in effect.
   `.lenis-smooth { scroll-behavior: auto }` overrides globals so the browser and
   Lenis don't fight over animated jumps. Mark internally-scrolling regions with
   `data-lenis-prevent` to keep their native wheel scroll. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ============================================================================
   @layer custom (cont.) — inner pages: archive heads, breadcrumbs, project &
   post singles, reviews grid, contacts, prose, pager
   ============================================================================ */
@layer custom {
  /* header clearance — home hero is full-bleed under the fixed header; these aren't */
  .archive-section, .project-single, .post-single { padding-top: calc(var(--section-y) + 56px); }

  /* breadcrumbs */
  .breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    font-size: .9375rem; color: var(--text-soft); margin-bottom: var(--space-xl); }
  .breadcrumbs a { color: var(--text-soft); transition: color var(--dur-hover); }
  .breadcrumbs a:hover { color: var(--secondary); }
  .breadcrumbs__sep { opacity: .45; }
  .breadcrumbs__cur { color: var(--secondary); }

  /* archive head + states */
  .archive-head { margin-bottom: var(--space-2xl); }
  .archive-lead { margin-top: 18px; max-width: 56ch; color: var(--text-soft); font-size: var(--fs-lead); line-height: 1.5; font-weight: 300; }
  .section-heading-block.align-center .archive-lead { margin-inline: auto; }
  .archive-empty { color: var(--text-soft); text-align: center; padding-block: var(--space-2xl); }

  /* back-arrow flip (base + hover, beating .arrow-icon hover translate) */
  .arrow-icon.flip { transform: rotate(180deg); }
  .primary-button-block:hover .arrow-icon.flip { transform: rotate(180deg) translateX(5px); }

  /* pager */
  .archive-pager { display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-l); margin-top: var(--space-2xl); }
  .archive-pager__btn { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500;
    color: var(--secondary); transition: opacity var(--dur-hover); }
  .archive-pager__btn:hover { opacity: .55; }
  .archive-pager__status { color: var(--text-soft); font-size: .9375rem; }

  /* services list (dedicated /services page — numbered rows).
     Reset the home showcase's absolute/opacity/animation so cards are visible. */
  .services-list { margin-top: var(--space-2xl); border-top: 1px solid rgba(1,1,1,.12); }
  .services-list .service-single-item-wrap { position: static; inset: auto; opacity: 1;
    animation: none; display: grid; grid-template-columns: 96px 1fr 1.15fr;
    gap: var(--space-xl); align-items: start; padding-block: var(--space-xl); padding-inline: 0;
    border-bottom: 1px solid rgba(1,1,1,.12); }
  .services-list .service-summary-block { max-width: 54ch; }
  /* staggered entry on /services: the generic [data-stagger] from-state can't beat
     `.services-list .service-single-item-wrap { opacity:1 }`, so scope it higher, and
     neutralise the rows' inner text reveals so each row rises as one unit (the
     cursor-follow .svc-preview is aria-hidden, so the mechanism already skips it). */
  .services-list[data-stagger] > .service-single-item-wrap { opacity: 0; transform: translateY(14px);
    transition: opacity .5s var(--ease-out-quad), transform .5s var(--ease-out-quad); }
  .services-list[data-stagger].is-staggered > .service-single-item-wrap { opacity: 1; transform: none; }
  .services-list [data-reveal] { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .services-list[data-stagger] > .service-single-item-wrap { opacity: 1; transform: none; transition: none; }
  }

  /* reviews grid — reuse the testimonial slide statically (override slider absolute/hidden states) */
  .reviews-wrapper { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xl);
    margin-top: var(--space-2xl); align-items: start; }
  .reviews-wrapper .testimonial-slide-item { position: relative; inset: auto; opacity: 1;
    pointer-events: auto; height: 100%; }
  .reviews-wrapper .testimonial-slide-item :is(.testimonial-left-column, .testimonial-rating-block,
    .testimonial-review-block, .testimonial-author-block) { opacity: 1; transform: none; }
  .reviews-wrapper .testimonial-slide-wrap { grid-template-columns: 1fr; gap: var(--space-l);
    min-height: 0; align-items: start; padding: var(--space-xl); height: 100%;
    position: relative; isolation: isolate; overflow: hidden; }
  .reviews-wrapper .testimonial-avatar { width: 64px; height: 64px; font-size: 1.5rem; }
  .reviews-wrapper .testimonial-review { font-size: calc(var(--fs-body) * .9); margin-top: 12px; }
  .reviews-wrapper .testimonial-author-block { margin-top: 16px; }

  /* gold birds tucked into a corner of *some* review cards — scattered, not
     every card, corners alternating, so it reads hand-placed not patterned.
     z-index:-1 keeps them on the beige but behind the text (isolate clips the
     stacking context to the card); the left ones are mirrored like the footer.
     Period 7: cards +1 (right), +3 (left), +6 (right) ≈ 3 in 7. Tune opacity. */
  .review-card:nth-child(7n+1) .testimonial-slide-wrap::after,
  .review-card:nth-child(7n+3) .testimonial-slide-wrap::after,
  .review-card:nth-child(7n+6) .testimonial-slide-wrap::after {
    content: ""; position: absolute; bottom: 0; z-index: -1;
    width: 31rem; height: 100%; max-width: 100%;
    background: url("decor/footer-birds.webp") bottom right / contain no-repeat;
    opacity: var(--review-birds-opacity, .28); pointer-events: none;
    filter: brightness(0) saturate(100%) invert(73%) sepia(88%) saturate(214%) hue-rotate(3deg) brightness(88%) contrast(88%);
  }
  .review-card:nth-child(7n+1) .testimonial-slide-wrap::after,
  .review-card:nth-child(7n+6) .testimonial-slide-wrap::after { right: 0; }
  .review-card:nth-child(7n+3) .testimonial-slide-wrap::after { left: 0; transform: scaleX(-1); }

  /* whole clampable card reads as one click target (the .testimonial-more
     button stays the real keyboard/SR control; this is a pointer affordance) */
  .testimonial-slide-item.is-clampable .testimonial-slide-wrap { cursor: pointer;
    transition: background-color var(--dur-hover) var(--ease-out-quad); }
  .testimonial-slide-item.is-clampable .testimonial-slide-wrap:hover { background: var(--surface-beige-2, color-mix(in srgb, var(--surface-beige) 92%, var(--secondary))); }

  /* publications — editorial hover list (cursor-follow cover preview + lightbox) */
  .pub-gallery { margin-top: var(--space-2xl); }
  .pub-list { border-top: 1px solid rgba(1,1,1,.14); }
  .pub-item { border-bottom: 1px solid rgba(1,1,1,.14); }
  .pub-item__btn { display: grid; grid-template-columns: 1fr auto; align-items: center;
    column-gap: var(--space-l); width: 100%; text-align: left; padding-block: var(--space-l);
    background: none; border: 0; cursor: pointer; color: var(--secondary);
    transition: color var(--dur-hover) var(--ease-out-quad); }
  .pub-item__name { grid-column: 1; font-size: var(--fs-h3); font-weight: 500; line-height: 1.15;
    transition: color var(--dur-hover) var(--ease-out-quad); }
  .pub-item__intro { grid-column: 1; margin-top: 6px; font-size: .9375rem; line-height: 1.5;
    color: var(--text-soft); transition: color var(--dur-hover) var(--ease-out-quad); }
  .pub-item__view { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center;
    justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-pill);
    border: 1px solid rgba(1,1,1,.18); color: var(--secondary); flex-shrink: 0;
    transition: background-color var(--dur-hover), color var(--dur-hover), border-color var(--dur-hover), transform var(--dur-hover); }
  .pub-item__view svg { width: 16px; height: 16px; }
  .pub-item__btn:hover .pub-item__name,
  .pub-item__btn:focus-visible .pub-item__name { color: var(--accent); }
  .pub-item__btn:hover .pub-item__view,
  .pub-item__btn:focus-visible .pub-item__view { background: var(--accent); border-color: var(--accent);
    color: var(--secondary); transform: translateX(4px); }

  /* floating cursor-follow preview */
  /* `transform` is owned by the cursor-follow JS, so the entrance animates the
     independent `scale` + `opacity` props — fades and eases up to size instead
     of popping. */
  .pub-preview { position: fixed; top: 0; left: 0; z-index: 60; width: 230px; height: auto;
    max-height: 300px; object-fit: cover; border-radius: var(--radius-card); pointer-events: none;
    opacity: 0; scale: .92; transform: translate3d(-100%,-100%,0); box-shadow: 0 18px 50px rgba(1,1,1,.28);
    transition: opacity .32s var(--ease-out-quad), scale .32s var(--ease-out-quad);
    will-change: transform, opacity, scale; }
  .pub-preview.is-on { opacity: 1; scale: 1; }

  /* services cursor-follow preview — same idea as publications, ~2× larger */
  .svc-preview { position: fixed; top: 0; left: 0; z-index: 60; width: min(460px, 44vw); height: auto;
    max-height: 600px; object-fit: cover; border-radius: var(--radius-card); pointer-events: none;
    opacity: 0; scale: .92; transform: translate3d(-100%,-100%,0); box-shadow: 0 18px 50px rgba(1,1,1,.28);
    transition: opacity .32s var(--ease-out-quad), scale .32s var(--ease-out-quad);
    will-change: transform, opacity, scale; }
  .svc-preview.is-on { opacity: 1; scale: 1; }

  /* lightbox (ported from tehvandi, retinted to the beige/black palette) */
  .lb { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center;
    background: rgba(1,1,1,.92); opacity: 0; visibility: hidden;
    transition: opacity .3s var(--ease-out-quad), visibility .3s var(--ease-out-quad); }
  .lb[data-open="true"] { opacity: 1; visibility: visible; }
  .lb__img { max-width: 92vw; max-height: 86vh; border-radius: var(--radius-card);
    box-shadow: 0 2rem 5rem rgba(0,0,0,.5); transform: scale(.98);
    transition: transform .3s var(--ease-out-quad); touch-action: none; user-select: none; }
  .lb[data-open="true"] .lb__img { transform: scale(1); }
  .lb__btn { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center;
    width: 3.4rem; height: 3.4rem; border-radius: 50%; background: rgba(255,255,255,.12);
    color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; border: 0;
    transition: background-color .2s var(--ease-out-quad), color .2s var(--ease-out-quad); }
  .lb__btn:hover { background: var(--accent); color: var(--secondary); }
  .lb__btn--close { top: 1.6rem; right: 1.6rem; }
  .lb__btn--prev { left: 1.6rem; top: 50%; transform: translateY(-50%); }
  .lb__btn--next { right: 1.6rem; top: 50%; transform: translateY(-50%); }
  .lb__count { position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%);
    color: rgba(255,255,255,.7); font-size: .875rem; letter-spacing: .05em; }
  body.lb-open { overflow: hidden; }
  /* while a lightbox/modal is open, take the fixed header out of the way entirely —
     otherwise the burger (top-right) intercepts taps meant for the close button and
     the header CTA shows through the overlay. */
  body.lb-open .site-header { opacity: 0; pointer-events: none; }

  /* testimonial "read full" modal — full quote on demand (the card clamps to a few lines) */
  .tmodal { position: fixed; inset: 0; z-index: 1110; display: flex; align-items: center; justify-content: center;
    padding: var(--space-l); background: rgba(1,1,1,.6); backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; }
  .tmodal[data-open="true"] { opacity: 1; visibility: visible; }
  .tmodal__panel { position: relative; width: min(640px, 100%); max-height: 86vh;
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--ph-white, #fff); border-radius: var(--radius-card); padding: clamp(28px, 5vw, 48px);
    transform: translateY(16px) scale(.98); transition: transform .3s ease; }
  .tmodal[data-open="true"] .tmodal__panel { transform: none; }
  .tmodal__close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border: 0; cursor: pointer;
    border-radius: 50%; background: var(--bg-soft, #f3efe9); font-size: 1.4rem; line-height: 1; color: var(--secondary);
    transition: background-color var(--dur-hover); }
  .tmodal__close:hover { background: var(--accent); }
  .tmodal__head { display: flex; align-items: center; gap: 16px; }
  .tmodal__avatar { width: 56px; height: 56px; border-radius: 50%; flex: none; display: grid; place-items: center;
    background: var(--secondary); color: var(--ph-white); font-weight: 600; }
  .tmodal__name { font-weight: 600; font-size: 1.125rem; }
  .tmodal__role { color: var(--text-soft); font-size: .9375rem; }
  .tmodal__stars { display: flex; align-items: center; gap: 4px; margin-top: 20px; color: var(--accent); }
  .tmodal__stars .testimonial-rating-icon svg { width: 18px; height: 18px; }
  .tmodal__stars .testimonial-rating-text { margin-left: 8px; color: var(--text-soft); }
  /* only the quote scrolls (header/close/counter stay put); slim on-brand bar */
  .tmodal__text { margin-top: 18px; font-size: 1.0625rem; line-height: 1.65; white-space: pre-line; color: var(--text);
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    scrollbar-gutter: stable; padding-right: 10px;
    scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--secondary) 26%, transparent) transparent; }
  .tmodal__text::-webkit-scrollbar { width: 6px; }
  .tmodal__text::-webkit-scrollbar-track { background: transparent; }
  .tmodal__text::-webkit-scrollbar-thumb { border-radius: 99px;
    background: color-mix(in srgb, var(--secondary) 26%, transparent); }
  .tmodal__text::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--secondary) 42%, transparent); }
  .tmodal__count { margin-top: 20px; font-size: .8125rem; letter-spacing: .05em; color: var(--text-soft); flex: none; }
  /* prev/next arrows — navigate between testimonials inside the modal */
  .tmodal__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 3.4rem; height: 3.4rem; border-radius: 50%; border: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 1.6rem; line-height: 1;
    background: rgba(255,255,255,.16); color: #fff;
    transition: background-color var(--dur-hover), color var(--dur-hover); }
  .tmodal__nav:hover { background: var(--accent); color: var(--secondary); }
  .tmodal__nav--prev { left: 1.4rem; }
  .tmodal__nav--next { right: 1.4rem; }
  @media (max-width: 680px) { .tmodal__nav { display: none; } } /* mobile: swipe instead */

  /* project single */
  .project-single__head { margin-bottom: var(--space-2xl); }
  .project-single__title { font-size: var(--fs-h1); }
  .project-single__meta { margin-top: 12px; color: var(--text-soft); font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; }
  .project-single__hero { border-radius: var(--radius-card); overflow: hidden; margin-bottom: var(--space-2xl); }
  .project-single__hero img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
  .project-single__body { margin-bottom: var(--space-2xl); }
  .project-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-l);
    margin-bottom: var(--space-2xl); }
  .project-gallery__item { border-radius: var(--radius-card); overflow: hidden; }
  .project-gallery__item img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
  .project-single__actions, .post-single__actions, .contacts-cta { display: flex; flex-wrap: wrap;
    gap: var(--space-l); margin-top: var(--space-xl); }

  /* post (blog) single */
  .post-single__head { max-width: 56rem; margin-bottom: var(--space-xl); }
  .post-single__meta { display: flex; align-items: center; gap: .75rem; margin-bottom: 14px; font-size: .9375rem; }
  .post-single__cat { text-transform: uppercase; letter-spacing: .04em; color: var(--secondary); }
  .post-single__date { color: var(--text-soft); }
  .post-single__title { font-size: var(--fs-h1); }
  .post-single__hero { border-radius: var(--radius-card); overflow: hidden; margin-bottom: var(--space-2xl); }
  .post-single__hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
  .post-single__body { max-width: 52rem; }

  /* prose (article body typography) */
  .prose { font-size: var(--fs-body); line-height: 1.75; color: var(--text); }
  .prose > * + * { margin-top: 1.1em; }
  .prose h2 { font-size: var(--fs-h3); margin-top: 1.6em; }
  .prose h3 { font-size: var(--fs-h4); margin-top: 1.4em; }
  .prose ul, .prose ol { padding-left: 1.4em; }
  .prose li + li { margin-top: .4em; }
  .prose a { color: var(--secondary); text-decoration: underline; text-underline-offset: 3px; }
  .prose img { border-radius: var(--radius-card); margin-block: 1.4em; max-width: 100%; height: auto; }
  /* project body keeps a tighter measure (base .prose now covers the font size) */
  .project-single__body.prose { max-width: 75ch; }
  /* push that tighter column to the right of the centered container for a more
     dynamic, asymmetric read. Separate class so the shared .main-container is
     untouched everywhere else. */
  .project-single__body-wrap { display: flex; justify-content: flex-end; }
  /* single service body also reads at the larger base size (scoped to the
     service type so blog posts / publications / pages keep the compact .prose). */
  /* the inline "Все услуги" heading doubles as a contextual link to the hub */
  .subtitle-link { color: inherit; text-decoration: none; transition: color var(--dur-hover); }
  .subtitle-link:hover { color: var(--accent); }

  /* contacts */
  .contacts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-l);
    margin-top: var(--space-2xl); }
  .contact-card { display: flex; flex-direction: column; gap: 10px; background: var(--surface-beige);
    border-radius: var(--radius-card); padding: var(--space-xl);
    transition: transform var(--dur-hover) var(--ease-out-quad), opacity var(--dur-hover) var(--ease-out-quad); }
  a.contact-card:hover { transform: translateY(-4px); }
  .contact-card__label { font-size: .875rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-soft); }
  .contact-card__value { font-weight: 500; color: var(--secondary); }
  /* portrait occupies the third grid cell: image fills the box width (flush sides,
     no padding), bottom-aligned, and bleeds out the TOP into the empty space beside
     the heading. Absolute so it contributes no height — the box matches the text cards. */
  .contact-card--portrait { position: relative; padding: 0; overflow: visible; min-height: 100%; }
  .contact-card--portrait img { position: absolute; inset-inline: 0; bottom: 0; width: 100%; height: auto;
    border-end-start-radius: var(--radius-card); border-end-end-radius: var(--radius-card); }
  .contacts-socials { display: flex; gap: 14px; margin-top: var(--space-xl); }
  .contacts-socials .footer-social-block { border-color: rgba(1,1,1,.22); color: var(--secondary); }
  .contacts-socials .footer-social-block:hover { background: var(--secondary); color: var(--ph-white); border-color: var(--secondary); }
  .contacts-body { max-width: 52rem; margin-top: var(--space-2xl); }
  /* lower row: suppliers note, socials, CTA (portrait now lives in the grid above) */
  .contacts-lower { margin-top: var(--space-2xl); }
  .contacts-suppliers { max-width: 54ch; margin-bottom: var(--space-xl); }
  .contacts-suppliers__title { text-transform: uppercase; letter-spacing: .04em; font-size: .8125rem;
    color: var(--secondary); margin-bottom: 8px; }
  .contacts-suppliers__text { font-style: italic; font-size: .9375rem; line-height: 1.6; color: var(--text-soft); text-wrap: pretty; }
  .contacts-suppliers__text a { color: var(--secondary); text-decoration: underline; text-underline-offset: 3px; font-style: normal; }
}

/* inner-page responsive (unlayered → overrides layered component rules) */
@media screen and (max-width: 991px) {
  .reviews-wrapper { grid-template-columns: 1fr; }
  .services-list .service-single-item-wrap { grid-template-columns: 72px 1fr; }
  .services-list .service-summary-block { grid-column: 1 / -1; max-width: none; }
  /* contacts: 2 columns; portrait stops bleeding and flows as a normal image (still last) */
  .contacts-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-card--portrait { position: static; min-height: 0; overflow: hidden; border-radius: var(--radius-card); }
  .contact-card--portrait img { position: static; width: 100%; height: auto; border-radius: var(--radius-card); }
}
@media screen and (max-width: 767px) {
  .contacts-grid { grid-template-columns: 1fr; }
  .project-gallery { grid-template-columns: 1fr; }
  .archive-pager { flex-wrap: wrap; gap: var(--space-l); }
  .reviews-wrapper .testimonial-slide-wrap { grid-template-columns: 1fr; }
}

/* ============================================================================
   ACCENT CTA buttons — TOGGLE (unlayered, wins over the white-button rules).
   Trial: solid gold pill with near-black text. To REVERT to white buttons,
   delete this entire block. Covers header CTA, hero, and footer CTA buttons
   (every .primary-button-block except the transparent variant).
   ============================================================================ */
.primary-button-block:not(.bg-transparent) {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--secondary);
}
.primary-button-block:not(.bg-transparent):hover {
  background: var(--secondary);
  border-color: var(--secondary);
  color: var(--ph-white);
}
/* on the dark CTA section the near-black hover is invisible — go white instead */
.cta-section .primary-button-block:not(.bg-transparent):hover {
  background: var(--ph-white);
  border-color: var(--ph-white);
  color: var(--secondary);
}

/* ============================================================================
   TEST OVERRIDES (font-logo-radius-test branch) — remove to revert
   ============================================================================ */
/* Square corners across the board */
*, *::before, *::after { border-radius: 0 !important; }
/* ...except the hero stat thumbnails — these stay round */
.hero-author-image { border-radius: 50% !important; }

/* Original Shirvanova gold badge logo — size by height (square-ish badge).
   Fluid: 3.2rem @≤375px → 4.3rem @≥1440px viewport. */
.nav-brand__logo { width: auto; height: clamp(3.2rem, 2.813rem + 1.653vw, 4.3rem); }
.footer-logo-block .nav-brand__logo { height: 3.4rem; }