/* ==========================================================================
   strengthinthecity.com mirror — block styles.
   BEM names deliberately match the original's Bricks component library
   (header-1, megamenu-1, testimonial-17, content-63, hero-71, feature-31,
   testimonial-45, faq-5, footer-12) so the two are comparable side by side.
   ========================================================================== */

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

html {
  font-size: 10px;               /* load-bearing: the whole token scale assumes 1rem = 10px */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg-body);
  color: var(--text-body);
  font-family: var(--poppins);
  font-size: var(--text-s);
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;            /* the mission-band illustrations bleed by design */
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 900; line-height: 1.2; }
p { margin: 0; }
/* height:auto is load-bearing. Without it an <img> carrying width/height
   attributes uses the attribute height and any aspect-ratio is ignored, which
   made two of three feature cards 683px instead of 478px. */
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
/* Safety net: an inline SVG with no intrinsic size inside a flex link will grow
   to fill the line. Every icon here is nominally 1.5-1.6rem, so default to that
   and let specific rules override. */
a > svg, button > svg { width: 1.6rem; height: 1.6rem; flex: 0 0 auto; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

.u-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Overlay textures. Part of the look, not artefacts — see SPEC. */
.film-grain-overlay { position: relative; }
.film-grain-overlay::after {
  content: ""; position: absolute; inset: 0; 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='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.animated-film-overlay { position: relative; }

/* Shared container. --max-screen-width is 1400px on the original. */
.container {
  width: 100%;
  max-width: var(--max-screen-width);
  margin-inline: auto;
  padding-inline: var(--space-m);
}
.container--wide { max-width: none; padding-inline: var(--space-m); }

/* ------------------------------------------------------- header-1-block */
.header-1-block {
  position: sticky; top: 0; z-index: 60;
  background: var(--secondary);
  padding-block: 1.902rem 1.358rem;    /* measured 19.02px / 13.58px */
}
.header-1-block__inner {
  display: flex; align-items: center; gap: var(--space-m);
  max-width: none; padding-inline: var(--space-m);
}
/* The badge sits on a paper disc that overhangs the header edge into the hero. */
/* z-index 2 so the badge disc sits over an open mega menu, as on the original. */
.header-1-block__brand { position: relative; z-index: 2; flex: 0 0 auto; }
.header-1-block__brand::before {
  content: ""; position: absolute; z-index: -1;
  left: -1.2rem; top: -1.9rem; width: 13.2rem; height: 13.2rem;
  background: var(--secondary); border-radius: var(--radius-full);
}
.header-1-block__logo { width: 10rem; height: 10rem; }

.header-1-block__nav { margin-left: auto; }
.header-1-block__menu { display: flex; align-items: center; gap: var(--space-m); }
/* Mega-menu parents are position:static on purpose so the absolute panel
   resolves against the sticky header and can span the full viewport. Making
   the <li> relative pins the panel to the list item's own width. */
.header-1-block__menu > li { position: static; }
/* The simple dropdown anchors to its own item, so this one is relative. */
.header-1-block__menu > li.header-1-block__item--simple { position: relative; }

.header-1-block__link {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: var(--nav-link-size); font-weight: 800; line-height: 1.5;
  text-transform: uppercase; color: var(--tertiary);
  transition: color var(--t-fast);
}
.header-1-block__link:hover,
.header-1-block__item--open > .header-1-block__link { color: var(--primary); }
.header-1-block__link svg { width: 1.4rem; height: 1.4rem; transition: transform var(--t-fast); }
.header-1-block__item--open > .header-1-block__link svg { transform: rotate(180deg); }

.header-1-block__social { display: flex; align-items: center; gap: var(--space-s); }
.header-1-block__social a { color: var(--tertiary); transition: color var(--t-fast); }
.header-1-block__social a:hover { color: var(--primary); }
.header-1-block__social svg { width: 2.2rem; height: 2.2rem; }

.header-1-block__burger { display: none; }
.header-1-block__burger svg { width: 2.8rem; height: 2.8rem; }

/* ----------------------------------------------------- megamenu-1-block */
.megamenu-1-block {
  /* 6.8rem, not 100%: the original opens the panel under the nav row at y=82,
     not under the 133px header, and lets the logo disc overlap it. */
  position: absolute; left: 0; right: 0; top: 8.2rem;
  background: var(--tertiary);
  opacity: 0; visibility: hidden;
  transform: translateY(var(--megamenu-offset));
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
  /* No max-height. An earlier pass capped this, believing the original bled
     past the fold — that reading came from a screenshot taken mid-fade. At rest
     the original's panel is opaque and does cover the fold, and capping the
     height here made the fifth PARTNER item need a scroll, which is strictly
     worse. Natural height, matching the original. */
}
.header-1-block__item--open > .megamenu-1-block {
  opacity: 1; visibility: visible; transform: translateY(0);
}
/* Measured off the original: the container is full-viewport-width with ZERO
   padding, a 2fr/1fr split, and 26.608px gaps throughout. Panel height comes
   from the image column, so it is pinned per panel below. */
.megamenu-1-block__container {
  display: grid; grid-template-columns: 2fr 1fr;
  gap: 2.6608rem;
  width: 100%; padding: 0;
}
.megamenu-1-block--services .megamenu-1-block__container { min-height: 42.7rem; }
.megamenu-1-block--partner  .megamenu-1-block__container { min-height: 64.2rem; }

.megamenu-1-block__feature-list {
  display: grid; grid-template-columns: var(--columns-2);
  gap: 2.6608rem;
  align-content: center;
}
.megamenu-1-block__feature-element {
  display: flex; flex-direction: column; gap: var(--space-2xs);
  padding: 1.902rem; border-radius: var(--radius-s);
  transition: background-color var(--t-fast);
}
.megamenu-1-block__feature-element:hover { background: var(--light-10); }
.megamenu-1-block__feature-heading {
  font-size: var(--text-m); font-weight: 800; text-transform: uppercase;
  color: var(--secondary); transition: color var(--t-mid);
}
.megamenu-1-block__feature-element:hover .megamenu-1-block__feature-heading { color: var(--primary-l-1); }
.megamenu-1-block__feature-text { font-size: var(--text-s); color: var(--light-70); }
.card-megamenu-1-block__btn {
  display: inline-flex; align-items: center; gap: 0.8rem;
  font-size: var(--text-s); font-weight: 600; letter-spacing: 0.05rem;
  color: var(--primary); transition: gap var(--t-fast);
}
.card-megamenu-1-block__btn:hover { gap: 1.4rem; }
.card-megamenu-1-block__btn svg { width: 1.5rem; height: 1.5rem; }
/* The image is absolutely positioned so it fills its cell without dictating the
   panel's height. Left in flow it uses its intrinsic ratio and pushed the
   PARTNER panel to 789px against the original's 642px. */
.card-megamenu-1-block { position: relative; overflow: hidden; border-radius: var(--radius-s); }
.card-megamenu-1-block__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.35);
}

/* ---- simple submenu (EVENTS) ----
   EVENTS is a plain nested dropdown on the original, not a mega-menu panel:
   three links, no descriptions, no cards. */
.megamenu-1-block--simple {
  left: auto; right: auto; top: 100%;
  width: max-content; min-width: 22rem;
  padding: var(--space-xs);
  border-radius: 0 0 var(--radius-s) var(--radius-s);
}
.megamenu-1-block--simple .megamenu-1-block__submenu {
  display: flex; flex-direction: column;
}
.megamenu-1-block--simple a {
  display: block; padding: var(--space-2xs) var(--space-s);
  font-size: var(--text-s); font-weight: 600;
  color: var(--secondary); border-radius: var(--radius-xs);
  transition: background-color var(--t-fast), color var(--t-fast);
}
.megamenu-1-block--simple a:hover { background: var(--light-10); color: var(--primary-l-1); }

/* --------------------------------- testimonial-17-block (hero, video bg) */
.testimonial-17-block {
  position: relative; isolation: isolate;
  display: flex; align-items: flex-end;
  min-height: 45rem;                       /* measured 450px */
  /* Padding trimmed from the original's 103.9/73.93 to absorb the added CTA.
     Without this the hero grows 67px and shoves every section below it out of
     register with the original. */
  padding-block: var(--space-2xl) var(--space-l);
  overflow: hidden;
}
.testimonial-17-block__media {
  position: absolute; inset: 0; z-index: -2;
  background: var(--tertiary);
}
.testimonial-17-block__media video,
.testimonial-17-block__poster {
  width: 100%; height: 100%; object-fit: cover;
}
/* Poster is a still fallback for reduced-motion only. Hidden with `display`,
   never the `hidden` attribute — a `display` rule beats `hidden` and the panel
   ships visible. That bug has landed on this project four times. */
.testimonial-17-block__poster { display: none; }
.testimonial-17-block::before {                 /* legibility scrim */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, #0d1211b3 0%, #0d121159 55%, #0d121121 100%);
}
.testimonial-17-block__inner {
  width: 100%; max-width: var(--max-screen-width);
  margin-inline: auto; padding-inline: var(--space-m);
}
.testimonial-17-block__heading {
  font-size: var(--hero-title-size);
  font-weight: 900; line-height: 1.2; text-transform: uppercase;
  color: var(--secondary);
  text-wrap: balance;
}
.testimonial-17-block__text {
  margin-top: var(--space-s); max-width: 52rem;
  font-size: var(--text-s); color: var(--secondary);
}
/* Hero CTA — the original has no actionable element in the first viewport.
   IMPROVEMENTS #A, approved. */
.testimonial-17-block__actions { margin-top: var(--space-m); }

.btn {
  display: inline-flex; align-items: center; gap: 1rem;
  padding: var(--btn-space);
  font-size: var(--text-s); font-weight: 600; letter-spacing: 0.05rem;
  border-radius: var(--radius-full);
  transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.btn--primary { background: var(--primary); color: var(--secondary); }
.btn--primary:hover { background: var(--primary-d-1); }
.btn--dark { background: var(--tertiary); color: var(--secondary); border-radius: var(--radius-xs); }
.btn--dark:hover { background: var(--tertiary-l-1); }
.btn svg { width: 1.6rem; height: 1.6rem; }

/* ------------------------------------------------- content-63-block (stats) */
.content-63-block {
  background: var(--tertiary);
  /* 6.4rem top is measured, not a scale step: the original runs 0 top padding
     with a taller stat block, and this lands the section on its 243px. */
  padding-block: 6.4rem var(--section-space-sm);
}
.content-63-block__grid {
  display: grid; grid-template-columns: var(--columns-4); gap: var(--space-l);
  max-width: var(--max-screen-width); margin-inline: auto; padding-inline: var(--space-m);
}
.content-63-block__stat-value {
  font-size: var(--stat-size); font-weight: 900; line-height: 1;
  color: var(--primary);
}
.content-63-block__stat-label {
  margin-top: var(--space-2xs);
  font-size: var(--text-s); color: var(--secondary);
}

/* ------------------------------------------- hero-71-block (red bands) */
.hero-71-block {
  position: relative; isolation: isolate;
  background-color: var(--primary);
  /* Repointed off the dead ddev host. Size and position are the original's own
     values, recovered from computed style while the asset was still 404: a 60%
     sunburst anchored bottom-right, not a cover fill. */
  background-image: url("https://cdn.prod.website-files.com/6ab57fa79199f3ed453f5ba5/6ab61818fde3737a154c2aca_bauhaus-sun-01.svg");
  background-repeat: no-repeat;
  background-position: 100% 101%;
  background-size: 60%;
  overflow: hidden;
}
.hero-71-block--mission {
  padding-block: var(--section-space);
  text-align: center;
}
/* 118rem, not 96rem: the original's mission copy sets to three lines at 1280
   and a narrower measure wraps it to four, costing 106px of section height. */
.hero-71-block__mission-inner {
  position: relative; z-index: 2;
  max-width: 118rem; margin-inline: auto;
  padding-inline: var(--space-l);
}
.hero-71-block__mission {
  font-family: var(--instrument-serif);
  font-size: var(--mission-size);
  /* Instrument Serif ships 400 only. The original sets 900 and the browser
     synthesises the bold — that synthetic weight IS the look. Kept. */
  font-weight: 900;
  line-height: 1;
  text-transform: lowercase;
  color: var(--secondary);
}
.hero-71-block__mission em { font-style: normal; text-transform: uppercase; }

/* Cityscape illustrations. On the original these sit above the copy and clip
   the first line at 1280 — IMPROVEMENTS #13. Here they stay behind it and
   are pushed clear of the text column. */
.hero-71-block__deco { position: absolute; z-index: 1; pointer-events: none; }
/* Widths measured on the original at 1280: 448x395 left, 320x166 top-right.
   The original places these in normal flow, which is what lets them sit over
   the mission copy and clip it. Absolute here, and inset far enough that the
   text column stays clear — IMPROVEMENTS #13. */
.hero-71-block__deco--left { left: -9rem; bottom: -3rem; width: 44.8rem; }
.hero-71-block__deco--right { right: -2rem; top: -1rem; width: 32rem; }

/* --- city band --- */
.hero-71-block--cities { padding-block: var(--section-space); }
.hero-71-block__heading {
  position: relative; z-index: 2;
  max-width: var(--max-screen-width); margin-inline: auto;
  padding-inline: var(--space-m); margin-bottom: var(--space-xl);
  font-size: var(--band-title-size); line-height: 1.2;
  text-align: center; text-transform: uppercase;
  color: var(--tertiary);
}
.hero-71-block__slider-wrapper { position: relative; z-index: 2; }

.card-hero-71-block__wrapper {
  position: relative; display: block;
  aspect-ratio: 288 / 412;
  border-radius: var(--radius-l);
  overflow: hidden;
  isolation: isolate;
}
.card-hero-71-block__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s ease;
}
.card-hero-71-block__wrapper:hover .card-hero-71-block__bg { transform: scale(1.04); }
.card-hero-71-block__wrapper::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, #0d121100 38%, #0d1211cc 100%);
}
.card-hero-71-block__badge {
  position: absolute; left: 50%; top: 52%;
  translate: -50% -50%;
  width: 36.5%; height: auto;   /* 105px on a 288px card, measured */
}
.card-hero-71-block__meta {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: var(--space-s); text-align: center;
}
.card-hero-71-block__city {
  font-size: var(--text-m); font-weight: 800; text-transform: uppercase;
  color: var(--secondary);
}
.card-hero-71-block__status {
  margin-top: 0.4rem;
  font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.08rem;
  text-transform: uppercase; color: var(--light-70);
}
/* A card with nowhere to go must not look clickable. Chicago is linked in the
   mirror (IMPROVEMENTS #5); the genuinely unopened markets read as inert. */
.card-hero-71-block__wrapper--inert { cursor: default; }
.card-hero-71-block__wrapper--inert:hover .card-hero-71-block__bg { transform: none; }

/* ------------------------------------ feature-31-block (MOVE/CONNECT/GIVE) */
.feature-31-block { background: var(--secondary); padding-block: var(--section-space); }
.feature-31-block__list {
  display: flex; flex-direction: column;
  gap: clamp(4rem, 13.75vw, 17.6rem);     /* 176px @1280, measured off the original */
  max-width: var(--max-screen-width); margin-inline: auto; padding-inline: var(--space-m);
}
.card-feature-31-block {
  display: grid; grid-template-columns: var(--columns-2);
  gap: var(--space-2xl); align-items: center;
}
.card-feature-31-block:nth-child(even) .card-feature-31-block__media { order: -1; }
.card-feature-31-block__heading {
  font-size: var(--text-xl); font-weight: 900; text-transform: uppercase;
  color: var(--text-title);
}
.card-feature-31-block__text {
  margin-top: var(--space-s); font-size: var(--text-s); color: var(--text-body);
}
.card-feature-31-block__text strong { font-weight: 700; }
.card-feature-31-block__link {
  display: inline-flex; align-items: center; gap: 0.8rem;
  margin-top: var(--space-m);
  font-size: var(--text-s); font-weight: 700;
  color: var(--primary); transition: gap var(--t-fast);
}
.card-feature-31-block__link:hover { gap: 1.5rem; }
.card-feature-31-block__link svg { width: 1.5rem; height: 1.5rem; }
.card-feature-31-block__img {
  width: 100%; aspect-ratio: 5 / 4.15; object-fit: cover;
  border-radius: var(--radius-l);
}

/* ---------------------------------- testimonial-45-block (quotes slider) */
.testimonial-45-block { background: var(--tertiary); padding-block: var(--section-space); }
.testimonial-45-block__inner {
  max-width: var(--max-screen-width); margin-inline: auto; padding-inline: var(--space-m);
}
.testimonial-45-block__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-l); margin-bottom: var(--space-4xl);
}
.testimonial-45-block__heading {
  font-size: var(--text-2xl); text-transform: uppercase; color: var(--secondary);
}
.testimonial-45-block__sub { margin-top: var(--space-2xs); font-size: var(--text-s); color: var(--light-70); }

.slider-nav { display: flex; gap: var(--space-2xs); flex: 0 0 auto; }
.slider-nav__btn {
  display: grid; place-items: center; width: 4rem; height: 4rem;
  border: 1px solid var(--light-30); border-radius: var(--radius-xs);
  color: var(--secondary);
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
.slider-nav__btn:hover { background: var(--light-10); border-color: var(--secondary); }
.slider-nav__btn svg { width: 1.6rem; height: 1.6rem; }
.hero-71-block .slider-nav {
  justify-content: center; margin-top: var(--space-xl);
  position: relative; z-index: 2;
}
.hero-71-block .slider-nav__btn { border-color: var(--tertiary-30); color: var(--tertiary); }
.hero-71-block .slider-nav__btn:hover { background: var(--tertiary); color: var(--secondary); }

.testimonial-45-block__slide {
  display: flex; flex-direction: column; gap: var(--space-m);
  height: auto;
}
.testimonial-45-block__mark {
  display: grid; place-items: center;
  width: 3.4rem; height: 3.4rem; flex: 0 0 auto;
  border: 1.5px solid var(--primary); border-radius: var(--radius-full);
  color: var(--primary); font-size: var(--text-m); font-weight: 700;
}
.testimonial-45-block__quote {
  flex: 1 1 auto;
  font-size: var(--text-s); line-height: 1.7; color: var(--secondary);
}
.testimonial-45-block__person { display: flex; align-items: center; gap: var(--space-2xs); }
.testimonial-45-block__avatar {
  width: 3.6rem; height: 3.6rem; flex: 0 0 auto;
  border-radius: var(--radius-full); object-fit: cover;
  background: var(--tertiary-l-1);
}
.testimonial-45-block__name {
  font-size: var(--text-xs); font-weight: 800; text-transform: uppercase; color: var(--secondary);
}
.testimonial-45-block__role { font-size: var(--text-2xs); color: var(--light-60); }

/* --------------------------------------------------------- faq-5-block */
.faq-5-block {
  position: relative; overflow: hidden;
  background: var(--secondary);
  padding-block: var(--section-space-sm);
}
.faq-5-block__deco {
  position: absolute; left: -4rem; top: 4rem; z-index: 0;
  width: min(52rem, 40vw); pointer-events: none; opacity: 0.85;
}
.faq-5-block__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: var(--space-2xl);
  max-width: var(--max-screen-width); margin-inline: auto; padding-inline: var(--space-m);
}
.faq-5-block__heading { font-size: var(--text-xl); text-transform: uppercase; color: var(--text-title); }
.faq-5-block__intro { margin-top: var(--space-s); font-size: var(--text-s); }
.faq-5-block__intro strong { font-weight: 700; }
.faq-5-block__cta { margin-top: var(--space-m); }

.faq-5-block__accordion { display: flex; flex-direction: column; }
.faq-5-block__item { border-bottom: 1px solid #232e2d26; }
.faq-5-block__trigger {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-s);
  width: 100%; padding-block: 2.59rem; text-align: left;   /* 77.5px row, measured */
  font-size: var(--text-s); font-weight: 700; color: var(--text-title);
  transition: color var(--t-fast);
}
.faq-5-block__trigger:hover { color: var(--primary); }
.faq-5-block__icon { position: relative; width: 1.6rem; height: 1.6rem; flex: 0 0 auto; }
.faq-5-block__icon::before,
.faq-5-block__icon::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: currentColor; transition: transform var(--t-fast), opacity var(--t-fast);
}
.faq-5-block__icon::before { width: 100%; height: 1.5px; }
.faq-5-block__icon::after { width: 1.5px; height: 100%; }
.faq-5-block__trigger[aria-expanded="true"] .faq-5-block__icon::after { transform: rotate(90deg); opacity: 0; }

.faq-5-block__panel {
  overflow: hidden;
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-mid) ease;
}
.faq-5-block__panel > div { overflow: hidden; min-height: 0; }
.faq-5-block__item--open .faq-5-block__panel { grid-template-rows: 1fr; }
.faq-5-block__answer {
  padding-bottom: var(--space-s); padding-right: var(--space-xl);
  font-size: var(--text-s); color: var(--text-body);
}

/* ------------------------------------------------------ footer-12-block */
.footer-12-block {
  position: relative; overflow: hidden;
  background: var(--primary);
  padding-block: 3.7368rem 0;            /* measured 37.368px top */
  color: var(--secondary);
}
.footer-12-block__inner {
  position: relative; z-index: 1;
  max-width: var(--max-screen-width); margin-inline: auto; padding-inline: var(--space-m);
}
.footer-12-block__top {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2xl); align-items: center;
  padding-bottom: var(--space-xl);
}
.footer-12-block__heading { font-size: var(--text-l); text-transform: uppercase; }
.footer-12-block__text { margin-top: var(--space-2xs); font-size: var(--text-s); max-width: 44rem; }
.footer-12-block__form { display: flex; gap: var(--space-2xs); }
.footer-12-block__input {
  flex: 1 1 auto; min-width: 0;
  padding: var(--btn-space);
  font: inherit; font-size: var(--text-s);
  color: var(--secondary);
  background: transparent;
  border: 1px solid var(--light-30);
  border-radius: var(--radius-xs);
}
.footer-12-block__input::placeholder { color: var(--light-70); }
.footer-12-block__submit {
  padding: var(--btn-space);
  font-size: var(--text-s); font-weight: 800; letter-spacing: 0.08rem;
  text-transform: uppercase;
  color: var(--secondary); background: var(--tertiary);
  border-radius: var(--radius-xs);
  transition: background-color var(--t-fast);
}
.footer-12-block__submit:hover { background: var(--tertiary-l-1); }

.footer-12-block__menu-section {
  display: flex; flex-wrap: wrap; gap: var(--space-m);
  padding-block: var(--space-s);
  border-top: 1px solid var(--light-20);
}
.footer-12-block__menu-section a {
  font-size: var(--text-xs); font-weight: 800; text-transform: uppercase;
  transition: opacity var(--t-fast);
}
.footer-12-block__menu-section a:hover { opacity: 0.7; }
.footer-12-block__legal {
  padding-block: var(--space-s) var(--space-l);
  font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase;
}
.footer-12-block__legal a:hover { text-decoration: underline; }

/* The cursive wordmark. On the original this is a flex child with no basis and
   collapses to 0x0, leaving ~146px of dead space. IMPROVEMENTS #4. */
.footer-12-block__wordmark {
  display: block; width: 100%; max-width: 92rem;
  height: auto; margin: 0 auto;
  padding-bottom: var(--space-l);
  opacity: 0.92;
}

/* ------------------------------------------------------------ splide */
.splide__track { overflow: hidden; }
.splide__list { display: flex; backface-visibility: hidden; }
.splide__slide { flex: 0 0 auto; }

/* ------------------------------------------------ events-1-block (upcoming) */
/* Added 2026-09-22 for the Speakeasy ticket links. Not on the original; built
   from this file's own tokens, button and FAQ-row treatment. */
.events-1-block {
  background: var(--secondary);
  padding-block: var(--section-space-sm);
  scroll-margin-top: 8rem;
}
.events-1-block__inner { max-width: var(--max-screen-width); margin-inline: auto; padding-inline: var(--space-m); }
.events-1-block__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-m);
  flex-wrap: wrap; margin-bottom: var(--space-l);
}
.events-1-block__heading { font-size: min(var(--text-xl), 8svh); text-transform: uppercase; color: var(--text-title); }
.events-1-block__intro { margin-top: var(--space-2xs); font-size: var(--text-s); }
.events-1-block__list { border-top: 1px solid #232e2d26; }
.events-1-block__item {
  display: grid; grid-template-columns: 7.2rem 8rem minmax(0, 1fr) auto;
  align-items: center; gap: var(--space-m);
  padding-block: var(--space-s);
  border-bottom: 1px solid #232e2d26;
}
.events-1-block__date time { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.events-1-block__month,
.events-1-block__weekday {
  font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.08rem; text-transform: uppercase;
}
.events-1-block__month { color: var(--primary); }
.events-1-block__day { margin-block: 0.4rem; font-size: min(var(--text-xl), 8svh); font-weight: 900; color: var(--text-title); }
.events-1-block__weekday { color: var(--tertiary-l-2); }
.events-1-block__thumb { width: 8rem; height: 8rem; object-fit: cover; border-radius: var(--radius-m); }
.events-1-block__title { font-size: var(--text-m); font-weight: 800; color: var(--text-title); }
.events-1-block__where { margin-top: 0.4rem; font-size: var(--text-s); color: var(--tertiary-l-1); }
.events-1-block__empty { padding-block: var(--space-m); font-size: var(--text-s); }

/* -------------------------------------------------------- responsive */
@media (max-width: 1099px) {
  .megamenu-1-block__container { grid-template-columns: minmax(0, 1fr); }
  .card-megamenu-1-block { display: none; }
  .faq-5-block__inner { grid-template-columns: minmax(0, 1fr); }
  .faq-5-block__deco { display: none; }
}

@media (max-width: 899px) {
  .header-1-block__nav { display: none; }
  .header-1-block__nav--open {
    display: block; position: absolute; inset-inline: 0; top: 100%;
    background: var(--tertiary); padding: var(--space-m);
    max-height: calc(100svh - 12rem); overflow-y: auto;
  }
  .header-1-block__nav--open .header-1-block__menu {
    flex-direction: column; align-items: stretch; gap: var(--space-xs);
  }
  .header-1-block__nav--open .header-1-block__link { color: var(--secondary); }
  .header-1-block__burger { display: grid; place-items: center; margin-left: auto; color: var(--tertiary); }
  .header-1-block__social { display: none; }

  /* Mobile mega menus are inline disclosure panels, not overlays. */
  .header-1-block__nav--open .megamenu-1-block {
    position: static; width: auto; margin-left: 0;
    max-height: none; overflow: visible;
    display: none; opacity: 1; visibility: visible; transform: none;
    background: transparent;
  }
  .header-1-block__nav--open .header-1-block__item--open > .megamenu-1-block { display: block; }
  .header-1-block__nav--open .megamenu-1-block__container { padding: var(--space-s) 0; gap: var(--space-m); }
  .header-1-block__nav--open .megamenu-1-block__feature-list { grid-template-columns: minmax(0, 1fr); gap: var(--space-s); }

  .content-63-block__grid { grid-template-columns: var(--columns-2); gap: var(--space-m); }
  .card-feature-31-block { grid-template-columns: minmax(0, 1fr); gap: var(--space-l); }
  .card-feature-31-block:nth-child(even) .card-feature-31-block__media { order: 0; }
  .testimonial-45-block__head { flex-direction: column; align-items: flex-start; }
  .footer-12-block__top { grid-template-columns: minmax(0, 1fr); gap: var(--space-l); }
  .hero-71-block__deco--left { width: 26rem; left: -8rem; }
  .hero-71-block__deco--right { width: 22rem; right: -6rem; }
}

@media (max-width: 599px) {
  .events-1-block__item { grid-template-columns: 6rem minmax(0, 1fr); gap: var(--space-xs) var(--space-s); }
  .events-1-block__thumb { display: none; }
  .events-1-block__cta { grid-column: 2; justify-self: start; }
  .footer-12-block__form { flex-direction: column; }
  .footer-12-block__menu-section { gap: var(--space-s); }
}

/* Short viewports. The svh ceilings on display type in tokens.css are what
   actually keep the hero CTA above a 689px fold; they are measured and they
   hold. Section rhythm is deliberately NOT compressed here — the original
   does not compress it, and doing so put every section 24-250px out of
   register against it. Guard the type, mirror the rhythm. */

@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;
  }
  .testimonial-17-block__media video { display: none; }
  .testimonial-17-block__poster { display: block; }
}