/* MtaaLex Solutions - Main Stylesheet */

/* Color Variables */
:root {
    --primary-color: #1F78A8;
    --primary-dark: #155F87;
    --secondary-color: #F36F21;
    --secondary-dark: #D45E18;
    --accent-color: #F36F21;
    --dark-color: #263238;
    --light-gray: #F5F7FA;
    --soft-gray: #E6E6E6;
    --shadow-primary: 0 10px 28px -14px rgba(15, 23, 42, 0.35);
    --shadow-secondary: 0 10px 28px -14px rgba(15, 23, 42, 0.35);
    /* Content width: grows with the screen, never touches the edges */
    --shell-max: 1200px;
    --shell-pad: clamp(1rem, 4vw, 2rem);
}
@media (min-width: 1536px) { :root { --shell-max: 1320px; } }
@media (min-width: 1920px) { :root { --shell-max: 1440px; } }

/* ── Type scale ───────────────────────────────────────────────────
   One typeface (Inter) and one size per role on every public page:
     .hx__title / .t-page  page title in a hero band             52px / 800  (homepage hero 60px)
     .t-title              title of a shop, account or sign-in page 36px / 800
     .t-section            heading of a page section             36px / 700
     .t-panel              heading of a box, form or plan         24px / 700
     .t-card               title of a card or sidebar box         20px / 700
     .t-item               title of a small item, FAQ or list row 18px / 700
     .t-lead               intro paragraph (heroes, sections)     18px
   Body text 16px, card text 15px, small print 14px / 12px, buttons 16px / 600.
   Sizes shrink smoothly on phones. */
:root {
    --fs-display: clamp(2.25rem, 5vw, 3.75rem);
    --fs-page: clamp(2rem, 4.4vw, 3.25rem);
    --fs-title: clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem);
    --fs-panel: clamp(1.3125rem, 1.15rem + 0.5vw, 1.5rem);
    --fs-card: 1.25rem;
    --fs-item: 1.125rem;
    --fs-lead: 1.125rem;
    --fs-article: 1.0625rem;
    --fs-card-text: 0.9375rem;
}
.t-page, .t-title, .t-section, .t-panel, .t-card, .t-item { font-weight: 700; line-height: 1.25; text-wrap: balance; }
.t-page { font-size: var(--fs-page); font-weight: 800; line-height: 1.08; letter-spacing: -0.025em; }
.t-title { font-size: var(--fs-title); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
.t-section { font-size: var(--fs-title); line-height: 1.2; letter-spacing: -0.015em; }
.t-panel { font-size: var(--fs-panel); letter-spacing: -0.01em; }
.t-card { font-size: var(--fs-card); }
.t-item { font-size: var(--fs-item); line-height: 1.35; }
.t-lead { font-size: var(--fs-lead); line-height: 1.7; text-wrap: pretty; }
.t-card + p { font-size: var(--fs-card-text); }

/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Layout: section bands run edge to edge (their backgrounds and dividers fill the
   screen); the content inside sits in a centred "shell" that widens on big screens
   (1200 → 1320 → 1440 px) and keeps a fluid gutter on small ones.
   :where() keeps it at zero specificity, so max-w-* utilities can still narrow it. */
:where(.container, .shell) {
    width: 100%;
    max-width: var(--shell-max);
    margin-inline: auto;
    padding-inline: var(--shell-pad);
}

.site-body {
    background: #fff;
}

.site-wrapper {
    background: #fff;
    min-height: 100vh;
    overflow-x: clip;
}

/* Navigation Styles */
.nav-link {
    position: relative;
    padding: 0.5rem 0;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* Card Styles */
.card {
    background: #fff;
    border-radius: 1.5rem;
    border: 1px solid var(--soft-gray);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 60px -15px rgba(0, 0, 0, 0.12);
}

/* Button Styles */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    border-radius: 1.25rem;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.1);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}

.btn:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.btn-primary {
    background: var(--primary-color);
    color: #fff;
    box-shadow: var(--shadow-primary);
}

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 15px 35px -10px rgba(31, 120, 168, 0.45);
}

.btn-secondary {
    background: var(--secondary-color);
    color: #fff;
    box-shadow: var(--shadow-secondary);
}

.btn-secondary:hover {
    background: var(--secondary-dark);
    transform: translateY(-2px);
    box-shadow: 0 15px 35px -10px rgba(243, 111, 33, 0.45);
}

.btn-outline {
    background: transparent;
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-outline:hover {
    background: var(--primary-color);
    color: #fff;
    transform: translateY(-2px);
}

.btn-dark {
    background: #000;
    color: #fff;
}

.btn-dark:hover {
    background: #111;
    transform: translateY(-2px);
}

/* Buttons for blue backgrounds (homepage hero) */
.btn-light {
    background: #fff;
    color: var(--primary-color);
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.35);
}

.btn-light:hover {
    background: #F3F4F6;
    color: var(--primary-dark);
    transform: translateY(-2px);
}

.btn-outline-light {
    background: transparent;
    color: #fff;
    border-color: #fff;
}

.btn-outline-light:hover {
    background: #fff;
    color: var(--primary-color);
    transform: translateY(-2px);
}

/* Sections */
.section {
    padding: clamp(3rem, 8vw, 6rem) 0;
}

/* ── Brand palette ────────────────────────────────────────────────
   The two brand colours are always used pure: solid fills, solid text,
   solid rules. No gradients, glows or pale tints of blue or orange.
   Blue carries the page heroes; orange the calls to action and labels. */

/* Page hero: solid blue with a solid orange edge */
.page-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    color: #fff;
    background: var(--primary-color);
    border-bottom: 4px solid var(--secondary-color);
}
/* Orange variant (alternating service categories) with a blue edge */
.page-hero--orange {
    background: var(--secondary-color);
    border-bottom-color: var(--primary-color);
}

/* Closing call-to-action band: solid orange */
.cta-band {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: var(--secondary-color);
}

/* Small label above a section heading: plain coloured text between short rules */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--secondary-color);
}
.eyebrow::before {
    content: '';
    width: 1.75rem;
    height: 2px;
    background: currentColor;
    flex-shrink: 0;
}
.text-center .eyebrow::after {
    content: '';
    width: 1.75rem;
    height: 2px;
    background: currentColor;
    flex-shrink: 0;
}
.eyebrow > i,
.eyebrow > span[aria-hidden] { display: none; }   /* labels are text only */
.eyebrow--blue  { color: var(--primary-color); }
.eyebrow--light { color: #fff; }
.eyebrow--light::before,
.eyebrow--light::after { background: var(--secondary-color); }

/* Two-tone rule under a heading */
.heading-rule {
    display: block;
    width: 64px;
    height: 4px;
    margin: 1rem auto 0;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--primary-color) 50%, var(--secondary-color) 50%);
}

/* Main navigation: two-tone bottom edge */
.site-nav {
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-color) 55%, var(--secondary-color) 55%, var(--secondary-color) 100%) 1;
}


/* ── Page heroes (includes/heroes.php) ──────────────────────────────
   Six layouts an admin picks per page. Phones and tablets stack the words
   and the photo; from 1024px the photo takes its place beside or behind the
   words. Colours come from the tone: blue (default) or orange. */
.hx { position: relative; --hx-color: var(--primary-color); --hx-other: var(--secondary-color); }
.hx--tone-orange { --hx-color: var(--secondary-color); --hx-other: var(--primary-color); }
.hx--lg { --hx-h: 640px; }
.hx--md { --hx-h: 500px; }
.hx__title { font-weight: 800; letter-spacing: -0.025em; line-height: 1.08; font-size: var(--fs-page); margin-top: 1.1rem; text-wrap: balance; }
.hx--lg .hx__title { font-size: var(--fs-display); }
.hx__title .hx__hl { color: var(--secondary-color); }
.hx--tone-orange .hx__title .hx__hl { color: inherit; text-decoration: underline; text-decoration-color: var(--primary-color); text-decoration-thickness: 0.1em; text-underline-offset: 0.12em; }
.hx--light.hx--tone-orange .hx__title .hx__hl { color: var(--secondary-color); text-decoration: none; }
.hx__text { font-size: var(--fs-lead); line-height: 1.7; margin-top: 1.1rem; max-width: 36rem; text-wrap: pretty; }
.hx--lg .hx__text { font-size: clamp(1.125rem, 1.4vw, 1.25rem); }
.hx__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.hx__points { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 2rem; padding-top: 1.5rem; font-size: 0.875rem; font-weight: 500; border-top: 1px solid rgba(255, 255, 255, 0.25); }
.hx__points li { display: inline-flex; align-items: center; gap: 0.5rem; }
.hx__points i { color: var(--secondary-color); }
.hx--tone-orange .hx__points i { color: #fff; }
.hx__list { display: grid; gap: 1rem; margin-top: 1.75rem; }
.hx__list li { display: flex; align-items: flex-start; gap: 0.75rem; }
.hx__list strong { display: block; font-weight: 600; }
.hx__desc { display: block; font-size: 0.875rem; opacity: 0.85; margin-top: 0.15rem; }
.hx__tick { width: 1.5rem; height: 1.5rem; border-radius: 0.4rem; background: var(--hx-other); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; flex-shrink: 0; margin-top: 0.1rem; }
.hx__crumb { font-size: 0.875rem; margin-bottom: 1.25rem; opacity: 0.85; }
.hx__crumb a:hover { text-decoration: underline; }
.hx--classic .hx__search, .hx--panorama .hx__search { margin-inline: auto; }
.hx__search { box-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.45); }
.hx__media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: #E5E7EB; }
.hx__media img, .hx__media .hx__clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hx__media .hx__clip { display: block; background: #E5E7EB; }
.hx__clip-toggle { position: absolute; top: 1rem; right: 1rem; z-index: 2; width: 2.25rem; height: 2.25rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: #fff; color: #111827; font-size: 0.8rem; border: 0; cursor: pointer; }
.hx__clip-toggle:hover { color: var(--primary-color); }
.hx__clip-toggle:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 3px; }

/* "Next live training" card on the photo */
.hx__next { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; z-index: 2; display: flex; align-items: center; gap: 0.75rem; background: #fff; color: #111827; border-radius: 1rem; padding: 0.8rem 0.9rem; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.5); transition: transform 0.2s; }
.hx__next:hover { transform: translateY(-2px); }
.hx__next > i { margin-left: auto; color: var(--primary-color); }
.hx__date { width: 2.75rem; height: 2.75rem; border-radius: 0.6rem; background: var(--secondary-color); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; flex-shrink: 0; }
.hx__date span { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; }
.hx__date b { font-size: 1.125rem; font-weight: 800; margin-top: 0.15rem; }
.hx__next-label { display: block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--secondary-color); }
.hx__next-title { display: block; font-size: 0.875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Coloured layouts: the section itself is the colour */
.hx--classic, .hx--split, .hx--angled, .hx--panorama { background: var(--hx-color); color: #fff; border-bottom: 4px solid var(--hx-other); }
.hx--classic .hx__text, .hx--split .hx__text, .hx--angled .hx__text, .hx--panorama .hx__text, .hx--overlap .hx__text { color: rgba(255, 255, 255, 0.92); }
.hx__copy { padding-block: 3rem 2.75rem; }

/* Classic: centred words, no photo */
.hx--classic .hx__copy { max-width: 56rem; margin-inline: auto; padding-block: 4rem; }
.hx--classic .hx__text, .hx--panorama .hx__text { margin-inline: auto; }
.hx--classic .hx__ctas, .hx--classic .hx__points, .hx--panorama .hx__ctas, .hx--panorama .hx__points { justify-content: center; }

/* Angled: a slanted top edge on phones, a slanted left edge on large screens */
.hx--angled .hx__mediawrap { position: relative; }
.hx--angled .hx__media { clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%); }
.hx__stripe { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.hx__stripe polygon { fill: var(--hx-other); }
.hx__stripe-d { display: none; }

/* Overlap: the colour panel carries the words */
.hx--overlap { background: #fff; border-bottom: 1px solid #E5E7EB; }
.hx--overlap .hx__panel { position: relative; background: var(--hx-color); color: #fff; padding: 2rem 1.5rem 1.75rem; margin-top: -3rem; margin-bottom: 2.5rem; }
.hx--overlap .hx__panel-next { margin-top: 1.5rem; }
.hx--overlap .hx__panel-next .hx__next { position: static; }

/* Light: white opening, the photo on a colour block */
.hx--light { background: #fff; color: #111827; border-bottom: 1px solid #E5E7EB; overflow: hidden; }
.hx--light .hx__text { color: #4B5563; }
.hx--light .hx__points { border-top-color: #E5E7EB; }
.hx--light .hx__points i { color: var(--hx-other); }
.hx--light .eyebrow { color: var(--hx-other); }
.hx--light .hx__mediacol { position: relative; padding: 1.5rem 0 2.5rem; }
.hx--light .hx__block { position: absolute; left: 3rem; right: calc(-1 * var(--shell-pad)); top: 0; bottom: 0; background: var(--hx-color); }
.hx--light .hx__media { margin-right: 1.75rem; border-radius: 1rem; aspect-ratio: 4 / 3; }
.hx--light .hx__next { position: relative; left: auto; right: auto; bottom: auto; margin: -2rem 2.5rem 0 0.75rem; }

/* Panorama: centred words, the photo as a wide band */
.hx--panorama .hx__copy { max-width: 52rem; margin-inline: auto; }
.hx--panorama .hx__media { overflow: visible; }
.hx--panorama .hx__media img, .hx--panorama .hx__media .hx__clip { clip-path: inset(0); }
.hx--panorama .hx__next { left: 50%; right: auto; top: 0; bottom: auto; transform: translate(-50%, -50%); width: min(92%, 24rem); text-align: left; }
.hx--panorama .hx__next:hover { transform: translate(-50%, calc(-50% - 2px)); }

@media (min-width: 1024px) {
    .hx__copy { padding-block: 4.5rem; }
    .hx--classic .hx__copy { padding-block: 5rem; }
    .hx--md.hx--classic .hx__copy { padding-block: 4.25rem; }

    /* Split: words in the left half of the content column, photo in the right half of the screen */
    .hx--split .hx__inner, .hx--angled .hx__inner { display: flex; align-items: center; min-height: var(--hx-h); }
    .hx--split .hx__copy { width: calc(50% - 2.5rem); }
    .hx--split .hx__media { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; aspect-ratio: auto; }
    .hx--split .hx__next, .hx--angled .hx__next { left: auto; right: 2.5rem; bottom: 2.5rem; width: 22.5rem; }
    .hx--split .hx__next { left: -2.75rem; right: auto; }

    /* Angled */
    .hx--angled .hx__copy { width: calc(50% - 3.75rem); }
    .hx--angled .hx__mediawrap { position: absolute; top: 0; right: 0; bottom: 0; width: 52%; }
    .hx--angled .hx__media { position: absolute; inset: 0; aspect-ratio: auto; clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%); }
    .hx__stripe-m { display: none; }
    .hx__stripe-d { display: inline; }

    /* Overlap */
    .hx--overlap .hx__media { position: absolute; top: 0; right: 0; bottom: 3.5rem; width: 62%; aspect-ratio: auto; }
    .hx--overlap .hx__inner { position: relative; display: flex; align-items: center; min-height: calc(var(--hx-h) + 2rem); padding-block: 3rem; }
    .hx--overlap .hx__panel { width: 54%; margin: 0; padding: 3.25rem 3.25rem 2.75rem; }

    /* Light */
    .hx--light .hx__inner { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 3.5rem; align-items: center; min-height: var(--hx-h); }
    .hx--light .hx__mediacol { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 0; }
    .hx--light .hx__block { left: 34%; right: calc(-1 * ((100vw - min(100vw, var(--shell-max))) / 2 + var(--shell-pad))); }
    .hx--light .hx__media { width: 82%; margin: 3rem 0; border-radius: 1.25rem; aspect-ratio: 4 / 5; }
    .hx--md.hx--light .hx__media { aspect-ratio: 1 / 1; width: 76%; }
    .hx--light .hx__next { position: absolute; left: -3rem; bottom: 3.75rem; margin: 0; width: 21.5rem; }

    /* Panorama */
    .hx--panorama .hx__copy { padding-block: 5rem 4.5rem; }
    .hx--panorama .hx__media { aspect-ratio: auto; height: 360px; }
    .hx--lg.hx--panorama .hx__media { height: 400px; }
}
@media (min-width: 1536px) {
    .hx--lg.hx--panorama .hx__media { height: 440px; }
}

/* Contained bands (a band inside a page, e.g. the homepage feature band): the photo stays
   inside the content column, so the band has the same margin on the right as on the left */
.hx--contained .hx__inner { position: relative; }
.hx--contained.hx--light .hx__block { right: 0; }
.hx--contained.hx--overlap .hx__inner { padding-top: 2.5rem; }
.hx--contained.hx--split .hx__media, .hx--contained.hx--angled .hx__mediawrap, .hx--contained.hx--panorama .hx__media { margin-bottom: 2.5rem; }
.hx--contained.hx--panorama .hx__media img, .hx--contained.hx--panorama .hx__media .hx__clip, .hx--contained.hx--split .hx__media { border-radius: 1rem; }
.hx--contained.hx--split .hx__media { overflow: hidden; }
@media (min-width: 1024px) {
    .hx--contained.hx--overlap .hx__inner { padding-block: 3rem; }
    .hx--contained.hx--overlap .hx__media { top: 0; right: var(--shell-pad); bottom: 3.5rem; width: calc((100% - 2 * var(--shell-pad)) * 0.62); }
    .hx--contained.hx--split .hx__media { top: 3rem; right: var(--shell-pad); bottom: 3rem; width: calc((100% - 2 * var(--shell-pad)) * 0.5 - 1rem); margin: 0; }
    .hx--contained.hx--angled .hx__mediawrap { top: 0; right: var(--shell-pad); bottom: 0; width: calc((100% - 2 * var(--shell-pad)) * 0.52); margin: 0; }
    .hx--contained.hx--light .hx__block { right: 0; }
    .hx--contained.hx--panorama .hx__media { margin-bottom: 3.5rem; }
}

/* ── Shop cards and the product photo (the "Light" hero idea) ─────
   The photo rests on a solid brand-colour block that shows along its top and
   right edge; the photo runs past the block's lower end onto white, and the
   category label overlaps its lower edge like the hero's training card. */
.pcard { --pc: var(--primary-color); display: flex; flex-direction: column; background: #fff; border: 1px solid #E5E7EB; border-radius: 1.25rem; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.pcard--orange { --pc: var(--secondary-color); }
.pcard:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -24px rgba(15, 23, 42, 0.35); }
.pcard__media { position: relative; padding: 1.5rem 2rem 0 1.5rem; }
.pcard__block { position: absolute; top: 0; right: 0; bottom: 3rem; left: 38%; background: var(--pc); }
.pcard__photo { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 0.875rem; overflow: hidden; background: #E5E7EB; box-shadow: 0 18px 32px -20px rgba(15, 23, 42, 0.55); }
.pcard__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.pcard:hover .pcard__photo img { transform: scale(1.04); }
.pcard__badge { position: absolute; top: 2.25rem; left: 2.25rem; z-index: 2; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--secondary-color); color: #fff; font-size: 0.75rem; font-weight: 700; }
.pcard--orange .pcard__badge { background: var(--primary-color); }
.pcard__tag { position: absolute; left: 2.25rem; bottom: -0.9rem; z-index: 2; padding: 0.4rem 0.85rem; border-radius: 999px; background: #fff; color: var(--pc); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 10px 22px -12px rgba(15, 23, 42, 0.45); }
.pcard__body { display: flex; flex-direction: column; flex: 1; padding: 1.9rem 1.5rem 1.5rem; }

.pframe { position: relative; padding: 2rem 2.5rem 3rem 0; }
.pframe__block { position: absolute; top: 0; right: 0; bottom: 0; left: 32%; background: var(--primary-color); }
.pframe__photo { position: relative; aspect-ratio: 4 / 3; border-radius: 1.25rem; overflow: hidden; background: #E5E7EB; box-shadow: 0 28px 50px -28px rgba(15, 23, 42, 0.6); }
.pframe__photo img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) {
    .pcard, .pcard__photo img { transition: none; }
    .pcard:hover, .pcard:hover .pcard__photo img { transform: none; }
}

/* Team members (About page): a wide photo, or their initials on brand colour.
   Four to a row on a wide screen, then three, two and one as it narrows; the row
   stays centred, so a last row of one or two isn't stranded on the left. */
.tgrid { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; max-width: 70rem; margin-inline: auto; }
.tgrid > .tcard { flex: 0 1 15rem; }
@media (max-width: 30rem) { .tgrid > .tcard { flex: 1 1 100%; } }
.tcard { --tc: var(--primary-color); display: flex; flex-direction: column; background: #fff; border: 1px solid #E5E7EB; border-radius: 1.25rem; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.tcard--orange { --tc: var(--secondary-color); }
.tcard:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -24px rgba(15, 23, 42, 0.35); }
.tcard__photo { position: relative; aspect-ratio: 5 / 3; max-height: 11rem; background: #E5E7EB; }
/* Absolute, so a tall photo fills the band instead of stretching it */
.tcard__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tcard__initials { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--tc); color: #fff; font-size: clamp(1.75rem, 4vw, 2.25rem); font-weight: 700; letter-spacing: 0.06em; }
.tcard__body { display: flex; flex-direction: column; gap: 0.35rem; flex: 1; padding: 1.5rem; }
.tcard__role { color: var(--tc); font-weight: 600; }
.tcard__social { display: flex; gap: 0.9rem; margin-top: 0.65rem; font-size: 1.15rem; }
.tcard__social a { color: #9CA3AF; transition: color 0.2s ease; }
.tcard__social a:hover, .tcard__social a:focus-visible { color: var(--tc); }
@media (prefers-reduced-motion: reduce) {
    .tcard { transition: none; }
    .tcard:hover { transform: none; }
}

/* The menu bar needs a little more room than page content */
.shell-wide { max-width: calc(var(--shell-max) + 160px); }

/* Footer: brand blue with white text and orange accents. */
.site-footer {
    background: var(--primary-color);
    color: #f7fafc;
    font-size: 0.9375rem;
}
.footer-heading {
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}
.footer-links { display: grid; gap: 0.7rem; }
.footer-links a,
.footer-contact a { color: #f7fafc; transition: color 0.2s; }
.footer-links a:hover,
.footer-contact a:hover { color: #fff; }
.footer-contact { display: grid; gap: 0.9rem; }
.footer-contact li { display: flex; align-items: flex-start; gap: 0.75rem; }
.footer-contact i { color: var(--secondary-color); width: 1rem; margin-top: 0.3rem; font-size: 0.8rem; text-align: center; flex-shrink: 0; }
.footer-social {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #D1D5DB;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.footer-social:hover { color: #fff; }

/* Testimonial marquee - animations.js repeats the cards so one set fills the
   row, then duplicates that set; translateX(-50%) is exactly one set wide */
.testimonial-track {
    display: flex;
    width: max-content;
    animation: scrollTrack var(--track-duration, 30s) linear infinite;
}

.testimonial-track > * {
    flex-shrink: 0;
    margin-right: 1.5rem;
}

.testimonial-track:hover {
    animation-play-state: paused;
}

@keyframes scrollTrack {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

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

/* Blog article body (rich text from the admin editor) */
.blog-content { font-size: var(--fs-article); line-height: 1.75; }
.blog-content > * + * { margin-top: 1.25rem; }
.blog-content h2 { font-size: var(--fs-panel); font-weight: 700; line-height: 1.3; color: #111827; margin-top: 2.5rem; }
.blog-content h3 { font-size: var(--fs-card); font-weight: 700; line-height: 1.35; color: #111827; margin-top: 2rem; }
.blog-content h4 { font-size: var(--fs-item); font-weight: 700; color: #111827; margin-top: 1.5rem; }
.blog-content ul, .blog-content ol { padding-left: 1.5rem; }
.blog-content ul { list-style: disc; }
.blog-content ol { list-style: decimal; }
.blog-content li + li { margin-top: 0.4rem; }
.blog-content a { color: var(--primary-color); text-decoration: underline; }
.blog-content blockquote { border-left: 4px solid var(--secondary-color); padding-left: 1rem; color: #4B5563; font-style: italic; }
.blog-content pre, .blog-content code { font-family: ui-monospace, monospace; background: #F3F4F6; border-radius: 0.375rem; }
.blog-content code { padding: 0.1rem 0.35rem; font-size: 0.9em; }
.blog-content pre { padding: 1rem; overflow-x: auto; }
.blog-content img { border-radius: 1rem; }

/* Legal pages (Privacy, Terms, Cookies): the contents list sits beside the text
   from 1024px and above it on phones; sections are numbered like clauses */
.legal-updated { margin-top: 1.25rem; font-size: 0.875rem; color: rgba(255, 255, 255, 0.85); }
.legal-section { padding-block: 3rem 4.5rem; }
.legal { display: grid; gap: 2rem; }
.legal__aside { display: grid; gap: 1.75rem; align-content: start; min-width: 0; }
.legal__toc { border: 1px solid #E5E7EB; border-radius: 1rem; background: #fff; }
.legal__toc summary { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 1.1rem; cursor: pointer; list-style: none; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #111827; }
.legal__toc summary::-webkit-details-marker { display: none; }
.legal__toc summary::after { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.7rem; color: #6B7280; transition: transform 0.2s; }
.legal__toc[open] summary::after { transform: rotate(180deg); }
.legal__toc ol { counter-reset: toc; display: grid; gap: 0.1rem; padding: 0 0.6rem 0.8rem; }
.legal__toc li { counter-increment: toc; }
.legal__toc a { display: flex; gap: 0.5rem; padding: 0.4rem 0.6rem; border-left: 2px solid transparent; font-size: 0.875rem; line-height: 1.4; color: #4B5563; transition: color 0.2s; }
.legal__toc a::before { content: counter(toc) "."; min-width: 1.35rem; color: #9CA3AF; font-variant-numeric: tabular-nums; }
.legal__toc a:hover { color: var(--primary-color); }
.legal__toc a[aria-current] { color: var(--primary-color); font-weight: 600; border-left-color: var(--secondary-color); }
.legal__toc a[aria-current]::before { color: var(--primary-color); }
.legal__more { padding-inline: 0.25rem; font-size: 0.875rem; }
.legal__more--side { display: none; }
.legal__more--end { padding-top: 1.5rem; border-top: 1px solid #E5E7EB; }
.legal__label { margin-bottom: 0.6rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6B7280; }
.legal__more ul { display: grid; gap: 0.45rem; }
.legal__more li a { color: #374151; transition: color 0.2s; }
.legal__more li a:hover, .legal__more li a[aria-current="page"] { color: var(--primary-color); }
.legal__more li a[aria-current="page"] { font-weight: 600; }
.legal__ask { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid #E5E7EB; color: #6B7280; }
.legal__ask a { color: var(--primary-color); overflow-wrap: anywhere; }
.legal__body { max-width: 46rem; min-width: 0; color: #1F2937; counter-reset: clause; }
.legal__body > p:first-child { font-size: var(--fs-lead); color: #374151; }
.legal__body h2 { counter-increment: clause; display: flex; gap: 0.75rem; margin-top: 2.75rem; padding-top: 2rem; border-top: 1px solid #E5E7EB; scroll-margin-top: 100px; text-wrap: balance; }
.legal__body h2::before { content: counter(clause) "."; color: var(--secondary-color); font-variant-numeric: tabular-nums; }
.legal__body h3 { margin-top: 1.75rem; font-size: var(--fs-item); }
.legal__body h3 + p, .legal__body h3 + ul { margin-top: 0.4rem; }
.legal-table { overflow-x: auto; border: 1px solid #E5E7EB; border-radius: 0.75rem; }
.legal-table table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; }
.legal-table th { padding: 0.75rem 1rem; text-align: left; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #6B7280; background: #F9FAFB; border-bottom: 1px solid #E5E7EB; }
.legal-table td { padding: 0.85rem 1rem; vertical-align: top; border-top: 1px solid #F3F4F6; }
.legal-table td:first-child { white-space: nowrap; }
@media (max-width: 639px) {
    .legal-table thead { display: none; }
    .legal-table tr { display: block; padding: 0.75rem 1rem; border-top: 1px solid #E5E7EB; }
    .legal-table tr:first-child { border-top: 0; }
    .legal-table td { display: grid; grid-template-columns: 6.25rem minmax(0, 1fr); gap: 0.75rem; padding: 0.3rem 0; border: 0; }
    .legal-table td:first-child { white-space: normal; }
    .legal-table td::before { content: attr(data-label); padding-top: 0.15rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #6B7280; }
}
@media (min-width: 768px) {
    .legal__body h2 { scroll-margin-top: 135px; }
}
@media (min-width: 1024px) {
    .legal-section { padding-block: 4rem 6rem; }
    .legal { grid-template-columns: 17rem minmax(0, 1fr); gap: 4rem; }
    .legal__aside { position: sticky; top: 141px; max-height: calc(100vh - 160px); overflow-y: auto; }
    .legal__toc { border: 0; border-radius: 0; background: transparent; }
    .legal__toc summary { padding: 0 0 0.75rem calc(0.6rem + 2px); pointer-events: none; }
    .legal__toc summary::after { display: none; }
    .legal__toc ol { padding: 0; }
    .legal__more { padding-inline: calc(0.6rem + 2px) 0; }
    .legal__more--side { display: block; }
    .legal__more--end { display: none; }
}

/* Cookie choice (only when Google Analytics is set up in Settings > SEO) */
.cookie-banner { position: fixed; z-index: 60; left: 1rem; right: 1rem; bottom: 1rem; max-width: 26rem; padding: 1.25rem; background: #fff; color: #374151; border: 1px solid #E5E7EB; border-radius: 1rem; box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.35); font-size: 0.9rem; line-height: 1.55; }
.cookie-banner__title { margin-bottom: 0.35rem; font-weight: 700; color: #111827; }
.cookie-banner a { color: var(--primary-color); text-decoration: underline; }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.cookie-banner .btn { padding: 0.55rem 1.1rem; font-size: 0.85rem; border-radius: 0.9rem; }
@media (min-width: 640px) { .cookie-banner { left: 1.5rem; right: auto; bottom: 1.5rem; } }

/* Footer bottom bar: copyright and the legal links */
.footer-base { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; text-align: center; }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.25rem; }
.footer-legal a, .footer-legal button { padding: 0; border: 0; background: none; font: inherit; color: #9CA3AF; cursor: pointer; transition: color 0.2s; }
.footer-legal a:hover, .footer-legal button:hover { color: #fff; }
@media (min-width: 768px) { .footer-base { flex-direction: row; flex-wrap: wrap; gap: 0.5rem 1.75rem; text-align: left; } }

/* Blog post: like button and share row */
.post-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #E5E7EB; }
.like-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.1rem; border: 2px solid var(--secondary-color); border-radius: 999px; background: #fff; color: var(--secondary-color); font: inherit; font-size: 0.9375rem; font-weight: 600; cursor: pointer; transition: background-color 0.2s, color 0.2s, transform 0.2s; }
.like-btn:hover { background: var(--secondary-color); color: #fff; transform: translateY(-1px); }
.like-btn.on { background: var(--secondary-color); color: #fff; }
.like-btn:disabled { opacity: 0.6; cursor: default; }
.like-count { min-width: 1.5rem; padding: 0.05rem 0.45rem; border-radius: 999px; background: rgba(0, 0, 0, 0.08); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.share-count { font-size: 0.8125rem; color: #6B7280; font-variant-numeric: tabular-nums; }
.share-row button { border: 0; cursor: pointer; font: inherit; }

/* Under the chat box */
.chat-note { margin-top: 0.5rem; font-size: 0.7rem; line-height: 1.4; color: #6B7280; }
.chat-note a { text-decoration: underline; }

/* Form Styles
   Wrapped in :where() so these defaults have zero specificity: any Tailwind
   class on a field (pl-10 for an icon, rounded-xl, border-gray-300 ...) wins. */
:where(input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="url"],
select,
textarea) {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #E0E0E0;
    border-radius: 0.5rem;
    font-size: 1rem;
    transition: all 0.3s ease;
    font-family: inherit;
}

:where(input, select, textarea):focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(31, 120, 168, 0.1);
}

:where(label) {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #333;
}

/* Pagination */
.pagination {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin: 2rem 0;
}

.pagination-link {
    padding: 0.5rem 1rem;
    border: 1px solid #E0E0E0;
    border-radius: 0.5rem;
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
}

.pagination-link:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.pagination-link.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Loading Spinner */
.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: var(--primary-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Alert Messages */
.alert {
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.alert-success {
    background: #E8F5E9;
    color: #2E7D32;
    border-left: 4px solid #4CAF50;
}

.alert-error {
    background: #FFEBEE;
    color: #C62828;
    border-left: 4px solid #F44336;
}

.alert-warning {
    background: #FFF3E0;
    color: #EF6C00;
    border-left: 4px solid #FF9800;
}

.alert-info {
    background: #E8F2F8;
    color: #155F87;
    border-left: 4px solid #1F78A8;
}

/* Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: white;
    padding: 2rem;
    border-radius: 1rem;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.modal.active .modal-content {
    transform: scale(1);
}

/* Badge */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.badge-primary {
    background: var(--primary-color);
    color: white;
}

.badge-secondary {
    background: var(--secondary-color);
    color: white;
}

.badge-success {
    background: #4CAF50;
    color: white;
}

.badge-warning {
    background: #FF9800;
    color: white;
}

.badge-danger {
    background: #F44336;
    color: white;
}

/* Table Styles */
table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid #E0E0E0;
}

th {
    background: var(--light-gray);
    font-weight: 600;
    color: #333;
}

tr:hover {
    background: #F9FAFB;
}

/* Gradient Text */
.gradient-text {
    color: var(--secondary-color);   /* kept for old content; brand colours are used pure */
}

/* Floating Label */
.floating-label {
    position: relative;
}

.floating-label input,
.floating-label textarea {
    padding-top: 1.5rem;
}

.floating-label label {
    position: absolute;
    top: 1rem;
    left: 1rem;
    transition: all 0.3s ease;
    pointer-events: none;
}

.floating-label input:focus + label,
.floating-label input:not(:placeholder-shown) + label,
.floating-label textarea:focus + label,
.floating-label textarea:not(:placeholder-shown) + label {
    top: 0.25rem;
    font-size: 0.75rem;
    color: var(--primary-color);
}

/* Responsive Images */
img {
    max-width: 100%;
    height: auto;
}

/* Skeleton Loader */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: 0.5rem;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Scrollbar Styles */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #155F87;
}

/* Print Styles */
@media print {
    .no-print {
        display: none !important;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .container {
        padding: 0 1rem;
    }
    
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.75rem;
    }
}

/* Utility Classes */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

.p-1 { padding: 0.5rem; }
.p-2 { padding: 1rem; }
.p-3 { padding: 1.5rem; }
.p-4 { padding: 2rem; }
/* ── MtaaLex LFMS product page (pages/lfms.php) ─────────────────────
   Solid brand colour only: the featured plan and the module icons are filled
   blue or orange, never tinted. */
.lfms-intro { display: grid; gap: 1.75rem; align-items: center; }
@media (min-width: 64rem) { .lfms-intro { grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; } }
.lfms-intro__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; }
.lfms-docs { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; color: var(--primary-color); }
.lfms-docs:hover { text-decoration: underline; }

.lfms-split { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 64rem) { .lfms-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; } }

.lfms-module { --lc: var(--primary-color); background: #fff; border: 1px solid #E5E7EB; border-radius: 1.25rem; padding: 2rem 1.75rem; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.lfms-module--orange { --lc: var(--secondary-color); }
.lfms-module:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -24px rgba(15, 23, 42, 0.35); }
.lfms-module__icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 0.875rem; background: var(--lc); color: #fff; font-size: 1.25rem; margin-bottom: 1.25rem; }

.lfms-chips { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; margin-top: 1.75rem; }
.lfms-chips li { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; color: #374151; }

.lfms-chat { background: #fff; border: 1px solid #E5E7EB; border-radius: 1.25rem; overflow: hidden; box-shadow: 0 24px 48px -28px rgba(15, 23, 42, 0.45); }
.lfms-chat__head { display: flex; align-items: center; gap: 0.5rem; padding: 0.9rem 1.25rem; background: var(--primary-color); color: #fff; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; }
.lfms-chat__block { padding: 1.25rem; }
.lfms-chat__block--answer { border-top: 1px solid #E5E7EB; background: var(--light-gray); }
.lfms-chat__label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #6B7280; margin-bottom: 0.5rem; }
.lfms-chat__prompt { color: #111827; font-weight: 600; }
.lfms-chat__foot { padding: 0.75rem 1.25rem; border-top: 1px solid #E5E7EB; font-size: 0.8125rem; color: #6B7280; }

.lfms-plans { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); align-items: start; }
.lfms-plan { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid #E5E7EB; border-radius: 1.25rem; padding: 2rem 1.5rem; height: 100%; }
.lfms-plan--on { border-color: var(--primary-color); border-width: 2px; box-shadow: 0 28px 56px -32px rgba(15, 23, 42, 0.5); }
.lfms-plan__badge { position: absolute; top: -0.85rem; left: 1.5rem; padding: 0.3rem 0.8rem; border-radius: 999px; background: var(--secondary-color); color: #fff; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.lfms-plan__price { margin: 0.75rem 0 0.25rem; font-size: 2rem; font-weight: 800; color: #111827; line-height: 1.1; }
.lfms-plan__price span { font-size: 0.9375rem; font-weight: 600; color: #6B7280; margin-left: 0.35rem; }
.lfms-plan__note { color: #6B7280; font-size: 0.875rem; min-height: 2.5rem; }
.lfms-plan__list { display: grid; gap: 0.6rem; margin: 1.25rem 0 1.75rem; }
.lfms-plan__list li { display: flex; gap: 0.6rem; align-items: flex-start; color: #374151; font-size: 0.9375rem; }
.lfms-plan__list i { color: var(--primary-color); margin-top: 0.25rem; font-size: 0.8125rem; }
.lfms-plan--on .lfms-plan__list i { color: var(--secondary-color); }
.lfms-plan__cta { margin-top: auto; justify-content: center; }

.lfms-flow { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); counter-reset: none; }
.lfms-flow__step { background: #fff; border: 1px solid #E5E7EB; border-radius: 1.25rem; padding: 1.75rem 1.5rem; }
.lfms-flow__num { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; background: var(--primary-color); color: #fff; font-weight: 800; margin-bottom: 1rem; }
.lfms-flow__step:nth-child(even) .lfms-flow__num { background: var(--secondary-color); }

.lfms-roles { display: grid; gap: 1.25rem; }
@media (min-width: 40rem) { .lfms-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lfms-role { background: #fff; border: 1px solid #E5E7EB; border-left: 4px solid var(--primary-color); border-radius: 0.875rem; padding: 1.35rem 1.5rem; }
.lfms-role--orange { border-left-color: var(--secondary-color); }

@media (prefers-reduced-motion: reduce) {
    .lfms-module { transition: none; }
    .lfms-module:hover { transform: none; }
}

/* The flagship-product band on the homepage: solid brand blue, no gradient */
.lfms-band { background: var(--primary-color); color: #fff; padding-block: 4.5rem; }
.lfms-band__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 64rem) { .lfms-band__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 4rem; } }
.lfms-band__list { display: grid; gap: 0.9rem; }
@media (min-width: 30rem) { .lfms-band__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lfms-band__list li { display: flex; align-items: center; gap: 0.75rem; padding: 0.95rem 1.1rem; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 0.875rem; font-weight: 600; }
.lfms-band__list i { color: #fff; font-size: 1.05rem; width: 1.5rem; text-align: center; flex-shrink: 0; }

/* ── Rotating hero (includes/heroes.php renderHeroRotator, assets/js/hero.js) ──
   Slides share one grid cell, so the stage is as tall as the tallest of them and
   nothing moves when they change. The incoming slide fades in on top of the one
   leaving — never through the page background — and its words rise a little as
   it arrives. Before JavaScript runs, only the first slide is visible. */
.hxr { position: relative; }
.hxr__stage { display: grid; }
/* One long, even dissolve of the whole slide — the same rate from start to
   finish, like a film dissolve. Nothing inside the slide animates separately:
   parts that appear and disappear on their own are what make a change feel
   abrupt. The slide arriving is opaque, so the one leaving is never seen
   fading underneath it. */
.hxr__slide {
    grid-area: 1 / 1;
    display: grid;
    align-content: center;      /* a shorter slide sits in the middle of the stage */
    background: #fff;           /* opaque, so the slide underneath never shows through */
    opacity: 0;
    visibility: hidden;
    will-change: opacity;
    transition: opacity 2.2s linear, visibility 0s linear 2.2s;
}
.hxr__slide.is-on { opacity: 1; visibility: visible; z-index: 2; transition-delay: 0s; }
.hxr__slide.is-in { visibility: visible; z-index: 3; }

/* The photo keeps drifting the whole time a slide is up, so the picture is
   always moving a little and the dissolve has nothing to start or stop */
.hxr__slide .hx__media img { transform: scale(1.05); transition: transform 16s linear; }
.hxr__slide.is-on .hx__media img { transform: scale(1); }
/* Out of sight: back to the start, ready for its next turn */
.hxr__slide:not(.is-on):not(.is-in) .hx__media img { transition: none; }

/* Room under every slide for the controls, so they never sit on the words */
.hxr .hx { padding-bottom: 2.5rem; }

.hxr__controls {
    position: absolute;
    left: 50%;
    bottom: 1.1rem;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 10px 30px -12px rgba(15, 23, 42, 0.45);
}
.hxr__dot {
    width: 0.5rem;
    height: 0.5rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #C7CDD4;
    cursor: pointer;
    transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease;
}
.hxr__dot:hover { background: #8A93A0; }
.hxr__dot.is-on { width: 1.6rem; background: var(--secondary-color); }
.hxr__pause {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.15rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: none;
    color: #6B7280;
    font-size: 0.6rem;
    cursor: pointer;
}
.hxr__pause:hover { color: var(--primary-color); }
.hxr__dot:focus-visible, .hxr__pause:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 3px; }

.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;
}

@media (prefers-reduced-motion: reduce) {
    .hxr__slide, .hxr__slide .hx__media img { transition: none; will-change: auto; }
    .hxr__slide .hx__media img { transform: none; }
}

.material-icon { display: inline-block; width: 1.25em; height: 1.25em; vertical-align: middle; flex-shrink: 0; }
.home-audience { background: var(--light-gray); border-block: 1px solid var(--soft-gray); padding-block: 1.5rem; text-align: center; }
.home-audience p { color: #64748b; font-size: 0.8125rem; margin-bottom: 0.75rem; }
.home-audience ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 2rem; list-style: none; font-size: 0.9375rem; font-weight: 600; color: #334155; }
.home-card-grid { display: grid; gap: 1.5rem; }
.home-content-card { min-width: 0; background: #fff; padding: 1.75rem; border: 1px solid var(--soft-gray); border-radius: 1rem; }
.home-content-card p { line-height: 1.75; }
.home-bridge { margin-top: 2rem; text-align: center; font-weight: 600; color: var(--primary-dark); }
.home-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.home-training-invite { display: grid; gap: 1.5rem; padding: 2rem; background: #fff; border: 1px solid var(--soft-gray); border-radius: 1rem; }
.home-process { display: grid; gap: 1.5rem; list-style: none; counter-reset: practice-step; }
.home-process li { counter-increment: practice-step; min-width: 0; border-top: 2px solid var(--soft-gray); padding-top: 1.25rem; }
.home-process li::before { content: counter(practice-step, decimal-leading-zero); display: block; margin-bottom: 0.75rem; color: var(--secondary-color); font-weight: 700; }
.home-process p { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.7; color: #64748b; }
.home-stats { display: grid; gap: 1.5rem; margin-bottom: 2rem; text-align: center; }
.home-stats strong { display: block; color: var(--primary-dark); font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.3; }
.home-stats p { margin-top: 0.5rem; color: #64748b; font-size: 0.9375rem; }
.home-insights { display: grid; gap: 1.5rem; }
.home-label { color: var(--primary-dark); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 1rem; }
.home-text-link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--primary-dark); font-weight: 600; }
.home-text-link:hover { text-decoration: underline; }
.home-quote { background: var(--primary-dark); color: #fff; }
.home-quote .home-label { color: #fff; opacity: 0.8; }
.home-quote blockquote { font-size: clamp(1.5rem, 2vw, 1.875rem); line-height: 1.5; font-weight: 600; margin-bottom: 1.5rem; }
.home-quote blockquote::before { content: '\201c'; }
.home-quote blockquote::after { content: '\201d'; }
.home-newsletter { padding-block: 3rem; background: var(--light-gray); border-block: 1px solid var(--soft-gray); scroll-margin-top: 8rem; }
.home-newsletter__grid { display: grid; gap: 2rem; align-items: center; }
.home-newsletter__form { display: grid; gap: 0.75rem; }
.home-newsletter__form input[type=email] { width: 100%; min-width: 0; padding: 0.9rem 1rem; border: 1px solid #cbd5e1; border-radius: 0.75rem; font: inherit; background: #fff; }
.home-newsletter__form input[type=email]:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.home-newsletter__form [data-newsletter-status] { grid-column: 1 / -1; font-size: 0.875rem; color: var(--primary-dark); }
.home-newsletter__form [data-newsletter-status]:empty { display: none; }
.footer-product-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; padding-block: 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.1); font-size: 0.875rem; }
.footer-product-links strong, .footer-product-links a:hover { color: #fff; }
.lfms-band__list .material-icon { color: var(--secondary-color); }
@media (min-width: 40rem) {
    .home-process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-newsletter__form { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (min-width: 48rem) {
    .home-card-grid, .home-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .home-card-grid--four, .home-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-process { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .home-newsletter__grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
}
@media (min-width: 64rem) {
    .home-card-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .home-training-invite { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}
@media (min-width: 80rem) {
    .home-process { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

.service-card { position: relative; }
.service-card__link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.service-card__link:focus-visible::after { outline: 3px solid var(--primary-color); outline-offset: -3px; border-radius: 1rem; }
.paperless-visual { position: relative; width: 100%; height: 100%; background: #f3f7fa; color: #172b3a; overflow: hidden; }
.paperless-stage { margin: 0; min-width: 0; }
.paperless-caption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; margin-bottom: 0.75rem; }
.paperless-caption strong { color: var(--primary-dark); font-size: clamp(1rem, 1.5vw, 1.25rem); }
.paperless-caption span { color: #526575; font-size: 0.75rem; }
.paperless-office { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 0.75rem; }
.paperless-office img { display: block; position: static; inset: auto; width: 100%; height: 100%; object-fit: cover; }
.paperless-screen { overflow: hidden; border: 1px solid #d5e0e8; border-radius: 0.75rem; background: #fff; }
.paperless-screen > svg { display: block; width: 100%; height: auto; pointer-events: none; }
.paperless-connector { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.75rem 0 1rem; color: var(--primary-dark); }
.paperless-connector .material-icon { width: 2rem; height: 2rem; color: var(--secondary-color); transform: rotate(90deg); }
.paperless-connector span { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.paperless-visual--expanded { height: auto; padding: 1.25rem; border: 1px solid #dce6ed; border-radius: 1.25rem; box-shadow: 0 20px 45px -30px rgba(23,43,58,0.3); }
.lfms-product-preview { display: flex; align-items: center; width: 100%; height: 100%; padding: 1rem; background: #edf4f8; }
.hx--light .hx__media:has(> .lfms-product-preview) { width: 100%; aspect-ratio: 16 / 10; margin-right: 0; }
.hx__media .lfms-product-preview img { position: static; inset: auto; width: 100%; height: auto; object-fit: contain; border-radius: 0.75rem; box-shadow: 0 15px 35px -20px rgba(23,43,58,0.35); }
.paperless-visual--compact .paperless-stage { position: absolute; inset: 0; }
.paperless-visual--compact .paperless-caption { position: absolute; inset: auto 0 0; z-index: 1; display: grid; gap: 0.125rem; margin: 0; padding: 0.875rem 1rem; background: #155f87; }
.paperless-visual--compact .paperless-caption strong { color: #fff; font-size: 1rem; }
.paperless-visual--compact .paperless-caption span { color: #e8f2f8; font-size: 0.625rem; }
.paperless-visual--compact .paperless-office { height: 100%; aspect-ratio: auto; border-radius: 0; }
.paperless-visual--compact .paperless-stage--after { padding: 0.75rem 0.75rem 4.5rem; background: #f3f7fa; opacity: 0; }
.paperless-visual--compact .paperless-screen { height: 100%; border: 0; border-radius: 0; background: transparent; }
.paperless-visual--compact .paperless-screen > svg { height: 100%; }
.paperless-visual--compact .paperless-connector { display: none; }
.paperless-visual--compact.is-motion .paperless-stage--before { animation: paperlessBefore 12s linear infinite; }
.paperless-visual--compact.is-motion .paperless-stage--after { animation: paperlessAfter 12s linear infinite; }
.paperless-visual--expanded.is-motion .paperless-connector .material-icon { animation: paperlessArrow 1.6s ease-in-out infinite; }
.paperless-visual.is-motion .p-docs, .paperless-visual.is-motion .p-nav-docs { animation: paperlessDocuments 12s steps(1,end) infinite; }
.paperless-visual.is-motion .p-cases, .paperless-visual.is-motion .p-nav-cases { animation: paperlessCases 12s steps(1,end) infinite; }
.paperless-visual.is-motion .p-diary, .paperless-visual.is-motion .p-nav-diary { animation: paperlessDiary 12s steps(1,end) infinite; }
.paperless-visual.is-motion .p-cursor { opacity: 1; animation: paperlessPointer 12s steps(1,end) infinite; }
.paperless-visual.is-motion:not(.is-playing) * { animation-play-state: paused; }
@keyframes paperlessBefore { 0%,22%,98%,100% { opacity: 1; } 28%,92% { opacity: 0; } }
@keyframes paperlessAfter { 0%,22%,98%,100% { opacity: 0; } 28%,92% { opacity: 1; } }
@keyframes paperlessDocuments { 0%,96%,100% { opacity: 1; } 48% { opacity: 0; } }
@keyframes paperlessCases { 0%,68%,100% { opacity: 0; } 48% { opacity: 1; } }
@keyframes paperlessDiary { 0%,96%,100% { opacity: 0; } 68% { opacity: 1; } }
@keyframes paperlessPointer { 0%,96%,100% { transform: translateY(0); } 48% { transform: translateY(80px); } 68% { transform: translateY(160px); } }
@keyframes paperlessArrow { 0%,100% { transform: translateY(-3px) rotate(90deg); } 50% { transform: translateY(4px) rotate(90deg); } }
.record-carousel { min-width: 0; }
.record-carousel__track { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 1.5rem; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.record-carousel__track::-webkit-scrollbar { display: none; }
.record-carousel__track:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 4px; border-radius: 1rem; }
.record-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--soft-gray); border-radius: 1rem; overflow: hidden; background: #fff; scroll-snap-align: start; }
.record-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: #f3f7fa; }
.record-card__image { display: block; width: 100%; height: 100%; object-fit: cover; }
.record-card__image--contain { object-fit: contain; padding: 1.5rem; background: #fff; }
.record-card__placeholder { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; background: #edf4f8; border-bottom: 1px solid #dce8f0; }
.record-card__placeholder img { width: 6rem; height: 6rem; object-fit: contain; }
.record-card__body { padding: 1.75rem; }
.record-card__body p { line-height: 1.75; }
.record-carousel__controls { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; margin-bottom: 1.25rem; }
.record-carousel__controls[hidden] { display: none; }
.record-carousel__button { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--primary-color); border-radius: 999px; background: #fff; color: var(--primary-dark); cursor: pointer; flex-shrink: 0; }
.record-carousel__button--previous .material-icon { transform: rotate(180deg); }
.record-carousel__button:hover:not(:disabled) { background: var(--primary-color); color: #fff; }
.record-carousel__button:disabled { opacity: 0.35; cursor: default; }
.record-carousel__button:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 3px; }
.site-footer .footer-social { color: #fff; border-color: rgba(255,255,255,0.4); }
.site-footer #newsletter-form button[type=submit] { color: #172b3a; }
.site-footer .footer-product-links { border-color: rgba(255,255,255,0.25); }
.site-footer .footer-legal, .site-footer .footer-legal a, .site-footer .footer-legal button { color: #f7fafc; }
.site-footer { border-top: 4px solid var(--secondary-color); }
.site-footer .footer-heading::after { content: ''; display: block; width: 2rem; height: 2px; margin-top: 0.75rem; background: #ffe0b2; }
.site-footer a, .site-footer .footer-legal button { transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
.site-footer .footer-links a { display: inline-block; }
.site-footer .footer-links a:hover { transform: translateX(4px); }
.site-footer a:hover, .site-footer .footer-legal button:hover { color: #ffe0b2; }
.site-footer :is(.footer-links, .footer-contact, .footer-product-links, .footer-legal) a:hover, .site-footer .footer-legal button:hover { color: #ffe0b2; text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; }
.site-footer a:focus-visible, .site-footer button:focus-visible { outline: 2px solid #fff; outline-offset: 5px; border-radius: 0.2rem; }
.site-footer .footer-social:hover { background: #fff; border-color: #fff; color: var(--primary-dark); transform: translateY(-3px); }
.site-footer .footer-product-links a[data-conversion] { padding: 0.6rem 1rem; border: 1px solid #fff; border-radius: 0.6rem; background: #fff; color: var(--primary-dark); font-weight: 600; }
.site-footer .footer-product-links a[data-conversion]:hover { background: #ffe0b2; border-color: #ffe0b2; color: #172b3a; text-decoration: none; }
#paperless-transformation:has([data-paperless]) .hx__inner { display: grid; gap: 2rem; align-items: center; min-height: 0; padding-block: 3rem; }
#paperless-transformation:has([data-paperless]) .hx__media { position: relative; inset: auto; width: 100%; margin: 0; aspect-ratio: auto; background: transparent; grid-row: 2; }
#paperless-transformation:has([data-paperless]) .hx__panel { width: 100%; margin: 0; padding: 2rem; border-radius: 1.25rem; grid-row: 1; }
#paperless-service-hero:has([data-paperless]) .hx__inner { display: grid; gap: 2.5rem; align-items: center; min-height: 0; padding-block: 3rem; }
#paperless-service-hero:has([data-paperless]) .hx__copy { width: 100%; }
#paperless-service-hero:has([data-paperless]) .hx__media { position: relative; inset: auto; width: 100%; margin: 0; aspect-ratio: auto; background: transparent; }
@media (min-width: 40rem) { .record-carousel__track { grid-auto-columns: calc((100% - 1.5rem) / 2); } }
@media (min-width: 64rem) {
    .record-carousel__track { grid-auto-columns: calc((100% - 3rem) / 3); }
    #paperless-transformation:has([data-paperless]) .hx__inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2.5rem; }
    #paperless-transformation:has([data-paperless]) .hx__panel { grid-column: 1; padding: 2.5rem; }
    #paperless-transformation:has([data-paperless]) .hx__media { grid-column: 2; grid-row: 1; }
    #paperless-service-hero:has([data-paperless]) .hx__inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .paperless-visual * { animation: none !important; }
    .site-footer a, .site-footer .footer-legal button { transition: none; }
    .site-footer .footer-links a:hover, .site-footer .footer-social:hover { transform: none; }
}