:root{
  /* Coarse pure-white base - true white, neutral grays for layering, no warm tint */
  --bg:#FFFFFF;
  --bg-2:#FFFFFF;
  --bg-3:#EFEFEF;
  --bg-4:#E4E4E4;
  --line:#DEDEDE;
  --line-strong:rgba(26,24,20,0.18);
  /* Two brand colors only: golden orange (#ff751f, matches the logo mark)
     for every fill/border/glow, and black for all text and icon strokes.
     Orange is too light to pass text contrast on white (2.7:1), so it is
     never used as a foreground color - only as a background with black
     content on top, or as decorative fills/borders/shadows. */
  --accent:#FF751F;
  --text:#1A1814;
  --muted:#5C574C;
  --muted-dim:#6E685C;
  --maxw:1120px;
  --font-display:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-label:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --glow-amber:0 2px 10px rgba(255,117,31,0.22);
  --glow-amber-lg:0 24px 50px -30px rgba(255,117,31,0.4);
  --hp2-navy:#0b1e36;
  --hp2-navy-soft:#122a4a;
  --hp2-orange-text:#c2410c;
  --accent-text:#c2410c;
  --hp2-orange-text-dark:#ff9a52;
  color-scheme:light;
}
*{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  overflow-x:clip;
}
body{
  overflow-x:clip;
  max-width:100%;
}
html body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-display);
  font-size:17.5px;
  font-weight:400;
  line-height:1.55;
  letter-spacing:normal;
  text-align:left;
  -webkit-font-smoothing:antialiased;
}

p{
  margin:0 0 1rem;
  max-width:70ch;
  line-height:1.55;
  font-weight:400;
  text-align:left;
  letter-spacing:normal;
  overflow-wrap:break-word;
  word-wrap:break-word;
}
li, dt, dd, blockquote{
  overflow-wrap:break-word;
  word-wrap:break-word;
}

h1,h2,h3,h4,h5,h6{ font-family:var(--font-heading); font-weight:800; line-height:1.15; margin:0; letter-spacing:-0.01em; overflow-wrap:break-word; word-wrap:break-word; }
a, button{ color:inherit; -webkit-tap-highlight-color:rgba(255,117,31,0.18); }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
@media (max-width:480px){ .wrap{ padding:0 16px; } }
.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{ padding:72px 0; }
section + section{ border-top:1px solid var(--line); }
section[id]{ scroll-margin-top:88px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--text); outline-offset:2px; border-radius:4px;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}
@keyframes ping{ 75%,100%{ transform:scale(2.4); opacity:0; } }

/* ---------- SCROLL REVEAL ---------- */
.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.js .reveal.in-view{ opacity:1; transform:translateY(0); }
.card-grid .reveal:nth-child(1), .value-grid .reveal:nth-child(1), .pain-grid .reveal:nth-child(1), .plan-grid .reveal:nth-child(1), .fit-grid .reveal:nth-child(1), .guarantee-grid .reveal:nth-child(1), .service-group-grid .reveal:nth-child(1){ transition-delay:0ms; }
.card-grid .reveal:nth-child(2), .value-grid .reveal:nth-child(2), .pain-grid .reveal:nth-child(2), .plan-grid .reveal:nth-child(2), .fit-grid .reveal:nth-child(2), .guarantee-grid .reveal:nth-child(2), .service-group-grid .reveal:nth-child(2){ transition-delay:90ms; }
.card-grid .reveal:nth-child(3), .value-grid .reveal:nth-child(3), .pain-grid .reveal:nth-child(3), .plan-grid .reveal:nth-child(3), .fit-grid .reveal:nth-child(3), .guarantee-grid .reveal:nth-child(3){ transition-delay:180ms; }
.card-grid .reveal:nth-child(4), .value-grid .reveal:nth-child(4), .pain-grid .reveal:nth-child(4), .fit-grid .reveal:nth-child(4){ transition-delay:270ms; }
.pain-grid .reveal:nth-child(5){ transition-delay:360ms; }
.pain-grid .reveal:nth-child(6){ transition-delay:450ms; }
.pain-grid .reveal:nth-child(7){ transition-delay:540ms; }

/* ---------- NAV ---------- */
header{
  position:-webkit-sticky;
  position:sticky;
  top:0;
  z-index:1000;
  width:100%;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 14px rgba(0,0,0,0.04);
}
nav.wrap{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; padding:16px 28px; }
.brand{ grid-column:1; justify-self:start; text-decoration:none; display:flex; align-items:center; }
.brand-logo{ height:32px; width:auto; display:block; object-fit:contain; transition:opacity .2s ease, transform .2s ease; }
.brand:hover .brand-logo{ opacity:.92; transform:scale(1.02); }
.footer-logo{ height:36px; margin-bottom:4px; }
.logo-mark{ width:32px; height:32px; border-radius:9px; background:var(--bg-2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; box-shadow:0 0 14px rgba(255,117,31,0.18); flex-shrink:0; }
.logo-mark .dot{ width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 6px 1px rgba(255,117,31,0.45); display:block; }
.brand .accent-dot{ color:var(--text); }
.navlinks{ justify-self:center; display:flex; align-items:center; gap:30px; font-size:16.5px; }
.navlinks a{ text-decoration:none; color:var(--muted); font-family:var(--font-label); font-size:16px; font-weight:500; letter-spacing:normal; }
.navlinks a:hover{ color:var(--text); }
.nav-right{ grid-column:3; justify-self:end; display:flex; align-items:center; gap:14px; }
.nav-cta{ background:var(--accent); color:var(--text); font-size:16px; font-weight:600; padding:10px 18px; border-radius:999px; text-decoration:none; white-space:nowrap; touch-action:manipulation; box-shadow:var(--glow-amber); transition:background-color .2s ease, box-shadow .2s ease; }
.nav-cta:hover{ box-shadow:0 4px 16px rgba(255,117,31,0.35); }
.nav-toggle{
  display:none; position:relative; width:44px; height:44px; min-width:44px; min-height:44px; flex-shrink:0;
  align-items:center; justify-content:center; border-radius:10px;
  background:var(--bg-2); border:1px solid var(--line); color:var(--text);
  cursor:pointer; touch-action:manipulation;
}
.nav-toggle svg{ position:absolute; width:20px; height:20px; transition:opacity .2s ease, transform .2s ease; }
.nav-toggle .icon-close{ opacity:0; transform:scale(.7) rotate(-45deg); }
.nav-toggle[aria-expanded="true"] .icon-menu{ opacity:0; transform:scale(.7) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .icon-close{ opacity:1; transform:scale(1) rotate(0deg); }
.mobile-menu{ display:none; }
@media (max-width:700px){
  .navlinks{ display:none; }
  .nav-right .nav-cta{ display:none; }
  .nav-toggle{ display:flex; }
  body.nav-open{ overflow:hidden; }

  .mobile-menu{
    display:flex; flex-direction:column; justify-content:flex-start;
    position:fixed; inset:0; top:64px; height:calc(100vh - 64px); height:calc(100dvh - 64px); z-index:999;
    padding:20px 24px 44px; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
    background:rgba(255,255,255,0.98); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  }
  .mobile-menu.is-open{
    opacity:1; visibility:visible; transform:translateY(0);
    transition:opacity .25s ease, transform .25s ease;
  }
  .mobile-menu a{
    position:relative; text-decoration:none; color:var(--muted); font-family:var(--font-display);
    font-size:clamp(22px, 5.5vw, 28px); font-weight:700; letter-spacing:-0.01em; padding:14px 0; border-bottom:1px solid var(--line);
    touch-action:manipulation;
    opacity:0; transform:translateY(14px);
    transition:opacity .35s ease, transform .35s ease, color .2s ease;
  }
  .mobile-menu a:active{ color:var(--text); }
  .mobile-menu.is-open a{ opacity:1; transform:translateY(0); }
  .mobile-menu.is-open a:nth-child(1){ transition-delay:.08s; }
  .mobile-menu.is-open a:nth-child(2){ transition-delay:.13s; }
  .mobile-menu.is-open a:nth-child(3){ transition-delay:.18s; }
  .mobile-menu.is-open a:nth-child(4){ transition-delay:.23s; }
  .mobile-menu.is-open a:nth-child(5){ transition-delay:.28s; }
  .mobile-menu a.nav-cta{ position:relative; color:var(--text); border-bottom:none; text-align:center; margin-top:24px; padding:16px 18px; font-size:16px; font-weight:600; min-height:48px; display:inline-flex; align-items:center; justify-content:center;
  }
  .mobile-menu.is-open a.nav-cta{ transition-delay:.33s; }
  @media (prefers-reduced-motion: reduce){
    .mobile-menu, .mobile-menu a{ transition-duration:.01ms !important; }
  }
}

/* ---------- HERO ---------- */
.hero{
  text-align:center; position:relative; overflow:hidden;
  background:#F1F5F9;
}
.hero-inner{ position:relative; z-index:1; }
.hero .pill{
  display:inline-flex; align-items:center; gap:10px; border:1px solid rgba(255,107,0,0.35); background:#FFFFFF;
  padding:9px 21px; border-radius:999px; font-size:15px; font-family:var(--font-label); font-weight:600; letter-spacing:.03em; color:#0F172A; margin-bottom:28px;
}
.ping-wrap{ position:relative; width:8px; height:8px; display:inline-flex; flex-shrink:0; }
.ping-wrap .ping{ position:absolute; inset:0; border-radius:50%; background:var(--accent); opacity:.75; animation:ping 1.8s cubic-bezier(0,0,0.2,1) infinite; }
.ping-wrap .dot-core{ position:relative; width:8px; height:8px; border-radius:50%; background:var(--accent); }
.hero .ping-wrap .ping, .hero .ping-wrap .dot-core{ background:#FF6B00; }
h1.headline{ font-size:clamp(38px,4.8vw,58px); max-width:19ch; margin:0 auto; }
.hero h1.headline{ color:#0F172A; }
.accent-text{ color:var(--text); text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:5px; text-underline-offset:6px; text-decoration-skip-ink:none; }
.hero p.sub{ color:#334155; font-size:20px; font-weight:600; max-width:56ch; margin:18px auto 0; }
.hero .sub-detail{ color:#475569; font-size:17px; max-width:56ch; margin:14px auto 0; }
.hero-visual{ width:100%; height:auto; max-width:848px; aspect-ratio:1671/941; object-fit:contain; border-radius:18px; margin:30px auto 0; display:block; }
.hero-cta{ display:flex; gap:14px; justify-content:center; margin-top:34px; flex-wrap:wrap; }
.btn{ display:inline-block; text-decoration:none; font-size:16px; font-weight:600; padding:14px 26px; border-radius:999px; touch-action:manipulation; transition:background-color .2s ease, box-shadow .2s ease, border-color .2s ease, transform .15s ease; }
.btn-primary{ background:var(--accent); color:var(--text); box-shadow:var(--glow-amber); }
.btn-primary:hover{ box-shadow:0 4px 16px rgba(255,117,31,0.35); }
.btn-primary:active{ transform:scale(0.97); }
.btn-ghost{ border:1px solid var(--line); color:var(--text); background:var(--bg-2); }
.btn-ghost:hover{ border-color:var(--line-strong); background:var(--bg-3); }
.hero .btn-primary{ background:#FF6B00; color:#FFFFFF; box-shadow:0 4px 15px rgba(0,0,0,0.1); }
.hero .btn-primary:hover{ background:#E56000; box-shadow:0 6px 20px rgba(255,107,0,0.4); }
.hero .btn-ghost{ background:#E2E8F0; color:#0F172A; border-color:rgba(0,0,0,0.1); }
.hero .btn-ghost:hover{ background:rgba(0,0,0,0.05); border-color:rgba(0,0,0,0.1); }
.hero-trust{ color:var(--muted-dim); font-size:15px; margin:18px 0 0; }
.hero .hero-trust{ color:#475569; }

.hero-stats{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(15,23,42,0.15); border-bottom:1px solid rgba(15,23,42,0.15); width:100%; max-width:848px; margin:40px auto 0; }
.hero-stat{ padding:22px 12px; border-right:1px solid rgba(15,23,42,0.15); }
.hero-stat:last-child{ border-right:none; }
.hero-stat .num{ font-family:var(--font-heading); font-weight:800; font-size:22px; color:#0F172A; }
.hero-stat .label{ font-size:15px; color:#475569; margin-top:4px; }
@media (max-width:600px){
  .hero-stats{ grid-template-columns:1fr; }
  .hero-stat{ border-right:none; border-bottom:1px solid rgba(15,23,42,0.15); }
  .hero-stat:last-child{ border-bottom:none; }
}

/* ---------- PAIN POINTS ---------- */
.pain-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px; }
@media (max-width:980px){ .pain-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .pain-grid{ grid-template-columns:1fr; } }
.pain-card{ position:relative; background:var(--bg-2); border:1px solid var(--line); border-radius:16px; padding:28px 26px 24px; transition:border-color .2s ease, transform .2s ease; }
.pain-card:hover{ border-color:rgba(255,117,31,0.3); transform:translateY(-2px); }
.pain-card .quote-mark{ display:block; font-size:44px; line-height:1; color:var(--text); opacity:.5; font-family:var(--font-display); margin-bottom:6px; }
.pain-card p{ color:var(--muted); font-size:17px; }
.pain-bridge{ text-align:center; max-width:56ch; margin:44px auto 0; font-size:21px; color:var(--text); font-weight:600; }

/* ---------- OFFER STACK NOTE ---------- */
.stack-note{ margin-top:32px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.18); border-radius:14px; padding:18px 22px; color:rgba(255,255,255,.75); font-size:16.5px; text-align:center; }
.stack-note strong{ color:#fff; }

/* ---------- GUARANTEE BAND ---------- */
.guarantee-band{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.guarantee-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; text-align:center; }
@media (max-width:860px){ .guarantee-grid{ grid-template-columns:1fr; gap:36px; } }
.guarantee-item .g-icon{ width:44px; height:44px; border-radius:12px; background:rgba(255,117,31,0.12); border:1px solid rgba(255,117,31,0.3); display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }
.guarantee-item .g-icon svg{ width:20px; height:20px; stroke:var(--text); }
.guarantee-item h3{ font-size:20px; margin-bottom:8px; }
.guarantee-item p{ color:var(--muted); font-size:16px; max-width:32ch; margin:0 auto; }
.free-tag{ display:inline-block; font-family:var(--font-label); font-size:15px; font-weight:700; letter-spacing:.03em; color:var(--text); background:rgba(255,117,31,0.12); border:1px solid rgba(255,117,31,0.3); padding:4px 10px; border-radius:999px; margin-bottom:12px; }

/* ---------- FUNNEL DISCLAIMER ---------- */
.funnel-disclaimer{ text-align:center; color:var(--muted-dim); font-size:15px; font-style:italic; margin:20px 0 0; }

/* ---------- WHAT YOU'RE ACTUALLY BUYING ---------- */
.buying-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:48px; }
@media (max-width:760px){ .buying-grid{ grid-template-columns:1fr; } }
.buying-card{ background:var(--bg-2); border:1px solid var(--line); border-radius:20px; padding:34px 38px; transition:border-color .2s ease, transform .2s ease; }
.buying-card:hover{ border-color:rgba(255,117,31,0.35); transform:translateY(-2px); }
.buying-tag{ display:inline-block; font-family:var(--font-label); font-size:15px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text); background:rgba(255,117,31,0.1); border:1px solid rgba(255,117,31,0.25); padding:4px 12px; border-radius:999px; margin-bottom:16px; }
.buying-card h3, .buying-card h2{ font-size:23px; margin-bottom:12px; }
.buying-card p{ color:var(--muted); font-size:16.5px; }
.buying-note{ text-align:center; max-width:56ch; margin:36px auto 0; color:var(--muted); font-size:16px; }

/* ---------- PRICING ---------- */
#pricing{ --maxw:1280px; }
.pricing-tabs{ display:inline-flex; gap:4px; background:var(--bg-3); border:1px solid var(--line); padding:4px; border-radius:999px; }
.pricing-tab{ appearance:none; border:none; cursor:pointer; font-family:inherit; font-weight:700; font-size:15px; padding:10px 20px; border-radius:999px; color:var(--muted); background:transparent; transition:background-color .2s ease, color .2s ease; touch-action:manipulation; }
.pricing-tab.is-active{ background:#0f172a; color:#fff; }
.pricing-tab:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
@media (max-width:520px){ .pricing-tabs{ display:flex; } .pricing-tab{ flex:1; padding:11px 12px; } }

.pricing-panel{ display:none; }
.pricing-panel.is-active{ display:block; }

.tier-grid{ display:grid; gap:24px; margin-top:32px; }

.tier-card{ position:relative; background:var(--bg-2); border:1px solid var(--line); border-radius:16px; padding:28px; display:flex; flex-direction:column; height:100%; transition:border-color .2s ease, transform .2s ease; }
.tier-card:hover{ border-color:rgba(255,117,31,0.35); transform:translateY(-2px); }
@media (max-width:760px){ .tier-card{ padding:26px 24px; } }

.tier-ribbon{ position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--accent); color:var(--text); font-family:var(--font-label); font-size:15px; font-weight:700; letter-spacing:.03em; padding:4px 10px; border-radius:999px; white-space:nowrap; }

.tier-name{ font-size:23px; font-weight:700; color:var(--text); margin-bottom:4px; }
.tier-meta{ font-size:15px; color:var(--muted-dim); margin-bottom:14px; }
.tier-price{ display:flex; align-items:baseline; gap:8px; margin-bottom:14px; }
.tier-price .amount{ font-family:var(--font-label); font-size:30px; font-weight:700; color:var(--text); }
.tier-price .suffix{ font-size:15px; color:var(--muted-dim); font-weight:600; }
.tier-who{ color:var(--muted); font-size:15.5px; margin:0 0 16px; }

.tier-items{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
.tier-item{ display:flex; align-items:flex-start; gap:10px; }
.tier-item svg{ width:16px; height:16px; stroke:var(--accent); flex-shrink:0; margin-top:3px; }
.tier-item-title{ font-weight:600; font-size:15px; color:var(--text); line-height:1.4; }

.tier-cta{ margin-top:auto; text-align:center; width:100%; }
.tier-card > *:has(+ .tier-cta){ margin-bottom:20px; }


/* ---------- FAQ ---------- */
.faq-list{ max-width:70ch; margin-top:40px; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item:first-child{ border-top:1px solid var(--line); }
.faq-item summary{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 4px; font-size:18px; font-weight:600; color:var(--text); cursor:pointer; list-style:none; touch-action:manipulation; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item .faq-chevron{ width:18px; height:18px; flex-shrink:0; stroke:var(--text); transition:transform .2s ease; }
.faq-item[open] .faq-chevron{ transform:rotate(180deg); }
.faq-item p{ color:var(--muted); font-size:16px; margin:0 4px 22px; max-width:65ch; }


/* ---------- ABOUT ---------- */
.about-card{
  max-width:900px; margin:0 auto; background:#fff; border:1px solid #E2E8F0; border-radius:20px;
  padding:56px; box-shadow:0 16px 40px rgba(15,23,42,0.05);
}
@media (max-width:640px){ .about-card{ padding:32px 24px; } }
.about-header{ display:flex; align-items:center; gap:20px; margin-bottom:32px; }
.about-avatar{ width:88px; height:88px; border-radius:50%; overflow:hidden; border:1px solid #E2E8F0; flex-shrink:0; }
.about-avatar img{ width:100%; height:100%; object-fit:cover; }
.eyebrow{ color:var(--text); font-family:var(--font-label); font-size:15px; font-weight:700; letter-spacing:.1em; margin-bottom:14px; display:block; }
.founder-name{ font-size:16.5px; font-weight:700; color:var(--text); margin:14px 0 0; }
.founder-name span{ display:block; font-weight:500; font-size:15px; color:var(--muted-dim); margin-top:2px; }
.about-header .founder-name{ margin-top:0; }
.section-title{ font-size:clamp(31px,4vw,44px); }
.about-card .section-title{ margin-bottom:24px; }
.about-card p{ color:#334155; font-size:1.05rem; line-height:1.7; max-width:60ch; margin:0 0 20px; }
.about-card p:last-child{ margin-bottom:0; }
.section-lede{ color:var(--muted); font-size:18px; max-width:70ch; margin-top:14px; }
.section-head{ max-width:70ch; }
.stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:28px; padding-top:24px; border-top:1px solid var(--line); }
.stat-row .stat .v{ font-family:var(--font-label); font-size:33px; font-weight:700; color:var(--text); display:block; }
.stat-row .stat .v.accent{ color:var(--text); }
.stat-row .stat .l{ font-size:15px; color:var(--muted); margin-top:4px; }
@media (max-width:520px){ .stat-row{ grid-template-columns:1fr; gap:16px; } }

/* ---------- CORE SERVICES: DARK PANEL + TILE ROW ---------- */
.services-head-row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.services-head-row .section-lede{ margin-top: 12px; max-width: 64ch; }

.services-count-label{
  font-family: var(--font-label);
  font-size:15px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted-dim);
  white-space: nowrap;
  margin-top: 6px;
  flex-shrink: 0;
}

.services-dark-panel{
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 44px 44px 36px;
  margin-top: 48px;
}

.services-tiles-row{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 12px;
}

.service-tile{
  appearance: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  border-radius: 14px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  touch-action: manipulation;
  transition: border-color .25s ease, background-color .25s ease;
}
.service-tile:hover{ background: #fff; }
.service-tile.is-active{ background: #fff; border-color: var(--accent); }
.service-tile:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

.tile-top{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tile-num{ font-family: var(--font-label); font-size:15px; font-weight: 700; color: var(--muted-dim); transition: color .25s ease; }
.tile-tag{ font-family: var(--font-label); font-size:15px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-dim); transition: color .25s ease; }
.service-tile.is-active .tile-num, .service-tile.is-active .tile-tag{ color: var(--accent); }
.tile-title{ font-weight: 700; font-size: 16.5px; color: var(--text); line-height: 1.3; }
.tile-sub{ font-size:15px; color: var(--muted); line-height: 1.4; }

/* ---------- CORE SERVICES: DETAIL PANEL (below the dark block) ---------- */
.service-panels-stage{
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 40px 44px;
  margin-top: 24px;
}

.service-detail-panel{ display: none; }
.service-detail-panel.is-active{
  display: flex;
  flex-direction: column;
  animation: panelFade .35s ease;
}

@keyframes panelFade{
  from{ opacity: 0; transform: translateY(8px); }
  to{ opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .service-detail-panel.is-active{ animation-duration: .01ms; }
  .service-tile{ transition-duration: .01ms; }
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.panel-icon-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}

.panel-icon-wrap .icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(255, 117, 31, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.panel-icon-wrap .icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--text);
}

.panel-badge-group {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
}

.panel-tag {
  font-family: var(--font-label);
  font-size:15px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(255, 117, 31, 0.12);
  border: 1px solid rgba(255, 117, 31, 0.3);
  padding: 4px 10px;
  border-radius: 999px;
}

.panel-subbadge {
  font-family: var(--font-label);
  font-size:15px;
  font-weight: 600;
  color: var(--muted);
  background: var(--bg-3);
  border: 1px solid var(--line);
  padding: 4px 10px;
  border-radius: 999px;
}

.panel-step-index {
  font-family: var(--font-label);
  font-size:15px;
  font-weight: 700;
  color: var(--muted-dim);
  letter-spacing: .05em;
}

.panel-title {
  font-size: 26.5px;
  margin-bottom: 12px;
  color: var(--text);
}

.panel-desc {
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.6;
  margin: 0 0 24px;
}

.panel-features {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.features-heading {
  font-family: var(--font-label);
  font-size:15px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}

.features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

@media (max-width: 980px) {
  .features-list {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .features-list {
    grid-template-columns: 1fr;
  }
}

.features-list li {
  position: relative;
  display: block;
  background: var(--bg-3);
  border-radius: 12px;
  padding: 14px 16px 14px 30px;
  font-size:15px;
  color: var(--muted);
  line-height: 1.5;
}

.features-list li::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 19px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.features-list li svg {
  display: none;
}

.features-list li strong {
  display: block;
  color: var(--text);
  margin-bottom: 4px;
}

.panel-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 12px;
  background: #EAF1FB;
  border: 1px solid #C7DBF5;
}

.panel-foot-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #DCE9FA;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.panel-foot-icon svg {
  width: 16px;
  height: 16px;
  stroke: #2A5FCC;
}

.panel-foot .foot-label {
  display: block;
  font-family: var(--font-label);
  font-size:15px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #2A5FCC;
  margin-bottom: 2px;
}

.panel-foot .foot-text {
  display: block;
  font-size:15px;
  color: var(--text);
  font-weight: 500;
}

/* Mobile & Tablet Responsive Rules */
@media (max-width: 860px) {
  .services-dark-panel{ padding: 32px 24px 28px; }
  .services-head-row{ flex-direction: column; }
  .services-count-label{ margin-top: 0; }
  .services-tiles-row{ grid-template-columns: repeat(2,1fr); }
  .service-panels-stage{ padding: 28px 24px; }

  .features-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .services-tiles-row{ grid-template-columns: 1fr; }
}

/* ---------- FEATURE CARDS ---------- */
.card-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:44px; }
@media (max-width:980px){ .card-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .card-grid{ grid-template-columns:1fr; } }
.fcard{ background:var(--bg-2); border:1px solid var(--line); border-radius:16px; padding:28px; transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.fcard:hover{ border-color:rgba(255,117,31,0.35); transform:translateY(-3px); }
.fcard .icon{
  width:42px; height:42px; border-radius:10px; background:rgba(255,117,31,0.14);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px; transition:transform .2s ease;
}
.fcard:hover .icon{ transform:scale(1.06); }
.fcard .icon svg{ width:20px; height:20px; stroke:var(--text); }
.fcard h3{ font-size:21px; margin-bottom:8px; }
.fcard p{ color:var(--muted); font-size:16px; }
.fcard .card-foot{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); font-family:var(--font-label); font-size:15px; font-weight:600; color:var(--text); }
.cert-badge{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-label); font-size:15px; font-weight:700; color:var(--text); background:rgba(255,117,31,0.12); border:1px solid rgba(255,117,31,0.3); padding:5px 10px 5px 8px; border-radius:999px; }
.cert-badge svg{ width:13px; height:13px; stroke:var(--text); flex-shrink:0; }

/* ---------- THE METHOD (SPACIOUS 2-COLUMN BENTO) ---------- */
.why-head {
  max-width: 80ch;
  margin-bottom: 0;
}

.method-panel {
  display: grid;
  grid-template-columns: 260px 1fr;
  background: var(--bg-3);
  border-radius: 20px;
  overflow: hidden;
  margin-top: 48px;
}

.method-tablist {
  display: flex;
  flex-direction: column;
  padding: 16px;
}

.method-tab {
  appearance: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  border: none;
  background: transparent;
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  touch-action: manipulation;
  transition: background-color .2s ease, box-shadow .2s ease;
}
.method-tab:last-child { margin-bottom: 0; }
.method-tab.is-active {
  background: #fff;
  box-shadow: 0 8px 20px rgba(15,23,42,0.06);
}

.method-tab-num {
  font-family: var(--font-label);
  font-size:15px;
  font-weight: 700;
  color: var(--muted-dim);
  transition: color .2s ease;
}
.method-tab.is-active .method-tab-num { color: var(--accent); }

.method-tab-tag {
  font-family: var(--font-display);
  font-weight: 700;
  font-size:15px;
  color: var(--text);
}

.method-detail-stage {
  background: #fff;
  padding: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.method-detail { display: none; }
.method-detail.is-active {
  display: flex;
  flex-direction: column;
  animation: panelFade .35s ease;
}

.method-detail-title {
  font-size: 25.5px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 16px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.method-detail-desc {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0 0 24px;
  max-width: 60ch;
}

.method-detail-foot {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size:15px;
  color: var(--text);
  font-weight: 600;
}

.method-detail-foot svg {
  width: 15px;
  height: 15px;
  stroke: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}

@media (max-width: 760px) {
  .method-panel {
    grid-template-columns: 1fr;
  }
  .method-tablist {
    flex-direction: row;
    overflow-x: auto;
    gap: 8px;
    padding: 12px;
  }
  .method-tab {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    white-space: nowrap;
    flex-shrink: 0;
    padding: 10px 16px;
  }
  .method-detail-stage {
    padding: 32px 24px;
  }
}

/* ---------- APPROACH / STAGED SEQUENCE ----------
   Full-width stages stacked in order. The old 3-across pipeline left each
   step ~267px of usable text, which wrapped every title and most
   deliverables; stacking gives each stage the full measure instead. */
.approach-pipeline {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 48px;
}

.approach-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 32px 36px;
  display: grid;
  grid-template-columns: 118px 1fr auto;
  grid-template-rows: auto auto auto auto;
  column-gap: 36px;
  position: relative;
  transition: border-color .3s cubic-bezier(.16, 1, .3, 1),
              transform .3s cubic-bezier(.16, 1, .3, 1),
              box-shadow .3s cubic-bezier(.16, 1, .3, 1);
}

.approach-card:hover {
  border-color: rgba(255, 117, 31, 0.35);
  transform: translateY(-2px);
}

.approach-card.is-featured {
  border-color: var(--accent);
}

/* Flatten the header wrapper so the numeral spine and the status tag can
   land in different grid areas instead of sharing one cramped column */
.approach-card .approach-card-header {
  display: contents;
}

/* Left spine: oversized numeral over its timeframe */
.approach-card .step-badge-wrap {
  grid-column: 1;
  grid-row: 1 / span 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding-right: 30px;
  border-right: 1px solid var(--line);
}

/* Status rides beside the title, where it has room to stay on one line */
.approach-card .step-status-tag {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  white-space: nowrap;
}

.approach-card .step-title { grid-column: 2; grid-row: 1; align-self: center; }
.approach-card .step-desc { grid-column: 2 / span 2; grid-row: 2; max-width: 74ch; }
.approach-card .step-deliverables { grid-column: 2 / span 2; grid-row: 3; }
.approach-card .step-foot { grid-column: 2 / span 2; grid-row: 4; }

/* The stage already states "Strategy Sprint" in its status tag - the
   floating pill said it twice and collided with the card edge. */
.featured-glow-pill { display: none; }

.approach-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.step-badge-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Oversized numeral anchors each stage now that it has room to breathe */
.approach-card .step-num {
  font-family: var(--font-label);
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
  background: none;
  border: none;
  padding: 0;
  letter-spacing: normal;
}

.approach-card .step-num.featured {
  background: none;
  color: var(--text);
  border: none;
}

.step-num {
  font-family: var(--font-label);
  font-size:15px;
  font-weight: 700;
  color: var(--text);
  background: rgba(255, 117, 31, 0.1);
  border: 1px solid rgba(255, 117, 31, 0.25);
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: .05em;
}

.step-num.featured {
  background: var(--accent);
  color: var(--text);
  border-color: var(--accent);
}

.step-timeframe {
  font-family: var(--font-label);
  font-size:15px;
  font-weight: 700;
  letter-spacing: .07em;
  color: var(--muted-dim);
}

.step-status-tag {
  font-family: var(--font-label);
  font-size:15px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}

.step-status-tag.free {
  color: var(--text);
  background: rgba(255, 117, 31, 0.1);
  border: 1px solid rgba(255, 117, 31, 0.25);
}

.step-status-tag.sprint {
  color: var(--text);
  background: rgba(255, 117, 31, 0.15);
  border: 1px solid rgba(255, 117, 31, 0.3);
}

.step-status-tag.ongoing {
  color: var(--text);
  background: rgba(255, 117, 31, 0.1);
  border: 1px solid rgba(255, 117, 31, 0.25);
}

.step-title {
  font-size: 26.5px;
  color: var(--text);
  margin: 0 0 12px;
  line-height: 1.25;
}

.step-desc {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0 0 24px;
}

.step-deliverables {
  padding-top: 20px;
  border-top: 1px solid rgba(26,24,20,0.10);
}

.deliverables-heading {
  display: block;
  font-family: var(--font-label);
  font-size:15px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-dim);
  margin-bottom: 12px;
}

.step-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 28px;
}

.step-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15.5px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 0;
}

.step-checklist li svg {
  width: 15px;
  height: 15px;
  stroke: var(--text);
  margin-top: 2px;
  flex-shrink: 0;
}

.step-foot {
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(26,24,20,0.03);
  border: 1px solid var(--line);
}

.step-foot.featured {
  border-color: var(--accent);
}

.step-foot-label {
  display: block;
  font-family: var(--font-label);
  font-size:15px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 2px;
}

.step-foot-val {
  display: block;
  font-size:15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.5;
}

/* Pipeline Connectors */
/* Stages run top-to-bottom now, so the connector becomes a short vertical
   tick between rows rather than a horizontal arrow between columns. */
.pipeline-connector {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 26px;
  padding-left: 84px;
  position: relative;
}

.connector-line {
  position: absolute;
  left: 84px;
  top: -10px;
  bottom: -10px;
  width: 2px;
  border-radius: 2px;
  background: rgba(255, 117, 31, 0.35);
}

.connector-arrow {
  position: relative;
  z-index: 2;
  width: 24px;
  height: 24px;
  margin-left: -11px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  transform: rotate(90deg);
}

.connector-arrow svg {
  width: 13px;
  height: 13px;
}

/* Responsive Rules */
@media (max-width: 820px) {
  .approach-card {
    grid-template-columns: 1fr;
    padding: 28px 24px;
    row-gap: 4px;
  }

  /* Spine returns to a horizontal header row above the content */
  .approach-card .step-badge-wrap {
    grid-column: 1;
    grid-row: auto;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding-right: 0;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }

  .approach-card .step-num { font-size: 33px; }

  .approach-card .step-status-tag {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    margin-bottom: 14px;
    white-space: normal;
  }

  .approach-card .step-title,
  .approach-card .step-desc,
  .approach-card .step-deliverables,
  .approach-card .step-foot {
    grid-column: 1;
    grid-row: auto;
  }

  .step-checklist {
    grid-template-columns: 1fr;
  }

  .pipeline-connector {
    padding-left: 24px;
    height: 20px;
  }

  .connector-line { left: 24px; }
}

/* ---------- FIT / IDEAL CLIENT CARDS ---------- */
/* Default (mobile, and no-JS on any width): plain stacked cards, all visible.
   The animated dial only ever appears at desktop widths with JS running -
   see the min-width:860px + html.js block below. */
.fit-dial-wrap{ display:none; }
.fit-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:48px; }
@media (max-width:700px){ .fit-grid{ grid-template-columns:1fr; } }
.fitcard{ background:var(--bg-2); border:1px solid var(--line); border-radius:16px; padding:30px; display:flex; flex-direction:column; transition:border-color .2s ease; }
.fitcard:hover{ border-color:var(--line-strong); }
.fitcard .tag{ font-family:var(--font-label); font-size:15px; color:var(--text); text-transform:uppercase; letter-spacing:.08em; font-weight:700; }
.fitcard h3{ font-size:23px; margin:10px 0 10px; }
.fitcard p{ color:var(--muted); font-size:16.5px; margin-bottom:18px; }
.fitcard ul{ list-style:none; padding:0; margin:auto 0 0; border-top:1px solid var(--line); padding-top:16px; }
.fitcard li{ display:flex; gap:10px; font-size:15px; color:var(--muted); margin-bottom:10px; align-items:flex-start; }
.fitcard li svg{ width:15px; height:15px; flex-shrink:0; margin-top:2px; stroke:var(--text); }

/* ---------- FIT DIAL (desktop + JS only) ---------- */
@media (min-width:860px){
  html.js .fit-showcase{ display:grid; grid-template-columns:320px 1fr; gap:64px; align-items:center; margin-top:48px; }
  html.js .fit-dial-wrap{ display:block; position:relative; width:320px; height:320px; flex-shrink:0; }
  html.js .fit-grid{ display:block; margin-top:0; }
  html.js .fitcard{ display:none; opacity:0; transform:translateY(10px); transition:opacity .4s ease, transform .4s ease; }
  html.js .fitcard.is-active{ display:flex; opacity:1; transform:translateY(0); }
}

.fit-dial-svg{ position:absolute; inset:40px; width:240px; height:240px; transform:rotate(-90deg); }
.dial-dots{ fill:none; stroke:var(--line); stroke-width:1; stroke-dasharray:1 9; }
.dial-track{ fill:none; stroke:var(--bg-3); stroke-width:14; }
.dial-seg{
  fill:none; stroke:var(--bg-4); stroke-width:14; stroke-linecap:round;
  stroke-dasharray:149.08 479.24;
  transition:stroke .5s ease;
}
.dial-seg[data-seg="0"]{ stroke-dashoffset:-4; }
.dial-seg[data-seg="1"]{ stroke-dashoffset:-161.08; }
.dial-seg[data-seg="2"]{ stroke-dashoffset:-318.16; }
.dial-seg[data-seg="3"]{ stroke-dashoffset:-475.24; }
.dial-seg.is-active{ stroke:var(--accent); }

.dial-center{
  position:absolute; inset:40px; width:240px; height:240px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 30px;
}
.dial-num{ font-family:var(--font-label); font-size:37.5px; font-weight:700; color:var(--accent); line-height:1.1; }
.dial-label{ font-weight:700; font-size:16.5px; color:var(--text); margin-top:2px; }
.dial-of{ font-family:var(--font-label); font-size:15px; color:var(--muted-dim); text-transform:uppercase; letter-spacing:.08em; margin-top:6px; }

.dial-tags{ position:absolute; inset:0; }
.dial-tag{
  position:absolute; appearance:none; border:1px solid transparent; background:none; cursor:pointer;
  display:flex; flex-direction:column; gap:1px; padding:8px 10px; border-radius:12px;
  font-family:inherit; touch-action:manipulation; transition:border-color .25s ease, background-color .25s ease;
  line-height:1.2;
}
.dial-tag .dt-num{ font-family:var(--font-label); font-size:15px; font-weight:700; color:var(--muted-dim); transition:color .25s ease; }
.dial-tag .dt-label{ font-size:15px; font-weight:600; color:var(--muted); white-space:nowrap; transition:color .25s ease; }
.dial-tag.pos-tr{ top:0; right:0; align-items:flex-end; text-align:right; }
.dial-tag.pos-br{ bottom:0; right:0; align-items:flex-end; text-align:right; }
.dial-tag.pos-bl{ bottom:0; left:0; align-items:flex-start; text-align:left; }
.dial-tag.pos-tl{ top:0; left:0; align-items:flex-start; text-align:left; }
.dial-tag.is-active{ border-color:var(--line); background:var(--bg-2); }
.dial-tag.is-active .dt-num{ color:var(--accent); }
.dial-tag.is-active .dt-label{ color:var(--text); }
.dial-tag:focus-visible{ outline:2px solid var(--text); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  .dial-seg, .dial-tag, .dial-tag .dt-num, .dial-tag .dt-label, html.js .fitcard{ transition-duration:.01ms !important; }
}

/* ---------- BLOG HERO: EDITORIAL STREAMLINED ---------- */
.blog-hero {
  position: relative;
  background: #f8fafc;
  background-image: 
    radial-gradient(circle at 1px 1px, rgba(15, 23, 42, 0.06) 1px, transparent 0),
    linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  background-size: 24px 24px, 100% 100%;
  border-bottom: 1px solid #e2e8f0;
  padding: 64px 0 56px;
  overflow: hidden;
}

.blog-hero + section {
  border-top: none;
}

.blog-listing-section {
  padding-top: 56px;
}

/* Subtle corner ambient glow */
.blog-hero::before {
  content: "";
  position: absolute;
  top: -100px;
  right: -60px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(255, 117, 31, 0.12) 0%, rgba(255, 117, 31, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

/* Hero Content Grid (Asymmetric 2-Column: Copy + Image) */
.blog-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.9fr);
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .blog-hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* Left Column Content */
.blog-hero-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.blog-hero-main .pill {
  background: #ffffff;
  border-color: rgba(255, 117, 31, 0.35);
  color: #0b1e36;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.blog-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(36px, 4.5vw, 52px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #0b1e36;
  margin: 0 0 20px;
  max-width: 18ch;
}

.blog-hero-title .blog-title-accent {
  position: relative;
  color: #0b1e36;
  white-space: nowrap;
  background: linear-gradient(120deg, rgba(255, 117, 31, 0.22) 0%, rgba(255, 117, 31, 0.35) 100%);
  padding: 0 6px;
  border-radius: 6px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.blog-hero-lede {
  font-size: clamp(17px, 1.8vw, 19px);
  line-height: 1.65;
  color: #475569;
  max-width: 52ch;
  margin: 0 0 28px;
}

/* Category Filter Bar */
.blog-filter-section {
  margin-top: 4px;
}

.category-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 0;
}

.category-pill {
  appearance: none;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  font-family: var(--font-label);
  font-size: 14.5px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .2s ease;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.category-pill:hover:not(.is-active) {
  border-color: #0b1e36;
  color: #0b1e36;
  background: #f8fafc;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px -2px rgba(15, 23, 42, 0.08);
}

.category-pill.is-active {
  background: #0b1e36;
  border-color: #0b1e36;
  color: #ffffff;
  box-shadow: 0 4px 12px -2px rgba(11, 30, 54, 0.28);
}

.category-pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Right Column: High-Craft Image Card */
.blog-hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.blog-image-card {
  position: relative;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 20px 40px -18px rgba(11, 30, 54, 0.12), 0 0 0 1px rgba(255, 117, 31, 0.08);
  max-width: 440px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s ease, box-shadow .25s ease;
}

.blog-image-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 48px -18px rgba(11, 30, 54, 0.18), 0 0 0 1px rgba(255, 117, 31, 0.16);
}

.blog-image-card img {
  width: 100%;
  height: auto;
  max-height: 380px;
  object-fit: contain;
  display: block;
}

@media (max-width: 640px) {
  .blog-hero {
    padding: 44px 0 36px;
  }
  .blog-hero-title {
    font-size: clamp(28px, 7vw, 36px);
  }
  .blog-hero-lede {
    font-size: 16.5px;
  }
  .blog-image-card {
    padding: 16px;
    max-width: 320px;
  }
}

/* ---------- MEDIA SLOT: post/card images + graceful placeholder ---------- */
.media-slot{ display:block; width:100%; object-fit:cover; }
.media-placeholder{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:var(--bg-3); border:1px dashed var(--line-strong);
  color:var(--muted-dim); font-family:var(--font-label); font-size:15px; font-weight:600;
}
.media-placeholder svg{ width:28px; height:28px; stroke:var(--muted-dim); }

/* ---------- BLOG CARDS ---------- */
.blog-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:24px; margin-top:32px; }
@media (max-width:860px){ .blog-grid{ grid-template-columns:1fr; } }
.bcard{ background:var(--bg); border:1px solid var(--line); border-radius:16px; overflow:hidden; text-decoration:none; display:block; transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.bcard:hover{ border-color:var(--accent); transform:translateY(-2px); box-shadow:0 16px 32px -22px rgba(26,24,20,0.4); }
.bcard-image{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:0; }
.bcard .meta{ display:flex; align-items:center; gap:8px; padding:20px 22px 0; }
.bcard .tag{ font-family:var(--font-label); font-size:15px; color:var(--hp2-orange-text); text-transform:uppercase; letter-spacing:.08em; font-weight:700; }
.bcard h3{ font-size:19px; margin:10px 22px 8px; line-height:1.32; }
.bcard p{ color:var(--muted); font-size:17px; margin:0 22px 18px; line-height:1.55; }
.bcard-foot{ display:flex; justify-content:space-between; padding:14px 22px; border-top:1px solid var(--line); color:var(--muted-dim); font-size:15px; }
.post-list-empty{ color:var(--muted); }

/* ---------- CTA BANNER ---------- */
.cta-banner{ position:relative; overflow:hidden; border-radius:24px; padding:70px 40px; text-align:center; background:var(--bg-2); border:1px solid rgba(255,117,31,0.3); }
.cta-banner h2{ font-size:clamp(28px,3.2vw,40px); position:relative; z-index:1; max-width:22ch; margin:0 auto; }
.cta-banner p{ color:var(--muted); margin:16px auto 30px; max-width:52ch; position:relative; z-index:1; }
.cta-banner .btn{ position:relative; z-index:1; }

/* ---------- CONTACT ---------- */
.contact-grid{ display:grid; grid-template-columns:7fr 5fr; gap:56px; align-items:start; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:15px; color:var(--muted); margin-bottom:6px; }
.field input, .field textarea, .field select{
  width:100%; background:var(--bg-2); border:1px solid var(--line-strong); color:var(--text);
  padding:13px 15px; font-family:inherit; font-size:16.5px; border-radius:10px;
}
.field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--text); }
.select-wrap{ position:relative; }
.select-wrap select{ appearance:none; -webkit-appearance:none; -moz-appearance:none; padding-right:40px; cursor:pointer; }
.select-wrap .chevron{ position:absolute; right:14px; top:50%; transform:translateY(-50%); pointer-events:none; stroke:var(--muted); width:16px; height:16px; }
.form-note{ margin-top:14px; font-size:15px; color:var(--muted-dim); line-height:1.5; }
.contact-next .eyebrow{ margin-bottom:16px; }
.contact-next ul{ list-style:none; padding:0; margin:0; }
.contact-next li{ display:flex; gap:10px; font-size:16px; color:var(--muted); margin-bottom:14px; align-items:flex-start; }
.contact-next li svg{ width:16px; height:16px; flex-shrink:0; margin-top:2px; stroke:var(--text); }
.contact-next .foot{ margin-top:4px; padding-top:16px; border-top:1px solid var(--line); display:flex; align-items:center; gap:12px; }
.contact-next .foot .f-icon{ width:36px; height:36px; border-radius:50%; background:rgba(255,117,31,0.12); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-next .foot .f-icon svg{ width:17px; height:17px; stroke:var(--text); }
.contact-next .foot p{ color:var(--muted-dim); font-size:15px; margin:0; }

/* ---------- FOOTER ---------- */
footer{ border-top:1px solid var(--line); padding:64px 0 32px; margin-top:40px; background:#122A4D; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; } .footer-grid > div:first-child{ grid-column:1 / -1; } }
@media (max-width:480px){ .footer-grid{ grid-template-columns:1fr; gap:28px; } }
.footer-grid h4{ font-family:var(--font-label); font-size:15px; color:rgba(255,255,255,.5); font-weight:700; margin-bottom:16px; text-transform:uppercase; letter-spacing:.08em; }
.footer-grid a{ display:block; color:rgba(255,255,255,.7); text-decoration:none; font-size:16px; margin-bottom:10px; }
.footer-grid a:hover{ color:#fff; }
.footer-grid p{ color:rgba(255,255,255,.7); font-size:16px; max-width:34ch; }
.footer-bottom{ margin-top:50px; padding-top:26px; border-top:1px solid rgba(255,255,255,.12); text-align:center; color:rgba(255,255,255,.5); font-size:15px; }

/* ---------- BLOG LISTING: FEATURED POST ---------- */
.feature-card{
  position:relative; display:grid; grid-template-columns:1fr 1fr; align-items:stretch;
  background:var(--bg); border:1px solid var(--line); border-radius:20px;
  text-decoration:none; overflow:hidden;
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.feature-card:hover{ border-color:var(--accent); transform:translateY(-3px); box-shadow:0 24px 48px -28px rgba(26,24,20,0.4); }
@media (max-width:860px){ .feature-card{ grid-template-columns:1fr; } }
.feature-card-image{ width:100%; height:100%; min-height:240px; object-fit:cover; border-radius:0; }
.feature-card-body{ padding:38px 40px; display:flex; flex-direction:column; justify-content:center; }
@media (max-width:860px){ .feature-card-body{ padding:28px 24px; } }
.feature-badge{
  font-family:var(--font-label); font-size:15px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:#fff; background:#0F172A; padding:5px 12px; border-radius:999px;
}
.feature-card .meta{ display:flex; align-items:center; gap:10px; }
.feature-card .tag{ font-family:var(--font-label); font-size:15px; color:var(--hp2-orange-text); text-transform:uppercase; letter-spacing:.08em; font-weight:700; }
.feature-card h2{ font-size:clamp(26px,2.8vw,36px); line-height:1.22; margin:16px 0 12px; color:var(--text); }
.feature-card p{ color:var(--muted); font-size:17.5px; line-height:1.6; margin:0; max-width:65ch; }
.feature-card-byline{ display:flex; align-items:center; gap:12px; margin-top:26px; }
.feature-card-byline .avatar{ width:36px; height:36px; border-radius:50%; background:rgba(255,117,31,0.12); border:1px solid rgba(255,117,31,0.3); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-family:var(--font-label); font-weight:700; font-size:15px; color:var(--text); }
.feature-card-byline .who{ font-size:15px; color:var(--text); font-weight:600; }
.feature-card-byline .who span{ display:block; font-weight:400; font-size:15px; color:var(--muted-dim); margin-top:1px; }

.blog-section-head{ display:flex; align-items:baseline; justify-content:space-between; margin:56px 0 0; padding-bottom:18px; border-bottom:1px solid var(--line); }
.blog-section-head h2{ font-size:clamp(28px,3.2vw,38px); color:var(--text); }
.blog-section-head span{ font-family:var(--font-label); font-size:15px; letter-spacing:.06em; color:var(--muted-dim); text-transform:uppercase; }
.all-articles-link{ font-family:var(--font-label); font-size:15px; font-weight:700; color:var(--text); text-decoration:none; }
.all-articles-link:hover{ text-decoration:underline; }

/* ---------- ARTICLE PAGE ---------- */
.article-header{ padding-top:22px; padding-bottom:8px; }
.post-breadcrumb{ display:flex; align-items:center; gap:8px; font-size:15px; color:var(--muted-dim); margin-bottom:20px; }
.post-breadcrumb a{ color:var(--muted-dim); text-decoration:none; }
.post-breadcrumb a:hover{ color:var(--text); text-decoration:underline; }
.post-category-badge{ display:block; font-family:var(--font-label); font-size:15px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--hp2-orange-text); margin-bottom:14px; }
.article-header h1{ font-size:clamp(36px,4.5vw,54px); max-width:22ch; }
.post-lede-excerpt{ color:var(--muted); font-size:18px; line-height:1.6; max-width:68ch; margin:16px 0 0; text-align:left; letter-spacing:normal; }
.post-top-byline{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:28px 0 0; padding-top:22px; border-top:1px solid var(--line); }
.post-top-byline .avatar{ width:38px; height:38px; border-radius:50%; background:rgba(255,117,31,0.12); border:1px solid rgba(255,117,31,0.3); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-family:var(--font-label); font-weight:700; font-size:15px; color:var(--text); }
.post-top-byline .who{ font-size:15px; color:var(--text); font-weight:600; }
.post-top-byline .who span{ display:block; font-weight:400; font-size:15px; color:var(--muted-dim); margin-top:1px; }
.post-top-meta{ margin-left:auto; display:flex; gap:8px; color:var(--muted-dim); font-size:15px; }
@media (max-width:600px){ .post-top-meta{ margin-left:0; } }

.post-hero-image{ display:block; width:100%; aspect-ratio:16/7; margin:30px 0 0; border-radius:18px; object-fit:cover; }

.post-layout{ display:grid; grid-template-columns:260px 1fr; gap:48px; align-items:start; margin-top:44px; }
@media (max-width:960px){ .post-layout{ grid-template-columns:1fr; gap:36px; } }

.post-sidebar{ position:sticky; top:100px; display:flex; flex-direction:column; gap:28px; }
@media (max-width:960px){ .post-sidebar{ position:static; } }
.post-toc{ border-left:2px solid var(--line); padding-left:18px; }
.post-toc-label{ display:block; font-family:var(--font-label); font-size:15px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted-dim); margin-bottom:14px; }
.post-toc-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.post-toc-list a{ display:flex; gap:10px; align-items:flex-start; text-decoration:none; color:var(--muted); font-size:15px; line-height:1.4; transition:color .15s ease; }
.post-toc-list a:hover{ color:var(--text); }
.post-toc-list a.is-active{ color:var(--hp2-orange-text); font-weight:600; }
.toc-num{ font-family:var(--font-label); font-weight:700; color:var(--muted-dim); flex-shrink:0; }
.post-toc-list a.is-active .toc-num{ color:var(--hp2-orange-text); }

.post-sidebar-cta{ background:var(--bg-2); border:1px solid rgba(255,117,31,0.3); border-radius:16px; padding:24px; }
.post-sidebar-cta h3{ font-size:18px; font-weight:700; margin-bottom:8px; color:var(--text); }
.post-sidebar-cta p{ color:var(--muted); font-size:16px; margin:0 0 16px; line-height:1.55; }
.post-sidebar-cta .btn{ width:100%; text-align:center; padding:12px 20px; font-size:16px; font-weight:600; }

.post-main{ min-width:0; }
article.post-body{ padding:0 0 20px; max-width:70ch; text-align:left; letter-spacing:normal; overflow-wrap:break-word; word-wrap:break-word; }
article.post-body p{ color:var(--muted); font-size:18px; font-weight:400; margin-bottom:22px; line-height:1.6; max-width:70ch; text-align:left; letter-spacing:normal; overflow-wrap:break-word; word-wrap:break-word; }
article.post-body h2{ font-family:var(--font-heading); font-size:clamp(28px,3.2vw,38px); font-weight:800; line-height:1.2; letter-spacing:-0.01em; color:var(--text); margin:48px 0 16px; scroll-margin-top:100px; text-align:left; }
article.post-body h3{ font-family:var(--font-heading); font-size:clamp(22px,2.4vw,28px); font-weight:700; line-height:1.25; letter-spacing:-0.01em; color:var(--text); margin:36px 0 12px; text-align:left; }
article.post-body h4{ font-family:var(--font-heading); font-size:20px; font-weight:700; line-height:1.3; color:var(--text); margin:24px 0 8px; text-align:left; }
article.post-body ul, article.post-body ol{ color:var(--muted); font-size:17.5px; font-weight:400; line-height:1.6; padding-left:24px; margin-bottom:24px; max-width:70ch; text-align:left; letter-spacing:normal; }
article.post-body ol{ counter-reset:post-ol; list-style:none; padding-left:0; }
article.post-body ol li{ counter-increment:post-ol; position:relative; padding-left:38px; }
article.post-body ol li::before{
  content:counter(post-ol); position:absolute; left:0; top:0; width:26px; height:26px; border-radius:50%;
  background:var(--bg-3); color:var(--text); font-family:var(--font-label); font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:center;
}
article.post-body li{ margin-bottom:12px; line-height:1.6; font-weight:400; }
article.post-body strong{ color:var(--text); font-weight:600; }
article.post-body a{ color:var(--text); text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:3px; font-weight:600; transition:color .15s ease; word-break:break-word; }
article.post-body a:hover{ color:var(--hp2-orange-text); }
article.post-body code{ font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; font-size:15px; background:var(--bg-3); color:var(--text); padding:2px 6px; border-radius:5px; overflow-wrap:break-word; }
article.post-body pre{ background:#0b1e36; color:#f8fafc; padding:20px; border-radius:12px; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; margin:28px 0; }
article.post-body pre code{ background:none; color:inherit; padding:0; font-size:15px; line-height:1.55; }
article.post-body table{ width:100%; max-width:100%; border-collapse:collapse; margin:28px 0; display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
article.post-body th, article.post-body td{ padding:12px 16px; border:1px solid var(--line); font-size:16px; line-height:1.55; text-align:left; }
article.post-body th{ background:var(--bg-2); font-weight:700; color:var(--text); }
article.post-body img{ max-width:100%; height:auto; border-radius:14px; margin:32px 0; display:block; }

article.post-body .lede{ font-size:18px; line-height:1.6; font-weight:400; color:var(--text); margin-bottom:24px; max-width:70ch; text-align:left; letter-spacing:normal; }
article.post-body blockquote.callout{
  margin:28px 0; padding:20px 24px; background:var(--bg-2); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:0 14px 14px 0;
}
article.post-body blockquote.callout p{ color:var(--text); font-size:17.5px; line-height:1.6; font-weight:400; margin:0; }
article.post-body blockquote.callout p + p{ margin-top:10px; }

/* Author bio footer */
.post-author-card{ display:flex; gap:18px; max-width:70ch; margin-top:36px; padding:26px; background:var(--bg-2); border:1px solid var(--line); border-radius:16px; }
.post-author-card .avatar{ width:52px; height:52px; border-radius:50%; background:rgba(255,117,31,0.12); border:1px solid rgba(255,117,31,0.3); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-family:var(--font-label); font-weight:700; font-size:19px; color:var(--text); }
.post-author-card .who{ font-size:16px; color:var(--text); font-weight:700; }
.post-author-role{ display:block; font-weight:600; font-size:15px; color:var(--hp2-orange-text); margin:2px 0 8px; }
.post-author-card p{ color:var(--muted); font-size:16px; margin:0; line-height:1.6; }

.post-nav{ max-width:70ch; margin:34px 0 0; }
.post-nav a{ display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-family:var(--font-label); font-size:16px; font-weight:600; }
.post-nav a svg{ width:15px; height:15px; stroke:currentColor; transition:transform .2s ease; }
.post-nav a:hover svg{ transform:translateX(-4px); }

.post-related{ padding:80px 0; border-top:1px solid var(--line); margin-top:60px; }

/* Unpublished draft marker - never appears on a live post */
.draft-banner{
  background:rgba(255,117,31,0.1); border-bottom:1px solid rgba(255,117,31,0.35);
  color:var(--text); font-family:var(--font-label); font-size:15px; font-weight:700;
  letter-spacing:.04em; text-align:center; padding:10px 20px;
}
.draft-banner span{ color:var(--muted); font-weight:500; letter-spacing:0; }

/* ---------- MARKETING FUNNEL ----------
   Six stages build in one by one as the section scrolls into view (looping
   while the page stays open), each bar narrower and darker toward the
   accent as commitment rises. Per-stage color/shadow/width come in via
   custom properties set inline on each .funnel-row; funnel.js only ever
   toggles the .is-lit class. */

.funnel{
  list-style:none;
  margin:48px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:20px;
}

.funnel-row{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.funnel-bar-row{
  display:flex;
  align-items:center;
  gap:16px;
}

.funnel-bar{
  width:var(--stage-w);
  min-width:0;
  background:var(--stage-bg);
  border-radius:10px;
  padding:18px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  opacity:0;
  box-shadow:none;
  transform:translateY(14px) scaleX(0.94);
  transform-origin:left center;
  transition:opacity .5s ease, transform .65s cubic-bezier(.2,.85,.25,1), box-shadow .5s ease;
}
html:not(.js) .funnel-bar{ opacity:1; transform:none; }
.funnel-bar.is-lit{ opacity:1; transform:translateY(0) scaleX(1); box-shadow:var(--stage-shadow); }

.funnel-name{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.15rem;
  color:var(--text);
  letter-spacing:-0.01em;
  white-space:nowrap;
}

.funnel-count{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.15rem;
  color:var(--text);
  white-space:nowrap;
  opacity:0;
  transition:opacity .5s ease;
}
html:not(.js) .funnel-count{ opacity:1; }
.funnel-count.is-lit{ opacity:1; }

.funnel-desc{
  margin:0;
  max-width:60ch;
  font-size:15px;
  color:var(--muted);
  text-align:left;
  line-height:1.5;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .5s ease .15s, transform .5s ease .15s;
}
html:not(.js) .funnel-desc{ opacity:1; transform:none; }
.funnel-desc.is-lit{ opacity:1; transform:translateY(0); }

.funnel-pct{
  font-family:var(--font-label);
  font-size:15px;
  font-weight:700;
  color:var(--muted-dim);
  letter-spacing:.04em;
  white-space:nowrap;
  flex-shrink:0;
  opacity:0;
  transition:opacity .5s ease .1s;
}
html:not(.js) .funnel-pct{ opacity:1; }
.funnel-pct.is-lit{ opacity:1; }

@media (max-width:600px){
  .funnel-name, .funnel-count{ font-size:1.02rem; }
  .funnel-bar{ padding:16px 20px; }
  /* Full narrowing looks great with room to spare on desktop, but at this
     width the narrowest bars get too tight to hold a label and a count.
     Compress the range toward 100% instead of dropping it. */
  .funnel-bar{ width:calc(50% + var(--stage-w) * 0.5); }
}


/* ============================================================
   HOMEPAGE v4: navy/orange redesign, scoped to .hp2. Uses the
   site's own --accent orange and a navy dark tone (matching
   .svc-dark-panel / footer) so it lines up with every other page.
   ============================================================ */
.hp2{
  font-family:var(--font-display);
  color:#1e293b;
  background:#fff;
  --hp2-navy:#0b1e36;
  --hp2-navy-soft:#122a4a;
  --hp2-orange-text:#c2410c;
  --accent-text:#c2410c;
  --hp2-orange-text-dark:#ff9a52;
}
.hp2 *{ box-sizing:border-box; }
.hp2 h1, .hp2 h2, .hp2 h3{ font-family:var(--font-heading); margin:0; }
.hp2 p{ margin:0; }
.hp2 ul, .hp2 ol{ list-style:none; margin:0; padding:0; }
.hp2 a{ text-decoration:none; color:inherit; }
.hp2 img{ display:block; max-width:100%; }
.hp2 button{ font:inherit; }

.hp2-wrap{ max-width:1280px; margin:0 auto; padding:0 24px; }
@media (max-width:480px){ .hp2-wrap{ padding:0 16px; } }
.hp2-section{ padding:88px 0; }
@media (max-width:640px){ .hp2-section{ padding:56px 0; } }
.hp2-tint{ background:#f8fafc; border-top:1px solid #f1f5f9; border-bottom:1px solid #f1f5f9; }
.hp2-dark{ background:var(--hp2-navy); color:#fff; }

.hp2-eyebrow{ display:block; font-size:15px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--hp2-orange-text); margin-bottom:10px; }
.hp2-eyebrow-dark{ color:var(--hp2-orange-text-dark); }
.hp2-h1{ font-size:clamp(30px,5.2vw,56px); font-weight:800; line-height:1.1; letter-spacing:-.01em; color:#0b1e36; }
.hp2-h1 .is-accent{ color:var(--accent); }
.hp2-h2{ font-size:clamp(24px,3.8vw,40px); font-weight:800; line-height:1.18; color:#0b1e36; }
.hp2-h2-dark{ color:#fff; }
.hp2-h3-sm{ font-size:16px; font-weight:700; color:#0b1e36; margin-bottom:6px; }
.hp2-lede{ font-size:18px; line-height:1.6; color:#475569; max-width:48ch; margin-top:18px; }
.hp2-lede + .hp2-lede{ margin-top:12px; }
.hp2-lede.is-wide{ max-width:none; }
.hp2-lede-sm{ font-size:15px; line-height:1.6; color:#475569; margin-top:8px; }
.hp2-lede-sm.is-body{ font-size:18px; }
.hp2-p-sm{ font-size:15px; line-height:1.6; color:#475569; }
.hp2-head-row{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:44px; }
.hp2-head-row-copy{ max-width:680px; display:flex; flex-direction:column; gap:16px; }
.hp2-link-accent{ font-size:15px; font-weight:700; color:#0b1e36; border-bottom:2px solid var(--accent); padding-bottom:2px; display:inline-flex; align-items:center; gap:4px; }
.hp2-link-accent:hover{ color:var(--accent); }
.hp2-link-accent.is-block{ align-self:flex-start; }
.hp2-section-head{ max-width:820px; display:flex; flex-direction:column; gap:20px; }
.hp2-audience-title{ font-size:clamp(24px,2.6vw,30px); }

/* ---- Hero ---- */
.hp2-hero{ position:relative; padding:52px 0 60px; background:linear-gradient(180deg,#f5f9fd 0%,#ffffff 100%); border-bottom:1px solid #e2e8f0; }
@media (max-width:640px){ .hp2-hero{ padding:36px 0 44px; } }
.hp2-hero-grid{ display:grid; grid-template-columns:1fr; gap:48px; align-items:center; }
@media (min-width:1024px){ .hp2-hero-grid{ grid-template-columns:1fr 1fr; gap:56px; } }
.hp2-hero-copy{ display:flex; flex-direction:column; gap:22px; }
.hp2-hero-pill{ align-self:flex-start; padding:6px 14px; border:1px solid rgba(255,117,31,0.35); background:#fff3ea; border-radius:999px; font-size:15px; font-weight:700; color:var(--hp2-orange-text); letter-spacing:.05em; text-transform:uppercase; }
.hp2-hero-lede-group{ display:flex; flex-direction:column; gap:12px; max-width:600px; }
.hp2-hero-lede-group .hp2-lede{ margin-top:0; max-width:none; font-size:17.5px; line-height:1.6; }
.hp2-hero-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:600px){ .hp2-hero-cards{ grid-template-columns:1fr; } }
.hp2-hero-card{ background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; padding:14px 16px; display:flex; flex-direction:column; gap:6px; }
.hp2-hero-card-icon{ width:22px; height:22px; color:#0b1e36; display:inline-flex; align-items:center; justify-content:center; margin-bottom:2px; }
.hp2-hero-card-icon svg{ width:20px; height:20px; stroke:currentColor; }
.hp2-hero-card-title{ font-family:var(--font-heading); font-size:15px; font-weight:700; color:#0b1e36; line-height:1.3; }
.hp2-hero-card-desc{ font-size:13.5px; line-height:1.45; color:#475569; }
.hp2-hero-btns{ display:flex; flex-wrap:wrap; gap:12px; }
@media (max-width:480px){ .hp2-hero-btns{ flex-direction:column; width:100%; } .hp2-hero-btns .hp2-btn-accent, .hp2-hero-btns .hp2-btn-outline{ width:100%; justify-content:center; text-align:center; min-height:48px; } }
.hp2-btn-accent{ display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:var(--text); padding:16px 28px; border-radius:10px; font-weight:600; font-size:16px; box-shadow:var(--glow-amber); transition:box-shadow .2s ease, transform .2s ease; }
.hp2-btn-accent:hover{ box-shadow:0 8px 22px rgba(255,117,31,0.35); transform:translateY(-1px); }
.hp2-btn-outline{ display:inline-flex; align-items:center; gap:8px; background:#fff; color:#0b1e36; padding:16px 28px; border-radius:10px; font-weight:600; font-size:16px; border:1px solid #cbd5e1; transition:border-color .2s ease; }
.hp2-btn-outline:hover{ border-color:#0b1e36; }
.hp2-hero-flow-wrap{ display:flex; flex-direction:column; gap:12px; padding-top:22px; border-top:1px solid #e2e8f0; }
.hp2-flow{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:15px; font-weight:600; color:#0b1e36; }
.hp2-flow-pill{ padding:6px 12px; border-radius:8px; background:#fff; border:1px solid #dce7f3; }
.hp2-arrow{ color:#64748b; }
.hp2-flow-note{ font-size:15px; color:#64748b; }
.hp2-hero-visual{ border-radius:20px; overflow:hidden; background:#e2e8f0; box-shadow:0 30px 60px rgba(11,30,54,0.14); border:1px solid #dce7f3; }
.hp2-hero-visual img{ width:100%; height:auto; }

/* ---- Stats bar ---- */
.hp2-stats-bar{ background:var(--hp2-navy); }
.hp2-stats-bar .hp2-wrap{ padding:40px 24px; display:grid; grid-template-columns:1fr 1fr; gap:28px; }
@media (min-width:700px){ .hp2-stats-bar .hp2-wrap{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:699px){ .hp2-stats-bar .hp2-wrap{ gap:20px 16px; padding:28px 16px; } }
.hp2-stat{ border-left:2px solid var(--accent); padding-left:18px; display:flex; flex-direction:column; gap:4px; }
.hp2-stat-num{ font-family:var(--font-heading); font-size:clamp(26px,3vw,36px); font-weight:700; color:#fff; font-variant-numeric:tabular-nums; }
.hp2-stat-label{ font-size:15px; color:#cbd5e1; }




/* ---- Generic grids/cards ---- */
.hp2-grid-2{ display:grid; grid-template-columns:1fr; gap:24px; }
@media (min-width:640px){ .hp2-grid-2{ grid-template-columns:1fr 1fr; } }

/* ---- Placeholder media ---- */
.hp2-media-placeholder{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; width:100%; height:100%; background:var(--bg-3); border:1px dashed var(--line-strong); color:var(--muted-dim); font-family:var(--font-label); font-size:15px; font-weight:600; text-align:center; padding:16px; }
.hp2-media-placeholder svg{ width:26px; height:26px; stroke:var(--muted-dim); flex-shrink:0; }
.hp2-dark .hp2-media-placeholder{ background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.18); color:#94a3b8; }
.hp2-dark .hp2-media-placeholder svg{ stroke:#94a3b8; }

/* ---- Who it's for / audiences ---- */
.hp2-audiences{ display:flex; flex-direction:column; gap:72px; margin-top:48px; }
.hp2-audience{ display:grid; grid-template-columns:1fr; gap:40px; align-items:center; }
@media (min-width:820px){ .hp2-audience{ grid-template-columns:1fr 1fr; gap:56px; } }
@media (min-width:820px){ .hp2-audience.is-reverse .hp2-audience-media{ order:2; } }
.hp2-audience-media{ aspect-ratio:4/3; border-radius:18px; overflow:hidden; box-shadow:0 20px 50px rgba(11,30,54,0.08); background:#e2e8f0; }
.hp2-audience-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.hp2-audience:hover .hp2-audience-media img{ transform:scale(1.02); }
.hp2-audience-body{ display:flex; flex-direction:column; gap:16px; }
.hp2-audience-body p{ font-size:17px; line-height:1.7; color:#334155; }
.hp2-tag-row{ display:flex; flex-wrap:wrap; gap:8px; padding-top:4px; }
.hp2-tag{ white-space:nowrap; font-size:15px; font-weight:600; color:#334155; background:#f1f5f9; border:1px solid #e2e8f0; padding:6px 12px; border-radius:8px; }

/* ---- The problem ---- */
.hp2-problem-grid{ display:grid; grid-template-columns:1fr; gap:48px; align-items:start; }
@media (min-width:900px){ .hp2-problem-grid{ grid-template-columns:1fr 1fr; gap:64px; } }
.hp2-problem-copy{ display:flex; flex-direction:column; gap:16px; }
.hp2-problem-callout{ margin-top:12px; background:var(--hp2-navy); border-radius:14px; padding:26px; display:flex; gap:16px; align-items:flex-start; }
.hp2-problem-callout-icon{ width:36px; height:36px; border-radius:10px; background:var(--accent); color:var(--text); display:flex; align-items:center; justify-content:center; font-weight:800; flex-shrink:0; }
.hp2-problem-callout p{ font-family:var(--font-heading); font-size:19px; line-height:1.4; font-weight:600; color:#fff; }
.hp2-problem-cards{ display:grid; grid-template-columns:1fr; gap:1px; background:#dce7f3; border:1px solid #dce7f3; border-radius:16px; overflow:hidden; }
@media (min-width:520px){ .hp2-problem-cards{ grid-template-columns:1fr 1fr; } }
.hp2-problem-card{ background:#fff; padding:24px; display:flex; flex-direction:column; gap:10px; }
.hp2-problem-card-head{ display:flex; gap:10px; align-items:center; }
.hp2-x-mark{ width:28px; height:28px; border-radius:999px; background:#fee2e2; color:#dc2626; font-size:15px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.hp2-problem-card-head span:last-child{ font-family:var(--font-heading); font-size:16.5px; font-weight:700; color:#0b1e36; }
.hp2-problem-card p{ font-size:15px; line-height:1.6; color:#334155; }

/* ---- System (interactive tabs) ---- */
.hp2-system-head{ display:grid; grid-template-columns:1fr; gap:24px; align-items:end; margin-bottom:48px; }
@media (min-width:900px){ .hp2-system-head{ grid-template-columns:1fr 1fr; } }
.hp2-sys-tabs{ display:grid; grid-template-columns:1fr; gap:12px; margin-bottom:clamp(32px, 4vw, 48px); }
@media (min-width:640px){ .hp2-sys-tabs{ grid-template-columns:1fr 1fr; } }
@media (min-width:1100px){ .hp2-sys-tabs{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:639px){
  .hp2-sys-tabs{ gap:8px; margin-bottom:24px; }
  .hp2-sys-tab{ padding:14px 16px; gap:8px; border-radius:12px; }
  .hp2-sys-tab-num{ width:30px; height:30px; font-size:13px; border-radius:8px; }
  .hp2-sys-tab-title{ font-size:18px; }
  .hp2-sys-tab-desc{ font-size:13.5px; }
  .hp2-sys-panel-body{ padding:24px 18px; gap:16px; }
  .hp2-sys-panel-body h3{ font-size:24px; }
  .hp2-sys-panel-body > p{ font-size:15.5px; }
  .hp2-sys-nav{ flex-direction:column; width:100%; }
  .hp2-sys-nav-btn{ width:100%; text-align:center; padding:12px; min-height:44px; }
}
.hp2-sys-tab{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; text-align:left; padding:24px 22px; border-radius:16px; cursor:pointer; background:transparent; border:1px solid rgba(255,255,255,0.14); color:#cbd5e1; transition:background-color .2s ease, border-color .2s ease, color .2s ease; }
.hp2-sys-tab:hover{ border-color:rgba(255,117,31,0.5); }
.hp2-sys-tab.is-active{ background:var(--hp2-navy-soft); border-color:var(--accent); color:#fff; }
.hp2-sys-tab-top{ display:flex; align-items:center; gap:12px; width:100%; }
.hp2-sys-tab-num{ width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-family:var(--font-heading); font-weight:700; font-size:15px; flex-shrink:0; background:rgba(255,255,255,0.08); color:#cbd5e1; }
.hp2-sys-tab.is-active .hp2-sys-tab-num{ background:var(--accent); color:var(--text); }
.hp2-sys-tab.is-done .hp2-sys-tab-num{ background:rgba(255,117,31,0.18); color:var(--hp2-orange-text-dark); }
.hp2-sys-tab-line{ flex:1; height:2px; border-radius:2px; background:rgba(255,255,255,0.15); }
.hp2-sys-tab.is-active .hp2-sys-tab-line, .hp2-sys-tab.is-done .hp2-sys-tab-line{ background:var(--accent); }
.hp2-sys-tab-title{ font-family:var(--font-heading); font-size:21px; font-weight:700; }
.hp2-sys-tab-desc{ font-size:15px; line-height:1.55; opacity:.8; }
.hp2-sys-panel{ display:none; grid-template-columns:1fr; background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 30px 60px rgba(0,0,0,0.25); }
.hp2-sys-panel.is-active{ display:grid; }
@media (min-width:820px){ .hp2-sys-panel.is-active{ grid-template-columns:1fr 1fr; } }
.hp2-sys-panel-body{ padding:clamp(28px,3.5vw,48px); display:flex; flex-direction:column; gap:20px; justify-content:center; }
.hp2-sys-panel-kicker{ display:flex; align-items:center; gap:12px; }
.hp2-sys-panel-kicker span:first-child{ font-family:var(--font-heading); font-size:15px; font-weight:700; color:var(--hp2-orange-text); }
.hp2-sys-panel-kicker span:last-child{ height:1px; width:48px; background:#e2e8f0; }
.hp2-sys-panel-body h3{ font-size:32px; line-height:1.15; font-weight:700; color:#0b1e36; }
.hp2-sys-panel-body > p{ font-size:17px; line-height:1.6; color:#334155; }
.hp2-sys-list{ display:flex; flex-direction:column; border-top:1px solid #e2e8f0; }
.hp2-sys-list li{ display:flex; gap:14px; align-items:center; padding:14px 0; border-bottom:1px solid #e2e8f0; font-size:15px; font-weight:500; color:#0f172a; }
.hp2-check-dot{ width:26px; height:26px; border-radius:50%; background:#fff3ea; color:var(--hp2-orange-text); display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; flex-shrink:0; }
.hp2-sys-nav{ display:flex; gap:12px; flex-wrap:wrap; padding-top:4px; }
.hp2-sys-nav-btn{ white-space:nowrap; border-radius:10px; padding:12px 18px; font-weight:600; font-size:16px; cursor:pointer; }
.hp2-sys-nav-btn.is-prev{ background:#fff; border:1px solid #cbd5e1; color:#0b1e36; }
.hp2-sys-nav-btn.is-next{ background:#0b1e36; border:1px solid #0b1e36; color:#fff; }
.hp2-sys-panel-media{ min-height:280px; background:#e2e8f0; position:relative; overflow:hidden; }
@media (min-width:820px){ .hp2-sys-panel-media{ min-height:420px; height:100%; } }
.hp2-sys-panel-media img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (min-width:820px){ .hp2-sys-panel-media img{ position:absolute; inset:0; } }
@media (max-width:819px){ .hp2-sys-panel-media img{ min-height:280px; aspect-ratio:16/10; } }

/* ---- How it works (Compact Scroll-Linked Expanding Stepper) ---- */
.hp2-how-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:36px;
  align-items:start;
}
@media (min-width:900px){
  .hp2-how-grid{
    grid-template-columns:minmax(0, 1fr) minmax(0, 1.15fr);
    gap:48px;
    align-items:center;
  }
}
@media (min-width:1150px){
  .hp2-how-grid{
    grid-template-columns:minmax(0, 1fr) minmax(0, 1.18fr);
    gap:56px;
  }
}

/* Left Column */
.hp2-how-aside{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.hp2-how-media{
  width:100%;
  aspect-ratio:1 / 1;
  max-height:clamp(240px, 34vh, 360px);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 16px 40px rgba(11,30,54,0.08);
  background:#e2e8f0;
}
.hp2-how-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transition:transform .4s ease;
}
.hp2-how-grid:hover .hp2-how-media img{
  transform:scale(1.015);
}
.hp2-how-note{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  background:#fff;
  border:1px solid #dce7f3;
  border-radius:14px;
  padding:14px 18px;
  transition:border-color .3s ease, box-shadow .3s ease, transform .25s ease;
  box-shadow:0 6px 20px rgba(11,30,54,0.04);
}
.hp2-how-note-content{
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:1;
  min-width:170px;
}
.hp2-how-note-step{
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--hp2-orange-text);
  transition:color .25s ease;
}
.hp2-how-note p{
  font-size:14px;
  color:#334155;
  line-height:1.4;
  margin:0;
}
.hp2-how-note strong{
  font-weight:700;
  color:#0b1e36;
}
@media (max-width:480px){
  .hp2-how-note{
    flex-direction:column;
    align-items:stretch;
    text-align:center;
  }
  .hp2-how-note a{
    width:100%;
    text-align:center;
    min-height:42px;
  }
  .hp2-how-note-content{
    text-align:left;
  }
}
.hp2-how-note a{
  white-space:nowrap;
  background:var(--accent);
  color:var(--text);
  padding:9px 16px;
  border-radius:10px;
  font-weight:600;
  font-size:14.5px;
  transition:transform .2s ease, box-shadow .2s ease;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.hp2-how-note a:hover{
  transform:translateY(-1px);
  box-shadow:var(--glow-amber);
}

/* Right Column: Compact Stepper */
.hp2-stepper{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:12px;
  width:100%;
}

/* Top Progress Track */
.hp2-stepper-progress-wrap{
  height:4px;
  background:#e2e8f0;
  border-radius:999px;
  overflow:hidden;
  margin-bottom:4px;
  width:100%;
}
.hp2-stepper-progress-bar{
  height:100%;
  width:25%;
  background:linear-gradient(90deg, var(--accent), #ff9142);
  border-radius:999px;
  transition:width .4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Accordion Step Items */
.hp2-step-accordion{
  background:#ffffff;
  border:1.5px solid #e2e8f0;
  border-radius:16px;
  overflow:hidden;
  transition:border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
  box-shadow:0 2px 8px rgba(11,30,54,0.03);
}
.hp2-step-accordion.is-active{
  border-color:rgba(255,117,31,0.5);
  box-shadow:0 12px 30px rgba(11,30,54,0.08), 0 0 0 1px rgba(255,117,31,0.2);
}

/* Accordion Header Button */
.hp2-step-header{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 18px;
  background:transparent;
  border:none;
  cursor:pointer;
  text-align:left;
  font-family:inherit;
  transition:background-color .2s ease;
}
.hp2-step-header:hover{
  background:#f8fafc;
}
.hp2-step-accordion.is-active .hp2-step-header{
  background:transparent;
}

.hp2-step-header-left{
  display:flex;
  align-items:center;
  gap:12px;
}
.hp2-step-num{
  width:32px;
  height:32px;
  border-radius:9px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-heading);
  font-size:13.5px;
  font-weight:800;
  background:#f1f5f9;
  color:#64748b;
  transition:all .25s ease;
}
.hp2-step-accordion.is-active .hp2-step-num{
  background:var(--accent);
  color:var(--text);
  box-shadow:0 0 10px rgba(255,117,31,0.4);
}
.hp2-step-accordion.is-done .hp2-step-num{
  background:#fff3ea;
  color:var(--hp2-orange-text);
  border:1px solid rgba(255,117,31,0.25);
}

.hp2-step-title{
  font-size:17px;
  font-weight:800;
  color:#0b1e36;
  line-height:1.2;
}

.hp2-step-header-right{
  display:flex;
  align-items:center;
  gap:10px;
}
.hp2-step-phase{
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--hp2-orange-text);
  background:#fff3ea;
  padding:3px 9px;
  border-radius:6px;
  border:1px solid rgba(255,117,31,0.2);
}
.hp2-step-icon{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#94a3b8;
  transition:transform .3s ease, color .2s ease;
}
.hp2-step-icon svg{
  width:15px;
  height:15px;
}
.hp2-step-accordion.is-active .hp2-step-icon{
  transform:rotate(180deg);
  color:var(--hp2-orange-text);
}

/* Accordion Smooth Collapse Animation */
.hp2-step-collapse{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .35s cubic-bezier(0.16, 1, 0.3, 1);
}
.hp2-step-accordion.is-active .hp2-step-collapse{
  grid-template-rows:1fr;
}
.hp2-step-content{
  overflow:hidden;
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .25s ease, transform .25s ease;
  padding:0 18px 18px 18px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.hp2-step-accordion.is-active .hp2-step-content{
  opacity:1;
  transform:translateY(0);
  transition:opacity .35s ease .05s, transform .35s ease .05s;
}

/* Step Details Content */
.hp2-step-desc{
  font-size:14.5px;
  line-height:1.55;
  color:#334155;
  margin:0;
  padding-top:2px;
}
.hp2-step-cols{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  border-top:1px solid #f1f5f9;
  padding-top:12px;
}
@media (min-width:540px){
  .hp2-step-cols{
    grid-template-columns:1.15fr 1fr;
    gap:14px;
  }
}
.hp2-step-acts{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.hp2-step-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#64748b;
  margin-bottom:2px;
}
.hp2-step-acts span:not(.hp2-step-label){
  font-size:13.5px;
  color:#0f172a;
  display:flex;
  gap:6px;
  line-height:1.4;
}
.hp2-step-acts span:not(.hp2-step-label)::before{
  content:'•';
  color:var(--accent);
  font-weight:800;
}
.hp2-step-out{
  display:flex;
  flex-direction:column;
  gap:4px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:10px;
  padding:10px 12px;
}
.hp2-step-out p{
  font-size:13px;
  font-weight:600;
  color:#0b1e36;
  line-height:1.4;
  margin:0;
}
.hp2-step-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-top:1px solid #f1f5f9;
  padding-top:12px;
  margin-top:2px;
}
.hp2-step-foot-badge{
  font-size:12px;
  font-weight:700;
  color:#15803d;
  background:#f0fdf4;
  border:1px solid #bbf7d0;
  padding:3px 9px;
  border-radius:6px;
}
.hp2-step-foot-cta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--accent);
  color:var(--text);
  font-size:13.5px;
  font-weight:700;
  padding:7px 14px;
  border-radius:8px;
  box-shadow:var(--glow-amber);
  text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease;
}
.hp2-step-foot-cta:hover{
  transform:translateY(-1px);
}

/* ---- Services (image rows) ---- */
.hp2-service-rows{ display:flex; flex-direction:column; border-top:1px solid #e2e8f0; }
.hp2-service-row{ display:grid; grid-template-columns:1fr; gap:20px; align-items:center; padding:28px 0; border-bottom:1px solid #e2e8f0; transition:background-color .2s ease; }
@media (min-width:700px){ .hp2-service-row{ grid-template-columns:180px minmax(0,1fr); gap:28px; } }
@media (min-width:1100px){ .hp2-service-row{ grid-template-columns:200px minmax(0,1.3fr) minmax(0,1fr) 52px; gap:32px; } }
.hp2-service-row:hover{ background:#f8fafc; }
.hp2-service-media{ aspect-ratio:4/3; border-radius:14px; overflow:hidden; background:#e2e8f0; align-self:start; }
.hp2-service-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.hp2-service-row:hover .hp2-service-media img{ transform:scale(1.04); }
.hp2-service-body{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.hp2-service-kicker{ display:flex; align-items:center; gap:12px; }
.hp2-service-kicker span:first-child{ font-family:var(--font-heading); font-size:15px; font-weight:700; color:var(--hp2-orange-text); }
.hp2-service-kicker span:last-child{ font-size:15px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#64748b; }
.hp2-service-body h3{ font-size:26px; line-height:1.2; font-weight:700; }
.hp2-service-body h3 a:hover{ color:var(--hp2-orange-text); }
.hp2-service-body > p{ font-size:15.5px; line-height:1.6; color:#334155; }
.hp2-service-checklist{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.hp2-service-checklist span{ display:flex; gap:10px; font-size:15px; color:#0f172a; line-height:1.5; }
.hp2-service-checklist span::before{ content:'✓'; color:var(--accent); font-weight:700; }
.hp2-service-arrow{ display:none; justify-self:end; width:52px; height:52px; border-radius:50%; border:1px solid #cbd5e1; align-items:center; justify-content:center; font-size:20px; color:#0b1e36; flex-shrink:0; transition:border-color .2s ease, color .2s ease; }
@media (min-width:1100px){ .hp2-service-arrow{ display:flex; } }
.hp2-service-row:hover .hp2-service-arrow{ border-color:var(--accent); color:var(--accent); }

/* ---- Pricing ---- */
.hp2-pricing-grid{ display:grid; grid-template-columns:1fr; gap:48px; align-items:start; }
@media (min-width:820px){ .hp2-pricing-grid{ grid-template-columns:1fr 2fr; gap:64px; } }
.hp2-pricing-copy{ display:flex; flex-direction:column; gap:18px; }
.hp2-check-list{ display:flex; flex-direction:column; gap:12px; padding-top:12px; }
.hp2-check-list li{ display:flex; gap:10px; font-size:15px; color:#0f172a; }
.hp2-check-list li::before{ content:'✓'; color:#10b981; font-weight:700; }
.hp2-plan-cards{ display:grid; grid-template-columns:1fr; gap:24px; }
@media (min-width:640px){ .hp2-plan-cards{ grid-template-columns:1fr 1fr; } }
.hp2-plan{ display:flex; flex-direction:column; gap:16px; padding:32px; border-radius:16px; border:1px solid #dce7f3; background:#fff; color:#0b1e36; }
.hp2-plan.is-featured{ border-color:var(--hp2-navy); background:var(--hp2-navy); color:#fff; box-shadow:0 24px 50px rgba(11,30,54,0.2); }
.hp2-plan-top{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.hp2-plan-kind{ font-size:15px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; opacity:.7; }
.hp2-plan-badge{ background:var(--accent); color:var(--text); font-size:15px; font-weight:700; padding:4px 12px; border-radius:999px; }
.hp2-plan h3{ font-size:23px; font-weight:700; line-height:1.2; }
.hp2-plan-price{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.hp2-plan-price .amount{ font-family:var(--font-heading); font-size:34px; font-weight:700; font-variant-numeric:tabular-nums; }
.hp2-plan-price .unit{ opacity:.7; font-size:15px; }
.hp2-plan > p{ font-size:15px; line-height:1.6; opacity:.85; }
.hp2-plan-list{ display:flex; flex-direction:column; gap:10px; font-size:15px; flex:1; border-top:1px solid rgba(148,163,184,0.3); padding-top:18px; }
.hp2-plan-list li{ display:flex; gap:10px; line-height:1.5; }
.hp2-plan-list li::before{ content:'✓'; color:var(--accent); font-weight:700; }
.hp2-plan-cta{ text-align:center; padding:14px 20px; border-radius:10px; font-weight:600; font-size:16px; background:#fff; color:#0b1e36; border:1px solid #cbd5e1; }
.hp2-plan.is-featured .hp2-plan-cta{ background:var(--accent); color:var(--text); border-color:var(--accent); }
.hp2-bundle-bar{ grid-column:1 / -1; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 24px; background:#fff; border:1px solid #dce7f3; border-radius:14px; font-size:14.5px; color:#0b1e36; }
.hp2-bundle-bar strong{ font-weight:700; }
.hp2-bundle-bar-copy{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.hp2-bundle-tag{ display:inline-flex; align-items:center; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; background:rgba(255,117,31,0.12); color:var(--hp2-orange-text); padding:3px 8px; border-radius:6px; }
@media (max-width:640px){ .hp2-bundle-bar{ flex-direction:column; align-items:flex-start; padding:16px 20px; } }

/* ---- Blog (homepage preview: single card or up to 3 cards grid) ---- */
.hp2-blog-card{ display:grid; grid-template-columns:1fr; border:1px solid #dce7f3; border-radius:18px; overflow:hidden; background:#fff; color:#0b1e36; transition:border-color .2s ease; }
@media (min-width:700px){ .hp2-blog-card{ grid-template-columns:1fr 1fr; } }
.hp2-blog-card:hover{ border-color:var(--accent); }
.hp2-blog-card-image{ min-height:220px; aspect-ratio:auto; }
@media (min-width:700px){ .hp2-blog-card-image{ min-height:100%; } }
.hp2-blog-card-image.media-placeholder{ color:#64748b; }
.hp2-blog-card-body{ padding:32px clamp(24px,3vw,44px); display:flex; flex-direction:column; gap:14px; justify-content:center; }
.hp2-blog-tag{ align-self:flex-start; font-size:15px; font-weight:700; color:#0369a1; background:#e0f2fe; padding:5px 10px; border-radius:6px; letter-spacing:.04em; }
.hp2-blog-card-body h3{ font-size:clamp(22px,2.4vw,28px); font-weight:700; line-height:1.2; }
.hp2-blog-card-body h3:hover{ color:var(--hp2-orange-text); }
.hp2-blog-card-body p{ font-size:15.5px; line-height:1.6; color:#334155; }
.hp2-blog-card-foot{ display:flex; gap:16px; font-size:15px; color:#64748b; }

.hp2-blog-grid{ display:grid; grid-template-columns:1fr; gap:24px; }
@media (min-width:680px){ .hp2-blog-grid{ grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); } }
@media (min-width:1024px){ .hp2-blog-grid[data-count="3"]{ grid-template-columns:repeat(3, 1fr); } }

.hp2-blog-grid .hp2-blog-card{ display:flex; flex-direction:column; height:100%; border-radius:16px; }
.hp2-blog-grid .hp2-blog-card:hover{ transform:translateY(-3px); box-shadow:0 16px 36px -12px rgba(11,30,54,0.12); }
.hp2-blog-grid .hp2-blog-card-image{ width:100%; aspect-ratio:16/10; height:200px; min-height:unset; max-height:220px; object-fit:cover; }
.hp2-blog-grid .hp2-blog-card-body{ padding:24px; display:flex; flex-direction:column; gap:12px; flex:1; justify-content:flex-start; }
.hp2-blog-grid .hp2-blog-tag{ font-size:13px; padding:4px 9px; }
.hp2-blog-grid .hp2-blog-card-body h3{ font-size:19px; line-height:1.35; margin:0; }
.hp2-blog-grid .hp2-blog-card-body h3:hover{ color:var(--hp2-orange-text); }
.hp2-blog-grid .hp2-blog-card-body p{ font-size:14.5px; line-height:1.55; color:#475569; margin:0; flex:1; }
.hp2-blog-grid .hp2-blog-card-foot{ display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:13.5px; padding-top:14px; border-top:1px solid #f1f5f9; margin-top:auto; }

/* ---- Contact ---- */
.hp2-contact-grid{ display:grid; grid-template-columns:1fr; gap:48px; align-items:start; }
@media (min-width:900px){ .hp2-contact-grid{ grid-template-columns:1fr 1fr; gap:64px; } }
.hp2-contact-copy{ display:flex; flex-direction:column; gap:20px; }
.hp2-contact-copy p{ font-size:17px; color:#cbd5e1; }
.hp2-contact-boxes{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.12); border-radius:14px; overflow:hidden; }
.hp2-contact-boxes div{ background:var(--hp2-navy-soft); padding:20px; display:flex; flex-direction:column; gap:6px; }
.hp2-contact-boxes .n{ font-family:var(--font-heading); font-weight:700; color:var(--hp2-orange-text-dark); }
.hp2-contact-boxes .t{ color:#fff; font-weight:600; }
.hp2-contact-byline{ display:flex; align-items:center; gap:14px; padding-top:4px; }
.hp2-contact-byline img{ width:48px; height:48px; border-radius:50%; object-fit:cover; object-position:center top; border:2px solid rgba(255,255,255,0.2); }
.hp2-contact-byline p{ font-size:15px; color:#cbd5e1; line-height:1.5; }
.hp2-contact-byline strong{ color:#fff; font-weight:600; }
.hp2-contact-card{ background:#fff; border-radius:18px; padding:36px; box-shadow:0 30px 60px rgba(0,0,0,0.25); }
@media (max-width:480px){ .hp2-contact-card{ padding:22px 18px; border-radius:14px; } .hp2-contact-boxes{ grid-template-columns:1fr; } }
.hp2-contact-form{ display:flex; flex-direction:column; gap:18px; }
.hp2-form-row{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:480px){ .hp2-form-row{ grid-template-columns:1fr 1fr; } }
.hp2-form-field{ display:flex; flex-direction:column; gap:6px; font-size:15px; font-weight:600; color:#0b1e36; }
.hp2-form-field input, .hp2-form-field select, .hp2-form-field textarea{ padding:13px 14px; border:1px solid #cbd5e1; border-radius:10px; font-size:16px; font-family:inherit; color:#0f172a; background:#fff; appearance:none; -webkit-appearance:none; }
.hp2-form-field select{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 40px;
  cursor: pointer;
}
.hp2-form-field textarea{ resize:vertical; }
.hp2-form-field input:focus, .hp2-form-field select:focus, .hp2-form-field textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; }

/* ---- Form Services Section ---- */
.hp2-form-fieldset{ border:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.hp2-form-label{ font-size:15px; font-weight:600; color:#0b1e36; display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:4px; margin-bottom:2px; }
.hp2-form-hint{ font-size:13px; font-weight:400; color:#64748b; }
.hp2-services-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:520px){ .hp2-services-grid{ grid-template-columns:1fr; } }
.hp2-service-chip{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 14px;
  background:#f8fafc;
  border:1.5px solid #e2e8f0;
  border-radius:10px;
  font-size:14.5px;
  font-weight:500;
  color:#1e293b;
  cursor:pointer;
  transition:all .18s ease;
  user-select:none;
  min-height:46px;
}
.hp2-service-chip:hover{
  border-color:#cbd5e1;
  background:#f1f5f9;
}
.hp2-chip-input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  margin:-1px;
  pointer-events:none;
}
.hp2-chip-check{
  width:18px;
  height:18px;
  border-radius:5px;
  border:1.5px solid #94a3b8;
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:transparent;
  flex-shrink:0;
  transition:all .15s ease;
}
.hp2-chip-check svg{
  width:12px;
  height:12px;
}
.hp2-chip-text{
  line-height:1.3;
}
.hp2-service-chip:focus-within{
  outline:2px solid var(--accent);
  outline-offset:1px;
}
.hp2-service-chip:has(.hp2-chip-input:checked),
.hp2-service-chip.is-checked{
  border-color:var(--accent);
  background:#fff7ed;
  color:#0b1e36;
  font-weight:600;
  box-shadow:0 1px 3px rgba(255,117,31,0.12);
}
.hp2-service-chip:has(.hp2-chip-input:checked) .hp2-chip-check,
.hp2-service-chip.is-checked .hp2-chip-check{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
.hp2-contact-form .hp2-btn-accent{ width:100%; justify-content:center; border:none; cursor:pointer; min-height:48px; }
.hp2-form-note{ font-size:15px; line-height:1.55; color:#64748b; }

/* ---- Form Status & In-Page Success Card ---- */
.hp2-form-status {
  display: none;
  margin-bottom: 16px;
}

.hp2-form-status.is-error {
  display: block;
}

.hp2-status-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.45;
}

.hp2-status-alert svg {
  flex-shrink: 0;
  stroke: #dc2626;
}

.hp2-btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(26, 24, 20, 0.25);
  border-top-color: #1a1814;
  border-radius: 50%;
  animation: hp2Spin 0.7s linear infinite;
  margin-right: 6px;
  vertical-align: middle;
}

@keyframes hp2Spin {
  to { transform: rotate(360deg); }
}

.hp2-success-card {
  text-align: center;
  padding: 36px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  animation: hp2FadeIn 0.35s ease;
}

@keyframes hp2FadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.hp2-success-badge {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #dcfce7;
  color: #15803d;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  box-shadow: 0 0 0 8px rgba(220, 252, 231, 0.45);
}

.hp2-success-badge svg {
  width: 30px;
  height: 30px;
  stroke: #16a34a;
}

.hp2-success-card h3 {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 800;
  color: #0b1e36;
  margin: 0 0 10px;
}

.hp2-success-note {
  font-size: 16px;
  color: #475569;
  line-height: 1.6;
  max-width: 44ch;
  margin: 0;
}

.hp2-success-note strong {
  color: #0b1e36;
}

.hp2-success-points {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 22px;
  width: 100%;
  max-width: 360px;
  text-align: left;
}

.hp2-success-pt {
  font-size: 13.5px;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hp2-success-pt span {
  color: #16a34a;
  font-weight: 800;
}

/* ============================================================
   SERVICE DETAIL PAGES (/services/*.html)
   ============================================================ */
.check-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.check-list li{ display:flex; align-items:flex-start; gap:12px; font-size:16.5px; color:var(--text); }
.check-list svg{ width:20px; height:20px; stroke:#10b981; flex-shrink:0; margin-top:2px; }

.svc-hero{ padding-top:64px; }
.svc-hero-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center; }
@media (max-width:900px){ .svc-hero-grid{ grid-template-columns:1fr; } }
.svc-quick-card{ background:var(--bg-2); border:1px solid var(--line); border-radius:20px; padding:32px; }
.svc-quick-card .foot-label{ font-family:var(--font-label); font-size:15px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text); display:block; margin-bottom:10px; }
.svc-quick-card h2{ font-size:22px; margin-bottom:10px; }
.svc-quick-card p{ color:var(--muted); font-size:15.5px; line-height:1.65; margin:0; }

.svc-callout{ background:var(--bg-3); border:1px solid var(--line); border-radius:20px; padding:clamp(28px,4vw,44px); text-align:center; }
.svc-callout h2{ font-size:clamp(26px,3.4vw,36px); max-width:26ch; margin:0 auto 14px; }
.svc-callout p{ color:var(--muted); font-size:17px; max-width:64ch; margin:0 auto; }

.svc-card{ background:var(--bg-2); border:1px solid var(--line); border-radius:16px; padding:26px 24px; transition:border-color .2s ease, transform .2s ease; }
.svc-card:hover{ border-color:rgba(255,117,31,0.35); transform:translateY(-2px); }
.svc-card .svc-num{ display:block; font-family:var(--font-label); font-size:15px; font-weight:700; color:var(--text); margin-bottom:10px; }
.svc-card h3{ font-size:19px; margin-bottom:8px; }
.svc-card p{ color:var(--muted); font-size:15px; margin:0; }

.svc-row-list{ display:flex; flex-direction:column; border-top:1px solid var(--line); margin-top:44px; }
.svc-row{ display:grid; grid-template-columns:1fr 1.4fr; gap:8px 48px; padding:26px 0; border-bottom:1px solid var(--line); align-items:baseline; }
@media (max-width:700px){ .svc-row{ grid-template-columns:1fr; } }
.svc-row h3{ font-size:19px; margin:0; }
.svc-row p{ font-size:15.5px; color:var(--muted); margin:0; }

.svc-split{ border:1px solid var(--line); border-radius:20px; overflow:hidden; margin-top:24px; }
.svc-split-head{ padding:30px 34px; border-bottom:1px solid var(--line); }
.svc-split-head h2{ margin-bottom:10px; }
.svc-split-head p{ color:var(--muted); font-size:16px; max-width:70ch; margin:0; }
.svc-split-cols{ display:grid; grid-template-columns:1fr 1fr; }
@media (max-width:700px){ .svc-split-cols{ grid-template-columns:1fr; } }
.svc-split-col{ padding:26px 34px; display:flex; flex-direction:column; gap:8px; }
.svc-split-col:first-child{ background:rgba(255,117,31,0.06); border-right:1px solid var(--line); }
@media (max-width:700px){ .svc-split-col:first-child{ border-right:none; border-bottom:1px solid var(--line); } }
.svc-split-col:last-child{ background:var(--bg-3); }
.svc-split-label{ font-family:var(--font-label); font-size:15px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text); }
.svc-split-title{ font-family:var(--font-heading); font-size:20px; font-weight:700; color:var(--text); }

.svc-stack{ display:flex; flex-direction:column; gap:10px; background:var(--bg-2); border:1px solid var(--line); border-radius:20px; padding:28px; }
.svc-stack-bar{ border-radius:10px; padding:16px 20px; font-family:var(--font-heading); font-weight:700; font-size:16.5px; color:#fff; }

.svc-numbered-list{ display:flex; flex-direction:column; }
.svc-numbered-row{ display:flex; gap:22px; align-items:baseline; padding:20px 0; border-top:1px solid var(--line); }
.svc-numbered-row:last-child{ border-bottom:1px solid var(--line); }
.svc-numbered-row .n{ font-family:var(--font-heading); font-size:28px; font-weight:800; color:var(--text); min-width:44px; }
.svc-numbered-row span:last-child{ font-size:18px; color:var(--text); font-weight:500; }

.svc-attribution-list{ display:flex; flex-direction:column; gap:12px; }
.svc-attribution-row{ border:1px solid var(--line); border-radius:16px; padding:20px 22px; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.svc-attribution-row .label{ font-family:var(--font-heading); font-size:18px; font-weight:700; color:var(--text); }
.svc-dots{ display:flex; gap:6px; }
.svc-dots span{ width:12px; height:12px; border-radius:999px; background:var(--line); }
.svc-dots span.is-on{ background:var(--accent); }

.svc-dark-panel{ background:#0b1e36; border-radius:24px; padding:clamp(32px,4vw,52px); color:#fff; }
.svc-dark-panel h2{ color:#fff; }
.svc-dark-panel .eyebrow{ color:#ff9a52; }
.svc-dark-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:24px; }
@media (max-width:700px){ .svc-dark-grid{ grid-template-columns:1fr; } }
.svc-dark-item{ background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:14px; padding:20px 22px; font-size:16px; line-height:1.55; color:#fff; }
.svc-dark-item.is-accent{ background:var(--accent); border-color:var(--accent); font-weight:700; }

.svc-related{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:28px; }
.svc-related a{ display:inline-block; padding:10px 20px; border-radius:999px; border:1px solid var(--line); color:var(--text); font-size:15px; font-weight:600; text-decoration:none; transition:border-color .2s ease, color .2s ease; }
.svc-related a:hover{ border-color:var(--accent); color:var(--accent); }
.svc-tint-card p{ color:var(--text); }
.svc-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px; }
@media (max-width:900px){ .svc-grid-3{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .svc-grid-3{ grid-template-columns:1fr; } }
.check-list.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px 40px; }
@media (max-width:700px){ .check-list.grid-2{ grid-template-columns:1fr; } }
.svc-two-col{ display:grid; grid-template-columns:1fr 1.4fr; gap:24px 48px; padding:44px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
@media (max-width:700px){ .svc-two-col{ grid-template-columns:1fr; } }
.svc-two-col h2{ margin:0; }
.svc-two-col p{ color:var(--muted); font-size:16px; margin:0; }
.svc-split-simple{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:24px; }
@media (max-width:700px){ .svc-split-simple{ grid-template-columns:1fr; } }
.svc-pill-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.svc-pill{ padding:8px 16px; border-radius:999px; font-size:15px; font-weight:600; }
.svc-pill.is-muted{ background:var(--bg-3); color:var(--muted); text-decoration:line-through; }
.svc-pill.is-active{ border:1.5px solid var(--accent); color:#c2410c; }

.svc-card-link{ display:block; color:inherit; text-decoration:none; }
.svc-card-link .svc-card-cta{ display:inline-flex; align-items:center; gap:4px; margin-top:14px; font-size:15px; font-weight:700; color:var(--text); }
.svc-card-link:hover .svc-card-cta{ color:var(--accent-hover, var(--text)); text-decoration:underline; }

/* ---------- NAV DROPDOWN (desktop Services menu) ---------- */
.nav-dropdown{ position:relative; }
.nav-dropdown-trigger{ display:inline-flex; align-items:center; gap:5px; }
.nav-caret{ width:13px; height:13px; transition:transform .18s ease; }
.nav-dropdown-menu{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  padding-top:14px; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .16s ease, visibility 0s linear .16s;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu{
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .16s ease;
}
.nav-dropdown:hover .nav-caret,
.nav-dropdown:focus-within .nav-caret{ transform:rotate(180deg); }
.nav-dropdown-panel{
  min-width:250px; background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 20px 44px rgba(15,23,42,0.14); padding:10px;
}
.nav-dropdown-panel a{ display:block; padding:10px 14px; border-radius:9px; font-size:16px; color:var(--muted); font-family:var(--font-label); font-weight:500; white-space:nowrap; text-decoration:none; }
.nav-dropdown-panel a:hover{ background:var(--bg-3); color:var(--text); }
.nav-dropdown-panel a.nav-dropdown-viewall{ margin-top:6px; padding-top:14px; border-top:1px solid var(--line); font-weight:600; font-size:16px; color:var(--text); }

/* ---------- NAV DROPDOWN (mobile Services submenu) ---------- */
@media (max-width:700px){
  .mobile-menu details{
    border-bottom:1px solid var(--line);
    opacity:0; transform:translateY(14px);
    transition:opacity .35s ease, transform .35s ease;
  }
  .mobile-menu.is-open details{ opacity:1; transform:translateY(0); transition-delay:.13s; }
  .mobile-menu details summary{
    list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px;
    color:var(--muted); font-family:var(--font-display); font-size:clamp(22px, 5.5vw, 28px); font-weight:700;
    letter-spacing:-0.01em; padding:16px 0; touch-action:manipulation;
  }
  .mobile-menu details summary::-webkit-details-marker{ display:none; }
  .mobile-menu details summary svg{ width:22px; height:22px; transition:transform .2s ease; flex-shrink:0; }
  .mobile-menu details[open] summary svg{ transform:rotate(180deg); }
  .mobile-menu .mobile-submenu{ display:flex; flex-direction:column; padding:0 0 18px 4px; gap:4px; }
  .mobile-menu .mobile-submenu a{
    font-size:19px; font-weight:600; padding:8px 0; border-bottom:none; opacity:1; transform:none; color:var(--muted);
  }
  .mobile-menu .mobile-submenu a:active{ color:var(--text); }
}

/* ============================================================
   PRICING PAGE v2: two-track (local / B2B) pricing, layered on
   top of the existing .pricing-tabs / .tier-card components above,
   plus a plain .cmp-table comparison table (ports the source
   mockup's minimal table chrome directly).
   ============================================================ */

/* ---- How pricing works ---- */
.pt-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; }
@media (max-width:860px){ .pt-steps{ grid-template-columns:1fr; } }
.pt-step{ background:var(--bg-2); border:1px solid var(--line); border-radius:16px; padding:26px 24px; }
.pt-step.is-free{ border:2px solid var(--accent); background:rgba(255,117,31,0.05); }
.pt-step-label{ font-family:var(--font-label); font-size:15px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-dim); }
.pt-step.is-free .pt-step-label{ color:var(--text); }
.pt-step h2{ font-size:19px; margin:6px 0 10px; }
.pt-step p{ color:var(--muted); font-size:15px; line-height:1.6; margin:0; }

/* ---- Track tabs (reuses .pricing-tabs / .pricing-panel) ---- */
.pt-track-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-top:56px; padding-top:40px; border-top:1px solid var(--line); }
.pt-track-head h2{ font-size:24px; font-weight:800; color:var(--text); }
.pt-track-intro{ margin-top:16px; color:var(--muted); font-size:15px; max-width:70ch; line-height:1.6; }
.pt-track-intro strong{ color:var(--text); }
.pt-track-lede{ color:var(--muted); font-size:16.5px; max-width:70ch; margin:0 0 8px; }
.cmp-jump{ margin-top:24px; }
.cmp-jump a{ font-size:15px; font-weight:700; color:var(--text); text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:4px; }

/* ---- Tier grid widths (Local = 3 cards, B2B = 2x2 step grid) ---- */
.tier-grid-3{ grid-template-columns:repeat(3,1fr); }
.tier-grid-b2b{ grid-template-columns:repeat(2,1fr); }
@media (max-width:980px){ .tier-grid-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px){ .tier-grid-3, .tier-grid-b2b{ grid-template-columns:1fr; } }

/* ---- Featured (dark) tier card, used on the local track ---- */
.tier-card.is-featured{ background:#0d0d0d; border:2px solid var(--accent); color:#fff; box-shadow:0 20px 44px rgba(0,0,0,0.35); }
.tier-card.is-featured:hover{ border-color:var(--accent); }
.tier-card.is-featured .tier-name{ color:#fff; }
.tier-card.is-featured .tier-meta{ color:#94a3b8; }
.tier-card.is-featured .tier-price .amount{ color:#fff; }
.tier-card.is-featured .tier-price .suffix{ color:#94a3b8; }
.tier-card.is-featured .tier-who{ color:#cbd5e1; }
.tier-card.is-featured .tier-item-title{ color:#f1f5f9; }
.tier-card.is-featured .tier-item svg{ stroke:#ffb27a; }
.tier-ribbon.is-left{ left:28px; transform:none; }
.tier-ribbon.is-right{ left:auto; right:24px; transform:none; top:-13px; }

/* ---- B2B track: a 4-step progression, color-coded per step ---- */
.tier-step-label{ font-size:15px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted-dim); margin-bottom:8px; }
.tier-step-label.is-accent{ color:#b45309; }
.tier-card.is-step0{ border-width:4px 1px 1px; border-style:solid; border-color:#94a3b8 var(--line) var(--line); }
.tier-card.is-step1{ border-width:4px 1px 1px; border-style:solid; border-color:#fcd34d var(--line) var(--line); }
.tier-card.is-step2{ border-width:4px 2px 2px; border-style:solid; border-color:#b45309 #d97706 #d97706; background:#fffbeb; }
.tier-card.is-step3{ border-width:4px 1px 1px; border-style:solid; border-color:#78350f var(--line) var(--line); }
.tier-dot{ flex:0 0 auto; width:24px; height:24px; border-radius:50%; color:#fff; font-size:15px; font-weight:800; display:flex; align-items:center; justify-content:center; margin-top:2px; }
.tier-dot.is-gray{ background:#94a3b8; }
.tier-dot.is-amber{ background:#b45309; }
.is-step2-cta{ background:#b45309; border:1px solid #b45309; color:#fff; }

/* ---- Small callout note inside a tier card ---- */
.tier-callout{ margin-top:16px; font-size:15px; line-height:1.55; color:var(--muted); background:rgba(255,117,31,0.08); border:1px solid rgba(255,117,31,0.2); border-radius:10px; padding:12px 14px; }
.tier-callout.is-plain{ background:var(--bg-3); border-color:var(--line); }

/* ---- Comparison table: plain, minimal chrome (ports the mockup's table 1:1) ---- */
.cmp-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:16px; -webkit-overflow-scrolling:touch; }
.cmp-table-wrap{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; margin:24px 0; }
.cmp-table{ width:100%; min-width:720px; border-collapse:collapse; text-align:left; font-size:15px; background:var(--bg-2); }
.cmp-table.is-wide{ min-width:880px; }
.cmp-table thead{ background:var(--bg-3); }
.cmp-table th, .cmp-table td{ padding:16px; vertical-align:top; }
.cmp-table thead th{ font-weight:400; }
.cmp-table .cmp-name{ display:block; font-size:15.5px; font-weight:800; color:var(--text); }
.cmp-table .cmp-meta{ display:block; font-size:15px; font-weight:600; color:var(--muted-dim); margin-top:2px; }
.cmp-table thead th.is-highlight{ background:#fffbeb; }
.cmp-table tbody tr{ border-top:1px solid var(--line); }
.cmp-table tbody th[scope="row"]{ font-weight:600; color:var(--text); white-space:nowrap; }
.cmp-table td{ color:var(--muted); }
.cmp-table td.is-highlight{ background:rgba(255,251,235,0.6); }
@media (max-width:640px){
  .cmp-table th, .cmp-table td{ padding:13px 14px; font-size:15px; }
  .cmp-table .cmp-name{ font-size:15px; }
}

/* ---- Cross-track link ---- */
.track-cross-link{ margin-top:28px; font-size:15px; color:var(--muted); }
.track-cross-link button{ appearance:none; background:none; border:none; padding:0; font:inherit; font-weight:700; color:var(--text); text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:3px; cursor:pointer; touch-action:manipulation; }
.track-cross-link button:hover{ color:var(--accent); }

/* ---- Fine print rules grid ---- */
.rules-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; }
@media (max-width:980px){ .rules-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .rules-grid{ grid-template-columns:1fr; } }
.rule-card{ background:var(--bg-2); border:1px solid var(--line); border-radius:16px; padding:24px; transition:border-color .2s ease, transform .2s ease; }
.rule-card:hover{ border-color:rgba(255,117,31,0.3); transform:translateY(-2px); }
.rule-card h3{ font-size:17px; margin-bottom:8px; }
.rule-card p{ color:var(--muted); font-size:15px; margin:0; line-height:1.55; }
.rules-note{ text-align:center; max-width:60ch; margin:36px auto 0; color:var(--muted); font-size:15px; }
.rules-note strong{ color:var(--text); }

/* ---- Final CTA (two column, with Leak Check checklist card) ---- */
.final-cta-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center; background:#0d0d0d; border-radius:24px; padding:clamp(32px,4vw,56px); color:#fff; }
@media (max-width:860px){ .final-cta-grid{ grid-template-columns:1fr; gap:36px; } }
.final-cta-copy p{ color:#cbd5e1; font-size:16.5px; line-height:1.65; margin:14px 0 0; }
.final-cta-copy h2{ color:#fff; margin-top:6px; }
.final-cta-copy .btn{ margin-top:24px; }
.final-cta-note{ font-size:15px; color:#94a3b8; margin-top:14px; }
.final-cta-card{ background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.14); border-radius:18px; padding:28px; }
.final-cta-card-head{ display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.final-cta-card-head img{ width:44px; height:44px; border-radius:50%; object-fit:cover; object-position:top; flex-shrink:0; }
.final-cta-card-head p{ font-weight:700; color:#fff; margin:0; }
.final-cta-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px; }
.final-cta-list li{ display:flex; align-items:flex-start; gap:14px; font-size:15px; color:#e2e8f0; line-height:1.5; }
.final-cta-list .n{ flex-shrink:0; width:26px; height:26px; border-radius:50%; background:var(--accent); color:var(--text); font-family:var(--font-label); font-weight:700; font-size:15px; display:flex; align-items:center; justify-content:center; }

/* ---- FAQ: individual rounded cards (pricing page only) ---- */
#pricing-faq .faq-list{ display:flex; flex-direction:column; gap:12px; max-width:none; margin-top:40px; }
#pricing-faq .faq-item{ border:1px solid var(--line); border-radius:16px; padding:4px 20px; }
#pricing-faq .faq-item:first-child{ border-top:1px solid var(--line); }
.faq-plus{ font-size:20px; line-height:1; color:var(--accent); font-weight:400; flex-shrink:0; transition:transform .2s ease; }
.faq-item[open] .faq-plus{ transform:rotate(45deg); }

/* ============================================================
   SERVICE PAGE: Google & Microsoft Ads (google-microsoft-ads.html)
   ============================================================ */
.svc-section-tint{ background:var(--bg-3); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.svc-section-dark{ background:#0b1e36; color:#fff; }
.svc-section-dark h1, .svc-section-dark h2, .svc-section-dark h3{ color:#fff; }
.svc-section-dark .eyebrow{ color:#ff9a52; }
.svc-section-dark .section-lede{ color:#cbd5e1; }

/* ---- Hero & Right Cards Redesign ---- */
.svc-hero{ padding:64px 0 72px; position:relative; }
.svc-breadcrumb{ font-size:15px; font-weight:600; color:var(--muted-dim); margin:0 0 20px; }
.svc-breadcrumb a{ color:var(--muted-dim); text-decoration:none; }
.svc-breadcrumb .is-current{ color:var(--accent); }

.svc-hero-badge{
  display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px;
  background:rgba(255,117,31,0.1); border:1px solid rgba(255,117,31,0.28);
  font-family:var(--font-label); font-size:13px; font-weight:700; letter-spacing:0.03em;
  color:#c2410c; width:fit-content; margin-bottom:18px; text-decoration:none;
}
.svc-badge-dot{
  width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 6px rgba(255,117,31,0.7); display:inline-block; flex-shrink:0;
}

.svc-hero-title{
  font-family:var(--font-heading); font-weight:800; font-size:clamp(32px,4.2vw,48px);
  line-height:1.12; letter-spacing:-0.015em; color:var(--text); margin:0 0 18px;
}
.svc-hero-title .is-accent{
  color:#c2410c; background:linear-gradient(135deg,#c2410c 0%,#ff751f 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}

.svc-hero-lede{
  font-size:clamp(17px,1.8vw,18.5px); line-height:1.6; color:var(--muted);
  max-width:580px; margin:0 0 26px;
}
.svc-hero-ctas{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:0 0 20px; }

.svc-hero-proof-line{
  display:flex; align-items:center; gap:9px; font-size:14px; color:var(--muted-dim);
  margin-bottom:28px; line-height:1.4;
}
.svc-hero-proof-line svg{ width:16px; height:16px; stroke:#10b981; flex-shrink:0; }

.svc-hero-note{ font-size:15px; color:var(--muted-dim); margin:0 0 32px; }

.svc-hero-stats-row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  padding-top:24px; border-top:1px solid var(--line); margin:0;
}
.svc-hero-stats-row.cols-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:640px){
  .svc-hero-stats-row, .svc-hero-stats-row.cols-4{ grid-template-columns:repeat(2,1fr); gap:16px; }
}
.svc-hero-stat-cell{ display:flex; flex-direction:column; }
.svc-hero-stat-cell dt{ font-size:13px; color:var(--muted-dim); line-height:1.35; margin:0 0 5px; }
.svc-hero-stat-cell dd{
  font-family:var(--font-heading); font-weight:800; font-size:clamp(22px,2.4vw,28px);
  color:var(--text); line-height:1.1; margin:0;
}
.svc-hero-stat-cell dd.is-accent{ color:#c2410c; }

/* Legacy aliases */
.svc-hero-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding-top:24px; border-top:1px solid var(--line); margin:0; }
.svc-hero-stats dt{ font-size:15px; color:var(--muted-dim); margin:0 0 6px; }
.svc-hero-stats dd{ font-family:var(--font-heading); font-weight:800; font-size:26px; color:var(--text); margin:0; }

/* ---- Right-Side Cards & Telemetry ---- */
.svc-card-wrapper{ position:relative; }
.svc-card-aura{
  position:absolute; inset:-12px; border-radius:36px;
  background:radial-gradient(circle at 65% 25%,rgba(255,117,31,0.15) 0%,rgba(14,165,233,0.08) 50%,transparent 80%);
  filter:blur(28px); z-index:1; pointer-events:none; opacity:0.85;
}
.svc-dark-card{
  position:relative; z-index:2; border-radius:24px;
  background:linear-gradient(165deg,#07101d 0%,#0b1a2e 55%,#050b14 100%);
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 28px 60px -15px rgba(2,6,23,0.5), inset 0 1px 1px rgba(255,255,255,0.12);
  color:#ffffff; padding:28px 26px; overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.svc-dark-card:hover{
  transform:translateY(-2px); border-color:rgba(255,117,31,0.35);
  box-shadow:0 32px 70px -15px rgba(2,6,23,0.6), 0 0 24px -5px rgba(255,117,31,0.18), inset 0 1px 1px rgba(255,255,255,0.15);
}

.svc-card-topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.svc-card-pill{
  font-family:var(--font-label); font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.07em;
  color:#ff9a52; background:rgba(255,117,31,0.12); border:1px solid rgba(255,117,31,0.28);
  padding:3px 10px; border-radius:999px; white-space:nowrap;
}
.svc-card-live{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:#94a3b8; }
.svc-pulse-dot{
  width:7px; height:7px; border-radius:50%; background:#10b981;
  box-shadow:0 0 0 0 rgba(16,185,129,0.7); animation:svcPulse 2s cubic-bezier(0.4,0,0.6,1) infinite;
  display:inline-block; flex-shrink:0;
}
@keyframes svcPulse{
  0%{ transform:scale(0.95); box-shadow:0 0 0 0 rgba(16,185,129,0.7); }
  70%{ transform:scale(1); box-shadow:0 0 0 7px rgba(16,185,129,0); }
  100%{ transform:scale(0.95); box-shadow:0 0 0 0 rgba(16,185,129,0); }
}

.svc-card-heading{ font-family:var(--font-heading); font-weight:800; font-size:19px; line-height:1.25; color:#ffffff; margin:0 0 4px; }
.svc-card-subheading{ font-size:13.5px; line-height:1.45; color:#94a3b8; margin:0 0 18px; }
.svc-card-stack{ display:flex; flex-direction:column; gap:10px; }

/* Telemetry rows (Google Ads) */
.svc-telemetry-row{
  border-radius:14px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
  padding:13px 15px; transition:all .2s ease;
}
.svc-telemetry-row:hover{ background:rgba(255,255,255,0.07); border-color:rgba(255,255,255,0.16); transform:translateX(2px); }
.svc-telemetry-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.svc-telemetry-label{ font-size:13.5px; font-weight:700; color:#e2e8f0; }

.svc-delta-tag{
  display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:999px;
  font-family:var(--font-label); font-size:11.5px; font-weight:700; white-space:nowrap;
}
.svc-delta-tag.is-green{ color:#34d399; background:rgba(16,185,129,0.15); border:1px solid rgba(52,211,153,0.35); }
.svc-delta-tag.is-blue{ color:#38bdf8; background:rgba(56,189,248,0.15); border:1px solid rgba(56,189,248,0.35); }
.svc-delta-tag.is-amber{ color:#fbbf24; background:rgba(245,158,11,0.15); border:1px solid rgba(251,191,36,0.35); }

.svc-telemetry-cols{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:6px; }
.svc-col-stat{ border-radius:8px; background:rgba(0,0,0,0.25); padding:7px 10px; }
.svc-col-stat .meta{ display:block; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; color:#64748b; margin-bottom:2px; }
.svc-col-stat .val{ font-family:var(--font-heading); font-weight:800; font-size:15.5px; line-height:1.2; }
.svc-col-stat.is-before .val{ color:#f87171; text-decoration:line-through; text-decoration-color:rgba(248,113,113,0.6); opacity:0.88; }
.svc-col-stat.is-after .val{ color:#ffffff; }

.svc-score-meter{ margin-top:8px; display:flex; gap:3px; }
.svc-score-notch{ flex:1; height:5px; border-radius:2px; background:rgba(255,255,255,0.1); }
.svc-score-notch.is-filled{ background:linear-gradient(90deg,#38bdf8,#34d399); box-shadow:0 0 6px rgba(52,211,153,0.4); }

/* Artifact items (Marketing Strategy) */
.svc-artifact-row{
  display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:14px;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); transition:all .2s ease;
}
.svc-artifact-row:hover{ background:rgba(255,255,255,0.07); border-color:rgba(255,117,31,0.3); transform:translateX(2px); }
.svc-artifact-num{
  width:26px; height:26px; border-radius:7px; background:var(--accent); color:#1A1814;
  font-family:var(--font-heading); font-size:13px; font-weight:800; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; box-shadow:0 2px 8px rgba(255,117,31,0.35); margin-top:1px;
}
.svc-artifact-content{ flex:1; min-width:0; }
.svc-artifact-title-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:2px; }
.svc-artifact-name{ font-size:14px; font-weight:800; color:#ffffff; margin:0; }
.svc-artifact-tag{
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
  color:#94a3b8; background:rgba(255,255,255,0.06); padding:2px 6px; border-radius:4px; white-space:nowrap;
}
.svc-artifact-desc{ font-size:12.5px; line-height:1.4; color:#cbd5e1; margin:0; }

/* Channel items (Paid Social) */
.svc-channel-card{
  border-radius:14px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
  padding:13px 15px; transition:all .2s ease;
}
.svc-channel-card:hover{ background:rgba(255,255,255,0.07); border-color:rgba(255,255,255,0.18); transform:translateX(2px); }
.svc-channel-card-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:5px; }
.svc-channel-title{ font-size:14px; font-weight:800; color:#ffffff; display:flex; align-items:center; gap:8px; }
.svc-channel-desc{ font-size:12.5px; line-height:1.4; color:#cbd5e1; margin:0 0 7px; }
.svc-channel-footer-metrics{
  display:flex; align-items:center; gap:12px; font-size:11.5px; color:#94a3b8;
  border-top:1px solid rgba(255,255,255,0.06); padding-top:6px;
}
.svc-channel-metric-bullet{ display:inline-flex; align-items:center; gap:5px; }
.svc-channel-metric-bullet svg{ width:13px; height:13px; stroke:#34d399; }

/* Engine items (Services Hub index.html) */
.sv3-hero-grid{
  display:grid; grid-template-columns:1.08fr 0.92fr; gap:48px; align-items:center; margin-bottom:56px;
}
@media (max-width:960px){
  .sv3-hero-grid{ grid-template-columns:1fr; gap:40px; margin-bottom:40px; }
}
.sv3-engine-item{
  display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:12px;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07);
  text-decoration:none; color:#ffffff; transition:all .2s ease;
}
.sv3-engine-item:hover{
  background:rgba(255,255,255,0.08); border-color:rgba(255,117,31,0.4); transform:translateX(3px);
}
.sv3-engine-step-badge{
  width:24px; height:24px; border-radius:6px; background:rgba(255,117,31,0.2); border:1px solid rgba(255,117,31,0.4);
  color:#ff9a52; font-size:11.5px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.sv3-engine-info{ flex:1; min-width:0; }
.sv3-engine-name{ font-size:13.5px; font-weight:700; color:#ffffff; display:block; }
.sv3-engine-desc{ font-size:11.5px; color:#94a3b8; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sv3-engine-arrow{ color:#64748b; font-size:15px; transition:transform .2s ease, color .2s ease; }
.sv3-engine-item:hover .sv3-engine-arrow{ color:#ff9a52; transform:translateX(3px); }
.sv3-engine-connector{
  width:2px; height:8px; background:linear-gradient(180deg,rgba(255,117,31,0.4),rgba(255,255,255,0.1));
  margin:-2px 0 -2px 24px;
}

/* Card Bottom Footer */
.svc-card-bottom{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-top:16px; padding-top:12px; border-top:1px solid rgba(255,255,255,0.08);
  font-size:12px; color:#94a3b8;
}
.svc-card-bottom-proof{ display:inline-flex; align-items:center; gap:6px; }
.svc-card-bottom-proof svg{ width:14px; height:14px; stroke:#10b981; }
.svc-card-seal{
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em;
  color:#cbd5e1; background:rgba(255,255,255,0.06); padding:3px 8px; border-radius:4px;
}

/* Backward-compatible panel classes */
.svc-hero-panel{ border-radius:24px; background:#0b1e36; color:#fff; padding:32px; box-shadow:0 20px 50px rgba(11,30,54,0.25); }
.svc-hero-panel-head{ font-weight:700; font-size:15px; margin:0; }
.svc-hero-panel-sub{ font-size:15px; color:#94a3b8; margin:4px 0 24px; }
.svc-hero-metric{ border-radius:16px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); padding:16px; }
.svc-hero-metric + .svc-hero-metric{ margin-top:14px; }
.svc-hero-metric-head{ display:flex; justify-content:space-between; font-size:15px; }
.svc-hero-metric-head span:first-child{ color:#cbd5e1; }
.svc-hero-metric-head span:last-child{ font-weight:800; color:#38bdf8; }
.svc-hero-metric-cols{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; font-size:15px; }
.svc-hero-metric-cols .l{ display:block; font-size:15px; color:#64748b; }
.svc-hero-metric-cols .before{ font-weight:700; color:#fca5a5; }
.svc-hero-metric-cols .after{ font-weight:700; color:#fff; }

/* ---- Who it's for ---- */
.svc-audience-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:700px){ .svc-audience-grid{ grid-template-columns:1fr; } }
.svc-audience-card{ background:var(--bg-2); border:1px solid var(--line); border-radius:20px; padding:32px; }
.svc-audience-card h3{ font-size:1.3rem; margin-bottom:12px; }
.svc-audience-card p{ color:var(--muted); line-height:1.7; margin:0 0 20px; }

/* ---- Leaks (sticky numeral + list) ---- */
.svc-leak-grid{ display:grid; grid-template-columns:0.85fr 2fr; gap:56px; align-items:start; }
@media (max-width:860px){ .svc-leak-grid{ grid-template-columns:1fr; } }
.svc-leak-aside{ position:sticky; top:100px; }
.svc-leak-aside .big-num{ font-family:var(--font-heading); font-weight:800; font-size:5.5rem; line-height:1; color:var(--text); margin:0; }
.svc-leak-aside .label{ font-size:15px; font-weight:700; color:var(--muted-dim); text-transform:uppercase; letter-spacing:1px; margin:8px 0 0; }
.svc-leak-aside .bar{ width:48px; height:3px; background:var(--accent); margin:20px 0; }
.svc-leak-aside p{ font-size:15px; color:var(--muted); line-height:1.6; margin:0; }
.svc-leak-list{ display:flex; flex-direction:column; }
.svc-leak-row{ display:grid; grid-template-columns:60px 1fr; gap:20px; padding:28px 0; border-top:1px solid var(--line); }
.svc-leak-list .svc-leak-row:last-child{ border-bottom:1px solid var(--line); }
.svc-leak-icon{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.svc-leak-icon svg{ width:20px; height:20px; }
.svc-leak-icon.is-accent{ background:rgba(255,117,31,0.1); color:var(--accent); }
.svc-leak-icon.is-blue{ background:rgba(14,165,233,0.1); color:#0ea5e9; }
.svc-leak-num{ font-size:15px; font-weight:700; color:#64748b; margin:0 0 4px; }
.svc-leak-row h3{ font-size:1.15rem; margin:0; }
.svc-leak-row .desc{ font-size:15px; color:var(--muted); margin:10px 0 0; line-height:1.65; max-width:620px; }
.svc-leak-fix{ font-size:15px; margin:12px 0 0; }
.svc-leak-fix strong{ color:var(--accent); }

/* ---- Services timeline ---- */
.svc-timeline{ position:relative; max-width:760px; padding-left:8px; }
.svc-timeline::before{ content:''; position:absolute; left:27px; top:8px; bottom:8px; width:2px; background:var(--line); }
.svc-timeline-item{ position:relative; display:grid; grid-template-columns:56px 1fr; gap:24px; padding-bottom:36px; }
.svc-timeline-item:last-child{ padding-bottom:0; }
.svc-timeline-icon{ width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; z-index:1; flex-shrink:0; }
.svc-timeline-icon svg{ width:22px; height:22px; }
.svc-timeline-icon.is-fill{ background:var(--accent); color:var(--text); }
.svc-timeline-icon.is-outline-accent{ background:#fff; border:2px solid var(--accent); color:var(--accent); }
.svc-timeline-icon.is-outline-blue{ background:#fff; border:2px solid #0ea5e9; color:#0ea5e9; }
.svc-timeline-icon.is-dark{ background:#0b1e36; color:#fff; }
.svc-timeline-body{ padding-top:6px; }
.svc-timeline-body h3{ font-size:1.15rem; margin:0; }
.svc-timeline-body p{ font-size:15px; color:var(--muted); margin:8px 0 0; line-height:1.6; }

/* ---- 4-step tracker ---- */
.svc-steps-wrap{ position:relative; }
.svc-steps-track{ position:absolute; top:22px; left:12.5%; right:12.5%; height:2px; background:var(--line); }
.svc-steps-track-fill{ position:absolute; top:22px; left:12.5%; width:25%; height:2px; background:var(--accent); }
.svc-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; position:relative; }
.svc-step{ text-align:center; }
.svc-step-num{ display:flex; width:44px; height:44px; margin:0 auto; align-items:center; justify-content:center; border-radius:50%; font-weight:800; font-size:1rem; box-shadow:0 0 0 5px #fff; background:#fff; border:2px solid #cbd5e1; color:var(--muted-dim); }
.svc-step-num.is-active{ background:var(--accent); border-color:var(--accent); color:var(--text); }
.svc-step-phase{ font-size:15px; font-weight:700; color:var(--muted-dim); margin:18px 0 6px; text-transform:uppercase; letter-spacing:.5px; }
.svc-step-phase.is-active{ color:var(--accent); }
.svc-step h3{ font-size:1.1rem; margin:0; }
.svc-step p{ font-size:15px; color:var(--muted); margin:10px 0 0; line-height:1.6; }
.svc-step .out{ font-size:15px; color:var(--text); margin:12px 0 0; padding-top:12px; border-top:1px solid var(--line); }
@media (max-width:760px){
  .svc-steps{ grid-template-columns:1fr; text-align:left; gap:32px; }
  .svc-steps-track, .svc-steps-track-fill{ display:none; }
  .svc-step-num{ margin:0; }
}

/* ---- Results ---- */
.svc-results-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:900px){ .svc-results-grid{ grid-template-columns:1fr; } }
.svc-result-card{ border:1px solid var(--line); border-radius:20px; padding:28px; display:flex; flex-direction:column; }
.svc-result-card .meta{ font-size:15px; font-weight:700; color:var(--muted-dim); margin:0; }
.svc-result-card h3{ font-size:1.15rem; margin:10px 0 0; }
.svc-result-card p{ font-size:15px; color:var(--muted); margin:12px 0 0; line-height:1.6; flex:1; }
.svc-result-stats{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:22px 0 0; padding-top:18px; border-top:1px solid var(--line); }
.svc-result-stats dt{ font-size:15px; color:var(--muted-dim); margin:0 0 4px; }
.svc-result-stats dd{ font-family:var(--font-heading); font-weight:800; font-size:1.5rem; color:#b45309; margin:0; }

/* ---- Cost explainer + generic 2-col grid ---- */
.svc-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:700px){ .svc-grid-2{ grid-template-columns:1fr; } }

.svc-cost-card{ background:var(--bg-2); border:1px solid var(--line); border-radius:20px; padding:32px; display:flex; flex-direction:column; height:100%; transition:border-color .2s ease, transform .2s ease; }
.svc-cost-card:hover{ border-color:rgba(255,117,31,0.35); transform:translateY(-2px); }
.svc-cost-tag{ display:inline-block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:#c2410c; background:rgba(255,117,31,0.1); border:1px solid rgba(255,117,31,0.25); padding:4px 10px; border-radius:999px; margin-bottom:14px; width:fit-content; }
.svc-cost-tag.is-blue{ color:#0369a1; background:rgba(14,165,233,0.1); border-color:rgba(14,165,233,0.25); }
.svc-cost-card h3{ font-size:21px; font-weight:800; color:var(--text); margin:0 0 12px; }
.svc-cost-card p{ font-size:15.5px; line-height:1.6; color:var(--muted); margin:0 0 14px; }
.svc-cost-stat{ margin-top:auto; padding-top:16px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:4px; font-size:14px; color:var(--muted-dim); line-height:1.45; }
.svc-cost-stat strong{ color:var(--text); font-size:15px; }

/* ---- 5-card pricing row ---- */
.svc-pricing-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
@media (max-width:1024px){ .svc-pricing-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .svc-pricing-grid{ grid-template-columns:1fr; } }
.svc-pricing-card{ border:1px solid var(--line); border-radius:18px; padding:22px; display:flex; flex-direction:column; }
.svc-pricing-card.is-free{ border:2px solid var(--accent); }
.svc-pricing-card.is-featured{ background:#0b1e36; border-color:#0b1e36; color:#fff; position:relative; box-shadow:0 16px 36px rgba(11,30,54,0.3); }
.svc-pricing-card .kind{ font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--muted-dim); margin:0; }
.svc-pricing-card.is-free .kind{ color:var(--accent); }
.svc-pricing-card.is-featured .kind{ color:#94a3b8; }
.svc-pricing-card h3{ font-size:1rem; margin:8px 0 0; }
.svc-pricing-card .price{ font-family:var(--font-heading); font-weight:800; font-size:1.4rem; margin:10px 0 0; }
.svc-pricing-card.is-free .price{ font-size:1.6rem; }
.svc-pricing-card .price .unit{ font-size:15px; font-weight:600; color:var(--muted-dim); }
.svc-pricing-card.is-featured .price .unit{ color:#94a3b8; }
.svc-pricing-card .desc{ font-size:15px; color:var(--muted); margin:8px 0 0; line-height:1.5; flex:1; }
.svc-pricing-card.is-featured .desc{ color:#cbd5e1; }
.svc-pricing-card .cta{ margin-top:16px; display:block; text-align:center; padding:12px 20px; border-radius:999px; font-weight:600; font-size:16px; text-decoration:none; }
.svc-pricing-card .cta.is-fill{ background:var(--accent); color:var(--text); }
.svc-pricing-card .cta.is-outline{ border:1px solid var(--line); color:var(--text); }
.svc-pricing-card .badge{ position:absolute; top:-12px; left:22px; font-size:15px; font-weight:700; padding:4px 12px; border-radius:999px; background:var(--accent); color:var(--text); }
.svc-pricing-note{ margin:24px 0 0; font-size:15px; color:var(--muted); }
.svc-pricing-note a{ font-weight:700; color:var(--accent); text-decoration:underline; }

/* ---- Redesigned Google Ads pricing section ---- */
.svc-pricing-wrap{ max-width:1200px; margin:0 auto; }

.svc-guarantees-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:48px; }
@media (max-width:1024px){ .svc-guarantees-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .svc-guarantees-grid{ grid-template-columns:1fr; } }
.svc-guarantee-card{ background:var(--bg-2); border:1px solid var(--line); border-radius:16px; padding:22px 20px; display:flex; flex-direction:column; gap:8px; transition:border-color .2s ease, transform .2s ease; }
.svc-guarantee-card:hover{ border-color:rgba(255,117,31,0.35); transform:translateY(-2px); }
.svc-guarantee-icon{ width:40px; height:40px; border-radius:10px; background:rgba(255,117,31,0.1); color:var(--accent); display:flex; align-items:center; justify-content:center; margin-bottom:4px; flex-shrink:0; }
.svc-guarantee-icon svg{ width:20px; height:20px; stroke:var(--accent); }
.svc-guarantee-title{ font-size:16px; font-weight:700; color:var(--text); margin:0; }
.svc-guarantee-desc{ font-size:14px; line-height:1.55; color:var(--muted); margin:0; }

.svc-leakcheck-banner{ margin-top:40px; background:linear-gradient(135deg, #07101d 0%, #0b1a2e 100%); border:1px solid rgba(255,255,255,0.1); border-radius:20px; padding:32px 36px; display:flex; align-items:center; justify-content:space-between; gap:28px; box-shadow:0 16px 40px rgba(11,30,54,0.3); color:#fff; position:relative; overflow:hidden; }
.svc-leakcheck-banner::before{ content:''; position:absolute; top:-50%; right:-20%; width:350px; height:350px; background:radial-gradient(circle, rgba(255,117,31,0.18) 0%, transparent 70%); pointer-events:none; }
.svc-leakcheck-copy{ max-width:640px; position:relative; z-index:2; }
.svc-leakcheck-badge{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:#ff9a52; background:rgba(255,117,31,0.15); border:1px solid rgba(255,117,31,0.3); padding:4px 10px; border-radius:999px; margin-bottom:12px; }
.svc-leakcheck-copy h3{ font-size:22px; font-weight:800; color:#fff; margin:0 0 8px; }
.svc-leakcheck-copy p{ font-size:15px; line-height:1.6; color:#cbd5e1; margin:0; }
.svc-leakcheck-cta{ flex-shrink:0; position:relative; z-index:2; }
@media (max-width:860px){
  .svc-leakcheck-banner{ flex-direction:column; align-items:flex-start; padding:28px 24px; gap:20px; }
  .svc-leakcheck-cta{ width:100%; }
  .svc-leakcheck-cta .btn{ width:100%; text-align:center; }
}

/* ---- FAQ cards, scoped to this page's #faq ---- */
#faq .faq-list{ display:flex; flex-direction:column; gap:12px; max-width:none; margin-top:0; }
#faq .faq-item{ border:1px solid var(--line); border-radius:16px; padding:4px 20px; }
#faq .faq-item:first-child{ border-top:1px solid var(--line); }

/* ---- Final CTA grid (section itself carries the dark background) ---- */
.svc-cta-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }

/* ============================================================
   ABOUT PAGE — close port of the uploaded design's own type scale,
   palette and spacing (not the rest of the site's tokens), scoped
   entirely under .about-body so no other page is affected.
   ============================================================ */
.about-body{
  --a-navy:#0b1e36; --a-navy-deep:#071b3a; --a-orange:#ff6b00; --a-orange-text:#c2410c;
  --a-ink:#0f172a; --a-slate:#334155; --a-muted-on-navy:#b6c2d4; --a-mist:#f1f5f9; --a-line:#dce7f3;
  font-size:1rem; line-height:1.65; color:var(--a-slate);
}
.about-body h1, .about-body h2, .about-body h3{
  font-family:var(--font-heading);
  color:var(--a-ink); line-height:1.15; letter-spacing:-0.01em; margin:0;
}
.about-body section{ padding:5.5rem 0; }
.about-body .tone-tint{ background:var(--a-mist); }
.about-body h2{ font-size:clamp(1.8rem,3.2vw,2.4rem); font-weight:700; margin-bottom:1.5rem; }
.about-section-intro{ max-width:40rem; margin-bottom:3rem; }
.about-section-intro p{ margin-top:0; }
.about-narrow{ max-width:40rem; }

/* ---- Hero ---- */
.about-hero{ background:var(--a-navy); color:var(--a-muted-on-navy); padding:5rem 0 5.5rem; }
.about-hero-inner{ max-width:46rem; }
.about-hero h1{ color:#fff; font-size:clamp(2.2rem,4.6vw,3.4rem); font-weight:700; margin-bottom:1.5rem; }
.about-lede{ font-size:1.2rem; line-height:1.6; max-width:34em; margin:0 0 2.25rem; }
.about-hero-ctas{ display:flex; flex-wrap:wrap; gap:0.9rem; }
.about-hero .btn-ghost{ background:transparent; border:1px solid rgba(255,255,255,.35); color:#fff; }
.about-hero .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); }

/* ---- Team: alternating photo/text rows ---- */
.about-team{ display:flex; flex-direction:column; gap:4.5rem; }
.about-team-member{ display:grid; grid-template-columns:minmax(0,360px) 1fr; gap:4rem; align-items:center; }
.about-team-member.is-reverse{ grid-template-columns:1fr minmax(0,360px); }
.about-team-member.is-reverse .about-team-photo{ order:2; }
.about-team-body{ max-width:34rem; }
.about-team-photo{ border-radius:16px; overflow:hidden; aspect-ratio:4/5; background:var(--a-mist); box-shadow:0 16px 40px rgba(15,23,42,.12); }
.about-team-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-team-photo.is-placeholder{ display:flex; align-items:center; justify-content:center; background:var(--a-navy); box-shadow:none; }
.about-team-photo.is-placeholder span{ font-weight:700; font-size:4rem; color:var(--a-orange); }
.about-team-body h3{ font-size:1.4rem; font-weight:700; margin-bottom:0.15rem; }
.about-team-role{ color:var(--a-orange-text); font-weight:600; font-size:0.95rem; margin-bottom:0.9rem; display:block; }
.about-team-body p{ margin:0; }
@media (max-width:900px){
  .about-team{ gap:3.5rem; }
  .about-team-member, .about-team-member.is-reverse{ grid-template-columns:1fr; gap:1.75rem; }
  .about-team-member.is-reverse .about-team-photo{ order:0; }
  .about-team-photo{ max-width:360px; }
}

/* ---- Story + facts ---- */
.about-story p + p{ margin-top:1.2rem; }
.about-emphasis{ color:var(--a-ink); font-weight:500; }
.about-facts{ margin:3rem 0 0; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--a-line); }
.about-facts div{ padding:1.5rem 1.25rem 0 0; }
.about-facts div + div{ padding-left:1.25rem; border-left:1px solid var(--a-line); }
.about-facts dt{ font-weight:700; font-size:2rem; color:var(--a-ink); line-height:1.1; }
.about-facts dd{ margin:0.35rem 0 0; font-size:1rem; line-height:1.45; }
.about-background-line{ margin-top:1.75rem; font-size:0.95rem; }
.about-background-line strong{ color:var(--a-ink); font-weight:600; }
@media (max-width:960px){
  .about-facts{ grid-template-columns:repeat(2,1fr); }
  .about-facts div:nth-child(3){ padding-left:0; border-left:0; }
  .about-facts div:nth-child(n+3){ border-top:1px solid var(--a-line); margin-top:1.5rem; }
}

/* ---- "Why a small team" commitments list ---- */
.about-commitments{ border-top:1px solid #cbd5e1; }
.about-commitments li{ display:grid; grid-template-columns:15rem 1fr; gap:2rem; padding:1.6rem 0; border-bottom:1px solid #cbd5e1; }
.about-commitments h3{ font-size:1.15rem; font-weight:600; }
@media (max-width:960px){ .about-commitments li{ grid-template-columns:1fr; gap:0.4rem; } }

/* ---- Two-column "who we work with" split ---- */
.about-fit{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; }
.about-fit h3{ font-size:1.35rem; font-weight:600; margin-bottom:0.8rem; }
.about-fit p + p{ margin-top:0.9rem; }
.about-tag-row{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:1.25rem; list-style:none; padding:0; }
.about-tag-row li{ font-size:1rem; font-weight:500; color:var(--a-navy-deep); border:1px solid #c3d3e6; border-radius:999px; padding:0.25rem 0.8rem; background:#fff; }
@media (max-width:960px){ .about-fit{ grid-template-columns:1fr; gap:3rem; } }

/* ---- Numbered process steps ---- */
.about-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; counter-reset:about-step; list-style:none; padding:0; }
.about-steps li{ position:relative; padding-top:2.75rem; border-top:2px solid var(--a-line); }
.about-steps li::before{ counter-increment:about-step; content:counter(about-step); position:absolute; top:-1.05rem; left:0; width:2rem; height:2rem; border-radius:50%; background:var(--a-navy); color:#fff; font:700 0.95rem/2rem 'Plus Jakarta Sans', sans-serif; text-align:center; }
.about-steps li:first-child{ border-top-color:var(--a-orange); }
.about-steps li:first-child::before{ background:var(--a-orange); color:var(--a-navy); }
.about-steps h3{ font-size:1.15rem; font-weight:600; margin-bottom:0.4rem; }
.about-steps p{ font-size:0.98rem; line-height:1.55; }
.about-steps-note{ margin-top:2.5rem; color:var(--a-ink); font-weight:500; }
.about-steps-note a{ color:var(--a-orange-text); }
@media (max-width:960px){ .about-steps{ grid-template-columns:1fr 1fr; gap:3rem 2rem; } }
@media (max-width:560px){ .about-steps{ grid-template-columns:1fr; } }

/* ---- Final CTA (full-bleed dark) ---- */
.about-cta{ background:var(--a-navy); color:var(--a-muted-on-navy); text-align:left; }
.about-cta h2{ color:#fff; margin-bottom:1rem; }
.about-cta-grid{ display:grid; grid-template-columns:1.3fr 0.7fr; gap:3rem; align-items:center; }
.about-small{ font-size:1rem; margin-top:1rem; }
.about-cta-box{ display:flex; flex-direction:column; gap:0.9rem; align-items:flex-start; }
@media (max-width:860px){ .about-cta-grid{ grid-template-columns:1fr; gap:2rem; } }

@media (max-width:560px){
  .about-body section{ padding:4rem 0; }
}

/* ---- About page refresh ---- */
.about-page{ color:#1a1814; background:#fff; }
.about-page h1,.about-page h2,.about-page h3{ font-family:var(--font-heading); }
.about-page p{ color:#5c574c; }
.about-v2-hero{ background:#f5f8fc; border-bottom:1px solid #dce7f3; padding:72px 0 0; }
.about-v2-hero-grid{ display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr); gap:72px; align-items:center; }
.about-v2-hero-copy{ max-width:560px; }
.about-v2-kicker{ display:block; color:#c2410c; font-family:var(--font-label); font-size:15px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom:16px; }
.about-v2-kicker-light{ color:#ff9a52; }
.about-v2-hero h1{ color:#0b1e36; font-size:clamp(38px,4.8vw,58px); line-height:1.02; letter-spacing:-0.01em; margin:0; }
.about-v2-hero h1 span{ color:#ff751f; }
.about-v2-hero-copy p{ max-width:47ch; font-size:19px; line-height:1.6; margin:26px 0 30px; }
.about-v2-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:22px; }
.about-v2-text-link{ display:inline-flex; align-items:center; gap:8px; color:#0b1e36; font-size:15px; font-weight:700; text-decoration:none; border-bottom:2px solid #ff751f; padding-bottom:3px; }
.about-v2-text-link span,.about-v2-person-body a span{ transition:transform .2s ease; }
.about-v2-text-link:hover span,.about-v2-person-body a:hover span{ transform:translateX(3px); }
.about-v2-hero-media{ min-width:0; }
.about-v2-hero-media img{ display:block; width:100%; aspect-ratio:1.25; object-fit:cover; border-radius:18px 18px 0 0; box-shadow:0 24px 50px rgba(11,30,54,.16); }
.about-v2-hero-note{ display:flex; align-items:center; gap:12px; padding:24px 28px; color:#0b1e36; font-size:15px; font-weight:700; }
.about-v2-hero-note i{ width:20px; height:1px; background:#b7c6d8; }
.about-v2-hero-note strong{ margin-left:auto; color:#64748b; font-weight:500; }
.about-v2-proof{ background:#0b1e36; color:#fff; }
.about-v2-proof-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; padding-top:38px; padding-bottom:38px; }
.about-v2-proof-lede{ color:#fff !important; font-family:var(--font-heading); font-size:24px; line-height:1.2; max-width:18ch; margin:0; }
.about-v2-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.about-v2-stats div{ border-left:2px solid #ff751f; padding-left:16px; }
.about-v2-stats strong{ display:block; color:#fff; font-family:var(--font-heading); font-size:32px; line-height:1; }
.about-v2-stats span{ display:block; color:#cbd5e1; font-size:15px; margin-top:7px; }
.about-v2-team,.about-v2-principles,.about-v2-fit{ padding:96px 0; }
.about-v2-section-head{ max-width:690px; margin-bottom:48px; }
.about-v2-section-head h2,.about-v2-story-copy h2,.about-v2-fit-copy h2,.about-v2-cta h2{ color:#0b1e36; font-size:clamp(28px,3.2vw,40px); line-height:1.08; letter-spacing:-0.01em; margin:0 0 16px; }
.about-v2-section-head p{ max-width:58ch; font-size:18px; line-height:1.6; margin:0; }
.about-v2-team-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.about-v2-person{ display:grid; grid-template-columns:170px 1fr; gap:24px; border-top:1px solid #dce7f3; padding-top:22px; }
.about-v2-person-image{ aspect-ratio:3/4; overflow:hidden; border-radius:12px; background:#e2e8f0; }
.about-v2-person-image img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center top; }
.about-v2-person-image-cate{ aspect-ratio:3/4; }
.about-v2-person-image-cate img{ object-fit:cover; object-position:center; }
.about-v2-person-body{ align-self:center; }
.about-v2-person-number{ color:#c2410c; font-family:var(--font-label); font-size:15px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.about-v2-person-body h3{ color:#0b1e36; font-size:27px; line-height:1.1; margin:10px 0 12px; }
.about-v2-person-body p{ font-size:15.5px; line-height:1.6; margin:0 0 18px; }
.about-v2-person-body a{ display:inline-flex; align-items:center; gap:8px; color:#0b1e36; font-size:15px; font-weight:700; text-decoration:none; }
.about-v2-story{ background:#f1f5f9; border-top:1px solid #dce7f3; border-bottom:1px solid #dce7f3; padding:96px 0; }
.about-v2-story-grid{ display:grid; grid-template-columns:1fr 1.5fr; gap:64px; }
.about-v2-story-mark{ display:block; color:#ff751f; font-family:var(--font-heading); font-size:132px; line-height:.65; margin-top:60px; }
.about-v2-story-copy{ max-width:690px; }
.about-v2-story-copy p{ font-size:18px; line-height:1.7; max-width:60ch; margin:0 0 18px; }
.about-v2-quote{ border-left:3px solid #ff751f; margin-top:30px; padding:6px 0 6px 18px; }
.about-v2-quote strong,.about-v2-quote span{ display:block; color:#0b1e36; }
.about-v2-quote strong{ font-family:var(--font-heading); font-size:21px; }
.about-v2-quote span{ font-size:15px; margin-top:5px; }
.about-v2-principles{ background:#fff; }
.about-v2-principle-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; border-top:1px solid #dce7f3; }
.about-v2-principle-grid article{ padding:24px 20px 0 0; border-top:3px solid #ff751f; }
.about-v2-principle-grid article > span{ color:#c2410c; font-family:var(--font-label); font-size:15px; font-weight:700; letter-spacing:.08em; }
.about-v2-principle-grid h3{ color:#0b1e36; font-size:22px; line-height:1.2; margin:18px 0 10px; }
.about-v2-principle-grid p{ font-size:15.5px; line-height:1.6; margin:0; }
.about-v2-fit{ background:#f8fafc; border-top:1px solid #eef2f7; }
.about-v2-fit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.about-v2-fit-copy p{ max-width:48ch; font-size:18px; line-height:1.6; margin:0 0 24px; }
.about-v2-fit-list{ border-top:1px solid #cbd5e1; }
.about-v2-fit-list div{ display:flex; flex-direction:column; gap:6px; padding:20px 0; border-bottom:1px solid #cbd5e1; }
.about-v2-fit-list strong{ color:#0b1e36; font-size:19px; }
.about-v2-fit-list span{ color:#5c574c; font-size:15px; line-height:1.5; }
.about-v2-cta{ background:#0b1e36; padding:76px 0; }
.about-v2-cta-inner{ display:flex; align-items:center; justify-content:space-between; gap:48px; }
.about-v2-cta h2{ color:#fff; max-width:13ch; margin-bottom:12px; }
.about-v2-cta p{ color:#cbd5e1; font-size:18px; line-height:1.6; max-width:48ch; margin:0; }
.about-v2-cta .btn{ flex-shrink:0; }
@media (max-width:900px){
  .about-v2-hero-grid{ grid-template-columns:1fr; gap:42px; }
  .about-v2-hero-copy{ max-width:680px; }
  .about-v2-hero-media img{ aspect-ratio:1.5; border-radius:16px 16px 0 0; }
  .about-v2-team-grid,.about-v2-fit-grid{ grid-template-columns:1fr; gap:48px; }
  .about-v2-story-grid{ grid-template-columns:1fr; gap:20px; }
  .about-v2-story-mark{ display:none; }
  .about-v2-cta-inner{ align-items:flex-start; flex-direction:column; }
}
@media (max-width:600px){
  .about-v2-hero{ padding-top:48px; }
  .about-v2-hero h1{ font-size:clamp(42px,12vw,58px); }
  .about-v2-hero-copy p{ font-size:17px; }
  .about-v2-hero-note{ flex-wrap:wrap; padding:18px 0; }
  .about-v2-hero-note strong{ flex-basis:100%; margin:4px 0 0; }
  .about-v2-proof-grid{ grid-template-columns:1fr; gap:28px; padding-top:32px; padding-bottom:32px; }
  .about-v2-proof-lede{ font-size:22px; }
  .about-v2-stats{ gap:12px; }
  .about-v2-stats strong{ font-size:26px; }
  .about-v2-stats span{ font-size:15px; }
  .about-v2-team,.about-v2-principles,.about-v2-fit,.about-v2-story{ padding:68px 0; }
  .about-v2-section-head{ margin-bottom:34px; }
  .about-v2-person{ grid-template-columns:112px 1fr; gap:16px; }
  .about-v2-person-body h3{ font-size:23px; }
  .about-v2-person-body p{ font-size:15px; }
  .about-v2-person-body a{ font-size:15px; }
  .about-v2-principle-grid{ grid-template-columns:1fr; gap:30px; }
  .about-v2-cta{ padding:64px 0; }
}

/* ============================================================
   ABOUT PAGE v3 (ab3-) — full redesign
   Scoped to .ab3-* so it doesn't touch any other page.
   ============================================================ */

/* ---- Shared label / eyebrow ---- */
.ab3-label{display:block;font-family:var(--font-label);font-size:15px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#c2410c;margin-bottom:14px;}
.ab3-label--light{color:#ff9a52;}

/* ---- Hero ---- */
.ab3-hero{background:linear-gradient(170deg,#f0f6ff 0%,#fff 60%);border-bottom:1px solid #dce7f3;padding:80px 0 0;overflow:hidden;}
.ab3-hero-inner{display:grid;grid-template-columns:1.08fr 0.92fr;gap:56px;align-items:center;}
@media(max-width:960px){.ab3-hero-inner{grid-template-columns:1fr;gap:40px;}}
.ab3-hero-text{display:flex;flex-direction:column;}
.ab3-hero-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:rgba(255,117,31,0.08);border:1px solid rgba(255,117,31,0.24);font-family:var(--font-label);font-size:13px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:#c2410c;margin-bottom:18px;width:fit-content;}
.ab3-badge-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px rgba(255,117,31,0.6);}
.ab3-hero-text h1{font-family:var(--font-heading);font-size:clamp(36px,4.5vw,56px);line-height:1.05;letter-spacing:-0.01em;color:#0b1e36;margin:0 0 20px;}
.ab3-h1-accent{color:var(--accent);}
.ab3-hero-lede{font-size:18px;line-height:1.68;color:#475569;max-width:52ch;margin:0 0 28px;}
.ab3-hero-features{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding-top:24px;border-top:1px solid #dce7f3;}
@media(max-width:640px){.ab3-hero-features{grid-template-columns:1fr;gap:16px;}}
.ab3-hero-feature{display:flex;align-items:flex-start;gap:12px;}
.ab3-feature-icon{width:36px;height:36px;border-radius:10px;background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
.ab3-feature-icon svg{width:18px;height:18px;}
.ab3-feature-text strong{display:block;font-size:15px;font-weight:700;color:#0b1e36;line-height:1.3;margin-bottom:3px;}
.ab3-feature-text span{display:block;font-size:13.5px;line-height:1.45;color:#64748b;}
.ab3-hero-visual{min-width:0;}
.ab3-visual-frame{position:relative;border-radius:18px;overflow:hidden;box-shadow:0 20px 45px rgba(11,30,54,.11);border:1px solid #dce7f3;background:#e2e8f0;}
.ab3-visual-frame img{display:block;width:100%;aspect-ratio:16/9;max-height:290px;object-fit:cover;object-position:center 30%;transition:transform .4s ease;}
.ab3-hero-visual:hover .ab3-visual-frame img{transform:scale(1.02);}
.ab3-visual-tag{position:absolute;bottom:12px;left:12px;display:inline-flex;align-items:center;gap:7px;padding:5px 11px;background:rgba(11,30,54,0.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.18);border-radius:999px;color:#f8fafc;font-size:12px;font-weight:600;letter-spacing:0.01em;}
.ab3-tag-dot{width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 6px rgba(34,197,94,0.8);}
.ab3-ghost-link{display:inline-flex;align-items:center;gap:7px;color:#0b1e36;font-size:15px;font-weight:700;text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:2px;transition:color .2s ease;}
.ab3-ghost-link:hover{color:var(--accent);}
.ab3-ghost-link span{transition:transform .2s ease;}
.ab3-ghost-link:hover span{transform:translateX(3px);}

/* ---- Stats strip ---- */
.ab3-hero-strip{display:flex;align-items:center;margin-top:48px;border-top:1px solid #dce7f3;background:#ffffff;flex-wrap:wrap;}
.ab3-strip-item{display:flex;flex-direction:column;gap:4px;padding:24px 32px;flex:1;min-width:160px;}
.ab3-strip-num{font-family:var(--font-heading);font-size:clamp(26px,3.2vw,34px);font-weight:700;color:#0b1e36;line-height:1;}
.ab3-strip-label{font-size:14.5px;color:#64748b;line-height:1.4;}
.ab3-strip-div{width:1px;height:48px;background:#dce7f3;flex-shrink:0;}
@media(max-width:768px){.ab3-hero-strip{grid-template-columns:1fr 1fr;display:grid;}.ab3-strip-div{display:none;}.ab3-strip-item{padding:18px 20px;border-bottom:1px solid #eef2f6;}}
@media(max-width:480px){.ab3-hero-strip{grid-template-columns:1fr;}}

/* ---- Why we exist ---- */
.ab3-why{padding:96px 0;background:#fff;}
.ab3-why-grid{display:grid;grid-template-columns:200px 1fr;gap:64px;align-items:start;}
@media(max-width:860px){.ab3-why-grid{grid-template-columns:1fr;gap:24px;}}
.ab3-why-label{display:flex;flex-direction:column;padding-top:8px;}
.ab3-why-mark{display:block;font-family:var(--font-heading);font-size:120px;line-height:.6;color:var(--accent);margin-top:32px;opacity:.35;}
@media(max-width:860px){.ab3-why-mark{display:none;}}
.ab3-why-copy h2{ font-family:var(--font-heading); font-size:clamp(28px,3.2vw,40px);line-height:1.12;letter-spacing:-0.01em;color:#0b1e36;margin:0 0 22px;}
.ab3-why-copy p{font-size:18px;line-height:1.7;color:#334155;max-width:60ch;margin:0 0 18px;}
.ab3-pullquote{border-left:3px solid var(--accent);margin:30px 0 0;padding:8px 0 8px 20px;}
.ab3-pullquote strong,.ab3-pullquote span{display:block;}
.ab3-pullquote strong{font-family:var(--font-heading);font-size:21px;color:#0b1e36;margin-bottom:5px;}
.ab3-pullquote span{font-size:15px;color:#64748b;}

/* ---- Team ---- */
.ab3-team{padding:96px 0;background:#f8fafc;border-top:1px solid #e8f0f8;border-bottom:1px solid #e8f0f8;}
.ab3-section-head{max-width:680px;margin-bottom:56px;}
.ab3-section-head h2{ font-family:var(--font-heading); font-size:clamp(28px,3.2vw,40px);line-height:1.12;letter-spacing:-0.01em;color:#0b1e36;margin:0 0 14px;}
.ab3-section-head p{font-size:18px;line-height:1.65;color:#475569;max-width:58ch;margin:0;}
.ab3-member{display:grid;grid-template-columns:240px 1fr;gap:48px;align-items:center;padding:48px 0;border-top:1px solid #dce7f3;}
.ab3-member--reverse{grid-template-columns:1fr 240px;}
.ab3-member--reverse .ab3-member-photo{order:2;}
@media(max-width:780px){.ab3-member,.ab3-member--reverse{grid-template-columns:1fr;gap:28px;}.ab3-member--reverse .ab3-member-photo{order:0;}}
.ab3-member-photo{aspect-ratio:3/4;border-radius:16px;overflow:hidden;background:#e2e8f0;box-shadow:0 16px 40px rgba(11,30,54,.1);}
.ab3-member-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .4s ease;}
.ab3-member:hover .ab3-member-photo img{transform:scale(1.03);}
.ab3-member-photo--cate img{object-position:center center;}
.ab3-member-body{max-width:500px;}
.ab3-member-meta{display:flex;align-items:center;gap:14px;margin-bottom:10px;}
.ab3-member-index{font-family:var(--font-label);font-size:15px;font-weight:700;color:rgba(255,117,31,.6);}
.ab3-member-role{font-size:15px;font-weight:700;letter-spacing:.04em;color:#c2410c;text-transform:uppercase;}
.ab3-member-body h3{font-family:var(--font-heading);font-size:clamp(28px,3vw,36px);line-height:1.1;color:#0b1e36;margin:0 0 16px;}
.ab3-member-body p{font-size:16.5px;line-height:1.7;color:#475569;margin:0 0 22px;}
.ab3-member-creds{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;}
.ab3-member-creds span{font-size:15px;font-weight:600;color:#334155;background:#fff;border:1px solid #cbd5e1;border-radius:999px;padding:5px 13px;}
.ab3-member-cta{display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:700;color:#0b1e36;text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:2px;transition:color .2s ease;}
.ab3-member-cta:hover{color:var(--accent);}
.ab3-member-cta span{transition:transform .2s ease;}
.ab3-member-cta:hover span{transform:translateX(3px);}

/* ---- How we work ---- */
.ab3-principles{padding:96px 0;background:#fff;}
.ab3-principles-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #dce7f3;}
@media(max-width:820px){.ab3-principles-grid{grid-template-columns:1fr;}}
.ab3-principle{padding:40px 40px 40px 0;border-top:3px solid transparent;margin-top:-1px;transition:border-top-color .25s ease;}
.ab3-principle:hover{border-top-color:var(--accent);}
.ab3-principle+.ab3-principle{padding-left:40px;border-left:1px solid #dce7f3;}
@media(max-width:820px){.ab3-principle{padding:32px 0;border-left:none !important;}.ab3-principle+.ab3-principle{border-top:1px solid #dce7f3;}}
.ab3-principle-num{ display:block; font-family:var(--font-label); font-size:15px; font-weight:700; letter-spacing:.05em; color:#64748b;margin-bottom:18px;}
.ab3-principle h3{font-family:var(--font-heading);font-size:21px;color:#0b1e36;margin:0 0 12px;line-height:1.2;}
.ab3-principle p{font-size:15.5px;line-height:1.65;color:#475569;margin:0;}

/* ---- Who we work with ---- */
.ab3-fit{padding:96px 0;background:#0b1e36;color:#fff;}
.ab3-fit-inner{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
@media(max-width:860px){.ab3-fit-inner{grid-template-columns:1fr;gap:52px;}}
.ab3-fit-copy h2{ font-family:var(--font-heading); font-size:clamp(28px,3.2vw,40px);line-height:1.12;letter-spacing:-0.01em;color:#fff;margin:0 0 18px;}
.ab3-fit-copy p{font-size:17px;line-height:1.7;color:#94a3b8;margin:0 0 28px;max-width:50ch;}
.ab3-fit-copy .ab3-ghost-link{color:#fff;border-bottom-color:var(--accent);}
.ab3-fit-copy .ab3-ghost-link:hover{color:var(--accent);}
.ab3-fit-cards{display:flex;flex-direction:column;gap:16px;}
.ab3-fit-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:32px;transition:background .2s ease,border-color .2s ease;}
.ab3-fit-card:hover{background:rgba(255,117,31,.08);border-color:rgba(255,117,31,.3);}
.ab3-fit-card-label{display:block;font-family:var(--font-label);font-size:15px;font-weight:700;color:var(--accent);letter-spacing:.05em;text-transform:uppercase;margin-bottom:10px;}
.ab3-fit-card p{font-size:15.5px;line-height:1.65;color:#cbd5e1;margin:0 0 18px;}
.ab3-fit-tags{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px;}
.ab3-fit-tags li{font-size:15px;font-weight:600;color:#e2e8f0;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:5px 13px;}

/* ---- CTA ---- */
.ab3-cta{padding:96px 0;background:#fff;border-top:1px solid #e2e8f0;}
.ab3-cta-inner{display:grid;grid-template-columns:1.4fr 1fr;gap:64px;align-items:center;}
@media(max-width:820px){.ab3-cta-inner{grid-template-columns:1fr;gap:36px;}}
.ab3-cta-copy h2{ font-family:var(--font-heading); font-size:clamp(28px,3.2vw,40px);line-height:1.1;letter-spacing:-0.01em;color:#0b1e36;margin:0 0 16px;}
.ab3-cta-copy p{font-size:17px;line-height:1.7;color:#475569;max-width:54ch;margin:0;}
.ab3-cta-action{display:flex;flex-direction:column;align-items:flex-start;gap:14px;}
.ab3-cta-btn{ font-size:16px; font-weight:600; padding:16px 28px; }
.ab3-cta-note{ font-size:15px; color:#64748b; margin:0; }

@media(max-width:580px){
  .ab3-hero{padding-top:52px;}
  .ab3-hero-text h1{font-size:clamp(40px,11vw,56px);}
  .ab3-why,.ab3-team,.ab3-principles,.ab3-fit,.ab3-cta{padding:68px 0;}
  .ab3-section-head{margin-bottom:40px;}
  .ab3-member{padding:36px 0;}
}

/* ============================================================
   SERVICES OVERVIEW PAGE v3 (sv3-) — full redesign
   Scoped to .sv3-* so it doesn't touch any other page.
   ============================================================ */

/* ---- Shared Elements ---- */
.sv3-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-label);
  font-size:15px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#c2410c;
  background:rgba(255,117,31,0.08);
  border:1px solid rgba(255,117,31,0.2);
  border-radius:999px;
  padding:5px 14px;
  margin-bottom:18px;
}
.sv3-label--light{
  color:#ff9a52;
  background:rgba(255,154,82,0.12);
  border-color:rgba(255,154,82,0.25);
}

.sv3-section-head{
  max-width:760px;
  margin:0 auto 48px;
  text-align:center;
}
.sv3-section-head--left{
  text-align:left;
  margin:0 0 48px 0;
}
.sv3-section-head h2{ font-family:var(--font-heading); font-size:clamp(28px,3.2vw,40px);
  line-height:1.12;
  letter-spacing:-0.01em;
  color:#0b1e36;
  margin:0 0 16px;
}
.sv3-section-head p{
  font-size:17.5px;
  line-height:1.65;
  color:#475569;
  margin:0;
}

/* ---- Hero Section ---- */
.sv3-hero{
  background:linear-gradient(175deg,#f0f6ff 0%,#f8fafc 50%,#fff 100%);
  border-bottom:1px solid #dce7f3;
  padding:80px 0 0;
}
.sv3-hero-inner{
  max-width:880px;
  margin:0 auto;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.sv3-hero h1{ font-family:var(--font-heading); font-size:clamp(38px,4.8vw,58px);
  line-height:1.05;
  letter-spacing:normal;
  color:#0b1e36;
  margin:0 0 22px;
}
.sv3-hero h1 span{
  color:var(--accent);
}
.sv3-hero-lede{
  font-size:clamp(17.5px,2vw,20px);
  line-height:1.65;
  color:#475569;
  max-width:68ch;
  margin:0 0 32px;
}
.sv3-hero-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin-bottom:56px;
}
.sv3-ghost-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#0b1e36;
  font-size:15px;
  font-weight:700;
  text-decoration:none;
  padding:12px 18px;
  border-radius:10px;
  border:1px solid #cbd5e1;
  background:#fff;
  transition:all .2s ease;
}
.sv3-ghost-link:hover{
  border-color:var(--accent);
  color:var(--accent);
}

/* ---- Hero Proof Bar ---- */
.sv3-proof-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border-top:1px solid #dce7f3;
  width:100%;
}
.sv3-proof-item{
  padding:24px 20px;
  text-align:center;
  border-right:1px solid #dce7f3;
  background:rgba(255,255,255,0.6);
}
.sv3-proof-item:last-child{
  border-right:none;
}
.sv3-proof-num{
  display:block;
  font-family:var(--font-heading);
  font-size:clamp(26px,2.8vw,32px);
  font-weight:800;
  color:#0b1e36;
  line-height:1.1;
  margin-bottom:4px;
}
.sv3-proof-label{
  font-size:15px;
  color:#64748b;
  font-weight:500;
}
@media(max-width:760px){
  .sv3-proof-strip{grid-template-columns:1fr 1fr;}
  .sv3-proof-item:nth-child(2){border-right:none;}
  .sv3-proof-item:nth-child(-n+2){border-bottom:1px solid #dce7f3;}
}

/* ---- Core Services Catalog (Deep Bento Rows) ---- */
.sv3-catalog{
  padding:96px 0;
  background:#fff;
}
.sv3-services-list{
  display:flex;
  flex-direction:column;
  gap:36px;
}
.sv3-service-card{
  display:grid;
  grid-template-columns:380px 1fr;
  gap:40px;
  align-items:stretch;
  border:1px solid #dce7f3;
  border-radius:24px;
  background:#fff;
  overflow:hidden;
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
  box-shadow:0 8px 24px rgba(11,30,54,0.04);
}
.sv3-service-card:hover{
  border-color:rgba(255,117,31,0.4);
  box-shadow:0 20px 48px rgba(11,30,54,0.1);
  transform:translateY(-3px);
}
.sv3-service-media{
  position:relative;
  min-height:280px;
  background:#f1f5f9;
  overflow:hidden;
}
.sv3-service-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s ease;
}
.sv3-service-card:hover .sv3-service-media img{
  transform:scale(1.04);
}
.sv3-service-media-badge{
  position:absolute;
  top:18px;
  left:18px;
  background:rgba(11,30,54,0.85);
  backdrop-filter:blur(8px);
  color:#fff;
  font-family:var(--font-label);
  font-size:15px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:5px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.2);
}
.sv3-service-body{
  padding:36px 36px 36px 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.sv3-service-kicker{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:15px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#c2410c;
  margin-bottom:10px;
}
.sv3-service-kicker .num{
  background:#ff751f;
  color:#fff;
  width:22px;
  height:22px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  font-weight:800;
}
.sv3-service-body h3{
  font-family:var(--font-heading);
  font-size:clamp(24px,2.6vw,32px);
  line-height:1.15;
  color:#0b1e36;
  margin:0 0 14px;
}
.sv3-service-body > p{
  font-size:16px;
  line-height:1.65;
  color:#475569;
  margin:0 0 20px;
  max-width:58ch;
}
.sv3-deliverables{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:24px;
}
.sv3-deliverables span{
  font-size:15px;
  font-weight:600;
  color:#1e293b;
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  border-radius:8px;
  padding:6px 12px;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.sv3-deliverables span::before{
  content:'✓';
  color:var(--accent);
  font-weight:800;
}
.sv3-service-actions{
  display:flex;
  align-items:center;
  gap:20px;
  margin-top:auto;
}
.sv3-btn-link{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:16px;
  color:#0b1e36;
  text-decoration:none;
  border-bottom:2px solid var(--accent);
  padding-bottom:3px;
  transition:color .2s ease, transform .2s ease;
}
.sv3-btn-link:hover{
  color:var(--accent);
}
.sv3-btn-link span{
  transition:transform .2s ease;
}
.sv3-btn-link:hover span{
  transform:translateX(4px);
}
@media(max-width:960px){
  .sv3-service-card{grid-template-columns:1fr;gap:0;}
  .sv3-service-media{min-height:220px;aspect-ratio:16/9;}
  .sv3-service-body{padding:28px;}
}

/* ---- Closed-Loop Connected Framework ---- */
.sv3-system{
  padding:96px 0;
  background:#0b1e36;
  color:#fff;
}
.sv3-system .sv3-section-head h2{
  color:#fff;
}
.sv3-system .sv3-section-head p{
  color:#94a3b8;
}
.sv3-system-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:48px;
  position:relative;
}
.sv3-system-card{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:20px;
  padding:32px;
  display:flex;
  flex-direction:column;
  transition:background .25s ease, border-color .25s ease;
}
.sv3-system-card:hover{
  background:rgba(255,117,31,0.08);
  border-color:rgba(255,117,31,0.35);
}
.sv3-system-step{
  font-family:var(--font-label);
  font-size:15px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:12px;
  display:block;
}
.sv3-system-card h3{
  font-family:var(--font-heading);
  font-size:22px;
  color:#fff;
  margin:0 0 12px;
  line-height:1.2;
}
.sv3-system-card p{
  font-size:15px;
  line-height:1.65;
  color:#cbd5e1;
  margin:0 0 20px;
  flex:1;
}
.sv3-system-tag{
  align-self:flex-start;
  font-size:15px;
  font-weight:600;
  color:#fff;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:999px;
  padding:4px 12px;
}
@media(max-width:860px){
  .sv3-system-grid{grid-template-columns:1fr;}
}

/* ---- Comparison Matrix ---- */
.sv3-comparison{
  padding:96px 0;
  background:#f8fafc;
  border-top:1px solid #e2e8f0;
  border-bottom:1px solid #e2e8f0;
}
.sv3-table-wrap{
  overflow-x:auto;
  border:1px solid #dce7f3;
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 30px rgba(11,30,54,0.04);
}
.sv3-table{
  width:100%;
  min-width:680px;
  border-collapse:collapse;
  text-align:left;
  font-size:15px;
}
.sv3-table th, .sv3-table td{
  padding:18px 24px;
  border-bottom:1px solid #e2e8f0;
  vertical-align:top;
}
.sv3-table thead th{
  font-family:var(--font-heading);
  font-size:15px;
  font-weight:700;
  color:#0b1e36;
  background:#f1f5f9;
  border-bottom:2px solid #cbd5e1;
}
.sv3-table thead th:nth-child(2){
  color:#64748b;
}
.sv3-table thead th:nth-child(3){
  background:rgba(255,117,31,0.08);
  color:#0b1e36;
  border-bottom-color:var(--accent);
}
.sv3-table td:nth-child(3){
  background:rgba(255,117,31,0.03);
  font-weight:600;
  color:#0b1e36;
}
.sv3-table tr:last-child td{
  border-bottom:none;
}
.sv3-table .metric-name{
  font-weight:700;
  color:#0b1e36;
}
.sv3-table .flaw{
  color:#64748b;
}
.sv3-table .fix{
  color:#0b1e36;
}
.sv3-table .fix::before{
  content:'✓ ';
  color:#10b981;
  font-weight:800;
}
.sv3-table .flaw::before{
  content:'✕ ';
  color:#ef4444;
  font-weight:800;
}

/* ---- Engagement Options (How to Start) ---- */
.sv3-engagement{
  padding:96px 0;
  background:#fff;
}
.sv3-engage-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.sv3-engage-card{
  border:1px solid #dce7f3;
  border-radius:20px;
  padding:32px;
  display:flex;
  flex-direction:column;
  background:#fff;
  transition:border-color .2s ease, transform .2s ease;
}
.sv3-engage-card:hover{
  border-color:var(--accent);
  transform:translateY(-2px);
}
.sv3-engage-card.is-featured{
  border:2px solid #0b1e36;
  background:#f8fafc;
  box-shadow:0 16px 40px rgba(11,30,54,0.08);
}
.sv3-engage-label{
  font-family:var(--font-label);
  font-size:15px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#64748b;
  margin-bottom:8px;
}
.sv3-engage-card.is-featured .sv3-engage-label{
  color:#c2410c;
}
.sv3-engage-card h3{
  font-family:var(--font-heading);
  font-size:24px;
  color:#0b1e36;
  margin:0 0 10px;
}
.sv3-engage-price{
  font-family:var(--font-heading);
  font-size:28px;
  font-weight:800;
  color:#0b1e36;
  margin-bottom:14px;
}
.sv3-engage-price span{
  font-size:15px;
  font-weight:500;
  color:#64748b;
}
.sv3-engage-card p{
  font-size:15px;
  line-height:1.6;
  color:#475569;
  margin:0 0 24px;
  flex:1;
}
.sv3-engage-card .btn{
  width:100%;
  text-align:center;
  justify-content:center;
}
@media(max-width:860px){
  .sv3-engage-grid{grid-template-columns:1fr;}
}

/* ---- FAQ Section ---- */
.sv3-faq{
  padding:96px 0;
  background:#f8fafc;
  border-top:1px solid #e2e8f0;
}
.sv3-faq-list{
  max-width:780px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.sv3-faq-item{
  background:#fff;
  border:1px solid #dce7f3;
  border-radius:16px;
  padding:6px 24px;
  transition:border-color .2s ease;
}
.sv3-faq-item:hover{
  border-color:#cbd5e1;
}
.sv3-faq-item summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 0;
  font-family:var(--font-heading);
  font-size:18px;
  font-weight:700;
  color:#0b1e36;
  touch-action:manipulation;
}
.sv3-faq-item summary::-webkit-details-marker{
  display:none;
}
.sv3-faq-item summary svg{
  width:20px;
  height:20px;
  flex-shrink:0;
  color:var(--accent);
  transition:transform .25s ease;
}
.sv3-faq-item[open] summary svg{
  transform:rotate(180deg);
}
.sv3-faq-body{
  padding:0 0 18px 0;
  font-size:15.5px;
  line-height:1.65;
  color:#475569;
}
.sv3-faq-body p{
  margin:0;
}
.sv3-faq-body p+p{
  margin-top:10px;
}

/* ---- Final Call to Action ---- */
.sv3-cta{
  padding:96px 0;
  background:#0b1e36;
  color:#fff;
}
.sv3-cta-inner{
  display:grid;
  grid-template-columns:1.3fr 0.7fr;
  gap:64px;
  align-items:center;
}
.sv3-cta h2{ font-family:var(--font-heading); font-size:clamp(28px,3.2vw,40px);
  line-height:1.1;
  color:#fff;
  margin:0 0 16px;
}
.sv3-cta p{
  font-size:18px;
  line-height:1.65;
  color:#cbd5e1;
  max-width:54ch;
  margin:0;
}
.sv3-cta-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
}
.sv3-cta-note{
  font-size:15px;
  color:#94a3b8;
  margin:0;
}
@media(max-width:860px){
  .sv3-cta-inner{grid-template-columns:1fr;gap:36px;}
}
@media(max-width:580px){
  .sv3-hero{padding-top:52px;}
  .sv3-catalog, .sv3-system, .sv3-comparison, .sv3-engagement, .sv3-faq, .sv3-cta{padding:64px 0;}
}


/* ============================================================
   PRICING V3: Multi-Service Layout, Exclusions, Bundles & Add-ons
   ============================================================ */
.pricing-section-block{ margin-top:72px; padding-top:56px; border-top:1px solid var(--line); scroll-margin-top:90px; }
.pricing-section-block:first-of-type{ margin-top:48px; }

/* ---- Quick Service Selector Cards ---- */
.service-nav-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-top:36px; }
@media (max-width:860px){ .service-nav-grid{ grid-template-columns:1fr; } }
.service-nav-card{ background:var(--bg-2); border:1px solid var(--line); border-radius:16px; padding:28px 24px; display:flex; flex-direction:column; transition:border-color .2s ease, transform .2s ease; }
.service-nav-card:hover{ border-color:rgba(255,117,31,0.4); transform:translateY(-2px); }
.service-nav-card h3{ font-size:21px; font-weight:700; color:var(--text); margin:0 0 6px; }
.service-nav-card .service-nav-price{ font-family:var(--font-label); font-size:17px; font-weight:700; color:var(--accent); margin-bottom:12px; }
.service-nav-card p{ font-size:14.5px; color:var(--muted); line-height:1.55; margin:0 0 16px; }
.service-nav-card .service-nav-who{ font-size:13.5px; color:var(--muted-dim); border-top:1px dashed var(--line); padding-top:14px; margin-top:auto; margin-bottom:20px; line-height:1.45; }
.service-nav-card .btn{ width:100%; text-align:center; }

/* ---- Tier Included & Excluded Sections ---- */
.tier-subhead{ font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-dim); margin:18px 0 10px; }
.tier-subhead.is-excluded{ color:#94a3b8; margin-top:20px; }
.tier-items-excluded{ list-style:none; padding:0; margin:0 0 20px; display:flex; flex-direction:column; gap:9px; }
.tier-item-excluded{ display:flex; align-items:flex-start; gap:10px; opacity:0.75; }
.tier-item-excluded svg{ width:15px; height:15px; stroke:#94a3b8; flex-shrink:0; margin-top:3px; }
.tier-item-excluded .tier-item-title{ font-size:14px; color:var(--muted); font-weight:400; line-height:1.4; }
.tier-scope-note{ font-size:13px; color:var(--muted-dim); line-height:1.45; margin-top:12px; font-style:italic; }

/* ---- Setup Fee Cards ---- */
.setup-fee-box{ margin-top:32px; background:var(--bg-2); border:1px solid var(--line); border-radius:16px; padding:28px; }
.setup-fee-box h3{ font-size:19px; font-weight:700; color:var(--text); margin:0 0 8px; }
.setup-fee-box p.setup-intro{ font-size:14.5px; color:var(--muted); margin:0 0 16px; }
.setup-fee-table{ width:100%; border-collapse:collapse; font-size:15px; }
.setup-fee-table tr{ border-top:1px solid var(--line); }
.setup-fee-table tr:first-child{ border-top:none; }
.setup-fee-table td{ padding:13px 4px; vertical-align:middle; color:var(--text); }
.setup-fee-table td:last-child{ text-align:right; font-weight:700; color:var(--text); white-space:nowrap; }
@media (max-width:540px){
  .setup-fee-table td{ display:block; padding:6px 0; }
  .setup-fee-table td:last-child{ text-align:left; color:var(--accent); padding-bottom:12px; }
}
.setup-fee-note{ font-size:13.5px; color:var(--muted); line-height:1.55; margin-top:16px; padding-top:14px; border-top:1px dashed var(--line); }
.setup-fee-note strong{ color:var(--text); }

/* ---- Bundle Cards ---- */
.bundle-badge{ display:inline-block; font-size:12px; font-weight:700; background:rgba(255,117,31,0.12); color:var(--accent); border:1px solid rgba(255,117,31,0.25); border-radius:999px; padding:3px 10px; margin-bottom:10px; text-transform:uppercase; letter-spacing:.04em; }
.bundle-original-price{ font-size:14px; color:var(--muted-dim); text-decoration:line-through; margin-left:6px; font-weight:500; }

/* ---- Add-ons Table ---- */
.addons-table-wrap{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:24px; border:1px solid var(--line); border-radius:16px; }
.addons-table{ width:100%; min-width:600px; border-collapse:collapse; font-size:15px; background:var(--bg-2); }
.addons-table th, .addons-table td{ padding:15px 20px; text-align:left; vertical-align:middle; }
.addons-table thead{ background:var(--bg-3); border-bottom:1px solid var(--line); }
.addons-table thead th{ font-weight:700; color:var(--text); font-size:13.5px; text-transform:uppercase; letter-spacing:.04em; }
.addons-table thead th:last-child{ text-align:right; }
.addons-table tbody tr{ border-top:1px solid var(--line); }
.addons-table tbody tr:first-child{ border-top:none; }
.addons-table tbody td:first-child{ font-weight:600; color:var(--text); }
.addons-table tbody td:last-child{ text-align:right; font-weight:700; color:var(--text); white-space:nowrap; }

/* ---- Rules Side-by-Side Grid ---- */
.rules-split-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:36px; }
@media (max-width:768px){ .rules-split-grid{ grid-template-columns:1fr; } }
.rules-split-card{ background:var(--bg-2); border:1px solid var(--line); border-radius:16px; padding:32px 28px; }
.rules-split-card.is-expect{ border-top:4px solid #10b981; }
.rules-split-card.is-excluded{ border-top:4px solid #94a3b8; }
.rules-split-card h3{ font-size:20px; font-weight:700; margin:0 0 16px; color:var(--text); }
.rules-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.rules-list li{ display:flex; align-items:flex-start; gap:12px; font-size:15px; line-height:1.5; color:var(--text); }
.rules-list li svg{ width:18px; height:18px; flex-shrink:0; margin-top:2px; }
.rules-split-card.is-expect .rules-list svg{ stroke:#10b981; }
.rules-split-card.is-excluded .rules-list svg{ stroke:#94a3b8; }
.rules-split-card.is-excluded .rules-list li{ color:var(--muted); }

/* ---- Currency Trust Note ---- */
.currency-trust-badge{ display:inline-flex; align-items:center; gap:8px; background:rgba(255,117,31,0.08); border:1px solid rgba(255,117,31,0.2); padding:6px 14px; border-radius:999px; font-size:13.5px; color:var(--text); margin-top:14px; }
.currency-trust-badge svg{ width:16px; height:16px; stroke:var(--accent); flex-shrink:0; }

/* Final CTA Dark Card Button Fix */
.final-cta-copy .btn-ghost{ background:transparent !important; border:1px solid rgba(255,255,255,0.4) !important; color:#ffffff !important; }
.final-cta-copy .btn-ghost:hover{ background:rgba(255,255,255,0.12) !important; border-color:#ffffff !important; color:#ffffff !important; }