/* ==========================================================================
   TenderMitra — Design System
   Layered on top of Bootstrap 5 + style.css. Additive only: every rule is
   either scoped to a .tm-* class or is a safe global (font, focus, motion).
   Palette is unchanged — the existing brand values are promoted to tokens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts (self-hosted — no external requests)
   -------------------------------------------------------------------------- */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-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: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-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;
}

/* Devanagari — for the "सर्च से सबमिशन तक" tagline */
@font-face {
    font-family: 'Noto Sans Devanagari';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/noto-devanagari.woff2') format('woff2');
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0,
        U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

/* --------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */

:root {
    /* Brand — consolidated from #f6931e / #f7951e / #ff8303 / #f9b664 */
    --tm-primary: #f6931e;
    --tm-primary-600: #e07d0a;
    --tm-primary-700: #c46a05;
    --tm-primary-200: #fbd0a1;
    --tm-primary-100: #fde5c8;
    --tm-primary-050: #fff4e3;
    --tm-primary-light: #ffb457;

    /* Neutrals — navy-cast rather than violet-grey, and a step darker at
       every level. The old ramp topped out at #1f1b2d, which is what made
       headings read soft; --tm-ink-500 in particular was only 4.9:1 and is
       used for a lot of body copy. */
    --tm-ink: #0b1220;
    --tm-ink-700: #2c3a55;
    --tm-ink-500: #4a5878;
    --tm-ink-400: #6b7898;
    --tm-slate-900: #0f172a;
    --tm-slate-700: #253449;
    --tm-slate-400: #7d8ba5;

    /* Deep field — the closing band and the footer */
    --tm-navy: #0b1220;
    --tm-navy-2: #131e33;
    --tm-navy-3: #1e2c47;
    --tm-on-navy: rgb(255 255 255 / .74);
    --tm-on-navy-2: rgb(255 255 255 / .58);
    --tm-navy-line: rgb(255 255 255 / .12);

    --tm-surface: #ffffff;
    --tm-canvas: #f4f6fa;
    --tm-canvas-warm: #fdf3e7;
    --tm-border: #dde2ec;
    --tm-border-strong: #c3cbdb;

    /* Semantic — the light cuts were decorative only; each now has a text
       cut that clears 4.5:1 on white so status copy can use the same hue as
       the badge it sits next to. */
    --tm-success: #0f9d6e;
    --tm-success-ink: #0b6b50;
    --tm-danger: #e02424;
    --tm-danger-ink: #a81a1a;
    --tm-warning: #f6931e;
    --tm-warning-ink: #8c4e06;
    --tm-info: #4f46e5;
    --tm-info-ink: #4338ca;

    /* Spacing — 4px base */
    --tm-s1: .25rem;
    --tm-s2: .5rem;
    --tm-s3: .75rem;
    --tm-s4: 1rem;
    --tm-s5: 1.5rem;
    --tm-s6: 2rem;
    --tm-s7: 3rem;
    --tm-s8: 4rem;
    --tm-s9: 6rem;

    /* Radius */
    --tm-r-sm: 8px;
    --tm-r-md: 12px;
    --tm-r-lg: 18px;
    --tm-r-xl: 26px;
    --tm-r-pill: 999px;

    /* Elevation */
    --tm-e1: 0 1px 2px rgb(16 24 40 / .05);
    --tm-e2: 0 4px 14px rgb(16 24 40 / .07);
    --tm-e3: 0 14px 34px rgb(16 24 40 / .10);
    --tm-e4: 0 26px 60px rgb(16 24 40 / .14);
    --tm-e-brand: 0 12px 28px rgb(246 147 30 / .28);

    /* Motion */
    --tm-ease: cubic-bezier(.22, .61, .36, 1);
    --tm-ease-out: cubic-bezier(.16, 1, .3, 1);
    --tm-fast: .16s;
    --tm-base: .28s;
    --tm-slow: .55s;

    /* Layout */
    --tm-header-h: 76px;
}

/* --------------------------------------------------------------------------
   3. Global base (safe overrides only)
   -------------------------------------------------------------------------- */

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

/* Nothing on a marketing page should ever scroll sideways. `clip` is used
   rather than `hidden` deliberately: `hidden` turns these into scroll
   containers, which silently breaks `position: sticky` on the header. */
html,
body {
    overflow-x: clip;
    max-width: 100%;
}

body {
    font-family: 'Inter', 'Noto Sans Devanagari', -apple-system, BlinkMacSystemFont,
        'Segoe UI', Roboto, Arial, sans-serif;
    font-optical-sizing: auto;
    color: var(--tm-ink);
    background: var(--tm-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* style.css sets `button, a { box-shadow: none !important }`, which suppresses
   Bootstrap's focus ring entirely. Restore keyboard focus with `outline`,
   which that !important cannot reach. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--tm-primary);
    outline-offset: 2px;
    border-radius: var(--tm-r-sm);
}

:target {
    scroll-margin-top: calc(var(--tm-header-h) + 1rem);
}

::selection {
    background: var(--tm-primary-100);
    color: var(--tm-ink);
}

/* Skip link.
   Hidden by clipping rather than `left: -9999px`. The old approach places a
   real box far outside the page, which can widen the scrollable area and show
   as a stray strip beside full-bleed sections. Clipping occupies no space. */
.tm-skip {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2000;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    background: var(--tm-ink);
    color: #fff;
    font-weight: 600;
    border-radius: 0 0 var(--tm-r-sm) 0;
}

.tm-skip:focus {
    width: auto;
    height: auto;
    padding: .75rem 1.25rem;
    overflow: visible;
    clip-path: none;
    color: #fff;
}

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */

.tm-display {
    font-size: clamp(2.25rem, 1.35rem + 3.6vw, 4rem);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -.03em;
    margin: 0;
}

.tm-h1 {
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -.025em;
    margin: 0;
}

.tm-h2 {
    font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.35rem);
    line-height: 1.18;
    font-weight: 750;
    letter-spacing: -.02em;
    margin: 0;
}

.tm-h3 {
    font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -.015em;
    margin: 0;
}

.tm-h4 {
    font-size: 1.125rem;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0;
}

/* Body copy — tracking reset to 0. The site-wide `letter-spacing: 2px` on
   paragraphs measurably slows reading at 16px. */
.tm-lead {
    font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
    line-height: 1.65;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--tm-ink-700);
    margin: 0;
}

.tm-body {
    font-size: 1rem;
    line-height: 1.7;
    letter-spacing: 0;
    color: var(--tm-ink-700);
    margin: 0;
}

.tm-small {
    font-size: .875rem;
    line-height: 1.6;
    color: var(--tm-ink-500);
    margin: 0;
}

/* Eyebrow / label — tracking belongs here, not on body copy */
.tm-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tm-primary-700);
    margin: 0 0 var(--tm-s3);
}

.tm-eyebrow::before {
    content: "";
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    opacity: .55;
}

.tm-eyebrow--center {
    justify-content: center;
}

.tm-ink { color: var(--tm-ink); }
.tm-muted { color: var(--tm-ink-500); }
.tm-brand { color: var(--tm-primary); }

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

/* Gradient headline accent */
.tm-gradient-text {
    background: linear-gradient(105deg, var(--tm-primary) 0%, #ffb457 45%, var(--tm-primary-700) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--tm-primary);
}

/* Balanced headline wrapping where supported */
.tm-balance {
    text-wrap: balance;
}

/* --------------------------------------------------------------------------
   5. Section rhythm
   -------------------------------------------------------------------------- */

.tm-section {
    position: relative;
    padding-block: clamp(3rem, 2rem + 4vw, 6rem);
}

.tm-section--tight {
    padding-block: clamp(2.25rem, 1.75rem + 2.4vw, 3.75rem);
}

.tm-section--canvas { background: var(--tm-canvas); }
.tm-section--warm { background: var(--tm-canvas-warm); }

.tm-section--ink {
    background: var(--tm-ink);
    color: #fff;
}

.tm-section--ink .tm-h2,
.tm-section--ink .tm-h3 { color: #fff; }

.tm-section--ink .tm-lead,
.tm-section--ink .tm-body { color: rgb(255 255 255 / .74); }

.tm-section-head {
    max-width: 46rem;
    margin-inline: auto;
    margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.25rem);
}

.tm-section-head--left {
    margin-inline: 0;
}

.tm-section-head .tm-lead {
    margin-top: var(--tm-s3);
}

/* Soft divider */
.tm-rule {
    height: 1px;
    border: 0;
    background: linear-gradient(90deg, transparent, var(--tm-border-strong), transparent);
    margin: 0;
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.tm-btn {
    --_bg: var(--tm-primary);
    --_fg: #fff;
    --_bd: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .85rem 1.6rem;
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: .01em;
    text-decoration: none;
    color: var(--_fg);
    background: var(--_bg);
    border: 1.5px solid var(--_bd);
    border-radius: var(--tm-r-pill);
    cursor: pointer;
    transition: transform var(--tm-fast) var(--tm-ease),
                box-shadow var(--tm-base) var(--tm-ease),
                background-color var(--tm-fast) var(--tm-ease),
                color var(--tm-fast) var(--tm-ease);
    will-change: transform;
}

.tm-btn:hover {
    color: var(--_fg);
    transform: translateY(-2px);
}

.tm-btn:active {
    transform: translateY(0) scale(.985);
}

.tm-btn i {
    font-size: 1.05em;
    line-height: 1;
    transition: transform var(--tm-base) var(--tm-ease);
}

.tm-btn:hover i.tm-btn-arrow {
    transform: translateX(3px);
}

/* Variants */
.tm-btn--primary {
    box-shadow: var(--tm-e-brand);
}

.tm-btn--primary:hover {
    --_bg: var(--tm-primary-600);
    box-shadow: 0 16px 34px rgb(246 147 30 / .36);
}

.tm-btn--ink {
    --_bg: var(--tm-ink);
    box-shadow: 0 10px 24px rgb(31 27 45 / .22);
}

.tm-btn--ink:hover {
    --_bg: #2c2740;
    box-shadow: 0 16px 32px rgb(31 27 45 / .3);
}

.tm-btn--ghost {
    --_bg: transparent;
    --_fg: var(--tm-ink);
    --_bd: var(--tm-border-strong);
}

.tm-btn--ghost:hover {
    --_bd: var(--tm-primary);
    --_fg: var(--tm-primary-700);
    background: var(--tm-primary-050);
}

.tm-btn--on-dark {
    --_bg: rgb(255 255 255 / .1);
    --_fg: #fff;
    --_bd: rgb(255 255 255 / .3);
    backdrop-filter: blur(8px);
}

.tm-btn--on-dark:hover {
    --_bg: #fff;
    --_fg: var(--tm-ink);
    --_bd: #fff;
}

.tm-btn--sm {
    padding: .55rem 1.15rem;
    font-size: .9rem;
}

.tm-btn--lg {
    padding: 1rem 2rem;
    font-size: 1.0625rem;
}

.tm-btn--block {
    width: 100%;
}

/* Text link with animated underline */
.tm-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 650;
    color: var(--tm-primary-700);
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1.5px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--tm-base) var(--tm-ease), color var(--tm-fast) var(--tm-ease);
}

.tm-link:hover {
    color: var(--tm-primary);
    background-size: 100% 1.5px;
}

.tm-link i {
    transition: transform var(--tm-base) var(--tm-ease);
}

.tm-link:hover i {
    transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */

.tm-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--tm-s5);
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-r-lg);
    box-shadow: var(--tm-e1);
    transition: transform var(--tm-base) var(--tm-ease),
                box-shadow var(--tm-base) var(--tm-ease),
                border-color var(--tm-base) var(--tm-ease);
}

.tm-card--hover:hover {
    transform: translateY(-6px);
    box-shadow: var(--tm-e3);
    border-color: var(--tm-primary-100);
}

.tm-card--pad-lg {
    padding: var(--tm-s6);
}

.tm-card--flush {
    padding: 0;
    overflow: hidden;
}

.tm-card--glass {
    background: rgb(255 255 255 / .72);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-color: rgb(255 255 255 / .6);
}

/* Top accent bar that draws in on hover */
.tm-card--accent::after {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    height: 3px;
    width: 0;
    border-radius: var(--tm-r-lg) var(--tm-r-lg) 0 0;
    background: linear-gradient(90deg, var(--tm-primary), #ffc06b);
    transition: width var(--tm-slow) var(--tm-ease-out);
}

.tm-card--accent:hover::after {
    width: 100%;
}

/* Service card */
.tm-service-card {
    text-align: center;
    align-items: center;
    gap: var(--tm-s3);
    padding: var(--tm-s6) var(--tm-s5);
}

.tm-service-media {
    display: grid;
    place-items: center;
    width: 100%;
    height: 168px;
    margin-bottom: var(--tm-s2);
    border-radius: var(--tm-r-md);
    background: radial-gradient(circle at 50% 40%, var(--tm-primary-050) 0%, transparent 70%);
}

.tm-service-media img {
    max-width: 78%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform var(--tm-slow) var(--tm-ease-out);
}

.tm-card--hover:hover .tm-service-media img {
    transform: scale(1.06) translateY(-3px);
}

.tm-service-card .tm-h3 a {
    color: var(--tm-ink);
    text-decoration: none;
    transition: color var(--tm-fast) var(--tm-ease);
}

.tm-service-card .tm-h3 a:hover {
    color: var(--tm-primary-700);
}

.tm-service-card .tm-body {
    flex: 1 1 auto;
}

.tm-card-foot {
    margin-top: var(--tm-s4);
    padding-top: var(--tm-s4);
    border-top: 1px solid var(--tm-border);
    width: 100%;
}

/* Numbered feature card */
.tm-numbered {
    counter-increment: tm-num;
}

.tm-numbered .tm-num {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: var(--tm-s4);
    font-size: 1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--tm-primary-700);
    background: var(--tm-primary-050);
    border: 1px solid var(--tm-primary-100);
    border-radius: var(--tm-r-md);
}

/* Icon tile */
.tm-icon-tile {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    font-size: 1.4rem;
    color: var(--tm-primary-700);
    background: var(--tm-primary-050);
    border: 1px solid var(--tm-primary-100);
    border-radius: var(--tm-r-md);
    transition: transform var(--tm-base) var(--tm-ease), background-color var(--tm-base) var(--tm-ease);
}

.tm-card--hover:hover .tm-icon-tile {
    transform: translateY(-2px) rotate(-4deg);
    background: var(--tm-primary-100);
}

.tm-icon-tile--ink {
    color: #fff;
    background: var(--tm-ink);
    border-color: var(--tm-ink);
}

/* --------------------------------------------------------------------------
   8. Badges / chips
   -------------------------------------------------------------------------- */

.tm-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .85rem;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--tm-ink-700);
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-r-pill);
    white-space: nowrap;
}

.tm-chip--brand {
    color: var(--tm-primary-700);
    background: var(--tm-primary-050);
    border-color: var(--tm-primary-100);
}

.tm-chip--on-dark {
    color: rgb(255 255 255 / .88);
    background: rgb(255 255 255 / .08);
    border-color: rgb(255 255 255 / .18);
}

.tm-chip i {
    font-size: .95em;
    color: var(--tm-primary);
}

.tm-chip--on-dark i {
    color: var(--tm-primary);
}

/* --------------------------------------------------------------------------
   9. Hero — layered CSS 3D, no WebGL
   -------------------------------------------------------------------------- */

.tm-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(3.5rem, 2rem + 7vw, 7rem);
    background: linear-gradient(180deg, #fff6e9 0%, var(--tm-canvas-warm) 52%, #ffffff 100%);
}

/* Aurora blobs */
.tm-hero-aurora {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    overflow: hidden;
}

.tm-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(72px);
    opacity: .5;
    will-change: transform;
}

.tm-blob--1 {
    width: 46vw;
    max-width: 620px;
    aspect-ratio: 1;
    top: -14%;
    right: -8%;
    background: radial-gradient(circle, rgb(246 147 30 / .55), transparent 68%);
    animation: tm-drift-a 22s var(--tm-ease) infinite alternate;
}

.tm-blob--2 {
    width: 38vw;
    max-width: 500px;
    aspect-ratio: 1;
    bottom: -20%;
    left: -10%;
    background: radial-gradient(circle, rgb(60 118 242 / .3), transparent 68%);
    animation: tm-drift-b 27s var(--tm-ease) infinite alternate;
}

.tm-blob--3 {
    width: 30vw;
    max-width: 400px;
    aspect-ratio: 1;
    top: 32%;
    left: 38%;
    background: radial-gradient(circle, rgb(7 201 139 / .22), transparent 68%);
    animation: tm-drift-a 31s var(--tm-ease) infinite alternate-reverse;
}

@keyframes tm-drift-a {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-5%, 7%, 0) scale(1.12); }
}

@keyframes tm-drift-b {
    from { transform: translate3d(0, 0, 0) scale(1.08); }
    to   { transform: translate3d(7%, -6%, 0) scale(1); }
}

/* Subtle grid overlay for an engineered, enterprise feel */
.tm-hero-grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgb(31 27 45 / .045) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(31 27 45 / .045) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 78%);
}

.tm-hero-inner {
    position: relative;
    z-index: 1;
}

.tm-hero .tm-display {
    margin-bottom: var(--tm-s4);
}

.tm-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tm-s3);
    margin-top: var(--tm-s6);
}

.tm-hero-actions--center {
    justify-content: center;
}

/* Trust strip under the hero copy */
.tm-trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tm-s3) var(--tm-s5);
    margin-top: var(--tm-s6);
    padding-top: var(--tm-s5);
    border-top: 1px solid var(--tm-border);
}

.tm-trust-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--tm-ink-700);
}

.tm-trust-item i {
    color: var(--tm-success);
    font-size: 1.1rem;
}

/* 3D perspective stage for the hero visual */
.tm-stage {
    perspective: 1400px;
    perspective-origin: 50% 40%;
}

.tm-stage-card {
    position: relative;
    transform-style: preserve-3d;
    padding: var(--tm-s6);
    background: rgb(255 255 255 / .78);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid rgb(255 255 255 / .8);
    border-radius: var(--tm-r-xl);
    box-shadow: var(--tm-e4);
}

/* Depth layers — pushed forward in Z so tilt produces real parallax */
.tm-depth-1 { transform: translateZ(28px); }
.tm-depth-2 { transform: translateZ(52px); }
.tm-depth-3 { transform: translateZ(76px); }

.tm-stage-logo {
    display: block;
    width: min(260px, 62%);
    height: auto;
    margin-inline: auto;
    filter: drop-shadow(0 18px 28px rgb(31 27 45 / .16));
}

/* Floating mini-cards around the hero visual */
.tm-float {
    position: absolute;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem 1rem;
    font-size: .8125rem;
    font-weight: 650;
    color: var(--tm-ink);
    background: #fff;
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-r-md);
    box-shadow: var(--tm-e3);
    white-space: nowrap;
}

.tm-float i {
    font-size: 1.15rem;
}

.tm-float--tl {
    top: 6%;
    left: -6%;
    transform: translateZ(90px);
    animation: tm-bob 6s var(--tm-ease) infinite alternate;
}

.tm-float--br {
    bottom: 8%;
    right: -5%;
    transform: translateZ(110px);
    animation: tm-bob 7.5s var(--tm-ease) .8s infinite alternate-reverse;
}

@keyframes tm-bob {
    from { translate: 0 0; }
    to   { translate: 0 -12px; }
}

@media (max-width: 991.98px) {
    .tm-float { display: none; }
    .tm-stage-card { padding: var(--tm-s5); }
}

/* --------------------------------------------------------------------------
   10. Page header (inner pages)
   -------------------------------------------------------------------------- */

.tm-pagehead {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(3rem, 2rem + 5vw, 5.5rem);
    background: var(--tm-ink);
    color: #fff;
}

.tm-pagehead::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 60% 80% at 12% 0%, rgb(246 147 30 / .3), transparent 60%),
        radial-gradient(ellipse 50% 70% at 88% 100%, rgb(60 118 242 / .24), transparent 60%);
}

.tm-pagehead::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(to right, rgb(255 255 255 / .05) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(255 255 255 / .05) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 20%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 20%, transparent 80%);
}

.tm-pagehead .tm-h1 { color: #fff; }

.tm-pagehead .tm-lead { color: rgb(255 255 255 / .76); }

.tm-pagehead .tm-eyebrow { color: var(--tm-primary); }

/* Breadcrumb */
.tm-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0 0 var(--tm-s4);
    padding: 0;
    list-style: none;
    font-size: .875rem;
}

.tm-crumbs li {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: rgb(255 255 255 / .55);
}

.tm-crumbs li + li::before {
    content: "/";
    color: rgb(255 255 255 / .3);
}

.tm-crumbs a {
    color: rgb(255 255 255 / .8);
    text-decoration: none;
    transition: color var(--tm-fast) var(--tm-ease);
}

.tm-crumbs a:hover { color: var(--tm-primary); }

.tm-crumbs [aria-current="page"] { color: #fff; font-weight: 600; }

/* --------------------------------------------------------------------------
   11. Stats
   -------------------------------------------------------------------------- */

.tm-stat {
    text-align: center;
    padding: var(--tm-s5) var(--tm-s4);
}

.tm-stat-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto var(--tm-s4);
    font-size: 1.5rem;
    border-radius: var(--tm-r-md);
    background: rgb(255 255 255 / .08);
    border: 1px solid rgb(255 255 255 / .14);
    color: var(--tm-primary);
}

.tm-stat-value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .1rem;
    font-size: clamp(2rem, 1.5rem + 2vw, 2.85rem);
    font-weight: 800;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: #fff;
}

.tm-stat-label {
    margin: var(--tm-s3) 0 0;
    font-size: .9375rem;
    font-weight: 550;
    color: rgb(255 255 255 / .68);
}

/* --------------------------------------------------------------------------
   12. Logo grids (authorities / clients / identity)
   -------------------------------------------------------------------------- */

.tm-logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--tm-s3);
}

.tm-logo-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--tm-s3);
    padding: var(--tm-s4) var(--tm-s3);
    text-align: center;
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-r-md);
    transition: transform var(--tm-base) var(--tm-ease),
                box-shadow var(--tm-base) var(--tm-ease),
                border-color var(--tm-base) var(--tm-ease);
}

.tm-logo-cell:hover {
    transform: translateY(-4px);
    box-shadow: var(--tm-e2);
    border-color: var(--tm-primary-100);
}

/* Fixed optical box normalises the ragged per-image pixel widths */
.tm-logo-box {
    display: grid;
    place-items: center;
    width: 100%;
    height: 62px;
}

.tm-logo-box img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .72;
    transition: filter var(--tm-base) var(--tm-ease), opacity var(--tm-base) var(--tm-ease);
}

.tm-logo-cell:hover .tm-logo-box img {
    filter: grayscale(0);
    opacity: 1;
}

.tm-logo-name {
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--tm-ink-500);
    margin: 0;
}

/* Compact variant for client brand marks */
.tm-logo-grid--compact {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
}

.tm-logo-grid--compact .tm-logo-box { height: 52px; }

.tm-logo-grid--compact .tm-logo-cell { padding: var(--tm-s3); }

/* Identity row — larger marks, no card chrome */
.tm-identity {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 1rem + 3vw, 4rem);
}

.tm-identity img {
    height: clamp(52px, 4vw, 72px);
    width: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .68;
    transition: filter var(--tm-base) var(--tm-ease), opacity var(--tm-base) var(--tm-ease);
}

.tm-identity img:hover {
    filter: grayscale(0);
    opacity: 1;
}

/* --------------------------------------------------------------------------
   13. Prose (CKEditor / rich-text output)
   -------------------------------------------------------------------------- */

.tm-prose {
    font-size: 1.0625rem;
    line-height: 1.75;
    letter-spacing: 0;
    color: var(--tm-ink-700);
}

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

.tm-prose h1,
.tm-prose h2,
.tm-prose h3,
.tm-prose h4,
.tm-prose h5,
.tm-prose h6 {
    color: var(--tm-ink);
    font-weight: 750;
    letter-spacing: -.02em;
    line-height: 1.25;
    margin: 2.25em 0 .7em;
}

.tm-prose h1 { font-size: 1.9rem; }
.tm-prose h2 { font-size: 1.6rem; }
.tm-prose h3 { font-size: 1.3rem; }
.tm-prose h4 { font-size: 1.1rem; }

.tm-prose p { margin: 0 0 1.15em; }

.tm-prose ul,
.tm-prose ol {
    margin: 0 0 1.25em;
    padding-left: 1.35em;
}

.tm-prose li { margin-bottom: .5em; }

.tm-prose ul > li::marker { color: var(--tm-primary); }
.tm-prose ol > li::marker { color: var(--tm-primary); font-weight: 700; }

.tm-prose a {
    color: var(--tm-primary-700);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
}

.tm-prose a:hover { color: var(--tm-primary); }

.tm-prose strong { color: var(--tm-ink); font-weight: 700; }

.tm-prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--tm-r-md);
    margin: 1.5em 0;
}

.tm-prose blockquote {
    margin: 1.75em 0;
    padding: var(--tm-s4) var(--tm-s5);
    background: var(--tm-primary-050);
    border-left: 3px solid var(--tm-primary);
    border-radius: 0 var(--tm-r-md) var(--tm-r-md) 0;
    font-style: normal;
    color: var(--tm-ink);
}

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

/* Tables inside rich text — keeps wide content from breaking the page */
.tm-prose table {
    width: 100%;
    margin: 1.5em 0;
    border-collapse: collapse;
    font-size: .9375rem;
}

.tm-prose th,
.tm-prose td {
    padding: .7rem .9rem;
    border: 1px solid var(--tm-border);
    text-align: left;
}

.tm-prose th {
    background: var(--tm-canvas);
    font-weight: 650;
    color: var(--tm-ink);
}

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

/* --------------------------------------------------------------------------
   14. Team / testimonial / offices
   -------------------------------------------------------------------------- */

.tm-person {
    text-align: center;
    padding: var(--tm-s5) var(--tm-s4);
}

.tm-person-avatar {
    width: 96px;
    height: 96px;
    margin: 0 auto var(--tm-s4);
    border-radius: var(--tm-r-lg);
    object-fit: cover;
    background: var(--tm-canvas);
    border: 3px solid var(--tm-surface);
    box-shadow: var(--tm-e2);
    transition: transform var(--tm-base) var(--tm-ease);
}

.tm-card--hover:hover .tm-person-avatar {
    transform: translateY(-3px) scale(1.04);
}

.tm-person-name {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--tm-ink);
    margin: 0 0 .2rem;
}

.tm-person-role {
    font-size: .875rem;
    font-weight: 550;
    color: var(--tm-primary-700);
    margin: 0;
}

.tm-quote-mark {
    width: 40px;
    height: auto;
    opacity: .28;
    margin-bottom: var(--tm-s3);
}

.tm-testimonial {
    text-align: left;
    min-height: 100%;
}

.tm-testimonial-body {
    flex: 1 1 auto;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--tm-ink-700);
    margin: 0 0 var(--tm-s5);
}

.tm-testimonial-person {
    display: flex;
    align-items: center;
    gap: var(--tm-s3);
}

.tm-testimonial-person img {
    width: 48px;
    height: 48px;
    border-radius: var(--tm-r-md);
    object-fit: cover;
    flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   15. Scroll reveal
   -------------------------------------------------------------------------- */

/* Scoped to .js — set synchronously in <head> before first paint. Without
   JavaScript the rules never apply, so content is never left invisible. */
.js [data-tm-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s var(--tm-ease-out), transform .7s var(--tm-ease-out);
    transition-delay: var(--tm-delay, 0ms);
}

.js [data-tm-reveal="left"]  { transform: translateX(-26px); }
.js [data-tm-reveal="right"] { transform: translateX(26px); }
.js [data-tm-reveal="zoom"]  { transform: scale(.94); }

.js [data-tm-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* --------------------------------------------------------------------------
   16. Header / navigation
   -------------------------------------------------------------------------- */

.tm-topbar {
    background: var(--tm-ink);
    color: rgb(255 255 255 / .78);
    font-size: .8125rem;
}

.tm-topbar a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: rgb(255 255 255 / .84);
    text-decoration: none;
    font-weight: 550;
    transition: color var(--tm-fast) var(--tm-ease);
}

.tm-topbar a:hover { color: var(--tm-primary); }

.tm-topbar i { color: var(--tm-primary); }

.tm-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgb(255 255 255 / .86);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border-bottom: 1px solid transparent;
    transition: box-shadow var(--tm-base) var(--tm-ease),
                border-color var(--tm-base) var(--tm-ease),
                background-color var(--tm-base) var(--tm-ease);
}

.tm-header.is-stuck {
    background: rgb(255 255 255 / .95);
    border-bottom-color: var(--tm-border);
    box-shadow: var(--tm-e2);
}

.tm-header .navbar { padding-block: .6rem; }

.tm-brand-mark {
    display: flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
}

.tm-brand-mark img {
    height: 46px;
    width: auto;
    transition: transform var(--tm-base) var(--tm-ease);
}

.tm-brand-mark:hover img { transform: scale(1.05); }

.tm-nav .nav-link {
    position: relative;
    padding: .55rem .9rem !important;
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--tm-ink-700) !important;
    border-radius: var(--tm-r-sm);
    transition: color var(--tm-fast) var(--tm-ease), background-color var(--tm-fast) var(--tm-ease);
}

.tm-nav .nav-link:hover,
.tm-nav .nav-link:focus-visible {
    color: var(--tm-ink) !important;
    background: var(--tm-primary-050);
}

.tm-nav .nav-link[aria-current="page"] {
    color: var(--tm-primary-700) !important;
}

.tm-nav .nav-link[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: .9rem;
    right: .9rem;
    bottom: .25rem;
    height: 2px;
    border-radius: 2px;
    background: var(--tm-primary);
}

.tm-nav .dropdown-menu {
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-r-md);
    box-shadow: var(--tm-e3);
    padding: .4rem;
    margin-top: .5rem;
}

.tm-nav .dropdown-item {
    border-radius: var(--tm-r-sm);
    padding: .55rem .8rem;
    font-size: .9375rem;
    font-weight: 550;
    letter-spacing: 0;
    color: var(--tm-ink-700);
}

.tm-nav .dropdown-item:hover,
.tm-nav .dropdown-item:focus {
    background: var(--tm-primary-050);
    color: var(--tm-primary-700);
}

.tm-nav-cta {
    margin-left: .5rem;
}

/* Header call-to-action.
   A solid brand fill, not the old #fff4e6 tint — on a white header the tint
   was almost invisible, which is the whole reason the nav read as washed
   out. The contrast problem it was avoiding is only a problem for WHITE on
   orange (2.30:1); ink on orange is 8.12:1, so a full-strength fill with
   dark type clears AA comfortably and is by far the louder mark of the two.
   Defined here rather than in modern.css because 11 pages still load only
   this stylesheet. */
.tm-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .55rem 1.15rem;
    font-size: .9063rem;   /* same type scale as the nav links beside it */
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    white-space: nowrap;
    color: var(--tm-navy) !important;   /* 8.12:1 on the fill */
    background: var(--tm-primary);
    border: 1px solid var(--tm-primary);
    border-radius: 999px;
    box-shadow: 0 4px 14px rgb(246 147 30 / .3);
    text-decoration: none;
    transition: background-color .2s var(--tm-ease),
                border-color .2s var(--tm-ease),
                color .2s var(--tm-ease),
                transform .2s var(--tm-ease),
                box-shadow .2s var(--tm-ease);
}

.tm-nav-btn:hover,
.tm-nav-btn:focus-visible {
    color: #fff !important;
    background: var(--tm-navy);
    border-color: var(--tm-navy);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgb(11 18 32 / .28);
}

.tm-nav-btn:active { transform: translateY(0); }

.tm-nav-btn i {
    font-size: 1em;
    color: var(--tm-navy);
    opacity: .72;
    transition: color .2s var(--tm-ease), opacity .2s var(--tm-ease);
}

.tm-nav-btn:hover i,
.tm-nav-btn:focus-visible i { color: var(--tm-primary); opacity: 1; }

@media (max-width: 991.98px) {
    .tm-nav-btn {
        width: 100%;
        padding-block: .75rem;
    }
}

.tm-header .navbar-toggler {
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-r-sm);
    padding: .4rem .6rem;
}

/* Scroll progress bar */
.tm-progress {
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 2px;
    width: 0;
    background: linear-gradient(90deg, var(--tm-primary), #ffc06b);
    transition: width .1s linear;
    z-index: 2;
}

@media (max-width: 991.98px) {
    .tm-nav {
        padding-block: var(--tm-s3);
    }

    .tm-nav .nav-link[aria-current="page"]::after { display: none; }

    .tm-nav .nav-link[aria-current="page"] {
        background: var(--tm-primary-050);
    }

    .tm-nav-cta {
        margin-left: 0;
        margin-top: var(--tm-s3);
    }
}

/* --------------------------------------------------------------------------
   17. CTA band
   -------------------------------------------------------------------------- */

.tm-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(2.5rem, 2rem + 3vw, 4rem);
    background: var(--tm-ink);
    border-radius: var(--tm-r-xl);
    color: #fff;
}

.tm-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 55% 90% at 85% 15%, rgb(246 147 30 / .38), transparent 62%),
        radial-gradient(ellipse 45% 80% at 8% 90%, rgb(60 118 242 / .26), transparent 62%);
}

.tm-cta .tm-h2 { color: #fff; }
.tm-cta .tm-lead { color: rgb(255 255 255 / .76); }

/* --------------------------------------------------------------------------
   18. Utilities
   -------------------------------------------------------------------------- */

.tm-stack > * + * { margin-top: var(--tm-s4); }
.tm-stack-sm > * + * { margin-top: var(--tm-s2); }
.tm-stack-lg > * + * { margin-top: var(--tm-s5); }

.tm-container-narrow {
    max-width: 56rem;
    margin-inline: auto;
}

.tm-container-prose {
    max-width: 44rem;
    margin-inline: auto;
}

.tm-media-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tm-ratio-16x9 { aspect-ratio: 16 / 9; }
.tm-ratio-4x3  { aspect-ratio: 4 / 3; }

.tm-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Owl carousel theming (already vendored — restyled, not replaced) */
.tm-carousel .owl-dots {
    margin-top: var(--tm-s5) !important;
}

.tm-carousel .owl-dot span {
    width: 8px !important;
    height: 8px !important;
    background: var(--tm-border-strong) !important;
    transition: all var(--tm-base) var(--tm-ease);
}

.tm-carousel .owl-dot.active span {
    width: 26px !important;
    background: var(--tm-primary) !important;
    border-radius: var(--tm-r-pill) !important;
}

.tm-carousel .owl-nav { display: none !important; }

.tm-carousel .owl-stage { display: flex; }

.tm-carousel .owl-item { display: flex; height: auto; }

.tm-carousel .owl-item > .item { display: flex; width: 100%; }

/* Back-to-top (upgrades the existing .back-to-top) */
.back-to-top {
    border-radius: var(--tm-r-md) !important;
    width: 42px !important;
    height: 42px !important;
    box-shadow: var(--tm-e-brand);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity var(--tm-base) var(--tm-ease),
                transform var(--tm-base) var(--tm-ease),
                visibility var(--tm-base);
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--tm-primary-600) !important;
    transform: translateY(-3px);
}

/* --------------------------------------------------------------------------
   19. Footer refinements (works with the existing footer markup)
   -------------------------------------------------------------------------- */

/* The footer runs on the same deep navy as the closing band above it, so the
   two read as one base the page sits on rather than two more pale strips.
   The markup carries Bootstrap's .text-dark on most links, which lands at
   !important — hence the !important on the inversions below. */
.tm-footer {
    background: var(--tm-navy) !important;
    border-top: 0;
    color: var(--tm-on-navy);
}

.tm-footer h6 {
    font-size: .75rem !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase;
    color: #fff !important;
}

.tm-footer p,
.tm-footer address,
.tm-footer li,
.tm-footer .tm-body {
    color: var(--tm-on-navy) !important;
}

.tm-footer .tm-h4 {
    color: #fff !important;
    font-size: 1.0625rem !important;
}

.tm-footer .tm-brand,
.tm-footer .footer-contact .bi {
    color: var(--tm-primary) !important;
}

.tm-footer a,
.tm-footer a.text-dark,
.tm-footer .text-dark {
    color: var(--tm-on-navy) !important;
    transition: color var(--tm-fast) var(--tm-ease);
}

.tm-footer a:hover,
.tm-footer a.text-dark:hover,
.tm-footer .footer-links a:hover,
.tm-footer .footer-contact a:hover {
    color: var(--tm-primary) !important;
}

/* The mark is an orange gear around a black disc: on navy the gear and the
   two-tone wordmark both hold, and knocking it out to a flat white
   silhouette (brightness(0) invert(1)) would throw away the wordmark
   entirely. Left in colour, sized up slightly for the darker ground. */
.tm-footer .logo img {
    width: 92px;
    height: auto;
}

/* Section rule between the link columns and the copyright strip */
.tm-footer .footer-top {
    border-bottom: 1px solid var(--tm-navy-line);
}

.tm-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--tm-r-md) !important;
    background: rgb(255 255 255 / .09) !important;
    border: 1px solid var(--tm-navy-line);
    transition: transform var(--tm-base) var(--tm-ease), background-color var(--tm-base) var(--tm-ease);
}

/* White on the dark chip; the X mark ships a hard fill="#fff" attribute,
   which `fill: currentColor` outranks (presentation attributes lose to any
   declaration), so both glyph types follow the same colour. */
.tm-social .bi { color: #fff; }
.tm-social svg { fill: currentColor; color: #fff; }

.tm-social:hover {
    background: var(--tm-primary) !important;
    border-color: var(--tm-primary);
    transform: translateY(-3px);
}

/* White on #f6931e is 2.30:1, so the glyph flips to ink on hover rather
   than staying white on the brand fill. */
.tm-social:hover .bi,
.tm-social:hover svg { color: var(--tm-navy); }

/* Copyright strip — one step lighter than the footer body so the base still
   has two tones rather than reading as a single flat slab. */
.tm-copyright {
    background: var(--tm-navy-2);
    border-top: 1px solid var(--tm-navy-line);
    color: var(--tm-on-navy-2);
    font-size: .8125rem;
}

.tm-copyright a {
    color: var(--tm-primary);
    text-decoration: none;
    font-weight: 600;
    transition: color var(--tm-fast) var(--tm-ease);
}

.tm-copyright a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   20. Reduced motion & print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .js [data-tm-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }

    .tm-blob { animation: none !important; }
    .tm-float { animation: none !important; }
}

@media print {
    .tm-header,
    .tm-topbar,
    .back-to-top,
    .tm-hero-aurora,
    .tm-hero-grid { display: none !important; }

    .tm-card { box-shadow: none; border: 1px solid #ccc; }

    .js [data-tm-reveal] { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   21. Offices strip (the shared core/our_offices.html include)

   Was a pale #fbddca→white gradient set inline on the wrapper, which is one
   of the places the site read as washed out — and it now has to hold its own
   between white sections above and the dark closing band below. A warm
   canvas with a brand hairline at the top gives it an edge without adding a
   third full-strength tone to the page.
   -------------------------------------------------------------------------- */

.tm-offices {
    position: relative;
    background: linear-gradient(180deg, var(--tm-canvas-warm) 0%, #fffaf3 62%, var(--tm-surface) 100%);
    border-top: 1px solid var(--tm-primary-200);
}

.tm-offices::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--tm-primary), transparent);
}

.tm-offices-title {
    color: var(--tm-ink);
    letter-spacing: .1em;
    font-weight: 700;
    font-size: .8125rem;
}

.tm-offices-sub {
    color: var(--tm-ink-700);
    letter-spacing: 0;
    line-height: 1.5;
    font-size: 1.0625rem;
    font-weight: 500;
}

/* The cards carry .text-dark from the markup, so the ink steps need the same
   weight of override the footer does. */
.tm-offices .headquarter-card {
    background: var(--tm-surface);
    border: 1px solid var(--tm-border) !important;
    border-radius: var(--tm-r-lg);
}

.tm-offices .headquarter-card h4,
.tm-offices .headquarter-card h4.text-dark { color: var(--tm-ink) !important; }
.tm-offices .headquarter-card h5,
.tm-offices .headquarter-card h5.text-dark { color: var(--tm-ink-500) !important; }
.tm-offices .headquarter-card h4 .bi { color: var(--tm-primary); }