/* ==========================================================================
   Sri Jayadurga English Higher Secondary School
   Kariyamanickam Main Road, Sooramangalam, Puducherry 605106

   Palette is taken straight off the school emblem:
     royal navy (#0f2a86) + crest red (#d21f1d) + saffron (#f79a10) on white.
   Display face: Marcellus.  Text face: Plus Jakarta Sans.
   ========================================================================== */

:root{
  /* brand */
  --navy-900:#081642;
  --navy-800:#0b1f6b;
  --navy-700:#0f2a86;
  --navy-600:#1c3fae;
  --navy-400:#6d88dd;
  --navy-100:#e8eefc;
  --navy-50:#f3f6fe;

  --red-700:#a8140f;
  --red-600:#d21f1d;
  --red-100:#fdeceb;

  --saffron-700:#a45f05;
  --saffron:#f79a10;
  --saffron-300:#ffc45c;
  --saffron-100:#fff4de;

  /* neutrals */
  --ink:#131c3a;
  --body:#4c5673;
  --muted:#7c869f;
  --line:#e2e8f4;
  --white:#fff;
  --bg:#fff;
  --tint:#f6f8fd;

  --shadow-sm:0 2px 10px rgba(11,31,107,.06);
  --shadow:0 14px 34px rgba(11,31,107,.10);
  --shadow-lg:0 28px 70px rgba(8,22,66,.20);

  --r-sm:10px;
  --r:16px;
  --r-lg:24px;
  --arch:170px;            /* top corner radius of the arch frames */
  --wrap:1180px;
  --header-h:78px;
  --section-pad:92px;      /* space above and below each section's content */
}

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

html{
  scroll-behavior:smooth;
  /* A menu link lands the section heading 24px under the sticky header,
     not under the section's own top padding as well. */
  scroll-padding-top:calc(var(--header-h) + 24px - var(--section-pad));
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  overflow-x:hidden;
  overflow-wrap:break-word;
  background:var(--bg);
  color:var(--body);
  font:16px/1.7 "Plus Jakarta Sans","Noto Sans Tamil","Nirmala UI","Segoe UI",system-ui,-apple-system,sans-serif;
  padding-bottom:env(safe-area-inset-bottom,0px);
}

img{max-width:100%;display:block;height:auto}
a{color:var(--navy-700);text-decoration:none}
h1,h2,h3,h4{
  margin:0 0 .5em;
  color:var(--ink);
  font-family:"Marcellus","Georgia",serif;
  font-weight:400;
  line-height:1.2;
}
/* Paragraphs are justified. Hyphenation (the page is lang="en") keeps the
   word gaps even on a narrow phone column. Where a block is centred, the
   last line stays centred so it still sits under its heading. */
p{margin:0 0 1rem;text-align:justify;-webkit-hyphens:auto;hyphens:auto}
:is(.section-head,.slide-q,.band,.lightbox,.desk__empty) p,
p:is(.form__note,.desk__empty,.lightbox__cap){text-align-last:center}
/* short lines — footer, address, the bilingual form intro — stay ragged-right;
   justified, a line of Tamil (which has no hyphenation) opens up wide gaps */
:is(.footer,.info__row) p,p:is(.form__sub,.map__note){text-align:left;-webkit-hyphens:manual;hyphens:manual}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
blockquote{margin:0}
:focus-visible{outline:3px solid var(--saffron);outline-offset:3px;border-radius:4px}

.skip{
  position:fixed;top:-60px;left:16px;z-index:200;
  padding:11px 18px;border-radius:0 0 var(--r-sm) var(--r-sm);
  background:var(--navy-700);color:#fff;font-weight:700;font-size:14px;
  transition:top .2s ease;
}
.skip:focus{top:0}

/* ---------- reading progress ---------- */
.progress{position:fixed;inset:0 0 auto;height:3px;z-index:120;pointer-events:none}
.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--saffron),var(--red-600))}

/* ---------- layout ---------- */
.wrap{
  width:min(var(--wrap),100% - 40px);margin-inline:auto;
  padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);
}
.section{padding:var(--section-pad) 0}
.section--tint{background:var(--tint)}
.section--navy{
  background:
    radial-gradient(1000px 420px at 85% -10%,rgba(247,154,16,.22),transparent 60%),
    linear-gradient(165deg,var(--navy-900),var(--navy-700));
  color:#c9d5f5;
}
.section--navy h2,.section--navy h3{color:#fff}

.section-head{max-width:720px;margin:0 auto 54px;text-align:center}
.section-head p{color:var(--muted);font-size:17px;margin:0}
.section--navy .section-head p{color:#b6c4ee}
.section-head--split{
  max-width:none;display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;text-align:left;
}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:14px;
  color:var(--red-600);font-size:12px;font-weight:800;
  letter-spacing:.22em;text-transform:uppercase;
}
.eyebrow::before,.eyebrow::after{content:"";width:22px;height:2px;border-radius:2px;background:var(--saffron)}
.section-head--split .eyebrow::after,.about__body .eyebrow::after{display:none}
.section--navy .eyebrow{color:var(--saffron-300)}

h2.title{font-size:clamp(29px,3.6vw,45px);margin-bottom:14px;letter-spacing:-.01em}
.lead{font-size:17.5px;line-height:1.8;color:var(--ink)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 27px;border-radius:var(--r-sm);
  font-weight:700;font-size:15px;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,color .18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn--navy{background:var(--navy-700);color:#fff;box-shadow:0 10px 24px rgba(15,42,134,.26)}
.btn--navy:hover{background:var(--navy-800)}
.btn--saffron{background:var(--saffron);color:#42290a;box-shadow:0 10px 24px rgba(247,154,16,.36)}
.btn--saffron:hover{background:var(--saffron-300)}
.btn--outline{background:transparent;color:var(--navy-700);border:1.5px solid var(--navy-400)}
.btn--outline:hover{background:var(--navy-100)}
.section--navy .btn--outline,.band .btn--outline{color:#fff;border-color:rgba(255,255,255,.55)}
.section--navy .btn--outline:hover,.band .btn--outline:hover{background:rgba(255,255,255,.14)}
.btn--sm{padding:10px 18px;font-size:14px}
.btn--block{width:100%;margin-top:8px}
.btn[disabled]{opacity:.6;cursor:progress;transform:none}

/* ---------- announcement bar ---------- */
.topbar{background:var(--navy-900);color:#c3cef0;font-size:13.5px}
.topbar .wrap{display:flex;align-items:center;gap:18px;min-height:40px;flex-wrap:wrap;padding-block:5px}
/* The strip's left edge lines up with the page; its right end runs out to
   5mm from the window edge, so the Staff login button sits in the corner. */
.topbar .wrap{
  width:auto;margin:0;
  padding-left:max(20px, (100% - var(--wrap)) / 2);
  padding-right:5mm;
}
.topbar__note{margin:0;display:flex;align-items:center;gap:10px}
.topbar__note .dot{width:8px;height:8px;border-radius:50%;background:var(--saffron);flex-shrink:0;animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
.topbar__links{display:flex;gap:20px;flex-wrap:wrap;margin-left:auto}
.topbar__links li{display:flex;align-items:center;gap:7px}
.topbar a{color:#dbe3f8}
.topbar a:hover{color:var(--saffron-300)}

/* ---------- staff login button + enquiry desk ----------
   The yellow button sits at the right-hand end of the blue strip. The panel it
   opens is pinned to the top right corner of the window. See assets/js/desk.js. */
.topbar__login{
  margin-left:auto;                 /* always the last thing on the right */
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 13px;border:0;border-radius:999px;cursor:pointer;
  background:var(--saffron);color:#42290a;
  font:inherit;font-weight:800;font-size:12.5px;letter-spacing:.02em;
}
.topbar__login:hover{background:var(--saffron-300)}
.topbar__login:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* The desk takes over the whole window — it is a working screen for the
   office, not a note pinned to the corner. */
.desk{
  position:fixed;inset:0;z-index:200;overflow:auto;
  -webkit-overflow-scrolling:touch;
  background:var(--tint);color:var(--ink);
}
.desk[hidden]{display:none}
.desk__bar{
  position:sticky;top:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 22px;background:var(--navy-900);color:#fff;
}
.desk__brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:15.5px}
.desk__brand img{height:34px;width:auto}
.desk__x{
  padding:8px 16px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);color:#fff;
  font:inherit;font-size:13px;font-weight:700;
}
.desk__x:hover{background:var(--saffron);border-color:var(--saffron);color:#42290a}
.desk__body{max-width:var(--wrap);margin:0 auto;padding:26px 22px 64px}

.desk__head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
.desk__who b{font-family:"Marcellus",Georgia,serif;font-size:19px;color:var(--navy-800)}
.desk__who span{
  margin-left:9px;padding:3px 10px;border-radius:999px;
  background:var(--navy-100);color:var(--navy-700);font-size:11.5px;font-weight:800;
}

.desk__tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.desk__tab{
  padding:8px 15px;border-radius:999px;border:1px solid var(--line);cursor:pointer;
  background:var(--white);color:var(--body);font:inherit;font-size:13px;font-weight:700;
}
.desk__tab:hover{border-color:var(--navy-400)}
.desk__tab.is-on{background:var(--navy-700);border-color:var(--navy-700);color:#fff}

.desk__scroll{overflow-x:auto;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);padding:4px 16px 8px}
.desk__table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:780px}
.desk__table th{
  text-align:left;padding:9px 10px;border-bottom:2px solid var(--line);
  color:var(--muted);font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  white-space:nowrap;
}
.desk__table td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
.desk__table tr:last-child td{border-bottom:0}
/* Everything short stays on one line. Only the parent's message is allowed to
   run on, because it is the only column whose length cannot be guessed. */
.desk__no{font-weight:800;color:var(--navy-700);white-space:nowrap}
.desk__flat{white-space:nowrap}
.desk__name{white-space:nowrap}
.desk__when{white-space:nowrap;color:var(--muted);font-size:12.5px}
.desk__msg{min-width:230px;color:var(--body)}

.desk__empty{margin:18px 0;color:var(--muted);text-align:center}
.desk__note{margin:16px 0 0;font-size:12px;color:var(--muted);line-height:1.6}
.desk__hint{margin:0 0 4px;font-size:13px;color:var(--muted)}
.desk__err{margin:0;font-size:13px;color:var(--red-600);min-height:19px}

.desk__login{
  display:grid;gap:12px;max-width:360px;margin:7vh auto 0;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px 26px;box-shadow:var(--shadow);
}
.desk__login h2{font-size:23px;color:var(--navy-800);margin:0}
.desk__new{display:grid;gap:12px;max-width:320px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.desk__new h3{font-size:16px;color:var(--navy-800);margin:0}

/* The enquiry QR code, for printing on posters and notices */
.desk__qr{display:grid;gap:14px;justify-items:center;max-width:360px;margin:8px auto 0;text-align:center}
.desk__qr img{width:100%;max-width:280px;height:auto;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff}
.desk__qr p{margin:0;font-size:13.5px;color:var(--muted);text-align:center;text-align-last:center}
.desk__qr code{font-size:12px;word-break:break-all;color:var(--navy-800)}
.desk__qrbtns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.desk__qrbtns a{text-decoration:none}

.desk__field{display:grid;gap:5px}
.desk__field span{font-size:12.5px;font-weight:700;color:var(--navy-800)}
.desk__field input{
  padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);
  font:inherit;font-size:14px;color:var(--ink);background:var(--white);
}
.desk__field input:focus{outline:2px solid var(--navy-600);outline-offset:1px;border-color:var(--navy-600)}

.desk__btn{
  padding:9px 16px;border-radius:999px;border:1px solid transparent;cursor:pointer;
  font:inherit;font-size:13px;font-weight:700;
}
.desk__btn--go{background:var(--navy-700);color:#fff;justify-self:start}
.desk__btn--go:hover{background:var(--navy-600)}
.desk__btn--out{background:var(--white);border-color:var(--line);color:var(--body)}
.desk__btn--out:hover{border-color:var(--navy-400)}
.desk__btn--close{background:var(--saffron);color:#42290a;padding:7px 14px}
.desk__btn--close:hover{background:var(--saffron-300)}
.desk__btn--drop{background:var(--red-100);color:var(--red-700);padding:6px 12px;font-size:12.5px}
.desk__btn--drop:hover{background:#fbd9d7}

@media (max-width:620px){
  .desk__bar{padding:10px 14px}
  .desk__brand span{font-size:14px}
  .desk__body{padding:18px 14px 54px}
  .desk__scroll{padding:4px 10px 8px}
  .desk__login{margin-top:3vh}
}

/* ---------- header ---------- */
.header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.93);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s ease;
}
.header.is-stuck{box-shadow:0 8px 28px rgba(11,31,107,.10)}
.header .wrap{display:flex;align-items:center;gap:20px;min-height:var(--header-h)}

.brand{display:flex;align-items:center;gap:12px;margin-right:auto;min-width:0}
.brand__logo{width:auto;height:54px;flex-shrink:0}
.brand__text{min-width:0}
/* THE SCHOOL NAME in the header.
   The words themselves are in index.html (header ~line 202, footer ~line 902).
   Line 1 is "Sri Jayadurga", line 2 is "ENGLISH HIGHER SECONDARY SCHOOL". */
.brand__name{                                     /* line 1 */
  display:block;font-family:"Marcellus",Georgia,serif;
  font-size:21px;                                 /* size of line 1 */
  color:var(--navy-800);                          /* colour of line 1 */
  line-height:1.15;
}
.brand__tag{                                      /* line 2 */
  display:block;
  font-size:10.5px;                               /* size of line 2 */
  color:var(--red-600);                           /* colour of line 2 */
  letter-spacing:.16em;text-transform:uppercase;font-weight:800;
}

.nav{display:flex;align-items:center;gap:18px}
.nav ul{display:flex;align-items:center;gap:1px}
.nav ul a{
  display:block;padding:9px 12px;border-radius:8px;color:var(--body);
  font-size:14.5px;font-weight:600;transition:color .18s ease,background-color .18s ease;
}
.nav ul a:hover{color:var(--navy-700);background:var(--navy-100)}
.nav ul a.is-active{color:var(--navy-700);background:var(--saffron-100)}
.nav__close{display:none}

.burger{display:none;width:44px;height:44px;border-radius:10px;padding:11px 10px;background:var(--navy-100)}
.burger span{display:block;height:2px;border-radius:2px;background:var(--navy-800);transition:transform .25s ease,opacity .2s ease}
.burger span+span{margin-top:5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-veil{position:fixed;inset:0;z-index:98;background:rgba(8,22,66,.5);backdrop-filter:blur(2px)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--navy-50);padding:72px 0 86px}
.hero__glow{
  position:absolute;inset:-40% -20% auto;height:130%;
  background:
    radial-gradient(540px 400px at 14% 14%,rgba(247,154,16,.20),transparent 62%),
    radial-gradient(620px 460px at 86% 4%,rgba(28,63,174,.16),transparent 62%);
  pointer-events:none;
}
.hero__wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:58px;align-items:stretch}
.hero__copy{align-self:center}

.kicker{
  display:inline-flex;align-items:center;gap:9px;padding:9px 18px;border-radius:999px;
  background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-sm);
  color:var(--navy-700);font-size:12.5px;font-weight:700;letter-spacing:.03em;
}
.kicker svg{color:var(--red-600)}
.hero h1{
  font-size:clamp(36px,5.4vw,62px);margin:22px 0 18px;line-height:1.1;
  color:var(--navy-800);letter-spacing:-.015em;
}
.hero h1 em{font-style:normal;color:var(--saffron-700)}
.hero__lead{max-width:56ch;margin:0 0 30px;font-size:17px;line-height:1.8}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:38px}

.hero__facts{display:flex;gap:34px;flex-wrap:wrap}
.hero__facts li{position:relative;padding-left:16px}
.hero__facts li::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;border-radius:3px;background:var(--saffron)}
.hero__facts b{display:block;font-family:"Marcellus",serif;font-size:24px;color:var(--navy-800);line-height:1.1}
.hero__facts span{font-size:12.5px;color:var(--muted);font-weight:600}

/* arch-topped frame — echoes the oval crest and the gopuram in the emblem */
.arch{
  border-radius:var(--arch) var(--arch) var(--r) var(--r);
  overflow:hidden;background:var(--navy-100);
  aspect-ratio:4/3;                               /* photographs are cropped to this shape */
  border:8px solid var(--white);box-shadow:var(--shadow-lg);
}
.arch svg,.arch img{width:100%;height:100%;display:block;object-fit:cover}
.arch--sm{--arch:130px;border-width:7px;box-shadow:var(--shadow)}

/* ---------- the hero photograph ----------
   A plain rounded card rather than a framed picture: no white mount, no arch,
   and it stretches to the full height of the words beside it so no space is
   left standing empty. The emblem sits on the photograph itself, on a panel
   of frosted glass, instead of hanging off the corner. */
.hero__media{position:relative;display:flex;min-height:440px}
.shot{
  position:relative;flex:1;margin:0;isolation:isolate;
  border-radius:28px;overflow:hidden;background:var(--navy-100);
  box-shadow:0 34px 64px -22px rgba(8,22,66,.48),0 2px 8px rgba(8,22,66,.10);
}
.shot__photo{width:100%;height:100%;object-fit:cover;display:block}
/* a soft shading in the bottom corner, just enough for the emblem to read
   against whatever the photograph happens to be doing there */
.shot::after{
  content:"";position:absolute;inset:auto 0 0;height:34%;pointer-events:none;
  background:linear-gradient(to top,rgba(8,22,66,.52),transparent);
}
.shot__crest{
  position:absolute;left:24px;bottom:20px;z-index:1;
  width:auto;height:clamp(110px,13vw,150px);
  filter:drop-shadow(0 10px 22px rgba(8,22,66,.45));
}

/* ---------- admissions announcement ---------- */
.admission-popup{
  border:0;border-radius:16px;padding:0;margin:auto;
  width:min(560px,calc((100vh - 164px) * .6667));
  width:min(560px,calc((100dvh - 164px) * .6667));max-width:calc(100% - 32px);
  max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);
  background:var(--white);color:var(--navy-800);
  box-shadow:0 24px 80px rgba(0,0,0,.4);overflow:auto;
}
.admission-popup::backdrop{background:rgba(8,22,66,.8)}
.admission-popup__header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 8px 4px 16px;font-size:13px;font-weight:700}
.admission-popup__close{display:grid;place-items:center;width:44px;height:44px;padding:0;flex-shrink:0;border:0;border-radius:50%;background:transparent;color:var(--navy-800);line-height:1;cursor:pointer}
.admission-popup__close:hover{background:var(--tint)}
.admission-popup__artwork{position:relative}
.admission-popup__poster{display:block;width:100%;height:auto}
/* Match the separate QR overlay in add.htm: 87px square at (487,720)
   on the 602 x 903 poster. Keep its position proportional on every screen. */
.admission-popup__qr{position:absolute;left:80.897%;top:79.734%;width:14.452%;height:auto;background:#fff}
.admission-popup__footer{display:flex;justify-content:center;padding:12px 16px}
@media print{.admission-popup{display:none!important}}

/* ---------- notice marquee ---------- */
.marquee{background:var(--navy-800);color:#dbe3f8;overflow:hidden}
.marquee .wrap{width:calc(100% - 32px);display:flex;align-items:center;gap:18px;min-height:50px}
.marquee__label{
  display:inline-flex;align-items:center;gap:7px;flex-shrink:0;
  background:var(--saffron);color:#42290a;padding:5px 14px;border-radius:999px;
  font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
}
.marquee__track{overflow:hidden;flex:1;display:flex;gap:0}
.marquee__track p{flex:0 0 auto;margin:0;white-space:nowrap;animation:scroll-left 42s linear infinite;font-size:14.5px}
.marquee:hover .marquee__track p,.marquee:focus-within .marquee__track p{animation-play-state:paused}
@keyframes scroll-left{from{transform:translateX(0)}to{transform:translateX(-100%)}}

/* ---------- pillars ---------- */
.pillars-sec{padding:72px 0}
.pillars{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--white);
  box-shadow:var(--shadow-sm);
}
.pillar{padding:34px 30px;border-right:1px solid var(--line)}
.pillar:last-child{border-right:0}
.pillar__num{
  display:block;font-family:"Marcellus",serif;font-size:34px;
  color:var(--saffron);line-height:1;margin-bottom:12px;
}
.pillar h3{font-size:19px;margin-bottom:8px}
.pillar p{margin:0;font-size:14.5px;color:var(--muted)}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.about__media{position:relative}
.about__seal{
  position:absolute;right:-18px;bottom:-18px;width:116px;height:116px;border-radius:50%;
  background:linear-gradient(150deg,var(--navy-700),var(--navy-900));color:#fff;
  display:grid;place-content:center;text-align:center;box-shadow:var(--shadow);
  border:4px solid var(--saffron-300);
}
.about__seal b{display:block;font-family:"Marcellus",serif;font-size:27px;line-height:1;color:#fff}
.about__seal span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--saffron-300)}

.vm{display:grid;gap:18px;margin-top:28px}
.vm__item{display:flex;gap:15px}
.vm__ico{
  width:44px;height:44px;border-radius:12px;flex-shrink:0;display:grid;place-items:center;
  background:var(--saffron-100);color:var(--saffron-700);
}
.vm__item h4{font-size:16.5px;margin-bottom:3px}
.vm__item p{margin:0;font-size:15px;color:var(--muted)}

.badges{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.badges li{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;border-radius:999px;background:var(--navy-100);
  color:var(--navy-800);font-size:13px;font-weight:700;
}
.badges svg{color:var(--red-600)}

/* ---------- stats ---------- */
.stats-sec{padding:64px 0;background:var(--white);border-block:1px solid var(--line)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stat{text-align:center;padding:0 12px;border-right:1px dashed var(--line)}
.stat:last-child{border-right:0}
.stat__ico{
  display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:var(--navy-100);color:var(--navy-700);margin-bottom:12px;
}
.stat b{display:block;font-family:"Marcellus",serif;font-size:clamp(30px,3.6vw,40px);color:var(--navy-800);line-height:1}
.stat span{font-size:14px;color:var(--muted);font-weight:600}

/* ---------- leadership: chairman + principal ---------- */
.leaders{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:1000px;margin:0 auto}
.leader{
  position:relative;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:32px 34px 34px;box-shadow:var(--shadow-sm);
  transition:transform .25s ease,box-shadow .25s ease;
}
.leader::before{
  content:"";position:absolute;inset:0 0 auto;height:5px;border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:linear-gradient(90deg,var(--navy-700),var(--saffron));
}
.leader:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.leader__head{display:flex;align-items:center;gap:18px;margin-bottom:20px}
.leader__photo{
  width:96px;height:96px;border-radius:50%;overflow:hidden;flex-shrink:0;
  border:4px solid var(--white);box-shadow:var(--shadow-sm);background:var(--navy-100);
}
.leader__photo svg,.leader__photo img{width:100%;height:100%;object-fit:cover}
.leader__post{
  display:inline-block;margin-bottom:7px;padding:4px 12px;border-radius:999px;
  background:var(--red-100);color:var(--red-700);
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
.leader__id h3{font-size:22px;margin:0 0 2px}
.leader__meta{margin:0;font-size:13.5px;color:var(--muted);font-weight:600}
.leader__mark{display:block;color:var(--navy-100);margin-bottom:-14px}
.leader blockquote{
  font-family:"Marcellus",serif;font-size:17.5px;line-height:1.65;color:var(--ink);
  margin-bottom:20px;
}
.leader__pts{display:grid;gap:9px;padding-top:18px;border-top:1px dashed var(--line)}
.leader__pts li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--muted)}
.leader__pts svg{flex-shrink:0;margin-top:4px;color:var(--navy-600)}

/* ---------- academics tabs ---------- */
.tabs{display:grid;grid-template-columns:280px 1fr;gap:28px;align-items:start}
.tabs__list{display:grid;gap:10px}
.tabs__btn{
  text-align:left;padding:17px 20px;border-radius:var(--r);
  background:var(--white);border:1px solid var(--line);
  transition:border-color .2s ease,background-color .2s ease,transform .2s ease;
}
.tabs__btn:hover{transform:translateX(3px);border-color:var(--navy-400)}
.tabs__btn b{display:block;font-family:"Marcellus",serif;font-size:19px;color:var(--ink)}
.tabs__btn span{font-size:12.5px;color:var(--muted)}
.tabs__btn.is-active{
  background:linear-gradient(150deg,var(--navy-700),var(--navy-900));
  border-color:transparent;box-shadow:var(--shadow);
}
.tabs__btn.is-active b{color:#fff}
.tabs__btn.is-active span{color:var(--saffron-300)}

.tabs__panels{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:38px 40px;box-shadow:var(--shadow-sm)}
.tabs__panel{animation:fade-up .35s ease both}
.tabs__panel:focus{outline:none}
@keyframes fade-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.panel__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.panel__head h3{font-size:27px;margin:0}
.panel__count{font-size:14px;color:var(--muted)}
.panel__count b{font-family:"Marcellus",serif;font-size:20px;color:var(--saffron-700)}

.ticks{display:grid;gap:11px;margin:22px 0 28px}
.ticks li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px}
.ticks li b{color:var(--ink);font-weight:700}
.ticks svg{flex-shrink:0;margin-top:5px;color:var(--navy-600)}
.ticks--inline{display:flex;flex-wrap:wrap;gap:8px 22px;margin:16px 0 0}
.ticks--inline li{font-size:14px;color:var(--muted);font-weight:600}

/* ---------- campus feature rows ---------- */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;margin-bottom:64px}
.feature:last-of-type{margin-bottom:0}
.feature--flip .feature__media{order:2}
.feature__media{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);border:7px solid var(--white)}
.feature__media svg,.feature__media img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover}

/* A picture that changes by itself every couple of seconds.

   The photographs sit stacked on top of one another. JavaScript puts .is-on
   on the one that should be showing and .is-out on the one it replaces.

   The arriving photograph slides in from the left at full strength; the one
   it replaces stays exactly where it is underneath and only fades near the
   end of the move, so the frame is never empty for even a moment.

   How often it changes is set in index.html, in data-xfade="2000"
   (2000 = two seconds). The speed of the move itself is --xfade-move below.
   With JavaScript off, or if the script ever fails, the first photograph
   simply stays put. */
/* isolate: keeps the stacking below inside this frame, so anything laid
   over the picture — the Established seal, for one — stays on top. */
.xfade{position:relative;aspect-ratio:4/3;overflow:hidden;isolation:isolate;--xfade-move:.7s}
.xfade img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;z-index:0;
}
.xfade img:first-child{opacity:1}          /* so the frame is never blank */
.xfade img.is-on{opacity:1;z-index:2}      /* the photograph on show */
.xfade img.is-out{opacity:1;z-index:1}     /* the one being replaced */

.xfade img.is-moving{animation:xfade-arrive var(--xfade-move) ease both}
.xfade img.is-out{animation:xfade-leave var(--xfade-move) ease both}

/* in from the left, at full clarity — no fade on the way */
@keyframes xfade-arrive{
  from{transform:translateX(-100%)}
  to{transform:translateX(0)}
}
/* holds its ground, then goes, so nothing shows through mid-move */
@keyframes xfade-leave{
  0%{opacity:1}
  65%{opacity:1}
  100%{opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .xfade img{animation:none!important}
}
.feature__ico{
  display:inline-grid;place-items:center;width:52px;height:52px;border-radius:14px;
  background:var(--navy-700);color:var(--saffron-300);margin-bottom:16px;box-shadow:var(--shadow-sm);
}
.feature h3{font-size:clamp(22px,2.6vw,28px)}
.feature p{font-size:16px;margin:0}

.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:60px}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 17px;border-radius:999px;background:var(--white);
  border:1px solid var(--line);color:var(--navy-800);
  font-size:13.5px;font-weight:700;
}
.chip svg{color:var(--saffron-700)}

/* ---------- gallery carousel ---------- */
.rail__nav{display:flex;gap:10px;flex-shrink:0}
.rail__btn{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;
  transition:background-color .2s ease,transform .2s ease,opacity .2s ease;
}
.rail__btn:hover{background:var(--saffron);color:#42290a;border-color:transparent;transform:translateY(-2px)}
.rail__btn[disabled]{opacity:.35;cursor:default;transform:none}
.rail{
  display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:6px 4px 22px;scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.35) transparent;
}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-track{background:rgba(255,255,255,.1);border-radius:99px}
.rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.35);border-radius:99px}
.slide{
  position:relative;flex:0 0 clamp(250px,32%,330px);scroll-snap-align:start;
  border-radius:var(--r);overflow:hidden;padding:0;
  border:1px solid rgba(255,255,255,.18);background:var(--navy-800);
  transition:transform .25s ease,box-shadow .25s ease;
}
.slide:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
/* The photograph fills its tile — every tile the same size down the row. */
.slide svg,.slide img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}

/* Which part of a photograph to keep when a 4:3 frame has to crop it.
   Left alone, the middle is kept — which for these three cuts out the very
   thing the picture is of. A percentage means how far down the photograph the
   kept slice sits: 30% is near the top, 90% near the bottom. This applies only
   to the cropped frames; opening a photograph still shows all of it. */
.slide img[src$="computer-lab.jpg"],
.xfade img[src$="computer-lab.jpg"]{object-position:center 30%}      /* the row of machines */
.slide img[src$="yoga-day.jpg"],
.xfade img[src$="yoga-day.jpg"]{object-position:center bottom}       /* the front row of children */
.slide img[src$="independence-day.jpg"]{object-position:center 90%}  /* the people, not just the flag */
.slide__cap{
  position:absolute;inset:auto 0 0;z-index:2;padding:26px 16px 13px;
  background:linear-gradient(to top,rgba(8,22,66,.9),transparent);
  color:#fff;font-size:14px;font-weight:700;text-align:left;
}

/* ---------- timeline ---------- */
.timeline{position:relative;max-width:820px;margin:0 auto;padding-left:34px}
.timeline::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--saffron),var(--navy-400))}
.tl{position:relative;padding-bottom:34px}
.tl:last-child{padding-bottom:0}
.tl::before{
  content:"";position:absolute;left:-31px;top:7px;width:14px;height:14px;border-radius:50%;
  background:var(--white);border:3px solid var(--navy-700);
}
.tl__year{
  display:inline-block;margin-bottom:6px;padding:3px 12px;border-radius:999px;
  background:var(--navy-700);color:#fff;font-size:12.5px;font-weight:800;letter-spacing:.08em;
}
.tl__body h4{font-size:19px;margin:0 0 4px}
.tl__body p{margin:0;font-size:15px;color:var(--muted)}

/* ---------- testimonial slider ---------- */
.slider{max-width:840px;margin:0 auto}
.slider__viewport{position:relative;min-height:300px}
.slide-q{
  position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .45s ease,transform .45s ease,visibility .45s;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:46px 48px;box-shadow:var(--shadow-sm);text-align:center;
}
.slide-q.is-active{opacity:1;visibility:visible;transform:none;position:relative}
.slide-q__mark{display:inline-block;color:var(--saffron-300);margin-bottom:12px}
.slide-q p{font-family:"Marcellus",serif;font-size:clamp(17px,2vw,21px);line-height:1.65;color:var(--ink);margin-bottom:26px}
.slide-q__by{display:inline-flex;align-items:center;gap:13px;text-align:left}
.av{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  background:linear-gradient(150deg,var(--navy-600),var(--navy-900));
  color:var(--saffron-300);font-family:"Marcellus",serif;font-size:20px;
}
.slide-q__by b{display:block;color:var(--ink);font-size:15px}
.slide-q__by span{font-size:13px;color:var(--muted)}
.slider__dots{display:flex;justify-content:center;gap:9px;margin-top:26px}
.slider__dots button{
  width:9px;height:9px;border-radius:999px;background:var(--line);
  transition:width .25s ease,background-color .25s ease;
}
.slider__dots button.is-active{width:30px;background:var(--navy-700)}

/* ---------- admission steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-bottom:76px}
.step{
  position:relative;padding:30px 26px;border-radius:var(--r);
  background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.step__n{
  display:grid;place-items:center;width:40px;height:40px;border-radius:12px;margin-bottom:14px;
  background:var(--saffron-100);color:var(--saffron-700);
  font-family:"Marcellus",serif;font-size:19px;
}
.step h4{font-size:18px;margin-bottom:6px}
.step p{margin:0;font-size:14.5px;color:var(--muted)}

/* ---------- FAQ ---------- */
.faq-wrap{max-width:860px;margin:0 auto}
.faq-title{font-size:27px;text-align:center;margin-bottom:28px}
.faq{display:grid;gap:12px}
.qa{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:border-color .2s ease}
.qa.is-open{border-color:var(--saffron-300);box-shadow:var(--shadow-sm)}
.qa h4{margin:0;font-family:inherit}
.qa__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:19px 24px;text-align:left;font-weight:700;font-size:16px;color:var(--ink);
  font-family:"Plus Jakarta Sans","Noto Sans Tamil","Nirmala UI","Segoe UI",sans-serif;
}
.qa__sign{position:relative;width:18px;height:18px;flex-shrink:0}
.qa__sign::before,.qa__sign::after{
  content:"";position:absolute;inset:50% 0 auto;height:2px;border-radius:2px;
  background:var(--navy-700);transform:translateY(-50%);transition:transform .25s ease;
}
.qa__sign::after{transform:translateY(-50%) rotate(90deg)}
.qa.is-open .qa__sign::after{transform:translateY(-50%) rotate(0)}
.qa__a{max-height:0;overflow:hidden;transition:max-height .32s ease}
.qa__a p{margin:0;padding:0 24px 21px;font-size:15.5px;color:var(--muted)}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:1.05fr .95fr;gap:38px;align-items:start}
.form{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:38px;box-shadow:var(--shadow-sm)}
.form h3{font-size:23px;margin-bottom:4px;scroll-margin-top:var(--section-pad)}
.form__sub{color:var(--muted);font-size:15px;margin-bottom:24px}
/* The Tamil line under each English label, heading and note in the form */
.form .ta{display:block;font-family:"Noto Sans Tamil","Nirmala UI",sans-serif;font-size:.86em;font-weight:500;color:var(--muted);line-height:1.5}
.form h3 .ta{font-size:.72em;margin-top:2px}
.form__msg .ta{color:inherit;margin-top:4px}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field--full{grid-column:1/-1}
.field label{display:block;font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:6px}
.req{color:var(--red-600)}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border-radius:var(--r-sm);
  border:1.5px solid var(--line);background:var(--tint);
  font:inherit;font-size:15px;color:var(--ink);
  transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--navy-400);background:var(--white);
  box-shadow:0 0 0 4px rgba(109,136,221,.2);
}
.field textarea{resize:vertical;min-height:104px}
.err{display:block;min-height:17px;font-size:12.5px;color:var(--red-600);margin-top:3px}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-color:var(--red-600);background:var(--red-100)}

/* spam trap — visually and audibly hidden, still focusable by bots */
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.form__note{font-size:12.5px;color:var(--muted);text-align:center;margin:12px 0 0}
.form__msg{
  display:none;margin-top:14px;padding:14px 16px;border-radius:var(--r-sm);
  font-size:14px;font-weight:600;line-height:1.6;
}
.form__msg.is-ok{display:block;background:#eaf7ee;border:1px solid #b9e2c6;color:#1c6b36}
.form__msg.is-error{display:block;background:var(--red-100);border:1px solid #f4b7b5;color:var(--red-700)}
.form__msg a{color:inherit;text-decoration:underline}

.info{display:grid;gap:20px}
.info__row{display:flex;gap:15px}
.info__ico{
  width:44px;height:44px;border-radius:12px;flex-shrink:0;display:grid;place-items:center;
  background:var(--white);border:1px solid var(--line);color:var(--navy-700);
}
.info__row h4{font-size:15.5px;margin-bottom:3px}
.info__row p{margin:0;font-size:15px;color:var(--muted)}
.info__row a{display:block;font-size:15px;color:var(--navy-700);overflow-wrap:anywhere}
.info__row a:hover{text-decoration:underline}

.map{margin-top:8px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--white)}
.map iframe{display:block;width:100%;height:280px;border:0}
.map__note{
  display:flex;align-items:center;gap:7px;margin:0;
  font-size:13px;color:var(--muted);font-weight:600;
}
.map__note svg{color:var(--red-600);flex-shrink:0}

/* ---------- CTA band ---------- */
.band{
  padding:74px 0;text-align:center;
  background:
    radial-gradient(700px 300px at 50% 0%,rgba(247,154,16,.22),transparent 62%),
    linear-gradient(150deg,var(--navy-800),var(--navy-900));
  color:#c9d5f5;
}
.band h2{color:#fff;font-size:clamp(26px,3.4vw,38px)}
.band p{max-width:none;margin:0 auto 26px;color:#b6c4ee}
/* The admissions sentence stays on ONE line on laptops and tablets.
   On phones it wraps normally, otherwise it would run off the screen. */
@media (min-width:821px){.band p{white-space:nowrap}}
.band__cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- footer ---------- */
.footer{background:var(--navy-900);color:#aebbe4;padding:66px 0 26px;font-size:15px}
.footer__grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.3fr;gap:40px}
.footer__brand{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.footer__brand img{width:auto;height:58px;background:#fff;border-radius:50%;padding:5px}
.footer__brand .brand__name{color:#fff}
.footer__brand .brand__tag{color:var(--saffron-300)}
.footer h4{color:#fff;font-size:16px;margin-bottom:16px}
.footer ul{display:grid;gap:9px}
.footer a{color:#c3cef0}
.footer a:hover{color:var(--saffron-300)}
.footer__reach li{font-size:14.5px;line-height:1.6}
.footer__social{display:flex;gap:10px;margin-top:18px}
.footer__social a{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:rgba(255,255,255,.08);color:#dbe3f8;transition:background-color .2s ease,transform .2s ease;
}
.footer__social a:hover{background:var(--saffron);color:#42290a;transform:translateY(-2px)}
.footer__bottom{
  margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13.5px;color:#8c9bcb;
}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:130;display:none;place-items:center;padding:28px;
  background:rgba(6,16,48,.94);
}
.lightbox.is-open{display:grid}
.lightbox[hidden]{display:none}
.lightbox__inner{max-width:900px;width:100%}
/* The opened photograph always sits in a frame of the same size — the shape of
   the first photograph in the gallery — whatever shape the picture itself is.
   That keeps the caption underneath in the same place every time instead of
   jumping up and down as you step through. The whole picture is shown inside
   that frame, so nothing is cut off. */
.lightbox figure{
  margin:0;border-radius:var(--r);overflow:hidden;background:var(--navy-900);
  aspect-ratio:16/9;display:grid;place-items:center;
}
.lightbox figure svg,.lightbox figure img{
  width:100%;height:100%;object-fit:contain;display:block;
}
.lightbox__cap{text-align:center;color:#c9d5f5;margin:16px 0 0;font-size:15px}
.lightbox__close{
  position:absolute;top:18px;right:22px;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;
}
.lightbox__close:hover{background:var(--saffron);color:#42290a}
.lightbox__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.14);color:#fff;
}
.lightbox__nav:hover{background:var(--saffron);color:#42290a}
.lightbox__nav--prev{left:18px}
.lightbox__nav--next{right:18px}

/* ---------- back to top + mobile dock ---------- */
.totop{
  position:fixed;right:20px;bottom:24px;z-index:90;
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:var(--navy-700);color:#fff;box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s,background-color .2s ease;
}
.totop.is-shown{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--navy-800)}

.dock{display:none}

/* ---------- reveal on scroll ---------- */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.is-in{opacity:1;transform:none}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1100px){
  .nav ul a{padding:9px 9px;font-size:14px}
  .brand__name{font-size:19px}
  .brand__logo{height:48px}
}

@media (max-width:1040px){
  .hero__wrap{grid-template-columns:1fr;gap:44px}
  .hero__media{max-width:560px;width:100%;margin-inline:auto;min-height:0}
  .shot{aspect-ratio:4/3}
  .pillars{grid-template-columns:1fr 1fr}
  .pillar:nth-child(2){border-right:0}
  .pillar:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .steps{grid-template-columns:1fr 1fr}
  .tabs{grid-template-columns:minmax(0,1fr)}
  .tabs__list{grid-template-columns:repeat(4,1fr);grid-auto-flow:column}
  .tabs__btn:hover{transform:none}
}

@media (max-width:900px){
  :root{--section-pad:72px}
  .about{grid-template-columns:1fr;gap:46px}
  .about__seal{right:12px;bottom:-20px;width:100px;height:100px}
  .leaders{grid-template-columns:1fr}
  .contact{grid-template-columns:minmax(0,1fr)}   /* minmax: a long line inside can't widen the column past the screen */
  .feature,.feature--flip{grid-template-columns:1fr;gap:26px}
  .feature--flip .feature__media{order:0}
  .footer__grid{grid-template-columns:1fr 1fr;gap:34px}
  .footer__about{grid-column:1/-1}
}

@media (max-width:820px){
  .topbar__links{display:none}

  /* backdrop-filter makes the header the containing block for the fixed
     .nav inside it: the menu was clipped to the header's height, and the
     closed menu hung off the right edge and widened the page. */
  .header{backdrop-filter:none;background:var(--white)}

  /* iOS Safari zooms into any field under 16px and stays zoomed */
  .field input,.field select,.field textarea,.desk__field input{font-size:16px}

  .burger{display:block}
  .nav{
    position:fixed;inset:0 0 0 auto;z-index:99;width:min(320px,86vw);
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    padding:78px 24px 32px;background:var(--white);box-shadow:var(--shadow-lg);
    transform:translateX(100%);transition:transform .3s ease;overflow-y:auto;
  }
  .nav.is-open{transform:none}
  .nav ul{flex-direction:column;align-items:stretch;gap:2px}
  .nav ul a{padding:14px 12px;font-size:16.5px;border-bottom:1px solid var(--line);border-radius:0}
  .nav__cta{display:flex;margin-top:22px}
  .nav__close{
    display:grid;place-items:center;position:absolute;top:18px;right:18px;
    width:42px;height:42px;border-radius:50%;background:var(--navy-100);
    color:var(--navy-800);font-size:26px;line-height:1;
  }

  .hero{padding:52px 0 70px}
  .shot__crest{left:16px;bottom:15px;height:104px}
  .stats{grid-template-columns:1fr 1fr;gap:32px 16px}
  .stat{border-right:0}
  .stat:nth-child(odd){border-right:1px dashed var(--line)}
  .slide{flex-basis:78%}
  .section-head--split{flex-direction:column;align-items:flex-start}
  .tabs__list{grid-template-columns:1fr 1fr;grid-auto-flow:row}

  /* mobile quick-action dock */
  .dock{
    display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:1px;
    position:fixed;inset:auto 0 0;z-index:95;background:var(--line);
    padding-bottom:env(safe-area-inset-bottom,0px);
    box-shadow:0 -6px 24px rgba(11,31,107,.16);
  }
  .dock a{
    display:flex;align-items:center;justify-content:center;gap:8px;
    padding:14px 8px;background:var(--white);color:var(--navy-800);
    font-size:14px;font-weight:700;
  }
  .dock__cta{background:var(--navy-700);color:#fff}
  .totop{bottom:76px}
  body{padding-bottom:58px}
}

@media (max-width:620px){
  .wrap{width:min(var(--wrap),100% - 32px)}
  .topbar .wrap{padding-left:16px}
  :root{--section-pad:58px}
  .pillars{grid-template-columns:1fr}
  .pillar{border-right:0;border-bottom:1px solid var(--line)}
  .pillar:last-child{border-bottom:0}
  .steps{grid-template-columns:1fr}
  .form__grid{grid-template-columns:1fr}
  .form{padding:26px 22px}
  .footer__grid{grid-template-columns:1fr}
  .tabs__list{grid-template-columns:1fr}
  .tabs__panels{padding:28px 22px}
  .slide-q{padding:32px 24px}
  .leader{padding:26px 24px 28px}
  .leader__head{gap:14px}
  .leader__photo{width:78px;height:78px}
  .arch{--arch:120px}
  /* the three facts always share one row on a phone, in equal columns,
     with the figures shrinking with the screen so the widest still fits */
  .hero__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .hero__facts li{padding-left:11px}
  .hero__facts b{font-size:clamp(14px,4.6vw,21px);white-space:nowrap}
  .hero__facts span{display:block;font-size:11.5px;line-height:1.3;margin-top:3px}
  /* the two hero buttons stack at the same full width, not two ragged lengths */
  .hero__cta{flex-direction:column}
  .hero__cta .btn{justify-content:center}
  .band__cta{flex-direction:column;align-items:center}
  .band__cta .btn{justify-content:center;width:min(100%,260px)}
  /* a wide frame leaves an upright photograph very small on a phone,
     so the frame squares up here — still one size for every picture */
  .lightbox figure{aspect-ratio:1/1}
  .lightbox__nav{width:40px;height:40px}
  .lightbox__nav--prev{left:6px}
  .lightbox__nav--next{right:6px}
  .footer__bottom{flex-direction:column;gap:8px}
}

@media (max-width:400px){
  .brand__name{font-size:17px}
  .brand__tag{font-size:9.5px;letter-spacing:.12em}
  .brand__logo{height:42px}
}

/* ---------- motion & print ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js .reveal{opacity:1;transform:none}
  .marquee__track p{animation:none}
}

@media print{
  .topbar,.header,.marquee,.dock,.totop,.lightbox,.progress,.rail__nav,.band,.skip,.nav-veil{display:none!important}
  body{background:#fff;color:#000;padding:0}
  .section{padding:18px 0;break-inside:avoid}
  .section--navy,.footer{background:#fff!important;color:#000!important}
  .section--navy h2,.section--navy h3,.footer h4,.footer a{color:#000!important}
  .qa__a{max-height:none!important}
  .slide-q{position:relative!important;opacity:1!important;visibility:visible!important;transform:none!important}
  .js .reveal{opacity:1!important;transform:none!important}
}