/* =========================================================
   SUPER POWER COACH SERVICE — STYLESHEET
   ---------------------------------------------------------
   THEME: All colors and key brand values live in :root as
   CSS variables. To re-theme the site later (e.g. switch to
   a Jamaican flag palette), you only need to edit the values
   in this :root block — nothing else in this file, or in
   index.html, needs to change.
   ========================================================= */

:root {
  /* ---- Brand colors (Option B: neutral / corporate) ---- */
  --color-primary: #16324F;        /* deep navy - header, headings */
  --color-primary-light: #23507D;  /* lighter navy - hover states */
  --color-accent: #2E7CD6;         /* blue - buttons, links, highlights */
  --color-accent-dark: #1F5FA8;    /* accent hover */
  --color-bg: #FFFFFF;             /* page background */
  --color-bg-alt: #EEF3F7;         /* section background (light blue-grey) */
  --color-bg-dark: #16324F;        /* dark section background */
  --color-text: #1F2A37;           /* body text */
  --color-text-muted: #4C6478;     /* secondary text */
  --color-text-on-dark: #FFFFFF;   /* text on dark backgrounds */
  --color-text-on-dark-muted: #D6E2EC;
  --color-border: #D9E2EA;         /* hairline borders */
  --color-white: #FFFFFF;

  /* ---- Typography ---- */
  --font-heading: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  /* ---- Layout ---- */
  --radius: 8px;
  --radius-lg: 16px;
  --container-width: 1160px;
  --shadow-sm: 0 1px 3px rgba(22, 50, 79, 0.08);
  --shadow-md: 0 8px 24px rgba(22, 50, 79, 0.12);
}

/* ---------------------------------------------------------
   RESET / BASE
   --------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

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

ul { list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-primary);
  line-height: 1.25;
  font-weight: 600;
}

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

section { padding: 72px 0; }

.center { text-align: center; margin-left: auto; margin-right: auto; }

.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 8px;
}

.section-title {
  font-size: clamp(26px, 3.2vw, 36px);
  margin-bottom: 12px;
}

.section-sub {
  color: var(--color-text-muted);
  max-width: 560px;
  margin-bottom: 40px;
}

/* ---------------------------------------------------------
   BUTTONS
   --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 15px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--color-accent);
  color: var(--color-white);
}
.btn-primary:hover { background: var(--color-accent-dark); }

.btn-outline {
  background: transparent;
  border-color: var(--color-white);
  color: var(--color-white);
}
.btn-outline:hover { background: rgba(255,255,255,0.12); }

.btn-lg { padding: 14px 28px; font-size: 16px; }

/* ---------------------------------------------------------
   HEADER / NAV
   --------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-white);
}

.logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-accent);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  color: var(--color-white);
}

.logo-text {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.15;
}
.logo-text small { font-weight: 400; font-size: 11px; color: var(--color-text-on-dark-muted); }

/* Nav is a dropdown menu at every screen width: one "Menu" button
   toggles a floating panel of section links, rather than a row of
   links that has to be squeezed and re-wrapped per breakpoint. */
.nav-dropdown {
  position: relative;
}

.nav-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.nav-toggle:hover { background: rgba(255,255,255,0.16); }

.icon-menu, .icon-chevron {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}
.icon-chevron { transition: transform 0.2s ease; }
.nav-toggle[aria-expanded="true"] .icon-chevron { transform: rotate(180deg); }

.main-nav {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 200;
}

.main-nav.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.main-nav a {
  color: var(--color-text);
  font-size: 14.5px;
  font-weight: 500;
  padding: 10px 12px;
  border-radius: var(--radius);
  transition: background 0.15s ease, color 0.15s ease;
}
.main-nav a:hover { background: var(--color-bg-alt); color: var(--color-accent); }

.nav-cta.btn {
  margin-top: 4px;
  padding: 11px 12px;
  font-size: 14px;
  text-align: center;
  justify-content: center;
}

/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */
.hero {
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  color: var(--color-white);
  padding: 88px 0;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.hero-copy .eyebrow { color: #9FC4EE; }

.hero h1 {
  color: var(--color-white);
  font-size: clamp(32px, 4.4vw, 48px);
  margin-bottom: 18px;
}

.hero-sub {
  color: var(--color-text-on-dark-muted);
  font-size: 17px;
  max-width: 480px;
  margin-bottom: 28px;
}

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-img { aspect-ratio: 4 / 3; }

/* ---------------------------------------------------------
   IMAGE PLACEHOLDERS
   --------------------------------------------------------- */
.img-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(255,255,255,0.08);
  border: 2px dashed rgba(255,255,255,0.35);
  border-radius: var(--radius-lg);
  color: var(--color-text-on-dark-muted);
  text-align: center;
  padding: 20px;
  position: relative;
}

/* Placeholders sitting on light backgrounds need dark-friendly styling.
   Gallery/Contact sit on white, so their placeholders use the alt grey;
   Team sits on the alt grey, so its placeholder uses white instead. */
.gallery .img-placeholder,
.contact .img-placeholder {
  background: var(--color-bg-alt);
  border-color: #B9CBD9;
  color: var(--color-text-muted);
}

.team .img-placeholder {
  background: var(--color-white);
  border-color: #B9CBD9;
  color: var(--color-text-muted);
}

.ph-icon { width: 36px; height: 36px; stroke-width: 1.4; opacity: 0.9; }
.ph-text { font-size: 13px; font-weight: 500; }

.img-placeholder::after {
  content: attr(data-label);
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  font-size: 11px;
  opacity: 0.75;
}

/* ---------------------------------------------------------
   SERVICES
   --------------------------------------------------------- */
.services { background: var(--color-bg); }

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 8px;
}

.service-card {
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  padding: 32px 26px;
  text-align: left;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.service-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-accent);
  margin-bottom: 16px;
}
.service-icon svg { width: 26px; height: 26px; }

.service-card h3 { font-size: 19px; margin-bottom: 10px; }
.service-card p { color: var(--color-text-muted); font-size: 14.5px; }

/* ---------------------------------------------------------
   TESTIMONIALS
   --------------------------------------------------------- */
.testimonials { background: var(--color-bg-alt); }

/* Google rating badge — see the placeholder comment above it in index.html */
.google-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  width: fit-content;
  margin: 20px auto 32px;
  padding: 10px 18px;
  background: var(--color-white);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  font-size: 14px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.google-rating:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

.google-rating-score { font-weight: 700; color: var(--color-primary); }
.google-rating-stars { color: #F0B429; letter-spacing: 1px; }
.google-rating-count { color: var(--color-text-muted); }
.google-rating-link {
  color: var(--color-accent);
  font-weight: 600;
  padding-left: 8px;
  border-left: 1px solid var(--color-border);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 8px;
}

.testimonial-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  text-align: left;
  border: 1px dashed #C7D4E0;
}

.testimonial-stars {
  color: #F0B429;
  font-size: 15px;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.testimonial-quote {
  color: var(--color-text);
  font-size: 14.5px;
  font-style: italic;
  margin-bottom: 18px;
  line-height: 1.55;
}

.testimonial-author { display: flex; align-items: center; gap: 12px; }

.testimonial-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
}

.testimonial-author strong { display: block; font-size: 14px; }
.testimonial-author span { font-size: 13px; color: var(--color-text-muted); }

/* ---------------------------------------------------------
   GALLERY
   --------------------------------------------------------- */
.gallery { background: var(--color-bg); }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.gallery-img { aspect-ratio: 4 / 3; border-radius: var(--radius); }

/* ---------------------------------------------------------
   TEAM
   --------------------------------------------------------- */
.team { background: var(--color-bg-alt); }

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 8px;
  text-align: center;
}

.team-card { display: flex; flex-direction: column; align-items: center; }

.team-photo {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  margin-bottom: 14px;
  padding: 0;
}
.team-photo .ph-icon { width: 40px; height: 40px; }
.team-photo .ph-text { display: none; }
.team-photo::after { display: none; }

.team-card strong { display: block; font-size: 16px; margin-bottom: 2px; }
.team-card span { font-size: 13.5px; color: var(--color-text-muted); }

/* ---------------------------------------------------------
   BOOKING FORM
   --------------------------------------------------------- */
.booking { background: var(--color-bg); }

/* A grid (not flex-wrap) so wrapped rows line up as a clean block instead
   of each row centering independently — flex-wrap + justify-content:center
   staggers rows of different widths (the same issue fixed earlier in the
   Contact section). */
.trust-badges {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: center;
  gap: 14px 32px;
  margin: 0 0 40px;
  padding: 20px 24px;
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
}

.trust-badges li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
}

.trust-badges svg { width: 20px; height: 20px; color: var(--color-accent); flex-shrink: 0; }

.process-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 32px 0 40px;
  padding: 0;
  text-align: left;
}

.process-steps li { display: flex; gap: 12px; align-items: flex-start; }

.process-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}

.process-steps strong { display: block; font-size: 14.5px; color: var(--color-primary); margin-bottom: 3px; }
.process-steps p { font-size: 13.5px; color: var(--color-text-muted); }

.booking-form {
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  padding: 40px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.form-group-full { grid-column: 1 / -1; }

.form-group label,
fieldset legend {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 6px;
}

fieldset {
  border: none;
  padding: 0;
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="time"],
select,
textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--color-text);
  background: var(--color-white);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(46, 124, 214, 0.15);
}

textarea { resize: vertical; min-height: 90px; }

.radio-row { display: flex; gap: 10px; flex-wrap: wrap; }

.radio-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-white);
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.radio-pill input { accent-color: var(--color-accent); }

.radio-pill:has(input:checked) {
  border-color: var(--color-accent);
  background: #EAF2FC;
}

.payment-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 26px;
  padding: 14px 16px;
  background: #EAF2FC;
  border: 1px solid #C7DEF5;
  border-radius: var(--radius);
  font-size: 13.5px;
  color: var(--color-text-muted);
}
.payment-note svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--color-accent); }

.form-footer {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

.form-status {
  font-size: 14px;
  font-weight: 500;
  width: 100%;
}
.form-status:empty { display: none; }
.form-status.success,
.form-status.error {
  padding: 14px 16px;
  border-radius: var(--radius);
  line-height: 1.5;
}
.form-status.success { color: #1E7B44; background: #E4F5EA; border: 1px solid #BEE6CC; }
.form-status.error { color: #B3261E; background: #FBE9E7; border: 1px solid #F0BDB6; }

/* ---------------------------------------------------------
   FAQ
   --------------------------------------------------------- */
.faq { background: var(--color-bg-alt); }

.faq-list {
  max-width: 760px;
  margin: 8px auto 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: var(--color-white);
  border-radius: var(--radius);
  padding: 4px 22px;
}

.faq-item summary {
  padding: 16px 0;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15.5px;
  color: var(--color-primary);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  font-size: 22px;
  font-weight: 400;
  color: var(--color-accent);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }

.faq-item p {
  color: var(--color-text-muted);
  font-size: 14.5px;
  padding-bottom: 18px;
  line-height: 1.6;
}

/* ---------------------------------------------------------
   CONTACT
   --------------------------------------------------------- */
.contact { background: var(--color-bg); }

.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.contact-list { margin-top: 28px; display: flex; flex-direction: column; gap: 18px; }

.contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-primary);
  flex-shrink: 0;
}
.contact-icon svg { width: 19px; height: 19px; }

.contact-list strong { display: block; font-size: 13px; color: var(--color-primary); margin-bottom: 2px; }
.contact-list a, .contact-list span { font-size: 14.5px; color: var(--color-text-muted); }
.contact-list a:hover { color: var(--color-accent); }

.social-links { display: flex; gap: 12px; margin-top: 28px; }

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
}
.social-icon svg { width: 17px; height: 17px; }
.social-icon:hover { background: var(--color-accent); }

.contact-map { aspect-ratio: 1 / 1; }

/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */
.site-footer {
  background: var(--color-primary);
  color: var(--color-text-on-dark-muted);
  padding: 24px 0;
  font-size: 13px;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; }
  /* Text leads on mobile — an empty photo placeholder shouldn't be the
     first thing a visitor scrolls past before reaching the headline. */
  .hero-media { order: 1; }
  .hero-img { aspect-ratio: 16 / 10; }
  .services-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: 1fr; max-width: 280px; margin-left: auto; margin-right: auto; }
  .contact-inner { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: 1fr; gap: 18px; }
  .form-grid { grid-template-columns: 1fr; }
  /* 2x2 grid instead of 4-across — avoids an unbalanced 3-then-1 wrap. */
  .trust-badges { grid-template-columns: repeat(2, auto); }

  /* Match the centered heading treatment used by every other section
     once contact drops to a single column. */
  .contact-inner > div:first-child { text-align: center; }
  .social-links { justify-content: center; }

  /* Center the list as one block (sized to its widest row, e.g. the
     office address) rather than centering each row independently —
     independent centering left rows with shorter text (Phone,
     WhatsApp) starting further right than wider rows (Office). Every
     row's icon and text then share the same left edge inside that
     centered block. */
  .contact-list { align-items: flex-start; width: fit-content; margin-left: auto; margin-right: auto; }
  .contact-list li { text-align: left; }
}

@media (max-width: 520px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .booking-form { padding: 24px; }

  /* Single column at phone width. Centering the whole block (rather than
     each row via justify-content) keeps every icon on the same left edge
     regardless of how long each badge's text is — same fix as the
     Contact section's phone/WhatsApp/email/office list. */
  .trust-badges {
    grid-template-columns: 1fr;
    justify-content: start;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }

  /* Dropdown panel spans the full width on small phones instead of
     hugging the right edge, so it stays easy to tap. */
  .main-nav {
    position: fixed;
    top: 68px;
    left: 16px;
    right: 16px;
    min-width: 0;
  }

  /* Radio pills wrap unevenly at phone widths (two on one row, one on
     the next) — full-width stacked rows read cleaner and give bigger,
     more consistent tap targets. */
  .radio-row { flex-direction: column; flex-wrap: nowrap; }
  .radio-pill { width: 100%; }

  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }

  .form-footer { align-items: stretch; }
  .form-footer .btn { width: 100%; }

  .whatsapp-fab { width: 52px; height: 52px; bottom: 18px; right: 18px; }
  .whatsapp-fab svg { width: 25px; height: 25px; }
}

/* ---------------------------------------------------------
   WHATSAPP FLOATING BUTTON
   ---------------------------------------------------------
   Persistent quick-contact button, visible on every scroll
   position. WhatsApp is the fastest, most-used way to reach a
   business directly in Jamaica, so this sits alongside (not
   instead of) the booking form and Contact section.
   --------------------------------------------------------- */
.whatsapp-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  color: var(--color-white);
  box-shadow: var(--shadow-md);
  transition: transform 0.2s ease;
}
.whatsapp-fab:hover { transform: scale(1.07); }
.whatsapp-fab svg { width: 28px; height: 28px; }