/* ==========================================================================
   WISDOM COLLEGE FOR CREATIVITY & DESIGN — Stylesheet
   Hazratganj, Lucknow — Graphic Designing landing page
   Design system: CMYK / creative-studio feel
   Display: Poppins (Google Font — headings)
   Body/UI:  Poppins
   ========================================================================== */

/* The Poppins webfont is now requested by a <link> in the <head> of
   index.html instead of from here. Pulling it in from inside this file
   made the browser wait for style.css to download before it even asked
   for the font, which delayed the first paint. */

:root{
  /* ---------------------------------------------------------------
     BRAND PALETTE — CMYK CREATIVE (magenta / violet / blue / yellow)
     Taken straight from the Wisdom College logo: magenta, royal blue
     and yellow. Change --brand and --brand-deep here and every button,
     icon, link and highlight on the site changes with it.
     --------------------------------------------------------------- */
  --brand:        #E4007E;   /* main brand magenta (from the logo) */
  --brand-deep:   #6A1FD0;   /* violet, for gradients              */
  --brand-bright: #FF3DA3;   /* bright pink for glows              */
  --brand-light:  #FFA6D6;   /* light pink on dark backgrounds     */
  --brand-tint:   #FFEDF7;   /* very light pink wash               */

  /* secondary creative accents — used by the course tiles, the career
     cards and the hiring marquee dots */
  --c-blue:   #2F7BFF;
  --c-cyan:   #00B8D4;
  --c-violet: #7B3FE4;
  --c-orange: #FF7A2F;
  --c-green:  #12B981;

  --navy: #16093A;
  --navy-soft: #33195E;
  --navy-tint: #F6EDFB;
  --amber: #FFC01F;
  --sky: #FDF1F8;
  --sky-deep: #FADDEE;
  --cream: #FFFFFF;
  --ink: #1E1233;
  --ink-soft: #625576;
  --ink-faint: #9A8FAD;
  --border: #EFE0EC;
  --success: #1E9E5A;

  /* Type */
  --font-display: 'Poppins', -apple-system, sans-serif;
  --font-body: 'Poppins', -apple-system, sans-serif;

  /* Effects */
  --shadow-sm: 0 2px 10px rgba(30,10,60,0.06);
  --shadow-md: 0 12px 32px rgba(30,10,60,0.10);
  --shadow-lg: 0 24px 60px rgba(30,10,60,0.16);
  --shadow-brand: 0 16px 40px rgba(228,0,126,0.28);
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
input,select,textarea{ font-family:inherit; font-size:15px; }

.container{ width:100%; max-width:1280px; margin:0 auto; padding:0 24px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
  /* the hiring marquee is a scrolling animation — turn it off completely and
     let the visitor swipe it instead of freezing it on its last frame */
  .hiring-track{ animation:none !important; transform:none !important; }
  .hiring-marquee{ overflow-x:auto; }
}

:focus-visible{ outline:2.5px solid var(--brand); outline-offset:3px; border-radius:4px; }

/* ---------- Reveal-on-scroll ---------- */
/* Reveal-on-scroll: this is a progressive enhancement, not a requirement.
   Content is visible by default. Only once JS has confirmed it's running
   (html.js-reveal-ready) do these elements start hidden, ready to fade in.
   This means if script.js ever fails to load/run for any reason, every
   section still displays normally — just without the fade-in animation —
   instead of staying permanently invisible. */
html.js-reveal-ready .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
html.js-reveal-ready .reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-delay-1{ transition-delay:.1s; }
.reveal-delay-2{ transition-delay:.2s; }
.reveal-delay-3{ transition-delay:.3s; }

/* ---------- Typography helpers ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-weight:600; font-size:12.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--brand);
}
.eyebrow::before{ content:''; width:22px; height:2px; background:var(--brand); border-radius:2px; }

h1,h2,h3{ font-family:var(--font-display); color:var(--navy); font-weight:600; line-height:1.12; letter-spacing:-0.01em; }
h1{ font-size:clamp(34px,5.4vw,60px); }
h2{ font-size:clamp(28px,4vw,42px); }
h3{ font-size:20px; font-weight:600; }
.section-head{ max-width:640px; margin-bottom:48px; }
.section-head p{ color:var(--ink-soft); font-size:16.5px; margin-top:14px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head.center .eyebrow::before{ display:none; }

em.accent{ font-style:italic; color:var(--brand); font-family:var(--font-display); font-weight:500; }

.section{ padding:96px 0; position:relative; }
.section.tight{ padding:72px 0; }
.bg-soft{ background:linear-gradient(180deg,#FFFFFF 0%, var(--sky) 100%); }
.bg-navy{ background:var(--navy); color:#fff; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:16px 30px; border-radius:100px; font-weight:600; font-size:14.5px;
  letter-spacing:.03em; text-transform:uppercase; white-space:nowrap;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.btn-primary{ background:linear-gradient(135deg,var(--brand),var(--brand-deep)); color:#fff; box-shadow:var(--shadow-brand); }
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 22px 46px rgba(228,0,126,0.36); }
.btn-outline{ background:#fff; color:var(--navy); border:1.5px solid var(--navy); }
.btn-outline:hover{ background:var(--navy); color:#fff; transform:translateY(-3px); }
.btn-outline.on-dark{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.btn-outline.on-dark:hover{ background:#fff; color:var(--navy); }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.6; cursor:not-allowed; transform:none !important; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:500;
  background:rgba(255,255,255,.9); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:24px; }
.logo{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.logo img{ height:52px; width:auto; }
.main-nav{ display:flex; align-items:center; gap:32px; }
.main-nav a{ font-size:14.5px; font-weight:500; color:var(--navy); position:relative; padding:6px 0; }
.main-nav a::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--brand); transform:scaleX(0); transform-origin:right; transition:transform .3s var(--ease); }
.main-nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
.header-cta{ display:flex; align-items:center; gap:18px; }
.header-phone{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:14px; color:var(--navy); }
.header-phone svg{ color:var(--brand); flex-shrink:0; }
.nav-toggle{ display:none; width:42px; height:42px; align-items:center; justify-content:center; border-radius:10px; background:var(--sky); }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{ content:''; display:block; width:20px; height:2px; background:var(--navy); position:relative; transition:.3s; }
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }

/* ==========================================================================
   HERO — royal-blue gradient banner (vector, so it stays sharp on any
   screen, including retina / 4K). No photograph, nothing to pixelate.
   ========================================================================== */
.hero{
  position:relative; overflow:hidden;
  padding:70px 0 76px; color:#fff;
  background:#1A0A3E;
}

/* --- background stack --------------------------------------------------- */
/* Layer order, back to front:
     1. .hero-bg-photo  our own colourful ink-splash artwork
     2. .hero-bg-wash   the magenta/violet gradient — DELIBERATELY
                        SEMI-TRANSPARENT on the right, so the splash shows
                        through it and picks up the tint
     3. .hero-bg-mesh   vector network of lines and dots (SVG)
   To make the splash more visible, raise .hero-bg-photo opacity below.
   To make it fainter, lower it. Nothing else needs to change.          */
.hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }

.hero-bg-photo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 45%;
  opacity:.78;
  /* faded out on the left so the headline always sits on flat colour,
     strongest on the right where there is no text */
  mask-image:linear-gradient(96deg, transparent 6%, rgba(0,0,0,.35) 34%, #000 72%);
  -webkit-mask-image:linear-gradient(96deg, transparent 6%, rgba(0,0,0,.35) 34%, #000 72%);
}

/* The creative gradient. Opaque on the left for text contrast, dropping to
   about 70% on the right so the ink splash reads through it. */
.hero-bg-wash{
  position:absolute; inset:0; display:block;
  background:
    radial-gradient(1100px 640px at 88% 4%, rgba(255,61,163,.34) 0%, transparent 62%),
    radial-gradient(900px 720px at 8% 96%, rgba(47,123,255,.30) 0%, transparent 64%),
    linear-gradient(104deg,
      rgba(20,7,52,.99)   0%,
      rgba(34,10,84,.975) 24%,
      rgba(58,16,124,.93) 44%,
      rgba(96,22,146,.84) 64%,
      rgba(150,20,132,.70) 84%,
      rgba(74,18,120,.78) 100%);
}

/* ---- the graphic-design PICTURE overlaid on the hero background ----
   images/hero-design-art.svg. It sits above the gradient wash and below the
   mesh, on the right-hand side, faded out towards the headline so the text
   always stays readable.
     opacity        -> how strong the picture is (raise to .8, lower to .3)
     right / width  -> where it sits and how big it is
   Swap the file in the <img> in index.html to change the picture.   */
.hero-bg-art{
  position:absolute; top:50%; right:24%;
  transform:translateY(-50%);
  height:96%; width:auto; max-width:42%;
  object-fit:contain; object-position:center;
  opacity:.72; pointer-events:none;
  mask-image:linear-gradient(94deg, transparent 0%, rgba(0,0,0,.5) 22%, #000 52%);
  -webkit-mask-image:linear-gradient(94deg, transparent 0%, rgba(0,0,0,.5) 22%, #000 52%);
}

/* vector network mesh — SVG, so it never pixelates at any resolution */
.hero-bg-mesh{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.6;
  mask-image:linear-gradient(96deg, transparent 30%, #000 78%);
  -webkit-mask-image:linear-gradient(96deg, transparent 30%, #000 78%);
}

/* soft rings, bottom-left glow */
.hero::after{
  content:''; position:absolute; z-index:1; width:820px; height:820px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.11);
  box-shadow:0 0 0 100px rgba(255,255,255,.04) inset;
  top:-320px; right:-260px; pointer-events:none;
}
.hero-inner{ position:relative; z-index:2; width:100%; }
.hero-grid{ display:grid; grid-template-columns:1.28fr .72fr; gap:48px; align-items:center; }
.hero-copy{ color:#fff; }

.hero-badge{
  display:inline-flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  padding:8px 18px 8px 14px; border-radius:100px;
  font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#fff;
  margin-bottom:22px;
}
.hero-badge svg{ color:var(--amber); flex-shrink:0; }

.hero-copy h1{
  color:#fff; font-weight:800; letter-spacing:-.02em; line-height:1.1;
  font-size:clamp(29px,3.7vw,47px); margin-bottom:20px;
  text-shadow:0 4px 30px rgba(2,10,50,.42);
}
.hero-copy h1 .hl{ color:#FFD37A; display:block; }
.hero-copy .sub{
  font-size:16px; line-height:1.7; color:rgba(255,255,255,.9);
  max-width:580px; margin-bottom:30px;
  text-shadow:0 1px 12px rgba(4,16,60,.28);
}

/* the four tick pills from the reference layout */
.hero-points{ display:flex; flex-wrap:wrap; gap:13px; margin-bottom:32px; max-width:660px; }
.hero-point{
  display:flex; align-items:center; gap:11px;
  background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  padding:13px 22px 13px 16px; border-radius:14px;
  font-size:14.5px; font-weight:600; color:#fff; line-height:1.3;
  transition:transform .3s var(--ease), background .3s var(--ease);
}
.hero-point:hover{ transform:translateY(-3px); background:rgba(255,255,255,.18); }
.hero-point .tick{
  width:24px; height:24px; border-radius:50%; flex-shrink:0;
  background:rgba(255,255,255,.92); color:var(--brand);
  display:flex; align-items:center; justify-content:center;
}
/* green ticks, as in the reference layout */
.hero-point .tick.tick-green{ background:#1FC16B; color:#fff; }

.hero-btns{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:36px; }
/* Hero CTAs — scoped to the hero button row only, so the submit button
   inside the enquiry card is not affected.
   First button: bright blue gradient. Second: solid white. */
.hero-btns .btn-primary{
  background:linear-gradient(135deg,#FFC01F 0%, #FFA800 55%, #FFCB3D 100%);
  color:#1E1233; border:1px solid rgba(255,255,255,.34);
  box-shadow:0 16px 38px rgba(20,6,54,.46);
}
.hero-btns .btn-primary:hover{
  background:linear-gradient(135deg,#FFD04C 0%, #FFBB1A 55%, #FFDA6B 100%);
  color:#1E1233;
}
.hero-btns .btn-outline.on-dark{
  background:#fff; color:var(--brand); border-color:#fff;
  box-shadow:0 16px 38px rgba(4,16,60,.28);
}
.hero-btns .btn-outline.on-dark:hover{ background:var(--brand); color:#fff; border-color:var(--brand); }

/* software strip — the tools taught on the course */
.hero-tools{
  border-top:1px solid rgba(255,255,255,.2); padding-top:24px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; max-width:760px;
}
.hero-tools .lbl{
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; color:rgba(255,255,255,.66);
}
.hero-tools .tool{
  padding:8px 14px; border-radius:9px; font-size:13px; font-weight:600; color:#fff;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
}

/* ---------- Enquiry Card — compact, right column ---------- */
.hero-form-col{ padding-top:0; }
.enquiry-card{
  background:rgba(255,255,255,.97); border-radius:var(--radius-md); box-shadow:var(--shadow-lg);
  padding:24px 22px; border:1px solid rgba(255,255,255,.5); position:relative;
  backdrop-filter:blur(6px);
}
.enquiry-card.compact .eyebrow{ margin-bottom:5px; font-size:11px; }
.enquiry-card.compact h3{ font-family:var(--font-display); font-size:19px; margin-bottom:16px; line-height:1.25; }

.field{ margin-bottom:12px; }
.field label{ display:block; font-size:11.5px; font-weight:600; color:var(--navy); margin-bottom:5px; letter-spacing:.02em; }
.field input, .field select{
  width:100%; padding:11px 14px; border:1.5px solid var(--border); border-radius:10px;
  font-size:13.5px; color:var(--ink); background:#FBFAFD; transition:border-color .25s, background .25s;
}
.field input:focus, .field select:focus{ border-color:var(--brand); background:#fff; outline:none; }
.field input.err, .field select.err{ border-color:#E0435B; }
.field .err-msg{ font-size:11px; color:#E0435B; margin-top:4px; display:none; }
.field.has-error .err-msg{ display:block; }
.enquiry-card.compact .btn{ padding:13px 24px; font-size:13px; margin-top:2px; }
.form-note{ font-size:10.8px; color:var(--ink-faint); text-align:center; margin-top:12px; line-height:1.5; }
.form-note a{ color:var(--brand); font-weight:600; text-decoration:underline; }

/* ==========================================================================
   COURSES
   ========================================================================== */
.course-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.course-card{
  background:#fff; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--border);
  box-shadow:var(--shadow-sm); transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  display:flex; flex-direction:column;
}
.course-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-md); }
.course-media{ position:relative; aspect-ratio:4/3.2; overflow:hidden; }
.course-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.course-card:hover .course-media img{ transform:scale(1.07); }

/* --------------------------------------------------------------------------
   COURSE ICON TILES
   The four course cards no longer use photographs. Each one is a coloured
   gradient tile with a white line icon and a big ghost number — pure CSS and
   inline SVG, so it is perfectly sharp on retina / 2K / 4K screens and adds
   nothing to page weight. To recolour a card, edit its .tile-N gradient.
   -------------------------------------------------------------------------- */
.course-media.tile{ display:flex; align-items:center; justify-content:center; }
.course-media.tile-1{ background:linear-gradient(140deg,#FF3DA3 0%, #C1006A 100%); }
.course-media.tile-2{ background:linear-gradient(140deg,#8A5CFF 0%, #4A16A8 100%); }
.course-media.tile-3{ background:linear-gradient(140deg,#4FB2FF 0%, #1740C8 100%); }
.course-media.tile-4{ background:linear-gradient(140deg,#FFB627 0%, #F0620F 100%); }
/* halftone dot texture, the classic print motif */
.course-media.tile::before{
  content:''; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.30) 1.4px, transparent 1.4px);
  background-size:16px 16px;
  mask-image:linear-gradient(150deg, transparent 30%, #000 100%);
  -webkit-mask-image:linear-gradient(150deg, transparent 30%, #000 100%);
}
.course-media .ghost{
  position:absolute; right:10px; bottom:-24px; z-index:0;
  font-family:var(--font-display); font-size:104px; font-weight:800;
  color:rgba(255,255,255,.17); line-height:1; letter-spacing:-.04em;
  user-select:none; pointer-events:none;
}
.course-ico{
  position:relative; z-index:1;
  width:82px; height:82px; border-radius:24px; color:#fff;
  background:rgba(255,255,255,.16); border:1.5px solid rgba(255,255,255,.4);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  transition:transform .5s var(--ease), background .4s var(--ease);
}
.course-card:hover .course-ico{ transform:translateY(-5px) scale(1.06); background:rgba(255,255,255,.26); }
.course-duration{
  position:absolute; top:14px; left:14px; z-index:2; background:rgba(22,9,58,.72); color:#fff;
  border:1px solid rgba(255,255,255,.26);
  padding:7px 13px; border-radius:100px; font-size:11.5px; font-weight:500; display:flex; align-items:center; gap:6px;
  backdrop-filter:blur(4px);
}
.course-body{ padding:22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.course-body h3{ font-size:18px; line-height:1.3; }
.course-body p{ font-size:13.5px; color:var(--ink-soft); flex:1; }
.course-link{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--brand); margin-top:4px; }
.course-link svg{ transition:transform .3s var(--ease); }
.course-card:hover .course-link svg{ transform:translateX(4px); }

/* Duration / eligibility meta on each course card */
.course-meta{
  display:flex; gap:14px; flex-wrap:wrap;
  margin-top:6px; padding-top:14px; border-top:1px solid var(--border);
}
.course-meta-item{ display:flex; gap:9px; align-items:center; }
.cm-ico{
  width:30px; height:30px; border-radius:9px; flex-shrink:0;
  background:var(--brand-tint); color:var(--brand);
  display:flex; align-items:center; justify-content:center;
}
.course-meta-item span strong{
  display:block; font-size:11.5px; font-weight:600; color:var(--navy); line-height:1.3;
}
.course-meta-item > span{ font-size:11.5px; color:var(--ink-soft); line-height:1.3; }

/* Feature strip below the course grid */
.course-features{
  margin-top:34px; background:#fff; border:1px solid var(--border);
  border-radius:var(--radius-md); box-shadow:var(--shadow-sm);
  padding:26px 30px; display:grid; grid-template-columns:repeat(5,1fr); gap:22px;
}
.course-feature{ display:flex; gap:12px; align-items:flex-start; }
.cf-ico{
  width:38px; height:38px; border-radius:11px; flex-shrink:0;
  background:var(--brand-tint); color:var(--brand);
  display:flex; align-items:center; justify-content:center;
}
.course-feature h4{ font-family:var(--font-display); font-size:13.5px; font-weight:600; color:var(--navy); line-height:1.3; }
.course-feature p{ font-size:12px; color:var(--ink-soft); margin-top:2px; line-height:1.35; }

/* ==========================================================================
   PLACEMENTS  (dark panel — hiring-sector marquee + career path carousel)
   ========================================================================== */
.placements-section{
  background:linear-gradient(160deg, #2A0F52 0%, var(--navy) 45%, #0F0626 100%);
  color:#fff; position:relative; overflow:hidden;
}
.placements-section::before{
  content:''; position:absolute; width:620px; height:620px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,61,163,.26), transparent 68%);
  top:-260px; right:-180px; pointer-events:none;
}
.placements-section::after{
  content:''; position:absolute; width:520px; height:520px; border-radius:50%;
  border:1.5px dashed rgba(255,255,255,.10);
  bottom:-240px; left:-160px; pointer-events:none;
}
.placements-section .container{ position:relative; z-index:1; }

.eyebrow.on-navy{ color:#FFA6D6; }
.eyebrow.on-navy::before{ background:#FFA6D6; }
em.accent-light{ font-style:italic; color:#FFA6D6; font-weight:500; }

/* minmax(0,...) is what stops the wide marquee track inside .recruiters-col
   from forcing the grid column open and pushing the row off the page. */
.placements-grid{ display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:56px; align-items:start; }
.recruiters-col{ min-width:0; }

.placements-intro h2{ color:#fff; font-size:clamp(30px,3.6vw,44px); margin-top:14px; line-height:1.12; }
.placements-intro > p{
  color:rgba(255,255,255,.76); font-size:15.5px; line-height:1.7;
  margin-top:18px; max-width:390px;
}

.placement-stats{ display:flex; flex-wrap:wrap; gap:26px 30px; margin-top:34px; }
.pstat{ display:flex; flex-direction:column; gap:4px; min-width:104px; }
.pstat-ico{
  width:40px; height:40px; border-radius:12px; margin-bottom:6px;
  background:rgba(255,61,163,.22); color:#FFB8DF;
  display:flex; align-items:center; justify-content:center;
}
.pstat-val{ font-family:var(--font-display); font-size:26px; font-weight:600; color:#fff; line-height:1.1; }
.pstat-lbl{ font-size:12.5px; color:rgba(255,255,255,.66); line-height:1.45; }
.placement-cta{ margin-top:34px; display:inline-flex; align-items:center; gap:9px; }

.recruiters-title{
  color:#fff; font-size:23px; font-weight:600; margin-bottom:20px;
}
/* --------------------------------------------------------------------------
   HIRING SECTOR MARQUEE  ("Where Our Students Get Hired")
   Replaces the old recruiter logo grid. An endless, self-scrolling carousel
   of the industries that hire graphic designers. The chip list is duplicated
   in index.html; this animation slides the track exactly half its width, so
   the loop is seamless. It pauses on hover.
   -------------------------------------------------------------------------- */
.hiring-marquee{
  position:relative; overflow:hidden; max-width:100%; padding:4px 0;
  mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.hiring-track{
  display:flex; gap:14px; width:max-content;
  animation:hire-scroll 46s linear infinite;
}
.hiring-marquee:hover .hiring-track,
.hiring-marquee:focus-within .hiring-track{ animation-play-state:paused; }
@keyframes hire-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
/* second row runs the other way, at a slightly different speed, so the two
   rows never look like one block sliding */
.hiring-track.rev{ animation-direction:reverse; animation-duration:56s; }
.marquee-label{
  font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.5); margin:0 0 10px;
}
.hiring-marquee + .marquee-label{ margin-top:22px; }

.hire-chip{
  display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
  background:#fff; color:var(--navy); border-radius:14px;
  padding:15px 22px; font-size:14px; font-weight:600; letter-spacing:-.01em;
  box-shadow:0 8px 22px rgba(0,0,0,.20);
}
.hire-chip .hc-dot{ width:11px; height:11px; border-radius:50%; flex-shrink:0; display:block; }
.hire-chip .hc-dot.c1{ background:var(--brand); }
.hire-chip .hc-dot.c2{ background:var(--c-blue); }
.hire-chip .hc-dot.c3{ background:var(--amber); }
.hire-chip .hc-dot.c4{ background:var(--c-violet); }
.hire-chip .hc-dot.c5{ background:var(--c-cyan); }

.placement-support{
  margin-top:22px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius-md); padding:20px 22px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
.support-item{ display:flex; gap:11px; align-items:flex-start; }
.si-ico{
  width:34px; height:34px; border-radius:10px; flex-shrink:0;
  background:rgba(255,61,163,.24); color:#FFB8DF;
  display:flex; align-items:center; justify-content:center;
}
.support-item strong{ display:block; font-size:12.5px; font-weight:600; color:#fff; line-height:1.35; }
.support-item span{ display:block; font-size:12.5px; color:rgba(255,255,255,.62); line-height:1.35; }

/* --- student success stories (carousel) --- */
.placed-head{
  margin-top:84px; margin-bottom:26px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.placed-head h2{ color:#fff; margin-top:12px; }
.placed-nav{ display:flex; gap:10px; flex-shrink:0; }
.pnav{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background:transparent; border:1.5px solid rgba(255,255,255,.28); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.pnav:hover{ background:var(--brand); border-color:var(--brand); transform:translateY(-2px); }
.pnav[disabled]{ opacity:.32; cursor:default; transform:none; background:transparent; border-color:rgba(255,255,255,.28); }

.placed-carousel{ position:relative; }
.placed-track{
  display:flex; gap:22px; overflow-x:auto; scroll-behavior:smooth;
  scroll-snap-type:x mandatory; padding:4px 4px 34px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.placed-track::-webkit-scrollbar{ display:none; }

.placed-card{ flex:0 0 320px; scroll-snap-align:start; display:flex; }

/* --------------------------------------------------------------------------
   CAREER PATH CARD  (replaces the old student photo card)
   A glass card on the dark placements panel, with a coloured top bar, a
   gradient icon tile, a big ghost number and software tags. Seven colour
   tones, one per card — .tone-1 ... .tone-7.
   -------------------------------------------------------------------------- */
.path-card{
  position:relative; width:100%; overflow:hidden;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.14);
  border-radius:22px; padding:30px 24px 24px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:transform .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.path-card::before{                       /* coloured bar across the top */
  content:''; position:absolute; top:0; left:0; right:0; height:5px;
  background:var(--tone,var(--brand));
}
.path-card::after{                        /* soft colour glow, top-right */
  content:''; position:absolute; width:230px; height:230px; border-radius:50%;
  top:-130px; right:-90px; pointer-events:none; opacity:.5;
  background:radial-gradient(circle, var(--tone,var(--brand)), transparent 70%);
}
.placed-card:hover .path-card{
  transform:translateY(-7px); background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.26); box-shadow:0 22px 46px rgba(0,0,0,.34);
}
.path-num{
  position:absolute; top:16px; right:20px; z-index:1;
  font-family:var(--font-display); font-size:40px; font-weight:800;
  color:rgba(255,255,255,.16); line-height:1; letter-spacing:-.03em;
}
.path-ico{
  position:relative; z-index:1;
  width:54px; height:54px; border-radius:16px; color:#fff;
  background:var(--tone,var(--brand));
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px; box-shadow:0 10px 26px rgba(0,0,0,.32);
}
.path-card h4{
  position:relative; z-index:1;
  font-family:var(--font-display); font-size:17px; font-weight:600;
  color:#fff; line-height:1.3; margin-bottom:9px;
}
.path-desc{
  position:relative; z-index:1;
  font-size:13.2px; color:rgba(255,255,255,.72); line-height:1.6;
  margin-bottom:16px; min-height:84px;
}
.path-tags{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:7px;
  padding-top:14px; border-top:1px solid rgba(255,255,255,.13); }
.path-tags span{
  font-size:11px; font-weight:600; letter-spacing:.02em;
  color:rgba(255,255,255,.9); background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  padding:5px 11px; border-radius:100px;
}
.path-card.tone-1{ --tone:#E4007E; }
.path-card.tone-2{ --tone:#7B3FE4; }
.path-card.tone-3{ --tone:#2F7BFF; }
.path-card.tone-4{ --tone:#FF7A2F; }
.path-card.tone-5{ --tone:#00B8D4; }
.path-card.tone-6{ --tone:#12B981; }
.path-card.tone-7{ --tone:#FFC01F; }

/* ==========================================================================
   WHY CHOOSE — 2 column layout (image+stats / content+checklist)
   ========================================================================== */
.why-layout-v2{
  display:grid; grid-template-columns:.86fr 1.14fr;
  column-gap:52px; row-gap:28px; align-items:center;
}
.why-col-media{ grid-column:1; grid-row:1; width:100%; position:relative; display:flex; flex-direction:column; }
.why-media-frame{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); flex:1 1 auto; min-height:430px; background:#1B0F3E; }
.why-media-frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center center; }

.why-col-content{ grid-column:2; grid-row:1; }
.why-col-content h2{ margin:12px 0 14px; }
.why-desc{ font-size:15px; color:var(--ink-soft); max-width:520px; margin-bottom:24px; }



.why-checklist{ display:flex; flex-direction:column; gap:14px; max-width:520px; }
.why-checklist li{ display:flex; align-items:flex-start; gap:12px; font-size:14.5px; color:var(--ink); font-weight:500; line-height:1.4; }
.why-checklist .check{
  width:22px; height:22px; border-radius:50%; background:var(--brand); color:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; margin-top:1px;
}

/* ==========================================================================
   TESTIMONIALS / REVIEWS
   ========================================================================== */
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.testi-card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius-md); padding:26px; box-shadow:var(--shadow-sm); transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.testi-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.testi-top{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.testi-top img{ width:54px; height:54px; border-radius:50%; object-fit:cover; border:2px solid var(--sky-deep); }
.testi-top .name{ font-weight:600; color:var(--navy); font-size:14.5px; }
.testi-top .course{ font-size:12px; color:var(--ink-soft); }
.testi-card blockquote{ font-size:14.5px; color:var(--ink-soft); font-style:italic; margin-bottom:14px; line-height:1.65; }
.stars{ color:var(--amber); font-size:14px; letter-spacing:2px; }

.reviews-panel{
  margin-top:56px; background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:34px 36px 30px; box-shadow:var(--shadow-sm);
}
.reviews-head{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-bottom:24px; border-bottom:1px solid var(--border); margin-bottom:24px; }
.google-left{ display:flex; align-items:center; gap:16px; }
.google-left h3{ font-size:18px; }
.google-left p{ font-size:12.5px; color:var(--ink-soft); margin-top:3px; }
.google-score{ display:flex; align-items:center; gap:10px; }
.google-score .val{ font-family:var(--font-display); font-size:26px; font-weight:600; color:var(--navy); }
.google-score .meta{ font-size:11.5px; color:var(--ink-soft); }
.stars.small{ font-size:12px; }

.review-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.review-item{ background:var(--sky); border-radius:16px; padding:18px 20px; }
.review-item-top{ display:flex; align-items:center; gap:11px; margin-bottom:10px; }
.review-item .avatar{
  width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--brand),var(--brand-deep));
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex-shrink:0;
}
.review-item .rname{ font-size:13px; font-weight:600; color:var(--navy); }
.review-item p{ font-size:13px; color:var(--ink-soft); line-height:1.55; }

.reviews-more-link{
  display:inline-flex; align-items:center; gap:7px; margin-top:22px; font-size:13px; font-weight:600;
  color:var(--brand); letter-spacing:.01em;
}
.reviews-more-link svg{ transition:transform .3s var(--ease); }
.reviews-more-link:hover svg{ transform:translateX(4px); }

/* ==========================================================================
   SPLIT SECTIONS — picture on the left, copy on the right
   Two of these replaced the old "Skills Covered" and "Key Takeaways"
   tick-card panels.
     .split-dark   dark creative band  ("Join Wisdom College for ...")
     .split-light  soft band with a white card ("Top-Rated Career Courses")
   ========================================================================== */
.split-grid{
  display:grid; grid-template-columns:1fr 1.08fr; gap:52px; align-items:center;
}
.split-media{ position:relative; }
.split-media img{
  display:block; width:100%; height:auto;
  border-radius:var(--radius-lg);
  box-shadow:0 26px 64px rgba(20,8,50,.30);
}

/* ---- dark band ---- */
.split-dark{
  position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(900px 520px at 88% 8%, rgba(255,61,163,.30) 0%, transparent 62%),
    radial-gradient(760px 600px at 6% 94%, rgba(47,123,255,.26) 0%, transparent 64%),
    linear-gradient(112deg,#150752 0%,#250B66 42%,#4A1191 74%,#7A1483 100%);
}
.split-dark .split-copy h2{
  font-family:var(--font-display); font-weight:700; color:#fff;
  font-size:clamp(26px,3.4vw,40px); line-height:1.24; letter-spacing:-.015em;
}
.split-dark .split-copy h2 em.accent-warm{
  font-style:normal; color:var(--amber);
}
.split-dark .split-copy p{
  margin-top:18px; font-size:15.5px; line-height:1.72; color:rgba(255,255,255,.82);
  max-width:620px;
}
.split-dark .split-copy .hl-text{ color:var(--brand-light); font-weight:600; }
.split-btns{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.split-btns .btn svg{ margin-left:6px; transition:transform .3s var(--ease); }
.split-btns .btn:hover svg{ transform:translateX(4px); }

/* ---- light band, white card ---- */
.split-light .split-panel{
  background:#fff; border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
  padding:42px 44px 44px; position:relative; overflow:hidden;
}
.split-light .split-panel::after{
  content:''; position:absolute; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(228,0,126,.07), transparent 70%);
  top:-230px; right:-170px; pointer-events:none;
}
.split-light .split-panel h2{
  position:relative; z-index:1; text-align:center;
  font-family:var(--font-display); font-weight:700; color:var(--navy);
  font-size:clamp(24px,3vw,34px); letter-spacing:-.015em;
}
.split-light .split-panel h2 em.accent{ font-style:normal; color:var(--brand); }

/* diamond-marker list */
.dia-list{ position:relative; z-index:1; margin-top:30px; display:grid; gap:24px; }
.dia-item{ display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start; }
.dia-item .dia{
  width:22px; height:22px; flex-shrink:0; margin-top:20px;
  background:linear-gradient(135deg,var(--brand-bright),var(--brand));
  transform:rotate(45deg); border-radius:5px;
  box-shadow:0 6px 16px rgba(228,0,126,.32);
}
.dia-item h3{
  font-family:var(--font-display); font-size:17.5px; font-weight:600;
  color:var(--ink); letter-spacing:-.01em;
}
.dia-item p{ margin-top:7px; font-size:14.2px; line-height:1.62; color:var(--ink-soft); }
.btn-wide{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin:34px auto 0; width:fit-content;
}
.btn-wide svg{ transition:transform .3s var(--ease); }
.btn-wide:hover svg{ transform:translateX(4px); }

/* ==========================================================================
   THREE HIGHLIGHT CARDS — under the hero
   Solid colour cards with the asymmetric "leaf" corner shape: a big
   sweeping curve on the top-left and bottom-right, square on the other
   two corners. White outline icon and white text on top.

     the shape   -> .hl-card{ border-radius:58px 0 58px 0; }
                    (first number = top-left, third = bottom-right)
     the size    -> .hl-card{ padding } and .hl-grid{ max-width }
     the colours -> .hc-1 orange / .hc-2 green / .hc-3 magenta
   ========================================================================== */
.highlight-cards{ background:var(--sky); }
.highlight-cards .section-head h2{
  font-family:var(--font-display); font-weight:700; color:var(--navy);
  font-size:clamp(24px,3.3vw,38px); line-height:1.28; letter-spacing:-.02em;
}
.highlight-cards .hc-sub{
  margin-top:10px; font-size:clamp(16px,2vw,22px); font-weight:600;
  color:var(--navy); opacity:.86; line-height:1.4;
}

/* medium-width grid — the cards no longer run the full page width */
.hl-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
  margin:44px auto 0; max-width:1040px;
}

.hl-card{
  position:relative; overflow:hidden; text-align:center; color:#fff;
  border-radius:58px 0 58px 0;        /* <- the sweeping corner shape */
  padding:36px 26px 38px;
  box-shadow:0 16px 40px rgba(30,10,60,.18);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.hl-card:hover{ transform:translateY(-8px); box-shadow:0 28px 62px rgba(30,10,60,.28); }

/* soft sheen across the top of each card */
.hl-card::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(160deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 52%);
}

.hc-1{ background:linear-gradient(150deg,#FF9436 0%,#D9590A 100%); }
.hc-2{ background:linear-gradient(150deg,#19CD92 0%,#068257 100%); }
.hc-3{ background:linear-gradient(150deg,#FF3DA3 0%,#A8005C 100%); }

.hl-card .hl-ico{
  display:flex; align-items:center; justify-content:center;
  width:auto; height:auto; margin:0 auto 18px; color:#fff;
  position:relative; z-index:1;
}
.hl-card h3{
  position:relative; z-index:1;
  font-family:var(--font-display); font-size:18px; font-weight:700;
  color:#fff; letter-spacing:.02em; line-height:1.35; text-transform:uppercase;
}
.hl-card p{
  position:relative; z-index:1;
  margin-top:14px; font-size:13.8px; line-height:1.65; color:rgba(255,255,255,.88);
}

/* ==========================================================================
   FREE DEMO CLASS — blue band with the "Drop Your Details" card
   ========================================================================== */
.demo-section{ padding:0; }
.demo-band{
  position:relative; overflow:hidden; border-radius:var(--radius-lg);
  background:
    radial-gradient(900px 520px at 88% 8%, rgba(255,120,200,.45) 0%, transparent 60%),
    linear-gradient(122deg, #5A11A8 0%, #A5107F 52%, #E4007E 100%);
  padding:56px 54px; color:#fff;
  display:grid; grid-template-columns:1.12fr .88fr; gap:48px; align-items:center;
  box-shadow:var(--shadow-lg);
}
.demo-band::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.45;
  background-image:radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px);
  background-size:24px 24px;
  mask-image:linear-gradient(120deg, transparent 45%, #000 100%);
  -webkit-mask-image:linear-gradient(120deg, transparent 45%, #000 100%);
}
.demo-copy{ position:relative; z-index:1; }
.demo-copy h2{ color:#fff; font-weight:700; font-size:clamp(27px,3.6vw,40px); line-height:1.14; margin-bottom:18px; }
.demo-copy h2 .rocket{ margin-right:6px; }
.demo-copy p{ font-size:16px; line-height:1.72; color:rgba(255,255,255,.9); margin-bottom:26px; max-width:560px; }
.demo-copy strong{ color:#FFD37A; font-weight:600; }
.demo-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.btn-whatsapp{ background:#25D366; color:#fff; box-shadow:0 14px 32px rgba(37,211,102,.32); }
.btn-whatsapp:hover{ background:#1EBE5A; color:#fff; transform:translateY(-3px); }

.demo-card{
  position:relative; z-index:1;
  background:#fff; border-radius:var(--radius-md); padding:28px 26px 26px;
  box-shadow:0 30px 70px rgba(4,16,60,.3);
}
.demo-card h3{ text-align:center; font-size:20px; color:var(--navy); margin-bottom:6px; }
.demo-card .demo-note{ text-align:center; font-size:12.5px; color:var(--ink-soft); margin-bottom:18px; line-height:1.55; }
.demo-card .demo-note strong{ color:var(--brand); font-weight:600; }
.demo-card textarea{
  width:100%; padding:11px 14px; border:1.5px solid var(--border); border-radius:10px;
  font-size:13.5px; color:var(--ink); background:#FAFBFF; resize:vertical; min-height:78px;
  transition:border-color .25s, background .25s;
}
.demo-card textarea:focus{ border-color:var(--brand); background:#fff; outline:none; }
.phone-row{ display:flex; gap:10px; }
.phone-row .cc{
  flex:0 0 92px; padding:11px 10px; border:1.5px solid var(--border); border-radius:10px;
  background:#FAFBFF; font-size:13.5px; color:var(--ink);
}
.phone-row input{ flex:1; }

/* ==========================================================================
   TRUST STRIP under the hero
   ========================================================================== */
.trust-strip{
  background:linear-gradient(100deg,#16093A 0%, #2A0F52 55%, #4A1470 100%);
  color:#fff; padding:26px 0;
}
.trust-inner{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.trust-item{ display:flex; align-items:center; gap:13px; }
.trust-item .ti-ico{
  width:42px; height:42px; border-radius:12px; flex-shrink:0;
  background:rgba(255,61,163,.22); color:#FFB8DF;
  display:flex; align-items:center; justify-content:center;
}
.trust-item strong{ display:block; font-family:var(--font-display); font-size:19px; font-weight:600; color:#fff; line-height:1.15; }
.trust-item span{ display:block; font-size:12.5px; color:rgba(255,255,255,.66); line-height:1.35; margin-top:2px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background:var(--navy); color:rgba(255,255,255,.72); padding:72px 0 0; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:52px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-brand img{ height:56px; width:auto; margin-bottom:16px; background:#fff; padding:8px 14px; border-radius:12px; }
.footer-brand p{ font-size:13.5px; line-height:1.7; max-width:280px; color:rgba(255,255,255,.6); }
.social-row{ display:flex; gap:10px; margin-top:20px; }
.social-row a{ width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; transition:background .3s; }
.social-row a:hover{ background:var(--brand); }
.footer-col h4{ color:#fff; font-size:14px; font-weight:600; margin-bottom:18px; letter-spacing:.02em; }
.footer-col ul li{ margin-bottom:11px; }
.footer-col ul li a{ font-size:13.5px; color:rgba(255,255,255,.65); transition:color .25s, padding-left .25s; }
.footer-col ul li a:hover{ color:#fff; padding-left:4px; }
.footer-contact li{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:rgba(255,255,255,.65); }
.footer-contact svg{ flex-shrink:0; color:var(--brand); margin-top:2px; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:24px 0; font-size:12.5px; color:rgba(255,255,255,.5); flex-wrap:wrap; gap:10px; }
.footer-bottom a{ color:rgba(255,255,255,.5); }
.footer-bottom a:hover{ color:#fff; }

/* ==========================================================================
   POPUP / MODAL
   ========================================================================== */
.modal-overlay{
  position:fixed; inset:0; background:rgba(20,24,58,.6); backdrop-filter:blur(4px); z-index:1000;
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease);
}
.modal-overlay.active{ opacity:1; pointer-events:auto; }
/* The pop-up is deliberately SHORT: logo, four fields, two buttons. The
   admissions tag, the heading, "Limited Seats Available" and the paragraph
   were removed so the whole form fits on a phone screen without scrolling. */
.modal-box{
  background:#fff; border-radius:28px; max-width:400px; width:100%; padding:30px 26px 24px;
  position:relative; box-shadow:var(--shadow-lg); transform:scale(.92) translateY(20px); transition:transform .4s var(--ease);
  max-height:92vh; overflow-y:auto;
}
.modal-overlay.active .modal-box{ transform:scale(1) translateY(0); }
.modal-close{
  position:absolute; top:16px; right:16px; width:38px; height:38px; border-radius:50%; background:var(--sky);
  display:flex; align-items:center; justify-content:center; color:var(--navy); transition:background .25s, transform .25s;
}
.modal-close:hover{ background:var(--brand); color:#fff; transform:rotate(90deg); }
.modal-logo{ text-align:center; margin-bottom:20px; }
.modal-logo img{ height:44px; width:auto; margin:0 auto; }
.modal-box .field{ margin-bottom:14px; }
.modal-box .field label{ font-size:14px; font-weight:600; }
.modal-box .field input, .modal-box .field select{ padding:14px 16px; font-size:14.5px; border-radius:14px; }
.modal-box .btn{ padding:15px 22px; font-size:13.5px; border-radius:40px; }
.modal-box .btn-block{ width:100%; }

/* the outlined "Call Now" button under the submit button */
.modal-call{
  display:flex; align-items:center; justify-content:center; gap:9px;
  margin-top:12px;
  background:#fff; color:var(--brand);
  border:2px solid var(--brand);
}
.modal-call:hover{ background:var(--brand); color:#fff; }

/* ==========================================================================
   SUCCESS FULLSCREEN
   ========================================================================== */
.success-overlay{
  position:fixed; inset:0; background:#fff; z-index:1100; display:flex; align-items:center; justify-content:center;
  padding:24px; opacity:0; pointer-events:none; transition:opacity .4s var(--ease);
}
.success-overlay.active{ opacity:1; pointer-events:auto; }
.success-box{ max-width:460px; text-align:center; }
.success-check{
  width:88px; height:88px; border-radius:50%; border:3px solid var(--success); display:flex; align-items:center;
  justify-content:center; margin:0 auto 26px; color:var(--success); animation:pop .5s var(--ease);
}
@keyframes pop{ 0%{ transform:scale(0); opacity:0;} 70%{ transform:scale(1.12);} 100%{ transform:scale(1); opacity:1;} }
.success-box h2{ font-size:28px; margin-bottom:14px; }
.success-box p{ color:var(--ink-soft); font-size:15px; margin-bottom:8px; }
.success-divider{ height:1px; background:var(--border); margin:30px 0; }
.success-box .review-prompt{ font-size:13.5px; color:var(--ink-soft); margin-bottom:18px; }
.success-actions{ display:flex; flex-direction:column; gap:12px; margin-top:22px; }

.form-error-msg{
  display:none; background:#FDEDEF; border:1px solid #F3C2CA; color:#B23A4D; font-size:13px; padding:12px 16px;
  border-radius:12px; margin-top:14px; align-items:center; gap:8px;
}
.form-error-msg.show{ display:flex; }

/* ==========================================================================
   FLOATING ELEMENTS
   ========================================================================== */
.floating-stack{ position:fixed; right:22px; bottom:22px; z-index:400; display:flex; flex-direction:column; gap:14px; align-items:flex-end; }
.fab{
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-md); color:#fff; transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.fab:hover{ transform:translateY(-4px) scale(1.04); }
.fab-whatsapp{ background:#25D366; }
.fab-call{ background:var(--navy); }
.fab-enquire{
  border-radius:100px; width:auto; padding:0 22px; background:linear-gradient(135deg,var(--brand),var(--brand-deep));
  font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; gap:8px;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1100px){
  /* new sections */
  .split-grid{ gap:38px; }
  .split-light .split-panel{ padding:34px 30px 36px; }
  .hl-grid{ gap:20px; max-width:920px; }
  .hl-card{ padding:32px 20px 34px; border-radius:48px 0 48px 0; }
  .hero-bg-art{ right:20%; max-width:46%; opacity:.6; }
  .hero{ min-height:auto; padding:36px 0 48px; }
  .hero-grid{ grid-template-columns:1fr; gap:32px; }
  .hero-form-col{ max-width:440px; }
  .why-layout-v2{ grid-template-columns:1fr; }
  .why-col-media{ grid-column:1; grid-row:1; width:100%; margin:0 auto; }
  .why-col-content{ grid-column:1; grid-row:2; }
  .why-media-frame{ min-height:300px; }
  .placements-grid{ grid-template-columns:minmax(0,1fr); gap:44px; }
  .placements-intro > p{ max-width:100%; }
  .course-grid{ grid-template-columns:repeat(2,1fr); }
  .course-features{ grid-template-columns:repeat(3,1fr); }
  .review-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .hero{ padding:48px 0 56px; }
  .hero-grid{ grid-template-columns:1fr; gap:34px; }
  .hero-form-col{ max-width:460px; width:100%; }
  .demo-band{ grid-template-columns:1fr; gap:32px; padding:44px 34px; }
  .demo-copy p{ max-width:100%; }
}

@media (max-width:860px){
  /* new sections */
  .split-grid{ grid-template-columns:1fr; gap:32px; }
  .split-media{ max-width:520px; margin:0 auto; }
  .split-dark .split-copy{ text-align:center; }
  .split-dark .split-copy p{ margin-left:auto; margin-right:auto; }
  .split-btns{ justify-content:center; }
  .hl-grid{ grid-template-columns:repeat(2,1fr); gap:18px; margin-top:34px; }
  .hl-card:last-child{ grid-column:1 / -1; max-width:440px; margin:0 auto; width:100%; }
  /* the hero art moves behind everything and softens, so the enquiry
     form and the headline stay perfectly readable on tablets */
  .hero-bg-art{
    right:-16%; height:86%; max-width:96%; opacity:.3;
    mask-image:linear-gradient(96deg, transparent 4%, #000 58%);
    -webkit-mask-image:linear-gradient(96deg, transparent 4%, #000 58%);
  }
  .main-nav{ position:fixed; top:80px; left:16px; right:16px; background:#fff; border-radius:20px; box-shadow:var(--shadow-lg);
    flex-direction:column; align-items:flex-start; padding:22px 26px; gap:18px; border:1px solid var(--border);
    transform:translateY(-14px); opacity:0; pointer-events:none; transition:.3s var(--ease); }
  .main-nav.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav-toggle{ display:flex; }
  .header-phone span{ display:none; }
  .testi-grid{ grid-template-columns:1fr; }
  .why-checklist li{ font-size:13.5px; }
  .review-grid{ grid-template-columns:1fr; }
  .reviews-panel{ padding:26px 22px; }
  .placement-support{ grid-template-columns:repeat(2,1fr); }
  .course-features{ grid-template-columns:repeat(2,1fr); padding:22px; }
  .placed-head{ margin-top:60px; }
  .google-panel{ flex-direction:column; align-items:flex-start; }
  .tick-grid{ grid-template-columns:1fr; }
  .feature-panel{ padding:28px 22px 30px; }
  .demo-band{ padding:38px 24px; }
  .trust-inner{ grid-template-columns:repeat(2,1fr); gap:18px; }
}

@media (max-width:600px){
  /* new sections */
  .hl-grid{ grid-template-columns:1fr; }
  .hl-card{ padding:30px 24px 32px; border-radius:44px 0 44px 0; }
  .hl-card:last-child{ max-width:none; }
  .hl-card h3{ font-size:17px; }
  .split-light .split-panel{ padding:28px 20px 30px; }
  .dia-item{ gap:14px; }
  .dia-item .dia{ width:18px; height:18px; margin-top:16px; }
  .dia-item h3{ font-size:16.5px; }
  .split-btns .btn{ width:100%; }
  .btn-wide{ width:100%; }
  .hero-bg-art{ opacity:.22; height:74%; right:-24%; }
  .section{ padding:64px 0; }
  .container{ padding:0 18px; }
  .course-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .enquiry-card{ padding:26px 22px; }
  .placement-support{ grid-template-columns:1fr; }
  .hire-chip{ font-size:13px; padding:13px 18px; }
  .hiring-track{ animation-duration:34s; }
  .course-features{ grid-template-columns:1fr; }
  .placement-stats{ gap:20px 24px; }
  .placed-card{ flex:0 0 272px; }
  .course-media .ghost{ font-size:84px; }
  /* the mesh scales up a lot in a narrow, tall hero — dial it back so the
     lines read as texture rather than as big diagonal streaks */
  .hero-bg-mesh{ opacity:.26; }
  /* on a narrow, tall hero the text runs the full width, so the photo is
     pulled well back and the mask is dropped */
  .hero-bg-photo{
    opacity:.22;
    mask-image:linear-gradient(180deg, transparent 8%, #000 55%);
    -webkit-mask-image:linear-gradient(180deg, transparent 8%, #000 55%);
  }
  .hero{ padding:44px 0 52px; }
  .hero-point{ width:100%; font-size:13.8px; padding:12px 16px; }
  .hero-points{ gap:10px; }
  .hero-btns .btn{ width:100%; }
  .trust-inner{ grid-template-columns:1fr; }
  .header-cta .btn{ padding:12px 18px; font-size:12px; }
  .hero-mini-stats{ gap:22px; }
  .hero-mini-stats .n{ font-size:20px; }
  .enquiry-card.compact{ padding:20px 18px; }
}


/* Honeypot spam-trap field — invisible to real visitors, but still
   present in the DOM/tab order removed, so simple bots that auto-fill
   every input end up giving themselves away. */
.hp-field{
  position:absolute !important;
  left:-9999px !important;
  top:-9999px !important;
  width:1px; height:1px;
  overflow:hidden;
}

/* ==========================================================================
   VERSION 14 — PHOTOGRAPHS, COMPANY LOGOS AND PLACED-STUDENT CARDS
   Everything in this block was added in version 14. Nothing above it was
   changed, so deleting this block returns the page to the version 13 look.
   ========================================================================== */

/* ---- 1. REAL PHOTOGRAPHS ON THE FOUR COURSE CARDS -----------------------
   The coloured .tile-N gradient is still there; it now sits OVER the photo
   as a tint so the white icon, the ghost number and the duration pill stay
   readable. Weaker or stronger tint -> change the .course-tint opacity.   */
.course-media.tile .course-photo{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s var(--ease);
}
.course-card:hover .course-media.tile .course-photo{ transform:scale(1.07); }
.course-media.tile::after{                  /* the colour tint over the photo */
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(150deg, var(--tint-a,#FF3DA3) 0%, var(--tint-b,#C1006A) 100%);
  opacity:.60; mix-blend-mode:multiply;
}
.course-media.tile-1{ --tint-a:#FF3DA3; --tint-b:#C1006A; }
.course-media.tile-2{ --tint-a:#8A5CFF; --tint-b:#4A16A8; }
.course-media.tile-3{ --tint-a:#4FB2FF; --tint-b:#1740C8; }
.course-media.tile-4{ --tint-a:#FFB627; --tint-b:#F0620F; }
/* keep the halftone texture, the icon, the number and the pill above the photo */
.course-media.tile::before{ z-index:2; }
.course-media .ghost{ z-index:2; }
.course-ico{ z-index:3; }
.course-duration{ z-index:4; }

/* ---- 2. COMPANY LOGO GRID IN THE PLACEMENTS PANEL --------------------- */
.recruiter-logos{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
  margin:0 0 26px;
}
.rec-logo{
  display:flex; flex-direction:column; align-items:center; gap:9px;
  padding:14px 8px 12px; border-radius:16px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13);
  transition:transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
}
.rec-logo:hover{
  transform:translateY(-4px); background:rgba(255,255,255,.11);
  border-color:rgba(255,255,255,.26);
}
.rl-mark{
  width:62px; height:62px; border-radius:14px; overflow:hidden;
  background:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(0,0,0,.22);
}
.rl-mark img{ width:100%; height:100%; object-fit:contain; display:block; }
.rl-name{
  font-size:11px; line-height:1.35; font-weight:600; text-align:center;
  color:rgba(255,255,255,.86);
}

/* ---- 3. PLACED-STUDENT CARDS IN THE CAROUSEL -------------------------- */
.path-card.student{ padding:18px 18px 20px; display:flex; flex-direction:column; }
.path-card.student .placed-photo{
  position:relative; z-index:1; border-radius:16px; overflow:hidden;
  aspect-ratio:4/5; background:rgba(255,255,255,.08); margin-bottom:16px;
}
.path-card.student .placed-photo img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s var(--ease);
}
.placed-card:hover .path-card.student .placed-photo img{ transform:scale(1.05); }
.placed-year{
  position:absolute; left:10px; bottom:10px; z-index:2;
  background:rgba(16,6,44,.78); color:#fff; border:1px solid rgba(255,255,255,.24);
  padding:4px 11px; border-radius:100px; font-size:11px; font-weight:600;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.path-card.student h4{ font-size:18px; margin-bottom:3px; }
.placed-role{
  position:relative; z-index:1;
  font-size:13px; color:rgba(255,255,255,.72); margin-bottom:12px;
}
.path-card.student h4 + .placed-company{ margin-top:9px; }
.placed-company{
  position:relative; z-index:1; display:flex; align-items:center; gap:10px;
  padding-top:13px; margin-top:auto; border-top:1px solid rgba(255,255,255,.13);
}
.pc-logo{
  flex:0 0 34px; width:34px; height:34px; border-radius:9px; overflow:hidden;
  background:#fff; display:flex; align-items:center; justify-content:center;
}
.pc-logo img{ width:100%; height:100%; object-fit:contain; display:block; }
.pc-initial{
  background:var(--tone,var(--brand)); color:#fff;
  font-family:var(--font-display); font-size:16px; font-weight:700;
}
.pc-name{ font-size:13px; font-weight:600; color:#fff; line-height:1.3; }
.path-card.student .path-tags{ margin-top:13px; border-top:0; padding-top:0; }

@media (max-width:860px){
  .recruiter-logos{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:520px){
  .recruiter-logos{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .rl-mark{ width:54px; height:54px; }
}

/* ==========================================================================
   SOFTWARE, AI TOOLS & TOPICS  (section id="software")
   Tile grid of the software taught. The last tile (.sw-card-dark) is the
   dark "100% Placement Assistance" panel.
   To change the tile colour, edit .sw-card background below.
   ========================================================================== */
.software-section .section-head{ max-width:820px; }
.software-section .section-head h2{ margin-bottom:6px; }
.software-section .sw-subhead{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(21px,2.6vw,30px); line-height:1.25;
  color:var(--brand); margin-top:4px;
}
.sw-rule{
  display:block; width:120px; height:5px; border-radius:99px; margin:18px auto 0;
  background:linear-gradient(90deg,var(--brand),var(--brand-deep));
}
.sw-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
  align-items:stretch;
}
.sw-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-md);
  padding:26px 20px; display:flex; align-items:center; gap:16px;
  box-shadow:var(--shadow-sm); transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.sw-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.sw-logo{
  flex:0 0 58px; width:58px; height:58px; border-radius:50%;
  background:#fff; box-shadow:var(--shadow-sm);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.sw-logo img{ width:40px; height:40px; object-fit:contain; }
.sw-card h3{ font-size:16.5px; font-weight:600; line-height:1.35; color:var(--ink); }
.sw-card-dark{
  background:var(--navy); border-color:var(--navy);
  flex-direction:column; align-items:flex-start; justify-content:center; gap:14px;
  padding:30px 26px;
}
.sw-card-dark h3{ color:#fff; font-size:24px; font-weight:600; line-height:1.3; }
.sw-dark-link{ color:var(--brand-light); font-weight:600; font-size:15px; }
.sw-dark-link:hover{ color:#fff; }

/* ==========================================================================
   STILL HAVE QUESTIONS?  (section id="demo")
   Replaced the old free-demo band and its form.
   ========================================================================== */
.questions-band{
  position:relative; overflow:hidden; border-radius:var(--radius-lg);
  background:
    radial-gradient(900px 520px at 88% 8%, rgba(255,120,200,.45) 0%, transparent 60%),
    linear-gradient(122deg, #5A11A8 0%, #A5107F 52%, #E4007E 100%);
  padding:56px 54px; color:#fff; text-align:center;
  box-shadow:var(--shadow-lg);
}
.questions-band h2{ color:#fff; font-weight:700; font-size:clamp(27px,3.6vw,40px); line-height:1.2; }
.questions-phone{
  display:inline-flex; align-items:center; gap:12px; margin-top:22px;
  background:#fff; color:var(--brand);
  font-family:var(--font-display); font-weight:700; font-size:clamp(19px,2.4vw,26px);
  padding:14px 30px; border-radius:99px; box-shadow:0 18px 40px rgba(4,16,60,.28);
  transition:transform .3s var(--ease);
}
.questions-phone:hover{ transform:translateY(-3px); color:var(--brand); }

@media (max-width:1024px){
  .sw-grid{ grid-template-columns:repeat(3,1fr); gap:18px; }
}
@media (max-width:768px){
  .sw-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .sw-card{ padding:20px 16px; gap:12px; }
  .sw-logo{ flex:0 0 48px; width:48px; height:48px; }
  .sw-logo img{ width:32px; height:32px; }
  .sw-card h3{ font-size:14.5px; }
  .sw-card-dark h3{ font-size:20px; }
  .questions-band{ padding:44px 26px; }
}
@media (max-width:480px){
  .sw-grid{ grid-template-columns:1fr; }
  .sw-card-dark{ align-items:center; text-align:center; }
}

/* ==========================================================================
   VERSION 15 — PHOTO HERO, BROCHURE FORM, SLIMMER QUESTIONS BAND
   Everything in this block was added in version 15. Nothing above it was
   changed, so deleting this block returns the page to the version 14 look.
   ========================================================================== */

/* ---------- 15.1  PHOTOGRAPHIC HERO ----------
   Applies only when the hero carries the extra class .hero-photo, so the
   original gradient hero rules above are left untouched.
   - .hero-bg-photo now shows at full strength (no fade-out mask)
   - .hero-bg-wash is a dark scrim instead of the magenta gradient:
     heavy on the LEFT (behind the headline), light on the RIGHT so the
     artwork reads through around the brochure card.
   To make the picture brighter, lower the alpha values in the first
   linear-gradient below. To make the headline safer, raise them.        */
.hero.hero-photo{ background:#0A0718; padding:78px 0 84px; }
.hero.hero-photo::after{ display:none; }

.hero.hero-photo .hero-bg-photo{
  opacity:1;
  object-position:center 38%;
  mask-image:none; -webkit-mask-image:none;
}
.hero.hero-photo .hero-bg-wash{
  background:
    linear-gradient(96deg,
      rgba(8,5,22,.94)  0%,
      rgba(8,5,22,.90) 26%,
      rgba(9,6,26,.72) 46%,
      rgba(10,7,30,.34) 66%,
      rgba(10,7,30,.46) 100%),
    linear-gradient(180deg, rgba(6,4,18,.55) 0%, rgba(6,4,18,0) 30%, rgba(6,4,18,.48) 100%);
}
.hero.hero-photo .hero-grid{ grid-template-columns:1.22fr .78fr; gap:44px; }
.hero.hero-photo .hero-copy h1{
  font-size:clamp(30px,4.3vw,52px); line-height:1.12; margin-bottom:22px;
  text-shadow:0 6px 34px rgba(0,0,0,.55);
}
.hero.hero-photo .hero-copy .sub{
  font-size:16.5px; line-height:1.85; max-width:600px; margin-bottom:0;
  color:rgba(255,255,255,.94); text-shadow:0 2px 16px rgba(0,0,0,.55);
}

/* ---------- 15.2  BROCHURE DOWNLOAD CARD ---------- */
.brochure-card{ padding:26px 24px 22px; border:2px solid var(--brand); }
.brochure-card h3{
  font-family:var(--font-display); font-size:21px; font-weight:700;
  text-align:center; color:var(--navy); margin-bottom:18px; line-height:1.25;
}
.brochure-card .field{ margin-bottom:14px; }
.brochure-card .field input{ padding:13px 16px; font-size:14px; border-radius:12px; }
.brochure-card .btn-brochure{ margin-top:4px; font-size:15px; padding:14px 20px; }
.brochure-card .form-note{ margin-top:12px; }

/* label kept in the markup for screen readers, hidden on screen because the
   placeholder already names the field */
.lbl-hidden{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* green confirmation line under the brochure form */
.form-ok-msg{
  display:none; background:#ECFBF3; border:1px solid #BCEBD2; color:#127A46;
  font-size:13px; padding:12px 16px; border-radius:12px; margin-top:14px;
  align-items:center; gap:8px; line-height:1.45;
}
.form-ok-msg.show{ display:flex; }
.form-ok-msg a{ color:#0E6B3C; text-decoration:underline; font-weight:600; }

/* ---------- 15.3  "STILL HAVE QUESTIONS?" BAND ----------
   Full container width, as before — only the HEIGHT was cut by about
   half (it used to be 56px of padding top and bottom plus a large
   heading and a large phone button, and it sat flush against the
   footer). The band is now roughly half as tall and has clear space
   above the footer.
   To make it taller again, raise the 22px padding and the two
   font-size clamps below.                                              */
.demo-section{ padding:0 0 72px; }
.questions-band{ padding:24px 34px; }
.questions-band h2{ font-size:clamp(20px,2.2vw,26px); }
.questions-phone{ font-size:clamp(15px,1.8vw,19px); padding:10px 22px; margin-top:12px; }

@media (max-width:1024px){
  .hero.hero-photo .hero-grid{ grid-template-columns:1fr; }
}
@media (max-width:768px){
  .hero.hero-photo{ padding:52px 0 58px; }
  .hero.hero-photo .hero-bg-wash{
    background:
      linear-gradient(180deg, rgba(8,5,22,.88) 0%, rgba(8,5,22,.74) 45%, rgba(8,5,22,.86) 100%);
  }
  .hero.hero-photo .hero-copy h1{ font-size:28px; line-height:1.18; margin-bottom:16px; }
  .hero.hero-photo .hero-copy .sub{ font-size:14.5px; line-height:1.65; }
  .demo-section{ padding:0 0 48px; }
  .questions-band{ padding:22px 20px; }
}

/* ==========================================================================
   VERSION 16 — YOUTUBE SHORTS SECTION
   Sits between the reviews and the "Still have Questions?" band.
   Delete this block and the matching <section id="shorts"> in index.html
   to remove the feature entirely.
   ========================================================================== */
.shorts-section{ padding-bottom:10px; }

.shorts-sub{
  margin-top:10px; color:var(--muted); font-size:15.5px; line-height:1.6;
}

/* the row of phones — wraps on its own, no carousel needed for three */
.shorts-row{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:30px; margin-top:38px;
}

.short-item{ width:238px; max-width:100%; }

/* the phone itself: 9:16, dark bezel, rounded like a handset */
.short-card{
  position:relative; display:block; width:100%; aspect-ratio:9/16;
  padding:0; border:0; cursor:pointer;
  background:#15102b;
  border-radius:26px; overflow:hidden;
  box-shadow:0 18px 38px rgba(26,10,62,.20), 0 0 0 6px #15102b;
  transition:transform .28s ease, box-shadow .28s ease;
}
.short-card:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 50px rgba(26,10,62,.30), 0 0 0 6px #15102b;
}
.short-card:focus-visible{ outline:3px solid var(--brand); outline-offset:6px; }

/* YouTube's hqdefault.jpg is 4:3 with the vertical Short centred and black
   bars either side. object-fit:cover crops to exactly that centre strip, so
   the phone frame fills with the video frame and no bars show. */
.short-card img{
  width:100%; height:100%; object-fit:cover; display:block;
}

.short-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:56px; height:56px; border-radius:50%;
  background:rgba(255,255,255,.94); color:var(--brand);
  display:flex; align-items:center; justify-content:center;
  padding-left:3px;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  transition:transform .25s ease, background .25s ease;
}
.short-card:hover .short-play{ transform:translate(-50%,-50%) scale(1.1); background:#fff; }

/* once tapped, the button is swapped for this wrapper holding the player */
.short-frame{
  position:relative; width:100%; aspect-ratio:9/16;
  border-radius:26px; overflow:hidden; background:#000;
  box-shadow:0 18px 38px rgba(26,10,62,.20), 0 0 0 6px #15102b;
}
.short-frame iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}

.short-cap{
  margin-top:14px; text-align:center;
  font-size:14px; font-weight:600; color:var(--navy); line-height:1.45;
}

@media (max-width:768px){
  .shorts-row{ gap:26px 18px; margin-top:28px; }
  .short-item{ width:calc(50% - 9px); }
  .short-card, .short-frame{ border-radius:20px; box-shadow:0 12px 26px rgba(26,10,62,.18), 0 0 0 5px #15102b; }
  .short-play{ width:46px; height:46px; }
  .short-cap{ font-size:12.5px; margin-top:10px; }
}
/* Two phones per row on every phone size. Three stacked full-width phones
   made the section far too tall to scroll past. */
@media (max-width:430px){
  .shorts-row{ gap:22px 14px; }
  .short-item{ width:calc(50% - 7px); }
}