/* ==========================================================================
   Main stylesheet
   Layout, components and page sections. Depends on tokens.css and base.css.

   Sections:
     1. Layout helpers
     2. Buttons
     3. Header / navigation
     4. Hero
     5. Content sections
     6. Footer
     7. Utilities
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Layout helpers
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: var(--container-narrow);
}

/* Firm 20px side padding for section content on mobile.
   Scoped to .section, so the footer keeps its own spacing. */
@media (max-width: 640px) {
  .section .container {
    padding-inline: 20px;
  }
}

/* Vertical rhythm for full-width sections (single shared value) */
.section {
  padding-block: var(--section-space);
}

.section--alt {
  background-color: var(--color-surface-alt);
}

.section--brand {
  background-color: var(--color-brand);
  color: var(--color-text-on-brand);
}

/* Opaque white section. Same colour as the default page background, but solid
   so it can carry a curved edge (a plain .section is transparent). */
.section--surface {
  background-color: var(--color-surface);
}

/* Curved section edges — reusable on any page.
   Add to a .section that has a solid background (e.g. --alt or --brand). The
   rounded edge overlaps the neighbouring section, so the adjacent color shows
   through the corners and forms a smooth curved transition.
   Use --curve-top to round the top over the section above, --curve-bottom to
   round the bottom over the section below; they can be combined. */
.section--curve-top {
  border-top-left-radius: var(--section-curve);
  border-top-right-radius: var(--section-curve);
  margin-top: calc(-1 * var(--section-curve));
  position: relative;
  z-index: 1;
}

.section--curve-bottom {
  border-bottom-left-radius: var(--section-curve);
  border-bottom-right-radius: var(--section-curve);
  margin-bottom: calc(-1 * var(--section-curve));
  position: relative;
  z-index: 1;
}

/* A section immediately followed by a curve-top section is overlapped at its
   bottom by that curve, so add the overlap to keep the visible gap consistent.
   This is the single rule that harmonizes bottom spacing across all sections. */
.section:has(+ .section--curve-top) {
  padding-bottom: calc(var(--section-space) + var(--section-curve));
}

/* Appointment CTA band */
.cta-band__text {
  max-width: var(--container-narrow);
  margin-inline: auto;
  margin-bottom: var(--space-8);
  font-size: var(--text-lg);
}

.cta-band__status {
  margin-top: var(--space-6);
}

/* Pull quote — outro section above the footer */
.quote-section {
  background-color: var(--color-surface);
  text-align: center;
}

.pull-quote {
  max-width: var(--container-narrow);
  margin-inline: auto;
}

.pull-quote__text {
  font-size: var(--text-2xl);
  font-style: italic;
  line-height: var(--leading-normal);
}

.pull-quote__author {
  margin-top: var(--space-6);
  font-weight: var(--weight-bold);
  color: var(--color-brand);
}

.pull-quote__author span {
  display: block;
  margin-top: var(--space-1);
  font-weight: var(--weight-regular);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Centered section title in brand color */
.section-heading {
  font-size: calc(var(--text-2xl) * 1.2); /* ~20% larger than the base 2xl scale */
  color: var(--color-brand);
  text-align: center;
  margin-bottom: var(--space-12);
}

.section--brand .section-heading {
  color: var(--color-text-on-brand);
}

/* --------------------------------------------------------------------------
   2. Buttons
   Pill-shaped. Two variants: filled (primary) and outline (secondary).
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.9em 2em;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  transition: background-color var(--transition), color var(--transition),
    border-color var(--transition), transform var(--transition);
}

.btn:hover {
  transform: translateY(-1px);
}

/* Filled variant — purple background, white text */
.btn--filled {
  background-color: var(--color-brand);
  color: var(--color-text-on-brand);
}

.btn--filled:hover {
  background-color: var(--color-brand-dark);
  color: var(--color-text-on-brand);
}

/* Outline variant — transparent with a colored border/text.
   --outline-c drives the border, text and hover fill, so the hover text can flip
   to a contrasting color without the currentColor trap. */
.btn--outline {
  --outline-c: var(--color-brand);
  background-color: transparent;
  border-color: var(--outline-c);
  color: var(--outline-c);
}

.btn--outline:hover {
  background-color: var(--outline-c);
  color: var(--color-white);
}

/* On a purple background the outline is white and flips to purple text on hover */
.section--brand .btn--outline,
.hero .btn--outline,
.holding .btn--outline {
  --outline-c: var(--color-white);
}

.section--brand .btn--outline:hover,
.hero .btn--outline:hover,
.holding .btn--outline:hover {
  color: var(--color-brand);
}

/* --------------------------------------------------------------------------
   3. Header / navigation
   Fixed purple bar with the logo badge centered and overlapping the hero.
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: var(--color-brand);
  color: var(--color-text-on-brand);
}

/* Offset page content for the fixed header (holding page keeps its own padding) */
main {
  padding-top: var(--header-height);
}

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

/* Left and right link groups flank the centered logo */
.nav__group {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.nav__group--start {
  justify-content: flex-start;
}

.nav__group--end {
  justify-content: flex-end;
}

.nav__link {
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-on-brand);
  white-space: nowrap;
}

.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Logo panel: an independent, absolutely-positioned tab in the same purple as
   the bar. Its top is flush with the bar (square corners) so nothing protrudes
   above; only the bottom corners are rounded, forming a tab that hangs below.
   Being absolute, it does not affect the vertical alignment of the menu items.
   Positioned relative to the fixed .site-header. */
.nav__logo {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 160px;                  /* 20px wider than before */
  height: 140px;                 /* unchanged, so the bottom edge stays in place */
  border-radius: 0 0 999999px 999999px;  /* fully round the bottom-left/right corners */
  background-color: var(--color-brand);
}

/* Only the logo image reacts on hover; the circle stays put, so there is no
   layout shift and the circle itself does not scale. */
.nav__logo img,
.nav__logo svg {
  width: 86px; /* ~20% larger than before; padding keeps it off the circle edge */
  height: auto;
  transition: transform 300ms ease;
}

.nav__logo:hover img,
.nav__logo:hover svg {
  transform: scale(1.03);
}

/* Language switcher (FR / EN) — circular badges.
   Always in the bar: desktop on the right (after the panel), mobile on the left. */
.lang-switch {
  order: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-size: var(--text-sm);
}

/* Hide the "/" separator; the languages read as circular badges */
.lang-switch > span[aria-hidden="true"] {
  display: none;
}

.lang-switch a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid transparent; /* reserved so hover adds no layout shift */
  color: var(--color-white);
  transition: background-color var(--transition), color var(--transition),
    border-color var(--transition);
}

/* Active language: white circle, purple text */
.lang-switch a[aria-current="true"] {
  background-color: var(--color-white);
  color: var(--color-brand);
}

/* Inactive language on hover: white circular border (keep white text so it
   stays legible on the purple bar, overriding the global darkening a:hover) */
.lang-switch a:not([aria-current="true"]):hover {
  color: var(--color-white);
  border-color: var(--color-white);
}

/* Mobile navigation toggle — hidden on desktop */
.nav__toggle {
  display: none;
  color: var(--color-text-on-brand);
  padding: var(--space-2);
}

/* Hamburger bars: rounded (pill) ends, and a staggered slide-in from the right
   on page load — each bar starts when the previous is halfway (delay = half the
   duration). Snappy but not instant; the button stays clickable throughout. */
.nav__toggle line {
  stroke-linecap: round;
  animation: nav-bar-in 0.4s ease-out both;
}

.nav__toggle line:nth-child(2) {
  animation-delay: 0.2s;
}

.nav__toggle line:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes nav-bar-in {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav__toggle line {
    animation-delay: 0s;
  }
}

/* Nav panel: on desktop it just lays out the two link groups (space-between);
   on mobile it becomes an off-canvas drawer (see the responsive section). */
.nav__panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

/* Drawer-only elements, hidden on desktop */
.nav__close,
.nav__aside,
.nav__backdrop {
  display: none;
}

/* Opening-hours status pill (used in the mobile drawer) */
.nav__status {
  display: inline-block;
  align-self: flex-start;
  padding: 0.3em 0.9em;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text); /* dark text everywhere; the pill background carries the state */
}

.nav__status--open {
  background-color: var(--color-open-bg);
}

.nav__status--closed {
  background-color: var(--color-closed-bg);
}

/* --------------------------------------------------------------------------
   4. Hero
   Full-bleed background image with centered heading and call-to-action.
   Replace the background image path in the markup / img element.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(80vh, 720px);
  text-align: center;
  color: var(--color-text-on-brand);
  /* Brand color fallback shown until the hero photo is added */
  background-color: var(--color-brand);
  overflow: hidden;
}

/* Hero photo layer */
.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Readability overlay above the photo */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(47, 47, 51, 0.15),
    rgba(47, 47, 51, 0.35)
  );
}

.hero__content {
  position: relative;
  z-index: 1;
  padding: var(--gutter);
}

.hero__title {
  font-size: var(--text-hero);
  margin-bottom: var(--space-8);
  text-shadow: 0 2px 20px rgba(47, 47, 51, 0.3);
}

/* --------------------------------------------------------------------------
   5. Content sections
   -------------------------------------------------------------------------- */

/* Centered reading block, optionally flanked by decorative guillemets */
.quote-block {
  position: relative;
  max-width: var(--container-narrow);
  margin-inline: auto;
  text-align: center;
  font-size: var(--text-lg);
  color: var(--color-text);
}

.quote-block p + p {
  margin-top: var(--space-6);
}

/* Decorative « » accents */
.quote-block::before,
.quote-block::after {
  color: var(--color-brand-faint);
  font-size: 3rem;
  line-height: 1;
  font-weight: var(--weight-bold);
  position: absolute;
}

.quote-block::before {
  content: "\00AB"; /* « */
  left: calc(-1 * var(--space-8));
  top: 0;
}

.quote-block::after {
  content: "\00BB"; /* » */
  right: calc(-1 * var(--space-8));
  bottom: 0;
}

/* On narrow screens there is no gutter room, so keep the guillemets inside the
   block (edge-aligned, with padding so they don't overlap the text). */
@media (max-width: 640px) {
  .quote-block {
    padding-inline: var(--space-6);
  }

  .quote-block::before,
  .quote-block::after {
    font-size: 2.5rem;
  }

  .quote-block::before {
    left: 0;
  }

  .quote-block::after {
    right: 0;
  }
}

/* Card grid — reusable for services and info blocks */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-8);
}

.card {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
}

.card__title {
  font-size: var(--text-xl);
  color: var(--color-brand);
  margin-bottom: var(--space-3);
}

/* Service card: centered content, no border, soft diagonal gradient background
   (white fading into the brand tint). Radius and shadow come from .card. */
.card--service {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: none;
  background-image: linear-gradient(45deg, var(--color-white), var(--color-brand-tint));
}

.card__icon {
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-4);
  color: var(--color-brand);
}

.card__icon svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* White fill so the two overlapping bubble outlines don't cross-show */
.ic-bubble {
  fill: var(--color-white);
}

/* Syringe tilted to 45 degrees (rotates around its own centre) */
.ic-syringe {
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(45deg);
}

/* Transform boxes/origins for the animated parts */
.ic-steth__chest {
  transform-box: fill-box;
  transform-origin: 50% 0; /* pivot at the tube's top = the ear-tube junction */
}

.ic-syringe__plunger {
  transform-box: fill-box;
}

.ic-bubble--1,
.ic-bubble--2 {
  transform-box: fill-box;
  transform-origin: center;
}

/* Icon animations loop once the card scrolls into view (.is-inview). Each cycle
   plays a short motion (~1.3s) then holds still for ~3s before repeating. */

/* Stethoscope: chest piece swings left–centre–right, pivoting at the junction,
   so the connecting tube never gaps nor overshoots. */
.card--service.is-inview .ic-steth__chest {
  animation: ic-steth-swing 2.8s ease-in-out infinite;
}

@keyframes ic-steth-swing {
  0%   { transform: rotate(0); }
  11.5% { transform: rotate(-13deg); }
  23%  { transform: rotate(0); }
  35%  { transform: rotate(13deg); }
  46%  { transform: rotate(0); }
  100% { transform: rotate(0); }
}

/* Syringe: only the plunger slides (drawing the vaccine) */
.card--service.is-inview .ic-syringe__plunger {
  animation: ic-syringe-draw 2.8s ease-in-out infinite;
}

@keyframes ic-syringe-draw {
  0%   { transform: translateY(0); }
  23%  { transform: translateY(-5px); }
  46%  { transform: translateY(0); }
  100% { transform: translateY(0); }
}

/* Speech bubbles: pop in one after the other */
.card--service.is-inview .ic-bubble--1 {
  animation: ic-bubble-pop-1 2.8s ease-in-out infinite;
}

.card--service.is-inview .ic-bubble--2 {
  animation: ic-bubble-pop-2 2.8s ease-in-out infinite;
}

@keyframes ic-bubble-pop-1 {
  0%   { transform: scale(0); }
  23%  { transform: scale(1.12); }
  34%  { transform: scale(1); }
  100% { transform: scale(1); }
}

@keyframes ic-bubble-pop-2 {
  0%, 12% { transform: scale(0); }
  35%     { transform: scale(1.12); }
  46%     { transform: scale(1); }
  100%    { transform: scale(1); }
}

/* Heart: two quick beats, then rest (parental advice) */
.ic-heart {
  transform-box: fill-box;
  transform-origin: center;
}

.card--service.is-inview .ic-heart {
  animation: ic-heart-beat 2.8s ease-in-out infinite;
}

@keyframes ic-heart-beat {
  0%   { transform: scale(1); }
  8%   { transform: scale(1.16); }
  16%  { transform: scale(1); }
  24%  { transform: scale(1.16); }
  32%  { transform: scale(1); }
  100% { transform: scale(1); }
}

/* ECG line: sweeps across like a monitor trace, then clears (emergencies).
   pathLength is normalised to 100 on the <path> so the dash maths stay simple. */
.ic-pulse__line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

.card--service.is-inview .ic-pulse__line {
  animation: ic-pulse-draw 2.8s ease-in-out infinite;
}

@keyframes ic-pulse-draw {
  0%   { stroke-dashoffset: 100; }
  42%  { stroke-dashoffset: 0; }
  58%  { stroke-dashoffset: 0; }
  70%  { stroke-dashoffset: -100; }
  100% { stroke-dashoffset: -100; }
}

/* Growth bars: rise from the baseline one after another (development check-ups) */
.ic-chart__bar {
  transform-box: fill-box;
  transform-origin: bottom;
}

.card--service.is-inview .ic-chart__bar--1 {
  animation: ic-chart-rise 2.8s ease-in-out infinite;
}

.card--service.is-inview .ic-chart__bar--2 {
  animation: ic-chart-rise 2.8s ease-in-out infinite 0.12s;
}

.card--service.is-inview .ic-chart__bar--3 {
  animation: ic-chart-rise 2.8s ease-in-out infinite 0.24s;
}

@keyframes ic-chart-rise {
  0%   { transform: scaleY(0); }
  25%  { transform: scaleY(1); }
  46%  { transform: scaleY(1); }
  100% { transform: scaleY(1); }
}

/* Ear (Écoute): the two sound waves pulse outward one after the other */
.ic-ear__wave {
  transform-box: fill-box;
  transform-origin: left center;
}

.card--service.is-inview .ic-ear__wave--1 {
  animation: ic-ear-wave 2.8s ease-in-out infinite;
}

.card--service.is-inview .ic-ear__wave--2 {
  animation: ic-ear-wave 2.8s ease-in-out infinite 0.2s;
}

@keyframes ic-ear-wave {
  0%, 55%, 100% { opacity: 0.25; transform: scale(0.8); }
  28%           { opacity: 1; transform: scale(1); }
}

/* Shield + check (Expertise): the checkmark draws in, holds, then clears */
.ic-shield__check {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

.card--service.is-inview .ic-shield__check {
  animation: ic-shield-check 2.8s ease-in-out infinite;
}

@keyframes ic-shield-check {
  0%   { stroke-dashoffset: 100; }
  30%  { stroke-dashoffset: 0; }
  72%  { stroke-dashoffset: 0; }
  86%  { stroke-dashoffset: -100; }
  100% { stroke-dashoffset: -100; }
}

/* Service card on a plain white background (used for the "values" cards) */
.card--plain {
  background-image: none;
}

/* --------------------------------------------------------------------------
   Team cards (about page)
   An arched wrapper (big curve on top, 25px bottom corners) with a large
   circular photo on top, then name, title and a short bio.
   -------------------------------------------------------------------------- */

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 300px));
  gap: var(--space-12);
  justify-content: center;
}

.team-card {
  padding: 15px; /* inner gap so the photo never touches the arc edge */
  background-image: linear-gradient(45deg, var(--color-white), var(--color-brand-tint));
  /* A clean semicircular arch on top (px radius = half the 300px card width, so
     the dome height stays constant regardless of the card's total height) and
     soft 25px bottom corners. */
  border-radius: 150px 150px 25px 25px;
  box-shadow: var(--shadow-md);
  text-align: center;
}

.team-card__photo {
  aspect-ratio: 1;
  margin-bottom: 30px;
  border-radius: 50%;
  border: 2px solid var(--color-white);
  overflow: hidden;
  background-color: var(--color-brand-tint);
  color: var(--color-brand);
  display: grid;
  place-items: center;
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

.team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-card__photo:has(img) .team-card__ph {
  display: none;
}

.team-card__body {
  padding: var(--space-6) var(--space-5) var(--space-4);
}

.team-card__name {
  font-size: var(--text-xl);
  color: var(--color-brand);
  margin-bottom: var(--space-1);
}

.team-card__role {
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.team-card__bio {
  line-height: var(--leading-normal);
}

/* Doctor photo rings — two overlapping circular photo slots (e.g. in the about
   intro). White border + shadow, consistent with the rest of the site.
   Add an <img> inside a ring to replace the placeholder icon. */
.doctor-rings {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-8);
}

.doctor-ring {
  width: 144px;
  height: 144px;
  border-radius: 50%;
  border: 2px solid var(--color-white);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  background-color: var(--color-brand-tint);
  color: var(--color-brand);
  display: grid;
  place-items: center;
}

.doctor-ring + .doctor-ring {
  margin-left: -24px; /* slight overlap between the two rings */
}

.doctor-ring img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder label shown until a photo is added */
.doctor-ring__ph {
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-brand);
  text-align: center;
}

.doctor-ring:has(img) .doctor-ring__ph {
  display: none;
}

/* --------------------------------------------------------------------------
   6. Footer
   Full-width purple body with a boxed inner wrapper (3 columns), a decorative
   canopy top edge, legal links and a copyright line. All text/icons are white.
   -------------------------------------------------------------------------- */

.site-footer {
  color: var(--color-text-on-brand);
}

/* Decorative canopy edge glued to the top of the footer.
   The purple background lives on the body (below), so the scallop notches show
   the white page behind them. margin-bottom:-1px overlaps the body to remove
   the sub-pixel seam that Firefox otherwise renders between the two. */
.site-footer__deco {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: -1px;
}

.site-footer__body {
  background-color: var(--color-brand);
  padding-block: var(--space-12) var(--space-8);
}

/* Pull the (transparent) inner wrapper up so the columns overlap the
   decorative top edge and sit partly on it. */
.site-footer__body > .container {
  margin-top: -100px;
}

.site-footer__cols {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-12);
  align-items: center;
}

.site-footer__col--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
}

.site-footer__col--end {
  text-align: right;
}

.site-footer__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-4);
}

/* Keep the same colour on hover so links stay legible on the purple footer
   (overriding the global darkening a:hover); underline is the hover cue. */
.site-footer a:hover {
  color: var(--color-text-on-brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Center column: logo (2x the header logo), handle, social icons */
.site-footer__logo {
  width: 192px; /* one third larger than the 144px base */
  height: auto;
}

.site-footer__handle {
  font-weight: var(--weight-bold);
}

.site-footer__social {
  display: flex;
  gap: var(--space-4);
}

.site-footer__social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1.5px solid currentColor; /* outline icons */
  border-radius: 50%;
  transition: background-color var(--transition), color var(--transition);
}

.site-footer__social a:hover {
  background-color: var(--color-white);
  color: var(--color-brand);
  opacity: 1;
}

.site-footer__social svg {
  width: 20px;
  height: 20px;
}

/* Legal links, bullet-separated (20px each side of the bullet) */
.site-footer__legal {
  list-style: none;
  padding: 0;
  margin-top: var(--space-12);
  text-align: center;
  font-size: var(--text-sm);
}

.site-footer__legal li {
  display: inline;
}

.site-footer__legal li:not(:first-child)::before {
  content: "\2022";
  margin: 0 20px;
}

.site-footer__copy {
  margin-top: var(--space-6);
  text-align: center;
  font-size: var(--text-sm);
}

@media (max-width: 760px) {
  .site-footer__cols {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .site-footer__col--end {
    text-align: center;
  }

  /* No overlap once the columns stack */
  .site-footer__body > .container {
    margin-top: 0;
  }

  /* Legal links: one per line, centered, without bullet separators */
  .site-footer__legal li {
    display: block;
    margin-block: var(--space-2);
  }

  .site-footer__legal li:not(:first-child)::before {
    content: none;
  }
}

/* --------------------------------------------------------------------------
   Contact
   Two-column layout: details on one side, form on the other.
   -------------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-16);
  align-items: start;
}

.contact-details dt {
  font-weight: var(--weight-bold);
  color: var(--color-brand);
  margin-top: var(--space-6);
}

.contact-details dd {
  margin-left: 0;
}

.contact-details dd .btn {
  margin-top: var(--space-3);
}

/* Underlined text button that copies a value (e.g. IBAN) to the clipboard. */
.link-copy {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--color-brand);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--transition);
}

.link-copy:hover {
  color: var(--color-brand-dark);
}

/* Animated divider — pill-capped hairline that wipes in from the left.
   Same treatment as the mobile nav drawer's divider; here it reveals on
   scroll-into-view (JS adds .is-inview). */
.rule {
  height: 1.5px;
  border: 0;
  margin-block: var(--space-8);
  border-radius: var(--radius-pill);
  background-color: var(--color-brand);
  transform: scaleX(0);
  transform-origin: left;
}

.rule.is-inview {
  animation: nav-divider-in 500ms ease forwards;
}

/* Without motion, show the divider fully rather than leaving it collapsed. */
@media (prefers-reduced-motion: reduce) {
  .rule {
    transform: scaleX(1);
  }
}

/* Form */
.form__row {
  margin-bottom: var(--space-4);
}

.form__label {
  display: block;
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2);
}

/* Form fields keep a border by design (an exception to the borderless surfaces
   elsewhere): a light purple hairline that turns full brand on hover/focus. */
.form__control {
  width: 100%;
  padding: 0.8em 1.4em;
  background-color: var(--color-white);
  border: 1.5px solid var(--color-brand-tint);
  border-radius: var(--radius-pill);
  transition: border-color var(--transition);
}

.form__control:hover,
.form__control:focus {
  border-color: var(--color-brand);
  outline: none;
}

/* Textarea: not a full pill (too tall) — a soft 25px radius, with extra
   horizontal padding so the rounded corners don't clip the text. */
textarea.form__control {
  min-height: 140px;
  padding: 1em 1.5em;
  border-radius: 25px;
  resize: vertical;
}

/* Select: hide the native arrow and draw a purple chevron set in from the right
   edge. The stroke colour (%238e75b5) matches --color-brand. */
select.form__control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 3.2em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238e75b5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.3em center;
}

/* Required-field marker */
.form__req {
  color: var(--color-brand);
  font-weight: var(--weight-bold);
}

/* Validation error — soft pastel red, matching the "closed" status colour.
   Hidden while empty so it takes no space until an error is shown. */
.form__error {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-closed-text);
}

.form__error:empty {
  display: none;
}

.form__control--error,
.form__control--error:hover {
  border-color: var(--color-closed-text);
}

/* Confirmation shown after a valid submit — soft pastel green, matching the
   "open" status colour. */
.form__success {
  padding: var(--space-8);
  background-color: var(--color-open-bg);
  color: var(--color-open-text);
  border-radius: var(--radius-lg);
  text-align: center;
  font-weight: var(--weight-semibold);
}

/* Consent checkbox row — centered under the textarea */
.form__row--consent {
  text-align: center;
}

.form__check {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  line-height: var(--leading-normal);
  text-align: left;
}

.form__check input {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  margin-top: 0.2em;
  accent-color: var(--color-brand);
}

.form__check a {
  color: var(--color-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Legal pages (terms, privacy, cookies) — long-form prose
   -------------------------------------------------------------------------- */

.legal {
  line-height: var(--leading-normal);
}

.legal__updated {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-8);
}

.legal h2 {
  font-size: var(--text-xl);
  color: var(--color-brand);
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
}

.legal h2:first-of-type {
  margin-top: 0;
}

.legal h3 {
  font-size: var(--text-lg);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.legal p {
  margin-bottom: var(--space-4);
}

.legal ul {
  margin: 0 0 var(--space-4) var(--space-6);
  list-style: disc;
}

.legal li {
  margin-bottom: var(--space-2);
}

.legal a {
  color: var(--color-brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal__table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-6);
}

.legal__table th,
.legal__table td {
  text-align: left;
  padding: var(--space-3);
  vertical-align: top;
  font-size: var(--text-sm);
}

.legal__table th {
  color: var(--color-brand);
}

/* --------------------------------------------------------------------------
   Cookie consent banner
   Fixed card at the bottom. Records the choice in localStorage; it is not yet
   wired to load/block any scripts (only Adobe Fonts are used — functional).
   -------------------------------------------------------------------------- */

.cookie {
  position: fixed;
  left: 50%;
  bottom: var(--space-4);
  transform: translateX(-50%);
  width: min(720px, calc(100% - var(--space-8)));
  max-height: calc(100vh - var(--space-8));
  overflow-y: auto;
  background-color: var(--color-white);
  color: var(--color-text);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-8);
  z-index: 300;
}

.cookie__title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  color: var(--color-brand);
  margin-bottom: var(--space-2);
}

.cookie__text {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.cookie__text a {
  color: var(--color-brand);
  text-decoration: underline;
}

.cookie__prefs {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-4);
}

.cookie__pref {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.cookie__pref-text {
  flex: 1;
}

.cookie__pref-name {
  display: block;
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-1);
}

.cookie__pref-desc {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Checkbox rendered as an on/off switch */
.cookie__switch {
  flex: none;
  position: relative;
  width: 44px;
  height: 24px;
  margin-top: 2px;
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--color-brand-tint);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--transition);
}

.cookie__switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--color-white);
  transition: transform var(--transition);
}

.cookie__switch:checked {
  background-color: var(--color-brand);
}

.cookie__switch:checked::after {
  transform: translateX(20px);
}

.cookie__switch:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.cookie__actions {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.cookie__actions .btn {
  flex: 1 1 auto;
}

@media (max-width: 560px) {
  .cookie {
    padding: var(--space-6);
  }

  .cookie__actions .btn {
    flex-basis: 100%;
  }
}

/* --------------------------------------------------------------------------
   Page header — brand-coloured intro band at the top of a subpage.
   Centered title + short lead. Pair with .section.section--brand.
   -------------------------------------------------------------------------- */

.page-header {
  text-align: center;
}

.page-header .section-heading {
  margin-bottom: var(--space-4);
}

.page-header__lead {
  max-width: var(--container-narrow);
  margin-inline: auto;
  font-size: var(--text-lg);
}

/* --------------------------------------------------------------------------
   Opening hours card + highlighted info note (contact page)
   -------------------------------------------------------------------------- */

.hours {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
}

.hours__title {
  font-size: var(--text-xl);
  color: var(--color-brand);
  margin-bottom: var(--space-4);
}

.hours__list {
  display: grid;
  gap: var(--space-1);
}

.hours__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-2);
}

.hours__day {
  font-weight: var(--weight-semibold);
}

.hours__closed {
  color: var(--color-text-muted);
}

.hours .nav__status {
  margin-top: var(--space-6);
}

/* Highlighted note — e.g. out-of-hours emergency guidance. */
.info-note {
  margin-top: var(--space-8);
  padding: var(--space-6);
  background-image: linear-gradient(45deg, var(--color-white), var(--color-brand-tint));
  border-radius: var(--radius-lg);
}

.info-note__title {
  font-weight: var(--weight-bold);
  color: var(--color-brand-dark);
  margin-bottom: var(--space-2);
}

/* --------------------------------------------------------------------------
   FAQ — native <details> accordion. Works without JavaScript.
   -------------------------------------------------------------------------- */

.faq {
  max-width: var(--container-narrow);
  margin-inline: auto;
  display: grid;
  gap: var(--space-4);
}

.faq__item {
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  color: var(--color-brand);
  cursor: pointer;
  list-style: none;
}

/* Hide the default disclosure triangle (Safari + others) */
.faq__q::-webkit-details-marker {
  display: none;
}

/* Chevron drawn from a rotated square; points down when closed, up when open */
.faq__q::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--transition);
}

.faq__item[open] .faq__q::after {
  transform: rotate(-135deg);
}

.faq__a {
  padding: 0 var(--space-6) var(--space-6);
}

.faq__a p + p {
  margin-top: var(--space-3);
}

/* --------------------------------------------------------------------------
   Holding page ("under construction")
   Standalone full-screen layout on the brand color. Used by construction.html.
   -------------------------------------------------------------------------- */

.holding {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-6);
  padding: var(--gutter);
  background-color: var(--color-brand);
  color: var(--color-text-on-brand);
}

.holding__logo {
  width: 220px;
  max-width: 60vw;
  margin-bottom: var(--space-4);
}

.holding__title {
  font-size: var(--text-2xl);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.holding__text {
  max-width: 42ch;
}

/* --------------------------------------------------------------------------
   Testimonials carousel
   Horizontal, scroll-snap based slider. Prev/next buttons scroll by one card.
   Cards contain a circular photo slot, a quote, a name and a location.
   -------------------------------------------------------------------------- */

.carousel {
  position: relative;
}

.carousel__track {
  display: flex;
  gap: var(--space-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-block: var(--space-2);
  /* Hide the scrollbar; navigation is via the buttons. */
  scrollbar-width: none;
}

.carousel__track::-webkit-scrollbar {
  display: none;
}

.testimonial {
  flex: 0 0 min(340px, 82%);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
  padding: var(--space-8);
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* Circular photo slot. Add an <img> inside to replace the placeholder icon. */
.testimonial__avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--color-brand-tint);
  color: var(--color-brand);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.testimonial__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial__avatar:has(img) svg {
  display: none;
}

.testimonial__quote {
  font-size: var(--text-lg);
  font-style: italic;
}

.testimonial__name {
  font-weight: var(--weight-bold);
  color: var(--color-brand);
}

.testimonial__place {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Prev/next controls (shared with any [data-carousel]) */
.carousel__controls {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.carousel__btn {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-brand);
  color: var(--color-brand);
  background-color: var(--color-surface);
  transition: background-color var(--transition), color var(--transition);
}

.carousel__btn:hover {
  background-color: var(--color-brand);
  color: var(--color-text-on-brand);
}

/* --------------------------------------------------------------------------
   Gallery
   Square thumbnails that open in the lightbox. Each item is a placeholder
   until a photo is added (drop an <img class="gallery__thumb"> inside).
   -------------------------------------------------------------------------- */

/* Gallery carousel: responsive items-per-view, 4:5 tiles, autoplay + native swipe.
   Items per view: desktop/landscape 3, tablet portrait 2, mobile portrait 1. */
.gallery-carousel {
  --per-view: 3;
  --gap: var(--space-4);
  position: relative;
  /* Side rails keep the chevrons outside the tiles. */
  padding-inline: 52px;
}

/* Mobile portrait */
@media (orientation: portrait) and (max-width: 600px) {
  .gallery-carousel {
    --per-view: 1;
  }
}

/* Tablet portrait */
@media (orientation: portrait) and (min-width: 601px) and (max-width: 1024px) {
  .gallery-carousel {
    --per-view: 2;
  }
}

.gallery-carousel__track {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.gallery-carousel__track::-webkit-scrollbar {
  display: none;
}

.gallery__item {
  position: relative;
  flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
  scroll-snap-align: start;
  aspect-ratio: 4 / 6;
  overflow: hidden;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background-color: var(--color-brand-tint);
  cursor: pointer;
}

/* Side chevrons for quick navigation, sitting in the rails outside the tiles.
   No background by default; on hover a purple circle with a white chevron. */
.carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  color: var(--color-brand);
  border-radius: 50%;
  transition: background-color var(--transition), color var(--transition);
}

/* Slightly larger chevron glyph (overrides the inline SVG size) */
.carousel__arrow svg {
  width: 28px;
  height: 28px;
}

.carousel__arrow:hover {
  background-color: var(--color-brand);
  color: var(--color-white);
}

.carousel__arrow--prev {
  left: 0;
}

.carousel__arrow--next {
  right: 0;
}

.gallery__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition);
}

.gallery__item:hover .gallery__thumb {
  transform: scale(1.05);
}

/* Placeholder shown while no photo is present */
.gallery__ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--color-brand);
  opacity: 0.7;
}

.gallery__item:has(img) .gallery__ph {
  display: none;
}

/* --------------------------------------------------------------------------
   Lightbox
   Full-screen overlay for gallery images. Toggled via [aria-hidden] by JS.
   -------------------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  place-items: center;
  padding: var(--space-8);
  background-color: rgba(20, 16, 28, 0.9);
}

.lightbox[aria-hidden="false"] {
  display: grid;
}

.lightbox__figure {
  margin: 0;
  max-width: 92vw;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.lightbox__img {
  max-width: 92vw;
  max-height: 78vh;
  border-radius: var(--radius-md);
  background-color: var(--color-brand-tint);
}

.lightbox__caption {
  color: var(--color-white);
  text-align: center;
}

.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-pill);
  color: var(--color-white);
  background-color: rgba(255, 255, 255, 0.12);
  transition: background-color var(--transition);
}

.lightbox__btn:hover {
  background-color: rgba(255, 255, 255, 0.28);
}

.lightbox__close {
  top: var(--space-6);
  right: var(--space-6);
}

.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__nav--prev {
  left: var(--space-6);
}

.lightbox__nav--next {
  right: var(--space-6);
}

/* --------------------------------------------------------------------------
   "Where to find us" section
   Two columns: directions text + a circular building photo. Includes a
   "navigate" button and a "copy address" text link.
   -------------------------------------------------------------------------- */

/* Clip decorative overflow so it never triggers horizontal page scroll. */
.locate {
  overflow: hidden;
}

.locate__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.locate__heading {
  font-size: var(--text-2xl);
  color: var(--color-brand);
  margin-bottom: 30px; /* Fixed spacing below the heading, per design */
}

.locate__list {
  list-style: none;
  padding: 0;
  margin-top: var(--space-6);
  max-width: 420px;
}

.locate__list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  /* Dotted divider: 2px purple dots (40% alpha) with a 2px gap (4px tile), aligned bottom. */
  background-image: radial-gradient(
    circle,
    color-mix(in srgb, var(--color-brand) 40%, transparent) 1px,
    transparent 1px
  );
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: 4px 2px;
}

/* Locality name */
.locate__list .locate__town {
  font-weight: var(--weight-bold);
  color: var(--color-brand);
}

/* Distance value (animated count-up handled in main.js) */
.locate__list .locate__km {
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Actions wrapper: left-aligned block whose children are stacked and centered */
.locate__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
}

/* Navigate button: pill shape with a scale-up on hover */
.locate__btn {
  margin-top: 30px;
  border-radius: 999999px;
  transition: transform 300ms ease, background-color 300ms ease;
}

.locate__btn:hover {
  transform: scale(1.03);
}

/* Copy-address text link */
.locate__copy {
  display: inline-block;
  margin-top: var(--space-4);
  color: var(--color-brand);
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

.locate__copy:hover {
  color: var(--color-brand-dark);
}

/* Figure wrapper positions the photo and its decorative elements. */
.photo-frame {
  position: relative;
  width: min(360px, 100%);
  aspect-ratio: 1;
  margin-inline: auto;
}

/* Decorative outline circle behind the photo (lower z-index) */
.photo-frame__ring {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  right: -40px;
  bottom: -20px;
  border: 2px solid var(--color-brand);
  border-radius: 50%;
}

/* Circular building photo slot. Add an <img> inside to replace the placeholder. */
.photo-frame__slot {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--color-brand-tint);
  color: var(--color-brand);
  display: grid;
  place-items: center;
}

/* Pill label overlapping the photo (higher z-index) */
.photo-frame__badge {
  position: absolute;
  z-index: 2;
  left: -10px;
  bottom: 30px;
  padding: 0.6em 1.4em;
  background-color: var(--color-brand);
  color: var(--color-text-on-brand);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  white-space: nowrap;
}

.photo-frame__slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-frame__slot:has(img) svg {
  display: none;
}

@media (max-width: 760px) {
  .locate__grid {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  /* Show the photo above the text on small screens */
  .locate__media {
    order: -1;
  }

  /* Shrink the circle so the offset ring frame stays fully inside the viewport
     (the ring overhangs ~40px to the right). Reusable wherever this component
     appears. */
  .photo-frame {
    width: min(360px, 70vw);
  }
}

/* --------------------------------------------------------------------------
   7. Utilities
   -------------------------------------------------------------------------- */

.text-center {
  text-align: center;
}

.stack > * + * {
  margin-top: var(--space-4);
}

.mt-8 {
  margin-top: var(--space-8);
}

/* --------------------------------------------------------------------------
   Responsive — mobile navigation and layout adjustments
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .nav__toggle {
    display: inline-flex;
    order: 2; /* hamburger on the right */
    z-index: 2;
  }

  /* Language switcher stays in the bar, on the left */
  .lang-switch {
    order: 0;
  }

  /* Off-canvas drawer sliding in from the right */
  .nav__panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 80vw;
    max-width: 420px;
    flex: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--space-6);
    padding: 30px;
    background-color: var(--color-white);
    color: var(--color-brand);
    border-radius: 25px 0 0 25px; /* top-left + bottom-left */
    box-shadow: var(--shadow-md);
    transform: translateX(100%);
    transition: transform 300ms ease;
    overflow-y: auto;
    z-index: 200;
  }

  .site-header[data-open="true"] .nav__panel {
    transform: translateX(0);
  }

  /* Close arrow, top-right of the drawer */
  .nav__close {
    display: inline-flex;
    align-self: flex-end;
    color: var(--color-brand);
    padding: var(--space-1);
  }

  /* Groups stack vertically */
  .nav__panel .nav__group {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    width: 100%;
  }

  /* Drawer links: purple, with a bullet sliding in from the left on hover */
  .nav__panel .nav__link {
    position: relative;
    color: var(--color-brand);
    padding-left: 16px;
  }

  .nav__panel .nav__link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--color-brand);
    opacity: 0;
    transform: translate(-6px, -50%);
    transition: opacity 200ms ease, transform 200ms ease;
  }

  .nav__panel .nav__link:hover::before,
  .nav__panel .nav__link[aria-current="page"]::before {
    opacity: 1;
    transform: translate(0, -50%);
  }

  /* Aside (hours + contact) pinned to the bottom of the drawer */
  .nav__aside {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: auto;
  }

  /* Animated divider: 1.5px, pill ends, wipes in from left to right */
  .nav__divider {
    height: 1.5px;
    border-radius: var(--radius-pill);
    background-color: var(--color-brand);
    transform: scaleX(0);
    transform-origin: left;
  }

  .site-header[data-open="true"] .nav__divider {
    animation: nav-divider-in 500ms ease 200ms forwards;
  }

  .nav__hours-title {
    font-weight: var(--weight-bold);
    color: var(--color-brand);
    margin-bottom: var(--space-1);
  }

  .nav__hours p {
    color: var(--color-text);
  }

  .nav__hours .nav__status {
    margin-top: var(--space-3);
  }

  /* Phone kept compact so it isn't oversized in the drawer */
  .nav__phone {
    align-self: flex-start;
    padding: 0.6em 1.4em;
  }

  .nav__mail {
    color: var(--color-brand);
    word-break: break-word;
  }

  /* Backdrop behind the drawer; click to close */
  .nav__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background-color: rgba(20, 16, 28, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 300ms ease, visibility 300ms ease;
    z-index: 150;
  }

  .site-header[data-open="true"] .nav__backdrop {
    opacity: 1;
    visibility: visible;
  }
}

@keyframes nav-divider-in {
  to { transform: scaleX(1); }
}