/* ==========================================================================
   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;
}

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; }

/* Overlay textures. Part of the look, not artefacts — see SPEC. */
.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);
}

/* ------------------------------------------------------- header-1-block */
.header-1-block__inner {
  display: flex; align-items: center; gap: var(--space-m);
}
/* The badge sits on a paper disc that overhangs the header edge into the hero. */
.header-1-block__brand { position: relative; 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__nav { margin-left: auto; }
.header-1-block__menu { display: flex; align-items: center; }
/* 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 {
  gap: 0.6rem;
  color: var(--tertiary);
}
.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);
}

/* --------------------------------- 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 {
  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::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%;
}
.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 {
  border-radius: var(--radius-full);
  transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.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);
}
.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 {
  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;
}
.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: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;
}
.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__head {
  display: flex; justify-content: space-between;
  gap: var(--space-l);
}
.testimonial-45-block__heading {
  text-transform: uppercase; color: var(--secondary);
}
.testimonial-45-block__sub { 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;
  height: auto;
}
.testimonial-45-block__mark {
  display: grid; place-items: center;
  flex: 0 0 auto;
  border: 1.5px solid var(--primary); border-radius: var(--radius-full);
}
.testimonial-45-block__quote {
  flex: 1 1 auto;
  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); }

/* ------------------------------------------------------ footer-12-block */
.footer-12-block {
  padding-block: 3.7368rem 0;            /* measured 37.368px top */
  color: var(--secondary);
}
.footer-12-block__inner {
  position: relative; z-index: 1;
}

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

/* -------------------------------------------------------- responsive */
@media (max-width: 1099px) {
  .megamenu-1-block__container { grid-template-columns: minmax(0, 1fr); }
  .card-megamenu-1-block { 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 {
    margin-left: 0;
    max-height: none; overflow: visible;
    display: none; opacity: 1; visibility: visible; transform: none;
  }
  .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; }
  .hero-71-block__deco--left { width: 26rem; left: -8rem; }
  .hero-71-block__deco--right { width: 22rem; right: -6rem; }
}

/* 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; }
}