/*
Theme Name: Sikkim Manipal Admissions
Theme URI: https://onlinemanipalmba.parnamiinstitute.com/
Author: Anup Kankale
Author URI: https://anupkankale.com
Description: Admission counselling theme dedicated to Sikkim Manipal University online programmes. The front page is the SMU landing page; the same header, footer and palette carry across pages, posts, archives, search, 404 and a dedicated Thank You (lead confirmation) page template.
Tags: education, landing-page, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mba-admission-guide
GitHub Theme URI: https://github.com/Anupkankale/mba-admission-guide
Primary Branch: main
*/

/* =========================================================================
   DESIGN TOKENS

   Four layers, in this order. Never skip a layer upward: a component rule
   uses a semantic token, a semantic token uses a primitive, and a raw hex
   value appears exactly once — in the primitive layer.

     1. PRIMITIVES  the palette. Named by hue + lightness, no meaning.
     2. SEMANTIC    what a colour is FOR. This is what new rules should use.
     3. LEGACY      the original short names, kept as aliases so the
                    existing component rules below keep working.
     4. SCALES      spacing, radius, shadow, type, motion, layering.

   Contrast: every foreground/background pair used for text in this file
   meets WCAG 2.1 AA (4.5:1 body, 3:1 for 24px+ / bold 19px+). If you
   retune a colour, re-check the pair before shipping it.
   ========================================================================= */
:root{
  color-scheme:light;

  /* ---------- 1. PRIMITIVES ---------- */
  /* Navy — the university's own dark. Every dark surface on the site is one
     of these, so the landing page and the blog cannot drift apart. */
  --navy-950:#0A0F2A;
  --navy-900:#151A3A;
  --navy-800:#1E254F;
  --navy-700:#2A3266;
  --navy-100:#D6DBEE;

  /* Orange — the single action colour. CTAs and nothing else.
     -800 is the one that may carry text on a light background. */
  --orange-500:#EE5A11;
  --orange-600:#D44E0C;
  --orange-800:#A33C07;   /* AA on white: 5.24:1 */
  --orange-100:#FDEDE4;
  --orange-050:#FEF5F0;

  /* Gold and cream — the accreditation / credential register. */
  --gold-600:#C9A227;
  --gold-500:#DDA23A;
  --cream-100:#FDF8EA;
  --cream-line:#F3E7C9;

  /* Maroon, from the university mark. Used sparingly, for emphasis. */
  --maroon-600:#9B2242;

  /* Neutrals */
  --ink-900:#2C3050;
  --ink-700:#4E4E58;
  --ink-600:#55566B;
  --ink-500:#5F6079;   /* AA on white: 5.92:1 */
  --ink-300:#9A9CB2;
  --ink-200:#C2C4D6;
  --grey-100:#F4F6FB;
  --grey-200:#E4E8F1;
  --white:#FFFFFF;

  /* Status */
  --green-700:#12833B;  /* AA as text on white: 4.84:1 */
  --green-500:#16A34A;  /* decorative fills and dots only */
  --green-100:#ECFDF3;
  --red-600:#D92D50;
  --pink-500:#FF5C7A;
  --whatsapp:#25D366;

  /* ---------- 2. SEMANTIC ---------- */
  --color-bg:var(--white);
  --color-bg-alt:var(--grey-100);
  --color-bg-invert:var(--navy-900);
  --color-bg-footer:var(--navy-950);

  --color-text:var(--ink-900);
  --color-text-soft:var(--ink-700);
  --color-text-muted:var(--ink-500);
  --color-text-invert:var(--white);
  --color-text-invert-muted:var(--ink-200);

  --color-border:var(--grey-200);
  --color-border-strong:#CDD3E4;

  --color-primary:var(--orange-800);
  --color-accent:var(--orange-500);
  --color-accent-soft:var(--orange-600);
  --color-accent-text:var(--orange-800);  /* accent used AS text, on light */
  --color-on-accent:var(--white);         /* text placed ON the accent */

  --color-success:var(--green-700);
  --color-success-bg:var(--green-100);
  --color-danger:var(--red-600);

  --color-focus:var(--orange-500);

  /* Secondary "Download Brochure" CTA. Defined once because two components
     use it — the mobile bar and the right-hand rail — and they must not
     drift apart. Solid navy, so the secondary CTAs read as one family.
     Contrast on white text: 15.4:1 at rest — AAA. */
  --color-brochure-bg:var(--navy-900);
  --color-brochure-fg:var(--white);
  --color-brochure-bg-hover:var(--navy-800);
  --color-brochure-bg-active:var(--navy-700);

  /* ---------- 3. LEGACY ALIASES ---------- */
  /* Kept so every component rule written before the palette moved to the
     university's own colours keeps resolving. Prefer the semantic names
     above in anything new. */
  --night:var(--navy-900);
  --night-2:var(--navy-800);
  --royal:var(--orange-800);
  --ink:var(--ink-900);
  --muted:var(--ink-500);
  --line:var(--grey-200);
  --surface:var(--grey-100);
  --gold:var(--gold-600);
  --gold-2:var(--gold-500);
  --green:var(--green-500);
  --pink:var(--pink-500);

  --grad-hot:linear-gradient(135deg,#EE5A11 0%,#D44E0C 100%);
  --grad-royal:linear-gradient(135deg,#151A3A 0%,#2A3266 100%);

  /* ---------- 3b. LANDING PAGE TOKENS ---------- */
  /* The landing page, the header and the footer are set in these. They are
     declared here rather than on .smu because the header and the footer
     render outside that wrapper, and a var() that resolves to nothing up
     there is what used to leave the hamburger bars invisible. */
  --smu-navy:var(--navy-900);
  --smu-navy-2:#0C1230;
  --smu-orange:var(--orange-500);
  --smu-orange-2:var(--orange-600);
  --smu-gold:var(--gold-600);
  --smu-gold-2:var(--gold-500);
  --smu-cream:var(--cream-100);
  --smu-cream-line:var(--cream-line);
  --smu-pink:#FDE9E4;
  --smu-pink-line:#F7D9D0;
  --smu-maroon:var(--maroon-600);
  --smu-chip-text:#5C2B2B;
  --smu-text:var(--ink-700);
  --smu-text-2:#6B6B77;
  --smu-map:#93A9C4;
  --smu-pin:#FF2A17;
  --smu-line:#E4E8F1;
  --smu-paper:var(--smu-surface-alt); /* small insets: chips, meta, logo cells */
  --smu-surface:#fff;
  --smu-surface-alt:var(--grey-100);
  --smu-surface-deep:#141A38;

  --smu-r-sm:10px;
  --smu-r-md:16px;
  --smu-r-lg:20px;
  --smu-shadow:0 1px 2px rgba(21,26,58,.04),0 8px 24px rgba(21,26,58,.06);
  --smu-shadow-lift:0 18px 44px rgba(21,26,58,.13);

  /* Vertical rhythm: one value, fluid, so every band matches. */
  --smu-pad:clamp(58px,6.5vw,96px);

  --smu-shell:1240px;
  --smu-f:var(--body);

  /* ---------- 4. SCALES ---------- */
  /* Spacing — a 4px base. Use these instead of arbitrary pixel values. */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:78px;

  --r:16px; --r-lg:26px; --r-pill:999px; --r-sm:12px;

  --sh:0 10px 30px rgba(21,26,58,.10);
  --sh-lg:0 30px 70px rgba(21,26,58,.28);
  --sh-focus:0 0 0 4px rgba(238,90,17,.16);

  /* One family across the whole site — the landing page's Poppins, which the
     header and the footer already wear. Three weights are loaded (400, 500,
     600), so nothing in this file asks for more: a weight the font does not
     carry is synthesised by the browser, which looks smeared. Both tokens
     are kept so a display/body split can be reinstated later by pointing
     --dis at another family, and nothing else has to change. */
  --dis:'Poppins',-apple-system,'Segoe UI',system-ui,sans-serif;
  --body:'Poppins',-apple-system,'Segoe UI',system-ui,sans-serif;

  /* Motion — one duration and one easing, so nothing feels out of step. */
  --dur:.2s;
  --ease:cubic-bezier(.2,.8,.3,1);

  /* Layering — the only z-index values in the file. */
  --z-header:100;
  --z-sticky:95;
  --z-wa:90;
  --z-modal:300;

  --maxw:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);background:#fff;color:var(--ink);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;font-family:var(--dis);font-weight:600;line-height:1.15;letter-spacing:-.02em}
/* Poppins ships here at 400/500/600 only, so the elements browsers render at
   700 by default are pulled down to a weight the font actually carries —
   otherwise they are synthesised, and a faux-bold Poppins looks smeared. */
b,strong,th{font-weight:600}
p{margin:0}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:8px}

.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}
.section{padding:78px 0;position:relative}
.tint{background:var(--surface)}
.center{text-align:center}

.pulse-dot{width:9px;height:9px;border-radius:50%;background:#38E08A;box-shadow:0 0 0 0 rgba(56,224,138,.7);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(56,224,138,0)}100%{box-shadow:0 0 0 0 rgba(56,224,138,0)}}

/* ================= BUTTONS ================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:15px 26px;border-radius:var(--r-pill);border:1px solid transparent;font-family:var(--dis);font-weight:600;font-size:15.5px;cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s,color .18s;text-align:center}
.btn:hover{transform:translateY(-3px)}
.btn--hot{background:var(--grad-hot);color:var(--color-on-accent);box-shadow:0 12px 30px rgba(238,90,17,.34)}
.btn--hot:hover{box-shadow:0 18px 40px rgba(238,90,17,.46)}
.btn--dark{background:var(--night);color:#fff}
.btn--dark:hover{background:var(--night-2)}
.btn--glass{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.28);backdrop-filter:blur(6px)}
.btn--glass:hover{background:rgba(255,255,255,.16)}
.btn--line{background:#fff;color:var(--night);border-color:var(--line)}
.btn--line:hover{border-color:var(--night)}
.btn--wa{background:#25D366;color:#04361A}
.btn--block{width:100%}
.btn--sm{padding:11px 18px;font-size:14px}
.btn--lg{padding:17px 32px;font-size:16.5px}
.shine{position:relative;overflow:hidden}
.shine::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:shine 3.6s ease-in-out infinite}
@keyframes shine{0%,65%{left:-120%}100%{left:140%}}

/* ================= HERO DECORATION =================
   The blurred orbs, the eyebrow pill, the checklist tick and the CTA row.
   They are shared by the inner-page hero, the 404 and the Thank You page —
   the landing page draws its own hero in css/sikkim-manipal.css. */
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;pointer-events:none}
.orb--a{width:520px;height:520px;background:#2A3266;top:-160px;left:-120px;animation:float 14s ease-in-out infinite}
.orb--b{width:460px;height:460px;background:#C8631A;top:-80px;right:-120px;animation:float 18s ease-in-out infinite reverse}
.orb--c{width:400px;height:400px;background:#7A2A1B;bottom:-200px;left:40%;animation:float 20s ease-in-out infinite}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-34px)}}
.pill{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:var(--r-pill);background:rgba(201,162,39,.14);border:1px solid rgba(201,162,39,.42);color:var(--gold-2);font-weight:600;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:20px}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.tick{flex:none;width:22px;height:22px;border-radius:50%;background:rgba(56,224,138,.16);color:#38E08A;display:grid;place-items:center;font-size:12px;font-weight:600;margin-top:2px}

/* ================= FORM CARD =================
   The shell the lead popup renders inside, plus the field styling Contact
   Form 7 inherits (its forms carry html_class="form mbag-form"). */
.card{background:#fff;color:var(--ink);border-radius:var(--r-lg);box-shadow:var(--sh-lg);overflow:hidden;position:relative}
.card__head{background:var(--grad-royal);color:#fff;padding:22px 26px;position:relative;overflow:hidden}
.card__head::after{content:"";position:absolute;width:180px;height:180px;background:rgba(238,90,17,.22);border-radius:50%;filter:blur(50px);top:-70px;right:-40px}
.card__head h2{font-size:23px;position:relative}
.card__head p{font-size:14px;color:var(--navy-100);position:relative;margin-top:4px}
.card__body{padding:24px 26px 26px}
.form{display:grid;gap:13px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.field{display:grid;gap:5px}
.field label{font-size:12.5px;font-weight:600;color:var(--ink-600);font-family:var(--dis)}
.req{color:var(--pink)}
.field input,.field select{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--grey-100);font-size:15px;transition:border-color .16s,box-shadow .16s,background .16s}
.field input:focus,.field select:focus{outline:none;border-color:var(--royal);background:#fff;box-shadow:var(--sh-focus)}
.field input::placeholder{color:var(--ink-300)}
.field.err input,.field.err select{border-color:var(--pink);background:#FFF5F7}
.emsg{display:none;font-size:12px;color:#D92D50;font-weight:500}
.field.err .emsg{display:block}
.tiny{font-size:12px;color:var(--muted);text-align:center}
.secure{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:var(--muted);font-weight:600}

/* ================= HEADINGS ================= */
.head{max-width:720px;margin:0 auto 46px;text-align:center}
.eyebrow{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--color-accent-text);background:var(--cream-100);border:1px solid var(--cream-line);padding:6px 14px;border-radius:var(--r-pill);margin-bottom:14px}
.h2{font-size:clamp(28px,4.2vw,42px)}
.lead{color:var(--muted);font-size:17px;margin-top:14px}
.actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:32px}
.dark .h2{color:#fff}
.dark .lead{color:#B6C1E2}
.dark .eyebrow{color:var(--gold-2);background:rgba(201,162,39,.14);border-color:rgba(201,162,39,.4)}

/* ================= FEATURES ================= */
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;transition:transform .22s,box-shadow .22s}
.feat:hover{transform:translateY(-6px);box-shadow:var(--sh)}
.fico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:21px;margin-bottom:15px;background:var(--grad-hot);color:var(--color-on-accent);box-shadow:0 10px 22px rgba(238,90,17,.24)}
.feat h3{font-size:19px;margin-bottom:7px}
.feat p{color:var(--muted);font-size:14.8px}

/* ================= STEPS ================= */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 22px;position:relative}
.step b{font-family:var(--dis);font-size:13px;font-weight:600;background:var(--grad-hot);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--color-on-accent);margin-bottom:14px}
.step h3{font-size:17.5px;margin-bottom:6px}
.step p{font-size:14.5px;color:var(--muted)}

/* ================= CONTACT PAGE =================
   One card that hands the visitor to a person. No form, so the card can be
   narrow and centred rather than fighting for width with a form column.
   ============================================================ */
.ctacard{
  max-width:720px;margin:0 auto;text-align:center;
  background:#fff;border:1px solid var(--color-border);border-radius:var(--r);
  padding:38px 32px;box-shadow:var(--sh)
}
.ctacard .lead{margin:10px auto 0;max-width:52ch}
.ctacard__actions{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px
}
.ctacard__meta{
  margin-top:26px;padding-top:22px;border-top:1px solid var(--color-border);
  display:grid;gap:10px;text-align:left;max-width:46ch;margin-inline:auto;
  font-size:14.5px;color:var(--color-text-soft)
}
.ctacard__meta li{display:flex;align-items:flex-start;gap:10px}

@media (max-width:520px){
  .ctacard{padding:28px 20px}
  /* Stack the two CTAs so neither is a thin, hard-to-hit target. */
  .ctacard__actions{flex-direction:column}
  .ctacard__actions .btn{width:100%}
}

/* Free prose typed into the page editor. The theme's block styles cover the
   elements; this only sets the measure so long paragraphs stay readable. */
.prose{max-width:74ch;margin:0 auto}
.prose > * + *{margin-top:16px}

/* ================= FINAL ================= */
.final{position:relative;background:var(--night);color:#fff;padding:82px 0;overflow:hidden;text-align:center}
.final .tiny,.final .secure{color:var(--ink-300)}

/* ================= FLOATING / STICKY ================= */
.wa{position:fixed;right:18px;bottom:96px;z-index:90;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 12px 28px rgba(37,211,102,.45);font-size:26px}
.wa:hover{transform:scale(1.06)}
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:95;display:none;gap:8px;padding:8px 12px;background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 26px rgba(21,26,58,.12);padding-bottom:calc(8px + env(safe-area-inset-bottom))}
/* Four CTAs have to share ~312px on a 360px phone, so the icon goes above
   the label rather than beside it — that keeps every label readable and
   every target a full quarter of the bar wide. */
.sticky .btn{
  flex:1 1 0;min-width:0;
  flex-direction:column;gap:3px;
  padding:9px 4px;font-size:11.5px;line-height:1.2;
  border-radius:var(--r-sm)
}
.sticky .btn .mbag-i{font-size:15px}
.sticky .btn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.sticky .btn:hover{transform:none}

/* ================= REVEAL ================= */
.rv{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}

/* ================= RESPONSIVE ================= */
@media (max-width:1024px){
  .fgrid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .section{padding:56px 0}
  .fgrid,.steps{grid-template-columns:1fr}
  .row{grid-template-columns:1fr}
  .sticky{display:flex}
  body{padding-bottom:84px}
  .wa{bottom:96px;width:52px;height:52px}
  .card__body{padding:20px}
}
/* ================= DECORATIVE ANIMATION GATE =================
   The orbs, the button shine and the pulse dots loop forever, and every one
   of them sits at or above the fold. That has two costs: they compete with
   the first paint for compositor time, and because the page never visually
   settles, Lighthouse's Speed Index keeps climbing long after the content
   is actually readable.

   So they start paused and are released once the page has loaded, by
   main.js adding .anim-on to <body>. Paused holds each animation on its
   first frame — orbs at translate(0,0), shine off-screen — which is exactly
   the resting state, so nothing looks half-drawn while it waits.

   If JS never runs, the animations simply stay paused and the page is
   static rather than broken.
   ============================================================ */
.pulse-dot,.orb,.shine::after{animation-play-state:paused}
body.anim-on .pulse-dot,
body.anim-on .orb,
body.anim-on .shine::after{animation-play-state:running}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}

/* ================= CONTACT FORM 7 ================= */
/* CF7 forms are rendered with html_class="form mbag-form", so they inherit
   all of the .form / .row / .field styling above. These rules only fix the
   extra wrappers and messages that CF7 injects on its own. */

.mbag-cf7{display:block}

/* CF7 wraps every control in a <span>; make it behave like a block. */
.mbag-form .wpcf7-form-control-wrap{display:block;width:100%}

/* Kill CF7's default <p> spacing if any stray <p> wrappers survive. */
.mbag-form > p{margin:0}

/* Buttons: CF7 renders <input type="submit">, so mirror .btn sizing. */
.mbag-form input[type="submit"],
.mbag-form .wpcf7-submit{width:100%;cursor:pointer;border:0}

/* Inline validation messages -> match the theme's .emsg style. */
.mbag-form .wpcf7-not-valid-tip{display:block;margin-top:5px;font-size:12px;color:#D92D50;font-weight:500}
.mbag-form .wpcf7-not-valid{border-color:var(--pink) !important;background:#FFF5F7 !important}

/* Response output (success / error banner) -> match the theme's .ok style. */
.mbag-form .wpcf7-response-output{
  margin:4px 0 0;padding:15px 17px;border-radius:14px;
  font-size:14.5px;font-weight:500;line-height:1.5;
  border:1px solid #A6E7C0;background:#ECFDF3;color:#0B5C36
}
.mbag-form.invalid .wpcf7-response-output,
.mbag-form.unaccepted .wpcf7-response-output,
.mbag-form.failed .wpcf7-response-output,
.mbag-form.aborted .wpcf7-response-output{
  border-color:#F3B0BF;background:#FFF5F7;color:#B01B3B
}
.mbag-form .wpcf7-response-output:empty,
.mbag-form.init .wpcf7-response-output{display:none}

/* Spinner sits inline next to the button instead of pushing layout around. */
.mbag-form .wpcf7-spinner{display:block;margin:8px auto 0}

/* On the dark final section, keep labels and messages readable. */
.final .mbag-form .wpcf7-not-valid-tip{color:#FFB3C4}
.final .mbag-form .wpcf7-response-output{background:rgba(255,255,255,.95)}

/* ================= ACCESSIBILITY ================= */
.screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;
  margin:-1px;overflow:hidden;padding:0;position:absolute!important;word-wrap:normal!important
}
.screen-reader-text:focus{
  background:#fff;border-radius:8px;box-shadow:0 0 3px rgba(0,0,0,.3);clip:auto!important;clip-path:none;
  color:var(--night);display:block;font-size:14px;font-weight:600;height:auto;left:12px;line-height:normal;
  padding:14px 20px;text-decoration:none;top:12px;width:auto;z-index:100000
}
.skip-link:focus{outline:3px solid var(--gold)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--gold);outline-offset:2px;border-radius:6px
}

/* ================= INNER PAGE HERO ================= */
.site-main{display:block}
.page-hero{position:relative;background:var(--night);color:#fff;padding:52px 0 58px;overflow:hidden}
.page-hero--tall{padding:70px 0 84px}
.page-hero::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:58px 58px;mask-image:radial-gradient(circle at 50% 10%,#000,transparent 75%)
}
.page-hero>.container{position:relative;z-index:2}
.page-hero__title{font-size:clamp(28px,4.6vw,46px);margin-top:6px}
.page-hero__sub{color:var(--ink-200);font-size:17px;margin-top:14px;max-width:680px}
.page-hero.center .page-hero__sub,.page-hero .center .page-hero__sub{margin-left:auto;margin-right:auto}
.hero__cta--center{justify-content:center}

/* ================= BREADCRUMBS ================= */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:13px;color:var(--ink-300);margin-bottom:12px;font-weight:600}
.crumbs a{color:var(--navy-100)}
.crumbs a:hover{color:var(--gold-2)}
.crumbs__sep{opacity:.5}
.crumbs [aria-current="page"]{color:#fff}

/* ================= CONTENT TYPOGRAPHY ================= */
.container--narrow{max-width:860px}
.section--flush{padding:48px 0}
.entry__media{margin:0 0 26px;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.entry__meta{display:flex;flex-wrap:wrap;gap:14px;font-size:13.5px;color:var(--muted);font-weight:500;margin-bottom:14px}
.entry__meta a{color:var(--royal)}
.entry-content{font-size:17px;color:var(--ink-700)}
.entry-content>*+*{margin-top:22px}
.entry-content h2{font-size:clamp(24px,3.2vw,32px);margin-top:42px;color:var(--ink)}
.entry-content h3{font-size:21px;margin-top:32px;color:var(--ink)}
.entry-content h4{font-size:18px;margin-top:26px;color:var(--ink)}
.entry-content p{margin:0}
.entry-content a{color:var(--royal);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.entry-content a:hover{color:var(--color-accent-text)}
.entry-content ul,.entry-content ol{padding-left:22px;display:grid;gap:10px}
.entry-content ul{list-style:disc}
.entry-content ol{list-style:decimal}
.entry-content li::marker{color:var(--gold)}
.entry-content img,.entry-content iframe,.entry-content video{border-radius:var(--r);max-width:100%}
.entry-content blockquote{
  margin:0;padding:18px 22px;background:var(--surface);border-left:4px solid var(--gold);
  border-radius:0 14px 14px 0;font-size:17.5px;color:var(--ink-700)
}
.entry-content blockquote cite{display:block;margin-top:8px;font-size:14px;color:var(--muted);font-style:normal}
.entry-content code,.entry-content kbd{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:2px 6px;font-size:14.5px}
.entry-content pre{background:var(--night);color:#DCE4FA;padding:18px 20px;border-radius:14px;overflow:auto}
.entry-content pre code{background:none;border:0;color:inherit;padding:0}
.entry-content hr{border:0;border-top:1px solid var(--line);margin:34px 0}
.entry-content table{width:100%;border-collapse:collapse;font-size:15px}
.entry-content table th,.entry-content table td{padding:12px 14px}
.entry-content figcaption,.wp-caption-text{font-size:13.5px;color:var(--muted);text-align:center;margin-top:8px}
.entry-content .alignwide{width:min(1080px,92vw);margin-left:50%;transform:translateX(-50%);max-width:none}
.entry-content .alignfull{width:100vw;margin-left:50%;transform:translateX(-50%);max-width:none;border-radius:0}
.entry-content .alignleft{float:left;margin:6px 24px 18px 0}
.entry-content .alignright{float:right;margin:6px 0 18px 24px}
.entry-content .aligncenter{margin-left:auto;margin-right:auto;display:block}
.entry-content .wp-block-button__link{border-radius:var(--r-pill)}
.entry__tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.entry__tags a{font-size:12.5px;font-weight:600;padding:6px 13px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);color:var(--ink-600)}
.entry__tags a:hover{background:var(--night);color:#fff;border-color:var(--night)}
.entry__footer{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);font-size:14px}
.entry__edit a{color:var(--royal);font-weight:500}
.page-links{margin-top:24px;font-weight:500;font-size:14px;display:flex;gap:10px}

/* ================= POST LISTINGS ================= */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .22s,box-shadow .22s,border-color .22s}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--sh);border-color:var(--color-border-strong)}
.pcard__thumb{display:block;aspect-ratio:16/10;background:var(--grad-royal);overflow:hidden}
.pcard__thumb img{width:100%;height:100%;object-fit:cover}
.pcard__ph{display:grid;place-items:center;width:100%;height:100%;color:#fff;font-family:var(--dis);font-weight:600;font-size:44px}
.pcard__body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.pcard__title{font-size:19px;line-height:1.3}
.pcard__title a:hover{color:var(--royal)}
.pcard__ex{font-size:14.8px;color:var(--muted)}
.pcard__more{margin-top:auto;font-family:var(--dis);font-weight:600;font-size:14.5px;color:var(--royal)}
.pcard__more:hover{color:var(--color-accent-text)}

/* ================= PAGINATION & POST NAV ================= */
.mbag-pagination{margin-top:40px}
.mbag-pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.mbag-pagination .page-numbers{
  display:grid;place-items:center;min-width:42px;height:42px;padding:0 14px;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--line);font-family:var(--dis);font-weight:600;font-size:14.5px;color:var(--ink-600)
}
.mbag-pagination .page-numbers:hover{border-color:var(--night);color:var(--night)}
.mbag-pagination .page-numbers.current{background:var(--night);border-color:var(--night);color:#fff}
.mbag-pagination .dots{border:0;background:none}
.pnav{margin-top:44px;padding-top:26px;border-top:1px solid var(--line)}
.pnav .nav-links{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pnav .nav-next{text-align:right}
.pnav a{display:block;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);background:#fff;transition:border-color .2s,box-shadow .2s}
.pnav a:hover{border-color:var(--color-border-strong);box-shadow:var(--sh)}
.pnav__label{display:block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:5px}
.pnav__title{font-family:var(--dis);font-weight:600;font-size:15.5px;color:var(--ink)}

/* ================= SEARCH & EMPTY STATES ================= */
.sform{display:flex;gap:10px;max-width:560px}
.sform__input{
  flex:1;padding:13px 16px;border:1.5px solid var(--line);border-radius:var(--r-pill);background:#fff;font-size:15px
}
.sform__input:focus{outline:none;border-color:var(--royal);box-shadow:var(--sh-focus)}
.search-bar{margin-bottom:30px;display:flex;justify-content:center}
.e404__search{display:flex;justify-content:center;margin:24px 0 6px}
.e404__search .sform__input{background:rgba(255,255,255,.95);border-color:transparent}
.empty{max-width:640px;margin:0 auto;text-align:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:44px 28px}
.empty h2{font-size:24px;margin-bottom:10px}
.empty p{color:var(--muted)}
.empty .sform{margin:22px auto 0}
.empty__cta{margin-top:22px}

/* ================= COMMENTS ================= */
.comments{margin-top:52px;padding-top:34px;border-top:1px solid var(--line)}
.comments__title{font-size:23px;margin-bottom:22px}
.comments__list,.comments__list .children{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.comments__list .children{margin-top:18px;padding-left:22px;border-left:2px solid var(--line)}
.comments__list .comment-body{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
.comments__list .comment-author{display:flex;align-items:center;gap:11px;font-family:var(--dis);font-weight:600;font-size:15px}
.comments__list .comment-author img{border-radius:50%}
.comments__list .comment-metadata{font-size:12.5px;color:var(--muted);margin:6px 0 12px}
.comments__list .reply{margin-top:10px;font-size:13.5px;font-weight:600}
.comments__list .reply a{color:var(--royal)}
.comment-respond{margin-top:34px}
.comment-reply-title{font-family:var(--dis);font-size:21px;font-weight:600;margin-bottom:12px}
.comment-form{display:grid;gap:14px}
.comment-form label{font-size:12.5px;font-weight:600;color:var(--ink-600);font-family:var(--dis);display:block;margin-bottom:5px}
.comment-form input[type="text"],.comment-form input[type="email"],.comment-form input[type="url"],.comment-form textarea{
  width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--grey-100);font-size:15px;font-family:inherit
}
.comment-form textarea{min-height:150px;resize:vertical}
.comment-form input:focus,.comment-form textarea:focus{outline:none;border-color:var(--royal);background:#fff;box-shadow:var(--sh-focus)}
.comment-form .form-submit{margin:0}
.comment-form input[type="submit"]{cursor:pointer;border:0}
.comments__closed{margin-top:18px;color:var(--muted);font-size:14.5px}

/* ================= THANK YOU PAGE ================= */
.ty__check{
  width:78px;height:78px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;
  background:rgba(56,224,138,.14);border:2px solid rgba(56,224,138,.55);color:#38E08A;font-size:38px;font-weight:600;
  animation:tyPop .6s cubic-bezier(.2,.8,.3,1) both
}
@keyframes tyPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.ty .pill{margin-bottom:16px}
.ty__hint{margin-top:18px;font-size:13.5px;color:var(--ink-300)}
.ty__next .feat{display:block}
.ty__next .feat:hover{border-color:var(--color-border-strong)}
.ctaband{padding:64px 0}

/* ================= WORDPRESS CORE CLASSES ================= */
.sticky-post{border-color:var(--gold)}
.bypostauthor>.comment-body{border-color:var(--color-border-strong)}
.wp-caption{max-width:100%}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gallery-item{margin:0}

/* ================= RESPONSIVE — INNER PAGES ================= */
@media (max-width:1024px){
  .pgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .navtoggle{display:grid}
  .header__right{display:none}
  .nav{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:#0E1740;border-top:1px solid rgba(255,255,255,.08);box-shadow:0 20px 40px rgba(0,0,0,.35);
    padding:14px 20px 20px;display:none
  }
  .nav-open .nav{display:flex}
  .nav__list{flex-direction:column;align-items:stretch;gap:0;font-size:16px}
  .nav__list li{border-bottom:1px solid rgba(255,255,255,.07)}
  .nav__list a{display:block;padding:14px 2px}
  .nav__list .sub-menu{display:block;position:static;background:none;border:0;box-shadow:none;padding:0 0 8px 14px}
  .nav__list .sub-menu a{color:#AFBBDD;padding:9px 2px}
  .nav__cta{display:grid;gap:10px;margin-top:16px}
  .nav__cta .btn{width:100%}
}
@media (max-width:760px){
  .page-hero{padding:38px 0 44px}
  .page-hero--tall{padding:48px 0 60px}
  .pgrid{grid-template-columns:1fr}
  .pnav .nav-links{grid-template-columns:1fr}
  .pnav .nav-next{text-align:left}
  .entry-content{font-size:16px}
  .entry-content .alignleft,.entry-content .alignright{float:none;margin:0 0 18px}
  .sform{flex-direction:column}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .comments__list .children{padding-left:12px}
}

/* =========================================================================
   ICONS — inline SVG

   Built in functions.php by mbag_icon(), which emits an
   <svg class="mbag-i" fill="currentColor" aria-hidden="true">. Nothing is
   downloaded: the paths ship in the HTML, so there is no icon-font request
   and no third-party origin in the critical path.

   The base rule sets height:1em, so the sizes below stay expressed as
   font-size and every icon still tracks the text it sits beside — the same
   way the old font glyphs did. Colour comes from currentColor, so an icon
   inherits its parent's colour unless a rule below overrides it.

   Icons here are decorative: each one sits beside a text label, and is
   hidden from assistive tech.
   ========================================================================= */
.mbag-i{display:inline-block;height:1em;width:auto;line-height:1;vertical-align:-.125em;flex:none}

/* Buttons and inline links */
.btn .mbag-i{font-size:.94em}
.pcard__more .mbag-i,.crumbs .mbag-i{font-size:.85em;margin-left:2px}
.mbag-pagination .mbag-i{font-size:.8em}

/* Feature / benefit tiles */
.fico .mbag-i{font-size:21px}

/* Checklist ticks */
.tick .mbag-i{font-size:10.5px}

/* The secure/privacy line under a form */
.secure .mbag-i{font-size:12px;color:var(--color-text-muted)}
.final .secure .mbag-i{color:var(--ink-300)}

/* Floating WhatsApp button */
.wa .mbag-i{font-size:27px}

/* Thank You page confirmation mark */
.ty__check .mbag-i{font-size:34px}

/* An icon that fails to load must never collapse the layout it sits in. */
.fico .mbag-i,.tick .mbag-i,.ty__check .mbag-i{min-width:1em;text-align:center}

/* =========================================================================
   LEAD POPUP

   The dialog ships in the page hidden, so the Contact Form 7 markup, its
   nonce and the theme's phone-field handling are all live before it opens.
   [hidden] is enforced with !important because the layout rules below would
   otherwise win over the attribute.
   ========================================================================= */
.mbag-modal{position:fixed;inset:0;z-index:var(--z-modal);display:grid;place-items:center;padding:20px}
.mbag-modal[hidden]{display:none!important}
.mbag-modal__overlay{
  position:absolute;inset:0;background:rgba(7,12,36,.72);
  backdrop-filter:blur(3px);opacity:0;transition:opacity var(--dur) var(--ease)
}
.mbag-modal__dialog{
  position:relative;width:100%;max-width:480px;
  max-height:calc(100vh - 40px);
  max-height:calc(100dvh - 40px);   /* dvh: excludes the mobile browser toolbar */
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  opacity:0;transform:translateY(18px) scale(.98);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)
}
.mbag-modal.is-open .mbag-modal__overlay{opacity:1}
.mbag-modal.is-open .mbag-modal__dialog{opacity:1;transform:none}

.mbag-modal__close{
  position:absolute;top:12px;right:12px;z-index:2;
  width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;
  background:var(--grey-100);color:var(--ink-700);font-size:26px;line-height:1;
  display:grid;place-items:center;transition:background var(--dur) var(--ease)
}
.mbag-modal__close:hover{background:var(--grey-200)}

/* The dialog reuses .card, so its head keeps room for the close button. */
.mbag-modal .card__head{padding-right:60px}

/* --- Popup head: white, with orange as a rule along the top edge ---
   .card__head is shared with any other card, so this is scoped to the
   dialog and leaves those alone. A navy head under a navy site header reads
   as one heavy block; white gives the form its own surface, and the orange
   rule carries the brand without competing with the submit button. */
.mbag-modal .card__head{
  background:#fff;
  color:var(--ink-900);
  border-bottom:1px solid var(--line);
}
/* The blurred orb behind the head only smudges the corner on white, so the
   same pseudo-element becomes the orange rule. */
.mbag-modal .card__head::after{
  inset:0 0 auto 0;
  width:auto;height:4px;
  background:var(--grad-hot);
  border-radius:0;filter:none;
}
.mbag-modal .card__head p{color:var(--muted)}

/* Page behind a modal must not scroll under it. */
.mbag-noscroll{overflow:hidden}

@media (max-width:520px){
  .mbag-modal{padding:12px}
  .mbag-modal__dialog{max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px)}
  .mbag-modal .card__body{padding:20px}
}

/* =========================================================================
   RIGHT CTA RAIL

   Two vertical tabs pinned to the right edge, mid-screen. It sits clear of
   the WhatsApp button (bottom-right) and the mobile bottom bar, so the CTA
   sets never stack on each other.

   Reading direction: on a right-hand tab the convention is top-to-bottom,
   which is plain `writing-mode: vertical-rl` with no rotation — unlike a
   left-hand tab, which reads bottom-to-top and needs rotate(180deg). No
   rotation also means the corners are declared as they render, so the
   radius is simply on the left pair: the side facing the page.
   ========================================================================= */
.rail{
  position:fixed;right:0;top:50%;transform:translateY(-50%);
  z-index:var(--z-wa);display:grid;gap:10px
}
.rail__btn{
  writing-mode:vertical-rl;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:20px 12px;border:0;cursor:pointer;
  font-family:var(--dis);font-weight:600;font-size:14px;letter-spacing:.01em;
  border-radius:12px 0 0 12px;   /* rounded on the page-facing side */
  box-shadow:0 8px 24px rgba(21,26,58,.28);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),filter var(--dur) var(--ease)
}
.rail__btn--call{background:var(--grad-hot);color:var(--color-on-accent)}
.rail__btn--brochure{background:var(--color-brochure-bg);color:var(--color-brochure-fg)}
.rail__btn:hover{
  transform:translateX(-3px);
  box-shadow:0 14px 32px rgba(21,26,58,.4);
  filter:brightness(1.06)
}
/* Same treatment as the university-card "Download Brochure", via the shared
   tokens. Declared after .rail__btn:hover so the background here is not
   competing on equal specificity with the shared hover rule above. */
.rail__btn--brochure:hover{background:var(--color-brochure-bg-hover);color:var(--color-brochure-fg)}
.rail__btn--brochure:active{background:var(--color-brochure-bg-active);color:var(--color-brochure-fg)}
.rail__btn .mbag-i{font-size:14px}

/* On a phone the rail would overlap the left edge of the content, and the
   bottom bar already carries all four CTAs — so the rail is desktop/tablet
   only. To bring it back, delete this rule. */
@media (max-width:760px){
  .rail{display:none}
}

/* Very short viewports: the rail would cover most of the screen edge, and
   the mobile bottom bar already carries Call and WhatsApp. */
@media (max-height:520px){
  .rail{display:none}
}

/* =========================================================================
   POPUP / CF7 FORM STYLING

   Contact Form 7 markup varies with whoever built the form — the theme's
   own .field / .row classes, a plugin's .dxm-* classes, or nothing at all.
   These rules are scoped to .mbag-form and target the ELEMENTS rather than
   the wrappers, so the form looks right whichever markup it arrives in.

   CF7 also runs the form through wpautop, which sprinkles <p> and <br>
   through it. Those are neutralised here rather than fought in the form
   editor, where an author would have to remember the trick every time.
   ========================================================================= */

/* Layout ---------------------------------------------------------------- */
.mbag-form p{margin:0}
.mbag-form br{display:none}
.mbag-form .dxm-form{display:grid;gap:13px}
.mbag-form .dxm-field{display:grid;gap:5px}

/* Two fields side by side. The pair sits inside one wpautop <p>, so the
   grid goes on that <p>, not on the row wrapper. */
.mbag-form .dxm-row>p{display:grid;grid-template-columns:1fr 1fr;gap:13px;align-items:start}

/* Labels ---------------------------------------------------------------- */
.mbag-form .dxm-label{
  display:block;font-family:var(--dis);font-weight:600;
  font-size:12.5px;color:var(--ink-600)
}
.mbag-form .dxm-req{color:var(--pink-500)}

/* Controls -------------------------------------------------------------- */
.mbag-form input[type="text"],
.mbag-form input[type="email"],
.mbag-form input[type="tel"],
.mbag-form input[type="url"],
.mbag-form input[type="number"],
.mbag-form input[type="date"],
.mbag-form select,
.mbag-form textarea{
  width:100%;padding:13px 14px;
  border:1.5px solid var(--color-border);border-radius:var(--r-sm);
  background:var(--grey-100);color:var(--color-text);
  font-family:inherit;font-size:15px;line-height:1.4;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease)
}
.mbag-form textarea{min-height:110px;resize:vertical}
.mbag-form input::placeholder,.mbag-form textarea::placeholder{color:var(--ink-300)}
.mbag-form input:focus,.mbag-form select:focus,.mbag-form textarea:focus{
  outline:none;border-color:var(--color-primary);background:var(--white);box-shadow:var(--sh-focus)
}

/* Native select arrows differ per browser and per OS. Replacing it with an
   inline SVG keeps every select on the page identical. */
.mbag-form select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235C6A8A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center
}

/* Submit ---------------------------------------------------------------- */
/* CF7 renders a bare <input type="submit"> unless the form author adds
   classes, so the button is styled by type instead of by class. */
.mbag-form input[type="submit"],
.mbag-form .wpcf7-submit{
  width:100%;cursor:pointer;border:0;
  margin-top:4px;padding:17px 32px;border-radius:var(--r-pill);
  background:var(--grad-hot);color:var(--color-on-accent);
  font-family:var(--dis);font-weight:600;font-size:16.5px;
  box-shadow:0 12px 30px rgba(238,90,17,.34);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)
}
.mbag-form input[type="submit"]:hover,
.mbag-form .wpcf7-submit:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(238,90,17,.46)}
.mbag-form input[type="submit"]:disabled{opacity:.6;cursor:progress;transform:none}

/* Reassurance line ------------------------------------------------------ */
.mbag-form .dxm-secure{
  display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:12px;font-weight:600;color:var(--color-text-muted);text-align:center
}
.mbag-form .dxm-secure::before{
  content:"";width:11px;height:11px;flex:none;background-color:var(--color-text-muted);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z'/%3E%3C/svg%3E") center/contain no-repeat
}

/* Consent checkboxes, if the form has any. */
.mbag-form .wpcf7-list-item{margin:0}
.mbag-form .wpcf7-list-item-label{font-size:13.5px;color:var(--color-text-soft)}
.mbag-form input[type="checkbox"],.mbag-form input[type="radio"]{
  accent-color:var(--color-primary);width:auto;margin-right:7px
}

/* Dark sections (the final CTA band) invert the label colour. */
.final .mbag-form .dxm-label{color:var(--navy-100)}
.final .mbag-form .dxm-secure,
.final .mbag-form .dxm-secure::before{color:var(--ink-300)}

@media (max-width:520px){
  .mbag-form .dxm-row>p{grid-template-columns:1fr}
}

/* =========================================================================
   SITE LOGO

   The header and the footer draw images/smu/logo-smu.webp by default, sized
   by .smu-head__brand img and .smu-foot__plate img in css/sikkim-manipal.css.
   A logo set in Customize > Site Identity replaces it and arrives as
   WordPress's own .custom-logo markup, so it is sized to match here.
   ========================================================================= */
.smu-head__brand .custom-logo{width:auto;height:40px;max-width:min(330px,44vw);object-fit:contain}

@media (max-width:520px){
  .smu-head__brand .custom-logo{height:30px;max-width:34vw}
}