/* ============================================================
   7bit Casino AU — weave.css
   TYPO-03 · SPACE-07 · CONT-07 · BP-04 · GEO-08 · MOTION-01
   Dark cold background + warm amber accents.
   ============================================================ */

:root {
    /* Colors (final, ±2% shifted) */
    --bs-accent-main: #1a1a2f;
    --bs-accent-color: #f4ac29;
    --bs-accent-active: #e38708;
    --bs-surface: #10101c;
    --bs-bg-elevated: #1c1c2e;
    --bs-grad-light: #3016ff;
    --bs-gradient-mid: #252423;
    --bs-ink: #ffffff;
    --bs-ink-soft: #c0c0c0;
    --bs-warning-bg: #dc2626;

    /* Fonts */
    --bs-font-heading: "Montserrat", "Arial Narrow", sans-serif;
    --bs-font-base: "Inter", "Helvetica Neue", Arial, sans-serif;

    /* Typography — TYPO-03 (desktop) */
    --bs-size-h1: 80px;
    --bs-text-h2: 48px;
    --bs-fs-h3: 30px;
    --bs-type-h4: 22px;
    --bs-size-h5: 16px;
    --bs-text-h6: 13px;
    --bs-type-body: 15px;
    --bs-fs-small: 13px;
    --bs-text-xs: 11px;

    --bs-lh-tight: 0.95;
    --bs-leading-normal: 1.45;
    --bs-line-loose: 1.65;

    --bs-letter-tight: -0.04em;
    --bs-ls-normal: 0;
    --bs-tracking-wide: 0.08em;

    --bs-font-normal: 400;
    --bs-weight-medium: 700;
    --bs-weight-bold: 900;

    /* Spacing — SPACE-07 (Fibonacci) */
    --bs-space-2xs: 3px;
    --bs-spacing-xs: 8px;
    --bs-gutter-sm: 13px;
    --bs-spacing-md: 21px;
    --bs-spacing-lg: 34px;
    --bs-gutter-xl: 55px;
    --bs-gutter-2xl: 89px;
    --bs-space-3xl: 144px;

    /* Container — CONT-07 */
    --bs-content-width: 1340px;
    --bs-readable-width: 720px;
    --bs-edge-desktop: 48px;
    --bs-container-padding-tablet: 24px;
    --bs-edge-mobile: 16px;

    /* Geometry — GEO-08 (soft top, sharp bottom) */
    --bs-corner-xs: 2px 2px 0 0;
    --bs-radius-sm: 6px 6px 0 0;
    --bs-round-md: 12px 12px 0 0;
    --bs-corner-lg: 20px 20px 0 0;
    --bs-pill: 9999px 9999px 0 0;
    --bs-radius-circle: 50%;

    --bs-hairline: 1px;
    --bs-border-medium: 2px;
    --bs-border-thick: 3px;

    --bs-depth-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
    --bs-shade-md: 0 4px 12px rgba(0, 0, 0, 0.35);
    --bs-shade-lg: 0 10px 28px rgba(0, 0, 0, 0.45);

    /* Motion — MOTION-01 (static strict) */
    --bs-speed-fast: 120ms;
    --bs-transition-base: 150ms;
    --bs-duration-slow: 200ms;
    --bs-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);

    --bs-header-height-desktop: 140px;
    --bs-topbar-mobile: 100px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--bs-font-base);
    font-size: var(--bs-type-body);
    font-weight: var(--bs-font-normal);
    line-height: var(--bs-leading-normal);
    color: var(--bs-ink);
    background: var(--bs-surface);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--bs-accent-color); }
h1, h2, h3, h4, h5, h6 { margin: 0; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; }

/* ---------- a11y ---------- */
.skip-link {
    position: absolute;
    left: var(--bs-spacing-md);
    top: var(--bs-spacing-md);
    z-index: 200;
    background: var(--bs-accent-color);
    color: var(--bs-surface);
    padding: var(--bs-spacing-xs) var(--bs-spacing-md);
    font-family: var(--bs-font-heading);
    font-weight: var(--bs-weight-bold);
    text-decoration: none;
}
.skip-link:not(:focus) { top: -200px !important; left: -200px; }
.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;
}
:focus-visible { outline: 2px solid var(--bs-accent-color); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ---------- Shared inner width (single canonical section width) ---------- */
.f72-inner, .l28-inner, .h81-inner, .x38-inner, .c77-inner, .s90-inner,
.g45-inner, .c03-inner, .x40-inner, .q61-inner, .w57-inner, .c33-inner,
.z29-inner, .p74-inner, .t77-inner {
    width: 100%;
    max-width: calc(var(--bs-content-width) + 2 * var(--bs-edge-desktop));
    margin-inline: auto;
    padding-inline: var(--bs-edge-desktop);
}

/* ============================================================
   HEADER — HEAD-14 (centered hero-logo, two-row NAV-03)
   ============================================================ */
.f72 {
    background: var(--bs-surface);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.f72-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--bs-spacing-md);
    padding-block: var(--bs-spacing-md);
}
.f72-logo, .f72-logo-img { flex-shrink: 0; }
.f72-logo-img { height: 88px; width: auto; }
.f72-toggle {
    display: none;
    align-items: center;
    gap: var(--bs-spacing-xs);
    margin-left: auto;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--bs-ink);
    font-family: var(--bs-font-heading);
    font-weight: var(--bs-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--bs-tracking-wide);
    font-size: var(--bs-text-h6);
    padding: var(--bs-spacing-xs) var(--bs-spacing-md);
    cursor: pointer;
}
.f72-toggle-icon {
    display: inline-block; width: 18px; height: 2px;
    background: var(--bs-accent-color); position: relative;
}
.f72-toggle-icon::before, .f72-toggle-icon::after {
    content: ""; position: absolute; left: 0; width: 18px; height: 2px;
    background: var(--bs-accent-color);
}
.f72-toggle-icon::before { top: -6px; }
.f72-toggle-icon::after { top: 6px; }

.f72-nav { display: flex; flex-direction: column; gap: var(--bs-space-2xs); width: 100%; }
.f72-nav-list {
    display: flex; flex-wrap: nowrap; justify-content: center;
    gap: var(--bs-spacing-lg); list-style: none; margin: 0; padding: 0;
}
.f72-nav-list--top { padding-bottom: var(--bs-space-2xs); }
.f72-nav-list--bottom {
    padding-top: var(--bs-spacing-xs);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.f72-nav-item { display: inline-flex; }
.f72-link {
    font-family: var(--bs-font-heading);
    font-weight: var(--bs-weight-medium);
    font-size: var(--bs-text-h6);
    text-transform: uppercase;
    letter-spacing: var(--bs-tracking-wide);
    color: var(--bs-ink);
    text-decoration: none;
    white-space: nowrap;
    padding-block: var(--bs-space-2xs);
    transition: color var(--bs-speed-fast) var(--bs-easing);
}
.f72-link:hover, .f72-link[aria-current="page"] { color: var(--bs-accent-color); }

/* Mobile drawer — flat list, hidden until .is-open */
.f72-mobile {
    display: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--bs-bg-elevated);
}
.f72-mobile.is-open { display: block; }
.f72-mobile-list { list-style: none; margin: 0; padding: var(--bs-gutter-sm) 0; }
.f72-mobile-item { display: block; }
.f72-mobile-link {
    display: block;
    padding: var(--bs-gutter-sm) var(--bs-edge-mobile);
    font-family: var(--bs-font-heading);
    font-weight: var(--bs-weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--bs-tracking-wide);
    font-size: var(--bs-text-h6);
    color: var(--bs-ink);
    text-decoration: none;
}
.f72-mobile-link:hover, .f72-mobile-link[aria-current="page"] { color: var(--bs-accent-color); }

/* ============================================================
   HERO — HERO-09 (two-column card stack, no image)
   ============================================================ */
.h81 { background: var(--bs-surface); padding-block: var(--bs-space-3xl); }
.h81-inner {
    display: grid;
    grid-template-columns: 60% 40%;
    gap: var(--bs-gutter-2xl);
    align-items: center;
}
.h81-content { display: flex; flex-direction: column; gap: var(--bs-spacing-md); }
.h81-title {
    font-family: var(--bs-font-heading);
    font-weight: var(--bs-weight-bold);
    font-size: var(--bs-size-h1);
    line-height: var(--bs-lh-tight);
    letter-spacing: var(--bs-letter-tight);
    text-transform: uppercase;
    color: var(--bs-ink);
}
.h81-subtitle {
    font-size: var(--bs-size-h5);
    line-height: var(--bs-leading-normal);
    color: var(--bs-ink-soft);
    max-width: 560px;
}
.h81-cta {
    align-self: flex-start;
    display: inline-flex; align-items: center;
    padding: var(--bs-gutter-sm) var(--bs-gutter-xl);
    background: var(--bs-accent-color);
    color: var(--bs-surface);
    font-family: var(--bs-font-heading);
    font-weight: var(--bs-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--bs-tracking-wide);
    text-decoration: none;
    border-radius: var(--bs-round-md);
    transition: background var(--bs-speed-fast) var(--bs-easing);
}
.h81-cta:hover { background: var(--bs-accent-active); color: var(--bs-surface); }
.h81-features { display: flex; flex-direction: column; gap: var(--bs-spacing-md); list-style: none; margin: 0; padding: 0; }
.h81-feature {
    display: flex; align-items: center; gap: var(--bs-spacing-md);
    padding: var(--bs-spacing-md);
    background: var(--bs-bg-elevated);
    border-radius: var(--bs-round-md);
}
.h81-feature-num {
    font-family: var(--bs-font-heading);
    font-weight: var(--bs-weight-bold);
    font-size: var(--bs-fs-h3);
    color: var(--bs-accent-color);
    flex-shrink: 0;
}
.h81-feature-title { font-size: var(--bs-type-body); font-weight: var(--bs-weight-bold); line-height: var(--bs-lh-tight); color: var(--bs-ink); }

/* ============================================================
   PAGE HEADER — PHEAD-02 (compact centered)
   ============================================================ */
.x38 { background: var(--bs-surface); padding-block: var(--bs-gutter-2xl); }
.x38-inner { display: flex; flex-direction: column; gap: var(--bs-spacing-md); text-align: center; align-items: center; }
.x38-eyebrow {
    font-family: var(--bs-font-base);
    font-weight: var(--bs-weight-medium);
    font-size: var(--bs-fs-small);
    text-transform: uppercase;
    letter-spacing: var(--bs-tracking-wide);
    color: var(--bs-accent-color);
}
.x38-title {
    font-family: var(--bs-font-heading);
    font-weight: var(--bs-weight-bold);
    font-size: var(--bs-size-h1);
    line-height: var(--bs-lh-tight);
    letter-spacing: var(--bs-letter-tight);
    text-transform: uppercase;
    color: var(--bs-ink);
    max-width: 920px;
}
.x38-divider { width: 60px; height: 2px; background: var(--bs-accent-color); }
.x38-description { font-size: var(--bs-size-h5); line-height: var(--bs-leading-normal); color: var(--bs-ink-soft); max-width: 620px; }

/* ============================================================
   PROSE — PROSE-03 (bordered sidebar notes) + body lists + figures
   ============================================================ */
.x40 { background: var(--bs-surface); padding-block: var(--bs-gutter-xl); }
.x40-sec { margin-bottom: var(--bs-spacing-lg); }
.x40 h2 {
    font-family: var(--bs-font-heading);
    font-weight: var(--bs-weight-bold);
    font-size: var(--bs-text-h2);
    line-height: var(--bs-lh-tight);
    letter-spacing: var(--bs-letter-tight);
    text-transform: uppercase;
    color: var(--bs-ink);
    margin-top: var(--bs-gutter-2xl);
    margin-bottom: var(--bs-spacing-md);
}
.x40-sec:first-child h2 { margin-top: 0; }
.x40 p {
    padding-left: var(--bs-spacing-lg);
    border-left: var(--bs-border-thick) solid rgba(255, 255, 255, 0.14);
    font-size: var(--bs-type-body);
    line-height: var(--bs-line-loose);
    color: var(--bs-ink);
    max-width: var(--bs-readable-width);
    margin-bottom: var(--bs-spacing-md);
}
.x40-sec--a p { border-left-color: var(--bs-accent-color); }
.x40-sec--b p { border-left-color: rgba(255, 255, 255, 0.16); }
.x40 a { color: var(--bs-accent-color); text-decoration: underline; text-underline-offset: 3px; }
.x40 a:hover { color: var(--bs-accent-active); }
.x40 strong { font-weight: var(--bs-weight-bold); color: var(--bs-ink); }
.x40 em { font-style: italic; }
.x40-md-list {
    padding-left: var(--bs-gutter-xl);
    max-width: var(--bs-readable-width);
    color: var(--bs-ink);
    margin-bottom: var(--bs-spacing-md);
}
.x40-md-list li { margin-bottom: var(--bs-spacing-xs); line-height: var(--bs-line-loose); }
.x40-fig { margin: var(--bs-spacing-lg) 0; }
.x40-fig img { border-radius: var(--bs-round-md); width: 100%; }

/* ============================================================
   ITEMS GRID — GRID-04 (icon-decorated cards, uniform)
   ============================================================ */
.c77 { background: var(--bs-surface); padding-block: var(--bs-gutter-xl); }
.c77-heading {
    font-family: var(--bs-font-heading); font-weight: var(--bs-weight-bold);
    font-size: var(--bs-text-h2); text-transform: uppercase; letter-spacing: var(--bs-letter-tight);
    margin-bottom: var(--bs-spacing-lg);
}
.c77-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bs-spacing-lg); list-style: none; margin: 0; padding: 0; }
.c77-item {
    padding: var(--bs-spacing-lg);
    background: var(--bs-bg-elevated);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--bs-round-md);
    transition: border-color var(--bs-transition-base) var(--bs-easing);
}
.c77-item:hover { border-color: var(--bs-accent-color); }
.c77-item-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: var(--bs-radius-circle);
    background: var(--bs-accent-color); color: var(--bs-surface);
    font-family: var(--bs-font-heading); font-weight: var(--bs-weight-bold); font-size: var(--bs-type-h4);
    margin-bottom: var(--bs-spacing-md);
}
.c77-item-title { font-family: var(--bs-font-heading); font-weight: var(--bs-weight-bold); font-size: var(--bs-type-h4); line-height: var(--bs-lh-tight); color: var(--bs-ink); margin-bottom: var(--bs-gutter-sm); }
.c77-item-text { font-size: var(--bs-type-body); line-height: var(--bs-leading-normal); color: var(--bs-ink-soft); }

/* ============================================================
   DATA TABLE — TABLE-02 (borderless editorial)
   ============================================================ */
.q61 { background: var(--bs-surface); padding-block: var(--bs-gutter-xl); }
.q61-heading { font-family: var(--bs-font-heading); font-weight: var(--bs-weight-bold); font-size: var(--bs-fs-h3); margin-bottom: var(--bs-spacing-md); }
.q61-scroll { overflow-x: auto; }
.q61 table { width: 100%; border-collapse: collapse; min-width: 520px; background: transparent; }
.q61 thead th {
    font-family: var(--bs-font-heading); font-weight: var(--bs-weight-bold); font-size: var(--bs-fs-small);
    text-transform: uppercase; letter-spacing: var(--bs-tracking-wide); color: var(--bs-ink);
    text-align: left; padding: var(--bs-spacing-md); border-bottom: 2px solid var(--bs-accent-color);
}
.q61 tbody td { padding: var(--bs-spacing-md); font-size: var(--bs-type-body); color: var(--bs-ink-soft); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.q61 tbody td:first-child { color: var(--bs-ink); font-weight: var(--bs-weight-medium); }
.q61 tbody tr:last-child td { border-bottom: none; }

/* ============================================================
   REVIEWS — REV-03 (horizontal carousel, mini-bar rating)
   ============================================================ */
.g45 { background: var(--bs-surface); padding-block: var(--bs-gutter-xl); }
.g45-heading { font-family: var(--bs-font-heading); font-weight: var(--bs-weight-bold); font-size: var(--bs-text-h2); text-transform: uppercase; letter-spacing: var(--bs-letter-tight); margin-bottom: var(--bs-spacing-lg); }
.g45-rail { display: flex; gap: var(--bs-spacing-lg); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--bs-gutter-sm); }
.g45-item {
    flex: 0 0 360px; width: 360px; min-height: 220px; scroll-snap-align: start;
    display: flex; flex-direction: column; gap: var(--bs-spacing-md);
    padding: var(--bs-spacing-lg); background: var(--bs-bg-elevated);
    border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--bs-round-md);
}
.g45-item-header { display: flex; align-items: center; }
.g45-rating { display: flex; flex-direction: column; }
.g45-author { font-size: var(--bs-type-body); font-weight: var(--bs-weight-bold); color: var(--bs-ink); }
.g45-rating-value { display: block; font-size: var(--bs-fs-small); color: var(--bs-ink-soft); margin-bottom: var(--bs-spacing-xs); }
.g45-bar { width: 70%; height: 4px; background: rgba(255, 255, 255, 0.15); border-radius: 2px; overflow: hidden; }
.g45-bar-fill { height: 100%; background: var(--bs-accent-color); }
.g45-text { font-size: var(--bs-type-body); line-height: var(--bs-line-loose); color: var(--bs-ink-soft); }
.g45-dots { display: flex; gap: var(--bs-spacing-xs); justify-content: center; margin-top: var(--bs-spacing-md); }
.g45-dot { width: 8px; height: 8px; border-radius: var(--bs-radius-circle); border: none; background: rgba(255, 255, 255, 0.3); cursor: pointer; padding: 0; }
.g45-dot.is-active { background: var(--bs-accent-color); }

/* ============================================================
   FAQ — FAQ-08 (bordered box, indicator bar, accordion)
   ============================================================ */
.s90 { background: var(--bs-surface); padding-block: var(--bs-gutter-xl); }
.s90-heading { font-family: var(--bs-font-heading); font-weight: var(--bs-weight-bold); font-size: var(--bs-text-h2); text-transform: uppercase; letter-spacing: var(--bs-letter-tight); margin-bottom: var(--bs-spacing-lg); }
.s90-list { background: var(--bs-bg-elevated); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--bs-corner-lg); padding: var(--bs-spacing-lg) var(--bs-gutter-2xl); }
.s90-item { position: relative; padding-left: var(--bs-spacing-md); padding-block: var(--bs-spacing-md); box-shadow: inset 4px 0 0 var(--bs-accent-color); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.s90-item:last-child { border-bottom: none; }
.s90-question {
    width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--bs-spacing-md);
    text-align: left; padding: 0; background: transparent; border: none; cursor: pointer;
    font-family: var(--bs-font-base); font-size: var(--bs-size-h5); font-weight: var(--bs-weight-bold); color: var(--bs-ink);
    transition: color var(--bs-speed-fast) var(--bs-easing);
}
.s90-question:hover { color: var(--bs-accent-color); }
.s90-question-text { flex: 1; }
.s90-icon { font-size: 24px; line-height: 1; color: var(--bs-accent-color); flex-shrink: 0; }
.s90-answer { padding-top: var(--bs-gutter-sm); font-size: var(--bs-type-body); line-height: var(--bs-line-loose); color: var(--bs-ink-soft); }
.s90-answer[hidden] { display: none; }

/* ============================================================
   CTA BLOCK — CTA-04 (minimal text link)
   ============================================================ */
.c03 { background: var(--bs-surface); padding-block: var(--bs-gutter-xl); text-align: center; }
.c03-inner { display: flex; flex-direction: column; align-items: center; gap: var(--bs-spacing-md); }
.c03-title { font-family: var(--bs-font-heading); font-weight: var(--bs-weight-bold); font-size: var(--bs-fs-h3); text-transform: uppercase; letter-spacing: var(--bs-letter-tight); }
.c03-description { font-size: var(--bs-type-body); line-height: var(--bs-line-loose); color: var(--bs-ink-soft); max-width: 580px; }
.c03-link {
    font-family: var(--bs-font-heading); font-size: var(--bs-text-h6); text-transform: uppercase; letter-spacing: var(--bs-tracking-wide);
    color: var(--bs-accent-color); text-decoration: underline; text-underline-offset: 3px;
    transition: color var(--bs-speed-fast) var(--bs-easing);
}
.c03-link:hover { color: var(--bs-accent-active); text-decoration-thickness: 2px; }

/* ============================================================
   AUTHOR BYLINE — BYLINE-05 (full-width band)
   ============================================================ */
.p74 { background: var(--bs-accent-main); padding-block: var(--bs-spacing-lg); }
.p74-inner { display: flex; justify-content: space-between; align-items: center; gap: var(--bs-spacing-md); }
.p74-author-info { display: flex; align-items: center; gap: var(--bs-spacing-md); }
.p74-portrait {
    width: 56px; height: 56px; border-radius: var(--bs-radius-circle); object-fit: cover; object-position: center 20%;
    background: var(--bs-accent-main); border: 2px solid var(--bs-accent-main); box-sizing: content-box; flex-shrink: 0;
}
.p74-name { margin: 0; }
.p74-name a { color: var(--bs-accent-color); text-decoration: underline; font-weight: var(--bs-weight-bold); }
.p74-role { font-size: var(--bs-fs-small); color: var(--bs-ink-soft); }
.p74-text { display: flex; flex-direction: column; gap: var(--bs-space-2xs); }
.p74-cta {
    display: inline-flex; align-items: center; padding: var(--bs-gutter-sm) var(--bs-spacing-md);
    background: transparent;
    border: 1px solid var(--bs-accent-color); color: var(--bs-accent-color); text-decoration: none;
    font-family: var(--bs-font-heading); font-weight: var(--bs-weight-bold); text-transform: uppercase; letter-spacing: var(--bs-tracking-wide); font-size: var(--bs-text-h6);
    transition: background var(--bs-speed-fast) var(--bs-easing), color var(--bs-speed-fast) var(--bs-easing);
}
.p74-cta:hover { background: var(--bs-accent-color); color: var(--bs-surface); }

/* ============================================================
   AUTHOR CARD — AUTH-01 + articles list
   ============================================================ */
.t77 { background: var(--bs-surface); padding-block: var(--bs-gutter-xl); }
.t77-card {
    display: grid; grid-template-columns: 140px 1fr; gap: var(--bs-gutter-xl);
    background: var(--bs-bg-elevated); padding: var(--bs-gutter-xl) var(--bs-spacing-lg);
    border-radius: var(--bs-corner-lg); box-shadow: var(--bs-depth-sm);
}
.t77-portrait {
    width: 140px; height: 140px; border-radius: var(--bs-radius-circle); object-fit: cover; object-position: center 20%;
    background: var(--bs-bg-elevated); border: 3px solid var(--bs-bg-elevated); box-sizing: content-box;
}
.t77-body { display: flex; flex-direction: column; gap: var(--bs-spacing-md); }
.t77-job { font-family: var(--bs-font-base); font-weight: var(--bs-weight-medium); font-size: var(--bs-fs-small); text-transform: uppercase; letter-spacing: var(--bs-tracking-wide); color: var(--bs-accent-color); }
.t77-name { font-family: var(--bs-font-heading); font-weight: var(--bs-weight-bold); font-size: var(--bs-text-h2); text-transform: uppercase; letter-spacing: var(--bs-letter-tight); }
.t77-bio { font-size: var(--bs-type-body); line-height: var(--bs-line-loose); color: var(--bs-ink-soft); }
.t77-expertise { display: flex; flex-wrap: wrap; gap: var(--bs-spacing-xs); list-style: none; padding: 0; margin: 0; }
.t77-tag { padding: var(--bs-space-2xs) var(--bs-gutter-sm); background: var(--bs-accent-main); color: var(--bs-ink); border-radius: var(--bs-pill); font-size: var(--bs-text-xs); text-transform: uppercase; letter-spacing: var(--bs-tracking-wide); }
.t77-articles { margin-top: var(--bs-gutter-xl); }
.t77-articles-heading { font-family: var(--bs-font-heading); font-weight: var(--bs-weight-bold); font-size: var(--bs-type-h4); margin-bottom: var(--bs-spacing-md); }
.t77-articles-list { display: flex; flex-direction: column; gap: var(--bs-spacing-xs); list-style: none; padding: 0; margin: 0; }
.t77-articles-item { font-size: var(--bs-type-body); line-height: var(--bs-leading-normal); }
.t77-articles-item a { color: var(--bs-accent-color); text-decoration: underline; }
.t77-articles-item a:hover { color: var(--bs-accent-active); text-decoration: underline; }

/* ============================================================
   LEGAL — LEGAL-08 (minimal plain)
   ============================================================ */
.w57 { background: var(--bs-surface); padding-block: var(--bs-gutter-xl); }
.w57-intro { font-size: var(--bs-size-h5); line-height: var(--bs-leading-normal); color: var(--bs-ink); margin-bottom: var(--bs-spacing-lg); max-width: var(--bs-readable-width); }
.w57-section { margin-bottom: var(--bs-spacing-lg); }
.w57-heading { font-family: var(--bs-font-base); font-weight: var(--bs-weight-bold); font-size: var(--bs-fs-h3); color: var(--bs-ink); margin-top: var(--bs-gutter-xl); margin-bottom: var(--bs-spacing-md); }
.w57-paragraph { font-size: var(--bs-type-body); line-height: var(--bs-line-loose); color: var(--bs-ink-soft); margin-bottom: var(--bs-spacing-md); max-width: var(--bs-readable-width); }
.w57-contacts { margin-top: var(--bs-gutter-xl); }
.w57-contacts-list { padding-left: var(--bs-spacing-lg); color: var(--bs-ink-soft); }
.w57-contacts-item { margin-bottom: var(--bs-spacing-xs); line-height: var(--bs-line-loose); }
.w57-contacts-item a { color: var(--bs-accent-color); }
.w57-disclaimer { display: block; margin-top: var(--bs-spacing-lg); color: var(--bs-ink-soft); font-size: var(--bs-fs-small); max-width: var(--bs-readable-width); }

/* ============================================================
   CONTACT FORM — FORM-06 (floating labels)
   ============================================================ */
.c33 { background: var(--bs-surface); padding-block: var(--bs-gutter-xl); }
.c33-intro { font-size: var(--bs-type-body); line-height: var(--bs-line-loose); color: var(--bs-ink-soft); margin-bottom: var(--bs-spacing-lg); max-width: var(--bs-readable-width); }
.c33-form { display: flex; flex-direction: column; gap: var(--bs-spacing-md); background: var(--bs-bg-elevated); padding: var(--bs-spacing-lg); border-radius: var(--bs-round-md); box-shadow: var(--bs-depth-sm); max-width: 640px; }
.c33-field { position: relative; display: flex; flex-direction: column; }
.c33-input, .c33-textarea {
    font-family: var(--bs-font-base); font-size: var(--bs-type-body); color: var(--bs-ink); background: var(--bs-surface);
    border: var(--bs-hairline) solid rgba(255, 255, 255, 0.14); border-radius: var(--bs-round-md);
    padding: var(--bs-spacing-lg) var(--bs-spacing-md) var(--bs-spacing-xs);
}
.c33-input { height: 56px; }
.c33-textarea { min-height: 120px; resize: vertical; }
.c33-input:focus, .c33-textarea:focus { border-color: var(--bs-accent-color); outline: none; }
.c33-label { position: absolute; top: 18px; left: var(--bs-spacing-md); color: var(--bs-ink-soft); pointer-events: none; transition: top var(--bs-transition-base), font-size var(--bs-transition-base); }
.c33-input:focus + .c33-label, .c33-input:not(:placeholder-shown) + .c33-label,
.c33-textarea:focus + .c33-label, .c33-textarea:not(:placeholder-shown) + .c33-label {
    top: 6px; font-size: var(--bs-text-xs); color: var(--bs-accent-color);
}
.c33-submit {
    align-self: flex-start; height: 48px; padding-inline: var(--bs-gutter-xl);
    background: var(--bs-accent-color); color: var(--bs-surface);
    font-family: var(--bs-font-heading); font-weight: var(--bs-weight-bold); text-transform: uppercase; letter-spacing: var(--bs-tracking-wide);
    border-radius: var(--bs-round-md); border: none; cursor: pointer;
    transition: background var(--bs-speed-fast) var(--bs-easing);
}
.c33-submit:hover { background: var(--bs-accent-active); color: var(--bs-surface); }
.c33-success { display: none; padding: var(--bs-spacing-md); background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.35); border-radius: var(--bs-round-md); color: var(--bs-ink); margin-bottom: var(--bs-spacing-md); }
.c33-success.is-visible { display: block; }

/* ============================================================
   COOKIE — COOK-03 (corner card)
   ============================================================ */
.u67 { position: fixed; inset-block-end: var(--bs-spacing-md); inset-inline-end: var(--bs-spacing-md); width: 360px; max-width: 360px; z-index: 90; display: none; }
.u67.is-visible { display: block; }
.u67-card { background: var(--bs-bg-elevated); border-radius: var(--bs-corner-lg); padding: var(--bs-spacing-lg); box-shadow: var(--bs-shade-lg); border: 1px solid rgba(255, 255, 255, 0.1); display: flex; flex-direction: column; gap: var(--bs-spacing-md); }
.u67-title { font-family: var(--bs-font-heading); font-weight: var(--bs-weight-bold); font-size: var(--bs-size-h5); text-transform: uppercase; letter-spacing: var(--bs-tracking-wide); color: var(--bs-accent-color); }
.u67-message { font-size: var(--bs-fs-small); line-height: var(--bs-leading-normal); color: var(--bs-ink-soft); }
.u67-actions { display: flex; gap: var(--bs-gutter-sm); }
.u67-button { width: 50%; height: 40px; font-family: var(--bs-font-heading); font-weight: var(--bs-weight-bold); text-transform: uppercase; letter-spacing: var(--bs-tracking-wide); font-size: var(--bs-text-xs); border-radius: var(--bs-round-md); cursor: pointer; }
.u67-button--bs-accept { background: var(--bs-accent-color); color: var(--bs-surface); border: none; }
.u67-button--bs-accept:hover { background: var(--bs-accent-active); color: var(--bs-surface); }
.u67-button--bs-decline { background: transparent; color: var(--bs-ink); border: 1px solid rgba(255, 255, 255, 0.18); }
.u67-button--bs-decline:hover { background: rgba(255, 255, 255, 0.05); color: var(--bs-ink); }

/* ============================================================
   ERROR — ERR-06 (bordered card)
   ============================================================ */
.z29 { background: var(--bs-surface); padding-block: var(--bs-space-3xl); }
.z29-card {
    background: var(--bs-bg-elevated); border: 2px solid var(--bs-accent-color); border-radius: var(--bs-corner-lg);
    padding: var(--bs-gutter-2xl); max-width: 720px; margin-inline: auto; box-shadow: var(--bs-shade-md);
    display: flex; flex-direction: column; gap: var(--bs-spacing-md); align-items: center; text-align: center;
}
.z29-title { font-family: var(--bs-font-heading); font-weight: var(--bs-weight-bold); font-size: var(--bs-text-h2); text-transform: uppercase; letter-spacing: var(--bs-letter-tight); color: var(--bs-ink); }
.z29-text { font-size: var(--bs-size-h5); color: var(--bs-ink-soft); line-height: var(--bs-leading-normal); }
.z29-button {
    height: 52px; display: inline-flex; align-items: center; padding-inline: var(--bs-gutter-xl);
    background: var(--bs-accent-color); color: var(--bs-surface); font-family: var(--bs-font-heading); font-weight: var(--bs-weight-bold);
    text-transform: uppercase; letter-spacing: var(--bs-tracking-wide); border-radius: var(--bs-round-md); text-decoration: none;
    transition: background var(--bs-speed-fast) var(--bs-easing);
}
.z29-button:hover { background: var(--bs-accent-active); color: var(--bs-surface); }

/* ============================================================
   FOOTER — FOOT-06 (manifesto footer)
   ============================================================ */
.l28 { background: var(--bs-surface); padding-block: var(--bs-gutter-2xl); border-top: 1px solid rgba(255, 255, 255, 0.08); }
.l28-manifesto { display: flex; flex-direction: column; align-items: center; gap: var(--bs-spacing-md); text-align: center; }
.l28-statement { font-family: var(--bs-font-heading); font-weight: var(--bs-weight-bold); font-size: var(--bs-text-h2); text-transform: uppercase; letter-spacing: var(--bs-letter-tight); color: var(--bs-ink); max-width: 720px; }
.l28-cta { font-family: var(--bs-font-heading); font-size: var(--bs-size-h5); text-transform: uppercase; letter-spacing: var(--bs-tracking-wide); color: var(--bs-accent-color); text-decoration: underline; text-underline-offset: 4px; }
.l28-cta:hover { color: var(--bs-accent-active); }
.l28-divider { height: 1px; background: rgba(255, 255, 255, 0.1); margin-block: var(--bs-gutter-xl); }
.l28-meta { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--bs-spacing-lg); flex-wrap: wrap; }
.l28-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.l28-logo-img { height: 72px; width: auto; }
.l28-nav, .l28-legal { min-width: 140px; }
.l28-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--bs-spacing-xs); }
.l28-nav-link { color: var(--bs-ink-soft); text-decoration: none; font-size: var(--bs-fs-small); transition: color var(--bs-speed-fast) var(--bs-easing); }
.l28-nav-link:hover { color: var(--bs-accent-color); }
.l28-copyright { color: var(--bs-ink-soft); font-size: var(--bs-fs-small); align-self: flex-end; }

/* ============================================================
   RESPONSIVE — BP-04, desktop-first
   ============================================================ */
@media (max-width: 1119px) {
    .c77-list { grid-template-columns: repeat(2, 1fr); }
    .h81-inner { grid-template-columns: 1fr; gap: var(--bs-spacing-lg); }
}

@media (max-width: 879px) {
    :root {
        --bs-size-h1: 44px;
        --bs-text-h2: 32px;
        --bs-fs-h3: 24px;
        --bs-type-h4: 18px;
        --bs-size-h5: 14px;
        --bs-text-h6: 12px;
        --bs-type-body: 14px;
        --bs-fs-small: 12px;
        --bs-text-xs: 10px;
    }
    .f72-inner, .l28-inner, .h81-inner, .x38-inner, .c77-inner, .s90-inner,
    .g45-inner, .c03-inner, .x40-inner, .q61-inner, .w57-inner, .c33-inner,
    .z29-inner, .p74-inner, .t77-inner {
        padding-inline: var(--bs-edge-mobile);
    }
    .f72-inner { flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding-block: var(--bs-gutter-sm); }
    .f72-logo-img { height: 60px; }
    .f72-toggle { display: inline-flex; }
    .f72-nav { display: none; }
    .c77-list { grid-template-columns: 1fr; }
    .s90-list { padding: var(--bs-spacing-md) var(--bs-spacing-lg); }
    .t77-card { grid-template-columns: 1fr; }
    .t77-portrait { justify-self: center; width: 120px; height: 120px; }
    .p74-inner { flex-direction: column; align-items: stretch; }
    .p74-cta { justify-content: center; }
    .l28-meta { flex-direction: column; align-items: flex-start; }
    .l28-copyright { align-self: flex-start; }
    .g45-item { flex-basis: 300px; width: 300px; }
}

@media (max-width: 700px) {
    .u67 { width: calc(100vw - 2 * var(--bs-spacing-md)); max-width: none; inset-inline-start: var(--bs-spacing-md); }
}