/* Infra Assure Academy – additions built on top of Mr Ali's design (ali-base.css).
   Same tokens: --ink steel, --sun coral, --lt light coral, --teal deep coral, --card, --line */

/* ---------- Header / nav ---------- */
.logo{display:inline-flex;align-items:center;gap:10px}
.logo img{height:40px;width:auto;display:block;filter:drop-shadow(0 2px 4px #0006)}
.offer a{color:inherit;font-weight:700;margin-left:8px;text-underline-offset:3px}
.burger{display:none;background:#ffffff14;border:1px solid #ffffff30;color:#fff;border-radius:12px;width:44px;height:44px;cursor:pointer;font-size:20px;line-height:1}
@media(max-width:1080px){
  .burger{display:inline-grid;place-items:center}
  nav{flex-wrap:nowrap}
  nav .l{position:absolute;left:0;right:0;top:100%;background:#232b34f7;flex-direction:column;padding:10px 20px 18px;gap:4px;display:none;border-bottom:1px solid #ff8a6355}
  nav .l.open{display:flex}
  nav .l a{justify-content:flex-start}
  header .w{position:relative}
  nav>.btn{padding:10px 16px;font-size:14px}
}
@media(max-width:420px){nav>.btn{display:none}}

/* ---------- Scroll reveal (motion) ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
.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}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* hero tagline */
.tagl{display:inline-block;font:700 15px "Chakra Petch",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--lt);margin:14px 0 6px}
.tagl i{font-style:normal;color:#c3c9d0;margin:0 8px}

/* ---------- Generic content blocks ---------- */
.lead{font-size:19px;color:var(--mut);max-width:70ch}
.kicker{display:inline-block;font:700 13px "Chakra Petch",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin-bottom:8px}
.two.top{align-items:start}
.focus{list-style:none;padding:0;margin:16px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.focus li{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 14px;font-weight:600;box-shadow:inset 0 2px 0 #fff9,0 8px 16px #2a323b1f}
.focus li b{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#1b222a;background:radial-gradient(circle at 32% 25%,#ffb199,#ff6a3d 55%,#d9481f);box-shadow:inset 0 3px 5px #fff8,inset 0 -5px 8px #0004}
@media(max-width:600px){.focus{grid-template-columns:1fr}}
.quote{font:700 clamp(22px,3vw,30px)/1.3 "Chakra Petch",sans-serif;border-left:6px solid var(--sun);padding:6px 0 6px 20px;margin:0 0 16px}

/* ---------- Vision in action: 3 numbered spheres on a rail ---------- */
.vis{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:10px}
.vis:before{content:"";position:absolute;left:12%;right:12%;top:46px;height:8px;border-radius:9px;background:linear-gradient(#e8ebef,#c3c9d0 45%,#7b8794);box-shadow:0 4px 8px #2a323b44}
.vis>div{position:relative;text-align:center;padding:0 10px}
.vis .ball{width:92px;height:92px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;font:700 38px "Chakra Petch",sans-serif;color:#1b222a;background:radial-gradient(circle at 32% 25%,#ffb199,#ff6a3d 55%,#a8361a);box-shadow:inset 0 6px 10px #ffffff77,inset 0 -12px 18px #00000066,0 14px 24px #2a323b66;animation:bob 3.4s ease-in-out infinite}
.vis>div:nth-child(2) .ball{background:radial-gradient(circle at 32% 25%,#f3f5f7,#c3c9d0 55%,#7b8794);animation-delay:-1.1s}
.vis>div:nth-child(3) .ball{animation-delay:-2.2s}
.vis h3{font-size:22px}.vis p{color:var(--mut);margin:6px 0 0}
@media(max-width:700px){.vis{grid-template-columns:1fr}.vis:before{left:45px;right:auto;top:20px;bottom:20px;width:8px;height:auto}.vis>div{display:grid;grid-template-columns:92px 1fr;gap:16px;text-align:left;align-items:center}.vis .ball{margin:0}}

/* ---------- Learning approach: animated road ---------- */
.road{position:relative;margin:10px 0 0}
.road svg.rd{display:block;width:100%;height:auto;overflow:visible;margin:30px 0 10px}
.road .asph{fill:none;stroke:#2f3a46;stroke-width:46;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 12px 10px #2a323b55)}
.road .edge{fill:none;stroke:#c3c9d0;stroke-width:52;stroke-linecap:round;stroke-linejoin:round}
.road .lane{fill:none;stroke:#f3f5f7;stroke-width:4;stroke-dasharray:18 16;animation:lane 1.6s linear infinite}
@keyframes lane{to{stroke-dashoffset:-34}}
.road .car{filter:drop-shadow(0 4px 4px #0008)}
.stops{position:absolute;inset:0;pointer-events:none}
.stop{position:absolute;transform:translate(-50%,-50%);text-align:center;width:150px;pointer-events:auto}
.pin{width:54px;height:54px;margin:0 auto;border-radius:50%;display:grid;place-items:center;font:700 20px "Chakra Petch",sans-serif;color:#1b222a;background:radial-gradient(circle at 32% 25%,#ffb199,#ff6a3d 55%,#a8361a);box-shadow:inset 0 4px 7px #fff8,inset 0 -8px 12px #0007,0 10px 16px #2a323b77;border:3px solid #f3f5f7;transform:scale(.4);opacity:0;transition:transform .6s cubic-bezier(.34,1.56,.64,1),opacity .4s}
.stop:nth-child(even) .pin{background:radial-gradient(circle at 32% 25%,#f3f5f7,#c3c9d0 55%,#7b8794)}
.road.in .pin{transform:none;opacity:1}
.road.in .stop:nth-child(2) .pin{transition-delay:.15s}.road.in .stop:nth-child(3) .pin{transition-delay:.3s}.road.in .stop:nth-child(4) .pin{transition-delay:.45s}.road.in .stop:nth-child(5) .pin{transition-delay:.6s}.road.in .stop:nth-child(6) .pin{transition-delay:.75s}
.stop b{display:block;font:700 18px "Chakra Petch",sans-serif;margin-top:6px;background:var(--card);border:1px solid var(--line);border-radius:99px;padding:3px 10px;box-shadow:0 6px 12px #2a323b33}
.road-desc{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:26px}
.road-desc>div{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--sun);border-radius:16px;padding:12px 14px;box-shadow:inset 0 2px 0 #fff9,0 8px 16px #2a323b1f}
.road-desc>div:nth-child(even){border-top-color:#8a949f}
.road-desc b{display:block;font:700 16px "Chakra Petch",sans-serif}.road-desc small{display:block;color:var(--mut);font-size:14px;line-height:1.4;margin-top:4px}
.road-list{display:none}
@media(max-width:1000px){.road-desc{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.road,.road-desc{display:none}.road-list{display:block}}
.why.three{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

/* ---------- Learning journey (5 steps) uses .st4 from base ---------- */
.st4 li{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px 16px;box-shadow:inset 0 2px 0 #fff9,0 8px 16px #2a323b1f}
.st4 li strong{font-family:"Chakra Petch",sans-serif;font-size:18px}

/* outcomes / why grid uses .why; icon sphere .ic */
.why .ic svg{display:block}
.why h3{margin-top:12px}

/* ---------- Programmes page ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.chips a{text-decoration:none;font-size:14px;font-weight:600;padding:7px 14px;border-radius:99px;background:var(--card);border:1px solid var(--line);box-shadow:inset 0 2px 0 #fff9,0 3px 8px #2a323b1f;transition:transform .2s,background .2s}
.chips a:hover{transform:translateY(-2px);background:#fff}
.chips a span{color:var(--teal);margin-left:6px}
.count{font:700 14px "Chakra Petch",sans-serif;color:var(--mut);margin:-10px 0 18px}

/* Category list rows (prices removed → meta + enquire) */
.row .meta{text-align:right;font-size:14px;color:var(--mut)}
.row .meta b{display:block;font:700 18px "Chakra Petch",sans-serif;color:var(--teal)}
.row .acts{grid-column:2;display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.row .acts .btn{grid-column:auto;padding:9px 16px;font-size:15px}
.row p.m{margin:4px 0 0}
.lvl{display:inline-block;font-size:12px;font-weight:700;padding:2px 10px;border-radius:99px;border:1px solid var(--line);color:var(--mut);margin-top:6px;margin-right:6px}
.lvl.x{border-color:#ff8a6388;color:var(--teal)}
@media(max-width:820px){.row .meta{text-align:left}.row .acts{grid-column:1;justify-content:flex-start}}

/* ---------- Course page ---------- */
.xnote{display:flex;gap:14px;align-items:flex-start;background:linear-gradient(135deg,#fff,var(--card));border:1px solid #ff8a6366;border-radius:18px;padding:16px 18px;margin:0 0 26px;box-shadow:0 0 0 4px #ff8a6314,0 10px 20px #2a323b1f}
.xnote .ic{width:46px;height:46px;flex:none}.xnote p{margin:0;font-size:15px}.xnote b{font-family:"Chakra Petch",sans-serif}
.pc .facts{list-style:none;padding:0;margin:4px 0 14px;color:var(--tx)}
.pc .facts li{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed var(--line);padding:8px 0;font-size:15px}
.pc .facts li span{color:var(--mut)}
.pc h3{font-size:19px;margin-top:6px}
.pc .btn+.btn{margin-top:10px}
.ph img{display:block;width:100%;aspect-ratio:5/3;object-fit:cover}
.rel{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.rel a{display:block;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:inset 0 2px 0 #fff9,0 10px 20px #2a323b22;transition:transform .2s,box-shadow .2s}
.rel a:hover{transform:translateY(-4px);box-shadow:inset 0 2px 0 #fff9,0 0 0 1px #ff8a63,0 0 24px #ff8a6344}
.rel b{display:block;font:700 17px/1.25 "Chakra Petch",sans-serif}.rel span{font-size:13px;color:var(--mut)}

/* hanging rail card footer (replaces price) */
.hg-card .enq{display:inline-block;margin-top:2px;font-weight:700;color:var(--teal);font-size:14px}

/* ---------- Gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.gal figure{margin:0;border-radius:22px;overflow:hidden;position:relative;box-shadow:0 18px 30px -14px #2a323b99}
.gal img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .6s}
.gal figure:hover img{transform:scale(1.06)}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 16px;color:#fff;background:linear-gradient(transparent,#1a2027e6)}
.gal figcaption b{display:block;font:700 19px "Chakra Petch",sans-serif}.gal figcaption span{font-size:14px;color:#d5dbe2}

/* ---------- Contact ---------- */
.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:34px}
.cards3 a,.cards3 div{display:flex;gap:14px;align-items:center;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:16px 18px;box-shadow:inset 0 2px 0 #fff9,0 10px 20px #2a323b1f}
.cards3 .ic{width:50px;height:50px;flex:none}.cards3 small{display:block;color:var(--mut)}.cards3 b{font-family:"Chakra Petch",sans-serif}
form label.full,form .full{grid-column:1/-1}
form .note{grid-column:1/-1;margin:0}

/* ---------- Enquiry modal ---------- */
#enq{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:18px;background:#1a2027b3;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#enq.open{display:flex;animation:fade .25s ease}
@keyframes fade{from{opacity:0}}
.mdl{position:relative;width:100%;max-width:620px;max-height:calc(100vh - 36px);overflow:auto;background:var(--bg);border-radius:26px;padding:26px;border:1px solid #ff8a6366;box-shadow:0 0 0 6px #ff8a6318,0 30px 60px #000a;animation:pop .35s cubic-bezier(.34,1.4,.5,1)}
@keyframes pop{from{transform:translateY(20px) scale(.96)}}
.mdl h2{font-size:28px;margin-bottom:4px}.mdl>p{color:var(--mut);margin:0 0 16px}
.mdl .x{position:absolute;right:14px;top:14px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--card);font-size:22px;line-height:1;cursor:pointer;color:var(--tx)}
.mdl form{max-width:none}
.okmsg{display:none;border-radius:16px;background:var(--card);border:1px solid #ff8a6366;padding:16px;margin-top:6px}
.okmsg.on{display:block}.okmsg a{color:var(--teal);font-weight:700}

/* ---------- Footer ---------- */
footer .fg{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:26px}
footer h4{color:#fff;font:700 16px "Chakra Petch",sans-serif;margin:0 0 10px}
footer a{display:inline-block;color:#d5dbe2;text-decoration:none;margin:0 0 6px}
footer a:hover{color:var(--lt)}
footer .fl a{display:block;margin:0 0 6px}
footer .bot{border-top:1px solid #ffffff1f;margin-top:24px;padding-top:16px;font-size:13px}
@media(max-width:820px){footer .fg{grid-template-columns:1fr}}

/* counters */
.stats b{font-variant-numeric:tabular-nums}

/* form fields never overflow their grid cell */
form{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
form input,form select,form textarea{min-width:0;width:100%}
@media(max-width:820px){form{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){.offer .hs{display:none}}
.cards3 b{overflow-wrap:anywhere}.cards3 span{min-width:0}

/* rating summary (renamed from .rt, which clashes with the hanging rail) */
.rtg b{font:800 64px/1 "Chakra Petch",sans-serif;color:var(--teal);display:block}.rtg .st{color:var(--teal);font-size:22px;letter-spacing:2px}.rtg small{color:var(--mut)}
/* keep header on one line */
nav{flex-wrap:nowrap}nav .l{flex-wrap:nowrap}nav .l a{padding:6px 10px;white-space:nowrap}
.logo{white-space:nowrap}
nav>.btn{white-space:nowrap;flex:none}
nav{gap:10px}nav .l{gap:2px}nav .l a{padding:6px 9px;font-size:14.5px}nav>.btn{padding:11px 18px;font-size:15px}.logo{font-size:19px}
header .w{max-width:1260px}
@media(max-width:1080px){nav>.btn{margin-left:auto}}