:root{
  --accent: rgb(201, 64, 121);
  --text: #1f2937;
  --muted: #4b5563;
  --bg: #ffffff;
  --bg-alt: #f8fafc;
  --card: #ffffff;
  --border: #e5e7eb;
  --radius: 14px;
  --shadow: 0 10px 20px rgba(0,0,0,.06);
  --shadow-strong: 0 18px 40px rgba(0,0,0,.14);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:hidden}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; color:var(--text); background:var(--bg); overflow-x:hidden}
a{color:var(--accent); text-decoration: none}
a:hover{text-decoration:underline}
img{max-width:100%; display:block}
.container{width:min(1200px, 92%); margin-inline:auto}
main{flex:1 0 auto; display:flex; flex-direction:column}

header{
  position:sticky; top:0; z-index:20;
  backdrop-filter:saturate(180%) blur(12px);
  background:rgba(255,255,255,.95);
  border-bottom:1px solid var(--border);
  padding-top:max(env(safe-area-inset-top), 0px);
}
nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0}
.brand{display:flex; align-items:center; gap:12px; flex:1 1 auto; min-width:0}
.brand-link{display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none}
.brand-link:hover,
.brand-link:focus-visible{color:inherit; text-decoration:none !important}
.brand-mark{height:46px; width:46px; border-radius:14px; background:#fff; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; padding:6px; box-shadow:var(--shadow)}
.brand-mark svg{height:100%; width:100%}
.brand-copy span{display:block; font-size:clamp(20px, 4vw, 30px); font-weight:700; line-height:1}
.brand-copy small{display:block; margin-top:4px; font-size:.9rem; color:var(--muted); letter-spacing:.01em}

.navlinks{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-left:auto}
.navlinks a{padding:10px 14px; border-radius:12px; line-height:1.1; font-size:1rem; letter-spacing:.01em; transition:background .2s ease, color .2s ease}
.navlinks a:hover{background:var(--bg-alt); text-decoration:none}
.nav-cta{background:var(--accent); color:#fff; font-weight:700; box-shadow:var(--shadow); padding:12px 16px}
.nav-cta:hover{color:#fff; background:var(--accent); box-shadow:var(--shadow-strong); transform:translateY(-1px)}
.nav-cta:active{transform:translateY(0)}
.nav-toggle{display:none; margin-left:auto; border:1px solid var(--border); background:#fff; border-radius:12px; padding:10px 14px; cursor:pointer; font-size:.95rem; font-weight:600; color:var(--text)}
.nav-toggle:focus-visible{outline:2px solid var(--accent)}

.hero{padding:72px 0 46px; background:linear-gradient(180deg, rgba(201,64,121,.07), transparent)}
.hero-grid{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 520px); gap:40px; align-items:center}
.hero-text{max-width:640px}
.hero-media{position:relative; border-radius:20px; overflow:hidden; box-shadow:var(--shadow-strong); border:1px solid rgba(255,255,255,.7)}
.hero-media::after{content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(201,64,121,.18), transparent); pointer-events:none}
.hero-media .credit{position:absolute; right:10px; bottom:10px; background:rgba(0,0,0,.4); color:#e5e7eb; padding:3px 7px; border-radius:999px; font-size:.7rem; letter-spacing:.02em}
.badge{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--border); border-radius:999px; background:#fff; color:var(--muted); font-weight:600}
.badge i{height:8px; width:8px; background:var(--accent); border-radius:999px}
h1{font-size:clamp(30px, 4vw, 48px); line-height:1.08; margin:14px 0}
.lead{font-size:clamp(16px, 2.2vw, 20px); color:var(--muted); max-width:70ch; line-height:1.6}
.cta{margin-top:20px; display:flex; gap:12px; flex-wrap:wrap}

.btn{border:none; cursor:pointer; padding:14px 18px; border-radius:12px; font-weight:700; box-shadow:var(--shadow); min-height:44px; display:inline-flex; align-items:center; justify-content:center; text-align:center; transition:transform .2s ease, box-shadow .2s ease; text-decoration:none}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.btn-accent{background:var(--accent); color:white}
.btn-accent:hover{transform:translateY(-1px); box-shadow:var(--shadow-strong); color:white}
.btn-accent:active{transform:translateY(0)}
.btn-ghost{background:#fff; color:var(--text); border:1px solid var(--border)}

.section{padding:52px 0; scroll-margin-top:90px}
.section h2{font-size:clamp(24px, 3vw, 34px); margin:0 0 12px}
.section p.desc{color:var(--muted); margin:0 0 22px; max-width:70ch; line-height:1.6}

.grid{display:grid; gap:18px}
.grid.cols-2{grid-template-columns:repeat(auto-fit, minmax(280px, 1fr))}
.grid.cols-3{grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))}

.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.card h3{margin:0 0 10px; font-size:1.1rem}
.card p{margin:0; color:var(--muted); font-size:1rem; line-height:1.5}

.news-grid{grid-template-columns:repeat(auto-fit, minmax(260px, 1fr))}
.news-card{display:block; height:100%; color:inherit; text-decoration:none; transition:transform .2s ease, box-shadow .2s ease}
.news-card:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.news-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-strong); text-decoration:none}
.news-card .news-meta{display:flex; gap:8px; align-items:center; color:var(--muted); font-size:.95rem}
.news-card .news-date{font-weight:700; color:var(--accent)}

.timeline-shell{overflow:hidden; padding-bottom:6px}
.timeline-scroller{overflow-x:auto; display:block; padding:16px 6px 6px; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.timeline-scroller::-webkit-scrollbar{display:none}
.timeline-body{display:flex; flex-direction:column; gap:10px; min-width:720px; width:max-content}
.timeline-track{position:relative; height:26px; margin:18px 0 10px; min-width:720px}
.timeline-track .track-past,.timeline-track .track-future{position:absolute; top:50%; transform:translateY(-50%); height:6px; border-radius:999px}
.track-past{left:0; background:var(--muted); background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.9) 0 12px, transparent 12px 22px)}
.track-future{right:auto; background:var(--accent)}
.today-marker{position:absolute; top:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; transform:translate(-50%, -50%)}
.today-marker .today-label{position:absolute; bottom:100%; margin-bottom:14px; padding:6px 10px; border-radius:12px; border:1px solid var(--border); background:#fff; box-shadow:var(--shadow); font-weight:700; color:var(--accent)}
.today-marker .dot{width:14px; height:14px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(201,64,121,.18); flex:0 0 auto}
.timeline-events{display:flex; gap:14px; align-items:stretch; padding-bottom:6px; width:max-content}
.timeline-card{min-width:240px; max-width:260px; border:1px solid var(--border); border-radius:14px; padding:14px; background:#fff; box-shadow:var(--shadow); position:relative}
.timeline-card .timeline-date{font-weight:700; color:var(--accent); margin:0 0 4px}
.timeline-card .timeline-title{margin:0 0 6px; font-size:1.05rem}
.timeline-card .timeline-desc{margin:0; color:var(--muted); line-height:1.4}
.timeline-card.past{background:linear-gradient(180deg, rgba(107,114,128,.08), #fff)}
.timeline-card.today{background:linear-gradient(180deg, rgba(201,64,121,.14), #fff); border-color: rgba(201,64,121,.4)}
.timeline-card.future{background:linear-gradient(180deg, rgba(201,64,121,.08), #fff)}

.timeline-tag{display:inline-flex; align-items:center; justify-content:center; padding:6px 10px; border-radius:999px; background:rgba(201,64,121,.12); color:var(--accent); font-weight:700; margin-top:8px; width:max-content}

.team-media{border-radius:16px; overflow:hidden; box-shadow:var(--shadow-strong); border:1px solid var(--border); position:relative}
.team-media .label{position:absolute; left:12px; bottom:12px; background:rgba(0,0,0,.5); color:#fff; padding:6px 10px; border-radius:999px; font-weight:600}

.framed-video{position:relative; padding-top:56%; border-radius:14px; overflow:hidden; box-shadow:var(--shadow)}
.framed-video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

.diagram{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px; align-items:stretch}
.diagram .node{border:1px dashed var(--border); border-radius:12px; padding:12px; background:var(--bg-alt); font-weight:700; text-align:center; color:var(--text)}
.diagram .node small{display:block; color:var(--muted); font-weight:400; margin-top:4px}

.goal-grid{grid-template-columns:repeat(auto-fit, minmax(220px, 1fr))}
.goal-card{cursor:default; text-align:left; display:flex; flex-direction:column; gap:12px; transition:box-shadow .2s ease; font:inherit; color:inherit}
.goal-card:focus-visible{outline:none}
.goal-card:hover{box-shadow:0 14px 26px rgba(0,0,0,.12)}
.goal-card h3{font-size:1.1rem; margin:0}
.goal-card p{font-size:1rem}
.goal-card__header{display:flex; align-items:center; gap:12px}
.goal-card__icon{flex:0 0 auto; width:46px; height:46px; border-radius:14px; background:var(--bg-alt); display:flex; align-items:center; justify-content:center; box-shadow:inset 0 0 0 1px var(--border); color:var(--accent)}
.goal-card__icon img{width:26px; height:26px; display:block}

.goal-overlay{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(15,23,42,.55); z-index:50}
.goal-overlay[hidden]{display:none}
.goal-overlay__card{position:relative; background:#fff; border-radius:20px; max-width:min(720px, 94vw); max-height:min(90vh, 780px); overflow-y:auto; padding:28px; box-shadow:0 24px 48px rgba(15,23,42,.22)}
.goal-overlay__close{position:absolute; top:16px; right:16px; border:none; background:rgba(15,23,42,.08); border-radius:999px; width:38px; height:38px; cursor:pointer; font-size:22px; line-height:1; display:flex; align-items:center; justify-content:center}
.goal-overlay__close:hover{background:rgba(15,23,42,.16)}
.goal-overlay__close:focus-visible{outline:2px solid var(--accent)}
.goal-overlay__body h2{margin-top:0}
.goal-detail-grid{grid-template-columns:repeat(auto-fit, minmax(220px, 1fr))}

.form-card{background:#fff; border:1px solid var(--border); border-radius:14px; padding:18px; box-shadow:var(--shadow); display:grid; gap:12px}
form{display:grid; gap:12px}
form button{margin-top:4px}
label{display:block; font-weight:600; margin-bottom:6px}
input, textarea{width:100%; padding:12px 12px; border-radius:12px; border:1px solid var(--border); font:inherit; background:var(--bg-alt)}
input:focus-visible, textarea:focus-visible{outline:2px solid var(--accent); border-color:var(--accent)}
textarea{min-height:140px; resize:vertical}

.footer{padding:32px 0; border-top:1px solid var(--border); background:var(--bg-alt); color:var(--muted)}
.footer a{color:inherit; font-weight:700}
.footer .contact{display:grid; gap:8px; text-align:center}

@media (max-width: 1024px){
  nav{gap:10px}
  .hero{padding:56px 0 32px}
  .hero-grid{grid-template-columns: minmax(0, 1fr) minmax(0, 420px)}
}

@media (max-width: 760px){
  nav{flex-wrap:wrap}
  .brand{width:100%; justify-content:space-between}
  .nav-toggle{display:inline-flex; align-items:center; gap:6px}
  .navlinks{display:none; width:100%; flex-direction:column; align-items:flex-start; padding:12px; border:1px solid var(--border); border-radius:16px; background:rgba(255,255,255,.96); box-shadow:var(--shadow); margin-left:0}
  .navlinks.is-open{display:flex}
  .navlinks a{width:100%; padding:12px 6px}
  .container{width:min(100%, 90%)}
  .hero{padding:40px 0 22px}
  .hero-grid{grid-template-columns:1fr}
  .hero-media{display:block}
  .timeline-body{min-width:100%}
  .timeline-track{margin:12px 0 6px}
}

@media (max-width: 420px){
  .brand-copy span{font-size:clamp(20px, 8vw, 28px)}
  .brand-mark{height:42px; width:42px; font-size:1rem}
  .today-marker{font-size:.9rem}
}

#team .hero-text .lead{
  font-size:1rem;
}