/* =====================================================================
   Milwaukee REIA Mentoring
   One stylesheet for the whole site.

   Order of the file
     1. tokens (colours, fonts, spacing)      6. sections and page patterns
     2. fonts                                 7. forms
     3. reset and base elements               8. footer
     4. helpers (container, buttons, icons)   9. media queries
     5. header and slide-out menu

   Breakpoints. The site is written phone first. Two widths matter:
     >= 768px   tablet: two-column layouts, compact header with the dark
                slide-out drawer
     >= 1025px  desktop: the full three-bar header with the inline nav
   The three reference widths are 390 (phone), 820 (tablet), 1440 (desktop).
   ===================================================================== */

/* -------------------------------------------------------------- 1. tokens */

:root {
  /* brand */
  --blue: #00a1e4;           /* bright blue: headings, links, icons */
  --blue-dark: #006092;      /* deep blue: buttons, mission band */
  --blue-banner: #3cbcf0;    /* announcement banner */
  --blue-link: #427bca;      /* inline links inside body copy */
  --bar-dark: #2e2e2e;       /* thin social bar under the banner */
  --drawer-dark: #272a2f;    /* tablet slide-out drawer */

  /* neutrals */
  --ink: #202020;            /* body copy */
  --ink-strong: #000;        /* headings on light backgrounds */
  --white: #fff;
  --gray-100: #eee;          /* member band, card shadow */
  --black: #000;             /* footer */

  /* type */
  --font-head: "Roboto Slab", Georgia, serif;
  --font-body: "Open Sans", "Helvetica Neue", Arial, sans-serif;

  /* layout */
  --content: 960px;          /* the column every section lines up with */
  --gutter: 15px;            /* side padding on a phone */
  --gutter-lg: 40px;         /* side padding from tablet up */
  --section-y: 40px;         /* vertical padding inside a section, phone */
  --section-y-lg: 100px;     /* ... from tablet up */
  --radius: 20px;
  --shadow-card: 0 3px 11px 0 var(--gray-100);

  /* height of the fixed header. --header-h is what the page reserves at
     the top; --header-h-min is what is left once the top two bars have
     collapsed, and it is what in-page links clear. They only differ on a
     desktop, because that is the only width with bars to collapse. */
  --header-h: 75px;
  --header-h-min: 75px;
}

/* --------------------------------------------------------------- 2. fonts */

@font-face {
  font-family: "Roboto Slab";
  src: url("/assets/fonts/roboto-slab-300.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Roboto Slab";
  src: url("/assets/fonts/roboto-slab-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Roboto Slab";
  src: url("/assets/fonts/roboto-slab-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Roboto Slab";
  src: url("/assets/fonts/roboto-slab-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
/* Comfortaa is the rounded geometric face the phone menu's links are set
   in on the live site. It is used nowhere else, so only the bold is here. */
@font-face {
  font-family: "Comfortaa";
  src: url("/assets/fonts/comfortaa-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("/assets/fonts/open-sans-300.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("/assets/fonts/open-sans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("/assets/fonts/open-sans-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("/assets/fonts/open-sans-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("/assets/fonts/open-sans-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("/assets/fonts/open-sans-700italic.woff2") format("woff2");
  font-weight: 700; font-style: italic; font-display: swap;
}

/* ---------------------------------------------------------------- 3. base */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding-top: var(--header-h);   /* the header is fixed; this holds its place */
  background: var(--white);
  color: var(--ink);
  font: 400 15px/1.5 var(--font-body);
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

/* Anything a link can jump to stops below the fixed header rather than
   underneath it. */
[id] { scroll-margin-top: calc(var(--header-h-min) + 12px); }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--ink-strong);
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--blue); }
a:hover { color: var(--blue-dark); }

img { max-width: 100%; height: auto; display: block; }

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

address { font-style: normal; }

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

.skip-link {
  position: absolute;
  left: 8px; top: -60px;
  z-index: 200;
  padding: 10px 18px;
  background: var(--blue-dark);
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
  transition: top .15s;
}
.skip-link:focus { top: 8px; color: var(--white); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------- 4. helpers */

.container {
  width: 100%;
  max-width: calc(var(--content) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1em; height: 1em; fill: currentColor; display: block; }

/* Buttons. Every call to action on the site is one of these four pills.
     .btn--solid         filled deep blue, white label
     .btn--outline       deep blue outline on a light background
     .btn--outline-light white outline on a dark or photographic background
     .btn--outline-blue  bright blue outline, used in the black footer

   Size. The old site gave every button in a section body the same box:
   50 pixels tall, and 250 pixels wide on a phone. The two exceptions have
   their own modifier (.btn--wide) or live in the footer, and both of those
   are 46 pixels tall. Because the height is fixed rather than a product of
   the padding, the pill is a centring flex box.                           */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 34px;
  border: 2px solid transparent;
  border-radius: 50px;
  font: 700 16px/1.3 var(--font-body);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
/* the fixed-width pill the three "apply" pages use: 280 by 46 */
.btn--wide {
  width: 280px;
  max-width: 100%;
  min-height: 46px;
  padding-inline: 10px;
}
.btn--solid {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
  color: var(--white);
}
.btn--solid:hover { background: #004c75; border-color: #004c75; color: var(--white); }

.btn--outline {
  background: var(--white);
  border-color: var(--blue-dark);
  color: var(--blue-dark);
}
.btn--outline:hover { background: var(--blue-dark); color: var(--white); }

.btn--outline-light {
  background: transparent;
  border-color: var(--white);
  color: var(--white);
}
.btn--outline-light:hover { background: var(--white); color: var(--blue-dark); }

.btn--outline-blue {
  background: transparent;
  border-color: var(--blue);
  color: var(--blue);
}
.btn--outline-blue:hover { background: var(--blue); color: var(--white); }

/* The hero button is white filled with deep blue text. */
.btn--white {
  background: var(--white);
  border-color: var(--white);
  color: var(--blue-dark);
}
.btn--white:hover { background: var(--blue-dark); border-color: var(--white); color: var(--white); }

/* ------------------------------------------------- 5. header and the menu */

/* The header is pinned to the top of the window on every width, which is
   what the live site does: the page scrolls underneath it. Past the first
   screenful of scrolling the desktop header drops its top two bars and
   only the white logo and navigation bar stays, which is the `is-compact`
   state further down. */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
}

/* Announcement banner and social bar. The live site shows these only on
   a desktop; tablets and phones get the compact bar on its own. */
.banner, .topbar { display: none; }

/* announcement banner */
.banner { background: var(--blue-banner); }
.banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 15px;
}
.banner__text {
  margin: 0;
  font: 700 24px/1 var(--font-head);
  color: var(--white);
}
.banner__btn { flex: none; }

/* thin dark bar with the social icons and the login link */
.topbar { background: var(--bar-dark); }
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 41px;
}
.topbar__social { display: flex; gap: 18px; list-style: none; }
.topbar__social a { color: var(--white); font-size: 15px; display: block; padding: 4px; }
.topbar__social a:hover { color: var(--blue); }
.topbar__login {
  color: var(--white);
  font-size: 14px;
  text-decoration: none;
  letter-spacing: .01em;
}
.topbar__login:hover { color: var(--blue); }

/* white bar: hamburger / logo / nav / connect button */
.navbar { background: var(--white); box-shadow: 0 3px 11px rgba(0, 0, 0, .25); }
.navbar__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 75px;
}
.navbar__logo { display: block; flex: none; }
.navbar__logo img { width: 160px; height: auto; }

/* the two sizes the bar moves between when the header collapses */
.navbar__inner { transition: min-height .2s ease; }
.navbar__logo img { transition: width .2s ease; }

.navbar__nav { display: none; margin-left: auto; }
.navbar__nav ul { display: flex; align-items: center; }
.navbar__nav a {
  display: block;
  padding: 10px 14px;
  color: var(--ink);
  font-size: 12px;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
}
.navbar__nav a:hover { color: var(--blue); }
.navbar__nav a.is-current { color: var(--blue); }

.navbar__connect { display: none; }

/* hamburger button */
.hamburger {
  flex: none;
  width: 44px; height: 44px;
  margin-left: -10px;
  padding: 0;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--blue-dark);
}
.hamburger__bars,
.hamburger__bars::before,
.hamburger__bars::after {
  content: "";
  display: block;
  width: 24px; height: 2px;
  background: currentColor;
}
.hamburger__bars { position: relative; }
.hamburger__bars::before { position: absolute; top: -7px; }
.hamburger__bars::after { position: absolute; top: 7px; }

/* --- slide-out menu -------------------------------------------------- */

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  transition: opacity .25s ease;
}
.menu-overlay.is-open { opacity: 1; }

.menu {
  position: fixed;
  inset-block: 0;
  left: 0;
  z-index: 100;
  width: 304px;
  max-width: 82vw;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: linear-gradient(90deg, var(--blue-dark) 53%, var(--blue) 100%);
  transform: translateX(-100%);
  transition: transform .3s ease;
}
.menu.is-open { transform: translateX(0); }

.menu__inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 12px 15px 28px;
}

.menu__close {
  align-self: flex-start;
  width: 48px; height: 48px;
  margin-left: -9px;
  margin-bottom: 20px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--white);
  font: 300 34px/1 var(--font-body);
  cursor: pointer;
}

/* The underline under the current page spans the word, not the row, which
   is why the link is only as wide as its label. */
.menu__nav a {
  display: block;
  width: fit-content;
  padding: 7px 0;
  color: var(--white);
  font: 700 16.5px/34.3px "Comfortaa", var(--font-body);
  letter-spacing: .01em;
  text-decoration: none;
}
.menu__nav a.is-current {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 10px;
}
.menu__nav a:hover { color: var(--white); opacity: .8; }

.menu__foot { margin-top: auto; padding-top: 32px; }
.menu__heading {
  margin: 0 0 4px;
  font: 700 19px/1.3 var(--font-body);
  color: var(--white);
}
.menu__contact { margin: 0 0 2px; }
.menu__contact a {
  display: block;
  padding: 7px 0;
  color: rgba(255, 255, 255, .85);
  font-size: 17px;
  text-decoration: none;
}
.menu__contact a:hover { color: var(--white); }

.menu__icons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 14px 0 0;
  list-style: none;
}
.menu__icons a {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--white);
  color: var(--blue-dark);
  font-size: 19px;
}
.menu__icons a:hover { background: var(--blue-dark); color: var(--white); }

.menu__actions { margin-top: 20px; }
.menu__btn { display: flex; width: auto; margin-bottom: 12px; }
.menu__login {
  display: block;
  padding: 12px 0;
  color: var(--white);
  font-size: 14px;
  letter-spacing: .04em;
  text-decoration: underline;
}

/* -------------------------------------------- 5b. entrance animations */

/* One mechanism for the whole site. Put data-reveal="fade-up" (or "fade")
   on an element and it starts hidden and plays once, the first time it
   comes into view. The script in site.js adds .is-visible.

   Two safeguards: the hidden state only applies under html.js, which a one
   line script in <head> sets, so with JavaScript off nothing is ever
   hidden; and anyone who asks for less motion gets the finished state
   straight away. One second, linear, is what the live site used. */

@keyframes reveal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* translateY(100%) is 100 per cent of the element's own height, so a tall
   block rolls up from below the fold rather than nudging. That is exactly
   what the live site does and the owner asked for it by name. */
@keyframes reveal-fade-up {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: none; }
}

/* A block that starts a whole page height below its place makes the page
   briefly twice as long, and the scrollbar jumps when it lands. The live
   site clips that overflow away on its layout wrapper; this is the same
   thing in the same place. Nothing on the site is meant to spill out of
   <main>, and nothing inside it is fixed or sticky. */
.js #main { overflow: clip; }

.js [data-reveal]:not(.is-visible) { opacity: 0; }
.js [data-reveal].is-visible { animation: reveal-fade 1s linear both; }
.js [data-reveal="fade-up"].is-visible { animation-name: reveal-fade-up; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js [data-reveal]:not(.is-visible),
  .js [data-reveal].is-visible,
  .js [data-reveal="fade-up"].is-visible {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* --------------------------------------------- 6. sections and patterns */

/* A plain section: white background, generous vertical padding. Add
   .section--gray, .section--blue or .section--navy to recolour it. */
.section { padding-block: var(--section-y); }
.section--gray { background: var(--gray-100); }
.section--blue { background: var(--blue-dark); color: var(--white); padding-block: 50px; }
/* the mission band is the one block the live phone layout insets further:
   its copy starts 45 pixels in, not at the 15 pixel gutter */
.section--blue .container { padding-inline: 45px; }
.section--blue h1, .section--blue h2, .section--blue h3, .section--blue h4 { color: var(--white); }
.section--tight { padding-block: 32px; }

.section__head { padding-top: 10px; margin-bottom: 25px; text-align: center; }
.section__head--roomy { padding-top: 18px; margin-bottom: 33px; }
.section__eyebrow {
  margin: 0 0 3px;
  font: 700 15px/1.5 var(--font-body);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink);
}
.section__title { color: var(--blue); font-size: 32px; line-height: 1; }
.section__title--xl { font-size: 36px; }
.section__intro { margin: 12px auto 0; }
.section__intro--narrow { max-width: 760px; }

.text-center { text-align: center; }
/* a line break that only applies from tablet width up */
.br-wide { display: none; }
.actions { margin: 40px 0 10px; text-align: center; }

/* --- hero: full-bleed photo slideshow with a dark scrim ---------------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  padding-block: 70px;
  color: var(--white);
  background: #333;
  isolation: isolate;
}
.hero__slides { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: hero-fade 42s infinite;
}
.hero__slide:nth-child(1) { animation-delay: 0s; opacity: 1; }
.hero__slide:nth-child(2) { animation-delay: 7s; }
.hero__slide:nth-child(3) { animation-delay: 14s; }
.hero__slide:nth-child(4) { animation-delay: 21s; }
.hero__slide:nth-child(5) { animation-delay: 28s; }
.hero__slide:nth-child(6) { animation-delay: 35s; }
@keyframes hero-fade {
  0%      { opacity: 0; }
  2.5%    { opacity: 1; }
  16.6%   { opacity: 1; }
  19.1%   { opacity: 0; }
  100%    { opacity: 0; }
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, .5);
}
.hero__title { color: var(--white); font-size: 48px; line-height: 1.1; padding-top: 10px; }
.hero__text { max-width: 740px; margin: 11px 0 0; }
.hero .btn { margin-top: 22px; }

@media (prefers-reduced-motion: reduce) {
  .hero__slide { animation: none; }
  .hero__slide:not(:first-child) { opacity: 0; }
  .hero__slide:first-child { opacity: 1; }
}

/* --- page hero banner: the blue title strip every inner page starts with */

/* The live band is 95 pixels tall: a 50 pixel title on a 51 pixel line
   between 22 pixels of padding. On a phone the title drops to 28 pixels. */
.page-hero {
  background: linear-gradient(90deg, var(--blue-dark) 20%, var(--blue) 100%);
  color: var(--white);
  padding-block: 22px;
}
.page-hero__title { color: var(--white); font-size: 28px; line-height: 1.5; }
.page-hero__text { margin: 10px 0 0; max-width: 760px; }

/* --- card grid: the six feature cards, and any three-up card row ------- */

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.card {
  padding: 30px 15px 40px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  text-align: center;
}
.card__icon {
  width: 45px; height: 45px;
  margin: 0 auto 10px;
  color: var(--blue);
}
.card__icon svg, .card__icon img { width: 100%; height: 100%; }
.card__title { font-size: 18px; line-height: 1.1; margin-bottom: 12px; }
.card p { color: var(--ink); }

/* --- split: text on one side, a picture on the other ------------------ */

.split { display: grid; gap: 24px; align-items: center; }
.split__body p { font-size: 16px; line-height: 1.5; }
.split__media img {
  width: 100%;
  aspect-ratio: 480 / 378;
  object-fit: cover;
  border-radius: 14px;
}
.split__title { color: var(--blue); font-size: 32px; line-height: 1.5; margin-bottom: 12px; }
.split--reverse .split__media { order: -1; }
/* a slightly wider media column, the proportions the mission band uses */
.split--media-lg { grid-template-columns: 1fr; }
/* the mission photo is decorative, and the live site drops it on a phone */
.split--media-lg .split__media { display: none; }

/* --- member band: seal, sentence, button ------------------------------ */

.member-band { background: var(--gray-100); padding-block: 25px; }
.member-band__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
/* the seal is decorative and the live site drops it on a phone */
.member-band__seal { display: none; width: 80px; height: 80px; flex: none; }
.member-band__copy { margin: 0; font-size: 16px; line-height: 1.5; }
.member-band a:not(.btn) { color: var(--blue-link); font-weight: 700; }

/* --- testimonial cards ------------------------------------------------ */

.quote-grid { display: grid; grid-template-columns: 1fr; gap: 15px; padding-inline: 10px; }
.quote {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: rgba(0, 0, 0, .05);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: var(--radius);
}
.quote__stars { width: 94px; height: 22px; color: var(--blue); margin-bottom: 19px; }
.quote__text { margin: 0 0 18px; font-size: 14px; line-height: 21px; }
.quote__by {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 50px;
  margin-top: auto;
}
.quote__name { margin: 0; font-weight: 700; font-size: 15px; }
.quote__when { margin: 0; font-size: 14px; }
.quote__avatar { width: 50px; height: 50px; border-radius: 50%; flex: none; }

/* --- call to action band --------------------------------------------- */

.cta-band {
  position: relative;
  padding-block: 40px 50px;
  color: var(--white);
  background: linear-gradient(90deg, var(--blue-dark) 20%, var(--blue) 100%);
  isolation: isolate;
}
.cta-band::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: rgba(0, 0, 0, .37);
}
/* on a phone the live band sets its copy 35 pixels in, not at the gutter */
.cta-band .container { padding-inline: 35px; }
.cta-band__title { color: var(--white); font-size: 32px; line-height: 1.1; padding-top: 2px; }
.cta-band .btn { margin-top: 22px; }

/* --- circular photo grid (mentorship program events) ------------------ */

.circle-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.circle-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}

/* --- a block of body copy, kept to a comfortable measure ------------- */

.prose { max-width: 760px; }
.prose--center { margin-inline: auto; }
.prose h2 { color: var(--blue); font-size: 30px; line-height: 1.2; margin: 34px 0 16px; }
.prose h3 { font-size: 20px; line-height: 1.3; margin: 26px 0 10px; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { margin: 0 0 1em 1.3em; }
.prose li { margin-bottom: .4em; }
.rule { border: 0; border-top: 1px solid #ccc; margin: 40px 0; }

/* --- masonry photo wall (event gallery, story pages) ----------------- */

.photo-wall { columns: 2; column-gap: 8px; }
.photo-wall img { width: 100%; margin-bottom: 8px; break-inside: avoid; }

/* --- plain photo gallery grid (event gallery, story pages) ------------ */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; }

/* --- before / after image pairs (success stories) --------------------- */

.before-after { display: grid; grid-template-columns: 1fr; gap: 14px; }
.before-after figure { margin: 0; }
.before-after figcaption {
  margin-top: 8px;
  font: 700 13px/1.4 var(--font-body);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink);
}

/* --- blog listing cards ---------------------------------------------- */

.post-grid { display: grid; grid-template-columns: 1fr; gap: 34px; }
.post-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.post-card__title {
  margin: 14px 0 8px;
  font: 700 18px/1.3 var(--font-head);
  color: var(--blue);
}
.post-card__title a { color: inherit; text-decoration: none; }
.post-card__title a:hover { text-decoration: underline; }
.post-card__meta { margin: 0 0 10px; color: #8a8a8a; font-size: 13px; }
.post-card__more { margin: 14px 0 0; font-size: 14px; font-weight: 600; }
.post-card__more a { text-decoration: none; color: var(--ink); }
.post-card__more a:hover { color: var(--blue); }

/* --- blog post layout ------------------------------------------------- */

.post { max-width: 760px; margin-inline: auto; }
.post__meta { margin: 0 0 24px; color: #6b6b6b; font-size: 14px; }
.post__lead img { width: 100%; border-radius: 10px; margin-bottom: 28px; }
.post h2 { font-size: 28px; line-height: 1.2; margin: 36px 0 14px; color: var(--blue); }
.post h3 { font-size: 21px; line-height: 1.3; margin: 28px 0 12px; }
.post ul, .post ol { margin: 0 0 1em 1.3em; }
.post li { margin-bottom: .4em; }

/* ---------------------------------------------------------------- 7. form */

.contact-section {
  position: relative;
  padding-block: var(--section-y);
  color: var(--white);
  background: var(--blue-dark) center / cover no-repeat;
  isolation: isolate;
}
.contact-section::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--blue-dark);
  opacity: .88;
}
.contact-section h2 { color: var(--white); }

.form { max-width: 610px; margin: 40px auto 30px; }
.form__row { display: grid; grid-template-columns: 1fr; gap: 0; }
.form__field { margin-bottom: 26px; }

.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form textarea {
  width: 100%;
  padding: 4px 10px 6px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--white);
  border-radius: 0;
  color: var(--white);
  font: 400 16px/1.6 var(--font-body);
}
.form textarea { padding: 10px; min-height: 50px; resize: vertical; }
.form ::placeholder { color: rgba(255, 255, 255, .85); opacity: 1; }
.form input:focus-visible, .form textarea:focus-visible { outline-offset: 4px; }

.form__consent {
  display: block;
  margin: 31px 0 0;
  font-size: 15px;
  line-height: 1.4;
}
.form__consent input {
  width: 18px; height: 18px;
  margin: 0 0 10px;
  display: block;
  accent-color: var(--white);
}
.form__actions { margin: 44px 0 0; text-align: center; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-thanks {
  max-width: 610px;
  margin: 34px auto 0;
  padding: 34px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: var(--radius);
  text-align: center;
}
.form-thanks h3 { color: var(--white); font-size: 24px; margin-bottom: 10px; }

/* -------------------------------------------------------------- 8. footer */

.site-footer {
  background: var(--black);
  color: var(--white);
  padding: 30px 0 40px;
  text-align: center;
}
.footer__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 23px;
}
.footer__logo img { width: 77px; height: auto; }

/* On a phone the call to action fills the row so the button can sit where
   the live one does: 39 pixels in from the gutter, not centred. */
.footer__cta { width: 100%; }
.footer__cta-text {
  margin: 0 0 20px;
  font: 700 18px/1.2 var(--font-head);
  color: var(--blue);
}
.footer__cta .btn { display: flex; width: 250px; min-height: 46px; margin: 0 auto 9px 39px; }

/* The two link lists sit 30 pixels inside the gutter and run to the right
   gutter, which is what makes them wrap the way the live footer does:
   one, two, one in the first list and two, two in the second. Each link
   carries its own 30 pixel gap, the last one on a line included.        */
.footer__links { text-align: left; width: 100%; padding-left: 30px; }
.footer__links ul { display: flex; flex-wrap: wrap; }
.footer__links ul + ul { margin-top: 13px; }
.footer__links a {
  display: inline-block;
  margin-right: 30px;
  padding: 5px 0;
  color: var(--white);
  font: 400 17px/25px var(--font-body);
  text-decoration: none;
}
.footer__links a:hover { color: var(--blue); }
.footer__links a.is-current { box-shadow: inset 0 -2px 0 var(--white); }

/* Each icon carries its gap on the right, so the row of three sits a few
   pixels left of centre exactly as the live one does. */
.footer__social {
  display: flex;
  justify-content: center;
  margin: 44px 0 0;
  list-style: none;
}
.footer__social li { margin-right: 10px; }
.footer__social a {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-size: 16px;
}
.footer__social a:hover { background: var(--white); color: var(--blue); }

.footer__address { margin: 56px 0 0; font-size: 14px; line-height: 21px; }
.footer__address a { color: var(--white); text-decoration: none; }
.footer__address a:hover { color: var(--blue); }
.footer__review { margin: 22px 0 0; font-size: 14px; }
.footer__review a { color: var(--blue); }

/* On a phone the live site gives every call to action in a section body the
   same 250 pixel pill, whatever the label says. */
@media (max-width: 767px) {
  .btn { width: 250px; max-width: 100%; padding-inline: 10px; }
  .btn--wide { width: 280px; }
}

/* The live site pins the background of these two bands while the page
   scrolls past them. Phones got an ordinary scrolling background there,
   so the rule starts at tablet width. It has to come after the two
   background shorthands above, which would otherwise reset it. */
@media (min-width: 768px) {
  .cta-band,
  .contact-section { background-attachment: fixed; }
}

/* ------------------------------------------------------ 9. media queries */

/* ---- tablet and up: two-column layouts, roomier type -------------------
   Everything above this line is the phone. From here up the sizes follow
   the live site's desktop styles, which tablets share.                   */
@media (min-width: 768px) {
  :root {
    --gutter: var(--gutter-lg);
    --section-y: var(--section-y-lg);
    --header-h: 82px;
    --header-h-min: 82px;
  }

  body { font-size: 16px; }

  /* header: compact bar with the hamburger, centred logo, connect button */
  .navbar__inner { min-height: 82px; justify-content: space-between; }
  .navbar__logo { margin-inline: auto; }
  .navbar__logo img { width: 180px; }
  .navbar__connect { display: inline-flex; width: 176px; min-height: 52px; padding-inline: 0; }

  /* section heads */
  .br-wide { display: inline; }
  .section__head { padding-top: 10px; margin-bottom: 25px; }
  .section__head--roomy { padding-top: 18px; margin-bottom: 53px; }
  .section--blue { padding-block: var(--section-y-lg); }
  .section--blue .container { padding-inline: var(--gutter); }
  .section__eyebrow { margin-bottom: 12px; font-size: 16px; }
  .section__title { font-size: 40px; }
  .section__title--xl { font-size: 50px; line-height: 50px; }
  .actions { margin: 42px 0 20px; }

  /* hero */
  .hero { padding-block: 179px; }
  .hero__title { font-size: 60px; line-height: 66px; }
  .hero__text { margin-top: 19px; font-size: 16px; }
  .hero .btn { margin-top: 37px; }

  .page-hero__title { font-size: 50px; line-height: 51px; }

  /* cards */
  .card-grid { grid-template-columns: repeat(3, 1fr); }
  .card { padding: 50px 30px 60px; }
  .card__icon { width: 56px; height: 56px; margin-bottom: 32px; }
  .card__title { font-size: 22px; margin-bottom: 16px; }

  /* split */
  .split { grid-template-columns: 1fr 1fr; gap: 50px; }
  .split--media-lg { grid-template-columns: 430fr 480fr; }
  .split--media-lg .split__media { display: block; }
  .split--reverse .split__media { order: 0; }
  .split__title { font-size: 40px; line-height: 60px; margin-bottom: 20px; }

  /* member band */
  .member-band { padding-block: 15px; }
  .member-band__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
  }
  .member-band__seal { display: block; }
  .member-band__copy { flex: 1; }

  /* testimonials */
  .quote-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; padding-inline: 0; }
  .quote { padding: 32px; }
  .quote__stars { width: 117px; height: 20px; margin-bottom: 51px; }
  .quote__text { margin-bottom: 32px; font-size: 16px; line-height: 24px; }
  .quote__by { min-height: 70px; }
  .quote__name, .quote__when { font-size: 16px; }
  .quote__avatar { width: 56px; height: 56px; }

  /* call to action band */
  .cta-band { padding-block: var(--section-y-lg); text-align: center; }
  .cta-band .container { padding-inline: var(--gutter); }
  .cta-band__title { font-size: 50px; line-height: 55px; padding-top: 10px; }
  .cta-band .btn { margin-top: 32px; }

  .circle-grid { gap: 30px; max-width: 416px; margin: 32px auto; }

  .before-after { grid-template-columns: 1fr 1fr; }
  .photo-wall { columns: 3; }
  .post-grid { grid-template-columns: repeat(3, 1fr); }
  .prose h2 { font-size: 34px; }

  /* contact form */
  .form { margin: 48px auto 35px; }
  .form__row { grid-template-columns: 1fr 1fr; gap: 30px; }
  .form__consent { margin-top: 26px; font-size: 16px; }

  /* the dark drawer that tablets get */
  .menu { width: 287px; max-width: 70vw; background: var(--drawer-dark); }
  .menu__inner { padding: 30px 50px 100px; }
  .menu__close { margin-left: -14px; margin-bottom: 25px; }
  .menu__nav a { padding: 12px 0; font: 400 24px/1.8 var(--font-body); letter-spacing: .03em; color: rgba(255, 255, 255, .5); }
  .menu__nav a.is-current { text-underline-offset: 14px; }
  .menu__nav a.is-current { color: var(--white); }
  .menu__foot { padding-top: 40px; }
  .menu__heading { font: 700 22px/1.4 var(--font-body); }
  .menu__contact a { font-size: 18px; color: rgba(255, 255, 255, .55); }
  .menu__icons { gap: 18px; }
  .menu__icons a { width: 38px; height: 38px; font-size: 17px; color: var(--drawer-dark); }
  .menu__phone-only { display: none; }

  /* The footer's top strip is four quarter-width columns, each with the
     15 pixel padding the old site gave them. The strip runs from edge to
     edge until the 960 pixel content width takes over, which is why it
     gets its own container rule. */
  .site-footer { padding: 60px 0 16px; }
  .site-footer > .container { max-width: var(--content); padding-inline: 0; }
  .footer__top {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
    gap: 0;
    text-align: left;
  }
  .footer__top > * { padding-inline: 15px; }
  .footer__logo { text-align: center; }
  .footer__logo img { width: 152px; margin-inline: auto; }
  .footer__cta { width: auto; margin-top: 18px; text-align: center; }
  .footer__cta-text { max-width: 180px; margin: 0 auto 20px; font: 700 20px/21px var(--font-head); }
  .footer__cta .btn { display: inline-flex; width: 167px; min-height: 50px; margin: 0 auto; padding-inline: 0; }
  .footer__links { display: contents; }
  /* the nav lists carry their own 15 pixel indent on top of the column's,
     and the first one another 30, exactly as the old footer did */
  .footer__links ul { display: block; padding: 17px 15px 0 30px; }
  .footer__links ul:first-child { padding-left: 60px; }
  .footer__links ul + ul { margin-top: 0; }
  .footer__links a { margin-right: 0; padding: 5px 0; font: 400 14px/20.5px var(--font-body); }
  .footer__social { margin-top: 60px; }
  .footer__social li { margin-right: 22px; }
  .footer__address { margin-top: 22px; }
  .footer__review { margin-top: 24px; }
}

/* ---- desktop: the full three-bar header -------------------------------- */
@media (min-width: 1025px) {
  :root { --header-h: 240px; --header-h-min: 68px; }

  .banner, .topbar { display: block; }
  .navbar__inner { min-height: 119px; justify-content: flex-start; }
  .navbar__logo { margin-inline: 0; }
  .navbar__logo img { width: 240px; }
  .navbar__nav { display: block; }
  .navbar__connect, .hamburger { display: none; }

  /* Collapsed header. Once the page has scrolled past the header's own
     height the banner and the dark social bar go, the logo drops to 66
     per cent and the white bar shrinks from 119 to 68 pixels, exactly as
     the live site does. The space the header held stays reserved, so
     nothing below it moves. */
  .site-header.is-compact .banner,
  .site-header.is-compact .topbar { display: none; }
  .site-header.is-compact .navbar__inner { min-height: 68px; }
  .site-header.is-compact .navbar__logo img { width: 158px; }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}