/* ==========================================================================
   Brier Fork Construction — Stylesheet

   BRAND PALETTE (sampled from the official brand sheet):
     Forest Green  #303D34  — main site background
     Charcoal      #373734  — deep footer / contrast
     Copper        #9C744E  — accent: dividers, labels, buttons
     Sandstone     #C3AF9D  — muted accent / borders
     Cream         #E4D5C7  — text on dark, and the top bar background

   The logo files carry a cream background baked into the artwork, so the
   top bar uses that same cream family — this is why the header no longer
   shows a pale box around the logo.
   ========================================================================== */

:root {
  --forest: #303D34;
  --forest-deep: #26302A;
  --forest-panel: #3A4940;
  --charcoal: #373734;
  /* Three copper tones, each with a job. The brand copper is a mid-tone,
     which is the hardest case for legibility — nothing reads well ON it,
     so it's used for decoration only (dividers, borders, rules).
       --copper       decorative surfaces only, never behind text
       --copper-deep  buttons/bars that carry light text on top
       --copper-light small uppercase labels and links on dark green
     The light/deep split is what keeps text at WCAG AA (4.5:1). */
  --copper: #9C744E;
  --copper-deep: #7E5C3D;
  --copper-light: #D6AC80;
  --sandstone: #C3AF9D;
  --cream: #E4D5C7;
  --cream-bright: #F1E7DC;
  --cream-dim: rgba(228, 213, 199, 0.80);
  --white: #FFFFFF;

  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Lora', Georgia, serif;
  --font-label: 'Jost', 'Segoe UI', Arial, sans-serif;

  --max-width: 1140px;
}

/* ---- Reset / base ---- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--forest);
  color: var(--cream-dim);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.25rem;
}

section {
  padding: 3.5rem 0;
}

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

h2 {
  font-size: 1.9rem;
  margin-bottom: 0.5rem;
}

h3 {
  font-size: 1.3rem;
}

p {
  margin-bottom: 1rem;
}

/* Playfair Display's default "&" reads too close to a certain big local
   competitor's script logo — swap it for the clean sans-serif label font
   everywhere an ampersand shows up in headings/body copy. */
.amp {
  font-family: var(--font-label);
  font-style: normal;
  font-weight: 500;
}

/* ---- Small-caps label style (section eyebrows) ---- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper-light);
  font-weight: 600;
  margin-bottom: 0.6rem;
}

.section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 2.25rem;
}

.divider {
  width: 60px;
  height: 3px;
  background-color: var(--copper);
  margin: 0.9rem auto 0;
  border: none;
}

.section-head .divider {
  margin: 0.9rem auto 0;
}

.section-head h1 {
  font-size: 1.9rem;
  margin-bottom: 0.5rem;
}

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.9rem 1.9rem;
  border-radius: 3px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* copper-deep, not copper: light text on the mid-tone brand copper is
   unreadable (3.4:1). This is the main call to action — it has to be legible. */
.btn-primary {
  background-color: var(--copper-deep);
  color: var(--cream-bright);
  border-color: var(--copper-deep);
}

.btn-primary:hover {
  background-color: var(--cream);
  border-color: var(--cream);
  color: var(--forest);
}

.btn-outline {
  background-color: transparent;
  color: var(--cream);
  border-color: var(--cream);
}

.btn-outline:hover {
  background-color: var(--cream);
  border-color: var(--cream);
  color: var(--forest);
}

.btn-block {
  display: block;
  width: 100%;
  text-align: center;
}

/* ==========================================================================
   Header / Nav
   --------------------------------------------------------------------------
   The top bar is deliberately CREAM, not forest green: the logo artwork is
   dark green ink on a cream field, so a cream bar lets the (now transparent)
   logo sit flush with no visible box or halo around it.
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--cream);
  border-bottom: 3px solid var(--copper);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 1.25rem;
  max-width: var(--max-width);
  margin: 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

/* Horizontal wordmark reads far better in a bar than the tall badge does */
.brand-logo {
  height: 42px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

@media (min-width: 860px) {
  .brand-logo {
    height: 54px;
  }
}

/* Tap-to-call number, always visible on mobile — forest green on the cream
   bar so it reads as the primary action up top */
.header-call {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--cream-bright);
  background-color: var(--forest);
  padding: 0.55rem 0.85rem;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}

.header-call:hover {
  background-color: var(--copper-deep);
}

.header-call svg {
  width: 16px;
  height: 16px;
  fill: var(--cream-bright);
  flex-shrink: 0;
}

/* Desktop nav links — dark text on the cream bar */
.main-nav {
  display: none;
}

.main-nav ul {
  display: flex;
  gap: 1.6rem;
}

.main-nav a {
  font-family: var(--font-label);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--forest);
  transition: color 0.2s ease;
}

.main-nav a:hover {
  color: var(--copper);
}

@media (min-width: 860px) {
  .main-nav {
    display: block;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  background: linear-gradient(180deg, var(--forest) 0%, var(--forest-deep) 100%);
  padding: 3.5rem 0 3rem;
  text-align: center;
  border-bottom: 1px solid rgba(228, 213, 199, 0.08);
}

.hero .eyebrow {
  display: block;
}

.hero h1 {
  font-size: 2.1rem;
  max-width: 760px;
  margin: 0 auto 1rem;
}

/* Slightly wider measure than a single-paragraph hero would need, so the
   longer intro copy doesn't turn into a narrow column of text. */
.hero p.lead {
  max-width: 640px;
  margin: 0 auto 1rem;
  font-size: 1.05rem;
  color: var(--cream-dim);
}

/* Bigger gap only after the final paragraph, before the buttons */
.hero p.lead:last-of-type {
  margin-bottom: 1.75rem;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  align-items: center;
}

@media (min-width: 560px) {
  .hero-actions {
    flex-direction: row;
    justify-content: center;
  }

  .hero h1 {
    font-size: 2.6rem;
  }
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: center;
  margin-top: 2rem;
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream-dim);
}

.hero-badges li {
  position: relative;
  padding-left: 1.1rem;
}

.hero-badges li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 6px;
  height: 6px;
  background-color: var(--copper-light);
  border-radius: 50%;
}

/* ==========================================================================
   Services
   ========================================================================== */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

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

/* Each card is a link to its matching gallery category. The photo and the
   text sit in separate areas rather than text-over-photo — that way the
   photo is fully visible AND the copy stays perfectly readable. Overlaying
   text on these photos meant darkening them until they weren't worth showing.

   To change a card's photo, edit the <img src> for that card in index.html. */
.service-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(228, 213, 199, 0.1);
  border-top: 4px solid var(--copper);
  border-radius: 4px;
  background-color: var(--forest-panel);
  color: var(--cream-dim);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.service-photo {
  overflow: hidden;
  background-color: var(--forest-deep);
  flex-shrink: 0;
  height: 190px;
}

.service-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.service-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  padding: 1.6rem 1.5rem;
}

.service-card:hover {
  transform: translateY(-3px);
  border-top-color: var(--copper-light);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

.service-card:hover .service-photo img {
  transform: scale(1.05);
}

/* Keyboard focus needs to be visible since these are links */
.service-card:focus-visible {
  outline: 3px solid var(--copper-light);
  outline-offset: 3px;
}

.service-card h3 {
  color: var(--cream);
  margin-bottom: 0.5rem;
}

/* "Subcontracting & Trade Partners" wraps to two lines while the other
   titles fit on one, which would push its body copy out of line with its
   neighbours. Reserving two lines' worth of height for every title keeps the
   paragraphs starting at the same height across the row.
   2.6em, not 2.4em: the "&" is set in Jost, whose taller line box makes each
   line render a couple of pixels beyond what Playfair's line-height implies. */
.service-card:not(.primary) h3 {
  min-height: 2.6em;
}

.service-icon {
  margin-bottom: 0.6rem;
  color: var(--copper-light);
}

.service-icon svg {
  width: 28px;
  height: 28px;
}

.service-card p {
  margin-bottom: 0;
  font-size: 0.97rem;
}

/* "See our work" affordance — signals the card is clickable */
.service-link {
  margin-top: auto;
  padding-top: 1.1rem;
  font-family: var(--font-label);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--copper-light);
}

.service-link::after {
  content: " →";
  transition: margin-left 0.2s ease;
  display: inline-block;
}

.service-card:hover .service-link::after {
  margin-left: 0.3rem;
}

/* Primary service (Windows & Doors) — the specialty. Spans the full row and
   carries a heavier copper edge so it still leads the section. Its copy is
   centered, which suits the wider column it sits in. */
.service-card.primary {
  border-top-width: 5px;
}

.service-card.primary .service-body {
  align-items: center;
  text-align: center;
}

@media (min-width: 720px) {
  /* The primary card spans the full row, with its photo as a wide landscape
     band across the top and the copy centered beneath it. */
  .service-card.primary {
    grid-column: span 3;
  }

  .service-card.primary .service-photo {
    height: 340px;
  }

  .service-card.primary .service-body {
    padding: 2.25rem 2.5rem 2.5rem;
  }

  .service-card.primary p {
    max-width: 640px;
  }

  .services-grid {
    grid-template-rows: auto auto;
  }
}

/* ==========================================================================
   Service area — now lives in the footer, just above the social icons
   ========================================================================== */
.footer-area {
  margin-bottom: 1.75rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid rgba(228, 213, 199, 0.12);
}

.footer-area-lead {
  font-size: 0.9rem;
  color: var(--cream-dim);
  max-width: 520px;
  margin: 0 auto 1rem;
}

.area-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 0.9rem;
  max-width: 700px;
  margin: 0 auto;
}

.area-list li {
  font-family: var(--font-label);
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  background-color: var(--forest-panel);
  border: 1px solid rgba(228, 213, 199, 0.12);
  color: var(--cream);
  padding: 0.5rem 1rem;
  border-radius: 999px;
}

/* Catch-all chip signaling the broader North Alabama service area beyond
   the specific towns listed */
.area-list-more {
  background-color: transparent;
  border: 1px dashed var(--copper-light);
  color: var(--copper-light);
  font-weight: 600;
}

/* ==========================================================================
   Gallery
   ========================================================================== */
/* Sections alternate forest / forest-deep down the page so each one reads as
   its own band. About sits on the darker tone, so the gallery takes the
   lighter one. */
#gallery {
  background-color: var(--forest);
}

/* Category heading above each gallery grid. The copper rule running off to
   the right keeps the groups visually separated as you scroll. */
.gallery-group {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.15rem;
  color: var(--cream);
  margin: 2.5rem 0 1rem;
  /* Stops the sticky header from covering the heading when a service card
     links down to it */
  scroll-margin-top: 100px;
}

.gallery-group:first-of-type {
  margin-top: 0;
}

/* The label is wrapped in its own span so the flex gap sits between the text
   and the rule line — without it, the "&" span becomes a separate flex item
   and gets gap spacing on both sides. */
.gallery-group-label {
  flex: 0 0 auto;
}

.gallery-group::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--copper);
  opacity: 0.55;
}

/* --------------------------------------------------------------------------
   Photo carousel — one per category. Slides sit side by side in a flex track
   and the track slides left/right via transform. Timing/behaviour lives in
   script.js (auto-advance, pause on hover, dots).
   -------------------------------------------------------------------------- */
.carousel {
  position: relative;
}

.carousel-viewport {
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid rgba(228, 213, 199, 0.12);
  /* Darker "theater" backdrop: whole photos are shown un-cropped, so
     portrait shots get bars on the sides — this makes those look
     intentional rather than like a rendering gap. */
  background-color: var(--forest-deep);
}

.carousel-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Each slide is exactly one viewport wide, so the track shifts by 100% a time.
   Height is capped to a bit under one screen (70vh) so a whole carousel —
   heading, photo, and dots — fits in view without scrolling. */
.carousel-slide {
  flex: 0 0 100%;
  min-width: 100%;
  height: min(70vh, 720px);
}

/* object-fit: contain shows the ENTIRE photo, never cropped. Portrait shots
   get dark side bars, landscape shots get slim top/bottom bars — but the
   full image is always visible. Do not change this to "cover"; cover fills
   the frame by cropping the photo. */
.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* On short landscape screens (phones held sideways), give the photo a bit
   more of the viewport since the browser chrome already eats into it */
@media (max-height: 500px) {
  .carousel-slide {
    height: 78vh;
  }
}

/* Prev/next arrows */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background-color: rgba(38, 48, 42, 0.72);
  color: var(--cream);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.carousel-btn:hover {
  background-color: var(--copper-deep);
}

.carousel-btn:focus-visible {
  outline: 3px solid var(--copper-light);
  outline-offset: 2px;
}

.carousel-btn svg {
  width: 22px;
  height: 22px;
}

.carousel-prev { left: 10px; }
.carousel-next { right: 10px; }

/* Dots */
.carousel-dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.carousel-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: rgba(228, 213, 199, 0.3);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.carousel-dot:hover {
  background-color: rgba(228, 213, 199, 0.55);
}

.carousel-dot[aria-current="true"] {
  background-color: var(--copper-light);
  transform: scale(1.3);
}

.carousel-dot:focus-visible {
  outline: 2px solid var(--copper-light);
  outline-offset: 3px;
}

/* A single-photo category doesn't need controls */
.carousel.is-single .carousel-btn,
.carousel.is-single .carousel-dots {
  display: none;
}

/* Visitors who ask for reduced motion get instant changes, no sliding */
@media (prefers-reduced-motion: reduce) {
  .carousel-track {
    transition: none;
  }
}

/* ==========================================================================
   About
   ========================================================================== */
/* The About section now sits directly under Services, so it gets the darker
   band to separate it from the services above it. */
.about {
  background-color: var(--forest-deep);
}

.about-content {
  max-width: 720px;
  margin: 0 auto;
}

.about-copy {
  background-color: var(--forest-panel);
  border-left: 4px solid var(--copper);
  padding: 1.5rem 1.75rem;
  border-radius: 0 4px 4px 0;
  color: var(--cream-dim);
}

.about-copy p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact {
  background-color: var(--forest-deep);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  max-width: 980px;
  margin: 0 auto;
}

@media (min-width: 800px) {
  .contact-grid {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.contact-info-item svg {
  width: 22px;
  height: 22px;
  fill: var(--copper-light);
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.contact-info-item a,
.contact-info-item p {
  font-size: 1.02rem;
  color: var(--cream);
}

.contact-info-item .label {
  font-family: var(--font-label);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--copper-light);
  margin-bottom: 0.2rem;
  display: block;
}

/* Contact form — kept as a bright "paper" card so it stands out as the
   focal point against the dark section behind it */
.contact-form {
  background-color: var(--cream);
  border-radius: 6px;
  padding: 1.75rem;
  color: var(--forest);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

.form-row {
  margin-bottom: 1.1rem;
}

.form-row label {
  display: block;
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--forest);
}

.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--sandstone);
  border-radius: 4px;
  background-color: var(--cream-bright);
  color: var(--forest);
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--copper);
}

.form-row textarea {
  resize: vertical;
  min-height: 110px;
}

.form-note {
  font-size: 0.8rem;
  color: var(--charcoal);
  margin-top: 0.75rem;
  margin-bottom: 0;
}

.form-success {
  display: none;
  background-color: #DDE7DC;
  border-left: 4px solid #4C7A4C;
  padding: 0.9rem 1.1rem;
  border-radius: 0 4px 4px 0;
  margin-bottom: 1.1rem;
  font-size: 0.92rem;
  color: #2C4A2C;
}

.form-success.visible {
  display: block;
}

/* Error state shown if a submission fails, so a lead never silently vanishes */
.form-error {
  display: none;
  background-color: #F6E3E3;
  border-left: 4px solid #A34A4A;
  padding: 0.9rem 1.1rem;
  border-radius: 0 4px 4px 0;
  margin-bottom: 1.1rem;
  font-size: 0.92rem;
  color: #6B2B2B;
}

.form-error.visible {
  display: block;
}

.form-error a {
  color: #6B2B2B;
  text-decoration: underline;
  font-weight: 700;
}

/* Netlify spam honeypot — must stay visually hidden but still present in the
   DOM for bots to find. Do not change to display:none; some bots skip those. */
.hidden-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background-color: var(--charcoal);
  color: var(--cream-dim);
  padding: 2.5rem 0 1.5rem;
  text-align: center;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

/* The badge is dark-green ink and would vanish on the dark footer, so it
   sits on its own cream panel — same reasoning as the header bar. */
.footer-logo-panel {
  background-color: var(--cream);
  border-radius: 6px;
  padding: 1rem 1.4rem;
  display: inline-block;
}

.footer-logo {
  height: 130px;
  width: auto;
  object-fit: contain;
}

.footer-brand span {
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--copper-light);
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(228, 213, 199, 0.28);
  border-radius: 50%;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.social-links a:hover {
  background-color: var(--copper-deep);
  border-color: var(--copper-deep);
}

.social-links svg {
  width: 17px;
  height: 17px;
  fill: var(--cream);
}

.footer-copy {
  font-family: var(--font-label);
  font-size: 0.78rem;
  color: rgba(228, 213, 199, 0.6);
  line-height: 1.7;
}

/* Terms & Conditions / Privacy Policy links — sit between the copyright
   line and the social icons on every page. */
.footer-legal {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  margin-top: 0.9rem;
  font-family: var(--font-label);
  font-size: 0.78rem;
}

.footer-legal a {
  color: var(--copper-light);
  transition: color 0.2s ease;
}

.footer-legal a:hover {
  color: var(--cream-bright);
  text-decoration: underline;
}

/* ==========================================================================
   Sticky mobile call bar
   ========================================================================== */
.mobile-call-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  /* copper-deep so the "Call Now" text stays legible — this bar is the main
     way a homeowner on a phone contacts Rob */
  background-color: var(--copper-deep);
  padding: 0.75rem 1rem;
  display: flex;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.35);
}

.mobile-call-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  font-family: var(--font-label);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.9rem;
  color: var(--cream-bright);
}

.mobile-call-bar svg {
  width: 16px;
  height: 16px;
  fill: var(--cream-bright);
}

@media (min-width: 860px) {
  .mobile-call-bar {
    display: none;
  }
}

/* Add breathing room at bottom of page so sticky bar doesn't cover content on mobile */
@media (max-width: 859px) {
  body {
    padding-bottom: 58px;
  }
}

/* ==========================================================================
   Legal pages (Terms & Conditions, Privacy Policy)
   ========================================================================== */
.legal-page {
  background-color: var(--forest-deep);
}

.legal-content {
  max-width: 760px;
  margin: 0 auto;
  background-color: var(--forest-panel);
  border-left: 4px solid var(--copper);
  padding: 1.75rem 2rem;
  border-radius: 0 4px 4px 0;
  color: var(--cream-dim);
}

.legal-content h2 {
  font-size: 1.3rem;
  margin-top: 1.75rem;
  margin-bottom: 0.6rem;
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content p,
.legal-content li {
  margin-bottom: 0.85rem;
}

.legal-content ul {
  list-style: disc;
  padding-left: 1.4rem;
  margin-bottom: 1rem;
}

.legal-content a {
  color: var(--copper-light);
  text-decoration: underline;
}

.legal-content a:hover {
  color: var(--cream-bright);
}

.legal-updated {
  font-family: var(--font-label);
  font-size: 0.8rem;
  color: var(--copper-light);
  margin-bottom: 1.5rem;
}