/* ================================================
   KALAALAYA — STYLESHEET
   ================================================ */

:root {
  --orange:      #C87137;
  --orange-dk:   #A05628;
  --orange-lt:   #E09565;
  --brown:       #5C3D2E;
  --brown-lt:    #7A5442;
  --cream:       #F5E6D3;
  --cream-dk:    #E8D2B5;
  --gold:        #D4A574;
  --sage:        #A8B8A8;
  --terra:       #B8694E;
  --text:        #3A2415;
  --text-mid:    #6B4A35;
  --white:       #FFFDF8;

  --fd: 'DM Serif Display', Georgia, serif;
  --fb: 'Outfit', system-ui, sans-serif;

  --wrap: 1200px;
  --sy: clamp(4.5rem, 8vw, 7rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --sh-sm: 0 2px 10px rgba(58,36,21,.08);
  --sh-md: 0 6px 24px rgba(58,36,21,.13);
  --sh-lg: 0 12px 48px rgba(58,36,21,.18);
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--fb);font-size:1rem;line-height:1.72;color:var(--text);background:var(--cream);overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:var(--fb);cursor:pointer;border:none;background:none}

/* ── Typography ── */
h1,h2,h3,h4{font-family:var(--fd);font-weight:400;line-height:1.18;color:var(--brown)}
h1{font-size:clamp(2.5rem,5.2vw,4rem)}
h2{font-size:clamp(1.9rem,3.6vw,3rem)}
h3{font-size:clamp(1.1rem,1.8vw,1.4rem)}
p{color:var(--text-mid);line-height:1.78}

/* ── Container ── */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 2rem}
@media(max-width:768px){.wrap{padding:0 1.25rem}}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.82rem 2rem;font-size:.92rem;font-weight:600;border-radius:6px;border:2px solid transparent;min-height:48px;transition:all .2s var(--ease);white-space:nowrap}
.btn-primary{background:var(--orange);color:var(--cream);border-color:var(--orange)}
.btn-primary:hover{background:var(--orange-dk);border-color:var(--orange-dk);transform:translateY(-2px);box-shadow:var(--sh-md)}
.btn-secondary{background:transparent;color:var(--orange);border-color:var(--orange)}
.btn-secondary:hover{background:var(--orange);color:var(--cream);transform:translateY(-2px);box-shadow:var(--sh-md)}
.btn-cream{background:var(--cream);color:var(--brown);border-color:var(--cream)}
.btn-cream:hover{background:var(--cream-dk);border-color:var(--cream-dk);transform:translateY(-2px);box-shadow:var(--sh-md)}
.btn-outline-cream{background:transparent;color:var(--cream);border-color:rgba(245,230,211,.55)}
.btn-outline-cream:hover{background:rgba(245,230,211,.12);border-color:var(--cream);transform:translateY(-2px)}

/* ── Navigation ── */
.nav{position:fixed;inset:0 0 auto 0;z-index:200;background:rgba(245,230,211,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(200,113,55,.1);transition:box-shadow .3s}
.nav.scrolled{background:rgba(245,230,211,.97);box-shadow:var(--sh-sm)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px;gap:1.5rem}
.nav-logo{display:flex;align-items:center;gap:.7rem;font-family:var(--fd);font-size:1.35rem;color:var(--brown);transition:opacity .2s}
.nav-logo:hover{opacity:.78}
.nav-logo img{width:38px;height:38px;object-fit:contain}
.nav-links{display:flex;align-items:center;gap:1.75rem}
.nav-links a{font-size:.875rem;font-weight:500;color:var(--text-mid);position:relative;padding-bottom:2px;transition:color .2s}
.nav-links a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1.5px;background:var(--orange);transition:width .22s ease}
.nav-links a:hover{color:var(--orange)}
.nav-links a:hover::after{width:100%}
.nav-burger{display:none;flex-direction:column;gap:5px;padding:.4rem;color:var(--brown)}
.nav-burger span{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;transition:all .25s}
@media(max-width:768px){
  .nav-links,.nav-cta{display:none}
  .nav-burger{display:flex}
  .nav-links.open,.nav-cta.open{display:flex}
  .nav-links.open{flex-direction:column;align-items:flex-start;position:absolute;top:72px;inset-inline:0;background:rgba(245,230,211,.98);padding:1.5rem 1.5rem 1rem;gap:1.1rem;border-bottom:1px solid rgba(200,113,55,.12)}
  .nav-cta.open{position:absolute;top:calc(72px + var(--nav-links-h,0px));inset-inline:0;background:rgba(245,230,211,.98);padding:0 1.5rem 1.5rem;border-bottom:1px solid rgba(200,113,55,.12)}
}

/* ── HERO ── */
.hero{min-height:100vh;padding-top:72px;background:var(--cream);display:flex;align-items:center;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 72% 48%,rgba(200,113,55,.07) 0%,transparent 70%),radial-gradient(ellipse 50% 60% at 18% 78%,rgba(212,165,116,.09) 0%,transparent 55%);pointer-events:none}
.hero-inner{display:grid;grid-template-columns:56% 44%;align-items:center;gap:2rem;padding:4rem 2rem}
.hero-col{z-index:2}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:1.2rem}
.eyebrow-dot{width:5px;height:5px;background:var(--orange);border-radius:50%}
.hero h1{line-height:1.13;margin-bottom:1.4rem;color:var(--brown)}
.hero h1 em{font-style:italic;color:var(--orange)}
.hero-sub{font-size:1.05rem;line-height:1.82;max-width:510px;margin-bottom:2.25rem;color:var(--text-mid)}
.hero-pillars{display:flex;flex-direction:column;gap:.9rem;margin-bottom:2.5rem}
.h-pillar{display:flex;align-items:flex-start;gap:.875rem}
.h-pillar-ic{flex-shrink:0;width:34px;height:34px;background:rgba(200,113,55,.11);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:.1rem}
.h-pillar-ic svg{width:16px;height:16px;stroke:var(--orange);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.h-pillar-tx strong{display:block;font-size:.875rem;font-weight:600;color:var(--brown)}
.h-pillar-tx span{font-size:.82rem;color:var(--text-mid)}
.hero-ctas{display:flex;gap:.875rem;flex-wrap:wrap}
.hero-mandala-wrap{display:flex;align-items:center;justify-content:center;z-index:2}
.hero-mandala-wrap svg{width:min(460px,100%);height:auto;overflow:visible}

@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:2.5rem;padding:3rem 1.5rem}
  .hero-mandala-wrap{order:-1}
  .hero-mandala-wrap svg{width:min(340px,80vw)}
}
@media(max-width:600px){
  .hero h1{font-size:2.2rem}
  .hero-ctas{flex-direction:column}
  .btn{width:100%;justify-content:center}
}

/* ── MISSION ── */
.mission{background:var(--white);padding:var(--sy) 0;position:relative}
.mission-center{text-align:center;max-width:760px;margin:0 auto}
.mission-center h2{margin-bottom:1.25rem}
.mission-body{font-size:1.08rem;line-height:1.88;max-width:680px;margin:0 auto 3.5rem}
.m-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;text-align:left;margin-bottom:3rem}
.m-pillar{padding:2rem 1.75rem;background:var(--cream);border-radius:12px;position:relative;transition:box-shadow .3s,transform .3s}
.m-pillar:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.m-num{font-family:var(--fd);font-size:3.5rem;line-height:1;color:rgba(200,113,55,.15);margin-bottom:.6rem;display:block}
.m-pillar h3{font-family:var(--fb);font-weight:600;font-size:.95rem;color:var(--brown);margin-bottom:.35rem;line-height:1.4}
.m-pillar p{font-size:.85rem;color:var(--text-mid);line-height:1.65}
.m-cta-block{display:flex;flex-direction:column;align-items:center;gap:.6rem}
.m-cta-block p{font-size:.88rem;color:var(--text-mid)}
@media(max-width:720px){.m-pillars{grid-template-columns:1fr}}

/* ── VISION ── */
.vision{background:var(--brown);padding:var(--sy) 0;position:relative;overflow:hidden}
.vision::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 80% 20%,rgba(212,165,116,.07) 0%,transparent 55%),radial-gradient(ellipse 50% 60% at 10% 80%,rgba(200,113,55,.06) 0%,transparent 45%);pointer-events:none}
.vision .section-label{color:var(--gold);opacity:.9}
.vision h2{color:var(--cream);margin-bottom:1rem}
.vision-sub{font-size:1rem;color:rgba(245,230,211,.65);margin-bottom:3rem;max-width:560px}
.phase-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.25rem;position:relative}
.phase-grid::before{content:'';position:absolute;top:36px;left:5%;right:5%;height:1px;background:linear-gradient(90deg,transparent,rgba(212,165,116,.25) 20%,rgba(212,165,116,.25) 80%,transparent);pointer-events:none}
.phase-card{padding:1.5rem 1.25rem;background:rgba(255,255,255,.04);border:1px solid rgba(212,165,116,.13);border-radius:12px;transition:all .3s ease;position:relative}
.phase-card:hover{background:rgba(255,255,255,.08);border-color:rgba(212,165,116,.32);transform:translateY(-4px);box-shadow:0 14px 36px rgba(0,0,0,.22)}
.phase-card.active{background:rgba(200,113,55,.18);border-color:rgba(200,113,55,.45)}
.phase-card.active:hover{background:rgba(200,113,55,.24)}
.phase-hd{display:flex;align-items:center;gap:.5rem;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(212,165,116,.75);margin-bottom:1rem}
.phase-card.active .phase-hd{color:var(--orange-lt)}
.phase-dot{width:7px;height:7px;border-radius:50%;background:rgba(212,165,116,.6);flex-shrink:0}
.phase-card.active .phase-dot{background:var(--orange);box-shadow:0 0 0 3px rgba(200,113,55,.3)}
.phase-icon{width:40px;height:40px;margin-bottom:.875rem}
.phase-name{font-family:var(--fd);font-size:1.05rem;color:var(--cream);margin-bottom:.35rem;line-height:1.2}
.phase-card.active .phase-name{color:var(--gold)}
.phase-desc{font-size:.8rem;line-height:1.62;color:rgba(245,230,211,.55)}
.phase-badge{display:inline-block;margin-top:.75rem;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.22rem .6rem;background:rgba(200,113,55,.28);color:var(--orange-lt);border-radius:20px}
@media(max-width:920px){.phase-grid{grid-template-columns:repeat(2,1fr)}.phase-grid::before{display:none}}
@media(max-width:500px){.phase-grid{grid-template-columns:1fr}}

/* ── ARTBOT ── */
.artbot{background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url('assets/artbot_bg.png') no-repeat center center; background-size: cover; padding: clamp(8rem, 15vw, 12rem) 0}
.artbot-inner{width:100%;display:block}
.artbot-vis{display:flex;align-items:center;justify-content:center}
.ganu-svg-wrap{width:min(340px,100%);position:relative}
.artbot-title-vertical {
  color: #ffffff !important;
  text-align: left;
  font-size: clamp(2.4rem, 4.8vw, 5.6rem);
  line-height: 1.4;
  margin-left: -276px;
  margin-right: auto;
  max-width: 50%;
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0,0,0,0.15);
}
.artbot-title-vertical em {
  color: #ffffff !important;
  font-style: italic;
}
.artbot-ctas {
  display: flex;
  gap: .875rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8rem;
}
@media (max-width: 800px) {
  .artbot {
    padding: 5rem 0;
  }
  .artbot-title-vertical {
    margin-left: 0 !important;
    max-width: 100% !important;
    text-align: center !important;
    font-size: clamp(2rem, 6vw, 2.8rem) !important;
  }
  .artbot-ctas {
    margin-top: 4rem !important;
    flex-direction: column;
    align-items: center;
  }
  .artbot-ctas .btn {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }
}

/* ── TEAM ── */
.team{background:var(--white);padding:var(--sy) 0}
.team-hd{text-align:center;margin-bottom:3rem}
.team-hd h2{margin-bottom:.75rem}
.team-hd p{font-size:1.05rem;max-width:520px;margin:0 auto}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-bottom:2.5rem}
.team-card{text-align:center;padding:2rem 1.25rem 1.5rem;background:var(--cream);border-radius:14px;border:1px solid rgba(200,113,55,.08);transition:all .3s ease}
.team-card:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:rgba(200,113,55,.2)}
.t-photo{width:96px;height:96px;border-radius:50%;margin:0 auto 1.2rem;background:linear-gradient(135deg,var(--cream-dk),var(--gold));border:3px solid var(--orange);display:flex;align-items:center;justify-content:center;overflow:hidden}
.t-photo svg{width:48px;height:48px;opacity:.45}
.t-name{font-family:var(--fd);font-size:1.1rem;color:var(--brown);margin-bottom:.18rem}
.t-title{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);margin-bottom:.65rem}
.t-mission{font-size:.85rem;font-style:italic;color:var(--text-mid);line-height:1.5;margin-bottom:.9rem}
.t-social{display:flex;gap:.6rem;justify-content:center}
.t-social a{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(200,113,55,.1);color:var(--orange);transition:all .2s}
.t-social a:hover{background:var(--orange);color:var(--cream)}
.t-social a svg{width:13px;height:13px;fill:currentColor}
.team-footer{text-align:center}
.team-footer p{font-size:.9rem;color:var(--text-mid);margin-top:.65rem;max-width:440px;margin-left:auto;margin-right:auto}
@media(max-width:900px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.team-grid{grid-template-columns:1fr;max-width:300px;margin-left:auto;margin-right:auto}}

/* ── CTA SECTION ── */
.cta-sec{background:var(--orange);padding:var(--sy) 0;position:relative;overflow:hidden}
.cta-sec::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 55% 70% at 25% 50%,rgba(245,230,211,.1) 0%,transparent 60%);pointer-events:none}
.cta-inner{text-align:center;position:relative}
.cta-inner h2{color:var(--cream);margin-bottom:.75rem}
.cta-sub{font-size:1.05rem;color:rgba(245,230,211,.82);max-width:480px;margin:0 auto 2.5rem}
.cta-form{display:flex;gap:.75rem;max-width:460px;margin:0 auto 1.25rem}
.cta-form input{flex:1;padding:.82rem 1.2rem;font-family:var(--fb);font-size:.93rem;background:rgba(245,230,211,.18);border:1.5px solid rgba(245,230,211,.38);border-radius:6px;color:var(--cream);min-height:48px;outline:none;transition:border-color .2s}
.cta-form input::placeholder{color:rgba(245,230,211,.55)}
.cta-form input:focus{border-color:rgba(245,230,211,.8)}
.cta-or{color:rgba(245,230,211,.5);font-size:.85rem;margin:1.1rem 0}
.cta-btns{display:flex;gap:.875rem;justify-content:center;flex-wrap:wrap}
.cta-success{display:none;background:rgba(245,230,211,.18);border:1px solid rgba(245,230,211,.35);border-radius:8px;padding:.8rem 1.5rem;color:var(--cream);font-size:.93rem;max-width:460px;margin:.75rem auto 0;line-height:1.55}
@media(max-width:480px){.cta-form{flex-direction:column}.cta-form .btn{width:100%;justify-content:center}}

/* ── FOOTER ── */
.footer{background:var(--brown);padding:4rem 0 2rem}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:3rem;padding-bottom:2.5rem;border-bottom:1px solid rgba(245,230,211,.1);margin-bottom:2rem}
.f-logo{display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem}
.f-logo img{width:34px;height:34px;object-fit:contain}
.f-logo span{font-family:var(--fd);font-size:1.2rem;color:var(--cream)}
.f-tagline{font-size:.86rem;line-height:1.72;color:rgba(245,230,211,.55);margin-bottom:1.2rem;max-width:240px}
.f-social{display:flex;gap:.6rem}
.f-social a{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(245,230,211,.07);color:rgba(245,230,211,.55);transition:all .2s}
.f-social a:hover{background:var(--orange);color:var(--cream)}
.f-social a svg{width:14px;height:14px;fill:currentColor}
.f-nav h4{font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--cream);margin-bottom:.9rem}
.f-nav ul{display:flex;flex-direction:column;gap:.55rem}
.f-nav a{font-size:.875rem;color:rgba(245,230,211,.55);transition:color .2s}
.f-nav a:hover{color:var(--cream)}
.footer-btm{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.f-copy{font-size:.78rem;color:rgba(245,230,211,.35)}
.f-legal{display:flex;gap:1.5rem}
.f-legal a{font-size:.78rem;color:rgba(245,230,211,.35);transition:color .2s}
.f-legal a:hover{color:rgba(245,230,211,.65)}
@media(max-width:768px){.footer-top{grid-template-columns:1fr;gap:2rem}.footer-btm{flex-direction:column;align-items:flex-start}}

/* ── Section labels ── */
.section-label{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);display:block;margin-bottom:.7rem}

/* ── Scroll Reveal ── */
.rv{opacity:0;transform:translateY(30px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-l{opacity:0;transform:translateX(-26px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.rv-l.in{opacity:1;transform:none}
.rv-r{opacity:0;transform:translateX(26px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.rv-r.in{opacity:1;transform:none}
.rv-sc{opacity:0;transform:scale(.9);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv-sc.in{opacity:1;transform:scale(1)}

/* stagger delay helpers */
.d1{transition-delay:.05s}.d2{transition-delay:.12s}.d3{transition-delay:.19s}.d4{transition-delay:.26s}.d5{transition-delay:.33s}

/* ── Hero load animations ── */
.ha{opacity:0;transform:translateY(20px)}
.ha.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}

/* ── Mandala rotation ── */
@keyframes cwSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes ccwSpin{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}
.m-outer{animation:cwSpin 90s linear infinite;transform-origin:230px 230px}
.m-mid{animation:ccwSpin 65s linear infinite;transform-origin:230px 230px}

@media(prefers-reduced-motion:reduce){.m-outer,.m-mid{animation:none}}