/* ==========================================================================
   COMPONENTS
   ========================================================================== */

/* ---- Buttons -------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;              /* touch target */
  padding: var(--s-3) var(--s-6);
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 650;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background-color var(--t-base) ease, color var(--t-base) ease,
              border-color var(--t-base) ease, box-shadow var(--t-base) ease,
              transform var(--t-base) var(--ease-out);
}
.btn svg { width: 17px; height: 17px; flex: none; }

/* Gold is a SURFACE colour. Navy text on gold = 8.9:1 — never white on gold. */
.btn--primary { background: var(--gold); color: var(--navy); box-shadow: var(--sh-gold); }
.btn--primary:hover { background: var(--gold-deep); transform: translateY(-2px); box-shadow: var(--sh-3), var(--sh-gold); }
.btn--primary:active { transform: translateY(0); }

.btn--navy { background: var(--navy); color: var(--white); box-shadow: var(--sh-2); }
.btn--navy:hover { background: var(--navy-2); transform: translateY(-2px); box-shadow: var(--sh-3); }

.btn--ghost { border-color: var(--iron); color: var(--text); }
.btn--ghost:hover { border-color: var(--navy); background: var(--navy); color: var(--white); transform: translateY(-2px); }

.btn--on-dark { border-color: rgba(255,255,255,.4); color: var(--white); }
.btn--on-dark:hover { background: var(--white); color: var(--navy); border-color: var(--white); transform: translateY(-2px); }

.btn--lg { min-height: 56px; padding: var(--s-4) var(--s-7); font-size: 1rem; }
.btn--block { width: 100%; }

.btn[aria-busy="true"] { pointer-events: none; opacity: .72; }
.btn__spinner { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) {
  .btn__spinner { animation: spin .7s linear infinite; }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 650;
  font-size: var(--fs-sm);
  color: var(--navy);
  text-decoration: none;
}
.link-arrow svg { width: 16px; height: 16px; transition: transform var(--t-base) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(5px); }
.link-arrow:hover { text-decoration: underline; }
.section--dark .link-arrow { color: var(--gold); }

/* ---- Hero ----------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  /* Sized to the viewport so the whole block clears the fold on short laptops */
  min-height: clamp(440px, 62vh, 640px);
  padding-block: var(--s-7) var(--s-6);
  overflow: hidden;
  background: var(--navy-deep);
}
.hero__media { position: absolute; inset: -8% 0 -8%; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* Scrim: keeps headline contrast >= 4.5:1 over any photo */
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(12,21,33,.94) 0%, rgba(12,21,33,.80) 42%, rgba(12,21,33,.42) 100%),
    linear-gradient(to top, rgba(12,21,33,.85) 0%, transparent 45%);
}
.hero__inner { position: relative; color: var(--text-on-dark-soft); }
/* Left-aligned editorial block inside the centred container, not a centred banner */
.hero__inner > * { max-width: 62ch; }
.hero h1 { max-width: 17ch; }
.hero h1 { color: var(--white); font-size: var(--fs-hero); margin-bottom: var(--s-4); }
.hero h1 em { font-style: italic; color: var(--gold); }
.hero__lead { font-size: var(--fs-lead); max-width: 52ch; margin-bottom: var(--s-5); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.hero--page { min-height: clamp(280px, 38vh, 380px); padding-block: var(--s-8) var(--s-7); }
.hero--page h1 { font-size: var(--fs-h1); }

/* Floating glass credential strip */
.hero__credentials {
  position: relative;
  margin-top: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.07);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--sh-3);
  width: fit-content;
  max-width: 100%;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero__credentials { background: rgba(12,21,33,.85); }
}
.hero__credentials ul { display: contents; list-style: none; margin: 0; padding: 0; }
.hero__credentials li {
  display: flex; align-items: center; gap: var(--s-2);
  margin: 0; font-size: var(--fs-xs); font-weight: 600; color: var(--white);
  list-style: none;
}
.hero__credentials svg { width: 15px; height: 15px; color: var(--gold); flex: none; }

/* Accreditation badges — proof under the credential strip */
.hero__badges { margin-top: var(--s-4); max-width: none; }
.hero__badges-label {
  display: block;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-2);
}
.cert-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s-4);
}
/* Tile scales with viewport so four badges stay on one row. The badges carry
   fine lettering, so they need a little more room than plain icons would. */
.cert-badge { margin: 0; text-align: center; width: clamp(58px, 6.2vw, 78px); }
.cert-badge img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  /* Several badges are dark-on-transparent and disappear against the hero
     photo, so each sits on its own light disc rather than being desaturated. */
  background: rgba(255,255,255,.93);
  border-radius: 50%;
  padding: 5px;
  opacity: .95;
  transition: opacity .35s ease, transform .35s ease, box-shadow .35s ease;
}
.cert-badge a { display: block; border-radius: var(--r-sm); }
.cert-badge:hover img,
.cert-badge:focus-within img {
  opacity: 1;
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.cert-badge a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.cert-badge figcaption {
  margin-top: var(--s-2);
  font-size: 11px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--text-on-dark-soft);
}
@media (max-width: 640px) {
  .cert-badges { gap: var(--s-3); }
  .cert-badge { width: 54px; }
  .cert-badge figcaption { display: none; }
}
/* Short laptops (~768px tall): drop the floor so the badges clear the fold */
@media (max-height: 800px) and (min-width: 861px) {
  .hero { min-height: 0; padding-block: var(--s-6) var(--s-5); }
  .hero__credentials { margin-top: var(--s-4); }
  .hero__badges { margin-top: var(--s-3); }
  .cert-badge figcaption { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cert-badge img { transition: none; }
  .cert-badge:hover img, .cert-badge:focus-within img { transform: none; }
}

/* Fraunces ships a decorative ampersand that reads as a reversed glyph at
   heading sizes. Render ampersands in headings with the body face instead. */
h1 .amp, h2 .amp, h3 .amp, h4 .amp,
.card__body h3 .amp, .footer h4 .amp {
  font-family: var(--font-body);
  font-weight: 500;
  font-style: normal;
}

/* ---- Cards ---------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  overflow: hidden;
  transition: box-shadow var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out),
              border-color var(--t-base) ease;
}
a.card, .card--link { text-decoration: none; cursor: pointer; }
.card:hover { box-shadow: var(--sh-4); border-color: var(--gold); transform: translateY(-6px); }

.card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bone-2); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.card:hover .card__media img { transform: scale(1.06); }
.card__body { padding: var(--s-4) var(--s-5) var(--s-5); flex: 1; display: flex; flex-direction: column; }
.card__body h3 { font-size: var(--fs-h4); margin-bottom: var(--s-2); font-family: var(--font-display); }
.card__body p { font-size: var(--fs-sm); color: var(--text-body); margin-bottom: var(--s-3); }
.card__body .link-arrow { margin-top: auto; }

/* 3D tilt — JS sets --rx/--ry, capped at ±6deg */
.tilt { transform-style: preserve-3d; will-change: transform; }
.tilt-wrap { perspective: 1200px; }
@media (prefers-reduced-motion: no-preference) and (pointer: fine) {
  .tilt[data-tilt-active="true"] {
    transform: translateY(-6px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  }
}

/* Icon tile */
.tile { display: flex; gap: var(--s-4); padding: var(--s-5); border-radius: var(--r-md); background: var(--white); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.tile__icon {
  display: grid; place-items: center;
  width: 48px; height: 48px; flex: none;
  border-radius: var(--r-md);
  background: var(--gold-soft);
  color: var(--navy);
}
.tile__icon svg { width: 23px; height: 23px; }
.tile h4 { margin-bottom: var(--s-1); }
.tile p { font-size: var(--fs-sm); margin: 0; }

/* ---- Stats ---------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-5); }
.stat { text-align: center; }
.stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.8rem + 2.6vw, 4rem);
  font-weight: 600;
  line-height: 1;
  color: var(--gold);
  letter-spacing: var(--ls-display);
}
.stat__label {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-on-dark-soft);
}

/* ---- Process timeline ----------------------------------------------- */
.process { position: relative; display: grid; gap: var(--s-6); }
@media (min-width: 860px) { .process { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }
.process__line {
  display: none;
  position: absolute; top: 34px; left: 12%; right: 12%; height: 2px;
  background: var(--line);
  overflow: hidden;
}
@media (min-width: 860px) { .process__line { display: block; } }
.process__line span {
  display: block; height: 100%; width: 100%;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.6s var(--ease-out);
}
.process__line[data-drawn="true"] span { transform: scaleX(1); }

.step { position: relative; text-align: center; }
.step__num {
  display: grid; place-items: center;
  width: 60px; height: 60px;
  margin: 0 auto var(--s-3);
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--gold);
  box-shadow: var(--sh-2);
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--navy);
}
.step h3 { font-size: var(--fs-h4); }
.step p { font-size: var(--fs-sm); margin-inline: auto; }

/* ---- Filter tabs ---------------------------------------------------- */
.filters {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  margin-bottom: var(--s-5);
}
.filters--center { justify-content: center; }
.filter {
  min-height: 44px;
  padding: var(--s-2) var(--s-5);
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--white);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-body);
  cursor: pointer;
  transition: background-color var(--t-base) ease, color var(--t-base) ease, border-color var(--t-base) ease;
}
.filter:hover { border-color: var(--navy); color: var(--navy); }
/* Active state uses colour + weight + a mark, never colour alone */
.filter[aria-selected="true"] {
  background: var(--navy); color: var(--white); border-color: var(--navy);
}
.filter[aria-selected="true"]::before { content: "\2713\00a0"; color: var(--gold); }

/* ---- Reviews -------------------------------------------------------- */
.reviews__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-4); margin-bottom: var(--s-5);
}
.rating-summary { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.rating-summary__score {
  font-family: var(--font-display); font-size: 2.75rem; line-height: 1; color: var(--navy);
}
.section--dark .rating-summary__score { color: var(--white); }
.stars { display: inline-flex; gap: 2px; }
.stars svg { width: 18px; height: 18px; color: var(--gold); }

.review {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: box-shadow var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}
.review:hover { box-shadow: var(--sh-3); transform: translateY(-4px); }
.review__top { display: flex; align-items: center; gap: var(--s-3); }
.review__avatar {
  display: grid; place-items: center;
  width: 46px; height: 46px; flex: none;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 1.15rem;
}
.review__name { font-weight: 650; color: var(--text); font-size: var(--fs-sm); }
.review__meta { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-xs); color: var(--text-muted); }
.review__text { margin: 0; font-size: var(--fs-sm); color: var(--text-body); }
.review__tag {
  align-self: flex-start; margin-top: auto;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: var(--gold-soft);
  color: #6B5407;
  font-size: var(--fs-xs);
  font-weight: 650;
}
.review__g { margin-left: auto; width: 19px; height: 19px; flex: none; }

/* FLIP filtering */
.review[data-hidden="true"] { display: none; }

/* ---- Gallery -------------------------------------------------------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-4); }
.gallery__item {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bone-2);
  border: none;
  padding: 0;
  cursor: pointer;
  box-shadow: var(--sh-1);
  transition: box-shadow var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.gallery__item:hover { box-shadow: var(--sh-4); transform: translateY(-4px); }
.gallery__item:hover img { transform: scale(1.07); }
.gallery__item::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,21,33,.55), transparent 55%);
  opacity: 0;
  transition: opacity var(--t-base) ease;
}
.gallery__item:hover::after { opacity: 1; }
.gallery__item[data-hidden="true"] { display: none; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center;
  padding: var(--s-5);
  background: rgba(12,21,33,.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-base) ease, visibility var(--t-base);
}
.lightbox[data-open="true"] { opacity: 1; visibility: visible; }
.lightbox img { max-width: min(92vw, 1100px); max-height: 82vh; border-radius: var(--r-md); box-shadow: var(--sh-4); }
.lightbox__caption { margin-top: var(--s-4); color: var(--text-on-dark-soft); font-size: var(--fs-sm); text-align: center; }
.lightbox__btn {
  position: absolute;
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1px solid var(--glass-brd);
  color: var(--white);
  transition: background-color var(--t-base) ease;
}
.lightbox__btn:hover { background: var(--gold); color: var(--navy); }
.lightbox__btn svg { width: 22px; height: 22px; }
.lightbox__close { top: var(--s-5); right: var(--s-5); }
.lightbox__prev { left: var(--s-4); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: var(--s-4); top: 50%; transform: translateY(-50%); }

/* ---- Forms ---------------------------------------------------------- */
.form { display: grid; gap: var(--s-4); }
.form__row { display: grid; gap: var(--s-4); }
@media (min-width: 700px) { .form__row--2 { grid-template-columns: 1fr 1fr; gap: var(--s-4); } }

.field { position: relative; display: flex; flex-direction: column; }
.field label {
  margin-bottom: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--text);
}
.field .req { color: var(--gold-dark); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 50px;
  padding: var(--s-3) var(--s-4);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  color: var(--text);
  font-size: 1rem; /* >=16px prevents iOS zoom-on-focus */
  transition: border-color var(--t-base) ease, box-shadow var(--t-base) ease;
}
.field textarea { min-height: 128px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23697380' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 44px; }
.field input::placeholder, .field textarea::placeholder { color: #697380; } /* 4.8:1 on white */
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(24,34,48,.14);
}
.field__hint { margin: var(--s-2) 0 0; font-size: var(--fs-xs); color: var(--text-muted); }
/* Error state: icon + text + colour, never colour alone */
.field__err { display: none; align-items: center; gap: 6px; margin: var(--s-2) 0 0; font-size: var(--fs-xs); font-weight: 600; color: var(--err); }
.field__err svg { width: 14px; height: 14px; flex: none; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: var(--err); background: var(--err-soft); }
.field[data-invalid="true"] .field__err { display: flex; }

/* Honeypot — off-screen, not display:none (bots skip hidden fields) */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__status { margin: 0; font-size: var(--fs-sm); font-weight: 600; }
.form__status[data-state="ok"] { color: var(--ok); }
.form__status[data-state="err"] { color: var(--err); }

.form-panel {
  padding: clamp(1.5rem, 1rem + 2.4vw, 3rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
}

/* ---- FAQ ------------------------------------------------------------ */
.faq { display: grid; gap: var(--s-3); }
.faq__item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--t-base) ease, box-shadow var(--t-base) ease;
}
.faq__item[open] { border-color: var(--gold); box-shadow: var(--sh-2); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  min-height: 56px;
  font-weight: 650;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q svg { width: 20px; height: 20px; flex: none; color: var(--gold-dark); transition: transform var(--t-base) var(--ease-out); }
.faq__item[open] .faq__q svg { transform: rotate(45deg); }
.faq__a { padding: 0 var(--s-5) var(--s-4); }
.faq__a p { font-size: var(--fs-sm); margin: 0; }

/* ---- CTA band ------------------------------------------------------- */
.cta-band { position: relative; isolation: isolate; overflow: hidden; background: var(--navy); }
.cta-band__bg { position: absolute; inset: 0; z-index: -2; opacity: .22; }
.cta-band__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, var(--navy) 12%, rgba(12,21,33,.72) 100%);
}
.cta-band__inner { display: grid; gap: var(--s-4); align-items: center; text-align: center; justify-items: center; }
.cta-band h2 { color: var(--white); max-width: 22ch; }
.cta-band p { color: var(--text-on-dark-soft); font-size: var(--fs-lead); max-width: 52ch; }

/* ---- Service area list --------------------------------------------- */
.area-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--s-2); }
.area-link {
  display: flex; align-items: center; gap: var(--s-2);
  min-height: 48px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-body);
  text-decoration: none;
  transition: border-color var(--t-base) ease, color var(--t-base) ease, background-color var(--t-base) ease, transform var(--t-base) var(--ease-out);
}
.area-link svg { width: 15px; height: 15px; color: var(--gold-dark); flex: none; }
.area-link:hover { border-color: var(--gold); background: var(--gold-soft); color: var(--navy); transform: translateX(4px); }

/* ---- Mobile sticky call/WhatsApp bar -------------------------------- */
.sticky-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-sticky);
  display: none;
  gap: 1px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--glass-dark);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--glass-brd);
  box-shadow: 0 -6px 24px rgba(12,21,33,.28);
  transform: translateY(110%);
  transition: transform var(--t-slow) var(--ease-out);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sticky-bar { background: var(--navy-deep); }
}
.sticky-bar[data-visible="true"] { transform: translateY(0); }
.sticky-bar__btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--bar-h);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none;
  color: var(--white);
  transition: background-color var(--t-base) ease;
}
.sticky-bar__btn svg { width: 20px; height: 20px; }
.sticky-bar__btn--call { background: rgba(191,156,92,.16); color: var(--gold); }
.sticky-bar__btn--call:hover { background: var(--gold); color: var(--navy); }
.sticky-bar__btn--wa { background: rgba(37,211,102,.16); color: #5BEE9B; }
.sticky-bar__btn--wa:hover { background: #25D366; color: #04321A; }
@media (max-width: 768px) { .sticky-bar { display: flex; } }

/* ---- Demo popup ----------------------------------------------------- */
.popup {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center;
  padding: var(--s-5);
  background: rgba(12,21,33,.72);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-slow) var(--ease-out), visibility var(--t-slow);
}
.popup[data-open="true"] { opacity: 1; visibility: visible; }

.popup__card {
  position: relative;
  width: min(100%, 540px);
  padding: clamp(1.75rem, 1.2rem + 2.6vw, 3rem);
  text-align: center;
  background: linear-gradient(150deg, rgba(36,48,63,.96), rgba(12,21,33,.98));
  border: 1px solid rgba(191,156,92,.32);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-4);
  color: var(--text-on-dark-soft);
  transform: scale(.94) translateY(14px);
  transition: transform var(--t-slow) var(--ease-out);
}
.popup[data-open="true"] .popup__card { transform: scale(1) translateY(0); }
.popup__card h2 { color: var(--white); font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem); margin-bottom: var(--s-4); }
.popup__card p { margin-inline: auto; font-size: var(--fs-sm); }
.popup__badge {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: var(--s-4);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: rgba(191,156,92,.13);
  border: 1px solid rgba(191,156,92,.34);
  color: var(--gold);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}
.popup__actions { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-6); }
.popup__later { min-height: 44px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-on-dark-soft); text-decoration: underline; text-underline-offset: 3px; }
.popup__later:hover { color: var(--gold); }
.popup__close {
  position: absolute; top: var(--s-3); right: var(--s-3);
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  color: var(--text-on-dark-soft);
  transition: background-color var(--t-base) ease, color var(--t-base) ease;
}
.popup__close:hover { background: rgba(255,255,255,.12); color: var(--white); }
.popup__close svg { width: 20px; height: 20px; }
.popup__by { margin: var(--s-5) 0 0; font-size: var(--fs-xs); color: #8FA6B4; }
.popup__by a { color: var(--gold); text-decoration: none; font-weight: 600; }

/* Body scroll lock while a modal is open */
body[data-locked="true"] { overflow: hidden; }

/* ---- Media frame (editorial image treatment) ------------------------ */
.frame { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-3); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame--tall { aspect-ratio: 4 / 5; }
.frame--wide { aspect-ratio: 3 / 2; }
/* Offset gold rule behind the image — architectural accent.
   The offset sits outside the element box, so the accent is only drawn once
   the viewport is wide enough for the container gutter to absorb it.
   Below that it would push the document scroll width and cause sideways scroll. */
.frame-stack { position: relative; }
.frame-stack::before { content: none; }

@media (min-width: 1400px) {
  .frame-stack::before {
    content: "";
    position: absolute;
    inset: auto -18px -18px auto;
    width: 62%; height: 62%;
    border: 2px solid var(--gold);
    border-radius: var(--r-lg);
    z-index: -1;
  }
}

/* ---- Prose ---------------------------------------------------------- */
.prose h2 { margin-top: var(--s-8); }
.prose h3 { margin-top: var(--s-6); }
.prose > *:first-child { margin-top: 0; }
.prose ul { padding-left: 1.1rem; }
.prose li { font-size: var(--fs-body); color: var(--text-body); }
.prose li::marker { color: var(--gold-dark); }

/* Checklist */
.checks { list-style: none; padding: 0; margin: 0 0 var(--s-4); display: grid; gap: var(--s-2); }
.checks li::marker { content: none; }
.checks li { display: flex; gap: var(--s-3); align-items: flex-start; margin: 0; font-size: var(--fs-sm); color: var(--text-body); }
.checks svg { width: 20px; height: 20px; flex: none; color: var(--gold-dark); margin-top: 1px; }
.section--dark .checks li { color: var(--text-on-dark-soft); }
.section--dark .checks svg { color: var(--gold); }

/* ==========================================================================
   MECHANISM DIAGRAMS
   The commercial gate pages are photo-light by design, so these inline SVGs
   carry the explanation. Every colour resolves from three custom properties,
   which the dark sections re-point — that is the whole theming mechanism.
   ========================================================================== */
.dgm {
  --dgm-line:   var(--ink);
  --dgm-accent: var(--brass-text);
  --dgm-soft:   var(--iron);
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.section--dark .dgm,
.hero--spec .dgm {
  --dgm-line:   var(--paper);
  --dgm-accent: var(--brass);
  --dgm-soft:   var(--stone);
}

/* Structure — the parts that do not move. */
.dgm__frame, .dgm__post, .dgm__op, .dgm__roller {
  stroke: var(--dgm-line); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Infill — pickets, hatching, keypad faces. Lighter so it reads as texture. */
.dgm__fill, .dgm__eye, .dgm__loop, .dgm__dim {
  stroke: var(--dgm-soft); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.dgm__grade { stroke: var(--dgm-soft); stroke-width: 1.5; stroke-linecap: round; }
.dgm__loop  { stroke-dasharray: 5 4; }
/* The leading/trailing safety edge sits proud of the frame. */
.dgm__edge  { stroke: var(--dgm-accent); stroke-width: 5; stroke-linecap: round; opacity: .55; }
/* Ghosted open position. */
.dgm__ghost { stroke: var(--dgm-soft); stroke-width: 1.8; stroke-dasharray: 6 5; opacity: .8; }
/* Motion path and its arrowhead — the only brass in the drawing, so the eye
   lands on what moves. */
.dgm__path  { stroke: var(--dgm-accent); stroke-width: 2.2; stroke-dasharray: 7 6; stroke-linecap: round; }
.dgm__head  { stroke: var(--dgm-accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; fill: none; }

@media (prefers-reduced-motion: no-preference) {
  .dgm__path { stroke-dashoffset: 26; animation: dgm-travel 1.6s var(--ease-out) forwards; }
  .reveal .dgm__path, .reveal-child .dgm__path { animation-delay: .2s; }
}
@keyframes dgm-travel { to { stroke-dashoffset: 0; } }

.dgm-figure { margin: 0; }
.dgm-figure figcaption {
  margin-top: var(--s-4);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 46ch;
}
.section--dark .dgm-figure figcaption,
.hero--spec .dgm-figure figcaption { color: var(--text-on-dark-soft); }

/* --- Spec hero: type + diagram, no photograph --------------------------- */
.hero--spec {
  background: linear-gradient(150deg, var(--ink-2) 0%, var(--ink-deep) 68%);
  color: var(--text-on-dark);
  padding: calc(var(--section-y) * 1.25) 0;
}
.hero__inner--split { display: grid; gap: var(--s-8); align-items: center; }
@media (min-width: 900px) {
  .hero__inner--split { grid-template-columns: 1.05fr .95fr; gap: var(--s-9); }
}
.hero--spec h1 { color: var(--text-on-dark); }
.hero--spec .hero__lead { color: var(--text-on-dark-soft); }
.hero__stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--s-5); margin: var(--s-7) 0 0;
  padding-top: var(--s-6); border-top: 1px solid var(--glass-brd);
}
.hero__stats dt {
  font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--brass); margin-bottom: var(--s-2);
}
.hero__stats dd {
  margin: 0; font-family: var(--font-display);
  font-size: var(--fs-h4); color: var(--text-on-dark); line-height: 1.2;
}
.hero__dgm {
  background: rgba(250,248,247,.04);
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}

/* --- Spec table --------------------------------------------------------- */
.spec-wrap { overflow-x: auto; }
.spec { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.spec th, .spec td { text-align: left; padding: var(--s-4) var(--s-3); vertical-align: top; }
.spec tr + tr th, .spec tr + tr td { border-top: 1px solid var(--line); }
.spec th {
  font-family: var(--font-body); font-weight: 600;
  color: var(--text); width: 42%; white-space: normal;
}
.spec td { color: var(--text-body); }
.section--dark .spec th { color: var(--text-on-dark); }
.section--dark .spec td { color: var(--text-on-dark-soft); }
.section--dark .spec tr + tr th, .section--dark .spec tr + tr td { border-top-color: rgba(250,248,247,.14); }
.spec__note {
  margin-top: var(--s-5); font-size: var(--fs-sm);
  color: var(--text-muted); max-width: var(--measure);
}
.section--dark .spec__note { color: var(--text-on-dark-soft); }

/* --- Diagram-led card --------------------------------------------------- */
.card--dgm .card__dgm {
  padding: var(--s-6) var(--s-5) var(--s-2);
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.section--dark .card--dgm .card__dgm { background: rgba(250,248,247,.05); border-bottom-color: var(--glass-brd); }
.card--dgm:hover .card__dgm { background: var(--brass-soft); }
.section--dark .card--dgm:hover .card__dgm { background: rgba(191,156,92,.14); }