/* ==========================================================================
   Northern Star Press — Theme v3 "Navy & Star Red"
   Brand palette lifted straight from the logo: deep navy (#002863) +
   star red (#ED0105) on cool light neutrals. Huge uppercase display type,
   highlighted words, decisive buttons.
   Type: Bricolage Grotesque (display) + Urbanist (body/UI)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Urbanist:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500;1,600&display=swap');

:root {
    /* Navy scale — logo blue. Used for headings + dark sections */
    --ink-950: #00132E;
    --ink-900: #001A40;
    --ink-800: #002251;
    --ink: #002863;
    --text: #47505F;
    --soft: #7C8493;
    /* Star red — logo accent */
    --accent: #ED0105;
    --accent-deep: #D30004;
    --accent-dark: #B00003;
    /* Cool brand tints (replace the old warm peach/cream) */
    --peach: #CFE0F5;
    --peach-soft: #E8EFFA;
    --cream: #F4F7FC;
    --zinc: #EFF3F9;
    --line: #E2E8F1;
    --line-dark: rgba(255, 255, 255, .12);
    --white: #fff;
    --shadow-sm: 0 2px 12px rgba(19, 19, 22, .06);
    --shadow-md: 0 16px 44px rgba(19, 19, 22, .12);
    --shadow-lg: 0 30px 80px rgba(11, 11, 13, .22);
    --r-md: 16px;
    --r-lg: 24px;
    --ease: cubic-bezier(.22, 1, .36, 1);
    --font-display: 'Bricolage Grotesque', 'Arial Black', sans-serif;
    --font-body: 'Urbanist', 'Segoe UI', sans-serif;
}

/* ---------- Base ---------- */

::-webkit-scrollbar { width: 10px; background: var(--zinc); }
::-webkit-scrollbar-thumb { border-radius: 8px; background: #C9C9CE; border: 2px solid var(--zinc); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

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

body {
    font-family: var(--font-body);
    background: var(--white);
    color: var(--text);
    font-size: 1.02rem;
    line-height: 1.75;
    overflow-x: hidden;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}

section { position: relative; }
img { max-width: 100%; }

/* Icon tiles: CSS grid centering is immune to baseline/line-height quirks,
   so glyphs stay dead-centre on every device and hover state */
.mega-ic, .sc-icon, .ft-icon, .cc-icon, .ci-icon, .fc-ic, .pc-icon, .np-ic,
.tk-icon, .fq-toggle, .tc-quote-mark, .check-item .ck, .btn-c .bi,
.mm-close, .to-top, .t-nav button {
    display: grid;
    place-items: center;
    padding: 0;
    line-height: 1;
    text-align: center;
}

.mega-ic svg, .sc-icon svg, .ft-icon svg, .cc-icon svg, .ci-icon svg,
.fc-ic svg, .pc-icon svg, .np-ic svg, .tk-icon svg, .btn-c .bi svg,
.fq-toggle svg, .t-nav button svg, .to-top svg, .check-item .ck svg,
.tc-quote-mark svg, .mm-close svg, .mm-sub a svg, .mega-arrow svg {
    display: block;
    margin: 0 auto;
}
a { text-decoration: none !important; transition: all .3s var(--ease); }
ul { margin: 0; padding: 0; list-style: none; }
p { color: var(--text); margin-bottom: 1rem; }

h1, h2, h3, .heading {
    font-family: var(--font-display);
    color: var(--ink);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.015em;
}

h4, h5, h6 { font-family: var(--font-body); color: var(--ink); font-weight: 700; }

.container { padding-left: 24px; padding-right: 24px; }

@media (min-width: 1200px) {
    .container { max-width: 1290px; }
}

.section { padding: 110px 0; }
.section-sm { padding: 72px 0; }

.bg-cream { background: var(--cream); }
.bg-peach { background: var(--peach); }
.bg-ink { background: var(--ink-950); }

::selection { background: var(--accent); color: #fff; }

/* ---------- Type helpers ---------- */

.kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--accent-deep);
    margin-bottom: 20px;
}

.kicker::before { content: ""; width: 30px; height: 2px; background: var(--accent); }
.kicker-center { justify-content: center; }
.kicker-center::after { content: ""; width: 30px; height: 2px; background: var(--accent); }
.on-dark .kicker, .kicker.on-dark { color: var(--peach); }
.on-dark .kicker::before, .kicker.on-dark::before, .on-dark .kicker-center::after { background: var(--accent); }

.section-title {
    font-size: clamp(2.1rem, 3.6vw, 3.15rem);
    text-transform: uppercase;
    line-height: 1.02;
    margin-bottom: 20px;
    letter-spacing: -.01em;
}

/* Highlighted word: terracotta block, like the reference design */
.hl {
    display: inline-block;
    position: relative;
    color: #fff;
    padding: .02em .16em .06em;
    z-index: 1;
    /* Allow long highlighted phrases to wrap instead of overflowing and being
       clipped by the body's overflow-x: clip on narrow screens. */
    white-space: normal;
    max-width: 100%;
}

.hl::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--accent);
    z-index: -1;
    transform: scaleX(0) skewX(-4deg);
    transform-origin: left center;
    transition: transform .7s var(--ease) .1s;
}

.hl.hl-on::before, .no-js .hl::before { transform: scaleX(1) skewX(-4deg); }

.hl-peach { color: var(--ink); }
.hl-peach::before { background: var(--peach); }

.on-dark .section-title, .on-dark h2, .on-dark h3 { color: #fff; }
.on-dark p { color: #B9B9C1; }

.section-head { max-width: 760px; margin: 0 auto 60px; text-align: center; }
.section-head p { font-size: 1.06rem; }

.lead-text { font-size: 1.16rem; line-height: 1.7; color: var(--text); font-weight: 500; }

/* ---------- Buttons ---------- */

.btn-c {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 8px 8px 28px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: .92rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all .35s var(--ease);
    line-height: 1.2;
    white-space: nowrap;
}

.btn-c .bi {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    transition: all .35s var(--ease);
}

.btn-c .bi svg { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.btn-c:hover .bi svg { transform: translateX(3px); }
.btn-c > svg { width: 17px; height: 17px; flex: none; }

/* solid ink button, terracotta circle */
.btn-dark { background: var(--ink-950); color: #fff !important; }
.btn-dark .bi { background: var(--accent); color: #fff; }
.btn-dark:hover { background: var(--accent); transform: translateY(-3px); box-shadow: 0 16px 34px rgba(237, 1, 5, .35); }
.btn-dark:hover .bi { background: var(--ink-950); }

/* terracotta button */
.btn-accent { background: var(--accent); color: #fff !important; box-shadow: 0 14px 30px rgba(237, 1, 5, .3); }
.btn-accent .bi { background: rgba(255, 255, 255, .18); color: #fff; }
.btn-accent:hover { background: var(--ink-950); transform: translateY(-3px); box-shadow: 0 18px 40px rgba(11, 11, 13, .3); }
.btn-accent:hover .bi { background: var(--accent); }

/* white button for dark bands */
.btn-white { background: #fff; color: var(--ink) !important; }
.btn-white .bi { background: var(--ink-950); color: #fff; }
.btn-white:hover { background: var(--peach); transform: translateY(-3px); }
.btn-white:hover .bi { background: var(--accent); }

/* outline */
.btn-line { background: transparent; color: var(--ink) !important; border-color: rgba(23, 23, 27, .25); padding: 14px 30px; }
.btn-line:hover { border-color: var(--ink); transform: translateY(-3px); }

.btn-line-light { background: transparent; color: #fff !important; border-color: rgba(255, 255, 255, .35); padding: 14px 30px; }
.btn-line-light:hover { border-color: #fff; background: rgba(255, 255, 255, .08); transform: translateY(-3px); }

/* Legacy aliases (used across templates) */
.btn-gold { background: var(--accent); color: #fff !important; box-shadow: 0 14px 30px rgba(237, 1, 5, .3); padding: 15px 30px; }
.btn-gold:hover { background: var(--ink-950); color: #fff !important; transform: translateY(-3px); }
.btn-gold svg { width: 16px; height: 16px; }
.btn-navy { background: var(--ink-950); color: #fff !important; padding: 15px 30px; }
.btn-navy:hover { background: var(--accent); color: #fff !important; transform: translateY(-3px); }
.btn-navy svg { width: 16px; height: 16px; }
.btn-ghost { background: transparent; color: var(--ink) !important; border-color: rgba(23, 23, 27, .25); padding: 15px 30px; }
.btn-ghost:hover { border-color: var(--ink); transform: translateY(-3px); }
.btn-ghost svg { width: 16px; height: 16px; }
.btn-ghost-light { background: transparent; color: #fff !important; border-color: rgba(255, 255, 255, .35); padding: 15px 30px; }
.btn-ghost-light:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.btn-ghost-light svg { width: 16px; height: 16px; }

/* phone chip */
.phone-chip { display: inline-flex; align-items: center; gap: 13px; color: inherit; }

.phone-chip .pc-icon {
    width: 52px; height: 52px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--peach);
    color: var(--accent-deep);
    flex: none;
    transition: all .3s var(--ease);
}

.phone-chip .pc-icon svg { width: 20px; height: 20px; }
.phone-chip:hover .pc-icon { background: var(--accent); color: #111111; transform: rotate(-10deg) scale(1.06); }
.phone-chip small { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--soft); line-height: 1.3; }
.phone-chip strong { display: block; font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; color: var(--ink); line-height: 1.3; }
.on-dark .phone-chip strong { color: #fff; }
.on-dark .phone-chip small { color: #9C9CA6; }
.on-dark .phone-chip .pc-icon { background: rgba(255, 255, 255, .1); color: var(--peach); }

.cta-row { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }

/* ==========================================================================
   HEADER — scroll progress + utility bar + nav + full-width mega menu
   ========================================================================== */

.scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--accent), var(--accent-deep));
    z-index: 300;
    transition: width .1s linear;
}

.site-header { position: sticky; top: -42px; z-index: 200; }

.topbar {
    background: var(--ink-950);
    height: 42px;
    display: flex;
    align-items: center;
    font-size: .82rem;
    position: relative;
    z-index: 60;
}

.topbar .container { width: 100%; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.topbar-note {
    color: #B5B5BE;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    letter-spacing: .02em;
}

.topbar-note svg { width: 13px; height: 13px; color: var(--accent); flex: none; }

.topbar-links { display: flex; gap: 24px; }

.topbar-links a { color: #D6D6DC; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.topbar-links a svg { width: 13px; height: 13px; color: var(--accent); }
.topbar-links a:hover { color: var(--peach); }

.site-nav {
    position: relative;
    z-index: 50;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    transition: box-shadow .3s ease;
}

.site-nav.is-stuck { box-shadow: 0 18px 50px rgba(11, 11, 13, .12); }

.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 88px; transition: height .3s var(--ease); }
.site-nav.is-stuck .nav-inner { height: 74px; }

.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { height: 54px; width: auto; transition: height .3s ease; }
.site-nav.is-stuck .brand img { height: 46px; }

/* Center menu */
.nav-menu { display: flex; align-items: center; gap: 26px; }

.nav-menu > li { position: relative; }

.nav-menu > li > a,
.nav-menu > li > button.nav-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 2px;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ink);
    background: none;
    border: 0;
    cursor: pointer;
    position: relative;
    transition: color .25s var(--ease);
}

/* underline sweep */
.nav-menu > li > a::after,
.nav-menu > li > button.nav-link-btn::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .35s var(--ease);
}

.nav-menu > li > a:hover, .nav-menu > li.active > a,
.nav-menu > li > button.nav-link-btn:hover,
.nav-menu > li.mega-open > button.nav-link-btn { color: var(--accent-deep); }

.nav-menu > li > a:hover::after,
.nav-menu > li.active > a::after,
.nav-menu > li > button.nav-link-btn:hover::after,
.nav-menu > li.mega-open > button.nav-link-btn::after { transform: scaleX(1); transform-origin: left center; }

.nav-menu .chev { width: 12px; height: 12px; transition: transform .3s var(--ease); }
.nav-menu li.mega-open .chev { transform: rotate(180deg); }

.nav-right { display: flex; align-items: center; gap: 16px; flex: none; }

.nav-phone { display: inline-flex; align-items: center; gap: 10px; }
.nav-phone .np-ic {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--peach);
    color: var(--accent-deep);
    display: flex; align-items: center; justify-content: center;
    transition: all .3s var(--ease);
}
.nav-phone .np-ic svg { width: 17px; height: 17px; }
.nav-phone:hover .np-ic { background: var(--accent); color: #fff; transform: rotate(-10deg); }
.nav-phone small { display: block; font-size: .66rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--soft); line-height: 1.2; }
.nav-phone strong { display: block; font-family: var(--font-display); font-size: .98rem; color: var(--ink); line-height: 1.25; }
.nav-phone:hover strong { color: var(--accent-deep); }

.nav-quote-btn { font-size: .8rem; }

/* ---------- MEGA MENU ---------- */

.mega-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 60px 90px rgba(11, 11, 13, .18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s .35s;
    z-index: 40;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
}

.site-nav.mega-active .mega-panel {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .35s var(--ease), transform .35s var(--ease);
}

.mega-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 46px;
    padding: 44px 0 48px;
}

.mega-intro {
    background: linear-gradient(150deg, var(--peach), var(--peach-soft));
    border-radius: var(--r-lg);
    padding: 34px 32px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.mega-intro::after {
    content: "”";
    position: absolute;
    right: -12px; bottom: -76px;
    font-family: var(--font-display);
    font-size: 13rem;
    color: rgba(237, 1, 5, .16);
    line-height: 1;
}

.mega-intro h4 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; text-transform: uppercase; line-height: 1.06; margin-bottom: 10px; }
.mega-intro p { font-size: .92rem; margin-bottom: 22px; }
.mega-intro .btn-c { align-self: flex-start; margin-bottom: 18px; }
.mega-intro .mega-call { font-size: .9rem; font-weight: 700; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.mega-intro .mega-call svg { width: 15px; height: 15px; color: var(--accent-deep); }
.mega-intro .mega-call:hover { color: var(--accent-deep); }

.mega-services { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 30px; align-content: start; }

.mega-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 13px 16px;
    border-radius: 14px;
    transition: background .25s ease, transform .25s var(--ease);
    opacity: 0;
    transform: translateY(10px);
}

.mega-item > span:nth-child(2) { flex: 1; min-width: 0; }

.site-nav.mega-active .mega-item { opacity: 1; transform: none; transition: opacity .4s var(--ease), transform .4s var(--ease), background .25s ease; }
.site-nav.mega-active .mega-item:nth-child(1) { transition-delay: .04s; }
.site-nav.mega-active .mega-item:nth-child(2) { transition-delay: .07s; }
.site-nav.mega-active .mega-item:nth-child(3) { transition-delay: .1s; }
.site-nav.mega-active .mega-item:nth-child(4) { transition-delay: .13s; }
.site-nav.mega-active .mega-item:nth-child(5) { transition-delay: .16s; }
.site-nav.mega-active .mega-item:nth-child(6) { transition-delay: .19s; }
.site-nav.mega-active .mega-item:nth-child(7) { transition-delay: .22s; }
.site-nav.mega-active .mega-item:nth-child(8) { transition-delay: .25s; }
.site-nav.mega-active .mega-item:nth-child(9) { transition-delay: .28s; }
.site-nav.mega-active .mega-item:nth-child(10) { transition-delay: .31s; }

.mega-item:hover { background: var(--cream); }

.mega-ic {
    width: 46px; height: 46px;
    flex: none;
    border-radius: 13px;
    background: var(--peach-soft);
    color: var(--accent-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s var(--ease);
    align-content: center;
}

.mega-ic svg { width: 21px; height: 21px; }
.mega-item:hover .mega-ic { background: var(--accent); color: #fff; transform: rotate(-6deg) scale(1.05); }

.mega-item strong { display: block; font-size: .95rem; font-weight: 800; color: var(--ink); line-height: 1.3; }
.mega-item span { display: block; font-size: .8rem; color: var(--soft); line-height: 1.45; }

.mega-arrow { margin-left: auto; color: var(--line); flex: none; transition: all .3s var(--ease); }
.mega-arrow svg { width: 16px; height: 16px; }
.mega-item:hover .mega-arrow { color: var(--accent); transform: translateX(4px); }

/* dim page behind mega menu */
.mega-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(11, 11, 13, .4);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility 0s .35s;
    z-index: 30;
}

body.mega-on .mega-backdrop { opacity: 1; visibility: visible; transition: opacity .35s ease; }

/* Burger */
.nav-toggle {
    display: none;
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    background: #fff;
    cursor: pointer;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    position: relative;
    z-index: 260;
    transition: all .3s var(--ease);
}

.nav-toggle span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--ink); transition: all .35s var(--ease); }

body.menu-open .nav-toggle { background: var(--accent); border-color: var(--accent); }
body.menu-open .nav-toggle span { background: #fff; }
body.menu-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Mobile full-screen menu ---------- */

.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 250;
    background: var(--ink-950);
    display: flex;
    flex-direction: column;
    padding: 108px 8vw 40px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s var(--ease), visibility 0s .4s;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;                              /* Firefox */
    scrollbar-color: rgba(237, 1, 5, .55) transparent;  /* thumb / track */
}

/* Custom scrollbar inside the mobile menu (WebKit / Chromium) */
.mobile-menu::-webkit-scrollbar { width: 6px; }
.mobile-menu::-webkit-scrollbar-track { background: transparent; }
.mobile-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .16);
    border-radius: 999px;
}
.mobile-menu::-webkit-scrollbar-thumb:hover { background: var(--accent); }

body.menu-open .mobile-menu { opacity: 1; visibility: visible; transition: opacity .4s var(--ease); }

.mobile-menu::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(600px 400px at 90% -10%, rgba(237, 1, 5, .25), transparent 60%);
    pointer-events: none;
}

@media (min-width: 1100px) {
    .mobile-menu { display: none; }
}

/* Close button inside the overlay (the header burger sits underneath it) */
.mm-close {
    position: absolute;
    top: 22px;
    right: 8vw;
    z-index: 3;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .35s var(--ease);
}

.mm-close svg { width: 20px; height: 20px; }
.mm-close:hover { background: var(--accent); border-color: var(--accent); transform: rotate(90deg); }

.mm-brand {
    position: absolute;
    top: 22px;
    left: 8vw;
    z-index: 3;
    display: inline-flex;
    background: #fff;
    border-radius: 12px;
    padding: 8px 14px;
}

.mm-brand img { height: 36px; width: auto; }

.mm-links { position: relative; }

.mm-links > li { border-bottom: 1px solid rgba(255, 255, 255, .08); }

.mm-links > li > a,
.mm-links > li > button {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 20px 4px;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 5.6vw, 2.1rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .01em;
    color: #fff;
    transform: translateY(26px);
    opacity: 0;
    transition: transform .5s var(--ease), opacity .5s var(--ease), color .25s;
}

body.menu-open .mm-links > li > a,
body.menu-open .mm-links > li > button { transform: none; opacity: 1; }

body.menu-open .mm-links > li:nth-child(1) > * { transition-delay: .08s; }
body.menu-open .mm-links > li:nth-child(2) > * { transition-delay: .14s; }
body.menu-open .mm-links > li:nth-child(3) > * { transition-delay: .2s; }
body.menu-open .mm-links > li:nth-child(4) > * { transition-delay: .26s; }

.mm-links > li > a:hover, .mm-links > li > button:hover { color: var(--peach); }
.mm-links .mm-num { font-size: .8rem; color: var(--accent); font-family: var(--font-body); font-weight: 800; margin-right: 14px; vertical-align: super; }
.mm-links .chev { width: 20px; height: 20px; color: var(--accent); transition: transform .3s var(--ease); }
.mm-links li.open .chev { transform: rotate(180deg); }

.mm-sub {
    display: none;
    padding: 4px 4px 18px;
    grid-template-columns: 1fr 1fr;
    gap: 2px 18px;
}

.mm-links li.open .mm-sub { display: grid; }

.mm-sub a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 12px;
    padding: 10px 10px;
    border-radius: 10px;
    color: #C9C9D2;
    font-size: .95rem;
    font-weight: 600;
}

/* Left-align icon + text (override the shared "margin:0 auto" icon-centering rule) */
.mm-sub a svg { width: 17px; height: 17px; color: var(--accent); flex: none; margin: 0; }
.mm-sub a:hover { background: rgba(255, 255, 255, .06); color: #fff; }

.mm-foot { position: relative; margin-top: auto; padding-top: 34px; display: flex; flex-direction: column; gap: 14px; }
.mm-foot a { color: #C9C9D2; font-weight: 700; display: inline-flex; gap: 10px; align-items: center; }
.mm-foot a svg { width: 16px; height: 16px; color: var(--accent); }
.mm-foot a:hover { color: var(--peach); }
.mm-foot .btn-c { align-self: flex-start; margin-top: 6px; }

/* ==========================================================================
   HERO — dark, lead-form card right, huge display type
   ========================================================================== */

.hero {
    position: relative;
    background: var(--ink-950);
    overflow: hidden;
}

.hero-texture {
    position: absolute;
    inset: 0;
    background: url('../images/main-hero-background.webp') center / cover no-repeat;
    opacity: .90;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    /* background:
        radial-gradient(760px 520px at 88% -10%, rgba(237, 1, 5, .3), transparent 60%),
        radial-gradient(600px 420px at -8% 110%, rgba(250, 220, 203, .12), transparent 55%),
        linear-gradient(180deg, rgba(11, 11, 13, .5), rgba(11, 11, 13, .82)); */
}

.hero .container { position: relative; z-index: 2; }

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 70px;
    align-items: center;
    padding: 90px 0 130px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(8px);
    color: #EDEDF1;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 10px 20px;
    margin-bottom: 30px;
}

.hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(237, 1, 5, .25); animation: pulseDot 2s ease-out infinite; }

@keyframes pulseDot {
    0% { box-shadow: 0 0 0 0 rgba(237, 1, 5, .5); }
    70% { box-shadow: 0 0 0 9px rgba(237, 1, 5, 0); }
    100% { box-shadow: 0 0 0 0 rgba(237, 1, 5, 0); }
}

.display-title {
    font-size: clamp(2.6rem, 5.4vw, 2.8rem);
    color: #fff;
    text-transform: uppercase;
    line-height: .99;
    letter-spacing: -.01em;
    margin-bottom: 16px;
    font-weight: 800;
}

.hero-rotator {
    display: block;
    margin-top: 16px;
    font-family: var(--font-body);
    font-size: clamp(1.15rem, 2vw, 1.6rem);
    font-weight: 600;
    text-transform: none;
    letter-spacing: .01em;
    color: #A9A9B4;
}

.hero-rotator .rotator-word { color: var(--peach); font-weight: 800; }

.hero-rotator .caret {
    display: inline-block;
    width: 2px;
    height: 1.05em;
    margin-left: 3px;
    background: var(--accent);
    vertical-align: -.15em;
    animation: caretBlink .8s steps(1) infinite;
}

@keyframes caretBlink { 50% { opacity: 0; } }

.hero-sub { color: #C6C6CE; font-size: 1.1rem; margin-bottom: 16px; }

.hero-ctas { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 44px; }

.hero-proof { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

.avatar-stack { display: flex; }
.avatar-stack img {
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 3px solid var(--ink-950);
    object-fit: cover;
    margin-left: -13px;
    transition: transform .3s var(--ease);
}
.avatar-stack img:first-child { margin-left: 0; }
.avatar-stack:hover img { transform: translateX(2px); }

.hero-proof .proof-text { font-size: .93rem; color: #C6C6CE; line-height: 1.5; }
.hero-proof .proof-text .stars { color: var(--peach); letter-spacing: 2px; font-size: .85rem; }
.hero-proof .proof-text strong { color: #fff; }

/* Lead-form card (replaces the old hero video) */
.hero-form-wrap { position: relative; }

.hero-form-card {
    position: relative;
    background: #fff;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    padding: 34px 32px 30px;
    overflow: hidden;
}

.hero-form-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--accent), var(--ink));
}

.hff-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--peach-soft);
    color: var(--ink);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 8px 14px;
    margin-bottom: 16px;
}

.hff-badge svg { width: 15px; height: 15px; color: var(--accent); }

.hff-title {
    font-family: var(--font-display);
    font-size: clamp(1.55rem, 2.3vw, 2rem);
    text-transform: uppercase;
    line-height: 1.02;
    margin-bottom: 8px;
}

.hff-sub { color: var(--text); font-size: .95rem; margin-bottom: 22px; }

.hero-form-note {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .78rem;
    color: var(--soft);
    margin: 14px 0 0;
}

.hero-form-note svg { width: 13px; height: 13px; color: var(--accent-deep); flex: none; }

/* Hero entrance */
[data-hero] { opacity: 0; transform: translateY(30px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
.hero-in [data-hero] { opacity: 1; transform: none; }
.hero-in [data-hero="1"] { transition-delay: .05s; }
.hero-in [data-hero="2"] { transition-delay: .12s; }
.hero-in [data-hero="3"] { transition-delay: .19s; }
.hero-in [data-hero="4"] { transition-delay: .26s; }
.hero-in [data-hero="5"] { transition-delay: .33s; }
.hero-in [data-hero="6"] { transition-delay: .42s; }

/* ==========================================================================
   PRESS / PLATFORM STRIP
   ========================================================================== */

.press-strip { background: var(--ink-950); padding: 46px 0 40px; overflow: hidden; }

.press-strip .strip-label {
    text-align: center;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: #6F6F7A;
    margin-bottom: 26px;
}

.marquee { display: flex; width: max-content; animation: marqueeMove 32s linear infinite; }
.marquee:hover { animation-play-state: paused; }
.marquee-track { display: flex; align-items: center; flex: none; }

.marquee-track span:not(.logo-chip) {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #7E7E89;
    white-space: nowrap;
    padding: 0 30px;
    display: inline-flex;
    align-items: center;
    gap: 60px;
    transition: color .3s;
}

.marquee-track span:not(.logo-chip)::after { content: "✦"; font-size: .75rem; color: var(--accent); }
.marquee-track span:not(.logo-chip):hover { color: var(--peach); }

@keyframes marqueeMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Platform logo chips inside the marquee */
.logo-chip {
    background: #fff;
    border-radius: 14px;
    height: 66px;
    padding: 0 30px;
    margin: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .25);
    transition: transform .3s var(--ease);
}

.logo-chip img {
    max-height: 32px;
    max-width: 148px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.logo-chip:hover { transform: translateY(-5px); }

@media (max-width: 767px) {
    .logo-chip { height: 56px; padding: 0 22px; margin: 0 8px; }
    .logo-chip img { max-height: 26px; max-width: 120px; }
}

/* ==========================================================================
   SERVICES GRID
   ========================================================================== */

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

.service-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 38px 34px 34px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: all .4s var(--ease);
    box-shadow: var(--shadow-sm);
}

.service-card::after {
    content: "";
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 3px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s var(--ease);
}

.service-card:hover { transform: translateY(-9px); box-shadow: var(--shadow-md); border-color: rgba(237, 1, 5, .35); }
.service-card:hover::after { transform: scaleX(1); }

.sc-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--peach-soft);
    color: var(--accent-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    transition: all .4s var(--ease);
}

.sc-icon svg { width: 28px; height: 28px; }
.service-card:hover .sc-icon { background: var(--accent); color: #fff; transform: rotate(-8deg) scale(1.07); }

.service-card h3 { font-family: var(--font-display); font-size: 1.34rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: 12px; }
.service-card p { font-size: .96rem; line-height: 1.72; margin-bottom: 24px; flex: 1; color: var(--text); }

.sc-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    font-size: .86rem;
    font-weight: 700;
    color: var(--ink);
    transition: color .3s var(--ease);
}
.sc-link span { border-bottom: 2px solid rgba(0, 40, 99, .22); padding-bottom: 3px; transition: border-color .3s var(--ease); }
.sc-link svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.service-card:hover .sc-link { color: var(--accent-deep); }
.service-card:hover .sc-link span { border-color: var(--accent); }
.service-card:hover .sc-link svg { transform: translateX(5px); }

/* ---- Services slider (inner service pages, carousel on every breakpoint) ---- */
.services-slider { position: relative; margin-top: 8px; }
.services-swiper { width: 100%; padding-bottom: 44px; }
.services-swiper .swiper-slide { height: auto; display: flex; }
.services-swiper .swiper-slide .service-card { width: 100%; }
.services-swiper .services-pagination { bottom: 4px; }
.services-swiper .services-pagination .swiper-pagination-bullet { width: 9px; height: 9px; background: #D9D9DE; opacity: 1; transition: all .3s var(--ease); }
.services-swiper .services-pagination .swiper-pagination-bullet-active { width: 34px; border-radius: 6px; background: var(--accent); }
.services-slider-ctrl { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 26px; }
.ss-btn {
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: none;
    transition: all .3s var(--ease);
}
.ss-btn svg { width: 20px; height: 20px; }
.ss-prev svg { transform: scaleX(-1); }
.ss-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 12px 26px rgba(237, 1, 5, .32); }

/* ==========================================================================
   SPLIT SECTIONS
   ========================================================================== */

.split-media { position: relative; }

.split-media .sm-frame {
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    position: relative;
}

.split-media .sm-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(200deg, transparent 55%, rgba(11, 11, 13, .38));
}

.split-media .sm-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s var(--ease); }
.split-media:hover .sm-frame img { transform: scale(1.05); }

.split-media::before {
    content: "";
    position: absolute;
    inset: 30px -28px -28px 30px;
    background: var(--peach);
    border-radius: var(--r-lg);
    z-index: -1;
}

.sm-card {
    position: absolute;
    left: -28px; bottom: 36px;
    background: var(--ink-950);
    color: #fff;
    border-radius: 18px;
    padding: 20px 26px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(255, 255, 255, .12);
    z-index: 2;
}

.sm-card .smc-num { font-family: var(--font-display); font-size: 2.1rem; font-weight: 800; color: var(--peach); line-height: 1; }
.sm-card .smc-label { font-size: .8rem; font-weight: 600; color: #C9C9D2; line-height: 1.45; }

.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; margin: 28px 0 34px; }

.check-item { display: flex; align-items: flex-start; gap: 11px; font-size: .97rem; font-weight: 700; color: var(--ink); }

.check-item .ck {
    width: 22px; height: 22px;
    flex: none;
    margin-top: 3px;
    border-radius: 50%;
    background: var(--peach);
    color: var(--accent-deep);
    display: flex;
    align-items: center;
    justify-content: center;
}

.check-item .ck svg { width: 12px; height: 12px; }

.on-dark .check-item { color: #EDEDF1; }
.on-dark .check-item .ck { background: rgba(255, 255, 255, .12); color: var(--peach); }

/* ==========================================================================
   STATS
   ========================================================================== */

.stats-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.stat-box {
    text-align: center;
    padding: 36px 18px 30px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    transition: all .4s var(--ease);
    position: relative;
    overflow: hidden;
}

.stat-box::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 3px;
    background: var(--accent);
    transform: scaleX(0);
    transition: transform .4s var(--ease);
}

.stat-box:hover { transform: translateY(-7px); box-shadow: var(--shadow-md); }
.stat-box:hover::after { transform: scaleX(1); }

.stat-num { font-family: var(--font-display); font-size: 2.9rem; font-weight: 800; color: var(--ink); line-height: 1; }
.stat-num .suffix { color: var(--accent); }

.stat-box .stat-label { margin: 10px 0 0; font-size: .82rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }

/* ==========================================================================
   PROCESS
   ========================================================================== */

.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; position: relative; }

.process-step { position: relative; padding-top: 8px; }

.process-step .ps-num {
    width: 68px; height: 68px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--line-dark);
    color: var(--peach);
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
    transition: all .4s var(--ease);
}

.process-step:hover .ps-num {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    transform: scale(1.1) rotate(-6deg);
    box-shadow: 0 0 0 12px rgba(237, 1, 5, .14);
}

.process-step::before {
    content: "";
    position: absolute;
    top: 42px; left: 82px; right: -20px;
    border-top: 2px dashed var(--line-dark);
}

.process-step:last-child::before { display: none; }

.process-step h3 { font-family: var(--font-body); font-size: 1.14rem; font-weight: 800; color: #fff; margin-bottom: 10px; }
.process-step p { font-size: .93rem; color: #A9A9B4; margin: 0; }

.process-light .process-step .ps-num { background: var(--peach-soft); border-color: transparent; color: var(--accent-deep); }
.process-light .process-step:hover .ps-num { background: var(--accent); color: #fff; }
.process-light .process-step::before { border-color: var(--line); }
.process-light .process-step h3 { color: var(--ink); }
.process-light .process-step p { color: var(--text); }

/* ==========================================================================
   BOOK MARQUEE
   ========================================================================== */

.books-marquee { overflow: hidden; position: relative; padding: 8px 0; }
.books-marquee + .books-marquee { margin-top: 24px; }

.books-track { display: flex; gap: 24px; width: max-content; animation: marqueeMove 48s linear infinite; }
.books-track.reverse { animation-direction: reverse; }
.books-track:hover { animation-play-state: paused; }

/* ==========================================================================
   3D BOOK COVERS (scastiel.dev-style) — angled at rest, straighten on hover.
   Perspective wrapper (.book-cover / .pf-card) -> preserve-3d body
   (.book3d / .pf-cover) -> front cover face + page block + back cover.
   ========================================================================== */

/* Marquee perspective wrapper */
.book-cover {
    width: 212px;
    aspect-ratio: 172 / 250;
    flex: none;
    position: relative;
    overflow: visible;
    perspective: 1200px;
}

/* Rotating book body — shared by marquee (.book3d) and grid (.pf-cover) */
.book3d, .pf-cover {
    position: relative;
    display: block;
    transform-style: preserve-3d;
    transform: rotateY(-26deg);
    transition: transform .8s var(--ease);
    --bt: 40px; /* page-block thickness */
}
.book3d { width: 100%; height: 100%; }
.pf-cover { width: 100%; aspect-ratio: 160 / 250; }

.book-cover:hover .book3d,
.pf-card:hover .pf-cover { transform: rotateY(0deg); }

@media (prefers-reduced-motion: reduce) {
    .book3d, .pf-cover { transform: rotateY(0deg); transition: none; }
}

/* Front cover face: the image (and the fallback layer behind it) */
.book3d > img, .book3d > .pf-fallback,
.pf-cover > img, .pf-cover > .pf-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2px 5px 5px 2px;
    backface-visibility: hidden;
}
.book3d > img, .pf-cover > img { z-index: 1; }
.book3d > img.is-broken, .pf-cover > img.is-broken { opacity: 0; }

/* Page block on the right edge (rotated into depth) */
.book3d::before, .pf-cover::before {
    content: "";
    position: absolute;
    top: 2px; bottom: 2px;
    left: 100%;
    width: 20px;
    transform-origin: left center;
    transform: rotateY(90deg);
    background: repeating-linear-gradient(90deg, #d7cdb5 0, #d7cdb5 .5px, #fff 1px, #fbf8f1 3px);
    border-radius: 0 3px 3px 0;
}

/* Back cover */
.book3d::after, .pf-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateZ(calc(-1 * var(--bt)));
    background: linear-gradient(90deg, var(--ink-900), var(--ink-950));
    border-radius: 3px 5px 5px 3px;
}

/* Cover fallback text (front face, behind the cover image) */
.pf-fallback {
    display: grid;
    place-items: center;
    text-align: center;
    padding: 14px;
    font-family: var(--font-display);
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    background: linear-gradient(160deg, var(--ink-800), var(--ink-950));
    z-index: 0;
}

/* Marquee edge fades */
.books-fade::before, .books-fade::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 130px;
    z-index: 3;
    pointer-events: none;
}
.books-fade::before { left: 0; background: linear-gradient(90deg, var(--cream), transparent); }
.books-fade::after { right: 0; background: linear-gradient(-90deg, var(--cream), transparent); }

/* ==========================================================================
   PORTFOLIO — filter tabs + card grid
   ========================================================================== */

/* Portfolio search */
.pf-search {
    position: relative;
    max-width: 480px;
    margin: 30px auto 0;
}
.pf-search-ic {
    position: absolute;
    left: 20px; top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    color: var(--soft);
    pointer-events: none;
}
.pf-search-ic svg { width: 19px; height: 19px; display: block; }
.pf-search input {
    width: 100%;
    padding: 15px 46px 15px 52px;
    border-radius: 999px;
    border: 1.5px solid var(--line);
    background: #fff;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    color: var(--ink);
    box-shadow: var(--shadow-sm);
    transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.pf-search input::placeholder { color: var(--soft); font-weight: 500; }
.pf-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.pf-search input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(237, 1, 5, .12);
}
.pf-search-clear {
    position: absolute;
    right: 12px; top: 50%;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border: 0;
    border-radius: 50%;
    background: var(--zinc);
    color: var(--ink);
    cursor: pointer;
    transition: background .25s var(--ease), color .25s var(--ease);
}
.pf-search-clear:hover { background: var(--accent); color: #fff; }
.pf-search-clear svg { width: 15px; height: 15px; display: block; }

.pf-empty {
    text-align: center;
    color: var(--soft);
    font-size: 1.06rem;
    font-weight: 600;
    padding: 46px 0 10px;
}

.pf-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.pf-tab {
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    padding: 9px 20px;
    font-family: var(--font-body);
    font-size: .86rem;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    transition: all .3s var(--ease);
}
.pf-tab:hover { border-color: var(--accent); color: var(--accent-deep); }
.pf-tab.active { background: var(--ink); border-color: var(--ink); color: #fff; }

.pf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 46px 30px; margin-top: 52px; }
.pf-card { display: flex; flex-direction: column; perspective: 1300px; perspective-origin: 50% 38%; }
/* .pf-cover is styled as a 3D book body in the "3D BOOK COVERS" block above */

.pf-badge {
    position: absolute;
    top: 10px; left: 10px;
    z-index: 2;
    background: rgba(0, 19, 46, .82);
    color: #fff;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 5px 11px;
}

.pf-view {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 12px 12px;
    background: linear-gradient(0deg, rgb(0 0 0 / 96%), rgb(0 0 0 / 55%) 50%, transparent);
    color: #fff;
    font-size: .82rem;
    font-weight: 800;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.pf-view svg { width: 15px; height: 15px; }
.pf-card:hover .pf-view { opacity: 1; transform: none; }

.pf-meta { padding: 14px 4px 0; }
.pf-meta strong { display: block; font-family: var(--font-body); font-size: .98rem; font-weight: 800; color: var(--ink); line-height: 1.3; }
.pf-author { display: block; font-size: .84rem; color: var(--soft); margin-top: 3px; }

/* ==========================================================================
   TESTIMONIALS — editorial slider like the reference
   ========================================================================== */

.testimonials-section { background: #fff; overflow: hidden; }

.testimonials-section::before {
    content: "“";
    position: absolute;
    top: -100px; right: 2%;
    font-family: var(--font-display);
    font-size: 30rem;
    font-weight: 800;
    line-height: 1;
    color: var(--peach-soft);
    pointer-events: none;
}

.rating-pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 11px 24px;
    font-size: .92rem;
    font-weight: 700;
    color: var(--ink);
    margin-top: 10px;
}

.rating-pill .stars { color: var(--accent); letter-spacing: 3px; }

.testimonial-swiper { padding: 20px 4px 70px; }

.testimonial-card {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 36px 34px 30px;
    height: auto;
    display: flex;
    flex-direction: column;
    transition: all .45s var(--ease);
    position: relative;
    overflow: hidden;
}

.testimonial-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--peach));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s var(--ease);
}

.swiper-slide-active .testimonial-card,
.testimonial-card:hover {
    background: #fff;
    box-shadow: var(--shadow-md);
    transform: translateY(-8px);
    border-color: rgba(237, 1, 5, .3);
}

.swiper-slide-active .testimonial-card::before,
.testimonial-card:hover::before { transform: scaleX(1); }

.tc-quote-mark {
    position: absolute;
    top: 24px; right: 28px;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--peach);
    color: var(--accent-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .4s var(--ease);
}

.tc-quote-mark svg { width: 20px; height: 20px; }
.swiper-slide-active .testimonial-card .tc-quote-mark { background: var(--accent); color: #fff; transform: rotate(-8deg); }

.tc-stars { color: var(--accent); font-size: 1rem; letter-spacing: 4px; margin-bottom: 18px; }

.tc-text { font-size: 1.02rem; color: var(--ink-800); line-height: 1.8; flex: 1; margin-bottom: 28px; font-weight: 500; }

.tc-person { display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--line); padding-top: 22px; }

.tc-person img {
    width: 56px; height: 56px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--accent);
}

.tc-person strong { display: block; font-family: var(--font-display); font-size: 1.04rem; font-weight: 700; color: var(--ink); line-height: 1.3; }
.tc-person span { display: block; font-size: .82rem; color: var(--soft); }

.tc-verified {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #1E7F4F;
    background: #E4F5EC;
    border-radius: 999px;
    padding: 6px 12px;
    white-space: nowrap;
}

.tc-verified svg { width: 12px; height: 12px; }

.testimonial-swiper .swiper-pagination { bottom: 10px; }
.testimonial-swiper .swiper-pagination-bullet { width: 9px; height: 9px; background: #D9D9DE; opacity: 1; transition: all .3s var(--ease); }
.testimonial-swiper .swiper-pagination-bullet-active { width: 34px; border-radius: 6px; background: var(--accent); }

.t-nav { display: flex; gap: 12px; }

.t-nav button {
    width: 56px; height: 56px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    background: #fff;
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .35s var(--ease);
}

.t-nav button svg { width: 20px; height: 20px; }
.t-nav button:hover { background: var(--accent); color: #fff; border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 14px 30px rgba(237, 1, 5, .35); }

/* ==========================================================================
   CTA BAND — peach, editorial
   ========================================================================== */

.cta-band { position: relative; background: var(--peach); overflow: hidden; }

.cta-band::before {
    content: "";
    position: absolute;
    right: -140px; top: -140px;
    width: 460px; height: 460px;
    border-radius: 50%;
    background: rgba(0, 40, 99, .1);
}

.cta-band::after {
    content: "";
    position: absolute;
    left: -120px; bottom: -180px;
    width: 380px; height: 380px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .3);
}

.cta-inner {
    position: relative;
    z-index: 2;
    padding: 96px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 44px;
    flex-wrap: wrap;
}

.cta-inner h2 {
    color: var(--ink);
    font-size: clamp(2rem, 3.6vw, 3.1rem);
    text-transform: uppercase;
    line-height: 1.02;
    max-width: 640px;
    margin-bottom: 14px;
}

.cta-inner h2 .hl::before { background: var(--accent); }
.cta-inner p { color: #3C4759; max-width: 560px; margin: 0; font-weight: 600; }
.cta-inner .phone-chip .pc-icon { background: #fff; }
.cta-inner .phone-chip small { color: #5A6474; }

/* ==========================================================================
   CONTACT SECTION
   ========================================================================== */

.contact-section { background: var(--cream); }

.contact-shell {
    background: #fff;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    border: 1px solid var(--line);
}

.contact-info {
    background:
        radial-gradient(480px 320px at -10% 115%, rgba(237, 1, 5, .35), transparent 60%),
        linear-gradient(160deg, var(--ink-900), var(--ink-950));
    color: #fff;
    padding: 54px 48px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.contact-info::after {
    content: "”";
    position: absolute;
    right: -20px; top: -70px;
    font-family: var(--font-display);
    font-size: 14rem;
    font-weight: 800;
    color: rgba(255, 255, 255, .05);
    line-height: 1;
}

.contact-info h3 { color: #fff; font-size: 1.7rem; text-transform: uppercase; margin-bottom: 12px; }
.contact-info > p { color: #B9B9C1; font-size: .97rem; margin-bottom: 36px; }

.ci-list { display: flex; flex-direction: column; gap: 20px; margin-bottom: 38px; position: relative; z-index: 1; }

.ci-item { display: flex; align-items: center; gap: 15px; color: inherit; }

.ci-item .ci-icon {
    width: 48px; height: 48px;
    flex: none;
    border-radius: 14px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    color: var(--peach);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s var(--ease);
}

.ci-item .ci-icon svg { width: 19px; height: 19px; }
a.ci-item:hover .ci-icon { background: var(--accent); color: #fff; transform: rotate(-8deg); }

.ci-item small { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #85858F; }
.ci-item strong { display: block; font-size: 1rem; font-weight: 700; color: #fff; }

.ci-points { margin-top: auto; display: flex; flex-direction: column; gap: 11px; position: relative; z-index: 1; }
.ci-points li { display: flex; align-items: center; gap: 10px; font-size: .89rem; color: #C9C9D2; font-weight: 600; }
.ci-points li svg { width: 15px; height: 15px; color: var(--accent); flex: none; }

.contact-form-wrap { padding: 54px 48px; }
.contact-form-wrap h3 { font-size: 1.5rem; text-transform: uppercase; margin-bottom: 6px; }
.contact-form-wrap .cf-sub { font-size: .93rem; margin-bottom: 28px; color: var(--soft); }

/* ---------- Forms ---------- */

.lead-form .field { position: relative; margin-bottom: 16px; }

.lead-form .field > svg {
    position: absolute;
    left: 18px; top: 50%;
    transform: translateY(-50%);
    width: 17px; height: 17px;
    color: var(--soft);
    pointer-events: none;
    transition: color .25s ease;
    z-index: 1;
}

.lead-form .field.has-icon input,
.lead-form .field.has-icon select,
.lead-form .field.has-icon textarea { padding-left: 48px; }
.lead-form .field:focus-within > svg { color: var(--accent-deep); }

/* Textarea field: pin the icon to the top instead of vertically centring it */
.lead-form .field.has-textarea > svg { top: 24px; transform: none; }

.lead-form input,
.lead-form textarea,
.lead-form select {
    width: 100%;
    background: var(--cream);
    border: 1.5px solid var(--line);
    border-radius: 13px;
    padding: 15px 18px;
    font-family: var(--font-body);
    font-size: .96rem;
    font-weight: 600;
    color: var(--ink);
    outline: none;
    transition: all .25s ease;
}

/* Select: strip native chrome, add custom caret on the right */
.lead-form .field.has-select { position: relative; }
.lead-form select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 44px;
    cursor: pointer;
}
.lead-form .field .select-caret {
    position: absolute;
    left: auto; right: 16px; top: 50%;
    transform: translateY(-50%);
    width: 18px; height: 18px;
    color: var(--soft);
    pointer-events: none;
    z-index: 1;
}
.lead-form select:required:invalid { color: var(--soft); font-weight: 500; }
.lead-form select option { color: var(--ink); font-weight: 600; }
.lead-form select option[value=""][disabled] { color: var(--soft); }

.lead-form textarea { resize: vertical; min-height: 120px; }
.hero-form textarea { min-height: 84px; }
.lead-form input::placeholder, .lead-form textarea::placeholder { color: var(--soft); font-weight: 500; }

.lead-form input:focus, .lead-form textarea:focus, .lead-form select:focus {
    border-color: var(--accent);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(237, 1, 5, .12);
}

.lead-form button[type="submit"] { width: 100%; justify-content: center; }
.lead-form .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.popFormResult p { margin: 10px 0 0; font-size: .9rem; font-weight: 700; }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer { background: var(--ink-950); color: #A9A9B4; position: relative; overflow: hidden; }

.site-footer::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(237, 1, 5, .6), transparent);
    z-index: 2;
}

/* Soft depth glow behind the footer content */
.site-footer::after {
    content: "";
    position: absolute;
    top: -140px; left: 50%;
    width: min(760px, 90%); height: 420px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(237, 1, 5, .12), transparent 68%);
    pointer-events: none;
    z-index: 0;
}

.footer-main {
    padding: 84px 0 52px;
    display: grid;
    grid-template-columns: 1.35fr 0.85fr 1.55fr 1.15fr;
    gap: 48px;
    position: relative;
    z-index: 1;
}

/* Services column: two-up link grid so the full service list fits neatly */
.footer-col ul.f-links-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px 24px;
}

.footer-brand .f-logo { display: inline-flex; margin-bottom: 22px; }
.footer-brand .f-logo img { height: 64px; width: auto; }
.footer-brand p { color: #85858F; font-size: .94rem; margin-bottom: 26px; max-width: 320px; }

.f-social { display: flex; gap: 10px; }

.f-social a {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .04);
    color: #C9C9D2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.f-social a svg { width: 17px; height: 17px; }
.f-social a:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-4px) rotate(-6deg); }

.footer-col h4 {
    color: #fff;
    font-family: var(--font-display);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    margin-bottom: 24px;
    position: relative;
    padding-bottom: 12px;
}

.footer-col h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 2px; background: var(--accent); }

.footer-col ul { display: flex; flex-direction: column; gap: 13px; }

.footer-col ul.f-links a {
    color: #9A9AA4;
    font-size: .95rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: color .28s var(--ease), transform .28s var(--ease);
}
/* Attractive sliding chevron marker (replaces the old dot bullet) */
.footer-col ul.f-links a::before {
    content: "";
    width: 6px; height: 6px;
    flex: none;
    border-top: 2px solid #4C4C57;
    border-right: 2px solid #4C4C57;
    transform: rotate(45deg);
    transition: border-color .28s var(--ease), transform .28s var(--ease);
}
.footer-col ul.f-links a:hover { color: #fff; transform: translateX(6px); }
.footer-col ul.f-links a:hover::before { border-color: var(--accent); transform: rotate(45deg) scale(1.25); }

/* Contact items: icon tile + label + value, no bullets */
.footer-contact { gap: 16px !important; }

.footer-contact .fc-item { display: flex; gap: 13px; align-items: center; }

.footer-contact .fc-ic {
    width: 46px; height: 46px;
    flex: none;
    border-radius: 13px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s var(--ease);
}

.footer-contact .fc-ic svg { width: 18px; height: 18px; display: block; }
.footer-contact .fc-item:hover .fc-ic { background: var(--accent); border-color: var(--accent); color: #fff; transform: rotate(-8deg); }

.footer-contact .fc-body { min-width: 0; }
.footer-contact .fc-body small {
    display: block;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #6F6F7A;
    line-height: 1.4;
}

.footer-contact .fc-body strong { display: block; color: #E8E8EC; font-weight: 700; font-size: .93rem; line-height: 1.45; }
.footer-contact .fc-item:hover .fc-body strong { color: var(--peach); }

/* Review / ORM badge strip */
.footer-orm {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 20px 34px;
    flex-wrap: wrap;
    padding: 30px 0;
    margin-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.orm-eyebrow {
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #7E7E8A;
    white-space: nowrap;
}

.orm-badges {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.orm-badges li { display: inline-flex; }

.orm-badges a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 2px;
    opacity: .82;
    transition: opacity .3s var(--ease), transform .3s var(--ease);
}

.orm-badges a:hover {
    opacity: 1;
    transform: translateY(-3px);
}

.orm-badges img { height: 30px; width: auto; display: block; }

.footer-watermark {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2rem, 7.4vw, 6.4rem);
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    line-height: .8;
    letter-spacing: .02em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, .09);
    user-select: none;
    pointer-events: none;
    margin: 10px 0 -1.4vw;
}

/* Social + Trustpilot (footer brand column) */
.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}
.footer-social a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    color: #C6C6CE;
}
.footer-social a svg { width: 18px; height: 18px; display: block; }
.footer-social a:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transform: translateY(-3px);
}

.footer-trustpilot {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    color: #E8E8EC;
    font-size: .85rem;
    font-weight: 600;
}
.footer-trustpilot .ft-stars { display: inline-flex; gap: 2px; color: #00B67A; }
.footer-trustpilot .ft-stars svg { width: 16px; height: 16px; display: block; }
.footer-trustpilot .ft-label strong { color: #fff; }
.footer-trustpilot:hover { border-color: rgba(255, 255, 255, .25); transform: translateY(-2px); }

.footer-reg { display: block; margin-top: 4px; color: #6F6F7A; font-size: .8rem; }

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding: 24px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    font-size: .86rem;
    color: #6F6F7A;
    position: relative;
    z-index: 1;
}

.footer-bottom ul { display: flex; gap: 26px; flex-wrap: wrap; }
.footer-bottom ul a { color: #85858F; font-weight: 600; font-size: .86rem; }
.footer-bottom ul a:hover { color: var(--peach); }

.to-top {
    position: fixed;
    right: 26px; bottom: 26px;
    z-index: 180;
    width: 52px; height: 52px;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    background: var(--ink-950);
    color: var(--peach);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: all .35s var(--ease);
}

.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--accent); color: #fff; transform: translateY(-4px); }
.to-top svg { width: 19px; height: 19px; }

/* ==========================================================================
   INNER PAGES
   ========================================================================== */

.page-hero { position: relative; background: var(--ink-950); overflow: hidden; padding: 100px 0 92px; }

/* Default banner texture (used when a page has no dedicated image) */
.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('../images/hero-bg.webp') center / cover no-repeat;
    opacity: .16;
}

/* Per-page banner photo, black overlay above it gives the depth effect */
.page-hero .ph-img {
    position: absolute;
    top: -4%; 
    /* left: -4%; */
    width: 108%;
    height: 108%;
    object-fit: cover;
    opacity: .6;
    animation: phDrift 22s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes phDrift {
    from { transform: scale(1); }
    to { transform: scale(1.07); }
}

.page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg, rgba(6, 6, 8, .92) 12%, rgba(6, 6, 8, .62) 52%, rgba(6, 6, 8, .28) 100%),
        linear-gradient(180deg, rgba(6, 6, 8, .2), transparent 40%, rgba(6, 6, 8, .5));
}

.page-hero .container { position: relative; z-index: 2; }

.breadcrumbs {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #85858F;
    margin-bottom: 22px;
}

.breadcrumbs a { color: #C9C9D2; }
.breadcrumbs a:hover { color: var(--peach); }
.breadcrumbs .sep { color: var(--accent); }

.page-hero h1 {
    color: #fff;
    font-size: clamp(2.3rem, 4.4vw, 3.7rem);
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 18px;
    max-width: 860px;
    font-weight: 800;
}

.page-hero .ph-sub { color: #C6C6CE; font-size: 1.1rem; max-width: 640px; margin-bottom: 0; }
.page-hero .hero-ctas { margin: 32px 0 0; }

/* Feature tiles */
.feature-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.feature-tile {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 32px 28px;
    transition: all .4s var(--ease);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    display: block;
}

.feature-tile::after {
    content: "";
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 3px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s var(--ease);
}

.feature-tile:hover { transform: translateY(-7px); box-shadow: var(--shadow-md); border-color: rgba(237, 1, 5, .35); }
.feature-tile:hover::after { transform: scaleX(1); }

.feature-tile .ft-icon {
    width: 54px; height: 54px;
    border-radius: 15px;
    background: var(--peach-soft);
    color: var(--accent-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: all .35s var(--ease);
}

.feature-tile .ft-icon svg { width: 24px; height: 24px; }
.feature-tile:hover .ft-icon { background: var(--accent); color: #fff; transform: rotate(-8deg); }

.feature-tile h3 { font-family: var(--font-body); font-size: 1.06rem; font-weight: 800; margin-bottom: 8px; }
.feature-tile p { font-size: .9rem; margin: 0; color: var(--soft); }

/* Blog topic tag (blogs.php) */
.blog-tag {
    display: inline-block;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent-deep);
    background: var(--peach-soft);
    border-radius: 999px;
    padding: 4px 12px;
    margin-bottom: 12px;
}

/* 4-up variant (pillars) with a corner number */
.feature-tiles.tiles-4 { grid-template-columns: repeat(4, 1fr); }
.feature-tile .ft-num {
    position: absolute;
    top: 26px; right: 26px;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 800;
    color: #D8D8DE;
}

/* ==========================================================================
   COMPARISON (Others vs Northern Star Press)
   ========================================================================== */

.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1000px; margin: 0 auto; }

.compare-card {
    border-radius: var(--r-lg);
    padding: 40px 36px;
    border: 1px solid var(--line);
    background: #fff;
}

.compare-card h3 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: -.01em;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.compare-card .cmp-ic {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: none;
}
.compare-card .cmp-ic svg { width: 20px; height: 20px; }

.compare-list { display: flex; flex-direction: column; gap: 15px; }
.compare-list li { display: flex; gap: 12px; align-items: flex-start; font-size: .97rem; line-height: 1.5; font-weight: 500; }
.compare-list li svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }

.compare-others { background: var(--cream); }
.compare-others h3 { color: var(--soft); }
.compare-others h3 .cmp-ic { background: #E8E8EC; color: #9C9CA6; }
.compare-others .compare-list li { color: var(--soft); }
.compare-others .compare-list li svg { color: #B5B5BE; }

.compare-us { background: var(--ink); color: #fff; border-color: var(--ink); position: relative; overflow: hidden; }
.compare-us::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--accent); }
.compare-us h3 { color: #fff; }
.compare-us h3 .cmp-ic { background: var(--accent); color: #fff; }
.compare-us .compare-list li { color: #D9D9DE; }
.compare-us .compare-list li svg { color: #2FB673; }

/* ==========================================================================
   EXTRA HOME SECTIONS (journey 5-up, 5-step process, become band, chips)
   ========================================================================== */

/* "Your Story Matters" band — hero-bg texture over the navy background */
.story-band { position: relative; overflow: hidden; }
.story-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('../images/hero-bg.webp') center / cover no-repeat;
    opacity: .16;
    z-index: 0;
}
.story-band::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(700px 380px at 85% -20%, rgba(237, 1, 5, .22), transparent 60%),
        linear-gradient(180deg, rgba(0, 19, 46, .55), rgba(0, 19, 46, .82));
}
.story-band .container { position: relative; z-index: 1; }

/* 5-up feature grid (publishing journey) */
.feature-tiles.tiles-5 { grid-template-columns: repeat(5, 1fr); gap: 16px; }
.feature-tiles.tiles-5 .feature-tile { padding: 28px 22px; }
.feature-tiles.tiles-5 .ft-icon { width: 48px; height: 48px; margin-bottom: 16px; }
.feature-tiles.tiles-5 .ft-icon svg { width: 22px; height: 22px; }
.feature-tiles.tiles-5 .feature-tile h3 { font-size: .98rem; }
.feature-tiles.tiles-5 .feature-tile p { font-size: .85rem; }
.feature-tiles.tiles-5 .ft-num { top: 20px; right: 20px; font-size: .95rem; }

/* 5-step process row */
.process-grid.steps-5 { grid-template-columns: repeat(5, 1fr); gap: 24px; }

/* Become an Author band */
.become-band { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.become-band .become-text { flex: 1; min-width: 280px; }
.become-band .become-text p { color: #C6C6CE; }
.become-band .btn-c { flex: none; }

/* Service chips (Is Your Book Idea section) */
.service-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.s-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 9px 16px;
    font-size: .88rem;
    font-weight: 700;
    color: var(--ink);
}
.s-chip svg { width: 15px; height: 15px; color: #2FB673; flex: none; }

/* FAQ */
.faq-wrap { max-width: 840px; margin: 0 auto; }

/* Two-column FAQ (home page) — each column flows independently so an open
   item never pushes a gap into the other column */
.faq-wrap.faq-2col {
    max-width: 1060px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 22px;
    align-items: start;
}
.faq-2col .faq-col .faq-item:last-child { margin-bottom: 0; }

.faq-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    margin-bottom: 14px;
    overflow: hidden;
    transition: all .3s ease;
    box-shadow: var(--shadow-sm);
}

.faq-item[open] { border-color: rgba(237, 1, 5, .4); box-shadow: var(--shadow-md); }

.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 22px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    font-size: 1.04rem;
    font-weight: 800;
    color: var(--ink);
}

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

.faq-item summary .fq-toggle {
    width: 34px; height: 34px;
    flex: none;
    border-radius: 50%;
    background: var(--peach-soft);
    color: var(--accent-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s var(--ease);
}

.faq-item summary .fq-toggle svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.faq-item[open] summary .fq-toggle { background: var(--accent); color: #fff; }
.faq-item[open] summary .fq-toggle svg { transform: rotate(45deg); }

.faq-item .faq-body { padding: 0 26px 24px; }
.faq-item .faq-body p { margin: 0; font-size: .97rem; }

/* Contact page cards */
.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.contact-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    padding: 38px 30px;
    text-align: center;
    transition: all .4s var(--ease);
    display: block;
    position: relative;
    overflow: hidden;
}

.contact-card::after {
    content: "";
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 3px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s var(--ease);
}

.contact-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-md); border-color: rgba(237, 1, 5, .35); }
.contact-card:hover::after { transform: scaleX(1); }

.contact-card .cc-icon {
    width: 62px; height: 62px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--peach-soft);
    color: var(--accent-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .35s var(--ease);
}

.contact-card .cc-icon svg { width: 26px; height: 26px; }
.contact-card:hover .cc-icon { background: var(--accent); color: #fff; transform: rotate(-8deg); }

.contact-card h3 { font-family: var(--font-body); font-size: 1.08rem; font-weight: 800; margin-bottom: 6px; }
.contact-card p { font-size: .89rem; margin-bottom: 10px; color: var(--soft); }
.contact-card strong { color: var(--accent-deep); font-size: .98rem; font-weight: 800; }

.value-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* ---------- Portfolio page ---------- */

.genre-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }

.genre-chip {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 9px 20px;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text);
    transition: all .3s var(--ease);
}

.genre-chip:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-2px); }

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 28px 24px;
}

.portfolio-grid .book-cover { width: 100%; }

@media (max-width: 767px) {
    .portfolio-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 18px 14px; }
    .portfolio-grid .book-cover { width: 100%; }
}

/* ---------- Testimonials page ---------- */

.rating-summary {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: 36px 44px;
    display: flex;
    align-items: center;
    gap: 44px;
    margin-bottom: 44px;
    flex-wrap: wrap;
}

.rating-summary .rs-score { text-align: center; }
.rating-summary .rs-num { display: block; font-family: var(--font-display); font-size: 3.6rem; font-weight: 800; line-height: 1; color: var(--ink); }
.rating-summary .rs-stars { display: block; color: var(--accent); font-size: 1.1rem; letter-spacing: 4px; margin: 8px 0 4px; }
.rating-summary .rs-label { display: block; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }

.rating-summary .rs-divider { width: 1px; align-self: stretch; background: var(--line); }

.rating-summary .rs-facts { display: flex; gap: 44px; flex-wrap: wrap; }
.rating-summary .rs-fact strong { display: block; font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; color: var(--accent-deep); line-height: 1.15; }
.rating-summary .rs-fact span { font-size: .85rem; font-weight: 700; color: var(--soft); }

.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.tc-initial {
    width: 56px; height: 56px;
    flex: none;
    border-radius: 50%;
    background: var(--peach);
    color: var(--accent-deep);
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--accent);
}

@media (max-width: 1199px) {
    .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    .testimonials-grid { grid-template-columns: 1fr; }
    .rating-summary { padding: 28px 24px; gap: 24px; }
    .rating-summary .rs-divider { display: none; }
    .rating-summary .rs-facts { gap: 24px; }
}

/* Thank you */
.thanks-card {
    background: #fff;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    padding: 64px 48px;
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}

.thanks-card .tk-icon {
    width: 88px; height: 88px;
    margin: 0 auto 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2FB673, #1E7F4F);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 16px 36px rgba(30, 127, 79, .35);
    animation: popIn .6s var(--ease) both .15s;
}

@keyframes popIn { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.thanks-card .tk-icon svg { width: 38px; height: 38px; }

/* ---------- Legacy classes (policy pages) ---------- */

.innerBanner { position: relative; background: var(--ink-950); overflow: hidden; padding: 92px 0 84px; }

.innerBanner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('../images/hero-bg.webp') center / cover no-repeat;
    opacity: .14;
}

.innerBanner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(11, 11, 13, .95) 15%, rgba(11, 11, 13, .66) 100%);
}

.innerBanner .container { position: relative; z-index: 2; }
.innerBanner h1 { color: #fff; font-size: clamp(2.2rem, 4vw, 3.2rem); text-transform: uppercase; margin: 0; }

.aboutSection { padding: 88px 0; }

.term-text { color: var(--text); }
.term-text h2, .term-text h3, .term-text h4 { margin: 34px 0 14px; }
.term-text ul { list-style: disc; padding-left: 22px; margin-bottom: 16px; }
.term-text ul li { color: var(--text); margin-bottom: 8px; }
.term-text a { color: var(--accent-deep); font-weight: 700; }

/* ==========================================================================
   REVEALS
   ========================================================================== */

.reveal, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 0;
    transition: opacity .7s var(--ease), transform .7s var(--ease);
    will-change: opacity, transform;
}

.reveal { transform: translateY(36px); }
.reveal-left { transform: translateX(-46px); }
.reveal-right { transform: translateX(46px); }
.reveal-scale { transform: scale(.92); }

.in-view { opacity: 1; transform: none; }

[data-rd="1"] { transition-delay: .06s; }
[data-rd="2"] { transition-delay: .12s; }
[data-rd="3"] { transition-delay: .18s; }
[data-rd="4"] { transition-delay: .24s; }
[data-rd="5"] { transition-delay: .3s; }
[data-rd="6"] { transition-delay: .36s; }
[data-rd="7"] { transition-delay: .42s; }
[data-rd="8"] { transition-delay: .48s; }
[data-rd="9"] { transition-delay: .54s; }
[data-rd="10"] { transition-delay: .6s; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .reveal, .reveal-left, .reveal-right, .reveal-scale, [data-hero] { opacity: 1; transform: none; }
    .hl::before { transform: scaleX(1) skewX(-4deg); }
}

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

@media (max-width: 1440px) {
    .nav-phone { display: none; }
}

@media (max-width: 1280px) {
    .nav-menu { gap: 18px; }
    .nav-menu > li > a, .nav-menu > li > button.nav-link-btn { font-size: .92rem; letter-spacing: normal; }
}

/* Collapse to the burger + overlay menu below 1100px */
@media (max-width: 1099px) {
    .nav-toggle { display: inline-flex; }
    .nav-quote-btn { display: none; }
    .nav-menu { display: none; }
    .mega-panel, .mega-backdrop { display: none; }
}

@media (max-width: 1199px) {
    .hero-grid { gap: 48px; }
    .footer-main { grid-template-columns: 1.2fr 0.85fr 1.55fr; }
    .footer-contact-col { grid-column: 1 / -1; }
    .footer-contact-col .footer-contact { flex-direction: row; flex-wrap: wrap; }
    .footer-contact-col .footer-contact .fc-item { flex: 1 1 240px; }
    .feature-tiles, .feature-tiles.tiles-4 { grid-template-columns: repeat(2, 1fr); }
    .feature-tiles.tiles-5 { grid-template-columns: repeat(3, 1fr); }
    .pf-grid { grid-template-columns: repeat(3, 1fr); }
    .mega-grid { grid-template-columns: 270px 1fr; gap: 30px; }
}

@media (max-width: 991px) {
    .section { padding: 80px 0; }
    .section-sm { padding: 56px 0; }

    .topbar-note { display: none; }
    .topbar-inner { justify-content: center; }

    .nav-inner { height: 76px; }

    .hero-grid { grid-template-columns: 1fr; gap: 44px; padding: 70px 0 96px; }
    .hero-form-wrap { max-width: 540px; width: 100%; margin: 0 auto; }

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

    .contact-shell { grid-template-columns: 1fr; }
    .contact-info, .contact-form-wrap { padding: 44px 34px; }

    .process-grid, .process-grid.steps-5 { grid-template-columns: 1fr 1fr; gap: 38px 26px; }
    .process-step::before { display: none; }
    .feature-tiles.tiles-5 { grid-template-columns: repeat(2, 1fr); }

    .stats-band { grid-template-columns: 1fr 1fr; }

    .footer-main { grid-template-columns: 1fr 1fr; gap: 40px; padding: 64px 0 44px; }
    .footer-services { grid-column: 1 / -1; }

    .split-media { margin-bottom: 10px; }
    .split-media::before { display: none; }

    .cta-inner { padding: 76px 0; }
}

@media (max-width: 767px) {
    .section { padding: 64px 0; }

    .topbar { font-size: .78rem; }
    .topbar-links { gap: 14px; }

    .nav-inner { height: 70px; }
    .brand img { height: 44px; }
    .site-nav.is-stuck .brand img { height: 42px; }

    .hero-grid { padding: 56px 0 116px; }
    .hero-sub { font-size: 1.02rem; }
    .hero-ctas .btn-c { width: 100%; justify-content: space-between; }

    .display-title { font-size: clamp(2.15rem, 9vw, 2.7rem); }

    .hero-form-card { padding: 28px 22px 24px; }

    /* ---- Lengthy card sections turn into swipe sliders on mobile ---- */
    .services-grid,
    .feature-tiles, .feature-tiles.tiles-4, .feature-tiles.tiles-5,
    .process-grid, .process-grid.steps-5 {
        display: flex;
        grid-template-columns: none;
        flex-wrap: nowrap;
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 0;
        -webkit-overflow-scrolling: touch;
        padding: 8px 0 20px;
        margin-top: 30px;
        scrollbar-width: none;
    }
    .services-grid::-webkit-scrollbar,
    .feature-tiles::-webkit-scrollbar,
    .process-grid::-webkit-scrollbar { width: 0; height: 0; display: none; }

    .services-grid > *,
    .feature-tiles > *,
    .process-grid > * {
        flex: 0 0 82%;
        scroll-snap-align: start;
        opacity: 1 !important;
        transform: none !important;
    }
    .service-card { padding: 28px 24px 24px; }
    .compare-grid { grid-template-columns: 1fr; gap: 18px; }
    .compare-card { padding: 30px 24px; }
    .become-band { flex-direction: column; align-items: flex-start; }
    .pf-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
    .faq-wrap.faq-2col { grid-template-columns: 1fr; gap: 0; }
    .faq-2col .faq-col:first-child .faq-item:last-child { margin-bottom: 14px; }
    .contact-cards { grid-template-columns: 1fr; }
    .value-tiles { grid-template-columns: 1fr; }
    .check-grid { grid-template-columns: 1fr; }

    .sm-card { left: 14px; bottom: 18px; padding: 14px 18px; }
    .sm-card .smc-num { font-size: 1.7rem; }

    .book-cover { width: 132px; }

    .cta-inner { flex-direction: column; align-items: flex-start; }

    .footer-main { grid-template-columns: 1fr; gap: 38px; }
    .footer-orm { flex-direction: column; align-items: flex-start; gap: 18px; text-align: left; }
    .footer-bottom { flex-direction: column; text-align: center; justify-content: center; }

    .to-top { right: 16px; bottom: 16px; width: 46px; height: 46px; }
    .thanks-card { padding: 44px 26px; }
    .lead-form .form-grid-2 { grid-template-columns: 1fr; gap: 0; }
    .testimonial-swiper { padding-bottom: 60px; }

    .mm-sub { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    /* Slightly wider slides on very small screens */
    .services-grid > *,
    .feature-tiles > *,
    .process-grid > * { flex-basis: 85%; }
    .stats-band { grid-template-columns: 1fr 1fr; gap: 14px; }
    .stat-num { font-size: 2.2rem; }
    .topbar-links a span.hide-xs { display: none; }
    .footer-col ul.f-links-2col { grid-template-columns: 1fr; }
    .orm-badges { gap: 22px; }
    .orm-badges img { height: 24px; }
    .hv-chip { padding: 10px 14px; }
    .hv-chip .num { font-size: 1.25rem; }
}

/* ==========================================================================
   LEAD POPUP  (opened by every .openPopup CTA)
   ========================================================================== */

body.popup-open { overflow: hidden; }

.lead-popup {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--ease), visibility .3s var(--ease);
}
.lead-popup.is-open { opacity: 1; visibility: visible; }

.lp-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 12, 30, .62);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    cursor: pointer;
}

.lp-dialog {
    position: relative;
    width: 100%;
    max-width: 900px;
    max-height: calc(100vh - 48px);
    overflow: hidden;
    background: var(--white);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    transform: translateY(18px) scale(.98);
    opacity: 0;
    transition: transform .4s var(--ease), opacity .4s var(--ease);
}
.lead-popup.is-open .lp-dialog { transform: none; opacity: 1; }

.lp-close {
    position: absolute;
    top: 14px; right: 14px;
    z-index: 3;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    display: grid;
    place-items: center;
    transition: all .3s var(--ease);
}
.lp-close svg { width: 18px; height: 18px; }
.lp-close:hover { background: var(--accent); transform: rotate(90deg); }

.lp-grid {
    display: grid;
    grid-template-columns: .82fr 1fr;
    max-height: calc(100vh - 48px);
}

/* Left rail */
.lp-aside {
    background: var(--ink-950);
    color: #fff;
    padding: 44px 36px;
    position: relative;
    overflow: hidden;
}
.lp-aside::after {
    content: "";
    position: absolute;
    right: -60px; bottom: -60px;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(237, 1, 5, .35), transparent 70%);
    pointer-events: none;
}
.lp-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--peach);
    margin-bottom: 18px;
}
.lp-kicker svg { width: 15px; height: 15px; color: var(--accent); }
.lp-aside-title {
    color: #fff;
    font-size: 1.75rem;
    line-height: 1.08;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.lp-aside-title .lp-hl { color: var(--accent); }
.lp-aside-sub { color: rgba(255, 255, 255, .78); font-size: .94rem; margin-bottom: 22px; }

.lp-points { display: grid; gap: 12px; margin-bottom: 26px; }
.lp-points li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .92rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .9);
}
.lp-points svg {
    width: 16px; height: 16px;
    flex: none;
    color: #fff;
    background: var(--accent);
    border-radius: 50%;
    padding: 4px;
    box-sizing: content-box;
}
.lp-call {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #fff !important;
}
.lp-call-ic {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    display: grid;
    place-items: center;
    flex: none;
}
.lp-call-ic svg { width: 18px; height: 18px; }
.lp-call small { display: block; font-size: .72rem; color: rgba(255, 255, 255, .6); text-transform: uppercase; letter-spacing: .08em; }
.lp-call strong { font-size: 1.05rem; }
.lp-call:hover .lp-call-ic { background: var(--accent); }

/* Right: form */
.lp-form-wrap { padding: 40px 40px 36px; overflow-y: auto; }
.lp-form-title { font-size: 1.4rem; text-transform: uppercase; margin-bottom: 6px; }
.lp-form-sub { font-size: .9rem; color: var(--soft); margin-bottom: 22px; }
.lead-popup .lead-form .field { margin-bottom: 14px; }
.lead-popup .lead-form textarea { min-height: 84px; }

/* Responsive */
@media (max-width: 720px) {
    .lp-grid { grid-template-columns: 1fr; }
    .lp-aside { display: none; }
    .lp-form-wrap { padding: 46px 24px 28px; }
    .lp-close { background: rgba(0, 12, 30, .12); color: var(--ink); }
    .lp-close:hover { background: var(--accent); color: #fff; }
}
@media (max-width: 480px) {
    .lead-popup { padding: 0; }
    .lp-dialog { max-width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; }
    .lp-grid { max-height: 100vh; }
    .lp-form-wrap { padding-top: 54px; }
    .lead-popup .lead-form .form-grid-2 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   CUSTOM TAWK.TO LAUNCHER (native bubble hidden)
   ========================================================================== */

.chat-fab {
    position: fixed;
    right: 26px; bottom: 26px;
    z-index: 190;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 56px;
    padding: 0 22px 0 16px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    background: var(--accent);
    color: #fff;
    font-family: var(--font-body);
    font-size: .9rem;
    font-weight: 800;
    letter-spacing: .03em;
    box-shadow: 0 14px 32px rgba(237, 1, 5, .38);
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(.9);
    transition: opacity .35s var(--ease), transform .35s var(--ease),
                visibility .35s var(--ease), background .3s var(--ease);
}
/* Only reveal once the Tawk API is actually available */
body.tawk-ready .chat-fab { opacity: 1; visibility: visible; transform: none; }
.chat-fab:hover { background: var(--ink-950); transform: translateY(-3px); box-shadow: 0 18px 40px rgba(11, 11, 13, .32); }

.chat-fab-ic {
    width: 28px; height: 28px;
    display: grid;
    place-items: center;
    flex: none;
}
.chat-fab-ic svg { width: 24px; height: 24px; }
.chat-fab-close { display: none; }
.chat-fab-label { white-space: nowrap; }

.chat-fab-dot {
    position: absolute;
    top: 10px; left: 34px;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: #2ecc71;
    border: 2px solid var(--accent);
    box-shadow: 0 0 0 rgba(46, 204, 113, .6);
    animation: chatPulse 2.2s var(--ease) infinite;
}
@keyframes chatPulse {
    0%   { box-shadow: 0 0 0 0 rgba(46, 204, 113, .55); }
    70%  { box-shadow: 0 0 0 8px rgba(46, 204, 113, 0); }
    100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}

/* Hide our launcher while the Tawk chat window is open (it has its own controls) */
body.chat-open .chat-fab { opacity: 0; visibility: hidden; transform: translateY(16px) scale(.9); }

/* Lift the back-to-top button so it never sits under the chat launcher */
.to-top { bottom: 94px; }

@media (max-width: 600px) {
    .chat-fab { padding: 0; width: 56px; justify-content: center; }
    .chat-fab-label { display: none; }
    .chat-fab-ic svg { width: 26px; height: 26px; }
    .chat-fab-dot { left: auto; right: 10px; top: 8px; }
    .to-top { width: 46px; height: 46px; bottom: 90px; right: 30px; }
}
@media (prefers-reduced-motion: reduce) {
    .chat-fab-dot { animation: none; }
}

/* ==========================================================================
   BLOG CARDS + ARTICLE
   ========================================================================== */
.blog-grid { display: grid; gap: 30px; }
.blog-grid-3 { grid-template-columns: repeat(3, 1fr); }
.blog-grid-2 { grid-template-columns: repeat(2, 1fr); }

.blog-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.blog-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }

.bc-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--zinc);
}
.bc-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .7s var(--ease);
}
.blog-card:hover .bc-media img { transform: scale(1.07); }

.bc-cat {
    position: absolute;
    top: 14px; left: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    box-shadow: 0 8px 20px rgba(237, 1, 5, .34);
}

.bc-body { display: flex; flex-direction: column; flex: 1; padding: 24px 24px 22px; }

.bc-meta {
    display: flex; align-items: center; gap: 11px;
    color: var(--soft);
    font-size: .8rem; font-weight: 600;
    margin-bottom: 13px;
}
.bc-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.bc-meta svg { width: 15px; height: 15px; color: var(--accent); }
.bc-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--line); }

.bc-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; line-height: 1.28; margin-bottom: 12px; }
.bc-title a { color: var(--ink); transition: color .25s var(--ease); }
.blog-card:hover .bc-title a, .bc-title a:hover { color: var(--accent-deep); }

.bc-excerpt {
    color: var(--text);
    font-size: .95rem;
    line-height: 1.62;
    margin: 0 0 22px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bc-foot {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.bc-author { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.bc-author img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid var(--zinc); }
.bc-author-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.bc-author-txt strong { font-size: .86rem; color: var(--ink); font-weight: 700; }
.bc-author-txt small { font-size: .74rem; color: var(--soft); }

.bc-link {
    flex: none;
    width: 42px; height: 42px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--zinc);
    color: var(--ink);
    transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.bc-link svg { width: 18px; height: 18px; }
.blog-card:hover .bc-link, .bc-link:hover { background: var(--accent); color: #fff; transform: translateX(3px); }

/* Single article hero meta */
.blog-hero-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 4px; }
.bhm-author { display: inline-flex; align-items: center; gap: 12px; }
.bhm-author img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, .28); }
.bhm-author > span { display: flex; flex-direction: column; line-height: 1.3; }
.bhm-author strong { color: #fff; font-size: .95rem; font-weight: 700; }
.bhm-author small { color: #C9C9D2; font-size: .82rem; }
.bhm-sep { width: 1px; height: 30px; background: rgba(255, 255, 255, .2); }
.bhm-item { display: inline-flex; align-items: center; gap: 7px; color: #C9C9D2; font-size: .88rem; font-weight: 600; }
.bhm-item svg { width: 16px; height: 16px; color: var(--accent); }
.bc-cat-hero { position: static; display: inline-flex; margin-bottom: 16px; }

/* Article layout: main column + sticky TOC sidebar */
.article-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 56px;
    align-items: start;
    max-width: 1140px;
    margin: 0 auto;
}
.article-main { min-width: 0; }

/* Table of contents */
.article-aside { position: relative; }
.toc {
    position: sticky;
    top: 104px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: #fff;
    box-shadow: var(--shadow-sm);
    padding: 22px 22px 24px;
}
.toc-title {
    display: flex; align-items: center; gap: 9px;
    font-family: var(--font-display);
    font-size: .82rem; font-weight: 800;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink);
    padding-bottom: 14px; margin-bottom: 6px;
    border-bottom: 1px solid var(--line);
}
.toc-title svg { width: 16px; height: 16px; color: var(--accent); }
.toc-nav { display: flex; flex-direction: column; }
.toc-link {
    position: relative;
    display: block;
    padding: 8px 0 8px 16px;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--soft);
    border-left: 2px solid var(--line);
    transition: color .25s var(--ease), border-color .25s var(--ease), padding .25s var(--ease);
}
.toc-link.toc-h3 { padding-left: 30px; font-size: .85rem; font-weight: 500; }
.toc-link:hover { color: var(--ink); border-color: var(--soft); }
.toc-link.active { color: var(--accent-deep); border-color: var(--accent); font-weight: 700; }

.toc-cta {
    margin-top: 20px;
    padding: 18px;
    border-radius: var(--r-md);
    background: var(--peach-soft);
    border: 1px solid var(--line);
}
.toc-cta strong { display: block; font-family: var(--font-display); font-size: 1.02rem; color: var(--ink); margin-bottom: 6px; }
.toc-cta p { margin: 0 0 14px; font-size: .86rem; color: var(--text); line-height: 1.5; }
.toc-cta .btn-c { width: 100%; justify-content: center; font-size: .86rem; padding: 11px 16px; }

/* Article body */
.article-body { font-size: 1.08rem; line-height: 1.8; color: var(--text); }
.article-body h2, .article-body h3, .article-faq { scroll-margin-top: 100px; }
.article-body > *:first-child { margin-top: 0; }
.article-body h2 { font-family: var(--font-display); font-size: 1.7rem; color: var(--ink); font-weight: 700; margin: 42px 0 14px; }
.article-body h3 { font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); font-weight: 700; margin: 32px 0 12px; }
.article-body p { margin: 0 0 20px; }
.article-body ul { margin: 0 0 22px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.article-body ul li { position: relative; padding-left: 30px; }
.article-body ul li::before {
    content: ""; position: absolute; left: 4px; top: 9px;
    width: 8px; height: 8px;
    border-top: 2px solid var(--accent); border-right: 2px solid var(--accent);
    transform: rotate(45deg);
}
.article-body strong { color: var(--ink); font-weight: 700; }

/* Article tables */
.table-wrap { overflow-x: auto; margin: 6px 0 28px; -webkit-overflow-scrolling: touch; }
.article-body table {
    width: 100%;
    min-width: 480px;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    font-size: .95rem;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
}
.article-body th, .article-body td { padding: 13px 18px; text-align: left; line-height: 1.5; }
.article-body thead th {
    background: var(--ink);
    color: #fff;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: .9rem;
}
.article-body tbody td { border-top: 1px solid var(--line); color: var(--text); vertical-align: top; }
.article-body tbody tr:nth-child(even) td { background: var(--cream); }
.article-body tbody td:first-child { font-weight: 700; color: var(--ink); }

/* Article FAQ */
.article-faq { margin-top: 50px; }
.afaq-title { font-family: var(--font-display); font-size: 1.7rem; color: var(--ink); font-weight: 700; margin: 0 0 22px; }
.afaq-list { display: flex; flex-direction: column; gap: 14px; }
.afaq-list .faq-item { margin-bottom: 0; }

.article-cta {
    margin-top: 46px;
    padding: 30px 32px;
    border-radius: var(--r-lg);
    background: var(--peach-soft);
    border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.article-cta h3 { font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); margin: 0 0 6px; }
.article-cta p { margin: 0; font-size: .96rem; color: var(--text); max-width: 460px; }

@media (max-width: 991px) {
    .blog-grid-3 { grid-template-columns: repeat(2, 1fr); }
    /* TOC drops above the article and stops sticking */
    .article-shell { grid-template-columns: 1fr; gap: 0; }
    .article-aside { order: -1; margin-bottom: 34px; }
    .toc { position: static; }
    .toc-cta { display: none; }
}
@media (max-width: 767px) {
    .blog-grid-3, .blog-grid-2 { grid-template-columns: 1fr; }
    .article-cta { flex-direction: column; align-items: flex-start; }
    .article-cta .btn-c { width: 100%; justify-content: space-between; }
    .bhm-sep { display: none; }
    .afaq-title, .article-body h2 { font-size: 1.45rem; }
}