/* ==========================================================================
   GTS Direct — basic-hunchfree theme

   Sizes, colours and spacing are measured from the original Kadence site
   (gtsdirect.com) at 1440 / 1024 / 375px unless a comment says otherwise.

   Contents
     1.  Fonts
     2.  Tokens
     3.  Base
     4.  Shared patterns (accent line, dot bullets, gold corners, rich text)
     5.  Buttons
     6.  Header & navigation
     7.  Hero
     8.  Section tabs
     9.  Sections (backgrounds, padding, gold edges, headers)
     10. Builder layouts
     11. "Get Started" call to action (above the footer)
     12. Templates (specialty, news, single post, search, 404)
     13. Forms
     14. Dialogs
     15. Footer
     16. Reduced motion
   ========================================================================== */

/* ==========================================================================
   1. Fonts (self-hosted)
   ========================================================================== */

@font-face {
    font-family: "Antenna Extra Condensed";
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/AntennaExtraCond-Bold.woff2") format("woff2");
}

@font-face {
    font-family: "Antenna Extra Condensed";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/Antenna-Extra-Condensed-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "Antenna Extra Condensed";
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/AntennaExtraCond-ExtraLight.woff2") format("woff2");
}

@font-face {
    font-family: "Myriad Pro";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/MyriadPro-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "Myriad Pro";
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/MyriadPro-Semibold.woff2") format("woff2");
}

@font-face {
    font-family: "Myriad Pro";
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/MyriadPro-Bold.woff2") format("woff2");
}

/* ==========================================================================
   2. Tokens
   ========================================================================== */

:root {
    /* Palette */
    --color-navy-900: #001a37;
    --color-navy-700: #002c5b;
    --color-navy-500: #1159af;
    --color-gold-600: #996815;  /* button hover */
    --color-gold-500: #cb8c22;
    --color-blue-100: #e1ebff;
    --color-blue-200: #b4cdff;
    --color-gray-900: #1a202c;
    --color-gray-700: #2d3748;
    --color-gray-500: #4a5568;
    --color-white: #ffffff;

    /* Roles (primary / accent are overridden from Theme Settings in wp_head) */
    --color-brand-primary: var(--color-navy-700);
    --color-brand-accent: var(--color-gold-500);
    --color-text: var(--color-gray-900);

    --font-heading: "Antenna Extra Condensed", "Arial Narrow", sans-serif;
    --font-body: "Myriad Pro", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Layout */
    --container: 1280px;
    --container-narrow: 860px;
    --gutter: clamp(16px, 4vw, 32px);
    --section-pad: clamp(56px, 8vw, 104px);
    --header-h: 93px;
    --transition: .2s ease;

    /* Type scale — the live site's global sizes; tablet / phone values below */
    --fs-h1: 96px;
    --fs-h2: 61px;
    --fs-h3: 48px;
    --fs-h4: 35px;
    --fs-h5: 24px;
    --fs-lg: 20px;    /* large copy (intros, statements) */
    --fs-body: 18px;  /* body copy in cards, lists, footer */
    --fs-btn: 16px;
    --fs-label: 24px; /* list labels: charity list, award names, case-study headings */
    --lh-h1: 1;
    --lh-h2: 1.1;
    --lh-h3: 1.2;
    --lh-body: 1.2;

    /* Gold edges and accent lines */
    --edge: 12px;            /* gold border between major bands */
    --line-h: 6px;           /* accent line thickness */
    --eyebrow-to-line: 12px;
    --line-to-heading: 16px;
}

@media (max-width: 1024px) {
    :root {
        --fs-h1: 72px;
        --fs-h2: 48px;
        --fs-h3: 36px;
        --fs-h4: 28px;
        --fs-h5: 18px;
        --fs-lg: 18px;
        --fs-body: 16px;
        --fs-label: 20px;
        --lh-h1: 1.1;
        --lh-h2: 1.2;
        --lh-h3: 1.3;
        --lh-body: 1.5;
    }
}

@media (max-width: 767px) {
    :root {
        --fs-h1: 48px;
        --fs-h2: 34px;
        --fs-h3: 28px;
        --fs-h4: 22px;
        --fs-lg: 16px;
        --fs-body: 14px;
        --fs-btn: 14px;
        --fs-label: 18px;
        --lh-h1: 1.2;
    }
}

/* ==========================================================================
   3. Base
   ========================================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 16px;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-white);
    -webkit-font-smoothing: antialiased;
}

body.nav-open {
    overflow: hidden;
}

img,
svg,
video,
iframe {
    max-width: 100%;
}

img {
    display: block;
    height: auto;
}

a {
    color: var(--color-brand-primary);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--color-brand-accent);
}

:focus-visible {
    outline: 3px solid var(--color-brand-accent);
    outline-offset: 3px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 .5em;
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--color-brand-primary);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
h4 { font-size: 1.6rem; }
h5 { font-size: 1.35rem; }
h6 { font-size: 1rem; }

p {
    margin: 0 0 1em;
}

/* *word* in headings → gold highlight (see gts_heading_html) */
.hl {
    color: var(--color-brand-accent);
}

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -60px;
    left: 16px;
    z-index: 1000;
    padding: 10px 16px;
    background: var(--color-white);
}

.skip-link:focus {
    top: 16px;
}

.container {
    width: 100%;
    max-width: calc(var(--container) + var(--gutter) * 2);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.container--narrow {
    max-width: calc(var(--container-narrow) + var(--gutter) * 2);
}

.text-center {
    text-align: center;
}

/* ==========================================================================
   4. Shared patterns
   ========================================================================== */

/* Accent line: a 62 × 6px gold bar above a heading ------------------------ */
.news-post__title::before,
.news-post__body h2::before,
.split__title-above::before,
.section-header--intro .section-title::before,
.text-block:not(:has(.eyebrow)) .section-title::before,
.heading-split__heading:not(:has(.eyebrow)) .section-title::before {
    content: "";
    display: block;
    width: 62px;
    height: var(--line-h);
    margin-bottom: var(--line-to-heading);
    background: var(--color-brand-accent);
}

.split__title-above::before,
.section-header--intro .section-title::before,
.text-block.align-center .section-title::before {
    margin-inline: auto;
}

/* Dot bullet: navy circle with a gold ring --------------------------------- */
.feature-boxes__dot,
.feature .checklist li::before,
.list-card__list li::before,
.case-full .rte li::before {
    width: 16px;
    height: 16px;
    background: var(--color-brand-primary);
    border: 4px solid var(--color-brand-accent);
    border-radius: 50%;
}

.feature .checklist li::before,
.list-card__list li::before,
.case-full .rte li::before {
    content: "";
}

.feature-boxes__dot {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}

.feature .checklist li::before {
    width: 18px;
    height: 18px;
}

.case-full .rte li::before {
    border-width: 3px;
}

/* Gold corners: L-shaped accents off the top-left and bottom-right -------- */
.corner-frame {
    position: relative;
}

.corner-frame::before,
.corner-frame::after {
    content: "";
    position: absolute;
    width: 28px;
    height: 27px;
    border: 0 solid var(--color-brand-accent);
}

.corner-frame::before {
    top: -18px;
    left: -18px;
    border-top-width: 6px;
    border-left-width: 6px;
}

.corner-frame::after {
    right: -18px;
    bottom: -18px;
    border-right-width: 6px;
    border-bottom-width: 6px;
}

/* Rich text (WYSIWYG output) ----------------------------------------------- */
.rte > :last-child {
    margin-bottom: 0;
}

.rte ul,
.rte ol {
    margin: 0 0 1em;
    padding-left: 1.2em;
}

.rte li {
    margin-bottom: .35em;
}

.rte img {
    margin: 1.5em 0;
}

.rte h2,
.rte h3,
.rte h4 {
    margin-top: 1.2em;
}

.rte blockquote {
    margin: 1.5em 0;
    padding-left: 1em;
    font-style: italic;
    border-left: 4px solid var(--color-brand-accent);
}

/* ==========================================================================
   5. Buttons — Myriad 16px bold caps, 14 × 28px, square (the live site's
      global button). Hover darkens gold buttons, as on the live site.
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    padding: 14px 28px;
    font-family: var(--font-body);
    font-size: var(--fs-btn);
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}

.btn-primary {
    color: var(--color-white);
    background: var(--color-brand-accent);
}

.btn-primary:hover {
    color: var(--color-white);
    background: var(--color-gold-600);
}

.btn-outline {
    color: var(--color-white);
    background: transparent;
    border: 2px solid var(--color-white);
}

.btn-outline:hover {
    color: var(--color-brand-primary);
    background: var(--color-white);
}

.btn-navy {
    color: var(--color-white);
    background: var(--color-brand-primary);
}

.btn-navy:hover {
    color: var(--color-white);
    background: var(--color-navy-900);
}

.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 32px;
}

.btn-group--center {
    justify-content: center;
}

/* ==========================================================================
   6. Header & navigation
   ========================================================================== */

.site-header {
    position: relative;
    z-index: 100;
    background: var(--color-brand-primary);
    border-bottom: var(--edge) solid var(--color-brand-accent);
}

.site-header__inner {
    display: flex;
    align-items: center;
    min-height: var(--header-h);
    max-width: calc(1295px + 50px);
    padding: 0 25px;
}

.site-logo {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    color: var(--color-white);
    text-decoration: none;
}

.site-logo__text {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.site-header .site-logo img {
    width: 105px;
}

.primary-nav {
    display: flex;
    flex: 1;
    align-items: center;
    margin-left: clamp(16px, 9.9vw, 142px);
}

.primary-nav__menu {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.primary-nav__menu a {
    display: block;
    padding: 10.8px 25px;
    font-size: var(--fs-body);
    font-weight: 600;
    line-height: var(--lh-body);
    text-decoration: none;
    text-transform: uppercase;
    color: var(--color-white);
    transition: color var(--transition);
}

.primary-nav__menu a:hover,
.primary-nav__menu a:focus-visible,
.primary-nav__menu .current-menu-item > a,
.primary-nav__menu .current-menu-ancestor > a,
.primary-nav__menu .current_page_parent > a {
    color: var(--color-brand-accent);
}

.primary-nav__actions {
    display: flex;
    gap: 10px;
    margin-left: auto;
}

.primary-nav__actions .btn {
    border: 2px solid var(--color-brand-accent);
}

.primary-nav__actions .btn:hover {
    box-shadow: 0 15px 25px -7px rgba(0, 0, 0, .1);
}

.primary-nav__actions .btn-primary:hover {
    border-color: var(--color-gold-600);
}

/* "Contact" — navy with a white outline; turns gold on hover */
.primary-nav__actions .btn-outline {
    background: var(--color-brand-primary);
    border-color: var(--color-white);
}

.primary-nav__actions .btn-outline:hover {
    color: var(--color-white);
    background: var(--color-brand-accent);
    border-color: var(--color-brand-accent);
}

/* 1025–1200px: centre the menu between the logo and the buttons */
@media (min-width: 1025px) and (max-width: 1200px) {
    .primary-nav,
    .primary-nav__actions {
        margin-left: 0;
    }

    .primary-nav__menu {
        margin-inline: auto;
    }
}

/* tighter spacing on small desktops */
@media (min-width: 1025px) and (max-width: 1340px) {
    .primary-nav__menu a {
        padding-inline: clamp(10px, 1.6vw, 25px);
    }

    .primary-nav__actions .btn {
        padding-inline: clamp(14px, 1.8vw, 28px);
    }
}

/* Menu toggle (hamburger) */
.nav-toggle {
    display: none;
    height: 46px;
    margin-left: auto;
    padding: 0 8.4px;
    color: var(--color-white);
    background: none;
    border: 0;
    cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
    position: relative;
    display: block;
    width: 35px;
    height: 3px;
    background: currentColor;
    transition: transform var(--transition), background-color var(--transition);
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
    content: "";
    position: absolute;
    left: 0;
}

.nav-toggle__bars::before { top: -10px; }
.nav-toggle__bars::after { top: 10px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
    background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
    transform: translateY(10px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
    transform: translateY(-10px) rotate(-45deg);
}

.nav-close,
.nav-overlay {
    display: none;
}

/* no slide/fade while the window is being resized (set by app.js) */
.is-resizing :is(.primary-nav, .nav-overlay) {
    transition: none !important;
}

/* Mobile: off-canvas drawer from the right (the original Kadence drawer) */
@media (max-width: 1024px) {
    .nav-toggle {
        display: block;
    }

    .nav-overlay {
        position: fixed;
        inset: 0;
        z-index: 998;
        display: block;
        background: rgba(0, 0, 0, .4);
        visibility: hidden;
        opacity: 0;
        transition: opacity .25s ease, visibility 0s linear .25s;
    }

    .nav-open .nav-overlay {
        visibility: visible;
        opacity: 1;
        transition-delay: 0s;
    }

    .primary-nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 999;
        flex-direction: column;
        align-items: stretch;
        width: 90%;
        margin: 0;
        padding: 53px 21px 21px;
        overflow-y: auto;
        background: #090c10;
        visibility: hidden;
        opacity: 0;
        transform: translateX(100%);
        transition: transform .3s ease, opacity .3s ease, visibility 0s linear .3s;
    }

    .primary-nav.is-open {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition-delay: 0s;
    }

    .admin-bar .primary-nav {
        top: 46px;
    }

    .nav-close {
        position: absolute;
        top: 0;
        right: 21px;
        display: block;
        width: 31px;
        height: 53px;
        padding: 0;
        color: var(--color-white);
        background: none;
        border: 0;
        cursor: pointer;
    }

    .nav-close span {
        position: absolute;
        top: 50%;
        left: 4px;
        width: 24px;
        height: 2px;
        background: currentColor;
    }

    .nav-close span:first-child { transform: rotate(45deg); }
    .nav-close span:last-child { transform: rotate(-45deg); }

    .primary-nav__menu {
        flex-direction: column;
    }

    .primary-nav__menu a {
        padding: 14px 7px;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.5;
        text-transform: none;
        color: var(--color-blue-100);
        border-bottom: 1px solid rgba(255, 255, 255, .1);
    }

    .primary-nav__actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        margin: 25px 0 0;
    }

    .primary-nav__actions .btn {
        font-size: 14px;
    }

    .primary-nav__actions .btn-primary {
        border-width: 0;
    }

    .primary-nav__actions .btn-outline,
    .primary-nav__actions .btn-outline:hover {
        background: transparent;
    }

    .primary-nav__actions .btn-outline:hover {
        border-color: var(--color-brand-accent);
    }
}

@media (min-width: 783px) and (max-width: 1024px) {
    .admin-bar .primary-nav {
        top: 32px;
    }
}

/* ==========================================================================
   7. Hero — "home" (homepage) and "banner" (interior pages)
   ========================================================================== */

.hero {
    position: relative;
    isolation: isolate;
    color: var(--color-white);
    background: var(--color-brand-primary) var(--hero-bg, none) var(--hero-pos, 50% 50%) / cover no-repeat;
    border-bottom: var(--edge) solid var(--color-brand-accent);
}

/* overlay */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
}

.hero__inner {
    position: relative;
}

.hero__title {
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    color: var(--color-white);
}

/* Home: navy gradient from the left, eyebrow / title / text / buttons / video link */
.hero--home::before {
    background: linear-gradient(257deg, rgba(0, 44, 91, 0) 0%, rgb(0, 44, 91) 80%);
    opacity: .96;
}

.hero--home .hero__inner {
    max-width: calc(1295px + var(--gutter) * 2);
    padding-block: 150px;
}

.hero__eyebrow {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    font-weight: 400;
    line-height: var(--lh-h3);
    text-transform: uppercase;
    color: var(--color-brand-accent);
}

.hero__eyebrow .hl {
    font-weight: 700;
}

.hero--home .hero__title {
    max-width: 508px;
    margin: 24px 0;
}

.hero__text {
    max-width: 635px;
    margin: 0;
    font-size: var(--fs-lg);
    line-height: 1.6;
}

.hero__buttons {
    gap: 23px;
    margin-top: 24px;
}

.hero__video {
    display: inline-flex;
    align-items: center;
    gap: .6em;
    margin-top: 31px;
    padding: 0;
    font-family: var(--font-heading);
    font-size: var(--fs-h4);
    font-weight: 400;
    letter-spacing: .02em;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    color: var(--color-brand-accent);
    background: none;
    border: 0;
    cursor: pointer;
}

.hero__video:hover {
    color: var(--color-white);
}

/* Banner: 578px tall, centred title over a 78% navy overlay */
.hero--banner {
    display: flex;
    align-items: center;
    min-height: 578px;
}

.hero--banner::before {
    background: rgba(0, 44, 91, .78);
}

.hero--banner .hero__inner {
    padding-block: 100px;
    text-align: center;
}

.hero--banner .hero__title {
    margin: 0;
}

/* news posts: "GTS News" banner on the section-title scale */
.single-post .hero__title {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
}

/* specialty icon above the title: the file is shown at half its pixel size
   (sharp on high-density screens), with a gold ring outside it */
.hero__icon {
    margin-bottom: 24px;
}

.hero__icon img {
    box-sizing: content-box;
    margin: 0 auto;
    border: 4px solid var(--color-brand-accent);
    border-radius: 50%;
}

@media (max-width: 1024px) {
    .hero--home .hero__inner {
        padding-block: 100px;
    }

    .hero--banner {
        min-height: 450px;
    }

    .hero--banner .hero__inner {
        padding-block: 75px;
    }

}

@media (max-width: 767px) {
    .hero--home .hero__inner {
        padding-block: 75px;
    }

    .hero--banner {
        min-height: 320px;
    }
}

/* ==========================================================================
   8. Section tabs (About Us / Team / History …) — 300 × 80px boxes with a
      3px white border; all tabs on one row on wide screens, then 3 (5+ tabs)
      or 2 per row, then 2, then 1. --tabs / --tabs-mid come from the markup.
   ========================================================================== */

.section-nav {
    padding: 65px 0 106px;
    background: var(--color-brand-primary);
}

.section-nav__list {
    --per-row: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.section-nav__list > li {
    flex: 0 0 min(300px, calc((100% - (var(--per-row) - 1) * 24px) / var(--per-row)));
}

.section-nav__link {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 80px;
    padding: 16px 24px;
    font-family: var(--font-heading);
    font-size: var(--fs-h4);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    color: var(--color-white);
    border: 3px solid var(--color-white);
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.section-nav__link:hover,
.section-nav__link.is-active {
    background: var(--color-brand-accent);
    border-color: var(--color-brand-accent);
}

/* stays white inside dark/photo sections, whose link hover turns links gold */
.section-nav li > a.section-nav__link:is(:link, :visited, :hover, :focus) {
    color: var(--color-white);
}

/* the tabs and the first navy section read as one block */
.section-nav + .section.bg-navy {
    padding-top: 40px;
}

/* tabs inside a photo section (e.g. About Us): no band of their own */
.section-nav--inline {
    padding: 0 0 80px;
    background: none;
}

.section.has-section-nav {
    padding-top: 65px;
}

.section.has-section-nav.pad-default {
    padding-bottom: calc(var(--section-pad) + 40px);
}

@media (min-width: 680px) {
    .section-nav__list { --per-row: 2; }
}

@media (min-width: 1025px) {
    .section-nav__list { --per-row: var(--tabs-mid, 2); }
}

@media (min-width: 1320px) {
    .section-nav__list { --per-row: var(--tabs, 4); }
}

@media (max-width: 1024px) {
    .section-nav {
        padding: 50px 0 75px;
    }

    .section-nav__link {
        min-height: 64px;
    }
}

@media (max-width: 679px) {
    .section-nav__list {
        gap: 12px;
    }
}

/* ==========================================================================
   9. Sections — wrapper for every builder layout (Section Settings)
   ========================================================================== */

/* flow-root keeps child margins inside, so sections never leave white gaps */
.section {
    position: relative;
    isolation: isolate;
    display: flow-root;
    padding-block: var(--section-pad);
}

/* Padding */
.pad-top    { padding-bottom: 0; }
.pad-bottom { padding-top: 0; }
.pad-none   { padding-block: 0; }

/* Background (Section Settings: Navy / Navy + image) */
.bg-navy,
.bg-image {
    color: var(--color-white);
    background-color: var(--color-brand-primary);
}

.bg-image {
    background-image: var(--section-bg, none);
    background-position: center;
    background-size: cover;
}

.bg-image::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(0, 44, 91, .8);
}

:is(.bg-navy, .bg-image) :is(h1, h2, h3, h4, h5, h6),
:is(.bg-navy, .bg-image) a:not(.btn) {
    color: var(--color-white);
}

:is(.bg-navy, .bg-image) a:not(.btn):hover {
    color: var(--color-brand-accent);
}

/* Gold edges */
.edges-top,
.edges-both,
.edges-top-stepped-bottom,
.edges-top-stepped-bottom-right {
    border-top: var(--edge) solid var(--color-brand-accent);
}

.edges-bottom,
.edges-both,
.edges-top-stepped-bottom,
.edges-top-stepped-bottom-right {
    border-bottom: var(--edge) solid var(--color-brand-accent);
}

/* two edges meeting: one 12px line, not 24px */
.section:is(.edges-bottom, .edges-both) + .section:is(.edges-top, .edges-both, .edges-top-stepped-bottom, .edges-top-stepped-bottom-right) {
    border-top: 0;
}

/* Stepped bottom edge (desktop): the section runs --step lower on one side
   and a diagonal joins the two levels; the next section slides up under it.
   --x1 / --x2 are where the diagonal starts and ends. */
@media (min-width: 1280px) {
    .edges-top-stepped-bottom,
    .edges-top-stepped-bottom-right {
        --step: 84px;
        z-index: 1;
        margin-bottom: calc(var(--step) * -1);
        border-bottom: 0;
    }

    .edges-top-stepped-bottom::after,
    .edges-top-stepped-bottom-right::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        height: calc(var(--step) + var(--edge));
        background: var(--color-brand-accent);
    }

    .section.edges-top-stepped-bottom + .section,
    .section.edges-top-stepped-bottom-right + .section {
        padding-top: calc(100px + 84px);
    }

    /* low on the left */
    .edges-top-stepped-bottom {
        --x1: 10.6%;
        --x2: 20%;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--step)), var(--x2) calc(100% - var(--step)), var(--x1) 100%, 0 100%);
    }

    .edges-top-stepped-bottom::after {
        clip-path: polygon(0 calc(100% - var(--edge)), calc(var(--x1) - 4px) calc(100% - var(--edge)), calc(var(--x2) - 4px) 0, 100% 0, 100% var(--edge), var(--x2) var(--edge), var(--x1) 100%, 0 100%);
    }

    .section.edges-top-stepped-bottom {
        padding-bottom: calc(79px + var(--step) + var(--edge));
    }

    /* low on the right */
    .edges-top-stepped-bottom-right {
        --x1: 53%;
        --x2: 59.4%;
        clip-path: polygon(0 0, 100% 0, 100% 100%, var(--x2) 100%, var(--x1) calc(100% - var(--step)), 0 calc(100% - var(--step)));
    }

    .edges-top-stepped-bottom-right::after {
        clip-path: polygon(0 0, var(--x1) 0, var(--x2) var(--step), 100% var(--step), 100% 100%, calc(var(--x2) - 4px) 100%, calc(var(--x1) - 4px) var(--edge), 0 var(--edge));
    }
}

/* "Overlap section above": the white box rises into the previous section (desktop) */
@media (min-width: 1025px) {
    .section.pad-overlap {
        padding: 0 0 100px;
        overflow: visible;
    }

    .section.pad-overlap :is(.faq-card, .image-panel, .list-card) {
        position: relative;
        z-index: 2;
        margin-top: -70px;
    }

    .section.pad-overlap .image-panel {
        margin-top: -140px;
    }

    /* room in the section above for the overlap plus its normal spacing */
    .section:has(+ .section--image-panel.pad-overlap) {
        padding-bottom: calc(var(--section-pad) + 140px);
    }

    .section:has(+ .section--list-card.pad-overlap) {
        padding-bottom: calc(var(--section-pad) + 70px);
    }
}

@media (max-width: 1024px) {
    .section.pad-overlap {
        padding-block: 75px;
    }
}

/* Section header: eyebrow → accent line → heading → lead → text ----------- */
.section-header {
    max-width: 860px;
    margin-bottom: 48px;
}

.section-header.text-center {
    margin-inline: auto;
}

.section-header > :last-child {
    margin-bottom: 0;
}

.section-title {
    margin-bottom: 16px;
}

.eyebrow {
    position: relative;
    margin: 0 0 var(--line-to-heading);
    padding-bottom: calc(var(--eyebrow-to-line) + var(--line-h));
    font-family: var(--font-heading);
    font-size: var(--fs-h5);
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

.eyebrow::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 62px;
    height: var(--line-h);
    background: var(--color-brand-accent);
}

.text-center .eyebrow::after,
.eyebrow--center::after,
.align-center .eyebrow::after {
    left: 50%;
    transform: translateX(-50%);
}

/* subheading: Antenna 24px bold, normal case (the original's h5 style) */
.lead {
    font-family: var(--font-heading);
    font-size: var(--fs-h5);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-brand-primary);
}

:is(.bg-navy, .bg-image) .lead {
    color: var(--color-white);
}

/* Centred intro with an accent line (Why GTS, Awards, Team, Case Studies,
   Industry Associations) */
.section-header--intro {
    max-width: 1002px;
    margin: 0 auto 75px;
    text-align: center;
}

.section-header--intro .section-title,
.section-header--intro .lead {
    margin-bottom: 35px;
}

.section-header--intro .rte {
    font-size: var(--fs-lg);
    line-height: 1.6;
}

/* Two-column heading: heading (+ subheading) left, text right, top-aligned.
   Used by Call to Action → "Split" and by section headings set to "Two columns".
   50/50 on tablet; 60/40 on desktop, or 50/50 when there's no subheading. */
.heading-split {
    display: grid;
    align-items: start;
    gap: 24px;
}

.heading-split .section-title {
    margin: 0;
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
}

.heading-split .heading-split__body p {
    margin: 0 0 32px;
    font-size: var(--fs-lg);
    line-height: 1.6;
}

.heading-split .btn-group {
    margin-top: 0;
}

/* as a section heading: full width, with the section's spacing before its content */
.section .section-header.heading-split {
    max-width: none;
    margin: 0 0 var(--section-pad);
    text-align: left;
}

@media (min-width: 768px) {
    .heading-split {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    /* text starts level with the heading, not with the accent line above it */
    .heading-split__heading:not(:has(.eyebrow)) + .heading-split__body {
        padding-top: calc(var(--line-h) + var(--line-to-heading));
    }
}

@media (min-width: 900px) {
    .heading-split:not(:has(.eyebrow)) {
        grid-template-columns: 1fr 1fr;
        gap: 64px;
    }
}

@media (min-width: 1025px) {
    .heading-split {
        grid-template-columns: 3fr 2fr;
    }
}

@media (max-width: 1024px) {
    .eyebrow,
    .lead {
        font-size: 18px;
    }
}

/* ==========================================================================
   10. Builder layouts
   ========================================================================== */

/* Text Block --------------------------------------------------------------- */
.text-block .section-header {
    margin-bottom: 24px;
}

.text-block.align-left .section-header {
    max-width: none;
}

.text-block.align-center {
    text-align: center;
}

.text-block.align-center .section-header {
    margin-inline: auto;
}

/* centred intro on navy (Our Specialties, Community, History, News …) */
.section--text-block.bg-navy.pad-default:has(.align-center) {
    padding: 160px 0 145px;
}

.bg-navy .text-block.align-center .section-header {
    max-width: 1147px;
    margin-bottom: 40px;
}

.bg-navy .text-block.align-center .section-title {
    margin-bottom: 35px;
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
}

.bg-navy .text-block.align-center .lead {
    margin: 0;
}

.bg-navy .text-block.align-center .rte {
    max-width: 976px;
    margin-inline: auto;
    font-size: var(--fs-lg);
    line-height: 1.6;
}

/* left-aligned statements on navy (Community): 35px subheads, 20px copy */
.bg-navy .text-block.align-left .rte h4 {
    margin: 0 0 17.5px;
    font-size: var(--fs-h4);
    line-height: 1.2;
    text-transform: none;
    color: var(--color-white);
}

.bg-navy .text-block.align-left .rte p {
    margin: 0 0 32px;
    font-size: var(--fs-lg);
    line-height: 1.6;
}

.bg-navy .text-block.align-left:has(.image-row) {
    max-width: 1151px;
    margin-inline: auto;
}

/* a row of photos inside rich text: <div class="image-row"> */
.rte .image-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 8px;
}

.rte .image-row p {
    display: contents;
}

.rte .image-row br {
    display: none;
}

.rte .image-row img {
    width: 100%;
    margin: 0;
    aspect-ratio: 362 / 241;
    object-fit: cover;
}


@media (max-width: 1024px) {
    .section--text-block.bg-navy.pad-default:has(.align-center) {
        padding: 100px 0 75px;
    }

    .bg-navy .text-block.align-center .section-title {
        margin-bottom: 32px;
    }

}

@media (max-width: 767px) {
    .bg-navy .text-block.align-center .section-header {
        margin-bottom: 28px; /* subheading → paragraph, as on the live site */
    }

    .rte .image-row {
        grid-template-columns: 1fr;
    }
}

/* List Card (Community "Our charitable support"): white card, heading, then a
   two-column dot list; can rise into the section above (padding: overlap) ---- */
.list-card {
    max-width: 1104px;
    margin: 0 auto;
    padding: 100px clamp(24px, 4vw, 48px) 90px;
    color: var(--color-brand-primary);
    background: var(--color-white);
}

.list-card .section-header {
    max-width: none;
    margin-bottom: 30px;
}

.list-card .section-title {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    color: var(--color-brand-primary) !important;
}

.list-card__list {
    margin: 0;
    padding: 0;
    list-style: none;
    columns: 2 260px;
    column-gap: 48px;
}

.list-card__list li {
    position: relative;
    margin: 0 0 11px;
    padding-left: 30px;
    font-family: var(--font-heading);
    font-size: var(--fs-label);
    font-weight: 700;
    line-height: 1.2;
    break-inside: avoid;
}

.list-card__list li::before {
    position: absolute;
    top: 4px;
    left: 0;
}

@media (max-width: 1024px) {
    .list-card {
        padding-block: 64px;
    }
}

/* Text + Media ------------------------------------------------------------- */
.split {
    display: grid;
    align-items: center;
    gap: 48px;
}

.split__text .section-header {
    margin-bottom: 0;
}

.split__media figure {
    margin: 0;
}

.split__media img {
    width: 100%;
}

/* heading centred above both columns (About Us) */
.split__title-above {
    margin: 0 0 56px;
    text-align: center;
}

/* subheading instead of a heading (MDF "We've designed…") */
.section--text-media .split__text .section-header:not(:has(.section-title)) .lead {
    margin-bottom: 17.5px;
    font-size: var(--fs-h4);
    line-height: 1.2;
}

.section--text-media.bg-navy .split__text .rte {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.section--text-media.bg-navy .split__text .rte p {
    margin-bottom: 24px;
}

/* Gallery: three or more images → one wide, then two side by side */
.split__media--gallery {
    display: grid;
    gap: 24px;
}

.split__media--gallery:has(> figure:nth-child(3)) {
    grid-template-columns: 1fr 1fr;
}

.split__media--gallery:has(> figure:nth-child(3)) > figure:first-child {
    grid-column: 1 / -1;
}

.split__media--gallery:has(> figure:nth-child(3)) img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* "Boxed": the text sits in a white card with a 6px gold border (About Us) */
.split--boxed {
    align-items: stretch;
}

.content-card {
    padding: 45px 55px;
    text-align: center;
    color: var(--color-text);
    background: var(--color-white);
    border: 6px solid var(--color-brand-accent);
}

.content-card .eyebrow::after {
    left: 50%;
    transform: translateX(-50%);
}

.content-card .section-header {
    margin-inline: auto;
}

.content-card :is(h2, h3) {
    color: var(--color-brand-primary);
}

.content-card .section-title {
    margin-bottom: 24px;
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
}

.content-card .rte {
    max-width: 370px;
    margin-inline: auto;
    font-size: var(--fs-lg);
    line-height: 1.6;
    color: var(--color-brand-primary);
}

/* the gallery column stretches to the card's height: images keep their own
   height and spread to the top and bottom */
.split--boxed .split__media--gallery {
    align-content: space-between;
}

.split--boxed .split__media--gallery > * {
    align-self: start;
}

/* "Gold corner accents" (MDF): 600px image with the corners outside it */
.split__media--corners figure {
    margin: 18px;
}

.split__media--corners img {
    max-width: 600px; /* the source is 522px wide; 600px is a slight upscale */
}

/* Video thumbnails (Text + Media video / gallery, Image Panel) */
.video-thumb {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--color-navy-900);
    border: 0;
    cursor: pointer;
}

.video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .85;
    transition: opacity var(--transition);
}

.video-thumb:hover img {
    opacity: 1;
}

.video-thumb__play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--color-white);
}

.video-thumb__play .icon {
    width: 76px;
    height: 76px;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .4));
}

/* overlay style: image at its natural ratio under a dark tint, solid play icon */
.video-thumb--overlay {
    line-height: 0;
    aspect-ratio: auto;
    background: none;
}

.video-thumb--overlay img {
    height: auto;
    opacity: 1;
}

.video-thumb--overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .4);
    transition: background-color var(--transition);
}

.video-thumb--overlay:hover::after {
    background: rgba(0, 0, 0, .5);
}

.video-thumb--overlay .video-thumb__play {
    z-index: 1;
}

.video-thumb--overlay .video-thumb__play .icon {
    width: 40px;
    height: 46px;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .45));
}

@media (min-width: 900px) {
    .split {
        grid-template-columns: 1fr 1fr;
        gap: 64px;
    }

    .split--media-left .split__media {
        order: -1;
    }
}

@media (min-width: 1025px) {
    .split:has(.split__media--corners) {
        grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
        gap: 88px;
    }
}

@media (max-width: 1024px) {
    .content-card {
        padding: 36px 28px;
    }

    /* corner image stacks above the text, centred */
    .split:has(.split__media--corners) {
        grid-template-columns: minmax(0, 1fr);
    }

    .split:has(.split__media--corners) .split__media {
        order: -1;
    }

    /* leave 18px each side for the gold corners */
    .split .split__media--corners figure {
        width: calc(100% - 36px);
        max-width: 600px;
        margin: 18px auto;
    }
}

/* Image Panel — image in a white box, gold heading + text below (MDF, History) */
.section--image-panel > .container {
    max-width: calc(1346px + var(--gutter) * 2); /* a little wider than the 1295px container */
}

.image-panel {
    display: grid;
    place-items: center;
    padding: 112px 24px;
    background: var(--color-white);
}

.image-panel--plain {
    padding: 0;
    background: none;
}

.image-panel__img {
    width: auto;
}

.image-panel__text {
    max-width: 1238px;
    margin: 72px auto 0;
    text-align: center;
}

.image-panel__title {
    margin: 0 0 24px;
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    color: var(--color-brand-accent) !important;
}

.image-panel__text .rte {
    font-size: var(--fs-lg);
    line-height: 1.6;
}

/* intro text → video (History "Our Story") */
.section--text-block.pad-top + .section--image-panel.pad-bottom {
    padding-top: 72px;
}

@media (max-width: 767px) {
    .section--text-block.pad-top + .section--image-panel.pad-bottom {
        padding-top: 40px;
    }
}

@media (max-width: 1024px) {
    .image-panel {
        padding: 64px 20px;
    }
}

/* Pillars (homepage "About Us") ------------------------------------------- */
.section--pillars.bg-image::before {
    display: none; /* the photo shows without an overlay */
}

.pillars__intro {
    margin-bottom: 24px;
    font-size: var(--fs-h4);
}

.pillars__list {
    display: grid;
    gap: 16px;
    margin: 0 0 32px;
    padding: 0;
    list-style: none;
}

.pillars__list li {
    display: grid;
    place-items: center;
    padding: 28px 16px;
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    color: var(--color-white);
    background: var(--color-brand-accent);
}

.pillars__text {
    max-width: 980px;
    margin: 0;
    font-size: var(--fs-body);
}

@media (max-width: 1024px) {
    /* eyebrow, accent line and heading centre on tablet / phone (live site) */
    .pillars .eyebrow,
    .pillars__intro {
        text-align: center;
    }

    .pillars .eyebrow::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .pillars__list li {
        line-height: 1.3;
    }
}

@media (max-width: 767px) {
    .pillars__list {
        gap: 36px; /* stacked boxes: the live site's spacing */
    }
}

@media (min-width: 768px) {
    .pillars__list {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

/* Stats (homepage "Why GTS works") — icon, gold number box, label, text ---- */
.section--stats.bg-image {
    background-position: 71% 100%;
}

.section--stats.bg-image::before {
    display: none; /* no overlay */
}

.section--stats.pad-default {
    padding: 100px 0 212px;
}

.section--stats .section-header {
    margin-bottom: 95px;
}

.section--stats .lead {
    font-family: var(--font-body);
    font-size: var(--fs-lg);
    font-weight: 400;
    line-height: 1.6;
}

.stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 63px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.stat {
    justify-self: center;
    width: 100%;
    max-width: 280px;
}

.stat__icon {
    display: block;
    text-align: center;
}

.stat__icon img {
    width: 83px;
    height: 83px;
    margin: 0 auto 18px;
    object-fit: contain;
}

:is(.bg-navy, .bg-image) .stat__icon img {
    filter: brightness(0) invert(1);
}

.stat__number {
    margin: 0 0 18px;
    padding: 4px 8px;
    font-family: var(--font-heading);
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    color: var(--color-white);
    background: var(--color-brand-accent);
}

.stat__label {
    margin: 0 0 12px;
    font-size: var(--fs-h5);
    line-height: 1.2;
    text-transform: none;
}

.stat__text {
    margin: 0;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

@media (min-width: 600px) {
    .stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 48px 63px;
    }
}

@media (min-width: 1025px) {
    .stats {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1279px) {
    .section--stats.pad-default {
        padding-bottom: 100px;
    }
}

@media (max-width: 1024px) {
    .section--stats.pad-default {
        padding-block: 75px;
    }

    .section--stats .section-header {
        margin-bottom: 50px;
    }
}

@media (max-width: 599px) {
    .stat__label,
    .stat__text {
        text-align: center;
    }
}

/* Feature List (Why GTS, Partner Portal): white rows of icon | title | dot list,
   stacking in steps on smaller screens ------------------------------------- */
@media (min-width: 1025px) {
    .section--feature-columns .section-header--intro {
        margin-bottom: 146px;
    }
}

.section--feature-columns .section-header .rte {
    font-size: var(--fs-lg);
}

.feature-list {
    display: grid;
    gap: 32px;
}

.feature {
    display: grid;
    gap: 24px;
    padding: 37px 38px;
    color: var(--color-text);
    background: var(--color-white);
}

.feature__icon img {
    width: 92px;
    margin: 0;
    object-fit: contain;
}

.feature__title {
    max-width: 500px;
    margin: 0;
    font-size: 40px;
    line-height: 1.2;
    color: var(--color-brand-primary) !important;
}

.feature__text {
    margin-bottom: 16px;
}

.checklist {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.checklist li {
    display: grid;
    grid-template-columns: 18px 1fr;
    align-items: center;
    gap: 14px;
    font-size: var(--fs-lg);
    line-height: 1.2;
    color: var(--color-brand-primary);
}

@media (min-width: 1295px) {
    .feature {
        grid-template-columns: 92px minmax(0, 500px) minmax(0, 1fr);
        align-items: start;
        column-gap: 51px;
    }

    .feature__icon {
        align-self: center;
    }
}

@media (max-width: 1024px) {
    .feature__title {
        font-size: var(--fs-h3);
    }
}

/* 768–1294px: icon above the title on the left, the list centred on the right */
@media (min-width: 768px) and (max-width: 1294px) {
    .feature {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
        column-gap: 40px;
    }

    .feature__icon  { grid-area: 1 / 1; }
    .feature__title { grid-area: 2 / 1; }
    .feature__text  { grid-area: 3 / 1; }

    .feature .checklist {
        grid-column: 2;
        grid-row: 1 / span 3;
        align-self: center;
    }
}

@media (max-width: 767px) {
    .feature__icon img {
        margin: 0 auto;
    }
}

/* Highlights (Community "Impact Highlights"): title + text in gold-bordered
   white cards, three across --------------------------------------------- */
.section--highlights .section-header {
    max-width: none;
    margin-bottom: 56px;
    text-align: center;
}

.section--highlights .section-title {
    margin: 0;
}

.section--highlights.pad-none {
    padding-top: 72px; /* sits close under the intro */
}

.highlights {
    display: grid;
    gap: 32px;
    max-width: 1151px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.highlight {
    display: grid;
    align-content: center;
    justify-items: center;
    padding: 23px;
    text-align: center;
    color: var(--color-text);
    background: var(--color-white);
    border: 6px solid var(--color-brand-accent);
}

.highlight__title {
    margin: 0 0 8px;
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    text-transform: none;
    color: var(--color-brand-primary) !important;
}

.highlight__text {
    margin: 0;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-brand-primary);
}

@media (min-width: 768px) {
    .highlights {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Cards (news posts, specialties) ----------------------------------------- */
.card-grid {
    display: grid;
    gap: 24px;
}

.card-grid--3 {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.card-grid--4 {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}

@media (min-width: 900px) {
    .card-grid--3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

.card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--color-text);
    background: var(--color-white);
}

.card__title {
    font-size: var(--fs-h5);
    text-transform: none;
    color: var(--color-brand-primary) !important;
}

.card__title a {
    text-decoration: none;
    color: inherit !important;
}

.card__text {
    flex: 1;
    color: var(--color-brand-primary);
}

.card__link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: .4em;
    margin-top: auto;
    font-family: var(--font-heading);
    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    color: var(--color-brand-primary) !important;
}

/* News card: 16:9 image, title, excerpt, "Read more" */
.post-card__image {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--color-blue-100);
}

.post-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-card__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-navy-700), var(--color-navy-500));
}

.post-card .card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 26px;
}

.post-card .card__title {
    margin: 15px 0;
    font-size: 24px;
    line-height: 1.25;
}

.post-card .card__title a:hover {
    color: var(--color-brand-accent) !important;
}

/* "Read more →": the arrow takes the text colour; on news cards both turn gold on hover (as the team "Read bio") */
.card__link .icon {
    width: 18px;
    height: 18px;
}

.post-card .card__link:hover {
    color: var(--color-brand-accent) !important;
}

.post-card .card__text {
    margin: 0 0 15px;
    font-size: var(--fs-body);
    line-height: 21px;
}

/* Specialty card: icon, title, summary; the whole card is the link */
.specialty-card {
    position: relative;
    align-items: center;
    padding: 25px 10px;
    text-align: center;
    border: 7px solid var(--color-white);
    transition: border-color var(--transition);
}

.specialty-card:hover,
.specialty-card:focus-within {
    border-color: var(--color-brand-accent);
}

.specialty-card__icon img {
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;
    object-fit: contain;
}

.specialty-card .card__title {
    margin: 0 0 12px;
    line-height: 1.2;
}

.specialty-card .card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.specialty-card .card__text {
    margin: 0 0 12px;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.specialty-card .card__link {
    align-self: center;
}

.specialty-card .card__link .icon {
    width: 14px;
    height: 14px;
}

@media (max-width: 1024px) {
    .specialty-card .card__title {
        font-size: 18px;
    }
}

/* Specialties grid (homepage, Our Specialties) */
.section--specialties.pad-default {
    padding: 80px 0 176px;
}

.section--specialties.pad-bottom {
    padding-bottom: 176px; /* cards continuing on the navy under the intro */
}

.section--specialties .section-header {
    margin-bottom: 50px;
}

.section--specialties .card-grid--4 {
    gap: 34px;
}

@media (min-width: 1100px) {
    .section--specialties .card-grid--4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1024px) {
    .section--specialties.pad-default {
        padding-block: 75px;
    }

    .section--specialties.pad-bottom {
        padding-bottom: 75px;
    }
}

/* Latest News (homepage) */
.section--latest-news.pad-default {
    padding: 100px 0 141px;
}

.section--latest-news .section-header {
    max-width: none;
    margin-bottom: 65px;
}

.section--latest-news .section-title {
    margin-bottom: 35px;
}

.section--latest-news .lead {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-lg);
    font-weight: 400;
    line-height: 1.6;
}

.section--latest-news .btn-group {
    margin-top: 65px;
}

:is(.section--latest-news, .section--news-index) .card-grid {
    gap: 23px;
}

@media (max-width: 1024px) {
    .section--latest-news.pad-default {
        padding: 75px 0;
    }
}

/* Case Studies — cards + testimonial slider (homepage) --------------------- */
.section--case-studies.pad-default {
    padding: 100px 0;
}

.section--case-studies:has(.cs-layout) .section-header {
    margin-bottom: 35px;
}

/* minmax(0, 1fr): columns never grow to fit the slider's full strip of slides */
.cs-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
}

.cs-layout__cases {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 24px;
}

.cs-layout__cases .btn-group {
    margin-top: 35px;
}

.case-card {
    display: grid;
    gap: 24px;
    padding: 30px;
    color: var(--color-brand-primary);
    background: var(--color-white);
}

.case-card__logo img {
    width: 100%;
    max-width: 234px;
}

.case-card__label,
.case-card__stat-label {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

.case-card__label {
    margin-bottom: 6px;
}

.case-card__title {
    margin: 0 0 12px;
    font-size: var(--fs-h5);
    line-height: 1.2;
    color: var(--color-brand-primary) !important;
}

.case-card__points {
    display: grid;
    gap: 16px;
    margin-bottom: 16px;
}

.case-card__points h4 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 9px;
    font-size: var(--fs-h5);
    line-height: 1.2;
    text-transform: none;
    color: var(--color-brand-primary);
}

.case-card__points h4 .icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}

.case-card__points p {
    margin: 0;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: #000;
}

.case-card a.case-card__more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    color: var(--color-brand-primary);
}

.case-card a.case-card__more:hover {
    color: var(--color-brand-accent);
}

.case-card__more .icon {
    width: 16px;
    height: 16px;
}

.case-card__stat {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 4px;
    padding: 9px 10px 16px;
    text-align: center;
    background: var(--color-blue-100);
}

.case-card__stat .icon {
    width: 50px;
    height: 50px;
    color: var(--color-brand-primary);
}

.case-card__stat-value {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    font-weight: 700;
    line-height: var(--lh-h3);
}

/* Testimonials: scroll-snap slider with dots (built by app.js) */
.testimonial-slider__track {
    display: grid;
    grid-auto-columns: 100%;
    grid-auto-flow: column;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.testimonial-slider__track::-webkit-scrollbar {
    display: none;
}

.testimonial {
    margin: 0;
    padding: 40px;
    color: #211d1b;
    background: var(--color-white);
    scroll-snap-align: start;
}

.testimonial blockquote {
    margin: 0 0 32px;
}

.testimonial blockquote p {
    margin: 0 0 1em;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.testimonial blockquote p:last-child {
    margin-bottom: 0;
}

.testimonial figcaption {
    display: flex;
    align-items: center;
    gap: 16px;
}

.testimonial figcaption img {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 50%;
}

.testimonial__name,
.testimonial__role {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-brand-primary);
}

.testimonial__name {
    font-size: var(--fs-h5);
    line-height: 1.2;
}

.testimonial__role {
    font-size: 16px;
    line-height: 1.4;
    text-transform: uppercase;
}

.slider-dots {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

.slider-dots__dot {
    width: 14px;
    height: 14px;
    margin: 4px;
    padding: 0;
    background: var(--color-brand-accent);
    border: 0;
    border-radius: 50%;
    opacity: .5;
    cursor: pointer;
    transition: opacity .2s ease-in-out;
}

.slider-dots__dot:hover,
.slider-dots__dot[aria-current="true"] {
    opacity: 1;
}

@media (min-width: 700px) {
    .case-card__points {
        grid-template-columns: 1fr 1fr;
    }
}

/* ≥1100px: logo | text | stat inside each card; cards beside the testimonials */
@media (min-width: 1100px) {
    .cs-layout--has-testimonials {
        grid-template-columns: minmax(0, 896fr) minmax(0, 366fr);
        gap: 0;
    }

    .cs-layout--has-testimonials .cs-layout__cases {
        padding-right: 32px;
        border-right: 6px solid var(--color-brand-accent);
    }

    .cs-layout__testimonials {
        padding-left: 32px;
    }

    .case-card {
        grid-template-columns: 234px minmax(0, 1fr) 192px;
        align-items: center;
        gap: 25px 24px;
    }

    .case-card__logo {
        align-self: start;
    }

    .case-card__stat {
        align-self: center;
        min-height: 158px;
    }
}

/* 768–1099px: two cards side by side, each stacked inside */
@media (min-width: 768px) and (max-width: 1099px) {
    .cs-layout__cases {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cs-layout__cases .btn-group {
        grid-column: 1 / -1;
    }

    .case-card {
        align-content: start;
    }

    .case-card__logo img {
        margin: 0 auto;
    }
}

@media (max-width: 1099px) {
    .cs-layout__cases .btn-group {
        justify-content: center;
    }

    .case-card__label,
    .case-card__title {
        text-align: center;
    }
}

@media (max-width: 1024px) {
    .section--case-studies.pad-default {
        padding-block: 75px;
    }
}

/* ≤767px: one column of cards and testimonials, max 440px wide */
@media (max-width: 767px) {
    .case-card,
    .cs-layout__testimonials {
        width: 100%;
        max-width: 440px;
        margin-inline: auto;
    }

    .case-card__logo img {
        margin: 0 auto;
    }
}

/* Case Studies → "Full write-ups" (Case Studies page) ---------------------- */
.case-list {
    display: grid;
    gap: 110px;
    max-width: 1258px;
    margin: 0 auto;
}

.case-full {
    display: grid;
    gap: 40px 57px;
    padding: 34px;
    color: #000;
    background: var(--color-white);
}

.case-full__image {
    width: auto;
    max-width: min(100%, 385px);
}

.case-full__label {
    margin: 36px 0 12px;
    font-family: var(--font-heading);
    font-size: var(--fs-h5);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-brand-primary);
}

.case-full__title {
    margin: 0 0 24px;
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    color: var(--color-brand-primary) !important;
}

.case-full__pdf {
    gap: 10px;
    font-size: 14.3px;
    line-height: 1;
}

.case-full__pdf .icon {
    display: block;
    flex-shrink: 0;
    width: 22px;
    height: 24px;
}

/* Myriad's capitals sit high in the line box: nudge to the icon's optical centre */
.case-full__pdf-text {
    display: block;
    padding-top: 2px;
}

.case-full__section + .case-full__section {
    margin-top: 24px;
}

.case-full__section h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    font-size: var(--fs-label);
    line-height: 1.5;
    text-transform: none;
    color: var(--color-brand-primary) !important;
}

.case-full__section h4 .icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.case-full .rte {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: #000;
}

.case-full .rte p {
    margin: 0 0 15px;
}

.case-full .rte ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.case-full .rte li {
    position: relative;
    margin: 0;
    padding-left: 26px;
    line-height: 1.2;
}

.case-full .rte li::before {
    position: absolute;
    top: 2px;
    left: 0;
}

@media (min-width: 1025px) {
    .case-full {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media (max-width: 1024px) {
    .case-list {
        gap: 64px;
    }

    .case-full__image {
        margin-inline: auto; /* centred once the columns stack */
    }

    .case-full__pdf {
        font-size: 16px;
    }
}

@media (max-width: 767px) {
    .case-full__pdf {
        font-size: var(--fs-btn);
    }
}

@media (max-width: 600px) {
    .case-full {
        padding: 24px 20px;
    }
}

/* Steps (homepage "How to get started") ----------------------------------- */
.section--steps.pad-default {
    padding: 112px 0 133px;
}

.section--steps .section-header {
    margin-bottom: 50px;
}

.section--steps .btn-group {
    margin-top: 84px;
}

.steps {
    display: grid;
    gap: 64px;
    max-width: 500px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.step {
    padding: 75px 40px 70px;
    text-align: center;
    color: var(--color-brand-primary);
    background: var(--color-white);
    border: 4px solid var(--color-brand-accent);
}

.step__number {
    display: inline-grid;
    place-items: center;
    width: 60px;
    height: 60px;
    font-family: var(--font-heading);
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-white);
    background: var(--color-brand-primary);
    border: 6px solid var(--color-brand-accent);
    border-radius: 50%;
}

.step__title {
    margin: 18px 0 16px;
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    color: var(--color-brand-accent) !important;
}

.step__title .hl {
    color: var(--color-brand-primary);
}

.step__text {
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: 600;
    line-height: 1.6;
}

@media (min-width: 1025px) {
    .steps {
        grid-template-columns: repeat(3, minmax(0, 317px));
        justify-content: center;
        gap: 70px;
        max-width: none;
    }

}

@media (max-width: 1024px) {
    .section--steps.pad-default {
        padding-block: 75px;
    }
}

@media (max-width: 767px) {
    .step {
        padding: 48px 24px;
    }

    .step__title {
        margin-bottom: 20px;
    }
}

/* FAQ — white card with accordion rows ------------------------------------ */
.faq-card {
    padding: 89px;
    color: var(--color-text);
    background: var(--color-white);
}

.faq-card :is(h2, h3) {
    color: var(--color-brand-primary) !important;
}

.faq-card .section-header {
    max-width: none;
    margin-bottom: 30px;
}

.faq-card .section-title {
    margin: 0;
}

.faq-card .eyebrow {
    color: var(--color-brand-primary);
}

.accordion {
    display: grid;
    gap: 18px;
}

.accordion__item {
    background: var(--color-blue-100);
}

.accordion__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 30px;
    font-family: var(--font-heading);
    font-size: 29px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--color-brand-primary);
    list-style: none;
    cursor: pointer;
}

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

.accordion__item summary .icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    transition: transform var(--transition);
}

.accordion__item[open] summary .icon {
    transform: rotate(180deg);
}

.accordion__panel {
    padding: 0 30px 30px;
    font-size: var(--fs-body);
}

@media (max-width: 1024px) {
    .section--contact + .section--faq .accordion__item summary {
        font-size: 20px;
    }
}

@media (max-width: 767px) {
    .section--contact + .section--faq .accordion__item summary {
        font-size: 18px;
    }

    .faq-card {
        padding: 32px 20px;
    }

    .accordion__item summary {
        padding: 20px;
        font-size: 22px;
        line-height: 1.3;
    }

    .accordion__panel {
        padding: 0 20px 20px;
    }
}

/* CTA — "split" (two-column heading, see section 9), "box" (gold box), "banner" (centred) */
.section--cta.pad-top {
    padding-top: 100px;
}

.section--cta.edges-top-stepped-bottom {
    padding-top: 100px;
}

/* Box (homepage "Your gateway to growth and partnership") */
.cta--box {
    padding: 24px;
    text-align: center;
    color: var(--color-brand-primary);
    background: var(--color-brand-accent);
}

.cta--box .section-title {
    margin: 12px 0 24px;
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    color: var(--color-white) !important;
}

.cta--box .eyebrow + .section-title {
    margin-top: 0;
}

.cta--box .eyebrow::after {
    background: var(--color-brand-primary);
}

.cta--box p {
    max-width: 908px;
    margin: 0 auto 32px;
    font-size: var(--fs-lg);
    font-weight: 600;
    line-height: 1.6;
    color: var(--color-white);
}

.cta--box .btn-group {
    margin: 0 0 12px;
}

.cta--box .btn {
    color: var(--color-white);
    background: var(--color-brand-primary);
}

.cta--box .btn:hover {
    background: var(--color-navy-900);
}

/* Banner (Partner Portal "Become our partner"): centred heading, subtitle and
   button over the section's photo */
.section--cta:has(.cta--banner) {
    padding-block: 126px;
}

.section--cta.bg-image:has(.cta--banner)::before {
    display: none; /* the artwork is already navy */
}

.cta--banner {
    max-width: 980px;
    margin: 0 auto;
    text-align: center;
}

.cta--banner .section-title {
    margin-bottom: 24px;
}

.cta--banner .cta__body p {
    max-width: 972px;
    margin: 0 auto 32px;
    font-size: var(--fs-lg);
    line-height: 1.6;
}

.cta--banner .btn-group {
    margin-top: 0;
}

@media (max-width: 1024px) {
    .section--cta.pad-top {
        padding-top: 75px;
    }

    .section--cta:has(.cta--banner) {
        padding-block: 75px;
    }

    .section--cta.edges-top-stepped-bottom {
        padding-block: 75px;
    }

    .cta--box .section-title {
        margin-bottom: 18px;
    }
}

@media (max-width: 767px) {
    .section--cta:has(.cta--banner) {
        padding-block: 50px;
    }
}

/* Team — white cards, 3 / 2 / 1 per row, bio in a dialog ------------------ */
.team-grid {
    display: grid;
    grid-template-columns: minmax(0, 300px);
    justify-content: center;
    gap: 56px 48px;
}

.team-card {
    display: flex;
    flex-direction: column;
    text-align: left;
    color: var(--color-brand-primary);
    background: var(--color-white);
}

.team-card__photo {
    overflow: hidden;
    aspect-ratio: 16 / 17;
    background: linear-gradient(180deg, var(--color-blue-100), var(--color-blue-200));
}

.team-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.team-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
}

.team-card .team-card__name {
    margin-bottom: 10px;
    font-size: var(--fs-h5);
    line-height: 1.2;
    text-transform: none;
    color: var(--color-brand-primary) !important;
}

/* job title, email and "Read bio" share one caps style */
.team-card__title,
.team-card a.team-card__email,
.team-card .team-card__bio-btn {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--color-brand-primary);
}

.team-card__title {
    margin-bottom: 2px;
}

.team-card a.team-card__email {
    display: block;
    margin-bottom: 16px;
    text-decoration: none;
    word-break: break-all;
    color: var(--color-brand-accent);
}

.team-card a.team-card__email:hover {
    color: var(--color-brand-primary);
}

.team-card .team-card__bio-btn {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    margin-top: auto;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

.team-card .team-card__bio-btn:hover {
    color: var(--color-brand-accent);
}

.team-card__bio-btn .icon {
    width: 18px;
    height: 18px;
}

@media (min-width: 680px) {
    .team-grid {
        grid-template-columns: repeat(2, minmax(0, 300px));
    }
}

@media (min-width: 1025px) {
    .team-grid {
        grid-template-columns: repeat(3, minmax(0, 300px));
    }
}

/* History timeline — centre gold line, alternating years + white chapter cards */
.history-timeline {
    position: relative;
    display: grid;
    gap: 114px;
    max-width: 1295px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.history-timeline::before {
    content: "";
    position: absolute;
    top: 33px;
    bottom: 0;
    left: 50%;
    width: 6px;
    background: var(--color-brand-accent);
    transform: translateX(-50%);
}

.ht-item {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
    align-items: start;
}

.ht-node {
    position: relative;
    z-index: 1;
    grid-area: 1 / 2;
    width: 44px;
    height: 44px;
    margin-top: 11px;
    background: var(--color-brand-primary);
    border: 6px solid var(--color-brand-accent);
    border-radius: 50%;
}

.ht-year {
    display: flex;
    grid-row: 1;
    align-items: center;
    gap: 24px;
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(42px, 4.25vw, 61px);
    font-weight: 700;
    line-height: var(--lh-h2);
    color: var(--color-white);
}

/* the vertical line runs into the nodes; the horizontal connectors stop short */
.ht-connector {
    position: relative;
    top: 28px;
    flex: 0 0 clamp(36px, calc((100vw - 900px) / 3), 150px);
    align-self: flex-start;
    height: 6px;
    background: var(--color-brand-accent);
}

.ht-card {
    grid-row: 1;
    width: 100%;
    max-width: 418px;
    padding: 23px;
    color: var(--color-brand-primary);
    background: var(--color-white);
    border: 6px solid var(--color-brand-accent);
}

.ht-card__title {
    margin: 0 0 24px;
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    color: var(--color-brand-primary) !important;
}

.ht-card p {
    margin: 0;
    font-size: var(--fs-lg);
    line-height: 1.6;
}

/* year on the left, card on the right */
.ht-item--right .ht-year {
    grid-column: 1;
    justify-content: flex-end;
}

.ht-item--right .ht-connector {
    margin-right: 28px;
}

.ht-item--right .ht-card {
    grid-column: 3;
    margin-left: clamp(24px, calc((100vw - 900px) / 4), 117px);
}

/* card on the left, year on the right */
.ht-item--left .ht-year {
    grid-column: 3;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.ht-item--left .ht-connector {
    margin-left: 28px;
}

.ht-item--left .ht-card {
    grid-column: 1;
    justify-self: end;
    margin-right: clamp(24px, calc((100vw - 900px) / 4), 117px);
}

/* final "current chapter": centred node, year and card; the line stops at its node */
.ht-item--final {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 24px;
    text-align: center;
}

.ht-item--final::before {
    content: "";
    position: absolute;
    top: 44px;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--color-brand-primary); /* hides the line below the last node */
}

.ht-item--final > * {
    position: relative;
    grid-column: 1;
    grid-row: auto;
}

.ht-item--final .ht-node {
    order: -1;
    margin: 0;
}

.ht-item--final .ht-connector {
    display: none;
}

.ht-item--final .ht-card {
    margin: 0;
}

@media (max-width: 1024px) {
    .ht-year {
        font-size: var(--fs-h2);
    }
}

@media (max-width: 1100px) {
    .ht-item--right .ht-connector {
        margin-right: 16px;
    }

    .ht-item--left .ht-connector {
        margin-left: 16px;
    }
}

/* stacked: line on the left, year then card beside it */
@media (max-width: 899px) {
    .history-timeline {
        gap: 56px;
    }

    .history-timeline::before {
        top: 22px;
        left: 19px;
        transform: none;
    }

    .ht-item,
    .ht-item--final {
        grid-template-columns: 44px minmax(0, 1fr);
        justify-items: start;
        gap: 12px 20px;
        text-align: left;
    }

    .ht-item .ht-node {
        grid-area: 1 / 1;
        margin-top: 0;
    }

    .ht-item .ht-year {
        grid-area: 1 / 2;
        flex-direction: row;
        justify-content: flex-start;
    }

    .ht-item .ht-card {
        grid-area: 2 / 2;
        justify-self: start;
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .ht-connector {
        display: none;
    }

    .ht-item--final > * {
        grid-row: auto;
    }

}

/* Awards — white card holding two timeline columns ------------------------ */
.awards-card {
    display: grid;
    gap: 48px 64px;
    max-width: 1150px;
    margin: 0 auto;
    padding: 124px 124px 119px;
    background: var(--color-white);
}

.awards-timeline {
    position: relative;
    margin: 0;
    padding: 0 0 0 80px;
    list-style: none;
}

/* gold line, as thick as the node border and centred on the nodes */
.awards-timeline::before {
    content: "";
    position: absolute;
    top: 24px;
    bottom: 24px;
    left: 19.5px;
    width: 5px;
    background: var(--color-brand-accent);
}

.awards-timeline__year {
    position: relative;
    padding-bottom: 48px;
}

.awards-timeline__year:last-child {
    padding-bottom: 0;
}

.awards-timeline__node {
    position: absolute;
    top: 2px;
    left: -90px;
    width: 44px;
    height: 44px;
    margin-left: 10px;
    background: var(--color-brand-primary);
    border: 5px solid var(--color-brand-accent);
    border-radius: 50%;
}

.awards-timeline__label {
    display: inline-block;
    margin: 0 0 24px;
    padding: 10px 47px;
    font-size: var(--fs-h5);
    line-height: 1.2;
    color: var(--color-white) !important;
    background: var(--color-brand-accent);
}

.awards-timeline__items {
    display: grid;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.awards-timeline__items li {
    display: grid;
    grid-template-columns: 48px 1fr;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
    font-family: var(--font-heading);
    font-size: var(--fs-label);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-brand-primary);
}

/* the live site's award icon (award-light-full-1.png) */
.awards-timeline__icon {
    width: 48px;
    height: 48px;
    background: url("../img/award-icon.png") center / 48px 48px no-repeat;
}

@media (min-width: 900px) {
    .awards-card {
        grid-template-columns: 1fr 1fr;
    }
}

/* stacked: the two columns read as one continuous timeline */
@media (max-width: 899px) {
    .awards-card {
        row-gap: 0;
    }

    .awards-timeline:first-child .awards-timeline__year:last-child {
        padding-bottom: 48px;
    }

    .awards-timeline:first-child::before {
        bottom: 0;
    }

    .awards-timeline + .awards-timeline::before {
        top: 0;
    }
}

@media (max-width: 1024px) {
    .awards-card {
        padding: 64px 48px;
    }
}

@media (max-width: 600px) {
    .awards-card {
        padding: 40px 20px;
    }

    .awards-timeline {
        padding-left: 45px;
    }

    .awards-timeline__year {
        padding-left: 18px;
    }

    .awards-timeline__node {
        left: -54px;
        margin-left: 9px;
    }

    .awards-timeline__label {
        padding: 8px 28px;
    }
}

/* Logo Grid ---------------------------------------------------------------- */
.logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.logo-grid li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

/* default: logos on white tiles (light backgrounds) */
.logo-grid__img {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 16px;
    background: var(--color-white);
    box-shadow: 0 2px 10px rgba(0, 26, 55, .08);
}

.logo-grid__img img {
    width: auto;
    max-height: 70px;
    object-fit: contain;
}

/* on navy / photo backgrounds: plain white logos, no tiles (Commitment) */
.section--logo-grid:has(.logo-grid:not(.logo-grid--captions)) .section-header {
    max-width: none;
    margin: 0 auto 56px;
    text-align: center;
}

.section--logo-grid:has(.logo-grid:not(.logo-grid--captions)) .section-title {
    font-size: var(--fs-h3);
}

:is(.bg-navy, .bg-image) .logo-grid:not(.logo-grid--captions) {
    gap: 56px 32px;
    max-width: 1150px;
    margin-inline: auto;
}

:is(.bg-navy, .bg-image) .logo-grid:not(.logo-grid--captions) .logo-grid__img {
    height: 100px;
    padding: 0;
    aspect-ratio: auto;
    background: none;
    box-shadow: none;
}

:is(.bg-navy, .bg-image) .logo-grid:not(.logo-grid--captions) .logo-grid__img img {
    max-width: min(220px, 100%);
    max-height: 90px;
}

/* "Show captions" (Industry Associations): logo + caption in a gold-bordered box */
.logo-grid--captions {
    justify-content: center;
    gap: 32px;
}

.logo-grid--captions li {
    justify-content: center;
    gap: 24px;
    padding: 48px 16px;
    background: var(--color-white);
    border: 6px solid var(--color-brand-accent);
}

.logo-grid--captions .logo-grid__img {
    padding: 0;
    aspect-ratio: auto;
    background: none;
    box-shadow: none;
}

.logo-grid--captions .logo-grid__img img {
    max-width: min(213px, 100%);
    max-height: 107px;
}

.logo-grid__caption {
    font-family: var(--font-heading);
    font-size: var(--fs-h5);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-brand-primary);
}

@media (min-width: 900px) {
    .logo-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .logo-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .logo-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .logo-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

    .logo-grid--captions.logo-grid--3 {
        grid-template-columns: repeat(3, minmax(0, 340px)); /* narrower boxes, centred */
    }
}

@media (min-width: 600px) and (max-width: 899px) {
    .logo-grid--5 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 899px) {
    .logo-grid--captions {
        grid-template-columns: repeat(auto-fill, minmax(260px, 340px));
    }
}

@media (max-width: 599px) {
    .logo-grid--5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Contact — form card + info card on navy, full-width map below ----------- */
.section--contact .section-header.heading-split {
    max-width: 1196px; /* the heading matches the cards' width */
    margin-inline: auto;
}

.contact {
    display: grid;
    gap: 40px;
    max-width: 1196px;
    margin: 0 auto;
}

.contact__form,
.contact__info {
    padding: 56px 41px;
    color: var(--color-brand-primary);
    background: var(--color-white);
}

.contact__info {
    align-self: stretch;
}

.contact__info .contact__info-title {
    margin: 0 0 38px;
    font-size: var(--fs-h4);
    line-height: 1.2;
    text-transform: none;
    color: var(--color-brand-accent) !important;
}

.contact__info ul {
    display: grid;
    gap: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact__info li {
    display: grid;
    grid-template-columns: 37px 1fr;
    align-items: start;
    gap: 16px;
}

.contact__icon {
    width: 37px;
    height: 37px;
}

.contact__info strong {
    display: block;
    margin-bottom: 11px;
    font-family: var(--font-heading);
    font-size: var(--fs-h4);
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-brand-primary);
}

.contact__info a {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    text-decoration: none;
    color: var(--color-brand-primary) !important;
}

.contact__info a:hover {
    color: var(--color-brand-accent) !important;
}

@media (min-width: 1025px) {
    .contact {
        grid-template-columns: minmax(0, 745fr) minmax(0, 385fr);
        gap: 66px;
    }
}

@media (max-width: 600px) {
    .contact__form,
    .contact__info {
        padding: 36px 20px;
    }
}

/* Map --------------------------------------------------------------------- */
.section--map {
    line-height: 0;
}

.map-embed {
    display: block;
    width: 100%;
    border: 0;
}

/* ==========================================================================
   11. "Get Started" call to action above the footer (Theme Settings)
       Desktop: the photo is clipped to a stepped top edge — --step lower on
       the left, with a diagonal from --x1 to --x2 — and a gold edge follows it.
   ========================================================================== */

.get-started {
    --step: 84px;
    --x1: 49%;
    --x2: 56%;
    position: relative;
    isolation: isolate;
    padding: calc(var(--edge) + 126px) var(--gutter) 88px;
    text-align: center;
    color: var(--color-white);
    background: var(--color-brand-primary);
}

/* photo under a 78% navy tint; above the step stays solid navy */
.get-started::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(rgba(0, 44, 91, .78), rgba(0, 44, 91, .78)), var(--cta-bg, none) 53% 17% / cover no-repeat;
    clip-path: polygon(0 var(--step), var(--x1) var(--step), var(--x2) 0, 100% 0, 100% 100%, 0 100%);
}

/* gold edge following the step */
.get-started::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: calc(var(--step) + var(--edge));
    background: var(--color-brand-accent);
    clip-path: polygon(0 var(--step), var(--x1) var(--step), var(--x2) 0, 100% 0, 100% var(--edge), calc(var(--x2) + 4px) var(--edge), calc(var(--x1) + 4px) calc(var(--step) + var(--edge)), 0 calc(var(--step) + var(--edge)));
}

.get-started__inner {
    max-width: 1295px;
    margin: 0 auto;
}

.get-started__eyebrow {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--fs-h5);
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

.get-started__bar {
    display: block;
    width: 62px;
    height: var(--line-h);
    margin: var(--eyebrow-to-line) auto 0;
    background: var(--color-brand-accent);
}

.get-started__title {
    margin: var(--line-to-heading) auto 35px;
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    color: var(--color-white) !important;
}

.get-started__title .hl {
    color: inherit;
}

.get-started__text {
    margin: 0 0 32px;
    font-size: var(--fs-lg);
    font-weight: 600;
    line-height: 1.6;
}

/* ≤1279px: a flat gold top border instead of the stepped shape */
@media (max-width: 1279px) {
    .get-started::before {
        clip-path: none;
    }

    .get-started::after {
        height: var(--edge);
        clip-path: none;
    }
}

@media (max-width: 1024px) {
    .get-started {
        padding: calc(var(--edge) + 75px) var(--gutter) 75px;
    }
}

@media (max-width: 767px) {
    .get-started {
        padding: calc(var(--edge) + 50px) 25px 50px;
    }
}

/* ==========================================================================
   12. Templates
   ========================================================================== */

/* Breadcrumbs (single specialty, single post) ------------------------------ */
.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 0;
    margin: 0 0 56px;
    padding: 0;
    list-style: none;
}

.breadcrumbs li {
    display: inline-flex;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--color-white);
}

/* chevron after each crumb (so a wrapped line breaks after it, not before);
   the live site's solid chevron in light blue */
.breadcrumbs li:not(:last-child)::after {
    content: "";
    flex-shrink: 0;
    width: 10px;
    height: 16px;
    margin: 0 12px 0 10px;
    background: var(--color-blue-200);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M317.5 256 294.9 278.6 102.9 470.6 80.3 493.3 35 448 57.6 425.4 227 256 57.6 86.6 35 64 80.3 18.7 102.9 41.4 294.9 233.4z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M317.5 256 294.9 278.6 102.9 470.6 80.3 493.3 35 448 57.6 425.4 227 256 57.6 86.6 35 64 80.3 18.7 102.9 41.4 294.9 233.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.breadcrumbs a {
    text-decoration: none;
    color: var(--color-white);
}

.breadcrumbs a:hover,
.breadcrumbs [aria-current] {
    color: var(--color-brand-accent);
}

/* Single specialty ---------------------------------------------------------- */
.specialty-detail {
    padding: 50px 0 75px;
}

.specialty-detail__lead {
    margin: 0 0 40px;
    font-family: var(--font-heading);
    font-size: var(--fs-h4);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-white);
}

.specialty-detail .rte {
    font-size: var(--fs-lg);
    line-height: 1.6;
    color: var(--color-white);
}

.specialty-detail .rte a {
    text-decoration: underline;
    color: var(--color-brand-accent);
}

/* features: white boxes with a dot bullet, two columns from 768px */
.feature-boxes {
    display: grid;
    gap: 30px 38px;
    margin: 48px 0 0;
    padding: 0;
    list-style: none;
}

.feature-boxes li {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    font-family: var(--font-heading);
    font-size: var(--fs-label);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-brand-primary);
    background: var(--color-white);
}

@media (min-width: 768px) {
    .feature-boxes {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767px) {
    .feature-boxes li {
        font-size: 16px;
    }
}

/* Providers: logos scrolling in a loop (the list is rendered twice) */
.providers {
    padding: 75px 0;
    overflow: hidden;
}

.providers__title {
    margin: 0 0 36px;
    font-size: var(--fs-h3);
    line-height: 1.3;
    text-align: center;
}

.providers__marquee {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.providers__track {
    display: flex;
    gap: 123px;
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
    animation: providers-scroll calc(var(--count, 10) * 2.5s) linear infinite;
}

.providers__marquee:hover .providers__track {
    animation-play-state: paused;
}

.providers__track li {
    display: grid;
    flex: 0 0 200px;
    place-items: center;
    height: 93px;
}

.providers__track img {
    width: auto;
    max-width: 200px;
    max-height: 93px;
    object-fit: contain;
}

/* one full copy of the list + one gap */
@keyframes providers-scroll {
    to { transform: translateX(calc(-50% - 61.5px)); }
}

@media (max-width: 1024px) {
    .providers__track {
        gap: 64px;
    }

    @keyframes providers-scroll {
        to { transform: translateX(calc(-50% - 32px)); }
    }
}

@media (prefers-reduced-motion: reduce) {
    .providers__marquee {
        overflow-x: auto;
        mask-image: none;
    }

    .providers__track {
        animation: none;
    }

    .providers__track li[aria-hidden] {
        display: none;
    }
}

/* GTS News (posts page) — search, featured card, year filter, grid --------- */
.section--text-block.pad-top + .section--news-index {
    padding-top: 16px; /* + the intro's 24px header margin ≈ 40px above the search */
}

.section--news-index.pad-default {
    padding-bottom: 141px;
}

.news-featured {
    margin-bottom: 56px;
}

.news-featured .post-card__image {
    aspect-ratio: 2 / 1;
}

.filter-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
    margin: 0 0 56px;
}

.filter-tabs button {
    display: grid;
    place-items: center;
    min-width: 94px;
    height: 60px;
    padding: 0 24px;
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-white);
    background: none;
    border: 2px solid var(--color-white);
    cursor: pointer;
}

.filter-tabs button:hover,
.filter-tabs button.is-active {
    background: var(--color-brand-accent);
    border-color: var(--color-brand-accent);
}

.news-item[hidden] {
    display: none;
}

.news-item > .card {
    height: 100%;
}

.empty-state {
    padding: 48px;
    text-align: center;
    color: var(--color-brand-primary);
    background: var(--color-white);
}

@media (max-width: 1024px) {
    .section--news-index.pad-default {
        padding-bottom: 75px;
    }

    .filter-tabs button {
        font-size: 20px;
    }
}

@media (max-width: 767px) {
    .filter-tabs button {
        font-size: 18px;
    }
}

/* Pagination (category / year archives, search) */
.pagination {
    margin-top: 48px;
}

.pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.pagination .page-numbers {
    display: grid;
    place-items: center;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--color-white) !important;
    border: 2px solid var(--color-white);
}

.pagination .page-numbers.current,
.pagination a.page-numbers:hover {
    background: var(--color-brand-accent);
    border-color: var(--color-brand-accent);
}

/* Single post -------------------------------------------------------------- */
.news-post {
    padding: 50px 0 120px;
}

.news-post__title {
    margin: 34px 0 30px; /* + the breadcrumbs' 56px = 90px */
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    color: var(--color-white) !important;
}

.news-post__image {
    margin: 56px 0 86px; /* full content width; the gold corners sit outside it */
}

.news-post__image img {
    width: 100%;
}

/* article body: the live site's post content styles */
.news-post__body {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-white);
}

.news-post__body > :first-child {
    margin-top: 0;
}

.news-post__body :is(p, ul, ol, figure, blockquote, table) {
    margin: 0 0 32px;
}

.news-post__body :is(ul, ol) {
    padding-left: 2em;
}

.news-post__body li > :is(ul, ol) {
    margin: 0;
}

.news-post__body :is(h1, h2, h3, h4, h5, h6) {
    margin: 1.5em 0 .5em;
    text-transform: none;
    color: var(--color-white);
}

.news-post__body :is(h1, h2, h3, h4, h5, h6) + * {
    margin-top: 0;
}

.news-post__body h2 {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    text-transform: uppercase;
}

.news-post__body h3 {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
}

.news-post__body h4 {
    font-size: var(--fs-h4);
    line-height: 1.2;
}

.news-post__body :is(h5, h6) {
    font-size: var(--fs-h5);
}

.news-post__body strong {
    font-weight: 700;
}

.news-post__body sup {
    font-size: .6em;
    line-height: 0;
}

.news-post .news-post__body a:not(.btn) {
    text-decoration: underline;
    text-underline-offset: .1em;
    color: var(--color-blue-200);
    transition: color .1s linear;
}

.news-post .news-post__body a:not(.btn):hover {
    color: var(--color-brand-accent);
}

@media (max-width: 1024px) {
    .news-post__title {
        margin-top: 0;
    }

    .news-post__body h2 { font-size: 48px; }
    .news-post__body h3 { font-size: 36px; }
    .news-post__body h4 { font-size: 28px; }
}

@media (max-width: 767px) {
    .news-post__image {
        margin: 40px 18px 56px; /* keeps the corners on screen */
    }

    .news-post__body h2 { font-size: 34px; }
    .news-post__body h3 { font-size: 28px; }
    .news-post__body h4 { font-size: 22px; }
}

/* Search results — the live Kadence search archive ------------------------- */
.search-results-page {
    padding: 100px 0;
}

.search-results-page__title {
    margin: 0 0 48px;
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    text-transform: none;
    color: var(--color-white) !important;
}

.search-results-page__empty {
    margin: 0 0 32px;
    font-size: var(--fs-body);
    color: var(--color-white);
}

.search-results-page .search-form--news {
    margin: 0;
}

.search-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.search-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--color-white);
    box-shadow: 0 15px 15px -10px rgba(0, 0, 0, .05);
}

.search-card__image {
    display: block;
    overflow: hidden;
    aspect-ratio: 3 / 2;
}

.search-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 2rem;
}

/* content type badge above the title: News (gold) / Page / Specialty (navy) */
.search-card__type {
    align-self: flex-start;
    margin: 0 0 12px;
    padding: 5px 10px 4px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-white);
    background: var(--color-brand-primary);
}

.search-card__type--post {
    background: var(--color-brand-accent);
}

.search-card__title {
    margin: 0 0 16px;
    font-size: var(--fs-h5);
    line-height: 1.2;
    text-transform: none;
    color: var(--color-brand-primary) !important;
}

.search-card__title a {
    text-decoration: none;
    color: inherit !important;
}

.search-card__title a:hover {
    color: var(--color-brand-accent) !important;
}

.search-card__text {
    flex: 1;
    margin: 0 0 24px;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-brand-primary);
}

/* Kadence pagination: plain numbers in a left-aligned row, gold box on the
   current page, gold outline on hover */
.search-results-page .pagination {
    margin: 40px 0;
}

.search-results-page .pagination .nav-links {
    display: block;
}

.search-results-page .pagination .page-numbers {
    display: inline-grid;
    vertical-align: top;
    min-width: 2.5em;
    height: 2.5em;
    margin: 0 .5em 0 0;
    padding: 0;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 2.25em;
    background: none;
    border: 2px solid transparent;
    border-radius: 4px;
    transition: border-color .1s linear;
}

.search-results-page .pagination .page-numbers.current {
    background: var(--color-brand-accent);
    border-color: var(--color-brand-accent);
}

.search-results-page .pagination a.page-numbers:hover {
    background: none;
    border-color: var(--color-brand-accent);
}

.search-results-page .pagination .dots {
    min-width: auto;
    border: 0;
}

.search-results-page .pagination .icon {
    width: 20px;
    height: 20px;
}

.search-results-page .pagination .next .icon { transform: rotate(-90deg); }
.search-results-page .pagination .prev .icon { transform: rotate(90deg); }

/* "Back to Home" (gold) / "Back to GTS News" (navy, white outline) */
.search-results-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 50px;
}

.search-results-page .search-btn {
    display: block;
    color: var(--color-white);
    border: 2px solid;
}

.search-results-page .search-btn:hover {
    box-shadow: 0 15px 25px -7px rgba(0, 0, 0, .1);
}

.search-results-page .search-btn--home {
    background: var(--color-brand-accent);
    border-color: var(--color-brand-accent);
}

.search-results-page .search-btn--home:hover {
    background: var(--color-gold-600);
    border-color: var(--color-gold-600);
}

.search-results-page .search-btn--news {
    background: var(--color-brand-primary);
    border-color: var(--color-white);
}

.search-results-page .search-btn--news:hover {
    background: var(--color-brand-accent);
    border-color: var(--color-brand-accent);
}

@media (max-width: 1024px) {
    .search-results-page {
        padding: 75px 0;
    }

    .search-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .search-results-page {
        padding: 50px 0;
    }

    .search-card__body {
        padding: 1.5rem;
    }
}

@media (max-width: 575px) {
    .search-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* 404 — background image, centred stack with 35px gaps --------------------- */
.error-404 {
    background: var(--color-brand-primary) center / cover no-repeat;
}

.error-404__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 35px;
    min-height: 987px;
    padding-block: 100px;
    text-align: center;
}

.error-404__icon {
    width: 70px;
    height: 70px;
}

.error-404__gif {
    width: 100%;
    max-width: 290px;
}

.error-404__title {
    margin: 0;
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    color: var(--color-white) !important;
}

.error-404__text {
    max-width: 590px;
    margin: 0 auto;
    font-family: var(--font-heading);
    font-size: var(--fs-h4);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-white);
}

@media (max-width: 1024px) {
    .error-404__inner {
        padding-block: 75px;
    }
}

@media (max-width: 767px) {
    .error-404__inner {
        min-height: 698px;
        padding-block: 50px;
    }
}

/* ==========================================================================
   13. Forms — Contact Form 7 and the search box
   ========================================================================== */

.wpcf7 form {
    display: grid;
    gap: 20px;
}

.wpcf7 .form-row {
    display: grid;
    gap: 20px;
}

.wpcf7 label {
    display: block;
}

/* light blue fields; placeholders double as labels */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 10px 23px;
    font: inherit;
    font-family: var(--font-body);
    font-size: var(--fs-lg);
    line-height: 1.2;
    color: var(--color-gray-500);
    background: var(--color-blue-100);
    border: 0;
    border-radius: 0;
    transition: box-shadow var(--transition);
}

.wpcf7 ::placeholder {
    color: var(--color-gray-500);
    opacity: 1;
}

.wpcf7 textarea {
    height: 192px;
    min-height: 192px;
    resize: vertical;
}

.wpcf7 :is(input, textarea):focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-brand-primary);
}

.wpcf7 input[type="submit"] {
    justify-self: start;
    margin-top: 8px;
    padding: 14px 28px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--color-white);
    background: var(--color-brand-accent);
    border: 0;
    border-radius: 0;
    cursor: pointer;
}

.wpcf7 input[type="submit"]:hover {
    background: var(--color-gold-600);
}

.wpcf7-not-valid-tip {
    margin-top: 4px;
    font-size: .9rem;
    color: #b82105;
}

.wpcf7 form .wpcf7-response-output {
    margin: 0;
    padding: 16px;
    color: var(--color-brand-primary);
    border-width: 2px;
}

.wpcf7-spinner {
    margin: 0 0 0 12px;
}

@media (min-width: 640px) {
    .wpcf7 .form-row {
        grid-template-columns: 1fr 1fr;
    }
}

/* Search box (GTS News, search results): white field + gold square button */
.search-form--news {
    position: relative;
    display: flex;
    max-width: 756px;
    margin: 0 auto 75px;
}

.search-form--news input {
    flex: 1;
    width: 100%;
    height: 61px;
    margin: 0;
    padding: 0 20px;
    font: inherit;
    font-size: 22px;
    line-height: 1.2;
    color: var(--color-gray-700);
    background: var(--color-white);
    border: 0;
    border-radius: 0;
}

.search-form--news input::placeholder {
    color: var(--color-gray-500);
}

.search-form--news button {
    display: grid;
    flex: 0 0 61px;
    place-items: center;
    width: 61px;
    height: 61px;
    color: var(--color-white);
    background: var(--color-brand-accent);
    border: 0;
    border-radius: 0;
    cursor: pointer;
}

.search-form--news button:hover {
    background: var(--color-gold-600);
}

/* ==========================================================================
   14. Dialogs — team bios and the video lightbox
   ========================================================================== */

dialog {
    padding: 0;
    color: var(--color-text);
    border: 0;
}

dialog::backdrop {
    background: rgba(0, 20, 45, .8);
}

/* no page scroll behind an open dialog */
html:has(dialog[open]) {
    overflow: hidden;
}

.bio-modal__close,
.video-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: var(--color-white);
    background: var(--color-brand-primary);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

/* Bio: gold border, photo full-bleed down the left */
.bio-modal {
    width: min(1080px, calc(100% - 32px));
    max-height: calc(100% - 48px);
    overflow: auto;
    border: 6px solid var(--color-brand-accent);
}

.bio-modal__grid {
    display: grid;
    text-align: left;
}

.bio-modal__photo {
    background: linear-gradient(180deg, var(--color-blue-100), var(--color-blue-200));
}

.bio-modal__photo img {
    width: 100%;
    height: 100%;
    max-height: 420px;
    object-fit: cover;
    object-position: top;
}

.bio-modal__body {
    padding: clamp(28px, 4vw, 48px);
}

/* the dialog sits inside a navy section: keep its text dark */
.bio-modal .bio-modal__name {
    margin-bottom: 4px;
    font-size: 2.6rem;
    text-transform: none;
    color: var(--color-brand-primary) !important;
}

.bio-modal__title,
.bio-modal a.bio-modal__email {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-brand-primary);
}

.bio-modal__title {
    margin: 0 0 2px;
}

.bio-modal a.bio-modal__email {
    display: inline-block;
    margin-bottom: 24px;
    text-decoration: none;
    word-break: break-all;
    color: var(--color-brand-accent);
}

.bio-modal a.bio-modal__email:hover {
    color: var(--color-brand-primary);
}

.bio-modal .rte {
    color: var(--color-text);
}

@media (max-width: 1024px) {
    .bio-modal .bio-modal__name {
        font-size: var(--fs-h4);
        line-height: 1.2;
    }

    .bio-modal__title,
    .bio-modal a.bio-modal__email {
        font-size: 16px;
        line-height: 1.4;
        letter-spacing: normal;
    }

    .bio-modal .rte {
        font-size: var(--fs-body);
        line-height: var(--lh-body);
    }
}

@media (min-width: 760px) {
    .bio-modal__grid {
        grid-template-columns: minmax(0, 480px) 1fr;
    }

    .bio-modal__photo img {
        max-height: none;
    }
}

/* Video lightbox */
.video-modal {
    width: min(1100px, calc(100% - 32px));
    overflow: visible;
    background: #000;
}

.video-modal__close {
    top: -54px;
    right: 0;
    background: var(--color-brand-accent);
}

.video-modal__frame {
    aspect-ratio: 16 / 9;
}

.video-modal__frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ==========================================================================
   15. Footer
   ========================================================================== */

.site-footer {
    color: var(--color-white);
    background: var(--color-brand-primary);
    border-top: var(--edge) solid var(--color-brand-accent);
}

.site-footer a {
    text-decoration: none;
    color: var(--color-white);
}

.site-footer a:hover {
    color: var(--color-brand-accent);
}

.site-footer__grid {
    display: grid;
    gap: 32px;
    max-width: calc(1221px + var(--gutter) * 2);
    padding-block: 42px;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.site-footer .site-logo img {
    width: 147px;
}

.site-footer__tagline {
    max-width: 181px;
    margin: 16px 0 0;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
}

.site-footer__heading {
    margin-bottom: 18px;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: normal;
    color: var(--color-white) !important;
}

.site-footer__menu ul,
.site-footer__contact .contact-list {
    display: grid;
    gap: 17px;
    padding: 0;
    list-style: none;
}

.site-footer__menu ul {
    align-content: start;
    margin: 0;
}

.site-footer__contact .contact-list {
    margin: 24px 0 0;
}

/* Our Specialties: two independent columns */
.site-footer__cols {
    display: grid;
    grid-template-columns: repeat(2, 150px);
    align-items: start;
    column-gap: 35px;
}

.site-footer__contact {
    text-align: right;
}

.social-link {
    display: inline-grid;
    place-items: center;
    width: 50px;
    height: 50px;
    color: var(--color-white) !important;
    background: var(--color-brand-accent);
}

.social-link:hover {
    background: var(--color-gold-600);
}

.social-link .icon {
    width: 16px;
    height: 16px;
}

.site-footer__badges {
    display: flex;
    flex-wrap: wrap;
    align-content: start;
    align-items: center;
    gap: 27px;
}

.site-footer__badges img {
    width: auto;
    max-width: 88px;
    max-height: 112px;
}

.site-footer__bottom {
    padding: 24px 0;
    font-size: .92rem;
    border-top: 1px solid rgba(255, 255, 255, .15);
}

.site-footer__bottom .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* "Powered by Hunchfree" logo, right-aligned */
.site-footer__credit {
    display: block;
    flex-shrink: 0;
    transition: opacity var(--transition);
}

.site-footer__credit:hover {
    opacity: .8;
}

.site-footer__credit img {
    width: 160px;
}

.site-footer__bottom p {
    margin: 0;
}

@media (min-width: 700px) {
    .site-footer__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1100px) {
    .site-footer__grid {
        grid-template-columns: 223px 165px 332px 1fr 223px;
    }

    .site-footer__badges {
        flex-direction: column;
        flex-wrap: nowrap;
    }
}

@media (max-width: 1024px) {
    .site-footer__bottom {
        font-size: 16px;
    }
}

/* phones: one centred column */
@media (max-width: 767px) {
    .site-footer__grid,
    .site-footer__contact {
        text-align: center;
    }

    .site-footer__grid {
        justify-items: center;
    }

    .site-footer__tagline {
        margin-inline: auto;
    }

    .site-footer__cols {
        grid-template-columns: 1fr;
        row-gap: 17px;
    }

    .site-footer__badges {
        justify-content: center;
    }

    .site-footer__bottom {
        font-size: 14px;
        text-align: center;
    }

    .site-footer__bottom .container {
        flex-direction: column;
        justify-content: center;
    }
}


/* ==========================================================================
   16. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}