/* ===================================================
   GoldArt — Parchment Gold Theme
   Artisan Editorial Style
   =================================================== */

/* --- Design Tokens --- */
:root {
    --surface-primary: #F4F2EF;
    --surface-inverse: #1A1A1A;
    --fg-primary: #1A1A1A;
    --fg-secondary: #4A4A4A;
    --fg-muted: #8A847B;
    --fg-inverse: #FFFFFF;
    --border-subtle: #EEECE8;
    --border-hairline-gold: rgba(200, 180, 150, 0.32);
    --accent-primary: #C8B496;
    --accent-on-light: #A88554; /* darker gold-bronze for small text on cream/white — better contrast */
    --accent-hover: #b9a284;

    --font-display: Georgia, 'Times New Roman', serif;
    --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    --header-height: 72px;
}

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Парный гард к body (стр. ниже): без него широкий элемент уводит вбок
       именно html, и overflow-x на body его не ловит. Защищает все страницы. */
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    color: var(--fg-primary);
    background: var(--surface-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

ul { list-style: none; }

img {
    max-width: 100%;
    display: block;
}

/* --- Generic scroll-reveal (data-reveal pattern) --- */
[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
}

[data-reveal][data-reveal-delay="100"] { transition-delay: 0.10s; }
[data-reveal][data-reveal-delay="200"] { transition-delay: 0.20s; }
[data-reveal][data-reveal-delay="300"] { transition-delay: 0.30s; }
[data-reveal][data-reveal-delay="400"] { transition-delay: 0.40s; }
[data-reveal][data-reveal-delay="500"] { transition-delay: 0.50s; }

@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* --- HEADER --- */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: var(--header-height);
    transition: background 0.4s ease;
}

.header--scrolled {
    background: rgba(26, 26, 26, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.header__inner {
    max-width: 1440px;
    margin: 0 auto;
    height: 100%;
    padding: 0 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo */
.logo {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0.01em;
    z-index: 101;
    transition: opacity 0.3s;
}

.logo:hover { opacity: 0.8; }

.logo__gold { color: var(--fg-inverse); }
.logo__art { color: var(--accent-primary); }

/* Nav */
.nav__list {
    display: flex;
    gap: 40px;
}

.nav__link {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.3s;
    position: relative;
}

.nav__link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--accent-primary);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.nav__link:hover {
    color: var(--fg-inverse);
}

.nav__link:hover::after {
    transform: scaleX(1);
}

/* On mouse-out, retract to the right — feels like a smooth continuation
   rather than collapsing back to the start edge. */
.nav__link:not(:hover)::after {
    transform-origin: right center;
}

/* Header Phone */
.header__phone {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.03em;
    transition: color 0.3s;
}

.header__phone:hover { color: var(--fg-inverse); }

.header__phone-icon { display: none; }

/* Burger */
.burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 101;
    padding: 4px;
}

.burger__line {
    display: block;
    width: 100%;
    height: 1.5px;
    background: var(--fg-inverse);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s;
    transform-origin: center;
}

.burger--active .burger__line:first-child {
    transform: translateY(3.75px) rotate(45deg);
}

.burger--active .burger__line:last-child {
    transform: translateY(-3.75px) rotate(-45deg);
}

/* Mobile Menu */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: rgba(26, 26, 26, 0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu--open {
    opacity: 1;
    pointer-events: all;
}

.mobile-menu__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.mobile-menu__link {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 400;
    color: var(--fg-inverse);
    transition: color 0.3s;
    opacity: 0;
    transform: translateY(20px);
}

.mobile-menu--open .mobile-menu__link {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s ease, transform 0.4s ease, color 0.3s;
}

.mobile-menu--open .mobile-menu__list li:nth-child(1) .mobile-menu__link { transition-delay: 0.1s; }
.mobile-menu--open .mobile-menu__list li:nth-child(2) .mobile-menu__link { transition-delay: 0.15s; }
.mobile-menu--open .mobile-menu__list li:nth-child(3) .mobile-menu__link { transition-delay: 0.2s; }
.mobile-menu--open .mobile-menu__list li:nth-child(4) .mobile-menu__link { transition-delay: 0.25s; }

.mobile-menu__link:hover { color: var(--accent-primary); }

.mobile-menu__phone {
    display: block;
    margin-top: 48px;
    text-align: center;
    font-size: 18px;
    color: var(--accent-primary);
    letter-spacing: 0.05em;
    opacity: 0;
    transform: translateY(20px);
}

.mobile-menu--open .mobile-menu__phone {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;
}

/* ===== HERO ===== */
.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

/* Hero Background */
.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero__bg-image {
    position: absolute;
    inset: 0;
    /* Placeholder: warm dark workshop ambience via gradients.
       Replace with actual photo: background-image: url('images/hero.webp'); background-size: cover; */
    background:
        radial-gradient(ellipse 80% 60% at 75% 45%, rgba(200, 180, 150, 0.12) 0%, transparent 70%),
        radial-gradient(ellipse 40% 50% at 85% 55%, rgba(200, 170, 120, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse 60% 80% at 20% 80%, rgba(26, 26, 26, 1) 0%, transparent 70%),
        linear-gradient(160deg, #1a1a1a 0%, #2a2420 40%, #1e1c1a 70%, #141210 100%);
    filter: contrast(1.05);
}

/* Hero background video — sits above the gradient placeholder so it paints
   over the fallback once it starts, and below the dark overlay so copy
   stays legible. object-fit: cover keeps the frame filled at any aspect. */
.hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    pointer-events: none;
    /* Slight desaturation + gentle warm grade so the video sits in the
       same cinematic register as the rest of the hero, not a loud clip. */
    filter: saturate(0.92) contrast(1.04);
}

/* Targeted vignette — only where text sits (left column, top + bottom
   strips). Right half stays fully transparent so the ring/scene plays
   at full brightness. Three stacked gradients, painted top → bottom in
   CSS source order: bottom-strip first (deepest layer), then top-strip,
   then left-column. Pointer-events: none so it never intercepts clicks. */
.hero__veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.55) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, transparent 18%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 30%, transparent 58%);
    pointer-events: none;
    z-index: 1;
}

/* Subtle film grain */
.hero__bg-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    opacity: 0.5;
    pointer-events: none;
}

/* Hero Content */
.hero__content {
    position: relative;
    z-index: 2;
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 0 48px;
    padding-top: calc(var(--header-height) + 40px);
    padding-bottom: 48px;
    flex: 1;
    display: flex;
    align-items: center;
}

.hero__text {
    max-width: 720px;
}

/* Title */
.hero__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(48px, 5.2vw, 76px);
    line-height: 1.08;
    color: var(--fg-inverse);
    letter-spacing: -0.01em;
    margin-bottom: 24px;
}

.hero__title-line {
    display: block;
}

.hero__title-accent em {
    font-style: italic;
    color: var(--accent-primary);
    /* One-shot gold shimmer — light highlight sweeps across the accent word
       once after the hero page-load stagger finishes. Background-clip: text
       on a moving gradient; after the animation completes the end-state
       keeps the original gold tone. */
    background-image: linear-gradient(
        100deg,
        var(--accent-primary) 0%,
        var(--accent-primary) 42%,
        #fff3d0 50%,
        var(--accent-primary) 58%,
        var(--accent-primary) 100%
    );
    background-size: 200% 100%;
    background-position: 0% 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: heroAccentShine 2.2s cubic-bezier(0.22, 1, 0.36, 1) 1.3s 1 forwards;
    will-change: background-position;
}

@keyframes heroAccentShine {
    from { background-position: 0% 0; }
    to   { background-position: 100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .hero__title-accent em {
        animation: none;
        background: none;
        -webkit-text-fill-color: var(--accent-primary);
    }
}

/* Subtitle (eyebrow) — full accent gold, anchored by a leading editorial
   hairline (24px gold rule before the text, common magazine pattern).
   Subtle dark text-shadow keeps the small caps readable when the video
   sweeps through a brighter frame underneath. */
.hero__subtitle {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-primary);
    margin-bottom: 40px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.hero__subtitle::before {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--accent-primary);
    flex-shrink: 0;
    opacity: 0.85;
}

/* CTA Buttons */
.hero__cta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 14px 28px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.btn--primary {
    background: var(--accent-primary);
    color: var(--surface-inverse);
}

.btn--primary:hover {
    background: var(--accent-hover);
    box-shadow: 0 8px 24px rgba(200, 180, 150, 0.25);
}

.btn--primary:active {
    transform: translateY(0) rotateX(0) rotateY(0) !important;
}

/* Ghost-dark: legacy outline button kept for any future pairing on dark
   sections. The hero CTA pair has migrated to .btn--hero — see below. */
.btn--ghost-dark {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--fg-inverse);
    padding: 13px 27px;
}

.btn--ghost-dark:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.45);
    transform: translateY(-1px);
}

/* ============================================================
   .btn--hero — Telegram + Max pair on the hero
   ============================================================
   Both CTAs share the same silhouette, padding, drop-shadow,
   gold shimmer-sweep, gold arrow indicator, and hover behavior
   — the animation idiom comes from .contacts__connect-* tiles.
   They differ in fill temperature: Telegram (.btn--hero-primary)
   carries a saturated warm-gold body to act as the dominant CTA;
   Max (.btn--hero-secondary) carries a dark-glass body with a
   gold border as the cool partner. Pair reads as "primary +
   alternative" without breaking the editorial palette. */

.btn--hero {
    position: relative;
    overflow: hidden;
    color: var(--fg-inverse);
    padding: 14px 24px;
    gap: 12px;
    /* No backdrop-filter here — on a video bg the blur "pops in" once
       the first frame paints (the filter has nothing to blur until
       then). Body fills below carry enough density to read as solid. */
    transition: border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
    box-shadow: 0 10px 28px -14px rgba(0, 0, 0, 0.55);
}

/* Gold shimmer wipe — left → right on hover. Same 0.9s curve as
   contacts tile so the language is consistent across the site. */
.btn--hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 235, 200, 0.22), transparent);
    transform: translateX(-100%);
    transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
    pointer-events: none;
}

.btn--hero .btn__icon,
.btn--hero .btn__label,
.btn--hero .btn__arrow {
    position: relative;
    z-index: 1;
}

.btn--hero .btn__icon {
    transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.btn--hero .btn__arrow {
    font-family: var(--font-display);
    font-size: 18px;
    margin-left: 4px;
    opacity: 0.85;
    transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.35s ease;
}

.btn--hero:hover::before {
    transform: translateX(100%);
}

.btn--hero:hover .btn__icon {
    transform: translateX(2px);
}

.btn--hero:hover .btn__arrow {
    transform: translateX(6px);
    opacity: 1;
}

/* ----- Primary (Telegram) — saturated warm-gold body ----- */
.btn--hero-primary {
    background:
        linear-gradient(180deg, rgba(232, 207, 162, 0.85) 0%, rgba(200, 180, 150, 0.7) 100%);
    border: 1px solid var(--accent-primary);
    color: #1A1A1A;
    box-shadow:
        0 10px 28px -10px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 245, 220, 0.45);
}

.btn--hero-primary .btn__icon,
.btn--hero-primary .btn__arrow {
    color: #1A1A1A;
}

.btn--hero-primary .btn__arrow { opacity: 0.95; }

.btn--hero-primary:hover {
    background:
        linear-gradient(180deg, rgba(244, 220, 178, 0.95) 0%, rgba(216, 196, 162, 0.85) 100%);
    border-color: #E8CFA2;
    box-shadow:
        0 14px 32px -10px rgba(200, 180, 150, 0.45),
        inset 0 1px 0 rgba(255, 245, 220, 0.6);
}

/* ----- Secondary (Max) — dark-glass body with gold border ----- */
/* Slightly higher base opacity than the previous backdrop-filter
   version (0.78 → 0.58 instead of 0.62 → 0.42) so the body still
   reads as solid without the blur layer compensating. */
.btn--hero-secondary {
    background: linear-gradient(180deg, rgba(20, 16, 12, 0.78) 0%, rgba(20, 16, 12, 0.58) 100%);
    border: 1px solid rgba(200, 180, 150, 0.45);
    color: var(--fg-inverse);
}

.btn--hero-secondary .btn__icon,
.btn--hero-secondary .btn__arrow {
    color: var(--accent-primary);
}

.btn--hero-secondary:hover {
    background: linear-gradient(180deg, rgba(20, 16, 12, 0.88) 0%, rgba(20, 16, 12, 0.68) 100%);
    border-color: var(--accent-primary);
}

.btn__icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn__icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* Hero Facts */
.hero__facts {
    position: relative;
    z-index: 2;
    margin-top: auto;
    /* Standalone strip — top hairline reads as the boundary of an
       editorial caption row beneath the hero, not just a fading edge. */
    background: linear-gradient(180deg, transparent 0%, rgba(200, 180, 150, 0.04) 100%);
    border-top: 1px solid rgba(200, 180, 150, 0.18);
}

.hero__facts-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 20px 48px;
    display: flex;
    align-items: center;
    gap: 0;
}

.hero__fact {
    flex: 1;
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 0 24px;
}

.hero__fact:first-child { padding-left: 0; }
.hero__fact:last-child { padding-right: 0; }

.hero__fact-number {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 500;
    color: var(--accent-primary);
    letter-spacing: -0.01em;
}

.hero__fact-label {
    font-size: 13px;
    font-weight: 400;
    /* Parchment instead of cool grey — reads brighter on the bottom-strip
       veil and sits in the same warm register as the gold numbers. */
    color: rgba(244, 242, 239, 0.62);
    letter-spacing: 0.02em;
}

/* Divider between facts — thin warm hairline. Was rgba(white, 0.1) ×
   24px which read as nothing against the dark strip; now picks up the
   accent gold at low opacity so the row reads as four columns, not a
   blob of words. */
.hero__fact-divider {
    width: 1px;
    height: 28px;
    background: rgba(200, 180, 150, 0.28);
    flex-shrink: 0;
}

/* Scroll Indicator — magazine-spine label (vertical, top-to-bottom) +
   descending gold light-drop on a hairline rail. Pinned to the
   bottom-right corner, the right offset matches the facts strip's
   horizontal padding so the column lines up with the rightmost stat.
   Replaces the previous bottom-center chevron — more editorial, more
   on-brand for a jewelry atelier. */
.hero__scroll {
    position: absolute;
    bottom: 100px;
    right: 48px;
    z-index: 3;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

/* Vertical caps label. writing-mode: vertical-rl rotates the inline
   flow so characters stack top-to-bottom on the right side, exactly
   like a magazine spine. The wide tracking and uppercase keep it
   readable at this orientation. */
.hero__scroll-label {
    writing-mode: vertical-rl;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: var(--accent-primary);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

/* Hairline rail — fades in at top + bottom so it doesn't look pasted
   on the video. The gold dot below rides this line on a loop. */
.hero__scroll-rail {
    position: relative;
    width: 1px;
    height: 44px;
    background: linear-gradient(180deg,
        rgba(200, 180, 150, 0.05) 0%,
        rgba(200, 180, 150, 0.4) 50%,
        rgba(200, 180, 150, 0.05) 100%);
    overflow: visible;
}

/* Gold light-drop — a small filled circle with subtle gold halo that
   travels from the top of the rail to the bottom, fading in and out
   at the endpoints. Replaces the old bouncing chevron with a much
   more elegant continuous gesture. */
.hero__scroll-rail-dot {
    position: absolute;
    left: 50%;
    top: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent-primary);
    box-shadow: 0 0 10px rgba(200, 180, 150, 0.7);
    transform: translate(-50%, -50%);
    animation: scrollRailDescend 2.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes scrollRailDescend {
    0%   { top: 0;    opacity: 0; }
    18%  { opacity: 1; }
    82%  { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* ===== ENTRY ANIMATIONS ===== */
.hero__title-line,
.hero__subtitle,
.hero__cta,
.hero__fact,
.hero__fact-divider {
    opacity: 0;
    transform: translateY(28px);
    animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Scroll-chevron has its own transform (centering) — fade in via opacity only */
.hero__scroll {
    opacity: 0;
    animation: heroScrollFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.3s forwards;
}

@keyframes heroScrollFadeIn {
    to { opacity: 1; }
}

.hero__title-line:nth-child(1) { animation-delay: 0.15s; }
.hero__title-line:nth-child(2) { animation-delay: 0.25s; }
.hero__title-line:nth-child(3) { animation-delay: 0.35s; }
.hero__title-line:nth-child(4) { animation-delay: 0.45s; }
.hero__subtitle { animation-delay: 0.6s; }
.hero__cta { animation-delay: 0.75s; }

.hero__facts-inner > :nth-child(1) { animation-delay: 0.9s; }
.hero__facts-inner > :nth-child(2) { animation-delay: 0.95s; }
.hero__facts-inner > :nth-child(3) { animation-delay: 1.0s; }
.hero__facts-inner > :nth-child(4) { animation-delay: 1.05s; }
.hero__facts-inner > :nth-child(5) { animation-delay: 1.1s; }
.hero__facts-inner > :nth-child(6) { animation-delay: 1.15s; }
.hero__facts-inner > :nth-child(7) { animation-delay: 1.2s; }

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== SERVICES — Editorial Index (TZ §7.1 alternating text/photo) ===== */
.services {
    background: var(--surface-primary);
    padding: 100px 0 80px;
}

.services__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 48px;
}

/* Header */
.services__header {
    text-align: center;
    margin-bottom: 64px;
    padding-bottom: 32px;
    position: relative;
}

.services__eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-primary);
    margin-bottom: 20px;
}

.services__title {
    font-family: var(--font-display);
    font-size: clamp(40px, 4.5vw, 64px);
    font-weight: 400;
    color: var(--fg-primary);
    line-height: 1.08;
    letter-spacing: -0.01em;
}

.services__title em {
    font-style: italic;
    color: var(--accent-primary);
}

.services__rule {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 1px;
    background: var(--accent-primary);
    opacity: 0.5;
}

/* List */
.services__list {
    display: flex;
    flex-direction: column;
    /* Start counter at 1 so first row's ::after reads the NEXT row's number (02). */
    counter-reset: svc 1;
}

/* Row */
.svc-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 96px;
    align-items: center;
    padding: 96px 0;
    position: relative;
    counter-increment: svc;
}

.svc-row:first-child {
    padding-top: 0;
}

.svc-row:last-child {
    padding-bottom: 0;
}

/* Chapter-style italic numeral in the gap between rows.
   Earlier versions showed the NEXT row's numeral (02 under row 01,
   03 under row 02…) as a floating editorial chapter mark. The kicker
   meta strip ("02 — ЛАЗЕР") inside each row already carries the
   index though, so the floating numeral read as visual noise / a
   layout bug. Replaced with a refined editorial divider:
   a thin gold hairline broken by a small gold diamond in the middle.
   Muted enough to whisper, distinctive enough to read as intentional
   ornament rather than utility rule. */
.svc-row:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 50%;
    /* Centered exactly on the row boundary — row 1 padding-bottom 96px
       + row 2 padding-top 96px = symmetric 192px air that this ornament
       divides cleanly. */
    bottom: 0;
    transform: translate(-50%, 50%);
    width: clamp(360px, 36vw, 520px);
    height: 1px;
    /* Single fading gold hairline — ink-on-parchment aesthetic,
       strongest in the middle and dissolving into the cream at both
       edges. No ornament, no gem: the line is the ornament. */
    background: linear-gradient(90deg,
        rgba(159, 127, 70, 0) 0%,
        rgba(159, 127, 70, 0.28) 18%,
        rgba(159, 127, 70, 0.78) 50%,
        rgba(159, 127, 70, 0.28) 82%,
        rgba(159, 127, 70, 0) 100%);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

/* Subtle breath — the gem very gently dims and brightens as if catching
   ambient light. 5s cycle, only under no-motion-preference so we respect
   accessibility defaults. */
@media (prefers-reduced-motion: no-preference) {
    .svc-row:not(:last-child)::after {
        animation: svc-divider-breath 5.5s ease-in-out infinite;
    }
}

@keyframes svc-divider-breath {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.78; }
}

/* Stack rows with descending z-index so each row's ::after divider (sitting
   below the row's own box) paints ABOVE the next row's padding-top area —
   without this, the next row (later in DOM) wins the stacking and hides the
   ornament. Only first-4 rows need it (row 5 has no divider). */
.svc-row:nth-child(1) { z-index: 4; }
.svc-row:nth-child(2) { z-index: 3; }
.svc-row:nth-child(3) { z-index: 2; }
.svc-row:nth-child(4) { z-index: 1; }


/* Alternating layout — image right on even rows */
.svc-row--reverse .svc-row__media {
    order: 2;
}

/* Media column */
.svc-row__media {
    position: relative;
}

.svc-row__image {
    aspect-ratio: 4 / 5;
    background: var(--g, linear-gradient(135deg, #2a2520, #c8b496));
    position: relative;
    overflow: hidden;
    /* Gentle hover zoom — ease-out (not expo) so the curve doesn't snap
       to 95% instantly when the cursor crosses the photo while scrolling.
       Longer duration + smaller scale keeps it subtle. */
    transition: transform 1.2s ease-out;
}

/* Grain + highlight overlay for the placeholder */
.svc-row__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 50% at 70% 30%, rgba(200, 180, 150, 0.18), transparent 60%),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
    background-size: auto, 220px 220px;
    mix-blend-mode: screen;
    pointer-events: none;
}

.svc-row:hover .svc-row__image {
    transform: scale(1.02);
}

/* Compare variant: preserve rectangular frame and suppress hover zoom —
   the drag handle owns the interaction here. */
.svc-row__image--compare {
    transform: none !important;
    cursor: ew-resize;
}
.svc-row__image--compare::after {
    display: none;
}

/* Badge — small editorial pagination label on image corner */
.svc-row__badge {
    position: absolute;
    top: 20px;
    left: 20px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(26, 26, 26, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 6px 10px;
    z-index: 1;
}

/* Body column */
.svc-row__body {
    max-width: 480px;
    position: relative;
}

.svc-row--reverse .svc-row__body {
    margin-left: auto;
}

/* Ghost outlined italic number inside body — removed in favor of the
   chapter numeral that now sits in the gap between rows. The .svc-row__num
   in the meta strip ("01 — Ремонт") still provides per-card index. */
.svc-row__ghost {
    display: none;
}

/* Lift all meaningful content above the ghost */
.svc-row__meta,
.svc-row__title,
.svc-row__desc,
.svc-row__tags,
.svc-row__footer {
    position: relative;
    z-index: 1;
}

.svc-row__meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

.svc-row__num {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 400;
    font-style: italic;
    color: var(--accent-primary);
    letter-spacing: 0.04em;
}

.svc-row__divider {
    width: 32px;
    height: 1px;
    background: var(--accent-primary);
}

.svc-row__kicker {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-secondary);
}

.svc-row__title {
    font-family: var(--font-display);
    font-size: clamp(30px, 3vw, 46px);
    font-weight: 400;
    line-height: 1.12;
    color: var(--fg-primary);
    letter-spacing: -0.015em;
    margin-bottom: 24px;
}

.svc-row__title em {
    font-style: italic;
    font-weight: 500;
    color: var(--accent-primary);
}

.svc-row__desc {
    font-size: 16px;
    line-height: 1.7;
    color: var(--fg-secondary);
    margin-bottom: 28px;
}

.svc-row__tags {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 28px;
    margin-bottom: 40px;
    padding: 22px 0;
    border-top: 1px solid var(--border-hairline-gold);
    border-bottom: 1px solid var(--border-hairline-gold);
}

.svc-row__tags li {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--fg-secondary);
    padding-left: 18px;
    position: relative;
    line-height: 1.35;
}

.svc-row__tags li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 1px;
    background: var(--accent-primary);
}

.svc-row__footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.svc-row__price {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.svc-row__price-label {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-secondary);
    opacity: 0.7;
}

.svc-row__price-value {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 500;
    color: var(--fg-primary);
    line-height: 1;
}

.svc-row__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-primary);
    padding-bottom: 8px;
    /* Underline layering: ::before is the muted base (always visible),
       ::after is the gold bar that wipes in from the left on hover. */
    border-bottom: none;
    position: relative;
    transition: color 0.4s ease, gap 0.45s cubic-bezier(0.65, 0, 0.35, 1);
    white-space: nowrap;
}

/* Base underline — ink at 30% opacity so the link reads as a link at rest */
.svc-row__link::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: currentColor;
    opacity: 0.3;
    transition: opacity 0.35s ease;
}

/* Gold wipe — scales from the left on hover, lands in sync with the arrow */
.svc-row__link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--accent-primary);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}

.svc-row__link:hover {
    color: var(--accent-primary);
    gap: 16px;
}
.svc-row__link:hover::before { opacity: 0; }
.svc-row__link:hover::after  { transform: scaleX(1); }

.svc-row__link span {
    display: inline-block;
    transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}

.svc-row__link:hover span {
    transform: translateX(6px);
}

/* Focus-visible mirrors hover for keyboard users */
.svc-row__link:focus-visible {
    outline: none;
    color: var(--accent-primary);
    gap: 16px;
}
.svc-row__link:focus-visible::before { opacity: 0; }
.svc-row__link:focus-visible::after  { transform: scaleX(1); }
.svc-row__link:focus-visible span    { transform: translateX(6px); }

/* No scroll-reveal on service rows — they show instantly in their final state.
   Any fade/slide here felt like a bug because the rows are tall and the
   chapter numerals in the gap already give the section its own rhythm. */

/* ===== PROCESS — 4-step timeline on parchment ===== */
.process {
    background: var(--surface-primary);
    padding: 88px 0 80px;
    border-top: 1px solid var(--border-hairline-gold);
}

.process__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 48px;
}

.process__header {
    text-align: center;
    margin-bottom: 56px;
    padding-bottom: 32px;
    position: relative;
}

.process__eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-primary);
    margin-bottom: 20px;
}

.process__title {
    font-family: var(--font-display);
    font-size: clamp(36px, 4vw, 56px);
    font-weight: 400;
    color: var(--fg-primary);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.process__title em {
    font-style: italic;
    font-weight: 500;
    color: var(--accent-primary);
}

.process__rule {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 1px;
    background: var(--accent-primary);
    opacity: 0.5;
}

/* Step grid */
.process__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 56px;
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}

.process__step {
    position: relative;
    z-index: 1;
    padding-top: 28px;
}

/* ===== Timeline rail =====
   Horizontal gold rail at the top of the grid; progress fills gold when
   .process gains .is-visible (set by IntersectionObserver in script.js).
   Desktop only — tablet/mobile layouts override these to display: none. */
.process__list::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(200, 180, 150, 0.18);
    z-index: 0;
}

.process__list::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--accent-primary);
    z-index: 1;
    transition: width 1.8s cubic-bezier(0.65, 0, 0.35, 1) 0.3s;
}

.process.is-visible .process__list::after {
    width: 100%;
}

/* Station dot on the rail, one per step, animated in sequence */
.process__step::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent-primary);
    transform: scale(0);
    transform-origin: center;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 2;
}

.process.is-visible .process__step:nth-child(1)::before { transform: scale(1); transition-delay: 0.35s; }
.process.is-visible .process__step:nth-child(2)::before { transform: scale(1); transition-delay: 0.75s; }
.process.is-visible .process__step:nth-child(3)::before { transform: scale(1); transition-delay: 1.15s; }
.process.is-visible .process__step:nth-child(4)::before { transform: scale(1); transition-delay: 1.55s; }

.process__step-num {
    display: block;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(44px, 4vw, 56px);
    line-height: 1;
    color: var(--accent-primary);
    margin-bottom: 24px;
    letter-spacing: -0.02em;
}

.process__step-kicker {
    display: block;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-secondary);
    margin-top: 28px;
    margin-bottom: 12px;
}

.process__step-title {
    font-family: var(--font-display);
    font-size: clamp(20px, 1.7vw, 26px);
    font-weight: 400;
    color: var(--fg-primary);
    line-height: 1.25;
    letter-spacing: -0.005em;
    margin-bottom: 14px;
}

.process__step-title em {
    font-style: italic;
    font-weight: 500;
    color: var(--accent-primary);
}

.process__step-desc {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.65;
    color: var(--fg-secondary);
}

/* Reveal */
.process__step {
    opacity: 0;
    transform: translateY(32px);
}

.process.is-visible .process__step {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.process.is-visible .process__step:nth-child(1) { transition-delay: 0.0s; }
.process.is-visible .process__step:nth-child(2) { transition-delay: 0.1s; }
.process.is-visible .process__step:nth-child(3) { transition-delay: 0.2s; }
.process.is-visible .process__step:nth-child(4) { transition-delay: 0.3s; }

/* ===== CUSTOM ORDER ===== */
.custom {
    position: relative;
    background: var(--surface-inverse);
    padding: 88px 0;
    overflow: hidden;
}

.custom__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 80% at 80% 50%, rgba(200, 180, 150, 0.06) 0%, transparent 70%),
        radial-gradient(ellipse 40% 60% at 10% 80%, rgba(200, 180, 150, 0.03) 0%, transparent 60%);
    pointer-events: none;
}

.custom__inner {
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

/* Text */
.custom__eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-primary);
    margin-bottom: 20px;
}

.custom__title {
    font-family: var(--font-display);
    font-size: clamp(36px, 3.5vw, 56px);
    font-weight: 400;
    color: var(--fg-inverse);
    line-height: 1.15;
    margin-bottom: 24px;
}

.custom__title em {
    font-style: italic;
    color: var(--accent-primary);
}

.custom__desc {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 48px;
    max-width: 500px;
}

/* Journey tagline — editorial teaser, not a process diagram */
.custom__journey {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(18px, 1.5vw, 22px);
    color: var(--accent-primary);
    letter-spacing: 0.01em;
    line-height: 1.6;
    margin-bottom: 44px;
}

.custom__journey span {
    display: inline-block;
    margin: 0 10px;
    color: rgba(200, 180, 150, 0.3);
    font-style: normal;
}

/* CTA */
.custom__cta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.btn--gold {
    background: transparent;
    border: 1px solid rgba(200, 180, 150, 0.4);
    color: var(--accent-primary);
    padding: 14px 28px;
    border-radius: 4px;
}

.btn--gold:hover {
    background: var(--accent-primary);
    color: var(--surface-inverse);
    border-color: var(--accent-primary);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(200, 180, 150, 0.15);
}

/* Solid-gold variant: primary CTA inside .custom__cta (Telegram, as main channel) */
.btn--gold-filled {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--surface-inverse);
}

.btn--gold-filled:hover {
    background: #d8c4a6;
    border-color: #d8c4a6;
    color: var(--surface-inverse);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(200, 180, 150, 0.25);
}

/* Image */
.custom__image {
    position: relative;
}

.custom__image-inner {
    width: 100%;
    aspect-ratio: 4 / 5;
    background-size: cover;
    background-position: center;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 24px 64px rgba(0, 0, 0, 0.15);
}

/* Scroll reveal */
.custom__text,
.custom__image {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.custom__image {
    transition-delay: 0.15s;
}

.custom.is-visible .custom__text,
.custom.is-visible .custom__image {
    opacity: 1;
    transform: translateY(0);
}

/* ===== PORTFOLIO PREVIEW ===== */
.portfolio {
    padding: 88px 0 80px;
    background: var(--surface-primary);
}

.portfolio__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 48px;
}

.portfolio__header {
    position: relative;
    text-align: center;
    margin-bottom: 52px;
    padding-bottom: 32px;
}

.portfolio__eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-primary);
    margin-bottom: 20px;
}

.portfolio__title {
    font-family: var(--font-display);
    font-size: clamp(36px, 4vw, 56px);
    font-weight: 400;
    color: var(--fg-primary);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.portfolio__title em {
    font-style: italic;
    font-weight: 500;
    color: var(--accent-primary);
}

.portfolio__rule {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 1px;
    background: var(--accent-primary);
    opacity: 0.5;
}

/* Grid: uniform 3-column layout, all cards equal */
.portfolio__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 64px;
}

/* Card */
.portfolio__item {
    position: relative;
    display: block;
    overflow: hidden;
    text-decoration: none;
    border: none;
    padding: 0;
    margin: 0;
    background: var(--surface-inverse);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    aspect-ratio: 4 / 5;
}

.portfolio__item--featured {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    aspect-ratio: auto;
}
.portfolio__item--featured .portfolio__item-meta {
    padding: 64px 32px 32px;
}
.portfolio__item--featured .portfolio__item-cat {
    font-size: 11px;
}
.portfolio__item--featured .portfolio__item-title {
    font-size: 26px;
}


.portfolio__item-img {
    position: absolute;
    inset: 0;
    background: var(--g, #1a1a1a);
    background-size: cover;
    background-position: center;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.portfolio__item:hover .portfolio__item-img {
    transform: scale(1.05);
}

/* Deepening shade on hover — same pattern as .pf-item__shade */
.portfolio__item-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 0%,
        transparent 45%,
        rgba(0, 0, 0, 0.3) 75%,
        rgba(0, 0, 0, 0.7) 100%
    );
    opacity: 0.85;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.portfolio__item:hover .portfolio__item-shade {
    opacity: 1;
}
/* Gradient overlay + text at card bottom */
.portfolio__item-meta {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 56px 24px 24px;
    background: linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(0, 0, 0, 0.28) 60%,
        transparent 100%
    );
    transform: translateY(20px);
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.portfolio__item:hover .portfolio__item-meta {
    transform: translateY(0);
}

.portfolio__item-cat {
    display: block;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-primary);
    margin-bottom: 6px;
}

.portfolio__item-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 400;
    color: var(--fg-inverse);
    line-height: 1.25;
    margin-bottom: 10px;
}

.portfolio__item-title em {
    font-style: italic;
    color: var(--accent-primary);
}

.portfolio__item-hint {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    opacity: 0;
    transform: translateY(4px);
    transition:
        opacity 0.35s ease 0.05s,
        transform 0.35s ease 0.05s,
        color 0.25s ease;
}
.portfolio__item:hover .portfolio__item-hint {
    opacity: 1;
    transform: translateY(0);
    color: var(--accent-primary);
}

.portfolio__item:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}


/* CTA */
.portfolio__cta {
    text-align: center;
}

/* Outline button — for light-background sections */
.btn--outline {
    background: transparent;
    border: 1px solid rgba(26, 26, 26, 0.28);
    color: var(--fg-primary);
}

.btn--outline:hover {
    background: var(--fg-primary);
    color: var(--surface-primary);
    border-color: var(--fg-primary);
    transform: translateY(-1px);
}

/* Scroll reveal */
.portfolio__item,
.portfolio__cta {
    opacity: 0;
    transform: translateY(24px);
}

.portfolio.is-visible .portfolio__item {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.portfolio.is-visible .portfolio__item:nth-child(1) { transition-delay: 0s; }
.portfolio.is-visible .portfolio__item:nth-child(2) { transition-delay: 0.08s; }
.portfolio.is-visible .portfolio__item:nth-child(3) { transition-delay: 0.16s; }
.portfolio.is-visible .portfolio__item:nth-child(4) { transition-delay: 0.22s; }
.portfolio.is-visible .portfolio__item:nth-child(5) { transition-delay: 0.28s; }

.portfolio.is-visible .portfolio__cta {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease 0.42s,
                transform 0.6s ease 0.42s;
}

/* When .portfolio__cta lives outside .portfolio (e.g. izgotovlenie examples) */
.examples .portfolio__cta {
    opacity: 1;
    transform: none;
}

/* ===== CONTACTS ===== */
.contacts {
    padding: 88px 0;
    background: var(--surface-inverse);
}

.contacts__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 48px;
}

.contacts__header {
    position: relative;
    text-align: center;
    margin-bottom: 72px;
    padding-bottom: 40px;
}

.contacts__eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-primary);
    margin-bottom: 20px;
}

.contacts__title {
    font-family: var(--font-display);
    font-size: clamp(36px, 4vw, 56px);
    font-weight: 400;
    color: var(--fg-inverse);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.contacts__title em {
    font-style: italic;
    font-weight: 500;
    color: var(--accent-primary);
}

.contacts__rule {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 1px;
    background: var(--accent-primary);
    opacity: 0.5;
}

/* Cards grid */
.contacts__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}

/* Card base */
.contact-card {
    display: flex;
    flex-direction: column;
    padding: 32px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    transition: border-color 0.3s ease;
}

.contact-card:hover {
    border-color: rgba(255, 255, 255, 0.18);
}

/* Featured card — ателье */
.contact-card--featured {
    border-color: rgba(200, 180, 150, 0.35);
    position: relative;
}

.contact-card--featured::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
}

.contact-card--featured:hover {
    border-color: rgba(200, 180, 150, 0.55);
}

/* Card top */
.contact-card__top {
    margin-bottom: 28px;
}

.contact-card__type {
    display: block;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 12px;
}

.contact-card--featured .contact-card__type {
    color: var(--accent-primary);
}

.contact-card__name {
    font-family: var(--font-display);
    font-size: clamp(20px, 1.8vw, 26px);
    font-weight: 400;
    color: var(--fg-inverse);
    line-height: 1.2;
}

.contact-card__name em {
    font-style: italic;
    color: var(--accent-primary);
}

/* Card body */
.contact-card__body {
    flex: 1;
    margin-bottom: 28px;
}

.contact-card__address {
    font-style: normal;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 20px;
}

.contact-card__note {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
    margin-top: 4px;
}

.contact-card__phone {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 500;
    color: var(--accent-primary);
    letter-spacing: 0.01em;
    text-decoration: none;
    margin-bottom: 20px;
    transition: opacity 0.25s ease;
}

.contact-card__phone:hover { opacity: 0.75; }

.contact-card__hours {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.contact-card__hours-row {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-body);
    font-size: 12px;
}

.contact-card__hours-row span:first-child {
    color: rgba(255, 255, 255, 0.35);
}

.contact-card__hours-row span:last-child {
    color: rgba(255, 255, 255, 0.6);
}

/* Card actions */
.contact-card__actions {
    display: flex;
    gap: 10px;
}

/* Ghost small button — for card actions on dark bg */
.btn--ghost-sm {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 4px;
    text-decoration: none;
    transition: border-color 0.25s ease, color 0.25s ease;
}

.btn--ghost-sm:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

/* Yandex map */
.contacts__map {
    width: 100%;
    overflow: hidden;
    margin-bottom: 80px;
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.contacts__map iframe {
    display: block;
    width: 100%;
    height: 400px;
}

.contacts__map-legend {
    margin: 0;
    padding: 14px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 13px;
    letter-spacing: 0.02em;
    color: rgba(244, 242, 239, 0.6);
}

.contacts__map-legend span {
    color: var(--accent-primary);
    font-family: var(--font-mono);
}

/* Callback form */
.contacts__form-wrap {
    max-width: 620px;
    margin: 0 auto;
}

.contacts__form-header {
    text-align: center;
    margin-bottom: 48px;
}

.contacts__form-kicker {
    display: block;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-primary);
    margin-bottom: 16px;
}

.contacts__form-title {
    font-family: var(--font-display);
    font-size: clamp(26px, 2.5vw, 36px);
    font-weight: 400;
    color: var(--fg-inverse);
    line-height: 1.2;
}

.contacts__form-title em {
    font-style: italic;
    color: var(--accent-primary);
}

/* Direct contact panel (no form) — phone + messengers + hours.
   Replaces the previous callback form; Formspree is not needed.
   Keeps .contacts__form-wrap as the root class so scroll-reveal rules
   downstream still target it. */
.contacts__connect {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Primary phone tile — dominant CTA, gold-edged, fills width */
.contacts__connect-phone {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;
    padding: 22px 26px;
    background: linear-gradient(180deg, rgba(200, 180, 150, 0.08) 0%, rgba(200, 180, 150, 0.03) 100%);
    border: 1px solid rgba(200, 180, 150, 0.35);
    color: var(--fg-inverse);
    text-decoration: none;
    transition: border-color 0.35s ease, background 0.35s ease, transform 0.35s ease;
    position: relative;
    overflow: hidden;
}

.contacts__connect-phone::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(200, 180, 150, 0.12), transparent);
    transform: translateX(-100%);
    transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
    pointer-events: none;
}

.contacts__connect-phone:hover {
    border-color: var(--accent-primary);
    background: linear-gradient(180deg, rgba(200, 180, 150, 0.14) 0%, rgba(200, 180, 150, 0.06) 100%);
}

.contacts__connect-phone:hover::before {
    transform: translateX(100%);
}

.contacts__connect-phone-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(200, 180, 150, 0.4);
    color: var(--accent-primary);
    flex-shrink: 0;
    transition: background 0.35s ease, border-color 0.35s ease;
}

.contacts__connect-phone:hover .contacts__connect-phone-icon {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #1A1A1A;
}

.contacts__connect-phone-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.contacts__connect-phone-label {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.contacts__connect-phone-number {
    font-family: var(--font-display);
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 400;
    color: var(--fg-inverse);
    line-height: 1.1;
    white-space: nowrap;
}

.contacts__connect-phone-arrow {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--accent-primary);
    transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.contacts__connect-phone:hover .contacts__connect-phone-arrow {
    transform: translateX(6px);
}

/* Messenger channels row — two equal tiles */
.contacts__connect-channels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.contacts__connect-channel {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--fg-inverse);
    text-decoration: none;
    transition: border-color 0.35s ease, background 0.35s ease;
    position: relative;
    overflow: hidden;
}

/* Gold shimmer sweep — same idiom as the phone tile */
.contacts__connect-channel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(200, 180, 150, 0.1), transparent);
    transform: translateX(-100%);
    transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
    pointer-events: none;
}

.contacts__connect-channel:hover {
    border-color: var(--accent-primary);
    background: linear-gradient(180deg, rgba(200, 180, 150, 0.1) 0%, rgba(200, 180, 150, 0.04) 100%);
}

.contacts__connect-channel:hover::before {
    transform: translateX(100%);
}

.contacts__connect-channel-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-primary);
    border: 1px solid rgba(200, 180, 150, 0.3);
    flex-shrink: 0;
    transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}

.contacts__connect-channel:hover .contacts__connect-channel-icon {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #1A1A1A;
}

.contacts__connect-channel-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.contacts__connect-channel-name {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--fg-inverse);
    letter-spacing: 0.01em;
}

.contacts__connect-channel-hint {
    font-family: var(--font-body);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.01em;
}

.contacts__connect-channel-arrow {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--accent-primary);
    opacity: 0.7;
    transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.35s ease;
}

.contacts__connect-channel:hover .contacts__connect-channel-arrow {
    transform: translateX(6px);
    opacity: 1;
}

.contacts__connect-hours {
    margin: 6px 0 0;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    text-align: center;
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

@media (max-width: 560px) {
    .contacts__connect-channels {
        grid-template-columns: 1fr;
    }
    .contacts__connect-phone {
        grid-template-columns: auto 1fr;
        padding: 18px 20px;
        gap: 16px;
    }
    .contacts__connect-phone-arrow,
    .contacts__connect-channel-arrow {
        display: none;
    }
    .contacts__connect-channel {
        grid-template-columns: auto 1fr;
    }
}

/* Scroll reveal */
.contacts__cards,
.contacts__map,
.contacts__form-wrap {
    opacity: 0;
    transform: translateY(32px);
}

.contacts.is-visible .contacts__cards {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.contacts.is-visible .contacts__map {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s,
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

.contacts.is-visible .contacts__form-wrap {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s,
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}

/* ===== FOOTER ===== */
.footer {
    background: #111111;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.footer__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 48px;
}

.footer__main {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 64px;
    padding: 72px 0 64px;
}

/* Brand */
.footer__logo {
    display: inline-block;
    margin-bottom: 16px;
}

.footer__tagline {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 32px;
    max-width: 260px;
}

.footer__messengers {
    display: flex;
    gap: 24px;
}

.footer__messenger-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    transition: color 0.25s ease;
}

.footer__messenger-link:hover {
    color: var(--accent-primary);
}

/* Nav & Contact columns */
.footer__col-label {
    display: block;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.22);
    margin-bottom: 20px;
}

.footer__nav-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer__nav-list a {
    font-family: var(--font-body);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color 0.25s ease;
}

.footer__nav-list a:hover {
    color: var(--fg-inverse);
}

.footer__phone {
    display: block;
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 500;
    color: var(--accent-primary);
    text-decoration: none;
    margin-bottom: 12px;
    letter-spacing: 0.01em;
    transition: opacity 0.25s ease;
}

.footer__phone:hover { opacity: 0.7; }

.footer__address-brief {
    font-family: var(--font-body);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.3);
    line-height: 1.5;
}

/* Bottom bar */
.footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding: 24px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.footer__copy {
    font-family: var(--font-body);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.02em;
}

.footer__privacy {
    font-family: var(--font-body);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    transition: color 0.25s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding-bottom: 1px;
}

.footer__privacy:hover { color: rgba(255, 255, 255, 0.7); }

/* ===== FLOATING MESSENGER BUTTONS =====
   Desktop: collapsed icon-only circles by default, expand to labeled pill on hover.
   Hidden while hero is in view (JS adds .float-msgs--visible) and when footer is in view
   (JS adds .float-msgs--hidden) so they don't duplicate the footer messenger links. */
.float-msgs {
    position: fixed;
    right: 20px;
    bottom: 24px;
    z-index: 80;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    /* Hidden until hero scrolls out of view — JS adds .float-msgs--visible */
    opacity: 0;
    pointer-events: none;
    transform: translateX(8px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.float-msgs--visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

/* Footer in viewport — fade out to avoid duplicating footer messengers */
.float-msgs--hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(16px) !important;
}

.float-msgs__btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px 11px 14px;
    background: rgba(20, 20, 20, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(200, 180, 150, 0.22);
    border-radius: 32px;
    color: rgba(255, 255, 255, 0.72);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.25s ease, color 0.25s ease,
                transform 0.25s ease, background 0.25s ease;
}

.float-msgs__btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: rgba(26, 26, 26, 0.98);
    transform: translateX(-4px);
}

.float-msgs__icon {
    flex-shrink: 0;
    transition: color 0.25s ease;
}

/* ===================================================
   PRICES PAGE  (/tseny/)
   =================================================== */

/* --- Header variant on dark page-head ---
   Active nav link gets gold underline to mark current page. */
.nav__link--active {
    color: var(--fg-inverse);
}
.nav__link--active::after {
    transform: scaleX(1);
    transform-origin: left center;
}

/* --- Breadcrumbs --- */
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 32px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.breadcrumbs__link {
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.25s ease;
}
.breadcrumbs__link:hover {
    color: var(--accent-primary);
}
.breadcrumbs__sep {
    color: rgba(255, 255, 255, 0.25);
}
.breadcrumbs__current {
    color: var(--accent-primary);
}

/* --- Page head (dark banner for sub-pages) --- */
.page-head {
    position: relative;
    background: var(--surface-inverse);
    padding: calc(var(--header-height) + 88px) 0 96px;
    overflow: hidden;
}

.page-head::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 120% 80% at 80% 20%, rgba(200, 180, 150, 0.10), transparent 60%),
        radial-gradient(ellipse 80% 60% at 20% 100%, rgba(200, 180, 150, 0.06), transparent 70%);
    pointer-events: none;
}

.page-head__inner {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 48px;
}

.page-head__eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-primary);
    margin-bottom: 24px;
}

.page-head__title {
    font-family: var(--font-display);
    font-size: clamp(44px, 5.5vw, 76px);
    font-weight: 400;
    color: var(--fg-inverse);
    line-height: 1.04;
    letter-spacing: -0.015em;
    margin-bottom: 28px;
    max-width: 900px;
}

.page-head__title em {
    font-style: italic;
    font-weight: 500;
    color: var(--accent-primary);
}

.page-head__subtitle {
    max-width: 560px;
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.68);
    margin-bottom: 40px;
}

.page-head__rule {
    display: block;
    width: 56px;
    height: 1px;
    background: var(--accent-primary);
}

/* ===================================================
   PAGE-HEAD — IZGOTOVLENIE variant (editorial atelier)
   =================================================== */
.page-head--izg {
    padding: calc(var(--header-height) + 96px) 0 120px;
}

.page-head--izg .page-head__inner {
    width: 100%;
    max-width: 1280px;
    position: relative;
    z-index: 2;
}

.page-head--izg .page-head__title {
    max-width: 720px;
}

.page-head--izg .page-head__subtitle {
    max-width: 540px;
    margin-bottom: 28px;
}

.page-head__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0 0 44px;
}

.page-head__actions .btn {
    min-height: 48px;
}

/* Specs row — monospace technical readout */
.page-head__specs {
    list-style: none;
    margin: 0;
    padding: 32px 0 0;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0;
    border-top: 1px solid rgba(200, 180, 150, 0.32);
    max-width: 760px;
}

.head-spec {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 48px 4px 0;
    margin-right: 48px;
    border-right: 1px solid rgba(200, 180, 150, 0.22);
}

.head-spec:last-child {
    border-right: none;
    margin-right: 0;
    padding-right: 0;
}

.head-spec__label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(200, 180, 150, 0.78);
}

.head-spec__val {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 32px;
    line-height: 1;
    color: var(--fg-inverse);
    letter-spacing: -0.015em;
}

/* Compact variant for 4-fact rows (obr, tseny) — tighter spacing so
   all items stay on one desktop line within the 760px max-width. */
.page-head__specs--compact .head-spec {
    padding: 4px 28px 4px 0;
    margin-right: 28px;
}
.page-head__specs--compact .head-spec__val {
    font-size: 22px;
}

/* ===================================================
   QUICK PRICES — top-asked services on /tseny/
   Editorial stat-row with 4 clickable cards.
   =================================================== */
.quick-prices {
    background: var(--surface-primary);
    padding: 56px 0 0;
}

.quick-prices__inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 48px;
}

.quick-prices__eyebrow {
    display: block;
    font-family: var(--font-mono, var(--font-body));
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent-on-light);
    margin-bottom: 28px;
}

.quick-prices__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border-hairline-gold);
    border: 1px solid var(--border-hairline-gold);
}

.quick-prices__grid > li {
    display: flex;
}

.quick-price {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    padding: 28px 26px 24px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: background 0.35s ease, transform 0.35s ease;
    position: relative;
    overflow: hidden;
}

.quick-price::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(200, 180, 150, 0.16), transparent);
    transform: translateX(-100%);
    transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
    pointer-events: none;
}

.quick-price:hover {
    background: #fffbf2;
}

.quick-price:hover::before {
    transform: translateX(100%);
}

.quick-price__label {
    font-family: var(--font-mono, var(--font-body));
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fg-secondary);
    position: relative;
    z-index: 1;
}

.quick-price__big {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(34px, 3.6vw, 46px);
    line-height: 1;
    color: var(--fg-primary);
    letter-spacing: -0.025em;
    white-space: nowrap;
    position: relative;
    z-index: 1;
}

.quick-price__cur {
    font-size: 0.55em;
    font-style: italic;
    color: var(--accent-on-light);
    margin-left: 2px;
}

.quick-price__action {
    font-family: var(--font-mono, var(--font-body));
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-on-light);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: gap 0.35s cubic-bezier(0.65, 0, 0.35, 1);
    position: relative;
    z-index: 1;
}

.quick-price:hover .quick-price__action {
    gap: 14px;
}

/* --- Prices section wrapper --- */
.prices {
    padding: 72px 0 120px;
    background: var(--surface-primary);
}

.prices__inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 48px;
}

/* --- Search above tabs --- */
.prices__search-wrap {
    margin-bottom: 32px;
}

.prices__search-label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: #fff;
    border: 1px solid var(--border-hairline-gold);
    transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.prices__search-label:focus-within {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(200, 180, 150, 0.15);
}

.prices__search-icon {
    color: var(--accent-primary);
    flex-shrink: 0;
}

.prices__search {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--fg-primary);
    padding: 4px 0;
}

/* Clear button — hidden until query present */
.prices__search-clear {
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(74, 74, 74, 0.08);
    border-radius: 50%;
    color: var(--fg-secondary);
    cursor: pointer;
    flex-shrink: 0;
    font-size: 14px;
    line-height: 1;
    transition: background 0.2s ease, color 0.2s ease;
    padding: 0;
}
.prices__search-clear:hover {
    background: rgba(200, 180, 150, 0.18);
    color: var(--fg-primary);
}
.prices__search-label--has-query .prices__search-clear {
    display: flex;
}

.prices__search::placeholder {
    color: rgba(74, 74, 74, 0.55);
}

.prices__search::-webkit-search-decoration,
.prices__search::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

.prices__search-count {
    font-family: var(--font-mono, var(--font-body));
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-secondary);
    flex-shrink: 0;
}

/* Highlight target row briefly when arriving via quick-price link */
.price-row--highlight {
    animation: rowHighlight 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes rowHighlight {
    0% { background: rgba(200, 180, 150, 0.28); }
    100% { background: transparent; }
}

/* Search filter — when active, hide non-matching rows + their empty groups */
.price-row[hidden] { display: none; }
.price-group[hidden] { display: none; }

/* ===================================================
   DIAGNOSTIC CALLOUT — free workshop diagnosis (tseny)
   =================================================== */
.diagnostic {
    background: #fff;
    padding: 96px 0;
    border-top: 1px solid var(--border-hairline-gold);
    border-bottom: 1px solid var(--border-hairline-gold);
}

.diagnostic__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 48px;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 80px;
    align-items: center;
}

.diagnostic__photo {
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, #f4f0e8 0%, #e8dfcf 60%, #d8c9af 100%);
    border: 1px solid var(--border-hairline-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.diagnostic__photo::before {
    content: '';
    position: absolute;
    inset: 16px;
    border: 1px solid rgba(200, 180, 150, 0.28);
    pointer-events: none;
}

.diagnostic__photo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    color: rgba(60, 45, 25, 0.45);
}

.diagnostic__photo-caption {
    font-family: var(--font-mono, var(--font-body));
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.diagnostic__eyebrow {
    display: block;
    font-family: var(--font-mono, var(--font-body));
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent-on-light);
    margin-bottom: 22px;
}

.diagnostic__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(32px, 3.8vw, 48px);
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--fg-primary);
    margin-bottom: 22px;
}

.diagnostic__title em {
    font-style: italic;
    font-weight: 500;
    color: var(--accent-primary);
}

.diagnostic__desc {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--fg-secondary);
    margin-bottom: 28px;
    max-width: 540px;
}

.diagnostic__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.diagnostic__list li {
    position: relative;
    padding-left: 22px;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    color: var(--fg-primary);
}

.diagnostic__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 12px;
    height: 1px;
    background: var(--accent-primary);
}

/* --- Tabs --- */
.prices__tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 64px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.prices__tabs::-webkit-scrollbar { display: none; }

.prices__tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    background: transparent;
    border: 1.5px solid rgba(200, 180, 150, 0.55);
    border-radius: 100px;
    cursor: pointer;
    color: var(--fg-secondary);
    font-family: var(--font-body);
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    white-space: nowrap;
}

@media (hover: hover) {
    .prices__tab:hover {
        border-color: var(--accent-primary);
        color: var(--fg-primary);
        background: rgba(200, 180, 150, 0.06);
    }
    .prices__tab:hover .prices__tab-num {
        opacity: 1;
    }
}

.prices__tab--active {
    background: var(--surface-inverse);
    border-color: var(--surface-inverse);
    color: var(--fg-inverse);
    box-shadow: 0 4px 20px rgba(26, 26, 26, 0.15);
}

.prices__tab--active .prices__tab-num {
    opacity: 1;
    color: var(--accent-primary);
}
.prices__tab--active .prices__tab-label {
    color: var(--fg-inverse);
}

@media (hover: hover) {
    .prices__tab--active:hover {
        background: var(--surface-inverse);
        border-color: var(--surface-inverse);
        color: var(--fg-inverse);
    }
}

.prices__tab:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 3px;
}

.prices__tab-num {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 14px;
    color: var(--accent-on-light);
    opacity: 0.7;
    transition: opacity 0.25s ease;
}

.prices__tab-label {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-primary);
}

/* --- Panels --- */
.prices__panel {
    display: none;
}

.prices__panel--active {
    display: block;
    animation: priceFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* When search is active, all panels with matches are shown at once
   so cross-tab results appear together. The data attribute lives on
   the .prices__panels container and is toggled by JS. */
.prices__panels[data-filter-active] .prices__panel {
    display: block;
    animation: none;
}

@keyframes priceFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Group (e.g., "Замки и крепления") --- */
.price-group {
    margin-bottom: 72px;
}

.price-group:last-child {
    margin-bottom: 0;
}

.price-group__title {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 500;
    color: var(--accent-on-light);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(200, 180, 150, 0.32);
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
}

.price-group__count {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.14em;
    color: rgba(168, 133, 84, 0.55);
    text-transform: lowercase;
}

.price-list {
    display: flex;
    flex-direction: column;
}

/* --- Price row (item + description + value) --- */
.price-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 48px;
    padding: 26px 0;
    border-bottom: 1px solid var(--border-hairline-gold);
    transition: background 0.2s ease;
}

.price-row:last-child {
    border-bottom: none;
}

.price-row:hover {
    background: rgba(200, 180, 150, 0.05);
}

.price-row__info {
    flex: 1;
    min-width: 0;
}

.price-row__name {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 400;
    color: var(--fg-primary);
    line-height: 1.25;
    margin-bottom: 6px;
}

.price-row__desc {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    color: var(--fg-secondary);
    max-width: 560px;
}

.price-row__value {
    flex-shrink: 0;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 28px;
    font-weight: 400;
    color: var(--accent-on-light);
    white-space: nowrap;
    line-height: 1.3;
    letter-spacing: -0.015em;
}

.price-row--free .price-row__value {
    font-style: italic;
    font-size: 22px;
}

/* Popular row — gold dot before name + soft gradient tint + caption */
.price-row--popular {
    position: relative;
    background: linear-gradient(90deg, rgba(168, 133, 84, 0.05) 0%, rgba(168, 133, 84, 0.015) 50%, transparent 100%);
}

.price-row--popular:hover {
    background: linear-gradient(90deg, rgba(168, 133, 84, 0.08) 0%, rgba(168, 133, 84, 0.03) 60%, transparent 100%);
}

.price-row--popular .price-row__name::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-on-light);
    margin-right: 12px;
    margin-bottom: 4px;
    vertical-align: middle;
    box-shadow: 0 0 0 3px rgba(168, 133, 84, 0.14);
}

/* Self-explanatory caption: makes the marker meaning obvious */
.price-row--popular .price-row__info::after {
    content: '— часто заказывают';
    display: inline-block;
    margin-top: 10px;
    font-family: var(--font-mono, var(--font-body));
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-on-light);
    opacity: 0.78;
}

/* --- Info note (inside a panel) --- */
.prices__note {
    margin-top: 56px;
    padding: 24px 28px;
    background: #ECE8DF;
    border-left: 2px solid var(--accent-primary);
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.prices__note[hidden] {
    display: none;
}

.prices__note-label {
    flex-shrink: 0;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent-hover);
    margin-top: 2px;
}

.prices__note p {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.6;
    color: var(--fg-primary);
    margin: 0;
}

/* --- Empty search state --- */
.prices__empty {
    text-align: center;
    padding: 64px 24px;
}
.prices__empty-icon {
    color: var(--accent-primary);
    opacity: 0.5;
    margin-bottom: 20px;
}
.prices__empty-text {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 400;
    color: var(--fg-primary);
    margin: 0 0 8px;
    line-height: 1.4;
}
.prices__empty-hint {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--fg-secondary);
    margin: 0 0 28px;
    line-height: 1.5;
}
.prices__empty-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.prices__empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.prices__empty-btn--primary {
    background: var(--accent-primary);
    color: #fff;
    border: 1px solid var(--accent-primary);
}
.prices__empty-btn--primary:hover {
    background: var(--accent-hover, #b8a07e);
}
.prices__empty-btn--ghost {
    background: transparent;
    color: var(--fg-secondary);
    border: 1px solid var(--border-hairline-gold);
}
.prices__empty-btn--ghost:hover {
    border-color: var(--accent-primary);
    color: var(--fg-primary);
}

/* Also hide disclaimer while filter is active */
.prices__panels[data-filter-active] ~ .prices__disclaimer {
    display: none;
}

/* --- Disclaimer (bottom of prices section) --- */
.prices__disclaimer {
    margin-top: 72px;
    padding-top: 32px;
    border-top: 1px solid var(--border-hairline-gold);
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.65;
    color: var(--fg-secondary);
    max-width: 720px;
}

/* --- CTA block at bottom --- */
.prices-cta {
    position: relative;
    padding: 120px 0;
    background: var(--surface-inverse);
    overflow: hidden;
}

.prices-cta__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 100% 70% at 50% 100%, rgba(200, 180, 150, 0.12), transparent 70%),
        radial-gradient(ellipse 80% 50% at 15% 0%, rgba(200, 180, 150, 0.08), transparent 65%);
    pointer-events: none;
}

.prices-cta__inner {
    position: relative;
    max-width: 820px;
    margin: 0 auto;
    padding: 0 48px;
    text-align: center;
}

.prices-cta__eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-primary);
    margin-bottom: 24px;
}

.prices-cta__title {
    font-family: var(--font-display);
    font-size: clamp(36px, 4.5vw, 56px);
    font-weight: 400;
    color: var(--fg-inverse);
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin-bottom: 24px;
}

.prices-cta__title em {
    font-style: italic;
    font-weight: 500;
    color: var(--accent-primary);
}

.prices-cta__desc {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    max-width: 560px;
    margin: 0 auto 40px;
}

.prices-cta__buttons {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ===================================================
   PORTFOLIO PAGE  (/portfolio/)
   Editorial asymmetric grid + cinematic reveals
   =================================================== */

/* --- Page-head variant: animated ornament --- */
.page-head--portfolio .page-head__inner {
    position: relative;
}

.page-head__ornament {
    position: absolute;
    top: 50%;
    right: 48px;
    transform: translateY(-50%);
    color: var(--accent-primary);
    opacity: 0;
    animation: pfOrnamentIn 2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
    pointer-events: none;
}

.page-head__ornament svg {
    animation: pfOrnamentSpin 80s linear infinite;
}

@keyframes pfOrnamentIn {
    from { opacity: 0; transform: translateY(-50%) scale(0.7); }
    to { opacity: 1; transform: translateY(-50%) scale(1); }
}

@keyframes pfOrnamentSpin {
    to { transform: rotate(360deg); }
}

/* --- Portfolio section wrapper --- */
.pf {
    padding: 88px 0 120px;
    background: var(--surface-primary);
}

.pf__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 48px;
}

/* --- Bar: counter + filters --- */
.pf__bar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 56px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--border-hairline-gold);
    position: relative;
}

.pf__bar::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 56px;
    height: 1px;
    background: var(--accent-primary);
}

/* Counter */
.pf__counter {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-family: var(--font-body);
    color: var(--fg-secondary);
    font-size: 13px;
    letter-spacing: 0.04em;
}

.pf__counter-num {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 48px;
    color: var(--fg-primary);
    line-height: 1;
    letter-spacing: -0.02em;
    transition: color 0.3s ease;
}

.pf__counter-label {
    padding-bottom: 6px;
}

/* Filters */
.pf__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.pf-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    background: transparent;
    border: 1.5px solid rgba(200, 180, 150, 0.55);
    border-radius: 100px;
    cursor: pointer;
    font-family: var(--font-body);
    color: var(--fg-primary);
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    white-space: nowrap;
}

.pf-filter__label {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pf-filter__count {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 14px;
    color: var(--accent-on-light);
    opacity: 0.7;
    transition: opacity 0.25s ease;
}

@media (hover: hover) {
    .pf-filter:hover {
        border-color: var(--accent-primary);
        color: var(--fg-primary);
        background: rgba(200, 180, 150, 0.06);
    }
    .pf-filter:hover .pf-filter__count {
        opacity: 1;
    }
}

.pf-filter--active {
    background: var(--surface-inverse);
    border-color: var(--surface-inverse);
    color: var(--fg-inverse);
    box-shadow: 0 4px 20px rgba(26, 26, 26, 0.15);
}
.pf-filter--active .pf-filter__label {
    color: var(--fg-inverse);
}
.pf-filter--active .pf-filter__count {
    color: var(--accent-primary);
    opacity: 1;
}

@media (hover: hover) {
    .pf-filter--active:hover {
        background: var(--surface-inverse);
        border-color: var(--surface-inverse);
        color: var(--fg-inverse);
    }
}

.pf-filter:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 3px;
}

/* --- GRID (Editorial Plate — strict 3-col, equal cards, desktop redesign) ---
   v71 — moved from asymmetric to a calm 3×4 grid. Image sits on top in a
   fixed 4:5 portrait window; caption lives BELOW the image on the cream
   page bg, so the work title never has to compete with photography. */
.pf-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 56px 28px;
    grid-auto-flow: row;
}

/* --- Item card --- */
.pf-item {
    position: relative;
    display: flex;
    flex-direction: column;
    border: none;
    padding: 0;
    cursor: pointer;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;

    /* Reveal start state */
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Stagger delays — chained for a wavy reveal */
.pf-item:nth-child(1)  { transition-delay: 0.00s, 0.00s; }
.pf-item:nth-child(2)  { transition-delay: 0.06s, 0.06s; }
.pf-item:nth-child(3)  { transition-delay: 0.12s, 0.12s; }
.pf-item:nth-child(4)  { transition-delay: 0.18s, 0.18s; }
.pf-item:nth-child(5)  { transition-delay: 0.24s, 0.24s; }
.pf-item:nth-child(6)  { transition-delay: 0.30s, 0.30s; }
.pf-item:nth-child(7)  { transition-delay: 0.36s, 0.36s; }
.pf-item:nth-child(8)  { transition-delay: 0.42s, 0.42s; }
.pf-item:nth-child(9)  { transition-delay: 0.48s, 0.48s; }
.pf-item:nth-child(10) { transition-delay: 0.54s, 0.54s; }
.pf-item:nth-child(11) { transition-delay: 0.60s, 0.60s; }
.pf-item:nth-child(12) { transition-delay: 0.66s, 0.66s; }

.pf-item.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Filter: instant hide — keeps reveal stagger intact. */
.pf-item.is-filtered-out {
    display: none;
}

/* --- Media window (4:5 portrait — fixed for every card) --- */
.pf-item__img {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--g, var(--surface-inverse));
}

/* Inner zoom layer — separates the "frame" from the "image" so the image
   scales on hover without overflowing the frame, and so the corner number
   and tag (siblings) don't ride along with the zoom. */
.pf-item__img-zoom {
    position: absolute;
    inset: 0;
    background: var(--g, var(--surface-inverse));
    background-size: cover;
    background-position: center;
    transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.pf-item:hover .pf-item__img-zoom {
    transform: scale(1.05);
    will-change: transform;
}

/* Subtle highlight + grain on the image (matches site treatment) */
.pf-item__img-zoom::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 50% at 70% 28%, rgba(200, 180, 150, 0.16), transparent 60%),
        radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, 0.10), transparent 55%),
        radial-gradient(80% 50% at 50% 100%, rgba(0, 0, 0, 0.14), transparent 60%),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
    background-size: auto, auto, auto, 200px 200px;
    pointer-events: none;
}

/* Corner number — over the image (top-left) */
.pf-item__num {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 3;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.02em;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
    transition: color 0.3s ease;
}

/* Corner tag (e.g., "До / после") — top-right.
   Sits on a solid white chip so it never disappears against the photo. */
.pf-item__tag {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-primary);
    background: rgba(255, 255, 255, 0.94);
    padding: 5px 9px 4px;
    border-radius: 2px;
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
}

/* --- Caption — lives BELOW the image on the cream page bg, so the title
   never has to fight the photograph for legibility. --- */
.pf-item__caption {
    padding: 18px 2px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pf-item__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-on-light);
}

.pf-item__cat {
    color: var(--accent-on-light);
}

.pf-item__meta-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.6;
    flex-shrink: 0;
}

.pf-item__year {
    color: var(--fg-muted, #8A847B);
    letter-spacing: 0.14em;
}

.pf-item__rule {
    display: block;
    width: 28px;
    height: 1px;
    background: var(--accent-on-light);
    opacity: 0.7;
    transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.pf-item:hover .pf-item__rule {
    width: 56px;
}

.pf-item__title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 400;
    color: var(--fg-primary);
    line-height: 1.18;
    letter-spacing: -0.01em;
    margin: 0;
}

.pf-item__title em {
    font-style: italic;
    font-weight: 500;
    color: var(--accent-on-light);
}

.pf-item__hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-secondary);
    margin-top: 4px;
    opacity: 0.55;
    transition: opacity 0.3s ease, color 0.3s ease, gap 0.3s ease;
}
.pf-item__hint > span {
    transition: transform 0.3s ease;
}
.pf-item:hover .pf-item__hint {
    opacity: 1;
    color: var(--accent-on-light);
    gap: 14px;
}
.pf-item:hover .pf-item__hint > span {
    transform: translateX(2px);
}

/* Focus visible — accessible */
.pf-item:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 4px;
}

/* --- Empty state --- */
.pf__empty {
    padding: 80px 20px;
    text-align: center;
    font-family: var(--font-display);
    font-size: 20px;
    font-style: italic;
    color: var(--fg-secondary);
    border: 1px solid var(--border-hairline-gold);
    max-width: 640px;
    margin: 0 auto;
}

/* --- PORTFOLIO CTA (distinct from prices-cta) --- */
.pf-cta {
    position: relative;
    padding: 120px 0;
    background: var(--surface-inverse);
    overflow: hidden;
}

.pf-cta__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 50% at 90% 40%, rgba(200, 180, 150, 0.15), transparent 65%),
        radial-gradient(ellipse 60% 40% at 10% 80%, rgba(200, 180, 150, 0.08), transparent 70%);
    pointer-events: none;
}

.pf-cta__bg::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 120px;
    background: linear-gradient(180deg, transparent, var(--accent-primary), transparent);
    transform: translate(-50%, -50%) rotate(45deg);
    opacity: 0.15;
}

.pf-cta__inner {
    position: relative;
    max-width: 860px;
    margin: 0 auto;
    padding: 0 48px;
    text-align: center;
}

.pf-cta__eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-primary);
    margin-bottom: 24px;
}

.pf-cta__title {
    font-family: var(--font-display);
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 400;
    color: var(--fg-inverse);
    line-height: 1.08;
    letter-spacing: -0.015em;
    margin-bottom: 28px;
}

.pf-cta__title em {
    font-style: italic;
    font-weight: 500;
    color: var(--accent-primary);
}

.pf-cta__desc {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    max-width: 560px;
    margin: 0 auto 40px;
}

.pf-cta__buttons {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ===================================================
   BACK TO HOME (sub-pages: /tseny/, /portfolio/)
   Minimal editorial band above footer — gives the user
   an obvious return path to the landing page.
   =================================================== */
.back-home {
    background: var(--surface-primary);
    border-top: 1px solid var(--border-hairline-gold);
    padding: 48px 24px;
    text-align: center;
}

.back-home__link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 400;
    color: var(--fg-primary);
    text-decoration: none;
    letter-spacing: -0.005em;
    transition: color 0.25s ease, gap 0.25s ease;
}

.back-home__link em {
    font-style: italic;
    color: var(--accent-primary);
}

.back-home__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(26, 26, 26, 0.28);
    border-radius: 50%;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--fg-primary);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.25s ease,
                border-color 0.25s ease,
                color 0.25s ease;
}

.back-home__link:hover {
    gap: 18px;
}

.back-home__link:hover .back-home__arrow {
    transform: translateX(-4px);
    background: var(--fg-primary);
    border-color: var(--fg-primary);
    color: var(--surface-primary);
}

/* ===================================================
   COMPARE — reusable before/after slider component
   Used inline on services section (home) and inside
   lightbox on portfolio. Two gradient/image layers +
   draggable handle that clips the "after" layer.
   =================================================== */
.compare {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    cursor: ew-resize;
}

.compare__before,
.compare__after {
    position: absolute;
    inset: 0;
    background: var(--g, #1a1a1a);
    background-size: cover;
    background-position: center;
}

.compare__before {
    background: var(--g-before, #2a2520);
}

.compare__after {
    clip-path: inset(0 50% 0 0);
}

.compare__after::after,
.compare__before::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 50% at 70% 30%, rgba(200, 180, 150, 0.18), transparent 60%),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
    background-size: auto, 220px 220px;
    mix-blend-mode: screen;
    pointer-events: none;
}

.compare__label {
    position: absolute;
    top: 18px;
    z-index: 4;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    padding: 5px 10px;
    background: rgba(26, 26, 26, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.compare__label--before {
    right: 18px;
}

.compare__label--after {
    left: 18px;
    color: var(--accent-primary);
}

.compare__handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: rgba(255, 255, 255, 0.8);
    transform: translateX(-50%);
    z-index: 5;
    cursor: ew-resize;
    touch-action: none;
}

.compare__handle-line {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(200, 180, 150, 0.1) 0%,
        rgba(200, 180, 150, 0.9) 50%,
        rgba(200, 180, 150, 0.1) 100%
    );
}

.compare__handle-grip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent-primary);
    color: var(--surface-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.compare:hover .compare__handle-grip,
.compare__handle--active .compare__handle-grip {
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

.compare__handle:focus-visible {
    outline: none;
}
.compare__handle:focus-visible .compare__handle-grip {
    outline: 2px solid var(--accent-primary);
    outline-offset: 4px;
}

/* Smooth mode: animate clip-path for mobile tap-to-toggle + auto-demo */
.compare--smooth .compare__after,
.compare--smooth .compare__handle {
    transition: clip-path 0.6s cubic-bezier(0.65, 0, 0.35, 1),
                left 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Mobile hint pill — hidden by default, revealed on mobile */
.compare__hint {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    display: none;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.88);
    background: rgba(20, 20, 20, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(200, 180, 150, 0.3);
    border-radius: 20px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    white-space: nowrap;
}

.compare__hint::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-primary);
    box-shadow: 0 0 0 0 rgba(200, 180, 150, 0.6);
    animation: compare-hint-pulse 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes compare-hint-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(200, 180, 150, 0.55); }
    70% { box-shadow: 0 0 0 8px rgba(200, 180, 150, 0); }
}

.compare--interacted .compare__hint {
    opacity: 0 !important;
}

/* ===================================================
   LIGHTBOX (shared — portfolio & future pages)
   =================================================== */
.lb {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease, visibility 0s 0.4s;
}

.lb--open {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transition: opacity 0.4s ease;
}

.lb__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    cursor: pointer;
}

.lb__close,
.lb__nav {
    position: absolute;
    z-index: 3;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(200, 180, 150, 0.22);
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.lb__close {
    top: 28px;
    right: 28px;
    border-radius: 50%;
}

.lb__close:hover,
.lb__nav:hover {
    background: rgba(200, 180, 150, 0.14);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.lb__nav {
    top: 50%;
    transform: translateY(-50%);
    border-radius: 0;
}
.lb__nav--prev { left: 28px; }
.lb__nav--next { right: 28px; }

.lb__nav--prev:hover { transform: translateY(-50%) translateX(-4px); }
.lb__nav--next:hover { transform: translateY(-50%) translateX(4px); }

.lb__nav:focus-visible,
.lb__close:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* Stage */
.lb__stage {
    position: relative;
    z-index: 2;
    width: calc(100vw - 200px);
    max-width: 1280px;
    max-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    transform: scale(0.96);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.lb--open .lb__stage {
    transform: scale(1);
}

.lb__figure {
    display: grid;
    grid-template-columns: auto 320px;
    justify-content: center;
    gap: 40px;
    margin: 0;
    height: calc(100vh - 120px);
    max-height: 800px;
}

.lb__media {
    position: relative;
    overflow: hidden;
    background: #0a0a0a;
    border: 1px solid rgba(200, 180, 150, 0.18);
    aspect-ratio: 4 / 5;
    height: 100%;
}

.lb__image {
    position: absolute;
    inset: 0;
    background: var(--g, #1a1a1a);
    background-size: cover;
    background-position: center;
    transition: opacity 0.4s ease;
}

/* Before/after compare — stacked */
.lb__compare {
    position: absolute;
    inset: 0;
    user-select: none;
    -webkit-user-select: none;
}

.lb__compare-before,
.lb__compare-after {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.lb__compare-before {
    background: var(--g-before, #2a2a2a);
}

.lb__compare-after {
    background: var(--g, #c8b496);
    clip-path: inset(0 50% 0 0);
}

.lb__compare-label {
    position: absolute;
    top: 24px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--fg-inverse);
    padding: 6px 12px;
    background: rgba(10, 10, 10, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(200, 180, 150, 0.28);
}

/* Labels sit on the visible half of each layer at default 50% split.
   "До" is on the before-layer, which is visible on the RIGHT at default split.
   "После" is on the after-layer, which is visible on the LEFT at default split. */
.lb__compare-label--before {
    right: 24px;
}

.lb__compare-label--after {
    left: 24px;
    color: var(--accent-primary);
}

/* Draggable handle with gold vertical line and center grip */
.lb__compare-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 44px;
    transform: translateX(-50%);
    cursor: ew-resize;
    touch-action: none;
}

.lb__compare-handle-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: var(--accent-primary);
    transform: translateX(-50%);
    box-shadow: 0 0 16px rgba(200, 180, 150, 0.6);
}

.lb__compare-handle-grip {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
    background: #0a0a0a;
    border: 1.5px solid var(--accent-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-primary);
    transition: transform 0.25s ease, background 0.25s ease;
}

.lb__compare-handle:hover .lb__compare-handle-grip,
.lb__compare-handle--active .lb__compare-handle-grip {
    transform: translate(-50%, -50%) scale(1.1);
    background: var(--accent-primary);
    color: #0a0a0a;
}

.lb__compare-handle:focus-visible {
    outline: none;
}
.lb__compare-handle:focus-visible .lb__compare-handle-grip {
    box-shadow: 0 0 0 3px rgba(200, 180, 150, 0.4);
}

/* Caption panel on the right */
.lb__caption {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 32px 8px;
    color: var(--fg-inverse);
    opacity: 0;
    transform: translateX(12px);
    transition:
        opacity 0.5s ease 0.15s,
        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

.lb--open .lb__caption {
    opacity: 1;
    transform: translateX(0);
}

.lb__cat {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-primary);
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(200, 180, 150, 0.25);
    margin-bottom: 24px;
    align-self: flex-start;
}

.lb__title {
    font-family: var(--font-display);
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.01em;
    margin-bottom: 20px;
}

.lb__title em {
    font-style: italic;
    color: var(--accent-primary);
}

.lb__desc {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 32px;
}

.lb__counter {
    font-family: var(--font-display);
    font-size: 14px;
    font-style: italic;
    color: rgba(255, 255, 255, 0.48);
    letter-spacing: 0.04em;
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.lb__counter-sep {
    margin: 0 6px;
    color: rgba(255, 255, 255, 0.3);
}

#lbCounterCurrent {
    color: var(--accent-primary);
    font-style: italic;
    font-size: 24px;
}

/* ===== RESPONSIVE ===== */

/* Tablet */
@media (max-width: 1024px) {
    .header__inner {
        padding: 0 32px;
    }

    .hero__content {
        padding: 0 32px;
        padding-top: calc(var(--header-height) + 32px);
    }

    .hero__facts-inner {
        padding: 16px 32px;
    }

    .hero__scroll { display: none; }

    .hero__title {
        font-size: clamp(42px, 5vw, 64px);
    }

    .services { padding: 100px 0 80px; }
    .services__inner { padding: 0 32px; }
    .services__header { margin-bottom: 72px; }

    .svc-row {
        gap: 56px;
        padding: 72px 0;
    }

    .svc-row__body { max-width: none; }
    .svc-row__title { font-size: clamp(28px, 4vw, 40px); }

    .process { padding: 96px 0; }
    .process__inner { padding: 0 32px; }
    .process__header { margin-bottom: 64px; }

    .process__list {
        grid-template-columns: repeat(2, 1fr);
        gap: 56px 40px;
    }

    /* On tablet the border-top is the separator; hide the horizontal timeline rail */
    .process__list::before,
    .process__list::after { display: none; }

    .process__step {
        padding-top: 24px;
        border-top: 1px solid rgba(200, 180, 150, 0.4);
    }

    .process__step::before { display: none; }

    .custom { padding: 80px 0; }
    .custom__inner { padding: 0 32px; gap: 40px; }

    /* Footer */
    .footer__inner { padding: 0 32px; }
    .footer__main { grid-template-columns: 1fr 1fr; gap: 40px; padding: 56px 0 48px; }
    .footer__brand { grid-column: 1 / 3; }

    /* Contacts */
    .contacts { padding: 96px 0; }
    .contacts__inner { padding: 0 32px; }
    .contacts__header { margin-bottom: 56px; }

    .contacts__cards {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 40px;
    }

    .contact-card {
        padding: 28px;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0 32px;
    }

    .contact-card__top { width: 100%; margin-bottom: 20px; }
    .contact-card__body { flex: 1; min-width: 200px; margin-bottom: 0; }
    .contact-card__actions { align-self: flex-end; }

    .contacts__map { margin-bottom: 56px; }

    /* Portfolio */
    .portfolio { padding: 96px 0; }
    .portfolio__inner { padding: 0 32px; }
    .portfolio__header { margin-bottom: 56px; }

    .portfolio__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 48px;
    }
    .portfolio__item--featured {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
    }

    /* --- Prices page --- */
    .page-head { padding: calc(var(--header-height) + 64px) 0 72px; }
    .page-head__inner { padding: 0 32px; }
    .page-head__title { font-size: clamp(40px, 6vw, 60px); }

    .prices { padding: 72px 0 96px; }
    .prices__inner { padding: 0 32px; }

    .prices__tab {
        padding: 16px 22px;
    }

    .prices-cta { padding: 96px 0; }
    .prices-cta__inner { padding: 0 32px; }

    /* --- Portfolio page (sub-page) --- */
    .pf { padding: 56px 0 96px; }
    .pf__inner { padding: 0 32px; }

    .pf__bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 40px;
        padding-bottom: 24px;
    }

    .pf__filters {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }

    /* Tablet: drop to 2-col, keep the same caption-below-image structure. */
    .pf-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 44px 20px;
    }

    .page-head--portfolio .page-head__ornament { display: none; }

    .pf-cta { padding: 96px 0; }
    .pf-cta__inner { padding: 0 32px; }

    /* Lightbox tablet */
    .lb__figure {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .lb__stage { padding: 32px; }
    .lb__media { min-height: 50vh; }
    .lb__nav--prev { left: 16px; }
    .lb__nav--next { right: 16px; }
}

/* Mobile */
@media (max-width: 768px) {
    :root {
        --header-height: 64px;
    }

    .header__inner {
        padding: 0 20px;
    }

    .nav { display: none; }

    /* On mobile: phone lives only in hamburger menu — header stays clean (logo + burger) */
    .header__phone { display: none; }

    .burger { display: flex; }

    /* Hide hero video on mobile to save ~2.7MB on cellular + battery on
       autoplay. Gradient fallback (.hero__bg-image) paints the hero.
       TODO: serve a separate lighter mobile cut of the video (~500KB,
       720×540, lower bitrate) when one's available, via <source media>. */
    .hero__video { display: none; }

    .hero__content {
        padding: 0 20px;
        padding-top: calc(var(--header-height) + 32px);
        padding-bottom: 40px;
        align-items: flex-start;
    }

    /* Mobile: drop 100vh so content sits right under header, no dead space */
    .hero {
        min-height: auto;
    }

    .hero__title {
        font-size: clamp(36px, 10vw, 52px);
        margin-bottom: 16px;
    }

    .hero__subtitle {
        font-size: 12px;
        margin-bottom: 32px;
    }

    .hero__cta {
        flex-direction: column;
        gap: 12px;
    }

    .btn {
        width: 100%;
        justify-content: center;
        padding: 16px 24px;
        font-size: 15px;
    }

    /* Facts: 2x2 grid on mobile */
    .hero__facts-inner {
        padding: 16px 20px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px 24px;
    }

    .hero__fact-divider { display: none; }

    .hero__fact {
        padding: 0;
        gap: 6px;
    }

    .hero__fact-number {
        font-size: 18px;
    }

    .hero__fact-label {
        font-size: 12px;
    }

    .hero__scroll { display: none; }

    .services { padding: 72px 0 56px; }
    .services__inner { padding: 0 20px; }
    .services__header { margin-bottom: 48px; padding-bottom: 28px; }

    /* On mobile each service becomes a weightless floating card.
       Rationale: the desktop "editorial river" (one long flow with chapter
       numerals in the gaps) works at desktop width, but on a 375px screen
       the texts of adjacent services bleed into each other and feel like
       one sheet. Cards give the eye a clear per-service container: white
       tile, hairline gold border, soft shadow, generous air between. */
    .svc-row {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0;
        background: #ffffff;
        border: 1px solid rgba(200, 180, 150, 0.14);
        border-radius: 16px;
        overflow: hidden;
        box-shadow:
            0 1px 4px rgba(42, 37, 32, 0.03),
            0 12px 28px rgba(42, 37, 32, 0.045);
    }

    .svc-row + .svc-row {
        margin-top: 28px;
    }

    /* Engraved gem divider lives in the gap between rows on desktop only.
       On mobile the card borders + padding already provide the visual break,
       so drop the ornament. Per-card "02 — ЛАЗЕР" eyebrow still labels each row. */
    .svc-row:not(:last-child)::after {
        display: none;
    }

    /* On mobile: always image first, regardless of reverse */
    .svc-row--reverse .svc-row__media {
        order: 0;
    }

    .svc-row--reverse .svc-row__body {
        margin-left: 0;
    }

    .svc-row__image {
        aspect-ratio: 4 / 3;
        /* Image is flush to card top; corners get clipped by card's
           overflow:hidden + border-radius, so the photo tile matches the
           card outline without needing its own radius. */
    }

    /* Content below the photo breathes inside the card */
    .svc-row__body {
        padding: 24px 20px 26px;
    }

    .svc-row__title {
        font-size: clamp(26px, 7vw, 34px);
        margin-bottom: 16px;
    }

    .svc-row__desc {
        font-size: 15px;
        margin-bottom: 20px;
    }

    .svc-row__tags {
        margin-bottom: 28px;
        padding: 16px 0;
        gap: 10px 20px;
    }

    .svc-row__tags li {
        font-size: 11px;
        padding-left: 14px;
    }

    .svc-row__tags li::before {
        width: 6px;
    }

    /* Ghost number too large for mobile — shrink + push up so it doesn't overlap the "01 — РЕМОНТ" label */
    .svc-row__ghost {
        top: -74px;
        left: -6px;
        font-size: 88px;
        -webkit-text-stroke-width: 0.5px;
        opacity: 0.9;
    }

    .svc-row__footer {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .svc-row__price-value { font-size: 22px; }
    .svc-row__badge { top: 12px; left: 12px; font-size: 10px; padding: 5px 8px; }

    /* Process — simple vertical stack; the big italic step number is the marker */
    .process { padding: 72px 0; }
    .process__inner { padding: 0 20px; }
    .process__header { margin-bottom: 48px; padding-bottom: 28px; }

    .process__list {
        grid-template-columns: 1fr;
        gap: 40px;
        padding-left: 0;
        position: relative;
    }

    /* No rail, no dots on mobile — the 01/02/03/04 italic numbers are marker enough */
    .process__list::before,
    .process__list::after { display: none; }
    .process__step::before { display: none; }
    .process__step::after { display: none; }

    .process__step {
        padding-top: 28px;
        border-top: 1px solid rgba(200, 180, 150, 0.35);
    }

    .process__step:first-child {
        padding-top: 0;
        border-top: none;
    }

    .process__step-num {
        font-size: 40px;
        margin-bottom: 12px;
    }

    .process__step-kicker {
        margin-top: 8px;
        margin-bottom: 8px;
    }

    .process__step-title {
        font-size: clamp(20px, 5.5vw, 24px);
        margin-bottom: 10px;
    }

    .custom { padding: 64px 0; }
    .custom__inner {
        padding: 0 20px;
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .custom__image { order: -1; }

    .custom__image-inner {
        aspect-ratio: 3 / 2;
        border-radius: 20px;
        overflow: hidden;
    }

    .custom__desc { margin-bottom: 32px; }

    .custom__journey {
        font-size: 17px;
        margin-bottom: 32px;
    }

    .custom__cta {
        flex-direction: column;
        gap: 12px;
    }

    .custom__cta .btn {
        width: 100%;
        justify-content: center;
    }

    /* Floating messengers — mobile: full-width bottom bar */
    body { padding-bottom: 64px; }

    .float-msgs {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        flex-direction: row;
        gap: 0;
        background: rgba(18, 18, 18, 0.97);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid rgba(200, 180, 150, 0.18);
        border-radius: 0;
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }

    .float-msgs__btn {
        flex: 1;
        justify-content: center;
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 14px 12px;
        padding-bottom: calc(14px + env(safe-area-inset-bottom));
        color: rgba(255, 255, 255, 0.72);
        font-size: 13px;
        transform: none !important;
    }

    .float-msgs__btn:hover {
        background: rgba(200, 180, 150, 0.08);
        border: none;
        transform: none !important;
    }

    .float-msgs__btn--tg {
        border-right: 1px solid rgba(255, 255, 255, 0.07);
    }

    /* Mobile: widget is a bottom bar, can't get out of way — no hide-on-footer */
    .float-msgs--hidden {
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
    }

    /* Footer */
    .footer__inner { padding: 0 20px; }
    .footer__main { grid-template-columns: 1fr; gap: 32px; padding: 48px 0 40px; }
    .footer__brand { grid-column: auto; }
    .footer__tagline { max-width: none; margin-bottom: 24px; }
    .footer__bottom { flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px 0; }

    /* Contacts */
    .contacts { padding: 72px 0; }
    .contacts__inner { padding: 0 20px; }
    .contacts__header { margin-bottom: 40px; padding-bottom: 28px; }

    .contacts__cards { margin-bottom: 32px; }

    .contact-card {
        flex-direction: column;
        padding: 24px;
    }

    .contact-card__body { margin-bottom: 24px; }
    .contact-card__actions { gap: 8px; }

    .contacts__map iframe { height: 280px; }
    .contacts__map { margin-bottom: 48px; }

    .contacts__form-wrap { max-width: 100%; }

    /* Portfolio */
    .portfolio { padding: 72px 0; }
    .portfolio__inner { padding: 0 20px; }
    .portfolio__header { margin-bottom: 40px; padding-bottom: 28px; }

    .portfolio__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        margin-bottom: 40px;
    }
    .portfolio__item--featured {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
    }

    /* On mobile hover-reveal doesn't exist — show meta always, hide hint */
    .portfolio__item-meta {
        padding: 40px 14px 14px;
        transform: none;
    }

    .portfolio__item-title {
        font-size: 16px;
    }

    .portfolio__item-hint { display: none; }    .portfolio__cta .btn {
        width: 100%;
        justify-content: center;
    }

    /* --- Prices page mobile --- */
    .page-head { padding: calc(var(--header-height) + 48px) 0 56px; }
    .page-head__inner { padding: 0 20px; }
    .page-head__eyebrow { margin-bottom: 16px; }
    .page-head__title { font-size: clamp(36px, 9vw, 48px); margin-bottom: 20px; }
    .page-head__subtitle { font-size: 15px; margin-bottom: 28px; }
    .breadcrumbs { margin-bottom: 24px; font-size: 11px; }

    .prices { padding: 56px 0 72px; }
    .prices__inner { padding: 0 20px; }

    .prices__tabs {
        margin-bottom: 40px;
        padding-right: 20px;
    }
    .prices__tab {
        padding: 8px 16px;
        gap: 5px;
    }
    .prices__tab-num { font-size: 11px; }
    .prices__tab-label { font-size: 12px; letter-spacing: 0.06em; }

    .price-group { margin-bottom: 48px; }
    .price-group__title {
        font-size: 12px;
        margin-bottom: 20px;
        letter-spacing: 0.2em;
    }

    .price-row__name { font-size: 18px; }
    .price-row__desc { font-size: 13px; }
    .price-row__value { font-size: 20px; }
    .price-row--free .price-row__value { font-size: 16px; }

    .prices__note {
        flex-direction: column;
        gap: 12px;
        margin-top: 40px;
        padding: 20px;
    }

    .prices__disclaimer {
        margin-top: 48px;
        padding-top: 24px;
        font-size: 12px;
    }

    /* CTA */
    .prices-cta { padding: 72px 0; }
    .prices-cta__inner { padding: 0 20px; }
    .prices-cta__eyebrow { margin-bottom: 16px; }
    .prices-cta__desc { font-size: 15px; margin-bottom: 32px; }
    .prices-cta__buttons { flex-direction: column; gap: 12px; }
    .prices-cta__buttons .btn { width: 100%; justify-content: center; }

    /* --- Portfolio page mobile --- */
    .pf { padding: 40px 0 72px; }
    .pf__inner { padding: 0 10px; }

    .pf__bar {
        gap: 18px;
        margin-bottom: 32px;
        padding-bottom: 20px;
    }

    .pf__counter-num { font-size: 40px; }
    .pf__counter-label { font-size: 12px; }

    .pf-filter { padding: 8px 14px; font-size: 12px; }

    /* Mobile: single column, smaller caption typography. */
    .pf-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* On mobile, caption sits comfortably below at full width — no need to
       compress it. Just dial back the type and the corner adornments. */
    .pf-item__caption { padding: 14px 2px 0; gap: 10px; }
    .pf-item__num { font-size: 11px; top: 12px; left: 12px; }
    .pf-item__tag { top: 12px; right: 12px; font-size: 9px; padding: 4px 8px; }
    .pf-item__meta { font-size: 10px; letter-spacing: 0.14em; gap: 8px; }
    .pf-item__title { font-size: 20px; }
    .pf-item__hint { font-size: 10px; opacity: 1; }

    .pf-cta { padding: 72px 0; }
    .pf-cta__inner { padding: 0 20px; }
    .pf-cta__buttons { flex-direction: column; gap: 12px; }
    .pf-cta__buttons .btn { width: 100%; justify-content: center; }

    /* Lightbox mobile */
    .lb__close { top: 16px; right: 16px; width: 40px; height: 40px; }
    .lb__nav { width: 40px; height: 40px; }
    .lb__nav--prev { left: 8px; }
    .lb__nav--next { right: 8px; }
    .lb__stage { padding: 20px; max-height: 100vh; }
    .lb__figure { gap: 16px; }
    .lb__media { min-height: 45vh; }
    .lb__caption { padding: 16px 0; }
    .lb__title { font-size: 22px; }
    .lb__desc { font-size: 14px; }
    .lb__compare-label { top: 12px; font-size: 9px; padding: 4px 8px; }
    .lb__compare-label--before { left: 12px; }
    .lb__compare-label--after { right: 12px; }

    /* Back to home — mobile */
    .back-home { padding: 36px 20px; }
    .back-home__link { font-size: 17px; gap: 12px; }
    .back-home__arrow { width: 32px; height: 32px; font-size: 14px; }

    /* Compare slider — mobile: tap-to-toggle, hide drag handle */
    .compare {
        cursor: pointer;
    }
    .compare__label { top: 12px; font-size: 9px; padding: 4px 8px; letter-spacing: 0.14em; }
    .compare__label--before { right: 12px; }
    .compare__label--after { left: 12px; }
    .compare__handle {
        display: none;
    }
    .compare__hint {
        display: inline-flex;
        opacity: 1;
    }
}

/* Small mobile */
@media (max-width: 374px) {
    .hero__title {
        font-size: 32px;
    }

    .hero__content {
        padding-bottom: 120px;
    }
}

/* ===================================================
   LEGAL PAGE (Privacy policy prose)
   Editorial long-read layout — narrow measure,
   Newsreader H2s, quiet hierarchy.
   =================================================== */
.legal {
    background: var(--surface-primary);
    padding: 96px 0 120px;
}

.legal__inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 48px;
}

.legal__meta {
    font-family: var(--font-body);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-secondary);
    padding-bottom: 24px;
    margin-bottom: 48px;
    border-bottom: 1px solid var(--border-hairline-gold);
}

.legal__prose {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--fg-primary);
}

.legal__prose h2 {
    font-family: var(--font-display);
    font-size: clamp(24px, 2.2vw, 30px);
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 56px 0 18px;
    color: var(--fg-primary);
}

.legal__prose h2:first-child {
    margin-top: 0;
}

.legal__prose p,
.legal__prose ul {
    margin: 0 0 18px;
}

.legal__prose ul {
    padding-left: 22px;
    list-style: none;
}

.legal__prose ul li {
    position: relative;
    padding-left: 16px;
    margin-bottom: 8px;
}

.legal__prose ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.75em;
    width: 6px;
    height: 1px;
    background: var(--accent-primary);
}

.legal__prose a {
    color: var(--fg-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-primary);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.legal__prose a:hover {
    color: var(--accent-primary);
}

.legal__prose strong {
    font-weight: 600;
    color: var(--fg-primary);
}

/* Footer privacy link — active state for the current page */
.footer__privacy--active {
    color: var(--accent-primary) !important;
}

/* ===================================================
   LEGAL PAGE — responsive
   =================================================== */
@media (max-width: 768px) {
    .legal {
        padding: 64px 0 80px;
    }

    .legal__inner {
        padding: 0 24px;
    }

    .legal__prose {
        font-size: 15px;
    }

    .legal__prose h2 {
        margin: 44px 0 14px;
    }
}

/* ===================================================
   SHARED SECTION HEADER (reusable eyebrow + title)
   Used by many service-page modules below.
   =================================================== */
.proc-full,
.materials,
.terms,
.examples,
.why-custom,
.ring-styles,
.ring-calc,
.pair-essentials,
.reviews,
.faq {
    padding: 96px 0 96px;
    background: var(--surface-primary);
}

.examples {
    text-align: center;
}

/* Section headers share this skeleton */
.proc-full__header,
.materials__header,
.terms__header,
.why-custom__header,
.ring-styles__header,
.ring-calc__header,
.faq__header {
    max-width: 760px;
    margin: 0 auto 64px;
    padding: 0 48px;
    text-align: center;
}

.proc-full__inner,
.materials__inner,
.terms__inner,
.examples__inner,
.why-custom__inner,
.ring-styles__inner,
.ring-calc__inner,
.pair-essentials__inner,
.reviews__inner,
.faq__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 48px;
}

/* Eyebrow (section kicker) — on cream surfaces */
.proc-full__eyebrow,
.materials__eyebrow,
.terms__eyebrow,
.examples__eyebrow,
.why-custom__eyebrow,
.ring-styles__eyebrow,
.ring-calc__eyebrow,
.pair-essentials__eyebrow,
.reviews__eyebrow,
.faq__eyebrow,
.bridge__eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-on-light);
    margin-bottom: 20px;
}

/* Eyebrow on dark surfaces — keep the lighter gold */
.reforge__eyebrow,
.engraving__eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-primary);
    margin-bottom: 20px;
}

/* H2 title shared */
.proc-full__title,
.materials__title,
.terms__title,
.examples__title,
.why-custom__title,
.ring-styles__title,
.ring-calc__title,
.reforge__title,
.engraving__title,
.pair-essentials__title,
.reviews__title,
.faq__title,
.bridge__title {
    font-family: var(--font-display);
    font-size: clamp(32px, 4.2vw, 56px);
    font-weight: 400;
    color: var(--fg-primary);
    line-height: 1.08;
    letter-spacing: -0.015em;
    margin-bottom: 18px;
}

.proc-full__title em,
.materials__title em,
.terms__title em,
.examples__title em,
.why-custom__title em,
.ring-styles__title em,
.ring-calc__title em,
.reforge__title em,
.engraving__title em,
.pair-essentials__title em,
.reviews__title em,
.faq__title em,
.bridge__title em {
    font-style: italic;
    font-weight: 500;
    color: var(--accent-primary);
}

/* Section descriptions */
.proc-full__desc,
.why-custom__desc,
.ring-styles__desc,
.ring-calc__desc,
.examples__desc {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.6;
    color: var(--fg-secondary);
    max-width: 620px;
    margin: 0 auto;
}

/* ===================================================
   PROCESS — full (6 steps grid)
   =================================================== */
.proc-full__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border-hairline-gold);
    border: 1px solid var(--border-hairline-gold);
}

.proc-full__grid--5 {
    grid-template-columns: repeat(5, 1fr);
}

.proc-step {
    background: var(--surface-primary);
    padding: 40px 32px 44px;
    position: relative;
    transition: background 0.3s ease;
}

.proc-step:hover {
    background: #faf8f5;
}

.proc-step__num {
    display: block;
    font-family: var(--font-display);
    font-size: 14px;
    font-style: italic;
    color: var(--accent-primary);
    letter-spacing: 0.12em;
    margin-bottom: 16px;
}

.proc-step__title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 400;
    color: var(--fg-primary);
    line-height: 1.2;
    margin-bottom: 12px;
}

.proc-step__desc {
    font-family: var(--font-body);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--fg-secondary);
    margin-bottom: 14px;
}
/* ===================================================
   PROC TIMELINE — editorial 3-column grid (izgotovlenie)
   3 cols × 2 rows, open layout without heavy borders.
   =================================================== */
.proc-timeline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    background: transparent;
    border: none;
    border-top: 1px solid var(--border-hairline-gold);
    list-style: none;
    margin: 0;
    padding: 0;
}

.proc-step-v {
    display: flex;
    flex-direction: column;
    padding: 36px 32px 40px;
    background: transparent;
    position: relative;
    border-bottom: 1px solid var(--border-hairline-gold);
}

/* Vertical hairline separators between columns */
.proc-step-v:not(:nth-child(3n+1))::before {
    content: '';
    position: absolute;
    top: 36px;
    left: 0;
    width: 1px;
    height: calc(100% - 72px);
    background: var(--border-hairline-gold);
}

.proc-step-v__col-num {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 20px;
}

.proc-step-v__dash {
    flex-shrink: 0;
    display: block;
    width: 20px;
    height: 1px;
    background: var(--accent-primary);
    transform: scaleX(1);
}

.proc-step-v__num {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(36px, 3.2vw, 44px);
    line-height: 0.9;
    color: var(--accent-on-light);
    letter-spacing: -0.03em;
    display: block;
}

.proc-step-v__body {
    padding-top: 0;
}

.proc-step-v__meta {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-on-light);
    margin-bottom: 10px;
    margin-top: 0;
    padding: 0;
    border: none;
}

.proc-step-v__title {
    font-family: var(--font-display);
    font-size: clamp(20px, 1.8vw, 24px);
    font-weight: 400;
    color: var(--fg-primary);
    line-height: 1.2;
    margin-bottom: 8px;
}

.proc-step-v__desc {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.55;
    color: var(--fg-secondary);
    margin: 0;
}

.materials__note {
    margin: 40px auto 0;
    max-width: 720px;
    text-align: center;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--fg-secondary);
}

/* ===================================================
   METAL STRIP — compact horizontal spec list (izgotovlenie)
   Replaces the older .metal-medals card grid.
   =================================================== */
.metal-strip {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border-hairline-gold);
    border: 1px solid var(--border-hairline-gold);
    box-shadow: 0 18px 50px rgba(60, 45, 25, 0.04);
}

.metal-line {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 28px 24px 30px;
    min-height: 138px;
    background: var(--surface-primary);
    transition: background 0.3s ease, transform 0.3s ease;
    position: relative;
}

.metal-line:hover {
    background: #fffdf8;
    transform: translateY(-2px);
}

.metal-line--featured {
    background: #fbf6ed;
}

.metal-line--featured::before {
    content: '★';
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 10px;
    color: var(--accent-primary);
    letter-spacing: 0.08em;
}

.metal-line__sample {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin-top: 2px;
    box-shadow:
        inset -4px -5px 9px rgba(0, 0, 0, 0.18),
        inset 4px 5px 9px rgba(255, 255, 255, 0.4),
        0 5px 12px rgba(60, 45, 25, 0.08);
}

.metal-line__sample[data-metal="g585"] {
    background: radial-gradient(circle at 32% 28%, #f5d590 0%, #e2bd6a 35%, #b88d3a 75%, #8a6925 100%);
}
.metal-line__sample[data-metal="g750"] {
    background: radial-gradient(circle at 32% 28%, #fde6a0 0%, #f0c66f 30%, #d4a449 70%, #9c7726 100%);
}
.metal-line__sample[data-metal="pt"] {
    background: radial-gradient(circle at 32% 28%, #f4f4f7 0%, #d8d8df 40%, #a8a8b0 80%, #76767e 100%);
}
.metal-line__sample[data-metal="ag"] {
    background: radial-gradient(circle at 32% 28%, #ededf0 0%, #c8c8cc 40%, #98989c 80%, #6c6c70 100%);
}
/* White gold (rhodium-finished) — cool with subtle warm undertone */
.metal-line__sample[data-metal="wg"] {
    background: radial-gradient(circle at 32% 28%, #fafafa 0%, #e4e4e6 40%, #b6b6ba 80%, #82828a 100%);
}
/* Rose gold — warm pink with copper undertone */
.metal-line__sample[data-metal="rg"] {
    background: radial-gradient(circle at 32% 28%, #f8d8c8 0%, #e0a890 40%, #b87a64 75%, #845240 100%);
}

/* 5-column variant for /uslugi/obruchalnye-koltsa/ */
.metal-strip--5col {
    grid-template-columns: repeat(5, 1fr);
}

.metal-line__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.metal-line__head {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.metal-line__assay {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 28px;
    font-weight: 400;
    color: var(--fg-primary);
    line-height: 1;
    letter-spacing: -0.01em;
}

.metal-line__name {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-on-light);
}

.metal-line__char {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.35;
    color: var(--fg-secondary);
}
/* ===================================================
   REFORGE — featured dark block (переплавка старого)
   =================================================== */
.reforge {
    position: relative;
    padding: 124px 0;
    background: var(--surface-inverse);
    overflow: hidden;
}

.reforge__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 20% 30%, rgba(200, 180, 150, 0.10), transparent 60%),
        radial-gradient(ellipse 60% 80% at 90% 80%, rgba(200, 180, 150, 0.06), transparent 70%);
    pointer-events: none;
}

.reforge__inner {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 48px;
    display: grid;
    grid-template-columns: minmax(420px, 0.95fr) minmax(0, 1.05fr);
    gap: 92px;
    align-items: center;
}

.reforge__visual {
    aspect-ratio: 1 / 1.08;
    overflow: hidden;
    position: relative;
    isolation: isolate;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.32);
    background: #181512;
}

.reforge__visual-inner,
.reforge__compare {
    width: 100%;
    height: 100%;
}

.reforge__title {
    color: var(--fg-inverse);
    margin-bottom: 22px;
}

.reforge__desc {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 30px;
    max-width: 620px;
}

.reforge__list {
    list-style: none;
    padding: 0;
    margin: 0 0 38px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 26px;
}

.reforge__list li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 0;
    font-family: var(--font-body);
    font-size: 15.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
}

.reforge__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.75em;
    width: 12px;
    height: 1px;
    background: var(--accent-primary);
}

.reforge__cta {
    color: var(--fg-inverse) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

.reforge__cta:hover {
    color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
}

/* ===================================================
   EXAMPLES — centered CTA band
   =================================================== */
.examples__inner {
    max-width: 760px;
}

.examples__title {
    margin-top: 8px;
}

.examples__desc {
    margin-bottom: 36px;
}

/* ===================================================
   EXAMPLES — editorial mini-gallery (izgotovlenie variant)
   =================================================== */
.examples--gallery .examples__inner {
    max-width: 1280px;
}

.examples--gallery .examples__header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 48px;
}

.examples--gallery .examples__desc {
    margin-bottom: 0;
}

.ex-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 64px;
}

.ex-tile {
    position: relative;
    overflow: hidden;
    background: var(--g, linear-gradient(135deg, #2a2520 0%, #45382c 50%, #c8b496 100%));
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    text-decoration: none;
    color: inherit;
    display: block;
    cursor: pointer;
    border: 0;
    padding: 0;
    font: inherit;
    width: 100%;
    aspect-ratio: 4 / 5;
}

.ex-tile::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0) 40%,
        rgba(0, 0, 0, 0.55) 100%);
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.ex-tile--big {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    aspect-ratio: auto;
}

.ex-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 48px rgba(60, 45, 25, 0.18);
}

.ex-tile:hover::before {
    opacity: 0.7;
}

.ex-tile__num {
    position: absolute;
    top: 18px;
    left: 22px;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 26px;
    color: rgba(255, 255, 255, 0.78);
    letter-spacing: -0.01em;
    z-index: 2;
    line-height: 1;
}

.ex-tile--big .ex-tile__num {
    font-size: 44px;
    top: 28px;
    left: 32px;
}

.ex-tile__cat {
    position: absolute;
    bottom: 18px;
    left: 22px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    z-index: 2;
    transform: translateY(0);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.ex-tile:hover .ex-tile__cat {
    transform: translateY(-3px);
    color: var(--accent-primary);
}

.ex-tile--big .ex-tile__cat {
    bottom: 28px;
    left: 32px;
    font-size: 11px;
}

.ex-tile__title {
    position: absolute;
    bottom: 18px;
    right: 22px;
    max-width: 65%;
    z-index: 2;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 14px;
    line-height: 1.2;
    text-align: right;
    color: rgba(255, 255, 255, 0.94);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.ex-tile:hover .ex-tile__title,
.ex-tile:focus-visible .ex-tile__title {
    opacity: 1;
    transform: translateY(0);
}

.ex-tile--big .ex-tile__title {
    bottom: 28px;
    right: 32px;
    font-size: 20px;
}


/* ===================================================
   START PATHS — three ways to begin (izgotovlenie)
   =================================================== */
.start-paths {
    background: var(--surface-primary);
    padding: 96px 0;
    border-top: 1px solid var(--border-hairline-gold);
}

.start-paths__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 48px;
}

.start-paths__header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 56px;
}

.start-paths__eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-on-light);
    margin-bottom: 18px;
}

.start-paths__title {
    font-family: var(--font-display);
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 400;
    color: var(--fg-primary);
    line-height: 1.1;
    letter-spacing: -0.015em;
}

.start-paths__title em {
    font-style: italic;
    font-weight: 500;
    color: var(--accent-primary);
}

.start-paths__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border-hairline-gold);
    border: 1px solid var(--border-hairline-gold);
}

.path-card {
    background: #fff;
    padding: 40px 32px 36px;
    display: flex;
    flex-direction: column;
    transition: background 0.3s ease;
}

.path-card:hover {
    background: #fffbf2;
}
.path-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(200, 180, 150, 0.08);
    border: 1px solid rgba(200, 180, 150, 0.18);
    color: var(--accent-on-light);
    margin-bottom: 20px;
}

.path-card__icon svg {
    width: 20px;
    height: 20px;
}

.path-card__title {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 400;
    color: var(--fg-primary);
    line-height: 1.1;
    margin-bottom: 14px;
}

.path-card__desc {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    color: var(--fg-secondary);
    margin-bottom: 28px;
    flex: 1;
}

.path-card__action {
    display: block;
}

.path-card__link {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-primary);
    border-bottom: 1px solid var(--accent-primary);
    padding-bottom: 6px;
    transition: color 0.3s ease, border-color 0.3s ease;
    display: inline-block;
}

.path-card__link:hover {
    color: var(--accent-on-light);
}

/* ===================================================
   BRIDGE — cross-link between services
   =================================================== */
.bridge {
    background: var(--surface-primary);
    border-top: 1px solid var(--border-hairline-gold);
    border-bottom: 1px solid var(--border-hairline-gold);
}

.bridge__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 64px 48px;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 48px;
    align-items: center;
}

.bridge__content .bridge__eyebrow {
    margin-bottom: 14px;
}

.bridge__title {
    font-size: clamp(26px, 2.6vw, 34px);
    margin-bottom: 10px;
}

.bridge__desc {
    font-family: var(--font-body);
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--fg-secondary);
    max-width: 640px;
    margin: 0;
}

.bridge__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 32px;
    background: #fff;
    border: 1px solid var(--border-hairline-gold);
    text-decoration: none;
    color: var(--fg-primary);
    transition: border-color 0.35s ease, background 0.35s ease;
    position: relative;
    overflow: hidden;
}

/* Gold shimmer sweep — same idiom as contacts__connect-channel tiles */
.bridge__link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(200, 180, 150, 0.18), transparent);
    transform: translateX(-100%);
    transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
    pointer-events: none;
}

.bridge__link:hover {
    border-color: var(--accent-primary);
    background: linear-gradient(180deg, rgba(200, 180, 150, 0.08) 0%, rgba(200, 180, 150, 0.02) 100%);
}

.bridge__link:hover::before {
    transform: translateX(100%);
}

.bridge__link-label {
    font-family: var(--font-display);
    font-size: 20px;
    line-height: 1.2;
    position: relative;
    z-index: 1;
}

.bridge__link-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--accent-primary);
    color: var(--accent-primary);
    transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1), background 0.35s ease, color 0.35s ease;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.bridge__link:hover .bridge__link-arrow {
    background: var(--accent-primary);
    color: var(--fg-primary);
    transform: translateX(6px);
}

/* ===================================================
   WHY CUSTOM (wedding page) — 4 reasons
   =================================================== */
.why-custom__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    background: transparent;
    border: none;
    border-top: 1px solid var(--border-hairline-gold);
}

.why-card {
    background: transparent;
    padding: 40px 36px 44px;
    position: relative;
}

/* Bottom hairline */
.why-card {
    border-bottom: 1px solid var(--border-hairline-gold);
}

/* Vertical hairline for right-column cards */
.why-card:nth-child(even) {
    border-left: 1px solid var(--border-hairline-gold);
}

.why-card__num {
    display: block;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 14px;
    color: var(--accent-primary);
    letter-spacing: 0.12em;
    margin-bottom: 18px;
}

.why-card__title {
    font-family: var(--font-display);
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 400;
    color: var(--fg-primary);
    line-height: 1.15;
    margin-bottom: 14px;
}

.why-card__desc {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--fg-secondary);
}

/* ===================================================
   RING STYLES — gallery of style cards
   =================================================== */
.ring-styles {
    background: #fff;
}

.ring-styles__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.style-card {
    display: flex;
    flex-direction: column;
    background: var(--surface-primary);
    border: 1px solid var(--border-subtle);
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.style-card:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 12px 32px rgba(26, 26, 26, 0.06);
}

.style-card__img {
    aspect-ratio: 4 / 3;
    width: 100%;
    overflow: hidden;
}

.style-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.style-card__body {
    padding: 24px 28px 28px;
}

.style-card__title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 400;
    color: var(--fg-primary);
    line-height: 1.2;
    margin-bottom: 10px;
}

.style-card__desc {
    font-family: var(--font-body);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--fg-secondary);
}

.ring-styles__note {
    max-width: 720px;
    margin: 40px auto 0;
    text-align: center;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--fg-secondary);
    opacity: 0.7;
}

/* ===================================================
   ENGRAVING — dark feature block
   =================================================== */
.engraving {
    position: relative;
    padding: 112px 0;
    background: var(--surface-inverse);
    overflow: hidden;
}

.engraving__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 100% 60% at 80% 20%, rgba(200, 180, 150, 0.10), transparent 60%);
    pointer-events: none;
}

.engraving__inner {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 48px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 80px;
    align-items: center;
}

.engraving__title {
    color: var(--fg-inverse);
    margin-bottom: 22px;
}

.engraving__desc {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 28px;
}

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

.engraving__list li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 14px;
    font-family: var(--font-body);
    font-size: 15.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
}

.engraving__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.75em;
    width: 12px;
    height: 1px;
    background: var(--accent-primary);
}

.engraving__list strong {
    color: var(--accent-primary);
    font-weight: 500;
}
.engraving__list strong::after {
    content: ' — ';
    font-weight: normal;
    color: rgba(255, 255, 255, 0.82);
}

.engraving__sample {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.engraving__sample-photo {
    aspect-ratio: 1;
    background: url('/public/images/gravirovka.webp') center / cover no-repeat;
    border: 1px solid rgba(200, 180, 150, 0.25);
}

.engraving__sample-caption {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    padding: 12px 0 0;
}

/* ===================================================
   RING CALCULATOR
   =================================================== */
.ring-calc {
    background: var(--surface-inverse);
}

.ring-calc__header {
    text-align: center;
}

.ring-calc__eyebrow {
    color: var(--accent-primary);
}

.ring-calc__title {
    color: var(--fg-inverse);
}

.ring-calc__desc {
    color: rgba(255, 255, 255, 0.68);
}

.ring-calc__form {
    max-width: 900px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 40px 44px;
}

.ring-calc__row {
    display: grid;
    grid-template-columns: 1.1fr 1.3fr 1.1fr;
    gap: 32px;
    margin-bottom: 36px;
}

.ring-calc__field {
    display: flex;
    flex-direction: column;
}

.ring-calc__label {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 14px;
}

.ring-calc__input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 14px 16px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--fg-inverse);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C8B496' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.ring-calc__input:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.ring-calc__input option {
    background: var(--surface-inverse);
    color: var(--fg-inverse);
}

.ring-calc__range {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.15);
    outline: none;
    cursor: pointer;
    padding: 0;
    margin-top: 18px;
}

.ring-calc__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent-primary);
    cursor: pointer;
    border: 3px solid var(--surface-inverse);
    box-shadow: 0 0 0 1px var(--accent-primary);
}

.ring-calc__range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent-primary);
    cursor: pointer;
    border: 3px solid var(--surface-inverse);
    box-shadow: 0 0 0 1px var(--accent-primary);
}

.ring-calc__range-value {
    display: block;
    margin-top: 12px;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 20px;
    color: var(--accent-primary);
    text-align: center;
}

.ring-calc__result {
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.ring-calc__result-label {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 12px;
}

.ring-calc__result-value {
    font-family: var(--font-display);
    font-size: clamp(34px, 4.6vw, 56px);
    font-weight: 400;
    color: var(--accent-primary);
    line-height: 1.1;
    margin-bottom: 14px;
    letter-spacing: -0.01em;
}

.ring-calc__result-breakdown {
    font-family: var(--font-body);
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.6);
}

.ring-calc__disclaimer {
    max-width: 720px;
    margin: 32px auto 0;
    text-align: center;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.4);
}

/* ===================================================
   PAIR ESSENTIALS — split layout with photo
   =================================================== */
.pair-essentials__inner {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 64px;
    align-items: center;
}

.pair-essentials__title {
    margin-bottom: 28px;
}

.pair-essentials__desc {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.65;
    color: var(--fg-secondary);
    margin-bottom: 0;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(200, 180, 150, 0.3);
    max-width: 540px;
}

.pair-essentials__list {
    list-style: none;
    padding: 28px 0 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pair-essentials__list li {
    position: relative;
    padding-left: 28px;
    font-family: var(--font-body);
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--fg-primary);
}

.pair-essentials__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 16px;
    height: 1.5px;
    background: var(--accent-on-light);
    border-radius: 1px;
}

/* Desktop: structured strong/span render inline like original text */
.pair-essentials__list li strong {
    font-weight: 600;
}
.pair-essentials__list li strong::after {
    content: ': ';
    font-weight: normal;
}

/* Photo with asymmetric arch mask — top-left corner, large radius like reference */
.pair-essentials__photo {
    overflow: hidden;
    border-radius: clamp(120px, 50%, 260px) 0 0 0;
    margin: -24px 0;
    background: linear-gradient(145deg, #d6cec4 0%, #bfb5a8 100%);
    min-height: 420px;
    border: 1px solid rgba(180, 165, 140, 0.35);
}

.pair-essentials__photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

/* Hide broken image icon when src is missing */
.pair-essentials__photo img[src=""],
.pair-essentials__photo img:not([src]) {
    visibility: hidden;
}

/* ===================================================
   REVIEWS — placeholder cards
   =================================================== */
.reviews {
    text-align: center;
}

.reviews__eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-primary);
    margin-bottom: 20px;
}

.reviews__title {
    font-family: var(--font-display);
    font-size: clamp(30px, 3.6vw, 48px);
    font-weight: 400;
    color: var(--fg-primary);
    line-height: 1.1;
    max-width: 820px;
    margin: 0 auto 56px;
}

.reviews__title em {
    font-style: italic;
    font-weight: 500;
    color: var(--accent-primary);
}

.reviews__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    text-align: left;
}

.review-card {
    background: #fff;
    border: 1px solid var(--border-subtle);
    padding: 32px 28px 28px;
    display: flex;
    flex-direction: column;
}

.review-card__text {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 17px;
    line-height: 1.55;
    color: var(--fg-primary);
    margin-bottom: 24px;
    flex-grow: 1;
}

.review-card__author {
    padding-top: 18px;
    border-top: 1px solid var(--border-subtle);
}

.review-card__name {
    display: block;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--fg-primary);
    margin-bottom: 4px;
}

.review-card__meta {
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-secondary);
}

.reviews__note {
    margin: 32px auto 0;
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--fg-secondary);
    opacity: 0.6;
}

/* ===================================================
   FAQ — accordion
   =================================================== */
.faq {
    background: #fff;
}

.faq__list {
    max-width: 860px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid var(--border-subtle);
}

.faq-item:first-child {
    border-top: 1px solid var(--border-subtle);
}

.faq-item__q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 28px 0;
    cursor: pointer;
    list-style: none;
    transition: color 0.2s ease;
}

.faq-item__q::-webkit-details-marker {
    display: none;
}

.faq-item__q:focus {
    outline: none;
}

.faq-item__q:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 4px;
    border-radius: 4px;
}

.faq-item__q:hover {
    color: var(--accent-primary);
}

.faq-item__q-text {
    font-family: var(--font-display);
    font-size: clamp(18px, 1.8vw, 22px);
    font-weight: 400;
    color: inherit;
    line-height: 1.3;
}

.faq-item__q-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border-subtle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 300;
    color: var(--accent-primary);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.faq-item[open] .faq-item__q-icon {
    transform: rotate(45deg);
    border-color: var(--accent-primary);
}

.faq-item__a {
    padding: 0 0 28px;
    max-width: 720px;
}

.faq-item__a p {
    font-family: var(--font-body);
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--fg-secondary);
    margin: 0;
}

/* ===================================================
   RESPONSIVE — new modules
   =================================================== */
@media (max-width: 1024px) {
    .proc-timeline {
        grid-template-columns: repeat(2, 1fr);
    }
    .proc-step-v:not(:nth-child(3n+1))::before {
        display: none;
    }
    .proc-step-v:not(:nth-child(2n+1))::before {
        content: '';
        display: block;
        position: absolute;
        top: 36px;
        left: 0;
        width: 1px;
        height: calc(100% - 72px);
        background: var(--border-hairline-gold);
    }
    .proc-full__grid,
    .proc-full__grid--5 {
        grid-template-columns: repeat(2, 1fr);
    }    .metal-strip--5col {
        grid-template-columns: repeat(3, 1fr);
    }
    .terms__grid,
    .agreement-grid,
    .ring-styles__grid,
    .reviews__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .why-custom__grid {
        grid-template-columns: 1fr;
    }
    .reforge__inner,
    .engraving__inner,
    .pair-essentials__inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .ring-calc__row {
        grid-template-columns: 1fr 1fr;
    }
    .bridge__inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

@media (max-width: 768px) {
    .proc-full,
    .materials,
    .terms,
    .examples,
    .why-custom,
    .ring-styles,
    .ring-calc,
    .pair-essentials,
    .reviews,
    .faq {
        padding: 64px 0;
    }
    .reforge,
    .engraving {
        padding: 72px 0;
    }
    .proc-full__header,
    .materials__header,
    .terms__header,
    .why-custom__header,
    .ring-styles__header,
    .ring-calc__header,
    .faq__header {
        padding: 0 24px;
        margin-bottom: 40px;
    }
    .proc-full__inner,
    .materials__inner,
    .terms__inner,
    .examples__inner,
    .why-custom__inner,
    .ring-styles__inner,
    .ring-calc__inner,
    .pair-essentials__inner,
    .reviews__inner,
    .faq__inner,
    .reforge__inner,
    .engraving__inner,
    .bridge__inner {
        padding-left: 24px;
        padding-right: 24px;
    }
    .proc-full__grid,
    .proc-full__grid--5,
    .materials__grid,
    .terms__grid,
    .agreement-grid,
    .ring-styles__grid,
    .reviews__grid {
        grid-template-columns: 1fr;
    }    .reforge__list {
        grid-template-columns: 1fr;
    }
    .metal-strip--5col {
        grid-template-columns: repeat(2, 1fr);
    }
    .ring-calc__form {
        padding: 28px 24px;
    }
    .ring-calc__row {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-bottom: 24px;
    }
    .pair-essentials__photo {
        max-width: 480px;
    }
    .bridge__link {
        padding: 20px 24px;
    }
    .bridge__link-label {
        font-size: 17px;
    }
    .faq-item__q {
        padding: 22px 0;
        gap: 16px;
    }
    .faq-item__q-icon {
        width: 32px;
        height: 32px;
    }
}

/* ==========================================================================
   Izgotovlenie page — responsive overrides for new editorial layout
   ========================================================================== */
@media (max-width: 1024px) {.proc-step-v {
        padding: 32px 28px 34px;
        column-gap: 18px;
    }
    .proc-step-v__num {
        font-size: clamp(44px, 5vw, 56px);
    }
    .proc-step-v__title {
        font-size: 22px;
    }
    .metal-strip {
        grid-template-columns: repeat(2, 1fr);
    }
    .ex-gallery {
        /* rows auto-sized by 4:5 tiles */
    }
    .ex-tile--big {
        grid-row: 1 / 2;
        grid-column: 1 / 3;
    }
}

@media (max-width: 768px) {
    .page-head--izg {
        min-height: 0;
        padding-top: calc(var(--header-height) + 56px);
        padding-bottom: 80px;
    }

.page-head__specs {
        flex-direction: column;
        gap: 0;
        padding-top: 24px;
    }
    .head-spec {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        padding: 14px 0;
        margin-right: 0;
        border-right: none;
        border-bottom: 1px solid rgba(200, 180, 150, 0.18);
    }
    .head-spec:last-child {
        border-bottom: none;
    }
    .head-spec__val {
        font-size: 22px;
    }

    .proc-timeline {
        grid-template-columns: 1fr;
    }
    .proc-step-v {
        padding: 28px 22px 30px;
        column-gap: 16px;
    }
    .proc-step-v__col-num {
        gap: 10px;
    }
    .proc-step-v__dash {
        margin-top: 26px;
        width: 18px;
    }
    .proc-step-v__num {
        font-size: 42px;
    }
    .proc-step-v__title {
        font-size: 22px;
    }

    /* Metal strip → horizontal scroll cards on mobile */
    .metal-strip {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        gap: 12px;
        padding: 4px 20px 16px;
        margin: 0 -20px;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 20px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        background: transparent;
        border: none;
        box-shadow: none;
    }
    .metal-strip::-webkit-scrollbar { display: none; }

    .metal-line {
        flex: 0 0 calc(50vw - 30px);
        max-width: 180px;
        scroll-snap-align: start;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
        padding: 28px 16px 24px;
        min-height: auto;
        border: 1px solid rgba(200, 180, 150, 0.25);
        border-radius: 20px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(20, 16, 8, 0.04);
    }
    .metal-line--featured {
        border-top: 2px solid var(--accent-primary);
        background: #fffdf8;
    }
    .metal-line--featured::before {
        top: 10px;
        right: 14px;
    }

    .metal-line__sample {
        width: 52px;
        height: 52px;
    }

    .metal-line__body {
        align-items: center;
    }
    .metal-line__head {
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }
    .metal-line__assay {
        font-size: 32px;
    }
    .metal-line__name {
        font-size: 9px;
    }
    .metal-line__char {
        font-size: 12px;
        color: var(--fg-muted);
        margin-top: 4px;
    }    .ex-gallery {
        grid-template-columns: 1fr 1fr;
    }
    .ex-tile--big {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
    }
    .start-paths__grid {
        grid-template-columns: 1fr;
    }

    .reforge__visual {
        max-width: 380px;
        margin: 0 auto 16px;
    }
}

/* ==========================================================================
   Home page: custom → learn more link (below messenger CTAs)
   ========================================================================== */
.custom__learn-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding: 6px 0 4px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    /* Section uses --surface-inverse (near-black) — default --fg-primary
       was also dark, so the link painted invisibly. Use light warm tone
       on dark, matched to the cream palette elsewhere on this section. */
    color: rgba(242, 232, 210, 0.78);
    text-decoration: none;
    border-bottom: 1px solid rgba(242, 232, 210, 0.22);
    transition: color 0.25s ease, border-color 0.25s ease, gap 0.25s ease;
}
.custom__learn-more:hover {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
    gap: 14px;
}
.custom__learn-more span {
    font-size: 15px;
    letter-spacing: 0;
    line-height: 1;
    transform: translateY(-1px);
}

/* ==========================================================================
   Home page: wedding-teaser section (bridge to /uslugi/obruchalnye-koltsa/)

   FULL-BLEED PHOTO skin — WeddingRings.jpg sits as the section
   background (no color overlays, no tints) and the content block uses
   frosted-glass morphism (backdrop-filter blur + semi-transparent
   cream) to float over it. Replaces the previous ring SVG composition.
   ========================================================================== */
.wedding-teaser {
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: var(--fg-primary);
    padding: clamp(60px, 8vw, 120px) clamp(20px, 4vw, 40px);
    min-height: clamp(560px, 78vh, 820px);
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Desktop-only background — keeps mobile from downloading the 388 KB image */
@media (min-width: 769px) {
    .wedding-teaser {
        background-image: url('/public/images/wedding-teaser-bg.webp');
    }
}

/* Mobile-only elements — hidden on desktop */
.wedding-teaser__photo,
.wedding-teaser__msgs {
    display: none;
}

/* Local ochre token — deeper gold than --accent-primary because the
   glass card backdrop can shift in luminance with the photo behind it. */
.wedding-teaser {
    --wt-deep: #8B6B3E;
    --wt-deep-soft: rgba(139, 107, 62, 0.3);
    --wt-deep-faint: rgba(139, 107, 62, 0.16);
}

/* --- Layout: card pushed to the right third, photo breathes on left --- */
.wedding-teaser__inner {
    position: relative;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr minmax(420px, 560px);
    gap: clamp(40px, 6vw, 80px);
    align-items: center;
}

/* --- Frosted-glass content card —
   dark warm tint, lighter glass (more transparent), low saturation.
   Text colors below flip to cream + accent-gold so copy reads
   against the darker backdrop. --- */
.wedding-teaser__card {
    position: relative;
    grid-column: 2;
    padding: clamp(32px, 4vw, 56px);
    max-width: 560px;
    /* Warm near-black tint at ~64–52% opacity — photo still bleeds
       through enough to keep the glass "alive", but the card sits
       heavier and text carries more contrast. Saturation kept near
       neutral so the glass stays quiet instead of over-warming the photo. */
    background: linear-gradient(160deg, rgba(22, 16, 10, 0.64) 0%, rgba(28, 20, 12, 0.52) 100%);
    -webkit-backdrop-filter: blur(22px) saturate(1.02);
    backdrop-filter: blur(22px) saturate(1.02);
    border: 1px solid rgba(255, 255, 255, 0.14);
    /* Light top-edge highlight (glass refraction) + deep drop shadow */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 0 rgba(0, 0, 0, 0.25),
        0 30px 60px -30px rgba(0, 0, 0, 0.55),
        0 8px 24px -12px rgba(0, 0, 0, 0.35);
}

/* Fallback for browsers without backdrop-filter: opaque dark so text
   stays readable over the photo. */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
    .wedding-teaser__card {
        background: rgba(22, 16, 10, 0.82);
    }
}

/* Cream-gold corner brackets — read clearly on the dark glass */
.wedding-teaser__card::before,
.wedding-teaser__card::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    border: 1px solid var(--accent-primary);
}
.wedding-teaser__card::before {
    top: -1px;
    left: -1px;
    border-right: none;
    border-bottom: none;
}
.wedding-teaser__card::after {
    bottom: -1px;
    right: -1px;
    border-left: none;
    border-top: none;
}

.wedding-teaser__eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent-primary);
    margin-bottom: 20px;
}

.wedding-teaser__title {
    font-family: 'Newsreader', serif;
    font-size: clamp(30px, 3.4vw, 44px);
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: -0.005em;
    color: #F4F2EF;
    margin: 0 0 20px;
}
.wedding-teaser__title em {
    font-style: italic;
    font-weight: 300;
    color: var(--accent-primary);
}
.wedding-teaser__desc {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.75;
    letter-spacing: 0.005em;
    color: rgba(244, 242, 239, 0.8);
    margin: 0 0 clamp(24px, 3vw, 36px);
    max-width: 48ch;
}

/* --- Stats strip (hairline rule top + bottom, divider vertical between) --- */
.wedding-teaser__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin: 0 0 clamp(24px, 3vw, 36px);
    padding: 22px 0;
    border-top: 1px solid rgba(200, 180, 150, 0.22);
    border-bottom: 1px solid rgba(200, 180, 150, 0.22);
}
.wedding-teaser__stat {
    padding: 0 14px;
    border-right: 1px solid rgba(200, 180, 150, 0.18);
}
.wedding-teaser__stat:last-child {
    border-right: none;
}
.wedding-teaser__stat-label {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(244, 242, 239, 0.55);
    margin-bottom: 8px;
}
.wedding-teaser__stat-value {
    font-family: 'Newsreader', serif;
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 300;
    line-height: 1;
    color: var(--accent-primary);
    margin: 0;
}
.wedding-teaser__stat-value span {
    font-size: 0.55em;
    color: rgba(244, 242, 239, 0.6);
    letter-spacing: 0;
}

/* --- Bullets --- */
.wedding-teaser__bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 36px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
.wedding-teaser__bullets li {
    position: relative;
    padding-left: 24px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 300;
    line-height: 1.65;
    color: rgba(244, 242, 239, 0.82);
}
.wedding-teaser__bullets li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 14px;
    height: 1px;
    background: var(--accent-primary);
}

/* --- CTAs (adapted for dark-glass bg) --- */
.wedding-teaser__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.wedding-teaser__btn-primary {
    background: var(--accent-primary);
    color: #1A1A1A;
    border-color: var(--accent-primary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.wedding-teaser__btn-primary:hover {
    background: var(--accent-hover);
    color: #1A1A1A;
    border-color: var(--accent-hover);
}
.wedding-teaser__btn-primary svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.3s ease;
}
.wedding-teaser__btn-primary:hover svg {
    transform: translateX(4px);
}
.wedding-teaser__btn-msg {
    background: rgba(255, 255, 255, 0.06);
    color: #F4F2EF;
    border: 1px solid rgba(255, 255, 255, 0.22);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.wedding-teaser__btn-msg svg {
    color: var(--accent-primary);
    flex-shrink: 0;
    transition: color 0.25s ease;
}
.wedding-teaser__btn-msg:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    transform: translateY(-1px);
    box-shadow: 0 10px 28px -12px rgba(200, 180, 150, 0.35);
}

/* --- Responsive --- */
@media (max-width: 960px) {
    .wedding-teaser {
        /* Shift background focus: on tablet/mobile, rings should be
           visible at top and the card sits below them. */
        background-position: center 30%;
        padding: clamp(340px, 52vw, 480px) clamp(20px, 4vw, 40px) clamp(40px, 6vw, 80px);
        align-items: flex-end;
        min-height: 0;
    }
    .wedding-teaser__inner {
        grid-template-columns: 1fr;
    }
    .wedding-teaser__card {
        grid-column: 1;
        max-width: 100%;
    }
}
@media (max-width: 560px) {
    .wedding-teaser {
        padding-top: clamp(300px, 70vw, 420px);
    }
    .wedding-teaser__title {
        font-size: clamp(26px, 7vw, 34px);
    }
    .wedding-teaser__stats {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 18px 0;
    }
    .wedding-teaser__stat {
        border-right: none;
        border-bottom: 1px solid rgba(200, 180, 150, 0.18);
        padding: 0 0 12px;
    }
    .wedding-teaser__stat:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
    .wedding-teaser__ctas {
        flex-direction: column;
        align-items: stretch;
    }
    .wedding-teaser__ctas .btn {
        justify-content: center;
    }
}

/* =======================================================
   POLISH — section rule reveal + gold CTA breathing glow
   Each section's 48px gold tick draws from center outward
   when the section enters viewport. Unified for all four
   landing sections that wire .is-visible via revealObserver.
   ======================================================= */
.services__rule,
.process__rule,
.portfolio__rule,
.contacts__rule {
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.2s;
}

.services.is-visible .services__rule,
.process.is-visible .process__rule,
.portfolio.is-visible .portfolio__rule,
.contacts.is-visible .contacts__rule {
    transform: translateX(-50%) scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
    .services__rule,
    .process__rule,
    .portfolio__rule,
    .contacts__rule {
        transform: translateX(-50%) scaleX(1);
        transition: none;
    }
}

/* Primary gold CTA — soft gold glow on hover.
   Combines the existing lift with a larger, softer shadow
   that reads as warm light spilling from the button. */
.btn--gold-filled {
    transition: background 0.25s ease, border-color 0.25s ease,
                color 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn--gold-filled:hover {
    transform: translateY(-2px);
    box-shadow:
        0 10px 28px rgba(200, 180, 150, 0.32),
        0 0 48px rgba(200, 180, 150, 0.28),
        0 0 0 1px rgba(255, 235, 200, 0.45) inset;
}

.btn--gold-filled:active {
    transform: translateY(0);
    box-shadow:
        0 4px 12px rgba(200, 180, 150, 0.28),
        0 0 0 1px rgba(255, 235, 200, 0.4) inset;
    transition-duration: 0.12s;
}

/* ============================================================
   COPY TOAST
   Appears when the phone tile is clicked on desktop — confirms
   the number was copied to clipboard. Fixed bottom-center,
   dark-glass pill with gold left accent.
   ============================================================ */

.copy-toast {
    position: fixed;
    left: 50%;
    bottom: 32px;
    transform: translate(-50%, 20px);
    padding: 14px 22px 14px 20px;
    background: rgba(20, 16, 12, 0.92);
    color: #F4F2EF;
    border: 1px solid rgba(200, 180, 150, 0.28);
    border-left: 2px solid var(--accent-primary);
    font-family: var(--font-body);
    font-size: 14px;
    letter-spacing: 0.02em;
    box-shadow:
        0 20px 40px -20px rgba(0, 0, 0, 0.55),
        0 6px 18px -8px rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
    z-index: 9999;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.copy-toast--visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

@media (max-width: 560px) {
    .copy-toast {
        left: 16px;
        right: 16px;
        transform: translateY(20px);
        text-align: center;
    }
    .copy-toast--visible {
        transform: translateY(0);
    }
}

/* ==========================================================================
   /tseny/ page — responsive overrides for new editorial pricing layout
   ========================================================================== */
@media (max-width: 1024px) {
    .quick-prices__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .diagnostic__inner {
        gap: 56px;
        grid-template-columns: 1fr 1fr;
    }
    .diagnostic__title {
        font-size: clamp(28px, 4vw, 40px);
    }
}

@media (max-width: 768px) {
    /* Quick-prices — compact 2x2 chip grid (was 4 stacked full-width cards) */
    .quick-prices {
        padding: 32px 0 8px;
    }
    .quick-prices__inner,
    .diagnostic__inner {
        padding-left: 22px;
        padding-right: 22px;
    }
    .quick-prices__eyebrow {
        font-size: 10px;
        letter-spacing: 0.20em;
        margin-bottom: 14px;
    }
    .quick-prices__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .quick-price {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        padding: 14px 14px;
        gap: 4px;
        min-height: 88px;
        border-radius: 14px;
    }
    .quick-price__label {
        order: 1;
        font-size: 10px;
        letter-spacing: 0.16em;
        margin-bottom: 0;
    }
    .quick-price__big {
        order: 2;
        font-size: 22px;
        flex-shrink: 0;
    }
    .quick-price__cur {
        font-size: 14px;
    }
    .quick-price__action {
        display: none;
    }
    .prices__search-label {
        padding: 12px 16px;
    }
    .prices__search-count {
        display: none;
    }
    .prices__empty {
        padding: 52px 22px calc(128px + env(safe-area-inset-bottom));
    }
    .prices__empty-actions {
        flex-direction: column;
        align-items: center;
    }
    .prices__empty-btn {
        width: min(100%, 336px);
        justify-content: center;
    }
    .diagnostic {
        padding: 64px 0;
    }
    .diagnostic__inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .diagnostic__photo {
        max-width: 480px;
        margin: 0 auto;
    }
}


/* ==========================================================================
   ============================================================================
   MOBILE REDESIGN — Phase 1: Foundation
   ============================================================================
   - Bottom tab bar with 5 destinations (replaces hamburger + floating CTA)
   - Action sheets for "Услуги" and "Связь"
   - iOS-native type scale (body 17px, large titles)
   - Disabled scroll-reveal animations for performance
   - Safe-area insets for iPhone home indicator
   ========================================================================== */

/* ----- Tab bar (hidden on desktop, shown via media query) ----- */
.tab-bar {
    display: none;
}

/* ----- Action sheets (hidden by default; opened via JS) ----- */
.sheet[hidden] {
    display: none;
}

@keyframes sheetFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes sheetSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}


/* ==========================================================================
   ============================================================================
   MOBILE — consolidated block (foundation + home redesign + deep-page redesign)
   ============================================================================
   Single @media (max-width: 768px) holding all mobile-only rules. Sections:
   1. FOUNDATION    — body padding, motion budget, hide hamburger/float-msgs
   2. TAB BAR       — floating capsule + 5 tabs, active state
   3. ACTION SHEETS — Услуги + Связь slide-up sheets
   4. ROUNDED CARDS — iOS-standard radii on cards/buttons/grids
   5. HERO V-B      — atelier portrait + glass capsule + facts pill row
   6. HOME SECTIONS — services / process / custom / wedding / portfolio / contacts
   7. FOOTER        — 4-block restructure
   8. DEEP PAGE     — page-head, proc-full, materials, reforge, terms,
                      examples, bridge, start-paths, prices-cta (izgotovlenie)
   ========================================================================== */
/* Default: hide mobile-only elements (shown only inside the mobile @media
   block below). Must come BEFORE that block so cascade works. */
.page-head__msgs,
.page-head__calc-link {
    display: none;
}
.prices__tab-label-short {
    display: none;
}

@media (max-width: 768px) {

    /* === [1-3] FOUNDATION + TAB BAR + ACTION SHEETS === */
    /* === Foundation === */
    body {
        font-size: 17px;
        /* Reserve space for the floating tab bar (~62px) + 10px gap +
           iPhone home indicator. Bar floats with margin so we need a bit
           more clearance than a flush-bottom bar would. */
        padding-bottom: calc(82px + env(safe-area-inset-bottom));
    }

    /* ===== Mobile motion budget — kill unnecessary anims for perf ===== */

    /* --- TIER 0: will-change resets (free up GPU compositor layers) --- */
    [data-reveal],
    .hero__title-accent em,
    .svc-row__link span,
    .pf-item__img,
    .svc-row__image,
    .portfolio__item-img {
        will-change: auto;
    }

    /* --- TIER 1: Generic scroll-reveal — show instantly --- */
    [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    /* Hero entry stagger (title-line, subtitle, cta, facts) — show instantly.
       Original anim staggers 7+ elements over 1.2s, which delays interactivity
       and feels heavy on mobile. Glass capsule + new layout look fine without. */
    .hero__title-line,
    .hero__subtitle,
    .hero__cta,
    .hero__fact,
    .hero__fact-divider,
    .hero__facts-inner > * {
        opacity: 1;
        transform: none;
        animation: none;
        animation-delay: 0s;
    }

    /* Section rules (services/process/portfolio/contacts) — hide on mobile,
       desktop-only decorative lines don't fit mobile card/carousel layouts */
    .services__rule,
    .process__rule,
    .portfolio__rule,
    .contacts__rule {
        display: none;
    }

    /* Hero accent shine + scroll-rail descend keyframes — kill */
    .hero__title-accent em,
    .hero__scroll,
    .hero__scroll-rail-dot {
        animation: none;
    }

    /* Page-head ornament — infinite 80s spin is pure GPU waste on mobile */
    .page-head__ornament,
    .page-head__ornament svg {
        animation: none;
    }

    /* Compare slider hint pulse — heavy & decorative, off on mobile */
    .compare__hint,
    .compare__hint-dot {
        animation: none;
        display: none;
    }

    /* --- TIER 2: .is-visible scroll-reveal transitions — show as final --- */
    .services.is-visible .services__rule,
    .process.is-visible .process__rule,
    .portfolio.is-visible .portfolio__rule,
    .contacts.is-visible .contacts__rule {
        transition: none;
    }
    .process.is-visible .process__step,
    .custom__text,
    .custom__image,
    .custom.is-visible .custom__text,
    .custom.is-visible .custom__image,
    .portfolio.is-visible .portfolio__item,
    .portfolio.is-visible .portfolio__cta,
    .contacts.is-visible .contacts__cards,
    .contacts.is-visible .contacts__map {
        opacity: 1;
        transform: none;
        transition: none;
    }
    /* Process list decorative line + step ring anims — kill */
    .process__list::after {
        transition: none;
    }

    /* --- TIER 3: Btn/card hover transitions — fast tap feedback only --- */
    .btn,
    .btn--gold-filled,
    .btn--primary,
    .btn--ghost,
    .btn--hero,
    .btn--outline {
        transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
    }
    .btn::before,
    .btn--hero::before,
    .btn--hero .btn__icon,
    .btn--hero .btn__arrow,
    .btn--gold-filled::before {
        transition: none;
    }
    .btn:hover,
    .btn--gold-filled:hover,
    .btn--primary:hover,
    .btn--hero:hover {
        transform: none;
        box-shadow: inherit;
    }

    /* Card hover lifts — irrelevant on touch, kill GPU work on tap */
    .svc-row,
    .contact-card,
    .portfolio__item,
    .process__step,
    .material-card,
    .metal-line,
    .agreement-card,
    .ex-tile,
    .path-card,
    .bridge__link,
    .why-card,
    .pf-filter,
    .pf-item {
        transition: none;
    }
    .svc-row:hover,
    .contact-card:hover,
    .portfolio__item:hover,
    .process__step:hover,
    .material-card:hover,
    .metal-line:hover,
    .ex-tile:hover,
    .path-card:hover,
    .bridge__link:hover,
    .why-card:hover {
        transform: none;
        box-shadow: none;
    }
    /* Deep-page card child transitions — kill */
    .ex-tile::before,
    .ex-tile__cat,
    .ex-tile__title,
    .path-card__link,
    .bridge__link::before,
    .bridge__link-arrow,
    .pf-item__img,
    .pf-item__shade,
    .pf-item__meta,
    .pf-filter__count,
    .portfolio__item-img,
    .portfolio__item-shade,
    .portfolio__item-meta,
    .portfolio__item-hint {
        transition: none;
    }
    /* Kill hover transforms on portfolio card children — no zoom/shift on tap */
    .portfolio__item:hover .portfolio__item-img {
        transform: none;
    }
    .portfolio__item:hover .portfolio__item-shade {
        opacity: 0.85;
    }
    .portfolio__item:hover .portfolio__item-meta {
        transform: none;
    }
    .portfolio__item:hover .portfolio__item-hint {
        opacity: 0;
        transform: none;
    }

    /* Scroll-reveal decorations on ::before/::after — show final, no transition */
    .process__step::before,
    .process__step::after,
    .portfolio__item::before,
    .portfolio__item::after,
    .svc-row::before,
    .svc-row::after {
        transition: none;
    }

    /* --- TIER 4: Reduce expensive backdrop-filter on scroll-heavy elements --- */
    .header--scrolled {
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }

    /* Misc link transitions — fast or none */
    .svc-row__link,
    .svc-row__link::before,
    .svc-row__link::after,
    .svc-row__link span,
    .svc-row__image {
        transition: none;
    }
    .footer__messenger-link {
        transition: color 0.15s ease, border-color 0.15s ease;
    }
    .footer__messenger-link:hover {
        transform: none;
    }
    .footer__nav-list a,
    .footer__phone,
    .footer__privacy,
    .breadcrumbs__link,
    .back-home__link,
    .back-home__arrow,
    .contact-card__phone,
    .btn--ghost-sm {
        transition: none;
    }

    /* Hide hamburger menu — tab bar replaces it */
    .burger {
        display: none;
    }
    .mobile-menu {
        display: none;
    }

    /* Hide floating Telegram/Max — Связь tab in tab bar replaces it */
    .float-msgs {
        display: none;
    }

    /* === TAB BAR — floating brand capsule === */
    .tab-bar {
        display: flex;
        align-items: center;
        gap: 2px;
        position: fixed;
        bottom: calc(10px + env(safe-area-inset-bottom));
        left: 12px;
        right: 12px;
        z-index: 90;
        padding: 5px;
        background: rgba(26, 26, 26, 0.94);
        border: 1px solid var(--border-hairline-gold);
        border-radius: 24px;
        overflow: hidden;
        box-shadow:
            0 2px 8px rgba(0, 0, 0, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.06);
        transition: opacity 0.18s ease, transform 0.18s ease;
    }

    @supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
        .tab-bar {
            background: rgba(26, 26, 26, 0.88);
            -webkit-backdrop-filter: saturate(160%) blur(22px);
            backdrop-filter: saturate(160%) blur(22px);
        }
    }

    .tab-bar__item {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 6px 1px 7px;
        background: none;
        border: none;
        border-radius: 18px;
        text-decoration: none;
        color: rgba(244, 242, 239, 0.64);
        font-family: var(--font-body);
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.01em;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.18s ease, background 0.2s ease, opacity 0.1s ease;
        min-height: 50px;
    }

    .tab-bar__item:active {
        opacity: 0.55;
    }

    .tab-bar__item--active {
        color: #F1DDC1;
        background: rgba(200, 180, 150, 0.15);
    }

    .tab-bar__icon {
        width: 23px;
        height: 23px;
        flex-shrink: 0;
    }

    .tab-bar__label {
        line-height: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    /* === ACTION SHEETS === */
    body.sheet-open {
        overflow: hidden;
    }

    /* Closing gap fix: when JS removes data-open but hidden isn't set yet
       (280ms timeout), the sheet must stay fixed+invisible — otherwise it
       falls into normal document flow and renders behind the hero. */
    .sheet:not([hidden]) {
        position: fixed;
        inset: 0;
        z-index: 200;
        visibility: hidden;
        pointer-events: none;
    }

    .sheet[data-open] {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 200;
        visibility: visible;
        pointer-events: auto;
    }

    .sheet__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        border: none;
        cursor: pointer;
        animation: sheetFadeIn 0.25s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .sheet__panel {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        border-radius: 16px 16px 0 0;
        padding: 12px 16px calc(20px + env(safe-area-inset-bottom));
        animation: sheetSlideUp 0.32s cubic-bezier(0.32, 0.72, 0, 1);
        max-height: 88vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .sheet__handle {
        width: 36px;
        height: 4px;
        background: rgba(60, 60, 67, 0.18);
        border-radius: 2px;
        margin: 0 auto 14px;
    }

    .sheet__title {
        font-family: var(--font-body);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.04em;
        color: var(--fg-secondary);
        text-align: center;
        margin: 0 0 18px;
        text-transform: uppercase;
    }

    .sheet__list {
        display: flex;
        flex-direction: column;
        gap: 1px;
        background: rgba(60, 60, 67, 0.08);
        border-radius: 13px;
        overflow: hidden;
        margin-bottom: 12px;
    }

    .sheet__item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 18px;
        background: #fff;
        text-decoration: none;
        color: var(--fg-primary);
        -webkit-tap-highlight-color: transparent;
        transition: background 0.12s ease;
        min-height: 56px;
    }

    .sheet__item:active {
        background: rgba(0, 0, 0, 0.04);
    }

    .sheet__item-glyph {
        flex-shrink: 0;
        color: var(--accent-on-light);
        width: 24px;
        height: 24px;
    }

    .sheet__item-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    .sheet__item-title {
        font-family: var(--font-body);
        font-size: 17px;
        font-weight: 500;
        color: var(--fg-primary);
        line-height: 1.25;
    }

    .sheet__item-desc {
        font-family: var(--font-body);
        font-size: 13px;
        color: var(--fg-secondary);
        line-height: 1.3;
    }

    .sheet__item-arrow {
        color: rgba(60, 60, 67, 0.3);
        font-size: 16px;
        flex-shrink: 0;
    }

    .sheet__close {
        width: 100%;
        padding: 14px;
        background: #fff;
        border: none;
        border-radius: 13px;
        font-family: var(--font-body);
        font-size: 17px;
        font-weight: 600;
        color: var(--accent-on-light);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.12s ease;
    }

    .sheet__close:active {
        background: rgba(0, 0, 0, 0.04);
    }

    /* === Universal touch-target enforcement === */
    .nav__link,
    .btn,
    .pf-filter,
    .prices__tab,
    .footer__col a {
        min-height: 44px;
    }

    /* === [4] ROUNDED CARDS pass === */
    /* Buttons & form inputs — pill-style */
    .btn {
        border-radius: 14px;
    }
    .prices__search-label {
        border-radius: 16px;
    }
    .ring-calc__input {
        border-radius: 12px;
    }

    /* Filters / chips / tabs — pill (100px set in base rules) */

    /* Section content cards — 12-14px iOS standard */
    .price-row {
        border-radius: 12px;
        margin-bottom: 6px;
    }
    .price-row:last-child {
        margin-bottom: 0;
    }
    .quick-prices__grid,
    .metal-strip,
    .agreement-grid,
    .start-paths__grid,
    .why-custom__grid,
    .term-stats {
        border-radius: 16px;
    }
    .quick-price,
    .metal-line,
    .agreement-card,
    .path-card,
    .why-card,
    .term-stat {
        border-radius: 0; /* inside a rounded grid container — keep flat */
    }
    /* Cards living standalone (not in a grid container) get their own radius */
    .material-card,
    .term-card,
    .review-card,
    .style-card,
    .pf-item,
    .portfolio__item,
    .ex-tile {
        border-radius: 14px;
    }
    .ex-tile--big {
        border-radius: 16px;
    }
    .bridge__link {
        border-radius: 14px;
    }
    .bridge__link-arrow {
        /* Keep circle */
    }
    .faq-item__q {
        border-radius: 12px;
    }

    /* Diagnostic photo placeholder — round */
    .diagnostic__photo {
        border-radius: 16px;
    }

    /* Reforge visual (compare slider) — round */
    .reforge__visual {
        border-radius: 16px;
    }

    /* Material samples already round (circles) */

    /* === [5-7] HERO V-B + HOME SECTIONS + FOOTER === */
    /* ================================================================
       HERO Variant B — Atelier portrait
       Photo/video fills the hero zone; content lives in a glass capsule
       pinned to the bottom; small "С 2014" credential mark top-right;
       facts become a thin pill scroll-row below the photo zone.
       ================================================================ */
    .hero {
        min-height: 0;
        padding: 0;
        display: block;
    }

    /* Mobile hero photo — replaces desktop video (stripped by inline script) */
    .hero__bg-image {
        background:
            url('/public/images/hero-mobile.webp') center top / cover no-repeat,
            radial-gradient(ellipse 80% 60% at 75% 45%, rgba(200, 180, 150, 0.12) 0%, transparent 70%),
            radial-gradient(ellipse 40% 50% at 85% 55%, rgba(200, 170, 120, 0.08) 0%, transparent 60%),
            radial-gradient(ellipse 60% 80% at 20% 80%, rgba(26, 26, 26, 1) 0%, transparent 70%),
            linear-gradient(160deg, #1a1a1a 0%, #2a2420 40%, #1e1c1a 70%, #141210 100%);
    }

    /* Photo zone — fills viewport above tab bar minus facts band.
       --hero-h is set once by inline JS to a fixed pixel value so Chrome's
       address-bar resize animation can't cause layout jank. Falls back to
       80svh if JS hasn't run. */
    .hero__content {
        position: relative;
        height: var(--hero-h, 80svh);
        min-height: 460px;
        display: block;
        padding: 0;
        width: 100%;
        max-width: none;
    }

    /* Top-right credential mark "С 2014" — tiny gold capsule */
    .hero__content::before {
        content: 'С 2014';
        position: absolute;
        top: calc(var(--header-height, 64px) + 22px);
        right: 22px;
        z-index: 5;
        font-family: var(--font-body, 'Funnel Sans', sans-serif);
        font-size: 9px;
        font-weight: 500;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: rgba(200, 180, 150, 0.92);
        background: rgba(20, 16, 8, 0.42);
        -webkit-backdrop-filter: blur(10px) saturate(140%);
        backdrop-filter: blur(10px) saturate(140%);
        padding: 6px 12px 5px;
        border-radius: 100px;
        border: 1px solid rgba(200, 180, 150, 0.32);
    }

    /* Glass capsule — pinned to the bottom of the hero photo zone */
    .hero__text {
        position: absolute;
        left: 22px;
        right: 22px;
        bottom: 14px;
        padding: 22px 22px 22px;
        margin: 0;
        max-width: none;
        background: rgba(20, 16, 8, 0.38);
        -webkit-backdrop-filter: blur(12px) saturate(150%);
        backdrop-filter: blur(12px) saturate(150%);
        border: 1px solid rgba(255, 255, 255, 0.10);
        border-radius: 24px;
        box-shadow:
            0 14px 40px -16px rgba(0, 0, 0, 0.7),
            inset 0 1px 0 rgba(255, 255, 255, 0.10);
    }
    @supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
        .hero__text {
            background: rgba(20, 16, 8, 0.86);
        }
    }

    /* Title — collapse 4 spans into 2 lines:
       "Ремонт, реставрация," / "создание украшений" */
    .hero__title {
        font-size: 28px;
        line-height: 1.1;
        margin-bottom: 12px;
        letter-spacing: -0.01em;
    }
    .hero__title-line {
        display: inline;
    }
    .hero__title-line:nth-child(1)::after,
    .hero__title-line:nth-child(3)::after {
        content: ' ';
        white-space: normal;
    }
    .hero__title-line:nth-child(2)::after {
        content: '\A';
        white-space: pre;
    }

    /* Subtitle — italic gold serif under the title */
    .hero__subtitle {
        font-family: var(--font-display, 'Newsreader', serif);
        font-style: italic;
        font-size: 17px;
        text-transform: none;
        letter-spacing: 0;
        color: var(--accent-primary);
        margin-bottom: 18px;
        padding-left: 0;
        margin-left: 0;
        opacity: 0.94;
    }
    .hero__subtitle::before {
        display: none;
    }

    /* CTAs stack inside the capsule, full-width */
    .hero__cta {
        flex-direction: column;
        gap: 14px;
        margin-top: 0;
    }
    .hero__cta .btn {
        width: 100%;
        padding: 16px 26px;
        font-size: 16px;
        gap: 14px;
        letter-spacing: 0.01em;
    }
    .hero__cta .btn__icon {
        width: 24px;
        height: 24px;
    }
    .hero__cta .btn__icon svg {
        width: 24px;
        height: 24px;
    }
    .hero__cta .btn__arrow {
        display: none;
    }

    /* === Facts: thin pill scroll-row below the photo zone === */
    .hero__facts {
        margin-top: 0;
        padding: 14px 0 18px;
        background: rgba(0, 0, 0, 0.48);
        border-top: 1px solid rgba(200, 180, 150, 0.16);
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        touch-action: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }
    .hero__facts::-webkit-scrollbar { display: none; }
    .hero__facts-inner {
        display: flex;
        flex-direction: row;
        align-items: center;
        overflow: visible;
        gap: 8px;
        padding: 0 22px;
        scrollbar-width: none;
        grid-template-columns: none;
        position: static;
        width: max-content;
    }
    .hero__facts-inner::-webkit-scrollbar { display: none; }
    .hero__fact {
        flex: 0 0 auto;
        flex-direction: row;
        align-items: baseline;
        gap: 6px;
        padding: 8px 14px !important;
        background: rgba(200, 180, 150, 0.04);
        border: 1px solid rgba(200, 180, 150, 0.22);
        border-radius: 100px;
        white-space: nowrap;
        scroll-snap-align: start;
    }
    .hero__fact-divider { display: none; }
    .hero__fact-number {
        font-family: var(--font-display, 'Newsreader', serif);
        font-style: italic;
        font-size: 15px;
        line-height: 1;
        color: var(--accent-primary);
        letter-spacing: -0.01em;
    }
    .hero__fact-label {
        font-size: 10px;
        line-height: 1.2;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: rgba(200, 180, 150, 0.66);
    }

    /* === SERVICES — horizontal scroll-snap carousel === */
    .services {
        padding: 56px 0 48px;
    }
    .services__inner {
        padding: 0;
    }
    .services__header {
        padding: 0 22px;
        margin-bottom: 28px;
    }
    .services__title {
        font-size: 32px;
        line-height: 1.05;
    }
    .services__list {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        gap: 14px;
        padding: 20px 22px;
        margin: -20px 0;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 22px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .services__list::-webkit-scrollbar {
        display: none;
    }

    /* Reset desktop's vertical row spacing — cards now sit in a flex row,
       not a vertical stack. Without this, cards 2..N inherit margin-top:
       28px, raising card 0 visually relative to the rest. */
    .svc-row,
    .svc-row + .svc-row {
        margin-top: 0;
    }

    .svc-row {
        flex: 0 0 calc(100vw - 60px);
        max-width: 320px;
        height: 510px;
        scroll-snap-align: start;
        display: flex;
        flex-direction: column;
        background: #fff;
        border-radius: 20px;
        overflow: hidden;
        box-shadow:
            0 1px 2px rgba(20, 16, 8, 0.04),
            0 10px 28px -8px rgba(20, 16, 8, 0.10);
        border: 1px solid rgba(200, 180, 150, 0.18);
        align-self: stretch;
    }

    /* Reverse layout (alternating rows on desktop) — cancel on mobile */
    .svc-row--reverse {
        flex-direction: column;
    }

    .svc-row__media {
        width: 100%;
        height: 220px;
        aspect-ratio: auto;
        position: relative;
        overflow: hidden;
        flex-shrink: 0;
        order: 0;
    }

    .svc-row__image {
        position: absolute;
        inset: 0;
    }

    /* Hide compare slider chrome on mobile cards — show only the "after" gradient */
    .svc-row__image--compare .compare__before,
    .svc-row__image--compare .compare__handle,
    .svc-row__image--compare .compare__label,
    .svc-row__image--compare .compare__hint {
        display: none;
    }
    .svc-row__image--compare .compare__after {
        clip-path: none;
    }

    /* Hide media badge on mobile — body has its own "01 РЕМОНТ" eyebrow */
    .svc-row__badge {
        display: none;
    }

    .svc-row__body {
        padding: 20px 20px 18px;
        position: relative;
        flex: 1;
        display: flex;
        flex-direction: column;
        order: 1;
    }

    /* Hide complex desktop ornaments on mobile */
    .svc-row__ghost,
    .svc-row__divider,
    .svc-row__tags,
    .svc-row__bottom {
        display: none;
    }

    /* Eyebrow: "01" gold italic + small kicker */
    .svc-row__meta {
        margin-bottom: 10px;
        gap: 10px;
    }
    .svc-row__num {
        font-size: 14px;
        color: var(--accent-on-light, #A88554);
    }
    .svc-row__kicker {
        font-size: 10px;
        letter-spacing: 0.20em;
        color: rgba(20, 16, 8, 0.50);
    }

    .svc-row__title {
        font-size: 22px;
        line-height: 1.16;
        margin-bottom: 8px;
        letter-spacing: -0.005em;
    }

    .svc-row__desc {
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 16px;
        color: rgba(20, 16, 8, 0.62);
        /* clamp to 3 lines for consistency */
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Footer pinned to bottom — small price tag + bordered "Подробнее" pill */
    .svc-row__footer {
        margin-top: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }
    .svc-row__price {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }
    .svc-row__price-label {
        font-size: 9px;
        letter-spacing: 0.20em;
        text-transform: uppercase;
        color: rgba(20, 16, 8, 0.42);
    }
    .svc-row__price-value {
        font-family: var(--font-display, 'Newsreader', serif);
        font-size: 18px;
        font-weight: 500;
        color: rgba(20, 16, 8, 0.92);
        letter-spacing: -0.01em;
    }
    /* Bordered "Подробнее" pill — matches the bordered button style
       used elsewhere on home (custom block, hero CTAs, etc.) */
    .svc-row__link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 16px;
        padding-bottom: 9px;
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--accent-on-light, #A88554);
        background: rgba(168, 133, 84, 0.04);
        border: 1px solid rgba(168, 133, 84, 0.32);
        border-radius: 100px;
        white-space: nowrap;
    }
    /* Desktop's underline ::before/::after lines are baggage on mobile
       — they paint a hairline under the pill that reads as a stray bar. */
    .svc-row__link::before,
    .svc-row__link::after {
        display: none;
    }
    .svc-row__link span {
        font-size: 14px;
        line-height: 1;
        transform: translateY(-1px);
    }

    /* === PROCESS — horizontal carousel for the 4 steps === */
    .process {
        padding: 56px 0;
    }
    .process__inner {
        padding: 0;
    }
    .process__header {
        padding: 0 22px;
        margin-bottom: 32px;
    }
    .process__title {
        font-size: 32px;
        line-height: 1.05;
    }
    .process__list {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        gap: 14px;
        padding: 20px 22px;
        margin: -20px 0;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 22px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        list-style: none;
        margin: 0;
    }
    .process__list::-webkit-scrollbar {
        display: none;
    }
    .process__step {
        flex: 0 0 calc(100vw - 60px);
        max-width: 320px;
        min-height: 320px;
        scroll-snap-align: start;
        background: #fff;
        border-radius: 18px;
        padding: 32px 22px 28px;
        border: 1px solid var(--border-hairline-gold);
        box-shadow:
            0 1px 2px rgba(20, 16, 8, 0.04),
            0 6px 18px rgba(20, 16, 8, 0.05);
        display: flex;
        flex-direction: column;
        gap: 0;
        position: relative;
    }
    .process__step:first-child {
        padding-top: 32px;
        border-top: 1px solid var(--border-hairline-gold);
    }
    /* Top row: num + kicker on one line — meta header */
    .process__step-num {
        font-size: 26px;
        line-height: 1;
        color: var(--accent-on-light);
        display: inline-block;
        margin-right: 12px;
    }
    .process__step-kicker {
        font-size: 10px;
        letter-spacing: 0.18em;
        color: rgba(20, 16, 8, 0.45);
        display: inline-block;
        vertical-align: middle;
        position: relative;
        top: -4px;
    }
    /* Hairline rule under meta */
    .process__step-num::after {
        content: '';
        display: block;
        width: 28px;
        height: 1px;
        background: var(--accent-on-light);
        margin-top: 14px;
        opacity: 0.5;
    }
    .process__step-title {
        font-size: 22px;
        line-height: 1.2;
        margin-top: 14px;
        margin-bottom: 10px;
    }
    .process__step-desc {
        font-size: 14px;
        line-height: 1.5;
    }

    /* === CUSTOM — compact dark CTA block === */
    .custom {
        padding: 56px 0;
    }
    .custom__inner {
        padding: 0 22px;
    }
    .custom__title {
        font-size: 32px;
        line-height: 1.05;
    }
    .custom__desc {
        font-size: 15px;
        line-height: 1.55;
        color: rgba(244, 242, 239, 0.75);
    }
    /* Journey tagline — mobile sizing */
    .custom__journey {
        font-size: 16px;
        margin-bottom: 24px;
    }
    .custom__journey span {
        margin: 0 6px;
    }

    /* "Все 6 шагов процесса" — convert to outline button-card */
    .custom__learn-more {
        display: flex;
        width: 100%;
        margin-top: 14px;
        padding: 14px 18px;
        border: 1px solid rgba(200, 180, 150, 0.30);
        border-bottom: 1px solid rgba(200, 180, 150, 0.30);
        border-radius: 14px;
        background: rgba(200, 180, 150, 0.04);
        justify-content: space-between;
        font-size: 12px;
        letter-spacing: 0.14em;
    }
    .custom__learn-more span {
        font-size: 16px;
    }

    /* Stack messenger CTAs full-width */
    .custom__cta {
        flex-direction: column;
        gap: 10px;
    }
    .custom__cta .btn {
        width: 100%;
        justify-content: center;
    }

    /* === WEDDING TEASER — Variant 1 «Object hero» ===
       Mobile-only restructure: 4:3 photo card on top, clean content
       column below (no glass), drop stats + bullets, primary CTA full
       width, dual messenger pills (TG + Max) below.
       Desktop's bg-image and floating glass card are killed on mobile. */
    .wedding-teaser {
        padding: 56px 22px 56px;
        background-color: var(--surface-primary, #F4F2EF);
        align-items: stretch;
        min-height: 0;
    }
    .wedding-teaser__inner {
        padding: 0;
        grid-template-columns: 1fr;
        gap: 0;
        display: flex;
        flex-direction: column;
    }

    /* Photo card — 4:3 macro frame at top */
    .wedding-teaser__photo {
        display: block;
        width: 100%;
        aspect-ratio: 4 / 3;
        border-radius: 20px;
        overflow: hidden;
        background-image: url('/public/images/wedding-teaser-mobile.webp');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        margin-bottom: 28px;
        box-shadow:
            0 1px 2px rgba(20, 16, 8, 0.06),
            0 14px 36px -12px rgba(20, 16, 8, 0.18);
    }

    /* Content card — clean column, no glass */
    .wedding-teaser__card {
        grid-column: 1;
        max-width: 100%;
        padding: 0;
        border-radius: 0;
        background: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border: none;
        box-shadow: none;
    }
    .wedding-teaser__card::before,
    .wedding-teaser__card::after {
        display: none;
    }

    .wedding-teaser__eyebrow {
        font-size: 10px;
        letter-spacing: 0.22em;
        color: var(--accent-on-light, #A88554);
        opacity: 1;
        margin-bottom: 12px;
    }
    .wedding-teaser__title {
        font-size: 30px;
        line-height: 1.08;
        color: rgba(20, 16, 8, 0.92);
        margin-bottom: 12px;
    }
    .wedding-teaser__title em {
        color: var(--accent-on-light, #A88554);
    }
    .wedding-teaser__desc {
        font-size: 13.5px;
        line-height: 1.5;
        color: rgba(20, 16, 8, 0.55);
        margin-bottom: 20px;
    }

    /* Stats — warm tinted badge pills */
    .wedding-teaser__stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        border: none;
        padding: 0;
        margin-bottom: 14px;
    }
    .wedding-teaser__stat {
        padding: 12px 8px;
        border-radius: 40px;
        background: rgba(200, 180, 150, 0.12);
        border: none;
        text-align: center;
    }
    .wedding-teaser__stat + .wedding-teaser__stat {
        border-left: none;
    }
    .wedding-teaser__stat:last-child {
        border-right: none;
    }
    .wedding-teaser__stat-label {
        font-size: 8px;
        letter-spacing: 0.12em;
        color: rgba(20, 16, 8, 0.38);
        margin-bottom: 2px;
    }
    .wedding-teaser__stat-value {
        font-size: 19px;
        color: var(--accent-on-light, #A88554);
    }
    .wedding-teaser__stat-value span {
        font-size: 10px;
        color: rgba(20, 16, 8, 0.38);
    }

    /* Bullets — 2×2 rounded cards with gold accent dot */
    .wedding-teaser__bullets {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 0;
        margin: 0 0 22px;
    }
    .wedding-teaser__bullets li {
        position: relative;
        font-size: 12.5px;
        line-height: 1.35;
        padding: 18px 12px 14px;
        color: rgba(20, 16, 8, 0.68);
        border: 1px solid rgba(200,180,150,0.28);
        border-radius: 16px;
        background: #fff;
    }
    .wedding-teaser__bullets li::before {
        content: '';
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--accent-on-light, #A88554);
        margin-bottom: 8px;
        position: static;
        padding: 0;
    }

    /* CTAs: primary full-width + dual messenger pills below */
    .wedding-teaser__ctas {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .wedding-teaser__btn-primary {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
    }
    /* Hide desktop's single Telegram secondary CTA on mobile */
    .wedding-teaser__btn-msg {
        display: none;
    }

    /* Mobile messenger pair (Telegram + Max) */
    .wedding-teaser__msgs {
        display: block;
        margin-top: 18px;
    }
    .wedding-teaser__msgs-label {
        display: block;
        text-align: center;
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: rgba(20, 16, 8, 0.42);
        margin-bottom: 10px;
    }
    .wedding-teaser__msgs-row {
        display: flex;
        gap: 10px;
    }
    .wedding-teaser__msg-pill {
        flex: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 11px 16px;
        border: 1px solid rgba(168, 133, 84, 0.32);
        border-radius: 100px;
        background: rgba(168, 133, 84, 0.04);
        color: var(--accent-on-light, #A88554);
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0.04em;
        text-decoration: none;
        white-space: nowrap;
    }
    .wedding-teaser__msg-pill svg {
        flex-shrink: 0;
    }

    /* === PORTFOLIO — horizontal carousel === */
    .portfolio {
        padding: 56px 0;
    }
    .portfolio__inner {
        padding: 0;
    }
    .portfolio__header {
        padding: 0 22px;
        margin-bottom: 28px;
    }
    .portfolio__title {
        font-size: 32px;
        line-height: 1.05;
    }
    /* === Shared mobile carousel (portfolio + examples) === */
    .portfolio__grid,
    .ex-gallery {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        gap: 12px;
        padding: 20px 22px;
        margin: -20px 0;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 22px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        grid-template-columns: none;
        grid-template-rows: none;
    }
    .portfolio__grid::-webkit-scrollbar,
    .ex-gallery::-webkit-scrollbar {
        display: none;
    }
    .portfolio__item,
    .ex-tile {
        flex: 0 0 calc(100vw - 60px);
        max-width: 320px;
        aspect-ratio: auto;
        height: auto;
        min-height: 0;
        scroll-snap-align: start;
        grid-column: auto;
        grid-row: auto;
        border-radius: 18px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        position: relative;
        text-align: left;
        background:
            url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"),
            #FBF9F6;
        background-size: 200px 200px, auto;
        padding: 10px;
        border: 1px solid rgba(20, 16, 8, 0.10);
        box-shadow:
            0 1px 2px rgba(20, 16, 8, 0.04),
            0 14px 32px -18px rgba(20, 16, 8, 0.22);
        isolation: isolate;
        -webkit-tap-highlight-color: transparent;
    }
    .portfolio__item::before,
    .ex-tile::after {
        content: '';
        position: absolute;
        inset: 5px;
        border: 1px solid rgba(168, 133, 84, 0.28);
        border-radius: 13px;
        pointer-events: none;
        z-index: 10;
    }
    .portfolio__item-img,
    .ex-tile::before {
        position: relative;
        inset: auto;
        width: 100%;
        aspect-ratio: 4 / 5;
        border-radius: 12px;
        flex-shrink: 0;
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.10),
            inset 0 1px 0 rgba(255, 255, 255, 0.20),
            inset 0 -10px 22px -16px rgba(0, 0, 0, 0.40);
    }
    .portfolio__item-img {
        overflow: hidden;
    }
    .ex-tile::before {
        display: block;
        height: auto;
        opacity: 1;
        background: var(--g, linear-gradient(135deg, #2a2520 0%, #c8b496 100%));
    }
    .portfolio__item--featured {
        /* Same size as other cards in mobile carousel */
    }
    .portfolio__item-shade {
        display: none;
    }    .portfolio__item-meta {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        padding: 12px 6px 4px;
        background: none;
        transform: none;
    }
    .portfolio__item-cat {
        color: var(--accent-on-light);
    }
    .portfolio__item-title {
        color: var(--fg-primary);
        font-size: 17px;
        line-height: 1.2;
        margin-bottom: 0;
    }
    .portfolio__item-title em {
        color: var(--accent-on-light);
    }
    .portfolio__item--featured .portfolio__item-title {
        font-size: 17px;
    }
    .portfolio__item--featured .portfolio__item-meta {
        padding: 12px 6px 4px;
    }
    .portfolio__item-hint {
        display: none;
    }
    .portfolio__cta {
        padding: 24px 22px 0;
        text-align: center;
    }
    .portfolio__cta .btn {
        width: 100%;
        justify-content: center;
    }

    /* === CONTACTS — carousel + tight map, hide redundant connect panel === */
    .contacts {
        padding: 48px 0 56px;
    }
    .contacts__inner {
        padding: 0;
    }
    .contacts__header {
        padding: 0 22px;
        margin-bottom: 24px;
        padding-bottom: 0;
    }
    .contacts__eyebrow {
        font-size: 10px;
    }
    .contacts__title {
        font-size: 30px;
        line-height: 1.05;
    }
    .contacts__rule {
        display: none;
    }

    /* Cards as horizontal scroll-snap carousel */
    .contacts__cards {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        gap: 12px;
        padding: 20px 22px;
        margin: -20px 0;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 22px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        grid-template-columns: none;
        margin-bottom: 24px;
    }
    .contacts__cards::-webkit-scrollbar {
        display: none;
    }

    .contact-card {
        flex: 0 0 calc(100vw - 60px);
        max-width: 320px;
        scroll-snap-align: start;
        flex-direction: column;
        padding: 22px 22px 20px;
        background: rgba(255, 255, 255, 0.03);
        border-radius: 18px;
        border: 1px solid rgba(255, 255, 255, 0.10);
        gap: 0;
    }

    .contact-card--featured {
        background: rgba(200, 180, 150, 0.06);
        border-color: rgba(200, 180, 150, 0.30);
        /* Featured "Ателье" card moves to first slot on mobile */
        order: -1;
    }

    .contact-card__top {
        margin-bottom: 14px;
        width: 100%;
    }
    .contact-card__type {
        font-size: 9px;
        margin-bottom: 6px;
    }
    .contact-card__name {
        font-size: 22px;
        line-height: 1.15;
    }

    .contact-card__body {
        margin-bottom: 14px;
        flex: none;
        min-width: 0;
    }
    .contact-card__address {
        font-size: 13px;
        line-height: 1.5;
        margin-bottom: 10px;
    }
    .contact-card__note {
        font-size: 11px;
    }
    .contact-card__phone {
        font-size: 15px;
        margin-bottom: 10px;
    }

    .contact-card__hours {
        gap: 4px;
    }
    .contact-card__hours-row {
        font-size: 12px;
    }

    .contact-card__actions {
        gap: 8px;
        align-self: stretch;
    }
    .contact-card__actions .btn--ghost-sm {
        flex: 1;
        text-align: center;
        padding: 9px 12px;
        font-size: 11px;
    }

    /* Map: tighter, full-width inside 22px gutter */
    .contacts__map {
        margin: 0 22px;
        border-radius: 16px;
        overflow: hidden;
        max-width: calc(100% - 44px);
        box-sizing: border-box;
    }
    .contacts__map iframe {
        height: 320px;
        width: 100%;
        display: block;
        border: 0;
    }

    /* Hide redundant connect panel — duplicated by bottom-bar Связь sheet */
    .contacts__form-wrap,
    .contacts__connect {
        display: none;
    }

    /* === FOOTER — restructured for mobile ===
       Brand block at top (centered), nav as 2-column compact list,
       contact tile, bottom row with copy + privacy. */
    .footer {
        padding: 0;
    }
    .footer__inner {
        padding: 0 22px;
    }
    .footer__main {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 40px 0 28px;
    }
    .footer__brand {
        text-align: center;
    }
    .footer__logo {
        font-size: 28px;
        margin-bottom: 10px;
        display: inline-block;
    }
    .footer__tagline {
        font-size: 13px;
        line-height: 1.55;
        margin: 0 auto 16px;
        max-width: 280px;
        opacity: 0.7;
    }
    .footer__messengers {
        justify-content: center;
        gap: 10px;
    }
    .footer__messenger-link {
        padding: 9px 14px;
        font-size: 12px;
        border-radius: 100px;
        border: 1px solid rgba(200, 180, 150, 0.30);
    }

    /* Nav: 2-col compact */
    .footer__nav {
        border-top: 1px solid rgba(200, 180, 150, 0.12);
        padding-top: 22px;
    }
    .footer__col-label {
        display: block;
        text-align: center;
        font-size: 10px;
        letter-spacing: 0.22em;
        margin-bottom: 14px;
        opacity: 0.55;
    }
    .footer__nav-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px 18px;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .footer__nav-list a {
        font-size: 13px;
        opacity: 0.78;
    }

    /* Contact block — pill phone tile */
    .footer__contact {
        border-top: 1px solid rgba(200, 180, 150, 0.12);
        padding-top: 22px;
        text-align: center;
    }
    .footer__phone {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 12px 22px;
        background: rgba(200, 180, 150, 0.06);
        border: 1px solid rgba(200, 180, 150, 0.30);
        border-radius: 100px;
        font-size: 16px;
        margin-bottom: 8px;
        color: var(--accent-primary);
    }
    .footer__address-brief {
        font-size: 12px;
        opacity: 0.55;
        margin: 0;
    }

    /* Bottom strip: copy + privacy in one tight column */
    .footer__bottom {
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 16px 0 24px;
        border-top: 1px solid rgba(200, 180, 150, 0.10);
        text-align: center;
    }
    .footer__copy {
        font-size: 11px;
        opacity: 0.45;
        margin: 0;
    }
    .footer__privacy {
        font-size: 11px;
        opacity: 0.55;
    }

    /* === [8] DEEP PAGES — /uslugi/izgotovlenie/ + /uslugi/obruchalnye-koltsa/ + /tseny/ === */
    /* === PAGE-HEAD: replace editorial CTAs with TG+Max pair ===
       All three deep templates share the same mobile pattern. */
    .page-head--izg,
    .page-head--obr,
    .page-head--prices {
        padding: 96px 0 36px;
        overflow: hidden;
    }
    .page-head--izg .page-head__inner,
    .page-head--obr .page-head__inner,
    .page-head--prices .page-head__inner {
        padding: 0 22px;
    }
    .page-head--izg .breadcrumbs,
    .page-head--obr .breadcrumbs,
    .page-head--prices .breadcrumbs {
        font-size: 11px;
        margin-bottom: 28px;
    }
    .page-head--izg .page-head__eyebrow,
    .page-head--obr .page-head__eyebrow,
    .page-head--prices .page-head__eyebrow {
        font-size: 10px;
        letter-spacing: 0.20em;
    }
    .page-head--izg .page-head__title,
    .page-head--obr .page-head__title,
    .page-head--prices .page-head__title {
        font-size: 36px;
        line-height: 1.06;
        letter-spacing: -0.01em;
        margin-top: 14px;
        margin-bottom: 18px;
    }
    .page-head--izg .page-head__subtitle,
    .page-head--obr .page-head__subtitle,
    .page-head--prices .page-head__subtitle,
    .page-head--remont .page-head__subtitle {
        font-size: 15px;
        line-height: 1.55;
        margin-bottom: 22px;
    }

    /* Hide desktop CTAs on mobile (all three pages) */
    .page-head--izg .page-head__actions,
    .page-head--obr .page-head__actions,
    .page-head--prices .page-head__actions {
        display: none;
    }

    /* Obruchalnye + Prices: tertiary calc-link as inline text under the messenger
       pair. Visually distinct from the bordered pill CTAs above so it reads as
       "or alternatively" rather than competing as a third button. */
    .page-head--obr .page-head__calc-link,
    .page-head--prices .page-head__calc-link {
        display: block;
        margin: -4px 0 22px;
        padding: 0;
        font-family: var(--font-body, 'Funnel Sans', sans-serif);
        font-size: 13px;
        font-weight: 400;
        letter-spacing: 0;
        color: rgba(244, 242, 239, 0.55);
        background: transparent;
        border: none;
        text-decoration: none;
    }
    .page-head--obr .page-head__calc-link-text,
    .page-head--prices .page-head__calc-link-text {
        color: var(--accent-primary);
        text-decoration: underline;
        text-decoration-color: rgba(200, 180, 150, 0.45);
        text-underline-offset: 3px;
        text-decoration-thickness: 1px;
    }
    .page-head--obr .page-head__calc-link-arrow,
    .page-head--prices .page-head__calc-link-arrow {
        margin-left: 4px;
        font-size: 12px;
        color: var(--accent-primary);
    }

    /* Show TG+Max messenger pair instead — matches home language */
    .page-head__msgs {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 22px;
    }
    .page-head__msg {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 14px 18px;
        font-family: var(--font-body, 'Funnel Sans', sans-serif);
        font-size: 14px;
        font-weight: 500;
        text-decoration: none;
        border-radius: 14px;
        white-space: nowrap;
    }
    .page-head__msg--primary {
        background: var(--accent-primary);
        color: #1A1A1A;
        border: 1px solid var(--accent-primary);
    }
    .page-head__msg--ghost {
        background: rgba(200, 180, 150, 0.04);
        color: var(--accent-primary);
        border: 1px solid rgba(200, 180, 150, 0.30);
    }

    /* Specs: stacked vertical → horizontal pill scroll-row.
       All three deep-pages share the spec-row pattern — izgot has label+value,
       obr/prices have value-only (just key facts: 4-6 нед / Бесплатно / etc). */
    .page-head--izg .page-head__specs,
    .page-head--obr .page-head__specs,
    .page-head--prices .page-head__specs,
    .page-head--remont .page-head__specs {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        touch-action: auto;
        scroll-snap-type: x proximity;
        gap: 8px;
        padding: 4px 22px 4px 22px;
        margin: 0 -22px;
        scrollbar-width: none;
        list-style: none;
        border-top: none;
        border-bottom: none;
    }
    .page-head--izg .page-head__specs::-webkit-scrollbar,
    .page-head--obr .page-head__specs::-webkit-scrollbar,
    .page-head--prices .page-head__specs::-webkit-scrollbar,
    .page-head--remont .page-head__specs::-webkit-scrollbar { display: none; }
    .page-head--izg .head-spec,
    .page-head--obr .head-spec,
    .page-head--prices .head-spec,
    .page-head--remont .head-spec {
        flex: 0 0 auto;
        flex-direction: row;
        align-items: baseline;
        gap: 6px;
        padding: 8px 14px;
        background: rgba(200, 180, 150, 0.04);
        border: 1px solid rgba(200, 180, 150, 0.22);
        border-radius: 100px;
        white-space: nowrap;
        margin: 0;
        scroll-snap-align: start;
    }
    .page-head--izg .head-spec__label,
    .page-head--remont .head-spec__label {
        font-size: 10px;
        letter-spacing: 0.18em;
        color: rgba(200, 180, 150, 0.66);
        text-transform: uppercase;
        margin-bottom: 0;
    }
    .page-head--izg .head-spec__val,
    .page-head--obr .head-spec__val,
    .page-head--prices .head-spec__val,
    .page-head--remont .head-spec__val {
        font-family: var(--font-display, 'Newsreader', serif);
        font-style: italic;
        font-size: 15px;
        color: var(--accent-primary);
        letter-spacing: -0.01em;
    }

    /* === PROCESS — 6 vertical steps → horizontal carousel === */
    .proc-full {
        padding: 56px 0 48px;
    }
    .proc-full__inner {
        padding: 0;
        max-width: none;
    }
    .proc-full__header {
        padding: 0 22px;
        margin-bottom: 28px;
    }
    .proc-full__eyebrow {
        font-size: 10px;
        letter-spacing: 0.20em;
    }
    .proc-full__title {
        font-size: 32px;
        line-height: 1.05;
        margin-bottom: 12px;
    }
    .proc-full__desc {
        font-size: 14px;
        line-height: 1.55;
    }

    .proc-timeline {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        gap: 14px;
        padding: 20px 22px;
        margin: -20px 0;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 22px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        list-style: none;
        margin: 0;
        /* Kill desktop's bg/border/shadow that wrapped the 3x2 grid —
           on mobile each card has its own border, the wrapper bg shows
           as a beige frame around cards. */
        background: transparent;
        border: none;
        box-shadow: none;
    }
    .proc-timeline::-webkit-scrollbar { display: none; }

    .proc-step-v {
        flex: 0 0 calc(100vw - 60px);
        max-width: 320px;
        min-height: 0;
        scroll-snap-align: start;
        background: #fff;
        border-radius: 18px;
        border: 1px solid var(--border-hairline-gold);
        padding: 22px 22px 22px;
        box-shadow:
            0 1px 2px rgba(20, 16, 8, 0.04),
            0 6px 18px rgba(20, 16, 8, 0.05);
        display: flex;
        flex-direction: column;
        gap: 0;
        margin: 0;
        grid-template-columns: none;
        align-items: stretch;
    }
    .proc-step-v__col-num {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0;
        margin-bottom: 12px;
        position: static;
        min-height: 0;
    }
    /* Hide the desktop dash element AND the ::after pseudo-line — both
       were producing the floating hairline. Just the italic numeral. */
    .proc-step-v__dash {
        display: none;
    }
    .proc-step-v__num {
        font-family: var(--font-display, 'Newsreader', serif);
        font-style: italic;
        font-size: 24px;
        color: var(--accent-on-light);
        line-height: 1;
        position: static;
    }
    .proc-step-v__num::after,
    .proc-step-v__num::before {
        display: none;
        content: none;
    }
    /* Kill the desktop reveal hairline (46px gold line at top-left of card)
       — on mobile cards are rounded and bordered, the floating hairline
       reads as a stray fragment. */
    .proc-step-v::before,
    .proc-step-v::after {
        display: none;
        content: none;
    }
    .proc-step-v__body {
        padding: 0;
    }
    .proc-step-v__meta {
        font-size: 10px;
        letter-spacing: 0.16em;
        color: rgba(20, 16, 8, 0.45);
        margin-bottom: 10px;
        display: block;
    }
    .proc-step-v__title {
        font-size: 22px;
        line-height: 1.18;
        margin-bottom: 10px;
    }
    .proc-step-v__desc {
        font-size: 14px;
        line-height: 1.5;
        color: rgba(20, 16, 8, 0.62);
    }

    /* === MATERIALS — card carousel === */
    .materials {
        padding: 48px 0;
    }
    .materials__inner {
        padding: 0 22px;
    }
    .materials__header {
        margin-bottom: 22px;
    }
    .materials__title {
        font-size: 32px;
        line-height: 1.05;
    }
    .metal-strip {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        gap: 12px;
        padding: 4px 22px 16px;
        margin: 0 -22px;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 22px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        background: transparent;
        border: none;
        box-shadow: none;
    }
    .metal-strip::-webkit-scrollbar { display: none; }
    .metal-line {
        flex: 0 0 calc(50vw - 34px);
        max-width: 170px;
        scroll-snap-align: start;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
        padding: 24px 14px 20px;
        min-height: auto;
        border: 1px solid rgba(200, 180, 150, 0.25);
        border-radius: 20px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(20, 16, 8, 0.04);
    }
    .metal-line:last-child { border-bottom: 1px solid rgba(200, 180, 150, 0.25); }
    .metal-line--featured {
        border-top: 2px solid var(--accent-primary);
        background: #fffdf8;
    }
    .metal-line--featured::before {
        top: 8px;
        right: 12px;
        font-size: 9px;
    }
    .metal-line__sample {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
    }
    .metal-line__body {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }
    .metal-line__head {
        flex-direction: column;
        align-items: center;
        gap: 1px;
    }
    .metal-line__assay {
        font-size: 28px;
        line-height: 1;
    }
    .metal-line__name {
        font-size: 9px;
        letter-spacing: 0.18em;
    }
    .metal-line__char {
        font-size: 11px;
        color: var(--fg-muted);
        margin-top: 2px;
        text-align: center;
    }    .materials__note {
        font-size: 13px;
        line-height: 1.55;
        margin-top: 18px;
        padding: 0;
        color: rgba(20, 16, 8, 0.62);
    }

    /* === REFORGE — static split visual ===
       Compare-slider JS bails on mobile → was showing only the dark "after"
       gradient (empty rectangle). Rebuild as a static diagonal split
       displaying both halves with labels — the visual moment without JS. */
    .reforge {
        padding: 56px 0;
    }
    .reforge__inner {
        padding: 0 22px;
        display: flex;
        flex-direction: column;
        gap: 0;
        grid-template-columns: none;
    }
    .reforge__visual {
        margin-bottom: 24px;
        order: 0;
        width: 100%;
        aspect-ratio: 4 / 3;
        height: auto;
        max-height: none;
        flex-shrink: 0;
        align-self: stretch;
    }
    .reforge__compare {
        position: relative;
        width: 100%;
        height: 100%;
        max-height: none;
        min-height: 0;
        border-radius: 18px;
        overflow: hidden;
        cursor: default;
        border: 1px solid rgba(200, 180, 150, 0.22);
    }
    /* Show BOTH halves with diagonal split */
    .reforge__compare .compare__before {
        position: absolute;
        inset: 0;
        display: block;
        clip-path: polygon(0 0, 62% 0, 38% 100%, 0 100%);
        background: var(--g-before);
        width: auto;
    }
    .reforge__compare .compare__after {
        position: absolute;
        inset: 0;
        clip-path: polygon(62% 0, 100% 0, 100% 100%, 38% 100%);
        background: var(--g);
        width: auto;
    }
    .reforge__compare .compare__handle,
    .reforge__compare .compare__hint {
        display: none;
    }
    /* Diagonal hairline divider */
    .reforge__compare::before {
        content: '';
        position: absolute;
        top: -10%;
        left: 50%;
        width: 1px;
        height: 120%;
        background: linear-gradient(180deg,
            transparent 0%,
            rgba(200, 180, 150, 0.55) 12%,
            rgba(200, 180, 150, 0.55) 88%,
            transparent 100%);
        transform-origin: center;
        transform: translateX(-50%) rotate(15deg);
        z-index: 1;
        pointer-events: none;
    }
    /* Labels on opposite corners */
    .reforge__compare .compare__label {
        position: absolute;
        font-family: var(--font-body);
        font-size: 10px;
        letter-spacing: 0.20em;
        font-weight: 500;
        text-transform: uppercase;
        padding: 6px 12px;
        border-radius: 100px;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        background: rgba(20, 16, 8, 0.50);
        color: rgba(244, 242, 239, 0.92);
        z-index: 3;
        opacity: 1;
    }
    .reforge__compare .compare__label--before {
        top: 16px;
        left: 16px;
        right: auto;
        bottom: auto;
    }
    .reforge__compare .compare__label--after {
        bottom: 16px;
        right: 16px;
        top: auto;
        left: auto;
    }

    .reforge__content {
        padding: 0;
    }
    .reforge__eyebrow {
        font-size: 10px;
        letter-spacing: 0.20em;
    }
    .reforge__title {
        font-size: 32px;
        line-height: 1.05;
        margin-bottom: 14px;
    }
    .reforge__desc {
        font-size: 14px;
        line-height: 1.55;
        margin-bottom: 20px;
    }
    .reforge__list {
        margin-bottom: 22px;
        gap: 12px;
        padding: 0;
    }
    .reforge__list li {
        font-size: 14px;
        line-height: 1.45;
    }
    .reforge__cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        padding: 14px 20px;
        background: rgba(200, 180, 150, 0.06);
        color: var(--accent-primary);
        border: 1px solid rgba(200, 180, 150, 0.32);
        border-radius: 14px;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0;
        text-decoration: none;
        text-transform: none;
    }
    .reforge__cta::before,
    .reforge__cta::after {
        display: none;
    }
    .reforge__cta svg {
        flex-shrink: 0;
    }

/* === EXAMPLES — show titles, tighten paddings === */
    .examples--gallery {
        padding: 56px 0;
    }
    .examples--gallery .examples__inner {
        padding: 0 22px;
    }
    /* Match desktop's `.examples--gallery .examples__header` specificity so
       cascade picks our 22px instead of desktop's 48px margin-bottom */
    .examples--gallery .examples__header {
        margin-bottom: 22px;
    }
    .examples__title {
        font-size: 30px;
        line-height: 1.05;
    }
    .examples__desc {
        font-size: 14px;
        line-height: 1.55;
    }
    .examples--gallery .examples__inner {
        padding: 0;
    }
    .examples--gallery .examples__header {
        padding: 0 22px;
    }
    /* ex-tile container, card, border, image — see shared carousel rules above */

    .ex-tile__num {
        position: absolute;
        top: 20px;
        left: 20px;
        font-size: 28px;
        color: rgba(255, 255, 255, 0.82);
        z-index: 2;
    }
    .ex-tile--big .ex-tile__num {
        font-size: 28px;
        top: 20px;
        left: 20px;
    }
    .ex-tile__cat {
        display: block;
        position: relative;
        bottom: auto;
        left: auto;
        margin-top: 10px;
        padding: 0 4px;
        color: var(--accent-on-light);
        font-family: var(--font-body);
        font-size: 9px;
        font-weight: 500;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        transform: none;
        opacity: 1;
        z-index: 2;
    }
    .ex-tile--big .ex-tile__cat {
        bottom: auto;
        left: auto;
        font-size: 9px;
    }
    .ex-tile__title {
        position: relative;
        display: block;
        bottom: auto;
        left: auto;
        right: auto;
        max-width: none;
        text-align: left;
        font-family: var(--font-display, 'Newsreader', serif);
        font-style: italic;
        font-size: 17px;
        line-height: 1.2;
        font-weight: 400;
        color: var(--fg-primary);
        opacity: 1;
        transform: none;
        pointer-events: none;
        z-index: 2;
        padding: 0 4px;
        margin-top: 4px;
    }
    .ex-tile--big .ex-tile__title {
        bottom: auto;
        left: auto;
        right: auto;
        font-size: 17px;
    }
    /* === BRIDGE — tighter === */
    .bridge {
        padding: 32px 0;
    }
    .bridge__inner {
        padding: 0 22px;
    }
    .bridge__content {
        padding: 0;
    }
    .bridge__eyebrow {
        font-size: 10px;
        letter-spacing: 0.20em;
    }
    .bridge__title {
        font-size: 24px;
        line-height: 1.1;
        margin-bottom: 10px;
    }
    .bridge__desc {
        font-size: 13px;
        line-height: 1.5;
        margin-bottom: 16px;
    }
    .bridge__link {
        padding: 14px 16px 14px 20px;
    }
    .bridge__link-label {
        font-size: 14px;
    }
    .bridge__link-arrow {
        width: 38px;
        height: 38px;
    }

    /* === START PATHS — 3 stacked → carousel === */
    .start-paths {
        padding: 56px 0;
    }
    .start-paths__inner {
        padding: 0;
        max-width: none;
    }
    .start-paths__header {
        padding: 0 22px;
        margin-bottom: 24px;
    }
    .start-paths__title {
        font-size: 32px;
        line-height: 1.05;
    }
    .start-paths__grid {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        gap: 14px;
        padding: 20px 22px;
        margin: -20px 0;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 22px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        background: transparent;
        border-radius: 0;
        border: none;
        grid-template-columns: none;
        margin: 0;
    }
    .start-paths__grid::-webkit-scrollbar { display: none; }
    .path-card {
        flex: 0 0 calc(100vw - 60px);
        max-width: 320px;
        scroll-snap-align: start;
        background: #fff;
        border-radius: 18px;
        border: 1px solid var(--border-hairline-gold);
        padding: 24px 22px 22px;
        display: flex;
        flex-direction: column;
        gap: 0;
        min-height: 280px;
        box-shadow:
            0 1px 2px rgba(20, 16, 8, 0.04),
            0 6px 18px rgba(20, 16, 8, 0.05);
        margin: 0;
    }    .path-card__icon {
        width: 40px;
        height: 40px;
        margin-bottom: 16px;
    }
    .path-card__title {
        font-size: 22px;
        line-height: 1.18;
        margin-bottom: 10px;
    }
    .path-card__desc {
        font-size: 14px;
        line-height: 1.5;
        color: rgba(20, 16, 8, 0.62);
        margin-bottom: 16px;
    }
    .path-card__action {
        margin-top: auto;
    }
    .path-card__link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 16px;
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--accent-on-light);
        background: rgba(168, 133, 84, 0.04);
        border: 1px solid rgba(168, 133, 84, 0.32);
        border-radius: 100px;
        white-space: nowrap;
        text-decoration: none;
    }
    .path-card__link::before,
    .path-card__link::after {
        display: none;
    }

    /* === PRICES-CTA — final dark CTA === */
    .prices-cta {
        padding: 56px 0;
    }
    .prices-cta__inner {
        padding: 0 22px;
    }
    .prices-cta__eyebrow {
        font-size: 10px;
        letter-spacing: 0.20em;
    }
    .prices-cta__title {
        font-size: 30px;
        line-height: 1.06;
        margin-bottom: 14px;
    }
    .prices-cta__desc {
        font-size: 14px;
        line-height: 1.55;
        margin-bottom: 22px;
    }
    .prices-cta__buttons {
        flex-direction: column;
        gap: 10px;
    }
    .prices-cta__buttons .btn {
        width: 100%;
        justify-content: center;
        padding: 14px 18px;
        font-size: 14px;
    }
    /* Second messenger as outline (was filled gold — clashed with home pattern) */
    .prices-cta__buttons .btn--ghost-dark {
        background: rgba(200, 180, 150, 0.04);
        color: var(--accent-primary);
        border: 1px solid rgba(200, 180, 150, 0.30);
    }

    /* === BACK-HOME — gutter only === */
    .back-home {
        padding: 28px 22px 36px;
    }
    .back-home__link {
        font-size: 14px;
    }

    /* ===================================================================
       PRICES (/tseny/) specific sections
       =================================================================== */

    /* Quick-price chip-grid: each card needs its own rounded corners on
       mobile (2x2 layout, not flat-inside-container). Overrides the
       universal `quick-price { border-radius: 0 }` from the rounded-cards
       pass earlier in the @media block. Also kills the desktop outer
       border + the 1px gridlines created via gap+background. */
    .quick-price {
        border-radius: 14px;
    }
    .quick-prices__grid {
        border-radius: 0;
        background: transparent;
        border: none;
        gap: 10px;
    }

    /* Tabs: compact labels on mobile + clearer active state.
       Drops the long suffix ("Камни и покрытие" → "Камни") and replaces the
       single underline with a soft gold-tinted background fill so the active
       tab reads at-a-glance on a 375px viewport. */
    .prices__tab-label-suffix {
        display: none;
    }
    .prices__tab-label-full {
        display: none;
    }
    .prices__tab-label-short {
        display: inline;
    }
    .prices__tabs {
        gap: 6px;
        justify-content: flex-start;
        flex-wrap: nowrap;
        margin: 0 -22px 28px;
        padding: 0 22px;
        scroll-padding-left: 22px;
    }
    .prices__tab {
        flex: 0 0 auto;
        padding: 8px 16px;
        font-size: 12px;
        scroll-snap-align: start;
    }
    .prices__tab--active {
        background: var(--surface-inverse);
        border-color: var(--surface-inverse);
        color: var(--fg-inverse);
    }
    .prices__tab-num {
        font-size: 12px;
    }
    .prices__tab--active .prices__tab-num {
        color: var(--accent-primary);
    }
    .prices__tab-label {
        font-size: 13px;
        letter-spacing: 0.04em;
    }
    .prices__tab--active .prices__tab-label {
        color: var(--fg-inverse);
    }

    /* Section-1 inner padding tighter (matches deep-pages 22px gutter) */
    .prices__inner {
        padding: 0 22px;
    }
    .prices {
        padding: 32px 0 56px;
    }

    /* Price-group header: title + count on the same line (count was wrapping
       to its own line after we tightened the gutter). */
    .price-group {
        margin-bottom: 28px;
    }
    .price-group__title {
        font-family: var(--font-display, 'Newsreader', serif);
        font-style: italic;
        font-weight: 400;
        font-size: 18px;
        line-height: 1.2;
        letter-spacing: -0.005em;
        text-transform: none;
        color: var(--accent-on-light);
        margin-bottom: 12px;
        padding-bottom: 0;
        border-bottom: none;
        display: flex;
        align-items: baseline;
        flex-wrap: nowrap;
        gap: 8px;
    }
    .price-group__count {
        font-family: var(--font-body, 'Funnel Sans', sans-serif);
        font-style: normal;
        font-size: 11px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(200, 180, 150, 0.85);
        white-space: nowrap;
    }

    /* === Editorial menu approach (Michelin × Nordstrom) ===
       Drop the white card + hairline rows entirely. Items live directly on
       the cream page background. Each item is a typographic block:
         • Name (Funnel Sans 16px) + price (Newsreader italic 17px gold)
           on one baseline-aligned row
         • Description below in muted 12px
         • Generous 24px breathing room between items
       Popular flag = a hair-thin 2px gold mark on the LEFT margin only.
       No tinted backgrounds, no gold-on-gold, no card. */
    .price-list {
        background: transparent;
        border: none;
        border-radius: 0;
        overflow: visible;
        padding: 0;
    }
    .price-row {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        column-gap: 16px;
        row-gap: 8px;
        align-items: baseline;
        padding: 18px 18px;
        margin: 0 0 12px;
        background: #fff;
        border: 1px solid var(--border-hairline-gold);
        border-radius: 14px;
        box-shadow: 0 1px 2px rgba(20, 16, 8, 0.03);
    }
    .price-row:last-child {
        margin-bottom: 0;
    }
    .price-row__info {
        display: contents;
    }
    .price-row__name {
        grid-column: 1;
        grid-row: 1;
        font-family: var(--font-body, 'Funnel Sans', sans-serif);
        font-style: normal;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.005em;
        color: var(--fg-primary);
        margin: 0;
        padding-left: 0;
    }
    .price-row__desc {
        grid-column: 1 / -1;
        grid-row: 2;
        font-size: 13px;
        line-height: 1.55;
        color: var(--fg-secondary);
        margin: 0;
    }
    .price-row__value {
        grid-column: 2;
        grid-row: 1;
        font-family: var(--font-display, 'Newsreader', serif);
        font-style: italic;
        font-weight: 400;
        font-size: 17px;
        color: var(--accent-primary);
        white-space: nowrap;
        letter-spacing: -0.01em;
    }

    /* Free rows — same italic, slightly smaller, muted */
    .price-row--free .price-row__value {
        font-size: 15px;
        color: rgba(200, 180, 150, 0.85);
    }

    /* Popular row — keeps the white card, gains a 3px gold left border that
       replaces the regular hairline on that side. No background tint to
       avoid gold-on-gold; the marker is just the gold edge. */
    .price-row--popular {
        background: #fff;
        border: 1px solid var(--border-hairline-gold);
        border-left: 3px solid var(--accent-primary);
        position: relative;
    }
    .price-row--popular:hover {
        background: #fff;
    }
    .price-row--popular::before {
        display: none;
    }
    /* Kill name padding + dot from any earlier rule */
    .price-row--popular .price-row__name {
        position: static;
        padding-left: 0;
        color: var(--fg-primary);
        font-weight: 500;
    }
    .price-row--popular .price-row__name::before {
        display: none;
    }
    .price-row--popular .price-row__value {
        font-weight: 400;
    }
    /* Kill the desktop ::after "часто заказывают" caption */
    .price-row--popular .price-row__info::after {
        display: none;
    }

    /* Group: short gold rule beneath the title for editorial feel */
    .price-group {
        margin-bottom: 40px;
        padding-left: 0; /* cards now have their own gutter via box */
    }
    .price-group__title {
        margin-left: 0;
        margin-bottom: 18px;
    }
    .price-group__title::after {
        content: "";
        display: block;
        width: 36px;
        height: 1px;
        background: var(--accent-primary);
        margin-top: 12px;
        margin-bottom: 0;
        opacity: 0.6;
    }

    /* === Kill remaining animations on mobile (tseny) === */
    .prices__panel--active {
        animation: none;
    }
    .price-row--highlight {
        animation: none;
        background: transparent;
    }
    .price-row,
    .quick-price,
    .prices__tab,
    .prices__search-label {
        transition: none;
    }
    .price-row:hover,
    .quick-price:hover,
    .prices__tab:hover {
        background: inherit;
        transform: none;
        box-shadow: inherit;
    }
    .price-row--popular:hover {
        background: #fff;
    }
    .quick-price:hover {
        padding: 14px 14px;
    }
    .prices__tab:hover {
        padding: 10px 14px;
    }

    /* === Kill stray hairlines on mobile (tseny) === */
    /* Disclaimer no longer needs a top divider — the gap to the next dark
       cta block already separates it visually. */
    .prices__disclaimer {
        margin-top: 32px;
        padding-top: 0;
        border-top: none;
        font-size: 12px;
        line-height: 1.55;
        color: var(--fg-secondary);
    }
    /* Diagnostic section — compact editorial card on mobile */
    .diagnostic {
        border-top: none;
        border-bottom: none;
        padding: 40px 0 48px;
    }
    .diagnostic__photo {
        max-width: none;
        width: 100%;
        border-radius: 14px;
        margin: 0;
    }
    .diagnostic__inner {
        gap: 24px;
    }
    .diagnostic__eyebrow {
        font-size: 10px;
        letter-spacing: 0.20em;
        margin-bottom: 14px;
    }
    .diagnostic__title {
        font-size: 26px;
        line-height: 1.08;
        margin-bottom: 14px;
    }
    .diagnostic__desc {
        font-size: 14px;
        line-height: 1.55;
        margin-bottom: 20px;
    }
    .diagnostic__list {
        gap: 8px;
    }
    .diagnostic__list li {
        background: #fff;
        border: 1px solid var(--border-hairline-gold);
        border-left: 3px solid var(--accent-primary);
        border-radius: 12px;
        padding: 14px 16px;
        font-size: 14px;
        line-height: 1.45;
    }
    .diagnostic__list li::before {
        display: none;
    }
    /* Note callout (only on Лазер tab) keeps its left gold accent — kill the
       big top/bottom margins so it doesn't feel disconnected. */
    .prices__note {
        margin-top: 32px;
    }

    /* ===================================================================
       OBRUCHALNYE-KOLTSA specific sections
       =================================================================== */

    /* === REVIEWS — 3 stacked cards → horizontal carousel === */
    .reviews {
        padding: 48px 0 56px;
    }
    .reviews__inner {
        padding: 0;
        max-width: none;
    }
    .reviews__eyebrow {
        font-size: 10px;
        letter-spacing: 0.20em;
        padding: 0 22px;
        display: block;
    }
    .reviews__title {
        font-size: 28px;
        line-height: 1.06;
        padding: 0 22px;
        margin-bottom: 24px;
    }
    .reviews__grid {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        gap: 14px;
        padding: 20px 22px;
        margin: -20px 0;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 22px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        grid-template-columns: none;
    }
    .reviews__grid::-webkit-scrollbar { display: none; }
    .review-card {
        flex: 0 0 calc(100vw - 60px);
        max-width: 320px;
        scroll-snap-align: start;
        background: #fff;
        border-radius: 18px;
        border: 1px solid var(--border-hairline-gold);
        padding: 24px 22px 22px;
        margin: 0;
        min-height: 220px;
        display: flex;
        flex-direction: column;
    }
    .review-card__text {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 18px;
        flex: 1;
    }
    .review-card__author {
        gap: 4px;
    }
    .review-card__name {
        font-size: 14px;
    }
    .review-card__meta {
        font-size: 11px;
        letter-spacing: 0.10em;
    }
    /* Internal TODO note for Ilya — not user-facing */
    .reviews__note {
        display: none;
    }

    /* === FAQ — compact accordion === */
    .faq {
        padding: 48px 0 56px;
    }
    .faq__inner {
        padding: 0 22px;
    }
    .faq__header {
        margin-bottom: 22px;
    }
    .faq__eyebrow {
        font-size: 10px;
        letter-spacing: 0.20em;
    }
    .faq__title {
        font-size: 30px;
        line-height: 1.06;
    }
    .faq__list {
        gap: 0;
    }
    .faq-item {
        border-top: 1px solid var(--border-hairline-gold);
    }
    .faq-item:last-child {
        border-bottom: 1px solid var(--border-hairline-gold);
    }
    .faq-item__q {
        padding: 18px 0;
        gap: 14px;
    }
    .faq-item__q-text {
        font-size: 15px;
        line-height: 1.35;
    }
    .faq-item__q-icon {
        flex-shrink: 0;
    }
    .faq-item__a {
        padding: 0 0 18px;
    }
    /* === PAIR ESSENTIALS — mobile: rounded photo card → title → 2×2 grid === */
    .pair-essentials {
        padding: 48px 0;
    }
    .pair-essentials__inner {
        padding: 0 22px;
        display: flex;
        flex-direction: column;
        gap: 0;
        max-width: none;
    }

    /* Photo: rounded card at top, cohesive with feature cards */
    .pair-essentials__photo {
        order: -1;
        width: 100%;
        margin: 0 0 28px;
        border-radius: 20px;
        min-height: auto;
        border: none;
        overflow: hidden;
        background: linear-gradient(145deg, #d6cec4 0%, #bfb5a8 100%);
    }
    .pair-essentials__photo img {
        aspect-ratio: 16 / 10;
        width: 100%;
        border-radius: 0;
        display: block;
    }

    /* Content below photo */
    .pair-essentials__content {
        padding: 0;
    }
    .pair-essentials__eyebrow {
        font-size: 10px;
        letter-spacing: 0.20em;
    }
    .pair-essentials__title {
        font-size: 26px;
        line-height: 1.1;
        margin-bottom: 10px;
    }
    .pair-essentials__desc {
        font-size: 13.5px;
        line-height: 1.5;
        color: var(--fg-muted);
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
        max-width: none;
    }

    /* 2×2 feature grid — rounded cards */
    .pair-essentials__list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 24px 0 0;
        margin: 0;
    }
    .pair-essentials__list li {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 18px 16px;
        font-size: 13px;
        line-height: 1.4;
        border: 1px solid rgba(200, 180, 150, 0.28);
        border-radius: 16px;
        background: #fff;
    }
    .pair-essentials__list li::before {
        display: none;
    }
    /* Bold serif feature titles */
    .pair-essentials__list li strong {
        display: block;
        font-family: var(--font-display);
        font-size: 15px;
        font-weight: 500;
        color: var(--fg-primary);
        line-height: 1.25;
    }
    .pair-essentials__list li strong::after {
        display: none;
    }
    .pair-essentials__list li > span {
        display: block;
        font-family: var(--font-body);
        font-size: 12.5px;
        color: var(--fg-muted);
        line-height: 1.4;
    }

    /* === RING-CALC — compact form, keep result hero === */
    .ring-calc {
        padding: 48px 0 48px;
    }
    .ring-calc__inner {
        padding: 0 22px;
        max-width: none;
    }
    .ring-calc__header {
        margin-bottom: 22px;
    }
    .ring-calc__eyebrow {
        font-size: 10px;
        letter-spacing: 0.20em;
    }
    .ring-calc__title {
        font-size: 30px;
        line-height: 1.06;
        margin-bottom: 12px;
    }
    .ring-calc__desc {
        font-size: 14px;
        line-height: 1.5;
    }
    .ring-calc__form {
        padding: 22px;
        gap: 18px;
    }
    .ring-calc__row {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .ring-calc__field {
        gap: 8px;
    }
    .ring-calc__label {
        font-size: 10px;
        letter-spacing: 0.18em;
    }
    .ring-calc__input {
        padding: 12px 16px;
        font-size: 15px;
    }
    .ring-calc__result {
        padding-top: 18px;
    }
    .ring-calc__result-label {
        font-size: 10px;
        letter-spacing: 0.20em;
    }
    .ring-calc__result-value {
        font-size: 28px;
    }
    .ring-calc__result-breakdown {
        font-size: 12px;
        line-height: 1.5;
    }
    .ring-calc__disclaimer {
        font-size: 12px;
        line-height: 1.5;
        margin-top: 18px;
    }

    /* === ENGRAVING — tighter paddings, keep editorial sample === */
    /* === ENGRAVING — mobile: photo card → title → horizontal card carousel === */
    .engraving {
        padding: 48px 0;
        overflow: hidden;
    }
    .engraving__inner {
        padding: 0 22px;
        display: flex;
        flex-direction: column;
        gap: 0;
        overflow: visible;
    }

    /* Photo: rounded card at top */
    .engraving__sample {
        order: -1;
        width: 100%;
        max-width: none;
        margin: 0 0 24px;
        aspect-ratio: auto;
    }
    .engraving__sample-photo {
        border-radius: 20px;
        overflow: hidden;
        aspect-ratio: 16 / 10;
    }
    .engraving__sample-caption {
        font-size: 10px;
        letter-spacing: 0.22em;
        padding: 10px 0 0;
    }
    /* Content — min-width:0 prevents flex child from expanding beyond parent */
    .engraving__content {
        margin-bottom: 0;
        padding: 0;
        min-width: 0;
        width: 100%;
    }
    .engraving__eyebrow {
        font-size: 10px;
        letter-spacing: 0.20em;
    }
    .engraving__title {
        font-size: 26px;
        line-height: 1.1;
        margin-bottom: 10px;
    }
    .engraving__desc {
        font-size: 13.5px;
        line-height: 1.5;
        margin-bottom: 20px;
        color: rgba(255, 255, 255, 0.55);
    }

    /* Horizontal scroll carousel of dark cards */
    .engraving__list {
        display: flex;
        overflow-x: auto;
        gap: 10px;
        /* full-bleed: вырываемся из боковых отступов .engraving__inner (22px),
           чтобы карточки прокручивались до края экрана, а не прятались за ним */
        margin: 0 -22px;
        padding: 4px 22px 16px;
        scroll-snap-type: x proximity;
        scroll-padding-left: 22px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .engraving__list::-webkit-scrollbar {
        display: none;
    }
    .engraving__list li {
        flex: 0 0 calc(42vw - 10px);
        max-width: 155px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 18px 14px;
        margin: 0;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(200, 180, 150, 0.18);
        scroll-snap-align: start;
    }
    .engraving__list li::before {
        display: none;
    }
    .engraving__list li strong {
        display: block;
        font-size: 14px;
        font-weight: 500;
        color: var(--accent-primary);
        line-height: 1.25;
    }
    .engraving__list li strong::after {
        display: none;
    }
    .engraving__list li > span {
        display: block;
        font-family: var(--font-body);
        font-size: 12px;
        color: rgba(255, 255, 255, 0.45);
        line-height: 1.4;
    }

    /* === PROCESS (obr) — 5 steps → horizontal carousel ===
       Different class structure than izgot (.proc-step vs .proc-step-v).
       Same visual carousel pattern though. */
    .proc-full__grid {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        gap: 14px;
        padding: 20px 22px;
        margin: -20px 0;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 22px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        grid-template-columns: none;
        background: transparent;
        border: none;
        box-shadow: none;
        margin: 0;
    }
    .proc-full__grid::-webkit-scrollbar { display: none; }
    .proc-step {
        flex: 0 0 calc(100vw - 60px);
        max-width: 320px;
        min-height: 0;
        scroll-snap-align: start;
        background: #fff;
        border-radius: 18px;
        border: 1px solid var(--border-hairline-gold);
        padding: 22px 22px 22px;
        box-shadow:
            0 1px 2px rgba(20, 16, 8, 0.04),
            0 6px 18px rgba(20, 16, 8, 0.05);
        display: flex;
        flex-direction: column;
        gap: 0;
        margin: 0;
    }
    .proc-step__num {
        font-family: var(--font-display, 'Newsreader', serif);
        font-style: italic;
        font-size: 24px;
        color: var(--accent-on-light);
        line-height: 1;
        margin-bottom: 12px;
        display: block;
    }
    .proc-step__title {
        font-size: 22px;
        line-height: 1.18;
        margin-bottom: 10px;
    }
    .proc-step__desc {
        font-size: 14px;
        line-height: 1.5;
        color: rgba(20, 16, 8, 0.62);
    }
    /* Kill any desktop reveal hairlines on proc-step */
    .proc-step::before,
    .proc-step::after {
        display: none;
        content: none;
    }

    /* === RING STYLES — 6 vertical gallery cards → horizontal carousel ===
       Each card: 4:3 gradient image + compact body (title + 2-line desc).
       Section was 3147px on mobile, biggest offender on this page. */
    .ring-styles {
        padding: 48px 0 32px;
    }
    .ring-styles__inner {
        padding: 0;
        max-width: none;
    }
    .ring-styles__header {
        padding: 0 22px;
        margin-bottom: 22px;
    }
    .ring-styles__eyebrow {
        font-size: 10px;
        letter-spacing: 0.20em;
    }
    .ring-styles__title {
        font-size: 30px;
        line-height: 1.06;
        margin-bottom: 12px;
    }
    .ring-styles__desc {
        font-size: 14px;
        line-height: 1.55;
    }
    .ring-styles__grid {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        gap: 14px;
        padding: 20px 22px;
        margin: -20px 0;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 22px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        grid-template-columns: none;
    }
    .ring-styles__grid::-webkit-scrollbar { display: none; }
    .style-card {
        flex: 0 0 calc(100vw - 110px);
        max-width: 270px;
        scroll-snap-align: start;
        /* White card on white section reads weak — use cream body with stronger
           shadow to lift it off the section. */
        background: var(--surface-primary);
        border-radius: 16px;
        border: 1px solid var(--border-hairline-gold);
        overflow: hidden;
        margin: 0;
        /* Kill desktop's hover lift transform (fires briefly on tap, looks like
           the card jumps off the page during scroll) */
        transition: none;
        transform: none;
        box-shadow:
            0 1px 2px rgba(20, 16, 8, 0.04),
            0 6px 20px rgba(20, 16, 8, 0.06);
    }
    .style-card:hover {
        transform: none;
        box-shadow:
            0 1px 2px rgba(20, 16, 8, 0.04),
            0 6px 20px rgba(20, 16, 8, 0.06);
    }
    .style-card__img {
        aspect-ratio: 4 / 3;
        width: 100%;
    }
    .style-card__body {
        padding: 16px 18px 18px;
    }
    .style-card__title {
        font-size: 17px;
        line-height: 1.2;
        margin-bottom: 6px;
    }
    .style-card__desc {
        font-size: 13px;
        line-height: 1.5;
        color: rgba(20, 16, 8, 0.62);
    }
    /* Internal placeholder note (instruction to Ilya) — not user-facing */
    .ring-styles__note {
        display: none;
    }

    /* === WHY CUSTOM — 4 vertical cards → horizontal carousel === */
    .why-custom {
        padding: 48px 0 56px;
    }
    .why-custom__inner {
        padding: 0;
        max-width: none;
    }
    .why-custom__header {
        padding: 0 22px;
        margin-bottom: 24px;
    }
    .why-custom__eyebrow {
        font-size: 10px;
        letter-spacing: 0.20em;
    }
    .why-custom__title {
        font-size: 30px;
        line-height: 1.06;
        margin-bottom: 12px;
    }
    .why-custom__desc {
        font-size: 14px;
        line-height: 1.55;
    }
    .why-custom__grid {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        gap: 14px;
        padding: 20px 22px;
        margin: -20px 0;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 22px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        background: transparent;
        border: none;
        grid-template-columns: none;
    }
    .why-custom__grid::-webkit-scrollbar { display: none; }
    .why-card {
        flex: 0 0 calc(100vw - 60px);
        max-width: 320px;
        scroll-snap-align: start;
        background: #fff;
        border-radius: 18px;
        border: 1px solid var(--border-hairline-gold);
        padding: 24px 22px 24px;
        display: flex;
        flex-direction: column;
        gap: 0;
        min-height: 240px;
        box-shadow:
            0 1px 2px rgba(20, 16, 8, 0.04),
            0 6px 18px rgba(20, 16, 8, 0.05);
        margin: 0;
    }
    .why-card__num {
        font-family: var(--font-display, 'Newsreader', serif);
        font-style: italic;
        font-size: 24px;
        color: var(--accent-on-light);
        line-height: 1;
        margin-bottom: 14px;
        letter-spacing: 0;
    }
    .why-card__title {
        font-size: 22px;
        line-height: 1.18;
        margin-bottom: 10px;
    }
    .why-card__desc {
        font-size: 14px;
        line-height: 1.5;
        color: rgba(20, 16, 8, 0.62);
    }

    /* ====================================================================
       PORTFOLIO — Extra-small screens
       Inherit single-column from the 768px breakpoint and just tighten
       caption typography a touch further.
       ==================================================================== */
    .pf-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .pf-item__tag {
        font-size: 7.5px;
        padding: 2px 5px;
        top: 8px;
        right: 8px;
    }

    /* ====================================================================
       LIGHTBOX — Mobile: centered popup card + blurred backdrop
       Floating card over blurred page. Horizontal swipe = nav,
       drag down = dismiss.  Matches the warm-paper specimen cards.
       ==================================================================== */

    /* Overlay: centered, children handle their own transitions */
    .lb {
        align-items: center;
        justify-content: center;
        background: none;
        /* Override parent opacity transition — let backdrop + card animate independently */
        opacity: 1;
        transition: visibility 0s 0.3s;
    }
    .lb--open {
        transition: visibility 0s;
    }

    /* Blurred backdrop — fades in/out on its own.
       inset: -50px extends past Chrome's hidden bottom/top bars so
       the blur covers the full screen even when browser UI hides. */
    .lb__backdrop {
        display: block;
        inset: -50px;
        background: rgba(20, 16, 8, 0.30);
        -webkit-backdrop-filter: blur(28px) saturate(1.3);
                backdrop-filter: blur(28px) saturate(1.3);
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    .lb--open .lb__backdrop {
        opacity: 1;
    }

    /* The card itself — scales up, slight rise */
    .lb__stage {
        position: relative;
        width: calc(100vw - 32px);
        max-width: 380px;
        max-height: calc(100dvh - 80px);
        max-height: calc(100vh - 80px);
        padding: 10px;
        overflow: hidden;
        background:
            url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"),
            #FBF9F6;
        background-size: 200px 200px, auto;
        border: 1px solid rgba(20, 16, 8, 0.10);
        border-radius: 22px;
        box-shadow:
            0 24px 80px -12px rgba(0, 0, 0, 0.50),
            inset 0 1px 0 rgba(255, 255, 255, 0.60);
        z-index: 2;
        opacity: 0;
        transform: scale(0.92) translateY(24px);
        transition: transform 0.38s cubic-bezier(0.2, 0, 0, 1),
                    opacity  0.28s ease;
    }
    .lb--open .lb__stage {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

    /* Gold hairline inside the card — brand mark */
    .lb__stage::before {
        content: '';
        position: absolute;
        inset: 6px;
        border: 1px solid rgba(168, 133, 84, 0.25);
        border-radius: 16px;
        pointer-events: none;
        z-index: 10;
    }

    /* Disable transition during drag */
    .lb__stage.is-dragging {
        transition: none !important;
    }

    /* Figure: column layout inside the card */
    .lb__figure {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        gap: 0;
        height: auto;
        max-height: none;
        min-height: auto;
        margin: 0;
    }

    /* Photo: 4:5, rounded, sits inside the card padding */
    .lb__media {
        width: 100%;
        aspect-ratio: 4 / 5;
        min-height: auto;
        max-height: none;
        flex-shrink: 0;
        height: auto;
        border: none;
        border-radius: 12px 12px 4px 4px;
        overflow: hidden;
        margin: 0;
    }

    /* Caption: compact, below the photo */
    .lb__caption {
        position: relative;
        flex: 0 0 auto;
        padding: 14px 8px 8px;
        color: var(--fg-primary);
        background: none;
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        transform: none;
        z-index: 2;
    }
    .lb--open .lb__caption { opacity: 1; transform: none; }
    .lb__caption::before { display: none; }

    /* Category */
    .lb__cat {
        color: var(--accent-on-light);
        font-size: 10px;
        letter-spacing: 0.18em;
        padding-bottom: 0;
        border-bottom: none;
        margin-bottom: 6px;
    }

    /* Title */
    .lb__title {
        color: var(--fg-primary);
        font-size: 22px;
        line-height: 1.14;
        letter-spacing: -0.012em;
        margin-bottom: 8px;
    }
    .lb__title em { color: var(--accent-on-light); }

    /* Description */
    .lb__desc {
        color: var(--fg-secondary);
        font-size: 13px;
        line-height: 1.5;
        margin-bottom: 0;
    }

    /* Counter: compact row, gold separator */
    .lb__counter {
        position: static;
        display: flex;
        align-items: center;
        gap: 4px;
        height: auto;
        margin-top: 10px;
        padding: 10px 0 0;
        border-top: 1px solid rgba(168, 133, 84, 0.16);
        border-left: 0; border-right: 0; border-bottom: 0;
        border-radius: 0;
        background: none;
        -webkit-backdrop-filter: none;
                backdrop-filter: none;
        font-family: var(--font-display);
        font-style: italic;
        font-size: 13px;
        color: var(--accent-on-light);
        letter-spacing: 0.02em;
    }
    .lb__counter-sep {
        color: var(--fg-muted);
        opacity: 0.5;
        margin: 0 3px;
    }

    /* Close button: glass pill above the card */
    .lb__close {
        top: max(env(safe-area-inset-top, 12px), 12px);
        right: 16px;
        width: 36px;
        height: 36px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.18);
        -webkit-backdrop-filter: blur(10px);
                backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.22);
        color: #fff;
        z-index: 10;
        opacity: 0;
        transition: opacity 0.25s ease;
    }
    .lb--open .lb__close {
        opacity: 1;
    }

    /* Nav arrows hidden — swipe replaces them */
    .lb__nav {
        display: none;
    }

    /* === Mobile tap cleanup: static cards/sections, buttons only === */
    .svc-row,
    .svc-row *,
    .hero__cta .btn--hero,
    .hero__cta .btn--hero *,
    .process__list,
    .process__list *,
    .metal-strip,
    .metal-strip *,
    .reforge__cta,
    .reforge__cta *,
    .examples--gallery .examples__inner,
    .examples--gallery .examples__inner *,
    .start-paths__grid,
    .start-paths__grid *,
    .quick-prices__grid,
    .quick-prices__grid *,
    .prices__tabs,
    .prices__tabs *,
    .price-row,
    .price-row * {
        animation: none !important;
        transition: none !important;
        transition-delay: 0s !important;
        -webkit-tap-highlight-color: transparent;
    }
    .hero__cta .btn--hero::before,
    .hero__cta .btn--hero:hover::before,
    .hero__cta .btn--hero:active::before {
        transform: translateX(-100%);
    }
    .hero__cta .btn--hero:hover .btn__icon,
    .hero__cta .btn--hero:active .btn__icon,
    .hero__cta .btn--hero:hover .btn__arrow,
    .hero__cta .btn--hero:active .btn__arrow {
        transform: none;
    }
    .hero__cta .btn--hero-primary:hover,
    .hero__cta .btn--hero-primary:active {
        background:
            linear-gradient(180deg, rgba(232, 207, 162, 0.85) 0%, rgba(200, 180, 150, 0.7) 100%);
        border-color: var(--accent-primary);
        color: #1A1A1A;
        box-shadow:
            0 10px 28px -10px rgba(0, 0, 0, 0.55),
            inset 0 1px 0 rgba(255, 245, 220, 0.45);
    }
    .hero__cta .btn--hero-secondary:hover,
    .hero__cta .btn--hero-secondary:active {
        background: linear-gradient(180deg, rgba(20, 16, 12, 0.78) 0%, rgba(20, 16, 12, 0.58) 100%);
        border-color: rgba(200, 180, 150, 0.45);
        color: var(--fg-inverse);
    }
    .svc-row:hover,
    .svc-row:active {
        background: #fff;
        transform: none;
        box-shadow:
            0 1px 2px rgba(20, 16, 8, 0.04),
            0 10px 28px -8px rgba(20, 16, 8, 0.10);
    }
    .svc-row:hover .svc-row__image,
    .svc-row:active .svc-row__image {
        transform: none;
    }
    .svc-row__link:hover,
    .svc-row__link:active {
        gap: 8px;
    }
    .svc-row__link:hover span,
    .svc-row__link:active span {
        transform: translateY(-1px);
    }
    .process__step:hover,
    .process__step:active {
        background: #fff;
        transform: none;
        box-shadow:
            0 1px 2px rgba(20, 16, 8, 0.04),
            0 6px 18px rgba(20, 16, 8, 0.05);
    }
    .metal-line:hover,
    .metal-line:active {
        background: #fff;
        transform: none;
    }
    .metal-line--featured:hover,
    .metal-line--featured:active {
        background: #fffdf8;
    }
    .reforge__cta:hover,
    .reforge__cta:active {
        background: rgba(200, 180, 150, 0.06);
        color: var(--accent-primary) !important;
        border-color: rgba(200, 180, 150, 0.32) !important;
        transform: none;
        box-shadow: none;
    }
    .reforge__cta:hover svg,
    .reforge__cta:active svg {
        transform: none;
    }
    .ex-tile:hover,
    .ex-tile:active {
        transform: none;
        box-shadow:
            0 1px 2px rgba(20, 16, 8, 0.04),
            0 14px 32px -18px rgba(20, 16, 8, 0.22);
    }
    .ex-tile:hover::before,
    .ex-tile:active::before {
        opacity: 1;
    }
    .ex-tile:hover .ex-tile__title,
    .ex-tile:active .ex-tile__title {
        opacity: 1;
        transform: none;
    }
    .path-card:hover,
    .path-card:active {
        background: #fff;
        transform: none;
        box-shadow:
            0 1px 2px rgba(20, 16, 8, 0.04),
            0 6px 18px rgba(20, 16, 8, 0.05);
    }
    .path-card__link:hover,
    .path-card__link:active {
        color: var(--accent-on-light);
        border-color: rgba(168, 133, 84, 0.32);
    }
    .wedding-teaser__btn-primary,
    .wedding-teaser__btn-primary:hover,
    .wedding-teaser__btn-primary:active {
        background: var(--accent-primary);
        color: #1A1A1A;
        border-color: var(--accent-primary);
        transform: none;
        box-shadow: none;
    }
    .wedding-teaser__btn-primary:hover svg,
    .wedding-teaser__btn-primary:active svg {
        transform: none;
    }
    .quick-price:hover,
    .quick-price:active {
        background: #fff;
        transform: none;
        box-shadow: none;
        padding: 14px;
    }
    .quick-price:hover::before,
    .quick-price:active::before {
        transform: translateX(-100%);
    }
    .quick-price:hover .quick-price__action,
    .quick-price:active .quick-price__action {
        gap: 8px;
    }
    .prices__tab:hover,
    .prices__tab:active {
        background: transparent;
        border-color: var(--border-hairline-gold);
        transform: none;
        box-shadow: none;
    }
    .prices__tab--active:hover,
    .prices__tab--active:active {
        background: var(--surface-inverse);
        border-color: var(--surface-inverse);
    }
    .price-row:hover,
    .price-row:active {
        background: #fff;
        transform: none;
        box-shadow: 0 1px 2px rgba(20, 16, 8, 0.03);
    }
    .price-row--popular:hover,
    .price-row--popular:active {
        background: #fff;
        border-left-color: var(--accent-primary);
    }
}
/* =====================================================================
   GOLDART · MOBILE PORTFOLIO PATCH
   Append to style.css. All rules are scoped to @media (max-width: 768px)
   so they only affect mobile and don't touch desktop layout.

   Targets the existing markup in:
     - portfolio/index.html  (portfolio grid + lightbox)

   Two small HTML changes are required (see README §3):
     1. Wrap the hint text+arrow in .pf-item__hint
     2. Wrap the side-arrow svg in .lb__nav with a text span

   No script.js changes — all behavior already exists.
   ===================================================================== */

@media (max-width: 768px) {

    /* ================================================================
       MOBILE PORTFOLIO CARDS — “Specimen card”
       White warm-paper card with an inner gold hairline frame, 4:5 photo
       on top, caption + filled gold chev button below. Text never sits
       on the photo.
       ================================================================ */

    /* Already in style.css at 768px: grid-template-columns: 1fr; gap: 32px;
       Keep that. Override the .pf-item styling below to give cards their
       own background and the framed-specimen look. */

    .pf-item {
        opacity: 1;
        background: #FBF9F6;
        border: 1px solid rgba(20, 16, 8, 0.10);
        border-radius: 14px;
        padding: 6px;
        box-shadow:
            0 1px 2px rgba(20, 16, 8, 0.04),
            0 14px 32px -18px rgba(20, 16, 8, 0.22);
        overflow: hidden;
        isolation: isolate;
        -webkit-tap-highlight-color: transparent;
        background-image:
            url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
        background-size: 200px 200px;
    }
    .pf-item::before {
        content: '';
        position: absolute;
        inset: 3px;
        border: 1px solid rgba(168, 133, 84, 0.28);
        border-radius: 11px;
        pointer-events: none;
        z-index: 1;
    }
    .pf-item,
    .pf-item:active {
        transform: none;
        transition: none;
    }

    /* Photo window — 4:5 portrait, slightly smaller corner radius than
       the card so the card frame "mats" the image. */
    .pf-item__img {
        aspect-ratio: 4 / 5;
        border-radius: 10px;
        overflow: hidden;
        z-index: 2;
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.10),
            inset 0 1px 0 rgba(255, 255, 255, 0.20),
            inset 0 -10px 22px -16px rgba(0, 0, 0, 0.40);
    }
    .pf-item__num {
        font-size: 10px;
        top: 8px;
        left: 10px;
    }

    /* Caption sits inside the card on the warm paper bg. */
    .pf-item__caption {
        position: relative;
        z-index: 2;
        padding: 8px 4px 2px;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }
    .pf-item__meta {
        font-size: 8.5px;
        letter-spacing: 0.10em;
        gap: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .pf-item__meta-dot {
        width: 1px;
        height: 8px;
        border-radius: 0;
        opacity: 0.45;
        margin: 0 6px;
    }
    .pf-item__year {
        font-feature-settings: "tnum" 1;
    }
    .pf-item__rule {
        display: none;        /* the gold frame replaces this on mobile */
    }
    .pf-item__title {
        font-size: 14px;
        line-height: 1.2;
        letter-spacing: -0.01em;
    }

    /* The hint becomes the brand-mark CTA — a filled gold disc with an
       inner arrow icon. The text "Смотреть работу" is hidden, only the
       arrow span shows. Requires the small HTML change in §3.1. */
    .pf-item__hint {
        display: none;
    }
    .pf-item__hint-text { display: none; }   /* hide the "Смотреть работу" text */
    .pf-item__hint-arrow {
        font-family: var(--font-body);
        font-size: 0;
        position: relative;
        width: 14px;
        height: 14px;
    }
    .pf-item__hint-arrow svg {
        width: 14px;
        height: 14px;
    }
    /* SVG-style arrow drawn with two short lines via box-shadow tricks?
       No — use a real inline SVG. The simplest production approach is to
       put the SVG into .pf-item__hint-arrow as a child <svg> in HTML.
       See §3.1 for the markup. */

    .pf-item:active .pf-item__hint {
        transform: none;
        background: var(--accent-on-light);
    }
    /* Kill desktop hover effects on tap — no zoom, no color shift */
    .pf-item:hover .pf-item__img-zoom {
        transform: none;
    }
    .pf-item:hover .pf-item__rule {
        width: 28px;
    }
    .pf-item:hover .pf-item__hint {
        opacity: 1;
        color: #fff;
        gap: 8px;
    }
    .pf-item:hover .pf-item__hint > span {
        transform: none;
    }

    /* ================================================================
       MOBILE PORTFOLIO TOOLBAR — compact counter + scrolling chips
       ================================================================ */

    .pf__bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 24px;
        padding-bottom: 16px;
    }

    /* Counter — smaller, tighter */
    .pf__counter {
        gap: 8px;
    }
    .pf__counter-num {
        font-size: 28px;
    }
    .pf__counter-label {
        font-size: 11px;
        padding-bottom: 3px;
    }

    /* Filters — horizontal scroll, no wrap, pill chips */
    .pf__filters {
        flex-wrap: nowrap;
        gap: 6px;
        /* full-bleed ровно по ширине экрана — не зависит от отступов родителя,
           поэтому страница не уезжает вбок, а чипсы листаются внутри строки */
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding: 0 20px 2px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .pf__filters::-webkit-scrollbar { display: none; }

    .pf-filter {
        flex-shrink: 0;
        padding: 8px 16px;
        gap: 5px;
    }
    .pf-filter__label {
        font-size: 12px;
        letter-spacing: 0.06em;
    }
    .pf-filter__count {
        font-size: 12px;
    }

    .pf-filter--active {
        background: var(--surface-inverse);
        border-color: var(--surface-inverse);
        box-shadow: 0 4px 16px rgba(26, 26, 26, 0.12);
    }
    .pf-filter--active .pf-filter__label {
        color: var(--fg-inverse);
    }
    .pf-filter--active .pf-filter__count {
        color: var(--accent-primary);
    }
}