/* ==========================================================================
   Ministerio Pentecostés Imperio del Señor Jesucristo
   Design tokens: navy + gold, pulled from the client's crest.
   ========================================================================== */

:root {
  --navy-ink: #0b2a4a;
  --navy-night: #071a2e;
  --gold-crown: #e4a72a;
  --gold-crown-soft: #f0c05f;
  /* Small-text gold. Darker than --gold-crown so 0.72rem labels clear
     4.5:1 on both --ivory-paper and --sky-radiance-soft. */
  --gold-ink: #8e6210;
  --sky-radiance: #8fcbe8;
  --sky-radiance-soft: #dcf0fa;
  --ivory-paper: #fbf8f2;
  --dove-white: #ffffff;

  /* The crest's own saturated field, sampled from crest-800.png. The palette
     had navy and gold but never this, so every "color" section was really a
     95%-white wash (--sky-radiance-soft) and the page read as institutional
     rather than alive.
     CONTRAST RULE: this carries --navy-night text ONLY (6.4:1). White is
     2.8:1 and gold is 1.3:1 against it — both fail. See .about below. */
  --sky-blaze: #2ba6dc;
  --sky-blaze-deep: #1b82b4;

  /* Type scale. Section headings were capped at 2.6rem, which is why
     everything below the hero read as polite. */
  /* Deliberately close to the old 5.5rem cap. The hero headline was never the
     timid one — the authority comes from weight/opsz/tracking below, not size.
     Pushing it to 6rem+ shoved the primary CTA below the fold. */
  --fs-display: clamp(2.5rem, 5.5vw, 5.25rem);
  --fs-section: clamp(2.5rem, 6vw, 4.75rem);
  --fs-sub: clamp(1.25rem, 2.2vw, 1.6rem);

  --font-display: "Fraunces", "Iowan Old Style", serif;
  --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  /* Roman inscriptional capitals — the same letterform tradition as the
     engraved ring text on the client's crest. Labels/overlines only. */
  --font-inscription: "Cinzel", "Trajan Pro", var(--font-display);

  --container: 1320px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  --radius-seal: 50%;
  /* One radius scale. Before this the page ran 0 on cards, 1rem on the map,
     1.25rem on the form and 999px on buttons with no rule connecting them,
     which is the kind of inconsistency that reads as "assembled" up close. */
  --radius-sm: 0.65rem;
  --radius-md: 1.1rem;
  --radius-lg: 1.75rem;
  --radius-pill: 999px;

  --shadow-soft: 0 1px 2px rgba(11, 42, 74, 0.06), 0 20px 40px -20px rgba(7, 26, 46, 0.4),
    0 8px 16px -10px rgba(7, 26, 46, 0.22);
  --shadow-tight: 0 1px 2px rgba(11, 42, 74, 0.08), 0 1px 1px rgba(11, 42, 74, 0.05);
  /* Quieter than --shadow-soft, which at -20px/40% was doing a lot of work on
     elements that only needed to lift off the background by a hair. */
  --shadow-lift: 0 2px 4px rgba(7, 26, 46, 0.04), 0 12px 28px -14px rgba(7, 26, 46, 0.28);

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

/* -------------------------------------------------------------------------
   Grain — a single fixed overlay, blended over every section regardless of
   its own background color, so paper/canvas texture never has to be
   reproduced per-section.
   ------------------------------------------------------------------------- */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* -------------------------------------------------------------------------
   Reset
   ------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Reduced motion: hard kill-switch, must stay early so nothing below can
   re-introduce motion once a user has opted out. Covers every CSS
   animation/transition site-wide; gsap-motion.js has its own matching
   check before it runs anything JS-driven. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* .is-swept never gets added at all under reduced motion — gsap-motion.js
     bails out before running any ScrollTrigger — so the instant-transition
     rule above has nothing to trigger it. Force the end state directly. */
  .hl-sweep {
    background-size: 100% 100% !important;
  }
}

body {
  margin: 0;
  background: var(--ivory-paper);
  color: var(--navy-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img,
video {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  margin: 0;
  line-height: 1.1;
  font-weight: 600;
}

/* Display-scale headings.
   Fraunces carries an optical-size axis (loaded as the opsz 9..144 range in
   index.html). Pushing opsz to its maximum sharpens the serifs and increases
   stroke modulation the way a true display cut does — that, plus the tighter
   tracking, is what gives a large heading authority. Scaling a text-optical
   face up just makes it big, not commanding. */
.hero__content h1,
.section h2 {
  font-weight: 700;
  font-variation-settings: "opsz" 144;
  letter-spacing: -0.025em;
  line-height: 0.98;
  text-wrap: balance;
}

p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--gold-ink);
  outline-offset: 3px;
}

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

/* Media is the exception to the standard reading-width container, but 1680px
   let the wide hero tile's 21:9 ratio blow up to ~720px tall on big monitors
   with only 4 tiles to balance it — capped tighter so the grid stays a
   sane size instead of dominating the section. */
.wrap--wide {
  max-width: 1180px;
}

/* Full-bleed ray texture for sections whose content is a flat, capped column
   with nothing else going on — without it, those sections read as empty on
   any screen wider than the container (the hero and Horarios band don't need
   this: their own photo/rays already fill the full section width). Navy rays
   at low opacity read as texture on the light section backgrounds without
   fighting the copy's contrast. */
.section--radiant {
  position: relative;
  overflow: hidden;
}

.section--radiant::before {
  content: "";
  position: absolute;
  inset: -25%;
  background: repeating-conic-gradient(from 0deg, rgba(11, 42, 74, 0.055) 0deg 1.1deg, transparent 1.1deg 6.5deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0.4) 45%, transparent 72%);
  mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0.4) 45%, transparent 72%);
  pointer-events: none;
}

.section--radiant > * {
  position: relative;
  z-index: 1;
}

/* -------------------------------------------------------------------------
   Utility strip
   ------------------------------------------------------------------------- */

.utility-strip {
  background: var(--navy-night);
  color: var(--sky-radiance-soft);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.utility-strip .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 1.75rem;
  padding-block: 0.1rem;
  text-align: center;
}

/* Tap targets: links carry their own 44px min height rather than the strip
   padding it, so the hit area matches the visible row. */
.utility-strip span,
.utility-strip a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.utility-strip a {
  text-decoration: none;
}

.utility-strip a:hover {
  color: var(--dove-white);
}

/* -------------------------------------------------------------------------
   Header
   ------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--navy-night);
  transition: box-shadow 0.35s var(--ease-standard);
}

.site-header.is-solid {
  box-shadow: var(--shadow-soft);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.85rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--dove-white);
}

.brand img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.brand-name em {
  display: block;
  font-style: normal;
  font-family: var(--font-inscription);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-crown);
  margin-top: 0.2rem;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.main-nav ul {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.main-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  color: var(--dove-white);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  opacity: 0.88;
  transition: opacity 0.2s var(--ease-standard);
}

.main-nav a:hover {
  opacity: 1;
  color: var(--gold-crown-soft);
}

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 0.2rem;
}

.lang-toggle button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 40px;
  border: 0;
  background: transparent;
  color: var(--dove-white);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  transition: background-color 0.2s var(--ease-standard), color 0.2s var(--ease-standard);
}

.lang-toggle button[aria-pressed="true"] {
  background: var(--gold-crown);
  color: var(--navy-night);
}

.nav-toggle {
  display: none;
  border: 0;
  background: transparent;
  width: 40px;
  height: 40px;
  padding: 0;
  position: relative;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  height: 2px;
  background: var(--dove-white);
  transition: transform 0.25s var(--ease-standard), opacity 0.25s var(--ease-standard);
}

.nav-toggle span {
  top: 19px;
}

.nav-toggle span::before {
  top: -7px;
}

.nav-toggle span::after {
  top: 7px;
}

.nav-toggle[aria-expanded="true"] span {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] span::before {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span::after {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 860px) {
  .nav-toggle {
    display: block;
  }

  .main-nav {
    position: fixed;
    inset: 0 0 0 0;
    top: var(--header-bottom, 68px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--navy-night);
    padding: 1rem var(--gutter) 1.5rem;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s var(--ease-standard), transform 0.25s var(--ease-standard);
  }

  .main-nav.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .main-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .main-nav li {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .main-nav a {
    display: block;
    padding: 0.85rem 0.1rem;
  }

  .lang-toggle {
    margin-top: 1rem;
    align-self: flex-start;
  }
}

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.85rem 1.7rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform 0.2s var(--ease-standard), background-color 0.2s var(--ease-standard),
    border-color 0.2s var(--ease-standard);
}

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

.btn--gold {
  background: var(--gold-crown);
  color: var(--navy-night);
}

.btn--gold:hover {
  background: var(--gold-crown-soft);
}

/* For use on the gold slab, where a gold button would vanish. */
.btn--navy {
  background: var(--navy-night);
  color: var(--dove-white);
}

.btn--navy:hover {
  background: var(--navy-ink);
}

.btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--dove-white);
}

.btn--ghost:hover {
  border-color: var(--dove-white);
  background: rgba(255, 255, 255, 0.08);
}

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 88svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--navy-night);
}

.hero__media {
  position: absolute;
  inset: 0;
}

/* Left in full colour deliberately — a greyscale/navy duotone was tried here
   and read as washed-out; the congregation's own colour is the warmth. */
.hero__media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Keeps the standing congregation and stage banner in frame at ultra-wide
     crops instead of centring on the carpet in the foreground. */
  object-position: center 35%;
  opacity: 0;
  animation:
    hero-ken-burns 26s ease-in-out infinite alternate,
    hero-crossfade 24s ease-in-out infinite;
}

/* Base/fallback state — the crossfade keyframes take over once animation
   actually runs, but this keeps the right photo showing if it doesn't. */
.hero__media-img.is-active {
  opacity: 1;
}

/* Three images share one 24s loop, each offset by a third of it so exactly
   one is always fading in while another fades out instead of both going
   dark. Add a fourth photo the same way and retune the offset to a quarter. */
.hero__media-img:nth-child(2) {
  animation-delay: 0s, -8s;
}

.hero__media-img:nth-child(3) {
  animation-delay: 0s, -16s;
}

@keyframes hero-ken-burns {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.09);
  }
}

@keyframes hero-crossfade {
  0%,
  40% {
    opacity: 1;
  }
  50%,
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* SIGNATURE — "la radiancia".
   The crest has a radiant burst behind the shield, and this element already
   existed to echo it, but at rgba(...,0.16) over 0.55 opacity it was
   mathematically invisible. Turned up and recoloured to the crest's own cyan
   it becomes the one bold device on the site, reused at exactly three moments
   (hero, #nosotros, #horarios). The radial mask keeps it a light *source*
   rather than wallpaper — bright at the origin, gone by the edges. */
/* Kept deliberately faint. Turning this up into a real light burst was tried
   and it streaked across the congregation's faces — over photography this
   device fights the picture. The radiance motif belongs on the flat colour
   sections (#nosotros, #horarios), not on top of a photo. */
.hero__rays {
  position: absolute;
  inset: -20%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(228, 167, 42, 0.16) 0deg 4deg,
    transparent 4deg 16deg
  );
  mix-blend-mode: screen;
  opacity: 0.55;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(7, 26, 46, 0.75) 0%,
    rgba(7, 26, 46, 0.55) 35%,
    rgba(7, 26, 46, 0.88) 100%
  );
}

.hero__content {
  position: relative;
  z-index: 2;
  color: var(--dove-white);
  padding-block: clamp(2.5rem, 8vh, 5rem);
  /* Widened from 46rem: at ultra-wide viewports the old width left most of
     the hero as bare photograph to the right of the text, which read as the
     copy being shoved off to one side rather than centred. */
  max-width: 56rem;
}

.hero__content h1 {
  color: var(--dove-white);
  /* Belt and braces over photography: the Ken Burns pan means no single word
     can be guaranteed a dark patch underneath for the whole animation. */
  text-shadow: 0 2px 24px rgba(7, 26, 46, 0.55);
}

/* The headline proper — "An Empire of faith" — carries the weight of the
   hero. Playfair's italic gives it the "inclined" quality that was asked
   for; nothing else on the site uses it, so it's kept to this one line. */
.hero__line1 {
  display: block;
  font-family: "Playfair Display", var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: var(--fs-display);
}

.hero__accent {
  color: var(--gold-crown-soft);
}

/* The follow-on line — "serving our community." — is deliberately quieter:
   smaller, lighter, and back in Fraunces (upright) so only line 1 carries
   the italic treatment. */
.hero__line2 {
  display: block;
  margin-top: 0.2em;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 350;
  font-size: clamp(1.5rem, 3.2vw, 2.9rem);
  color: var(--sky-radiance-soft);
}

.hero__subhead {
  margin-top: 1.5rem;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.65;
  color: var(--sky-radiance-soft);
  max-width: 40rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.75rem;
  margin-top: 2.25rem;
}

.hero__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  color: var(--dove-white);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  transition: border-color 0.2s var(--ease-standard), color 0.2s var(--ease-standard);
}

.hero__link span:last-child {
  transition: transform 0.2s var(--ease-standard);
}

.hero__link:hover {
  color: var(--gold-crown-soft);
  border-color: var(--gold-crown-soft);
}

.hero__link:hover span:last-child {
  transform: translateX(3px);
}

/* Below 640px the source photo (1024x682, landscape) has to lose roughly
   two-thirds of its width to fill a full-height portrait hero via
   object-fit: cover — there's no higher-res original to crop from instead.
   Rather than crop people out of the group photo, mobile drops the
   full-bleed background treatment entirely: text sits on flat navy, and the
   photo becomes a normal boxed image below the content, shown in full. */
@media (max-width: 640px) {
  .hero {
    flex-direction: column;
    align-items: stretch;
    min-height: auto;
    padding-bottom: clamp(2rem, 9vw, 3rem);
  }

  .hero__content {
    order: 1;
  }

  /* Sized (inset:-20%, scale via vw) for the tall full-bleed desktop hero —
     against the short, content-hugging box the mobile hero becomes now, it
     breaks rather than scales. Dropped rather than re-tuned. */
  .hero__rays {
    display: none;
  }

  /* Existed only to keep text legible over the photo; with the photo moved
     out of the background there's nothing left for it to darken. */
  .hero__scrim {
    display: none;
  }

  /* aspect-ratio gives the box a fixed height so the three photos can go back
     to being absolutely stacked inside it (like desktop) instead of one static
     image in document flow — that's what makes the crossfade below possible. */
  .hero__media {
    order: 2;
    position: relative;
    inset: auto;
    margin: 0.5rem var(--gutter) 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lift);
    aspect-ratio: 4 / 3;
  }

  /* Same crossfade + Ken Burns as desktop, just contained in a moderate 4:3
     box instead of full-bleed — these three photos are all close enough to
     4:3 already (4:3, 3:2, 16:9) that object-fit: cover here only trims
     edges, not the aggressive crop a full-height mobile hero would force. */
  .hero__media-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
  }
}

/* -------------------------------------------------------------------------
   Section rhythm + shared type
   ------------------------------------------------------------------------- */

.section {
  padding-block: clamp(4rem, 10vw, 7rem);
}

/* The header is sticky, so a jump to #horarios or #galeria used to land with the
   section's first line tucked underneath it. --header-h is set by main.js. */
.section,
.hero {
  scroll-margin-top: calc(var(--header-h, 68px) + 1rem);
}

.section h2 {
  font-size: var(--fs-section);
  color: var(--navy-ink);
  margin-top: 0.6rem;
  max-width: 18ch;
}

/* -------------------------------------------------------------------------
   Quiénes somos
   ------------------------------------------------------------------------- */

/* The loud one. Scrolling out of the dark hero into a full field of the
   crest's own cyan is the moment the site stops reading as an off-white
   document. Previously this section was ivory with the crest shrunk to 110px
   inside a white rounded card — the church's best asset, treated as a thumbnail. */
.about {
  position: relative;
  overflow: hidden;
  background: var(--sky-blaze);
  color: var(--navy-night);
}

/* SIGNATURE — "la radiancia", second of three appearances. Over flat colour
   (unlike over the hero photo) the burst can be a genuine light source. It is
   centred on the crest so the crest is visibly what the light comes from. */
.about__radiance {
  position: absolute;
  top: 50%;
  left: clamp(0.5rem, 2vw, 2rem);
  /* Same width and offset as .about__crest, then scaled up. `scale` is applied
     about the element's own centre, so the burst stays locked to the crest's
     centre at every viewport width — the crest itself then covers the point
     where the rays converge. Sizing this independently left the convergence
     point exposed below the crest, which read as an accident. */
  width: clamp(20rem, 44vw, 48rem);
  aspect-ratio: 1;
  translate: 0 -50%;
  scale: 2.6;
  pointer-events: none;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 255, 255, 0.55) 0deg 1.1deg,
    transparent 1.1deg 6.5deg
  );
  -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0.45) 30%, transparent 60%);
  mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0.45) 30%, transparent 60%);
  opacity: 0.45;
}

/* Large but fully on-screen — an earlier version deliberately bled this off
   the left edge for scale, but a cropped ring/shield reads as a bug, not
   drama, so it now stays clear of both the viewport edge and the text
   column at every width from 960px up. border-radius is load-bearing:
   crest-800.png is RGB with no alpha, so it ships with a solid white square
   behind the artwork. */
.about__crest {
  position: absolute;
  top: 50%;
  left: clamp(0.5rem, 2vw, 2rem);
  width: clamp(20rem, 44vw, 48rem);
  aspect-ratio: 1;
  translate: 0 -50%;
  pointer-events: none;
}

/* border-radius is load-bearing: crest-800.png is RGB with no alpha channel,
   so it ships with a solid white square behind the artwork. */
.about__crest img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.about .wrap {
  position: relative;
}

.about__grid {
  display: grid;
}

/* Pushed to the right half; the crest owns the left. */
.about__text {
  justify-self: end;
  max-width: 34rem;
}

/* Body copy here is navy, not the usual #33465c — that slate only reaches
   3.5:1 on --sky-blaze and fails. See the contrast rule in :root. */
.about__text p {
  margin-top: 1.1rem;
  color: var(--navy-ink);
  font-size: 1.02rem;
  line-height: 1.75;
}

/* Overrides .section h2's clamp(2.5rem, 6vw, 4.75rem) and 18ch cap — at that
   scale the EN copy ("A family that preaches and serves") broke across three
   lines inside the 34rem .about__text column. This heading is shorter and
   needs to hold one line instead of reading as a display slab. */
.about h2 {
  color: var(--navy-night);
  font-size: clamp(1.65rem, 2.4vw, 2.15rem);
  max-width: none;
}

.about__founded {
  /* Sized to its text, not the full block width — it's a <p>, and the
     .hl-sweep background below would otherwise paint edge-to-edge instead
     of hugging just "Founded in 2019" like it does on the inline <span>
     highlights elsewhere in this section. */
  display: inline-block;
  margin-top: 0.6rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--gold-ink);
}

/* Highlighter-marker sweep, left edge to right. A painted background instead
   of a real element behind the text on purpose — the pastor-bio phrase is
   long enough to wrap on a narrow phone, and box-decoration-break: clone
   redraws the sweep per line fragment instead of one box misplaced across
   a line break, which an absolutely-positioned bar can't do cleanly.
   js/gsap-motion.js adds .is-swept via ScrollTrigger; without JS the sweep
   just never appears — the text itself was never hidden, so nothing is
   lost, only the accent. rgba mirrors --gold-crown (#e4a72a) — the rest of
   this file hardcodes its translucent colours the same way rather than
   using color-mix(). */
.hl-sweep {
  background-image: linear-gradient(rgba(228, 167, 42, 0.62), rgba(228, 167, 42, 0.62));
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 0% 100%;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0.03em 0.2em;
  margin: 0 -0.2em;
  border-radius: 3px;
  transition: background-size 0.7s var(--ease-standard);
}

.hl-sweep.is-swept {
  background-size: 100% 100%;
}

/* A real photo earns its own card instead of another border-top footnote
   row — two of those stacked would read as the same device repeated. */
.pastor-note {
  margin-top: 2.25rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.1rem;
  background: var(--dove-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
}

.pastor-note__photo {
  width: 4.75rem;
  height: 4.75rem;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
}

.pastor-note__names {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--navy-night);
}

.pastor-note__bio {
  margin-top: 0.35rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: #33465c;
}

@media (max-width: 480px) {
  .pastor-note {
    flex-direction: column;
    align-items: flex-start;
  }
}

.crest-note {
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(7, 26, 46, 0.28);
}

.crest-note__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--navy-night);
}

.crest-note__cite {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-inscription);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-ink);
}

.crest-note__def {
  display: block;
  margin-top: 0.85rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--navy-ink);
}

/* Below this the crest has no room to bleed without colliding with the copy,
   so it becomes a centred watermark behind the text instead. */
@media (max-width: 960px) {
  .about__crest {
    /* Was top:0 with a -10% upward translate, which pushed the top of the
       crest above the section's own top edge — .about's overflow:hidden then
       sliced off the ring text right at the hero/about seam. Starting fully
       inside the section keeps the whole ring visible. */
    top: 2rem;
    left: 50%;
    width: min(28rem, 88%);
    translate: -50% 0;
    /* 0.16 left the crest's engraved ring text legible enough to run straight
       through the headline. The watermark should read as texture, not as a
       second set of words competing with the copy on top of it. */
    opacity: 0.09;
  }

  /* Same reason — the radiance and the watermark were stacking behind the same
     paragraphs, and together they were louder than either alone. */
  .about__radiance {
    opacity: 0.25;
  }

  .about__text {
    justify-self: stretch;
    max-width: none;
  }
}

/* -------------------------------------------------------------------------
   Tu visita (numbered walkthrough)
   ------------------------------------------------------------------------- */

.section--tint {
  background: var(--sky-radiance-soft);
}

/* Centred only for this walkthrough — a four-across step grid reads as
   unbalanced under text pinned to one edge. */
#tu-visita h2 {
  text-align: center;
  max-width: none;
}

.section__intro {
  margin-top: 0.85rem;
  font-size: 1.05rem;
  color: #33465c;
  max-width: 34rem;
}

#tu-visita .section__intro {
  margin-inline: auto;
  text-align: center;
}

/* Experiment: a real photo instead of the ray texture, per feedback that the
   rays were repeating too often across sections. Ministración photo — it's
   literally the last step in the walkthrough below. Dark scrim for contrast,
   same navy the rest of the site's dark sections already use. */
#tu-visita {
  position: relative;
  background: linear-gradient(180deg, rgba(7, 26, 46, 0.88), rgba(7, 26, 46, 0.92)),
    url("../assets/img/ministracion.jpg") center 25% / cover no-repeat;
}

#tu-visita h2 {
  color: var(--dove-white);
}

#tu-visita .section__intro {
  color: rgba(255, 255, 255, 0.82);
}

#tu-visita .step h3 {
  color: var(--dove-white);
}

#tu-visita .step p {
  color: rgba(255, 255, 255, 0.78);
}

#tu-visita .steps::before {
  background: rgba(228, 167, 42, 0.45);
}

/* Flips the seal to solid gold-on-navy instead of navy-on-tint — the tint
   the original halo was matching no longer exists now that the background
   is a photo, so the halo trick is dropped rather than faked. */
#tu-visita .step__num {
  background: var(--gold-crown);
  color: var(--navy-night);
  border: none;
  box-shadow: none;
}

/* One continuous rule behind all four seals, rather than a per-item gradient
   that faded out mid-span and left the last step visibly unconnected. */
.steps {
  position: relative;
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
}

.steps::before {
  content: "";
  position: absolute;
  top: 1.9rem;
  /* Stops at the centre of the first and last seal instead of running out to
     the container edges, so the line reads as joining them. */
  left: calc(12.5% - 0.3125rem);
  right: calc(12.5% - 0.3125rem);
  height: 1px;
  background: rgba(142, 98, 16, 0.35);
}

.step {
  position: relative;
  padding-top: 0;
}

.step__num {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.8rem;
  height: 3.8rem;
  margin-inline: auto;
  border-radius: 50%;
  background: var(--navy-ink);
  color: var(--gold-crown-soft);
  font-family: var(--font-inscription);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  /* Same gold ring as .badge-seal ("5 años de servicio") — borrows a motif
     already established elsewhere on the page instead of inventing a new one. */
  border: 1.5px solid var(--gold-crown);
  /* Rings the seal in the section's own background so the continuous rule
     appears to pass behind the disc rather than collide with it. The ring
     border above eats into that gap, so the halo widens to compensate. */
  box-shadow: 0 0 0 0.4rem var(--sky-radiance-soft);
}

.step h3 {
  margin-top: 1.1rem;
  text-align: center;
  font-size: 1.2rem;
  color: var(--navy-ink);
}

.step p {
  margin-top: 0.6rem;
  text-align: center;
  font-size: 0.92rem;
  line-height: 1.6;
  color: #33465c;
}

@media (max-width: 860px) {
  .steps {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }

  .steps::before {
    display: none;
  }
}

/* -------------------------------------------------------------------------
   Horarios de servicio
   ------------------------------------------------------------------------- */

.schedule-band {
  background: var(--navy-night);
  color: var(--dove-white);
  position: relative;
  overflow: hidden;
}

.schedule-band::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: repeating-conic-gradient(from 0deg, rgba(228, 167, 42, 0.1) 0deg 4deg, transparent 4deg 16deg);
  mix-blend-mode: screen;
  opacity: 0.4;
  pointer-events: none;
}

.schedule-band .wrap {
  position: relative;
}

.schedule-band h2 {
  color: var(--dove-white);
}

.schedule-band .section__intro {
  color: var(--sky-radiance-soft);
}

/* -------------------------------------------------------------------------
   Misiones — sits right after Horarios, a dark ledger band, and right
   before Galería, a plain white section. .section--tint (freed up once
   Ministerios was cut) breaks up what would otherwise be two dark sections
   in a row. No ray overlay — like Galería, the photo grid itself carries
   the visual interest.
   ------------------------------------------------------------------------- */

/* Same fix as #tu-visita/#galería: a lone left-pinned heading above a
   symmetric photo grid leaves the whole right side of wide screens empty. */
#misiones h2 {
  text-align: center;
  max-width: none;
}

#misiones .section__intro {
  margin-inline: auto;
  text-align: center;
}

.ledger {
  margin-top: 3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.ledger__row {
  display: flex;
  align-items: baseline;
  gap: 1.75rem;
  padding: 1.85rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  transition: padding-left 0.25s var(--ease-standard);
}

.ledger__row:hover {
  padding-left: 0.6rem;
}

.ledger__day {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  width: 9rem;
  flex-shrink: 0;
}

.ledger__desc {
  flex: 1;
  color: var(--sky-radiance-soft);
  font-size: 0.98rem;
}

.ledger__time {
  font-family: var(--font-inscription);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--gold-crown-soft);
  font-variant-numeric: tabular-nums;
}

.ledger__row--gold .ledger__day {
  color: var(--gold-crown-soft);
}

@media (max-width: 560px) {
  .ledger__row {
    flex-wrap: wrap;
  }

  .ledger__day {
    width: auto;
  }

  .ledger__time {
    width: 100%;
    order: 3;
  }
}

/* Sits on the same dark band as the ledger above it — a white card here
   (like the old cell-note) reads as a box pasted onto the section instead
   of part of it, so this uses the band's own dove-white/sky-radiance text
   colors directly rather than a light card floating on a dark background. */
.van-note {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.van-note__photo {
  width: 10rem;
  aspect-ratio: 3 / 2;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.van-note__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dove-white);
}

.van-note__desc {
  margin-top: 0.35rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--sky-radiance-soft);
}

@media (max-width: 480px) {
  .van-note {
    flex-direction: column;
    align-items: flex-start;
  }

  .van-note__photo {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
}

/* -------------------------------------------------------------------------
   Galería
   ------------------------------------------------------------------------- */

/* auto-fit + minmax over a fixed repeat(3, 1fr): with exactly 4 tiles today
   (1 wide + 3 video) a fixed 4-up grid at ultra-wide leaves one orphaned empty
   cell in the last row. auto-fit reflows to however many columns actually fit,
   so it stays correct both today and once more tiles land — more real photos
   filling the width beats a background texture in the one section whose job
   is showing the actual asset. */
/* Same fix as #tu-visita/#misiones: a lone left-pinned heading above a
   symmetric photo grid leaves the whole right side empty on wide screens. */
#galeria h2 {
  text-align: center;
  max-width: none;
}

#galeria .section__intro {
  margin-inline: auto;
  text-align: center;
}

/* Drifts on its own via js/main.js nudging scrollLeft on a requestAnimationFrame
   loop — not a CSS transform animation — specifically so hovering can hand
   control to REAL native scrolling (wheel, trackpad, touch drag) instead of
   just freezing a frame. Each photo exists once in the DOM (no cloned second
   copy); the script bounces scrollLeft between the two ends instead of
   wrapping, so there's a brief pause-and-reverse at each end rather than an
   invisible seam. */
.marquee {
  margin-top: 3.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}

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

/* Tighter gap between the two rows than the 3.5rem above the first one —
   they read as a pair (inside the building, then outside/beach), not as two
   independent sections. */
.marquee + .marquee {
  margin-top: 1.1rem;
}

.marquee__track {
  display: flex;
  width: max-content;
  gap: 1.1rem;
}

/* Sized specifically so the current photo counts (3 in the first row, 4 in
   the second) are wider than the row can ever be at desktop/tablet widths —
   there's no cloned second copy anymore (see index.html), so if the real
   tiles don't overflow the container there's nothing left for main.js to
   auto-scroll at all. 16rem stopped clearing that bar once the clones were
   removed; 21rem clears it with real margin on both rows. */
.marquee__tile {
  position: relative;
  flex: 0 0 auto;
  height: 21rem;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--navy-night);
}

.marquee__tile--landscape {
  aspect-ratio: 4 / 3;
}

.marquee__tile--portrait {
  aspect-ratio: 3 / 4;
}

.marquee__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 640px) {
  .marquee__tile {
    height: 11.5rem;
  }
}

.gallery {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: 1.25rem;
}

/* Narrower floor than the base .gallery rule, scoped to #galeria specifically
   — this is the only .gallery grid with 4 tiles that need to fit one row
   (the video row). #misiones's own .gallery reuses the base class for a
   6-photo grid and must NOT be affected by this. */
#galeria .gallery {
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
}

/* The white 0.4rem "photo frame" plus a heavy drop shadow read as a 2014
   lightbox gallery. The media is the client's best asset — let it be the edge. */
.gallery__tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--navy-night);
}

.gallery__tile img,
.gallery__tile video {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--navy-night);
  display: block;
}


/* Wraps the photo in an unstyled <button> so tapping it opens the lightbox —
   descendant selectors above still reach the <img> through it. */
.gallery__expand {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.gallery__expand-badge {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--gold-crown);
  color: var(--navy-night);
  box-shadow: 0 10px 30px -8px rgba(7, 26, 46, 0.7);
  transition: transform 0.25s var(--ease-standard), background-color 0.25s var(--ease-standard);
}

.gallery__expand:hover .gallery__expand-badge {
  transform: scale(1.08);
  background: var(--gold-crown-soft);
}

.gallery__expand-badge svg {
  width: 18px;
  height: 18px;
}

/* ---- Click-to-play video cards --------------------------------------------
   .is-armed is added by main.js only once it has confirmed it can run, so the
   native <video controls> stays fully usable if the script never executes. */
.gallery__tile--video.is-armed video {
  pointer-events: none;
}

.gallery__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: linear-gradient(180deg, rgba(7, 26, 46, 0.1) 0%, rgba(7, 26, 46, 0.45) 100%);
  transition: opacity 0.3s var(--ease-standard);
}

.gallery__play-disc {
  display: grid;
  place-items: center;
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 50%;
  background: var(--gold-crown);
  color: var(--navy-night);
  box-shadow: 0 10px 30px -8px rgba(7, 26, 46, 0.7);
  transition: transform 0.25s var(--ease-standard), background-color 0.25s var(--ease-standard);
}

.gallery__play:hover .gallery__play-disc {
  transform: scale(1.08);
  background: var(--gold-crown-soft);
}

.gallery__play-disc svg {
  width: 22px;
  height: 22px;
  /* Nudge the triangle so its optical centre sits on the disc's centre. */
  margin-left: 3px;
}

@media (max-width: 720px) {
  .gallery {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------------------
   Lightbox — the gallery photo and video tiles both expand into this instead
   of playing small and inline. Empty in the markup until js/main.js fills
   and opens it, so it never exists as a blocking overlay if that script
   fails; the tile's own <img>/<video> is the fallback either way.
   ------------------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 5vw, 3rem);
}

.lightbox[hidden] {
  display: none;
}

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(7, 26, 46, 0.92);
  cursor: pointer;
}

/* No width:100% here — that forced the stage to always claim the full 64rem
   even for a narrow portrait photo, which is what pushed the old fixed-width
   image rule below into distorting things. Left to shrink-to-fit its child,
   the stage (and the image inside it) centers correctly via .lightbox's own
   flex centering regardless of the media's actual size. */
.lightbox__stage {
  position: relative;
  z-index: 1;
  max-width: 64rem;
  max-height: 100%;
}

/* width: 100% + max-height with no height:auto meant a tall image got its
   height clamped by max-height while width stayed forced at 100% — squishing
   it. max-width/max-height with width/height: auto instead lets the browser
   scale the real image down to fit both bounds without ever distorting it. */
.lightbox__stage video,
.lightbox__stage img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100svh - 6rem);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
  background: var(--navy-night);
}

/* Pinned to the lightbox overlay's own corner, not the stage — a tall photo
   leaves no room for a button sitting above it, and it ended up hidden
   behind the sticky header. The viewport corner is always clear. */
.lightbox__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  background: rgba(7, 26, 46, 0.6);
  color: var(--dove-white);
  cursor: pointer;
  transition: border-color 0.2s var(--ease-standard), color 0.2s var(--ease-standard);
}

.lightbox__close:hover {
  border-color: var(--gold-crown-soft);
  color: var(--gold-crown-soft);
}

.lightbox__close svg {
  width: 18px;
  height: 18px;
}

/* Prevents the page behind the lightbox from scrolling while it's open. */
body.lightbox-open {
  overflow: hidden;
}

/* -------------------------------------------------------------------------
   Comparte tu testimonio
   ------------------------------------------------------------------------- */

/* Was a 34rem centred island floating in a pale field — the least present thing
   on the page, for the one section that is actually asking the visitor to do
   something. Now a solid gold slab that owns the full container width. */
.share-story {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem clamp(2rem, 5vw, 4rem);
  padding: clamp(2.5rem, 5vw, 3.75rem) clamp(1.75rem, 4vw, 3.5rem);
  background: var(--gold-crown);
  border-radius: var(--radius-lg);
  color: var(--navy-night);
}

.share-story__body {
  flex: 1 1 26rem;
}

.share-story h2 {
  color: var(--navy-night);
  max-width: 16ch;
}

.share-story p {
  margin-top: 1.1rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--navy-ink);
  max-width: 40ch;
}

.share-story .btn {
  flex-shrink: 0;
}

/* -------------------------------------------------------------------------
   Visítanos
   ------------------------------------------------------------------------- */

.wrap--narrow {
  max-width: 46rem;
}

.visit__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

/* This column is narrower than the full-width sections .section h2 was sized
   for, so "We're expecting you" hit the shared heading's 4.75rem ceiling and
   wrapped to two lines — nearly 2x the height a one-line heading needs, which
   threw off the whole section's proportions. Same min and slope as the
   shared rule (so small/medium screens are untouched), just a lower ceiling
   so wide screens stop before it wraps. */
.visit__info h2 {
  font-size: clamp(2.5rem, 6vw, 4.1rem);
}

.visit__facts {
  margin: 2rem 0 0;
  display: grid;
  gap: 1.1rem;
}

.visit__facts dt {
  font-family: var(--font-inscription);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.visit__facts dd {
  margin: 0.2rem 0 0;
  font-size: 1.02rem;
  color: var(--navy-ink);
}

.visit__facts a {
  text-decoration: none;
}

.visit__facts a:hover {
  text-decoration: underline;
}

.visit__map {
  margin-top: 2.25rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}

.visit__map iframe {
  width: 100%;
  /* Was 280px against a form column that ran considerably taller, which left a
     conspicuous empty block at the bottom of the section. */
  height: 340px;
  border: 0;
  display: block;
}

.visit__form {
  background: var(--dove-white);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 4vw, 2.75rem);
  box-shadow: var(--shadow-lift);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  /* .visit__grid uses align-items: start so the map (visit__info's tallest
     child) can size itself instead of being stretched to match the form. That
     left the shorter form pinned to the top of a much taller row, with a
     conspicuous empty gap below it. Centering it in the row is the fix that
     doesn't also stretch the map to some arbitrary height. */
  align-self: center;
}

.visit__form h3 {
  font-size: 1.3rem;
  color: var(--navy-ink);
  margin-bottom: 0.25rem;
}

.visit__form label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--navy-ink);
}

.visit__form-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.visit__form input,
.visit__form textarea {
  font: inherit;
  font-size: 0.95rem;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(11, 42, 74, 0.18);
  background: var(--ivory-paper);
  resize: vertical;
}

.visit__form input:focus,
.visit__form textarea:focus {
  outline: none;
  border-color: var(--gold-ink);
}

.visit__form .btn {
  margin-top: 0.5rem;
  border: none;
}

@media (max-width: 860px) {
  .visit__grid {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------------------
   FAQ
   ------------------------------------------------------------------------- */

/* Was .wrap--narrow: a 46rem column centred in a 1180px container, so the
   section spent a third of its width on nothing at either side. Pinning the
   heading left and running the questions in their own column uses the space
   and gives the section a left edge that matches every other section. */
.faq__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.faq__lede p {
  margin-top: 1.1rem;
  font-size: 1rem;
  line-height: 1.7;
  color: #33465c;
  max-width: 30ch;
}

@media (max-width: 860px) {
  .faq__grid {
    grid-template-columns: 1fr;
  }
}

.faq {
  border-top: 1px solid rgba(11, 42, 74, 0.14);
}

.faq__item {
  border-bottom: 1px solid rgba(11, 42, 74, 0.14);
  padding-block: 1.6rem;
}

.faq__item summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy-ink);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 44px;
  gap: 1.5rem;
  transition: color 0.2s var(--ease-standard);
}

.faq__item summary:hover {
  color: var(--gold-ink);
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::after {
  content: "+";
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--gold-ink);
  flex-shrink: 0;
  transition: transform 0.2s var(--ease-standard);
}

.faq__item[open] summary::after {
  transform: rotate(45deg);
}

.faq__item p {
  margin-top: 0.85rem;
  color: #33465c;
  line-height: 1.6;
  font-size: 0.95rem;
  overflow: hidden;
}

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */

.site-footer {
  background: var(--navy-night);
  color: rgba(255, 255, 255, 0.75);
  padding-top: clamp(3rem, 6vw, 4.5rem);
}

/* Was 1.2fr 1fr 1fr with only three columns of content, which left the entire
   right third of the footer empty — the most obviously unfinished area of the
   page. Four columns, and the follow block now carries real icon links. */
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.3fr 0.8fr 1.1fr 0.7fr;
  gap: 2.5rem;
  /* Without this the grid stretches every column to the tallest one, and the
     brand block (a centred flex row) floated to the middle while its
     neighbours started at the top. */
  align-items: start;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-block: 0.75rem;
}

.site-footer__brand img {
  border-radius: 50%;
}

.site-footer__brand p {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--dove-white);
  line-height: 1.4;
}

.site-footer__nav {
  display: flex;
  flex-direction: column;
}

.site-footer__nav a,
.site-footer__contact a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: 0.92rem;
}

.site-footer__nav a:hover,
.site-footer__contact a:hover {
  color: var(--gold-crown-soft);
}

.site-footer__contact {
  display: flex;
  flex-direction: column;
}

.site-footer__follow-label {
  font-family: var(--font-inscription);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-crown-soft);
  /* Line up with the first link in the neighbouring columns, which carry a
     44px min-height hit area rather than sitting on their own text box. */
  padding-block: 0.75rem;
}

.social {
  display: flex;
  gap: 0.6rem;
}

.social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.8);
  transition: border-color 0.2s var(--ease-standard), color 0.2s var(--ease-standard),
    background-color 0.2s var(--ease-standard);
}

.social__link svg {
  width: 19px;
  height: 19px;
}

.social__link:hover {
  color: var(--navy-night);
  background: var(--gold-crown);
  border-color: var(--gold-crown);
}

.site-footer__verse {
  margin-top: 2rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.98rem;
  color: var(--gold-crown-soft);
  text-align: center;
}

.site-footer__legal {
  margin-top: 1rem;
  padding-bottom: 2rem;
  text-align: center;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
}

@media (max-width: 960px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
  }
}

@media (max-width: 560px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}