/* ==========================================================================
   components.css  buttons, cards, spec tables, placeholder media, forms
   --------------------------------------------------------------------------
   Rules that serve two or more pages live here. Anything single-page belongs
   in pages.css.
   ========================================================================== */

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 50px;
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.1;
  letter-spacing: var(--tracking-wide);
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

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

.btn:active {
  transform: translateY(0);
}

.btn__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

/* Navy. The default solid action. */
.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-on-dark);
}

.btn--primary:hover {
  background-color: var(--color-primary-dark);
  color: var(--color-on-dark);
}

/* Maroon. Reserved for the primary conversion action  the brief designates
   the accent for CTA accents, and this keeps the one loud thing on the page
   in the one colour the brief allows to be loud. */
.btn--accent {
  background-color: var(--color-accent);
  color: var(--color-on-dark);
}

.btn--accent:hover {
  background-color: var(--color-accent-dark);
  color: var(--color-on-dark);
}

/* WhatsApp. Used for the contextual conversion actions. The fill is the
   legibility token, not the bright brand chip: white on the branded #25D366 is
   2.0:1 and fails WCAG AA, which is not acceptable on the button that produces
   the enquiry. `--color-whatsapp-fill` keeps the channel's hue and clears AA
   (5.2:1). The bright brand green still identifies the channel through the
   glyph, the FAB and the footer row. */
.btn--whatsapp {
  background-color: var(--color-whatsapp-fill);
  color: var(--color-on-dark);
}

.btn--whatsapp:hover {
  background-color: var(--color-whatsapp-fill-hover);
  color: var(--color-on-dark);
}

/* Secondary WhatsApp action. Used where a card already offers a primary
   action: it keeps the WhatsApp affordance without a solid green block in
   every one of a dozen grid cells. Text and border use the legible green
   (5.2:1 on white). */
.btn--whatsapp-outline {
  background-color: transparent;
  border-color: var(--color-whatsapp-text);
  color: var(--color-whatsapp-text);
}

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

.btn--outline {
  background-color: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-primary-dark);
}

.btn--outline:hover {
  border-color: var(--color-primary);
  background-color: var(--color-primary-tint);
  color: var(--color-primary-dark);
}

/* Outline for navy grounds. */
.btn--outline-light {
  background-color: transparent;
  border-color: var(--color-on-dark-line);
  color: var(--color-on-dark);
}

.btn--outline-light:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--color-on-dark);
  color: var(--color-on-dark);
}

.btn--sm {
  min-height: 42px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
}

.btn--block {
  width: 100%;
}

/* A real disabled control state, kept for any future control that must be
   inert with a visible reason. No current CTA uses it: every WhatsApp action
   is a live link. */
.btn[aria-disabled="true"] {
  background-color: var(--color-background-soft);
  border-color: var(--color-border);
  color: var(--color-text-muted);
  cursor: not-allowed;
  transform: none;
}

.btn[aria-disabled="true"]:hover {
  transform: none;
}

/* ==========================================================================
   CARD  the shared surface. Flat, hairline-bordered, restrained radius.
   ========================================================================== */
.card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-background);
  border: var(--border-hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-5);
}

.card__title {
  margin-bottom: var(--space-2);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

.card__text {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.card--interactive {
  transition: transform var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}

.card--interactive:hover {
  transform: translateY(-2px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

/* ==========================================================================
   CATEGORY CARD  homepage product category tile
   ========================================================================== */
.category-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.category-card__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.category-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  /* `auto` keeps the link on the baseline across cards whose descriptions
     run to different lengths. */
  margin-top: auto;
  padding-top: var(--space-4);
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  align-self: flex-start;
}

.category-card__link:hover,
.category-card:hover .category-card__link {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* ==========================================================================
   PRODUCT CARD
   Self-contained surface rather than a `.card` variant, so the same markup
   drops straight into a WordPress loop without class archaeology.
   ========================================================================== */
.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--color-background);
  border: var(--border-hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}

.product-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

.product-card__media {
  /* Product photographs are supplied on a white background, so the tile stays
     white and the image is contained (never cropped) to keep the whole
     component visible. */
  aspect-ratio: 1 / 1;
  background-color: #ffffff;
  border-bottom: var(--border-hairline);
}

.product-card__media .media {
  padding: var(--space-3);
  object-fit: contain;
}

.product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-5);
}

.product-card__body .badge {
  align-self: flex-start;
  margin-bottom: var(--space-3);
}

.product-card__name {
  margin-bottom: var(--space-2);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

.product-card__desc {
  margin-bottom: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.product-card__specs {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: var(--border-hairline);
}

.product-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-hairline);
}

/* ==========================================================================
   SPEC LIST  the signature component.
   Scaffolding is a load-rated product; its own documents are the most
   credible visual language available, so specifications get hairline rules,
   tabular numerals and a strong numeric hierarchy.
   ========================================================================== */
.spec-list {
  border-top: var(--border-hairline);
}

.spec-list__row {
  display: grid;
  grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-3);
  border-bottom: var(--border-hairline);
}

.spec-list__key {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.spec-list__val {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  /* `anywhere` rather than `break-word`: the value sits in a `minmax(0, 1fr)`
     track, and only `anywhere` lets the track's intrinsic size shrink far
     enough for a long placeholder token to wrap instead of overflow. */
  overflow-wrap: anywhere;
}

/* A missing specification is stated, not left blank. Blank reads as a bug. */
.spec-list__val--todo {
  color: var(--color-text-muted);
  font-weight: var(--weight-regular);
  font-style: italic;
}

/* Compact variant for the spec preview inside a product card, where an 8rem
   key column would starve the value. */
.spec-list--compact .spec-list__row {
  grid-template-columns: minmax(0, 5.5rem) minmax(0, 1fr);
  padding-block: var(--space-2);
}

.spec-list--compact .spec-list__key,
.spec-list--compact .spec-list__val {
  font-size: var(--text-xs);
}

/* Separates a spec list from prose above it in a text column. */
.spec-list--spaced {
  margin-top: var(--space-5);
}

/* ==========================================================================
   FILTER BAR  catalog category filtering
   Real buttons in a labelled group; state is carried by aria-pressed rather
   than by a class, so the visible and the announced state cannot drift.
   ========================================================================== */
.filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.filter__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-background);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

.filter__btn:hover {
  border-color: var(--color-primary);
  background-color: var(--color-primary-tint);
}

.filter__btn[aria-pressed="true"] {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-dark);
  font-weight: var(--weight-semibold);
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */
.catalog-empty {
  padding: var(--space-8) var(--space-5);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
  text-align: center;
}

.catalog-empty__title {
  margin-bottom: var(--space-2);
  color: var(--color-text);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

/* ==========================================================================
   PLACEHOLDER MEDIA  a real component, not a grey box.
   Renders a labelled frame naming the intended subject and the required
   aspect ratio, with a machine-findable IMG-TODO marker. The point is that
   the page still looks finished: this reads as a reserved slot, never as a
   broken image.
   ========================================================================== */
.placeholder-media {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-4);
  background-color: var(--color-background-soft);
  background-image:
    linear-gradient(to top right,
      transparent calc(50% - 0.5px),
      var(--color-border) calc(50% - 0.5px),
      var(--color-border) calc(50% + 0.5px),
      transparent calc(50% + 0.5px));
  color: var(--color-text-muted);
  text-align: center;
  overflow: hidden;
}

.placeholder-media--4x3 { aspect-ratio: 4 / 3; }
.placeholder-media--3x2 { aspect-ratio: 3 / 2; }
.placeholder-media--1x1 { aspect-ratio: 1 / 1; }
.placeholder-media--16x9 { aspect-ratio: 16 / 9; }
.placeholder-media--3x4 { aspect-ratio: 3 / 4; }

.placeholder-media__mark {
  padding: 2px var(--space-2);
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
}

.placeholder-media__label {
  max-width: 26ch;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

/* The frame's subject and its spec line are read on-site in daylight, so both
   sit on the 12px floor rather than below it  the smallest legible step the
   scale owns. */
.placeholder-media__spec {
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-wide);
}

/* ==========================================================================
   BADGE / CHIP
   ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px var(--space-3);
  background-color: var(--color-primary-tint);
  border-radius: var(--radius-sm);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
}

.badge--accent {
  background-color: var(--color-accent-tint);
  color: var(--color-accent);
}

/* ==========================================================================
   EVIDENCE LEDGER  the homepage's memorable moment.
   Claims render as ruled, numbered slots. Each one visually announces that a
   document goes here, so real photographs and certificates drop into the same
   structure later without a redesign.
   ========================================================================== */
.ledger {
  border-top: var(--border-hairline);
}

.ledger__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2) var(--space-5);
  padding-block: var(--space-6);
  border-bottom: var(--border-hairline);
}

.ledger__num {
  grid-row: 1 / span 2;
  color: var(--color-accent);
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}

.ledger__title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

.ledger__body {
  /* Reading measure. Below 900px the ledger is one column and the prose track
     runs the full container, so a claim can collapse onto a single 100+
     character line. Capped here so the measure never leaves 45–75ch. */
  max-width: 68ch;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

@media (min-width: 900px) {
  .ledger {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ledger__item {
    padding-inline: var(--space-7);
  }

  .ledger__item:nth-child(odd) {
    padding-left: 0;
  }

  .ledger__item:nth-child(even) {
    padding-right: 0;
    border-left: var(--border-hairline);
  }
}

/* ==========================================================================
   PROCESS / STEP LIST  shared by the homepage preview and rental-process.html
   ========================================================================== */
.steps {
  counter-reset: step;
  border-top: var(--border-hairline);
}

.steps__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2) var(--space-5);
  padding-block: var(--space-5);
  border-bottom: var(--border-hairline);
}

.steps__num {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-primary-dark);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.steps__title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  align-self: center;
}

.steps__body {
  grid-column: 2;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

/* ==========================================================================
   PROJECT CARD
   ========================================================================== */
.project-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-background);
  border: var(--border-hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.project-card__media {
  /* The client's project photographs are portrait drone frames, so the card
     keeps that ratio and `.media` crops to fill it rather than squashing. */
  aspect-ratio: 4 / 5;
  background-color: var(--color-background-soft);
  border-bottom: var(--border-hairline);
}

.project-card__body {
  padding: var(--space-5);
}

.project-card__name {
  margin-bottom: var(--space-3);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

.project-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.project-card__specs {
  margin-top: var(--space-4);
}

/* ==========================================================================
   FIELD GALLERY  project photographs as captioned plates.
   ========================================================================== */
.photo {
  margin: 0;
  overflow: hidden;
  background-color: var(--color-background);
  border: var(--border-hairline);
  border-radius: var(--radius-lg);
}

.photo__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background-color: var(--color-background-soft);
}

.photo__cap {
  padding: var(--space-3) var(--space-4);
  border-top: var(--border-hairline);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
}

/* ==========================================================================
   TESTIMONIAL CARD
   ========================================================================== */
.testimonial-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-6);
  background-color: var(--color-background);
  border: var(--border-hairline);
  border-radius: var(--radius-lg);
}

.testimonial-card__quote {
  flex: 1;
  margin-bottom: var(--space-5);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}

.testimonial-card__quote::before {
  content: "\201C";
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-accent);
  font-size: 2.5rem;
  font-weight: var(--weight-bold);
  line-height: 0.6;
}

.testimonial-card__person {
  padding-top: var(--space-4);
  border-top: var(--border-hairline);
}

.testimonial-card__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.testimonial-card__role {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ==========================================================================
   FORM FIELDS
   ========================================================================== */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.field__req {
  color: var(--color-accent);
}

.field__hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.field__input {
  width: 100%;
  min-height: 50px;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-background);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  transition: border-color var(--dur-fast) var(--ease);
}

.field__input:hover {
  border-color: var(--color-primary-light);
}

.field__input:focus {
  border-color: var(--color-primary);
}

textarea.field__input {
  min-height: 150px;
  resize: vertical;
}

select.field__input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23667085' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-8);
}

.field__error {
  display: none;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-accent);
}

.field.is-invalid .field__input {
  border-color: var(--color-accent);
}

.field.is-invalid .field__error {
  display: block;
}

.form-status {
  display: none;
  padding: var(--space-4);
  background-color: var(--color-background-soft);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.form-status.is-visible {
  display: block;
}

/* Optional detail group on the contact form. The required fields carry
   everything the first WhatsApp message needs; these six stay one tap away
   instead of making a phone visitor fill ten inputs to send one message.
   Native <details>, so it needs no scripting, and it composes into the same
   message because form.js reads each field by id. */
.form-extra {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-block: var(--space-2);
  border-block: var(--border-hairline);
}

.form-extra[open] {
  padding-bottom: var(--space-5);
}

.form-extra__summary {
  padding-block: var(--space-3);
  cursor: pointer;
  list-style: none;
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  transition: color var(--dur-fast) var(--ease);
}

.form-extra__summary::-webkit-details-marker {
  display: none;
}

.form-extra__summary:hover {
  color: var(--color-accent);
}

/* The same authored open/close mark as the FAQ, drawn from two hairlines. */
.form-extra__summary::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: var(--space-3);
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur-fast) var(--ease);
}

.form-extra[open] .form-extra__summary::after {
  transform: translateY(1px) rotate(225deg);
}

/* ==========================================================================
   FAQ  a ruled question list.
   Native <details> so it works with no scripting and drops into a WordPress
   template part untouched. Styled in the same spec-sheet family as the rest
   of the system: hairline rules, and an open/close mark drawn from two
   hairlines rather than a unicode glyph or an icon font.
   ========================================================================== */
.faq {
  border-top: var(--border-hairline);
}

.faq__item {
  border-bottom: var(--border-hairline);
}

.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-5);
  cursor: pointer;
  list-style: none;
  color: var(--color-text);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  transition: color var(--dur-fast) var(--ease);
}

/* Replace the native disclosure triangle with the authored mark. */
.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q-text {
  min-width: 0;
}

.faq__q:hover {
  color: var(--color-primary);
}

.faq__q::after {
  content: "";
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  margin-top: 0.3em;
  background-image:
    linear-gradient(var(--color-primary), var(--color-primary)),
    linear-gradient(var(--color-primary), var(--color-primary));
  background-position: center;
  background-size: 13px 1.5px, 1.5px 13px;
  background-repeat: no-repeat;
  transition: background-size var(--dur-base) var(--ease);
}

/* Open: the vertical hairline collapses so the plus becomes a minus. */
.faq__item[open] .faq__q::after {
  background-size: 13px 1.5px, 1.5px 0;
}

.faq__a {
  max-width: 68ch;
  padding-bottom: var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

/* ==========================================================================
   WHATSAPP  floating action button + inline link
   Green fill, white glyph and label.
   ========================================================================== */
.whatsapp-fab {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: var(--z-fab);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 52px;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-whatsapp-fill);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  color: var(--color-on-dark);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease),
              transform var(--dur-base) var(--ease);
}

.whatsapp-fab:hover {
  background-color: var(--color-whatsapp-fill-hover);
  color: var(--color-on-dark);
  transform: translateY(-2px);
}

.whatsapp-fab__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.whatsapp-fab__label {
  display: none;
}

@media (min-width: 480px) {
  .whatsapp-fab {
    right: var(--space-5);
    bottom: var(--space-5);
    padding-inline: var(--space-5);
  }

  .whatsapp-fab__label {
    display: inline;
  }
}

/* ==========================================================================
   INFO LIST — a labelled contact list with a leading icon per row.
   Shared by the footer (navy ground) and the contact page (light ground):
   colour is inherited so one component serves both. A row whose value the
   client has not supplied yet shows an em dash rather than a token, so the
   list reads as deliberate rather than unfinished.
   ========================================================================== */
.info-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.info-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.info-list__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 0.15em;
}

.info-list__link {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: inherit;
  text-decoration: none;
}

.info-list__link:hover {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* The WhatsApp row keeps the channel's green even on a light ground, where the
   link colour would otherwise be inherited body ink. */
.info-list__link--whatsapp {
  color: var(--color-whatsapp-text);
}

.info-list__link--whatsapp:hover {
  color: var(--color-whatsapp-text);
}

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

/* A value the client HAS supplied. Full-strength on either ground so it never
   reads as the muted "not yet" state beside it. */
.info-list__value {
  color: var(--color-text);
}

.site-footer .info-list__value {
  color: var(--color-on-dark);
}

.site-footer .info-list__pending {
  color: var(--color-on-dark-muted);
}

/* Two contact numbers in one row: stacked, each its own link. */
.info-list__contacts {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ==========================================================================
   MEDIA  real images that replace a placeholder keep the same box.
   ========================================================================== */
.media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   PAGE HEADER  the inner-page masthead, shared by every non-home page.
   Distinct from `.hero`, which belongs to the homepage alone.
   ========================================================================== */
.page-header {
  padding-block: clamp(2rem, 1.2rem + 3.4vw, 3.25rem);
  background-color: var(--color-background-soft);
  border-bottom: var(--border-hairline);
}

.page-header__title {
  max-width: 22ch;
}

.page-header__lead {
  max-width: 62ch;
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

/* ==========================================================================
   CTA BAND  the closing navy section, shared by every page.
   Lifted out of pages.css the moment a second page needed it.
   ========================================================================== */
.cta-band__inner {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 900px) {
  .cta-band__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-8);
  }
}

.cta-band__text {
  max-width: 54ch;
  margin-top: var(--space-4);
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ==========================================================================
   SECTION FOOT  a trailing link or button centred under a section
   ========================================================================== */
.section-foot {
  display: flex;
  justify-content: center;
  margin-top: var(--space-7);
}

/* ==========================================================================
   BREADCRUMB
   ========================================================================== */
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.breadcrumb__list li:not(:last-child)::after {
  content: "/";
  margin-left: var(--space-2);
  color: var(--color-border-strong);
}

.breadcrumb__list a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.breadcrumb__list a:hover {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.breadcrumb__list [aria-current="page"] {
  color: var(--color-text);
  font-weight: var(--weight-medium);
}

/* ==========================================================================
   NOTICE  a plain explanatory panel.
   Used for the no-JS fallback on the detail page and reusable anywhere a
   message needs to sit on the page rather than in a form.
   ========================================================================== */
.notice {
  padding: var(--space-6);
  background-color: var(--color-background-soft);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
}

.notice__title {
  margin-bottom: var(--space-3);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

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

/* ==========================================================================
   WHATSAPP CONTACT CHOOSER  a small dialog in front of every WhatsApp CTA so
   the visitor picks which number to reach. Built by js/wa-contact.js; hidden
   until then.
   ========================================================================== */
.wa-choose {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background-color: rgba(31, 35, 51, 0.55);
}

.wa-choose[hidden] {
  display: none;
}

.wa-choose__panel {
  width: 100%;
  max-width: 24rem;
  padding: var(--space-5);
  background-color: var(--color-background);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.wa-choose__title {
  margin-bottom: var(--space-2);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-primary-dark);
}

.wa-choose__lead {
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.wa-choose__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.wa-choose__option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) var(--space-4);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}

.wa-choose__option:hover,
.wa-choose__option:focus-visible {
  background-color: var(--color-background-soft);
  border-color: var(--color-whatsapp-text);
}

.wa-choose__name {
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

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

.wa-choose__close {
  width: 100%;
}