/**
 * Lakeshore Theme - Quick Fixes CSS
 * Additional styles to fix any rendering issues
 *
 * To use this file:
 * 1. Upload to: /wp-content/themes/lakeshore-theme/assets/css/fixes.css
 * 2. Add to WordPress Customizer → Additional CSS, OR
 * 3. Enqueue in functions.php
 *
 * @package Lakeshore
 * @version 1.0.1
 */

/* ==========================================================================
   HEADER FONT FIXES
   ========================================================================== */

/**
 * Ensure header fonts render correctly
 * Forces Roboto font family with proper fallbacks
 */
.site-header,
.nav-primary,
.nav-primary__link {
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.nav-primary__link {
  font-weight: 400 !important;
  letter-spacing: 0.05em !important;
}

/* Site logo text fallback */
.site-logo__text {
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 500 !important;
}

/* ==========================================================================
   CTA BANNER FORM RESPONSIVE FIXES
   ========================================================================== */

@media (max-width: 768px) {
  .cta-banner__options {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .cta-banner__box {
    padding: 1.5rem !important;
  }
}

/* Form input fixes for better mobile experience */
.cta-contact-form input[type="text"],
.cta-contact-form input[type="email"],
.cta-contact-form input[type="tel"] {
  -webkit-appearance: none;
  appearance: none;
}

.cta-contact-form input[type="text"]:focus,
.cta-contact-form input[type="email"]:focus,
.cta-contact-form input[type="tel"]:focus {
  outline: none;
  border-color: var(--color-brand-dark);
  box-shadow: 0 0 0 3px rgba(153, 204, 255, 0.2);
}

/* ==========================================================================
   ENSURE PROPER SPACING
   ========================================================================== */

/* Make sure pages are symmetrical */
.section {
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.section--lg {
  padding-top: clamp(3rem, 6vw, 5.5rem);
  padding-bottom: clamp(3rem, 6vw, 5.5rem);
}

/* ==========================================================================
   SERVICES PAGE — SECTION SPACING & DIVIDERS
   ========================================================================== */

/* Service sections on /services/ page — match .section spacing */
.services-section {
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

/* Dividers between service sections — controlled spacing */
.services-section + .divider {
  width: 60px;
  height: 1.5px;
  margin: 0 auto;
}

/* Services CTA section */
.services-cta-section {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 6rem);
  text-align: center;
}

.services-cta-section h2 {
  margin-bottom: var(--space-sm);
}

.services-cta-section p {
  margin-bottom: var(--space-md);
  color: var(--color-gray);
}

/* ==========================================================================
   SERVICE SUB-PAGES — MOBILE CENTERING
   ========================================================================== */

/* Center service-intro text + buttons on mobile */
@media (max-width: 768px) {
  .service-intro__text {
    text-align: center;
  }

  .service-intro__text .btn {
    display: inline-block;
    margin-inline: auto;
  }

  .service-intro__text .divider {
    margin-inline: auto;
  }

  /* Center the highlights grid + included list on mobile */
  .service-intro__highlights {
    justify-items: center;
  }

  .service-intro > div {
    text-align: center;
  }

  .service-intro > div h4 {
    text-align: center;
  }

  .service-intro > div ul {
    display: inline-block;
    text-align: left;
  }
}

/* Prevent service-intro overflow on intermediate widths */
.service-intro {
  overflow: hidden;
}

/* service-intro right column — left on desktop, centered on mobile (handled in media query below) */

/* ==========================================================================
   MOBILE NAVIGATION FIXES
   ========================================================================== */

/* Hide JS-injected mobile buttons on desktop */
.mobile-cta-wrapper {
  display: none !important;
}

@media (max-width: 1280px) {
  /* V2.4.2 — Show hamburger earlier to prevent nav overflow */
  .menu-toggle {
    display: flex;
  }

  /* Mobile slide-out nav panel (extends style.css 1024px breakpoint to 1200px) */
  .nav-primary__list {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    flex-direction: column;
    align-items: center;
    transition: right var(--duration-slow) var(--ease-out);
    z-index: 999;
  }

  .nav-primary__list.active {
    right: 0;
  }

  /* Show mobile CTA wrapper on mobile */
  .nav-primary__list .mobile-cta-wrapper {
    display: flex !important;
  }

  /* Dark slide-out menu */
  .nav-primary__list {
    justify-content: center !important;
    padding-top: 4rem;
    padding-bottom: 2rem;
    gap: 1rem;
    background-color: var(--color-charcoal) !important;
  }

  /* MUCH LARGER white nav links — fill the space, capped for zoomed desktops */
  .nav-primary__link {
    font-size: clamp(1.75rem, 8vw, 2.5rem) !important;
    color: #fff !important;
    padding: 0.75rem 1.25rem;
    letter-spacing: 0.06em;
    font-weight: 500 !important;
  }

  .nav-primary__link:hover,
  .nav-primary__link--active {
    color: rgba(255, 255, 255, 0.7) !important;
  }

  .nav-primary__link::after {
    background-color: var(--color-brand) !important;
  }

  /* Hide desktop CTA (JS moves buttons into nav list) */
  .nav-cta {
    display: none !important;
  }

  /* Mobile CTA buttons inside the nav list */
  .nav-primary__list .mobile-cta-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 85%;
    max-width: 340px;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }

  .nav-primary__list .mobile-cta-wrapper .btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    padding: 1.15rem 2rem;
    border-radius: var(--radius-full) !important;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
  }

  /* Login — white outline, blue on hover/tap */
  .nav-primary__list .mobile-cta-wrapper .btn--outline {
    background-color: transparent;
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    transition: all 0.3s ease;
  }

  .nav-primary__list .mobile-cta-wrapper .btn--outline:hover,
  .nav-primary__list .mobile-cta-wrapper .btn--outline:active {
    border-color: var(--color-brand);
    background-color: rgba(74, 144, 217, 0.15);
    color: #fff;
  }

  /* Book Now — red */
  .nav-primary__list .mobile-cta-wrapper .btn--primary {
    background-color: var(--color-red);
    border: 2px solid var(--color-red);
    color: #fff;
  }
}

/* ==========================================================================
   HEADER ALIGNMENT FIXES
   ========================================================================== */

.site-header {
  padding-top: 1.75rem;
  padding-bottom: 1.5rem;
}

/* Footer logo — larger than default 40px */
.footer-logo {
  height: 56px !important;
  max-width: 240px !important;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.nav-primary {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  margin-left: auto;
}

/* ==========================================================================
   LOGO DISPLAY FIXES
   ========================================================================== */

.site-logo img,
.site-logo__img {
  display: block;
  height: 68px !important;
  width: auto !important;
  max-width: 290px !important;
  max-height: 68px !important;
  object-fit: contain;
  margin-top: -22px;
}

/* Scrolled state — slightly smaller logo */
.scrolled .site-logo img,
.scrolled .site-logo__img {
  height: 54px !important;
  max-height: 54px !important;
}

/* Mobile logo sizing */
@media (max-width: 768px) {
  .site-logo img,
  .site-logo__img {
    height: 44px !important;
    max-height: 44px !important;
    max-width: 220px !important;
  }
}

/* ==========================================================================
   FORM SUCCESS/ERROR MESSAGES
   ========================================================================== */

.contact-success-message,
.contact-error-message {
  padding: 1rem 1.5rem;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
  font-size: var(--text-sm);
}

.contact-success-message {
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
}

.contact-error-message {
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
}

/* ==========================================================================
   HEADER NAV — COMPACT LABELS & ALIGNMENT
   ========================================================================== */

/* Tighter nav gaps so long labels don't crowd — DESKTOP ONLY */
@media (min-width: 1281px) {
  .nav-primary__list {
    gap: 1.25rem !important;
  }

  .nav-primary__link {
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap;
  }

  /* Even out header inner spacing */
  .header-inner {
    gap: 1.5rem;
  }

  /* CTA buttons in header — equal sizing, LOGIN gets subtle fill */
  .nav-cta {
    gap: 0.75rem !important;
  }

  .nav-cta .btn--sm {
    padding: 0.45rem 1.125rem !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
  }

  .nav-cta .btn--outline {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: #fff !important;
  }

  .nav-cta .btn--outline:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #fff !important;
  }
}

/* ─── Desktop wide: restore comfortable spacing ─── */
@media (min-width: 1200px) {
  .nav-primary__list {
    gap: 1.75rem !important;
  }
  .nav-primary__link {
    font-size: 0.9375rem !important;
  }
}

/* ==========================================================================
   CONTACT PAGE — SYMMETRICAL FORM LAYOUT
   ========================================================================== */

/* Contact layout: equal columns with consistent spacing */
.contact-layout {
  gap: var(--space-xl) !important;
  align-items: start;
}

.contact-form-column,
.contact-info-column {
  padding: var(--space-lg);
  background: var(--color-off-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-light-gray);
}

.contact-form-column h2,
.contact-info-column h2 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-brand);
}

/* Two-column inline fields for name/company, email/phone */
.contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 640px) {
  .contact-form .form-row {
    grid-template-columns: 1fr;
  }
}

/* Contact info cards */
.contact-info {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-light-gray);
}

.contact-info:last-child {
  border-bottom: none;
}

.contact-info h3 {
  font-size: var(--text-base);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.contact-info h3 svg {
  width: 18px;
  height: 18px;
  color: var(--color-brand-dark);
  flex-shrink: 0;
}

/* Social links row */
.social-links {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-sm);
  color: var(--color-brand-dark);
  font-weight: 500;
  transition: color var(--duration-fast) var(--ease-out);
}

.social-link:hover {
  color: var(--color-brand-deeper);
}

.social-link svg {
  width: 16px;
  height: 16px;
}

/* Contact message alerts */
.contact-message {
  padding: 1rem 1.5rem;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
  font-size: var(--text-sm);
}

.contact-message--success {
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
}

.contact-message--error {
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
}

/* Maps placeholder */
.maps-section {
  padding: 0;
}

.maps-container {
  width: 100%;
  max-width: 100%;
}

.maps-placeholder {
  background: var(--color-off-white);
  padding: var(--space-xl) var(--space-md);
  text-align: center;
  color: var(--color-gray);
  font-size: var(--text-sm);
  border-top: 1px solid var(--color-light-gray);
}

/* ==========================================================================
   QUICK BOOK CTA — FOOTER UNIFIED FORM
   ========================================================================== */

/* Do NOT apply grid directly on .cta-contact-form — the form uses
   nested grid divs for its 2-column layout (Name+Email row, Phone+Button row).
   Only style the inputs/button here. */

.cta-contact-form input[type="text"],
.cta-contact-form input[type="email"],
.cta-contact-form input[type="tel"] {
  width: 100%;
  padding: 0.7rem 0.875rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-charcoal);
  box-sizing: border-box;
  height: 2.75rem;
  -webkit-appearance: none;
  appearance: none;
}

.cta-contact-form input::placeholder {
  color: var(--color-gray);
}

.cta-contact-form input:focus {
  outline: none;
  border-color: var(--color-brand-dark);
  box-shadow: 0 0 0 3px rgba(153, 204, 255, 0.2);
}

.cta-contact-form .btn--outline {
  height: 2.75rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   STATS BAR — Why Agents Choose Us
   ========================================================================== */

.stats-bar {
  background: var(--color-charcoal);
  padding: var(--space-md) 0;
  color: #fff;
}

.stats-bar__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  text-align: center;
}

.stats-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.stats-bar__icon {
  font-size: 1.75rem;
  line-height: 1;
  margin-bottom: 0.25rem;
}

.stats-bar__value {
  font-family: var(--font-heading);
  font-size: var(--text-2xl, 2rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-brand-light, #99ccff);
}

.stats-bar__label {
  font-size: var(--text-xs, 0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.75;
}

@media (max-width: 768px) {
  .stats-bar__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }

  .stats-bar__value {
    font-size: var(--text-xl, 1.5rem);
  }
}

/* ==========================================================================
   STICKY MOBILE CTA BAR
   ========================================================================== */

.sticky-mobile-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: var(--color-charcoal, #2c2c2c);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.6rem 1rem;
  gap: 0.5rem;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

@media (max-width: 767px) {
  .sticky-mobile-cta {
    display: flex;
  }
}

.sticky-mobile-cta.visible {
  transform: translateY(0);
}

.sticky-mobile-cta__btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm, 6px);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease;
}

.sticky-mobile-cta__btn--book {
  background: var(--color-red, #cc0000);
  color: #fff;
}

.sticky-mobile-cta__btn--book:hover {
  background: #b30000;
}

.sticky-mobile-cta__btn--call {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.sticky-mobile-cta__btn--call:hover {
  background: rgba(255, 255, 255, 0.2);
}

.sticky-mobile-cta__btn svg {
  flex-shrink: 0;
}

/* ==========================================================================
   SEND MESSAGE BUTTON — Square accent
   Only the "Send Message" submit buttons are square to stand out
   from the rounded inputs. Works on both dark (CTA) and light (contact) bg.
   ========================================================================== */

/* Footer CTA — Send Message button */
.cta-contact-form .btn--outline {
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
    font-weight: 700;
    letter-spacing: 0.1em;
    transition: all 0.25s ease;
    color-scheme: dark;
    box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0);
}

.cta-contact-form .btn--outline:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: #ffffff !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

/* Contact page — Send Message button */
.contact-form .btn--primary,
.contact-form button[type="submit"] {
    border-radius: 0 !important;
}

/* ==========================================================================
   PRINT FIXES
   ========================================================================== */

@media print {
  .cta-banner,
  .cta-contact-form,
  .nav-cta,
  .menu-toggle,
  .sticky-mobile-cta {
    display: none !important;
  }
}


/* ==========================================================================
   V2.0 — STATS BAR (Why Agents Choose Us)
   ========================================================================== */

.section--stats-bar {
  background-color: var(--color-off-white);
  padding: var(--space-xl) 0;
}

.stats-bar__header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.stats-bar__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

.stats-bar__item {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-light-gray);
  transition: all var(--duration-normal) var(--ease-out);
}

.stats-bar__item:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-brand);
}

.stats-bar__icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-brand-subtle);
  color: var(--color-brand-dark);
}

.stats-bar__icon svg {
  width: 24px;
  height: 24px;
}

.stats-bar__content {
  flex: 1;
}

.stats-bar__number {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-charcoal);
  line-height: 1;
  margin-bottom: var(--space-xs);
}

.stats-bar__label {
  font-size: var(--text-sm);
  color: var(--color-gray);
  line-height: var(--leading-snug);
}

@media (max-width: 768px) {
  .stats-bar__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }

  .stats-bar__item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-md);
  }

  .stats-bar__icon {
    width: 40px;
    height: 40px;
  }
}


/* ==========================================================================
   V2.0 — TESTIMONIALS SECTION
   ========================================================================== */

.testimonials-section {
  padding: var(--space-2xl) 0;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.testimonial-card {
  background: var(--color-white);
  border: 1px solid var(--color-light-gray);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  transition: all var(--duration-normal) var(--ease-out);
  box-shadow: var(--shadow-sm);
}

.testimonial-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-brand);
  transform: translateY(-4px);
}

.testimonial-card__rating {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
  color: #ffc107;
}

.testimonial-card__rating svg {
  width: 16px;
  height: 16px;
}

.testimonial-card__quote {
  font-size: var(--text-base);
  font-weight: 300;
  line-height: var(--leading-relaxed);
  color: var(--color-charcoal);
  margin-bottom: var(--space-md);
  flex: 1;
  font-style: italic;
}

.testimonial-card__author {
  font-size: var(--text-sm);
  color: var(--color-gray);
  font-weight: 500;
}

@media (max-width: 768px) {
  .testimonials-grid {
    grid-template-columns: 1fr;
  }

  .testimonial-card {
    padding: var(--space-md);
  }
}


/* ==========================================================================
   V2.0 — PACKAGE CARD LAYOUT & ANIMATED BOTTOM BAR
   ========================================================================== */

/* --- Wider cards: tighter grid gap + uniform padding --- */
#packages .grid--4,
.section--lg .grid--4 {
  gap: 1rem;
}

/* --- Card internal layout --- */
.package-card {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  row-gap: 0;
  min-width: 0;
  overflow: visible;
  padding: var(--space-md);
  position: relative;
}

/* Cap card padding on wide viewports so vw-based --space-md
   stops growing after the container maxes out at 1280px */
@media (min-width: 1280px) {
  .package-card {
    padding: 1.5rem;
  }
}

/* Animated bottom bar on Best For box — expands left-to-right on hover */
.package-card__best-for {
  position: relative;
  overflow: hidden;
}

.package-card__best-for::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--color-brand-dark);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.package-card:hover .package-card__best-for::after,
.package-card.is-touched .package-card__best-for::after {
  transform: scaleX(1);
}

/* Bar stays on the last-highlighted card */
.package-card.is-highlighted .package-card__best-for::after {
  transform: scaleX(1);
}

/* --- V2: Replace pill badge with top border accent --- */
.package-card--featured::before {
  display: none !important;        /* hide the old "Most Popular" pill */
}

.package-card--featured {
  border-top: 3px solid var(--color-brand-dark);
}

/* Inline "Popular" label next to name */
.package-card__popular-tag {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--color-brand-dark);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--color-brand-subtle);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  margin-left: 0.35rem;
  vertical-align: middle;
  position: relative;
  top: -0.1em;
}

/* Name row — bolder for readability */
.package-card__name {
  align-self: end;
  font-weight: 700;
}

/* Price row */
.package-card__price {
  align-self: start;
  margin-bottom: var(--space-sm);
}

/* Best-For row */
.package-card__best-for {
  background: var(--color-brand-subtle);
  border-left: none;
  padding: 0.625rem 0.75rem;
  margin: 0 0 var(--space-sm) 0;
  border-radius: var(--radius-sm);
  min-height: 5.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  align-self: start;
}

.package-card__best-for-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-brand-dark);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.25rem;
  text-align: center;
}

.package-card__best-for p {
  font-size: var(--text-xs);
  color: var(--color-dark-gray);
  margin: 0;
  line-height: 1.45;
}

/* Features row */
.package-card__features {
  align-self: start;
}

.package-card__feature {
  word-break: normal;
  font-size: 1rem;
}

/* Button row */
.package-card .btn {
  align-self: end;
  margin-top: var(--space-sm);
  white-space: nowrap;
  font-size: var(--text-sm);
}

/* --- Subgrid alignment (modern browsers) --- */
@supports (grid-template-rows: subgrid) {
  #packages .grid--4,
  .section--lg .grid--4 {
    grid-template-rows: repeat(5, auto);
    align-items: stretch;
  }

  #packages .grid--4 > .package-card,
  .section--lg .grid--4 > .package-card {
    grid-row: span 5;
    grid-template-rows: subgrid;
  }
}

/* --- Mobile --- */
@media (max-width: 640px) {
  .package-card__best-for {
    min-height: auto;
    text-align: left;
  }

  .package-card__best-for-label {
    text-align: left;
  }

  .package-card__name,
  .package-card__price {
    text-align: left;
  }
}


/* ==========================================================================
   V2.0 — A LA CARTE ADD-ON CARDS
   ========================================================================== */

/* Force 3 equal columns */
.feature-list {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1rem;
}

/* Clearly defined card boxes */
.feature-item {
  border: 1px solid var(--color-light-gray);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  min-height: 7rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.feature-item:hover {
  border-color: var(--color-brand-dark);
  box-shadow: var(--shadow-md);
}

/* Icon proportional to text */
.feature-item__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

/* Match home page sizing conventions */
.feature-item__title {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 0.25rem;
}

.feature-item__desc {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-gray);
}

/* Mobile: 1 column */
@media (max-width: 768px) {
  .feature-list {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   V2.0 — SERVICE CARD Eyebrow Label
   ========================================================================== */

.service-card__eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-brand-dark);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-sm);
}

/* ==========================================================================
   V2.4 — PACKAGE CARD TEXT ALIGNMENT
   ========================================================================== */

/* Package name and price — centered */
.package-card__name,
.package-card__price {
  text-align: center;
}

/* Features — left-aligned so wrapped text reads cleanly */
.package-card__features {
  text-align: left;
}


/* ==========================================================================
   V2.4 — TYPE SCALE (further bump for older-eye readability)
   xs/sm get the biggest lift; larger sizes get a modest bump.
   ========================================================================== */

:root {
  --text-xs:   clamp(0.875rem,  0.82rem + 0.28vw,  1rem);       /* was 0.78–0.9   */
  --text-sm:   clamp(1rem,      0.95rem + 0.28vw,  1.125rem);   /* was 0.9375–1.0625 */
  --text-base: clamp(1.125rem,  1.0625rem + 0.31vw, 1.3125rem); /* was 1.0625–1.25 */
  --text-lg:   clamp(1.25rem,   1.175rem + 0.38vw,  1.5rem);    /* was 1.2–1.45   */
  --text-xl:   clamp(1.4375rem, 1.3rem + 0.63vw,    1.6875rem); /* was 1.375–1.625 */
  --text-2xl:  clamp(1.6875rem, 1.5rem + 0.88vw,    2.1875rem); /* was 1.625–2.125 */
  --text-3xl:  clamp(1.875rem,  1.65rem + 1.13vw,   2.375rem);
  --text-4xl:  clamp(2.125rem,  1.875rem + 1.25vw,  2.875rem);
  --text-5xl:  clamp(2.625rem,  2.125rem + 2.5vw,   3.625rem);
}


/* ==========================================================================
   V2.4 — HERO SLIDER: replace hard-coded px with design system vars
   ========================================================================== */

.hero-slider__eyebrow-text {
  font-size: var(--text-xs);
}

.hero-slider__subtext {
  font-size: var(--text-base);
}

.hero-slider__btn-primary,
.hero-slider__btn-secondary {
  font-size: var(--text-sm);
}

.hero-slider__counter {
  font-size: var(--text-sm);
}

.hero-slider__faa-text {
  font-size: var(--text-xs);
}

/* Mobile CTA button — use system variable */
@media (max-width: 1280px) {
  .nav-primary__list .mobile-cta-wrapper .btn {
    font-size: var(--text-base);
  }
}

/* ==========================================================================
   V2.4 — FAQ SIZING (match home page conventions)
   ========================================================================== */

.faq-item__question {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
}

.faq-item__answer,
.faq-item__answer p {
  font-size: var(--text-base);
  line-height: 1.7;
}

/* ==========================================================================
   V2.4 — HARD-CODED SMALL TEXT FIXES
   Several specific elements used fixed rem values too small for older eyes.
   ========================================================================== */


/* A la carte descriptions — uses same var(--text-sm) as home page */
.feature-item__desc {
  line-height: 1.5;
}


/* ==========================================================================
   V2.4 — NAV + HEADER BUTTON SIZE OVERRIDES
   ========================================================================== */

@media (min-width: 1281px) {
  .nav-primary__link {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
  }
}

@media (min-width: 1400px) {
  .nav-primary__link {
    font-size: 0.9375rem !important;
  }

  .nav-cta .btn--sm {
    padding: 0.5rem 1.25rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
  }
}


/* ==========================================================================
   V2.4.1 — ENHANCED EDITING PAGE: BADGES + FEATURE GRIDS
   Replaced inline styles with proper responsive CSS
   ========================================================================== */

/* Badges row — wraps and stacks on mobile */
.editing-badges-row {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}

.editing-badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--color-brand-subtle);
  border: 1.5px solid var(--color-brand);
  border-radius: var(--radius-full);
  padding: 0.75rem 1.5rem;
}

.editing-badge__text {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-brand-deeper);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

@media (max-width: 640px) {
  .editing-badges-row {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }

  .editing-badge {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 0.75rem 1rem;
  }
}

/* Centered feature variant — used on enhanced editing page */
.feature-item--centered {
  flex-direction: column;
  text-align: center;
  align-items: center;
}

.feature-item--centered .feature-item__icon {
  margin-bottom: 0.75rem;
}

/* Feature callout grids — 3-col and 2-col, responsive */
.editing-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.editing-features-grid--2col {
  grid-template-columns: 1fr 1fr;
  margin-top: var(--space-md);
}

@media (max-width: 768px) {
  .editing-features-grid {
    grid-template-columns: 1fr;
  }

  .editing-features-grid--2col {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   V2.4.1 — DRONE PAGE: SERVICE CHECKLIST
   Replaces inline-styled list with proper CSS
   ========================================================================== */

.service-checklist {
  margin-top: var(--space-md);
}

.service-checklist h4 {
  margin-bottom: var(--space-sm);
}

.service-checklist__list {
  list-style: none;
  padding: 0;
}

.service-checklist__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
  font-size: var(--text-sm);
  color: var(--color-dark-gray);
}

.service-checklist__list li::before {
  content: "✓";
  color: var(--color-brand-dark);
  font-weight: 700;
  flex-shrink: 0;
}

/* ==========================================================================
   V2.4.1 — MOBILE POLISH
   Additional responsive refinements for deployment
   ========================================================================== */

/* Service hero — more breathing room on smallest screens */
@media (max-width: 480px) {
  .service-hero {
    padding-top: 90px;
    min-height: 30vh;
  }

  .service-hero__title {
    font-size: var(--text-3xl);
  }

  .service-hero__subtitle {
    font-size: var(--text-base);
  }
}

/* Hero slider — prevent text clipping on very small screens */
@media (max-width: 380px) {
  .hero-slider__content {
    padding: 0 16px 36px;
  }

  .hero-slider__headline {
    font-size: clamp(26px, 7.5vw, 36px);
  }

  .hero-slider__subtext {
    font-size: var(--text-sm);
  }

  .hero-slider__btn-primary,
  .hero-slider__btn-secondary {
    padding: 12px 20px;
    font-size: var(--text-xs);
  }
}

/* Stats bar — prevent text cutoff on small screens */
@media (max-width: 480px) {
  .stats-bar__grid {
    grid-template-columns: 1fr;
  }

  .stats-bar__item {
    flex-direction: row;
    text-align: left;
  }
}

/* Footer grid — prevent cramped layout on tablet */
@media (max-width: 1024px) and (min-width: 769px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Sticky mobile CTA — safe area for phones with gesture bars */
@media (max-width: 767px) {
  .sticky-mobile-cta {
    padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
  }

  /* Add bottom padding to body so content isn't hidden behind sticky bar */
  body.has-sticky-mobile-cta {
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  }
}

/* CTA banner form — prevent field overflow on smallest screens */
@media (max-width: 380px) {
  .cta-unified {
    padding: 1.25rem 1rem !important;
  }

  .cta-unified .btn {
    font-size: var(--text-xs) !important;
    padding: 0.875rem 0.75rem !important;
  }
}

/* Package cards — prevent feature text wrapping issues on tablet */
@media (max-width: 1024px) and (min-width: 821px) {
  .package-card__feature {
    font-size: var(--text-sm);
    padding: 0.5rem 0;
  }
}

/* V2.4.2 — Package cards: responsive grid overrides
   4-col → 2-col at ≤1200px  (base CSS only does this at 1024px, too cramped for packages)
   2-col → 1-col at ≤820px   (base CSS only does this at 640px, too cramped for packages) */
@media (max-width: 1200px) {
  #packages .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 820px) {
  #packages .grid--4 {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-inline: auto;
  }
}

/* Before/after grid — stack cleanly on mobile with gap */
@media (max-width: 640px) {
  .before-after-grid {
    gap: var(--space-sm);
  }
}

/* Services page feature-split — image gets proper aspect on mobile */
@media (max-width: 768px) {
  .feature-split__media {
    aspect-ratio: 16/10;
    max-height: 300px;
  }
}

/* Contact layout — give form more room on mobile */
@media (max-width: 768px) {
  .contact-form-column,
  .contact-info-column {
    padding: var(--space-md);
  }
}

/* FAQ — prevent question text being clipped by the + icon */
.faq-item__question {
  gap: var(--space-sm);
}

/* ==========================================================================
   V2.3.1 — TYPOGRAPHY REFINEMENTS (Anthropic-inspired)
   ========================================================================== */

/* Balanced line breaks on headings — eliminates orphaned single words */
h1,
h2,
h3,
h4,
.eyebrow,
.lead,
.service-hero__title,
.service-hero__subtitle,
.hero-slider__headline,
.hero-slider__subtext {
  text-wrap: balance;
}

/* Prettier paragraph wrapping — avoids lone words on final line */
p {
  text-wrap: pretty;
}

/* Eyebrow letter-spacing: ease back from 0.2em → 0.12em.
   0.2em is visually aggressive at small sizes; 0.12em reads cleanly
   while still clearly signalling an uppercase label. */
.eyebrow {
  letter-spacing: 0.12em;
}

/* Constrain lead paragraph width in centered section headers
   so it reads as a comfortable column (~54 characters wide),
   matching the restrained long-form column style of Anthropic's blog. */
.section-header--center .lead {
  max-width: 54ch;
  margin-inline: auto;
}

/* Mobile: prevent browser auto-hyphens */
@media (max-width: 640px) {
  p,
  .lead {
    hyphens: none;
    -webkit-hyphens: none;
    overflow-wrap: break-word;
  }
}