/* =====================================================================
   OTİZM ERKEN BELİRTİLER PROJESİ
   Aesthetic: warm organic / nurturing editorial
   Palette drawn from project logo — slate ink, terracotta, cream
   ===================================================================== */

/* ---------- Fonts (matching PetPal: Baloo Bhaina 2 + Plus Jakarta Sans) ---------- */
@import url("https://fonts.googleapis.com/css2?family=Baloo+Bhaina+2:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");

/* ---------- Tokens ---------- */
:root{
  --cream:        #FBF6EC;
  --cream-2:      #F4E9D8;
  --cream-3:      #EFE2CD;
  --card:         #FFFCF6;

  --ink:          #3E4F5F;
  --ink-2:        #34434F;
  --ink-soft:     #5b6e7c;
  --ink-faint:    #84939e;

  --terra:        #DC7539;
  --terra-2:      #C25E28;
  --terra-3:      #EAA06F;
  --peach:        #F3CFA9;
  --peach-soft:   #FAE7D2;

  --sand:         #E7C99F;
  --teal:         #4E7E80;

  --line:         rgba(62,79,95,.13);
  --line-2:       rgba(62,79,95,.08);
  --shadow-sm:    0 2px 10px rgba(62,79,95,.06);
  --shadow:       0 18px 40px -22px rgba(62,79,95,.35);
  --shadow-lg:    0 40px 80px -40px rgba(62,79,95,.45);

  --r-sm: 14px;
  --r:    22px;
  --r-lg: 34px;
  --r-xl: 48px;

  --maxw: 1200px;
  --gap: clamp(1rem, 4vw, 2rem);

  --font-display: 'Baloo Bhaina 2', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.7;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.1; color:var(--ink); margin:0; letter-spacing:normal; }
p{ margin:0 0 1.1em; }
::selection{ background:var(--terra); color:#fff; }

/* page atmosphere: faint grain + warm radial wash */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1100px 600px at 88% -8%, rgba(220,117,57,.10), transparent 60%),
    radial-gradient(900px 700px at -8% 8%, rgba(78,126,128,.08), transparent 55%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}

/* ---------- Layout helpers ---------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gap); }
.container-wide{ max-width:1340px; }
.section{ padding-block:clamp(3.5rem,8vw,7rem); position:relative; }
.section-sm{ padding-block:clamp(2.5rem,5vw,4rem); }
.center{ text-align:center; }
.mx-auto{ margin-inline:auto; }
.measure{ max-width:62ch; }
.measure-sm{ max-width:46ch; }

/* eyebrow label with dot motif */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-body); font-weight:700;
  font-size:.74rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--terra-2);
}
.eyebrow::before{
  content:""; width:26px; height:2px;
  background:repeating-linear-gradient(90deg,var(--terra) 0 4px,transparent 4px 8px);
}
.eyebrow.is-light{ color:var(--peach); }
.eyebrow.is-centered{ justify-content:center; }

/* section heading block */
.s-head{ max-width:none; }
.s-head h2{ font-size:clamp(2rem,1.4rem + 2.6vw,3.4rem); font-weight:600; margin-top:.7rem; }
.s-head h2 em{ font-style:normal; color:var(--terra); font-weight:600; }
.s-head .lead{ color:var(--ink-soft); font-size:1.1rem; margin-top:1rem; }

.lead{ font-size:1.15rem; color:var(--ink-soft); }

/* dotted divider */
.dotline{ height:0; border-top:2px dotted rgba(220,117,57,.5); }

/* ---------- Buttons ---------- */
.btn{
  --b:var(--ink);
  display:inline-flex; align-items:center; gap:.6rem;
  font-weight:700; font-size:.97rem; letter-spacing:.01em;
  padding:.95rem 1.55rem; border-radius:100px;
  background:var(--b); color:var(--cream);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  box-shadow:0 12px 24px -14px rgba(62,79,95,.7);
  position:relative; white-space:nowrap;
}
.btn svg{ width:1.05em; height:1.05em; transition:transform .25s ease; }
.btn:hover{ transform:translateY(-3px); }
.btn:hover svg{ transform:translateX(4px); }
.btn--terra{ --b:var(--terra); box-shadow:0 14px 26px -14px rgba(220,117,57,.8); }
.btn--terra:hover{ background:var(--terra-2); }
.btn--ghost{
  background:transparent; color:var(--ink);
  box-shadow:inset 0 0 0 2px var(--line);
}
.btn--ghost:hover{ box-shadow:inset 0 0 0 2px var(--terra); color:var(--terra-2); }
.btn--light{ background:var(--cream); color:var(--ink); }
.btn--sm{ padding:.7rem 1.2rem; font-size:.88rem; }

.linkmore{
  display:inline-flex; align-items:center; gap:.5rem; font-weight:700; color:var(--terra-2);
  border-bottom:2px solid transparent; transition:gap .2s, border-color .2s;
}
.linkmore svg{ width:1em; height:1em; transition:transform .2s; }
.linkmore:hover{ gap:.75rem; border-color:var(--terra); }
.linkmore:hover svg{ transform:translateX(3px); }

/* tag / pill */
.pill{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.78rem; font-weight:700; letter-spacing:.02em;
  padding:.4rem .8rem; border-radius:100px;
  background:var(--peach-soft); color:var(--terra-2);
}
.pill--ink{ background:rgba(62,79,95,.08); color:var(--ink); }

/* =====================================================================
   HEADER / NAV  (injected by layout.js)
   ===================================================================== */
.topbar{
  background:var(--ink); color:var(--peach-soft);
  font-size:.8rem; letter-spacing:.01em;
}
.topbar .container{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:38px; padding-block:.35rem; }
.topbar a{ color:inherit; opacity:.85; }
.topbar a:hover{ opacity:1; color:#fff; }
.topbar__note{ display:inline-flex; align-items:center; gap:.5rem; }
.topbar__note svg{ width:1em; height:1em; color:var(--terra-3); }
.topbar__social{ display:flex; gap:.9rem; align-items:center; }
.topbar__social a{ display:inline-flex; }
.topbar__social svg{ width:15px; height:15px; }

.site-header{
  position:sticky; top:0; z-index:60;
  background:#fff;
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line-2);
  box-shadow:0 10px 30px -22px rgba(62,79,95,.55);
  transition:box-shadow .3s, background .3s;
}
.site-header.is-stuck{ box-shadow:0 10px 30px -18px rgba(62,79,95,.45); background:#fff; }
.site-header .container{ display:flex; align-items:center; gap:1.2rem; min-height:78px; }

.brand{ display:flex; align-items:center; gap:.7rem; flex-shrink:0; }
.brand img{ width:52px; height:52px; object-fit:contain; }
.brand__txt{ display:flex; flex-direction:column; line-height:1; }
.brand__name{ font-family:var(--font-display); font-weight:700; font-size:1.06rem; color:var(--ink); letter-spacing:-.01em; line-height:1.02; }
.brand__tag{ font-size:.62rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--terra-2); margin-top:.3rem; }

.mainnav{ margin-left:auto; }
.mainnav > ul{ display:flex; align-items:center; gap:.25rem; }
.mainnav li{ position:relative; }
.mainnav a{
  display:inline-flex; align-items:center; gap:.35rem;
  font-weight:600; font-size:.95rem; color:var(--ink);
  padding:.6rem .85rem; border-radius:100px; transition:color .2s, background .2s;
}
.mainnav > ul > li > a:hover{ color:var(--terra-2); }
.mainnav .has-sub > a::after{
  content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px); opacity:.6; transition:transform .2s;
}
.mainnav .has-sub:hover > a::after{ transform:rotate(45deg) translateY(0); }
.mainnav a.is-active{ color:var(--terra-2); }
.mainnav a.is-active::before{
  content:""; position:absolute; left:.85rem; right:.85rem; bottom:.3rem; height:2px;
  background:repeating-linear-gradient(90deg,var(--terra) 0 4px,transparent 4px 7px);
}
.sub-folder{
  position:absolute; top:calc(100% + 10px); left:0; min-width:248px;
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:.5rem; box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform:translateY(8px); transition:.22s ease;
}
.has-sub:hover .sub-folder{ opacity:1; visibility:visible; transform:translateY(0); }
.sub-folder::before{ content:""; position:absolute; top:-10px; left:0; right:0; height:10px; }
.sub-folder li{ width:100%; }
.sub-folder a{
  width:100%; border-radius:12px; padding:.6rem .8rem; font-weight:600; font-size:.92rem;
}
.sub-folder a:hover{ background:var(--peach-soft); color:var(--terra-2); }

.header-cta{ flex-shrink:0; }
.header-social{ display:flex; gap:.4rem; }
.header-social a{
  width:38px; height:38px; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--line); color:var(--ink); transition:.2s;
}
.header-social a:hover{ background:var(--terra); color:#fff; border-color:var(--terra); transform:translateY(-2px); }
.header-social svg{ width:16px; height:16px; }

.burger{
  display:none; width:46px; height:46px; border-radius:13px; flex-shrink:0; margin-left:auto;
  border:1px solid var(--line); background:var(--card);
  flex-direction:column; gap:5px; align-items:center; justify-content:center;
}
.burger span{ width:20px; height:2px; background:var(--ink); border-radius:2px; transition:.25s; }
body.menu-open .burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity:0; }
body.menu-open .burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* mobile drawer */
.mobile-nav{
  position:fixed; inset:0 0 0 auto; width:min(360px,86vw); z-index:80;
  background:var(--cream); border-left:1px solid var(--line);
  transform:translateX(100%); transition:transform .35s cubic-bezier(.5,0,.2,1);
  display:flex; flex-direction:column; padding:1.4rem 1.4rem 2rem; overflow-y:auto;
  box-shadow:var(--shadow-lg);
}
body.menu-open .mobile-nav{ transform:translateX(0); }
.mobile-nav__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.mobile-nav__close{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; }
.mobile-nav__close svg{ width:18px; height:18px; }
.mobile-nav nav > ul > li{ border-bottom:1px solid var(--line-2); }
.mobile-nav a{ display:block; padding:.85rem .2rem; font-weight:600; font-size:1.05rem; }
.mobile-nav .sub a{ padding-left:1.2rem; font-size:.96rem; font-weight:500; color:var(--ink-soft); }
.mobile-nav .sub-label{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--terra-2); padding:.9rem .2rem .3rem; font-weight:700; }
.mobile-nav__social{ display:flex; gap:.6rem; margin-top:auto; padding-top:1.4rem; }
.mobile-nav__social a{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; color:var(--ink); transition:.2s; }
.mobile-nav__social a:hover{ background:var(--terra); border-color:var(--terra); color:#fff; }
.mobile-nav__social svg{ width:16px; height:16px; }
.scrim{ position:fixed; inset:0; background:rgba(62,79,95,.45); backdrop-filter:blur(3px); z-index:70; opacity:0; visibility:hidden; transition:.3s; }
body.menu-open .scrim{ opacity:1; visibility:visible; }

/* =====================================================================
   HERO
   ===================================================================== */
.hero{
  position:relative; overflow:hidden;
  padding-block:clamp(2.5rem,6vw,5.5rem) clamp(4.5rem,9vw,7rem);
  background-color:#FBE6CE;
  background-image:radial-gradient(rgba(220,117,57,.09) 1.6px, transparent 1.7px);
  background-size:22px 22px;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 54px));
}
.hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.hero__eyebrow{ margin-bottom:1.3rem; }
.hero h1{
  font-size:clamp(2.5rem,1.6rem + 4.1vw,4.7rem); font-weight:600; letter-spacing:normal;
  line-height:1.06;
}
.hero h1 .accent{ color:var(--terra); font-style:normal; font-weight:600; position:relative; }
.hero h1 .underline{ position:relative; white-space:nowrap; }
.hero h1 .underline svg{ position:absolute; left:0; right:0; bottom:-.18em; width:100%; height:.34em; color:var(--terra); }
.hero__lead{ font-size:clamp(1.05rem,1rem + .4vw,1.25rem); color:var(--ink-soft); max-width:48ch; margin:1.6rem 0 2rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; }
.hero__meta{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:2.4rem; }
.hero__meta .num{ font-family:var(--font-display); font-size:clamp(1.6rem,1.3rem+.8vw,2rem); font-weight:600; color:var(--terra); line-height:1; white-space:nowrap; }
.hero__meta .lbl{ font-size:.8rem; color:var(--ink-soft); margin-top:.4rem; }

/* hero art — warm photo inside a morphing organic blob */
.hero__art{ position:relative; display:grid; place-items:center; }
.hero__art::before{
  content:""; position:absolute; width:90%; aspect-ratio:1; z-index:-1;
  border-radius:46% 54% 60% 40%/54% 46% 54% 46%;
  background:linear-gradient(150deg,var(--peach),var(--terra-3));
  transform:translate(7%,7%); opacity:.7; filter:blur(2px);
  animation:morph 18s ease-in-out infinite reverse;
}
.blob{
  width:min(100%,470px); aspect-ratio:1; position:relative; overflow:hidden;
  background:linear-gradient(150deg,var(--peach),var(--terra-3));
  border-radius:48% 52% 56% 44%/52% 44% 56% 48%;
  box-shadow:var(--shadow-lg);
  animation:morph 16s ease-in-out infinite;
  display:grid; place-items:center;
}
.blob img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  border-radius:inherit; z-index:0;
}
.blob__inner{
  position:absolute; inset:0; z-index:1; border-radius:inherit;
  background:linear-gradient(165deg, rgba(62,79,95,0) 45%, rgba(62,79,95,.35) 100%),
             radial-gradient(120% 120% at 28% 18%, rgba(255,255,255,.22), transparent 55%);
}
@keyframes morph{
  0%,100%{ border-radius:48% 52% 56% 44%/52% 44% 56% 48%; }
  33%{ border-radius:58% 42% 42% 58%/46% 58% 42% 54%; }
  66%{ border-radius:44% 56% 50% 50%/56% 48% 52% 44%; }
}
.hero__art .chip{
  position:absolute; background:var(--card); border-radius:18px; padding:.8rem 1rem;
  box-shadow:var(--shadow); display:flex; align-items:center; gap:.7rem; font-weight:700; font-size:.9rem;
  border:1px solid var(--line-2);
}
.chip .ico{ width:38px; height:38px; border-radius:12px; display:grid; place-items:center; flex-shrink:0; }
.chip .ico svg{ width:20px; height:20px; }
.chip small{ display:block; font-weight:500; font-size:.74rem; color:var(--ink-soft); letter-spacing:0; }
.chip-1{ top:6%; left:-6%; animation:floaty 6s ease-in-out infinite; }
.chip-2{ bottom:10%; right:-8%; animation:floaty 7s ease-in-out .8s infinite; }
.chip-3{ bottom:-4%; left:14%; animation:floaty 5.5s ease-in-out .4s infinite; }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }

/* dotted decorative path */
.dots-deco{ position:absolute; opacity:.5; pointer-events:none; color:var(--terra); }

/* =====================================================================
   GENERIC: page hero (interior pages)
   ===================================================================== */
.page-hero{
  position:relative; overflow:hidden;
  padding-block:clamp(2.5rem,6vw,4.5rem) clamp(4.5rem,8vw,6.5rem);
  background-color:#FBE6CE;
  background-image:radial-gradient(rgba(220,117,57,.09) 1.6px, transparent 1.7px);
  background-size:22px 22px;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 46px));
}
/* page-hero content shares the same centered container width as every other section */
.page-hero__inner{ max-width:var(--maxw); }
.page-hero__inner .lead{ max-width:64ch; }
.page-hero h1{ font-size:clamp(2.2rem,1.5rem + 3vw,3.8rem); font-weight:600; margin-top:.9rem; }
.page-hero .lead{ margin-top:1.1rem; }
.breadcrumb{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; font-size:.85rem; color:var(--ink-faint); font-weight:600; }
.breadcrumb a:hover{ color:var(--terra-2); }
.breadcrumb .sep{ opacity:.5; }
.page-hero__art{
  position:absolute; right:-40px; top:50%; transform:translateY(-50%);
  width:340px; height:340px; border-radius:46% 54% 60% 40%/52% 46% 54% 48%;
  background:linear-gradient(150deg,var(--peach),var(--terra-3)); opacity:.5; z-index:-1;
  filter:blur(2px);
}

/* =====================================================================
   CARDS / FEATURES
   ===================================================================== */
.grid{ display:grid; gap:clamp(1.1rem,2.4vw,1.8rem); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

.card{
  background:var(--card); border:1px solid var(--line-2); border-radius:var(--r);
  padding:clamp(1.4rem,2.5vw,2rem); box-shadow:var(--shadow-sm);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s;
  position:relative; overflow:hidden;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--line); }
.card__ico{
  width:60px; height:60px; border-radius:18px; display:grid; place-items:center; margin-bottom:1.2rem;
  background:var(--peach-soft); color:var(--terra-2);
}
.card__ico svg{ width:28px; height:28px; }
.card h3{ font-size:1.3rem; margin-bottom:.5rem; }
.card p{ color:var(--ink-soft); font-size:.98rem; margin-bottom:0; }
.card .linkmore{ margin-top:1.1rem; }
.card--ink{ background:var(--ink); border-color:transparent; }
.card--ink h3, .card--ink p{ color:var(--cream); }
.card--ink p{ color:rgba(251,246,236,.78); }
.card--num{ counter-increment:step; }
.card__num{ font-family:var(--font-display); font-size:2.6rem; font-weight:600; color:var(--peach); line-height:1; }

/* domain card variants tinting icon */
.tint-1 .card__ico{ background:var(--peach-soft); color:var(--terra-2); }
.tint-2 .card__ico{ background:rgba(78,126,128,.14); color:var(--teal); }
.tint-3 .card__ico{ background:rgba(62,79,95,.1); color:var(--ink); }
.tint-4 .card__ico{ background:rgba(231,201,159,.35); color:#a9722e; }

/* =====================================================================
   SPLIT (image + text)
   ===================================================================== */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.split--rev .split__media{ order:2; }
.split__media{ position:relative; }
.media-blob{
  border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow);
  background:linear-gradient(150deg,var(--cream-2),var(--peach-soft));
  aspect-ratio:4/3.4; display:grid; place-items:center; position:relative;
}
.media-blob svg.illus{ width:74%; height:74%; }
.media-blob img{ width:100%; height:100%; object-fit:cover; }
.stat-badge{
  position:absolute; bottom:-24px; left:-24px;
  background:var(--card); border-radius:20px; padding:1.1rem 1.4rem; box-shadow:var(--shadow);
  border:1px solid var(--line-2);
}
.stat-badge .num{ font-family:var(--font-display); font-size:2.1rem; color:var(--terra); font-weight:600; line-height:1; }
.stat-badge .lbl{ font-size:.8rem; color:var(--ink-soft); margin-top:.3rem; }

.checklist li{ display:flex; gap:.8rem; align-items:flex-start; margin-bottom:1rem; color:var(--ink-soft); }
.checklist li:last-child{ margin-bottom:0; }
.checklist .tick{ flex-shrink:0; width:26px; height:26px; border-radius:50%; background:var(--peach-soft); color:var(--terra-2); display:grid; place-items:center; margin-top:.15rem; }
.checklist .tick svg{ width:14px; height:14px; }
.checklist b{ color:var(--ink); }

/* =====================================================================
   STATS BAND
   ===================================================================== */
.band{ background:var(--ink); color:var(--cream); border-radius:var(--r-lg); padding:clamp(2rem,5vw,3.5rem); position:relative; overflow:hidden; }
.band::before{
  content:""; position:absolute; right:-80px; top:-80px; width:320px; height:320px; border-radius:50%;
  background:radial-gradient(circle,rgba(220,117,57,.5),transparent 65%);
}
.band__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; position:relative; }
.band .num{ font-family:var(--font-display); font-size:clamp(1.9rem,1.3rem + 1.7vw,2.7rem); font-weight:600; color:var(--peach); line-height:1; white-space:nowrap; }
.band .lbl{ color:rgba(251,246,236,.8); font-size:.92rem; margin-top:.5rem; max-width:22ch; }

/* =====================================================================
   AGE TIMELINE (signature element)
   ===================================================================== */
.timeline{ position:relative; }
.timeline__track{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; position:relative; }
.timeline__track::before{
  content:""; position:absolute; left:6%; right:6%; top:34px; height:0;
  border-top:3px dotted var(--terra); opacity:.55; z-index:0;
}
.tl-step{ position:relative; z-index:1; text-align:center; display:flex; flex-direction:column; }
.tl-step__dot{
  width:70px; height:70px; margin:0 auto 1.2rem; border-radius:50%;
  background:var(--card); border:3px solid var(--peach); display:grid; place-items:center;
  font-family:var(--font-display); font-weight:700; color:var(--terra-2); font-size:.95rem;
  box-shadow:var(--shadow-sm); transition:.3s;
}
.tl-step:hover .tl-step__dot{ border-color:var(--terra); transform:translateY(-4px); box-shadow:var(--shadow); }
.tl-step__card{ background:var(--card); border:1px solid var(--line-2); border-radius:var(--r); padding:1.3rem; text-align:left; box-shadow:var(--shadow-sm); flex:1; }
.tl-step__card h4{ font-size:1.05rem; margin-bottom:.6rem; }
.tl-step__card ul li{ display:flex; gap:.55rem; font-size:.9rem; color:var(--ink-soft); margin-bottom:.5rem; }
.tl-step__card ul li::before{ content:""; flex-shrink:0; width:7px; height:7px; border-radius:50%; background:var(--terra); margin-top:.55rem; }
.tl-step__pct{ display:inline-block; font-size:.74rem; font-weight:700; color:var(--terra-2); background:var(--peach-soft); padding:.25rem .6rem; border-radius:100px; margin-top:.8rem; }

/* =====================================================================
   RED FLAG / NOTE callout
   ===================================================================== */
.note{
  display:flex; gap:1rem; align-items:flex-start;
  background:var(--peach-soft); border:1px solid rgba(220,117,57,.25);
  border-radius:var(--r); padding:1.3rem 1.5rem; color:var(--ink);
}
.note__ico{ flex-shrink:0; width:42px; height:42px; border-radius:12px; background:var(--terra); color:#fff; display:grid; place-items:center; }
.note__ico svg{ width:22px; height:22px; }
.note p{ margin:0; font-size:.96rem; }
.note b{ color:var(--terra-2); }

/* =====================================================================
   TEAM
   ===================================================================== */
.member{ text-align:center; }
.member__photo{
  width:140px; height:140px; margin:0 auto 1.1rem; border-radius:50%;
  background:linear-gradient(150deg,var(--peach),var(--terra-3));
  display:grid; place-items:center; font-family:var(--font-display); font-weight:700;
  color:#fff; font-size:2.4rem; box-shadow:var(--shadow-sm); border:4px solid var(--card);
  position:relative; transition:.3s; overflow:hidden;
}
.member__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:50%; }
.member:hover .member__photo{ transform:translateY(-5px); box-shadow:var(--shadow); }
.member h4{ font-size:1.12rem; }
.member .role{ color:var(--terra-2); font-weight:600; font-size:.88rem; margin-top:.3rem; }
.member .role.sub{ color:var(--ink-faint); }

/* =====================================================================
   BLOG / POST CARDS
   ===================================================================== */
.post-card{
  background:var(--card); border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden;
  box-shadow:var(--shadow-sm); transition:transform .3s, box-shadow .3s; display:flex; flex-direction:column;
}
.post-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.post-card__thumb{ aspect-ratio:16/10; position:relative; overflow:hidden; display:grid; place-items:center; }
.post-card__thumb svg.illus{ width:46%; height:46%; opacity:.9; }
.post-card__thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.post-card:hover .post-card__thumb img{ transform:scale(1.05); }
.post-card__thumb .pill{ position:absolute; top:1rem; left:1rem; background:rgba(251,246,236,.92); z-index:2; }
.thumb-a{ background:linear-gradient(150deg,var(--peach),var(--terra-3)); }
.thumb-b{ background:linear-gradient(150deg,#cfe0d8,var(--teal)); }
.thumb-c{ background:linear-gradient(150deg,var(--sand),#d8a96a); }
.thumb-d{ background:linear-gradient(150deg,#b9c6cf,var(--ink-2)); }
.post-card__body{ padding:1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column; flex:1; }
.post-card__meta{ display:flex; gap:.9rem; align-items:center; font-size:.82rem; color:var(--ink-faint); font-weight:600; margin-bottom:.7rem; }
.post-card__meta .dot{ width:4px; height:4px; border-radius:50%; background:var(--terra); }
.post-card h3{ font-size:1.22rem; line-height:1.2; }
.post-card h3 a:hover{ color:var(--terra-2); }
.post-card p{ color:var(--ink-soft); font-size:.95rem; margin:.6rem 0 1.1rem; }
.post-card .linkmore{ margin-top:auto; }

/* list rows (links / books / academic) */
.row-list{ display:flex; flex-direction:column; gap:1rem; }
.res-row{
  display:flex; gap:1.3rem; align-items:center; background:var(--card);
  border:1px solid var(--line-2); border-radius:var(--r); padding:1.2rem 1.4rem;
  box-shadow:var(--shadow-sm); transition:transform .25s, box-shadow .25s, border-color .25s;
}
.res-row:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--line); }
.res-row__ico{ flex-shrink:0; width:54px; height:54px; border-radius:16px; background:var(--peach-soft); color:var(--terra-2); display:grid; place-items:center; }
.res-row__ico svg{ width:26px; height:26px; }
.res-row__body{ flex:1; min-width:0; }
.res-row__body h3{ font-size:1.12rem; }
.res-row__body p{ color:var(--ink-soft); font-size:.92rem; margin:.3rem 0 0; }
.res-row__meta{ font-size:.8rem; color:var(--ink-faint); font-weight:600; margin-top:.5rem; display:flex; gap:.8rem; flex-wrap:wrap; }
.res-row__act{ flex-shrink:0; }

/* book grid */
.book{ text-align:left; }
.book__cover{
  aspect-ratio:3/4.2; border-radius:14px; box-shadow:var(--shadow); margin-bottom:1rem;
  display:grid; place-items:center; padding:1.2rem; position:relative; overflow:hidden;
  transition:transform .3s;
}
.book:hover .book__cover{ transform:translateY(-6px) rotate(-1deg); }
.book__cover span{ font-family:var(--font-display); color:#fff; font-weight:600; font-size:1.05rem; line-height:1.2; align-self:flex-end; }
.book__cover::before{ content:""; position:absolute; left:12px; top:0; bottom:0; width:3px; background:rgba(255,255,255,.25); }
.book h4{ font-size:1.02rem; }
.book .author{ color:var(--ink-soft); font-size:.86rem; margin-top:.25rem; }

/* =====================================================================
   ARTICLE / SINGLE
   ===================================================================== */
.article{ max-width:760px; margin-inline:auto; }
.article__hero{ aspect-ratio:16/8; border-radius:var(--r-lg); margin-bottom:2.5rem; box-shadow:var(--shadow); display:grid; place-items:center; }
.article__hero svg.illus{ width:30%; height:30%; }
.article__hero{ overflow:hidden; }
.article__hero img{ width:100%; height:100%; object-fit:cover; }

/* pagination */
.pagination{ display:flex; justify-content:center; align-items:center; gap:.45rem; margin-top:3rem; flex-wrap:wrap; }
.pagination a, .pagination span{
  min-width:44px; height:44px; padding:0 .6rem; display:inline-flex; align-items:center; justify-content:center;
  border-radius:12px; border:1px solid var(--line); font-weight:700; font-size:.95rem; color:var(--ink);
  background:var(--card); transition:.2s;
}
.pagination a:hover{ border-color:var(--terra); color:var(--terra-2); transform:translateY(-2px); }
.pagination .is-current{ background:var(--terra); border-color:var(--terra); color:#fff; }
.pagination .is-disabled{ opacity:.4; pointer-events:none; }
.pagination .gap{ border:none; background:none; min-width:auto; }
.prose{ font-size:1.08rem; color:var(--ink-soft); }
.prose h2{ font-size:1.7rem; margin:2.2rem 0 .9rem; color:var(--ink); }
.prose h3{ font-size:1.3rem; margin:1.8rem 0 .7rem; color:var(--ink); }
.prose p{ margin-bottom:1.3rem; }
.prose b,.prose strong{ color:var(--ink); }
.prose ul{ margin:0 0 1.4rem; padding:0; }
.prose ul li{ position:relative; padding-left:1.7rem; margin-bottom:.7rem; }
.prose ul li::before{ content:""; position:absolute; left:0; top:.6em; width:8px; height:8px; border-radius:50%; background:var(--terra); }
.prose blockquote{
  margin:2rem 0; padding:1.4rem 1.8rem; border-left:4px solid var(--terra);
  background:var(--peach-soft); border-radius:0 var(--r) var(--r) 0;
  font-family:var(--font-display); font-size:1.2rem; font-style:normal; font-weight:500; color:var(--ink);
}
.prose figure{ margin:2rem 0; }
.prose img{ border-radius:var(--r); }

.toc{ background:var(--card); border:1px solid var(--line-2); border-radius:var(--r); padding:1.4rem 1.6rem; box-shadow:var(--shadow-sm); }
.toc h4{ font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--terra-2); margin-bottom:.9rem; }
.toc a{ display:block; padding:.4rem 0; color:var(--ink-soft); font-weight:600; font-size:.94rem; border-bottom:1px dashed var(--line-2); }
.toc a:hover{ color:var(--terra-2); }

.author-box{ display:flex; gap:1.1rem; align-items:center; background:var(--card); border:1px solid var(--line-2); border-radius:var(--r); padding:1.3rem 1.5rem; box-shadow:var(--shadow-sm); margin-top:2.5rem; }
.author-box__av{ width:64px; height:64px; border-radius:50%; flex-shrink:0; background:linear-gradient(150deg,var(--peach),var(--terra-3)); display:grid; place-items:center; color:#fff; font-family:var(--font-display); font-weight:700; font-size:1.4rem; }
.author-box h4{ font-size:1.05rem; }
.author-box p{ margin:.2rem 0 0; font-size:.9rem; color:var(--ink-soft); }

/* =====================================================================
   CTA / NEWSLETTER
   ===================================================================== */
.cta{
  background:linear-gradient(155deg,var(--terra),var(--terra-2));
  border-radius:var(--r-lg); padding:clamp(2.2rem,5vw,4rem); color:#fff; position:relative; overflow:hidden;
}
.cta::before{ content:""; position:absolute; left:-60px; bottom:-60px; width:260px; height:260px; border-radius:50%; background:rgba(255,255,255,.12); }
.cta::after{ content:""; position:absolute; right:6%; top:-30px; width:140px; height:140px; border-radius:50%; border:2px dotted rgba(255,255,255,.4); }
.cta__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center; position:relative; }
.cta h2{ color:#fff; font-size:clamp(1.8rem,1.3rem + 2vw,2.8rem); }
.cta p{ color:rgba(255,255,255,.9); margin-top:.8rem; }
.subscribe{ display:flex; gap:.6rem; flex-wrap:wrap; background:rgba(255,255,255,.14); padding:.5rem; border-radius:100px; }
.subscribe input{
  flex:1; min-width:160px; border:none; background:transparent; color:#fff; padding:.7rem 1.1rem; font-family:inherit; font-size:.95rem; outline:none;
}
.subscribe input::placeholder{ color:rgba(255,255,255,.7); }

/* =====================================================================
   CONTACT
   ===================================================================== */
.contact-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(2rem,5vw,3.5rem); align-items:start; }
.contact-info-card{ display:flex; gap:1rem; align-items:flex-start; padding:1.3rem 0; border-bottom:1px solid var(--line-2); }
.contact-info-card:last-child{ border-bottom:none; }
.contact-info-card .ic{ width:50px; height:50px; flex-shrink:0; border-radius:14px; background:var(--peach-soft); color:var(--terra-2); display:grid; place-items:center; }
.contact-info-card .ic svg{ width:22px; height:22px; }
.contact-info-card h4{ font-size:1.05rem; }
.contact-info-card p,.contact-info-card a{ color:var(--ink-soft); font-size:.95rem; margin:.2rem 0 0; }
.contact-info-card a:hover{ color:var(--terra-2); }

.form-card{ background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:clamp(1.6rem,3vw,2.6rem); box-shadow:var(--shadow); }
.field{ margin-bottom:1.1rem; }
.field label{ display:block; font-weight:600; font-size:.86rem; margin-bottom:.45rem; color:var(--ink); }
.field input,.field textarea,.field select{
  width:100%; font-family:inherit; font-size:.98rem; color:var(--ink);
  padding:.85rem 1.1rem; border-radius:14px; border:1px solid var(--line); background:var(--cream);
  outline:none; transition:border-color .2s, box-shadow .2s;
}
.field textarea{ min-height:140px; resize:vertical; }
.field input:focus,.field textarea:focus,.field select:focus{ border-color:var(--terra); box-shadow:0 0 0 3px rgba(220,117,57,.15); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }

/* faq */
.faq{ border:1px solid var(--line-2); border-radius:var(--r); background:var(--card); overflow:hidden; box-shadow:var(--shadow-sm); }
.faq + .faq{ margin-top:1rem; }
.faq summary{ list-style:none; cursor:pointer; padding:1.2rem 1.5rem; font-weight:700; font-family:var(--font-display); font-size:1.1rem; display:flex; justify-content:space-between; gap:1rem; align-items:center; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-size:1.5rem; color:var(--terra); font-family:var(--font-body); transition:transform .25s; }
.faq[open] summary::after{ transform:rotate(45deg); }
.faq__body{ padding:0 1.5rem 1.4rem; color:var(--ink-soft); }

/* =====================================================================
   FOOTER  (injected by layout.js)
   ===================================================================== */
.site-footer{ background:var(--ink); color:var(--cream); margin-top:clamp(3rem,7vw,6rem); position:relative; overflow:hidden; }
.site-footer::before{ content:""; position:absolute; right:-100px; top:-100px; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle,rgba(220,117,57,.28),transparent 65%); }
.site-footer__top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:2.5rem; padding-block:clamp(2.5rem,6vw,4.5rem); position:relative; }
.f-brand{ display:flex; align-items:center; gap:.85rem; margin-bottom:1.3rem; }
.f-brand img.f-logo{ width:60px; height:60px; object-fit:contain; filter:brightness(0) invert(1); }
.f-brand .brand__txt{ line-height:1.05; }
.f-brand .brand__name{ color:#fff; font-size:1.4rem; letter-spacing:0; }
.f-brand .brand__tag{ color:var(--terra-3); font-size:.66rem; margin-top:.45rem; }
.site-footer p{ color:rgba(251,246,236,.9); font-size:1rem; }
.f-fund{ font-size:.9rem; line-height:1.65; color:rgba(251,246,236,.78) !important; }
.site-footer h4{ color:#fff; font-size:.9rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:1.1rem; }
.site-footer h4::after{ content:""; display:block; width:26px; height:2px; margin-top:.6rem; background:repeating-linear-gradient(90deg,var(--terra) 0 4px,transparent 4px 8px); }
.f-links li{ margin-bottom:.65rem; }
.f-links a{ color:rgba(251,246,236,.92); font-size:1rem; transition:.2s; }
.f-links a:hover{ color:var(--peach); padding-left:5px; }
.f-contact li{ display:flex; gap:.7rem; margin-bottom:1rem; color:rgba(251,246,236,.92); font-size:1rem; }
.f-contact svg{ width:18px; height:18px; flex-shrink:0; color:var(--terra-3); margin-top:.25rem; }
.f-social{ display:flex; gap:.6rem; margin-top:1.2rem; }
.f-social a{ width:40px; height:40px; border-radius:50%; border:1px solid rgba(251,246,236,.2); display:grid; place-items:center; transition:.2s; }
.f-social a:hover{ background:var(--terra); border-color:var(--terra); transform:translateY(-2px); }
.f-social svg{ width:16px; height:16px; }
.site-footer__bottom{ border-top:1px solid rgba(251,246,236,.13); padding-block:1.4rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; position:relative; }
.site-footer__bottom p{ margin:0; font-size:.85rem; }
.site-footer__bottom .dotline{ border-color:rgba(220,117,57,.5); }

/* back to top */
.to-top{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:50;
  width:50px; height:50px; border-radius:50%; background:var(--terra); color:#fff;
  display:grid; place-items:center; box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform:translateY(12px); transition:.3s;
}
.to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover{ background:var(--terra-2); transform:translateY(-3px); }
.to-top svg{ width:20px; height:20px; }

/* =====================================================================
   REVEAL ANIMATIONS
   ===================================================================== */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.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; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .blob,.chip-1,.chip-2,.chip-3{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* page-load stagger for hero */
.fade-up{ opacity:0; animation:fadeUp .8s cubic-bezier(.2,.7,.2,1) forwards; }
.fade-up.s1{ animation-delay:.1s; } .fade-up.s2{ animation-delay:.25s; }
.fade-up.s3{ animation-delay:.4s; } .fade-up.s4{ animation-delay:.55s; } .fade-up.s5{ animation-delay:.7s; }
@keyframes fadeUp{ to{ opacity:1; transform:none; } }
.fade-up{ transform:translateY(22px); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1024px){
  .hero__grid{ grid-template-columns:1fr; gap:3rem; }
  .hero__art{ max-width:440px; margin-inline:auto; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .band__grid{ grid-template-columns:repeat(2,1fr); gap:2rem; }
  .timeline__track{ grid-template-columns:repeat(2,1fr); }
  .timeline__track::before{ display:none; }
  .footer .site-footer__top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:900px){
  .mainnav, .header-social{ display:none; }
  .burger{ display:flex; }
  .header-cta{ margin-left:auto; }
  .site-header .container{ gap:.8rem; }
  .split{ grid-template-columns:1fr; gap:2.5rem; }
  .split--rev .split__media{ order:0; }
  .cta__grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .site-footer__top{ grid-template-columns:1fr 1fr; gap:2rem; }
  .page-hero__art{ display:none; }
}
@media (max-width:620px){
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .timeline__track{ grid-template-columns:1fr; }
  .band__grid{ grid-template-columns:1fr 1fr; }
  .field-row{ grid-template-columns:1fr; }
  .site-footer__top{ grid-template-columns:1fr; }
  .topbar__note span{ display:none; }
  .hero__meta{ gap:1rem; }
  .band .num{ font-size:1.65rem; }
  .stat-badge{ left:0; }
}