/* ==========================================================
   AKSHARA SCHOOL — DESIGN SYSTEM
   ========================================================== */

:root{
  --ivory:#F7F6EA;
  --soft-white:#FDFDF7;
  --sky:#54BEE8;
  --sky-pale:#DCF2FA;
  --green:#3FBE86;
  --green-deep:#2C8C63;
  --green-pale:#D2F0DE;
  --sunflower:#FFC630;
  --sunflower-pale:#FFEFC4;
  --coral:#2FB07C;
  --coral-pale:#D0F1DF;
  --navy:#17281F;
  --navy-soft:#233A2C;
  --gold:#D1A15A;
  --ink:#2A2620;
  --ink-soft:#5C574C;
  --yt:#FF0033;
  --ig-start:#FEDA77;
  --ig-mid:#F58529;
  --ig-end:#DD2A7B;
  --fb:#1877F2;

  --display:'Fraunces', serif;
  --body:'Plus Jakarta Sans', sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:var(--ivory);
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--display); margin:0; font-weight:500;}
p{margin:0;}
a{text-decoration:none; color:inherit;}
button{font-family:inherit; border:none; background:none; cursor:pointer;}
img{max-width:100%; display:block;}
::selection{background:var(--sunflower); color:var(--navy);}

.container{max-width:1160px; margin:0 auto; padding:0 clamp(20px,5vw,64px);}

.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal.in-view{opacity:1; transform:translateY(0);}
.reveal.d1{transition-delay:.1s;} .reveal.d2{transition-delay:.2s;}
.reveal.d3{transition-delay:.3s;} .reveal.d4{transition-delay:.4s;}
.reveal.d5{transition-delay:.5s;} .reveal.d6{transition-delay:.6s;}

.eyebrow{
  font-size:.8rem; letter-spacing:2.5px; text-transform:uppercase; font-weight:600;
  margin-bottom:16px; display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{content:''; width:26px; height:1px; background:currentColor; opacity:.55;}
.section-title{font-size:clamp(2rem,4.2vw,3.1rem); line-height:1.15; color:var(--navy);}
.section-sub{margin-top:16px; color:var(--ink-soft); font-size:1.02rem; line-height:1.65; max-width:52ch;}

.btn{
  position:relative; padding:15px 30px; border-radius:100px; font-weight:600; font-size:.95rem;
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .3s var(--ease);
}
.btn-primary{background:linear-gradient(135deg, var(--green), var(--sky)); color:var(--soft-white); box-shadow:0 12px 28px rgba(63,190,134,.32);}
.btn-primary:hover{transform:translateY(-3px) scale(1.02); box-shadow:0 16px 34px rgba(63,190,134,.42);}
.btn-ghost{background:transparent; color:var(--navy); border:1.5px solid rgba(27,42,58,.25);}
.btn-ghost:hover{border-color:var(--navy); transform:translateY(-3px);}
.btn-ghost.light{color:var(--soft-white); border-color:rgba(255,253,248,.35);}
.btn-ghost.light:hover{border-color:var(--soft-white);}

/* ---------- placeholder image component ---------- */
.ph{
  position:relative; overflow:hidden; border-radius:20px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--sky-pale),var(--green-pale));
  isolation:isolate;
}
.ph::before{
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(circle at 20% 20%, rgba(255,255,255,.5) 0, transparent 40%),
                   radial-gradient(circle at 80% 75%, rgba(255,255,255,.35) 0, transparent 45%);
  z-index:0;
}
.ph img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:1; border-radius:inherit;
}
.ph .ph-icon{font-size:2.2rem; opacity:.9; z-index:2; pointer-events:none;}
.ph .ph-label{
  position:absolute; bottom:16px; left:16px; z-index:3;
  font-size:.72rem; letter-spacing:1.5px; text-transform:uppercase; font-weight:600;
  color:var(--navy); background:rgba(255,253,248,.75); backdrop-filter:blur(6px);
  padding:7px 14px; border-radius:100px;
}
.ph.tone-coral{background:linear-gradient(135deg,var(--coral-pale),var(--sunflower-pale));}
.ph.tone-navy{background:linear-gradient(135deg,#233A2C,#17281F);}
.ph.tone-navy .ph-label{background:rgba(255,253,248,.15); color:var(--soft-white);}
.ph.tone-navy .ph-icon{color:var(--soft-white);}

/* ============================================================
   SOCIAL BUTTONS (used in contact, footer)
   ============================================================ */
.social-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  transition:transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
  color:#fff;
}
.social-btn svg{width:22px; height:22px;}
.social-yt{background:var(--yt);}
.social-yt:hover{transform:translateY(-3px) scale(1.08); background:#e6002b;}
.social-ig{
  background:linear-gradient(45deg,var(--ig-start),var(--ig-mid) 35%,var(--ig-end) 70%,#8134AF);
}
.social-ig:hover{transform:translateY(-3px) scale(1.08);}
.social-fb{background:var(--fb);}
.social-fb:hover{transform:translateY(-3px) scale(1.08); background:#145ec2;}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px clamp(20px,5vw,64px);
  transition:background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.nav.scrolled{
  background:rgba(255,253,248,.85); backdrop-filter:blur(14px);
  padding:14px clamp(20px,5vw,64px); box-shadow:0 8px 30px rgba(27,42,58,.06);
}
.nav-logo{
  font-family:var(--display); font-size:1.35rem; font-weight:600; color:var(--navy);
  display:flex; align-items:center; gap:10px;
}
.nav-logo .dot{width:9px; height:9px; border-radius:0 50% 50% 50%; background:var(--green); display:inline-block; transform:rotate(45deg);}
.nav-links{display:flex; gap:30px; font-size:.9rem; font-weight:500; color:var(--ink-soft);}
.nav-links a{position:relative; padding-bottom:4px;}
.nav-links a::after{content:''; position:absolute; bottom:0; left:0; width:0; height:1.5px; background:var(--coral); transition:width .3s var(--ease);}
.nav-links a:hover::after{width:100%;}
.nav-links a:hover{color:var(--navy);}
.nav-cta{background:var(--navy); color:var(--soft-white); padding:11px 22px; border-radius:100px; font-size:.86rem; font-weight:600;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);}
.nav-cta:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(27,42,58,.25);}
.nav-toggle{display:none; flex-direction:column; gap:5px; cursor:pointer; z-index:210;}
.nav-toggle span{width:24px; height:2px; background:var(--navy); border-radius:2px; transition:.3s var(--ease);}

.scroll-progress{position:fixed; top:0; left:0; height:3px; background:var(--coral); z-index:300; width:0%; transition:width .1s linear;}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100vh; display:flex; flex-direction:column;
  justify-content:center; align-items:center; text-align:center;
  padding:130px 24px 90px;
  background:radial-gradient(ellipse 70% 45% at 78% 12%, rgba(255,246,214,.65) 0%, transparent 55%),
             linear-gradient(180deg, #BFE3F5 0%, #DCEEF7 30%, var(--sky-pale) 55%, #E9F5EA 80%, var(--ivory) 100%);
  overflow:hidden;
}
.sunrays{
  position:absolute; top:5%; right:5%; width:420px; height:420px;
  background:radial-gradient(circle, rgba(255,214,110,.55) 0%, rgba(255,214,110,.28) 40%, transparent 72%);
  border-radius:50%;
  animation:sunglow 6s ease-in-out infinite;
}
@keyframes sunglow{0%,100%{opacity:.85; transform:scale(1);} 50%{opacity:1; transform:scale(1.06);}}
.cloud{position:absolute; opacity:.9; filter:drop-shadow(0 10px 20px rgba(140,170,190,.15)); animation:drift linear infinite;}
@keyframes drift{from{transform:translateX(-10vw);} to{transform:translateX(110vw);}}
.bird{position:absolute; animation:birdfly linear infinite;}
@keyframes birdfly{from{transform:translate(-5vw,0);} to{transform:translate(105vw,-40px);}}
.particle{position:absolute; border-radius:50%; background:radial-gradient(circle, rgba(255,231,168,.9), rgba(255,231,168,0)); animation:floatup ease-in-out infinite;}
@keyframes floatup{0%{transform:translateY(0) translateX(0); opacity:0;} 10%{opacity:.9;} 90%{opacity:.5;} 100%{transform:translateY(-90vh) translateX(20px); opacity:0;}}

.cartoon-sun{position:absolute; top:7%; right:7%; width:130px; height:130px; z-index:1; animation:sunbob 6s ease-in-out infinite;}
@keyframes sunbob{0%,100%{transform:translateY(0) rotate(-3deg);} 50%{transform:translateY(-10px) rotate(3deg);}}

.float-icon{position:absolute; font-size:1.6rem; opacity:0; animation:floatIconUp linear infinite; pointer-events:none; z-index:1;}
@keyframes floatIconUp{
  0%{transform:translateY(15vh) translateX(0) rotate(-4deg); opacity:0;}
  8%{opacity:.9;}
  92%{opacity:.7;}
  100%{transform:translateY(-115vh) translateX(30px) rotate(4deg); opacity:0;}
}

.hero-eyebrow{font-size:.82rem; letter-spacing:2.5px; text-transform:uppercase; color:var(--gold); font-weight:600; margin-bottom:22px;
  display:flex; align-items:center; gap:10px; z-index:2; opacity:0; animation:riseIn .9s var(--ease) .2s forwards;}
.hero-eyebrow::before,.hero-eyebrow::after{content:''; width:28px; height:1px; background:var(--gold); opacity:.6;}
.hero h1{font-size:clamp(2.6rem,6.2vw,5.4rem); line-height:1.05; color:var(--navy); max-width:16ch; z-index:2;}
.hero h1 .line{display:block; overflow:hidden;}
.hero h1 .line span{display:inline-block; transform:translateY(110%); animation:riseIn .9s var(--ease) forwards;}
.hero h1 .line:nth-child(1) span{animation-delay:.4s;}
.hero h1 .line:nth-child(2) span{animation-delay:.6s; color:var(--coral); font-style:italic;}
@keyframes riseIn{to{transform:translateY(0); opacity:1;}}
.hero-sub{margin-top:26px; font-size:clamp(1rem,1.6vw,1.2rem); color:var(--ink-soft); max-width:36ch; line-height:1.6; z-index:2;
  opacity:0; animation:riseIn .9s var(--ease) .9s forwards;}
.hero-ctas{display:flex; gap:16px; margin-top:44px; flex-wrap:wrap; justify-content:center; z-index:2;
  opacity:0; animation:riseIn .9s var(--ease) 1.1s forwards;}
.scroll-cue{position:absolute; bottom:34px; left:50%; transform:translateX(-50%); font-size:.75rem; color:var(--ink-soft);
  letter-spacing:1.5px; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:8px; z-index:2;}
.scroll-cue .line{width:1px; height:34px; background:linear-gradient(var(--ink-soft), transparent); animation:pulse 2s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:.3;} 50%{opacity:1;}}

/* ============================================================
   VINE DIVIDER
   ============================================================ */
.vine-divider{position:relative; height:120px; background:var(--ivory);}
.vine-divider.on-navy{background:var(--navy);}
.vine-divider.on-white{background:var(--soft-white);}
.vine-divider svg{position:absolute; top:0; left:0; width:100%; height:100%;}
.vine-path{stroke:var(--green); stroke-width:2; fill:none; stroke-linecap:round; stroke-dasharray:1400; stroke-dashoffset:1400;
  transition:stroke-dashoffset 1.4s var(--ease);}
.vine-divider.on-navy .vine-path{stroke:var(--sunflower);}
.vine-divider.revealed .vine-path{stroke-dashoffset:0;}
.leaf{opacity:0; transform:scale(.4); transform-origin:center; transition:opacity .6s var(--ease), transform .6s var(--ease);}
.vine-divider.revealed .leaf{opacity:1; transform:scale(1);}
.leaf:nth-child(2){transition-delay:.5s;} .leaf:nth-child(3){transition-delay:.8s;}
.leaf:nth-child(4){transition-delay:1.1s;} .leaf:nth-child(5){transition-delay:1.4s;}

/* ============================================================
   ABOUT / GARDEN WALK
   ============================================================ */
.about{position:relative; padding:60px 24px 140px; background:var(--ivory); overflow:hidden;}
.about-head{max-width:640px; margin:0 auto 90px; text-align:center;}
.about .eyebrow{color:var(--green); justify-content:center;}
.about .eyebrow::before{display:none;}
.journey{max-width:1000px; margin:0 auto; position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.journey::before{content:''; position:absolute; top:38px; left:6%; right:6%; height:2px;
  background:repeating-linear-gradient(90deg, var(--gold) 0 8px, transparent 8px 16px); opacity:.5; z-index:0;}
.stage{position:relative; z-index:1; text-align:center;}
.stage-icon{width:76px; height:76px; margin:0 auto 22px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; background:var(--soft-white); box-shadow:0 12px 30px rgba(27,42,58,.08); animation:bob 5s ease-in-out infinite;}
.stage:nth-child(2) .stage-icon{background:var(--sky-pale); animation-delay:.3s;}
.stage:nth-child(3) .stage-icon{background:var(--green-pale); animation-delay:.6s;}
.stage:nth-child(4) .stage-icon{background:#FDEBDB; animation-delay:.9s;}
@keyframes bob{0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);}}
.stage h3{font-size:1.2rem; color:var(--navy); margin-bottom:8px; font-weight:500;}
.stage p{font-size:.9rem; color:var(--ink-soft); line-height:1.55;}
.butterfly{position:absolute; animation:flutter 14s ease-in-out infinite; opacity:.85;}
@keyframes flutter{0%{transform:translate(0,0) rotate(0deg);} 25%{transform:translate(60px,-40px) rotate(8deg);}
  50%{transform:translate(120px,10px) rotate(-6deg);} 75%{transform:translate(180px,-30px) rotate(6deg);} 100%{transform:translate(240px,0) rotate(0deg);}}

/* ============================================================
   ACADEMICS / LEARNING JOURNEY
   ============================================================ */
.academics{position:relative; background:var(--navy); padding:120px 24px; overflow:hidden; color:var(--soft-white);}
.academics::before{content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 50% at 80% 20%, rgba(242,190,78,.12), transparent),
             radial-gradient(ellipse 50% 40% at 15% 80%, rgba(95,158,118,.15), transparent);}
.star{position:absolute; background:var(--sunflower); border-radius:50%; animation:twinkle ease-in-out infinite;}
@keyframes twinkle{0%,100%{opacity:.15; transform:scale(.8);} 50%{opacity:.9; transform:scale(1.15);}}
.academics-inner{position:relative; z-index:2; max-width:1000px; margin:0 auto;}
.academics-head{max-width:560px; margin-bottom:80px;}
.academics .eyebrow{color:var(--sunflower);}
.academics h2{color:var(--soft-white);}
.path-track{position:relative; padding-left:34px;}
.path-track::before{content:''; position:absolute; left:9px; top:10px; bottom:10px; width:2px;
  background:linear-gradient(var(--sunflower), var(--coral), var(--green)); opacity:.4;}
.path-item{position:relative; padding:28px 0; display:flex; align-items:center; gap:28px; opacity:.35; transition:opacity .5s var(--ease);}
.path-item.active{opacity:1;}
.path-item::before{content:''; position:absolute; left:-34px; width:20px; height:20px; border-radius:50%;
  background:var(--navy); border:2px solid var(--sunflower); transition:all .4s var(--ease);}
.path-item.active::before{background:var(--sunflower); box-shadow:0 0 0 6px rgba(242,190,78,.18);}
.path-item h3{font-size:1.4rem; font-weight:500; min-width:150px;}
.path-item p{font-size:.92rem; color:rgba(255,253,248,.65); max-width:44ch; line-height:1.6;}

/* ============================================================
   STUDENT LIFE / FESTIVAL OF LEARNING (7 cards)
   ============================================================ */
.student-life{position:relative; padding:140px 24px; background:linear-gradient(180deg,var(--sunflower-pale),var(--ivory)); overflow:hidden;}
.student-life .eyebrow{color:var(--coral); justify-content:center;}
.student-life .eyebrow::before{display:none;}
.sl-head{max-width:600px; margin:0 auto 70px; text-align:center;}
.sl-grid{max-width:900px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.sl-card{background:var(--soft-white); border-radius:22px; padding:32px 22px; text-align:center; box-shadow:0 14px 34px rgba(27,42,58,.06);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);}
.sl-card:hover{transform:translateY(-8px); box-shadow:0 22px 44px rgba(27,42,58,.12);}
.sl-icon{font-size:2.1rem; margin-bottom:16px; display:inline-block; animation:bob 4.5s ease-in-out infinite;}
.sl-card h4{font-size:1.05rem; color:var(--navy); margin-bottom:6px; font-weight:500;}
.sl-card p{font-size:.85rem; color:var(--ink-soft); line-height:1.5;}
.balloon{position:absolute; border-radius:50% 50% 50% 50%/45% 45% 55% 55%; animation:rise linear infinite; opacity:.85;}
.balloon::after{content:''; position:absolute; bottom:-22px; left:50%; width:1px; height:22px; background:rgba(27,42,58,.25);}
@keyframes rise{0%{transform:translateY(10vh) translateX(0) rotate(-3deg);} 50%{transform:translateY(-40vh) translateX(20px) rotate(3deg);}
  100%{transform:translateY(-95vh) translateX(-10px) rotate(-3deg);}}
.kite{position:absolute; animation:sway ease-in-out infinite;}
@keyframes sway{0%,100%{transform:rotate(-6deg) translateY(0);} 50%{transform:rotate(6deg) translateY(-14px);}}

/* ============================================================
   GALLERY / FLOATING MEMORIES
   ============================================================ */
.gallery{padding:140px 24px; background:var(--soft-white);}
.gallery .eyebrow{color:var(--sky); }
.gallery-head{max-width:600px; margin-bottom:50px;}
.masonry{columns:4 220px; column-gap:20px;}
.masonry-item{break-inside:avoid; margin-bottom:20px; border-radius:18px; overflow:hidden; position:relative; cursor:pointer;}
.masonry-item .ph{width:100%; transition:transform .6s var(--ease);}
.masonry-item:nth-child(4n+1) .ph{aspect-ratio:3/4;}
.masonry-item:nth-child(4n+2) .ph{aspect-ratio:1/1;}
.masonry-item:nth-child(4n+3) .ph{aspect-ratio:4/3;}
.masonry-item:nth-child(4n+4) .ph{aspect-ratio:3/4;}
.masonry-item:hover .ph img{transform:scale(1.06);}
.ph-desc{
  position:absolute; inset:0; z-index:4; display:flex; align-items:flex-end; padding:18px;
  background:linear-gradient(180deg, transparent 40%, rgba(27,42,58,.82) 100%);
  opacity:0; transition:opacity .4s var(--ease);
}
.masonry-item:hover .ph-desc{opacity:1;}
.ph-desc p{color:var(--soft-white); font-size:.85rem; line-height:1.5;}

/* ============================================================
   PRINCIPAL — Library of Inspiration (Expanded)
   ============================================================ */
.principal{position:relative; padding:140px 24px;
  background:linear-gradient(135deg,#233A2C,#17281F 60%,#122019); color:var(--soft-white); overflow:hidden;}
.principal::before{content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(115deg, rgba(242,190,78,.05) 0 2px, transparent 2px 60px);
  animation:rayshift 20s linear infinite;}
@keyframes rayshift{from{transform:translateX(0);} to{transform:translateX(120px);}}
.dust{position:absolute; width:3px; height:3px; border-radius:50%; background:rgba(242,190,78,.6); animation:floatup ease-in-out infinite;}
.principal-inner{position:relative; z-index:2; max-width:1180px; margin:0 auto; display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; align-items:start;}
.principal-portrait .ph{aspect-ratio:3/4; border-radius:24px; position:sticky; top:120px;}
.principal-copy .eyebrow{color:var(--sunflower);}
.principal-copy h2{font-size:clamp(1.8rem,3.6vw,2.6rem); color:var(--soft-white); margin-bottom:6px;}
.principal-copy .role{font-size:1rem; color:var(--sunflower); font-weight:600; margin-bottom:22px;}
.principal-copy .quote{font-family:var(--display); font-style:italic; font-size:1.25rem; line-height:1.6; color:rgba(255,253,248,.9); margin-bottom:26px;}
.principal-copy .bio{font-size:.96rem; color:rgba(255,253,248,.78); line-height:1.7; margin-bottom:18px;}
.principal-copy .exp{font-size:.92rem; color:rgba(255,253,248,.6); margin-bottom:26px;}
.qual-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:24px 0 26px;}
.qual{display:flex; gap:12px; padding:14px; background:rgba(255,253,248,.05); border:1px solid rgba(255,253,248,.12); border-radius:14px; align-items:flex-start;}
.qual-icon{font-size:1.4rem;}
.qual strong{display:block; font-size:.92rem; color:var(--soft-white); margin-bottom:2px;}
.qual span{font-size:.78rem; color:rgba(255,253,248,.6); line-height:1.4;}
.focus-tags{display:flex; flex-wrap:wrap; gap:10px;}
.focus-tags span{font-size:.8rem; padding:8px 16px; border-radius:100px; border:1px solid rgba(255,253,248,.25); color:rgba(255,253,248,.85);}
.signature{margin-top:30px; font-family:'Fraunces'; font-style:italic; font-size:1.5rem; color:var(--sunflower); opacity:0;
  animation:riseIn 1s var(--ease) .6s forwards;}

/* ============================================================
   WHY AKSHARA / PROOF & TRUST
   ============================================================ */
.why{padding:120px 24px; background:var(--ivory); text-align:center;}
.why .eyebrow{color:var(--green); justify-content:center;} .why .eyebrow::before{display:none;}
.why-head{max-width:600px; margin:0 auto 60px;}
.stats{max-width:900px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:30px;}
.stat h3{font-size:clamp(2rem,4vw,3rem); color:var(--navy); font-weight:600;}
.stat-icon{font-size:1.6rem; margin-bottom:8px; opacity:.85;}
.stat p{margin-top:6px; font-size:.86rem; color:var(--ink-soft); letter-spacing:.3px;}

/* ============================================================
   CONTACT — Sunset Garden (Big Map)
   ============================================================ */
.contact{position:relative; padding:140px 24px; overflow:hidden;
  background:linear-gradient(180deg,#FBE3C7,#F7D9C9 45%,var(--ivory));}
.contact .eyebrow{color:var(--coral);}
.contact-inner{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1fr 1.2fr; gap:60px; position:relative; z-index:2; align-items:start;}
.contact-form{background:rgba(255,253,248,.65); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.5);
  border-radius:26px; padding:38px; box-shadow:0 24px 60px rgba(27,42,58,.08);}
.field{position:relative; margin-bottom:26px;}
.field input, .field textarea, .field select{
  width:100%; padding:16px 4px 8px; border:none; border-bottom:1.5px solid rgba(27,42,58,.2); background:transparent;
  font-family:var(--body); font-size:.98rem; color:var(--ink); outline:none; transition:border-color .3s var(--ease);
}
.field textarea{resize:none; min-height:70px;}
.field label{position:absolute; left:4px; top:16px; font-size:.98rem; color:var(--ink-soft); pointer-events:none;
  transition:all .25s var(--ease);}
.field input:focus, .field textarea:focus, .field select:focus{border-color:var(--coral);}
.field input:focus ~ label, .field input:not(:placeholder-shown) ~ label,
.field textarea:focus ~ label, .field textarea:not(:placeholder-shown) ~ label,
.field.filled label{
  top:-2px; font-size:.72rem; color:var(--coral); letter-spacing:.5px; text-transform:uppercase;
}
.form-success{display:none; align-items:center; gap:14px; padding:16px; background:var(--green-pale); border-radius:14px; margin-top:14px; font-size:.9rem; color:#2E5A40;}
.form-success.show{display:flex;}
.plane-icon{font-size:1.3rem; animation:planefly 1.2s var(--ease);}
@keyframes planefly{0%{transform:translate(-30px,10px) rotate(-10deg); opacity:0;} 100%{transform:translate(0,0) rotate(0); opacity:1;}}

.map-frame{
  width:100%; aspect-ratio:4/3; border-radius:24px; overflow:hidden;
  box-shadow:0 24px 60px rgba(27,42,58,.18); border:4px solid #fff;
  background:var(--soft-white);
}
.contact-details{margin-top:24px;}
.contact-details p{font-size:.96rem; color:var(--ink-soft); line-height:1.7;}
.contact-details strong{color:var(--navy);}
.contact-details a{color:var(--coral); font-weight:500;}
.contact-details a:hover{text-decoration:underline;}
.contact-social{display:flex; gap:14px; margin-top:18px;}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{position:relative; background:var(--navy); color:rgba(255,253,248,.7); padding:80px 24px 30px;}
.footer-inner{max-width:1160px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:50px; padding-bottom:50px;
  border-bottom:1px solid rgba(255,253,248,.12);}
.footer-logo{font-family:var(--display); font-size:1.4rem; color:var(--soft-white); margin-bottom:14px;}
.footer p{font-size:.88rem; line-height:1.7;}
.footer h5{color:var(--soft-white); font-size:.85rem; letter-spacing:1px; text-transform:uppercase; margin-bottom:18px; font-weight:600;}
.footer ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px;}
.footer ul a{font-size:.9rem; transition:color .3s var(--ease);}
.footer ul a:hover{color:var(--sunflower);}
.social-row{display:flex; gap:14px; margin-top:14px;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:26px; font-size:.8rem; flex-wrap:wrap; gap:14px;}
.back-to-top{width:46px; height:46px; border-radius:50%; background:var(--coral); color:var(--soft-white); display:flex;
  align-items:center; justify-content:center; font-size:1.1rem; transition:transform .4s var(--ease);}
.back-to-top:hover{transform:translateY(-6px) rotate(-8deg);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .principal-inner{grid-template-columns:1fr; gap:40px;}
  .principal-portrait .ph{position:relative; top:auto; max-width:420px; margin:0 auto;}
  .contact-inner{grid-template-columns:1fr;}
  .sl-grid{grid-template-columns:repeat(2,1fr);}
  .stats{grid-template-columns:repeat(2,1fr); row-gap:36px;}
  .footer-inner{grid-template-columns:1fr; gap:34px;}
  .qual-grid{grid-template-columns:1fr;}
}
@media (max-width:720px){
  .nav-links{position:fixed; top:0; right:0; height:100vh; width:min(78vw,320px); background:var(--soft-white);
    flex-direction:column; justify-content:center; align-items:flex-start; gap:26px; padding:40px; transform:translateX(100%);
    transition:transform .5s var(--ease); box-shadow:-20px 0 50px rgba(0,0,0,.1);}
  .nav-links.open{transform:translateX(0);}
  .nav-toggle{display:flex;}
  .journey{grid-template-columns:1fr 1fr; row-gap:50px;}
  .journey::before{display:none;}
  .path-item{flex-direction:column; align-items:flex-start; gap:8px;}
  .masonry{columns:2;}
  .sl-grid{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}

/* ============================================================
   MICRO-INTERACTIONS
   ============================================================ */
.cursor-glow{
  position:fixed; top:0; left:0; width:28px; height:28px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,198,48,.5), transparent 70%);
  pointer-events:none; z-index:9999; transform:translate(-50%,-50%);
  transition:width .3s var(--ease-soft), height .3s var(--ease-soft), opacity .3s var(--ease-soft), background .3s var(--ease-soft);
  opacity:0; mix-blend-mode:multiply;
}
.cursor-glow.active{opacity:1;}
.cursor-glow.on-dark{background:radial-gradient(circle, rgba(255,203,48,.4), transparent 70%); mix-blend-mode:screen;}
.cursor-glow.big{width:64px; height:64px; background:radial-gradient(circle, rgba(63,174,121,.35), transparent 70%);}

.btn, .sl-card, .masonry-item, .nav-cta{position:relative; overflow:hidden;}
.ripple{
  position:absolute; border-radius:50%; background:rgba(255,255,255,.55);
  transform:scale(0); pointer-events:none; animation:rippleAnim .65s ease-out forwards;
}
@keyframes rippleAnim{to{transform:scale(3.2); opacity:0;}}

.tilt-card{transition:transform .25s var(--ease-soft), box-shadow .25s var(--ease-soft); will-change:transform;}

@media (hover:none){
  .cursor-glow{display:none;}
}