/* ==========================================================================
   Sadigisoft UK — SEO agency site
   Navy + gold corporate palette, carried over from the previous corporate
   theme so the brand still reads as the same company.
   All interactive targets are >=44px to meet the tap-target guideline the
   audit flagged.
   ========================================================================== */

:root {
    --navy-900: #071426;
    --navy-800: #0b1f3a;
    --navy-700: #122c4e;
    --navy-600: #1b3d68;

    --gold-600: #c99a2e;
    --gold-500: #e8b53a;
    --gold-300: #f3d488;
    --gold-50: #fdf8ec;

    --ink: #10202f;
    --body: #46586b;
    --muted: #6b7c8f;
    --line: #dfe6ee;
    --bg: #ffffff;
    --bg-alt: #f5f8fb;

    --radius: 10px;
    --radius-lg: 16px;
    --shadow-sm: 0 2px 6px rgba(7, 20, 38, .06);
    --shadow-md: 0 12px 28px rgba(7, 20, 38, .10);

    --wrap: 1180px;
    --wrap-narrow: 780px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
    color: var(--body);
    background: var(--bg);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: 'Montserrat', system-ui, sans-serif;
    color: var(--ink);
    line-height: 1.25;
    margin: 0 0 .6em;
}

h1 { font-size: clamp(2rem, 4.6vw, 3.25rem); font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 700; letter-spacing: -.01em; }
h3 { font-size: 1.12rem; font-weight: 600; }

p { margin: 0 0 1rem; }
a { color: var(--navy-600); }
img { max-width: 100%; height: auto; }

.container { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: var(--wrap-narrow); }
.center { text-align: center; }
.mt-xl { margin-top: 3rem; }

/* Focus visibility — keyboard users could not previously see where they were. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--gold-500);
    outline-offset: 2px;
    border-radius: 4px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--gold-500);
    color: var(--navy-900);
    padding: 12px 20px;
    font-weight: 700;
    z-index: 999;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.topbar { background: var(--navy-900); color: #b9c6d6; font-size: .82rem; }
.topbar-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; min-height: 44px; flex-wrap: wrap;
}
.topbar-link {
    color: #dbe4ee; text-decoration: none;
    display: inline-flex; align-items: center; gap: 7px;
    min-height: 44px;
}
.topbar-link:hover { color: var(--gold-300); }
.topbar-link .material-icons { font-size: 16px; }
.topbar-note { color: #8fa2b6; }

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.nav {
    background: #fff; border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 100;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 16px; }

.logo {
    /* inline-flex gives the 44px tap target but collapses the whitespace
       between the bare text node and the <span>, rendering "SadigisoftUK".
       gap restores the space. Size is clamped because "Sadigisoft Technologies
       UK" is long enough to crowd the nav on small screens. */
    display: inline-flex; align-items: center; gap: .28em; min-height: 44px;
    font-family: 'Montserrat', sans-serif; font-weight: 700;
    font-size: clamp(1rem, 2.2vw, 1.25rem); white-space: nowrap;
    color: var(--navy-800); text-decoration: none; letter-spacing: -.01em;
}
.logo span { color: var(--gold-600); }

.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
    display: inline-flex; align-items: center;
    padding: 10px 14px; min-height: 44px;
    color: var(--ink); text-decoration: none; font-weight: 600; font-size: .93rem;
    border-radius: var(--radius);
}
.nav-links a:hover { background: var(--bg-alt); color: var(--navy-600); }

.btn-nav {
    background: var(--navy-800); color: #fff !important; margin-left: 8px;
}
.btn-nav:hover { background: var(--navy-600) !important; }

.nav-toggle {
    display: none;
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    background: none; border: 1px solid var(--line); border-radius: var(--radius);
    cursor: pointer; color: var(--ink);
}

/* ── Services mega-menu ───────────────────────────────────────────────────── */
.has-mega { position: static; }        /* panel spans the nav, not the <li> */

.mega-toggle {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 10px 14px; min-height: 44px;
    background: none; border: 0; border-radius: var(--radius);
    font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: .93rem;
    color: var(--ink); cursor: pointer;
}
.mega-toggle:hover { background: var(--bg-alt); color: var(--navy-600); }
.mega-caret { font-size: 18px !important; transition: transform .2s ease; }
.has-mega.is-open .mega-caret { transform: rotate(180deg); }

.mega {
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-top: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(7, 20, 38, .13);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 90;
}
/* Hover for pointers; .is-open covers click, touch and keyboard. */
@media (hover: hover) and (min-width: 721px) {
    .has-mega:hover .mega { opacity: 1; visibility: visible; transform: translateY(0); }
}
.has-mega.is-open .mega { opacity: 1; visibility: visible; transform: translateY(0); }

.mega-inner { padding: 30px 24px 22px; }
.mega-cols {
    display: grid; gap: 30px;
    grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
}
.mega-head {
    display: flex; align-items: center; gap: 7px;
    font-family: 'Montserrat', sans-serif; font-weight: 700;
    font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--navy-800); margin: 0 0 .8rem;
    padding-bottom: .6rem; border-bottom: 2px solid var(--gold-500);
}
.mega-head .material-icons { font-size: 17px; color: var(--gold-600); }

.mega-cols ul { list-style: none; margin: 0; padding: 0; }
.mega-cols a {
    display: block; padding: 8px 10px; margin: 0 -10px;
    border-radius: var(--radius); text-decoration: none;
}
.mega-cols a:hover { background: var(--bg-alt); }
.mega-link-title {
    display: block; font-weight: 600; font-size: .92rem; color: var(--ink);
}
.mega-cols a:hover .mega-link-title { color: var(--navy-600); }
.mega-link-sub {
    display: block; font-size: .79rem; color: var(--muted);
    line-height: 1.45; margin-top: 1px;
    /* Two lines maximum — the menu is for scanning, not reading. */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

.mega-more .mega-link-title { color: var(--gold-600); font-weight: 700; }

.mega-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line);
}
.mega-foot a {
    font-weight: 600; font-size: .9rem; color: var(--navy-600); text-decoration: none;
    display: inline-flex; align-items: center; min-height: 44px;
}
.mega-foot a:hover { color: var(--gold-600); }
.mega-foot-cta {
    background: var(--gold-500); color: var(--navy-900) !important;
    padding: 0 20px; border-radius: var(--radius);
}
.mega-foot-cta:hover { background: var(--gold-600); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; padding: 13px 26px;
    border: 1px solid transparent; border-radius: var(--radius);
    font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: .95rem;
    text-decoration: none; cursor: pointer;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
.btn-primary { background: var(--gold-500); color: var(--navy-900); }
.btn-primary:hover { background: var(--gold-600); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn-ghost:hover { background: rgba(255, 255, 255, .1); }
.btn-lg { min-height: 54px; padding: 15px 34px; font-size: 1rem; }
.btn-block { width: 100%; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
    background:
        linear-gradient(150deg, rgba(7, 20, 38, .93), rgba(18, 44, 78, .88)),
        url('/static/images/portfolio/corporate-business-office.jpg') center/cover no-repeat;
    color: #fff;
    padding: 96px 0 104px;
}
.hero-inner { max-width: 860px; }
.hero h1 { color: #fff; margin-bottom: .35em; }
.hero h1 span { color: var(--gold-500); }
.hero-sub { font-size: 1.13rem; color: #cfdbe8; max-width: 640px; margin-bottom: 2rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 1.6rem; }
.hero-foot { font-size: .87rem; color: #93a7bd; margin: 0; }

.eyebrow {
    font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--gold-600); margin-bottom: .7rem;
}
.hero .eyebrow { color: var(--gold-300); }
.eyebrow.center { text-align: center; }

/* ── Sections ────────────────────────────────────────────────────────────── */
.section { padding: 82px 0; }
.section-alt { background: var(--bg-alt); }
.section-dark { background: var(--navy-800); color: #c9d6e4; }
.section-dark h2, .section-dark h3 { color: #fff; }

.section-title { text-align: center; margin-bottom: .6rem; }
.section-lead {
    text-align: center; max-width: 640px; margin: 0 auto 3rem;
    color: var(--muted); font-size: 1.03rem;
}
.section-dark .section-lead { color: #9db0c4; }

.page-head { background: var(--navy-800); color: #c9d6e4; padding: 60px 0 66px; }
.page-head h1 { color: #fff; }
.page-head .btn { margin-top: .6rem; }
.page-lead { font-size: 1.1rem; color: #cfdbe8; max-width: 680px; }

.crumbs { font-size: .84rem; color: #8fa2b6; margin-bottom: 1.4rem; }
.crumbs a { color: var(--gold-300); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span { margin: 0 7px; }
.crumbs [aria-current] { color: #cfdbe8; margin: 0; }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card-grid {
    display: grid; gap: 22px;
    grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
}
.card {
    position: relative;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 30px 26px; box-shadow: var(--shadow-sm);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
/* Stretched link: the heading anchor covers the whole card, so the tap target
   is the card rather than one line of text. */
.card h3 a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--gold-300); }
.card-icon {
    color: var(--gold-600); font-size: 30px !important;
    background: var(--gold-50); border-radius: var(--radius);
    padding: 9px; margin-bottom: 14px; display: inline-block;
}
.card h3 { margin-bottom: .45em; }
.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a:hover { color: var(--navy-600); }
.card p { font-size: .94rem; margin-bottom: .8rem; }
.card-more { font-size: .86rem; font-weight: 600; color: var(--gold-600); }

/* ── Process ─────────────────────────────────────────────────────────────── */
.process {
    display: grid; gap: 22px; list-style: none; margin: 0; padding: 0;
    grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
    counter-reset: step;
}
.process li {
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 26px 22px;
}
.section-alt .process li { background: #fff; }
.process-num {
    display: block; font-family: 'Montserrat', sans-serif; font-weight: 700;
    font-size: 1.55rem; color: var(--gold-500); margin-bottom: .4rem;
}
.process h3 { margin-bottom: .35em; }
.process p { font-size: .92rem; margin: 0; }

/* ── Why grid ────────────────────────────────────────────────────────────── */
.why-grid { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.why-item { border-left: 3px solid var(--gold-500); padding-left: 20px; }
.why-item h3 { margin-bottom: .4em; }
.why-item p { font-size: .95rem; margin: 0; }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq { max-width: 780px; margin: 0 auto; }
.faq details {
    border-bottom: 1px solid rgba(255, 255, 255, .13);
}
.faq-light details { border-bottom-color: var(--line); }
.faq summary {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 19px 0; min-height: 44px;
    font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 1.02rem;
    color: #fff; cursor: pointer; list-style: none;
}
.faq-light summary { color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq-chevron { color: var(--gold-500); transition: transform .2s ease; flex-shrink: 0; }
.faq details[open] .faq-chevron { transform: rotate(180deg); }
.faq p { padding: 0 0 20px; margin: 0; max-width: 68ch; }
.faq-light p { color: var(--body); }

/* ── Service list ────────────────────────────────────────────────────────── */
.service-list { display: grid; gap: 20px; }
.service-row {
    position: relative;
    display: flex; gap: 24px; align-items: flex-start;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 30px 28px; box-shadow: var(--shadow-sm);
}
/* Same stretched-link treatment; the trailing text link sits above it so both
   remain independently clickable. */
.service-row-body h2 a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.service-row .text-link { position: relative; z-index: 1; }
.service-row-icon {
    flex-shrink: 0; width: 54px; height: 54px; border-radius: var(--radius);
    background: var(--gold-50); color: var(--gold-600);
    display: flex; align-items: center; justify-content: center;
}
.service-row-icon .material-icons { font-size: 27px; }
.service-row-body h2 { font-size: 1.28rem; margin-bottom: .4em; }
.service-row-body h2 a { color: var(--ink); text-decoration: none; }
.service-row-body h2 a:hover { color: var(--navy-600); }
.service-row-body p { font-size: .95rem; }

.text-link { font-weight: 600; color: var(--gold-600); text-decoration: none; font-size: .92rem; }
.text-link:hover { text-decoration: underline; }

/* ── Tick lists ──────────────────────────────────────────────────────────── */
.tick-list { list-style: none; margin: 0 0 1.1rem; padding: 0; }
.tick-list li { position: relative; padding-left: 27px; margin-bottom: .5rem; font-size: .94rem; }
.tick-list li::before {
    content: '✓'; position: absolute; left: 0; top: -1px;
    color: var(--gold-600); font-weight: 700;
}
.tick-list-lg li { font-size: 1rem; margin-bottom: .75rem; }
.tick-list-cross li::before { content: '✕'; color: #b03636; }

/* ── Split layout ────────────────────────────────────────────────────────── */
.split { display: grid; gap: 46px; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); align-items: start; }
.split-main h2 { margin-top: 0; }
.split-side { display: grid; gap: 20px; position: sticky; top: 92px; }

.side-card { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; }
.side-card-cta { background: var(--navy-800); color: #c9d6e4; border-color: var(--navy-800); }
.side-card-cta .side-title { color: #fff; }
.side-card-cta p { font-size: .92rem; }
.side-title { font-size: 1.02rem; margin-bottom: .9em; }

.side-links { list-style: none; margin: 0; padding: 0; }
.side-links a {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 10px; min-height: 44px; margin: 0 -10px;
    color: var(--ink); text-decoration: none; font-size: .93rem; font-weight: 600;
    border-radius: var(--radius);
}
.side-links a:hover { background: #fff; color: var(--navy-600); }
.side-links .material-icons { font-size: 19px; color: var(--gold-600); }

.side-contact { display: flex; align-items: center; gap: 11px; font-size: .93rem; margin-bottom: .7rem; }
.side-contact .material-icons { font-size: 19px; color: var(--gold-600); }
.side-note { font-size: .84rem; color: var(--muted); margin: .8rem 0 0; }
.side-steps { margin: 0; padding-left: 1.15rem; font-size: .92rem; }
.side-steps li { margin-bottom: .45rem; }

/* ── Prose ───────────────────────────────────────────────────────────────── */
.prose h2 { margin-top: 2.4rem; }
.prose h2:first-child { margin-top: 0; }
.prose p { font-size: 1.02rem; max-width: 68ch; }

/* Inline links in article bodies. /insights is the first content here to use
   them — the service pages deliberately carry none. Navy rather than gold
   because --gold-600 on white is roughly 2.5:1, under the 4.5:1 minimum for
   body text, and we sell accessibility audits. The underline carries the
   signal so it never depends on colour alone. */
.prose a { color: var(--navy-600); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--gold-600); text-decoration-thickness: 2px; }

/* ── Post meta (/insights) ───────────────────────────────────────────────── */
.post-meta { font-size: .86rem; color: var(--muted); margin: .35rem 0 .6rem; }
.page-head .post-meta { color: var(--gold-300); }

/* Index/related thumbnail. Sits as the first flex child of .service-row, so it
   inherits that row's existing switch to a column at the mobile breakpoint —
   no separate layout, just a width override down there. */
.post-thumb {
    flex-shrink: 0; display: block; width: 240px; line-height: 0;
    border-radius: var(--radius); overflow: hidden; background: var(--gold-50);
}
.post-thumb img { width: 100%; height: auto; display: block; }

/* Article hero. aspect-ratio plus width/height on the tag means the box is
   reserved before the file lands, so nothing below it moves. */
.post-hero {
    width: 100%; height: auto; display: block; aspect-ratio: 16 / 9;
    object-fit: cover; border-radius: var(--radius-lg);
}
.post-hero-wrap { padding-bottom: 0; }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form { max-width: 620px; }
.field { margin-bottom: 1.15rem; }
.field label {
    display: block; margin-bottom: .4rem;
    font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: .9rem; color: var(--ink);
}
.field input, .field textarea {
    width: 100%; padding: 13px 15px; min-height: 48px;
    border: 1px solid var(--line); border-radius: var(--radius);
    font-family: inherit; font-size: .96rem; color: var(--ink); background: #fff;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--gold-500); }
.req { color: #b03636; }
.optional { color: var(--muted); font-weight: 400; }
.form-note { font-size: .84rem; color: var(--muted); margin-top: 1rem; }

/* Honeypot — off-screen rather than display:none, which some bots detect. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.flash {
    padding: 14px 18px; border-radius: var(--radius); margin-bottom: 1.4rem;
    font-size: .94rem; border: 1px solid;
}
.flash-success { background: #edf9f0; border-color: #b6e0c2; color: #1d6b35; }
.flash-error { background: #fdeeee; border-color: #f0c2c2; color: #97302f; }

/* ── CTA ─────────────────────────────────────────────────────────────────── */
.cta { background: var(--navy-900); color: #c9d6e4; padding: 74px 0; }
.cta h2 { color: #fff; }
.cta p { max-width: 560px; margin: 0 auto 1.8rem; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.footer { background: var(--navy-900); color: #93a7bd; font-size: .92rem; }

/* ── Footer CTA strip ─────────────────────────────────────────────────────
   Gold band separating the page from the link columns. The last clear action
   before the reader leaves. */
.footer-cta { background: var(--gold-500); color: var(--navy-900); }
.footer-cta-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 28px; flex-wrap: wrap; padding: 30px 24px;
}
.footer-cta-title {
    font-family: 'Montserrat', sans-serif; font-weight: 700;
    font-size: 1.3rem; color: var(--navy-900); margin: 0 0 .25rem;
}
.footer-cta-sub { margin: 0; font-size: .95rem; color: rgba(7, 20, 38, .78); max-width: 52ch; }
/* Navy button on the gold band — the standard gold button would vanish. */
.footer-cta .btn-primary { background: var(--navy-900); color: #fff; flex-shrink: 0; }
.footer-cta .btn-primary:hover { background: var(--navy-700); }

/* ── Link columns ─────────────────────────────────────────────────────────── */
.footer-grid {
    display: grid; gap: 40px; padding: 60px 24px 46px;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
}
.footer-logo {
    font-family: 'Montserrat', sans-serif; font-weight: 700;
    font-size: 1.15rem; color: #fff; margin-bottom: .7rem; line-height: 1.35;
}
.footer-logo span { color: var(--gold-500); }
.footer-note { font-size: .86rem; max-width: 40ch; line-height: 1.65; }
.footer-badge {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 1rem; padding: 7px 13px;
    background: rgba(232, 181, 58, .1); border: 1px solid rgba(232, 181, 58, .25);
    border-radius: 50px; font-size: .82rem; color: var(--gold-300);
}
.footer-badge .material-icons { font-size: 15px; }

.footer-heading {
    font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
    color: #fff; margin-bottom: .9rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer a { color: #b9c6d6; text-decoration: none; transition: color .18s ease; }
.footer a:hover { color: var(--gold-300); }
.footer-more { color: var(--gold-500) !important; font-weight: 600; }

/* 44px minimum on every footer link — these sit closest to the thumb. */
.footer nav a, .footer-contact a {
    display: inline-flex; align-items: center; min-height: 44px;
}

.footer-contact li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: .3rem; }
.footer-contact .material-icons { font-size: 17px; color: var(--gold-500); margin-top: 13px; flex-shrink: 0; }
.footer-address { align-items: flex-start; }
.footer-address .material-icons { margin-top: 3px; }
.footer address { font-style: normal; line-height: 1.7; padding-top: 0; }

/* ── Base bar ─────────────────────────────────────────────────────────────── */
.footer-base-wrap { border-top: 1px solid rgba(255, 255, 255, .09); background: rgba(0, 0, 0, .18); }
.footer-base {
    padding: 18px 24px; display: flex; flex-wrap: wrap; gap: 12px;
    align-items: center; justify-content: space-between; font-size: .84rem;
}
.footer-base p { margin: 0; }
.footer-tagline { color: var(--gold-300); font-style: italic; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .split { grid-template-columns: 1fr; }
    .split-side { position: static; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
    .nav-toggle { display: inline-flex; }
    .nav-links {
        display: none; position: absolute; left: 0; right: 0; top: 100%;
        flex-direction: column; align-items: stretch; gap: 0;
        background: #fff; border-bottom: 1px solid var(--line);
        padding: 8px 16px 16px; box-shadow: var(--shadow-md);
    }
    .nav-links.is-open { display: flex; }
    .nav-inner { position: relative; }
    .btn-nav { margin: 8px 0 0; justify-content: center; }

    /* Mobile: the mega-menu becomes an inline accordion inside the drawer.
       A full-width overlay panel on a phone is unusable. */
    .mega-toggle { width: 100%; justify-content: space-between; padding: 10px 14px; }
    .mega {
        position: static; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; border-top: 0; max-height: 0; overflow: hidden;
        transition: max-height .25s ease;
    }
    .has-mega.is-open .mega { max-height: 2400px; }
    .mega-inner { padding: 4px 0 10px; }
    .mega-cols { grid-template-columns: 1fr; gap: 20px; }
    .mega-link-sub { display: none; }     /* titles only on a phone */
    .mega-foot { margin-top: 14px; padding-top: 12px; }

    .hero { padding: 64px 0 72px; }
    .section { padding: 58px 0; }
    .service-row { flex-direction: column; gap: 16px; }
    .post-thumb { width: 100%; }        /* full-bleed card image on a phone */
    .footer-grid { grid-template-columns: 1fr; gap: 30px; padding: 44px 24px 34px; }
    .footer-cta-inner { flex-direction: column; align-items: flex-start; }
    .footer-cta .btn-primary { width: 100%; }
    .footer-base { justify-content: center; text-align: center; }
    .topbar-inner { justify-content: center; }
    .topbar-note { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}