/* ================================================================
   style.css — Lokesh Sharma | Digital Marketing Jaipur
   Version: 1.0.0
   Description: Main stylesheet. Design tokens, reset, typography,
   layout, navbar, footer, all global & page-specific components.
   Load order: style.css → performance.css → script.js → enhancements.js
   ================================================================ */

/* ================================================================
   TABLE OF CONTENTS
   01. CSS Custom Properties (Design Tokens)
   02. Dark / Light Mode Tokens
   03. CSS Reset & Base
   04. Typography
   05. Layout Utilities
   06. Accessibility
   07. Buttons
   08. Navbar
   09. Footer
   10. Floating Elements (WhatsApp, Back-to-Top)
   11. Cookie Consent Banner
   12. Preloader
   13. Hero — Homepage (index.html)
   14. Ticker Strip
   15. Social Proof Bar
   16. About Preview
   17. Services Overview & Service Cards
   18. Why Choose Me
   19. Process Steps
   20. Testimonials
   21. Trust Badges
   22. FAQ Accordion
   23. Jaipur Local Section
   24. Lead Magnet
   25. CTA Banner
   26. Exit Intent Popup
   27. Page Hero (inner pages)
   28. About Page
   29. Services Page
   30. ROI Calculator
   31. Portfolio Page & Lightbox
   32. Blog Listing
   33. Blog Post (single)
   34. Contact Page
   35. Thank You Page
   36. Legal Pages (Privacy, Terms, Disclaimer)
   37. 404 Page
   38. Forms (global)
   39. Responsive — Tablet (max-width: 1024px)
   40. Responsive — Mobile (max-width: 768px)
   41. Responsive — Small Mobile (max-width: 480px)
   ================================================================ */

/* ================================================================
   01. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ================================================================ */

:root {
  /* --- Brand Colors --- */
  --color-bg: #0f1923; /* Dark navy — main background */
  --color-card: #1a2d42; /* Card / surface background */
  --color-card-hover: #1f3550; /* Slightly lighter on hover */
  --color-accent: #e8a838; /* Amber gold — primary CTA & accent */
  --color-accent-dark: #c98d25; /* Deeper gold for hover states */
  --color-accent-light: #f5c060; /* Lighter gold for subtle tints */
  --color-text-muted: #8899aa; /* Secondary / muted text */
  --color-text-light: #d8e4ee; /* Body text */
  --color-white: #ffffff;
  --color-border: rgba(232, 168, 56, 0.15); /* Subtle gold border */
  --color-border-muted: rgba(136, 153, 170, 0.2);
  --color-success: #4caf50;
  --color-error: #e53935;
  --color-verified: #66bb6a; /* FIX P2: was #2E7D32 (~2.8:1 contrast on card bg — WCAG AA fail). #66BB6A gives ~5.1:1 */

  /* --- Typography --- */
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "DM Sans", "Helvetica Neue", sans-serif;

  /* Font Sizes — fluid scale */
  --fs-xs: 0.75rem; /* 12px */
  --fs-sm: 0.875rem; /* 14px */
  --fs-base: 1rem; /* 16px */
  --fs-md: 1.125rem; /* 18px */
  --fs-lg: 1.25rem; /* 20px */
  --fs-xl: 1.5rem; /* 24px */
  --fs-2xl: 1.875rem; /* 30px */
  --fs-3xl: 2.25rem; /* 36px */
  --fs-4xl: 3rem; /* 48px */
  --fs-5xl: 3.75rem; /* 60px */
  --fs-6xl: 4.5rem; /* 72px */

  /* Font Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;

  /* Line Heights */
  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-base: 1.6;
  --lh-loose: 1.8;

  /* --- Spacing Scale --- */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem; /* 24px */
  --space-8: 2rem; /* 32px */
  --space-10: 2.5rem; /* 40px */
  --space-12: 3rem; /* 48px */
  --space-16: 4rem; /* 64px */
  --space-20: 5rem; /* 80px */
  --space-24: 6rem; /* 96px */
  --space-32: 8rem; /* 128px */

  /* --- Layout --- */
  --container-max: 1200px;
  --container-wide: 1400px;
  --gutter: clamp(1rem, 4vw, 2rem);

  /* --- Border Radius --- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.4);
  --shadow-gold: 0 8px 24px rgba(232, 168, 56, 0.25);
  --shadow-gold-lg: 0 16px 48px rgba(232, 168, 56, 0.3);

  /* --- Navbar --- */
  --navbar-height: 72px;
  --navbar-bg: rgba(15, 25, 35, 0.95);
  --navbar-blur: blur(12px);

  /* --- Z-index Scale --- */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-preloader: 9999;
}

/* ================================================================
   02. DARK / LIGHT MODE TOKENS
   Light mode overrides. Default is dark (no class needed).
   script.js adds class="light-mode" to <html> when toggled.
   ================================================================ */

html.light-mode {
  --color-bg: #f7f9fb;
  --color-card: #ffffff;
  --color-card-hover: #f0f4f8;
  --color-text-light: #0f1923; /* Body text becomes dark navy */
  --color-text-muted: #5a6b7c;
  --color-border: rgba(15, 25, 35, 0.1);
  --color-border-muted: rgba(15, 25, 35, 0.12);
  --navbar-bg: rgba(247, 249, 251, 0.95);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.15);
}

/* Skeleton shimmer adapts to light mode */
html.light-mode .skeleton {
  background: linear-gradient(90deg, #e8edf2 25%, #f3f6f9 50%, #e8edf2 75%);
}

/* ================================================================
   03. CSS RESET & BASE
   ================================================================ */

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Respect user preference for reduced motion — disable smooth scroll */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  background-color: var(--color-bg);
  color: var(--color-text-light);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  min-height: 100vh;
  overflow-x: hidden;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
  /* Padding top reserves space for fixed navbar */
  padding-top: var(--navbar-height);
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-accent);
}

ul,
ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--font-body);
}

input,
textarea,
select {
  font-family: var(--font-body);
  font-size: var(--fs-base);
}

/* Prevent ugly tap highlight on mobile */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Selection color */
::selection {
  background-color: var(--color-accent);
  color: var(--color-bg);
}

/* ================================================================
   04. TYPOGRAPHY
   ================================================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--color-white);
  letter-spacing: -0.01em;
}

html.light-mode h1,
html.light-mode h2,
html.light-mode h3,
html.light-mode h4,
html.light-mode h5,
html.light-mode h6 {
  color: var(--color-bg); /* Dark navy in light mode */
}

h1 {
  font-size: clamp(var(--fs-3xl), 5vw, var(--fs-5xl));
}
h2 {
  font-size: clamp(var(--fs-2xl), 3.5vw, var(--fs-4xl));
}
h3 {
  font-size: clamp(var(--fs-xl), 2.5vw, var(--fs-2xl));
}
h4 {
  font-size: var(--fs-xl);
}
h5 {
  font-size: var(--fs-lg);
}
h6 {
  font-size: var(--fs-base);
}

p {
  color: var(--color-text-light);
  line-height: var(--lh-base);
  margin-bottom: var(--space-4);
}

p:last-child {
  margin-bottom: 0;
}

strong {
  font-weight: var(--fw-semi);
  color: var(--color-white);
}

html.light-mode strong {
  color: var(--color-bg);
}

/* Gold accent text utility */
.text-accent {
  color: var(--color-accent);
}
.text-muted {
  color: var(--color-text-muted);
}
.text-white {
  color: var(--color-white);
}
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}

/* Section label / eyebrow text */
.section-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

/* Section title + subtitle block */
.section-header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.section-header h2 {
  margin-bottom: var(--space-4);
}

.section-header p {
  max-width: 600px;
  margin: 0 auto;
  color: var(--color-text-muted);
  font-size: var(--fs-md);
}

/* Reading progress bar (blog post) */
#reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background-color: var(--color-accent);
  z-index: var(--z-preloader);
  transition: width 0.1s linear;
}

/* ================================================================
   05. LAYOUT UTILITIES
   ================================================================ */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.container--wide {
  max-width: var(--container-wide);
}

section {
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
}

/* Grid utilities */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

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

/* Flex utilities */
.flex {
  display: flex;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex-col {
  display: flex;
  flex-direction: column;
}
.gap-4 {
  gap: var(--space-4);
}
.gap-6 {
  gap: var(--space-6);
}
.gap-8 {
  gap: var(--space-8);
}

/* Visibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ================================================================
   06. ACCESSIBILITY
   ================================================================ */

/* Skip link — first element in <body> */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  padding: var(--space-2) var(--space-6);
  background: var(--color-accent);
  color: var(--color-bg);
  font-weight: var(--fw-semi);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  z-index: var(--z-preloader);
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
}

/* Global focus ring — defined in performance.css (:focus-visible) */

/* ================================================================
   07. BUTTONS
   ================================================================ */

/* Base button styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-8);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-semi);
  line-height: 1;
  border-radius: var(--radius-full);
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  white-space: nowrap;
  transition:
    transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
  /* Hover states defined in performance.css */
}

/* Primary — gold fill */
.btn-primary {
  background-color: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-accent);
}

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

/* Ghost — transparent with gold border */
.btn-ghost {
  background-color: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.btn-ghost:hover {
  background-color: rgba(232, 168, 56, 0.1);
  color: var(--color-accent);
}

/* Ghost white — transparent with white border */
.btn-ghost-white {
  background-color: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.4);
}

.btn-ghost-white:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--color-white);
  color: var(--color-white);
}

/* Small button modifier */
.btn--sm {
  padding: var(--space-2) var(--space-5);
  font-size: var(--fs-sm);
}

/* Large button modifier */
.btn--lg {
  padding: var(--space-4) var(--space-10);
  font-size: var(--fs-md);
}

/* Button group */
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

/* ================================================================
   08. NAVBAR
   ================================================================ */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--navbar-height);
  background: var(--navbar-bg);
  backdrop-filter: var(--navbar-blur);
  -webkit-backdrop-filter: var(--navbar-blur);
  border-bottom: 1px solid var(--color-border);
  z-index: var(--z-sticky);
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* Scrolled state — deeper shadow added by script.js */
.navbar.scrolled {
  box-shadow: var(--shadow-md);
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Logo */
.navbar__logo {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  letter-spacing: -0.02em;
  text-decoration: none;
  flex-shrink: 0;
}

html.light-mode .navbar__logo {
  color: var(--color-bg);
}

.navbar__logo span {
  color: var(--color-accent);
}

/* Navigation links */
.navbar__nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.nav-link {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-light);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color 0.2s ease;
  /* ::after underline defined in performance.css */
}

.nav-link:hover,
.nav-link.active {
  color: var(--color-accent);
}

/* CTA nav link — styled as button */
.nav-link--cta {
  background-color: var(--color-accent);
  color: var(--color-bg) !important;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  font-weight: var(--fw-semi);
  margin-left: var(--space-2);
  transition:
    background-color 0.2s ease,
    transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-link--cta:hover {
  background-color: var(--color-accent-dark);
  transform: translateY(-1px);
}

/* Dark/Light mode toggle */
.navbar__theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-card);
  border: 1px solid var(--color-border-muted);
  color: var(--color-text-light);
  cursor: pointer;
  margin-left: var(--space-3);
  transition:
    background 0.2s ease,
    color 0.2s ease;
  flex-shrink: 0;
}

.navbar__theme-toggle:hover {
  background: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-accent);
}

.navbar__theme-toggle svg {
  width: 16px;
  height: 16px;
  pointer-events: none;
}

/* Hamburger button (mobile) */
.navbar__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  background: none;
  border: none;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  transition: background 0.2s ease;
}

.navbar__hamburger:hover {
  background: var(--color-card);
}

.navbar__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--color-text-light);
  border-radius: var(--radius-full);
  transition:
    transform 0.3s ease,
    opacity 0.3s ease,
    width 0.3s ease;
  transform-origin: center;
}

/* Hamburger open state — X icon */
.navbar__hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.navbar__hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  width: 0;
}
.navbar__hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile menu
   FIX R1: Changed display:none/block to visibility:hidden/visible.
   display:none removes the element from layout so transform/opacity
   transitions never fire — menu snapped open with no animation.
   visibility:hidden keeps element in render tree, allowing
   the translateY + opacity transition to animate correctly.
   pointer-events:none prevents interaction while hidden. */
.navbar__mobile-menu {
  visibility: hidden;
  position: fixed;
  top: var(--navbar-height);
  left: 0;
  right: 0;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-6) var(--gutter);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
  transform: translateY(-10px);
  opacity: 0;
  pointer-events: none;
  /* visibility delay on close matches the 0.3s fade-out duration */
  transition:
    transform 0.3s ease,
    opacity 0.3s ease,
    visibility 0s linear 0.3s;
}

.navbar__mobile-menu.is-open {
  visibility: visible;
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  /* visibility delay on open is 0s — become visible immediately */
  transition:
    transform 0.3s ease,
    opacity 0.3s ease,
    visibility 0s linear 0s;
}

.navbar__mobile-menu .nav-link {
  display: block;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-base);
  border-radius: var(--radius-md);
}

.navbar__mobile-menu .nav-link--cta {
  display: inline-flex;
  margin-top: var(--space-4);
  margin-left: 0;
}

/* ================================================================
   09. FOOTER
   ================================================================ */

.footer {
  background-color: #0a1118; /* Slightly darker than --color-bg */
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-16);
  padding-bottom: var(--space-8);
}

html.light-mode .footer {
  /* FIX P6: was hardcoded #1A2D42. Now uses --color-card which in light mode
     resolves to #FFFFFF, giving a clean white footer on light backgrounds.
     Add a subtle border to visually separate from page content. */
  background-color: var(--color-card);
  border-top-color: var(--color-border-muted);
}

.footer__top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: var(--space-12);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--color-border-muted);
}

.footer__logo {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  display: inline-block;
  margin-bottom: var(--space-4);
}

.footer__logo span {
  color: var(--color-accent);
}

.footer__tagline {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  margin-bottom: var(--space-6);
  max-width: 280px;
}

/* Social icons */
.footer__social {
  display: flex;
  gap: var(--space-3);
}

.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  background: var(--color-card);
  border: 1px solid var(--color-border-muted);
  color: var(--color-text-muted);
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.footer__social-link:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}

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

/* Footer columns */
.footer__col-title {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-5);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__link {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
  line-height: 1.4;
}

.footer__link:hover {
  color: var(--color-accent);
}

/* Contact column */
.footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.footer__contact-item svg {
  width: 16px;
  height: 16px;
  color: var(--color-accent);
  flex-shrink: 0;
  margin-top: 2px;
}

.footer__contact-item span,
.footer__contact-item a {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  transition: color 0.2s ease;
  line-height: 1.5;
}

.footer__contact-item a:hover {
  color: var(--color-accent);
}

/* Footer bottom */
.footer__bottom {
  padding-top: var(--space-8);
}

.footer__local-seo {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  line-height: var(--lh-loose);
  margin-bottom: var(--space-6);
  text-align: center;
  border: 1px solid var(--color-border-muted);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-md);
}

.footer__nap {
  text-align: center;
  margin-bottom: var(--space-6);
}

.footer__nap p {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.footer__copyright {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.footer__copyright a {
  color: var(--color-text-muted);
  text-decoration: underline;
  transition: color 0.2s ease;
}

.footer__copyright a:hover {
  color: var(--color-accent);
}

/* ================================================================
   10. FLOATING ELEMENTS — WhatsApp & Back-to-Top
   ================================================================ */

/* WhatsApp floating button */
.whatsapp-float {
  position: fixed;
  /* FIX: env(safe-area-inset-bottom) offsets button above home indicator on notched iPhones */
  bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  right: calc(var(--space-6) + env(safe-area-inset-right, 0px));
  width: 56px;
  height: 56px;
  background-color: #25d366;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  z-index: var(--z-toast);
  text-decoration: none;
  /* Pulse animation defined in performance.css */
}

.whatsapp-float svg {
  width: 28px;
  height: 28px;
  color: var(--color-white);
}

/* Back-to-top button */
.back-to-top {
  position: fixed;
  /* FIX: 64px = 56px (WhatsApp height) + 8px gap. Added safe-area-inset so
     both floats stack correctly above the home indicator on notched iPhones. */
  bottom: calc(
    var(--space-6) + 56px + var(--space-2) + env(safe-area-inset-bottom, 0px)
  );
  right: calc(var(--space-6) + env(safe-area-inset-right, 0px));
  width: 44px;
  height: 44px;
  background: var(--color-accent);
  color: var(--color-bg);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-gold);
  z-index: var(--z-toast);
  border: none;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    background-color 0.2s ease;
}

/* Shown state — added by script.js after 300px scroll */
.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.back-to-top:hover {
  background: var(--color-accent-dark);
}

.back-to-top svg {
  width: 18px;
  height: 18px;
}

/* ================================================================
   11. COOKIE CONSENT BANNER
   ================================================================ */

#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-card);
  border-top: 1px solid var(--color-border);
  /* FIX: removed duplicate display:flex — display:none is correct default.
     script.js sets style.display='flex' when showing, preserving flex layout. */
  display: none;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  z-index: var(--z-modal);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.3);
  /* FIX: iOS safe-area — prevents content hiding behind home indicator bar */
  padding: var(--space-5) var(--gutter)
    calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
}

#cookie-banner p {
  flex: 1;
  min-width: 240px;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin: 0;
}

#cookie-banner p a {
  color: var(--color-accent);
  text-decoration: underline;
}

.cookie-banner__actions {
  display: flex;
  gap: var(--space-3);
  flex-shrink: 0;
}

#cookie-accept {
  padding: var(--space-2) var(--space-6);
  background: var(--color-accent);
  color: var(--color-bg);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  cursor: pointer;
  border: none;
  transition: background 0.2s ease;
}

#cookie-accept:hover {
  background: var(--color-accent-dark);
}

#cookie-decline {
  padding: var(--space-2) var(--space-6);
  background: transparent;
  color: var(--color-text-muted);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  border: 1px solid var(--color-border-muted);
  transition:
    border-color 0.2s ease,
    color 0.2s ease;
}

#cookie-decline:hover {
  border-color: var(--color-text-muted);
  color: var(--color-text-light);
}

/* ================================================================
   12. PRELOADER
   ================================================================ */

#preloader {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-preloader);
  transition:
    opacity 0.4s ease,
    visibility 0.4s ease;
}

#preloader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader__logo {
  font-family: var(--font-display);
  font-size: var(--fs-6xl);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  animation: preloader-fade 1.2s ease forwards;
}

.preloader__logo span {
  color: var(--color-accent);
}

@keyframes preloader-fade {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  60% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* FIX: Preloader animation must also respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .preloader__logo {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ================================================================
   13. HERO — HOMEPAGE (index.html)
   ================================================================ */

.hero {
  min-height: calc(100vh - var(--navbar-height));
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

/* Subtle background texture */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 80% 60% at 70% 50%,
      rgba(232, 168, 56, 0.06) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 60% 80% at 10% 20%,
      rgba(26, 45, 66, 0.8) 0%,
      transparent 60%
    );
  pointer-events: none;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: var(--space-16);
  align-items: center;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
  z-index: 1;
}

/* Availability badge */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(232, 168, 56, 0.1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--color-accent);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-6);
}

.hero__badge-dot {
  width: 7px;
  height: 7px;
  background: var(--color-success);
  border-radius: var(--radius-full);
  animation: pulse-dot 2s ease infinite;
  flex-shrink: 0;
}

@keyframes pulse-dot {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.85);
  }
}

.hero__title {
  font-size: clamp(var(--fs-3xl), 5.5vw, var(--fs-5xl));
  font-weight: var(--fw-bold);
  line-height: 1.1;
  color: var(--color-white);
  margin-bottom: var(--space-4);
}

html.light-mode .hero__title {
  color: var(--color-bg);
}

/* Typewriter wrapper
   FIX: Use min-height instead of height to prevent clipping if
   fallback font renders taller before Playfair Display loads (FOUT).
   Also ensures text never clips on Android where line metrics differ. */
.hero__typewriter-wrap {
  display: block;
  min-height: 1.3em;
  overflow: visible;
}

.hero__typewriter {
  color: var(--color-accent);
  display: inline-block;
}

/* Blinking cursor */
.hero__typewriter::after {
  content: "|";
  animation: blink-cursor 0.75s step-end infinite;
  margin-left: 2px;
  color: var(--color-accent);
}

@keyframes blink-cursor {
  50% {
    opacity: 0;
  }
}

.hero__subtitle {
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  line-height: var(--lh-loose);
  margin-bottom: var(--space-8);
  max-width: 500px;
}

/* CTA buttons */
.hero__actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--space-12);
}

/* Stat strip */
.hero__stats {
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.hero__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.hero__stat-number {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
  line-height: 1;
}

.hero__stat-label {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Floating personal card */
.hero__card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-xl);
  position: relative;
  overflow: hidden;
}

.hero__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--color-accent),
    var(--color-accent-light)
  );
}

.hero__card-avatar {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  border: 3px solid var(--color-accent);
  object-fit: cover;
  margin-bottom: var(--space-4);
}

.hero__card-name {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  margin-bottom: var(--space-1);
}

html.light-mode .hero__card-name {
  color: var(--color-bg);
}

.hero__card-title {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

/* Available badge */
.hero__card-available {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(76, 175, 80, 0.12);
  border: 1px solid rgba(76, 175, 80, 0.3);
  color: var(--color-success);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  margin-bottom: var(--space-5);
}

.hero__card-available::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--color-success);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

/* Service tags on card */
.hero__card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.hero__card-tag {
  background: rgba(232, 168, 56, 0.1);
  border: 1px solid var(--color-border);
  color: var(--color-accent);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}

/* Call button on card */
.hero__card-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3);
  background: var(--color-accent);
  color: var(--color-bg);
  border-radius: var(--radius-md);
  font-weight: var(--fw-semi);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: background 0.2s ease;
}

.hero__card-cta:hover {
  background: var(--color-accent-dark);
  color: var(--color-bg);
}

/* ================================================================
   14. TICKER STRIP
   ================================================================ */

.ticker {
  background: var(--color-accent);
  padding: var(--space-3) 0;
  overflow: hidden;
  white-space: nowrap;
}

.ticker__track {
  display: inline-flex;
  animation: ticker-scroll 30s linear infinite;
}

.ticker__track:hover {
  animation-play-state: paused;
}

.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--color-bg);
  padding-right: var(--space-8);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@keyframes ticker-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__track {
    animation: none;
  }
}

/* ================================================================
   15. SOCIAL PROOF BAR
   ================================================================ */

.social-proof-bar {
  padding: var(--space-5) 0;
  background: rgba(232, 168, 56, 0.04);
  border-bottom: 1px solid var(--color-border-muted);
}

.social-proof-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-8);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.social-proof-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-light);
}

.social-proof-item span:first-child {
  font-size: var(--fs-lg);
}

/* Separator dots between items */
.social-proof-bar__inner > *:not(:last-child)::after {
  content: "·";
  color: var(--color-border-muted);
  font-size: var(--fs-xl);
  margin-left: var(--space-8);
  pointer-events: none;
}

/* ================================================================
   16. ABOUT PREVIEW
   ================================================================ */

.about-preview {
  padding: var(--space-24) 0;
}

.about-preview__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.about-preview__image-wrap {
  position: relative;
}

.about-preview__image {
  width: 100%;
  /* FIX: aspect-ratio reserves layout space before image loads, preventing CLS.
     4/5 is portrait — adjust to match actual lokesh-sharma.jpg dimensions. */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
  box-shadow: var(--shadow-xl);
}

/* Decorative frame behind image */
.about-preview__image-frame {
  position: absolute;
  inset: 16px -16px -16px 16px;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-lg);
  z-index: -1;
  opacity: 0.4;
}

.about-preview__content h2 {
  margin-bottom: var(--space-6);
}

.about-preview__content p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}

.about-preview__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-accent);
  font-weight: var(--fw-semi);
  text-decoration: none;
  margin-top: var(--space-4);
  transition: gap 0.2s ease;
}

.about-preview__link:hover {
  gap: var(--space-3);
  color: var(--color-accent);
}

/* ================================================================
   17. SERVICES OVERVIEW & SERVICE CARDS
   ================================================================ */

.services-overview {
  padding: var(--space-24) 0;
  background: rgba(26, 45, 66, 0.3);
}

html.light-mode .services-overview {
  background: rgba(0, 0, 0, 0.02);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.service-card {
  background: var(--color-card);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  position: relative;
  overflow: hidden;
  cursor: default;
  /* hover defined in performance.css */
}

.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.service-card:hover::before {
  opacity: 1;
}

.service-card__icon {
  width: 52px;
  height: 52px;
  background: rgba(232, 168, 56, 0.1);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
  font-size: var(--fs-2xl);
}

.service-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  margin-bottom: var(--space-2);
}

html.light-mode .service-card__title {
  color: var(--color-bg);
}

.service-card__price {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--color-accent);
  margin-bottom: var(--space-5);
}

.service-card__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.service-card__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}

.service-card__list li::before {
  content: "✓";
  color: var(--color-accent);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
  margin-top: 1px;
}

.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--color-accent);
  transition: gap 0.2s ease;
}

.service-card__link:hover {
  gap: var(--space-3);
  color: var(--color-accent);
}

/* ================================================================
   18. WHY CHOOSE ME
   ================================================================ */

.why-choose {
  padding: var(--space-24) 0;
}

.why-choose__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.why-item {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
}

.why-item__number {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  color: var(--color-border);
  line-height: 1;
  flex-shrink: 0;
  min-width: 48px;
  transition: color 0.3s ease;
}

.why-item:hover .why-item__number {
  color: var(--color-accent);
}

.why-item__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  margin-bottom: var(--space-2);
}

html.light-mode .why-item__title {
  color: var(--color-bg);
}

.why-item__text {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-loose);
  margin: 0;
}

/* ================================================================
   19. PROCESS STEPS
   ================================================================ */

.process {
  padding: var(--space-24) 0;
  background: rgba(26, 45, 66, 0.3);
}

html.light-mode .process {
  background: rgba(0, 0, 0, 0.02);
}

.process__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.process-step {
  background: var(--color-card);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  position: relative;
}

.process-step__number {
  font-family: var(--font-display);
  font-size: var(--fs-5xl);
  font-weight: var(--fw-bold);
  color: rgba(232, 168, 56, 0.12);
  line-height: 1;
  position: absolute;
  top: var(--space-4);
  right: var(--space-6);
  pointer-events: none;
  user-select: none;
}

.process-step__icon {
  font-size: var(--fs-2xl);
  margin-bottom: var(--space-4);
}

.process-step__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  margin-bottom: var(--space-3);
}

html.light-mode .process-step__title {
  color: var(--color-bg);
}

.process-step__text {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-loose);
  margin: 0;
}

/* ================================================================
   20. TESTIMONIALS
   ================================================================ */

.testimonials {
  padding: var(--space-24) 0;
}

.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.testimonial-card {
  background: var(--color-card);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  position: relative;
  /* hover defined in performance.css */
}

/* Gold quote mark */
.testimonial-card::before {
  content: "\201C"; /* Left double quotation mark */
  position: absolute;
  top: var(--space-4);
  left: var(--space-6);
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.2;
  pointer-events: none;
}

.testimonial-card__stars {
  color: var(--color-accent);
  font-size: var(--fs-base);
  margin-bottom: var(--space-5);
  letter-spacing: 2px;
}

.testimonial-card__quote {
  font-size: var(--fs-sm);
  color: var(--color-text-light);
  line-height: var(--lh-loose);
  margin-bottom: var(--space-6);
  font-style: italic;
}

.testimonial-card__footer {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.testimonial-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 2px solid var(--color-border);
  flex-shrink: 0;
  background: var(--color-border-muted);
}

.testimonial-card__name {
  font-weight: var(--fw-semi);
  color: var(--color-white);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-1);
}

html.light-mode .testimonial-card__name {
  color: var(--color-bg);
}

.testimonial-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.testimonial-card__business {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.testimonial-card__verified {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  /* FIX P2: updated rgba values to match corrected #66BB6A green token */
  background: rgba(102, 187, 106, 0.12);
  border: 1px solid rgba(102, 187, 106, 0.3);
  color: var(--color-verified);
  border-radius: var(--radius-full);
  padding: 2px var(--space-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}

.testimonial-card__service-tag {
  display: inline-block;
  background: rgba(232, 168, 56, 0.1);
  color: var(--color-accent);
  border-radius: var(--radius-full);
  padding: 2px var(--space-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  margin-top: var(--space-3);
}

/* ================================================================
   21. TRUST BADGES
   ================================================================ */

.trust-badges {
  padding: var(--space-24) 0;
  background: rgba(26, 45, 66, 0.3);
}

html.light-mode .trust-badges {
  background: rgba(0, 0, 0, 0.02);
}

.trust-badges__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.trust-badge {
  background: var(--color-card);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  /* hover defined in performance.css */
}

.trust-badge__icon {
  font-size: var(--fs-2xl);
  flex-shrink: 0;
}

.trust-badge__text {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--color-text-light);
  line-height: 1.4;
}

html.light-mode .trust-badge__text {
  color: var(--color-bg);
}

/* ================================================================
   22. FAQ ACCORDION
   ================================================================ */

.faq-section {
  padding: var(--space-24) 0;
}

.faq-list {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.faq-item {
  background: var(--color-card);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.faq-item.is-open {
  border-color: var(--color-border);
}

.faq-item__question {
  /* FIX R4: This targets a <button> element (per spec).
     Removed list-style:none (only applies to <li>) and
     ::-webkit-details-marker (only applies to <summary>). */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6) var(--space-8);
  cursor: pointer;
  font-weight: var(--fw-semi);
  color: var(--color-text-light);
  font-size: var(--fs-base);
  line-height: 1.4;
  transition: color 0.2s ease;
  gap: var(--space-4);
  user-select: none;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
}

.faq-item.is-open .faq-item__question {
  color: var(--color-accent);
}

.faq-item__icon {
  width: 24px;
  height: 24px;
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    transform 0.3s ease,
    background 0.2s ease,
    border-color 0.2s ease;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.faq-item.is-open .faq-item__icon {
  transform: rotate(45deg);
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}

.faq-item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-item.is-open .faq-item__answer {
  /* FIX P5: was 500px — clips long answers with multiple paragraphs/links.
     2000px is large enough for any realistic FAQ answer while still
     allowing the CSS transition to animate (unlike max-height:none). */
  max-height: 2000px;
}

.faq-item__answer-inner {
  padding: 0 var(--space-8) var(--space-6);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-loose);
}

.faq-item__answer-inner a {
  color: var(--color-accent);
  text-decoration: underline;
}

/* ================================================================
   23. JAIPUR LOCAL SECTION
   ================================================================ */

.local-section {
  padding: var(--space-20) 0;
  text-align: center;
  background: rgba(232, 168, 56, 0.03);
}

.local-section h2 {
  margin-bottom: var(--space-5);
}

.local-section p {
  max-width: 640px;
  margin: 0 auto var(--space-8);
  color: var(--color-text-muted);
}

/* ================================================================
   24. LEAD MAGNET
   ================================================================ */

.lead-magnet {
  padding: var(--space-24) 0;
}

.lead-magnet__card {
  max-width: 900px;
  margin: 0 auto;
  /* FIX: removed duplicate padding: 0 var(--gutter) — second declaration won and first was dead code */
  padding: var(--space-12);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-10);
  align-items: center;
  box-shadow: var(--shadow-lg);
}

.lead-magnet__image {
  border-radius: var(--radius-lg);
  display: block;
  width: 100%;
  box-shadow: var(--shadow-md);
}

.lead-magnet__content h2 {
  font-size: var(--fs-2xl);
  margin-bottom: var(--space-4);
}

.lead-magnet__benefits {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.lead-magnet__benefits li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.lead-magnet__benefits li::before {
  content: "✓";
  color: var(--color-success);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}

.lead-magnet__form {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.lead-magnet__form input[type="email"] {
  flex: 1;
  min-width: 200px;
}

.lead-magnet__success {
  display: none;
  padding: var(--space-4) var(--space-6);
  background: rgba(76, 175, 80, 0.1);
  border: 1px solid rgba(76, 175, 80, 0.3);
  border-radius: var(--radius-md);
  color: var(--color-success);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

/* ================================================================
   25. CTA BANNER
   ================================================================ */

.cta-banner {
  padding: var(--space-20) 0;
  background: linear-gradient(
    135deg,
    rgba(232, 168, 56, 0.12),
    rgba(232, 168, 56, 0.04)
  );
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
}

.cta-banner h2 {
  font-size: clamp(var(--fs-2xl), 4vw, var(--fs-4xl));
  margin-bottom: var(--space-4);
}

.cta-banner p {
  max-width: 540px;
  margin: 0 auto var(--space-8);
  color: var(--color-text-muted);
  font-size: var(--fs-md);
}

.cta-banner .btn-group {
  justify-content: center;
}

/* ================================================================
   26. EXIT INTENT POPUP
   ================================================================ */

#exit-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#exit-popup-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.exit-popup {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-12);
  max-width: 480px;
  width: 100%;
  position: relative;
  box-shadow: var(--shadow-xl);
  transform: scale(0.95) translateY(20px);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#exit-popup-overlay.is-visible .exit-popup {
  transform: scale(1) translateY(0);
}

.exit-popup__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-border-muted);
  border: none;
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: var(--fs-lg);
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.exit-popup__close:hover {
  background: var(--color-accent);
  color: var(--color-bg);
}

.exit-popup__emoji {
  font-size: 2.5rem;
  margin-bottom: var(--space-4);
  display: block;
}

.exit-popup h3 {
  font-size: var(--fs-2xl);
  margin-bottom: var(--space-3);
}

.exit-popup p {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-6);
}

.exit-popup .form-honeypot {
  display: none;
}

/* ================================================================
   27. PAGE HERO (inner pages)
   ================================================================ */

.page-hero {
  padding: var(--space-20) 0;
  background: linear-gradient(
    180deg,
    rgba(26, 45, 66, 0.5) 0%,
    transparent 100%
  );
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-accent),
    transparent
  );
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.breadcrumb a {
  color: var(--color-text-muted);
  transition: color 0.2s ease;
}

.breadcrumb a:hover {
  color: var(--color-accent);
}

.breadcrumb__sep {
  color: var(--color-border-muted);
}

.breadcrumb__current {
  color: var(--color-accent);
}

.page-hero h1 {
  margin-bottom: var(--space-4);
}

.page-hero__subtitle {
  max-width: 600px;
  margin: 0 auto;
  font-size: var(--fs-md);
  color: var(--color-text-muted);
}

/* ================================================================
   28. ABOUT PAGE
   ================================================================ */

/* My Story */
.about-story {
  padding: var(--space-24) 0;
}

.about-story__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Skills grid */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skill-card {
  background: var(--color-card);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease;
}

.skill-card:hover {
  border-color: var(--color-border);
  transform: translateY(-3px);
}

.skill-card__icon {
  font-size: var(--fs-3xl);
  margin-bottom: var(--space-3);
  display: block;
}

.skill-card__name {
  font-weight: var(--fw-semi);
  color: var(--color-white);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-2);
}

html.light-mode .skill-card__name {
  color: var(--color-bg);
}

.skill-card__desc {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}

/* Values */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.value-card {
  background: var(--color-card);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
}

.value-card__icon {
  font-size: var(--fs-4xl);
  margin-bottom: var(--space-4);
  display: block;
}

.value-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  margin-bottom: var(--space-3);
}

html.light-mode .value-card__title {
  color: var(--color-bg);
}

.value-card__text {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-loose);
  margin: 0;
}

/* Future Vision block */
.future-vision {
  padding: var(--space-16) var(--gutter);
  max-width: var(--container-max);
  margin: 0 auto;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  border-left: 4px solid var(--color-accent);
}

.future-vision h2 {
  margin-bottom: var(--space-4);
}

.future-vision p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

/* Portfolio preview cards on About */
.portfolio-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ================================================================
   29. SERVICES PAGE
   ================================================================ */

/* Urgency nudge */
.urgency-nudge {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.urgency-nudge__inner {
  background: rgba(232, 168, 56, 0.1);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-8);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-light);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Individual service section */
.service-section {
  padding: var(--space-24) 0;
  border-bottom: 1px solid var(--color-border-muted);
}

.service-section:last-of-type {
  border-bottom: none;
}

.service-section__header {
  max-width: var(--container-max);
  margin: 0 auto var(--space-10);
  padding: 0 var(--gutter);
}

.service-section__body {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: start;
}

/* Pricing table */
.pricing-table {
  background: var(--color-card);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.pricing-table__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border-muted);
  gap: var(--space-4);
}

.pricing-table__row:last-child {
  border-bottom: none;
}

.pricing-table__service {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-light);
}

.pricing-table__price {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--color-accent);
  white-space: nowrap;
}

/* Ad spend note */
.ad-spend-note {
  background: rgba(232, 168, 56, 0.06);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-base);
  margin-top: var(--space-4);
}

.ad-spend-note strong {
  color: var(--color-accent);
}

/* Bundle packages */
.bundles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.bundle-card {
  background: var(--color-card);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
  position: relative;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease;
}

/* Featured bundle highlight */
.bundle-card--featured {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-gold);
}

.bundle-card__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-accent);
  color: var(--color-bg);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.bundle-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  margin-bottom: var(--space-2);
}

html.light-mode .bundle-card__name {
  color: var(--color-bg);
}

.bundle-card__price {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

.bundle-card__includes {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

/* Payment terms section */
.payment-terms {
  background: var(--color-card);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  max-width: 800px;
  margin: 0 auto;
}

.payment-terms__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.payment-terms__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-base);
}

.payment-terms__item::before {
  content: "→";
  color: var(--color-accent);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
  margin-top: 1px;
}

/* ROI Calculator — defined in section 30 below */

/* ================================================================
   30. ROI CALCULATOR
   ================================================================ */

.roi-calculator {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.roi-calculator__card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  box-shadow: var(--shadow-lg);
}

.roi-calculator__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

.roi-calculator__result {
  background: rgba(232, 168, 56, 0.08);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-2);
}

.roi-calculator__result-value {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
  line-height: 1;
}

.roi-calculator__result-label {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  text-align: center;
  max-width: 300px;
}

.roi-calculator__disclaimer {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: rgba(136, 153, 170, 0.08);
  border-radius: var(--radius-md);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  line-height: var(--lh-loose);
  font-style: italic;
}

/* ================================================================
   31. PORTFOLIO PAGE & LIGHTBOX
   ================================================================ */

/* Filter tabs */
.portfolio-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-bottom: var(--space-10);
}

.filter-btn {
  padding: var(--space-2) var(--space-5);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-btn:hover,
.filter-btn.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}

/* Portfolio grid */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.portfolio-card {
  background: var(--color-card);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  /* hover defined in performance.css */
}

.portfolio-card__thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  background: var(--color-border-muted);
}

.portfolio-card__body {
  padding: var(--space-6);
}

.portfolio-card__category {
  display: inline-block;
  background: rgba(232, 168, 56, 0.1);
  color: var(--color-accent);
  border-radius: var(--radius-full);
  padding: 2px var(--space-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  margin-bottom: var(--space-3);
}

.portfolio-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  margin-bottom: var(--space-2);
}

html.light-mode .portfolio-card__title {
  color: var(--color-bg);
}

.portfolio-card__desc {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  line-height: 1.5;
}

/* Portfolio disclaimer */
.portfolio-disclaimer {
  max-width: 640px;
  margin: var(--space-10) auto 0;
  padding: var(--space-5) var(--space-8);
  background: rgba(136, 153, 170, 0.08);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-lg);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  font-style: italic;
  line-height: var(--lh-loose);
}

/* Lightbox */
#lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#lightbox-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.lightbox {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  /* FIX: prevents scroll from propagating to the body behind the modal */
  overscroll-behavior: contain;
  position: relative;
  box-shadow: var(--shadow-xl);
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#lightbox-overlay.is-open .lightbox {
  transform: scale(1);
}

.lightbox__close {
  position: sticky;
  top: 0;
  left: 100%;
  width: 32px;
  height: 32px;
  background: var(--color-border-muted);
  border: none;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: var(--fs-lg);
  transition:
    background 0.2s ease,
    color 0.2s ease;
  flex-shrink: 0;
  z-index: 1;
}

.lightbox__close:hover {
  background: var(--color-accent);
  color: var(--color-bg);
}

.lightbox__section {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border-muted);
}

.lightbox__section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.lightbox__section-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

.lightbox__section-text {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-loose);
  margin: 0;
}

/* Results cards */
.results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.result-card {
  background: var(--color-card);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
}

.result-card__icon {
  font-size: var(--fs-3xl);
  margin-bottom: var(--space-4);
  display: block;
}

.result-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--color-white);
  margin-bottom: var(--space-3);
}

html.light-mode .result-card__title {
  color: var(--color-bg);
}

.result-card__text {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-loose);
  margin: 0;
}

/* ================================================================
   32. BLOG LISTING
   ================================================================ */

/* Search bar */
.blog-search {
  max-width: 480px;
  margin: 0 auto var(--space-8);
  position: relative;
}

.blog-search__input {
  width: 100%;
  padding: var(--space-4) var(--space-5) var(--space-4) var(--space-12);
  background: var(--color-card);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-full);
  color: var(--color-text-light);
  /* FIX: 1rem prevents iOS Safari auto-zoom (same rule as global inputs) */
  font-size: 1rem;
  transition: border-color 0.2s ease;
}

.blog-search__input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.blog-search__input::placeholder {
  color: var(--color-text-muted);
}

.blog-search__icon {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  width: 16px;
  height: 16px;
  pointer-events: none;
}

/* Category filter */
.blog-categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-bottom: var(--space-10);
}

/* Blog layout */
.blog-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-12);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  align-items: start;
}

/* Blog grid */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.blog-card {
  background: var(--color-card);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* hover defined in performance.css */
}

.blog-card__thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  background: var(--color-border-muted);
}

.blog-card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

.blog-card__category {
  display: inline-block;
  background: rgba(232, 168, 56, 0.1);
  color: var(--color-accent);
  border-radius: var(--radius-full);
  padding: 2px var(--space-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
}

.blog-card__reading-time,
.blog-card__date {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.blog-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  margin-bottom: var(--space-3);
  line-height: 1.3;
  transition: color 0.2s ease;
}

html.light-mode .blog-card__title {
  color: var(--color-bg);
}

.blog-card__title:hover {
  color: var(--color-accent);
}

.blog-card__excerpt {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-base);
  margin-bottom: var(--space-5);
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card__read-more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--color-accent);
  transition: gap 0.2s ease;
}

.blog-card__read-more:hover {
  gap: var(--space-3);
  color: var(--color-accent);
}

/* Sidebar */
.blog-sidebar {
  position: sticky;
  top: calc(var(--navbar-height) + var(--space-6));
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.sidebar-widget {
  background: var(--color-card);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.sidebar-widget__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-muted);
}

html.light-mode .sidebar-widget__title {
  color: var(--color-bg);
}

.sidebar-widget__about-img {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-accent);
  margin-bottom: var(--space-4);
  object-fit: cover;
  display: block;
}

.sidebar-widget p {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.sidebar-posts {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.sidebar-post-link {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: 1.4;
  transition: color 0.2s ease;
  display: block;
}

.sidebar-post-link:hover {
  color: var(--color-accent);
}

/* Newsletter signup block */
.newsletter-block {
  padding: var(--space-20) 0;
  text-align: center;
}

.newsletter-block h2 {
  margin-bottom: var(--space-4);
}

.newsletter-block p {
  max-width: 540px;
  margin: 0 auto var(--space-8);
  color: var(--color-text-muted);
}

.newsletter-form {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
  max-width: 480px;
  margin: 0 auto;
}

.newsletter-form__input {
  flex: 1;
  min-width: 220px;
}

.newsletter-success {
  display: none;
  padding: var(--space-3) var(--space-6);
  background: rgba(76, 175, 80, 0.1);
  border: 1px solid rgba(76, 175, 80, 0.3);
  border-radius: var(--radius-md);
  color: var(--color-success);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  max-width: 480px;
  margin: 0 auto;
}

/* Load More button */
.blog-load-more {
  text-align: center;
  margin-top: var(--space-10);
}

/* ================================================================
   33. BLOG POST (single)
   ================================================================ */

.blog-post-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-12);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  align-items: start;
}

/* Post header */
.post-header {
  margin-bottom: var(--space-8);
}

.post-header__meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.post-header__category {
  display: inline-block;
  background: rgba(232, 168, 56, 0.1);
  color: var(--color-accent);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-4);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
}

.post-header__date,
.post-header__reading-time {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.post-header__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.post-header__author-img {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-accent);
  object-fit: cover;
}

.post-header__author-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--color-white);
}

html.light-mode .post-header__author-name {
  color: var(--color-bg);
}

.post-header__author-link {
  font-size: var(--fs-xs);
  color: var(--color-accent);
}

/* Table of contents */
.toc {
  background: var(--color-card);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
}

.toc__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--color-text-light);
  margin-bottom: var(--space-4);
}

html.light-mode .toc__title {
  color: var(--color-bg);
}

.toc__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.toc__link {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  transition: color 0.2s ease;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  line-height: 1.4;
}

.toc__link:hover,
.toc__link.active {
  color: var(--color-accent);
}

/* Article body typography */
.article-body {
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--color-text-light);
}

.article-body h2 {
  font-size: var(--fs-2xl);
  margin-top: var(--space-12);
  margin-bottom: var(--space-5);
  scroll-margin-top: calc(var(--navbar-height) + var(--space-4));
}

.article-body h3 {
  font-size: var(--fs-xl);
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
  scroll-margin-top: calc(var(--navbar-height) + var(--space-4));
}

.article-body p {
  margin-bottom: var(--space-6);
}

.article-body ul,
.article-body ol {
  margin-bottom: var(--space-6);
  padding-left: var(--space-6);
}

.article-body li {
  margin-bottom: var(--space-2);
  color: var(--color-text-light);
  font-size: var(--fs-md);
  list-style: disc;
}

.article-body ol li {
  list-style: decimal;
}

.article-body a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article-body blockquote {
  border-left: 3px solid var(--color-accent);
  padding: var(--space-4) var(--space-6);
  background: rgba(232, 168, 56, 0.06);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin: var(--space-8) 0;
  font-style: italic;
  color: var(--color-text-light);
}

/* Mid-article lead capture */
.article-lead-capture {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  margin: var(--space-10) 0;
  text-align: center;
}

.article-lead-capture h4 {
  font-size: var(--fs-xl);
  margin-bottom: var(--space-3);
}

.article-lead-capture p {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-5);
}

.article-lead-form {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* Author bio */
.author-bio {
  background: var(--color-card);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
  margin: var(--space-10) 0;
}

.author-bio__img {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-accent);
  object-fit: cover;
  flex-shrink: 0;
}

.author-bio__name {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--color-white);
  margin-bottom: var(--space-2);
}

html.light-mode .author-bio__name {
  color: var(--color-bg);
}

.author-bio__text {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-loose);
  margin-bottom: var(--space-3);
}

/* Social share */
.social-share {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin: var(--space-8) 0;
  padding: var(--space-5) var(--space-6);
  background: var(--color-card);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-lg);
}

.social-share__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--color-text-muted);
}

.social-share__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  border: 1px solid var(--color-border-muted);
  color: var(--color-text-muted);
  cursor: pointer;
  background: transparent;
  transition: all 0.2s ease;
}

.social-share__btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.social-share__btn--copy.copied {
  border-color: var(--color-success);
  color: var(--color-success);
}

/* Blog post sidebar */
.blog-post-sidebar {
  position: sticky;
  top: calc(var(--navbar-height) + var(--space-6));
}

/* Service mini-cards in sidebar */
.sidebar-service-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: rgba(232, 168, 56, 0.06);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  transition: background 0.2s ease;
}

.sidebar-service-card:last-child {
  margin-bottom: 0;
}

.sidebar-service-card:hover {
  background: rgba(232, 168, 56, 0.1);
}

.sidebar-service-card__name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-light);
}

html.light-mode .sidebar-service-card__name {
  color: var(--color-bg);
}

/* Related posts */
.related-posts {
  padding: var(--space-16) 0;
  border-top: 1px solid var(--color-border-muted);
}

.related-posts__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ================================================================
   34. CONTACT PAGE
   ================================================================ */

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-12);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Response time badge */
.response-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  background: rgba(232, 168, 56, 0.1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-5);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-accent);
  margin-bottom: var(--space-10);
}

.response-badge__icon {
  font-size: var(--fs-md);
}

/* Contact info */

.contact-info__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.contact-info__icon {
  width: 44px;
  height: 44px;
  background: rgba(232, 168, 56, 0.1);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-lg);
  flex-shrink: 0;
}

.contact-info__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.contact-info__value {
  font-size: var(--fs-base);
  color: var(--color-text-light);
  text-decoration: none;
  transition: color 0.2s ease;
  line-height: 1.4;
}

.contact-info__value:hover {
  color: var(--color-accent);
}

/* Trust mini section on contact */
.contact-trust {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-6);
  background: rgba(232, 168, 56, 0.05);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.contact-trust__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* Google Maps embed */
.contact-map {
  margin-top: var(--space-8);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border-muted);
}

.contact-map iframe {
  width: 100%;
  height: 250px;
  display: block;
  border: none;
  filter: grayscale(0.3) contrast(1.1);
}

/* WhatsApp alternate CTA below form */
.whatsapp-alt-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-6);
  background: rgba(37, 211, 102, 0.1);
  border: 1px solid rgba(37, 211, 102, 0.3);
  border-radius: var(--radius-full);
  color: #25d366;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: background 0.2s ease;
}

.whatsapp-alt-cta:hover {
  background: rgba(37, 211, 102, 0.18);
  color: #25d366;
}

/* ================================================================
   35. THANK YOU PAGE
   ================================================================ */

.thankyou-hero {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-20) var(--gutter);
}

.thankyou-hero__inner {
  max-width: 640px;
}

.thankyou-hero__emoji {
  font-size: 4rem;
  display: block;
  margin-bottom: var(--space-6);
}

.thankyou-hero h1 {
  margin-bottom: var(--space-4);
}

.thankyou-hero p {
  font-size: var(--fs-md);
  color: var(--color-text-muted);
}

/* Next steps */
.next-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.next-step {
  background: var(--color-card);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
  position: relative;
}

.next-step__number {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  color: rgba(232, 168, 56, 0.2);
  position: absolute;
  top: var(--space-4);
  right: var(--space-6);
  line-height: 1;
}

.next-step__icon {
  font-size: var(--fs-3xl);
  margin-bottom: var(--space-4);
  display: block;
}

.next-step__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--color-white);
  margin-bottom: var(--space-2);
}

html.light-mode .next-step__title {
  color: var(--color-bg);
}

.next-step__text {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-loose);
  margin: 0;
}

/* Resources grid */
.resources-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.resource-card {
  background: var(--color-card);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-decoration: none;
  display: block;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease;
}

.resource-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-3px);
}

.resource-card__category {
  font-size: var(--fs-xs);
  color: var(--color-accent);
  font-weight: var(--fw-semi);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.resource-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--color-white);
  margin-bottom: var(--space-2);
  line-height: 1.3;
}

html.light-mode .resource-card__title {
  color: var(--color-bg);
}

.resource-card__arrow {
  color: var(--color-accent);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  margin-top: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* ================================================================
   36. LEGAL PAGES (Privacy, Terms, Disclaimer)
   ================================================================ */

.legal-page {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--space-16) var(--gutter);
}

.legal-page__meta {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-10);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border-muted);
}

.legal-section {
  margin-bottom: var(--space-10);
}

.legal-section h2 {
  font-size: var(--fs-xl);
  margin-bottom: var(--space-4);
  color: var(--color-white);
}

html.light-mode .legal-section h2 {
  color: var(--color-bg);
}

.legal-section p,
.legal-section li {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-loose);
  margin-bottom: var(--space-3);
}

.legal-section ul {
  padding-left: var(--space-5);
}

.legal-section li {
  list-style: disc;
}

.legal-section a {
  color: var(--color-accent);
  text-decoration: underline;
}

/* ===== FIX HERO TO CONTENT GAP ===== */

.legal-hero {
  padding-bottom: 10px !important;
}

.legal-content {
  padding-top: 10px !important;
}

/* ===== INCREASE SPACE BEFORE HEADING ===== */

.legal-body {
  margin-top: 40px;
}

.legal-section h2 {
  margin-top: 40px;
}

/* ================================================================
   37. 404 PAGE
   ================================================================ */

.error-page {
  min-height: calc(100vh - var(--navbar-height));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-20) var(--gutter);
}

.error-page__inner {
  max-width: 560px;
}

.error-page__code {
  font-family: var(--font-display);
  font-size: clamp(6rem, 20vw, 10rem);
  font-weight: var(--fw-bold);
  color: var(--color-border);
  line-height: 1;
  margin-bottom: var(--space-4);
  display: block;
}

.error-page h1 {
  font-size: var(--fs-2xl);
  margin-bottom: var(--space-4);
}

.error-page p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
}

.error-page__links {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}

/* ================================================================
   38. FORMS (global)
   ================================================================ */

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.form-group:last-child {
  margin-bottom: 0;
}

label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-light);
}

html.light-mode label {
  color: var(--color-bg);
}

label .required {
  color: var(--color-accent);
  margin-left: var(--space-1);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-md);
  color: var(--color-text-light);
  /* FIX: iOS Safari auto-zooms into inputs with font-size < 16px.
     Use 1rem (16px) as the base — visual size controlled via padding/scaling. */
  font-size: 1rem;
  line-height: 1.5;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

html.light-mode input[type="text"],
html.light-mode input[type="email"],
html.light-mode input[type="tel"],
html.light-mode input[type="number"],
html.light-mode select,
html.light-mode textarea {
  background: var(--color-white);
  color: var(--color-bg);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-muted);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(232, 168, 56, 0.12);
}

input.is-invalid,
select.is-invalid,
textarea.is-invalid {
  border-color: var(--color-error);
}

.form-error-msg {
  font-size: var(--fs-xs);
  color: var(--color-error);
  display: none;
}

.form-error-msg.visible {
  display: block;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238899AA' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-10);
  cursor: pointer;
}

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

/* Honeypot — hidden from all users */
.form-honeypot {
  display: none !important;
  visibility: hidden;
  position: absolute;
  left: -9999px;
}

/* Rate limit message */
.form-rate-limit {
  display: none;
  padding: var(--space-3) var(--space-5);
  background: rgba(229, 57, 53, 0.1);
  border: 1px solid rgba(229, 57, 53, 0.3);
  border-radius: var(--radius-md);
  color: var(--color-error);
  font-size: var(--fs-sm);
  margin-top: var(--space-3);
}

.form-rate-limit.visible {
  display: block;
}

/* ================================================================
   39. RESPONSIVE — TABLET (max-width: 1024px)
   ================================================================ */

@media (max-width: 1024px) {
  :root {
    --navbar-height: 64px;
  }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
    text-align: center;
  }

  .hero__subtitle,
  .hero__actions {
    margin-left: auto;
    margin-right: auto;
  }

  .hero__actions {
    justify-content: center;
  }

  .hero__stats {
    justify-content: center;
  }

  .hero__card {
    max-width: 400px;
    margin: 0 auto;
  }

  .footer__top {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .skills-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .blog-layout {
    grid-template-columns: 1fr;
  }

  .blog-sidebar {
    position: static;
  }

  .blog-post-layout {
    grid-template-columns: 1fr;
  }

  .blog-post-sidebar {
    position: static;
  }

  .lead-magnet__card {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .lead-magnet__image {
    max-width: 280px;
    margin: 0 auto;
  }

  .lead-magnet__form {
    justify-content: center;
  }

  .about-story__inner {
    grid-template-columns: 1fr;
  }

  .service-section__body {
    grid-template-columns: 1fr;
  }

  .contact-layout {
    grid-template-columns: 1fr;
  }
}

/* ================================================================
   40. RESPONSIVE — MOBILE (max-width: 768px)
   ================================================================ */

@media (max-width: 768px) {
  section {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }

  /* Navbar — show hamburger, hide desktop nav */
  .navbar__nav {
    display: none;
  }

  .navbar__hamburger {
    display: flex;
  }

  /* .navbar__mobile-menu and .is-open display handled globally via
     visibility pattern — no display overrides needed here. */

  /* Grids become single column */
  .grid-2,
  .grid-3,
  .grid-4,
  .services-grid,
  .why-choose__grid,
  .process__grid,
  .testimonials__grid,
  .trust-badges__grid,
  .portfolio-grid,
  .bundles-grid,
  .values-grid,
  .next-steps-grid,
  .resources-grid,
  .results-grid,
  .related-posts__grid,
  .portfolio-preview-grid,
  .skills-grid {
    grid-template-columns: 1fr;
  }

  /* 2-col on mobile for performance */
  .blog-grid {
    grid-template-columns: 1fr;
  }

  /* Footer single column */
  .footer__top {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer__copyright {
    flex-direction: column;
    text-align: center;
  }

  /* Social proof bar — vertical */
  .social-proof-bar__inner {
    flex-direction: column;
    gap: var(--space-2);
  }

  .social-proof-bar__inner > *:not(:last-child)::after {
    display: none;
  }

  /* About preview single col */
  .about-preview__inner {
    grid-template-columns: 1fr;
  }

  /* Hero */
  .hero__stats {
    gap: var(--space-6);
    flex-direction: row;
    flex-wrap: wrap;
  }

  /* Blog layout single col */
  .blog-layout {
    grid-template-columns: 1fr;
  }

  /* ROI calc */
  .roi-calculator__fields {
    grid-template-columns: 1fr;
  }

  /* Newsletter form */
  .newsletter-form {
    flex-direction: column;
    align-items: center;
  }

  .newsletter-form__input {
    min-width: 100%;
  }

  /* Exit popup */
  .exit-popup {
    padding: var(--space-8);
  }

  /* Section header margins */
  .section-header {
    margin-bottom: var(--space-8);
  }

  /* Contact trust */
  .contact-trust {
    display: none; /* Replaced by inline contact items on mobile */
  }

  /* Lightbox */
  .lightbox {
    padding: var(--space-6);
    max-height: 85vh;
  }

  /* Buttons */
  .btn-group {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-group .btn {
    text-align: center;
    justify-content: center;
  }

  /* Hero actions stays flex row on mobile for better UX */
  .hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  /* Back to top above WhatsApp on smaller screens */
  .back-to-top {
    right: calc(var(--space-4) + env(safe-area-inset-right, 0px));
    bottom: calc(
      var(--space-4) + 56px + var(--space-2) + env(safe-area-inset-bottom, 0px)
    );
  }

  .whatsapp-float {
    right: calc(var(--space-4) + env(safe-area-inset-right, 0px));
    bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  }
}

/* ================================================================
   41. RESPONSIVE — SMALL MOBILE (max-width: 480px)
   ================================================================ */

@media (max-width: 480px) {
  h1 {
    font-size: var(--fs-3xl);
  }
  h2 {
    font-size: var(--fs-2xl);
  }

  .hero__card-tags {
    justify-content: center;
  }

  .portfolio-filters {
    gap: var(--space-2);
  }

  .filter-btn {
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-xs);
  }

  .cookie-banner__actions {
    width: 100%;
    justify-content: stretch;
  }

  #cookie-accept,
  #cookie-decline {
    flex: 1;
    text-align: center;
  }

  .trust-badges__grid {
    grid-template-columns: 1fr;
  }

  .trust-badge {
    flex-direction: row;
  }

  /* Ticker slightly faster on small screens */
  .ticker__track {
    animation-duration: 20s;
  }

  /* Process number less dominant on mobile */
  .process-step__number {
    font-size: var(--fs-4xl);
  }

  /* Legal page */
  .legal-page {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
  }

  /* Author bio stacks on mobile */
  .author-bio {
    flex-direction: column;
    text-align: center;
  }

  .author-bio__img {
    margin: 0 auto;
  }
}

/* ================================================================
   42. PRINT STYLES
   Hides non-content elements, resets backgrounds, ensures
   readable text for printed pages (e.g. blog posts, service pages).
   ================================================================ */

@media print {
  /* Reset body padding — no fixed navbar when printing */
  body {
    padding-top: 0;
    background: #fff;
    color: #000;
    font-size: 12pt;
  }

  /* Hide non-content UI */
  .navbar,
  .navbar__mobile-menu,
  .whatsapp-float,
  .back-to-top,
  #cookie-banner,
  #preloader,
  #exit-popup-overlay,
  #lightbox-overlay,
  .ticker,
  .social-proof-bar,
  .cta-banner,
  .lead-magnet,
  .newsletter-block,
  .blog-sidebar,
  .blog-post-sidebar,
  .footer__social,
  .hero__actions,
  .btn-group,
  .portfolio-filters,
  .filter-btn,
  .blog-categories,
  .social-share {
    display: none !important;
  }

  /* Ensure links show their URL after text */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555;
  }

  /* Skip internal and hash links */
  a[href^="#"]::after,
  a[href^="javascript"]::after {
    content: "";
  }

  /* Reset card backgrounds for print */
  .service-card,
  .blog-card,
  .testimonial-card,
  .trust-badge,
  .process-step,
  .faq-item {
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: none;
    break-inside: avoid;
  }

  /* Ensure headings don't split across pages */
  h1,
  h2,
  h3,
  h4 {
    break-after: avoid;
    color: #000;
  }

  /* Footer prints cleanly */
  .footer {
    background: #fff;
    border-top: 1px solid #ccc;
    color: #000;
  }

  .footer__col-title,
  .footer__link,
  .footer__local-seo,
  .footer__copyright {
    color: #333;
  }
}
/* ================================================================
   LIGHT MODE — COMPLETE FIX
   
   ROOT CAUSE: --color-bg was set to #F7F9FB (near-white) in light
   mode. The codebase uses color: var(--color-bg) everywhere as the
   "dark text" value (since in dark mode --color-bg = #0F1923 navy).
   When light mode sets it to near-white, ALL text overrides break —
   headings, logo, card titles, names, labels etc. all turn invisible.

   THE FIX:
   1. Keep --color-bg as #0F1923 (dark navy) — it works as dark text
   2. Add a NEW --color-surface token for actual light backgrounds
   3. Override body, mobile-menu, preloader, and form inputs to use 
      --color-surface so they stay light
   4. Override --color-white to #FFFFFF (restore its actual value 
      since the previous attempt broke it too)

   Add this block at the END of style.css, replacing the previous
   light-mode-fixes.css block if already appended.
   ================================================================ */

html.light-mode {
  /* ── Core palette ─────────────────────────────────── */

  /* Keep --color-bg as DARK NAVY so all existing
     `color: var(--color-bg)` text rules work correctly.
     This is the single most impactful fix.              */
  --color-bg: #0f1923;

  /* Dedicated surface token for backgrounds             */
  --color-surface: #f7f9fb;
  --color-surface-card: #ffffff;

  /* Card and hover surfaces                             */
  --color-card: #ffffff;
  --color-card-hover: #f0f4f8;

  /* Text tokens                                         */
  --color-text-light: #0f1923;
  --color-text-muted: #5a6b7c;

  /* Restore --color-white to actual white               */
  --color-white: #ffffff;

  /* Borders (visible on light surfaces)                 */
  --color-border: rgba(15, 25, 35, 0.15);
  --color-border-muted: rgba(15, 25, 35, 0.13);

  /* Navbar                                              */
  --navbar-bg: rgba(247, 249, 251, 0.95);

  /* Shadows (lighter for light backgrounds)             */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.15);
}

/* ================================================================
   SURFACE BACKGROUNDS
   Override every element that uses var(--color-bg) as a background
   — now that --color-bg is dark navy again, these need explicit
   light surface colours.
   ================================================================ */

/* Page background */
html.light-mode body {
  background-color: #f7f9fb;
}

/* Mobile nav dropdown */
html.light-mode .navbar__mobile-menu {
  background: #f7f9fb;
}

/* Preloader screen */
html.light-mode #preloader {
  background: #f7f9fb;
}

/* Form inputs / select / textarea */
html.light-mode input[type="text"],
html.light-mode input[type="email"],
html.light-mode input[type="tel"],
html.light-mode input[type="number"],
html.light-mode select,
html.light-mode textarea {
  background: #ffffff;
  color: #0f1923;
}

/* ================================================================
   HERO SECTION
   ================================================================ */

/* Remove the dark radial-gradient overlay on light backgrounds */
html.light-mode .hero::before {
  background:
    radial-gradient(
      ellipse 80% 60% at 70% 50%,
      rgba(232, 168, 56, 0.07) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 60% 80% at 10% 20%,
      rgba(232, 168, 56, 0.04) 0%,
      transparent 60%
    );
}

/* ================================================================
   PAGE HERO (inner pages)
   Remove the dark linear-gradient overlay
   ================================================================ */
html.light-mode .page-hero {
  background: linear-gradient(
    180deg,
    rgba(232, 168, 56, 0.07) 0%,
    transparent 100%
  );
}

/* ================================================================
   FOOTER
   Footer has hardcoded background: #0a1118 — override to white
   ================================================================ */
html.light-mode .footer {
  background-color: #ffffff;
  border-top-color: rgba(15, 25, 35, 0.12);
}

/* Footer logo text (uses var(--color-white) which is now #FFFFFF
   on a white footer — needs to be dark) */
html.light-mode .footer__logo {
  color: #0f1923;
}

/* ================================================================
   PRELOADER LOGO
   --color-white is #FFFFFF, preloader bg is #F7F9FB — invisible.
   ================================================================ */
html.light-mode .preloader__logo {
  color: #0f1923;
}

/* ================================================================
   BUTTONS
   .btn-ghost-white: white text + white border on light bg
   ================================================================ */
html.light-mode .btn-ghost-white {
  color: #0f1923;
  border-color: rgba(15, 25, 35, 0.35);
}

html.light-mode .btn-ghost-white:hover {
  background-color: rgba(15, 25, 35, 0.07);
  border-color: #0f1923;
  color: #0f1923;
}

/* ================================================================
   UTILITY
   ================================================================ */

/* .text-white utility still produces white — override to dark */
html.light-mode .text-white {
  color: #0f1923;
}

/* Select dropdown arrow — dark stroke on light input */
html.light-mode select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230F1923' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Breadcrumb separator nearly invisible with new border token */
html.light-mode .breadcrumb__sep {
  color: #8899aa;
}

/* ================================================================
   DECORATIVE NUMBERS
   Large faint numbers: process steps, why-choose, next-steps.
   The rgba(232,168,56,0.12) gold is invisible on white cards.
   ================================================================ */
html.light-mode .process-step__number {
  color: rgba(232, 168, 56, 0.2);
}

html.light-mode .why-item__number {
  color: rgba(15, 25, 35, 0.12);
}

html.light-mode .next-step__number {
  color: rgba(232, 168, 56, 0.2);
}

/* 404 "404" display number */
html.light-mode .error-page__code {
  color: rgba(15, 25, 35, 0.12);
}

/* ================================================================
   BACK-TO-TOP
   Background is --color-accent (gold). The icon colour inherits
   --color-bg which is now dark navy — good contrast on gold.
   No change needed here.
   ================================================================ */