/* =====================================================================
   IN HAUS — redesign global layer: header, footer, unified background.
   Tokens (--ih-*) are declared by backender; hex values here are only
   fallbacks or rgba photo/glass overlays (allowed by spec).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. UNIFIED BACKGROUND — faithful to Premium.dc.html (lines ~33-45):
      base cream gradient + concentric ring clusters + animated amber
      blooms + fine dotted texture. Layers (bottom -> top):
        a) body background ......... multi-stop cream gradient (fixed)
        b) body::before / ::after .. two soft amber/cream blooms, ANIMATED
        c) .bg_paints::after ....... 4 concentric ring clusters + dots,
                                     spans full document height (scrolls)
        d) #page (content) ......... lifted above all decorative layers
   --------------------------------------------------------------------- */
body.home,
body.blog,
body.archive,
body.single-post,
body.search,
body.page-template-page-project {
    /* gentle section-to-section shimmer: cream <-> white <-> stone bands down
       the page. NOTE: background-attachment is intentionally NOT `fixed`.
       A fixed body background forces a full-viewport repaint of this gradient
       on every scroll frame, and the blurred header (backdrop-filter) then has
       to re-sample that moving layer each frame — that combo caused the scroll
       jank (~39fps). With default (scroll) attachment the gradient maps over
       the full document height (still a soft section-to-section shimmer) and is
       painted once into a composited layer, so scrolling stays ~60fps. */
    background: linear-gradient(180deg,
        #FBF4E8 0%,
        #FFFFFF 11%,
        #F7EFE0 27%,
        #F3F3F0 44%,
        #FCF6EC 60%,
        #EEEFEC 78%,
        #F8F2E6 90%,
        #FBF4E9 100%);
}

/* disable the theme's legacy paint feature on these views */
body.home .bg_paints::before,
body.blog .bg_paints::before,
body.archive .bg_paints::before,
body.single-post .bg_paints::before,
body.search .bg_paints::before,
body.page-template-page-project .bg_paints::before {
    display: none !important;
}

/* wrapper + content stacking: keep all real content above decorative bg */
body.home .bg_paints,
body.blog .bg_paints,
body.archive .bg_paints,
body.single-post .bg_paints,
body.search .bg_paints,
body.page-template-page-project .bg_paints {
    position: relative;
    z-index: 1;
    display: block;
}

body.home #page,
body.blog #page,
body.archive #page,
body.single-post #page,
body.search #page,
body.page-template-page-project #page {
    position: relative;
    z-index: 1;
}

/* (c) concentric ring clusters + dotted texture — full page, scrolls with content.
   Positions are percentage-based so the four clusters distribute down the page
   on any content height (faithful to the macro's clustered rings + dots). */
body.home .bg_paints::after,
body.blog .bg_paints::after,
body.archive .bg_paints::after,
body.single-post .bg_paints::after,
body.search .bg_paints::after,
body.page-template-page-project .bg_paints::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background-image:
        /* ring cluster A — brand orange, upper-left */
        radial-gradient(circle 520px at 6% 15%, transparent 0 376px, rgba(235, 147, 21, 0.13) 376px 378px, transparent 378px 456px, rgba(235, 147, 21, 0.06) 456px 458px, transparent 458px 100%),
        /* ring cluster B — black, upper-right */
        radial-gradient(circle 600px at 96% 37%, transparent 0 436px, rgba(20, 16, 10, 0.09) 436px 438px, transparent 438px 516px, rgba(20, 16, 10, 0.05) 516px 518px, transparent 518px 100%),
        /* ring cluster C — brand orange, lower-left */
        radial-gradient(circle 420px at 9% 63%, transparent 0 296px, rgba(235, 147, 21, 0.12) 296px 298px, transparent 298px 360px, rgba(235, 147, 21, 0.05) 360px 362px, transparent 362px 100%),
        /* ring cluster D — black, lower-right */
        radial-gradient(circle 480px at 93% 84%, transparent 0 336px, rgba(20, 16, 10, 0.09) 336px 338px, transparent 338px 410px, rgba(20, 16, 10, 0.045) 410px 412px, transparent 412px 100%),
        /* fine dotted texture */
        radial-gradient(rgba(235, 147, 21, 0.055) 1px, transparent 1.4px);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
    background-size: auto, auto, auto, auto, 30px 30px;
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
}

/* (b) PAGE-BOUND drifting blooms — NOT pinned to the viewport.
   The .ih-paints layer is an absolute child of .bg_paints (which wraps the whole
   document), so it spans the FULL page height and scrolls with content. Several
   amber + warm-cream blobs roam slowly across the page area on their own tracks.
   Markup: injected in header.php right after <span class="bg_paints">. */
.ih-paints {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    /* fully isolate this decorative layer: its size is fixed by inset:0, contents
       are purely decorative, so strict containment keeps the drifting blobs from
       triggering any layout/paint on the document. */
    contain: strict;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    display: none;          /* only enabled on the unified-bg views below */
}

body.home .ih-paints,
body.blog .ih-paints,
body.archive .ih-paints,
body.single-post .ih-paints,
body.search .ih-paints,
body.page-template-page-project .ih-paints {
    display: block;
}

.ih-paint {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    /* NO filter: blur — a blurred layer re-rasterizes every frame and tanks FPS.
       The softness comes entirely from the radial-gradient falloff to transparent
       (defined per-blob below), so the drift is a pure compositor transform. */
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

/* amber, upper third */
.ih-paint--1 {
    top: 6%;
    left: 8%;
    width: 720px;
    height: 720px;
    max-width: 70vw;
    background: radial-gradient(circle, rgba(235, 147, 21, 0.19) 0%, rgba(235, 147, 21, 0.10) 32%, rgba(235, 147, 21, 0.035) 58%, transparent 78%);
    animation-name: ih-drift-a;
    animation-duration: 52s;
}

/* warm cream, upper-right -> mid */
.ih-paint--2 {
    top: 22%;
    left: 58%;
    width: 820px;
    height: 820px;
    max-width: 78vw;
    background: radial-gradient(circle, rgba(255, 222, 176, 0.52) 0%, rgba(255, 222, 176, 0.29) 32%, rgba(255, 222, 176, 0.10) 58%, transparent 78%);
    animation-name: ih-drift-b;
    animation-duration: 67s;
}

/* amber, lower-left */
.ih-paint--3 {
    top: 58%;
    left: 4%;
    width: 640px;
    height: 640px;
    max-width: 66vw;
    background: radial-gradient(circle, rgba(235, 147, 21, 0.17) 0%, rgba(235, 147, 21, 0.09) 32%, rgba(235, 147, 21, 0.03) 58%, transparent 78%);
    animation-name: ih-drift-c;
    animation-duration: 59s;
}

/* warm cream, lower-right */
.ih-paint--4 {
    top: 80%;
    left: 52%;
    width: 760px;
    height: 760px;
    max-width: 74vw;
    background: radial-gradient(circle, rgba(255, 226, 188, 0.48) 0%, rgba(255, 226, 188, 0.26) 32%, rgba(255, 226, 188, 0.09) 58%, transparent 78%);
    animation-name: ih-drift-d;
    animation-duration: 73s;
}

/* compositor-only transforms (translate/scale) — no layout thrash */
@keyframes ih-drift-a {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(14vw, 9vh, 0) scale(1.18); }
}

@keyframes ih-drift-b {
    0%   { transform: translate3d(0, 0, 0) scale(1.1); }
    100% { transform: translate3d(-16vw, 12vh, 0) scale(1); }
}

@keyframes ih-drift-c {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(18vw, -8vh, 0) scale(1.22); }
}

@keyframes ih-drift-d {
    0%   { transform: translate3d(0, 0, 0) scale(1.12); }
    100% { transform: translate3d(-13vw, -10vh, 0) scale(1); }
}

/* home: hero must sit flush at the very top, under the fixed transparent
   header (page.php wraps blocks in #content.site-content.py-5). */
body.home #content.site-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ---------------------------------------------------------------------
   2. HEADER
   --------------------------------------------------------------------- */
header.ih-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    height: auto !important;
    max-height: none !important;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0);
    transition: background 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease, padding 0.45s ease;
}

/* home + project pages: header overlays the dark hero (no reserved space).
   Project pages (page-template-page-project) share the home overlay treatment:
   transparent fixed header over the project-hero, whitening on scroll. */
body.home header.ih-header,
body.page-template-page-project header.ih-header {
    position: fixed;
    left: 0;
    right: 0;
}

.ih-header__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 22px;
    padding-bottom: 22px;
    transition: padding 0.45s ease;
}

/* solid / scrolled state */
header.ih-header.is-solid,
header.ih-header.is-scrolled {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border-bottom-color: rgba(24, 20, 8, 0.08);
    box-shadow: 0 10px 34px -22px rgba(24, 20, 8, 0.4);
}

header.ih-header.is-solid .ih-header__inner,
header.ih-header.is-scrolled .ih-header__inner {
    padding-top: 16px;
    padding-bottom: 16px;
}

/* logo */
.ih-header__logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 0;
}

.ih-header__logo-img {
    max-height: 46px;
    width: auto;
    transition: filter 0.4s ease;
}

/* floating white logo badge (ported from the original site): a white
   rounded-bottom square that overlaps the header and protrudes below it.
   The badge is always white, so the dark logo is shown in every header state. */
.ih-header__logo--badge {
    position: absolute;
    top: 0;
    left: 1.5rem;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
    box-shadow: 0 14px 32px -12px rgba(24, 20, 8, 0.4);
    padding: 16px 18px 18px;
    line-height: 0;
}

.ih-header__logo--badge .ih-header__logo-img {
    max-height: 56px;
}

.ih-header__logo--badge .ih-header__logo-img--dark {
    display: inline-block !important;
    filter: none !important;
}

.ih-header__logo--badge .ih-header__logo-img--white {
    display: none !important;
}

.ih-header__logo--badge .ih-header__logo-text {
    color: var(--ih-ink, #18140E);
}

@media (min-width: 1200px) {
    .ih-header__logo--badge {
        left: 3rem;
    }
}

.ih-header__logo-text {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.22em;
    line-height: 1;
    transition: color 0.4s ease;
}

header.ih-header.is-solid .ih-header__logo-text,
header.ih-header.is-scrolled .ih-header__logo-text {
    color: var(--ih-ink, #18140E);
}

/* logo image toggling (two-image mode) */
.ih-header--has-white .ih-header__logo-img--white {
    display: inline-block;
}

.ih-header--has-white .ih-header__logo-img--dark {
    display: none;
}

.ih-header--has-white.is-solid .ih-header__logo-img--white,
.ih-header--has-white.is-scrolled .ih-header__logo-img--white {
    display: none;
}

.ih-header--has-white.is-solid .ih-header__logo-img--dark,
.ih-header--has-white.is-scrolled .ih-header__logo-img--dark {
    display: inline-block;
}

/* single-image mode: invert dark logo while transparent */
header.ih-header:not(.ih-header--has-white):not(.is-solid):not(.is-scrolled) .ih-header__logo-img--dark {
    filter: brightness(0) invert(1);
}

/* nav */
.ih-header__nav {
    gap: 26px;
    margin: 0 auto;
}

.ih-header__nav-link,
.ih-header__menu .menu-item > a,
.ih-header__menu .nav-link {
    color: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.4s ease;
    background: transparent;
    padding: 0;
}

.ih-header__menu {
    display: flex;
    align-items: center;
    gap: 26px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ih-header__menu .nav-item,
.ih-header__menu .menu-item {
    list-style: none;
}

header.ih-header.is-solid .ih-header__nav-link,
header.ih-header.is-scrolled .ih-header__nav-link,
header.ih-header.is-solid .ih-header__menu .menu-item > a,
header.ih-header.is-scrolled .ih-header__menu .menu-item > a,
header.ih-header.is-solid .ih-header__menu .nav-link,
header.ih-header.is-scrolled .ih-header__menu .nav-link {
    color: #4a443b;
}

.ih-header__menu .menu-item > a:hover,
.ih-header__nav-link:hover {
    color: var(--ih-accent, #eb9315);
}

/* projects dropdown */
.ih-header__dropdown {
    position: relative;
}

.ih-header__dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
}

.ih-header__caret {
    transition: transform 0.3s ease;
}

.ih-header__dropdown.is-open .ih-header__caret {
    transform: rotate(180deg);
}

.ih-header__dropdown-panel {
    position: absolute;
    top: calc(100% + 14px);
    left: -16px;
    width: 300px;
    padding: 10px;
    border-radius: 18px;
    background: rgba(18, 16, 12, 0.82);
    backdrop-filter: blur(22px) saturate(1.5);
    -webkit-backdrop-filter: blur(22px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

.ih-header__dropdown.is-open .ih-header__dropdown-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ih-proj-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    text-decoration: none;
    transition: background 0.25s ease;
}

.ih-proj-item:hover {
    background: rgba(235, 147, 21, 0.14);
}

.ih-proj-item__thumb {
    flex: none;
    width: 54px;
    height: 54px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.08);
    background-position: center;
    background-size: cover;
    filter: saturate(0.7) sepia(0.12);
}

.ih-proj-item__title {
    display: block;
    color: #fff;
    font-size: 14.5px;
    font-weight: 600;
}

.ih-proj-item__sub {
    display: block;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    margin-top: 3px;
}

/* actions */
.ih-header__actions {
    gap: 14px;
    flex-wrap: nowrap;          /* линейка действий никогда не переносится */
}

/* телефон и кнопки не сжимаются и не рвутся на строки */
.ih-header__phone,
.ih-header__actions .ih-btn {
    flex-shrink: 0;
    white-space: nowrap;
}

.ih-header__phone {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: color 0.4s ease;
    white-space: nowrap;        /* «+ 995 501 000 187» всегда в одну строку */
}

header.ih-header.is-solid .ih-header__phone,
header.ih-header.is-scrolled .ih-header__phone {
    color: var(--ih-ink, #18140E);
}

/* lang switch */
.ih-header__lang .dropdown-toggle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    transition: color 0.4s ease;
}

header.ih-header.is-solid .ih-header__lang .dropdown-toggle,
header.ih-header.is-scrolled .ih-header__lang .dropdown-toggle {
    color: #9b8c72;
}

.ih-header__lang .dropdown-toggle::after {
    display: none;
}

.ih-header__lang .dropdown-toggle .bi {
    font-size: 0.9rem;
}

/* ---------------------------------------------------------------------
   3c. HEADER — компактный планшет-ландшафт tier (1200–1399px)
   Десктоп-шапка видима с ≥1200 (d-xl-flex). В диапазоне 1200–1399 полная
   линейка (лого+меню+язык+телефон+2 кнопки) не помещается и телефон/кнопки
   рвутся на 2 строки. Ужимаем гэпы/паддинги/шрифты, всё держим в одну строку.
   Ноутбуки ≥1400 сохраняют полноразмерный десктоп-хедер.
   --------------------------------------------------------------------- */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    /* меньше боковых полей у линейки */
    .ih-header__inner {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    /* лого-бейдж ближе к краю, чтобы не давить меню */
    .ih-header__logo--badge {
        left: 1.5rem;
        padding: 14px 14px 15px;
    }
    .ih-header__logo--badge .ih-header__logo-img {
        max-height: 46px;
    }

    /* меню компактнее */
    .ih-header__nav {
        gap: 18px;
    }
    .ih-header__menu {
        gap: 18px;
    }
    .ih-header__nav-link,
    .ih-header__menu .menu-item > a,
    .ih-header__menu .nav-link {
        font-size: 13px;
        letter-spacing: 0.02em;
    }

    /* правая линейка компактнее */
    .ih-header__actions {
        gap: 10px;
    }
    .ih-header__phone {
        font-size: 13px;
        letter-spacing: 0;
    }
    .ih-header__actions .ih-btn {
        min-height: 40px;
        padding: 9px 15px;
        font-size: 12px;
        letter-spacing: 0.01em;
    }
    .ih-header__lang .dropdown-toggle {
        font-size: 12px;
        letter-spacing: 0.05em;
    }
}

.language-dropdown {
    min-width: 0 !important;
}

.language-dropdown .dropdown-item:hover,
.language-dropdown .dropdown-item:active {
    background: var(--ih-ink, #18140E) !important;
    color: #fff !important;
}

/* burger */
.ih-header__burger {
    /* keep above the floating logo badge (z-index 5) and clickable on <xl,
       and pinned to the right so it never sits under the left-side badge */
    position: relative;
    z-index: 6;
    margin-left: auto;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-radius: 12px;
    width: 44px;
    height: 44px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: all 0.4s ease;
}

header.ih-header.is-solid .ih-header__burger,
header.ih-header.is-scrolled .ih-header__burger {
    border-color: rgba(235, 147, 21, 0.55);
    background: rgba(235, 147, 21, 0.08);
    color: var(--ih-accent-text, #9A5E00);
}

/* ---------------------------------------------------------------------
   3. BUTTONS — единый канон (pill, Montserrat inherit)
   Правило: белый текст на залитом; ink на прозрачном; на тёмном — белый outline.
   --------------------------------------------------------------------- */
.ih-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 999px;
    font-family: inherit;              /* Montserrat / Noto Sans Georgian */
    font-size: 13px;                   /* md по умолчанию */
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    min-height: 44px;
    padding: 11px 22px;
    border: 1.5px solid transparent;   /* база для outline-вариантов */
    background: transparent;
    transition: transform 0.35s cubic-bezier(.16,.84,.36,1),
                box-shadow 0.35s ease, background-color 0.3s ease, color 0.3s ease;
}

/* размеры */
.ih-btn--sm { min-height: 36px; padding: 8px 16px;  font-size: 12px; }
.ih-btn--lg { min-height: 52px; padding: 15px 32px; font-size: 15px; }

/* премиум-капс — ТОЛЬКО опционально и только для латиницы (EN);
   не вешать глобально: ru длиннее, ka без заглавных */
.ih-btn--caps { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }

/* ---- FILLED (основной CTA): акцент + БЕЛЫЙ текст. Годится и на светлом, и на тёмном ---- */
.ih-btn--amber,
.ih-btn--primary {                     /* --primary = алиас --amber */
    position: relative;
    overflow: hidden;
    background: var(--ih-accent);
    color: var(--ih-btn-on-accent);    /* #fff — правило владельца */
    border-color: var(--ih-accent);
    font-weight: 700;
    box-shadow: 0 0 0 4px rgba(235,147,21,.18), 0 10px 26px -8px rgba(235,147,21,.5);
}
.ih-btn--amber::before,
.ih-btn--primary::before {             /* световой sweep на hover */
    content: '';
    position: absolute; top: 0; left: -130%;
    width: 60%; height: 100%; z-index: 1; pointer-events: none;
    background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-18deg);
    transition: left .75s cubic-bezier(.16,.84,.36,1);
}
.ih-btn--amber > *,
.ih-btn--primary > * { position: relative; z-index: 2; }
.ih-btn--amber:hover,
.ih-btn--primary:hover {
    background: var(--ih-accent-hover); /* #c9760a */
    border-color: var(--ih-accent-hover);
    color: var(--ih-btn-on-accent);
    transform: translateY(-2px);
    box-shadow: 0 0 0 4px rgba(235,147,21,.26), 0 18px 38px -10px rgba(235,147,21,.6);
}
.ih-btn--amber:hover::before,
.ih-btn--primary:hover::before { left: 130%; }

/* ---- OUTLINE (secondary для СВЕТЛЫХ фонов): прозрачный + ink текст + ink рамка ---- */
.ih-btn--outline {
    background: transparent;
    color: var(--ih-ink);              /* #18140E — тёмное на прозрачном */
    border-color: var(--ih-ink);
}
.ih-btn--outline:hover {
    background: var(--ih-accent-soft);  /* лёгкая светлая заливка, текст остаётся ink */
    color: var(--ih-ink);
    border-color: var(--ih-accent);
    transform: translateY(-2px);
}

/* ---- GHOST (secondary для ТЁМНЫХ секций: hero/футер) — исключение из правила ---- */
.ih-btn--ghost {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.45);
    color: #fff;                        /* белое на прозрачном поверх тёмного */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.ih-btn--ghost:hover {
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.7);
    color: #fff;
    transform: translateY(-2px);
}
/* header в solid/scrolled-состоянии = светлый фон → ghost переходит на ink-логику */
header.ih-header.is-solid .ih-btn--ghost,
header.ih-header.is-scrolled .ih-btn--ghost {
    background: transparent;
    border-color: var(--ih-ink);
    color: var(--ih-ink);
}
header.ih-header.is-solid .ih-btn--ghost:hover,
header.ih-header.is-scrolled .ih-btn--ghost:hover {
    background: var(--ih-accent-soft);
    border-color: var(--ih-accent);
    color: var(--ih-ink);
}

/* ---- disabled ---- */
.ih-btn:disabled,
.ih-btn.disabled,
.ih-btn[aria-disabled="true"] {
    opacity: .5;
    pointer-events: none;
    transform: none;
    box-shadow: none;
}

/* ---------------------------------------------------------------------
   3b. SAFETY-NET для легаси Bootstrap-кнопок (без рекомпиляции SCSS)
   --------------------------------------------------------------------- */
/* .btn-primary → амбер + БЕЛЫЙ текст.
   Специфичность .btn.btn-primary (0,2,0) > bootstrap .btn-primary (0,1,0);
   плюс перекрываем --bs-btn-* переменные (на случай var-based BS5.3) и icon fill. */
.btn.btn-primary,
.btn.btn-primary:focus,
.btn.btn-primary:hover,
.btn.btn-primary:active,
.btn.btn-primary.active,
a.btn-primary,
button.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-focus-color: #fff;
    color: #fff !important;
}
.btn.btn-primary,
.btn.btn-primary:focus {
    --bs-btn-bg: var(--ih-accent);
    --bs-btn-border-color: var(--ih-accent);
    background-color: var(--ih-accent);
    border-color: var(--ih-accent);
}
.btn.btn-primary:hover,
.btn.btn-primary:active,
.btn.btn-primary.active {
    --bs-btn-hover-bg: var(--ih-accent-hover);
    --bs-btn-hover-border-color: var(--ih-accent-hover);
    --bs-btn-active-bg: var(--ih-accent-hover);
    --bs-btn-active-border-color: var(--ih-accent-hover);
    background-color: var(--ih-accent-hover);
    border-color: var(--ih-accent-hover);
}
/* иконки внутри залитой кнопки — белые (fill + currentColor) */
.btn.btn-primary i,
.btn.btn-primary svg,
.btn.btn-primary path {
    color: #fff !important;
    fill: currentColor;
}
/* .btn-outline-primary → прозрачный + ink текст/рамка, лёгкая заливка на hover */
.btn.btn-outline-primary {
    --bs-btn-color: var(--ih-ink);
    --bs-btn-border-color: var(--ih-ink);
    color: var(--ih-ink);
    border-color: var(--ih-ink);
    background-color: transparent;
}
.btn.btn-outline-primary:hover,
.btn.btn-outline-primary:active,
.btn.btn-outline-primary.active {
    --bs-btn-hover-color: var(--ih-ink);
    --bs-btn-hover-bg: var(--ih-accent-soft);
    --bs-btn-hover-border-color: var(--ih-accent);
    color: var(--ih-ink);
    background-color: var(--ih-accent-soft);
    border-color: var(--ih-accent);
}

/* ---------------------------------------------------------------------
   3c. FLOATING CATALOG FAB (.choose-flat) — RED (паритет с inhaus.ge)
   По требованию владельца КРАСНАЯ #dc3545 — ТОЛЬКО плавающая круглая FAB
   (footer.php, .choose-flat). Все остальные каталожные «Choose an apartment»
   (хедер-десктоп, offcanvas, hero #macro, mobile-CTA macro-catalog) остаются
   ЯНТАРНЫМИ (амбер primary), как везде по сайту — их здесь не трогаем.
   Форма FAB — та же (круг/pill), меняется только ЦВЕТ + тон pulse/ripple.
   Специфичность .choose-flat .btn.btn-primary (0,3,0) перекрывает
   амбер-safety-net .btn.btn-primary (0,2,0).
   --------------------------------------------------------------------- */
.choose-flat .btn.btn-primary,
.choose-flat .btn.btn-primary:focus,
.choose-flat a.btn-primary,
.choose-flat button.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-focus-color: #fff;
    --bs-btn-bg: var(--ih-catalog);
    --bs-btn-border-color: var(--ih-catalog);
    background: var(--ih-catalog);
    background-color: var(--ih-catalog);
    border-color: var(--ih-catalog);
    color: #fff !important;
}
.choose-flat .btn.btn-primary:hover,
.choose-flat .btn.btn-primary:active,
.choose-flat .btn.btn-primary.active {
    --bs-btn-hover-bg: var(--ih-catalog-hover);
    --bs-btn-hover-border-color: var(--ih-catalog-hover);
    --bs-btn-active-bg: var(--ih-catalog-hover);
    --bs-btn-active-border-color: var(--ih-catalog-hover);
    background: var(--ih-catalog-hover);
    background-color: var(--ih-catalog-hover);
    border-color: var(--ih-catalog-hover);
    color: #fff !important;
}
/* иконка/текст внутри красной FAB — белые (bi-иконка + label) */
.choose-flat .btn.btn-primary i,
.choose-flat .btn.btn-primary svg,
.choose-flat .btn.btn-primary path,
.choose-flat .btn.btn-primary span {
    color: #fff !important;
    fill: currentColor;
}
/* пульс/рябь FAB — в КРАСНЫХ тонах вместо амбера (style.css амбер перекрываем) */
.choose-flat .btn.btn-primary {
    animation: ih-pulse-red 2.4s infinite;
}
.choose-flat .btn.btn-primary:hover {
    animation: ih-pulse-red 1s infinite;
}
.choose-flat .btn.btn-primary::before {
    background: rgba(220, 53, 69, .45);
}
@keyframes ih-pulse-red {
    0%   { transform: scale(1);    box-shadow: 0 0 0 rgba(220, 53, 69, .5); }
    50%  { transform: scale(1.06); box-shadow: 0 0 16px rgba(220, 53, 69, .6); }
    100% { transform: scale(1);    box-shadow: 0 0 0 rgba(220, 53, 69, .5); }
}

/* ---------------------------------------------------------------------
   4. OFFCANVAS (mobile)
   --------------------------------------------------------------------- */
.ih-offcanvas {
    background: #fff;
}

.ih-offcanvas .offcanvas-header {
    background: var(--ih-section-cream, #F8F4EE);
}

.ih-offcanvas__menu {
    list-style: none;
    padding: 0;
    margin: 0 0 8px;
}

.ih-offcanvas__menu .menu-item,
.ih-offcanvas__menu .nav-item {
    list-style: none;
    border-bottom: 1px solid rgba(24, 20, 8, 0.07);
}

.ih-offcanvas__menu .menu-item > a,
.ih-offcanvas__menu .nav-link {
    display: block;
    padding: 12px 2px;
    color: var(--ih-ink, #18140E);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
}

.ih-offcanvas__menu .menu-item > a:hover {
    color: var(--ih-accent, #eb9315);
}

/* offcanvas projects (mobile mirror of desktop dropdown) */
.ih-offcanvas__projects {
    border-bottom: 1px solid rgba(24, 20, 8, 0.07);
    margin-bottom: 8px;
}

.ih-offcanvas__projects-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 2px;
    border: none;
    background: none;
    color: var(--ih-ink, #18140E);
    font-size: 16px;
    font-weight: 500;
    text-align: left;
}

.ih-offcanvas__projects-caret {
    flex: none;
    transition: transform 0.3s ease;
}

.ih-offcanvas__projects-toggle[aria-expanded="true"] .ih-offcanvas__projects-caret {
    transform: rotate(180deg);
}

.ih-offcanvas__projects-list {
    padding: 2px 0 10px;
}

.ih-proj-item--light {
    padding-left: 0;
    padding-right: 0;
    gap: 12px;
}

.ih-proj-item--light:hover {
    background: rgba(235, 147, 21, 0.10);
}

.ih-proj-item--light .ih-proj-item__thumb {
    background-color: var(--ih-section-cream, #F8F4EE);
    filter: none;
}

.ih-proj-item--light .ih-proj-item__title {
    color: var(--ih-ink, #18140E);
}

.ih-proj-item--light .ih-proj-item__sub {
    color: rgba(24, 20, 8, 0.55);
}

.ih-offcanvas__phones .tel {
    color: var(--ih-ink, #18140E);
    font-size: 16px;
}

.ih-offcanvas__social {
    gap: 10px;
}

.ih-offcanvas__social-link {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--ih-section-cream, #F8F4EE);
    border: 1px solid rgba(24, 20, 8, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ih-ink, #18140E);
}

.ih-offcanvas__social-link:hover {
    color: var(--ih-accent, #eb9315);
}

/* ---------------------------------------------------------------------
   5. FOOTER
   --------------------------------------------------------------------- */
.ih-footer {
    position: relative;
    z-index: 1;
    background: var(--ih-footer-ink, #181510);
    overflow: hidden;
    /* floating FABs are hidden while the footer is in view (see ih-redesign.js),
       so no extra bottom clearance is needed — bottom row sits at page bottom. */
    padding: 72px 0 56px;
}

.ih-footer__toplight {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 240px;
    pointer-events: none;
    background: radial-gradient(120% 100% at 50% 0%, rgba(235, 147, 21, 0.12) 0%, rgba(235, 147, 21, 0) 60%);
}

.ih-footer__grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.045;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.ih-footer__inner {
    position: relative;
    z-index: 2;
    max-width: 1280px;
}

.ih-footer__top {
    padding-bottom: 44px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ih-footer__logo {
    display: inline-block;
    text-decoration: none;
    line-height: 0;
}

.ih-footer__logo img {
    max-height: 40px;
    width: auto;
}

.ih-footer__logo--text {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.22em;
    line-height: 1;
}

.ih-footer__about {
    margin: 18px 0 0;
    font-size: 14px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.6);
    max-width: 300px;
}

.ih-footer__col-title {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

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

.ih-footer__nav .menu-item,
.ih-footer__nav .nav-item {
    list-style: none;
}

.ih-footer__nav .menu-item > a,
.ih-footer__nav .nav-link {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    text-decoration: none;
    padding: 0;
    transition: color 0.3s ease;
}

.ih-footer__nav .menu-item > a:hover,
.ih-footer__nav .nav-link:hover {
    color: #fff;
}

.ih-footer__contacts {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 14px;
}

.ih-footer__phone {
    color: var(--ih-accent-soft, #ffd9a0);
    font-weight: 600;
    text-decoration: none;
}

.ih-footer__contact-link {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.3s ease;
}

.ih-footer__contact-link:hover {
    color: #fff;
}

.ih-footer__address {
    color: rgba(255, 255, 255, 0.6);
}

.ih-footer__social {
    display: flex;
    gap: 12px;
}

.ih-footer__social-link {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.85);
    transition: background 0.3s ease, color 0.3s ease;
}

.ih-footer__social-link:hover {
    background: rgba(235, 147, 21, 0.16);
    color: #fff;
}

.ih-footer__map {
    margin-top: 28px;
    height: 200px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ih-footer__map iframe,
.ih-footer__map img {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    object-fit: cover;
}

.ih-footer__bottom {
    padding-top: 24px;
    gap: 16px;
}

.ih-footer__copy {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.42);
}

.ih-footer__bottom-right {
    gap: 22px;
}

.ih-footer__privacy {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.42);
    text-decoration: none;
    transition: color 0.3s ease;
}

.ih-footer__privacy:hover {
    color: #fff;
}

/* Floating FABs (choose-flat CTA + scroll-to-top) fade out while the footer is
   in view so they never cover the bottom row. Toggle driven by IntersectionObserver
   in ih-redesign.js (.ih-fab-hidden). Button functionality is untouched. */
.footer-buttons {
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
}

.footer-buttons.ih-fab-hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    pointer-events: none;
}

/* Floating "Choose an apartment" CTA — амбер-канон и размеры заданы в style.css
   (child style.css грузится ПОСЛЕ этого файла, поэтому единый источник правды там).
   Здесь оставляем только запас контента снизу под FAB. */

/* контент не должен упираться в плавающие кнопки: запас снизу под FAB */
@media (max-width: 991.98px) {
    #content { padding-bottom: 110px; }
}

/* ---------------------------------------------------------------------
   6. RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .ih-header__inner,
    header.ih-header.is-solid .ih-header__inner,
    header.ih-header.is-scrolled .ih-header__inner {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    /* mobile header always readable: solid look on non-home handled by is-solid;
       on home it stays transparent over hero — burger has its own glass bg */
    .ih-header__logo-img {
        max-height: 40px;
    }

    .ih-header__logo--badge {
        left: 1rem;
        padding: 12px 14px 14px;
    }

    .ih-header__logo--badge .ih-header__logo-img {
        max-height: 44px;
    }
}

@media (max-width: 991.98px) {
    .ih-footer {
        padding: 56px 0 44px;
    }

    .ih-footer__bottom {
        align-items: flex-start;
    }
}

/* reduced-motion suppression removed: animations must always play (owner requirement) */

/* ---------------------------------------------------------------------
   6. PROJECT PAGE (page-template-page-project)
   Blocks render above the unified decorative background; header keeps its
   default solid state (set in header.php for non-home).
   --------------------------------------------------------------------- */
.ih-project {
    position: relative;
    z-index: 1;
    /* Contain horizontal bleed from Bootstrap g-5 negative row margins on mobile
       (gutter 24px > container padding 12px). clip = non-scrollable overflow,
       so scrollWidth stays == viewport width. Home uses a different wrapper. */
    overflow-x: clip;
}

/* Home (default template) has no .ih-project wrapper, so the same g-5/gx-5
   negative row margins bleed a few px past the viewport on mobile. Clip the
   home content wrapper the same way — clip is non-scrollable, so scrollWidth
   stays == innerWidth. Kept off body/html to preserve the sticky header. */
body.home #content.site-content {
    overflow-x: clip;
}

/* ---------------------------------------------------------------------
   6a. PROJECT PAGE — UNIFIED SECTION RHYTHM
   One consistent vertical padding for every stacked section so Vera and
   Belinsky share the same premium cadence (overrides each block's own
   asymmetric padding without touching the block CSS / other pages).
   --------------------------------------------------------------------- */
body.page-template-page-project .macro-catalog,
body.page-template-page-project .complex-about,
body.page-template-page-project .why-inhaus,
body.page-template-page-project .form-voza,
body.page-template-page-project .text-media,
body.page-template-page-project .gallery-modal {
    padding-top: 66px;
    padding-bottom: 66px;
}

@media (max-width: 991.98px) {
    body.page-template-page-project .macro-catalog,
    body.page-template-page-project .complex-about,
    body.page-template-page-project .why-inhaus,
    body.page-template-page-project .form-voza,
    body.page-template-page-project .text-media,
    body.page-template-page-project .gallery-modal {
        padding-top: 46px;
        padding-bottom: 46px;
    }
}

/* trim the dead cream around complex-about: the short lead/features columns
   sit centred against the tall media/map instead of stretching, and the chips
   band no longer adds a double top gap. */
body.page-template-page-project .complex-about__block {
    margin-top: 34px;
}
body.page-template-page-project .complex-about__block.align-items-stretch {
    align-items: center !important;
}
/* …but the map block (block 2) must keep its columns stretched so the map
   fills the full height of the taller features column — no dead cream above
   or below it on desktop. */
body.page-template-page-project .complex-about__block.align-items-stretch:has(.complex-about__map) {
    align-items: stretch !important;
}
body.page-template-page-project .complex-about__chips {
    margin-top: 40px;
}

/* ---------------------------------------------------------------------
   6b. PROJECT PAGE — UNIFIED SECTION-HEADING ACCENT
   Every section H2 carries the same short amber underline as the catalog
   (macro-catalog keeps its own .macro-catalog__line element). Left-aligned
   heads get a left underline; centred heads (dark form) get a centred one.
   --------------------------------------------------------------------- */
body.page-template-page-project .complex-about__h2::after,
body.page-template-page-project .why-inhaus__h2::after,
body.page-template-page-project .text-media__h2::after,
body.page-template-page-project .gallery-modal__h2::after,
body.page-template-page-project .form-voza--glass-light .form-voza__h2::after {
    content: '';
    display: block;
    width: 64px;
    height: 2px;
    margin-top: 18px;
    background: var(--ih-accent, #eb9315);
    border-radius: 999px;
}

body.page-template-page-project .form-voza--dark-gradient .form-voza__h2::after {
    content: '';
    display: block;
    width: 64px;
    height: 2px;
    margin: 18px auto 0;
    background: var(--ih-accent, #eb9315);
    border-radius: 999px;
}

/* ---------------------------------------------------------------------
   6c. PROJECT PAGE — FLOATING CTA (corner FAB) — 1:1 WITH HOME
   The FAB must look and sit IDENTICALLY to the home page: big round ~116px
   circle (mobile 92px) with icon + label, red (#dc3545) canon, same
   pulse/ripple. Size/appearance/position all come from style.css and are
   inherited AS-IS on project pages (no project-specific size/position rule).
   The only project addition is a generous bottom safe-area so the last
   section (esp. the form) never hides under the big circle.
   .top-button is left as-is (same everywhere) — do not touch.
   --------------------------------------------------------------------- */
body.page-template-page-project .footer-buttons .top-button {
    position: fixed;
    left: 20px;
    bottom: 24px;
    right: auto;
}

/* bottom safe-area so content (esp. the last form section) clears the big FAB
   (~116px circle + 30px offset) */
body.page-template-page-project #content {
    padding-bottom: 170px;
}

@media (max-width: 991.98px) {
    body.page-template-page-project .footer-buttons .top-button {
        left: 16px;
        bottom: 18px;
    }
    body.page-template-page-project #content {
        padding-bottom: 140px;
    }
}

@media (max-width: 575.98px) {
    body.page-template-page-project #content {
        padding-bottom: 130px;
    }
}

/* ---------------------------------------------------------------------
   7. CALL MODAL (#callModal / .ih-callmodal)
   Balanced two-column premium card (form + image, ~6/6) with equal-height
   columns on desktop; on mobile the image is dropped and the form becomes a
   clean, roomy card. Big rounded corners + amber accents, consistent with the
   home page. Markup lives in footer.php (direct child of <body>); CF7 fields
   are styled to match .form-voza.
   --------------------------------------------------------------------- */
.ih-callmodal .modal-content {
    position: relative;
    overflow: hidden;
    border: none;
    /* style.css: .modal-content{border-radius:2px !important} — beat it with
       higher specificity (.ih-callmodal .modal-content) + !important */
    border-radius: 22px !important;
    background: var(--ih-section-cream, #F8F4EE);
    box-shadow: 0 40px 90px -40px rgba(24, 20, 8, 0.55);
}

/* subtle scale-in on top of Bootstrap's fade */
.ih-callmodal.fade .modal-dialog {
    transform: scale(0.96);
    transition: transform 0.35s cubic-bezier(.16, .84, .36, 1);
}
.ih-callmodal.show .modal-dialog {
    transform: scale(1);
}

/* equal-height columns, no gutter so the image meets the form edge-to-edge */
.ih-callmodal__row {
    min-height: 100%;
}

/* form column */
.ih-callmodal__form {
    padding: 44px 40px;
}

.ih-callmodal__title {
    margin: 0 0 26px;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--ih-ink, #18140E);
}

/* image column: cover background fills the full column height */
.ih-callmodal__media {
    height: 100%;
    min-height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* close button — circular, always readable, sits over the image on desktop */
.ih-callmodal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border-radius: 999px;
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.92);
    background-size: 14px;
    box-shadow: 0 6px 18px -6px rgba(24, 20, 8, 0.5);
    transition: transform 0.25s ease, background-color 0.25s ease;
}

.ih-callmodal__close:hover {
    transform: rotate(90deg);
    background-color: #fff;
    opacity: 1;
}

/* ---- CF7 fields inside the modal (match .form-voza look) ---- */
.ih-callmodal .wpcf7-form label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ih-ink, #18140E);
}

.ih-callmodal .wpcf7-form input.wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.ih-callmodal .wpcf7-form textarea.wpcf7-form-control,
.ih-callmodal .wpcf7-form select.wpcf7-form-control {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    border-radius: 14px;
    border: 1px solid rgba(122, 106, 80, 0.22);
    background: rgba(255, 255, 255, 0.9);
    font-family: inherit;
    font-size: 15px;
    color: var(--ih-ink, #18140E);
    outline: none;
    box-shadow: none;
    transition: box-shadow 0.4s ease, border-color 0.4s ease;
}

/* The base reset above uses three :not() (0,6,1) with box-shadow:none + a border
   shorthand, out-specifying this one-:not() focus rule (0,5,1) — so the glow never
   rendered. Force border-color + box-shadow on focus with !important. */
.ih-callmodal .wpcf7-form input.wpcf7-form-control:not([type="submit"]):focus,
.ih-callmodal .wpcf7-form textarea.wpcf7-form-control:focus,
.ih-callmodal .wpcf7-form select.wpcf7-form-control:focus {
    border-color: var(--ih-accent, #eb9315) !important;
    box-shadow: 0 0 0 4px rgba(235, 147, 21, 0.2), 0 4px 20px rgba(235, 147, 21, 0.14) !important;
}

.ih-callmodal .wpcf7-form input::placeholder,
.ih-callmodal .wpcf7-form textarea::placeholder {
    color: #9b9488;
    opacity: 1;
}

/* intl-tel-input flag dropdown sits well inside the rounded phone input */
.ih-callmodal .iti {
    width: 100%;
    display: block;
}

/* dial code stays ink on the light modal field */
.ih-callmodal .iti__selected-dial-code {
    color: var(--ih-ink, #18140E);
}

/* CF7 messages — in-tone with the block forms (warm terracotta, not raw red) */
.ih-callmodal .wpcf7-form .wpcf7-not-valid-tip {
    color: var(--ih-error, #c0492e);
    font-size: 12.5px;
    font-weight: 600;
    margin-top: 6px;
}

.ih-callmodal .wpcf7-form .wpcf7-not-valid.wpcf7-form-control:not([type="submit"]) {
    border-color: var(--ih-error, #c0492e) !important;
    box-shadow: 0 0 0 3px rgba(192, 73, 46, 0.14) !important;
}

.ih-callmodal .wpcf7-form .wpcf7-response-output {
    border-radius: 12px;
    border-width: 1px;
    font-size: 13.5px;
    padding: 12px 16px;
    margin: 14px 0 0;
    color: var(--ih-ink, #18140E);
}

.ih-callmodal .wpcf7-form .wpcf7-response-output.wpcf7-validation-errors,
.ih-callmodal .wpcf7-form .wpcf7-response-output.wpcf7-spam-blocked {
    border-color: var(--ih-error, #c0492e);
    background: rgba(192, 73, 46, 0.08);
    color: var(--ih-error, #c0492e);
}

.ih-callmodal .wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ok {
    border-color: var(--ih-accent, #eb9315);
    background: rgba(235, 147, 21, 0.1);
    color: var(--ih-accent-text, #9A5E00);
}

/* success message — brand check icon + breathing room (mirrors form-voza).
   Absolute icon in reserved left padding: no overlap on 1/2 lines; only the
   mail-sent-ok state is touched, error/spam states stay as-is. */
.ih-callmodal .wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ok {
    position: relative;
    margin-top: 24px;
    padding-left: 44px;
    padding-right: 18px;
}

.ih-callmodal .wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ok::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 13px;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* submit — amber pill with glow (matches .form-voza / .ih-btn--amber) */
.ih-callmodal .wpcf7-form input.wpcf7-submit,
.ih-callmodal .wpcf7-form button.wpcf7-submit {
    display: inline-block;
    width: 100%;
    height: auto;
    padding: 15px 34px;
    border: none;
    /* button carries .rounded → style.css .rounded{border-radius:2px !important}.
       Beat it: this selector (0,3,1) + !important > .rounded (0,1,0) + !important */
    border-radius: 999px !important;
    background: var(--ih-accent, #eb9315);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 0 0 0 4px rgba(235, 147, 21, 0.18), 0 10px 26px -8px rgba(235, 147, 21, 0.55);
    transition: transform 0.35s cubic-bezier(.16, .84, .36, 1), box-shadow 0.35s ease;
}

.ih-callmodal .wpcf7-form input.wpcf7-submit:hover,
.ih-callmodal .wpcf7-form button.wpcf7-submit:hover {
    transform: translateY(-2px);
    background: var(--ih-accent, #eb9315);
    box-shadow: 0 0 0 4px rgba(235, 147, 21, 0.26), 0 18px 38px -10px rgba(235, 147, 21, 0.6);
}

/* mobile: drop the image, show a roomy form-only card */
@media (max-width: 991.98px) {
    .ih-callmodal .modal-content {
        border-radius: 20px !important;
    }

    .ih-callmodal__form {
        padding: 40px 24px 32px;
    }

    .ih-callmodal__title {
        font-size: 24px;
        margin-bottom: 22px;
    }

    /* over the cream form on mobile the close needs an ink glyph on a soft chip */
    .ih-callmodal__close {
        top: 12px;
        right: 12px;
        width: 36px;
        height: 36px;
        background-color: rgba(24, 20, 8, 0.06);
    }
}

/* ---------------------------------------------------------------------
   8. FOCUS VISIBILITY (a11y)
   Visible amber focus ring for keyboard users, without affecting the
   resting visual (mouse clicks don't trigger :focus-visible).
   --------------------------------------------------------------------- */
.ih-btn:focus-visible,
.ih-header__burger:focus-visible,
.ih-header__nav-link:focus-visible,
.ih-header__dropdown-toggle:focus-visible,
.ih-header__phone:focus-visible,
.ih-header__lang-toggle:focus-visible,
.ih-proj-item:focus-visible,
.ih-offcanvas__projects-toggle:focus-visible,
.ih-offcanvas__menu a:focus-visible,
.ih-offcanvas__social-link:focus-visible,
.ih-footer a:focus-visible,
.footer-buttons a:focus-visible,
.footer-buttons button:focus-visible,
.wpcf7 input:focus-visible,
.wpcf7 select:focus-visible,
.wpcf7 textarea:focus-visible,
.wpcf7 button:focus-visible,
.wpcf7 .wpcf7-submit:focus-visible {
    outline: 2px solid var(--ih-primary, var(--ih-accent, #eb9315));
    outline-offset: 2px;
    border-radius: 8px;
}

/* round FAB / pill buttons read better with a ring than a square outline */
.footer-buttons .rounded-circle:focus-visible,
.ih-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ih-body-bg, #fdf8f1),
                0 0 0 5px var(--ih-primary, var(--ih-accent, #eb9315));
}

/* GDPR / cookie consent accept button (plugin markup: .btn.btn-primary, no
   ih-btn class) — bring to the site pill radius like every other CTA. */
#gdpr-box .gdpr-button-accept,
#gdpr-box .btn {
    border-radius: 999px !important;
}