/* ==========================================================================
   L.A. POPE, LLC — SECTION STYLES
   Mobile-first. Base rules target phones; media queries scale up.
   Breakpoints:  48em (768px) tablet   ·   64em (1024px) desktop
   ========================================================================== */


/* ==========================================================================
   HEADER  (contact top bar + primary navigation)
   ========================================================================== */
.header {
  position: fixed; /* overlay the hero instead of taking up flow space above it */
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0; /* flush at the very top; gains th©e floating gap once scrolled */
  background: transparent;
  transition: padding 0.3s ease;
}
/* At the top: one full-width, flush bar (like the original header) */
.header__inner {
  max-width: 100%;
  margin-inline: auto;
  border-radius: 0;
  background-color: var(--white);
  box-shadow: 0 6px 18px -16px rgba(15, 27, 45, 0.55);
  transition: max-width 0.3s ease, border-radius 0.3s ease, box-shadow 0.3s ease;
}

/* Once scrolled (JS adds .is-floating): morph into the soft floating card */
.header.is-floating { padding: 0.7rem var(--gutter) 0; }
.header.is-floating .header__inner {
  max-width: var(--container);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
}
.header.is-floating .top-bar { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.header.is-floating .nav { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* ---- Top contact bar ---------------------------------------------------- */
.top-bar {
  background-color: var(--navy);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8125rem;
  border-radius: 0; /* rounds only in the floating state (.is-floating) */
  transition: border-radius 0.3s ease;
}
.top-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1.25rem;
  padding-block: 0.55rem;
}
.top-bar__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem 1.25rem;
}
/* Email + phone text are too cramped on phones — hidden until the 48em breakpoint.
   The LinkedIn icon stays visible on all sizes. */
.top-bar__textitem { display: none; }
.top-bar__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: inherit;
  transition: color 0.2s ease;
}
.top-bar__link:hover { color: var(--accent); }
.top-bar__link svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  fill: var(--accent);
}
.top-bar__socials {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.top-bar__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.85);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.top-bar__social svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}
.top-bar__social:hover {
  background-color: var(--accent);
  color: var(--white);
}

/* ---- Navigation row ----------------------------------------------------- */
.nav {
  position: relative; /* anchor for the mobile dropdown */
  border-radius: 0; /* rounds only in the floating state (.is-floating) */
  transition: border-radius 0.3s ease;
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.85rem;
}
.nav__logo {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  line-height: 1.1;
}
.nav__logo .wordmark { font-size: inherit; }

/* Hamburger toggle (mobile only) */
.nav__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 9px;
}
.nav__toggle-bar {
  display: block;
  height: 2px;
  width: 100%;
  background-color: var(--ink);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.2s ease;
}
/* Animate bars into an X when the menu is open */
.nav.is-open .nav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__toggle-bar:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu: drops under the header.
   At the top (flush) it connects directly to the header — one continuous dropdown. */
.nav__menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 0; /* no gap at the top */
  background-color: var(--white);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg); /* square top → flows from the header */
  box-shadow: var(--shadow-float);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}
/* When floating (scrolled): detach into its own gapped, fully-rounded panel */
.header.is-floating .nav__menu {
  margin-top: 0.5rem;
  border-radius: var(--radius-lg);
}
.nav.is-open .nav__menu {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.nav__list {
  display: flex;
  flex-direction: column;
  padding: 0.5rem var(--gutter) 1.25rem;
}
.nav__link {
  display: block;
  padding: 0.85rem 0;
  font-family: var(--font-head); /* Libre Baskerville SemiBold — per client request */
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  transition: color 0.2s ease;
}
.nav__link:hover,
.nav__link.is-active { color: var(--accent); } /* is-active = current section (set by scrollspy) */
.nav__cta-item {
  margin-top: 1rem;
}
.nav__cta { width: 100%; }


/* ==========================================================================
   HERO  (full-bleed image + overlay text)
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 100svh; /* PHONES: full screen. svh avoids mobile browser-bar clipping.
                          Tablet & desktop heights are overridden in the media queries below. */
  /* offset the fixed header so the content centers in the VISIBLE area below it */
  /* padding-top: 6rem; */
  padding-bottom: 2rem;
  padding-top: 8rem;
  color: var(--white);
}
/* Full-bleed background image */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Dark overlay so the white text stays legible over any photo */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(15, 27, 45, 0.55) 0%,
    rgba(15, 27, 45, 0.65) 100%
  );
}

.hero__inner {
  max-width: 44rem; /* the 4-part wordmark + serif statement need a little more room */
  margin-inline: auto;
  text-align: center;
  padding-top: 5rem;
  padding-bottom: 2.5rem;
}

/* The hero statement IS the <h1> — display-scale serif, same size/font as the
   first version of the site. */
.hero__title {
  font-size: clamp(1.85rem, 6vw, 2.35rem);
  line-height: 1.12;
  color: var(--white);
}
/* Supporting hero paragraph: serif, italic, one step down from the title. */
.hero__text {
  margin-top: 1.5rem;
  font-family: var(--font-head);
  font-style: italic;
  font-size: clamp(1rem, 3.1vw, 1.35rem);
  line-height: 1.42;
  color: var(--white);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  margin-top: 1.75rem;
}
/* Ghost button variant tuned for the dark hero */
.hero__actions .btn--ghost {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.55);
}
.hero__actions .btn--ghost:hover {
  background-color: var(--white);
  color: var(--ink);
  border-color: var(--white);
}


/* ==========================================================================
   TABLET  (≥ 48em / 768px)
   ========================================================================== */
@media (min-width: 48em) {
  .top-bar__textitem { display: inline-flex; } /* bring email/phone back on tablet+ */
  .top-bar__inner {
    justify-content: flex-start;
  }
  .hero { min-height: 70svh; } /* TABLET: full svh is too tall in portrait — pull it in */
}


/* ==========================================================================
   DESKTOP  (≥ 64em / 1024px)  —  full horizontal nav, no hamburger
   ========================================================================== */
@media (min-width: 64em) {
  .nav__toggle { display: none; }

  .nav__menu {
    position: static;
    margin-top: 0;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .nav__list {
    flex-direction: row;
    align-items: center;
    gap: 2rem;
    padding: 0;
  }
  .nav__link {
    padding: 0.5rem 0;
    border-bottom: 2px solid transparent;
  }
  .nav__link:hover,
  .nav__link.is-active { border-bottom-color: var(--accent); }
  .nav__cta-item { margin-top: 0; margin-left: 0.75rem; }
  .nav__cta { width: auto; }

  .nav__logo { font-size: 1.5rem; }

  .hero { min-height: 100vh; } /* DESKTOP/LAPTOP: fill the short landscape screen (vh, not svh) */
}


/* ==========================================================================
   CURRENT PROGRAMS  (sits between the hero and the gallery)
   A card per in-development program: status pill, logo lockup, description,
   registration CTA, optional partner/sponsor logo row. The pale --surface wash
   separates the dark hero above from the white gallery below.
   Grid is 1 column and stays that way until there's a 2nd program.
   ========================================================================== */
.programs {
  position: relative;
  isolation: isolate;            /* keeps the wave layer under the content */
  padding-block: 4rem;
  background-color: var(--surface);
}
/* Wave-field backdrop: a seamless 1000x120 SVG tile (white ground + blue
   waves) laid over the --surface wash at 70% opacity. It lives on a
   pseudo-element so the section's text and cards stay fully opaque.
   To let more of the --surface tint through, delete the %3Crect .../%3E
   from the data URI below — the waves alone will sit on the wash. */
.programs::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 20%;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='120' viewBox='0 0 1000 120'%3E%3Crect fill='%23FFFFFF' width='1000' height='120'/%3E%3Cg fill='none' stroke='%232456C9' stroke-width='3.3' stroke-opacity='0.17'%3E%3Cpath d='M-500 75c0 0 125-30 250-30S0 75 0 75s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 45c0 0 125-30 250-30S0 45 0 45s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 105c0 0 125-30 250-30S0 105 0 105s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 15c0 0 125-30 250-30S0 15 0 15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500-15c0 0 125-30 250-30S0-15 0-15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 135c0 0 125-30 250-30S0 135 0 135s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-position: center top;
  background-size: 400px 120px;
}
.programs__header {
  text-align: center;
  margin-bottom: 2.25rem;
}
.programs__title {
  margin-top: 0.6rem;
  font-size: clamp(1.8rem, 5vw, 2.5rem);
}
.programs__text {
  max-width: 44rem;
  margin: 0.9rem auto 0;
  color: var(--ink-soft);
}
.programs__grid {
  display: grid;
  gap: 1.5rem;
  max-width: 56rem;
  margin-inline: auto;
}

.program-card {
  overflow: hidden;              /* clip the photo to the rounded corners */
  background-color: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  text-align: center;
}

/* --- Brand panel (was a photo banner) -----------------------------------
   The Acquire Local guidelines allow the white reverse mark only over photos or
   dark grounds, and forbid re-coloring, drop shadows and outlines. So the photo
   and its scrim are gone and the mark sits in its real colors on brand cream —
   which is also why there's no drop-shadow on the logo any more. */
.program-card__media {
  display: grid;
  place-items: center;           /* lockup sits dead centre of the panel */
  min-height: 21rem;
  padding: 3rem 1.5rem;
  text-align: center;
  background-color: var(--al-cream);
  border-bottom: 1px solid rgba(92, 31, 48, 0.12);
}
.program-card__media-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Status pill — "In Development", "Registration Open", "Sold Out" …
   Wine on cream now that the panel is light rather than a dark photo. */
.program-card__status {
  display: inline-block;
  padding: 0.3rem 0.85rem;
  border-radius: var(--radius-pill);
  background-color: rgba(92, 31, 48, 0.07);
  border: 1px solid rgba(92, 31, 48, 0.32);
  color: var(--al-wine);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Logo slot — wordmark over the gold rule over the tagline. This is the
   guidelines' sanctioned "wordmark + tagline" lockup; the storefront row lives
   further down the card, where the CTA used to be. */
.program-card__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1.75rem;
  width: 100%;
}
/* Wordmark stays artwork — it's Playfair Display Black, which the site doesn't
   load. Sized by width; the art is transparent, so it takes the cream ground. */
.program-card__logo-mark {
  display: block;
  width: 100%;
  height: auto;
  max-width: 30rem;
}
.program-card__logo-rule {
  width: 4.125rem;   /* 66 units at the tagline's scale */
  height: 0.25rem;
  margin-top: 1.1rem;
  overflow: visible;
}
/* Tagline as live text, not artwork: Poppins 500 tracked caps in navy is exactly
   what the guidelines call for, the site already loads Poppins, and real text
   stays crisp and wraps on a phone instead of shrinking to an illegible strip. */
.program-card__logo-tagline {
  margin-top: 0.9rem;
  max-width: 40rem;      /* wide enough to hold one line at desktop */
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(0.62rem, 1.9vw, 0.88rem);
  line-height: 1.7;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--al-navy);
}

/* --- Body --------------------------------------------------------------- */
.program-card__body { padding: 2rem 1.5rem; }
.program-card__text {
  max-width: 38rem;
  margin-inline: auto;
  color: var(--ink-soft);
}
.program-card__text + .program-card__text { margin-top: 1rem; }
.program-card__text strong { color: var(--ink); font-weight: 700; }
/* The brand line — italic so it reads as the tagline, not body copy. */
.program-card__text em {
  font-family: var(--font-head);
  font-style: italic;
  color: var(--ink);
}
/* Storefront row — stands where the "Sign up for Updates" button used to.
   Capped and centred rather than bled across the card so the shops stay at a
   sensible scale; the crop keeps them touching, per "one streetscape, not
   separate icons". */
.program-card__street {
  display: block;
  width: 100%;
  max-width: 38rem;
  height: auto;
  margin: 2.25rem auto 0;
}

/* Partner + sponsor contact — sits under the CTA, replacing the old logo
   marquee. Narrower and quieter than the body copy so the button still leads. */
.program-card__contact {
  max-width: 34rem;
  margin: 1.75rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.program-card__contact-text {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ink-soft);
}
.program-card__contact-text strong { color: var(--ink); }
.program-card__contact-text a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(36, 86, 201, 0.35);
}
.program-card__contact-text a:hover { border-bottom-color: currentColor; }

/* --- Programs: responsive -----------------------------------------------
   These MUST live after the base rules above. The shared TABLET/DESKTOP
   media blocks near the top of this file come earlier in the cascade, and
   since media queries add no specificity, anything put there would lose to
   the base declarations above. */
@media (min-width: 48em) {
  .program-card__media { min-height: 26rem; padding: 4rem 2.5rem; }
  .program-card__body  { padding: 2.5rem; }
}

@media (min-width: 64em) {
  .programs { padding-block: 5rem; }
  .program-card__media { padding: 5rem 3rem; }
  .program-card__body  { padding: 3rem; }
}


/* ==========================================================================
   GALLERY  (editorial mixed grid + filter tabs)
   Mobile-first: 1 column → 2 (36em) → 3 (62em).
   ========================================================================== */
.gallery {
  padding-block: 4rem;
  background-color: var(--bg);
}
.gallery__header {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.gallery__title {
  margin-top: 0.75rem;
  font-size: clamp(1.8rem, 5vw, 2.5rem);
}
.gallery__text {
  margin-top: 0.75rem;
  max-width: 40rem;
  color: var(--ink-soft);
}

/* Filter tabs */
.gallery__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.gallery__filter {
  padding: 0.5rem 1.1rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.gallery__filter:hover {
  color: var(--ink);
  border-color: var(--ink);
}
.gallery__filter.is-active {
  color: var(--white);
  background-color: var(--navy);
  border-color: var(--navy);
}

/* Mobile hint (only visible while the grid is a swipe carousel) */
.gallery__hint {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.gallery__hint svg {
  width: 18px;
  height: 18px;
}

/* Grid — on phones this is a horizontal SWIPE CAROUSEL (saves vertical space);
   it becomes a real multi-column grid at 36em and up. */
.gallery__grid {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  /* stay within the page gutter so the first card lines up with the heading
     and isn't tight against the screen edge */
  scroll-padding-left: 0;
}
.gallery__grid::-webkit-scrollbar { display: none; } /* Chrome/Safari */

.gallery__item {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background-color: var(--surface); /* placeholder tint while the image loads */
  aspect-ratio: 4 / 5;
  flex: 0 0 80%;          /* carousel: ~1 tile wide, next one peeks in */
  scroll-snap-align: start;
}
.gallery__item picture {
  display: block;
  width: 100%;
  height: 100%; /* stretch the wrapper to the tile so object-fit: cover works */
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.gallery__item:hover img { transform: scale(1.04); }
.gallery__item.is-hidden { display: none; }

/* The clickable layer inside each tile (a <button> for photos, an <a> for videos) */
.gallery__open {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: inherit;
}

/* Hover/focus overlay: tint + icon + label */
.gallery__hover {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background-color: transparent;
  color: var(--white);
  pointer-events: none;
  transition: background-color 0.3s ease;
}
.gallery__open:hover .gallery__hover,
.gallery__open:focus-visible .gallery__hover {
  background-color: rgba(15, 27, 45, 0.55);
}

.gallery__hover-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background-color: rgba(255, 255, 255, 0.14);
  opacity: 0;
  transition: opacity 1s ease, transform 1s ease;
}
.gallery__hover-icon svg { width: 24px; height: 24px; fill: var(--white); }
.gallery__open:hover .gallery__hover-icon,
.gallery__open:focus-visible .gallery__hover-icon { opacity: 1; background-color: var(--accent);}

/* Video tiles: the play button stays visible even without hover (also for touch) */
.gallery__item--video .gallery__hover-icon {
  opacity: 1;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}
.gallery__item--video .gallery__hover-icon svg { margin-left: 3px; } /* optically center the triangle */

.gallery__hover-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  opacity: 0;
  transition: opacity 1s ease;
}
.gallery__open:hover .gallery__hover-label,
.gallery__open:focus-visible .gallery__hover-label { opacity: 1; }

/* Persistent event-name caption — on photo AND video tiles (so they're not
   "random"). Photo tiles wrap it in a <button>, which the UA centers, so the
   alignment has to be stated explicitly or the two types won't match. */
.gallery__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2; /* above the hover tint */
  padding: 1.75rem 0.95rem 0.85rem;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.25;
  color: var(--white);
  background: linear-gradient(to top,
    rgba(15, 27, 45, 0.9) 0%,
    rgba(15, 27, 45, 0.5) 45%,
    rgba(15, 27, 45, 0) 100%);
  pointer-events: none;
}
/* Second caption line — the agency that produced the work. Lighter and a step
   down in size so the title still reads first. */
.gallery__caption-agency {
  display: block;
  margin-top: 0.2rem;
  font-weight: 500;
  font-size: 0.78rem;
  line-height: 1.3;
  opacity: 0.88;
}

/* ---- Lightbox (enlarged photo) ---- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background-color: rgba(9, 15, 25, 0.88);
}
.lightbox.is-open { display: flex; }
.lightbox__img {
  max-width: min(1000px, 92vw);
  max-height: 90vh;
  width: auto;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
}
.lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.16);
  transition: background-color 0.2s ease;
}
.lightbox__close:hover { background-color: rgba(255, 255, 255, 0.3); }
.lightbox__close svg { width: 22px; height: 22px; fill: var(--white); }

@media (min-width: 36em) {
  /* Back to a normal grid: undo all the carousel-only rules */
  .gallery__hint { display: none; }
  .gallery__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
  .gallery__item { flex: initial; }
}
@media (min-width: 62em) {
  .gallery { padding-block: 6rem; }
  .gallery__header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
  }
  .gallery__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
}


/* ==========================================================================
   SERVICES  (three cards: icon badge + tinted image + bullets)
   Mobile-first: 1 column → 3 columns (62em). Light-gray section so cards pop.
   ========================================================================== */
.services {
  padding-block: 4rem;
  background-color: var(--surface);
}
.services__header {
  max-width: 44rem;
  margin: 0 auto 3rem;
  text-align: center;
}
.services__title {
  margin-top: 0.75rem;
  font-size: clamp(1.8rem, 5vw, 2.5rem);
}
.services__text {
  margin-top: 0.75rem;
  color: var(--ink-soft);
}

.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.5rem 1.5rem; /* generous ROW gap so the icon badges never overlap the card above */
  margin-top: 2.5rem; /* room for the first row's badges */
}

/* ---- Card ---- */
.service-card {
  position: relative; /* overflow VISIBLE so the icon badge can stick out the top */
  display: flex;
  flex-direction: column;
  background-color: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-float);
}

/* Icon badge — centered, sticking up over the top edge of the image */
.service-card__icon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  background-color: var(--white);
  border-radius: 14px;
  box-shadow: 0 10px 22px -12px rgba(15, 27, 45, 0.45);
}
.service-card__icon svg {
  width: 32px;
  height: 32px;
  fill: var(--accent);
}

/* Image with on-brand navy → blue gradient tint */
.service-card__media {
  position: relative;
  overflow: hidden; /* clips the zoom-on-hover */
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  aspect-ratio: 3 / 2;
  background-color: var(--navy);
}
/* <picture> is inline by default, so height:100% on the img inside has nothing
   to resolve against and object-fit never gets a box to fill — an image whose
   aspect isn't already 3:2 falls short and lets the card's navy show through.
   Same fix as .marquee__item picture. */
.service-card__media picture {
  display: block;
  width: 100%;
  height: 100%;
}
.service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.service-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(15, 27, 45, 0.60) 0%,
    rgba(36, 86, 201, 0.35) 100%
  );
}
.service-card:hover .service-card__media img { transform: scale(1.08); }


/* Body */
.service-card__body {
  padding: 1.75rem 1.5rem 2rem;
}
/* "lapope // service" wordmark AS the card title (serif name, blue slash, sans tag) */
.service-card__wordmark {
  display: block;        /* override .wordmark inline-flex so a long tag can wrap */
  white-space: normal;
  font-size: 1.4rem;
  line-height: 1.25;
}
.service-card__wordmark .wordmark__slash { margin: 0 0.14em; }
.service-card__wordmark .wordmark__tag {
  font-size: 0.6em;
  letter-spacing: 0.04em;
  opacity: 0.82;
}

/* Kept only on Card 1 (B2B Event Marketing) — a subtitle under the wordmark */
.service-card__title {
  margin-top: 0.3rem;
  font-size: 1.05rem;
  color: var(--ink-soft);
}
.service-card__text {
  margin-top: 0.6rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.service-card__list {
  margin-top: 1.1rem;
  display: grid;
  gap: 0.55rem;
}
/* Nested sub-services (dash markers, indented) */
.service-card__sublist {
  margin-top: 0.5rem;
  margin-left: 1.6rem;
  display: grid;
  gap: 0.4rem;
}
.service-card__sublist li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.875rem;
  color: var(--ink-soft);
}
.service-card__sublist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 0.55rem;
  border-top: 2px solid var(--accent); /* dash */
}
.service-card__list li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.925rem;
  color: var(--ink);
}
.service-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.7rem;
  height: 0.4rem;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg); /* CSS checkmark */
}

/* Click-to-play video tile on the Voiceovers card. Deliberately mirrors the
   gallery's video items — persistent play button, label on hover, caption bar —
   so a visitor reads the two as the same kind of thing. Values match
   .gallery__hover-icon / .gallery__caption. */
.service-card__play {
  position: absolute;
  inset: 0;
  display: block;        /* no z-index: the poster keeps the card's navy tint,
                            like cards 1 and 2. Only the controls below lift
                            above .service-card__media::after. */
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
}
.service-card__play-icon {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background-color: rgba(255, 255, 255, 0.14);
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
  transition: background-color 0.3s ease;
}
.service-card__play-icon svg {
  width: 24px;
  height: 24px;
  fill: var(--white);
  margin-left: 3px;      /* optically centre the triangle */
}
.service-card__play:hover .service-card__play-icon,
.service-card__play:focus-visible .service-card__play-icon {
  background-color: var(--accent);
}
.service-card__play-label {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 46px));
  white-space: nowrap;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--white);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.service-card__play:hover .service-card__play-label,
.service-card__play:focus-visible .service-card__play-label {
  opacity: 1;
}
.service-card__play-caption {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.75rem 0.95rem 0.85rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.25;
  color: var(--white);
  background: linear-gradient(to top,
    rgba(15, 27, 45, 0.9) 0%,
    rgba(15, 27, 45, 0.5) 45%,
    rgba(15, 27, 45, 0) 100%);
  pointer-events: none;
}
/* Once the player is in, the card's gradient tint would sit on top of it. */
.service-card__media.is-playing::after { content: none; }
.service-card__media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* External link on the Voiceovers card */
.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.25rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--accent);
  transition: gap 0.2s ease, color 0.2s ease;
}
.service-card__link svg { width: 16px; height: 16px; }
.service-card__link:hover {
  color: var(--accent-dark);
  gap: 0.6rem;
}

/* TABLET / iPad (48em–62em): one full-width card per row reads far too wide
   here, so go to two columns. With three cards that leaves an odd one out —
   span it across both tracks and cap it at one column's width so it sits
   centred under the pair instead of stretching the full grid. */
@media (min-width: 48em) and (max-width: 61.999em) {
  .services__grid {
    grid-template-columns: repeat(2, 1fr);
    align-items: stretch;
    gap: 3.5rem 1.5rem;
  }
  .service-card:last-child {
    grid-column: 1 / -1;
    max-width: calc(50% - 0.75rem); /* half the grid minus half the column gap */
    margin-inline: auto;
  }
}

@media (min-width: 62em) {
  .services { padding-block: 6rem; }
  .services__grid {
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch; /* all cards match the tallest card's height */
    gap: 2rem;
    margin-top: 3rem;
  }
}


/* ==========================================================================
   AGENCY COLLABORATIONS  (infinite auto-scrolling logo marquee)
   Pure CSS: the track holds 2 copies of the logos and slides by 50% → seamless.
   ========================================================================== */
/* Shared blue→light wash spanning the agencies + about sections */
.soft-gradient {
  background: linear-gradient(180deg,
    #d3e2f6 0%,    /* blue vibe at the top (agencies) */
    #e6eff9 35%,
    #f5f9fe 70%,
    #ffffff 100%   /* faded to white by the bottom of about */
  );
}

.agencies {
  padding-block: 3.5rem;
  background: transparent; /* let the .soft-gradient wash show through */
  overflow: hidden;
}
.agencies__header {
  text-align: center;
  margin-bottom: 2.25rem;
}
.agencies__title {
  margin-top: 0.6rem;
  font-size: clamp(1.4rem, 4vw, 1.9rem);
}
.agencies__text {
  max-width: 48rem;
  margin: 0.9rem auto 0;
  color: var(--ink-soft);
}

/* Viewport with soft faded edges */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.marquee__track {
  display: flex;
  width: max-content;
  /* left → right. To reverse, swap the from/to translateX values below. */
  animation: marquee-scroll 40s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__item {
  flex: 0 0 auto;
  width: 160px;   /* uniform slot → no layout shift, tidy spacing */
  height: 90px;   /* tall enough that full logos are always visible */
  margin-inline: 1.5rem;
}
/* <picture> is inline by default — make it fill the slot so the img inside
   still sizes to the 160x90 tile rather than to its own intrinsic width. */
.marquee__item picture {
  display: block;
  width: 100%;
  height: 100%;
}
.marquee__item img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* scale the whole logo to fit — never crop */
}

@keyframes marquee-scroll {
  from { transform: translateX(-50%); } /* start on the 2nd copy … */
  to   { transform: translateX(0);    } /* … slide right to the 1st (left → right motion) */
}

/* Respect reduced-motion: stop the animation, wrap logos into a static centered row */
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    row-gap: 1rem;
  }
}

@media (min-width: 64em) {
  .agencies { padding-block: 4.5rem; }
  .marquee__item { width: 190px; height: 110px; margin-inline: 1.75rem; }
}


/* ==========================================================================
   ABOUT  (image left + offset decorative shape, text right)
   Mobile-first: stacked → two columns at 64em.
   ========================================================================== */
.about {
  padding-block: 4rem;
  background: transparent; /* sits on the shared .soft-gradient wash */
}
.about__inner {
  display: grid;
  gap: 3rem;
}

/* Media: the image plus a shape floating behind it */
.about__media {
  position: relative;
  /* room for the offset shape so it never causes horizontal scroll */
  margin-left: 1.25rem;
  margin-bottom: 1.25rem;
}
.about__shape {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--radius-lg);
  background-color: var(--accent);
  transform: translate(-1.25rem, 1.25rem); /* peek out to the bottom-left */
}
.about__img {
  position: relative;
  z-index: 1;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

/* Decorative arrow pointing to the photo — hidden on mobile (no room above the image) */
.about__arrow {
  display: none;
  /* bounce a few times (~1s), then hold still for ~3s, then repeat */
  animation: arrow-bounce 4s ease-in-out infinite;
}
.about__arrow svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Used by .about__arrow */
@keyframes arrow-bounce {
  0%   { transform: translateY(0); }
  6%   { transform: translateY(-14px); }
  12%  { transform: translateY(0); }
  18%  { transform: translateY(-9px); }
  25%  { transform: translateY(0); }
  100% { transform: translateY(0); } /* the ~3s pause */
}
@media (prefers-reduced-motion: reduce) {
  .about__arrow { animation: none; }
}
.about__img img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9; /* landscape frame to match the 1200×667 photo */
  object-fit: cover;
}

/* Body */
.about__title {
  margin-top: 0.6rem;
  font-size: clamp(1.9rem, 5vw, 2.6rem);
}
.about__text {
  margin-top: 1.1rem;
  color: var(--ink-soft);
}

@media (min-width: 64em) {
  .about { padding-block: 6rem; }
  .about__inner {
    grid-template-columns: 1fr 1.15fr;
    align-items: center;
    gap: 4.5rem;
  }
  .about__media { margin-bottom: 0; }

  /* Show the decorative arrow, hovering above-left, pointing down at the photo */
  .about__arrow {
    display: block;
    position: absolute;
    z-index: 3;
    top: -300px;
    left: 154px;
    width: 350px;
    pointer-events: none;
  }
}


/* ==========================================================================
   CONTACT  (two-panel card floating on a background image)
   Mobile-first: info + form stacked → side-by-side at 64em.
   ========================================================================== */
.contact {
  position: relative;
  isolation: isolate;
  padding-block: 4rem;
  overflow: hidden;
  background-color: var(--navy); /* fallback while the bg image loads */
}
.contact__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.contact__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Navy overlay so the white card pops and the image stays on-brand */
.contact::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(15, 27, 45, 0.72), rgba(15, 27, 45, 0.82));
}

/* The card */
.contact__card {
  max-width: 60rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  background-color: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}

/* Photo banner across the full width of the card */
.contact__photo {
  grid-column: 1 / -1;
  margin: 0;
}
.contact__photo picture { display: block; }
.contact__photo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---- Left: info ---- */
.contact__info {
  padding: 2rem 1.5rem;
}
.contact__title {
  font-size: clamp(1.6rem, 4vw, 2rem);
  margin-bottom: 1.25rem;
}
.info-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.info-card + .info-card { margin-top: 0.9rem; }
a.info-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
}
.info-card__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background-color: var(--accent);
}
.info-card__icon svg {
  width: 20px;
  height: 20px;
  fill: var(--white);
}
.info-card__meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.info-card__label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}
.info-card__value {
  font-size: 0.9rem;
  color: var(--ink-soft);
  word-break: break-word;
}

/* ---- Right: form ---- */
.contact__form {
  padding: 2rem 1.5rem;
  background-color: var(--surface);
}
.field + .field { margin-top: 1.1rem; }
.field label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--ink);
}
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0.8rem 1rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  background-color: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input::placeholder,
.field textarea::placeholder { color: #9aa2af; }

/* Select: strip the native chrome and draw our own dropdown arrow */
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a515c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 1.1rem;
}
.field select:invalid { color: #9aa2af; } /* grey out the "Select a project type" placeholder */

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.contact__submit {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.5rem;
}

/* Spam honeypot — hidden from everyone, including assistive tech. Only bots
   fill it in, and Formspree bins anything that arrives with it set. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Submit result, written by form.js. Hidden until there's something to say. */
.contact__status {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  border: 1px solid rgba(36, 86, 201, 0.25);
  background-color: rgba(36, 86, 201, 0.07);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink);
}
.contact__status.is-error {
  border-color: rgba(178, 44, 44, 0.3);
  background-color: rgba(178, 44, 44, 0.07);
}
/* Sending… state — make it read as busy rather than clickable. */
.contact__form button[disabled] {
  opacity: 0.65;
  cursor: progress;
}

@media (min-width: 64em) {
  .contact { padding-block: 6rem; }
  .contact__card { grid-template-columns: 0.9fr 1.1fr; }
  .contact__info { padding: 2.75rem 2.25rem; }
  .contact__form { padding: 2.75rem 2.25rem; }
}


/* ==========================================================================
   FOOTER
   Mobile-first: stacked → 4 columns at 64em. Navy, on-brand.
   ========================================================================== */
.footer {
  background-color: var(--navy);
  color: rgba(255, 255, 255, 0.72);
}
.footer__inner {
  display: grid;
  gap: 2.5rem;
  padding-block: 3.5rem 2.5rem;
}

/* Brand */
.footer__logo {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  color: var(--white);
}
.footer__logo .wordmark { color: var(--white); }
.footer__tagline {
  margin-top: 0.9rem;
  max-width: 24rem;
  font-size: 0.9rem;
  line-height: 1.7;
}
.footer__socials {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.3rem;
}
.footer__social {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.footer__social svg { width: 17px; height: 17px; fill: currentColor; }
.footer__social:hover {
  background-color: var(--accent);
  color: var(--white);
  transform: translateY(-2px);
}

/* Link columns */
.footer__heading {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--white);
  margin-bottom: 1.1rem;
}
.footer__links {
  display: grid;
  gap: 0.65rem;
}
.footer__link {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.92rem;
  transition: color 0.2s ease;
}
.footer__link:hover { color: var(--accent); }
.footer__muted { font-size: 0.92rem; }

/* Bottom bar */
.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.8rem;
}
.footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-block: 1.4rem;
}
.footer__credit a {
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.2s ease;
}
.footer__credit a:hover { color: var(--accent); }

@media (min-width: 48em) {
  .footer__inner {
    grid-template-columns: 1.6fr 1fr 1.4fr;
    gap: 3rem;
  }
  .footer__brand { grid-column: 1 / -1; } /* brand full-width row on tablet */
}
@media (min-width: 64em) {
  .footer__inner {
    grid-template-columns: 1.8fr 1fr 1.4fr 1.4fr;
    gap: 3.5rem;
    padding-block: 4.5rem 3rem;
  }
  .footer__brand { grid-column: auto; } /* brand becomes the first of 4 columns */
}


/* ==========================================================================
   SCROLL REVEAL  (fade + rise as each section enters view)
   Only active when JS is on (.js on <html>) AND motion is allowed. reveal.js
   adds .is-visible per section, staggered. No-JS / reduced-motion → all visible.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js .topper,
  .js .hero__title,
  .js .hero__text,
  .js .hero__actions,
  .js .programs__title,
  .js .programs__text,
  .js .program-card,
  .js .gallery__title,
  .js .gallery__text,
  .js .gallery__item,
  .js .services__title,
  .js .services__text,
  .js .service-card,
  .js .agencies__title,
  .js .agencies__text,
  .js .marquee,
  .js .about__media,
  .js .about__title,
  .js .about__text,
  .js .contact__title,
  .js .info-card,
  .js .contact__form,
  .js .footer__brand,
  .js .footer__col {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 2s ease, transform 2.5s ease;
  }
  .js .is-visible {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ==========================================================================
   BACK-TO-TOP BUTTON
   ========================================================================== */
.to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 900;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--accent);
  color: var(--white);
  box-shadow: var(--shadow-float);
  /* hidden until the user scrolls down (JS adds .is-visible) */
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, background-color 0.2s ease;
}
.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.to-top:hover {
  background-color: var(--accent-dark);
  transform: translateY(-3px);
}
.to-top svg { width: 22px; height: 22px; fill: currentColor; }

@media (min-width: 64em) {
  .to-top { right: 2rem; bottom: 2rem; width: 52px; height: 52px; }
}