/* ==========================================================================
   TenderMitra — Modern marketing design system
   Shared by the redesigned public pages. All selectors are prefixed .hm-* or
   scoped to a page class (.tm-home, .tm-about, …), so pages that have not been
   migrated yet are untouched.

   Direction (from the supplied references): soft diffuse pastel mesh built
   from the brand orange, centred composition, elegant serif display paired
   with small muted sans body copy, dark pill buttons, soft tinted cards and
   light bordered grid cells. Airy, premium, restrained.
   ========================================================================== */

/* Display serif — self-hosted, no external requests */
@font-face {
    font-family: 'Instrument Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/instrument-serif-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Instrument Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/instrument-serif-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Italic cut — used as an editorial accent on a single word per heading */
@font-face {
    font-family: 'Instrument Serif';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/instrument-serif-italic.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.tm-home,
.tm-about,
.tm-services,
.tm-service,
.tm-gallery,
.tm-faq,
.tm-contact,
.tm-appointment,
.tm-blog,
.tm-post {
    /* ----------------------------------------------------------------
       Atmosphere pools — saturated brand-family colour, not pastel.
       These are painted at full strength with their cores outside the
       section box (see ATMOSPHERE), so what reaches the content is the
       falloff. Diluting them here is what made the old field wash out.
       ---------------------------------------------------------------- */
    --s-peach: #ffa63d;
    --s-apricot: #f9871f;
    --s-blush: #ff8f7a;
    --s-rose: #f2603a;
    --s-lilac: #7161ee;
    --s-lavender: #9587f5;
    --s-cream: #ffc46b;
    --s-mint: #17a877;

    /* Card tints — clearly tinted, still cleared for --s-ink-3 body copy
       at 4.5:1 (worst case 5.0:1 on --t-lilac). */
    --t-lilac: #d9d5fb;
    --t-blush: #ffd8d0;
    --t-cream: #ffdfb3;
    --t-mint: #bde8d5;

    /* Ink — deep navy rather than neutral grey. Every step is darker than
       the value it replaces, which is most of the reason the pages stop
       reading as washed out. --s-ink-3 is 7.1:1 on white (was 6.5). */
    --s-ink: #0b1220;
    --s-ink-2: #2c3a55;
    --s-ink-3: #4a5878;
    --s-line: #dde2ec;
    --s-line-2: #c3cbdb;
    --s-off: #f4f6fa;
    /* One step past --s-off: at full-page scale a 3% tone reads as a
       rendering artefact rather than a band, so the section version is
       deliberately darker than the card-fill version. */
    --s-canvas: #e9eef7;

    /* Deep field — CTA bands, footer, and anything that has to anchor a
       page against all the white above it. */
    --s-navy: #0b1220;
    --s-navy-2: #131e33;
    --s-navy-3: #1e2c47;
    --s-navy-line: rgb(255 255 255 / .13);
    --s-on-navy: rgb(255 255 255 / .78);
    --s-on-navy-2: rgb(255 255 255 / .62);

    /* Support hues — the second and third accent on cards and badges */
    --s-indigo: #4f46e5;
    --s-indigo-d: #4338ca;
    --s-teal: #0f8a63;
    --s-teal-2: #17a877;
    --s-rose-d: #b8304f;
    --s-danger: #e02424;
    --s-danger-d: #a81a1a;
    --s-danger-bg: #ffdcd8;

    --s-orange: #f6931e;
    --s-orange-l: #ffb457;
    --s-orange-d: #8c4e06;
    /* Display-size accent only. 4.32:1 on white — clears the 3:1 bar that
       applies to large text with room to spare over the coloured field, but
       misses 4.5:1, so it must never be used below display sizes. */
    --s-orange-em: #bb6208;

    background: #fff;
    color: var(--s-ink);
}

/* ==========================================================================
   HEADER — light, minimal, sits over the mesh
   ========================================================================== */

.tm-home .tm-topbar,
.tm-about .tm-topbar,
.tm-services .tm-topbar,
.tm-service .tm-topbar,
.tm-gallery .tm-topbar,
.tm-faq .tm-topbar,
.tm-contact .tm-topbar,
.tm-appointment .tm-topbar,
.tm-blog .tm-topbar,
.tm-post .tm-topbar { background: var(--s-ink); color: rgb(255 255 255 / .68); }

.tm-home .tm-header,
.tm-about .tm-header,
.tm-services .tm-header,
.tm-service .tm-header,
.tm-gallery .tm-header,
.tm-faq .tm-header,
.tm-contact .tm-header,
.tm-appointment .tm-header,
.tm-blog .tm-header,
.tm-post .tm-header {
    background: rgb(255 255 255 / .55);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    border-bottom: 1px solid transparent;
}

.tm-home .tm-header.is-stuck,
.tm-about .tm-header.is-stuck,
.tm-services .tm-header.is-stuck,
.tm-service .tm-header.is-stuck,
.tm-gallery .tm-header.is-stuck,
.tm-faq .tm-header.is-stuck,
.tm-contact .tm-header.is-stuck,
.tm-appointment .tm-header.is-stuck,
.tm-blog .tm-header.is-stuck,
.tm-post .tm-header.is-stuck {
    background: rgb(255 255 255 / .88);
    border-bottom-color: var(--s-line);
}

.tm-home .tm-header .nav-link,
.tm-about .tm-header .nav-link,
.tm-services .tm-header .nav-link,
.tm-service .tm-header .nav-link,
.tm-gallery .tm-header .nav-link,
.tm-faq .tm-header .nav-link,
.tm-contact .tm-header .nav-link,
.tm-appointment .tm-header .nav-link,
.tm-blog .tm-header .nav-link,
.tm-post .tm-header .nav-link {
    color: var(--s-ink-2) !important;
    font-size: .9063rem;
    font-weight: 500;
}

.tm-home .tm-header .nav-link:hover,
.tm-home .tm-header .nav-link:focus-visible,
.tm-about .tm-header .nav-link:hover,
.tm-about .tm-header .nav-link:focus-visible,
.tm-services .tm-header .nav-link:hover,
.tm-services .tm-header .nav-link:focus-visible,
.tm-service .tm-header .nav-link:hover,
.tm-service .tm-header .nav-link:focus-visible,
.tm-gallery .tm-header .nav-link:hover,
.tm-faq .tm-header .nav-link:hover,
.tm-contact .tm-header .nav-link:hover,
.tm-appointment .tm-header .nav-link:hover,
.tm-blog .tm-header .nav-link:hover,
.tm-post .tm-header .nav-link:hover {
    color: var(--s-ink) !important;
    background: rgb(255 255 255 / .6);
}

/* ==========================================================================
   TYPE
   ========================================================================== */

.hm-serif {
    font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    font-weight: 400;
    letter-spacing: -.012em;
    color: var(--s-ink);
    margin: 0;
}

.hm-display {
    font-size: clamp(2.75rem, 1.5rem + 4.8vw, 5rem);
    line-height: 1.06;
}

.hm-h2 {
    font-size: clamp(2rem, 1.35rem + 2.4vw, 3.15rem);
    line-height: 1.1;
}

.hm-h3 {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--s-ink);
    margin: 0;
    font-family: 'Inter', sans-serif;
}

/* Body copy is deliberately small and quiet, as in the references */
.hm-sub {
    font-size: .9375rem;
    line-height: 1.62;
    color: var(--s-ink-3);
    margin: 0;
    font-weight: 400;
}

.hm-sub--lg { font-size: 1.0313rem; line-height: 1.6; }

.hm-text { font-size: .875rem; line-height: 1.62; color: var(--s-ink-3); margin: 0; }

.hm-devanagari { font-family: 'Noto Sans Devanagari', 'Inter', sans-serif; font-weight: 600; }

/* Editorial italic accent inside a serif heading */
.hm-em {
    font-style: italic;
    /* Large display text only, so the vivid cut is used here; --s-orange-d
       stays reserved for small text, where it must clear 4.5:1. */
    color: var(--s-orange-em);
}

/* Word-level reveal. GSAP wraps each word in .hm-w at runtime; the
   inline-block is what makes the words transformable. No will-change here —
   the reveal runs once, and pinning a layer per word would waste GPU memory
   for the life of the page. */
.hm-w { display: inline-block; }

/* Soft pill badge above a heading */
.hm-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem 1rem;
    font-size: .75rem;
    font-weight: 500;
    color: var(--s-ink-2);
    background: rgb(255 255 255 / .72);
    border: 1px solid rgb(255 255 255 / .9);
    border-radius: 999px;
    box-shadow: 0 2px 10px rgb(11 18 32 / .05);
    text-decoration: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background-color .2s var(--tm-ease), transform .2s var(--tm-ease);
}

.hm-pill:hover { background: #fff; color: var(--s-ink); transform: translateY(-1px); }
.hm-pill i { color: var(--s-orange); font-size: .85em; }

/* Count chip — "N services available", "N photos" */
.hm-count {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .85rem;
    font-size: .75rem;
    font-weight: 500;
    color: var(--s-ink-2);
    background: #fff;
    border: 1px solid var(--s-line);
    border-radius: 999px;
}

.hm-count b { color: var(--s-ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   BUTTONS — dark pills
   ========================================================================== */

.hm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .8rem 1.5rem;
    font-size: .875rem;
    font-weight: 550;
    line-height: 1.2;
    border: 1px solid transparent;
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s var(--tm-ease), color .2s var(--tm-ease),
                border-color .2s var(--tm-ease), transform .2s var(--tm-ease),
                box-shadow .2s var(--tm-ease);
}

.hm-btn i { transition: transform .25s var(--tm-ease); }
.hm-btn:hover i.hm-arrow { transform: translateX(3px); }

.hm-btn--dark {
    background: var(--s-ink);
    color: #fff !important;
    border-color: var(--s-ink);
    box-shadow: 0 4px 14px rgb(11 18 32 / .18);
}

.hm-btn--dark:hover {
    background: var(--s-navy-3);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgb(11 18 32 / .26);
}

.hm-btn--soft {
    background: rgb(255 255 255 / .78);
    color: var(--s-ink) !important;
    border-color: rgb(255 255 255 / .9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 10px rgb(11 18 32 / .05);
}

.hm-btn--soft:hover { background: #fff; transform: translateY(-2px); }

.hm-btn--lg { padding: .95rem 1.85rem; font-size: .9375rem; }

.hm-alink {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .875rem;
    font-weight: 550;
    color: var(--s-ink-2);
    text-decoration: none;
    transition: gap .2s var(--tm-ease), color .2s var(--tm-ease);
}

.hm-alink:hover { gap: .65rem; color: var(--s-ink); }

/* ==========================================================================
   ATMOSPHERE — the coloured field behind every hero and closing section

   Three layers, all held inside .hm-mesh so the section itself can stay a
   plain white box:

     span      soft-edged pools of real colour
     ::before  a structural motif — rays, grid, dots, rings … one per page
     ::after   fine grain, then a dissolve back into the page white

   The composition deliberately leaves the middle of the field close to
   white. Pooling colour at the edges and letting it fall away reads far
   richer than a full-bleed three-stop gradient, which flattens into a
   single candy wash however saturated the stops are — and it keeps dark
   text sitting on near-white rather than on a mid-tone.

   Every colour and motif is a custom property, so a page changes its whole
   identity by setting four variables. See PAGE IDENTITIES below.
   ========================================================================== */

.hm-mesh {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;

    --atm-1: var(--s-apricot);
    --atm-2: var(--s-rose);
    --atm-3: var(--s-lilac);
    --atm-4: var(--s-cream);

    /* Motif ink. Faint by design — it should register as texture, not pattern. */
    --atm-line: rgb(11 18 32 / .085);

    /* Where the dissolve to page white begins */
    --atm-veil: linear-gradient(180deg, transparent 74%, #fff 100%);

    /* Legibility scrim. Lifts the middle of the field back towards white so
       the pools can stay genuinely saturated at the edges without the body
       copy ever having to sit on a mid-tone. This is what buys the vivid
       colour: without it every pool would have to be diluted to keep
       --s-ink-3 above 4.5:1, and the whole hero would go pastel again. */
    --atm-scrim: radial-gradient(98% 92% at 50% 44%,
        rgb(255 255 255 / .62) 0%,
        rgb(255 255 255 / .5) 52%,
        rgb(255 255 255 / .14) 78%,
        transparent 98%);
}

.hm-mesh span {
    position: absolute;
    /* A radial gradient falls off to nothing by itself, so there is no hard
       saturated core the way there is with a solid disc under a big blur —
       which also means no blur filter is needed here at all. Five blurred
       layers this size, all animating, is one of the more expensive things
       a page can do; the grain below hides what little banding is left. */
    will-change: transform;
}

/* Every size and offset is a percentage of the section box, both axes, so
   the composition is identical whether it is a 1920x420 desktop hero or a
   414x900 phone one. Sizing in vw does not survive that: on a tall narrow
   hero the pools shrink to smudges in the corners and the field goes white.

   Each pool is placed by its top-left corner, so its core sits at
   (offset + half the size). Every one of these puts the core OUTSIDE the
   box — only the falloff reaches the content. That is what lets the pools
   run at full opacity: the core is where a radial gradient is at full
   strength, and a full-strength core inside the text column is exactly what
   makes body copy unreadable. Peak chroma in the field is ~128 against the
   old flat gradient's 48, while the middle stays near white. */

/* core off the top-left corner, at (-16%, -14%) */
.hm-mesh span:nth-child(1) {
    width: 146%; height: 128%; top: -78%; left: -89%;
    background: radial-gradient(ellipse closest-side, var(--atm-1), transparent);
    animation: hm-m1 30s var(--tm-ease) infinite alternate;
}

/* core at (116%, -16%) */
.hm-mesh span:nth-child(2) {
    width: 136%; height: 120%; top: -76%; right: -84%;
    background: radial-gradient(ellipse closest-side, var(--atm-2), transparent);
    animation: hm-m2 36s var(--tm-ease) infinite alternate;
}

/* core at (-14%, 114%) */
.hm-mesh span:nth-child(3) {
    width: 140%; height: 124%; bottom: -76%; left: -84%;
    background: radial-gradient(ellipse closest-side, var(--atm-3), transparent);
    animation: hm-m2 32s var(--tm-ease) infinite alternate-reverse;
}

/* core at (114%, 112%) */
.hm-mesh span:nth-child(4) {
    width: 128%; height: 116%; bottom: -70%; right: -78%;
    background: radial-gradient(ellipse closest-side, var(--atm-4), transparent);
    animation: hm-m1 34s var(--tm-ease) infinite alternate-reverse;
}

/* The one pool whose core is on-screen, so it is held right down. It exists
   only to stop the middle of the field reading as a bare white hole. */
.hm-mesh span:nth-child(5) {
    width: 120%; height: 94%; top: -3%; left: -10%;
    background: radial-gradient(ellipse closest-side, var(--atm-4), transparent);
    opacity: .5;
    animation: hm-m2 26s var(--tm-ease) infinite alternate;
}

@keyframes hm-m1 {
    from { transform: translate3d(0,0,0) scale(1); }
    to   { transform: translate3d(6%, 5%, 0) scale(1.12); }
}

@keyframes hm-m2 {
    from { transform: translate3d(0,0,0) scale(1.1); }
    to   { transform: translate3d(-6%, -4%, 0) scale(1); }
}

/* Structural motif. Masked back to a soft pool under the headline so it
   suggests structure near the content and disappears before it can start
   looking like wallpaper. */
.hm-mesh::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* ::before is the first child, so without this the motif would sit under
       the colour pools — and the home rays only read as light from above if
       they are drawn over them. */
    z-index: 1;
    background-image: var(--atm-motif, none);
    background-size: var(--atm-motif-size, auto);
    background-position: 50% 0;
    -webkit-mask-image: radial-gradient(125% 88% at 50% 4%, #000 8%, transparent 70%);
    mask-image: radial-gradient(125% 88% at 50% 4%, #000 8%, transparent 70%);
}

/* Grain, then the dissolve. Grain stops wide soft gradients banding and
   gives the field a printed quality; the veil is what removes the hard
   horizontal seam where the section used to stop dead against the page. */
.hm-mesh::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background-image:
        var(--atm-veil),
        var(--atm-scrim),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.11'/%3E%3C/svg%3E");
    background-size: 100% 100%, 100% 100%, 160px 160px;
    background-repeat: no-repeat, no-repeat, repeat;
}

/* ==========================================================================
   PAGE IDENTITIES

   Each page gets its own hue mix and its own motif, so the site reads as one
   system without any two pages opening on the same picture.
   ========================================================================== */

/* Home — warm apricot through to lilac, lit by rays from a point above the
   fold. The signature composition; every other page is a variation on it. */
.tm-home .hm-mesh {
    --atm-1: var(--s-apricot);
    --atm-2: var(--s-rose);
    --atm-3: var(--s-lilac);
    --atm-4: var(--s-cream);
    --atm-motif: conic-gradient(from 118deg at 50% -20%,
        transparent 0deg,   rgb(255 255 255 / .55) 16deg, transparent 26deg,
        transparent 40deg,  rgb(255 255 255 / .34) 48deg, transparent 58deg,
        transparent 74deg,  rgb(255 255 255 / .48) 82deg, transparent 94deg,
        transparent 108deg, rgb(255 255 255 / .3)  114deg, transparent 124deg);
    --atm-motif-size: 100% 100%;
}

/* About — warm and human, over concentric rings that arc up like a timeline */
.tm-about .hm-mesh {
    --atm-1: var(--s-apricot);
    --atm-2: var(--s-blush);
    --atm-3: var(--s-lavender);
    --atm-4: var(--s-cream);
    --atm-motif: repeating-radial-gradient(circle at 50% 118%,
        transparent 0 63px, var(--atm-line) 63px 64px);
    --atm-motif-size: 100% 100%;
}

/* Services + service detail — cooler and more technical, on an engineering grid */
.tm-services .hm-mesh,
.tm-service .hm-mesh {
    --atm-1: var(--s-lilac);
    --atm-2: var(--s-peach);
    --atm-3: var(--s-mint);
    --atm-4: var(--s-lavender);
    --atm-motif:
        linear-gradient(var(--atm-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--atm-line) 1px, transparent 1px);
    --atm-motif-size: 68px 68px;
}

/* Gallery — rose and lavender over a dot matrix, echoing the photo grid */
.tm-gallery .hm-mesh {
    --atm-1: var(--s-rose);
    --atm-2: var(--s-lavender);
    --atm-3: var(--s-peach);
    --atm-4: var(--s-blush);
    --atm-motif: radial-gradient(rgb(11 18 32 / .1) 1.3px, transparent 1.4px);
    --atm-motif-size: 24px 24px;
}

/* FAQ — mint-led and calm, on a fine diagonal hatch */
.tm-faq .hm-mesh {
    --atm-1: var(--s-mint);
    --atm-2: var(--s-cream);
    --atm-3: var(--s-lavender);
    --atm-4: var(--s-peach);
    --atm-motif: repeating-linear-gradient(128deg,
        transparent 0 26px, var(--atm-line) 26px 27px);
    --atm-motif-size: 100% 100%;
}

/* Contact + appointment — peach and lilac over vertical columns, picking up
   the rhythm of the form fields below */
.tm-contact .hm-mesh,
.tm-appointment .hm-mesh {
    --atm-1: var(--s-peach);
    --atm-2: var(--s-lilac);
    --atm-3: var(--s-blush);
    --atm-4: var(--s-cream);
    --atm-motif: linear-gradient(90deg, var(--atm-line) 1px, transparent 1px);
    --atm-motif-size: 92px 100%;
}

/* Blog + post — paper-warm, on editorial baseline rules */
.tm-blog .hm-mesh,
.tm-post .hm-mesh {
    --atm-1: var(--s-cream);
    --atm-2: var(--s-blush);
    --atm-3: var(--s-lavender);
    --atm-4: var(--s-peach);
    --atm-motif: linear-gradient(var(--atm-line) 1px, transparent 1px);
    --atm-motif-size: 100% 34px;
}

/* ==========================================================================
   BLOOM — the same idea at a much lower dose, for white mid-page sections
   ========================================================================== */

.hm-bloom { position: relative; overflow: hidden; }

/* Same cores-outside rule as the hero pools, and for a sharper reason: these
   sections put ordinary body copy straight onto the bloom, so --s-ink-3 has
   to keep 4.5:1 over it — a constraint the hero escapes by stepping its
   muted text up to --s-ink-2. Worst case here is 4.85:1. */
.hm-bloom::before,
.hm-bloom::after {
    content: "";
    position: absolute;
    width: 118%;
    height: 138%;
    pointer-events: none;
    z-index: 0;
    /* No blur filter — the gradient below already has a soft edge */
}

/* core at (-12%, -10%) */
.hm-bloom::before {
    top: -70%; left: -60%;
    background: radial-gradient(ellipse closest-side, var(--s-apricot), transparent);
    opacity: .6;
}

/* core at (112%, 110%) */
.hm-bloom::after {
    bottom: -70%; right: -60%;
    background: radial-gradient(ellipse closest-side, var(--s-rose), transparent);
    opacity: .46;
}

.hm-bloom > * { position: relative; z-index: 1; }

/* ==========================================================================
   LAYOUT
   ========================================================================== */

.hm-wrap { max-width: 1180px; margin-inline: auto; padding-inline: 1.5rem; }
.hm-narrow { max-width: 640px; margin-inline: auto; }

.hm-sec { position: relative; padding-block: clamp(4rem, 3rem + 5vw, 7.5rem); }
.hm-sec--sm { padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem); }

/* Cool canvas band. Every page has a long run of white sections in the
   middle where nothing but the cards carries any colour, and that run is
   most of what read as "washed out" at full-page scale. This breaks it with
   a tone rather than another tint — a tinted band that far from the hero
   would compete with the cards sitting on it. White cards gain a visible
   edge against it for free. */
.hm-sec--canvas {
    background: var(--s-canvas);
    border-block: 1px solid var(--s-line-2);
}

/* Runs of adjacent canvas sections read as one band, not three stripes */
.hm-sec--canvas + .hm-sec--canvas { border-top: 0; }

/* Bare white cards need a heavier edge here than they do on paper */
.hm-sec--canvas .hm-quote,
.hm-sec--canvas .hm-svc,
.hm-sec--canvas .ab-member,
.hm-sec--canvas .sv-card { border-color: var(--s-line-2); }

.hm-center { text-align: center; }
.hm-center .hm-sub { margin-left: auto; margin-right: auto; }

.hm-head { margin-bottom: clamp(2.5rem, 2rem + 2vw, 3.75rem); }
.hm-head .hm-sub { margin-top: 1rem; max-width: 40ch; }

/* ==========================================================================
   HERO
   ========================================================================== */

/* Every hero shares one shell. The base is a warm wash that resolves to pure
   white well before the lower edge, so whatever the atmosphere paints on top
   has clean paper to fall away into — the section then meets the page with no
   seam at all. All the colour arrives from .hm-mesh; nothing here is
   page-specific except the padding. */
.hm-hero, .ab-hero, .sv-hero, .gl-hero, .fq-hero, .fm-hero, .bl-hero {
    position: relative;
    overflow: hidden;
    background: radial-gradient(128% 82% at 50% 2%, #ffe3bf 0%, #fff1dd 44%, #fffaf3 78%);
}

/* Muted text sitting on the coloured field steps up one level of ink. On
   white --s-ink-3 clears 4.5:1 comfortably; over the pools it does not, and
   diluting the pools until it does is what left the old hero pastel. Darker
   type on a richer field is the better trade in both directions. */
.hm-hero .hm-sub, .ab-hero .hm-sub, .sv-hero .hm-sub, .gl-hero .hm-sub,
.fq-hero .hm-sub, .fm-hero .hm-sub, .bl-hero .hm-sub {
    color: var(--s-ink-2);
}

/* Same reason: the brand orange is a 2.3:1 mark on white, so the small icons
   riding on the field use the dark cut instead. */
.hm-hero .hm-trust i, .ab-hero .hm-trust i, .sv-hero .hm-trust i,
.gl-hero .hm-trust i, .fq-hero .hm-trust i, .fm-hero .hm-trust i,
.bl-hero .hm-trust i { color: var(--s-orange-d); }

/* ==========================================================================
   CLOSING BAND — the dark anchor

   Every page now ends on the same deep navy field before the footer. Ten
   screens of white and pale tint need something to land on, and a
   full-strength dark band is the cheapest way to make a light page read as
   deliberate rather than unfinished.

   The mesh is kept but inverted in role: on white it is colour laid over
   paper and held back by a scrim, here it is colour laid over ink with
   `screen`, so the same five pools read as a lit atmosphere behind the type.
   ========================================================================== */

.hm-cta, .ab-cta, .sv-cta, .gl-cta, .fq-cta, .bl-cta {
    position: relative;
    overflow: hidden;
    background: radial-gradient(120% 100% at 50% 100%,
        var(--s-navy-3) 0%, var(--s-navy-2) 42%, var(--s-navy) 100%);
    color: #fff;
}

/* Hairline so the band separates cleanly from the white section above it */
.hm-cta::before, .ab-cta::before, .sv-cta::before,
.gl-cta::before, .fq-cta::before, .bl-cta::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgb(246 147 30 / .5), transparent);
    z-index: 3;
}

/* Pools rise from the footer edge rather than falling from the header. The
   scrim and veil are switched off outright — both paint white, and there is
   no white here for them to resolve into. */
.hm-cta .hm-mesh, .ab-cta .hm-mesh, .sv-cta .hm-mesh,
.gl-cta .hm-mesh, .fq-cta .hm-mesh, .bl-cta .hm-mesh {
    transform: scaleY(-1);
    opacity: .3;
    mix-blend-mode: screen;
    --atm-veil: none;
    --atm-scrim: none;
    --atm-line: rgb(255 255 255 / .05);
}

/* ::after would otherwise be left painting two `none` layers and lose the
   grain along with them, so it is respecified here as grain only. */
.hm-cta .hm-mesh::after, .ab-cta .hm-mesh::after, .sv-cta .hm-mesh::after,
.gl-cta .hm-mesh::after, .fq-cta .hm-mesh::after, .bl-cta .hm-mesh::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
    background-size: 160px 160px;
    background-repeat: repeat;
}

.hm-cta .hm-serif, .ab-cta .hm-serif, .sv-cta .hm-serif,
.gl-cta .hm-serif, .fq-cta .hm-serif, .bl-cta .hm-serif { color: #fff; }

/* On ink the dark cut of the orange disappears; the bright value is the
   legible one here and it is the only saturated mark in the band, so it
   carries the whole accent. */
.hm-cta .hm-em, .ab-cta .hm-em, .sv-cta .hm-em,
.gl-cta .hm-em, .fq-cta .hm-em, .bl-cta .hm-em { color: var(--s-orange-l); }

.hm-cta .hm-sub, .ab-cta .hm-sub, .sv-cta .hm-sub, .gl-cta .hm-sub,
.fq-cta .hm-sub, .bl-cta .hm-sub { color: var(--s-on-navy); }

.hm-cta .hm-text, .ab-cta .hm-text, .sv-cta .hm-text, .gl-cta .hm-text,
.fq-cta .hm-text, .bl-cta .hm-text { color: var(--s-on-navy-2); }

.hm-cta .hm-trust span, .ab-cta .hm-trust span, .sv-cta .hm-trust span,
.gl-cta .hm-trust span, .fq-cta .hm-trust span,
.bl-cta .hm-trust span { color: var(--s-on-navy-2); }

.hm-cta .hm-trust i, .ab-cta .hm-trust i, .sv-cta .hm-trust i,
.gl-cta .hm-trust i, .fq-cta .hm-trust i,
.bl-cta .hm-trust i { color: var(--s-orange); }

/* Buttons invert. A dark pill has nothing to contrast against on ink, so the
   primary becomes the brand orange and the secondary a ghost outline. */
.hm-cta .hm-btn--dark, .ab-cta .hm-btn--dark, .sv-cta .hm-btn--dark,
.gl-cta .hm-btn--dark, .fq-cta .hm-btn--dark, .bl-cta .hm-btn--dark {
    background: var(--s-orange);
    border-color: var(--s-orange);
    color: var(--s-navy) !important;
    box-shadow: 0 6px 20px rgb(246 147 30 / .3);
}

.hm-cta .hm-btn--dark:hover, .ab-cta .hm-btn--dark:hover, .sv-cta .hm-btn--dark:hover,
.gl-cta .hm-btn--dark:hover, .fq-cta .hm-btn--dark:hover, .bl-cta .hm-btn--dark:hover {
    background: var(--s-orange-l);
    border-color: var(--s-orange-l);
    box-shadow: 0 10px 28px rgb(246 147 30 / .4);
}

.hm-cta .hm-btn--soft, .ab-cta .hm-btn--soft, .sv-cta .hm-btn--soft,
.gl-cta .hm-btn--soft, .fq-cta .hm-btn--soft, .bl-cta .hm-btn--soft {
    background: rgb(255 255 255 / .07);
    border-color: rgb(255 255 255 / .28);
    color: #fff !important;
    box-shadow: none;
}

.hm-cta .hm-btn--soft:hover, .ab-cta .hm-btn--soft:hover, .sv-cta .hm-btn--soft:hover,
.gl-cta .hm-btn--soft:hover, .fq-cta .hm-btn--soft:hover, .bl-cta .hm-btn--soft:hover {
    background: rgb(255 255 255 / .14);
    border-color: rgb(255 255 255 / .45);
}

.hm-cta .hm-pill, .ab-cta .hm-pill, .sv-cta .hm-pill,
.gl-cta .hm-pill, .fq-cta .hm-pill, .bl-cta .hm-pill {
    background: rgb(255 255 255 / .09);
    border-color: rgb(255 255 255 / .2);
    color: var(--s-on-navy);
    box-shadow: none;
}

.hm-cta .hm-pill:hover, .ab-cta .hm-pill:hover, .sv-cta .hm-pill:hover,
.gl-cta .hm-pill:hover, .fq-cta .hm-pill:hover, .bl-cta .hm-pill:hover {
    background: rgb(255 255 255 / .16);
    color: #fff;
}

.hm-cta .hm-alink, .ab-cta .hm-alink, .sv-cta .hm-alink,
.gl-cta .hm-alink, .fq-cta .hm-alink,
.bl-cta .hm-alink { color: var(--s-on-navy); }

.hm-cta .hm-alink:hover, .ab-cta .hm-alink:hover, .sv-cta .hm-alink:hover,
.gl-cta .hm-alink:hover, .fq-cta .hm-alink:hover,
.bl-cta .hm-alink:hover { color: #fff; }

.hm-hero {
    padding-top: clamp(3rem, 2rem + 4vw, 5rem);
    padding-bottom: clamp(3.5rem, 2.5rem + 4vw, 5.5rem);
}

.hm-hero > .hm-wrap { position: relative; z-index: 1; }

.hm-hero .hm-display { margin-top: 1.5rem; }
.hm-hero .hm-sub { margin-top: 1.25rem; max-width: 42ch; }

.hm-hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2rem; }

/* Inline trust marks */
.hm-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 2rem;
    margin-top: 2rem;
}

.hm-trust span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8125rem;
    color: var(--s-ink-3);
}

.hm-trust i { color: var(--s-orange); font-size: .9em; }

/* ==========================================================================
   HERO PANEL — soft floating card
   ========================================================================== */

.hm-panel-wrap { margin-top: clamp(2.5rem, 2rem + 2vw, 3.75rem); display: flex; justify-content: center; }

.hm-panel {
    width: min(520px, 100%);
    background: rgb(255 255 255 / .82);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid rgb(255 255 255 / .9);
    border-radius: 22px;
    box-shadow:
        0 1px 1px rgb(11 18 32 / .04),
        0 4px 8px rgb(11 18 32 / .04),
        0 12px 24px -8px rgb(11 18 32 / .08),
        0 32px 64px -24px rgb(11 18 32 / .22);
    overflow: hidden;
}

.hm-panel-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .95rem 1.25rem;
    border-bottom: 1px solid var(--s-line);
}

.hm-panel-title { font-size: .875rem; font-weight: 600; letter-spacing: -.01em; margin: 0; color: var(--s-ink); }

.hm-tag {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .28rem .65rem;
    font-size: .6875rem;
    font-weight: 600;
    border-radius: 999px;
    color: var(--s-teal);
    background: var(--t-mint);
}

.hm-panel-body { padding: .5rem 1.25rem; }

.hm-krow { display: flex; align-items: center; gap: .75rem; padding: .8rem 0; border-bottom: 1px solid var(--s-line); }
.hm-krow:last-child { border-bottom: 0; }

.hm-tick {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1.5px solid var(--s-line-2);
    background: #fff;
    color: transparent;
    font-size: .62rem;
    transition: background-color .35s var(--tm-ease), border-color .35s var(--tm-ease), color .35s var(--tm-ease);
    transition-delay: var(--hm-tick, 0ms);
}

.is-live .hm-tick { background: var(--s-teal-2); border-color: var(--s-teal-2); color: #fff; }

.hm-krow-label { flex: 1 1 auto; font-size: .8438rem; font-weight: 500; color: var(--s-ink-2); min-width: 0; }
.hm-krow-meta { font-size: .75rem; color: var(--s-ink-3); flex: 0 0 auto; }

.hm-panel-foot { padding: 1.15rem 1.25rem; border-top: 1px solid var(--s-line); background: rgb(250 250 250 / .6); }

.hm-prog-top { display: flex; justify-content: space-between; font-size: .8125rem; color: var(--s-ink-2); margin-bottom: .6rem; }
.hm-prog-top b { color: var(--s-ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.hm-prog { height: 6px; border-radius: 999px; background: var(--s-line); overflow: hidden; }

.hm-prog span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--s-orange), #ffb457);
    transition: width 1.4s var(--tm-ease-out) .3s;
}

.is-live .hm-prog span { width: var(--hm-fill, 78%); }

/* ==========================================================================
   TINTED FEATURE CARDS
   ========================================================================== */

.hm-tints { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }

.hm-tint {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    border-radius: 20px;
    background: var(--_t, var(--t-lilac));
    text-align: center;
    transition: transform .3s var(--tm-ease), box-shadow .3s var(--tm-ease);
}

.hm-tint:hover { transform: translateY(-5px); box-shadow: 0 2px 4px rgb(11 18 32 / .04), 0 12px 24px -10px rgb(11 18 32 / .12), 0 28px 56px -24px rgb(11 18 32 / .24); }

.hm-tint:nth-child(1) { --_t: var(--t-lilac); }
.hm-tint:nth-child(2) { --_t: var(--t-blush); }
.hm-tint:nth-child(3) { --_t: var(--t-cream); }

/* Mini widget that sits inside the tinted card */
.hm-widget {
    background: #fff;
    border-radius: 14px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    text-align: left;
    box-shadow: 0 4px 14px rgb(11 18 32 / .06);
}

.hm-widget-top { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }

.hm-widget-ico {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 9px;
    font-size: .85rem;
    color: var(--s-orange-d);
    background: var(--t-cream);
}

.hm-widget-name { font-size: .8125rem; font-weight: 600; color: var(--s-ink); margin: 0; line-height: 1.2; }
.hm-widget-meta { font-size: .6875rem; color: var(--s-ink-3); margin: .15rem 0 0; }

/* Small bar chart / track inside the widget */
.hm-track { display: flex; align-items: flex-end; gap: 4px; height: 34px; }

.hm-track i {
    flex: 1 1 auto;
    border-radius: 3px;
    background: var(--s-line);
    height: var(--h, 40%);
    display: block;
}

.hm-track i.on { background: var(--s-orange); }

.hm-days { display: flex; justify-content: space-between; margin-top: .5rem; font-size: .5625rem; color: var(--s-ink-3); }

.hm-tint-title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.015em; color: var(--s-ink); margin: 0 0 .4rem; }
.hm-tint-text { font-size: .8125rem; line-height: 1.6; color: var(--s-ink-3); margin: 0; }

@media (max-width: 767.98px) { .hm-tints { grid-template-columns: 1fr; } }

/* ==========================================================================
   BORDERED GRID (reference 2)
   ========================================================================== */

.hm-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--s-line);
    background: var(--s-line);
    gap: 1px;
    border-radius: 16px;
    overflow: hidden;
}

.hm-gcell {
    background: var(--s-off);
    padding: clamp(1.75rem, 1.5rem + 1vw, 2.5rem) 1.5rem;
    text-align: center;
    transition: background-color .22s var(--tm-ease);
}

.hm-gcell:hover { background: #fff; }

.hm-gico {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 1.15rem;
    border-radius: 12px;
    font-size: 1.2rem;
    color: var(--s-ink);
    background: #fff;
    border: 1px solid var(--s-line);
    transition: color .22s var(--tm-ease), border-color .22s var(--tm-ease);
}

.hm-gcell:hover .hm-gico { color: var(--s-orange-d); border-color: var(--s-orange); }

.hm-gtitle { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.015em; color: var(--s-ink); margin: 0 0 .45rem; }
.hm-gtext { font-size: .8438rem; line-height: 1.58; color: var(--s-ink-3); margin: 0; }

@media (max-width: 991.98px) { .hm-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .hm-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   SERVICES
   ========================================================================== */

.hm-svcs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }

.hm-svc {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid var(--s-line);
    border-radius: 20px;
    text-decoration: none;
    transition: transform .3s var(--tm-ease), box-shadow .3s var(--tm-ease), border-color .3s var(--tm-ease);
}

.hm-svc:hover {
    transform: translateY(-5px);
    border-color: transparent;
    box-shadow: 0 2px 4px rgb(11 18 32 / .04), 0 12px 24px -10px rgb(11 18 32 / .12), 0 28px 56px -24px rgb(11 18 32 / .24);
}

.hm-svc-plate {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 128px;
    margin-bottom: 1.25rem;
    border-radius: 14px;
    background: var(--_t, var(--t-cream));
}

.hm-svc:nth-child(3n+1) .hm-svc-plate { --_t: var(--t-cream); }
.hm-svc:nth-child(3n+2) .hm-svc-plate { --_t: var(--t-lilac); }
.hm-svc:nth-child(3n+3) .hm-svc-plate { --_t: var(--t-blush); }

.hm-svc-plate img {
    max-width: 72%;
    max-height: 70%;
    width: auto;
    height: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform .4s var(--tm-ease-out);
}

.hm-svc:hover .hm-svc-plate img { transform: scale(1.05); }

.hm-svc-title { font-size: 1rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.35; color: var(--s-ink); margin: 0 0 .4rem; }
.hm-svc-text { font-size: .8125rem; line-height: 1.6; color: var(--s-ink-3); margin: 0 0 1rem; flex: 1 1 auto; }

.hm-svc-more { display: inline-flex; align-items: center; gap: .35rem; font-size: .8125rem; font-weight: 600; color: var(--s-ink); }
.hm-svc-more i { transition: transform .25s var(--tm-ease); }
.hm-svc:hover .hm-svc-more i { transform: translateX(3px); }

@media (max-width: 991.98px) { .hm-svcs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .hm-svcs { grid-template-columns: 1fr; } }

/* ==========================================================================
   PROCESS
   ========================================================================== */

.hm-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }

.hm-step {
    padding: 1.75rem;
    border-radius: 20px;
    background: var(--_t, var(--t-cream));
    transition: transform .3s var(--tm-ease), box-shadow .3s var(--tm-ease);
}

.hm-step:hover { transform: translateY(-5px); box-shadow: 0 2px 4px rgb(11 18 32 / .04), 0 12px 24px -10px rgb(11 18 32 / .12), 0 28px 56px -24px rgb(11 18 32 / .24); }

.hm-step:nth-child(1) { --_t: var(--t-cream); }
.hm-step:nth-child(2) { --_t: var(--t-lilac); }
.hm-step:nth-child(3) { --_t: var(--t-mint); }

.hm-step-k {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: 1.25rem;
    border-radius: 12px;
    background: #fff;
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 1.125rem;
    color: var(--s-ink);
    box-shadow: 0 3px 10px rgb(11 18 32 / .06);
}

.hm-step-title { font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; color: var(--s-ink); margin: 0 0 .5rem; }
.hm-step-text { font-size: .8438rem; line-height: 1.62; color: var(--s-ink-2); margin: 0; }

@media (max-width: 767.98px) { .hm-steps { grid-template-columns: 1fr; } }

/* ==========================================================================
   STATS
   ========================================================================== */

.hm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }

.hm-stat {
    padding: 1.75rem 1.25rem;
    text-align: center;
    border-radius: 18px;
    background: rgb(255 255 255 / .66);
    border: 1px solid rgb(255 255 255 / .85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 10px rgb(11 18 32 / .04);
}

.hm-stat-num {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3rem);
    line-height: 1;
    color: var(--s-ink);
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.hm-stat-num sup { font-size: .4em; top: -.9em; color: var(--s-orange); margin-left: .05em; }
.hm-stat-label { font-size: .8125rem; color: var(--s-ink-3); margin: .65rem 0 0; }

@media (max-width: 767.98px) { .hm-stats { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   MARQUEE
   ========================================================================== */

/* Scaled up alongside the logo rows so the label does not read as an
   afterthought next to them */
.hm-strip-label {
    text-align: center;
    font-size: .9375rem;
    font-weight: 500;
    color: var(--s-ink-2);
    margin: 0 0 2rem;
}

.hm-marquee {
    position: relative;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.hm-marquee-track {
    display: flex;
    align-items: center;
    gap: clamp(2rem, 1rem + 3vw, 4rem);
    width: max-content;
    animation: hm-scroll var(--hm-speed, 55s) linear infinite;
}

.hm-marquee:hover .hm-marquee-track { animation-play-state: paused; }
.hm-marquee--rtl .hm-marquee-track { animation-direction: reverse; }

@keyframes hm-scroll {
    from { transform: translate3d(0,0,0); }
    to   { transform: translate3d(-50%,0,0); }
}

.hm-marquee-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(150px, 12vw, 196px);
    height: clamp(62px, 5vw, 84px);
    flex: 0 0 auto;
}

.hm-marquee-item img {
    /* height-driven with width:auto, so the element box matches the painted
       image rather than the wider flex cell. That is what lets the radius
       below actually land on the artwork. Sources range from 64x81 to
       2000x2000, so max-width keeps the wide ones inside their cell. */
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    border-radius: 10px;
    /* Most of these are JPEGs on a white matte, so multiply is what drops the
       white box and lets the mark sit on the section. Both strips run on
       plain white sections, so it leaves the brand colours untouched. */
    mix-blend-mode: multiply;
    transition: transform .25s var(--tm-ease);
}

/* Colour is the default now, so hover lifts rather than un-greys */
.hm-marquee-item:hover img { transform: scale(1.06); }

/* ==========================================================================
   TESTIMONIALS
   Owl ships `.owl-carousel .owl-item img { width:100% }` at specificity 0,2,1
   — it must be out-specified or avatars stretch to the full card width.
   ========================================================================== */

.hm-quote {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.75rem;
    background: #fff;
    border: 1px solid var(--s-line);
    border-radius: 20px;
    transition: transform .3s var(--tm-ease), box-shadow .3s var(--tm-ease), border-color .3s var(--tm-ease);
}

.hm-quote:hover { transform: translateY(-5px); border-color: transparent; box-shadow: 0 2px 4px rgb(11 18 32 / .04), 0 12px 24px -10px rgb(11 18 32 / .12), 0 28px 56px -24px rgb(11 18 32 / .24); }

.hm-stars { display: flex; gap: .1rem; margin-bottom: 1rem; color: var(--s-orange); font-size: .8125rem; }

.hm-quote-text { flex: 1 1 auto; font-size: .875rem; line-height: 1.7; color: var(--s-ink-2); margin: 0 0 1.5rem; }

.hm-quote-by { display: flex; align-items: center; gap: .7rem; padding-top: 1.15rem; border-top: 1px solid var(--s-line); }

.tm-home .owl-carousel .owl-item .hm-quote-by img,
.tm-about .owl-carousel .owl-item .hm-quote-by img,
.tm-services .owl-carousel .owl-item .hm-quote-by img,
.tm-service .owl-carousel .owl-item .hm-quote-by img,
.hm-quote-by img {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    display: block;
    background: var(--s-off);
    border: 1px solid var(--s-line);
}

.hm-quote-mono {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 50%;
    font-size: .875rem;
    font-weight: 600;
    color: var(--s-ink);
    background: var(--t-lilac);
}

.hm-quote-meta { min-width: 0; }
.hm-quote-name { font-size: .8438rem; font-weight: 600; color: var(--s-ink); margin: 0; line-height: 1.3; }
.hm-quote-role { font-size: .75rem; color: var(--s-ink-3); margin: .1rem 0 0; line-height: 1.3; }

.tm-home .tm-carousel .owl-stage,
.tm-about .tm-carousel .owl-stage,
.tm-services .tm-carousel .owl-stage,
.tm-service .tm-carousel .owl-stage,
.tm-gallery .tm-carousel .owl-stage,
.tm-faq .tm-carousel .owl-stage,
.tm-contact .tm-carousel .owl-stage,
.tm-appointment .tm-carousel .owl-stage,
.tm-blog .tm-carousel .owl-stage,
.tm-post .tm-carousel .owl-stage { display: flex; }
.tm-home .tm-carousel .owl-item,
.tm-about .tm-carousel .owl-item,
.tm-services .tm-carousel .owl-item,
.tm-service .tm-carousel .owl-item,
.tm-gallery .tm-carousel .owl-item,
.tm-faq .tm-carousel .owl-item,
.tm-contact .tm-carousel .owl-item,
.tm-appointment .tm-carousel .owl-item,
.tm-blog .tm-carousel .owl-item,
.tm-post .tm-carousel .owl-item { display: flex; height: auto; }
.tm-home .tm-carousel .owl-item > .item,
.tm-about .tm-carousel .owl-item > .item,
.tm-services .tm-carousel .owl-item > .item,
.tm-service .tm-carousel .owl-item > .item,
.tm-gallery .tm-carousel .owl-item > .item,
.tm-faq .tm-carousel .owl-item > .item,
.tm-contact .tm-carousel .owl-item > .item,
.tm-appointment .tm-carousel .owl-item > .item,
.tm-blog .tm-carousel .owl-item > .item,
.tm-post .tm-carousel .owl-item > .item { display: flex; width: 100%; }
.tm-home .tm-carousel .owl-dot span,
.tm-about .tm-carousel .owl-dot span,
.tm-services .tm-carousel .owl-dot span,
.tm-service .tm-carousel .owl-dot span,
.tm-gallery .tm-carousel .owl-dot span,
.tm-faq .tm-carousel .owl-dot span,
.tm-contact .tm-carousel .owl-dot span,
.tm-appointment .tm-carousel .owl-dot span,
.tm-blog .tm-carousel .owl-dot span,
.tm-post .tm-carousel .owl-dot span { background: var(--s-line-2) !important; }
.tm-home .tm-carousel .owl-dot.active span,
.tm-about .tm-carousel .owl-dot.active span,
.tm-services .tm-carousel .owl-dot.active span,
.tm-service .tm-carousel .owl-dot.active span,
.tm-gallery .tm-carousel .owl-dot.active span,
.tm-faq .tm-carousel .owl-dot.active span,
.tm-contact .tm-carousel .owl-dot.active span,
.tm-appointment .tm-carousel .owl-dot.active span,
.tm-blog .tm-carousel .owl-dot.active span,
.tm-post .tm-carousel .owl-dot.active span { background: var(--s-orange) !important; }

/* ==========================================================================
   CREDENTIALS
   ========================================================================== */

.hm-creds { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(2rem, 1rem + 4vw, 4.5rem); }

/* No hover state: these are credential marks, not links, so there is nothing
   to afford — and leaving the image untransformed keeps `multiply` blending
   against the section rather than a fresh stacking context. */
.hm-creds img {
    height: clamp(56px, 4.6vw, 80px);
    width: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
}

/* ==========================================================================
   CTA
   ========================================================================== */

/* Shell (position, overflow, background) comes from the shared hero/CTA rule */
.hm-cta { padding-block: clamp(4rem, 3rem + 5vw, 7rem); }

.hm-cta > .hm-wrap { position: relative; z-index: 1; }

/* ==========================================================================
   OFFICES — restyles the shared include, home only
   ========================================================================== */

.tm-home .headquarter-card,
.tm-about .headquarter-card,
.tm-services .headquarter-card,
.tm-service .headquarter-card,
.tm-gallery .headquarter-card,
.tm-faq .headquarter-card,
.tm-contact .headquarter-card,
.tm-appointment .headquarter-card,
.tm-blog .headquarter-card,
.tm-post .headquarter-card {
    background: #fff !important;
    border: 1px solid var(--s-line) !important;
    border-radius: 20px !important;
    letter-spacing: 0 !important;
    height: 100%;
    transition: transform .3s var(--tm-ease), box-shadow .3s var(--tm-ease), border-color .3s var(--tm-ease);
}

.tm-home .headquarter-card:hover,
.tm-about .headquarter-card:hover,
.tm-services .headquarter-card:hover,
.tm-service .headquarter-card:hover,
.tm-gallery .headquarter-card:hover,
.tm-faq .headquarter-card:hover,
.tm-contact .headquarter-card:hover,
.tm-appointment .headquarter-card:hover,
.tm-blog .headquarter-card:hover,
.tm-post .headquarter-card:hover {
    transform: translateY(-5px);
    border-color: transparent !important;
    box-shadow: 0 2px 4px rgb(11 18 32 / .04), 0 12px 24px -10px rgb(11 18 32 / .12), 0 28px 56px -24px rgb(11 18 32 / .24);
}

.tm-home .headquarter-card h4,
.tm-about .headquarter-card h4,
.tm-services .headquarter-card h4,
.tm-service .headquarter-card h4,
.tm-gallery .headquarter-card h4,
.tm-faq .headquarter-card h4,
.tm-contact .headquarter-card h4,
.tm-appointment .headquarter-card h4,
.tm-blog .headquarter-card h4,
.tm-post .headquarter-card h4 {
    font-family: 'Instrument Serif', Georgia, serif !important;
    font-size: 1.25rem !important;
    font-weight: 400 !important;
    letter-spacing: -.01em !important;
    color: var(--s-ink) !important;
}

.tm-home .headquarter-card h4 i,
.tm-about .headquarter-card h4 i,
.tm-services .headquarter-card h4 i,
.tm-service .headquarter-card h4 i,
.tm-gallery .headquarter-card h4 i,
.tm-faq .headquarter-card h4 i,
.tm-contact .headquarter-card h4 i,
.tm-appointment .headquarter-card h4 i,
.tm-blog .headquarter-card h4 i,
.tm-post .headquarter-card h4 i { color: var(--s-orange); font-size: .85em; }

.tm-home .headquarter-card h5,
.tm-about .headquarter-card h5,
.tm-services .headquarter-card h5,
.tm-service .headquarter-card h5,
.tm-gallery .headquarter-card h5,
.tm-faq .headquarter-card h5,
.tm-contact .headquarter-card h5,
.tm-appointment .headquarter-card h5,
.tm-blog .headquarter-card h5,
.tm-post .headquarter-card h5 {
    font-size: .8438rem !important;
    line-height: 1.6;
    letter-spacing: 0 !important;
    color: var(--s-ink-3) !important;
    margin-bottom: .3rem !important;
}

/* ==========================================================================
   REVEAL — GSAP owns these at runtime; this is the no-GSAP fallback
   ========================================================================== */

.js .hm-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s var(--tm-ease-out), transform .7s var(--tm-ease-out);
    transition-delay: var(--hm-delay, 0ms);
}

.js .hm-reveal.is-visible { opacity: 1; transform: none; transition-delay: 0ms; }

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .hm-marquee-track, .hm-mesh span { animation: none !important; }
    .js .hm-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    .hm-prog span, .hm-tick { transition: none !important; }
}

/* ==========================================================================
   PROSE — rich-text output (service detail, blog detail)
   The stored HTML is p / h1–h3 / strong / em / ul / li / br / a / img, with
     used for spacing. These rules make that render cleanly.
   ========================================================================== */

.hm-prose {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--s-ink-2);
    overflow-wrap: break-word;
}

.hm-prose > *:first-child { margin-top: 0; }
.hm-prose > *:last-child { margin-bottom: 0; }

.hm-prose p { margin: 0 0 1.15rem; }

/* Editors used h1 inside the body; the page already has its own h1, so this
   is styled down to sit correctly in the visual hierarchy. */
.hm-prose h1,
.hm-prose h2 {
    font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400;
    font-size: clamp(1.5rem, 1.2rem + 1vw, 1.95rem);
    line-height: 1.2;
    letter-spacing: -.012em;
    color: var(--s-ink);
    margin: 2.5rem 0 .9rem;
}

.hm-prose h3,
.hm-prose h4 {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--s-ink);
    margin: 2rem 0 .7rem;
}

.hm-prose h5, .hm-prose h6 {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--s-ink);
    margin: 1.75rem 0 .6rem;
}

.hm-prose strong, .hm-prose b { color: var(--s-ink); font-weight: 600; }
.hm-prose em, .hm-prose i { font-style: italic; }

.hm-prose ul, .hm-prose ol { margin: 0 0 1.25rem; padding-left: 1.35rem; }
.hm-prose li { margin-bottom: .5rem; }
.hm-prose ul > li::marker { color: var(--s-orange); }
.hm-prose ol > li::marker { color: var(--s-orange-d); font-weight: 600; }

.hm-prose a {
    color: var(--s-orange-d);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.hm-prose a:hover { color: var(--s-ink); }

.hm-prose img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
    margin: 1.5rem 0;
    display: block;
}

.hm-prose blockquote {
    margin: 1.75rem 0;
    padding: 1rem 1.35rem;
    background: var(--t-cream);
    border-left: 3px solid var(--s-orange);
    border-radius: 0 12px 12px 0;
    color: var(--s-ink);
}

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

.hm-prose hr { border: 0; height: 1px; background: var(--s-line); margin: 2rem 0; }

/* Wide content must scroll inside itself, never widen the page */
.hm-prose table {
    width: 100%;
    margin: 1.5rem 0;
    border-collapse: collapse;
    font-size: .9063rem;
}

.hm-prose th, .hm-prose td { padding: .7rem .9rem; border: 1px solid var(--s-line); text-align: left; }
.hm-prose th { background: var(--s-off); font-weight: 600; color: var(--s-ink); }

.hm-prose-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Collapse the runs of empty spacer paragraphs the editor left behind */
.hm-prose p:empty { display: none; }

/* ==========================================================================
   SPOTLIGHT — two featured services given full-width treatment
   ========================================================================== */

.hm-spot-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

@media (max-width: 991.98px) { .hm-spot-grid { grid-template-columns: 1fr; } }

.hm-spot {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(1.5rem, 1.25rem + 1.5vw, 2.25rem);
    border-radius: 26px;
    background: var(--_t, var(--t-cream));
    transition: transform .3s var(--tm-ease), box-shadow .3s var(--tm-ease);
}

.hm-spot:hover {
    transform: translateY(-5px);
    box-shadow: 0 2px 4px rgb(11 18 32 / .04),
                0 14px 28px -12px rgb(11 18 32 / .14),
                0 32px 64px -28px rgb(11 18 32 / .26);
}

.hm-spot--a { --_t: var(--t-cream); }
.hm-spot--b { --_t: var(--t-mint); }

/* Logo sits on a white plate so third-party marks keep their own colours */
.hm-spot-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 96px;
    margin-bottom: 1.5rem;
    padding: 1rem 1.35rem;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 3px 12px rgb(11 18 32 / .06);
    align-self: flex-start;
}

.hm-spot-logo img {
    max-height: 100%;
    max-width: 190px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.hm-spot-kicker {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--s-orange-d);
    margin: 0 0 .6rem;
}

.hm-spot--b .hm-spot-kicker { color: var(--s-teal); }

.hm-spot-title {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
    font-weight: 400;
    line-height: 1.14;
    letter-spacing: -.012em;
    color: var(--s-ink);
    margin: 0 0 .75rem;
}

.hm-spot-text {
    font-size: .9375rem;
    line-height: 1.68;
    color: var(--s-ink-2);
    margin: 0 0 1.5rem;
}

/* Two-column tick list of what the service covers */
.hm-spot-list {
    list-style: none;
    margin: 0 0 1.75rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem 1rem;
    flex: 1 1 auto;
}

@media (max-width: 575.98px) { .hm-spot-list { grid-template-columns: 1fr; } }

.hm-spot-list li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .8438rem;
    line-height: 1.45;
    color: var(--s-ink-2);
}

.hm-spot-list i {
    color: var(--s-orange);
    font-size: .8rem;
    margin-top: .22rem;
    flex: 0 0 auto;
}

.hm-spot--b .hm-spot-list i { color: var(--s-teal); }

.hm-spot-actions { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ==========================================================================
   REDUCED MOTION — spotlight
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .hm-spot:hover { transform: none !important; }
}

/* ==========================================================================
   SEGMENTS — "which of these is you?"

   A radio group styled as tabs, with no JavaScript at all. Three reasons over
   a JS tab widget: every panel stays in the DOM so search engines index all
   three, the control keeps native radio keyboard behaviour (arrow keys move
   and select), and it cannot break if a script fails to load.

   The :checked rules below are positional (sg-r1/2/3 against :nth-child), so
   they depend on there being three segments but not on what the segments are
   called. HOMEPAGE_SEGMENTS in core/utils.py is the matching list.
   ========================================================================== */

.sg-tabs {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;   /* fieldset defaults to min-content, which breaks the grid */
}

.sg-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* --- the selector row --- */

.sg-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 767.98px) { .sg-nav { grid-template-columns: 1fr; gap: .5rem; } }

.sg-tab {
    /* style.css sets a global `label { text-transform: capitalize }` that the
       dashboard depends on, so it is overridden here rather than there. */
    text-transform: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .1rem;
    padding: 1rem 1.15rem;
    background: #fff;
    border: 1px solid var(--s-line);
    border-radius: 16px;
    cursor: pointer;
    transition: border-color .2s var(--tm-ease), box-shadow .2s var(--tm-ease),
                transform .2s var(--tm-ease), background-color .2s var(--tm-ease);
}

.sg-tab:hover { border-color: var(--s-line-2); transform: translateY(-2px); }

.sg-tab i {
    font-size: 1.15rem;
    color: var(--s-ink-3);
    margin-bottom: .35rem;
    transition: color .2s var(--tm-ease);
}

.sg-tab-name {
    font-size: .9688rem;
    font-weight: 650;
    letter-spacing: -.015em;
    color: var(--s-ink);
    line-height: 1.25;
}

.sg-tab-kicker { font-size: .75rem; color: var(--s-ink-3); line-height: 1.3; }

/* The radio itself is off-screen, so the focus ring has to be drawn on the
   label it controls — otherwise arrowing through the group gives a keyboard
   user no visible indication of where they are. */
.sg-r1:focus-visible ~ .sg-nav .sg-tab:nth-child(1),
.sg-r2:focus-visible ~ .sg-nav .sg-tab:nth-child(2),
.sg-r3:focus-visible ~ .sg-nav .sg-tab:nth-child(3) {
    outline: 2px solid var(--s-orange);
    outline-offset: 3px;
}

.sg-r1:checked ~ .sg-nav .sg-tab:nth-child(1),
.sg-r2:checked ~ .sg-nav .sg-tab:nth-child(2),
.sg-r3:checked ~ .sg-nav .sg-tab:nth-child(3) {
    background: var(--s-navy);
    border-color: var(--s-navy);
    box-shadow: 0 10px 26px rgb(11 18 32 / .22);
    transform: none;
}

.sg-r1:checked ~ .sg-nav .sg-tab:nth-child(1) .sg-tab-name,
.sg-r2:checked ~ .sg-nav .sg-tab:nth-child(2) .sg-tab-name,
.sg-r3:checked ~ .sg-nav .sg-tab:nth-child(3) .sg-tab-name { color: #fff; }

.sg-r1:checked ~ .sg-nav .sg-tab:nth-child(1) .sg-tab-kicker,
.sg-r2:checked ~ .sg-nav .sg-tab:nth-child(2) .sg-tab-kicker,
.sg-r3:checked ~ .sg-nav .sg-tab:nth-child(3) .sg-tab-kicker { color: var(--s-on-navy-2); }

.sg-r1:checked ~ .sg-nav .sg-tab:nth-child(1) i,
.sg-r2:checked ~ .sg-nav .sg-tab:nth-child(2) i,
.sg-r3:checked ~ .sg-nav .sg-tab:nth-child(3) i { color: var(--s-orange); }

/* --- the panels --- */

.sg-panel {
    display: none;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(1.5rem, 1rem + 3vw, 3.25rem);
    padding: clamp(1.5rem, 1.25rem + 1.5vw, 2.5rem);
    background: #fff;
    border: 1px solid var(--s-line);
    border-radius: 24px;
    box-shadow: 0 1px 2px rgb(11 18 32 / .04), 0 18px 40px -24px rgb(11 18 32 / .18);
}

@media (max-width: 991.98px) { .sg-panel { grid-template-columns: 1fr; } }

.sg-r1:checked ~ .sg-panels .sg-panel:nth-child(1),
.sg-r2:checked ~ .sg-panels .sg-panel:nth-child(2),
.sg-r3:checked ~ .sg-panels .sg-panel:nth-child(3) { display: grid; }

/* No JS, no scripting support, print: show every panel rather than one. The
   content is the point; the tabbing is only a convenience. */
@media print {
    .sg-nav { display: none; }
    .sg-panel { display: grid !important; margin-bottom: 1rem; }
}

.sg-badge {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    font-size: 1.2rem;
    color: var(--s-orange-d);
    background: var(--t-cream);
    margin-bottom: 1rem;
}

.sg-name {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -.012em;
    color: var(--s-ink);
    margin: 0 0 1.25rem;
}

/* The three questions the section has to answer, used as eyebrow labels */
.sg-label {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--s-orange-d);
    margin: 0 0 .5rem;
}

.sg-who {
    font-size: .9375rem;
    line-height: 1.68;
    color: var(--s-ink-2);
    margin: 0 0 1.25rem;
}

.sg-lede {
    font-size: .875rem;
    line-height: 1.7;
    color: var(--s-ink-3);
    margin: 0 0 1.5rem;
    padding-left: .9rem;
    border-left: 2px solid var(--t-cream);
}

.sg-outcomes { list-style: none; margin: 0; padding: 0; }

.sg-outcomes li {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--s-ink-2);
    margin-bottom: .55rem;
}

.sg-outcomes i { color: var(--s-orange); font-size: 1.15em; line-height: 1.3; flex: 0 0 auto; }

/* Spans the panel, below both columns */
.sg-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--s-line);
}

.sg-note {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-left: auto;
    font-size: .8125rem;
    color: var(--s-ink-3);
}

.sg-note i { color: var(--s-teal); }

@media (max-width: 767.98px) {
    .sg-note { margin-left: 0; }
    .sg-actions .hm-btn { flex: 1 1 100%; }
}

/* --- what we provide --- */

.sg-core {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin-bottom: 1.25rem;
}

@media (max-width: 575.98px) { .sg-core { grid-template-columns: 1fr; } }

.sg-core-card {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: 1.15rem;
    border-radius: 16px;
    background: var(--t-cream);
    text-decoration: none;
    transition: transform .25s var(--tm-ease), box-shadow .25s var(--tm-ease);
}

.sg-core-card:nth-child(2) { background: var(--t-lilac); }

a.sg-core-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 4px rgb(11 18 32 / .04), 0 14px 28px -12px rgb(11 18 32 / .2);
}

.sg-core-tag {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--s-orange-d);
}

.sg-core-card:nth-child(2) .sg-core-tag { color: var(--s-indigo-d); }

.sg-core-label {
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: -.012em;
    line-height: 1.35;
    color: var(--s-ink);
    flex: 1 1 auto;
}

.sg-core-go {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--s-ink);
}

.sg-core-go i { transition: transform .25s var(--tm-ease); }
a.sg-core-card:hover .sg-core-go i { transform: translateX(3px); }

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

@media (max-width: 575.98px) { .sg-list { grid-template-columns: 1fr; } }

.sg-list a,
.sg-list .sg-list-plain {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .45rem .6rem;
    margin-inline: -.6rem;
    border-radius: 9px;
    font-size: .8438rem;
    line-height: 1.45;
    color: var(--s-ink-2);
    text-decoration: none;
    transition: background-color .18s var(--tm-ease), color .18s var(--tm-ease);
}

.sg-list a:hover { background: var(--s-off); color: var(--s-ink); }

.sg-list i { color: var(--s-teal); font-size: .85rem; margin-top: .2rem; flex: 0 0 auto; }

@media (prefers-reduced-motion: reduce) {
    .sg-tab, .sg-core-card { transition: none !important; }
    .sg-tab:hover, a.sg-core-card:hover { transform: none !important; }
}