/* Промір — гідрографічні роботи. One shared stylesheet. Dark "deep water" palette, sand for the shoreline. */

:root {
  color-scheme: dark;
  --abyss: #07192a;      /* page ground */
  --deep: #0b2438;       /* raised panels */
  --deep-2: #0f2d45;
  --line: #1d4159;       /* hairlines */
  --ink: #eaf4f6;        /* text */
  --mist: #9db8c4;       /* secondary text */
  --sand: #e8c872;       /* shoreline accent, primary actions */
  --sand-deep: #d6b04f;
  --sand-ink: #1b1605;
  --aqua: #8fdcc8;       /* shallow water */
  --teal: #4fb2bc;
  --paper: #f1f5f4;
  --paper-ink: #10303f;

  --font-display: "Unbounded", "Arial Black", "Segoe UI", system-ui, sans-serif;
  --font-body: "Manrope", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-mono: "JetBrains Mono", Consolas, "SFMono-Regular", Menlo, monospace;

  --wrap: 1200px;
  --radius: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--abyss);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, canvas, svg { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; border-radius: 3px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: 24px; }

h1, h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.05rem, 4.2vw, 3.35rem); line-height: 1.06; }
h2 { font-size: clamp(1.55rem, 2.8vw, 2.25rem); line-height: 1.12; }
h3 { font-family: var(--font-body); font-size: 1.12rem; font-weight: 700; line-height: 1.3; margin: 0; }
p { margin: 0; }

.eyebrow {
  font-family: var(--font-mono); font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--aqua);
}
.muted { color: var(--mist); }

.skip-link { position: absolute; left: -9999px; top: 8px; background: var(--sand); color: var(--sand-ink); padding: 8px 14px; z-index: 50; }
.skip-link:focus { left: 16px; }

/* ---------- buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-body); font-weight: 700; font-size: 0.98rem; text-decoration: none;
  padding: 13px 17px; border-radius: var(--radius); border: 1px solid transparent;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--sand); color: var(--sand-ink); }
.btn-primary:hover { background: var(--sand-deep); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: rgba(15, 45, 69, 0.4); }
.btn-ghost:hover { border-color: var(--teal); }
.btn:active { transform: translateY(1px); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(7, 25, 42, 0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.logo svg { width: 30px; height: 30px; }
.logo span { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; letter-spacing: 0.01em; white-space: nowrap; }
.logo small { font-family: var(--font-mono); font-size: 0.6em; font-weight: 500; letter-spacing: 0.1em; color: var(--aqua);
  margin-right: 0.45em; vertical-align: 0.2em; }
.nav-links { display: flex; gap: 24px; }
.nav-links a { text-decoration: none; color: var(--mist); font-weight: 600; font-size: 0.95rem; }
.nav-links a:hover { color: var(--ink); }
.header-call { padding: 9px 16px; font-size: 0.92rem; }
/* Instagram in the header, icon only, so the profile is visible without
   scrolling to the footer. The wrap is a flex row with a 28px gap and the logo
   holding margin-right:auto, so this needs no margin of its own. */
.header-ig {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none;
  border-radius: 6px;
  color: var(--mist); text-decoration: none;
  border: 1px solid var(--line);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.header-ig svg { width: 19px; height: 19px; }
.header-ig:hover { color: var(--sand); border-color: var(--sand); background: rgba(232, 200, 114, 0.08); }
.header-ig:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); gap: 52px; align-items: center; padding-block: 64px 80px; }
.hero-copy { display: grid; gap: 22px; }
.lede { font-size: 1.12rem; color: var(--mist); max-width: 46ch; }
.lede strong { color: var(--ink); font-weight: 600; }
.hero-facts { list-style: none; margin: 6px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hero-facts li { display: grid; gap: 2px; }
.hero-facts b { font-weight: 700; font-size: 0.98rem; }
.hero-facts span { color: var(--mist); font-size: 0.86rem; line-height: 1.4; }

.chart { margin: 0; display: grid; gap: 10px; }
.chart-frame { position: relative; aspect-ratio: 7 / 5; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #081a27; }
.chart-frame > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; touch-action: pan-y; }
.hud {
  position: absolute; top: 12px; left: 12px; z-index: 1; pointer-events: none;
  display: grid; grid-template-columns: auto auto; gap: 3px 16px;
  font-family: var(--font-mono); font-size: 0.7rem; line-height: 1.35;
  background: rgba(7, 25, 42, 0.8); border: 1px solid var(--line); border-radius: 4px; padding: 9px 12px;
  font-variant-numeric: tabular-nums;
}
.hud dt { color: var(--mist); letter-spacing: 0.08em; text-transform: uppercase; }
.hud dd { margin: 0; color: var(--ink); font-weight: 500; text-align: right; }
.hud dd.fix { color: var(--aqua); }
.hud dd.status { color: var(--sand); text-transform: uppercase; letter-spacing: 0.06em; }
.echo {
  position: absolute; right: 12px; bottom: 30px; z-index: 1; width: 34%; min-width: 176px; height: 27%;
  border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: #06141f;
  pointer-events: none; transition: opacity 0.6s ease;
}
.echo canvas { display: block; width: 100%; height: 100%; }
.chart-frame.is-3d .echo { opacity: 0; }
.chart figcaption { font-size: 0.84rem; color: var(--mist); }

/* ---------- sections ---------- */
.section { padding-block: 88px 0; }
.section-head { display: grid; gap: 12px; align-content: start; max-width: 62ch; margin-bottom: 40px; }
.section-head p { color: var(--mist); }

/* services: a legend table, not cards */
.services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.service { display: grid; gap: 10px; align-content: start; padding: 30px 28px 34px; border-bottom: 1px solid var(--line); }
.service:not(:nth-child(3n)) { border-right: 1px solid var(--line); }
.service:nth-child(3n + 1) { padding-left: 0; }
.service svg { width: 30px; height: 30px; color: var(--aqua); }
.service p { color: var(--mist); font-size: 0.97rem; }

/* rivers: longitudinal profile along the fairway */
.rivers { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 52px; align-items: center; }
.profile { margin: 0; display: grid; gap: 10px; }
.profile-frame { position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #081a27; }
.profile-frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.profile figcaption { font-size: 0.84rem; color: var(--mist); }
.rivers-copy .section-head { margin-bottom: 26px; }
.reference { margin: 0; padding-top: 20px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.reference dt { font-family: var(--font-mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sand); }
.reference dd { margin: 0; font-size: 1.02rem; line-height: 1.55; }

/* process: stations on a survey line */
.transect { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; position: relative; }
.transect::before {
  content: ""; position: absolute; left: 11px; right: 0; top: 11px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--teal) 0 10px, transparent 10px 17px);
  opacity: 0.55;
}
.station { position: relative; display: grid; gap: 8px; padding-top: 40px; }
.station::before {
  content: ""; position: absolute; top: 0; left: 0; width: 24px; height: 24px; border-radius: 50%;
  background: var(--abyss); border: 2px solid var(--sand); box-shadow: inset 0 0 0 5px var(--abyss), inset 0 0 0 12px var(--sand);
}
.station .step { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sand); }
.station p { color: var(--mist); font-size: 0.95rem; }

/* results: deliverables and a sample sheet */
.results { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; }
.deliverables { margin: 0; border-top: 1px solid var(--line); }
.deliverable { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.deliverable dt { font-weight: 700; }
.deliverable dd { margin: 0; color: var(--mist); font-size: 0.95rem; grid-column: 1; }
.deliverable .formats { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.chip { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.04em; color: var(--aqua);
  border: 1px solid var(--line); border-radius: 4px; padding: 2px 7px; white-space: nowrap; }

.sheet { margin: 0; background: var(--paper); color: var(--paper-ink); border-radius: 4px; padding: 14px;
  box-shadow: 0 40px 70px -40px rgba(0, 0, 0, 0.75); display: grid; gap: 12px; transform: rotate(-0.6deg); }
.sheet-map { position: relative; aspect-ratio: 4 / 3; border: 1.5px solid var(--paper-ink); }
.sheet-map canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.titleblock { display: grid; grid-template-columns: 1.4fr 1fr 1fr; border: 1.5px solid var(--paper-ink); font-family: var(--font-mono); font-size: 0.68rem; line-height: 1.35; }
.titleblock div { padding: 6px 8px; border-right: 1px solid rgba(16, 48, 63, 0.45); border-bottom: 1px solid rgba(16, 48, 63, 0.45); }
.titleblock div:nth-child(3n) { border-right: 0; }
.titleblock div:nth-last-child(-n + 3) { border-bottom: 0; }
.titleblock b { display: block; font-family: var(--font-body); font-size: 0.8rem; font-weight: 800; }
.titleblock small { display: block; font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }
.sheet figcaption { font-family: var(--font-body); font-size: 0.8rem; color: #4a6470; }

/* audience */
.audience { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.audience li { padding: 22px 0; border-top: 1px solid var(--line); display: grid; gap: 6px; align-content: start; }
.audience p { color: var(--mist); font-size: 0.95rem; }

/* credential: who does the work, next to the scanned qualification certificate */
.credential { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; }
.credential .facts { margin-top: 8px; }
.certificate { margin: 0; display: grid; gap: 12px; }
.certificate-link { display: block; border-radius: 4px; }
.certificate-link img { display: block; width: 100%; height: auto; border-radius: 4px;
  border: 1px solid var(--line); box-shadow: 0 40px 70px -40px rgba(0, 0, 0, 0.75); }
.certificate-link:focus-visible { outline: 2px solid var(--aqua); outline-offset: 4px; }
.certificate figcaption { font-family: var(--font-body); font-size: 0.84rem; color: var(--mist); }
.certificates { display: grid; gap: 20px; }

/* photographs from the boat and the bank: a fixed 3/4 crop keeps the row even
   however the phone was held, and each frame opens full size in a new tab */
.work-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.work-gallery figure { margin: 0; display: grid; gap: 10px; align-content: start; }
.work-gallery a { display: block; border-radius: 4px; }
.work-gallery a:focus-visible { outline: 2px solid var(--aqua); outline-offset: 4px; }
/* height:auto is load-bearing -- the markup carries height="1200", and an
   explicit height would win over aspect-ratio and undo the crop. */
.work-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 4px; border: 1px solid var(--line); }
.work-gallery figcaption { font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.55; color: var(--mist); }

/* faq */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; }
.faq-list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; font-weight: 700; font-size: 1.04rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--sand); font-size: 1.2rem; line-height: 1.2; }
.faq details[open] summary::after { content: "−"; }
.faq details p { color: var(--mist); padding: 0 0 22px; max-width: 64ch; }

/* call to action */
.cta { margin-top: 96px; background: var(--deep); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(28px, 5vw, 56px); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 36px; align-items: center;
  background-image: radial-gradient(120% 140% at 100% 0%, rgba(79, 178, 188, 0.14), transparent 55%); }
.cta .phone { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 3vw, 2.1rem); letter-spacing: -0.01em; text-decoration: none; display: inline-block; margin-bottom: 14px; }
.cta .phone:hover { color: var(--sand); }
.cta p { color: var(--mist); }
.cta-copy { display: grid; gap: 14px; }

/* footer */
.site-footer { margin-top: 96px; border-top: 1px solid var(--line); padding-block: 48px 36px; font-size: 0.93rem; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 3fr)); gap: 32px; }
.footer-grid nav, .footer-contacts { display: grid; gap: 6px; align-content: start; }
.footer-grid a { color: var(--mist); text-decoration: none; }
.footer-grid a:hover { color: var(--ink); }
.footer-title { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); margin-bottom: 4px; }
.footer-brand { display: grid; gap: 10px; align-content: start; }
.footer-brand p { color: var(--mist); max-width: 34ch; }
.footer-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; color: var(--mist); font-size: 0.85rem; }
.footer-bottom a { color: var(--ink); }

/* ---------- links ---------- */
.text-link { color: var(--aqua); font-weight: 700; text-decoration: none; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.service { position: relative; }
.service h3 a { text-decoration: none; }
.service h3 a::after { content: ""; position: absolute; inset: 0; }   /* the whole row is the link */
.service h3 .arrow { color: var(--sand); margin-left: 6px; transition: margin-left 0.18s ease; }
.service:hover h3 .arrow { margin-left: 10px; }
.service:hover h3 a { color: var(--ink); }

/* ---------- inner pages ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; padding-top: 28px; font-family: var(--font-mono); font-size: 0.74rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--mist); }
.crumbs a { color: var(--mist); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--aqua); }

.page-hero { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); gap: 52px; align-items: center; padding-block: 28px 64px; }
.page-hero h1 { font-size: clamp(1.85rem, 3.5vw, 2.8rem); }

.page-body { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 56px; align-items: start;
  border-top: 1px solid var(--line); padding-top: 56px; }
.prose h2 { font-size: clamp(1.35rem, 2.3vw, 1.8rem); margin: 52px 0 16px; }
.prose > h2:first-child { margin-top: 0; }
.prose p { color: var(--mist); max-width: 68ch; margin-bottom: 14px; }
.prose p strong, .prose li strong { color: var(--ink); font-weight: 700; }
.prose ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; max-width: 68ch; }
.prose ul li { position: relative; padding-left: 24px; color: var(--mist); }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 11px; height: 2px; background: var(--sand); }
.prose ol.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 18px; max-width: 68ch; }
.prose ol.steps li { position: relative; padding-left: 58px; color: var(--mist); counter-increment: step; }
.prose ol.steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 0;
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--sand); border: 1px solid var(--line); border-radius: 4px; padding: 2px 8px; }
.prose ol.steps b { display: block; color: var(--ink); margin-bottom: 2px; }
.prose .reference { margin: 24px 0 8px; max-width: 68ch; }

.page-sidebar { position: sticky; top: 96px; display: grid; gap: 18px; background: var(--deep); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px; }
.page-sidebar h2 { font-family: var(--font-mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--aqua); }
.facts { margin: 0; display: grid; gap: 0; }
.facts div { display: grid; gap: 2px; padding: 11px 0; border-top: 1px solid var(--line); }
.facts dt { font-size: 0.82rem; color: var(--mist); }
.facts dd { margin: 0; font-weight: 700; }
.page-sidebar .btn { justify-content: center; }
.page-sidebar .actions { display: grid; }

.related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
.related a { display: grid; gap: 6px; padding: 20px 0; border-top: 1px solid var(--line); text-decoration: none; }
.related a b { font-weight: 700; }
.related a span { color: var(--mist); font-size: 0.93rem; }
.related a:hover b { color: var(--sand); }

.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.contact-card { display: grid; gap: 10px; align-content: start; background: var(--deep); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; text-decoration: none; transition: border-color 0.18s ease; }
.contact-card:hover { border-color: var(--sand); }
.contact-card small { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--aqua); }
.contact-card b { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; }
.contact-card span { color: var(--mist); font-size: 0.93rem; }
.contact-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; margin-top: 56px; padding-top: 48px; border-top: 1px solid var(--line); }

.contacts-head { padding-top: 28px; }
.contact-details h2 { margin-top: 0; }

.not-found { display: grid; gap: 18px; justify-items: start; padding-block: 72px 24px; max-width: 60ch; }
.not-found .code { font-family: var(--font-mono); color: var(--sand); letter-spacing: 0.12em; }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .hero { grid-template-columns: 1fr; gap: 36px; padding-block: 40px 56px; }
  .results, .faq, .cta, .rivers, .credential, .page-hero, .page-body, .contact-details { grid-template-columns: 1fr; }
  .page-hero { gap: 32px; padding-block: 20px 48px; }
  .page-sidebar { position: static; }
  .related, .contact-grid { grid-template-columns: 1fr 1fr; }
  .rivers { gap: 28px; }
  .rivers-copy { order: -1; }
  .transect { grid-template-columns: 1fr; gap: 0; }
  .transect::before { left: 11px; right: auto; top: 12px; bottom: 12px; width: 2px; height: auto;
    background: repeating-linear-gradient(180deg, var(--teal) 0 10px, transparent 10px 17px); }
  .station { padding: 0 0 28px 44px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .nav-links { display: none; }
  .services { grid-template-columns: 1fr 1fr; }
  .service, .service:nth-child(3n + 1) { padding: 26px 20px 28px 0; border-right: 0; }
  .service:nth-child(odd) { border-right: 1px solid var(--line); }
  .service:nth-child(even) { padding-left: 20px; }
  .audience { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .wrap { padding-inline: 18px; }
  .hero-facts { grid-template-columns: 1fr; gap: 10px; }
  .services, .audience, .related, .contact-grid { grid-template-columns: 1fr; }
  .service, .service:nth-child(odd), .service:nth-child(even) { padding: 24px 0; border-right: 0; }
  .deliverable { grid-template-columns: 1fr; }
  .deliverable .formats { grid-column: 1; grid-row: auto; justify-content: flex-start; }
  .titleblock { grid-template-columns: 1fr 1fr; }
  .titleblock div:nth-child(3n) { border-right: 1px solid rgba(16, 48, 63, 0.45); }
  .titleblock div:nth-child(2n) { border-right: 0; }
  .titleblock div:nth-last-child(-n + 3) { border-bottom: 1px solid rgba(16, 48, 63, 0.45); }
  .titleblock div:nth-last-child(-n + 2) { border-bottom: 0; }
  .hud { font-size: 0.62rem; gap: 2px 10px; padding: 7px 9px; }
  .hud-extra, .echo { display: none; }
  .profile-frame { aspect-ratio: 4 / 3; }
  .header-call .label { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}