/* ============================================================
   Innovate SME — shared stylesheet (style.css)
   One source of truth for every page. Edit here once; all pages update.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --navy:#00142E; --navy-deep:#000B1C; --navy-mid:#09182F; --navy-card:#0C1D38;
  --steel:#6B8791; --steel-light:#9cb4bc; --steel-glow:rgba(107,135,145,0.4);
  --white:#ffffff; --off-white:#eef2f4; --text-muted:#8fa3ab;
  --maxw:1180px;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:'Jost',sans-serif; background:var(--navy); color:var(--white);
  font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Atmospheric background: layered radial gradients for depth */
body::before{
  content:""; position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(ellipse 80% 60% at 75% -10%, rgba(107,135,145,0.16), transparent 60%),
    radial-gradient(ellipse 70% 50% at 10% 110%, rgba(107,135,145,0.10), transparent 55%),
    linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 40%, var(--navy-mid) 100%);
}
/* Subtle grain texture overlay */
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:0.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== NAV — mobile-first ===== */
nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 5vw;
  background:rgba(0,11,28,0.75); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(107,135,145,0.14);
}
.nav-logo img{height:32px; width:auto; display:block;}
.nav-toggle{
  display:flex; flex-direction:column; gap:5px; background:none; border:0;
  cursor:pointer; padding:6px; z-index:120;
}
.nav-toggle span{
  width:26px; height:2px; background:var(--steel-light); display:block;
  transition:transform 0.3s ease, opacity 0.3s ease;
}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.nav-links{
  position:fixed; top:0; right:0; height:100vh; width:min(78vw,320px);
  background:rgba(6,16,33,0.98); backdrop-filter:blur(18px);
  border-left:1px solid rgba(107,135,145,0.18);
  display:flex; flex-direction:column; justify-content:center; gap:0.5rem;
  padding:2rem 2.4rem; transform:translateX(100%);
  transition:transform 0.38s cubic-bezier(0.4,0,0.2,1);
}
.nav-links.open{transform:translateX(0);}
.nav-link{
  color:var(--steel-light); text-decoration:none;
  font-size:1.05rem; font-weight:400; letter-spacing:0.06em;
  padding:0.7rem 0; border-bottom:1px solid rgba(107,135,145,0.10);
  transition:color 0.2s, padding-left 0.2s;
}
.nav-link:hover{color:var(--white); padding-left:0.4rem;}

/* ===== HERO ===== */
.hero{
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding:7rem 6vw 4rem; max-width:var(--maxw); margin:0 auto; position:relative;
}
/* Earth-from-space photo behind hero content, with dark overlay for text legibility */
.hero::before{
  content:""; position:absolute; top:0; bottom:0; z-index:-1; pointer-events:none;
  left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; width:100vw;
  background:
    linear-gradient(90deg, rgba(0,11,28,0.92) 0%, rgba(0,11,28,0.75) 45%, rgba(0,11,28,0.45) 100%),
    linear-gradient(0deg, rgba(0,11,28,0.85) 0%, transparent 40%),
    url("/hero-earth.jpg") center / cover no-repeat;
}
.hero-kicker{
  font-size:0.74rem; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--steel); margin-bottom:1.6rem;
  opacity:0; animation:rise 0.8s ease 0.1s forwards;
}
.hero h1{
  font-family:'Cormorant Garamond',serif; font-weight:500;
  font-size:clamp(2.6rem,9vw,5.5rem); line-height:1.04; letter-spacing:-0.01em;
  margin-bottom:1.8rem; max-width:14ch;
}
.hero h1 .em{font-style:italic; color:var(--steel-light);}
.hero h1 span{display:inline-block; opacity:0; animation:rise 0.9s cubic-bezier(0.2,0.7,0.2,1) forwards;}
.hero p{
  font-size:clamp(1.05rem,2.4vw,1.3rem); font-weight:300; color:var(--off-white);
  max-width:46ch; line-height:1.75; margin-bottom:2.5rem;
  opacity:0; animation:rise 0.8s ease 0.7s forwards;
}
.hero-cta{opacity:0; animation:rise 0.8s ease 0.9s forwards;}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:0.6rem;
  padding:1rem 2.4rem; border:1px solid var(--steel);
  color:var(--white); text-decoration:none; background:transparent;
  font-size:0.82rem; letter-spacing:0.14em; text-transform:uppercase;
  border-radius:2px; position:relative; overflow:hidden;
  transition:color 0.3s; z-index:1;
}
.btn::before{
  content:""; position:absolute; inset:0; background:var(--steel);
  transform:translateX(-101%); transition:transform 0.35s cubic-bezier(0.4,0,0.2,1); z-index:-1;
}
.btn:hover{color:var(--navy-deep);} .btn:hover::before{transform:translateX(0);}
.btn .arrow{transition:transform 0.3s;} .btn:hover .arrow{transform:translateX(4px);}
/* Dark button for the light steel feature block */
.btn--dark{border-color:var(--navy-deep); color:var(--navy-deep);}
.btn--dark::before{background:var(--navy-deep);}
.btn--dark:hover{color:var(--steel-light);}

/* ===== Shared section rhythm ===== */
/* Sections are full-bleed bands; inner content is width-capped via .band-inner */
.band{width:100%; padding:5.5rem 6vw;}
.band-inner{max-width:var(--maxw); margin:0 auto;}
.eyebrow{font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--steel); margin-bottom:1.2rem;}
.section-title{font-family:'Cormorant Garamond',serif; font-weight:500; font-size:clamp(1.9rem,4.5vw,3rem); line-height:1.15; margin-bottom:1.5rem;}

/* --- Colour bands --- */
.band--dark{background:transparent;}                 /* shows the atmospheric body bg */
.band--mid{background:var(--navy-mid); border-top:1px solid rgba(107,135,145,0.10); border-bottom:1px solid rgba(107,135,145,0.10); position:relative;}
.band--mid > *{position:relative; z-index:1;}

/* Bold steel-blue FEATURE block (Services) */
.band--feature{
  background:linear-gradient(165deg, #7C99A3 0%, var(--steel) 55%, #5E7882 100%);
  color:var(--navy-deep); position:relative; overflow:hidden;
}
.band--feature::before{
  content:""; position:absolute; inset:0; opacity:0.5; pointer-events:none;
  background:radial-gradient(ellipse 60% 80% at 85% 10%, rgba(255,255,255,0.18), transparent 60%);
}
.band--feature .eyebrow{color:var(--navy-deep); opacity:0.7;}
.band--feature .section-title{color:var(--navy-deep);}
.band--feature > .band-inner{position:relative; z-index:1;}
.band--feature .lead{color:rgba(0,11,28,0.78);}

/* Reveal-on-scroll */
.reveal{opacity:0; transform:translateY(28px); transition:opacity 0.7s ease, transform 0.7s cubic-bezier(0.2,0.7,0.2,1);}
.reveal.in{opacity:1; transform:none;}

/* ===== ABOUT ===== */
.about p{font-size:1.05rem; font-weight:300; color:var(--off-white); max-width:62ch; margin-bottom:1.4rem; line-height:1.85;}
.about strong{color:var(--white); font-weight:500;}

/* ===== SERVICES (on steel feature block) ===== */
.svc-grid{display:grid; grid-template-columns:1fr; gap:1.2rem; margin-top:2.5rem;}
.svc-card{
  background:rgba(0,20,46,0.92);
  border:1px solid rgba(0,11,28,0.25); border-radius:6px; padding:2rem;
  position:relative; overflow:hidden;
  transition:transform 0.35s cubic-bezier(0.2,0.7,0.2,1), box-shadow 0.35s;
}
.svc-card::after{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--steel-light), transparent);
  transform:scaleX(0); transform-origin:left; transition:transform 0.4s ease;
}
.svc-card:hover{transform:translateY(-6px); box-shadow:0 18px 40px -16px rgba(0,11,28,0.55);}
.svc-card:hover::after{transform:scaleX(1);}
.svc-card h3{font-size:1.1rem; font-weight:500; margin-bottom:0.7rem; color:var(--white);}
.svc-card p{font-size:0.95rem; font-weight:300; color:var(--off-white); line-height:1.7;}

/* ===== PROOF ===== */
.proof-grid{display:grid; grid-template-columns:1fr; gap:1.2rem; margin-top:2.5rem;}
.proof-item{
  border-left:2px solid var(--steel); padding:0.4rem 0 0.4rem 1.6rem; position:relative;
}
.proof-num{font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.4rem; color:var(--steel); margin-bottom:0.5rem;}
.proof-item p{font-size:1rem; font-weight:300; color:var(--off-white); line-height:1.75;}

/* ===== CONTACT ===== */
.contact{text-align:left;}
.contact-card{
  background:linear-gradient(160deg, var(--navy-card), var(--navy-mid));
  border:1px solid rgba(107,135,145,0.18); border-radius:10px;
  padding:clamp(2rem,6vw,4rem); position:relative; overflow:hidden;
}
.contact-card::before{
  content:""; position:absolute; top:-50%; right:-20%; width:60%; height:200%;
  background:radial-gradient(circle, rgba(107,135,145,0.18), transparent 65%);
  pointer-events:none;
}
.contact-links{display:flex; flex-direction:column; gap:1rem; margin-top:2rem;}
.contact-links a{color:var(--steel-light); text-decoration:none; font-size:1.05rem; border-bottom:1px solid var(--steel-glow); width:fit-content; transition:color 0.2s;}
.contact-links a:hover{color:var(--white);}

/* ===== FOOTER ===== */
footer{
  border-top:1px solid rgba(107,135,145,0.12); padding:2.5rem 6vw;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  max-width:var(--maxw); margin:0 auto;
}
.footer-logo img{height:30px;}
.footer-copy{font-size:0.8rem; color:var(--text-muted); font-weight:300;}

@keyframes rise{from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:none;}}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important;}
  .reveal{opacity:1; transform:none;}
}

/* ===== TABLET / DESKTOP ===== */
@media(min-width:760px){
  .svc-grid{grid-template-columns:repeat(2,1fr);}
  .proof-grid{grid-template-columns:repeat(2,1fr); gap:2rem 2.5rem;}
}
@media(min-width:1000px){
  nav{padding:1.2rem 6vw;}
  .nav-logo img{height:36px;}
  .nav-toggle{display:none;}
  .nav-links{
    position:static; height:auto; width:auto; transform:none;
    flex-direction:row; align-items:center; gap:2.2rem;
    background:none; border:0; padding:0; backdrop-filter:none;
  }
  .nav-link{
    font-size:0.85rem; letter-spacing:0.12em; text-transform:uppercase;
    padding:0; border:0;
  }
  .nav-link:hover{padding-left:0;}
  .svc-grid{grid-template-columns:repeat(3,1fr);}
}


/* ============================================================
   PAGE-TYPE COMPONENTS (about, services, faq, articles, insights)
   ============================================================ */

/* Generic page hero (used by about/services/faq/article inner pages) */
.page-hero{padding:8.5rem 6vw 2.5rem; max-width:var(--maxw); margin:0 auto;}
.page-hero .eyebrow{margin-bottom:1.6rem;}
.page-hero h1{font-family:'Cormorant Garamond',serif; font-weight:500; font-size:clamp(2.2rem,5vw,3.6rem); line-height:1.15; margin-bottom:1.3rem; max-width:20ch;}
.page-hero .standfirst{font-size:clamp(1.05rem,2.2vw,1.25rem); font-weight:300; color:var(--steel-light); line-height:1.8; max-width:60ch;}
.page-hero .article-meta{font-size:0.85rem; color:var(--text-muted); font-weight:300; letter-spacing:0.04em; margin-top:0.5rem;}
.page-hero .hero-rule{width:48px; height:1px; background:var(--steel); margin:2rem 0 0;}

/* Body prose (about, services intro, articles) */
.prose{max-width:var(--maxw); margin:0 auto; padding:1.5rem 6vw 3rem;}
.prose .lede{font-size:1.2rem; font-weight:300; color:var(--steel-light); line-height:1.8; margin-bottom:2.5rem;}
.prose p{font-size:1.02rem; font-weight:300; color:var(--off-white); margin-bottom:1.5rem; line-height:1.85; max-width:72ch;}
.prose h2{font-family:'Cormorant Garamond',serif; font-size:clamp(1.6rem,3vw,2.2rem); font-weight:500; line-height:1.25; color:var(--white); margin:3rem 0 1.2rem; max-width:72ch;}
.prose h2 .num{color:var(--steel); font-style:italic; margin-right:0.5rem;}
.prose strong{color:var(--white); font-weight:500;}
.prose ol{margin:0 0 1.5rem 1.4rem;}
.prose ol li{font-size:1.02rem; font-weight:300; color:var(--off-white); margin-bottom:0.6rem; line-height:1.7;}
.prose .fix{border-left:2px solid var(--steel); padding-left:1.4rem; margin:1.5rem 0 2rem;}
.prose .fix strong{color:var(--steel-light); font-weight:500;}
.section-rule{width:100%; height:1px; background:rgba(107,135,145,0.18); margin:3.5rem 0; border:none;}

/* CTA box (shared across pages) */
.cta-box{max-width:760px; margin:2rem auto 0; background:linear-gradient(160deg, var(--navy-card), var(--navy-mid)); border:1px solid rgba(107,135,145,0.18); border-radius:8px; padding:2.8rem;}
.cta-box .label{font-size:0.75rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--steel); margin-bottom:1rem; display:block;}
.cta-box p{margin-bottom:1.2rem; font-weight:300; color:var(--off-white);}
.cta-box a.inline{color:var(--steel-light); text-decoration:none; border-bottom:1px solid var(--steel-glow);}
.cta-box a.inline:hover{color:var(--white);}

/* Related links (articles) */
.related{max-width:760px; margin:0 auto; padding:0 6vw 5rem;}
.related .label{font-size:0.75rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--steel); margin-bottom:1.2rem; display:block;}
.related a{color:var(--steel-light); text-decoration:none; font-size:1.05rem; border-bottom:1px solid rgba(107,135,145,0.3); display:inline-block; margin-bottom:0.6rem; transition:color 0.2s;}
.related a:hover{color:var(--white);}

/* Service groups (services.html) */
.svc-group{max-width:var(--maxw); margin:0 auto; padding:1rem 6vw;}
.svc-group h2{font-family:'Cormorant Garamond',serif; font-size:clamp(1.5rem,3vw,2rem); font-weight:500; color:var(--white); margin:2.5rem 0 0.6rem;}
.svc-group .group-intro{font-size:1rem; font-weight:300; color:var(--text-muted); margin-bottom:1.5rem; max-width:60ch;}

/* FAQ items */
.faq-list{max-width:var(--maxw); margin:0 auto; padding:1.5rem 6vw 3rem;}
.faq-item{border-bottom:1px solid rgba(107,135,145,0.15); padding:1.8rem 0;}
.faq-item:first-of-type{border-top:1px solid rgba(107,135,145,0.15);}
.faq-item h2{font-family:'Cormorant Garamond',serif; font-size:clamp(1.3rem,2.6vw,1.65rem); font-weight:500; color:var(--white); margin-bottom:0.8rem; line-height:1.3;}
.faq-item p{font-size:1rem; font-weight:300; color:var(--off-white); line-height:1.8; max-width:80ch;}
.faq-item a{color:var(--steel-light);}
.cat-label{font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--steel); margin:2.5rem 0 0.5rem; display:block;}

/* Insights listing cards */
.insights-grid{max-width:var(--maxw); margin:0 auto; padding:2.5rem 6vw 5rem; display:grid; grid-template-columns:1fr; gap:1.5rem;}
.card{display:flex; flex-direction:column; background:linear-gradient(160deg, var(--navy-card), var(--navy-mid)); border:1px solid rgba(107,135,145,0.18); border-radius:6px; padding:2.2rem; text-decoration:none; position:relative; overflow:hidden; transition:transform 0.35s cubic-bezier(0.2,0.7,0.2,1), border-color 0.35s, box-shadow 0.35s;}
.card::after{content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, var(--steel), transparent); transform:scaleX(0); transform-origin:left; transition:transform 0.4s ease;}
.card:hover{transform:translateY(-6px); border-color:var(--steel-glow); box-shadow:0 18px 40px -18px rgba(0,0,0,0.7);}
.card:hover::after{transform:scaleX(1);}
.card-tag{font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--steel); margin-bottom:1.2rem;}
.card h2{font-family:'Cormorant Garamond',serif; font-size:1.5rem; font-weight:500; line-height:1.25; color:var(--white); margin-bottom:1rem;}
.card p{font-size:0.95rem; font-weight:300; color:var(--off-white); line-height:1.7; margin-bottom:1.5rem; flex-grow:1;}
.card-more{font-size:0.8rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--steel-light);}
.card:hover .card-more{color:var(--white);}

@media(min-width:760px){
  .insights-grid{grid-template-columns:repeat(2,1fr);}
}
@media(min-width:1080px){
  .insights-grid{grid-template-columns:repeat(3,1fr);}
}

/* About page — track record grid */
.track{max-width:var(--maxw); margin:0 auto; padding:0 6vw 4rem;}
.track h2{font-family:'Cormorant Garamond',serif; font-size:clamp(1.6rem,3vw,2.1rem); font-weight:500; color:var(--white); margin-bottom:2rem;}
.track-grid{display:grid; grid-template-columns:1fr; gap:1.5rem;}
.track-item{background:linear-gradient(160deg, var(--navy-card), var(--navy-mid)); border:1px solid rgba(107,135,145,0.18); border-radius:6px; padding:2rem;}
.track-item .label{font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--steel); margin-bottom:0.9rem; display:block;}
.track-item p{font-size:0.96rem; font-weight:300; color:var(--off-white); line-height:1.7;}
.about-body{max-width:var(--maxw); margin:0 auto; padding:1.5rem 6vw 4rem;}
.about-body p{font-size:1.02rem; font-weight:300; color:var(--off-white); margin-bottom:1.5rem; line-height:1.85; max-width:68ch;}
.about-body h2{font-family:'Cormorant Garamond',serif; font-size:clamp(1.6rem,3vw,2.1rem); font-weight:500; line-height:1.25; color:var(--white); margin:3rem 0 1.2rem;}
.about-body strong{color:var(--white); font-weight:500;}
.cta-box-inner{max-width:var(--maxw); margin:0 auto; padding:0 6vw 5rem;}
.standfirst{font-size:1.15rem; font-weight:300; color:var(--steel-light); line-height:1.8;}

/* Services page groups already covered by .svc-group; ensure svc card grid on services page */
.svc-page-grid{display:grid; grid-template-columns:1fr; gap:1.2rem; margin-bottom:1rem;}
@media(min-width:760px){.track-grid{grid-template-columns:repeat(2,1fr);} .svc-page-grid{grid-template-columns:repeat(2,1fr);}}

/* ============================================================
   PAGE-SPECIFIC CLASS ALIASES + COLOUR BANDING (corrected alignment)
   Model: outer element = full-width background + vertical padding only.
          inner content = capped width, centred as a block, LEFT-aligned text.
   ============================================================ */

/* ---- Inner-page HERO (about/services/faq/insights) ---- */
.about-hero, .svc-hero, .faq-hero, .insights-hero{
  padding:8.5rem 0 2.5rem;
  background:linear-gradient(170deg, rgba(107,135,145,0.14), transparent 70%);
  border-bottom:1px solid rgba(107,135,145,0.10);
  position:relative; overflow:hidden;
}
.about-hero > *, .svc-hero > *, .faq-hero > *, .insights-hero > *{ position:relative; z-index:1; }
/* Inner wrapper: the hero gets ONE centred max-width column; everything
   inside aligns to its LEFT edge (no per-child centring). */
/* Hero content sits in ONE centred max-width column; text aligns LEFT.
   No flex centring, no per-child max-width drift. */
.about-hero > *, .svc-hero > *, .faq-hero > *, .insights-hero > *{
  max-width:var(--maxw); margin-left:auto; margin-right:auto;
  padding-left:6vw; padding-right:6vw;
}
/* The narrow caps (heading/standfirst) must align left WITHIN that column,
   not center themselves. Override their auto-centring. */
.about-hero h1, .svc-hero h1, .faq-hero h1, .insights-hero h1,
.about-hero .standfirst, .svc-hero .standfirst, .faq-hero .standfirst, .insights-hero p{
  margin-left:0;
}
.about-hero h1, .svc-hero h1, .faq-hero h1, .insights-hero h1{
  font-family:'Cormorant Garamond',serif; font-weight:500;
  font-size:clamp(2.2rem,5vw,3.6rem); line-height:1.15; margin-bottom:1.3rem; max-width:22ch;
}
.about-hero .standfirst, .svc-hero .standfirst, .faq-hero .standfirst, .insights-hero p{
  font-size:clamp(1.05rem,2.2vw,1.25rem); font-weight:300; color:var(--steel-light);
  line-height:1.8; max-width:60ch;
}
.about-eyebrow, .svc-eyebrow, .faq-eyebrow, .insights-eyebrow{
  font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--steel); margin-bottom:1.6rem;
}
.about-hero .hero-rule, .svc-hero .hero-rule, .faq-hero .hero-rule, .insights-hero .hero-rule{
  width:48px; height:1px; background:var(--steel); margin-top:2rem;
}

/* ---- SERVICES page sections (alternating colour bands) ---- */
.svc-section{ padding:3rem 0; }
.svc-section:nth-of-type(even){ background:var(--navy-mid); }
.svc-section > *{ max-width:var(--maxw); margin-left:auto; margin-right:auto; padding-left:6vw; padding-right:6vw; width:100%; }
.svc-section h2{ font-family:'Cormorant Garamond',serif; font-size:clamp(1.5rem,3vw,2rem); font-weight:500; color:var(--white); margin:1rem 0 0.6rem; }
.svc-section .group-intro{ font-size:1rem; font-weight:300; color:var(--text-muted); margin-bottom:1.5rem; max-width:60ch; }

/* Services "How it works" feature block */
.svc-approach{ padding:3.5rem 0; background:linear-gradient(165deg, #7C99A3, var(--steel) 60%, #5E7882); color:var(--navy-deep); }
.svc-approach > *{ max-width:var(--maxw); margin-left:auto; margin-right:auto; padding-left:6vw; padding-right:6vw; width:100%; }
.svc-approach h2{ font-family:'Cormorant Garamond',serif; font-size:clamp(1.6rem,3vw,2.1rem); font-weight:500; color:var(--navy-deep); margin-bottom:1rem; }
.svc-approach p{ font-size:1.02rem; font-weight:300; color:rgba(0,11,28,0.82); margin-bottom:1.5rem; line-height:1.85; max-width:62ch; }
.svc-approach strong{ color:var(--navy-deep); font-weight:600; }

/* ---- FAQ + Insights inner wrappers ---- */
.faq-body{ max-width:var(--maxw); margin:0 auto; padding:1.5rem 6vw 3rem; }

/* Safety: stop any oversized element forcing horizontal scroll */
img, svg, .svc-card, .card, .track-item, .cta-box{ max-width:100%; }

/* Keep narrow capped children left-aligned inside section wrappers */
.svc-section .group-intro, .svc-approach p{ margin-left:0; margin-right:0; }

/* Reading-width caps, all left-aligned to content edge */
.prose .lede, .prose .fix, .prose ol, .prose .section-rule{max-width:72ch;}
.cta-box, .related{margin-left:0;}

/* Services: cards share the same 6vw side margin as the section text */
.svc-section .svc-grid{padding-left:6vw; padding-right:6vw; margin-left:0; margin-right:0; max-width:var(--maxw);}

/* ============================================================
   PHOTO ACCENTS (article headers + page banners)
   Slim image bands with dark overlay; image set via inline style per page.
   ============================================================ */
.photo-banner{
  position:relative; min-height:440px; display:flex; align-items:flex-end;
  padding-top:5rem; margin-top:0; overflow:hidden;
}
.photo-banner::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  background-image:var(--banner-img);
}
/* Overlay: photo stays clearly visible up top, darkens only at the base
   so the heading sitting at the bottom stays readable. */
.photo-banner::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(0,11,28,0.15) 0%, rgba(0,11,28,0.10) 45%, rgba(0,11,28,0.65) 80%, rgba(0,11,28,0.94) 100%);
}
.photo-banner .banner-inner{
  position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; width:100%;
  padding:2.5rem 6vw 2rem;
}
.photo-banner .eyebrow{margin-bottom:0.8rem;}
.photo-banner h1{
  font-family:'Cormorant Garamond',serif; font-weight:500;
  font-size:clamp(2.2rem,5vw,3.6rem); line-height:1.15; color:var(--white); margin:0; max-width:22ch;
  text-shadow:0 2px 24px rgba(0,11,28,0.6);
}
.photo-banner .article-meta{ text-shadow:0 2px 16px rgba(0,11,28,0.7); }
/* When an article uses a photo banner, the page-hero text block is replaced by it,
   so pull the following prose up a touch. */
.photo-banner + .prose{padding-top:2.5rem;}
@media(max-width:640px){ .photo-banner{min-height:340px;} }

/* Intro standfirst (below a photo banner on Services / About / FAQ / Insights) */
.svc-intro, .page-intro{ padding:2.5rem 6vw 0.5rem; }
.svc-intro .standfirst, .page-intro .standfirst{
  font-family:'Cormorant Garamond',serif; font-weight:400;
  font-size:clamp(1.15rem,2.2vw,1.5rem); line-height:1.5; color:var(--off-white);
  max-width:46ch; margin:0;
}