/*
 * Seni Solutions website stylesheet (WEB-002).
 * Values: docs/design/WEB-002-design-system.md (Aphrodite). Rules: docs/architecture/adr/WEB-002-ADR-001-site-structure.md.
 * Mobile first: base styles for small screens, min-width queries at 40em and 64em only.
 * Section numbers in comments refer to the design system.
 */

/* 2.1 Colour, 3.1 fonts, 4.1 spacing */
:root {
    color-scheme: light;

    --color-white: #ffffff;
    --color-surface-subtle: #f5f7fa;
    --color-surface-tint: #eaf0f8;
    --color-border: #d5dde8;

    --color-ink-900: #0f2440;
    --color-ink-700: #33445a;
    --color-ink-600: #4f5f74;
    --color-brand: #1a4d8f;
    --color-brand-dark: #0d3a6f;

    --color-navy-900: #0f2440;
    --color-navy-800: #0d3a6f;
    --gradient-ai: linear-gradient(135deg, #0f2440 0%, #0d3a6f 100%);
    --color-on-dark: #ffffff;
    --color-on-dark-muted: #c7d5e8;
    --color-on-dark-subtle: #a3b3c9;
    --color-accent-on-dark: #7dd3e0;
    --color-border-on-dark: #2b4466;

    --color-accent: #2aa8bc;

    --focus-color: #1a4d8f;
    --focus-color-on-dark: #ffffff;
    --focus-width: 3px;
    --focus-offset: 2px;

    --font-sans: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
    --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.5rem;
    --space-8: 3rem;
    --space-9: 4rem;
    --space-10: 6rem;

    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;

    --shadow-hover: 0 0.25rem 1rem rgba(15, 36, 64, 0.08);

    --duration: 150ms;
    --easing: ease-out;
}

/* 5.0 Global rules */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: var(--space-5);
}
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-ink-700);
    background: var(--color-white);
    overflow-wrap: break-word;
}
@media (min-width: 64em) { body { font-size: 1.0625rem; } }

h1, h2, h3, h4 { margin: 0; color: var(--color-ink-900); text-wrap: balance; }
.surface-dark h1, .surface-dark h2, .surface-dark h3 { color: var(--color-on-dark); }

/* 5.0 Default heading scale (3.2); components override where the design system says so */
h1 { max-width: 24ch; font-size: 1.875rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; }
h2 { font-size: 1.5rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
h3 { font-size: 1.1875rem; font-weight: 600; line-height: 1.3; }
h4 { font-size: 1.0625rem; font-weight: 600; line-height: 1.4; }
@media (min-width: 40em) {
    h1 { font-size: 2.25rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.25rem; }
}
@media (min-width: 64em) {
    h1 { font-size: 2.75rem; }
    h2 { font-size: 2.125rem; }
    h3 { font-size: 1.375rem; }
    h4 { font-size: 1.125rem; }
}

p, ul, ol, dl, figure, blockquote { margin: 0; }
svg { max-width: 100%; }
address { font-style: normal; }
::selection { background: var(--color-on-dark-muted); color: var(--color-ink-900); }


:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
}
.surface-dark :focus-visible { outline-color: var(--focus-color-on-dark); }
main:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

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

/* 7.1 Icons */
.icon { display: inline-block; flex-shrink: 0; width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.icon--20 { width: 1.25rem; height: 1.25rem; stroke-width: 2; }
.icon--32 { width: 2rem; height: 2rem; stroke-width: 1.5; }

/* 4.3 Containers */
.container {
    width: 100%;
    max-width: 76rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
}
.container--narrow { max-width: 48rem; }
@media (min-width: 40em) {
    .container { padding-inline: var(--space-6); }
}

/* 4.4 Grids */
.grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
.grid > * { min-width: 0; }
@media (min-width: 40em) {
    .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 64em) {
    .grid { gap: var(--space-6); }
    .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid--3 > :last-child:nth-child(odd) { grid-column: auto; }
    .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.split { display: grid; gap: var(--space-8); }
.split > * { min-width: 0; }
@media (min-width: 64em) {
    .split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-9); align-items: start; }
    .split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.split > .section-head { margin-bottom: 0; }
.split--head { gap: var(--space-6); }
@media (min-width: 64em) { .split--head { gap: var(--space-9); } }

/* 4.5 Sections */
.section { padding-block: var(--space-8); }
.section--subtle { background: var(--color-surface-subtle); }
@media (min-width: 40em) { .section { padding-block: var(--space-9); } }
@media (min-width: 64em) { .section { padding-block: var(--space-10); } }

/* Spacing the design system names in its page templates (6.1, 6.5, 6.8) */
.section-foot { margin-top: var(--space-7); }
.callout--spaced { margin-top: var(--space-5); }

/* 5.1 Skip link */
.skip-link {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    z-index: 100;
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: var(--space-3) var(--space-4);
    background: var(--color-brand-dark);
    color: var(--color-white);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    border-radius: var(--radius-md);
}
.skip-link:hover, .skip-link:active { color: var(--color-white); }
.skip-link:not(:focus) {
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* 5.2 Header and brand */
.site-header { background: var(--color-white); border-bottom: 1px solid var(--color-border); }
.site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-6);
    padding-block: var(--space-3);
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.75rem;
    color: var(--color-brand);
    text-decoration: none;
    border-radius: var(--radius-sm);
}
.brand__mark { width: 1.95rem; height: 2.5rem; flex-shrink: 0; color: var(--color-brand); --mark-knockout: var(--color-white); }
.brand__knockout { fill: var(--mark-knockout); }
.brand__name { font-size: 1.125rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
@media (hover: hover) {
    .brand:hover .brand__name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
}
.site-nav { flex-basis: 100%; }

@media (min-width: 40em) {
    .brand__mark { width: 2.33rem; height: 3rem; }
}
@media (min-width: 64em) {
    .site-header__inner { padding-block: var(--space-4); }
    .brand__mark { width: 2.72rem; height: 3.5rem; }
    .brand__name { font-size: 1.25rem; }
    .site-nav { flex-basis: auto; }
}

/* 5.3 Main navigation */
.site-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}
.site-nav__list > li:last-child { grid-column: 1 / -1; } /* Contact on its own row (WEB-008) */
.site-nav__link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-3);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
    color: var(--color-ink-900);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    transition: color var(--duration) var(--easing), background-color var(--duration) var(--easing);
}
.site-nav__link--cta { background: var(--color-brand); color: var(--color-white); }
.site-nav__link[aria-current="page"] {
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 0.35em;
}
@media (hover: hover) {
    .site-nav__link:hover { background: var(--color-surface-tint); color: var(--color-brand-dark); }
    .site-nav__link--cta:hover { background: var(--color-brand-dark); color: var(--color-white); }
}
.site-nav__link:active { background: var(--color-border); color: var(--color-ink-900); }
.site-nav__link--cta:active { background: var(--color-ink-900); color: var(--color-white); }

@media (min-width: 40em) {
    .site-nav__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
    .site-nav__link { background: transparent; }
    .site-nav__link--cta { margin-left: var(--space-2); padding-inline: var(--space-5); background: var(--color-brand); }
}

/* 5.4 Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 3rem;
    padding: var(--space-3) var(--space-5);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    transition: color var(--duration) var(--easing), background-color var(--duration) var(--easing), border-color var(--duration) var(--easing);
}
.btn--primary { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-white); }
.btn--secondary { background: transparent; border-color: var(--color-brand); color: var(--color-brand); }
.btn--on-dark { background: var(--color-white); border-color: var(--color-white); color: var(--color-brand-dark); }
.btn--on-dark-secondary { background: transparent; border-color: var(--color-white); color: var(--color-white); }
@media (hover: hover) {
    .btn--primary:hover { background: var(--color-brand-dark); border-color: var(--color-brand-dark); color: var(--color-white); }
    .btn--secondary:hover { background: var(--color-brand); color: var(--color-white); }
    .btn--on-dark:hover { background: var(--color-surface-tint); border-color: var(--color-surface-tint); color: var(--color-brand-dark); }
    .btn--on-dark-secondary:hover { background: var(--color-white); color: var(--color-brand-dark); }
}
.btn--primary:active { background: var(--color-ink-900); border-color: var(--color-ink-900); color: var(--color-white); }
.btn--secondary:active { background: var(--color-brand-dark); border-color: var(--color-brand-dark); color: var(--color-white); }
.btn--on-dark:active { background: var(--color-on-dark-muted); border-color: var(--color-on-dark-muted); color: var(--color-brand-dark); }
.btn--on-dark-secondary:active { background: var(--color-surface-tint); border-color: var(--color-surface-tint); color: var(--color-brand-dark); }
.btn-group { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* 5.5 Text links */
a {
    color: var(--color-brand);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    border-radius: var(--radius-sm);
    transition: color var(--duration) var(--easing), text-decoration-color var(--duration) var(--easing);
}
@media (hover: hover) {
    a:hover { color: var(--color-brand-dark); text-decoration-thickness: 2px; }
}
a:active { color: var(--color-ink-900); }

.surface-dark p a, .surface-dark li a { color: var(--color-on-dark); }
@media (hover: hover) { .surface-dark p a:hover, .surface-dark li a:hover { color: var(--color-on-dark); } }
.surface-dark p a:active, .surface-dark li a:active { color: var(--color-on-dark-muted); }

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2rem;
    font-weight: 600;
}
.link-list { list-style: none; padding: 0; display: grid; gap: var(--space-2); }

/* 5.6 Eyebrow */
.eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-brand);
}
.eyebrow::before { content: ""; flex: 0 0 1.5rem; height: 2px; background: currentColor; }
.surface-dark .eyebrow { color: var(--color-accent-on-dark); }
@media (min-width: 64em) { .eyebrow { font-size: 0.875rem; } }

/* 5.7 Section head */
.section-head { max-width: 48rem; margin-bottom: var(--space-6); }
.section-head p:not(.eyebrow) { margin-top: var(--space-3); max-width: 60ch; font-size: 1.0625rem; color: var(--color-ink-700); }
.surface-dark .section-head p:not(.eyebrow) { color: var(--color-on-dark-muted); }
@media (min-width: 64em) {
    .section-head { margin-bottom: var(--space-8); }
    .section-head p:not(.eyebrow) { font-size: 1.125rem; }
}

/* 5.8 Hero */
.hero { padding-block: var(--space-8); }
.hero__grid { display: grid; gap: var(--space-8); align-items: center; }
.hero__text { max-width: 40rem; }
.hero__actions { margin-top: var(--space-6); }
.hero__alt { margin-top: var(--space-3); font-size: 0.9375rem; }
.hero__alt a { overflow-wrap: anywhere; }
.hero__art { display: none; width: 100%; max-width: 30rem; height: auto; justify-self: end; }
.hero--dark {
    background: var(--gradient-ai);
    border-top: 0.25rem solid var(--color-accent-on-dark);
    color: var(--color-on-dark-muted);
}
.hero--dark h1 { color: var(--color-on-dark); }

.display { max-width: 20ch; font-size: 2rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.lede { margin-top: var(--space-4); max-width: 60ch; font-size: 1.125rem; line-height: 1.55; }
.hero .lede { color: var(--color-ink-700); }
.hero--dark .lede { color: var(--color-on-dark-muted); }

@media (min-width: 40em) {
    .hero { padding-block: var(--space-9); }
    .display { font-size: 2.75rem; }
    .lede { font-size: 1.1875rem; }
}
@media (min-width: 64em) {
    .hero { padding-block: var(--space-10); }
    .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-9); }
    .hero__art { display: block; }
    .display { font-size: 3.5rem; }
    .lede { font-size: 1.3125rem; }
}

/* 11.1 Page hero (Software services, How we work) */
.hero--page { padding-block: var(--space-7); background: var(--color-surface-subtle); border-bottom: 1px solid var(--color-border); }
.hero--page h1 { max-width: 24ch; font-size: 1.875rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; }
@media (min-width: 40em) {
    .hero--page { padding-block: var(--space-8); }
    .hero--page h1 { font-size: 2.25rem; }
}
@media (min-width: 64em) {
    .hero--page { padding-block: var(--space-9); }
    .hero--page h1 { font-size: 2.75rem; }
}

/* 5.9 Page head (the 404 heading uses the same h1 scale) */
.page-head { padding-block: var(--space-7); background: var(--color-surface-subtle); border-bottom: 1px solid var(--color-border); }
.page-head h1, .page-title { max-width: 24ch; font-size: 1.875rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; }
.page-head .lede { color: var(--color-ink-700); }
.page-head__meta { margin-top: var(--space-3); font-size: 0.875rem; color: var(--color-ink-600); }
.page-head--compact { padding-block: var(--space-6); }
.page-index { list-style: none; padding: 0; margin-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.page-index a { display: inline-block; padding-block: var(--space-1); }
@media (min-width: 40em) {
    .page-head { padding-block: var(--space-8); }
    .page-head h1, .page-title { font-size: 2.25rem; }
    .page-head--compact { padding-block: var(--space-7); }
}
@media (min-width: 64em) {
    .page-head { padding-block: var(--space-9); }
    .page-head h1, .page-title { font-size: 2.75rem; }
    .page-head--compact { padding-block: var(--space-8); }
}

/* 5.10 Cards and icon tile */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: border-color var(--duration) var(--easing), box-shadow var(--duration) var(--easing);
}
.icon-tile {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: var(--space-2);
    border-radius: var(--radius-lg);
    background: var(--color-surface-tint);
    color: var(--color-brand);
}
.card__title { font-size: 1.1875rem; font-weight: 600; line-height: 1.3; }
.card__text { color: var(--color-ink-700); }
.card__link { color: var(--color-ink-900); text-decoration: none; }
.card__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); }
.card__link:focus-visible { outline: none; }
.card__link:focus-visible::after { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); }
.card__arrow { display: inline-block; margin-left: 0.375rem; vertical-align: -0.2em; color: var(--color-brand); }
@media (hover: hover) {
    .card--link:hover { border-color: var(--color-brand); box-shadow: var(--shadow-hover); }
    .card--link:hover .card__link { color: var(--color-brand-dark); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
}
.card--link:active { border-color: var(--color-brand-dark); }
.card--link:active .card__link { color: var(--color-ink-900); }
@media (min-width: 40em) { .card__title { font-size: 1.25rem; } }
@media (min-width: 64em) { .card { padding: var(--space-6); } .card__title { font-size: 1.375rem; } }

/* 5.11 Numbered steps */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: var(--space-6); max-width: 48rem; }
.steps__item {
    counter-increment: step;
    position: relative;
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    column-gap: var(--space-5);
}
.steps__item::before {
    content: counter(step, decimal-leading-zero);
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 3.25rem;
    background: var(--color-brand);
    color: var(--color-white);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    clip-path: polygon(50% 0, 100% 22%, 100% 78%, 50% 100%, 0 78%, 0 22%);
}
.steps__item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: calc(1.25rem - 1px);
    top: calc(3.25rem + var(--space-2));
    bottom: calc(var(--space-2) - var(--space-6));
    width: 2px;
    background: var(--color-border);
}
.steps__title { margin-top: var(--space-3); font-size: 1.1875rem; font-weight: 600; line-height: 1.3; }
.steps__text { margin-top: var(--space-2); max-width: 60ch; color: var(--color-ink-700); }
.steps__body > .checklist { margin-top: var(--space-4); }
@media (min-width: 40em) { .steps__title { font-size: 1.25rem; } }
@media (min-width: 64em) {
    .steps__title { font-size: 1.375rem; }
    .steps--row { max-width: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
    .steps--row .steps__item { grid-template-columns: minmax(0, 1fr); align-content: start; }
    .steps--row .steps__item::before { grid-row: auto; margin-bottom: var(--space-4); }
    .steps--row .steps__title { margin-top: 0; }
    .steps--row .steps__item:not(:last-child)::after {
        left: calc(2.5rem + var(--space-3));
        right: calc(var(--space-3) - var(--space-6));
        top: calc(1.625rem - 1px);
        bottom: auto;
        width: auto;
        height: 2px;
    }
}

/* 5.12 Feature list and checklist */
.features { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
.features__item { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); column-gap: var(--space-4); }
.features__icon { grid-row: 1 / span 2; margin-top: 0.125rem; color: var(--color-brand); }
.features__title { font-size: 1.0625rem; font-weight: 600; line-height: 1.4; }
.features__text { margin-top: var(--space-1); color: var(--color-ink-700); }
.surface-dark .features__icon { color: var(--color-accent-on-dark); }
.surface-dark .features__title { color: var(--color-on-dark); }
.surface-dark .features__text { color: var(--color-on-dark-muted); }
@media (min-width: 40em) {
    .features--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
}
@media (min-width: 64em) { .features__title { font-size: 1.125rem; } }

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.checklist li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); column-gap: var(--space-3); }
.checklist .icon { margin-top: 0.125rem; color: var(--color-brand); }

/* 5.13 AI highlight band */
.band-ai {
    padding-block: var(--space-8);
    background: var(--gradient-ai);
    border-top: 0.25rem solid var(--color-accent-on-dark);
    color: var(--color-on-dark-muted);
}
.band-ai h2 { color: var(--color-on-dark); font-size: 1.5rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.band-ai__grid { display: grid; gap: var(--space-8); }
.band-ai__text p:not(.eyebrow) { margin-top: var(--space-4); max-width: 60ch; font-size: 1.0625rem; }
.band-ai__actions { margin-top: var(--space-6); }
.band-ai--compact { padding-block: var(--space-7); }
.band-ai--compact .band-ai__grid { gap: var(--space-5); }
.band-ai--compact .band-ai__actions { margin-top: 0; }
@media (min-width: 40em) {
    .band-ai { padding-block: var(--space-9); }
    .band-ai h2 { font-size: 1.75rem; }
    .band-ai--compact { padding-block: var(--space-8); }
}
@media (min-width: 64em) {
    .band-ai { padding-block: var(--space-10); }
    .band-ai h2 { font-size: 2.125rem; }
    .band-ai__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-9); align-items: start; }
    .band-ai__text p:not(.eyebrow) { font-size: 1.125rem; }
    .band-ai--compact { padding-block: var(--space-8); }
    .band-ai--compact .band-ai__grid { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}

/* 5.14 Contact band */
.band-cta { padding-block: var(--space-8); background: var(--color-surface-tint); }
.band-cta h2 { font-size: 1.5rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.band-cta__grid { display: grid; gap: var(--space-6); }
.band-cta__grid p:not(.band-cta__alt) { margin-top: var(--space-3); max-width: 60ch; }
.band-cta__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.band-cta__alt { font-size: 0.9375rem; color: var(--color-ink-700); }
.band-cta__alt a { overflow-wrap: anywhere; }
@media (min-width: 40em) { .band-cta { padding-block: var(--space-9); } .band-cta h2 { font-size: 1.75rem; } }
@media (min-width: 64em) {
    .band-cta { padding-block: var(--space-10); }
    .band-cta h2 { font-size: 2.125rem; }
    .band-cta__grid { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-9); align-items: end; }
}

/* 5.15 Contact panel */
.contact-panel { padding: var(--space-5); background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.contact-panel__title { font-size: 1.1875rem; font-weight: 600; line-height: 1.3; }
.contact-panel__label { margin-top: var(--space-4); font-size: 0.875rem; font-weight: 600; color: var(--color-ink-600); }
.contact-panel__address {
    margin-top: var(--space-1);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-ink-900);
    overflow-wrap: anywhere;
    -webkit-user-select: all;
    user-select: all;
}
.contact-panel__action { margin-top: var(--space-5); }
.contact-panel__hint { margin-top: var(--space-3); max-width: 48ch; font-size: 0.875rem; color: var(--color-ink-600); }
@media (min-width: 40em) {
    .contact-panel { padding: var(--space-6); }
    .contact-panel__title { font-size: 1.25rem; }
    .contact-panel__address { font-size: 1.5rem; }
}
@media (min-width: 64em) {
    .contact-panel { padding: var(--space-7); }
    .contact-panel__title { font-size: 1.375rem; }
    .contact-panel__address { font-size: 1.75rem; }
}

/* 5.16 Callout */
.callout {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    column-gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface-subtle);
    border-left: 0.25rem solid var(--color-brand);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    color: var(--color-ink-700);
}
.section--subtle .callout { background: var(--color-white); }
.callout .icon { margin-top: 0.125rem; color: var(--color-brand); }

/* 5.17 FAQ */
.faq { max-width: 48rem; border-bottom: 1px solid var(--color-border); }
.faq__item { border-top: 1px solid var(--color-border); }
.faq__question {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 3rem;
    padding-block: var(--space-4);
    list-style: none;
    cursor: pointer;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-ink-900);
    border-radius: var(--radius-sm);
}
.faq__question::-webkit-details-marker { display: none; }
.faq__icon { flex-shrink: 0; margin-top: 0.0625rem; color: var(--color-brand); transition: transform var(--duration) var(--easing); }
.faq__item[open] .faq__icon { transform: rotate(180deg); }
@media (hover: hover) {
    .faq__question:hover { color: var(--color-brand-dark); }
    .faq__question:hover > span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
}
.faq__question:active { color: var(--color-ink-900); }
.faq__answer { padding: 0 2.5rem var(--space-5) 0; color: var(--color-ink-700); }
.faq__answer > * + * { margin-top: var(--space-3); }
.faq__answer ul, .faq__answer ol { padding-left: 1.5rem; }
.faq__answer li + li { margin-top: var(--space-2); }
.faq__answer p, .faq__answer li { max-width: 68ch; }
@media (min-width: 64em) { .faq__question { font-size: 1.125rem; } }

/* 5.18 Legal text */
.prose { max-width: 44rem; }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 {
    margin-top: var(--space-8);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { margin-top: var(--space-6); font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.prose h4 { margin-top: var(--space-5); font-size: 1.0625rem; font-weight: 600; line-height: 1.4; }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: var(--space-3); }
.prose ul, .prose ol { padding-left: 1.5rem; }
.prose li + li { margin-top: var(--space-2); }
.prose p, .prose li { max-width: 68ch; }
.prose a { overflow-wrap: anywhere; }
.prose strong { font-weight: 600; color: var(--color-ink-900); }
@media (min-width: 40em) {
    .prose h2 { font-size: 1.5rem; }
    .prose h3 { font-size: 1.1875rem; }
}
@media (min-width: 64em) {
    .prose h2 { font-size: 1.625rem; }
    .prose h3 { font-size: 1.25rem; }
    .prose h4 { font-size: 1.125rem; }
}

.toc {
    margin-bottom: var(--space-7);
    padding: var(--space-5);
    background: var(--color-surface-subtle);
    border-left: 0.25rem solid var(--color-brand);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.toc__title { font-size: 1rem; font-weight: 600; line-height: 1.4; }
.toc ol { margin-top: var(--space-3); padding-left: 0; list-style: none; }
.toc a { display: inline-block; padding-block: var(--space-1); }
.backlink { font-size: 0.875rem; }
.backlink a { display: inline-block; padding-block: var(--space-1); }

.data-list { margin: 0; border-top: 1px solid var(--color-border); }
.data-list__row { padding-block: var(--space-3); border-bottom: 1px solid var(--color-border); }
.data-list dt { font-size: 0.875rem; font-weight: 600; line-height: 1.5; color: var(--color-ink-600); }
.data-list dd { margin: var(--space-1) 0 0; color: var(--color-ink-900); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.data-list dd > a:only-child { display: inline-block; padding-block: 0.375rem; }
@media (min-width: 40em) {
    .data-list__row { display: grid; grid-template-columns: 12rem minmax(0, 1fr); column-gap: var(--space-5); }
    .data-list dd { margin-top: 0; }
}
/* 5.18 amended by design QA D-01: inside a panel the data list stays stacked at every width */
@media (min-width: 40em) {
    .panel .data-list__row { display: block; }
    .panel .data-list dd { margin-top: var(--space-1); }
}

/* 5.19 Footer */
.site-footer { padding-block: var(--space-8) var(--space-6); background: var(--color-navy-900); color: var(--color-on-dark-muted); font-size: 0.9375rem; }
.site-footer .brand { color: var(--color-on-dark); }
.site-footer .brand__mark { width: 1.95rem; height: 2.5rem; color: var(--color-on-dark); --mark-knockout: var(--color-navy-900); }
.site-footer__grid { display: grid; gap: var(--space-7); }
.site-footer__desc { margin-top: var(--space-4); max-width: 34ch; }
.site-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.site-footer__heading {
    margin-bottom: var(--space-3);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-on-dark);
}
.site-footer__list { list-style: none; margin: 0; padding: 0; }
.site-footer .site-footer__list a { display: inline-block; padding-block: 0.375rem; color: var(--color-on-dark-muted); text-decoration: none; overflow-wrap: anywhere; }
@media (hover: hover) {
    .site-footer .site-footer__list a:hover { color: var(--color-on-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
}
.site-footer .site-footer__list a:active { color: var(--color-on-dark); }
.site-footer__list + .site-footer__heading { margin-top: var(--space-6); }
.site-footer__bottom {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-8);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border-on-dark);
    font-size: 0.875rem;
    color: var(--color-on-dark-subtle);
}
@media (min-width: 40em) {
    .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-footer__brand { grid-column: 1 / -1; }
}
@media (min-width: 64em) {
    .site-footer { padding-block: var(--space-9) var(--space-6); }
    .site-footer__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); }
    .site-footer__brand { grid-column: auto; }
    .site-footer__bottom { flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-6); }
}

/* 5.20 Panel and flow */
.flow > * + * { margin-top: var(--space-4); }
.flow > .icon-tile + * { margin-top: 0; }
.panel { padding: var(--space-5); background: var(--color-surface-subtle); border-radius: var(--radius-lg); }
.section--subtle .panel { background: var(--color-white); border: 1px solid var(--color-border); }
.panel > * + * { margin-top: var(--space-4); }
.panel > .icon-tile + * { margin-top: 0; }
.panel h3 { font-size: 1.1875rem; font-weight: 600; line-height: 1.3; }
@media (min-width: 40em) { .panel h3 { font-size: 1.25rem; } }
@media (min-width: 64em) { .panel { padding: var(--space-6); } .panel h3 { font-size: 1.375rem; } }

/* Small parts named in the design system (11.9) */
.note { max-width: 60ch; font-size: 0.875rem; line-height: 1.5; color: var(--color-ink-600); }
.notfound__actions { margin-top: var(--space-6); }
.notfound__title { margin-top: var(--space-8); }
.notfound__title + .link-list { margin-top: var(--space-4); }
.notfound__report { margin-top: var(--space-6); max-width: 60ch; }

/* Pre-release placeholders: must not exist in a published page (legal texts section 6) */
.pending { padding-inline: 0.125rem; }

/* WEB-008: design system section 12 */

/* 12.4.1 Mockup frame */
.mock { width: 100%; max-width: 28rem; -webkit-user-select: none; user-select: none; }
.mock__art { display: block; width: 100%; height: auto; }
.mock__art text { font-family: var(--font-sans); }
.mock__frame { transition: stroke var(--duration) var(--easing); }

/* 12.4.2 Service lines (Home) */
.lines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-8); }
.line { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-3); align-content: start; }
.line > .mock { margin-top: var(--space-2); }
.line__title { font-size: 1.1875rem; font-weight: 600; line-height: 1.3; }
.line__text { max-width: 60ch; color: var(--color-ink-700); }
@media (hover: hover) {
    .line:hover .mock__frame { stroke: var(--color-brand); }
    .line:hover .card__link { color: var(--color-brand-dark); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
}
.line:active .mock__frame { stroke: var(--color-brand-dark); }
.line:active .card__link { color: var(--color-ink-900); }
@media (min-width: 40em) {
    .line { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1fr auto auto 1fr; column-gap: var(--space-6); }
    .line > .mock { grid-column: 2; grid-row: 1 / -1; margin-top: 0; }
    .line > .line__title { grid-column: 1; grid-row: 2; }
    .line > .line__text { grid-column: 1; grid-row: 3; }
    .line__title { font-size: 1.25rem; }
}
@media (min-width: 64em) {
    .lines { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
    .line { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; }
    .line > .mock, .line > .line__title, .line > .line__text { grid-column: auto; grid-row: auto; }
    .line > .mock { margin-top: var(--space-2); }
    .line__title { font-size: 1.375rem; }
}

/* 12.4.3 Showcase and stack */
.showcase { display: grid; gap: var(--space-6); align-items: center; }
.showcase > * { min-width: 0; }
.stack > * + * { margin-top: var(--space-8); }
@media (min-width: 64em) {
    .showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-9); }
    .showcase > .mock { justify-self: end; }
    .showcase--flip > .mock { grid-column: 1; grid-row: 1; justify-self: start; }
    .showcase--flip > .showcase__text { grid-column: 2; grid-row: 1; }
    .stack > * + * { margin-top: var(--space-9); }
}

/* 12.4.4 Point */
.point { display: flex; flex-direction: column; gap: var(--space-2); }
.point__title { font-size: 1.0625rem; font-weight: 600; line-height: 1.4; }
.point__text { color: var(--color-ink-700); }
.section--subtle .point .icon-tile { background: var(--color-white); }
@media (min-width: 64em) { .point__title { font-size: 1.125rem; } }

/* 12.4.5 Gated steps: a hollow gate in the middle of each connector */
.steps--gated .steps__item:not(:last-child)::after {
    left: calc(1.25rem - 0.4375rem);
    width: 0.875rem;
    background:
        radial-gradient(circle closest-side, var(--color-white) 52%, var(--color-accent) 58% 88%, transparent 94%) center / 0.875rem 0.875rem no-repeat,
        linear-gradient(var(--color-border), var(--color-border)) center / 2px 100% no-repeat;
}
@media (min-width: 64em) {
    .steps--row.steps--gated .steps__item:not(:last-child)::after {
        left: calc(2.5rem + var(--space-3));
        right: calc(var(--space-3) - var(--space-6));
        top: calc(1.625rem - 0.4375rem);
        bottom: auto;
        width: auto;
        height: 0.875rem;
        background:
            radial-gradient(circle closest-side, var(--color-white) 52%, var(--color-accent) 58% 88%, transparent 94%) center / 0.875rem 0.875rem no-repeat,
            linear-gradient(var(--color-border), var(--color-border)) center / 100% 2px no-repeat;
    }
}

/* 12.6 Motion: nothing here runs when the reader prefers reduced motion */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }

/* Hero illustrations: one entrance on load, 1.2s in all */
@media (prefers-reduced-motion: no-preference) {
    .hero__art { animation: fade-in 600ms var(--easing) both; }
    .hero__art .art-leg { animation: fade-in 500ms var(--easing) 400ms both; }
    .hero__art .art-node { animation: fade-in 400ms var(--easing) 800ms both; }
}

/* Mockups: built by the reader's scrolling; static and complete without support */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .mock { view-timeline-name: --mock; }
        .mk-x, .mk-y, .mk-pop { transform-box: fill-box; }
        .mk-x { transform-origin: left center; animation: grow-x linear both; }
        .mk-y { transform-origin: center bottom; animation: grow-y linear both; }
        .mk-pop { transform-origin: center; animation: pop steps(2, jump-none) both; }
        .mk-draw { stroke-dasharray: 1; animation: draw linear both; }
        .mk-x, .mk-y, .mk-pop, .mk-draw { animation-timeline: --mock; }
        .mk-1 { animation-range: cover 5% cover 20%; }
        .mk-2 { animation-range: cover 10% cover 25%; }
        .mk-3 { animation-range: cover 15% cover 30%; }
        .mk-4 { animation-range: cover 20% cover 35%; }
        .mk-5 { animation-range: cover 25% cover 40%; }
    }
}

/* 5.21 Print, added: mockups are not printed */
@media print { .mock { display: none; } }

/* 5.21 Print */
@media print {
    .skip-link, .site-nav, .hero__art, .band-cta, .backlink { display: none; }
    body { background: #ffffff; color: #000000; }
    .surface-dark, .surface-dark * { background: none !important; color: #000000 !important; border-color: #000000 !important; }
    a { color: #000000; }
    .prose a[href^="http"]::after, .prose a[href^="mailto:"]::after { content: " (" attr(href) ")"; }
    h2, h3 { break-after: avoid; }
    .data-list__row, tr, .faq__item { break-inside: avoid; }
}