/* =========================================================================
   Indiral Educare - stylesheet
   Palette from the brand designs: deep teal, gold, cream.
   ========================================================================= */

:root {
  --teal:#0e4a45; --teal2:#1a7a68; --teal-pale:#e8f5f0;
  --gold:#c9932f; --gold2:#dba847; --gold-pale:#fdf6e6;
  --blue:#2f6f9e; --orange:#e0673f; --orange-pale:#faeeea;
  --cream:#f6f4ef; --ink:#16211c; --body:#454e46; --muted:#6b7268;
  --line:#e2e6dd; --field:#d9ddd3;
  --shadow:0 1px 4px rgba(20,40,35,.06);
  --shadow-lg:0 2px 14px rgba(20,40,35,.09);
  --radius:12px;
}

*,*::before,*::after { box-sizing:border-box; }

html { font-family:'Source Sans 3','Segoe UI',system-ui,sans-serif; scroll-behavior:smooth; }

body {
  margin:0; background:var(--cream); color:var(--body);
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}

h1,h2,h3 { font-family:'Lora',Georgia,serif; margin:0; color:var(--ink); line-height:1.25; }
h1 { font-size:38px; }
h2 { font-size:26px; }
h3 { font-size:18px; }
p  { margin:0 0 14px; }
a  { color:var(--teal); text-decoration:none; }
a:hover { color:var(--gold); }
img { max-width:100%; height:auto; }
strong { color:var(--ink); }

.wrap { max-width:1180px; margin:0 auto; padding:0 24px; }
.muted{ color:var(--muted); } .small{ font-size:13.5px; } .tiny{ font-size:11.5px; }
.center{ text-align:center; } .nowrap{ white-space:nowrap; }
.mb0{margin-bottom:0}.mb8{margin-bottom:8px}.mb16{margin-bottom:16px}
.mb24{margin-bottom:24px}.mb40{margin-bottom:40px}
.page-wrap{max-width:1080px;margin:0 auto;padding:64px 24px}.page-wrap.narrow{max-width:720px}.lead{font-size:19px;max-width:720px;margin:12px 0 36px;color:var(--muted)}
.cards-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}.two-col{grid-template-columns:1.5fr 1fr}.salary{font-size:22px;font-weight:700;color:var(--teal)}.rich-copy{font-size:17px;max-width:820px}.faq-list{max-width:820px;display:grid;gap:12px}.faq-list summary{font-weight:700;color:var(--ink);cursor:pointer;font-size:17px}.faq-list p{margin:18px 0 0}.search-form{display:flex;gap:10px;margin:0 0 28px;max-width:640px}.search-form input{flex:1}.admin-top{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:28px}.metric{display:flex;flex-direction:column;gap:8px}.metric span{color:var(--muted);font-size:14px}.metric strong{font:700 34px Lora,Georgia,serif;color:var(--teal)}.admin-links{display:flex;flex-wrap:wrap;gap:12px}.admin-links a{border:1px solid var(--line);padding:12px 16px;border-radius:8px;background:#fff}.table-wrap{overflow:auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}table{width:100%;border-collapse:collapse;font-size:14px}th,td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}th{background:var(--teal);color:#fff;font-weight:600}tr:last-child td{border-bottom:0}td input,td select{min-width:120px;padding:7px}.alert-success{background:#e8f5f0;color:var(--teal);padding:12px;border-radius:8px;margin-bottom:16px}.reveal{opacity:0;transform:translateY(12px);transition:.5s ease}.reveal.is-visible{opacity:1;transform:none}

.eyebrow {
  font-size:11.5px; font-weight:700; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--gold); margin-bottom:8px;
}

/* --------------------------------------------------------------- nav ---- */

.site-nav {
  position:relative; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:18px 0; border-bottom:1px solid var(--line);
}
.site-nav .brand { display:flex; align-items:center; gap:10px; }
.site-nav .brand img { width:56px; height:56px; object-fit:contain; }
.site-nav .brand span { font-family:'Lora',Georgia,serif; font-weight:700; font-size:18px; color:var(--teal); }
.site-nav .links { display:flex; align-items:center; gap:24px; font-size:14.5px; font-weight:600; }
.site-nav .links a { color:#3c443c; }
.site-nav .links a.active, .site-nav .links a:hover { color:var(--teal); }
.site-nav .links a.btn, .site-nav .links a.btn:hover { color:#fff; }
.nav-toggle { display:none; background:none; border:0; font-size:24px; color:var(--teal); cursor:pointer; padding:4px 8px; }

/* ------------------------------------------------------------ buttons --- */

.btn {
  display:inline-block; padding:12px 24px; border-radius:8px; border:0;
  font-weight:600; font-size:15px; font-family:inherit; cursor:pointer;
  text-align:center; transition:background .15s,opacity .15s;
}
.btn-primary { background:var(--teal); color:#fff; }
.btn-primary:hover { background:var(--teal2); color:#fff; }
.btn-gold { background:var(--gold); color:#fff; }
.btn-gold:hover { background:var(--gold2); color:#fff; }
.btn-ghost { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.4); }
.btn-ghost:hover { background:rgba(255,255,255,.12); color:#fff; }
.btn-outline { background:#fff; color:var(--teal); border:1px solid var(--field); }
.btn-outline:hover { border-color:var(--teal); }
.btn-sm { padding:8px 16px; font-size:13.5px; }
.btn-block { display:block; width:100%; }

/* -------------------------------------------------------------- cards --- */

.card { background:#fff; border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); }
.card-lg { padding:28px; }
.grid { display:flex; gap:18px; flex-wrap:wrap; }
.grid > * { flex:1; min-width:230px; }

.stat { background:#fff; border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow); border-top:3px solid var(--teal); }
.stat .num { font-family:'Lora',Georgia,serif; font-size:26px; font-weight:700; color:var(--teal); line-height:1.2; }
.stat .lbl { font-size:12.5px; color:var(--muted); }
.stat.gold{border-top-color:var(--gold)}   .stat.gold .num{color:var(--gold)}
.stat.blue{border-top-color:var(--blue)}   .stat.blue .num{color:var(--blue)}
.stat.orange{border-top-color:var(--orange)}.stat.orange .num{color:var(--orange)}

/* --------------------------------------------------------------- hero --- */

.hero {
  position:relative; overflow:hidden; border-radius:16px; padding:54px 44px; margin:40px 0;
  background:linear-gradient(120deg,var(--teal) 0%,var(--teal2) 100%);
}
.hero h1 { color:#fff; font-size:42px; margin-bottom:14px; }
.hero p  { color:#d7f2e8; font-size:16.5px; line-height:1.7; max-width:620px; }
.hero .eyebrow { color:#f4c968; }
.hero .rings { position:absolute; right:-40px; top:-50px; opacity:.15; }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin-top:24px; }

.cta-band {
  background:linear-gradient(120deg,var(--teal),var(--teal2)); color:#fff;
  padding:32px 36px; border-radius:14px; margin-bottom:40px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px;
}
.cta-band h2 { color:#fff; font-size:21px; margin-bottom:4px; }
.cta-band .sub { color:#d7f2e8; font-size:14px; }

/* -------------------------------------------------------------- forms --- */

.field { margin-bottom:14px; }
label { display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:6px; }
input[type=text],input[type=email],input[type=tel],textarea {
  width:100%; padding:11px 13px; border:1px solid var(--field); border-radius:8px;
  font-size:14.5px; font-family:inherit; color:var(--ink); background:#fff;
}
textarea { resize:vertical; min-height:90px; }
input:focus,textarea:focus {
  outline:none; border-color:var(--teal2); box-shadow:0 0 0 3px rgba(26,122,104,.12);
}
.field-row { display:flex; gap:14px; flex-wrap:wrap; }
.field-row > .field { flex:1; min-width:200px; }
.hint { font-size:12px; color:var(--muted); margin-top:4px; }
.req { color:var(--orange); }

.alert { padding:12px 16px; border-radius:0 8px 8px 0; margin-bottom:16px; font-size:14px; }
.alert-success { background:var(--teal-pale); border-left:3px solid var(--teal2); color:var(--teal); }
.alert-error   { background:var(--orange-pale); border-left:3px solid var(--orange); color:#8a3418; }
.alert-info    { background:#eaf1f7; border-left:3px solid var(--blue); color:#24506f; }

.note-gold   { background:var(--gold-pale); border-left:3px solid var(--gold); padding:16px 20px; border-radius:0 8px 8px 0; color:#5a4a26; }
.note-orange { background:var(--orange-pale); border-left:3px solid var(--orange); padding:16px 20px; border-radius:0 8px 8px 0; color:#5a2f1e; }

/* ------------------------------------------------------------- tables --- */

.table-wrap { overflow-x:auto; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); }
table.data { border-collapse:collapse; width:100%; font-size:13.5px; }
table.data thead tr { background:var(--teal); color:#fff; }
table.data th { text-align:left; padding:12px 16px; font-weight:600; white-space:nowrap; }
table.data td { padding:12px 16px; border-bottom:1px solid var(--line); }
table.data tbody tr:last-child td { border-bottom:0; }
table.data td.strong { font-weight:600; color:var(--ink); }

/* -------------------------------------------------------------- steps --- */

.steps { display:flex; flex-direction:column; gap:14px; }
.step {
  display:flex; gap:18px; background:#fff; border-radius:var(--radius);
  padding:20px 24px; box-shadow:var(--shadow); border-left:4px solid var(--teal);
}
.step:nth-child(2){border-left-color:var(--gold)}
.step:nth-child(3){border-left-color:var(--teal2)}
.step:nth-child(4){border-left-color:var(--blue)}
.step:nth-child(5){border-left-color:var(--orange)}
.step .no { flex:0 0 34px; font-family:'Lora',Georgia,serif; font-weight:700; font-size:20px; color:var(--teal); }
.step:nth-child(2) .no{color:var(--gold)} .step:nth-child(3) .no{color:var(--teal2)}
.step:nth-child(4) .no{color:var(--blue)} .step:nth-child(5) .no{color:var(--orange)}
.step .nm { font-weight:600; font-size:15.5px; color:var(--ink); }
.step .ds { font-size:14px; margin-top:4px; }

/* -------------------------------------------------------- pathway flows --- */
.pathway-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.pathway-card{align-self:start}
.pathway-card summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:18px;align-items:flex-start;font-weight:700;color:var(--ink);font-size:18px}
.pathway-card summary::-webkit-details-marker{display:none}
.pathway-card summary::after{content:'+';font-size:24px;line-height:1;color:var(--teal);flex:0 0 auto}
.pathway-card[open] summary::after{content:'−'}
.pathway-card summary small{display:block;color:var(--muted);font-size:12px;font-weight:400;line-height:1.45;text-align:right;max-width:52%}
.flow-steps{display:flex;flex-direction:column;gap:28px;margin-top:22px}
.flow-step{position:relative;text-align:center;background:#fff;border:1px solid var(--line);border-radius:8px;padding:14px 16px;color:var(--ink);font-size:14px;line-height:1.45;box-shadow:0 4px 14px rgba(14,61,57,.06)}
.flow-step:not(:last-child)::after{content:'↓';position:absolute;left:50%;bottom:-25px;transform:translateX(-50%);font-size:22px;color:var(--gold);font-weight:700}
.flow-step-number{font-size:11px;letter-spacing:1px;color:var(--teal);font-weight:700;margin-bottom:5px}

/* ------------------------------------------------------------ compare --- */

.compare { display:flex; gap:18px; flex-wrap:wrap; }
.compare > div { flex:1; min-width:260px; border-radius:var(--radius); padding:22px; }
.compare .bad { background:var(--orange-pale); }
.compare .good { background:var(--teal-pale); border:2px solid var(--teal2); position:relative; }
.compare .good .tag {
  position:absolute; top:-11px; right:16px; background:var(--gold); color:#fff;
  font-size:10px; font-weight:700; letter-spacing:.5px; padding:3px 10px;
  border-radius:10px; text-transform:uppercase;
}
.compare .hd { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-bottom:12px; }
.compare .bad .hd { color:#c15a35; } .compare .good .hd { color:var(--teal); }
.compare .rows { font-size:13.5px; line-height:2; }
.compare .bad .rows { color:#5a2f1e; } .compare .good .rows { color:var(--ink); }

/* ------------------------------------------------------------- footer --- */

.site-footer {
  border-top:1px solid var(--line); padding:26px 0; margin-top:20px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:13px; color:var(--muted);
}
.site-footer .fl { display:flex; gap:20px; flex-wrap:wrap; }
.site-footer a { color:var(--muted); }
.site-footer a:hover { color:var(--teal); }

/* ------------------------------------------------------ whatsapp float -- */

.wa-float {
  position:fixed; right:18px; bottom:18px; z-index:50;
  width:52px; height:52px; border-radius:50%;
  background:#25d366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 14px rgba(0,0,0,.22);
  transition:transform .15s;
}
.wa-float:hover { transform:scale(1.07); color:#fff; }
.email-float { position:fixed; right:18px; bottom:82px; z-index:50; width:52px; height:52px; border-radius:50%; background:var(--teal); color:#fff; display:flex; align-items:center; justify-content:center; font-size:24px; box-shadow:0 4px 14px rgba(20,40,35,.2); transition:transform .15s; }
.email-float:hover { transform:scale(1.07); color:#fff; }

/* --------------------------------------------------------- responsive --- */

@media (max-width:860px) {
  .page-wrap{padding:40px 18px}.cards-grid,.two-col,.pathway-grid{grid-template-columns:1fr}.admin-top{flex-direction:column}.search-form{flex-direction:column}.pathway-card summary{display:block}.pathway-card summary small{text-align:left;max-width:none;margin-top:8px}
  h1{font-size:28px} h2{font-size:22px}
  .hero{padding:36px 24px;margin:24px 0}
  .hero h1{font-size:30px}
  .site-nav .links {
    display:none; position:absolute; top:100%; left:0; right:0; z-index:40;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid var(--line); box-shadow:var(--shadow-lg);
  }
  .site-nav .links.open { display:flex; }
  .site-nav .links a { padding:13px 24px; border-bottom:1px solid var(--line); }
  .site-nav .links a.btn { margin:12px 24px; }
  .nav-toggle { display:block; }
  .cta-band { padding:24px; }
  .wa-float { right:14px; bottom:14px; } .email-float { right:14px; bottom:78px; }
}

@media print {
  .site-nav,.wa-float,.btn,.cta-band { display:none !important; }
  body { background:#fff; }
}