:root{
  --bg:#ffffff;
  --bg-bold:#f8f9fa;
  --bg-accent:#EBF4FF;
  --fg:#2E2E2E;
  --fg-bold:#001B3D;
  --fg-light:#4B5563;
  --border:#D1D5DB;
  --accent:#005BFF;
  --accent-dark:#0047CC;
  --radius:16px;
  --max:1120px;
  --shadow:0 8px 24px rgba(0,0,0,.12);
  --shadow-strong:0 12px 32px rgba(0,0,0,.18);
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  color:var(--fg);
  background:var(--bg);
  line-height:1.6;
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size: 16pt;
  font-weight: 300;
  line-height: 1.65em;
}
h1,h2,h3{color:var(--fg-bold);margin:0 0 .6rem;font-weight:700}
h1,
#header h1 {
  line-height: 1.75em;
}
h1#hero-title{font-size:clamp(28px,4vw,40px)}

/* Header matches default Arcana sizing */
/* (No override needed; use theme defaults for consistency) */

/* dbg logo styling */
#dbg-logo {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 9999 !important;
    margin: 0 !important;
    padding: 0 !important;
}

#dbg-logo a {
    text-decoration: none !important;
    border: none !important;
    outline: none;
    display: block;
    margin: 0 !important;
    padding: 0 !important;
}

#dbg-logo a:hover,
#dbg-logo a:focus,
#dbg-logo a:active {
    text-decoration: none !important;
    border: none !important;
}

#dbg-logo img {
    height: 120px !important;
    width: auto;
    max-width: 200px;
    margin: 0 !important;
    padding: 0 !important;
    display: block;
}

h2{
  font-size:clamp(22px,3vw,28px);
  position:relative;
  padding-bottom:0.75rem;
}
h2::after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  width:60px;
  height:3px;
  background:var(--accent);
  border-radius:2px;
}
/* Removed h3 override as per the service-page.css requirement */
p{margin:0 0 .8rem}
.lead{font-size:clamp(16px,2.2vw,18px);color:var(--fg-light)}

.wrap{max-width:var(--max);margin:0 auto;padding:0 1.25em}

article{
  padding:0 1.25em;
}

@media (min-width: 981px){
  article{
    padding:0;
  }
}

/* Buttons */
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:.5rem}
.btn{display:inline-block;padding:10px 14px;border-radius:10px;text-decoration:none;border:1px solid var(--border);transition:transform .05s ease, box-shadow .2s ease}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.ghost{background:#fff;color:var(--fg-bold)}

/* Tag */
.tag{
  display:inline-block;
  background:var(--bg-accent);
  color:var(--accent);
  padding:8px 14px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  margin-bottom:12px;
  border:1px solid rgba(0,91,255,.2);
}

/* Images and Placeholders */
.img-ph{
  background:linear-gradient(135deg,#f8f9fa,#ffffff);
  border:2px solid var(--border);
  border-radius:var(--radius);
  min-height:200px;
  width: 100%;
  aspect-ratio: 4/3;
  display:flex;align-items:center;justify-content:center;
  color:var(--fg-light);text-align:center;padding:16px;
  box-shadow:var(--shadow);
  transition:all 0.2s ease;
  object-fit: cover;
}
.img-ph:hover{
  border-color:var(--accent);
  box-shadow:var(--shadow-strong);
}

/* Actual images */
img.img-ph {
  padding: 0;
  object-fit: cover;
  object-position: center;
  height: auto;
}

/* HERO */
.hero{
  display:grid;gap:32px;align-items:center;
  grid-template-columns: 1.2fr .8fr;
  padding:28px 0;
}

/* Hero image specific sizing */
.hero .img-ph {
  aspect-ratio: 16/10;
  min-height: 280px;
  max-height: 350px;
}

/* Audience pills */
.pill-list{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:16px;
  justify-content:flex-start;
}
.pill{
  background:#ffffff;
  color:var(--fg-bold);
  padding:12px 20px;
  border-radius:999px;
  border:2px solid var(--border);
  font-weight:500;
  transition:all 0.2s ease;
  box-shadow:var(--shadow);
  flex:1;
  min-width:250px;
  max-width:400px;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
}
.pill:hover{
  border-color:var(--accent);
  background:var(--bg-accent);
  color:var(--accent);
}

/* Large screen optimization - prevent wrapping */
@media (min-width: 1200px) {
  .pill-list {
    flex-wrap:nowrap;
    gap:20px;
  }
  .pill {
    flex:1;
    min-width:300px;
    max-width:none;
  }
}

/* Medium screen - 2 pills per row */
@media (max-width: 980px) and (min-width: 600px) {
  .pill {
    flex:1 1 calc(50% - 8px);
    min-width:200px;
  }
}

/* Small screen - stack vertically */
@media (max-width: 599px) {
  .pill {
    flex:1 1 100%;
    min-width:auto;
    max-width:none;
  }
}

/* Gains cards */
.cards{display:grid;gap:16px;grid-template-columns:repeat(5,1fr);margin-top:16px}
.card{
  background:#fff;
  border:2px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
  transition:all 0.2s ease;
}
.card:hover{
  border-color:var(--accent);
  transform:translateY(-2px);
  box-shadow:var(--shadow-strong);
}
.card h3{font-size:16px;margin:0 0 8px;color:var(--accent)}

/* Two-column section */
.two{display:grid;gap:24px;grid-template-columns:1.1fr .9fr;align-items:start}

/* Two-column image sizing */
.two .img-ph {
  aspect-ratio: 4/3;
  min-height: 250px;
  max-height: 320px;
}

/* Challenges list */
.challenges{display:grid;gap:14px;margin-top:16px}
.challenge{
  background:#fff;
  border:2px solid var(--border);
  border-left:4px solid var(--accent);
  border-radius:var(--radius);
  padding:18px;
  transition:all 0.2s ease;
}
.challenge:hover{
  border-color:var(--accent);
  box-shadow:var(--shadow);
}
.challenge b{color:var(--fg-bold);font-weight:600}

/* Steps strip */
.steps{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);margin-top:12px}
.step{
  background:#ffffff;
  border:2px solid var(--border);
  border-radius:14px;
  padding:16px;
  transition:all 0.2s ease;
  box-shadow:var(--shadow);
}
.step:hover{
  border-color:var(--accent);
  background:var(--bg-accent);
}
.step .k{font-size:12px;color:var(--fg-light);display:block;font-weight:500}
.step.active{
  border-color:var(--accent);
  background:var(--bg-accent);
  box-shadow:0 0 0 3px rgba(0,91,255,.1);
}

/* FAQ */
details{
  background:#fff;
  border:2px solid var(--border);
  border-radius:12px;
  padding:16px;
  transition:all 0.2s ease;
}
details:hover{
  border-color:var(--accent);
  box-shadow:var(--shadow);
}
details summary{
  cursor:pointer;
  font-weight:600;
  color:var(--fg-bold);
  padding-bottom:8px;
}
details[open]{
  border-color:var(--accent);
  background:var(--bg-accent);
}
details+details{margin-top:12px}

/* Utilities */
.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:1rem}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:1rem}

/* Responsive */
@media (max-width: 980px){
  .hero{grid-template-columns:1fr;gap:24px}
  .hero .img-ph{aspect-ratio:16/10;min-height:240px;max-height:300px}
  .two{grid-template-columns:1fr;gap:20px}
  .two .img-ph{aspect-ratio:16/10;min-height:200px;max-height:280px}
  .cards{grid-template-columns:repeat(2,1fr)}
  #why-it-matters .img-ph{aspect-ratio:16/9;min-height:250px;max-height:320px}
}
@media (max-width: 560px){
  .hero{gap:20px}
  .hero .img-ph{min-height:200px;max-height:260px}
  .two .img-ph{min-height:180px;max-height:240px}
  .cards{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  #why-it-matters .img-ph{min-height:200px;max-height:280px}
}

article section {
  padding-top: 2.5em;
  padding-bottom: 2.5em;
}

/* Enhanced hero section */
.hero {
  background: linear-gradient(135deg, var(--bg-accent) 0%, #ffffff 100%);
  border-radius: var(--radius);
  padding: 2rem;
  margin-bottom: 1rem;
}

/* Why it matters section - full width image */
#why-it-matters .img-ph {
  aspect-ratio: 16/9;
  min-height: 300px;
  max-height: 400px;
  margin-top: 1.5rem;
}

/* Improved button styling */
.btn.primary:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}

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

.cta-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
 
#nav>ul>li.current:before{
  bottom:-1.85em;
}


.page.services-page {
  max-width: 980px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 4rem;
}

.services-header .eyebrow {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #005BFF;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.services-intro p {
  max-width: 46rem;
}

.services-intro h2 {
  margin-bottom: 2.25rem;
}

.services-intro h3,
.services-intro p + h3 {
  margin-top: 1.75rem;
  margin-bottom: 2rem;
}

.services-intro .services-fit-heading {
  margin-top: 1.75rem;
  margin-bottom: 1rem;
}

.services-intro strong,
.services-intro p + strong {
    display: inline;
    margin-top: 0;
    margin-bottom: 0;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 1.3rem;
}

@media (max-width: 960px) {
  .cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

.card {
  border-radius: 14px;
  border: 1px solid #e0e3ed;
  padding: 1.3rem 1.4rem;
  background: #ffffff;
}

.card-kicker {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #005BFF;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.card-link {
  font-weight: 600;
  color: #005BFF;
  text-decoration: none;
}

.card-link:hover {
  text-decoration: underline;
}

/* CTA block */
.services-cta {
  margin-top: 3rem;
  padding: 1.4rem 1.5rem;
  border-radius: 14px;
  background: #f5f7fb;
}


section.services-cards{
 padding-top: 1em;
 padding-bottom: 1em;;
}