/* ============================================================
   Impactism Foundation — shared stylesheet
   Built on the Socious brand (tokens reproduced from the handoff).
   Voice: calm, credible, spacious, light-mode-first.
   Type: Inter (per handoff §6). Headings 600, tracking -0.02em.
   ============================================================ */

/* ---- Tokens (Socious, verbatim) ---------------------------- */
:root {
  /* primary — forest teal */
  --primary-25:#f9fafa; --primary-50:#f2f6f6; --primary-100:#e6eded; --primary-200:#ccdbda;
  --primary-300:#99b7b5; --primary-400:#669290; --primary-500:#336e6b; --primary:#004a46;
  --primary-700:#003b38; --primary-800:#002c2a; --primary-900:#001e1c;
  /* secondary — rose (urgency/highlight only, sparing) */
  --secondary-25:#fcf5f6; --secondary-50:#f9ebed; --secondary-100:#ecc0c8; --secondary-200:#e2a2ad;
  --secondary-300:#d57888; --secondary-400:#cd5d71; --secondary:#c1354d; --secondary-600:#b03046;
  --secondary-700:#892637; --secondary-800:#6a1d2a; --secondary-900:#511620;
  /* tertiary — sand / cream */
  --tertiary-50:#fdfbfa; --tertiary-100:#f9f3f0; --tertiary-200:#f6eee9; --tertiary-300:#f2e6df;
  --tertiary-400:#efe1d9; --tertiary:#ebd9cf; --tertiary-600:#d6c5bc; --tertiary-700:#a79a93;
  --tertiary-800:#817772; --tertiary-900:#635b57;
  /* pastel accents */
  --lavender:#a1b2d9; --sage:#c0c6a0; --marigold:#f0c37e; --seafoam:#9dcbce; --coral:#e3978b;
  /* gray */
  --gray-25:#fcfcfd; --gray-50:#f9fafb; --gray-100:#f2f4f7; --gray-200:#eaecf0; --gray-300:#d0d5dd;
  --gray-400:#98a2b3; --gray-500:#667085; --gray-600:#475467; --gray-700:#344054;
  --gray-800:#1d2939; --gray-900:#101828;

  --font-sans:'Inter','system-ui','-apple-system','BlinkMacSystemFont','Segoe UI','Roboto',sans-serif;
  --font-jp:'Hiragino Kaku Gothic ProN','Yu Gothic','Meiryo',var(--font-sans);

  --shadow-button:0 1px 2px rgba(16,24,40,0.05);
  --shadow-card:0 12px 16px -4px rgba(0,0,0,0.08),0 4px 6px -2px rgba(16,24,40,0.03);
  --shadow-lg:0 24px 48px -12px rgba(16,24,40,0.18);
  --ring:0 0 0 4px var(--primary-100);

  --r-lg:8px; --r-xl:12px; --r-2xl:16px; --r-3xl:24px; --r-pill:999px;

  --wrap:1120px; --wrap-narrow:768px; --wrap-text:680px;
}

*{box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth;}
body{
  margin:0; font-family:var(--font-sans); color:var(--gray-600);
  background:#fff; font-size:16px; line-height:1.5; letter-spacing:0;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
::selection{background:var(--primary-100);color:var(--primary-900);}

/* ---- Layout ------------------------------------------------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;}
.wrap-narrow{max-width:var(--wrap-narrow);margin:0 auto;padding:0 24px;}
.wrap-text{max-width:var(--wrap-text);margin:0 auto;padding:0 24px;}
.section{padding:88px 0;}
.section-sm{padding:64px 0;}
.bg-gray{background:var(--gray-50);}
.bg-gray-100{background:var(--gray-100);}
.bg-cream{background:var(--tertiary);}
.bg-cream-soft{background:var(--tertiary-200);}
.bg-green{background:var(--primary);color:#fff;}

/* ---- Type --------------------------------------------------- */
.eyebrow{
  font-size:13px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--primary);margin:0 0 18px;
}
.eyebrow.on-green{color:var(--tertiary);}
h1,h2,h3,h4{color:var(--gray-900);font-weight:600;letter-spacing:-0.02em;line-height:1.15;margin:0;}
.h1{font-size:clamp(34px,5vw,60px);line-height:1.12;}
.h2{font-size:clamp(28px,3.6vw,38px);line-height:1.15;}
.h3{font-size:20px;line-height:1.3;letter-spacing:-0.01em;}
.h4{font-size:18px;line-height:1.35;letter-spacing:-0.01em;}
.lede{font-size:clamp(18px,2.2vw,20px);line-height:1.55;color:var(--gray-600);margin:0;}
.body{font-size:16px;line-height:1.6;color:var(--gray-600);}
.muted{color:var(--gray-500);}
.measure{max-width:34em;}
.on-green h1,.on-green h2,.on-green h3{color:#fff;}
em.accent{font-style:normal;color:var(--primary);}

/* ---- Buttons ------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:600;font-size:15px;line-height:1;padding:13px 22px;border-radius:var(--r-lg);
  border:1px solid transparent;transition:all .18s ease;white-space:nowrap;
}
.btn:focus-visible{outline:none;box-shadow:var(--ring);}
.btn-primary{background:var(--primary);color:#fff;box-shadow:var(--shadow-button);}
.btn-primary:hover{background:var(--primary-700);}
.btn-secondary{background:#fff;color:var(--primary);border-color:var(--gray-300);}
.btn-secondary:hover{border-color:var(--primary-300);background:var(--primary-25);}
.btn-ghost{background:transparent;color:var(--primary);}
.btn-ghost:hover{background:var(--primary-50);}
.btn-lg{font-size:16px;padding:15px 26px;}
.btn-sm{font-size:14px;padding:9px 16px;}
.btn-block{width:100%;}
/* on green surfaces */
.on-green .btn-primary{background:var(--tertiary);color:var(--primary-800);}
.on-green .btn-primary:hover{background:#fff;}
.on-green .btn-secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,0.35);}
.on-green .btn-secondary:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.55);}

.arrow{transition:transform .18s ease;}
.btn:hover .arrow,.link-arrow:hover .arrow{transform:translateX(3px);}

.link-arrow{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--primary);}
.link-arrow:hover{color:var(--primary-700);}

/* ---- Brand lockup ------------------------------------------ */
.brand{display:inline-flex;align-items:center;gap:11px;}
.brand .mark{width:30px;height:30px;flex:none;}
.brand .name{font-weight:700;font-size:19px;letter-spacing:-0.02em;color:var(--primary);}
.brand.on-dark .name{color:#fff;}

/* impact mark — concentric ripple; also encodes the nested idea
   (outer = worldview, mid = the standard, centre = the unit) */
.imark{display:block;}
.imark .dot{fill:var(--primary);}
.imark .r-mid{fill:none;stroke:var(--primary);}
.imark .r-out{fill:none;stroke:var(--primary);opacity:0.42;}
.brand.on-dark .imark .dot{fill:var(--tertiary);}
.brand.on-dark .imark .r-mid{stroke:var(--tertiary);}
.brand.on-dark .imark .r-out{stroke:var(--tertiary);opacity:0.5;}

/* ---- Header ------------------------------------------------- */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,0.86);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--gray-200);}
.hdr__in{display:flex;align-items:center;gap:28px;max-width:var(--wrap);margin:0 auto;padding:13px 24px;}
.hdr__nav{display:flex;align-items:center;gap:2px;flex:1;}
.hdr__link{padding:8px 13px;font-size:14.5px;font-weight:500;color:var(--gray-700);
  border-radius:var(--r-lg);transition:all .15s;}
.hdr__link:hover{background:var(--gray-50);color:var(--primary);}
.hdr__link.active{color:var(--primary);}
.hdr__right{display:flex;align-items:center;gap:8px;}
.hdr__lang{font-size:13px;color:var(--gray-500);display:inline-flex;align-items:center;gap:5px;
  padding:7px 11px;border-radius:var(--r-lg);}
.hdr__lang:hover{background:var(--gray-50);color:var(--gray-700);}
.hdr__menu-btn{display:none;border:1px solid var(--gray-200);background:#fff;border-radius:var(--r-lg);
  padding:8px;color:var(--gray-700);}
.hdr__mobile{display:none;border-top:1px solid var(--gray-200);background:#fff;padding:10px 24px 18px;}
.hdr__mobile a{display:block;padding:11px 4px;font-size:16px;font-weight:500;color:var(--gray-700);
  border-bottom:1px solid var(--gray-100);}
.hdr__mobile .row{display:flex;gap:10px;margin-top:14px;}
@media(max-width:920px){
  .hdr__nav,.hdr__lang,.hdr__right .btn{display:none;}
  .hdr__menu-btn{display:inline-flex;}
  .hdr__right{flex:1;justify-content:flex-end;}
  .hdr.open .hdr__mobile{display:block;}
}

/* ---- Stamp -------------------------------------------------- */
.stamp{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:13px;
  letter-spacing:0.04em;text-transform:uppercase;color:var(--primary);}
.stamp .bar{width:18px;height:1.5px;background:var(--primary);}
.stamp.on-green{color:var(--tertiary);}
.stamp.on-green .bar{background:var(--tertiary);}

/* ---- Hero --------------------------------------------------- */
.hero{padding:72px 0 0;text-align:center;overflow:hidden;}
.hero .lede{max-width:600px;margin:22px auto 0;}
.hero__pill{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:var(--r-pill);
  background:var(--primary-50);border:1px solid var(--primary-100);margin:0 auto 26px;
  font-size:13.5px;font-weight:500;color:var(--primary-700);}
.hero__ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px;}
.hero__note{margin-top:18px;font-size:13.5px;color:var(--gray-500);}

/* ---- Cards -------------------------------------------------- */
.card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--r-2xl);padding:30px;
  transition:border-color .18s,box-shadow .18s,transform .18s;}
.card-hover:hover{border-color:var(--primary-200);box-shadow:var(--shadow-card);}
.card .ico{width:46px;height:46px;border-radius:var(--r-xl);display:flex;align-items:center;justify-content:center;
  background:var(--primary-50);color:var(--primary);margin-bottom:18px;}
.card .ico svg{width:22px;height:22px;}
.card h3{margin-bottom:9px;}
.grid{display:grid;gap:22px;}
.g-2{grid-template-columns:repeat(2,1fr);}
.g-3{grid-template-columns:repeat(3,1fr);}
.g-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:860px){.g-3,.g-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.g-2,.g-3,.g-4{grid-template-columns:1fr;}}

/* tinted accent cards (ways-in / phases) */
.tint{border:1px solid transparent;border-radius:var(--r-2xl);padding:28px;}
.tint .ico{background:rgba(255,255,255,0.6);}
.tint-lavender{background:color-mix(in srgb,var(--lavender) 22%,#fff);}
.tint-sage{background:color-mix(in srgb,var(--sage) 26%,#fff);}
.tint-marigold{background:color-mix(in srgb,var(--marigold) 24%,#fff);}
.tint-seafoam{background:color-mix(in srgb,var(--seafoam) 26%,#fff);}
.tint-coral{background:color-mix(in srgb,var(--coral) 24%,#fff);}
.tint-cream{background:var(--tertiary-200);}

/* ---- Section heading block ---------------------------------- */
.shead{max-width:680px;}
.shead.center{margin:0 auto;text-align:center;}
.shead .lede{margin-top:16px;}

/* ---- Footer ------------------------------------------------- */
.ftr{background:var(--gray-800);color:rgba(255,255,255,0.66);padding:72px 0 34px;}
.ftr__top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;max-width:var(--wrap);
  margin:0 auto 44px;padding:0 24px;}
.ftr__brand p{font-size:14px;line-height:1.6;max-width:300px;margin:16px 0 18px;}
.ftr__col h4{font-size:12px;text-transform:uppercase;letter-spacing:0.08em;color:var(--tertiary);
  margin:0 0 15px;font-weight:600;}
.ftr__col a{display:block;font-size:14px;color:rgba(255,255,255,0.62);padding:5px 0;}
.ftr__col a:hover{color:#fff;}
.ftr__bot{max-width:var(--wrap);margin:0 auto;padding:24px 24px 0;border-top:1px solid rgba(255,255,255,0.1);
  display:flex;justify-content:space-between;gap:16px;font-size:13px;color:rgba(255,255,255,0.45);flex-wrap:wrap;}
.ftr__langs{display:flex;gap:14px;}
.ftr__langs a:hover{color:#fff;}
@media(max-width:780px){.ftr__top{grid-template-columns:1fr 1fr;gap:28px;}}
@media(max-width:480px){.ftr__top{grid-template-columns:1fr;}}

/* ---- Reveal animation --------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease;}
  .reveal.in{opacity:1;transform:none;}
  .reveal.d1{transition-delay:.08s;} .reveal.d2{transition-delay:.16s;}
  .reveal.d3{transition-delay:.24s;} .reveal.d4{transition-delay:.32s;}
}

/* ---- Misc helpers ------------------------------------------- */
.divider{height:1px;background:var(--gray-200);border:0;margin:0;}
.pill-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-pill);
  font-size:13px;font-weight:600;background:var(--primary-50);color:var(--primary-700);}
.kicker-num{font-weight:600;color:var(--primary);font-variant-numeric:tabular-nums;}
.center{text-align:center;}
.mt-0{margin-top:0;} .mt-2{margin-top:16px;} .mt-3{margin-top:24px;} .mt-4{margin-top:32px;}