/*
  ==========================================================================
  styles.css
  ==========================================================================
  The one stylesheet for the whole FC Restoration site. All four pages load it.

  How this file is organized:
  1. Design tokens (colors, sizes, fonts) as CSS variables:
     the light theme on :root, the dark theme on html[data-theme="dark"]
  2. Base styles (root font size, resets, body text, headings, links, focus)
  3. Layout helpers (.container, .section)
  4. Reusable pieces (buttons, section headings, labels, pill badges)
  5. Shared components (header, theme switch, footer, page header band,
     "start your claim")
  6. Page specific sections (home, claim process, projects, contact)
  7. Reduced motion

  "Mobile-first" means: the plain rules are written for phones. Then
  @media (min-width: 640px) adds changes for tablets, and
  @media (min-width: 1024px) adds changes for desktops. A bigger screen gets
  the phone rules PLUS the extra rules for its size. Each component keeps its
  own media queries right next to it, so everything about one component lives
  in one place.

  Sizes are in rem. 1rem = the root font size (16px on most screens, growing
  to 18px on very wide ones, see section 2). Because almost every size is in
  rem, the whole design grows together on big screens. Thin borders stay in
  px on purpose: a border should stay 1px thin at any size.

  How the two themes work: every color in this file comes from a variable.
  The light values live on :root. The dark values live on
  html[data-theme="dark"] and replace the light ones whenever the <html> tag
  has data-theme="dark". The rules below never change between themes; only
  the variables do.
*/


/* ==========================================================================
   1. DESIGN TOKENS
   A "token" is a named value (like --navy) we define once and reuse
   everywhere with var(--navy). To change the brand red across the whole
   site, you change it here, once. No colors are typed anywhere else.
   ========================================================================== */

/* ---------- 1.1 Light theme (also the starting values for everything) ---------- */
:root {
  /* Tells the browser which theme its own parts (scrollbars, form controls) should use. */
  color-scheme: light;

  /* --- The 13 brand colors and sizes from the build spec (section 3) --- */
  --navy: #1B2E4B;          /* primary brand color: headers, headings, dark sections */
  --navy-dark: #14233A;     /* footer and deepest backgrounds */
  --red: #D21F2B;           /* buttons and accents (deeper than the logo red so white text stays readable) */
  --red-hover: #B71A24;     /* button hover */
  --red-logo: #ED1B24;      /* exact logo red: small accents only, never behind text */
  --red-tint: #FBEAEB;      /* light background behind red icons */
  --bg-light: #F2F4F7;      /* alternating light section background */
  --white: #FFFFFF;
  --gray: #8A8F98;          /* matches the logo's gray square */
  --text: #1E293B;          /* body text */
  --text-muted: #5B6472;    /* secondary text */
  --border: #E2E6EC;        /* card borders, dividers */
  --radius-card: 14px;
  --radius-btn: 8px;
  --shadow-card: 0 1px 2px rgba(20, 35, 58, 0.06), 0 8px 24px rgba(20, 35, 58, 0.06);
  --container: 2200px;      /* max content width (the spec's 1200px, widened to use big screens) */

  /* --- Layout --- */
  /* The gutter: the space between the window edge and the content, used by
     .container everywhere (header, hero, every section, footer), so all the
     left and right edges line up. 5% of the window width, between 20px and 120px. */
  --gutter: clamp(20px, 5vw, 120px);

  /* --- Extra colors (added so no color is typed outside this block) --- */
  /* rgba(r, g, b, a) is a color with transparency: "a" goes from 0 (invisible) to 1 (solid).
     20, 35, 58 is --navy-dark written as red/green/blue numbers. */
  --overlay-hero-start: rgba(20, 35, 58, 0.88);   /* home hero desktop overlay, left edge (behind the text) */
  --overlay-hero-mid: rgba(20, 35, 58, 0.65);     /* home hero desktop overlay, middle */
  --overlay-hero-end: rgba(20, 35, 58, 0.35);     /* home hero desktop overlay, right edge (photo shows through) */
  --overlay-hero-flat: rgba(20, 35, 58, 0.75);    /* home hero overlay on phones and tablets, one even shade */
  --overlay-banner: rgba(20, 35, 58, 0.78);       /* claim process page header, over the banner photo */
  --overlay-modal: rgba(20, 35, 58, 0.6);         /* contact page thank-you popup, dims the page behind it */
  --white-85: rgba(255, 255, 255, 0.85);          /* paragraph text on navy (page header, hero, footer tagline) */
  --white-70: rgba(255, 255, 255, 0.7);           /* small muted text on navy ("CALL US DIRECTLY", footer fine print) */
  --white-border: rgba(255, 255, 255, 0.35);      /* pill badge borders and the phone circle on navy */
  --white-translucent: rgba(255, 255, 255, 0.12); /* pill badge background on navy */
  --white-divider: rgba(255, 255, 255, 0.12);     /* thin line above the footer copyright strip */
  --shadow-card-hover: 0 2px 4px rgba(20, 35, 58, 0.08), 0 14px 32px rgba(20, 35, 58, 0.10); /* service cards on hover */
  --shadow-header: 0 2px 12px rgba(20, 35, 58, 0.10);  /* header shadow after the page scrolls, and the phone menu panel */

  /* --- Theme roles: what a color is FOR. Each one has a light value here
         and a dark value in section 1.2. --- */
  --page-bg: var(--white);                 /* the page behind everything */
  --surface: var(--white);                 /* cards: services, projects, start-claim card, form card, popup, pills */
  --heading: var(--navy);                  /* h1/h2/h3 on page backgrounds, section labels, pill text, stat numbers */
  --band-bg: var(--navy);                  /* hail call band, "start your claim", inner page headers without a photo */
  --header-bg: var(--white);               /* sticky header and the phone menu panel */
  --header-border: transparent;            /* line under the header (only visible in dark) */
  --footer-bg: var(--navy-dark);           /* footer */
  --nav-link: var(--navy);                 /* nav links, menu button icon, theme switch label */
  --call-number: var(--navy);              /* "602-203-3433" in the desktop header */
  --red-text: var(--red);                  /* red used as TEXT (Call Now!, settled amounts, form errors) */
  --focus-color: var(--navy);              /* keyboard focus outline on page backgrounds */
  --skip-link-bg: var(--navy);             /* "Skip to content" link */
  --btn-outline-color: var(--navy);        /* outline button border and text */
  --btn-outline-hover-bg: var(--navy);     /* outline button background on hover */
  --btn-outline-hover-text: var(--white);  /* outline button text on hover */
  --card-hover-border: var(--border);      /* service card border on hover */
  --timeline-circle-bg: var(--navy);       /* claim process step number circles */
  --timeline-circle-border: var(--navy);   /* their 2px edge (same as the fill in light, so invisible) */
  --input-bg: var(--white);                /* form fields */
  --input-border: var(--border);           /* form field borders */
  --badge-bg: var(--red-tint);             /* contact page trust badges ("Since 1969") */
  --badge-border: transparent;             /* trust badge border (only visible in dark) */
  --credential-bg: var(--white);           /* credential logo cards: white in BOTH themes */
  --credential-border: var(--border);      /* credential card border */
  --credential-caption: var(--text-muted); /* credential caption under a logo */
  --credential-caption-strong: var(--navy);/* credential caption when the logo is missing */
  --switch-knob: var(--white);             /* theme switch: the sliding circle */
  --switch-knob-shadow: 0 1px 3px rgba(20, 35, 58, 0.25); /* theme switch: soft shadow under the knob */

  /* --- Button sizes (grow slightly on wide screens, see section 4) --- */
  --btn-font: 1rem;
  --btn-pad-y: 0.875rem;
  --btn-pad-x: 1.75rem;

  /* --- Fonts --- */
  /* The fallback stack: fonts already installed on the visitor's device.
     Used while Google Fonts loads, or if it fails. */
  --font-fallback: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* The site fonts, loaded from Google Fonts by the <link> in each page's <head>.
     Montserrat (600, 700) is also the logo's lettering; Inter (400, 500, 600)
     is for body text. The fallback stack is used while they load, or if they fail. */
  --font-heading: "Montserrat", var(--font-fallback);
  --font-body: "Inter", var(--font-fallback);

  /* --- Header height, reused by the hero height and so jump links land below the sticky header --- */
  --header-height: 4.75rem;   /* 76px on phones */
}

@media (min-width: 1024px) {
  :root {
    --header-height: 6rem;    /* 96px at 1024px; 102px at 1440px as the root size grows */
  }
}

@media (min-width: 1920px) {
  :root {
    --header-height: 6.125rem;   /* about 110px */
  }
}

/* ---------- 1.2 Dark theme ----------
   Active when <html data-theme="dark">. Only variables change here.
   html[data-theme="dark"] is more specific than :root, so these values win
   no matter where they sit in the file.
   Some light roles above are written as var(--something), for example
   --credential-caption: var(--text-muted). In dark, --text-muted changes, so
   any role that must NOT follow it is given its own value here.
   No navy in dark: navy areas become near-black grays, and the photo
   overlays become black (same see-through amounts as in light). */
html[data-theme="dark"] {
  color-scheme: dark;

  /* Spec colors that change in dark */
  --bg-light: #141416;      /* sections that were light gray */
  --text: #C9CDD3;          /* body text */
  --text-muted: #9AA1AA;    /* secondary text */
  --border: #2A2A2E;        /* card borders, dividers, timeline line */
  --red-tint: rgba(210, 31, 43, 0.15);  /* behind red icons: a faint red glow instead of pink */
  --shadow-card: none;      /* shadows don't show on dark backgrounds, so cards use borders only */
  --shadow-card-hover: none;
  --shadow-header: none;

  /* Photo overlays and the popup backdrop: black instead of navy */
  --overlay-hero-start: rgba(0, 0, 0, 0.88);
  --overlay-hero-mid: rgba(0, 0, 0, 0.65);
  --overlay-hero-end: rgba(0, 0, 0, 0.35);
  --overlay-hero-flat: rgba(0, 0, 0, 0.75);
  --overlay-banner: rgba(0, 0, 0, 0.78);
  --overlay-modal: rgba(0, 0, 0, 0.6);

  /* Theme roles */
  --page-bg: #0B0B0C;
  --surface: #1A1A1D;
  --heading: #FFFFFF;
  --band-bg: #141416;
  --header-bg: #000000;
  --header-border: #1F1F22;
  --footer-bg: #000000;
  --nav-link: #E6E8EB;
  --call-number: #FFFFFF;
  --red-text: #F2555F;      /* lighter red for text: the brand red is too dark to read as small text on black */
  --focus-color: #FFFFFF;
  --skip-link-bg: #1A1A1D;
  --btn-outline-color: #FFFFFF;
  --btn-outline-hover-bg: #FFFFFF;
  --btn-outline-hover-text: #000000;
  --card-hover-border: #3A3A3F;
  --timeline-circle-bg: #1A1A1D;
  --timeline-circle-border: #D21F2B;   /* the brand red */
  --input-bg: #141416;
  --input-border: #6B7079;  /* light enough to see the field's edge (3.5:1) */
  --badge-bg: #1A1A1D;
  --badge-border: #2A2A2E;
  --credential-bg: #FFFFFF;
  --credential-border: #FFFFFF;
  --credential-caption: #5B6472;
  --credential-caption-strong: #1B2E4B;
  --switch-knob: #3A3A3F;
  --switch-knob-shadow: none;
}


/* ==========================================================================
   2. BASE STYLES
   Sensible defaults for plain HTML elements, before any classes.
   ========================================================================== */

/* box-sizing: border-box makes width include padding and border.
   Without it, a 100% wide box with padding would stick out past its parent. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ---- Root font size: the "1rem" that every size in this file is based on ----
   100% = the visitor's browser setting, normally 16px. Using % instead of px
   means someone who has set a bigger default text size still gets it.
   It stays 16px up to 1280px wide, then grows smoothly:
   16px at 1280 -> 17px at 1440 -> 18px at 1920, and stays 18px beyond.
   Each calc() is the straight line between two of those points; clamp()
   holds it inside that stretch, so there are no jumps at the edges. */
html {
  font-size: 100%;
  /* Stops phones from enlarging text on their own when rotated. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* When a link jumps to a spot on the page (like "Skip to content"),
     leave room so the sticky header doesn't cover it. */
  scroll-padding-top: var(--header-height);
}

@media (min-width: 1280px) {
  html {
    font-size: clamp(100%, calc(50% + 0.625vw), 106.25%);      /* 16px -> 17px */
  }
}

@media (min-width: 1440px) {
  html {
    font-size: clamp(106.25%, calc(87.5% + 0.2083vw), 112.5%); /* 17px -> 18px */
  }
}

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--heading);
}

/* clamp(min, preferred, max): the size grows with the screen width (vw)
   but never goes below the min or above the max. Section headings reach
   about 2.5rem (40px) at 1024px and 3.5rem (63px) at 1920px. */
h2 {
  font-size: clamp(1.75rem, calc(0.85rem + 2.5vw), 3.5rem);
}

h3 {
  font-size: 1.25rem;
  font-weight: 600;
}

p {
  margin: 0;
}

/* Images never overflow their box, and display:block removes the small
   gap browsers leave under inline images. */
img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
}

/* Lists we style ourselves (nav, check lists, steps) have bullets removed
   by adding this class. */
.list-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The HTML "hidden" attribute must always win, even over classes that set
   display, so JS can hide things reliably. */
[hidden] {
  display: none !important;
}

/* Visible focus outline for keyboard users. :focus-visible only shows it
   when someone is using the keyboard, not on every mouse click.
   Navy in light, white in dark (--focus-color). */
:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 3px;
}

/* On the dark bands (navy in light, near-black in dark) the outline is always white. */
.site-footer :focus-visible,
.section-navy :focus-visible,
.hero :focus-visible,
.page-header :focus-visible {
  outline-color: var(--white);
}

/* ...except inside the card that sits on that band: it's white in light
   (navy outline) and dark gray in dark (white outline). */
.section-navy .start-card :focus-visible {
  outline-color: var(--focus-color);
}

/* "Skip to content" link: hidden above the screen until a keyboard user
   presses Tab, then it slides into view. Lets them jump past the menu. */
.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--skip-link-bg);
  color: var(--white);
  font-weight: 600;
  border-radius: var(--radius-btn);
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
  outline-color: var(--white);
}


/* ==========================================================================
   3. LAYOUT HELPERS
   ========================================================================== */

/* .container is the one shared set of edges. The header, hero, every
   section and the footer all use it, so the logo, the hero text, headings
   and grids share a left edge, and Call Now shares a right edge with the
   grids. It fills the window up to 2200px, with --gutter on each side. */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;   /* "inline" = left and right; auto centers it */
  padding-inline: var(--gutter);
}

/* Every full-width band of the page is a .section with top/bottom padding. */
.section {
  padding-block: 4rem;   /* "block" = top and bottom */
}

/* Desktop: 6rem, growing a little on wide screens (6% of the width, up to 8rem). */
@media (min-width: 1024px) {
  .section {
    padding-block: clamp(6rem, 6vw, 8rem);
  }
}

/* Background variants for sections. */
.section-light {
  background: var(--bg-light);
}

/* The "band" sections: navy in light, near-black gray in dark. */
.section-navy {
  background: var(--band-bg);
  color: var(--white);
}

.section-navy h2 {
  color: var(--white);
}


/* ==========================================================================
   4. REUSABLE PIECES
   ========================================================================== */

/* ---- Section heading (h2) with the short red bar underneath ----
   ::after creates an extra invisible element after the text, which we
   style as the bar. No extra HTML needed. */
.section-heading {
  margin-bottom: 1.5rem;
}

.section-heading::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 0.25rem;
  margin-top: 1rem;
  background: var(--red);
}

/* ---- Small uppercase labels like "OUR CREDENTIALS" (spec 6.6) ---- */
.section-label {
  margin: 0 0 1.25rem;
  color: var(--heading);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---- Buttons ----
   .btn holds what every button shares; .btn-primary / .btn-outline add the look.
   inline-flex lines up the icon and text side by side and centers them. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;          /* comfortable tap target for fingers */
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border: 2px solid transparent;
  border-radius: var(--radius-btn);
  font-family: inherit;
  font-size: var(--btn-font);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn svg {
  flex-shrink: 0;   /* never squash the icon when space is tight */
  width: 1.25rem;
  height: 1.25rem;
}

/* Buttons grow a little on wide screens: about 18px 36px padding and
   1.0625rem text at 1920px. */
@media (min-width: 1440px) {
  :root {
    --btn-font: 1.03125rem;
    --btn-pad-y: 0.9375rem;
    --btn-pad-x: 1.875rem;
  }
}

@media (min-width: 1920px) {
  :root {
    --btn-font: 1.0625rem;
    --btn-pad-y: 1rem;
    --btn-pad-x: 2rem;
  }
}

/* The red button looks the same in both themes. */
.btn-primary {
  background: var(--red);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--red-hover);
}

/* Outline button: navy in light, white in dark. */
.btn-outline {
  background: transparent;
  border-color: var(--btn-outline-color);
  color: var(--btn-outline-color);
}

.btn-outline:hover {
  background: var(--btn-outline-hover-bg);
  color: var(--btn-outline-hover-text);
}

/* The white version of the outline button, for use on navy backgrounds.
   It's a separate class (not automatic) because some navy sections contain
   white cards, where the button must stay navy. */
.btn-outline-light {
  border-color: var(--white);
  color: var(--white);
}

.btn-outline-light:hover {
  background: var(--white);
  color: var(--navy);
}

/* Stretches a button to the full width of its container. */
.btn-block {
  width: 100%;
}

/* Disabled buttons (the form while sending) look faded and don't react. */
.btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* ---- Pill badge on photos and bands (hero and inner page headers),
   translucent white in both themes ---- */
.badge-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--white-border);
  border-radius: 999px;          /* a huge radius makes fully rounded ends */
  background: var(--white-translucent);
  color: var(--white);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
}

/* ---- Red icon on a tinted rounded square (service cards, contact rows) ---- */
.icon-tile {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 12px;
  background: var(--red-tint);
  color: var(--red);    /* the SVG uses stroke="currentColor", so it picks this up */
}

.icon-tile svg {
  width: 1.5rem;
  height: 1.5rem;
}

@media (min-width: 1920px) {
  .icon-tile {
    width: 3.125rem;    /* about 56px */
    height: 3.125rem;
  }
}


/* ==========================================================================
   5. SHARED COMPONENTS (on every page)
   ========================================================================== */

/* ---------- 5.1 Header (spec 6.1) ----------
   position: sticky keeps it pinned to the top while scrolling.
   z-index puts it above everything else on the page.
   The inside uses the same .container as the rest of the page, so the logo
   lines up with the content's left edge and the right group with its right edge. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  transition: box-shadow 0.2s ease;
}

/* main.js adds .is-scrolled once the page has scrolled past 10px. */
.site-header.is-scrolled {
  box-shadow: var(--shadow-header);
}

/* One row: logo, (menu button), menu (nav + theme switch), Call Now.
   flex lays children out in a row; gap is the space between them. */
.header-inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--header-height);
}

.site-logo {
  /* margin-right: auto pushes everything after the logo to the right edge. */
  margin-right: auto;
  flex-shrink: 0;
}

.site-logo img {
  width: auto;
  height: 3.5rem;    /* 56px on phones */
}

/* Two logo files sit in the header: dark letters for the light theme,
   white letters for the dark theme. CSS shows only the right one.
   (display: none also hides the other from screen readers.) */
.logo-for-dark {
  display: none;
}

html[data-theme="dark"] .logo-for-light {
  display: none;
}

html[data-theme="dark"] .logo-for-dark {
  display: block;
}

/* ---- Call Now: two separate elements ----
   Phones and tablets: .header-call, a red tel: button that opens the dialer.
   Desktop: .header-phone, plain text (not a link, can't be focused or
   clicked), because desktop computers usually can't place calls.
   CSS shows one and hides the other. */

/* On phones the Call Now button sits left of the menu button. In the HTML
   the menu button comes first (so after opening the menu, Tab goes straight
   into the links), so "order" swaps them visually. */
.header-call {
  order: 1;
}

.menu-toggle {
  order: 2;
}

/* Slightly tighter side padding than other buttons, so logo, Call Now and
   the menu button all fit on a 360px screen. */
.btn-call {
  padding-inline: 0.875rem;
  white-space: nowrap;
}

.header-phone {
  display: none;
}

/* ---- Menu button (phones and tablets) ---- */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--nav-link);
  cursor: pointer;
}

.menu-toggle svg {
  width: 1.75rem;
  height: 1.75rem;
}

/* Swap the icon based on aria-expanded, the same attribute screen readers
   read. JS only flips that one attribute, and the CSS follows it. */
.menu-toggle .icon-close,
.menu-toggle[aria-expanded="true"] .icon-menu {
  display: none;
}

.menu-toggle[aria-expanded="true"] .icon-close {
  display: block;
}

/* ---- The menu: navigation links + theme switch ----
   On phones it's a panel that drops down under the header, hidden until
   main.js adds .is-open. On desktop it sits in the header row. */
.site-menu {
  display: none;
  position: absolute;
  top: 100%;      /* right under the header */
  left: 0;
  right: 0;
  background: var(--header-bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--header-border);
  box-shadow: var(--shadow-header);
}

.site-menu.is-open {
  display: block;
}

.nav-list a {
  display: flex;
  align-items: center;
  min-height: 3.25rem;
  padding-inline: var(--gutter);   /* lines the links up with the logo */
  border-bottom: 1px solid var(--border);
  color: var(--nav-link);
  font-weight: 500;
  text-decoration: none;
}

/* Hover and the current page get a red underline (both themes). */
.nav-list a:hover,
.nav-list a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.375rem;
}

/* The row holding the theme switch, at the bottom of the phone panel. */
.theme-row {
  padding: 0.25rem var(--gutter);
}

@media (min-width: 1024px) {
  .header-inner {
    gap: 1rem;
  }

  .site-logo {
    margin-right: 0;
  }

  .site-logo img {
    height: 4.5rem;    /* 72px at 1024px */
  }

  /* Desktop: the menu button and the tel: button disappear;
     the menu sits in the row, filling the space between the logo and the phone text. */
  .menu-toggle,
  .header-call {
    display: none;
  }

  .site-menu {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: static;
    flex: 1;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  /* The nav takes all the free space, and "space-evenly" spreads the links
     through it with equal space before, between and after them, so the row
     looks balanced. The gap is only the minimum space between links. */
  .site-nav {
    flex: 1;
  }

  .nav-list {
    display: flex;
    justify-content: space-evenly;
    gap: 1rem;
  }

  .nav-list a {
    min-height: 3rem;
    padding-inline: 0;
    border-bottom: 0;
    white-space: nowrap;
  }

  .theme-row {
    padding: 0;
  }

  /* The desktop phone text: red icon, red "Call Now!", number in navy (light)
     or white (dark). Plain text, so no hover, underline or pointer. */
  .header-phone {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    flex-shrink: 0;
    color: var(--red);     /* the icon uses currentColor */
    font-weight: 500;
    white-space: nowrap;
  }

  .header-phone svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  .header-phone .call-label {
    color: var(--red-text);
  }

  /* The number joins "Call Now!" only from 1200px (not enough room before that). */
  .header-phone .call-number {
    display: none;
    color: var(--call-number);
  }
}

@media (min-width: 1200px) {
  .header-phone .call-number {
    display: inline;
  }
}

/* Wide screens: a little more breathing room, bigger logo and text. */
@media (min-width: 1440px) {
  .header-inner,
  .site-menu {
    gap: 1.5rem;
  }

  .site-logo img {
    height: 4.75rem;
  }

  .nav-list a,
  .header-phone {
    font-size: 1.0625rem;
  }
}

@media (min-width: 1920px) {
  .site-logo img {
    height: 4.875rem;   /* about 88px */
  }

  .nav-list a,
  .header-phone {
    font-size: 1.125rem;
  }

  .header-phone svg {
    width: 1.3333rem;   /* about 24px */
    height: 1.3333rem;
  }
}


/* ---------- 5.2 Theme switch (sun / moon) ----------
   A real <button> with role="switch": screen readers announce it as
   "Appearance, dark mode, switch, on/off" using aria-checked. main.js flips
   aria-checked and the theme; the CSS below reads aria-checked to slide
   the knob and color the active icon.
   Its sizes are variables so the desktop version can grow on wide screens:
   72 x 36px in the phone menu and on desktop at 1024px, 80 x 40px at 1440px,
   88 x 44px at 1920px. The knob is about 6px smaller than the track height
   (a 2px inset on each side plus the 1px border). */
.theme-toggle {
  --switch-w: 4.5rem;           /* 72px */
  --switch-h: 2.25rem;          /* 36px */
  --switch-knob-size: 1.875rem; /* 30px */
  --switch-icon: 1.25rem;       /* 20px */
  --switch-inset: 0.125rem;     /* 2px: space between the knob and the track's edge */

  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 3rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--nav-link);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

/* The pill-shaped track, with the sun on the left and the moon on the right. */
.theme-toggle-track {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  width: var(--switch-w);
  height: var(--switch-h);
  /* Each icon sits centered under the knob's resting spot. */
  padding-inline: calc(var(--switch-inset) + (var(--switch-knob-size) - var(--switch-icon)) / 2);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-light);
}

/* The icons sit above the knob (z-index), so the active one shows on top of it. */
.theme-toggle-track svg {
  position: relative;
  z-index: 1;
  width: var(--switch-icon);
  height: var(--switch-icon);
  color: var(--text-muted);
}

/* The knob starts on the sun side (light). top: 50% plus translateY(-50%)
   centers it vertically whatever the track height. */
.theme-toggle-knob {
  position: absolute;
  top: 50%;
  left: var(--switch-inset);
  width: var(--switch-knob-size);
  height: var(--switch-knob-size);
  border-radius: 50%;
  background: var(--switch-knob);
  box-shadow: var(--switch-knob-shadow);
  transform: translate(0, -50%);
  transition: transform 0.2s ease;   /* the slide; turned off by the reduced motion rule at the end */
}

/* Dark mode on: the knob slides to the moon side. The distance is the
   track's inside width minus the knob and the two insets (the 2px is the
   track's 1px border on each side). */
.theme-toggle[aria-checked="true"] .theme-toggle-knob {
  transform: translate(calc(var(--switch-w) - 2px - var(--switch-knob-size) - 2 * var(--switch-inset)), -50%);
}

/* The active icon gets a strong color; the other stays muted. */
.theme-toggle[aria-checked="false"] .theme-icon-sun {
  color: var(--red);
}

.theme-toggle[aria-checked="true"] .theme-icon-moon {
  color: var(--heading);
}

@media (min-width: 1024px) {
  /* Desktop: just the switch. The "Dark mode" words are hidden, but the
     button still has aria-label="Dark mode" for screen readers. */
  .theme-toggle {
    width: auto;
  }

  .theme-toggle-text {
    display: none;
  }
}

@media (min-width: 1440px) {
  .theme-toggle {
    --switch-w: 4.7059rem;        /* 80px at the 17px root */
    --switch-h: 2.3529rem;        /* 40px */
    --switch-knob-size: 2rem;     /* 34px */
    --switch-icon: 1.1765rem;     /* 20px */
    --switch-inset: 0.1176rem;    /* 2px */
  }
}

@media (min-width: 1920px) {
  .theme-toggle {
    --switch-w: 4.8889rem;        /* 88px at the 18px root */
    --switch-h: 2.4444rem;        /* 44px */
    --switch-knob-size: 2.1111rem;/* 38px */
    --switch-icon: 1.3333rem;     /* 24px */
    --switch-inset: 0.1111rem;    /* 2px */
  }
}


/* ---------- 5.3 Inner page header band (spec 6.7) ----------
   Navy in light, near-black gray in dark. */
.page-header {
  position: relative;      /* lets the photo and overlay be placed inside it */
  padding-block: 4.5rem;
  background: var(--band-bg);
  color: var(--white);
  overflow: hidden;
}

/* Optional background photo: its box is stretched over the whole band, behind the text. */
.page-header-media {
  position: absolute;
  inset: 0;                /* shorthand for top/right/bottom/left: 0 */
}

/* Same "cover photo" approach as the home hero: placed absolutely, exact
   width and height, and a selector strong enough to outrank the base img rule. */
.page-header .page-header-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;       /* fill the box, cropping instead of stretching */
  object-position: center;
}

/* Tint over the photo so white text is readable: navy in light, black in dark. */
.page-header-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay-banner);
}

/* position: relative brings the text above the absolutely placed photo. */
.page-header .container {
  position: relative;
}

.page-header h1 {
  margin: 1.25rem 0 1rem;
  color: var(--white);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.1;
}

/* The intro paragraph has its own class rather than ".page-header p",
   because the badge is a <p> too and would otherwise pick up these styles. */
.page-header-intro {
  max-width: 40rem;
  color: var(--white-85);
  font-size: 1.125rem;
}

@media (min-width: 1024px) {
  .page-header {
    padding-block: 7rem;
  }
}


/* ---------- 5.4 "Start your claim" block (spec 6.4) ----------
   The band follows --band-bg; the card on the right follows the theme. */
.start-claim-grid {
  display: grid;
  gap: 2.5rem;
}

.start-claim-intro {
  max-width: 60ch;
  color: var(--white-85);
  font-size: 1.125rem;
}

.role-list {
  margin-top: 1.75rem;
  display: grid;
  gap: 1rem;
}

.role-list li {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.125rem;
  font-weight: 500;
}

/* The numbers in red circles. */
.role-number {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 700;
}

/* The card on the right: white in light, dark gray in dark. */
.start-card {
  padding: 2rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text);
}

.start-card h3 {
  font-size: 1.5rem;
  font-weight: 700;
}

.start-card p {
  margin: 0.75rem 0 1.5rem;
  color: var(--text-muted);
}

.start-card .btn + .btn {
  margin-top: 0.75rem;
}

@media (min-width: 1024px) {
  .start-claim-grid {
    grid-template-columns: 1fr 1fr;   /* two equal columns */
    align-items: center;
    gap: 4rem;
  }

  .start-card {
    padding: 2.5rem;
  }
}


/* ---------- 5.5 Footer (spec 6.5) ----------
   Navy in light, black in dark. The white logo works on both. */
.site-footer {
  padding-top: 4rem;
  background: var(--footer-bg);
  color: var(--white);
}

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

.footer-logo {
  width: 100%;
  max-width: 13.75rem;    /* 220px */
}

.footer-tagline {
  margin-top: 1.25rem;
  color: var(--white-85);
}

.footer-meta {
  margin-top: 0.5rem;
  color: var(--white-70);
  font-size: 0.875rem;
}

/* "QUICK LINKS" and "CONTACT US" labels, with a small red bar under them. */
.footer-heading {
  margin: 0 0 1rem;
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-heading::after {
  content: "";
  display: block;
  width: 2rem;
  height: 3px;
  margin-top: 0.625rem;
  background: var(--red);
}

.footer-links a {
  display: inline-block;
  padding-block: 0.5rem;     /* bigger tap target without looking bigger */
  color: var(--white-85);
  text-decoration: none;
  overflow-wrap: anywhere;   /* lets the long email address wrap on tiny screens */
}

.footer-links a:hover {
  color: var(--white);
  text-decoration: underline;
}

.footer-bottom {
  margin-top: 3rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--white-divider);
  color: var(--white-70);
  font-size: 0.875rem;
  text-align: center;
}

@media (min-width: 1024px) {
  .site-footer {
    padding-top: 5rem;
  }

  .footer-grid {
    /* fr = "fraction of leftover space": the first column gets a bit more room. */
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 4rem;
  }
}


/* ==========================================================================
   6. PAGE SPECIFIC SECTIONS
   ========================================================================== */

/* ---------- 6.1 Home: Hero (spec 7.1) ----------
   Photo overlay: navy in light, black in dark. */
.hero {
  position: relative;
  display: flex;
  align-items: center;      /* vertically centers the content */
  /* Two lines on purpose: browsers that don't understand "svh" ignore the
     second line and keep 75vh. Browsers that do understand it use 75svh,
     which measures the screen with the phone's toolbars showing, so the
     hero doesn't jump when they hide. */
  min-height: 75vh;
  min-height: 75svh;
  padding-block: 4rem;
  color: var(--white);
  overflow: hidden;
}

/* The box that holds the photo and overlay: stretched over the whole hero. */
.hero-media {
  position: absolute;
  inset: 0;
}

/* The photo fills that box. "Cover" photos like this one are placed
   absolutely and given an exact width and height, instead of being sized by
   their own shape. object-fit: cover then crops the photo to fill the box
   without stretching it. */
.hero .hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 60% center;
}

/* Overlay: one flat shade on phones and tablets, so text is readable
   no matter which part of the photo it sits on. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay-hero-flat);
}

.hero .container {
  position: relative;
}

.hero-content {
  max-width: 47.5rem;
}

.hero h1 {
  margin: 1.25rem 0;
  color: var(--white);
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  line-height: 1.1;
}

/* "Your Insurance Claim Specialists" with a short red line before it. */
.hero-subheading {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2.5vw, 1.6rem);
  font-weight: 600;
  line-height: 1.3;
}

.hero-subheading::before {
  content: "";
  flex-shrink: 0;
  width: 2.5rem;
  height: 3px;
  background: var(--red-logo);
}

/* max-width in "ch" units: 1ch is the width of the "0" character, so 62ch
   means roughly 62 characters per line, a comfortable reading length. */
.hero-text {
  max-width: 62ch;
  margin: 1.25rem 0 2rem;
  color: var(--white-85);
  font-size: 1.125rem;
}

@media (min-width: 1024px) {
  /* Desktop hero height, so the top of "Our Services" peeks into view and
     visitors can tell there's more below.

     In plain English: "take the full screen height, subtract the header,
     subtract 9.375rem (150px) kept free for the services peek, and use that
     as the hero's height, but never less than 27.5rem (440px)."
     - calc() does the arithmetic, mixing units (svh, rem) in one value.
     - max() picks the bigger of its two values, so on a short laptop screen
       where the sum comes out small, the floor wins and the hero isn't squashed.
     - 100svh is the screen height with any browser toolbars showing.
       Browsers too old for "svh" ignore the second line and keep the first,
       which uses plain "vh".
     "min-height" means the hero can still grow taller if its text needs it.

     Padding: 3rem on top. The bottom is 4.5rem because the scroll cue sits
     there: 0.5rem from the bottom edge + about 2.8rem for the cue + a little
     bounce + clear space above it. Because the cue lives inside this bottom
     padding, the text and button can never reach it. */
  .hero {
    min-height: max(27.5rem, calc(100vh - var(--header-height) - 9.375rem));
    min-height: max(27.5rem, calc(100svh - var(--header-height) - 9.375rem));
    padding-top: 3rem;
    padding-bottom: 4.5rem;
  }

  /* Wide column for the headline, so it wraps to 2 or 3 lines on laptops.
     The paragraph keeps its own 62ch limit, so it stays easy to read. */
  .hero-content {
    max-width: 75rem;
  }

  /* The h1 follows screen HEIGHT as well as width.
     min(4.5vw, 5.5vh) picks whichever is smaller: 4.5% of the screen width
     or 5.5% of the screen height. So on a wide but short laptop, the height
     keeps the heading from getting too tall. clamp() keeps it between
     2rem and 4.5rem; it reaches the top size only on tall, wide screens.
     (Montserrat is a wide font: these numbers keep the headline to 2 lines
     on 1280x600 and 1366x657 laptops, so the button and scroll cue fit.)
     Slightly tighter spacing than on phones so everything fits on short
     laptop screens. */
  .hero h1 {
    margin: 1rem 0;
    font-size: clamp(2rem, min(4.5vw, 5.5vh), 4.5rem);
  }

  .hero-text {
    margin: 1rem 0 1.5rem;
  }

  /* Desktop: the text only covers the left side, so the overlay fades from
     dark on the left to lighter on the right, letting the photo show. */
  .hero-media::after {
    background: linear-gradient(90deg, var(--overlay-hero-start) 0%, var(--overlay-hero-mid) 55%, var(--overlay-hero-end) 100%);
  }
}

/* ---- Scroll cue: "Our Services" plus a down arrow at the bottom center of
   the hero, hinting that the page continues. Desktop only, so it's hidden
   (display: none) by default and switched on at 1024px. ---- */
.scroll-cue {
  display: none;
}

@media (min-width: 1024px) {
  .scroll-cue {
    position: absolute;   /* placed relative to .hero, which is position: relative */
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);   /* shift left by half its own width, so it's truly centered */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    color: var(--white-85);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
  }

  .scroll-cue:hover {
    color: var(--white);
  }

  .scroll-cue svg {
    width: 1.5rem;
    height: 1.5rem;
  }
}

/* The bounce. @keyframes describes the motion: start in place, drift a
   little down halfway through, come back. It only runs when the visitor has
   NOT asked their device to reduce motion ("no-preference"). Only the arrow
   moves, so the link itself stays still and easy to click. */
@keyframes scroll-cue-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(0.375rem);
  }
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .scroll-cue svg {
    animation: scroll-cue-bounce 2.4s ease-in-out infinite;
  }
}


/* ---------- 6.2 Home: Our Services (spec 7.2) ---------- */
/* CSS grid: we say how many columns, and cards flow into them in HTML order.
   --card-pad is the inside spacing of service and project cards; it grows
   on wide screens (about 40px at 1920px). */
:root {
  --card-pad: 1.75rem;
}

@media (min-width: 1440px) {
  :root {
    --card-pad: 2rem;
  }
}

@media (min-width: 1920px) {
  :root {
    --card-pad: 2.25rem;
  }
}

.services-grid {
  display: grid;
  gap: 1.5rem;
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: var(--card-pad);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Lift 2px on hover. translateY moves it up without affecting the layout.
   In dark there's no shadow, so the border lightens slightly instead. */
.service-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--card-hover-border);
}

.service-card h3 {
  margin-bottom: 0.5rem;
}

.service-card p {
  color: var(--text-muted);
}

/* Feature card (Storm Inspections): photo across the top, no padding around
   it. overflow: hidden clips the photo's corners to the card's rounded ones. */
.service-card-feature {
  padding: 0;
  overflow: hidden;
}

.service-card-feature img {
  width: 100%;
  height: 13.75rem;
  object-fit: cover;
  object-position: center;
}

.service-card-body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 0 var(--card-pad) var(--card-pad);
}

@media (min-width: 640px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);   /* 2 equal columns */
  }

  /* "span 2" makes a card take up 2 columns. */
  .service-card-feature,
  .service-card-wide {
    grid-column: span 2;
  }
}

@media (min-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Less space above "Our Services" on desktop, so its heading shows in the
     peek under the hero. Only the top changes. Two classes
     (.section.services-section) so this outranks the general .section rule. */
  .section.services-section {
    padding-top: 3.5rem;
  }

  .service-card-feature img {
    height: 16.25rem;
  }

  /* Adjuster Meetings sits next to the taller Storm Inspections card in
     row 1, so the grid stretches it to the same height. Centering its
     content vertically avoids a big empty gap under the text.
     "+" means "the card right after the feature card". */
  .service-card-feature + .service-card {
    justify-content: center;
  }

  /* Waterproofing: full width, with the icon on the left and text beside it. */
  .service-card-wide {
    grid-column: span 3;
    flex-direction: row;
    align-items: flex-start;
  }
}

/* Card titles grow on wide screens: about 1.5rem at 1920px. */
@media (min-width: 1440px) {
  .service-card h3 {
    font-size: 1.375rem;
  }
}

@media (min-width: 1920px) {
  .service-card h3 {
    font-size: 1.5rem;
  }
}


/* ---------- 6.3 Home: Why Choose + credentials (spec 7.3) ---------- */
.why-grid {
  display: grid;
  gap: 2.5rem;
}

.why-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center top;
  border-radius: 16px;
}

.check-list {
  display: grid;
  gap: 0.875rem;
  margin-bottom: 1.5rem;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-weight: 500;
}

.check-list svg {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--red);
}

.why-text {
  max-width: 65ch;
  color: var(--text-muted);
}

.credentials {
  margin-top: 4rem;
}

.credentials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

/* White in both themes: brand logos are designed for light backgrounds. */
.credential-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 8.75rem;    /* same height whether the logo loads or not */
  padding: 1.5rem;
  border: 1px solid var(--credential-border);
  border-radius: var(--radius-card);
  background: var(--credential-bg);
  text-align: center;
}

/* A fixed 4rem-tall box for each logo; "contain" shrinks the logo to fit
   without cropping or stretching it. */
.credential-logo {
  width: 100%;
  height: 4rem;
  object-fit: contain;
}

.credential-caption {
  margin: 0;
  color: var(--credential-caption);
  font-size: 0.875rem;
  font-weight: 600;
}

/* Fallback: when a logo file is missing, main.js hides the image and adds
   .is-fallback, so the name shows bigger and navy instead. */
.credential-card.is-fallback .credential-caption {
  color: var(--credential-caption-strong);
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 700;
}

@media (min-width: 1024px) {
  .why-grid {
    /* minmax(0, ...) stops long content from pushing a column wider than 45/55. */
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
    align-items: center;
    gap: 4rem;
  }

  .why-image {
    aspect-ratio: 4 / 5;
  }

  .credentials {
    margin-top: 5rem;
  }

  .credentials-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
}


/* ---------- 6.4 Home: Hail call band (spec 7.4) ----------
   Navy in light, near-black gray in dark (via .section-navy). */
.call-band-grid {
  display: grid;
  gap: 2.5rem;
}

.call-band-text {
  max-width: 60ch;
  margin: 0 0 1.75rem;
  color: var(--white-85);
  font-size: 1.125rem;
}

.call-band-label {
  margin: 0 0 1rem;
  color: var(--white-70);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The whole row (circle + number) is one phone link. */
.call-band-phone {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  color: var(--white);
  text-decoration: none;
}

.call-band-phone:hover .call-band-number {
  text-decoration: underline;
  text-underline-offset: 0.375rem;
}

.phone-circle {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid var(--white-border);
  border-radius: 50%;
}

.phone-circle svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Heading font here because the body font isn't loaded at weight 700. */
.call-band-number {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

@media (min-width: 1024px) {
  .call-band-grid {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4rem;
  }

  .call-band-call {
    justify-self: center;
  }
}


/* ---------- 6.5 Claim process: How It Works (spec 8.2) ---------- */
.how-grid {
  display: grid;
  gap: 2.5rem;
}

.how-text {
  max-width: 60ch;
  font-size: 1.125rem;
}

.pill-list {
  display: flex;
  flex-wrap: wrap;    /* pills move to the next line when they run out of room */
  gap: 0.75rem;
}

.pill {
  padding: 0.625rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--heading);
  font-weight: 500;
}

@media (min-width: 1024px) {
  .how-grid {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4rem;
  }
}


/* ---------- 6.6 Claim process: Timeline (spec 8.3) ----------
   Each step is a two-column grid: the numbered circle, then the text.
   The vertical line is drawn by each step (except the last) with ::before,
   running from its circle down to the next one.
   Circles: navy in light; dark gray with a red edge in dark. */
.timeline-step {
  --circle: 3rem;    /* a variable just for this component: circle size */
  position: relative;
  display: grid;
  grid-template-columns: var(--circle) 1fr;
  gap: 1.25rem;
  padding-bottom: 3rem;
}

.timeline-step:last-child {
  padding-bottom: 0;
}

.timeline-step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--circle) / 2 - 1px);   /* centered under the circle */
  width: 2px;
  background: var(--border);
}

.timeline-number {
  position: relative;      /* sits on top of the line */
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--circle);
  height: var(--circle);
  border: 2px solid var(--timeline-circle-border);
  border-radius: 50%;
  background: var(--timeline-circle-bg);
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 700;
}

.timeline-body {
  padding-top: 0.625rem;     /* lines the title up with the middle of the circle */
}

.timeline-body p {
  max-width: 47.5rem;
  margin-top: 0.5rem;
  color: var(--text-muted);
}

@media (min-width: 1024px) {
  .timeline-step {
    --circle: 4rem;
    gap: 2rem;
    padding-bottom: 4rem;
  }

  .timeline-number {
    font-size: 1.25rem;
  }

  .timeline-body {
    padding-top: 1rem;
  }

  .timeline-body h3 {
    font-size: 1.5rem;
  }
}


/* ---------- 6.7 Completed projects grid (spec 9.2) ---------- */
.project-grid {
  display: grid;
  gap: var(--card-pad);    /* 28px, growing with the card padding on wide screens */
}

/* container-type: inline-size makes each card a "container": CSS inside it
   can ask "how wide is this card?" (an @container query, below) instead of
   "how wide is the window?". That matters here because the card width
   depends on the number of columns, not just the window width. */
.project-card {
  container-type: inline-size;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.project-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Two stats side by side with a thin divider between them.
   It's a <dl> (description list: label + value pairs), so its default
   margins are removed. The padding follows --card-pad (set in 6.2) on wide screens. */
.project-stats {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 1.25rem 1.5rem;
}

.project-stats dd {
  margin: 0;
}

@media (min-width: 1440px) {
  .project-stats {
    padding: calc(var(--card-pad) * 0.75) var(--card-pad);
  }
}

.project-stat {
  flex: 1;
  min-width: 0;
}

.project-stat + .project-stat {
  padding-left: 1rem;
  border-left: 1px solid var(--border);
  text-align: right;
}

.stat-label {
  color: var(--text-muted);
  font-size: 0.875rem;
}

/* Heading font here because the body font isn't loaded at weight 700. */
.stat-value {
  margin-top: 0.125rem;
  color: var(--heading);
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.stat-value-red {
  color: var(--red-text);
}

@media (min-width: 640px) {
  .project-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .project-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1600px) {
  .project-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Narrow cards: stack the two stats instead of squeezing them.
   "$1,500,000.00" in Montserrat Bold at 1.375rem needs about 11rem, and
   "Total Square Feet" about 8.25rem. Side by side, plus the divider and
   padding, that needs a card about 24.5rem wide; 27rem leaves a safety
   margin. On narrower cards the stats sit one above the other, with the
   divider between them as a horizontal line, so a number never wraps or
   runs out of the card. */
@container (max-width: 27rem) {
  .project-stats {
    flex-direction: column;
    gap: 0.75rem;
  }

  .project-stat + .project-stat {
    padding-top: 0.75rem;
    padding-left: 0;
    border-top: 1px solid var(--border);
    border-left: 0;
    text-align: left;
  }
}


/* ---------- 6.8 Contact section (spec 10.2) ----------
   In the HTML the form comes first (so phones show it first).
   On desktop we move the info into the left column with grid-column. */
.contact-grid {
  display: grid;
  gap: 3rem;
}

.contact-intro {
  max-width: 60ch;
  margin-bottom: 2rem;
  color: var(--text-muted);
}

.info-list {
  display: grid;
  gap: 1.5rem;
}

.info-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.info-row .icon-tile {
  width: 3.25rem;
  height: 3.25rem;
}

.info-label {
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.info-value {
  color: var(--heading);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.info-value a {
  text-decoration: none;
}

.info-value a:hover {
  text-decoration: underline;
}

/* Heading font here because the body font isn't loaded at weight 700. */
.info-value-phone {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
}

.info-sub {
  color: var(--text-muted);
}

.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--badge-border);
  border-radius: 999px;
  background: var(--badge-bg);
  color: var(--heading);
  font-size: 0.875rem;
  font-weight: 600;
}

.trust-badge svg {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--red);
}

/* ---- Form card ---- */
.form-card {
  padding: 1.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

/* "Send Us a Message" sits inside a card, so it's smaller than a section heading. */
.form-card h2 {
  font-size: clamp(1.5rem, calc(1rem + 1.5vw), 2rem);
}

.form-intro {
  margin: 0.5rem 0 1.75rem;
  color: var(--text-muted);
}

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

.form-label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--heading);
  font-weight: 600;
}

.required {
  color: var(--red-text);
}

/* Inputs: 1rem (16px) text stops iPhones from zooming in when you tap a field. */
.form-input {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-btn);
  background: var(--input-bg);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
}

.form-input::placeholder {
  color: var(--text-muted);
}

textarea.form-input {
  resize: vertical;   /* can be made taller, never wider than the card */
}

/* Focus ring: navy in light, white in dark. */
.form-input:focus {
  border-color: var(--focus-color);
  outline: 2px solid var(--focus-color);
  outline-offset: 0;
}

/* Fields that failed validation get a red border. */
.form-input[aria-invalid="true"] {
  border-color: var(--red);
}

/* Error text under a field. Empty error boxes take up no space. */
.field-error {
  margin-top: 0.375rem;
  color: var(--red-text);
  font-size: 0.875rem;
  font-weight: 500;
}

.field-error:empty,
.form-alert:empty {
  display: none;
}

.form-submit {
  width: 100%;
  margin-top: 1.75rem;
}

.form-note {
  margin-top: 1rem;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.form-alert {
  margin-top: 0.75rem;
  color: var(--red-text);
  font-weight: 500;
}

@media (min-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr 1fr;   /* Name and Phone side by side */
  }

  .form-field-full {
    grid-column: 1 / -1;   /* from the first column line to the last: full width */
  }
}

@media (min-width: 1024px) {
  .contact-grid {
    grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
    align-items: start;
    gap: 4rem;
  }

  /* Put the info in column 1 and the form in column 2, both in row 1,
     even though the form comes first in the HTML. */
  .contact-info {
    grid-column: 1;
    grid-row: 1;
  }

  /* The form never gets wider than 50rem: 2.5rem padding on each side
     leaves fields at most 45rem wide, so they don't stretch out on big
     screens. justify-self: end keeps the card against the right edge (lined
     up with everything else), so any leftover space in its column becomes
     extra gap between the info and the form. The info column keeps its 40%
     and grows with the screen. */
  .form-card {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    width: 100%;
    max-width: 50rem;
    padding: 2.5rem;
  }

  .form-submit {
    width: auto;
  }
}


/* ---------- 6.9 Thank-you popup (spec 10.3) ----------
   The overlay covers the whole screen (position: fixed + inset: 0).
   It starts with the "hidden" attribute. main.js removes "hidden", then adds
   .is-open on the next frame, so the opacity change animates (fades in). */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: var(--overlay-modal);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.modal.is-open {
  opacity: 1;
}

.modal-card {
  position: relative;
  width: 100%;
  max-width: 27.5rem;
  padding: 2.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  text-align: center;
}

/* The card gets focus when the popup opens (so screen readers announce it),
   but it doesn't need a focus outline because it's not clickable. */
.modal-card:focus {
  outline: none;
}

.modal-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: var(--red-tint);
  color: var(--red);
}

.modal-icon svg {
  width: 2rem;
  height: 2rem;
}

.modal-card h2 {
  font-size: 1.5rem;
}

.modal-card p {
  margin-top: 0.75rem;
  color: var(--text-muted);
}

.modal-card p a {
  color: var(--heading);
  font-weight: 600;
}

.modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.modal-close:hover {
  color: var(--heading);
}

/* Added to <body> while the popup is open so the page behind can't scroll. */
body.modal-open {
  overflow: hidden;
}


/* ==========================================================================
   7. REDUCED MOTION
   Some people get dizzy or sick from movement on screen and turn on
   "reduce motion" in their device settings. When they have, we switch off
   every transition and animation (hover lifts and the theme switch knob
   still change, just instantly).
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}