/* ==========================================================================
   MyRaavi - page level styles.

   Everything here is either page specific (about, services, service detail,
   contact, faqs, testimonials, legal) or a home page section treatment.
   Shared components live in app.css. Load order: app.css then pages.css.
   ========================================================================== */

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

.section--flush-bottom {
    padding-bottom: 0;
}

/* ------------------------------------------------------- Service chips */

.service-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.service-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.85rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--text-soft);
    cursor: pointer;
    transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}

.service-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.service-chip:hover {
    border-color: var(--brand-300);
    color: var(--brand-700);
}

.service-chip:has(input:checked) {
    background: var(--brand-100);
    border-color: var(--brand-500);
    color: var(--brand-700);
}

.service-chip:has(input:focus-visible) {
    outline: 3px solid var(--accent-500);
    outline-offset: 2px;
}

/* -------------------------------------------------------- Header chrome */

/* The header CTA duplicates the drawer button, so only show it on desktop. */
@media (max-width: 62rem) {
    .nav-cta-only {
        display: none;
    }
}

/* Office hours are the first thing to drop on small screens. */
@media (max-width: 47.99rem) {
    .topbar__group--hours {
        display: none;
    }
}

/* ------------------------------------------------------ Footer CTA copy */

.footer__cta-copy {
    display: grid;
    gap: 0.6rem;
    max-width: 34rem;
}

.footer__cta-title {
    font-size: var(--fs-h3);
    line-height: 1.15;
}

.footer__cta-text {
    font-size: var(--fs-sm);
    color: var(--text-inverse-soft);
}

/* ==========================================================================
   Home - our services
   ========================================================================== */

.services-showcase {
    display: grid;
    gap: clamp(1.75rem, 3.5vw, 2.75rem);
}

.service-index-grid {
    display: grid;
    gap: clamp(1.1rem, 2vw, 1.6rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
}

/* Seven cards do not divide evenly by three, which strands the last card in its
   own row. Placing it on the middle track centres it, so the closing row reads as
   a deliberate arrangement instead of an unfinished one.

   The grid above flips from two columns to three at a 955px viewport: three
   17.5rem tracks plus two clamp() gaps need 879px of container, which the
   container only reaches at that width. The media query has to match that flip
   exactly, otherwise the rule either never fires or pushes a lone card right in
   a two-column row. Re-measure and update both together if the minmax, gap or
   page padding ever changes.

   The rule is scoped to .services-showcase, so the services catalogue and every
   other grid are untouched. The :nth-child(3n + 1) qualifier only matches when
   the count really does leave one card over, so adding more services later
   cannot break the layout. */
@media (min-width: 955px) {
    .services-showcase .service-index-grid > :last-child:nth-child(3n + 1) {
        grid-column-start: 2;
    }
}

/* ==========================================================================
   Home - full width showcase slider
   ==========================================================================
   Every rule is scoped to .ss-slider on purpose. The base .slider component
   in app.css is shared with the hero carousel at the top of the same page, so
   nothing here may target an unprefixed .slider / .slide / .slide__caption
   class. That keeps this redesign from leaking into any other component.
   ========================================================================== */

/* Direct child of the section, so it runs edge to edge with no container. */
.ss-slider {
    margin-block: clamp(1.75rem, 3.5vw, 3rem);
}

.ss-slider .slider {
    border-radius: 0;
    box-shadow: none;
}

/* Taller stage than the original 21/7 letterbox. min-height takes over on
   short laptop viewports so the caption is never squeezed vertically. */
.ss-slider .slider__viewport {
    aspect-ratio: 21 / 9;
    min-height: clamp(28rem, 58vh, 38rem);
}

/* Left to right scrim keeps the caption readable on any photograph. */
.ss-slider .slide::after {
    background:
        linear-gradient(90deg, rgba(4, 26, 47, 0.95) 0%, rgba(4, 26, 47, 0.82) 34%, rgba(4, 26, 47, 0.22) 66%, rgba(4, 26, 47, 0.34) 100%),
        linear-gradient(180deg, rgba(4, 26, 47, 0.42) 0%, transparent 34%, rgba(4, 26, 47, 0.5) 78%, rgba(4, 26, 47, 0.86) 100%);
}

.ss-slide img {
    transform: scale(1.03);
    transition: transform 9s linear;
}

.ss-slide.is-active img {
    transform: scale(1.1);
}

/* Arrows. Larger, higher contrast and given a visible focus ring so they read
   as controls rather than decoration. */
.ss-slider .slider__btn {
    width: 3.4rem;
    height: 3.4rem;
    font-size: 1.35rem;
    background: rgba(4, 26, 47, 0.55);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.32);
    box-shadow: 0 18px 40px -20px rgba(4, 26, 47, 0.9);
}

.ss-slider .slider__btn:hover {
    background: var(--accent-500);
    border-color: var(--accent-500);
    transform: scale(1.1);
}

.ss-slider .slider__btn:focus-visible {
    outline: 2px solid #E7C765;
    outline-offset: 3px;
}

.ss-slider .slider__btn--prev {
    left: clamp(0.75rem, 1.6vw, 1.5rem);
}

.ss-slider .slider__btn--next {
    right: clamp(0.75rem, 1.6vw, 1.5rem);
}

/* The caption is a single column that sits over the left third of the stage
   and is centred on the vertical axis. `flex-direction: column` is what makes
   kicker, title, arabic, copy, points and actions stack - without it they all
   run side by side across the box. */
.ss-caption {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: min(41rem, 56%);
    padding: clamp(1.5rem, 3vw, 2.75rem) clamp(1.25rem, 2.5vw, 2.5rem) clamp(1.5rem, 3vw, 2.75rem) clamp(1.5rem, 6vw, 6rem);
    color: #fff;
    /* Never swallow a click meant for the arrows or a drag on the track. */
    pointer-events: none;
}

.ss-caption__card {
    position: relative;
    width: 100%;
    padding: clamp(1.4rem, 2.2vw, 2.1rem);
    border-radius: var(--r-xl);
    background: linear-gradient(150deg, rgba(8, 36, 64, 0.72) 0%, rgba(4, 26, 47, 0.58) 100%);
    -webkit-backdrop-filter: blur(16px) saturate(1.1);
    backdrop-filter: blur(16px) saturate(1.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 44px 90px -46px rgba(4, 26, 47, 0.9);
    overflow: hidden;
    /* Restore interaction for the CTAs inside the otherwise inert caption. */
    pointer-events: auto;
}

/* Gold rail down the leading edge, tying the card to the kicker and the CTA. */
.ss-caption__card::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: linear-gradient(180deg, #E7C765 0%, #C9A227 100%);
}

.ss-caption__kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.34rem 0.85rem;
    border-radius: var(--r-pill);
    background: linear-gradient(135deg, #E7C765 0%, #C9A227 100%);
    color: #1A1305;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow: 0 10px 24px -12px rgba(201, 162, 39, 0.9);
}

.ss-caption__kicker i {
    font-size: 0.85rem;
}

.ss-caption__title {
    margin: 0.9rem 0 0;
    font-size: clamp(1.9rem, 3.6vw, 3.15rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    text-wrap: balance;
    text-shadow: 0 6px 26px rgba(4, 26, 47, 0.6);
}

.ss-caption__arabic {
    display: inline-block;
    margin: 0.85rem 0 0;
    padding: 0.3rem 0.8rem;
    border-inline-start: 2px solid rgba(231, 199, 101, 0.65);
    border-radius: 0 var(--r-xs) var(--r-xs) 0;
    background: rgba(231, 199, 101, 0.12);
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    font-weight: 600;
    line-height: 1.7;
    font-style: normal;
    color: #F0D98C;
    unicode-bidi: isolate;
}

.ss-caption__text {
    margin: 0.9rem 0 0;
    max-width: 40ch;
    font-size: clamp(0.94rem, 1.05vw, 1.04rem);
    line-height: 1.62;
    color: rgba(255, 255, 255, 0.88);
}

/* Three scannable proofs between the copy and the actions. */
.ss-caption__points {
    display: grid;
    gap: 0.55rem;
    margin: 1.15rem 0 0;
    padding: 0;
    list-style: none;
}

.ss-caption__points li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.92rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
}

.ss-caption__points i {
    flex: 0 0 auto;
    margin-top: 0.12rem;
    color: #E7C765;
    font-size: 1.05rem;
}

.ss-caption__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem 1.35rem;
    margin-top: 1.5rem;
}

.ss-caption__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.2rem;
    font-size: 0.92rem;
    font-weight: 800;
    color: #fff;
    text-decoration: underline;
    text-decoration-color: rgba(231, 199, 101, 0.75);
    text-underline-offset: 5px;
    transition: color var(--t-base) var(--ease), gap var(--t-base) var(--ease);
}

.ss-caption__link:hover {
    color: #E7C765;
    gap: 0.55rem;
}

/* Two short labels floated in the free space at the top right of the stage,
   balancing the caption without crowding it. */
.ss-caption__chips {
    position: absolute;
    top: clamp(1rem, 2.2vw, 1.75rem);
    right: clamp(1rem, 2.2vw, 1.75rem);
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
}

.ss-caption__chips li {
    padding: 0.34rem 0.8rem;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.24);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
}

/* Control row under the stage: counter, labelled dots, usage hint. */
.ss-slider__bar {
    display: flex;
    align-items: center;
    gap: clamp(0.9rem, 2vw, 1.75rem);
    padding: 0.9rem clamp(1rem, 2.2vw, 2rem);
    background: linear-gradient(180deg, rgba(4, 26, 47, 0.9) 0%, var(--brand-900) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ss-slider__count {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    flex: 0 0 auto;
    margin: 0;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.5);
}

.ss-slider__count-now {
    font-size: 1.15rem;
    color: #E7C765;
}

.ss-slider__count-sep {
    margin-inline: 0.1rem;
}

/* Dots are repositioned out of the stage and into the control row. */
.ss-slider .ss-slider__bar .slider__dots {
    position: static;
    flex: 1 1 auto;
    justify-content: center;
    gap: 0.4rem;
    transform: none;
}

.ss-slider .slider__dot {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: auto;
    height: 2.4rem;
    padding: 0 0.95rem;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ss-slider .slider__dot:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.ss-slider .slider__dot[aria-selected="true"] {
    width: auto;
    background: linear-gradient(135deg, #E7C765 0%, #C9A227 100%);
    border-color: transparent;
    color: #1A1305;
}

.ss-slider .slider__dot:focus-visible {
    outline: 2px solid #E7C765;
    outline-offset: 3px;
}

.ss-slider .slider__dot-label {
    white-space: nowrap;
}

.ss-slider__hint {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: 0 0 auto;
    margin: 0;
    font-size: 0.76rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
}

/* Tablet and below: the caption moves to the bottom of the stage and the
   arrows jump to the top corners, so the two never overlap at any width. */
@media (max-width: 63.99rem) {
    .ss-slider .slider__viewport {
        aspect-ratio: 16 / 11;
        min-height: clamp(24rem, 56vh, 32rem);
    }

    .ss-slider .slide::after {
        background: linear-gradient(180deg, rgba(4, 26, 47, 0.42) 0%, rgba(4, 26, 47, 0.62) 34%, rgba(4, 26, 47, 0.92) 66%, rgba(4, 26, 47, 0.96) 100%);
    }

    .ss-caption {
        inset: auto 0 0 0;
        width: 100%;
        justify-content: flex-end;
        padding: clamp(1.25rem, 3.5vw, 2rem);
    }

    .ss-caption__text {
        max-width: 46ch;
    }

    .ss-slider .slider__btn {
        top: clamp(0.75rem, 2vw, 1.25rem);
        translate: none;
    }

    /* Both would collide with the arrows in the top corners. */
    .ss-caption__chips,
    .ss-slider__hint {
        display: none;
    }
}

/* Phone: the card carries kicker, title, arabic, copy, three proofs and two
   actions, so the type scale and rhythm are tightened and the stage is given
   extra height. Without this the card outgrew the stage and the arrows sat on
   top of it. `padding-top` reserves the band the arrows occupy. */
@media (max-width: 47.99rem) {
    /* An explicit height rather than a ratio: 4/6.2 is right at 390px but
       would stretch the stage to ~990px on a 640px tablet. */
    .ss-slider .slider__viewport {
        aspect-ratio: auto;
        height: clamp(30rem, 76vh, 38rem);
        min-height: 0;
    }

    .ss-slider .slider__btn {
        width: 2.75rem;
        height: 2.75rem;
        font-size: 1.15rem;
    }

    .ss-caption {
        padding: 4rem 1.1rem 1.25rem;
    }

    .ss-caption__card {
        padding: 1.1rem;
    }

    .ss-caption__kicker {
        padding: 0.28rem 0.7rem;
    }

    .ss-caption__title {
        margin-top: 0.7rem;
        font-size: clamp(1.55rem, 7vw, 2rem);
    }

    .ss-caption__arabic {
        margin-top: 0.6rem;
        padding: 0.22rem 0.65rem;
        font-size: 0.95rem;
        line-height: 1.6;
    }

    .ss-caption__text {
        margin-top: 0.7rem;
        font-size: 0.86rem;
        line-height: 1.55;
    }

    .ss-caption__points {
        gap: 0.35rem;
        margin-top: 0.85rem;
    }

    .ss-caption__points li {
        font-size: 0.8rem;
        line-height: 1.45;
    }

    .ss-caption__points i {
        font-size: 0.95rem;
    }

    .ss-caption__actions {
        margin-top: 1.1rem;
    }

    .ss-slider__bar {
        padding-block: 0.7rem;
    }

    .ss-slider .ss-slider__bar .slider__dots {
        gap: 0.35rem;
    }

    .ss-slider .slider__dot {
        width: 0.6rem;
        height: 0.6rem;
        padding: 0;
    }

    .ss-slider .slider__dot[aria-selected="true"] {
        width: 1.6rem;
    }

    .ss-slider .slider__dot-label {
        display: none;
    }
}

@media (max-width: 30rem) {
    .ss-caption__actions {
        gap: 0.75rem;
    }

    .ss-caption__actions .btn,
    .ss-caption__link {
        flex: 1 1 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ss-slide img,
    .ss-slide.is-active img {
        transform: none;
        transition: none;
    }

    .ss-slider .slider__btn:hover {
        transform: none;
    }
}

/* ==========================================================================
   Home - Why Raavi (brand bento)
   Scoped to .bento--brand because the same .bento__item markup is reused on
   the about, faqs and services pages, which keep their light theme.

   The previous version neutralised its own modifiers: --wide was forced to
   `grid-column: auto` and --dark was repainted with the default surface, so
   all six cards rendered identically. The grid is now a real bento:
   1 column -> 2 columns -> 6 columns where item 1 is a 3x2 flagship, items 2
   and 3 stack beside it and items 4-6 close a row of three.
   ========================================================================== */

.bento--brand {
    --bento-gold: #E7C765;
    --bento-gold-soft: rgba(231, 199, 101, 0.5);
    --bento-line: rgba(255, 255, 255, 0.14);
    --bento-surface: linear-gradient(155deg, var(--brand-700) 0%, var(--brand-800) 62%, var(--brand-900) 100%);
    --bento-surface-lead: linear-gradient(152deg, #16507F 0%, var(--brand-800) 58%, var(--brand-900) 100%);

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1rem, 1.7vw, 1.3rem);
}

/* ---------------------------------------------------------------- Card shell */

.bento--brand .bento__item {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    grid-column: auto;
    grid-row: auto;
    padding: clamp(1.5rem, 2.2vw, 1.95rem);
    background: var(--bento-surface);
    border: 1px solid var(--bento-line);
    border-radius: var(--r-lg);
    color: var(--text-inverse);
    box-shadow: 0 20px 44px -30px rgba(4, 26, 47, 0.95);
    transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}

/* Two-light setup: a gold key light and a brand-blue fill, so the cards gain
   depth instead of reading as flat navy rectangles. */
.bento--brand .bento__item::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(115% 85% at 104% -6%, rgba(231, 199, 101, 0.24) 0%, transparent 60%),
        radial-gradient(95% 75% at -10% 106%, rgba(28, 99, 155, 0.5) 0%, transparent 62%);
    opacity: 0.9;
    transition: opacity var(--t-base) var(--ease);
}

/* Gold hairline along the top edge. Declares every property that the
   decorative ::after from .bento__item--dark in app.css also sets, so it
   fully overrides that orange blob. */
.bento--brand .bento__item::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    width: auto;
    height: 1px;
    border-radius: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(231, 199, 101, 0.7) 26%, rgba(255, 255, 255, 0.5) 50%, rgba(231, 199, 101, 0.7) 74%, transparent 100%);
    opacity: 0.75;
    pointer-events: none;
    z-index: 2;
}

.bento--brand .bento__item>* {
    position: relative;
    z-index: 1;
}

/* Corner index so the six cards read as a set rather than six loose boxes.
   Decorative only, the heading carries the meaning. */
.bento--brand .bento__num {
    position: absolute;
    top: clamp(1.15rem, 1.9vw, 1.5rem);
    right: clamp(1.15rem, 1.9vw, 1.5rem);
    z-index: 1;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.16em;
    color: rgba(231, 199, 101, 0.62);
}

.bento--brand .bento__item h3,
.bento--brand .bento__item h4 {
    color: #fff;
    font-size: 1.06rem;
    line-height: 1.3;
}

.bento--brand .bento__item p,
.bento--brand .bento__item--dark p {
    color: var(--text-inverse-soft);
    font-size: 0.92rem;
    line-height: 1.62;
}

/* -------------------------------------------------------------- Icon bubble */

.bento--brand .bento__item .icon-bubble,
.bento--brand .bento__item .icon-bubble--accent,
.bento--brand .bento__item .icon-bubble--glass {
    --bubble-bg: rgba(231, 199, 101, 0.14);
    --bubble-fg: var(--bento-gold);
    color: var(--bento-gold);
    border: 1px solid rgba(231, 199, 101, 0.38);
    box-shadow: 0 10px 22px -12px rgba(201, 162, 39, 0.7);
}

.bento--brand .bento__item .icon-bubble i {
    color: var(--bento-gold);
}

.bento--brand .bento__item:hover .icon-bubble {
    background: rgba(231, 199, 101, 0.24);
    border-color: rgba(231, 199, 101, 0.7);
    transform: translateY(-2px) scale(1.04);
}

/* --------------------------------------------------------------- Interaction */

.bento--brand .bento__item:hover {
    transform: translateY(-6px);
    border-color: var(--bento-gold-soft);
    box-shadow: 0 30px 58px -28px rgba(4, 26, 47, 1), inset 0 -3px 0 -1px rgba(231, 199, 101, 0.8);
}

.bento--brand .bento__item:hover::before {
    opacity: 1;
}

/* Vary the key light so six cards do not read as one repeated stamp. */
.bento--brand .bento__item:nth-child(2)::before,
.bento--brand .bento__item:nth-child(5)::before {
    background:
        radial-gradient(115% 85% at 6% -8%, rgba(231, 199, 101, 0.22) 0%, transparent 60%),
        radial-gradient(95% 75% at 104% 104%, rgba(28, 99, 155, 0.5) 0%, transparent 62%);
}

.bento--brand .bento__item:nth-child(3)::before,
.bento--brand .bento__item:nth-child(6)::before {
    background:
        radial-gradient(120% 70% at 50% -14%, rgba(231, 199, 101, 0.2) 0%, transparent 62%),
        radial-gradient(95% 75% at -8% 104%, rgba(28, 99, 155, 0.48) 0%, transparent 62%);
}

/* ------------------------------------------------------- Featured glass card */

.bento--brand .bento__item--dark,
.bento--brand .bento__item--dark:hover {
    background: var(--bento-surface);
    color: var(--text-inverse);
    border-color: rgba(231, 199, 101, 0.34);
}

.bento--brand .bento__item--dark::before {
    background:
        radial-gradient(115% 90% at 0% 0%, rgba(231, 199, 101, 0.28) 0%, transparent 58%),
        linear-gradient(160deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.02) 46%, rgba(255, 255, 255, 0) 100%);
    opacity: 1;
}

.bento--brand .bento__item--dark .icon-bubble {
    --bubble-bg: rgba(231, 199, 101, 0.92);
    --bubble-fg: var(--brand-900);
    border-color: rgba(231, 199, 101, 0.95);
    box-shadow: 0 12px 26px -12px rgba(201, 162, 39, 0.9);
}

.bento--brand .bento__item--dark .icon-bubble i {
    color: var(--brand-900);
}

.bento--brand .bento__item--dark:hover .icon-bubble {
    background: var(--bento-gold);
    border-color: #fff;
}

/* ----------------------------------------------------------- Flagship (wide) */

.bento--brand .bento__item--wide {
    padding: clamp(1.7rem, 2.6vw, 2.4rem);
    background: var(--bento-surface-lead);
}

/* The flagship spans two rows, so its text is anchored to the bottom and the
   middle would otherwise sit flat. A third light source fills that space. */
.bento--brand .bento__item--wide::before {
    background:
        radial-gradient(34% 34% at 80% 56%, rgba(231, 199, 101, 0.18) 0%, transparent 70%),
        radial-gradient(115% 85% at 104% -6%, rgba(231, 199, 101, 0.24) 0%, transparent 60%),
        radial-gradient(95% 75% at -10% 106%, rgba(28, 99, 155, 0.5) 0%, transparent 62%);
}

.bento--brand .bento__item--wide .icon-bubble {
    width: 4rem;
    height: 4rem;
    font-size: 1.95rem;
    border-radius: var(--r-md);
}

.bento--brand .bento__item--wide h3 {
    margin-top: auto;
    font-size: clamp(1.3rem, 2vw, 1.75rem);
    line-height: 1.18;
    letter-spacing: -0.015em;
}

.bento--brand .bento__item--wide h3::before {
    content: '';
    display: block;
    width: 2.75rem;
    height: 2px;
    margin-bottom: 0.9rem;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--bento-gold), rgba(231, 199, 101, 0));
}

.bento--brand .bento__item--wide p {
    max-width: 40ch;
    font-size: clamp(0.95rem, 1.05vw, 1.02rem);
}

/* ------------------------------------------------------------------ Media */

/* The flagship absorbs the slack its own h3 { margin-top: auto } used to leave
   flat, so the photo fills that band instead of the gap sitting empty. The
   aspect ratio keeps the frame honest on narrow screens, where the card is a
   single column and there is no slack to grow into. */
.bento--brand .bento__item--wide .bento__media {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    aspect-ratio: 700 / 587;
    margin-bottom: 0.35rem;
    border: 1px solid rgba(231, 199, 101, 0.28);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--brand-900);
    box-shadow: 0 18px 38px -26px rgba(4, 26, 47, 0.9);
}

.bento--brand .bento__item--wide .bento__media picture {
    display: block;
    height: 100%;
}

.bento--brand .bento__item--wide .bento__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Nudge up-left: the light in the frame sits there, so the focal area
       survives the centre crop the fixed ratio imposes. */
    object-position: 42% 38%;
    transition: transform var(--t-slow) var(--ease);
}

.bento--brand .bento__item--wide:hover .bento__media img {
    transform: scale(1.04);
}

/* The photo now occupies the band the auto margin used to reserve, so the
   headline sits directly under it. Scoped to .bento--brand, which is the
   homepage only, so the plain .bento__item--wide in app.css is untouched.
   Deliberately avoids :has() so older engines still get the right spacing. */
.bento--brand .bento__item--wide h3 {
    margin-top: 0;
}

@media (max-width: 48rem) {

    .bento--brand .bento__item--wide .bento__media {
        flex: 0 0 auto;
        aspect-ratio: 16 / 10;
    }
}

@media (prefers-reduced-motion: reduce) {

    .bento--brand .bento__item--wide .bento__media img,
    .bento--brand .bento__item--wide:hover .bento__media img {
        transition: none;
        transform: none;
    }
}

/* ------------------------------------------------------------------- Layout */

@media (min-width: 48rem) {
    .bento--brand {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bento--brand .bento__item--wide,
    .bento--brand .bento__item:last-child {
        grid-column: 1 / -1;
    }
}

@media (min-width: 64rem) {
    .bento--brand {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .bento--brand .bento__item {
        grid-column: span 2;
    }

    .bento--brand .bento__item--wide {
        grid-column: 1 / span 3;
        grid-row: 1 / span 2;
    }

    .bento--brand .bento__item:last-child {
        grid-column: span 2;
    }

    .bento--brand .bento__item:nth-child(2) {
        grid-column: 4 / span 3;
        grid-row: 1;
    }

    .bento--brand .bento__item:nth-child(3) {
        grid-column: 4 / span 3;
        grid-row: 2;
    }
}

/* ==========================================================================
   Home - How it works (brand process)
   Scoped to .process--brand because the same .process__step markup is reused
   on the services index and service detail pages.
   ========================================================================== */

.process--brand {
    --process-gold: #E7C765;
    --process-surface: linear-gradient(160deg, var(--brand-800) 0%, var(--brand-900) 58%, #06192B 100%);
}

.process--brand .process__line {
    background-image: linear-gradient(90deg, rgba(231, 199, 101, 0.75) 55%, transparent 0);
    background-size: 12px 2px;
    height: 2px;
    opacity: 0.85;
}

.process--brand .process__step {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--process-surface);
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--text-inverse);
    box-shadow: 0 18px 40px -26px rgba(4, 26, 47, 0.9);
    transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}

.process--brand .process__step::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #C9A227, var(--process-gold) 50%, #C9A227);
    opacity: 0.9;
    z-index: 0;
}

.process--brand .process__step::after {
    content: '';
    position: absolute;
    top: -4rem;
    right: -3.5rem;
    width: 11rem;
    height: 11rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(231, 199, 101, 0.18) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.process--brand .process__step>* {
    position: relative;
    z-index: 1;
}

.process--brand .process__step:hover {
    transform: translateY(-6px);
    border-color: rgba(231, 199, 101, 0.55);
    box-shadow: 0 28px 54px -24px rgba(4, 26, 47, 0.95), 0 0 0 1px rgba(231, 199, 101, 0.22);
}

.process--brand .process__step h3 {
    color: #fff;
}

.process--brand .process__step p {
    color: var(--text-inverse-soft);
}

.process--brand .process__num {
    color: rgba(231, 199, 101, 0.16);
}

.process--brand .process__icon {
    background: rgba(231, 199, 101, 0.14);
    color: var(--process-gold);
    border: 1px solid rgba(231, 199, 101, 0.42);
    box-shadow: 0 10px 22px -12px rgba(201, 162, 39, 0.75);
}

.process--brand .process__icon i {
    color: var(--process-gold);
}

.process--brand .process__step:hover .process__icon {
    background: rgba(231, 199, 101, 0.24);
    border-color: rgba(231, 199, 101, 0.75);
}

/* ==========================================================================
   About
   ========================================================================== */

.about-story {
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

@media (min-width: 64rem) {
    .about-story {
        grid-template-columns: 1.05fr 0.95fr;
    }
}

.about-collage {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.85rem, 1.8vw, 1.25rem);
}

.about-collage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--r-lg);
    box-shadow: var(--sh-md);
}

.about-collage__a {
    border-radius: var(--r-lg);
    overflow: hidden;
}

.about-collage__a img {
    aspect-ratio: 3 / 4;
}

.about-collage__b {
    align-self: end;
    border-radius: var(--r-lg);
    overflow: hidden;
}

.about-collage__b img {
    aspect-ratio: 4 / 3;
}

.about-collage__badge {
    position: absolute;
    left: 50%;
    bottom: -1.1rem;
    translate: -50% 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 1.1rem;
    border-radius: var(--r-md);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--sh-lg);
    color: var(--accent-500);
    white-space: nowrap;
}

.about-collage__badge span {
    display: grid;
    gap: 0.1rem;
    font-size: var(--fs-xs);
    color: var(--text-soft);
}

.about-collage__badge b {
    font-size: 1.15rem;
    color: var(--brand-700);
}

/* Purpose cards -------------------------------------------------------- */

.purpose-grid {
    --purpose-gold: #E7C765;
    /* Deliberately deeper than --grad-brand. That gradient lightens to
       #1B639B, where --text-inverse-soft only reaches 3.92:1 and fails WCAG AA
       for body copy. Keeping the lightest stop at #0F4C81 restores 5:1+. */
    --purpose-surface-mission: linear-gradient(150deg, #0F4C81 0%, #0C3A63 50%, #092845 100%);

    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
    margin-top: clamp(2rem, 4vw, 3rem);
    grid-template-columns: minmax(0, 1fr);
}

.purpose-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: clamp(1.6rem, 2.6vw, 2.15rem);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}

.purpose-card>* {
    position: relative;
    z-index: 1;
}

.purpose-card p {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.65;
}

/* Soft key light so the flat brand gradients gain depth. */
.purpose-card__glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(58% 54% at 88% -10%, rgba(231, 199, 101, 0.24) 0%, transparent 62%);
}

.purpose-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 26px 52px -26px rgba(4, 26, 47, 0.9);
}

/* Vision and mission read as one pair: two navy panels carrying the same
   gold accent language, with vision deeper and mission lighter. */
.purpose-card--vision,
.purpose-card--mission {
    color: var(--text-inverse);
    border-color: transparent;
    box-shadow: var(--sh-brand);
}

.purpose-card--vision {
    background: var(--grad-dark);
}

.purpose-card--mission {
    background: var(--purpose-surface-mission);
}

/* Gold hairline along the top edge, matching the homepage bento. */
.purpose-card--vision::after,
.purpose-card--mission::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    width: auto;
    height: 1px;
    border-radius: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(231, 199, 101, 0.75) 26%, rgba(255, 255, 255, 0.5) 50%, rgba(231, 199, 101, 0.75) 74%, transparent 100%);
    opacity: 0.8;
    pointer-events: none;
    z-index: 2;
}

.purpose-card--vision .purpose-card__glow {
    background: radial-gradient(62% 58% at 84% -12%, rgba(231, 199, 101, 0.26) 0%, transparent 64%);
}

.purpose-card--mission .purpose-card__glow {
    background: radial-gradient(70% 64% at 12% 108%, rgba(4, 26, 47, 0.4) 0%, transparent 66%);
}

.purpose-card--vision h3,
.purpose-card--mission h3 {
    color: #fff;
    font-size: clamp(1.15rem, 1.5vw, 1.32rem);
}

/* The mission paragraph used to carry an inline color:var(--text-soft),
   which put dark slate text on a dark blue gradient at 1.15:1 contrast.
   Colour now lives here only. */
.purpose-card--vision p,
.purpose-card--mission p {
    color: var(--text-inverse-soft);
    font-size: clamp(0.95rem, 1.05vw, 1.02rem);
    line-height: 1.68;
    max-width: 46ch;
}

.purpose-card--vision h3::before,
.purpose-card--mission h3::before {
    content: '';
    display: block;
    width: 2.25rem;
    height: 2px;
    margin-bottom: 0.85rem;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--purpose-gold), rgba(231, 199, 101, 0));
}

/* Emblem ----------------------------------------------------------------
   A concentric gold medallion rather than a plain icon bubble, plus a large
   low-opacity glyph that gives each panel a printed texture. Both decorative
   and aria-hidden, so the heading carries the meaning. */

.purpose-card__mark {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    width: 5.25rem;
    height: 5.25rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 26%, rgba(231, 199, 101, 0.34) 0%, rgba(231, 199, 101, 0.1) 54%, rgba(231, 199, 101, 0.02) 100%);
    border: 1px solid rgba(231, 199, 101, 0.45);
    box-shadow: 0 16px 36px -18px rgba(201, 162, 39, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.24);
    color: var(--purpose-gold);
    font-size: 2.4rem;
    transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.purpose-card__mark::before,
.purpose-card__mark::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
}

.purpose-card__mark::before {
    inset: -0.5rem;
    border: 1px solid rgba(231, 199, 101, 0.26);
}

.purpose-card__mark::after {
    inset: -1rem;
    border: 1px dashed rgba(231, 199, 101, 0.18);
}

.purpose-card__mark i {
    color: var(--purpose-gold);
}

.purpose-card__ghost {
    position: absolute;
    right: -1.75rem;
    bottom: -2.75rem;
    z-index: 0;
    font-size: 11.5rem;
    line-height: 0.8;
    color: rgba(231, 199, 101, 0.075);
    pointer-events: none;
    transform: rotate(-14deg);
}

.purpose-card:hover .purpose-card__mark {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 20px 44px -18px rgba(201, 162, 39, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Mission carries the filled gold medallion so the two navy panels read as a
   matched pair with a clear focal point, not two near-identical boxes. */
.purpose-card--mission .purpose-card__mark {
    background: linear-gradient(150deg, #F0D98A 0%, var(--purpose-gold) 55%, #C9A227 100%);
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 18px 40px -18px rgba(201, 162, 39, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.55);
    color: var(--brand-900);
}

.purpose-card--mission .purpose-card__mark i {
    color: var(--brand-900);
}

.purpose-card--mission:hover .purpose-card__mark {
    box-shadow: 0 22px 48px -18px rgba(201, 162, 39, 1), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* Values sits on white, so the medallion carries the gold rings but takes a
   navy face and navy glyph to stay legible on the light surface. */
.purpose-card--values .purpose-card__mark {
    background: radial-gradient(circle at 32% 26%, rgba(231, 199, 101, 0.2) 0%, rgba(231, 199, 101, 0.07) 54%, rgba(231, 199, 101, 0.02) 100%);
    border-color: rgba(201, 162, 39, 0.42);
    box-shadow: 0 16px 36px -20px rgba(4, 26, 47, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    color: var(--brand-700);
}

.purpose-card--values .purpose-card__mark i {
    color: var(--brand-700);
}

.purpose-card--values .purpose-card__ghost {
    color: rgba(13, 59, 102, 0.055);
}

/* Values band ---------------------------------------------------------- */

.purpose-card--values {
    grid-column: 1 / -1;
}

.purpose-card--values h3 {
    color: var(--brand-900);
    font-size: clamp(1.1rem, 1.4vw, 1.28rem);
}

.purpose-card--values p {
    color: var(--text-soft);
    max-width: 62ch;
}

.purpose-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
}

.purpose-card__values {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.purpose-card--values .pill {
    padding: 0.42rem 0.9rem;
    font-size: var(--fs-xs);
    letter-spacing: 0.01em;
}

@media (min-width: 48rem) {
    .purpose-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* On wide screens the values band sets its text beside the pills rather than
   stacking them, so the row does not turn into a tall empty column. */
@media (min-width: 64rem) {
    .purpose-card--values {
        flex-direction: row;
        align-items: center;
        gap: clamp(1.75rem, 3.5vw, 3.5rem);
    }

    .purpose-card__body {
        flex: 1 1 auto;
        min-width: 0;
    }

    .purpose-card__values {
        flex: 0 1 auto;
        justify-content: flex-end;
        max-width: 34rem;
    }
}

/* Timeline ------------------------------------------------------------ */

.timeline {
    position: relative;
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.25rem);
    padding-left: 0.5rem;
}

.timeline::before {
    content: '';
    position: absolute;
    top: 0.6rem;
    bottom: 0.6rem;
    left: 1.35rem;
    width: 2px;
    background: linear-gradient(180deg, var(--brand-500), var(--accent-500));
    opacity: 0.35;
}

.timeline__item {
    position: relative;
    display: grid;
    gap: 0.3rem;
    padding-left: 3.5rem;
}

.timeline__dot {
    position: absolute;
    left: 0;
    top: 0.1rem;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--brand-500);
    color: var(--brand-700);
    font-size: 0.85rem;
    font-weight: 800;
    box-shadow: var(--sh-sm);
}

.timeline__year {
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-600);
}

.timeline__title {
    font-size: var(--fs-h4);
}

.timeline__text {
    font-size: var(--fs-sm);
    color: var(--text-soft);
    line-height: 1.6;
}

/* ==========================================================================
   Services index
   ========================================================================== */

.group-panel {
    display: grid;
    gap: clamp(1.25rem, 2.6vw, 2rem);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-sm);
}

@media (min-width: 64rem) {
    .group-panel {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
        align-items: center;
        gap: clamp(2rem, 4vw, 3.5rem);
    }
}

.group-panel--alt {
    background: var(--grad-dark);
    border-color: transparent;
    color: var(--text-inverse);
    box-shadow: var(--sh-brand);
}

.group-panel--alt .group-panel__title {
    color: #fff;
}

.group-panel--alt .group-panel__text {
    color: var(--text-inverse-soft);
}

.group-panel--alt .pill--brand {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.24);
    color: #fff;
}

.group-panel__head {
    display: grid;
    gap: 0.85rem;
    align-content: start;
    justify-items: start;
}

.group-panel__title {
    margin: 0;
    font-size: var(--fs-h3);
}

.group-panel__text {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: var(--text-soft);
}

.group-list {
    display: grid;
    gap: 0.6rem;
}

.group-list>a {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 1rem;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: var(--bg-soft);
    transition: transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.group-list>a:hover {
    transform: translateX(4px);
    border-color: var(--brand-300);
    box-shadow: var(--sh-sm);
}

.group-panel--alt .group-list>a {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
}

.group-panel--alt .group-list>a:hover {
    border-color: rgba(140, 192, 228, 0.55);
}

.group-list>a>span {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.group-list__label {
    font-weight: 700;
    font-size: var(--fs-sm);
}

.group-panel--alt .group-list__label {
    color: #fff;
}

/* The group cards keep their own light surface, so they must not inherit the
   inverse text colour of whichever dark panel wraps them. Without this the
   label renders near-white on the light card and disappears. */
.includes-panel .group-list__label {
    color: var(--text);
}

.group-list__note {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.group-panel--alt .group-list__note {
    color: var(--text-inverse-soft);
}

.group-list__arrow {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--accent-500);
    transition: transform var(--t-base) var(--ease);
}

.group-list>a:hover .group-list__arrow {
    transform: translateX(4px);
}

/* ==========================================================================
   Service detail
   ========================================================================== */

/* Gallery: only rendered when a service carries images in services.json.
   Scoped to .gal so the shared .section and .container rules are untouched. */
.gal {
    display: grid;
    gap: clamp(1rem, 1.8vw, 1.5rem);
    margin-top: clamp(2rem, 4vw, 3rem);
    grid-template-columns: 1fr;
}

.gal__item {
    margin: 0;
    display: grid;
    gap: 0.9rem;
    align-content: start;
}

.gal__frame {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--bg-tint);
    box-shadow: var(--sh-md);
    /* Taller than the 768x429 source on purpose: 4:3 gives the photos enough
       vertical presence to read as a gallery rather than a thumbnail strip.
       object-fit stays cover, so the extra height crops the sides, not the
       subject. */
    aspect-ratio: 4 / 3;
}

.gal__frame picture {
    display: block;
    height: 100%;
}

.gal__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow) var(--ease);
}

.gal__item:hover .gal__img {
    transform: scale(1.045);
}

/* Corner tag. Kept out of the way of the photo's own focal area. */
.gal__badge {
    position: absolute;
    left: 0.9rem;
    bottom: 0.9rem;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    font-size: 1.1rem;
    color: #fff;
    background: rgba(4, 26, 47, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}

.gal__item:hover .gal__badge {
    background: var(--accent-500, var(--brand-500));
    transform: translateY(-2px);
}

.gal__caption h3 {
    font-size: 1.06rem;
    line-height: 1.3;
}

.gal__caption p {
    margin-top: 0.35rem;
    font-size: 0.92rem;
    color: var(--text-soft);
}

/* Phones: one column, 4:3 from the base rule above. */

/* Tablets: a wide lead image over two supporting images. Three equal columns
   at this width squeeze each frame to ~240px, which reads as thumbnails, so the
   lead card takes the full width instead and the remaining two split the row. */
@media (min-width: 40rem) {
    .gal {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gal__item:first-child {
        grid-column: 1 / -1;
    }

    /* 16/9 is almost exactly the source ratio (1.795), so the lead image shows
       in full instead of being cropped to the sides. */
    .gal__item:first-child .gal__frame {
        aspect-ratio: 16 / 9;
    }

    .gal__item:first-child .gal__caption {
        max-width: 46rem;
    }
}

/* Desktop: an even row of three, all sharing the same 4:3 frame. */
@media (min-width: 62rem) {
    .gal {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .gal__item:first-child {
        grid-column: auto;
    }

    .gal__item:first-child .gal__frame {
        aspect-ratio: 4 / 3;
    }

    .gal__item:first-child .gal__caption {
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .gal__img,
    .gal__item:hover .gal__img,
    .gal__badge,
    .gal__item:hover .gal__badge {
        transition: none;
        transform: none;
    }
}

.svc-hero__aside {
    display: grid;
    gap: 1rem;
    align-content: start;
}

.svc-media {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-md);
}

.svc-media img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.svc-media__tag {
    position: absolute;
    left: 0.9rem;
    top: 0.9rem;
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.8rem;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.92);
    color: var(--brand-700);
    font-size: var(--fs-xs);
    font-weight: 800;
    box-shadow: var(--sh-sm);
}

.svc-facts {
    display: grid;
    gap: 0.15rem;
    padding: 1.1rem 1.25rem;
    border-radius: var(--r-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--sh-sm);
}

.svc-facts__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.5rem;
    border-bottom: 1px dashed var(--border);
}

.svc-facts__row:last-child {
    border-bottom: 0;
}

.svc-facts__key {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.svc-facts__val {
    font-weight: 700;
    text-align: right;
    color: var(--brand-700);
}

.svc-split {
    display: grid;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
}

@media (min-width: 64rem) {
    .svc-split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    }
}

.svc-feature {
    display: grid;
    gap: 0.5rem;
    align-content: start;
    padding: 1.15rem 1.25rem;
    border-radius: var(--r-md);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--sh-xs);
    transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.svc-feature:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-md);
}

.svc-feature h3 {
    margin: 0;
    font-size: var(--fs-h4);
}

.svc-feature p {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--text-soft);
    line-height: 1.6;
}

.includes-panel {
    display: grid;
    gap: 1rem;
    padding: clamp(1.5rem, 2.8vw, 2.2rem);
    border-radius: var(--r-xl);
    background: var(--grad-dark);
    border: 1px solid transparent;
    color: var(--text-inverse);
    box-shadow: var(--sh-brand);
}

.includes-panel__head {
    display: grid;
    gap: 0.85rem;
    justify-items: start;
}

.includes-panel h3,
.includes-panel h4 {
    color: #fff;
}

.includes-panel p {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--text-inverse-soft);
}

.includes-panel .check-list li {
    color: var(--text-inverse);
}

.includes-panel .check-list i {
    color: var(--accent-400);
}

.includes-panel .divider-soft {
    border-color: rgba(255, 255, 255, 0.16);
}

.includes-panel .btn--ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.34);
}

.includes-panel .btn--ghost:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* Cloud software showcase --------------------------------------------- */

.sol-grid {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
    margin-top: clamp(2rem, 4vw, 3rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    align-items: stretch;
}

.sol-card {
    position: relative;
    display: grid;
    gap: 1rem;
    align-content: start;
    padding: clamp(1.4rem, 2.4vw, 1.9rem);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.sol-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    background: var(--svc-accent, var(--brand-500));
    opacity: 0;
    transition: opacity var(--t-base) var(--ease);
}

.sol-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--sh-md);
}

.sol-card:hover::before {
    opacity: 1;
}

.sol-card__media {
    position: relative;
    margin: -.4rem 0 .2rem;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--bg-tint);
    aspect-ratio: 640 / 420;
}

.sol-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow) var(--ease);
}

.sol-card:hover .sol-card__img {
    transform: scale(1.035);
}

@media (prefers-reduced-motion: reduce) {

    .sol-card__img,
    .sol-card:hover .sol-card__img {
        transition: none;
    }

    .sol-card:hover .sol-card__img {
        transform: none;
    }
}

.sol-card__head {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
}

.sol-card__head>div {
    display: grid;
    gap: 0.5rem;
    justify-items: start;
    padding-top: 0.15rem;
}

.sol-card__title {
    margin: 0;
}

.sol-card__text {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--text-soft);
    line-height: 1.6;
}

.sol-card__points {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    padding: 0.9rem 0 0;
    border-top: 1px solid var(--border);
    list-style: none;
}

.sol-card__points li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: var(--fs-sm);
    color: var(--text-soft);
    line-height: 1.5;
}

.sol-card__points i {
    flex: 0 0 auto;
    margin-top: 0.15rem;
    color: var(--accent-500);
}

.sol-card__link {
    margin-top: auto;
    padding-top: 0.35rem;
    font-size: var(--fs-sm);
    font-weight: 700;
}

.sol-platform {
    display: grid;
    gap: 1.1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.sol-platform__item {
    display: grid;
    gap: 0.7rem;
    align-content: start;
}

.sol-platform__icon {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--r-sm);
    background: var(--surface-dark-glass);
    border: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 1.2rem;
    color: var(--accent-400);
}

.sol-platform__item h4 {
    margin: 0;
}

.sol-platform__item p {
    margin: 0.4rem 0 0;
    font-size: var(--fs-sm);
    line-height: 1.55;
}

/* Pricing ------------------------------------------------------------- */

.price-grid {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
    margin-top: clamp(2rem, 4vw, 3rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
    align-items: stretch;
}

.price-card {
    position: relative;
    display: grid;
    gap: 0.55rem;
    align-content: start;
    padding: clamp(1.4rem, 2.4vw, 1.9rem);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.price-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--sh-md);
}

.price-card--featured {
    background: var(--grad-brand);
    border-color: transparent;
    color: var(--text-inverse);
    box-shadow: var(--sh-brand);
}

.price-card--featured .price-card__name,
.price-card--featured .price-card__price {
    color: #fff;
}

.price-card--featured .price-card__duration,
.price-card--featured .price-card__includes {
    color: var(--text-inverse-soft);
}

.price-card__badge {
    position: absolute;
    top: -0.7rem;
    left: clamp(1.4rem, 2.4vw, 1.9rem);
    padding: 0.25rem 0.7rem;
    border-radius: var(--r-pill);
    background: var(--accent-500);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: var(--sh-accent);
}

.price-card__name {
    margin: 0;
    font-size: var(--fs-h4);
}

.price-card__duration {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--text-muted);
}

.price-card__price {
    margin: 0.35rem 0 0;
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--brand-700);
}

.price-card__price small {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
}

.price-card__includes {
    margin: 0 0 0.6rem;
    font-size: var(--fs-sm);
    color: var(--text-soft);
    line-height: 1.55;
}

/* ==========================================================================
   Contact
   ========================================================================== */

.contact-layout {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
}

@media (min-width: 64rem) {
    .contact-layout {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    }
}

.info-card,
.form-panel {
    display: grid;
    gap: 1.1rem;
    align-content: start;
}

.info-card>div:first-child,
.form-panel>div:first-child {
    display: grid;
    gap: 0.5rem;
}

.info-row {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding-block: 0.85rem;
    border-bottom: 1px dashed var(--border);
}

.info-row:last-of-type {
    border-bottom: 0;
}

.info-row__body {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.info-row__label {
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.info-row__value {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text);
    line-height: 1.55;
}

.info-row__value a {
    transition: color var(--t-fast) var(--ease);
}

.info-row__value a:hover {
    color: var(--accent-600);
}

.map-card {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--sh-sm);
}

.map-card iframe {
    display: block;
    width: 100%;
    height: clamp(15rem, 32vw, 19rem);
    border: 0;
}

.map-card__overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    gap: 0.4rem;
    background: rgba(4, 26, 47, 0.72);
    color: #fff;
    font-size: 1.6rem;
    pointer-events: none;
}

.form-panel {
    padding: clamp(1.5rem, 3vw, 2.4rem);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-md);
}

/* ==========================================================================
   FAQs
   ========================================================================== */

.faq-side {
    display: grid;
    gap: 1.25rem;
    align-content: start;
}

.faq-group {
    display: grid;
    gap: 0.85rem;
}

.faq-group>h2 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
}

.faq-group>h2 i {
    color: var(--accent-500);
}

.accordion__heading {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

/* ==========================================================================
   Testimonials
   ========================================================================== */

.testimonial-grid {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}

.testimonial-grid--wall {
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.testimonial-slot {
    display: grid;
}

.testimonial-slot[hidden] {
    display: none;
}

.rating-summary__value {
    font-size: clamp(2.6rem, 6vw, 3.6rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--brand-700);
}

/* ==========================================================================
   Legal pages
   ========================================================================== */

.legal-layout {
    display: grid;
    gap: clamp(1.75rem, 3.5vw, 3rem);
    align-items: start;
}

@media (min-width: 64rem) {
    .legal-layout {
        grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    }
}

.legal-toc {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
    display: grid;
    gap: 0.9rem;
    padding: 1.35rem 1.5rem;
    border-radius: var(--r-lg);
    background: var(--bg-soft);
    border: 1px solid var(--border);
}

.legal-toc h2 {
    margin: 0;
    font-size: var(--fs-h4);
}

.legal-toc nav {
    display: grid;
    gap: 0.4rem;
}

.legal-toc nav a {
    padding: 0.35rem 0.6rem;
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-soft);
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.legal-toc nav a:hover {
    background: var(--surface);
    color: var(--brand-700);
}

.legal-updated {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.legal-body {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.25rem);
}

.legal-body section {
    display: grid;
    gap: 0.75rem;
    scroll-margin-top: calc(var(--header-h) + 2rem);
}

.legal-body h2 {
    margin: 0;
    font-size: var(--fs-h3);
}

.legal-body p {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.75;
}

.legal-body ul {
    margin: 0;
    padding-left: 1.15rem;
    display: grid;
    gap: 0.5rem;
    color: var(--text-soft);
    line-height: 1.7;
}