/* =========================================================
   REDTECH Dynamics Solutions Corp. — Corporate website
   Builds on the brand tokens in redtech.css.
   ========================================================= */

html {
    scroll-behavior: smooth;
}

/* Anchored solution sections land clear of the sticky header. */
.corp [id] {
    scroll-margin-top: calc(var(--header-h) + 12px);
}

/* ---------------------------------------------------------
   Header and main navigation
   --------------------------------------------------------- */

.corp-header {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    height: var(--header-h);
    padding: 0 clamp(18px, 4vw, 48px);
    background: rgba(0, 0, 0, .92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.corp-header__brand {
    display: flex;
    align-items: center;
    flex: none;
}

.corp-header__brand img {
    display: block;
    height: 46px;
    width: auto;
}

.corp-nav {
    display: flex;
    align-items: center;
    gap: clamp(14px, 2vw, 30px);
}

.corp-nav__list {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.6vw, 26px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.corp-nav__link {
    position: relative;
    display: inline-block;
    padding: 6px 2px;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--text-dim);
    white-space: nowrap;
    transition: color .16s ease;
}

.corp-nav__link:hover {
    color: #fff;
}

.corp-nav__link.is-active {
    color: #fff;
}

.corp-nav__link.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    border-radius: 1px;
    background: var(--red);
    box-shadow: 0 0 8px var(--red-glow);
}

/* Mobile menu toggle — hidden until the nav collapses. */
.corp-header__burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: none;
    border: 1px solid var(--field-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.corp-header__burger span {
    display: block;
    height: 2px;
    border-radius: 1px;
    background: #fff;
    transition: transform .18s ease, opacity .18s ease;
}

.corp-header__burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.corp-header__burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.corp-header__burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */

.btn-cta {
    display: inline-block;
    padding: 13px 26px;
    background: var(--red);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .05em;
    border: 1px solid var(--red);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    transition: background-color .16s ease, box-shadow .16s ease;
}

.btn-cta:hover {
    background: var(--red-bright);
    box-shadow: 0 0 22px var(--red-glow);
}

.btn-cta:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .35);
}

.btn-cta--sm,
.corp-nav__demo {
    padding: 10px 18px;
    font-size: 13px;
}

.btn-outline {
    display: inline-block;
    padding: 12px 24px;
    background: transparent;
    color: var(--red-bright);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .05em;
    border: 1px solid var(--red-line);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
    transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}

.btn-outline:hover {
    color: #fff;
    border-color: var(--red);
    background: rgba(226, 18, 26, .12);
}

.btn-outline:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(226, 18, 26, .35);
}

.btn-outline--sm {
    padding: 9px 16px;
    font-size: 12.5px;
}

/* ---------------------------------------------------------
   Home banner
   --------------------------------------------------------- */

.corp-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(72px, 11vw, 140px) clamp(18px, 4vw, 48px);
    background:
        radial-gradient(ellipse at 80% 40%, rgba(226, 18, 26, .22), transparent 55%),
        #000;
}

/* The rotating globe (public/js/hero-globe.js), cropped by the hero's
   bottom-right corner. It sits under the fade that keeps the text legible. */
.corp-hero__globe {
    position: absolute;
    z-index: 0;
    right: clamp(-320px, -14vw, -60px);
    bottom: -34%;
    width: min(112vh, 72vw, 1150px);
    aspect-ratio: 1;
    pointer-events: none;
}

.corp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(0, 0, 0, .94) 34%, rgba(0, 0, 0, .55) 70%, rgba(0, 0, 0, .2));
}

.corp-hero__inner {
    position: relative;
    z-index: 2;
    max-width: 1140px;
    margin: 0 auto;
}

.corp-hero__eyebrow {
    margin: 0 0 18px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--red-bright);
}

.corp-hero__title {
    max-width: 760px;
    margin: 0 0 20px;
    font-size: clamp(34px, 5.4vw, 62px);
    font-weight: 800;
    line-height: 1.08;
    color: #fff;
}

.corp-hero__title span {
    display: block;
    color: var(--red-bright);
}

.corp-hero__supporting {
    max-width: 640px;
    margin: 0 0 12px;
    font-size: clamp(17px, 2vw, 21px);
    font-weight: 600;
    color: #fff;
}

.corp-hero__intro {
    max-width: 600px;
    margin: 0 0 34px;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--text-dim);
    text-align: justify;
}

.corp-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* ---------------------------------------------------------
   Page head (inner pages)
   --------------------------------------------------------- */

.corp-page-head {
    padding: clamp(48px, 7vw, 84px) clamp(18px, 4vw, 48px) 0;
    text-align: center;
}

.corp-page-head__title {
    margin: 0 auto 14px;
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 800;
    color: #fff;
}

.corp-page-head__title::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin: 14px auto 0;
    border-radius: 2px;
    background: var(--red);
}

/* The head's bottom inset normally comes from the section beneath it. Where
   that section is tinted, the edge is visible, and without an inset of its
   own the head's last line sits flush against it while the band below keeps
   its full inset — the head reads as sitting off-centre in its own band. */
.corp-page-head--above-tint {
    padding-bottom: clamp(48px, 7vw, 84px);
}

.corp-page-head__lead {
    /* Two failure modes, so two limits. A fixed cap alone ran the lead
       nearly edge to edge on a laptop; a cap tight enough to fix that set a
       needlessly narrow, orphan-prone column on a wide monitor. So: never a
       longer measure than 700px, and never closer to the edges than a tenth
       of the section on either side. */
    max-width: min(700px, 80%);
    margin: 0 auto;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--text-dim);
}

/* Emphasis in the approved copy reads white against the dimmed lead, the
   same as it does in the body text. */
.corp-page-head__lead strong {
    color: #fff;
    font-weight: 600;
}

/* ---------------------------------------------------------
   Sections
   --------------------------------------------------------- */

.corp-section {
    padding: clamp(48px, 7vw, 84px) clamp(18px, 4vw, 48px);
}

.corp-section--tint {
    background: var(--panel);
    border-top: 1px solid rgba(255, 255, 255, .05);
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}

/* The rule divides one section of content from another. Directly under a
   page head it divides nothing, and reads as a stray line beneath the
   opening paragraph, so the tint alone marks the change. */
.corp-page-head + .corp-section--tint {
    border-top: 0;
}

.corp-section__inner {
    max-width: 1140px;
    margin: 0 auto;
}

.corp-section__inner--narrow {
    max-width: 820px;
}

/* The inset at the foot of a section is the section's own padding. A
   trailing paragraph margin adds to it, leaving more space below the last
   line than above the first — so the last child gives its margin up. */
.corp-section__inner > :last-child {
    margin-bottom: 0;
}

.corp-heading {
    margin: 0 0 18px;
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 800;
    color: #fff;
}

.corp-heading::after {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    margin-top: 12px;
    border-radius: 2px;
    background: var(--red);
}

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

.corp-heading--center::after {
    margin-left: auto;
    margin-right: auto;
}

.corp-body {
    margin: 0 0 16px;
    font-size: 15.5px;
    /* Lines sit close enough to read as one block of copy without
       compressing — the paragraph spacing above carries the separation. */
    line-height: 1.62;
    color: var(--text-dim);
    /* Corporate copy is fully justified per the approved formatting. */
    text-align: justify;
}

/* One-line lede under a solution heading — the approved short statement
   that also serves as the card text. */
.corp-lede {
    margin: 0 0 18px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.6;
    color: #fff;
}

/* Emphasis inside the approved corporate copy reads white against the
   dimmed body text, matching the source document's bold passages. */
.corp-body strong {
    color: #fff;
    font-weight: 600;
}

.corp-body--center {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Awaiting final approved copy — reads as a formal notice, not an error. */
.corp-body--pending {
    padding: 18px 22px;
    background: rgba(255, 255, 255, .03);
    border: 1px dashed var(--field-border);
    border-radius: var(--radius);
    font-style: italic;
    color: var(--text-mute);
}

.corp-body--note {
    padding-left: 14px;
    border-left: 3px solid var(--red-line);
    font-size: 14px;
    color: var(--text-mute);
}

.corp-section__more {
    margin-top: 10px;
}

.corp-section__center {
    margin: 30px 0 0;
    text-align: center;
}

.corp-section__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 22px 0 28px;
}

/* ---------------------------------------------------------
   Solution cards
   --------------------------------------------------------- */

/* Three to a row. The cards flow rather than sit in grid tracks, so the
   two industry solutions beneath the three principal ones centre instead
   of leaving an empty slot at the right — same as the contact channels. */
.solution-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
    margin-top: 34px;
}

.solution-card {
    flex: 0 0 calc((100% - 44px) / 3);
    display: flex;
    flex-direction: column;
    background: var(--panel-2);
    border: 1px solid var(--red-line-soft);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.solution-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
}

.solution-card:hover {
    border-color: var(--red-line);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .5), 0 0 24px rgba(226, 18, 26, .12);
    transform: translateY(-3px);
}

.solution-card__preview {
    position: relative;
    display: block;
    border-bottom: 1px solid var(--red-line-soft);
    background: #000;
}

.solution-card__visit {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .62);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    opacity: 0;
    transition: opacity .16s ease;
}

.solution-card__preview:hover .solution-card__visit,
.solution-card__preview:focus-visible .solution-card__visit {
    opacity: 1;
}

.solution-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 22px 24px 26px;
}

.solution-card__name {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

/* The descriptor that travels with a solution's name. */
.solution-card__tagline {
    margin: -6px 0 0;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--red-bright);
}

.solution-card__text {
    flex: 1;
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-dim);
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Where the card copy runs to two paragraphs, only the last takes up the
   slack, so LEARN MORE stays at the foot without opening a gap between. */
.solution-card__text:not(:last-of-type) {
    flex: none;
}

/* ---------------------------------------------------------
   Solution write-ups — tagline, subheadings, named entries
   --------------------------------------------------------- */

.corp-tagline {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--red-bright);
}

.corp-subheading {
    margin: 34px 0 14px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

/* A named item with its explanation beneath — the Lending Suite's reports.
   Marked with the same red dot as the function list. */
.entry-list {
    margin: 6px 0 20px;
}

.entry-list__item {
    position: relative;
    padding-left: 20px;
}

.entry-list__item + .entry-list__item {
    margin-top: 16px;
}

.entry-list__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--red);
}

.entry-list dt {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

.entry-list dd {
    margin: 4px 0 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-dim);
}

/* ---------------------------------------------------------
   Enterprise function list
   --------------------------------------------------------- */

/* Two columns the items flow down, not a grid of two tracks. In a grid
   each row is as tall as its taller cell, so a one-line item beside a
   wrapped one is padded out and the list reads as unevenly spaced. Flowing
   columns give every item the same gap, whatever its neighbour does. */
.function-list {
    columns: 2;
    column-gap: 26px;
    margin: 6px 0 10px;
    padding: 0;
    list-style: none;
}

.function-list li {
    position: relative;
    /* A wrapped item stays whole rather than breaking across columns. */
    break-inside: avoid;
    margin-bottom: 10px;
    padding-left: 20px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--text-dim);
}

.function-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--red);
}

/* ---------------------------------------------------------
   Client logos
   --------------------------------------------------------- */

.client-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    margin: 34px 0 0;
    padding: 0;
    list-style: none;
}

/* Client artwork is supplied for light contexts, so each logo sits on its
   own white plate — same treatment as the registered-with ribbon. */
.client-logos__item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 22px;
    background: #fff;
    border-radius: var(--radius-sm);
}

.client-logos__item img {
    display: block;
    height: 52px;
    width: auto;
    max-width: 190px;
    object-fit: contain;
}

/* ---------------------------------------------------------
   Events — home preview grid and full gallery
   --------------------------------------------------------- */

.event-grid--preview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 34px;
}

.event-grid__photo {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, .07);
}

/* Uniform tiles keep the gallery corporate and organized regardless of the
   mix of landscape, portrait, and square photographs — the enlarged viewer
   is where each photograph shows at its own aspect ratio. */
.event-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    margin-top: 34px;
}

.event-gallery__item {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    margin: 0;
    padding: 0;
    background: var(--panel-2);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: zoom-in;
    transition: border-color .16s ease;
}

.event-gallery__item:hover,
.event-gallery__item:focus-visible {
    border-color: var(--red-line);
    outline: none;
}

.event-gallery__item[hidden] {
    display: none;
}

.event-gallery__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------------------------------------------------------
   Lightbox viewer
   --------------------------------------------------------- */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .94);
    touch-action: pan-y;
}

.lightbox[hidden] {
    display: none;
}

.lightbox__photo {
    max-width: min(92vw, 1400px);
    max-height: 86vh;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

.lightbox__close,
.lightbox__nav {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease;
}

.lightbox__close:hover,
.lightbox__nav:hover {
    background: rgba(226, 18, 26, .35);
    border-color: var(--red-line);
}

.lightbox__close:focus-visible,
.lightbox__nav:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(226, 18, 26, .5);
}

.lightbox__close {
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    font-size: 26px;
    line-height: 1;
}

.lightbox__nav {
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    font-size: 30px;
    line-height: 1;
}

.lightbox__nav--prev {
    left: 18px;
}

.lightbox__nav--next {
    right: 18px;
}

/* ---------------------------------------------------------
   Mission / Vision and Values
   --------------------------------------------------------- */

.mv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.mv-card {
    padding: 32px 30px;
    background: var(--panel-2);
    border: 1px solid var(--red-line-soft);
    border-top: 3px solid var(--red);
    border-radius: var(--radius);
}

.mv-card .corp-body {
    margin-bottom: 0;
}

.value-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 34px;
}

.value-card {
    padding: 26px 24px;
    background: var(--panel-2);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: var(--radius);
    transition: border-color .16s ease;
}

.value-card:hover {
    border-color: var(--red-line-soft);
}

.value-card__name {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--red-bright);
}

.value-card__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-dim);
    text-align: justify;
}

/* ---------------------------------------------------------
   Officers and the Exclusive Channel Partner
   --------------------------------------------------------- */

.officer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.officer-card {
    padding: 28px 26px;
    background: var(--panel-2);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: var(--radius);
}

.officer-card__photo {
    display: block;
    width: 128px;
    height: 128px;
    /* Centred over the name and position, which stay ranged left. */
    margin: 0 auto 16px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--red-line);
}

/* Name and office are one block of identification, so both are set at the
   tight leading a label wants rather than the body text's 1.5, and sit
   close together. All-caps names carry no descenders, so their lines can
   close up further than the office lines below them. */
.officer-card__name {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.05;
    color: #fff;
}

.officer-card__position {
    margin: 0 0 12px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.15;
    color: var(--red-bright);
}

/* A second office takes its own line rather than trailing the first behind
   a comma, which read as one run-on title. It keeps a hair more room above
   it than the leading gives, so the two read as two offices and not as one
   title that happens to wrap. */
.officer-card__position-second {
    display: block;
    margin-top: 2px;
}

.officer-card__profile {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-dim);
    text-align: justify;
}

.officer-card__areas {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-mute);
}

.officer-card__link {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--red-bright);
}

.officer-card__link:hover {
    text-decoration: underline;
}

/* A separate corporate entity — deliberately a different shape from the
   officer cards above it. */
.partner-card {
    display: flex;
    align-items: center;
    gap: 34px;
    margin-top: 30px;
    padding: 36px 34px;
    background: var(--panel-2);
    border: 1px solid var(--red-line-soft);
    border-radius: var(--radius);
}

.partner-card__logo {
    flex: none;
    width: 120px;
    height: auto;
}

.partner-card__name {
    margin: 0 0 4px;
    font-size: 19px;
    font-weight: 800;
    color: #fff;
}

.partner-card__designation {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--red-bright);
}

.partner-card__text {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.62;
    color: var(--text-dim);
    text-align: justify;
}

.partner-card__link {
    display: inline-block;
    margin-top: 14px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--red-bright);
}

.partner-card__link:hover {
    text-decoration: underline;
}

/* The partner's officers sit inside the partner's own section. The cards are
   the same shape as REDTECH's, so this label carries the attribution. */
.partner-officers__heading {
    margin: 42px 0 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-align: center;
    color: var(--text-mute);
}

/* Three officers in the narrow column. A grid of equal tracks strands the
   third alone at the left once the row only holds two, so these cards flow
   and centre instead — the same treatment the contact channels get. */
.officer-grid--partner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 22px;
}

.officer-grid--partner .officer-card {
    /* Capped at a third of the row so a wrapped card matches the ones above
       it rather than stretching to fill. */
    flex: 1 1 230px;
    max-width: calc((100% - 44px) / 3);
}

/* ---------------------------------------------------------
   Contact channels
   --------------------------------------------------------- */

/* Five channels over two rows. A grid of equal tracks strands the fifth
   card alone at the left under a row of four, so the cards flow instead:
   three to a row, and the remaining two centred beneath them. */
.channel-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
}

.channel-card {
    /* Capped at a third of the row so the two cards underneath match the
       three above instead of stretching to fill. The cap stays wide enough
       at every step down that the longest address still sets on one line
       rather than breaking mid-word. */
    flex: 1 1 300px;
    max-width: calc((100% - 36px) / 3);
    padding: 26px 24px;
    background: var(--panel-2);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: var(--radius);
}

.channel-card__name {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--red-bright);
}

.channel-card__value {
    display: inline-block;
    margin: 0;
    font-size: 14.5px;
    font-weight: 600;
    color: #fff;
    /* A last resort only: the card is sized to hold the longest address
       whole, so this should never actually split one. */
    overflow-wrap: anywhere;
}

a.channel-card__value:hover {
    color: var(--red-bright);
}

/* Honeypot — parked far off-screen, not display:none, so naive bots still
   fill it in. */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------------------------------------------------------
   Final call to action
   --------------------------------------------------------- */

.corp-cta {
    padding: clamp(56px, 8vw, 96px) clamp(18px, 4vw, 48px);
    background:
        radial-gradient(ellipse at 50% 120%, rgba(226, 18, 26, .28), transparent 60%),
        var(--panel);
    border-top: 1px solid var(--red-line-soft);
}

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */

.corp-footer {
    background: #000;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.corp-footer__grid {
    display: grid;
    /* The brand column never squeezes below what the corporate name and
       tagline need on one line each. */
    grid-template-columns: minmax(300px, 1.6fr) repeat(4, 1fr);
    gap: 36px;
    max-width: 1240px;
    margin: 0 auto;
    padding: clamp(40px, 6vw, 64px) clamp(18px, 4vw, 48px);
}

.corp-footer__brand img {
    display: block;
    height: 52px;
    width: auto;
    margin-bottom: 16px;
}

.corp-footer__legal-name {
    margin: 0 0 6px;
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

.corp-footer__tagline {
    margin: 0;
    font-size: 13px;
    color: var(--text-mute);
    /* The tagline reads as one line — never with "Business." pushed down. */
    white-space: nowrap;
}

.corp-footer__col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

/* Section headings sit above their links in the hierarchy — larger and
   more prominent than the links beneath them, never the other way around. */
.corp-footer__col h3 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--red-bright);
}

.corp-footer__col-gap {
    margin-top: 18px !important;
}

.corp-footer__col a,
.corp-footer__col span {
    font-size: 13px;
    color: var(--text-dim);
}

.corp-footer__col a:hover {
    color: #fff;
}

.corp-footer__bar {
    padding: 18px clamp(18px, 4vw, 48px);
    border-top: 1px solid rgba(255, 255, 255, .07);
    text-align: center;
    font-size: 13px;
    color: var(--text-mute);
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 1220px) {
    .corp-footer__grid {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .corp-footer__brand {
        grid-column: 1 / -1;
    }
}

/* Eight nav items since Finance Tools joined them. Between the collapse
   point and a roomy desktop the bar sets a little tighter — smaller labels,
   closer gaps — so a 1280px laptop keeps the full menu instead of trading it
   for the burger. */
@media (min-width: 1141px) and (max-width: 1360px) {
    .corp-header {
        gap: 14px;
        padding: 0 clamp(16px, 2.2vw, 30px);
    }

    .corp-header__brand img {
        height: 40px;
    }

    .corp-nav {
        gap: 14px;
    }

    .corp-nav__list {
        gap: clamp(8px, 1.05vw, 16px);
    }

    .corp-nav__link {
        font-size: 12.5px;
        letter-spacing: .03em;
    }

    .corp-nav__demo {
        padding: 9px 14px;
        font-size: 12.5px;
    }
}

/* The nav items and the demonstration action stop fitting beside the brand
   mark just above 1140px — below that the header has to collapse, or the
   whole page picks up a horizontal scrollbar. The content grids below are
   unaffected and keep their own breakpoint. */
@media (max-width: 1140px) {
    .corp-header__burger {
        display: flex;
    }

    /* The nav becomes a full-width panel under the header bar. */
    .corp-nav {
        position: absolute;
        top: var(--header-h);
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 10px 18px 20px;
        background: rgba(0, 0, 0, .97);
        border-bottom: 1px solid rgba(255, 255, 255, .09);
    }

    .corp-nav.is-open {
        display: flex;
    }

    .corp-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .corp-nav__link {
        display: block;
        padding: 13px 4px;
        font-size: 15px;
        border-bottom: 1px solid rgba(255, 255, 255, .06);
    }

    .corp-nav__link.is-active::after {
        display: none;
    }

    .corp-nav__link.is-active {
        color: var(--red-bright);
    }

    .corp-nav__demo {
        margin-top: 16px;
        text-align: center;
    }
}

@media (max-width: 1024px) {
    .value-grid,
    .officer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .solution-card {
        flex-basis: calc((100% - 22px) / 2);
    }

    .event-grid--preview {
        grid-template-columns: 1fr 1fr;
    }

    .channel-card {
        max-width: calc((100% - 18px) / 2);
    }
}

@media (max-width: 860px) {
    .corp-hero__globe {
        width: 120vw;
        right: -50vw;
        bottom: -20%;
        opacity: .55;
    }

    .mv-grid {
        grid-template-columns: 1fr;
    }

    .partner-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    /* Two to a row with the third centred beneath, rather than three cards
       squeezed narrower than the portrait they carry. */
    .officer-grid--partner .officer-card {
        max-width: calc((100% - 22px) / 2);
    }
}

@media (max-width: 640px) {
    .value-grid,
    .officer-grid,
    .event-grid--preview {
        grid-template-columns: 1fr;
    }

    .function-list {
        columns: 1;
    }

    .solution-card {
        flex-basis: 100%;
    }

    /* On a phone the section's own padding is the whole margin there is to
       spare, so the lead drops its proportional inset and fills the column. */
    .corp-page-head__lead {
        max-width: 100%;
    }

    .event-grid__photo {
        height: 200px;
    }

    .corp-footer__grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .channel-card,
    .officer-grid--partner .officer-card {
        max-width: 100%;
    }

    .corp-hero__actions .btn-cta,
    .corp-hero__actions .btn-outline {
        width: 100%;
        text-align: center;
    }
}

/* Only the very narrowest phones get to wrap the brand lines — anything
   wider keeps the corporate name and tagline whole. */
@media (max-width: 380px) {
    .corp-footer__legal-name,
    .corp-footer__tagline {
        white-space: normal;
    }
}