/* SIDIA website — shared stylesheet (home + service pages)
   Built from the approved reference designs. Tokens and rules copied from
   reference/home/index.html, then adjusted per BRIEF.md section 5.3. */

@font-face{ font-family:'Sora'; src:url('/fonts/sora-var.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face{ font-family:'Inter'; src:url('/fonts/inter-var.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; }

:root{
  --bg:#FAF8F3;
  --surface:#FFFFFF;
  --surface-2:#F2EEE2;
  --ink:#14182B;
  --ink-soft:#3B4152;
  --ink-mute:#6C7488;
  --line:#E7E2D3;
  --navy:#0A0E3D;
  --navy-2:#0D1657;
  --navy-ink:#F3F2ED;
  --gold:#EFA939;
  --gold-ink:#7A4B0A;
  --sage:#3E7A5B;
  --sage-bg:#E3EFE7;
  --shadow: 0 24px 60px -28px rgba(10,14,61,0.4);
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 12px;
  --container: 1180px;
  color-scheme: light;
}

*{ box-sizing:border-box; }
html{ background:var(--bg); }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Inter',-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion: reduce){ body{ scroll-behavior:auto; } }
h1,h2,h3{ font-family:'Sora',sans-serif; color:var(--ink); margin:0; text-wrap:balance; }
p{ margin:0; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
.wrap{ max-width:var(--container); margin-inline:auto; padding-inline:24px; }
@media (max-width:640px){ .wrap{ padding-inline:18px; } }
section{ padding-block:clamp(56px,9vw,104px); }

.eyebrow{ display:inline-flex; align-items:center; gap:9px; font-family:'Sora',sans-serif; font-weight:700; font-size:12px; letter-spacing:2.2px; text-transform:uppercase; color:var(--gold-ink); margin-bottom:14px; }
.eyebrow.on-dark{ color:var(--gold); }
.h2{ font-size:clamp(28px,4vw,44px); font-weight:800; line-height:1.08; letter-spacing:-0.6px; }
.lede{ font-size:clamp(15px,1.6vw,17.5px); line-height:1.68; color:var(--ink-soft); max-width:640px; }

.btn{ display:inline-flex; align-items:center; gap:9px; font-family:'Sora',sans-serif; font-weight:700; font-size:14.5px; padding:15px 27px; border-radius:var(--radius-sm); border:1.5px solid transparent; transition:transform .18s ease, box-shadow .18s ease, background .18s ease; white-space:nowrap; }
.btn:hover{ transform:translateY(-2px); }
.btn-gold{ background:var(--gold); color:#2A1B02; box-shadow:0 14px 30px -14px rgba(239,169,57,0.65); }
.btn-ghost-light{ border-color:rgba(255,255,255,0.45); color:#fff; }
.btn-ghost-light:hover{ background:rgba(255,255,255,0.12); }
.btn-outline{ border-color:var(--navy); color:var(--navy); }
.btn-outline:hover{ background:var(--navy); color:#fff; }

/* NAV */
body > header{ position:sticky; top:0; z-index:50; }
.nav{ position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:80px; }
.brand{ display:flex; align-items:center; gap:9px; font-family:'Sora',sans-serif; font-weight:800; font-size:19px; }
.brand-logo{ height:46px; width:auto; display:block; }
.foot-logo{ height:46px; width:auto; display:block; }
.nav-links{ display:flex; align-items:center; gap:28px; }
.nav-links a{ font-size:14px; font-weight:600; color:var(--ink-soft); }
.nav-links a:hover{ color:var(--gold-ink); }
.burger{ display:none; width:40px; height:40px; border:1px solid var(--line); border-radius:10px; background:var(--surface); align-items:center; justify-content:center; }
.burger span, .burger span::before, .burger span::after{ content:""; display:block; width:16px; height:2px; background:var(--ink); position:relative; }
.burger span::before{ position:absolute; top:-5px; } .burger span::after{ position:absolute; top:5px; }
.mobile-menu{ display:none; flex-direction:column; padding:8px 24px 18px; border-bottom:1px solid var(--line); background:var(--bg); }
.mobile-menu a{ padding:12px 4px; font-weight:600; font-size:15px; border-bottom:1px solid var(--line); }
.mobile-menu.open{ display:flex; }
@media (max-width:900px){ .nav-links{ display:none; } .nav-cta .btn{ display:none; } .burger{ display:flex; } }

/* HERO — collage */
.hero{ background:var(--navy); position:relative; overflow:hidden; padding-block:0; }
.hero::before{ content:""; position:absolute; inset:0; background:radial-gradient(ellipse 90% 60% at 15% 20%, rgba(62,122,91,0.28), transparent 60%); pointer-events:none; }
.hero .wrap{ position:relative; z-index:2; display:grid; grid-template-columns:1.05fr 0.95fr; gap:34px; align-items:center; padding-block:clamp(24px,3.2vw,38px); }
@media (max-width:940px){ .hero .wrap{ grid-template-columns:1fr; padding-block:44px; } }
.hero h1{ color:#fff; font-size:clamp(32px,4.6vw,52px); font-weight:800; line-height:1.08; letter-spacing:-0.8px; }
.hero h1 span{ color:var(--gold); }
.hero-sub{ color:rgba(255,255,255,0.78); font-size:clamp(15px,1.5vw,17px); line-height:1.65; max-width:480px; margin-top:16px; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-top:24px; }

.collage{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(2,1fr); height:225px; gap:8px; }
@media (max-width:640px)
.collage{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(2,1fr); height:225px; gap:8px; }
@media (max-width:640px){ .collage{ grid-template-rows:repeat(2,84px); } }
@media (min-width:941px){ .collage{ top:-40px; } }{ .collage{ grid-template-rows:repeat(2,84px); } }
.collage img{ width:100%; height:100%; object-fit:cover; border-radius:12px; filter:grayscale(1) contrast(1.08) brightness(0.98); transition:filter .3s; }
.collage a:hover img{ filter:grayscale(0.2) contrast(1.05); }
.c1{ grid-column:1/3; grid-row:1/3; } .c1 img{ border-radius:16px; }
.c2{ grid-column:3/5; grid-row:1/2; }
.c3{ grid-column:3/4; grid-row:2/3; }
.c4{ grid-column:4/5; grid-row:2/3; }

/* FACTS band */
.facts-band{ background:var(--surface-2); padding-bottom:clamp(40px,6vw,64px); }
.facts-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:38px; }
@media (max-width:700px){ .facts-row{ grid-template-columns:1fr; } }
.fact-card{ text-align:left; padding-top:16px; }
.fact-card .n{ font-family:'Sora',sans-serif; font-weight:800; font-size:clamp(34px,4vw,46px); color:var(--navy); line-height:1; }
.fact-card .l{ font-size:13.5px; color:var(--ink-mute); margin-top:8px; line-height:1.5; max-width:220px; }

/* PROGRAMS cards */
#services{ padding-block:clamp(44px,6vw,72px); }
.prog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:36px; }
@media (max-width:940px){ .prog-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .prog-grid{ grid-template-columns:1fr; } }
.prog-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:28px 24px; transition:transform .2s ease, box-shadow .2s ease; display:flex; flex-direction:column; }
.prog-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.prog-icon{ width:46px; height:46px; border-radius:13px; background:var(--navy); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.prog-icon svg{ width:22px; height:22px; color:var(--gold); }
.prog-card h3{ font-size:17.5px; font-weight:700; margin-bottom:9px; line-height:1.28; }
.prog-card p{ font-size:13.6px; line-height:1.58; color:var(--ink-mute); flex:1; }
.prog-link{ display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-family:'Sora',sans-serif; font-weight:700; font-size:12.5px; color:var(--gold-ink); }
.prog-link svg{ width:13px; height:13px; transition:transform .2s; }
.prog-card:hover .prog-link svg{ transform:translateX(3px); }

/* PARTNERS strip */
.partners-band{ background:var(--surface-2); padding-block:clamp(40px,6vw,64px); }
.partner-strip{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-top:40px; }
@media (max-width:900px){ .partner-strip{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .partner-strip{ grid-template-columns:repeat(2,1fr); } }
.partner-chip{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:20px 14px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px; }
.partner-chip .ph{ width:100%; aspect-ratio:4/3; border-radius:10px; overflow:hidden; background:var(--surface-2); }
.partner-chip .ph img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1) contrast(1.05); }
.partner-chip span{ font-size:12px; font-weight:700; color:var(--ink-soft); line-height:1.35; }

/* COLLECTIVE */
.collective-band{ padding-block:clamp(36px,5vw,56px); }
.collective-grid{ display:grid; grid-template-columns:0.95fr 1.05fr; gap:44px; align-items:start; margin-top:26px; }
@media (max-width:900px){ .collective-grid{ grid-template-columns:1fr; } }
.collective-photo{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); }
.collective-photo img{ width:100%; display:block; }
.collective-cap{ font-size:12.5px; color:var(--ink-mute); margin-top:12px; line-height:1.5; text-align:center; }

/* TEAM */
#team{ padding-block:clamp(44px,6vw,72px); }
.team-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:36px; }
@media (max-width:640px){ .team-grid{ gap:10px; } }
.team-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:22px 14px; text-align:center; transition:transform .2s ease, box-shadow .2s ease; }
.team-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.team-card img{ width:118px; height:118px; border-radius:50%; object-fit:cover; margin:0 auto; display:block; border:3px solid var(--gold); filter:grayscale(1) contrast(1.05); }
.team-card .name{ font-family:'Sora',sans-serif; font-weight:700; font-size:16.5px; margin-top:20px; }
.team-card .role{ font-size:11.5px; font-weight:700; color:#B8791E; text-transform:uppercase; letter-spacing:0.5px; margin:5px 0 10px; }
.team-card .bio{ font-size:13px; line-height:1.55; color:var(--ink-mute); }

/* CTA band */
.cta-band{ background:var(--surface-2); padding-block:clamp(48px,7vw,80px) clamp(40px,6vw,64px); }
.cta-top{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; }
.cta-top .h2{ max-width:560px; }
.cta-values{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:44px; }
@media (max-width:760px){ .cta-values{ grid-template-columns:repeat(2,1fr); } }
.cta-value{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:22px 18px; }
.cta-value .ic{ width:36px; height:36px; border-radius:10px; background:var(--navy); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.cta-value .ic svg{ width:17px; height:17px; color:var(--gold); }
.cta-value h3{ font-size:14px; font-weight:700; margin-bottom:6px; }
.cta-value p{ font-size:12.5px; color:var(--ink-mute); line-height:1.5; }

/* CTA band, light variant used on service pages (no value cards) */
.cta-band-light{ background:var(--bg); }

footer{ background:var(--navy); padding-block:36px 26px; }
.foot-grid{ display:grid; grid-template-columns:1.3fr 0.8fr 1.3fr; gap:32px; }
@media (max-width:760px){ .foot-grid{ grid-template-columns:1fr; gap:26px; } }
.foot-col-title{ font-family:'Sora',sans-serif; font-weight:700; font-size:12px; letter-spacing:1px; text-transform:uppercase; color:#fff; margin-bottom:12px; }
.foot-links{ display:flex; flex-direction:column; gap:10px; }
.foot-links a{ font-size:13.5px; font-weight:600; color:rgba(255,255,255,0.72); }
.foot-links a:hover{ color:var(--gold); }
.foot-tagline{ font-size:13px; color:rgba(255,255,255,0.6); margin-top:14px; max-width:280px; line-height:1.5; }
.foot-contact{ display:flex; flex-direction:column; gap:11px; }
.foot-contact-item{ display:flex; align-items:flex-start; gap:10px; font-size:13px; line-height:1.5; color:rgba(255,255,255,0.72); }
.foot-contact-item svg{ width:16px; height:16px; flex-shrink:0; margin-top:1px; color:var(--gold); }
a.foot-contact-item:hover{ color:var(--gold); }
.foot-bottom{ margin-top:28px; padding-top:18px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12px; color:rgba(255,255,255,0.55); }
footer .foot-brand p{ color:rgba(255,255,255,0.6) !important; }

/* Reveal-on-scroll — the hidden start state only applies once JavaScript
   has added the "js" class to <html>, so content stays visible with JS off */
.reveal{ opacity:1; transform:none; }
@media (prefers-reduced-motion: no-preference){
  html.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
  html.js .reveal.in{ opacity:1; transform:none; }
}

/* ==========================================================================
   Service page template ("Learn more") — reference/learn-more/*.html
   Shared components (.nav, .btn, .eyebrow, .h2, .lede, .prog-*, .cta-band,
   footer) are reused as-is. Everything below is specific to service pages. */

.svc-section{ padding-block:clamp(56px,8vw,96px); }
.svc-section-alt{ background:var(--surface-2); }
.svc-section-dark{ background:var(--navy); }
.svc-section-dark .h2{ color:#fff; }
.svc-section-dark .lede{ color:rgba(255,255,255,0.78); }

/* Hero */
.svc-hero{ background:var(--navy); position:relative; overflow:hidden; padding-block:0; }
.svc-hero::before{ content:""; position:absolute; inset:0; background:radial-gradient(ellipse 90% 60% at 15% 20%, rgba(62,122,91,0.28), transparent 60%); pointer-events:none; }
.svc-hero .wrap{ position:relative; z-index:2; display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; padding-block:clamp(40px,6vw,64px) clamp(48px,7vw,80px); }
@media (max-width:940px){ .svc-hero .wrap{ grid-template-columns:1fr; gap:32px; padding-block:44px; } }
.svc-breadcrumb{ font-size:13px; line-height:1.4; color:rgba(255,255,255,0.6); }
.svc-breadcrumb a:hover{ color:#fff; }
.svc-breadcrumb .current{ color:#fff; }
.svc-hero .eyebrow{ margin-top:32px; }
.svc-hero h1{ color:#fff; font-size:clamp(32px,4.6vw,52px); font-weight:800; line-height:1.08; letter-spacing:-0.8px; }
.svc-hero-sub{ margin-top:16px; max-width:520px; color:rgba(255,255,255,0.78); font-size:clamp(15px,1.5vw,17px); line-height:1.65; }
.svc-hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }
.svc-hero-photo{ height:380px; border-radius:16px; overflow:hidden; background:var(--navy-2); }
.svc-hero-photo img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1) contrast(1.08) brightness(0.98); }
@media (max-width:940px){ .svc-hero-photo{ height:260px; } }

/* Overview */
.svc-overview-grid{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:64px; align-items:start; }
@media (max-width:940px){ .svc-overview-grid{ grid-template-columns:1fr; } }
.svc-overview-grid .h2{ max-width:560px; }
.svc-overview-grid .lede{ max-width:680px; }
.svc-overview-grid .lede + .lede{ margin-top:14px; }
.svc-included-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:28px 24px; box-shadow:var(--shadow); }
.svc-included-card h3{ font-size:17.5px; font-weight:700; line-height:1.28; margin-bottom:6px; }
.svc-included-item{ display:flex; align-items:center; gap:14px; padding:15px 0; border-top:1px solid var(--line); font-size:15px; font-weight:600; }
.svc-included-item:first-child{ border-top:none; }
.svc-check{ width:32px; height:32px; border-radius:50%; background:rgba(239,169,57,0.16); color:var(--gold-ink); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.svc-check svg{ width:16px; height:16px; }

/* In depth */
.svc-rows{ display:flex; flex-direction:column; gap:20px; margin-top:40px; }
.svc-row{ display:grid; grid-template-columns:300px minmax(0,1fr); gap:48px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:32px; }
@media (max-width:940px){ .svc-row{ grid-template-columns:1fr; gap:20px; padding:24px; } }
.svc-row-head{ display:flex; align-items:flex-start; gap:16px; }
.svc-row-num{ width:46px; height:46px; border-radius:13px; background:var(--navy); color:var(--gold); display:flex; align-items:center; justify-content:center; font-family:'Sora',sans-serif; font-weight:800; font-size:17px; flex-shrink:0; }
.svc-row-head h3{ margin:0; padding-top:10px; font-size:22px; font-weight:700; line-height:1.25; letter-spacing:-0.01em; }
@media (max-width:940px){ .svc-row-head h3{ padding-top:6px; } }
.svc-row-body p{ font-size:15.5px; line-height:1.75; color:var(--ink-soft); }
.svc-receive{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); display:flex; gap:14px; align-items:baseline; flex-wrap:wrap; }
.svc-receive-label{ flex-shrink:0; font-family:'Sora',sans-serif; font-weight:700; font-size:12px; letter-spacing:1.4px; text-transform:uppercase; color:var(--gold-ink); }
.svc-receive-text{ font-size:15px; font-weight:600; line-height:1.5; color:var(--ink); }

/* How we work */
.svc-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:36px; }
@media (max-width:940px){ .svc-steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .svc-steps{ grid-template-columns:1fr; } }
.svc-step{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:28px 24px; }
.svc-step-num{ width:46px; height:46px; border-radius:13px; background:var(--navy); color:var(--gold); display:flex; align-items:center; justify-content:center; font-family:'Sora',sans-serif; font-weight:800; font-size:17px; margin-bottom:18px; }
.svc-step h3{ font-size:17.5px; font-weight:700; line-height:1.28; margin-bottom:9px; }
.svc-step p{ font-size:14px; line-height:1.65; color:var(--ink-mute); }

/* Why it matters */
.svc-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:48px; margin-top:48px; }
@media (max-width:640px){ .svc-stats{ grid-template-columns:1fr; gap:32px; } }
.svc-stat .num{ font-family:'Sora',sans-serif; font-weight:800; font-size:72px; line-height:1; letter-spacing:-1px; color:var(--gold); }
@media (max-width:640px){ .svc-stat .num{ font-size:56px; } }
.svc-stat p{ margin-top:14px; max-width:320px; font-size:16px; line-height:1.6; color:rgba(255,255,255,0.85); }
.svc-stat .src{ margin-top:8px; font-size:12.5px; font-weight:600; color:rgba(255,255,255,0.55); }

/* Trusted by */
.svc-clients{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; margin-top:40px; }
@media (max-width:900px){ .svc-clients{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .svc-clients{ grid-template-columns:repeat(2,1fr); } }
.svc-client{ display:flex; flex-direction:column; align-items:center; text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:26px 14px; }
.svc-client-mono{ width:56px; height:56px; border-radius:14px; background:var(--navy); color:var(--gold); display:flex; align-items:center; justify-content:center; font-family:'Sora',sans-serif; font-weight:800; font-size:19px; letter-spacing:0.5px; }
.svc-client .name{ margin-top:16px; font-family:'Sora',sans-serif; font-weight:700; font-size:14.5px; line-height:1.3; }
.svc-client .type{ margin-top:6px; font-size:12.5px; line-height:1.4; color:var(--ink-mute); }
.svc-clients-note{ margin-top:22px; font-size:12.5px; line-height:1.5; color:var(--ink-mute); }

/* Team: 4 across on every screen size, scaled down on small screens */
.team-card img{ width:clamp(56px,9vw,118px); height:clamp(56px,9vw,118px); }
.team-card .name{ font-size:clamp(11px,1.4vw,16px); margin-top:clamp(10px,1.6vw,20px); overflow-wrap:anywhere; }
.team-card .role{ font-size:clamp(8.5px,1vw,11.5px); }
.team-card .bio{ font-size:clamp(9.5px,1.1vw,13px); }
@media (max-width:640px){ .team-card{ padding:12px 6px; } .team-card .bio{ display:none; } }