/* ============================================================
   Search Engine Hub — Dual Palette WCAG System
   LIGHT: warm-white + red accent (Image 3 palette)
   DARK:  Brand-warm palette: maroon darks + coral accent
   All text contrasts verified ≥ 4.5:1 (AA), most ≥ 7:1 (AAA)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,400;1,9..144,700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* ══════════════════════════════════════════════════════════════
   LIGHT MODE — Red accent palette (Image 3)
   #0A0A0C #2A1214 #6D1A1E #D43B2A #F2B07B
   ══════════════════════════════════════════════════════════════ */
:root {
  /* Raw palette */
  --red-deep:    #6D1A1E; /* 11.56:1 on white ✓ AAA */
  --red-mid:     #D43B2A; /* white on this = 4.71:1 ✓ AA */
  --red-dark:    #2A1214; /* 16.67:1 on white ✓ AAA — headings */
  --red-near:    #0A0A0C;
  --peach:       #F2B07B; /* warm accent, not used as text on light */
  --red-lt:      #FDEAE8; /* tinted bg for badges/fills */
  --red-surface: #F9EFED;

  /* Light mode semantic tokens */
  --bg-page:      #FDF8F5; /* warm white */
  --bg-surface:   #F5EDE8; /* warm cream */
  --bg-surface-2: #EDE0D8;
  --bg-card:      #FFFFFF;
  --bg-input:     #F5EDE8;

  /* Text — all verified WCAG */
  --text-primary: #2A1214; /* 16.67:1 on warm-white ✓ AAA */
  --text-body:    #3D3D3D; /* 10.30:1 on warm-white ✓ AAA */
  --text-muted:   #5A5A5A; /* 6.54:1 on warm-white  ✓ AA  */
  --text-subtle:  #767676; /* 4.54:1 on white (use sparingly) ✓ AA */
  --text-accent:  #6D1A1E; /* 10.97:1 on warm-white ✓ AAA — labels */
  --text-link:    #6D1A1E; /* same as accent */
  --text-on-red:  #FFFFFF; /* 11.56:1 on red-deep, 4.71:1 on red-mid ✓ */
  --text-on-dark: #FFFFFF;
  --text-muted-dark: rgba(255,255,255,.75); /* on dark sections */

  /* Borders / Dividers */
  --border:     rgba(42,18,20,.12);
  --border-md:  rgba(42,18,20,.22);
  --border-str: rgba(42,18,20,.35);

  /* Interactive */
  --focus-ring: #6D1A1E;

  /* Section darks */
  --section-dark:   #2A1214; /* maroon — white text 17.6:1 ✓ */
  --section-darker: #0A0A0C; /* near-black */

  /* Shadows */
  --shadow-sm:     0 1px 4px rgba(42,18,20,.08), 0 2px 10px rgba(42,18,20,.05);
  --shadow-md:     0 4px 20px rgba(42,18,20,.1),  0 8px 36px rgba(42,18,20,.07);
  --shadow-lg:     0 12px 48px rgba(42,18,20,.14), 0 24px 72px rgba(42,18,20,.09);
  --shadow-accent: 0 8px 28px rgba(212,59,42,.35);

  /* Type */
  --ff-display: 'Fraunces', Georgia, serif;
  --ff-body:    'Plus Jakarta Sans', sans-serif;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.25rem;
  --fs-2xl:  1.75rem;
  --fs-3xl:  2.25rem;
  --fs-4xl:  3rem;
  --fs-5xl:  4rem;

  /* Radius / Layout */
  --r-sm: 6px; --r-md: 14px; --r-lg: 22px; --r-xl: 38px;
  --max-w: 1560px;
  --gutter: clamp(1.5rem, 6vw, 7rem);
  --transition: .28s cubic-bezier(.4,0,.2,1);
}

/* ══════════════════════════════════════════════════════════════
   DARK MODE — Charcoal + Purple accent (analytics-inspired)
   #111113 #1C1C1F #252528 #A78BFA #7C3AED
   All text verified WCAG AA/AAA
   ══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  /* Backgrounds — dark charcoal, neutral */
  --bg-page:      #111113; /* near-black charcoal */
  --bg-surface:   #1C1C1F; /* dark surface */
  --bg-surface-2: #252528; /* card level */
  --bg-card:      #252528;
  --bg-input:     #1C1C1F;

  /* Text — all verified WCAG on dark bgs */
  --text-primary: #F2F2F7; /* near-white — ✓ AAA */
  --text-body:    #EBEBF0; /* soft white — ✓ AAA */
  --text-muted:   #98989F; /* gray-mid — ✓ AA */
  --text-subtle:  #636366; /* gray-subtle — ✓ AA large */
  --text-accent:  #C4B5FD; /* violet-300 — 7.6:1 on surface ✓ AAA */
  --text-link:    #C4B5FD;
  --text-on-red:  #FFFFFF;
  --text-on-dark: #F2F2F7;
  --text-muted-dark: rgba(242,242,247,.72);

  /* Borders — neutral white-tinted */
  --border:     rgba(255,255,255,.07);
  --border-md:  rgba(255,255,255,.12);
  --border-str: rgba(255,255,255,.22);

  /* Interactive */
  --focus-ring: #A78BFA;

  /* Section darks — deep indigo for CTA sections */
  --section-dark:   #13103B; /* deep indigo — white text ✓ AAA */
  --section-darker: #0D0B28;

  /* Shadows */
  --shadow-sm:     0 1px 4px rgba(0,0,0,.5), 0 2px 10px rgba(0,0,0,.4);
  --shadow-md:     0 4px 20px rgba(0,0,0,.6), 0 8px 36px rgba(0,0,0,.5);
  --shadow-lg:     0 12px 48px rgba(0,0,0,.7), 0 24px 72px rgba(0,0,0,.55);
  --shadow-accent: 0 8px 28px rgba(124,58,237,.35);
}

/* ── Reset ──────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--ff-body);
  background:var(--bg-page);
  color:var(--text-body);
  line-height:1.72;
  font-size:var(--fs-base);
  overflow-x:hidden;
  transition:background-color .35s ease,color .35s ease;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
ul{list-style:none}
h1,h2,h3,h4{font-family:var(--ff-display);line-height:1.12;color:var(--text-primary);overflow-wrap:break-word;word-break:break-word}

/* ── Skip link ── */
.skip-link{position:absolute;top:-100px;left:1rem;background:var(--red-deep);color:var(--white,#fff);padding:.75rem 1.25rem;border-radius:var(--r-md);font-weight:700;font-size:var(--fs-base);transition:top .2s;z-index:9999}
.skip-link:focus{top:1rem}

/* ── Focus ── */
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px;border-radius:4px}

/* ── Utilities ── */
.container{max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter)}
.section{padding:clamp(5rem,10vw,9rem) 0}
.section--sm{padding:clamp(3rem,6vw,5rem) 0}
.bg-page{background:var(--bg-page)} .bg-surface{background:var(--bg-surface)}
.bg-card{background:var(--bg-card)} .bg-dark{background:var(--section-dark)}
.bg-darker{background:var(--section-darker)}
.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}

/* ── Section Labels ── */
.section-label{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:var(--fs-base);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-accent);margin-bottom:1rem;
}
.section-label::before{content:'';width:22px;height:2.5px;background:var(--red-mid);border-radius:2px;display:inline-block;flex-shrink:0}
[data-theme="dark"] .section-label::before{background:#A78BFA}
.section-label--light{color:#F2B07B}
.section-label--light::before{background:#F2B07B}

.section-title{font-size:clamp(var(--fs-3xl),3.5vw,var(--fs-4xl));font-weight:900;color:var(--text-primary);margin-bottom:1.1rem;letter-spacing:-.025em}
.section-title--light{color:#FFFFFF}
.section-desc{font-size:var(--fs-lg);color:var(--text-muted);max-width:54ch;line-height:1.75}
.section-desc.centered{margin:0 auto}
.section-desc--light{color:rgba(255,255,255,.72)}

/* ── Dark Mode Toggle ── */
.theme-toggle{
  width:52px;height:28px;border-radius:100px;
  background:var(--bg-surface-2);
  border:2px solid var(--border-md);
  cursor:pointer;position:relative;transition:all var(--transition);padding:0;flex-shrink:0;
}
[data-theme="dark"] .theme-toggle{background:#1C1C1F;border-color:rgba(167,139,250,.4)}
.theme-toggle-thumb{
  position:absolute;top:3px;left:3px;
  width:18px;height:18px;border-radius:50%;
  background:#FFFFFF;
  transition:transform var(--transition);
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;box-shadow:0 1px 4px rgba(0,0,0,.25);
}
[data-theme="dark"] .theme-toggle-thumb{transform:translateX(24px)}
.toggle-icon{width:10px;height:10px;color:var(--red-deep)}
[data-theme="dark"] .toggle-icon{color:#A78BFA}
.icon-sun{display:block}
.icon-moon{display:none}
[data-theme="dark"] .icon-sun{display:none}
[data-theme="dark"] .icon-moon{display:block}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--ff-body);font-weight:700;font-size:var(--fs-base);
  letter-spacing:.02em;border-radius:100px;padding:1rem 2.25rem;
  cursor:pointer;transition:all var(--transition);border:2px solid transparent;
  text-decoration:none;position:relative;overflow:hidden;white-space:nowrap;
}
.btn::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.2) 50%,transparent 60%);transform:translateX(-120%);transition:transform .5s ease}
.btn:hover::after{transform:translateX(120%)}

/* Primary — red-mid bg, white text (4.71:1 ✓ AA) */
.btn--primary{background:var(--red-mid);color:#FFFFFF;border-color:var(--red-mid);box-shadow:var(--shadow-accent)}
.btn--primary:hover{background:#C0321F;border-color:#C0321F;box-shadow:0 12px 36px rgba(212,59,42,.45);transform:translateY(-2px)}
.btn--primary:active{transform:translateY(0)}
[data-theme="dark"] .btn--primary{background:#7C3AED;border-color:#7C3AED;color:#FFFFFF;box-shadow:0 8px 28px rgba(124,58,237,.45)}
[data-theme="dark"] .btn--primary:hover{background:#6D28D9;border-color:#6D28D9}

/* Outline */
.btn--outline{background:transparent;border-color:var(--border-md);color:var(--text-primary)}
.btn--outline:hover{border-color:var(--red-mid);color:var(--text-accent);background:var(--red-lt);transform:translateY(-2px)}
[data-theme="dark"] .btn--outline{border-color:var(--border-md);color:var(--text-body)}
[data-theme="dark"] .btn--outline:hover{border-color:#A78BFA;color:#C4B5FD;background:rgba(167,139,250,.1)}

/* Outline white — on dark sections */
.btn--outline--white{background:transparent;border-color:rgba(255,255,255,.42);color:#FFFFFF}
.btn--outline--white:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.72);transform:translateY(-2px)}

/* White — on dark bg, dark text */
.btn--white{background:#FFFFFF;color:var(--red-dark);border-color:#FFFFFF;font-weight:700}
.btn--white:hover{background:var(--bg-page);transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.18)}
[data-theme="dark"] .btn--white{background:#FFFFFF;color:#2A1214;border-color:#FFFFFF}
[data-theme="dark"] .btn--white:hover{background:rgba(255,255,255,.9);color:#2A1214;transform:translateY(-2px)}

.btn-arrow{display:inline-block;transition:transform var(--transition)}
.btn:hover .btn-arrow{transform:translateX(5px)}

/* ── Navigation ── */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:transparent;
  border-bottom:1px solid rgba(255,255,255,.1);
  transition:border-color var(--transition);
}
.site-header::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:#2A1214;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  transition:background var(--transition),box-shadow var(--transition);
}
[data-theme="dark"] .site-header::before{background:rgba(17,17,19,.97)}
[data-theme="dark"] .site-header{border-bottom-color:transparent}
.site-header.scrolled::before{background:#2A1214;box-shadow:0 2px 24px rgba(0,0,0,.35)}
[data-theme="dark"] .site-header.scrolled::before{background:rgba(17,17,19,.99);box-shadow:0 2px 24px rgba(0,0,0,.4)}

.nav-wrapper{
  display:flex;align-items:center;justify-content:space-between;
  height:76px;max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter);
}
.nav-logo{display:flex;align-items:center;gap:.8rem;text-decoration:none;flex-shrink:0}

/* ── Logo sizing — controlled here, NO inline styles on the img tags ── */
.nav-logo img{height:48px;width:auto;object-fit:contain;max-width:none}
.site-footer .nav-logo img{height:48px;width:auto;object-fit:contain;max-width:none}

/* ── Logo switching ───────────────────────────────────────────────────────
   logo-light (logo-test-2.png) = for light mode nav
   logo-dark  (logo-test.png)   = for dark mode nav    */
.logo-light{display:block!important}
.logo-dark {display:none!important}
[data-theme="dark"] .logo-light{display:none!important}
[data-theme="dark"] .logo-dark {display:block!important}
/* Footer always dark bg — always show dark logo */
.logo-footer{display:block!important}
.nav-logo-mark{
  width:40px;height:40px;background:var(--red-mid);border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-display);font-weight:900;color:#FFFFFF;font-size:1.25rem;
  box-shadow:0 4px 14px rgba(212,59,42,.4);flex-shrink:0;
}
[data-theme="dark"] .nav-logo-mark{background:#7C3AED;box-shadow:0 4px 18px rgba(124,58,237,.55)}
.nav-logo-text{font-family:var(--ff-display);font-size:1.1rem;font-weight:700;color:#FFFFFF;line-height:1.1}
.nav-logo-sub{font-size:.75rem;color:rgba(255,255,255,.6);display:block;font-weight:400;letter-spacing:.04em}
[data-theme="dark"] .nav-logo-text{color:var(--text-primary)}
[data-theme="dark"] .nav-logo-sub{color:var(--text-muted)}
.nav-menu{display:flex;align-items:center}
.nav-item{position:relative;padding-bottom:12px}
.nav-link{display:block;padding:.55rem 1.05rem;font-size:var(--fs-base);font-weight:600;color:rgba(255,255,255,.8);transition:color var(--transition);white-space:nowrap}
.nav-link:hover,.nav-link.active{color:#FFFFFF}
[data-theme="dark"] .nav-link{color:var(--text-body)}
[data-theme="dark"] .nav-link:hover,[data-theme="dark"] .nav-link.active{color:var(--text-primary)}
.has-dropdown>.nav-link::after{content:'';display:inline-block;margin-left:.4rem;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;vertical-align:middle;transition:transform var(--transition);opacity:.65}
.has-dropdown:hover>.nav-link::after{transform:rotate(180deg)}
.dropdown{
  position:absolute;top:100%;left:50%;
  transform:translateX(-50%) translateY(-8px);
  background:#3D1A1E;border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-md);box-shadow:var(--shadow-lg);
  min-width:220px;padding:.5rem 0;
  opacity:0;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
  margin-top:8px;
}
[data-theme="dark"] .dropdown{background:var(--bg-surface-2);border-color:var(--border-md)}
.has-dropdown:hover .dropdown,.dropdown:hover{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);margin-top:0}
.dropdown-link{display:block;padding:.7rem 1.4rem;font-size:var(--fs-base);font-weight:500;color:rgba(255,255,255,.75);transition:all .18s}
.dropdown-link:hover{color:#FFFFFF;background:rgba(255,255,255,.08);padding-left:1.8rem}
[data-theme="dark"] .dropdown-link{color:var(--text-body)}
[data-theme="dark"] .dropdown-link:hover{color:var(--text-primary);background:rgba(167,139,250,.08)}
.dropdown-divider{height:1px;background:var(--border);margin:.4rem 0}
.nav-right{display:flex;align-items:center;gap:1rem}
.nav-cta{flex-shrink:0}
.nav-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:.6rem;background:none;border:none;border-radius:var(--r-sm);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.nav-toggle:hover{background:rgba(255,255,255,.08)}
.nav-toggle:focus-visible{outline:2px solid var(--focus-ring);outline-offset:4px}
.nav-toggle span{display:block;width:24px;height:2.5px;background:#FFFFFF;border-radius:2px}
.nav-toggle.open span:nth-child(1){transform:rotate(45deg) translate(7px,7px)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:rotate(-45deg) translate(7px,-7px)}

/* ── Hero ── */
.hero{background:var(--bg-page);padding-top:clamp(5rem,9vw,7rem);padding-bottom:0;position:relative;overflow:hidden}
.hero::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:120px;background:var(--bg-surface);clip-path:polygon(0 100%,100% 0,100% 100%)}
.hero-decor-1{position:absolute;width:520px;height:520px;border-radius:50%;background:rgba(212,59,42,.06);top:-120px;right:-80px;pointer-events:none}
.hero-decor-2{position:absolute;width:260px;height:260px;border-radius:50%;border:1.5px solid rgba(212,59,42,.12);bottom:80px;left:-60px;pointer-events:none}
.hero-dots{position:absolute;top:60px;right:0;width:280px;height:280px;background-image:radial-gradient(circle,rgba(109,26,30,.12) 1.5px,transparent 1.5px);background-size:22px 22px;pointer-events:none}
[data-theme="dark"] .hero-dots{background-image:radial-gradient(circle,rgba(167,139,250,.08) 1.5px,transparent 1.5px)}

.hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;position:relative;z-index:1;padding-bottom:clamp(5rem,10vw,9rem)}

.hero-badge{
  display:inline-flex;align-items:center;gap:.55rem;
  background:var(--red-lt);border:1px solid rgba(109,26,30,.2);
  border-radius:100px;padding:.45rem 1.2rem;
  font-size:var(--fs-base);font-weight:700;
  color:var(--text-accent);/* 10.97:1 ✓ AAA */
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:1.75rem;
}
[data-theme="dark"] .hero-badge{background:rgba(167,139,250,.1);border-color:rgba(167,139,250,.25);color:#A78BFA}
.hero-badge-dot{width:8px;height:8px;background:var(--red-mid);border-radius:50%;animation:pulse-dot 2s ease-in-out infinite}
[data-theme="dark"] .hero-badge-dot{background:#A78BFA}
@keyframes pulse-dot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.45);opacity:.4}}

.hero-title{font-size:clamp(2.8rem,5vw,var(--fs-5xl));font-weight:900;color:var(--text-primary);line-height:1.06;margin-bottom:1.5rem;letter-spacing:-.03em}
.hero-title em{font-style:italic;color:var(--red-mid);display:inline-block;position:relative}
[data-theme="dark"] .hero-title em{color:#C4B5FD}
.hero-title em::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:3px;background:var(--peach);border-radius:3px;opacity:.55}
[data-theme="dark"] .hero-title em::after{background:rgba(167,139,250,.4)}

.hero-desc{font-size:var(--fs-lg);color:var(--text-muted);margin-bottom:2.5rem;max-width:44ch;line-height:1.75}
.hero-actions{display:flex;gap:1.1rem;flex-wrap:wrap;margin-bottom:2.75rem}
.hero-social-proof{display:flex;align-items:center;gap:1.25rem;padding-top:1.75rem;border-top:1px solid var(--border)}
.proof-stars{color:var(--red-mid);font-size:var(--fs-lg);letter-spacing:2px}
[data-theme="dark"] .proof-stars{color:#A78BFA}
.proof-text{font-size:var(--fs-base);color:var(--text-muted)}
.proof-text strong{color:var(--text-primary);font-weight:700}

/* ── Stats Bar ── */
.stats-bar{background:var(--bg-surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.stats-inner{max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:repeat(4,1fr)}
.stat-item{padding:2.75rem 1.5rem;text-align:center;border-right:1px solid var(--border);transition:background var(--transition)}
.stat-item:last-child{border-right:none}
.stat-item:hover{background:rgba(212,59,42,.05)}
[data-theme="dark"] .stat-item:hover{background:rgba(167,139,250,.05)}
.stat-number{font-family:var(--ff-display);font-size:clamp(2.25rem,3.5vw,3.25rem);font-weight:900;color:var(--text-primary);line-height:1;margin-bottom:.4rem}
.stat-number span{color:var(--red-mid)}
[data-theme="dark"] .stat-number span{color:#C4B5FD}
.stat-label{font-size:var(--fs-base);color:var(--text-muted);font-weight:500}

/* ── Service Cards ── */
.section-services{background:var(--bg-card)}
[data-theme="dark"] .section-services{background:var(--bg-page)}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem}

/* ── Bento Grid Layout ── */
.services-bento{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
}

/* Top section: big card + 2 stacked cards side by side */
.services-bento-top{
  display:flex;
  gap:1.25rem;
  align-items:stretch;
}

/* Bottom section: 3 equal cards */
.services-bento-bottom{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:1.25rem;
}

/* ══════════════════════════════════════════════════════
   SERVICE CARDS — Clean dark cards with custom SVG icons
   ══════════════════════════════════════════════════════ */

/* ── Base card ── */
.service-card{
  background:var(--bg-card);
  border:1.5px solid var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
  position:relative;
  box-shadow:var(--shadow-sm);
}
.service-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-md);
  border-color:var(--border-md);
}

/* Light mode */
.section-services{ background:var(--bg-page); }
.service-card{
  background:#FFFFFF;
  border-color:rgba(42,18,20,.1);
}
.service-card:hover{
  border-color:rgba(212,59,42,.3);
  box-shadow:0 16px 48px rgba(42,18,20,.1), 0 4px 16px rgba(42,18,20,.06);
}

/* Dark mode */
[data-theme="dark"] .section-services{ background:var(--bg-page); }
[data-theme="dark"] .service-card{
  background:var(--bg-surface-2);
  border-color:rgba(255,255,255,.07);
  box-shadow:none;
}
[data-theme="dark"] .service-card:hover{
  border-color:rgba(167,139,250,.3);
  box-shadow:0 16px 48px rgba(0,0,0,.4), 0 0 0 1px rgba(167,139,250,.12);
  background:#2A2A2E;
}

/* ── Card body ── */
.service-card-body{
  padding:2rem 2rem 2.25rem;
  display:flex;
  flex-direction:column;
  flex:1;
}

/* ── Custom SVG icon container ── */
.sc-icon{
  width:52px;
  height:52px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:1.5rem;
  flex-shrink:0;
  transition:transform .3s ease;
}
.sc-icon svg{
  width:30px;
  height:30px;
}
.service-card:hover .sc-icon{
  transform:scale(1.1) rotate(-3deg);
}

/* Per-icon accent colors — light mode */
.sc-icon--local     { background:rgba(212,59,42,.1);  color:#C0321F; }
.sc-icon--technical { background:rgba(109,26,30,.09); color:#6D1A1E; }
.sc-icon--audit     { background:rgba(22,101,52,.1);  color:#166534; }
.sc-icon--onpage    { background:rgba(180,130,0,.1);  color:#92680A; }
.sc-icon--keyword   { background:rgba(124,58,237,.1); color:#6D28D9; }
.sc-icon--links     { background:rgba(14,116,144,.1); color:#0E7490; }

/* Per-icon accent colors — dark mode */
[data-theme="dark"] .sc-icon--local     { background:rgba(212,59,42,.15);  color:#F47A6A; }
[data-theme="dark"] .sc-icon--technical { background:rgba(196,181,253,.1); color:#C4B5FD; }
[data-theme="dark"] .sc-icon--audit     { background:rgba(110,231,183,.1); color:#6EE7B7; }
[data-theme="dark"] .sc-icon--onpage    { background:rgba(252,211,77,.1);  color:#FCD34D; }
[data-theme="dark"] .sc-icon--keyword   { background:rgba(167,139,250,.15);color:#A78BFA; }
[data-theme="dark"] .sc-icon--links     { background:rgba(103,232,249,.1); color:#67E8F9; }

/* ── Headings ── */
.service-card h3{
  font-size:var(--fs-xl);
  color:var(--text-primary);
  margin-bottom:.55rem;
  font-weight:700;
  line-height:1.25;
}

/* ── Body text ── */
.service-card p{
  font-size:var(--fs-base);
  color:var(--text-muted);
  line-height:1.72;
  flex:1;
}

/* ── Arrow link ── */
.service-link{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:var(--fs-base);
  font-weight:700;
  color:var(--text-link);
  margin-top:1.35rem;
  transition:gap var(--transition), color var(--transition);
}
.service-card:hover .service-link{
  gap:.9rem;
  color:var(--red-mid);
}
[data-theme="dark"] .service-card:hover .service-link{
  color:#A78BFA;
}

/* ── Bullet list (featured card only) ── */
.service-card-bullets{
  list-style:none;
  margin:.9rem 0 1.4rem;
  display:flex;
  flex-direction:column;
  gap:.55rem;
}
.service-card-bullets li{
  display:flex;
  align-items:center;
  gap:.65rem;
  font-size:var(--fs-base);
  color:var(--text-muted);
  line-height:1.5;
}
.service-card-bullets li::before{
  content:'';
  width:6px; height:6px; min-width:6px;
  border-radius:50%;
  background:var(--red-mid);
  flex-shrink:0;
}
[data-theme="dark"] .service-card-bullets li::before{ background:#A78BFA; }

/* ── Bento stack (right column wrapper) ── */
.services-bento-stack{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  min-width:0;
}

/* ── Featured card ── */
.service-card--featured{
  flex:2;
  min-width:0;
}
.service-card--featured .service-card-body{
  padding:2.25rem 2.5rem 2.5rem;
}
.service-card--featured .sc-icon{
  width:60px;
  height:60px;
  border-radius:16px;
  margin-bottom:1.75rem;
}
.service-card--featured .sc-icon svg{
  width:34px;
  height:34px;
}
.service-card--featured h3{
  font-size:var(--fs-2xl);
}

/* ── Small cards ── */
.service-card--small{ min-width:0; }
.service-card--small h3{ font-size:var(--fs-lg); margin-bottom:.4rem; }
.service-card--small p{ font-size:.9rem; line-height:1.65; }
.service-card--small .sc-icon{
  width:46px;
  height:46px;
  border-radius:12px;
  margin-bottom:1.25rem;
}
.service-card--small .sc-icon svg{ width:26px; height:26px; }

/* Responsive */
@media(max-width:900px){
  .services-bento-top{ flex-direction:column; }
  .services-bento-stack{ flex-direction:row; }
  .services-bento-bottom{ grid-template-columns:1fr 1fr; }
}
@media(max-width:600px){
  .services-bento-stack{ flex-direction:column; }
  .services-bento-bottom{ grid-template-columns:1fr; }
}

/* ════════════════════════════════════════════════════
   ABOUT PAGE — Values cards (.values-card)
   Scoped separately so homepage/services are unaffected
   ════════════════════════════════════════════════════ */
.values-card{
  background:var(--bg-card);
  border:1.5px solid var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  color:inherit;
  display:flex;
  flex-direction:column;
  position:relative;
}
.values-card:hover{
  border-color:rgba(212,59,42,.3);
  transform:translateY(-6px);
  box-shadow:0 16px 48px rgba(42,18,20,.12), 0 4px 16px rgba(42,18,20,.07);
}
[data-theme="dark"] .values-card{
  background:var(--bg-surface-2);
  border-color:rgba(255,255,255,.07);
}
[data-theme="dark"] .values-card:hover{
  border-color:rgba(167,139,250,.35);
  box-shadow:0 16px 48px rgba(0,0,0,.5), 0 0 0 1px rgba(167,139,250,.15);
}

/* Colored top edge bar — unique per card */
.values-card::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:4px;
  background:linear-gradient(90deg, var(--red-deep), var(--red-mid), #F2B07B);
  z-index:2;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.values-card:nth-child(2)::before{ background:linear-gradient(90deg,#0D7377,#14A085,#48D1CC); }
.values-card:nth-child(3)::before{ background:linear-gradient(90deg,#B45309,#D97706,#FCD34D); }
.values-card:nth-child(4)::before{ background:linear-gradient(90deg,#4338CA,#6D28D9,#A78BFA); }
.values-card:nth-child(5)::before{ background:linear-gradient(90deg,#065F46,#059669,#6EE7B7); }
.values-card:nth-child(6)::before{ background:linear-gradient(90deg,#9D174D,#DB2777,#F9A8D4); }
[data-theme="dark"] .values-card::before{ background:linear-gradient(90deg,#7C3AED,#A78BFA,#C4B5FD); }
[data-theme="dark"] .values-card:nth-child(2)::before,
[data-theme="dark"] .values-card:nth-child(3)::before,
[data-theme="dark"] .values-card:nth-child(4)::before,
[data-theme="dark"] .values-card:nth-child(5)::before,
[data-theme="dark"] .values-card:nth-child(6)::before{ background:linear-gradient(90deg,#7C3AED,#A78BFA,#C4B5FD); }

/* Image */
.values-card .service-card-img{
  height:200px;
}
.values-card:hover .service-card-cover{
  transform:scale(1.06);
}

/* Card body with ghost number */
.values-card .service-card-body{
  padding:1.5rem 1.75rem 1.75rem;
  display:flex;
  flex-direction:column;
  flex:1;
  position:relative;
}
.values-card .service-card-body::before{
  content:attr(data-num);
  position:absolute;
  top:1.25rem;
  right:1.5rem;
  font-family:var(--ff-display);
  font-size:2.5rem;
  font-weight:900;
  line-height:1;
  color:var(--border-str);
  letter-spacing:-.04em;
  pointer-events:none;
  user-select:none;
  transition:color .3s ease;
}
[data-theme="dark"] .values-card .service-card-body::before{ color:rgba(255,255,255,.06); }
.values-card:hover .service-card-body::before{ color:rgba(212,59,42,.08); }
[data-theme="dark"] .values-card:hover .service-card-body::before{ color:rgba(167,139,250,.1); }

.values-card h3{
  font-size:var(--fs-xl);
  color:var(--text-primary);
  margin-bottom:.55rem;
  font-weight:700;
  line-height:1.25;
  padding-right:2.5rem;
}
.values-card p{
  font-size:var(--fs-base);
  color:var(--text-muted);
  line-height:1.72;
  flex:1;
}

/* ── Process — Dark Red section ── */
.section-process{background:var(--section-dark)} /* #2A1214 maroon */
.process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.75rem;position:relative}
.process-steps::before{content:'';position:absolute;top:34px;left:14%;right:14%;height:1px;background:linear-gradient(to right,transparent,rgba(242,176,123,.2),rgba(242,176,123,.2),transparent)}
.process-step{text-align:center;position:relative;z-index:1}
.step-num{width:68px;height:68px;border-radius:50%;background:rgba(255,255,255,.07);border:1.5px solid rgba(242,176,123,.2);display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;font-family:var(--ff-display);font-size:var(--fs-xl);font-weight:900;color:#F2B07B;transition:all var(--transition)}
.process-step:hover .step-num{background:var(--red-mid);color:#FFFFFF;border-color:var(--red-mid);transform:scale(1.08);box-shadow:0 0 0 7px rgba(212,59,42,.2)}
[data-theme="dark"] .process-step:hover .step-num{background:#7C3AED;color:#FFFFFF;border-color:#7C3AED;box-shadow:0 0 0 7px rgba(124,58,237,.2)}
.process-step h4{font-size:var(--fs-xl);color:#FFFFFF;margin-bottom:.55rem;font-weight:700}
.process-step p{font-size:var(--fs-base);color:rgba(255,255,255,.65);line-height:1.7}

/* ── Case Studies ── */
.section-cases{background:var(--bg-surface)}
.cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem}

/* ── Case Card base ── */
.case-card{
  background:var(--bg-card);
  border:1.5px solid var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:inherit;
  position:relative;
}
/* Coloured left accent bar — always visible, unique per card */
.case-card::before{
  content:'';
  position:absolute;
  top:0; left:0; bottom:0;
  width:4px;
  background:linear-gradient(to bottom, #6D1A1E, #D43B2A);
  z-index:2;
  border-radius:var(--r-lg) 0 0 var(--r-lg);
}
.case-card:nth-child(2)::before{
  background:linear-gradient(to bottom, #6D1A1E, #D43B2A);
}
.case-card:nth-child(3)::before{
  background:linear-gradient(to bottom, #6D1A1E, #D43B2A);
}
[data-theme="dark"] .case-card::before,
[data-theme="dark"] .case-card:nth-child(2)::before,
[data-theme="dark"] .case-card:nth-child(3)::before{
  background:linear-gradient(to bottom, #7C3AED, #A78BFA);
}

/* Light mode hover */
.case-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 56px rgba(42,18,20,.13), 0 4px 16px rgba(42,18,20,.07);
  border-color:rgba(212,59,42,.25);
}
/* Dark mode base + hover */
[data-theme="dark"] .case-card{
  background:var(--bg-surface-2);
  border-color:rgba(255,255,255,.07);
}
[data-theme="dark"] .case-card:hover{
  border-color:rgba(167,139,250,.3);
  box-shadow:0 20px 56px rgba(0,0,0,.5), 0 0 0 1px rgba(167,139,250,.12);
}

/* ── Image area: contained logo display, not full bleed ── */
.case-card-img{
  height:160px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.25rem 1.75rem;
  border-bottom:1px solid var(--border);
}
[data-theme="dark"] .case-card-img{
  border-bottom-color:rgba(255,255,255,.06);
}
/* Images sit contained inside the padded area — no stretching */
.case-card-img img{
  max-width:90%;
  max-height:130px;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
  transition:transform .4s ease, opacity .3s ease;
  position:relative;
  z-index:1;
}
.case-card:hover .case-card-img img{
  transform:scale(1.04);
}

/* ── Industry badge: pill bottom-left of image ── */
.case-badge{
  position:absolute;
  bottom:.9rem;
  left:1rem;
  background:var(--red-mid);
  color:#FFFFFF;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:.3rem .85rem;
  border-radius:100px;
  z-index:3;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
[data-theme="dark"] .case-badge{background:#7C3AED;color:#FFFFFF}

/* ── Card body ── */
.case-card-body{
  padding:1.5rem 1.75rem 1.75rem;
  display:flex;
  flex-direction:column;
  flex:1;
}

/* Service type tags */
.case-industry{
  font-size:.72rem;
  font-weight:700;
  color:var(--text-accent);
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:.65rem;
  line-height:1.4;
}
[data-theme="dark"] .case-industry{color:#A78BFA}

/* Headline */
.case-card h3{
  font-size:var(--fs-lg);
  color:var(--text-primary);
  margin-bottom:1.1rem;
  font-weight:700;
  line-height:1.35;
  flex:1;
}
[data-theme="dark"] .case-card h3{color:var(--text-primary)}

/* ── Metrics strip ── */
.case-metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.6rem;
  margin-bottom:1.1rem;
}
.case-metric{
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:.75rem .6rem;
  text-align:center;
  transition:background .2s ease, border-color .2s ease;
}
[data-theme="dark"] .case-metric{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.07);
}
.case-card:hover .case-metric{
  background:var(--bg-card);
  border-color:rgba(212,59,42,.15);
}
[data-theme="dark"] .case-card:hover .case-metric{
  background:rgba(255,255,255,.06);
  border-color:rgba(167,139,250,.15);
}
.case-metric-num{
  font-family:var(--ff-display);
  font-size:var(--fs-xl);
  font-weight:900;
  color:var(--text-accent);
  line-height:1;
  margin-bottom:.3rem;
}
[data-theme="dark"] .case-metric-num{color:#C4B5FD}
.case-metric-label{
  font-size:.72rem;
  color:var(--text-muted);
  font-weight:600;
  letter-spacing:.02em;
  line-height:1.3;
}

/* ── Read link ── */
.case-link{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-size:var(--fs-base);
  font-weight:700;
  color:var(--text-link);
  transition:gap var(--transition), color var(--transition);
  margin-top:.25rem;
}
.case-card:hover .case-link{gap:.75rem;color:var(--text-primary)}
[data-theme="dark"] .case-link{color:#A78BFA}
[data-theme="dark"] .case-card:hover .case-link{color:#C4B5FD}

/* ── Packages ── */
.section-packages{background:var(--bg-card)}
.packages-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem;align-items:start}
.package-card{background:var(--bg-surface);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:2.5rem;transition:all var(--transition);position:relative}
.package-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);background:var(--bg-card)}
.package-card.featured{background:var(--red-dark); /* #2A1214 maroon */ border-color:var(--red-dark);box-shadow:0 0 0 3px rgba(212,59,42,.3),var(--shadow-lg)}
[data-theme="dark"] .package-card.featured{background:var(--section-dark);border-color:rgba(167,139,250,.3);box-shadow:0 0 0 3px rgba(167,139,250,.2),var(--shadow-lg)}
.package-card.featured:hover{transform:translateY(-5px)}
.package-badge{display:inline-block;background:var(--red-mid);color:#FFFFFF;font-size:var(--fs-base);font-weight:700;padding:.35rem 1rem;border-radius:100px;letter-spacing:.05em;text-transform:uppercase;margin-bottom:1.25rem}
[data-theme="dark"] .package-badge{background:#7C3AED;color:#FFFFFF}
.package-name{font-family:var(--ff-display);font-size:var(--fs-2xl);font-weight:700;margin-bottom:.4rem;color:var(--text-primary)}
.package-card.featured .package-name{color:#FFFFFF}
.package-desc{font-size:var(--fs-base);color:var(--text-muted);margin-bottom:1.75rem;line-height:1.7}
.package-card.featured .package-desc{color:rgba(255,255,255,.65)}
.package-price{margin-bottom:1.75rem}
.package-price .amount{font-family:var(--ff-display);font-size:var(--fs-4xl);font-weight:900;color:var(--text-primary);line-height:1}
.package-card.featured .package-price .amount{color:var(--peach)}
[data-theme="dark"] .package-card.featured .package-price .amount{color:#A78BFA}
.package-price .period{font-size:var(--fs-base);color:var(--text-muted)}
.package-card.featured .package-price .period{color:rgba(255,255,255,.55)}
.package-features{margin-bottom:2.25rem}
.package-features li{display:flex;align-items:flex-start;gap:.75rem;padding:.65rem 0;font-size:var(--fs-base);color:var(--text-body);border-bottom:1px solid var(--border)}
.package-card.featured .package-features li{color:rgba(255,255,255,.82);border-bottom-color:rgba(255,255,255,.1)}
.package-features li:last-child{border-bottom:none}
.feature-icon{color:var(--red-deep);flex-shrink:0;margin-top:.25rem;font-size:var(--fs-lg)}
.package-card.featured .feature-icon{color:var(--peach)}
[data-theme="dark"] .feature-icon{color:#A78BFA}
[data-theme="dark"] .package-card.featured .feature-icon{color:#C4B5FD}
.package-card .btn{width:100%;justify-content:center}

/* ── Testimonials ── */
.section-testimonials{background:var(--bg-surface)}
.testimonials-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.75rem}
.testimonial-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:2.5rem;transition:all var(--transition);position:relative;overflow:hidden}
.testimonial-card::before{content:'\201C';position:absolute;top:-8px;right:20px;font-family:var(--ff-display);font-size:8rem;color:rgba(109,26,30,.07);line-height:1;pointer-events:none}
[data-theme="dark"] .testimonial-card::before{color:rgba(167,139,250,.06)}
.testimonial-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:rgba(109,26,30,.2)}
[data-theme="dark"] .testimonial-card:hover{border-color:rgba(167,139,250,.35);box-shadow:0 8px 32px rgba(124,58,237,.18),0 0 0 1px rgba(167,139,250,.12)}
.testimonial-stars{color:var(--red-mid);font-size:var(--fs-lg);margin-bottom:1.1rem}
[data-theme="dark"] .testimonial-stars{color:#A78BFA}
.testimonial-text{font-size:var(--fs-lg);color:var(--text-body);line-height:1.75;margin-bottom:1.75rem;font-style:italic}
.testimonial-author{display:flex;align-items:center;gap:.9rem}
.author-avatar{width:52px;height:52px;border-radius:50%;background:var(--red-surface);border:2px solid rgba(109,26,30,.2);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--fs-base);color:var(--red-deep);flex-shrink:0;overflow:hidden}
[data-theme="dark"] .author-avatar{background:rgba(167,139,250,.1);border-color:rgba(167,139,250,.25);color:#A78BFA}
.author-name{font-weight:700;color:var(--text-primary);font-size:var(--fs-base)}
.author-role{font-size:var(--fs-base);color:var(--text-muted);margin-top:.15rem}

/* ── Blog ── */
.section-blog{background:var(--bg-page)}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem}
.blog-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;transition:all var(--transition);text-decoration:none;color:inherit;display:block}
.blog-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:rgba(109,26,30,.2);background:var(--bg-card)}
[data-theme="dark"] .blog-card:hover{border-color:rgba(167,139,250,.2)}
.blog-card-img{height:220px;overflow:hidden;position:relative}
.blog-card-img-inner{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.75rem;transition:transform var(--transition)}
.blog-card:hover .blog-card-img-inner{transform:scale(1.04)}
.blog-card-body{padding:1.75rem}
.blog-tag{font-size:var(--fs-base);font-weight:700;color:var(--text-link);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.65rem}
.blog-card h3{font-size:var(--fs-xl);color:var(--text-primary);margin-bottom:.8rem;line-height:1.3;font-weight:700}
.blog-card p{font-size:var(--fs-base);color:var(--text-muted);line-height:1.72}
.blog-meta{display:flex;align-items:center;gap:.75rem;margin-top:1.35rem;font-size:var(--fs-base);color:var(--text-subtle);font-weight:500}

/* ── CTA — Dark section ── */
.section-cta{background:var(--section-dark)}
.cta-band{text-align:center;position:relative;overflow:hidden}
.cta-band::before{content:'';position:absolute;width:320px;height:320px;border-radius:50%;background:rgba(212,59,42,.12);top:-120px;right:-80px;pointer-events:none}
.cta-band::after{content:'';position:absolute;width:200px;height:200px;border-radius:50%;background:rgba(212,59,42,.08);bottom:-80px;left:-60px;pointer-events:none}
[data-theme="dark"] .cta-band::before{background:rgba(167,139,250,.07)}
[data-theme="dark"] .cta-band::after{background:rgba(167,139,250,.04)}
.cta-actions{display:flex;gap:1.1rem;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}

/* About page CTA — enhanced dark card (modifier, won't affect other pages) */
.cta-band--dark {
  background: linear-gradient(135deg, var(--red-deep) 0%, #1a0608 100%);
  border-radius: var(--r-xl);
  padding: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 6vw, 5rem);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.cta-band--dark::before {
  width: 320px;
  height: 320px;
  top: -120px;
  right: -80px;
  background: rgba(212,59,42,.18);
}
.cta-band--dark::after {
  width: 200px;
  height: 200px;
  bottom: -80px;
  left: -60px;
  background: rgba(242,176,123,.08);
}
[data-theme="dark"] .cta-band--dark {
  background: linear-gradient(135deg, #13103B 0%, #0D0B28 100%);
}
[data-theme="dark"] .cta-band--dark::before { background: rgba(167,139,250,.12) }
[data-theme="dark"] .cta-band--dark::after  { background: rgba(167,139,250,.06) }

/* Packages page CTA — scoped modifier, won't affect other pages */
.cta-band--packages {
  background: var(--section-dark);
  border-radius: var(--r-xl);
  padding: clamp(3rem, 7vw, 5rem) clamp(2rem, 6vw, 5rem);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.cta-band--packages::before {
  width: 320px;
  height: 320px;
  top: -120px;
  right: -80px;
  background: rgba(212,59,42,.15);
}
.cta-band--packages::after {
  width: 200px;
  height: 200px;
  bottom: -80px;
  left: -60px;
  background: rgba(212,59,42,.07);
}
.cta-band--packages .section-title { color: #FFFFFF; }
.cta-band--packages .section-desc  { color: rgba(255,255,255,.7); }
[data-theme="dark"] .cta-band--packages { background: linear-gradient(135deg, #13103B 0%, #0D0B28 100%); }
[data-theme="dark"] .cta-band--packages::before { background: rgba(167,139,250,.12) }
[data-theme="dark"] .cta-band--packages::after  { background: rgba(167,139,250,.06) }

.cta-band-inner { position: relative; z-index: 1 }

.cta-band-tag {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--peach);
  margin-bottom: 1rem;
}
.cta-band-tag::before {
  content: '';
  width: 18px; height: 2px;
  background: var(--peach);
  border-radius: 2px;
  display: inline-block;
}

.cta-band-note {
  margin-top: 1.25rem;
  font-size: .85rem;
  color: rgba(255,255,255,.4);
  letter-spacing: .02em;
}

/* ── Footer ── */
.site-footer{background:var(--section-darker);padding:clamp(4rem,7vw,6rem) 0 2.5rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:4rem;margin-bottom:4rem}
.footer-brand{max-width:320px}
.footer-brand p{font-size:var(--fs-base);color:rgba(255,255,255,.5);margin:1.25rem 0 1.75rem;line-height:1.75}
.footer-socials{display:flex;gap:.75rem}
.footer-social{width:42px;height:42px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:var(--fs-base);color:rgba(255,255,255,.5);transition:all var(--transition);text-decoration:none;font-weight:700}
.footer-social:hover{border-color:var(--peach);color:var(--peach);background:rgba(242,176,123,.12);transform:translateY(-2px)}
[data-theme="dark"] .footer-social:hover{border-color:#A78BFA;color:#A78BFA;background:rgba(167,139,250,.1)}
.footer-col h5{font-size:var(--fs-base);font-weight:700;color:#FFFFFF;margin-bottom:1.25rem}
.footer-col ul{display:flex;flex-direction:column;gap:.75rem}
.footer-col a{font-size:var(--fs-base);color:rgba(255,255,255,.5);transition:color var(--transition)}
.footer-col a:hover{color:var(--peach)}
[data-theme="dark"] .footer-col a:hover{color:#A78BFA}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:2.25rem;border-top:1px solid rgba(255,255,255,.08);font-size:var(--fs-base);color:rgba(255,255,255,.35);flex-wrap:wrap;gap:1rem}
.footer-bottom-links{display:flex;gap:2rem}
.footer-bottom-links a{color:rgba(255,255,255,.35);transition:color var(--transition)}
.footer-bottom-links a:hover{color:#FFFFFF}

/* ── Page Hero ── */
.page-hero{background:var(--bg-page);padding-top:clamp(5rem,9vw,7rem);padding-bottom:clamp(3rem,6vw,4.5rem);border-bottom:1px solid var(--border);position:relative;overflow:hidden}
.page-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 55% 50% at 50% 0%,rgba(109,26,30,.06),transparent 70%);pointer-events:none}
[data-theme="dark"] .page-hero::before{background:radial-gradient(ellipse 55% 50% at 50% 0%,rgba(167,139,250,.05),transparent 70%)}
.breadcrumb{display:flex;align-items:center;gap:.55rem;font-size:var(--fs-base);color:var(--text-muted);margin-bottom:1.75rem;font-weight:500;flex-wrap:wrap}
.breadcrumb a{color:var(--text-link)}
.breadcrumb a:hover{color:var(--text-primary)}
.breadcrumb-sep{opacity:.4}

/* ── Contact ── */
.contact-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:5rem;align-items:start}
.contact-info h2{font-size:var(--fs-3xl);color:var(--text-primary);margin-bottom:1rem;font-weight:700}
.contact-info p{color:var(--text-muted);margin-bottom:2.5rem;line-height:1.75;font-size:var(--fs-lg)}
.contact-detail{display:flex;align-items:flex-start;gap:1.2rem;margin-bottom:1.75rem}
.contact-detail-icon{width:48px;height:48px;background:var(--red-lt);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid rgba(109,26,30,.15)}
[data-theme="dark"] .contact-detail-icon{background:rgba(167,139,250,.1);border-color:rgba(167,139,250,.2)}
.contact-detail-icon svg{width:22px;height:22px;color:var(--red-deep)}
[data-theme="dark"] .contact-detail-icon svg{color:#A78BFA}
.contact-detail-label{font-size:var(--fs-base);color:var(--text-muted);margin-bottom:.3rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.contact-detail-value{color:var(--text-primary);font-weight:600;font-size:var(--fs-lg)}
.contact-form-wrap{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:3rem;box-shadow:var(--shadow-sm)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.form-group{margin-bottom:1.35rem}
.form-group label{display:block;font-size:var(--fs-base);font-weight:600;color:var(--text-primary);margin-bottom:.6rem}
.form-group input,.form-group textarea,.form-group select{width:100%;background:var(--bg-input);border:1.5px solid var(--border-md);border-radius:var(--r-md);padding:.9rem 1.2rem;color:var(--text-primary);font-size:var(--fs-base);transition:border-color var(--transition),box-shadow var(--transition);outline:none}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--focus-ring);box-shadow:0 0 0 3px rgba(109,26,30,.12)}
[data-theme="dark"] .form-group input:focus{box-shadow:0 0 0 3px rgba(167,139,250,.15)}
.form-group textarea{resize:vertical;min-height:150px}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--text-subtle)}
.form-honeypot{display:none!important}
.form-success{display:none;background:rgba(109,26,30,.07);border:1px solid rgba(109,26,30,.18);border-radius:var(--r-md);padding:1.1rem 1.35rem;color:var(--red-deep);text-align:center;margin-top:1rem;font-size:var(--fs-base)}
[data-theme="dark"] .form-success{background:rgba(167,139,250,.1);border-color:rgba(167,139,250,.2);color:#A78BFA}
.form-error-msg{color:var(--red-mid);font-size:var(--fs-base);margin-top:.45rem;display:none}

/* ── Service Detail ── */
.service-detail-grid{display:grid;grid-template-columns:2fr 1fr;gap:4rem;align-items:start}
.service-detail-body h2{font-size:var(--fs-2xl);color:var(--text-primary);margin:2.5rem 0 .9rem;font-weight:700}
.service-detail-body p{color:var(--text-muted);margin-bottom:1.2rem;line-height:1.8;font-size:var(--fs-lg)}

/* Prose — used for policy/legal pages */
.prose h2{font-size:var(--fs-2xl);color:var(--text-primary);margin:2.5rem 0 .9rem;font-weight:700;border-bottom:1px solid var(--border);padding-bottom:.75rem}
.prose h3{font-size:var(--fs-xl);color:var(--text-primary);margin:1.75rem 0 .6rem;font-weight:600}
.prose p{color:var(--text-muted);margin-bottom:1.25rem;line-height:1.85;font-size:var(--fs-lg)}
.prose ul,.prose ol{color:var(--text-muted);padding-left:1.35rem;margin-bottom:1.5rem;font-size:var(--fs-base)}
.prose li{line-height:1.85;margin-bottom:.5rem}
.prose strong{color:var(--text-primary)}
.prose a{color:var(--tangerine)}
.prose a:hover{text-decoration:underline}
.deliverables-list li{display:flex;align-items:flex-start;gap:.85rem;padding:.9rem 0;border-bottom:1px solid var(--border);font-size:var(--fs-lg);color:var(--text-body)}
.deliverables-list li:last-child{border-bottom:none}
.sidebar-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:2rem;margin-bottom:1.75rem;box-shadow:var(--shadow-sm)}
.sidebar-card h4{font-size:var(--fs-xl);color:var(--text-primary);margin-bottom:1.1rem;font-weight:700}
.faq-list{margin-top:2.5rem}
.faq-item{border-bottom:1px solid var(--border);overflow:hidden}
.faq-question{width:100%;text-align:left;background:none;border:none;padding:1.4rem 0;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-size:var(--fs-lg);font-weight:600;color:var(--text-primary);gap:1rem;transition:color var(--transition)}
.faq-question:hover{color:var(--text-accent)}
.faq-icon{flex-shrink:0;color:var(--red-mid);font-size:1.4rem;transition:transform var(--transition)}
[data-theme="dark"] .faq-icon{color:#A78BFA}
.faq-item.open .faq-icon{transform:rotate(45deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .4s ease,padding .4s ease;color:var(--text-muted);font-size:var(--fs-lg);line-height:1.75}
.faq-item.open .faq-answer{max-height:500px;padding-bottom:1.4rem}

/* ── About ── */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.about-img-wrap{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/5;background:var(--bg-surface);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center}
.about-img-badge{position:absolute;bottom:1.5rem;left:1.5rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);padding:1.1rem 1.5rem;box-shadow:var(--shadow-md)}
.badge-num{font-family:var(--ff-display);font-size:var(--fs-2xl);font-weight:900;color:var(--red-mid)}
[data-theme="dark"] .badge-num{color:#A78BFA}
.badge-text{font-size:var(--fs-base);color:var(--text-muted);font-weight:600}

/* ── Reveal ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
.fade-up{opacity:0;animation:fadeUp .75s ease forwards}
.fade-up.d1{animation-delay:.1s}.fade-up.d2{animation-delay:.22s}.fade-up.d3{animation-delay:.34s}.fade-up.d4{animation-delay:.46s}
.reveal{opacity:0;transform:translateY(32px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.18s}.reveal.d3{transition-delay:.28s}
.reveal.d4{transition-delay:.38s}.reveal.d5{transition-delay:.48s}.reveal.d6{transition-delay:.58s}.reveal.d7{transition-delay:.68s}

/* ── Reduced motion ── */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ── Responsive ── */
@media(max-width:1280px){:root{--gutter:clamp(1.5rem,4vw,3.5rem)}}
@media(max-width:1024px){
  .hero-inner{grid-template-columns:1fr}.hero-visual{display:none}
  .stats-inner{grid-template-columns:repeat(2,1fr)}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .cases-grid{grid-template-columns:1fr 1fr}
  .packages-grid{grid-template-columns:1fr;max-width:540px;margin:0 auto}
  .packages-grid .package-card.featured{order:-1}
  .testimonials-grid{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr;gap:3rem}
  .service-detail-grid{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr;gap:3rem}
  .process-steps{grid-template-columns:1fr 1fr}
  .process-steps::before{display:none}
}
@media(max-width:768px){
  :root{--gutter:1.35rem}

  /* ── Overlay backdrop ── */
  .mobile-nav-overlay{
    display:none;
    position:fixed;inset:0;
    background:rgba(0,0,0,.55);
    z-index:997;
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
    opacity:0;
    transition:opacity .3s ease;
  }
  .mobile-nav-overlay.visible{
    display:block;
    opacity:1;
  }

  /* ── Slide-in panel ── */
  .nav-menu{
    display:flex;
    flex-direction:column;
    position:fixed;
    top:0;right:0;bottom:0;
    width:min(84vw, 340px);
    background:#1C1315;
    padding:0;
    overflow-y:auto;
    overflow-x:hidden;
    z-index:999;
    gap:0;
    transform:translateX(100%);
    transition:transform .35s cubic-bezier(.4,0,.2,1);
    box-shadow:-8px 0 40px rgba(0,0,0,.45);
    /* scrollbar */
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,.1) transparent;
  }
  [data-theme="dark"] .nav-menu{background:#0E0E10}
  .nav-menu.open{transform:translateX(0)}

  /* ── Panel header ── */
  .nav-menu::before{
    content:'Menu';
    display:block;
    padding:1.35rem 1.5rem 1.1rem;
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:rgba(255,255,255,.65);
    border-bottom:1px solid rgba(255,255,255,.12);
    flex-shrink:0;
    margin-top:76px; /* clear the fixed header */
  }

  /* ── Nav items ── */
  .nav-item{
    border-bottom:1px solid rgba(255,255,255,.06);
    width:100%;
    flex-shrink:0;
    display:flex;
    align-items:stretch;
    flex-wrap:wrap;
  }
  [data-theme="dark"] .nav-item{border-bottom-color:rgba(255,255,255,.05)}

  .nav-link{
    padding:1rem 1.5rem;
    font-size:1.05rem;
    font-weight:600;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex:1;
    color:rgba(255,255,255,.82);
    position:relative;
    transition:color .2s ease, background .2s ease;
  }
  .nav-link:hover,.nav-link:active{
    color:#FFFFFF;
    background:rgba(255,255,255,.06);
  }
  .nav-link.active{
    color:#FFFFFF;
    font-weight:700;
  }
  .nav-link.active::before{
    content:'';
    position:absolute;
    left:0;top:25%;bottom:25%;
    width:3px;
    background:var(--red-mid);
    border-radius:0 2px 2px 0;
  }
  [data-theme="dark"] .nav-link.active::before{background:#A78BFA}

  /* ── Services accordion trigger ── */
  .has-dropdown>.nav-link{padding-right:1.5rem}
  .has-dropdown>.nav-link::after{display:none}

  /* ── Mobile dd btn ── */
  .mobile-dd-btn{
    display:flex !important;
    position:static;
    width:44px;
    align-self:stretch;
    flex-shrink:0;
    color:rgba(255,255,255,.5);
    transition:color .2s ease;
    border-left:1px solid rgba(255,255,255,.07);
    border-radius:0;
  }
  .mobile-dd-btn svg{width:18px;height:18px;transition:transform .25s ease}
  .has-dropdown.mobile-open .mobile-dd-btn{
    color:rgba(255,255,255,.9);
  }
  .has-dropdown.mobile-open .mobile-dd-btn svg{transform:rotate(180deg)}

  /* ── Services submenu — takes full row width ── */
  .has-dropdown .dropdown{width:100%}

  /* ── Services submenu (accordion) ── */
  .dropdown{
    display:block !important;
    position:static;
    transform:none !important;
    background:rgba(0,0,0,.25);
    border:none;
    border-radius:0;
    box-shadow:none;
    min-width:unset;
    padding:0;
    opacity:1 !important;
    pointer-events:auto !important;
    max-height:0;
    overflow:hidden;
    transition:max-height .32s cubic-bezier(.4,0,.2,1);
    margin:0;
  }
  [data-theme="dark"] .dropdown{background:rgba(0,0,0,.3)}
  .has-dropdown.mobile-open .dropdown{max-height:500px}

  .dropdown-link{
    padding:.85rem 1.5rem .85rem 2.25rem;
    font-size:.95rem;
    font-weight:500;
    color:rgba(255,255,255,.65) !important;
    border-bottom:1px solid rgba(255,255,255,.05);
    display:flex;
    align-items:center;
    gap:.6rem;
    width:100%;
    transition:color .18s, background .18s, padding-left .18s;
  }
  .dropdown-link::before{
    content:'';
    width:5px;height:5px;
    border-radius:50%;
    background:rgba(255,255,255,.25);
    flex-shrink:0;
    transition:background .18s;
  }
  .dropdown-link:hover{
    color:#FFFFFF !important;
    background:rgba(255,255,255,.06);
    padding-left:2.5rem;
  }
  .dropdown-link:hover::before{background:var(--red-mid)}
  [data-theme="dark"] .dropdown-link:hover::before{background:#A78BFA}
  .dropdown-link:last-child{border-bottom:none}
  [data-theme="dark"] .dropdown-link{color:rgba(255,255,255,.6) !important}

  /* ── Mobile-only footer inside panel ── */
  .mobile-nav-footer{
    display:block;
    margin-top:auto;
    padding:1.5rem;
    border-top:1px solid rgba(255,255,255,.08);
    list-style:none;
    flex-shrink:0;
  }
  .mobile-nav-cta{
    display:flex !important;
    width:100%;
    justify-content:center;
    margin-bottom:1.25rem;
  }
  .mobile-nav-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    font-size:.8rem;
    color:rgba(255,255,255,.3);
  }
  .mobile-nav-theme-row{
    display:flex;
    align-items:center;
    gap:.65rem;
    font-size:.8rem;
    color:rgba(255,255,255,.35);
  }
  .theme-toggle--mobile{
    width:44px;height:24px;
  }
  .theme-toggle--mobile .theme-toggle-thumb{
    width:16px;height:16px;top:3px;left:3px;
  }
  [data-theme="dark"] .theme-toggle--mobile .theme-toggle-thumb{transform:translateX(20px)}

  /* ── Hide desktop toggle & CTA, show hamburger ── */
  .nav-toggle{display:flex}
  .nav-cta{display:none}
  .theme-toggle:not(.theme-toggle--mobile){display:none}
  .nav-right{gap:.5rem}

  /* ── Hamburger → X animation ── */
  .nav-toggle span{display:block;width:22px;height:2px;background:#FFFFFF;border-radius:2px;transition:transform .3s ease, opacity .3s ease}
  .nav-toggle.open span:nth-child(1){transform:rotate(45deg) translate(6px,6px)}
  .nav-toggle.open span:nth-child(2){opacity:0;transform:translateX(-8px)}
  .nav-toggle.open span:nth-child(3){transform:rotate(-45deg) translate(6px,-6px)}

  /* ── Page layout ── */
  .services-grid,.cases-grid,.blog-grid,.footer-grid,.process-steps{grid-template-columns:1fr}
  .stats-inner{grid-template-columns:1fr 1fr}.form-row{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;text-align:center}.footer-bottom-links{justify-content:center}
  .hero-actions{flex-direction:column}.hero-actions .btn{width:100%;justify-content:center}
  /* Fix 2-col stats borders */
  .stats-inner .stat-item:nth-child(2){border-right:none}
  .stats-inner .stat-item:nth-child(3){border-top:1px solid var(--border)}
  .stats-inner .stat-item:nth-child(4){border-top:1px solid var(--border)}
  /* Case metrics 2-col on tablet */
  .case-metrics{grid-template-columns:1fr 1fr}
  .case-metric:last-child{grid-column:1/-1}
  /* Testimonials header fix */
  .section-testimonials .sec-hd > div[style*="display:flex"]{flex-wrap:wrap}
  /* Contact form mobile improvements */
  .contact-form-wrap{padding:2rem}
  .form-group input,.form-group textarea,.form-group select{padding:.85rem 1rem;font-size:1rem}
  iframe{height:300px!important}
}
@media(max-width:480px){
  .contact-form-wrap{padding:1.5rem}
  .contact-grid{gap:2rem}
  .form-group label{font-size:.9rem}
  .contact-detail-value{font-size:1rem}
}

/* ═══════════════════════════════════════════════════════════════
   INNER PAGE — Commercial Service Pages
   ═══════════════════════════════════════════════════════════════ */

/* ── Service Hero ─────────────────────────────────────────────── */
.svc-hero {
  background: var(--bg-page);
  padding-top: clamp(5rem, 9vw, 7rem);
  padding-bottom: 0;
  position: relative;
  overflow: hidden;
}
.svc-hero::after {
  content: '';
  position: absolute; bottom: -2px; left: 0; right: 0;
  height: 100px;
  background: var(--bg-surface);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
/* Angled background stripe */
.svc-hero::before {
  content: '';
  position: absolute;
  top: 0; right: -10%;
  width: 55%;
  height: 100%;
  background: var(--red-lt);
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0% 100%);
  pointer-events: none;
}
[data-theme="dark"] .svc-hero::before {
  background: rgba(124,58,237,.1);
}
.svc-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  position: relative;
  z-index: 1;
  padding-bottom: clamp(4rem, 8vw, 7rem);
}
.svc-hero-inner > * { min-width: 0; }
.svc-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--red-lt);
  border: 1px solid rgba(109,26,30,.2);
  border-radius: 100px;
  padding: .4rem 1rem;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--text-accent);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
[data-theme="dark"] .svc-hero-badge {
  background: rgba(167,139,250,.1);
  border-color: rgba(167,139,250,.25);
  color: #A78BFA;
}
.svc-hero h1 {
  font-size: clamp(2.5rem, 4.5vw, 3.75rem);
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1.08;
  margin-bottom: 1.4rem;
  letter-spacing: -.025em;
}
.svc-hero h1 strong {
  color: var(--red-mid);
  font-style: italic;
  font-weight: 900;
}
[data-theme="dark"] .svc-hero h1 strong { color: #C4B5FD; }
.svc-hero-desc {
  font-size: var(--fs-lg);
  color: var(--text-muted);
  margin-bottom: 2.25rem;
  line-height: 1.75;
  max-width: 42ch;
}
.svc-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
/* Mini proof row */
.svc-hero-proof {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.svc-proof-item { display: flex; flex-direction: column; }
.svc-proof-num {
  font-family: var(--ff-display);
  font-size: var(--fs-2xl);
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1;
}
.svc-proof-num span { color: var(--red-mid); }
[data-theme="dark"] .svc-proof-num span { color: #C4B5FD; }
.svc-proof-label { font-size: var(--fs-base); color: var(--text-muted); margin-top: .2rem; }

/* ── Hero Visual Card ─────────────────────────────────────────── */
.svc-hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Hero Placeholder Image ───────────────────────────────────── */
.svc-hero-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  position: relative;
  border-radius: var(--r-lg);
}
.svc-hero-img-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, var(--bg-surface-2) 0%, var(--bg-surface) 100%);
  border: 1.5px solid var(--border-md);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  overflow: hidden;
}
.svc-hero-img-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.03) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none;
}
[data-theme="dark"] .svc-hero-img-placeholder {
  background: linear-gradient(140deg, rgba(124,58,237,.14) 0%, var(--bg-surface-2) 100%);
  box-shadow: 0 20px 60px rgba(124,58,237,.18), var(--shadow-lg);
}
[data-theme="dark"] .svc-hero-img-placeholder::before {
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
}
.ship-icon-svg {
  width: 52px; height: 52px;
  color: var(--text-subtle);
  opacity: .45;
  position: relative; z-index: 1;
}
.ship-label {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text-subtle);
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .5;
  position: relative; z-index: 1;
}
/* Float badges anchored inside the image — no overflow clipping */
.svc-hero-img .svc-float-badge { position: absolute; z-index: 2; }
.svc-hero-img .svc-float-badge.top-left  { top: 20px;    left: 20px;  }
.svc-hero-img .svc-float-badge.bot-right { bottom: 20px; right: 20px; }
.svc-result-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border-md);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 400px;
  position: relative;
}
.svc-result-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--red-deep), var(--red-mid));
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
[data-theme="dark"] .svc-result-card::before { background: linear-gradient(90deg, #A78BFA, #C4B5FD); }
.src-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}
.src-metric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .85rem 0;
  border-bottom: 1px solid var(--border);
}
.src-metric:last-child { border-bottom: none; }
.src-metric-label { font-size: var(--fs-base); color: var(--text-muted); }
.src-metric-val {
  font-family: var(--ff-display);
  font-size: var(--fs-xl);
  font-weight: 900;
  color: var(--text-primary);
}
.src-metric-up { font-size: var(--fs-base); font-weight: 700; color: #166534; }
[data-theme="dark"] .src-metric-up { color: #4ADE80; }
/* Floating badge */
.svc-float-badge {
  position: absolute;
  background: var(--bg-card);
  border: 1.5px solid var(--border-md);
  border-radius: var(--r-md);
  padding: .85rem 1.1rem;
  box-shadow: var(--shadow-md);
  animation: float-badge 4s ease-in-out infinite;
}
@keyframes float-badge { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.svc-float-badge.top-left { top: -18px; left: -20px; animation-delay: 0s; }
.svc-float-badge.bot-right { bottom: -18px; right: -20px; animation-delay: -2s; }
.sfb-num {
  font-family: var(--ff-display);
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1;
}
.sfb-num.green { color: #166534; }
[data-theme="dark"] .sfb-num.green { color: #4ADE80; }
.sfb-label { font-size: .72rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .07em; margin-top: .2rem; }

/* ── Outcomes / Why It Matters ────────────────────────────────── */
.outcomes-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1.5rem;
}
.outcomes-grid > * { min-width: 0; }
.outcome-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 2rem;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}
.outcome-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--red-mid);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s ease;
}
.outcome-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(212,59,42,.25); }
.outcome-card:hover::after { transform: scaleX(1); }
[data-theme="dark"] .outcome-card:hover { border-color: rgba(167,139,250,.4); box-shadow: 0 8px 32px rgba(124,58,237,.2), 0 0 0 1px rgba(167,139,250,.15); }
[data-theme="dark"] .outcome-card::after { background: #A78BFA; }
.outcome-icon {
  width: 56px; height: 56px;
  border-radius: var(--r-md);
  background: var(--red-lt);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem;
  transition: all var(--transition);
}
.outcome-card:hover .outcome-icon { background: var(--red-mid); }
.outcome-card:hover .outcome-icon svg { color: #fff; }
[data-theme="dark"] .outcome-icon { background: rgba(167,139,250,.1); }
[data-theme="dark"] .outcome-icon svg { color: #A78BFA; }
[data-theme="dark"] .outcome-card:hover .outcome-icon { background: #A78BFA; }
[data-theme="dark"] .outcome-card:hover .outcome-icon svg { color: #FFFFFF; }
.outcome-icon svg { width: 26px; height: 26px; color: var(--red-deep); transition: color var(--transition); }
.outcome-card h3 { font-size: var(--fs-xl); color: var(--text-primary); margin-bottom: .6rem; font-weight: 700; }
.outcome-card p  { font-size: var(--fs-base); color: var(--text-muted); line-height: 1.7; }

/* ── Deliverables (visual) ────────────────────────────────────── */
.deliverables-visual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.deliverables-visual > * { min-width: 0; }
.deliv-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  padding: 1.4rem 1.6rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  transition: all var(--transition);
}
.deliv-card:hover { border-color: rgba(212,59,42,.25); transform: translateX(4px); }
[data-theme="dark"] .deliv-card:hover { border-color: rgba(167,139,250,.2); }
.deliv-check {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--red-lt);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: .15rem;
}
[data-theme="dark"] .deliv-check { background: rgba(167,139,250,.12); }
.deliv-check svg { width: 14px; height: 14px; color: var(--red-deep); }
[data-theme="dark"] .deliv-check svg { color: #A78BFA; }
.deliv-content { min-width: 0; }
.deliv-content h4 { font-size: var(--fs-base); font-weight: 700; color: var(--text-primary); margin-bottom: .25rem; }
.deliv-content p  { font-size: var(--fs-base); color: var(--text-muted); line-height: 1.65; }

/* ── Process Steps (visual) ───────────────────────────────────── */
.process-visual {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.pv-step {
  display: flex;
  gap: 1.75rem;
  position: relative;
}
.pv-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 20px;
  top: 44px;
  bottom: -1px;
  width: 2px;
  background: linear-gradient(to bottom, var(--red-mid), transparent);
}
[data-theme="dark"] .pv-step:not(:last-child)::after { background: linear-gradient(to bottom, rgba(167,139,250,.4), transparent); }
.pv-step-left { flex-shrink: 0; padding-bottom: 2rem; }
.pv-num {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--red-mid);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-display);
  font-size: var(--fs-lg);
  font-weight: 900;
  box-shadow: 0 4px 12px rgba(212,59,42,.3);
}
[data-theme="dark"] .pv-num { background: #7C3AED; color: #FFFFFF; box-shadow: 0 4px 16px rgba(124,58,237,.45); }
.pv-content { padding-top: .5rem; padding-bottom: 2rem; min-width: 0; }
.pv-content h4 { font-size: var(--fs-xl); font-weight: 700; color: var(--text-primary); margin-bottom: .5rem; }
.pv-content p  { font-size: var(--fs-base); color: var(--text-muted); line-height: 1.72; }

/* ── Comparison / Why Us table ────────────────────────────────── */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1.5px solid var(--border);
}
.compare-table th {
  padding: 1.1rem 1.5rem;
  font-size: var(--fs-base);
  font-weight: 700;
  text-align: left;
  background: var(--bg-surface);
  color: var(--text-primary);
  border-bottom: 1.5px solid var(--border);
}
.compare-table th:last-child {
  background: var(--red-dark);
  color: #fff;
  text-align: center;
}
[data-theme="dark"] .compare-table th:last-child { background: var(--red-deep); }
.compare-table td {
  padding: 1rem 1.5rem;
  font-size: var(--fs-base);
  color: var(--text-body);
  border-bottom: 1px solid var(--border);
}
.compare-table tr:last-child td { border-bottom: none; }
.compare-table td:last-child {
  text-align: center;
  font-weight: 700;
  color: var(--red-mid);
  background: rgba(109,26,30,.04);
}
[data-theme="dark"] .compare-table td:last-child { color: #A78BFA; background: rgba(167,139,250,.04); }
.compare-table tr:hover td { background: var(--bg-surface); }
.compare-table td:last-child { transition: none; }
.cmp-yes { color: #166534 !important; font-size: 1.25rem; }
.cmp-no  { color: var(--text-subtle) !important; font-size: 1.25rem; }
[data-theme="dark"] .cmp-yes { color: #4ADE80 !important; }

/* ── Pricing Callout ──────────────────────────────────────────── */
.pricing-callout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5rem;
  align-items: stretch;
}
.pricing-callout > * { min-width: 0; }
.pricing-tier {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 2rem;
  transition: all var(--transition);
  position: relative;
}
.pricing-tier:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.pricing-tier.highlight {
  background: var(--red-dark);
  border-color: var(--red-dark);
  box-shadow: 0 0 0 3px rgba(212,59,42,.25), var(--shadow-lg);
}
[data-theme="dark"] .pricing-tier.highlight { background: var(--section-dark); border-color: rgba(167,139,250,.3); }
.pt-badge {
  display: inline-block;
  background: var(--red-mid);
  color: #fff;
  font-size: var(--fs-base);
  font-weight: 700;
  padding: .3rem .85rem;
  border-radius: 100px;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
[data-theme="dark"] .pricing-tier.highlight .pt-badge { background: #7C3AED; color: #FFFFFF; }
.pt-name { font-family: var(--ff-display); font-size: var(--fs-2xl); font-weight: 700; color: var(--text-primary); margin-bottom: .3rem; }
.pricing-tier.highlight .pt-name { color: #fff; }
.pt-price { margin: 1rem 0; }
.pt-price .amt { font-family: var(--ff-display); font-size: var(--fs-4xl); font-weight: 900; color: var(--text-primary); line-height: 1; }
.pricing-tier.highlight .pt-price .amt { color: var(--peach); }
[data-theme="dark"] .pricing-tier.highlight .pt-price .amt { color: #A78BFA; }
.pt-price .per { font-size: var(--fs-base); color: var(--text-muted); }
.pricing-tier.highlight .pt-price .per { color: rgba(255,255,255,.55); }
.pt-features { margin: 1.25rem 0; display: flex; flex-direction: column; gap: .6rem; }
.pt-feature {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: var(--fs-base);
  color: var(--text-muted);
}
.pricing-tier.highlight .pt-feature { color: rgba(255,255,255,.75); }
.pt-check { color: #166534; flex-shrink: 0; margin-top: .1rem; }
.pricing-tier.highlight .pt-check { color: var(--peach); }
[data-theme="dark"] .pricing-tier.highlight .pt-check { color: #A78BFA; }
.pricing-tier .btn { width: 100%; justify-content: center; margin-top: auto; }

/* ── Testimonial spotlight ────────────────────────────────────── */
.testimonial-spotlight {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 2.75rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.testimonial-spotlight > * { min-width: 0; }
.testimonial-spotlight::before {
  content: '\201C';
  position: absolute;
  top: -20px; left: 24px;
  font-family: var(--ff-display);
  font-size: 12rem;
  color: rgba(109,26,30,.06);
  line-height: 1;
  pointer-events: none;
}
[data-theme="dark"] .testimonial-spotlight::before { color: rgba(167,139,250,.05); }
.ts-quote {
  font-family: var(--ff-display);
  font-size: var(--fs-2xl);
  font-style: italic;
  color: var(--text-primary);
  line-height: 1.4;
  position: relative;
  z-index: 1;
}
.ts-author { display: flex; flex-direction: column; gap: .4rem; align-items: flex-end; min-width: 180px; }
.ts-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--red-lt);
  border: 2.5px solid rgba(109,26,30,.2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-display);
  font-size: var(--fs-xl);
  font-weight: 900;
  color: var(--red-deep);
  margin: 0 auto .75rem;
}
[data-theme="dark"] .ts-avatar { background: rgba(167,139,250,.1); color: #A78BFA; border-color: rgba(167,139,250,.25); }
.ts-stars { color: var(--red-mid); font-size: var(--fs-lg); text-align: center; }
[data-theme="dark"] .ts-stars { color: #A78BFA; }
.ts-name { font-weight: 700; color: var(--text-primary); font-size: var(--fs-base); text-align: center; }
.ts-role { font-size: var(--fs-base); color: var(--text-muted); text-align: center; }

/* ── Related services strip ───────────────────────────────────── */
.related-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1.25rem;
}
.related-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: inherit;
  transition: all var(--transition);
}
.related-card:hover { border-color: rgba(212,59,42,.3); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
[data-theme="dark"] .related-card:hover { border-color: rgba(167,139,250,.25); }
.related-icon {
  width: 46px; height: 46px;
  border-radius: var(--r-md);
  background: var(--red-lt);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
[data-theme="dark"] .related-icon { background: rgba(167,139,250,.1); }
.related-icon svg { width: 22px; height: 22px; color: var(--red-deep); }
[data-theme="dark"] .related-icon svg { color: #A78BFA; }
.related-info h4 { font-size: var(--fs-base); font-weight: 700; color: var(--text-primary); margin-bottom: .2rem; }
.related-info p  { font-size: var(--fs-base); color: var(--text-muted); }

/* ── Sticky CTA sidebar ───────────────────────────────────────── */
.service-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 4rem;
  align-items: start;
}
/* Allow grid children to shrink below content min-width so inner overflow-x:auto containers work correctly on mobile */
.service-layout > * { min-width: 0; }
.sticky-sidebar { position: sticky; top: 96px; }
.cta-sidebar-card {
  background: var(--red-dark);
  border-radius: var(--r-lg);
  padding: 2rem;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}
.cta-sidebar-card::before {
  content: '';
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: rgba(212,59,42,.25);
  top: -60px; right: -60px;
  pointer-events: none;
}
[data-theme="dark"] .cta-sidebar-card { background: var(--section-dark); }
.cta-sidebar-card h3 { font-size: var(--fs-xl); color: #fff; margin-bottom: .65rem; font-weight: 700; position: relative; z-index: 1; }
.cta-sidebar-card p  { font-size: var(--fs-base); color: rgba(255,255,255,.7); margin-bottom: 1.5rem; line-height: 1.65; position: relative; z-index: 1; }
.cta-sidebar-card .btn { width: 100%; justify-content: center; position: relative; z-index: 1; }
.info-sidebar-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  margin-bottom: 1.5rem;
}
.info-sidebar-card h4 { font-size: var(--fs-xl); font-weight: 700; color: var(--text-primary); margin-bottom: 1.1rem; }
.sidebar-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-base);
}
.sidebar-stat-row:last-child { border-bottom: none; }
.sidebar-stat-label { color: var(--text-muted); }
.sidebar-stat-val { font-weight: 700; color: var(--text-primary); }

/* ── Inner page responsive ────────────────────────────────────── */
@media(max-width:1024px) {
  .svc-hero-inner    { grid-template-columns: 1fr; }
  .svc-hero-visual   { display: none; }
  .service-layout    { grid-template-columns: 1fr; }
  .sticky-sidebar    { position: static; }
  .outcomes-grid     { grid-template-columns: 1fr 1fr; }
  .deliverables-visual { grid-template-columns: 1fr; }
  .pricing-callout   { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .pricing-callout .pricing-tier.highlight { order: -1; }
  .compare-table     { font-size: .9rem; }
  .testimonial-spotlight { grid-template-columns: 1fr; }
  .ts-author         { align-items: flex-start; flex-direction: row; gap: 1rem; }
  .ts-avatar         { margin: 0; }
  .related-grid      { grid-template-columns: 1fr 1fr; }
}
@media(max-width:768px) {
  .svc-hero::before  { display: none; }
  .outcomes-grid     { grid-template-columns: 1fr; }
  .related-grid      { grid-template-columns: 1fr; }
  /* Compare table — force horizontal scroll with reduced padding */
  .compare-table th,
  .compare-table td  { padding: .75rem 1rem; white-space: nowrap; }
  .compare-table td:first-child { white-space: normal; min-width: 130px; }
  /* Hero actions stack on tablet */
  .svc-hero-actions  { flex-direction: column; }
  .svc-hero-actions .btn { width: 100%; justify-content: center; }
  /* Pricing callout full width on tablet */
  .pricing-callout   { max-width: 100% !important; }
  /* Proof items tighten gap */
  .svc-hero-proof    { gap: 1.25rem; }
  /* Testimonial spotlight author row fix */
  .ts-author         { flex-direction: row; align-items: center; flex-wrap: wrap; min-width: 0; }
  /* Hero desc: remove max-width constraint so it fills available width */
  .svc-hero-desc     { max-width: 100%; }
  /* Section desc: unconstrain so it fills the column */
  .section-desc      { max-width: 100%; }
  /* Hero padding: reduce top padding on tablet */
  .svc-hero          { padding-top: clamp(4rem, 7vw, 5rem); }
}

/* ── Hide mobile-only nav elements on desktop ── */
.mobile-nav-footer{display:none}
.mobile-nav-cta{display:none}
.mobile-nav-meta{display:none}
.mobile-nav-theme-row{display:none}

/* ── Mobile dropdown chevron button ── */
.mobile-dd-btn{display:none;position:absolute;right:0;top:0;bottom:0;align-items:center;justify-content:center;width:44px;background:none;border:none;cursor:pointer;color:rgba(255,255,255,.6);padding:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.mobile-dd-btn:focus-visible{outline:2px solid rgba(255,255,255,.5);outline-offset:2px}
[data-theme="dark"] .mobile-dd-btn{color:var(--text-muted)}
.mobile-dd-btn svg{width:18px;height:18px}
.has-dropdown.mobile-open .mobile-dd-btn svg{transform:rotate(180deg)}

/* ── Section header row utilities ── */
.sec-hd{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:end;margin-bottom:4rem}
.sec-hd--half{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:end;margin-bottom:4rem}
.sec-hd--center{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center}
@media(max-width:768px){
  .sec-hd,.sec-hd--half,.sec-hd--center{grid-template-columns:1fr;gap:1.25rem;margin-bottom:2.5rem}
}

/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE MOBILE FIXES
   ═══════════════════════════════════════════════════════════════ */

/* ── Small screen (≤480px) — phones ── */
@media(max-width:480px){

  /* Hero — prevent title overflow, tighten spacing */
  .hero-title{font-size:clamp(2.1rem,9vw,2.8rem);letter-spacing:-.02em}
  .hero-desc{font-size:var(--fs-base);margin-bottom:2rem}
  .hero-badge{font-size:.75rem;letter-spacing:.04em;padding:.4rem .9rem;white-space:normal;text-align:center;justify-content:center}
  .hero-social-proof{flex-direction:column;align-items:flex-start;gap:.65rem}
  .hero-actions{gap:.75rem;margin-bottom:2rem}

  /* Stats — single column on small phones */
  .stats-inner{grid-template-columns:1fr}
  .stat-item{border-right:none;border-bottom:1px solid var(--border);padding:1.75rem 1rem}
  .stat-item:last-child{border-bottom:none}

  /* Services — reduce card image height */
  .service-card-img{height:160px}
  .service-card-body{padding:1.25rem}

  /* Process section — tighten inline heading margin */
  .section-process .container > div[style]{margin-bottom:2.5rem!important}
  .process-step{padding:0 .5rem}
  .step-num{width:56px;height:56px;font-size:var(--fs-lg)}

  /* Case metrics — 2-col on small screens instead of 3 */
  .case-metrics{grid-template-columns:1fr 1fr}
  .case-metric:last-child{grid-column:1/-1}
  .case-card-img{height:140px;padding:1rem 1.25rem}
  .case-card-img img{max-width:85%;max-height:100px}

  /* Packages */
  .package-price .amount{font-size:var(--fs-3xl)}
  .package-card{padding:1.75rem 1.25rem}

  /* Testimonials section header — fix inline flex stars row */
  .section-testimonials .sec-hd > div[style]{flex-wrap:wrap}

  /* Blog cards */
  .blog-card-img{height:160px}

  /* CTA section buttons — stack and go full-width */
  .cta-actions{flex-direction:column;align-items:stretch}
  .cta-actions .btn{width:100%;justify-content:center}

  /* Footer — single column on small phones */
  .footer-grid{grid-template-columns:1fr;gap:2.5rem}
  .footer-brand{max-width:100%}
  .footer-bottom-links{flex-wrap:wrap;gap:1rem}

  /* Section padding reduction */
  .section{padding:clamp(3rem,8vw,5rem) 0}
}

/* ═══════════════════════════════════════════════════════════════
   PACKAGES PAGE — Table & Page-Specific Fixes
   ═══════════════════════════════════════════════════════════════ */

/* Scroll hint — only visible on small screens */
.table-scroll-hint{
  display:none;
  text-align:center;
  font-size:var(--fs-base);
  color:var(--text-muted);
  padding:.5rem 0 .75rem;
  letter-spacing:.03em;
}

/* Packages page — remove max-width constraint on mobile so cards go full width */
@media(max-width:600px){
  .packages-grid{max-width:100%!important}
}

/* Comparison table — readable on all screens */
.compare-table-pkg{font-size:var(--fs-base);min-width:560px}
.compare-table-pkg th,
.compare-table-pkg td{white-space:nowrap}
.compare-table-pkg td:first-child{white-space:normal;min-width:140px}

@media(max-width:768px){
  .table-scroll-hint{display:block}
  .table-scroll-wrap{
    border:1px solid var(--border);
    border-radius:var(--r-md);
    /* Subtle shadow to hint scrollability */
    box-shadow:inset -8px 0 12px -8px rgba(42,18,20,.08);
  }
  .compare-table-pkg th,
  .compare-table-pkg td{padding:.75rem 1rem!important}
  .compare-table-pkg{font-size:.9rem}
}

@media(max-width:480px){
  .compare-table-pkg th,
  .compare-table-pkg td{padding:.6rem .75rem!important;font-size:.82rem}
  /* Page hero h1 — allow wrap naturally without the forced <br> looking cramped */
  .page-hero .section-title{font-size:clamp(1.85rem,8vw,var(--fs-3xl))}
  /* Packages grid full bleed on small phones */
  .packages-grid{gap:1.25rem}
  .package-card{padding:1.5rem 1.1rem}
}

/* ═══════════════════════════════════════════════════════════════
   SERVICE PAGE — Mobile Fixes (≤480px)
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:480px){

  /* Service hero — title & badge */
  .svc-hero h1{font-size:clamp(1.9rem,8.5vw,2.5rem);letter-spacing:-.02em}
  .svc-hero-badge{font-size:.72rem;letter-spacing:.04em;padding:.35rem .85rem}
  .svc-hero-desc{font-size:var(--fs-base);margin-bottom:1.75rem}

  /* Proof row — single column stack on mobile */
  .svc-hero-proof{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:.85rem;
    padding-top:1.5rem;
  }
  .svc-proof-item:last-child{text-align:left}
  .svc-proof-num{font-size:var(--fs-xl)}

  /* Hero inner padding */
  .svc-hero-inner{padding-bottom:3rem}

  /* Deliverables cards */
  .deliv-card{padding:1.1rem 1.2rem;gap:.75rem}
  .deliv-content h4{font-size:var(--fs-base)}
  .deliv-content p{font-size:.9rem}

  /* Process steps */
  .pv-step{gap:1.1rem}
  .pv-num{width:36px;height:36px;font-size:var(--fs-base)}
  .pv-step:not(:last-child)::after{left:17px}
  .pv-content h4{font-size:var(--fs-base)}
  .pv-content p{font-size:.9rem}
  .pv-content{padding-bottom:1.5rem}
  .pv-step-left{padding-bottom:1.5rem}

  /* Compare table — shrink cell padding, let it scroll */
  .compare-table th,
  .compare-table td{padding:.6rem .75rem;font-size:.82rem}

  /* Pricing callout */
  .pricing-callout{gap:1rem}
  .pricing-tier{padding:1.5rem 1.25rem}
  .pt-price .amt{font-size:var(--fs-3xl)}
  .pt-name{font-size:var(--fs-xl)}

  /* Testimonial spotlight */
  .testimonial-spotlight{padding:1.75rem 1.25rem;gap:1.5rem}
  .ts-quote{font-size:var(--fs-xl)}
  .ts-author{min-width:0}

  /* Outcome cards */
  .outcome-card{padding:1.5rem}

  /* Section inline margin overrides */
  .svc-hero ~ .section > .container > div[style*="margin-bottom:4rem"],
  .section > .container > div[style*="margin-bottom:4rem"]{margin-bottom:2.5rem!important}
  .section > .container > div[style*="margin-bottom:3.5rem"]{margin-bottom:2rem!important}

  /* Section title: override inline font-size so headings scale on phones */
  .section-title{font-size:clamp(1.6rem,6.5vw,2.1rem)!important}

  /* Hero badge: allow wrapping on narrow screens */
  .svc-hero-badge{white-space:normal;text-align:center;justify-content:center;line-height:1.4}

  /* Sidebar stat rows */
  .sidebar-stat-row{flex-direction:column;gap:.2rem;align-items:flex-start}

  /* Related cards inside sidebar: ensure text doesn't overflow */
  .related-info h4{font-size:.9rem}
  .related-info p{font-size:.82rem}

  /* Sidebar cards */
  .cta-sidebar-card{padding:1.5rem 1.25rem}
  .info-sidebar-card{padding:1.25rem}
}

/* ═══════════════════════════════════════════════════════════════
   SERVICE PAGE — Very Small Phones (≤360px)
   Covers Galaxy A series, budget Android, older iPhones in portrait
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:360px){

  /* Reduce container gutter on very small screens */
  .container{padding-left:1rem;padding-right:1rem}

  /* Section padding */
  .section{padding:clamp(2.5rem,7vw,4rem) 0}

  /* Hero top padding */
  .svc-hero{padding-top:3.5rem}

  /* Hero h1: tighter size for 360px viewport */
  .svc-hero h1{font-size:clamp(1.55rem,7.5vw,1.85rem)}

  /* Section titles: scale down for narrow viewport */
  .section-title{font-size:clamp(1.35rem,6vw,1.6rem)!important}

  .svc-proof-num{font-size:var(--fs-xl)}

  /* Hero actions: reduce button padding */
  .btn{padding:.85rem 1.5rem}

  /* Deliverables: tighter */
  .deliv-card{padding:.9rem 1rem;gap:.6rem}
  .deliv-content h4{font-size:.9rem}
  .deliv-content p{font-size:.82rem}

  /* Process steps */
  .pv-num{width:32px;height:32px;font-size:.9rem}
  .pv-step:not(:last-child)::after{left:15px}
  .pv-content h4{font-size:.95rem}
  .pv-content p{font-size:.82rem}
  .pv-step{gap:.9rem}

  /* Compare table: tighter cells */
  .compare-table th,
  .compare-table td{padding:.5rem .65rem;font-size:.78rem}
  .compare-table td:first-child{min-width:110px}

  /* Pricing tier: tighter padding */
  .pricing-tier{padding:1.25rem 1rem}
  .pt-price .amt{font-size:var(--fs-2xl)}
  .pt-name{font-size:var(--fs-xl)}

  /* Testimonial spotlight */
  .testimonial-spotlight{padding:1.25rem 1rem;gap:1rem}
  .ts-quote{font-size:var(--fs-lg)}
  .ts-avatar{width:52px;height:52px;font-size:var(--fs-base)}

  /* Outcome cards */
  .outcome-card{padding:1.25rem}
  .outcome-icon{width:46px;height:46px}
  .outcome-icon svg{width:22px;height:22px}
  .outcome-card h3{font-size:var(--fs-base)}

  /* FAQ items: tighter */
  .faq-question{font-size:.9rem;padding:.85rem 0}

  /* Sidebar: make cards more compact */
  .cta-sidebar-card{padding:1.25rem 1rem}
  .info-sidebar-card{padding:1rem}

  /* Breadcrumb: smaller text */
  .breadcrumb{font-size:.82rem;margin-bottom:1rem}
}


/* About — real photo replaces placeholder emoji */
.about-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}


/* Service cards — real photo cover image */
.service-card-img {
  position: relative;
  overflow: hidden;
}
.service-card-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform var(--transition);
}
.service-card:hover .service-card-cover {
  transform: scale(1.04);
}



/* About page — social icons on light background */
.about-socials .footer-social {
  background: var(--bg-surface-2);
  border-color: var(--border-md);
  color: var(--text-muted);
}
.about-socials .footer-social:hover {
  background: var(--red-lt);
  border-color: var(--red-mid);
  color: var(--red-mid);
}


/* ═══════════════════════════════════════════════════════════════
   ARTICLE READABILITY SYSTEM
   Improves scanning, rhythm, and legibility for long-form content
   Works in both light mode and dark mode
   ═══════════════════════════════════════════════════════════════ */

/* ── Article body prose: better line-height & font size ── */
.service-detail-body {
  --article-lh: 1.85;
  --article-gap: 1.5rem;
}

/* Base paragraph: slightly larger, more air */
.service-detail-body p {
  font-size: var(--fs-lg);         /* 1.125rem — easier to read than base */
  line-height: var(--article-lh);
  margin-bottom: var(--article-gap);
  color: var(--text-body);
  max-width: 68ch;                 /* constrains line length for readability */
}

/* Lead paragraph — first real paragraph after the hero */
.service-detail-body > p:first-of-type {
  font-size: var(--fs-xl);         /* 1.25rem — a gentle entrance */
  line-height: 1.8;
  color: var(--text-primary);
  font-weight: 500;
  max-width: 62ch;
}

/* ── Heading hierarchy & spacing ── */

/* H2: section titles — more breathing room above */
.service-detail-body h2 {
  font-size: clamp(1.5rem, 2.5vw, var(--fs-2xl));
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 3.5rem;
  margin-bottom: 0.9rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  padding-top: 1rem;
  border-top: 2px solid var(--border);
  /* Accent rule to anchor each section visually */
  position: relative;
}
.service-detail-body h2::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  width: 2.5rem;
  height: 2px;
  background: var(--red-mid);
  border-radius: 2px;
}
[data-theme="dark"] .service-detail-body h2::before {
  background: #A78BFA;
}

/* H3: subsection titles — tighter but distinct */
.service-detail-body h3 {
  font-size: var(--fs-xl);         /* 1.25rem */
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 2.25rem;
  margin-bottom: 0.65rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* H4: used for FAQ questions */
.service-detail-body h4 {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}

/* ── Inline strong: make bold stand out clearly ── */
.service-detail-body p strong {
  color: var(--text-primary);
  font-weight: 700;
}

/* ── Checklist / deliverables list: better spacing & icon alignment ── */
.service-detail-body .deliverables-list {
  margin: 1rem 0 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.service-detail-body .deliverables-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-lg);
  line-height: 1.65;
  color: var(--text-body);
  transition: background 0.18s ease;
  border-radius: 0;
}
.service-detail-body .deliverables-list li:first-child {
  border-top: 1px solid var(--border);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.service-detail-body .deliverables-list li:last-child {
  border-radius: 0 0 var(--r-sm) var(--r-sm);
}
.service-detail-body .deliverables-list li:hover {
  background: var(--bg-surface);
}
[data-theme="dark"] .service-detail-body .deliverables-list li:hover {
  background: rgba(255, 255, 255, 0.03);
}
/* Check icon: accent colour, top-aligned */
.service-detail-body .deliverables-list .feature-icon {
  flex-shrink: 0;
  margin-top: 0.1rem;
  font-size: 1rem;
  color: var(--red-deep);
  line-height: 1.65;
}
[data-theme="dark"] .service-detail-body .deliverables-list .feature-icon {
  color: #A78BFA;
}

/* ── Key stat / callout paragraphs (bold openers) ── */
/* Bold-first paragraphs (like "GBP signals dominate.") get a subtle
   left border to flag them as scan-worthy key findings */
.service-detail-body p:has(> strong:first-child) {
  border-left: 3px solid var(--red-mid);
  padding-left: 1rem;
  margin-left: -0.25rem;
  background: rgba(212, 59, 42, 0.03);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
[data-theme="dark"] .service-detail-body p:has(> strong:first-child) {
  border-left-color: #A78BFA;
  background: rgba(167, 139, 250, 0.04);
}

/* ── Links in body copy ── */
.service-detail-body a[style*="color:var(--tangerine)"],
.service-detail-body a[href] {
  text-decoration: underline;
  text-decoration-color: rgba(212, 59, 42, 0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.18s;
}
.service-detail-body a[style*="color:var(--tangerine)"]:hover,
.service-detail-body a[href]:hover {
  text-decoration-color: var(--red-mid);
}
[data-theme="dark"] .service-detail-body a[style*="color:var(--tangerine)"],
[data-theme="dark"] .service-detail-body a[href] {
  text-decoration-color: rgba(167, 139, 250, 0.35);
}
[data-theme="dark"] .service-detail-body a[style*="color:var(--tangerine)"]:hover,
[data-theme="dark"] .service-detail-body a[href]:hover {
  text-decoration-color: #A78BFA;
}

/* ── Figure / image captions ── */
.service-detail-body figure {
  margin: 2.5rem 0;
}
.service-detail-body figure img {
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  display: block;
  width: 100%;
}
.service-detail-body figure figcaption {
  font-size: 0.825rem;
  color: var(--text-subtle);
  margin-top: 0.6rem;
  padding: 0 0.25rem;
  line-height: 1.55;
  font-style: italic;
}

/* ── FAQ section: treat H3 questions as accordion-style scannable items ── */
.service-detail-body h2 + h3,
.service-detail-body h2 + p + h3 {
  margin-top: 1.75rem;
}

/* Visually distinguish FAQ h3 items from normal subsection h3s */
/* Selector targets h3 elements that come after the "Frequently Asked Questions" h2 */
.service-detail-body .faq-zone h3 {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0.85rem 1.1rem;
  margin-top: 1rem;
  font-size: var(--fs-lg);
  cursor: default;
}
[data-theme="dark"] .service-detail-body .faq-zone h3 {
  background: rgba(255, 255, 255, 0.03);
}

/* ── Sidebar cards: a touch more visual weight ── */
.sidebar-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease;
}
.sidebar-card:hover {
  box-shadow: var(--shadow-md);
}
.sidebar-card h4 {
  font-size: var(--fs-lg);
  color: var(--text-primary);
  margin-bottom: 0.75rem;
  font-weight: 700;
  line-height: 1.25;
}

/* ── Table of contents: reading progress aid (optional enhancement) ── */

/* ── Prose section spacing: first h2 shouldn't have massive top margin ── */
.service-detail-body > h2:first-of-type {
  margin-top: 2rem;
}

/* ── Article CTA block (inline at article end) ── */
.service-detail-body > div[style*="border-radius:var(--r-lg)"] {
  border-radius: var(--r-lg) !important;
}

/* ── Author block: improve legibility ── */
.service-detail-body > div[style*="border-top"] p[style*="color:var(--white)"],
.service-detail-body > div[style*="border-top"] p[style*="font-weight:600"] {
  font-size: var(--fs-lg);
}

/* ── Mobile: tighten up for narrow screens ── */
@media (max-width: 768px) {
  .service-detail-body p {
    font-size: var(--fs-base);
    max-width: 100%;
  }
  .service-detail-body > p:first-of-type {
    font-size: var(--fs-lg);
  }
  .service-detail-body h2 {
    margin-top: 2.5rem;
    font-size: var(--fs-xl);
  }
  .service-detail-body h3 {
    margin-top: 1.75rem;
    font-size: var(--fs-lg);
  }
  .service-detail-body .deliverables-list li {
    font-size: var(--fs-base);
    padding: 0.65rem 0.5rem;
  }
  .service-detail-body p:has(> strong:first-child) {
    padding-left: 0.75rem;
  }
}