/* ==========================================================================
   ESH'S TRUCK DRIVING SCHOOL — layout.css
   Utility bar · header · navigation · mobile menu · sections · kerb rail ·
   footer · fixed furniture (mobile bar, floating buttons, back-to-top)

   Breakpoints used across the site, mobile-first:
     30em  480px   40em  640px   48em  768px
     64em 1024px   80em 1280px   96em 1536px

   SPECIFICITY NOTE: block spacing is only ever set through class selectors.
   No bare element selector sets padding or margin on a section, which is the
   usual source of "why did my padding disappear" bugs in hand-written CSS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FIXED HEAD ASSEMBLY (utility bar + header)

   The whole assembly is FIXED, not sticky. That is deliberate: a sticky
   header that shrinks on scroll changes its own flow height and shoves the
   page content up with it. Fixed positioning takes the assembly out of flow
   entirely, so it can change height as much as it likes and the document
   below never moves a pixel. The scrolled state is reached by translating
   the assembly up by exactly the utility bar's height — a transform, so it
   is composited and cannot reflow anything.
   -------------------------------------------------------------------------- */
.site-head {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  transform: translate3d(0, 0, 0);
  transition: transform var(--dur-mid) var(--ease-out);
}
.site-head.is-scrolled { transform: translate3d(0, calc(var(--utility-h) * -1), 0); }

/* ---- Utility bar --------------------------------------------------------- */
.utility-bar {
  height: var(--utility-h);
  background-color: var(--ink);
  color: var(--muted-on-dark);
  border-block-end: var(--hairline) solid var(--line-on-dark);
}
.utility-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  height: 100%;
  /* At 320px the hours and the phone number together are wider than the
     available 280px, so below 480px the bar drops its icons and tightens the
     mono tracking rather than letting either item be clipped. */
  font-size: .625rem;
  letter-spacing: .08em;
}
@media (min-width: 30em) {
  .utility-bar__inner {
    gap: var(--space-md);
    font-size: var(--step--1);
    letter-spacing: var(--tracking-mono);
  }
}
.utility-bar__hours {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  white-space: nowrap;
}
.utility-bar__hours svg { display: none; }
@media (min-width: 30em) { .utility-bar__hours svg { display: block; } }
.utility-bar__group {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.utility-bar__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  text-decoration: none;
  color: var(--muted-on-dark);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.utility-bar__link:hover { color: var(--bone); }
.utility-bar__link svg { display: none; width: .875rem; height: .875rem; flex: none; }
@media (min-width: 30em) { .utility-bar__link svg { display: block; } }

/* Below 640px only the hours and the primary number survive. */
.utility-bar__item--secondary,
.utility-bar__item--email { display: none; }
/* The second number joins the bar at 1024px, not 640px. At 640 the hours, the
   primary number and "0403 561 052 · Moushmi Narayan" measure ~736px against a
   ~600px content width, so the name was being clipped on every page between
   640 and roughly 820. Both numbers still appear in the footer, the mobile
   menu and on the contact page at every width. */
@media (min-width: 64em) {
  .utility-bar__item--secondary { display: inline-flex; }
}
/* The email address only appears at 1280px and up. At 1024 the hours, the
   email and both numbers together measure ~868px against a 976px content
   width once the gutters are removed — it fits on paper and overflows in
   practice as soon as the mono tracking is applied. */
@media (min-width: 80em) {
  .utility-bar__item--email { display: inline-flex; }
}

/* ---- Brand band -----------------------------------------------------------
   A white band whose only job is to carry the supplied logo. The logo is
   artwork on a solid white field; rather than redrawing it to survive a dark
   header, the header gives it a light band of its own. The nav then sits in
   its own dark bar beneath, so logo, contact details and navigation each read
   as separate things instead of competing in one crowded strip. */
.brand-bar {
  background-color: var(--surface);
  border-block-end: var(--hairline) solid var(--line);
  transition: box-shadow var(--dur-mid) var(--ease-out);
}
.site-head.is-scrolled .brand-bar { box-shadow: var(--shadow-sm); }

.brand-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  height: var(--brand-h);
  transition: height var(--dur-mid) var(--ease-out);
}

/* ---- Brand lockup ---------------------------------------------------------
   The logo file carries a wide white margin baked in. Rather than shipping a
   second, re-cropped copy of it, the margin is cropped here: the measured
   artwork occupies x 180–1354 and y 86–926 of a 1536×1024 image, so the image
   is scaled to 130.83% of the crop box and offset by those proportions. The
   file stays the client's original, and the alt text stays on a real <img>.
   ---------------------------------------------------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  text-decoration: none;
  line-height: 0;
}

/*
   Sized by HEIGHT, not width: this is a stacked lockup roughly 1.4:1, so
   setting a width leaves the height to fall where it likes — which pushed the
   logo straight through the top and bottom of its band. Height drives it and
   aspect-ratio derives the width. */
.brand__crop {
  display: block;
  position: relative;
  overflow: hidden;
  height: 3.5rem;
  width: auto;
  aspect-ratio: 1174 / 790;
  transition: height var(--dur-mid) var(--ease-out);
}
.brand__crop img {
  position: absolute;
  inset-block-start: -10.89%;
  inset-inline-start: -15.33%;
  width: 130.83%;
  max-width: none;
  height: auto;
}
@media (min-width: 40em) { .brand__crop { height: 4rem; } }
@media (min-width: 64em) { .brand__crop { height: 5.5rem; } }
.site-head.is-scrolled .brand__crop { height: 3rem; }
@media (min-width: 64em) {
  .site-head.is-scrolled .brand__crop { height: 4rem; }
}

/* ---- Brand band aside: phone + CTA ----------------------------------------
   margin-inline-start: auto keeps the CTA next to the hamburger on the right
   between 640 and 1024px. Without it, space-between strands the button in the
   middle of the band with white space either side. */
.brand-bar__aside {
  display: none;
  align-items: center;
  gap: var(--space-md);
  margin-inline-start: auto;
}
@media (min-width: 40em) { .brand-bar__aside { display: flex; } }

.brand-bar__contact {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  text-decoration: none;
  color: var(--ink);
}
.brand-bar__contact svg {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  color: var(--red);
}
.brand-bar__contact-label {
  display: block;
  font-family: var(--font-mono);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--muted);
}
.brand-bar__contact-value {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-fast) var(--ease-out);
}
.brand-bar__contact:hover .brand-bar__contact-value { color: var(--red); }

/* The phone block needs more room than a 640px viewport has once the CTA is
   in place, so it appears a breakpoint later than the button. */
.brand-bar__contact { display: none; }
@media (min-width: 64em) { .brand-bar__contact { display: flex; } }
/* ---- Header actions (mobile) ---------------------------------------------- */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  flex: none;
}
@media (min-width: 64em) { .site-header__actions { display: none; } }

/* ---- Hamburger ----------------------------------------------------------- */
.burger {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  cursor: pointer;
  color: var(--ink);
}
@media (min-width: 64em) { .burger { display: none; } }

.burger__box {
  position: relative;
  width: 1.5rem;
  height: .8125rem;
}
.burger__bar {
  position: absolute;
  inset-inline: 0;
  height: 2px;
  background-color: currentColor;
  transition:
    transform var(--dur-mid) var(--ease-out),
    opacity var(--dur-fast) linear;
}
.burger__bar:nth-child(1) { top: 0; }
.burger__bar:nth-child(2) { top: 50%; transform: translateY(-50%); }
.burger__bar:nth-child(3) { bottom: 0; }

.burger[aria-expanded="true"] .burger__bar:nth-child(1) { transform: translateY(.34375rem) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__bar:nth-child(3) { transform: translateY(-.34375rem) rotate(-45deg); }

/* --------------------------------------------------------------------------
   2. NAVIGATION BAR (≥1024px)
   Its own dark band beneath the white brand band.
   -------------------------------------------------------------------------- */
.nav-bar { display: none; }

@media (min-width: 64em) {
  .nav-bar {
    display: block;
    background-color: var(--ink);
  }

  .nav-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    height: var(--nav-h);
  }

  .nav__list {
    display: flex;
    align-items: stretch;
    gap: clamp(.5rem, 1.6vw, 1.75rem);
    height: 100%;
    margin: 0;
  }

  .nav__item {
    position: relative;
    display: flex;
    align-items: center;
  }

  .nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding-inline: var(--space-3xs);
    color: var(--bone);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--dur-fast) var(--ease-out);
  }

  /* Underline grows from the left, in brand red. */
  .nav__link::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    height: 3px;
    background-color: var(--red);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-fast) var(--ease-out);
  }
  .nav__link:hover::after,
  .nav__item--open > .nav__link::after { transform: scaleX(1); }
  .nav__link[aria-current="page"] { color: var(--surface); }
  .nav__link[aria-current="page"]::after { transform: scaleX(1); }

  /* Disclosure button for the Courses submenu. The parent stays a real link
     to the courses hub, so the hub is reachable without opening anything. */
  .nav__disclosure {
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--muted-on-dark);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out);
  }
  .nav__disclosure svg {
    width: .625rem;
    height: .625rem;
    transition: transform var(--dur-fast) var(--ease-out);
  }
  .nav__disclosure:hover { color: var(--bone); }
  .nav__item--open .nav__disclosure svg { transform: rotate(180deg); }

  .nav__menu {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: calc(var(--space-md) * -1);
    z-index: var(--z-raised);
    min-width: 15rem;
    margin: 0;
    padding: var(--space-2xs);
    background-color: var(--asphalt);
    border: var(--hairline) solid var(--line-on-dark);
    border-block-start: 3px solid var(--red);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, -.4rem, 0);
    transition:
      opacity var(--dur-fast) var(--ease-out),
      transform var(--dur-fast) var(--ease-out),
      visibility 0s linear var(--dur-fast);
  }
  .nav__item--open .nav__menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
  /* Without JS, hover still opens the submenu. */
  .no-js .nav__item--has-menu:hover .nav__menu,
  .no-js .nav__item--has-menu:focus-within .nav__menu {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav__menu-link {
    display: block;
    padding: var(--space-2xs) var(--space-sm);
    color: var(--muted-on-dark);
    font-size: var(--step--1);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition:
      background-color var(--dur-fast) var(--ease-out),
      color var(--dur-fast) var(--ease-out);
  }
  .nav__menu-link:hover,
  .nav__menu-link[aria-current="page"] {
    background-color: var(--red);
    color: var(--surface);
  }

  /* Right-hand side of the nav bar: the tagline, quietly. */
  .nav-bar__tagline {
    font-family: var(--font-mono);
    font-size: .625rem;
    font-weight: 500;
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--muted-on-dark);
    white-space: nowrap;
  }
}
@media (max-width: 79.99em) {
  .nav-bar__tagline { display: none; }
}

/* --------------------------------------------------------------------------
   3. MOBILE MENU
   -------------------------------------------------------------------------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  background-color: var(--ink);
  padding-block: var(--header-total) var(--space-xl);
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  opacity: 0;
  transform: translate3d(0, -1.5rem, 0);
  transition:
    opacity var(--dur-mid) var(--ease-out),
    transform var(--dur-mid) var(--ease-out),
    visibility 0s linear var(--dur-mid);
}
.mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}
@media (min-width: 64em) { .mobile-menu { display: none; } }

.mobile-menu__list { margin: 0; }

.mobile-menu__item { border-block-end: var(--hairline) solid var(--line-on-dark); }

.mobile-menu__link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: var(--tap);
  padding-block: var(--space-sm);
  color: var(--bone);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  text-decoration: none;
}
.mobile-menu__link[aria-current="page"] { color: var(--red); }

.mobile-menu__index {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  color: var(--muted-on-dark);
}

/* Courses becomes an accordion inside the mobile menu. */
.mobile-menu__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mobile-menu__disclosure {
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  flex: none;
  color: var(--muted-on-dark);
  cursor: pointer;
}
.mobile-menu__disclosure svg {
  width: .75rem;
  height: .75rem;
  transition: transform var(--dur-fast) var(--ease-out);
}
.mobile-menu__disclosure[aria-expanded="true"] svg { transform: rotate(180deg); }

.mobile-menu__sub {
  display: grid;
  grid-template-rows: 0fr;
  margin: 0;
  transition: grid-template-rows var(--dur-mid) var(--ease-out);
}
.mobile-menu__sub.is-open { grid-template-rows: 1fr; }
.mobile-menu__sub > div { overflow: hidden; }

.mobile-menu__sub-link {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: var(--space-2xs) 0 var(--space-2xs) var(--space-md);
  border-inline-start: 2px solid var(--line-on-dark);
  margin-inline-start: var(--space-3xs);
  color: var(--muted-on-dark);
  font-size: var(--step-0);
  font-weight: 600;
  text-decoration: none;
  transition:
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
.mobile-menu__sub-link:hover,
.mobile-menu__sub-link[aria-current="page"] {
  color: var(--bone);
  border-inline-start-color: var(--red);
}

.mobile-menu__foot {
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-md);
  border-block-start: var(--hairline) solid var(--line-on-dark);
}
.mobile-menu__hours {
  margin-block-start: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--muted-on-dark);
}
.mobile-menu__phone {
  display: block;
  min-height: var(--tap);
  padding-block: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--surface);
  text-decoration: none;
}
.mobile-menu__phone span {
  display: block;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--muted-on-dark);
}

/* --------------------------------------------------------------------------
   4. PAGE STRUCTURE
   -------------------------------------------------------------------------- */
.page-offset { padding-block-start: var(--header-total); }

.section { padding-block: var(--space-section); }
.section--tight { padding-block: calc(var(--space-section) * .6); }
.section--flush-top { padding-block-start: 0; }
.section--dark {
  background-color: var(--ink);
  color: var(--bone);
}
.section--asphalt {
  background-color: var(--asphalt);
  color: var(--bone);
}

/* ---- The kerb rail ------------------------------------------------------
   A hairline column carrying a mono index and label, like chainage markers
   along a road. It exists only at ≥1024px; below that the section header
   simply stacks. Its job is to push every section off-centre — the site is
   left-anchored almost everywhere, and that asymmetry is what stops the
   layout reading as a centred template. */
/* minmax(0, 1fr) rather than a bare 1fr: an auto grid track is sized by its
   contents' min-content width, and the testimonial slider's flex track reports
   a min-content width of ~870px. Without the explicit minimum the whole
   content column inflates to that width at every viewport. */
.section__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
}

@media (min-width: 64em) {
  .section--railed .section__grid {
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
    column-gap: clamp(2rem, 4vw, 4rem);
  }
}

.rail { display: none; }
@media (min-width: 64em) {
  .rail {
    display: block;
    position: sticky;
    inset-block-start: calc(var(--brand-h) + var(--nav-h) + var(--space-lg));
    z-index: var(--z-rail);
    align-self: start;
    padding-inline-end: var(--space-sm);
    border-inline-end: var(--hairline) solid var(--line);
  }
  .section--dark .rail,
  .section--asphalt .rail { border-inline-end-color: var(--line-on-dark); }

  .rail__index {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--step-1);
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--red);
    font-variant-numeric: tabular-nums;
  }
  .rail__label {
    display: block;
    margin-block-start: var(--space-3xs);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--muted);
    line-height: 1.4;
  }
  .section--dark .rail__label,
  .section--asphalt .rail__label { color: var(--muted-on-dark); }

  .rail__tick {
    display: block;
    width: 2rem;
    height: 3px;
    margin-block-start: var(--space-sm);
    background-color: var(--red);
  }
}

/* --------------------------------------------------------------------------
   5. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--ink);
  color: var(--muted-on-dark);
  border-block-start: 3px solid var(--red);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-xl);
  padding-block: var(--space-2xl);
}
@media (min-width: 40em) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
  .site-footer__grid {
    grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
    gap: var(--space-lg);
  }
}

/* The footer is dark and the logo is artwork on white, so it sits on a light
   plate — like a decal on a cab door — rather than being recoloured. */
.site-footer__logo {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  background-color: var(--surface);
  border-radius: var(--radius-md);
  line-height: 0;
}
.site-footer__logo .brand__crop { height: 5rem; }

.site-footer__blurb {
  margin-block-start: var(--space-md);
  font-size: var(--step--1);
  line-height: 1.7;
  max-width: 34ch;
}

.site-footer__heading {
  margin-block-end: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--surface);
}

.site-footer__list { margin: 0; }
.site-footer__list li + li { margin-block-start: var(--space-3xs); }

.site-footer__link {
  display: inline-block;
  padding-block: var(--space-3xs);
  font-size: var(--step--1);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.site-footer__link:hover { color: var(--red); }

/* The tagline. Red would be the obvious choice here and it is what the logo
   does, but red on ink is 3.7:1 — under AA for 11px text. The line is set in
   bone and the red is carried by the rule beside it instead. */
.site-footer__tagline {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  margin-block-start: var(--space-sm);
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--bone);
  max-width: 32ch;
  line-height: 1.7;
}
.site-footer__tagline::before {
  content: "";
  flex: none;
  width: 1.5rem;
  height: 3px;
  margin-block-start: .45rem;
  background-color: var(--red);
}

.site-footer__contact { display: grid; gap: var(--space-sm); }

.site-footer__hours {
  font-size: var(--step--1);
  line-height: 1.7;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.site-footer__area { font-size: var(--step--1); }

.site-footer__phone {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--surface);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.site-footer__phone:hover { color: var(--red); }
.site-footer__phone-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--muted-on-dark);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-md);
  border-block-start: var(--hairline) solid var(--line-on-dark);
  font-size: var(--step--1);
}
/* Build credit. Sits last in the bottom bar and takes the full row on mobile
   so it never squeezes the copyright or the legal links. */
.site-footer__credit {
  font-size: var(--step--1);
  color: var(--muted-on-dark);
}
@media (min-width: 48em) {
  .site-footer__credit { margin-inline-start: auto; }
}
/* The studio name is underlined rather than only colour-shifted: sitting
   inside a sentence, colour alone would not mark it out as a link. */
.site-footer__credit a {
  color: var(--bone);
  text-decoration: underline;
  text-decoration-color: var(--line-on-dark);
  text-underline-offset: .2em;
  transition:
    color var(--dur-fast) var(--ease-out),
    text-decoration-color var(--dur-fast) var(--ease-out);
}
.site-footer__credit a:hover {
  color: var(--red);
  text-decoration-color: var(--red);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin: 0;
}

/* --------------------------------------------------------------------------
   6. FIXED FURNITURE
   -------------------------------------------------------------------------- */

/* ---- Mobile action bar (<768px only) ------------------------------------- */
.mobile-bar {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: var(--z-mobilebar);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background-color: var(--ink);
  border-block-start: var(--hairline) solid var(--line-on-dark);
  padding-block-end: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 48em) { .mobile-bar { display: none; } }

.mobile-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .125rem;
  min-height: 3.5rem;
  padding: var(--space-3xs);
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}
.mobile-bar__item svg { width: 1.125rem; height: 1.125rem; }
.mobile-bar__item--cta { background-color: var(--red); color: var(--surface); }
.mobile-bar__item + .mobile-bar__item { border-inline-start: var(--hairline) solid var(--line-on-dark); }
.mobile-bar__item--cta { border-inline-start-color: var(--red); }

/* Body gets bottom padding for this bar in base.css; remove it once the bar
   is gone so the footer does not sit on dead space. */
@media (min-width: 48em) { body { padding-bottom: 0; } }

/* ---- Floating buttons + back to top (≥768px) ----------------------------- */
.float-stack {
  position: fixed;
  inset-block-end: var(--space-md);
  inset-inline-end: var(--space-md);
  z-index: var(--z-float);
  display: none;
  flex-direction: column;
  gap: var(--space-2xs);
}
@media (min-width: 48em) { .float-stack { display: flex; } }

.float-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background-color: var(--ink);
  color: var(--bone);
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.float-btn:hover { transform: translateY(-2px); }
.float-btn svg { width: 1.375rem; height: 1.375rem; position: relative; z-index: var(--z-base); }
.float-btn--call { background-color: var(--red); color: var(--surface); }

/* The pulse is a pseudo-element ring so the button itself never scales. */
.float-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0;
  pointer-events: none;
}

.back-to-top {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border: var(--hairline) solid var(--line);
  border-radius: 50%;
  background-color: var(--surface);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, .75rem, 0);
  transition:
    opacity var(--dur-mid) var(--ease-out),
    transform var(--dur-mid) var(--ease-out),
    visibility 0s linear var(--dur-mid);
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.back-to-top svg { width: 1.125rem; height: 1.125rem; }
.back-to-top:hover { border-color: var(--red); color: var(--red); }

/* ---- Floating button labels -----------------------------------------------
   Each call button names who answers it, revealed on hover and on keyboard
   focus so it is clear which number is being dialled before committing.
   Only transform and opacity animate. The label is aria-hidden and the same
   text is mirrored on the link's aria-label, so the accessible name matches
   the visible one without being announced twice. */
.float-btn__label {
  position: absolute;
  inset-inline-end: calc(100% + var(--space-2xs));
  inset-block-start: 50%;
  padding: var(--space-3xs) var(--space-2xs);
  background-color: var(--ink);
  color: var(--bone);
  border: var(--hairline) solid var(--line-on-dark);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(.5rem, -50%, 0);
  box-shadow: var(--shadow-md);
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.float-btn:hover .float-btn__label,
.float-btn:focus-visible .float-btn__label {
  opacity: 1;
  transform: translate3d(0, -50%, 0);
}