/* =============================================
   VESPER DIGITAL - GLOBAL STYLESHEET v1.0
   Used by all pages. Link as: <link rel="stylesheet" href="style.css">
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/* ── TOKENS ── */
:root {
  --navy:    #0e1527;
  --navy-2:  #162035;
  --navy-3:  #1e2d4a;
  --white:   #ffffff;
  --off:     #f5f7fa;
  --body:    #64748b;
  --border:  #e2e8f0;
  --green:   #22c55e;
  --green-d: #16a34a;
  --green-bg:#f0fdf4;
  --accent:  #3b82f6;
  --font:    'Plus Jakarta Sans', sans-serif;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--font); color: var(--navy); background: #fff; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ── ANIMATIONS ── */
@keyframes blink   { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes floatY  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes floatY2 { 0%,100%{transform:rotate(-3deg) translateY(0)} 50%{transform:rotate(-3deg) translateY(-10px)} }
@keyframes floatY3 { 0%,100%{transform:rotate(2deg) translateY(0)}  50%{transform:rotate(2deg) translateY(-8px)} }

/* ── NAV ── */
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; background: rgba(14,21,39,0.97); backdrop-filter: blur(12px); padding: 0 5%; border-bottom: 1px solid rgba(255,255,255,0.06); }
.nav-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo { font-size: 22px; font-weight: 800; color: #fff; text-decoration: none; letter-spacing: -0.5px; }
.logo span { color: var(--green); }
.nav-links { display: flex; align-items: center; gap: 20px; list-style: none; }
.nav-links a { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.6); text-decoration: none; transition: color .2s; white-space: nowrap; }
.nav-links a:hover, .nav-links a.active { color: #fff; }
.nav-phone { color: rgba(255,255,255,0.7) !important; font-weight: 600 !important; }
.nav-btn { background: var(--green) !important; color: #fff !important; padding: 9px 16px; border-radius: 6px; font-weight: 700 !important; transition: background .2s !important; }
.nav-btn:hover { background: var(--green-d) !important; }
.nav-mob-btn { display: none; background: none; border: none; color: #fff; font-size: 22px; cursor: pointer; padding: 4px; }

/* ── FOOTER ── */
footer { background: var(--navy); padding: 72px 5% 40px; }
.foot-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 56px; margin-bottom: 44px; }
.foot-logo { font-size: 22px; font-weight: 800; color: #fff; text-decoration: none; letter-spacing: -.5px; display: block; margin-bottom: 14px; }
.foot-logo span { color: var(--green); }
.foot-desc { font-size: 14px; color: rgba(255,255,255,0.4); line-height: 1.7; max-width: 260px; margin-bottom: 20px; }
.foot-contact a { display: flex; align-items: center; gap: 6px; font-size: 14px; color: rgba(255,255,255,0.5); text-decoration: none; margin-bottom: 8px; transition: color .2s; }
.foot-contact a:hover { color: #fff; }
.foot-col h5, footer .foot-inner > div > h5 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255,255,255,0.3); margin-bottom: 16px; }
.foot-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.foot-links a { font-size: 14px; color: rgba(255,255,255,0.5); text-decoration: none; transition: color .2s; }
.foot-links a:hover { color: #fff; }
.foot-bottom { max-width: 1200px; margin: 0 auto; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.foot-copy { font-size: 13px; color: rgba(255,255,255,0.3); }
.foot-copy a { color: rgba(255,255,255,0.4); text-decoration: none; }
.foot-copy a:hover { color: #fff; }

/* ── LAYOUT ── */
.section    { padding: 72px 5%; }
.off-section{ padding: 72px 5%; background: var(--off); }
.dark-section{padding: 72px 5%; background: var(--navy); }
.s-inner    { max-width: 1200px; margin: 0 auto; }
.two-col    { display: grid; grid-template-columns: 3fr 2fr; gap: 60px; align-items: start; }
.section-intro { max-width: 100%; margin-bottom: 48px; }
.section-intro .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--green-d); margin-bottom: 14px; }
.section-intro .s-title { font-size: clamp(28px,3.5vw,46px); font-weight: 800; letter-spacing: -1.5px; line-height: 1.1; color: var(--navy); margin-bottom: 18px; }
.section-intro .s-title-lt { color: #fff; }
.section-intro p { font-size: 17px; color: var(--body); line-height: 1.75; }
.section-intro-lt .eyebrow { color: rgba(74,222,128,.7); }
.section-intro-lt .s-title-lt { color: #fff; }
.three-col  { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }

/* ── TYPOGRAPHY ── */
.eyebrow    { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--green-d); margin-bottom: 14px; }
.eyebrow-lt { color: rgba(74,222,128,.7); }
.s-title    { font-size: clamp(28px,3.5vw,46px); font-weight: 800; letter-spacing: -1.5px; line-height: 1.1; color: var(--navy); margin-bottom: 18px; }
.s-title-lt { color: #fff; }
.s-sub      { font-size: 17px; color: var(--body); line-height: 1.7; }
.s-sub-lt   { color: rgba(255,255,255,0.5); }
.section-head { margin-bottom: 56px; }

/* ── BUTTONS ── */
.btn-green  { background: var(--green); color: #fff; padding: 15px 28px; border-radius: 6px; font-size: 15px; font-weight: 700; text-decoration: none; transition: all .2s; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font); border: none; cursor: pointer; }
.btn-green:hover { background: var(--green-d); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(34,197,94,0.3); }
.btn-outline{ background: transparent; color: var(--navy); padding: 13px 26px; border-radius: 6px; font-size: 15px; font-weight: 600; text-decoration: none; border: 1.5px solid var(--border); transition: all .2s; display: inline-flex; align-items: center; gap: 8px; }
.btn-outline:hover { border-color: var(--navy); }
.btn-ghost  { color: rgba(255,255,255,.65); font-size: 15px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: color .2s, gap .2s; }
.btn-ghost:hover { color: #fff; gap: 10px; }

/* ── PAGE HERO (inner pages) ── */
.page-hero  { background: var(--navy); padding: 144px 5% 80px; position: relative; overflow: hidden; }
.page-hero::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px); background-size:60px 60px; pointer-events:none; }
.page-hero::after  { content:''; position:absolute; top:-200px; right:-100px; width:600px; height:600px; background:radial-gradient(circle,rgba(34,197,94,.1) 0%,transparent 65%); pointer-events:none; }
.page-hero-inner   { max-width:1200px; margin:0 auto; position:relative; z-index:1; }
.page-tag  { display:inline-flex; align-items:center; gap:8px; background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.25); color:#4ade80; font-size:13px; font-weight:600; padding:6px 14px; border-radius:100px; margin-bottom:22px; }
.page-tag-dot { width:7px; height:7px; background:var(--green); border-radius:50%; animation:blink 2s infinite; }
.page-hero h1 { font-size:clamp(32px,4vw,52px); font-weight:800; letter-spacing:-2px; line-height:1.08; color:#fff; margin-bottom:20px; max-width:960px; }
.page-hero h1 .hl { color:var(--green); }
.page-hero-sub { font-size:18px; color:rgba(255,255,255,.5); line-height:1.7; max-width:960px; margin-bottom:36px; }
.breadcrumb { display:flex; align-items:center; gap:8px; font-size:13px; color:rgba(255,255,255,.35); margin-bottom:24px; }
.breadcrumb a { color:rgba(255,255,255,.4); text-decoration:none; transition:color .2s; }
.breadcrumb a:hover { color:rgba(255,255,255,.8); }
.breadcrumb span { color:rgba(255,255,255,.2); }

/* ── CARDS ── */
.card { background: var(--off); border: 1px solid var(--border); border-radius: 14px; padding: 32px; transition: all .25s; }
.card:hover { border-color: #94a3b8; box-shadow: 0 12px 40px rgba(14,21,39,.07); transform: translateY(-3px); }
.dark-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: 28px; transition: background .2s; }
.dark-card:hover { background: rgba(255,255,255,.07); }
.card-ico { margin-bottom: 20px; display: block; }
.ico-box { width: 44px; height: 44px; border-radius: 10px; background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.2); display: inline-flex; align-items: center; justify-content: center; }
.card h3 { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 8px; letter-spacing: -.3px; }
.card p  { font-size: 14px; color: var(--body); line-height: 1.65; }

/* ── STAT BOXES ── */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stat-box { padding: 26px; background: var(--off); border: 1px solid var(--border); border-radius: 14px; }
.stat-box.wide { grid-column: 1/-1; background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.2); }
.stat-n { font-size: 44px; font-weight: 800; letter-spacing: -2px; color: var(--navy); line-height: 1; }
.stat-box.wide .stat-n { color: var(--green); }
.stat-l { font-size: 13px; color: var(--body); line-height: 1.4; margin-top: 8px; }
/* Dark background variant */
.dark-section .stat-box { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.07); }
.dark-section .stat-n { color: #fff; }
.dark-section .stat-box.wide .stat-n { color: var(--green); }
.dark-section .stat-l { color: rgba(255,255,255,.4); }

/* ── PROCESS STEPS ── */
.proc-steps { margin-top: 40px; }
.proc-step { display: flex; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--border); }
.proc-step:last-child { border-bottom: none; }
.step-nw { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.step-n { width: 40px; height: 40px; border-radius: 10px; background: var(--navy); color: #fff; font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.step-l { width: 2px; flex: 1; background: var(--border); margin-top: 8px; min-height: 20px; }
.proc-step:last-child .step-l { display: none; }
.step-b h4 { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 6px; padding-top: 8px; }
.step-b p  { font-size: 14px; color: var(--body); line-height: 1.65; }

/* ── CHECK LIST ── */
.check-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.check-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--body); line-height: 1.55; }
.check-list li::before { content: '✓'; width: 20px; height: 20px; background: var(--green-bg); color: var(--green-d); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.check-list.light li { color: rgba(255,255,255,.7); }
.check-list.light li::before { background: rgba(34,197,94,.15); color: var(--green); }

/* ── RANK CARD VISUAL ── */
.rank-card { background: var(--navy); border-radius: 20px; padding: 36px; }
.rank-card h3 { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.35); margin-bottom: 20px; text-transform: uppercase; letter-spacing: 1.5px; }
.rank-bars { display: flex; flex-direction: column; gap: 14px; }
.rbi { display: flex; align-items: center; gap: 12px; }
.rbi-label { font-size: 12px; color: rgba(255,255,255,.4); width: 64px; flex-shrink: 0; text-align: right; }
.rbi-bw { flex: 1; height: 8px; background: rgba(255,255,255,.06); border-radius: 100px; overflow: hidden; }
.rbi-b  { height: 100%; border-radius: 100px; }
.rbi-p  { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.4); width: 28px; text-align: right; flex-shrink: 0; }
.rbi-p.top { color: var(--green); }
.rank-note { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08); font-size: 12px; color: rgba(255,255,255,.25); font-style: italic; line-height: 1.5; }

/* ── TESTIMONIALS ── */
.tcard { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 30px; transition: all .25s; }
.tcard:hover { border-color: var(--navy); box-shadow: 0 12px 36px rgba(14,21,39,.07); }
.tstars { color: #f59e0b; font-size: 17px; letter-spacing: 1px; margin-bottom: 14px; }
.ttext { font-size: 15px; line-height: 1.7; color: var(--body); margin-bottom: 22px; font-style: italic; }
.tauthor { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--border); }
.tav { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0; }
.taname { font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 2px; }
.tabiz  { font-size: 12px; color: var(--body); }

/* ── CASE STUDY CARDS ── */
.cs-card { border: 1px solid var(--border); border-radius: 16px; padding: 30px; background: #fff; transition: all .25s; }
.cs-card:hover { border-color: var(--navy); box-shadow: 0 12px 36px rgba(14,21,39,.08); transform: translateY(-3px); }
.cs-card.dark { background: var(--navy); border-color: var(--navy); }
.ba-row { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.ba-chip { padding: 5px 12px; border-radius: 6px; font-size: 13px; font-weight: 700; }
.ba-before { background: #fef2f2; color: #dc2626; }
.ba-after  { background: var(--green-bg); color: var(--green-d); }
.cs-card.dark .ba-before { background: rgba(239,68,68,.12); color: #f87171; }
.cs-card.dark .ba-after  { background: rgba(34,197,94,.15); color: #4ade80; }
.ba-arrow { color: #94a3b8; font-size: 18px; }
.cs-card.dark .ba-arrow  { color: rgba(255,255,255,.2); }
.cs-biz { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.cs-card.dark .cs-biz { color: #fff; }
.cs-loc { font-size: 13px; color: var(--body); margin-bottom: 18px; }
.cs-card.dark .cs-loc { color: rgba(255,255,255,.35); }
.cs-stat { padding-top: 18px; border-top: 1px solid var(--border); }
.cs-card.dark .cs-stat { border-color: rgba(255,255,255,.08); }
.cs-n { font-size: 34px; font-weight: 800; letter-spacing: -1.5px; color: var(--navy); line-height: 1; margin-bottom: 4px; }
.cs-card.dark .cs-n { color: var(--green); }
.cs-l { font-size: 13px; color: var(--body); }
.cs-card.dark .cs-l { color: rgba(255,255,255,.35); }

/* ── AUDIT FEATURES ── */
.af-item { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 10px; }
.af-ico  { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.af-txt  { font-size: 14px; color: rgba(255,255,255,.55); line-height: 1.5; }
.af-txt strong { color: #fff; display: block; font-size: 15px; margin-bottom: 2px; }

/* ── FORMS ── */
.form-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 40px; }
.form-card.light { background: var(--off); border-color: var(--border); }
.form-title { font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 8px; letter-spacing: -.5px; }
.form-card.light .form-title { color: var(--navy); }
.form-sub  { font-size: 14px; color: rgba(255,255,255,.4); margin-bottom: 24px; line-height: 1.5; }
.form-card.light .form-sub { color: var(--body); }
.form-fields { display: flex; flex-direction: column; gap: 12px; }
.form-input { width: 100%; padding: 14px 16px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; color: #fff; font-size: 14px; font-family: var(--font); outline: none; transition: border .2s; }
.form-input::placeholder { color: rgba(255,255,255,.3); }
.form-input:focus { border-color: var(--green); }
.form-input.light { background: #fff; border-color: var(--border); color: var(--navy); }
.form-input.light::placeholder { color: #94a3b8; }
.form-input.light:focus { border-color: var(--navy); }
.form-select { width: 100%; padding: 14px 16px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; color: #fff; font-size: 14px; font-family: var(--font); outline: none; appearance: none; transition: border .2s; }
.form-select:focus { border-color: var(--green); }
.form-btn { width: 100%; background: var(--green); color: #fff; padding: 15px; border-radius: 8px; font-size: 15px; font-weight: 700; border: none; cursor: pointer; font-family: var(--font); transition: all .2s; margin-top: 4px; }
.form-btn:hover { background: var(--green-d); transform: translateY(-1px); }
.form-note { font-size: 12px; color: rgba(255,255,255,.25); text-align: center; margin-top: 10px; }

/* ── FAQ ── */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.faq-item { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 26px; transition: all .2s; }
.faq-item:hover { border-color: var(--navy); box-shadow: 0 8px 24px rgba(14,21,39,.06); }
.faq-q { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 10px; line-height: 1.35; }
.faq-a { font-size: 14px; color: var(--body); line-height: 1.7; }

/* ── CTA BOX ── */
.cta-wrap { padding: 80px 5% 120px; }
.cta-box { max-width: 1200px; margin: 0 auto; background: var(--navy); border-radius: 24px; padding: 72px 80px; display: grid; grid-template-columns: 1fr auto; gap: 60px; align-items: center; position: relative; overflow: hidden; }
.cta-box::before { content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px); background-size:20px 20px; }
.cta-box::after  { content:''; position:absolute; bottom:-80px; right:-40px; width:400px; height:400px; background:radial-gradient(circle,rgba(34,197,94,.12) 0%,transparent 60%); pointer-events:none; }
.cta-title { font-size: clamp(26px,3vw,40px); font-weight: 800; letter-spacing: -1.5px; color: #fff; line-height: 1.1; margin-bottom: 14px; position: relative; z-index: 1; }
.cta-sub   { font-size: 16px; color: rgba(255,255,255,.45); line-height: 1.65; position: relative; z-index: 1; }
.cta-right { flex-shrink: 0; position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.cta-note  { font-size: 12px; color: rgba(255,255,255,.3); text-align: center; }

/* ── LOC STRIP ── */
.loc-strip { padding: 22px 5%; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: #fff; }
.loc-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.loc-label { font-size: 12px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; margin-right: 4px; }
.loc-chip  { background: var(--off); border: 1px solid var(--border); border-radius: 6px; padding: 7px 14px; font-size: 13px; font-weight: 600; color: #64748b; white-space: nowrap; text-decoration: none; transition: all .2s; }
.loc-chip:hover { border-color: #94a3b8; color: var(--navy); }
.loc-note  { font-size: 12px; color: #94a3b8; margin-left: 4px; white-space: nowrap; }

/* ── PRICING ── */
.pricing-header { padding: 16px 20px; }
.price-tier { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; transition: all .25s; }
.price-tier:hover { box-shadow: 0 16px 48px rgba(14,21,39,.1); transform: translateY(-4px); }
.price-tier.featured { border-color: var(--navy); }
.price-badge { background: var(--navy); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 100px; text-transform: uppercase; letter-spacing: .5px; display: inline-block; margin-bottom: 14px; }
.price-badge.green { background: var(--green); }
.price-name { font-size: 18px; font-weight: 800; color: var(--navy); margin-bottom: 6px; }
.price-amount { font-size: 44px; font-weight: 800; letter-spacing: -2px; color: var(--navy); line-height: 1; margin-bottom: 4px; }
.price-amount span { font-size: 18px; font-weight: 600; letter-spacing: 0; color: var(--body); }
.price-period { font-size: 13px; color: var(--body); margin-bottom: 24px; }
.price-features { list-style: none; display: flex; flex-direction: column; gap: 10px; padding: 20px; border-top: 1px solid var(--border); }
.price-features li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--body); }
.price-features li::before { content: '✓'; color: var(--green-d); font-weight: 700; flex-shrink: 0; }
.price-cta { padding: 20px; }

/* ── REVEAL ── */
.reveal { opacity: 1; transform: none; }
.reveal.in { opacity: 1; transform: none; }
.d1 { transition-delay: .08s; }
.d2 { transition-delay: .16s; }
.d3 { transition-delay: .24s; }
.d4 { transition-delay: .32s; }

/* ── RESPONSIVE ── */
@media(max-width:1100px) {
  .two-col { grid-template-columns: 1fr; }
  .three-col { grid-template-columns: 1fr 1fr; }
  .cta-box { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: 1fr; }
  .foot-inner { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media(max-width:768px) {
  nav { padding: 0 20px; }
  .nav-links { display: none; flex-direction: column; position: absolute; top: 72px; left: 0; right: 0; background: var(--navy); padding: 20px; border-top: 1px solid rgba(255,255,255,.08); gap: 16px; }
  .nav-links.open { display: flex; }
  .nav-mob-btn { display: block; }
  .section, .off-section, .dark-section { padding: 72px 20px; }
  .cta-wrap { padding: 60px 20px; }
  .cta-box { padding: 48px 28px; }
  .page-hero { padding: 120px 20px 60px; }
  .three-col { grid-template-columns: 1fr; }
  .loc-strip { padding: 18px 20px; }
  footer { padding: 56px 20px 32px; }
  .foot-inner { grid-template-columns: 1fr; gap: 36px; }
}

/* ── INLINE LINK STYLE ── */
.text-link { color: var(--green-d); font-weight: 600; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s; }
.text-link:hover { border-color: var(--green-d); }
.text-link-lt { color: #4ade80; font-weight: 600; text-decoration: none; }
.text-link-lt:hover { text-decoration: underline; }

/* ── NOTICE BOX ── */
.notice { background: var(--green-bg); border: 1px solid rgba(34,197,94,.2); border-radius: 10px; padding: 16px 20px; font-size: 14px; color: #166534; line-height: 1.6; }


/* =============================================
   VESPER DIGITAL - STYLESHEET ADDITIONS
   Classes used by service, location and new
   content pages — appended to base stylesheet.
   ============================================= */

/* ── NAV TOP BAR (phone CTA above nav) ── */
.nav-top-bar { background: rgba(34,197,94,0.12); border-bottom: 1px solid rgba(34,197,94,0.15); padding: 10px 5%; text-align: center; }
.nav-top-bar a { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-size: 15px; font-weight: 500; transition: opacity .2s; }
.nav-top-bar a:hover { opacity: .85; }
.nav-top-bar a strong { font-size: 20px; font-weight: 800; letter-spacing: -.5px; color: #fff; }
.nav-top-bar a .ntb-label { color: rgba(255,255,255,.6); font-size: 14px; }

/* ── SERVICE CARDS (svc-grid / svc-card) ── */
.svc-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 52px; }
.svc-card { background: #fff; border: 1.5px solid var(--border); border-radius: 16px; padding: 32px 28px; text-decoration: none; color: inherit; transition: all .2s; display: block; }
.svc-card:hover { border-color: var(--green); box-shadow: 0 8px 32px rgba(34,197,94,.12); transform: translateY(-2px); }
.svc-ico { display: block; margin-bottom: 20px; }
.svc-card h3 { font-size: 18px; font-weight: 800; letter-spacing: -.5px; color: var(--navy); margin-bottom: 10px; line-height: 1.3; }
.svc-card p { font-size: 15px; color: var(--body); line-height: 1.7; margin: 0; }
.svc-link { color: var(--green-d); font-weight: 600; }

/* ── INDUSTRY CHIPS ── */
.ind-chip { background: var(--off); border: 1px solid var(--border); border-radius: 100px; padding: 8px 16px; font-size: 14px; font-weight: 600; color: var(--body); white-space: nowrap; }

/* ── HERO PHONE BLOCK ── */
.hero-phone-block { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.hero-phone-big { display: inline-flex; align-items: center; gap: 12px; background: rgba(34,197,94,0.1); border: 2px solid rgba(34,197,94,0.35); color: #fff; text-decoration: none; padding: 14px 24px; border-radius: 10px; transition: all .2s; width: fit-content; }
.hero-phone-big:hover { background: rgba(34,197,94,0.18); border-color: rgba(34,197,94,0.6); transform: translateY(-1px); }
.hpb-label { font-size: 14px; font-weight: 500; color: rgba(255,255,255,.55); white-space: nowrap; }
.hpb-num { font-size: 26px; font-weight: 800; letter-spacing: -1px; color: var(--green); white-space: nowrap; }
.hpb-note { font-size: 12px; color: rgba(255,255,255,.3); padding-left: 4px; }

/* ── FOOTER PHONE CTA ── */
.foot-phone-cta { display: flex; align-items: center; gap: 14px; background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.2); border-radius: 10px; padding: 14px 18px; text-decoration: none; margin-top: 20px; transition: all .2s; color: #fff; }
.foot-phone-cta:hover { background: rgba(34,197,94,0.14); border-color: rgba(34,197,94,0.4); }
.foot-phone-cta svg { color: #4ade80; flex-shrink: 0; }

/* ── FIND US BLOCK (GBP map embed above footer) ── */
.find-us-block { background: rgba(255,255,255,0.04); border-top: 1px solid rgba(255,255,255,0.07); padding: 40px 5%; }
.find-us-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 2fr; gap: 40px; align-items: center; }
.find-us-title { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 14px; letter-spacing: -.3px; }
.find-us-address { font-style: normal; font-size: 14px; color: rgba(255,255,255,.45); line-height: 1.9; margin-bottom: 18px; }
.find-us-links { display: flex; flex-direction: column; gap: 10px; }
.find-us-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.5); text-decoration: none; transition: color .2s; }
.find-us-link:hover { color: var(--green); }
.find-us-map iframe { border-radius: 10px; filter: grayscale(0.3) contrast(0.95); }

/* ── PAGE TAG (pill label in page hero) ── */
.page-tag { display: inline-flex; align-items: center; gap: 8px; background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.25); border-radius: 100px; padding: 6px 14px; font-size: 13px; font-weight: 600; color: #4ade80; margin-bottom: 20px; }
.page-tag-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); display: inline-block; animation: blink 1.6s ease-in-out infinite; }

/* ── DIAGNOSIS CHECKLIST ── */
.diag-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 36px; }
.diag-item { display: grid; grid-template-columns: 44px 1fr; align-items: start; background: #fff; border: 1.5px solid var(--border); border-radius: 12px; padding: 16px 20px; cursor: pointer; transition: all .2s; user-select: none; }
.diag-item:hover { border-color: var(--green); background: var(--green-bg); }
.diag-item.checked { border-color: var(--green); background: var(--green-bg); }
.diag-check { width: 24px; height: 24px; border-radius: 6px; border: 2px solid var(--border); background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; transition: all .2s; }
.diag-item.checked .diag-check { background: var(--green); border-color: var(--green); }
.diag-tick { color: #fff; opacity: 0; transform: scale(.6); transition: all .18s; }
.diag-item.checked .diag-tick { opacity: 1; transform: scale(1); }
.diag-label { display: flex; flex-direction: column; gap: 4px; padding-left: 12px; }
.diag-label strong { font-size: 15px; font-weight: 700; color: var(--navy); line-height: 1.3; }
.diag-label span { font-size: 13px; color: var(--body); line-height: 1.5; }
.diag-result { background: var(--navy); border-radius: 14px; padding: 28px 32px; display: none; flex-direction: column; gap: 20px; margin-bottom: 0; }
.diag-result.visible { display: flex; animation: fadeSlide .35s ease forwards; }
@keyframes fadeSlide { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.diag-result-inner { display: flex; align-items: flex-start; gap: 16px; }
.diag-result-icon { font-size: 32px; flex-shrink: 0; }
.diag-result-heading { font-size: 16px; font-weight: 700; color: #fff; line-height: 1.5; margin-bottom: 6px; }
.diag-result-sub { font-size: 13px; color: rgba(255,255,255,.4); margin: 0; }
.diag-cta { align-self: flex-start; }
.diag-static-cta { transition: opacity .2s; }
.diag-static-cta.hidden { display: none; }

/* ── RESPONSIVE ADDITIONS ── */
@media (max-width: 1024px) {
  .svc-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .nav-top-bar { padding: 10px 16px; }
  .nav-top-bar a { font-size: 13px; gap: 6px; }
  .nav-top-bar a strong { font-size: 17px; }
  .ntb-label { display: none; }
  .svc-grid { grid-template-columns: 1fr; }
  .find-us-inner { grid-template-columns: 1fr; }
  .find-us-block { padding: 32px 20px; }
  .diag-item { grid-template-columns: 38px 1fr; padding: 14px 16px; }
  .diag-result { padding: 22px 20px; }
  .diag-result-inner { flex-direction: column; gap: 10px; }
  .hero-phone-big { padding: 12px 16px; width: 100%; }
  .hpb-num { font-size: 20px; }
  .hpb-label { font-size: 12px; }
  .audit-grid { grid-template-columns: 1fr; }
  .form-card { padding: 28px 20px; }
  .form-fields { gap: 10px; }
  .faq-grid { grid-template-columns: 1fr; }
}

/* ── LAUNCH PRICING — struck-through original + launch price ── */
.pt-was{font-size:18px;font-weight:600;color:#94a3b8;text-decoration:line-through;letter-spacing:-.5px;margin-bottom:2px;display:block}
.pt-launch-label{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--green-d);margin-bottom:4px;display:block}
.pt-launch-price{font-size:48px;font-weight:800;letter-spacing:-2px;color:var(--navy);line-height:1;margin-bottom:4px}
.pt-launch-price sup{font-size:22px;font-weight:700;vertical-align:top;margin-top:8px;letter-spacing:0}
.pt-badge.launch{background:rgba(34,197,94,.1);color:var(--green-d);border:1px solid rgba(34,197,94,.25)}

/* ── 480px BREAKPOINT ── */
@media (max-width: 480px) {
  .svc-grid { grid-template-columns: 1fr; }
  .three-col { grid-template-columns: 1fr; }
  .foot-inner { grid-template-columns: 1fr; gap: 28px; }
  .page-hero h1 { font-size: clamp(26px, 7vw, 38px); }
  .s-title { font-size: clamp(24px, 7vw, 36px); }
  .cta-box { padding: 36px 20px; }
  .faq-grid { grid-template-columns: 1fr; }
  .find-us-inner { grid-template-columns: 1fr; }
}

/* ── REVEAL FALLBACK — force visible on mobile if JS observer misses ── */
@media (max-width: 768px) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}