/* ═══════════════════════════════════════════════════════════════════════
   TeamHub website, shared stylesheet.

   Blue provides the structure. Orange marks the one point of action on a
   page. Everything else is white space and Inter.

   CONTRAST
   --------
   The brand orange #F75200 carries 3.39:1 against white, which is enough for
   a rule, a dot or a focus ring but not for text. So the palette splits it:

     --orange       #F75200  the brand signal. Never carries text.
     --orange-cta   #C74200  filled buttons, white label at 4.99:1
     --orange-text  #B83D00  small orange text and labels at 5.67:1

   Measured pairs used in this file, all against white:
     Hub blue #10537C      8.24:1
     Bridge   #177BA6      4.75:1   links
     Muted    #5A6B7A      5.50:1   captions, meta
     Ink      #10202D     16.8:1    body
   Network grey #949EAB is 2.71:1 and is therefore only ever a line.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --hub:          #10537C;
  --hub-deep:     #0B3D5D;
  --bridge:       #177BA6;
  --orange:       #F75200;
  --orange-cta:   #C74200;
  --orange-text:  #B83D00;
  --node:         #949EAB;
  --ink:          #10202D;
  --muted:        #5A6B7A;
  --field:        #F4F4F5;
  --tint:         #F2F7FA;
  --line:         #DDE4EA;
  --line-soft:    #E9EEF2;
  --paper:        #FFFFFF;

  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r:    12px;
  --r-lg: 18px;
  --wrap: 1140px;
  --shadow:    0 1px 2px rgba(16,32,45,.06), 0 8px 24px rgba(16,32,45,.06);
  --shadow-lg: 0 2px 6px rgba(16,32,45,.08), 0 24px 60px rgba(16,32,45,.14);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01','cv11';
}

img { max-width: 100%; height: auto; display: block; }

/* Huub: subtle reusable website component */
.huub-intro__card,
.huub-guide__row {
  display: grid;
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
}
.huub-intro__card { grid-template-columns: minmax(0, 1fr) minmax(150px, 240px); }
.huub-guide__row { grid-template-columns: 128px minmax(0, 1fr); }
.huub-intro__visual { align-self: end; text-align: center; }
.huub-intro__visual img { width: min(100%, 220px); height: auto; display: block; margin-inline: auto; }
.huub-intro__note { margin-bottom: 0; opacity: .72; font-size: .95rem; }
.huub-guide { padding-block: 34px; }
.huub-guide__row img { width: 112px; height: auto; display: block; }
.huub-guide__row p { margin: 0; }
@media (max-width: 640px) {
  .huub-intro__card { grid-template-columns: 1fr 110px; gap: 18px; }
  .huub-intro__visual img { width: 110px; }
  .huub-intro__card .lede { font-size: 1rem; }
  .huub-guide__row { grid-template-columns: 76px minmax(0, 1fr); gap: 16px; }
  .huub-guide__row img { width: 72px; }
}


/* Additional Huub placements: About, Contact and FAQ */
.huub-guide--compact { padding-block: 28px; }
.huub-contact {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin-bottom: 30px;
  padding: 18px;
  border-radius: 16px;
  background: var(--surface, rgba(0,0,0,.03));
}
.huub-contact img { width: 82px; height: auto; display: block; }
.huub-contact p { margin: 0; font-size: .95rem; }
@media (max-width: 640px) {
  .huub-contact { grid-template-columns: 64px minmax(0, 1fr); padding: 14px; }
  .huub-contact img { width: 60px; }
}



/* ── Type scale ──────────────────────────────────────────────────────── */

h1, h2, h3 { color: var(--hub); text-wrap: balance; margin: 0 0 .6em; }

h1 { font-size: clamp(34px, 5.2vw, 56px); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
h2 { font-size: clamp(26px, 3.6vw, 38px); font-weight: 700; letter-spacing: -.028em; line-height: 1.14; }
h3 { font-size: clamp(18px, 2vw, 21px); font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }

.h-sm { font-size: clamp(21px, 2.4vw, 26px); }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

.lede { font-size: clamp(18px, 2.1vw, 21px); line-height: 1.55; color: var(--muted); max-width: 62ch; }
.lede strong { color: var(--ink); font-weight: 600; }

.eyebrow {
  font-size: 11.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .09em; color: var(--orange-text); margin: 0 0 14px;
}

a { color: var(--bridge); text-underline-offset: 3px; }
a:hover { color: var(--hub); }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }

.sr, .skip:not(:focus) {
  position: absolute !important; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip:focus {
  position: fixed; inset: 12px auto auto 12px; z-index: 200;
  background: var(--hub); color: #fff; padding: 12px 20px;
  border-radius: var(--r); font-weight: 600; text-decoration: none;
}

/* ── Layout ──────────────────────────────────────────────────────────── */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 16px; }
.wrap--narrow { max-width: 760px; }

.band { padding-block: clamp(52px, 8vw, 96px); }
.band--tint  { background: var(--tint); }
.band--field { background: var(--field); }
.band--deep  { background: var(--hub); color: #EAF2F7; }
.band--deep h2, .band--deep h3 { color: #fff; }
.band--deep .lede, .band--deep p { color: #C6DCEA; }
.band--deep a { color: #9FD4EE; }

.band + .band--tint, .band--tint + .band { border-top: 1px solid var(--line-soft); }

.sh { max-width: 66ch; margin-bottom: clamp(30px, 4vw, 48px); }
.sh--centre { margin-inline: auto; text-align: center; }

/* ── Buttons ─────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600; font-size: 16.5px; line-height: 1.2;
  padding: 15px 26px; border-radius: 10px; border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.btn--sm { padding: 10px 18px; font-size: 15px; }

/* One of these per page. Orange means "this is the thing to do next". */
.btn--primary { background: var(--orange-cta); color: #fff; }
.btn--primary:hover { background: #A83700; color: #fff; }

.btn--ghost { background: transparent; color: var(--hub); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--hub); color: var(--hub); background: #fff; }

.band--deep .btn--ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.band--deep .btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); color: #fff; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ── Masthead ────────────────────────────────────────────────────────── */

.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.94); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.site-head-in { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.brand { display: inline-flex; flex: 0 0 auto; }
.brand img { width: 153px; height: auto; }

.site-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.site-nav ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.site-nav a {
  display: block; padding: 9px 13px; border-radius: 8px;
  font-size: 15.5px; font-weight: 600; color: var(--ink); text-decoration: none;
}
.site-nav a:hover { background: var(--tint); color: var(--hub); }
.site-nav a[aria-current="page"] { color: var(--hub); box-shadow: inset 0 -2px 0 var(--orange); border-radius: 8px 8px 0 0; }
.nav-cta { margin-left: 12px; }

.nav-toggle {
  display: none; margin-left: auto; width: 44px; height: 44px;
  background: none; border: 1.5px solid var(--line); border-radius: 10px; cursor: pointer;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px;
  margin-inline: auto; position: relative; transition: transform .18s;
}
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ''; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* ── Breadcrumb ──────────────────────────────────────────────────────── */

.crumb { border-bottom: 1px solid var(--line-soft); background: #fff; }
.crumb ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 12px 0; font-size: 13.5px; }
.crumb li + li::before { content: '›'; color: var(--node); margin-right: 8px; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--hub); text-decoration: underline; }
.crumb span { color: var(--ink); font-weight: 600; }

/* ── Hero ────────────────────────────────────────────────────────────── */

.hero { padding-block: clamp(44px, 6vw, 76px) clamp(36px, 5vw, 60px); }
.hero h1 { margin-bottom: .45em; }
.hero .lede { font-size: clamp(18px, 2.2vw, 22px); }
.hero-grid { display: grid; gap: clamp(32px, 4vw, 56px); align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); } }

/* The proof bar: four facts a buyer checks before reading anything else. */
.proof { border-block: 1px solid var(--line-soft); }
.proof ul { display: grid; gap: 4px 34px; list-style: none; margin: 0; padding: 20px 0; }
@media (min-width: 720px) { .proof ul { grid-template-columns: repeat(4, 1fr); } }
.proof li { font-size: 14.5px; font-weight: 500; color: var(--ink); padding-left: 20px; position: relative; }
.proof li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--orange);
}
.proof b { font-weight: 600; }
.proof .proof-meta { color: var(--muted); font-weight: 400; }

/* ── Screenshots and the viewer ──────────────────────────────────────── */

.shot { margin: clamp(26px, 3.5vw, 42px) 0; }
.shot-open {
  display: block; width: 100%; padding: 0; cursor: zoom-in; position: relative;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow); overflow: hidden;
}
.shot-open:hover { box-shadow: var(--shadow-lg); border-color: var(--node); }
/* The browser-style bar above the picture. Decorative, so it is hidden from
   assistive technology by being drawn rather than marked up. */
.shot-open::before {
  content: ''; display: block; height: 30px; background: var(--field);
  border-bottom: 1px solid var(--line-soft);
  background-image:
    radial-gradient(circle, #D6DBE0 4px, transparent 4.5px),
    radial-gradient(circle, #D6DBE0 4px, transparent 4.5px),
    radial-gradient(circle, #D6DBE0 4px, transparent 4.5px);
  background-position: 14px center, 32px center, 50px center;
  background-repeat: no-repeat;
}
.shot-open img { width: 100%; }
.shot-hint {
  position: absolute; right: 10px; bottom: 10px;
  background: rgba(16,32,45,.86); color: #fff; font-size: 12.5px; font-weight: 600;
  padding: 7px 12px; border-radius: 8px; opacity: 0; transition: opacity .15s;
}
.shot-open:hover .shot-hint, .shot-open:focus-visible .shot-hint { opacity: 1; }
.shot figcaption { font-size: 14px; color: var(--muted); margin-top: 12px; max-width: 62ch; }
.shot--hero { margin: 0; }

/* The dialog is a column: a bar of its own height, then the stage taking
   whatever is left. The stage height is never hard-coded, because the caption
   in the bar wraps to two or three lines on a narrow screen. */
.lb {
  width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
  padding: 0; border: 0; background: #0B151E; color: #fff;
  display: flex; flex-direction: column; overflow: hidden;
}
.lb:not([open]) { display: none; }
.lb::backdrop { background: rgba(6,12,18,.9); }
.lb-bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; flex: 0 0 auto;
  padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.14);
}
.lb-cap { margin: 0; font-size: 14px; color: #C6DCEA; flex: 1 1 260px; min-width: 0; }
.lb-tools { display: flex; gap: 8px; margin-left: auto; }
.lb-btn {
  font: inherit; font-size: 14px; font-weight: 600; color: #fff; text-decoration: none;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
  border-radius: 8px; padding: 8px 14px; cursor: pointer;
}
.lb-btn:hover { background: rgba(255,255,255,.2); color: #fff; }
.lb-btn[aria-pressed="false"] { background: var(--orange-cta); border-color: var(--orange-cta); }
.lb-stage { flex: 1 1 auto; min-height: 0; overflow: auto; display: grid; place-items: center; padding: 16px; }
/* Full size: the picture keeps its own pixels and the stage scrolls. */
.lb-stage img { max-width: none; cursor: zoom-out; }
/* Fitted: the whole picture, whatever the screen. The viewer opens here,
   because a reader who clicks a screenshot wants to see all of it first. */
.lb-stage.is-fit img { max-width: 100%; max-height: 100%; width: auto; height: auto; cursor: zoom-in; }

/* ── Cards ───────────────────────────────────────────────────────────── */

.cards { display: grid; gap: 18px; }
@media (min-width: 660px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .cards--3 { grid-template-columns: repeat(3, 1fr); }
                            .cards--4 { grid-template-columns: repeat(4, 1fr); } }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px 26px 28px; display: flex; flex-direction: column;
}
.band--tint .card, .band--field .card { box-shadow: var(--shadow); border-color: transparent; }
.card h3 { margin-bottom: .45em; }
.card p { color: var(--muted); font-size: 16px; margin: 0; }
.card--link { text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; }
.card--link:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.card-go { margin-top: auto; padding-top: 16px; font-size: 14.5px; font-weight: 600; color: var(--orange-text); }
.card-go::after { content: ' →'; }

/* ── Organisation, team, person ──────────────────────────────────────── */

.levels { display: grid; gap: 18px; list-style: none; margin: 0; padding: 0; counter-reset: lv; }
@media (min-width: 900px) { .levels { grid-template-columns: repeat(3, 1fr); } }
.level {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 28px; position: relative; overflow: hidden;
}
.level::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 5px; }
.level--1::before { background: var(--hub); }
.level--2::before { background: var(--bridge); }
.level--3::before { background: var(--orange); }
.level-who {
  font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted); margin: 0 0 10px;
}
.level h3 { margin-bottom: .5em; }
.level p { color: var(--muted); font-size: 16px; margin: 0; }

/* ── Prose lists ─────────────────────────────────────────────────────── */

.list { list-style: none; margin: 0 0 1.2em; padding: 0; max-width: 68ch; }
.list li { position: relative; padding-left: 28px; margin-bottom: 14px; }
.list li::before {
  content: ''; position: absolute; left: 6px; top: .62em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--bridge);
}
/* Bold is the leading word of a list item and nothing else. It is never used
   for emphasis inside a sentence anywhere on this site. */
.list b { font-weight: 600; color: var(--ink); }
.band--deep .list li::before { background: var(--orange); }
.band--deep .list b { color: #fff; }

.split { display: grid; gap: clamp(28px, 4vw, 52px); }
@media (min-width: 900px) { .split { grid-template-columns: repeat(2, 1fr); align-items: start; }
                            .split--wide { grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); } }

/* ── Tables ──────────────────────────────────────────────────────────── */

.tbl-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; }
table { border-collapse: collapse; width: 100%; font-size: 15.5px; min-width: 580px; }
th, td { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
thead th {
  font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); background: var(--tint); white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
td b, th b { font-weight: 600; color: var(--ink); }
.yes { color: var(--hub); font-weight: 600; }
.no  { color: var(--muted); }
.gap { color: var(--orange-text); font-weight: 600; }

.tbl-tr-bg { background-color: #10202D; }

/* ── Pricing ─────────────────────────────────────────────────────────── */

.packs { display: grid; gap: 18px; align-items: stretch; }
@media (min-width: 900px) { .packs { grid-template-columns: repeat(3, 1fr); } }
.pack {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 30px 28px; display: flex; flex-direction: column;
}
.pack h3 { margin-bottom: .3em; }
.pack-seats { font-size: 14.5px; color: var(--muted); margin: 0 0 20px; }
.pack-price { font-size: clamp(32px, 4vw, 40px); font-weight: 800; letter-spacing: -.035em; color: var(--hub); line-height: 1; margin: 0; }
.pack-unit { font-size: 14.5px; color: var(--muted); margin: 8px 0 22px; }
.pack .list { font-size: 15.5px; margin-bottom: 24px; }
.pack .btn { margin-top: auto; width: 100%; }
.pack-note { font-size: 13.5px; color: var(--muted); margin-top: 14px; text-align: center; }

.compare th:first-child { width: 34%; }
.compare td small { display: block; color: var(--muted); font-size: 13.5px; margin-top: 4px; }

/* ── FAQ ─────────────────────────────────────────────────────────────── */

.faq { border-top: 1px solid var(--line); max-width: 78ch; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 22px 44px 22px 0; position: relative;
  font-size: 17.5px; font-weight: 600; color: var(--hub);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 8px; top: 30px;
  width: 11px; height: 11px; border-right: 2px solid var(--node); border-bottom: 2px solid var(--node);
  transform: rotate(45deg); transition: transform .18s;
}
.faq details[open] summary::after { transform: rotate(225deg); }
.faq .faq-a { padding: 0 0 24px; color: var(--muted); max-width: 68ch; }
.faq .faq-a a { font-weight: 500; }

/* ── Forms ───────────────────────────────────────────────────────────── */

.form { max-width: 640px; }
.field { margin-bottom: 20px; }
.field label { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.field .hint { font-size: 13.5px; color: var(--muted); margin: 0 0 7px; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: #fff;
  border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 14px;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--hub); }
.field textarea { min-height: 140px; resize: vertical; }
.field--err input, .field--err select, .field--err textarea { border-color: #A8200A; }
.field .err { font-size: 13.5px; color: #A8200A; font-weight: 500; margin: 6px 0 0; }
.req { color: var(--orange-text); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.notice { border-radius: var(--r); padding: 18px 22px; margin-bottom: 28px; border: 1px solid var(--line); background: var(--tint); }
.notice--err { border-color: #E8B3A8; background: #FDF3F1; }
.notice--ok  { border-color: #A9D5B4; background: #F1F9F3; }
.notice h2 { font-size: 19px; margin-bottom: .4em; }
.notice ul { margin: 8px 0 0; padding-left: 20px; }

.ref { font-family: ui-monospace, Consolas, monospace; font-size: 20px; font-weight: 600; color: var(--hub); }

/* ── Closer ──────────────────────────────────────────────────────────── */

.closer { background: var(--hub); color: #fff; text-align: center; }
.closer h2 { color: #fff; }
.closer .lede { color: #C6DCEA; margin-inline: auto; }
.closer .actions { justify-content: center; }
.closer .btn--ghost { color: #fff; border-color: rgba(255,255,255,.45); }
.closer .btn--ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* ── Footer ──────────────────────────────────────────────────────────── */

.site-foot { background: var(--ink); color: #B9C6D2; padding-block: clamp(48px, 6vw, 72px) 32px; font-size: 15px; }
.foot-top { display: grid; gap: 40px; }
@media (min-width: 900px) { .foot-top { grid-template-columns: minmax(0,1fr) minmax(0,1.85fr); } }
.foot-brand img { width: 178px; height: auto; }
.foot-line { font-size: 16px; font-weight: 600; color: #fff; margin: 18px 0 14px; }
.foot-house { font-size: 14px; color: #8FA0AF; max-width: 42ch; }
.foot-house a { color: #9FD4EE; }

.foot-cols { display: grid; gap: 30px; }
@media (min-width: 560px) { .foot-cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .foot-cols { grid-template-columns: repeat(4, 1fr); } }
.foot-cols h2 {
  font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em;
  color: #8FA0AF; margin: 0 0 14px;
}
.foot-cols ul { list-style: none; margin: 0; padding: 0; }
.foot-cols li { margin-bottom: 10px; }
.foot-cols a { color: #D3DDE5; text-decoration: none; font-size: 14.5px; }
.foot-cols a:hover { color: #fff; text-decoration: underline; }

.foot-legal { margin-top: 44px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.12); }
.foot-legal p { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13.5px; }
.foot-legal a { color: #B9C6D2; text-decoration: none; }
.foot-legal a:hover { color: #fff; text-decoration: underline; }
.foot-reg { color: #7D8E9D; margin-top: 14px; display: block; }

/* ── Small screens ───────────────────────────────────────────────────── */

@media (max-width: 1059px) {
  .nav-toggle { display: block; }
  .site-nav {
    position: fixed; inset: 68px 0 auto 0; z-index: 60;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 12px 16px 20px; box-shadow: var(--shadow-lg);
    max-height: calc(100dvh - 68px); overflow-y: auto;
  }
  .site-nav[hidden] { display: none; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav a { padding: 14px 10px; font-size: 17px; border-bottom: 1px solid var(--line-soft); border-radius: 0; }
  .site-nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--orange); }
  .nav-cta { margin: 16px 0 0; }
  table { min-width: 520px; }
}

@media (max-width: 480px) {
  body { font-size: 16.5px; }
  .btn { width: 100%; }
  .actions .btn { width: 100%; }
  .lb-tools { width: 100%; margin-left: 0; }
  .lb-btn { flex: 1; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .card--link:hover { transform: none; }
}

@media print {
  .site-head, .site-foot, .lb, .actions, .crumb { display: none; }
  body { font-size: 12pt; }
}