/*
Theme Name: ProStandard
Theme URI: https://prostandard.by/
Author: 2x200
Version: 1.2
*/

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* ===== RESET ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --deep-navy: #0F172A;
    --graphite: #1E293B;
    --muted-gold: #C5A880;
    --muted-gold-soft: #DCC9A8;
    --platinum: #E2E8F0;
    --white: #FFFFFF;
    --light-gray: #F8FAFC;
    --border-light: #E2E8F0;
    --text-anthracite: #334155;
    --text-muted: #64748B;
    --shadow-hover: 0 20px 40px rgba(15, 23, 42, 0.12);
    --transition: 0.45s cubic-bezier(0.19, 1, 0.22, 1);
}

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--white);
    color: var(--text-anthracite);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Push footer to the bottom of the viewport on short pages,
   without overlapping content on tall pages. */
.cp-main {
    flex: 1;
}
.cp-footer {
    margin-top: auto;
}

.cp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}

.cp-heading-serif {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* ===== BUTTONS ===== */
.cp-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 38px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 1px;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    border: 1px solid transparent;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    background: transparent;
}
.cp-btn-primary { background: #0F172A; color: white; border-color: #0F172A; }
.cp-btn-primary:hover { background: var(--graphite); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.cp-btn-outline { background: transparent; color: #0F172A; border-color: #0F172A; }
.cp-btn-outline:hover { background: #0F172A; color: white; box-shadow: var(--shadow-hover); transform: translateY(-2px); }

/* ===== HEADER — editorial two-line =====
   Colors are hardcoded (not var(--...)) on purpose: individual page templates
   inject their own <style>:root{...}</style> blocks with page-specific palettes,
   and since :root is global, those blocks were silently overriding the header/
   footer's colors too. Hardcoding here makes the header/footer immune to that,
   regardless of what any page declares. Palette matches the homepage hero:
   ink #1C1A16, stamp #C1461D, paper #FFFDF7, warm bg #EFE9DD. */
.cp-header {
    padding: 22px 0 0;
    border-bottom: 1px dashed rgba(28,26,22,0.16);
    position: sticky;
    top: 0;
    z-index: 100;
    /* No background/backdrop-filter directly on .cp-header — see ::before
       below. */
}
/* The frosted-glass header background lives on a pseudo-element instead of
   directly on .cp-header. Reason: any element with backdrop-filter (like
   filter) creates its own containing block for position:fixed descendants
   in most browsers. .cp-header-bottom (#cpNav, the mobile drawer) and its
   overlay are position:fixed descendants of .cp-header — with
   backdrop-filter sitting directly on .cp-header, their fixed positioning
   was being resolved against .cp-header's box instead of the real
   viewport. Combined with .cp-header being position:sticky, this made the
   drawer open correctly only at the very top of the page and open
   partially/cut-off once the page had been scrolled. A ::before pseudo
   isn't an ancestor of the drawer, so giving IT the backdrop-filter
   instead keeps the same frosted look with none of that side effect. */
.cp-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: rgba(255,253,247,0.94);
    backdrop-filter: blur(8px);
}
.cp-header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px 20px;
    padding-bottom: 20px;
}
.cp-logo {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: 1.5rem;
    letter-spacing: 0.02em;
    color: #1C1A16;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
}
.cp-crest {
    width: 26px; height: 26px;
    border: 1px solid #C1461D;
    display: flex; align-items: center; justify-content: center;
    transform: rotate(45deg);
    flex-shrink: 0;
}
.cp-crest span {
    transform: rotate(-45deg);
    font-family: 'Playfair Display', serif;
    font-size: 0.65rem;
    color: #C1461D;
    font-weight: 600;
}
.cp-crest img {
    transform: rotate(-45deg);
    width: 70%;
    height: 70%;
    object-fit: contain;
    display: block;
}
.cp-logo-word { display: flex; flex-direction: column; line-height: 1.15; }
.cp-logo-tagline {
    font-family: 'Inter', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6B6357;
    font-weight: 500;
    margin-top: 2px;
}

.cp-header-contact { display: flex; align-items: center; gap: 18px; }
.cp-header-buttons { display: flex; align-items: center; gap: 12px; }

.cp-promo-bar {
    background: #1C1A16;
    border-bottom: 1px solid rgba(193,70,29,0.25);
}
.cp-promo-bar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 44px 8px 0; /* right padding clears the close button so the link stays centered */
    position: relative;
}
.cp-promo-bar-link {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    text-decoration: none;
    flex-wrap: wrap;
    justify-content: center;
}
.cp-promo-bar-value {
    font-family: 'Space Mono', monospace;
    font-style: normal;
    font-weight: 700;
    font-size: 0.9rem;
    color: #E7A98C;
    white-space: nowrap;
}
.cp-promo-bar-label {
    font-size: 0.78rem;
    font-weight: 500;
    color: #CBD5E1;
    letter-spacing: 0.01em;
}
.cp-promo-bar-link:hover .cp-promo-bar-label { color: white; }
.cp-promo-bar-close {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #94A3B8;
    font-size: 1.2rem;
    line-height: 1;
    width: 28px;
    height: 28px;
    cursor: pointer;
    transition: var(--transition);
}
.cp-promo-bar-close:hover { color: white; }

.cp-btn-call {
    display: inline-flex;
    align-items: center;
    background: #C1461D;
    color: white;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0;
    padding: 11px 24px;
    border-radius: 8px;
    transition: var(--transition);
    white-space: nowrap;
}
.cp-btn-call:hover { background: #A83B18; box-shadow: 0 20px 40px rgba(28, 26, 22, 0.12); transform: translateY(-1px); }

.cp-header-divider { height: 0; border-top: 1px dashed rgba(28,26,22,0.16); }

.cp-header-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 0;
}
.cp-nav-menu {
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
    font-weight: 500;
    font-size: 0.86rem;
    letter-spacing: 0;
    margin: 0;
    padding: 0;
}
.cp-nav-menu a {
    color: #1C1A16;
    text-decoration: none;
    transition: var(--transition);
    padding-bottom: 3px;
    border-bottom: 1px solid transparent;
}
.cp-nav-menu a:hover,
.cp-nav-menu a.current,
.cp-nav-menu li.current-menu-item > a,
.cp-nav-menu li.current_page_item > a,
.cp-nav-menu li.current-menu-parent > a,
.cp-nav-menu li.current_page_parent > a { color: #1C1A16; border-bottom-color: #C1461D; }

.cp-view-toggle {
    display: inline-flex;
    border: 1px solid rgba(28,26,22,0.16);
    border-radius: 10px;
    padding: 3px;
    gap: 3px;
    flex-shrink: 0;
}
.cp-view-toggle a {
    border: none;
    border-radius: 7px;
    background: transparent;
    padding: 7px 15px;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0;
    color: #6B6357;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.cp-view-toggle a.active { background: #1C1A16; color: white; }
.cp-view-toggle a:not(.active):hover { background: #EFE9DD; color: #1C1A16; }

/* Hamburger toggle, hidden on desktop, sits in the top row */
.cp-nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}
.cp-nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: #1C1A16;
    transition: var(--transition);
}
.cp-nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cp-nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.cp-nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.cp-nav-overlay { display: none; }
.cp-nav-drawer-footer { display: none; }

.cp-nav-close {
    display: none;
    position: absolute;
    top: 24px;
    right: 24px;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}
.cp-nav-close span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 2px;
    background: #1C1A16;
}
.cp-nav-close span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.cp-nav-close span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }

.cp-btn-cabinet {
    background: transparent;
    border: 1px solid rgba(28,26,22,0.16);
    padding: 9px 20px;
    border-radius: 8px;
    font-weight: 600;
    color: #1C1A16;
    transition: var(--transition);
    cursor: pointer;
    font-size: 0.85rem;
    letter-spacing: 0;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.cp-btn-cabinet.is-signed-in {
    /* the label swaps to the user's first name when logged in, so it
       needs to truncate instead of wrapping or pushing the header wide.
       Scoped to this state only — the base rule must stay unconstrained
       so the normal "Личный кабинет" label never wraps or gets clipped. */
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cp-cabinet-greeting {
    display: none;
    color: #C1461D;
    font-weight: 400;
}
@media (min-width: 1200px) {
    /* enough horizontal room here for a warmer "Привет, Имя" without
       crowding the phones/call button next to it */
    .cp-cabinet-greeting { display: inline; }
    .cp-btn-cabinet.is-signed-in { max-width: 220px; }
}
.cp-btn-cabinet:hover { border-color: #C1461D; background: #EFE9DD; }
.cp-btn-cabinet.current { border-color: #C1461D; color: #1C1A16; background: #EFE9DD; }

/* Signed-in state: subtle dot + slightly stronger border so the button
   reads as "you have an account here" without shouting over the rest of
   the header's quiet, editorial tone. */
.cp-btn-cabinet.is-signed-in { border-color: #E7A98C; }
.cp-cabinet-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3FA76B;
    flex: none;
    box-shadow: 0 0 0 2px #FFFDF7;
}

/* Telegram — icon-only, outlined like the cabinet button so it doesn't
   compete with the filled orange call button. Brand blue lives in the
   icon only. align-self:stretch + aspect-ratio keep it exactly as tall as
   its siblings at every breakpoint (they shrink at 1100/600/400px) and
   square, so no per-breakpoint sizing is needed. The mobile rule that
   gives cabinet/call `flex: 1` doesn't target this button, so it stays
   a small square while the other two share the remaining width. */
.cp-btn-telegram {
    align-self: stretch;
    width: 42px;
    min-width: 42px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(28,26,22,0.16);
    border-radius: 8px;
    color: #2AABEE;
    cursor: pointer;
    flex: none;
    transition: var(--transition);
}
.cp-btn-telegram svg { width: 20px; height: 20px; }
.cp-btn-telegram:hover {
    border-color: #2AABEE;
    background: rgba(42,171,238,0.08);
}
.cp-btn-telegram:active { color: #229ED9; transform: scale(0.95); }
.cp-btn-telegram:focus-visible { outline: 2px solid #2AABEE; outline-offset: 2px; }
.cp-btn-telegram.is-loading { opacity: .55; pointer-events: none; }
.cp-btn-telegram.is-error { border-color: #B3261E; color: #B3261E; }

/* ===== ORDER-CALL MODAL ===== */
.cp-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.cp-modal.is-open { display: flex; }
.cp-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
}
.cp-modal-box {
    position: relative;
    background: #FFFDF7;
    width: 100%;
    max-width: 420px;
    padding: 40px 32px 32px;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(28, 26, 22, 0.16);
}
.cp-modal-close { position: absolute; top: 18px; right: 18px; display: block; }
.cp-modal-close span { background: #6B6357; }
.cp-modal-title {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.4rem;
    color: #1C1A16;
    margin-bottom: 8px;
}
.cp-modal-sub {
    font-size: 0.88rem;
    color: #6B6357;
    margin-bottom: 24px;
    line-height: 1.5;
}
.cp-modal-form { display: flex; flex-direction: column; gap: 16px; }
.cp-field { display: flex; flex-direction: column; gap: 6px; }
.cp-field span {
    font-family: 'Space Mono', monospace;
    font-size: 0.76rem;
    font-weight: 400;
    color: #6B6357;
    letter-spacing: 0;
}
.cp-field input,
.cp-field select {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 0.92rem;
    padding: 11px 14px;
    border: 1px solid rgba(28,26,22,0.16);
    border-radius: 8px;
    color: #1C1A16;
    background: #FFFDF7;
    transition: var(--transition);
}
.cp-field input:focus,
.cp-field select:focus {
    outline: none;
    border-color: #C1461D;
}
.cp-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    overflow: hidden;
}
.cp-field-error {
    font-size: 0.8rem;
    color: #B3261E;
    margin: 0;
}
.cp-modal-submit {
    width: 100%;
    justify-content: center;
    margin-top: 4px;
}
.cp-modal-submit:disabled { opacity: 0.6; cursor: default; transform: none !important; box-shadow: none !important; }
.cp-modal-success { text-align: center; padding: 20px 0; }
.cp-modal-success p {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    color: #1C1A16;
    line-height: 1.6;
}

@media (max-width: 480px) {
    .cp-modal-box { padding: 32px 22px 26px; }
    .cp-modal-title { font-size: 1.25rem; }
}

/* ===== HERO ===== */
.cp-hero {
    padding: 88px 0 96px;
    background:
        radial-gradient(ellipse 900px 500px at 85% -10%, rgba(197,168,128,0.10), transparent 60%),
        var(--light-gray);
    position: relative;
    overflow: hidden;
}
.cp-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 0.78rem; text-transform: uppercase; letter-spacing: 2.5px;
    color: var(--muted-gold); font-weight: 600;
}
.cp-hairline { width: 24px; height: 1px; background: var(--muted-gold); }
.cp-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 72px; align-items: center; }
.cp-hero-content { display: flex; flex-direction: column; gap: 30px; }
.cp-hero h1 { font-size: 3.4rem; line-height: 1.12; color: var(--deep-navy); margin: 0; }
.cp-hero h1 em { font-style: italic; color: var(--muted-gold); }
.cp-hero-sub { font-size: 1.18rem; color: var(--text-muted); max-width: 480px; font-weight: 400; line-height: 1.7; margin: 0; }
.cp-hero-buttons { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 6px; }
.cp-hero-signoff { display: flex; align-items: center; gap: 16px; margin-top: 12px; font-size: 0.82rem; color: var(--text-muted); letter-spacing: 0.02em; }
.cp-hero-signoff .cp-stars { color: var(--muted-gold); letter-spacing: 2px; }
.cp-hero-media { position: relative; border-radius: 2px; }
.cp-hero-media-frame { position: absolute; inset: -14px; border: 1px solid var(--muted-gold-soft); border-radius: 2px; pointer-events: none; }
.cp-hero-video-placeholder {
    background:
        linear-gradient(160deg, rgba(30,41,59,0.82) 0%, rgba(15,23,42,0.88) 60%, rgba(11,18,32,0.92) 100%),
        url('https://images.unsplash.com/photo-1758273238415-01ec03d9ef27?auto=format&fit=crop&w=1600&q=80') center/cover no-repeat;
    border-radius: 2px;
    min-height: 460px;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    box-shadow: var(--shadow-hover);
    overflow: hidden;
}
.cp-play-ring {
    width: 76px; height: 76px;
    border: 1px solid rgba(197,168,128,0.65);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    position: relative; z-index: 2;
}

/* ===== TRUST STRIP ===== */
.cp-trust { background: var(--white); border-bottom: 1px solid var(--border-light); padding: 26px 0; }
.cp-trust .cp-container { display: flex; justify-content: center; gap: 64px; flex-wrap: wrap; }
.cp-trust-item { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; color: var(--text-anthracite); font-weight: 500; }

/* ===== MAIN CONTENT WRAPPER (for regular page/post content) =====
   .cp-main wraps the content area on EVERY page — including the home,
   /business and /services pages, whose "hero" markup turned out to be
   pasted directly into the normal page-content editor rather than a
   distinct PHP template. That means body.page-template-default is set
   on ALL of these pages alike, so template-based detection (the
   previous fix) couldn't tell them apart from plain content pages —
   the 25px gap kept showing up everywhere.

   Fix: detect the actual full-bleed hero sections by class instead of
   by template. If .cp-main's first child is one of the known hero
   wrappers (which already carry their own top padding), skip .cp-main's
   padding-top; otherwise (plain page/post content with no hero) keep
   the 25px so text content isn't flush against the header. Same logic
   for padding-bottom against the last child, in case a page ends on a
   full-bleed section (e.g. the dark CTA/addons bands). Add any new
   hero/full-bleed wrapper class to both selector lists below. */
.cp-main { padding: 45px 0; }
.cp-main:has(> :first-child.cp-hero),
.cp-main:has(> :first-child.b2b-hero),
.cp-main:has(> :first-child.rc-hero),
.cp-main:has(> :first-child.svc-hero),
.cp-main:has(> *:first-child .cp-hero),
.cp-main:has(> *:first-child .b2b-hero),
.cp-main:has(> *:first-child .rc-hero),
.cp-main:has(> *:first-child .svc-hero) { padding-top: 0; }
.cp-main:has(> :last-child.addons),
.cp-main:has(> :last-child.svc-cta),
.cp-main:has(> *:last-child .addons),
.cp-main:has(> *:last-child .svc-cta) { padding-bottom: 0; }
.cp-main article { margin-bottom: 0; }
.cp-main h1, .cp-main h2 { font-family: 'Playfair Display', serif; color: var(--deep-navy); margin-bottom: 16px; }

/* Regular blog posts aren't wrapped in .cp-container by the editor the way
   hero/section page templates are, so without this they'd render full-bleed
   edge-to-edge.

   IMPORTANT: this deliberately does NOT target a bare ".cp-main article" —
   on custom page templates (home, /business) the <article> tag sits
   directly inside .cp-main with no inner wrapper, so an unscoped "article"
   selector would also squeeze those full-width layouts down to 780px and
   break them.

   Confirmed from the actual rendered markup: WordPress's post_class()
   automatically adds "type-post" to a post's <article> and "type-page" to
   a page's — e.g. <article id="post-130" class="post-130 post type-post
   ...">. That's a built-in, zero-effort hook: this rule matches every
   blog post automatically and can never match a page, since pages never
   carry "type-post". No wrapper div or per-post class needed. */
.cp-main article.type-post {
    max-width: 950px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}
.cp-main article.type-post img,
.cp-main article.type-post table {
    max-width: 100%;
    height: auto;
}
@media (max-width: 600px) {
    .cp-main article.type-post {
        padding-left: 16px;
        padding-right: 16px;
    }
}


/* ===== BLOG ARCHIVE — POST CARDS ===== */
.cp-main .cp-post-card {
    background: #FFFDF7;
    border: 1px solid rgba(28, 26, 22, 0.16);
    border-radius: 14px;
    padding: 32px;
    margin-bottom: 28px;
    transition: 0.45s cubic-bezier(0.19, 1, 0.22, 1);
}
.cp-main .cp-post-card:last-child { margin-bottom: 0; }
.cp-post-card:hover {
    box-shadow: 0 20px 40px rgba(28, 26, 22, 0.12);
    border-color: #C1461D;
    transform: translateY(-2px);
}

.cp-post-title {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: 1.5rem;
    color: #1C1A16;
    margin-bottom: 12px;
    line-height: 1.3;
}
.cp-post-title a {
    color: inherit;
    text-decoration: none;
    transition: 0.3s ease;
}
.cp-post-title a:hover {
    color: #C1461D;
}

.cp-post-excerpt {
    font-family: 'Inter', sans-serif;
    color: #6B6357;
    line-height: 1.7;
    margin-bottom: 18px;
}

.cp-read-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0;
    text-transform: none;
    color: #1C1A16;
    text-decoration: none;
    border-bottom: 1px dashed #C1461D;
    padding-bottom: 2px;
    transition: 0.3s ease;
}
.cp-read-more:hover {
    color: #C1461D;
}

.cp-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 0.88rem;
}
.cp-pagination a,
.cp-pagination span {
    color: #1C1A16;
    text-decoration: none;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid rgba(28, 26, 22, 0.16);
    transition: 0.3s ease;
}
.cp-pagination a:hover {
    border-color: #C1461D;
    color: #C1461D;
}
.cp-pagination .current {
    font-weight: 700;
    background: #1C1A16;
    color: white;
    border-color: #1C1A16;
}

@media (max-width: 600px) {
    .cp-post-card { padding: 22px; }
    .cp-post-title { font-size: 1.25rem; }
}

/* ===== FOOTER ===== */
.cp-footer { background: #0F172A; color: #C9C1AF; padding: 64px 0 32px; font-size: 0.9rem; }
.cp-footer a { color: #E7E1D3; text-decoration: none; transition: var(--transition); }
.cp-footer a:hover { color: #E7A98C; }
.cp-footer-grid { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 32px; padding-bottom: 40px; }
.cp-footer-logo { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: white; display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cp-footer-logo .cp-crest { width: 20px; height: 20px; border: 1px solid #C1461D; transform: rotate(45deg); }
.cp-footer-bottom { padding-top: 26px; border-top: 1px dashed rgba(255,255,255,0.12); display: flex; justify-content: space-between; font-size: 0.78rem; color: #8A8272; flex-wrap: wrap; gap: 12px; }

.cp-footer-btn-cabinet {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0;
    color: #E7A98C !important;
    border: 1px solid #E7A98C;
    border-radius: 8px;
    text-decoration: none;
    transition: var(--transition);
}
.cp-footer-btn-cabinet:hover {
    background: #C1461D;
    border-color: #C1461D;
    color: white !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) {
    .cp-nav-toggle { display: flex; }
    /* Anchor point for the absolutely-positioned toggle below. */
    .cp-header-top { padding-bottom: 16px; position: relative; }

    /* Logo takes the full first row; the contact block (phones + buttons)
       drops to its own full-width row underneath. The toggle used to be a
       flex sibling with order:2, relying on it having room to sit beside
       the logo on the first line — but on narrow screens the two-line
       logo (title + tagline) could eat up enough width that the toggle no
       longer fit there, so flex-wrap dropped it down onto the contact
       row instead (appearing bottom-left, next to the buttons). Taking it
       out of the flex flow with position:absolute removes that
       dependency entirely: the toggle is now pinned top-right no matter
       how much room the logo text needs or how it wraps. */
    .cp-logo {
        /* Without this, the logo (image + two-line title/tagline) refuses
           to shrink below its own natural text width — nested flex items
           default to min-width:auto. flex + min-width:0 lets the logo
           take the full row width and lets its own text wrap into more
           lines within that space instead of overflowing. Right padding
           reserves room so the wrapped text never runs under the
           absolutely-positioned toggle. */
        flex: 1 1 100%;
        min-width: 0;
        padding-right: 46px;
    }
    .cp-logo-word {
        /* Same reasoning one level deeper — this inner column is itself a
           flex item of .cp-logo's row layout (crest + text), so it needs
           its own min-width:0 to actually wrap rather than forcing .cp-logo
           wide regardless of the rule above. */
        min-width: 0;
    }
    .cp-nav-toggle {
        position: absolute;
        top: 0;
        right: 0;
    }
    .cp-header-contact { width: 100%; flex-direction: column; align-items: stretch; gap: 12px; }


    .cp-btn-call { padding: 9px 16px; font-size: 0.78rem; }
    .cp-btn-cabinet { padding: 9px 16px; font-size: 0.78rem; }
    .cp-header-buttons { width: 100%; gap: 10px; }
    .cp-header-buttons .cp-btn-cabinet,
    .cp-header-buttons .cp-btn-call { flex: 1; text-align: center; justify-content: center; max-width: none; }
    .cp-header-divider { display: none; }

    /* Dimmed backdrop behind the mobile nav drawer — was previously missing,
       which made the open drawer look unfinished (page stayed fully bright
       and clickable behind it) and gave no click-outside-to-close. */
    .cp-nav-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(15,23,42,0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 140;
    }
    .cp-nav-overlay.is-open { opacity: 1; pointer-events: auto; }

    .cp-header-bottom {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;   /* fallback for browsers without dvh support */
        height: 100dvh;  /* real visible height on mobile — avoids content
                             being pushed below the browser chrome (address
                             bar), which made the bottom of the drawer
                             unreachable even though overflow-y:auto never
                             kicked in since nothing internally overflowed */
        width: min(78vw, 320px);
        background: #FFFDF7;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 88px 28px 24px;
        gap: 24px;
        transform: translateX(100%);
        transition: transform 0.35s cubic-bezier(0.19, 1, 0.22, 1);
        box-shadow: -12px 0 30px rgba(28,26,22,0.10);
        /* Above .cp-header (z-index: 100) — previously lower, which let the
           sticky header visually clip the drawer's own close button in the
           overlapping top strip. */
        z-index: 150;
        /* On short viewports (small phones, landscape) the menu + toggle +
           cabinet button can exceed 100vh. Without this the overflow was
           simply rendered past the visible viewport with no way to reach
           it — the whole drawer needs to scroll, not just the link list. */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .cp-header-bottom.is-open { transform: translateX(0); }
    .cp-nav-close { display: block; }
    #cpNav .cp-nav-close {
        /* Fixed (not absolute) so it stays anchored to the viewport corner
           while the drawer scrolls, instead of scrolling away with the
           content. Scoped to #cpNav specifically — the shared .cp-nav-close
           class is also used by the call modal's close button, a different,
           centered, non-scrolling context that must keep its own
           positioning untouched. */
        position: fixed;
        top: 24px;
        right: 24px;
    }
    .cp-nav-drawer-scroll { width: 100%; }
    .cp-nav-menu {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        font-size: 1rem;
    }
    .cp-view-toggle { width: 100%; margin-top: auto; }
    .cp-view-toggle a { flex: 1; text-align: center; }

    /* Anchors quick-access phone + cabinet links to the bottom of the
       drawer, so tall screens don't leave a dead empty gap below the menu
       — also gives mobile users a way to call or reach their account
       without closing the drawer first. */
    .cp-nav-drawer-footer {
        display: flex;
        width: 100%;
        flex-direction: column;
        gap: 10px;
        padding-top: 20px;
        border-top: 1px dashed rgba(28,26,22,0.16);
    }
    .cp-nav-drawer-cabinet {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 11px 16px;
        font-size: 0.88rem;
        font-weight: 600;
        letter-spacing: 0;
        color: #1C1A16;
        background: transparent;
        border: 1px solid rgba(28,26,22,0.16);
        border-radius: 8px;
        text-decoration: none;
        transition: var(--transition);
    }
    .cp-nav-drawer-cabinet:hover { border-color: #C1461D; background: #EFE9DD; color: #1C1A16; }

    .cp-hero-grid { grid-template-columns: 1fr; gap: 48px; }
    .cp-hero h1 { font-size: 2.7rem; }
    .cp-trust .cp-container { gap: 24px; justify-content: flex-start; overflow-x: auto; }
}
body.cp-nav-lock { overflow: hidden; }
@media (max-width: 600px) {
    .cp-header { padding: 16px 0 0; }
    .cp-header-top { gap: 10px 12px; }
    .cp-logo { font-size: 1.1rem; gap: 8px; }
    .cp-logo-tagline { display: none; }
    .cp-crest { width: 20px; height: 20px; }

    .cp-promo-bar-inner { padding: 7px 40px 7px 12px; }
    .cp-promo-bar-link { flex-direction: column; gap: 1px; }
    .cp-promo-bar-label { font-size: 0.7rem; text-align: center; }
    .cp-btn-call { padding: 8px 14px; font-size: 0.7rem; }
    .cp-btn-cabinet { padding: 8px 14px; font-size: 0.7rem; }
    .cp-btn-telegram { width: 38px; min-width: 38px; min-height: 34px; }
    .cp-btn-telegram svg { width: 18px; height: 18px; }
    .cp-nav-toggle { width: 26px; height: 26px; gap: 4px; }
    .cp-logo { padding-right: 38px; }
    .cp-header-bottom { width: 84vw; padding: 76px 22px 28px; }
    .cp-hero { padding: 56px 0 64px; }
    .cp-hero h1 { font-size: 2.2rem; }
    .cp-hero-sub { font-size: 1rem; }
    .cp-hero-buttons .cp-btn { width: 100%; text-align: center; justify-content: center; }
    .cp-footer { padding: 40px 0 24px; }
    .cp-footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 400px) {
    .cp-logo { font-size: 1rem; }
    .cp-btn-call { padding: 7px 12px; font-size: 0.68rem; }
}

/* ===== TENDER FORM SHORTCODE — theme bridge =====
   [cleaning_tender_form] (calc_app.php) ships its own scoped CSS on
   .ccalc-wrap using --ccalc-* variable names. It already uses the same
   colors as this theme (navy #0F172A / gold #C5A880) but under different
   variable names, so we re-point them at the theme's own tokens rather
   than maintaining two copies of the same palette. This keeps the form
   on the business page visually identical to the rest of the page and
   automatically in sync if the theme palette ever changes. */
.lead-form--shortcode .ccalc-wrap {
    --ccalc-navy: var(--deep-navy);
    --ccalc-navy-soft: var(--graphite);
    --ccalc-gold: var(--muted-gold);
    --ccalc-gold-dim: var(--muted-gold-soft);
    --ccalc-border: var(--border-light);
    --ccalc-line: var(--border-light);
    --ccalc-muted: var(--text-muted);
    --ccalc-bg: var(--light-gray);
    --ccalc-ink: var(--text-anthracite);
    max-width: none;
    margin: 0;
}

/* The shortcode's own submit button borrows generic button styling;
   align it with this theme's .btn-primary look (sharp corners, uppercase,
   letter-spacing) instead of its default rounded pill button. */
.lead-form--shortcode .ccalc-btn-primary {
    border-radius: 1px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-size: 0.9rem;
}

/* .lead-form already provides the outer card padding/border in this theme;
   the shortcode brings its own inner spacing, so avoid doubling up. */
.lead-form.lead-form--shortcode { padding: 40px; }
@media (max-width: 768px) {
    .lead-form.lead-form--shortcode { padding: 28px 22px; }
}
@media (max-width: 480px) {
    .lead-form.lead-form--shortcode { padding: 22px 18px; }
}