/* ============================================================================
   RDC · KINETIC NAVIGATION
   A full-screen menu that arrives on staggered backdrop panels, with the links
   rising and un-rotating into place and an ambient shape answering each one on
   hover.

   Ported from a React/GSAP original to dependency-free CSS + JS. The timing is
   reproduced with transition-delay rather than a timeline, which is what makes
   it drop into a static build with no runtime.

   THEMING — every colour comes from a variable. Set these on the host and the
   component takes the brand:
     --kn-bg          panel ground
     --kn-fg          link and label colour
     --kn-rule        hairlines between links
     --kn-accent      hover wash + ambient shape 1
     --kn-accent-2    ambient shape 2
     --kn-serif       display face for the links
     --kn-sans        face for labels and the trigger
   ========================================================================== */

.kn {
  --kn-bg:       #17190F;
  --kn-fg:       #F4F1E9;
  --kn-rule:     rgba(244, 241, 233, 0.14);
  --kn-accent:   #A9873F;
  --kn-accent-2: #6B7A5E;
  --kn-serif:    Georgia, 'Times New Roman', serif;
  --kn-sans:     system-ui, -apple-system, sans-serif;
  --kn-ease:     cubic-bezier(0.65, 0.01, 0.05, 0.99);
}

/* ── Trigger ─────────────────────────────────────────────────────────── */
.kn__trigger {
  display: inline-flex; align-items: center; gap: 0.7rem;
  min-height: 46px; padding: 0.5rem 0.25rem;
  background: none; border: 0; cursor: pointer;
  color: inherit; font: inherit;
  font-family: var(--kn-sans); font-size: 0.82rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
}

/* The word swaps by sliding, so the trigger reads as one moving part rather
   than a label that blinks. */
.kn__word {
  position: relative; display: block; overflow: hidden;
  height: 1.1em; line-height: 1.1em;
}
.kn__word i {
  display: block; font-style: normal;
  transition: transform .5s var(--kn-ease);
}
.kn__trigger[aria-expanded="true"] .kn__word i { transform: translateY(-100%); }

.kn__glyph {
  width: 15px; height: 15px; flex: none;
  transition: transform .5s var(--kn-ease);
}
.kn__trigger[aria-expanded="true"] .kn__glyph { transform: rotate(315deg); }

/* ── Overlay ─────────────────────────────────────────────────────────── */
/* body is fixed while the panel is up, so the page ground has to come from
   somewhere — without this the browser's own grey shows through. */
html:has(.kn.is-open) { background: var(--kn-page-bg, #F4F1E9); }

.kn__overlay {
  position: fixed; inset: 0; z-index: 190;
  background: rgba(10, 12, 8, 0.55);
  opacity: 0; pointer-events: none;
  transition: opacity .5s var(--kn-ease);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.kn.is-open .kn__overlay { opacity: 1; pointer-events: auto; }

.kn__panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 200;
  width: min(560px, 100%);
  display: flex; flex-direction: column;
  pointer-events: none;
  visibility: hidden;
}
.kn.is-open .kn__panel { pointer-events: auto; visibility: visible; }

/* Three grounds arriving a beat apart. The stagger is the whole effect — one
   panel would just be a drawer. */
.kn__layer {
  position: absolute; inset: 0;
  transform: translateX(101%);
  transition: transform .575s var(--kn-ease);
}
.kn__layer:nth-child(1) { background: color-mix(in srgb, var(--kn-accent) 55%, var(--kn-bg)); }
.kn__layer:nth-child(2) { background: color-mix(in srgb, var(--kn-accent-2) 45%, var(--kn-bg)); transition-delay: .12s; }
.kn__layer:nth-child(3) { background: var(--kn-bg); transition-delay: .24s; }
.kn.is-open .kn__layer { transform: translateX(0); }

/* Closing runs the panels out together — a reverse stagger reads as hesitation */
.kn:not(.is-open) .kn__layer { transition-delay: 0s; }

/* ── Ambient shapes ──────────────────────────────────────────────────── */
.kn__shapes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.kn__shape {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity .55s var(--kn-ease);
  /* Heavily blurred and barely there. These are weather behind the type — the
     moment one reads as an illustration it is competing with the links. */
  filter: blur(46px);
}
.kn__shape.is-live { opacity: 1; }
.kn__shape > * {
  transform-origin: center;
  transform: scale(.55); opacity: 0;
  transition: transform .8s cubic-bezier(.34,1.4,.64,1), opacity .6s var(--kn-ease);
}
.kn__shape.is-live > * { transform: none; opacity: .16; }
.kn__shape.is-live > :nth-child(2) { transition-delay: .08s; }
.kn__shape.is-live > :nth-child(3) { transition-delay: .16s; }
.kn__shape.is-live > :nth-child(4) { transition-delay: .24s; }

/* ── Close ───────────────────────────────────────────────────────────── */
/* The trigger sits in the nav, which the panel covers. Without a control
   inside the panel there is no obvious way out of it — which is exactly how it
   read on a phone. */
.kn__close {
  position: absolute; top: clamp(.85rem, 2.5vw, 1.5rem); right: clamp(.85rem, 2.5vw, 1.5rem);
  z-index: 4; width: 52px; height: 52px; padding: 0;
  display: grid; place-items: center;
  background: transparent; border: 1px solid var(--kn-rule); border-radius: 50%;
  color: var(--kn-fg); cursor: pointer;
  opacity: 0; transform: scale(.85);
  transition: opacity .4s var(--kn-ease), transform .4s var(--kn-ease),
              background .3s var(--kn-ease), border-color .3s var(--kn-ease);
}
.kn.is-open .kn__close { opacity: 1; transform: none; transition-delay: .38s; }
.kn__close:hover { background: var(--kn-accent); border-color: var(--kn-accent); color: var(--kn-bg); }
.kn__close svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.6;
                 fill: none; stroke-linecap: round; }

/* ── Links ───────────────────────────────────────────────────────────── */
.kn__body {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  height: 100%; padding: 6rem clamp(1.5rem, 5vw, 3.5rem) 3rem;
  overflow-y: auto;
}
.kn__list { margin: 0; padding: 0; list-style: none; }
.kn__item { overflow: hidden; border-bottom: 1px solid var(--kn-rule); }

.kn__link {
  position: relative; display: flex; align-items: baseline; gap: 1rem;
  padding: clamp(.55rem, 1.6vw, .9rem) 0;
  color: var(--kn-fg); text-decoration: none;
  font-family: var(--kn-serif); font-weight: 300;
  font-size: clamp(1.9rem, 5.5vw, 3rem); line-height: 1.14;
  transform: translateY(140%) rotate(10deg);
  transition: transform .7s var(--kn-ease), color .35s var(--kn-ease);
}
.kn.is-open .kn__link { transform: none; }
.kn.is-open .kn__item:nth-child(1) .kn__link { transition-delay: .35s; }
.kn.is-open .kn__item:nth-child(2) .kn__link { transition-delay: .40s; }
.kn.is-open .kn__item:nth-child(3) .kn__link { transition-delay: .45s; }
.kn.is-open .kn__item:nth-child(4) .kn__link { transition-delay: .50s; }
.kn.is-open .kn__item:nth-child(5) .kn__link { transition-delay: .55s; }
.kn.is-open .kn__item:nth-child(6) .kn__link { transition-delay: .60s; }
.kn__link:hover { color: var(--kn-accent); }

/* A wash that wipes in from the left behind the word */
.kn__link::before {
  content: ''; position: absolute; left: -1rem; right: 100%;
  top: 0; bottom: 0; z-index: -1;
  background: color-mix(in srgb, var(--kn-accent) 16%, transparent);
  transition: right .45s var(--kn-ease);
}
.kn__link:hover::before { right: -1rem; }

.kn__n {
  font-family: var(--kn-sans); font-size: .82rem; font-weight: 500;
  letter-spacing: .2em; opacity: .5; flex: none;
}

/* Anything below the links fades up a beat later */
.kn__foot {
  margin-top: auto; padding-top: 2.5rem;
  font-family: var(--kn-sans); font-size: .92rem;
  color: color-mix(in srgb, var(--kn-fg) 68%, transparent);
  opacity: 0; transform: translateY(50%);
  transition: opacity .6s var(--kn-ease), transform .6s var(--kn-ease);
}
.kn.is-open .kn__foot { opacity: 1; transform: none; transition-delay: .55s; }
.kn__foot a { color: var(--kn-fg); text-decoration: none; }
.kn__foot a:hover { color: var(--kn-accent); }

@media (max-width: 560px) {
  .kn__panel { width: 100%; }
  .kn__link { font-size: clamp(1.7rem, 8vw, 2.4rem); }
}

@media (prefers-reduced-motion: reduce) {
  .kn__layer, .kn__link, .kn__foot, .kn__shape, .kn__shape > *,
  .kn__overlay, .kn__glyph, .kn__word i, .kn__link::before {
    transition-duration: .001ms !important; transition-delay: 0s !important;
  }
}
/* ============================================================================
   RDC · USP STRIP
   The three or four reasons to choose this business, stated above the nav and
   restated in the footer. Most small-business sites bury these in an About
   page; the whole point is that they are the first and last thing read.

   Two variants off one set of tokens:
     .usp            a static row — desktop header, or any full-width band
     .usp--marquee   the same claims on a loop — mobile header, where a row of
                     four will not fit and stacking them eats the viewport

   THEMING
     --usp-bg  --usp-fg  --usp-rule  --usp-accent  --usp-sans
   ========================================================================== */

.usp {
  --usp-bg:     #17190F;
  --usp-fg:     #F4F1E9;
  --usp-rule:   rgba(244, 241, 233, 0.16);
  --usp-accent: #A9873F;
  --usp-sans:   system-ui, -apple-system, sans-serif;

  position: relative; z-index: 95;
  background: var(--usp-bg); color: var(--usp-fg);
  border-bottom: 1px solid var(--usp-rule);
  font-family: var(--usp-sans);
}

.usp__in {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1.25rem, 3.5vw, 3rem);
  padding: 0.6rem 0;
  font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
}

.usp__item { display: flex; align-items: center; gap: 0.55rem; white-space: nowrap; }

/* A small mark rather than an icon set — one shape, rotated, costs nothing and
   never looks like a stock icon library. */
.usp__mark {
  width: 7px; height: 7px; flex: none;
  border: 1px solid var(--usp-accent); transform: rotate(45deg);
}
.usp__item--solid .usp__mark { background: var(--usp-accent); }

/* ── Marquee variant ─────────────────────────────────────────────────── */
.usp--marquee .usp__in { justify-content: flex-start; overflow: hidden; padding-inline: 0; }
.usp--marquee .usp__track {
  display: flex; align-items: center; gap: clamp(1.25rem, 3.5vw, 3rem);
  flex: none; padding-right: clamp(1.25rem, 3.5vw, 3rem);
  animation: usp-run 26s linear infinite;
}
.usp--marquee:hover .usp__track { animation-play-state: paused; }
@keyframes usp-run { to { transform: translateX(-100%); } }

/* ── Footer variant — the same claims, given room ────────────────────── */
.usp-block {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--usp-rule, rgba(244,241,233,.16));
  border-bottom: 1px solid var(--usp-rule, rgba(244,241,233,.16));
}
.usp-block h4 {
  margin: 0 0 .5rem;
  font-family: var(--usp-sans); font-size: .84rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--usp-accent, #A9873F);
}
.usp-block p { margin: 0; font-size: .96rem; line-height: 1.6; }

@media (max-width: 900px) {
  .usp-block { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .usp-block { grid-template-columns: 1fr; gap: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .usp--marquee .usp__track { animation: none; }
  /* With the loop stopped the row has to be reachable, so let it scroll by hand */
  .usp--marquee .usp__in { overflow-x: auto; }
}
/* ============================================================================
   RDC · STICKY ENQUIRY
   The contact action, held after the hero has gone by. Two forms off one set of
   markup: a right-hand rail on desktop, a full-width dock on phones.

   It appears once the hero is behind you and retires over the footer, so it is
   never the last thing on the page competing with the real footer CTA.

   THEMING
     --se-bg  --se-fg  --se-accent  --se-accent-fg  --se-sans  --se-shadow
   ========================================================================== */

.se {
  --se-bg:        #17190F;
  --se-fg:        #F4F1E9;
  --se-accent:    #A9873F;
  --se-accent-fg: #17190F;
  --se-sans:      system-ui, -apple-system, sans-serif;
  --se-shadow:    0 22px 50px -26px rgba(0, 0, 0, .7);
  --se-ease:      cubic-bezier(0.22, 0.61, 0.36, 1);

  position: fixed; z-index: 120;
  font-family: var(--se-sans);
  opacity: 0; pointer-events: none;
  transition: opacity .45s var(--se-ease), transform .45s var(--se-ease);
}
.se.is-live { opacity: 1; pointer-events: auto; }
/* Retired over the footer so it never fights the page's own closing CTA */
.se.is-parked { opacity: 0; pointer-events: none; }

/* ── Desktop: a rail on the right ────────────────────────────────────── */
.se--rail {
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem .8rem .7rem 1.4rem;
  background: var(--se-bg); color: var(--se-fg);
  border: 1px solid rgba(244, 241, 233, .16);
  box-shadow: var(--se-shadow);
  transform: translateY(14px);
}
.se--rail.is-live { transform: none; }

.se__label { font-size: .8rem; letter-spacing: .04em; white-space: nowrap; }
.se__label b { display: block; font-weight: 600; }
.se__label span { color: rgba(244, 241, 233, .6); font-size: .74rem; }

.se__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 46px; padding: .8rem 1.4rem;
  background: var(--se-accent); color: var(--se-accent-fg);
  font-size: .82rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  border: 0; cursor: pointer;
  transition: filter .25s var(--se-ease);
}
.se__btn:hover { filter: brightness(1.12); }
.se__btn--ghost {
  background: transparent; color: var(--se-fg);
  border: 1px solid rgba(244, 241, 233, .3);
}
.se__btn--ghost:hover { background: rgba(244, 241, 233, .1); filter: none; }

/* Dismiss, because a bar you cannot get rid of is a bar people resent */
.se__x {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer;
  color: rgba(244, 241, 233, .5); font-size: 1.1rem; line-height: 1;
  transition: color .25s var(--se-ease);
}
.se__x:hover { color: var(--se-fg); }

/* ── Mobile: a dock across the bottom ────────────────────────────────── */
@media (max-width: 860px) {
  .se--rail {
    left: 0; right: 0; bottom: 0;
    padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom, 0px));
    border: 0; border-top: 1px solid rgba(244, 241, 233, .16);
    transform: translateY(100%);
  }
  .se--rail.is-live { transform: none; }
  /* The label eats the width two buttons need */
  .se__label { display: none; }
  .se__btn { flex: 1; padding-inline: .75rem; }
  .se__x { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .se { transition-duration: .001ms; }
}
@media print { .se { display: none; } }
/* ============================================================================
   RDC · MAP BAND

   A full-bleed map with the practical detail floating over it on a card.

   The first version was a two-column split — details left, map right — and it
   read as two unrelated rectangles butted together with a hard seam down the
   middle. A map wants to be the ground, not a column. Letting it run the full
   width and setting the address on top of it makes it part of the page instead
   of a widget dropped into a slot.

   Keyless embed, no API key or billing account:
     https://maps.google.com/maps?q=<address>&z=14&output=embed
   It is a third-party iframe, so it is lazy-loaded, titled, and given a plain
   "Get directions" link out — an iframe is not a route.

   THEMING
     --map-card       card ground
     --map-fg         card text
     --map-rule       hairlines inside the card
     --map-accent     the action
     --map-accent-fg  text on the action
     --map-serif  --map-sans
     --map-h          band height
   ========================================================================== */

.mapband {
  --map-card:      #17190F;
  --map-fg:        #F4F1E9;
  --map-rule:      rgba(244, 241, 233, .16);
  --map-accent:    #A9873F;
  --map-accent-fg: #17190F;
  --map-serif:     Georgia, 'Times New Roman', serif;
  --map-sans:      system-ui, -apple-system, sans-serif;
  --map-h:         clamp(460px, 68vh, 660px);
  --map-ease:      cubic-bezier(.22, .61, .36, 1);

  position: relative;
  height: var(--map-h);
  font-family: var(--map-sans);
  isolation: isolate;
}

/* ── The map itself, as ground ───────────────────────────────────────── */
.mapband__map { position: absolute; inset: 0; background: var(--map-card); }
.mapband__map iframe {
  width: 100%; height: 100%; border: 0; display: block;
  /* Google's palette is loud beside a restrained brand. Pulled back at rest,
     released the moment anyone actually interacts with it. */
  filter: saturate(.55) contrast(1.04);
  transition: filter .6s var(--map-ease);
}
.mapband:hover .mapband__map iframe,
.mapband__map:focus-within iframe { filter: none; }

/* A soft vignette on the card's side only, so the type has something to sit on
   without flattening the map. */
.mapband::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--map-card) 62%, transparent) 0%,
    color-mix(in srgb, var(--map-card) 22%, transparent) 38%,
    transparent 62%);
}
@media (max-width: 900px) {
  .mapband::after {
    background: linear-gradient(180deg,
      transparent 0%,
      color-mix(in srgb, var(--map-card) 30%, transparent) 42%,
      color-mix(in srgb, var(--map-card) 78%, transparent) 100%);
  }
}

/* ── The floating card ───────────────────────────────────────────────── */
.mapband__in {
  position: relative; z-index: 2; height: 100%;
  display: flex; align-items: center;
  padding-inline: var(--gut, clamp(1.25rem, 5vw, 5rem));
  pointer-events: none;                 /* the map stays draggable around it */
}

.mapband__card {
  pointer-events: auto;
  width: min(420px, 100%);
  background: var(--map-card); color: var(--map-fg);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .85);
  border: 1px solid var(--map-rule);
}
.mapband__card h3 {
  margin: 0 0 1.1rem;
  font-family: var(--map-serif); font-weight: 300; line-height: 1.1;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -.015em;
}
.mapband__card address {
  font-style: normal; font-size: 1.02rem; line-height: 1.65;
  color: color-mix(in srgb, var(--map-fg) 82%, transparent);
}

.mapband__rows { margin: 1.5rem 0 0; }
.mapband__rows div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.25rem;
  padding: .6rem 0; border-top: 1px solid var(--map-rule);
  font-size: .95rem;
}
.mapband__rows dt { color: color-mix(in srgb, var(--map-fg) 60%, transparent); }
.mapband__rows dd { margin: 0; text-align: right; white-space: nowrap; }
.mapband__rows a {
  color: inherit;
  /* A phone number is the single most-tapped thing in this block. */
  display: inline-flex; align-items: center; min-height: 44px;
}
.mapband__rows a:hover { color: var(--map-accent); }

.mapband__cta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }
.mapband__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .85rem 1.4rem;
  font-size: .82rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  background: var(--map-accent); color: var(--map-accent-fg); border: 1px solid var(--map-accent);
  transition: filter .25s var(--map-ease), background .25s var(--map-ease), color .25s var(--map-ease);
}
.mapband__btn:hover { filter: brightness(1.12); }
.mapband__btn--ghost {
  background: transparent; color: var(--map-fg); border-color: var(--map-rule);
}
.mapband__btn--ghost:hover { background: var(--map-fg); color: var(--map-card); filter: none; }

/* A file:// preview and a blocked third party both leave an empty frame, so the
   card never depends on the map having loaded to make sense. */
.mapband__map::before {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg,  var(--map-rule) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, var(--map-rule) 0 1px, transparent 1px 44px);
  opacity: .5;
}
.mapband__map iframe { position: relative; z-index: 1; }

@media (max-width: 900px) {
  /* Stacked: map on top, card lapping up over it. The band grows to fit rather
     than holding a fixed height, or the card runs out of the bottom of the
     section and onto whatever follows. */
  .mapband { --map-h: auto; height: auto; }
  .mapband__map { position: relative; inset: auto; height: 340px; }
  .mapband__in {
    display: block; height: auto;
    padding-inline: var(--gut, clamp(1.25rem, 5vw, 5rem));
    padding-bottom: clamp(2rem, 6vw, 3rem);   /* the card had no room beneath it */
  }
  .mapband__card {
    width: 100%;
    margin-top: -4rem;                        /* laps the map, does not follow it */
  }
  .mapband__rows dd { white-space: normal; }
  /* The vignette must not wash over the card that is now sitting below it. */
  .mapband::after { bottom: auto; height: 340px; }
}
/* ============================================================================
   RDC · BOOKING WIDGET

   The quote form, floated on the hero as the first thing on the page. For any
   business whose whole product is "reserve a slot", this is the page — pushing
   it below the fold behind a paragraph of introduction is the single most
   common mistake on the sites we replace.

   It is a real <form> with real labels. A concept still has to submit somewhere
   sensible, so the demo target is a tel: link; swap the action when it is built.

   THEMING
     --bk-card  --bk-fg  --bk-muted  --bk-rule  --bk-field
     --bk-accent  --bk-accent-fg  --bk-radius  --bk-sans
   ========================================================================== */

.bk {
  --bk-card:      #FFFFFF;
  --bk-fg:        #2E3138;
  --bk-muted:     #5A6070;
  --bk-rule:      #DFE3E8;
  --bk-field:     #F6F7F9;
  --bk-accent:    #EE001F;
  --bk-accent-fg: #FFFFFF;
  --bk-radius:    14px;
  --bk-sans:      system-ui, -apple-system, sans-serif;
  --bk-ease:      cubic-bezier(.22, .61, .36, 1);

  background: var(--bk-card); color: var(--bk-fg);
  border-radius: var(--bk-radius);
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  box-shadow: 0 30px 70px -30px rgba(20, 24, 32, .45);
  font-family: var(--bk-sans);
}

.bk__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.1rem;
}
.bk__title { margin: 0; font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; }
.bk__note  { margin: 0; font-size: .84rem; color: var(--bk-muted); }

.bk__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr auto;
  gap: .75rem;
  align-items: end;
}

.bk__field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.bk__field label {
  font-size: .78rem; font-weight: 600; letter-spacing: .04em;
  color: var(--bk-muted);
}
.bk__field input,
.bk__field select {
  /* 16px is the floor that stops iOS zooming the whole page on focus. */
  font: inherit; font-size: 16px;
  width: 100%; min-height: 52px; padding: .7rem .85rem;
  color: var(--bk-fg); background: var(--bk-field);
  border: 1px solid var(--bk-rule); border-radius: 10px;
  appearance: none; -webkit-appearance: none;
  transition: border-color .25s var(--bk-ease), box-shadow .25s var(--bk-ease);
}
.bk__field select {
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1rem center, right .72rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}
.bk__field input:focus-visible,
.bk__field select:focus-visible {
  outline: none;
  border-color: var(--bk-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bk-accent) 22%, transparent);
}

.bk__go {
  min-height: 52px; padding: .8rem 1.6rem;
  font: inherit; font-size: .9rem; font-weight: 700; letter-spacing: .02em;
  color: var(--bk-accent-fg); background: var(--bk-accent);
  border: 0; border-radius: 10px; cursor: pointer; white-space: nowrap;
  transition: filter .25s var(--bk-ease), transform .25s var(--bk-ease);
}
.bk__go:hover { filter: brightness(1.08); }
.bk__go:active { transform: translateY(1px); }

.bk__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem;
  margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--bk-rule);
  font-size: .86rem; color: var(--bk-muted);
}
.bk__foot span { display: inline-flex; align-items: center; gap: .4rem; }
.bk__tick { width: 15px; height: 15px; flex: none; color: var(--bk-accent); }

@media (max-width: 1080px) {
  .bk__grid { grid-template-columns: 1fr 1fr; }
  .bk__go { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .bk__grid { grid-template-columns: 1fr; }
  .bk__head { flex-direction: column; gap: .25rem; }
}
/* ============================================================================
   RDC · FAQ ACCORDION

   Built on <details>/<summary>, so it opens with JavaScript switched off, is
   keyboard-operable for free, and is announced correctly by a screen reader
   without a single aria attribute. The JS is optional and only adds the
   one-open-at-a-time behaviour and the height animation.

   THEMING
     --faq-fg  --faq-muted  --faq-rule  --faq-accent  --faq-sans  --faq-serif
   ========================================================================== */

.faq {
  --faq-fg:     #2E3138;
  --faq-muted:  #5A6070;
  --faq-rule:   #DFE3E8;
  --faq-accent: #EE001F;
  --faq-sans:   system-ui, -apple-system, sans-serif;
  --faq-serif:  inherit;
  --faq-ease:   cubic-bezier(.22, .61, .36, 1);

  font-family: var(--faq-sans); color: var(--faq-fg);
}

.faq__item { border-top: 1px solid var(--faq-rule); }
.faq__item:last-child { border-bottom: 1px solid var(--faq-rule); }

.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.15rem 0; min-height: 56px;
  font-size: clamp(1rem, 1.3vw, 1.1rem); font-weight: 600;
  cursor: pointer; list-style: none;
  transition: color .25s var(--faq-ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--faq-accent); }
.faq__item[open] .faq__q { color: var(--faq-accent); }

/* One glyph, rotated — a plus that becomes a cross costs nothing and never
   looks like a stock icon set. */
.faq__sign {
  position: relative; width: 18px; height: 18px; flex: none;
}
.faq__sign::before, .faq__sign::after {
  content: ''; position: absolute; inset: 50% 0 auto 0;
  height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform .35s var(--faq-ease);
}
.faq__sign::after { transform: rotate(90deg); }
.faq__item[open] .faq__sign::after { transform: rotate(0deg); }

.faq__a {
  padding: 0 0 1.3rem; max-width: 68ch;
  color: var(--faq-muted); line-height: 1.7;
}
.faq__a p { margin: 0 0 .8rem; }
.faq__a p:last-child { margin-bottom: 0; }
.faq__a a { color: var(--faq-accent); }

/* The reveal is animated by JS setting --h; without it the panel simply
   appears, which is the correct no-JS behaviour rather than a broken one. */
.faq__wrap { overflow: hidden; }
.js .faq__item:not([open]) .faq__wrap { height: 0; }
.js .faq__wrap { transition: height .38s var(--faq-ease); }

@media (prefers-reduced-motion: reduce) {
  .js .faq__wrap { transition: none; }
  .faq__sign::before, .faq__sign::after { transition: none; }
}