:root {
  --navy: #0e1a2b;
  --navy-2: #142238;
  --paper: #faf9f6;
  --paper-tint: #f1efe9;
  --ink: #15181f;
  --muted: #676d78;
  --line: #dcd9d0;
  --line-dark: rgba(245, 244, 240, 0.16);
  --on-dark: #f5f4f0;
  --on-dark-muted: rgba(245, 244, 240, 0.68);
  --max-width: 1140px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --shadow-soft: 0 20px 60px -30px rgba(14, 26, 43, 0.35);
  --serif: "Avenir Next", "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
  --sans: "Avenir Next", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

html {
  background: var(--navy);
}

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.15;
  margin: 0;
}

p { margin: 0 0 1em; }

a { color: inherit; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 28px;
}

.eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 18px;
}

/* Header ---------------------------------------------------------------
   The header takes the tone opposite to the band sitting under it.
   data-over carries that band's tone, so data-over="light" paints a navy
   header and data-over="dark" a paper one; .scrolled only sets the height.
   Its padding runs up under the status bar (viewport-fit=cover), and the
   theme-color meta is kept in sync in JS, so the strip above the header
   is always the same colour as the header itself. */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: calc(22px + env(safe-area-inset-top)) 0 22px;
  transition: background 0.35s ease, padding 0.35s ease, border-color 0.35s ease;
  border-bottom: 1px solid transparent;
}

.site-header.scrolled {
  padding: calc(14px + env(safe-area-inset-top)) 0 14px;
}

/* Opaque, and exactly the values fed to theme-color. At 94% the header
   picked up the dark video behind it and read greyer than the solid strip
   Safari paints above it, which is the seam that showed on iPhone. */
.site-header[data-over="dark"] {
  background: var(--paper);
  border-bottom-color: var(--line);
}

.site-header[data-over="light"] {
  background: var(--navy);
  border-bottom-color: var(--line-dark);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 32px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  margin-right: auto;
}

.brand-mark { display: block; height: 26px; width: auto; }

/* Two tints of the same wordmark: the gold reads on the navy header,
   the deeper bronze keeps enough contrast once the header turns to paper. */
.brand-logo { display: block; height: 24px; width: auto; }
.brand-logo-on-light { display: none; }
.site-header[data-over="dark"] .brand-logo-on-dark { display: none; }
.site-header[data-over="dark"] .brand-logo-on-light { display: block; }

.main-nav {
  display: flex;
  gap: 24px;
}

.main-nav a {
  text-decoration: none;
  font-size: 0.92rem;
  color: var(--on-dark-muted);
  transition: color 0.2s ease;
  white-space: nowrap;
}

.site-header[data-over="dark"] .main-nav a { color: var(--muted); }

@media (hover: hover) and (pointer: fine) {
  .main-nav a:hover { color: var(--on-dark); }
  .site-header[data-over="dark"] .main-nav a:hover { color: var(--ink); }
}

.nav-cta { display: inline-flex; }

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  padding: 6px;
}

.menu-toggle span {
  width: 22px;
  height: 1.5px;
  background: var(--on-dark);
  transition: background 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}

.site-header[data-over="dark"] .menu-toggle span { background: var(--ink); }

.menu-toggle.active span { background: var(--on-dark); }

.menu-toggle.active span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6, 11, 20, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 90;
}

.nav-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

body.menu-open {
  overflow: hidden;
}

body.menu-open .site-header[data-over="dark"] {
  background: var(--navy);
  border-bottom-color: transparent;
}

body.menu-open .site-header[data-over="dark"] .brand-logo-on-dark { display: block; }
body.menu-open .site-header[data-over="dark"] .brand-logo-on-light { display: none; }

/* The open nav panel slides over the right of the screen and would clip the
   wordmark mid-word, so fade the brand out while the menu is open. */
.brand { transition: opacity 0.25s ease; }
body.menu-open .brand { opacity: 0; pointer-events: none; }
body.menu-open .site-header[data-over="dark"] .main-nav a { color: var(--on-dark-muted); }
body.menu-open .site-header[data-over="dark"] .menu-toggle span { background: var(--on-dark); }

/* Buttons */
.btn {
  display: inline-block;
  padding: 13px 30px;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 1px solid currentColor;
  border-radius: var(--radius-md);
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--sans);
}

@media (hover: hover) and (pointer: fine) {
  .btn-solid:hover,
  .btn-solid-invert:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-soft);
  }
}

.btn-solid {
  background: var(--on-dark);
  color: var(--navy);
  border-color: var(--on-dark);
}
@media (hover: hover) and (pointer: fine) {
  .btn-solid:hover { background: transparent; color: var(--on-dark); }
}

.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
@media (hover: hover) and (pointer: fine) {
  .btn-outline:hover { background: var(--ink); color: var(--paper); }
}

.btn-solid-invert {
  background: var(--on-dark);
  color: var(--navy);
  border-color: var(--on-dark);
  width: 100%;
}
@media (hover: hover) and (pointer: fine) {
  .btn-solid-invert:hover { background: transparent; color: var(--on-dark); }
}

.nav-cta.btn-outline {
  color: var(--on-dark);
  border-color: var(--on-dark);
}
.site-header[data-over="dark"] .nav-cta.btn-outline {
  color: var(--ink);
  border-color: var(--ink);
}
@media (hover: hover) and (pointer: fine) {
  .nav-cta.btn-outline:hover { background: var(--on-dark); color: var(--navy); }
  .site-header[data-over="dark"] .nav-cta.btn-outline:hover { background: var(--ink); color: var(--paper); }
}

/* Hero */
.hero {
  position: relative;
  background: var(--navy);
  color: var(--on-dark);
  /* the copy is anchored to the foot of the frame, so the hero needs a
     height to anchor against; svh keeps iOS from jumping as its toolbar
     collapses */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: 180px 0 0;
  overflow: hidden;
}

/* These videos are decorative wallpaper — they never carry a controls
   attribute, so hide the whole native control shadow tree. Safari has moved
   the start-playback button between shadow parts across versions, so cover
   the parent panels too rather than that one button. */
video::-webkit-media-controls,
video::-webkit-media-controls-enclosure,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-overlay-play-button,
video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
  appearance: none;
  opacity: 0;
  pointer-events: none;
}

/* The still and the clip share one translucent layer. Fading a 0.6 video over
   a 0.6 still blended the two into a double exposure — both were visible at
   once, and on a montage they are different frames. The wrapper carries the
   transparency, the video sits opaque on top of the still inside it. */
.hero-media {
  position: absolute;
  inset: 0;
  background: url("../media/hero-montage-poster-v2.jpg") center / cover no-repeat;
  opacity: 0.6;
  filter: grayscale(0.15) brightness(0.95);
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s ease;
}

.hero-video.is-ready { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero-video { transition: none; }
  .section-image video { transition: none; }
}

.hero-video-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(14,26,43,0.20) 0%,
    rgba(14,26,43,0.42) 42%,
    rgba(14,26,43,0.80) 72%,
    var(--navy) 100%);
}

#private-desk { position: relative; }

.section-dial-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.section-dial {
  position: absolute;
  top: -140px;
  right: -180px;
  width: 560px;
  height: 560px;
  color: var(--line);
  opacity: 0.7;
  z-index: 0;
  pointer-events: none;
}

.dial-second {
  transform-origin: 100px 100px;
  animation: tick 60s steps(60, end) infinite;
}

@keyframes tick {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .dial-second { animation: none; }
}

.hero-inner {
  position: relative;
  margin-top: auto;      /* push the block down to the trust strip */
  padding-bottom: 46px;
}

/* Two supporting blocks side by side, both sitting on the same baseline,
   with the statement centred underneath. */
.hero-copy {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: end;
  gap: 24px 72px;
  margin-bottom: 30px;
}

.hero-lede,
.hero-aside {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.7;
  color: rgba(245, 244, 240, 0.84);
}

.hero-lede { text-align: justify; }
.hero-aside { text-align: right; }

.hero-statement {
  margin: 0;
  text-align: center;
  font-size: clamp(1.6rem, 3.6vw, 3rem);
  line-height: 1.22;
}

.trust-strip {
  position: relative;
  border-top: 1px solid var(--line-dark);
  padding: 22px 0;
}

.trust-strip-inner {
  display: flex;
  flex-wrap: wrap;
  /* the items are narrower than the container, so packing them from the left
     left all the slack on the right and read as off-centre; spread them so the
     row sits on the same edges as the copy above it */
  justify-content: space-between;
  gap: 14px 36px;
  font-size: 0.82rem;
  color: var(--on-dark-muted);
  letter-spacing: 0.01em;
}

.section-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* Safari promotes a playing <video> to its own compositing layer and then
     ignores the parent's overflow clip, so the banners came out square while
     the still photo stayed rounded. A stacking context here plus the radius
     on the media itself keeps every corner the same. */
  isolation: isolate;
  box-shadow: var(--shadow-soft);
  margin-bottom: 56px;
  aspect-ratio: 2.3;
}

/* The still is a background on the container (set inline per section), so
   the frame is up from the first paint and stays there if the clip is
   removed. */
.section-image {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.section-image img,
.section-image video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.section-image video {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.section-image video.is-ready { opacity: 1; }

/* Autoplay refused — usually Low Power Mode. Rather than leave iOS to draw
   its own play button over the poster, drop the element; the still behind it
   carries the section on its own. */
video.autoplay-denied { display: none !important; }

@media (max-width: 900px) {
  .section-image { margin-bottom: 40px; }
}

/* Sections */
.section {
  padding: 110px 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 90px;
}

.contact-section,
.stats-band {
  scroll-margin-top: 90px;
}

.section-tint { background: var(--paper-tint); }

.section-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
}

.section-head h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  position: sticky;
  top: 120px;
}

.section-body p {
  color: var(--ink);
  max-width: 640px;
}

.check-list {
  list-style: none;
  padding: 0;
  margin: 28px 0 36px;
  display: grid;
  gap: 12px;
}

.check-list li {
  position: relative;
  padding-left: 22px;
  color: var(--ink);
  max-width: 560px;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
}

/* Panels (Private Desk) */
.panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px;
  margin: 36px 0;
  background: var(--paper);
  box-shadow: var(--shadow-soft);
}

.panel h3 {
  font-size: 1.15rem;
  margin-bottom: 12px;
}

.panel p { margin: 0; color: var(--muted); }

.values-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: grid;
  gap: 10px;
}

.values-list strong { color: var(--ink); }
.values-list li { color: var(--muted); }

.name-note {
  font-style: italic;
  color: var(--muted);
  border-left: 2px solid var(--line);
  padding-left: 16px;
  margin-bottom: 36px;
}

/* Stats band */
.stats-band {
  background: var(--navy);
  color: var(--on-dark);
  padding: 80px 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, auto);
  /* the four columns are narrower than the container, and pushing the whole
     group to the end piled the slack on the left. Spread the tracks to both
     margins; the figures and labels stay right-aligned inside each one. */
  justify-content: space-between;
  gap: 40px;
}

.stat { text-align: right; }

.stat-num {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4vw, 3rem);
  margin-bottom: 8px;
  /* the digits change width as the counter runs; tabular figures stop the
     labels from jittering underneath them */
  font-variant-numeric: tabular-nums;
}

.stat-label {
  display: block;
  font-size: 0.85rem;
  color: var(--on-dark-muted);
  max-width: 200px;
  margin-left: auto;
}

/* Contact */
.contact-section {
  background: var(--navy);
  color: var(--on-dark);
  padding: 120px 0;
}

.contact-section h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin-bottom: 22px;
}

.lede-dark {
  color: var(--on-dark-muted);
  max-width: 440px;
  margin-bottom: 36px;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.contact-lines {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 16px;
}

.contact-lines li {
  display: flex;
  gap: 16px;
  border-bottom: 1px solid var(--line-dark);
  padding-bottom: 14px;
}

.contact-lines span {
  color: var(--on-dark-muted);
  min-width: 90px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.contact-lines a {
  color: var(--on-dark);
  text-decoration: none;
  font-size: 1.05rem;
}

@media (hover: hover) and (pointer: fine) {
  .contact-lines a:hover { text-decoration: underline; }
}

.quote-form {
  display: grid;
  gap: 18px;
}

.quote-form label {
  display: grid;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--on-dark-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.quote-form input,
.quote-form select,
.quote-form textarea {
  background: rgba(245, 244, 240, 0.06);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-sm);
  color: var(--on-dark);
  font-family: var(--sans);
  font-size: 1rem;
  padding: 12px 14px;
  resize: vertical;
}

.quote-form select option { color: var(--ink); }

/* Dial code and number share one row. The code sits first in each option so
   it stays visible when the closed select clips a long country name. */
.phone-field {
  display: grid;
  grid-template-columns: minmax(6.5rem, 8.5rem) minmax(0, 1fr);
  gap: 10px;
}

.phone-field select,
.phone-field input { min-width: 0; }

/* a rejected field should say so before the form is submitted */
.quote-form input:not(:placeholder-shown):invalid,
.quote-form select:invalid {
  border-color: rgba(224, 122, 95, 0.75);
}

.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus {
  outline: none;
  border-color: var(--on-dark);
}

.hidden-field { position: absolute; left: -9999px; }

.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line-dark);
  background: var(--navy);
  color: var(--on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  z-index: 80;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.25s ease, color 0.25s ease;
  box-shadow: var(--shadow-soft);
}

.back-to-top.visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* iOS Safari emulates :hover on the first tap, so a <button> that changes
   appearance on hover swallows that tap and needs a second one to fire its
   click. Serve hover states only where there is a real pointer. */
@media (hover: hover) and (pointer: fine) {
  .back-to-top:hover {
    background: var(--on-dark);
    color: var(--navy);
  }
}

.back-to-top:active { background: var(--on-dark); color: var(--navy); }

@media (max-width: 900px) {
  .back-to-top {
    right: 18px;
    bottom: 18px;
    width: 42px;
    height: 42px;
  }
}

/* WhatsApp button. Sits directly above .back-to-top (which keeps its corner
   and size untouched) and shows at the same scroll depth, so the two read as
   one stack. Hover rules stay behind the pointer query for the same iOS
   double-tap reason as above. */
.wa-fab {
  position: fixed;
  right: 19px;
  bottom: 84px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  z-index: 80;
  opacity: 0;
  transform: translateY(12px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.25s ease;
  box-shadow: 0 10px 28px -8px rgba(18, 140, 126, 0.55), 0 4px 12px -4px rgba(14, 26, 43, 0.3);
}

.wa-fab.visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Soft ring that breathes out of the button to catch the eye. */
.wa-fab::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25d366;
  z-index: -1;
  opacity: 0;
}

.wa-fab.visible::before {
  animation: wa-pulse 2.6s ease-out infinite;
}

@keyframes wa-pulse {
  0% { transform: scale(1); opacity: 0.45; }
  70%, 100% { transform: scale(1.55); opacity: 0; }
}

@media (hover: hover) and (pointer: fine) {
  .wa-fab:hover {
    background: #1ebe5b;
    transform: translateY(-2px);
  }
}

.wa-fab:active { background: #1ebe5b; }

@media (prefers-reduced-motion: reduce) {
  .wa-fab.visible::before { animation: none; }
}

@media (max-width: 900px) {
  .wa-fab {
    right: 16px;
    bottom: 72px;
    width: 46px;
    height: 46px;
  }
  .wa-fab svg { width: 26px; height: 26px; }
}

/* Footer */
.site-footer {
  background: #0a1220;
  color: var(--on-dark-muted);
  padding: 40px 0;
  font-size: 0.82rem;
}

.footer-mark {
  display: block;
  height: 34px;
  width: auto;
  margin-bottom: 26px;
  opacity: 0.85;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-inner p { margin: 0; max-width: 640px; }

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Responsive */
@media (max-width: 900px) {
  .section-grid,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .section-head h2 { position: static; }
  .panel { grid-template-columns: 1fr; padding: 28px; }
  .stats-grid { grid-template-columns: repeat(2, auto); gap: 32px 28px; }

  .main-nav {
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: min(78vw, 320px);
    background: var(--navy);
    flex-direction: column;
    justify-content: center;
    gap: 28px;
    padding: 40px;
    transform: translateX(100%);
    transition: transform 0.35s ease;
  }
  .main-nav.open { transform: translateX(0); }
  .main-nav a { color: var(--on-dark); font-size: 1.05rem; }
  .nav-cta { display: none; }
  .menu-toggle { display: flex; }
  .hero { padding-top: 130px; }
  /* wrapped onto four rows, space-between shoves each pair to opposite edges
     and the ragged single-item rows read as a mistake — let them flow */
  .trust-strip-inner { justify-content: flex-start; }
  /* justified text rivers badly in a phone-width column, and two columns
     have nowhere to go — stack them and set both ragged-right */
  .hero-copy { grid-template-columns: 1fr; gap: 18px; margin-bottom: 26px; }
  .hero-lede, .hero-aside { text-align: left; font-size: 0.95rem; }
  .hero-statement { text-align: left; }
  .section-dial { width: 380px; height: 380px; top: -80px; right: -140px; }
  .section { padding: 72px 0; }
  .contact-section { padding: 80px 0; }
}

/* Footer legal links */
.footer-legal a { color: inherit; text-decoration: none; }
.footer-legal a:hover { color: var(--on-dark); text-decoration: underline; }
.form-note { margin: 4px 0 0; font-size: 0.8rem; color: var(--on-dark-muted); }
.form-note a { color: inherit; }

/* Legal pages: privacy.html, cookies.html, terms.html */
.legal-header { background: var(--navy); padding: 22px 0; }
.legal-home img { display: block; height: 34px; width: auto; }
.legal { max-width: 820px; padding-top: 56px; padding-bottom: 80px; }
.legal h1 { font-size: clamp(2rem, 5vw, 2.8rem); margin-bottom: 12px; }
.legal-meta { color: var(--muted); font-size: 0.9rem; margin-bottom: 40px; }
.legal h2 { font-size: 1.3rem; margin: 44px 0 14px; }
.legal-num { display: inline-block; min-width: 1.8em; color: var(--muted); }
.legal p, .legal li { font-size: 0.97rem; }
.legal ul { padding-left: 1.2em; margin: 0 0 1em; }
.legal li { margin-bottom: 0.4em; }
.legal li p { margin: 0; }
.legal a { text-decoration: underline; text-underline-offset: 2px; }
.legal-table { overflow-x: auto; margin: 0 0 1.4em; }
.legal table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid rgba(21, 24, 31, 0.12); }
.legal th { font-weight: 600; }
.legal td p { margin: 0; }
@media (max-width: 640px) {
  .legal table { font-size: 0.85rem; }
  .legal th, .legal td { padding: 8px; }
}
.footer-inner .footer-legal { margin-top: 6px; }
@media (max-width: 640px) {
  .legal table.stack tr:first-child { display: none; }
  .legal table.stack, .legal table.stack tbody, .legal table.stack tr, .legal table.stack td { display: block; width: auto; }
  .legal table.stack tr { padding: 10px 0; border-bottom: 1px solid rgba(21, 24, 31, 0.12); }
  .legal table.stack td { border: 0; padding: 4px 0; }
  .legal table.stack td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
  }
}
@media (max-width: 640px) {
  /* keep the footer links clear of the fixed WhatsApp / back-to-top buttons */
  .site-footer { padding-bottom: 120px; }
  .legal-page .site-footer { padding-bottom: 40px; }
}