/* =====================================================================
   Prime Attestation Services - Public Site Stylesheet
   Theme: deep navy + muted gold, premium/trust-oriented, no framework
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Design tokens
   --------------------------------------------------------------------- */
:root {
    /* Brand palette */
    --navy-950: #071a33;
    --navy-900: #0b2545;
    --navy-800: #10315f;
    --navy-700: #163e78;
    --navy-100: #e7edf6;

    --gold-600: #a9821c;
    --gold-500: #c9a227;
    --gold-400: #d9b94f;
    --gold-100: #f6eecb;

    --ink: #1f2430;
    --ink-soft: #4b5163;
    --ink-faint: #7c8298;

    --paper: #fbfaf7;
    --paper-alt: #f2efe8;
    --white: #ffffff;

    --line: #e4e0d5;
    --line-soft: #eeece4;

    --success: #1e7a4c;
    --success-bg: #e7f5ee;
    --danger: #b3261e;
    --danger-bg: #fbe9e7;

    /* Typography */
    --font-heading: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', serif;
    --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* Layout */
    --container-w: 1180px;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --shadow-sm: 0 1px 3px rgba(11, 37, 69, 0.08);
    --shadow-md: 0 8px 24px rgba(11, 37, 69, 0.10);
    --shadow-lg: 0 20px 50px rgba(11, 37, 69, 0.16);
    --header-h: 84px;
}

/* ---------------------------------------------------------------------
   2. Reset
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--paper);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5 {
    font-family: var(--font-heading);
    color: var(--navy-900);
    margin: 0 0 0.5em;
    line-height: 1.25;
    font-weight: 700;
}
p { margin: 0 0 1em; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: 1rem; }

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--navy-900);
    color: var(--white);
    padding: 10px 18px;
    z-index: 200;
    border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------------------
   3. Layout helpers
   --------------------------------------------------------------------- */
.container { max-width: var(--container-w); margin: 0 auto; padding: 0 24px; }
.section { padding: 88px 0; }
.section-tight { padding: 56px 0; }
.section-alt { background: var(--paper-alt); }
.section-navy { background: var(--navy-900); color: rgba(255,255,255,0.88); }
.section-navy h2, .section-navy h3 { color: var(--white); }

.section-head { max-width: 680px; margin: 0 auto 48px; text-align: center; }
.section-head.align-left { margin-left: 0; text-align: left; }
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-600);
    margin-bottom: 14px;
}
.eyebrow::before {
    content: '';
    width: 26px;
    height: 2px;
    background: var(--gold-500);
    display: inline-block;
}
.section-head h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.section-sub { color: var(--ink-soft); font-size: 1.05rem; }

.fade-in {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .fade-in { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------------
   4. Buttons
   --------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.98rem;
    border: 1px solid transparent;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
    white-space: nowrap;
}
.btn-sm { padding: 9px 18px; font-size: 0.88rem; }
.btn-primary { background: var(--gold-500); color: var(--navy-950); border-color: var(--gold-500); }
.btn-primary:hover { background: var(--gold-400); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--navy-900); border-color: var(--navy-900); }
.btn-outline:hover { background: var(--navy-900); color: var(--white); }
.btn-ghost-light { background: rgba(255,255,255,0.08); color: var(--white); border-color: rgba(255,255,255,0.4); }
.btn-ghost-light:hover { background: rgba(255,255,255,0.18); }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* ---------------------------------------------------------------------
   5. Header / Nav
   --------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(11, 37, 69, 0.08);
}
/* The frosted-glass background lives on a pseudo-element rather than directly
   on .site-header itself: `backdrop-filter` (like `transform`/`filter`) makes
   the element it's applied to a CSS containing block for `position: fixed`
   descendants. .main-nav (the mobile drawer) is nested inside .site-header and
   needs to stay fixed to the *viewport*, not clipped to the header's own box -
   so the filter is isolated to this ::before layer instead. */
.site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(251, 250, 247, 0.82);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: var(--header-h);
}
.brand { display: flex; align-items: center; }
.brand-logo-img { height: 52px; width: auto; }
.brand-logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-primary { font-family: var(--font-heading); font-weight: 700; font-size: 1.4rem; color: var(--navy-900); letter-spacing: 0.02em; }
.brand-secondary { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-600); }

.main-nav ul { display: flex; gap: 8px; }
/* Higher specificity than `.main-nav a` (which sets display: inline-block)
   is needed so this stays hidden on desktop until the 860px breakpoint
   below explicitly turns it back on for the mobile drawer. */
.main-nav .mobile-nav-call { display: none; }
.main-nav a {
    display: inline-block;
    padding: 10px 14px;
    font-weight: 600;
    font-size: 0.94rem;
    color: var(--ink-soft);
    border-radius: var(--radius-sm);
    transition: color 0.15s ease, background-color 0.15s ease;
    position: relative;
}
.main-nav a:hover { color: var(--navy-900); background: rgba(11,37,69,0.05); }
.main-nav a.active { color: var(--navy-900); }
.main-nav a.active::after {
    content: '';
    position: absolute;
    left: 14px; right: 14px; bottom: 5px;
    height: 2px;
    background: var(--gold-500);
}

.header-actions { display: flex; align-items: center; gap: 14px; }
.header-phone { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 0.92rem; color: var(--navy-900); }
.header-phone svg { color: var(--gold-600); }

.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid rgba(11,37,69,0.15);
    border-radius: var(--radius-sm);
}
.hamburger span { display: block; height: 2px; width: 20px; margin: 0 auto; background: var(--navy-900); transition: transform 0.25s ease, opacity 0.25s ease; }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.flash-banner { padding: 14px 0; text-align: center; font-weight: 600; }
.flash-success { background: var(--success-bg); color: var(--success); }
.flash-error { background: var(--danger-bg); color: var(--danger); }

/* ---------------------------------------------------------------------
   6. Hero
   --------------------------------------------------------------------- */
.hero {
    position: relative;
    background: linear-gradient(150deg, var(--navy-950) 0%, var(--navy-900) 55%, var(--navy-800) 100%);
    color: rgba(255,255,255,0.92);
    overflow: hidden;
    padding: 96px 0 110px;
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 15% 20%, rgba(201,162,39,0.16), transparent 40%),
        radial-gradient(circle at 85% 75%, rgba(201,162,39,0.10), transparent 45%);
    pointer-events: none;
}

/* ---- Hero background decoration: dot-grid corner, ambient rings behind
   the seal visual, and a scatter of outlined diamonds (echoing the "PA"
   monogram's diamond motif). Purely decorative - static, low-opacity,
   no pointer events, and z-index 0 like .seal-watermark so .hero-grid's
   explicit z-index: 1 always keeps real content on top. Static rather than
   animated: the seal's own pulse + slow tick rotation already carry the
   "alive" feeling without adding more moving parts. ---- */
.hero-dot-grid {
    position: absolute;
    top: 44px;
    left: 40px;
    width: 170px;
    height: 170px;
    background-image: radial-gradient(rgba(217,185,79,0.4) 1.5px, transparent 1.5px);
    background-size: 22px 22px;
    pointer-events: none;
    z-index: 0;
}
.hero-ring-decor {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(217,185,79,0.16);
    pointer-events: none;
    z-index: 0;
}
.hero-ring-decor.ring-1 { width: 440px; height: 440px; top: 4%; right: 2%; }
.hero-ring-decor.ring-2 { width: 640px; height: 640px; top: -8%; right: -8%; border-color: rgba(217,185,79,0.1); }
.hero-diamond {
    position: absolute;
    border: 1.5px solid rgba(217,185,79,0.3);
    transform: rotate(45deg);
    pointer-events: none;
    z-index: 0;
}
.hero-diamond.d1 { width: 22px; height: 22px; bottom: 14%; left: 5%; opacity: 0.8; }
.hero-diamond.d2 { width: 14px; height: 14px; bottom: 24%; left: 15%; opacity: 0.5; }
.hero-diamond.d3 { width: 30px; height: 30px; top: 10%; left: 46%; opacity: 0.35; }
.hero-diamond.d4 { width: 16px; height: 16px; bottom: 10%; right: 4%; opacity: 0.55; }

.hero-grid {
    position: relative;
    z-index: 1; /* stay above .seal-watermark and .hero::before regardless of DOM order */
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 56px;
    align-items: center;
}
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(201,162,39,0.14);
    border: 1px solid rgba(201,162,39,0.4);
    color: var(--gold-400);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 8px 16px;
    border-radius: 999px;
    margin-bottom: 22px;
}
.hero h1 {
    color: var(--white);
    font-size: clamp(2.1rem, 4.4vw, 3.35rem);
    margin-bottom: 20px;
}
.hero h1 em { color: var(--gold-400); font-style: normal; }
.hero-sub { font-size: 1.12rem; color: rgba(255,255,255,0.78); max-width: 560px; margin-bottom: 34px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 40px; }
.hero-trustbits { display: flex; flex-wrap: wrap; gap: 22px; }
.hero-trustbit { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: rgba(255,255,255,0.75); }
.hero-trustbit svg { color: var(--gold-400); flex-shrink: 0; }

.hero-visual { position: relative; display: flex; justify-content: center; }
.seal-card {
    position: relative;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.16);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-lg);
    padding: 40px;
    width: 100%;
    max-width: 380px;
    box-shadow: var(--shadow-lg);
}
/* Hero seal: hand-built inline SVG badge (concentric rings + radiating ticks)
   with the company logo (or a "PA" monogram fallback) clipped into the
   center, on a slow continuous pulse. */
.hero-seal-wrap {
    width: 180px;
    height: 180px;
    margin: 0 auto 22px;
    filter: drop-shadow(0 10px 24px rgba(0,0,0,0.35));
    /* Room for the animated glow to breathe outside the wrap's own box. */
    overflow: visible;
}
.hero-seal-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    animation: sealPulse 4s ease-in-out infinite;
    transform-origin: 50% 50%;
}
/* Scale + a synchronized glow live in one keyframe block so the "breathing"
   glow brightens and dims exactly in time with the size change. */
@keyframes sealPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(201,162,39,0));
    }
    50% {
        transform: scale(1.09);
        filter: drop-shadow(0 0 24px rgba(201,162,39,0.65)) drop-shadow(0 0 46px rgba(201,162,39,0.3));
    }
}
/* The ring of radiating ticks turns slowly on its own, independent of the
   pulse, to reinforce the "alive" feeling without being distracting. */
.seal-ticks-group {
    transform-origin: 100px 100px;
    animation: sealTickRotate 26s linear infinite;
}
@keyframes sealTickRotate {
    to { transform: rotate(360deg); }
}
.seal-tick { stroke: rgba(217,185,79,0.55); stroke-width: 1.6; }
.seal-ring-outer { fill: none; stroke: rgba(217,185,79,0.4); stroke-width: 1.5; }
.seal-ring-dash { fill: none; stroke: rgba(217,185,79,0.6); stroke-width: 1.2; stroke-dasharray: 4 6; }
.seal-ring-inner { fill: none; stroke: var(--gold-400); stroke-width: 2.5; }
.seal-center-bg { fill: var(--white); }
.seal-monogram {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 44px;
    fill: var(--navy-900);
}
@media (prefers-reduced-motion: reduce) {
    .hero-seal-svg { animation: none; }
    .seal-ticks-group { animation: none; }
}
.seal-card-title { text-align: center; color: var(--white); font-family: var(--font-heading); font-size: 1.2rem; margin-bottom: 6px; }
.seal-card-sub { text-align: center; color: rgba(255,255,255,0.6); font-size: 0.86rem; margin-bottom: 24px; }
.seal-checklist { display: flex; flex-direction: column; gap: 12px; }
.seal-checklist li { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; color: rgba(255,255,255,0.85); }
.seal-checklist svg { color: var(--gold-400); flex-shrink: 0; }

/* ---------------------------------------------------------------------
   7. Trust strip
   --------------------------------------------------------------------- */
.trust-strip { background: var(--navy-800); padding: 20px 0; }
.trust-strip ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 36px; }
.trust-strip li { display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,0.85); font-size: 0.88rem; font-weight: 600; }
.trust-strip svg { color: var(--gold-400); flex-shrink: 0; }

/* Wave divider: a bold, asymmetric sweep that closes out the dark hero +
   trust-strip block - navy sweeps low on the left, pulls high on the right
   (tall navy vs off-white showing through), read as one dominant shape
   rather than a hairline ripple. Self-contained (own height, own paper
   background) so it never overlaps trust-strip's real content above it;
   it only ever pushes the About section further down, never over it. */
.hero-wave {
    position: relative;
    height: 240px;
    background: var(--paper);
    overflow: hidden;
    line-height: 0;
}
.hero-wave svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-wave-fill { fill: var(--navy-800); filter: drop-shadow(0 10px 16px rgba(11,37,69,0.2)); }
.hero-wave-line { stroke: rgba(217,185,79,0.75); stroke-width: 2; }

/* ---------------------------------------------------------------------
   8. About section
   --------------------------------------------------------------------- */
.about-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 60px; align-items: start; }
.about-copy p { color: var(--ink-soft); font-size: 1.03rem; }
.about-copy .about-signoff { margin-top: 24px; font-weight: 700; color: var(--navy-900); font-family: var(--font-heading); }

.info-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow-md);
}
.info-card h3 { font-size: 1.1rem; margin-bottom: 18px; }
.info-row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line-soft); }
.info-row:first-of-type { border-top: none; }
.info-row .icon-wrap { color: var(--gold-600); flex-shrink: 0; margin-top: 2px; }
.info-row a { color: var(--navy-900); font-weight: 600; }
.info-row a:hover { color: var(--gold-600); }
.info-row span.info-label { display: block; font-size: 0.78rem; color: var(--ink-faint); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; }

/* ---------------------------------------------------------------------
   9. Services
   --------------------------------------------------------------------- */
.category-group { margin-bottom: 52px; }
.category-group:last-child { margin-bottom: 0; }
.category-head { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.category-head .icon-wrap {
    width: 46px; height: 46px;
    border-radius: 12px;
    background: var(--navy-900);
    color: var(--gold-400);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.category-head h3 { margin: 0; font-size: 1.3rem; }

.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.service-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 28px;
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease, background 0.28s ease;
    position: relative;
    z-index: 1;
}
.service-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(201,162,39,0.6);
}
/* Featured cards already carry a gold-tinted gradient of their own, so they're
   the ones that get the frosted-glass treatment (translucent + blurred +
   hairline border) - plain cards on the flat section background stay clean,
   fully-opaque bordered cards rather than blurring nothing behind them. */
.service-card.is-featured {
    border: 1px solid rgba(201,162,39,0.4);
    background: linear-gradient(180deg, rgba(246,238,203,0.78) 0%, rgba(255,255,255,0.82) 55%, rgba(255,255,255,0.94) 100%);
    backdrop-filter: blur(9px) saturate(140%);
    -webkit-backdrop-filter: blur(9px) saturate(140%);
}
.service-card.is-featured:hover { border-color: var(--gold-500); }
.service-featured-tag {
    position: absolute; top: 18px; right: 18px;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--gold-600); background: var(--gold-100); border: 1px solid var(--gold-500);
    padding: 4px 9px; border-radius: 999px;
    z-index: 2;
}
.service-icon {
    width: 52px; height: 52px;
    border-radius: 12px;
    background: var(--navy-100);
    color: var(--navy-800);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
    transition: background-color 0.28s ease, color 0.28s ease, box-shadow 0.28s ease, transform 0.28s ease;
}
.service-card:hover .service-icon {
    background: var(--navy-900);
    color: var(--gold-400);
    transform: scale(1.07);
    box-shadow: 0 0 0 6px rgba(201,162,39,0.16), 0 8px 18px rgba(11,37,69,0.3);
}
.service-card h4 { font-size: 1.08rem; margin-bottom: 10px; }
.service-card p { color: var(--ink-soft); font-size: 0.93rem; margin-bottom: 0; }

.services-cta { text-align: center; margin-top: 44px; }

/* ---------------------------------------------------------------------
   10. Process / How it Works
   --------------------------------------------------------------------- */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; position: relative; }
.process-step { position: relative; text-align: left; }
.process-num {
    display: flex; align-items: center; justify-content: center;
    width: 54px; height: 54px;
    border-radius: 50%;
    background: var(--navy-900);
    color: var(--gold-400);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.3rem;
    margin-bottom: 18px;
    border: 2px solid var(--gold-500);
    transition: box-shadow 0.28s ease, transform 0.28s ease;
}
/* Process steps aren't boxed cards, so hover doesn't lift the whole step -
   just a glow + scale on the number badge, echoing the icon-glow language
   used elsewhere without pretending there's a card here to lift. */
.process-step:hover .process-num {
    box-shadow: 0 0 0 6px rgba(201,162,39,0.18), 0 8px 18px rgba(11,37,69,0.3);
    transform: scale(1.08);
}
.process-step h4 { font-size: 1.05rem; margin-bottom: 8px; }
.process-step p { color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 0; }
.process-connector {
    display: none;
}
@media (min-width: 861px) {
    .process-grid::before {
        content: '';
        position: absolute;
        top: 27px;
        left: 12.5%; right: 12.5%;
        height: 2px;
        background: repeating-linear-gradient(90deg, var(--gold-500) 0 8px, transparent 8px 16px);
        z-index: 0;
    }
}

/* ---------------------------------------------------------------------
   11. Why choose us
   --------------------------------------------------------------------- */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.why-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 30px;
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.why-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(201,162,39,0.6); }
.why-card .service-icon { background: var(--gold-100); color: var(--gold-600); }
.why-card:hover .service-icon {
    background: var(--navy-900);
    color: var(--gold-400);
    transform: scale(1.07);
    box-shadow: 0 0 0 6px rgba(201,162,39,0.16), 0 8px 18px rgba(11,37,69,0.3);
}
.why-card h4 { font-size: 1.02rem; margin-bottom: 8px; }
.why-card p { color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 0; }

/* ---------------------------------------------------------------------
   12. Stats band
   --------------------------------------------------------------------- */
.stats-band { padding: 56px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stat-item .stat-value { font-family: var(--font-heading); font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--gold-400); font-weight: 700; margin-bottom: 6px; }
.stat-item .stat-label { font-size: 0.86rem; color: rgba(255,255,255,0.72); letter-spacing: 0.02em; }

/* ---------------------------------------------------------------------
   13. Testimonials
   --------------------------------------------------------------------- */
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.testimonial-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 30px;
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.testimonial-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(201,162,39,0.6); }
.testimonial-card .quote-icon { color: var(--gold-500); margin-bottom: 14px; }
.testimonial-stars { display: flex; gap: 3px; color: var(--gold-500); margin-bottom: 12px; }
.testimonial-message { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 18px; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--navy-900); color: var(--gold-400);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-family: var(--font-heading);
    flex-shrink: 0;
    transition: box-shadow 0.28s ease, transform 0.28s ease;
}
.testimonial-card:hover .testimonial-avatar {
    box-shadow: 0 0 0 5px rgba(201,162,39,0.18);
    transform: scale(1.08);
}
.testimonial-name { font-weight: 700; color: var(--navy-900); font-size: 0.92rem; }

.empty-state {
    text-align: center;
    padding: 48px 24px;
    background: var(--white);
    border: 1px dashed var(--line);
    border-radius: var(--radius-md);
    color: var(--ink-soft);
}
.empty-state .icon-wrap { color: var(--gold-500); margin-bottom: 14px; display: flex; justify-content: center; }

/* ---------------------------------------------------------------------
   14. FAQ
   --------------------------------------------------------------------- */
.faq-list { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq-item {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
/* No translateY lift here - these expand in place rather than leading
   anywhere, so a border/shadow cue reads as "interactive" without implying
   the whole row is about to jump. */
.faq-item:hover { border-color: rgba(201,162,39,0.5); box-shadow: var(--shadow-sm); }
.faq-question {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 20px 24px;
    background: transparent;
    border: none;
    text-align: left;
    font-weight: 700;
    font-size: 1rem;
    color: var(--navy-900);
}
.faq-question .plus {
    flex-shrink: 0;
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 1.5px solid var(--gold-500);
    color: var(--gold-600);
    display: flex; align-items: center; justify-content: center;
    position: relative;
    transition: transform 0.25s ease;
}
.faq-question .plus::before, .faq-question .plus::after {
    content: '';
    position: absolute;
    background: var(--gold-600);
}
.faq-question .plus::before { width: 10px; height: 1.6px; }
.faq-question .plus::after { width: 1.6px; height: 10px; transition: transform 0.25s ease; }
.faq-item.is-open .faq-question .plus::after { transform: scaleY(0); }
.faq-item.is-open .faq-question { color: var(--gold-700, var(--gold-600)); }

.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-answer-inner { padding: 0 24px 22px; color: var(--ink-soft); font-size: 0.95rem; }
.faq-item.is-open .faq-answer { max-height: 600px; }

.faq-contact-prompt { text-align: center; margin-top: 40px; padding: 32px; background: var(--navy-900); border-radius: var(--radius-lg); color: rgba(255,255,255,0.85); }
.faq-contact-prompt h3 { color: var(--white); margin-bottom: 10px; }

/* ---------------------------------------------------------------------
   15. CTA banner
   --------------------------------------------------------------------- */
.cta-banner {
    background: linear-gradient(135deg, var(--navy-900), var(--navy-950));
    border-radius: var(--radius-lg);
    padding: 56px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cta-banner::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(201,162,39,0.18), transparent 50%);
}
.cta-banner h2 { color: var(--white); position: relative; }
.cta-banner p { color: rgba(255,255,255,0.78); max-width: 520px; margin: 0 auto 30px; position: relative; }
.cta-banner .btn-row { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; position: relative; }

/* ---------------------------------------------------------------------
   16. Contact strip / page
   --------------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 44px; align-items: start; }
.contact-map { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.contact-map iframe { width: 100%; height: 320px; border: 0; display: block; }

.form-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow-md); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-weight: 700; font-size: 0.86rem; color: var(--navy-900); margin-bottom: 7px; }
.form-group .required { color: var(--danger); }
.form-control {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--paper);
    color: var(--ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:focus { outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(201,162,39,0.18); background: var(--white); }
textarea.form-control { resize: vertical; min-height: 130px; }
.form-hint { font-size: 0.78rem; color: var(--ink-faint); margin-top: 6px; }
.form-error-text { font-size: 0.8rem; color: var(--danger); margin-top: 6px; }
.form-group.has-error .form-control { border-color: var(--danger); }

/* ---------------------------------------------------------------------
   17. Footer
   --------------------------------------------------------------------- */
.site-footer { background: var(--navy-950); color: rgba(255,255,255,0.68); padding: 64px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 0.85fr 1fr 1.1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-brand-col .footer-logo-img { height: 46px; margin-bottom: 16px; filter: brightness(0) invert(1); }
.footer-logo-text .brand-primary { color: var(--white); }
.footer-tagline { font-size: 0.88rem; line-height: 1.7; margin-top: 14px; max-width: 320px; }
.footer-col h4 { color: var(--white); font-size: 0.92rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 18px; }
.footer-links li, .footer-contact li { margin-bottom: 12px; font-size: 0.9rem; }
.footer-links a:hover { color: var(--gold-400); }
.footer-contact li { display: flex; align-items: flex-start; gap: 10px; }
.footer-contact svg { color: var(--gold-400); flex-shrink: 0; margin-top: 3px; }
.footer-contact a:hover { color: var(--gold-400); }
.footer-bottom-inner { display: flex; justify-content: space-between; align-items: center; padding: 22px 0; font-size: 0.82rem; flex-wrap: wrap; gap: 8px; }

.mobile-call-fab {
    display: none;
    position: fixed;
    bottom: 20px; right: 20px;
    width: 54px; height: 54px;
    border-radius: 50%;
    background: var(--gold-500);
    color: var(--navy-950);
    align-items: center; justify-content: center;
    box-shadow: var(--shadow-lg);
    z-index: 90;
}

/* ---------------------------------------------------------------------
   18. Page hero (interior pages)
   --------------------------------------------------------------------- */
.page-hero {
    background: linear-gradient(150deg, var(--navy-950), var(--navy-900));
    color: var(--white);
    padding: 64px 0;
    text-align: center;
}
.page-hero .eyebrow { color: var(--gold-400); }
.page-hero h1 { color: var(--white); font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-bottom: 12px; }
.page-hero p { color: rgba(255,255,255,0.75); max-width: 620px; margin: 0 auto; }
.breadcrumb { display: flex; justify-content: center; gap: 8px; font-size: 0.82rem; color: rgba(255,255,255,0.55); margin-bottom: 16px; }
.breadcrumb a:hover { color: var(--gold-400); }

/* ---------------------------------------------------------------------
   19. Misc components (about page extras, process page)
   --------------------------------------------------------------------- */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.badge-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.badge-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--navy-100); color: var(--navy-800); font-size: 0.82rem; font-weight: 600; padding: 7px 14px; border-radius: 999px; }
.badge-pill svg { color: var(--gold-600); }

.alert { padding: 16px 20px; border-radius: var(--radius-sm); font-size: 0.92rem; margin-bottom: 24px; }
.alert-success { background: var(--success-bg); color: var(--success); border: 1px solid rgba(30,122,76,0.25); }
.alert-error { background: var(--danger-bg); color: var(--danger); border: 1px solid rgba(179,38,30,0.25); }

/* ---------------------------------------------------------------------
   19b. Seal watermark - large, faint, decorative background texture.
   A few thoughtfully-placed instances (not tiled), sitting purely behind
   real content: no pointer events, low z-index, no interference with text.
   --------------------------------------------------------------------- */
.seal-watermark {
    position: absolute;
    z-index: 0;
    opacity: 0.05;
    pointer-events: none;
    user-select: none;
}
.seal-watermark-svg { display: block; width: 100%; height: 100%; }
.seal-watermark-svg circle,
.seal-watermark-svg line {
    fill: none;
    stroke: currentColor;
    stroke-width: 1;
}
.seal-watermark.on-dark { color: var(--gold-400); }
.seal-watermark.on-light { color: var(--navy-900); }
.seal-watermark-rotate {
    transform-origin: 200px 200px;
    animation: sealWatermarkRotate 100s linear infinite;
}
@keyframes sealWatermarkRotate { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .seal-watermark-rotate { animation: none; }
}
/* Every section that hosts a watermark needs to establish the positioning
   context and clip the parts meant to "bleed" off its own edge - it must
   never be allowed to spill into a neighbouring section or widen the page. */
.hero .seal-watermark { top: -18%; right: -12%; width: 640px; height: 640px; }
#about { position: relative; overflow: hidden; }
#about .seal-watermark { bottom: -25%; left: -14%; width: 520px; height: 520px; }

/* ---------------------------------------------------------------------
   20. Branded preloader
   Default state is VISIBLE - a <noscript> rule (in header.php) hides it
   instantly for no-JS visitors, main.js hides it after the real page load
   (with a minimum display time so it's never skipped), and the animation
   below is a pure-CSS 6s backstop so it can never get stuck on screen even
   if JS hangs or errors before it gets a chance to hide it itself.
   --------------------------------------------------------------------- */
#preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background: var(--navy-950);
    transition: opacity 0.3s ease;
    animation: preloaderForceHide 0s linear 6s forwards;
}
#preloader.is-hidden { opacity: 0; pointer-events: none; }
#preloader[hidden] { display: none; }
@keyframes preloaderForceHide {
    to { opacity: 0; visibility: hidden; pointer-events: none; }
}
.preloader-ring {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 2px solid rgba(201,162,39,0.22);
    border-top-color: var(--gold-400);
    animation: preloaderSpin 0.9s linear infinite;
}
@keyframes preloaderSpin { to { transform: rotate(360deg); } }
.preloader-mark { text-align: center; }
.preloader-word-prime {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.7rem;
    letter-spacing: 0.06em;
    color: var(--white);
    opacity: 0;
    animation: preloaderWordIn 0.6s ease forwards 0.1s;
}
.preloader-word-sub {
    display: block;
    margin-top: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-400);
    opacity: 0;
    animation: preloaderWordIn 0.6s ease forwards 0.32s;
}
@keyframes preloaderWordIn {
    from { opacity: 0; transform: translateY(10px) scale(0.96); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .preloader-ring { animation: none; }
    .preloader-word-prime, .preloader-word-sub { animation: none; opacity: 1; }
}

/* ---------------------------------------------------------------------
   21. Custom cursor (dot + trailing ring) - desktop/mouse only, see main.js
   --------------------------------------------------------------------- */
.cursor-dot, .cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.2s ease;
    will-change: transform;
}
.cursor-dot {
    width: 8px;
    height: 8px;
    background: var(--gold-500);
    transition: opacity 0.2s ease;
}
.cursor-ring {
    width: 34px;
    height: 34px;
    border: 1.5px solid rgba(201,162,39,0.55);
    background: rgba(11,37,69,0.04);
    transition: opacity 0.2s ease, width 0.25s ease, height 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.has-custom-cursor .cursor-dot,
.has-custom-cursor .cursor-ring { opacity: 1; }
.has-custom-cursor, .has-custom-cursor a, .has-custom-cursor button,
.has-custom-cursor input, .has-custom-cursor textarea, .has-custom-cursor select,
.has-custom-cursor label, .has-custom-cursor * { cursor: none !important; }
.cursor-ring.is-hovering {
    width: 54px;
    height: 54px;
    border-color: var(--gold-400);
    box-shadow: 0 0 20px rgba(201,162,39,0.4);
}
/* Never enable on touch/coarse-pointer devices - the native cursor stays. */
@media (pointer: coarse), (hover: none) {
    .cursor-dot, .cursor-ring { display: none !important; }
}

/* ---------------------------------------------------------------------
   22. Responsive breakpoints
   --------------------------------------------------------------------- */

/* ~1024px: tighten grids */
@media (max-width: 1024px) {
    .container { padding: 0 20px; }
    .services-grid, .why-grid, .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
    .process-grid { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
    .hero-grid { grid-template-columns: 1fr; }
    .hero-visual { order: -1; max-width: 420px; margin: 0 auto; }
    .about-grid, .contact-grid, .two-col { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; row-gap: 40px; }
    .hero-wave { height: 200px; }

    /* Between here and the ~860px hamburger breakpoint, the header row
       (logo + 6 nav links + phone + button) is tight enough that the phone
       number's text would wrap to two lines. Tighten nav spacing so there's
       real headroom, then force the phone onto one line rather than letting
       it reflow - it should stay visible (not hidden) all the way down to
       ~860px, where it moves into the mobile drawer instead. */
    .header-inner { gap: 16px; }
    .main-nav ul { gap: 2px; }
    .main-nav a { padding: 10px 10px; font-size: 0.9rem; }
    .header-actions { gap: 10px; }
    .header-phone { white-space: nowrap; font-size: 0.86rem; }
}

/* ~860px: nav becomes mobile drawer */
@media (max-width: 860px) {
    :root { --header-h: 72px; }
    .section { padding: 64px 0; }
    .hamburger { display: flex; }
    /* Compact header row: logo, Get Started, hamburger only. The phone number
       moves into the mobile nav drawer below (as .mobile-nav-call) so the
       header row never has to cram more than 2-3 elements side by side. */
    .header-phone { display: none; }
    .main-nav {
        position: fixed;
        top: var(--header-h);
        left: 0; right: 0;
        bottom: 0;
        background: var(--navy-950);
        transform: translateX(100%);
        transition: transform 0.3s ease;
        z-index: 99;
        overflow-y: auto;
    }
    .main-nav.is-open { transform: translateX(0); }
    .main-nav .mobile-nav-call {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin: 24px 24px 4px;
        padding: 15px 18px;
        background: var(--gold-500);
        color: var(--navy-950);
        font-weight: 700;
        font-size: 0.98rem;
        border-radius: var(--radius-sm);
        box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    }
    .main-nav .mobile-nav-call:hover { background: var(--gold-400); }
    .main-nav ul { flex-direction: column; padding: 24px; gap: 4px; }
    .main-nav a { color: rgba(255,255,255,0.85); padding: 16px; font-size: 1.05rem; border-bottom: 1px solid rgba(255,255,255,0.08); border-radius: 0; }
    .main-nav a:hover { background: rgba(255,255,255,0.06); color: var(--white); }
    .main-nav a.active { color: var(--gold-400); }
    .main-nav a.active::after { display: none; }
    .mobile-call-fab { display: flex; }
    .hero-wave { height: 170px; }
}

/* ~768px */
@media (max-width: 768px) {
    .hero { padding: 64px 0 76px; }
    .services-grid, .why-grid, .testimonials-grid { grid-template-columns: 1fr; }
    .process-grid { grid-template-columns: 1fr; }
    .process-grid::before { display: none; }
    .contact-map iframe { height: 240px; }
    .form-row { grid-template-columns: 1fr; }
    .cta-banner { padding: 40px 24px; }
    .hero-wave { height: 140px; }
    .hero-ring-decor.ring-1 { width: 300px; height: 300px; }
    .hero-ring-decor.ring-2 { width: 440px; height: 440px; }
    .hero-dot-grid { width: 120px; height: 120px; top: 28px; left: 20px; }
    .hero-diamond.d3 { display: none; } /* would otherwise sit behind the now-stacked headline text */
}

/* ~560px */
@media (max-width: 560px) {
    .container { padding: 0 16px; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .header-actions { gap: 10px; }
    .header-actions .btn-sm { padding: 9px 14px; font-size: 0.82rem; }
    .footer-bottom-inner { flex-direction: column; text-align: center; }
    .hero-ctas .btn { flex: 1 1 auto; }
    .hero-trustbits { gap: 14px; }
    .seal-card { padding: 28px 22px; }
    .hero-seal-wrap { width: 140px; height: 140px; }
    .seal-monogram { font-size: 36px; }
    .hero-wave { height: 110px; }
}

/* ~380px */
@media (max-width: 380px) {
    .brand-logo-img { height: 42px; }
    .brand-secondary { font-size: 0.56rem; }
    h1 { font-size: 1.7rem !important; }
    .section-head h2 { font-size: 1.5rem !important; }
    .btn { padding: 12px 18px; font-size: 0.9rem; }
    .info-card, .form-card { padding: 22px; }
    .cta-banner { padding: 32px 18px; }
    .hero-wave { height: 80px; }
}