/* =====================================================
   B4UROLL — Independence Starts Here
   Bold Hawaiian / Aloha redesign
   ===================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Ocean */
  --teal: #1ea7b8;
  --teal-deep: #0d6e87;
  --navy: #062f44;
  --sky: #b6e3ee;
  --foam: #eaf7fb;

  /* Sun & Sand */
  --sun: #f9c74f;
  --sand: #f6efe1;
  --warm-white: #fbf8f1;
  --cream: #fef6e8;

  /* Tropical bloom */
  --hibiscus: #ee5a3a;
  --hibiscus-deep: #c63d22;
  --coral: #f4a261;
  --plumeria: #fdfbf6;
  --palm: #2a7f5f;
  --palm-deep: #1d5a44;

  /* Text */
  --ink: #102434;
  --muted: #5b6b7a;

  /* Effects */
  --shadow: 0 8px 24px rgba(6, 47, 68, 0.15);
  --shadow-lg: 0 22px 56px rgba(6, 47, 68, 0.25);
  --shadow-warm: 0 18px 44px rgba(238, 90, 58, 0.20);

  --radius: 14px;
  --radius-lg: 24px;
  --radius-xl: 36px;
  --max: 1200px;
}

html {
  scroll-behavior: smooth;
  font-size: 17px; /* Bump base ~6% for the older audience; rem-based layout scales accordingly */
}

body {
  font-family: "Inter", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: var(--warm-white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Visible keyboard focus on every interactive element — required for accessibility */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.cat-card:focus-visible,
.product-card:focus-visible,
.feature-card:focus-visible {
  outline: 3px solid var(--teal-deep);
  outline-offset: 3px;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

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

a {
  color: var(--teal-deep);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover { color: var(--hibiscus); }

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

.script {
  font-family: "Caveat", "Brush Script MT", "Lucida Handwriting", cursive;
  font-weight: 700;
  line-height: 1;
}

/* =================== HEADER =================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 248, 241, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(6, 47, 68, 0.08);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  max-width: var(--max);
  margin: 0 auto;
}

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

.logo-mark {
  width: 72px;
  height: auto;
  flex-shrink: 0;
  object-fit: contain;
}

.logo-text { display: flex; flex-direction: column; line-height: 1; }

.logo-text .brand {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--navy);
}

.logo-text .tagline {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: var(--teal);
  margin-top: 4px;
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  gap: 6px;
  list-style: none;
  align-items: center;
}

.nav-links a {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  transition: all 0.2s ease;
}
.nav-links a:hover { background: var(--foam); color: var(--navy); }
.nav-links a.active {
  background: var(--teal);
  color: white;
  box-shadow: 0 4px 14px rgba(30, 167, 184, 0.4);
}
.nav-links a.active:hover { background: var(--teal-deep); color: white; }

/* Phone CTA in nav — visible on every page so caregivers/elderly users can call */
.nav-links .nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  margin-left: 8px;
  background: var(--hibiscus);
  color: #ffffff;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(238, 90, 58, 0.35);
  white-space: nowrap;
}
.nav-links .nav-phone:hover { background: #d94a2a; color: #ffffff; }
.nav-links .nav-phone svg { flex-shrink: 0; }

.footer-contact { font-size: 1.05rem; }
.footer-contact strong { color: var(--sun); }
.footer-location {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
}

/* =================== HERO =================== */
.hero {
  position: relative;
  min-height: 640px;
  background:
    linear-gradient(95deg,
      rgba(6, 47, 68, 0.78) 0%,
      rgba(6, 47, 68, 0.55) 28%,
      rgba(6, 47, 68, 0.18) 52%,
      rgba(6, 47, 68, 0.02) 70%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0) 50%, rgba(6, 47, 68, 0.30) 100%),
    url("assets/hero-banner.jpg");
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  padding: 110px 0 160px;
  overflow: hidden;
}

/* No corner decorations — the banner image carries the entire mood */
.hero::before { content: none; }

/* Removed hibiscus from hero — palm corner is enough */

.hero-inner {
  width: 100%;
  position: relative;
  z-index: 3;
}

.hero-text {
  max-width: 580px;
}

.hero-logo {
  display: block;
  width: 290px;
  max-width: 70%;
  height: auto;
  margin: 0 0 18px;
  background: rgba(255, 255, 255, 0.96);
  padding: 22px 28px;
  border-radius: 22px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.4),
    0 22px 60px rgba(0, 0, 0, 0.45),
    0 0 80px rgba(255, 217, 153, 0.25);
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.25));
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.28em;
  color: var(--hibiscus);
  text-transform: uppercase;
  margin-bottom: 20px;
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--hibiscus);
  border-radius: 2px;
}

.hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.8rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: #ffffff;
  text-transform: uppercase;
  margin-bottom: 8px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.hero .eyebrow {
  color: #ffd9c4;
  font-size: 1.05rem;
  letter-spacing: 0.32em;
  margin-bottom: 26px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.hero .eyebrow::before {
  background: #ffd9c4;
  width: 44px;
  height: 3px;
}

.hero .script-line {
  font-family: "Caveat", "Brush Script MT", cursive;
  font-size: clamp(3.2rem, 7vw, 5.6rem);
  color: #ffd96b;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 22px;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  /* Layered shadow + dark-stroke effect so the script reads on bright sky areas of the hero photo */
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.85),
    0 2px 18px rgba(0, 0, 0, 0.6),
    0 0 30px rgba(0, 0, 0, 0.4);
  -webkit-text-stroke: 1px rgba(6, 47, 68, 0.3);
}

.sun-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}

.hero-lede {
  font-size: 1.08rem;
  color: rgba(255, 255, 255, 0.96);
  margin-bottom: 12px;
  max-width: 480px;
  font-weight: 500;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}
.hero-lede.dim { color: rgba(255, 255, 255, 0.82); margin-bottom: 32px; font-weight: 400; }

.hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 2.5px solid transparent;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--teal);
  color: white;
  box-shadow: 0 6px 18px rgba(30, 167, 184, 0.4);
}
.btn-primary:hover {
  background: var(--teal-deep);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(13, 110, 135, 0.5);
}

.btn-hibiscus {
  background: var(--hibiscus);
  color: white;
  box-shadow: 0 6px 18px rgba(238, 90, 58, 0.35);
}
.btn-hibiscus:hover {
  background: var(--hibiscus-deep);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(198, 61, 34, 0.5);
}

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

/* Within the hero, the outline button needs to read on a dark photo */
.hero .btn-outline {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(2px);
}
.hero .btn-outline:hover {
  background: rgba(255, 255, 255, 0.95);
  color: var(--navy);
  border-color: #ffffff;
}

.aloha-tag {
  font-family: "Caveat", "Brush Script MT", cursive;
  font-size: 1.7rem;
  color: #ffd9c4;
  font-weight: 700;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.aloha-tag::before,
.aloha-tag::after {
  content: "";
  height: 2px;
  width: 30px;
  background: #ffd9c4;
  border-radius: 2px;
  opacity: 0.7;
}

/* Wave divider at bottom of hero */
.hero-wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 4;
  display: block;
  pointer-events: none;
}

/* =================== STORY + SOLUTIONS =================== */
.split-section {
  background: var(--warm-white);
  padding: 100px 0;
  position: relative;
}

/* Section background kept clean */

.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
  position: relative;
  z-index: 1;
}

.story-card {
  background: linear-gradient(160deg, var(--cream) 0%, white 100%);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  box-shadow: var(--shadow);
  border: 2px solid rgba(238, 90, 58, 0.12);
  position: relative;
}

/* Story card has a clean, unadorned look — relies on color and typography */

.story-card h2 {
  font-size: clamp(1.9rem, 3.5vw, 2.4rem);
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  line-height: 1.05;
}

.story-card .script-line {
  font-family: "Caveat", "Brush Script MT", cursive;
  font-size: clamp(2.3rem, 4vw, 3.1rem);
  color: var(--hibiscus);
  font-weight: 700;
  margin-bottom: 24px;
  line-height: 1;
}

.story-photo {
  width: 100%;
  border-radius: var(--radius);
  margin-bottom: 22px;
  box-shadow: var(--shadow);
  border: 4px solid white;
  outline: 1px solid rgba(238, 90, 58, 0.12);
}

.story-card p {
  color: var(--muted);
  font-size: 0.98rem;
  margin-bottom: 14px;
}

.signature {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 2px dashed rgba(238, 90, 58, 0.25);
}

.signature .name {
  font-family: "Caveat", "Brush Script MT", cursive;
  font-size: 1.95rem;
  color: var(--navy);
  font-weight: 700;
  line-height: 1;
}

.signature .role {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--muted);
  margin-top: 6px;
  text-transform: uppercase;
}

/* Solutions block */
.solutions-block {
  position: relative;
}

.solutions-block .eyebrow { color: var(--teal-deep); display: inline-flex; }
.solutions-block .eyebrow::before { background: var(--teal-deep); }

.solutions-block h2 {
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.01em;
  margin-bottom: 28px;
  line-height: 1.15;
  text-transform: uppercase;
}

.cat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 28px;
}

.cat-card {
  background: white;
  border-radius: var(--radius);
  padding: 26px 20px;
  text-align: center;
  border: 2px solid var(--foam);
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.cat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%, transparent 70%, rgba(30, 167, 184, 0.08) 100%);
  pointer-events: none;
}

.cat-card:hover {
  transform: translateY(-4px);
  border-color: var(--teal);
  box-shadow: var(--shadow);
}

.cat-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 14px;
  background: linear-gradient(135deg, var(--foam) 0%, var(--sky) 100%);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal-deep);
}

.cat-card h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 4px;
  position: relative;
}

.cat-card p {
  color: var(--muted);
  font-size: 0.85rem;
  position: relative;
}

.cat-card a {
  color: inherit;
  text-decoration: none;
  display: block;
}

.view-all-btn { display: inline-block; margin-top: 8px; }

/* =================== ALOHA MISSION SECTION =================== */
.mission {
  position: relative;
  padding: 100px 0;
  background:
    linear-gradient(180deg, rgba(238, 90, 58, 0.08) 0%, rgba(249, 199, 79, 0.10) 100%),
    var(--warm-white);
  text-align: center;
  overflow: hidden;
}

/* Mission section is now clean — the warm gradient + typography do the work */

.mission-inner { max-width: 720px; margin: 0 auto; position: relative; z-index: 1; }

.mission .eyebrow { justify-content: center; }

.mission h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  text-transform: uppercase;
  line-height: 1;
}

.mission .script-line {
  font-family: "Caveat", "Brush Script MT", cursive;
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  color: var(--hibiscus);
  font-weight: 700;
  margin-bottom: 26px;
  line-height: 1;
}

.mission-quote {
  font-size: 1.15rem;
  color: var(--ink);
  line-height: 1.7;
  font-weight: 500;
}

.mission-quote .accent {
  color: var(--hibiscus);
  font-weight: 700;
}

/* =================== STATS BAND =================== */
.stats-band {
  position: relative;
  background:
    linear-gradient(135deg, rgba(6, 47, 68, 0.85) 0%, rgba(13, 110, 135, 0.88) 100%),
    url("assets/beach-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: white;
  padding: 90px 0;
  text-align: center;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
}

.stat-item { position: relative; padding: 0 20px; }

.stat-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 18%;
  height: 64%;
  width: 1px;
  background: rgba(249, 199, 79, 0.4);
}

.stat-num {
  font-size: clamp(3rem, 6vw, 4.8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: white;
}

.stat-label {
  margin-top: 14px;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
}

.stats-tagline {
  font-family: "Caveat", "Brush Script MT", cursive;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--sun);
  margin-top: 36px;
  font-weight: 700;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.stats-tagline::before,
.stats-tagline::after {
  content: "";
  width: 36px;
  height: 2px;
  background: var(--sun);
  border-radius: 2px;
  opacity: 0.7;
}

/* =================== PRODUCT TEASE =================== */
.product-tease {
  background: var(--cream);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

.product-tease .container {
  position: relative;
  z-index: 1;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 48px;
}

.product-card {
  background: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.product-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: var(--hibiscus);
}

.product-thumb {
  height: 180px;
  background: linear-gradient(135deg, var(--foam) 0%, var(--sky) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal-deep);
  position: relative;
}

.product-thumb.warm {
  background: linear-gradient(135deg, var(--cream) 0%, var(--coral) 100%);
  color: var(--hibiscus-deep);
}

.product-thumb.palm {
  background: linear-gradient(135deg, #d4ecd9 0%, var(--palm) 100%);
  color: white;
}

.product-thumb.sun {
  background: linear-gradient(135deg, var(--sun) 0%, var(--coral) 100%);
  color: var(--hibiscus-deep);
}

.product-body {
  padding: 22px 22px 26px;
}

.product-body h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 6px;
}

.product-body p {
  color: var(--muted);
  font-size: 0.92rem;
  margin-bottom: 14px;
}

.product-body .badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--hibiscus);
  background: rgba(238, 90, 58, 0.1);
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}

/* =================== CTA SECTION =================== */
/* Default (mobile-first): face is pushed up so it sits ABOVE the logo card
   instead of behind it, and the gradient is darker so the white logo card pops. */
.cta-section {
  position: relative;
  background:
    linear-gradient(180deg,
      rgba(6, 47, 68, 0.25) 0%,
      rgba(238, 90, 58, 0.78) 38%,
      rgba(244, 162, 97, 0.92) 70%,
      rgba(249, 199, 79, 0.92) 100%),
    url("assets/beach-bg.jpg");
  background-size: cover;
  background-position: center 18%;
  background-repeat: no-repeat;
  color: white;
  text-align: center;
  padding: 100px 0;
  overflow: hidden;
}

/* Desktop: split layout — Cory's face stays on the RIGHT (where the photo
   naturally puts him), and the text content moves to the LEFT half of the
   section so it's "in the middle of the photo" (over the sky/landscape area)
   instead of sitting on top of his face. The gradient goes opaque on the
   left (where the text lives) and transparent on the right (where Cory is). */
@media (min-width: 901px) {
  .cta-section {
    background:
      linear-gradient(90deg,
        rgba(238, 90, 58, 0.92) 0%,
        rgba(238, 90, 58, 0.85) 32%,
        rgba(244, 162, 97, 0.55) 50%,
        rgba(6, 47, 68, 0.10) 70%,
        rgba(6, 47, 68, 0.05) 100%),
      url("assets/beach-bg.jpg");
    background-size: cover, 130% auto;
    background-position: center, left center;
    background-repeat: no-repeat;
    text-align: left;
    padding: 110px 0;
  }
  .cta-section .container {
    max-width: 560px;
    margin-left: 6%;
    margin-right: auto;
    padding-left: 24px;
  }
  .cta-section .btn { margin-right: auto; margin-left: 0; }
  .cta-section .freedom-stamp { text-align: left; }
}

/* CTA relies on the warm sunset gradient — no floral overlay needed */

.cta-logo {
  width: 260px;
  max-width: 80%;
  height: auto;
  margin: 0 auto 8px;
  display: block;
  background: rgba(255, 255, 255, 0.96);
  padding: 22px 28px;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
}

/* The CTA section already has the brand in the sticky header and the footer,
   so the third in-section logo card was redundant AND was sitting on top of
   Cory's face in the background photo. Hide it everywhere. */
.cta-section .brand-row { display: none; }

.cta-section .logo-text .brand { color: white; font-size: 2rem; }
.cta-section .logo-text .tagline { color: rgba(255, 255, 255, 0.85); }

.cta-section h2 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}

.cta-section .script-line {
  font-family: "Caveat", "Brush Script MT", cursive;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  color: var(--navy);
  margin-bottom: 32px;
  font-weight: 700;
  position: relative;
  z-index: 1;
}

.cta-section .freedom-stamp {
  font-family: "Caveat", cursive;
  font-size: 1.7rem;
  color: white;
  font-weight: 700;
  margin-top: 28px;
  position: relative;
  z-index: 1;
}

.cta-section .btn {
  position: relative;
  z-index: 1;
}

/* =================== FOOTER =================== */
.site-footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.85);
  padding: 60px 0 24px;
  position: relative;
}

.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--hibiscus), var(--sun), var(--teal), var(--palm));
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 40px;
}

.footer-brand .logo-mark {
  background: rgba(255, 255, 255, 0.95);
  padding: 6px 8px;
  border-radius: 10px;
  width: 64px;
}
.footer-brand .logo-text .brand { color: white; }
.footer-brand .logo-text .tagline { color: var(--sun); }

.footer-brand p {
  margin-top: 16px;
  max-width: 340px;
  font-size: 0.92rem;
  opacity: 0.78;
}

.footer-col h4 {
  color: var(--sun);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }

.footer-col a {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.95rem;
}
.footer-col a:hover { color: var(--sun); }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 22px;
  text-align: center;
  font-size: 0.82rem;
  opacity: 0.65;
}

/* =================== TRAVEL PAGE =================== */
.travel-hero {
  position: relative;
  min-height: 520px;
  background:
    linear-gradient(135deg, rgba(30, 167, 184, 0.82) 0%, rgba(6, 47, 68, 0.85) 100%),
    url("assets/beach-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: white;
  text-align: center;
  padding: 100px 0 130px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Travel hero stays clean — color and photo do the work */

.travel-hero .container { position: relative; z-index: 1; }
.travel-hero .eyebrow { color: var(--sun); justify-content: center; }
.travel-hero .eyebrow::before { background: var(--sun); }

.travel-hero h1 {
  font-size: clamp(2.4rem, 5.6vw, 4.4rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.travel-hero .script-line {
  font-family: "Caveat", "Brush Script MT", cursive;
  font-size: clamp(2.8rem, 5.5vw, 4.4rem);
  color: var(--sun);
  font-weight: 700;
  margin-bottom: 24px;
  line-height: 1;
}

.travel-hero p {
  max-width: 620px;
  margin: 0 auto;
  font-size: 1.08rem;
  opacity: 0.95;
}

.travel-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.feature-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-shadow: var(--shadow);
  border-top: 4px solid var(--teal);
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.feature-card:nth-child(2) { border-top-color: var(--hibiscus); }
.feature-card:nth-child(3) { border-top-color: var(--sun); }
.feature-card:nth-child(4) { border-top-color: var(--palm); }
.feature-card:nth-child(5) { border-top-color: var(--coral); }
.feature-card:nth-child(6) { border-top-color: var(--teal-deep); }

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

.feature-card h3 {
  color: var(--navy);
  font-size: 1.15rem;
  margin-bottom: 10px;
  font-weight: 800;
}

.feature-card p {
  color: var(--muted);
  font-size: 0.95rem;
}

.feature-icon {
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  color: var(--teal);
}
.feature-card:nth-child(2) .feature-icon { color: var(--hibiscus); }
.feature-card:nth-child(3) .feature-icon { color: var(--sun); }
.feature-card:nth-child(4) .feature-icon { color: var(--palm); }
.feature-card:nth-child(5) .feature-icon { color: var(--coral); }

.section-eyebrow {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.28em;
  color: var(--hibiscus);
  margin-bottom: 14px;
  text-transform: uppercase;
  display: block;
}

.section-title {
  text-align: center;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  text-transform: uppercase;
}

.section-sub {
  text-align: center;
  color: var(--muted);
  max-width: 660px;
  margin: 0 auto 36px;
  font-size: 1.04rem;
}

section.padded { padding: 100px 0; }

/* =================== RESPONSIVE =================== */
@media (max-width: 920px) {
  .split-grid { grid-template-columns: 1fr; gap: 36px; }
  .stats-grid { grid-template-columns: 1fr; gap: 32px; }
  .stat-item:not(:last-child)::after { display: none; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero { min-height: 600px; padding: 70px 0 100px; background-position: 70% center; }
  .hero::before { width: 220px; height: 130px; top: -30px; left: -60px; }
  .hero::after { display: none; }
}

@media (max-width: 560px) {
  /* Header — tighten everything so the active "Home" pill never overlaps the brand text */
  .nav { padding: 10px 12px; gap: 8px; }
  .logo { gap: 8px; min-width: 0; flex-shrink: 1; }
  .logo-mark { width: 44px; height: auto; }
  .logo-text .brand { font-size: 1.05rem; letter-spacing: 0.01em; }
  .logo-text .tagline { display: none; } /* tagline hidden on phones — brand alone is enough */
  .nav-links { gap: 2px; flex-shrink: 0; }
  .nav-links a { padding: 7px 12px; font-size: 0.7rem; letter-spacing: 0.06em; }
  .nav-links a.active { box-shadow: 0 2px 8px rgba(30, 167, 184, 0.35); }
  .hero {
    background:
      linear-gradient(180deg,
        rgba(6, 47, 68, 0.55) 0%,
        rgba(6, 47, 68, 0.30) 50%,
        rgba(6, 47, 68, 0.65) 100%),
      url("assets/hero-banner.jpg");
    background-size: cover;
    background-position: center;
    min-height: 520px;
    padding: 60px 0 80px;
  }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .btn { justify-content: center; }
  .cat-grid { grid-template-columns: 1fr; }
  .stats-tagline::before, .stats-tagline::after { display: none; }
  .nav-links .nav-phone span { display: none; }
  .nav-links .nav-phone { padding: 10px 14px; }
  .trust-strip-grid { grid-template-columns: 1fr 1fr !important; }
  .floating-call { bottom: 16px !important; right: 16px !important; }
}

/* =================== HERO FOUNDER QUOTE =================== */
.hero-quote {
  position: relative;
  margin: 4px 0 26px;
  padding: 14px 20px 14px 22px;
  border-left: 4px solid var(--sun);
  background: rgba(6, 47, 68, 0.32);
  backdrop-filter: blur(3px);
  border-radius: 0 12px 12px 0;
  max-width: 540px;
  color: #ffffff;
  font-style: italic;
  font-size: 1.18rem;
  line-height: 1.4;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}
.hero-quote cite {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  color: #ffd9c4;
  font-weight: 600;
}

/* =================== TRUST STRIP =================== */
.trust-strip {
  background: linear-gradient(180deg, var(--cream) 0%, var(--warm-white) 100%);
  border-top: 1px solid rgba(6, 47, 68, 0.06);
  border-bottom: 1px solid rgba(6, 47, 68, 0.06);
  padding: 26px 0;
}

.trust-strip-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  align-items: center;
}

.trust-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.01em;
}

.trust-pill svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--hibiscus);
}

.trust-pill:nth-child(2) svg { color: var(--teal); }
.trust-pill:nth-child(3) svg { color: var(--palm); }
.trust-pill:nth-child(4) svg { color: var(--sun); }
.trust-pill:nth-child(5) svg { color: var(--hibiscus); }

@media (max-width: 900px) {
  .trust-strip-grid { grid-template-columns: 1fr 1fr; }
}

/* =================== CATALOG-COMING (replaces fake products) =================== */
.catalog-coming {
  padding: 90px 0;
  background:
    linear-gradient(180deg, var(--cream) 0%, var(--warm-white) 100%);
}

.catalog-coming-card {
  max-width: 780px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: var(--radius-lg);
  padding: 56px 48px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  border-top: 6px solid var(--hibiscus);
  position: relative;
}

.catalog-coming-card .stamp {
  display: inline-block;
  background: var(--hibiscus);
  color: #ffffff;
  padding: 6px 18px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.catalog-coming-card h2 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

.catalog-coming-card .lede {
  font-size: 1.1rem;
  color: var(--ink);
  margin: 0 auto 28px;
  max-width: 580px;
  line-height: 1.55;
}

.catalog-coming-cta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-bottom: 18px;
}

.catalog-note {
  font-size: 0.92rem;
  color: var(--muted);
  margin-top: 14px;
}

@media (max-width: 700px) {
  .catalog-coming-card { padding: 38px 24px; }
}

/* =================== FLOATING CALL BUTTON =================== */
.floating-call {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: var(--hibiscus);
  color: #ffffff;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow:
    0 12px 30px rgba(238, 90, 58, 0.45),
    0 0 0 4px rgba(255, 255, 255, 0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.floating-call:hover {
  background: var(--hibiscus-deep);
  transform: translateY(-2px);
  box-shadow:
    0 18px 40px rgba(238, 90, 58, 0.55),
    0 0 0 4px rgba(255, 255, 255, 0.7);
}

.floating-call svg { flex-shrink: 0; width: 20px; height: 20px; }

@media (max-width: 600px) {
  .floating-call .floating-call-text { display: none; }
  .floating-call { padding: 14px; border-radius: 50%; }
}

/* =====================================================
   PAYPAL-READY PRODUCT GRID
   Used by the commented "Shop Products" section in
   index.html. When ready to launch the store, uncomment
   that section and paste PayPal "Buy Now" button code
   into each .product-buy slot.
   ===================================================== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  margin-top: 32px;
}

.product-card {
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(6, 47, 68, 0.08);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid rgba(6, 47, 68, 0.06);
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 48px rgba(6, 47, 68, 0.14);
}

.product-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--foam);
  object-fit: cover;
  display: block;
}

.product-body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
}

.product-name {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.25;
  margin: 0;
}

.product-desc {
  color: rgba(6, 47, 68, 0.78);
  font-size: 0.98rem;
  line-height: 1.5;
  margin: 0;
  flex: 1;
}

.product-price {
  font-family: 'Inter', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--hibiscus-deep);
  margin-top: 6px;
}

.product-buy {
  margin-top: 14px;
  /* PayPal Buy Now button code goes inside this container.
     The PayPal-generated button will inherit appropriate sizing. */
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-stock {
  font-size: 0.85rem;
  color: rgba(6, 47, 68, 0.55);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.product-stock.out {
  color: var(--hibiscus-deep);
}

/* =====================================================
   CATEGORY "COMING SOON" PAGES
   Shared layout for doorways.html, scooters.html, bath-bedroom.html
   (and future category pages). Watermarked logo placeholder
   product cards with a "Coming Soon" stamp.
   ===================================================== */
.cat-page-hero {
  padding: 70px 0 40px;
  background: linear-gradient(180deg, var(--cream) 0%, var(--warm-white) 100%);
  text-align: center;
  border-bottom: 1px solid rgba(6, 47, 68, 0.06);
}

.cat-page-hero .eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: var(--hibiscus);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.cat-page-hero h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 14px;
}

.cat-page-hero p {
  max-width: 620px;
  margin: 0 auto;
  font-size: 1.05rem;
  color: rgba(6, 47, 68, 0.78);
  line-height: 1.55;
}

.coming-soon-section {
  padding: 60px 0 90px;
  background: var(--warm-white);
}

.coming-soon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px;
  margin-top: 12px;
}

.coming-soon-card {
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(6, 47, 68, 0.08);
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(6, 47, 68, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.coming-soon-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 48px rgba(6, 47, 68, 0.14);
}

.coming-soon-art {
  position: relative;
  background:
    radial-gradient(circle at 30% 30%, rgba(30, 167, 184, 0.08), transparent 60%),
    linear-gradient(135deg, var(--foam) 0%, var(--cream) 100%);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.coming-soon-art .watermark {
  width: 62%;
  max-width: 220px;
  height: auto;
  opacity: 0.22;
  filter: grayscale(0.1);
  pointer-events: none;
  user-select: none;
}

.coming-soon-stamp {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--hibiscus);
  color: #ffffff;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(238, 90, 58, 0.35);
}

.coming-soon-body {
  padding: 22px 22px 26px;
  text-align: left;
}

.coming-soon-body h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 8px;
}

.coming-soon-body p {
  font-size: 0.95rem;
  color: rgba(6, 47, 68, 0.7);
  line-height: 1.5;
}

.cat-page-cta {
  background: var(--navy);
  color: white;
  text-align: center;
  padding: 70px 24px;
}

.cat-page-cta h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800;
  margin-bottom: 12px;
}

.cat-page-cta p {
  max-width: 540px;
  margin: 0 auto 26px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.5;
}

.cat-page-cta .btn { display: inline-flex; }

@media (max-width: 700px) {
  .cat-page-hero { padding: 50px 0 30px; }
  .coming-soon-section { padding: 40px 0 60px; }
  .coming-soon-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .coming-soon-body { padding: 16px; }
  .coming-soon-body h3 { font-size: 1rem; }
  .coming-soon-body p { font-size: 0.85rem; }
  .coming-soon-stamp { font-size: 0.6rem; padding: 5px 10px; top: 10px; right: 10px; }
}

/* products.html — section header per category and alternating background */
.products-category { padding: 50px 0 60px; }
.products-category.alt { background: var(--cream); }

.products-category-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(6, 47, 68, 0.1);
}

.products-category-head h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 800;
  color: var(--navy);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.see-all-link {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--hibiscus);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.see-all-link:hover { color: var(--hibiscus-deep); }