/* ==========================================================================
   ClarityScholar — global stylesheet
    1. Tokens
    2. Reset / base
    3. Typography
    4. Layout
    5. Utilities
    6. Buttons
    7. Forms
    8. Cards
    9. Header / navigation (trust bar, header, mega menu, mobile nav)
   10. Breadcrumbs
   11. CTA banner
   12. Footer
   13. Accordion
   14. Responsive rules (header/footer breakpoints collected together)
   15. Homepage (scoped .home-* sections)
   16. Services Hub (scoped .services-* sections)
   17. Standard service page (scoped .service-* sections)
   18. Cluster hub (scoped .cluster-* sections)
   19. Literature review support (scoped .lit-review-* sections)
   20. Resources Hub (scoped .resources-* and .resource-* sections)
   21. Research resources category (scoped .resource-category* sections)
   22. Article template (scoped .article-* sections)
   23. Checklist template (scoped .checklist-* sections)
   24. Experts listing (scoped .experts-* and .expert-card rules)
   25. Expert profile template (scoped .expert-profile* rules)
   26. How It Works (scoped .how-* rules)
   27. Free assessment (scoped .assessment-* rules)
   28. About (scoped .about-* rules)
   29. Contact (scoped .contact-* rules)
   30. FAQ (scoped .faq-page and .faq-* rules)
   31. Academic integrity (scoped .integrity-* rules)
   32. Privacy policy (scoped .privacy-* rules)
   33. Shared policy sidebar (scoped .policy-* rules, also applied to existing policy pages)
  34. Account & User Area (scoped .account-*, .user-area, .order-*, .empty-state rules)
  35. Advanced Order Builder (scoped .order-wizard-*, .order-step-*, .order-stepper,
      .order-summary*, .order-cta*, .order-progress*, .order-documents*, .order-change*)

   Breakpoints (custom properties cannot be used in media queries):
     Tablet   768px
     Laptop   1024px
     Desktop  1200px / 1440px reference
   ========================================================================== */


/* 1. Tokens
   ========================================================================== */

:root {
    /* Colour */
    --color-primary: #0B4F46;
    --color-primary-dark: #073C36;
    --color-background: #FAF7F0;
    --color-surface: #FFFDF8;
    --color-text: #15233E;
    --color-muted: #5F6967;
    --color-accent: #C6923E;
    --color-accent-dark: #B07F31; /* hover/active state of the accent only */
    --color-border: #D9E3DF;
    --color-soft-green: #EAF3EE;
    --color-white: #FFFFFF;
    --color-error: #9F2F2F;
    --color-focus: var(--color-primary);       /* dark green — strong contrast on all page surfaces */
    --color-focus-accent: var(--color-accent); /* gold inner ring; adds brand character */

    /* Text on dark green surfaces */
    --color-on-dark: var(--color-background);
    --color-on-dark-muted: rgba(250, 247, 240, 0.78);
    --color-on-dark-border: rgba(250, 247, 240, 0.22);

    /* Typography */
    --font-heading: "Source Serif 4", Georgia, "Times New Roman", serif;
    --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

    /* Mobile-first type scale; desktop values are set in the 1024px media query. */
    --font-size-h1: 2.5rem;        /* 40px */
    --font-size-h2: 2rem;          /* 32px */
    --font-size-h3: 1.5rem;        /* 24px */
    --font-size-h4: 1.25rem;       /* 20px */
    --font-size-body-lg: 1.125rem; /* 18px */
    --font-size-body: 1rem;        /* 16px */
    --font-size-small: 0.875rem;   /* 14px */
    --font-size-eyebrow: 0.75rem;  /* 12px, uppercase labels only */

    --line-height-heading: 1.15;
    --line-height-body: 1.6;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Spacing (8px base) */
    --space-1: 0.5rem;   /* 8px */
    --space-2: 1rem;     /* 16px */
    --space-3: 1.5rem;   /* 24px */
    --space-4: 2rem;     /* 32px */
    --space-6: 3rem;     /* 48px */
    --space-8: 4rem;     /* 64px */
    --space-12: 6rem;    /* 96px */
    --space-15: 7.5rem;  /* 120px */

    /* Section rhythm: mobile values here, desktop in media query */
    --section-padding: var(--space-6);
    --container-gutter: var(--space-3);

    /* Layout */
    --container-max: 75rem; /* 1200px */
    --header-height: 4.5rem; /* 72px */

    /* Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-pill: 999px;

    /* Shadow */
    --shadow-sm: 0 1px 2px rgba(21, 35, 62, 0.06);
    --shadow-md: 0 4px 16px rgba(21, 35, 62, 0.08);
    --shadow-lg: 0 12px 32px rgba(21, 35, 62, 0.12);

    /* Controls */
    --control-height: 3rem;      /* 48px tap-friendly */
    --control-height-sm: 2.5rem; /* 40px */
    --motion-fast: 160ms;
    --motion-base: 220ms;
    --motion-slow: 420ms;
    --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
    --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: var(--motion-fast) var(--ease-standard);

    /* Stacking */
    --z-header: 100;
    --z-mobile-nav: 90;
    --z-skip-link: 1000;
}

@media (min-width: 1024px) {
    :root {
        --font-size-h1: 3.5rem;    /* 56px */
        --font-size-h2: 2.5rem;    /* 40px */
        --font-size-h3: 1.75rem;   /* 28px */
        --font-size-h4: 1.375rem;  /* 22px */

        --section-padding: var(--space-12);
        --container-gutter: var(--space-4);
    }
}


/* 2. Reset / base
   ========================================================================== */

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

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

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

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
    }

    a.card:hover,
    .card--link:hover,
    .service-card:hover,
    .resource-card:hover,
    .resource-category-card:hover,
    .order-card:hover,
    .order-cta:hover,
    .cta-banner:hover,
    .resource-category-cta:hover,
    .article-service-cta:hover,
    .choice-card:hover,
    .btn:hover {
        transform: none;
    }
}

.order-cta,
.cta-banner,
.resource-category-cta,
.article-service-cta {
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.order-cta:hover,
.cta-banner:hover,
.resource-category-cta:hover,
.article-service-cta:hover {
    transform: translateY(-2px);
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body.nav-open {
    overflow: hidden;
}

main {
    flex: 1 0 auto;
}

main:focus {
    outline: none;
}

img,
picture,
svg,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

ul[class],
ol[class] {
    margin: 0;
    padding: 0;
    list-style: none;
}

:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 1px var(--color-focus-accent);
}

[hidden] {
    display: none !important;
}


/* 3. Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--space-2);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-heading);
    color: var(--color-text);
}

h1, .heading-1 { font-size: var(--font-size-h1); }
h2, .heading-2 { font-size: var(--font-size-h2); }
h3, .heading-3 { font-size: var(--font-size-h3); }
h4, .heading-4 { font-size: var(--font-size-h4); }

p {
    margin: 0 0 var(--space-2);
}

.text-large { font-size: var(--font-size-body-lg); }
.text-small { font-size: var(--font-size-small); }
.text-muted { color: var(--color-muted); }

.eyebrow {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-eyebrow);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.eyebrow--on-dark {
    color: var(--color-accent);
}

a {
    color: var(--color-primary);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

a:hover {
    color: var(--color-primary-dark);
}


/* 4. Layout
   ========================================================================== */

.container {
    width: 100%;
    max-width: calc(var(--container-max) + (var(--container-gutter) * 2));
    margin-inline: auto;
    padding-inline: var(--container-gutter);
}

.section {
    padding-block: var(--section-padding);
}


/* 5. Utilities
   ========================================================================== */

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: var(--space-1);
    left: var(--space-1);
    z-index: var(--z-skip-link);
    padding: var(--space-1) var(--space-2);
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: translateY(0);
}


/* 6. Buttons
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-height: var(--control-height);
    padding: 0 var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--transition-fast),
                color var(--transition-fast),
                border-color var(--transition-fast);
}

.btn:active {
    transform: translateY(1px);
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-sm {
    min-height: var(--control-height-sm);
    padding-inline: var(--space-2);
    font-size: var(--font-size-small);
}

.btn-block {
    display: flex;
    width: 100%;
}

/* Primary: gold accent with dark text (approved reference treatment; works on light and dark surfaces) */
.btn-primary {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-text);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    color: var(--color-text);
}

.btn svg {
    flex: none;
    width: 1.125em;
    height: 1.125em;
}

/* Secondary: outlined green */
.btn-secondary {
    background-color: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
    background-color: var(--color-soft-green);
    color: var(--color-primary-dark);
}

/* Secondary variant for dark green backgrounds (CTA banner) */
.btn-secondary-on-dark {
    background-color: transparent;
    border-color: var(--color-on-dark-border);
    color: var(--color-on-dark);
}

.btn-secondary-on-dark:hover,
.btn-secondary-on-dark:focus-visible {
    border-color: var(--color-on-dark);
    background-color: rgba(250, 247, 240, 0.08);
    color: var(--color-on-dark);
}

/* Text link with optional trailing arrow icon */
.text-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}

.text-link:hover,
.text-link:focus-visible {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.text-link svg {
    flex: none;
    width: 1em;
    height: 1em;
}

.text-link--on-dark {
    color: var(--color-on-dark);
}

.text-link--on-dark:hover,
.text-link--on-dark:focus-visible {
    color: var(--color-white);
}


/* 7. Forms
   Works with plain markup and with ASP.NET Core validation classes
   (input-validation-error, field-validation-error, validation-summary-errors).
   ========================================================================== */

.form-field {
    margin-bottom: var(--space-3);
}

.form-label {
    display: block;
    margin-bottom: var(--space-1);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.form-required {
    color: var(--color-accent);
    margin-left: 0.15em;
}

.form-required-note {
    font-size: var(--font-size-small);
    color: var(--color-muted);
}

.form-control,
.form-select {
    display: block;
    width: 100%;
    min-height: var(--control-height);
    padding: 0 var(--space-2);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    line-height: 1.4;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

textarea.form-control {
    min-height: 9rem;
    padding-block: var(--space-2);
    resize: vertical;
}

.form-select {
    padding-right: var(--space-6);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%235F6967' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-2) center;
    background-size: 1rem;
}

.form-control::placeholder {
    color: var(--color-muted);
    opacity: 1;
}

.form-control:hover,
.form-select:hover {
    border-color: var(--color-muted);
}

.form-control:focus,
.form-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-soft-green);
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--color-background);
    color: var(--color-muted);
    cursor: not-allowed;
}

.form-hint {
    margin: var(--space-1) 0 0;
    font-size: var(--font-size-small);
    color: var(--color-muted);
}

/* Error state */
.form-field--error .form-control,
.form-field--error .form-select,
.form-control.input-validation-error,
.form-select.input-validation-error {
    border-color: var(--color-error);
}

.form-field--error .form-control:focus,
.form-field--error .form-select:focus,
.input-validation-error:focus {
    box-shadow: 0 0 0 3px rgba(159, 47, 47, 0.15);
}

.form-error,
.field-validation-error {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    color: var(--color-error);
}

.field-validation-valid {
    display: none;
}

.validation-summary-errors {
    margin-bottom: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-error);
    border-radius: var(--radius-md);
    background-color: rgba(159, 47, 47, 0.06);
    color: var(--color-error);
}

.validation-summary-errors ul {
    margin: 0;
    padding-left: var(--space-3);
}

.validation-summary-valid {
    display: none;
}

/* Checkbox / radio */
.form-check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.form-check__input {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0.15rem 0 0;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.form-check__input:disabled,
.form-check__input:disabled + .form-check__label {
    cursor: not-allowed;
    color: var(--color-muted);
}

.form-check__label {
    cursor: pointer;
}

/* File control wrapper */
.form-file {
    display: block;
    padding: var(--space-3);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    transition: border-color var(--transition-fast);
}

.form-file:hover,
.form-file:focus-within {
    border-color: var(--color-primary);
}

.form-file input[type="file"] {
    display: block;
    width: 100%;
    font-size: var(--font-size-small);
}

.form-file input[type="file"]::file-selector-button {
    min-height: var(--control-height-sm);
    margin-right: var(--space-2);
    padding: 0 var(--space-2);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    background-color: transparent;
    color: var(--color-primary);
    font: inherit;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
}

.form-file input[type="file"]::file-selector-button:hover {
    background-color: var(--color-soft-green);
}


/* 8. Cards
   Small foundation; specific card types extend these classes.
   ========================================================================== */

.card {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.card__eyebrow {
    margin: 0;
    font-size: var(--font-size-eyebrow);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.card__title {
    margin: 0;
    font-size: var(--font-size-h4);
}

.card__text {
    margin: 0;
    color: var(--color-muted);
}

.card__footer {
    margin-top: auto;
    padding-top: var(--space-2);
}

/* Whole-card link: wrap the card in <a class="card card--link"> */
a.card,
.card--link,
.service-card,
.resource-card,
.resource-category-card,
.order-card {
    color: inherit;
    text-decoration: none;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

a.card:hover,
.card--link:hover,
a.card:focus-visible,
.card--link:focus-within,
.service-card:hover,
.service-card:focus-visible,
.resource-card:hover,
.resource-card:focus-visible,
.resource-category-card:hover,
.resource-category-card:focus-visible,
.order-card:hover,
.order-card:focus-visible {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-4px);
}

a.card:hover .card__title,
.card--link:hover .card__title {
    color: var(--color-primary);
}

.card--soft {
    background-color: var(--color-soft-green);
    border-color: transparent;
}

@media (min-width: 768px) {
    .card {
        padding: var(--space-4);
    }
}


/* 9. Header / navigation
   ========================================================================== */

/* Trust bar */
.trust-bar {
    background-color: var(--color-primary);
    color: var(--color-on-dark);
    font-size: var(--font-size-small);
}

.trust-bar__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-1) var(--space-4);
    min-height: 2.25rem; /* 36px */
    padding-block: var(--space-1);
}

.trust-bar__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    white-space: nowrap;
}

.trust-bar__icon {
    color: var(--color-accent);
}

.trust-bar__item--secondary {
    display: none;
}

/* Header bar */
.site-header {
    position: relative;
    z-index: var(--z-header);
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: var(--header-height);
}

.site-wordmark {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 0.2rem;
    color: var(--color-primary);
    text-decoration: none;
}

.site-wordmark__name {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.01em;
    line-height: 1;
}

.site-wordmark__tagline {
    font-size: 0.5625rem; /* 9px decorative tagline, hidden from AT */
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-muted);
    line-height: 1;
    white-space: nowrap;
}

.site-wordmark:hover {
    color: var(--color-primary-dark);
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: none;
}

.site-header__secondary {
    display: none;
}

.site-header__primary {
    display: inline-flex;
}

/* Desktop primary nav */
.site-nav {
    display: none;
    flex: 1 1 auto;
    min-width: 0;
}

.site-nav__list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
}

.site-nav__item {
    position: static;
}

.site-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: var(--control-height-sm);
    padding: 0 0.5rem;
    border-radius: var(--radius-md);
    font-size: 0.9375rem; /* 15px */
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.site-nav__link:hover,
.site-nav__link:focus-visible,
.site-nav__item.is-open > .site-nav__link {
    color: var(--color-primary);
    background-color: var(--color-soft-green);
}

.site-nav__chevron {
    transition: transform var(--transition-fast);
}

.site-nav__item.is-open .site-nav__chevron {
    transform: rotate(180deg);
}

/* Mega menu panel: full width beneath the header */
.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--header-height) - 2.25rem);
    overflow-y: auto;
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
}

.mega-menu__inner {
    padding-block: var(--space-4);
}

.mega-menu__grid {
    display: grid;
    gap: var(--space-4) var(--space-3);
}

/* Five columns: four groups plus one stacked column (see _ServicesMegaMenu). */
.mega-menu__grid--services {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.mega-menu__grid--resources {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-6);
}

.mega-menu__column {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.mega-menu__title {
    margin: 0 0 var(--space-1);
    padding-bottom: var(--space-1);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-eyebrow);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.mega-menu__list--columns {
    columns: 2;
    column-gap: var(--space-4);
}

.mega-menu__list--columns li {
    break-inside: avoid;
}

.mega-menu__link {
    display: block;
    padding: 0.375rem 0;
    font-size: var(--font-size-small); /* 14px at 1024–1199, 15px from 1200 */
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.mega-menu__link:hover,
.mega-menu__link:focus-visible {
    color: var(--color-primary);
    text-decoration: underline;
}

.mega-menu__footer {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.mega-menu__aside {
    padding: var(--space-3);
    background-color: var(--color-soft-green);
    border-radius: var(--radius-lg);
}

.mega-menu__aside-title {
    margin: 0 0 var(--space-1);
    font-family: var(--font-heading);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
}

.mega-menu__aside-text {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-small);
    color: var(--color-muted);
}

/* Hamburger */
.nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--control-height);
    height: var(--control-height);
    margin-right: calc(var(--space-1) * -1);
    border-radius: var(--radius-md);
    color: var(--color-primary);
}

.nav-toggle:hover {
    background-color: var(--color-soft-green);
}

.nav-toggle__icon--close {
    display: none;
}

.nav-toggle.is-open .nav-toggle__icon--open {
    display: none;
}

.nav-toggle.is-open .nav-toggle__icon--close {
    display: block;
}

/* Mobile drawer */
.mobile-nav {
    position: fixed;
    top: var(--mobile-nav-top, var(--header-height));
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-mobile-nav);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-border);
}

.mobile-nav__inner {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding-block: var(--space-2) var(--space-4);
}

.mobile-nav__item {
    border-bottom: 1px solid var(--color-border);
}

.mobile-nav__link,
.mobile-nav__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 3.5rem; /* 56px */
    padding: var(--space-1) 0;
    font-size: var(--font-size-body-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    text-align: left;
    text-decoration: none;
}

.mobile-nav__link:hover,
.mobile-nav__toggle:hover {
    color: var(--color-primary);
}

.mobile-nav__chevron {
    flex: none;
    color: var(--color-primary);
    transition: transform var(--transition-fast);
}

.mobile-nav__toggle[aria-expanded="true"] .mobile-nav__chevron {
    transform: rotate(180deg);
}

.mobile-nav__sub {
    padding-bottom: var(--space-2);
}

.mobile-nav__group-title {
    margin: var(--space-2) 0 0;
    font-size: var(--font-size-eyebrow);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.mobile-nav__sublink {
    display: block;
    min-height: 2.75rem; /* 44px */
    padding: 0.625rem 0 0.625rem var(--space-2);
    color: var(--color-text);
    text-decoration: none;
}

.mobile-nav__sublink--hub {
    padding-left: 0;
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.mobile-nav__sublink:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.mobile-nav__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-4);
}


/* 10. Breadcrumbs
   ========================================================================== */

.breadcrumbs {
    font-size: var(--font-size-small);
    color: var(--color-muted);
}

.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
}

.breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.breadcrumbs__item + .breadcrumbs__item::before {
    content: "/";
    color: var(--color-border);
}

.breadcrumbs__link {
    color: var(--color-muted);
    text-decoration: none;
}

.breadcrumbs__link:hover,
.breadcrumbs__link:focus-visible {
    color: var(--color-primary);
    text-decoration: underline;
}

.breadcrumbs__current {
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
}


/* 11. CTA banner
   ========================================================================== */

.cta-banner {
    background-color: var(--color-primary);
    color: var(--color-on-dark);
}

.cta-banner__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-block: var(--space-6);
}

.cta-banner__heading {
    margin-bottom: var(--space-1);
    font-size: var(--font-size-h3);
    color: var(--color-on-dark);
}

.cta-banner__body {
    margin: 0;
    max-width: 40rem;
    color: var(--color-on-dark-muted);
}

.cta-banner__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}


/* 12. Footer
   ========================================================================== */

.site-footer {
    background-color: var(--color-primary-dark);
    color: var(--color-on-dark-muted);
    font-size: var(--font-size-small);
}

.site-footer__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-3);
    padding-block: var(--space-6);
}

.site-footer__brand {
    grid-column: 1 / -1;
    max-width: 22rem;
}

.site-footer__wordmark {
    display: inline-block;
    margin-bottom: var(--space-2);
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-on-dark);
    text-decoration: none;
}

.site-footer__statement {
    margin: 0;
    font-size: var(--font-size-body);
    line-height: 1.5;
}

.site-footer__heading {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-eyebrow);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-on-dark);
}

.site-footer__list li + li {
    margin-top: 0.625rem;
}

.site-footer__link {
    color: var(--color-on-dark-muted);
    text-decoration: none;
}

.site-footer__link:hover,
.site-footer__link:focus-visible {
    color: var(--color-on-dark);
    text-decoration: underline;
}

.site-footer__bottom {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-block: var(--space-3);
    border-top: 1px solid var(--color-on-dark-border);
}

.site-footer__bottom p {
    margin: 0;
}

.site-footer__principle {
    font-family: var(--font-heading);
    font-style: italic;
    color: var(--color-on-dark);
}


/* 13. Accordion (native <details>/<summary>)
   ========================================================================== */

.accordion {
    border-top: 1px solid var(--color-border);
}

.accordion__item {
    border-bottom: 1px solid var(--color-border);
}

.accordion__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: 3.5rem;
    padding: var(--space-2) 0;
    font-family: var(--font-heading);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    list-style: none;
    cursor: pointer;
}

.accordion__summary::-webkit-details-marker {
    display: none;
}

.accordion__summary:hover {
    color: var(--color-primary);
}

.accordion__summary:focus-visible {
    outline-offset: -3px;
    border-radius: var(--radius-sm);
    box-shadow: none; /* inset focus: outline-offset -3px covers it; box-shadow not appropriate here */
}

.accordion__icon {
    flex: none;
    color: var(--color-primary);
    transition: transform var(--transition-fast);
}

.accordion__item[open] .accordion__icon {
    transform: rotate(180deg);
}

.accordion__content {
    padding: 0 0 var(--space-3);
    color: var(--color-muted);
}

.accordion__content > :last-child {
    margin-bottom: 0;
}


/* 14. Responsive rules
   ========================================================================== */

/* Tablet and up */
@media (min-width: 768px) {
    .trust-bar__list {
        justify-content: flex-start;
    }

    .trust-bar__item--secondary {
        display: inline-flex;
    }

    .site-header__primary {
        display: inline-flex;
    }

    .cta-banner__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding-block: var(--space-8);
    }

    .cta-banner__actions {
        flex-direction: row;
        flex: none;
    }

    .site-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-block: var(--space-8);
    }

    .site-footer__bottom {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* Laptop and up: desktop navigation replaces the drawer */
@media (min-width: 1024px) {
    .site-nav {
        display: block;
    }

    .nav-toggle,
    .mobile-nav {
        display: none !important;
    }

    .site-footer__grid {
        grid-template-columns: 2fr repeat(4, 1fr);
        gap: var(--space-4);
    }

    .site-footer__brand {
        grid-column: auto;
    }
}

/* Wide desktop: room for the secondary CTA and six-column services menu */
@media (min-width: 1200px) {
    .site-header__secondary {
        display: inline-flex;
    }

    .site-header__inner {
        gap: var(--space-3);
    }

    .site-nav__link {
        padding: 0 0.75rem;
    }

    .mega-menu__link {
        font-size: 0.9375rem;
    }
}


/* 15. Homepage
   Section-scoped styles (.home-*). Breakpoints: 768 / 1024.
   ========================================================================== */

/* Hero */
.home-hero {
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.home-hero__inner {
    display: grid;
    gap: var(--space-4);
    padding-block: var(--space-6) 0;
}

.home-hero__title {
    margin-bottom: var(--space-3);
    font-size: clamp(2.25rem, 0.5rem + 3.4vw, 3.25rem);
    color: var(--color-primary);
}

.home-hero__title-line {
    display: inline; /* flows as one sentence on mobile; one line each from 768px */
}

.home-hero__lead {
    max-width: 34rem;
    margin-bottom: var(--space-4);
    font-size: var(--font-size-body-lg);
    color: var(--color-muted);
}

.home-hero__lead strong {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.home-hero__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.home-hero__trust {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: var(--font-size-small);
    color: var(--color-muted);
}

.home-hero__trust-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.home-hero__trust-icon {
    display: inline-flex;
    flex: none;
    color: var(--color-primary);
}

.home-hero__media {
    margin-inline: calc(var(--container-gutter) * -1);
}

.home-hero__image {
    width: 100%;
    aspect-ratio: 9 / 7;
    object-fit: cover;
    background-color: var(--color-soft-green);
}

/* Popular services */
.home-services__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.home-services__title {
    margin-bottom: var(--space-1);
}

.home-services__subtitle {
    margin: 0;
    color: var(--color-muted);
}

.home-services__all {
    align-self: flex-start;
}

.home-services__grid {
    display: grid;
    gap: var(--space-2);
}

.service-card {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
}

.service-card__icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--color-primary);
}

.service-card__icon svg {
    width: 1.75rem;
    height: 1.75rem;
}

.service-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.service-card__title {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
    color: var(--color-text);
    transition: color var(--transition-fast);
}

.service-card:hover .service-card__title {
    color: var(--color-primary);
}

.service-card__text {
    font-size: var(--font-size-small);
    color: var(--color-muted);
}

.service-card__more {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.25rem;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.service-card__more svg {
    width: 1em;
    height: 1em;
}

/* How it works preview */
.home-process {
    padding-block: var(--space-8);
    background-color: var(--color-primary);
    color: var(--color-on-dark);
}

.home-process__inner {
    display: grid;
    gap: var(--space-6);
}

.home-process__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.home-process__title {
    color: var(--color-on-dark);
}

.home-process__subtitle {
    margin-bottom: var(--space-4);
    color: var(--color-on-dark-muted);
}

.home-process__link {
    margin-top: var(--space-2);
    font-size: var(--font-size-small);
}

.home-process__steps {
    position: relative;
    display: grid;
    gap: var(--space-4);
}

/* Mobile: icon in a left column, number/title/text stacked beside it */
.home-process__step {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    column-gap: var(--space-2);
    row-gap: 0.25rem;
    align-items: start;
}

.home-process__icon {
    position: relative;
    z-index: 1;
    grid-row: 1 / span 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border: 1px solid var(--color-on-dark-border);
    border-radius: 50%;
    background-color: var(--color-primary);
    color: var(--color-on-dark);
}

.home-process__number {
    font-family: var(--font-heading);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    color: var(--color-on-dark);
}

.home-process__step-title {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: var(--color-on-dark);
}

.home-process__step-text {
    margin: 0;
    font-size: var(--font-size-small);
    color: var(--color-on-dark-muted);
}

/* Why ClarityScholar */
.home-why {
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.home-why__inner {
    display: grid;
    gap: var(--space-4);
}

.home-why__media {
    order: 3;
}

.home-why__image {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background-color: var(--color-soft-green);
}

.home-why__text {
    margin: 0;
    color: var(--color-muted);
}

.home-why__list {
    display: grid;
    gap: var(--space-2);
    align-self: center;
}

.home-why__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-weight: var(--font-weight-medium);
}

.home-why__check {
    display: inline-flex;
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-accent);
}

/* Academic integrity */
.home-integrity__panel {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-4);
    background-color: var(--color-soft-green);
    border-radius: var(--radius-lg);
}

.home-integrity__title {
    margin-bottom: var(--space-2);
}

.home-integrity__text {
    max-width: 44rem;
    color: var(--color-muted);
}

.home-integrity__icon {
    display: none;
}

/* Homepage: tablet and up */
@media (min-width: 768px) {
    .home-hero__inner {
        padding-block: var(--space-8) var(--space-6);
    }

    .home-hero__title-line {
        display: block;
    }

    .home-hero__actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .home-hero__trust {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-2) var(--space-4);
    }

    .home-hero__trust-item {
        flex: 1 1 10rem;
        min-width: 0;
        align-items: flex-start;
    }

    .home-hero__media {
        margin-inline: 0;
    }

    .home-hero__image {
        aspect-ratio: 3 / 2;
        border-radius: var(--radius-lg);
    }

    .home-services__header {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }

    .home-services__all {
        align-self: auto;
        margin-bottom: 0.3rem;
    }

    .home-process__steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-process__step {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
    }

    .home-process__icon {
        margin-bottom: var(--space-1);
    }

    .home-why__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: center;
    }

    .home-why__media {
        order: 0;
        grid-row: span 2;
    }

    .home-integrity__panel {
        padding: var(--space-6);
    }
}

/* Homepage: laptop and up */
@media (min-width: 1024px) {
    .home-hero__inner {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        align-items: center;
        gap: var(--space-8);
        padding-block: var(--space-8);
    }

    /* Image fills the hero's height alongside the text column (reference shows a tall portrait-ish crop) */
    .home-hero__media {
        display: flex;
        align-self: stretch;
    }

    .home-hero__image {
        height: 100%;
        min-height: 26rem;
        aspect-ratio: auto;
    }

    .home-services__grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: var(--space-3);
    }

    .service-card {
        flex-direction: column;
        gap: var(--space-2);
        padding: var(--space-2);
    }

    .service-card__icon {
        width: 2rem;
        height: 2rem;
    }

    .service-card__icon svg {
        width: 2rem;
        height: 2rem;
    }

    .service-card__more {
        margin-top: auto;
        padding-top: var(--space-1);
    }

    .home-process {
        padding-block: var(--space-12);
    }

    .home-process__subtitle {
        max-width: 36rem;
    }

    .home-process__steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--space-4);
    }

    /* Connector line behind the step icons */
    .home-process__steps::before {
        content: "";
        position: absolute;
        top: 1.5rem;
        left: 1.5rem;
        right: 1.5rem;
        border-top: 1px solid var(--color-on-dark-border);
    }

    .home-why__inner {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr) minmax(0, 1.1fr);
        gap: var(--space-8);
    }

    .home-why__media {
        grid-row: auto;
    }

    .home-integrity__panel {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        padding: var(--space-8);
    }

    .home-integrity__icon {
        display: inline-flex;
        color: var(--color-primary);
        opacity: 0.35;
    }

    .home-integrity__icon svg {
        width: 7rem;
        height: 7rem;
    }
}

/* Homepage: desktop */
@media (min-width: 1200px) {
    .service-card {
        padding: var(--space-3);
    }

    .home-process__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
        gap: var(--space-8);
        align-items: start;
    }
}


/* 16. Services Hub
   Scoped .services-* rules. Breakpoints: 768 / 1024.
   ========================================================================== */

.services-hero {
    padding-block: var(--space-4) var(--space-2);
}

.services-hero__layout {
    display: grid;
    gap: var(--space-4);
}

.services-hero .breadcrumbs {
    margin-bottom: var(--space-3);
}

.services-hero__title {
    max-width: 18em;
    font-size: clamp(2rem, 1.15rem + 1.7vw, 2.875rem);
    color: var(--color-primary);
}

.services-hero__lead {
    max-width: 36rem;
    margin-bottom: var(--space-4);
    font-size: var(--font-size-body-lg);
    color: var(--color-muted);
}

.services-hero__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* The approved mobile reference goes from the hero actions straight to the clusters. */
.services-hero__media {
    display: none;
}

.services-hero__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background-color: var(--color-soft-green);
}

.services-explore__header {
    max-width: 40rem;
    margin-bottom: var(--space-4);
}

.services-explore__title {
    margin-bottom: var(--space-1);
}

.services-explore__subtitle {
    margin: 0;
    color: var(--color-muted);
}

.services-grid {
    display: grid;
    align-items: start;
    gap: var(--space-3);
}

.services-cluster {
    gap: var(--space-2);
    padding: var(--space-2);
}

.services-cluster:hover {
    border-color: var(--color-primary);
}

.services-cluster__top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 5.5rem;
    gap: var(--space-2);
    align-items: start;
}

.services-cluster__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    margin-top: 0.1rem;
    color: var(--color-primary);
}

.services-cluster__icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.services-cluster__title {
    margin-bottom: 0.25rem;
    font-size: 1.0625rem;
}

.services-cluster__text {
    margin: 0;
    font-size: var(--font-size-small);
    color: var(--color-muted);
}

.services-cluster__links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}

.services-cluster__links a {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    line-height: 1.35;
    text-decoration: none;
}

.services-cluster__links a:hover,
.services-cluster__links a:focus-visible {
    text-decoration: underline;
}

.services-cluster__media {
    position: relative;
    height: 4.75rem;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: var(--color-soft-green);
}

.services-cluster__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.services-help-section {
    padding-top: 0;
}

.services-help {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-3);
    background-color: var(--color-soft-green);
    border-radius: var(--radius-lg);
}

.services-help__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--color-surface);
    color: var(--color-primary);
}

.services-help__title {
    margin-bottom: var(--space-1);
    font-size: var(--font-size-h3);
}

.services-help__text {
    margin-bottom: var(--space-2);
    color: var(--color-muted);
}

.services-help__cta {
    justify-content: center;
}

.services-trust {
    padding-block: var(--space-6);
    background-color: var(--color-primary);
    color: var(--color-on-dark);
}

.services-trust__inner {
    display: grid;
    gap: var(--space-4);
}

.services-trust__media {
    order: 2;
}

.services-trust__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background-color: var(--color-primary-dark);
}

.services-trust__title {
    color: var(--color-on-dark);
}

.services-trust__text {
    max-width: 40rem;
    color: var(--color-on-dark-muted);
}

.services-trust__points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) var(--space-2);
    margin-top: var(--space-2);
}

.services-trust__point {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    line-height: 1.35;
}

.services-trust__point-icon {
    display: inline-flex;
    color: var(--color-accent);
}

.services-trust__point-icon svg {
    width: 1.75rem;
    height: 1.75rem;
}

@media (min-width: 768px) {
    .services-hero {
        padding-block: var(--space-6) var(--space-4);
    }

    .services-hero__actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .services-hero__media {
        display: block;
    }

    .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .services-cluster__top {
        grid-template-columns: auto minmax(0, 1fr) 7rem;
    }

    .services-cluster__media {
        height: 5.5rem;
    }

    .services-cluster__links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.35rem var(--space-2);
    }

    .services-help {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        padding: var(--space-4);
    }

    .services-help__icon {
        grid-row: span 2;
    }

    .services-help__cta {
        justify-self: start;
    }

    .services-trust {
        padding-block: var(--space-8);
    }

    .services-trust__image {
        aspect-ratio: 16 / 9;
    }
}

@media (min-width: 1024px) {
    .services-hero__layout {
        grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
        align-items: center;
        gap: var(--space-6);
    }

    .services-hero__image {
        aspect-ratio: 5 / 4;
        min-height: 24rem;
    }

    .services-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .services-cluster {
        padding: var(--space-3);
    }

    .services-cluster__top {
        grid-template-columns: auto minmax(0, 1fr) 7.75rem;
    }

    .services-cluster__media {
        height: 6.25rem;
    }

    .services-help {
        grid-template-columns: auto minmax(0, 1fr) auto;
        padding: var(--space-4) var(--space-5);
    }

    .services-help__icon {
        grid-row: auto;
    }

    .services-help__cta {
        justify-self: end;
    }

    .services-trust__inner {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr);
        align-items: center;
        gap: var(--space-8);
    }

    .services-trust__media {
        order: 0;
    }

    .services-trust__image {
        aspect-ratio: 4 / 5;
    }

    .services-trust__points {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--space-3);
    }
}


/* 17. Standard service page
   Scoped .service-* rules. Breakpoints: 768 / 1024 / 1200.
   ========================================================================== */

.service-hero {
    padding-block: var(--space-4) var(--space-2);
}

.service-hero__layout {
    display: grid;
    gap: var(--space-4);
}

.service-hero .breadcrumbs {
    margin-bottom: var(--space-3);
}

.service-hero__title {
    max-width: 16em;
    margin-bottom: var(--space-2);
    font-size: clamp(2rem, 1.05rem + 2.1vw, 3rem);
    color: var(--color-text);
}

.service-hero__lead {
    max-width: 38rem;
    margin-bottom: var(--space-4);
    font-size: var(--font-size-body-lg);
    color: var(--color-muted);
}

.service-hero__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.service-hero__trust {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: var(--font-size-small);
    color: var(--color-muted);
}

.service-hero__trust-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.service-hero__trust-icon {
    display: inline-flex;
    flex: none;
    color: var(--color-primary);
}

.service-hero__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background-color: var(--color-soft-green);
}

.service-focus {
    padding-top: var(--space-4);
}

.service-focus__grid {
    display: grid;
    gap: var(--space-2);
}

.service-focus__card {
    gap: var(--space-1);
    height: 100%;
}

.service-focus__icon {
    display: inline-flex;
    color: var(--color-primary);
}

.service-focus__icon svg {
    width: 1.75rem;
    height: 1.75rem;
}

.service-focus__title {
    margin-bottom: 0.25rem;
    font-size: 1.125rem;
}

.service-focus__text {
    margin-bottom: var(--space-2);
    font-size: var(--font-size-small);
    color: var(--color-muted);
}

.service-focus__link {
    margin-top: auto;
}

.service-checks {
    display: grid;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.service-checks__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--font-size-small);
}

.service-checks__icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.1rem;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: var(--color-white);
}

.service-checks__icon svg {
    width: 0.8rem;
    height: 0.8rem;
}

.service-inclusions__layout {
    display: grid;
    gap: var(--space-4);
}

.service-inclusions__intro {
    max-width: 40rem;
    color: var(--color-muted);
}

.service-inclusions__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background-color: var(--color-soft-green);
}

.service-callout {
    margin-top: var(--space-3);
    padding: var(--space-3);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.service-callout__icon {
    display: inline-flex;
    color: var(--color-primary);
}

.service-callout__title {
    margin: var(--space-1) 0;
    font-size: var(--font-size-h4);
}

.service-callout__text {
    color: var(--color-muted);
}

.service-fit {
    background-color: var(--color-surface);
    border-block: 1px solid var(--color-border);
}

.service-fit__intro,
.service-fit__note {
    max-width: 40rem;
    color: var(--color-muted);
}

.service-fit__list {
    display: grid;
    gap: var(--space-2);
}

.service-fit__list li {
    padding-left: var(--space-2);
    border-left: 2px solid var(--color-accent);
}

.service-comparison__header,
.service-documents__header,
.service-process__header,
.service-related__header {
    max-width: 40rem;
    margin-bottom: var(--space-4);
}

.service-comparison__header p,
.service-documents__header p,
.service-process__header p,
.service-related__header p {
    margin: 0;
    color: var(--color-muted);
}

.service-comparison__grid,
.service-example__grid,
.service-related__grid {
    display: grid;
    gap: var(--space-3);
}

.service-comparison__summary {
    color: var(--color-muted);
}

.service-comparison__title,
.service-example__label,
.service-policy__label {
    font-size: 1.25rem;
}

.service-documents__list {
    display: grid;
    gap: var(--space-2);
}

.service-documents__list li {
    padding: var(--space-2);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-medium);
}

.service-process__steps {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.service-process__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-bottom: var(--space-1);
    border-radius: 50%;
    background-color: var(--color-primary);
    color: var(--color-on-dark);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-semibold);
}

.service-process__title {
    margin-bottom: 0.25rem;
    font-size: 1.0625rem;
}

.service-process__text {
    margin: 0;
    font-size: var(--font-size-small);
    color: var(--color-muted);
}

.service-example__note {
    max-width: 44rem;
    color: var(--color-muted);
}

.service-example__text {
    margin: 0;
}

.service-example__card:first-child .service-example__text {
    color: var(--color-muted);
}

.service-policy__panel {
    padding: var(--space-4);
    background-color: var(--color-soft-green);
    border-radius: var(--radius-lg);
}

.service-policy__intro {
    max-width: 42rem;
    color: var(--color-muted);
}

.service-policy__grid {
    display: grid;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}

.service-policy__cannot {
    display: grid;
    gap: var(--space-2);
}

.service-policy__cannot li {
    padding-left: var(--space-2);
    border-left: 2px solid var(--color-accent);
    font-size: var(--font-size-small);
}

.service-faq__inner {
    max-width: 48rem;
}

.service-faq__more {
    margin-top: var(--space-3);
}

.service-related__card {
    height: 100%;
    text-decoration: none;
}

.service-related__title {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.service-related__card:hover .service-related__title {
    color: var(--color-primary);
}

.service-related__text {
    font-size: var(--font-size-small);
    color: var(--color-muted);
}

@media (min-width: 768px) {
    .service-hero {
        padding-block: var(--space-6) var(--space-3);
    }

    .service-hero__actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service-hero__trust {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-2) var(--space-4);
    }

    .service-hero__trust-item {
        flex: 1 1 8.5rem;
        align-items: flex-start;
    }

    .service-focus__grid,
    .service-documents__list,
    .service-process__steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-checks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-comparison__grid,
    .service-policy__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .service-fit__inner {
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: var(--space-6);
        align-items: start;
    }
}

@media (min-width: 1024px) {
    .service-hero__layout {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        align-items: center;
        gap: var(--space-6);
    }

    .service-hero__image {
        aspect-ratio: 5 / 4;
        min-height: 26rem;
    }

    .service-focus__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .service-inclusions__layout {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: var(--space-6);
        align-items: center;
    }

    .service-inclusions__visual {
        position: relative;
        padding-bottom: 5rem;
    }

    .service-callout {
        position: absolute;
        left: -2.5rem;
        bottom: 0;
        width: min(22rem, 88%);
        margin-top: 0;
    }

    .service-example__grid,
    .service-related__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .service-documents__list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .service-focus__grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .service-process__steps {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .service-related__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}


/* 18. Cluster hub
   Scoped .cluster-* rules. Breakpoints: 768 / 1024 / 1200.
   ========================================================================== */

.cluster-hero {
    padding-block: var(--space-4) var(--space-2);
}

.cluster-hero__layout {
    display: grid;
    gap: var(--space-4);
}

.cluster-hero .breadcrumbs {
    margin-bottom: var(--space-3);
}

.cluster-hero__title {
    max-width: 16em;
    margin-bottom: var(--space-2);
    font-size: clamp(2rem, 1.05rem + 2vw, 3rem);
    color: var(--color-text);
}

.cluster-hero__lead {
    max-width: 38rem;
    margin-bottom: var(--space-4);
    font-size: var(--font-size-body-lg);
    color: var(--color-muted);
}

.cluster-hero__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.cluster-hero__trust {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: var(--font-size-small);
    color: var(--color-muted);
}

.cluster-hero__trust-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.cluster-hero__trust-icon {
    display: inline-flex;
    flex: none;
    color: var(--color-primary);
}

.cluster-hero__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background-color: var(--color-soft-green);
}

.cluster-services__header,
.cluster-process__header,
.cluster-resources__header {
    max-width: 40rem;
    margin-bottom: var(--space-4);
}

.cluster-services__header p,
.cluster-process__header p,
.cluster-resources__header p {
    margin: 0;
    color: var(--color-muted);
}

.cluster-services__grid {
    display: grid;
    gap: var(--space-3);
}

.cluster-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 4.75rem;
    gap: var(--space-2);
    align-items: center;
    height: 100%;
    padding: var(--space-2);
    text-decoration: none;
}

.cluster-card__icon {
    display: inline-flex;
    align-self: start;
    margin-top: 0.15rem;
    color: var(--color-primary);
}

.cluster-card__icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.cluster-card__copy {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.cluster-card__stage {
    font-size: var(--font-size-eyebrow);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.cluster-card__title {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
    color: var(--color-text);
}

.cluster-card:hover .cluster-card__title {
    color: var(--color-primary);
}

.cluster-card__text {
    font-size: var(--font-size-small);
    color: var(--color-muted);
}

.cluster-card__more {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.35rem;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.cluster-card__more svg {
    width: 1em;
    height: 1em;
}

.cluster-card__media {
    position: relative;
    display: block;
    height: 4.5rem;
    overflow: hidden;
    border-radius: var(--radius-md);
    background-color: var(--color-soft-green);
}

.cluster-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cluster-trust {
    padding-block: var(--space-6);
    background-color: var(--color-primary);
    color: var(--color-on-dark);
}

.cluster-trust__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
}

.cluster-trust__title {
    color: var(--color-on-dark);
}

.cluster-trust__text {
    color: var(--color-on-dark-muted);
}

.cluster-trust__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
}

.cluster-trust .btn {
    max-width: 100%;
    white-space: normal;
}

.cluster-trust__points {
    display: grid;
    gap: var(--space-3);
}

.cluster-trust__point {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-weight: var(--font-weight-semibold);
}

.cluster-trust__point-icon {
    display: inline-flex;
    flex: none;
    color: var(--color-accent);
}

.cluster-trust__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background-color: var(--color-primary-dark);
}

.cluster-process__steps {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.cluster-process__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-bottom: var(--space-1);
    border-radius: 50%;
    background-color: var(--color-primary);
    color: var(--color-on-dark);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-semibold);
}

.cluster-process__title {
    margin-bottom: 0.25rem;
    font-size: 1.0625rem;
}

.cluster-process__text {
    margin: 0;
    font-size: var(--font-size-small);
    color: var(--color-muted);
}

.cluster-policy {
    padding-top: 0;
}

.cluster-policy__panel {
    padding: var(--space-4);
    background-color: var(--color-soft-green);
    border-radius: var(--radius-lg);
}

.cluster-policy__intro {
    max-width: 42rem;
    color: var(--color-muted);
}

.cluster-policy__grid {
    display: grid;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}

.cluster-policy__label {
    font-size: 1.25rem;
}

.cluster-policy__list {
    display: grid;
    gap: var(--space-2);
}

.cluster-policy__list li {
    padding-left: var(--space-2);
    border-left: 2px solid var(--color-primary);
    font-size: var(--font-size-small);
}

.cluster-policy__list--limit li {
    border-left-color: var(--color-accent);
}

.cluster-resources__list {
    display: grid;
    gap: var(--space-2);
}

.cluster-resources__list a {
    display: flex;
    align-items: center;
    min-height: 3rem;
    padding: var(--space-2);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}

.cluster-resources__list a:hover {
    border-color: var(--color-primary);
}

@media (min-width: 768px) {
    .cluster-hero {
        padding-block: var(--space-6) var(--space-3);
    }

    .cluster-hero__actions,
    .cluster-trust__actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .cluster-hero__trust {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-2) var(--space-4);
    }

    .cluster-services__grid,
    .cluster-process__steps,
    .cluster-resources__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cluster-card {
        grid-template-columns: auto minmax(0, 1fr) 7.5rem;
        align-items: stretch;
    }

    .cluster-card__media {
        height: auto;
        min-height: 7rem;
    }

    .cluster-trust__points,
    .cluster-policy__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cluster-trust__image {
        aspect-ratio: 16 / 7;
    }
}

@media (min-width: 1024px) {
    .cluster-hero__layout {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        align-items: center;
        gap: var(--space-6);
    }

    .cluster-hero__image {
        aspect-ratio: 5 / 4;
        min-height: 24rem;
    }

    .cluster-hero__trust {
        flex-wrap: nowrap;
    }

    .cluster-trust {
        padding-block: var(--space-8);
    }

    .cluster-trust__inner {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 0.8fr);
        align-items: center;
        gap: var(--space-6);
    }

    .cluster-trust__points {
        grid-template-columns: 1fr;
    }

    .cluster-trust__image {
        aspect-ratio: 4 / 5;
    }

    .cluster-process__steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .cluster-services__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* 19. Literature review support
   Scoped .lit-review-* rules. The hero, process, example, policy, FAQ,
   related cards and dark trust band reuse existing classes.
   ========================================================================== */

.lit-review-focus__header,
.lit-review-framework__header,
.lit-review-problems__header,
.lit-review-documents__header,
.lit-review-resources__header {
    max-width: 42rem;
    margin-bottom: var(--space-4);
}

.lit-review-focus__header p,
.lit-review-framework__header p,
.lit-review-problems__header p,
.lit-review-documents__header p,
.lit-review-resources__header p,
.lit-review-synthesis__note {
    margin-bottom: var(--space-3);
    color: var(--color-muted);
}

.lit-review-focus__grid,
.lit-review-synthesis__grid {
    display: grid;
    gap: var(--space-3);
}

.lit-review-card {
    height: 100%;
}

.lit-review-card__icon {
    display: inline-flex;
    color: var(--color-primary);
}

.lit-review-card__title {
    margin-bottom: 0.25rem;
    font-size: 1.125rem;
}

.lit-review-card__text {
    color: var(--color-muted);
    font-size: var(--font-size-small);
}

.lit-review-card__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-md);
    background-color: var(--color-soft-green);
}

.lit-review-card .text-link {
    margin-top: auto;
}

.lit-review-help {
    padding-top: 0;
}

.lit-review-help__panel {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-3);
    background-color: var(--color-soft-green);
    border-radius: var(--radius-lg);
}

.lit-review-help__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--color-surface);
    color: var(--color-primary);
}

.lit-review-help__title {
    margin-bottom: var(--space-1);
    font-size: var(--font-size-h3);
}

.lit-review-help__text {
    margin-bottom: var(--space-2);
    color: var(--color-muted);
}

.lit-review-help .btn {
    justify-content: center;
}

.lit-review-framework__list {
    display: grid;
    gap: var(--space-2);
}

.lit-review-framework__step {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.lit-review-framework__index {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: var(--color-on-dark);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-semibold);
}

.lit-review-framework__name {
    font-weight: var(--font-weight-semibold);
}

.lit-review-problems__list,
.lit-review-gap__list,
.lit-review-fit__list,
.lit-review-documents__list,
.lit-review-resources__list {
    display: grid;
    gap: var(--space-2);
}

.lit-review-problems__list li,
.lit-review-documents__list li,
.lit-review-resources__list a {
    padding: var(--space-2);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.lit-review-gap {
    background-color: var(--color-surface);
    border-block: 1px solid var(--color-border);
}

.lit-review-gap__list li,
.lit-review-fit__list li {
    padding-left: var(--space-2);
    border-left: 2px solid var(--color-accent);
}

.lit-review-resources__list a {
    display: flex;
    align-items: center;
    min-height: 3rem;
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}

.lit-review-resources__list a:hover {
    border-color: var(--color-primary);
}

.lit-review-synthesis__card p,
.lit-review-synthesis__card--synthesis p {
    margin: 0;
}

.lit-review-synthesis__card--synthesis {
    background-color: var(--color-soft-green);
    border-color: transparent;
}

@media (min-width: 768px) {
    .lit-review-focus__grid,
    .lit-review-problems__list,
    .lit-review-documents__list,
    .lit-review-resources__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lit-review-synthesis__grid,
    .lit-review-gap__inner {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-4);
        align-items: start;
    }

    .lit-review-help__panel {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        padding: var(--space-4);
    }

    .lit-review-help__icon {
        grid-row: span 2;
    }

    .lit-review-help .btn {
        justify-self: start;
    }
}

@media (min-width: 1024px) {
    .lit-review-framework__list {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: var(--space-2);
    }

    .lit-review-framework__step {
        flex-direction: column;
        align-items: flex-start;
        min-height: 8rem;
    }

    .lit-review-help__panel {
        grid-template-columns: auto minmax(0, 1fr) auto;
        padding: var(--space-4) var(--space-5);
    }

    .lit-review-help__icon {
        grid-row: auto;
    }
}

@media (min-width: 1200px) {
    .lit-review-focus__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}


/* 20. Resources Hub
   Scoped .resources-* and .resource-* rules. Breakpoints: 768 / 1024 / 1200.
   ========================================================================== */

.resources-hero {
    padding-block: var(--space-4) var(--space-2);
}

.resources-hero__layout {
    display: grid;
    gap: var(--space-4);
}

.resources-hero .breadcrumbs {
    margin-bottom: var(--space-3);
}

.resources-hero__title {
    max-width: 14em;
    margin-bottom: var(--space-2);
    font-size: clamp(2rem, 1.05rem + 2vw, 3rem);
    color: var(--color-text);
}

.resources-hero__lead {
    max-width: 36rem;
    margin-bottom: var(--space-4);
    font-size: var(--font-size-body-lg);
    color: var(--color-muted);
}

.resources-hero__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.resources-hero__trust {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: var(--font-size-small);
    color: var(--color-muted);
}

.resources-hero__trust-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.resources-hero__trust-icon {
    display: inline-flex;
    flex: none;
    color: var(--color-primary);
}

.resources-hero__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background-color: var(--color-soft-green);
}

.resources-categories__header,
.resources-featured__header {
    max-width: 40rem;
    margin-bottom: var(--space-4);
}

.resources-categories__header p,
.resources-featured__header p {
    margin: 0;
    color: var(--color-muted);
}

.resources-categories__grid,
.resources-featured__grid {
    display: grid;
    gap: var(--space-3);
}

.resource-category-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 4.75rem;
    gap: var(--space-2);
    align-items: center;
    height: 100%;
    padding: var(--space-2);
    text-decoration: none;
}

.resource-category-card__icon {
    display: inline-flex;
    align-self: start;
    margin-top: 0.15rem;
    color: var(--color-primary);
}

.resource-category-card__copy {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.resource-category-card__title {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
    color: var(--color-text);
}

.resource-category-card:hover .resource-category-card__title,
.resource-card:hover .resource-card__title {
    color: var(--color-primary);
}

.resource-category-card__text,
.resource-card__text {
    font-size: var(--font-size-small);
    color: var(--color-muted);
}

.resource-category-card__more {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.35rem;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.resource-category-card__more svg {
    width: 1em;
    height: 1em;
}

.resource-category-card__media,
.resource-card__media {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--radius-md);
    background-color: var(--color-soft-green);
}

.resource-category-card__media {
    height: 4.5rem;
}

.resource-category-card__media img,
.resource-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.resource-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
}

.resource-card--planned {
    cursor: default;
}

.resource-card__more,
.resource-category-card__more {
    margin-top: auto;
}

.resource-card__media {
    aspect-ratio: 16 / 9;
    margin: calc(var(--space-3) * -1) calc(var(--space-3) * -1) 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.resource-card__category {
    font-size: var(--font-size-eyebrow);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.resource-card__title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
    color: var(--color-text);
}

.resources-help {
    padding-top: 0;
}

.resources-help__panel {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-3);
    background-color: var(--color-soft-green);
    border-radius: var(--radius-lg);
}

.resources-help__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--color-surface);
    color: var(--color-primary);
}

.resources-help__title {
    margin-bottom: var(--space-1);
    font-size: var(--font-size-h3);
}

.resources-help__text {
    margin-bottom: var(--space-2);
    color: var(--color-muted);
}

.resources-help__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    margin: 0;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
}

.resources-help .btn {
    justify-content: center;
}

.resources-trust {
    padding-block: var(--space-6);
    background-color: var(--color-primary);
    color: var(--color-on-dark);
}

.resources-trust__inner {
    display: grid;
    gap: var(--space-4);
}

.resources-trust__title {
    color: var(--color-on-dark);
}

.resources-trust__text {
    color: var(--color-on-dark-muted);
}

.resources-trust__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
}

.resources-trust__points {
    display: grid;
    gap: var(--space-3);
}

.resources-trust__point {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-weight: var(--font-weight-semibold);
}

.resources-trust__point-icon {
    display: inline-flex;
    flex: none;
    color: var(--color-accent);
}

.resources-trust__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background-color: var(--color-primary-dark);
}

@media (min-width: 768px) {
    .resources-hero {
        padding-block: var(--space-6) var(--space-3);
    }

    .resources-hero__actions,
    .resources-trust__actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .resources-hero__trust {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-2) var(--space-4);
    }

    .resources-categories__grid,
    .resources-featured__grid,
    .resources-trust__points {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .resource-category-card {
        grid-template-columns: auto minmax(0, 1fr) 7.5rem;
        align-items: stretch;
    }

    .resource-category-card__media {
        height: auto;
        min-height: 7rem;
    }

    .resources-help__panel {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        padding: var(--space-4);
    }

    .resources-help__icon {
        grid-row: span 2;
    }

    .resources-help .btn {
        justify-self: start;
    }

    .resources-trust__image {
        aspect-ratio: 16 / 7;
    }
}

@media (min-width: 1024px) {
    .resources-hero__layout {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        align-items: center;
        gap: var(--space-6);
    }

    .resources-hero__image {
        aspect-ratio: 5 / 4;
        min-height: 24rem;
    }

    .resources-hero__trust {
        flex-wrap: nowrap;
    }

    .resources-featured__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .resources-help__panel {
        grid-template-columns: auto minmax(0, 1fr) auto;
        padding: var(--space-4) var(--space-5);
    }

    .resources-help__icon {
        grid-row: auto;
    }

    .resources-trust {
        padding-block: var(--space-8);
    }

    .resources-trust__inner {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 0.8fr);
        align-items: center;
        gap: var(--space-6);
    }

    .resources-trust__points {
        grid-template-columns: 1fr;
    }

    .resources-trust__image {
        aspect-ratio: 4 / 5;
    }
}

@media (min-width: 1200px) {
    .resources-categories__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}


/* 21. Research resources category
   Scoped .resource-category* and .resource-topic-* rules.
   Article cards reuse .resource-card.
   ========================================================================== */

.resource-category-hero {
    padding-block: var(--space-4) var(--space-2);
}

.resource-category-hero__layout {
    display: grid;
    gap: var(--space-4);
}

.resource-category-hero .breadcrumbs {
    margin-bottom: var(--space-3);
}

.resource-category-hero__title {
    max-width: 16em;
    margin-bottom: var(--space-2);
    font-size: clamp(2rem, 1.05rem + 2vw, 3rem);
    color: var(--color-text);
}

.resource-category-hero__lead {
    max-width: 36rem;
    margin: 0;
    font-size: var(--font-size-body-lg);
    color: var(--color-muted);
}

.resource-category-hero__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background-color: var(--color-soft-green);
}

.resource-topic-nav__header,
.resource-category-featured__header,
.resource-topic-section__header {
    max-width: 40rem;
    margin-bottom: var(--space-4);
}

.resource-topic-nav__header p,
.resource-category-featured__header p,
.resource-topic-section__header p {
    margin: 0;
    color: var(--color-muted);
}

.resource-topic-nav__grid,
.resource-category-featured__grid,
.resource-topic-section__grid {
    display: grid;
    gap: var(--space-3);
}

.resource-topic-nav__card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.15rem var(--space-2);
    align-items: center;
    height: 100%;
    padding: var(--space-2);
    text-decoration: none;
}

.resource-topic-nav__icon {
    display: inline-flex;
    grid-column: 1;
    grid-row: 1 / span 2;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: var(--color-soft-green);
    color: var(--color-primary);
}

.resource-topic-nav__title {
    grid-column: 2;
    grid-row: 1;
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
    color: var(--color-text);
}

.resource-topic-nav__card:hover .resource-topic-nav__title {
    color: var(--color-primary);
}

.resource-topic-nav__text {
    grid-column: 2;
    grid-row: 2;
    font-size: var(--font-size-small);
    color: var(--color-muted);
}

.resource-topic-nav__go {
    display: inline-flex;
    grid-column: 3;
    grid-row: 1 / span 2;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-primary);
}

.resource-topic-nav__go svg {
    width: 1rem;
    height: 1rem;
}

.resource-category .resource-card__media,
.resource-category-featured .resource-card__media {
    margin: calc(var(--space-3) * -1) calc(var(--space-3) * -1) 0;
}

.resource-card__more {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: auto;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.resource-card__more svg {
    width: 1em;
    height: 1em;
}

.resource-service-link {
    margin: var(--space-3) 0 0;
    color: var(--color-muted);
    font-size: var(--font-size-small);
}

.resource-category-cta {
    padding-block: var(--space-6);
    background-color: var(--color-primary);
    color: var(--color-on-dark);
}

.resource-category-cta__inner {
    display: grid;
    gap: var(--space-3);
}

.resource-category-cta__title {
    color: var(--color-on-dark);
}

.resource-category-cta__text {
    max-width: 40rem;
    margin: 0;
    color: var(--color-on-dark-muted);
}

.resource-category-cta__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
}

@media (min-width: 768px) {
    .resource-category-hero {
        padding-block: var(--space-6) var(--space-4);
    }

    .resource-topic-nav__grid,
    .resource-category-featured__grid,
    .resource-topic-section__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .resource-category-cta__actions {
        flex-direction: row;
        align-items: center;
    }

    .resource-category-featured .resource-card__media {
        margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) 0;
    }
}

@media (min-width: 1024px) {
    .resource-category-hero__layout {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        align-items: center;
        gap: var(--space-6);
    }

    .resource-category-hero__image {
        aspect-ratio: 5 / 4;
        min-height: 22rem;
    }

    .resource-topic-nav__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .resource-category-cta {
        padding-block: var(--space-8);
    }

    .resource-category-cta__inner {
        grid-template-columns: minmax(0, 1.4fr) auto;
        align-items: center;
        gap: var(--space-6);
    }
}

@media (min-width: 1200px) {
    .resource-topic-nav__grid,
    .resource-category-featured__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .resource-topic-nav__grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .resource-topic-nav__card {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
    }

    .resource-topic-nav__icon {
        grid-column: 1;
        grid-row: 1;
    }

    .resource-topic-nav__go {
        grid-column: 2;
        grid-row: 1;
    }

    .resource-topic-nav__title,
    .resource-topic-nav__text {
        grid-column: 1 / -1;
        grid-row: auto;
    }
}


/* 22. Article template
   Scoped .article-* rules. Reading measure stays near 42rem.
   Breakpoints: 768 / 1024.
   ========================================================================== */

.article-header {
    padding-block: var(--space-4) var(--space-2);
}

.article-header__layout {
    display: grid;
    gap: var(--space-4);
}

.article-header .breadcrumbs {
    margin-bottom: var(--space-3);
}

.article-header__title {
    max-width: 16em;
    margin-bottom: var(--space-2);
    font-size: clamp(2rem, 1.1rem + 1.8vw, 3rem);
    color: var(--color-text);
}

.article-header__summary {
    max-width: 40rem;
    margin-bottom: var(--space-3);
    font-size: var(--font-size-body-lg);
    color: var(--color-muted);
}

.article-header__byline {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.article-header__byline-icon {
    display: inline-flex;
    color: var(--color-primary);
}

.article-header__image {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background-color: var(--color-soft-green);
}

.article-layout {
    display: grid;
    gap: var(--space-4);
}

.article-content {
    min-width: 0;
    font-size: 1.0625rem;
    line-height: 1.7;
}

.article-content p,
.article-content li {
    color: var(--color-text);
}

.article-content h2,
.article-content h3 {
    scroll-margin-top: 6.5rem;
}

.article-section {
    margin-top: var(--space-6);
}

.article-section h2 {
    margin-bottom: var(--space-2);
}

.article-content ul,
.article-content ol {
    margin: 0 0 var(--space-3);
    padding-left: 1.25rem;
}

.article-content .article-checklist,
.article-content .article-steps,
.article-content .article-sequence,
.article-content .article-mistakes {
    padding-left: 0;
}

.article-content li + li {
    margin-top: 0.35rem;
}

.article-note {
    font-size: var(--font-size-small);
    color: var(--color-muted);
}

.article-callout {
    margin-top: var(--space-4);
    padding: var(--space-3);
    background-color: var(--color-soft-green);
    border-radius: var(--radius-lg);
}

.article-callout__title {
    margin-bottom: var(--space-2);
    font-size: var(--font-size-h4);
}

.article-toc__summary {
    font-family: var(--font-heading);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
}

.article-toc__summary:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
    box-shadow: none;
}

.article-toc__details:not([open]) .article-toc__list {
    display: none;
}

.article-toc__details[open] .article-toc__list {
    display: grid;
    gap: 0.35rem;
    margin: var(--space-2) 0 0;
    padding: 0;
    list-style: none;
}

.article-toc__list a {
    display: flex;
    gap: var(--space-2);
    padding: 0.35rem 0;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
}

.article-toc__list a:hover,
.article-toc__list a:focus-visible {
    text-decoration: underline;
}

.article-toc__index {
    flex: none;
    width: 1.25rem;
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.article-options,
.article-example,
.article-related__grid {
    display: grid;
    gap: var(--space-3);
}

.article-options__card p,
.article-example__card p,
.article-example__card ol {
    margin-bottom: 0;
    color: var(--color-muted);
    font-size: var(--font-size-small);
}

.article-example__card--strong {
    background-color: var(--color-soft-green);
    border-color: transparent;
}

.article-steps,
.article-sequence {
    display: grid;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    padding: 0;
    list-style: none;
    counter-reset: article-step;
}

.article-steps li,
.article-sequence li {
    position: relative;
    padding-left: 2.5rem;
}

.article-steps li::before,
.article-sequence li::before {
    content: counter(article-step);
    counter-increment: article-step;
    position: absolute;
    left: 0;
    top: 0.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: var(--color-on-dark);
    font-family: var(--font-heading);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
}

.article-sequence h3 {
    margin-bottom: 0.25rem;
    font-size: 1.125rem;
}

.article-sequence p {
    margin: 0;
    color: var(--color-muted);
    font-size: var(--font-size-small);
}

.article-mistakes {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.article-mistakes li {
    padding-left: var(--space-2);
    border-left: 2px solid var(--color-accent);
}

.article-checklist {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.article-checklist li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.article-checklist__icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.15rem;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: var(--color-white);
}

.article-checklist__icon svg {
    width: 0.8rem;
    height: 0.8rem;
}

.article-service-cta {
    margin-top: var(--space-6);
    padding: var(--space-4);
    background-color: var(--color-soft-green);
    border-radius: var(--radius-lg);
}

.article-service-cta__title {
    margin-bottom: var(--space-2);
    font-size: var(--font-size-h3);
}

.article-service-cta__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
}

.article-faq {
    margin-top: var(--space-6);
    padding-top: 0;
}

.article-related h2 {
    margin-bottom: var(--space-4);
}

@media (min-width: 768px) {
    .article-header {
        padding-block: var(--space-6) var(--space-4);
    }

    .article-options,
    .article-example {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .article-service-cta__actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .article-related__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .article-header__layout {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        align-items: center;
        gap: var(--space-6);
    }

    .article-header__image {
        aspect-ratio: 5 / 4;
        min-height: 18rem;
    }

    .article-layout {
        grid-template-columns: minmax(0, 42rem) 18rem;
        align-items: start;
        justify-content: start;
        gap: var(--space-8);
    }

    .article-content {
        grid-column: 1;
        grid-row: 1;
        max-width: 42rem;
    }

    .article-toc {
        grid-column: 2;
        grid-row: 1;
        position: sticky;
        top: 6rem;
    }

    /* Keep the contents visible beside the article. The summary stays for the accessible name. */
    .article-toc__list {
        display: grid !important;
    }

    .article-toc__summary {
        pointer-events: none;
        list-style: none;
    }

    .article-toc__summary::-webkit-details-marker {
        display: none;
    }

    .article-related__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}


/* 23. Checklist template
   Scoped .checklist-* rules. Breakpoints: 768 / 1024 / 1200.
   ========================================================================== */

.checklist-hero {
    padding-block: var(--space-4) var(--space-2);
}

.checklist-hero__layout {
    display: grid;
    gap: var(--space-4);
}

.checklist-hero .breadcrumbs {
    margin-bottom: var(--space-3);
}

.checklist-hero__title {
    max-width: 18em;
    margin-bottom: var(--space-2);
    font-size: clamp(2rem, 1.05rem + 1.6vw, 2.75rem);
    color: var(--color-text);
}

.checklist-hero__lead,
.checklist-hero__note {
    max-width: 40rem;
    color: var(--color-muted);
}

.checklist-hero__note {
    font-size: var(--font-size-small);
}

.checklist-hero__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.checklist-hero__trust {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: var(--font-size-small);
    color: var(--color-muted);
}

.checklist-hero__trust-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.checklist-hero__trust-icon {
    display: inline-flex;
    flex: none;
    color: var(--color-primary);
}

.checklist-hero__image {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background-color: var(--color-soft-green);
}

.checklist-howto__header,
.checklist-included__header,
.checklist-priority__header {
    max-width: 42rem;
    margin-bottom: var(--space-4);
}

.checklist-howto__header p,
.checklist-included__header p,
.checklist-priority__header p {
    margin: 0;
    color: var(--color-muted);
}

.checklist-howto__steps,
.checklist-priority__list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.checklist-howto__steps li,
.checklist-priority__list li {
    position: relative;
    padding-left: 3rem;
}

.checklist-howto__index,
.checklist-priority__index {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: var(--color-on-dark);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-semibold);
}

.checklist-howto__steps h3,
.checklist-priority__list h3 {
    margin-bottom: 0.25rem;
    font-size: 1.125rem;
}

.checklist-howto__steps p,
.checklist-priority__list p {
    margin: 0;
    color: var(--color-muted);
    font-size: var(--font-size-small);
}

.checklist-included__grid {
    display: grid;
    gap: var(--space-2);
}

.checklist-included__card {
    height: 100%;
    text-decoration: none;
}

.checklist-included__icon {
    display: inline-flex;
    color: var(--color-primary);
}

.checklist-included__title {
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.checklist-included__card:hover .checklist-included__title {
    color: var(--color-primary);
}

.checklist-included__text {
    font-size: var(--font-size-small);
    color: var(--color-muted);
}

.checklist-layout__inner {
    max-width: 48rem;
}

.checklist-group {
    padding: var(--space-3);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.checklist-group + .checklist-group {
    margin-top: var(--space-3);
}

.checklist-group__title {
    margin-bottom: var(--space-2);
    font-size: var(--font-size-h3);
    scroll-margin-top: 6.5rem;
}

.checklist-group__items {
    display: grid;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.checklist-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    min-height: 2.75rem;
    padding: 0.4rem 0;
    cursor: pointer;
}

.checklist-item__box {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.15rem;
    accent-color: var(--color-primary);
}

.checklist-compare__grid,
.checklist-when__inner {
    display: grid;
    gap: var(--space-3);
}

.checklist-compare__grid p,
.checklist-when__inner p {
    color: var(--color-muted);
}

.checklist-when__list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.checklist-when__list li {
    padding-left: var(--space-2);
    border-left: 2px solid var(--color-accent);
}

.checklist-service-cta__more {
    margin: var(--space-3) 0 0;
    color: var(--color-muted);
    font-size: var(--font-size-small);
}

.checklist-integrity {
    padding-top: 0;
}

.checklist-integrity p {
    max-width: 42rem;
    color: var(--color-muted);
}

.checklist-faq {
    padding-bottom: var(--space-6);
}

@media (min-width: 768px) {
    .checklist-hero {
        padding-block: var(--space-6) var(--space-4);
    }

    .checklist-hero__actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .checklist-hero__trust {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-2) var(--space-4);
    }

    .checklist-howto__steps,
    .checklist-included__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .checklist-compare__grid,
    .checklist-when__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
}

@media (min-width: 1024px) {
    .checklist-hero__layout {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        align-items: center;
        gap: var(--space-6);
    }

    .checklist-hero__image {
        aspect-ratio: 5 / 4;
        min-height: 20rem;
    }

    .checklist-hero__trust {
        flex-wrap: nowrap;
    }

    .checklist-howto__steps,
    .checklist-priority__list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .checklist-priority__list {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .checklist-included__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media print {
    body:has(.checklist-page) .skip-link,
    body:has(.checklist-page) .trust-bar,
    body:has(.checklist-page) .site-header,
    body:has(.checklist-page) .site-footer,
    body:has(.checklist-page) .checklist-service-cta,
    body:has(.checklist-page) .checklist-related,
    body:has(.checklist-page) .checklist-faq,
    body:has(.checklist-page) .cta-banner,
    body:has(.checklist-page) .checklist-hero__media,
    body:has(.checklist-page) .checklist-hero__actions {
        display: none !important;
    }

    body:has(.checklist-page) {
        background: #fff;
        color: #000;
    }

    body:has(.checklist-page) .checklist-page,
    body:has(.checklist-page) .checklist-group,
    body:has(.checklist-page) .card {
        background: #fff;
        color: #000;
        box-shadow: none;
    }

    body:has(.checklist-page) .checklist-group {
        break-inside: avoid;
        border-color: #000;
    }

    body:has(.checklist-page) h1,
    body:has(.checklist-page) h2,
    body:has(.checklist-page) h3,
    body:has(.checklist-page) p,
    body:has(.checklist-page) li,
    body:has(.checklist-page) a {
        color: #000;
    }
}


/* 24. Experts listing
   Scoped .experts-* and .expert-card rules. Breakpoints: 768 / 1024 / 1200.
   ========================================================================== */

.experts-hero {
    padding-block: var(--space-4) var(--space-2);
}

.experts-hero__layout {
    display: grid;
    gap: var(--space-4);
}

.experts-hero .breadcrumbs {
    margin-bottom: var(--space-3);
}

.experts-hero__title {
    max-width: 16em;
    margin-bottom: var(--space-2);
    font-size: clamp(2rem, 1.1rem + 1.8vw, 3rem);
    color: var(--color-text);
}

.experts-hero__lead {
    max-width: 40rem;
    margin-bottom: var(--space-4);
    font-size: var(--font-size-body-lg);
    color: var(--color-muted);
}

.experts-hero__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.experts-hero__trust {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: var(--font-size-small);
    color: var(--color-muted);
}

.experts-hero__trust-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.experts-hero__trust-icon {
    display: inline-flex;
    flex: none;
    color: var(--color-primary);
}

.experts-hero__image {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background-color: var(--color-soft-green);
}

.experts-directory__header,
.experts-support__header {
    max-width: 42rem;
    margin-bottom: var(--space-4);
}

.experts-directory__header p,
.experts-support__header p,
.experts-selection__inner p {
    margin: 0 0 var(--space-2);
    color: var(--color-muted);
}

.experts-glance__header,
.expert-matcher {
    max-width: 52rem;
}

.experts-glance__header {
    margin-bottom: var(--space-4);
}

.experts-glance__header p,
.expert-matcher__lead,
.expert-matcher__prompt,
.expert-matcher__fallback {
    margin: 0;
    color: var(--color-muted);
}

.expert-matcher__lead,
.expert-matcher__prompt {
    margin-bottom: var(--space-3);
}

.experts-glance__grid {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.experts-glance__grid > li,
.experts-grid > li,
.expert-choice {
    min-width: 0;
}

.experts-glance__tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    min-width: 0;
    min-height: 100%;
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-sm);
    color: inherit;
    text-decoration: none;
    transition: transform var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard), border-color var(--motion-base) var(--ease-standard);
}

.experts-glance__tile:hover {
    transform: translateY(-3px);
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
}

.experts-glance__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-md);
    background-color: var(--color-soft-green);
    color: var(--color-primary);
}

.experts-glance__icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.experts-glance__title {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
    color: var(--color-text);
}

.experts-glance__expert {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: auto;
    color: var(--color-primary);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
}

.experts-glance__expert svg {
    width: 1rem;
    height: 1rem;
    transition: transform var(--motion-fast) var(--ease-standard);
}

.experts-glance__tile:hover .experts-glance__expert svg {
    transform: translateX(3px);
}

.expert-matcher-section {
    scroll-margin-top: var(--space-3);
}

.expert-matcher__question {
    min-width: 0;
    margin: 0 0 var(--space-3);
    padding: 0;
    border: 0;
}

.expert-matcher__question legend {
    margin-bottom: var(--space-2);
    padding: 0;
    font-family: var(--font-heading);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.expert-choice-grid {
    display: grid;
    gap: 0.5rem;
}

.expert-choice {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    min-width: 0;
    min-height: var(--control-height);
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    cursor: pointer;
    transition: border-color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard);
}

.expert-choice:has(input:checked) {
    border-color: var(--color-primary);
    background-color: var(--color-soft-green);
}

.expert-choice input {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.15rem;
    accent-color: var(--color-primary);
}

.expert-choice span {
    min-width: 0;
    color: var(--color-text);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
}

.expert-match {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-md);
    animation: expert-match-in var(--motion-base) var(--ease-emphasized);
}

.expert-match--unsure {
    display: block;
}

.expert-match__photo {
    width: 8.5rem;
    max-width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center top;
    border-radius: var(--radius-md);
    background-color: var(--color-soft-green);
}

.expert-match__note,
.expert-match__service {
    margin: 0 0 0.35rem;
    color: var(--color-primary);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
}

.expert-match__name,
.expert-match__related-title {
    margin: 0 0 0.35rem;
}

.expert-match__qualification,
.expert-match__experience,
.expert-match__review,
.expert-match__mini-service {
    margin: 0 0 0.45rem;
    color: var(--color-text);
}

.expert-match__experience,
.expert-match__mini-service {
    color: var(--color-muted);
    font-size: var(--font-size-small);
}

.expert-match__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.expert-match__related {
    margin-top: var(--space-3);
}

.expert-match__related-list {
    display: grid;
    gap: var(--space-2);
}

.expert-match__mini {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-background);
}

.expert-match__mini img {
    width: 4.5rem;
    height: 4.5rem;
    object-fit: cover;
    object-position: center top;
    border-radius: var(--radius-md);
    background-color: var(--color-soft-green);
}

.expert-match__mini-name {
    margin: 0 0 0.2rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

#find-expert,
#experts-directory,
.experts-grid > li {
    scroll-margin-top: var(--space-3);
}

.experts-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: var(--space-4);
}

.experts-filter {
    min-height: var(--control-height);
    padding: 0.45rem 0.95rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background-color: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}

.experts-filter[aria-pressed="true"] {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-background);
}

.expert-card.is-highlighted {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
}

@keyframes expert-match-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.experts-grid,
.experts-support__list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.expert-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-sm);
    transition: transform var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard), border-color var(--motion-base) var(--ease-standard);
}

.expert-card:hover,
.expert-card:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md, 0 12px 28px rgba(21, 35, 62, 0.08));
    border-color: var(--color-accent);
}

.expert-card__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    margin: 0;
    border-radius: 0;
    background-color: var(--color-soft-green);
}

.expert-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform var(--motion-slow) var(--ease-emphasized);
}

.expert-card:hover .expert-card__media img,
.expert-card:focus-within .expert-card__media img {
    transform: scale(1.025);
}

.expert-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: var(--space-3);
    gap: 0.35rem;
}

.expert-card__service,
.expert-card__subject {
    margin: 0;
    font-size: var(--font-size-eyebrow);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.expert-card__name {
    margin: 0.15rem 0 0.25rem;
    font-size: 1.3rem;
    color: var(--color-text);
}

.expert-card__qualification {
    margin: 0 0 0.25rem;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-small);
    color: var(--color-text);
}

.expert-card__experience {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-small);
    color: var(--color-muted);
}

.expert-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: auto;
    padding-top: var(--space-2);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    color: var(--color-primary);
}

.expert-card__link svg {
    transition: transform var(--motion-fast) var(--ease-standard);
}

.expert-card:hover .expert-card__link svg,
.expert-card__link:hover svg {
    transform: translateX(4px);
}

.editorial-note {
    margin: 0.6rem 0 0;
    color: var(--color-muted);
    font-size: var(--font-size-small);
}

.review-example__header {
    max-width: 40rem;
    margin-bottom: var(--space-4);
}

.review-example__pair {
    display: grid;
    gap: var(--space-3);
}

.review-example__card {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    transition: transform var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard);
}

.review-example__card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform var(--motion-base) var(--ease-standard);
}

.review-example__card figcaption {
    display: grid;
    gap: 0.35rem;
    padding: var(--space-3);
}

.review-example__card figcaption span {
    color: var(--color-muted);
}

.review-example__card:hover,
.review-example__card:focus-within {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md, 0 12px 28px rgba(21, 35, 62, 0.08));
}

.review-example__card:hover img,
.review-example__card:focus-within img {
    transform: scale(1.02);
}

.home-why__image.editorial-frame {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

@media (min-width: 768px) {
    .review-example__pair {
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
    }
}

@media (prefers-reduced-motion: reduce) {
    .review-example__card:hover,
    .review-example__card:focus-within,
    .review-example__card:hover img,
    .review-example__card:focus-within img,
    .experts-glance__tile:hover,
    .experts-glance__tile:hover .experts-glance__expert svg,
    .expert-card.is-highlighted {
        transform: none;
    }

    .expert-match {
        animation: none;
    }
}

.expert-card__subject,
.expert-card__pending {
    margin: 0;
    font-size: var(--font-size-eyebrow);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.expert-card__name {
    margin: 0.25rem 0;
    font-size: 1.25rem;
}

.expert-card__bio,
.expert-card__qualification {
    margin-bottom: var(--space-2);
    color: var(--color-muted);
    font-size: var(--font-size-small);
}

.expert-card__specialties {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: auto 0 0;
    padding: 0;
    list-style: none;
}

.expert-card__specialties li {
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background-color: var(--color-background);
    font-size: var(--font-size-small);
}

.experts-directory__empty {
    margin: var(--space-3) 0 0;
    color: var(--color-muted);
}

.experts-selection {
    background-color: var(--color-surface);
    border-block: 1px solid var(--color-border);
}

.experts-selection__list,
.experts-integrity__grid ul {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.experts-selection__list li,
.experts-integrity__grid li {
    padding-left: var(--space-2);
    border-left: 2px solid var(--color-accent);
}

.experts-support__list a {
    display: flex;
    align-items: center;
    min-height: 3rem;
    padding: var(--space-2);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}

.experts-support__list a:hover {
    border-color: var(--color-primary);
}

.experts-integrity__panel {
    padding: var(--space-4);
    background-color: var(--color-soft-green);
    border-radius: var(--radius-lg);
}

.experts-integrity__grid {
    display: grid;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}

.experts-integrity__note {
    color: var(--color-muted);
}

@media (min-width: 768px) {
    .experts-hero {
        padding-block: var(--space-6) var(--space-4);
    }

    .experts-hero__actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .experts-hero__trust {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-2) var(--space-4);
    }

    .experts-glance__grid,
    .expert-choice-grid,
    .expert-match__related-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .expert-match {
        grid-template-columns: 8.5rem minmax(0, 1fr);
        align-items: start;
    }

    .experts-grid,
    .experts-support__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .expert-card__media {
        margin: 0;
    }

    .experts-selection__inner,
    .experts-integrity__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: var(--space-6);
    }
}

@media (min-width: 1024px) {
    .experts-hero__layout {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        align-items: center;
        gap: var(--space-6);
    }

    .experts-hero__image {
        aspect-ratio: 5 / 4;
        min-height: 20rem;
    }

    .experts-hero__trust {
        flex-wrap: wrap;
    }

    .experts-glance__grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .experts-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .experts-grid > li:last-child:nth-child(3n + 1):not([hidden]) {
        grid-column: 2;
    }
}


/* 25. Expert profile
   Scoped .expert-profile* rules. Breakpoints: 768 / 1024.
   ========================================================================== */

.expert-profile-hero {
    padding-block: var(--space-4) var(--space-3);
}

.expert-profile-hero__layout {
    display: grid;
    gap: var(--space-5);
}

.expert-profile-hero__crumbs {
    margin-bottom: var(--space-2);
}

.expert-profile-aside {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.expert-profile-photo {
    width: 100%;
    max-width: 22rem;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    background-color: var(--color-soft-green);
}

.expert-profile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.expert-profile-details {
    padding: var(--space-3);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.expert-profile-details__list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.expert-profile-details__list li {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.expert-profile-details__list span {
    font-size: var(--font-size-eyebrow);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.expert-profile-details__list strong {
    font-size: var(--font-size-small);
    color: var(--color-text);
}

.expert-profile-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.expert-profile-main__title {
    margin: 0;
    font-size: clamp(2rem, 1.2rem + 1.8vw, 2.85rem);
    color: var(--color-text);
}

.expert-profile-main__service {
    margin: 0;
    font-size: var(--font-size-body-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.expert-profile-section {
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
}

.expert-profile-section h2 {
    margin: 0 0 0.4rem;
    font-size: 1.15rem;
    color: var(--color-text);
}

.expert-profile-section__text {
    margin: 0;
    font-size: var(--font-size-body);
    line-height: var(--line-height-relaxed);
    color: var(--color-text);
}

.expert-profile-facts {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.expert-profile-facts li {
    font-size: var(--font-size-body);
    color: var(--color-text);
}

.expert-profile-fit {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.expert-profile-fit li {
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius-pill);
    background-color: var(--color-soft-green);
    color: var(--color-text);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
}

.expert-profile-main__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-top: var(--space-3);
}

.expert-profile-services__list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.expert-profile-services__list a {
    display: flex;
    align-items: center;
    min-height: 3rem;
    padding: var(--space-2);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}

.expert-profile-services__list a:hover {
    border-color: var(--color-primary);
}

.expert-profile-integrity__panel {
    padding: var(--space-4);
    background-color: var(--color-soft-green);
    border-radius: var(--radius-lg);
}

.expert-profile-integrity__panel ul {
    margin: 0 0 var(--space-3);
    padding-left: 1.25rem;
}

@media (min-width: 768px) {
    .expert-profile-hero {
        padding-block: var(--space-6) var(--space-4);
    }

    .expert-profile-main__actions {
        flex-direction: row;
        align-items: center;
    }

    .expert-profile-services__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .expert-profile-hero__layout {
        grid-template-columns: minmax(18rem, 21rem) minmax(0, 1fr);
        align-items: start;
        gap: var(--space-6);
    }

    .expert-profile-photo {
        max-width: 100%;
    }

    .expert-profile-services__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* 26. How It Works
   Scoped .how-* rules. Breakpoints: 768 / 1024 / 1440.
   ========================================================================== */

.how-hero {
    padding-block: var(--space-4) var(--space-6);
}

.how-hero__layout {
    display: grid;
    gap: var(--space-4);
}

.how-hero .breadcrumbs {
    margin-bottom: var(--space-3);
}

.how-hero__title {
    max-width: 14em;
    margin-bottom: var(--space-2);
    font-size: clamp(2.15rem, 1.2rem + 2.4vw, 3.5rem);
    color: var(--color-text);
}

.how-hero__lead {
    max-width: 38rem;
    margin-bottom: var(--space-4);
    font-size: var(--font-size-body-lg);
    color: var(--color-muted);
}

.how-hero__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.how-hero__actions .btn,
.how-assessment .btn,
.how-questions .btn,
.how-hero__card .btn {
    width: 100%;
}

.how-hero__jump {
    margin-bottom: var(--space-3);
}

.how-hero__trust {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--color-muted);
    font-size: var(--font-size-small);
}

.how-hero__trust-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.how-hero__trust-icon {
    display: inline-flex;
    flex: none;
    color: var(--color-primary);
}

.how-hero__media {
    position: relative;
    min-width: 0;
}

.how-hero__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background-color: var(--color-soft-green);
}

.how-hero__card {
    margin-top: var(--space-3);
    padding: var(--space-3);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.how-hero__card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: var(--space-2);
    border-radius: var(--radius-pill);
    background-color: var(--color-soft-green);
    color: var(--color-primary);
}

.how-hero__card-title {
    margin-bottom: var(--space-1);
    font-size: var(--font-size-h4);
}

.how-hero__card p {
    color: var(--color-muted);
}

.how-process__header,
.how-expect__header,
.how-services__header {
    max-width: 40rem;
    margin-bottom: var(--space-4);
}

.how-process__header p,
.how-expect__header p,
.how-services__header p,
.how-materials p,
.how-assessment p,
.how-questions p,
.how-expect__card p,
.how-step__text,
.how-services__text {
    color: var(--color-muted);
}

.how-process__steps,
.how-expect__grid,
.how-services__grid,
.how-materials__list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.how-step {
    position: relative;
    min-width: 0;
    height: 100%;
    padding: var(--space-3);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.how-step__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-bottom: var(--space-2);
    border-radius: var(--radius-pill);
    background-color: var(--color-primary);
    color: var(--color-on-dark);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-small);
}

.how-step__icon,
.how-expect__icon,
.how-services__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: var(--space-2);
    border-radius: var(--radius-pill);
    background-color: var(--color-soft-green);
    color: var(--color-primary);
}

.how-step__title,
.how-expect__card h3,
.how-services__name {
    margin-bottom: var(--space-1);
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.3;
}

.how-step__text,
.how-expect__card p,
.how-services__text {
    margin: 0;
    font-size: var(--font-size-small);
}

.how-expect {
    background-color: var(--color-surface);
}

.how-expect__card {
    height: 100%;
    padding: var(--space-3);
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.how-materials__note {
    padding: var(--space-2);
    background-color: var(--color-soft-green);
    border-radius: var(--radius-md);
}

.how-materials__list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    min-height: 2.75rem;
    padding: var(--space-2);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.how-materials__check {
    display: inline-flex;
    flex: none;
    color: var(--color-primary);
}

.how-services__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--space-3);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: inherit;
    text-decoration: none;
}

.how-services__card:hover,
.how-services__card:focus-visible {
    border-color: var(--color-primary);
    color: inherit;
}

.how-services__name {
    color: var(--color-text);
}

.how-services__all {
    margin-top: var(--space-3);
}

.how-integrity__panel {
    padding: var(--space-4);
    background-color: var(--color-soft-green);
    border-radius: var(--radius-lg);
}

.how-integrity__grid {
    display: grid;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}

.how-integrity__grid h3 {
    margin-bottom: var(--space-2);
    font-size: var(--font-size-h4);
}

.how-integrity__grid ul,
.how-assessment__looks,
.how-assessment__limits ul {
    margin: 0;
    padding-left: 1.25rem;
    list-style: disc;
}

.how-integrity__grid li + li,
.how-assessment__looks li + li,
.how-assessment__limits li + li {
    margin-top: var(--space-1);
}

.how-assessment__limits {
    padding: var(--space-3);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.how-assessment__limits h3 {
    margin-bottom: var(--space-2);
    font-size: var(--font-size-h4);
}

.how-questions__layout {
    display: grid;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-4);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.how-faq__inner {
    max-width: 46rem;
}

@media (min-width: 768px) {
    .how-hero__actions,
    .how-questions__layout {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .how-hero__actions .btn,
    .how-assessment .btn,
    .how-questions .btn {
        width: auto;
    }

    .how-hero__trust,
    .how-process__steps,
    .how-expect__grid,
    .how-materials__list,
    .how-services__grid,
    .how-integrity__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .how-materials__layout,
    .how-assessment__layout {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        gap: var(--space-6);
        align-items: start;
    }
}

@media (min-width: 1024px) {
    .how-hero__layout {
        grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.95fr);
        align-items: center;
        gap: var(--space-6);
    }

    .how-hero__card {
        position: absolute;
        top: var(--space-4);
        right: var(--space-3);
        width: min(18rem, 78%);
        margin-top: 0;
    }

    .how-hero__card .btn {
        width: 100%;
    }

    .how-process__steps,
    .how-expect__grid,
    .how-services__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .how-questions__layout {
        justify-content: space-between;
    }
}

@media (min-width: 1440px) {
    .how-process__steps {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: var(--space-3);
    }

    .how-step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 1.65rem;
        right: calc(var(--space-3) / -2 - 0.3rem);
        width: 0.45rem;
        height: 0.45rem;
        border-top: 2px solid var(--color-muted);
        border-right: 2px solid var(--color-muted);
        transform: rotate(45deg);
        pointer-events: none;
    }

    .how-expect__grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}


/* 27. Free assessment
   Scoped .assessment-* rules. Breakpoints: 768 / 1024 / 1440.
   ========================================================================== */

.assessment-hero {
    padding-block: var(--space-4) var(--space-4);
}

.assessment-hero__layout {
    display: grid;
    gap: var(--space-4);
    align-items: center;
}

.assessment-hero .breadcrumbs {
    margin-bottom: var(--space-3);
}

.assessment-hero__title {
    max-width: 16em;
    margin-bottom: var(--space-2);
    font-size: clamp(2.1rem, 1.2rem + 2.2vw, 3.25rem);
    color: var(--color-text);
}

.assessment-hero__lead {
    max-width: 38rem;
    margin-bottom: var(--space-3);
    font-size: var(--font-size-body-lg);
    color: var(--color-muted);
}

.assessment-hero__trust {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--color-muted);
    font-size: var(--font-size-small);
}

.assessment-hero__trust li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.assessment-hero__trust-icon {
    display: inline-flex;
    flex: none;
    color: var(--color-primary);
}

.assessment-hero__image {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background-color: var(--color-soft-green);
}

.assessment-layout {
    display: grid;
    gap: var(--space-6);
    padding-bottom: var(--space-6);
}

.assessment-form {
    position: relative;
    min-width: 0;
    padding: var(--space-3);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.assessment-form > p,
.assessment-benefits > p,
.assessment-process__header p,
.assessment-process__step p,
.assessment-benefits__card p,
.assessment-alternative p {
    color: var(--color-muted);
}

.assessment-status {
    margin-bottom: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-soft-green);
    border-radius: var(--radius-md);
    color: var(--color-primary-dark);
}

.assessment-status--error {
    background-color: rgba(159, 47, 47, 0.06);
    color: var(--color-error);
}

.assessment-form__grid {
    display: grid;
    gap: var(--space-1) var(--space-3);
}

.assessment-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.assessment-upload {
    margin: var(--space-2) 0 var(--space-3);
    padding: var(--space-4) var(--space-3);
    text-align: center;
    background-color: var(--color-background);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
}

.assessment-upload__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: var(--space-2);
    border-radius: var(--radius-pill);
    background-color: var(--color-soft-green);
    color: var(--color-primary);
}

.assessment-upload p {
    margin-bottom: var(--space-1);
    color: var(--color-muted);
}

.assessment-upload strong {
    color: var(--color-text);
}

.assessment-form__privacy {
    font-size: var(--font-size-small);
}

.assessment-integrity {
    margin: var(--space-3) 0;
    padding: var(--space-3);
    background-color: var(--color-soft-green);
    border-radius: var(--radius-md);
}

.assessment-integrity p {
    color: var(--color-text);
}

.assessment-form__actions,
.assessment-alternative__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.assessment-form__actions .btn,
.assessment-alternative__actions .btn {
    width: 100%;
}

.assessment-benefits__grid,
.assessment-process__steps {
    display: grid;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    padding: 0;
    list-style: none;
}

.assessment-benefits__card,
.assessment-process__step,
.assessment-not,
.assessment-alternative {
    min-width: 0;
    padding: var(--space-3);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.assessment-benefits__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: var(--space-2);
    border-radius: var(--radius-pill);
    background-color: var(--color-soft-green);
    color: var(--color-primary);
}

.assessment-benefits__card h3,
.assessment-process__step h3 {
    margin-bottom: var(--space-1);
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.3;
}

.assessment-benefits__card p,
.assessment-process__step p {
    margin: 0;
    font-size: var(--font-size-small);
}

.assessment-not h3 {
    margin-bottom: var(--space-2);
    font-size: var(--font-size-h4);
}

.assessment-not ul {
    margin: 0;
    padding-left: 1.25rem;
    list-style: disc;
}

.assessment-not li + li {
    margin-top: var(--space-1);
}

.assessment-process__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-bottom: var(--space-2);
    border-radius: var(--radius-pill);
    background-color: var(--color-primary);
    color: var(--color-on-dark);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
}

.assessment-process {
    padding-top: 0;
}

.assessment-faq__layout {
    display: grid;
    gap: var(--space-4);
    align-items: start;
}

.assessment-faq .accordion {
    margin-top: var(--space-2);
}

@media (min-width: 768px) {
    .assessment-hero__trust,
    .assessment-form__grid,
    .assessment-benefits__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .assessment-field--wide {
        grid-column: 1 / -1;
    }

    .assessment-form__actions,
    .assessment-alternative__actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .assessment-form__actions .btn,
    .assessment-alternative__actions .btn {
        width: auto;
    }
}

@media (min-width: 1024px) {
    .assessment-hero__layout {
        grid-template-columns: minmax(0, 1.1fr) minmax(16rem, 0.9fr);
        gap: var(--space-6);
    }

    .assessment-layout {
        grid-template-columns: minmax(0, 1.15fr) minmax(16rem, 0.85fr);
        align-items: start;
        gap: var(--space-6);
    }

    .assessment-form {
        padding: var(--space-4);
    }

    .assessment-process__steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .assessment-faq__layout {
        grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 0.8fr);
        gap: var(--space-6);
    }
}

@media (min-width: 1440px) {
    .assessment-process__steps {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}


/* 28. About
   Scoped .about-* rules. Breakpoints: 768 / 1024 / 1440.
   ========================================================================== */

.about-hero {
    padding-block: var(--space-4) var(--space-4);
}

.about-hero__layout,
.about-who__layout,
.about-trust__layout {
    display: grid;
    gap: var(--space-4);
    align-items: center;
}

.about-hero .breadcrumbs {
    margin-bottom: var(--space-3);
}

.about-hero__title {
    max-width: 14em;
    margin-bottom: var(--space-2);
    font-size: clamp(2.15rem, 1.15rem + 2.3vw, 3.35rem);
    color: var(--color-text);
}

.about-hero__lead,
.about-hero__principle,
.about-who p,
.about-mission p,
.about-principles__header p,
.about-support__header p,
.about-process__header p,
.about-expertise p,
.about-integrity__panel p,
.about-privacy p,
.about-transparency p,
.about-ai p,
.about-principles__card p,
.about-process__step p {
    color: var(--color-muted);
}

.about-hero__lead {
    max-width: 38rem;
    margin-bottom: var(--space-2);
    font-size: var(--font-size-body-lg);
}

.about-hero__principle {
    margin-bottom: var(--space-3);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.about-hero__trust,
.about-who__roles,
.about-principles__grid,
.about-support__grid,
.about-process__steps {
    display: grid;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    padding: 0;
    list-style: none;
}

.about-hero__trust {
    margin-bottom: 0;
    color: var(--color-muted);
    font-size: var(--font-size-small);
}

.about-hero__trust li,
.about-who__roles li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.about-hero__trust-icon,
.about-who__check,
.about-principles__icon,
.about-support__icon {
    display: inline-flex;
    flex: none;
    color: var(--color-primary);
}

.about-hero__image,
.about-who__image {
    width: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background-color: var(--color-soft-green);
}

.about-hero__image {
    aspect-ratio: 3 / 2;
}

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

.about-who__note {
    font-size: var(--font-size-small);
}

.about-who__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.about-who__actions .btn {
    width: 100%;
}

.about-mission {
    padding-top: 0;
}

.about-mission__inner,
.about-expertise__inner,
.about-ai__panel {
    max-width: 46rem;
}

.about-mission__inner,
.about-expertise__inner {
    padding: var(--space-4);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.about-principles {
    background-color: var(--color-surface);
}

.about-principles__header,
.about-support__header,
.about-process__header {
    max-width: 40rem;
    margin-bottom: var(--space-4);
}

.about-principles__card,
.about-support__card,
.about-process__step,
.about-privacy,
.about-transparency {
    min-width: 0;
    height: 100%;
    padding: var(--space-3);
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.about-principles__icon,
.about-support__icon {
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: var(--space-2);
    border-radius: var(--radius-pill);
    background-color: var(--color-soft-green);
}

.about-principles__card h3,
.about-support__card h3,
.about-process__step h3,
.about-integrity__grid h3 {
    margin-bottom: var(--space-1);
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.3;
}

.about-principles__card p,
.about-process__step p {
    margin: 0;
    font-size: var(--font-size-small);
}

.about-support__card ul,
.about-integrity__grid ul,
.about-transparency ul {
    margin: 0;
    padding-left: 1.15rem;
    list-style: disc;
}

.about-support__card li + li,
.about-integrity__grid li + li,
.about-transparency li + li {
    margin-top: 0.35rem;
}

.about-process__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-bottom: var(--space-2);
    border-radius: var(--radius-pill);
    background-color: var(--color-primary);
    color: var(--color-on-dark);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
}

.about-process {
    padding-top: 0;
}

.about-integrity__panel,
.about-ai__panel {
    padding: var(--space-4);
    background-color: var(--color-soft-green);
    border-radius: var(--radius-lg);
}

.about-integrity__grid,
.about-side {
    display: grid;
    gap: var(--space-3);
}

.about-integrity__grid {
    margin-bottom: var(--space-3);
}

.about-side {
    align-content: start;
}

.about-privacy,
.about-transparency {
    background-color: var(--color-surface);
}

.about-ai {
    padding-top: 0;
}

@media (min-width: 768px) {
    .about-hero__trust,
    .about-principles__grid,
    .about-support__grid,
    .about-process__steps,
    .about-integrity__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-who__actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .about-who__actions .btn {
        width: auto;
    }
}

@media (min-width: 1024px) {
    .about-hero__layout,
    .about-who__layout {
        grid-template-columns: minmax(0, 1.05fr) minmax(16rem, 0.95fr);
        gap: var(--space-6);
    }

    .about-who__layout {
        grid-template-columns: minmax(16rem, 0.9fr) minmax(0, 1.1fr);
    }

    .about-trust__layout {
        grid-template-columns: minmax(0, 1.25fr) minmax(16rem, 0.75fr);
        align-items: start;
        gap: var(--space-4);
    }

    .about-principles__grid,
    .about-support__grid,
    .about-process__steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1440px) {
    .about-process__steps {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}


/* 29. Contact
   Scoped .contact-* rules. Breakpoints: 768 / 1024.
   ========================================================================== */

.contact-hero {
    padding-block: var(--space-4) var(--space-4);
}

.contact-hero__layout {
    display: grid;
    gap: var(--space-4);
    align-items: center;
}

.contact-hero .breadcrumbs {
    margin-bottom: var(--space-3);
}

.contact-hero__title {
    max-width: 12em;
    margin-bottom: var(--space-2);
    font-size: clamp(2.15rem, 1.2rem + 2.2vw, 3.25rem);
    color: var(--color-text);
}

.contact-hero__lead,
.contact-form > p,
.contact-channels p,
.contact-help__text,
.contact-privacy p,
.contact-integrity {
    color: var(--color-muted);
}

.contact-hero__lead {
    max-width: 38rem;
    margin-bottom: var(--space-3);
    font-size: var(--font-size-body-lg);
}

.contact-hero__trust {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--color-muted);
    font-size: var(--font-size-small);
}

.contact-hero__trust li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.contact-hero__trust-icon,
.contact-help__icon,
.contact-channel__icon {
    display: inline-flex;
    flex: none;
    color: var(--color-primary);
}

.contact-hero__image {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background-color: var(--color-soft-green);
}

.contact-layout {
    display: grid;
    gap: var(--space-6);
    padding-bottom: var(--space-6);
}

.contact-form {
    position: relative;
    min-width: 0;
    padding: var(--space-3);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.contact-status {
    margin-bottom: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-soft-green);
    border-radius: var(--radius-md);
    color: var(--color-primary-dark);
}

.contact-status--error {
    background-color: rgba(159, 47, 47, 0.06);
    color: var(--color-error);
}

.contact-form__grid,
.contact-help__list,
.contact-channels__list {
    display: grid;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    padding: 0;
    list-style: none;
}

.contact-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-integrity {
    margin: var(--space-3) 0;
    font-size: var(--font-size-small);
}

.contact-form__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.contact-form__actions .btn {
    width: 100%;
}

.contact-channels,
.contact-help__card,
.contact-privacy,
.contact-channel {
    min-width: 0;
    padding: var(--space-3);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.contact-channels {
    margin-bottom: var(--space-4);
    background-color: var(--color-soft-green);
}

.contact-help__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.contact-help__card:hover,
.contact-help__card:focus-visible {
    border-color: var(--color-primary);
    color: inherit;
}

.contact-help__icon {
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: var(--space-2);
    border-radius: var(--radius-pill);
    background-color: var(--color-soft-green);
}

.contact-help__name {
    margin-bottom: var(--space-1);
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

.contact-help__text {
    font-size: var(--font-size-small);
}

.contact-faq__layout {
    display: grid;
    gap: var(--space-4);
    align-items: start;
}

.contact-faq__more {
    margin-top: var(--space-3);
}

.contact-faq {
    padding-top: 0;
}

@media (min-width: 768px) {
    .contact-hero__trust,
    .contact-form__grid,
    .contact-help__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contact-field--wide {
        grid-column: 1 / -1;
    }

    .contact-form__actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .contact-form__actions .btn {
        width: auto;
    }
}

@media (min-width: 1024px) {
    .contact-hero__layout {
        grid-template-columns: minmax(0, 1.05fr) minmax(16rem, 0.95fr);
        gap: var(--space-6);
    }

    .contact-layout,
    .contact-faq__layout {
        grid-template-columns: minmax(0, 1.15fr) minmax(16rem, 0.85fr);
        align-items: start;
        gap: var(--space-6);
    }

    .contact-form {
        padding: var(--space-4);
    }
}


/* 30. FAQ
   Scoped .faq-page and .faq-* rules. Three columns from 1200px.
   ========================================================================== */

.faq-hero {
    padding-block: var(--space-4) var(--space-4);
}

.faq-hero__layout {
    display: grid;
    gap: var(--space-4);
    align-items: center;
}

.faq-hero .breadcrumbs {
    margin-bottom: var(--space-3);
}

.faq-hero__title {
    max-width: 12em;
    margin-bottom: var(--space-2);
    font-size: clamp(2.15rem, 1.2rem + 2.4vw, 3.5rem);
    color: var(--color-text);
}

.faq-hero__lead,
.faq-category > p,
.faq-help > p,
.faq-help-card__text {
    color: var(--color-muted);
}

.faq-hero__lead {
    max-width: 38rem;
    font-size: var(--font-size-body-lg);
}

.faq-hero__image {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background-color: var(--color-soft-green);
}

.faq-layout {
    display: grid;
    gap: var(--space-6);
    padding-bottom: var(--space-8);
}

.faq-category-nav__title {
    margin-bottom: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--font-size-small);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.faq-category-nav__list,
.faq-category__links,
.faq-help__list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.faq-category-nav__link,
.faq-help-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    min-height: 3rem;
    padding: var(--space-2);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}

.faq-category-nav__link:hover,
.faq-category-nav__link:focus-visible,
.faq-help-card:hover,
.faq-help-card:focus-visible {
    border-color: var(--color-primary);
    color: var(--color-text);
}

.faq-category-nav__icon,
.faq-help-card__icon {
    display: inline-flex;
    flex: none;
    color: var(--color-primary);
}

.faq-category {
    scroll-margin-top: 7rem;
    margin-bottom: var(--space-6);
}

.faq-category__links {
    margin-top: var(--space-3);
}

.faq-help-card {
    flex-direction: column;
    height: 100%;
}

.faq-help-card__icon {
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-pill);
    background-color: var(--color-soft-green);
}

.faq-help-card__name {
    color: var(--color-text);
}

.faq-help-card__text {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-regular);
}

.faq-page .accordion__summary {
    text-align: left;
}

@media (min-width: 768px) {
    .faq-category-nav__list,
    .faq-help__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .faq-hero__layout {
        grid-template-columns: minmax(0, 1.05fr) minmax(16rem, 0.95fr);
        gap: var(--space-6);
    }
}

@media (min-width: 1200px) {
    .faq-layout {
        grid-template-columns: 14rem minmax(0, 1fr) 16rem;
        align-items: start;
        gap: var(--space-4);
    }

    .faq-category-nav__list,
    .faq-help__list {
        grid-template-columns: 1fr;
    }
}


/* 31. Academic integrity
   Scoped .integrity-* rules. Sidebar from 1024px.
   ========================================================================== */

.integrity-hero {
    padding-block: var(--space-4) var(--space-4);
}

.integrity-hero__layout {
    display: grid;
    gap: var(--space-4);
}

.integrity-hero .breadcrumbs {
    margin-bottom: var(--space-3);
}

.integrity-hero__title {
    max-width: 14em;
    margin-bottom: var(--space-2);
    font-size: clamp(2.1rem, 1.1rem + 2.2vw, 3.25rem);
    color: var(--color-text);
}

.integrity-hero__lead,
.integrity-section p,
.integrity-help p,
.integrity-principles li p,
.integrity-note {
    color: var(--color-muted);
}

.integrity-hero__lead {
    max-width: 40rem;
    font-size: var(--font-size-body-lg);
}

.integrity-hero__principle {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.integrity-hero__trust,
.integrity-nav ul,
.integrity-principles__grid,
.integrity-policy ul,
.integrity-split ul,
.integrity-ai ul,
.integrity-responsibilities ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.integrity-hero__trust {
    display: grid;
    gap: var(--space-2);
    color: var(--color-muted);
    font-size: var(--font-size-small);
}

.integrity-hero__trust li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.integrity-hero__trust span[aria-hidden="true"],
.integrity-principles li > span {
    display: inline-flex;
    flex: none;
    color: var(--color-primary);
}

.integrity-hero__image {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background-color: var(--color-soft-green);
}


.integrity-section,
.integrity-help {
    scroll-margin-top: 7rem;
}

.integrity-section {
    margin-bottom: var(--space-6);
}

.integrity-main {
    min-width: 0;
}

.integrity-principles__grid,
.integrity-examples,
.integrity-split,
.integrity-help__actions {
    display: grid;
    gap: var(--space-2);
}

.integrity-principles li,
.integrity-policy,
.integrity-examples article,
.integrity-help {
    min-width: 0;
    padding: var(--space-3);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.integrity-principles li > span {
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: var(--space-2);
    border-radius: var(--radius-pill);
    background-color: var(--color-soft-green);
}

.integrity-principles h3,
.integrity-examples h3,
.integrity-split h3,
.integrity-ai h3,
.integrity-section h3 {
    margin-bottom: var(--space-1);
    font-family: var(--font-body);
    font-size: 1.05rem;
}

.integrity-policy ul,
.integrity-split ul,
.integrity-ai ul,
.integrity-responsibilities > ul {
    padding-left: 1.15rem;
    list-style: disc;
}

.integrity-policy li + li,
.integrity-split li + li,
.integrity-ai li + li,
.integrity-responsibilities > ul li + li {
    margin-top: 0.35rem;
}

.integrity-policy--can {
    background-color: var(--color-soft-green);
}

.integrity-policy--cannot {
    background-color: var(--color-surface);
    border-color: var(--color-primary);
}

.integrity-note {
    font-size: var(--font-size-small);
}

.integrity-help__actions .btn {
    width: 100%;
}

.integrity-page .accordion__summary {
    text-align: left;
}

@media (min-width: 768px) {
    .integrity-hero__trust,
    .integrity-principles__grid,
    .integrity-examples,
    .integrity-split {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .integrity-help__actions {
        grid-template-columns: auto auto;
        justify-content: start;
    }

    .integrity-help__actions .btn {
        width: auto;
    }
}

@media (min-width: 1024px) {
    .integrity-hero__layout {
        grid-template-columns: minmax(0, 1.05fr) minmax(16rem, 0.95fr);
        align-items: center;
        gap: var(--space-6);
    }

    .integrity-principles__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .integrity-principles__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}


/* 32. Privacy policy
   Scoped .privacy-* rules. Sidebar from 1024px.
   ========================================================================== */

.privacy-hero {
    padding-block: var(--space-4) var(--space-2);
}

.privacy-hero .breadcrumbs {
    margin-bottom: var(--space-3);
}

.privacy-hero__title {
    max-width: 12em;
    margin-bottom: var(--space-2);
    color: var(--color-text);
}

.privacy-hero__lead,
.privacy-section p,
.privacy-hero__date {
    color: var(--color-muted);
}

.privacy-hero__lead {
    max-width: 42rem;
    font-size: var(--font-size-body-lg);
}

.privacy-hero__date {
    font-size: var(--font-size-small);
}

.policy-draft-notice,
.privacy-draft-notice {
    max-width: 42rem;
    margin-top: var(--space-3);
    padding: var(--space-3);
    background-color: var(--color-soft-green);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
}

.privacy-layout {
    padding-bottom: var(--space-8);
}

.privacy-section ul,
.privacy-related {
    margin: 0 0 var(--space-3);
    padding: 0;
    list-style: none;
}

.privacy-main {
    min-width: 0;
    max-width: 46rem;
}

.privacy-section {
    scroll-margin-top: 7rem;
    margin-bottom: var(--space-6);
}

.privacy-section ul {
    padding-left: 1.15rem;
    list-style: disc;
}

.privacy-section li + li {
    margin-top: 0.35rem;
}

.privacy-related {
    display: grid;
    gap: var(--space-2);
    padding-left: 0;
    list-style: none;
}

.privacy-callout {
    padding: var(--space-3);
    background-color: var(--color-surface);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-lg);
}

.privacy-security {
    padding: var(--space-3);
    background-color: var(--color-soft-green);
    border-radius: var(--radius-lg);
}

@media (min-width: 768px) {
    .privacy-related {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* 33. Shared policy sidebar
   One sidebar/content foundation for Academic Integrity, Privacy, and Terms.
   Heroes, principle cards, callouts, and lists stay on the page sections.
   ========================================================================== */

.policy-layout,
.privacy-layout,
.integrity-layout {
    display: grid;
    gap: var(--space-4);
}

.policy-nav__title,
.privacy-nav__title,
.integrity-nav__title {
    margin-bottom: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--font-size-small);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.policy-nav ul,
.privacy-nav ul,
.integrity-nav ul {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.policy-nav a,
.privacy-nav a,
.integrity-nav a,
.privacy-related a {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.4rem 0.75rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}

.policy-nav a:hover,
.policy-nav a:focus-visible,
.privacy-nav a:hover,
.privacy-nav a:focus-visible,
.integrity-nav a:hover,
.integrity-nav a:focus-visible,
.privacy-related a:hover,
.privacy-related a:focus-visible {
    border-color: var(--color-primary);
    color: var(--color-text);
}

@media (min-width: 768px) {
    .policy-nav ul,
    .privacy-nav ul,
    .integrity-nav ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .policy-layout,
    .privacy-layout,
    .integrity-layout {
        grid-template-columns: 15rem minmax(0, 1fr);
        align-items: start;
        gap: var(--space-6);
    }

    .policy-nav ul,
    .privacy-nav ul,
    .integrity-nav ul {
        grid-template-columns: 1fr;
    }
}


/* 34. Account & User Area
   Scoped .account-* (sign in / register), .account-status (feature disabled),
   .user-area, .order-* and .empty-state rules. Breakpoints: 768 / 1024.
   Account links in the header stay hidden while AccountFeatures is disabled.
   ========================================================================== */

.site-header__account {
    margin-right: var(--space-2);
    color: var(--color-on-dark);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    white-space: nowrap;
}

.site-header__account:hover,
.site-header__account:focus-visible {
    color: var(--color-white);
    text-decoration: underline;
}

/* Shared status message for account forms */
.form-status {
    margin-bottom: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-soft-green);
    border-radius: var(--radius-md);
    color: var(--color-primary-dark);
}

.form-status--error {
    background-color: rgba(159, 47, 47, 0.06);
    color: var(--color-error);
}

/* Sign in / Register */
.account-page__inner {
    max-width: 30rem;
}

.account-page__title {
    margin-bottom: var(--space-2);
    color: var(--color-text);
}

.account-page__lead {
    margin-bottom: var(--space-3);
    color: var(--color-muted);
}

.account-form {
    padding: var(--space-3);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.account-form__actions {
    margin-top: var(--space-3);
}

.account-form__actions .btn {
    width: 100%;
}

.account-page__alt {
    margin-top: var(--space-3);
    color: var(--color-muted);
}

/* Feature-disabled information page */
.account-status__inner {
    max-width: 40rem;
    padding: var(--space-4);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.account-status__title {
    margin-bottom: var(--space-2);
    color: var(--color-text);
}

.account-status__lead {
    margin-bottom: var(--space-3);
    color: var(--color-muted);
}

.account-status__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* User Area shell */
.user-area__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.user-area__title {
    margin-bottom: var(--space-1);
    color: var(--color-text);
}

.user-area__lead {
    margin-bottom: 0;
    color: var(--color-muted);
}

.user-area__block {
    margin-bottom: var(--space-6);
}

.user-area__block-title {
    margin-bottom: var(--space-3);
    font-family: var(--font-body);
    font-size: var(--font-size-h4);
}

.user-area__muted {
    color: var(--color-muted);
}

.user-area__back {
    margin-top: var(--space-3);
}

/* Account navigation (dashboard / orders / log out) */
.account-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.account-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.account-nav__link {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0.4rem 0.85rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-small);
    text-decoration: none;
}

.account-nav__link:hover,
.account-nav__link:focus-visible {
    border-color: var(--color-primary);
    color: var(--color-text);
}

/* Empty state (no orders yet) */
.empty-state {
    max-width: 36rem;
    padding: var(--space-4);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.empty-state__title {
    margin-bottom: var(--space-2);
    font-size: var(--font-size-h4);
    color: var(--color-text);
}

.empty-state__text {
    margin-bottom: var(--space-3);
    color: var(--color-muted);
}

/* Order list + cards */
.order-list {
    display: grid;
    gap: var(--space-2);
}

.order-card {
    padding: var(--space-3);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.order-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
}

.order-card__ref {
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
}

.order-card__service {
    margin-bottom: 0.25rem;
    color: var(--color-primary);
    font-size: var(--font-size-eyebrow);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.order-card__title {
    margin-bottom: var(--space-2);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.order-card__meta,
.order-facts {
    display: grid;
    gap: var(--space-1) var(--space-3);
    margin: 0;
}

.order-card__meta dt,
.order-facts dt {
    color: var(--color-muted);
    font-size: var(--font-size-small);
}

.order-card__meta dd,
.order-facts dd {
    margin: 0;
    font-weight: var(--font-weight-medium);
}

/* Status badge */
.order-status {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.65rem;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.order-status--active {
    background-color: var(--color-soft-green);
    color: var(--color-primary-dark);
}

.order-status--done {
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    color: var(--color-muted);
}

/* Order detail */
.order-detail__main {
    display: grid;
    gap: var(--space-4);
}

.order-detail__summary,
.order-detail__timeline {
    padding: var(--space-3);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.order-detail__note {
    margin: var(--space-3) 0 0;
    color: var(--color-muted);
}

.order-facts > div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--color-border);
}

.order-facts > div:last-child {
    border-bottom: 0;
}

/* Timeline */
.order-timeline {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.order-timeline__item {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-2);
}

.order-timeline__marker {
    width: 0.75rem;
    height: 0.75rem;
    margin-top: 0.35rem;
    border-radius: var(--radius-pill);
    background-color: var(--color-primary);
}

.order-timeline__item:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 1.1rem;
    left: 0.34rem;
    bottom: calc(var(--space-3) * -1);
    width: 2px;
    background-color: var(--color-border);
}

.order-timeline__status {
    margin-bottom: 0;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.order-timeline__time {
    margin-bottom: 0;
    color: var(--color-muted);
    font-size: var(--font-size-small);
}

.order-timeline__note {
    margin: var(--space-1) 0 0;
    color: var(--color-muted);
}

/* Recent updates */
.update-list {
    display: grid;
    gap: var(--space-2);
}

.update-list__link {
    display: block;
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    text-decoration: none;
}

.update-list__link:hover,
.update-list__link:focus-visible {
    border-color: var(--color-primary);
    color: var(--color-text);
}

.update-list__title {
    display: block;
    font-weight: var(--font-weight-semibold);
}

.update-list__meta {
    display: block;
    color: var(--color-muted);
    font-size: var(--font-size-small);
}

@media (min-width: 768px) {
    .account-status__actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .user-area__header {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--space-4);
    }

    .order-card__meta {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .order-list--full {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .account-form {
        padding: var(--space-4);
    }
}


/* 35. Advanced Order Builder
   Scoped .order-wizard-*, .order-stepper*, .order-summary*, .order-step*,
   .order-choices*, .order-choice*, .order-review*, .order-portal, .order-upload,
   .order-note-panel, .order-cta*, .order-progress*, .order-documents*,
   .order-change* and .order-detail__panel rules. Breakpoints: 768 / 1024.
   Status is never conveyed by colour alone: each state also carries a marker,
   a weight change and a visually-hidden word. No price and no percentage are
   ever rendered here.
   ========================================================================== */

/* 35a. Order Builder overview page (scoped .order-landing, .order-hero,
   .order-availability, .order-group*, .order-service*, .order-how*, .order-help*,
   .order-recommendation and .order-integrity rules). */
.order-hero {
    padding: var(--section-padding) 0;
    background-color: var(--color-soft-green);
}

.order-hero__layout {
    display: grid;
    gap: var(--space-4);
}

.order-hero__title {
    margin-bottom: var(--space-2);
}

.order-hero__lead {
    margin-bottom: var(--space-3);
    font-size: var(--font-size-body-lg);
    color: var(--color-muted);
}

.order-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.order-hero__trust {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.order-hero__trust-item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-text);
}

.order-hero__trust-icon {
    display: inline-flex;
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-primary);
}

.order-hero__trust-icon svg {
    width: 100%;
    height: 100%;
}

.order-hero__image {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.order-availability__panel {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-3);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.order-availability__list {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.order-availability__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    border-bottom: 1px solid var(--color-border);
}

.order-availability__item:last-child {
    border-bottom: 0;
}

.order-availability__state {
    padding: 0.15rem 0.65rem;
    border-radius: var(--radius-pill);
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.order-availability__item--on .order-availability__state {
    background-color: var(--color-soft-green);
    border-color: var(--color-soft-green);
    color: var(--color-primary-dark);
}

.order-groups__header {
    max-width: 48rem;
    margin-bottom: var(--space-4);
}

.order-groups__panels {
    display: grid;
    gap: var(--space-6);
}

.order-group__header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.order-group__icon {
    display: inline-flex;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0.4rem;
    background-color: var(--color-soft-green);
    border-radius: var(--radius-md);
    color: var(--color-primary);
}

.order-group__icon svg {
    width: 100%;
    height: 100%;
}

.order-group__title {
    margin-bottom: 0.15rem;
}

.order-group__desc {
    margin-bottom: 0;
    color: var(--color-muted);
}

.order-group__grid {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.order-service {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.order-service__title {
    margin-bottom: 0;
    font-family: var(--font-body);
    font-size: var(--font-size-h4);
}

.order-service__purpose {
    margin-bottom: var(--space-1);
    color: var(--color-muted);
}

.order-service__meta {
    margin-bottom: var(--space-1);
    font-size: var(--font-size-small);
    color: var(--color-muted);
}

.order-service__meta-label {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.order-service__action {
    align-self: flex-start;
    margin-top: auto;
}

.order-how__header {
    max-width: 48rem;
    margin-bottom: var(--space-4);
}

.order-how__steps {
    display: grid;
    gap: var(--space-3);
    margin: 0 0 var(--space-4);
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.order-how__step {
    padding: var(--space-3);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.order-how__icon {
    display: inline-flex;
    width: 1.75rem;
    height: 1.75rem;
    margin-bottom: var(--space-1);
    color: var(--color-primary);
}

.order-how__icon svg {
    width: 100%;
    height: 100%;
}

.order-how__number {
    display: block;
    color: var(--color-accent-dark);
    font-size: var(--font-size-eyebrow);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.order-how__step-title {
    margin: 0.15rem 0 var(--space-1);
    font-size: var(--font-size-h4);
}

.order-how__step-text {
    margin-bottom: 0;
    color: var(--color-muted);
}

.order-included {
    padding: var(--space-3);
    background-color: var(--color-soft-green);
    border-radius: var(--radius-lg);
}

.order-included__title {
    margin-bottom: var(--space-2);
    font-size: var(--font-size-h4);
}

.order-included__list {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.order-included__list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-1);
}

.order-included__icon {
    display: inline-flex;
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.15rem;
    color: var(--color-primary);
}

.order-included__icon svg {
    width: 100%;
    height: 100%;
}

.order-help__header {
    max-width: 48rem;
    margin-bottom: var(--space-4);
}

.order-help__layout {
    display: grid;
    gap: var(--space-4);
}

.order-help__form {
    padding: var(--space-3);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.order-help__fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.order-help__result {
    padding: var(--space-3);
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.order-help__empty {
    margin-bottom: 0;
    color: var(--color-muted);
}

.order-recommendation__title {
    margin: var(--space-1) 0;
}

.order-recommendation__reason {
    margin-bottom: var(--space-1);
}

.order-recommendation__answers {
    margin-bottom: var(--space-2);
    color: var(--color-muted);
    font-size: var(--font-size-small);
}

.order-recommendation__note {
    margin: var(--space-2) 0 0;
    color: var(--color-muted);
    font-size: var(--font-size-small);
}

.order-integrity__inner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.order-integrity__icon {
    display: inline-flex;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--color-primary);
}

.order-integrity__icon svg {
    width: 100%;
    height: 100%;
}

/* Wizard shell */
.order-wizard {
    padding-bottom: var(--section-padding);
}

.order-wizard__header {
    padding: var(--space-4) 0 var(--space-3);
    background-color: var(--color-primary);
    color: var(--color-on-dark);
}

.order-wizard__header .eyebrow {
    color: var(--color-on-dark-muted);
}

.order-wizard__title {
    margin-bottom: var(--space-3);
    color: var(--color-white);
    font-size: var(--font-size-h3);
}

.order-wizard__layout {
    display: grid;
    gap: var(--space-4);
    padding-top: var(--space-4);
}

.order-wizard__layout--single {
    max-width: 48rem;
}

.order-wizard__main {
    min-width: 0;
}

.order-wizard__help {
    margin-bottom: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-soft-green);
    border-radius: var(--radius-md);
    color: var(--color-primary-dark);
}

.order-wizard__form {
    display: block;
}

.order-wizard__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.order-wizard__actions .btn svg {
    width: 1rem;
    height: 1rem;
}

/* Step 1 "Back" uses a rotated arrow so it also reads without colour */
.order-wizard__actions button[name="action"][value="back"] svg {
    transform: rotate(180deg);
}

/* Completion screen */
.order-wizard__done {
    padding: var(--space-4);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-align: center;
}

.order-wizard__done-icon {
    display: inline-flex;
    width: 3rem;
    height: 3rem;
    margin-bottom: var(--space-2);
    color: var(--color-primary);
}

.order-wizard__done-icon svg {
    width: 100%;
    height: 100%;
}

.order-wizard__done-ref {
    font-variant-numeric: tabular-nums;
}

/* Accessible progress stepper (Part D / D3) */
.order-stepper {
    margin-top: var(--space-2);
}

.order-stepper__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.order-stepper__item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-on-dark-muted);
    font-size: var(--font-size-small);
}

.order-stepper__marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--color-on-dark-border);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
}

.order-stepper__marker svg {
    width: 0.9rem;
    height: 0.9rem;
}

.order-stepper__item--done .order-stepper__marker {
    background-color: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-primary-dark);
}

.order-stepper__item--current {
    color: var(--color-white);
    font-weight: var(--font-weight-semibold);
}

.order-stepper__item--current .order-stepper__marker {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary-dark);
}

.order-stepper__item--upcoming .order-stepper__marker {
    border-style: dashed;
}

/* Request summary rail (Part K) */
.order-wizard__summary {
    display: block;
}

.order-summary__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    text-align: left;
    cursor: pointer;
}

.order-summary__toggle-icon {
    display: inline-flex;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-muted);
    transition: transform var(--transition-fast);
}

.order-summary__toggle-icon svg {
    width: 100%;
    height: 100%;
}

.order-summary__toggle[aria-expanded="true"] .order-summary__toggle-icon {
    transform: rotate(180deg);
}

.order-summary {
    margin-top: var(--space-2);
    padding: var(--space-3);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.order-summary__title {
    margin-bottom: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--font-size-h4);
}

.order-summary__service {
    margin-bottom: 0.15rem;
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.order-summary__group {
    margin-bottom: 0;
    color: var(--color-muted);
    font-size: var(--font-size-small);
}

.order-summary__empty {
    color: var(--color-muted);
    font-size: var(--font-size-small);
}

.order-summary__section {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.order-summary__section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

.order-summary__section-title {
    margin-bottom: 0;
    font-family: var(--font-body);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.order-summary__edit {
    padding: 0;
    background: none;
    border: 0;
    color: var(--color-primary);
    font-family: var(--font-body);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    text-decoration: underline;
    cursor: pointer;
}

.order-summary__facts {
    display: grid;
    gap: 0.25rem;
    margin: 0;
}

.order-summary__facts dt {
    color: var(--color-muted);
    font-size: var(--font-size-small);
}

.order-summary__facts dd {
    margin: 0 0 var(--space-1);
    font-weight: var(--font-weight-medium);
    overflow-wrap: anywhere;
}

.order-summary__note {
    margin: var(--space-3) 0 0;
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: var(--font-size-small);
}

/* Step content */
.order-step {
    padding: var(--space-3);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.order-step__title {
    margin-bottom: var(--space-3);
    font-size: var(--font-size-h4);
}

.order-step__subtitle {
    margin: var(--space-3) 0 var(--space-2);
    font-family: var(--font-body);
    font-size: var(--font-size-body-lg);
    font-weight: var(--font-weight-semibold);
}

.order-step__note {
    margin-top: var(--space-2);
    color: var(--color-muted);
    font-size: var(--font-size-small);
}

/* Fieldsets, fields and error messaging */
.order-fieldset {
    margin: 0 0 var(--space-3);
    padding: 0;
    border: 0;
}

.order-fieldset__legend {
    margin-bottom: var(--space-2);
    font-size: var(--font-size-body-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.order-fieldset__error {
    margin-bottom: var(--space-2);
    color: var(--color-error);
    font-weight: var(--font-weight-medium);
}

.order-fieldset__help {
    margin-top: var(--space-2);
    color: var(--color-muted);
    font-size: var(--font-size-small);
}

.order-fields {
    display: grid;
    gap: var(--space-3);
}

.order-field {
    margin-bottom: 0;
}

/* Service / scope radio choices (Part E1 / G) */
.order-choices {
    display: grid;
    gap: var(--space-3);
}

.order-choices__group {
    display: grid;
    gap: var(--space-2);
}

.order-choices__group-title {
    margin-bottom: 0;
    color: var(--color-primary);
    font-size: var(--font-size-eyebrow);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.order-choice {
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.order-choice__control {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.order-choice__input {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0.2rem 0 0;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.order-choice__label {
    cursor: pointer;
}

.order-choice__name {
    display: block;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.order-choice__purpose {
    display: block;
    color: var(--color-muted);
    font-size: var(--font-size-small);
}

.order-choice__input:checked + .order-choice__label .order-choice__name {
    color: var(--color-primary-dark);
}

.order-choice:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-soft-green);
}

.order-choice__detail {
    margin-top: var(--space-1);
    padding-left: calc(1.25rem + var(--space-2));
}

.order-choice__detail-summary,
.order-service__detail-summary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-primary);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    list-style: none;
}

.order-choice__detail-summary::-webkit-details-marker,
.order-service__detail-summary::-webkit-details-marker {
    display: none;
}

.order-choice__detail-icon,
.order-service__detail-icon {
    display: inline-flex;
    width: 1rem;
    height: 1rem;
    transition: transform var(--transition-fast);
}

.order-choice__detail[open] .order-choice__detail-icon,
.order-service__detail[open] .order-service__detail-icon {
    transform: rotate(180deg);
}

.order-choice__detail-list,
.order-service__detail-body ul {
    margin: var(--space-1) 0 0;
    padding-left: var(--space-3);
    color: var(--color-muted);
}

/* Review screen (Part L / K1) */
.order-review {
    display: grid;
    gap: var(--space-3);
}

.order-review__section {
    padding: var(--space-3);
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.order-review__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.order-review__title {
    margin-bottom: 0;
    font-family: var(--font-body);
    font-size: var(--font-size-h4);
}

.order-review__edit {
    padding: 0;
    background: none;
    border: 0;
    color: var(--color-primary);
    font-family: var(--font-body);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    text-decoration: underline;
    cursor: pointer;
}

.order-review__empty {
    margin-bottom: 0;
    color: var(--color-muted);
    font-size: var(--font-size-small);
}

.order-review__facts {
    display: grid;
    gap: 0.25rem;
    margin: 0;
}

.order-review__facts dt {
    color: var(--color-muted);
    font-size: var(--font-size-small);
}

.order-review__facts dd {
    margin: 0 0 var(--space-1);
    font-weight: var(--font-weight-medium);
    overflow-wrap: anywhere;
}

.order-review__privacy {
    margin-top: var(--space-3);
}

.order-integrity-note {
    display: flex;
    gap: var(--space-2);
    margin: var(--space-3) 0;
    padding: var(--space-3);
    background-color: var(--color-soft-green);
    border-radius: var(--radius-md);
    color: var(--color-primary-dark);
}

.order-integrity-note__icon {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-primary);
}

.order-integrity-note__icon svg {
    width: 100%;
    height: 100%;
}

/* Informational panels (upload off, pricing deferred, portal) */
.order-upload,
.order-note-panel,
.order-portal {
    display: flex;
    gap: var(--space-2);
    margin: var(--space-3) 0;
    padding: var(--space-3);
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
}

.order-upload__icon,
.order-note-panel__icon,
.order-portal__icon {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-primary);
}

.order-upload__icon svg,
.order-note-panel__icon svg,
.order-portal__icon svg {
    width: 100%;
    height: 100%;
}

.order-portal {
    display: block;
    background-color: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.order-portal__title {
    margin: var(--space-1) 0 var(--space-2);
    font-size: var(--font-size-h4);
}

.order-portal__message {
    font-weight: var(--font-weight-medium);
}

.order-portal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.order-upload p:last-child,
.order-note-panel p:last-child,
.order-portal p:last-child {
    margin-bottom: 0;
}

/* Anti-spam honeypot — removed from view without display:none */
.order-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Service-page conversion module (Part T1) */
.order-cta {
    padding: var(--space-6) 0;
    background-color: var(--color-primary);
    color: var(--color-on-dark);
}

.order-cta__inner {
    display: grid;
    gap: var(--space-4);
}

.order-cta__intro .eyebrow {
    color: var(--color-accent);
}

.order-cta__title {
    margin-bottom: var(--space-2);
    color: var(--color-white);
}

.order-cta__service {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
}

.order-cta__service-label {
    color: var(--color-on-dark-muted);
    font-size: var(--font-size-eyebrow);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.order-cta__service strong {
    color: var(--color-white);
}

.order-cta__summary {
    margin-bottom: 0;
    color: var(--color-on-dark);
}

.order-cta__scope-title {
    margin-bottom: var(--space-2);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--font-size-body-lg);
}

.order-cta__list {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.order-cta__list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-1);
}

.order-cta__check {
    flex: none;
    display: inline-flex;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.15rem;
    color: var(--color-accent);
}

.order-cta__check svg {
    width: 100%;
    height: 100%;
}

.order-cta__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
}

.order-cta__actions .text-link {
    color: var(--color-on-dark);
}

.order-cta__actions .text-link:hover,
.order-cta__actions .text-link:focus-visible {
    color: var(--color-white);
}

.order-cta__note {
    margin-bottom: 0;
    color: var(--color-on-dark-muted);
    font-size: var(--font-size-small);
}

/* Order detail panels + progress indicator (Part O1/O3) */
.order-detail {
    display: block;
}

.order-detail__panel {
    padding: var(--space-3);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.order-detail__main > .order-detail__panel + .order-detail__panel {
    margin-top: var(--space-4);
}

.order-overview__status {
    margin-bottom: var(--space-3);
}

.order-progress {
    display: grid;
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
    padding: 0;
    list-style: none;
}

.order-progress__stage {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2);
    color: var(--color-muted);
}

.order-progress__marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
}

.order-progress__marker svg {
    width: 0.85rem;
    height: 0.85rem;
}

.order-progress__stage--done {
    color: var(--color-text);
}

.order-progress__stage--done .order-progress__marker {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.order-progress__stage--current {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

.order-progress__stage--current .order-progress__marker {
    border-color: var(--color-accent);
    border-width: 3px;
    background-color: var(--color-white);
}

.order-progress__stage--upcoming .order-progress__marker {
    border-style: dashed;
}

.order-progress__note {
    margin-bottom: 0;
    color: var(--color-muted);
    font-size: var(--font-size-small);
}

/* Document list (metadata only) */
.order-documents {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.order-documents__item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-1) var(--space-2);
    padding: var(--space-2);
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.order-documents__name {
    font-weight: var(--font-weight-medium);
    overflow-wrap: anywhere;
}

.order-documents__ext {
    margin-left: 0.35rem;
    color: var(--color-muted);
    font-size: var(--font-size-small);
    text-transform: uppercase;
}

.order-documents__meta {
    color: var(--color-muted);
    font-size: var(--font-size-small);
}

/* Controlled change request (Part P2/P3) */
.order-change {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

.order-change__intro {
    margin-bottom: var(--space-1);
    color: var(--color-text);
}

.order-change .btn {
    justify-self: start;
}

/* Recent updates list additions */
.update-list__item {
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.update-list__text {
    margin: var(--space-1) 0 0;
    color: var(--color-muted);
}

/* Breakpoints */
@media (min-width: 768px) {
    .order-wizard__header {
        padding: var(--space-6) 0 var(--space-4);
    }

    .order-hero__layout,
    .order-availability__panel,
    .order-help__layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .order-group__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .order-how__steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .order-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .order-choices {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .order-cta__inner {
        grid-template-columns: 1.2fr 1fr;
        align-items: start;
    }

    .order-cta__actions {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .order-progress {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-3);
    }

    .order-detail__panel {
        padding: var(--space-4);
    }
}

@media (min-width: 1024px) {
    .order-wizard__layout:not(.order-wizard__layout--single) {
        grid-template-columns: minmax(0, 1fr) 20rem;
        align-items: start;
    }

    .order-group__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Desktop: the rail is always open and the toggle is not offered */
    .order-summary__toggle {
        display: none;
    }

    .order-summary {
        position: sticky;
        top: calc(var(--header-height) + var(--space-2));
    }

    .order-stepper__list {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: var(--space-2);
    }

    .order-stepper__item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }

    .order-cta__inner {
        grid-template-columns: 1.2fr 1fr 1fr;
    }

    .order-cta__actions {
        grid-column: auto;
        flex-direction: column;
        align-items: flex-start;
    }

    .order-progress {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .order-progress__stage {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
}

.request-page__layout {
    display: grid;
    gap: var(--space-5);
    padding-block: var(--space-6);
}

.request-page__lead,
.request-page__note,
.request-steps {
    max-width: 38rem;
}

.request-steps {
    padding-left: 1.2rem;
}

.request-card {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #d7e0dc);
    border-radius: var(--radius-lg, 1rem);
    padding: var(--space-4);
}

.request-grid {
    display: grid;
    gap: var(--space-3);
}

.request-honeypot {
    position: absolute;
    left: -9999px;
}

.request-received {
    max-width: 40rem;
}

.request-page {
    background:
        radial-gradient(circle at 0 0, rgba(31, 122, 90, 0.08), transparent 28rem),
        var(--color-bg, #f7f4ee);
}

.request-card {
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-md, 0 16px 40px rgba(16, 42, 36, 0.08));
}

.request-card__accent {
    height: 4px;
    margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-3);
    background: linear-gradient(90deg, var(--color-primary, #1f6b4a), var(--color-gold, #c4a15a));
}

.request-card__header h2 {
    margin: 0 0 0.35rem;
    font-family: var(--font-heading);
}

.request-card__signin,
.request-card__fine,
.request-card__preview {
    font-size: var(--font-size-small);
}

.request-steps {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--space-3);
}

.request-steps li {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: var(--space-2);
}

.request-steps span {
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.request-steps p,
.request-trust {
    margin: 0.2rem 0 0;
    color: var(--color-muted);
}

.request-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0;
    list-style: none;
}

.request-trust li {
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: var(--color-soft-green, #e7f2ec);
    color: var(--color-text);
    font-size: var(--font-size-small);
}

.request-fieldset {
    border: 0;
    margin: 0 0 var(--space-4);
    padding: 0;
}

.request-fieldset legend {
    margin-bottom: var(--space-2);
    padding: 0;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: var(--font-weight-semibold);
}

.choice-grid {
    display: grid;
    gap: 0.6rem;
}

.choice-card {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--color-border, #d7e0dc);
    border-radius: 0.8rem;
    background: #fff;
    cursor: pointer;
    transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.choice-card:hover,
.choice-card:focus-within {
    border-color: var(--color-primary);
    background: var(--color-soft-green, #e7f2ec);
    transform: translateY(-2px);
}

.request-card .form-control:disabled,
.request-card .choice-card {
    opacity: 1;
    color: var(--color-text);
    background: #fff;
    -webkit-text-fill-color: var(--color-text);
}

.form-control:focus {
    outline: 2px solid transparent;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(31, 107, 74, 0.16);
}

.btn {
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.btn:hover,
.btn:focus-visible {
    transform: translateY(-1px);
}

html.js .reveal {
    opacity: 0;
    transform: translateY(12px);
}

html.js .reveal.is-in {
    opacity: 1;
    transform: none;
    transition: opacity 420ms ease, transform 420ms ease;
}

.request-card.reveal.is-in {
    transition-delay: 80ms;
}

@media (prefers-reduced-motion: reduce) {
    html.js .reveal,
    .choice-card:hover,
    .choice-card:focus-within,
    .btn:hover,
    .btn:focus-visible,
    .request-card:hover,
    .request-card:focus-within,
    a.card:hover,
    .service-card:hover,
    .resource-card:hover,
    .resource-category-card:hover,
    .order-card:hover {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

@media (max-width: 1199px) {
    .site-wordmark__tagline {
        display: none;
    }
}

@media (max-width: 767px) {
    .site-wordmark__name {
        font-size: 1.25rem;
    }

    .site-header__primary {
        padding-inline: 0.7rem;
        font-size: 0.875rem;
    }

    .request-page__layout {
        padding-block: var(--space-3);
    }

    .request-page__intro {
        max-width: none;
    }

    .request-steps {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }

    .request-steps li {
        grid-template-columns: 1.5rem 1fr;
        align-items: start;
    }

    .request-steps p {
        display: none;
    }

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

@media (min-width: 768px) {
    .request-grid {
        grid-template-columns: 1fr 1fr;
    }

    .request-field--wide {
        grid-column: 1 / -1;
    }
}

@media (min-width: 640px) {
    .choice-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .request-page__layout {
        grid-template-columns: minmax(18rem, 2fr) minmax(0, 3fr);
        align-items: start;
    }

    .request-card {
        max-width: 42rem;
        justify-self: end;
        width: 100%;
        transition: box-shadow 220ms ease;
    }

    .request-card:hover,
    .request-card:focus-within {
        box-shadow: 0 18px 44px rgba(16, 42, 36, 0.12);
    }
}

.choice-card:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-soft-green);
    box-shadow: inset 3px 0 0 var(--color-primary);
}

.request-card .btn:disabled {
    opacity: 1;
    cursor: default;
}

/* Premium request page, motion system, resources-off footer */
.request-page {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 0%, rgba(198, 146, 62, 0.16), transparent 22rem),
        radial-gradient(circle at 100% 12%, rgba(11, 79, 70, 0.14), transparent 26rem),
        linear-gradient(180deg, #faf7f0 0%, #eaf3ee 100%);
}

.services-hero__lead,
.about-hero__lead,
.faq-hero__lead,
.integrity-hero__lead,
.how-hero__lead,
.privacy-hero__lead,
.service-hero__lead,
.request-panel__lead {
    max-width: 40rem;
}

.service-checks__item,
.home-why__item,
.request-timeline li {
    align-items: start;
}

.request-page__glow {
    position: absolute;
    width: 22rem;
    height: 22rem;
    border-radius: 50%;
    background: rgba(11, 79, 70, 0.1);
    top: 2rem;
    right: -6rem;
    pointer-events: none;
}

.request-page__glow::after {
    content: "";
    position: absolute;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
    background: rgba(198, 146, 62, 0.22);
    left: -8rem;
    top: 10rem;
}

.request-panel {
    position: relative;
    padding: 1.75rem;
    border-radius: 1.5rem;
    color: #faf7f0;
    background:
        radial-gradient(circle at 100% 0%, rgba(250, 247, 240, 0.12), transparent 10rem),
        radial-gradient(circle at 0% 100%, rgba(198, 146, 62, 0.22), transparent 14rem),
        linear-gradient(165deg, #0f6a5e 0%, #0b4f46 42%, #073c36 100%);
    box-shadow: inset 0 1px 0 rgba(250, 247, 240, 0.16), 0 18px 40px rgba(7, 60, 54, 0.18);
}

.request-panel h1 {
    margin: 0.4rem 0 0.75rem;
    color: #faf7f0;
    font-size: clamp(2rem, 4vw, 2.75rem);
}

.request-panel__eyebrow,
.request-panel__label {
    margin: 0;
    color: #faf7f0;
    border-bottom: 2px solid #c6923e;
    display: inline-block;
    padding-bottom: 0.15rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.request-panel__lead,
.request-timeline p {
    color: rgba(250, 247, 240, 0.82);
}

.request-panel__label {
    margin-top: 1.5rem;
}

.request-timeline {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.85rem;
}

.request-timeline li {
    display: grid;
    grid-template-columns: 2.25rem 1fr;
    gap: 0.75rem;
    position: relative;
}

.request-timeline li:not(:last-child) span::after {
    content: "";
    position: absolute;
    top: 2.2rem;
    left: 1.05rem;
    width: 1px;
    height: calc(100% - 0.4rem);
    background: rgba(250, 247, 240, 0.28);
}

.request-timeline span {
    position: relative;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 1px solid rgba(198, 146, 62, 0.8);
    color: #faf7f0;
    font-size: 0.75rem;
    font-weight: 700;
    background: rgba(7, 60, 54, 0.35);
}

.request-timeline strong {
    display: block;
    color: #fffdf8;
}

.request-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}

.request-chips li {
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: rgba(250, 247, 240, 0.12);
    border: 1px solid rgba(198, 146, 62, 0.45);
    color: #faf7f0;
    font-size: 0.8125rem;
}

.request-chips li:nth-child(2) {
    background: rgba(234, 243, 238, 0.16);
}

.request-card {
    border-radius: 1.5rem;
    padding: 1.75rem;
    background: #fffdf8;
    border: 1px solid #d9e3df;
    box-shadow: 0 1px 0 rgba(255, 253, 248, 0.8) inset, 0 18px 46px rgba(21, 35, 62, 0.1);
}

.request-deadline {
    display: none;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

#start-request-form:has(#Input_Turnaround option[value="custom"]:checked) .request-deadline {
    display: grid;
}

@media (prefers-reduced-motion: no-preference) {
    #start-request-form:has(#Input_Turnaround option[value="custom"]:checked) .request-deadline {
        animation: rise var(--motion-base) var(--ease-standard);
    }
}

.request-deadline__note {
    margin: 0;
}

.request-attach {
    margin: 0.25rem 0 1rem;
    padding: 0.9rem;
    border-radius: 1rem;
    background: #faf7f0;
}

.request-attach__title {
    margin: 0 0 0.25rem;
    font-weight: 600;
}

.request-drop {
    display: grid;
    gap: 0.2rem;
    margin: 0.7rem 0;
    padding: 1.1rem;
    border: 1.5px dashed #0b4f46;
    border-radius: 1rem;
    background: #eaf3ee;
    text-align: center;
}

.request-drop--held {
    opacity: 1;
}

.request-drop__input {
    margin: 0 auto 0.4rem;
}

.request-drop__title {
    font-weight: 600;
    color: #0b4f46;
}

.request-drop__or,
.request-drop__note {
    color: #5f6967;
    font-size: 0.875rem;
}

@media (min-width: 768px) {
    .request-deadline {
        grid-template-columns: 1fr 1fr 1.2fr;
    }

    .request-deadline__note {
        grid-column: 1 / -1;
    }
}

.request-card__accent,
.request-card::before {
    content: "";
    display: block;
    height: 4px;
    margin: -1.75rem -1.75rem 1.25rem;
    border-radius: 1.5rem 1.5rem 0 0;
    background: linear-gradient(90deg, #0b4f46, #c6923e);
}

.request-card .form-control {
    min-height: 3.25rem;
    border-radius: 0.8rem;
    background: #faf7f0;
    border-color: #d9e3df;
    transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard);
}

.request-card .form-control:focus {
    background: #fffdf8;
    border-color: #0b4f46;
    box-shadow: 0 0 0 4px rgba(11, 79, 70, 0.16);
}

.request-fieldset legend {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.request-fieldset legend span {
    display: inline-grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: #eaf3ee;
    color: #0b4f46;
    font-size: 0.75rem;
}

.choice-card__mark {
    margin-left: auto;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 1px solid #d9e3df;
    position: relative;
}

.choice-card:has(input:checked) .choice-card__mark::after {
    content: "";
    position: absolute;
    left: 0.28rem;
    top: 0.12rem;
    width: 0.28rem;
    height: 0.5rem;
    border: solid #0b4f46;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.choice-card--outline {
    background: transparent;
    border-style: dashed;
}

.request-card .request-submit,
.request-card .request-submit:hover,
.request-card .request-submit:focus-visible {
    background: linear-gradient(180deg, #0b4f46, #073c36);
    border-color: #073c36;
    color: #faf7f0;
    box-shadow: 0 8px 18px rgba(7, 60, 54, 0.2);
}

.btn__arrow,
.service-card__more {
    display: inline-block;
    transition: transform var(--motion-fast) var(--ease-standard);
}

.btn:hover .btn__arrow,
.btn:focus-visible .btn__arrow,
.service-card:hover .service-card__more,
.service-card:focus-visible .service-card__more {
    transform: translateX(3px);
}

.btn:hover,
.btn:focus-visible {
    transform: translateY(-2px);
}

.site-nav__link {
    position: relative;
}

.site-nav__link::after {
    content: "";
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.45rem;
    height: 1px;
    background: #c6923e;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--motion-fast) var(--ease-standard);
}

.site-nav__link:hover::after,
.site-nav__link:focus-visible::after {
    transform: scaleX(1);
}

.mega-menu:not([hidden]) {
    animation: menu-in var(--motion-fast) var(--ease-standard);
}

.motion-rise > * {
    animation: rise var(--motion-slow) var(--ease-emphasized) both;
}

.motion-rise > *:nth-child(2) { animation-delay: 60ms; }
.motion-rise > *:nth-child(3) { animation-delay: 120ms; }
.motion-rise > *:nth-child(4) { animation-delay: 180ms; }

.motion-rise--late {
    animation: rise var(--motion-slow) var(--ease-emphasized) 180ms both;
}

html.js [data-reveal]:not(.is-visible),
html.js .reveal:not(.is-in) {
    opacity: 0;
    transform: translateY(12px);
}

html.js [data-reveal].is-visible,
html.js .reveal.is-in {
    opacity: 1;
    transform: none;
    transition: opacity var(--motion-slow) var(--ease-emphasized), transform var(--motion-slow) var(--ease-emphasized);
}

html.js .service-card.is-visible:hover,
html.js .service-card.is-visible:focus-visible,
html.js .resource-card.is-visible:hover,
html.js .cta-banner.is-visible:hover,
html.js .order-cta.is-visible:hover {
    transform: translateY(-4px);
}

@keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

@keyframes menu-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 767px) {
    .request-panel {
        padding: 1.15rem 1.15rem 1rem;
    }

    .request-timeline p,
    .request-panel__label {
        display: none;
    }

    .request-timeline {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .request-timeline li:not(:last-child) span::after {
        display: none;
    }

    .request-page__layout {
        padding-block: 1rem 2rem;
    }
}

@media (min-width: 1024px) {
    .request-page__layout {
        grid-template-columns: 1fr;
    }

    .site-footer__grid[data-columns="3"] {
        grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr));
    }

    .site-footer__grid[data-columns="4"] {
        grid-template-columns: 1.7fr repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .request-page__layout {
        grid-template-columns: minmax(18rem, 2fr) minmax(0, 3fr);
        align-items: start;
    }

    .request-card {
        max-width: 42rem;
        justify-self: end;
    }
}

@media (prefers-reduced-motion: reduce) {
    .motion-rise > *,
    .motion-rise--late,
    .mega-menu:not([hidden]) {
        animation: none;
    }

    html.js [data-reveal]:not(.is-visible),
    html.js .reveal:not(.is-in),
    html.js .service-card.is-visible:hover,
    html.js .resource-card.is-visible:hover,
    html.js .cta-banner.is-visible:hover,
    html.js .order-cta.is-visible:hover,
    .btn:hover,
    .btn:focus-visible,
    .service-card:hover,
    .choice-card:hover,
    .request-card:hover,
    .expert-card:hover,
    .expert-card:focus-within,
    .expert-card:hover .expert-card__media img,
    .expert-card:hover .expert-card__link svg {
        opacity: 1;
        transform: none;
        animation: none;
    }
}