/* ==========================================================================
   advisor.css — Styles unique to advisor.php
   --------------------------------------------------------------------------
   Requires: tokens.css, base.css (in that order, before this file).

   Shared with speaker.php and now living in base.css — do not redefine here:
     .eyebrow / .seal      (this page had .24em tracking, speaker had .22em)
     .lbl / .lbl .t / .r
     .stitle
     .btn

   Contents:
     1. Hero
     2. Stakes
     3. Services
     4. Authority
     5. Process
     6. CTA
     7. Responsive
   ========================================================================== */


/* ==========================================================================
   1. Hero
   ========================================================================== */
/* Centred + reduced to match speaker.php, 2026-07-15.

   NOTE for anyone editing this: the padding shorthand is safe HERE, unlike the
   one in speaker.css, because it sits on the <section> — which is not also a
   .container. In speaker.css the same shorthand was on <div class="container
   spk-hero__in">, where `82px 0 76px` silently zeroed .container's horizontal
   gutter and shoved the headline against the viewport edge. Same two lines of
   CSS, completely different outcome, decided entirely by what else is on the
   element. Check the markup before copying a padding rule between heroes. */
.adv-hero {
    position: relative;
    padding: 74px 0 68px;
    background: var(--gradient-brand-hero);
    color: var(--color-text-inverse);
    overflow: hidden;
    text-align: center;
}

.adv-hero .arcs {
    position: absolute;
    top: -16%;
    right: -6%;
    width: 560px;
    height: 560px;
    opacity: 0.5;
    pointer-events: none;
}

.adv-hero .container {
    position: relative;
    z-index: var(--z-base);
}

/* base.css already flips .adv-hero .eyebrow to brass on the navy. It's an
   inline-flex, so the parent's text-align centres the box; justify-content
   centres its contents within it. Both are needed. */
.adv-hero .eyebrow {
    justify-content: center;
}

.adv-hero h1 {
    /* Was max-width:17ch + clamp(34px, 5.4vw, 60px), which pinned to the 60px
       cap and broke to three lines. Measure widens as the type shrinks —
       centred text reads worse the longer the line, but 17ch at 50px is a
       narrow column, and two balanced lines beat three ragged ones. */
    max-width: 20ch;
    margin: var(--space-5) auto 0;
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: clamp(30px, 4.4vw, 50px);
    line-height: 1.06;
    letter-spacing: -0.015em;
    color: var(--color-text-inverse);
    text-wrap: balance;
}

.adv-hero .sub {
    max-width: 56ch;
    margin-top: var(--space-4);
    margin-inline: auto;
    font-size: clamp(15px, 1.6vw, 18px);
    line-height: 1.6;
    color: #cdd6e6;
}

/* Credential strip */
.adv-hero .creds {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
    margin-top: 44px;
    padding-top: var(--space-5);
    border-top: 1px solid rgba(176, 141, 79, 0.28);
}

/* The bar is a fixed-width block, so text-align on the parent does nothing to
   it — a block box doesn't respond to text-align, only its inline contents do.
   Auto side margins are what centre it. This is the same distinction as the
   hero h1 above: text-align centres the LINES, margin:auto centres the BOX. */
.adv-hero .cred .bar {
    width: 34px;
    height: 2px;
    margin-bottom: var(--space-3);
    margin-inline: auto;
    background: var(--color-accent);
}

.adv-hero .cred b {
    display: block;
    font-size: 14px;
    font-weight: var(--weight-bold);
    letter-spacing: 0.01em;
    color: var(--color-text-inverse);
}

.adv-hero .cred span {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 12.5px;
    color: #aeb9cf;
}


/* ==========================================================================
   2. Stakes
   ========================================================================== */
.adv-stakes {
    padding: 80px 0;
    background: var(--color-bg);
}

.adv-stakes .head {
    max-width: 22ch;
    margin: 0 auto var(--space-2);
    text-align: center;
}

.adv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: var(--space-6);
    margin-top: 44px;
}

.adv-card {
    padding: 36px var(--space-8);
    background: var(--color-bg-raised);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--color-action);
    box-shadow: 0 4px 14px rgba(14, 27, 51, 0.06);
    transition: transform var(--duration-base) var(--ease),
                box-shadow var(--duration-base) var(--ease);
}

.adv-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(14, 27, 51, 0.12);
}

.adv-card h3 {
    margin-bottom: var(--space-2);
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: 21px;
    color: var(--color-brand);
}

/* The number. Garnet — this is the part that's meant to land. */
.adv-card .fig {
    margin: 6px 0 var(--space-3);
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: var(--weight-semibold);
    color: var(--color-action);
}

.adv-card p {
    color: var(--color-text-body);
    font-size: 15px;
    line-height: 1.62;
}


/* ==========================================================================
   3. Services
   ========================================================================== */
.adv-services {
    padding: 84px 0;
    background: var(--color-bg-raised);
}

.adv-services .head { text-align: center; }

.svc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-7);
    margin-top: 48px;
}

.svc {
    padding: 42px var(--space-8);
    background: linear-gradient(180deg, #fbfbfd 0%, var(--white) 100%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: transform var(--duration-base) var(--ease),
                box-shadow var(--duration-base) var(--ease),
                border-color var(--duration-base) var(--ease);
}

.svc:hover {
    transform: var(--lift-md);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--color-accent-soft);
}

.svc h3 {
    margin-bottom: var(--space-2);
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: 24px;
    color: var(--color-brand);
}

.svc .tag {
    display: inline-block;
    margin: 6px 0 var(--space-4);
    padding: 6px var(--space-3);
    background: rgba(125, 31, 43, 0.07);
    border-radius: 2px;
    font-size: 11px;
    font-weight: var(--weight-black);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-action);
}

.svc > p {
    color: var(--color-text-body);
    font-size: 15px;
    line-height: 1.6;
}

.svc ul {
    list-style: none;
    margin-top: var(--space-5);
    padding: 0;
}

.svc li {
    position: relative;
    padding: 10px 0 10px var(--space-7);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-brand);
    font-size: 14.5px;
    line-height: 1.55;
}

.svc li:last-child { border-bottom: none; }

.svc li::before {
    content: "\00A7";
    position: absolute;
    left: 0;
    top: 9px;
    font-family: var(--font-display);
    font-size: 15px;
    color: var(--color-accent);
}


/* ==========================================================================
   4. Authority
   ========================================================================== */
.adv-auth {
    position: relative;
    padding: 82px 0;
    background: linear-gradient(150deg, #0c1830 0%, var(--navy-800) 60%, var(--navy-900) 100%);
    color: var(--color-text-inverse);
    overflow: hidden;
}

.adv-auth .stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--space-5);
    margin-top: 44px;
}

.adv-auth .stat {
    padding: var(--space-7) var(--space-6);
    background: rgba(176, 141, 79, 0.06);
    border: 1px solid rgba(176, 141, 79, 0.22);
    border-radius: var(--radius-sm);
}

.adv-auth .n {
    margin-bottom: var(--space-3);
    font-family: var(--font-display);
    font-size: 38px;
    font-weight: var(--weight-semibold);
    line-height: 1;
    color: var(--color-accent-soft);
}

.adv-auth .l {
    font-size: 14px;
    line-height: 1.5;
    color: #c8d2e4;
}


/* ==========================================================================
   5. Process
   ========================================================================== */
.adv-process {
    padding: 84px 0;
    background: var(--color-bg);
}

.adv-process .head { text-align: center; }

.timeline {
    max-width: 820px;
    margin: 48px auto 0;
}

.step {
    position: relative;
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: var(--space-6);
    align-items: start;
    padding-bottom: 36px;
}

/* Connector line between steps */
.step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 31px;
    top: 64px;
    bottom: 6px;
    width: 1px;
    background: var(--color-border);
}

.step .num {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-round);
    background: var(--navy-800);
    box-shadow: 0 6px 16px rgba(14, 27, 51, 0.22);
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: var(--weight-semibold);
    color: var(--color-accent-soft);
}

.step .body h3 {
    margin-bottom: 6px;
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: 20px;
    color: var(--color-brand);
}

.step .body p {
    color: var(--color-text-body);
    font-size: 15px;
    line-height: 1.62;
}


/* ==========================================================================
   6. CTA
   ========================================================================== */
.adv-cta {
    position: relative;
    padding: 96px 0;
    background: linear-gradient(180deg, var(--garnet-600) 0%, #6a1924 100%);
    color: var(--color-text-inverse);
    text-align: center;
    overflow: hidden;
}

.adv-cta::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-soft) 55%, transparent 100%);
}

.adv-cta .seal-lg {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: 0 auto var(--space-5);
    border: 1.6px solid var(--color-accent-soft);
    border-radius: var(--radius-round);
    font-family: var(--font-display);
    font-size: 28px;
    color: var(--color-accent-soft);
}

.adv-cta h2 {
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: clamp(26px, 4vw, 38px);
    line-height: 1.12;
    color: var(--color-text-inverse);
}

.adv-cta p {
    max-width: 52ch;
    margin: var(--space-4) auto 0;
    font-size: 17px;
    color: #f3dcdf;
}

/* White on garnet — inverse of the site's usual button. */
.adv-btn {
    display: inline-block;
    margin-top: var(--space-7);
    padding: var(--space-4) var(--space-9);
    background: var(--white);
    border-radius: var(--radius-xs);
    color: var(--color-action);
    font-size: 15px;
    font-weight: var(--weight-black);
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: transform var(--duration-fast) var(--ease),
                box-shadow var(--duration-fast) var(--ease);
}

.adv-btn:hover,
.adv-btn:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22);
}

.adv-cta .fine {
    margin-top: var(--space-6);
    font-size: 13px;
    font-style: italic;
    letter-spacing: 0.01em;
    color: var(--color-accent-soft);
}


/* ==========================================================================
   7. Responsive
   ========================================================================== */
@media (max-width: 820px) {
    .adv-hero .creds {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-5);
    }
}

@media (max-width: 560px) {
    .step {
        grid-template-columns: 44px 1fr;
        gap: var(--space-4);
    }
    .step .num {
        width: 44px;
        height: 44px;
        font-size: 17px;
    }
    .step:not(:last-child)::after { left: 22px; top: 48px; }
}