/* ═══════════════════════════════════════
   INDEX.CSS - Integrity Roofing and Construction home page
   Sections: hero, certification bar, common worries, services, why
   Integrity, testimonials, before and after, process, Wisetack financing,
   FAQ, blog, projects, final CTA
═══════════════════════════════════════ */

/* ── HERO ── */
.hero {
  background: var(--page-gray);
  padding: 2rem 0 4rem;
  border-bottom: var(--border);
}
.hero .container {
  max-width: 1640px; /* wider than the rest of the site so the photo can be large */
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(2rem, 3.5vw, 4rem);
  align-items: start; /* photo and text share the same top edge */
}
/* The whole photo is always shown at its natural 4:3 shape, never cropped. */
.hero-image {
  border: var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--white);
}
.hero-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
}
/* Hero heading styled after the logo: big navy block capitals, with
   "and Construction" in red between two red rules. */
.hero-title {
  font-family: var(--font-logo);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1;
  /* Shrink the heading to the width of "Integrity Roofing" and centre it, so
     the red rules and the location line sit centred under the main title. */
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}
.hero-title span { display: block; }
/* A thin white outline with a red drop shadow behind it, so the title stands
   off the light background and ties in with the red shadows on the other
   page heroes. */
.hero-title-main {
  color: var(--navy);
  font-size: clamp(2.6rem, 5.6vw, 5.25rem);
  white-space: nowrap;
  text-shadow:
    0 0 1px var(--white),
    0 0 2px var(--white),
    0 0 2px var(--white),
    0 0 3px var(--white),
    2px 2px 0 var(--white),
    3px 3px 0 var(--white),
    5px 5px 0 var(--red),
    6px 6px 0 var(--red);
}
.hero-title-sub {
  display: flex !important;
  align-items: center;
  gap: 0.9rem;
  color: var(--red);
  font-size: clamp(1.4rem, 2.7vw, 2.5rem);
  letter-spacing: 0.04em;
  margin-top: 0.5rem;
  white-space: nowrap;
}
.hero-title-sub::before,
.hero-title-sub::after {
  content: "";
  flex: 1;
  height: 5px;
  background: var(--red);
}
.hero-title-loc {
  color: var(--navy);
  font-size: clamp(1.4rem, 2.7vw, 1.35rem);
  letter-spacing: 0.04em;
  margin-top: 0.5rem;
  text-align: center;
  text-transform: capitalize;
}
.hero-text .eyebrow { text-align: center; font-size: clamp(0.8rem, 1.2vw, 1rem); margin-bottom: 0.3rem; }
.hero-sub {
  font-family: var(--font-head);
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  font-weight: 700;
  color: var(--red);
  margin: 2rem 0 1rem;
  line-height: 1.4;
}
.hero-sub em {
  font-style: normal;
  color: var(--navy);
}
.hero-text .lead { margin-bottom: 1.6rem; }
.hero-points {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 0 0 1.75rem;
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--navy);
}
.hero-points li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--white);
  border: var(--border);
  border-left: 6px solid var(--red);
  border-radius: 4px;
  padding: 0.8rem 0.9rem;
}
.hero-points li::before {
  content: "";
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--red);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='white' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px;
}
/* The buttons sit centred under the boxes. */
.hero-text .btn-group { justify-content: center; }

/* ── CERTIFICATION / SOCIAL PROOF BAR ── */
.proof-bar {
  background: var(--white);
  padding: 1.5rem 0;
  border-bottom: var(--border);
}
.proof-bar .container {
  max-width: 1760px; /* wide enough for all six badges on one row */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.proof-label {
  flex-basis: 100%;
  text-align: center;
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 0.25rem;
}
.proof-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  height: 96px;
  padding: 0.75rem 1.1rem;
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: 4px;
  text-decoration: none;
  color: var(--navy);
}
a.proof-item:hover,
a.proof-item:focus-visible { border-color: var(--red); }
.proof-item img {
  max-height: 66px;
  width: auto;
  max-width: 225px;
}
.proof-item img.proof-tall { max-height: 78px; }
/* Detailed logos get nearly the full box height so they stay legible. */
.proof-item-tight { padding-top: 3px; padding-bottom: 3px; }
.proof-item img.proof-full { max-height: 86px; }
.proof-text {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
}
.proof-text strong {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--red);
}

/* Mid-size desktops: two even rows of three instead of five plus one. */
@media (min-width: 861px) and (max-width: 1700px) {
  .proof-bar .container {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: center;
  }
  .proof-label { grid-column: 1 / -1; }
}

/* ── COMMON WORRIES ── */
/* White boxes on light gray, built like the "Why Integrity" boxes: a bold
   question, a short answer, and a link to the page that goes deeper. */
.worries {
  background: var(--light-gray);
  border-bottom: var(--border);
}
.worries .container { max-width: 1410px; }
.worries-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.worries-list li {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: var(--border);
  border-left: 6px solid var(--red);
  border-radius: 4px;
  padding: 1.2rem 1.25rem 1.3rem;
}
.worries-list strong {
  display: block;
  font-family: var(--font-head);
  color: var(--navy);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 0.5rem;
}
/* The answers fill the box, so the links line up along the bottom. */
.worries-list p {
  flex: 1;
  font-size: 1.05rem;
  line-height: 1.55;
  margin-bottom: 1rem;
}
.worry-link {
  align-self: flex-start;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 2px solid var(--red);
}
.worry-link:hover,
.worry-link:focus-visible { color: var(--red); }

/* ── SERVICES ── */
.services { background: var(--white); }
/* Room for "Roofing & Construction Services" on one line at the larger size. */
.services .section-head { max-width: 900px; }
/* Wider than the standard 1200px so the longest card title fits on one line. */
.services .container { max-width: 1410px; }
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.service-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.service-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-bottom: var(--border);
}
.service-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.4rem 1.4rem 1.5rem;
}
.service-card h3 { font-weight: 800; font-size: clamp(1rem, 1.5vw, 1.4rem); line-height: 1.2; margin-bottom: 0.7rem; }
.service-card p { flex: 1; font-size: 1.1rem; margin-bottom: 1.25rem; }
.service-card .btn { align-self: flex-start; }

/* Below the three-column layout the titles stop shrinking, so they stay
   larger than the description text. */
@media (max-width: 1100px) {
  .service-card h3 { font-size: 1.3rem; }
}
/* Stack the service cards before their titles run out of room. */
@media (max-width: 760px) {
  .services-grid { grid-template-columns: 1fr !important; }
}

/* ── TESTIMONIALS ── */
.testimonials {
  background: var(--light-gray);
  border-top: var(--border);
  border-bottom: var(--border);
}
/* Wider than the standard 1200px so the review cards have more room per line. */
.testimonials .container { max-width: 1410px; }
/* Let the one-line heading use the full width; keep the intro text narrow. */
.testimonials .section-head { max-width: none; }
.testimonials .section-head p { max-width: 860px; margin-inline: auto; }
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.testimonial-card {
  margin: 0; /* figures have a 40px side margin by default, which was narrowing the cards */
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: var(--border);
  border-radius: 6px;
  padding: 1.6rem 1.5rem 1.5rem;
}
.testimonial-stars {
  color: var(--red);
  font-size: 1.8rem;
  line-height: 1;
  text-align: center;
  padding-left: 0.15em; /* balances the letter-spacing after the last star */
  letter-spacing: 0.15em;
  margin-bottom: 1rem;
}
.testimonial-card blockquote {
  margin: 0 0 1.25rem;
  flex: 1;
  font-size: 1.12rem;
  line-height: 1.7;
}
.testimonial-card blockquote p::before { content: "\201C"; }
.testimonial-card blockquote p::after { content: "\201D"; }
.testimonial-card figcaption {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-head);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--navy);
  padding-top: 1rem;
  border-top: 2px solid var(--navy);
}
.testimonial-card figcaption img { height: 20px; width: auto; flex-shrink: 0; }
.testimonial-card figcaption b { white-space: nowrap; }
.testimonial-card figcaption span { margin-left: auto; font-weight: 500; color: var(--warm-dark-gray); font-size: 0.8rem; text-align: right; }
.testimonials .section-cta .btn-group { justify-content: center; }

/* ── BEFORE AND AFTER ── */
/* Two sliders side by side, the same as on the projects page. */
.case-studies { background: var(--white); }
.case-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem 2rem;
}
.case-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 0.75rem;
}
/* The project photos are 4:3, so show them whole. */
.case-grid .compare { aspect-ratio: 4 / 3; }
.case-desc {
  margin-top: 0.85rem;
  font-size: 1.1rem;
}
.case-studies .section-cta .btn-group { justify-content: center; }

/* ── PROCESS ── */
/* Numbered steps, the same as on the roofing services page. */
.process {
  background: var(--light-gray);
  border-top: var(--border);
  border-bottom: var(--border);
}
.process-list {
  list-style: none;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin: 0;
  padding: 0;
}
.process-list li {
  counter-increment: step;
  position: relative;
  background: var(--white);
  border: var(--border);
  border-radius: 6px;
  padding: 1.2rem 1.2rem 1.2rem 4.4rem;
  font-size: 1.05rem;
  line-height: 1.5;
}
/* Numbered red circle for each step. */
.process-list li::before {
  content: counter(step);
  position: absolute;
  left: 1.1rem;
  top: 1.1rem;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 800;
}
.process-list strong {
  display: block;
  font-family: var(--font-head);
  color: var(--navy);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 0.3rem;
}

/* ── WISETACK FINANCING ── */
/* A small strip under the reviews, so it gets less padding than a full section. */
.wisetack {
  background: var(--white);
  padding: 3rem 0;
  border-bottom: var(--border);
}
/* Wider than the standard 1200px so the four items have room at the larger size. */
.wisetack .container { max-width: 1410px; }
.wisetack-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.55rem;
  margin-bottom: 2rem;
  text-align: center;
}
.wisetack-head img { width: min(340px, 100%); height: auto; }
.wisetack-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
/* Each item sits in a light box of the Wisetack logo teal (#09C0C9) with a
   solid teal outline. */
.wisetack-list li {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  background: rgba(9, 192, 201, 0.1);
  border: 2px solid #09C0C9;
  border-radius: 8px;
  padding: 1.1rem;
}
.wisetack-list img { width: 104px; height: 104px; flex-shrink: 0; }
.wisetack-list p { font-size: 1.15rem; line-height: 1.4; }
.wisetack-list strong {
  display: block;
  font-family: var(--font-head);
  color: var(--navy);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 0.2rem;
}

/* ── WHY INTEGRITY ── */
.why {
  background: var(--navy);
  color: var(--white);
}
/* Row 1: heading text beside the picture. Below it, full width: the six
   boxes, the two buttons, then the hand-drawn arrow. */
.why-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
  margin-bottom: 2.5rem;
}
.why .eyebrow { color: var(--white); }
.why h2 { color: var(--white); }
/* Emphasised words in the heading: red and upright, not italic. */
.why h2 em,
.final-cta h2 em { font-style: normal; color: var(--red); }
.why-intro { margin: 1rem 0 1.75rem; font-size: 1.05rem; }
.why .btn-group { justify-content: center; }
/* Hand-drawn arrow callout, as wide as the boxes, pointing down to the reviews. */
.why-callout {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  color: var(--white);
}
.why-callout-text {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
}
/* Words appear one after another once the arrow has started drawing. */
.why-callout-text span {
  display: inline-block;
  animation: why-word-in 8s linear infinite backwards;
  animation-delay: calc(var(--i) * 0.09s);
}
/* js/site.js holds the animation at its first frame until the callout
   scrolls into view, then lets it play. */
.why-callout.is-waiting .why-callout-text span,
.why-callout.is-waiting .why-callout-doodle path { animation-play-state: paused; }
/* The doodle is flipped top to bottom so its arrowhead points down. */
.why-callout-doodle {
  width: 100%;
  height: auto;
  overflow: visible;
  transform: scaleY(-1);
}
.why-callout-doodle path {
  stroke: var(--white);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: why-doodle-draw 8s ease-in-out infinite;
}
/* One 8 second cycle: the line draws itself over the first 2 seconds, holds,
   then the sequence replays. */
@keyframes why-doodle-draw {
  0% { stroke-dashoffset: 1; }
  25%, 100% { stroke-dashoffset: 0; }
}
@keyframes why-word-in {
  0%, 5% { opacity: 0; filter: blur(8px); transform: translateY(4px); }
  10%, 100% { opacity: 1; filter: none; transform: none; }
}
/* Visitors who ask their device for less motion get the finished drawing. */
@media (prefers-reduced-motion: reduce) {
  .why-callout-text span { animation: none; }
  .why-callout-doodle path { animation: none; stroke-dashoffset: 0; }
}
.why-image {
  border: 2px solid var(--white);
  border-radius: 6px;
  overflow: hidden;
  background: var(--white);
}
.why-image img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.why-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}
.why-list li {
  background: var(--white);
  color: var(--text);
  border: 2px solid var(--white);
  border-left: 6px solid var(--red);
  border-radius: 4px;
  padding: 0.9rem 1rem;
  font-size: 0.92rem;
  line-height: 1.5;
}
/* Red buttons sit on navy here, so hover goes white instead of navy. */
.why .btn:not(.btn-light):hover,
.why .btn:not(.btn-light):focus-visible,
.final-cta .btn:not(.btn-light):hover,
.final-cta .btn:not(.btn-light):focus-visible {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy);
}
.why-list strong {
  display: block;
  font-family: var(--font-head);
  color: var(--navy);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 0.35rem;
}

/* ── FAQ ── */
/* The same open and close boxes as the About page FAQ. */
.faq {
  background: var(--light-gray);
  border-bottom: var(--border);
}
.faq .container { max-width: 900px; }
.faq-item {
  border: var(--border);
  border-left: 6px solid var(--red);
  border-radius: 4px;
  margin-bottom: 0.85rem;
  background: var(--white);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { font-size: 1.15rem; font-weight: 800; }
/* Plus sign that turns into a minus when the answer is open. */
.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--font-head);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--red);
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p {
  padding: 0 1.2rem 1.2rem;
  font-size: 1.1rem;
}

/* ── BLOG ── */
.blog-preview { background: var(--white); }
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.post-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.post-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-bottom: var(--border);
}
.post-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.3rem 1.4rem 1.5rem;
}
.post-date {
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--warm-dark-gray);
  margin-bottom: 0.5rem;
}
.post-card h3 { font-size: 1.1rem; margin-bottom: 0.6rem; }
.post-card h3 a { color: var(--navy); text-decoration: none; }
.post-card h3 a:hover { color: var(--red); }
.post-card p { flex: 1; font-size: 0.95rem; margin-bottom: 1.1rem; }
.post-card p:not(.post-date) { font-size: 1.1rem; }
.post-link {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--red);
  text-decoration: none;
  border-bottom: 2px solid var(--red);
  align-self: flex-start;
}
.post-link:hover { color: var(--navy); border-color: var(--navy); }

/* ── PROJECTS ── */
.projects {
  background: var(--light-gray);
  border-top: var(--border);
  border-bottom: var(--border);
}
/* Wider than the standard 1200px so the project photos can be larger. */
.projects .container { max-width: 1640px; }
/* Let the one-line heading use the full width; keep the intro text narrow. */
.projects .section-head { max-width: none; }
.projects .section-head p { max-width: 860px; margin-inline: auto; font-size: 1.2rem; text-align: left; }
.projects-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.project-card {
  position: relative;
  display: block;
  border: var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--white);
  text-decoration: none;
}
.project-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-bottom: var(--border);
}
.project-card span {
  display: block;
  padding: 1rem 1.25rem;
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  background: var(--white);
}
.project-card:hover,
.project-card:focus-visible { border-color: var(--red); }
.project-card:hover span { color: var(--red); }

/* ── FINAL CTA ── */
.final-cta {
  background: var(--navy);
  color: var(--white);
  text-align: center;
}
.final-cta .container { max-width: 820px; }
.final-cta .eyebrow { color: var(--white); }
.final-cta h2 { color: var(--white); }
.final-cta p { margin: 1rem auto 1.75rem; font-size: 1.2rem; }
.final-cta .btn-group { justify-content: center; }
.final-cta-phone {
  margin-top: 1.5rem;
  font-family: var(--font-head);
  font-weight: 700;
}
.final-cta-phone a { color: var(--white); }

/* ══════════════════════
   TABLET (≤ 1100px)
══════════════════════ */
@media (max-width: 1100px) {
  .services-grid,
  .testimonials-grid,
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .why-list { grid-template-columns: repeat(2, 1fr); }
  .wisetack-list { grid-template-columns: repeat(2, 1fr); }
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
  .process-list { grid-template-columns: repeat(2, 1fr); }
  .hero .container { grid-template-columns: 1fr; gap: 2rem; max-width: 900px; }
}

/* ══════════════════════
   MOBILE (≤ 860px)
══════════════════════ */
@media (max-width: 860px) {
  .hero { padding: 2.5rem 0; }
  .hero .container { grid-template-columns: 1fr; gap: 1.75rem; }
  .hero-points { grid-template-columns: 1fr; }
  .why-top { grid-template-columns: 1fr; gap: 2rem; }
  .why-top .why-image { order: -1; }
  .why-list { grid-template-columns: 1fr; }
  .worries-list { grid-template-columns: 1fr; }
  .case-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .proof-item { height: 76px; padding: 0.5rem 1rem; }
  .proof-item img { max-height: 52px; max-width: 170px; }
  .proof-item img.proof-tall { max-height: 60px; }
  .proof-item img.proof-full { max-height: 66px; }
  .proof-text { font-size: 1rem; }
  .proof-text strong { font-size: 1.4rem; }
}

@media (max-width: 600px) {
  .services-grid,
  .testimonials-grid,
  .blog-grid,
  .wisetack-list,
  .process-list,
  .projects-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════
   PHONES (≤ 768px): bigger hero title and larger text for readability
══════════════════════ */
@media (max-width: 768px) {
  /* The main title line is allowed to break onto two lines on phones so it
     can be set much larger. The size is chosen so the longest single word in
     any page title ("Installation") still fits the width. */
  .hero-title-main {
    font-size: clamp(2.6rem, 16.5vw, 5.25rem);
    line-height: 0.95;
    white-space: normal;
    text-align: center;
  }
  .hero-text { min-width: 0; }
  .hero-title-sub { font-size: clamp(1.7rem, 8.6vw, 2.9rem); }
  .hero-title-loc { font-size: clamp(1.5rem, 7vw, 2.4rem); }
  /* Larger hero text on phones so it reads easily, the same on every main page. */
  .hero-text .eyebrow { font-size: 1.3rem; }
  .hero-sub { font-size: 1.4rem; }
  .hero-text .lead { font-size: 1.35rem; line-height: 1.6; }
  .hero-points { font-size: 1.1rem; }

  .worries-list strong { font-size: 1.3rem; }
  .worries-list p { font-size: 1.1rem; }
  .worry-link { font-size: 1rem; }

  /* The short hint line under the heading stays centred, unlike longer
     paragraphs, which main.css left-aligns on phones. */
  .case-studies .section-head p { text-align: center; }
  .case-title { font-size: 1.4rem; }

  .process-list li { font-size: 1.1rem; }
  .process-list strong { font-size: 1.25rem; }

  .faq-item summary h3 { font-size: 1.2rem; }

  .why-intro { font-size: 1.15rem; }
  .why-list li { font-size: 1.05rem; }
  .why-list strong { font-size: 1.25rem; }

  .testimonial-card figcaption { font-size: 1rem; }
  .testimonial-card figcaption span { font-size: 0.9rem; }

  .post-card p.post-date { font-size: 0.9rem; }
  .post-card h3 { font-size: 1.25rem; }
  .post-link { font-size: 1rem; }

  .project-card span { font-size: 1.1rem; }
}