/* ==========================================================================
   Casibus — design system v3 (Inter Tight / JetBrains Mono / magenta-500)
   White background, single accent, sharp 2px radius, editorial type.
   Mobile-first, fluid, accessible.
   ========================================================================== */

/* --- 1. Design tokens ------------------------------------------------------ */
:root {
    /* Magenta palette */
    --magenta-100: oklch(0.93 0.05 340);
    --magenta-300: oklch(0.78 0.15 340);
    --magenta-500: oklch(0.62 0.22 340);
    --magenta-700: oklch(0.44 0.20 340);

    /* Grays */
    --gray-50:  #fafafa;
    --gray-100: #f4f4f5;
    --gray-200: #e7e7ea;
    --gray-300: #d1d1d6;
    --ink-300:  #6b6b70;
    --ink-500:  #3a3a3d;
    --ink-700:  #1f1f22;
    --ink-900:  #111114;

    /* Semantic */
    --c-bg:             #ffffff;
    --c-surface:        #ffffff;
    --c-surface-2:      #f4f4f5;
    --c-text:           #111114;
    --c-text-soft:      #3a3a3d;
    --c-text-mute:      #6b6b70;
    --c-border:         #e7e7ea;
    --c-link:           #111114;
    --c-link-hover:     oklch(0.62 0.22 340);
    --c-accent:         oklch(0.62 0.22 340);
    --c-accent-deep:    oklch(0.44 0.20 340);
    --c-accent-soft:    color-mix(in oklch, oklch(0.62 0.22 340) 10%, white);
    --c-accent-glow:    color-mix(in oklch, oklch(0.62 0.22 340) 28%, transparent);
    --c-accent-tint:    oklch(0.93 0.05 340);
    --c-accent-contrast:#ffffff;
    --c-accent-darker:  oklch(0.44 0.20 340);

    /* Back-compat aliases so existing templates still work */
    --c-paper:          #ffffff;
    --c-paper-2:        #f4f4f5;
    --c-paper-3:        #e7e7ea;
    --c-paper-4:        #d1d1d6;
    --c-paper-mute:     #6b6b70;
    --c-paper-dim:      #3a3a3d;
    --c-ink:            #111114;
    --c-ink-2:          #1f1f22;
    --c-ink-3:          #f4f4f5;
    --c-ink-4:          #e7e7ea;
    --c-ink-5:          #d1d1d6;
    --c-ink-line:       #e7e7ea;
    --c-ink-line-soft:  #f4f4f5;
    --c-amber:          oklch(0.62 0.22 340);
    --c-amber-deep:     oklch(0.44 0.20 340);
    --c-amber-darker:   oklch(0.44 0.20 340);
    --c-amber-soft:     color-mix(in oklch, oklch(0.62 0.22 340) 10%, white);
    --c-amber-glow:     color-mix(in oklch, oklch(0.62 0.22 340) 28%, transparent);
    --c-coral:          oklch(0.62 0.22 340);
    --c-coral-deep:     oklch(0.44 0.20 340);
    --c-coral-soft:     color-mix(in oklch, oklch(0.62 0.22 340) 10%, white);

    /* Status */
    --c-success:        #10B981;
    --c-success-soft:   rgba(16, 185, 129, 0.12);
    --c-error:          #DC2626;
    --c-error-soft:     rgba(220, 38, 38, 0.1);

    /* Fonts */
    --font-sans:    'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --font-brutal:  'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-black:   'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-serif:   'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Type scale */
    --fs-12:   0.75rem;
    --fs-13:   0.8125rem;
    --fs-14:   0.875rem;
    --fs-15:   0.9375rem;
    --fs-16:   1rem;
    --fs-17:   1.0625rem;
    --fs-18:   1.125rem;
    --fs-20:   1.25rem;
    --fs-h6:   clamp(1.125rem, 1rem + 0.4vw, 1.25rem);
    --fs-h5:   clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
    --fs-h4:   clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
    --fs-h3:   clamp(1.875rem, 1.5rem + 1.8vw, 2.75rem);
    --fs-h2:   clamp(2.25rem, 1.7rem + 2.8vw, 3.75rem);
    --fs-h1:   clamp(2.75rem, 1.75rem + 4.5vw, 5.5rem);
    --fs-display: clamp(3.25rem, 2rem + 6vw, 7.5rem);
    --fs-mega:    clamp(4rem, 2.5rem + 8vw, 10rem);

    /* Line heights */
    --lh-tight:   1.05;
    --lh-snug:    1.2;
    --lh-base:    1.6;
    --lh-relaxed: 1.75;

    /* Spacing */
    --s-1:  0.25rem;
    --s-2:  0.5rem;
    --s-3:  0.75rem;
    --s-4:  1rem;
    --s-5:  1.25rem;
    --s-6:  1.5rem;
    --s-7:  1.75rem;
    --s-8:  2rem;
    --s-10: 2.5rem;
    --s-12: 3rem;
    --s-14: 3.5rem;
    --s-16: 4rem;
    --s-20: 5rem;
    --s-24: 6rem;
    --s-32: 8rem;

    /* Layout */
    --container:        1280px;
    --container-narrow: 880px;
    --container-wide:   1440px;
    --gutter:           clamp(1rem, 0.5rem + 2vw, 2.5rem);

    /* Radii — sharp by design */
    --r-xs: 2px;
    --r-sm: 2px;
    --r-md: 2px;
    --r-lg: 4px;
    --r-xl: 6px;
    --r-pill: 999px;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(17,17,20,.04);
    --shadow-sm: 0 1px 2px rgba(17,17,20,.06), 0 1px 3px rgba(17,17,20,.04);
    --shadow-md: 0 2px 8px rgba(17,17,20,.08), 0 8px 24px rgba(17,17,20,.06);
    --shadow-lg: 0 4px 16px rgba(17,17,20,.10), 0 24px 48px rgba(17,17,20,.08);
    --shadow-amber: 0 8px 24px var(--c-accent-glow);

    /* Motion */
    --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
    --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-expo:   cubic-bezier(0.65, 0, 0.35, 1);
    --t-fast:   140ms;
    --t-base:   220ms;
    --t-slow:   400ms;
    --t-slower: 700ms;

    /* Z-index */
    --z-nav:     50;
    --z-overlay: 90;
    --z-modal:   100;
    --z-toast:   110;

    /* Header height */
    --header-h: 72px;
}
@media (min-width: 1024px) { :root { --header-h: 80px; } }

/* --- 2. Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    font-family: var(--font-sans);
    font-size: var(--fs-17);
    line-height: var(--lh-base);
    color: var(--c-text);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: var(--c-link); text-decoration: none; transition: color var(--t-base) var(--ease-out); }
a:hover { color: var(--c-link-hover); }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: var(--r-sm); }
::selection { background: var(--c-accent); color: #fff; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--gray-50); }
::-webkit-scrollbar-thumb { background: var(--gray-300); border: 2px solid var(--gray-50); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-300); }

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

/* --- 3. Typography --------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    font-weight: 600;
    color: var(--c-text);
    line-height: var(--lh-tight);
    letter-spacing: -0.03em;
    text-wrap: balance;
}
h1 { font-size: var(--fs-h1); letter-spacing: -0.04em; line-height: 0.95; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.035em; }
h3 { font-size: var(--fs-h3); letter-spacing: -0.03em; }
h4 { font-size: var(--fs-h4); letter-spacing: -0.025em; }
h5 { font-size: var(--fs-h5); letter-spacing: -0.02em; }
h6 { font-size: var(--fs-h6); letter-spacing: -0.015em; }

/* Legacy brutal/display/black utilities from templates */
.font-display { font-family: var(--font-sans); font-size: var(--fs-display); line-height: 0.92; letter-spacing: -0.045em; font-weight: 600; }
.font-mega    { font-family: var(--font-sans); font-size: var(--fs-mega);    line-height: 0.88; letter-spacing: -0.05em;  font-weight: 600; }
.font-italic  { font-style: italic; color: var(--c-accent); }
.italic-accent { font-style: italic; color: var(--c-accent); }

/* Mono eyebrow — JetBrains Mono, all caps */
.eyebrow {
    display: inline-flex; align-items: center; gap: var(--s-3);
    font-family: var(--font-mono);
    font-size: var(--fs-12); font-weight: 400;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--c-accent);
}
.eyebrow::before { display: none; }   /* kill old underline bar */

/* Mono label helper */
.mono-label {
    font-family: var(--font-mono);
    font-size: var(--fs-12); letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--c-text-mute);
}

.lead {
    font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
    line-height: var(--lh-relaxed);
    color: var(--c-text-soft);
    text-wrap: pretty;
    font-weight: 400;
}
p { line-height: var(--lh-base); text-wrap: pretty; color: var(--c-text-soft); }
small { font-size: var(--fs-13); }

/* Prose */
.prose { color: var(--c-text-soft); font-size: var(--fs-17); line-height: var(--lh-relaxed); max-width: 72ch; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2em; font-size: var(--fs-h3); color: var(--c-text); }
.prose h3 { margin-top: 1.6em; font-size: var(--fs-h4); color: var(--c-text); }
.prose h4 { margin-top: 1.4em; font-size: var(--fs-h5); color: var(--c-text); }
.prose ul, .prose ol { padding-left: 1.4em; list-style: revert; }
.prose li { color: var(--c-text-soft); }
.prose li + li { margin-top: 0.4em; }
.prose li::marker { color: var(--c-accent); }
.prose strong { color: var(--c-text); font-weight: 600; }
.prose a { color: var(--c-accent-deep); text-decoration: underline; text-decoration-color: var(--c-accent-soft); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { color: var(--c-text); text-decoration-color: var(--c-accent); }
.prose blockquote {
    border-left: 2px solid var(--c-accent);
    padding: var(--s-1) 0 var(--s-1) var(--s-5);
    font-size: var(--fs-h4); color: var(--ink-700);
    font-style: italic; font-weight: 400;
}
.prose figure img { border-radius: var(--r-sm); }
.prose figure figcaption { font-size: var(--fs-13); color: var(--c-text-mute); margin-top: var(--s-2); }
.prose hr { border: 0; border-top: 1px solid var(--c-border); margin: 2.5em 0; }
.prose table { border-collapse: collapse; width: 100%; font-size: var(--fs-15); }
.prose th, .prose td { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-border); text-align: left; vertical-align: top; color: var(--c-text-soft); }
.prose th { background: var(--c-accent-tint); font-weight: 600; color: var(--c-text); }

/* Section colour modifiers */
.section--paper, .paper-surface { background: var(--c-bg); color: var(--c-text); }
.section--ink { background: var(--ink-900); color: #fff; }
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: #fff; }
.section--ink p, .section--ink .prose { color: rgba(255,255,255,.7); }

/* --- 4. Layout ------------------------------------------------------------- */
.container        { width: 100%; max-width: var(--container);        margin-inline: auto; padding-inline: var(--gutter); }
.container-narrow { width: 100%; max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--gutter); }
.container-wide   { width: 100%; max-width: var(--container-wide);   margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: clamp(3rem, 2rem + 4vw, 6rem); position: relative; }
.section--tight { padding-block: clamp(2rem, 1.5rem + 2vw, 4rem); }
.section--alt     { background: var(--gray-50); }
.section--elevated{ background: #fff; }
.section--paper-2 { background: var(--gray-50); }
.section--tint    { background: var(--c-accent-tint); }

.grid { display: grid; gap: var(--s-6); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }
@media (min-width: 720px)  { .grid--2 { grid-template-columns: 1fr 1fr; } .grid--3 { grid-template-columns: 1fr 1fr; } .grid--4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .grid--3 { grid-template-columns: repeat(3,1fr); } .grid--4 { grid-template-columns: repeat(4,1fr); } }

.flex { display: flex; gap: var(--s-4); }
.flex--center  { align-items: center; justify-content: center; }
.flex--between { align-items: center; justify-content: space-between; }
.flex--wrap    { flex-wrap: wrap; }
.stack > * + * { margin-top: var(--s-4); }
.stack--lg > * + * { margin-top: var(--s-6); }

/* Skip link */
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: var(--z-toast);
    background: var(--c-accent); color: #fff; padding: 12px 16px;
    border-radius: 0 0 var(--r-sm) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* --- 5. Buttons ------------------------------------------------------------ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    padding: 0.875rem 1.5rem;
    background: var(--c-accent); color: #fff;
    font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-15);
    line-height: 1; letter-spacing: -0.005em;
    border: 1px solid transparent; border-radius: var(--r-sm);
    cursor: pointer; text-decoration: none;
    transition: background var(--t-base) var(--ease-out),
                color var(--t-base) var(--ease-out),
                border-color var(--t-base),
                gap var(--t-base) var(--ease-out),
                transform var(--t-base) var(--ease-spring);
    position: relative; overflow: hidden;
    will-change: transform;
}
.btn::before {
    content: ''; position: absolute; inset: 0;
    background: var(--c-accent-deep);
    transform: translateY(100%);
    transition: transform var(--t-slow) var(--ease-expo);
}
.btn:hover::before { transform: translateY(0); }
.btn:hover { gap: var(--s-3); }
.btn > * { position: relative; z-index: 1; }
.btn .arr { transition: transform var(--t-base) var(--ease-out); position: relative; z-index: 1; }
.btn:hover .arr { transform: translateX(4px); }

/* Ink / dark button */
.btn--ink, .btn--ghost {
    background: var(--ink-900); color: #fff; border-color: var(--ink-900);
}
.btn--ink::before, .btn--ghost::before { background: var(--c-accent); }
.btn--ink:hover, .btn--ghost:hover { border-color: var(--c-accent); }

/* Ghost/outline on dark backgrounds */
.hero-image .btn--ghost,
.section--ink .btn--ghost {
    background: transparent; color: #fff; border-color: rgba(255,255,255,.3);
}
.hero-image .btn--ghost::before,
.section--ink .btn--ghost::before { background: rgba(255,255,255,.1); }
.hero-image .btn--ghost:hover,
.section--ink .btn--ghost:hover { border-color: #fff; color: #fff; }

/* Outline accent */
.btn--outline {
    background: transparent; color: var(--c-accent-deep); border-color: var(--c-accent);
}
.btn--outline::before { background: var(--c-accent); }
.btn--outline:hover { color: #fff; }

/* White button */
.btn--white {
    background: #fff; color: var(--ink-900); border-color: rgba(0,0,0,.08);
}
.btn--white::before { background: var(--gray-50); }
.btn--white:hover { color: var(--ink-900); }

.btn--lg { padding: 1.1rem 2rem; font-size: var(--fs-16); }
.btn--sm { padding: 0.6rem 1.2rem; font-size: var(--fs-13); }
.btn--block { display: flex; width: 100%; }
.btn--icon  { padding-inline: 1.25rem; }

/* --- 6. Pills / Tags / Badges ---------------------------------------------- */
.pill {
    display: inline-flex; align-items: center; gap: 0.4em;
    padding: 0.35em 0.9em; font-size: var(--fs-12); font-weight: 600;
    border-radius: var(--r-pill);
    background: var(--c-accent-tint); color: var(--c-accent-darker);
    border: 1px solid transparent;
    line-height: 1; letter-spacing: 0.08em; text-transform: uppercase;
    font-family: var(--font-mono);
}
.pill--amber { background: var(--c-accent-soft); color: var(--c-accent-darker); }
.pill--success { background: var(--c-success-soft); color: var(--c-success); }
.pill--ink { background: var(--ink-900); color: #fff; }

/* --- 7. Cards -------------------------------------------------------------- */
.card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--s-6);
    transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
    color: var(--c-text-soft);
}
.card:hover { transform: translateY(-2px); border-color: var(--c-text); box-shadow: var(--shadow-md); }
.card__icon {
    width: 44px; height: 44px; border-radius: var(--r-sm);
    background: var(--c-accent-soft); color: var(--c-accent);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: var(--s-4);
    border: 1px solid color-mix(in oklch, var(--c-accent) 20%, transparent);
}
.card__title { font-size: var(--fs-h5); margin-bottom: var(--s-2); color: var(--c-text); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.card__body  { color: var(--c-text-soft); font-size: var(--fs-15); line-height: var(--lh-base); }
.card__link {
    display: inline-flex; align-items: center; gap: 0.4em;
    margin-top: var(--s-4); font-weight: 600; font-size: var(--fs-13);
    color: var(--c-accent);
    letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
    font-family: var(--font-mono);
}
.card__link::after { content: '\2192'; transition: transform var(--t-base); }
.card:hover .card__link::after { transform: translateX(4px); }
.card--featured { border-color: var(--c-accent); }
.card--featured .card__title { color: var(--c-accent-deep); }
.card--light { background: var(--c-surface); }

/* --- 8. Navigation (sticky, frosted glass) --------------------------------- */
.site-header {
    position: sticky; top: 0; z-index: var(--z-nav);
    background: rgba(255,255,255,.86);
    backdrop-filter: saturate(120%) blur(10px);
    -webkit-backdrop-filter: saturate(120%) blur(10px);
    border-bottom: 1px solid var(--c-border);
    transition: border-color var(--t-base), background var(--t-base);
}
.site-header.is-scrolled { background: rgba(255,255,255,.96); }

.site-header__row {
    display: flex; align-items: center; justify-content: space-between;
    height: var(--header-h); gap: var(--s-6);
}

/* Logo / brand */
.site-header__logo {
    display: inline-flex; align-items: center; gap: 12px;
    flex-shrink: 0; color: var(--c-text); text-decoration: none;
}
.site-header__logo img { height: 32px; width: auto; }
.brand-mark {
    width: 30px; height: 30px; flex-shrink: 0;
    display: block;
}
.brand-mark svg { width: 100%; height: 100%; display: block; }
.site-header__logo .wordmark {
    font-family: var(--font-sans); font-weight: 600;
    font-size: 1.2rem; color: var(--ink-900); letter-spacing: -0.02em; line-height: 1;
}

/* Primary nav */
.nav { display: none; }
@media (min-width: 1024px) {
    .nav { display: flex; align-items: center; gap: 0; flex: 1; }
}
.nav__item { position: relative; }
.nav__link {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 10px 16px; font-size: var(--fs-14); font-weight: 500;
    color: var(--c-text-soft); border-radius: 0;
    transition: color var(--t-fast); letter-spacing: 0.01em;
    position: relative;
}
.nav__link::after {
    content: ''; position: absolute; left: 16px; right: 16px; bottom: -1px;
    height: 1px; background: var(--c-accent);
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--t-slow) var(--ease-expo);
}
.nav__link:hover { color: var(--c-text); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--c-text); }
.nav__link.is-active::after { transform: scaleX(1); }

/* Dropdown */
.nav__dropdown {
    position: absolute; top: calc(100% + 8px); left: 0; min-width: 260px;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    padding: var(--s-2);
    opacity: 0; pointer-events: none; transform: translateY(8px);
    transition: opacity var(--t-base), transform var(--t-base);
}
.nav__item:hover .nav__dropdown,
.nav__item:focus-within .nav__dropdown { opacity: 1; pointer-events: auto; transform: translateY(0); }
.nav__dropdown a {
    display: block; padding: 10px 14px; font-size: var(--fs-14);
    color: var(--c-text-soft); border-radius: var(--r-sm); line-height: 1.4;
}
.nav__dropdown a:hover { background: var(--c-accent-tint); color: var(--c-text); }

/* Desktop CTA area */
.site-header__cta { display: none; align-items: center; gap: var(--s-4); }
@media (min-width: 1024px) { .site-header__cta { display: inline-flex; } }

.tel-cta {
    display: inline-flex; align-items: center; gap: var(--s-2);
    font-weight: 600; font-size: var(--fs-14); color: var(--c-text); letter-spacing: 0.01em;
}
.tel-cta:hover { color: var(--c-accent-deep); }
.tel-cta__icon {
    width: 28px; height: 28px; border-radius: 50%; background: var(--c-accent);
    display: inline-flex; align-items: center; justify-content: center; color: #fff;
}

/* Mobile burger */
.burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: var(--r-sm); background: transparent;
}
@media (min-width: 1024px) { .burger { display: none; } }
.burger span {
    display: block; width: 22px; height: 1.5px; background: var(--c-text); border-radius: 2px;
    position: relative; transition: transform var(--t-base), background var(--t-base);
}
.burger span::before, .burger span::after {
    content: ''; position: absolute; left: 0; right: 0; height: 1.5px;
    background: var(--c-text); border-radius: 2px;
    transition: transform var(--t-base), top var(--t-base);
}
.burger span::before { top: -7px; }
.burger span::after  { top:  7px; }
.burger.is-open span { background: transparent; }
.burger.is-open span::before { top: 0; transform: rotate(45deg); }
.burger.is-open span::after  { top: 0; transform: rotate(-45deg); }

/* Mobile drawer */
.mobile-nav {
    position: fixed; inset: var(--header-h) 0 0 0; z-index: var(--z-overlay);
    background: #fff; padding: var(--s-6) var(--gutter);
    overflow-y: auto; transform: translateX(100%);
    transition: transform var(--t-slow) var(--ease-out);
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav__group + .mobile-nav__group { margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--c-border); }
.mobile-nav__title { font-family: var(--font-mono); font-size: var(--fs-12); font-weight: 400; text-transform: uppercase; letter-spacing: 0.12em; color: var(--c-text-mute); margin-bottom: var(--s-3); }
.mobile-nav__link { display: block; padding: 14px 0; font-size: var(--fs-20); font-weight: 600; color: var(--c-text); border-bottom: 1px solid var(--c-border); letter-spacing: -0.02em; }
.mobile-nav__link:hover { color: var(--c-accent-deep); }
.mobile-nav__cta { margin-top: var(--s-8); display: grid; gap: var(--s-3); }

/* --- 9. Hero --------------------------------------------------------------- */
.hero {
    position: relative; isolation: isolate; overflow: hidden;
    border-bottom: 1px solid var(--c-border);
}
/* Background photo strip */
.hero-bg {
    position: absolute; inset: 0; z-index: -2;
    background-size: cover; background-position: center right;
    opacity: 0.18;
    filter: grayscale(100%) contrast(105%);
}
/* White wash: keeps left side near-white for text legibility */
.hero-bg::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(100deg,
        #fff 0%, rgba(255,255,255,.96) 40%,
        rgba(255,255,255,.55) 70%,
        rgba(255,255,255,.30) 100%
    );
}
/* Faint magenta bloom top-right */
.hero-tint {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(800px 600px at 88% 30%,
        color-mix(in oklch, var(--c-accent) 12%, transparent), transparent 70%
    );
}

.hero__inner {
    display: grid; gap: clamp(2.5rem, 1rem + 4vw, 5rem);
    grid-template-columns: 1fr;
    align-items: center;
    padding: clamp(5rem, 3.5rem + 5vw, 8rem) 0 clamp(4rem, 2.5rem + 4vw, 6.5rem);
}
@media (min-width: 1024px) { .hero__inner { grid-template-columns: 1.25fr 1fr; } }

.hero__content { max-width: 680px; }

/* Eyebrow pill */
.hero .eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 12px 6px 8px;
    border: 1px solid var(--c-border); border-radius: var(--r-pill);
    color: var(--c-text-soft);
    margin-bottom: var(--s-7);
    font-size: 11px; letter-spacing: 0.14em;
}
.hero .eyebrow .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--c-accent);
    box-shadow: 0 0 0 4px color-mix(in oklch, var(--c-accent) 18%, transparent);
}

.hero__heading {
    font-family: var(--font-sans); font-weight: 600;
    font-size: clamp(56px, 7vw, 96px);
    letter-spacing: -0.04em; line-height: 0.96;
    margin: 0 0 var(--s-7); color: var(--ink-900); text-wrap: balance;
}
.hero__heading .accent {
    color: var(--c-accent); position: relative;
}
.hero__heading .accent::after {
    content: ''; position: absolute;
    left: -2%; right: -2%; bottom: -6px; height: 8px;
    background: var(--c-accent-tint); border-radius: var(--r-pill);
    z-index: -1; transform-origin: left center; transform: scaleX(0);
    animation: drawUnderline 1.1s cubic-bezier(.65,.05,.36,1) 0.95s forwards;
}
.hero__sub {
    font-size: 19px; line-height: 1.55; color: var(--c-text-soft);
    max-width: 520px; margin: 0 0 var(--s-10); text-wrap: pretty;
}
.hero__ctas { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* Trust strip */
.hero__trust {
    margin-top: clamp(2.5rem, 1.5rem + 2vw, 4rem);
    padding-top: var(--s-7);
    border-top: 1px solid var(--c-border);
    display: flex; gap: var(--s-12); flex-wrap: wrap;
}
.hero__trust > div { display: flex; flex-direction: column; gap: 6px; }
.hero__trust .stars { color: var(--c-accent); letter-spacing: 2px; }
.hero__trust .trust-num {
    font-weight: 600; font-size: 28px; letter-spacing: -0.025em;
    color: var(--ink-900); line-height: 1;
}
.hero__trust .trust-lbl {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--c-text-mute);
}

/* Hero form card (kept for functional use) */
.hero__card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: clamp(1.5rem, 1rem + 1.5vw, 2rem);
    box-shadow: var(--shadow-lg);
    position: relative; color: var(--c-text-soft);
}
.hero__card::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
    background: linear-gradient(135deg, var(--c-accent) 0%, transparent 50%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events: none;
}
.hero__card__title { font-size: var(--fs-h4); color: var(--ink-900); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; }
.hero__card__sub { color: var(--c-text-soft); font-size: var(--fs-14); margin-top: var(--s-2); }

/* Hero stage — concentric rings + card stack */
.hero-stage {
    position: relative; height: clamp(420px, 50vw, 560px);
    display: flex; align-items: center; justify-content: center;
}
.rings {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}
.ring {
    position: absolute; border-radius: 50%;
    border: 1px solid var(--c-border);
    animation: ringFade 1.2s cubic-bezier(.2,.7,.2,1) both;
}
.ring.r1 { width: 220px; height: 220px; animation-delay: 0.25s; }
.ring.r2 { width: 340px; height: 340px; animation-delay: 0.40s; }
.ring.r3 { width: 460px; height: 460px; border-style: dashed; animation-delay: 0.55s; }
.ring.r4 { width: 580px; height: 580px; opacity: .55; animation-delay: 0.70s; }
.ring.r1 { animation: ringFade 1.2s cubic-bezier(.2,.7,.2,1) 0.25s both, breathe 6s ease-in-out 1.4s infinite; }
.ring.r2 { animation: ringFade 1.2s cubic-bezier(.2,.7,.2,1) 0.40s both, breathe 7s ease-in-out 1.6s infinite reverse; }
.ring-dot {
    position: absolute; width: 12px; height: 12px; border-radius: 50%;
    background: var(--c-accent);
    box-shadow: 0 0 0 6px color-mix(in oklch, var(--c-accent) 12%, transparent);
}
.orbit {
    position: absolute; width: 460px; height: 460px;
    animation: spin 40s linear infinite;
}
.orbit .ring-dot { top: 50%; right: -6px; transform: translateY(-50%); }

/* Case card stack */
.card-stack {
    position: relative; width: clamp(280px, 32vw, 360px); transform-style: preserve-3d;
}
.case-card {
    background: #fff; border: 1px solid var(--c-border); border-radius: 4px;
    padding: 22px 22px 20px;
    box-shadow: 0 24px 48px -16px rgba(17,17,20,.18), 0 4px 12px -4px rgba(17,17,20,.10);
    position: relative; backdrop-filter: blur(2px);
}
.case-card + .case-card { margin-top: -8px; }
.case-card.front { animation: rise 1s cubic-bezier(.2,.7,.2,1) 0.5s both, float 7s ease-in-out 1.6s infinite; z-index: 3; }
.case-card.behind-1 {
    transform: translateY(-8px) translateX(14px) rotate(2deg); opacity: .75;
    animation: rise 1s cubic-bezier(.2,.7,.2,1) 0.35s both, floatBehind1 7s ease-in-out 1.6s infinite; z-index: 1;
}
.case-card.behind-2 {
    transform: translateY(-16px) translateX(28px) rotate(4deg); opacity: .45;
    animation: rise 1s cubic-bezier(.2,.7,.2,1) 0.2s both, floatBehind2 7s ease-in-out 1.6s infinite; z-index: 0;
}
.case-card .case-id {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--c-text-mute);
}
.case-card .case-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
    text-transform: uppercase; padding: 5px 9px; border-radius: var(--r-pill);
    background: color-mix(in oklch, var(--c-accent) 10%, white);
    color: var(--c-accent-deep);
}
.case-card .case-badge .pulse {
    width: 5px; height: 5px; border-radius: 50%; background: var(--c-accent);
    animation: pulseAnim 1.6s ease-in-out infinite;
}
.case-card .case-title {
    font-weight: 600; font-size: 18px; letter-spacing: -0.02em; line-height: 1.15;
    color: var(--ink-900); margin: var(--s-3) 0 var(--s-2);
}
.case-card .case-meta { font-size: 13px; color: var(--c-text-soft); margin-bottom: var(--s-5); }
.case-card .case-progress { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin-bottom: 10px; }
.case-card .prog-step { height: 4px; border-radius: 2px; background: var(--gray-200); }
.case-card .prog-step.done  { background: var(--ink-900); }
.case-card .prog-step.active{ background: var(--c-accent); }
.case-card .prog-labels {
    display: grid; grid-template-columns: repeat(4,1fr); gap: 6px;
    font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--c-text-mute);
}
.case-card .prog-labels .active { color: var(--c-accent-deep); }
.case-card .prog-labels .done  { color: var(--ink-700); }
.case-card .case-foot {
    margin-top: var(--s-5); padding-top: var(--s-4);
    border-top: 1px solid var(--c-border);
    display: flex; justify-content: space-between; align-items: center;
}
.case-card .case-recovery { font-weight: 600; font-size: 24px; letter-spacing: -0.025em; color: var(--ink-900); }
.case-card .case-next { text-align: right; font-size: 12px; color: var(--c-text-soft); }
.case-card .case-next b { color: var(--ink-900); display: block; font-weight: 600; }

/* Stat strip */
.stat-strip {
    background: transparent;
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
    padding: var(--s-7) 0;
    display: grid; gap: var(--s-8); grid-template-columns: 1fr;
    margin-top: var(--s-12);
}
@media (min-width: 720px)  { .stat-strip { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .stat-strip { grid-template-columns: repeat(4,1fr); gap: var(--s-4); } }
.stat-strip__item {
    display: flex; flex-direction: column; gap: 6px;
}
.stat-strip__num {
    font-family: var(--font-sans); font-weight: 600;
    font-size: clamp(1.75rem, 1rem + 2vw, 2.5rem);
    color: var(--ink-900); line-height: 1; letter-spacing: -0.025em;
}
.stat-strip__lbl {
    font-family: var(--font-mono); font-size: 11px;
    color: var(--c-text-mute); letter-spacing: 0.08em; text-transform: uppercase;
}

/* --- 10. Section header ---------------------------------------------------- */
.section-head { max-width: 760px; margin-bottom: var(--s-12); }
.section-head--centered { margin-inline: auto; text-align: center; }
.section-head__title { font-size: var(--fs-h2); margin: var(--s-4) 0 var(--s-4); color: var(--ink-900); }
.section-head__sub { color: var(--c-text-soft); font-size: var(--fs-18); line-height: var(--lh-relaxed); }

/* --- 11. Claim grid -------------------------------------------------------- */
.claim-grid { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 720px)  { .claim-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .claim-grid { grid-template-columns: repeat(3,1fr); } }

.claim-card {
    --card-accent: var(--c-accent);
    --card-tint:   var(--c-accent-tint);
    display: flex; flex-direction: column; gap: var(--s-3);
    padding: var(--s-7);
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
    text-decoration: none; color: inherit;
    position: relative; overflow: hidden;
}
.claim-card::before {
    content: ''; position: absolute; inset: auto 0 0 0; height: 2px;
    background: var(--card-accent);
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--t-slow) var(--ease-out);
}
.claim-card:hover { transform: translateY(-3px); border-color: var(--c-text); box-shadow: var(--shadow-md); }
.claim-card:hover::before { transform: scaleX(1); }
.claim-card__icon { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--card-tint); display: inline-flex; align-items: center; justify-content: center; color: var(--card-accent); }
.claim-card__title { font-size: var(--fs-h5); color: var(--ink-900); font-weight: 600; letter-spacing: -0.02em; margin-top: var(--s-2); line-height: 1.05; }
.claim-card__desc  { color: var(--c-text-soft); font-size: var(--fs-15); line-height: var(--lh-base); }
.claim-card__link {
    margin-top: auto; padding-top: var(--s-4);
    display: inline-flex; align-items: center; gap: 0.4em;
    font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-12);
    color: var(--ink-900); letter-spacing: 0.08em; text-transform: uppercase;
}
.claim-card__link::after { content: '\2192'; transition: transform var(--t-base); }
.claim-card:hover .claim-card__link::after { transform: translateX(4px); }

/* All claim-card types now use single magenta accent for clean identity */
.claim-card--rta,
.claim-card--work,
.claim-card--medical,
.claim-card--public,
.claim-card--industrial,
.claim-card--cica,
.claim-card--injury,
.claim-card--location {
    --card-accent: var(--c-accent);
    --card-tint:   var(--c-accent-tint);
}

/* --- 12. Process steps ----------------------------------------------------- */
.steps { display: grid; gap: var(--s-8); grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 720px)  { .steps { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(5,1fr); gap: var(--s-5); } }

.step { counter-increment: step; padding: var(--s-5) 0; position: relative; border-top: 1px solid var(--c-border); }
.step__num {
    display: block;
    font-family: var(--font-mono); font-size: var(--fs-12);
    color: var(--c-text-mute); margin-bottom: var(--s-4);
    letter-spacing: 0.08em;
}
.step__num::before { content: '0' counter(step); color: var(--c-accent); font-weight: 600; margin-right: 8px; }
.step__title { font-size: var(--fs-h5); margin-bottom: var(--s-2); color: var(--ink-900); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; }
.step__desc  { color: var(--c-text-soft); font-size: var(--fs-15); line-height: var(--lh-base); }

/* --- 13. Trust row --------------------------------------------------------- */
.trust-row {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: var(--s-8); padding: var(--s-6) 0;
    border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border);
    color: var(--c-text-mute);
}
.trust-row__item { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-13); font-weight: 500; letter-spacing: 0.06em; }

/* --- 14. FAQ accordion ----------------------------------------------------- */
.faq { border-top: 1px solid var(--c-border); }
.faq__item { border-bottom: 1px solid var(--c-border); }
.faq__item.is-open { }
.faq__q {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-4); padding: var(--s-6) 0;
    text-align: left; font-family: var(--font-sans); font-size: var(--fs-h5);
    color: var(--ink-900); background: none; border: 0; cursor: pointer;
    line-height: 1.25; font-weight: 600; letter-spacing: -0.02em;
    transition: color var(--t-fast);
}
.faq__q:hover { color: var(--c-accent-deep); }
.faq__q::after {
    content: ''; flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
    border: 1px solid var(--c-border);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='%23111114' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 1v8M1 5h8'/%3E%3C/svg%3E") center/12px no-repeat, var(--c-surface);
    transition: transform var(--t-base), background var(--t-base), border-color var(--t-base);
}
.faq__item.is-open .faq__q { color: var(--c-accent-deep); }
.faq__item.is-open .faq__q::after {
    transform: rotate(45deg); border-color: var(--c-accent);
    background-color: var(--c-accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 1v8M1 5h8'/%3E%3C/svg%3E");
}
.faq__a { max-height: 0; overflow: hidden; transition: max-height var(--t-slow) var(--ease-out); color: var(--c-text-soft); font-size: var(--fs-16); line-height: var(--lh-relaxed); }
.faq__item.is-open .faq__a { max-height: 1000px; }
.faq__a-inner { padding-bottom: var(--s-6); }

/* --- 15. CTA banner -------------------------------------------------------- */
.cta-banner {
    background: var(--ink-900); color: #fff;
    border-radius: var(--r-md); overflow: hidden; position: relative;
    padding: clamp(2rem, 1.5rem + 3vw, 4.5rem);
    isolation: isolate;
}
.cta-banner::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(900px 500px at 80% 50%,
        color-mix(in oklch, var(--c-accent) 30%, transparent), transparent 60%
    );
}
.cta-banner__grid { display: grid; gap: var(--s-6); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 720px) { .cta-banner__grid { grid-template-columns: 1.5fr 1fr; } }
.cta-banner h2 { color: #fff; font-size: var(--fs-h2); letter-spacing: -0.03em; line-height: 1.02; }
.cta-banner h2 em { color: var(--magenta-300); font-style: normal; }
.cta-banner p { color: rgba(255,255,255,.7); margin-top: var(--s-3); }
.cta-banner__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: flex-end; }
@media (max-width: 720px) { .cta-banner__actions { justify-content: flex-start; } }

/* Full-width CTA (page-level) */
.cta-banner--full {
    border-radius: 0; border-top: 1px solid var(--ink-900);
}

/* --- 16. Forms ------------------------------------------------------------ */
.form { display: grid; gap: var(--s-4); }
.form__row { display: grid; gap: var(--s-4); }
@media (min-width: 720px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.form__field { display: grid; gap: 6px; position: relative; }
.form__field label {
    font-family: var(--font-mono); font-size: var(--fs-12); font-weight: 400;
    color: var(--c-text-mute); letter-spacing: 0.1em; text-transform: uppercase;
}
.form__field input,
.form__field select,
.form__field textarea {
    width: 100%; padding: 12px 14px; font-size: var(--fs-15); font-family: var(--font-sans);
    background: #fff; color: var(--ink-900);
    border: 1px solid var(--c-border); border-radius: var(--r-sm);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form__field input::placeholder, .form__field textarea::placeholder { color: var(--c-text-mute); }
.form__field input:hover, .form__field select:hover, .form__field textarea:hover { border-color: var(--ink-900); }
.form__field input:focus,
.form__field select:focus,
.form__field textarea:focus {
    outline: none; border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-soft);
}
.form__field select {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px;
}
.form__field input[type="date"] { color-scheme: light; }
.form__field textarea { min-height: 120px; resize: vertical; }
.form__field--error input,
.form__field--error select,
.form__field--error textarea { border-color: var(--c-error); box-shadow: 0 0 0 3px rgba(220,38,38,.1); }
.form__error { color: var(--c-error); font-size: var(--fs-12); }
.form__hint  { color: var(--c-text-mute); font-size: var(--fs-12); }
.form__check { display: flex; align-items: flex-start; gap: var(--s-2); font-size: var(--fs-13); color: var(--c-text-soft); line-height: 1.5; }
.form__check input { margin-top: 2px; accent-color: var(--c-accent); width: 16px; height: 16px; flex-shrink: 0; }
.form__hp { position: absolute; left: -10000px; opacity: 0; pointer-events: none; }

/* Flash messages */
.flash { padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); font-size: var(--fs-14); }
.flash--ok    { background: var(--c-success-soft); color: var(--c-success); border: 1px solid rgba(16,185,129,.3); }
.flash--error { background: var(--c-error-soft);   color: var(--c-error);   border: 1px solid rgba(220,38,38,.3); }

/* --- 17. Breadcrumb -------------------------------------------------------- */
.breadcrumb {
    display: flex; flex-wrap: wrap; gap: 10px;
    font-family: var(--font-mono); font-size: var(--fs-12);
    color: var(--c-text-mute); padding: var(--s-4) 0;
    letter-spacing: 0.08em; text-transform: uppercase;
    align-items: center;
}
.breadcrumb a { color: var(--c-text-mute); transition: color var(--t-fast); }
.breadcrumb a:hover { color: var(--c-text); }
.breadcrumb__sep { opacity: .4; }
.breadcrumb [aria-current="page"] { color: var(--c-accent-deep); font-weight: 400; }

/* --- 18. Footer ------------------------------------------------------------ */
.site-footer {
    background: var(--gray-50);
    border-top: 1px solid var(--c-border);
    color: var(--c-text-mute);
    padding-block: var(--s-16) var(--s-8);
    margin-top: 0;
}
.site-footer h3 {
    font-family: var(--font-mono); font-size: var(--fs-12); font-weight: 400;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--c-text-mute); margin-bottom: var(--s-4);
}
.site-footer__cols { display: grid; gap: var(--s-8); grid-template-columns: 1fr; }
@media (min-width: 720px)  { .site-footer__cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
@media (min-width: 1024px) { .site-footer__cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.site-footer ul { list-style: none; }
.site-footer li + li { margin-top: 10px; }
.site-footer a { color: var(--c-text-soft); font-size: var(--fs-14); transition: color var(--t-fast); }
.site-footer a:hover { color: var(--ink-900); }
.site-footer__brand p { color: var(--c-text-soft); font-size: var(--fs-14); margin-top: var(--s-4); max-width: 36ch; line-height: var(--lh-relaxed); }
.site-footer__contact { font-size: var(--fs-14); display: grid; gap: 8px; margin-top: var(--s-5); }
.site-footer__contact a { color: var(--ink-900); font-weight: 500; }
.site-footer__contact a:hover { color: var(--c-accent-deep); }
.site-footer__legal {
    margin-top: var(--s-12); padding-top: var(--s-6);
    border-top: 1px solid var(--c-border);
    display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; align-items: center;
    font-family: var(--font-mono); font-size: var(--fs-12); color: var(--c-text-mute); letter-spacing: 0.04em;
}
.site-footer__legal-links { display: flex; gap: var(--s-5); flex-wrap: wrap; }

/* Brand mark in footer (same as header but no animation) */
.site-footer .brand-mark svg .mark-arc,
.site-footer .brand-mark svg .mark-sq { animation: none; }
.site-footer .site-header__logo .wordmark { color: var(--ink-900); }

/* --- 19. Sticky claim bar (mobile) ---------------------------------------- */
.sticky-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--ink-900); color: #fff; padding: 10px 14px;
    display: flex; gap: var(--s-2); justify-content: space-between; align-items: center;
    box-shadow: 0 -8px 24px rgba(0,0,0,.15);
}
.sticky-cta a { color: #fff; }
.sticky-cta .btn { padding: 0.7rem 1.1rem; font-size: var(--fs-13); }
@media (min-width: 1024px) { .sticky-cta { display: none; } }

/* --- 20. Reveal animations ------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--t-slower) var(--ease-out), transform var(--t-slower) var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal--delay-1 { transition-delay: 80ms; }
.reveal--delay-2 { transition-delay: 160ms; }
.reveal--delay-3 { transition-delay: 240ms; }

/* Scroll progress */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: var(--z-toast); pointer-events: none; background: var(--c-border); }
.scroll-progress__bar { height: 100%; background: var(--c-accent); width: 0%; transition: width 0.05s linear; }

/* --- 20b. Image blocks ----------------------------------------------------- */
.img-frame { position: relative; overflow: hidden; border-radius: var(--r-sm); background: var(--gray-100); }
.img-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-frame--tall   { aspect-ratio: 3 / 4; }
.img-frame--wide   { aspect-ratio: 16 / 10; }
.img-frame--square { aspect-ratio: 1 / 1; }
.img-frame--tinted::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(17,17,20,.1) 0%, rgba(17,17,20,.65) 100%);
}
.img-frame--duotone img { filter: grayscale(100%) contrast(105%); }
.img-frame__tag {
    position: absolute; left: 14px; top: 14px; z-index: 2;
    font-family: var(--font-mono); font-size: var(--fs-12);
    text-transform: uppercase; letter-spacing: 0.08em;
    padding: 5px 10px; background: var(--ink-900); color: #fff;
    border-radius: var(--r-sm);
}
.img-frame__caption {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: var(--s-6);
    color: #fff; font-weight: 600; font-size: var(--fs-h5); letter-spacing: -0.02em; line-height: 1.1;
}

/* Full-bleed image strip */
.img-strip {
    position: relative; height: clamp(320px, 50vh, 560px);
    overflow: hidden; isolation: isolate;
}
.img-strip img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) contrast(105%); }
.img-strip::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(17,17,20,.2) 0%, rgba(17,17,20,.75) 100%);
}
.img-strip::after {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 40%; z-index: 1;
    background: radial-gradient(600px 400px at 90% 30%,
        color-mix(in oklch, var(--c-accent) 30%, transparent), transparent 60%
    );
}
.img-strip__content {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: clamp(2rem, 1.5rem + 2vw, 4rem) var(--gutter);
    max-width: 880px;
}

/* Quote/testimonial block */
.quote-block { display: grid; gap: var(--s-8); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .quote-block { grid-template-columns: 1fr 1.3fr; gap: var(--s-12); } }
.quote-block__media { aspect-ratio: 4 / 5; }
.quote-block__body blockquote {
    font-size: clamp(1.25rem, 1rem + 1.2vw, 1.875rem);
    line-height: 1.35; color: var(--ink-900);
    letter-spacing: -0.02em; margin: 0; font-style: italic; font-weight: 400;
    position: relative;
}
.quote-block__body blockquote::before {
    content: '"'; display: block; font-size: clamp(3rem, 2rem + 3vw, 5rem);
    color: var(--c-accent); line-height: 0.7; margin-bottom: var(--s-4);
    font-style: normal;
}
.quote-block__body cite {
    display: block; margin-top: var(--s-5);
    font-family: var(--font-mono); font-size: var(--fs-13); letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--c-text-mute); font-style: normal;
}

/* Feature split */
.feature-split { display: grid; gap: var(--s-8); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) {
    .feature-split { grid-template-columns: 1fr 1fr; gap: var(--s-12); }
    .feature-split--wide { grid-template-columns: 1.15fr 1fr; }
    .feature-split--reverse > :first-child { order: 2; }
}

/* Inner page hero */
.inner-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--c-border); isolation: isolate; min-height: 560px; }
.inner-hero .hero-bg { opacity: .18; }
.inner-hero .hero-tint { z-index: 0; }
.inner-hero .hero__inner { padding: 36px 0 80px; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .inner-hero .hero__inner { grid-template-columns: 1.45fr 1fr; } }

/* Sub-nav */
.subnav { background: var(--gray-50); border-bottom: 1px solid var(--c-border); }
.subnav-inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); display: flex; gap: var(--s-6); overflow-x: auto; }
.subnav a { flex-shrink: 0; padding: 16px 0; font-size: var(--fs-14); font-weight: 500; color: var(--c-text-soft); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: color var(--t-fast), border-color var(--t-fast); }
.subnav a:hover { color: var(--c-text); }
.subnav a.active { color: var(--ink-900); border-bottom-color: var(--c-accent); font-weight: 600; }

/* --- 21. Utilities --------------------------------------------------------- */
.u-center   { text-align: center; }
.u-text-soft { color: var(--c-text-soft); }
.u-text-mute { color: var(--c-text-mute); }
.u-text-amber { color: var(--c-accent-darker); }
.u-bg-paper-2 { background: var(--gray-50); }
.u-bg-ink     { background: var(--ink-900); color: #fff; }
.u-shadow-md  { box-shadow: var(--shadow-md); }
.u-radius-lg  { border-radius: var(--r-lg); }
.u-mt-0  { margin-top: 0 !important; }
.u-mt-4  { margin-top: var(--s-4); }
.u-mt-6  { margin-top: var(--s-6); }
.u-mt-8  { margin-top: var(--s-8); }
.u-hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* --- 22. Print ------------------------------------------------------------- */
@media print {
    .site-header, .site-footer, .sticky-cta, .nav, .burger, .hero__card, .cta-banner { display: none !important; }
    body { background: #fff; color: #000; }
    .container, .container-narrow { max-width: none; }
}

/* --- 23. Brand mark animation ---------------------------------------------- */
/* .mark-arc: arc starts invisible (dashoffset = dasharray), then draws to 0  */
/* .mark-sq : square starts scale(0), then rises to scale(1)                  */
.mark-arc {
    stroke-dasharray: 113;
    stroke-dashoffset: 113;
    animation: draw 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}
.mark-sq {
    transform-origin: center;
    transform: scale(0);
    animation: rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) 1.5s forwards;
}
/* No animation in footer / nav (added via $animate = false in PHP) */
.site-footer .mark-arc { animation: none; stroke-dashoffset: 0; }
.site-footer .mark-sq  { animation: none; transform: scale(1); }

/* --- 24. Header — updated class names -------------------------------------- */
/* The new header.php uses .site-header__inner (full-width flex row)          */
/* and .site-header__actions instead of .site-header__cta                     */
.site-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    height: var(--header-h); gap: var(--s-6);
    max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter);
}

/* .site-header__actions = right-hand CTA zone */
.site-header__actions { display: none; align-items: center; gap: var(--s-4); }
@media (min-width: 1024px) { .site-header__actions { display: inline-flex; } }

/* .tel-link = phone number in nav */
.tel-link {
    display: inline-flex; align-items: center; gap: var(--s-2);
    font-weight: 600; font-size: var(--fs-14); color: var(--c-text); letter-spacing: 0.01em;
    text-decoration: none;
    transition: color var(--t-fast);
}
.tel-link:hover { color: var(--c-accent-deep); }
.tel-link svg { color: var(--c-accent); }

/* .burger__bar = individual bar element (instead of span::before/after) */
.burger__bar {
    display: block; width: 22px; height: 1.5px;
    background: var(--c-text); border-radius: 2px;
    transition: transform var(--t-base), opacity var(--t-base);
}
.burger { display: flex; flex-direction: column; align-items: center;
          justify-content: center; gap: 6px; width: 44px; height: 44px; }
@media (min-width: 1024px) { .burger { display: none; } }
.burger.is-open .burger__bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger.is-open .burger__bar:nth-child(2) { opacity: 0; }
.burger.is-open .burger__bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Mobile nav with new structure (.mobile-nav__head, __links, __close) */
.mobile-nav__head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: var(--s-6); border-bottom: 1px solid var(--c-border);
    margin-bottom: var(--s-4);
}
.mobile-nav__close {
    width: 40px; height: 40px; border-radius: var(--r-sm);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--c-text-soft); border: 1px solid var(--c-border);
    transition: color var(--t-fast), border-color var(--t-fast);
}
.mobile-nav__close:hover { color: var(--c-accent); border-color: var(--c-accent); }
.mobile-nav__links { display: grid; }
.mobile-nav .mobile-nav__link { display: block; padding: 14px 0; font-size: var(--fs-20);
    font-weight: 600; color: var(--c-text); border-bottom: 1px solid var(--c-border);
    letter-spacing: -0.02em; }
.mobile-nav .mobile-nav__link:hover { color: var(--c-accent-deep); }

/* --- 25. Footer — updated class names -------------------------------------- */
.site-footer__grid {
    display: grid; gap: var(--s-8); grid-template-columns: 1fr;
}
@media (min-width: 720px)  { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; } }

.site-footer__col-heading {
    font-family: var(--font-mono); font-size: var(--fs-12); font-weight: 400;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--c-text-mute); margin-bottom: var(--s-4);
}
.site-footer__col-links { list-style: none; }
.site-footer__col-links li + li { margin-top: 10px; }
.site-footer__col-links a {
    color: var(--c-text-soft); font-size: var(--fs-14);
    transition: color var(--t-fast); text-decoration: none;
}
.site-footer__col-links a:hover { color: var(--ink-900); }

.site-footer__logo {
    display: inline-flex; align-items: center; gap: 10px;
    color: var(--ink-900); text-decoration: none; margin-bottom: var(--s-5);
}
.site-footer__logo img { height: 28px; width: auto; }
.site-footer__logo .wordmark { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.02em; }

.site-footer__desc {
    color: var(--c-text-soft); font-size: var(--fs-14);
    max-width: 34ch; line-height: var(--lh-relaxed);
}
.site-footer__copy {
    font-family: var(--font-mono); font-size: var(--fs-12);
    color: var(--c-text-mute); letter-spacing: 0.04em;
}
.site-footer__disclaimer {
    color: var(--c-text-mute); font-size: 13px; line-height: 1.65;
    margin-top: var(--s-12); max-width: 90ch;
}

/* --- 26. Hero visual (right-column ring + card stack) ---------------------- */
/* Replaces the form card with a decorative visual                            */
.hero__visual {
    position: relative;
    height: clamp(380px, 48vw, 540px);
    display: flex; align-items: center; justify-content: center;
}
.hero__visual .rings {
    /* rings are absolutely positioned inside, centred */
}
.hero__visual .card-stack {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    pointer-events: none;
}
.hero__visual .case-card {
    position: absolute;
    width: clamp(200px, 24vw, 280px);
    pointer-events: none;
}

/* Simplified case-card anatomy for home.php floaters */
.case-card__eyebrow {
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--c-accent-deep); margin-bottom: 6px;
}
.case-card__amount {
    font-family: var(--font-sans); font-weight: 700;
    font-size: clamp(1.125rem, 1rem + 0.8vw, 1.5rem);
    letter-spacing: -0.03em; color: var(--ink-900); line-height: 1.1;
}
.case-card__label {
    font-size: 12px; color: var(--c-text-mute);
    margin-top: 4px;
}
.case-card__dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--c-accent); margin-top: 10px;
    box-shadow: 0 0 0 4px color-mix(in oklch, var(--c-accent) 18%, transparent);
    animation: pulseAnim 2s ease-in-out infinite;
}

/* Central CTA inside visual */
.hero__visual-cta {
    position: absolute; z-index: 10;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
}

/* --- 27. Eyebrow pill (new format used in hero) ----------------------------- */
/* Replaces old .hero .eyebrow — bordered pill with pulse dot                 */
.eyebrow-pill {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 14px 6px 10px;
    border: 1px solid var(--c-border); border-radius: var(--r-pill);
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--c-text-soft); margin-bottom: var(--s-7);
    background: transparent;
}
.eyebrow-pill::before {
    content: '';
    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
    background: var(--c-accent);
    box-shadow: 0 0 0 4px color-mix(in oklch, var(--c-accent) 18%, transparent);
    animation: pulseAnim 2.5s ease-in-out infinite;
}

/* --- 28. Hero trust strip (new markup) ------------------------------------- */
.hero__trust { margin-top: clamp(2.5rem, 1.5rem + 2vw, 4rem); padding-top: var(--s-6); border-top: 1px solid var(--c-border); display: flex; gap: var(--s-7); flex-wrap: wrap; align-items: center; }
.hero__trust-item { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-13); color: var(--c-text-soft); font-weight: 500; }
.hero__trust-item svg { color: var(--c-accent); flex-shrink: 0; }
.hero__trust-stars { color: var(--c-accent); letter-spacing: 2px; font-size: var(--fs-14); }