/* Berger BI v2 — contact. Owned by the contact redesign; keep every rule scoped to its sections.
   #booking (header + engagement model, Cal.com-style 3-pane scheduler, direct channels, proof line),
   the footer, and the floating buttons (WhatsApp, back-to-top, and the a11y button from site-extras). */

/* ================= BOOKING ================= */
#booking[data-bk="section"] {
  padding: var(--v2-sec-y) 0;
  color: var(--v2-ink);
}
#booking [data-bk="wrap"] { max-width: 1140px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; }
#booking button { font: inherit; color: inherit; margin: 0; }
#booking ul, #booking ol { list-style: none; margin: 0; padding: 0; }
#booking p { margin: 0; }

/* header: claim on the start side, the engagement model opposite it */
#booking [data-bk="head"] {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 28px 72px;
  align-items: end;
  margin-bottom: 44px;
}
#booking [data-bk="eyebrow"] {
  font-family: var(--v2-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--v2-muted);
}
#booking [data-bk="eyebrow"] b { font-weight: 500; color: var(--v2-navy); }
#booking [data-bk="title"] { margin: 14px 0 0; color: var(--v2-ink); text-wrap: balance; }
#booking [data-bk="sub"] { margin-top: 14px; max-width: 52ch; font-size: 17px; line-height: 1.65; color: var(--v2-muted); text-wrap: pretty; }
/* the engagement model sits beside the claim on wide screens (its end edge on the grid), and after the scheduler
   below 960px, where it would push the calendar below the fold. Only one copy is ever displayed. */
#booking [data-bk="model"] { border-top: 1px solid var(--v2-line-2); padding-top: 18px; max-width: 48ch; }
#booking [data-bk="head"] [data-bk="model"] { justify-self: end; width: 100%; }
#booking [data-bk="after"] [data-bk="model"] { display: none; }
#booking [data-bk="nw"] { white-space: nowrap; }
#booking [data-bk="model-label"] { font-size: 14px; font-weight: 600; color: var(--v2-ink); }
#booking [data-bk="model-body"] { margin-top: 6px; font-size: 16px; line-height: 1.65; color: var(--v2-muted); text-wrap: pretty; }

/* ---------- the booker card ---------- */
#booking [data-bk="booker"] {
  scroll-margin-top: 84px;   /* step changes scroll it back under the navbar, not behind it */
  background: var(--v2-surface);
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-card);
  box-shadow: var(--v2-shadow);
}
#booking [data-bk="bar"] {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 56px;
  padding: 0 28px;
  border-bottom: 1px solid var(--v2-line);
}
#booking [data-bk="count"] {
  font-family: var(--v2-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--v2-navy);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
#booking [data-bk="steps"] { display: flex; align-items: center; flex-wrap: wrap; row-gap: 4px; font-size: 14px; }
#booking [data-bk="steps"] li { display: inline-flex; align-items: center; white-space: nowrap; color: var(--v2-muted); }
#booking [data-bk="steps"] li + li::before {
  content: "";
  width: 18px;
  height: 1px;
  margin: 0 10px;
  background: var(--v2-line-2);
}
#booking [data-bk="steps"] li[data-st="cur"] { color: var(--v2-ink); font-weight: 600; }
#booking [data-bk="steps"] li[data-st="done"] { color: var(--v2-navy); }

#booking [data-bk="body"] {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr) minmax(0, 236px);
  align-items: stretch;
}

/* the card keeps one height from step 1 to step 2 (no jump when "continue" is pressed) */
@media (min-width: 960px) { #booking [data-bk="body"] { min-height: 572px; } }

/* pane 1 — event info */
#booking [data-bk="info"] {
  grid-column: 1;
  grid-row: 1;
  padding: 28px;
  border-inline-end: 1px solid var(--v2-line);
  background: var(--v2-surface-2);
  border-end-start-radius: var(--v2-r-card);
}
#booking [data-bk="event"] { font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--v2-ink); text-wrap: balance; }
#booking [data-bk="meta"] { display: grid; gap: 12px; margin-top: 18px; align-content: start; }
#booking [data-bk="meta"] li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 14px; line-height: 1.5; color: var(--v2-muted); }
/* the call facts use the page's icon tile, at a compact size */
#dc-root #booking [data-bk="meta"] [data-ico-sm] { --ico-box: 30px; --ico-size: 16px; --ico-sw: 4.4; border-radius: 10px; }
#booking [data-bk="meta"] [data-bk="range"] { white-space: nowrap; }

#booking [data-bk="call"] { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--v2-line); }
#booking [data-bk="call-title"] { font-size: 14px; font-weight: 600; color: var(--v2-ink); }
#booking [data-bk="call-list"] { display: grid; gap: 16px; margin-top: 14px; }
#booking [data-bk="call-list"] li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: baseline; }
#booking [data-bk="idx"] { font-family: var(--v2-mono); font-size: 12px; font-weight: 500; color: var(--v2-navy); font-variant-numeric: tabular-nums; }
#booking [data-bk="call-h"] { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--v2-ink); }
#booking [data-bk="call-list"] p { margin-top: 3px; font-size: 14px; line-height: 1.6; color: var(--v2-muted); }

/* pane 2 — month grid */
#booking [data-bk="cal"] { grid-column: 2; grid-row: 1; padding: 24px 28px 28px; min-width: 0; }
#booking [data-bk="cal-head"] { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; }
#booking [data-bk="month"] { font-size: 18px; font-weight: 700; color: var(--v2-ink); outline-offset: 4px; }
#booking [data-bk="nav"] { display: flex; gap: 6px; }
#booking [data-bk="navbtn"] {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: var(--v2-r-pill);
  border: 1px solid var(--v2-line-2);
  background: var(--v2-surface);
  color: var(--v2-ink);
  cursor: pointer;
  padding: 0;
}
#booking [data-bk="navbtn"][aria-disabled="true"] { color: var(--v2-soft) !important; border-color: var(--v2-line) !important; background: transparent !important; cursor: default; }
#booking [data-bk="dow"], #booking [data-bk="grid"] { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
#booking [data-bk="dow"] { margin-top: 16px; }
#booking [data-bk="dow"] span { text-align: center; font-size: 14px; font-weight: 500; color: var(--v2-muted); padding: 4px 0; }
#booking [data-bk="grid"] { margin-top: 6px; }
/* One rule for days and times: a box with a navy-tinted hairline = you can pick it, navy fill = picked,
   plain grey text with no box = not available (times are also struck through). */
#booking [data-day] {
  aspect-ratio: 1;
  width: 100%;
  max-width: 54px;
  justify-self: center;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border-radius: var(--v2-r-inner);
  border: 1px solid transparent;
  padding: 0;
  font-family: 'DM Sans', 'Heebo', sans-serif;
  font-size: 15px;
  font-variant-numeric: tabular-nums lining-nums;
  background: transparent;
}
#booking [data-bk="grid"] [data-day]:focus-visible { outline-offset: 2px; }
#booking button[data-day="on"] { background: var(--v2-surface); border-color: rgba(31, 69, 112, .34); color: var(--v2-ink); font-weight: 500; cursor: pointer; }
#booking button[data-day="off"] { color: var(--v2-soft); font-weight: 400; cursor: default; }
#booking button[data-day="sel"] { background: var(--v2-navy); border-color: var(--v2-navy); color: #ffffff; font-weight: 600; cursor: pointer; }

/* pane 3 — slots */
#booking [data-bk="slots"] {
  grid-column: 3; grid-row: 1;
  display: flex; flex-direction: column;
  padding: 24px 24px 28px;
  border-inline-start: 1px solid var(--v2-line);
  min-width: 0;
}
#booking [data-bk="slots-head"] { min-height: 40px; }
#booking [data-bk="slots-label"] { font-size: 14px; font-weight: 500; color: var(--v2-muted); }
#booking [data-bk="slots-date"] { margin-top: 2px; font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--v2-ink); }
#booking [data-bk="slot-list"] { display: grid; gap: 8px; margin-top: 16px; }
#booking [data-slot] {
  height: 44px;
  border-radius: var(--v2-r-pill);
  border: 1px solid rgba(31, 69, 112, .34);
  background: var(--v2-surface);
  color: var(--v2-ink);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 0 10px;
}
#booking [data-slot="busy"] { border-color: transparent; background: transparent; color: var(--v2-soft); font-weight: 400; cursor: default; text-decoration: line-through; text-decoration-thickness: 1px; }
#booking [data-slot="sel"] { border-color: var(--v2-navy); background: var(--v2-navy); color: #ffffff; font-weight: 600; }

/* buttons */
#booking [data-bk="primary"] {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px;
  margin-top: auto;
  padding: 0 22px;
  border: 0;
  border-radius: var(--v2-r-pill);
  background: var(--v2-navy);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
#booking [data-bk="slots"] [data-bk="primary"] { margin-top: 20px; width: 100%; }
#booking [data-bk="primary"][aria-disabled="true"] { background: var(--v2-bg-2); color: var(--v2-muted); cursor: default; }
#booking [data-bk="ghost"] {
  height: 44px; padding: 0 20px;
  border-radius: var(--v2-r-pill);
  border: 1px solid var(--v2-line-2);
  background: var(--v2-surface);
  color: var(--v2-ink);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
}
#bbi-root[dir="rtl"] #booking [data-flip] { transform: scaleX(-1); }

/* step 2 — details form (spans panes 2 + 3) */
#booking [data-bk="form"], #booking [data-bk="done"] { grid-column: 2 / -1; grid-row: 1; padding: 24px 32px 32px; min-width: 0; }
#booking [data-bk="form"] { display: flex; flex-direction: column; }
#booking [data-bk="back"] {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 12px 0 10px;
  margin-inline-start: -10px;
  border: 0; border-radius: var(--v2-r-pill);
  background: transparent;
  color: var(--v2-muted);
  font-size: 14px; font-weight: 500;
  cursor: pointer;
}
#booking [data-bk="pane-title"] { margin-top: 10px; font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--v2-ink); outline-offset: 4px; }
#booking [data-bk="picked"] {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  margin-top: 10px;
  font-size: 14px; color: var(--v2-ink); font-weight: 500;
}
#booking [data-bk="picked"] svg { color: var(--v2-navy); flex: none; }
#booking [data-bk="picked"] bdi { font-family: 'DM Sans', sans-serif; }
#booking [data-bk="picked-tz"] { color: var(--v2-muted); font-weight: 400; }
#booking [data-bk="picked-tz"]::before { content: "·"; margin-inline-end: 10px; color: var(--v2-soft); }
#booking [data-bk="fields"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
#booking [data-bk="field"][data-wide] { grid-column: 1 / -1; }
#booking [data-bk="field"] label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; color: var(--v2-muted); }
#booking [data-bk="field"] input,
#booking [data-bk="field"] textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--v2-line-2);
  border-radius: var(--v2-r-pill);
  background: var(--v2-surface);
  color: var(--v2-ink);
  font: 400 15px/1.5 'Heebo', sans-serif;
  outline: none;
  resize: none;
}
#booking [data-bk="field"] textarea { border-radius: var(--v2-r-inner); }
#booking [data-bk="field"] input[dir="ltr"] { text-align: left; }
#booking [data-bk="field"] input:focus-visible,
#booking [data-bk="field"] textarea:focus-visible,
#booking [data-bk="field"] input:focus,
#booking [data-bk="field"] textarea:focus { border-color: var(--v2-navy); box-shadow: 0 0 0 3px rgba(31, 69, 112, .14); }
/* invalid fields: red hairline + the message right under the field (set on submit, cleared as soon as it is valid) */
#booking [data-bk="field"] [aria-invalid="true"] { border-color: #B83232; }
#booking [data-bk="field"] [aria-invalid="true"]:focus { border-color: #B83232; box-shadow: 0 0 0 3px rgba(184, 50, 50, .14); }
#booking [data-bk="ferr"] { margin-top: 6px; font-size: 14px; line-height: 1.45; color: #B83232; }
#booking [data-bk="ferr"]:empty { display: none; }
#booking [data-bk="error"] { margin: 16px 0 0; font-size: 14px; line-height: 1.5; color: #B83232; }
#booking [data-bk="error"]:empty { display: none; }
#booking [data-bk="form"] [data-bk="primary"] { width: 100%; margin-top: 16px; }

/* step 3 — confirmation */
#booking [data-bk="done"] { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
#booking [data-bk="done-icon"] { color: var(--v2-navy); }
#booking [data-bk="done"] [data-bk="pane-title"] { margin-top: 16px; }
#booking [data-bk="done-body"] { margin: 14px 0 24px; max-width: 46ch; font-size: 16px; line-height: 1.65; color: var(--v2-muted); }

/* ---------- direct channels + proof line ---------- */
#booking [data-bk="after"] { margin-top: 36px; }
#booking [data-bk="direct-label"] { font-size: 14px; color: var(--v2-muted); }
#booking [data-bk="direct"] { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 10px; }
#booking [data-bk="direct"] a {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  font-size: 16px; font-weight: 500;
  color: var(--v2-ink);
}
#booking [data-bk="direct"] svg { color: var(--v2-navy); flex: none; }
#booking [data-bk="trust"] {
  margin-top: 28px; padding-top: 20px;
  border-top: 1px solid var(--v2-line);
  font-size: 14px; line-height: 1.6; color: var(--v2-muted);
}
#booking [data-bk="trust"] b { font-weight: 600; color: var(--v2-ink); }

@media (hover: hover) and (pointer: fine) {
  #booking button[data-day="on"]:hover { border-color: var(--v2-navy); box-shadow: inset 0 0 0 1px var(--v2-navy); }
  #booking [data-slot="free"]:hover { border-color: var(--v2-navy); box-shadow: inset 0 0 0 1px var(--v2-navy); }
  #booking [data-bk="navbtn"]:not([aria-disabled="true"]):hover { border-color: var(--v2-navy); }
  #booking [data-bk="primary"]:not([aria-disabled="true"]):hover { background: var(--v2-ink); }
  #booking [data-bk="ghost"]:hover, #booking [data-bk="back"]:hover { color: var(--v2-navy); border-color: var(--v2-navy); }
  #booking [data-bk="direct"] a:hover { color: var(--v2-navy); text-decoration: underline; text-underline-offset: 4px; }
}

/* ---------- responsive ---------- */
@media (max-width: 1149px) {
  #booking [data-bk="body"] { grid-template-columns: minmax(0, 260px) minmax(0, 1fr) minmax(0, 188px); }
  #booking [data-bk="info"], #booking [data-bk="cal"] { padding-inline: 22px; }
  #booking [data-bk="slots"] { padding-inline: 20px; }
}
/* below 960 the info pane moves under the booking panes (calendar first) and the engagement model moves after
   the scheduler: a tap on "book" lands on the calendar, not on a second block of copy */
@media (max-width: 959px) {
  #booking [data-bk="head"] { grid-template-columns: minmax(0, 1fr); gap: 0; margin-bottom: 32px; }
  #booking [data-bk="head"] [data-bk="model"] { display: none; }
  #booking [data-bk="after"] [data-bk="model"] { display: block; max-width: 60ch; margin-bottom: 32px; padding-top: 0; border-top: 0; }
  #booking [data-bk="after"] [data-bk="model-label"] { font-size: 16px; }
  #booking [data-bk="body"] { grid-template-columns: minmax(0, 1fr) minmax(0, 200px); }
  #booking [data-bk="cal"] { grid-column: 1; grid-row: 1; }
  #booking [data-bk="slots"] { grid-column: 2; grid-row: 1; }
  #booking [data-bk="form"], #booking [data-bk="done"] { grid-column: 1 / -1; grid-row: 1; }
  #booking [data-bk="info"] {
    grid-column: 1 / -1; grid-row: 2;
    border-inline-end: 0;
    border-top: 1px solid var(--v2-line);
    border-radius: 0 0 var(--v2-r-card) var(--v2-r-card);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: 0 32px;
  }
  #booking [data-bk="info"] [data-bk="call"] { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; padding-top: 0; border-top: 0; }
  /* direct channels: two tidy rows (3 + 2) instead of a ragged wrap */
  #booking [data-bk="direct"] { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0 36px; }
}
@media (max-width: 767px) {
  #booking [data-bk="steps"] { font-size: 14px; }
  #booking [data-bk="bar"] { padding: 0 16px; gap: 14px; }
  #booking [data-bk="steps"] li + li::before { width: 12px; margin: 0 8px; }
  #booking [data-bk="body"] { grid-template-columns: minmax(0, 1fr); }
  #booking [data-bk="cal"] { padding: 16px 12px 12px; }
  #booking [data-bk="cal-head"] { padding: 0 4px; }
  #booking [data-bk="navbtn"] { width: 44px; height: 44px; }
  #booking [data-bk="dow"] { gap: 4px; margin-top: 12px; }
  #booking [data-bk="grid"] { gap: 6px 4px; margin-top: 4px; }
  #booking [data-bk="slots"] { grid-column: 1; grid-row: 2; border-inline-start: 0; padding: 16px 16px 20px; border-top: 1px solid var(--v2-line); }
  #booking [data-bk="slots-head"] { min-height: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
  #booking [data-bk="slots-date"] { margin-top: 0; }
  #booking [data-bk="slot-list"] { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; }
  #booking [data-bk="primary"] { height: 48px; }
  #booking [data-bk="form"], #booking [data-bk="done"] { padding: 16px 16px 24px; }
  #booking [data-bk="back"] { height: 44px; margin-inline-start: -8px; }
  #booking [data-bk="fields"] { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 20px; }
  #booking [data-bk="field"] input, #booking [data-bk="field"] textarea { font-size: 16px; } /* no iOS zoom on focus */
  #booking [data-bk="info"] { grid-row: 3; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding: 22px 16px 24px; }
  #booking [data-bk="info"] [data-bk="call"] { grid-column: 1; grid-row: auto; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--v2-line); }
  #booking [data-bk="direct"] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 8px; }
  #booking [data-bk="direct"] li + li { border-top: 1px solid var(--v2-line); }
  #booking [data-bk="direct"] a { min-height: 48px; width: 100%; }
}
/* phones: the card sits 8px into the page gutter (system.css) so 7 day columns stay >= 44px at 360; every pane is
   inset 8px, so all text in the section starts on the same 20px line as the heading */
@media (max-width: 639px) {
  /* a tap on any "book" link lands with the eyebrow ~16px under the navbar (66px) instead of 72px of empty section
     padding, so the heading AND the first calendar rows share the first screen (3 rows at 375x667). Section-level
     exception to the 68px anchor rule in system.css; could move there. */
  #dc-root section#booking { scroll-margin-top: 10px !important; }
  #booking [data-bk="head"] { margin-bottom: 24px; }
  #booking [data-bk="bar"] { padding: 0 8px; }
  #booking [data-bk="cal"] { padding: 12px 4px 12px; }
  #booking [data-bk="cal-head"] { padding: 0 4px; }
  #booking [data-bk="dow"] { gap: 2px; margin-top: 8px; }
  #booking [data-bk="dow"] span { padding: 2px 0; }
  #booking [data-bk="grid"] { gap: 6px 2px; }
  #booking [data-day] { max-width: 48px; }
  #booking [data-bk="slots"] { padding: 16px 8px 20px; }
  #booking [data-bk="form"], #booking [data-bk="done"] { padding: 12px 8px 24px; }
  #booking [data-bk="back"] { margin-inline-start: 0; padding-inline: 0 8px; }
  #booking [data-bk="info"] { padding: 20px 8px 24px; }
}
/* the narrowest phones: the bar shows the counter and the current step only; the other names stay in the list for
   screen readers (visually hidden), so the bar never wraps to two lines */
@media (max-width: 374px) {
  #booking [data-bk="steps"] li:not([data-st="cur"]) {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  #booking [data-bk="steps"] li[data-st="cur"]::before { display: none; }
}

/* ================= FOOTER ================= */
#dc-root footer[data-ft="footer"] { background: var(--v2-navy); color: #ffffff; }
footer[data-ft="footer"] [data-ft="wrap"] { max-width: 1140px; margin: 0 auto; padding: 64px 32px 0; box-sizing: border-box; }
footer[data-ft="footer"] ul { list-style: none; margin: 0; padding: 0; }
footer[data-ft="footer"] [data-ft="grid"] {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr);
  gap: 40px 32px;
  padding-bottom: 48px;
}
/* the mark's top sits on the column headings' cap line (story.css gives the svg logo 26px + 13px margins) */
footer[data-ft="footer"] [data-ft="logo"] { display: block; height: 60px; filter: brightness(0) invert(1); object-fit: contain; }
footer[data-ft="footer"] img[data-ft="logo"][data-foot-logo] { margin: 3px 0 0 !important; }
footer[data-ft="footer"] [data-ft="tagline"] { margin: 16px 0 0; max-width: 36ch; text-wrap: balance; font-size: 14px; line-height: 1.65; color: rgba(255, 255, 255, .72); }
footer[data-ft="footer"] [data-ft="h"] { font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .66); margin-bottom: 14px; }
footer[data-ft="footer"] [data-ft="col"] li + li { margin-top: 8px; }
footer[data-ft="footer"] [data-ft="col"] a,
footer[data-ft="footer"] [data-ft="linkbtn"] {
  display: inline-block;
  padding: 2px 0;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .86);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: start;
}
footer[data-ft="footer"] :focus-visible { outline-color: #ffffff; }
footer[data-ft="footer"] [data-ft="bar"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 20px;
  padding: 20px 0 24px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .66);
}
footer[data-ft="footer"] [data-ft="bar-2"]::before { content: "·"; margin-inline-end: 20px; color: rgba(255, 255, 255, .4); }
footer[data-ft="footer"] [data-ft="nw"] { white-space: nowrap; }
footer[data-ft="footer"] [data-ft="domain"] { margin-inline-start: auto; unicode-bidi: isolate; font-family: var(--v2-mono); font-size: 12px; letter-spacing: .06em; }
@media (hover: hover) and (pointer: fine) {
  footer[data-ft="footer"] [data-ft="col"] a:hover,
  footer[data-ft="footer"] [data-ft="linkbtn"]:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 4px; }
}
@media (max-width: 1149px) {
  footer[data-ft="footer"] [data-ft="grid"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  footer[data-ft="footer"] [data-ft="brand"] { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px 40px; flex-wrap: wrap; }
  footer[data-ft="footer"] [data-ft="tagline"] { margin: 0; max-width: 52ch; }
}
/* under 1240 the floating cluster sits over the end side of the bar: keep the bar's lines on the start side */
@media (max-width: 1239px) {
  footer[data-ft="footer"] [data-ft="bar-2"]::before { display: none; }
  footer[data-ft="footer"] [data-ft="bar"] { flex-direction: column; align-items: flex-start; gap: 4px; }
  footer[data-ft="footer"] [data-ft="domain"] { margin-inline-start: 0; }
}
@media (max-width: 1023px) {
  footer[data-ft="footer"] [data-ft="grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
}
@media (max-width: 767px) {
  footer[data-ft="footer"] [data-ft="brand"] { display: block; }
  footer[data-ft="footer"] [data-ft="tagline"] { margin-top: 14px; }
}
/* phones: services | company side by side; legal and contact span the width with their links in two columns
   (the e-mail takes a full row), so the footer is ~30% shorter and no column sits alone in half the width */
@media (max-width: 639px) {
  footer[data-ft="footer"] [data-ft="wrap"] { padding-top: 48px; }
  footer[data-ft="footer"] [data-ft="grid"] { gap: 32px 20px; padding-bottom: 36px; }
  footer[data-ft="footer"] :is([data-col="legal"], [data-col="contact"]) { grid-column: 1 / -1; }
  footer[data-ft="footer"] :is([data-col="legal"], [data-col="contact"]) ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  footer[data-ft="footer"] [data-col="contact"] li:has(a[href^="mailto:"]) { grid-column: 1 / -1; order: 5; }
  footer[data-ft="footer"] [data-ft="h"] { margin-bottom: 4px; }
  footer[data-ft="footer"] [data-ft="col"] a,
  footer[data-ft="footer"] [data-ft="linkbtn"] { display: flex; align-items: center; min-height: 44px; padding: 0; }
  footer[data-ft="footer"] [data-ft="col"] li + li { margin-top: 0; }
  footer[data-ft="footer"] [data-ft="bar"] { gap: 4px; }
}

/* floating buttons (WhatsApp, back-to-top, a11y): see system.css */