/* ===================================================================
   CAS — The Centre of Excellence in Advanced Studies

   Section order and layout skeleton come from the DITE homepage brief.
   Everything expressive is CAS's own: Fraunces + Public Sans on a two-family
   scale, colour roles sampled from the crest (assets/images/2022/04/3-1.png),
   and a 4px-based spacing scale replacing the brief's ad-hoc 5px values.

   Removed from the ported version, deliberately: the orbiting satellites over a
   rotating 3D photo wall, the infinite logo marquee, the autoplaying carousel,
   the glossy button sweep, and grayscale-until-hover on the accreditations.

   Desktop-first; max-width media queries at 1500/1200/1024/767/480.
   =================================================================== */

/* ---------- Design tokens ---------- */
:root{
  /* Fraunces (serif) carries the voice; Public Sans stays neutral underneath it. */
  --font-display:"Fraunces","Georgia",serif;
  --font-ui:"Public Sans",system-ui,sans-serif;
  --font-alt:var(--font-ui);

  /* Type scale — 1.25 major third, fluid at the display end */
  --t-hero:clamp(38px,4.4vw,60px);
  --t-h2:clamp(30px,3.2vw,44px);
  --t-h3:clamp(22px,1.7vw,26px);
  --t-title:21px;
  --t-lead:19px;
  --t-body:17px;
  --t-small:15px;
  --t-micro:13px;

  /* Spacing scale */
  --s1:4px;  --s2:8px;   --s3:12px;  --s4:16px; --s5:24px;
  --s6:32px; --s7:48px;  --s8:64px;  --s9:80px;
  --s10:112px; --s11:140px;

  /* CAS crest: maroon ribbon #6C0C0C, gold lettering #F0A818, slate shield #78848F.
     Gold is split in two — bright for dark grounds, deep for light grounds, so the
     accent stays legible without ever being used twice in the same weight. */
  --primary:#6C0C0C;  --primary-deep:#4A0A0A; --primary-soft:#8A2222;
  --gold:#E8A93A;     --gold-deep:#8A5D0E;
  --secondary:var(--gold);
  --accent:#78848F;

  /* Warm neutrals — paper, not concrete */
  --text:#241A17;     --text-muted:#5C4F49;
  --heading-dark:#2A1210; --title-black:#241A17;
  --white:#FFFFFF;    --surface:#FFFFFF;
  --page-bg:#FBF8F4;
  --strip-bg:#F1E9DF; --news-bg:#F7F0E7;
  --footer-bg:#1C110F; --life-bg:#3E0C0C;
  --divider:#E3D8CB;  --divider-rule:#241A17; --card-border:#E8DFD3;
  --whyus-grad-start:#F0E8DC; --whyus-grad-end:#FEFCFA; --whyus-underline:#E0D4C4;
  --footer-rule:rgba(255,255,255,.14);
  --footer-link:#D6CEC7; --footer-addr:#C6BCB4;
  --footer-brand-text:#C6BCB4; --footer-social:var(--gold);
  --gal-loadmore:#3A2A26; --gal-wa:#0F7A46;

  --shadow-sm:0 1px 2px rgba(36,26,23,.05), 0 4px 12px rgba(36,26,23,.05);
  --shadow-md:0 2px 4px rgba(36,26,23,.05), 0 12px 28px rgba(36,26,23,.09);
  --shadow-lg:0 8px 24px rgba(36,26,23,.10), 0 28px 60px rgba(36,26,23,.14);

}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--page-bg); color:var(--text-muted);
  font:400 var(--t-body)/1.65 var(--font-ui);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ margin:0; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; }

:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; border-radius:2px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:2000;
  background:var(--primary); color:#fff; padding:12px 20px; border-radius:0 0 10px 0;
}
.skip-link:focus{ left:0; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.svg-sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.ic{
  width:20px; height:20px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
.ic-xs{ width:14px; height:14px; }
.ic-sm{ width:16px; height:16px; }
.ic-xl{ width:44px; height:44px; stroke-width:1.4; }

/* ---------- 4. Layout containers ---------- */
.wrap{ max-width:1320px; margin:0 auto; padding:0 15px; }
main{ padding:110px 0 0; }

/* ---------- 6. Buttons ---------- */
.btn{ display:inline-block; text-decoration:none; border:0; cursor:pointer; }

/* One radius, one weight, one motion curve across every button. The old set had
   four radii (10 / 23 / 50) and a glossy sweep — inconsistency reads as unowned. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  text-decoration:none; border:0; cursor:pointer; border-radius:8px;
  font:500 var(--t-small)/1 var(--font-ui); letter-spacing:.01em;
  padding:16px 26px; min-height:52px;
  transition:background .22s cubic-bezier(.22,.61,.36,1),
             color .22s cubic-bezier(.22,.61,.36,1),
             border-color .22s cubic-bezier(.22,.61,.36,1),
             transform .22s cubic-bezier(.22,.61,.36,1),
             box-shadow .22s cubic-bezier(.22,.61,.36,1);
}
.btn:active{ transform:translateY(1px); }

.btn-primary{ background:var(--primary); color:#FFF; box-shadow:var(--shadow-sm); }
.btn-primary:hover,.btn-primary:focus-visible{ background:var(--primary-deep); box-shadow:var(--shadow-md); }

.btn-inverse{ background:#FFF; color:var(--primary); box-shadow:var(--shadow-md); }
.btn-inverse:hover,.btn-inverse:focus-visible{ background:var(--gold); color:var(--primary-deep); }

.btn-ghost{ background:transparent; color:#FFF; border:1px solid rgba(255,255,255,.45); }
.btn-ghost:hover,.btn-ghost:focus-visible{ background:#FFF; color:var(--primary); border-color:#FFF; }

.btn-tertiary{ background:transparent; color:var(--primary); border:1px solid var(--primary); }
.btn-tertiary:hover,.btn-tertiary:focus-visible{ background:var(--primary); color:#FFF; }

/* The glossy sweep is retired; .btn-glossy stays as a no-op so the markup that
   still carries the class does not need touching. */
.btn-glossy{ position:relative; overflow:hidden; }

/* ---------- Shared headings ----------
   One display face, one scale, optical tracking tightened as size grows.
   The rules under headings are now hairlines in gold rather than heavy black
   bars — the heading should carry the weight, not the decoration. */
.sec-h{
  font-family:var(--font-display); font-weight:500;
  font-size:var(--t-h2); line-height:1.12; letter-spacing:-.018em;
  color:var(--heading-dark); text-align:center;
  margin-bottom:var(--s4); text-wrap:balance;
}
.sec-h-plain{ color:var(--heading-dark); }
.sec-h-light{ color:#FFFFFF; }

.rule{ display:block; width:64px; margin:0 auto; }
.rule-thin,.rule-thick{ height:2px; border-top:2px solid var(--gold-deep); }
.sec-h-light + .rule,.rule-tight{ border-top-color:var(--gold); }
.rule-hair{ display:none; } /* second hairline under the Programs rule: noise */
.rule-tight{ margin-top:var(--s2); }
.rule-left{ margin:0; }

/* Eyebrows: small caps in deep gold, the one place tracking goes wide. */
.eyebrow-alt{
  text-align:center;
  font:600 var(--t-micro)/1 var(--font-ui);
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold-deep);
  margin-bottom:var(--s4);
}

/* Shorter travel and a softer curve — the old 30px lift read as a page-builder
   effect. Reveals should be felt, not watched. */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1); }
.reveal.is-in{ opacity:1; transform:none; }

/* ===================================================================
   5.1 HEADER
   =================================================================== */
.site-header{
  position:absolute; top:50px; left:0; right:0; z-index:999;
  max-width:1620px; margin:0 auto; padding:0 15px;
}
.header-wrap{ max-width:1400px; margin:0 auto; }

.bar-utility{
  height:80px; background:var(--primary); border-radius:15px 15px 0 0;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 30px;
}
.util-menu > ul{ display:flex; align-items:center; }
.util-menu li{ position:relative; }
.util-link{
  display:flex; align-items:center; gap:6px;
  font:600 15px var(--font-ui); color:#FFF; text-decoration:none;
  padding:13px 20px; background:none; border:0; cursor:pointer;
}
.util-link:hover{ color:var(--secondary); }
.drop-panel{
  position:absolute; top:100%; left:10px; min-width:250px;
  background:var(--primary); border-radius:0 0 15px 15px;
  padding:6px 0; display:none; box-shadow:0 12px 30px rgba(0,0,0,.25);
}
.has-drop.is-open .drop-panel{ display:block; }
.drop-panel a{
  display:block; font:500 15px var(--font-ui); color:#FFF;
  text-decoration:none; padding:10px 25px;
}
.drop-panel a:hover{ color:var(--secondary); }

.util-contacts{ display:flex; align-items:center; gap:26px; }
.util-contacts a{
  display:flex; align-items:center; gap:8px;
  font:400 13px var(--font-ui); color:#FFF; text-decoration:none;
}
.util-contacts a:hover{ color:var(--secondary); }

.bar-nav{
  height:91px; background:#FFF; border-radius:0 0 15px 15px;
  padding:0 15px 0 30px;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.brand{ align-self:center; display:block; }
/* CAS has no horizontal wordmark, only the square crest, so the header mark is
   sized by height inside the 91px bar rather than to the brief's 162x42. */
.bar-nav .brand img{ width:auto; height:74px; }

.main-menu > ul{ display:flex; align-items:center; }
.mega-item{ position:static; }
.mega-toggle,
.sticky-menu a{
  position:relative; display:block; background:none; border:0; cursor:pointer;
  font:500 var(--t-small)/90px var(--font-ui); color:var(--primary);
  padding:0 16px; text-decoration:none; white-space:nowrap;
  transition:color .22s;
}
.mega-toggle::after,
.sticky-menu a::after{
  content:""; position:absolute; left:16px; right:16px; bottom:26px; height:2px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
}
.mega-toggle:hover,.mega-item.is-active > .mega-toggle,
.mega-item.is-open > .mega-toggle,
.sticky-menu a:hover{ color:var(--primary-deep); }
.mega-toggle:hover::after,.mega-item.is-active > .mega-toggle::after,
.mega-item.is-open > .mega-toggle::after,
.sticky-menu a:hover::after{ transform:scaleX(1); }

.mega-panel{
  position:absolute; left:0; right:0; top:100%;
  max-width:1600px; margin:0 auto;
  background:var(--primary); border-radius:0 0 17px 17px;
  padding:35px 40px 40px; display:none;
  box-shadow:0 25px 50px rgba(0,0,0,.3);
}
.mega-item.is-open .mega-panel{ display:block; }
.mega-inner{ display:grid; gap:30px; }
.mega-cols-3{ grid-template-columns:repeat(3,1fr); }
.mega-cols-5{ grid-template-columns:repeat(5,1fr); }
/* Nav group labels, not document headings — they sit before the h1 in the DOM. */
.mega-inner .mega-h{
  font:600 16px var(--font-ui); color:var(--secondary);
  margin-bottom:14px; text-transform:uppercase; letter-spacing:.6px;
}
.mega-inner .mega-h span{
  display:block; font:400 12px var(--font-ui);
  color:var(--footer-link); text-transform:none; letter-spacing:0; margin-top:3px;
}
.mega-inner a{
  display:block; font:400 15px/1.5 var(--font-ui); color:#FFF;
  text-decoration:none; padding:6px 0;
}
.mega-inner a:hover{ color:var(--secondary); }

/* Sticky header */
.sticky-header{
  position:fixed; top:0; left:0; right:0; z-index:999;
  height:87px; background:#FFF; box-shadow:0 4px 18px rgba(0,0,0,.08);
  transform:translateY(-120%); visibility:hidden;
  transition:.6s cubic-bezier(.24,.74,.58,1);
}
.sticky-header.is-fixed{ transform:translateY(0); visibility:visible; }
.sticky-inner{
  max-width:1620px; margin:0 auto; padding:0 15px; height:87px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.sticky-inner .brand img{ width:auto; height:56px; }
.sticky-menu a{ line-height:87px; }
.sticky-menu a::after{ bottom:24px; }
.sticky-header .btn-primary{ line-height:48px; padding:0 28px; }

/* Mobile header + drawer (hidden until 1024) */
.mobile-header{ display:none; }
.drawer{ display:none; }
.drawer-backdrop{ display:none; }

/* ===================================================================
   5.2 HERO
   =================================================================== */
/* -------------------------------------------------------------------
   HERO — geometry from hero-denning-clone/SPEC.md §2, §3, §5, §6.
   Kept: 1320 container, 320/115 padding, 736px H1 measure, cut-out on
   the floor, horizontal parallax, staggered entrance.
   Changed: the panel is CAS maroon with a gold peel over a real campus
   photograph, and the headline is Fraunces — the H1 in this site's
   display face, not the reference's Public Sans 45/70.
   ------------------------------------------------------------------- */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--primary-deep);
  min-height:912px;
  display:flex; align-items:stretch;
}

/* the photograph the peel reveals — CAS's own, pinned right */
.hero-photo{
  position:absolute; inset:0; z-index:0;
  background:url("../assets/img/2023/09/25.webp") right center / cover no-repeat;
}
/* The revealed photo is itself a crowd of students; without this it competes
   with the cut-out standing in front of it. Desaturated and pushed back so the
   two foreground figures read as the subject. */
.hero-photo{ filter:saturate(.55) contrast(.95); }
.hero-photo::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(80% 90% at 88% 78%, rgba(28,8,8,.72) 0%, rgba(28,8,8,.30) 45%, transparent 75%),
    linear-gradient(180deg, rgba(28,8,8,.62) 0%, rgba(28,8,8,.20) 30%, rgba(28,8,8,.66) 100%);
}
.hero-art{
  position:absolute; inset:0; width:100%; height:100%; z-index:1;
  display:block; pointer-events:none;
}

.hero-wrap{
  position:relative; z-index:3; width:100%;
  max-width:1320px; margin:0 auto;
  padding:320px 15px 115px;
  display:block;
}
.hero-copy{ position:relative; max-width:736px; }

.hero .eyebrow{
  display:inline-flex; align-items:center; gap:var(--s2);
  font:600 var(--t-micro)/1 var(--font-ui); letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold);
  padding:var(--s2) var(--s3); border:1px solid rgba(232,169,58,.4); border-radius:999px;
  background:rgba(232,169,58,.08);
}
.hero h1{
  max-width:736px; margin:21px 0 24px;
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(34px,3.6vw,50px); line-height:1.24; letter-spacing:-.018em;
  color:#FFF; text-wrap:balance;
}
.hero-lead{
  max-width:602px; margin-bottom:6px;
  font:400 var(--t-body)/1.7 var(--font-ui); color:rgba(255,255,255,.86);
  text-wrap:pretty;
}
.hero-promise{
  display:flex; align-items:flex-start; gap:var(--s3);
  margin-top:var(--s5); padding-top:var(--s5);
  border-top:1px solid rgba(255,255,255,.18);
  max-width:602px;
  font:500 var(--t-small)/1.55 var(--font-ui); color:rgba(255,255,255,.92);
}
.hero-promise .tick{ width:26px; height:26px; margin:0; background:var(--gold); color:var(--primary-deep); }
.hero-cta{ margin-top:36px; display:flex; align-items:center; gap:var(--s5); flex-wrap:wrap; }
.hero-cta .hero-alt{
  font:500 var(--t-small) var(--font-ui); color:#FFF; text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:2px;
  transition:border-color .25s,color .25s;
}
.hero-cta .hero-alt:hover{ color:var(--gold); border-bottom-color:var(--gold); }

/* SPEC §4 — the sheen only reads once the background flips to gold */
.btn-sheen{ position:relative; overflow:hidden; }
.btn-sheen::before{
  content:""; position:absolute; top:0; bottom:0; left:-200%; width:200%;
  background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,.35),rgba(255,255,255,0));
  transform:skewX(-20deg);
  transition:left .7s cubic-bezier(.645,.045,.355,1);
}
.btn-sheen:hover::before{ left:200%; }

/* SPEC §5 — stands on the section floor, right of centre. Two figures
   rather than one, so it runs wider than the reference's 423px. */
.hero-cutout{
  position:absolute; z-index:2;
  bottom:0; right:64px;
  width:min(500px,36vw); height:auto;
  filter:drop-shadow(0 24px 48px rgba(20,4,4,.5));
  will-change:transform;
}

/* SPEC §6 — entrance stagger */
.hero-r{ opacity:0; transform:translateY(28px); }
.hero-cutout.hero-r{ transform:translateY(40px); }
.is-ready .hero-r{
  opacity:1; transform:none;
  transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
}
.is-ready .hero-r1{ transition-delay:.20s; }
.is-ready .hero-r2{ transition-delay:.34s; }
.is-ready .hero-r3{ transition-delay:.48s; }
.is-ready .hero-r4{ transition-delay:.60s; }
.is-ready .hero-r5{ transition-delay:.72s; }
.is-ready .hero-r6{ transition-delay:.90s; }

/* ===================================================================
   5.3 ACCREDITATION STRIP
   =================================================================== */
.strip{
  height:175px; background:var(--strip-bg);
  display:flex; align-items:center; position:relative; overflow:hidden;
}
.strip-crest{ flex:none; padding-left:142px; z-index:2; }
.strip-crest img{ width:145px; height:145px; object-fit:contain; }
.strip-ribbon{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  overflow:hidden; background:var(--primary);
}
.ribbon-track{
  position:absolute; top:50%; left:0; transform:translateY(-50%);
  display:flex; width:200%; height:99px;
  animation:ribbon 26s linear infinite;
}
.ribbon-track span{
  flex:1 0 25%; height:99px;
  background:linear-gradient(90deg,var(--primary) 0%,var(--primary-deep) 45%,var(--primary) 100%);
  border-top:3px solid var(--secondary); border-bottom:3px solid var(--secondary);
}
@keyframes ribbon{ to{ transform:translate(-50%,-50%); } }
.strip:hover .ribbon-track{ animation-play-state:paused; }
.strip-title{
  position:relative; z-index:2; text-align:center;
  font:500 30px/34.38px var(--font-ui); color:#FFF;
  max-width:900px; padding:0 15px;
}

/* ===================================================================
   5.4 CAMPUS FACILITIES
   =================================================================== */
/* -------------------------------------------------------------------
   OUR CAMPUS — photographic mosaic.
   Replaces a grid of line icons. Icons describe a facility; a photograph
   proves it exists, which is the whole job of this section.
   First tile is the feature and spans 2x2; the rest fill the right half.
   ------------------------------------------------------------------- */
.facilities{ padding:var(--s10) 0; }

.mo-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s7);
  margin-bottom:var(--s8);
}
.mo-head .sec-h{ text-align:left; margin-bottom:var(--s4); }
.mo-sub{
  max-width:52ch; font:400 var(--t-lead)/1.6 var(--font-ui); color:var(--text-muted);
  text-wrap:pretty;
}
.mo-cta{ flex:none; padding-bottom:var(--s2); }
.mo-cta a{
  display:inline-flex; align-items:center; gap:var(--s2);
  font:500 var(--t-small) var(--font-ui); color:var(--primary); text-decoration:none;
  border-bottom:2px solid var(--gold); padding-bottom:6px;
  transition:gap .25s cubic-bezier(.22,.61,.36,1), color .25s;
}
.mo-cta a:hover{ gap:var(--s3); color:var(--primary-deep); }

/* Feature tile left, then two independent rows on the right — 3 tiles over 4.
   A single uniform grid cannot produce that split, so the right half is its
   own nested grid. */
.mo-grid{
  display:grid; grid-template-columns:5fr 7fr; gap:var(--s4);
  min-height:600px;
}
.mo-rest{ display:grid; grid-template-rows:1fr 1fr; gap:var(--s4); min-width:0; }
.mo-row{ display:grid; gap:var(--s4); min-width:0; }
.mo-row-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.mo-row-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }

.mo-tile{
  position:relative; margin:0; overflow:hidden; border-radius:10px;
  background:var(--strip-bg); min-width:0;
}
.mo-tile img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
/* The scrim has to guarantee legibility over any photograph, not just these
   eight — a bright cafeteria shot would otherwise swallow the label. */
.mo-tile::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 38%,rgba(28,8,8,.55) 66%,rgba(28,8,8,.9) 100%);
}
.mo-tile:hover img{ transform:scale(1.05); }

.mo-tile figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; align-items:stretch; gap:var(--s2);
  padding:var(--s3);
}
.mo-n{
  flex:none; display:flex; align-items:center; justify-content:center;
  min-width:28px; padding:0 var(--s2);
  background:var(--primary); color:#FFF; border-radius:4px;
  font:500 var(--t-micro)/1 var(--font-ui);
}
.mo-label{
  display:flex; align-items:center;
  font:500 var(--t-micro)/1.2 var(--font-display); letter-spacing:-.006em; color:#FFF;
  border-bottom:2px solid var(--gold); padding:0 0 var(--s2);
  text-shadow:0 1px 6px rgba(20,4,4,.6);
}
.mo-feature figcaption{ padding:var(--s5); gap:var(--s3); }
.mo-feature .mo-n{ min-width:40px; font-size:var(--t-body); }
.mo-feature .mo-label{ font-size:var(--t-h3); }

/* Marks the three tiles that are not photographs of the real rooms. */
.mo-illus{
  position:absolute; top:var(--s3); right:var(--s3); z-index:2;
  padding:4px 9px; border-radius:999px;
  background:rgba(28,8,8,.62); border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  font:600 10px/1 var(--font-ui); letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.9);
}
.mo-note{
  margin-top:var(--s5); max-width:70ch;
  font:400 var(--t-small)/1.6 var(--font-ui); color:var(--text-muted);
}

@media (max-width:1024px){
  .mo-head{ flex-direction:column; align-items:flex-start; gap:var(--s5); }
  .mo-grid{ grid-template-columns:minmax(0,1fr); min-height:0; }
  .mo-feature{ min-height:300px; }
  .mo-rest{ grid-template-rows:auto auto; }
  .mo-row{ grid-auto-rows:170px; }
  .mo-row-3,.mo-row-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:767px){
  .mo-feature{ min-height:230px; }
  .mo-row{ grid-auto-rows:180px; }
  .mo-row-3,.mo-row-4{ grid-template-columns:minmax(0,1fr); }
  .mo-feature .mo-label{ font-size:var(--t-title); }
}

/* ===================================================================
   5.5 OUR PROGRAMS
   =================================================================== */
.programs{ padding:0 0 var(--s10); }
.prog-list{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s5);
  margin-top:var(--s9);
}
/* Cards are now a single flat unit: no negative-margin notch, no scale-on-hover
   pop. Hover lifts and warms the border instead — quieter, and it does not
   blur the image the way a 1.05 scale does. */
.prog-card{
  display:flex; flex-direction:column; min-width:0;
  background:var(--surface); border:1px solid var(--card-border); border-radius:12px;
  overflow:hidden;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),
             box-shadow .3s cubic-bezier(.22,.61,.36,1),
             border-color .3s;
}
.prog-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:rgba(108,12,12,.3); }
.prog-media{ overflow:hidden; }
.prog-media img{
  width:100%; aspect-ratio:16/9; height:auto; object-fit:cover;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.prog-card:hover .prog-media img{ transform:scale(1.04); }
.prog-body{
  display:flex; flex-direction:column; flex:1;
  padding:var(--s6) var(--s6) var(--s5);
}
.prog-body h3{
  font:500 var(--t-h3)/1.2 var(--font-display); letter-spacing:-.015em;
  color:var(--heading-dark); margin-bottom:var(--s3);
}
.prog-body p{
  font:400 var(--t-small)/1.6 var(--font-ui); color:var(--text-muted);
  margin-bottom:var(--s5); text-wrap:pretty;
}
.prog-link{
  margin-top:auto; display:inline-flex; align-items:center; gap:var(--s2);
  font:500 var(--t-small) var(--font-ui); color:var(--primary); text-decoration:none;
  transition:gap .25s cubic-bezier(.22,.61,.36,1),color .25s;
}
.prog-link .ic{ transition:transform .25s cubic-bezier(.22,.61,.36,1); }
.prog-card:hover .prog-link{ color:var(--primary-deep); }
.prog-card:hover .prog-link .ic{ transform:translateX(4px); }

/* ===================================================================
   5.6 WHY CAS
   =================================================================== */
.why{ margin-top:25px; }
/* The panel is 1400 wide, so it needs a wider container than the 1320 boxed wrap. */
.why > .wrap{ max-width:1430px; }
.why-panel{
  position:relative; max-width:1400px; margin:0 auto; min-height:578px;
  border-radius:17px;
  background:linear-gradient(90deg,var(--whyus-grad-start) 0%,var(--whyus-grad-end) 100%);
  border-bottom:6px solid var(--whyus-underline);
  /* col1 420 → col2 starts at 446 → col3 starts at 871, per §5.6 */
  display:grid; grid-template-columns:420px 451px 1fr; gap:0;
  padding:0 40px 45px 0;
}
.why-fig{ display:flex; align-items:flex-end; justify-content:flex-end; }
.why-fig img{
  width:407px; height:587px; object-fit:cover; margin-top:-15px; border-radius:0 0 12px 12px;
}
.why-lede{ padding-top:var(--s9); padding-left:26px; }
.why-lede h2{
  font-family:var(--font-display); font-weight:500;
  font-size:var(--t-h2); line-height:1.12; letter-spacing:-.018em;
  color:var(--heading-dark); margin-bottom:var(--s4);
}
.why-lede .rule-thick{ margin-bottom:var(--s6); }
.why-link{ margin-top:var(--s6); }
.why-link a{
  display:inline-flex; align-items:center; gap:var(--s2);
  font:500 var(--t-small) var(--font-ui); color:var(--primary); text-decoration:none;
  border-bottom:1px solid rgba(108,12,12,.3); padding-bottom:3px;
  transition:gap .22s,border-color .22s;
}
.why-link a:hover{ gap:var(--s3); border-bottom-color:var(--primary); }
.why-lede p{ max-width:34ch; font:400 var(--t-lead)/1.65 var(--font-ui); color:var(--text); }
.why-points{ padding-top:var(--s9); display:flex; flex-direction:column; gap:var(--s5); }
.why-points li{ display:flex; gap:var(--s5); align-items:flex-start; }
.tick{
  flex:none; width:30px; height:30px; border-radius:50%;
  background:var(--primary); color:var(--gold); margin-top:4px;
  display:flex; align-items:center; justify-content:center;
}
/* Lead clause of each CAS bullet set in the display face so the four points
   scan as four claims, not four paragraphs. */
.why-points b{
  display:block; font:500 var(--t-title)/1.3 var(--font-display);
  letter-spacing:-.012em; color:var(--heading-dark); margin-bottom:var(--s2);
}
.why-points p{ max-width:46ch; font:400 var(--t-small)/1.65 var(--font-ui); color:var(--text-muted); }

/* ===================================================================
   5.7 AFFILIATIONS
   =================================================================== */
/* Was an infinite scrolling marquee. A ticker signals "we had nothing better to
   do with this space"; these nine accreditations are CAS's strongest asset, so
   they now sit still, named, and readable. */
.affiliations{ padding:var(--s10) 0; background:var(--surface); border-block:1px solid var(--divider); }
.affiliations .sec-h{ margin-bottom:var(--s9); }
.marquee{ overflow:visible; width:100%; max-width:1320px; margin:0 auto; padding:0 15px; }
.marquee-track{ display:block; }
.logo-row{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--divider); border-left:1px solid var(--divider);
}
.logo-row[aria-hidden="true"]{ display:none; } /* any leftover marquee duplicate */
.logo-row li{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s4);
  padding:var(--s6) var(--s5);
  border-right:1px solid var(--divider); border-bottom:1px solid var(--divider);
  text-align:center;
}
.logo-row img{
  width:auto; max-width:min(170px,100%); height:64px; object-fit:contain;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.logo-row li:hover img{ transform:scale(1.04); }
.logo-row .logo-name{
  font:500 var(--t-micro)/1.4 var(--font-ui); color:var(--text-muted);
  letter-spacing:.02em;
}

/* ===================================================================
   5.8 GALLERY
   =================================================================== */
.gallery{ padding:var(--s10) 0; }
.gal-wrap{ max-width:1600px; margin:0 auto; }
.gallery .sec-sub{ margin-bottom:var(--s9); }
.gal-grid{
  display:grid; grid-template-columns:repeat(6,minmax(0,230px)); justify-content:center;
  gap:var(--s3); padding:0;
}
.gal-grid a{
  position:relative; display:block; aspect-ratio:1/1; overflow:hidden; border-radius:8px;
  background:var(--strip-bg);
}
.gal-grid img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.gal-grid a:hover img,.gal-grid a:focus-visible img{ transform:scale(1.06); }
.gal-scrim{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,rgba(28,8,8,0) 40%,rgba(28,8,8,.7) 100%);
  color:#FFF; opacity:0; transition:opacity .3s;
}
.gal-grid a:hover .gal-scrim,.gal-grid a:focus-visible .gal-scrim{ opacity:1; }
.gal-btns{ display:flex; justify-content:center; margin-top:var(--s7); }

/* ===================================================================
   5.9 SOCIETIES CAROUSEL
   =================================================================== */
.societies{
  position:relative; overflow:hidden;
  background:url("../assets/img/2023/10/cas-pic.webp") center/cover no-repeat;
}
.soc-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(28,8,8,.94) 0%,rgba(62,12,12,.96) 100%);
}
.soc-inner{ position:relative; max-width:1350px; margin:0 auto; padding:var(--s10) 15px var(--s9); }
.societies .sec-h{ margin-bottom:var(--s4); }
.soc-sub{
  text-align:center; max-width:62ch; margin:0 auto var(--s9);
  font:400 var(--t-lead)/1.65 var(--font-ui); color:rgba(255,255,255,.72);
}
/* Native scroll-snap rail instead of Swiper. Touch, trackpad, momentum and
   keyboard all come free from the platform, and it removes the page's only
   third-party dependency (~180KB of JS + CSS). */
.soc-rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:calc(25% - 18px);
  gap:var(--s5);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-padding-left:0;
  padding-bottom:var(--s2);
  scrollbar-width:none;
}
.soc-rail::-webkit-scrollbar{ display:none; }
.soc-item{ scroll-snap-align:start; min-width:0; }
.soc-card{ margin:0 auto; text-align:left; }
.soc-card img{
  width:100%; aspect-ratio:16/9; height:auto; object-fit:cover; border-radius:10px;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.soc-card:hover img{ transform:scale(1.04); }
.soc-media{ overflow:hidden; border-radius:10px; }
.soc-card h3{
  font:500 var(--t-title)/1.3 var(--font-display); letter-spacing:-.012em;
  color:#FFF; margin:var(--s5) 0 var(--s4);
}
.soc-cta a{
  display:inline-flex; align-items:center; gap:var(--s2);
  font:500 var(--t-small) var(--font-ui); color:var(--gold); text-decoration:none;
  border:0; padding:0; border-radius:0; min-height:0;
  transition:color .22s,gap .22s;
}
.soc-cta a:hover{ color:#FFF; gap:var(--s3); background:transparent; }

.soc-controls{
  display:flex; align-items:center; justify-content:center; gap:var(--s5);
  margin-top:var(--s7);
}
.soc-progress{
  width:180px; height:2px; background:rgba(255,255,255,.2); border-radius:2px; overflow:hidden;
}
.soc-progress span{
  display:block; height:100%; width:25%; background:var(--gold); border-radius:2px;
  transition:width .2s ease, transform .2s ease;
}
.soc-nav{
  width:44px; height:44px; flex:none; border-radius:50%; cursor:pointer;
  background:transparent; border:1px solid rgba(255,255,255,.32); color:#FFF;
  display:flex; align-items:center; justify-content:center;
  transition:background .22s,border-color .22s,color .22s;
}
.soc-nav:hover{ background:#FFF; color:var(--primary); border-color:#FFF; }
.soc-nav[disabled]{ opacity:.3; cursor:default; }
.soc-prev svg{ transform:rotate(180deg); }

/* ===================================================================
   LIFE AT CAS
   Replaces the orbiting satellites over a rotating 3D photo wall. Those read as
   a 2021 page-builder demo and buried the photos behind brightness(.6). This is
   a plain asymmetric grid: the photographs are the content, captions say what
   is happening, and nothing moves on its own.
   =================================================================== */
.life{ background:var(--life-bg); padding:var(--s10) 0 var(--s11); }
.life .eyebrow-alt{ color:var(--gold); }
.life-sub{
  text-align:center; max-width:62ch; margin:var(--s5) auto 0;
  font:400 var(--t-lead)/1.65 var(--font-ui); color:rgba(255,255,255,.72);
  text-wrap:pretty;
}
.life-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s5);
  margin-top:var(--s9);
}
/* Two features break the rhythm so the grid does not read as a contact sheet. */
.life-card:nth-child(1){ grid-column:span 2; grid-row:span 2; }
.life-card:nth-child(6){ grid-column:span 2; }

.life-card{
  position:relative; margin:0; overflow:hidden; border-radius:12px;
  background:rgba(255,255,255,.05); min-height:230px;
  display:flex;
}
.life-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.22,.61,.36,1),filter .4s ease;
  filter:saturate(.92);
}
.life-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(28,8,8,0) 30%,rgba(28,8,8,.55) 62%,rgba(28,8,8,.92) 100%);
  transition:opacity .4s ease;
}
.life-card figcaption{
  position:relative; z-index:2; align-self:flex-end;
  padding:var(--s6) var(--s5) var(--s5);
}
.life-card h3{
  font:500 var(--t-title)/1.25 var(--font-display); letter-spacing:-.012em; color:#FFF;
  margin-bottom:var(--s2);
}
.life-card:nth-child(1) h3{ font-size:var(--t-h3); }
.life-card p{
  font:400 var(--t-small)/1.5 var(--font-ui); color:rgba(255,255,255,.75);
  max-width:44ch;
}
.life-card:hover img{ transform:scale(1.05); filter:saturate(1.05); }

/* ===================================================================
   5.11 NEWS
   =================================================================== */
.news{ background:var(--news-bg); }
.news .wrap{ max-width:min(100%,1350px); padding:var(--s10) 15px; }
.news-h{
  font-family:var(--font-display); font-weight:500;
  font-size:var(--t-h2); line-height:1.12; letter-spacing:-.018em;
  color:var(--heading-dark); text-align:center; margin-bottom:var(--s9);
}
.news-list{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s5); }
.news-card{
  width:auto; min-width:0; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--card-border); border-radius:12px;
  overflow:hidden;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s,border-color .3s;
}
.news-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:rgba(108,12,12,.28); }
.news-media{ overflow:hidden; }
.news-media img{
  width:100%; aspect-ratio:16/9; height:auto; object-fit:cover;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.news-card:hover .news-media img{ transform:scale(1.04); }
.news-body{
  display:flex; flex-direction:column; flex:1;
  border-radius:0; box-shadow:none;
  padding:var(--s6) var(--s6) var(--s5); background:var(--surface);
}
.news-meta{ display:flex; flex-wrap:wrap; gap:var(--s4); padding:0 0 var(--s4); }
.news-meta span{
  display:flex; align-items:center; gap:var(--s2);
  font:500 var(--t-micro) var(--font-ui); color:var(--text-muted);
  letter-spacing:.02em;
}
.news-card h3{
  font:500 var(--t-title)/1.3 var(--font-display); letter-spacing:-.012em;
  color:var(--heading-dark); padding:0; margin-bottom:var(--s3);
}
.news-excerpt{
  font:400 var(--t-small)/1.6 var(--font-ui); color:var(--text-muted);
  margin-bottom:var(--s5);
  display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.news-more{ margin-top:auto; padding-top:0; }
.news-more a{
  display:inline-flex; align-items:center; gap:var(--s2);
  font:500 var(--t-small) var(--font-ui); color:var(--primary); text-decoration:none;
}
.news-more .ic{ transition:transform .25s cubic-bezier(.22,.61,.36,1); }
.news-card:hover .news-more .ic{ transform:translateX(4px); }
.news-viewmore{ margin-top:var(--s7); text-align:center; }

/* ---------- Chairman / Apply / Careers ---------- */
.chairman{ padding:90px 0 40px; }
.chairman-wrap{ display:flex; gap:40px; align-items:center; }
.chairman img{ width:300px; height:246px; object-fit:cover; border-radius:12px; flex:none; }
.chairman blockquote{ margin:0; }
.chairman blockquote p{
  font:500 26px/40px var(--font-display); color:var(--heading-dark); margin-bottom:16px;
}
.chairman footer{ font-size:16px; color:var(--text-muted); }

.apply{ padding:40px 0 70px; }
.apply-wrap{
  background:var(--primary); color:#FFF; border-radius:17px;
  padding:45px 50px; display:flex; align-items:center; justify-content:space-between; gap:40px;
}
.apply h2{ font:500 34px/44px var(--font-display); margin-bottom:12px; }
.apply p{ max-width:820px; font:400 16px/28px var(--font-ui); color:#F0E6E6; }
.apply a{ color:var(--secondary); }
.apply-cta{ flex:none; }
.apply .btn-primary{ background:#FFF; color:var(--primary); }
.apply .btn-primary:hover{ background:var(--gold); color:var(--primary-deep); }

.careers{ padding:0 0 90px; }
.careers h2{ font:500 34px/44px var(--font-display); color:var(--heading-dark); margin-bottom:14px; }
.careers p{ max-width:1000px; font:400 17px/30px var(--font-ui); color:var(--text-muted); }
.careers a{ color:var(--primary); font-weight:600; }

/* ===================================================================
   5.12 FOOTER
   =================================================================== */
.site-footer{ background:var(--footer-bg); color:var(--footer-link); }
/* Footer bands run 1400 wide (band 2-4 columns sit at x=15/373/730/1088). */
.site-footer > .wrap{ max-width:1430px; }
.foot-band-1{
  display:grid; grid-template-columns:1.5fr 1fr 1.25fr 1fr 1fr; gap:30px;
  padding:70px 0 60px;
}
.foot-brand img{ width:196px; height:auto; margin-bottom:22px; }
.foot-addr{ font:400 15px/25px var(--font-ui); color:var(--footer-brand-text); margin-bottom:20px; }
.foot-contact li{ margin-bottom:12px; }
.foot-contact a{ font:400 15px var(--font-ui); color:var(--footer-brand-text); text-decoration:none; }
.foot-contact a:hover{ color:var(--secondary); }
.foot-social{ display:flex; gap:18px; margin-top:22px; }
.foot-social a{ font:500 var(--t-small) var(--font-ui); letter-spacing:.02em; color:var(--footer-social); text-decoration:none; }
.foot-social a:hover{ color:var(--secondary); }

.foot-col h3{ font:600 20px/20px var(--font-ui); color:#FFF; margin-bottom:24px; }
.foot-col h4{ font:600 17px/17px var(--font-ui); color:#FFF; margin:22px 0 16px; }
.foot-col li{ margin-bottom:14px; }
.foot-col a{ font:400 15px/22px var(--font-ui); color:var(--footer-link); text-decoration:none; }
.foot-col a:hover{ color:var(--secondary); }

.foot-band-2{
  border-top:1px solid var(--footer-rule); padding:20px 0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:30px;
}
.foot-band-2 > div{ max-width:293px; }
.dir-label{ display:block; font:600 var(--t-micro)/1.4 var(--font-ui); letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:var(--s2); }
.dir-addr{ display:block; font:400 var(--t-small)/1.6 var(--font-alt); color:var(--footer-addr); }

.foot-band-5{
  border-top:1px solid var(--footer-rule); padding:12px 0; min-height:50px;
  text-align:center; font:400 15px/25px var(--font-ui); color:var(--footer-addr);
}
.foot-band-5 a{ color:#FFF; text-decoration:none; }

/* ===================================================================
   5.13 FLOATING WIDGETS
   =================================================================== */
.to-top{
  position:fixed; right:40px; bottom:20px; z-index:900;
  width:46px; height:46px; padding:0; background:transparent; border:0; cursor:pointer;
  opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s;
  color:var(--primary);
}
.to-top.is-vis{ opacity:1; visibility:visible; }
.to-top svg{ width:46px; height:46px; transform:rotate(-90deg); }
.to-top circle{ fill:none; stroke-width:2.5; }
.ring-bg{ stroke:rgba(108,12,12,.18); }
.ring-fg{
  stroke:var(--primary); stroke-linecap:round;
  stroke-dasharray:125.66; stroke-dashoffset:125.66;
  transition:stroke-dashoffset .1s linear;
}
.ring-arrow{
  fill:none; stroke:var(--primary); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  transform:rotate(90deg); transform-origin:23px 23px;
}
.chat-fab{
  position:fixed; left:32px; bottom:24px; z-index:900;
  display:inline-flex; align-items:center; gap:var(--s3);
  height:52px; padding:0 var(--s5); border:0; border-radius:26px;
  background:var(--primary); color:#FFF; text-decoration:none;
  font:500 var(--t-small)/1 var(--font-ui);
  box-shadow:var(--shadow-lg);
  transition:background .25s cubic-bezier(.22,.61,.36,1),transform .25s cubic-bezier(.22,.61,.36,1);
}
.chat-fab:hover{ background:var(--primary-deep); transform:translateY(-2px); }
.chat-fab .ic{ width:22px; height:22px; }

/* ===================================================================
   9. RESPONSIVE — 1500 / 1200 / 1024 / 767 / 480
   =================================================================== */
@media (max-width:1500px){
  .site-header{ max-width:100%; }
  .header-wrap{ max-width:100%; }
  .gal-grid{ grid-template-columns:repeat(6,1fr); }
}

@media (max-width:1200px){
  .mega-toggle{ padding:0 10px; font-size:15px; }
  .util-link{ padding:13px 12px; }
  .util-contacts{ gap:16px; }
  .why-panel{ grid-template-columns:1fr 1fr; padding:0 25px 40px; }
  .why-fig{ grid-row:span 2; justify-content:center; }
  .why-fig img{ width:100%; max-width:407px; }
  .why-lede{ padding-top:50px; padding-left:0; }
  .why-points{ padding-top:10px; grid-column:2; }
  .facility-list{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .logo-row{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .news-list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .life-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .life-card:nth-child(1),.life-card:nth-child(6){ grid-column:span 2; grid-row:auto; }
  .foot-band-1{ grid-template-columns:1.4fr 1fr 1.2fr; row-gap:45px; }
  .foot-band-2{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:1024px){
  /* Desktop header dies here, not at 767 */
  .site-header,.sticky-header{ display:none; }

  .mobile-header{
    display:flex; align-items:center; justify-content:space-between;
    position:absolute; top:0; left:0; right:0; z-index:999;
    height:80px; padding:0 15px; background:transparent;
  }
  .mobile-header .brand img{ width:92px; height:auto; }
  .hamburger{
    width:36px; height:26px; padding:0; background:none; border:0; cursor:pointer; color:#FFF;
    display:flex; align-items:center; justify-content:center;
  }
  .hamburger .ic{ width:34px; height:26px; stroke-width:2; }

  .drawer-backdrop{
    display:block; position:fixed; inset:0; z-index:1000;
    background:rgba(0,0,0,.5); opacity:0; transition:opacity .3s;
  }
  .drawer-backdrop.is-open{ opacity:1; }
  .drawer-backdrop[hidden]{ display:none; }

  .drawer{
    display:flex; flex-direction:column;
    position:fixed; top:0; left:0; bottom:0; z-index:1001;
    width:100%; max-width:390px; background:#FFF;
    transform:translateX(-100%); transition:transform .35s cubic-bezier(.24,.74,.58,1);
    overflow-y:auto;
  }
  .drawer.is-open{ transform:translateX(0); }
  .drawer-top{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 20px; border-bottom:1px solid var(--divider);
  }
  .drawer-top img{ width:92px; height:auto; }
  .drawer-close{
    width:36px; height:36px; border:0; border-radius:50%; cursor:pointer;
    background:rgba(0,0,0,.03); color:var(--primary);
    display:flex; align-items:center; justify-content:center;
  }
  .drawer-nav{ padding:10px 0; flex:1; }
  .drawer-nav > ul > li{ border-bottom:1px solid #F0EDEA; }
  .drawer-nav a,.acc-toggle{
    display:flex; align-items:center; justify-content:space-between; width:100%;
    padding:15px 20px; font:500 16px var(--font-ui); color:var(--primary);
    text-decoration:none; background:none; border:0; cursor:pointer; text-align:left;
  }
  .acc-panel{ display:none; padding-bottom:8px; background:#FBF8F6; }
  .acc.is-open .acc-panel{ display:block; }
  .acc.is-open .acc-toggle .ic{ transform:rotate(180deg); }
  .acc-panel a{ padding:10px 34px; font-weight:400; font-size:15px; color:var(--text-muted); }
  .drawer-foot{
    padding:20px; border-top:1px solid var(--divider);
    display:flex; flex-direction:column; gap:14px; align-items:flex-start;
  }
  .drawer-foot a{ display:flex; align-items:center; gap:8px; font-size:15px; color:var(--primary); text-decoration:none; }
  .drawer-foot .btn-primary{ color:#FFF; line-height:48px; }
  body.no-scroll{ overflow:hidden; }

  main{ padding-top:0; }
  /* SPEC §7 — panel narrows, cut-out shrinks, copy keeps the floor */
  .hero{ min-height:720px; }
  .hero-wrap{ padding:190px 15px 90px; }
  .hero-copy{ max-width:62%; }
  .hero-cutout{ right:24px; width:min(300px,32vw); }

  .strip{ height:auto; padding:26px 0; flex-direction:column; gap:18px; }
  .strip-crest{ padding-left:0; }
  /* Stack the crest above the ribbon instead of overlaying it. */
  .strip-ribbon{ position:relative; inset:auto; width:100%; padding:22px 0; }
  .ribbon-track{ height:100%; }
  .ribbon-track span{ height:100%; }
  .strip-title{ font-size:24px; line-height:32px; }

  .facility-list{ grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:var(--s7); }
  .prog-list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .news-list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .logo-row{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .soc-rail{ grid-auto-columns:calc(50% - 12px); }

  .prog-body h3{ font-size:19px; }

  .why-panel{ grid-template-columns:1fr; padding:0 20px 40px; }
  .why-fig{ grid-row:auto; justify-content:flex-start; }
  .why-fig img{ margin-top:0; max-width:100%; height:auto; }
  .why-lede,.why-points{ padding-top:30px; padding-left:0; grid-column:auto; }
  .why-lede p,.why-points p{ max-width:none; }

  .gal-wrap,.soc-inner{ padding-left:15px; padding-right:15px; }
  .gal-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .life-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .life-card:nth-child(1),.life-card:nth-child(6){ grid-column:span 2; grid-row:auto; }
  .news-h{ font-size:38px; line-height:44px; }

  .chairman-wrap{ flex-direction:column; align-items:flex-start; }
  .apply-wrap{ flex-direction:column; align-items:flex-start; padding:35px 30px; }
  .foot-band-1{ grid-template-columns:1fr 1fr; }
}

@media (max-width:767px){
  /* SPEC §7 — cut-out hidden below 768; the panel becomes the whole hero */
  .hero{ min-height:0; }
  .hero-wrap{ padding:130px 15px 72px; }
  .hero-copy{ max-width:none; }
  .hero-cutout{ display:none; }
  .hero-art{ display:none; }
  .hero-photo::after{
    background:linear-gradient(180deg,rgba(62,8,8,.94) 0%,rgba(62,8,8,.9) 60%,rgba(62,8,8,.96) 100%);
  }
  .hero-lead,.hero-promise{ max-width:none; }
  .hero-cta{ gap:var(--s4); }

  .sec-h,.why-lede h2{ font-size:32px; line-height:42px; }
  .news-h{ font-size:30px; line-height:38px; }

  .prog-body{ min-height:0; }

  .gal-grid{ grid-template-columns:minmax(0,1fr); }
  .life-grid{ grid-template-columns:minmax(0,1fr); }
  .soc-rail{ grid-auto-columns:88%; }
  .prog-list{ grid-template-columns:minmax(0,1fr); }
  .news-list{ grid-template-columns:minmax(0,1fr); }
  .facility-list{ grid-template-columns:minmax(0,1fr); }
  .facility{ padding:var(--s5) var(--s4); }
  .logo-row{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .life-card:nth-child(1),.life-card:nth-child(6){ grid-column:span 1; }
  .life-card{ min-height:260px; }

  .gal-btns{ flex-direction:column; align-items:center; }

  .news-viewmore{ text-align:center; }


  .soc-card,.soc-card img{ width:100%; }
  .societies{ background-attachment:scroll; }

  .foot-band-1{ grid-template-columns:1fr; }
  .foot-band-2{ grid-template-columns:1fr; }
  .dir-addr{ padding-left:0; }

  .to-top{ right:16px; }
  .chat-fab{ left:16px; padding:0 var(--s4); }
  .chat-fab-label{ display:none; }
}

@media (max-width:480px){
  body{ font-size:16px; }
  .hero h1{ font-size:30px; line-height:40px; }
  .strip-title{ font-size:20px; line-height:28px; }
  .facility-tile{ width:120px; height:120px; }
  .apply-wrap{ padding:28px 20px; }
}

/* ---------- 8. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
  }
  .reveal{ opacity:1; transform:none; }
}

/* ===================================================================
   INNER PAGES
   The homepage is a sales document; inner pages are reading documents.
   They share the type scale and colour roles but drop the full-bleed
   sections in favour of a measured column and a persistent side rail.
   =================================================================== */

/* ---------- page hero ---------- */
.page-hero{
  position:relative;
  background:var(--primary);
  color:#FFF;
  padding:calc(var(--s11) + 96px) 0 var(--s9);
  overflow:hidden;
}
.page-hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 140% at 85% -10%, rgba(232,169,58,.16) 0%, transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.22) 0%, transparent 40%);
}
.page-hero .wrap{ position:relative; }
.page-hero h1{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(34px,4vw,54px); line-height:1.08; letter-spacing:-.02em;
  max-width:20ch; text-wrap:balance;
}
.page-hero .eyebrow-alt{
  text-align:left; color:var(--gold); margin-bottom:var(--s4);
}
.page-standfirst{
  max-width:62ch; margin-top:var(--s5);
  font:400 var(--t-lead)/1.6 var(--font-ui); color:rgba(255,255,255,.82);
  text-wrap:pretty;
}

/* ---------- breadcrumb ---------- */
.crumbs{ margin-bottom:var(--s6); }
.crumbs ol{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); }
.crumbs li{
  font:400 var(--t-micro) var(--font-ui); color:rgba(255,255,255,.6);
  display:flex; align-items:center; gap:var(--s2);
}
.crumbs li + li::before{ content:"/"; color:rgba(255,255,255,.32); }
.crumbs a{ color:rgba(255,255,255,.8); text-decoration:none; }
.crumbs a:hover{ color:var(--gold); }
.crumbs [aria-current]{ color:#FFF; }

/* ---------- article layout ---------- */
.article{ padding:var(--s10) 0; }
.article-grid{
  display:grid; grid-template-columns:minmax(0,72ch) minmax(240px,300px);
  justify-content:space-between; gap:var(--s9);
  align-items:start;
}
.article-body{ min-width:0; }

.prose > .prose-block + .prose-block{ margin-top:var(--s8); }
.prose h2{
  font:500 var(--t-h3)/1.25 var(--font-display); letter-spacing:-.015em;
  color:var(--heading-dark); margin-bottom:var(--s4);
  scroll-margin-top:120px;
}
.prose p{
  max-width:68ch; font:400 var(--t-body)/1.75 var(--font-ui); color:var(--text-muted);
  text-wrap:pretty;
}
.prose p + p{ margin-top:var(--s4); }
.prose a{ color:var(--primary); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.prose a:hover{ color:var(--primary-deep); text-decoration-color:var(--gold); }

.prose-list{ max-width:68ch; margin-top:var(--s4); display:grid; gap:var(--s3); }
.prose-list li{
  position:relative; padding-left:var(--s6);
  font:400 var(--t-body)/1.7 var(--font-ui); color:var(--text-muted);
}
.prose-list li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:8px; height:8px; border-radius:50%; background:var(--gold-deep);
}

/* ---------- side rail ---------- */
.article-side{ position:sticky; top:110px; display:grid; gap:var(--s6); }
.toc{
  border-left:2px solid var(--divider); padding-left:var(--s5);
}
.toc-h{
  font:600 var(--t-micro)/1 var(--font-ui); letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:var(--s4);
}
.toc ol{ display:grid; gap:var(--s3); counter-reset:toc; }
.toc a{
  font:400 var(--t-small)/1.45 var(--font-ui); color:var(--text-muted);
  text-decoration:none; display:block;
  transition:color .2s;
}
.toc a:hover,.toc a.is-current{ color:var(--primary); }
.toc a.is-current{ font-weight:600; }

.facts{
  background:var(--surface); border:1px solid var(--card-border); border-radius:12px;
  padding:var(--s6);
}
.facts h2{
  font:600 var(--t-micro)/1 var(--font-ui); letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:var(--s5);
}
.facts dl{ margin:0; }
.facts dl > div{ padding:var(--s4) 0; border-top:1px solid var(--divider); }
.facts dl > div:first-child{ border-top:0; padding-top:0; }
.facts dt{
  font:600 var(--t-micro)/1.3 var(--font-ui); letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:var(--s1);
}
.facts dd{ margin:0; font:400 var(--t-small)/1.55 var(--font-ui); color:var(--heading-dark); }
.facts dd a{ color:var(--primary); }
.facts-cta{ margin-top:var(--s5); }
.facts-cta .btn{ width:100%; }

.side-portrait{ margin:0; }
.side-portrait img{ width:100%; height:auto; border-radius:12px; }
.side-portrait figcaption{
  margin-top:var(--s4);
  font:500 var(--t-small)/1.4 var(--font-ui); color:var(--heading-dark);
}
.side-portrait figcaption span{
  display:block; font-weight:400; color:var(--text-muted); margin-top:2px;
}

/* ---------- listing cards ---------- */
.list-grid{ display:grid; gap:var(--s5); }
.list-three{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.list-two{ grid-template-columns:repeat(2,minmax(0,1fr)); }

.list-card{
  position:relative; display:flex; flex-direction:column; min-width:0;
  background:var(--surface); border:1px solid var(--card-border); border-radius:12px;
  overflow:hidden;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s,border-color .3s;
}
.list-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:rgba(108,12,12,.28); }
.list-card:focus-within{ border-color:var(--primary); }
/* Whole card is the hit area; the visible link text stays for sighted users. */
.lc-hit{ position:absolute; inset:0; z-index:2; }
.lc-media{ overflow:hidden; }
.lc-media img{
  width:100%; aspect-ratio:16/9; height:auto; object-fit:cover;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.list-card:hover .lc-media img{ transform:scale(1.04); }
.lc-body{ display:flex; flex-direction:column; flex:1; padding:var(--s6) var(--s6) var(--s5); }
.lc-meta{
  font:600 var(--t-micro)/1 var(--font-ui); letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:var(--s3);
}
.list-card h3{
  font:500 var(--t-title)/1.3 var(--font-display); letter-spacing:-.012em;
  color:var(--heading-dark); margin-bottom:var(--s3);
}
.list-card p{
  font:400 var(--t-small)/1.6 var(--font-ui); color:var(--text-muted);
  margin-bottom:var(--s5);
}
.lc-link{
  margin-top:auto; display:inline-flex; align-items:center; gap:var(--s2);
  font:500 var(--t-small) var(--font-ui); color:var(--primary);
}
.lc-link .ic{ transition:transform .25s cubic-bezier(.22,.61,.36,1); }
.list-card:hover .lc-link .ic{ transform:translateX(4px); }

/* ---------- section shells used by listing pages ---------- */
.band{ padding:var(--s10) 0; }
.band-alt{ background:var(--news-bg); }
.band-surface{ background:var(--surface); border-block:1px solid var(--divider); }
.band h2{
  font:500 var(--t-h2)/1.12 var(--font-display); letter-spacing:-.018em;
  color:var(--heading-dark); margin-bottom:var(--s4);
}
.band > .wrap > p{ max-width:66ch; font:400 var(--t-lead)/1.65 var(--font-ui); margin-bottom:var(--s8); }

@media (max-width:1024px){
  .page-hero{ padding:calc(var(--s9) + 80px) 0 var(--s7); }
  .article{ padding:var(--s9) 0; }
  .article-grid{ grid-template-columns:minmax(0,1fr); gap:var(--s7); }
  .article-side{ position:static; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .list-three{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:767px){
  .article-side{ grid-template-columns:minmax(0,1fr); }
  .list-three,.list-two{ grid-template-columns:minmax(0,1fr); }
  .toc{ display:none; }  /* a link list above a short page is noise on mobile */
}

/* ---------- programme index: family cards ---------- */
.fam-list{ display:grid; gap:var(--s6); }
.fam-card{
  display:grid; grid-template-columns:340px minmax(0,1fr); gap:var(--s7);
  align-items:center;
  background:var(--surface); border:1px solid var(--card-border); border-radius:14px;
  overflow:hidden;
}
.fam-media{ align-self:stretch; overflow:hidden; }
.fam-media img{ width:100%; height:100%; min-height:220px; object-fit:cover; }
.fam-body{ padding:var(--s7) var(--s7) var(--s7) 0; }
.fam-body h3{
  font:500 var(--t-h3)/1.2 var(--font-display); letter-spacing:-.015em;
  margin-bottom:var(--s3);
}
.fam-body h3 a{ color:var(--heading-dark); text-decoration:none; }
.fam-body h3 a:hover{ color:var(--primary); }
.fam-body > p{ max-width:64ch; font:400 var(--t-small)/1.65 var(--font-ui); color:var(--text-muted); }
.fam-links{
  display:flex; flex-wrap:wrap; gap:var(--s2) var(--s3); margin-top:var(--s5);
  padding-top:var(--s5); border-top:1px solid var(--divider);
}
.fam-links li a,.pill-list li a{
  display:inline-block; padding:7px 14px; border-radius:999px;
  border:1px solid var(--card-border); background:var(--page-bg);
  font:500 var(--t-micro) var(--font-ui); color:var(--primary); text-decoration:none;
  transition:background .2s,border-color .2s,color .2s;
}
.fam-links li a:hover,.pill-list li a:hover{
  background:var(--primary); border-color:var(--primary); color:#FFF;
}
.pill-list{ display:flex; flex-wrap:wrap; gap:var(--s3); }
.pill-list li a{ font-size:var(--t-small); padding:10px 18px; }

/* ---------- course lead image ---------- */
.course-media{ margin-top:calc(var(--s9) * -1); position:relative; z-index:2; }
.course-media img{
  width:100%; aspect-ratio:16/7; height:auto; object-fit:cover;
  border-radius:14px; box-shadow:var(--shadow-lg);
}
.course-media + .article{ padding-top:var(--s9); }

@media (max-width:1024px){
  .fam-card{ grid-template-columns:minmax(0,1fr); gap:0; }
  .fam-body{ padding:var(--s6); }
  .fam-media img{ min-height:200px; aspect-ratio:16/7; }
  .course-media{ margin-top:calc(var(--s7) * -1); }
}

/* ---------- incubation: what we offer ---------- */
.offer-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s6); }
.offer-item{ padding-top:var(--s5); border-top:2px solid var(--gold-deep); }
.offer-item h3{
  font:500 var(--t-title)/1.3 var(--font-display); letter-spacing:-.012em;
  color:var(--heading-dark); margin-bottom:var(--s3);
}
.offer-item p{ font:400 var(--t-small)/1.65 var(--font-ui); color:var(--text-muted); }

/* ---------- admissions: numbered steps ---------- */
.steps{ display:grid; gap:var(--s6); counter-reset:step; max-width:80ch; }
.step{ display:grid; grid-template-columns:56px minmax(0,1fr); gap:var(--s5); align-items:start; }
.step-n{
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--primary); color:var(--gold);
  font:500 var(--t-title)/1 var(--font-display);
}
.step h3{
  font:500 var(--t-title)/1.3 var(--font-display); letter-spacing:-.012em;
  color:var(--heading-dark); margin-bottom:var(--s2);
}
.step p{ font:400 var(--t-body)/1.7 var(--font-ui); color:var(--text-muted); max-width:64ch; }
.step a{ color:var(--primary); }

/* ---------- enquiry form ---------- */
.enquiry{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s5);
  max-width:840px;
}
.form-note{
  grid-column:1/-1; padding:var(--s4) var(--s5);
  background:var(--news-bg); border-left:3px solid var(--gold-deep); border-radius:0 8px 8px 0;
  font:400 var(--t-small)/1.6 var(--font-ui); color:var(--text-muted);
}
.form-note a{ color:var(--primary); }
.field{ display:grid; gap:var(--s2); }
.field-wide{ grid-column:1/-1; }
.field label{
  font:600 var(--t-micro)/1.3 var(--font-ui); letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-muted);
}
.field label span{ text-transform:none; letter-spacing:0; font-weight:400; }
.field input,.field select,.field textarea{
  width:100%; padding:14px 16px; border-radius:8px;
  border:1px solid var(--card-border); background:var(--surface);
  font:400 var(--t-small)/1.4 var(--font-ui); color:var(--heading-dark);
  transition:border-color .2s, box-shadow .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(108,12,12,.12);
}
.field textarea{ resize:vertical; }

/* ---------- contact grid ---------- */
.contact-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s6); }
.contact-grid > div{ padding-top:var(--s4); border-top:1px solid var(--divider); }
.contact-grid p{ font:400 var(--t-small)/1.7 var(--font-ui); color:var(--text-muted); }
.contact-grid a{ color:var(--primary); text-decoration:none; }
.contact-grid a:hover{ text-decoration:underline; }
.contact-lead > div{ border-top-color:var(--gold-deep); border-top-width:2px; }

/* Hand-drawn locator. Self-contained SVG so it renders with no network and
   stays on-brand; an embedded map would be a grey box offline. */
.locator{ margin-top:var(--s7); }
.locator svg{
  width:100%; height:auto; display:block;
  border:1px solid var(--card-border); border-radius:12px;
}
.lm-bg{ fill:#F6EFE5; }
.lm-road-major{ fill:none; stroke:#E0D2BE; stroke-width:26; stroke-linecap:round; }
.lm-road{ fill:none; stroke:#EADFCE; stroke-width:16; stroke-linecap:round; }
.lm-road-minor{ fill:none; stroke:#EADFCE; stroke-width:9; stroke-linecap:round; }
.lm-road-label{
  font:600 12px var(--font-ui); fill:#8A7A6B;
  letter-spacing:.12em; text-transform:uppercase;
}
.lm-poi rect{ fill:#FFFFFF; stroke:var(--card-border); }
.lm-poi text{ font:500 14px var(--font-ui); fill:var(--text-muted); text-anchor:middle; }
.lm-poi .lm-sub{ font-size:12px; fill:#8A7A6B; }
.lm-far rect{ fill:#FBF8F4; stroke-dasharray:4 4; }
.lm-here rect{ fill:var(--primary); }
.lm-here text{ font:500 16px var(--font-display); fill:#FFFFFF; text-anchor:middle; }
.lm-here .lm-sub{ font:400 12px var(--font-ui); fill:var(--gold); }
.lm-dot{ fill:var(--gold); stroke:var(--primary); stroke-width:3; }
.lm-tie{ stroke:var(--primary); stroke-width:2; }
.lm-compass circle{ fill:#FFFFFF; stroke:var(--card-border); }
.lm-compass path{ fill:var(--primary); }
.lm-compass text{ font:600 10px var(--font-ui); fill:var(--text-muted); text-anchor:middle; }
.locator-note{
  margin-top:var(--s4); font:400 var(--t-small)/1.6 var(--font-ui); color:var(--text-muted);
  max-width:70ch;
}
.locator-note a{ color:var(--primary); }

/* ---------- gallery page ---------- */
.gal-page{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s5); }
.gal-page figure{ margin:0; }
.gal-page img{
  width:100%; aspect-ratio:4/3; height:auto; object-fit:cover; border-radius:10px;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.gal-page figure:hover img{ transform:scale(1.03); }
.gal-page figcaption{
  margin-top:var(--s3); font:400 var(--t-micro)/1.5 var(--font-ui); color:var(--text-muted);
}

/* ---------- downloads ---------- */
.dl-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s5); }
.dl-item{
  display:grid; grid-template-columns:84px minmax(0,1fr); gap:var(--s5); align-items:center;
  padding:var(--s5); background:var(--surface);
  border:1px solid var(--card-border); border-radius:12px;
}
.dl-item img{ width:84px; height:auto; border-radius:6px; box-shadow:var(--shadow-sm); }
.dl-item h3{
  font:500 var(--t-title)/1.3 var(--font-display); color:var(--heading-dark); margin-bottom:var(--s1);
}
.dl-item p{ font:400 var(--t-small)/1.55 var(--font-ui); color:var(--text-muted); }
.dl-note{
  display:block; margin-top:var(--s3);
  font:600 var(--t-micro) var(--font-ui); letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold-deep);
}

/* ---------- prev / next ---------- */
.prev-next{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s5); }
.pn-item{
  display:block; padding:var(--s6); border-radius:12px;
  background:var(--surface); border:1px solid var(--card-border);
  text-decoration:none; color:var(--heading-dark);
  font:500 var(--t-title)/1.35 var(--font-display); letter-spacing:-.012em;
  transition:border-color .25s, transform .25s cubic-bezier(.22,.61,.36,1);
}
.pn-item:hover{ border-color:var(--primary); transform:translateY(-3px); }
.pn-item span{
  display:block; margin-bottom:var(--s2);
  font:600 var(--t-micro) var(--font-ui); letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold-deep);
}

.pill-plain{ gap:var(--s3); }
.pill-plain li{
  padding:10px 18px; border-radius:999px; border:1px solid var(--card-border);
  background:var(--surface); font:500 var(--t-small) var(--font-ui); color:var(--heading-dark);
}

@media (max-width:1024px){
  .offer-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .contact-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .gal-page{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:767px){
  .offer-grid,.contact-grid,.dl-list,.prev-next{ grid-template-columns:minmax(0,1fr); }
  .gal-page{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .enquiry{ grid-template-columns:minmax(0,1fr); }
  .step{ grid-template-columns:44px minmax(0,1fr); gap:var(--s4); }
  .step-n{ width:44px; height:44px; font-size:var(--t-body); }
}