/* ==========================================================================
   YEV v9.13.0: one look on every page, and a little life in it
   --------------------------------------------------------------------------
   Loaded last on every page. Holds:
     1. Grid texture on every dark section (the look from the home services
        field and the service page headers)
     2. Pointer glow on grid sections (pointer devices only)
     3. .pg-hero: the dark grid page header for pages outside the service template
     4. Build. Launch. Expand. cascade
     5. Q&A panels (site.js turns groups of <details class="faq-item"> into these)
     6. Count-up numbers
   Rules: locked palette from tokens.css; every motion effect sits behind
   prefers-reduced-motion: no-preference; without JS or motion, content is
   fully there.
   ========================================================================== */

:root {
    --gx-size: 64px;
    --gx-line: rgba(255, 255, 255, 0.13);
    --gx-line-faint: rgba(255, 255, 255, 0.05);
    --gx-glow: radial-gradient(440px circle at var(--mx, -999px) var(--my, -999px), rgba(255, 255, 255, 0.09), transparent 70%);
    --ix-ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- 1 + 2. Grid texture and pointer glow ---------- */
.proof-strip,
.final-cta,
.f10-strip,
.pg-hero {
    background-color: var(--yev-navy);
    background-image:
        var(--gx-glow),
        linear-gradient(var(--gx-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--gx-line) 1px, transparent 1px),
        var(--gx-base, var(--yev-hero-gradient));
    background-size: auto, var(--gx-size) var(--gx-size), var(--gx-size) var(--gx-size), auto;
}
.f10-strip { --gx-base: linear-gradient(var(--yev-navy), var(--yev-navy)); }
.pg-hero {
    --gx-base: radial-gradient(1000px 520px at 100% 0%, rgba(1, 65, 162, 0.95), transparent 60%);
}
.svc {
    background-image:
        var(--gx-glow),
        linear-gradient(var(--v9-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--v9-line) 1px, transparent 1px),
        radial-gradient(1200px 600px at 85% -10%, rgba(1, 65, 162, 0.9), transparent 60%);
    background-color: var(--yev-navy);
    background-size: auto, var(--gx-size) var(--gx-size), var(--gx-size) var(--gx-size), auto;
}
.op-hero {
    background-image:
        var(--gx-glow),
        linear-gradient(var(--v9-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--v9-line) 1px, transparent 1px),
        radial-gradient(1000px 520px at 100% 0%, rgba(1, 65, 162, 0.95), transparent 60%);
    background-color: var(--yev-navy);
    background-size: auto, var(--gx-size) var(--gx-size), var(--gx-size) var(--gx-size), auto;
}
/* the footer gets the texture too, fainter, so it never competes with the links */
.site-footer {
    background-image:
        linear-gradient(var(--gx-line-faint) 1px, transparent 1px),
        linear-gradient(90deg, var(--gx-line-faint) 1px, transparent 1px);
    background-size: var(--gx-size) var(--gx-size);
}

/* ---------- 3. Page header ---------- */
.pg-hero {
    position: relative;
    color: #fff;
    padding-block: clamp(40px, 7vw, 88px) clamp(44px, 6vw, 80px);
    overflow: clip;
}
.pg-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(130% 100% at 30% 30%, transparent 35%, var(--yev-navy) 95%);
    pointer-events: none;
}
.pg-hero > * { position: relative; }
.pg-wrap { width: min(1180px, 100% - 2 * clamp(20px, 5vw, 48px)); margin-inline: auto; }
.pg-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 22px;
}
.pg-crumbs a { color: #fff; text-underline-offset: 3px; }
.pg-crumbs a:focus-visible { outline: 2px solid var(--yev-gold); outline-offset: 3px; border-radius: 4px; }
.pg-kicker {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--yev-gold);
    margin: 0 0 14px;
}
.pg-hero h1 {
    font-size: clamp(2.25rem, 1.2rem + 4vw, 4rem);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -0.03em;
    margin: 0 0 18px;
    max-width: 22ch;
    text-wrap: balance;
    color: #fff;
}
.pg-hero h1 em { font-style: normal; color: var(--yev-gold); }
.pg-lede {
    font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.3rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.86);
    max-width: 58ch;
    margin: 0;
    text-wrap: pretty;
}
.pg-hero .proof-how { text-align: left; margin-top: 18px; }

/* ---------- 4. Build. Launch. Expand. cascade ----------
   The words sit in their final spread-out layout from the start, so nothing
   shifts when the letters land. Letters drop in one at a time, word by word,
   which runs the motion diagonally down and to the right. No overshoot. */
.ble i { font-style: normal; display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
    .ble.ble-anim i { opacity: 0; transform: translateY(-0.7em) rotate(-6deg); }
    .ble.ble-anim.is-in i {
        animation: bleDrop .6s cubic-bezier(.22, 1, .36, 1) both;
        animation-delay: calc(var(--w) * 0.26s + var(--n) * 0.065s);
    }
    .ble.ble-done i { opacity: 1; transform: none; animation: none; }
    @keyframes bleDrop {
        from { opacity: 0; transform: translateY(-0.7em) rotate(-6deg); }
        to   { opacity: 1; transform: none; }
    }
}

/* Home: the gold tile. Text on top, the three words fill the space below,
   spread across the full width and sized by the tile. */
.svc-tile--hbd .svc-hbd-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex: 1 1 auto;
}
.svc-tile--hbd .ble {
    margin-block: auto;
    width: 100%;
    justify-content: space-around;
    align-items: flex-start;
    gap: 0;
    padding: 10px clamp(0px, 2cqi, 16px) 6px;
}
.svc-tile--hbd .ble > span { font-size: clamp(1.5rem, 6.5cqi, 2.5rem); line-height: 0.95; letter-spacing: -0.14em; }
.svc-tile--hbd .ble > span:nth-child(1) { padding-top: 0; }
.svc-tile--hbd .ble > span:nth-child(2) { padding-top: 0.6em; }
.svc-tile--hbd .ble > span:nth-child(3) { padding-top: 1.2em; }

/* HBD page header: wider steps so the words use the right-hand column */
.op-hero .ble { gap: clamp(22px, 4vw, 56px); }
.op-hero .ble > span:nth-child(2) { padding-top: 1em; }
.op-hero .ble > span:nth-child(3) { padding-top: 2em; }

/* ---------- 5. Q&A panels ---------- */
.qa {
    --qa-accent: var(--yev-gold);
    display: grid;
    gap: 18px;
    margin: 8px 0 24px;
    text-align: left;
}
@media (min-width: 820px) {
    .qa { grid-template-columns: minmax(240px, 0.85fr) 1.15fr; gap: 28px; align-items: start; }
}
.qa-list {
    position: relative;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 2px 2px 8px;
    scrollbar-width: thin;
}
@media (min-width: 820px) {
    .qa-list { flex-direction: column; overflow: visible; padding: 0; }
}
.qa-q {
    position: relative;
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 80vw;
    text-align: left;
    font: inherit;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.35;
    color: var(--yev-navy);
    background: #fff;
    border: 1px solid rgba(0, 33, 97, 0.14);
    border-radius: 14px;
    padding: 14px 16px;
    min-height: 48px;
    cursor: pointer;
    transition: transform .3s var(--ix-ease), box-shadow .3s var(--ix-ease), background-color .25s ease, border-color .25s ease, color .25s ease;
}
@media (min-width: 820px) { .qa-q { max-width: none; } }
.qa-num {
    flex: 0 0 auto;
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--yev-royal);
    padding-top: 2px;
    min-width: 1.6em;
}
.qa-q:hover { border-color: rgba(0, 33, 97, 0.32); transform: translateX(3px); }
.qa-q[aria-selected="true"] {
    background: var(--yev-navy);
    border-color: var(--yev-navy);
    color: #fff;
    box-shadow: 0 14px 30px -16px rgba(0, 33, 97, 0.55);
}
.qa-q[aria-selected="true"] .qa-num { color: var(--qa-accent); }
.qa-q:focus-visible { outline: 3px solid var(--yev-royal); outline-offset: 3px; }
.qa-q[aria-selected="true"]::after {
    /* a gold tab that points at the answer: under the question when the list runs
       across, on its right edge when the list stacks beside the answer */
    content: '';
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: 42%;
    height: 4px;
    transform: translateX(-50%);
    border-radius: 4px 4px 0 0;
    background: var(--qa-accent);
}
@media (min-width: 820px) {
    .qa-q[aria-selected="true"]::after {
        left: auto; right: -1px; bottom: auto; top: 50%;
        width: 4px; height: 56%;
        transform: translateY(-50%);
        border-radius: 4px 0 0 4px;
    }
}
.qa-panels { position: relative; }
.qa-panel {
    background: #fff;
    border: 1px solid rgba(0, 33, 97, 0.12);
    border-radius: 18px;
    padding: clamp(20px, 3vw, 32px);
    box-shadow: 0 1px 0 rgba(0, 33, 97, 0.04), 0 22px 44px -26px rgba(0, 33, 97, 0.35);
}
.qa-panel[hidden] { display: none; }
.qa-panel:focus-visible { outline: 3px solid var(--yev-royal); outline-offset: 3px; }
.qa-panel .qa-title {
    font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
    font-weight: 800;
    color: var(--yev-navy);
    margin: 0 0 12px;
    line-height: 1.3;
}
.qa-panel .faq-a { padding: 0; }
.qa-panel .faq-a p { font-size: 1rem; line-height: 1.7; color: #2b2f3a; margin: 0 0 12px; }
.qa-panel .faq-a p:last-child { margin-bottom: 0; }
.qa-panel .faq-a ol,
.qa-panel .faq-a ul { margin: 0 0 16px 22px !important; font-size: 1rem !important; }
.qa-step {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 33, 97, 0.1);
    font-size: 0.875rem;
    color: #5a6275;
}
.qa-next {
    font: inherit;
    font-weight: 700;
    color: var(--yev-royal);
    background: none;
    border: 0;
    padding: 8px 4px;
    min-height: 44px;
    cursor: pointer;
}
.qa-next:hover { text-decoration: underline; text-underline-offset: 3px; }
.qa-next:focus-visible { outline: 3px solid var(--yev-royal); outline-offset: 2px; border-radius: 6px; }
.qa-progress { display: flex; gap: 6px; }
.qa-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(0, 33, 97, 0.18); transition: background-color .3s ease, transform .3s var(--ix-ease); }
.qa-dot.is-on { background: var(--yev-royal); transform: scale(1.35); }
@media (prefers-reduced-motion: no-preference) {
    .qa-panel.is-entering { animation: qaIn .45s var(--ix-ease) both; }
    @keyframes qaIn {
        from { opacity: 0; transform: translateY(14px) scale(.985); }
        to   { opacity: 1; transform: none; }
    }
    .qa-panel.is-entering .faq-a > * { animation: qaIn .5s var(--ix-ease) both; }
    .qa-panel.is-entering .faq-a > *:nth-child(2) { animation-delay: .06s; }
    .qa-panel.is-entering .faq-a > *:nth-child(3) { animation-delay: .12s; }
    .qa-panel.is-entering .faq-a > *:nth-child(4) { animation-delay: .18s; }
}
/* Q&A on a dark ground */
.on-dark .qa-q, .pg-hero .qa-q { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.18); color: #fff; }
.on-dark .qa-num { color: var(--yev-gold); }

/* ---------- 6. Count-up numbers ---------- */
[data-countup] { font-variant-numeric: tabular-nums; }

/* ---------- Forced colours ---------- */
@media (forced-colors: active) {
    .qa-q[aria-selected="true"] { border: 3px solid Highlight; }
    .qa-q[aria-selected="true"]::after { background: Highlight; }
}

/* letters are split into <i>, so the first-letter colour moves to the first <i> */
.ble > span > i:first-child { color: var(--ble-first, currentColor); }
.faq-list:has(> .qa) { display: block; }

/* scroll reveal for pages without v9.css (same motion as .reveal) */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .ix-reveal {
            animation: ixReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 24%;
        }
        @keyframes ixReveal {
            from { opacity: 0; transform: translateY(28px); }
            to   { opacity: 1; transform: none; }
        }
    }
}

/* ---------- 7. Home testimonial previews ----------
   Portrait, a large gold quote mark, the quote in plain type, and a link that
   grows its arrow line on hover. Cards lift gently and come in one by one. */
.testimonials-grid { gap: clamp(18px, 2.2vw, 26px); }
@media (min-width: 1100px) { .testimonials-grid { grid-template-columns: repeat(4, 1fr); } }
.testimonial {
    position: relative;
    overflow: hidden;
    padding: 58px 26px 24px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid rgba(0, 33, 97, 0.08);
    box-shadow: 0 1px 0 rgba(0, 33, 97, 0.04), 0 18px 40px -26px rgba(0, 33, 97, 0.35);
    transition: transform .45s var(--ix-ease), box-shadow .45s var(--ix-ease);
}
.testimonial::before {
    /* the quote mark */
    content: '\201C';
    position: absolute;
    top: -6px;
    left: 20px;
    font-size: 6rem;
    line-height: 1;
    font-weight: 900;
    font-style: normal;
    color: var(--yev-gold);
    transition: transform .5s var(--ix-ease);
    pointer-events: none;
}
.testimonial::after {
    /* a thin navy line across the top that fills in on hover */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    width: 34%;
    background: var(--yev-navy);
    border-radius: 0 0 4px 0;
    transition: width .6s var(--ix-ease);
}
.testimonial:hover,
.testimonial:focus-within {
    transform: translateY(-5px);
    box-shadow: 0 1px 0 rgba(0, 33, 97, 0.04), 0 28px 54px -26px rgba(0, 33, 97, 0.45);
}
.testimonial:hover::before,
.testimonial:focus-within::before { transform: translateY(4px) rotate(-6deg); }
.testimonial:hover::after,
.testimonial:focus-within::after { width: 100%; }
.testimonial-quote {
    font-style: normal;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: #22283a;
    margin: 0;
}
.testimonial-author {
    padding-top: 16px;
    border-top: 1px solid rgba(0, 33, 97, 0.08);
}
.testimonial-author img {
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    border: 3px solid var(--yev-gold);
    box-shadow: 0 6px 14px -8px rgba(0, 33, 97, 0.55);
}
.testimonial-author strong { font-size: 1rem; }
.testimonial-author span { color: #4a5468; font-size: 0.875rem; }
.testimonial-more {
    font-size: 0.9375rem;
    gap: 8px;
}
.testimonial-more:hover { text-decoration: none; }
@media (prefers-reduced-motion: no-preference) {
    .testimonials-grid .testimonial.ix-reveal:nth-child(2) { animation-range: entry 4% cover 28%; }
    .testimonials-grid .testimonial.ix-reveal:nth-child(3) { animation-range: entry 8% cover 32%; }
    .testimonials-grid .testimonial.ix-reveal:nth-child(4) { animation-range: entry 12% cover 36%; }
}
@media (prefers-reduced-motion: reduce) {
    .testimonial, .testimonial::before, .testimonial::after { transition: none; }
    .testimonial:hover { transform: none; }
}

/* ==========================================================================
   8. Card character (v9.13.0)
   No plain white rounded boxes. Each family of card gets its own detail,
   all drawn from the same language: the blueprint grid, gold marks, navy rules.
   The grid and corner marks are layered backgrounds, so no card needs an
   extra element and existing ::before / ::after rules stay untouched.
   ========================================================================== */
:root {
    --ink-line: rgba(0, 33, 97, 0.075);
}

/* ---- A. Blueprint cards: grid in the top-right corner, gold corner mark ---- */
:is(.credential, .addons li, .ble-col, .proof, .mode:not(.mode--dark), .contact-card, .related-links, .qa-panel, .case-card) {
    --bp-mark: 26px;
    --bp-at: 12px;
    background-color: #fff;
    background-image:
        linear-gradient(var(--yev-gold), var(--yev-gold)),
        linear-gradient(var(--yev-gold), var(--yev-gold)),
        radial-gradient(280px circle at 100% 0%, rgba(255, 255, 255, 0) 0%, #fff 100%),
        linear-gradient(var(--ink-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--ink-line) 1px, transparent 1px);
    background-size: var(--bp-mark) 3px, 3px var(--bp-mark), 100% 100%, 22px 22px, 22px 22px;
    background-position: var(--bp-at) var(--bp-at), var(--bp-at) var(--bp-at), 0 0, right -1px top -1px, right -1px top -1px;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
    border: 1px solid rgba(0, 33, 97, 0.12);
    transition: background-size .5s var(--ix-ease), border-color .3s ease, transform .45s var(--ix-ease), box-shadow .45s var(--ix-ease);
}
.qa-panel { --bp-mark: 32px; padding: clamp(30px, 3.4vw, 40px) clamp(22px, 3vw, 34px) clamp(22px, 3vw, 32px) clamp(32px, 3.6vw, 42px); }
.addons li { --bp-at: 8px; --bp-mark: 18px; padding: 24px 20px 18px 30px; }
.credential { --bp-at: 10px; }
:is(.credential, .ble-col, .proof, .mode:not(.mode--dark), .contact-card, .related-links, .case-card):hover {
    --bp-mark: 46px;
    border-color: rgba(1, 65, 162, 0.32);
    box-shadow: 0 1px 0 rgba(0, 33, 97, 0.04), 0 22px 44px -26px rgba(0, 33, 97, 0.38);
}
.addons li:hover { --bp-mark: 32px; border-color: rgba(1, 65, 162, 0.32); }
.credential:hover, .addons li:hover, .proof:hover { transform: translateY(-3px); }

/* ---- B. Case studies: the corner mark, plus an outlined case number ---- */
.case-list { counter-reset: yevcase 1; }
.case-card { position: relative; counter-increment: yevcase; }
.case-card::after {
    content: counter(yevcase, decimal-leading-zero);
    position: absolute;
    top: 10px;
    right: 18px;
    font-size: clamp(2.5rem, 2rem + 2vw, 3.75rem);
    font-weight: 900;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(0, 33, 97, 0.16);
    pointer-events: none;
    transition: -webkit-text-stroke-color .4s ease, transform .5s var(--ix-ease);
}
.case-card:hover::after { -webkit-text-stroke-color: var(--yev-gold-deep); transform: translateY(2px); }

/* ---- C. Testimonial cards: quote mark and a navy line that fills on hover ---- */
.tcard {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(0, 33, 97, 0.09);
    box-shadow: 0 1px 0 rgba(0, 33, 97, 0.04), 0 18px 40px -28px rgba(0, 33, 97, 0.35);
    transition: transform .45s var(--ix-ease), box-shadow .45s var(--ix-ease);
}
.tcard::before {
    content: "\201D";
    position: absolute;
    top: -14px;
    right: 14px;
    font-size: 7rem;
    line-height: 1;
    font-weight: 900;
    color: rgba(254, 212, 42, 0.45);
    pointer-events: none;
    transition: transform .5s var(--ix-ease), color .3s ease;
}
.tcard::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    width: 30%;
    background: var(--yev-navy);
    border-radius: 0 0 4px 0;
    transition: width .6s var(--ix-ease);
}
.tcard > * { position: relative; }
.tcard:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(0, 33, 97, 0.04), 0 28px 54px -28px rgba(0, 33, 97, 0.45); }
.tcard:hover::before { transform: translateY(4px) rotate(6deg); color: var(--yev-gold); }
.tcard:hover::after { width: 100%; }
.ts-quote {
    position: relative;
    background-color: #f7f9fc;
    background-image:
        radial-gradient(180px circle at 100% 0%, rgba(247, 249, 252, 0) 0%, #f7f9fc 100%),
        linear-gradient(var(--ink-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--ink-line) 1px, transparent 1px);
    background-size: 100% 100%, 18px 18px, 18px 18px;
    background-position: 0 0, right -1px top -1px, right -1px top -1px;
    border-left-width: 4px;
}

/* ---- D. Contact form and the timing note ---- */
.contact-form-wrap {
    position: relative;
    border-top: 6px solid var(--yev-navy);
    background-color: #fff;
    background-image:
        radial-gradient(320px circle at 100% 0%, rgba(255, 255, 255, 0) 0%, #fff 100%),
        linear-gradient(var(--ink-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--ink-line) 1px, transparent 1px);
    background-size: 100% 100%, 24px 24px, 24px 24px;
    background-position: 0 0, right -1px top -1px, right -1px top -1px;
}
.timing-box {
    position: relative;
    background: #fffaf0;
    border: 1px dashed rgba(0, 33, 97, 0.22);
    border-left: 5px solid var(--yev-gold);
    border-radius: 6px 16px 16px 6px;
    box-shadow: 0 10px 22px -18px rgba(0, 33, 97, 0.45);
}
.contact-form-wrap input:focus-visible,
.contact-form-wrap textarea:focus-visible,
.contact-form-wrap select:focus-visible {
    outline: 3px solid var(--yev-gold);
    outline-offset: 1px;
    border-color: var(--yev-navy);
}

/* ---- E. Long documents: Legal and the numbers page ---- */
.legal-container {
    border-top: 6px solid var(--yev-navy);
    background-color: #fff;
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0) 0, #fff 220px),
        linear-gradient(var(--ink-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--ink-line) 1px, transparent 1px);
    background-size: 100% 100%, 26px 26px, 26px 26px;
    background-repeat: no-repeat, repeat, repeat;
}
.legal-container .lg-doc { position: relative; padding-bottom: 12px; }
.legal-container .lg-doc::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 4px;
    border-radius: 4px;
    background: var(--yev-gold);
}
.legal-container h3 { position: relative; padding-left: 16px; }
.legal-container h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em;
    bottom: 0.2em;
    width: 4px;
    border-radius: 4px;
    background: var(--yev-gold);
}
.nb-math {
    border-left: 4px solid var(--yev-royal);
    border-radius: 4px 12px 12px 4px;
}

/* ---- F. Portfolio cards and question chips ---- */
.pf2-card:not(.pf2-card--nb) .pf2-body {
    --bp-mark: 26px;
    background-color: #fff;
    background-image:
        linear-gradient(var(--yev-gold), var(--yev-gold)),
        linear-gradient(var(--yev-gold), var(--yev-gold)),
        radial-gradient(240px circle at 100% 0%, rgba(255, 255, 255, 0) 0%, #fff 100%),
        linear-gradient(var(--ink-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--ink-line) 1px, transparent 1px);
    background-size: var(--bp-mark) 3px, 3px var(--bp-mark), 100% 100%, 22px 22px, 22px 22px;
    background-position: 12px 12px, 12px 12px, 0 0, right -1px top -1px, right -1px top -1px;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
    border-top: 3px solid var(--yev-gold);
    transition: background-size .5s var(--ix-ease);
}
.pf2-card:not(.pf2-card--nb):hover .pf2-body { --bp-mark: 46px; }
/* question chips: the number sits in its own gold-tinted column */
.qa-q {
    background-image: linear-gradient(90deg, rgba(254, 212, 42, 0.22) 0, rgba(254, 212, 42, 0.22) 3.1em, rgba(0, 33, 97, 0.1) 3.1em, rgba(0, 33, 97, 0.1) calc(3.1em + 1px), transparent calc(3.1em + 1px));
    padding-left: 12px;
}
.qa-q .qa-num { min-width: 2.2em; text-align: center; }
.qa-q[aria-selected="true"] { background-image: linear-gradient(90deg, rgba(254, 212, 42, 0.16) 0, rgba(254, 212, 42, 0.16) 3.1em, transparent 3.1em); }
.qa-q:not([aria-selected="true"]):hover { box-shadow: inset 4px 0 0 0 var(--yev-gold); }

@media (prefers-reduced-motion: reduce) {
    :is(.credential, .addons li, .ble-col, .proof, .mode, .contact-card, .related-links, .qa-panel, .case-card, .tcard, .pf2-card .pf2-body) { transition: none; }
    :is(.credential, .addons li, .proof, .tcard):hover { transform: none; }
}
@media (forced-colors: active) {
    .case-card::after { -webkit-text-stroke-color: CanvasText; }
}

/* ==========================================================================
   9. Buttons and links (v9.13.0)
   Three tiers, same on every page:
     Gold     = the main action in a section (book, claim, send). One per section.
     Outline  = the second choice. Navy on light sections, white on dark ones.
                Kept clearly visible: faint outlines get missed (NN/g eyetracking).
     Text link with arrow = "read more" style paths. The arrow is drawn here, so
                link text in the markup and translations has no typed arrow.
   Motion: gold gets a light sweep, a small lift and a press-in; outline fills
   left to right; text links nudge the arrow and slide an underline in. All
   motion sits behind prefers-reduced-motion. Targets stay 44px or larger.
   ========================================================================== */
:root {
    --btn-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M8.5 3.5 13 8l-4.5 4.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --btn-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6 8 10.5 12.5 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- Gold ---------- */
.btn-primary,
.btn-submit {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    min-height: 46px;
    padding: 12px 26px;
    border: 0;
    border-radius: 999px;
    background: var(--yev-gold);
    color: var(--yev-navy);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    filter: none;
    box-shadow: inset 0 0 0 1.5px var(--yev-gold-deep), 0 2px 0 var(--yev-gold-deep), 0 12px 24px -14px rgba(0, 20, 60, 0.6);
    transition: transform .25s var(--ix-ease), box-shadow .25s var(--ix-ease), background-color .2s ease;
}
.btn-primary::before,
.btn-submit::before {
    /* the light sweep */
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg, transparent 28%, rgba(255, 255, 255, 0.6) 50%, transparent 72%);
    transform: translateX(-120%);
    pointer-events: none;
}
.btn-primary:hover,
.btn-submit:hover {
    background: #ffdc4f;
    filter: none;
    box-shadow: inset 0 0 0 1.5px var(--yev-gold-deep), 0 2px 0 var(--yev-gold-deep), 0 18px 30px -14px rgba(0, 20, 60, 0.7);
}
.btn-primary:active,
.btn-submit:active {
    box-shadow: inset 0 0 0 1.5px var(--yev-gold-deep), 0 0 0 var(--yev-gold-deep), 0 6px 12px -10px rgba(0, 20, 60, 0.6);
}
.btn-primary:focus-visible,
.btn-submit:focus-visible {
    /* white ring shows on navy, the royal ring outside it shows on light */
    outline: 3px solid #fff;
    outline-offset: 2px;
    box-shadow: inset 0 0 0 1.5px var(--yev-gold-deep), 0 0 0 8px var(--yev-royal);
}
.btn-submit[aria-busy="true"] { cursor: progress; }
.btn-submit[aria-busy="true"]::after {
    content: '';
    width: 1em;
    height: 1em;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-right-color: transparent;
    animation: btnSpin .8s linear infinite;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }

/* ---------- Outline ---------- */
.btn-ghost-light,
.btn-ghost,
.readmore-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    min-height: 46px;
    padding: 11px 24px;
    border-radius: 999px;
    border: 2px solid var(--yev-navy);
    color: var(--yev-navy);
    background-color: rgba(0, 33, 97, 0.05);
    background-image: linear-gradient(var(--yev-navy), var(--yev-navy));
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 0% 100%;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-size .45s var(--ix-ease), color .3s ease, transform .25s var(--ix-ease), box-shadow .25s var(--ix-ease);
}
.btn-ghost-light:hover,
.btn-ghost:hover,
.readmore-btn:hover {
    background-size: 100% 100%;
    color: #fff;
    box-shadow: 0 14px 26px -16px rgba(0, 20, 60, 0.6);
}
.btn-ghost-light:focus-visible,
.btn-ghost:focus-visible,
.readmore-btn:focus-visible {
    outline: 3px solid var(--yev-royal);
    outline-offset: 3px;
}
/* on dark: white outline over a dark glass fill so it holds up on the photo */
.btn-ghost,
#ws-featured .readmore-btn {
    border-color: rgba(255, 255, 255, 0.9);
    color: #fff;
    background-color: rgba(0, 20, 60, 0.35);
    background-image: linear-gradient(#fff, #fff);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.btn-ghost:hover,
#ws-featured .readmore-btn:hover {
    background-color: rgba(0, 20, 60, 0.35);
    border-color: #fff;
    color: var(--yev-navy);
}
.btn-ghost:focus-visible,
#ws-featured .readmore-btn:focus-visible { outline-color: #fff; }
#ws-featured .readmore-btn { border-color: var(--yev-gold); background-image: linear-gradient(var(--yev-gold), var(--yev-gold)); }
#ws-featured .readmore-btn:hover { border-color: var(--yev-gold); }
/* Read more / Show less: smaller, with a chevron that flips when open */
.readmore-btn {
    min-height: 44px;
    padding: 8px 18px 8px 20px;
    font-size: 0.875rem;
}
.readmore-btn::after {
    content: '';
    width: 1em;
    height: 1em;
    background: currentColor;
    -webkit-mask: var(--btn-chev) center / contain no-repeat;
    mask: var(--btn-chev) center / contain no-repeat;
    transition: transform .3s var(--ix-ease);
}
.readmore-btn[aria-expanded="true"]::after { transform: rotate(180deg); }

/* ---------- Text link with arrow ---------- */
.tie-link,
.arrow-link,
.cs-readmore,
.testimonial-more,
.qa-next,
.proof-how a {
    display: inline-flex;
    align-items: center;
    gap: 0;
    font-weight: 700;
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: transparent;
    text-underline-offset: 8px;
    transition: text-decoration-color .3s ease, text-underline-offset .3s var(--ix-ease);
}
.tie-link::after,
.arrow-link::after,
.cs-readmore::after,
.testimonial-more::after,
.qa-next::after,
.proof-how a::after {
    content: '';
    flex: none;
    width: 1em;
    height: 1em;
    margin-left: 0.4em;
    border-radius: 0;
    background: currentColor;
    -webkit-mask: var(--btn-arrow) center / contain no-repeat;
    mask: var(--btn-arrow) center / contain no-repeat;
    transition: transform .3s var(--ix-ease);
}
.tie-link:hover, .tie-link:focus-visible,
.arrow-link:hover, .arrow-link:focus-visible,
.cs-readmore:hover, .cs-readmore:focus-visible,
.testimonial-more:hover, .testimonial-more:focus-visible,
.qa-next:hover, .qa-next:focus-visible,
.proof-how a:hover, .proof-how a:focus-visible {
    text-decoration-line: underline;
    text-decoration-color: currentColor;
    text-underline-offset: 4px;
    opacity: 1;
}
.arrow-link:hover::after, .arrow-link:focus-visible::after { width: 1em; }
.cs-readmore .rm-arrow { display: none; }
.cs-readmore:hover .rm-label { text-decoration: none; }
.proof-how a { color: inherit; }
/* Home testimonials: the whole card is the link (screen readers still hear the link text) */
.testimonial .testimonial-more::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}
.testimonial:has(.testimonial-more) { cursor: pointer; }
.testimonial:hover .testimonial-more { text-decoration-color: currentColor; text-underline-offset: 4px; }

/* ---------- Nav gold buttons share the press feel ---------- */
.yn-cta, .yn-dock-cta { transition: transform .25s var(--ix-ease), box-shadow .25s var(--ix-ease), background-color .2s ease; }
.yn-cta:hover, .yn-dock-cta:hover { background: #ffdc4f; }

@media (prefers-reduced-motion: no-preference) {
    .btn-primary:hover, .btn-submit:hover { transform: translateY(-2px); }
    .btn-primary:hover::before, .btn-submit:hover::before { transform: translateX(120%); transition: transform .75s var(--ix-ease); }
    .btn-primary:active, .btn-submit:active,
    .yn-cta:active, .yn-dock-cta:active { transform: translateY(0) scale(0.97); transition-duration: .08s; }
    .btn-ghost-light:hover, .btn-ghost:hover { transform: translateY(-2px); }
    .btn-ghost-light:active, .btn-ghost:active, .readmore-btn:active { transform: translateY(0) scale(0.97); transition-duration: .08s; }
    .tie-link:hover::after, .tie-link:focus-visible::after,
    .arrow-link:hover::after, .arrow-link:focus-visible::after,
    .cs-readmore:hover::after, .cs-readmore:focus-visible::after,
    .testimonial-more:hover::after, .testimonial-more:focus-visible::after,
    .testimonial:hover .testimonial-more::after,
    .qa-next:hover::after, .qa-next:focus-visible::after,
    .proof-how a:hover::after, .proof-how a:focus-visible::after { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
    .btn-primary, .btn-submit, .btn-ghost-light, .btn-ghost, .readmore-btn,
    .tie-link, .arrow-link, .cs-readmore, .testimonial-more, .qa-next, .proof-how a { transition: none; }
    .btn-submit[aria-busy="true"]::after { animation-duration: 2.4s; }
}
@media (forced-colors: active) {
    .btn-primary, .btn-submit, .btn-ghost-light, .btn-ghost, .readmore-btn { border: 2px solid ButtonText; }
    .tie-link::after, .arrow-link::after, .cs-readmore::after, .testimonial-more::after, .qa-next::after, .proof-how a::after, .readmore-btn::after { background: LinkText; }
}