/* ══════════════════════════════════════════════════════════════════════════
   Галузь — житлові будівлі /galuzi/bim-dlya-zhytlovyh-budivel/
   (templates/bim-dlya-zhytlovyh-budivel.php)

   Портовано з `residential-bim-page-template/residential-page.css`
   замовника — ФІНАЛЬНИЙ стан каскаду. У файлі шаблону блоки перевизначені
   по кілька разів («premium technical map», «aligned with the published
   Process section», пізні правки в кінці файлу з вищою специфічністю та
   `!important`); тут кожне значення — те, що реально діє в браузері.

   Класи житлової сторінки (residential-*, node-step, dual-story,
   systems-group…) — окрема система, не .ind-* промислової сторінки, тож
   спільного файлу галузей немає.

   ЩО НЕ ПЕРЕНОСИЛОСЬ:
     .breadcrumbs*            — global/breadcrumbs (вигляд сайту).
     .faq__list / .faq-item*  — спільний акордеон; тут лише хром секції.
     .final-cta*              — класи .service-cta*, як на решті сторінок.
     .node-grid, .node-card, .split, .systems-grid, .example-layout,
     .node-step__visual, .text-link — у розмітці шаблону не використані.

   РОЗМІТКА vs ШАБЛОН:
     лінія під секцією        — border-bottom + border-image, як у шаблоні
                                (::after секцій зайнятий декором, тому не
                                .has-line-bottom).
     вузли                    — data-faq-* замість residential-page.js.
     селектори тегів (h3, p,
     li, span, i)             — елементи БЕМ (…__title, …__text, …__item).

   01 · Оболонка, типографіка, кнопки   06 · Практичний приклад
   02 · Хіро                            07 · Що узгодити заздалегідь
   03 · Особливості                     08 · Пов’язані послуги
   04 · Критичні зони                   09 · CTA
   05 · Масштаб (два сценарії)          10 · FAQ
   05b · Системи                        11 · Адаптив
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 01 · Оболонка ──────────────────────────────────────────────────────── */
.residential-page {
    overflow:   clip;
    background: radial-gradient(circle at 12% 9%, rgba(0, 152, 240, .1), transparent 26%),
                radial-gradient(circle at 92% 48%, rgba(76, 141, 255, .07), transparent 30%),
                var(--color-bg);
    color:      var(--color-text);
}

/* База — через :where(): на сторінці стоять спільні блоки (крихти, FAQ,
   CTA), і .residential-page h2 (0,1,1) перебивав би їхні однокласові правила. */
:where(.residential-page) h1,
:where(.residential-page) h2,
:where(.residential-page) h3,
:where(.residential-page) p { margin: 0; }

:where(.residential-page) h1,
:where(.residential-page) h2,
:where(.residential-page) h3 { color: var(--color-text); }

:where(.residential-page) p {
    font-size:   16px;
    line-height: 1.7;
    color:       var(--color-text-soft);
}

.page-section {
    position:            relative;
    padding:             104px 0;
    border-bottom:       .5px solid transparent;
    border-image-source: var(--gradient-line);
    border-image-slice:  1;
}

.residential-title {
    font-size:      clamp(28px, 4vw, 48px);
    font-weight:    300;
    line-height:    1.12;
    letter-spacing: -1.5px;
}

.residential-page .is-accent {
    display:                 inline-block;
    font-weight:             600;
    letter-spacing:          -1px;
    background-image:        var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                   transparent;
    -webkit-text-fill-color: transparent;
}

.section-heading {
    max-width:     850px;
    margin-bottom: 54px;
}

.section-heading--center {
    margin-right: auto;
    margin-left:  auto;
    text-align:   center;
}

.section-heading--center .section-eyebrow { justify-content: center; }

/* ── Кнопки (локально, як на решті сторінок) ────────────────────────────── */
.btn {
    position:        relative;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    box-sizing:      border-box;
    cursor:          pointer;
    text-decoration: none;
}

.btn--primary {
    font-size:      var(--fs-button);
    line-height:    var(--lh-button);
    letter-spacing: var(--ls-button);
}

.btn--lg { min-height: 56px; }

.residential-page .btn__label { min-width: 0; }

.residential-page .btn .icon { flex-shrink: 0; }

/* ── 02 · Хіро ──────────────────────────────────────────────────────────── */
.residential-hero {
    display:        flex;
    /* По верху, а не по центру: інакше відстань від крихт до надзаголовка
       залежала б від кількості тексту нижче й стрибала між сторінками. */
    align-items:    flex-start;
    min-height:     760px;
    background:     radial-gradient(circle at 76% 48%, rgba(18, 91, 175, .13), transparent 40%),
                    linear-gradient(180deg, #00000c 0%, #031d47 100%);
}

/* Фото — декоративне тло під градієнтами; URL приходить із поля через
   --residential-hero-image. */
.residential-hero__image {
    position:               absolute;
    inset:                  0;
    background:             linear-gradient(90deg, #00000c 0%, #010d22 30%, rgba(1, 13, 34, .99) 40%, rgba(3, 29, 71, .88) 50%, rgba(3, 29, 71, .62) 59%, rgba(3, 29, 71, .3) 66%, transparent 73%),
                            linear-gradient(180deg, rgba(0, 0, 12, .94) 0%, rgba(3, 29, 71, .08) 22%, rgba(3, 29, 71, .08) 76%, rgba(3, 29, 71, .98) 100%),
                            var(--residential-hero-image, none) right center / auto 82% no-repeat;
    opacity:                .82;
    -webkit-mask-image:     linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .2) 8%, #000 29%, #000 calc(100% - 8px), rgba(0, 0, 0, .35) calc(100% - 4px), transparent 100%),
                            linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .2) 7%, #000 27%, #000 72%, rgba(0, 0, 0, .22) 92%, transparent 100%);
    mask-image:             linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .2) 8%, #000 29%, #000 calc(100% - 8px), rgba(0, 0, 0, .35) calc(100% - 4px), transparent 100%),
                            linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .2) 7%, #000 27%, #000 72%, rgba(0, 0, 0, .22) 92%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite:         intersect;
}

.residential-hero__image::after {
    content:        "";
    position:       absolute;
    inset:          -2px;
    pointer-events: none;
    background:     linear-gradient(90deg, #00000c 0%, #010d22 27%, rgba(1, 13, 34, .96) 40%, rgba(3, 29, 71, .76) 52%, rgba(3, 29, 71, .44) 61%, rgba(3, 29, 71, .16) 68%, transparent 74%),
                    linear-gradient(180deg, #00000c 0%, rgba(1, 13, 34, .9) 8%, transparent 29%, transparent 70%, rgba(3, 29, 71, .88) 91%, #031d47 100%);
}

.residential-hero__layout {
    position: relative;
    z-index:  1;
    width:    100%;
}

.residential-hero__content {
    max-width:   960px;
    /* Верхній відступ тепер тримає смуга під крихти (css/main.css). */
    padding:     0 0 46px;
    text-shadow: 0 4px 28px rgba(0, 4, 15, .9);
}


.residential-hero__title {
    max-width:      760px;
    margin-bottom:  26px;
    font-size:      clamp(40px, 3vw, 58px);
    font-weight:    300;
    line-height:    1.05;
    letter-spacing: -1.9px;
}

.residential-hero__lead {
    max-width:   700px;
    margin:      0 0 32px;
    font-size:   18.5px;
    line-height: 32px;
}

.residential-page .residential-hero__btn {
    width:      270px;
    min-width:  270px;
    height:     56px;
    min-height: 54px;
    padding:    0 26px;
}

.hero-proof {
    display:                 grid;
    grid-template-columns:   repeat(4, minmax(0, 1fr));
    max-width:               920px;
    margin:                  50px 0 0;
    padding:                 16px 20px;
    list-style:              none;
    border:                  .5px solid rgba(190, 218, 255, .2);
    border-radius:           14px;
    background:              linear-gradient(135deg, rgba(55, 104, 164, .25), rgba(12, 45, 87, .34) 46%, rgba(3, 20, 50, .24));
    box-shadow:              inset 0 1px rgba(255, 255, 255, .1), 0 10px 32px rgba(0, 11, 35, .2);
    -webkit-backdrop-filter: blur(14px) saturate(1.16);
    backdrop-filter:         blur(14px) saturate(1.16);
}

.hero-proof__item {
    display:      flex;
    align-items:  center;
    gap:          9px;
    padding:      4px 15px;
    border-right: 1px solid rgba(120, 181, 255, .15);
    font-size:    14px;
    color:        #dbe8ff;
}

.hero-proof__item:last-child { border-right: 0; }

.hero-proof__check {
    flex:   0 0 auto;
    width:  18px;
    height: 18px;
    color:  #44b8ff;
}

/* ── 03 · Особливості ───────────────────────────────────────────────────── */
.residential-importance {
    isolation:  isolate;
    overflow:   hidden;
    background: linear-gradient(180deg, rgba(3, 24, 59, .18), rgba(2, 17, 44, .52)),
                radial-gradient(ellipse at 72% 14%, rgba(27, 100, 178, .13), transparent 58%);
}

.residential-importance::after {
    content:            "";
    position:           absolute;
    z-index:            -1;
    inset:              0 0 auto 42%;
    height:             58%;
    pointer-events:     none;
    background:         linear-gradient(90deg, transparent 0 49.8%, rgba(75, 186, 255, .09) 50%, transparent 50.2%) 0 0 / 48px 48px,
                        linear-gradient(transparent 0 49.8%, rgba(75, 186, 255, .09) 50%, transparent 50.2%) 0 0 / 48px 48px;
    opacity:            .38;
    -webkit-mask-image: radial-gradient(ellipse at 50% 20%, #000, transparent 72%);
    mask-image:         radial-gradient(ellipse at 50% 20%, #000, transparent 72%);
}

.importance-layout {
    position:              relative;
    z-index:               1;
    display:               grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    align-items:           start;
    gap:                   clamp(42px, 5.4vw, 82px);
}

.importance-heading { max-width: 590px; }

/* (0,2,0): у шаблоні цей заголовок не зменшується на мобайлі разом з
   рештою H2 — перебиває .residential-title у медіа ≤760. */
.residential-importance .importance-heading__title {
    max-width:     570px;
    margin-bottom: 24px;
    font-size:     clamp(34px, 3.65vw, 50px);
}

.importance-heading__lead {
    max-width:   550px;
    font-size:   15px;
    line-height: 1.7;
    color:       rgba(200, 218, 242, .74);
}

.importance-content { min-width: 0; }

.importance-list {
    position:   relative;
    display:    grid;
    gap:        12px;
    margin:     2px 0 0;
    padding:    0 0 0 26px;
    list-style: none;
}

.importance-list::before {
    content:    "";
    position:   absolute;
    top:        28px;
    bottom:     28px;
    left:       8px;
    width:      .5px;
    background: linear-gradient(180deg, transparent, rgba(44, 168, 255, .6) 10%, rgba(44, 168, 255, .6) 90%, transparent);
}

.importance-item {
    position:              relative;
    display:               grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items:           start;
    gap:                   15px;
    min-width:             0;
    min-height:            142px;
    padding:               21px 38px 21px 22px;
    border:                1px solid rgba(86, 157, 236, .2);
    border-radius:         11px;
    background:            linear-gradient(104deg, rgba(21, 67, 125, .58), rgba(13, 49, 101, .64));
    box-shadow:            inset 0 1px 0 rgba(218, 237, 255, .045), 0 8px 24px rgba(0, 7, 27, .16);
}

.importance-item::before {
    content:       "";
    position:      absolute;
    top:           50%;
    left:          -22px;
    width:         7px;
    height:        7px;
    border:        1px solid rgba(91, 196, 255, .74);
    border-radius: 50%;
    background:    #0b4d93;
    box-shadow:    0 0 9px rgba(38, 167, 255, .36);
    transform:     translate(-50%, -50%);
}

.importance-item__number {
    padding-top:    2px;
    font-size:      13px;
    line-height:    1.4;
    letter-spacing: .05em;
    color:          #60b8f3;
}

.importance-item__title {
    font-size:      clamp(17px, 1.4vw, 21px);
    font-weight:    500;
    line-height:    1.35;
    letter-spacing: -.4px;
    color:          #f1f6ff;
}

.importance-item__text {
    margin-top:  8px;
    font-size:   13px;
    line-height: 1.62;
    color:       rgba(200, 218, 242, .74);
}

.residential-page .importance-cta {
    width:           max-content;
    min-width:       176px;
    height:          38px;
    margin:          28px 0 0;
    padding:         10px 18px;
    justify-content: center;
    border-color:    rgba(190, 222, 255, .2);
    border-radius:   6px;
    font-size:       13px;
    line-height:     18px;
    box-shadow:      0 9px 22px -12px rgba(76, 154, 245, .62);
}

.importance-cta::before { background-image: linear-gradient(90deg, #398be8 0%, #68b7ff 100%); }

/* ── 04 · Критичні зони ─────────────────────────────────────────────────── */
.residential-nodes {
    isolation:  isolate;
    overflow:   hidden;
    background: radial-gradient(circle at 82% 18%, rgba(30, 126, 236, .13), transparent 31%),
                radial-gradient(circle at 9% 78%, rgba(0, 152, 240, .075), transparent 28%),
                linear-gradient(180deg, #031d47 0%, #061c42 48%, #03182f 100%);
}

.residential-nodes::before {
    content:            "";
    position:           absolute;
    inset:              0;
    z-index:            -1;
    pointer-events:     none;
    background-image:   linear-gradient(rgba(105, 176, 255, .045) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(105, 176, 255, .045) 1px, transparent 1px);
    background-size:    56px 56px;
    opacity:            .38;
    -webkit-mask-image: radial-gradient(ellipse 72% 80% at 70% 42%, #000 0%, transparent 76%);
    mask-image:         radial-gradient(ellipse 72% 80% at 70% 42%, #000 0%, transparent 76%);
}

.residential-nodes::after {
    content:        "";
    position:       absolute;
    right:          -11%;
    bottom:         11%;
    z-index:        -1;
    width:          54%;
    height:         1px;
    pointer-events: none;
    background:     linear-gradient(90deg, transparent, rgba(72, 180, 255, .34), transparent);
    box-shadow:     0 0 20px rgba(48, 154, 255, .22);
    transform:      rotate(-13deg);
}

.residential-nodes .section-heading {
    position:       relative;
    max-width:      920px;
    margin-bottom:  clamp(48px, 6vw, 78px);
    padding-bottom: 28px;
}

.residential-nodes .section-heading::after {
    content:    "";
    position:   absolute;
    bottom:     0;
    left:       50%;
    width:      min(100%, 620px);
    height:     1px;
    background: var(--gradient-line);
    transform:  translateX(-50%);
}

.node-process {
    width:  min(100%, 1120px);
    margin: 0 auto;
}

.node-step {
    position:      relative;
    overflow:      hidden;
    margin-bottom: 10px;
    border:        1px solid rgba(67, 137, 220, .18);
    border-radius: 11px;
    background:    rgba(8, 32, 72, .7);
    box-shadow:    0 12px 26px -20px rgba(0, 4, 19, .95);
    transition:    border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.node-step:hover {
    border-color: rgba(89, 170, 244, .3);
    background:   rgba(10, 39, 84, .78);
}

.node-step.is-open {
    border-color: rgba(74, 179, 255, .62);
    background:   linear-gradient(145deg, rgba(14, 54, 111, .9), rgba(7, 31, 72, .94));
    box-shadow:   inset 0 1px 0 rgba(203, 231, 255, .07), 0 20px 42px -31px rgba(62, 165, 255, .58);
}

.node-step__toggle {
    display:               grid;
    grid-template-columns: 58px minmax(0, 1fr) 34px;
    align-items:           center;
    gap:                   14px;
    width:                 100%;
    min-height:            66px;
    margin:                0;
    padding:               13px 17px 13px 21px;
    border:                0;
    background:            transparent;
    font:                  inherit;
    color:                 #e8f1ff;
    text-align:            left;
    cursor:                pointer;
}

.node-step__number {
    font-size:      12px;
    line-height:    1;
    letter-spacing: .16em;
    color:          #65bdf7;
}

.node-step__title {
    font-size:   16px;
    font-weight: 500;
    line-height: 1.35;
}

.node-step__icon {
    display:       grid;
    place-items:   center;
    width:         29px;
    height:        29px;
    border:        1px solid rgba(72, 145, 224, .24);
    border-radius: 7px;
    background:    #102a51;
    color:         #9fc5ef;
    box-shadow:    0 5px 11px rgba(0, 7, 22, .26);
    transition:    color var(--transition), background var(--transition), box-shadow var(--transition), transform var(--transition);
}

/* Іконка теми дивиться вгору: закритий стан — перевернута (вниз), як у шаблоні. */
.node-step__icon-svg {
    width:      15px;
    height:     15px;
    transform:  rotate(180deg);
    transition: transform var(--transition);
}

.node-step.is-open .node-step__icon {
    border-color: rgba(88, 180, 255, .42);
    background:   #123d75;
    color:        #d7edff;
    box-shadow:   0 0 14px rgba(69, 171, 255, .16);
}

.node-step.is-open .node-step__icon-svg { transform: rotate(0deg); }

/* Розкриття — механізм FAQ (js/main.js → faqAccordion()). */
.node-step__panel {
    max-height: 0;
    overflow:   hidden;
    transition: max-height .4s ease;
}

.node-step.is-open .node-step__panel { max-height: none; }

.node-step__content {
    display:               grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(250px, .75fr);
    align-items:           center;
    gap:                   clamp(28px, 5vw, 68px);
    margin:                0 17px 17px;
    padding:               clamp(29px, 4vw, 48px);
    border-top:            1px solid rgba(104, 181, 249, .16);
    border-radius:         8px;
    background:            radial-gradient(circle at 90% 18%, rgba(49, 148, 244, .13), transparent 38%), rgba(5, 24, 58, .66);
}

.node-step__content > * { min-width: 0; }

.node-step__heading {
    margin-bottom:  21px;
    font-size:      clamp(23px, 2.5vw, 34px);
    font-weight:    400;
    line-height:    1.2;
    letter-spacing: -.025em;
    color:          #f3f7ff;
}

.node-step__heading-number {
    font-weight: 300;
    color:       #61bcf7;
}

.node-step__lead,
.node-step__text {
    max-width:   710px;
    font-size:   15.5px;
    line-height: 1.7;
    color:       #aebfda;
}

.node-step__lead {
    margin-bottom: 13px;
    font-weight:   600;
    color:         #e2edff;
}

.node-step__photo {
    align-self:    center;
    min-width:     0;
    margin:        0;
    overflow:      hidden;
    border-radius: 12px;
}

.node-step__image {
    display:         block;
    width:           100%;
    height:          auto;
    aspect-ratio:    4 / 3;
    object-fit:      cover;
    object-position: center;
}

/* ── 05 · Масштаб: два сценарії ─────────────────────────────────────────── */
.residential-scale {
    isolation:  isolate;
    overflow:   hidden;
    background: radial-gradient(circle at 4% 18%, rgba(31, 117, 218, .085), transparent 28%),
                linear-gradient(180deg, #03182f 0%, #041b3e 52%, #031d47 100%);
}

.residential-scale::before {
    content:        "";
    position:       absolute;
    inset:          0;
    z-index:        -1;
    pointer-events: none;
    background:     linear-gradient(90deg, transparent 0%, rgba(77, 164, 243, .035) 50%, transparent 100%),
                    repeating-linear-gradient(90deg, transparent 0 79px, rgba(91, 170, 244, .035) 80px);
    opacity:        .7;
}

/* План багатосекційного комплексу — декоративне тло ліворуч. */
.residential-scale::after {
    content:            "";
    position:           absolute;
    top:                50%;
    left:               -7%;
    z-index:            -1;
    width:              57%;
    aspect-ratio:       1619 / 971;
    pointer-events:     none;
    background:         url("../../img/residential-scale-plan.webp") center / contain no-repeat;
    opacity:            .85;
    transform:          translateY(-50%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, rgba(0, 0, 0, .8) 52%, transparent 72%);
    mask-image:         radial-gradient(ellipse at center, #000 35%, rgba(0, 0, 0, .8) 52%, transparent 72%);
}

.dual-story {
    position:     relative;
    display:      grid;
    gap:          14px;
    width:        62%;
    margin-left:  auto;
}

.dual-story::before {
    content:    "";
    position:   absolute;
    top:        46px;
    bottom:     46px;
    left:       35px;
    z-index:    0;
    width:      1px;
    background: linear-gradient(180deg, transparent, rgba(76, 183, 255, .5) 8%, rgba(76, 183, 255, .17) 92%, transparent);
}

.dual-story__item {
    position:              relative;
    isolation:             isolate;
    display:               grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items:           start;
    column-gap:            clamp(22px, 3vw, 42px);
    padding:               clamp(28px, 3.5vw, 42px);
    border:                1px solid transparent;
    border-radius:         15px;
    background:            linear-gradient(145deg, rgba(8, 35, 78, .92), rgba(4, 22, 53, .86)) padding-box,
                           linear-gradient(120deg, rgba(106, 190, 255, .42), rgba(46, 103, 179, .1) 52%, rgba(155, 205, 255, .18)) border-box;
    box-shadow:            inset 0 1px 0 rgba(213, 235, 255, .045), 0 26px 62px -48px rgba(0, 3, 17, .98);
}

.dual-story__item > * { min-width: 0; }

.dual-story__item::before {
    content:    "";
    position:   absolute;
    top:        0;
    left:       clamp(36px, 5vw, 60px);
    width:      150px;
    height:     1px;
    background: linear-gradient(90deg, #52c4ff, transparent);
    box-shadow: 0 0 15px rgba(64, 180, 255, .34);
}

.dual-story__item::after {
    content:       "";
    position:      absolute;
    top:           31px;
    right:         31px;
    width:         7px;
    height:        7px;
    border:        1px solid rgba(114, 197, 255, .7);
    border-radius: 50%;
    background:    #082b5b;
    box-shadow:    0 0 14px rgba(64, 180, 255, .48);
}

.story-number {
    position:                relative;
    z-index:                 1;
    display:                 block;
    grid-column:             1;
    grid-row:                1 / span 4;
    font-size:               clamp(43px, 4.6vw, 66px);
    font-weight:             300;
    line-height:             .88;
    letter-spacing:          -.06em;
    color:                   transparent;
    -webkit-text-stroke:     1px rgba(102, 190, 255, .56);
    text-shadow:             0 0 20px rgba(48, 163, 255, .13);
}

.dual-story__title {
    grid-column:    2;
    font-size:      clamp(27px, 2.5vw, 38px);
    font-weight:    300;
    line-height:    1.14;
    letter-spacing: -.035em;
    color:          #eef5ff;
}

.dual-story__text {
    grid-column: 2;
    font-size:   16px;
    line-height: 1.72;
    color:       #b4c4dd;
}

.check-list,
.transition-route {
    grid-column: 2;
    margin-top:  28px;
}

.check-list {
    display:    grid;
    padding:    0;
    list-style: none;
    border-top: 1px solid rgba(84, 164, 238, .18);
}

.check-list__item {
    position:      relative;
    min-height:    48px;
    padding:       13px 14px 13px 30px;
    border-bottom: 1px solid rgba(84, 164, 238, .13);
    font-size:     14.5px;
    line-height:   1.55;
    color:         #d2e0f5;
}

.check-list__item::before {
    content:       "";
    position:      absolute;
    top:           20px;
    left:          8px;
    width:         6px;
    height:        6px;
    border-radius: 50%;
    background:    #58bfff;
    box-shadow:    0 0 12px rgba(60, 180, 255, .55);
}

/* Маршрут — один рядок із горизонтальною прокруткою на вузьких екранах. */
.transition-route {
    position:       relative;
    display:        flex;
    flex-wrap:      nowrap;
    align-items:    center;
    gap:            6px;
    max-width:      100%;
    min-width:      0;
    padding-bottom: 6px;
    overflow-x:     auto;
}

.transition-route::before {
    content:    "";
    position:   absolute;
    top:        50%;
    right:      0;
    left:       0;
    z-index:    -1;
    height:     1px;
    background: linear-gradient(90deg, transparent, rgba(76, 183, 255, .5), transparent);
    box-shadow: 0 0 12px rgba(59, 169, 255, .18);
}

.transition-route__step {
    display:       grid;
    flex:          1 0 auto;
    place-items:   center;
    min-height:    45px;
    padding:       9px 10px;
    border:        1px solid rgba(85, 176, 247, .34);
    border-radius: 8px;
    background:    rgba(5, 28, 66, .94);
    box-shadow:    inset 0 1px 0 rgba(208, 234, 255, .035), 0 8px 20px rgba(0, 8, 27, .2);
    font-size:     11px;
    line-height:   1.25;
    color:         #d7e8ff;
    text-align:    center;
    white-space:   nowrap;
}

.transition-route__arrow {
    display:       grid;
    flex:          0 0 20px;
    place-items:   center;
    width:         20px;
    height:        22px;
    border:        1px solid rgba(88, 179, 250, .25);
    border-radius: 50%;
    background:    #092b59;
    box-shadow:    0 0 12px rgba(59, 169, 255, .14);
    font-size:     12px;
    color:         #70c4ff;
}

/* ── 05b · Системи ──────────────────────────────────────────────────────── */
.residential-systems {
    isolation:  isolate;
    overflow:   hidden;
    background: radial-gradient(circle at 16% 48%, rgba(36, 129, 232, .12), transparent 30%),
                linear-gradient(180deg, #031d47 0%, #041a3e 55%, #03182f 100%);
}

.residential-systems::before {
    content:            "";
    position:           absolute;
    inset:              0;
    z-index:            -1;
    pointer-events:     none;
    background-image:   linear-gradient(rgba(95, 171, 241, .035) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(95, 171, 241, .035) 1px, transparent 1px);
    background-size:    64px 64px;
    -webkit-mask-image: linear-gradient(90deg, #000, rgba(0, 0, 0, .5) 55%, transparent 92%);
    mask-image:         linear-gradient(90deg, #000, rgba(0, 0, 0, .5) 55%, transparent 92%);
}

.residential-systems .section-heading {
    max-width:     900px;
    margin-bottom: clamp(48px, 6vw, 76px);
}

/* ── 06 · Практичний приклад ────────────────────────────────────────────── */
.residential-example { background: radial-gradient(circle at 20% 60%, rgba(9, 107, 214, .14), transparent 34%); }

.example-heading {
    max-width:     1050px;
    margin-bottom: 36px;
}

.example-heading__text {
    max-width:  900px;
    margin-top: 24px;
}

.example-case {
    display:               grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items:           center;
    gap:                   clamp(24px, 4vw, 64px);
}

.example-visual {
    min-width: 0;
    margin:    0;
}

.example-visual__image {
    display:            block;
    width:              100%;
    height:             auto;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image:         linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.residential-page .example-kicker {
    margin-bottom: 12px;
    font-size:     18px;
    color:         var(--color-text);
}

.example-criteria {
    margin:        0;
    padding:       0;
    list-style:    none;
    counter-reset: criterion;
}

.example-criteria__item {
    display:               grid;
    grid-template-columns: 28px 1fr;
    gap:                   16px;
    padding:               20px 0;
    border-bottom:         1px solid rgba(120, 181, 255, .18);
    line-height:           1.6;
    color:                 var(--color-text-soft);
    counter-increment:     criterion;
}

.example-criteria__item::before {
    content:              counter(criterion, decimal-leading-zero);
    font-size:            12px;
    line-height:          2.2;
    font-variant-numeric: tabular-nums;
    color:                #77c6ff;
}

.residential-page .result-line {
    max-width:     100%;
    margin-top:    36px;
    padding:       22px 26px;
    border-left:   2px solid #74baff;
    border-radius: 0 12px 12px 0;
    background:    rgba(26, 93, 170, .12);
    line-height:   1.65;
    color:         #e4efff;
}

/* ── 07 · Що узгодити заздалегідь ───────────────────────────────────────── */
.timing-heading {
    max-width:     1000px;
    margin-bottom: 38px;
}

.timing-heading__text {
    max-width:  740px;
    margin-top: 24px;
}

.timing-layout {
    display:               grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    align-items:           center;
    gap:                   clamp(28px, 5vw, 72px);
}

.timing-photo {
    position:      relative;
    max-width:     440px;
    margin:        0;
    overflow:      hidden;
    border-radius: 18px;
    background:    #071a35;
}

.timing-photo::after {
    content:        "";
    position:       absolute;
    inset:          0;
    pointer-events: none;
    background:     linear-gradient(0deg, rgba(3, 28, 69, .65), transparent 35%),
                    linear-gradient(90deg, rgba(3, 28, 69, .18), transparent 40%);
}

.timing-photo__image {
    display: block;
    width:   100%;
    height:  auto;
}

.timing-photo__caption {
    position:    relative;
    z-index:     1;
    display:     grid;
    gap:         7px;
    padding:     18px 20px;
    background:  #071a35;
    font-size:   15px;
    line-height: 1.5;
    color:       #edf2ff;
}

.timing-photo__meta {
    font-size: 13px;
    color:     #b7c3de;
}

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

.priority-list__item {
    display:               grid;
    grid-template-columns: 52px 1fr;
    align-items:           center;
    gap:                   16px;
    min-height:            68px;
    padding:               14px 0;
    border-bottom:         1px solid rgba(84, 155, 255, .15);
    font-size:             clamp(16px, 1.4vw, 20px);
    line-height:           1.4;
    color:                 #e4edff;
}

.priority-list__number {
    font-size:      24px;
    font-weight:    300;
    letter-spacing: -.5px;
    color:          #83caff;
}

.timing-summary {
    position:              relative;
    display:               grid;
    grid-template-columns: 1fr 1fr;
    align-items:           center;
    gap:                   36px;
    margin-top:            38px;
    padding-top:           28px;
}

.timing-summary::before {
    content:    "";
    position:   absolute;
    inset:      0 0 auto;
    height:     1px;
    background: var(--gradient-line);
}

.inline-links {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: flex-end;
    gap:             16px;
}

.inline-links__link {
    display:         inline-flex;
    align-items:     center;
    gap:             7px;
    min-height:      44px;
    line-height:     1.5;
    color:           #78c9ff;
    text-decoration: none;
    transition:      color var(--transition);
}

.inline-links__link:hover,
.inline-links__link:focus-visible { color: #fff; }

/* ── 08 · Пов’язані послуги ─────────────────────────────────────────────── */
.services-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   24px;
}

.service-entry {
    position:       relative;
    display:        flex;
    flex-direction: column;
    gap:            22px;
    overflow:       hidden;
    padding:        36px;
    border:         1px solid rgba(160, 193, 244, .18);
    border-radius:  18px;
    background:     linear-gradient(135deg, rgba(45, 64, 110, .45), rgba(5, 22, 53, .72));
    box-shadow:     inset 0 1px 0 rgba(255, 255, 255, .05);
    transition:     border-color .2s;
}

.service-entry::before {
    content:    "";
    position:   absolute;
    inset:      0 16px auto;
    height:     1px;
    background: var(--gradient-line);
}

.service-entry:hover,
.service-entry:focus-within { border-color: rgba(119, 198, 255, .55); }

.service-entry-meta {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    color:           #77c6ff;
}

.service-entry-meta__number {
    font-size:      13px;
    letter-spacing: .15em;
    color:          #a3b5d4;
}

.service-entry__title {
    font-size:      clamp(23px, 2.3vw, 30px);
    font-weight:    600;
    line-height:    1.25;
    letter-spacing: -.4px;
}

.service-entry__text {
    max-width:     520px;
    margin-bottom: 12px;
}

.residential-page .service-entry-link {
    justify-content: space-between;
    gap:             7px;
    width:           100%;
    height:          auto;
    min-height:      56px;
    margin-top:      auto;
    padding:         16px 20px;
    white-space:     normal;
    text-align:      left;
}

.service-entry-link .btn__label { line-height: 1.5; }

/* ── 09 · CTA ───────────────────────────────────────────────────────────── */
.residential-page .service-cta { padding: 88px 0; }

.residential-page .service-cta__banner {
    display:       grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap:           34px;
    padding:       clamp(40px, 6vw, 80px) clamp(24px, 6vw, 80px);
    border:        1px solid rgba(125, 164, 255, .8);
    border-radius: 30px;
    background:    radial-gradient(ellipse at 0 0, rgba(113, 147, 234, .32), transparent 58%),
                   linear-gradient(165deg, #253464 0%, #18244d 58%, #0e1938 100%);
    box-shadow:    0 24px 64px rgba(0, 6, 24, .2);
    text-align:    center;
}

.service-cta__content {
    width:     100%;
    min-width: 0;
}

.residential-page .service-cta__eyebrow {
    justify-content: center;
    margin:          0 auto 24px;
    color:           var(--color-yellow);
}

.service-cta__eyebrow .section-dot {
    background: var(--color-yellow);
    box-shadow: none;
}

.service-cta__heading {
    max-width:      1000px;
    margin:         0 auto 26px;
    font-size:      clamp(30px, 3.5vw, 48px);
    font-weight:    600;
    line-height:    1.13;
    letter-spacing: -1.5px;
    text-wrap:      balance;
}

.residential-page .service-cta__text {
    max-width:   960px;
    margin:      0 auto;
    font-size:   18px;
    line-height: 1.65;
    color:       #bfcced;
}

.residential-page .service-cta__btn {
    justify-self: center;
    width:        auto;
    min-width:    256px;
    max-width:    100%;
    height:       auto;
    min-height:   56px;
    padding:      16px 28px;
    white-space:  normal;
}

/* ── 10 · FAQ ───────────────────────────────────────────────────────────── */
/* Акордеон — спільний блок main.css; хром секції — як на решті сторінок,
   нумерація «01.» — CSS-лічильником (у шаблоні — текстом у питанні). */
.residential-faq {
    position:   relative;
    isolation:  isolate;
    overflow:   hidden;
    padding:    92px 0 clamp(190px, 23vw, 340px);
    background: radial-gradient(ellipse at 50% 100%, rgba(0, 118, 225, .19), transparent 46%),
                linear-gradient(180deg, rgba(0, 9, 29, .45), rgba(0, 13, 37, .76));
}

.residential-faq__art {
    position:           absolute;
    z-index:            -1;
    bottom:             0;
    left:               50%;
    width:              min(1450px, 100%);
    transform:          translateX(-50%);
    pointer-events:     none;
    opacity:            .32;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 78%, transparent);
    mask-image:         linear-gradient(to bottom, transparent, #000 28%, #000 78%, transparent);
}

.residential-faq__art img {
    display:            block;
    width:              100%;
    height:             auto;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
    mask-image:         linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

.residential-faq > .container {
    position:       relative;
    z-index:        1;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            40px;
}

.faq__head {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            14px;
    width:          100%;
    text-align:     center;
}

.faq__title {
    max-width:      820px;
    font-size:      clamp(31px, 3.25vw, 46px);
    font-weight:    300;
    line-height:    1.12;
    letter-spacing: -1.5px;
}

.residential-faq .faq__list { counter-reset: residential-faq; }

.residential-faq .faq-item__question::before {
    content:           counter(residential-faq, decimal-leading-zero) ".";
    margin-right:      .3em;
    counter-increment: residential-faq;
}

/* ── 11 · Адаптив ───────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .residential-hero__image {
        background-position: center, center, right center;
        background-size:     auto, auto, auto 76%;
    }

    .hero-proof { grid-template-columns: 1fr 1fr; }

    .hero-proof__item:nth-child(2) { border-right: 0; }

    .dual-story__text { margin-top: 24px; }
}

@media (min-width: 761px) and (max-width: 1100px) {
    .dual-story { width: 72%; }

    .residential-scale::after {
        left:  -15%;
        width: 60%;
    }

    .node-step__content {
        grid-template-columns: 1fr;
        gap:                   24px;
    }

    .node-step__photo {
        width:     100%;
        max-width: 680px;
        margin:    auto;
    }
}


@media (max-width: 900px) {
    .importance-layout {
        grid-template-columns: 1fr;
        gap:                   36px;
    }

    .importance-heading { max-width: 760px; }

    .residential-importance .importance-heading__title { max-width: 720px; }

    .example-case { grid-template-columns: 1fr; }

    .example-visual {
        max-width: 850px;
        margin:    auto;
    }

    .example-criteria {
        display:               grid;
        grid-template-columns: 1fr 1fr;
        column-gap:            28px;
    }
}

/* Велика кнопка хіро розтягується з 768 (base.css шаблону), а не з 760. */
@media (max-width: 768px) {
    .residential-page .residential-hero__btn {
        width:     100%;
        min-width: 0;
    }
}

@media (max-width: 760px) {
    .page-section { padding: 74px 0; }

    .residential-title { font-size: clamp(31px, 8.5vw, 42px); }

    .section-heading { margin-bottom: 36px; }

    /* Хіро */
    .residential-hero {
        min-height:  auto;
        padding-top: 60px;
    }

    .residential-hero__image {
        background:         linear-gradient(90deg, #00000c 0%, #010d22 34%, rgba(1, 13, 34, .98) 44%, rgba(3, 29, 71, .82) 55%, rgba(3, 29, 71, .52) 65%, rgba(3, 29, 71, .2) 73%, transparent 80%),
                            linear-gradient(180deg, rgba(0, 0, 12, .96), rgba(3, 29, 71, .12) 28%, rgba(3, 29, 71, .9)),
                            var(--residential-hero-image, none) right center / auto 70% no-repeat;
        opacity:            .64;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 calc(100% - 8px), transparent 100%),
                            linear-gradient(180deg, transparent, #000 26%, #000 72%, transparent);
        mask-image:         linear-gradient(90deg, transparent, #000 25%, #000 calc(100% - 8px), transparent 100%),
                            linear-gradient(180deg, transparent, #000 26%, #000 72%, transparent);
    }

    .residential-hero__content { padding: 0 0 58px; }


    /* У шаблоні clamp(38px, 11vw, 54px): на 320–430 слово «багатоквартирних»
       ширше за контейнер і вилазить за край (у нас розривалося б посередині).
       10vw тримає найдовше слово в межах рядка. */
    .residential-hero__title { font-size: clamp(30px, 10vw, 54px); }

    .residential-hero__lead { font-size: 17px; }

    .hero-proof {
        grid-template-columns: 1fr;
        margin-top:            38px;
    }

    .hero-proof__item {
        min-height:    42px;
        border-right:  0;
        border-bottom: 1px solid rgba(120, 181, 255, .14);
    }

    .hero-proof__item:last-child { border-bottom: 0; }

    /* Критичні зони */
    .residential-nodes::before {
        background-size: 38px 38px;
        opacity:         .3;
    }

    .residential-nodes .section-heading {
        margin-bottom:  38px;
        padding-bottom: 22px;
    }

    .node-step__toggle {
        grid-template-columns: 42px minmax(0, 1fr) 30px;
        gap:                   10px;
        min-height:            61px;
        padding:               11px 12px 11px 15px;
    }

    .node-step__title { font-size: 14.5px; }

    .node-step__icon {
        width:  27px;
        height: 27px;
    }

    .node-step__content {
        grid-template-columns: 1fr;
        gap:                   27px;
        margin:                0 10px 10px;
        padding:               25px 20px 20px;
    }

    .node-step__heading {
        margin-bottom: 16px;
        font-size:     23px;
    }

    .node-step__lead,
    .node-step__text { font-size: 14.5px; }

    /* Масштаб */
    .residential-scale {
        padding-top:    260px;
        padding-bottom: 74px;
    }

    .residential-scale::after {
        top:       0;
        left:      -8%;
        width:     650px;
        max-width: 115%;
        opacity:   .75;
        transform: none;
    }

    .dual-story { width: 100%; }

    .dual-story::before { display: none; }

    .dual-story__item {
        grid-template-columns: 1fr;
        row-gap:               0;
        padding:               26px 22px;
        border-radius:         11px;
    }

    .story-number,
    .dual-story__title,
    .dual-story__text,
    .check-list,
    .transition-route { grid-column: 1; }

    .story-number {
        grid-row:      auto;
        margin-bottom: 24px;
        font-size:     46px;
    }

    .dual-story__title { font-size: 29px; }

    .dual-story__text {
        margin-top: 21px;
        font-size:  15px;
    }

    .check-list,
    .transition-route { margin-top: 24px; }

    .transition-route__step,
    .transition-route__arrow {
        position: relative;
        z-index:  1;
    }

    /* Системи */
    .residential-systems .section-heading { margin-bottom: 38px; }

    

    

    

    

    

    

    

    

    

    

    /* Що узгодити заздалегідь */
    .timing-layout {
        grid-template-columns: 1fr;
        gap:                   24px;
    }

    .timing-photo {
        width:  min(100%, 440px);
        margin: auto;
    }

    .timing-summary {
        grid-template-columns: 1fr;
        gap:                   20px;
    }

    .inline-links {
        flex-direction:  column;
        justify-content: flex-start;
    }

    .priority-list__item {
        grid-template-columns: 38px 1fr;
        min-height:            58px;
    }

    /* Послуги */
    .services-grid {
        grid-template-columns: 1fr;
        gap:                   16px;
    }

    .service-entry {
        gap:     18px;
        padding: 26px;
    }
}

@media (max-width: 600px) {
    .importance-list { padding-left: 20px; }

    .importance-list::before { left: 5px; }

    .importance-item {
        grid-template-columns: 28px minmax(0, 1fr);
        min-height:            0;
        padding:               19px 16px;
    }

    .importance-item::before { left: -15px; }

    .importance-item__text { font-size: 15px; }

    .residential-page .importance-cta {
        width:  100%;
        margin: 24px 0 0;
    }

    .example-criteria { grid-template-columns: 1fr; }

    .example-criteria__item { padding: 16px 0; }

    .residential-page .result-line { padding: 18px 20px; }

    .residential-page .service-cta__banner {
        gap:           28px;
        border-radius: 22px;
    }

    .residential-page .service-cta__text { font-size: 16px; }

    .residential-page .service-cta__btn {
        width:     100%;
        min-width: 0;
    }

    .residential-faq { padding-bottom: 165px; }

    .residential-faq__art {
        width:     135%;
        max-width: none;
        opacity:   .25;
    }
}

@media (max-width: 480px) {
    .residential-page .btn {
        max-width:   100%;
        min-width:   0;
        height:      auto;
        white-space: normal;
    }

    .residential-page .btn__label { overflow-wrap: break-word; }

    

    .example-case,
    .timing-layout { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .node-step,
    .node-step__icon,
    .node-step__icon-svg,
    .node-step__panel,
    .service-entry,
    .inline-links__link { transition: none; }
}

@media (max-width: 768px) {
}


/* Approved divider gradient used across industry pages. */
.residential-page .page-section {
    border-image-source: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 152, 240, .08) 8%,
        rgba(0, 152, 240, .48) 30%,
        rgba(237, 242, 255, .72) 52%,
        rgba(242, 200, 147, .46) 74%,
        rgba(242, 200, 147, .08) 92%,
        rgba(0, 0, 0, 0) 100%
    );
}

.residential-page .has-line-bottom::after {
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 152, 240, .08) 8%,
        rgba(0, 152, 240, .48) 30%,
        rgba(237, 242, 255, .72) 52%,
        rgba(242, 200, 147, .46) 74%,
        rgba(242, 200, 147, .08) 92%,
        rgba(0, 0, 0, 0) 100%
    );
}


/* Residential hero alignment with the approved industry design system. */
.residential-page {
    --gradient-accent: linear-gradient(90deg, #0098f0 0%, #edf2ff 52%, #f2c893 100%);
}
.residential-page .is-accent {
    background-image: var(--gradient-accent);
}

/* Extend the dark overlay past the image edge so the hero has no visible vertical seam. */
.residential-page .residential-hero__image::after {
    background:
        linear-gradient(90deg, #00000c 0%, #010d22 30%, rgba(1, 13, 34, .98) 42%, rgba(3, 29, 71, .84) 54%, rgba(3, 29, 71, .58) 65%, rgba(3, 29, 71, .25) 74%, transparent 84%),
        linear-gradient(180deg, #00000c 0%, rgba(1, 13, 34, .9) 8%, transparent 29%, transparent 70%, rgba(3, 29, 71, .88) 91%, #031d47 100%);
}


/* Desktop hero: progressively reveal the composite image so its left bitmap edge cannot form a seam. */
@media (min-width: 761px) {
    .residential-page .residential-hero__image {
        -webkit-mask-image:
            linear-gradient(90deg, transparent 0%, transparent 38%, rgba(0, 0, 0, .08) 48%, rgba(0, 0, 0, .34) 59%, rgba(0, 0, 0, .72) 70%, #000 81%, #000 calc(100% - 8px), rgba(0, 0, 0, .35) calc(100% - 4px), transparent 100%),
            linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .2) 7%, #000 27%, #000 72%, rgba(0, 0, 0, .22) 92%, transparent 100%);
        mask-image:
            linear-gradient(90deg, transparent 0%, transparent 38%, rgba(0, 0, 0, .08) 48%, rgba(0, 0, 0, .34) 59%, rgba(0, 0, 0, .72) 70%, #000 81%, #000 calc(100% - 8px), rgba(0, 0, 0, .35) calc(100% - 4px), transparent 100%),
            linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .2) 7%, #000 27%, #000 72%, rgba(0, 0, 0, .22) 92%, transparent 100%);
    }
}


/* Match the residential hero title gradient to the approved healthcare hero. */
.residential-page .residential-hero h1 .is-accent {
    background-image: linear-gradient(90deg, #008eee 0%, #acd5ff 38.462%, #fcc891 100%);
}


/* Render the healthcare gradient independently on every wrapped title line. */
.residential-page .residential-hero h1 .is-accent {
    display: inline;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background-image: linear-gradient(90deg, #008eee 0%, #acd5ff 38.462%, #fcc891 100%);
}


/* Unify residential decorative lines and frames with the approved divider gradient. */
.residential-page {
    --residential-design-gradient: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,152,240,.08) 8%, rgba(0,152,240,.48) 30%, rgba(237,242,255,.72) 52%, rgba(242,200,147,.46) 74%, rgba(242,200,147,.08) 92%, rgba(0,0,0,0) 100%);
    --residential-design-gradient-vertical: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,152,240,.08) 8%, rgba(0,152,240,.48) 30%, rgba(237,242,255,.72) 52%, rgba(242,200,147,.46) 74%, rgba(242,200,147,.08) 92%, rgba(0,0,0,0) 100%);
}

.residential-page .residential-nodes .section-heading::after,
.residential-page .dual-story__item::before,
.residential-page .transition-route::before,
.residential-page .timing-summary::before,
.residential-page .service-entry::before {
    background: var(--residential-design-gradient);
}

.residential-page .importance-list::before,
.residential-page .dual-story::before {
    background: var(--residential-design-gradient-vertical);
}

.residential-page .hero-proof,
.residential-page .importance-item,
.residential-page .node-step,
.residential-page .dual-story__item,
.residential-page .transition-route__step,
.residential-page .transition-route__arrow,
.residential-page .node-step__icon,
.residential-page .service-entry,
.residential-page .service-cta__banner {
    border-color: transparent;
}

.residential-page .hero-proof {
    background: linear-gradient(135deg, rgba(55,104,164,.25), rgba(12,45,87,.34) 46%, rgba(3,20,50,.24)) padding-box,
                var(--residential-design-gradient) border-box;
}

.residential-page .importance-item {
    background: linear-gradient(104deg, rgba(21,67,125,.58), rgba(13,49,101,.64)) padding-box,
                var(--residential-design-gradient) border-box;
}

.residential-page .node-step {
    background: linear-gradient(rgba(8,32,72,.7), rgba(8,32,72,.7)) padding-box,
                var(--residential-design-gradient) border-box;
}

.residential-page .node-step:hover {
    background: linear-gradient(rgba(10,39,84,.78), rgba(10,39,84,.78)) padding-box,
                var(--residential-design-gradient) border-box;
}

.residential-page .node-step.is-open {
    background: linear-gradient(145deg, rgba(14,54,111,.9), rgba(7,31,72,.94)) padding-box,
                var(--residential-design-gradient) border-box;
}

.residential-page .dual-story__item {
    background: linear-gradient(145deg, rgba(8,35,78,.92), rgba(4,22,53,.86)) padding-box,
                var(--residential-design-gradient) border-box;
}

.residential-page .transition-route__step {
    background: linear-gradient(rgba(5,28,66,.94), rgba(5,28,66,.94)) padding-box,
                var(--residential-design-gradient) border-box;
}

.residential-page .transition-route__arrow,
.residential-page .node-step__icon {
    background: linear-gradient(#102a51, #102a51) padding-box,
                var(--residential-design-gradient) border-box;
}

.residential-page .node-step.is-open .node-step__icon {
    background: linear-gradient(#123d75, #123d75) padding-box,
                var(--residential-design-gradient) border-box;
}

.residential-page .service-entry {
    background: linear-gradient(135deg, rgba(45,64,110,.45), rgba(5,22,53,.72)) padding-box,
                var(--residential-design-gradient) border-box;
}

.residential-page .service-cta__banner {
    background: radial-gradient(ellipse at 0 0, rgba(113,147,234,.32), transparent 58%) padding-box,
                linear-gradient(165deg, #253464 0%, #18244d 58%, #0e1938 100%) padding-box,
                var(--residential-design-gradient) border-box;
}

.residential-page .node-step__content,
.residential-page .check-list,
.residential-page .check-list__item,
.residential-page .example-criteria__item,
.residential-page .priority-list__item {
    border-image-source: var(--residential-design-gradient);
    border-image-slice: 1;
}

.residential-page .hero-proof__item,
.residential-page .result-line {
    border-image-source: var(--residential-design-gradient-vertical);
    border-image-slice: 1;
}

@media (max-width: 760px) {
    .residential-page .hero-proof__item {
        border-image-source: var(--residential-design-gradient);
    }
}


/* Keep card interiors solid; reserve the approved gradient for borders and decorative lines only. */
.residential-page .hero-proof {
    background: linear-gradient(rgba(15, 43, 86, .92), rgba(15, 43, 86, .92)) padding-box,
                var(--residential-design-gradient) border-box;
}

.residential-page .importance-item {
    background: linear-gradient(rgba(18, 55, 105, .96), rgba(18, 55, 105, .96)) padding-box,
                var(--residential-design-gradient) border-box;
}

.residential-page .node-step,
.residential-page .node-step:hover {
    background: linear-gradient(rgba(8, 32, 72, .96), rgba(8, 32, 72, .96)) padding-box,
                var(--residential-design-gradient) border-box;
}

.residential-page .node-step.is-open {
    background: linear-gradient(rgba(12, 45, 92, .98), rgba(12, 45, 92, .98)) padding-box,
                var(--residential-design-gradient) border-box;
}

.residential-page .dual-story__item {
    background: linear-gradient(rgba(7, 31, 72, .96), rgba(7, 31, 72, .96)) padding-box,
                var(--residential-design-gradient) border-box;
}

.residential-page .transition-route__step {
    background: linear-gradient(rgba(5, 28, 66, .98), rgba(5, 28, 66, .98)) padding-box,
                var(--residential-design-gradient) border-box;
}

.residential-page .service-entry {
    background: linear-gradient(rgba(18, 42, 82, .96), rgba(18, 42, 82, .96)) padding-box,
                var(--residential-design-gradient) border-box;
}


/* Align the residential H1 and icons with the approved industry-page system. */
.residential-page .residential-hero__title {
    line-height: 1.08;
}

.residential-page .residential-hero h1 .is-accent {
    display: inline-block;
    background-image: var(--gradient-accent);
    -webkit-box-decoration-break: slice;
    box-decoration-break: slice;
}

.residential-page .hero-proof__check {
    width: 16px;
    height: 16px;
    color: #77c6ff;
}

.residential-page .node-step__icon {
    border-color: rgba(72, 145, 224, .24);
    background: #102a51;
    color: #9fc5ef;
}

.residential-page .node-step.is-open .node-step__icon {
    border-color: rgba(88, 180, 255, .42);
    background: #123d75;
    color: #d7edff;
}

.residential-page .transition-route__arrow {
    border-color: rgba(88, 179, 250, .25);
    background: #092b59;
    color: #70c4ff;
}


/* Restore subtle solid outlines; the approved gradient remains only on dedicated decorative accents. */
.residential-page .hero-proof {
    border-color: rgba(190, 218, 255, .20);
    background: rgba(15, 43, 86, .92);
}

.residential-page .hero-proof__item {
    border-image: none;
    border-right: 1px solid rgba(120, 181, 255, .15);
}

.residential-page .hero-proof__item:last-child {
    border-right: 0;
}

.residential-page .importance-item {
    border-color: rgba(86, 157, 236, .20);
    background: rgba(18, 55, 105, .96);
}

.residential-page .node-step,
.residential-page .node-step:hover {
    border-color: rgba(67, 137, 220, .18);
    background: rgba(8, 32, 72, .96);
}

.residential-page .node-step:hover {
    border-color: rgba(89, 170, 244, .30);
}

.residential-page .node-step.is-open {
    border-color: rgba(74, 179, 255, .62);
    background: rgba(12, 45, 92, .98);
}

@media (max-width: 760px) {
    .residential-page .hero-proof__item {
        border-right: 0;
        border-bottom: 1px solid rgba(120, 181, 255, .14);
    }

    .residential-page .hero-proof__item:last-child {
        border-bottom: 0;
    }
}


/* Final match: solid card and icon outlines in the first three residential sections. */
.residential-page .hero-proof {
    border: 1px solid rgba(119, 166, 224, .26) !important;
    background: rgba(15, 43, 86, .92) !important;
    background-image: none !important;
}
.residential-page .hero-proof__item {
    border-image: none !important;
    border-right: 1px solid rgba(119, 166, 224, .18) !important;
}
.residential-page .hero-proof__item:last-child { border-right: 0 !important; }
.residential-page .hero-proof__check {
    color: #8bc8f5 !important;
    filter: none !important;
}
.residential-page .hero-proof__check path,
.residential-page .hero-proof__check polyline {
    stroke: currentColor !important;
    stroke-width: 1.5 !important;
}
.residential-page .importance-item {
    border: 1px solid rgba(86, 157, 236, .20) !important;
    background: rgba(18, 55, 105, .96) !important;
    background-image: none !important;
}
.residential-page .importance-item::before {
    border: 1px solid rgba(91, 196, 255, .58) !important;
    background: #0b4d93 !important;
    box-shadow: none !important;
}
.residential-page .node-step,
.residential-page .node-step:hover {
    border: 1px solid rgba(67, 137, 220, .22) !important;
    background: rgba(8, 32, 72, .96) !important;
    background-image: none !important;
}
.residential-page .node-step.is-open {
    border-color: rgba(74, 179, 255, .46) !important;
    background: rgba(12, 45, 92, .98) !important;
    background-image: none !important;
}
.residential-page .node-step__icon,
.residential-page .node-step.is-open .node-step__icon {
    border: 1px solid rgba(88, 166, 232, .34) !important;
    background: #102a51 !important;
    background-image: none !important;
    box-shadow: none !important;
}
.residential-page .node-step.is-open .node-step__icon {
    border-color: rgba(88, 180, 255, .46) !important;
    background: #123d75 !important;
}
@media (max-width: 760px) {
    .residential-page .hero-proof__item {
        border-right: 0 !important;
        border-bottom: 1px solid rgba(119, 166, 224, .18) !important;
    }
    .residential-page .hero-proof__item:last-child { border-bottom: 0 !important; }
}


/* Keep the approved industry H1 gradient clean: inherited hero shadow was greying transparent glyphs. */
.residential-page .residential-hero h1 .is-accent {
    background-image: linear-gradient(90deg, #0098f0 0%, #edf2ff 52%, #f2c893 100%) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
    opacity: 1 !important;
}


/* Match the residential hero CTA to the approved industry-button layout. */
.residential-page .residential-hero__btn {
    width: max-content !important;
    min-width: 270px !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 56px !important;
    padding: 17px 28px !important;
    gap: 14px !important;
    justify-content: space-between !important;
    white-space: normal !important;
}
.residential-page .residential-hero__btn .btn__label {
    min-width: 0 !important;
    line-height: 1.4 !important;
}
.residential-page .residential-hero__btn .icon-arrow {
    flex: 0 0 17px !important;
    width: 17px !important;
    height: 17px !important;
    margin-left: 4px !important;
}
@media (max-width: 768px) {
    .residential-page .residential-hero__btn {
        width: 100% !important;
        min-width: 0 !important;
    }
}


/* Match the second-section CTA to the standard industry button size. */
.residential-page .importance-cta {
    width: max-content !important;
    min-width: 270px !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 56px !important;
    margin-top: 28px !important;
    padding: 17px 28px !important;
    gap: 14px !important;
    justify-content: space-between !important;
    border-radius: 8px !important;
    font-size: 15.5px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
}
.residential-page .importance-cta .btn__label { min-width: 0 !important; }
.residential-page .importance-cta .icon-arrow {
    flex: 0 0 17px !important;
    width: 17px !important;
    height: 17px !important;
    margin-left: 4px !important;
}
@media (max-width: 600px) {
    .residential-page .importance-cta {
        width: 100% !important;
        min-width: 0 !important;
    }
}