/* =========================================================
   Precious Coast Cleaning: styles.css
   Mobile-first. Sections, top to bottom:
    1. Font                 10. Service blocks, page intros
    2. Design tokens        11. Before and after
    3. Base                 12. Slideshow (action shots)
    4. Typography           13. Reviews
    5. Layout               14. About
    6. Header               15. Forms (estimate + walkthrough)
    7. Buttons              16. Expandable lists (details, FAQ)
    8. Panels and banners   17. Footer
    9. Homepage hero        18. Mobile action bar
   10. Service blocks,      19. Utilities
       page intros          20. Screen sizes
   11. Before and after     21. Reduced motion
   ========================================================= */


/* 1. Font: Jost, self-hosted (no Google requests, no cookies) */
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-variable.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}


/* 2. Design tokens: change a value here and it updates everywhere */
:root {
  /* Brand colors from the logo and flyer */
  --navy:       #1e2841;  /* logo wordmark: text, "call" buttons */
  --deep-teal:  #1e454d;  /* links, focus rings, selected options */
  --teal:       #90bbc2;  /* logo wave: "get a price" buttons */
  --teal-ink:   #5b9299;  /* "CLEANING" in the header wordmark */
  --seafoam:      #dcefec;  /* the coastal banners: reviews, forms, price card */
  --seafoam-deep: #c2e0d9;  /* the option you picked */
  --slate-blue: #8b94a3;  /* skyscraper line art */
  --slate:      #5c6370;  /* secondary text */
  --line:       #dde5e7;  /* borders */
  --white:      #ffffff;
  --error:      #a3302a;

  --font: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;

  --radius-sm: 10px;   /* inputs, photos */
  --radius-md: 14px;   /* option cards, expandable lists */
  --radius-lg: 18px;   /* service blocks, price card, photos */
  --radius-xl: 22px;   /* the big coastal banners */
  /* Homepage banner. It's wider than a phone photo, so it always trims
     something: a taller banner trims less. --hero-focus picks what stays in
     frame (the second value: 0% keeps the top, 50% the middle, 100% the bottom).
     The taller desktop height is in section 20. */
  --hero-height: clamp(19rem, 46vh, 24rem);
  --hero-focus: center 35%;

  --max-width: 68rem;
  --tap: 3rem;         /* minimum height for anything tappable (48px) */
}


/* 3. Base */
*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }  /* keeps the hidden attribute reliable */

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--navy);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); /* room for the mobile bar */
}

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

a { color: var(--deep-teal); text-underline-offset: 0.18em; }

:focus-visible {
  outline: 3px solid var(--deep-teal);
  outline-offset: 3px;
}

::selection { background: var(--seafoam); }

[id] { scroll-margin-top: 1.25rem; }


/* 4. Typography */
h1, h2, h3 {
  margin: 0 0 1rem;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-wrap: balance;
}
h1 { font-size: clamp(1.9rem, 5.5vw, 2.9rem); }
h2 { font-size: clamp(1.45rem, 3.6vw, 1.9rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1rem; max-width: 65ch; }

.lead { font-size: 1.15rem; color: var(--slate); }


/* 5. Layout */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.section { padding-block: 3rem; }
.section__title { margin-bottom: 1.5rem; }

.wave {
  height: 2.25rem;
  background: url("../images/wave.svg") center / 100% 100% no-repeat;
}


/* 6. Header (inner pages) */
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  padding-block: 0.9rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-right: auto;
  text-decoration: none;
}
.brand__mark { height: 2.75rem; width: auto; }
.brand__text { display: grid; line-height: 1.15; }
.brand__name {
  color: var(--navy);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.brand__sub {
  color: var(--teal-ink);
  font-size: 0.68rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.site-nav {
  order: 3;              /* on phones, the nav sits on its own row */
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.15rem;
  font-size: 0.95rem;
}
.site-nav a {
  color: var(--navy);
  text-decoration: none;
  padding-block: 0.35rem;
}
.site-nav a:hover { color: var(--deep-teal); }
.site-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--teal);
  text-decoration-thickness: 2px;
}


/* 7. Buttons: one color = one action
      teal = get a price, navy = call */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: var(--tap);
  padding: 0 1.4rem;
  border: 0;
  border-radius: 999px;
  font: 500 1rem/1 var(--font);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn img { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }

.btn--estimate { background: var(--teal); color: var(--navy); }
.btn--estimate:hover { background: #79a8b0; }   /* darker teal */

.btn--call { background: var(--navy); color: var(--white); }
.btn--call:hover { background: #121a2d; }       /* darker navy */

.btn--icon { width: var(--tap); padding: 0; }   /* round phone button */
.btn--wide { width: 100%; }
.btn[disabled] { opacity: 0.65; cursor: progress; }


/* 8. Panels and banners: every big coastal block uses this one class,
      so they all share the same color and the same rounded corners */
.panel {
  padding: 1.25rem 1rem;
  border-radius: var(--radius-xl);
  background: var(--seafoam);
}
.panel .review { border-top-color: var(--white); }   /* reviews sit on the banner */
.panel .form-success { background: var(--white); }   /* success message stands out on it */


/* 9. Homepage hero: one big photo with the title on top of it.
      Height and framing are the two tokens in section 2.

      Want the photo shown whole, never trimmed? Crop the file itself to the
      shape you want, then in .hero below swap min-height for:
          aspect-ratio: 2 / 1;    (or 16 / 9, or whatever your photo is) */
.hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: var(--hero-height);
  overflow: hidden;
  background: var(--navy);
}

/* Photo and shading sit behind the words, so they never stretch the hero */
.hero__photo,
.hero__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__photo {
  object-fit: cover;                    /* fills the banner, trims the rest */
  object-position: var(--hero-focus);   /* which part stays in frame */
}

/* Shading so white text stays readable on any photo.
   On phones it darkens the bottom, where the text sits. */
.hero__shade { background: linear-gradient(180deg, rgba(30, 40, 65, 0.12) 0%, rgba(30, 40, 65, 0.8) 100%); }

/* The bottom padding leaves room for the blocks that overlap the photo */
.hero__content { position: relative; z-index: 1; padding-block: 1.75rem 4.5rem; }
.hero__title {
  margin: 0 0 0.4rem;
  max-width: 18ch;
  color: var(--white);
  font-size: clamp(1.5rem, 5.6vw, 3rem);
}
.hero__sub { margin: 0; color: #e7f0f1; }

.wave--divider { margin-top: 0.5rem; }


/* 10a. Service blocks (homepage): line art sits behind the text.
        The negative margin lifts them up over the bottom of the hero photo. */
.services {
  position: relative;   /* keeps the blocks above the photo */
  z-index: 2;
  margin-top: -3rem;
  padding-block: 0 3rem;
}

/* The wide gap on big screens is capped on smaller ones,
   so the two blocks never get squeezed. */
.tiles { display: grid; gap: clamp(1.25rem, 13vw, 15rem); }

.tile {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(4.5rem, 30%, 9.5rem);
  grid-template-rows: 1fr auto;
  grid-template-areas:               /* words and drawing never share space; */
    "words drawing"                  /* the button gets the full width below  */
    "button button";
  gap: 1rem;
  min-height: 19rem;
  padding: 1.75rem 1.5rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  background-color: var(--white);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.tile:hover { border-color: var(--teal); background-color: #edf5f4; }

.tile__body {
  grid-area: words;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* The drawing sits in its own column, bottom aligned.
   max-height keeps the tall tower from stretching the block. */
.tile__art {
  grid-area: drawing;
  align-self: end;
  width: 100%;
  max-height: 11rem;
  object-fit: contain;
  object-position: right bottom;
}

.tile__title { margin: 0; font-size: 1.75rem; }
.tile__title a { color: var(--navy); text-decoration: none; }
/* The title link stretches over the whole block, so tapping anywhere opens the page */
.tile__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.tile__title a:focus-visible { outline: none; }
.tile__title a:focus-visible::after { outline: 3px solid var(--deep-teal); outline-offset: 3px; }

.tile__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
  color: var(--slate);
}
.tile__list li { display: flex; gap: 0.6rem; align-items: baseline; }
.tile__list li::before {
  content: "";
  flex-shrink: 0;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--teal);
  transform: translateY(-0.1rem);
}

.tile .btn {
  grid-area: button;
  justify-self: start;
  position: relative;   /* sits above the stretched link */
  z-index: 1;
}


/* 10b. Page intro (inner pages): title, one line, small line art */
.page-intro { padding-top: 1.5rem; }
.page-intro__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: end;
}
.page-intro__art { width: auto; height: 5.5rem; }
.page-intro h1 { margin-bottom: 0.6rem; }
.page-intro .lead { margin-bottom: 0.4rem; }
.page-intro__trust { font-size: 0.95rem; color: var(--deep-teal); margin: 0; }
.page-intro .wave { margin-top: 1.25rem; }


/* 11. Before and after */
.ba-grid { display: grid; gap: 1.75rem; }

.ba {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.ba__photo { position: relative; }
.ba__photo img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.ba__tag {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
  background: var(--white);
  color: var(--navy);
}
.ba__tag--after { background: var(--teal); }
.ba figcaption { grid-column: 1 / -1; font-size: 0.95rem; color: var(--slate); }


/* 12. Slideshow: action shots and after photos.
      js/slideshow.js adds the arrows and dots, so the HTML stays short.
      It scrolls the track, which gives phones real swiping for free. */
.slideshow { position: relative; }

.slideshow__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: var(--radius-lg);
  scrollbar-width: none;
}
.slideshow__track::-webkit-scrollbar { display: none; }

.slideshow__slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  margin: 0;
  overflow: hidden;                  /* keeps the backdrop inside the rounded corners */
  border-radius: var(--radius-lg);
}

/* A blurred copy of the same photo fills whatever the photo doesn't cover, so
   portrait and landscape shots sit in one frame without either being cropped.
   js/slideshow.js reads each photo's own src into --photo. */
.slideshow__slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--photo) center / cover no-repeat;
  filter: blur(28px) brightness(0.82);
  transform: scale(1.15);
}
.slideshow__slide img {
  position: relative;       /* sits on top of the blurred backdrop */
  width: 100%;
  aspect-ratio: 4 / 3;      /* phone-shaped frame; wider on big screens (section 20) */
  object-fit: contain;      /* fit the whole photo in, never crop it */
}

/* For a photo you've already cropped to the frame: add this class to its
   <figure> and it fills edge to edge instead. */
.slideshow__slide--fill img { object-fit: cover; }
.slideshow__slide figcaption {
  position: absolute;
  z-index: 1;
  left: 0.75rem;
  bottom: 0.75rem;
  padding: 0.25rem 0.8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  font-size: 0.85rem;
  color: var(--navy);
}

.slideshow__arrow {
  position: absolute;
  top: calc(50% - 1.4rem);   /* centered on the photo, above the dots */
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  cursor: pointer;
}
.slideshow__arrow:hover { background: var(--seafoam-deep); }
.slideshow__arrow--prev { left: 0.75rem; }
.slideshow__arrow--next { right: 0.75rem; }
.slideshow__arrow img { width: 1.25rem; height: 1.25rem; }

.slideshow__dots { display: flex; justify-content: center; gap: 0.25rem; margin-top: 0.75rem; }
.slideshow__dot {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  background: none;
  cursor: pointer;
}
.slideshow__dot::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #b7c6c9;
}
.slideshow__dot.is-current::before { background: var(--deep-teal); }


/* 13. Reviews */
.reviews { display: grid; gap: 1.75rem; }

.review {
  margin: 0;
  padding-top: 1rem;
  border-top: 3px solid var(--teal);
}
.review__stars { margin: 0 0 0.4rem; color: var(--deep-teal); letter-spacing: 0.12em; }
.review blockquote { margin: 0 0 0.5rem; font-size: 1.05rem; }
.review blockquote p { margin: 0; }
.review figcaption { font-size: 0.95rem; font-weight: 500; color: var(--slate); }
.review--placeholder blockquote { color: var(--slate); font-style: italic; }


/* 14. About */
.about-note {
  max-width: 42rem;
  padding-left: 1.25rem;
  border-left: 3px solid var(--teal);
}
.about-note__sign { font-weight: 500; }

.about-photo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.about-photo { margin: 0 0 2rem; }
.about-photo figcaption { margin-top: 0.6rem; font-size: 0.95rem; color: var(--slate); }

.about-story { max-width: 42rem; }

.points {
  list-style: none;
  margin: 1.5rem 0 2rem;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.points li { display: flex; gap: 0.6rem; align-items: center; }
.points img { width: 1.4rem; height: 1.4rem; }


/* 15. Forms: estimate (residential) and walkthrough (commercial) */
.estimate,
.walkthrough { display: grid; gap: 1.5rem; align-items: start; }

.field-group {
  margin: 0 0 1.15rem;
  padding: 0;
  border: 0;
  min-width: 0;
}
.field-group > legend {
  padding: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  font-size: 1.05rem;
}

/* Option chips: real radio buttons and checkboxes, styled as big tappable buttons */
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chips--cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--tap);
  min-width: 2.9rem;
  padding: 0.5rem 0.9rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.chip input {             /* hidden visually, still keyboard accessible */
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.chip img { width: 1.35rem; height: 1.35rem; }
.chip:hover { border-color: var(--teal); background: #eef6f5; }
.chip:has(input:checked) {
  border-color: var(--deep-teal);
  background: var(--seafoam-deep);
  box-shadow: inset 0 0 0 1px var(--deep-teal);
}
.chip:has(input:focus-visible) { outline: 3px solid var(--deep-teal); outline-offset: 2px; }

.chip--card {
  flex-direction: column;
  min-height: 5.75rem;
  padding: 0.85rem 0.5rem;
  border-radius: var(--radius-md);
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.25;
}
.chip--card img { width: 1.9rem; height: 1.9rem; }

/* Extras already part of the chosen service */
.chip.is-included { cursor: default; border-style: dashed; }
.chip__tag { font-size: 0.75rem; color: var(--deep-teal); }

/* Text fields */
.fields { display: grid; gap: 0.75rem; }
.field { display: grid; gap: 0.25rem; }

/* Two fields per row once there's width for it (the commercial contact card) */
@media (min-width: 40rem) {
  .fields--pairs { grid-template-columns: 1fr 1fr; }
  .fields--pairs .field--full { grid-column: 1 / -1; }
}
.field label { font-weight: 500; font-size: 0.95rem; }
.field .optional { font-weight: 400; color: var(--slate); }
.field__hint { margin: 0; font-size: 0.875rem; color: var(--slate); }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 0.6rem 0.85rem;
  border: 1.5px solid #c9d3d6;
  border-radius: var(--radius-sm);
  font: inherit;
  color: var(--navy);
  background: var(--white);
}
.field textarea { min-height: 6rem; resize: vertical; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { border-color: var(--deep-teal); outline-offset: 1px; }

/* Dropdowns read better with some width, but not the full column on a monitor */
.field select { max-width: 24rem; }

/* The follow-up question some chips open: "how many bedrooms?", "what kind of space?" */
.chip-detail {
  margin-top: 0.9rem;
  max-width: 20rem;
}
.field input:user-invalid { border-color: var(--error); }

/* Price card (residential) and contact card (commercial) */
.price-card,
.contact-card {
  padding: 1.5rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--seafoam);
}
.panel .contact-card { background: var(--white); }  /* white inside a coastal banner */
.price-card__label { margin: 0; font-size: 0.95rem; color: var(--slate); }
.price-card__range {
  margin: 0.2rem 0 0;
  font-size: clamp(2.1rem, 8vw, 2.7rem);
  font-weight: 600;
  line-height: 1.1;
}
.price-card__unit { margin: 0.15rem 0 1rem; color: var(--slate); }
.price-card__note { margin-bottom: 1.25rem; font-size: 0.9rem; color: var(--slate); }

.contact-step { margin: 1.5rem 0 0; padding: 0; border: 0; min-width: 0; }
.contact-step > legend { padding: 0; margin-bottom: 0.75rem; font-weight: 500; font-size: 1.1rem; }
.contact-step .btn { margin-top: 1rem; }
.contact-card .contact-step { margin-top: 0; }
.field-group > legend .optional { font-weight: 400; font-size: 0.95rem; color: var(--slate); }

.form-error { margin: 0.75rem 0 0; color: var(--error); font-size: 0.95rem; }

.form-success {
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--seafoam);
}
.form-success:focus { outline: none; }
.form-success > img { width: 2.25rem; height: 2.25rem; margin-bottom: 0.75rem; }
.form-success h3 { margin-bottom: 0.4rem; }


/* 16. Expandable lists: what's included, FAQ */
.details-list { display: grid; gap: 0.75rem; max-width: 46rem; }

.details {
  padding: 0 1.25rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
}
.details summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: var(--tap);
  padding-block: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.details summary::-webkit-details-marker { display: none; }
.details summary::after {
  content: "+";
  font-size: 1.5rem;
  line-height: 1;
  color: var(--deep-teal);
}
.details[open] summary::after { content: "\2212"; }  /* minus sign */
.details ul,
.details p { margin: 0 0 1.1rem; color: var(--slate); }
.details ul { padding-left: 1.1rem; }

.info-grid { display: grid; gap: 2rem; }
.info-grid ul { margin: 0; padding-left: 1.1rem; color: var(--slate); }
.info-grid h3 { margin-bottom: 0.6rem; }


/* 17. Footer */
.site-footer {
  margin-top: 1rem;
  padding-bottom: 2rem;
  font-size: 0.95rem;
  color: var(--slate);
}
.site-footer .wave { margin-bottom: 2rem; }
.site-footer p { margin-bottom: 0.6rem; }
.site-footer a { color: var(--slate); }

.footer-grid { display: grid; gap: 1.25rem; }

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--navy);
  font-weight: 500;
}
.footer-brand img { height: 2.25rem; width: auto; }

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.footer-small { margin-top: 1.5rem; font-size: 0.85rem; }


/* 18. Mobile action bar: call + estimate, always one tap away */
.mobile-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid var(--line);
}
body.is-typing .mobile-bar { display: none; }  /* hidden while the keyboard is open */


/* 19. Utilities */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 30;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--navy);
  color: var(--white);
}
.skip-link:focus { top: 1rem; }

.hp { position: absolute; left: -9999px; }  /* spam trap field, invisible to people */

.notfound { display: grid; justify-items: center; text-align: center; }
.notfound__logo { width: min(16rem, 65vw); }
.notfound__title { margin: 1rem 0 0.5rem; font-size: 1.3rem; font-weight: 400; color: var(--slate); }

.legal { max-width: 46rem; }
.legal h2 { margin-top: 2.25rem; font-size: 1.3rem; }
.legal ul { padding-left: 1.1rem; }


/* 20. Screen sizes */

@media (min-width: 40rem) {
  .ba-grid { grid-template-columns: repeat(2, 1fr); }
  .chips--cards { grid-template-columns: repeat(5, 1fr); }
  .page-intro__art { height: 7rem; }
}

@media (min-width: 44rem) {
  .tiles { grid-template-columns: 1fr 1fr; }
  .tile { min-height: 21rem; padding: 2rem; }
  .tile__art { max-height: 13rem; }
  .reviews { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .info-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1.1fr 1.3fr 1fr; gap: 2rem; }
}

@media (min-width: 56rem) {
  body { padding-bottom: 0; }
  .mobile-bar { display: none; }

  .section { padding-block: 4rem; }
  .container { padding-inline: 1.75rem; }

  .site-nav { order: 0; width: auto; margin-right: 1rem; gap: 2rem; }

  .site-header--home .site-nav { display: flex; }
  .panel { padding: 2rem 1.75rem; }

  /* Taller banner on a computer. This is the number to change. */
  :root { --hero-height: clamp(28rem, 66vh, 42rem); }
  .hero { align-items: center; }
  .hero__content { padding-block: 3rem 5rem; }
  .services { margin-top: -4rem; }
  .hero__title { max-width: 15ch; }
  /* On wide screens the shading runs left to right, so faces stay clear */
  .hero__shade {
    background: linear-gradient(90deg, rgba(30, 40, 65, 0.82) 0%, rgba(30, 40, 65, 0.55) 40%,
                                       rgba(30, 40, 65, 0.12) 72%, rgba(30, 40, 65, 0.05) 100%);
  }
  .tile { min-height: 19rem; }  /* keeps the block buttons on a laptop's first screen */

  .page-intro__art { height: 9rem; }

  .slideshow__slide img { aspect-ratio: 3 / 2; }

  .estimate { grid-template-columns: 1.4fr 1fr; gap: 3rem; }
  .estimate__result { position: sticky; top: 1.5rem; }
  /* Dropdowns need less room than chips did, so the contact card gets more */
  .walkthrough { grid-template-columns: 0.85fr 1.15fr; gap: 2.5rem; }
}

@media (min-width: 64rem) {
  .ba-grid { grid-template-columns: repeat(3, 1fr); }
}


/* 21. Respect people who turn off motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
/* 22. Photo loading: a soft placeholder while each photo downloads,
       then a quick fade-in. js/main.js adds the two classes. */
.ba__photo,
.slideshow__slide { background-color: #eef4f5; }
.ba__photo { border-radius: var(--radius-sm); }
.about-photo img { background-color: #eef4f5; }

.img-fade { opacity: 0; transition: opacity 0.4s ease; }
.img-fade.is-loaded { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .img-fade { transition: none; }
}