/* School of Immigration, by Vinay Hari: the shared chrome, loaded by every page including the 3D home.
   One component, one stylesheet: the header (lockup, nav pill group, EN / हिंदी toggle, Apply pill, hamburger and the
   cream mobile sheet), the button pills, the deep crimson footer and the phone bar. The markup lives in src/layout.html
   (the header and footer regions marked there are also injected into src/experience/index.html by tools/build.mjs).
   Loaded after site.css (inner pages) or experience.css (the home), which define the tokens it reads: --crimson,
   --crimson-deep, --cream, --white, --gold, --gold-hi, --line, --muted, --font-en, --font-hi, --header-h, --gutter,
   --max, --ease. The phone value of --header-h is set here so both documents agree. */

/* inline icons: {{icon:name}} renders <svg class="ic ic-name">; 1.5px stroke, currentColor */
.ic { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -.15em; }

/* ---------- header: the home's header. Crimson glass over the hero, cream glass with crimson text once it has scrolled past ---------- */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--header-h); color: #FFFFFF; background: rgba(94,15,27,.55); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid rgba(230,199,106,.18); transition: background .3s ease, color .3s ease, border-color .3s ease; }
body.past-hero .site-header, body.menu-open .site-header { color: var(--crimson); background: rgba(247,241,230,.82); border-bottom-color: rgba(142,27,42,.14); }
body.menu-open .site-header { background: var(--cream); }
.site-header .wrap { max-width: none; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 clamp(16px, 3vw, 32px); }
.logo { display: flex; flex-direction: column; text-decoration: none; line-height: 1.05; min-width: 0; font-family: var(--font-en); }
.logo > span { display: block; min-width: 0; }
.logo .name { display: block; font-weight: 700; font-size: 17px; letter-spacing: -.01em; white-space: nowrap; }
.logo .sub { display: block; font-size: 11px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; opacity: .78; margin-top: 3px; white-space: nowrap; }
.nav { display: none; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(247,241,230,.94); border: 1px solid rgba(230,199,106,.35); margin: 0 auto; }
body.past-hero .nav { background: var(--white); border-color: rgba(142,27,42,.16); }
.nav a { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--crimson); text-decoration: none; white-space: nowrap; transition: background .2s, color .2s; }
.nav a:hover { background: rgba(142,27,42,.08); }
.nav a[aria-current="page"] { background: var(--crimson); color: #FFFFFF; }
html[lang="hi"] .nav a { font-size: 15px; font-weight: 600; }
.header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.lang-switch { display: inline-flex; align-items: center; height: 40px; padding: 3px; border: 1px solid currentColor; border-radius: 999px; line-height: 1; }
.lang-switch a, .lang-switch span { display: inline-flex; align-items: center; justify-content: center; height: 32px; min-width: 40px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: inherit; opacity: .75; text-decoration: none; white-space: nowrap; transition: background .2s, color .2s, opacity .2s; }
.lang-switch [lang="en"] { order: 0; font-family: var(--font-en); }
.lang-switch [lang="hi"] { order: 1; font-family: var(--font-hi); }
.lang-switch [aria-current="true"] { background: var(--gold); color: var(--crimson-deep); opacity: 1; }
.lang-switch a:hover { opacity: 1; background: rgba(255,255,255,.14); }
body.past-hero .lang-switch a:hover, body.menu-open .lang-switch a:hover, .mobile-nav .lang-switch a:hover { background: rgba(142,27,42,.08); }
.header-actions .btn--apply { display: none; height: 40px; min-height: 0; padding: 0 18px; font-size: 14px; }
.menu-btn { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; }
.menu-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.menu-btn i { display: block; width: 16px; height: 2px; border-radius: 2px; background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; transition: box-shadow .2s, transform .2s; }
.menu-btn[aria-expanded="true"] i { transform: rotate(45deg); box-shadow: none; }
.menu-btn[aria-expanded="true"] i::after { content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 2px; border-radius: 2px; background: currentColor; transform: rotate(90deg); }
/* mobile sheet: a full-height cream sheet with big links; lives outside the header */
.mobile-nav { position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; z-index: 49; display: none; flex-direction: column; justify-content: space-between; gap: 24px; padding: 22px var(--gutter) calc(22px + env(safe-area-inset-bottom)); background: var(--cream); color: var(--crimson); overflow: auto; }
.mobile-nav[data-open="true"] { display: flex; }
/* the sheet drops in (240 ms) and its links follow, 35 ms apart; closing is instant on purpose */
@media (prefers-reduced-motion: no-preference) {
  .mobile-nav[data-open="true"] { animation: sheetIn .24s cubic-bezier(.22,.61,.36,1) both; }
  .mobile-nav[data-open="true"] .mobile-nav__links a, .mobile-nav[data-open="true"] .mobile-nav__foot { animation: sheetLink .3s cubic-bezier(.22,.61,.36,1) both; animation-delay: calc(60ms + var(--n, 0) * 35ms); }
  .mobile-nav__links a:nth-child(2) { --n: 1; } .mobile-nav__links a:nth-child(3) { --n: 2; } .mobile-nav__links a:nth-child(4) { --n: 3; } .mobile-nav__links a:nth-child(5) { --n: 4; } .mobile-nav__links a:nth-child(6) { --n: 5; } .mobile-nav__links a:nth-child(n+7) { --n: 6; }
  .mobile-nav__foot { --n: 7; }
}
@keyframes sheetIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes sheetLink { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.mobile-nav__links { display: grid; }
.mobile-nav__links a { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: clamp(24px, 6.5vw, 32px); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: var(--crimson); text-decoration: none; }
html[lang="hi"] .mobile-nav__links a { letter-spacing: 0; }
.mobile-nav__links a[aria-current="page"]::before { content: ""; width: 22px; height: 3px; border-radius: 3px; background: var(--gold); flex: none; }
.mobile-nav__foot { display: grid; gap: 14px; }
.mobile-nav .lang-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--muted); }
@media (min-width: 768px) { .header-actions .btn--apply { display: inline-flex; } }
@media (min-width: 1024px) { .nav { display: flex; } .menu-btn { display: none; } .mobile-nav { display: none !important; } }
@media (max-width: 767px) {
  :root { --header-h: 56px; }
  .site-header .wrap { padding: 0 14px; }
  .logo .name { font-size: 15px; } .logo .sub { font-size: 10px; }
  .lang-switch { height: 34px; padding: 2px; } .lang-switch a, .lang-switch span { height: 28px; min-width: 36px; padding: 0 9px; font-size: 12px; }
  .menu-btn { width: 34px; height: 34px; }
}
/* ---------- buttons: pills. Crimson on cream, gold on crimson; WhatsApp and ghost are outlines (the hero overrides sit in site.css) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 24px; border-radius: 999px; font-family: var(--font-en); font-weight: 700; font-size: 15px; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; border: 1px solid var(--crimson-deep); background: var(--crimson); color: #FFFFFF; transition: transform .2s var(--ease), background .2s, color .2s, border-color .2s, box-shadow .2s; }
html[lang="hi"] .btn { font-family: var(--font-hi); font-size: 16px; }
.btn:hover { transform: translateY(-1px); background: var(--crimson-deep); text-decoration: none; }
.btn { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
/* press: the pill gives under the finger straight away (80 ms in), then springs back on release (the .2s above) */
.btn:active { transform: scale(.96); transition-duration: .08s; }
@media (hover: none) { .btn:hover:not(:active) { transform: none; } }
@media (prefers-reduced-motion: reduce) { .btn:hover, .btn:active { transform: none; } .site-header, .btn, .nav a, .lang-switch a, .menu-btn i { transition: none; } }
.btn--ghost, .btn--wa { background: transparent; color: var(--crimson); border-color: rgba(142,27,42,.45); }
.btn--ghost:hover, .btn--wa:hover { background: rgba(142,27,42,.06); border-color: var(--crimson); }
.btn--wa::before { content: ""; width: 18px; height: 18px; flex: none; 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='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12a8.5 8.5 0 0 1-12.4 7.55L3.5 20.5l1-4.4A8.5 8.5 0 1 1 20.5 12z'/%3E%3Cpath d='M8.5 11.5h7M8.5 14.5h4.5'/%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='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12a8.5 8.5 0 0 1-12.4 7.55L3.5 20.5l1-4.4A8.5 8.5 0 1 1 20.5 12z'/%3E%3Cpath d='M8.5 11.5h7M8.5 14.5h4.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.btn--gold, .btn--apply { background: var(--gold); color: var(--crimson-deep); border-color: var(--gold-hi); box-shadow: 0 6px 18px rgba(201,162,39,.28); }
.btn--gold:hover, .btn--apply:hover { background: var(--gold-hi); }
.btn--sm { min-height: 40px; padding: 6px 18px; font-size: 14px; }
.btn--lg { min-height: 56px; padding: 12px 30px; font-size: 16px; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }
.btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

/* ---------- footer: the home's deep crimson band ---------- */
.site-footer { background: linear-gradient(180deg, var(--crimson) 0%, var(--crimson-deep) 100%); color: rgba(255,255,255,.9); padding: clamp(44px, 6vw, 64px) 0 clamp(40px, 5vw, 56px); font-size: 14px; }
.site-footer .wrap { max-width: var(--max, 1080px); margin: 0 auto; padding: 0 var(--gutter); }
.site-footer a { color: #FFFFFF; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-decoration-color: var(--gold-hi); }
.ft-top { display: grid; gap: 22px; padding-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,.14); margin-bottom: 28px; }
@media (min-width: 900px) { .ft-top { grid-template-columns: 1.1fr 1fr 1.25fr; align-items: start; gap: 32px; } }
.site-footer .logo .name { color: #FFFFFF; white-space: normal; }
.site-footer .logo .sub { color: rgba(255,255,255,.75); white-space: normal; }
.ft-legal-line { margin: 10px 0 0; font-size: 13px; color: rgba(255,255,255,.8); }
.ft-addr, .ft-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; align-content: start; }
.ft-addr li, .ft-contact li { margin: 0; color: rgba(255,255,255,.9); }
.ft-addr li, .ft-contact a { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; overflow-wrap: anywhere; }
.ft-addr .ic, .ft-contact .ic { width: 18px; height: 18px; color: var(--gold-hi); margin-top: 2px; }
.site-footer .cols { display: grid; gap: 26px; }
@media (min-width: 720px) { .site-footer .cols { grid-template-columns: 1.3fr 1.2fr .8fr; gap: 32px; } }
.site-footer .ft-h { color: var(--gold-hi); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 12px; }
.site-footer .cols ul { list-style: none; padding: 0; margin: 0; }
.site-footer .cols li { margin: 0 0 8px; color: rgba(255,255,255,.86); break-inside: avoid; }
@media (min-width: 600px) { .ft-two { columns: 2; column-gap: 20px; } }
.site-footer .legal-lines { border-top: 1px solid rgba(255,255,255,.14); margin-top: 30px; padding-top: 22px; font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.72); }
.site-footer .legal-lines p { margin: 0 0 8px; max-width: 92ch; }
@media (max-width: 767px) { body.has-sticky .site-footer { padding-bottom: 96px; } }

/* ---------- mobile bar: Apply + WhatsApp pills, fixed at the bottom on phones (cream glass, as on the home) ---------- */
.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 48; display: flex; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(247,241,230,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid rgba(142,27,42,.14); }
.sticky .btn { flex: 1; min-height: 46px; padding: 6px 10px; font-size: 14.5px; }
@media (min-width: 768px) { .sticky { display: none; } }
/* the bar is the one home for the pair on phones: in-page duplicates (marked by site.js) hide there */
@media (max-width: 767px) { [data-dup="true"] { display: none !important; } }


/* ---------- cross-page view transitions (same-origin navigation; browsers without them just load the page). A short cross-fade of the
   page, while the header lockup is shared so it stays put instead of blinking. Off under reduced motion. ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header .logo { view-transition-name: lockup; }
  ::view-transition-old(root) { animation-duration: .16s; animation-timing-function: ease-in; }
  ::view-transition-new(root) { animation-duration: .24s; animation-timing-function: ease-out; }
  ::view-transition-group(lockup) { animation-duration: .24s; animation-timing-function: ease-in-out; }
}

/* ---------- review pass, 4 Oct ---------- */
/* Devanagari footer heads carry no letter-spacing */
html[lang="hi"] .site-footer .ft-h { letter-spacing: 0; text-transform: none; font-size: 14px; }
/* cream (minimal) hero pages: the header wears its cream state from the top, so it never sits as a pink wash over cream */
body:has(.hero--min) .site-header { color: var(--crimson); background: rgba(247,241,230,.82); border-bottom-color: rgba(142,27,42,.14); }
body:has(.hero--min) .nav { background: var(--white); border-color: rgba(142,27,42,.16); }
body:has(.hero--min) .lang-switch a:hover { background: rgba(142,27,42,.08); }

/* ---------- home only (html[data-experience]): the header floats over the 3D stage ----------
   No bar over the 3D: the lockup, the nav pill, the language switch, the sound button, Apply and the menu button float as
   filled pills with one soft shadow and no outlines. Once the stage has passed (body.past-hero, set by experience.js), or
   while the phone sheet is open, the rules above apply again and it is the normal cream header. Inner pages never match. */
html[data-experience] body:not(.past-hero):not(.menu-open) .site-header { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; pointer-events: none; }
html[data-experience] body:not(.past-hero):not(.menu-open) .site-header :is(.logo, .nav, .header-actions) { pointer-events: auto; }
html[data-experience] body:not(.past-hero):not(.menu-open) .site-header .logo { justify-content: center; height: 44px; padding: 0 18px; margin: 0 -18px; border-radius: 999px; background: var(--crimson); color: #FFFFFF; box-shadow: 0 6px 18px rgba(42,31,26,.16); }
html[data-experience] body:not(.past-hero):not(.menu-open) .nav { background: var(--cream); border-color: transparent; box-shadow: 0 6px 18px rgba(42,31,26,.16); }
html[data-experience] body:not(.past-hero):not(.menu-open) .site-header :is(.lang-switch, .menu-btn, .hdr-music:not([aria-pressed="true"])) { background: var(--cream); color: var(--crimson); border-color: transparent; }
html[data-experience] body:not(.past-hero):not(.menu-open) .site-header :is(.lang-switch, .menu-btn, .hdr-music) { box-shadow: 0 6px 18px rgba(42,31,26,.16); }
html[data-experience] body:not(.past-hero):not(.menu-open) .site-header .hdr-music[aria-pressed="true"] { border-color: transparent; }
html[data-experience] body:not(.past-hero):not(.menu-open) .site-header .lang-switch a:hover { background: rgba(142,27,42,.1); }
@media (max-width: 767px) {
  html[data-experience] .site-header .header-actions { gap: 6px; }
  html[data-experience] .site-header .menu-btn { width: 36px; height: 36px; }
  html[data-experience] body:not(.past-hero):not(.menu-open) .site-header .logo { height: 40px; padding: 0 12px; margin: 0 0 0 -4px; }
}
/* home only, small phones: the language switch shows only the other language (the full switch is in the menu sheet), so the
   lockup never runs under it; under 340 px the lockup type steps down too */
@media (max-width: 374px) {
  html[data-experience] .site-header .lang-switch [aria-current="true"] { display: none; }
  html[data-experience] .site-header .lang-switch a { opacity: 1; }
  html[data-experience] .site-header .logo { overflow: hidden; }
}
@media (max-width: 340px) {
  html[data-experience] .site-header .logo .name { font-size: 11px; }
  html[data-experience] .site-header .logo .sub { font-size: 8.5px; }
  html[data-experience] body:not(.past-hero):not(.menu-open) .site-header .logo { padding: 0 10px; }
}
/* home only: hover and press answer in 0.1 s; the nav and the round buttons flip to a filled crimson pill */
html[data-experience] .site-header, html[data-experience] .site-header .logo { transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; }
html[data-experience] .nav a, html[data-experience] .lang-switch a, html[data-experience] .lang-switch span { transition: background .1s, color .1s, opacity .1s, transform .1s; }
html[data-experience] .menu-btn { transition: background .1s, color .1s, border-color .1s, transform .1s; -webkit-tap-highlight-color: transparent; }
html[data-experience] .btn { transition: transform .1s var(--ease), background .1s, color .1s, border-color .1s, box-shadow .1s; }
html[data-experience] .nav a:active, html[data-experience] .lang-switch a:active { transform: scale(.95); }
html[data-experience] .menu-btn:active { transform: scale(.92); }
@media (hover: hover) {
  html[data-experience] .nav a:not([aria-current="page"]):hover { background: var(--crimson); color: #FFFFFF; }
  html[data-experience] body .site-header.site-header :is(.menu-btn, .hdr-music:not([aria-pressed="true"])):hover { background: var(--crimson); color: #FFFFFF; border-color: var(--crimson); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-experience] :is(.site-header, .site-header .logo, .nav a, .lang-switch a, .lang-switch span, .menu-btn, .btn) { transition: none; }
  html[data-experience] :is(.nav a, .lang-switch a, .menu-btn):active { transform: none; }
}