/* ブラック企業情報データベース — v10.0
   Direction: "DARK FILE" — 暗室調査室
   Skills: ui-ux-pro-max + frontend-design
   完全書き直し: 色・フォント・明暗・形状・レイアウト全DNAを刷新
*/

/* ══════════════════════════════════════════════════
   DESIGN TOKENS
   ══════════════════════════════════════════════════ */

:root {
    /* ── Fonts ── */
    --font-display: 'Zen Antique Soft', Georgia, serif;
    --font-body:    'M PLUS 2', 'Noto Sans JP', sans-serif;
    --font-mono:    'JetBrains Mono', 'Consolas', monospace;

    /* ── Dark Color System ── */
    --bg:           #0a0c12;
    --surface:      #12161e;
    --surface-hi:   #1a1f2d;
    --surface-lo:   #080a0f;

    --amber:        #e8a000;
    --amber-dim:    #c07800;
    --amber-glow:   rgba(232, 160, 0, 0.10);
    --amber-border: rgba(232, 160, 0, 0.30);

    --chalk:        #e0ddd5;
    --chalk-dim:    #9a9590;
    --chalk-faint:  #5a5550;

    --border:       rgba(255, 255, 255, 0.08);
    --border-hi:    rgba(255, 255, 255, 0.14);

    --alert:        #e05050;
    --alert-bg:     rgba(224, 80, 80, 0.09);
    --alert-border: rgba(224, 80, 80, 0.35);

    --warn:         #e08000;
    --warn-bg:      rgba(224, 128, 0, 0.09);

    --blue:         #5b8fcc;
    --blue-visited: #7a7faa;

    /* ── Spacing (8dp rhythm – ui-ux-pro-max §5) ── */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
    --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

    /* ── Layout ── */
    --max-w:  860px;
    --max-sm: 680px;
    --gutter: 28px;
    --radius: 0px;    /* シャープエッジ – no softness */

    /* ── Shadows ── */
    --shadow-card:  0 0 0 1px var(--border);
    --shadow-hover: 0 0 0 1px var(--amber-border), 0 4px 24px var(--amber-glow);
    --shadow-float: 0 8px 32px rgba(0, 0, 0, 0.5);

    /* ── Animation ── */
    --ease:    cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast: 150ms;
    --dur-mid:  220ms;
}

/* ── CSS Counter: 調査セクション番号 ── */
body { counter-reset: section; }

/* ══════════════════════════════════════════════════
   BASE RESET
   ══════════════════════════════════════════════════ */

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

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.8;
    color: var(--chalk);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Skip Link (ui-ux-pro-max §1 skip-links) ── */
.skip-link {
    position: absolute; top: -100%; left: var(--gutter); z-index: 1000;
    padding: var(--sp-2) var(--sp-4);
    background: var(--amber); color: var(--bg);
    font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600;
    text-decoration: none;
    transition: top var(--dur-fast);
}
.skip-link:focus { top: var(--sp-2); }

/* ══════════════════════════════════════════════════
   LAYOUT
   ══════════════════════════════════════════════════ */

.container    { max-width: var(--max-w);  margin: 0 auto; padding: 0 var(--gutter); }
.container-sm { max-width: var(--max-sm); margin: 0 auto; padding: 0 var(--gutter); }

/* ══════════════════════════════════════════════════
   HEADER — amber top-rule + deep dark
   ══════════════════════════════════════════════════ */

.site-header {
    background: var(--surface-lo);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 100;
}

.header-top-rule { height: 2px; background: var(--amber); }

.header-container {
    max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter);
    display: flex; justify-content: space-between; align-items: center;
    gap: var(--sp-4); height: 56px;
}

.brand-logo {
    font-family: var(--font-display);
    font-size: 1.1rem; font-weight: 400;
    color: var(--amber); text-decoration: none;
    letter-spacing: 0.06em;
    transition: opacity var(--dur-fast);
    flex-shrink: 0;
}
.brand-logo:hover { opacity: 0.8; color: var(--amber); text-decoration: none; }

.main-nav { display: flex; gap: 0; }

.nav-link {
    color: var(--chalk-dim); text-decoration: none;
    padding: 0 14px; height: 56px;
    display: inline-flex; align-items: center;
    font-family: var(--font-mono); font-size: 0.75rem; font-weight: 400;
    letter-spacing: 0.06em; text-transform: uppercase;
    border-bottom: 2px solid transparent;
    transition: color var(--dur-fast), border-color var(--dur-fast);
}
.nav-link:hover { color: var(--chalk); text-decoration: none; }
.nav-link.active {
    color: var(--amber);
    border-bottom-color: var(--amber);
}
.nav-link:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }

/* ══════════════════════════════════════════════════
   HERO — full dark, cinematic
   ══════════════════════════════════════════════════ */

.site-hero {
    background: var(--surface-lo);
    border-bottom: 1px solid var(--border);
    padding: var(--sp-16) 0 var(--sp-12);
    min-height: 52vh;
    display: flex; align-items: flex-end;
}

.hero-eyebrow {
    display: block;
    font-family: var(--font-mono); font-size: 0.6875rem;
    color: var(--amber); letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: var(--sp-4);
}

.site-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 3rem);
    font-weight: 400; line-height: 1.2;
    letter-spacing: 0.03em;
    color: var(--chalk);
    margin-bottom: var(--sp-4);
}

.site-hero .lead {
    font-size: 0.9375rem;
    color: var(--chalk-dim);
    line-height: 1.8; max-width: 540px;
    margin-bottom: var(--sp-8);
}

/* Hero Stats */
.hero-stats {
    display: flex; gap: var(--sp-8); flex-wrap: wrap;
    padding-top: var(--sp-6);
    border-top: 1px solid var(--border);
}

.hero-stat { display: flex; flex-direction: column; gap: 2px; }

.hero-stat-number {
    font-family: var(--font-mono);
    font-size: 1.75rem; font-weight: 600;
    color: var(--amber); line-height: 1;
    letter-spacing: -0.01em;
}

.hero-stat-label {
    font-family: var(--font-mono); font-size: 0.6875rem;
    color: var(--chalk-faint); letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ══════════════════════════════════════════════════
   MAIN CONTENT AREA
   ══════════════════════════════════════════════════ */

.main-content-area { padding: var(--sp-12) 0 var(--sp-20); }

/* ══════════════════════════════════════════════════
   TYPOGRAPHY
   ══════════════════════════════════════════════════ */

h1, h2, h3, h4 { line-height: 1.3; color: var(--chalk); }

h1 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 400;
    margin-bottom: var(--sp-4); letter-spacing: 0.03em;
}

/* セクション見出し — CSS counter で番号付与 */
h2 {
    font-family: var(--font-display);
    font-size: 1.25rem; font-weight: 400;
    letter-spacing: 0.04em;
    margin-top: var(--sp-12); margin-bottom: var(--sp-5);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--amber-border);
    color: var(--chalk);
    counter-increment: section;
}

h3 {
    font-family: var(--font-display);
    font-size: 1.0625rem; font-weight: 400;
    margin-top: var(--sp-6); margin-bottom: var(--sp-3);
    color: var(--chalk);
}

h4 {
    font-size: 0.9375rem; font-weight: 600;
    margin-top: var(--sp-4); margin-bottom: var(--sp-2);
    color: var(--chalk-dim); letter-spacing: 0.04em;
    text-transform: uppercase; font-family: var(--font-mono);
}

p { margin-bottom: var(--sp-4); color: var(--chalk-dim); }
p:last-child { margin-bottom: 0; }

ul, ol { padding-left: 20px; color: var(--chalk-dim); }
li { margin-bottom: var(--sp-1); }
strong { font-weight: 700; color: var(--chalk); }
em { color: var(--amber); font-style: normal; }

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--chalk); text-decoration: underline; text-decoration-color: var(--amber-border); }
a:visited { color: var(--blue-visited); }

/* ── Breadcrumb ── */
.breadcrumb { margin-bottom: var(--sp-6); }
.breadcrumb ol {
    list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2);
    font-family: var(--font-mono); font-size: 0.75rem; color: var(--chalk-faint);
    letter-spacing: 0.04em;
}
.breadcrumb li::after { content: "›"; margin-left: var(--sp-2); }
.breadcrumb li:last-child::after { content: ""; }
.breadcrumb a { color: var(--chalk-faint); }
.breadcrumb a:hover { color: var(--amber); text-decoration: none; }

/* ══════════════════════════════════════════════════
   REPORT LIST —調査報告カード
   ══════════════════════════════════════════════════ */

.report-list { margin-top: var(--sp-5); }

.report-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 2px solid var(--amber-border);
    padding: var(--sp-6);
    margin-bottom: var(--sp-3);
    transition: background var(--dur-mid) var(--ease),
                border-color var(--dur-mid) var(--ease),
                box-shadow var(--dur-mid) var(--ease);
}
.report-item:hover {
    background: var(--surface-hi);
    border-left-color: var(--amber);
    box-shadow: var(--shadow-hover);
}

.report-item time {
    font-family: var(--font-mono); font-size: 0.6875rem;
    color: var(--chalk-faint); letter-spacing: 0.08em;
}

.report-item h3 {
    margin-top: var(--sp-2);
    font-size: 1.375rem; font-weight: 400;
    font-family: var(--font-display);
    line-height: 1.3;
}
.report-item h3 a { color: var(--chalk); text-decoration: none; }
.report-item h3 a:hover { color: var(--amber); text-decoration: none; }

.report-item .desc {
    font-size: 0.875rem; color: var(--chalk-dim);
    margin: var(--sp-3) 0; line-height: 1.8;
}

.report-item .labels { margin: var(--sp-3) 0 var(--sp-2); }

.read-more {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: var(--sp-2);
    font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600;
    color: var(--amber); text-decoration: none;
    letter-spacing: 0.08em; text-transform: uppercase;
    transition: gap var(--dur-fast) var(--ease), color var(--dur-fast);
}
.read-more:hover { gap: 12px; color: var(--chalk); text-decoration: none; }

/* ── Tags ── */
.tag-pill {
    display: inline-block;
    background: var(--amber-glow); border: 1px solid var(--amber-border);
    padding: 2px 10px; margin: 2px 4px 2px 0;
    font-family: var(--font-mono); font-size: 0.65rem;
    color: var(--amber); letter-spacing: 0.06em;
}
.tag-list, .case-tags, .labels { font-size: 0.75rem; color: var(--chalk-faint); margin: var(--sp-2) 0 var(--sp-4); }

/* ══════════════════════════════════════════════════
   CASE CARDS — 証拠・事実カード
   ══════════════════════════════════════════════════ */

.case-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border-hi);
    padding: var(--sp-5);
    margin: var(--sp-4) 0;
    transition: box-shadow var(--dur-fast);
}
.case-card:hover { box-shadow: 0 0 0 1px var(--border-hi); }

.case-card h3 {
    font-family: var(--font-mono); font-size: 0.8125rem;
    font-weight: 600; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--chalk-dim);
    margin-top: 0; margin-bottom: var(--sp-3);
}

.case-card--info    { border-left-color: var(--amber); }
.case-card--warning { border-left-color: var(--warn);  background: var(--warn-bg); }
.case-card--danger  { border-left-color: var(--alert); background: var(--alert-bg); }
.case-card--neutral { border-left-color: var(--chalk-faint); }
.case-card--blue    { border-left-color: var(--blue); }

.card-stack { margin: 0; }
.card-title { font-size: 0.9375rem; font-weight: 700; color: var(--chalk); margin-bottom: var(--sp-2); }
.card-body  { font-size: 0.875rem; color: var(--chalk-dim); }

/* ══════════════════════════════════════════════════
   BLOCKQUOTE / TESTIMONY — 証言
   ══════════════════════════════════════════════════ */

blockquote, .testimony {
    border-left: 2px solid var(--amber);
    padding: var(--sp-4) var(--sp-5);
    margin: var(--sp-6) 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    color: var(--chalk-dim);
    font-size: 0.9375rem; line-height: 1.85;
    font-style: normal;
}

/* ── Damage Summary ── */
.damage-summary {
    border-left: 3px solid var(--alert);
    padding: var(--sp-5) var(--sp-6);
    margin: var(--sp-6) 0;
    background: var(--alert-bg);
    border-top: 1px solid var(--alert-border);
    border-bottom: 1px solid var(--alert-border);
    border-right: 1px solid var(--alert-border);
}
.damage-summary h3 {
    margin-top: 0; font-size: 0.875rem; font-weight: 600;
    font-family: var(--font-mono); letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--alert);
    padding: 0; border: none;
}
.damage-summary p { font-size: 0.875rem; color: var(--chalk-dim); }

/* ── Legal Note ── */
.legal-note {
    background: var(--surface-hi);
    border: 1px solid var(--border);
    border-left: 2px solid var(--chalk-faint);
    padding: var(--sp-4) var(--sp-5);
    margin: var(--sp-5) 0;
    font-size: 0.875rem; color: var(--chalk-dim);
}
.legal-note h4 { color: var(--chalk-dim); text-transform: none; letter-spacing: 0; font-family: var(--font-display); font-weight: 400; font-size: 0.9375rem; margin-bottom: var(--sp-2); }
.legal-note h5 { color: var(--chalk-dim); text-transform: none; font-family: var(--font-body); font-weight: 600; font-size: 0.8125rem; margin-top: var(--sp-4); margin-bottom: var(--sp-2); }
.legal-note p  { color: var(--chalk-dim); margin: 0; }

.fact {
    border-left: 2px solid var(--chalk-faint);
    padding-left: var(--sp-4); margin: var(--sp-4) 0;
    color: var(--chalk-dim);
}

/* ── Testimony Meta ── */
.testimony-meta {
    display: flex; flex-wrap: wrap; gap: var(--sp-5);
    margin-top: var(--sp-3); padding-top: var(--sp-3);
    border-top: 1px solid var(--border);
    font-size: 0.8125rem;
}
.testimony-meta > div  { display: flex; flex-direction: column; gap: 2px; }
.testimony-meta dt     { font-family: var(--font-mono); font-size: 0.625rem; color: var(--chalk-faint); text-transform: uppercase; letter-spacing: 0.1em; }
.testimony-meta dd     { font-weight: 600; color: var(--chalk); margin: 0; }
.testimony-meta .meta-danger dd { color: var(--alert); }

/* ── Report Content / Info ── */
.report-content { padding: 0; }
.report-info    { font-size: 0.875rem; color: var(--chalk-dim); margin-bottom: var(--sp-6); line-height: 1.8; }
.report-meta    { font-family: var(--font-mono); font-size: 0.75rem; color: var(--chalk-faint); margin-bottom: var(--sp-4); letter-spacing: 0.04em; }
.section-block  { margin-bottom: var(--sp-12); }

/* ══════════════════════════════════════════════════
   SECTION TITLE (サブページ)
   ══════════════════════════════════════════════════ */

.section-title {
    font-family: var(--font-display);
    font-size: 1.25rem; font-weight: 400;
    letter-spacing: 0.04em;
    margin-top: var(--sp-12); margin-bottom: var(--sp-5);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--amber-border);
    color: var(--chalk);
    counter-increment: section;
}

.section-desc { font-size: 0.875rem; color: var(--chalk-dim); margin-top: var(--sp-2); }

/* ── Hero Title (サブページ) ── */
.hero-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 400;
    color: var(--chalk); letter-spacing: 0.03em;
}
.hero-section   { padding-bottom: var(--sp-4); }
.hero-subtitle  { font-size: 0.875rem; color: var(--chalk-dim); margin-top: var(--sp-3); }

/* ══════════════════════════════════════════════════
   GUIDE GRID — ガイドカード
   ══════════════════════════════════════════════════ */

.guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--sp-3); margin-top: var(--sp-4);
}

.guide-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 2px solid var(--amber-border);
    padding: var(--sp-5);
    transition: border-color var(--dur-fast), background var(--dur-fast);
}
.guide-card:hover { border-top-color: var(--amber); background: var(--surface-hi); }
.guide-card h3 {
    font-family: var(--font-mono); font-size: 0.8125rem;
    font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--amber); margin: 0 0 var(--sp-3);
    padding: 0; border: none;
}
.guide-card ul  { color: var(--chalk-dim); font-size: 0.875rem; padding-left: 16px; line-height: 1.8; }

/* ══════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════ */

.btn-primary {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; min-width: 44px;
    background: var(--amber); color: var(--bg);
    padding: 12px var(--sp-6);
    font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    text-decoration: none; border: none; cursor: pointer;
    transition: background var(--dur-fast), box-shadow var(--dur-fast);
}
.btn-primary:hover { background: var(--chalk); color: var(--bg); text-decoration: none; }
.btn-primary:focus-visible { outline: 2px solid var(--chalk); outline-offset: 2px; }

.btn-detail { color: var(--blue); font-size: 0.875rem; text-decoration: none; }
.btn-detail:hover { color: var(--chalk); text-decoration: underline; }

/* ══════════════════════════════════════════════════
   FORM — 情報提供フォーム
   ══════════════════════════════════════════════════ */

.form-group { margin-bottom: var(--sp-5); }

.form-label {
    display: block; margin-bottom: var(--sp-2);
    font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600;
    color: var(--chalk-dim); letter-spacing: 0.08em; text-transform: uppercase;
}

.form-control {
    display: block; width: 100%;
    background: var(--surface); color: var(--chalk);
    border: 1px solid var(--border);
    padding: 12px var(--sp-4); min-height: 48px;
    font-family: var(--font-body); font-size: 1rem;
    transition: border-color var(--dur-fast), background var(--dur-fast);
    -webkit-appearance: none; appearance: none;
}
.form-control:focus {
    outline: none;
    border-color: var(--amber);
    background: var(--surface-hi);
}
.form-control::placeholder { color: var(--chalk-faint); }

textarea.form-control { resize: vertical; min-height: 160px; line-height: 1.75; }

.form-select {
    display: block; width: 100%;
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239a9590' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 16px center;
    color: var(--chalk);
    border: 1px solid var(--border);
    padding: 12px 40px 12px var(--sp-4); min-height: 48px;
    font-family: var(--font-body); font-size: 1rem;
    cursor: pointer; -webkit-appearance: none; appearance: none;
    transition: border-color var(--dur-fast);
}
.form-select:focus { outline: none; border-color: var(--amber); }

.btn-submit {
    display: block; width: 100%;
    background: var(--amber); color: var(--bg);
    padding: 14px var(--sp-6); min-height: 52px;
    font-family: var(--font-mono); font-size: 0.875rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    border: none; cursor: pointer;
    transition: background var(--dur-fast);
}
.btn-submit:hover { background: var(--chalk); }
.btn-submit:focus-visible { outline: 2px solid var(--chalk); outline-offset: 2px; }

.form-note { font-size: 0.8125rem; color: var(--chalk-faint); margin-top: var(--sp-2); }

/* ══════════════════════════════════════════════════
   FOOTER — deep dark
   ══════════════════════════════════════════════════ */

footer {
    background: var(--surface-lo);
    border-top: 1px solid var(--border);
    padding: var(--sp-8) 0 var(--sp-6);
    color: var(--chalk-faint); font-size: 0.8125rem;
    text-align: center;
}

.footer-links {
    display: flex; justify-content: center;
    gap: var(--sp-6); flex-wrap: wrap;
    margin-bottom: var(--sp-4);
}
.footer-links a {
    color: var(--chalk-faint); text-decoration: none;
    font-family: var(--font-mono); font-size: 0.6875rem;
    letter-spacing: 0.06em; text-transform: uppercase;
    padding: var(--sp-2) 0; min-height: 44px;
    display: inline-flex; align-items: center;
    transition: color var(--dur-fast);
}
.footer-links a:hover { color: var(--amber); text-decoration: none; }
.footer-note    { font-size: 0.75rem; color: var(--chalk-faint); margin-top: var(--sp-2); }
.footer-counter { margin-top: var(--sp-5); }

/* ══════════════════════════════════════════════════
   ACCESSIBILITY (ui-ux-pro-max §1)
   ══════════════════════════════════════════════════ */

a:focus-visible          { outline: 2px solid var(--amber); outline-offset: 2px; }
button:focus-visible     { outline: 2px solid var(--amber); outline-offset: 2px; }
.nav-link:focus-visible  { outline: 2px solid var(--amber); outline-offset: -2px; }

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

/* ══════════════════════════════════════════════════
   RESPONSIVE — mobile-first (ui-ux-pro-max §5)
   breakpoints: 375 / 768 / 1024
   ══════════════════════════════════════════════════ */

@media (max-width: 768px) {
    :root { --gutter: 16px; }

    .site-hero { padding: var(--sp-10) 0 var(--sp-8); min-height: 40vh; }
    .site-hero h1  { font-size: 1.75rem; }
    .hero-stats    { gap: var(--sp-6); }
    .hero-stat-number { font-size: 1.375rem; }

    .header-container { height: 52px; }
    .brand-logo  { font-size: 0.9375rem; }
    .nav-link    { padding: 0 10px; font-size: 0.6875rem; }

    h1, .hero-title  { font-size: 1.5rem; }
    h2, .section-title { font-size: 1.125rem; margin-top: var(--sp-8); }

    .report-item { padding: var(--sp-4); }
    .report-item h3 { font-size: 1.125rem; }

    .guide-grid  { grid-template-columns: 1fr; }
    .testimony-meta { gap: var(--sp-4); }
    .main-content-area { padding: var(--sp-8) 0 var(--sp-12); }
}

@media (max-width: 480px) {
    .header-container { flex-direction: column; align-items: flex-start; gap: 0; height: auto; padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
    .main-nav { width: 100%; overflow-x: auto; }
    .hero-stats { flex-direction: column; gap: var(--sp-4); }
    .testimony-meta { flex-direction: column; gap: var(--sp-3); }
    .footer-links { gap: var(--sp-4); }
}

/* ══════════════════════════════════════════════════
   UTILITIES
   ══════════════════════════════════════════════════ */

.text-right  { text-align: right; }
.text-mono   { font-family: var(--font-mono); }
.text-amber  { color: var(--amber); }
.text-alert  { color: var(--alert); }
.text-muted  { color: var(--chalk-dim); }