/* ==========================================================================
   CH.ALMAS.IMB Diagnostics Centre - public website theme
   Layered on top of Bootstrap 5.3. Brand colours follow the approved Almas
   palette (deep maroon with a warm gold accent) shown in the reference
   material; the layout system is specific to this diagnostics centre.
   ========================================================================== */

/* --------------------------------------------------------------- tokens */
:root {
    /* Brand - approved maroon */
    --brand-900: #5d0f33;
    --brand-800: #7a1443;
    --brand-700: #9c1c57;
    --brand-600: #b32768;
    --brand-500: #c9558c;
    --brand-100: #f7e3ee;
    --brand-50:  #fdf5f9;

    /* Accent - warm gold from the logo lockup */
    --gold-700: #a87c34;
    --gold-600: #c79a4b;
    --gold-500: #e3b872;
    --gold-200: #f6e4c4;
    --gold-50:  #fdf7ec;

    /* Supporting clinical teal, used sparingly for informational accents */
    --teal-600: #0f7b7b;
    --teal-50:  #eaf6f6;

    /* Neutrals */
    --ink-900: #13202f;
    --ink-800: #22344a;
    --ink-700: #33465e;
    --ink-600: #4c5f78;
    --ink-500: #63768e;
    --ink-400: #8a9aae;
    --ink-300: #b6c2d1;
    --line:     #e4eaf1;
    --line-2:   #eff3f8;
    --surface:  #ffffff;
    --surface-2:#f7f9fc;
    --surface-3:#eef3f9;

    /* Shape */
    --r-xs: 6px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-pill: 999px;

    /* Motion */
    /* Content images rest slightly zoomed in and settle back to their true
       framing on hover, so the movement resolves instead of escalating. The
       resting scale is 1 by default and only lifts where a real pointer can
       undo it - on touch the image would otherwise stay permanently cropped
       (raised below, and put back to 1 under reduced motion, site.css:1378). */
    --img-settle: 1;
    --img-settle-ease: cubic-bezier(.22, 1, .36, 1);
    --img-settle-time: .55s;

    /* Elevation */
    --shadow-xs: 0 1px 2px rgba(19, 32, 47, .06);
    --shadow-sm: 0 2px 8px rgba(19, 32, 47, .06);
    --shadow-md: 0 8px 24px rgba(19, 32, 47, .08);
    --shadow-lg: 0 18px 44px rgba(19, 32, 47, .12);
    --shadow-brand: 0 12px 30px rgba(156, 28, 87, .22);

    /* Type */
    --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Poppins", "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

    /* Layout */
    /* The header scales as a unit: bar height, logo and label sizes move
       together, so a breakpoint only has to restate these four. */
    --header-h: 108px;
    --brand-mark-size: 62px;
    --brand-name-size: 1.4rem;
    --nav-link-size: 1.35rem;
    --section-y: clamp(3.25rem, 6vw, 6rem);

    /* Bootstrap overrides */
    --bs-primary: var(--brand-700);
    --bs-link-color: var(--brand-700);
    --bs-link-hover-color: var(--brand-800);
    --bs-body-color: var(--ink-700);
    --bs-body-font-family: var(--font-sans);
    --bs-border-color: var(--line);
}

@media (hover: hover) and (pointer: fine) {
    :root { --img-settle: 1.07; }
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
    font-family: var(--font-sans);
    color: var(--ink-700);
    background: var(--surface);
    font-size: 1rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .display-title {
    font-family: var(--font-display);
    color: var(--ink-900);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -.015em;
}

h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h2 { font-size: clamp(1.65rem, 3.1vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
h4 { font-size: 1.15rem; }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

a { text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--brand-800); }

img { max-width: 100%; height: auto; }

/* Baseline size for every inline icon. Component rules override this. */
.svg-icon { width: 20px; height: 20px; flex: none; vertical-align: -.18em; }

::selection { background: var(--brand-100); color: var(--brand-900); }

/* Accessible focus ring (SRS 21) */
:focus-visible {
    outline: 3px solid var(--brand-500);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    background: var(--brand-700);
    color: #fff;
    padding: .75rem 1.25rem;
    border-radius: 0 0 var(--r-sm) 0;
    font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }

/* Padding matches half of Bootstrap's largest gutter (g-5 = 3rem) so a .row
   placed directly inside never pushes past the viewport on small screens. */
.container-site { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 1.5rem; }

/* ------------------------------------------------------- content markers */
.content-required {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .1rem .55rem;
    border: 1px dashed var(--gold-600);
    border-radius: var(--r-xs);
    background: var(--gold-50);
    color: var(--gold-700);
    font-size: .78em;
    font-weight: 600;
    letter-spacing: .02em;
    max-width: 100%;
}
.content-required__label { font-weight: 500; opacity: .85; }

/* ------------------------------------------------------------- top bar */
.topbar {
    background: var(--brand-900);
    color: rgba(255, 255, 255, .82);
    font-size: .85rem;
}
.topbar a { color: rgba(255, 255, 255, .82); }
.topbar a:hover { color: #fff; }
.topbar__inner {
    display: flex;
    align-items: center;
    /* Quick links are the only group left in the bar; keep them on the
       right, where space-between used to put them. */
    justify-content: flex-end;
    gap: 1rem;
    min-height: 42px;
    flex-wrap: wrap;
}
.topbar__list { display: flex; align-items: center; gap: 1.25rem; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.topbar__item { display: inline-flex; align-items: center; gap: .4rem; }
.topbar__item svg { width: 15px; height: 15px; opacity: .8; flex: none; }

/* -------------------------------------------------------------- header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--brand-700);
    background-image: linear-gradient(100deg, var(--brand-800) 0%, var(--brand-700) 45%, var(--brand-600) 100%);
    box-shadow: 0 2px 16px rgba(93, 15, 51, .25);
}
.site-header__inner {
    /* Held in variables so the rule that separates the call-to-action from the
       menu can be centred in the very gap that separates them. */
    --header-gap: clamp(1rem, 2.4vw, 2.25rem);
    --nav-rule: rgba(255, 255, 255, .22);
    --nav-rule-h: 34px;

    display: flex;
    align-items: center;
    gap: var(--header-gap);
    min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; gap: .9rem; color: #fff; }
.brand:hover { color: #fff; }
.brand__mark {
    width: var(--brand-mark-size); height: var(--brand-mark-size);
    display: grid; place-items: center;
    border-radius: 14px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    flex: none;
}
.brand__mark svg { width: 60%; height: 60%; }
.brand__mark img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.12; }
.brand__name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--brand-name-size);
    letter-spacing: .06em;
    color: var(--gold-200);
    text-transform: uppercase;
}
.brand__sub {
    /* Tied to the name so the two lines keep their ratio as the bar resizes. */
    font-size: calc(var(--brand-name-size) * .58);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
    font-weight: 500;
}

.header-actions { display: flex; align-items: center; gap: .5rem; position: relative; }

.header-cta {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .5rem .45rem .5rem;
    border-radius: var(--r-pill);
    color: #fff;
}
.header-cta:hover { color: #fff; }
.header-cta__icon {
    width: 42px; height: 42px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--gold-200);
    color: var(--brand-800);
    flex: none;
}
.header-cta__icon svg { width: 20px; height: 20px; }
.header-cta__label { display: flex; flex-direction: column; line-height: 1.2; }
.header-cta__label small { font-size: .85rem; opacity: .78; letter-spacing: .04em; white-space: nowrap; }
.header-cta__label strong { font-size: 1.02rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }

.header-toggle {
    display: none;
    width: 46px; height: 46px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .1);
    color: #fff;
    align-items: center;
    justify-content: center;
}
.header-toggle svg { width: 22px; height: 22px; }

/* ---------------------------------------------------------- navigation */
/* margin-left:auto absorbs the row's free space, so the menu sits on the right
   next to the contact call-to-action rather than floating mid-row. */
/* No flex gap: the links' own horizontal padding provides all the separation,
   so their hit areas meet with no dead strip between them. Vertical padding
   sets the hit height and stays put. */
.main-nav { display: flex; align-items: center; gap: 0; margin-left: auto; }
.main-nav__link {
    display: inline-block;
    padding: .6rem .8rem;
    color: rgba(255, 255, 255, .92);
    font-weight: 600;
    font-size: var(--nav-link-size);
    letter-spacing: .005em;
    white-space: nowrap;
}

/* The current page gets no marker of its own. Listed before the hover rule so
   that hovering the current item still brightens it - both selectors carry the
   same specificity, so source order decides. */
.main-nav__link.active { color: rgba(255, 255, 255, .92); background: none; font-weight: 600; }

/* Hover and press just brighten the label - no pill, no underline. The global
   `a { transition: color }` eases it. Stated explicitly rather than left to the
   base rule because `a:hover` (site.css:108) would otherwise tint these links
   maroon against the maroon header. */
.main-nav__link:hover,
.main-nav__link:active { color: #fff; }

/* Keyboard only - :focus-visible does not fire on mouse clicks. */
.main-nav__link:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }

/* A hairline between neighbouring items. Hung off the nav's direct children
   rather than off .main-nav__link, because an item with a submenu is wrapped in
   .nav-dropdown - keying on the child treats both kinds alike. */
.main-nav > * { position: relative; }
.main-nav > * + *::before,
.header-actions::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: var(--nav-rule-h);
    background: var(--nav-rule);
}
.main-nav > * + *::before { left: 0; }

/* The rule before the phone block; the negative offset centres it in the row
   gap instead of hugging the icon. */
.header-actions::before { left: calc(var(--header-gap) / -2); }

.nav-dropdown { position: relative; }
.nav-dropdown__menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 240px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    padding: .4rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
    z-index: 40;
}
.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown__item {
    display: block;
    padding: .55rem .75rem;
    border-radius: var(--r-sm);
    color: var(--ink-700);
    font-size: .93rem;
}
.nav-dropdown__item:hover { background: var(--brand-50); color: var(--brand-800); }

/* Mobile drawer */
.nav-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(360px, 88vw);
    background: #fff;
    z-index: 1090;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
}
.nav-drawer.is-open { transform: translateX(0); }
.nav-drawer__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--brand-700);
    color: #fff;
}
.nav-drawer__close {
    width: 40px; height: 40px; border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .12);
    color: #fff; display: grid; place-items: center;
}
.nav-drawer__body { padding: .75rem; overflow-y: auto; flex: 1; }
.nav-drawer__link {
    display: block;
    padding: .8rem .9rem;
    border-radius: var(--r-sm);
    color: var(--ink-800);
    font-weight: 500;
    border-bottom: 1px solid var(--line-2);
}
.nav-drawer__link:hover, .nav-drawer__link.active { background: var(--brand-50); color: var(--brand-800); }
.nav-drawer__group {
    margin: 1.1rem 0 .35rem;
    padding: 0 .9rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-400);
}
.nav-drawer__foot { padding: 1rem 1.25rem; border-top: 1px solid var(--line); }

.nav-backdrop {
    position: fixed; inset: 0;
    background: rgba(19, 32, 47, .5);
    z-index: 1080;
    opacity: 0; visibility: hidden;
    transition: opacity .25s ease, visibility .25s;
}
.nav-backdrop.is-open { opacity: 1; visibility: visible; }

/* -------------------------------------------------------------- buttons */
/* Every button lifts on hover and presses back in on click. The colour change
   is quick, the movement is eased, and the two are listed separately rather
   than as `all` so a repaint-heavy property never gets animated by accident.
   The sweep properties below (background-position for the filled buttons,
   background-size for the ones that fill on hover) are transitioned here so
   each variant only has to state its own start and end values. */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    border-radius: var(--r-pill);
    padding: .7rem 1.5rem;
    letter-spacing: .01em;
    transition: transform .3s var(--img-settle-ease),
                box-shadow .3s ease,
                background-color .26s ease,
                border-color .26s ease,
                color .26s ease,
                background-position .75s ease,
                background-size .42s var(--img-settle-ease);
}
.btn:hover { transform: translateY(-2px); }
/* Snapping back on press has to be immediate to feel like a button, so the
   eased timing above is overridden for this state only. */
.btn:active { transform: translateY(0) scale(.98); transition-duration: .08s; }
.btn:focus-visible { outline: 3px solid var(--brand-500); outline-offset: 2px; }

/* Filled buttons carry a soft highlight band as a background image over their
   colour, parked off the right edge. Hover walks it across to the left, so the
   light travels over the button without covering the label - a pseudo element
   would have to sit above the background and would hide the text with it. */
.btn-brand {
    background-color: var(--brand-700);
    background-image: linear-gradient(112deg, transparent 30%, rgba(255, 255, 255, .26) 47%, transparent 64%);
    background-size: 260% 100%;
    background-position: 132% 0;
    border: 1px solid var(--brand-700);
    color: #fff;
    box-shadow: var(--shadow-brand);
}
.btn-brand:hover, .btn-brand:focus {
    background-color: var(--brand-800);
    background-position: -32% 0;
    border-color: var(--brand-800);
    color: #fff;
    box-shadow: 0 16px 34px rgba(156, 28, 87, .34);
}

/* Fills in from the leading edge, the width growing left to right. */
.btn-outline-brand {
    background-color: transparent;
    background-image: linear-gradient(90deg, var(--brand-700), var(--brand-800));
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 0 100%;
    border: 1.5px solid var(--brand-700);
    color: var(--brand-700);
}
.btn-outline-brand:hover, .btn-outline-brand:focus {
    background-size: 100% 100%;
    border-color: var(--brand-800);
    color: #fff;
    box-shadow: var(--shadow-brand);
}

.btn-gold {
    background-color: var(--gold-500);
    background-image: linear-gradient(112deg, transparent 30%, rgba(255, 255, 255, .45) 47%, transparent 64%);
    background-size: 260% 100%;
    background-position: 132% 0;
    border: 1px solid var(--gold-500);
    color: var(--brand-900);
    box-shadow: 0 8px 22px rgba(227, 184, 114, .32);
}
.btn-gold:hover, .btn-gold:focus {
    background-color: var(--gold-600);
    background-position: -32% 0;
    border-color: var(--gold-600);
    color: #fff;
    box-shadow: 0 16px 32px rgba(199, 154, 75, .44);
}

/* Sits on the hero, so it is glass at rest and fills to solid white on hover. */
.btn-ghost-light {
    background-color: rgba(255, 255, 255, .14);
    background-image: linear-gradient(90deg, #fff, #fff);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 0 100%;
    border: 1.5px solid rgba(255, 255, 255, .45);
    color: #fff;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.btn-ghost-light:hover, .btn-ghost-light:focus {
    background-size: 100% 100%;
    border-color: #fff;
    color: var(--brand-800);
    box-shadow: 0 14px 30px rgba(10, 16, 24, .3);
}

.btn-lg { padding: .9rem 1.9rem; font-size: 1.02rem; }
.btn-sm { padding: .45rem 1.05rem; font-size: .875rem; }

/* Controls that read as buttons without carrying .btn: the contact call to
   action and menu toggle in the header, the drawer's close button, the
   category tiles on the services index and Bootstrap's modal close in the
   gallery lightbox. They borrow the buttons' motion - eased lift, immediate
   press - so everything pressable on the site answers the same way. */
.header-cta,
.header-toggle,
.nav-drawer__close,
.category-tile,
#galleryLightbox .btn-close {
    transition: transform .3s var(--img-settle-ease),
                box-shadow .3s ease,
                background-color .26s ease,
                border-color .26s ease,
                color .26s ease,
                opacity .26s ease,
                background-size .42s var(--img-settle-ease);
}
.header-cta:hover,
.header-toggle:hover,
.nav-drawer__close:hover,
#galleryLightbox .btn-close:hover { transform: translateY(-2px); }

.header-cta:active,
.header-toggle:active,
.nav-drawer__close:active,
.category-tile:active,
#galleryLightbox .btn-close:active {
    transform: translateY(0) scale(.96);
    transition-duration: .08s;
}

/* The header sits on the brand bar, so its call to action fills with light
   rather than colour - swept in from the left like every other button. */
.header-cta {
    background-color: transparent;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .16));
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 0 100%;
}
.header-cta:hover,
.header-cta:focus-visible { background-size: 100% 100%; }
.header-cta__icon { transition: background .26s ease, transform .3s var(--img-settle-ease); }
.header-cta:hover .header-cta__icon { background: #fff; transform: scale(1.06); }

.header-toggle:hover,
.nav-drawer__close:hover {
    background: rgba(255, 255, 255, .22);
    border-color: rgba(255, 255, 255, .45);
}

#galleryLightbox .btn-close:hover { transform: translateY(-2px) rotate(90deg); opacity: 1; }

/* Arrow link, mirroring the "Read More" treatment in the reference design */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: var(--brand-700);
    font-weight: 600;
}
.link-arrow__icon {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--brand-700);
    color: #fff;
    display: grid; place-items: center;
    flex: none;
    transition: transform .3s var(--img-settle-ease), background .26s ease;
}
.link-arrow__icon svg { width: 14px; height: 14px; }
.link-arrow:hover { color: var(--brand-800); }
.link-arrow:hover .link-arrow__icon,
.link-arrow:focus-visible .link-arrow__icon { transform: translateX(4px); background: var(--brand-800); }
.link-arrow:active .link-arrow__icon { transform: translateX(1px) scale(.92); transition-duration: .08s; }

/* ------------------------------------------------------------- sections */
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.25rem, 4vw, 3.5rem); }
.section--cta { padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.section--muted { background: var(--surface-2); }
.section--tint { background: linear-gradient(180deg, var(--brand-50) 0%, #fff 100%); }

.eyebrow {
    display: inline-block;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-400);
    margin-bottom: .85rem;
}
.eyebrow--brand { color: var(--brand-600); }

/* Pill variant: the eyebrow reads as a small badge rather than a caption. Used
   where the heading block sits on a decorated background and needs a surface
   of its own to stay legible. */
.eyebrow--pill {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .42rem 1.05rem;
    border-radius: var(--r-pill);
    background: #fff;
    border: 1px solid var(--brand-100);
    box-shadow: var(--shadow-xs);
}
.eyebrow--pill::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--gold-500);
    flex: none;
}

.section-title { font-weight: 300; color: var(--ink-600); }
.section-title strong { font-weight: 600; color: var(--ink-900); display: block; }

/* Split heading block: large title on the left, body copy on the right,
   separated by a hairline - the pattern used in the reference layout. */
.split-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.split-head__body { position: relative; padding-left: clamp(1.5rem, 3vw, 3rem); }
.split-head__body::before {
    content: "";
    position: absolute;
    left: 0; top: .35rem; bottom: .35rem;
    width: 1px;
    background: var(--line);
}
.lead-copy { font-size: 1.06rem; color: var(--ink-600); }

.rule-gold { width: 62px; height: 3px; border-radius: 3px; background: var(--gold-500); margin-top: 1.1rem; }
.rule-gold--center { margin-inline: auto; }

/* ----------------------------------------------------------------- hero */
.hero {
    position: relative;
    background: linear-gradient(135deg, var(--brand-900) 0%, var(--brand-700) 52%, var(--brand-600) 100%);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 420px at 88% 12%, rgba(227, 184, 114, .22), transparent 62%),
        radial-gradient(700px 420px at 4% 96%, rgba(255, 255, 255, .12), transparent 60%);
    z-index: -1;
}
.hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: .3;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Same rule for the home banner: with an image uploaded the photo is the
   background, not a texture tinted by the brand gradient. */
.hero--image { background: var(--ink-900); }
.hero--image .hero__media { opacity: 1; }
.hero--image::before {
    background: linear-gradient(100deg,
        rgba(10, 16, 24, .76) 0%,
        rgba(10, 16, 24, .55) 46%,
        rgba(10, 16, 24, .25) 100%);
}
.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: center;
    padding-block: clamp(3.5rem, 8vw, 6.5rem);
}
.hero__eyebrow {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .4rem 1rem;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .24);
    font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    color: var(--gold-200);
    margin-bottom: 1.4rem;
}
.hero__title { color: #fff; font-weight: 600; margin-bottom: 1.1rem; text-wrap: balance; }
.hero__title .accent { color: var(--gold-500); }
.hero__text { color: rgba(255, 255, 255, .88); font-size: 1.08rem; max-width: 60ch; margin-bottom: 2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; }

/* Floating service icons.

   These replace the old boxed hero panel. Each one carries the same glass
   treatment the panel had, but on itself rather than on a wrapper, so the
   right-hand column is only as wide and tall as the icons themselves.

   Collapsed they are plain circles; on hover or keyboard focus the pill grows
   leftwards to reveal the category name. The name is always in the DOM, so
   screen readers and search engines see it either way.

   The <li> owns the drift animation and the <a> owns the hover growth, so the
   two never compete for `transform`. */
.hero__chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .7rem;

    /* Pushed out past the container towards the viewport edge. The pull is
       whatever gutter the centred container leaves over, capped at 4.5rem, so
       on a narrow desktop it quietly falls back to reclaiming the container's
       own 1.5rem padding and never overflows. */
    margin-right: calc(-1 * clamp(.75rem, (100vw - 1240px) / 2, 4.5rem));
}
.hero__chip {
    position: relative;
    width: 54px;
    height: 54px;
    /* One knob for the drift: the negative delay spreads the five chips evenly
       across a single cycle, so it is derived from the duration rather than
       hard-coded - change the time and the stagger follows. */
    --chip-drift-time: 4.5s;
    animation: chip-drift var(--chip-drift-time) ease-in-out infinite alternate;
    animation-delay: calc(var(--chip-index, 0) * (var(--chip-drift-time) / -5));
    will-change: transform;
}

/* A soft arc rather than a flush column, so the group reads as floating icons
   instead of a list. */
.hero__chip:nth-child(1) { margin-right: 2.6rem; }
.hero__chip:nth-child(2) { margin-right: .9rem; }
.hero__chip:nth-child(4) { margin-right: .9rem; }
.hero__chip:nth-child(5) { margin-right: 2.6rem; }

.hero__chip a {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding: .4rem;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .38);
    backdrop-filter: blur(7px);
    box-shadow: 0 8px 26px rgba(10, 16, 24, .3);
    color: #fff;
    font-weight: 500;
    font-size: .95rem;
    white-space: nowrap;
    transition: background .2s ease, border-color .2s ease, padding-right .28s ease;
}
.hero__chip a:hover,
.hero__chip a:focus-visible {
    background: rgba(255, 255, 255, .3);
    border-color: rgba(255, 255, 255, .55);
    padding-right: 1.15rem;
    color: #fff;
    z-index: 2;
}
.hero__chip-icon {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    color: var(--gold-200);
    flex: none;
}
.hero__chip-icon svg { width: 22px; height: 22px; }

/* Collapsed by default; max-width is what animates, since `width: auto` is
   not interpolatable. */
.hero__chip-label {
    max-width: 0;
    margin-left: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width .28s ease, margin-left .28s ease, opacity .2s ease;
}
.hero__chip a:hover .hero__chip-label,
.hero__chip a:focus-visible .hero__chip-label {
    max-width: 32rem;
    margin-left: .75rem;
    opacity: 1;
}

@keyframes chip-drift {
    from { transform: translateY(-5px); }
    to   { transform: translateY(5px); }
}

@media (hover: none) {
    .hero__chip { position: static; width: auto; height: auto; }
    .hero__chip a { position: static; padding-right: 1.15rem; }
    .hero__chip-label { max-width: none; margin-left: .75rem; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .hero__chip { animation: none; }
}

/* ---------------------------------------------------------- video hero */
/* Combined height of the utility bar and the main header, used to pull the
   hero up so the video sits behind them. JS refines this at runtime. */
:root { --masthead-h: 120px; }
@media (max-width: 991.98px) { :root { --masthead-h: 68px; } }

.hero--video { background: var(--ink-900); }
.hero--video .hero__media { opacity: 1; }
.hero--video .hero__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hero--video::before {
    background: linear-gradient(100deg,
        rgba(10, 16, 24, .78) 0%,
        rgba(10, 16, 24, .55) 46%,
        rgba(10, 16, 24, .28) 100%);
}

/* The header overlays the video instead of sitting above it, so the hero
   starts at the very top of the page. */
body.has-hero-video .hero {
    margin-top: calc(-1 * var(--masthead-h));
    padding-top: var(--masthead-h);

    /* Fills the viewport until the visitor scrolls. dvh follows the shrinking
       browser chrome on phones; vh is the fallback for older engines. */
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
}
body.has-hero-video .hero > .container-site { width: 100%; }

/* The section now supplies the height, so the grid does not need to pad it out
   as well - that would overshoot the viewport on a short screen. */
body.has-hero-video .hero__grid { padding-block: clamp(1.5rem, 3vw, 2.5rem); }
body.has-hero-video .topbar,
body.has-hero-video .site-header {
    background: transparent;
    background-image: none;
    box-shadow: none;
}

/* The hero is pulled up over the masthead, and it creates its own stacking
   context. The header already sits above it because it is sticky with a
   z-index; the utility bar needs the same or the video paints over it. */
body.has-hero-video .topbar {
    position: relative;
    z-index: 1031;
}

/* Both bars sit on the video, so a top-down scrim keeps their links legible
   whatever the footage happens to be showing. */
body.has-hero-video .hero::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: calc(var(--masthead-h) + 3rem);
    background: linear-gradient(to bottom, rgba(10, 16, 24, .62) 0%, rgba(10, 16, 24, 0) 100%);
    z-index: -1;
    pointer-events: none;
}

/* Once the page scrolls, the sticky header returns to the solid brand bar so
   the menu stays readable over whatever is behind it. */
body.has-hero-video .site-header.is-stuck {
    background-image: linear-gradient(100deg, var(--brand-800) 0%, var(--brand-700) 45%, var(--brand-600) 100%);
    box-shadow: 0 2px 16px rgba(93, 15, 51, .25);
}
/* Page banner (inner pages) */
.page-banner {
    position: relative;
    display: flex;
    align-items: center;
    background: linear-gradient(120deg, var(--brand-900), var(--brand-700) 70%, var(--brand-600));
    color: #fff;
    padding-top: clamp(4.5rem, 9vw, 7rem);
    padding-bottom: clamp(2.25rem, 4.5vw, 3.5rem);
    min-height: clamp(200px, 24vw, 300px);
    overflow: hidden;
    isolation: isolate;
}

/* A photograph needs more room than a flat colour to read as an image. */
.page-banner--image { min-height: clamp(260px, 30vw, 400px); }
.page-banner::after {
    content: "";
    position: absolute;
    right: -80px; top: -80px;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(227, 184, 114, .26), transparent 68%);
    z-index: -1;
}
.page-banner__media { position: absolute; inset: 0; z-index: -2; opacity: .26; }

/* An uploaded banner image replaces the brand colour rather than sitting behind
   it: the gradient and the decorative gold circle are dropped and the photo is
   shown at full strength. Only a neutral scrim remains, weighted to the side the
   heading sits on, so white text stays legible on a light photograph. */
.page-banner--image { background: var(--ink-900); }
.page-banner--image .page-banner__media { opacity: 1; }
.page-banner--image::after {
    /* The base rule positions a decorative circle; reset it to a full-bleed
       overlay. `inset` must come last - it sets all four offsets, so resetting
       top/right afterwards would collapse the box to nothing. */
    width: auto;
    height: auto;
    border-radius: 0;
    inset: 0;
    background: linear-gradient(100deg,
        rgba(10, 16, 24, .74) 0%,
        rgba(10, 16, 24, .52) 48%,
        rgba(10, 16, 24, .22) 100%);
}
.page-banner__media img { width: 100%; height: 100%; object-fit: cover; }
.page-banner h1 { color: #fff; margin-bottom: .6rem; }
.page-banner p { color: rgba(255, 255, 255, .85); max-width: 68ch; margin: 0; }

/* ---------------------------------------------------------------- cards */
/* The mission and vision cards on the home page set the pattern for every card
   on the site: an accent rail that runs out from a stub, an eased lift onto a
   deeper shadow, a badge that fills with the accent as it turns, and a glow
   that follows the cursor. The behaviour is stated once here so the components
   below only have to describe their own layout.

   --card-accent (and the rgb triple the glow and shadows need inside rgba())
   is what a card restates to change colour; everything else follows it. */
.card-almas,
.service-card,
.contact-card,
.panel-feature,
.panel-highlight {
    --card-accent: var(--brand-700);
    --card-accent-rgb: 156, 28, 87;

    position: relative;
    overflow: hidden;
    transition: transform .38s var(--img-settle-ease),
                box-shadow .38s ease,
                border-color .3s ease;
}

/* Three layers inside every card: the glow sits on the background, the content
   above it, the rail above everything - a card with an image needs the rail
   over the picture. Positioned children are what lift the content clear of the
   glow; without this the tint would wash over the text as well. */
.card-almas > *,
.service-card > *,
.contact-card > *,
.panel-feature > *,
.panel-highlight > * { position: relative; z-index: 2; }

.card-almas::before,
.service-card::before,
.contact-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    z-index: 3;
    background: linear-gradient(90deg, var(--card-accent), var(--gold-500));
    transform: scaleX(.14);
    transform-origin: left center;
    transition: transform .55s var(--img-settle-ease);
}
.card-almas:hover::before,
.card-almas:focus-within::before,
.service-card:hover::before,
.service-card:focus-within::before,
.contact-card:hover::before,
.contact-card:focus-within::before { transform: scaleX(1); }

/* --mx/--my are written by site.js on pointer move over a [data-spotlight]
   card, and fall back to the top centre without JS, on touch, or under reduced
   motion - still a deliberate highlight, just not a tracking one. */
.card-almas::after,
.service-card::after,
.contact-card::after,
.panel-feature::after,
.panel-highlight::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(16rem 16rem at var(--mx, 50%) var(--my, 0%),
                rgba(var(--card-accent-rgb), .13), transparent 68%);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}
.card-almas:hover::after,
.card-almas:focus-within::after,
.service-card:hover::after,
.service-card:focus-within::after,
.contact-card:hover::after,
.contact-card:focus-within::after,
.panel-feature:hover::after,
.panel-feature:focus-within::after,
.panel-highlight:hover::after,
.panel-highlight:focus-within::after { opacity: 1; }

.card-almas:hover,
.card-almas:focus-within,
.service-card:hover,
.service-card:focus-within,
.contact-card:hover,
.contact-card:focus-within,
.panel-feature:hover,
.panel-feature:focus-within {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(var(--card-accent-rgb), .3);
}

/* A page-width callout rather than a tile, so it takes the glow and the shadow
   but stays put - a block that spans the column looks wrong lifting off it. */
.panel-highlight:hover,
.panel-highlight:focus-within { box-shadow: var(--shadow-md); }

.card-almas {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: clamp(1.35rem, 2.4vw, 1.9rem);
    display: flex;
    flex-direction: column;
}
/* Equal-height is opt-in (.h-100) so cards in a sidebar do not stretch to the
   height of a much taller neighbouring column. */
.card-almas.h-100 { height: 100%; }
.card-almas__title { font-size: 1.18rem; margin-bottom: .55rem; }
.card-almas__title a { color: inherit; transition: color .26s ease; }
.card-almas__title a:hover { color: var(--brand-700); }
.card-almas:hover .card-almas__title { color: var(--brand-800); }
.card-almas__text { color: var(--ink-500); font-size: .96rem; flex: 1; margin-bottom: 1.1rem; }
.card-almas__foot { margin-top: auto; }

.icon-badge {
    position: relative;
    width: 58px; height: 58px;
    border-radius: 16px;
    display: grid; place-items: center;
    background: var(--brand-50);
    color: var(--brand-700);
    margin-bottom: 1.1rem;
    flex: none;
    transition: background .35s ease, color .35s ease, box-shadow .35s ease,
                transform .5s var(--img-settle-ease);
}
.icon-badge svg { width: 30px; height: 30px; transition: transform .5s var(--img-settle-ease); }
/* The ring is drawn on a pseudo element so it can expand past the badge
   without moving the badge itself. */
.icon-badge::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1.5px solid rgba(var(--card-accent-rgb, 156, 28, 87), .5);
    opacity: 0;
    pointer-events: none;
}
.card-almas:hover .icon-badge,
.card-almas:focus-within .icon-badge,
.contact-card:hover .icon-badge,
.contact-card:focus-within .icon-badge,
.panel-feature:hover .icon-badge,
.panel-highlight:hover .icon-badge {
    background: var(--card-accent);
    color: #fff;
    transform: translateY(-3px) rotate(-6deg);
    box-shadow: 0 12px 26px rgba(var(--card-accent-rgb), .3);
}
.card-almas:hover .icon-badge svg,
.card-almas:focus-within .icon-badge svg,
.contact-card:hover .icon-badge svg,
.contact-card:focus-within .icon-badge svg,
.panel-feature:hover .icon-badge svg,
.panel-highlight:hover .icon-badge svg { transform: rotate(6deg) scale(1.06); }
.card-almas:hover .icon-badge::after,
.contact-card:hover .icon-badge::after,
.panel-feature:hover .icon-badge::after,
.panel-highlight:hover .icon-badge::after { animation: card-ring 2s ease-out infinite; }

@keyframes card-ring {
    from { opacity: .65; transform: scale(1); }
    to   { opacity: 0;   transform: scale(1.5); }
}

/* A gold badge carries the gold accent through the whole card, so its ring and
   fill match the mark rather than reverting to brand maroon. */
.icon-badge--gold {
    background: var(--gold-50);
    color: var(--gold-700);
    --card-accent: var(--gold-700);
    --card-accent-rgb: 168, 124, 52;
}
.icon-badge--sm { width: 40px; height: 40px; border-radius: 12px; margin-bottom: 0; }
.icon-badge--sm svg { width: 20px; height: 20px; }

/* Service card with image */
.service-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    height: 100%;
    display: flex;
    flex-direction: column;
}
.service-card__media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, var(--brand-50), var(--surface-3));
    overflow: hidden;
}
.service-card__media img {
    width: 100%; height: 100%; object-fit: cover;
    transform: scale(var(--img-settle));
    transition: transform var(--img-settle-time) var(--img-settle-ease);
}
.service-card:hover .service-card__media img,
.service-card:focus-within .service-card__media img { transform: scale(1); }
.service-card__media--empty { display: grid; place-items: center; color: var(--brand-500); }
.service-card__media--empty svg {
    width: 62px; height: 62px; opacity: .55;
    transition: transform .5s var(--img-settle-ease), opacity .35s ease;
}
.service-card:hover .service-card__media--empty svg { transform: scale(1.08) rotate(-4deg); opacity: .75; }
.service-card__tag {
    position: absolute; left: 12px; top: 12px;
    background: rgba(255, 255, 255, .94);
    color: var(--brand-700);
    font-size: .74rem; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
    padding: .3rem .7rem;
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-xs);
    transition: background .3s ease, color .3s ease, transform .4s var(--img-settle-ease);
}
.service-card:hover .service-card__tag,
.service-card:focus-within .service-card__tag {
    background: var(--brand-700);
    color: #fff;
    transform: translateY(-2px);
}
.service-card__body { padding: 1.35rem; display: flex; flex-direction: column; flex: 1; }
.service-card__title { font-size: 1.12rem; margin-bottom: .5rem; }
.service-card__title a { color: inherit; transition: color .26s ease; }
.service-card__title a:hover { color: var(--brand-700); }
.service-card:hover .service-card__title { color: var(--brand-800); }
.service-card__text { color: var(--ink-500); font-size: .94rem; flex: 1; margin-bottom: 1rem; }

/* ------------------------------------------------------ services showcase */
/* The home page's services grid. Scoped to its own wrapper because
   .service-card is shared by the services index, a category page, a service
   page and search - none of which should inherit the featured-card layout. */
.services-showcase {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.6rem);
}
.services-showcase__item { min-width: 0; }

/* A three-column grid leaves a ragged last row unless the count divides by
   three, so the lead card absorbs the remainder: two over and it spans two
   columns, one over and it takes the full row. PHP picks which (home.php). */
.services-showcase__item--wide { grid-column: span 2; }
.services-showcase__item--full { grid-column: 1 / -1; }

/* Widened, the lead card turns on its side: picture beside the copy rather
   than above it, so the extra width becomes a bigger image instead of a very
   wide, very short block of text. */
@media (min-width: 768px) {
    .services-showcase__item--wide .service-card,
    .services-showcase__item--full .service-card { flex-direction: row; }

    .services-showcase__item--wide .service-card__media,
    .services-showcase__item--full .service-card__media {
        width: 46%;
        flex: none;
        aspect-ratio: auto;
    }
    .services-showcase__item--full .service-card__media { width: 38%; }

    .services-showcase__item--wide .service-card__body,
    .services-showcase__item--full .service-card__body {
        justify-content: center;
        padding: clamp(1.5rem, 3vw, 2.25rem);
    }
    .services-showcase__item--wide .service-card__title,
    .services-showcase__item--full .service-card__title { font-size: 1.45rem; }
    .services-showcase__item--wide .service-card__text,
    .services-showcase__item--full .service-card__text {
        font-size: 1rem;
        flex: 0 0 auto;
        margin-bottom: 1.35rem;
    }

    /* The card partial pushes its link to the bottom with Bootstrap's .mt-auto,
       which is right for a tall column card but leaves a hole in a centred
       row. Beat the utility's !important and let the link follow the copy. */
    .services-showcase__item--wide .service-card__body > .mt-auto,
    .services-showcase__item--full .service-card__body > .mt-auto {
        margin-top: 0 !important;
    }
}

/* Hover: the card lifts further than the shared default, a gold hairline draws
   itself just inside the border, and the picture settles out of its resting
   zoom (see --img-settle). */
.services-showcase .service-card {
    position: relative;
    transition: transform .4s var(--img-settle-ease), box-shadow .4s ease;
}
.services-showcase .service-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid var(--gold-500);
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
}
.services-showcase .service-card:hover,
.services-showcase .service-card:focus-within {
    transform: translateY(-7px);
    box-shadow: var(--shadow-lg);
}
.services-showcase .service-card:hover::after,
.services-showcase .service-card:focus-within::after { opacity: .7; }

/* The longest category names ran to two lines and swallowed the picture, so
   the pill is held to one line and clipped instead. */
.services-showcase .service-card__tag {
    max-width: calc(100% - 24px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Scroll reveal, staggered along the grid. The hidden state is unconditional
   so nothing flashes in before the observer runs; a <noscript> block in
   layouts/public.php puts it back for browsers that never get there. */
[data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s ease, transform .55s var(--img-settle-ease);
    transition-delay: calc(var(--reveal-i, 0) * 70ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 991.98px) {
    .services-showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .services-showcase__item--wide { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
    .services-showcase { grid-template-columns: 1fr; }
    .services-showcase__item--wide,
    .services-showcase__item--full { grid-column: auto; }
}

/* Category tile used on the services index */
/* Tinted the same way the outline button fills: swept in from the left edge
   rather than switched on. The motion itself is shared with the other
   pressable controls, near the buttons above. */
.category-tile {
    display: flex; align-items: center; gap: 1rem;
    padding: 1.15rem 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background-color: #fff;
    background-image: linear-gradient(90deg, var(--brand-50), var(--brand-100));
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 0 100%;
    color: var(--ink-800);
    font-weight: 600;
}
.category-tile:hover {
    background-size: 100% 100%;
    border-color: var(--brand-100);
    color: var(--brand-800);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.category-tile:hover .icon-badge { background: var(--brand-700); color: #fff; }
.category-tile__count { margin-left: auto; font-size: .82rem; font-weight: 500; color: var(--ink-400); }

/* Feature list */
.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.feature-list li { display: flex; gap: .8rem; align-items: flex-start; }
.feature-list li::before {
    content: "";
    width: 22px; height: 22px; flex: none; margin-top: .18rem;
    border-radius: 50%;
    background: var(--brand-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239c1c57' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* Alternating media + text rows */
.media-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
.media-row--reverse .media-row__media { order: 2; }
.media-row__media { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); background: var(--surface-3); }
.media-row__media img {
    width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3;
    transform: scale(var(--img-settle));
    transition: transform var(--img-settle-time) var(--img-settle-ease);
}
.media-row__media:hover img { transform: scale(1); }
.media-row__media--placeholder { display: grid; place-items: center; aspect-ratio: 4 / 3; color: var(--brand-500); }
.media-row__media--placeholder .svg-icon { width: 96px; height: 96px; opacity: .45; }

/* Page section where the copy wraps around the image: the heading and opening
   paragraphs sit beside the picture, and the remaining text runs the full width
   underneath it instead of staying in a narrow column. */
.media-wrap::after { content: ""; display: block; clear: both; }

.media-wrap__media {
    width: min(52%, 600px);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    background: var(--surface-3);
}
.media-wrap__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 3;
    display: block;
    transform: scale(var(--img-settle));
    transition: transform var(--img-settle-time) var(--img-settle-ease);
}
.media-wrap__media:hover img { transform: scale(1); }

.media-wrap--right .media-wrap__media {
    float: right;
    margin: 0 0 clamp(1rem, 2vw, 1.5rem) clamp(1.5rem, 3vw, 2.5rem);
}
.media-wrap--left .media-wrap__media {
    float: left;
    margin: 0 clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.5rem) 0;
}

@media (max-width: 1199.98px) {
    .media-wrap--left .media-wrap__media,
    .media-wrap--right .media-wrap__media { width: min(44%, 430px); }
}

/* Below this the text column beside the image drops under ~50 characters a
   line, which reads badly - stack the image above the copy instead. */
@media (max-width: 991.98px) {
    .media-wrap--left .media-wrap__media,
    .media-wrap--right .media-wrap__media {
        float: none;
        width: 100%;
        margin: 0 0 1.25rem;
    }
}
/* Highlight / quote section styles */
.panel-highlight {
    background: linear-gradient(135deg, var(--brand-50), #fff);
    border: 1px solid var(--brand-100);
    border-left: 4px solid var(--brand-700);
    border-radius: var(--r-md);
    padding: clamp(1.4rem, 3vw, 2.25rem);
}
.panel-highlight:hover,
.panel-highlight:focus-within { border-left-color: var(--brand-800); }
.panel-quote {
    text-align: center;
    background: linear-gradient(135deg, var(--brand-800), var(--brand-600));
    color: #fff;
    border-radius: var(--r-xl);
    padding: clamp(2rem, 5vw, 3.5rem);
}
.panel-quote h2, .panel-quote h3 { color: #fff; font-weight: 500; }
.panel-quote p { color: rgba(255, 255, 255, .88); }

.panel-feature {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    height: 100%;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}
.panel-feature::before {
    content: "";
    position: absolute; inset: 0 auto 0 0; width: 4px;
    z-index: 3;
    background: linear-gradient(180deg, var(--brand-700), var(--gold-500));
    transform: scaleY(.3);
    transform-origin: top center;
    transition: transform .55s var(--img-settle-ease);
}
.panel-feature:hover::before,
.panel-feature:focus-within::before { transform: scaleY(1); }

/* --------------------------------------------------------------- reasons */
/* A highlight section: the heading and its copy on a brand panel, the points of
   its bullet list as a stack of tiles beside it. Both columns keep their own
   height - the panel clips its decoration with overflow:hidden, which as a grid
   item would let a stretched row squash it instead of sizing to its copy. */
.reasons {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
}
.reasons--solo { grid-template-columns: minmax(0, 1fr); }

.reasons__intro {
    position: relative;
    overflow: hidden;
    padding: clamp(1.8rem, 3.5vw, 2.9rem);
    border-radius: var(--r-xl);
    background: linear-gradient(150deg, var(--brand-900) 0%, var(--brand-800) 45%, var(--brand-600) 100%);
    color: #fff;
    box-shadow: var(--shadow-brand);
}
/* The decoration below is absolutely positioned, so the content has to be
   lifted out of the normal flow layer to stay above it. */
.reasons__intro > * { position: relative; z-index: 1; }

/* Warm light in the corner the panel grows into, so a panel stretched taller
   than its own copy still has something in the space. */
.reasons__intro::before {
    content: "";
    position: absolute;
    right: -22%;
    bottom: -38%;
    width: 26rem; height: 26rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(227, 184, 114, .34), transparent 66%);
    pointer-events: none;
}
/* Fine diagonal ruling, barely there - it gives the flat gradient a surface. */
.reasons__intro::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 13px);
    pointer-events: none;
}

.reasons__title {
    font-family: var(--font-display);
    font-size: clamp(1.55rem, 3.1vw, 2.3rem);
    font-weight: 600;
    line-height: 1.22;
    color: #fff;
    margin-bottom: 0;
}
.reasons__intro .rule-gold { margin-bottom: 1.3rem; }
.reasons__lead { font-size: 1.06rem; color: rgba(255, 255, 255, .88); margin-bottom: 1rem; }

/* .prose is written for dark text on white, so the panel restates the colours
   it would otherwise inherit. */
.reasons__note.prose,
.reasons__note.prose p,
.reasons__note.prose li,
.reasons__note.prose strong { color: rgba(255, 255, 255, .76); }
.reasons__note.prose a { color: var(--gold-200); }
.reasons__note.prose > *:last-child { margin-bottom: 0; }

.reasons__cta { margin-top: 1.7rem; }

/* Light variant of the site's arrow link, for use on a brand panel. */
.link-arrow--light { color: #fff; }
.link-arrow--light .link-arrow__icon { background: var(--gold-500); color: var(--brand-900); }
.link-arrow--light:hover,
.link-arrow--light:focus-visible { color: #fff; }
.link-arrow--light:hover .link-arrow__icon,
.link-arrow--light:focus-visible .link-arrow__icon { background: #fff; color: var(--brand-800); }

.reasons__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(.75rem, 1.4vw, 1rem);
}

.reason {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 6.4rem;
    padding: clamp(1.15rem, 2vw, 1.5rem) clamp(1.25rem, 2.2vw, 1.75rem);
    border-radius: var(--r-lg);
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-xs);
    transition: transform .38s var(--img-settle-ease), box-shadow .38s ease, border-color .3s ease;
}
.reason:hover,
.reason:focus-within {
    transform: translateY(-5px);
    box-shadow: var(--shadow-brand);
    border-color: transparent;
}

/* Brand fill that rises out of the bottom edge on hover. It is a positioned
   child rather than a background transition so it can slide; everything in the
   tile is lifted above it and re-coloured to match. */
.reason::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(140deg, var(--brand-800) 0%, var(--brand-700) 55%, var(--brand-600) 100%);
    transform: translateY(101%);
    transition: transform .48s var(--img-settle-ease);
    pointer-events: none;
}
.reason:hover::before,
.reason:focus-within::before { transform: translateY(0); }

/* A large ghost numeral rather than a caption: a tile holds one short phrase,
   so the counter is what gives the right-hand side of the row something to
   hold. It sits behind the copy, which never reaches that far. */
.reason__index {
    position: absolute;
    top: 50%;
    right: clamp(1.1rem, 2vw, 1.6rem);
    transform: translateY(-50%);
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 3.4vw, 2.9rem);
    font-weight: 700;
    line-height: 1;
    color: var(--brand-700);
    opacity: .12;
    transition: opacity .35s ease, color .35s ease, transform .45s var(--img-settle-ease);
}
.reason:hover .reason__index,
.reason:focus-within .reason__index {
    color: #fff;
    opacity: .38;
    transform: translateY(-50%) scale(1.06);
}

.reason__icon {
    position: relative;
    z-index: 1;
    display: grid; place-items: center;
    width: 46px; height: 46px;
    border-radius: 14px;
    flex: none;
    background: var(--brand-50);
    border: 1px solid var(--brand-100);
    color: var(--brand-700);
    transition: background .35s ease, border-color .35s ease, color .35s ease,
                transform .45s var(--img-settle-ease);
}
.reason__icon svg { width: 22px; height: 22px; }
.reason:hover .reason__icon,
.reason:focus-within .reason__icon {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .34);
    color: #fff;
    transform: rotate(-8deg) scale(1.06);
}

.reason__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 0;
    /* Keeps a long point from running into the counter behind it. */
    padding-right: clamp(2.5rem, 5vw, 3.75rem);
}
.reason__label {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink-900);
    transition: color .35s ease;
}
.reason__detail { font-size: .9rem; line-height: 1.5; color: var(--ink-500); transition: color .35s ease; }
.reason:hover .reason__label,
.reason:focus-within .reason__label { color: #fff; }
.reason:hover .reason__detail,
.reason:focus-within .reason__detail { color: rgba(255, 255, 255, .8); }

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

/* ----------------------------------------------------- mission and vision */
/* Two purpose cards on a lit backdrop. The section paints its own decoration
   in pseudo elements, so the container is lifted above them rather than the
   decoration being pushed to a negative z-index - the section already has a
   tinted background of its own, which anything behind it would disappear
   under. */
.mission-vision { position: relative; overflow: hidden; }
.mission-vision > .container-site { position: relative; z-index: 1; }

/* Soft brand and gold light, drifting slowly so the block is never completely
   still. Inset past the edges so the drift never exposes a hard corner, and
   masked back to nothing at the top and bottom so the section's own overflow
   clip does not cut the glow off along a visible straight line. */
.mission-vision::before {
    content: "";
    position: absolute;
    inset: -10%;
    background:
        radial-gradient(38rem 26rem at 14% 4%, rgba(179, 39, 104, .13), transparent 62%),
        radial-gradient(34rem 24rem at 88% 12%, rgba(227, 184, 114, .20), transparent 64%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
    animation: mv-drift 22s ease-in-out infinite alternate;
    pointer-events: none;
}

/* A hairline dot field, faded out towards the edges so it reads as texture
   rather than as a grid drawn on top of the section. */
.mission-vision::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(19, 32, 47, .07) 1px, transparent 1px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(72% 62% at 50% 38%, #000 0%, transparent 78%);
    mask-image: radial-gradient(72% 62% at 50% 38%, #000 0%, transparent 78%);
    pointer-events: none;
}

@keyframes mv-drift {
    from { transform: translate3d(-1.5%, -1%, 0) scale(1.02); }
    to   { transform: translate3d(1.5%,  1.5%, 0) scale(1.06); }
}

.mission-vision__head {
    text-align: center;
    max-width: 44rem;
    margin: 0 auto clamp(2.25rem, 4vw, 3.25rem);
}
.mission-vision__foot { text-align: center; margin-top: clamp(1.75rem, 3vw, 2.5rem); }

/* auto-fit rather than a fixed pair, so a page that publishes only one section
   still fills its row instead of leaving a hole. */
.mv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: clamp(1.25rem, 2.4vw, 1.9rem);
}
.mv-card:only-child { max-width: 44rem; margin-inline: auto; }

/* Each card owns its accent as a variable, so the mission/vision modifiers
   only have to restate three values and every effect below follows. The rgb
   triple exists because the glow and the shadow need it inside rgba(). */
.mv-card {
    --mv-accent: var(--brand-700);
    --mv-accent-soft: var(--brand-50);
    --mv-accent-rgb: 156, 28, 87;

    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: clamp(1.6rem, 3vw, 2.5rem);
    border-radius: var(--r-xl);
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    transition: transform .4s var(--img-settle-ease), box-shadow .4s ease, border-color .3s ease;
}
.mv-card--vision {
    --mv-accent: var(--gold-700);
    --mv-accent-soft: var(--gold-50);
    --mv-accent-rgb: 168, 124, 52;
}
.mv-card:hover,
.mv-card:focus-within {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(var(--mv-accent-rgb), .28);
}

/* Accent rail across the top. It rests as a short stub and runs the full width
   on hover, so the card reacts without anything appearing from nothing. */
.mv-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--mv-accent), var(--gold-500));
    transform: scaleX(.14);
    transform-origin: left center;
    transition: transform .55s var(--img-settle-ease);
}
.mv-card:hover::before,
.mv-card:focus-within::before { transform: scaleX(1); }

/* Cursor-tracked light. --mx/--my are set by site.js on pointer move and fall
   back to the top centre of the card when they are not (no JS, touch, or
   reduced motion), which still reads as a deliberate highlight. */
.mv-card__glow {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(16rem 16rem at var(--mx, 50%) var(--my, 0%),
                rgba(var(--mv-accent-rgb), .14), transparent 68%);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}
.mv-card:hover .mv-card__glow,
.mv-card:focus-within .mv-card__glow { opacity: 1; }

/* Watermark counter. Sits in the corner opposite the icon, so it never
   collides with the content it sits behind. */
.mv-card__index {
    position: absolute;
    top: clamp(.5rem, 1.4vw, 1rem);
    right: clamp(.9rem, 2.4vw, 1.8rem);
    font-family: var(--font-display);
    font-size: clamp(3.6rem, 7vw, 5.4rem);
    font-weight: 700;
    line-height: 1;
    color: var(--mv-accent);
    opacity: .08;
    pointer-events: none;
    transition: opacity .45s ease, transform .55s var(--img-settle-ease);
}
.mv-card:hover .mv-card__index,
.mv-card:focus-within .mv-card__index { opacity: .16; transform: translateY(-4px) scale(1.05); }

.mv-card__icon {
    position: relative;
    z-index: 1;
    width: 66px; height: 66px;
    border-radius: 20px;
    display: grid; place-items: center;
    flex: none;
    margin-bottom: 1.4rem;
    background: var(--mv-accent-soft);
    color: var(--mv-accent);
    transition: background .35s ease, color .35s ease, box-shadow .35s ease,
                transform .55s var(--img-settle-ease);
}
.mv-card__icon svg {
    width: 32px; height: 32px;
    transition: transform .55s var(--img-settle-ease);
}
.mv-card:hover .mv-card__icon,
.mv-card:focus-within .mv-card__icon {
    background: var(--mv-accent);
    color: #fff;
    transform: translateY(-3px) rotate(-6deg);
    box-shadow: 0 12px 26px rgba(var(--mv-accent-rgb), .32);
}
.mv-card:hover .mv-card__icon svg,
.mv-card:focus-within .mv-card__icon svg { transform: rotate(6deg) scale(1.06); }

/* A ring that expands out of the badge on hover and repeats slowly. Drawn on a
   pseudo element so it can scale past the badge without moving the badge. */
.mv-card__icon::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1.5px solid rgba(var(--mv-accent-rgb), .5);
    opacity: 0;
    pointer-events: none;
}
.mv-card:hover .mv-card__icon::after,
.mv-card:focus-within .mv-card__icon::after { animation: card-ring 2s ease-out infinite; }

.mv-card__title {
    position: relative;
    z-index: 1;
    font-size: clamp(1.28rem, 2.1vw, 1.6rem);
    font-weight: 600;
    color: var(--ink-900);
    margin-bottom: 0;
}
.mv-card__title::after {
    content: "";
    display: block;
    width: 34px; height: 3px;
    border-radius: 3px;
    margin: .85rem 0 1.05rem;
    background: linear-gradient(90deg, var(--mv-accent), var(--gold-500));
    transition: width .5s var(--img-settle-ease);
}
.mv-card:hover .mv-card__title::after,
.mv-card:focus-within .mv-card__title::after { width: 78px; }

.mv-card__body { position: relative; z-index: 1; flex: 1; }
.mv-card__body > *:last-child { margin-bottom: 0; }

/* Closing statement band. Only rendered when the CMS marked a third section as
   a quote, so it always carries one short line. */
.mv-statement {
    position: relative;
    overflow: hidden;
    margin-top: clamp(1.25rem, 2.4vw, 1.9rem);
    padding: clamp(1.6rem, 3.4vw, 2.4rem) clamp(1.5rem, 4vw, 3rem);
    border-radius: var(--r-xl);
    background: linear-gradient(120deg, var(--brand-900) 0%, var(--brand-700) 55%, var(--brand-600) 100%);
    color: #fff;
    text-align: center;
    box-shadow: var(--shadow-brand);
}
.mv-statement::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(26rem 16rem at 82% 120%, rgba(227, 184, 114, .32), transparent 68%);
    pointer-events: none;
}
.mv-statement__mark {
    position: relative;
    display: grid; place-items: center;
    width: 44px; height: 44px;
    margin: 0 auto .9rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .28);
    color: var(--gold-200);
}
.mv-statement__mark svg { width: 20px; height: 20px; }
.mv-statement__text {
    position: relative;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2.4vw, 1.75rem);
    font-weight: 500;
    line-height: 1.4;
    color: #fff;
}

/* The button keeps its site-wide shape; only the arrow is added, and it slides
   on hover the same way .link-arrow does elsewhere. */
.mv-cta { display: inline-flex; align-items: center; gap: .65rem; }
.mv-cta__icon { display: grid; place-items: center; }
.mv-cta__icon svg { width: 16px; height: 16px; transition: transform .3s var(--img-settle-ease); }
.mv-cta:hover .mv-cta__icon svg,
.mv-cta:focus-visible .mv-cta__icon svg { transform: translateX(4px); }

/* Touch devices never reach the hover state, so the cards show their accent
   rail and lit badge from the start instead of looking unfinished. */
@media (hover: none) {
    .mv-card::before { transform: scaleX(1); }
    .mv-card__icon { background: var(--mv-accent); color: #fff; }
}

@media (prefers-reduced-motion: reduce) {
    .mission-vision::before { animation: none; }
}

/* One CMS page section. The first never adds a top margin and the last never
   adds a bottom one, so an empty introduction (or any missing block) leaves the
   section's own padding as the only spacing - no gap. */
/* The section's own padding supplies the space below its final block, so a
   trailing utility margin there would double the gap. */
.section > .container-site > *:last-child { margin-bottom: 0; }

.page-section { margin-bottom: clamp(2rem, 4vw, 3rem); }
.page-section:first-child { margin-top: 0; }
.page-section:last-child { margin-bottom: 0; }

/* Prose (rich text from the CMS) */
.prose { color: var(--ink-600); font-size: 1.02rem; }

/* Editor content always renders in the site's own typography, whatever the
   admin pasted in from Word, Google Docs or another website. Declared with
   !important so a stray inline font on stored markup can never win. */
.prose, .prose * { font-family: var(--font-sans) !important; }
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6,
.prose h1 *, .prose h2 *, .prose h3 *, .prose h4 *, .prose h5 *, .prose h6 * {
    font-family: var(--font-display) !important;
}
.prose h2 { font-size: 1.6rem; margin: 2rem 0 .9rem; }
.prose h3 { font-size: 1.28rem; margin: 1.6rem 0 .7rem; }
.prose h4 { font-size: 1.1rem; margin: 1.4rem 0 .6rem; }
.prose ul, .prose ol { padding-left: 1.35rem; margin-bottom: 1.1rem; }
.prose li { margin-bottom: .4rem; }
.prose a { color: var(--brand-700); text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.35rem;
    border-left: 4px solid var(--brand-500);
    background: var(--brand-50);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    color: var(--ink-700);
}
.prose img { border-radius: var(--r-md); margin-block: 1rem; }
.prose table { width: 100%; border-collapse: collapse; margin-block: 1.25rem; font-size: .95rem; }
.prose table th, .prose table td { border: 1px solid var(--line); padding: .7rem .85rem; text-align: left; }
.prose table th { background: var(--surface-2); color: var(--ink-800); font-weight: 600; }
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
    text-align: left;
    -webkit-hyphens: manual;
    hyphens: manual;
}

.prose-table-wrap { overflow-x: auto; }

/* Body copy is justified so the right edge lines up with the layout grid.
   Hyphenation is enabled so the inter-word gaps stay even on narrow columns
   (the layout is lang="en", which the hyphenation dictionary needs). */
/* The editor does not always wrap blocks in <p>: pasted content and older
   entries can be bare text or <div>. Setting the alignment on the container
   too means those justify as well; headings are reset below. */
.prose,
.prose div,
.prose p,
.prose li,
.prose blockquote,
p.lead-copy {
    text-align: justify;
    text-justify: inter-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
}

/* Deliberately centred blocks keep their own alignment - a justified rule on
   the paragraph itself would otherwise beat the centring it inherits. The
   .prose wrapper is listed as well as its children: it matches the justify
   rule above in its own right, so `inherit` on the paragraphs alone would
   just inherit justify back off it. */
.panel-quote .prose,
.panel-quote .prose p,
.panel-quote .prose li,
.text-center .prose,
.text-center .prose p,
.text-center .prose li,
.text-center p.lead-copy,
.empty-state p {
    text-align: inherit;
    -webkit-hyphens: manual;
    hyphens: manual;
}

/* ---------------------------------------------------------------- forms */
.form-label { font-weight: 600; color: var(--ink-800); font-size: .92rem; margin-bottom: .4rem; }
.form-label .req { color: var(--brand-600); }
.form-control, .form-select {
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: .72rem .95rem;
    font-size: .98rem;
    color: var(--ink-800);
    background-color: #fff;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.form-control:focus, .form-select:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 4px rgba(156, 28, 87, .12);
}
.form-control::placeholder { color: var(--ink-300); }
.form-control.is-invalid, .form-select.is-invalid { border-color: #dc3545; }
.form-text { font-size: .84rem; color: var(--ink-400); }
.invalid-feedback { font-size: .85rem; }
.form-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    box-shadow: var(--shadow-sm);
}
.honeypot { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; width: 0; }

/* Alerts */
.alert { border: 1px solid transparent; border-radius: var(--r-md); padding: .95rem 1.15rem; font-size: .95rem; }
.alert-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.alert-error, .alert-danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.alert-info { background: var(--teal-50); border-color: #b6e0e0; color: #0b5e5e; }
.alert[data-auto-dismiss] { transition: opacity .3s ease, transform .3s ease; }
.alert.is-dismissing { opacity: 0; transform: translateY(-.35rem); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .alert[data-auto-dismiss] { transition: none; } }

/* --------------------------------------------------------- contact bits */
.contact-card {
    display: flex; gap: 1rem;
    padding: 1.35rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    height: 100%;
}
.contact-card > div { min-width: 0; }
.contact-card__label { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-400); font-weight: 600; margin-bottom: .3rem; }
.contact-card__value { color: var(--ink-800); font-weight: 600; overflow-wrap: anywhere; }
.contact-card__value a { color: var(--ink-800); }
.contact-card__value a:hover { color: var(--brand-700); }

.map-frame { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface-3); }
.map-frame iframe { display: block; width: 100%; height: 420px; border: 0; }
.map-placeholder { display: grid; place-items: center; min-height: 300px; text-align: center; padding: 2rem; }

/* -------------------------------------------------------------- gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.25rem; }
.gallery-item {
    position: relative;
    border-radius: var(--r-md);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--surface-3);
    border: 1px solid var(--line);
    display: block;
    transition: transform .38s var(--img-settle-ease), box-shadow .38s ease, border-color .3s ease;
}
.gallery-item:hover,
.gallery-item:focus-visible {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--brand-100);
}
.gallery-item img {
    width: 100%; height: 100%; object-fit: cover;
    transform: scale(var(--img-settle));
    transition: transform var(--img-settle-time) var(--img-settle-ease);
}
.gallery-item:hover img,
.gallery-item:focus-visible img { transform: scale(1); }
.gallery-item__caption {
    position: absolute; inset: auto 0 0 0;
    padding: 2.25rem .95rem .85rem;
    background: linear-gradient(to top, rgba(19, 32, 47, .85), transparent);
    color: #fff;
    font-size: .9rem;
    font-weight: 500;
    transform: translateY(.45rem);
    opacity: .88;
    transition: transform .4s var(--img-settle-ease), opacity .3s ease;
}
.gallery-item:hover .gallery-item__caption,
.gallery-item:focus-visible .gallery-item__caption { transform: none; opacity: 1; }
.gallery-filter { display: flex; flex-wrap: wrap; gap: .5rem; }
.gallery-filter a {
    padding: .45rem 1.1rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--line);
    color: var(--ink-600);
    font-size: .9rem;
    font-weight: 500;
    background: #fff;
}
.gallery-filter a:hover { border-color: var(--brand-500); color: var(--brand-700); }
.gallery-filter a.active { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }

/* ------------------------------------------------------------------ CTA */
.cta-band {
    background: linear-gradient(120deg, var(--brand-800) 0%, var(--brand-700) 55%, var(--brand-600) 100%);
    color: #fff;
    border-radius: var(--r-lg);
    padding: clamp(1.25rem, 2.4vw, 1.75rem) clamp(1.4rem, 3vw, 2.25rem);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.cta-band::after {
    content: "";
    position: absolute; right: -50px; bottom: -70px;
    width: 210px; height: 210px; border-radius: 50%;
    background: radial-gradient(circle, rgba(227, 184, 114, .3), transparent 70%);
    z-index: -1;
}
/* Sized down from the global h2 scale: this is a recurring prompt, not a
   section heading, so it should not out-shout the page's own headings. */
.cta-band h2 { color: #fff; font-size: clamp(1.15rem, 1.9vw, 1.45rem); }
.cta-band p { color: rgba(255, 255, 255, .88); font-size: .92rem; }

/* --------------------------------------------------------------- footer */
/* The footer mirrors the header: the same brand gradient for the main block and
   a deeper band beneath it, so the two bookend the page. Text sits at 82% white
   rather than 70% because the gradient's light end (--brand-600) needs it to
   clear the 4.5:1 contrast minimum (SRS 21). */
.site-footer {
    background: var(--brand-800);
    background-image: linear-gradient(100deg, var(--brand-800) 0%, var(--brand-700) 45%, var(--brand-600) 100%);
    color: rgba(255, 255, 255, .82);
    padding-top: clamp(3rem, 6vw, 4.5rem);
}
.site-footer h3 {
    color: #fff; font-size: 1rem; letter-spacing: .1em; text-transform: uppercase;
    margin-bottom: 1.25rem; font-weight: 600;
}
.site-footer a { color: rgba(255, 255, 255, .82); }
.site-footer a:hover { color: var(--gold-500); }
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; font-size: .95rem; }

/* The label steps aside and warms to gold. A short nudge rather than the wide
   one a leading marker would need, so it reads as the link answering the cursor
   instead of sliding across the column. */
.footer-list a {
    display: inline-block;
    transition: color .25s ease, transform .32s var(--img-settle-ease);
}
.footer-list a:hover,
.footer-list a:focus-visible { color: var(--gold-500); transform: translateX(7px); }
/* Inline footer links - the phone and email in the contact column, Contact and
   Enquiry in the bottom bar - get an underline that wipes in from the left and
   leaves to the right. Swapping transform-origin between the two states is what
   makes it travel rather than simply retract the way it came. */
.footer-contact a,
.footer-bottom__inner a:not(.footer-bottom__social) {
    position: relative;
    transition: color .25s ease;
}
.footer-contact a::after,
.footer-bottom__inner a:not(.footer-bottom__social)::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -3px;
    height: 1px;
    background: var(--gold-500);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .35s var(--img-settle-ease);
}
.footer-contact a:hover::after,
.footer-contact a:focus-visible::after,
.footer-bottom__inner a:not(.footer-bottom__social):hover::after,
.footer-bottom__inner a:not(.footer-bottom__social):focus-visible::after {
    transform: scaleX(1);
    transform-origin: left center;
}

.footer-contact { display: grid; gap: .9rem; font-size: .95rem; }
.footer-contact li { display: flex; gap: .7rem; align-items: flex-start; }
.footer-contact svg { width: 18px; height: 18px; flex: none; margin-top: .2rem; color: var(--gold-500); }
/* Same rounded-panel treatment as .brand__mark in the header, a size down, so
   the footer lockup reads as the same mark rather than a second one. */
.footer-brand { display: flex; align-items: center; gap: .85rem; }
.footer-brand__mark {
    width: 58px; height: 58px;
    display: grid; place-items: center;
    border-radius: 13px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    flex: none;
}
.footer-brand__mark img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; }
.footer-brand__name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; letter-spacing: .06em; color: var(--gold-200); text-transform: uppercase; }
.footer-social { display: flex; gap: .55rem; margin-top: 1.25rem; }
.footer-social a {
    width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    color: rgba(255, 255, 255, .88);
}
.footer-social a:hover { background: var(--gold-500); border-color: var(--gold-500); color: var(--brand-900); }
.footer-social svg { width: 18px; height: 18px; }
/* Full-bleed band, the counterpart to the utility bar above the header. */
.footer-bottom {
    margin-top: clamp(2rem, 4vw, 3rem);
    background: var(--brand-900);
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding-block: 1.35rem;
    font-size: .88rem;
    color: rgba(255, 255, 255, .72);
}
.footer-bottom__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
/* YouTube link beside Contact and Enquiry. Smaller than .footer-social so it
   sits on the bottom bar without crowding the text links next to it. */
.footer-bottom__social {
    width: 30px; height: 30px; border-radius: 50%;
    display: inline-grid; place-items: center;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    color: rgba(255, 255, 255, .88);
    transition: background .22s ease, border-color .22s ease, color .22s ease,
                transform .28s var(--img-settle-ease), box-shadow .28s ease;
}
.footer-bottom__social:hover,
.footer-bottom__social:focus-visible {
    background: var(--gold-500);
    border-color: var(--gold-500);
    color: var(--brand-900);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(227, 184, 114, .35);
}
.footer-bottom__social:hover svg { color: inherit; }
.footer-bottom__social svg { width: 16px; height: 16px; }

/* -------------------------------------------------------- floating bits */
.float-stack { position: fixed; right: 18px; bottom: 18px; z-index: 1040; display: grid; gap: .6rem; }
.float-btn {
    width: 52px; height: 52px;
    border-radius: 50%;
    display: grid; place-items: center;
    box-shadow: var(--shadow-lg);
    border: 0;
    transition: transform .32s var(--img-settle-ease), box-shadow .32s ease,
                opacity .3s ease, visibility .3s ease;
}
.float-btn:hover { transform: translateY(-4px) scale(1.06); }
/* Immediate on press, like the page buttons, so the control feels physical. */
.float-btn:active { transform: translateY(0) scale(.94); transition-duration: .08s; }
.float-btn svg { width: 24px; height: 24px; transition: transform .32s var(--img-settle-ease); }
.float-btn--whatsapp { background: #25d366; color: #fff; }
.float-btn--whatsapp:hover { box-shadow: 0 14px 32px rgba(37, 211, 102, .45); }
/* Fades in on scroll rather than appearing; the arrow lifts with the hover to
   say which way the button goes. */
.float-btn--top { background: var(--brand-700); color: #fff; opacity: 0; visibility: hidden; }
.float-btn--top.is-visible { opacity: 1; visibility: visible; }
.float-btn--top:hover { box-shadow: 0 14px 32px rgba(156, 28, 87, .42); }
.float-btn--top:hover svg { transform: translateY(-2px); }

/* ----------------------------------------------------------- pagination */
.pagination-almas .page-link {
    border-radius: var(--r-sm);
    margin: 0 .18rem;
    border: 1px solid var(--line);
    color: var(--ink-600);
    padding: .5rem .85rem;
}
.pagination-almas .page-item.active .page-link { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }
.pagination-almas .page-link:hover { background: var(--brand-50); color: var(--brand-700); }

/* -------------------------------------------------------------- utility */
.text-brand { color: var(--brand-700) !important; }
.bg-brand-soft { background: var(--brand-50) !important; }
.empty-state {
    text-align: center;
    padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
    border: 1px dashed var(--line);
    border-radius: var(--r-lg);
    background: var(--surface-2);
    color: var(--ink-500);
}
.empty-state svg { width: 52px; height: 52px; color: var(--ink-300); margin-bottom: 1rem; }

.search-inline { display: flex; gap: .5rem; max-width: 520px; }
.search-inline .form-control { border-radius: var(--r-pill); padding-left: 1.15rem; }

/* --------------------------------------------------------- breakpoints */
/* The header carries a full menu plus a contact call-to-action, so the
   secondary elements are shed first as the viewport narrows. */
@media (max-width: 1399.98px) {
    :root { --nav-link-size: 1.22rem; }
    .main-nav { gap: 0; }
    .main-nav__link { padding: .55rem .62rem; }
    .header-cta { padding-inline: .25rem; }
    .header-cta__label small { display: none; }
    .header-cta__label strong { font-size: .98rem; }
}

/* Below 1200px the drawer takes over, so the bar never has to shrink further. */
@media (max-width: 1199.98px) {
    /* No menu to give room to, so the bar returns to its compact height and
       the brand steps back down with it. */
    :root { --header-h: 78px; --brand-mark-size: 46px; --brand-name-size: 1.06rem; }
    .main-nav { display: none; }
    .header-actions::before { display: none; }
    .header-toggle { display: inline-flex; }
    .header-cta__label { display: none; }

    /* The menu carried the auto margin; with it hidden the actions take over so
       the brand still sits left and the controls right. */
    .header-actions { margin-left: auto; }
}

@media (max-width: 991.98px) {
    :root { --header-h: 68px; }
    .hero__grid { grid-template-columns: 1fr; }

    /* Stacked: the chips wrap into a left-aligned cluster under the buttons,
       and the arc offsets are dropped so nothing hangs off the edge. */
    .hero__chips { flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; gap: .5rem; margin-right: 0; }
    .hero__chip { position: static; width: auto; height: auto; max-width: 100%; margin-right: 0 !important; animation: none; }
    .hero__chip a { position: static; padding-right: 1.15rem; white-space: normal; }
    .hero__chip-icon { width: 38px; height: 38px; }
    .hero__chip-label { max-width: none; margin-left: .7rem; opacity: 1; }
    .split-head { grid-template-columns: 1fr; }
    .split-head__body { padding-left: 0; padding-top: 1.25rem; }
    .split-head__body::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; }
    .media-row { grid-template-columns: 1fr; }
    .media-row--reverse .media-row__media { order: 0; }
    .topbar__inner { justify-content: center; }
}

@media (max-width: 767.98px) {
    body { font-size: .97rem; }
    .topbar { display: none; }
    .brand__sub { display: none; }
    .header-cta__label { display: none; }
    .hero__actions .btn { width: 100%; justify-content: center; }
    .map-frame iframe { height: 300px; }
    .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .85rem; }
    .float-stack { right: 12px; bottom: 12px; }
    .float-btn { width: 46px; height: 46px; }
}

@media (max-width: 575.98px) {
    .brand__name { font-size: .9rem; letter-spacing: .04em; }
    .brand__mark { width: 40px; height: 40px; }
    .header-cta { padding-inline: 0; }
    .header-cta__icon { width: 38px; height: 38px; }
    .cta-band { border-radius: var(--r-md); }
    .section { padding-block: 2.75rem; }
}

/* ------------------------------------------------------------ printing */
@media print {
    .site-header, .topbar, .site-footer, .float-stack, .btn { display: none !important; }
    body { color: #000; }
    a[href]::after { content: " (" attr(href) ")"; font-size: .85em; }
}

/* --------------------------------------------- reduced motion (SRS 21) */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    :root { --img-settle: 1; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}