/* ============================================================
   BassBet Casino — surface.css
   TYPO-08 / SPACE-10 / CONT-02 / GEO-04 / MOTION-01
   ============================================================ */

:root {
  /* colors */
  --brand-color: #02236c;
  --accent: #21cdfe;
  --highlight-active: #00d6f7;
  --page-bg: #001f5f;
  --card-bg: #0a2a72;
  --grad-light: #00f74d;
  --gradient-mid: #03fff8;
  --text: #ffffff;
  --fg-muted: #cfd6e6;
  --color-line-x: rgba(255, 255, 255, 0.10);

  /* fonts */
  --display-font: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --body-font: Arial, "Helvetica Neue", Helvetica, sans-serif;

  /* typography TYPO-08 */
  --text-h1: 56px; --size-h2: 38px; --type-h3: 24px; --size-h4: 18px; --text-h5: 15px; --size-h6: 13px;
  --size-body: 16px; --text-sm: 13px; --type-micro: 11px;
  --leading-tight: 1.05; --line-normal: 1.45; --line-loose: 1.65;
  --letter-tight: -0.02em; --ls-normal-x: 0.01em; --letter-wide: 0.1em;
  --font-normal: 500; --font-medium: 700; --weight-bold: 900;

  /* spacing SPACE-10 */
  --gap-2xs: 4px; --spacing-xs: 7px; --gap-sm: 11px; --gap-md: 17px;
  --gutter-lg: 26px; --gap-xl: 40px; --gutter-2xl: 60px; --gap-3xl: 90px;

  /* container CONT-02 (site width from build.mjs) */
  --max-width: 1420px;
  --measure: 720px;
  --container-narrow-x: 720px;
  --inset-desktop: 40px;
  --gutter-mobile: 16px;

  /* geometry GEO-04 */
  --corner-xs: 2px; --corner-sm: 6px; --round-md: 8px; --round-lg: 14px; --round-full: 9999px;
  --shade-sm: 0 2px 4px rgba(0, 0, 0, 0.18);
  --depth-md: 0 8px 24px rgba(0, 0, 0, 0.28);

  /* motion MOTION-01 */
  --transition-fast: 120ms; --speed-base: 150ms;
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--body-font);
  font-size: var(--size-body);
  font-weight: var(--font-normal);
  line-height: var(--line-normal);
  color: var(--text);
  background: var(--page-bg);
}
img { max-width: 100%; display: block; }
h1, h2, h3, h4, h5, h6 { margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; }
a { color: inherit; }

.skip-link {
  position: absolute; left: 12px; z-index: 300;
  background: var(--accent); color: var(--page-bg);
  padding: 10px 16px; border-radius: var(--round-md);
  font-weight: var(--weight-bold);
}
.skip-link:not(:focus) { top: -200px !important; }
.skip-link:focus { top: 12px; }
.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(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* shared centered inners — single canonical width (anti-footprint width rule) */
.m96-inner, .h18-inner, .w50-inner, .y63-inner, .g25-inner, .z24-inner, .d18-inner,
.r90-inner, .e48-inner, .y85-inner, .i65-inner, .b63-inner, .w13-inner, .e70-inner,
.o02-inner, .z86-inner, .q56-inner, .i75-inner {
  width: 100%;
  max-width: calc(var(--max-width) + 2 * var(--inset-desktop));
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
}
@media (min-width: 1040px) {
  .m96-inner, .h18-inner, .w50-inner, .y63-inner, .g25-inner, .z24-inner, .d18-inner,
  .r90-inner, .e48-inner, .y85-inner, .i65-inner, .b63-inner, .w13-inner, .e70-inner,
  .o02-inner, .z86-inner, .q56-inner, .i75-inner {
    padding-inline: var(--inset-desktop);
  }
}

.page { display: block; }

/* ---------- headings base ---------- */
.z24-title, .d18-title, .i75-title { font-family: var(--display-font); font-weight: var(--weight-bold); letter-spacing: var(--letter-tight); line-height: var(--leading-tight); text-transform: uppercase; }
.r90-h2, .e48-h2, .y85-h2, .i65-h2, .b63-h2, .w13-h2, .o02-section-h, .z86-name, .z86-articles-h, .o02-contacts-h { font-family: var(--display-font); font-weight: var(--weight-bold); letter-spacing: var(--letter-tight); line-height: var(--leading-tight); }

/* ============================================================
   HEADER  .m96  (HEAD-07 adapted horizontal, NAV-03 two-row, STICKY-01, AUTH-LOGIN)
   ============================================================ */
.m96 { position: sticky; top: 0; z-index: 100; background: var(--brand-color); border-bottom: 1px solid var(--color-line-x); }
.m96.is-stuck { box-shadow: var(--depth-md); }
.m96-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); padding-block: var(--gap-sm); }
.m96-logo { flex-shrink: 0; display: inline-flex; text-decoration: none; }
.m96-logo-pill { display: inline-flex; align-items: center; justify-content: center; background: #fff; padding: 6px 12px; border-radius: var(--round-md); }
.m96-logo-img { height: 60px; width: auto; max-width: none; }
.m96-nav { display: none; }
.m96-nav-list { display: flex; flex-wrap: nowrap; gap: var(--gap-md); list-style: none; padding: 0; margin: 0; }
.m96-nav-top { justify-content: flex-end; }
.m96-nav-bot { margin-top: var(--gap-2xs); padding-top: var(--gap-2xs); border-top: 1px solid var(--color-line-x); justify-content: flex-end; }
.m96-nav-item { display: block; }
.m96-link { font-family: var(--display-font); font-weight: var(--font-medium); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--letter-wide); text-decoration: none; color: var(--text); white-space: nowrap; transition: color var(--transition-fast) var(--ease); }
.m96-link:hover { color: var(--accent); }
.m96-link[aria-current="page"] { color: var(--accent); }
.m96-actions { display: flex; align-items: center; gap: var(--gap-sm); flex-shrink: 0; }
.m96-auth { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding-inline: var(--gap-md); border: 1px solid var(--accent); border-radius: var(--round-md); background: transparent; color: var(--text); font-family: var(--display-font); font-weight: var(--weight-bold); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--letter-wide); text-decoration: none; white-space: nowrap; transition: background var(--transition-fast) var(--ease), color var(--transition-fast) var(--ease); }
.m96-auth:hover { background: var(--accent); color: var(--page-bg); }
.m96-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; padding: 0; background: transparent; border: 1px solid var(--color-line-x); border-radius: var(--round-md); cursor: pointer; }
.m96-toggle-bar, .m96-toggle-bar::before, .m96-toggle-bar::after { display: block; width: 22px; height: 2px; background: var(--text); position: relative; }
.m96-toggle-bar::before, .m96-toggle-bar::after { content: ""; position: absolute; left: 0; }
.m96-toggle-bar::before { top: -7px; }
.m96-toggle-bar::after { top: 7px; }
.m96-drawer { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--brand-color); border-bottom: 1px solid var(--color-line-x); box-shadow: var(--depth-md); padding: var(--gap-md) var(--gutter-mobile); z-index: 120; }
.m96-drawer.is-open { display: block; }
.m96-drawer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--gap-2xs); }
.m96-drawer-item { display: block; }
.m96-drawer-link { display: block; padding: var(--gap-sm) var(--spacing-xs); font-family: var(--display-font); font-weight: var(--font-medium); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--letter-wide); text-decoration: none; color: var(--text); border-bottom: 1px solid var(--color-line-x); }
.m96-drawer-link:hover { color: var(--accent); }
.m96-drawer-link[aria-current="page"] { color: var(--accent); }

@media (min-width: 1040px) {
  .m96-logo-img { height: 88px; }
  .m96-nav { display: flex; flex-direction: column; gap: var(--gap-2xs); }
  .m96-toggle { display: none; }
  .m96-drawer { display: none !important; }
}

/* ============================================================
   HERO  .d18  (HERO-09 two-column card stack)
   ============================================================ */
.d18 { position: relative; background-color: var(--page-bg); background-image: linear-gradient(120deg, rgba(2, 35, 108, 0.90), rgba(0, 31, 95, 0.78)), url("/scenes/image-fluid.webp"); background-size: cover; background-position: center; padding-block: 60px 44px; }
.d18-inner { display: flex; flex-direction: column; gap: var(--gap-xl); }
.d18-content { max-width: 720px; }
.d18-title { font-size: var(--text-h1); color: var(--text); }
.d18-subtitle { margin-top: var(--gap-md); font-size: var(--text-h5); line-height: var(--line-normal); color: var(--fg-muted); max-width: 620px; }
.d18-cta { display: inline-flex; align-items: center; justify-content: center; margin-top: var(--gutter-lg); height: 56px; padding-inline: var(--gutter-2xl); background: var(--accent); color: var(--page-bg); border-radius: var(--round-md); font-family: var(--display-font); font-weight: var(--weight-bold); font-size: var(--size-body); text-transform: uppercase; letter-spacing: var(--letter-wide); text-decoration: none; transition: background var(--transition-fast) var(--ease); }
.d18-cta:hover { background: var(--highlight-active); color: var(--page-bg); }
.d18-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--gap-md); }
.d18-feature { display: flex; align-items: center; gap: var(--gap-md); padding: var(--gap-md) var(--gutter-lg); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--color-line-x); border-radius: var(--round-lg); }
.d18-feature-num { font-family: var(--display-font); font-weight: var(--weight-bold); font-size: var(--type-h3); color: var(--accent); flex-shrink: 0; }
.d18-feature-title { font-family: var(--display-font); font-size: var(--size-body); font-weight: var(--weight-bold); line-height: var(--leading-tight); color: var(--text); }
@media (min-width: 1040px) {
  .d18 { padding-block: 88px 64px; }
  .d18-inner { display: grid; grid-template-columns: 1.55fr 1fr; align-items: center; gap: var(--gutter-2xl); }
}

/* ============================================================
   BREADCRUMBS  .y63  (BREAD-02 pill chips)
   ============================================================ */
.y63 { background: var(--page-bg); padding-block: var(--gap-md) var(--gap-sm); }
.y63-list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-xs); list-style: none; margin: 0; padding: 0; }
.y63-item { display: inline-flex; }
.y63-link, .y63-current { display: inline-block; padding: var(--gap-2xs) var(--gap-sm); border-radius: var(--round-full); font-size: var(--type-micro); text-transform: uppercase; letter-spacing: var(--letter-wide); text-decoration: none; }
.y63-link { background: var(--card-bg); color: var(--fg-muted); transition: background var(--transition-fast) var(--ease), color var(--transition-fast) var(--ease); }
.y63-link:hover { background: var(--accent); color: var(--page-bg); }
.y63-current { background: rgba(33, 205, 254, 0.16); color: var(--text); }

/* ============================================================
   PAGE HEADER  .z24  (PHEAD-01)
   ============================================================ */
.z24 { background: var(--page-bg); padding-block: var(--gutter-2xl) var(--gap-xl); border-bottom: 1px solid var(--color-line-x); }
.z24-inner { display: flex; flex-direction: column; gap: var(--gap-md); }
.z24-eyebrow { font-family: var(--body-font); font-weight: var(--font-medium); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--letter-wide); color: var(--accent); }
.z24-title { font-size: var(--text-h1); max-width: 920px; color: var(--text); }
.z24-divider { width: 60px; height: 3px; background: var(--accent); border-radius: var(--round-full); }
.z24-desc { font-size: var(--text-h5); line-height: var(--line-normal); color: var(--fg-muted); max-width: 720px; }

/* ============================================================
   PROSE  .r90  (PROSE-04 drop-cap magazine)
   ============================================================ */
.r90 { background: var(--page-bg); padding-block: var(--gap-xl); }
.r90-section { margin: 0; }
.r90-section + .r90-section { margin-top: var(--gutter-2xl); }
.r90-h2 { font-size: var(--size-h2); margin-bottom: var(--gap-md); color: var(--text); }
.r90-p { font-size: var(--size-body); line-height: var(--line-loose); color: var(--text); margin-bottom: var(--gap-md); }
.r90-section > .r90-p:first-of-type::first-letter { float: left; font-family: var(--display-font); font-weight: var(--weight-bold); font-size: 3.6em; line-height: 0.82; margin: 0.06em 0.1em 0 0; color: var(--accent); }
.r90-ul, .r90-ol { margin: 0 0 var(--gap-md); padding-left: var(--gutter-lg); color: var(--text); }
.r90-ul li, .r90-ol li { font-size: var(--size-body); line-height: var(--line-normal); margin-bottom: var(--spacing-xs); }
.r90-link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.r90-link:hover { color: var(--highlight-active); text-decoration-thickness: 2px; }

/* ============================================================
   ITEMS GRID  .e48  (GRID-11 mixed block sizes)
   ============================================================ */
.e48 { background: var(--page-bg); padding-block: var(--gap-xl); }
.e48-h2 { font-size: var(--size-h2); margin-bottom: var(--gutter-lg); color: var(--text); }
.e48-grid { display: grid; grid-template-columns: 1fr; gap: var(--gap-md); }
.e48-item { background: var(--card-bg); border: 1px solid var(--color-line-x); border-radius: var(--round-lg); padding: var(--gutter-lg); }
.e48-item-title { font-family: var(--display-font); font-size: var(--size-h4); font-weight: var(--weight-bold); line-height: var(--leading-tight); color: var(--text); margin-bottom: var(--gap-sm); }
.e48-item-text { font-size: var(--text-sm); line-height: var(--line-normal); color: var(--fg-muted); }
@media (min-width: 640px) { .e48-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) {
  .e48-grid { grid-template-columns: repeat(3, 1fr); }
  .e48-item:first-child { grid-column: span 2; grid-row: span 2; }
  .e48-item:first-child .e48-item-title { font-size: var(--type-h3); }
}

/* ============================================================
   REVIEWS  .y85  (REV-02 quote editorial)
   ============================================================ */
.y85 { background: var(--page-bg); padding-block: var(--gap-xl); }
.y85-h2 { font-size: var(--size-h2); margin-bottom: var(--gutter-lg); color: var(--text); }
.y85-list { display: flex; flex-direction: column; }
.y85-item { position: relative; max-width: var(--container-narrow-x); padding: var(--gutter-lg) 0 var(--gutter-lg) var(--gap-xl); border-bottom: 1px solid var(--color-line-x); }
.y85-item:last-child { border-bottom: 0; }
.y85-item::before { content: "\201C"; position: absolute; left: -6px; top: 6px; font-family: var(--display-font); font-weight: var(--weight-bold); font-size: 64px; line-height: 1; color: var(--accent); opacity: 0.55; }
.y85-quote { margin: 0; }
.y85-quote p { font-family: var(--display-font); font-style: italic; font-size: var(--size-h4); line-height: var(--line-normal); color: var(--text); }
.y85-attr { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-sm); margin-top: var(--gap-md); font-size: var(--text-sm); color: var(--fg-muted); }
.y85-author { font-style: normal; font-weight: var(--weight-bold); color: var(--text); }
.y85-rating { color: var(--accent); font-weight: var(--weight-bold); }
.y85-date { color: var(--fg-muted); }

/* ============================================================
   FAQ  .i65  (FAQ-05 native details)
   ============================================================ */
.i65 { background: var(--page-bg); padding-block: var(--gap-xl); }
.i65-h2 { font-size: var(--size-h2); margin-bottom: var(--gutter-lg); color: var(--text); }
.i65-list { list-style: none; margin: 0; padding: 0; max-width: 900px; }
.i65-item-wrap { display: block; }
.i65-item { border-bottom: 1px solid var(--color-line-x); padding-block: var(--gap-md); }
.i65-q { position: relative; cursor: pointer; list-style: none; padding-right: var(--gap-xl); font-family: var(--display-font); font-size: var(--text-h5); font-weight: var(--weight-bold); color: var(--text); }
.i65-q::-webkit-details-marker { display: none; }
.i65-q::after { content: ""; position: absolute; right: 4px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: translateY(-70%) rotate(45deg); transition: transform var(--speed-base) var(--ease); }
.i65-item[open] .i65-q::after { transform: translateY(-30%) rotate(-135deg); }
.i65-q:hover { color: var(--accent); }
.i65-a { padding-top: var(--gap-sm); }
.i65-a p { font-size: var(--size-body); line-height: var(--line-loose); color: var(--fg-muted); }

/* ============================================================
   CTA  .b63  (CTA-05 dual action)
   ============================================================ */
.b63 { background: var(--brand-color); padding-block: var(--gap-xl); }
.b63-inner { display: flex; flex-direction: column; align-items: flex-start; }
.b63-h2 { font-size: var(--size-h2); color: var(--text); }
.b63-text { margin-top: var(--gap-md); font-size: var(--size-body); line-height: var(--line-normal); color: var(--fg-muted); max-width: 720px; }
.b63-actions { display: flex; flex-wrap: wrap; gap: var(--gap-md); margin-top: var(--gutter-lg); }
.b63-btn { display: inline-flex; align-items: center; justify-content: center; height: 56px; padding-inline: var(--gutter-2xl); border-radius: var(--round-md); font-family: var(--display-font); font-weight: var(--weight-bold); font-size: var(--size-body); text-transform: uppercase; letter-spacing: var(--letter-wide); text-decoration: none; transition: background var(--transition-fast) var(--ease), color var(--transition-fast) var(--ease); }
.b63-btn-primary { background: var(--accent); color: var(--page-bg); border: 1px solid var(--accent); }
.b63-btn-primary:hover { background: var(--highlight-active); color: var(--page-bg); }
.b63-btn-secondary { background: transparent; color: var(--text); border: 1px solid var(--fg-muted); }
.b63-btn-secondary:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); border-color: var(--text); }

/* ============================================================
   DATA TABLE  .w13  (TABLE-07)
   ============================================================ */
.w13 { background: var(--page-bg); padding-block: var(--gap-xl); }
.w13-h2 { font-size: var(--size-h2); margin-bottom: var(--gutter-lg); color: var(--text); }
.w13-scroll { overflow-x: auto; border: 1px solid var(--color-line-x); border-radius: var(--round-md); }
.w13-table { width: 100%; min-width: 520px; border-collapse: collapse; background: var(--card-bg); }
.w13-table th { background: var(--brand-color); text-align: left; padding: var(--gap-md); font-family: var(--body-font); font-weight: var(--font-medium); font-size: var(--size-h6); text-transform: uppercase; letter-spacing: var(--letter-wide); color: var(--accent); }
.w13-table td { padding: var(--gap-md); font-size: var(--text-sm); color: var(--fg-muted); border-top: 1px solid var(--color-line-x); }
.w13-table td:first-child { color: var(--text); font-weight: var(--font-medium); }
.w13-table td:nth-child(even) { background: rgba(255, 255, 255, 0.04); }

/* ============================================================
   PAGE IMAGES  .e70
   ============================================================ */
.e70 { background: var(--page-bg); padding-block: var(--gutter-lg); }
.e70-inner { display: grid; gap: var(--gutter-lg); grid-template-columns: 1fr; }
.e70-context, .e70-detail { margin: 0; }
.e70-context img, .e70-detail img { width: 100%; height: auto; border-radius: var(--round-lg); border: 1px solid var(--color-line-x); }
@media (min-width: 860px) { .e70-inner:has(.e70-detail) { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   LEGAL  .o02  (LEGAL-06)
   ============================================================ */
.o02 { background: var(--page-bg); padding-block: var(--gap-xl); }
.o02-doc { max-width: var(--measure); }
.o02-updated { font-size: var(--text-sm); color: var(--fg-muted); margin-bottom: var(--gutter-lg); }
.o02-body { counter-reset: legal; }
.o02-section { counter-increment: legal; margin-bottom: var(--gap-md); }
.o02-section-h { font-size: var(--size-h4); color: var(--text); margin-bottom: var(--spacing-xs); }
.o02-section-h::before { content: "§ " counter(legal) ". "; color: var(--fg-muted); }
.o02-p { font-size: var(--text-sm); line-height: var(--line-loose); color: var(--fg-muted); margin-bottom: var(--gap-sm); }
.o02-contacts { margin-top: var(--gap-xl); padding: var(--gap-md); background: var(--card-bg); border-radius: var(--round-md); }
.o02-contacts-h { font-size: var(--text-h5); color: var(--text); margin-bottom: var(--gap-sm); }
.o02-contact-list { padding-left: var(--gutter-lg); color: var(--fg-muted); }
.o02-contact-item { font-size: var(--text-sm); line-height: var(--line-normal); margin-bottom: var(--spacing-xs); }
.o02-disclaimer { margin-top: var(--gap-xl); padding: var(--gap-md); background: rgba(220, 38, 38, 0.12); border-left: 3px solid #f16b6b; border-radius: var(--corner-xs); font-size: var(--text-sm); line-height: var(--line-normal); color: var(--text); }

/* ============================================================
   AUTHOR CARD  .z86  (AUTH-08 + articles)
   ============================================================ */
.z86 { background: var(--page-bg); padding-block: var(--gap-xl); }
.z86-card { display: flex; flex-direction: column; gap: var(--gutter-lg); }
.z86-portrait { width: 140px; height: 140px; border-radius: var(--round-full); object-fit: cover; object-position: center 20%; border: 2px solid var(--card-bg); flex-shrink: 0; }
.z86-body { max-width: 760px; }
.z86-name { font-size: var(--type-h3); color: var(--text); }
.z86-role { margin-top: var(--gap-2xs); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--letter-wide); color: var(--accent); }
.z86-bio { margin-top: var(--gap-md); font-size: var(--size-body); line-height: var(--line-loose); color: var(--fg-muted); }
.z86-exp { list-style: none; margin: var(--gap-md) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--spacing-xs); }
.z86-exp-item { display: inline-flex; }
.z86-tag { display: inline-block; padding: var(--gap-2xs) var(--gap-sm); background: var(--brand-color); border-radius: var(--round-full); font-size: var(--type-micro); text-transform: uppercase; letter-spacing: var(--letter-wide); color: var(--text); }
.z86-articles { margin-top: var(--gutter-2xl); padding-top: var(--gutter-lg); border-top: 1px solid var(--color-line-x); }
.z86-articles-h { font-size: var(--size-h4); color: var(--text); margin-bottom: var(--gap-md); }
.z86-articles-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-xs); }
.z86-art-item { display: block; }
.z86-art-link { font-size: var(--size-body); color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.z86-art-link:hover { color: var(--highlight-active); }
@media (min-width: 860px) { .z86-card { flex-direction: row; align-items: flex-start; } }

/* ============================================================
   CONTACT FORM  .q56  (FORM-06 floating labels)
   ============================================================ */
.q56 { background: var(--page-bg); padding-block: var(--gap-xl); }
.q56-doc { max-width: 640px; }
.q56-intro { font-size: var(--size-body); line-height: var(--line-normal); color: var(--fg-muted); margin-bottom: var(--gutter-lg); }
.q56-form { display: flex; flex-direction: column; gap: var(--gap-md); }
.q56-field { position: relative; }
.q56-input, .q56-textarea { width: 100%; font-family: var(--body-font); font-size: var(--size-body); color: var(--text); background: var(--card-bg); border: 1px solid var(--color-line-x); border-radius: var(--round-md); padding: var(--gutter-lg) var(--gap-md) var(--gap-sm); }
.q56-textarea { min-height: 132px; resize: vertical; }
.q56-input:focus, .q56-textarea:focus { outline: none; border-color: var(--accent); }
.q56-label { position: absolute; top: var(--gap-md); left: var(--gap-md); font-size: var(--size-body); color: var(--fg-muted); pointer-events: none; transition: top var(--speed-base) var(--ease), font-size var(--speed-base) var(--ease), color var(--speed-base) var(--ease); }
.q56-input:focus + .q56-label, .q56-input:not(:placeholder-shown) + .q56-label,
.q56-textarea:focus + .q56-label, .q56-textarea:not(:placeholder-shown) + .q56-label { top: var(--spacing-xs); font-size: var(--type-micro); color: var(--accent); }
.q56-submit { align-self: flex-start; height: 52px; padding-inline: var(--gap-xl); background: var(--accent); color: var(--page-bg); border: 0; border-radius: var(--round-md); font-family: var(--display-font); font-weight: var(--weight-bold); font-size: var(--size-body); text-transform: uppercase; letter-spacing: var(--letter-wide); cursor: pointer; transition: background var(--transition-fast) var(--ease); }
.q56-submit:hover { background: var(--highlight-active); }
.q56-success { display: none; margin-top: var(--gap-md); padding: var(--gap-md); background: rgba(34, 197, 94, 0.14); border: 1px solid rgba(34, 197, 94, 0.4); border-radius: var(--round-md); color: var(--text); }
.q56-success.is-visible { display: block; }

/* ============================================================
   ERROR  .i75  (ERR-03)
   ============================================================ */
.i75 { background: var(--page-bg); padding-block: var(--gutter-2xl); }
.i75-doc { max-width: 600px; margin-inline: auto; text-align: center; }
.i75-title { font-size: var(--size-h2); color: var(--text); }
.i75-text { margin-top: var(--gap-md); font-size: var(--size-body); line-height: var(--line-loose); color: var(--fg-muted); }
.i75-btn { display: inline-flex; align-items: center; justify-content: center; margin-top: var(--gutter-lg); height: 48px; padding-inline: var(--gap-xl); background: var(--accent); color: var(--page-bg); border-radius: var(--round-md); font-family: var(--display-font); font-weight: var(--weight-bold); font-size: var(--size-body); text-transform: uppercase; letter-spacing: var(--letter-wide); text-decoration: none; transition: background var(--transition-fast) var(--ease); }
.i75-btn:hover { background: var(--highlight-active); color: var(--page-bg); }

/* ============================================================
   BYLINE  .g25  (BYLINE-03 thin strip)
   ============================================================ */
.g25 { background: var(--page-bg); border-top: 1px solid var(--color-line-x); padding-block: var(--gap-md); }
.g25-inner { display: flex; }
.g25-portrait { width: 40px; height: 40px; border-radius: var(--round-full); object-fit: cover; flex-shrink: 0; margin-right: var(--gap-sm); }
.g25-meta { font-size: var(--text-sm); line-height: var(--line-normal); color: var(--fg-muted); align-self: center; }
.g25-name { color: var(--accent); text-decoration: none; font-weight: var(--weight-bold); }
.g25-name:hover { text-decoration: underline; }
.g25-role { color: var(--fg-muted); }
.g25-dates { color: var(--fg-muted); }

/* ============================================================
   FOOTER  .h18  (FOOT-05 four-column)
   ============================================================ */
.h18 { background: var(--brand-color); padding-block: var(--gutter-2xl) var(--gap-xl); border-top: 1px solid var(--color-line-x); }
.h18-inner { display: grid; grid-template-columns: 1fr; gap: var(--gap-xl); }
.h18-col { min-width: 0; }
.h18-brand { max-width: 360px; }
.h18-logo { display: inline-flex; text-decoration: none; }
.h18-logo-pill { display: inline-flex; align-items: center; justify-content: center; background: #fff; padding: 6px 12px; border-radius: var(--round-md); }
.h18-logo-img { height: 56px; width: auto; max-width: none; }
.h18-tagline { margin-top: var(--gap-md); font-size: var(--text-sm); line-height: var(--line-normal); color: var(--fg-muted); }
.h18-heading { font-family: var(--display-font); font-weight: var(--weight-bold); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--letter-wide); color: var(--text); margin-bottom: var(--gap-md); }
.h18-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--gap-sm); }
.h18-item { display: block; }
.h18-link { font-size: var(--text-sm); color: var(--fg-muted); text-decoration: none; transition: color var(--transition-fast) var(--ease); }
.h18-link:hover { color: var(--accent); }
.h18-bottom { margin-top: var(--gap-xl); padding-top: var(--gutter-lg); border-top: 1px solid var(--color-line-x); }
.h18-copy { display: block; font-size: var(--type-micro); color: var(--fg-muted); }
@media (min-width: 640px) { .h18-inner { grid-template-columns: repeat(2, 1fr); } .h18-brand { grid-column: 1 / -1; } }
@media (min-width: 1040px) { .h18-inner { grid-template-columns: 1.5fr 1fr 1fr 1fr; } .h18-brand { grid-column: auto; } }

/* ============================================================
   COOKIE  .w50  (COOK-02 full-width bottom strip)
   ============================================================ */
.w50 { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; background: var(--brand-color); border-top: 1px solid var(--color-line-x); padding-block: var(--gap-md); box-shadow: var(--depth-md); }
.w50.is-visible { display: block; }
.w50-inner { display: flex; flex-direction: column; align-items: stretch; gap: var(--gap-md); }
.w50-message { flex: 1; font-size: var(--text-sm); line-height: var(--line-normal); color: var(--fg-muted); }
.w50-actions { display: flex; gap: var(--gap-sm); }
.w50-btn { flex: 1 1 auto; height: 40px; padding-inline: var(--gap-md); border-radius: var(--round-md); font-family: var(--display-font); font-weight: var(--weight-bold); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--letter-wide); cursor: pointer; transition: background var(--transition-fast) var(--ease), color var(--transition-fast) var(--ease); }
.w50-accept { background: var(--accent); color: var(--page-bg); border: 1px solid var(--accent); }
.w50-accept:hover { background: var(--highlight-active); color: var(--page-bg); }
.w50-decline { background: transparent; color: var(--text); border: 1px solid var(--color-line-x); }
.w50-decline:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); }
@media (min-width: 720px) {
  .w50-inner { flex-direction: row; align-items: center; justify-content: space-between; }
  .w50-actions { flex: 0 0 auto; }
  .w50-btn { flex: 0 0 auto; }
}

/* ---------- mobile typography scale (TYPO-08) ---------- */
@media (max-width: 859px) {
  :root { --text-h1: 34px; --size-h2: 26px; --type-h3: 20px; --size-h4: 16px; --text-h5: 14px; --size-body: 15px; }
}