/*
Theme Name: GeneratePress Child
Template: generatepress
Version: 2.2
Aligned with: docs/reference/septiki-sochi-47.html  (see docs/design-source.md)
*/

/* ==== septiki-sochi.ru: visual MVP polish (task #64) ==== */

:root {
    /* Aligned with reference design tokens (septiki-sochi-47.html) */
    --sept-primary:       #1b5e70;
    --sept-primary-dark:  #134456;
    --sept-primary-soft:  #e3eff3;
    --sept-text:          #1d2124;            /* was #1f2933 — ref */
    --sept-muted:         #64748b;            /* was #4b5b66 — ref cool blue-grey */
    --sept-bg:            #f6f5f2;            /* cream body bg per reference */
    --sept-bg-soft:       #eeecea;            /* warm muted surface */
    --sept-bg-mint:       #e3eff3;
    --sept-bg-cream:      #f6f5f2;
    --sept-surface:       #ffffff;
    --sept-border:        #dbd8d2;            /* was #d8e2e6 — ref warm beige */
    --sept-earth:         #b89a78;            /* new — reference accent */
    --sept-earth-soft:    #f5ede4;
    --sept-shadow-sm:     0 1px 2px rgba(0, 0, 0, .05);
    --sept-shadow-md:     0 1px 4px rgba(0, 0, 0, .07), 0 4px 16px rgba(0, 0, 0, .05);
    --sept-shadow-lg:     0 8px 24px rgba(0, 0, 0, .12);
    --sept-radius-sm:     6px;
    --sept-radius-md:     10px;
    --sept-radius-lg:     16px;
}

html, body { overflow-x: hidden; }

/* Body cream background to match reference */
body {
    background-color: var(--sept-bg);
    color: var(--sept-text);
}

/* GeneratePress wraps content in .inside-article with white bg via inline CSS.
   Make it transparent so the cream body shows through between sept-sections. */
.separate-containers .inside-article,
.separate-containers .page-header,
.one-container .container,
.inside-article,
.inside-page-header {
    background-color: transparent !important;
}

.sept-container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

/* =========================================================
   HERO — base (used on inner pages, hero-sm-like):
   light gradient cream → mint, per reference .hero-sm.
   ========================================================= */
.sept-hero {
    background: linear-gradient(150deg, var(--sept-bg-cream) 60%, var(--sept-primary-soft) 100%);
    padding: 48px 0 64px;
    border-bottom: 1px solid var(--sept-border);
    position: relative;
}

/* HOME hero (matches reference .hero override at line 743-744 of
   docs/reference/_styles.css): dark teal gradient with white text. */
.sept-hero--home {
    background: linear-gradient(135deg, var(--sept-primary-dark) 0%, var(--sept-primary) 100%);
    color: #ffffff;
    border-bottom: none;
    padding: 56px 0 64px;
}

.sept-hero--home .sept-hero__title { color: #ffffff; max-width: none; }
.sept-hero--home .sept-hero__lead  { color: rgba(255, 255, 255, .82); max-width: 520px; font-size: 1.1rem; }
.sept-hero--home .sept-hero__small { color: rgba(255, 255, 255, .6); font-size: .85rem; margin-top: 6px; max-width: 520px; }

.sept-hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
}

@media (min-width: 860px) {
    .sept-hero__inner {
        grid-template-columns: 1fr 380px;
        gap: 40px;
        align-items: center;
    }
}

.sept-hero__col-text { display: flex; flex-direction: column; gap: 4px; }
.sept-hero__col-aside { width: 100%; }

/* Small badge with emoji, per reference .badge */
.sept-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, .12);
    color: #ffffff;
    border-radius: 20px;
    padding: 5px 12px;
    font-size: .78rem;
    font-weight: 600;
    margin-bottom: 14px;
    align-self: flex-start;
}

/* Info-card on dark hero (translucent white per reference .hero-info-card) */
.sept-info-card {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: var(--sept-radius-md);
    padding: 22px 22px;
    color: #ffffff;
}

.sept-info-card__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 8px;
    letter-spacing: -.01em;
    line-height: 1.35;
}

.sept-info-card__lead {
    font-size: .9rem;
    color: rgba(255, 255, 255, .78);
    margin: 0 0 14px;
    line-height: 1.55;
}

.sept-info-checks {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sept-info-checks li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, .88);
    font-size: .88rem;
    line-height: 1.4;
}

.sept-info-checks li::before {
    content: "✓";
    color: #4ade80;
    font-weight: 700;
    flex-shrink: 0;
}

.sept-info-card__pitch {
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .15);
    font-size: .78rem;
    color: rgba(255, 255, 255, .6);
    line-height: 1.55;
}

/* CTA row in hero */
.sept-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 22px;
}

/* Button variants on dark backgrounds */
.sept-btn--white {
    background: #ffffff;
    color: var(--sept-primary) !important;
    border-color: #ffffff;
}
.sept-btn--white:hover,
.sept-btn--white:focus {
    background: var(--sept-primary-soft);
    color: var(--sept-primary-dark) !important;
    border-color: var(--sept-primary-soft);
}

.sept-btn--full { display: flex; width: 100%; }

.sept-btn--ghost-on-dark {
    background: transparent;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, .55);
}
.sept-btn--ghost-on-dark:hover,
.sept-btn--ghost-on-dark:focus {
    background: rgba(255, 255, 255, .1);
    color: #ffffff !important;
    border-color: #ffffff;
}

.sept-btn--outline {
    background: transparent;
    color: var(--sept-primary) !important;
    border-color: var(--sept-primary);
}
.sept-btn--outline:hover,
.sept-btn--outline:focus {
    background: var(--sept-primary-soft);
    color: var(--sept-primary-dark) !important;
    border-color: var(--sept-primary);
}

.sept-btn--ghost {
    background: transparent;
    color: var(--sept-muted) !important;
    border-color: var(--sept-border);
}
.sept-btn--ghost:hover,
.sept-btn--ghost:focus {
    background: var(--sept-surface);
    color: var(--sept-text) !important;
    border-color: var(--sept-border);
}

/* TRUST STRIP — under hero, light band per reference .trust-strip */
.sept-trust-strip {
    background: var(--sept-surface);
    border-bottom: 1px solid var(--sept-border);
    padding: 24px 0;
}

.sept-trust-strip__inner {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
}

@media (min-width: 768px) {
    .sept-trust-strip__inner {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px 32px;
    }
}

.sept-trust-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sept-trust-item__title {
    font-size: .9rem;
    font-weight: 700;
    color: var(--sept-text);
    line-height: 1.35;
}

.sept-trust-item__sub {
    font-size: .78rem;
    color: var(--sept-muted);
    line-height: 1.45;
}

.sept-hero__title {
    font-size: clamp(1.55rem, 4vw, 2.5rem);
    line-height: 1.2;
    color: var(--sept-text);
    margin: 0 0 16px;
    font-weight: 700;
    letter-spacing: -.02em;
    max-width: 20ch;
}

.sept-hero__lead {
    font-size: clamp(1.1rem, 1.8vw, 1.25rem);
    line-height: 1.5;
    color: var(--sept-muted);
    max-width: 720px;
    margin: 0 0 18px;
}

/* Pitch is the "Расчёт делает технический специалист" key phrase.
   Render as a visible panel, not a plain paragraph. */
.sept-hero__pitch {
    display: block;
    background: #ffffff;
    border-left: 4px solid var(--sept-primary);
    padding: 14px 18px;
    border-radius: 6px;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--sept-text);
    max-width: 720px;
    margin: 0 0 28px;
    font-weight: 500;
    box-shadow: var(--sept-shadow-sm);
}

.sept-hero__cta {
    margin: 0 0 32px;
}

.sept-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--sept-primary);
    color: #fff !important;
    text-decoration: none;
    padding: 13px 22px;
    border: 2px solid var(--sept-primary);
    border-radius: var(--sept-radius-sm);      /* 6px per reference */
    font-weight: 600;
    font-size: .93rem;
    line-height: 1;
    transition: background-color .15s ease, transform .1s ease, border-color .15s ease;
}

.sept-btn:hover,
.sept-btn:focus {
    background: var(--sept-primary-dark);
    border-color: var(--sept-primary-dark);
    color: #fff !important;
    transform: translateY(-1px);
}

.sept-hero__points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.sept-hero__points li {
    background: #fff;
    border: 1px solid var(--sept-border);
    border-radius: 10px;
    padding: 14px 16px;
    font-size: .95rem;
    color: var(--sept-text);
    line-height: 1.4;
    box-shadow: var(--sept-shadow-sm);
    transition: box-shadow .15s ease, transform .15s ease;
}

.sept-hero__points li:hover {
    box-shadow: var(--sept-shadow-md);
    transform: translateY(-1px);
}

/* =========================================================
   SECTIONS
   ========================================================= */
.sept-section {
    padding: 64px 0;
}

.sept-section--alt {
    background: var(--sept-bg-soft);
    border-top: 1px solid var(--sept-border);
    border-bottom: 1px solid var(--sept-border);
}

/* Reference .section-label pattern: plain uppercase, no pill bg. */
.sept-section__eyebrow {
    display: inline-block;
    margin: 0 0 8px;
    padding: 0;
    background: none;
    color: var(--sept-primary);
    border-radius: 0;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1.2;
}

.sept-section--alt .sept-section__eyebrow {
    background: none;
    border: none;
}

.sept-section__title {
    font-size: clamp(1.2rem, 3vw, 1.75rem);
    line-height: 1.28;
    color: var(--sept-text);
    margin: 0 0 14px;
    font-weight: 700;
    letter-spacing: -.015em;
}

.sept-section__lead {
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--sept-muted);
    max-width: 820px;
    margin: 0 0 32px;
}

/* PROSE — vertical stack of paragraphs */
.sept-prose p {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--sept-text);
    margin: 0 0 12px;
    max-width: 820px;
}

.sept-prose p:last-child { margin-bottom: 0; }

/* =========================================================
   GRID — chip-style cells
   ========================================================= */
.sept-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.sept-grid li {
    background: #fff;
    border: 1px solid var(--sept-border);
    border-left: 4px solid var(--sept-primary);
    border-radius: 10px;
    padding: 16px 18px;
    font-size: .98rem;
    color: var(--sept-text);
    line-height: 1.45;
    box-shadow: var(--sept-shadow-sm);
    transition: box-shadow .15s ease, transform .15s ease;
}

.sept-grid li:hover {
    box-shadow: var(--sept-shadow-md);
    transform: translateY(-1px);
}

/* =========================================================
   CARDS — richer card layout, soft shadow + hover lift.
   ========================================================= */
.sept-cards {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 18px;
}

.sept-card {
    background: var(--sept-surface);
    border: 1px solid var(--sept-border);
    border-radius: var(--sept-radius-md);     /* 10px per reference */
    padding: 24px 26px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: var(--sept-shadow-md);         /* reference shadow-card layered */
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.sept-card:hover {
    box-shadow: var(--sept-shadow-lg);
    transform: translateY(-2px);
    border-color: #c9d6dc;
}

.sept-card__title {
    margin: 0 0 4px;
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--sept-text);
    line-height: 1.3;
}

.sept-card__meta {
    font-size: .9rem;
    color: var(--sept-muted);
    line-height: 1.55;
    margin: 0;
}

/* Meta lines that start with "Для кого:" / "Что уточняет технический специалист:"
   get a subtle left-rule for visual scanning. */
.sept-card__meta + p,
.sept-card p + .sept-card__meta {
    /* spacing tuned to keep card compact */
}

.sept-card__meta {
    position: relative;
    padding-left: 12px;
}

.sept-card__meta::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    border-radius: 2px;
    background: var(--sept-border);
}

.sept-card p {
    margin: 0;
    font-size: .98rem;
    color: var(--sept-text);
    line-height: 1.6;
}

.sept-card__cta {
    margin: auto 0 0;
    padding-top: 4px;
}

.sept-card__cta a {
    color: var(--sept-primary);
    font-weight: 700;
    text-decoration: none;
    font-size: .95rem;
    display: inline-block;
    transition: color .15s ease, transform .15s ease;
}

.sept-card__cta a:hover,
.sept-card__cta a:focus {
    color: var(--sept-primary-dark);
    text-decoration: underline;
    transform: translateX(2px);
}

/* =========================================================
   STEPS component (reference .steps / .step / .step-num)
   ========================================================= */
.sept-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 640px) {
    .sept-steps { flex-direction: row; gap: 12px; }
}

.sept-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-bottom: 24px;
    position: relative;
}

@media (min-width: 640px) {
    .sept-step {
        align-items: center;
        text-align: center;
        padding-bottom: 0;
    }
    .sept-step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 19px;
        left: 60%;
        width: 80%;
        height: 1px;
        background: var(--sept-border);
    }
}

.sept-step__num {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--sept-primary);
    color: #ffffff;
    font-weight: 700;
    font-size: .9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.sept-step__label {
    font-size: .92rem;
    font-weight: 600;
    color: var(--sept-text);
    line-height: 1.35;
}

.sept-step__desc {
    font-size: .82rem;
    color: var(--sept-muted);
    line-height: 1.55;
    margin: 0;
}

/* =========================================================
   FAQ — native <details> styled per reference .faq-list
   ========================================================= */
.sept-faq-list {
    border: 1px solid var(--sept-border);
    border-radius: var(--sept-radius-md);
    overflow: hidden;
    background: var(--sept-surface);
}

.sept-faq-item {
    border-bottom: 1px solid var(--sept-border);
}

.sept-faq-item:last-child { border-bottom: none; }

.sept-faq-item > summary {
    list-style: none;
    cursor: pointer;
    padding: 20px 22px;
    font-size: .95rem;
    font-weight: 600;
    color: var(--sept-text);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    line-height: 1.4;
    transition: background .12s;
}

.sept-faq-item > summary::-webkit-details-marker { display: none; }

.sept-faq-item > summary::after {
    content: "+";
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--sept-primary-soft);
    color: var(--sept-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: transform .2s;
}

.sept-faq-item[open] > summary::after { transform: rotate(45deg); }

.sept-faq-item > summary:hover { background: var(--sept-bg-soft); }

.sept-faq-answer {
    padding: 0 22px 22px;
    font-size: .92rem;
    color: var(--sept-muted);
    line-height: 1.7;
}

.sept-faq-answer p { margin: 0 0 10px; }
.sept-faq-answer p:last-child { margin-bottom: 0; }

/* =========================================================
   CONTACT PREP form-like block (not a real form — no handler;
   reference .form-wrap / .form-grid look)
   ========================================================= */
.sept-form-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 768px) {
    .sept-form-wrap { grid-template-columns: 1fr 300px; align-items: start; }
}

.sept-form-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sept-form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 560px) {
    .sept-form-row { grid-template-columns: 1fr 1fr; }
}

.sept-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--sept-surface);
    border: 1px solid var(--sept-border);
    border-radius: var(--sept-radius-sm);
    padding: 14px 18px;
}

.sept-form-label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--sept-text);
}

.sept-form-hint {
    font-size: .82rem;
    color: var(--sept-muted);
    line-height: 1.55;
}

.sept-form-aside {
    background: var(--sept-primary-soft);
    border: 1px solid #b8d5de;
    border-radius: var(--sept-radius-md);
    padding: 22px;
    align-self: start;
}

.sept-form-aside h3 {
    font-size: 1rem;
    margin: 0 0 12px;
    color: var(--sept-text);
}

.sept-form-aside-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .88rem;
    color: var(--sept-muted);
    margin-bottom: 12px;
    line-height: 1.55;
}

.sept-form-aside-item::before {
    content: "→";
    color: var(--sept-primary);
    font-weight: 700;
    flex-shrink: 0;
}

/* =========================================================
   DISTRICT cards (reference .district-card)
   ========================================================= */
.sept-district-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (min-width: 640px) { .sept-district-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .sept-district-grid { grid-template-columns: repeat(4, 1fr); } }

.sept-district-card {
    background: var(--sept-surface);
    border: 1px solid var(--sept-border);
    border-radius: var(--sept-radius-md);
    padding: 16px;
    box-shadow: var(--sept-shadow-sm);
    transition: border-color .15s ease, transform .15s ease;
}

.sept-district-card:hover { border-color: var(--sept-primary); transform: translateY(-1px); }

.sept-district-card a {
    color: inherit;
    text-decoration: none;
    display: block;
}

.sept-district-card h3 { font-size: .92rem; margin: 0 0 4px; color: var(--sept-text); }
.sept-district-card p { font-size: .78rem; color: var(--sept-muted); margin: 0; line-height: 1.5; }

/* Earth-tone accent variant — used as secondary on Dagomys local block */
.sept-district-card--earth {
    background: var(--sept-earth-soft);
    border-color: #e2cba9;
}

.sept-district-card--earth:hover { border-color: var(--sept-earth); }

/* =========================================================
   PRICE-FACTOR cards (reference .price-factor)
   ========================================================= */
.sept-price-factors {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (min-width: 640px) { .sept-price-factors { grid-template-columns: repeat(4, 1fr); } }

.sept-price-factor {
    background: var(--sept-surface);
    border: 1px solid var(--sept-border);
    border-radius: var(--sept-radius-sm);
    padding: 12px 16px;
    font-size: .85rem;
    color: var(--sept-text);
    line-height: 1.45;
    box-shadow: var(--sept-shadow-sm);
}

.sept-price-factor strong { display: block; color: var(--sept-text); margin-bottom: 2px; font-weight: 700; font-size: .9rem; }
.sept-price-factor span { color: var(--sept-muted); font-size: .8rem; }

/* =========================================================
   CARD VARIANTS (reference compatibility layer)
   Pattern: .card / .card--muted / .card--soft / .card--warn.
   Sept-card classes already implement the base style; the variants
   are added as aliases that can be used in new content blocks.
   ========================================================= */
.card,
.card--muted,
.card--soft,
.card--warn {
    border-radius: var(--sept-radius-md);
    padding: 22px 24px;
    border: 1px solid var(--sept-border);
}

.card { background: var(--sept-surface); box-shadow: var(--sept-shadow-md); }
.card--muted { background: var(--sept-bg-soft); box-shadow: none; }
.card--soft  { background: var(--sept-primary-soft); border-color: #c4dce4; box-shadow: none; }
.card--warn  { background: #fff8f3; border-color: #f0cdb0; box-shadow: none; }

/* =========================================================
   BREADCRUMBS
   ========================================================= */
.sept-breadcrumbs {
    background: var(--sept-bg-soft);
    border-bottom: 1px solid var(--sept-border);
    font-size: .85rem;
}

.sept-breadcrumbs .sept-container {
    padding: 12px 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    line-height: 1.4;
}

.sept-breadcrumbs a {
    color: var(--sept-primary);
    text-decoration: none;
    font-weight: 500;
}

.sept-breadcrumbs a:hover,
.sept-breadcrumbs a:focus {
    text-decoration: underline;
}

.sept-breadcrumbs span[aria-current="page"] {
    color: var(--sept-muted);
}

.sept-breadcrumbs__sep {
    color: var(--sept-border);
    user-select: none;
}

@media (max-width: 640px) {
    .sept-breadcrumbs .sept-container {
        padding: 10px 18px;
        font-size: .8rem;
    }
}

/* =========================================================
   SINGLE CASE — banner + taxonomy chips above the_content
   ========================================================= */
.sept-case-banner {
    background: var(--sept-bg-mint);
    border-bottom: 1px solid var(--sept-border);
}

.sept-case-banner__media {
    max-width: 1120px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.sept-case-banner__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sept-case-chips-section {
    padding: 18px 0 0;
    background: transparent;
}

.sept-case-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

.sept-case-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--sept-border);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: .88rem;
    color: var(--sept-text);
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
    box-shadow: var(--sept-shadow-sm);
}

.sept-case-chip:hover,
.sept-case-chip:focus {
    border-color: var(--sept-primary);
    color: var(--sept-primary);
    box-shadow: var(--sept-shadow-md);
    transform: translateY(-1px);
    text-decoration: none;
}

.sept-case-chip__label {
    color: var(--sept-muted);
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.sept-case-chip__value {
    font-weight: 600;
}

/* =========================================================
   CASE CARDS — preview cards on /cases/ hub
   ========================================================= */
.sept-cases-list .sept-case-card {
    padding: 0;
    overflow: hidden;
}

.sept-cases-list .sept-case-card > * {
    margin-left: 22px;
    margin-right: 22px;
}

.sept-cases-list .sept-case-card .sept-case-card__media {
    margin: 0;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--sept-bg-soft);
}

.sept-cases-list .sept-case-card .sept-case-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s ease;
}

.sept-cases-list .sept-case-card:hover .sept-case-card__media img {
    transform: scale(1.03);
}

.sept-cases-list .sept-case-card > h3.sept-card__title {
    margin-top: 18px;
}

.sept-cases-list .sept-case-card > .sept-card__cta {
    margin-bottom: 20px;
}

.sept-cases-list .sept-case-card .sept-card__title a {
    color: inherit;
    text-decoration: none;
}

.sept-cases-list .sept-case-card .sept-card__title a:hover,
.sept-cases-list .sept-case-card .sept-card__title a:focus {
    color: var(--sept-primary);
}

/* =========================================================
   CTA BAND — gradient + button polish.
   ========================================================= */
.sept-cta {
    background:
        radial-gradient(800px 240px at 50% 0%, rgba(255, 255, 255, .10), transparent 60%),
        linear-gradient(180deg, var(--sept-primary) 0%, var(--sept-primary-dark) 100%);
    color: #fff;
    padding: 56px 0;
    text-align: center;
}

.sept-cta__title {
    margin: 0 0 12px;
    font-size: clamp(1.4rem, 2.6vw, 1.8rem);
    color: #fff;
    font-weight: 800;
    letter-spacing: -.01em;
}

.sept-cta__lead {
    margin: 0 auto 26px;
    color: rgba(255, 255, 255, .9);
    max-width: 700px;
    font-size: 1.02rem;
    line-height: 1.6;
}

.sept-cta .sept-btn {
    background: #fff;
    color: var(--sept-primary) !important;
    box-shadow: 0 8px 20px rgba(15, 39, 50, .25);
}

.sept-cta .sept-btn:hover,
.sept-cta .sept-btn:focus {
    background: var(--sept-bg-cream);
    color: var(--sept-primary-dark) !important;
}

/* =========================================================
   BRAND CHIPS
   ========================================================= */
.sept-brands {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sept-brands li {
    background: #fff;
    border: 1px solid var(--sept-border);
    border-radius: 999px;
    padding: 9px 16px;
    font-size: .92rem;
    color: var(--sept-text);
    font-weight: 600;
    box-shadow: var(--sept-shadow-sm);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, color .15s ease;
    cursor: default;
}

.sept-brands li:hover {
    border-color: var(--sept-primary);
    color: var(--sept-primary);
    box-shadow: var(--sept-shadow-md);
    transform: translateY(-1px);
}

/* =========================================================
   CONTACT — крупный телефон на /contacts/
   ========================================================= */
.sept-contact-phone {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 12px 0 22px;
}

.sept-contact-phone > a {
    font-size: clamp(1.7rem, 4.2vw, 2.4rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--sept-primary);
    text-decoration: none;
    letter-spacing: -.01em;
}

.sept-contact-phone > a:hover,
.sept-contact-phone > a:focus {
    color: var(--sept-primary-dark);
    text-decoration: underline;
}

.sept-contact-phone__hint {
    font-size: .95rem;
    color: var(--sept-muted);
    line-height: 1.45;
    max-width: 580px;
}

/* =========================================================
   CONTACTS list (используется на других страницах)
   ========================================================= */
.sept-contacts {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}

.sept-contacts li {
    padding: 6px 0;
    font-size: 1.08rem;
    color: var(--sept-text);
}

.sept-contacts a {
    color: var(--sept-primary);
    font-weight: 700;
    text-decoration: none;
}

.sept-contacts a:hover,
.sept-contacts a:focus {
    text-decoration: underline;
}

/* =========================================================
   MOBILE TWEAKS
   ========================================================= */
@media (max-width: 768px) {
    .sept-hero { padding: 52px 0 40px; }
    .sept-hero__title { max-width: none; }
    .sept-section { padding: 44px 0; }
    .sept-cta { padding: 40px 0; }
}

@media (max-width: 640px) {
    .sept-hero { padding: 44px 0 32px; }
    .sept-hero__points li,
    .sept-grid li { padding: 12px 14px; font-size: .92rem; }
    .sept-card { padding: 20px 20px; }
    .sept-btn { display: block; width: 100%; text-align: center; box-sizing: border-box; }
    .sept-hero__pitch { padding: 12px 14px; font-size: .95rem; }
}

/* =========================================================
   Hide default WP entry title on MVP content pages — H1 lives
   in the hero block.
   ========================================================= */
body.home .entry-header .entry-title,
body.page-id-6  .entry-header .entry-title,
body.page-id-7  .entry-header .entry-title,
body.page-id-8  .entry-header .entry-title,
body.page-id-9  .entry-header .entry-title,
body.page-id-10 .entry-header .entry-title,
body.page-id-11 .entry-header .entry-title,
body.page-id-12 .entry-header .entry-title,
body.page-id-13 .entry-header .entry-title,
body.page-id-14 .entry-header .entry-title {
    display: none;
}

/* =========================================================
   HEADER (задание №65) — sticky, аккуратная шапка с двух-
   строчным брендом и правым блоком phone + CTA.
   ========================================================= */
/* Reference: 58px sticky cream-blur band. */
.site-header {
    position: sticky !important;
    top: 0;
    z-index: 100;
    background: rgba(246, 245, 242, .96);     /* cream tint per reference */
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--sept-border);
}

.site-header .inside-header {
    min-height: 58px;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    align-items: center;
}

.site-branding .sept-brand a {
    text-decoration: none;
    display: inline-flex;
    flex-direction: column;
    line-height: 1.1;
    gap: 2px;
}

.sept-brand__name {
    color: var(--sept-primary);
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: -.01em;
}

.sept-brand__tag {
    color: var(--sept-muted);
    font-weight: 500;
    font-size: .78rem;
    letter-spacing: .01em;
}

/* main-navigation polish */
.main-navigation,
.main-navigation ul ul { background: transparent !important; }
.main-navigation .main-nav > ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}
.main-navigation .main-nav ul li a {
    line-height: 44px !important;
    padding: 0 14px !important;
    font-size: .95rem;
    color: var(--sept-text) !important;
    transition: color .15s ease, background-color .15s ease;
}
.main-navigation .main-nav ul li:not(.sept-nav-phone):not(.sept-nav-cta) a:hover,
.main-navigation .main-nav ul li:not(.sept-nav-phone):not(.sept-nav-cta) a:focus {
    color: var(--sept-primary) !important;
    background-color: rgba(27, 94, 112, .06);
}
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
    color: var(--sept-primary) !important;
}

/* Right-aligned phone + CTA items */
.main-navigation .sept-nav-phone { margin-left: auto; }

.main-navigation .sept-nav-phone a {
    padding: 0 12px !important;
    color: var(--sept-primary) !important;
    font-weight: 700 !important;
}

.main-navigation .sept-nav-phone__num::before {
    content: "☎ ";
    font-weight: 400;
    margin-right: 2px;
}

.main-navigation .sept-nav-cta a {
    margin: 0 0 0 8px;
    padding: 0 18px !important;
    background: var(--sept-primary);
    color: #fff !important;
    border-radius: 8px;
    font-weight: 700 !important;
    line-height: 40px !important;
    box-shadow: 0 4px 12px rgba(27, 94, 112, .22);
    transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.main-navigation .sept-nav-cta a:hover,
.main-navigation .sept-nav-cta a:focus {
    background: var(--sept-primary-dark) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(27, 94, 112, .28);
}

/* Mobile: hide desktop-only header CTA chips (bottom bar replaces them).
   Keep them visible inside the toggled mobile menu so user can still
   tap phone/CTA from there. */
@media (max-width: 768px) {
    .site-header .inside-header { padding: 10px !important; }
    .main-navigation:not(.toggled) .sept-nav-phone,
    .main-navigation:not(.toggled) .sept-nav-cta { display: none; }
    .main-navigation.toggled .sept-nav-cta a {
        display: inline-block;
        margin: 6px 12px;
    }
}

/* =========================================================
   MOBILE BOTTOM ACTION BAR (задание №65)
   Видна до 768px, спрятана на десктопе. Body получает
   padding-bottom, чтобы панель не перекрывала контент.
   ========================================================= */
.sept-bottom-bar { display: none; }

@media (max-width: 768px) {
    .sept-bottom-bar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 80;
        gap: 8px;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, .96);
        backdrop-filter: saturate(180%) blur(10px);
        -webkit-backdrop-filter: saturate(180%) blur(10px);
        border-top: 1px solid var(--sept-border);
        box-shadow: 0 -6px 18px rgba(15, 39, 50, .08);
    }
    .sept-bottom-bar__btn {
        flex: 1 1 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 46px;
        padding: 0 8px;
        border-radius: 10px;
        background: #ffffff;
        color: var(--sept-primary);
        font-weight: 700;
        font-size: .95rem;
        text-decoration: none;
        border: 1px solid var(--sept-border);
        line-height: 1.1;
    }
    .sept-bottom-bar__btn--primary {
        background: var(--sept-primary);
        color: #ffffff;
        border-color: var(--sept-primary);
        box-shadow: 0 4px 12px rgba(27, 94, 112, .25);
    }
    .sept-bottom-bar__btn--primary:hover,
    .sept-bottom-bar__btn--primary:focus {
        background: var(--sept-primary-dark);
        color: #ffffff;
    }
    body { padding-bottom: 70px; }            /* reference value */
}

/* =========================================================
   FOOTER (фикс задания №63 + reference alignment)
   Reference footer bg: #1a2c34 (slightly warmer than #102a33).
   ========================================================= */
.site-info {
    background: #1a2c34 !important;            /* reference value */
    color: #ffffff;
    padding: 0 !important;
    text-align: left;
    font-size: 15px;
}

.site-info .inside-site-info {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
}

.site-info .copyright-bar {
    float: none !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Reference .footer-grid: 1fr -> 200px + 1fr @ 768px+ */
.sept-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 48px 0 24px;
}

@media (min-width: 768px) {
    .sept-footer-grid {
        grid-template-columns: 200px 1fr;
        gap: 48px;
    }
}

.sept-footer-brand__name {
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 2px;
    line-height: 1.2;
    letter-spacing: -.01em;
}

.sept-footer-brand__tag {
    font-size: .72rem;
    color: rgba(255, 255, 255, .45);
    margin: 0 0 12px;
    line-height: 1.3;
    letter-spacing: .03em;
}

.sept-footer-brand__desc {
    font-size: .83rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .5);
    margin: 12px 0;
}

.sept-footer-brand__phone {
    display: inline-block;
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    margin-top: 16px;
}

.sept-footer-brand__phone:hover,
.sept-footer-brand__phone:focus {
    color: #a8d4e0;
    text-decoration: none;
}

/* Footer columns inside the right side of grid */
.sept-footer-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
}

@media (min-width: 640px) {
    .sept-footer-cols { grid-template-columns: repeat(4, 1fr); gap: 32px; }
}

.sept-footer-col h5 {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .35);
    margin: 0 0 16px;
}

.sept-footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sept-footer-col li { margin: 0; padding: 0; }

.sept-footer-col a {
    font-size: .85rem;
    color: rgba(255, 255, 255, .65);
    text-decoration: none;
    line-height: 1.4;
}

.sept-footer-col a:hover,
.sept-footer-col a:focus {
    color: #ffffff;
    text-decoration: none;
}

.sept-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding: 16px 0 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: .78rem;
    color: rgba(255, 255, 255, .35);
}

@media (min-width: 640px) {
    .sept-footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

/* Task #99: prevent wrapping in numeric/short table cells so prices stay
   on one line, especially "от 50 000 ₽" inside .model-table. */
.model-table th.price-cell,
.model-table td.price-cell {
    white-space: nowrap;
}

/* Task #100: tighten the empty band between site-wide breadcrumbs and the
   page's hero-sm. GeneratePress wraps post_content in .entry-content which
   adds its own top padding; combined with .hero-sm's own top padding the
   gap looks like a dead strip. Only kicks in when breadcrumbs are present
   AND the page content starts with hero-sm (typical pattern on /septiki/,
   /ceny/, /cases/, /contacts/). */
.sept-breadcrumbs + .entry-content,
.sept-breadcrumbs + article .entry-content,
.sept-breadcrumbs + .inside-article > .entry-content {
    padding-top: 0;
    margin-top: 0;
}
.sept-breadcrumbs + .entry-content > .hero-sm:first-child,
.sept-breadcrumbs + article .entry-content > .hero-sm:first-child,
.sept-breadcrumbs + .inside-article > .entry-content > .hero-sm:first-child {
    margin-top: 0;
}

/* Task #100: make catalog table fit desktop without horizontal scroll —
   tighter horizontal padding and slightly smaller font so 7 columns fit
   in a typical 1100px container. Wrap still kicks in on mobile via
   .model-table-wrap overflow-x:auto. */
.model-table {
    table-layout: auto;
}
.model-table th,
.model-table td {
    padding-left: 8px;
    padding-right: 8px;
}