/* ============================================================
   YPC MASTER STYLESHEET — styles.css
   Your Phones Covered | yourphonescovered.com.au
   Import fonts on every page before this file:
   <link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
   ============================================================ */


/* ============================================================
** DESIGN TOKENS
   All brand colours, shadows, spacing and radius live here.
   Change a value once — updates everywhere.
   ============================================================ */
:root {
  /* ** Brand colours */
  --blue:      #0c71c3;   /* Primary brand — nav, buttons, accents */
  --blue-dk:   #0a5da0;   /* Darker blue — hover states */
  --blue-lt:   #e6f2fb;   /* Light blue tint — backgrounds, hover fills */
  --orange:    #e8a020;   /* CTAs, eyebrow badges, price highlights */
  --orange-lt: #fef3e0;   /* Light orange tint — backgrounds */
  --green:     #2e8b4a;   /* Form submit buttons, tick icons, success states */
  --green-lt:  #3aad5e;   /* Lighter green — hover states */

  /* ** Neutral greys */
  --off-white: #f8f9fc;   /* Page section alternating background */
  --grey-100:  #f0f2f7;   /* Light card backgrounds, pill backgrounds */
  --grey-200:  #e2e6ef;   /* Borders, dividers */
  --grey-400:  #9aa5bc;   /* Muted labels, placeholders */
  --grey-700:  #3d4f6b;   /* Body text on light backgrounds */
  --text:      #1a2a40;   /* Default dark text */

  /* ** Layout */
  --max-w:     1340px;    /* Max content width */
  --r:         8px;       /* Default border radius */

  /* ** Shadows — sm for subtle, md for cards, lg for modals/forms */
  --shadow-sm: 0 1px 4px rgba(15,31,61,.07);
  --shadow-md: 0 4px 20px rgba(15,31,61,.10);
  --shadow-lg: 0 12px 48px rgba(15,31,61,.14);
}


/* ============================================================
** RESET
   Normalise browser defaults.
   ============================================================ */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { font-family: 'Inter', sans-serif; color: var(--text); background: #fff; line-height: 1.65; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4,h5 { font-family: 'Sora', sans-serif; line-height: 1.15; letter-spacing: -.02em; }


/* ============================================================
** TYPOGRAPHY SCALE
   Base font size shifts per breakpoint — all rem values scale with it.
   32" monitor (1920px+): 17px
   Standard desktop (1440px): 16px
   Laptop / tablet (1280px): 15px
   Mobile (768px): 15px
   Small mobile (<480px): 14px
   ============================================================ */
html { font-size: 16px; }
@media (min-width: 1600px)  { html { font-size: 17px; } }
@media (max-width: 1280px)  { html { font-size: 15px; } }
@media (max-width: 480px)   { html { font-size: 14px; } }


/* ============================================================
** LAYOUT
   Wrapper, section padding and alternating backgrounds.
   ============================================================ */
.wrap    { max-width: var(--max-w); margin: 0 auto; padding: 0 40px; }
.sec     { padding: 80px 0; }
.sec-alt { background: var(--off-white); } /* ** Alternate section background */

/* ** Section labels — small uppercase line above headings */
.lbl { display: inline-flex; align-items: center; gap: 6px; font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; }
.lbl::before { content: ''; width: 18px; height: 2px; background: var(--blue); border-radius: 1px; }

/* ** Section headings and intro paragraph */
.sec-h { font-size: clamp(1.375rem, 2.8vw, 2.375rem); font-weight: 800; margin-bottom: 14px; }
.sec-p { font-size: 1rem; color: var(--grey-700); line-height: 1.75; max-width: 660px; margin-bottom: 44px; }


/* ============================================================
** NAV
   Sticky white nav with dropdowns. Edit nav.html to change links.
   ============================================================ */
nav { background: #fff; border-bottom: 1px solid var(--grey-200); position: sticky; top: 0; z-index: 200; box-shadow: var(--shadow-sm); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 0 40px; height: 64px; width: 100%; }
.nav-logo img { height: 54px; width: auto; mix-blend-mode: multiply; }

/* ** Nav menu items */
.nav-menu { display: flex; list-style: none; align-items: center; gap: 2px; }
.nav-menu > li { position: relative; }
.nav-menu > li > a { display: flex; align-items: center; gap: 4px; font-size: .9375rem; font-weight: 500; color: var(--grey-700); padding: 8px 15px; border-radius: 6px; transition: background .15s, color .15s; white-space: nowrap; }
.nav-menu > li > a:hover,
.nav-menu > li:hover > a { background: var(--grey-100); color: var(--blue); }
.nav-menu > li > a .arr { font-size: .625rem; opacity: .5; transition: transform .2s; }
.nav-menu > li:hover > a .arr { transform: rotate(180deg); }

/* ** Dropdown panels */
.dropdown { position: absolute; top: calc(100% + 8px); left: 0; background: #fff; border: 1.5px solid var(--grey-200); border-radius: 10px; box-shadow: var(--shadow-lg); min-width: 220px; padding: 8px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s, visibility .2s; z-index: 300; }
.nav-menu > li:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a { display: block; padding: 9px 12px; font-size: .9375rem; color: var(--grey-700); border-radius: 6px; font-weight: 500; transition: background .15s, color .15s; }
.dropdown a:hover { background: var(--blue-lt); color: var(--blue); }

/* ** Nav CTA button — orange, top right */
.nav-cta { background: #c97d0a !important; color: #fff !important; font-weight: 700 !important; padding: 9px 18px !important; border-radius: var(--r) !important; }
.nav-cta:hover { background: #a86509 !important; }

/* ** Mobile hamburger — hidden on desktop, shown on mobile */
.nav-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; border: none; background: none; }
.nav-hamburger span { display: block; width: 22px; height: 2px; background: var(--grey-700); border-radius: 2px; transition: all .25s; }


/* ============================================================
** HEADER BAR
   Blue bar above nav. Left: phone/CTA. Right: city grid.
   ============================================================ */
.header-bar { background: var(--blue); padding: 0; }
.header-bar-inner { display: grid; grid-template-columns: 2fr 4fr; align-items: stretch; width: 100%; padding: 0 0 0 20px; }

/* ** Left side — Talk to an expert + phone number */
.header-expert { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 4.5px 24px 4.5px 0; text-align: center; }
.header-expert .talk  { font-family: 'Sora', sans-serif; font-size: 1.125rem; font-weight: 700; color: #fff; letter-spacing: .02em; }
.header-expert .talk span { color: var(--orange); }
.header-expert .phone { font-family: 'Sora', sans-serif; font-size: 1.0625rem; font-weight: 800; color: #5dd98a; letter-spacing: .02em; margin-top: 2px; }

/* ** Right side — 8 city links in a 4-column grid */
.header-cities { display: grid; grid-template-columns: repeat(4,1fr); padding: 3px 6px; align-items: center; }
.header-cities a { font-size: .9375rem; color: rgba(255,255,255,.85); white-space: nowrap; padding: 3px 6px; transition: color .15s; font-weight: 500; text-align: center; display: flex; align-items: center; justify-content: center; gap: 4px; }
.header-cities a:hover { color: #fff; }
.header-cities strong { color: #fff; font-weight: 700; }


/* ============================================================
** HERO
   Full-width dark hero with background image + overlay.

   OVERLAY NOTE:
   .hero-overlay has NO gradient set here — it is set per-page
   in each page's own <style> block so each image can be tuned.

   Per-page template to paste into each page <style> block:
   .hero-overlay {
     background: linear-gradient(
       110deg,
       rgba(10,18,38,.94) 0%,    ** Left edge — fully dark
       rgba(10,18,38,.86) 38%,   ** Mid-left — still dark for text
       rgba(10,18,38,.30) 68%,   ** Mid-right — starting to reveal image
       transparent 100%          ** Right edge — full image
     );
   }
   Increase opacity values to darken. Move % stops to shift the fade.
   ============================================================ */
.hero { position: relative; min-height: 85vh; display: flex; align-items: center; overflow: hidden; background: #0a1220; }

/* ** Background image layer — opacity controls image brightness globally */
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center right; opacity: 1; }

/* ** Overlay layer — gradient set per-page, not here */
.hero-overlay { position: absolute; inset: 0; }

/* ** Hero content wrapper */
.hero-wrap { position: relative; z-index: 2; max-width: var(--max-w); margin: 0 auto; padding: 100px 40px; display: flex; flex-direction: column; align-items: flex-start; width: 100%; }

/* ** Eyebrow badge — orange pill above H1 */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; background: rgba(232,160,32,.12); border: 1px solid rgba(232,160,32,.35); color: var(--orange); font-family: 'Sora', sans-serif; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 5px 15px; border-radius: 4px; margin-bottom: 20px; }
.eyebrow::before { content: ''; width: 5px; height: 5px; background: var(--orange); border-radius: 50%; }

/* ** Hero copy block — max width keeps text from stretching too wide */
.hero-copy { max-width: 680px; }
.hero-h1          { font-size: 1.125rem; font-weight: 600; color: rgba(255,255,255,.70); letter-spacing: .14em; margin-bottom: 14px; font-family: 'Inter', sans-serif; }
.hero-headline    { font-size: clamp(2rem, 3.8vw, 3.375rem); font-weight: 800; color: #fff; margin-bottom: 14px; line-height: 1.05; letter-spacing: -.03em; font-family: 'Sora', sans-serif; }
.hero-subheadline { font-size: .9375rem; color: var(--orange); margin-bottom: 24px; letter-spacing: .05em; font-weight: 500; font-family: 'Inter', sans-serif; }

/* ** Hero chips — small blue tag badges */
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.hero-chip  { background: rgba(12,113,195,.25); border: 1px solid rgba(12,113,195,.4); color: rgba(255,255,255,.85); font-size: .8125rem; font-weight: 600; padding: 6px 14px; border-radius: 4px; font-family: 'Sora', sans-serif; display: flex; align-items: center; gap: 7px; }

/* ** Hero bullet list — green tick circles */
.hero-bullets { list-style: none; margin-bottom: 26px; display: flex; flex-direction: column; gap: 9px; }
.hero-bullets li { display: flex; align-items: center; gap: 11px; color: rgba(255,255,255,.9); font-size: .90625rem; font-weight: 500; }
.hero-bullets li::before { content: '✓'; width: 20px; height: 20px; background: var(--green); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .6875rem; font-weight: 700; flex-shrink: 0; }

/* ** Hero trust row — stars + Google review badge */
.hero-trust { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.star { color: #fbbf24; font-size: 1.0625rem; }

/* ** Hero CTA buttons row */
.hero-cta-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }

/* ** Hero phone number */
.hero-phone { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.hero-phone a    { font-family: 'Sora', sans-serif; font-size: 1.625rem; font-weight: 700; color: #5dd98a; }
.hero-phone span { font-family: 'Sora', sans-serif; font-size: 1rem; font-weight: 700; color: rgba(255,255,255,.55); letter-spacing: .14em; text-transform: uppercase; }


/* ============================================================
** GOOGLE STARS BADGE
   Two versions — use class name to switch.
   Both share the same HTML block, just swap the class.

   TRANSPARENT version — for dark hero backgrounds:
   <a href="..." class="google-stars-transparent">

   WHITE version — for light/white section backgrounds:
   <a href="..." class="google-stars-white">

   HTML block (same for both — just change the class):
   <a href="https://www.google.com/search?q=Your+Phones+Covered+Reviews" target="_blank" class="google-stars-transparent">
     <div class="g-inner">
       <div class="g-top">
         <div class="g-num">4.9</div>
         <div class="g-stars"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
       </div>
       <div class="g-label">
         <svg viewBox="0 0 24 24" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
           <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
           <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
           <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z" fill="#FBBC05"/>
           <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
         </svg>
         Google Reviews
       </div>
     </div>
   </a>
   ============================================================ */

/* ** Shared base styles — apply to both versions */
.google-stars-transparent,
.google-stars-white {
  display: inline-flex;
  align-items: center;
  gap: 14px;               /* ** Gap between number block and stars/label block */
  padding: 12px 20px;
  border-radius: 10px;
  text-decoration: none;
  margin-top: 16px;        /* ** Override per page in page <style> block if needed */
  min-width: 200px;
}

/* ** Inner layout — stacks number+stars and label vertically */
.google-stars-transparent .g-inner,
.google-stars-white .g-inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ** Top row — number + stars side by side */
.google-stars-transparent .g-top,
.google-stars-white .g-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ** Rating number */
.google-stars-transparent .g-num,
.google-stars-white .g-num {
  font-family: 'Sora', sans-serif;
  font-size: 24px;         /* ** Size of the 4.9 number */
  font-weight: 800;
  line-height: 1;
}

/* ** Star row */
.google-stars-transparent .g-stars,
.google-stars-white .g-stars {
  display: flex;
  gap: 2px;
  align-items: center;
}
.google-stars-transparent .g-stars span,
.google-stars-white .g-stars span { color: #fbbf24; font-size: 24px; line-height: 1; } /* ** Yellow stars — same on both */

/* ** Label row — Google G SVG + "Google Reviews" text */
.google-stars-transparent .g-label,
.google-stars-white .g-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 18px;         /* ** "Google Reviews" label size */
  font-family: 'Inter', sans-serif;
}

/* ── TRANSPARENT VERSION — dark hero backgrounds ── */
.google-stars-transparent {
  background: rgba(255,255,255,.08);           /* ** Semi-transparent white background */
  border: 1px solid rgba(255,255,255,.15);     /* ** Subtle white border */
}
.google-stars-transparent .g-num   { color: #fff; }
.google-stars-transparent .g-label { color: rgba(255,255,255,.82); }

/* ── WHITE VERSION — light section backgrounds ── */
.google-stars-white {
  background: #fff;                            /* ** Solid white background */
  border: 1px solid var(--grey-200);           /* ** Light grey border */
  box-shadow: var(--shadow-sm);                /* ** Subtle shadow to lift off white page */
}
.google-stars-white .g-num   { color: var(--text); }
.google-stars-white .g-label { color: var(--grey-400); }


/* ============================================================
** BUTTONS
   Three variants: orange (primary CTA), green (form submit),
   ghost (secondary/outlined on dark backgrounds).
   ============================================================ */
.btn-orange { background: var(--orange); color: #fff; font-size: .9375rem; padding: 13px 28px; border-radius: var(--r); font-family: 'Sora', sans-serif; font-weight: 700; transition: background .2s; display: inline-block; }
.btn-orange:hover { background: #d08a10; }

.btn-green { background: var(--green-lt); color: #fff; font-size: .9375rem; padding: 13px 28px; border-radius: var(--r); font-family: 'Sora', sans-serif; font-weight: 700; transition: background .2s; display: inline-block; min-width: 260px; text-align: center; }
.btn-green:hover { background: var(--green); }

.btn-ghost  { background: transparent; color: rgba(255,255,255,.8); border: 1.5px solid rgba(255,255,255,.25); font-size: .9375rem; padding: 12px 22px; border-radius: var(--r); font-family: 'Sora', sans-serif; font-weight: 600; transition: border-color .2s; display: inline-block; }
.btn-ghost:hover  { border-color: rgba(255,255,255,.5); }


/* ============================================================
** PAIN / HIGHLIGHT BAND
   Blue full-width band below hero. 4 columns. No padding on wrap.
   ============================================================ */
.pain-band { background: var(--blue); }
.pain-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.pain-item { padding: 28px 32px; border-right: 1px solid rgba(255,255,255,.15); text-align: center; }
.pain-item:last-child { border-right: none; }
.pain-item .pi-icon { font-size: 1.75rem; margin-bottom: 10px; }
.pain-item h4 { font-family: 'Sora', sans-serif; font-size: .9375rem; font-weight: 700; color: #fff; margin-bottom: 5px; }
.pain-item p  { font-size: .8125rem; color: rgba(255,255,255,.65); line-height: 1.5; }


/* ============================================================
** CARD GRIDS
   4, 3, or 2 column layouts. Cards have hover lift effect.
   Add .card-blue / .card-orange / .card-green for top border accent.
   ============================================================ */
.card-grid   { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.card-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.card-grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }

.card { background: #fff; border: 1.5px solid var(--grey-200); border-radius: 12px; padding: 24px; transition: box-shadow .2s, border-color .2s, transform .2s; position: relative; }
.card:hover { box-shadow: var(--shadow-md); border-color: rgba(12,113,195,.25); transform: translateY(-2px); }
.card-icon { font-size: 1.75rem; margin-bottom: 14px; display: block; }
.card h3 { font-size: .9375rem; font-weight: 700; margin-bottom: 7px; }
.card p  { font-size: .875rem; color: var(--grey-700); line-height: 1.65; }

/* ** Coloured top border accents */
.card-blue   { border-top: 3px solid var(--blue); }
.card-orange { border-top: 3px solid var(--orange); }
.card-green  { border-top: 3px solid var(--green); }


/* ============================================================
** FEATURE LIST
   Tick list used in content sections. Blue tick circles.
   ============================================================ */
.feature-list { list-style: none; margin: 0; }
.feature-list li { display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--grey-100); font-size: .9375rem; color: var(--grey-700); line-height: 1.5; }
.feature-list li:last-child { border-bottom: none; }
.feature-list li::before { content: '✓'; width: 20px; height: 20px; background: var(--blue); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .625rem; font-weight: 700; flex-shrink: 0; margin-top: 2px; }


/* ============================================================
** PILLS / INTERNAL LINKS
   Pill tags for related links. .pill = static tag. .int-link = linked pill with arrow.
   ============================================================ */
.pill-wrap { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pill { background: var(--grey-100); border: 1px solid var(--grey-200); color: var(--grey-700); font-size: .8125rem; font-weight: 500; padding: 6px 14px; border-radius: 20px; transition: all .15s; font-family: 'Inter', sans-serif; }
.pill:hover { background: var(--blue-lt); color: var(--blue); border-color: rgba(12,113,195,.3); }

.int-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.int-link { display: inline-flex; align-items: center; gap: 5px; background: var(--grey-100); color: var(--blue); padding: 7px 14px; border-radius: 20px; font-size: .75rem; font-weight: 600; transition: background .2s; }
.int-link:hover { background: var(--grey-200); }
.int-link::after { content: '→'; font-size: .6875rem; }


/* ============================================================
** DARK PANEL
   Used in sidebars and feature callouts. Dark blue gradient box.
   ============================================================ */
.panel-dark { background: linear-gradient(135deg,#0d2240,#163362); border-radius: 14px; padding: 36px 32px; position: relative; overflow: hidden; }
.panel-dark::after { content: ''; position: absolute; bottom: -50px; right: -50px; width: 200px; height: 200px; background: radial-gradient(circle,rgba(232,160,32,.12) 0%,transparent 70%); border-radius: 50%; pointer-events: none; }
.panel-dark h4 { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); margin-bottom: 18px; opacity: .85; }
.panel-dark ul { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.panel-dark ul li { font-size: .9375rem; color: rgba(255,255,255,.8); padding: 9px 0 9px 18px; border-bottom: 1px solid rgba(255,255,255,.07); position: relative; }
.panel-dark ul li:last-child { border-bottom: none; }
.panel-dark ul li::before { content: '→'; position: absolute; left: 0; color: var(--orange); font-size: .75rem; top: 11px; }


/* ============================================================
** STATS BAR
   Blue full-width band. 4 stat items with numbers.
   ============================================================ */
.stats-bar { background: var(--blue); }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); max-width: var(--max-w); margin: 0 auto; padding: 0 40px; }
.stat-item { padding: 36px 24px; text-align: center; border-right: 1px solid rgba(255,255,255,.15); }
.stat-item:last-child { border-right: none; }
.stat-n { font-family: 'Sora', sans-serif; font-size: clamp(1.75rem, 3vw, 2.625rem); font-weight: 800; color: #fff; line-height: 1; margin-bottom: 6px; }
.stat-l { font-size: .875rem; color: rgba(255,255,255,.7); font-weight: 500; }


/* ============================================================
** REVIEWS
   Blue gradient review card. Used inline in content sections.
   ============================================================ */
.review { background: linear-gradient(135deg,var(--blue) 0%,var(--blue-dk) 100%); border-radius: 12px; padding: 24px; margin-top: 18px; }
.review p    { font-size: .875rem; line-height: 1.65; font-style: italic; color: rgba(255,255,255,.85); }
.review .who { margin-top: 10px; font-size: .6875rem; color: rgba(255,255,255,.5); font-style: normal; }


/* ============================================================
** CARD BADGES
   Small grey label badge. Used on pricing cards etc.
   ============================================================ */
.cb { background: var(--grey-100); border-radius: 4px; padding: 3px 8px; font-size: .625rem; font-weight: 700; color: var(--grey-400); font-family: 'Sora', sans-serif; }


/* ============================================================
** FINAL CTA BAND
   Dark blue gradient band at bottom of every page.
   Injected via footer.html / components.js.
   ============================================================ */
.final-cta { background: linear-gradient(135deg,#091628 0%,#0d2545 100%); padding: 80px 0; text-align: center; }
.final-cta h2 { font-size: clamp(1.75rem, 4vw, 3rem); color: #fff; font-weight: 800; margin-bottom: 12px; letter-spacing: -.02em; }
.final-cta h2 em { font-style: normal; color: var(--orange); }  /* ** em tag renders orange in headings */
.final-cta p { color: rgba(255,255,255,.6); font-size: 1rem; margin-bottom: 32px; max-width: 480px; margin-left: auto; margin-right: auto; line-height: 1.7; }
.cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.trust-row { margin-top: 22px; display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.trust-row span { color: rgba(255,255,255,.35); font-size: .75rem; font-weight: 500; }


/* ============================================================
** FOOTER
   Light blue footer. Edit footer.html — injected by components.js.
   ============================================================ */
footer { background: #e6f2fb; padding: 48px 0 0; }
.footer-grid { max-width: var(--max-w); margin: 0 auto; padding: 0 40px 48px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 48px; }
.footer-col h4 { font-size: .625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--grey-700); margin-bottom: 16px; font-family: 'Sora', sans-serif; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer-col ul li a { font-size: .84375rem; color: var(--grey-700); transition: color .2s; }
.footer-col ul li a:hover { color: var(--green-lt); }

/* ** Office address rows in footer brand column */
.office-row { display: flex; justify-content: space-between; font-size: .8125rem; padding: 7px 0; border-bottom: 1px solid var(--grey-700); color: var(--grey-700); }
.office-row:last-child { border-bottom: none; }
.office-row strong { color: var(--grey-700); font-weight: 600; }

/* ** Footer bottom bar — copyright + legal links */
.footer-bar { border-top: 1px solid var(--grey-700); padding: 18px 40px; max-width: var(--max-w); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; font-size: .71875rem; color: var(--grey-700); flex-wrap: wrap; gap: 10px; }
.footer-bar a { color: var(--grey-700); }
.footer-bar a:hover { color: var(--green-lt); }


/* ============================================================
** TOC — TABLE OF CONTENTS
   SEO only. Sticky on desktop. Hidden on mobile.
   ============================================================ */
.toc { background: #fff; border: 1.5px solid var(--grey-200); border-radius: 12px; padding: 20px 24px; position: sticky; top: 76px; }
.toc h4 { font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--grey-400); margin-bottom: 14px; }
.toc ul { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.toc ul li a { font-size: .875rem; color: var(--grey-700); padding: 5px 8px; border-radius: 5px; display: block; transition: background .15s, color .15s; font-weight: 500; }
.toc ul li a:hover { background: var(--blue-lt); color: var(--blue); }


/* ============================================================
** FAQ ACCORDION
   Controlled by components.js — toggles .open class on click.
   ============================================================ */
.faq-item { border-bottom: 1px solid var(--grey-200); }
.faq-q { width: 100%; text-align: left; padding: 18px 0; font-size: 1rem; font-weight: 600; font-family: 'Sora', sans-serif; color: var(--text); background: none; border: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq-q .arr { font-size: .75rem; color: var(--grey-400); transition: transform .25s; flex-shrink: 0; }
.faq-item.open .faq-q .arr { transform: rotate(180deg); }
.faq-a { display: none; padding: 0 0 18px; font-size: .9375rem; color: var(--grey-700); line-height: 1.75; }
.faq-item.open .faq-a { display: block; }


/* ============================================================
** PROCESS STEPS
   Numbered steps with blue circle numbers.
   ============================================================ */
.steps { display: flex; flex-direction: column; gap: 0; }
.step { display: flex; gap: 20px; align-items: flex-start; padding: 24px 0; border-bottom: 1px solid var(--grey-100); }
.step:last-child { border-bottom: none; }
.step-n { width: 36px; height: 36px; background: var(--blue); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1rem; flex-shrink: 0; }
.step-body h4 { font-size: 1rem; font-weight: 700; margin-bottom: 5px; }
.step-body p  { font-size: .9375rem; color: var(--grey-700); line-height: 1.65; }


/* ============================================================
** FORMS
   White card form. 460px wide. Green submit button.
   Formspree endpoint: https://formspree.io/f/mvzbnkar
   Only add forms when John explicitly requests them.
   ============================================================ */
.form-card { background: #fff; border-radius: 12px; padding: 32px; box-shadow: var(--shadow-lg); width: 460px; max-width: 100%; }
.form-card h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: 6px; }
.form-card .sub { font-size: .8125rem; color: var(--grey-400); margin-bottom: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } /* ** Two column layout for name fields */
.form-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.form-group label { font-size: .75rem; font-weight: 600; color: var(--grey-700); text-transform: uppercase; letter-spacing: .06em; }
.form-group input,
.form-group textarea,
.form-group select { padding: 12px 15px; font-size: .9375rem; border: 1.5px solid var(--grey-200); border-radius: var(--r); font-family: 'Inter', sans-serif; color: var(--text); transition: border-color .2s; }
.form-group input:focus,
.form-group textarea:focus { outline: none; border-color: var(--blue); }
.form-group textarea { min-height: 80px; resize: vertical; }
.form-consent { font-size: .75rem; color: var(--grey-400); line-height: 1.5; display: flex; gap: 8px; align-items: flex-start; margin-bottom: 14px; }
.form-consent input { margin-top: 3px; flex-shrink: 0; }
.form-submit { width: 100%; background: var(--green); color: #fff; font-family: 'Sora', sans-serif; font-weight: 700; font-size: .9375rem; padding: 14px; border-radius: var(--r); border: none; cursor: pointer; transition: background .2s; }
.form-submit:hover { background: #236b39; }
.card-symbols { display: flex; gap: 5px; margin-top: 12px; justify-content: center; }


/* ============================================================
** RESPONSIVE BREAKPOINTS
   ============================================================ */

/* ** Large desktop — 32" monitors 1600px+ */
@media (min-width: 1600px) {
  .card-grid { gap: 22px; }
  .card { padding: 28px; }
}

/* ** Tablet / small laptop — up to 1080px */
@media (max-width: 1080px) {
  .card-grid          { grid-template-columns: repeat(2,1fr); }
  .pain-grid          { grid-template-columns: repeat(2,1fr); }
  .stats-grid         { grid-template-columns: repeat(2,1fr); }
  .header-bar-inner   { grid-template-columns: 180px 1fr; }
  .footer-grid        { grid-template-columns: 1fr 1fr; }
}

/* ** Mobile — up to 768px */
@media (max-width: 768px) {
  .wrap               { padding: 0 20px; }
  .nav-inner          { padding: 0 20px; }
  .hero-wrap          { padding: 60px 20px; }
  .nav-menu           { display: none; }          /* ** Hidden — hamburger shown instead */
  .nav-hamburger      { display: flex; }
  .header-cities      { display: none; }          /* ** City grid hidden on mobile */
  .header-bar-inner   { grid-template-columns: 1fr; }
  .card-grid          { grid-template-columns: 1fr; }
  .card-grid-3        { grid-template-columns: 1fr; }
  .card-grid-2        { grid-template-columns: 1fr; }
  .pain-grid          { grid-template-columns: 1fr 1fr; }
  .stats-grid         { grid-template-columns: 1fr 1fr; padding: 0 20px; }
  .footer-grid        { grid-template-columns: 1fr; }
  .footer-bar         { padding: 18px 20px; }
  .toc                { display: none; }          /* ** TOC hidden on mobile */
  .form-row           { grid-template-columns: 1fr; }
  .sec                { padding: 56px 0; }
}

/* ** Small mobile — up to 480px */
@media (max-width: 480px) {
  .pain-grid          { grid-template-columns: 1fr; }
  .hero-copy h2       { font-size: 1.875rem; }
  .cta-btns           { flex-direction: column; align-items: center; }
  .hero-cta-row       { flex-direction: column; align-items: flex-start; }
}