:root{
  /* YCVC palette (structured, not rainbow) */
  --ink:#0b1220;
  --bg:#ffffff;

  --ocean:#153a66;     /* authority */
  --blue:#1f6bff;      /* accent */
  --teal:#00c2b8;      /* creative freshness */
  --sun:#ffc400;       /* highlight */
  --coral:#ff5a3c;     /* youth energy */
  --magenta:#c83cff;   /* sparing accent */

  --soft:#f6f7fb;
  --card:#ffffff;
  --shadow: 0 14px 40px rgba(11,18,32,.12);
  --radius: 22px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.45;
}

.container{
  width:min(1100px, calc(100% - 40px));
  margin:0 auto;
}

a{color:inherit;text-decoration:none}
a:hover{opacity:.92}

.header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(11,18,32,.08);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:18px;
}
.brand{display:flex; flex-direction:column; gap:2px}
.brand__mark{
  font-family:"Baloo 2", system-ui;
  font-weight:800;
  letter-spacing:.5px;
  font-size:22px;
}
.brand__sub{font-size:12px; opacity:.7}

.nav{display:flex; gap:18px; font-weight:600; font-size:14px; opacity:.9}
.header__cta{display:flex; gap:10px; align-items:center}
.burger{display:none; font-size:22px; background:none; border:none; cursor:pointer}

.drawer{
  display:none;
  border-top:1px solid rgba(11,18,32,.08);
  padding:14px 20px 20px;
  gap:10px;
}
.drawer a{display:block; padding:10px 0; font-weight:600}
.drawer .btn{display:inline-flex; margin-top:10px}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  font-weight:700;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:active{transform:scale(.98)}
.btn--primary{
  background:linear-gradient(90deg, var(--coral), var(--sun));
  color:#111;
  box-shadow:0 10px 26px rgba(255,90,60,.25);
}
.btn--ghost{
  background:#fff;
  border-color:rgba(11,18,32,.16);
}
.btn--ghostLight{
  background:transparent;
  border-color:rgba(255,255,255,.35);
  color:#fff;
}

.hero{
  position:relative;
  padding:56px 0 72px;
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(0,194,184,.22), transparent 55%),
    radial-gradient(900px 500px at 90% 20%, rgba(255,196,0,.22), transparent 55%),
    linear-gradient(180deg, rgba(31,107,255,.06), rgba(255,255,255,1) 60%);
  overflow:hidden;
}
.hero__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:28px;
  align-items:start;
}

.pill{
  display:inline-flex;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(21,58,102,.08);
  font-weight:700;
  font-size:13px;
  margin:0 0 12px;
}

h1{
  font-family:"Baloo 2", system-ui;
  font-weight:800;
  font-size:54px;
  letter-spacing:-.5px;
  line-height:1.0;
  margin:0 0 14px;
}
.lead{font-size:16.5px; opacity:.85; margin:0 0 18px}

.hero__buttons{display:flex; gap:12px; flex-wrap:wrap}

.hero__mini{
  display:flex; gap:12px; margin-top:18px; flex-wrap:wrap;
}
.miniCard{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(11,18,32,.08);
  border-radius:16px;
  padding:12px 12px;
  min-width:220px;
}
.miniCard__title{font-weight:800}
.miniCard__desc{opacity:.75; font-size:13px}

.hero__media{display:flex; flex-direction:column; gap:14px}
.mediaRow{display:grid; grid-template-columns:1fr 1fr; gap:14px}

.mediaCard{
  background:rgba(255,255,255,.8);
  border:1px solid rgba(11,18,32,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:12px;
}
.mediaCard--small{box-shadow:0 12px 30px rgba(11,18,32,.10)}
.mediaCard__label{font-weight:800; font-size:12px; opacity:.7; margin-bottom:8px}

.ratio{position:relative; width:100%; overflow:hidden; border-radius:16px; background:#0b1220}
.ratio iframe{position:absolute; inset:0; width:100%; height:100%}
.ratio--shorts{padding-top:177%} /* 9:16 */
.ratio--video{padding-top:56.25%} /* 16:9 */

.fbWrap{
  border-radius:16px;
  overflow:hidden;
  background:#fff;
}

.wave{
  position:absolute; left:0; right:0; bottom:-1px;
  height:90px;
  fill:#fff;
}
.wave--flip{position:relative; bottom:auto; top:-1px; transform:scaleY(-1); fill:var(--soft)}

.section{position:relative; padding:64px 0}
.section--light{background:var(--soft)}
.section--dark{
  background:
    radial-gradient(1000px 600px at 30% 10%, rgba(0,194,184,.20), transparent 60%),
    radial-gradient(900px 500px at 80% 30%, rgba(200,60,255,.18), transparent 60%),
    linear-gradient(180deg, #111a2f, #0b1220);
  color:#fff;
}

.sectionTitle{
  font-family:"Baloo 2", system-ui;
  font-weight:800;
  font-size:38px;
  margin:0 0 10px;
}
.sectionTitle--light{color:#fff}
.sectionLead{margin:0 0 22px; opacity:.82; max-width:70ch}
.sectionLead--light{opacity:.85}

.cards3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
  margin-top:18px;
}
.card{
  background:var(--card);
  border:1px solid rgba(11,18,32,.10);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:0 12px 34px rgba(11,18,32,.08);
}
.card h3{margin:0 0 8px; font-weight:900}
.card p{margin:0; opacity:.8}

.spotlight{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:16px;
  align-items:stretch;
  margin-top:18px;
}
.spotlight__copy{
  background:#fff;
  border:1px solid rgba(11,18,32,.10);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:0 12px 34px rgba(11,18,32,.08);
}
.spotlight__copy h3{margin:0 0 8px; font-weight:900}
.bullets{margin:12px 0 0 18px; padding:0}
.bullets li{margin:6px 0; opacity:.86}
.spotlight__buttons{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap}

.spotlight__art{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid rgba(11,18,32,.10);
  box-shadow:0 12px 34px rgba(11,18,32,.08);
  background:
    radial-gradient(420px 260px at 30% 20%, rgba(0,194,184,.50), transparent 60%),
    radial-gradient(520px 260px at 80% 60%, rgba(255,196,0,.55), transparent 60%),
    radial-gradient(520px 260px at 30% 90%, rgba(255,90,60,.35), transparent 60%),
    linear-gradient(180deg, #fff, #f2f5ff);
}
.artBlob{
  position:absolute; inset:-40px;
  background:
    radial-gradient(circle at 20% 20%, rgba(31,107,255,.25), transparent 45%),
    radial-gradient(circle at 70% 50%, rgba(200,60,255,.18), transparent 50%),
    radial-gradient(circle at 30% 80%, rgba(0,194,184,.18), transparent 50%);
  filter: blur(2px);
}
.artNote{
  position:absolute; left:14px; right:14px; bottom:14px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(11,18,32,.10);
  border-radius:18px;
  padding:12px;
}
.artNote__kicker{font-weight:900; font-size:12px; opacity:.72}
.artNote__title{font-weight:900; margin-top:4px}

.feedsGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
  align-items:start;
}
.feedCard{
  background:#fff;
  border:1px solid rgba(11,18,32,.10);
  border-radius:var(--radius);
  box-shadow:0 12px 34px rgba(11,18,32,.08);
  padding:12px;
}
.feedCard__top{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
.badge{
  font-weight:900;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(0,194,184,.14);
}
.link{font-weight:800; font-size:12px; opacity:.75}

.ctaRow{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap}

.stats{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
  margin-top:18px;
}
.stat{
  background:#fff;
  border:1px solid rgba(11,18,32,.10);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:0 12px 34px rgba(11,18,32,.08);
}
.stat__num{
  font-family:"Baloo 2", system-ui;
  font-size:36px;
  font-weight:900;
}
.stat__label{opacity:.78}

.involved{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  align-items:start;
}
.form{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.20);
  border-radius:var(--radius);
  padding:18px;
}
.form h3{margin:0 0 12px; font-weight:900}
label{display:block; font-weight:700; font-size:13px; opacity:.95; margin-bottom:10px}
input, select, textarea{
  width:100%;
  margin-top:8px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.10);
  color:#fff;
  outline:none;
}
textarea{resize:vertical}
.formRow{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.formNote{opacity:.75; font-size:12px; margin-top:10px}

.footer{
  background:#050914;
  color:#fff;
  padding:26px 0;
}
.footer__grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:14px;
  align-items:center;
}
.footer__brand{
  font-family:"Baloo 2", system-ui;
  font-weight:900;
  font-size:22px;
}
.footer__small{opacity:.75; font-size:12px}
.footer__links{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.footer__links a{opacity:.86}
.footer__links a:hover{opacity:1}

/* Responsive */
@media (max-width: 980px){
  .hero__grid{grid-template-columns:1fr; }
  h1{font-size:44px}
  .mediaRow{grid-template-columns:1fr}
  .cards3{grid-template-columns:1fr}
  .spotlight{grid-template-columns:1fr}
  .feedsGrid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .involved{grid-template-columns:1fr}
  .formRow{grid-template-columns:1fr}
  .nav, .header__cta{display:none}
  .burger{display:block}
  .drawer.open{display:grid}
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}

.brand__logo{
  height: 100px;        /* ideal desktop header size */
  width: auto;         /* keeps proportions */
  display: block;
}

.brand__text{
  display:flex;
  flex-direction:column;
  line-height:1.05;
}
/* ===========================
   PORTFOLIO & SOCIAL
=========================== */

.subTitle{
  margin: 60px 0 24px;
  font-size: 1.6rem;
  font-weight: 700;
  font-family: "Baloo 2", cursive;
}

/* Thumbnail preview grid */

.thumbGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
  margin: 40px 0 60px;
}

.thumbCard{
  background:#ffffff;
  border-radius:18px;
  overflow:hidden;
  text-decoration:none;
  color:#111;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  transition: all .3s ease;
  display:flex;
  flex-direction:column;
}

.thumbCard:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 35px rgba(0,0,0,0.08);
}

.thumbCard__tag{
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.5px;
  padding:10px 16px;
  /*background: linear-gradient(90deg,#0066ff,#00c2b8);*/
  /*background: linear-gradient(90deg,#0b2e6b,#00c2b8);*/
  background: linear-gradient(90deg, var(--coral), var(--sun));
  color:white;
}

.thumbCard__img{
  width:100%;
  height:180px;
  object-fit:cover;
}

.thumbCard__title{
  font-weight:700;
  padding:18px 18px 4px;
}

.thumbCard__meta{
  font-size:.85rem;
  opacity:.6;
  padding:0 18px 18px;
}

/* Embedded Instagram grid */

.feedsGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
  margin-top: 20px;
}

.feedCard{
  background:#ffffff;
  padding:18px;
  border-radius:18px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.05);
}

.feedCard__top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}

.badge{
  font-size:.75rem;
  font-weight:600;
  background:#f0f3ff;
  padding:6px 12px;
  border-radius:999px;
}

.link{
  font-size:.8rem;
  font-weight:600;
  text-decoration:none;
  color:#0066ff;
}

.link:hover{
  text-decoration:underline;
}

/* CTA row under feeds */

.ctaRow{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:40px;
}