/* ==========================================================================
   CLOUD PUBLICATIONS — RESPONSIVE
   Loaded after style.css so these rules take precedence.

   1.  Ultra-wide         (min-width: 1600px)
   2.  Desktop mega menu  (min-width: 1200px)
   3.  Below XL           (max-width: 1199.98px)  — nav collapses here
   4.  Tablet landscape   (max-width: 991.98px)
   5.  Tablet portrait    (max-width: 767.98px)
   6.  Mobile            (max-width: 575.98px)
   7.  Small mobile      (max-width: 400px)
   8.  Print
   ========================================================================== */


/* ==========================================================================
   1. ULTRA-WIDE SCREENS
   ========================================================================== */

@media (min-width: 1600px) {

    :root {
        --cp-section-space: 8.5rem;
    }
    .container {
        max-width: 1360px;
    }
    body {
        font-size: 1.09rem;
    }
    .hero {
        padding-top: 7rem;
        padding-bottom: 8rem;
    }
}
/* ==========================================================================
   2. DESKTOP MEGA MENU
   Applies only where the navbar is expanded (Bootstrap navbar-expand-xl).
   ========================================================================== */

@media (min-width: 1200px) {

    .site-nav__item--mega {
        position: static;
    }
    .site-mega.dropdown-menu {
        left: 50%;
        right: auto;
        width: min(940px, calc(100vw - 3rem));
        margin-top: 0.7rem;
        transform: translateX(-50%);
    }
    /* Invisible bridge across the gap between trigger and panel.

       Without it the pointer leaves both elements while crossing the 0.7rem
       margin, firing mouseleave and closing a menu the user is on its way to.

       The bridge belongs to the panel, not the trigger. A bridge attached to
       each trigger would also sit under its neighbours, so travelling
       diagonally toward this centred panel would cross the next trigger's
       bridge and swap menus mid-journey. Owned by the panel, the region can
       only ever keep the open menu open, never open a different one.

       It is stretched past the panel edges to span the full navbar, so any
       approach angle stays inside the hover region. It occupies only the gap
       below the links, so it never intercepts a click on them. */
    /* components.css clips the panel with overflow:hidden for its rounded
       corners. That also clips the bridge below, so it is re-enabled here.
       Children carry their own radius and 2rem of padding, so nothing
       reaches the corners and the clip is not needed on desktop. */
    .site-mega.dropdown-menu,
    .site-dropdown.dropdown-menu {
        overflow: visible;
    }
    .site-mega.dropdown-menu::before,
    .site-dropdown.dropdown-menu::before {
        content: "";
        position: absolute;
        left: -320px;
        right: -320px;
        top: -1.1rem;
        height: 1.1rem;
    }
    /* Hover opening is handled in navigation.js, not here.

       A CSS :hover rule cannot be reconciled with the click handler: hover
       would force display:block while the script toggled .show, so the panel
       flickered and a click meant to close it did nothing while the pointer
       stayed inside. Driving hover from JS means one mechanism owns the
       .show class, hover intent delays can be applied, and aria-expanded
       stays truthful. */
}
/* ==========================================================================
   3. BELOW XL — collapsed navigation
   ========================================================================== */

@media (max-width: 1199.98px) {

    .site-header.is-scrolled,
    .site-nav__collapse.show,
    .site-nav__collapse.collapsing {
        background-color: var(--cp-white);
    }
    .site-nav {
        padding-top: 0.9rem;
        padding-bottom: 0.9rem;
    }
    .site-nav__collapse {
        margin-top: 1rem;
        padding: 1rem;
        border: 1px solid var(--cp-border);
        border-radius: var(--cp-radius-lg);
        background-color: var(--cp-white);
        box-shadow: var(--cp-shadow-md);
        max-height: calc(100vh - var(--cp-header-height) - 4rem);
        overflow-y: auto;
    }
    .site-nav__list {
        gap: 0.15rem;
        align-items: stretch;
    }
    .site-nav__link.nav-link {
        padding: 0.8rem 0.9rem;
        border-radius: var(--cp-radius-sm);
        font-size: 1rem;
    }
    .site-nav__link.nav-link:hover,
    .site-nav__link.nav-link.active {
        background-color: var(--cp-light-gray);
    }
    /* Dropdowns render inline within the collapsed panel.

       position: static is essential. The base .dropdown-menu is absolutely
       positioned for the desktop flyout; left as-is here, the submenu floats
       over the page instead of pushing the menu open, so its parent item
       stays collapsed and the panel appears to jump around on tap. */
    .site-mega.dropdown-menu,
    .site-dropdown.dropdown-menu {
        position: static;
        float: none;
        width: 100%;
        margin: 0.25rem 0 0.5rem;
        border: 0;
        border-left: 2px solid var(--cp-border);
        border-radius: 0;
        box-shadow: none;
        background-color: transparent;
    }
    .site-mega__inner {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding: 0.5rem 0 0.5rem 0.75rem;
    }
    .site-mega__promo {
        margin-top: 0.5rem;
    }
    .site-nav__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
        margin: 1rem 0 0.25rem;
        padding-top: 1rem;
        border-top: 1px solid var(--cp-border);
    }
    .site-nav__actions .btn-outline-ghost,
    .site-nav__actions .btn-primary-cp {
        width: 100%;
    }
    .process-track {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .cta__panel {
        padding: 3.25rem;
    }
}
/* ==========================================================================
   4. TABLET LANDSCAPE
   ========================================================================== */

@media (max-width: 991.98px) {

    :root {
        --cp-section-space: 5rem;
    }
    .hero {
        padding-top: 3.5rem;
        padding-bottom: 4.5rem;
        text-align: left;
    }
    .hero__visual {
        margin-top: 1rem;
    }
    .hero__glass {
        left: 0;
        bottom: 0;
        width: min(300px, 90%);
    }
    .section__head {
        margin-bottom: 2.75rem;
    }
    .section__head--split {
        margin-bottom: 2.25rem;
    }
    .section__head--split .text-lg-end {
        text-align: left !important;
    }
    .industry-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 2.5rem;
    }
    .why__figure {
        margin-top: 2.5rem;
    }
    .cta__panel {
        padding: 2.75rem;
    }
    .cta__actions {
        margin-top: 2rem;
    }
    .site-footer {
        padding-top: 4rem;
    }
}
/* ==========================================================================
   5. TABLET PORTRAIT
   ========================================================================== */

@media (max-width: 767.98px) {

    :root {
        --cp-section-space: 4rem;
        --cp-header-height: 74px;
    }
    body {
        font-size: 1.02rem;
        line-height: 1.7;
    }
    .announcement-bar {
        font-size: 0.82rem;
    }
    .announcement-bar__text {
        padding: 0.6rem 0;
        gap: 0.45rem;
    }
    .hero__lead {
        font-size: 1.04rem;
    }
    .hero__actions .btn-primary-cp,
    .hero__actions .btn-secondary-cp {
        width: 100%;
    }
    .hero__assurances {
        gap: 0.75rem 1.25rem;
    }
    .hero__glass {
        position: static;
        width: 100%;
        margin-top: 1.25rem;
        background: var(--cp-white);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border-color: var(--cp-border);
        box-shadow: var(--cp-shadow-sm);
    }
    .hero__glass-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .stat-card {
        padding: 1.6rem 1.35rem;
    }
    .stat-card__icon {
        width: 40px;
        height: 40px;
        margin-bottom: 1rem;
    }
    .process-track {
        grid-template-columns: 1fr;
    }
    .industry-grid {
        grid-template-columns: 1fr;
    }
    .industry-card--wide {
        grid-column: auto;
    }
    .faq-item__button.accordion-button {
        padding: 1.15rem 1.25rem;
        font-size: 0.98rem;
    }
    .faq-item__body.accordion-body {
        padding: 0 1.25rem 1.25rem;
        font-size: 0.94rem;
    }
    .cta__panel {
        padding: 2.25rem 1.6rem;
    }
    .cta__actions .btn-light-cp,
    .cta__actions .btn-outline-light-cp {
        width: 100%;
    }
    .site-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.85rem;
    }
    .site-footer__legal {
        gap: 1rem;
    }
    .back-to-top {
        right: 1.15rem;
        bottom: 1.15rem;
        width: 46px;
        height: 46px;
    }
}
/* ==========================================================================
   6. MOBILE
   ========================================================================== */

@media (max-width: 575.98px) {

    .container {
        padding-left: 1.15rem;
        padding-right: 1.15rem;
    }
    h1 { font-size: clamp(2.1rem, 8.5vw, 2.6rem); }
    h2 { font-size: clamp(1.7rem, 6.6vw, 2.1rem); }
    .site-brand__tagline {
        display: none;
    }
    .site-brand__name {
        font-size: 1.05rem;
    }
    .hero__eyebrow {
        font-size: 0.8rem;
        padding: 0.4rem 0.85rem;
    }
    .hero__assurance {
        font-size: 0.86rem;
    }
    .hero__glass-list {
        grid-template-columns: 1fr;
    }
    .section__eyebrow {
        font-size: 0.72rem;
    }
    .article-card__body {
        padding: 1.4rem;
    }
}
/* ==========================================================================
   7. SMALL MOBILE
   ========================================================================== */

@media (max-width: 400px) {

    .announcement-bar__link {
        width: 100%;
        justify-content: center;
    }
    .cta__points {
        flex-direction: column;
        gap: 0.5rem;
    }
}
/* ==========================================================================
   8. PRINT
   ========================================================================== */

/* ==========================================================================
   9. INTERIOR PAGE COMPONENTS
   Rules for about.html and services.html. Appended after the print block so
   they are the last cascade layer for these components.
   ========================================================================== */

@media (max-width: 991.98px) {

    .service-row__foot {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 1.25rem;
    }
    .service-row__foot .btn-secondary-cp {
        justify-self: start;
    }
}
@media (max-width: 991.98px) {

    /* Inside the collapsed menu the bar is inline, so it needs the same
       indent as the mega columns rather than the panel's own padding. */
    .site-mega__foot {
        margin-top: 0.75rem;
        border-radius: var(--cp-radius-md);
        border-top: 0;
    }
    .site-mega__all {
        padding: 0.9rem 1rem;
    }
}
@media (max-width: 767.98px) {

    .page-banner {
        padding: 3rem 0 2.5rem;
    }
    .colophon {
        padding: 1.75rem 1.35rem;
    }
    .panel-card,
    .vmv-card {
        padding: 1.75rem 1.4rem;
    }
    /* The number/icon column is dropped so the copy gets full width; the two
       markers sit side by side above it instead. */
    .service-row {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding: 1.85rem 1.4rem;
    }
    .service-row__aside {
        flex-direction: row;
        align-items: center;
        gap: 0.9rem;
    }
    .service-row__number {
        font-size: 1.9rem;
    }
    .check-list {
        grid-template-columns: 1fr;
    }
    .jump__link {
        padding: 0.5rem 0.85rem;
        font-size: 0.83rem;
    }
}
@media (max-width: 991.98px) {

    /* Sticky headings only help beside a long column; stacked they would
       hover over the questions. */
    .faq-group__intro {
        position: static;
    }
    .faq-groups .container > .faq-group + .faq-group {
        margin-top: 2.5rem;
        padding-top: 2.5rem;
    }
}
@media (max-width: 767.98px) {

    .form-grid {
        grid-template-columns: 1fr;
    }
    .form-card {
        padding: 1.75rem 1.35rem;
    }
    .office {
        padding: 1.35rem 1.2rem;
    }
}
@media (max-width: 991.98px) {

    /* Stacked, a sticky contents block would sit on top of the prose. */
    .doc__toc { position: static; }
}
@media (max-width: 991.98px) {

    /* Touch targets get extra separation where fingers, not cursors, are
       doing the pointing. */
    .site-footer__links { gap: 0.35rem; }
    .site-footer__links a { min-height: 32px; }
    .site-footer__legal { gap: 0.35rem 1.25rem; }
    .site-footer__legal a { min-height: 32px; }
    .site-footer__contact a { min-height: 26px; }
    .factbox { grid-template-columns: 1fr; gap: 0; }
    .factbox > div:nth-last-child(-n+2) { border-bottom: 1px solid var(--cp-border); }
    .factbox > div:last-child { border-bottom: 0; }
}
@media (max-width: 767.98px) {

    .factbox { padding: 1.35rem 1.25rem; }
    .factbox > div { grid-template-columns: 1fr; gap: 0.2rem; }
    .journal-help { padding: 1.25rem 1.2rem; }
    .feature-post { grid-template-columns: 1fr; }
    .feature-post__aside { min-height: 120px; }
    .feature-post__body { padding: 1.85rem 1.4rem; }
    .doc__section + .doc__section { margin-top: 2rem; padding-top: 2rem; }
    .role-card { padding: 1.6rem 1.35rem; }
    .role-card__head { flex-direction: column; align-items: flex-start; gap: 0.9rem; }
    .policy-link { padding: 1.15rem 1.15rem; }
    .resource-card { padding: 1.7rem 1.4rem; }
}
@media (max-width: 575.98px) {

    /* .btn sets white-space: nowrap so labels never break mid-phrase. On the
       narrowest screens a long label then exceeds the viewport and forces a
       horizontal scrollbar, so wrapping is permitted here. */
    .btn-primary-cp,
    .btn-secondary-cp,
    .btn-light-cp,
    .btn-outline-light-cp,
    .btn-outline-ghost {
        white-space: normal;
        text-align: center;
    }
    .page-banner__actions .btn-primary-cp,
    .page-banner__actions .btn-secondary-cp {
        width: 100%;
    }
    .service-row__text,
    .vmv-card__text,
    .panel-card__title {
        max-width: none;
    }
    .tag {
        font-size: 0.82rem;
        padding: 0.36rem 0.75rem;
    }
}
@media print {

    .announcement-bar,
    .site-header,
    .back-to-top,
    .hero__aurora,
    .hero__grid,
    .cta {
        display: none !important;
    }
    body {
        background-color: #FFFFFF;
        color: #000000;
        font-size: 11pt;
    }
    .section {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
        page-break-inside: avoid;
    }
    a {
        color: #000000;
        text-decoration: underline;
    }
}