/* ==========================================================================
   BRIO – A Health Café · Golden Hour + Liquid Glass
   Fonts: Arya (headings) + Poppins (everything else). Nothing else is loaded.
   Brand colours: #1AC500, #75C200, #FEB31A. The three never carry text on
   white (2.2:1 – 1.8:1); they are fills with dark ink on top.
   ========================================================================== */

/* ---------- 0. Fonts (self-hosted, SIL OFL; Arya + Poppins only) ---------- */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/poppins-400-latin.woff) format('woff'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/poppins-500-latin.woff) format('woff'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/poppins-600-latin.woff) format('woff'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/poppins-700-latin.woff) format('woff'); }
@font-face { font-family: 'Arya'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/arya-400.woff) format('woff'); }
@font-face { font-family: 'Arya'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/arya-700.woff) format('woff'); }

/* ---------- 1. Tokens ---------- */
:root {
  /* colour */
  --ink: #1A2E0A;
  --ink-soft: #566744;
  --forest: #1A5C00;
  --leaf: #1AC500;
  --lime: #75C200;
  --sun: #FEB31A;
  --cream: #FFF6E3;
  --cream-2: #FFFBF1;
  --parchment: #FFEBC2;
  --white: #FFFFFF;
  --error: #B3261E;

  /* type */
  --font-head: 'Arya', 'Poppins', system-ui, sans-serif;
  --font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-display: clamp(2.875rem, 1.45rem + 5.6vw, 5.5rem);   /* 46 → 88 */
  --fs-h1: clamp(2.5rem, 1.7rem + 3.3vw, 3.5rem);           /* 40 → 56 */
  --fs-h2: clamp(2rem, 1.5rem + 2vw, 2.75rem);              /* 32 → 44 */
  --fs-h3: clamp(1.5rem, 1.3rem + .8vw, 1.75rem);           /* 24 → 28 */
  --fs-lead: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);      /* 17 → 19 */
  --fs-body: 1rem;
  --fs-sm: .875rem;
  --fs-xs: .75rem;

  /* shape + space (8-point grid) */
  --r-sm: 14px;
  --r-md: 24px;
  --r-lg: 32px;
  --r-pill: 999px;
  --s-1: 4px; --s-2: 8px; --s-3: 16px; --s-4: 24px; --s-5: 32px; --s-6: 48px; --s-7: 64px; --s-8: 96px;
  --gutter: clamp(20px, 4vw, 56px);
  --container: 1240px;
  --section-y: clamp(72px, 10vw, 128px);

  /* motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);

  /* liquid glass */
  --glass-fill: linear-gradient(135deg, rgba(255,246,227,.66) 0%, rgba(255,246,227,.36) 100%);
  --glass-fill-dark: linear-gradient(135deg, rgba(26,46,10,.58) 0%, rgba(26,46,10,.4) 100%);
  --glass-blur: 22px;
  --glass-sat: 1.8;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 104px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body.is-locked { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-head); font-weight: 700; line-height: 1.05; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--forest); outline-offset: 3px; border-radius: 6px; }
.on-dark :focus-visible, .hero :focus-visible, .is-dark :focus-visible { outline-color: var(--cream); }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; padding: 12px 20px; border-radius: var(--r-pill); background: var(--ink); color: var(--cream); font-weight: 600; transition: top .2s var(--ease); }
.skip-link:focus { top: 16px; }
.container { width: min(var(--container), 100% - var(--gutter) * 2); margin-inline: auto; }
.section { position: relative; padding-block: var(--section-y); }
.lang-sa { font-family: var(--font-head); }

.icon { width: 1.5rem; height: 1.5rem; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 1.125rem; height: 1.125rem; }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--forest); }
.eyebrow::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 4px rgba(254,179,26,.25); }
.lead { font-size: var(--fs-lead); line-height: 1.7; color: var(--ink); }
.muted { color: var(--ink-soft); }
.section-head { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); max-width: 760px; }
.section-head h2 { font-size: var(--fs-h2); }

/* ---------- 3. Liquid Glass ----------
   Built on pseudo-elements so the element itself has no backdrop-filter. That keeps
   position:fixed children (the mobile menu) anchored to the viewport.
   ::before = refracting fill + blur;  ::after = rim light that follows the pointer. */
.glass { position: relative; isolation: isolate; border-radius: var(--r-md); }
.glass::before {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; border-radius: inherit;
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.95),
    inset 0 -1px 2px rgba(255,255,255,.4),
    inset 0 0 28px rgba(255,255,255,.34),
    0 12px 36px rgba(26,46,10,.18),
    0 2px 6px rgba(26,46,10,.1);
}
.glass::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; border-radius: inherit; padding: 1.25px; pointer-events: none;
  background:
    radial-gradient(220px circle at var(--mx, 18%) var(--my, 0%), rgba(255,255,255,1), rgba(255,255,255,0) 70%),
    linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.12) 38%, rgba(255,255,255,.12) 62%, rgba(255,255,255,.8));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.glass--dark { color: var(--cream); }
.glass--dark::before {
  background: var(--glass-fill-dark);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.55), inset 0 -1px 2px rgba(255,255,255,.15), inset 0 0 26px rgba(255,255,255,.1), 0 14px 40px rgba(0,0,0,.28);
}
.glass--tint::before { background: linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,255,255,.3)); }
.glass--sun::before { background: linear-gradient(135deg, rgba(254,179,26,.62), rgba(254,179,26,.3)); }
/* Glass sitting on photography needs a firmer tint to keep small type at WCAG AA */
.hero .glass--dark::before { background: linear-gradient(135deg, rgba(26,46,10,.74), rgba(26,46,10,.58)); }

/* Chromium-only refraction. main.js adds .lg-refract to <html> when it is supported. */
.lg-refract .glass--lens::before {
  -webkit-backdrop-filter: url(#lg-lens) blur(6px) saturate(var(--glass-sat));
  backdrop-filter: url(#lg-lens) blur(6px) saturate(var(--glass-sat));
}
.lg-refract .glass--lens-wide::before {
  -webkit-backdrop-filter: url(#lg-lens-wide) blur(6px) saturate(var(--glass-sat));
  backdrop-filter: url(#lg-lens-wide) blur(6px) saturate(var(--glass-sat));
}

/* No backdrop-filter support, or the user asked for less transparency */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass::before { background: rgba(255,246,227,.95); }
  .glass--dark::before { background: rgba(26,46,10,.88); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass::before { background: rgba(255,246,227,.97); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .glass--dark::before { background: rgba(26,46,10,.94); }
  .lg-refract .glass--lens::before, .lg-refract .glass--lens-wide::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- 4. Buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border: 0; border-radius: var(--r-pill);
  font-family: var(--font-body); font-size: 1rem; font-weight: 600; line-height: 1; white-space: nowrap;
  transition: transform .25s var(--ease-spring), box-shadow .25s var(--ease), filter .2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.97); }
.btn--sun {
  color: var(--ink);
  background: linear-gradient(180deg, #FFC74F 0%, #FEB31A 55%, #F2A400 100%);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.75), inset 0 -3px 8px rgba(140,80,0,.25), 0 10px 24px rgba(254,179,26,.45), 0 2px 4px rgba(26,46,10,.18);
}
.btn--sun:hover { box-shadow: inset 0 1.5px 0 rgba(255,255,255,.8), inset 0 -3px 8px rgba(140,80,0,.25), 0 16px 32px rgba(254,179,26,.55), 0 2px 4px rgba(26,46,10,.18); }
.btn--ink { color: var(--cream); background: linear-gradient(180deg, #2A4514, #1A2E0A); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 10px 24px rgba(26,46,10,.3); }
.btn--glass {
  color: var(--cream); background: rgba(255,246,227,.16);
  -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.7), inset 0 0 0 1px rgba(255,246,227,.4), inset 0 0 18px rgba(255,255,255,.12), 0 8px 24px rgba(0,0,0,.18);
}
.btn--glass:hover { background: rgba(255,246,227,.26); }
.btn--outline { color: var(--ink); background: rgba(255,255,255,.4); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: .9375rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .6; cursor: not-allowed; transform: none; }
.btn .icon { width: 1.25rem; height: 1.25rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.icon-btn {
  display: inline-grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: rgba(26,46,10,.08); color: var(--ink); transition: background .2s var(--ease), transform .25s var(--ease-spring);
}
.icon-btn:hover { background: rgba(26,46,10,.14); transform: scale(1.06); }

/* ---------- 5. Header: floating glass pill (Orchard Pop shape, Golden Hour colour) ---------- */
.site-header { position: fixed; z-index: 60; top: 16px; left: 0; right: 0; display: flex; justify-content: center; padding-inline: 16px; pointer-events: none; transition: top .3s var(--ease); }
.nav { pointer-events: auto; position: relative; width: 100%; height: 68px; padding: 0 10px 0 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-radius: var(--r-pill); color: var(--ink); transition: height .3s var(--ease), width .3s var(--ease); }
.nav::before { background: linear-gradient(135deg, rgba(255,246,227,.74), rgba(255,246,227,.46)); }
.nav.is-scrolled { height: 60px; }
.nav.is-scrolled::before { background: linear-gradient(135deg, rgba(255,246,227,.86), rgba(255,246,227,.62)); }
.brand { display: flex; align-items: center; flex-shrink: 0; border-radius: 12px; }
/* Logo is 465 x 288 (about 1.6:1): the nav is 68px tall, so 54px leaves a 7px margin; it follows the nav as it shrinks on scroll */
.brand img { display: block; height: 54px; width: auto; transition: height .3s var(--ease); }
.nav.is-scrolled .brand img { height: 48px; }
.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__link { display: flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--r-pill); font-size: .9375rem; font-weight: 500; transition: background .2s var(--ease), color .2s var(--ease); }
.nav__link:hover { background: rgba(26,46,10,.08); }
.nav__link[aria-current="true"] { background: linear-gradient(180deg, rgba(254,179,26,.62), rgba(254,179,26,.4)); box-shadow: inset 0 1px 1px rgba(255,255,255,.7); font-weight: 600; }
.nav__toggle { display: none; }
.nav__extra { display: none; }

/* ---------- 6. Hero ----------
   The client's banner (2886 x 1004) is shown whole, never cropped: the image sits in normal flow at its own aspect ratio
   and the headline block rides up over its faded lower edge. On small screens the banner is a full-width strip
   with a blurred copy of itself behind the nav area. */
.hero { position: relative; isolation: isolate; background: var(--ink); color: var(--cream); padding: 0 0 56px; overflow: hidden; }
.hero__media { position: relative; z-index: -3; overflow: hidden; background: var(--ink); }
.hero__media img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.hero__media::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(26,46,10,.5) 0%, rgba(26,46,10,0) 24%, rgba(26,46,10,0) 46%, rgba(26,46,10,.7) 78%, var(--ink) 100%); }
.hero__inner { position: relative; margin-top: calc(-1 * clamp(80px, 11vw, 190px)); display: grid; grid-template-columns: minmax(0, 1fr) clamp(420px, 38vw, 520px); align-items: end; gap: var(--s-5) var(--s-6); }
.hero__copy { display: grid; gap: 22px; max-width: 800px; }
.hero__chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 16px 0 14px; border-radius: var(--r-pill); font-size: .8125rem; font-weight: 500; }
.hero__chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--lime); }
.hero h1 { font-size: var(--fs-display); line-height: .98; letter-spacing: -.015em; color: var(--cream); text-shadow: 0 2px 28px rgba(26,46,10,.4); }
.hero__lead { max-width: 620px; font-size: var(--fs-lead); line-height: 1.65; color: var(--cream); text-shadow: 0 1px 14px rgba(26,46,10,.45); }
.shloka { width: 100%; max-width: 520px; justify-self: end; padding: 22px 24px; display: grid; gap: 12px; border-radius: 26px; container-type: inline-size; }
/* Sanskrit: always exactly two lines (one verse-half per line). Each line measures about 16em in Arya, so 6cqw leaves a small margin. */
.shloka__sa { font-family: var(--font-head); font-size: clamp(.875rem, 4.9vw, 1.375rem); line-height: 1.6; }
.shloka__sa span { display: block; white-space: nowrap; }
@supports (container-type: inline-size) { .shloka__sa { font-size: min(1.625rem, 6cqw); } }
.shloka__rule { height: 1px; background: rgba(255,246,227,.35); }
.shloka__en { font-size: .8125rem; line-height: 1.6; }
.hero__chip-wrap { position: absolute; left: 0; right: 0; top: 110px; }
/* Typing headline letters. main.js creates these (only when motion is allowed) and adds .on as each letter is typed.
   Arya's inline box is 1.8em tall with the baseline 1.26em down, so the caret runs from cap-height to just below the baseline. */
.tw__w { display: inline-block; white-space: nowrap; }
.tw__c { position: relative; opacity: 0; }
.tw__c.on { opacity: 1; }
.tw__c::after { content: ''; position: absolute; left: 100%; top: .5em; height: .88em; width: .06em; margin-left: .02em; border-radius: 2px; background: var(--sun); opacity: 0; }
.tw__c.cur::after { opacity: 1; }
.tw__c.cur.blink::after { animation: tw-caret-end 1.9s linear forwards; }
.tw-done .tw__c { opacity: 1; }
.tw-done .tw__c::after { opacity: 0 !important; animation: none; }

/* ---------- 7. About ---------- */
.about { background: var(--cream); overflow: hidden; }
.blob { position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; filter: blur(0); }
.about .blob--a { width: 520px; height: 520px; right: -140px; top: -120px; background: radial-gradient(circle at 40% 40%, rgba(254,179,26,.5), rgba(254,179,26,0) 68%); }
.about .blob--b { width: 460px; height: 460px; left: -160px; bottom: 6%; background: radial-gradient(circle at 50% 50%, rgba(117,194,0,.32), rgba(117,194,0,0) 70%); }
.about__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s-7); align-items: start; }
.about__copy { display: grid; gap: var(--s-4); }
.about__copy h2 { font-size: var(--fs-h1); }
.pull { display: grid; gap: 14px; padding: 6px 0 6px 22px; border-left: 3px solid var(--sun); font-family: var(--font-head); font-size: var(--fs-h3); line-height: 1.2; }
.pull small { font-family: var(--font-body); font-size: .9375rem; font-weight: 500; color: var(--ink-soft); }
.promise { display: inline-flex; align-self: flex-start; align-items: center; gap: 12px; min-height: 52px; padding: 0 22px 0 18px; border-radius: var(--r-pill); font-weight: 600; }
.stack { display: grid; gap: var(--s-3); }
.card { position: relative; padding: 26px 28px; border-radius: var(--r-md); }
.card h3 { font-size: 1.5rem; margin-bottom: 10px; display: flex; align-items: center; gap: 12px; }
.card h3 .icon-tile { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(180deg, #FFC74F, #FEB31A); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
.card p { color: var(--ink); }
.vision-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.vision-list li { min-height: 36px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: var(--r-pill); font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 1px rgba(26,46,10,.12); }
.team-values { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 4px; }
.team-values li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 1px rgba(26,46,10,.1); font-size: .875rem; line-height: 1.35; }
.team-values b { flex-shrink: 0; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; font-family: var(--font-head); font-size: 1.25rem; background: var(--sun); }
.eureka { margin-top: var(--s-7); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.eureka .card { padding: 32px; }
.eureka h3 { font-size: var(--fs-h3); }
.eureka__label { display: inline-block; margin-bottom: 14px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--forest); }

/* ---------- 8. Categories ---------- */
.categories { background:
  radial-gradient(60% 50% at 88% 6%, rgba(254,179,26,.6), rgba(254,179,26,0) 70%),
  radial-gradient(50% 45% at 4% 96%, rgba(117,194,0,.4), rgba(117,194,0,0) 70%),
  var(--cream-2); overflow: hidden; }
.categories__head { display: grid; grid-template-columns: 1fr auto; gap: var(--s-6); align-items: center; margin-bottom: var(--s-6); }
.categories__head .section-head { margin-bottom: 0; }
.categories__art { width: min(280px, 26vw); margin: -48px 0 -10px; filter: drop-shadow(0 20px 24px rgba(26,46,10,.2)); }
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.cat { display: grid; gap: 20px; padding: 26px; border-radius: var(--r-lg); transition: transform .35s var(--ease-spring); }
.cat:hover { transform: translateY(-6px); }
.cat__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* Category icons are plain line drawings: no tile, no fill. */
.cat__tile { width: 64px; height: 64px; display: grid; place-items: center; color: var(--forest); }
.cat__tile svg { width: 60px; height: 60px; overflow: visible; }
.cat h3 { font-size: 1.5rem; line-height: 1.12; }
.cat__count { display: flex; align-items: baseline; gap: 10px; padding-top: 16px; border-top: 1px solid rgba(26,46,10,.14); }
.cat__num { font-family: var(--font-head); font-size: 2.5rem; font-weight: 700; line-height: 1; }
.cat__label { font-size: .8125rem; font-weight: 500; color: var(--ink-soft); }

/* ---------- 9. Campuses + RKGIT ---------- */
.campuses { background: var(--cream-2); }
.campus-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5) var(--s-4); }
.campus { display: grid; gap: 16px; align-content: start; }
.campus__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-lg); background: var(--ink); isolation: isolate; box-shadow: 0 14px 34px rgba(26,46,10,.2); transition: transform .4s var(--ease-spring); }
.campus:hover .campus__img { transform: translateY(-6px); }
.campus__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.campus:hover .campus__img img { transform: scale(1.05); }
/* Store name sits below the photo, never over it */
.campus__cap { display: grid; gap: 4px; padding: 0 4px; }
.campus__cap h3 { font-size: 1.5rem; line-height: 1.15; color: var(--ink); }
.campus__cap > span { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; font-weight: 500; color: var(--ink-soft); }
.campus__cap .icon { color: var(--forest); }

.rkgit { margin-top: var(--s-8); position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--s-6); align-items: center; }
.rkgit__media { position: relative; }
.rkgit__main { display: block; width: 100%; aspect-ratio: 6 / 5; object-fit: cover; border-radius: var(--r-lg); box-shadow: 0 24px 60px rgba(26,46,10,.28); }
.rkgit__inset { position: absolute; right: -4%; bottom: -9%; width: 40%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 24px; border: 6px solid var(--cream-2); box-shadow: 0 18px 40px rgba(26,46,10,.3); }
.rkgit__tag { position: absolute; left: 18px; top: 18px; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); font-size: .8125rem; font-weight: 600; }
.rkgit__copy { display: grid; gap: var(--s-3); padding-bottom: var(--s-5); }
.rkgit__copy h3 { font-size: var(--fs-h1); }
.rkgit__more { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.rkgit__more i { width: 10px; height: 10px; border-radius: 50%; background: var(--leaf); animation: ping 2.4s var(--ease) infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(26,197,0,.5); } 80%, 100% { box-shadow: 0 0 0 12px rgba(26,197,0,0); } }

.glimpses { margin-top: var(--s-8); display: grid; gap: var(--s-3); }
.glimpses .eyebrow { margin-bottom: var(--s-2); }
.glimpses__row { display: flex; align-items: flex-start; gap: var(--s-3); }
/* Justified rows: flex-grow follows each photo's aspect ratio, so photos in a row end up the same height and none is cropped */
.glimpses figure { flex: var(--a) 1 0%; min-width: 0; aspect-ratio: var(--a); margin: 0; position: relative; overflow: hidden; border-radius: var(--r-md); background: var(--ink); }
.glimpses img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.glimpses figure:hover img { transform: scale(1.04); }

/* ---------- 10. Purity + #Love Nature to be Healthy ---------- */
.nature { background:
  radial-gradient(70% 60% at 100% 0%, rgba(254,179,26,.45), rgba(254,179,26,0) 70%),
  linear-gradient(160deg, #BFE46A 0%, #75C200 55%, #5DAE00 100%); overflow: hidden; }
.nature__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--s-7); align-items: center; }
.nature__art { position: relative; justify-self: center; width: min(520px, 100%); }
.nature__frame { padding: 14px; border-radius: 40px; background: rgba(255,255,255,.55); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 1px 1px #fff, 0 30px 70px rgba(26,46,10,.3); }
.nature__frame img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; border-radius: 28px; }
.nature__girl { position: absolute; right: -62px; bottom: -24px; width: 18%; filter: drop-shadow(0 14px 18px rgba(26,46,10,.25)); }
.nature__copy { display: grid; gap: var(--s-4); }
.nature__copy .eyebrow { color: var(--ink); }
.nature__copy .eyebrow::before { background: var(--cream); box-shadow: 0 0 0 4px rgba(255,255,255,.4); }
.nature__copy h2 { font-size: var(--fs-h1); color: var(--ink); }
.nature__list { display: grid; gap: var(--s-3); }
.nature__item { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; padding: 20px 22px; border-radius: 24px; }
.nature__item .icon-tile { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(180deg, #FFC74F, #FEB31A); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
.nature__item h3 { font-family: var(--font-body); font-size: 1.0625rem; font-weight: 600; letter-spacing: 0; margin-bottom: 4px; line-height: 1.3; }
.nature__item p { font-size: .9375rem; line-height: 1.6; }

/* ---------- 11. Team ---------- */
.team { background: var(--cream); overflow: hidden; }
.team .blob { width: 560px; height: 560px; left: -200px; top: 10%; background: radial-gradient(circle, rgba(254,179,26,.4), rgba(254,179,26,0) 70%); }
.team__grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: var(--s-7); align-items: center; }
.team__copy { display: grid; gap: var(--s-3); }
.team__copy h2 { font-size: var(--fs-h1); }
.team__quote { margin-top: 6px; padding: 22px 26px; border-radius: 26px; font-family: var(--font-head); font-size: 1.5rem; line-height: 1.25; }
.team__media { position: relative; }
.team__main { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-lg); box-shadow: 0 24px 60px rgba(26,46,10,.25); }
.team__second { position: absolute; left: -8%; bottom: -12%; width: 46%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 24px; border: 6px solid var(--cream); box-shadow: 0 18px 40px rgba(26,46,10,.28); }

/* ---------- 12. Contact ---------- */
.contact { background:
  radial-gradient(50% 60% at 12% 8%, rgba(254,179,26,.42), rgba(254,179,26,0) 70%),
  radial-gradient(45% 55% at 92% 96%, rgba(117,194,0,.4), rgba(117,194,0,0) 70%),
  #1A2E0A; color: var(--cream); overflow: hidden; }
.contact__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--s-7); align-items: start; }
.contact__copy { display: grid; gap: var(--s-4); }
.contact__copy h2 { font-size: var(--fs-h1); color: var(--cream); }
.contact__copy .eyebrow { color: var(--cream); }
.contact__list { display: grid; gap: 14px; margin-top: var(--s-2); }
.contact__list > a, .contact__list > address { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: center; font-style: normal; font-size: .9375rem; line-height: 1.5; }
.contact__list .social { margin-top: 6px; }
.contact__list .icon-tile { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: rgba(255,246,227,.14); box-shadow: inset 0 1px 1px rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,246,227,.2); }
.contact__list span.label { display: block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,246,227,.72); }
.contact__list > a:hover strong { text-decoration: underline; text-underline-offset: 4px; }

.form-card { padding: clamp(24px, 4vw, 44px); border-radius: var(--r-lg); color: var(--ink); }
.form-card::before { background: linear-gradient(135deg, rgba(255,246,227,.97), rgba(255,246,227,.9)); }
.form-card h3 { font-size: var(--fs-h3); margin-bottom: 6px; }
.form-intro { margin-bottom: 20px; }
.form-intro p { color: var(--ink-soft); font-size: .9375rem; }
.form { display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 6px; }
.field label { font-size: .875rem; font-weight: 600; }
.field label .opt { font-weight: 400; color: var(--ink-soft); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea {
  width: 100%; min-height: 54px; padding: 14px 16px; border-radius: var(--r-sm);
  border: 1.5px solid rgba(26,46,10,.3); background: rgba(255,255,255,.92); font-size: 1rem; color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: #6B7A5A; opacity: 1; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 4px rgba(254,179,26,.5); }
.field[data-invalid="true"] input, .field[data-invalid="true"] textarea { border-color: var(--error); border-width: 2px; }
.field__error { display: none; align-items: flex-start; gap: 6px; font-size: .8125rem; font-weight: 500; color: var(--error); }
.field[data-invalid="true"] .field__error { display: flex; }
.check { display: flex; align-items: flex-start; gap: 12px; font-size: .9375rem; cursor: pointer; }
.check input { appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 24px; height: 24px; margin: 0; border-radius: 8px; border: 1.5px solid rgba(26,46,10,.4); background: #fff; display: grid; place-items: center; transition: background .2s var(--ease); }
.check input:checked { background: var(--forest); border-color: var(--forest); }
.check input:checked::after { content: ''; width: 6px; height: 11px; margin-top: -2px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.check input:focus-visible { outline: 3px solid var(--forest); outline-offset: 3px; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.form__note { font-size: .8125rem; color: var(--ink-soft); }
.spinner { display: none; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(26,46,10,.25); border-top-color: var(--ink); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.form[data-state="loading"] .spinner { display: inline-block; }
.form[data-state="loading"] .btn .icon { display: none; }
.banner { display: none; align-items: flex-start; gap: 14px; padding: 16px 18px; border-radius: 18px; font-size: .9375rem; line-height: 1.5; }
.banner .icon-tile { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.banner--error { background: #FDE8E6; box-shadow: inset 0 0 0 1.5px rgba(179,38,30,.4); color: #5E130E; }
.banner--error .icon-tile { background: var(--error); color: #fff; }
.banner a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.form[data-state="error"] .banner--error { display: flex; }
.success { display: none; text-align: center; padding: 28px 8px; gap: 14px; justify-items: center; }
.success .icon-tile { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, #4BE02E, #1AC500); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 10px 24px rgba(26,197,0,.4); }
.success h3 { font-size: var(--fs-h3); }
.form-card[data-state="success"] .success { display: grid; }
.form-card[data-state="success"] .form, .form-card[data-state="success"] .form-intro { display: none; }

/* Keep focused fields clear of the floating header */
.contact input, .contact textarea, #form-success, #form-error { scroll-margin-top: 128px; scroll-margin-bottom: 40px; }

/* ---------- 13. Social icons + legal bar (the contact block is the page footer) ---------- */
.social { display: flex; gap: 10px; margin-top: 4px; }
.social a { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--cream); position: relative; isolation: isolate; transition: transform .25s var(--ease-spring), color .2s var(--ease); }
.social a:hover { transform: translateY(-3px) scale(1.06); color: var(--ink); }
.social a::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; border-radius: 50%; background: rgba(255,246,227,.12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 1px rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,246,227,.2); transition: background .2s var(--ease); }
.social a:hover::before { background: var(--sun); }
.contact { padding-bottom: 0; }
.footer__legal { margin-top: var(--s-8); border-top: 1px solid rgba(255,246,227,.16); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: var(--s-4); font-size: .8125rem; line-height: 1.6; color: rgba(255,246,227,.78); }

/* ---------- 14. Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
  @keyframes dawn { from { filter: brightness(.55) saturate(.8); } to { filter: none; } }
  @keyframes heroZoom { from { transform: scale(1); } to { transform: scale(var(--hero-zoom, 1.1)); } }
  @keyframes drift { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(4deg); } }
  @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
  /* Hero sequence. main.js adds html.hero-go once the banner and heading font have loaded (the head script adds it
     at 3.5 s as a failsafe), so everything below starts together and is seen from its first frame.
     Banner: brightens like first light, then zooms in once, from the full uncropped frame (1 to 1.1 over 12 s, easing out).
     Tune the zoom with --hero-zoom (end scale) and --hero-zoom-time. */
  .hero { --hero-zoom: 1.1; --hero-zoom-time: 12s; }
  .hero__media img { transform-origin: 50% 35%; will-change: transform; }
  .js:not(.hero-go) .hero__media img { filter: brightness(.55) saturate(.8); }
  .hero-go .hero__media img { animation: dawn 2.2s var(--ease) both, heroZoom var(--hero-zoom-time) cubic-bezier(.25, .1, .3, 1) forwards; }
  .js:not(.hero-go) .hero .rise { opacity: 0; }
  .hero-go .hero .rise { animation: rise 1s var(--ease) both; }
  .hero-go .hero .rise--1 { animation-delay: .15s; } .hero-go .hero .rise--3 { animation-delay: .45s; } .hero-go .hero .rise--4 { animation-delay: .6s; }

  /* Typing headline: <html class="tw"> is set only when motion is allowed, and main.js types the letters (see section 6).
     If main.js never runs, a CSS failsafe shows the headline after 2.5 s. The lead and buttons arrive while the line is being typed. */
  .tw #hero-title:not(.is-typed) { visibility: hidden; animation: tw-failsafe 0s linear 2.5s forwards; }
  @keyframes tw-failsafe { to { visibility: visible; } }
  .tw.hero-go .hero .rise--3 { animation-delay: 1.8s; }
  .tw.hero-go .hero .rise--4 { animation-delay: 2.2s; }
  @keyframes tw-caret-end { 0%, 18% { opacity: 1; } 19%, 38% { opacity: 0; } 39%, 58% { opacity: 1; } 59%, 78% { opacity: 0; } 79%, 96% { opacity: 1; } 100% { opacity: 0; } }
  .js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease-spring); transition-delay: var(--d, 0s); }
  .js .reveal.is-in { opacity: 1; transform: none; }
  .nature__girl { animation: drift 8s ease-in-out infinite; }
  .categories__art { animation: drift 9s ease-in-out infinite; }
}

/* ---------- 15. Responsive (mobile-first overrides, desktop-down) ---------- */
@media (max-width: 1100px) {
  .hero__inner { grid-template-columns: 1fr; }
  .shloka { justify-self: start; max-width: 520px; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .site-header { top: 12px; padding-inline: 12px; }
  .nav { height: 62px; padding: 0 8px 0 18px; }
  .brand img, .nav.is-scrolled .brand img { height: 48px; }
  .nav__toggle { display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(26,46,10,.09); color: var(--ink); position: relative; z-index: 2; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background .2s var(--ease); }
  .nav__toggle:hover { background: rgba(26,46,10,.15); }
  .nav__toggle .icon-close { display: none; }
  .nav[data-open="true"] .nav__toggle .icon-open { display: none; }
  .nav[data-open="true"] .nav__toggle .icon-close { display: block; }
  .nav[data-open="true"] .brand { position: relative; z-index: 2; }

  /* The links become a full-screen liquid-glass sheet. visibility keeps closed links out of the tab order. */
  .nav__panel { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 104px 28px 32px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; visibility: hidden; opacity: 0; transform: scale(.98); transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s; }
  .nav__panel::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: linear-gradient(160deg, rgba(255,246,227,.82), rgba(255,235,194,.78)); -webkit-backdrop-filter: blur(34px) saturate(1.9); backdrop-filter: blur(34px) saturate(1.9); }
  .nav__panel::after { content: ''; position: absolute; z-index: -1; right: -120px; top: 18%; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(254,179,26,.55), rgba(254,179,26,0) 70%); }
  .nav[data-open="true"] .nav__panel { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .nav__links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__links li { border-bottom: 1px solid rgba(26,46,10,.14); }
  .nav__link { min-height: 68px; padding: 0 4px; border-radius: 0; font-family: var(--font-head); font-size: 2.125rem; font-weight: 700; line-height: 1; justify-content: space-between; background: none !important; box-shadow: none !important; }
  .nav__link::after { content: ''; width: 24px; height: 24px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center / contain no-repeat; color: var(--forest); }
  .nav__link[aria-current="true"] { color: var(--forest); }
  .nav__link[aria-current="true"]::before { content: ''; width: 10px; height: 10px; margin-right: 12px; border-radius: 50%; background: var(--sun); order: -1; }
  .nav__link { justify-content: flex-start; }
  .nav__link::after { margin-left: auto; }
  .nav__extra { display: grid; gap: 18px; }
  .nav__extra .social a { color: var(--ink); }
  .nav__extra .social a::before { background: rgba(26,46,10,.08); box-shadow: inset 0 1px 1px rgba(255,255,255,.7); }
  .nav__extra .social a:hover { color: var(--ink); }
  .nav__mail { font-size: .875rem; font-weight: 500; color: var(--ink-soft); }
  .nav[data-open="true"]::before { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav[data-open="true"]::after { opacity: 0; }

  /* Hero on tablets/phones: the banner stays whole; a blurred copy fills the nav area above it */
  .hero__media { padding-top: 76px; }
  .hero__media::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; background: url(../img/hero-banner-900.webp) center / cover no-repeat; filter: blur(26px) saturate(1.15); transform: scale(1.2); }
  .hero__media img { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20%); mask-image: linear-gradient(180deg, transparent 0, #000 20%); }
  .hero__media::after { background: linear-gradient(180deg, rgba(26,46,10,.35) 0%, rgba(26,46,10,0) 30%, rgba(26,46,10,.2) 62%, var(--ink) 100%); }
  .hero__chip-wrap { position: relative; top: auto; margin: -34px 0 16px; }
  .hero__inner { margin-top: 0; }

  .about__grid, .nature__grid, .team__grid, .contact__grid, .rkgit { grid-template-columns: 1fr; gap: var(--s-6); }
  .eureka { grid-template-columns: 1fr; }
  .categories__head { grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; }
  .categories__art { width: min(34vw, 200px); margin: 0; }
  .rkgit__copy { padding-bottom: 0; }
  .rkgit__inset { right: 4%; bottom: -8%; width: 44%; }
  .rkgit { margin-bottom: var(--s-6); }
  .team__second { left: 4%; bottom: -10%; }
  .team__media { margin-bottom: var(--s-6); }
  .nature__art { order: -1; margin-bottom: 36px; }
  .nature__girl { right: -8px; bottom: -64px; width: 16%; }
  /* Tablets/phones: two columns, the wide photo takes a full row; photos are still shown whole */
  .glimpses { grid-template-columns: 1fr 1fr; align-items: start; }
  .glimpses .eyebrow, .glimpses__wide { grid-column: 1 / -1; }
  .glimpses__row { display: contents; }
  .glimpses figure { flex: none; }

  /* No JavaScript (switched off, blocked, or a viewer that does not run scripts): the sheet cannot open, so the links
     sit in the bar as a plain wrapping row instead. The bar scrolls away with the page rather than floating. */
  html:not(.js) .site-header { position: absolute; }
  html:not(.js) .nav { height: auto; flex-wrap: wrap; padding: 8px 14px 14px 18px; border-radius: 28px; }
  html:not(.js) .nav__toggle { display: none; }
  html:not(.js) .nav__panel { position: static; display: block; width: 100%; padding: 0; overflow: visible; visibility: visible; opacity: 1; transform: none; transition: none; }
  html:not(.js) .nav__panel::before, html:not(.js) .nav__panel::after, html:not(.js) .nav__extra { display: none; }
  html:not(.js) .nav__links { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  html:not(.js) .nav__links li { border: 0; }
  html:not(.js) .nav__link { min-height: 44px; padding: 0 16px; border-radius: var(--r-pill); font-family: var(--font-body); font-size: .9375rem; font-weight: 600; background: rgba(26,46,10,.09) !important; }
  html:not(.js) .nav__link::after, html:not(.js) .nav__link[aria-current="true"]::before { display: none; }
}
@media (max-width: 640px) {
  .hero__copy { gap: 18px; }
  .btn-row .btn { flex: 1 1 100%; min-height: 56px; }
  .shloka { padding: 18px 16px; }
  .promise { display: flex; align-self: stretch; border-radius: 26px; padding: 14px 18px; line-height: 1.45; }
  .cat-grid, .campus-grid { grid-template-columns: 1fr; }
  .cat { grid-template-columns: auto 1fr; align-items: center; gap: 18px; padding: 20px; }
  .cat__top { display: contents; }
  .cat__tile { width: 56px; height: 56px; }
  .cat__tile svg { width: 52px; height: 52px; }
  .cat h3 { grid-column: 2; grid-row: 1; font-size: 1.25rem; }
  .cat__count { grid-column: 1 / -1; padding-top: 14px; }
  .team-values { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .form__actions .btn { width: 100%; min-height: 56px; }
  .glimpses { grid-template-columns: 1fr; }
  .glimpses__wide { grid-column: auto; }
  .nav__link { font-size: 2rem; }
  html:not(.js) .nav__link { font-size: .9375rem; }
}
@media (min-width: 901px) {
  .nav__panel { display: contents; }
  /* The bar is exactly as wide as the page content, so its ends line up with the headline, chip and cards below */
  .site-header { padding-inline: 0; }
  .nav { width: min(var(--container), 100% - var(--gutter) * 2); }
}
@media (hover: none) { .cat:hover, .campus:hover .campus__img, .btn:hover { transform: none; } }
@media print { .site-header { display: none; } .js .reveal { opacity: 1 !important; transform: none !important; } }