@import url('shared/tokens.css');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Montserrat', system-ui, -apple-system, sans-serif;

  --bg-page: var(--brand-white);
  --bg-panel: var(--brand-white);
  --bg-alt: var(--brand-offwhite);
  --text-body: var(--brand-black);
  --text-muted: var(--brand-gray-700);
  --accent: var(--brand-green);
  --accent-hover: var(--brand-green-hover);
  --accent-soft: var(--brand-green-tint);
  --border-soft: var(--brand-gray-300);
  /* Review stars read as gold by convention, so they sit outside the 3-color
     brand palette on purpose. Only used for star ratings. */
  --star-gold: #fbbc04;
  /* Same kind of deliberate exception: a failed form submission has to read as
     a problem, and green is the site's "this worked" color. Only used by
     .form-error. Do not adopt either of these as a general accent. */
  --error-red: #b3261e;
  --error-red-tint: #fdecea;
}

body {
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--text-body);
  background: var(--bg-page);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

section { padding-block: var(--space-7); }
@media (max-width: 767px) { section { padding-block: var(--space-6); } }
/* Alternating band so consecutive sections read as separate blocks instead of
   one continuous white field. */
.section-alt { background: var(--bg-alt); }

.section-head { max-width: 640px; margin-bottom: var(--space-6); }
.section-head h2 { font-size: clamp(1.9rem, 4vw, 2.5rem); margin-top: var(--space-2); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-2); }
.brand { flex-shrink: 0; }
.brand img { height: 40px; width: auto; flex-shrink: 0; }
.nav-primary { display: none; }
@media (min-width: 1000px) {
  .nav-primary { display: flex; align-items: center; gap: 0.85rem; flex-shrink: 0; }
  .nav-item { position: relative; flex-shrink: 0; display: flex; align-items: center; }
  .nav-link {
    font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; line-height: inherit; color: var(--text-body);
    background: none; border: none; border-bottom: 2px solid transparent; margin: 0; padding: 0 0 4px 0; cursor: pointer;
    display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; flex-shrink: 0; vertical-align: baseline;
    transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease);
  }
  .nav-link:hover, .nav-link:focus-visible { color: var(--accent); border-color: var(--accent); }
  /* Fallback for when JS hasn't loaded: hover/focus alone drives the dropdown.
     Once interactions.js adds .js-nav, the .is-open rules below take over so a
     click can pin the menu open. */
  .nav-primary:not(.js-nav) .nav-item.has-dropdown:hover .nav-link,
  .nav-primary:not(.js-nav) .nav-item.has-dropdown:focus-within .nav-link { color: var(--accent); border-color: var(--accent); }
  .nav-caret { width: 11px; height: 11px; transition: transform var(--duration) var(--ease); }
  .nav-primary:not(.js-nav) .nav-item.has-dropdown:hover .nav-caret,
  .nav-primary:not(.js-nav) .nav-item.has-dropdown:focus-within .nav-caret { transform: rotate(180deg); }
  .nav-dropdown {
    position: absolute; top: 100%; left: 0; margin-top: 0.6rem; min-width: 240px;
    background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: var(--radius-md);
    box-shadow: 0 16px 40px -20px rgba(0,0,0,0.3); padding: 0.5rem; display: flex; flex-direction: column; gap: 0.15rem; z-index: 110;
    opacity: 0; pointer-events: none; transform: translateY(-4px);
    transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
  }
  /* Invisible bridge across the 0.6rem gap between the title and the panel, so
     moving the pointer down into the menu doesn't count as leaving the item. */
  .nav-dropdown::before { content: ""; position: absolute; top: -0.6rem; left: 0; right: 0; height: 0.6rem; }
  .nav-primary:not(.js-nav) .nav-item.has-dropdown:hover .nav-dropdown,
  .nav-primary:not(.js-nav) .nav-item.has-dropdown:focus-within .nav-dropdown { opacity: 1; pointer-events: auto; transform: translateY(0); }
  /* JS-driven state: set on hover, and kept on after a click until dismissed. */
  .nav-item.has-dropdown.is-open .nav-link { color: var(--accent); border-color: var(--accent); }
  .nav-item.has-dropdown.is-open .nav-caret { transform: rotate(180deg); }
  .nav-item.has-dropdown.is-open .nav-dropdown { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .nav-dropdown a { padding: 0.6rem 0.75rem; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.87rem; border-bottom: none; }
  .nav-dropdown a:hover { background: var(--bg-alt); color: var(--accent); }
}
.header-actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.header-phone { display: none; font-weight: 700; font-size: 0.95rem; white-space: nowrap; }
.header-phone span { color: var(--accent); margin-right: 0.4rem; }
@media (min-width: 720px) and (max-width: 999px) { .header-phone { display: inline-flex; align-items: center; } }
@media (min-width: 1550px) { .header-phone { display: inline-flex; align-items: center; } }
/* "Text Us (Soon)" is a non-functional placeholder; keep it out of the desktop
   bar so the phone + Free Inspection + full nav fit the 1200px container without
   crowding "My Account". Revisit when text-messaging is actually live. */
.header-actions .text-us-cta { display: none; }
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; background: transparent; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); color: var(--text-body); }
@media (min-width: 1000px) { .nav-toggle { display: none; } }
.nav-toggle svg { width: 20px; height: 20px; }
.mobile-nav { display: none; flex-direction: column; background: var(--bg-panel); border-top: 1px solid var(--border-soft); max-height: calc(100vh - 64px); overflow-y: auto; }
.mobile-nav.open { display: flex; }
@media (min-width: 1000px) { .mobile-nav { display: none !important; } }
.mobile-nav a { padding: 1rem var(--space-4); font-weight: 600; border-bottom: 1px solid var(--border-soft); min-height: 44px; display: flex; align-items: center; }
.mobile-nav-label { padding: 0.85rem var(--space-4) 0.15rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--text-muted); }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.82rem; min-height: 36px; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 0.95rem; padding: 0.85rem 1.6rem; border-radius: 999px; border: 2px solid transparent; min-height: 44px; white-space: nowrap; transition: transform var(--duration) var(--ease), background var(--duration) var(--ease), color var(--duration) var(--ease); }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--accent); color: var(--brand-white); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-outline { background: transparent; border-color: var(--text-body); color: var(--text-body); }
.btn-outline:hover { background: var(--text-body); color: var(--bg-page); }
.btn-block { width: 100%; justify-content: center; }

/* ---------- Hero ---------- */
.hero { padding-block: var(--space-8) var(--space-7); background: var(--bg-alt); }
.hero-inner { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 900px) { .hero-inner { grid-template-columns: 1.1fr 0.9fr; } }
.hero h1 { font-size: clamp(2.3rem, 5vw, 3.4rem); margin-top: var(--space-3); }
.hero h1 em { font-style: italic; color: var(--accent); }
.hero-sub { font-size: 1.1rem; color: var(--text-muted); margin-top: var(--space-4); max-width: 52ch; }
.hero-cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.hero-media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/5; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Trust strip (homepage certification row) ---------- */
.trust-strip-section { padding-block: var(--space-4); border-bottom: 1px solid var(--border-soft); }

/* ---------- Shield system ---------- */
.system-premise { max-width: 640px; color: var(--text-muted); font-size: 1.05rem; margin-top: var(--space-3); }
.system-premise strong { color: var(--text-body); }
details.reveal { margin-top: var(--space-5); }
summary.reveal-toggle {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 700; color: var(--accent); font-size: 0.98rem; padding: 0.2rem 0;
}
summary.reveal-toggle::-webkit-details-marker { display: none; }
summary.reveal-toggle .chev { transition: transform var(--duration) var(--ease); }
details[open] summary.reveal-toggle .chev { transform: rotate(180deg); }
.reveal-body { margin-top: var(--space-4); }

.system-steps { display: grid; gap: var(--space-3); grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .system-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .system-steps { grid-template-columns: 1fr; } }
.system-step { background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: var(--space-4); }
.system-step-head { display: flex; align-items: center; gap: var(--space-3); }
.step-icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: var(--accent-soft); display: inline-flex; align-items: center; justify-content: center; color: var(--accent); }
.step-icon svg { width: 22px; height: 22px; }
.step-num { font-family: var(--font-body); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.system-step h3 { font-size: 1.05rem; margin-top: var(--space-3); }
.system-step p { color: var(--text-muted); font-size: 0.9rem; margin-top: var(--space-2); font-family: var(--font-body); }

/* ---------- Services ---------- */
.services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
@media (min-width: 640px) { .services-grid { grid-template-columns: repeat(4, 1fr); } }
.service-card { background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: var(--space-4); transition: box-shadow var(--duration) var(--ease); }
.service-card:hover { box-shadow: 0 8px 24px -12px rgba(2,3,3,0.25); }
.service-card h3 { font-size: 1.02rem; }
.service-card p { font-size: 0.88rem; color: var(--text-muted); margin-top: 0.4rem; font-family: var(--font-body); }
.service-card .umbrella-icon { margin-bottom: var(--space-3); }
/* 5-up modifier: the five core values in the default 4-column grid left one
   card stranded alone on its own row. */
.services-grid.grid-5 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .services-grid.grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .services-grid.grid-5 { grid-template-columns: repeat(5, 1fr); } }
/* 6-up modifier: six cards in the default 4-column grid left two stranded on a
   half-empty second row. Three columns splits them evenly. */
@media (min-width: 640px) { .services-grid.grid-6 { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Industries ---------- */
/* Even grid rather than a wrapping flex row: chip labels vary a lot in length
   ("Warehouse" vs "Food & Beverage Processing"), which left a ragged edge and
   an unbalanced short second row. */
.industries-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-3); align-items: stretch; }
.industry-chip { display: flex; align-items: flex-start; gap: 0.75rem; background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3); text-decoration: none; color: inherit; }
/* Fixed square box + contain keeps the hand-drawn 24x24 icons and the taller
   Illustrator exports at the same optical weight. */
.industry-chip img { width: 26px; height: 26px; flex-shrink: 0; object-fit: contain; filter: brightness(0) saturate(100%) invert(41%) sepia(60%) saturate(468%) hue-rotate(60deg) brightness(93%) contrast(89%); }
.industry-chip span { font-weight: 600; font-size: 0.9rem; display: block; }
.industry-chip small { display: block; margin-top: 0.3rem; font-size: 0.82rem; line-height: 1.45; color: var(--text-muted); font-family: var(--font-body); }
a.industry-chip { transition: box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease); }
a.industry-chip:hover, a.industry-chip:focus-visible { box-shadow: 0 8px 24px -12px rgba(2,3,3,0.25); border-color: var(--accent); }

/* ---------- About / values / team ---------- */
.about-section { background: var(--bg-alt); }
.about-copy p { color: var(--text-muted); font-size: 1.05rem; max-width: 60ch; margin-top: var(--space-3); }
.about-copy .guarantee { color: var(--text-body); font-weight: 700; margin-top: var(--space-3); font-family: var(--font-body); }
.value-inline { color: var(--accent); font-weight: 700; }

.story-photos { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
@media (min-width: 700px) { .story-photos { grid-template-columns: repeat(3, 1fr); } }
.story-photos figure { margin: 0; }
.story-photos .hero-media { aspect-ratio: 1/1; }
.story-photos figcaption { margin-top: var(--space-2); font-size: 0.85rem; color: var(--text-muted); font-family: var(--font-body); }
/* Two-photo row for images with OPPOSITE orientations (one portrait, one
   landscape). Column widths are proportional to each image's own aspect ratio,
   so both render at exactly the same height with nothing cropped. Forcing a
   shared frame instead would cut ~22% off the portrait or ~25% off the
   landscape. Each figure sets its own aspect-ratio inline, overriding the 1/1
   above. Update the fractions if the photos are ever swapped. */
@media (min-width: 700px) { .story-photos.pair-2 { grid-template-columns: 0.7788fr 1.3333fr; } }

.team-intro-photo { margin-bottom: var(--space-5); }
.team-intro-photo .hero-media { aspect-ratio: 16/9; max-width: 720px; }
.team-intro-photo figcaption { margin-top: var(--space-2); font-size: 0.85rem; color: var(--text-muted); font-family: var(--font-body); }

.team-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
@media (max-width: 640px) { .team-cards { grid-template-columns: 1fr; } }
.team-card { background: var(--bg-panel); border: 1px dashed var(--border-soft); border-radius: var(--radius-md); padding: var(--space-4); text-align: center; }
.team-avatar { width: 56px; height: 56px; margin-inline: auto; border-radius: 50%; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; color: var(--accent); }
.team-avatar svg { width: 28px; height: 28px; }
.team-card h4 { font-family: var(--font-body); font-weight: 700; font-size: 0.95rem; margin-top: var(--space-3); }
.team-card p { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.25rem; font-family: var(--font-body); }

/* ---------- Role cards (careers page: clickable career paths) ---------- */
.role-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
@media (min-width: 720px) { .role-cards { grid-template-columns: repeat(4, 1fr); } }
a.role-card { display: block; background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: var(--space-4); text-align: center; text-decoration: none; color: inherit; transition: box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease); }
a.role-card:hover, a.role-card:focus-visible { box-shadow: 0 8px 24px -12px rgba(2,3,3,0.25); border-color: var(--accent); }
.role-avatar { width: 64px; height: 64px; margin-inline: auto; border-radius: 50%; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; color: var(--accent); }
.role-avatar svg { width: 32px; height: 32px; }
.role-card h4 { font-family: var(--font-body); font-weight: 700; font-size: 0.95rem; margin-top: var(--space-3); }
.role-card p { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.25rem; font-family: var(--font-body); }
.role-card .role-cta { display: inline-block; margin-top: var(--space-3); font-size: 0.8rem; font-weight: 700; color: var(--accent); }

/* ---------- Comparison table ---------- */
.compare-wrap { overflow-x: auto; margin-top: var(--space-5); }
.compare-table { width: 100%; min-width: 620px; border-collapse: collapse; font-family: var(--font-body); background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: var(--radius-md); overflow: hidden; }
.compare-table th, .compare-table td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-soft); vertical-align: top; font-size: 0.92rem; line-height: 1.5; }
.compare-table thead th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--text-muted); }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table .col-label { width: 24%; font-weight: 700; color: var(--text-body); }
.compare-table .col-them { width: 38%; color: var(--text-muted); }
.compare-table .col-us { width: 38%; background: var(--accent-soft); font-weight: 600; color: var(--text-body); }
.compare-table thead .col-us { color: var(--accent-hover); }
@media (max-width: 700px) { .compare-table th, .compare-table td { padding: var(--space-3); font-size: 0.86rem; } }

/* ---------- Star rating ---------- */
.stars { display: inline-flex; align-items: center; gap: 0.18rem; color: var(--star-gold); }
.stars svg { width: 22px; height: 22px; }
.stars.stars-lg svg { width: 34px; height: 34px; }
.rating-line { display: flex; align-items: center; justify-content: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-5); }
.rating-value { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1; }
.rating-meta { color: var(--text-muted); font-size: 0.9rem; font-family: var(--font-body); }

/* ---------- Testimonial ---------- */
.testimonial-card { background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: var(--space-5); max-width: 700px; margin-inline: auto; text-align: center; }
.testimonial-card blockquote { font-family: var(--font-display); font-size: 1.4rem; line-height: 1.5; margin: 0; }
.testimonial-card cite { display: block; margin-top: var(--space-4); font-style: normal; color: var(--text-muted); font-size: 0.9rem; font-family: var(--font-body); }
.testimonial-card .stars { margin-bottom: var(--space-3); }
/* Multi-review layout for the reviews page. */
.testimonials-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 880px) { .testimonials-grid { grid-template-columns: repeat(3, 1fr); } }
.testimonials-grid .testimonial-card { max-width: none; text-align: left; padding: var(--space-4); }
.testimonials-grid .testimonial-card blockquote { font-size: 1.05rem; }
.testimonials-grid .testimonial-card cite { margin-top: var(--space-3); }

/* ---------- FAQ ---------- */
.faq-list { display: grid; gap: var(--space-2); max-width: 720px; }
.faq-item { background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.faq-item summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .chev { transition: transform var(--duration) var(--ease); flex-shrink: 0; }
.faq-item[open] summary .chev { transform: rotate(180deg); }
.faq-item p { margin-top: var(--space-2); color: var(--text-muted); font-size: 0.95rem; }

/* ---------- CTA / contact ---------- */
/* Was --bg-panel, which resolves to the same white as --bg-page, so the closing
   CTA rendered as no visual band at all. The top rule keeps it readable as its
   own block when the section above it is also on --bg-alt. */
.cta-section { background: var(--bg-alt); border-top: 1px solid var(--border-soft); }
.cta-grid { display: grid; gap: var(--space-7); }
@media (min-width: 960px) { .cta-grid { grid-template-columns: 1.1fr 0.9fr; } }
.cta-copy p { color: var(--text-muted); margin-top: var(--space-3); max-width: 46ch; }
.cta-contact-list { margin-top: var(--space-5); display: grid; gap: var(--space-2); }
.cta-contact-list a { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; font-size: 1.05rem; }
.cta-contact-list svg { width: 20px; height: 20px; color: var(--accent); }

.contact-form { background: var(--bg-alt); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: var(--space-5); }
.contact-form h3 { font-size: 1.3rem; }
/* end, not the default stretch: paired fields whose labels wrap to different
   line counts ("Company or property name" next to "Property type") would
   otherwise sit at different heights and the inputs would not line up. */
.form-row { display: grid; gap: var(--space-3); margin-top: var(--space-3); align-items: end; }
@media (min-width: 480px) { .form-row.two { grid-template-columns: 1fr 1fr; } }
.field label { display: block; font-size: 0.85rem; font-weight: 700; margin-bottom: 0.35rem; }
.field input, .field select, .field textarea { width: 100%; min-height: 46px; padding: 0.7rem 0.85rem; border: 1.5px solid var(--border-soft); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 1rem; background: var(--brand-white); }
.field textarea { min-height: 90px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.form-note { margin-top: var(--space-3); font-size: 0.78rem; color: var(--text-muted); }
.form-success { display: none; margin-top: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--accent-soft); color: var(--accent-hover); border-radius: var(--radius-sm); font-weight: 700; font-size: 0.88rem; }
.form-success.show { display: block; }
/* Shown only when the submission actually failed, so the visitor is never told
   we received a request we did not receive. Same shape as .form-success. */
.form-error { display: none; margin-top: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--error-red-tint); color: var(--error-red); border-radius: var(--radius-sm); font-weight: 700; font-size: 0.88rem; }
.form-error.show { display: block; }
.form-error a { text-decoration: underline; }
/* Spam trap. Off-screen rather than display:none, which bots skip. */
.form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Page hero (subpages) ---------- */
.page-hero { padding-block: var(--space-7) var(--space-6); background: var(--bg-alt); }
.page-hero h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin-top: var(--space-2); }
.page-hero p { color: var(--text-muted); font-size: 1.05rem; max-width: 60ch; margin-top: var(--space-3); }

/* ---------- Umbrella cards (homepage "what we treat") ---------- */
.umbrella-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px) { .umbrella-grid { grid-template-columns: repeat(4, 1fr); } }
.umbrella-card { display: block; background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: var(--space-5); transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease); }
.umbrella-card:hover { box-shadow: 0 16px 32px -18px rgba(2,3,3,0.3); transform: translateY(-2px); }
.umbrella-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; color: var(--accent); }
.umbrella-icon svg { width: 22px; height: 22px; }
.umbrella-card h3 { font-size: 1.1rem; margin-top: var(--space-3); }
.umbrella-card p { color: var(--text-muted); font-size: 0.88rem; margin-top: 0.4rem; }
.umbrella-card .umbrella-link { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: var(--space-3); font-weight: 700; font-size: 0.85rem; color: var(--accent); }

/* ---------- Certifications / stats strip ---------- */
.cert-strip { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.cert-chip { display: inline-flex; align-items: center; gap: 0.45rem; background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: 999px; padding: 0.55rem 1.05rem; font-weight: 600; font-size: 0.85rem; }
.cert-chip svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }

/* ---------- Locations ---------- */
.locations-grid { display: grid; gap: var(--space-3); }
@media (min-width: 720px) { .locations-grid { grid-template-columns: repeat(3, 1fr); } }
.location-card { background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: var(--space-4); }
.location-card h3 { font-size: 1.1rem; }
.location-card address { font-style: normal; color: var(--text-muted); margin-top: 0.5rem; font-size: 0.92rem; line-height: 1.5; }
.location-card .phone-link { display: inline-block; margin-top: var(--space-3); font-weight: 700; }

/* ---------- My Account / portal promo ---------- */
.account-promo { background: var(--bg-alt); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: var(--space-6); display: grid; gap: var(--space-5); }
@media (min-width: 860px) { .account-promo { grid-template-columns: 1.1fr 0.9fr; align-items: center; } }
.account-promo ul { display: grid; gap: 0.6rem; margin-top: var(--space-4); }
.account-promo li { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; font-size: 0.95rem; }
.account-promo li svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }
.account-promo .btn-row { display: flex; gap: var(--space-3); margin-top: var(--space-5); flex-wrap: wrap; }

/* ---------- Placeholder tag (formalized: nav badges, coming-soon pages, portal CTAs) ---------- */
.placeholder-tag { display: inline-block; background: var(--bg-alt); color: var(--text-muted); border: 1px solid var(--border-soft); padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
/* Long-form legal copy (Privacy Policy, Terms of Use). Left-aligned and
   measure-capped for readability, unlike .placeholder-page which is centred. */
/* 62ch matches the measure used for body copy elsewhere on the site. Note ch is
   the width of "0", which is wider than an average lowercase character, so this
   lands around 80 real characters per line: comfortable for long legal text. */
.legal-body { max-width: 62ch; padding-block: var(--space-2) var(--space-6); }
.legal-body .updated { font-size: 0.85rem; color: var(--text-muted); }
.legal-body > p, .legal-body li { color: var(--text-muted); }
.legal-body p { margin-top: var(--space-3); }
.legal-body h2 { font-size: 1.25rem; margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--border-soft); }
.legal-body h2:first-of-type { margin-top: var(--space-5); }
.legal-body h3 { font-size: 1rem; font-family: var(--font-body); margin-top: var(--space-4); }
.legal-body ul { margin-top: var(--space-3); display: grid; gap: 0.5rem; }
.legal-body li { padding-left: 1.1rem; position: relative; }
.legal-body li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.legal-body strong { color: var(--text-body); }
.legal-body a { color: var(--accent-hover); text-decoration: underline; }
.legal-body .legal-note { background: var(--bg-alt); border: 1px solid var(--border-soft); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); margin-top: var(--space-4); }
.legal-body .legal-note p { margin-top: 0; }
.legal-body address { font-style: normal; color: var(--text-muted); margin-top: var(--space-3); line-height: 1.8; }

.placeholder-page { text-align: center; max-width: 560px; margin-inline: auto; padding-block: var(--space-6); }
.placeholder-page .placeholder-tag { margin-bottom: var(--space-3); }
.placeholder-page p { color: var(--text-muted); margin-top: var(--space-3); }

/* ---------- Paycom job board embed ---------- */
.paycom-embed { border: 1px solid var(--border-soft); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-panel); margin-top: var(--space-5); }
.paycom-embed iframe { display: block; width: 100%; height: 70vh; min-height: 480px; max-height: 900px; border: none; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border-soft); padding-block: var(--space-6); background: var(--bg-page); }
.footer-grid { display: grid; gap: var(--space-5); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.footer-brand img { height: 34px; }
.footer-brand p { margin-top: var(--space-3); font-size: 0.9rem; color: var(--text-muted); max-width: 30ch; }
.footer-social { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-soft); color: var(--text-muted); transition: color 150ms ease, border-color 150ms ease; }
.footer-social a:hover { color: var(--accent); border-color: var(--accent); }
.footer-social svg { width: 17px; height: 17px; }
.footer-col h4 { font-family: var(--font-body); font-size: 0.82rem; margin-bottom: var(--space-2); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.footer-col ul { display: grid; gap: 0.5rem; }
.footer-col a { font-size: 0.9rem; }
.footer-col a:hover { color: var(--accent); }
.footer-locations { display: grid; gap: var(--space-3); margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--border-soft); }
@media (min-width: 640px) { .footer-locations { grid-template-columns: repeat(3, 1fr); } }
.footer-location strong { display: block; font-size: 0.85rem; margin-bottom: 0.2rem; }
.footer-location span { display: block; font-size: 0.85rem; color: var(--text-muted); }
.footer-certs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--border-soft); }
.footer-certs .cert-chip { font-size: 0.76rem; padding: 0.4rem 0.8rem; background: var(--bg-page); }
.footer-bottom { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border-soft); display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: space-between; font-size: 0.78rem; color: var(--text-muted); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-top: var(--space-3); font-size: 0.74rem; color: var(--text-muted); }
.footer-legal a { color: var(--text-muted); }
.footer-legal a:hover { color: var(--accent); }

/* ---------- Site map page ---------- */
.sitemap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-5); max-width: 960px; }
.sitemap-grid .footer-col a { color: var(--text-body); font-size: 0.95rem; }
.sitemap-grid .footer-col a:hover { color: var(--accent); }
.sitemap-grid .footer-col ul { display: grid; gap: 0.6rem; }

.mobile-call-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; background: var(--accent); box-shadow: 0 -6px 24px rgba(0,0,0,0.15); }
@media (min-width: 640px) { .mobile-call-bar { display: none; } }
.mobile-call-bar a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 54px; font-weight: 700; font-size: 0.9rem; color: var(--brand-white); }
.mobile-call-bar a:first-child { border-right: 1px solid rgba(255,255,255,0.25); }
.mobile-call-bar svg { width: 18px; height: 18px; }
@media (max-width: 639px) { body { padding-bottom: 56px; } }