/* ==========================================================================
   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;
  min-height: clamp(520px, 74vh, 760px);
  padding-block: var(--s-9) var(--s-8);
  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(0,33,47,.94) 0%, rgba(0,33,47,.80) 42%, rgba(0,33,47,.42) 100%),
    linear-gradient(to top, rgba(0,33,47,.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-6); }
.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-7);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-6);
  padding: var(--s-3) var(--s-5);
  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(0,33,47,.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; }

/* 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(0,33,47,.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(0,33,47,.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(0,48,72,.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(0,33,47,.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(0,33,47,.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(240,200,48,.14); 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(0,33,47,.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(10,63,92,.96), rgba(0,33,47,.98));
  border: 1px solid rgba(240,200,48,.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(240,200,48,.13);
  border: 1px solid rgba(240,200,48,.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); }