:root {
  /* ============================================================
     1. MAIN LOGO COLORS
     ============================================================ */
  --c-green-dark: #0e341d;       /* Deep forest green */
  --c-green-brand: #4a7a28;      /* Official signature green */

  /* ============================================================
     2. BRIGHT & CLEAN BACKGROUNDS (NO DARK GREEN)
     ============================================================ */
  --bg-white: #ffffff;           /* Pure white */
  --bg-light: #fbfbf9;           /* Soft, clean tint for alternating sections */
  --border-neutral: #ecefe9;     /* Very light border */
  --border-subtle: #dbe2d6;      /* Field and button borders */
  --bg-chip: #f3f5f1;            /* Light neutral background */

  /* ============================================================
     3. HERO SHADES
     ============================================================ */
  --c-green-soft: #f4f8f2;       /* Soft hero background */
  --c-green-border: #d4e8cb;     /* Subtle divider */

  /* ============================================================
     4. TEXT & TYPOGRAPHY
     ============================================================ */
  --text-main: #0e341d;          /* Highly readable main text */
  --text-muted: #64748b;         /* Subtitles */
  --text-paragraph: #334155;     /* Paragraphs */
  --text-hero-desc: #0e341d;     /* Hero description */

  /* ============================================================
     5. SPECIFIC ACCENTS
     ============================================================ */
  --c-star-rating: #f59e0b;      /* Review stars */
  --c-facebook: #1877f2;         /* Facebook */

  /* ============================================================
     6. SHADOWS & EFFECTS
     ============================================================ */
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 12px 24px rgba(15, 23, 42, 0.07);
  --shadow-btn: 0 4px 14px rgba(74, 122, 40, 0.25);
  --modal-overlay-bg: rgba(14, 52, 29, 0.65);
  --apple-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

html { scroll-behavior: smooth; overflow-x: hidden; }

body.no-scroll {
  overflow: hidden !important;
  height: 100vh !important;
  touch-action: none !important;
}

body {
  background-color: var(--bg-white);
  color: var(--text-main);
  line-height: 1.6;
  overflow-x: hidden;
  padding-bottom: 70px;
}

@media (min-width: 769px) {
  body { padding-bottom: 0; }
  .fier-grid .fier-card:nth-child(2) { transition-delay: 0.1s; }
  .fier-grid .fier-card:nth-child(3) { transition-delay: 0.2s; }
  .fier-grid .fier-card:nth-child(4) { transition-delay: 0.3s; }
}

.site-wrapper { opacity: 1; }

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ============================================================
   OPTION 3: DIRECT HERO
   ============================================================ */
.hero-entrance { opacity: 1; transform: translateY(0); }

body.mode-hero-spring .hero-entrance {
  opacity: 0;
  transform: translateY(-25px);
  animation: appleSpring 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

body.mode-hero-spring .hero-tag-badge.hero-entrance { animation-delay: 0.05s; }
body.mode-hero-spring .hero-title.hero-entrance { animation-delay: 0.15s; }
body.mode-hero-spring .hero-subtext.hero-entrance { animation-delay: 0.25s; }
body.mode-hero-spring .hero-actions.hero-entrance { animation-delay: 0.35s; }

@keyframes appleSpring {
  0% { opacity: 0; transform: translateY(-25px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.navbar {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-neutral);
  z-index: 100;
  padding: 12px 0;
}

.nav-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  margin-right: 35px; /* Safety spacer that pushes the menu links away */
}

.brand-logo {
  height: 46px;                   /* Structural height (keeps the bar slim) */
  width: auto;
  display: block;
  transform: scale(1.55);         
  transform-origin: left center;  /* Locks growth to the left */
}


.desktop-nav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  margin-left: 20px;     
  margin-right: auto;    
}

.desktop-nav a {
  white-space: nowrap;   /* Prevents line wrapping */
  margin: 10px;         
  text-decoration: none;
  color: var(--text-main);
  font-weight: 600;
  font-size: 0.92rem;    /* Balanced text size */
  transition: color 0.2s;
}

.desktop-nav a:hover { color: var(--c-green-brand); }

.btn-nav {
  background: var(--c-green-brand);
  color: var(--bg-white) !important;
  padding: 8px 18px;
  border-radius: 8px;
  transition: background-color 0.2s;
}

.btn-nav:hover { background: var(--c-green-dark); }

.header-actions { display: flex; align-items: center; }

.call-btn-header {
  font-weight: 700;
  color: var(--c-green-dark);
  text-decoration: none;
  padding: 8px 14px;
  background: var(--bg-light);
  border: 1px solid var(--border-neutral);
  border-radius: 8px;
  font-size: 0.92rem;
  white-space: nowrap;
  transition: background-color 0.2s;
}

.call-btn-header:hover { background: var(--bg-chip); }

/* ============================================================
   HERO SECTION & HANDWRITTEN SIGNATURE
   ============================================================ */
.hero {
  background: var(--c-green-soft);
  padding: 85px 0 65px;
  border-bottom: 1px solid var(--c-green-border);
}

.hero-container { max-width: 820px; }

.hero-title {
  font-size: clamp(2.3rem, 5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--c-green-dark);
  margin-bottom: 18px;
  letter-spacing: -0.02em;
}

.hero-title .highlight { color: var(--c-green-brand); }

/* Unified subtext (Services & Location) */
.hero-subtext {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 32px;
}

.hero-services {
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--c-green-dark);
  margin: 0;
}

.hero-services span {
  display: inline-flex;
  width: 4px;
  height: 4px;
  margin: 0 7px;
  border-radius: 50%;
  background: var(--c-green-brand);
  color: transparent;
  font-size: 0;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.hero-location {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--c-green-dark);
}

.hero-location svg {
  color: var(--c-green-brand);
  flex-shrink: 0;
  /* Small optical adjustment: the tip of the location pin icon makes its
     visual center look higher than its geometric center, so pure flexbox
     centering (align-items: center) makes it look too low relative to
     the text. */
  position: relative;
  top: -1px;
}

/* 3 EQUAL BUTTONS */
.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: stretch;
}

.hero-actions .btn {
  flex: 1 1 210px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 54px;
  padding: 12px 18px;
  font-size: 0.98rem;
  font-weight: 700;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

.hero-tag-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-green-brand);
  margin-bottom: 8px;
}

.hero-tag-badge::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1.8px;
  background: var(--c-green-brand);
  border-radius: 2px;
  flex-shrink: 0;
}

.hero-actions .btn:hover { transform: translateY(-2px); }

.btn-primary { 
  background: var(--c-green-brand); 
  color: var(--bg-white); 
  box-shadow: var(--shadow-btn); 
}

.btn-primary:hover { background: var(--c-green-dark); }

.btn-secondary,
.btn-sms { 
  background: var(--bg-white) !important; 
  color: var(--c-green-dark) !important; 
  border-color: var(--border-subtle) !important; 
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover,
.btn-sms:hover { 
  background: var(--bg-white) !important; 
  color: var(--c-green-dark) !important; 
  border-color: var(--border-subtle) !important;
  box-shadow: var(--shadow-md);
}

.scroll-reveal {
  opacity: 0;
  transform: translateY(18px);
  /* Identical durations for opacity and movement: previously, opacity
     finished at 0.2s while the movement kept going until 0.75s, which
     made an already-visible block look like it "jumped up" abruptly.
     Both now finish together. */
  transition: opacity 0.5s var(--apple-ease), transform 0.5s var(--apple-ease);
}

.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.section { padding: 80px 0; }
.section-light { background: var(--bg-light); }
.section-green { background: var(--c-green-dark); color: var(--bg-white); }

.section-header {
  text-align: center;
  max-width: 650px;
  margin: 0 auto 45px;
}

.tag-badge {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-green-brand);
  margin-bottom: 8px;
  display: block;
}

/* ============================================================
   FULL PROTECTION SECTION
   ============================================================ */
.badge-white { 
  color: var(--bg-light) !important; 
  opacity: 0.9; 
  letter-spacing: 0.1em;
}

.apple-title {
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  color: var(--c-green-dark);
}

.title-white { color: var(--bg-light) !important; }
.section-subtitle { color: var(--text-muted); font-size: 1.1rem; }

.text-white-sub { 
  color: var(--bg-light) !important; 
  font-size: 1.1rem; 
  line-height: 1.65;
}

.text-white-sub strong {
  color: var(--bg-light);
  font-weight: 700;
}

.section-green .stat-big {
  color: var(--c-green-brand) !important;
}

.section-green .stat-text {
  color: var(--bg-light) !important;
  font-weight: 500;
}

/* ============================================================
   SPECIALTY GALLERY — APPLE STYLE (all screen sizes)
   Native horizontal scroll with snapping, identical on mobile and
   desktop. On desktop, cards take advantage of the larger screen
   (taller image, bigger text) while keeping the same visual concept
   (see the media query further below).
   ============================================================ */
.specialty-gallery { display: block; }

.specialty-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding: 4px 28px 4px 4px;
  margin: 0 -4px;
  scrollbar-width: none;
}

.specialty-track::-webkit-scrollbar { display: none; }

.specialty-slide {
  flex: 0 0 85%;
  scroll-snap-align: start;
  /* Prevents a fast swipe from skipping over several cards at once: the
     browser is forced to stop at EVERY card in turn while scrolling,
     even with an energetic flick. Native scrolling (and therefore its
     smoothness) stays identical — only the stopping rule changes. */
  scroll-snap-stop: always;
  /* Each card fades and rises into place instead of just popping into
     view once its container becomes visible (see the staggered
     transition-delay below, per card). */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 2s var(--apple-ease), transform 0.5s var(--apple-ease);
}

.specialty-gallery.is-visible .specialty-slide {
  opacity: 1;
  transform: translateY(0);
}

.specialty-gallery.is-visible .specialty-slide:nth-child(1) { transition-delay: 0s; }
.specialty-gallery.is-visible .specialty-slide:nth-child(2) { transition-delay: 0.08s; }
.specialty-gallery.is-visible .specialty-slide:nth-child(3) { transition-delay: 0.16s; }
.specialty-gallery.is-visible .specialty-slide:nth-child(4) { transition-delay: 0.24s; }

.specialty-slide-media {
  position: relative;
  width: 100%;
  height: 400px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--bg-chip);
}

/* Shimmer skeleton while the photo is still downloading, so a slow
   connection looks intentional (like Instagram/LinkedIn's loading
   state) instead of a blank box that suddenly pops with an image.
   Important: this animates only `transform` (GPU-composited, never
   triggers a repaint), NOT `background-position` like the previous
   version did. Animating background-position forces the browser to
   repaint every single frame — with 4 cards doing that at once while
   the page is also busy compositing an active scroll, the main thread
   got overloaded, which made the separate opacity crossfade below
   skip frames and "snap" instead of fading smoothly. That's almost
   certainly why it looked fine when idle but abrupt while scrolling. */
.specialty-slide-media::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 60%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
  transform: translateX(0);
  animation: specialty-shimmer 1.6s ease-in-out infinite;
  will-change: transform;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.specialty-slide-media.is-loaded::before {
  opacity: 0;
  animation: none;
}

@keyframes specialty-shimmer {
  0% { transform: translateX(0); }
  100% { transform: translateX(280%); }
}

.specialty-slide-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  position: relative;
  opacity: 0;
  /* Also GPU-only: opacity alone is compositor-friendly and won't
     compete with scroll compositing the way the old shimmer did. */
  transition: opacity 0.4s ease;
  will-change: opacity;
}

.specialty-slide-media img.is-loaded { opacity: 1; }

.specialty-slide-num {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(14, 52, 29, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--bg-white);
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 20px;
}

.specialty-slide-caption { padding: 16px 4px 0; }

.specialty-slide-caption p {
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-paragraph);
}

.specialty-slide-caption strong {
  color: var(--c-green-dark);
  font-weight: 800;
}

.specialty-gallery-nav {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.gallery-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  background: var(--bg-white);
  color: var(--c-green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s, opacity 0.2s;
}

.gallery-arrow:hover { background: var(--c-green-soft); }
.gallery-arrow:active { background: var(--c-green-soft); }

.gallery-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.gallery-arrow:disabled:hover { background: var(--bg-white); }

/* Desktop: the larger screen allows for a wider, more immersive card,
   with a bit more of the two neighboring cards peeking on the sides —
   the same approach Apple uses on its product pages. */
@media (min-width: 980px) {
  .specialty-track { gap: 24px; padding: 4px 0; margin: 0; }

  .specialty-slide { flex: 0 0 62%; }

  .specialty-slide-media { height: 460px; border-radius: 24px; }

  .specialty-slide-num { top: 20px; left: 20px; font-size: 0.8rem; padding: 5px 12px; }

  .specialty-slide-caption { padding: 22px 6px 0; max-width: 560px; }

  .specialty-slide-caption p { font-size: 1.05rem; line-height: 1.6; }

  .gallery-arrow { width: 44px; height: 44px; }
}

@media (min-width: 1300px) {
  .specialty-slide { flex: 0 0 54%; }
}

/* ============================================================
   INSURANCE & TEAM
   ============================================================ */
.trust-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  min-width: 0;
}

.trust-info { min-width: 0; }

.trust-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  min-width: 0;
}

.trust-stat-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 24px;
  border-radius: 14px;
  text-align: center;
  /* Fixes the bug: without min-width:0, a CSS grid never lets a card
     shrink below the intrinsic width of its text (e.g. bold "$2,000,000").
     On very narrow screens, this forced the card past its column, which
     made a horizontal scrollbar appear on the whole page. */
  min-width: 0;
  /* Lets .stat-big below size itself off this card's ACTUAL width (cqi),
     rather than the viewport width (vw). The problem with vw: at certain
     window sizes the grid is nested two levels deep (.trust-grid then
     .trust-cards), so the card can be much narrower than its vw share
     suggested — which is why the text still wrapped at specific widths.
     With cqi, the text follows the card's exact width, no matter how
     deeply it's nested.
  */
  container-type: inline-size;
}

.highlight-card { grid-column: span 2; background: rgba(255, 255, 255, 0.14); position: relative; }

.stat-big {
  font-size: clamp(1.05rem, 15cqi, 2.2rem);
  font-weight: 800;
  display: block;
  overflow-wrap: break-word;
  white-space: nowrap;
}

.stat-text { font-size: 0.9rem; overflow-wrap: break-word; }

.insurance-pdf-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--bg-light);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 5px 10px;
  border-radius: 20px;
  text-decoration: none;
  transition: background-color 0.2s;
}

.insurance-pdf-btn:hover { background: rgba(255, 255, 255, 0.26); }

.team-grid-duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
  /* Same width as the quote request form (.form-wrapper), so that a
     single card (e.g. just Sylvain, until the other team members are
     added) doesn't stretch across the full container width. */
  max-width: 680px;
  margin: 0 auto;
}

.team-card {
  background: var(--bg-white);
  border: 1px solid var(--border-neutral);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--apple-ease), box-shadow 0.3s var(--apple-ease);
}

.team-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.team-photo-box {
  width: 100%;
  height: 340px;
  position: relative;
  background: var(--bg-chip);
  overflow: hidden;
}

.team-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s var(--apple-ease);
}

.team-card:hover .team-img { transform: scale(1.04); }

.team-photo-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--bg-light), var(--border-neutral));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--c-green-dark);
}

.team-info { padding: 24px; }

.team-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-green-brand);
  background: var(--bg-light);
  border: 1px solid var(--border-neutral);
  padding: 4px 10px;
  border-radius: 12px;
  margin-bottom: 10px;
}

.team-info h3 { font-size: 1.3rem; font-weight: 800; color: var(--text-main); margin-bottom: 2px; }
.team-role { font-size: 0.9rem; font-weight: 700; color: var(--c-green-dark); margin-bottom: 12px; }
.team-desc { font-size: 0.92rem; font-weight: 400; color: var(--text-paragraph); line-height: 1.55; }

/* "Up-to-date training" badge with downloadable PDF proof */
.cert-badge {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--c-green-soft);
  border: 1px solid var(--c-green-border);
}

.cert-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--c-green-brand);
  color: var(--bg-white);
  flex-shrink: 0;
}

.cert-text {
  flex: 1;
  min-width: 160px;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-paragraph);
  line-height: 1.4;
}

.cert-text strong {
  color: var(--c-green-dark);
  font-weight: 700;
}

/* Same style as the PDF badge in the Full Protection section
   (.insurance-pdf-btn), just recolored for a light background. */
.cert-pdf-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--c-green-dark);
  background: var(--bg-white);
  border: 1px solid var(--c-green-border);
  padding: 5px 10px;
  border-radius: 20px;
  text-decoration: none;
  transition: background-color 0.2s;
  flex-shrink: 0;
}

.cert-pdf-btn:hover { background: var(--c-green-soft); }



/* ============================================================
   OUR VALUES SECTION (FIER) - LIGHT, MODERN DESIGN
   ============================================================ */
.fier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 30px;
  margin-bottom: 50px;
}

.fier-card {
  padding: 15px 10px;
  text-align: center;
  transition: transform 0.3s var(--apple-ease);
}

.fier-card:hover {
  transform: translateY(-5px);
}

.fier-letter-circle {
  width: 68px;
  height: 68px;
  margin: 0 auto 20px;
  background: var(--c-green-soft);
  color: var(--c-green-brand);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 800;
  border: 2px solid var(--bg-white);
  box-shadow: var(--shadow-sm);
  transition: background-color 0.3s, color 0.3s;
}

.fier-card:hover .fier-letter-circle {
  background: var(--c-green-brand);
  color: var(--bg-white);
}

.fier-card h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--c-green-dark);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.fier-card p {
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--text-paragraph);
  line-height: 1.55;
}

@media (max-width: 980px) {
  .fier-grid { grid-template-columns: 1fr; gap: 4px; }

  /* Compact version: the letter medallion on the left, the title+text
     block on the right (grouped in .fier-text so they stack properly in
     a column), letters stacked one under the other instead of full-width
     centered cards — much shorter on mobile. */
  .fier-card {
    display: flex;
    align-items: center;
    text-align: left;
    gap: 14px;
    padding: 12px 6px;
    transition: transform 0.3s var(--apple-ease);
  }

  .fier-card:hover { transform: none; }

  .fier-letter-circle {
    width: 46px;
    height: 46px;
    margin: 0;
    flex-shrink: 0;
    font-size: 1.15rem;
  }

  .fier-text {
    flex: 1;
    min-width: 0;
  }

  .fier-card h3 {
    font-size: 0.98rem;
    margin-bottom: 2px;
    text-transform: none;
    letter-spacing: 0;
  }

  .fier-card p { font-size: 0.92rem; color: var(--text-paragraph); line-height: 1.55; }

}

/* ============================================================
   REVIEWS CAROUSEL
   ============================================================ */
.carousel-box {
  max-width: 780px;
  margin: 0 auto;
  touch-action: pan-y;
}

.carousel-track {
  display: flex;
  gap: 16px;
  /* Same technique as the specialty gallery: native browser scroll with
     snapping, instead of a JS-driven translateX(). The finger tracks the
     movement in real time with native inertia, rather than waiting for
     release to jump to the next card — that's what gives the smoother
     feel. */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* Setting overflow-x on a scroll container implicitly clips the other
     axis too, which was cutting off the top/bottom of each card's
     box-shadow (and sometimes its border) right at the container edge.
     This padding gives the shadow room to render fully; the negative
     margin cancels it out so the cards still line up exactly where
     they did before. */
  padding: 10px 4px;
  margin: -10px -4px;
}

.carousel-track::-webkit-scrollbar { display: none; }

.carousel-slide {
  /* Card slightly narrower than the box: this avoids the "card glued
     edge-to-edge, too large" effect and lets the next card peek on
     the side. */
  flex: 0 0 92%;
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  user-select: none;
}

.review-item {
  background: var(--bg-white);
  border: 1px solid var(--border-neutral);
  border-radius: 18px;
  padding: 28px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  align-items: center;
  box-shadow: var(--shadow-sm);
}

.review-img-box {
  height: 150px;
  border-radius: 12px;
  background: var(--bg-chip);
  border: 1px dashed var(--border-subtle);
  overflow: hidden;
  position: relative;
}

.review-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 12px;
  display: block;
}

.review-placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 12px;
}

/* Variant for reviews with no photo available: same card style
   (border, padding, shadow, radius), just without the image column. */
.review-item--no-image {
  grid-template-columns: 1fr;
}

.stars { color: var(--c-star-rating); margin-bottom: 8px; }
.review-details p { font-size: 0.92rem; color: var(--text-paragraph); margin-bottom: 12px; font-style: italic; }
.author-tag { font-size: 0.92rem; color: var(--c-green-dark); }

.carousel-nav { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 24px; }
.nav-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--bg-white);
  border: 1px solid var(--border-neutral);
  color: var(--c-green-dark);
  border-radius: 50%;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s, transform 0.2s;
}

.nav-arrow svg {
  display: block;
}

.nav-arrow:hover {
  background: var(--bg-light);
  transform: scale(1.05);
}

.nav-dots { display: flex; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-subtle); cursor: pointer; transition: 0.3s; }
.dot.active { background: var(--c-green-brand); transform: scale(1.3); }

/* ============================================================
   FORM: FIXED CARDS, NO SHIFT / NO JUMP
   ============================================================ */
.form-wrapper { max-width: 680px; }
.light-form { 
  background: var(--bg-white); 
  border: 1px solid var(--border-neutral); 
  padding: 36px; 
  border-radius: 20px; 
  box-shadow: var(--shadow-sm); 
}

.form-row { display: flex; gap: 14px; }
.form-field { margin-bottom: 20px; }

.form-field label, .section-input-label {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-main);
}

.label-hint {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
}

.form-field input[type="text"],
.form-field input[type="tel"],
.form-field textarea {
  width: 100%;
  padding: 13px 16px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-white);
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s;

  resize: vertical;
  min-height: 30px; 
}

.form-field input:focus, .form-field textarea:focus { border-color: var(--c-green-brand); }

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Service card with a stable height, no page jump */
.custom-checkbox-card {
  display: block;
  background: var(--bg-light);
  border: 1px solid var(--border-neutral);
  border-radius: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  user-select: none;
}

.custom-checkbox-card:hover {
  border-color: var(--c-green-brand);
  background: var(--bg-white);
  box-shadow: var(--shadow-sm);
}

.custom-checkbox-card.is-checked {
  border-color: var(--c-green-brand);
  background: var(--bg-white);
  box-shadow: var(--shadow-sm);
}

.card-header-line {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.custom-checkbox-card input[type="checkbox"] {
  display: none;
}

.checkbox-custom {
  width: 22px;
  height: 22px;
  border: 2px solid var(--border-subtle);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  background: var(--bg-white);
  flex-shrink: 0;
  margin-top: 2px;
}

.custom-checkbox-card.is-checked .checkbox-custom {
  background: var(--c-green-brand);
  border-color: var(--c-green-brand);
}

.custom-checkbox-card.is-checked .checkbox-custom::after {
  content: "✓";
  color: var(--bg-white);
  font-size: 0.85rem;
  font-weight: 800;
}

.card-text-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Important fix: without min-width: 0, a flex child with text doesn't
     always recompute its wrapping correctly on first render on mobile —
     the description can then seem "missing" until a click forces a
     re-render. */
  min-width: 0;
  flex: 1;
}

.checkbox-label-text {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.3;
  display: block;
}

/* Stable, subtle inline description (zero jump on click or hover) */
.service-inline-desc {
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--text-paragraph);
  line-height: 1.55;
  display: block;
}

.btn-submit-form {
  width: 100% !important;
  display: block !important;
  padding: 16px 28px !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  background: var(--c-green-brand) !important;
  color: var(--bg-white) !important;
  box-shadow: 0 4px 14px rgba(74, 122, 40, 0.3) !important;
  border: none !important;
  cursor: pointer !important;
  text-align: center !important;
  margin-top: 10px !important;
  transition: transform 0.25s, background-color 0.25s, box-shadow 0.25s !important;
}

.btn-submit-form:hover {
  background: var(--c-green-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(14, 52, 29, 0.35) !important;
}

.btn-submit-form:disabled {
  opacity: 0.7 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

.form-status-msg {
  margin-top: 12px;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: center;
  display: none;
}

.form-status-msg.is-error {
  display: block;
  color: #b42318;
}

/* Side-by-side layout for the 3 checkboxes */
.contact-options-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* Centered alignment of inner elements */
.contact-options-grid .custom-checkbox-card {
  padding: 12px 10px;
}

.contact-options-grid .card-header-line {
  align-items: center;
  gap: 8px;
}
/* Keeps the 3 items side-by-side on mobile */
@media (max-width: 480px) {
  .contact-options-grid {
    gap: 6px;
  }

  .contact-options-grid .custom-checkbox-card {
    padding: 10px 4px;
  }

  .contact-options-grid .card-header-line {
    gap: 6px;
  }

  .contact-options-grid .checkbox-label-text {
    font-size: 0.8rem;
    white-space: nowrap;
  }

  .contact-options-grid .checkbox-custom {
    width: 18px;
    height: 18px;
  }

  .contact-options-grid .custom-checkbox-card.is-checked .checkbox-custom::after {
    font-size: 0.75rem;
  }
}

/* ============================================================
   FOOTER & FACEBOOK LINK
   ============================================================ */
footer {
  background: var(--c-green-dark);
  padding: 22px 0 16px;
  font-size: 0.85rem;
  color: var(--bg-light);
}

.footer-box { max-width: 900px; }

.footer-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

/* Invisible spacer to keep the logo perfectly centered */
.footer-top-spacer { display: block; }

.footer-logo {
  height: 30px;
  filter: brightness(0) invert(1);
  opacity: 0.92;
  justify-self: center;
  transform: scale(1.55); 
}



/* Facebook icon alone on the right */
.facebook-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.08);
  color: var(--bg-light) !important;
  border-radius: 50%;
  transition: background-color 0.2s, transform 0.2s;
  justify-self: end;
}

.facebook-link:hover {
  background: var(--c-facebook, #1877f2);
  transform: translateY(-2px);
}

.fb-icon { display: block; }

.footer-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 14px 0 12px;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 16px;
  font-size: 0.78rem;
  line-height: 1.5;
}

.footer-contact {
  color: var(--bg-light);
    font-size: 0.78rem;
  line-height: 1.5;
   flex-basis: 100%;      /* Forces the row to take up 100% of the width */
  text-align: center;    /* Centers the text and links */
  margin-top: 6px;
}

.footer-bottom p { margin: 0; }
.dot-sep { opacity: 0.5; margin: 0 2px; }

footer a { color: inherit; text-decoration: none; font-weight: 600; }
footer a:hover { text-decoration: underline; }
.mobile-sticky-bar { display: none; }

/* Mobile layout: logo on the left, Facebook icon on the right (not stacked) */
@media (max-width: 768px) {

  .footer-top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
  }

  /* 1. Invisible spacer to balance the grid and keep the logo centered */
  .footer-top-spacer {
    display: block;
    justify-self: start;
  }

  /* 2. Logo locked to the exact center */
  .footer-logo {
    height: 30px;
    filter: brightness(0) invert(1);
    opacity: 0.92;
    justify-self: center;
    transform: scale(1.55); 
  }

  /* 3. Facebook icon pushed to the right */
  .facebook-link {
    justify-self: end;
  }

  .footer-bottom {
    justify-content: center;
    text-align: center;
    color: var(--bg-light);
  }

  .footer-bottom p { color: var(--bg-light); }
  .dot-sep { color: var(--bg-light); }

}

/* ============================================================
   DESKTOP CONTACT MODAL / POPUP
   ============================================================ */
.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  will-change: opacity;
}

.contact-modal.is-open {
  opacity: 1;
  pointer-events: all;
}

.modal-overlay {
  position: absolute;
  inset: 0;
  background: var(--modal-overlay-bg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  /* The browser needs to prepare a dedicated compositing layer for the
     blur; without these hints, it often only does so right when the
     modal opens, which is why the blur used to "arrive" late. will-change
     and the transform force the layer to be ready ahead of time. */
  will-change: backdrop-filter, opacity;
  transform: translateZ(0);
}

.modal-card {
  position: relative;
  background: var(--bg-white);
  border-radius: 20px;
  padding: 34px 30px;
  max-width: 420px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
  transform: scale(0.92);
  transition: transform 0.3s var(--apple-ease);
  z-index: 100001;
}

.contact-modal.is-open .modal-card {
  transform: scale(1);
}

.modal-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--bg-chip);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.modal-close-btn:hover {
  background: var(--border-neutral);
  color: var(--text-main);
}

.modal-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-green-brand);
  background: var(--bg-light);
  border: 1px solid var(--border-neutral);
  padding: 4px 10px;
  border-radius: 12px;
  margin-bottom: 10px;
}

.modal-badge-success {
  color: var(--c-green-brand);
  background: var(--c-green-soft);
  border-color: var(--c-green-border);
}

.modal-badge-error {
  color: #b42318;
  background: #fef3f2;
  border-color: #fecdca;
}

.modal-card h3 {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 8px;
}

.modal-desc {
  font-size: 0.92rem;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.modal-phone-box {
  background: var(--bg-light);
  border: 1px solid var(--border-neutral);
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 14px;
}

.phone-number-display {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--c-green-dark) !important;
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}

.copy-number-btn {
  background: var(--c-green-brand);
  color: var(--bg-white);
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.copy-number-btn:hover { background: var(--c-green-dark); }
.modal-footnote { font-size: 0.8rem; color: var(--text-muted); }

/* ============================================================
   MOBILE RESPONSIVE (< 980px)
   ============================================================ */
@media (max-width: 980px) {
  .desktop-nav { display: none; }
  .brand-logo { height: 46px; }

  .footer-bottom { justify-content: center; text-align: center; }

  .header-actions { display: flex; }
  .call-btn-header {
    padding: 6px 12px;
    font-size: 0.85rem;
  }

  /* Hero buttons */
  .hero-actions .btn-primary { flex-basis: 100%; }
  .hero-actions .btn-secondary,
  .hero-actions .btn-sms { flex: 1 1 0; min-width: 0; }

  /* Other sections */
  .team-grid-duo { grid-template-columns: 1fr; }
  .team-photo-box { height: 350px; }

  .trust-grid { grid-template-columns: 1fr; }
  .trust-stat-card { padding: 16px 12px; }
  .review-item { grid-template-columns: 1fr; padding: 20px; }
  
  .service-inline-desc {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
    transition: max-height 0.5s ease, opacity 0.5s ease, margin-top 0.5s ease;
  }

  .fier-card.scroll-reveal {
    transition-delay: 0s !important;
  }

  /* 2. It opens below the title as soon as the client selects the service */
  .custom-checkbox-card.is-checked .service-inline-desc {
    max-height: 120px;
    opacity: 1;
    margin-top: 6px;
  }
  
  .review-img-box {
    height: 190px !important;
    width: 100%;
  }

  .review-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  .form-row { flex-direction: column; gap: 0; }
  .form-wrapper { padding: 0; }
  .light-form { padding: 22px 18px; }

  /* ============================================================
     MOBILE BOTTOM BAR 50/50
     ============================================================ */
  .mobile-sticky-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--border-neutral);
    padding: 10px 14px;
    gap: 10px;
    z-index: 1000;
    opacity: 0;
    transform: translateY(100%);
    pointer-events: none;
    transition: transform 0.35s var(--apple-ease), opacity 0.3s ease;
  }

  .mobile-sticky-bar.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
  }

  .sticky-btn {
    flex: 1 1 0 !important;
    width: 50%;
    padding: 13px 6px;
    border-radius: 8px;
    text-align: center;
    font-weight: 700;
    font-size: 0.86rem;
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: transform 0.15s ease, background-color 0.2s ease;
  }

  .phone-btn {
    background: var(--bg-white) !important;
    color: var(--c-green-dark) !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: var(--shadow-sm);
  }

  .phone-btn:active {
    background: #f1f5f9 !important;
  }

  .quote-btn {
    background: var(--c-green-brand) !important;
    color: var(--bg-white) !important;
    border: 1px solid transparent !important;
    box-shadow: var(--shadow-btn);
  }

  .quote-btn:active {
    background: var(--c-green-dark) !important;
  }
}