/* Mobile CSS - Non-destructive responsive overrides */
/* Applied only on screens ≤640px */

/* Base mobile container padding */
.container,
.section,
.hero { 
  padding-inline: clamp(16px, 4vw, 24px);
}

/* Header / nav: prevent overflow & keep CTA visible */
.navbar {
  position: sticky; 
  top: 0;
  padding-block: 10px;
}

.navbar .container {
  display: flex; 
  align-items: center; 
  justify-content: space-between;
  gap: 8px;
}

.nav-brand { 
  flex: 1 1 auto; 
  min-width: 0; 
}

.nav-brand .brand-logo,
.nav-brand img,
.nav-brand span { 
  max-width: 100%; 
  height: auto; 
}

.nav-menu { 
  flex: 0 0 auto; 
}

.nav-menu .btn { 
  padding: 10px 14px; 
  border-radius: 14px; 
}

/* Hero spacing and headline sizing/wrapping */
.hero { 
  padding-top: 24px;               /* reduce excess top whitespace */
  padding-bottom: 28px;
}

.hero h1 {
  /* Scale responsibly: big but not overflowing */
  font-size: clamp(28px, 7.5vw, 40px);
  line-height: 1.08;
  letter-spacing: 0;
  word-break: normal;
  overflow-wrap: anywhere; /* allows graceful wrap on long words */
  hyphens: auto;           /* avoid awkward breaks */
  margin: 0 0 14px 0;
}

.hero .hero-subtitle,
.hero p.lead {
  font-size: clamp(16px, 3.8vw, 19px);
  line-height: 1.45;
  margin: 0 0 18px 0;
}

/* CTA buttons: stack, full-width, comfortable tap targets */
.hero-cta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.hero .btn {
  width: 100%;
  min-height: 48px;             /* Apple HIG friendly tap target */
  font-weight: 600;
}

/* Cards/sections below the fold (general safe defaults) */
.section h2 { 
  font-size: clamp(22px, 5.8vw, 28px); 
  line-height: 1.15; 
}

.section p { 
  font-size: clamp(15px, 3.6vw, 18px); 
  line-height: 1.5; 
}

/* Footer spacing */
footer { 
  padding-block: 20px; 
}

/* Avoid layout shift on iOS safe areas */
:root { 
  --safe: env(safe-area-inset-bottom);
}

body { 
  padding-bottom: max(0px, var(--safe)); 
}

/* --- Hard stop against horizontal scroll on mobile --- */
html, body { max-width: 100%; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
.container { width: 100%; max-width: 100%; }

/* --- HERO: collapse any desktop two-column layout --- */
.hero .hero-content { 
  display: flex; 
  flex-direction: column; 
  gap: 20px;
}
.hero .hero-text,
.hero .hero-image { width: 100%; }
.hero-image, .lead-magnet { margin: 0; padding: 0; }

/* Brevo box sometimes enforces a fixed max-width:540px; make it fluid */
.lead-magnet #sib-container,
.lead-magnet .sib-container--large {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
.lead-magnet .sib-form { max-width: 100% !important; overflow: hidden; }
.lead-magnet input, 
.lead-magnet button { font-size: 16px; } /* prevent iOS zoom */

/* --- Client logos: ensure wrapping and no overflow --- */
.client-logos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.client-logos .logo-img { width: 100%; height: auto; }

/* --- General grids/cards below the fold --- */
.services-grid, .case-studies-grid, .testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* ---------- Mobile header / hamburger polish (≤640px) ---------- */
:root { --brand-orange: #bc4c36; }

/* Allow a second row so the menu can drop below the brand */
.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;               /* ensures a clean two-row layout */
}

.nav-brand { order: 1; flex: 1 1 auto; min-width: 0; }
.nav-brand .brand-logo { text-decoration: none; }

/* Hamburger: force 3 orange bars; use both spans and a fallback */
.nav-toggle {
  order: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 0; border-radius: 10px;
  background: transparent;
  color: var(--brand-orange);
  position: relative;
  z-index: 2;
}
.nav-toggle:focus { outline: 2px solid rgba(188,76,54,.25); outline-offset: 2px; }
.nav-toggle-bar {
  display: block;
  width: 22px; height: 2px;
  margin: 3px 0;
  background: currentColor;      /* orange */
  border-radius: 2px;
}
/* Fallback in case spans are hidden by any global CSS */
.nav-toggle::before, .nav-toggle::after {
  content: "";
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 22px; height: 2px; background: currentColor; border-radius: 2px;
}
.nav-toggle::before { top: 11px; }
.nav-toggle::after  { bottom: 11px; }
/* Middle bar via gradient so we ALWAYS show three bars */
.nav-toggle { 
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(transparent, transparent); /* placeholder */
  background-size: 22px 2px, 0 0;
  background-repeat: no-repeat;
  background-position: center;   /* middle bar */
}

/* Menu: hidden by default, full-width on its own row when open */
.nav-menu {
  order: 3;
  flex-basis: 100% !important;   /* override earlier flex:0 0 auto */
  width: 100%;
  display: none;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 0 10px;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.nav-menu.is-open { display: flex; }

.nav-link { padding: 10px 6px; border-radius: 10px; }
.nav-menu .btn { align-self: flex-start; padding: 10px 14px; border-radius: 14px; }

.nav-menu.is-open .nav-link { display:block !important; visibility:visible !important; opacity:1 !important; height:auto !important; padding:12px 6px; border-radius:10px; }
.nav-menu.is-open .nav-link + .nav-link { border-top:1px solid rgba(0,0,0,.06); margin-top:4px; padding-top:12px; }
.nav-menu { z-index:10; background:transparent; }
.nav-menu .btn { align-self:flex-start; }

/* Center the Get Started button in mobile nav */
.nav-menu.is-open .btn {
  align-self: center !important;
  margin: 12px 0;
}

/* Vertical space for the lead-magnet card on phones */
.hero .lead-magnet { margin-block: clamp(24px, 5vw, 36px); }

/* Internal padding + rounded corners for the Brevo container */
.lead-magnet #sib-container.sib-container--large {
  padding: 18px 16px !important;
  border-radius: 16px !important;
}

/* Put emoji and title inline, centered vertically */
.service-card .service-icon,
.service-card h3 { display: inline-flex; align-items: center; vertical-align: middle; }
.service-card .service-icon { margin-right: 8px; }
.service-card .service-icon span { font-size: 26px; line-height: 1; }
.service-card h3 { margin: 0 0 8px 0; }

/* Lead magnet — tighter typography for headings on phones */
.lead-magnet #sib-container .sib-form-block:first-of-type p {
  /* Main headline: aim for ~2 lines on 375–430px widths */
  font-size: clamp(20px, 5.6vw, 24px) !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  margin: 0 0 6px 0 !important;
}

.lead-magnet #sib-container .sib-form-block:nth-of-type(2) p {
  /* Subheading: aim for a single line on common iPhone widths */
  font-size: clamp(15px, 4.2vw, 17px) !important;
  line-height: 1.25 !important;
  margin: 0 0 10px 0 !important;
  white-space: nowrap;           /* keep it one line when possible */
  overflow: hidden; text-overflow: ellipsis;
}

/* Keep the card breathing room we added earlier */
.hero .lead-magnet { margin-block: clamp(24px, 5vw, 36px); }

/* Title row sizing so long titles fit on one line */
.service-card h3 {
  font-size: clamp(18px, 5vw, 20px);
  line-height: 1.15;
  margin: 0 0 8px 0;
  white-space: nowrap;           /* prefer single line */
  overflow: hidden; text-overflow: ellipsis;
}