/* ==========================================================================
   Kellington Remodeling & Restoration — site stylesheet

   One file for the whole site, written mobile-first: the base rules are for
   phones, and the two @media blocks at the end of each section add the
   tablet (768px+) and desktop (1025px+) changes.

   Contents
     1. Fonts
     2. Design tokens (colours, fonts, spacing) — change these first
     3. Base elements
     4. Layout helpers: container, section, split
     5. Type: headings, eyebrow, text
     6. Buttons
     7. Header and navigation
     8. Footer
     9. Home: hero, service cards, banner
    10. Reviews strip
    11. Quote form
    12. Areas we serve
    13. City pages
    14. Contact page
    15. Service Area page
    16. About page
    17. Reviews page
    18. FAQs page
    19. Gallery page and lightbox
    20. Resources and posts
    21. Page not found
    22. Entrance animations
    23. Utilities
   ========================================================================== */


/* 1. Fonts ---------------------------------------------------------------- */

@font-face { font-family: "Outfit";  src: url("/fonts/outfit-variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/fonts/poppins-400.woff2") format("woff2");        font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/fonts/poppins-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/fonts/poppins-500.woff2") format("woff2");        font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/fonts/poppins-600.woff2") format("woff2");        font-weight: 600; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/fonts/poppins-700.woff2") format("woff2");        font-weight: 700; font-display: swap; }


/* 2. Design tokens -------------------------------------------------------- */

:root {
  --navy:        #24344d;   /* header, footer, buttons, dark sections */
  --blue:        #a2c3e1;   /* light-blue sections, input borders */
  --blue-pale:   #e0ebf6;   /* the paler blue band (blue at 35%) */
  --text:        #242424;
  --white:       #ffffff;
  --star:        #6aab6e;

  --font-heading: "Outfit", "Trebuchet MS", sans-serif;
  --font-body:    "Poppins", "Segoe UI", Arial, sans-serif;

  --content-width: 1052px;  /* the text column */
  --wide-width:    1322px;  /* the service-card grid */
  --gutter:        36px;    /* space either side of the content on small screens */
  --section-space: 40px;    /* space above and below each section */
  --radius:        6px;
  --header-height: 72px;
}

@media (min-width: 768px) {
  :root { --gutter: 43px; --section-space: 50px; --header-height: 92px; }
}

/* Desktop, as on the old site: the side space grows with the window and the
   content column narrows slowly -- 1052px at 1440, 1014px at 1920, 963px at
   2560 -- so everything sized from it keeps live's proportions at any width */
@media (min-width: 1025px) {
  :root { --gutter: calc(4vw + 16px); --content-width: calc(1168px - 8vw); }
}


/* 3. Base elements -------------------------------------------------------- */

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

html { scroll-padding-top: calc(var(--header-height) + 16px); }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

p { margin: 0 0 24px; }
p:last-child { margin-bottom: 0; }
p.no-gap { margin-bottom: 0; }   /* runs straight into the next paragraph */


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

.container {
  width: min(var(--content-width), 100% - 2 * var(--gutter));
  margin-inline: auto;
}
.container--narrow { max-width: 703px; }
@media (min-width: 1025px) { .container--narrow { max-width: 909px; } }

.section { padding-block: var(--section-space); }
.section--flush-top { padding-top: 0; }
.section--navy  { background: var(--navy); color: var(--white); }
@media (min-width: 768px) { .section--navy { padding-block: 66px; } }
.section--blue  { background: var(--blue); }
.section--pale  { background: var(--blue-pale); }

/* Two columns: text beside an image. Stacks on phones, image last. */
.split { display: grid; gap: 32px; align-items: start; }
/* on phones each photo is 303:272 unless it says otherwise: style="--photo-ratio: 303 / 240" */
.split__image { width: 100%; border-radius: 5px; object-fit: cover; aspect-ratio: var(--photo-ratio, 303 / 272); }
.split__image--right { object-position: right center; }   /* keep the right-hand side of the photo in view */
.split__image--bottom-left { object-position: left bottom; }

@media (min-width: 768px) {
  .split { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
  .split__image { aspect-ratio: auto; height: 578px; }
  .split--image-first .split__image { height: 636px; }
}

/* Centred from tablet up; phones keep text left-aligned, as on the old site */
@media (min-width: 768px) {
  .text-center { text-align: center; }
  .text-center .button-row { justify-content: center; }
}

.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 30px; margin-top: 36px; }


/* 5. Type ----------------------------------------------------------------- */

.heading {
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.26;
  text-transform: uppercase;
}
.heading--display { font-size: 30px; }
.heading--on-image { color: var(--white); text-shadow: 3px 3px 15px var(--navy); }

/* The letter-spaced line under a heading */
.eyebrow {
  margin: 0 0 20px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.section--navy .heading { margin-bottom: 20px; }
.section--navy a:not(.button) { color: inherit; }

/* A list with a tick before each item */
.checklist { margin: 16px 0 24px; padding: 0 0 0 12px; list-style: none; }
.checklist li { position: relative; padding-left: 22px; }
.checklist li::before {
  content: "";
  position: absolute; left: 2px; top: 0.55em;
  width: 8px; height: 4px;
  border: solid currentColor; border-width: 0 0 1.5px 1.5px;
  transform: rotate(-45deg);
}

/* A bold list with a small "+" before each item: the city lists */
.plus-list { margin: 0; padding: 0; list-style: none; font-weight: 700; }
.plus-list li { position: relative; margin-left: 32px; }
.plus-list li::before { content: "+"; position: absolute; left: -17px; font-size: 12px; font-weight: 400; }

@media (min-width: 768px) {
  .heading { font-size: 34px; }
  .heading--display { font-size: 40px; }
  .eyebrow { font-size: 20px; }
}
@media (min-width: 1025px) {
  .heading { font-size: 48px; }
  .heading--display { font-size: 55px; }
  .eyebrow { font-size: 24px; }
}


/* 6. Buttons -------------------------------------------------------------- */

.button {
  display: inline-block;
  min-width: 208px;
  padding: 18px 24px;
  border: 1px solid var(--navy);
  border-radius: var(--radius);
  background: var(--navy);
  color: var(--white);
  font: 400 18px/1.4 var(--font-body);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.button:hover { background: #33496b; }

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

.button--light { background: var(--white); border-color: var(--white); color: var(--navy); }
.button--light:hover { background: var(--blue); }

@media (min-width: 768px) {
  .button { font-size: 16px; }
}


/* 7. Header and navigation ------------------------------------------------
   Phones and tablets: call icon, logo, menu button; the menu slides down.
   Desktop (1025px+): logo, the menu in a row, the phone button.          */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--navy);
  color: var(--white);
}

.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-height);
  padding-inline: 24px;
}

.site-header__call,
.site-header__menu-button {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  padding: 0; border: 0; background: none;
  color: var(--white); cursor: pointer;
}
.site-header__call svg { width: 28px; fill: currentColor; }
.site-header__menu-button svg { width: 32px; }

.site-header__logo img { width: 146px; }
.site-header__phone { display: none; }

.site-nav {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0;
  max-height: calc(100vh - var(--header-height));
  overflow-y: auto;
  background: var(--navy);
  border-top: 1px solid rgba(255, 255, 255, .15);
}
.site-nav.is-open { display: block; }

.site-nav__list, .site-nav__dropdown { margin: 0; padding: 0; list-style: none; }

.site-nav__item { position: relative; border-bottom: 1px solid rgba(255, 255, 255, .15); }

.site-nav a, .site-nav__label {
  display: block;
  padding: 14px 24px;
  border: 0; background: none;
  color: var(--white);
  font: 400 16px/1.4 var(--font-body);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.site-nav__dropdown a { padding-left: 40px; text-transform: none; }

/* The small arrow that opens a dropdown */
.site-nav__toggle {
  position: absolute; top: 0; right: 12px;
  width: 48px; height: 50px;
  border: 0; background: none; color: var(--white); cursor: pointer;
}
.site-nav__toggle::before, .site-nav__label::after {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  border: solid currentColor; border-width: 0 1.5px 1.5px 0;
  transform: translateY(-3px) rotate(45deg);
}
.site-nav__label::after { display: none; }

.site-nav__dropdown { display: none; }
.site-nav__item.is-open > .site-nav__dropdown { display: block; }
.site-nav__item.is-open > .site-nav__toggle::before { transform: translateY(1px) rotate(-135deg); }

@media (min-width: 768px) {
  .site-header__logo img { width: 234px; }
}

/* Desktop, as on the old site: the side space, the logo and the phone
   button grow with the window (up to 219px and 196px wide); the menu is
   centred between them, and when it does not fit it wraps whole items onto
   a second row and the header grows to fit. */
@media (min-width: 1025px) {
  .site-header__inner { height: auto; min-height: var(--header-height); padding: 16px calc(4vw + 17px); }
  .site-header__call, .site-header__menu-button { display: none; }
  .site-header__logo { flex: none; }
  .site-header__logo img { width: min(219px, 15.6vw - 32px); }
  .site-header__phone { display: block; flex: none; min-width: min(196px, 15.6vw - 32px); padding: 12px 2px; font-size: 16px; }

  .site-nav {
    display: block; position: static; flex: 1;
    max-height: none; overflow: visible;
    background: none; border: 0;
    /* centred on the page: past 1440px the logo outgrows the phone button
       (219px vs 196px), so the right side takes up the difference */
    margin-inline: 20px calc(20px + clamp(0px, 15.6vw - 228px, 23px));
  }
  .site-nav__list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
  .site-nav__item { border: 0; display: flex; align-items: center; white-space: nowrap; }

  .site-nav__item > a, .site-nav__label { padding: 6.5px 15px; }
  .site-nav__label::after { display: inline-block; margin-left: 14px; width: 6px; height: 6px; border-width: 0 1px 1px 0; }   /* 165px for Our Services */
  .site-nav__label + .site-nav__toggle { display: none; }
  .site-nav__toggle { position: static; width: auto; height: auto; padding: 0 20px 0 0; margin-left: -6px; }   /* 105px for About, as on the old site */
  .site-nav__toggle::before { width: 6px; height: 6px; border-width: 0 1px 1px 0; }

  /* The current page is marked with a line above and below */
  .site-nav__item.is-current > a,
  .site-nav__item.is-current > .site-nav__label {
    box-shadow: inset 0 1px 0 var(--white), inset 0 -1px 0 var(--white);
  }
  .site-nav__item > a:hover, .site-nav__label:hover { box-shadow: inset 0 -1px 0 var(--white); }

  .site-nav__dropdown {
    position: absolute; top: 100%; left: 0;
    min-width: 260px;
    padding: 8px 0;
    background: var(--white);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
  }
  .site-nav__item.has-dropdown:hover > .site-nav__dropdown,
  .site-nav__item.has-dropdown:focus-within > .site-nav__dropdown { display: block; }
  .site-nav__dropdown a { padding: 12px 30px 12px 15px; color: var(--text); white-space: nowrap; }
  .site-nav__dropdown a:hover, .site-nav__dropdown a[aria-current] { background: var(--blue-pale); }
}


/* 8. Footer --------------------------------------------------------------- */

.site-footer {
  padding: 44px var(--gutter) 60px;
  background: var(--navy);
  color: var(--white);
  font-size: 16px;
  text-align: center;
}
.site-footer a { text-decoration: none; }

.site-footer__columns {
  display: grid; gap: 44px;
  width: min(var(--content-width), 100%);
  margin: 0 auto;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .8);
}
.site-footer__column img { width: 250px; margin: 0 auto 14px; }

.site-footer__hours {
  display: grid; grid-template-columns: auto auto; justify-content: center; gap: 14px 40px;
  margin: 0; font-size: 16px;
}
.site-footer__hours dd { margin: 0; }

.site-footer__heading {
  margin: 0 0 12px;
  font: 400 20px/1.2 var(--font-heading);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.site-footer__heading:not(:first-child) { margin-top: 20px; }

.site-footer__links { margin: 0; padding: 0; list-style: none; }
.site-footer__links li + li { margin-top: 22px; }
.site-footer__links a { letter-spacing: 0.03em; }
.site-footer__links a[aria-current] { padding-bottom: 4px; border-bottom: 1px solid currentColor; }

.site-footer__social { display: flex; justify-content: center; gap: 22px; margin: 16px 0 26px; padding: 0; list-style: none; }
.site-footer__social svg { width: 22px; fill: currentColor; }

.site-footer__copyright { margin: 0; font-size: 12px; }

@media (min-width: 768px) {
  .site-footer { padding-top: 40px; }
  .site-footer__columns { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .site-footer__column:last-child { grid-column: 1 / -1; }   /* Services: its own row on tablets */
  .site-footer__social svg { width: 24px; }
  .site-footer__heading { font-size: 24px; }
}


@media (min-width: 1025px) {
  /* live's proportions: 30% / 27.5% / 32.4% of the content column */
  .site-footer__columns { grid-template-columns: 30% 27.5% 32.4%; column-gap: 5.05%; }
  .site-footer__column:last-child { grid-column: auto; }
  .site-footer__column img { width: 246px; }
  .site-footer__hours { grid-template-columns: 41% 59%; column-gap: 0; justify-content: stretch; }
  .site-footer__social svg { width: 26px; }
}


/* 9. Home ----------------------------------------------------------------- */

/* The video banner with the logo */
.hero {
  position: relative;
  display: grid; place-items: center;
  height: 332px;
  overflow: hidden;
  background: var(--blue);
}
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__content { position: relative; display: grid; justify-items: center; gap: 24px; width: min(474px, 100% - 2 * var(--gutter)); }
.hero__logo { width: 208px; }
.hero__button { width: 100%; padding: 12px; font-size: 16px; }

@media (min-width: 768px) {
  .hero { height: 430px; }
  .hero__logo { width: 400px; }
}
@media (min-width: 1025px) {
  .hero { height: 100vh; }   /* the whole window, as on the old site */
  .hero__content { padding-top: 51px; }
  .hero__logo { width: 443px; }
}

/* Photo cards linking to each service */
.service-cards {
  display: grid; gap: 20px;
  width: min(var(--wide-width), 100% - 40px);
  margin-inline: auto;
}
.service-cards + .service-cards { margin-top: 20px; }

.service-card {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 350px;
  padding: 16px;
  overflow: hidden;
  border-radius: 5px;
  color: var(--white);
  text-decoration: none;
}
.service-card__image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
/* darkens the bottom of the photo so the text stays readable */
.service-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, #333 17%, transparent 100%);
  opacity: .5;
}

.service-card__title {
  margin: 0;
  padding-bottom: 13px;
  border-bottom: 2px solid var(--white);
  font: 600 20px/1.5 var(--font-body);
  letter-spacing: 4px;
  text-transform: uppercase;
}
.service-card__text { margin: 15px 0 11px; font-size: 16px; line-height: 1.5; }
.service-card__more { padding: 8px 0; font-size: 15px; }
.service-card__more::after {
  content: "";
  display: inline-block;
  width: 16px; height: 16px;
  margin-left: 12px;
  vertical-align: -2px;
  background: currentColor;
  /* a bold double chevron */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 1.5 3.5 0l6 8-6 8L1 14.5 5.8 8zm6 0L9.5 0l6 8-6 8L7 14.5 11.8 8z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 1.5 3.5 0l6 8-6 8L1 14.5 5.8 8zm6 0L9.5 0l6 8-6 8L7 14.5 11.8 8z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.service-card:hover .service-card__image { transform: scale(1.03); }
.service-card__image { transition: transform .4s; }

@media (max-width: 767px) {
  .service-cards--two .service-card { min-height: 0; }   /* as tall as the text */
  .service-cards + .service-cards { margin-top: 45px; }
}
@media (min-width: 768px) {
  .service-cards { gap: 10px 16px; width: min(var(--wide-width), 100% - 54px); }
  .service-cards--four { grid-template-columns: repeat(2, 1fr); }
  .service-cards--two  { grid-template-columns: repeat(2, 1fr); }
  .service-card { min-height: 444px; }
  .service-cards + .service-cards { margin-top: 100px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  /* the text starts 240px down, so a card with more text grows, as on the old site */
  .service-cards--four .service-card { padding-top: 240px; }
  .service-cards--two .service-card { min-height: 921px; }
}
@media (min-width: 1025px) {
  .service-cards { gap: .9vw; width: 92%; }   /* grows with the window, as on the old site */
  .service-cards + .service-cards { margin-top: 100px; }
  .service-cards--four { grid-template-columns: repeat(4, 1fr); }
  .service-card { min-height: 577px; }
}

/* The bands' spacing, as on the old site */
.home-intro { padding-block: 41px 16px; }
.home-services { padding-block: 20px 25px; }
.home-rebuild { padding-block: 66px; }
.home-approach { padding-block: 41px; }
.home-grounded { padding-block: 41px 22px; }
.home-grounded .button-row { gap: 16px 36px; }
.home-reviews { padding-top: 59px; padding-bottom: 0; }
.home-reviews .reviews { padding-bottom: 0; }   /* the quote form starts where the cards end */
@media (min-width: 768px) {
  .home-intro { padding-bottom: 41px; }
  .home-services { padding-block: 50px 53px; }
  .home-approach .split { align-items: start; }
  .home-grounded { padding-bottom: 162px; }
  .home-grounded .button-row { margin-top: 52px; }
  .home-reviews { padding-top: 66px; }
}
@media (min-width: 1025px) {
  .home-grounded { padding-bottom: 32px; }
  .home-reviews { padding-top: 81px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .home-grounded .container--narrow { max-width: none; }   /* the text runs the full width on tablets, */
  .home-grounded .heading { max-width: 703px; margin-inline: auto; }   /* the heading does not */
}

/* "Built on family values": the heading band. Pale blue on phones and
   tablets, the full blue on desktop -- as on the old site. */
.banner { background: var(--blue-pale); }
.banner .button { margin-top: 4px; }
@media (min-width: 1025px) {
  .banner { background: var(--blue); }
  .split { align-items: start; }
}
@media (min-width: 768px) {
  .banner { padding-block: 40px; }
  .banner .heading { margin-bottom: 8px; }
}


/* Service pages ----------------------------------------------------------
   Intro: text beside one photo (or two), photo below the text on tablets
   and phones. Then bands of text, a grid of questions, and "topics".     */

.split--intro { align-items: start; }
.split__images { display: grid; gap: 24px; }

/* The intro band sits 41px from the bands around it, not 50 (as on About) */
.service-intro { padding-block: 41px; }
/* 16px under every heading on these pages (as on About), and under the intro's eyebrow */
.service-page .heading,
.service-intro .eyebrow { margin-bottom: 16px; }
.service-intro .eyebrow { line-height: 1.26; }
.service-intro .split__text p:last-of-type { margin-bottom: 16px; }   /* the button sits closer */

@media (min-width: 768px) {
  .split--intro { grid-template-columns: 1fr; gap: 56px; }
  /* each photo's height can be set on the image: style="--photo-height: 474px" */
  .split--intro .split__image { aspect-ratio: auto; height: var(--photo-height, 578px); }
}
@media (min-width: 1025px) {
  /* text and photos as wide as on the old site at every width, the rest between them */
  .split--intro { grid-template-columns: calc(51.39% - 15.5px) calc(44.46% - 17.8px); justify-content: space-between; column-gap: 0; }
  /* text shorter than the photos is centred beside them */
  .service-intro .split__text { align-self: center; }
  .service-intro .split--intro > .split__image { margin-top: 9px; }   /* one photo sits a little lower */
}

/* A band with more room above and below */
@media (min-width: 768px) {
  .section--roomy { padding-block: 66px; }
}

/* The questions band: 41px above and 66px below, 16px under the heading and
   between its parts, every line 25px -- the same as About's closing band */
.service-faq { padding-block: 41px 66px; }
.service-faq p { margin-bottom: 16px; line-height: 25px; }
.service-faq p:last-child { margin-bottom: 0; }

/* Questions and answers, two to a row; an odd last one is centred. The two
   in a row share a bottom line, so a longer question starts higher. */
.qa-grid { display: grid; gap: 24px; align-items: end; margin: 16px 0; padding: 0; list-style: none; }
.qa { padding-bottom: 10px; border-bottom: 1px solid var(--blue); }
.qa__question { margin: 0 0 5px; font: 700 16px/25px var(--font-body); }

@media (min-width: 768px) {
  .qa-grid { grid-template-columns: 1fr 1fr; column-gap: 24px; padding-inline: 4px; }
  .qa:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(63.3% + 40px); }
}
@media (min-width: 1025px) {
  /* two columns of 46 % of the text column, centred, as on the old site */
  .qa-grid { grid-template-columns: repeat(2, 46%); column-gap: calc(4% + 8px); justify-content: center; padding-inline: 0; }
  .qa:last-child:nth-child(odd) { width: calc(47.92% - 3.83px); }   /* one column's width, of the two it spans */
}

/* The same grid as a list of bold one-line statements (the About page) */
.qa-grid--statements { font-weight: 700; }

/* Topics: centred letter-spaced headings, each over a block of text */
.topics .eyebrow { margin: 0; line-height: 1.26; text-align: center; }
.topics .eyebrow--spaced { margin-bottom: 24px; }   /* a blank line under the heading */

/* A bold line introducing a list */
.lead-in { margin-bottom: 24px; }

/* Short centred lists: with bullets, or --plain as simple lines */
.center-list { margin: 0 0 24px; padding: 0 0 0 32px; list-style: none; }   /* the old site kept a list's usual indent, so the lines sit 16px right of centre */
/* the bullet hangs in front of the line, as on the old site, so it never
   pushes a word onto the next line */
.center-list li { text-indent: -24px; }
.center-list li::before { content: "•"; display: inline-block; width: 16px; margin-right: 8px; text-indent: 0; }
.center-list--plain { padding-left: 0; }
.center-list--plain li { text-indent: 0; }
.center-list--plain li::before { content: none; }

.button--small { padding-block: 14px; }


/* 10. Reviews strip --------------------------------------------------------
   Cards in one row that drift slowly left; js/site.js moves them. Hovering
   pauses it. Without JavaScript the row scrolls sideways by hand.         */

.reviews {
  width: min(1260px, 100%);
  margin-inline: auto;
  overflow-x: auto;
  padding-block: 10px 30px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 2%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 2%, #000 96%, transparent);
  scrollbar-width: none;
}
.reviews::-webkit-scrollbar { display: none; }

.reviews__track { display: flex; align-items: flex-start; gap: 22px; width: max-content; margin: 0; padding: 0 24px; list-style: none; }

.review-card {
  width: 300px;
  padding: 28px 24px;
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0 4px 14px rgba(36, 52, 77, .12);
}
.review-card__stars { margin: 0; color: var(--star); font-size: 20px; letter-spacing: 3px; line-height: 1; }
.review-card__stars::after { content: "\201C"; display: block; margin-top: 8px; font: 40px/0.6 Georgia, serif; letter-spacing: 0; }
.review-card__quote { margin: 10px 0 14px; padding-bottom: 12px; border-bottom: 1px solid #eee; font-size: 14.8px; font-style: italic; line-height: 1.65; }
.review-card__name { margin: 0; font-size: 14px; font-weight: 700; }
@media (max-width: 767px) { .review-card { width: 260px; } }


/* 11. Quote form ---------------------------------------------------------- */

.quote-form {
  width: min(1085px, 100% - 40px);
  margin-inline: auto;
  padding: 16px 16px 16px;
  background: var(--white);
  box-shadow: 3px 0 11px rgba(0, 0, 0, .25);
}
.quote-form .heading { margin: 8px 0 20px; }

.quote-form__fields { display: grid; gap: 18px 16px; }

.field { display: block; font-size: 16px; }
.field__required { color: #e00; }
.field input, .field textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 0 10px;
  height: 40px;
  border: 1px solid var(--blue);
  border-radius: 0;
  font: inherit;
  color: var(--text);
  background: var(--white);
}
.field textarea { height: 80px; padding: 10px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--navy); outline-offset: 1px; }

.quote-form .button { justify-self: start; min-width: 176px; margin-top: 80px; padding: 12px 24px; }

.quote-form__message { padding: 16px; border-radius: var(--radius); }
.quote-form__message--success { background: #e8f4ea; }
.quote-form__message--error   { margin-bottom: 16px; background: #fbeaea; }

@media (min-width: 768px) {
  .quote-form { padding: 16px 16px 16px; }
  .quote-form .heading { margin-left: 20px; }
  .quote-form__fields { grid-template-columns: 1fr 1fr; }
  .field--wide { grid-column: 1 / -1; }
  .quote-form .button { min-width: 192px; margin: 10px 0 0 6px; }
}
/* desktop: the card is the content column plus 16px either side */
@media (min-width: 1025px) {
  .quote-form { width: calc(min(var(--content-width), 100% - 2 * var(--gutter)) + 32px); }
}


/* 12. Areas we serve ------------------------------------------------------ */

.areas { padding-bottom: 0; }
@media (min-width: 768px) { .areas { padding-top: 83px; } }
.areas__inner { display: grid; gap: 24px; align-items: center; margin-bottom: 40px; }
@media (min-width: 768px) { .areas__inner { margin-bottom: 100px; } }
.areas__heading { margin: 0; }

.areas__list {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 12px;
  margin: 0; padding: 0; list-style: none;
  font-size: 16px; line-height: 1.5; text-transform: uppercase;
}

.areas__map { width: 100%; height: 536px; border: 0; }

@media (min-width: 768px) {
  .areas__list { grid-template-columns: repeat(3, 1fr); gap: 20px 24px; font-size: 18px; line-height: 1.5; }
  .areas__map { height: 710px; }
}
@media (min-width: 1025px) {
  .areas__inner { grid-template-columns: 28.1% 1fr; column-gap: 6.9%; }   /* 330px and 48px at full width */
  .areas__map { height: 536px; }
}


/* 13. City pages ----------------------------------------------------------
   /service-area/<city>-mn: plain text bands, set tighter than the service
   pages -- 16px under every heading and paragraph, the last one included. */

.city { padding-block: 40px; }
@media (min-width: 1025px) { .city--roomy { padding-block: 66px; } }

.city .heading,
.city .eyebrow,
.city p { margin-bottom: 16px; }

.city__list { margin: 0 0 16px; padding-left: 32px; }

.city .button { line-height: 22px; }
.city__action { margin-top: 32px; text-align: center; }   /* the button is centred on phones */
@media (min-width: 768px) {
  .city .button { font-size: 16px; }
  .city__action { text-align: left; }
}


/* 14. Contact page -------------------------------------------------------- */

/* The intro beside the form. The form's fields sit 14px wider than the text
   column on each side, as on the old site, so the grid is that much wider
   and the text is padded back in. */
.contact-intro { padding: 16px 0 56px; }
.contact-intro__inner {
  display: grid; gap: 41px;
  width: min(1195px, 100% - 2 * (var(--gutter) - 14px));
  margin-inline: auto;
}
.contact-intro__text { padding-inline: 14px; }
.contact-intro .heading--display,
.contact-intro .eyebrow { margin-bottom: 20px; }
.contact-intro__text p { margin-right: 2%; }   /* the old site set the paragraphs a little narrower than the heading */
.contact-intro__text a { color: inherit; text-decoration: none; }

@media (min-width: 768px) {
  .contact-intro { padding-top: 25px; }
  .contact-intro__inner { grid-template-columns: 1fr 1fr; gap: 38px; align-items: center; }
}
/* Desktop: the form takes 47.7% of the row (570px at full width), so the
   two columns shrink together on narrow desktops rather than overflow */
@media (min-width: 1025px) {
  .contact-intro__inner { width: min(1195px, 100% - 4px); grid-template-columns: 1fr 47.7%; column-gap: 4.4%; }
}

/* The quote form without its card (includes/quote-form.php, $form_plain) */
.quote-form--plain { width: auto; margin: 0; padding: 0; background: none; box-shadow: none; }
.quote-form--plain .heading { margin: 0 0 25px 14px; }
.quote-form--plain .quote-form__fields { gap: 18px 14px; }
.quote-form--plain .field input,
.quote-form--plain .field textarea { margin-top: 3px; }
.quote-form--plain .button { min-width: 200px; margin: 8px 0 0; padding-block: 16px; line-height: 21px; }
@media (min-width: 768px) {
  .quote-form--plain .heading { margin-left: 14px; }
  .quote-form--plain .button { min-width: 192px; margin: 10px 0 0 5px; padding-block: 12px; font-size: 16px; line-height: 19px; }
}

/* The navy details card beside the photo */
.contact-details-section { padding-bottom: 128px; }
.contact-details { display: grid; gap: 64px; justify-items: center; width: calc(100% - 40px); margin-inline: auto; }
.contact-card {
  width: 100%;
  padding: 16px 10px 17px 16px;
  border-radius: 15px;
  background: var(--navy);
  color: var(--white);
}
.contact-card__heading { margin: 0 0 24px; font: 700 20px/1.25 var(--font-heading); text-transform: uppercase; }
.contact-card__row { display: flex; align-items: flex-start; gap: 13px; margin: 0 0 26px; }
.contact-card__row:last-child { margin-bottom: 0; }
.contact-card__row svg { flex: none; width: 30px; height: 30px; margin-top: -3px; }
.contact-card__row a { color: inherit; text-decoration: none; }
.contact-card__hours { display: grid; grid-template-columns: auto 1fr; gap: 11px 16px; flex: 1; max-width: 677px; margin: 0; font-size: 13px; line-height: 19px; }
.contact-card__hours dd { margin: 0; text-align: right; }
.contact-details__photo { width: min(303px, 100%); height: auto; }

@media (min-width: 768px) {
  .contact-details-section { padding-bottom: 122px; }
  .contact-details { gap: 96px; width: calc(100% - 54px); }
  .contact-card__heading { font-size: 21px; }
  .contact-card__hours { gap: 12px 16px; font-size: 16px; line-height: 23px; }
  .contact-details__photo { width: 100%; max-width: 814px; }
}
@media (min-width: 1025px) {
  .contact-details-section { padding-bottom: 50px; }
  /* card and photo in proportion: 434px and 575px at full width */
  /* the row runs from 16px left of the content column to its right edge */
  .contact-details { grid-template-columns: 434fr 575fr; column-gap: 5.5%; align-items: center; position: relative; left: -8px; width: calc(min(var(--content-width), 100% - 2 * var(--gutter)) + 16px); }
  .contact-card { padding: 16px 16px 59px; }
  .contact-card__heading { font-size: 25px; }
  .contact-card__row--phone { font-size: 18px; }
}

/* The reviews strip, under a 30% wash of the light blue: over white on
   phones and tablets; on desktop, over a photo of shingles that stays put
   as the page scrolls */
.contact-reviews { --wash: rgb(162 195 225 / .3); padding-top: 58px; background: linear-gradient(var(--wash), var(--wash)); }
@media (min-width: 768px) { .contact-reviews { padding-top: 66px; } }
@media (min-width: 1025px) {
  .contact-reviews {
    padding-block: 82px 62px;
    background:
      linear-gradient(var(--wash), var(--wash)),
      var(--navy) url("/images/shingles-background-1280.jpg") center / cover fixed;
  }
  .contact-reviews .reviews { width: min(996px, 100%); }
}

/* The map beside the city list. The map runs to the left edge and takes
   48% of the window; the text keeps 4vw + 16px clear of the right edge. */
.contact-areas { display: grid; }
.contact-areas__map { width: 100%; height: 510px; border: 0; }
.contact-areas__text { padding: 25px var(--gutter) 41px; }
.contact-areas .heading { margin-bottom: 16px; }

@media (min-width: 768px) {
  .contact-areas { grid-template-columns: 48% minmax(0, 1fr); align-items: center; }
  .contact-areas__map { height: 710px; }
  .contact-areas__text { padding: 0 calc(4vw + 16px) 0 20px; }
}
/* Desktop: the three lists side by side, the spare room shared around them;
   on narrow desktops the columns narrow and long names wrap */
@media (min-width: 1025px) {
  .contact-areas__map { height: 510px; }
  .contact-areas__text { padding-left: 50px; }
  .contact-areas__lists { display: flex; justify-content: space-around; gap: 20px; }
  .contact-areas .plus-list { min-width: 0; }
}


/* 15. Service Area page --------------------------------------------------

   /service-area: the heading, button and map, then the 21 cities; below,
   a card for each city that has its own page. */

.areas-page { padding-block: 25px; }
.areas-page__inner { width: min(var(--content-width), 100% - 2 * var(--gutter)); margin-inline: auto; }
.areas-page__intro { display: flex; flex-direction: column; align-items: flex-start; }
.areas-page .heading--display { align-self: stretch; margin-bottom: 16px; }
.areas-page__button { min-width: 208px; padding: 14px 24px; font-size: 16px; line-height: 22px; }
.areas-page__map { align-self: stretch; width: 100%; height: 374px; margin-top: 16px; border: 0; }
.areas-page__lists { padding: 29px 20px 16px; }

/* Tablet: heading, button and map on the left, centred; the cities as one
   list on the right. (The old site squeezed three columns in there and broke
   the names mid-word.) */
@media (min-width: 768px) {
  .areas-page { padding-block: 50px; }
  .areas-page__inner {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 66px; align-items: center;
  }
  .areas-page__intro { align-items: center; padding-block: 16px; text-align: center; }
  .areas-page__lists { padding: 50px 0 50px 34px; }
}

/* Desktop: everything centred in one column, the map at most 1031px wide,
   the three lists side by side with the spare room shared around them */
@media (min-width: 1025px) {
  .areas-page__inner { display: block; }
  .areas-page__map { align-self: center; max-width: 1031px; }
  .areas-page__lists { display: flex; justify-content: space-around; gap: 20px; margin-top: 24px; padding: 50px 0 50px 34px; }
}

/* The city cards: a dark photo under a 93% wash of warm grey, which leaves
   only a soft vignette of it showing */
.city-cards-section { padding-block: 40px; }
.city-cards { display: grid; gap: 15px; }
.city-card {
  --wash: rgb(237 235 230 / .93);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  height: 204px; padding: 15px;
  background: linear-gradient(var(--wash), var(--wash)), var(--navy) url("/images/dark-vignette-texture-1280.jpg") center / cover;
  text-align: center;
}
.city-card__name { margin: 0; font: 700 18px/normal var(--font-heading); text-transform: uppercase; }
.city-card__button { width: 100%; min-width: 0; margin-bottom: 10px; padding: 13.5px 0; font-size: 16px; line-height: 22px; }

@media (min-width: 768px) {
  .city-cards-section { padding-block: 65px; }
  .city-cards { grid-template-columns: 1fr 1fr; }
  .city-card { height: 235px; }
  .city-card__name { font-size: 24px; }
  .city-card__button { width: 160px; padding-block: 12.5px; }
}
@media (min-width: 1025px) {
  .city-cards-section { padding-block: 66px; }
  .city-cards { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .city-card { height: 233px; }
  .city-card__name { font-size: 30px; }
  .city-card__button { width: 150px; }
}


/* 16. About page ---------------------------------------------------------
   The service-page layout, spaced as the old site spaced this page: 41px
   bands where the service pages have 50, and 16px under every heading. */

.about .heading,
.about .eyebrow { margin-bottom: 16px; }
.about .eyebrow { line-height: 1.26; }
.about-intro { padding-block: 41px; }
.about-intro .split__text p:last-of-type { margin-bottom: 16px; }   /* the button sits closer here */
.about-closing { padding-block: 41px 66px; }
.about-closing p,
.about-closing .qa { line-height: 25px; }
@media (min-width: 768px) {
  .about-intro .split { row-gap: 56px; }
}
@media (min-width: 1025px) {
  .about-intro .split__image { margin-top: 9px; }
}


/* 17. Reviews page -------------------------------------------------------
   /reviews: the heading with the Google badge, one featured review, then
   every review from data/reviews.php as a grid of cards. */

.reviews-intro { padding-block: 46px 41px; }
.reviews-intro__inner { width: min(var(--content-width), 100% - 2 * var(--gutter)); margin-inline: auto; }
.reviews-intro .heading--display { margin: 0 0 41px; }
.reviews-intro__actions { display: flex; flex-direction: column; gap: 24px; }
.reviews-intro__actions .button { width: 100%; padding-block: 14px; font-size: 16px; line-height: 22px; }
.reviews-intro__badge img { width: 100%; }

/* Tablet: the heading on the left, button and badge stacked on the right */
@media (min-width: 768px) {
  .reviews-intro { padding-block: 66px; }
  .reviews-intro__inner { display: grid; grid-template-columns: 1fr 1fr; column-gap: 66px; align-items: center; }
  .reviews-intro .heading--display { margin: 0; text-align: center; }
  .reviews-intro__badge img { width: 359px; }
}
/* Desktop: all centred, the button and a smaller badge side by side */
@media (min-width: 1025px) {
  .reviews-intro__inner { display: block; }
  .reviews-intro__actions { flex-direction: row; justify-content: center; align-items: center; gap: 42px; margin-top: 32px; }
  .reviews-intro__actions .button { width: auto; }
  .reviews-intro__badge img { width: 196px; }
}

/* The featured review beside its photo */
.featured-review { padding-block: 41px; }
.featured-review__inner { display: grid; row-gap: 32px; }
.featured-review__text { margin: 0; }
.featured-review__mark { display: block; width: 50px; height: 50px; margin-bottom: 16px; color: var(--navy); }
.featured-review blockquote { margin: 0 0 16px; }
.featured-review__stars { display: flex; gap: 7.6px; margin: 0 0 16px; color: var(--navy); }
.featured-review__stars svg { width: 22px; height: 22px; }
.featured-review__name { font-weight: 700; font-style: italic; color: var(--navy); }
.featured-review__photo { width: 100%; height: auto; aspect-ratio: 303 / 272; object-fit: cover; border-radius: 5px; }

@media (min-width: 768px) {
  .featured-review__inner { grid-template-columns: 1fr 1fr; column-gap: 58px; align-items: center; }
  .featured-review__text { font-size: 17px; line-height: 1.5; }
  .featured-review__mark { width: 60px; height: 60px; }
  .featured-review__stars { gap: 7.5px; }
  .featured-review__stars svg { width: 26px; height: 25px; }
  .featured-review__photo { aspect-ratio: auto; height: 468px; }
}
@media (min-width: 1025px) {
  .featured-review__inner { grid-template-columns: 586fr 401fr; column-gap: 64px; align-items: start; }
  .featured-review__text { font-size: 20px; }
}

/* The grid of cards, under a 36% wash of the light blue: over white on
   phones and tablets; on desktop, over the shingles photo, fixed */
.review-wall { --wash: rgb(162 195 225 / .36); padding-block: 41px; background: linear-gradient(var(--wash), var(--wash)); }
.review-wall__grid { display: grid; gap: 20px; align-items: start; margin-block: 0; padding: 40px 16px; list-style: none; }

@media (min-width: 768px) {
  .review-wall { padding-block: 66px; }
  .review-wall__grid { grid-template-columns: 1fr 1fr; padding: 48px 24px; }
}
@media (min-width: 1025px) {
  .review-wall {
    background:
      linear-gradient(var(--wash), var(--wash)),
      var(--blue) url("/images/shingles-background-1280.jpg") left top / cover fixed;
  }
  .review-wall__grid { grid-template-columns: repeat(3, 1fr); padding: 64px 40px; }
}

.review-tile {
  display: flex; flex-direction: column; gap: 14px;
  padding: 28px 24px;
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 4px 24px rgb(58 125 68 / .1), 0 1px 4px rgb(0 0 0 / .06);
  color: #2c3e2d;
}
.review-tile__stars { display: flex; gap: 4px; margin: 0; color: var(--blue); }
.review-tile__stars svg { width: 20px; height: 20px; }
.review-tile__quote { margin: 0; }
.review-tile__quote::before { content: "\201C"; display: block; height: 24px; margin-bottom: 6px; font: 40px/24px Georgia, serif; color: var(--blue); }
.review-tile__quote p { font-size: 14.8px; font-style: italic; line-height: 1.65; }
.review-tile__name { margin: 0; padding-top: 10px; border-top: 1px solid rgb(106 171 110 / .15); font-size: 14px; font-weight: 700; line-height: 21px; }


/* 18. FAQs page ----------------------------------------------------------
   /faqs: the questions as <details>, so they open and close with no
   script; sharing name="faq" keeps one open at a time. */

.faq-intro { padding-block: 41px; }
.faq-intro .heading--display { margin-bottom: 16px; }
.faq-intro__button { min-width: 208px; padding-block: 14px; font-size: 16px; line-height: 22px; }
@media (min-width: 768px) {
  .faq-intro { padding-block: 66px; text-align: center; }
}

.faq-section.section--navy { padding-block: 25px; }
@media (min-width: 768px) { .faq-section.section--navy { padding-block: 50px; } }

/* The list runs 16px wider than the text column on each side */
.faq-list {
  display: grid;
  width: calc(min(var(--content-width), 100% - 2 * var(--gutter)) + 32px);
  margin-inline: auto;
  padding: 1px;
  background: var(--white);
  color: var(--text);
}
.faq__question { display: flex; align-items: center; gap: 8px; padding: 16px; cursor: pointer; list-style: none; }
.faq__question::-webkit-details-marker { display: none; }
.faq__question h2 {
  flex: 1; margin: 0;
  font: 400 18px/normal var(--font-heading);
  letter-spacing: .2em;
  text-transform: uppercase;
}
/* the navy circle with a white chevron, turned up while open */
.faq__question::after {
  content: ""; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1152 1792'%3E%3Cpath fill='%23fff' d='M1075 736q0 13-10 23l-466 466q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
}
.faq[open] .faq__question::after { transform: rotate(180deg); }
.faq__question:focus-visible { outline: 2px solid var(--navy); outline-offset: -4px; }
.faq__answer { padding: 16px; line-height: normal; }

@media (min-width: 768px) {
  .faq__question h2 { font-size: 20px; }
}
@media (min-width: 1025px) {
  .faq__question h2 { font-size: 24px; }
}


/* 19. Gallery page and lightbox -------------------------------------------
   /gallery: square thumbnails, 2 across on phones and 4 from tablets up.
   Each opens its full-size photo in the lightbox (js/site.js). */

.gallery-intro { padding-block: 41px; text-align: center; }
.gallery-intro .heading--display { margin-bottom: 16px; }
.gallery-intro__button { min-width: 208px; padding-block: 14px; font-size: 16px; line-height: 22px; }

.gallery-section.section--navy { padding-block: 41px; }
@media (min-width: 768px) { .gallery-section.section--navy { padding-block: 66px; } }

.gallery { display: grid; grid-template-columns: repeat(2, 1fr); margin-block: 0; padding: 3.5px; list-style: none; }
.gallery li { padding: 3.5px; }
.gallery a { display: block; }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.gallery a:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; }
@media (min-width: 768px) {
  .gallery { grid-template-columns: repeat(4, 1fr); }
}

/* The lightbox: the photo as large as the window allows, on black */
.lightbox {
  width: 100%; max-width: none; height: 100%; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: #000; color: #fff;
}
.lightbox::backdrop { background: #000; }
.lightbox__image {
  position: absolute; inset: 44px 0; margin: auto;
  max-width: 100%; max-height: calc(100% - 88px);
  width: auto; height: auto; object-fit: contain;
}
.lightbox__count { position: absolute; top: 12px; left: 12px; margin: 0; font-size: 13px; opacity: .75; }
.lightbox button {
  position: absolute; display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0; border: 0;
  background: rgb(0 0 0 / .3); color: #fff; cursor: pointer; opacity: .75;
}
.lightbox button:hover, .lightbox button:focus-visible { opacity: 1; }
.lightbox button svg { width: 24px; height: 24px; }
.lightbox__close { top: 0; right: 0; }
.lightbox__prev  { top: 50%; left: 0;  transform: translateY(-50%); }
.lightbox__next  { top: 50%; right: 0; transform: translateY(-50%); }


/* 20. Resources and posts -------------------------------------------------
   /resources: the heading and search box, then a card for every post in
   data/posts.php -- one column on phones, three from tablets up. */

.resources-intro { padding-block: 41px; text-align: center; }
.resources-intro .heading--display { margin-bottom: 16px; line-height: normal; }
.resources-list { padding-block: 41px; }
@media (min-width: 768px) {
  .resources-intro, .resources-list { padding-block: 66px; }
}

/* The search box: the whole column on phones, 47% of it from tablets up */
.post-search { position: relative; margin-inline: auto; }
.post-search input {
  display: block; width: 100%; height: 32px; margin: 0;
  padding: 0 44px 0 15px; border: 1px solid var(--text); border-radius: 0;
  background: none; color: var(--text); font: 14px var(--font-body);
  -webkit-appearance: none; appearance: none;
}
.post-search input::placeholder { color: var(--text); opacity: 1; }
.post-search input::-webkit-search-cancel-button { display: none; }
.post-search button {
  position: absolute; top: 6px; right: 16px; width: 18px; height: 20px;
  padding: 0; border: 0; background: none; color: var(--text); cursor: pointer;
}
.post-search svg { display: block; width: 18px; height: 18px; margin-top: 1px; }
@media (min-width: 768px) { .post-search { width: 47%; } }

.post-cards { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .post-cards { grid-template-columns: repeat(3, 1fr); } }

.post-card {
  padding: 15px; border-radius: 4px;
  background: var(--white); box-shadow: 0 3px 11px rgb(0 0 0 / .25);
}
.post-card__title { margin: 0 0 15px; font: 700 18px/27px var(--font-heading); text-transform: uppercase; }
.post-card__title a { display: block; text-decoration: none; }
.post-card__title a:hover, .post-card__title a:focus-visible { text-decoration: underline; }
.post-card__meta { margin: 0 0 15px; font-size: 12.8px; line-height: normal; }
.post-card__meta time { white-space: nowrap; }
/* the summary is cut off after about four lines, as on the old site; on
   phones the card keeps 15px of space below it */
.post-card .post-card__summary { max-height: 5.5em; margin: 0 0 15px; overflow: hidden; font-size: 14px; line-height: 1.4; }
@media (min-width: 768px) {
  .post-card .post-card__summary { margin-bottom: 0; font-size: 15px; }
}

.resources-list__none { text-align: center; }

/* One page of posts: the arrows are greyed out, as on the old site */
.pager { display: flex; justify-content: center; gap: 6px; padding-block: 8px; }
.pager > span { display: grid; place-items: center; width: 32px; height: 32px; }
.pager__arrow { color: #c9cacd; }
.pager__arrow svg { width: 16px; height: 16px; }
.pager__current { border-radius: 50%; background: var(--navy); color: var(--white); font-size: 14px; font-weight: 700; }


/* A blog post: one narrow column of text on white. (The old site showed its
   posts over the dark shingle photo on desktop, which left them unreadable;
   this is how it showed them on phones and tablets.) The spacing is made
   with margins in a flex column, so a heading's space above adds to the
   paragraph's below instead of overlapping it. */

.post { padding-block: calc(4vw + 16px); }
.post__inner { width: calc(100% - 8vw); margin-inline: auto; }
.post__body {
  display: flex; flex-direction: column;
  padding: calc(92px + 4%) 16px calc(59px + 2%);
}
.post__body .heading--display { margin: 0 0 39px; line-height: normal; }
.post__body h2 {
  margin: 16px 0 39px;
  font: 400 18px/normal var(--font-heading);
  letter-spacing: .2em;
  text-transform: uppercase;
}
/* a one-line heading's box is only as wide as its text, as on the old site */
.post__body h1, .post__body h2 { align-self: flex-start; }
.post__body p { margin-bottom: 58px; }
.post__body p:last-child { margin-bottom: 0; }

.post-nav { display: flex; padding: 16px; line-height: normal; }
.post-nav > * { flex: 1; }
.post-nav > * + * { text-align: right; }

@media (min-width: 768px) {
  .post__inner { width: calc(100% - 8vw - 32px); }
  .post__body { padding-top: calc(101px + 2%); }
  /* from tablets up the old site left 8px under each heading's last line */
  .post__body .heading--display, .post__body h2 { padding-bottom: 8px; margin-bottom: 40px; }
  .post__body h2 { font-size: 20px; }
  .post__body p { margin-bottom: 67px; }
}
/* A post the old site set with even spacing: the same gap under every
   heading and paragraph, and a little less room above and below */
.post--compact .post__body { padding-top: calc(76px + 4%); padding-bottom: calc(24px + 2%); }
.post--compact .post__body .heading--display,
.post--compact .post__body h2,
.post--compact .post__body p { margin: 0 0 23px; padding-bottom: 0; }
.post--compact .post__body p:last-child { margin-bottom: 0; }

@media (min-width: 768px) {
  .post--compact .post__body { padding-top: calc(85px + 2%); }
  .post--compact .post__body .heading--display,
  .post--compact .post__body h2,
  .post--compact .post__body p { margin-bottom: 32px; }
  .post--compact .post__body p:last-child { margin-bottom: 0; }
}

@media (min-width: 1025px) {
  .post__inner { width: min(832px, 72vw - 32px); }
  .post__body h2 { font-size: 24px; }
}


/* 21. Page not found (404.php) -------------------------------------------
   A white card: the illustration, one line and a button home. On desktop
   it sits over the shingles photo, fixed, as on the old site. */

.not-found { padding-block: 25px; }
.not-found__card {
  width: calc(min(var(--content-width), 100% - 2 * var(--gutter)) + 32px);
  margin-inline: auto; padding: 16px;
  background: var(--white); text-align: center;
}
.not-found__card img { width: 100%; max-width: 960px; margin-inline: auto; }
.not-found__card p { margin: 24px 0; font-size: 19px; line-height: 1.5; }
.not-found__button { min-width: 208px; padding: 14px 12px; font-size: 16px; line-height: 22px; }

@media (min-width: 768px) {
  .not-found { padding-block: 50px; }
  .not-found__card p { font-size: 16px; }
}
@media (min-width: 1025px) {
  .not-found { background: url("/images/shingles-background-1280.jpg") center / cover fixed; }
  .not-found__card p { font-size: 24px; }
}


/* 22. Entrance animations ------------------------------------------------
   Blocks marked data-reveal fade in the first time they scroll into view,
   as on the old site: over 2s, or 1s for data-reveal="fast";
   data-reveal="slide" slides in from the right over 1s instead. Only from
   768px up (the old site never animated on phones), and never for visitors
   who ask for reduced motion. js/site.js adds .is-reveal-ready to <html>
   when it will run them, so without it every block is simply visible. */

html.is-reveal-ready [data-reveal] { opacity: 0; transition: opacity 2s linear; }
html.is-reveal-ready [data-reveal="fast"] { transition-duration: 1s; }
html.is-reveal-ready [data-reveal="slide"] { opacity: 1; transform: translateX(100%); transition: transform 1s linear; }
html.is-reveal-ready [data-reveal].is-revealed { opacity: 1; transform: none; }

/* a block waiting off to the right must not make the page scroll sideways */
section:has([data-reveal="slide"]) { overflow-x: clip; }


/* 23. Utilities ----------------------------------------------------------- */

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

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; padding: 12px 16px; background: var(--white); color: var(--navy); }
.skip-link:focus { left: 8px; top: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}