@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,700;1,700;1,900&display=swap');


/* SCHOOL EXCURSION LIGHT THEME
   No black/dark page backgrounds.
   Sky Blue + Earthy Green + Bright Orange.
*/
:root{
  --sky-blue:#55c7f2;
  --sky-blue-soft:#e6f7fc;
  --earth-green:#6fa56a;
  --earth-green-soft:#e8f3e3;
  --adventure-orange:#ff9a3d;
  --adventure-orange-soft:#fff0df;
  --page-bg:#f7fcfd;
  --surface:#ffffff;
  --surface-soft:#f0f8f7;
  --text:#18343a;
  --text-muted:#58747a;
  --border:#cfe5e5;
}
html, body{
  background:#f7fcfd !important;
  color:var(--text);
}
/* SCHOOL EXCURSION NATURE PALETTE
   Sky Blue: trust, open sky, travel
   Earthy Green: nature, outdoors, learning
   Bright Orange: energy, adventure, highlights
*/
:root{
  --sky-blue:#55c7f2;
  --earth-green:#6fa56a;
  --adventure-orange:#ff9a3d;
}
:root{
  --bg:#f4fbfc; --bg2:#edf8f6; --surface:#eaf6f3; --surface2:#dceee9;
  --text:#eef6ff; --muted:#94a8bf; --muted2:#6f8299; --line:rgba(151,190,226,.16);
  --accent:#55c7f2; --accent2:#6fa56a; --gold:#ff9a3d; --good:#7fb069;
  --shadow:0 24px 70px rgba(0,0,0,.32); --shadow-sm:0 12px 32px rgba(0,0,0,.2);
  --ease:cubic-bezier(.22,1,.36,1); --radius:22px; --radius-sm:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;overflow-x:hidden;background:var(--bg);color:var(--text);font-family:"DM Sans",sans-serif;line-height:1.6}
a{color:inherit}
body::selection{background:rgba(115,220,255,.24);color:#fff}
::selection{background:rgba(115,220,255,.24);color:#fff}

/* ---------- global chrome ---------- */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:22px;padding:11px clamp(18px,4vw,64px);background:rgba(5,11,21,.78);border-bottom:1px solid rgba(151,190,226,.12);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 8px 35px rgba(0,0,0,.16);transition:background .25s ease,box-shadow .25s ease}
.topbar.scrolled{background:rgba(5,11,21,.92);box-shadow:0 14px 36px rgba(0,0,0,.26)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-weight:800;letter-spacing:.09em;font-size:12px;white-space:nowrap}
.brand img{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(0,0,0,.28))}
.brand b{display:block;color:var(--accent);font-size:8px;letter-spacing:.2em;margin-top:2px}
.topbar nav{display:flex;align-items:center;justify-content:flex-end;gap:5px;flex-wrap:wrap}
.topbar nav a{position:relative;text-decoration:none;color:#b8c9dc;font-size:11px;font-weight:700;padding:9px 10px;border-radius:10px;transition:color .2s ease,background .2s ease,transform .2s var(--ease)}
.topbar nav a::after{content:"";position:absolute;left:10px;right:10px;bottom:5px;height:2px;border-radius:999px;background:var(--accent);transform:scaleX(0);transform-origin:center;transition:transform .2s var(--ease)}
.topbar nav a:hover,.topbar nav a.active{color:#fff;background:rgba(115,220,255,.06);transform:translateY(-1px)}
.topbar nav a.active::after{transform:scaleX(1)}

.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:70;background:transparent;pointer-events:none}.scroll-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent2),var(--accent));box-shadow:0 0 14px rgba(115,220,255,.4)}

/* ---------- page loader ---------- */
.page-loader{position:fixed;inset:0;z-index:200;background:#f7fcfd;display:grid;place-items:center;overflow:hidden;transition:opacity .55s ease,visibility .55s ease}
.page-loader::before{content:"";position:absolute;width:58vmin;height:58vmin;border-radius:50%;background:radial-gradient(circle,rgba(115,220,255,.11),transparent 68%);transform:translateZ(0)}
.page-loader.loaded{opacity:0;visibility:hidden;pointer-events:none}
.loader-orbit{position:absolute;border:1px solid rgba(115,220,255,.2);border-radius:50%;transform:rotate(20deg);will-change:transform}.orbit-a{width:230px;height:230px}.orbit-b{width:310px;height:170px;transform:rotate(-30deg);border-color:rgba(142,128,255,.17)}
.site-loading .orbit-a{animation:orbit 4s linear infinite}.site-loading .orbit-b{animation:orbitReverse 5s linear infinite}
.loader-core{position:relative;width:84px;height:84px;border-radius:24px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#d8f0f3,#e9f5f2);border:1px solid rgba(115,220,255,.3);box-shadow:0 20px 70px rgba(0,0,0,.45)}
.loader-core img{position:absolute;width:70px;height:70px;object-fit:contain;opacity:.24}.loader-core span{position:relative;font-weight:800;letter-spacing:.14em;color:#fff;font-size:13px}
.loader-copy{position:absolute;margin-top:155px;text-align:center;display:grid;gap:4px}.loader-copy strong{font-size:12px;letter-spacing:.18em}.loader-copy span{font-size:11px;color:#7187a3}.loader-progress{position:absolute;margin-top:235px;width:min(260px,55vw);height:3px;border-radius:99px;background:#d9ece5;overflow:hidden}.loader-progress i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--accent2),var(--accent));transform:scaleX(0);transform-origin:left center}.site-loading .loader-progress i{transform:scaleX(1);transition:transform 4s linear}

/* ---------- ambient but performance-safe hero ---------- */
.hero{position:relative;min-height:calc(100vh - 68px);display:grid;grid-template-columns:minmax(250px,420px) minmax(0,1fr);align-items:center;gap:clamp(38px,6vw,92px);padding:80px clamp(24px,8vw,120px);isolation:isolate;background:radial-gradient(circle at 82% 20%,rgba(115,220,255,.09),transparent 23%),radial-gradient(circle at 55% 90%,rgba(142,128,255,.07),transparent 26%),linear-gradient(145deg,#f2fafb,#edf8f6 55%,#f2fafb)}
.hero::after{content:"";position:absolute;inset:auto -80px -160px auto;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(115,220,255,.1),transparent 65%);z-index:-1;pointer-events:none}
.hero-logo{position:relative;display:grid;place-items:center;animation:heroIn .8s var(--ease) both}.hero-logo::before{content:"";position:absolute;width:76%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(115,220,255,.15);box-shadow:0 0 80px rgba(115,220,255,.08),inset 0 0 50px rgba(142,128,255,.05)}
.hero-logo img{position:relative;width:min(100%,390px);display:block;filter:drop-shadow(0 26px 34px rgba(0,0,0,.42));transition:transform .4s var(--ease),filter .4s ease}.hero-logo:hover img{transform:translateY(-7px) scale(1.015);filter:drop-shadow(0 34px 44px rgba(0,0,0,.5))}
.hero-copy{animation:heroCopyIn .75s .08s var(--ease) both}.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:10px;font-weight:800;letter-spacing:.18em;color:var(--accent);margin-bottom:18px;padding:7px 11px;border:1px solid rgba(115,220,255,.18);border-radius:999px;background:rgba(115,220,255,.055)}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px rgba(115,220,255,.6)}
.hero h1,.section h2,.golden,.recent-heading h3,.credit-grid h3{font-family:"Playfair Display",serif;line-height:1.02;letter-spacing:-.03em}
.hero h1{font-size:clamp(52px,7vw,104px);max-width:900px;margin:0;color:#f5f9ff}.hero h1 em{font-style:italic;background:linear-gradient(90deg,#eef7ff 0%,#55c7f2 65%,#91bd8b 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{max-width:690px;font-size:17px;color:#a6b7cb;margin:28px 0 30px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.hero-note{display:flex;align-items:center;gap:7px;margin-top:30px;font-size:12px;color:#90a5bd}.hero-note strong{color:#d6e5f4}

/* ---------- premium buttons ---------- */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:12px 19px;border-radius:12px;border:1px solid transparent;text-decoration:none;font:700 12px "DM Sans",sans-serif;cursor:pointer;transition:transform .22s var(--ease),box-shadow .22s ease,background .22s ease,border-color .22s ease,color .22s ease}
.btn::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.16) 50%,transparent 75%);transform:translateX(-120%);transition:transform .55s var(--ease);pointer-events:none}.btn:hover::before{transform:translateX(120%)}
.btn:hover{transform:translateY(-2px);box-shadow:0 13px 28px rgba(0,0,0,.23)}.btn:active{transform:translateY(0) scale(.985)}
.btn.primary{color:#04111e;background:linear-gradient(135deg,#75d5f5,#36b7e8);border-color:#86e4ff;box-shadow:0 10px 28px rgba(115,220,255,.17)}.btn.primary:hover{background:linear-gradient(135deg,#b1ebfa,#70d9ff)}
.btn.ghost{color:#eaf4ff;background:rgba(255,255,255,.025);border-color:rgba(151,190,226,.24)}.btn.ghost:hover{background:rgba(115,220,255,.065);border-color:rgba(115,220,255,.34)}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.3);pointer-events:none;transform:scale(0);animation:ripple .5s ease-out both;z-index:-1}

/* ---------- stats strip ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);background:#f1faf9;border-block:1px solid var(--line)}.stats div{position:relative;padding:24px 16px;text-align:center;border-right:1px solid var(--line)}.stats div:last-child{border-right:0}.stats strong{display:block;color:#f7fbff;font-family:"Playfair Display",serif;font-size:34px;line-height:1;margin-bottom:6px}.stats span{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.15em;color:var(--muted2)}

/* ---------- sections ---------- */
.section{position:relative;padding:105px clamp(24px,8vw,120px);background:#f4fbfc}.section::before{content:"";position:absolute;left:clamp(24px,8vw,120px);right:clamp(24px,8vw,120px);top:0;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.section h2{font-size:clamp(42px,5.5vw,72px);margin:0;color:#f5f9ff}.section .lead,.section>p{max-width:760px;color:#99acc2;margin-top:18px}
.split,.register-layout,.status-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:55px;align-items:start}.register-layout{grid-template-columns:minmax(0,1fr) minmax(390px,600px)}

/* ---------- cards / forms ---------- */
.card,.registered-panel,.comrade,.teacher-card,.credit-grid>div,.comrade-total,.status-card,.callout{background:linear-gradient(145deg,rgba(13,29,49,.93),rgba(8,19,33,.96));border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.card,.status-card{border-radius:var(--radius);padding:28px}.card,.registered-panel,.status-card,.credit-grid>div,.teacher-card,.comrade{transition:transform .25s var(--ease),border-color .25s ease,box-shadow .25s ease}.card:hover,.registered-panel:hover,.status-card:hover:hover,.credit-grid>div:hover,.teacher-card:hover,.comrade:hover{transform:translateY(-3px);border-color:rgba(115,220,255,.28);box-shadow:var(--shadow)}
.form{display:grid;gap:15px}.form label,.status-card label{display:grid;gap:7px;color:#e7f1fc;font-size:11px;font-weight:800}.form input,.form select,.status-card input,.vote-form input,.vote-form select,.wide-input{width:100%;padding:13px 14px;border-radius:11px;border:1px solid rgba(151,190,226,.18);outline:none;background:#f4fafb;color:#edf5ff;font:inherit;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}.form input::placeholder,.status-card input::placeholder,.vote-form input::placeholder{color:#62788f}.form input:focus,.form select:focus,.status-card input:focus,.vote-form input:focus,.vote-form select:focus,.wide-input:focus{border-color:rgba(115,220,255,.7);box-shadow:0 0 0 3px rgba(115,220,255,.1);background:#e7f4ef}.form small{color:#70869f;font-size:10px}.pref-head{padding-top:15px;border-top:1px solid var(--line)}.mini-label{font-size:9px;letter-spacing:.15em;color:var(--accent);font-weight:800}.pref-head p{font-size:10px;color:#71859c;margin:5px 0 0}
.callout{padding:14px 16px;margin-top:22px;border-radius:14px;border-left:3px solid var(--accent);font-size:12px;color:#a7b8ca}.callout.title-nudge{display:block;text-decoration:none}.callout strong{color:#edf7ff}

/* ---------- registration boards ---------- */
.register-section{padding-top:90px}.registered-panel{padding:23px;border-radius:var(--radius);position:sticky;top:88px;max-height:630px;display:flex;flex-direction:column}.recent-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;padding-bottom:15px;border-bottom:1px solid var(--line)}.recent-heading h3{margin:0;font-size:30px;color:#f5f9ff}.live-count,.comrade-total{display:grid;place-items:center}.live-count{min-width:40px;height:40px;border-radius:12px;background:rgba(115,220,255,.11);border:1px solid rgba(115,220,255,.25);color:var(--accent);font-weight:800}.registered-note,.registered-footer,.student-meta{font-size:10px;color:#70859c}.registered-list{overflow:auto;min-height:120px;max-height:398px;padding-right:5px}.registered-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 3px;border-bottom:1px solid rgba(151,190,226,.09)}.student-name,.comrade-name{font-weight:800;font-size:12px}.student-badge,.status{font-size:8px;letter-spacing:.1em;text-transform:uppercase;padding:5px 7px;border:1px solid rgba(151,190,226,.18);border-radius:999px;color:#9eb1c7;white-space:nowrap}.empty-registered,.empty-comrades,.empty-votes{text-align:center;padding:50px 16px;border:1px dashed rgba(151,190,226,.16);border-radius:16px;color:#6f8299;font-size:12px}.empty-registered span,.empty-votes span{font-size:10px;color:#53687d}.registered-footer{padding-top:13px;margin-top:15px;border-top:1px solid var(--line);letter-spacing:.05em}

/* ---------- comrades ---------- */
.section-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:25px}.comrade-total{min-width:125px;padding:16px 20px;border-radius:18px}.comrade-total strong{display:block;font:700 42px/1 "Playfair Display",serif;color:#fff}.comrade-total span{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:#70869f}.comrades-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:40px}.comrade{display:flex;align-items:center;gap:13px;padding:17px 18px;border-radius:16px}.comrade-num{width:34px;height:34px;display:grid;place-items:center;flex:none;border-radius:11px;background:linear-gradient(135deg,#75d5f5,#36b7e8);color:#04111e;font-size:10px;font-weight:900}

/* ---------- status ---------- */
.status-section,.rules{background:linear-gradient(180deg,#edf8f6,#f1faf9)}.status-card{display:grid;gap:15px}.status-result{display:flex;gap:13px;align-items:center;min-height:74px;padding:14px;border-radius:14px;background:#dceee8;border:1px solid rgba(115,220,255,.15);color:#edf5ff}.status-result strong{font-size:13px}.status-result p{margin:3px 0 0;color:#88a0ba;font-size:10px}.status-result-icon{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:12px;background:#d3e9e5;color:var(--accent);border:1px solid rgba(115,220,255,.16);font-weight:900}.status-result-icon.pending{background:#fff0df;color:#f4cf62}.status-result-icon.verify{background:#ffecd8;color:#ffb45c}.status-result-icon.confirmed{background:#dfeeda;color:#7fb069}.status-result-icon.approved{background:#d3e9e5;color:var(--accent)}.status-legend{display:flex;flex-wrap:wrap;gap:7px;margin-top:25px}.status-legend span{display:inline-flex;padding:7px 9px;border:1px solid var(--line);border-radius:999px;font-size:9px;color:#8aa0b7;background:rgba(255,255,255,.02)}

/* ---------- title grids ---------- */
.dark{background:#f2fafb}.title-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:42px}.title-grid article{position:relative;min-height:225px;padding:22px;border-radius:17px;border:1px solid rgba(151,190,226,.14);background:linear-gradient(145deg,#e5f3ef,#edf8f6);transition:transform .23s var(--ease),border-color .23s ease,box-shadow .23s ease,background .23s ease}.title-grid article::after{content:"";position:absolute;top:0;left:18px;right:18px;height:1px;background:linear-gradient(90deg,transparent,rgba(115,220,255,.36),transparent)}.title-grid article:hover{transform:translateY(-4px);border-color:rgba(115,220,255,.3);box-shadow:0 16px 34px rgba(0,0,0,.24);background:linear-gradient(145deg,#dceee8,#edf8f6)}.title-grid span{display:block;font:700 11px/1 "DM Sans",sans-serif;color:#5e748b;letter-spacing:.1em}.title-grid h3{margin:18px 0 12px;color:#eef7ff;font-size:15px;line-height:1.22;letter-spacing:.04em}.title-grid p{margin:0;color:#7f95ab;font-size:11px;line-height:1.65}.title-grid .placeholder{border-style:dashed}
.teacher-title-grid{margin-top:28px;display:grid;gap:12px}.teacher-card{grid-template-columns:52px minmax(0,1fr) auto;align-items:center;padding:19px 20px;border-radius:16px}.teacher-icon{font-size:25px}.title-number{font-size:9px;color:#5f748a;letter-spacing:.1em}.teacher-card h3{font-family:"Playfair Display",serif;font-size:22px;margin:3px 0;color:#f2f7ff}.teacher-card p{margin:0;color:#7f95ab;font-size:11px}

/* ---------- rules + credits ---------- */
.rules{background:linear-gradient(160deg,#eaf6f3,#f1faf9)}.rule-list{max-width:900px;margin-top:42px}.rule-list p{padding:17px 0;border-bottom:1px solid var(--line);margin:0;color:#9ab0c6;font-size:12px}.rule-list b{display:inline-block;width:44px;color:var(--accent)}.golden{text-align:center;font-size:28px;color:#e8f3ff;margin-top:64px;letter-spacing:.01em}.credits{background:#f4fbfc}.credit-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:13px;margin-top:38px}.credit-grid>div{padding:26px;border-radius:17px}.credit-grid span{font-size:9px;font-weight:800;letter-spacing:.12em;color:var(--accent)}.credit-grid h3{font-size:24px;margin:12px 0;color:#eef5fd}.credit-grid p{font-size:10px;color:#748aa1}.copyright{font-size:9px;color:#5f7389;border-top:1px solid var(--line);padding-top:22px;margin-top:42px;max-width:950px}footer{display:flex;justify-content:space-between;gap:20px;padding:22px clamp(24px,8vw,120px);border-top:1px solid var(--line);color:#60758d;font-size:9px;letter-spacing:.05em}

/* ---------- modal / toast ---------- */
.modal{display:none;position:fixed;inset:0;z-index:150;align-items:center;justify-content:center;padding:20px;background:rgba(1,6,14,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.modal.open{display:flex}.modal-card{position:relative;width:min(520px,100%);padding:42px 34px;text-align:center;border-radius:26px;background:linear-gradient(145deg,#d9eeea,#081424);border:1px solid rgba(115,220,255,.2);box-shadow:0 35px 90px rgba(0,0,0,.55)}.modal.open .modal-card{animation:modalIn .45s var(--ease) both}.modal-close{position:absolute;right:12px;top:10px;width:35px;height:35px;border:0;border-radius:10px;background:transparent;color:#8aa0b7;font-size:25px;cursor:pointer;transition:background .2s ease,color .2s ease}.modal-close:hover{background:rgba(255,255,255,.05);color:#fff}.modal-mark{width:50px;height:50px;margin:0 auto 16px;border-radius:15px;display:grid;place-items:center;background:rgba(115,220,255,.13);border:1px solid rgba(115,220,255,.24);color:var(--accent);font-weight:900;font-size:22px}.modal-card h2{font-size:42px;margin:0}.registration-id{margin:20px auto;padding:17px;border:1px dashed rgba(66,145,171,.55);border-radius:14px;background:#f4fafb;color:#18343a!important;font:800 28px/1.2 monospace;letter-spacing:.1em;text-shadow:none;opacity:1}.modal-card p,.modal-card small{color:#7f95ab;font-size:10px}.copy-status{min-height:22px;font-size:10px;color:var(--accent);margin-top:7px}.toast{position:fixed;right:22px;bottom:22px;z-index:180;display:none;padding:13px 16px;border-radius:12px;background:#dceee8;border:1px solid rgba(115,220,255,.18);box-shadow:var(--shadow-sm);color:#e8f3ff;font-size:10px}.toast.show{display:block;animation:toastIn .3s var(--ease) both}

/* ---------- motion ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s var(--ease)}.reveal.is-visible{opacity:1;transform:none}.reveal[data-delay="1"]{transition-delay:.06s}.reveal[data-delay="2"]{transition-delay:.12s}.reveal[data-delay="3"]{transition-delay:.18s}
.count-bump{animation:countBump .35s var(--ease)}
@keyframes heroIn{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:none}}
@keyframes heroCopyIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes orbit{to{transform:rotate(380deg)}}@keyframes orbitReverse{to{transform:rotate(-390deg)}}
@keyframes ripple{to{transform:scale(1);opacity:0}}@keyframes modalIn{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes countBump{50%{transform:scale(1.05)}to{transform:none}}

/* ---------- responsive ---------- */

/* ---------- mobile navigation menu ---------- */
.mobile-menu-toggle{
  display:none;
  width:40px;height:40px;flex:0 0 40px;
  align-items:center;justify-content:center;flex-direction:column;gap:4px;
  border:1px solid rgba(66,191,233,.22);border-radius:12px;
  background:rgba(255,255,255,.9);color:#18343a;cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}
.mobile-menu-toggle span{display:block;width:17px;height:2px;border-radius:99px;background:currentColor;transition:transform .22s ease,opacity .22s ease}
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobile-nav-panel{
  display:none;
  position:fixed;top:69px;left:12px;right:12px;z-index:49;
  padding:10px;border:1px solid rgba(66,191,233,.18);border-radius:18px;
  background:rgba(255,255,255,.97);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 20px 50px rgba(24,52,58,.18);
  transform:translateY(-8px);opacity:0;pointer-events:none;
  transition:transform .22s ease,opacity .22s ease;
}
.mobile-nav-panel.open{transform:translateY(0);opacity:1;pointer-events:auto}
.mobile-nav-panel a{display:block;padding:12px 13px;border-radius:11px;text-decoration:none;color:#24434b;font-size:12px;font-weight:800}
.mobile-nav-panel a:hover,.mobile-nav-panel a:focus-visible{background:#eef9fb;color:#17333b;outline:none}
@media(max-width:860px){
  .topbar{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:10px;padding:9px 14px}
  .mobile-menu-toggle{display:flex}
  .mobile-nav-panel{display:block}
  .topbar .brand{min-width:0;justify-self:start}
}
@media(min-width:861px){.mobile-menu-toggle,.mobile-nav-panel{display:none !important}}

@media(max-width:1120px){.topbar nav{gap:0}.topbar nav a{padding-inline:7px}.hero{grid-template-columns:minmax(220px,320px) 1fr}.title-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.register-layout{grid-template-columns:1fr}.registered-panel{position:relative;top:auto}.comrades-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.credit-grid{grid-template-columns:1fr 1fr}.credit-grid>div:first-child{grid-column:1/-1}}
@media(max-width:860px){.topbar{align-items:flex-start}.topbar nav{display:none}.hero{grid-template-columns:1fr;text-align:center;padding-top:65px}.hero-logo img{width:min(62vw,310px)}.hero p{margin-left:auto;margin-right:auto}.hero-actions{justify-content:center}.hero-note{justify-content:center}.split,.status-layout{grid-template-columns:1fr}.section-head-row{align-items:flex-start;flex-direction:column}.title-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.credit-grid{grid-template-columns:1fr}.credit-grid>div:first-child{grid-column:auto}}
@media(max-width:600px){.topbar{padding:9px 14px}.brand{font-size:10px}.brand img{width:39px;height:39px}.hero{min-height:auto;padding:54px 20px 70px}.hero h1{font-size:50px}.hero p{font-size:14px}.section{padding:78px 20px}.section::before{left:20px;right:20px}.section h2{font-size:41px}.stats{grid-template-columns:1fr 1fr}.stats div{padding:20px 10px}.stats strong{font-size:28px}.title-grid,.comrades-grid{grid-template-columns:1fr}.teacher-card{grid-template-columns:42px 1fr}.teacher-card h3{font-size:19px}modal-card{padding:36px 20px}.modal-card h2{font-size:34px}.registration-id{font-size:22px}.footer,footer{display:block}footer span{display:block;margin-top:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.page-loader .loader-progress i{transition:none!important;transform:scaleX(1)!important}.reveal{opacity:1!important;transform:none!important}}

/* ===== PRO MOTION PACK v5.1 ===== */
:root{
  --motion-fast:.18s;
  --motion-med:.42s;
  --motion-slow:.75s;
  --glow:rgba(115,220,255,.18);
}
body{background:
  radial-gradient(900px 420px at var(--mx,50%) var(--my,8%),rgba(115,220,255,.055),transparent 62%),
  var(--bg);
  transition:background .45s ease;
}
body::before,body::after{content:"";position:fixed;inset:auto;pointer-events:none;z-index:-2}
body::before{width:46vw;height:46vw;right:-18vw;top:16vh;border-radius:50%;background:radial-gradient(circle,rgba(142,128,255,.07),transparent 67%);filter:blur(8px);animation:ambientDrift 18s ease-in-out infinite alternate}
body::after{width:38vw;height:38vw;left:-16vw;bottom:8vh;border-radius:50%;background:radial-gradient(circle,rgba(115,220,255,.055),transparent 68%);filter:blur(8px);animation:ambientDrift2 22s ease-in-out infinite alternate}
.topbar{transition:padding .35s var(--ease),background .35s ease,box-shadow .35s ease,border-color .35s ease}
.topbar.scrolled{padding-top:7px;padding-bottom:7px;border-color:rgba(115,220,255,.18)}
.topbar nav a{transition:color var(--motion-fast) ease,background var(--motion-fast) ease,transform var(--motion-fast) var(--ease),box-shadow var(--motion-fast) ease}
.topbar nav a:hover{box-shadow:0 8px 22px rgba(0,0,0,.16),inset 0 0 0 1px rgba(115,220,255,.08)}
.topbar nav a.active{box-shadow:inset 0 0 0 1px rgba(115,220,255,.09),0 8px 20px rgba(0,0,0,.12)}
.hero{overflow:hidden}
.hero::before{content:"";position:absolute;inset:-25%;background:conic-gradient(from 40deg at 70% 45%,transparent 0 28%,rgba(115,220,255,.05) 35%,transparent 43% 68%,rgba(142,128,255,.045) 75%,transparent 82%);filter:blur(24px);animation:heroAurora 16s linear infinite;z-index:-1;pointer-events:none}
.hero-logo::after{content:"";position:absolute;width:112%;aspect-ratio:1;border-radius:50%;background:conic-gradient(from 90deg,transparent,rgba(115,220,255,.18),transparent 38%,rgba(142,128,255,.16),transparent 76%);mask:radial-gradient(circle,transparent 63%,#000 64% 65%,transparent 66%);-webkit-mask:radial-gradient(circle,transparent 63%,#000 64% 65%,transparent 66%);animation:haloSpin 14s linear infinite;pointer-events:none}
.hero-copy>*{transition:transform .45s var(--ease),opacity .45s ease}
.hero-copy:hover h1{transform:translateX(3px)}
.btn{transition:transform .28s var(--ease),box-shadow .28s ease,background .28s ease,border-color .28s ease,color .28s ease,filter .28s ease}
.btn:hover{filter:saturate(1.06)}
.btn:focus-visible,.topbar nav a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid rgba(115,220,255,.75);outline-offset:3px}
.btn.primary{box-shadow:0 10px 28px rgba(115,220,255,.16),inset 0 1px 0 rgba(255,255,255,.35)}
.btn.primary:hover{box-shadow:0 18px 38px rgba(115,220,255,.22),inset 0 1px 0 rgba(255,255,255,.45)}
.btn.ghost:hover{box-shadow:0 14px 30px rgba(0,0,0,.22),inset 0 0 28px rgba(115,220,255,.045)}
.card,.registered-panel,.comrade,.teacher-card,.credit-grid>div,.callout,.status-card,.title-grid article{
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .42s var(--ease),border-color .32s ease,box-shadow .42s ease,background .42s ease;
}
.card::before,.registered-panel::before,.comrade::before,.teacher-card::before,.credit-grid>div::before::before,.callout::before,.status-card::before::before,.title-grid article::before{
  content:"";position:absolute;inset:0;background:radial-gradient(280px 140px at var(--cx,50%) var(--cy,0%),rgba(115,220,255,.08),transparent 65%);opacity:0;transition:opacity .32s ease;pointer-events:none;z-index:-1}
.card:hover,.registered-panel:hover,.comrade:hover,.teacher-card:hover,.credit-grid>div:hover:hover,.callout:hover,.status-card:hover:hover,.title-grid article:hover{transform:translateY(-6px);border-color:rgba(115,220,255,.28);box-shadow:0 22px 48px rgba(0,0,0,.28),0 0 0 1px rgba(115,220,255,.035)}
.card:hover::before,.registered-panel:hover::before,.comrade:hover::before,.teacher-card:hover::before,.credit-grid>div:hover::before:hover::before,.callout:hover::before,.status-card:hover::before:hover::before,.title-grid article:hover::before{opacity:1}
.section{background:linear-gradient(180deg,rgba(5,11,21,.98),rgba(5,11,21,.94));}
.section:nth-of-type(even)::after{content:"";position:absolute;inset:20% 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(115,220,255,.08),transparent);pointer-events:none}
.stats div{transition:background .3s ease,transform .3s var(--ease)}
.stats div:hover{background:rgba(115,220,255,.025);transform:translateY(-2px)}
.stats strong{transition:transform .3s var(--ease),text-shadow .3s ease}.stats div:hover strong{transform:translateY(-2px);text-shadow:0 0 20px rgba(115,220,255,.18)}
input,select,textarea{transition:border-color .28s ease,box-shadow .28s ease,background .28s ease,transform .28s var(--ease)}
input:hover,select:hover,textarea:hover{border-color:rgba(151,190,226,.3);background:#e3f2ed}
input:focus,select:focus,textarea:focus{transform:translateY(-1px);border-color:rgba(115,220,255,.5)!important;box-shadow:0 0 0 4px rgba(115,220,255,.07),0 12px 26px rgba(0,0,0,.18)}
.reveal{opacity:0;transform:translateY(26px) scale(.985);filter:blur(3px);transition:opacity .72s ease,transform .72s var(--ease),filter .72s ease}
.reveal.is-visible{opacity:1;transform:none;filter:none}
.reveal[data-delay="1"]{transition-delay:.08s}.reveal[data-delay="2"]{transition-delay:.16s}.reveal[data-delay="3"]{transition-delay:.24s}
.modal{opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease,backdrop-filter .35s ease}
.modal.open{display:flex;opacity:1;visibility:visible}
.modal-card{transform:translateY(26px) scale(.965);transition:transform .48s var(--ease),box-shadow .48s ease}
.modal.open .modal-card{transform:none;box-shadow:0 45px 110px rgba(0,0,0,.6),0 0 0 1px rgba(115,220,255,.05)}
.modal-close{transition:transform .24s var(--ease),background .2s ease,color .2s ease}.modal-close:hover{transform:rotate(90deg) scale(1.06)}
.toast{opacity:0;transform:translateY(15px) scale(.97);transition:opacity .3s ease,transform .42s var(--ease)}
.toast.show{display:block;opacity:1;transform:none}
.page-loader{transition:opacity .75s ease,visibility .75s ease,filter .75s ease}.page-loader.loaded{filter:blur(5px)}
.loader-core{animation:loaderPulse 2.2s ease-in-out infinite}.loader-core img{animation:logoFloat 2.8s ease-in-out infinite}
.loader-progress i{box-shadow:0 0 18px rgba(115,220,255,.35)}
.scroll-progress i{transition:width .08s linear;}
@keyframes ambientDrift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-7vw,3vh,0) scale(1.08)}}
@keyframes ambientDrift2{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(6vw,-4vh,0) scale(1.1)}}
@keyframes heroAurora{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.08)}100%{transform:rotate(360deg) scale(1)}}
@keyframes haloSpin{to{transform:rotate(360deg)}}
@keyframes loaderPulse{0%,100%{transform:scale(1);box-shadow:0 20px 70px rgba(0,0,0,.45)}50%{transform:scale(1.035);box-shadow:0 24px 82px rgba(0,0,0,.52),0 0 30px rgba(115,220,255,.08)}}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

@media(max-width:860px){
  body::before,body::after{opacity:.65}
  .hero::before{animation-duration:22s}
  .hero-logo::after{animation-duration:19s}
}
@media(prefers-reduced-motion:reduce){
  body::before,body::after,.hero::before,.hero-logo::after,.loader-core,.loader-core img{animation:none!important}
  .reveal{opacity:1!important;transform:none!important;filter:none!important}
}

/* ===== BUTTER MOTION v5.2 ===== */
:root{
  --butter:cubic-bezier(.16,1,.3,1);
  --butter-soft:cubic-bezier(.2,.75,.2,1);
  --smooth-fast:220ms;
  --smooth:520ms;
  --smooth-slow:760ms;
}
html{scroll-behavior:smooth}
body{transition:none!important}
/* Keep ambient layers isolated so they stay on their own compositing surfaces. */
body::before,body::after,.hero::before,.hero::after,.hero-logo::after{will-change:transform;contain:paint}
body::before,body::after{filter:blur(4px)}
.topbar{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:background var(--smooth) var(--butter),box-shadow var(--smooth) var(--butter),padding var(--smooth) var(--butter),border-color var(--smooth) var(--butter)}
.topbar nav a{transition:color var(--smooth-fast) var(--butter),background var(--smooth-fast) var(--butter),transform var(--smooth-fast) var(--butter),box-shadow var(--smooth-fast) var(--butter)}
.topbar nav a::after{transition:transform 360ms var(--butter)}
.btn{transition:transform 360ms var(--butter),box-shadow 420ms var(--butter),background 420ms var(--butter),border-color 360ms var(--butter),color 280ms var(--butter),filter 420ms var(--butter)}
.btn:hover{transform:translate3d(0,-3px,0)}
.btn:active{transform:translate3d(0,0,0) scale(.975);transition-duration:100ms}
.btn::before{transition:transform 800ms var(--butter)}
.card,.registered-panel,.comrade,.teacher-card,.credit-grid>div,.callout,.status-card,.title-grid article{transition:transform 600ms var(--butter),border-color 480ms var(--butter),box-shadow 600ms var(--butter),background 600ms var(--butter)}
.card:hover,.registered-panel:hover,.comrade:hover,.teacher-card:hover,.credit-grid>div:hover:hover,.callout:hover,.status-card:hover:hover,.title-grid article:hover{transform:translate3d(0,-7px,0)}
.card::before,.registered-panel::before,.comrade::before,.teacher-card::before,.credit-grid>div::before::before,.callout::before,.status-card::before::before,.title-grid article::before{transition:opacity 520ms var(--butter)}
.stats div{transition:transform 420ms var(--butter),background 420ms var(--butter)}
.stats strong{transition:transform 420ms var(--butter),text-shadow 420ms var(--butter)}
input,select,textarea{transition:transform 320ms var(--butter),border-color 360ms var(--butter),box-shadow 420ms var(--butter),background 420ms var(--butter)}
input:focus,select:focus,textarea:focus{transform:translate3d(0,-1px,0)}
.reveal{filter:none!important;transform:translate3d(0,30px,0) scale(.988);opacity:0;transition:opacity 680ms var(--butter),transform 760ms var(--butter)}
.reveal.is-visible{opacity:1;transform:translate3d(0,0,0) scale(1)}
.reveal[data-delay="1"]{transition-delay:80ms}.reveal[data-delay="2"]{transition-delay:150ms}.reveal[data-delay="3"]{transition-delay:220ms}
.modal{transition:opacity 420ms var(--butter),visibility 420ms var(--butter),backdrop-filter 420ms var(--butter)}
.modal-card{transition:transform 620ms var(--butter),box-shadow 620ms var(--butter);will-change:transform}
.modal.open .modal-card{transform:translate3d(0,0,0) scale(1)}
.modal-close{transition:transform 420ms var(--butter),background 300ms var(--butter),color 300ms var(--butter)}
.toast{transition:opacity 420ms var(--butter),transform 560ms var(--butter)}
.scroll-progress i{transition:width 80ms linear}
.hero-logo img{transition:transform 650ms var(--butter),filter 650ms var(--butter)}
.hero-logo:hover img{transform:translate3d(0,-6px,0) scale(1.012)}
/* Gentle depth without animating large blur filters. */
.hero-logo::before{transition:transform 1000ms var(--butter),box-shadow 1000ms var(--butter)}
.hero-logo:hover::before{transform:scale(1.035);box-shadow:0 0 100px rgba(115,220,255,.1),inset 0 0 60px rgba(142,128,255,.07)}
/* View transitions for same-document navigation where supported. */
@supports(view-transition-name:auto){
  ::view-transition-old(root),::view-transition-new(root){animation-duration:420ms;animation-timing-function:var(--butter)}
}
@media(max-width:860px){
  body::before,body::after{opacity:.48}
  .hero::before{animation-duration:26s}
  .hero-logo::after{animation-duration:22s}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body::before,body::after,.hero::before,.hero::after,.hero-logo::after{animation:none!important}
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
}

/* ============================================================
   V4.1-INSPIRED BUTTER MOTION — v5.3
   Smoothness concept borrowed from the reference build:
   long ease-out curves, staggered reveals, soft sheen, gentle
   lift, and restrained ambient motion. Kept transform/opacity-first.
   ============================================================ */
:root{
  --butter-ease:cubic-bezier(.16,1,.3,1);
  --butter-ease-soft:cubic-bezier(.22,1,.36,1);
  --butter-fast:.24s;
  --butter-med:.55s;
  --butter-slow:.9s;
}

/* Global micro-interactions */
.topbar{transition:padding .55s var(--butter-ease-soft),background .55s ease,box-shadow .55s ease,border-color .55s ease}
.topbar nav a{transition:color .32s ease,background .35s ease,transform .45s var(--butter-ease),box-shadow .45s ease,letter-spacing .45s ease}
.topbar nav a:hover{transform:translateY(-2px);letter-spacing:.025em}
.topbar nav a::after{transition:transform .45s var(--butter-ease)}

.scroll-progress i{transition:width .16s linear;will-change:width}

/* Hero: soft light movement instead of hard motion */
.hero{--mx:50%;--my:50%;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-24%;z-index:-1;pointer-events:none;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.08),transparent 20%),conic-gradient(from 28deg at 72% 46%,transparent 0 30%,rgba(115,220,255,.055) 38%,transparent 47% 68%,rgba(142,128,255,.045) 76%,transparent 84%);filter:blur(26px);animation:butterAurora 22s ease-in-out infinite alternate}
.hero-logo::before{transition:transform 1s var(--butter-ease),box-shadow 1s ease,border-color .8s ease}
.hero-logo:hover::before{transform:scale(1.04);box-shadow:0 0 100px rgba(115,220,255,.11),inset 0 0 60px rgba(142,128,255,.06);border-color:rgba(115,220,255,.22)}
.hero-logo img{transition:transform .7s var(--butter-ease),filter .7s ease}
.hero-logo:hover img{transform:translate3d(0,-8px,0) scale(1.012);filter:drop-shadow(0 32px 40px rgba(0,0,0,.46))}
.hero-copy>*{transition:transform .65s var(--butter-ease),opacity .65s ease}
.hero-copy:hover h1{transform:translate3d(4px,0,0)}

/* Buttons: smooth lift + sheen, no abrupt snap */
.btn{transition:transform .42s var(--butter-ease),box-shadow .48s var(--butter-ease),background .48s ease,border-color .42s ease,color .42s ease}
.btn::before{transition:transform .72s var(--butter-ease);opacity:.8}
.btn:hover{transform:translate3d(0,-3px,0);box-shadow:0 16px 34px rgba(0,0,0,.23)}
.btn:active{transform:translate3d(0,0,0) scale(.985);transition-duration:.14s}
.btn.ghost{background-image:linear-gradient(120deg,rgba(115,220,255,.03),rgba(142,128,255,.06),rgba(115,220,255,.03));background-size:220% 220%;animation:butterButtonFlow 10s ease-in-out infinite}

/* Soft surface sheen inspired by v4.1 */
.card,.registered-panel,.comrade,.teacher-card,.credit-grid>div,.callout,.status-card,.title-grid article{position:relative;overflow:hidden;isolation:isolate}
.card::after,.registered-panel::after,.status-card::after::after::after,.title-grid article::after,.teacher-card::after,.credit-grid>div::after,.callout::after,.comrade::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.075) 48%,transparent 62%);
  transform:translate3d(-145%,0,0);animation:butterSheen 11s var(--butter-ease) infinite;
  z-index:2;
}
.comrade::after{animation-delay:1.7s}.teacher-card::after{animation-delay:3.2s}.status-card::after{animation-delay:2.4s}title-grid article::after{animation-delay:1.2s}.callout::after{animation-delay:5.1s}.credit-grid>div::after{animation-delay:3.8s}

/* Butter-smooth surface lift */
.card,.registered-panel,.comrade,.teacher-card,.credit-grid>div,.callout,.status-card,.title-grid article{
  transition:transform .58s var(--butter-ease),box-shadow .58s var(--butter-ease),border-color .45s ease,background-color .5s ease;
  will-change:transform;
}
.card:hover,.registered-panel:hover,.comrade:hover,.teacher-card:hover,.credit-grid>div:hover:hover,.callout:hover,.status-card:hover:hover,.title-grid article:hover{
  transform:translate3d(0,-5px,0);
  box-shadow:0 24px 52px rgba(0,0,0,.26),0 0 0 1px rgba(115,220,255,.04);
}
.card::before,.registered-panel::before,.comrade::before,.teacher-card::before,.credit-grid>div::before::before,.callout::before,.status-card::before::before,.title-grid article::before{
  transition:opacity .5s ease,transform .7s var(--butter-ease);
}

/* Stats and form controls */
.stats div{transition:background .45s ease,transform .5s var(--butter-ease)}
.stats div:hover{transform:translate3d(0,-2px,0)}
.stats strong{transition:transform .5s var(--butter-ease),text-shadow .5s ease}
.stats div:hover strong{transform:translate3d(0,-2px,0)}
input,select,textarea{transition:transform .45s var(--butter-ease),border-color .45s ease,box-shadow .45s ease,background-color .45s ease}
input:focus,select:focus,textarea:focus{transform:translate3d(0,-2px,0)}

/* Staggered reveal — opacity + transform only for the buttery feel */
.reveal{opacity:0;transform:translate3d(0,28px,0) scale(.992);filter:none!important;transition:opacity .9s ease,transform .9s var(--butter-ease)}
.reveal.is-visible{opacity:1;transform:translate3d(0,0,0) scale(1)}
.reveal[data-delay="1"]{transition-delay:.08s}.reveal[data-delay="2"]{transition-delay:.16s}.reveal[data-delay="3"]{transition-delay:.24s}

/* Modal and toast */
.modal{transition:opacity .48s ease,visibility .48s ease}
.modal-card{transition:transform .7s var(--butter-ease),box-shadow .7s ease,opacity .5s ease}
.modal.open .modal-card{transform:none}
.modal-close{transition:transform .5s var(--butter-ease),background .35s ease,color .35s ease}
.modal-close:hover{transform:rotate(90deg) scale(1.06)}
.toast{transition:opacity .5s ease,transform .6s var(--butter-ease)}

/* Ambient motion stays deliberately slow */
body::before,body::after{animation-duration:24s!important;animation-timing-function:var(--butter-ease-soft)!important}
.ambient-orbs .orb{animation-timing-function:var(--butter-ease-soft)!important}

@keyframes butterAurora{0%,100%{transform:translate3d(-1%,0,0) rotate(0deg) scale(1)}50%{transform:translate3d(2%,-1%,0) rotate(3deg) scale(1.035)}}
@keyframes butterSheen{0%,14%{transform:translate3d(-145%,0,0)}30%,100%{transform:translate3d(145%,0,0)}}
@keyframes butterButtonFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

@media(max-width:600px){
  .hero::before{filter:blur(18px);animation-duration:28s}
  .card::after,.registered-panel::after,.status-card::after::after::after,.title-grid article::after,.teacher-card::after,.credit-grid>div::after,.callout::after,.comrade::after{animation-duration:14s;opacity:.55}
}

@media(prefers-reduced-motion:reduce){
  .hero::before,.btn.ghost,.card::after,.registered-panel::after,.status-card::after::after::after,.title-grid article::after,.teacher-card::after,.credit-grid>div::after,.callout::after,.comrade::after{animation:none!important}
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .hero-logo img,.hero-logo::before,.hero-copy>*{transition:none!important}
}

/* v5.3 marker */


/* Payment verification flow */
.upi-notice{display:flex;align-items:center;gap:12px;margin:4px 0 2px;padding:13px 14px;border:1px solid rgba(120,180,255,.16);border-radius:16px;background:rgba(80,130,210,.07)}
.upi-notice-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:rgba(255,255,255,.08);font-weight:800}
.upi-notice strong,.upi-notice span{display:block}.upi-notice span{margin-top:3px;font-size:12px;line-height:1.45;opacity:.7}
.payment-panel{margin-top:18px;padding:18px;border-radius:22px;border:1px solid rgba(120,180,255,.18);background:linear-gradient(145deg,rgba(35,55,95,.28),rgba(12,18,35,.56));box-shadow:0 20px 60px rgba(0,0,0,.18)}
.payment-panel-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.payment-panel-head h3{margin:4px 0 0;font-size:20px}.payment-badge{padding:7px 10px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.08em;background:rgba(80,150,255,.12);border:1px solid rgba(100,170,255,.18)}
.payment-help{font-size:13px;line-height:1.55;opacity:.75}.qr-wrap{display:grid;justify-items:center;gap:9px;margin:15px auto;width:max-content}.qr-wrap>div{padding:10px;border-radius:18px;background:#fff;box-shadow:0 16px 40px rgba(0,0,0,.28)}.qr-wrap canvas,.qr-wrap img{display:block;max-width:min(78vw,420px);height:auto}.qr-wrap>span{font-size:12px;opacity:.7}.qr-unconfigured{width:190px;height:190px;display:grid;place-items:center;text-align:center;color:#222;font-weight:800}.qr-unconfigured small{font-weight:500}.upi-details{display:flex;justify-content:space-between;gap:12px;padding:11px 13px;border-radius:12px;background:rgba(255,255,255,.04);font-size:12px}.upi-details strong{font-family:ui-monospace,monospace;overflow-wrap:anywhere}.utr-form{margin-top:14px}.cash-payment-panel{margin-top:18px;padding:18px;border-radius:20px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.035)}.cash-payment-panel strong,.cash-payment-panel p{display:block;margin-top:5px}.cash-payment-panel p{font-size:13px;opacity:.7;line-height:1.5}

/* v5.7 — compact registration/payment screen */
@media (max-width: 600px){
  .modal{padding:8px;align-items:center}
  .modal-card{
    width:min(100%,360px);
    max-height:calc(100vh - 16px);
    overflow-y:auto;
    padding:22px 12px 16px;
    border-radius:20px;
  }
  .modal-card h2{font-size:28px;line-height:1.08;margin:2px 0 8px}
  .modal-mark{width:38px;height:38px;margin:0 auto 8px;border-radius:12px;font-size:17px}
  .registration-id{margin:10px auto;padding:10px 8px;font-size:18px;border-radius:11px}
  .modal-card p{font-size:8px;line-height:1.35;margin:6px 0}
  .copy-status{min-height:15px;font-size:8px;margin-top:3px}
  .modal-card .btn{min-height:34px;padding:8px 14px;font-size:9px}

  .payment-panel{margin-top:10px;padding:11px;border-radius:15px}
  .payment-panel-head{gap:8px;align-items:center}
  .payment-panel-head h3{font-size:14px;line-height:1.35;margin:2px 0 0}
  .payment-badge{padding:5px 7px;font-size:8px}
  .payment-help{font-size:8px;line-height:1.35;margin:6px 0}
  .qr-wrap{gap:5px;margin:8px auto}
  .qr-wrap>div{padding:7px;border-radius:12px}
  .qr-wrap canvas,.qr-wrap img{width:210px!important;height:210px!important;max-width:210px!important}
  .qr-wrap>span{font-size:8px}
  .upi-details{padding:7px 9px;border-radius:9px;font-size:8px;gap:7px}
  .upi-details strong{font-size:8px}
  .utr-form{margin-top:8px}
  .utr-form label{font-size:8px}
  .utr-form input{height:32px;padding:7px 9px;font-size:9px}
  .utr-form .btn{margin-top:6px}
  .cash-payment-panel{margin-top:10px;padding:11px;border-radius:14px}
  .cash-payment-panel p{font-size:8px;line-height:1.35}
  .modal-card>small{display:block;margin-top:7px;font-size:7px;line-height:1.3}
}

/* v5.8 — true one-screen payment modal + compact organiser QR */
.modal{padding:10px;overflow:hidden}
.modal-card{
  width:min(560px,calc(100vw - 20px));
  max-height:calc(100vh - 20px);
  overflow:hidden;
  padding:22px 24px 16px;
}
.modal-mark{width:38px;height:38px;margin:0 auto 7px;border-radius:11px;font-size:17px}
.modal-card h2{font-size:30px;line-height:1.05;margin:1px 0 7px}
.registration-id{margin:9px auto;padding:9px 10px;font-size:20px;border-radius:11px}
.modal-card>p{font-size:8px;line-height:1.25;margin:5px 0}
.modal-card>.btn{min-height:32px;padding:7px 13px;font-size:9px}
.copy-status{min-height:14px;font-size:8px;margin-top:2px}
.payment-panel{margin-top:8px;padding:12px;border-radius:16px}
.payment-panel-head{gap:10px;align-items:center}
.payment-panel-head h3{font-size:16px;line-height:1.2;margin:2px 0 0}
.payment-badge{padding:5px 8px;font-size:8px}
.payment-help{font-size:8px;line-height:1.25;margin:5px 0}
.qr-wrap{gap:4px;margin:6px auto}
.qr-wrap>div{padding:5px;border-radius:11px;box-shadow:0 8px 22px rgba(0,0,0,.22)}
.qr-wrap canvas,.qr-wrap img{width:178px!important;height:178px!important;max-width:178px!important}
.qr-wrap>span{font-size:8px}
.upi-details{padding:7px 9px;border-radius:8px;font-size:8px;line-height:1.1}
.upi-details strong{font-size:8px}
.utr-form{margin-top:7px}
.utr-form label{font-size:8px}
.utr-form input{height:30px;padding:6px 8px;font-size:9px}
.utr-form .btn{margin-top:5px;min-height:31px;padding:7px 12px;font-size:8px}
.modal-card>small{display:block;margin-top:5px;font-size:7px;line-height:1.2}

@media(max-width:600px){
  .modal{padding:6px}
  .modal-card{width:min(360px,calc(100vw - 12px));max-height:calc(100vh - 12px);padding:16px 10px 11px;border-radius:18px}
  .modal-card h2{font-size:25px;margin:1px 0 6px}
  .registration-id{margin:7px auto;padding:8px;font-size:17px}
  .payment-panel{margin-top:7px;padding:9px;border-radius:14px}
  .payment-panel-head h3{font-size:13px}
  .payment-help{font-size:7px;margin:4px 0;line-height:1.2}
  .qr-wrap{margin:5px auto;gap:3px}
  .qr-wrap>div{padding:4px;border-radius:9px}
  .qr-wrap canvas,.qr-wrap img{width:150px!important;height:150px!important;max-width:150px!important}
  .upi-details{padding:6px 8px;font-size:7px}
  .upi-details strong{font-size:7px}
  .utr-form{margin-top:5px}
  .utr-form label{font-size:7px}
  .utr-form input{height:28px;font-size:8px}
  .utr-form .btn{min-height:29px;font-size:7px;margin-top:4px}
  .modal-card>small{font-size:6px;margin-top:4px}
}
.registration-id.pending-generation{font-size:18px;letter-spacing:.06em;color:#8fa8bd;border-style:dashed}


/* Email OTP verification */
.email-verification-block{display:grid;gap:10px;padding:16px;border:1px solid rgba(127,127,127,.18);border-radius:18px;background:rgba(127,127,127,.045)}
.email-otp-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.email-otp-row .btn{margin:0}
.otp-step{display:grid;gap:10px}
.otp-step[hidden]{display:none}
.otp-timer{font-size:.82rem;opacity:.72}
#emailVerificationMsg.verified{font-weight:700}
.email-verification-block input:focus{box-shadow:0 0 0 3px rgba(120,180,255,.12)}
.email-verified-state{display:flex;align-items:center;gap:12px;padding:13px 15px;border:1px solid rgba(101,230,162,.24);border-radius:15px;background:linear-gradient(135deg,rgba(101,230,162,.08),rgba(101,230,162,.025));animation:emailVerifiedIn .42s var(--butter) both}.email-verified-state[hidden],#emailOtpControls[hidden]{display:none!important}
.email-verified-icon{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:50%;background:rgba(101,230,162,.16);border:1px solid rgba(101,230,162,.35);color:#8ff0bc;font-weight:900;box-shadow:0 0 18px rgba(101,230,162,.12)}
.email-verified-state strong{display:block;color:#dfffee;font-size:10px;line-height:1.3;letter-spacing:.02em}
.email-verified-state span:last-child{display:block;margin-top:3px;color:#779a88;font-size:8px;line-height:1.4}
.email-verification-block input[readonly]{cursor:not-allowed;opacity:.88;border-color:rgba(101,230,162,.2);background:rgba(101,230,162,.025)}
@keyframes emailVerifiedIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}

/* v6.3 — private participant accounts + email OTP login */
.nav-login-btn{margin-left:5px;border:1px solid rgba(115,220,255,.24);background:rgba(115,220,255,.08);color:#e2f7fb;border-radius:999px;padding:9px 14px;font:700 9px/1.1 inherit;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:transform .36s var(--butter),background .42s var(--butter),border-color .36s var(--butter),box-shadow .42s var(--butter)}
.nav-login-btn:hover{transform:translateY(-2px);background:rgba(115,220,255,.13);border-color:rgba(115,220,255,.4);box-shadow:0 10px 26px rgba(0,0,0,.18)}
.nav-login-btn.logged-in{background:rgba(120,245,186,.08);border-color:rgba(120,245,186,.26);color:#c7ffe2}
.profile-lock{width:60px;height:60px;margin:0 auto 16px;display:grid;place-items:center;border-radius:18px;background:rgba(115,220,255,.09);border:1px solid rgba(115,220,255,.18);font-size:24px}
#loggedOutProfile>strong{display:block;font-size:19px;color:#eef7ff;margin-bottom:6px}.status-card #loggedOutProfile>p{max-width:380px;margin:8px auto 18px}
.profile-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}.profile-header h3{margin:5px 0 0;font-size:31px;color:#f7fbff}
.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.profile-grid>div{padding:14px;border:1px solid rgba(151,190,226,.1);border-radius:14px;background:rgba(151,190,226,.035)}.profile-grid span{display:block;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:#6f839a;margin-bottom:5px}.profile-grid strong{display:block;color:#eff8ff;font-size:12px;line-height:1.35;word-break:break-word}
.private-vote-note{padding:11px 13px;margin:12px 0 15px;border:1px solid rgba(115,220,255,.12);border-radius:12px;background:rgba(115,220,255,.045);font-size:9px;line-height:1.5;color:#8398ad}.login-form{display:grid;gap:11px;text-align:left;margin-top:20px}.login-form .email-otp-row{display:flex;align-items:center;gap:10px}.login-form .email-otp-row .btn{flex:none}.login-modal-card>p{max-width:430px;margin:0 auto}.login-modal-card .copy-status{text-align:center}
@media(max-width:860px){.nav-login-btn{display:none}.profile-grid{grid-template-columns:1fr}.profile-header{align-items:center}.profile-header h3{font-size:25px}}
@media(max-width:600px){.login-form .email-otp-row{flex-direction:column;align-items:stretch}.login-form .email-otp-row .btn{width:100%}.profile-grid{grid-template-columns:1fr}.profile-header .btn{padding:8px 11px}}

/* v6.4 — compact private profile trigger + profile modal */
.profile-trigger{position:relative;display:inline-flex;align-items:center;gap:8px;flex:none;border:1px solid rgba(115,220,255,.2);background:rgba(115,220,255,.06);color:#e2f7fb;border-radius:999px;padding:7px 10px 7px 7px;cursor:pointer;font:700 9px/1 inherit;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 8px 24px rgba(0,0,0,.12);transition:transform .45s var(--butter),background .4s var(--butter),border-color .4s var(--butter),box-shadow .45s var(--butter)}
.profile-trigger:hover{transform:translateY(-2px) scale(1.02);background:rgba(115,220,255,.11);border-color:rgba(115,220,255,.38);box-shadow:0 14px 30px rgba(0,0,0,.2),0 0 28px rgba(115,220,255,.07)}
.profile-trigger.logged-in{background:rgba(101,230,162,.075);border-color:rgba(101,230,162,.28);color:#d8ffe8}
.profile-trigger-icon{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#d1e8e5,#e6f3ef);border:1px solid rgba(115,220,255,.2);box-shadow:inset 0 0 0 4px rgba(255,255,255,.025)}
.profile-trigger-icon svg{width:17px;height:17px}.profile-online-dot{position:absolute;right:6px;bottom:5px;width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px #081525,0 0 12px rgba(101,230,162,.75);animation:profilePulse 2.3s ease-in-out infinite}.profile-online-dot[hidden]{display:none}
.profile-modal-card{width:min(690px,100%);text-align:left;padding:30px}.profile-modal-top{display:flex;align-items:center;gap:18px;margin-bottom:22px;padding:2px 4px}.profile-avatar{width:64px;height:64px;flex:none;display:grid;place-items:center;border-radius:20px;color:var(--accent);background:linear-gradient(145deg,rgba(115,220,255,.16),rgba(142,128,255,.12));border:1px solid rgba(115,220,255,.23);box-shadow:0 16px 35px rgba(0,0,0,.25)}.profile-avatar svg{width:32px;height:32px}.profile-modal-top h2{font-size:36px;line-height:1.05;margin:4px 0 2px}.profile-modal-top p{margin:0;color:#7f95ab;font-size:10px;line-height:1.5}.profile-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.profile-detail-grid>div{padding:14px 15px;border:1px solid rgba(151,190,226,.1);border-radius:14px;background:linear-gradient(145deg,rgba(151,190,226,.045),rgba(151,190,226,.02));min-width:0}.profile-detail-grid span{display:block;margin-bottom:6px;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:#6f839a}.profile-detail-grid strong{display:block;color:#eff8ff;font-size:11px;line-height:1.4;word-break:break-word}.profile-detail-highlight{grid-column:1/-1;background:linear-gradient(135deg,rgba(115,220,255,.08),rgba(142,128,255,.06))!important;border-color:rgba(115,220,255,.2)!important}.profile-detail-highlight strong{font:800 20px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em;color:#e8f8fa}.profile-modal-actions{display:flex;justify-content:flex-end;margin-top:17px}.profile-modal-actions .btn{min-width:100px}
@keyframes profilePulse{50%{transform:scale(.78);opacity:.72}to{transform:scale(1);opacity:1}}
@media(max-width:860px){.profile-trigger{margin-left:auto}.profile-trigger #profileTriggerLabel{display:none}.profile-trigger{padding:6px}.profile-trigger-icon{width:34px;height:34px}.profile-modal-card{padding:24px 18px}.profile-detail-grid{grid-template-columns:1fr}.profile-detail-highlight{grid-column:auto}.profile-modal-top h2{font-size:30px}}
@media(max-width:560px){.profile-modal-top{align-items:flex-start;gap:12px}.profile-avatar{width:52px;height:52px;border-radius:16px}.profile-avatar svg{width:26px;height:26px}.profile-modal-top h2{font-size:27px}.profile-detail-highlight strong{font-size:16px}.profile-modal-card{max-height:calc(100vh - 24px);overflow:auto}}


/* v6.5 — premium secure login experience */
.login-modal-card{width:min(900px,calc(100vw - 30px));padding:0;overflow:hidden;text-align:left;background:#edf8f6;border:1px solid rgba(129,203,255,.18);box-shadow:0 48px 120px rgba(0,0,0,.62),0 0 0 1px rgba(129,203,255,.04);border-radius:28px}
.login-modal-card .modal-close{z-index:4;right:14px;top:14px;width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.045);backdrop-filter:blur(10px);font-size:24px;color:#a9bfd2}
.login-shell{display:grid;grid-template-columns:36% 64%;min-height:530px}
.login-rail{position:relative;overflow:hidden;padding:38px 34px;background:radial-gradient(circle at 20% 10%,rgba(89,195,255,.18),transparent 34%),linear-gradient(160deg,#d5edf0 0%,#0a1a2c 58%,#081321 100%);border-right:1px solid rgba(129,203,255,.12)}
.login-rail::after{content:"";position:absolute;inset:auto -60px -80px auto;width:230px;height:230px;border-radius:50%;border:1px solid rgba(129,203,255,.12);box-shadow:0 0 0 28px rgba(129,203,255,.028),0 0 0 58px rgba(129,203,255,.02)}
.login-brand-mark{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:rgba(5,15,27,.34);border:1px solid rgba(151,222,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 14px 34px rgba(0,0,0,.22);margin-bottom:23px}
.login-brand-mark img{width:40px;height:40px;object-fit:contain}
.login-rail-kicker{display:block;color:#74d8ff;font-size:8px;letter-spacing:.18em;font-weight:800}
.login-rail h3{font-size:31px;line-height:1.06;color:#f3f9ff;margin:18px 0 10px;letter-spacing:-.025em}
.login-rail h3 em{color:#70d9ff;font-style:normal}
.login-rail>p{max-width:250px;margin:0;color:#86a0b6;font-size:10px;line-height:1.65}
.login-trust-list{display:grid;gap:11px;margin-top:34px;font-size:9px;color:#b9cedf}
.login-trust-list span{display:flex;align-items:center;gap:9px}
.login-trust-list i{width:20px;height:20px;border-radius:7px;display:grid;place-items:center;background:rgba(102,226,178,.09);border:1px solid rgba(102,226,178,.18);color:#76e8b7;font-style:normal;font-size:10px}
.login-panel{padding:46px 48px 34px;background:linear-gradient(180deg,rgba(13,29,46,.98),rgba(8,18,31,.98))}
.login-panel-head{padding-right:25px}
.login-kicker{display:inline-flex;align-items:center;gap:8px;color:#71d8ff;font-size:9px;font-weight:800;letter-spacing:.14em}
.login-kicker i{width:6px;height:6px;border-radius:50%;background:#76dcff;box-shadow:0 0 14px rgba(118,220,255,.7)}
.login-panel h2{font-size:42px;line-height:1;margin:14px 0 10px;letter-spacing:-.04em;color:#f6fbff}
.login-panel-head p{max-width:490px;margin:0;color:#8198ad;font-size:10px;line-height:1.65}
.login-steps{position:relative;display:flex;align-items:center;gap:8px;margin:30px 0 24px;color:#61778c;font-size:8px;font-weight:800;letter-spacing:.14em}
.login-steps span{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(137,181,211,.16);background:rgba(255,255,255,.025)}
.login-steps span.active{color:#071a1d;border-color:#77dcff;background:#77dcff;box-shadow:0 0 18px rgba(119,220,255,.2)}
.login-steps b{width:34px;height:1px;background:linear-gradient(90deg,rgba(119,220,255,.45),rgba(119,220,255,.08))}
.login-steps em{font-style:normal;margin-left:2px;color:#62798d}
.login-steps strong{color:#88dfff;font-weight:700;margin:0 3px}
.login-form{display:grid;gap:14px;text-align:left;margin-top:0}
.login-field{display:grid;gap:8px}
.login-field>span{font-size:9px;text-transform:uppercase;letter-spacing:.11em;color:#a8bdd0;font-weight:800}
.login-input-wrap{height:54px;position:relative;display:flex;align-items:center;border-radius:15px;border:1px solid rgba(138,184,214,.15);background:rgba(255,255,255,.035);transition:border-color .35s var(--butter),box-shadow .35s var(--butter),background .35s var(--butter),transform .35s var(--butter)}
.login-input-wrap:focus-within{border-color:rgba(112,216,255,.58);background:rgba(112,216,255,.045);box-shadow:0 0 0 4px rgba(112,216,255,.065),0 14px 34px rgba(0,0,0,.16)}
.login-input-wrap svg{width:18px;height:18px;margin-left:16px;color:#6e8aa0;flex:none}
.login-input-wrap:focus-within svg{color:#72dcff}
.login-input-wrap input{width:100%;height:100%;border:0;outline:0;background:transparent;color:#f0f7fd;font:600 13px/1 inherit;padding:0 16px 0 11px}
.login-input-wrap input::placeholder{color:#5f7489}
.login-send-row{display:flex;align-items:center;gap:12px}
.login-send-btn,.verify-login-btn{min-height:52px;border-radius:15px;flex:1;display:flex;align-items:center;justify-content:space-between;padding:0 17px;font-size:10px;letter-spacing:.04em}
.login-send-btn b,.verify-login-btn b{font-size:19px;font-weight:500;transition:transform .3s var(--butter)}
.login-send-btn:hover b,.verify-login-btn:hover b{transform:translateX(4px)}
.login-send-row .otp-timer{min-width:88px;text-align:right;color:#71879b;font-size:9px}
.login-security-note{display:flex;align-items:center;gap:9px;padding:11px 13px;border-radius:12px;border:1px solid rgba(126,166,194,.1);background:rgba(126,166,194,.028);color:#6d8498;font-size:8px;line-height:1.5}
.login-security-note i{width:17px;height:17px;border-radius:6px;display:grid;place-items:center;flex:none;background:rgba(111,216,255,.08);border:1px solid rgba(111,216,255,.13);color:#77dcff;font-style:normal}
.login-otp-step{gap:12px;padding-top:4px;animation:loginStepIn .5s var(--butter) both}
.otp-input-wrap input{text-align:left;letter-spacing:.32em;font-size:15px;font-variant-numeric:tabular-nums}
.login-panel .copy-status{min-height:18px;font-size:9px;line-height:1.45;color:#79dfff;text-align:left;margin-top:2px}
.login-panel-foot{display:flex;align-items:flex-start;gap:9px;margin-top:24px;padding-top:18px;border-top:1px solid rgba(138,184,214,.09);color:#5f7589;font-size:8px;line-height:1.5}
.shield-mini{width:19px;height:19px;border-radius:7px;display:grid;place-items:center;flex:none;background:rgba(102,226,178,.07);border:1px solid rgba(102,226,178,.13);color:#71d7ac}
@keyframes loginStepIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:760px){.login-shell{grid-template-columns:1fr}.login-rail{display:none}.login-panel{padding:36px 24px 24px}.login-panel h2{font-size:35px}.login-modal-card{width:min(520px,calc(100vw - 18px));border-radius:23px}.login-send-row{flex-direction:column;align-items:stretch}.login-send-row .otp-timer{text-align:left;min-width:0;padding-left:2px}.login-panel-foot{margin-top:18px}}
@media(max-width:430px){.login-panel{padding:31px 18px 20px}.login-panel h2{font-size:31px}.login-panel-head p{font-size:9px}.login-steps{margin:24px 0 20px}.login-input-wrap{height:50px}.login-send-btn,.verify-login-btn{min-height:49px}.login-modal-card .modal-close{top:9px;right:9px;width:34px;height:34px}}
.payment-proof-card{margin-top:16px;padding:16px 17px;border-radius:18px;border:1px solid rgba(114,220,255,.14);background:linear-gradient(135deg,rgba(82,160,208,.08),rgba(255,255,255,.025));display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,340px);gap:16px;align-items:center;box-shadow:0 16px 38px rgba(0,0,0,.14)}
.payment-proof-copy{min-width:0}.payment-proof-copy h4{margin:5px 0 5px;font-size:16px;letter-spacing:-.01em}.payment-proof-copy p{margin:0;color:#7790a5;font-size:11px;line-height:1.55}
.payment-upload-btn{width:100%;min-height:66px;display:grid;grid-template-columns:42px minmax(0,1fr) 18px;align-items:center;gap:12px;padding:11px 13px;text-align:left;border:1px solid rgba(112,216,255,.18);border-radius:15px;background:rgba(6,21,37,.72);color:#edf6fc;cursor:pointer;transition:transform .28s cubic-bezier(.2,.7,.2,1),border-color .28s ease,background .28s ease,box-shadow .28s ease}.payment-upload-btn:hover{transform:translateY(-2px);border-color:rgba(112,216,255,.38);background:rgba(10,29,48,.9);box-shadow:0 12px 26px rgba(0,0,0,.2)}.payment-upload-btn:focus-visible{outline:0;box-shadow:0 0 0 4px rgba(112,216,255,.08),0 12px 26px rgba(0,0,0,.2)}.payment-upload-btn:disabled{opacity:.62;cursor:wait;transform:none}.payment-upload-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(112,216,255,.14),rgba(112,216,255,.05));border:1px solid rgba(112,216,255,.18);color:#71dfff}.payment-upload-icon svg{width:19px;height:19px}.payment-upload-btn span:nth-child(2){min-width:0;display:grid;gap:3px}.payment-upload-btn strong{font-size:11px;letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.payment-upload-btn small{font-size:9px;color:#70879a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.payment-upload-btn>b{font-size:17px;color:#6fddff;font-weight:500;transition:transform .25s ease}.payment-upload-btn:hover>b{transform:translateX(3px)}.payment-proof-status{margin-top:9px;padding:9px 12px;border-radius:11px;border:1px solid rgba(102,226,178,.16);background:rgba(102,226,178,.045);color:#86dbbb;font-size:10px;line-height:1.45}.payment-proof-status[hidden]{display:none}
@media(max-width:760px){.payment-proof-card{grid-template-columns:1fr;gap:11px;padding:13px;border-radius:15px}.payment-proof-copy h4{font-size:14px}.payment-proof-copy p{font-size:9px}.payment-upload-btn{min-height:58px}}


/* =========================================================
   PBR PRO SCHOOL EXCURSION THEME v6.5.18
   Bright, welcoming, premium — NO BLACK PAGE BACKGROUNDS.
   Palette: Sky Blue + Earthy Green + Bright Orange + White.
   ========================================================= */
:root{
  --bg:#f5fbfd !important;
  --bg2:#eef8f5 !important;
  --surface:#ffffff !important;
  --surface2:#e9f5f3 !important;
  --text:#17333b !important;
  --muted:#5f7b82 !important;
  --muted2:#78939a !important;
  --line:rgba(48,121,132,.14) !important;
  --accent:#39b9e8 !important;
  --accent2:#6f9f62 !important;
  --gold:#ff8f32 !important;
  --good:#69a65e !important;
  --shadow:0 24px 70px rgba(42,91,101,.12) !important;
  --shadow-sm:0 12px 32px rgba(42,91,101,.09) !important;
}
html,body{background:#f5fbfd !important;color:#17333b !important}
body{background:
 radial-gradient(circle at 8% 12%,rgba(83,199,242,.13),transparent 25%),
 radial-gradient(circle at 92% 26%,rgba(111,159,98,.11),transparent 24%),
 linear-gradient(180deg,#f9fdfe 0%,#f2faf8 48%,#f8fcfb 100%) !important;}
body::before{background:radial-gradient(circle,rgba(57,185,232,.10),transparent 67%) !important}
body::after{background:radial-gradient(circle,rgba(111,159,98,.09),transparent 68%) !important}
::selection{background:rgba(57,185,232,.24) !important;color:#17333b !important}

/* Header */
.topbar{background:rgba(255,255,255,.90) !important;border-bottom:1px solid rgba(54,128,140,.14) !important;box-shadow:0 8px 30px rgba(43,91,100,.08) !important;backdrop-filter:blur(20px) saturate(1.15) !important;-webkit-backdrop-filter:blur(20px) saturate(1.15) !important}
.topbar.scrolled{background:rgba(255,255,255,.96) !important;box-shadow:0 14px 38px rgba(43,91,100,.11) !important}
.brand span{color:#17333b !important}.brand b{color:#24a8d8 !important}
.topbar nav a{color:#48656c !important}.topbar nav a:hover,.topbar nav a.active{color:#17333b !important;background:rgba(57,185,232,.09) !important}
.profile-trigger{background:rgba(255,255,255,.88) !important;border-color:rgba(57,185,232,.24) !important;color:#17333b !important;box-shadow:0 8px 22px rgba(42,91,101,.08) !important}
.profile-trigger:hover{background:#fff !important;border-color:rgba(57,185,232,.42) !important;box-shadow:0 12px 28px rgba(42,91,101,.13) !important}
.profile-trigger-icon{background:#e5f6fa !important;color:#299fc9 !important}

/* Hero */
.hero{min-height:calc(100vh - 68px) !important;background:
 radial-gradient(circle at 18% 48%,rgba(57,185,232,.16),transparent 31%),
 radial-gradient(circle at 82% 22%,rgba(111,159,98,.12),transparent 29%),
 linear-gradient(135deg,#fafdff 0%,#edf9fc 52%,#f2faf4 100%) !important}
.hero::before{background:conic-gradient(from 40deg at 70% 45%,transparent 0 28%,rgba(57,185,232,.07) 35%,transparent 43% 68%,rgba(111,159,98,.065) 75%,transparent 82%) !important}
.hero::after{background:radial-gradient(circle,rgba(57,185,232,.13),transparent 65%) !important}
.hero-logo{filter:drop-shadow(0 25px 35px rgba(45,89,99,.18)) !important}
.hero-logo::after{background:conic-gradient(from 90deg,transparent,rgba(57,185,232,.22),transparent 38%,rgba(111,159,98,.18),transparent 76%) !important}
.hero h1{color:#17333b !important;text-shadow:none !important}
.hero h1 em{background:linear-gradient(90deg,#249fce 0%,#39b9e8 48%,#6f9f62 100%) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important}
.hero-copy>p{color:#5c777e !important}.hero-note{color:#658188 !important}
.eyebrow{color:#159bc9 !important;background:rgba(57,185,232,.055) !important;border-color:rgba(57,185,232,.20) !important}.eyebrow::before{background:#39b9e8 !important;box-shadow:0 0 12px rgba(57,185,232,.34) !important}

/* Buttons */
.btn.primary{color:#fff !important;background:linear-gradient(135deg,#2fb8e7,#159bd0) !important;border-color:#42c4ed !important;box-shadow:0 12px 30px rgba(37,169,211,.22) !important}
.btn.primary:hover{background:linear-gradient(135deg,#48c8ef,#1aa5d7) !important;box-shadow:0 16px 34px rgba(37,169,211,.27) !important}
.btn.ghost{color:#28545e !important;background:rgba(255,255,255,.75) !important;border-color:rgba(60,132,143,.18) !important;box-shadow:0 8px 22px rgba(42,91,101,.06) !important}
.btn.ghost:hover{background:#fff !important;border-color:rgba(57,185,232,.35) !important}
.btn.secondary{color:#fff !important;background:linear-gradient(135deg,#ff963b,#f47f22) !important;border-color:#ffab60 !important;box-shadow:0 10px 24px rgba(245,135,48,.18) !important}

/* Stats */
.stats{background:rgba(255,255,255,.86) !important;border-block:1px solid rgba(48,121,132,.10) !important;box-shadow:0 12px 35px rgba(42,91,101,.05) !important}
.stats div{border-right-color:rgba(48,121,132,.10) !important}.stats strong{color:#1a4751 !important}.stats span{color:#789198 !important}

/* Sections */
.section,.dark{background:linear-gradient(180deg,#f8fcfd 0%,#eef8f5 100%) !important;color:#17333b !important}
.section:nth-of-type(even){background:linear-gradient(180deg,#f1fafc 0%,#f7fbf5 100%) !important}
.section::before{background:linear-gradient(90deg,transparent,rgba(57,185,232,.18),transparent) !important}
.section h2,.section h3{color:#17333b !important;text-shadow:none !important}.section .lead,.section>p{color:#607b82 !important}

/* Cards / glass */
.card,.registered-panel,.comrade,.teacher-card,.credit-grid>div,.comrade-total,.status-card,.callout{background:rgba(255,255,255,.88) !important;border:1px solid rgba(57,132,143,.14) !important;box-shadow:0 18px 48px rgba(42,91,101,.09) !important;color:#24434b !important;backdrop-filter:blur(12px) !important;-webkit-backdrop-filter:blur(12px) !important}
.card:hover,.registered-panel:hover,.comrade:hover,.teacher-card:hover{box-shadow:0 24px 58px rgba(42,91,101,.12) !important}
.callout{color:#607980 !important;border-left-color:#39b9e8 !important}.callout strong{color:#214c56 !important}
.form label,.status-card label{color:#31535c !important}
.form input,.form select,.status-card input,.vote-form input,.vote-form select,.wide-input{background:#fff !important;color:#17333b !important;border-color:rgba(63,130,141,.17) !important;box-shadow:0 5px 16px rgba(42,91,101,.04) !important}
.form input::placeholder,.status-card input::placeholder{color:#8ba0a5 !important}
.form input:focus,.form select:focus,.status-card input:focus,.vote-form input:focus,.vote-form select:focus,.wide-input:focus{background:#fff !important;border-color:rgba(57,185,232,.55) !important;box-shadow:0 0 0 4px rgba(57,185,232,.10),0 12px 28px rgba(42,91,101,.08) !important}
.pref-head p,.registered-note,.copy-status{color:#71888e !important}
.mini-label{color:#159bc9 !important}
.live-count,.comrade-total strong{color:#1a9fcf !important}

/* Title / award cards */
.title-grid article,.teacher-title-grid article{background:linear-gradient(145deg,#fff,#f0f8f6) !important;border-color:rgba(62,132,143,.13) !important;box-shadow:0 12px 32px rgba(42,91,101,.07) !important;color:#24434b !important}
.title-grid article:hover,.teacher-title-grid article:hover{border-color:rgba(57,185,232,.30) !important;transform:translateY(-5px) !important;box-shadow:0 22px 42px rgba(42,91,101,.12) !important}
.title-grid article strong,.teacher-title-grid article strong{color:#214c56 !important}.title-grid article p,.teacher-title-grid article p{color:#6a858c !important}

/* Nature accent section */
#teacher-awards{background:linear-gradient(145deg,#f8fcf7,#eaf5e8) !important}
#teacher-awards .eyebrow{color:#5d8d51 !important;background:rgba(111,159,98,.08) !important;border-color:rgba(111,159,98,.20) !important}
#teacher-awards .eyebrow::before{background:#6f9f62 !important;box-shadow:0 0 12px rgba(111,159,98,.28) !important}

/* Orange adventure accents */
.upi-notice{background:linear-gradient(135deg,#fff7ee,#fff1e4) !important;border-color:rgba(255,143,50,.24) !important;color:#70451f !important}.upi-notice-icon{background:#ff9134 !important;color:#fff !important}
.email-verified-state{background:#eef8ec !important;border-color:rgba(105,166,94,.20) !important;color:#47713f !important}

/* Modal / login */
.modal{background:rgba(230,244,246,.76) !important}
.login-modal-card{background:#fff !important;border:1px solid rgba(53,126,138,.18) !important;box-shadow:0 35px 100px rgba(39,85,95,.20) !important}
.login-rail{background:linear-gradient(160deg,#e7f8fc 0%,#dff2ec 58%,#edf7e9 100%) !important;border-right:1px solid rgba(57,132,143,.12) !important}
.login-rail h3,.login-panel h2{color:#17333b !important}.login-rail>p,.login-panel-head p{color:#607b82 !important}.login-trust-list{color:#48676e !important}
.login-panel{background:#fff !important}.login-kicker{color:#159bc9 !important}.login-input-wrap{background:#f8fcfd !important;border-color:rgba(63,130,141,.17) !important}.login-input-wrap input{color:#17333b !important}.login-input-wrap input::placeholder{color:#8ba0a5 !important}
.login-security-note{background:#f4faf8 !important;border-color:rgba(63,130,141,.12) !important;color:#6a858b !important}.login-panel-foot{border-top-color:rgba(63,130,141,.12) !important;color:#71878d !important}
.login-steps span{background:#f3f9f9 !important;color:#6c858b !important;border-color:rgba(63,130,141,.16) !important}.login-steps span.active{background:#39b9e8 !important;border-color:#39b9e8 !important;color:#fff !important}.login-steps b{background:linear-gradient(90deg,rgba(57,185,232,.45),rgba(57,185,232,.10)) !important}

/* Payment proof */
.payment-proof-card{background:linear-gradient(135deg,#f2fbfd,#f2f8ef) !important;border-color:rgba(57,132,143,.14) !important;box-shadow:0 16px 38px rgba(42,91,101,.08) !important}.payment-upload-btn{background:#fff !important;color:#24434b !important;border-color:rgba(57,185,232,.20) !important}.payment-upload-btn:hover{background:#f5fcfd !important}.payment-upload-icon{background:#e6f7fb !important;color:#159bc9 !important}

/* Loader */
.page-loader{background:linear-gradient(135deg,#fafdff,#edf9f5) !important;color:#17333b !important}.loader-core{background:linear-gradient(145deg,#e7f8fc,#eaf5e8) !important;border-color:rgba(57,185,232,.30) !important}.loader-copy span{color:#6d858b !important}

/* Keep motion, remove heavy/dark visual treatment */
.ambient-orbs .orb-1{background:radial-gradient(circle at 50% 50%,rgba(57,185,232,.16),transparent 68%) !important}.ambient-orbs .orb-2{background:radial-gradient(circle at 50% 50%,rgba(111,159,98,.14),transparent 68%) !important}.ambient-orbs .orb-3{background:radial-gradient(circle at 50% 50%,rgba(255,143,50,.10),transparent 68%) !important}
@media(max-width:900px){.hero{grid-template-columns:1fr !important;text-align:center !important}.hero-logo{margin:auto !important}.hero-copy{max-width:760px;margin:auto}.hero-actions{justify-content:center}.hero-note{justify-content:center}}
@media(max-width:700px){.topbar{background:rgba(255,255,255,.96) !important}.hero h1{font-size:clamp(44px,13vw,76px) !important}.section{padding-top:78px !important;padding-bottom:78px !important}.stats{grid-template-columns:repeat(2,1fr) !important}}


/* =========================================================
   PURULIA EXCURSION — LIGHT MOUNTAIN MOTION THEME v6.5.19
   Sky blue + earthy green + bright orange + white surfaces.
   Performance rule: animations use transform/opacity only.
   ========================================================= */

:root{
  --sky:#42bfe9;
  --sky-deep:#159dcc;
  --sky-soft:#e6f7fc;
  --green:#6f9f68;
  --green-deep:#4f7f59;
  --green-soft:#e9f4e5;
  --orange:#ff8f38;
  --orange-deep:#ec6f16;
  --orange-soft:#fff0e2;
  --ink:#18343a;
  --ink-soft:#49666d;
  --paper:#ffffff;
  --mist:#f5fbfc;
  --mist-2:#edf8f6;
  --line:#cfe5e5;
  --shadow:0 18px 50px rgba(35,88,96,.12);
  --shadow-lg:0 30px 90px rgba(35,88,96,.16);
  --ease:cubic-bezier(.22,1,.36,1);
}

html,body{
  background:
    radial-gradient(circle at 10% 5%, rgba(66,191,233,.12), transparent 25%),
    radial-gradient(circle at 90% 12%, rgba(111,159,104,.11), transparent 28%),
    var(--mist) !important;
  color:var(--ink) !important;
}

body{
  min-height:100vh;
  position:relative;
}

/* Floating atmospheric light — deliberately subtle */
body::before{
  content:"";
  position:fixed;
  inset:-15vh -10vw;
  pointer-events:none;
  z-index:-2;
  background:
    radial-gradient(ellipse at 18% 25%, rgba(255,255,255,.92) 0 8%, transparent 26%),
    radial-gradient(ellipse at 78% 18%, rgba(255,255,255,.82) 0 7%, transparent 23%);
  animation:skyDrift 18s ease-in-out infinite alternate;
}

/* ---------------- navigation ---------------- */
.topbar{
  background:rgba(255,255,255,.86) !important;
  border-bottom:1px solid rgba(66,191,233,.22) !important;
  box-shadow:0 10px 32px rgba(35,88,96,.10) !important;
  backdrop-filter:blur(20px) saturate(150%) !important;
  -webkit-backdrop-filter:blur(20px) saturate(150%) !important;
  transition:transform .35s var(--ease), background .35s ease, box-shadow .35s ease !important;
}
.topbar.scrolled{
  background:rgba(255,255,255,.94) !important;
  box-shadow:0 16px 40px rgba(35,88,96,.14) !important;
}
.brand{color:var(--ink) !important}
.brand b{color:var(--sky-deep) !important}
.brand img{filter:drop-shadow(0 8px 18px rgba(35,88,96,.18)) !important}
.topbar nav a{
  color:#49636a !important;
  transition:transform .3s var(--ease), color .25s ease, background .25s ease !important;
}
.topbar nav a:hover,.topbar nav a.active{
  color:var(--ink) !important;
  background:var(--sky-soft) !important;
}
.topbar nav a::after{
  background:linear-gradient(90deg,var(--sky),var(--green)) !important;
}
.nav-login-btn{
  color:var(--ink) !important;
  background:linear-gradient(135deg,#fff,var(--sky-soft)) !important;
  border-color:rgba(66,191,233,.28) !important;
  box-shadow:0 8px 24px rgba(66,191,233,.13) !important;
  transition:transform .3s var(--ease),box-shadow .3s ease !important;
}
.nav-login-btn:hover{transform:translateY(-3px) scale(1.02) !important;box-shadow:0 14px 30px rgba(66,191,233,.20) !important}

/* ---------------- loader ---------------- */
.page-loader{
  background:
    radial-gradient(circle at 50% 40%,#fff 0,rgba(255,255,255,.92) 28%,transparent 55%),
    linear-gradient(180deg,#e8f8fd,#f6fbf8) !important;
}
.loader-core{
  background:linear-gradient(145deg,#fff,#e5f7f8) !important;
  border-color:rgba(66,191,233,.30) !important;
  box-shadow:0 22px 60px rgba(35,88,96,.16) !important;
}
.loader-core span{color:var(--ink) !important}
.loader-copy strong{color:var(--ink) !important}
.loader-copy span{color:#6a858b !important}
.loader-progress{background:#dceee9 !important}
.loader-progress i{background:linear-gradient(90deg,var(--green),var(--sky),var(--orange)) !important}


/* ===== PREMIUM LOADING SCREEN MOTION v6.6.7 ===== */
.page-loader::before{
  animation:loaderAmbient 4.2s ease-in-out infinite alternate;
}
.page-loader::after{
  content:"";
  position:absolute;
  width:10px;height:10px;border-radius:50%;
  left:calc(50% - 5px);top:calc(50% - 5px);
  background:rgba(66,191,233,.18);
  box-shadow:
    -150px -72px 0 -2px rgba(66,191,233,.28),
    146px -64px 0 -3px rgba(111,159,104,.26),
    170px 92px 0 -2px rgba(255,141,59,.24),
    -162px 98px 0 -3px rgba(142,128,255,.22);
  filter:blur(.2px);
  animation:loaderParticles 4.8s ease-in-out infinite;
  pointer-events:none;
}
.site-loading .orbit-a{
  animation:orbit 4s linear infinite,loaderOrbitPulse 2s ease-in-out infinite;
}
.site-loading .orbit-b{
  animation:orbitReverse 5s linear infinite,loaderOrbitPulse 2.6s ease-in-out infinite .2s;
}
.loader-core{
  animation:loaderCoreEntrance .95s cubic-bezier(.16,1,.3,1) both,loaderCoreBreath 2.1s ease-in-out .95s infinite;
  isolation:isolate;
}
.loader-core::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:32px;
  border:1px solid rgba(66,191,233,.16);
  box-shadow:0 0 0 0 rgba(66,191,233,.16);
  animation:loaderRing 2.2s ease-out .8s infinite;
  pointer-events:none;
}
.loader-core::after{
  content:"";
  position:absolute;
  width:150%;height:35%;
  left:-125%;top:10%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);
  transform:rotate(-22deg);
  animation:loaderSweep 2.6s ease-in-out 1.1s infinite;
  pointer-events:none;
}
.loader-core img{
  opacity:.34 !important;
  animation:loaderLogoBloom 1.15s cubic-bezier(.16,1,.3,1) both,loaderLogoFloat 2.5s ease-in-out 1.15s infinite;
  z-index:1;
}
.loader-core span{
  z-index:2;
  animation:loaderPbrPop .7s cubic-bezier(.16,1,.3,1) .38s both;
}
.loader-copy strong{
  animation:loaderTextIn .8s cubic-bezier(.16,1,.3,1) .55s both;
}
.loader-copy span{
  animation:loaderTextIn .8s cubic-bezier(.16,1,.3,1) .72s both;
}
.loader-progress{
  box-shadow:0 0 24px rgba(66,191,233,.10);
  animation:loaderProgressIn .7s ease .85s both;
}
.site-loading .loader-progress i{
  position:relative;
  overflow:hidden;
  animation:loaderProgressShimmer 1.35s linear .9s infinite;
}
.site-loading .loader-progress i::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  transform:translateX(-100%);
  animation:loaderBarShine 1.15s linear .95s infinite;
}
@keyframes loaderAmbient{0%{transform:scale(.72);opacity:.55}100%{transform:scale(1.08);opacity:1}}
@keyframes loaderParticles{0%,100%{transform:rotate(0deg) scale(.82);opacity:.45}50%{transform:rotate(180deg) scale(1.12);opacity:.9}}
@keyframes loaderOrbitPulse{0%,100%{opacity:.42}50%{opacity:1}}
@keyframes loaderCoreEntrance{0%{opacity:0;transform:scale(.38) rotate(-10deg);filter:blur(12px)}70%{opacity:1;transform:scale(1.12) rotate(2deg);filter:blur(0)}100%{opacity:1;transform:scale(1) rotate(0);filter:blur(0)}}
@keyframes loaderCoreBreath{0%,100%{transform:scale(1);box-shadow:0 22px 60px rgba(35,88,96,.16),0 0 0 rgba(66,191,233,0)}50%{transform:scale(1.035);box-shadow:0 26px 72px rgba(35,88,96,.19),0 0 28px rgba(66,191,233,.13)}}
@keyframes loaderLogoBloom{0%{opacity:0;transform:scale(.45) rotate(-7deg);filter:blur(7px)}70%{opacity:.42;transform:scale(1.08) rotate(1deg);filter:blur(0)}100%{opacity:.34;transform:scale(1) rotate(0);filter:blur(0)}}
@keyframes loaderLogoFloat{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1.035) translateY(-2px)}}
@keyframes loaderPbrPop{0%{opacity:0;transform:scale(.5);filter:blur(4px)}75%{opacity:1;transform:scale(1.12);filter:blur(0)}100%{opacity:1;transform:scale(1)}}
@keyframes loaderTextIn{0%{opacity:0;transform:translateY(10px);letter-spacing:.32em;filter:blur(5px)}100%{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes loaderProgressIn{0%{opacity:0;transform:scaleX(.35)}100%{opacity:1;transform:scaleX(1)}}
@keyframes loaderBarShine{to{transform:translateX(100%)}}
@keyframes loaderProgressShimmer{0%,100%{filter:brightness(1)}50%{filter:brightness(1.15)}}
@keyframes loaderRing{0%{transform:scale(.7);opacity:.8}100%{transform:scale(1.35);opacity:0}}
@keyframes loaderSweep{0%{left:-125%;opacity:0}20%{opacity:1}60%,100%{left:125%;opacity:0}}
@media(prefers-reduced-motion:reduce){
  .page-loader::before,.page-loader::after,.loader-core,.loader-core::before,.loader-core::after,.loader-core img,.loader-core span,.loader-copy strong,.loader-copy span,.loader-progress,.site-loading .loader-progress i,.site-loading .loader-progress i::after{animation:none!important}
  .loader-core,.loader-core img,.loader-core span,.loader-copy strong,.loader-copy span,.loader-progress{opacity:1!important;transform:none!important;filter:none!important}
}

/* ---------------- hero / mountain landscape ---------------- */
.hero{
  min-height:calc(100vh - 68px);
  overflow:hidden;
  background:
    radial-gradient(circle at 72% 18%,rgba(66,191,233,.20),transparent 23%),
    radial-gradient(circle at 28% 65%,rgba(111,159,104,.13),transparent 25%),
    linear-gradient(180deg,#e8f8fd 0%,#f8fcfb 62%,#edf7ef 100%) !important;
}
.hero::before{
  content:"";
  position:absolute;
  left:-3%;
  right:-3%;
  bottom:-2px;
  height:52%;
  z-index:-1;
  background:url("mountains.svg") bottom center/cover no-repeat;
  opacity:.72;
  transform:scale(1.06) translateY(7px);
  transform-origin:center bottom;
  animation:mountainBreath 10s ease-in-out infinite alternate;
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  width:430px;height:180px;
  right:7%;top:12%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,255,255,.90) 0 25%,rgba(255,255,255,.40) 45%,transparent 72%);
  filter:blur(4px);
  z-index:-1;
  animation:cloudFloat 14s ease-in-out infinite alternate;
  pointer-events:none;
}
.hero-logo{
  animation:heroLogoIn 1s var(--ease) both, gentleFloat 7s ease-in-out 1s infinite !important;
}
.hero-logo::before{
  border-color:rgba(66,191,233,.22) !important;
  box-shadow:0 0 70px rgba(66,191,233,.16),inset 0 0 40px rgba(111,159,104,.10) !important;
  animation:ringPulse 5s ease-in-out infinite !important;
}
.hero-logo img{
  filter:drop-shadow(0 24px 30px rgba(35,88,96,.20)) !important;
}
.hero-logo:hover img{
  transform:translateY(-10px) scale(1.025) rotate(-.5deg) !important;
  filter:drop-shadow(0 30px 38px rgba(35,88,96,.24)) !important;
}
.hero-copy{animation:heroCopyPro .9s .12s var(--ease) both !important}
.eyebrow{
  color:var(--green-deep) !important;
  background:rgba(255,255,255,.74) !important;
  border-color:rgba(111,159,104,.25) !important;
  box-shadow:0 8px 22px rgba(35,88,96,.07) !important;
}
.eyebrow::before{background:var(--orange) !important;box-shadow:0 0 14px rgba(255,143,56,.45) !important}
.hero h1{color:var(--ink) !important;text-shadow:0 8px 35px rgba(255,255,255,.7)}
.hero h1 em{
  background:linear-gradient(90deg,var(--sky-deep),var(--green-deep),var(--orange)) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
}
.hero p{color:var(--ink-soft) !important}
.hero-note{color:#638087 !important}
.hero-note strong{color:var(--green-deep) !important}

/* Decorative floating cloud streaks */
.hero .hero-copy::after{
  content:"";
  display:block;
  width:130px;height:6px;
  margin-top:28px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--sky),rgba(66,191,233,0));
  opacity:.55;
  animation:lineBreath 3s ease-in-out infinite;
}

/* ---------------- buttons ---------------- */
.btn{
  box-shadow:0 10px 24px rgba(35,88,96,.10) !important;
  transition:transform .35s var(--ease),box-shadow .35s ease,filter .35s ease !important;
}
.btn:hover{
  transform:translateY(-4px) !important;
  box-shadow:0 18px 34px rgba(35,88,96,.16) !important;
}
.btn.primary{
  color:#fff !important;
  background:linear-gradient(135deg,var(--sky),var(--sky-deep)) !important;
  border-color:rgba(21,157,204,.25) !important;
}
.btn.primary::before{
  background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.40) 48%,transparent 70%) !important;
  animation:buttonShine 3.8s ease-in-out infinite !important;
}
.btn.secondary,.btn.ghost{
  color:var(--ink) !important;
  background:rgba(255,255,255,.82) !important;
  border-color:var(--line) !important;
}
.btn.secondary:hover,.btn.ghost:hover{background:#fff !important}
.btn.gold{
  color:#fff !important;
  background:linear-gradient(135deg,var(--orange),var(--orange-deep)) !important;
}

/* ---------------- cards / forms / sections ---------------- */
.section,.register-section,.status-section,.rules,.credits{
  background:transparent !important;
  color:var(--ink) !important;
}
.card,.callout,.payment-panel,.payment-proof-card,.status-card,.teacher-card,
.registered-panel,.registered-row,.profile-modal-card,.login-modal-card,.modal-card,
.vote-block,.comrade,.form{
  color:var(--ink) !important;
  background:rgba(255,255,255,.82) !important;
  border-color:rgba(111,159,104,.18) !important;
  box-shadow:var(--shadow) !important;
  backdrop-filter:blur(16px) saturate(130%) !important;
  -webkit-backdrop-filter:blur(16px) saturate(130%) !important;
  transition:transform .4s var(--ease),box-shadow .4s ease,border-color .3s ease !important;
}
.card:hover,.teacher-card:hover,.comrade:hover,.registered-row:hover{
  transform:translateY(-7px) !important;
  box-shadow:var(--shadow-lg) !important;
  border-color:rgba(66,191,233,.28) !important;
}
input,select,textarea,.wide-input,.login-input-wrap input{
  color:var(--ink) !important;
  background:#fff !important;
  border-color:#cfe5e5 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 18px rgba(35,88,96,.05) !important;
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s var(--ease) !important;
}
input:focus,select:focus,textarea:focus,.wide-input:focus{
  border-color:rgba(66,191,233,.75) !important;
  box-shadow:0 0 0 4px rgba(66,191,233,.12),0 10px 24px rgba(66,191,233,.08) !important;
  transform:translateY(-1px) !important;
}
label,.mini-label,.pref-head,.section-head-row,.login-kicker,.login-security-note,
.payment-help,.registered-note,.private-vote-note{color:var(--ink-soft) !important}
.golden,.section h2,.recent-heading h3,.credit-grid h3{color:var(--ink) !important}
.lead{color:var(--ink-soft) !important}
.payment-badge,.student-badge{
  background:var(--orange-soft) !important;
  color:var(--orange-deep) !important;
  border-color:rgba(255,143,56,.22) !important;
}
.student-badge{background:var(--green-soft) !important;color:var(--green-deep) !important}
.title-number{color:var(--sky-deep) !important}
.status.approved,.approved,.verified{color:var(--green-deep) !important}
.status.pending,.pending{color:var(--orange-deep) !important}

/* ---------------- stats: clean travel dashboard ---------------- */
.stats{
  background:rgba(255,255,255,.88) !important;
  border-top:1px solid rgba(66,191,233,.15) !important;
  border-bottom:1px solid rgba(111,159,104,.15) !important;
  box-shadow:0 -10px 35px rgba(35,88,96,.06),0 12px 35px rgba(35,88,96,.07) !important;
}
.stats > *{transition:transform .35s var(--ease)}
.stats > *:hover{transform:translateY(-6px)}
.live-count,.count-bump{color:var(--sky-deep) !important}

/* ---------------- modals / login ---------------- */
.modal,.login-shell{
  background:rgba(235,248,249,.72) !important;
  backdrop-filter:blur(18px) !important;
}
.modal-card,.login-modal-card{
  background:rgba(255,255,255,.96) !important;
  color:var(--ink) !important;
  box-shadow:0 35px 100px rgba(35,88,96,.22) !important;
}
.modal-close{color:var(--ink-soft) !important;background:var(--sky-soft) !important}
.login-panel,.login-rail{background:linear-gradient(145deg,#fff,#eef8f6) !important;color:var(--ink) !important}
.login-trust-list,.login-steps{color:var(--ink-soft) !important}

/* ---------------- footer ---------------- */
.footer{
  background:linear-gradient(180deg,#edf8f6,#e2f2ed) !important;
  color:var(--ink-soft) !important;
  border-top:1px solid rgba(111,159,104,.18) !important;
}
.footer a:hover{color:var(--orange) !important}

/* ---------------- ambient orbs ---------------- */
.ambient-orbs .orb{opacity:.45 !important;filter:blur(2px)}
.ambient-orbs .orb-1{background:var(--sky) !important;animation:orbDrift1 11s ease-in-out infinite alternate !important}
.ambient-orbs .orb-2{background:var(--green) !important;animation:orbDrift2 13s ease-in-out infinite alternate !important}
.ambient-orbs .orb-3{background:var(--orange) !important;animation:orbDrift3 9s ease-in-out infinite alternate !important}

/* ---------------- reveal motion ---------------- */
.reveal{
  opacity:0;
  transform:translateY(24px) scale(.985);
  transition:opacity .75s ease,transform .75s var(--ease) !important;
}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---------------- keyframes ---------------- */
@keyframes skyDrift{from{transform:translate3d(-1%,0,0) scale(1)}to{transform:translate3d(1.5%,1%,0) scale(1.03)}}
@keyframes mountainBreath{from{transform:scale(1.04) translate3d(-.5%,6px,0)}to{transform:scale(1.08) translate3d(.5%,-2px,0)}}
@keyframes cloudFloat{from{transform:translate3d(-18px,0,0) scale(.96);opacity:.55}to{transform:translate3d(18px,-8px,0) scale(1.04);opacity:.85}}
@keyframes gentleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes ringPulse{0%,100%{transform:scale(.98);opacity:.75}50%{transform:scale(1.03);opacity:1}}
@keyframes lineBreath{0%,100%{width:90px;opacity:.35}50%{width:150px;opacity:.75}}
@keyframes buttonShine{0%{transform:translateX(-130%)}55%,100%{transform:translateX(130%)}}
@keyframes heroLogoIn{from{opacity:0;transform:translateY(28px) scale(.88) rotate(-2deg)}to{opacity:1;transform:none}}
@keyframes heroCopyPro{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes orbDrift1{from{transform:translate3d(-25px,12px,0)}to{transform:translate3d(35px,-20px,0)}}
@keyframes orbDrift2{from{transform:translate3d(20px,-10px,0)}to{transform:translate3d(-30px,22px,0)}}
@keyframes orbDrift3{from{transform:translate3d(-10px,16px,0)}to{transform:translate3d(25px,-18px,0)}}

/* Mobile: preserve the atmosphere without making it busy */
@media (max-width:760px){
  .hero::before{height:38%;opacity:.55}
  .hero::after{right:-30%;top:14%;opacity:.55}
  .hero-logo img{max-width:280px}
  .hero h1{font-size:clamp(44px,14vw,70px)}
}


/* =========================================================
   BRIGHT ORANGE CTA — v6.5.20
   Primary action buttons such as Send OTP.
   ========================================================= */
.btn.primary,
button.primary,
.send-otp,
#sendOtp,
.sendOtpBtn,
button[type="submit"]{
  background:linear-gradient(135deg,#ff9a3d 0%,#ff7a18 100%) !important;
  color:#ffffff !important;
  border:1px solid rgba(236,111,22,.45) !important;
  box-shadow:0 10px 24px rgba(255,143,56,.24) !important;
  font-weight:800 !important;
  transition:transform .3s cubic-bezier(.22,1,.36,1),
             box-shadow .3s ease,
             filter .3s ease !important;
}

.btn.primary:hover,
button.primary:hover,
.send-otp:hover,
#sendOtp:hover,
.sendOtpBtn:hover,
button[type="submit"]:hover{
  background:linear-gradient(135deg,#ffad55 0%,#ff7a18 100%) !important;
  color:#ffffff !important;
  transform:translateY(-3px) scale(1.015) !important;
  box-shadow:0 16px 32px rgba(255,143,56,.32) !important;
  filter:saturate(1.08) !important;
}

.btn.primary:active,
button.primary:active,
.send-otp:active,
#sendOtp:active,
.sendOtpBtn:active,
button[type="submit"]:active{
  transform:translateY(-1px) scale(.99) !important;
  box-shadow:0 7px 16px rgba(255,143,56,.24) !important;
}

.btn.primary::before,
button.primary::before,
.send-otp::before,
#sendOtp::before,
.sendOtpBtn::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:inherit !important;
  pointer-events:none !important;
  background:linear-gradient(
    110deg,
    transparent 20%,
    rgba(255,255,255,.42) 48%,
    transparent 72%
  ) !important;
  transform:translateX(-130%) !important;
  animation:orangeCtaShine 3.2s ease-in-out infinite !important;
}

@keyframes orangeCtaShine{
  0%,45%{transform:translateX(-130%)}
  70%,100%{transform:translateX(130%)}
}

/* OTP button specifically: bright orange even if it is a plain button. */
button.send-otp,
button#sendOtp,
button.sendOtpBtn{
  position:relative !important;
  overflow:hidden !important;
  background:#ff8a2b !important;
  color:#fff !important;
}


/* NEON YELLOW PRIMARY REGISTRATION CTA — updated */
.btn.primary,.btn.register,.register-btn,a.register-btn,button.register-btn,#registerBtn,.hero .btn.primary{
  position:relative !important; overflow:hidden !important;
  color:#171300 !important;
  background:linear-gradient(135deg,#fff900 0%,#ffef00 48%,#ffd900 100%) !important;
  border:1px solid rgba(255,205,0,.7) !important;
  box-shadow:0 10px 25px rgba(255,224,0,.32),0 0 0 1px rgba(255,255,120,.35) inset !important;
  font-weight:900 !important; text-shadow:none !important;
  transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s ease,filter .32s ease !important;
}
.btn.primary:hover,.btn.register:hover,.register-btn:hover,a.register-btn:hover,button.register-btn:hover,#registerBtn:hover,.hero .btn.primary:hover{
  color:#120f00 !important;
  background:linear-gradient(135deg,#ffff45 0%,#fff200 45%,#ffd400 100%) !important;
  transform:translateY(-4px) scale(1.025) !important;
  box-shadow:0 16px 34px rgba(255,218,0,.38),0 0 22px rgba(255,239,25,.38),0 0 0 1px rgba(255,255,150,.45) inset !important;
  filter:saturate(1.05) brightness(1.04) !important;
}
.btn.primary:active,.btn.register:active,.register-btn:active,a.register-btn:active,button.register-btn:active,#registerBtn:active,.hero .btn.primary:active{
  transform:translateY(-1px) scale(.99) !important;
  box-shadow:0 7px 16px rgba(255,218,0,.28) !important;
}
.btn.primary::before,.btn.register::before,.register-btn::before,a.register-btn::before,button.register-btn::before,#registerBtn::before,.hero .btn.primary::before{
  content:"" !important; position:absolute !important; inset:0 !important; border-radius:inherit !important;
  pointer-events:none !important;
  background:linear-gradient(110deg,transparent 18%,rgba(255,255,255,.7) 46%,transparent 68%) !important;
  transform:translateX(-135%) !important; animation:neonYellowShine 3.2s ease-in-out infinite !important;
}
@keyframes neonYellowShine{0%,42%{transform:translateX(-135%)}68%,100%{transform:translateX(135%)}}
.btn.primary::after,.btn.register::after,.register-btn::after,a.register-btn::after,button.register-btn::after,#registerBtn::after,.hero .btn.primary::after{
  content:"" !important; position:absolute !important; inset:-5px !important; border-radius:inherit !important;
  pointer-events:none !important; box-shadow:0 0 22px rgba(255,235,25,.3) !important;
  opacity:.7 !important; animation:neonYellowPulse 2.8s ease-in-out infinite !important;
}
@keyframes neonYellowPulse{0%,100%{opacity:.42;transform:scale(.99)}50%{opacity:.9;transform:scale(1.012)}}

/* =========================================================
   FINAL CTA SELECTOR FIX — v6.5.23
   The registration page uses #sendOtpBtn.btn.secondary.
   Target the real DOM id so the secondary-button theme cannot
   override the bright orange OTP CTA.
   ========================================================= */
#sendOtpBtn{
  position:relative !important;
  overflow:hidden !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:52px !important;
  padding:0 28px !important;
  color:#ffffff !important;
  background:linear-gradient(135deg,#ffad45 0%,#ff8a24 48%,#ff7414 100%) !important;
  border:1px solid rgba(225,103,11,.45) !important;
  border-radius:16px !important;
  box-shadow:0 10px 26px rgba(255,126,24,.28),0 0 0 1px rgba(255,255,255,.20) inset !important;
  font-weight:800 !important;
  opacity:1 !important;
  text-shadow:0 1px 1px rgba(120,55,0,.12) !important;
  transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s ease,filter .28s ease !important;
}
#sendOtpBtn:hover:not(:disabled){
  color:#ffffff !important;
  background:linear-gradient(135deg,#ffc064 0%,#ff9635 48%,#ff7b17 100%) !important;
  transform:translateY(-3px) !important;
  box-shadow:0 16px 34px rgba(255,126,24,.34),0 0 22px rgba(255,145,42,.18) !important;
  filter:saturate(1.08) !important;
}
#sendOtpBtn:active:not(:disabled){
  transform:translateY(-1px) scale(.985) !important;
  box-shadow:0 7px 16px rgba(255,126,24,.25) !important;
}
#sendOtpBtn:disabled{
  color:#ffffff !important;
  background:linear-gradient(135deg,#ffbd70,#ff9645) !important;
  opacity:.72 !important;
}
#sendOtpBtn::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:inherit !important;
  pointer-events:none !important;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.52) 48%,transparent 70%) !important;
  transform:translateX(-135%) !important;
  animation:sendOtpOrangeShine 3.4s ease-in-out infinite !important;
}
#sendOtpBtn::after{
  content:"" !important;
  position:absolute !important;
  inset:-4px !important;
  border-radius:inherit !important;
  pointer-events:none !important;
  box-shadow:0 0 20px rgba(255,126,24,.20) !important;
  animation:sendOtpOrangeGlow 2.8s ease-in-out infinite !important;
}
@keyframes sendOtpOrangeShine{
  0%,42%{transform:translateX(-135%)}
  68%,100%{transform:translateX(135%)}
}
@keyframes sendOtpOrangeGlow{
  0%,100%{opacity:.35;transform:scale(.99)}
  50%{opacity:.82;transform:scale(1.01)}
}


/* =========================================================
   PAYMENT MODAL SCROLL FIX — v6.5.24
   Keeps the registration/payment flow inside one modal while
   allowing the complete UTR + screenshot section to scroll.
   ========================================================= */

/* The overlay itself must be vertically scrollable on short screens. */
#registrationModal{
  align-items:flex-start !important;
  justify-content:center !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior:contain !important;
  padding:24px 16px !important;
}

/* The card gets a viewport-aware height instead of being clipped. */
#registrationModal .modal-card{
  width:min(620px,100%) !important;
  max-height:calc(100vh - 48px) !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior:contain !important;
  scrollbar-width:thin !important;
  scrollbar-color:rgba(66,191,233,.55) rgba(220,238,233,.65) !important;
  padding-bottom:28px !important;
  text-align:center !important;
}

/* Make the payment section comfortably readable while scrolling. */
#registrationModal .payment-panel{
  max-width:100% !important;
  overflow:visible !important;
}
#registrationModal .payment-proof-card{
  min-width:0 !important;
}
#registrationModal .utr-form{
  min-width:0 !important;
}
#registrationModal #utrInput{
  width:100% !important;
  box-sizing:border-box !important;
}
#registrationModal .payment-panel,
#registrationModal .cash-payment-panel,
#registrationModal .utr-form{
  scroll-margin-top:18px !important;
}

/* A clear but subtle scrollbar on Chromium/Edge. */
#registrationModal .modal-card::-webkit-scrollbar{
  width:8px !important;
}
#registrationModal .modal-card::-webkit-scrollbar-track{
  background:rgba(220,238,233,.55) !important;
  border-radius:99px !important;
}
#registrationModal .modal-card::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#55c7f2,#6fa56a) !important;
  border-radius:99px !important;
  border:2px solid rgba(255,255,255,.75) !important;
}
#registrationModal .modal-card::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#2fb4e5,#5f935e) !important;
}

/* Keep close button accessible while the card is being scrolled. */
#registrationModal .modal-close{
  position:absolute !important;
  z-index:20 !important;
}

/* Short desktop/laptop screens: maximize usable payment area. */
@media (max-height:820px) and (min-width:601px){
  #registrationModal{
    padding:12px 14px !important;
  }
  #registrationModal .modal-card{
    max-height:calc(100vh - 24px) !important;
    padding:28px 28px 24px !important;
  }
}

/* Mobile: card is the single scroll container, with comfortable
   touch scrolling and no content escaping the viewport. */
@media (max-width:600px){
  #registrationModal{
    padding:8px !important;
  }
  #registrationModal .modal-card{
    width:min(100%,520px) !important;
    max-height:calc(100vh - 16px) !important;
    padding:22px 12px 18px !important;
    border-radius:20px !important;
  }
  #registrationModal .modal-close{
    position:sticky !important;
    top:0 !important;
    float:right !important;
    margin-bottom:-35px !important;
  }
}

/* Ensure no old "one-screen" clipping rule can hide the payment form. */
#registrationModal,
#registrationModal .modal-card,
#registrationModal .payment-panel,
#registrationModal .payment-proof-card{
  box-sizing:border-box !important;
}


/* PROJECT CREDITS v6.5.25 */
.project-credits{position:relative;overflow:hidden;padding:100px 24px 110px;background:linear-gradient(180deg,#f7fcfd,#edf8f4);border-top:1px solid #d7eceb}
.project-credits-inner{max-width:1180px;margin:auto;position:relative;z-index:1}
.credits-heading{text-align:center;max-width:760px;margin:0 auto 48px}.credits-heading>span{color:#4f7f59;font-size:11px;font-weight:900;letter-spacing:.18em}.credits-heading h2{font-size:clamp(36px,5vw,60px);line-height:1;margin:12px 0;color:#18343a}.credits-heading h2 em{font-style:normal;background:linear-gradient(90deg,#159dcc,#4f7f59,#ff8f38);-webkit-background-clip:text;background-clip:text;color:transparent}.credits-heading p{color:#58747a;line-height:1.7}
.credits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}.credit-person{overflow:hidden;background:rgba(255,255,255,.9);border:1px solid #d2e8e7;border-radius:28px;box-shadow:0 18px 50px rgba(35,88,96,.11);transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s ease}.credit-person:hover{transform:translateY(-10px);box-shadow:0 30px 75px rgba(35,88,96,.18)}.credit-photo{position:relative;aspect-ratio:1;overflow:hidden;background:#e8f5f4}.credit-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.22,1,.36,1)}.credit-person:hover img{transform:scale(1.06)}.credit-photo b{position:absolute;right:16px;top:16px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.9);color:#18343a;font-size:12px}.credit-person>div:last-child{padding:20px 24px 26px}.credit-person small{color:#6f9f68;font-size:10px;font-weight:900;letter-spacing:.16em}.credit-person h3{margin:6px 0 0;color:#18343a;font-size:28px}
@media(max-width:800px){.credits-grid{grid-template-columns:1fr;max-width:480px;margin:auto}.project-credits{padding:75px 18px 85px}}


/* =========================================================
   INLINE CREDITS — v6.5.26
   Portrait is a small circle immediately beside the name,
   matching the supplied reference layout.
   ========================================================= */
.project-credits{
  position:relative;
  padding:72px 28px 78px !important;
  overflow:hidden;
  background:linear-gradient(180deg,#f8fcfd 0%,#eef8f5 100%) !important;
  border-top:1px solid rgba(66,191,233,.13) !important;
}
.project-credits-inner{
  width:min(1240px,100%);
  margin:auto;
}
.credits-heading{
  margin:0 auto 38px !important;
  text-align:center !important;
}
.credits-heading > span{
  color:#4f7f59 !important;
  font-size:11px !important;
  font-weight:900 !important;
  letter-spacing:.18em !important;
}
.credits-heading h2{
  margin:10px 0 0 !important;
  color:#18343a !important;
  font-size:clamp(32px,4vw,50px) !important;
  line-height:1 !important;
}
.credits-heading h2 em{
  font-style:normal !important;
  background:linear-gradient(90deg,#159dcc,#4f7f59,#ff8f38) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
}
.credits-inline-list{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:48px !important;
  align-items:center !important;
}
.credit-inline{
  display:flex !important;
  align-items:center !important;
  gap:18px !important;
  min-width:0 !important;
  padding:10px 6px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  transition:transform .4s cubic-bezier(.22,1,.36,1) !important;
}
.credit-inline:hover{
  transform:translateY(-4px) !important;
}
.credit-inline > img{
  flex:0 0 78px !important;
  width:78px !important;
  height:78px !important;
  aspect-ratio:1/1 !important;
  object-fit:cover !important;
  object-position:center !important;
  display:block !important;
  border-radius:50% !important;
  border:3px solid rgba(255,255,255,.96) !important;
  box-shadow:0 8px 22px rgba(35,88,96,.16),0 0 0 1px rgba(66,191,233,.20) !important;
  transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .4s ease !important;
}
.credit-inline:hover > img{
  transform:scale(1.07) !important;
  box-shadow:0 12px 28px rgba(35,88,96,.20),0 0 0 3px rgba(66,191,233,.12) !important;
}
.credit-inline-text{
  min-width:0 !important;
}
.credit-inline-text h3{
  margin:0 0 6px !important;
  color:#122c34 !important;
  font-family:inherit !important;
  font-size:24px !important;
  font-weight:800 !important;
  line-height:1.12 !important;
  letter-spacing:-.02em !important;
}
.credit-inline-text p{
  margin:0 !important;
  color:#607b82 !important;
  font-size:14px !important;
  line-height:1.45 !important;
}
@media (max-width:900px){
  .credits-inline-list{
    grid-template-columns:1fr !important;
    gap:14px !important;
    max-width:620px !important;
    margin:auto !important;
  }
  .credit-inline{
    padding:12px 8px !important;
  }
}
@media (max-width:500px){
  .project-credits{padding:58px 18px 64px !important}
  .credit-inline > img{
    flex-basis:62px !important;
    width:62px !important;
    height:62px !important;
  }
  .credit-inline-text h3{font-size:20px !important}
  .credit-inline-text p{font-size:13px !important}
}

/* ===== MOUNTAIN LAKE HERO / PREMIUM INTRO v6.6 ===== */
.hero{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background-image:
    linear-gradient(105deg,rgba(245,252,253,.88) 0%,rgba(245,252,253,.66) 42%,rgba(245,252,253,.34) 72%,rgba(245,252,253,.24) 100%),
    url('hero-new-design.jpg');
  background-size:cover;
  background-position:center 56%;
  background-repeat:no-repeat;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), inset 0 -90px 120px rgba(239,249,249,.42);
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(90deg,rgba(255,255,255,.22),transparent 45%,rgba(255,255,255,.08)),
    linear-gradient(180deg,rgba(255,255,255,.16),transparent 42%,rgba(231,244,244,.22));
  filter:none;
  animation:heroAtmosphere 18s ease-in-out infinite alternate;
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  width:auto;
  height:auto;
  border-radius:0;
  background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 38%,rgba(232,245,244,.30) 100%);
  box-shadow:inset 0 0 110px rgba(255,255,255,.16);
  pointer-events:none;
}
.hero-logo{
  z-index:1;
  animation:heroLogoPop 1.15s var(--butter) .15s both;
  transform-origin:center;
}
.hero-logo::before{
  width:82%;
  border:1px solid rgba(255,255,255,.58);
  background:radial-gradient(circle,rgba(255,255,255,.22),transparent 68%);
  box-shadow:0 0 90px rgba(255,255,255,.32),0 22px 70px rgba(29,78,93,.15),inset 0 0 55px rgba(116,205,224,.12);
  animation:heroLogoHalo 2.2s var(--butter) .35s both;
}
.hero-logo img{
  width:min(100%,390px);
  filter:drop-shadow(0 28px 34px rgba(19,57,72,.25)) drop-shadow(0 0 26px rgba(255,255,255,.36));
  animation:heroLogoSettle 1.5s var(--butter) .2s both;
}
.hero-copy{
  position:relative;
  z-index:2;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  animation:heroCopyIn .9s var(--butter) .3s both;
}
.hero-copy::before{
  content:none;
}
.hero-title{
  position:relative;
  margin:0;
  color:#102e38;
  text-shadow:0 2px 22px rgba(255,255,255,.48);
  overflow:visible;
}
.hero-title .title-line{
  display:block;
  white-space:nowrap;
  opacity:0;
  animation:titleReassemble 1.05s var(--butter) forwards;
}
.hero-title .title-memory{animation-delay:.58s}
.hero-title .title-last{animation-delay:.78s}
.hero h1 em{
  background:linear-gradient(90deg,#129dca 0%,#328e94 38%,#6f8050 67%,#e59a43 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero p{color:#355763;text-shadow:0 1px 10px rgba(255,255,255,.7)}
.hero-note{color:#4d725e}.hero-note strong{color:#426f54}
.eyebrow{
  background:rgba(255,255,255,.55);
  border-color:rgba(63,128,138,.18);
  box-shadow:0 8px 25px rgba(43,94,105,.08),inset 0 1px 0 rgba(255,255,255,.7);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.hero-actions .btn{
  box-shadow:0 14px 30px rgba(38,95,105,.12),inset 0 1px 0 rgba(255,255,255,.58);
}
.hero-actions .btn.ghost{
  color:#23434e;
  background:rgba(255,255,255,.46);
  border-color:rgba(65,115,125,.18);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
@keyframes heroLogoPop{
  0%{opacity:0;transform:translateY(44px) scale(.58) rotate(-4deg);filter:blur(8px)}
  58%{opacity:1;transform:translateY(-8px) scale(1.045) rotate(1deg);filter:blur(0)}
  78%{transform:translateY(2px) scale(.985) rotate(0)}
  100%{opacity:1;transform:none}
}
@keyframes heroLogoSettle{
  0%{transform:scale(.82) rotate(-2deg)}
  62%{transform:scale(1.025) rotate(.5deg)}
  100%{transform:none}
}
@keyframes heroLogoHalo{
  0%{opacity:0;transform:scale(.72)}
  55%{opacity:1;transform:scale(1.08)}
  100%{opacity:.72;transform:scale(1)}
}
@keyframes titleReassemble{
  0%{opacity:0;transform:translate3d(0,20px,0) scale(1.08);letter-spacing:.18em;filter:blur(7px)}
  45%{opacity:1;filter:blur(0);letter-spacing:.08em}
  100%{opacity:1;transform:none;letter-spacing:-.03em}
}
@keyframes heroAtmosphere{
  0%{transform:scale(1.015) translate3d(0,0,0);opacity:.92}
  100%{transform:scale(1.045) translate3d(-.8%,.5%,0);opacity:1}
}
@media(max-width:860px){
  .hero{background-position:center center;background-image:url('hero-new-design.jpg') !important}
  .hero-copy{padding:24px 20px;border-radius:24px}
  .hero-copy::before{border-radius:23px}
  .hero-title .title-line{white-space:normal}
}
@media(prefers-reduced-motion:reduce){
  .hero-logo,.hero-logo img,.hero-logo::before,.hero-title .title-line,.hero::before{animation:none!important}
  .hero-title .title-line{opacity:1;transform:none;filter:none}
}


/* ===== HERO INTRO FIX v6.6.1 =====
   Hero animations intentionally wait until the 4s loader finishes,
   so visitors actually see the entrance sequence instead of missing it behind the loader.
*/
.hero{
  background-image:url('hero-new-design.jpg') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}
.hero::before{background:transparent !important;opacity:1 !important}
.hero::after{background:transparent !important;box-shadow:none !important}
.hero-logo,.hero-logo img,.hero-logo::before,.hero-copy,.hero-title .title-line{animation:none !important;opacity:1;transform:none;filter:none}
.hero-logo,.hero-logo img,.hero-logo::before,.hero-copy,.hero-title .title-line{animation-play-state:paused !important}
body.intro-ready .hero-logo{animation:heroLogoPopFixed 1.35s cubic-bezier(.16,1,.3,1) both !important}
body.intro-ready .hero-logo img{animation:heroLogoSettleFixed 1.6s cubic-bezier(.16,1,.3,1) .12s both !important}
body.intro-ready .hero-logo::before{animation:heroLogoHaloFixed 2.2s cubic-bezier(.16,1,.3,1) .25s both !important}
body.intro-ready .hero-copy{animation:heroCopyFixed 1s cubic-bezier(.16,1,.3,1) .32s both !important}
body.intro-ready .hero-title .title-memory{animation:titleSpreadMemory 1.35s cubic-bezier(.16,1,.3,1) .52s both !important}
body.intro-ready .hero-title .title-last{animation:titleSpreadLast 1.35s cubic-bezier(.16,1,.3,1) .70s both !important}
@keyframes heroLogoPopFixed{
  0%{opacity:0;transform:translateY(55px) scale(.55) rotate(-5deg);filter:blur(10px)}
  55%{opacity:1;transform:translateY(-10px) scale(1.055) rotate(1.5deg);filter:blur(0)}
  76%{transform:translateY(3px) scale(.985) rotate(0)}
  100%{opacity:1;transform:none}
}
@keyframes heroLogoSettleFixed{
  0%{transform:scale(.82) rotate(-2deg)}
  58%{transform:scale(1.035) rotate(.6deg)}
  100%{transform:none}
}
@keyframes heroLogoHaloFixed{
  0%{opacity:0;transform:scale(.70)}
  48%{opacity:1;transform:scale(1.12)}
  100%{opacity:.72;transform:scale(1)}
}
@keyframes heroCopyFixed{
  0%{opacity:0;transform:translateY(38px);filter:blur(5px)}
  100%{opacity:1;transform:none;filter:none}
}
@keyframes titleSpreadMemory{
  0%{opacity:0;transform:translateY(24px) scale(1.10);letter-spacing:.24em;filter:blur(8px)}
  38%{opacity:1;transform:translateY(0) scale(1.035);letter-spacing:.16em;filter:blur(0)}
  68%{transform:scale(1.01);letter-spacing:.045em}
  100%{opacity:1;transform:none;letter-spacing:-.03em}
}
@keyframes titleSpreadLast{
  0%{opacity:0;transform:translateY(24px) scale(1.10);letter-spacing:.28em;filter:blur(8px)}
  38%{opacity:1;transform:translateY(0) scale(1.035);letter-spacing:.17em;filter:blur(0)}
  68%{transform:scale(1.01);letter-spacing:.045em}
  100%{opacity:1;transform:none;letter-spacing:-.03em}
}
@media(prefers-reduced-motion:reduce){
 body.intro-ready .hero-logo,body.intro-ready .hero-logo img,body.intro-ready .hero-logo::before,body.intro-ready .hero-copy,body.intro-ready .hero-title .title-line{animation:none !important;opacity:1;transform:none;filter:none}
}

/* ===== VISIBLE HERO INTRO v6.6.2 ===== */
/* The entrance is deliberately gated by .hero-sequence so it cannot play behind the loader. */
.hero-logo,
.hero-copy,
.hero-title .title-line{animation:none!important;}
.hero-logo{opacity:1!important;transform:none!important;filter:none!important;}
.hero-logo img{opacity:1!important;}
.hero-title .title-line{opacity:1!important;transform:none!important;filter:none!important;letter-spacing:normal!important;}
.hero-title .char{display:inline-block;opacity:1;transform:none;filter:none;will-change:transform,opacity,filter;}

body:not(.hero-sequence) .hero-logo{opacity:0!important;transform:translateY(42px) scale(.68) rotate(-4deg)!important;filter:blur(10px)!important;}
body:not(.hero-sequence) .hero-logo img{transform:scale(.82)!important;}
body:not(.hero-sequence) .hero-logo::before{opacity:0!important;transform:scale(.72)!important;}
body:not(.hero-sequence) .hero-copy{opacity:0!important;transform:translateY(30px)!important;filter:blur(5px)!important;}
body:not(.hero-sequence) .hero-title .char{opacity:0!important;transform:translateY(26px) scale(1.12);filter:blur(8px);}

body.hero-sequence .hero-logo{
  animation:heroLogoEntrance 1.5s cubic-bezier(.16,1,.3,1) both!important;
}
body.hero-sequence .hero-logo img{
  animation:heroLogoImage 1.7s cubic-bezier(.16,1,.3,1) .08s both!important;
}
body.hero-sequence .hero-logo::before{
  animation:heroLogoHaloVisible 2.3s cubic-bezier(.16,1,.3,1) .12s both!important;
}
body.hero-sequence .hero-copy{
  animation:heroCopyEntrance 1s cubic-bezier(.16,1,.3,1) .25s both!important;
}
body.hero-sequence .hero-title .title-memory .char{
  animation:titleCharMemory 1.25s cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(.48s + var(--i) * .045s);
}
body.hero-sequence .hero-title .title-last .char{
  animation:titleCharLast 1.25s cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(.72s + var(--i) * .045s);
}

@keyframes heroLogoEntrance{
  0%{opacity:0;transform:translateY(58px) scale(.58) rotate(-5deg);filter:blur(11px)}
  48%{opacity:1;transform:translateY(-12px) scale(1.07) rotate(1.5deg);filter:blur(0)}
  70%{transform:translateY(4px) scale(.985) rotate(0)}
  86%{transform:translateY(-2px) scale(1.01)}
  100%{opacity:1;transform:none;filter:none}
}
@keyframes heroLogoImage{
  0%{transform:scale(.78) rotate(-2deg)}
  55%{transform:scale(1.045) rotate(.7deg)}
  75%{transform:scale(.99)}
  100%{transform:none}
}
@keyframes heroLogoHaloVisible{
  0%{opacity:0;transform:scale(.68)}
  48%{opacity:1;transform:scale(1.13)}
  100%{opacity:.78;transform:scale(1)}
}
@keyframes heroCopyEntrance{
  0%{opacity:0;transform:translateY(36px);filter:blur(6px)}
  65%{opacity:1;transform:translateY(-3px);filter:blur(0)}
  100%{opacity:1;transform:none;filter:none}
}
@keyframes titleCharMemory{
  0%{opacity:0;transform:translateY(30px) scale(1.22) translateX(var(--spread));filter:blur(10px)}
  48%{opacity:1;transform:translateY(-4px) scale(1.04) translateX(calc(var(--spread) * .42));filter:blur(0)}
  72%{transform:translateY(1px) scale(1.01) translateX(calc(var(--spread) * .12))}
  100%{opacity:1;transform:none;filter:none}
}
@keyframes titleCharLast{
  0%{opacity:0;transform:translateY(34px) scale(1.24) translateX(var(--spread));filter:blur(11px)}
  48%{opacity:1;transform:translateY(-5px) scale(1.045) translateX(calc(var(--spread) * .4));filter:blur(0)}
  72%{transform:translateY(1px) scale(1.01) translateX(calc(var(--spread) * .1))}
  100%{opacity:1;transform:none;filter:none}
}
@media(prefers-reduced-motion:reduce){
  body:not(.hero-sequence) .hero-logo,body:not(.hero-sequence) .hero-copy,body:not(.hero-sequence) .hero-title .char{opacity:1!important;transform:none!important;filter:none!important}
  body.hero-sequence .hero-logo,body.hero-sequence .hero-logo img,body.hero-sequence .hero-logo::before,body.hero-sequence .hero-copy,body.hero-sequence .hero-title .char{animation:none!important;opacity:1!important;transform:none!important;filter:none!important}
}


/* ===== v6.6.3 ROBUST HERO INTRO ===== */
.hero-halo-pulse::before{
  animation:heroHaloPulse663 2.4s cubic-bezier(.16,1,.3,1) both !important;
}
@keyframes heroHaloPulse663{
  0%{opacity:0;transform:scale(.62);box-shadow:0 0 0 rgba(255,255,255,0)}
  42%{opacity:1;transform:scale(1.16);box-shadow:0 0 110px rgba(255,255,255,.42),0 22px 70px rgba(29,78,93,.18),inset 0 0 60px rgba(116,205,224,.15)}
  100%{opacity:.76;transform:scale(1);box-shadow:0 0 80px rgba(255,255,255,.28),0 22px 70px rgba(29,78,93,.15),inset 0 0 55px rgba(116,205,224,.12)}
}
/* Keep the hero visibly ready while Web Animations API controls its entrance. */
body.hero-sequence .hero-logo,
body.hero-sequence .hero-copy,
body.hero-sequence .hero-title .title-line{will-change:transform,opacity,filter;}


/* ===== FINAL HERO INTRO v6.6.4 ===== */
/* All previous hero animation declarations are neutralised here. JS controls the entrance. */
.hero-logo,.hero-logo img,.hero-copy,.hero-title .title-line{
  animation:none!important;
  animation-delay:0s!important;
  animation-play-state:running!important;
}
.hero-logo,.hero-logo img,.hero-copy,.hero-title .title-line{
  will-change:transform,opacity,filter,letter-spacing;
}
.hero-title .title-line .char{display:inline!important;opacity:inherit!important;transform:none!important;filter:none!important;animation:none!important;}
body:not(.hero-intro-active) .hero-logo{opacity:0!important;transform:translate3d(0,90px,0) scale(.52) rotate(-7deg)!important;filter:blur(14px)!important;}
body:not(.hero-intro-active) .hero-logo img{transform:scale(.72) rotate(-3deg)!important;filter:blur(4px)!important;}
body:not(.hero-intro-active) .hero-copy{opacity:0!important;transform:translate3d(0,48px,0) scale(.985)!important;filter:blur(9px)!important;}
body:not(.hero-intro-active) .hero-title .title-line{opacity:0!important;transform:translate3d(0,30px,0) scale(1.075)!important;filter:blur(12px)!important;letter-spacing:.24em!important;}
body.hero-intro-active .hero-title .title-line{overflow:visible!important;}
@media(prefers-reduced-motion:reduce){
  body:not(.hero-intro-active) .hero-logo,body:not(.hero-intro-active) .hero-logo img,body:not(.hero-intro-active) .hero-copy,body:not(.hero-intro-active) .hero-title .title-line{opacity:1!important;transform:none!important;filter:none!important;letter-spacing:normal!important;}
}


/* =========================================================
   v6.6.5 — GUARANTEED VISIBLE HERO INTRO
   The logo deliberately grows from tiny -> oversized -> settled.
   The two headline lines spread apart -> tighten -> settle.
   Triggered by .hero-reveal-now after the loader.
   ========================================================= */
@keyframes pbrLogoSmallToBig665{
  0%{opacity:0;transform:translate3d(0,55px,0) scale(.16) rotate(-8deg);filter:blur(12px) drop-shadow(0 0 0 rgba(0,0,0,0))}
  38%{opacity:1;transform:translate3d(0,-12px,0) scale(1.16) rotate(2deg);filter:blur(0) drop-shadow(0 28px 38px rgba(18,58,72,.30))}
  58%{transform:translate3d(0,5px,0) scale(.96) rotate(-.8deg)}
  76%{transform:translate3d(0,-2px,0) scale(1.035) rotate(.25deg)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1) rotate(0);filter:blur(0) drop-shadow(0 26px 34px rgba(18,58,72,.24))}
}
@keyframes pbrLogoImage665{
  0%{transform:scale(.86);filter:blur(2px)}
  48%{transform:scale(1.025);filter:blur(0)}
  72%{transform:scale(.985)}
  100%{transform:scale(1);filter:blur(0)}
}
@keyframes pbrHalo665{
  0%{opacity:0;transform:scale(.25)}
  42%{opacity:1;transform:scale(1.18)}
  70%{opacity:.72;transform:scale(.98)}
  100%{opacity:.82;transform:scale(1)}
}
@keyframes pbrTitleMemory665{
  0%{opacity:0;transform:translate3d(0,24px,0) scale(.94);letter-spacing:.34em;filter:blur(12px)}
  45%{opacity:1;transform:translate3d(0,-5px,0) scale(1.025);letter-spacing:.17em;filter:blur(0)}
  72%{transform:translate3d(0,2px,0) scale(.995);letter-spacing:.035em}
  100%{opacity:1;transform:none;letter-spacing:normal;filter:blur(0)}
}
@keyframes pbrTitleLast665{
  0%{opacity:0;transform:translate3d(0,30px,0) scale(.92);letter-spacing:.42em;filter:blur(13px)}
  45%{opacity:1;transform:translate3d(0,-6px,0) scale(1.035);letter-spacing:.20em;filter:blur(0)}
  72%{transform:translate3d(0,2px,0) scale(.995);letter-spacing:.045em}
  100%{opacity:1;transform:none;letter-spacing:normal;filter:blur(0)}
}
@keyframes pbrCopy665{
  0%{opacity:0;transform:translateY(22px);filter:blur(7px)}
  100%{opacity:1;transform:none;filter:blur(0)}
}

/* Initial state before the guaranteed trigger. */
body:not(.hero-reveal-now) .hero-logo{opacity:0!important;transform:translate3d(0,55px,0) scale(.16) rotate(-8deg)!important;filter:blur(12px)!important}
body:not(.hero-reveal-now) .hero-logo img{transform:scale(.86)!important;filter:blur(2px)!important}
body:not(.hero-reveal-now) .hero-title .title-line{opacity:0!important;transform:translate3d(0,24px,0) scale(.94)!important;letter-spacing:.34em!important;filter:blur(12px)!important}
body:not(.hero-reveal-now) .hero-copy{opacity:0!important;transform:translateY(22px)!important;filter:blur(7px)!important}

body.hero-reveal-now .hero-logo{animation:pbrLogoSmallToBig665 1800ms cubic-bezier(.16,1,.3,1) both!important;will-change:transform,opacity,filter}
body.hero-reveal-now .hero-logo img{animation:pbrLogoImage665 1800ms cubic-bezier(.16,1,.3,1) 40ms both!important}
body.hero-reveal-now .hero-logo::before{animation:pbrHalo665 2100ms cubic-bezier(.16,1,.3,1) 80ms both!important}
body.hero-reveal-now .hero-copy{animation:pbrCopy665 1000ms cubic-bezier(.16,1,.3,1) 380ms both!important}
body.hero-reveal-now .hero-title .title-memory{animation:pbrTitleMemory665 1650ms cubic-bezier(.16,1,.3,1) 520ms both!important}
body.hero-reveal-now .hero-title .title-last{animation:pbrTitleLast665 1750ms cubic-bezier(.16,1,.3,1) 680ms both!important}

@media(prefers-reduced-motion:reduce){
 body:not(.hero-reveal-now) .hero-logo,body:not(.hero-reveal-now) .hero-logo img,body:not(.hero-reveal-now) .hero-title .title-line,body:not(.hero-reveal-now) .hero-copy,
 body.hero-reveal-now .hero-logo,body.hero-reveal-now .hero-logo img,body.hero-reveal-now .hero-title .title-line,body.hero-reveal-now .hero-copy{opacity:1!important;transform:none!important;filter:none!important;letter-spacing:normal!important;animation:none!important}
}

/* ===== v6.6.8 — HERO TITLE CONTAINMENT FIX =====
   Keep the animated headline inside the glass panel at every stage.
*/
.hero-copy{
  min-width:0 !important;
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}
.hero-title{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}
.hero-title .title-line{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  white-space:nowrap !important;
  font-size:clamp(42px,4.65vw,82px) !important;
  line-height:.98 !important;
  letter-spacing:-.035em !important;
  overflow:visible !important;
}
.hero-title .title-last{
  font-size:clamp(40px,4.45vw,78px) !important;
}
/* The entrance still spreads the type, but never enough to push it outside. */
@keyframes pbrTitleMemory665Safe{
  0%{opacity:0;transform:translate3d(0,24px,0) scale(.94);letter-spacing:.11em;filter:blur(12px)}
  45%{opacity:1;transform:translate3d(0,-5px,0) scale(1.018);letter-spacing:.055em;filter:blur(0)}
  72%{transform:translate3d(0,2px,0) scale(.997);letter-spacing:.008em}
  100%{opacity:1;transform:none;letter-spacing:-.035em;filter:blur(0)}
}
@keyframes pbrTitleLast665Safe{
  0%{opacity:0;transform:translate3d(0,30px,0) scale(.92);letter-spacing:.13em;filter:blur(13px)}
  45%{opacity:1;transform:translate3d(0,-6px,0) scale(1.02);letter-spacing:.065em;filter:blur(0)}
  72%{transform:translate3d(0,2px,0) scale(.997);letter-spacing:.008em}
  100%{opacity:1;transform:none;letter-spacing:-.035em;filter:blur(0)}
}
body.hero-reveal-now .hero-title .title-memory{
  animation:pbrTitleMemory665Safe 1650ms cubic-bezier(.16,1,.3,1) 520ms both !important;
}
body.hero-reveal-now .hero-title .title-last{
  animation:pbrTitleLast665Safe 1750ms cubic-bezier(.16,1,.3,1) 680ms both !important;
}
@media(max-width:1100px){
  .hero-title .title-line{font-size:clamp(38px,5vw,68px) !important}
  .hero-title .title-last{font-size:clamp(36px,4.8vw,65px) !important}
}
@media(max-width:860px){
  .hero-copy{overflow:hidden !important}
  .hero-title{overflow:hidden !important}
  .hero-title .title-line{white-space:normal !important;font-size:clamp(40px,10vw,68px) !important}
  .hero-title .title-last{font-size:clamp(38px,9.5vw,64px) !important}
}

/* ===== v6.6.9 GUARANTEED LOADER MOTION ===== */
/* Single-property animation tracks so the loader remains visibly animated throughout the 4s screen. */
.site-loading .page-loader .loader-core{
  animation:loaderCoreLoop 3.8s cubic-bezier(.22,1,.36,1) infinite !important;
}
.site-loading .page-loader .loader-core img{
  animation:loaderLogoLoop 3.8s cubic-bezier(.22,1,.36,1) infinite !important;
  opacity:.48 !important;
}
.site-loading .page-loader .loader-core span{
  animation:loaderPbrLoop 3.8s ease-in-out infinite !important;
}
.site-loading .page-loader .orbit-a{
  animation:orbit 2.8s linear infinite,loaderOrbitPulse 1.4s ease-in-out infinite !important;
}
.site-loading .page-loader .orbit-b{
  animation:orbitReverse 3.6s linear infinite,loaderOrbitPulse 1.9s ease-in-out infinite !important;
}
.site-loading .page-loader .loader-copy strong{
  animation:loaderCopyLoop 3.8s ease-in-out infinite !important;
}
.site-loading .page-loader .loader-copy span{
  animation:loaderSubLoop 3.8s ease-in-out infinite !important;
}
.site-loading .page-loader .loader-progress i{
  transform-origin:left center !important;
  animation:loaderProgressLoop 3.8s linear infinite !important;
}
.site-loading .page-loader .loader-progress i::after{
  animation:loaderBarShine .95s linear infinite !important;
}
@keyframes loaderCoreLoop{
  0%{opacity:0;transform:scale(.18) rotate(-14deg);filter:blur(16px)}
  18%{opacity:1;transform:scale(1.18) rotate(3deg);filter:blur(0)}
  28%{transform:scale(.96) rotate(-1deg)}
  42%{transform:scale(1.05) rotate(0)}
  62%{transform:scale(.98) rotate(0)}
  78%{transform:scale(1.035) rotate(1deg)}
  100%{opacity:1;transform:scale(1) rotate(0);filter:blur(0)}
}
@keyframes loaderLogoLoop{
  0%{transform:scale(.22) rotate(-18deg);filter:blur(10px);opacity:0}
  18%{transform:scale(1.14) rotate(4deg);filter:blur(0);opacity:.55}
  34%{transform:scale(.98) rotate(0);opacity:.46}
  58%{transform:scale(1.05) rotate(2deg);opacity:.52}
  78%{transform:scale(.99) rotate(0);opacity:.46}
  100%{transform:scale(1) rotate(0);filter:blur(0);opacity:.48}
}
@keyframes loaderPbrLoop{
  0%,10%{opacity:0;transform:scale(.4);letter-spacing:.28em}
  22%{opacity:1;transform:scale(1.14);letter-spacing:.12em}
  32%{transform:scale(1);letter-spacing:.14em}
  78%{transform:scale(1.05);text-shadow:0 0 18px rgba(66,191,233,.28)}
  100%{opacity:1;transform:scale(1);letter-spacing:.14em;text-shadow:none}
}
@keyframes loaderCopyLoop{
  0%,14%{opacity:0;transform:translateY(18px);filter:blur(6px)}
  26%{opacity:1;transform:translateY(0);filter:blur(0)}
  78%{opacity:1;transform:translateY(-2px)}
  100%{opacity:1;transform:translateY(0)}
}
@keyframes loaderSubLoop{
  0%,20%{opacity:0;transform:translateY(10px);filter:blur(4px)}
  34%{opacity:1;transform:translateY(0);filter:blur(0)}
  82%{opacity:.72;transform:translateY(1px)}
  100%{opacity:1;transform:translateY(0)}
}
@keyframes loaderProgressLoop{
  0%{transform:scaleX(0);filter:brightness(.9)}
  82%{transform:scaleX(1);filter:brightness(1.18)}
  100%{transform:scaleX(1);filter:brightness(1)}
}

/* =========================================================
   FINAL CREDITS PLACEMENT — v6.6.10
   Keep the credits as the final content section and place
   each supplied portrait directly beside the person's name.
   ========================================================= */
#credits.credits-final{
  position:relative !important;
  margin-top:0 !important;
  padding:78px clamp(24px,7vw,110px) 70px !important;
  background:linear-gradient(180deg,#f7fcfd 0%,#eef8f5 100%) !important;
  border-top:1px solid rgba(66,191,233,.14) !important;
}
.credits-final-inner{width:min(1320px,100%);margin:0 auto}
.credits-final-heading{text-align:left;margin-bottom:30px}
.credits-final-heading .eyebrow{margin-bottom:8px}
.credits-final-heading h2{margin:0;font-family:"Playfair Display",serif;font-size:clamp(32px,4.2vw,54px);line-height:1.02;color:#18343a}
.credits-final-heading h2 em{font-style:normal;background:linear-gradient(90deg,#159dcc,#4f7f59,#ff8f38);-webkit-background-clip:text;background-clip:text;color:transparent}
.credits-final-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
.credit-final-card{
  min-width:0;padding:30px 28px;border-radius:24px;
  background:rgba(255,255,255,.78) !important;
  border:1px solid rgba(57,132,143,.14) !important;
  box-shadow:0 18px 48px rgba(42,91,101,.09) !important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s ease,border-color .45s ease;
}
.credit-final-card:hover{transform:translateY(-7px);box-shadow:0 26px 60px rgba(42,91,101,.15) !important;border-color:rgba(66,191,233,.28) !important}
.credit-role{display:block;color:#159dcc;font-size:10px;font-weight:900;letter-spacing:.16em;line-height:1.4;margin-bottom:22px}
.credit-person-row{display:flex;align-items:center;gap:17px;min-width:0}
.credit-person-row img{width:72px;height:72px;flex:0 0 72px;border-radius:50%;object-fit:cover;object-position:center;border:3px solid rgba(255,255,255,.96);box-shadow:0 8px 22px rgba(35,88,96,.15),0 0 0 1px rgba(66,191,233,.18)}
.credit-person-row h3{margin:0 0 7px;color:#18343a;font-family:"Playfair Display",serif;font-size:clamp(22px,2vw,28px);line-height:1.05;letter-spacing:-.025em}
.credit-person-row p{margin:0;color:#607b82;font-size:12px;line-height:1.45}
.credits-final .copyright{margin:30px 0 0;max-width:980px;color:#5f7389;border-top:1px solid rgba(57,132,143,.16);padding-top:20px;font-size:9px;line-height:1.6}
@media(max-width:980px){.credits-final-grid{grid-template-columns:1fr}.credit-final-card{padding:24px}.credits-final-heading{text-align:center}}
@media(max-width:520px){#credits.credits-final{padding:62px 18px 54px !important}.credit-person-row img{width:62px;height:62px;flex-basis:62px}.credit-person-row h3{font-size:21px}.credit-person-row p{font-size:12px}}

/* =========================================================
   CREDITS REFINEMENT — v6.6.11
   Match the supplied reference: centered role pill, portrait,
   name and description inside three equal premium cards.
   ========================================================= */
#credits.credits-final{
  padding:72px clamp(18px,5vw,72px) 68px !important;
  background:linear-gradient(180deg,#fbfaf6 0%,#f7f5ef 100%) !important;
}
#credits.credits-final .credits-final-inner{width:min(1280px,100%);margin:0 auto}
#credits.credits-final .credits-final-heading{display:none !important}
#credits.credits-final .credits-final-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
  align-items:stretch;
}
#credits.credits-final .credit-final-card{
  min-height:326px;
  box-sizing:border-box;
  padding:38px 28px 32px !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.46) !important;
  border:1px solid rgba(160,145,116,.30) !important;
  box-shadow:none !important;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s ease,background .45s ease,border-color .45s ease;
}
#credits.credits-final .credit-final-card:hover{
  transform:translateY(-6px);
  background:rgba(255,255,255,.68) !important;
  box-shadow:0 18px 38px rgba(65,59,45,.09) !important;
  border-color:rgba(160,145,116,.46) !important;
}
#credits.credits-final .credit-role{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  max-width:100%;
  min-height:36px;
  box-sizing:border-box;
  padding:8px 15px;
  margin:0 auto 23px;
  border-radius:999px;
  background:rgba(213,241,248,.72);
  color:#159dcc;
  font-size:11px;
  font-weight:900;
  letter-spacing:.13em;
  line-height:1.1;
  white-space:nowrap;
}
#credits.credits-final .credit-final-card:nth-child(2) .credit-role{
  background:rgba(246,228,215,.78);
  color:#a85d2e;
}
#credits.credits-final .credit-final-card:nth-child(3) .credit-role{
  background:rgba(225,239,222,.82);
  color:#5d8559;
}
#credits.credits-final .credit-person-row{
  width:100%;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:0;
}
#credits.credits-final .credit-person-row img{
  width:110px;
  height:110px;
  flex:0 0 110px;
  border-radius:50%;
  object-fit:cover;
  object-position:center;
  border:3px solid rgba(255,255,255,.98);
  box-shadow:0 0 0 1px rgba(55,67,65,.20),0 10px 24px rgba(35,52,54,.12);
  margin:0 0 24px;
}
#credits.credits-final .credit-person-row > div{width:100%;min-width:0}
#credits.credits-final .credit-person-row h3{
  margin:0 0 9px;
  color:#182d33;
  font-family:"Playfair Display",serif;
  font-size:clamp(24px,2.1vw,29px);
  line-height:1.08;
  letter-spacing:-.025em;
  white-space:normal;
}
#credits.credits-final .credit-person-row p{
  margin:0;
  color:#71808d;
  font-size:14px;
  line-height:1.45;
}
#credits.credits-final .copyright{
  margin:30px auto 0;
  max-width:980px;
  color:#607987;
  border-top:1px solid rgba(160,145,116,.22);
  padding-top:20px;
  font-size:9px;
  line-height:1.6;
}
@media(max-width:980px){
  #credits.credits-final .credits-final-grid{grid-template-columns:1fr;gap:18px}
  #credits.credits-final .credit-final-card{min-height:300px}
}
@media(max-width:520px){
  #credits.credits-final{padding:54px 14px 48px !important}
  #credits.credits-final .credit-final-card{min-height:285px;padding:30px 18px 28px !important}
  #credits.credits-final .credit-role{font-size:9px;padding:8px 12px;letter-spacing:.10em}
  #credits.credits-final .credit-person-row img{width:96px;height:96px;flex-basis:96px;margin-bottom:20px}
  #credits.credits-final .credit-person-row h3{font-size:23px}
  #credits.credits-final .credit-person-row p{font-size:13px}
}

/* v6.6.12 — Credits reference layout: editorial heading + centered profile cards */
#credits.credits-final{
  padding:38px clamp(18px,5vw,72px) 54px !important;
  background:#fff !important;
}
#credits.credits-final .credits-final-inner{
  width:min(1000px,100%);
  margin:0 auto;
}
#credits.credits-final .credits-final-heading{
  display:block !important;
  margin:0 0 46px;
  text-align:center;
}
#credits.credits-final .credits-final-heading .eyebrow{
  margin:0 0 23px;
  color:#b07b1d;
  font-size:11px;
  font-weight:800;
  letter-spacing:.22em;
  line-height:1.2;
  text-align:left;
}
#credits.credits-final .credits-final-heading h2{
  margin:0;
  color:#17191b;
  font-family:"Playfair Display",Georgia,serif;
  font-size:clamp(38px,4.3vw,56px);
  line-height:1.08;
  letter-spacing:-.035em;
  font-weight:700;
}
#credits.credits-final .credits-final-heading h2 em{
  color:#b07b1d;
  background:none;
  -webkit-text-fill-color:currentColor;
  font-style:italic;
}
#credits.credits-final .credits-final-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:30px;
  align-items:stretch;
}
#credits.credits-final .credit-final-card{
  min-height:342px;
  padding:39px 28px 30px !important;
  border-radius:16px !important;
  background:#faf9f5 !important;
  border:1px solid #ded7c9 !important;
  box-shadow:none !important;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease,border-color .35s ease;
}
#credits.credits-final .credit-final-card:hover{
  transform:translateY(-5px);
  background:#faf9f5 !important;
  border-color:#cfc5b3 !important;
  box-shadow:0 16px 30px rgba(45,39,28,.08) !important;
}
#credits.credits-final .credit-role{
  min-height:35px;
  padding:9px 15px;
  margin:0 auto 21px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  line-height:1;
}
#credits.credits-final .credit-person-row{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
}
#credits.credits-final .credit-person-row img{
  width:106px;
  height:106px;
  flex:0 0 106px;
  margin:0 0 24px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid #fff;
  box-shadow:0 0 0 1px rgba(31,37,39,.28),0 10px 24px rgba(31,37,39,.10);
}
#credits.credits-final .credit-person-row > div{width:100%;min-width:0}
#credits.credits-final .credit-person-row h3{
  margin:0 0 9px;
  color:#111b20;
  font-family:"Playfair Display",Georgia,serif;
  font-size:clamp(22px,2vw,26px);
  line-height:1.18;
  letter-spacing:-.025em;
  font-weight:700;
}
#credits.credits-final .credit-person-row p{
  margin:0;
  color:#77818b;
  font-size:13px;
  line-height:1.45;
}
#credits.credits-final .credit-final-card:nth-child(3) .credit-person-row p{
  max-width:230px;
  margin-left:auto;
  margin-right:auto;
}
#credits.credits-final .copyright{
  margin:56px 0 0;
  max-width:none;
  color:#667987;
  border-top:1px solid #ded9cf;
  padding-top:31px;
  font-size:9px;
  line-height:1.7;
}
@media(max-width:980px){
  #credits.credits-final .credits-final-inner{width:min(720px,100%)}
  #credits.credits-final .credits-final-grid{grid-template-columns:1fr;gap:18px}
  #credits.credits-final .credit-final-card{min-height:320px}
  #credits.credits-final .credits-final-heading .eyebrow{text-align:center}
}
@media(max-width:520px){
  #credits.credits-final{padding:34px 16px 42px !important}
  #credits.credits-final .credits-final-heading{margin-bottom:30px}
  #credits.credits-final .credits-final-heading h2{font-size:34px}
  #credits.credits-final .credit-final-card{min-height:305px;padding:30px 18px 26px !important}
  #credits.credits-final .credit-person-row img{width:92px;height:92px;flex-basis:92px;margin-bottom:20px}
  #credits.credits-final .credit-person-row h3{font-size:22px}
  #credits.credits-final .copyright{margin-top:40px;padding-top:24px}
}

/* v6.6.13 — contrast repair for light excursion UI */
.email-verified-state{background:linear-gradient(135deg,#eff9ea,#f7fcf4)!important;border-color:rgba(92,154,82,.28)!important;color:#315f37!important;box-shadow:0 10px 28px rgba(68,120,74,.08)!important}
.email-verified-icon{background:#dcf7df!important;border-color:rgba(72,171,102,.35)!important;color:#23814a!important;box-shadow:0 0 18px rgba(72,171,102,.14)!important}
.email-verified-state strong{color:#315f37!important;font-size:11px!important;font-weight:800!important}
.email-verified-state span:last-child{color:#66806b!important;font-size:9px!important}
.registration-id.pending-generation{color:#365b64!important;background:#f4fbfc!important}.registration-id:not(.pending-generation){color:#18343a!important;background:#f4fafb!important;opacity:1!important;text-shadow:none!important}

/* ===== v6.6.16 — COMPACT HERO GLASS PANEL =====
   Keep the translucent glassmorphism, but size it tightly around the hero content.
   Removes the large empty glass area while preserving the premium glass look.
*/
.hero-copy{
  position:relative !important;
  width:fit-content !important;
  max-width:min(100%, 820px) !important;
  min-width:0 !important;
  justify-self:start !important;
  align-self:center !important;
  padding:26px 30px !important;
  border:1px solid rgba(255,255,255,.64) !important;
  border-radius:24px !important;
  background:linear-gradient(135deg,rgba(255,255,255,.56),rgba(247,252,252,.24)) !important;
  box-shadow:0 18px 48px rgba(35,75,87,.11),inset 0 1px 0 rgba(255,255,255,.72) !important;
  backdrop-filter:blur(10px) saturate(112%) !important;
  -webkit-backdrop-filter:blur(10px) saturate(112%) !important;
  overflow:visible !important;
}
.hero-copy::before{
  inset:1px !important;
  border-radius:23px !important;
}
.hero-title{
  max-width:100% !important;
}
@media(max-width:860px){
  .hero-copy{
    width:min(100%, 760px) !important;
    max-width:100% !important;
    padding:22px 20px !important;
    border-radius:22px !important;
    justify-self:center !important;
  }
  .hero-copy::before{border-radius:21px !important}
}

/* ===== v6.6.17 — RULES VISIBILITY & PROFESSIONAL CLEANUP ===== */
.rules .rule-list{
  width:min(100%,1120px) !important;
  max-width:none !important;
  margin-top:34px !important;
}
.rules .rule-list p{
  display:grid !important;
  grid-template-columns:52px minmax(0,1fr) !important;
  gap:14px !important;
  align-items:start !important;
  padding:19px 0 !important;
  margin:0 !important;
  border-bottom:1px solid rgba(47,104,113,.18) !important;
  color:#425f67 !important;
  font-size:13px !important;
  line-height:1.65 !important;
  font-weight:500 !important;
  font-family:"Inter","DM Sans",Arial,sans-serif !important;
  letter-spacing:.005em !important;
  transition:background .2s ease, padding-left .2s ease !important;
}
.rules .rule-list p:first-child{
  border-top:1px solid rgba(47,104,113,.18) !important;
}
.rules .rule-list p:hover{
  background:rgba(255,255,255,.42) !important;
  padding-left:10px !important;
  border-radius:8px !important;
}
.rules .rule-list b{
  display:block !important;
  width:auto !important;
  color:#129fcf !important;
  font-size:12px !important;
  font-weight:900 !important;
  font-family:"Inter","DM Sans",Arial,sans-serif !important;
  letter-spacing:.08em !important;
  line-height:1.65 !important;
}
.rules .golden{
  color:#244c55 !important;
  font-weight:700 !important;
}
@media(max-width:640px){
  .rules .rule-list{margin-top:28px !important}
  .rules .rule-list p{
    grid-template-columns:40px minmax(0,1fr) !important;
    gap:10px !important;
    padding:16px 0 !important;
    font-size:12px !important;
  }
}

/* ===== v6.6.20 — HERO VISIBILITY SAFETY FIX =====
   Never leave the homepage hero blank if the intro class is delayed or missed.
   The loader controls the hidden state; once it is gone, hero content is always visible.
*/
body:not(.site-loading) .hero-logo,
body:not(.site-loading) .hero-logo img,
body:not(.site-loading) .hero-copy,
body:not(.site-loading) .hero-title .title-line{
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  filter:none !important;
  letter-spacing:normal !important;
}

/* Keep the compact glass panel, but make sure its content cannot be hidden by
   the older intro-state selectors. */
body:not(.site-loading) .hero-copy{
  display:block !important;
  position:relative !important;
  z-index:2 !important;
}

/* Do not let the decorative pseudo-layer cover the actual copy. */
.hero-copy::after{
  z-index:-1 !important;
  pointer-events:none !important;
}


/* Trip countdown */
.trip-countdown{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:28px clamp(24px,6vw,90px);background:#18343a;color:#f7fcfd;border-top:1px solid #cfe5e5;border-bottom:1px solid #cfe5e5}.trip-countdown-copy .mini-label{color:#55c7f2}.trip-countdown-copy h2{font:700 clamp(28px,3.4vw,46px)/1.05 "Playfair Display",serif;margin:8px 0 7px;letter-spacing:-.03em}.trip-countdown-copy h2 em{font-style:italic;color:#b9e9f6}.trip-countdown-copy p{margin:0;color:#b9cdd1;font-size:12px;font-weight:700;letter-spacing:.06em}.countdown-timer{display:grid;grid-template-columns:repeat(4,minmax(70px,1fr));gap:10px;min-width:min(560px,48%)}.countdown-timer>div{padding:14px 12px;text-align:center;border:1px solid rgba(255,255,255,.18);border-radius:14px;background:rgba(255,255,255,.07)}.countdown-timer strong{display:block;font:700 clamp(24px,3vw,38px)/1 "Playfair Display",serif;color:#fff}.countdown-timer span{display:block;margin-top:5px;font-size:8px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:#a8c2c7}.trip-countdown.is-complete{justify-content:center}.trip-countdown.is-complete .trip-countdown-copy{text-align:center}.trip-countdown.is-complete .countdown-timer{display:none}@media(max-width:850px){.trip-countdown{align-items:flex-start;flex-direction:column}.countdown-timer{width:100%;min-width:0}}@media(max-width:520px){.trip-countdown{padding:24px 18px}.countdown-timer{grid-template-columns:repeat(2,1fr)}}



/* ===== STUDENT REPRESENTATIVE FEATURE ===== */
.representative-cta{
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  width:100%;
  max-width:none;
  margin:28px 0 0;
  padding:28px clamp(20px,3vw,34px);
  border:1px solid rgba(115,220,255,.18);
  border-radius:26px;
  overflow:hidden;
  background:
    linear-gradient(120deg,rgba(10,28,40,.96),rgba(9,20,34,.94)),
    radial-gradient(circle at 85% 20%,rgba(255,154,61,.16),transparent 32%);
  box-shadow:0 22px 60px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.045);
  transform:translateZ(0);
}
.representative-cta::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(85,199,242,.055),transparent);
  transform:translateX(-100%);
  transition:transform .9s var(--butter);
  pointer-events:none;
  z-index:-1;
}
.representative-cta:hover::before{transform:translateX(100%)}
.representative-cta-glow{
  position:absolute;
  width:230px;height:230px;
  right:-70px;top:-130px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,154,61,.17),transparent 68%);
  filter:blur(4px);
  pointer-events:none;
  z-index:-1;
}
.representative-cta-content{max-width:780px;flex:1;min-width:0}
.representative-kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:var(--adventure-orange);
  font-size:10px;
  font-weight:900;
  letter-spacing:.18em;
}
.representative-kicker::before{
  content:"";
  width:7px;height:7px;
  border-radius:50%;
  background:var(--adventure-orange);
  box-shadow:0 0 0 5px rgba(255,154,61,.09),0 0 18px rgba(255,154,61,.35);
}
.representative-cta h2{
  margin:8px 0 7px;
  color:#fff;
  font-family:"Playfair Display",Georgia,serif;
  font-size:clamp(28px,3.8vw,44px);
  line-height:1.08;
  letter-spacing:-.025em;
}
.representative-cta h2 .representative-cta-lead{color:#fff !important;} .representative-cta h2 em{color:var(--sky-blue);font-style:italic}
.representative-cta p{
  margin:0;
  max-width:690px;
  color:#a9bfd0;
  font-size:14px;
  line-height:1.65;
}
.representative-cta-btn{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:48px;
  padding:0 19px;
  border:1px solid rgba(115,220,255,.26);
  border-radius:14px;
  background:linear-gradient(135deg,var(--sky-blue),#7fd8ef);
  color:#09202a;
  text-decoration:none;
  font-size:12px;
  font-weight:900;
  letter-spacing:.03em;
  box-shadow:0 12px 30px rgba(85,199,242,.18),inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .28s var(--butter),box-shadow .28s ease,filter .28s ease;
}
.representative-cta-btn span{font-size:18px;line-height:1;transition:transform .28s var(--butter)}
.representative-cta-btn:hover{transform:translateY(-3px);filter:saturate(1.08);box-shadow:0 18px 38px rgba(85,199,242,.26),inset 0 1px 0 rgba(255,255,255,.65)}
.representative-cta-btn:hover span{transform:translate(2px,-2px)}
.representative-cta-btn:focus-visible{outline:2px solid rgba(255,255,255,.8);outline-offset:4px}
@media(max-width:760px){
  .representative-cta{display:block;margin:0 20px 24px;padding:26px 22px;border-radius:22px}
  .representative-cta h2{font-size:31px}
  .representative-cta p{font-size:13px}
  .representative-cta-btn{width:100%;justify-content:center;margin-top:20px}
}
@media(prefers-reduced-motion:reduce){
  .representative-cta::before{display:none}
  .representative-cta-btn,.representative-cta-btn span{transition:none}
}


/* =========================================================
   STUDENT TITLE CATALOGUE — 40 TITLES / 4 BOOK PAGES
   ========================================================= */
.title-book-wrap{margin-top:42px;}
.title-book{position:relative;display:flex;min-height:0;border-radius:24px;overflow:hidden;background:linear-gradient(135deg,#0d2732 0%,#153845 52%,#102833 100%);border:1px solid rgba(115,220,255,.22);box-shadow:0 28px 70px rgba(5,35,44,.20),inset 0 1px 0 rgba(255,255,255,.08);}
.title-book-spine{width:22px;flex:0 0 22px;background:linear-gradient(90deg,#081b24,#1f5262 45%,#0b2029);box-shadow:inset -1px 0 rgba(255,255,255,.08),inset 4px 0 rgba(0,0,0,.18);}
.title-book-page{position:relative;flex:1;margin:14px 14px 14px 0;padding:30px 34px 24px;border-radius:4px 18px 18px 4px;background:linear-gradient(145deg,#fffdf7,#f4f0e5);color:#17343e;box-shadow:-10px 0 24px rgba(0,0,0,.12),inset 0 0 0 1px rgba(114,92,54,.08);}
.title-book-page::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(64,91,99,.025) 0,rgba(64,91,99,.025) 1px,transparent 1px,transparent 5px);pointer-events:none;opacity:.5;}
.title-book-page::after{content:"";position:absolute;top:0;bottom:0;left:17px;width:1px;background:rgba(184,78,68,.12);pointer-events:none;}
.title-book-header{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding:0 4px 18px 26px;border-bottom:1px solid rgba(36,67,75,.14);}
.title-book-kicker{display:block;color:#d27a2c;font:700 9px/1.2 "DM Sans",sans-serif;letter-spacing:.18em;margin-bottom:7px;}
.title-book-header h3{margin:0;color:#17343e;font:700 clamp(26px,3vw,38px)/1.05 "Playfair Display",serif;letter-spacing:-.02em;}
.title-book-page-no{white-space:nowrap;color:#60747b;font:700 10px/1 "DM Sans",sans-serif;letter-spacing:.13em;}
.title-book-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,auto);gap:10px 22px;padding:20px 0 16px 26px;}
.title-book-entry{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr);gap:11px;align-items:start;padding:13px 13px 12px 0;border-bottom:1px dashed rgba(36,67,75,.18);min-width:0;}
.title-book-entry:nth-last-child(-n+2){border-bottom:0;}
.title-book-number{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#173f4c;color:#f5d49d;font:700 10px/1 "DM Sans",sans-serif;letter-spacing:.04em;box-shadow:0 3px 8px rgba(23,63,76,.14);}
.title-book-entry h4{margin:1px 0 7px;color:#17343e;font:700 15px/1.18 "DM Sans",sans-serif;letter-spacing:.025em;}
.title-book-entry p{margin:0;color:#64777c;font:400 11px/1.48 "DM Sans",sans-serif;}
.title-book-footer{position:relative;z-index:1;display:flex;justify-content:space-between;gap:15px;margin-left:26px;padding-top:13px;border-top:1px solid rgba(36,67,75,.14);color:#7b898c;font:700 9px/1.2 "DM Sans",sans-serif;letter-spacing:.08em;text-transform:uppercase;}
.title-book-controls{display:flex;align-items:center;justify-content:center;gap:26px;margin:18px auto 0;}
.title-book-nav{appearance:none;border:1px solid rgba(66,191,233,.25);background:#fff;color:#24434b;border-radius:999px;padding:11px 18px;font:700 11px/1 "DM Sans",sans-serif;cursor:pointer;transition:transform .2s ease,background .2s ease,border-color .2s ease,opacity .2s ease;}
.title-book-nav:hover:not(:disabled){transform:translateY(-2px);background:#eef9fb;border-color:rgba(66,191,233,.5);}
.title-book-nav:disabled{opacity:.38;cursor:not-allowed;}
.title-book-dots{display:flex;gap:8px;align-items:center;}
.title-book-dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:#b8cbd0;cursor:pointer;transition:transform .2s ease,background .2s ease;}
.title-book-dot:hover{transform:scale(1.25);}
.title-book-dot.active{background:#42bfe9;transform:scale(1.25);}
@media(max-width:860px){
  .title-book{min-height:0;}
  .title-book-grid{grid-template-columns:1fr;grid-template-rows:none;gap:0;padding-right:8px;}
  .title-book-entry:nth-last-child(-n+2){border-bottom:1px dashed rgba(36,67,75,.18);}
  .title-book-entry:last-child{border-bottom:0;}
}
@media(max-width:600px){
  .title-book-wrap{margin-top:28px;}
  .title-book-spine{width:10px;flex-basis:10px;}
  .title-book-page{margin:8px 8px 8px 0;padding:22px 15px 18px;border-radius:3px 13px 13px 3px;}
  .title-book-page::after{left:10px;}
  .title-book-header{align-items:flex-start;flex-direction:column;padding-left:17px;gap:10px;}
  .title-book-header h3{font-size:27px;}
  .title-book-grid{padding:15px 0 10px 17px;}
  .title-book-entry{grid-template-columns:32px minmax(0,1fr);gap:9px;padding:12px 4px 12px 0;}
  .title-book-number{width:27px;height:27px;font-size:9px;}
  .title-book-entry h4{font-size:13px;}
  .title-book-entry p{font-size:10px;line-height:1.5;}
  .title-book-footer{margin-left:17px;flex-direction:column;gap:5px;}
  .title-book-controls{gap:10px;}
  .title-book-nav{padding:10px 13px;font-size:10px;}
}


/* Mobile registration alignment fix */
@media (max-width: 760px){
  .register-layout > div:first-child{min-width:0;width:100%;}
  .representative-cta{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    margin:0 0 24px !important;
    padding:26px 22px;
  }
  .representative-cta-content{width:100%;max-width:none;}
  .representative-cta h2{max-width:100%;}
  .representative-cta p{max-width:100%;}
  .representative-cta-btn{box-sizing:border-box;}
}

/* Student title availability */
.form select option:disabled,
.form select option[disabled]{
  color:#9aa7b2 !important;
  background:#e8edf0 !important;
}

/* ===== HERO GLASS PANEL REMOVED =====
   Keep the mountain/lake hero image, but make the hero copy sit directly
   on the background with no translucent glass container.
*/
.hero-copy{
  width:auto !important;
  max-width:900px !important;
  min-width:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  overflow:visible !important;
}
.hero-copy::before,
.hero-copy::after{
  content:none !important;
  display:none !important;
}
@media(max-width:860px){
  .hero-copy{
    width:auto !important;
    max-width:100% !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
}

/* ===== v6.6.45 — HERO TEXT GRADIENT FROM REFERENCE ===== */
.hero-title .title-line,
.hero-title .title-line em{
  background:linear-gradient(90deg,
    #03071E 0%,
    #370617 11%,
    #6A040F 22%,
    #9D0208 33%,
    #D00000 44%,
    #DC2F02 55%,
    #E85D04 66%,
    #F48C06 77%,
    #FAA307 88%,
    #FFBA08 100%
  ) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
}
.hero-title .title-line em{
  font-style:italic;
}

/* Hero title: reference palette only */
.hero h1,
.hero h1 em,
.hero h1 .title-line {
  background: linear-gradient(90deg, #E85004 0%, #FA8C06 34%, #FAA307 67%, #FBB539 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* ===== FINAL HERO TEXT — BRIGHT ORANGE/YELLOW ONLY ===== */
.hero-title .title-line,
.hero-title .title-line em,
.hero h1,
.hero h1 em,
.hero h1 .title-line {
  background: linear-gradient(90deg,
    #E85004 0%,
    #FA8C06 33%,
    #FAA307 66%,
    #FBB539 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: none !important;
}

/* Final hero readability: neon-white description + neon-yellow registration CTA */
.hero-copy > p{
  color:#ffffff !important;
  text-shadow:0 0 4px rgba(255,255,255,.95),0 0 10px rgba(255,255,255,.55),0 0 20px rgba(255,255,255,.28) !important;
}
.btn.primary{
  color:#101500 !important;
  background:#faff00 !important;
  border-color:#ffff66 !important;
  box-shadow:0 0 8px rgba(250,255,0,.95),0 0 20px rgba(250,255,0,.65),0 10px 30px rgba(190,200,0,.28) !important;
}
.btn.primary:hover{
  color:#101500 !important;
  background:#ffff33 !important;
  border-color:#ffff99 !important;
  box-shadow:0 0 10px rgba(250,255,0,1),0 0 28px rgba(250,255,0,.78),0 16px 36px rgba(190,200,0,.32) !important;
}


/* HERO CREDIT — neon green */
.hero-note{color:#39FF14 !important;text-shadow:0 0 6px rgba(57,255,20,.55),0 0 14px rgba(57,255,20,.28) !important}
.hero-note strong{color:#39FF14 !important;text-shadow:0 0 6px rgba(57,255,20,.65),0 0 14px rgba(57,255,20,.32) !important}

/* Final hero logo sizing update */
.hero-logo img{width:min(100%,520px)!important;}
@media(max-width:860px){.hero-logo img{width:min(78vw,390px)!important;}}
@media(max-width:600px){.hero-logo img{width:min(82vw,360px)!important;}}

/* Hero logo scale — enlarged to better match the visual weight of the hero */
.hero-logo img{width:min(125%,540px);max-width:540px;transform:scale(1.08);transform-origin:center;}
.hero-logo:hover img{transform:translate3d(0,-8px,0) scale(1.10);}
@media(max-width:1100px){.hero-logo img{width:min(120%,500px);max-width:500px;}}
@media(max-width:860px){.hero-logo img{width:min(88vw,430px);max-width:430px;transform:scale(1.04);}.hero-logo:hover img{transform:translate3d(0,-6px,0) scale(1.06);}}
@media(max-width:520px){.hero-logo img{width:min(92vw,390px);max-width:390px;}}

/* HERO LOGO — 2X SIZE UPDATE */
.hero-logo img{
  width:min(150%,1080px) !important;
  max-width:1080px !important;
  transform:scale(1) !important;
}
.hero-logo:hover img{
  transform:translate3d(0,-10px,0) scale(1.015) !important;
}
@media(max-width:1100px){
  .hero-logo img{width:min(145%,1000px) !important;max-width:1000px !important;}
}
@media(max-width:860px){
  .hero-logo img{width:min(96vw,860px) !important;max-width:860px !important;}
}
@media(max-width:600px){
  .hero-logo img{width:min(96vw,780px) !important;max-width:780px !important;}
}
@media(max-width:430px){
  .hero-logo img{width:min(96vw,700px) !important;max-width:700px !important;}
}

/* =========================================================
   COUNTDOWN — HAND-PAINTED BRUSH BANNER REDESIGN
   Recreates the supplied reference using CSS only.
   The live countdown functionality remains unchanged.
   ========================================================= */
.trip-countdown{
  position:relative;
  isolation:isolate;
  display:block;
  padding:34px clamp(24px,6vw,78px) 30px;
  min-height:154px;
  overflow:hidden;
  border:0;
  border-block:1px solid rgba(122,82,28,.12);
  background:
    radial-gradient(ellipse at 12% 35%,rgba(255,246,181,.72) 0 12%,transparent 31%),
    radial-gradient(ellipse at 89% 68%,rgba(255,226,110,.48) 0 11%,transparent 34%),
    #f7e7a7;
  color:#fff;
}

/* Main painted stroke */
.trip-countdown::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:2.1%;
  right:2.1%;
  top:7px;
  height:142px;
  transform:rotate(-.18deg);
  border-radius:24px 15px 28px 18px;
  background:
    linear-gradient(90deg,
      rgba(239,101,43,.98) 0%,
      rgba(246,130,39,.98) 22%,
      rgba(244,164,31,.96) 52%,
      rgba(242,186,32,.95) 77%,
      rgba(238,176,25,.92) 100%),
    #ef8d28;
  box-shadow:
    0 2px 0 rgba(188,91,22,.18),
    0 9px 22px rgba(136,84,18,.10);
  clip-path:polygon(
    0.5% 12%, 3% 8%, 7% 7%, 13% 5%, 20% 7%, 29% 4%, 38% 7%,
    48% 5%, 58% 7%, 68% 4%, 77% 6%, 86% 4%, 94% 7%, 99.4% 4%,
    99% 18%, 100% 31%, 98.6% 43%, 100% 57%, 98.7% 71%, 100% 84%,
    97% 91%, 91% 89%, 84% 93%, 75% 90%, 67% 94%, 57% 91%,
    48% 95%, 39% 91%, 30% 94%, 21% 90%, 13% 93%, 5% 89%,
    2% 92%, 0.8% 79%, 1.8% 65%, 0% 52%, 1.4% 39%, 0% 26%);
}

/* Painted texture / dry-brush streaks */
.trip-countdown::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:3%;
  right:3%;
  top:16px;
  height:124px;
  pointer-events:none;
  opacity:.5;
  background:
    repeating-linear-gradient(173deg,
      transparent 0 7px,
      rgba(255,235,149,.13) 8px 10px,
      transparent 11px 18px),
    repeating-linear-gradient(7deg,
      transparent 0 13px,
      rgba(183,74,23,.10) 14px 16px,
      transparent 17px 27px),
    linear-gradient(90deg,rgba(255,225,120,.15),transparent 30%,rgba(255,236,145,.12) 62%,transparent);
  filter:blur(.2px);
  mix-blend-mode:multiply;
  clip-path:polygon(0 9%,4% 4%,11% 7%,18% 3%,27% 6%,35% 4%,45% 7%,55% 3%,66% 6%,75% 4%,85% 7%,95% 4%,100% 8%,99% 88%,93% 91%,84% 87%,75% 93%,65% 89%,55% 94%,45% 90%,34% 94%,25% 89%,15% 93%,6% 88%,0 91%);
}

.trip-countdown-copy{
  position:relative;
  z-index:2;
  display:block;
  max-width:720px;
}

.trip-countdown-copy .mini-label{
  display:none;
}

.trip-countdown-copy h2{
  margin:0;
  color:#fffdf3;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(30px,4vw,46px);
  font-weight:700;
  line-height:1.02;
  letter-spacing:-.045em;
  text-shadow:0 1px 0 rgba(115,57,15,.12);
}

.trip-countdown-copy h2 em{
  color:#b71e13;
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic;
  font-weight:700;
  letter-spacing:-.035em;
}

.trip-countdown-copy p{
  margin:9px 0 0;
  color:rgba(255,249,220,.92);
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.countdown-timer{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:repeat(4,minmax(68px,1fr));
  gap:10px;
  width:min(600px,100%);
  min-width:0;
  margin:18px 0 0;
}

.countdown-timer>div{
  padding:10px 12px;
  text-align:center;
  border:1px solid rgba(132,71,20,.16);
  border-radius:9px;
  background:rgba(255,248,211,.38);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
  backdrop-filter:blur(1px);
}

.countdown-timer strong{
  display:block;
  color:#7c2117;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(22px,2.7vw,34px);
  line-height:1;
}

.countdown-timer span{
  display:block;
  margin-top:5px;
  color:#8c3d20;
  font-size:8px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.trip-countdown.is-complete{
  justify-content:initial;
}

.trip-countdown.is-complete .trip-countdown-copy{
  text-align:left;
}

.trip-countdown.is-complete .countdown-timer{
  display:none;
}

@media (min-width:851px){
  .trip-countdown-copy h2{padding-top:5px}
  .countdown-timer{position:absolute;right:6%;bottom:23px;width:min(500px,40%);margin:0}
}

@media (max-width:850px){
  .trip-countdown{padding:29px 24px 25px;min-height:0}
  .trip-countdown::before{left:1.5%;right:1.5%;height:calc(100% - 14px)}
  .trip-countdown::after{left:2.5%;right:2.5%;height:calc(100% - 27px)}
  .countdown-timer{width:100%}
}

@media (max-width:520px){
  .trip-countdown{padding:25px 18px 22px}
  .trip-countdown-copy h2{font-size:30px}
  .trip-countdown-copy p{font-size:8px}
  .countdown-timer{grid-template-columns:repeat(2,1fr);gap:7px;margin-top:14px}
}

/* Registration section — Purulia manuscript texture background */
#register.register-section{
  background-image:url('./purulia-yellow-texture.jpg') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}

/* Correct registration form background — exact beige paper texture */
#registrationForm.form{
  background-image:url('./purulia-beige-registration.jpg') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}

/* Registration form readability — preserve beige paper texture while increasing contrast */
#registrationForm.form{
  background-color:rgba(255,250,240,.72) !important;
  background-image:url('./purulia-beige-registration.jpg') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-blend-mode:normal !important;
  border:1.5px solid rgba(76,70,57,.26) !important;
  box-shadow:0 18px 48px rgba(70,57,42,.12), inset 0 0 0 1px rgba(255,255,255,.38) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
#registrationForm.form label{
  color:#284b52 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.5) !important;
}
#registrationForm.form .pref-head{
  border-top-color:rgba(76,70,57,.20) !important;
}
#registrationForm.form .pref-head p,
#registrationForm.form small{
  color:#5f777a !important;
}
#registrationForm.form input,
#registrationForm.form select{
  border:1.5px solid rgba(55,86,91,.28) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 5px 16px rgba(55,70,65,.07) !important;
}
#registrationForm.form input::placeholder{
  color:#71888b !important;
  opacity:1 !important;
}
#registrationForm.form input:focus,
#registrationForm.form select:focus{
  border-color:rgba(38,151,190,.72) !important;
  box-shadow:0 0 0 4px rgba(38,151,190,.12),0 8px 20px rgba(55,70,65,.08) !important;
}

/* Registration title — brown */
#register h1,
#register .section-title,
#register .hero-title {
  color: #6B321F !important;
}

/* =========================================================
   REGISTRATION FORM — HIGH-CONTRAST TEXT PASS
   Preserve the beige manuscript texture and layout while making
   every form label, helper, placeholder and preference text clearly
   readable against the textured background.
   ========================================================= */
#registrationForm.form,
#registrationForm.form *{
  text-rendering:optimizeLegibility;
}

#registrationForm.form label{
  color:#4a2a1c !important;
  font-weight:900 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.72) !important;
}

#registrationForm.form .mini-label{
  color:#6b321f !important;
  font-weight:900 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.65) !important;
}

#registrationForm.form .pref-head p,
#registrationForm.form small{
  color:#62483b !important;
  font-weight:700 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.62) !important;
}

#registrationForm.form input,
#registrationForm.form select,
#registrationForm.form textarea{
  color:#3b261d !important;
  font-weight:700 !important;
  border-color:rgba(76,48,34,.32) !important;
  background:#fff !important;
}

#registrationForm.form input::placeholder,
#registrationForm.form textarea::placeholder{
  color:#695247 !important;
  opacity:1 !important;
  font-weight:700 !important;
}

#registrationForm.form select{
  color:#3b261d !important;
  font-weight:800 !important;
}

#registrationForm.form select option{
  color:#3b261d !important;
  background:#fff !important;
  font-weight:700 !important;
}

#registrationForm.form .email-verification-block{
  border-color:rgba(76,48,34,.22) !important;
}

#registrationForm.form .otp-timer,
#registrationForm.form .copy-status,
#registrationForm.form .email-verification-block span:not(.email-verified-icon){
  color:#62483b !important;
  font-weight:700 !important;
}

#registrationForm.form .email-verified-state strong{
  color:#3f6b42 !important;
}

#registrationForm.form .email-verified-state span{
  color:#5d5148 !important;
}

#registrationForm.form .upi-notice strong{
  color:#4a2a1c !important;
}

#registrationForm.form .upi-notice span{
  color:#62483b !important;
}

#registrationForm.form input:focus,
#registrationForm.form select:focus,
#registrationForm.form textarea:focus{
  color:#2f1e17 !important;
  border-color:rgba(107,50,31,.68) !important;
  box-shadow:0 0 0 4px rgba(107,50,31,.10),0 8px 20px rgba(55,70,65,.08) !important;
}

#registrationForm.form .pref-head{
  border-top-color:rgba(76,48,34,.30) !important;
}

/* Final title availability styling — visual only; DO NOT alter availability logic.
   The JS still owns the 3-use limit and the disabled attribute. Full titles
   remain selectable only as a visual disabled entry and are intentionally
   lighter than available titles. */
#registrationForm.form select option:disabled,
#registrationForm.form select option[disabled]{
  color:#9b8f86 !important;
  background:#eee8df !important;
  font-weight:600 !important;
  text-shadow:none !important;
}

#registrationForm.form select option:not(:disabled){
  color:#3b261d !important;
  background:#fff !important;
  font-weight:700 !important;
}

/* Registration heading — warm brown for the manuscript aesthetic */
#register.register-section .register-layout > div:first-child > h2{
  color:#6b3f24 !important;
  text-shadow:none !important;
}

/* Live Board — uploaded burlap texture */
.registered-panel {
  background-color: #d9bd98 !important;
  background-image:
    linear-gradient(rgba(248, 237, 214, 0.18), rgba(248, 237, 214, 0.18)),
    url('./burlap-texture.png') !important;
  background-size: cover, cover !important;
  background-position: center, center !important;
  background-repeat: no-repeat, repeat !important;
  background-attachment: local, local !important;
}
.registered-list {
  background: transparent !important;
}
.registered-row {
  background: rgba(255, 255, 255, 0.78) !important;
}
.registered-footer {
  background: rgba(248, 237, 214, 0.42) !important;
}

/* Live Board readability refinement — visual only; registration logic untouched. */
.registered-panel .recent-heading h3{
  color:#3f2418 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.55) !important;
}
.registered-panel .eyebrow{
  color:#4f7b5a !important;
  text-shadow:0 1px 0 rgba(255,255,255,.7) !important;
}
.registered-panel .registered-note{
  color:#4a3024 !important;
  font-weight:600 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.65) !important;
}
.registered-panel .registered-row{
  background:rgba(255,250,242,.93) !important;
  border-bottom-color:rgba(91,60,40,.18) !important;
}
.registered-panel .student-name{
  color:#2f1c14 !important;
  font-weight:900 !important;
  text-shadow:none !important;
}
.registered-panel .student-meta{
  color:#624936 !important;
  font-weight:600 !important;
}
.registered-panel .student-badge{
  color:#3e6f4d !important;
  background:rgba(240,247,233,.96) !important;
  border-color:rgba(125,151,92,.42) !important;
  font-weight:800 !important;
}
.registered-panel .live-count{
  color:#187f9e !important;
  background:rgba(245,250,248,.9) !important;
  border-color:rgba(24,127,158,.22) !important;
  text-shadow:none !important;
}
.registered-panel .registered-footer{
  color:#5a3b29 !important;
  background:rgba(248,237,214,.78) !important;
  border-top-color:rgba(91,60,40,.2) !important;
  font-weight:600 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.55) !important;
}

/* Live Board — professional rounded participant cards */
.registered-list{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  padding:2px 5px 10px !important;
}
.registered-panel .registered-row{
  flex:0 0 auto !important;
  margin:0 !important;
  border:1px solid rgba(91,60,40,.16) !important;
  border-radius:14px !important;
  overflow:hidden !important;
  box-shadow:0 3px 12px rgba(70,48,32,.06) !important;
  padding:14px 14px !important;
}
.registered-panel .registered-row:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 7px 18px rgba(70,48,32,.10) !important;
}
.registered-panel .registered-footer{
  border-radius:12px !important;
  margin-top:12px !important;
  padding:11px 13px !important;
}

/* Registered Comrades — uploaded yellow fabric background */
#comrades.comrades-section{
  position:relative !important;
  isolation:isolate !important;
  background-color:#d99f05 !important;
  background-image:url('./comrades-yellow-texture.jpg') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  color:#17333b !important;
  overflow:hidden !important;
}
/* Soft fabric-to-page transition: keeps the exact yellow texture, but removes the hard top edge. */
#comrades.comrades-section::before{
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  height:175px !important;
  z-index:0 !important;
  pointer-events:none !important;
  background:linear-gradient(180deg,
    rgba(244,251,252,.62) 0%,
    rgba(244,251,252,.42) 14%,
    rgba(244,251,252,.22) 30%,
    rgba(244,251,252,.08) 50%,
    rgba(244,251,252,0) 78%,
    rgba(244,251,252,0) 100%) !important;
}
#comrades.comrades-section .section-head-row,
#comrades.comrades-section .comrades-grid{position:relative;z-index:1}
#comrades.comrades-section .section h2,
#comrades.comrades-section h2{color:#17333b !important;text-shadow:0 2px 0 rgba(255,255,255,.22) !important}
#comrades.comrades-section .lead{color:#31545a !important}

/* Yellow fabric range — exact uploaded texture from Registered Comrades through The Friendship Rule */
.yellow-records-range{
  position:relative;
  isolation:isolate;
  background:#d99f05 url('./comrades-yellow-texture.jpg') center top / 100% auto repeat-y;
  overflow:hidden;
}
.yellow-records-range > .section{
  background:transparent !important;
}
/* Keep the original yellow texture section transition subtle and let the texture continue naturally. */
.yellow-records-range #comrades.comrades-section::before{
  background:linear-gradient(180deg,
    rgba(244,251,252,.34) 0%,
    rgba(244,251,252,.20) 12%,
    rgba(244,251,252,.08) 30%,
    rgba(244,251,252,0) 62%,
    rgba(244,251,252,0) 100%) !important;
}
/* Readability on the yellow fabric */
.yellow-records-range .section h2,
.yellow-records-range .section-head-row h2,
.yellow-records-range .section .lead,
.yellow-records-range .section .eyebrow,
.yellow-records-range .rules h2,
.yellow-records-range .rules .rule-list p,
.yellow-records-range .rules .rule-list b{
  text-shadow:0 1px 1px rgba(255,244,210,.35);
}
.yellow-records-range .section h2,
.yellow-records-range .rules h2{color:#17333b !important}
.yellow-records-range .section .lead,
.yellow-records-range .rules .rule-list p{color:#4b3924 !important}
.yellow-records-range .rules .rule-list b{color:#6b4314 !important}
.yellow-records-range .golden{color:#4a2e0e !important;text-shadow:0 1px 1px rgba(255,224,132,.45)}

/* Extend the exact yellow fabric texture through every section in the records range.
   The parent supplies the texture; child sections must remain transparent so it can show through. */
.yellow-records-range > .section,
.yellow-records-range > .section.dark,
.yellow-records-range > .section.rules{
  background:transparent !important;
}

/* FINAL FIX: force the yellow fabric to remain visible behind every section
   from Registered Comrades through The Friendship Rule. */
.yellow-records-range {
  background-color:#d99f05 !important;
  background-image:url('./comrades-yellow-texture.jpg') !important;
  background-repeat:repeat-y !important;
  background-position:center top !important;
  background-size:100% auto !important;
}
.yellow-records-range > section,
.yellow-records-range > section.section,
.yellow-records-range > section.section.dark,
.yellow-records-range > section#comrades,
.yellow-records-range > section#student-awards,
.yellow-records-range > section#teacher-awards,
.yellow-records-range > section#rules {
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
}
.yellow-records-range > section::after {
  background:none !important;
}
/* Keep the exact fabric visible beneath the Teacher Records area. */
.yellow-records-range #teacher-awards,
.yellow-records-range #student-awards,
.yellow-records-range #rules {
  background:transparent !important;
}

/* ===== TEAM BEHIND THE RECORD — exact uploaded texture ===== */
#credits.credits-final{
  background-image:url('team-records-bg.jpg') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-color:transparent !important;
}
#credits.credits-final .credit-final-card{
  background:rgba(255,255,255,.84) !important;
}

/* =========================================================
   IDEA & CONCEPT — taped sticky note card
   Replace the translucent pane with the supplied taped note.
   ========================================================= */
#credits.credits-final .credits-final-grid .credit-final-card:first-child{
  position:relative !important;
  overflow:hidden !important;
  background-color:transparent !important;
  background-image:url('assets/credits/taped-sticky-note.png') !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-size:100% 100% !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
#credits.credits-final .credits-final-grid .credit-final-card:first-child:hover{
  background-color:transparent !important;
  background-image:url('assets/credits/taped-sticky-note.png') !important;
  border:0 !important;
  box-shadow:none !important;
  transform:translateY(-4px);
}

/* ===== CREDITS — Taped Sticky Note layout matching reference ===== */
#credits.credits-final{
  padding:70px clamp(18px,5vw,72px) 76px !important;
  background-image:url('team-records-bg.jpg') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-color:#e9c84a !important;
}
#credits.credits-final .credits-final-inner{width:min(1180px,100%);margin:0 auto}
#credits.credits-final .credits-final-heading{
  display:block !important;
  text-align:center !important;
  margin:0 auto 42px !important;
}
#credits.credits-final .credits-final-heading .eyebrow{display:none !important}
#credits.credits-final .credits-final-heading h2{
  margin:0 !important;
  color:#17333b !important;
  font-family:"Playfair Display",serif !important;
  font-size:clamp(34px,4vw,52px) !important;
  line-height:1.08 !important;
  letter-spacing:-.025em !important;
}
#credits.credits-final .credits-final-heading h2 em{
  color:#8a5a19 !important;
  background:none !important;
  -webkit-text-fill-color:initial !important;
  font-style:italic !important;
}
#credits.credits-final .credits-final-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:54px !important;
  align-items:start !important;
}
#credits.credits-final .credit-final-card,
#credits.credits-final .credit-final-card:hover,
#credits.credits-final .credit-final-card:first-child{
  min-height:410px !important;
  height:410px !important;
  box-sizing:border-box !important;
  padding:0 38px 34px !important;
  border:0 !important;
  border-radius:0 !important;
  background-color:transparent !important;
  background-image:url('assets/credits/taped-sticky-note.png') !important;
  background-size:100% 100% !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  transform:none !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-end !important;
  text-align:center !important;
  overflow:visible !important;
}
#credits.credits-final .credit-final-card:hover{
  transform:translateY(-4px) !important;
}
#credits.credits-final .credit-role{display:none !important}
#credits.credits-final .credit-person-row{
  width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:0 !important;
}
#credits.credits-final .credit-person-row img{display:none !important}
#credits.credits-final .credit-person-row > div{width:100% !important;min-width:0 !important}
#credits.credits-final .credit-person-row h3{
  margin:0 auto 5px !important;
  max-width:270px !important;
  color:#7b451d !important;
  font-family:"Playfair Display",serif !important;
  font-size:clamp(19px,1.8vw,25px) !important;
  line-height:1.08 !important;
  letter-spacing:-.02em !important;
  text-align:center !important;
}
#credits.credits-final .credit-person-row p{
  margin:0 auto !important;
  max-width:280px !important;
  color:#a85a1f !important;
  font-family:Inter,Arial,sans-serif !important;
  font-size:clamp(14px,1.3vw,18px) !important;
  line-height:1.28 !important;
  text-align:center !important;
}
#credits.credits-final .copyright{display:none !important}
@media(max-width:900px){
  #credits.credits-final .credits-final-grid{grid-template-columns:1fr !important;gap:28px !important;max-width:430px !important;margin:0 auto !important}
  #credits.credits-final .credit-final-card,
  #credits.credits-final .credit-final-card:hover{height:410px !important;min-height:410px !important}
}
@media(max-width:520px){
  #credits.credits-final{padding:54px 14px 60px !important}
  #credits.credits-final .credits-final-heading{margin-bottom:28px !important}
  #credits.credits-final .credits-final-heading h2{font-size:34px !important}
}

/* ===== FINAL CREDIT CARD POLISH — portraits restored + smaller typography ===== */
#credits.credits-final .credit-final-card{
  position:relative !important;
  padding:0 34px 30px !important;
}
#credits.credits-final .credit-person-row img{
  display:block !important;
  position:absolute !important;
  top:78px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:82px !important;
  height:82px !important;
  flex:0 0 82px !important;
  border-radius:50% !important;
  object-fit:cover !important;
  object-position:center !important;
  border:3px solid rgba(255,255,255,.96) !important;
  box-shadow:0 6px 16px rgba(70,45,20,.18),0 0 0 1px rgba(123,69,29,.18) !important;
}
#credits.credits-final .credit-person-row > div{
  width:100% !important;
}
#credits.credits-final .credit-person-row h3{
  max-width:250px !important;
  font-size:clamp(17px,1.55vw,21px) !important;
  line-height:1.08 !important;
  letter-spacing:-.015em !important;
  margin:0 auto 5px !important;
}
#credits.credits-final .credit-person-row p{
  max-width:260px !important;
  font-size:clamp(12px,1.05vw,15px) !important;
  line-height:1.25 !important;
}
@media(max-width:900px){
  #credits.credits-final .credit-person-row img{top:76px !important}
  #credits.credits-final .credit-person-row h3{font-size:20px !important}
  #credits.credits-final .credit-person-row p{font-size:14px !important}
}

/* ===== CREDIT PORTRAITS RESTORED — FINAL OVERRIDE ===== */
/* Keep every portrait centered vertically inside its sticky-note card. */
#credits.credits-final .credit-person-row img{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  position:absolute !important;
  z-index:5 !important;
  top:50% !important;
  left:50% !important;
  transform:translate(-50%,-50%) !important;
  width:82px !important;
  height:82px !important;
  flex:0 0 82px !important;
  border-radius:50% !important;
  object-fit:cover !important;
  object-position:center !important;
  border:3px solid rgba(255,255,255,.96) !important;
  box-shadow:0 6px 16px rgba(70,45,20,.18),0 0 0 1px rgba(123,69,29,.18) !important;
  margin:0 !important;
}
@media(max-width:900px){
  #credits.credits-final .credit-person-row img{top:50% !important;transform:translate(-50%,-50%) !important}
}

/* ===== CREDIT PORTRAITS + TEXT FIT — FINAL USER REQUEST ===== */
#credits.credits-final .credit-person-row img{
  width:100px !important;
  height:100px !important;
  flex:0 0 100px !important;
}
#credits.credits-final .credit-person-row > div{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
}
#credits.credits-final .credit-person-row h3{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  font-size:clamp(17px,1.55vw,21px) !important;
  line-height:1.08 !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
}
#credits.credits-final .credit-person-row p{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  padding:0 2px !important;
  font-size:clamp(11px,1vw,14px) !important;
  line-height:1.22 !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
}
@media(max-width:900px){
  #credits.credits-final .credit-person-row img{width:96px !important;height:96px !important;flex-basis:96px !important}
  #credits.credits-final .credit-person-row h3{font-size:20px !important}
  #credits.credits-final .credit-person-row p{font-size:13px !important}
}
@media(max-width:520px){
  #credits.credits-final .credit-person-row img{width:92px !important;height:92px !important;flex-basis:92px !important}
  #credits.credits-final .credit-person-row h3{font-size:19px !important}
  #credits.credits-final .credit-person-row p{font-size:13px !important}
}


/* ===== FINAL TEXT FIT FIX — keep every credit line inside the sticky note ===== */
#credits.credits-final .credit-final-card{
  padding:0 42px 32px !important;
  overflow:hidden !important;
}
#credits.credits-final .credit-person-row{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
}
#credits.credits-final .credit-person-row > div{
  width:100% !important;
  max-width:230px !important;
  min-width:0 !important;
  margin:0 auto !important;
}
#credits.credits-final .credit-person-row h3{
  width:100% !important;
  max-width:230px !important;
  margin:0 auto 5px !important;
  padding:0 !important;
  box-sizing:border-box !important;
  font-size:18px !important;
  line-height:1.08 !important;
  letter-spacing:-.012em !important;
  white-space:normal !important;
  overflow-wrap:break-word !important;
  word-break:normal !important;
  text-wrap:balance !important;
}
#credits.credits-final .credit-person-row p{
  width:100% !important;
  max-width:220px !important;
  margin:0 auto !important;
  padding:0 !important;
  box-sizing:border-box !important;
  font-size:11.5px !important;
  line-height:1.18 !important;
  letter-spacing:-.005em !important;
  white-space:normal !important;
  overflow-wrap:break-word !important;
  word-break:normal !important;
  text-wrap:balance !important;
}
@media(max-width:900px){
  #credits.credits-final .credit-final-card{padding:0 36px 30px !important}
  #credits.credits-final .credit-person-row > div,
  #credits.credits-final .credit-person-row h3{max-width:240px !important}
  #credits.credits-final .credit-person-row p{max-width:225px !important}
  #credits.credits-final .credit-person-row h3{font-size:18px !important}
  #credits.credits-final .credit-person-row p{font-size:12px !important}
}
@media(max-width:520px){
  #credits.credits-final .credit-final-card{padding:0 30px 28px !important}
  #credits.credits-final .credit-person-row > div,
  #credits.credits-final .credit-person-row h3{max-width:235px !important}
  #credits.credits-final .credit-person-row p{max-width:220px !important}
  #credits.credits-final .credit-person-row h3{font-size:17px !important}
  #credits.credits-final .credit-person-row p{font-size:12px !important}
}

/* ===== CREDIT TEXT SPACING — FINAL =====
/* Keep the portrait exactly in its original centered position; move only the text block upward. */
#credits.credits-final .credit-person-row img{
  top:50% !important;
  left:50% !important;
  transform:translate(-50%,-50%) !important;
}
#credits.credits-final .credit-person-row > div{
  transform:translateY(-64px) !important;
}
@media(max-width:900px){
  #credits.credits-final .credit-person-row img{
    top:50% !important;
    left:50% !important;
    transform:translate(-50%,-50%) !important;
  }
  #credits.credits-final .credit-person-row > div{
    transform:translateY(-58px) !important;
  }
}
@media(max-width:520px){
  #credits.credits-final .credit-person-row img{
    top:50% !important;
    left:50% !important;
    transform:translate(-50%,-50%) !important;
  }
  #credits.credits-final .credit-person-row > div{
    transform:translateY(-52px) !important;
  }
}

/* ===== CREDIT TEXT FORMAT — MATCH USER REFERENCE =====
   Portrait positions are intentionally untouched.
   Only the typography/wrapping of the text block is adjusted. */
#credits.credits-final .credit-person-row > div{
  transform:translateY(-64px) !important;
  width:100% !important;
  max-width:220px !important;
  min-width:0 !important;
  margin:0 auto !important;
  text-align:center !important;
}
#credits.credits-final .credit-person-row h3{
  width:100% !important;
  max-width:220px !important;
  margin:0 auto 4px !important;
  padding:0 !important;
  font-size:18px !important;
  line-height:1.08 !important;
  letter-spacing:-.01em !important;
  white-space:normal !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
  text-wrap:balance !important;
}
#credits.credits-final .credit-person-row p{
  width:100% !important;
  max-width:220px !important;
  margin:0 auto !important;
  padding:0 !important;
  font-size:12px !important;
  line-height:1.22 !important;
  letter-spacing:0 !important;
  white-space:normal !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
  text-wrap:balance !important;
}
@media(max-width:900px){
  #credits.credits-final .credit-person-row > div{transform:translateY(-58px) !important;max-width:220px !important}
  #credits.credits-final .credit-person-row h3{max-width:220px !important;font-size:18px !important}
  #credits.credits-final .credit-person-row p{max-width:220px !important;font-size:12px !important}
}
@media(max-width:520px){
  #credits.credits-final .credit-person-row > div{transform:translateY(-52px) !important;max-width:220px !important}
  #credits.credits-final .credit-person-row h3{max-width:220px !important;font-size:17px !important}
  #credits.credits-final .credit-person-row p{max-width:215px !important;font-size:12px !important}
}

/* ===== CREDITS / PREVIOUS PAGE — SMOOTH PAPER TRANSITION ===== */
#credits.credits-final{
  position:relative !important;
  isolation:isolate !important;
  border-top:0 !important;
}
#credits.credits-final::before{
  content:"" !important;
  position:absolute !important;
  top:-1px !important;
  left:0 !important;
  right:0 !important;
  height:96px !important;
  z-index:0 !important;
  pointer-events:none !important;
  background:linear-gradient(
    to bottom,
    rgba(233,200,74,0.98) 0%,
    rgba(233,200,74,0.78) 24%,
    rgba(233,200,74,0.42) 52%,
    rgba(233,200,74,0.12) 78%,
    rgba(233,200,74,0) 100%
  ) !important;
}
#credits.credits-final .credits-final-inner{
  position:relative !important;
  z-index:1 !important;
}
@media(max-width:520px){
  #credits.credits-final::before{height:72px !important}
}


/* =========================================================
   REGISTERED COMRADES — OUTSTANDING / EDITORIAL CARD UPGRADE
   Visual-only: preserves the existing yellow background and data/workflow.
   ========================================================= */
#comrades.comrades-section .comrades-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:16px !important;
  margin-top:42px !important;
  perspective:1200px;
}
#comrades.comrades-section .comrade{
  animation:pbrComradeIn .72s cubic-bezier(.16,1,.3,1) both;
  --comrade-ink:#18383f;
  --comrade-muted:#65787a;
  --comrade-line:rgba(61,75,66,.15);
  position:relative !important;
  isolation:isolate;
  min-height:88px !important;
  box-sizing:border-box !important;
  display:grid !important;
  grid-template-columns:52px minmax(0,1fr) !important;
  align-items:center !important;
  gap:16px !important;
  padding:16px 20px 16px 16px !important;
  overflow:hidden !important;
  border:1px solid var(--comrade-line) !important;
  border-radius:18px !important;
  background:linear-gradient(135deg,rgba(255,253,246,.98),rgba(247,239,216,.96)) !important;
  box-shadow:
    0 8px 18px rgba(67,48,25,.09),
    0 2px 4px rgba(67,48,25,.05),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
  color:var(--comrade-ink) !important;
  transform:translateY(0) translateZ(0);
  transition:
    transform .55s cubic-bezier(.16,1,.3,1),
    box-shadow .55s cubic-bezier(.16,1,.3,1),
    border-color .4s ease,
    background .45s ease !important;
}
#comrades.comrades-section .comrade::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:12px !important;
  bottom:12px !important;
  width:3px !important;
  border-radius:0 4px 4px 0 !important;
  background:linear-gradient(180deg,#31b8df,#1885a4) !important;
  opacity:.9 !important;
  z-index:0 !important;
}
#comrades.comrades-section .comrade > div{position:relative !important;z-index:1 !important}
#comrades.comrades-section .comrade::after{
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  bottom:0 !important;
  left:-45% !important;
  width:28% !important;
  transform:skewX(-18deg) !important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent) !important;
  opacity:0 !important;
  pointer-events:none !important;
  transition:left .8s cubic-bezier(.16,1,.3,1),opacity .3s ease !important;
}
#comrades.comrades-section .comrade:hover{
  transform:translateY(-7px) scale(1.008) !important;
  border-color:rgba(35,129,155,.28) !important;
  background:linear-gradient(135deg,rgba(255,255,252,.99),rgba(249,243,225,.98)) !important;
  box-shadow:
    0 18px 34px rgba(67,48,25,.14),
    0 5px 10px rgba(67,48,25,.07),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
}
#comrades.comrades-section .comrade:hover::after{
  left:125% !important;
  opacity:1 !important;
}
#comrades.comrades-section .comrade-num{
  width:48px !important;
  height:48px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:14px !important;
  background:linear-gradient(145deg,#55c8ea 0%,#27a8d3 58%,#168ab1 100%) !important;
  color:#fff !important;
  font:800 12px/1 "Inter",sans-serif !important;
  letter-spacing:.03em !important;
  border:1px solid rgba(255,255,255,.48) !important;
  box-shadow:
    0 7px 15px rgba(21,132,166,.22),
    inset 0 1px 0 rgba(255,255,255,.42) !important;
  position:relative !important;
  overflow:hidden !important;
}
#comrades.comrades-section .comrade-num::after{
  content:"" !important;
  position:absolute !important;
  inset:1px !important;
  border-radius:13px !important;
  border:1px solid rgba(255,255,255,.2) !important;
  pointer-events:none !important;
}
#comrades.comrades-section .comrade > div:last-child{
  min-width:0 !important;
  padding-top:1px !important;
}
#comrades.comrades-section .comrade-name{
  margin:0 0 6px !important;
  color:#18383f !important;
  font:700 15px/1.15 "Inter",sans-serif !important;
  letter-spacing:-.015em !important;
  text-transform:none !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#comrades.comrades-section .comrade-id{
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  color:#687a7b !important;
  font:500 11px/1.25 "Inter",sans-serif !important;
  letter-spacing:.015em !important;
}
#comrades.comrades-section .comrade-id::before{
  content:"" !important;
  width:5px !important;
  height:5px !important;
  flex:none !important;
  border-radius:50% !important;
  background:#2aa7cf !important;
  box-shadow:0 0 0 3px rgba(42,167,207,.10) !important;
}
#comrades.comrades-section .comrade:nth-child(1){animation-delay:40ms}
#comrades.comrades-section .comrade:nth-child(2){animation-delay:90ms}
#comrades.comrades-section .comrade:nth-child(3){animation-delay:140ms}
#comrades.comrades-section .comrade:nth-child(4){animation-delay:190ms}
#comrades.comrades-section .comrade:nth-child(5){animation-delay:240ms}
#comrades.comrades-section .comrade:nth-child(6){animation-delay:290ms}
#comrades.comrades-section .comrade:nth-child(7){animation-delay:340ms}
#comrades.comrades-section .comrade:nth-child(8){animation-delay:390ms}
#comrades.comrades-section .comrade:nth-child(9){animation-delay:440ms}
#comrades.comrades-section .comrade:nth-child(10){animation-delay:490ms}
#comrades.comrades-section .comrade:nth-child(11){animation-delay:540ms}
#comrades.comrades-section .comrade:nth-child(12){animation-delay:590ms}

@keyframes pbrComradeIn{
  from{opacity:0;transform:translateY(16px) scale(.985);filter:blur(2px)}
  to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}

@media(max-width:1120px){
  #comrades.comrades-section .comrades-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media(max-width:600px){
  #comrades.comrades-section .comrades-grid{grid-template-columns:1fr !important;gap:12px !important;margin-top:30px !important}
  #comrades.comrades-section .comrade{min-height:82px !important;grid-template-columns:46px minmax(0,1fr) !important;padding:14px 16px 14px 14px !important;border-radius:16px !important}
  #comrades.comrades-section .comrade-num{width:44px !important;height:44px !important;border-radius:13px !important}
  #comrades.comrades-section .comrade-name{font-size:14px !important}
  #comrades.comrades-section .comrade-id{font-size:10px !important}
}
@media(prefers-reduced-motion:reduce){
  #comrades.comrades-section .comrade{animation:none !important;transition:none !important}
}

/* =========================================================
   PBR COMRADES — PREMIUM MOTION PASS v2
   Visual-only. Background, markup, data and workflow untouched.
   ========================================================= */
#comrades.comrades-section .comrade{
  --pc-cyan:#1da4ce;
  --pc-navy:#17363d;
  --pc-muted:#718084;
  --pc-gold:#c99b45;
  min-height:96px !important;
  padding:15px 22px 15px 15px !important;
  border-radius:20px !important;
  background:
    linear-gradient(135deg,rgba(255,255,250,.985) 0%,rgba(252,247,229,.975) 58%,rgba(246,237,211,.97) 100%) !important;
  border:1px solid rgba(48,66,57,.13) !important;
  box-shadow:
    0 10px 24px rgba(60,43,21,.075),
    0 2px 5px rgba(60,43,21,.055),
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -1px 0 rgba(197,162,87,.06) !important;
  will-change:transform,box-shadow;
  backface-visibility:hidden;
}

/* Fine inner frame */
#comrades.comrades-section .comrade > .comrade-num{
  box-shadow:
    0 7px 15px rgba(26,141,179,.18),
    inset 0 1px 0 rgba(255,255,255,.45),
    0 0 0 1px rgba(20,112,143,.10) !important;
  transition:transform .55s cubic-bezier(.16,1,.3,1),box-shadow .55s ease,filter .55s ease !important;
}
#comrades.comrades-section .comrade > .comrade-num::before{
  content:"" !important;
  position:absolute !important;
  inset:3px !important;
  border:1px solid rgba(255,255,255,.25) !important;
  border-radius:11px !important;
  pointer-events:none !important;
}

/* Micro-label above each participant name without changing the HTML */
#comrades.comrades-section .comrade > div:last-child::before{
  content:"REGISTERED COMRADE" !important;
  display:block !important;
  margin:0 0 4px !important;
  color:var(--pc-cyan) !important;
  font:800 7px/1 "Inter",sans-serif !important;
  letter-spacing:.19em !important;
  text-transform:uppercase !important;
  opacity:.82 !important;
}
#comrades.comrades-section .comrade-name{
  color:var(--pc-navy) !important;
  font:750 16px/1.14 "Inter",sans-serif !important;
  letter-spacing:-.018em !important;
  transition:color .35s ease,transform .45s cubic-bezier(.16,1,.3,1) !important;
}
#comrades.comrades-section .comrade-id{
  color:var(--pc-muted) !important;
  font-size:10.5px !important;
  letter-spacing:.02em !important;
}
#comrades.comrades-section .comrade-id::before{
  background:var(--pc-cyan) !important;
  box-shadow:0 0 0 3px rgba(29,164,206,.09),0 0 10px rgba(29,164,206,.16) !important;
  animation:pbrComradeDot 2.8s ease-in-out infinite !important;
}

/* Animated premium edge light */
#comrades.comrades-section .comrade::before{
  top:13px !important;
  bottom:13px !important;
  width:2px !important;
  background:linear-gradient(180deg,#65d5ef 0%,#1598c3 50%,#d0a04c 100%) !important;
  box-shadow:0 0 12px rgba(29,164,206,.10) !important;
  transform-origin:center;
  animation:pbrComradeEdge 3.8s ease-in-out infinite !important;
}

/* Moving silk highlight */
#comrades.comrades-section .comrade::after{
  top:-20% !important;
  bottom:-20% !important;
  left:-65% !important;
  width:34% !important;
  opacity:0 !important;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.12) 35%,rgba(255,255,255,.78) 50%,rgba(255,255,255,.10) 65%,transparent 100%) !important;
  transform:skewX(-20deg) !important;
  transition:none !important;
}
#comrades.comrades-section .comrade:hover::after{
  left:135% !important;
  opacity:1 !important;
  transition:left 1s cubic-bezier(.16,1,.3,1),opacity .18s ease !important;
}

#comrades.comrades-section .comrade:hover{
  transform:translate3d(0,-8px,0) scale(1.012) !important;
  border-color:rgba(29,145,176,.26) !important;
  box-shadow:
    0 22px 42px rgba(60,43,21,.13),
    0 7px 13px rgba(60,43,21,.06),
    0 0 0 1px rgba(29,164,206,.035),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}
#comrades.comrades-section .comrade:hover > .comrade-num{
  transform:translate3d(2px,-2px,0) rotate(-2deg) scale(1.045) !important;
  filter:saturate(1.08) brightness(1.035) !important;
  box-shadow:
    0 11px 22px rgba(26,141,179,.24),
    0 0 0 1px rgba(20,112,143,.12),
    0 0 22px rgba(29,164,206,.12) !important;
}
#comrades.comrades-section .comrade:hover .comrade-name{
  transform:translateX(2px) !important;
  color:#123b45 !important;
}

/* Section total gets a restrained “live board” treatment */
#comrades.comrades-section .comrade-total{
  position:relative !important;
  overflow:hidden !important;
  border:1px solid rgba(48,66,57,.13) !important;
  background:linear-gradient(145deg,rgba(255,255,250,.96),rgba(246,237,211,.93)) !important;
  box-shadow:0 10px 25px rgba(60,43,21,.075),inset 0 1px 0 rgba(255,255,255,.95) !important;
}
#comrades.comrades-section .comrade-total::after{
  content:"" !important;
  position:absolute !important;
  width:70px !important;height:70px !important;
  right:-28px !important;top:-35px !important;
  border-radius:50% !important;
  background:radial-gradient(circle,rgba(29,164,206,.13),transparent 68%) !important;
  animation:pbrTotalGlow 4s ease-in-out infinite !important;
  pointer-events:none !important;
}
#comrades.comrades-section .comrade-total strong{
  position:relative !important;
  z-index:1 !important;
  color:#17444f !important;
  text-shadow:0 5px 18px rgba(29,164,206,.10) !important;
}
#comrades.comrades-section .comrade-total span{
  position:relative !important;z-index:1 !important;color:#788487 !important;
}

@keyframes pbrComradeInPremium{
  0%{opacity:0;transform:translate3d(0,24px,0) scale(.975);filter:blur(4px)}
  65%{opacity:1;transform:translate3d(0,-2px,0) scale(1.004);filter:blur(0)}
  100%{opacity:1;transform:none}
}
@keyframes pbrComradeDot{
  0%,100%{opacity:.72;transform:scale(.92)}
  50%{opacity:1;transform:scale(1.12)}
}
@keyframes pbrComradeEdge{
  0%,100%{opacity:.68;transform:scaleY(.82)}
  50%{opacity:1;transform:scaleY(1)}
}
@keyframes pbrTotalGlow{
  0%,100%{transform:translate3d(0,0,0);opacity:.65}
  50%{transform:translate3d(-16px,10px,0);opacity:1}
}

#comrades.comrades-section .comrade:nth-child(1){animation:pbrComradeInPremium .72s cubic-bezier(.16,1,.3,1) 40ms both}
#comrades.comrades-section .comrade:nth-child(2){animation:pbrComradeInPremium .72s cubic-bezier(.16,1,.3,1) 100ms both}
#comrades.comrades-section .comrade:nth-child(3){animation:pbrComradeInPremium .72s cubic-bezier(.16,1,.3,1) 160ms both}
#comrades.comrades-section .comrade:nth-child(4){animation:pbrComradeInPremium .72s cubic-bezier(.16,1,.3,1) 220ms both}
#comrades.comrades-section .comrade:nth-child(5){animation:pbrComradeInPremium .72s cubic-bezier(.16,1,.3,1) 280ms both}
#comrades.comrades-section .comrade:nth-child(6){animation:pbrComradeInPremium .72s cubic-bezier(.16,1,.3,1) 340ms both}
#comrades.comrades-section .comrade:nth-child(7){animation:pbrComradeInPremium .72s cubic-bezier(.16,1,.3,1) 400ms both}
#comrades.comrades-section .comrade:nth-child(8){animation:pbrComradeInPremium .72s cubic-bezier(.16,1,.3,1) 460ms both}
#comrades.comrades-section .comrade:nth-child(9){animation:pbrComradeInPremium .72s cubic-bezier(.16,1,.3,1) 520ms both}
#comrades.comrades-section .comrade:nth-child(10){animation:pbrComradeInPremium .72s cubic-bezier(.16,1,.3,1) 580ms both}
#comrades.comrades-section .comrade:nth-child(11){animation:pbrComradeInPremium .72s cubic-bezier(.16,1,.3,1) 640ms both}
#comrades.comrades-section .comrade:nth-child(12){animation:pbrComradeInPremium .72s cubic-bezier(.16,1,.3,1) 700ms both}

@media(max-width:600px){
  #comrades.comrades-section .comrade{min-height:86px !important;padding:14px 16px 14px 14px !important;border-radius:17px !important}
  #comrades.comrades-section .comrade > div:last-child::before{font-size:6px !important;letter-spacing:.16em !important}
  #comrades.comrades-section .comrade-name{font-size:14px !important}
}
@media(prefers-reduced-motion:reduce){
  #comrades.comrades-section .comrade,
  #comrades.comrades-section .comrade::before,
  #comrades.comrades-section .comrade::after,
  #comrades.comrades-section .comrade-id::before,
  #comrades.comrades-section .comrade-total::after{animation:none !important}
}

/* ---------------- premium cream navigation color ---------------- */
.topbar{
  background:#F2E6CE !important;
  border-bottom:1px solid rgba(93,72,42,.16) !important;
  box-shadow:0 10px 30px rgba(84,63,31,.10) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.topbar.scrolled{
  background:#F2E6CE !important;
  box-shadow:0 14px 34px rgba(84,63,31,.14) !important;
}
.topbar nav a{
  color:#4E463A !important;
}
.topbar nav a:hover,.topbar nav a.active{
  color:#263C42 !important;
  background:rgba(255,255,255,.34) !important;
  box-shadow:0 8px 22px rgba(84,63,31,.08) !important;
}
.topbar nav a::after{
  background:linear-gradient(90deg,#39B9E8,#4B9E82) !important;
}
.brand{color:#263C42 !important}
.brand b{color:#238EBD !important}
.nav-login-btn{
  background:rgba(255,255,255,.42) !important;
  border-color:rgba(66,191,233,.30) !important;
  color:#263C42 !important;
  box-shadow:0 8px 22px rgba(84,63,31,.08) !important;
}
.nav-login-btn:hover{
  background:rgba(255,255,255,.58) !important;
  box-shadow:0 14px 30px rgba(84,63,31,.14) !important;
}
@media(max-width:700px){
  .topbar{background:#F2E6CE !important}
}

/* =========================================================
   PBR RESPONSIVE HARDENING — desktop / laptop / tablet / mobile
   Additive only: layout and interaction safe, no workflow changes.
   ========================================================= */
html{overflow-x:hidden;scroll-padding-top:84px}
body{overflow-x:hidden;max-width:100%}
img,svg,video,canvas{max-width:100%;height:auto}
button,input,select,textarea{font:inherit;max-width:100%}
*,*::before,*::after{box-sizing:border-box}

/* Laptop widths: prevent the dense desktop nav from squeezing content. */
@media (min-width:861px) and (max-width:1180px){
  .topbar{padding-inline:18px;gap:10px}
  .topbar .brand{flex:0 0 auto}
  .topbar nav{gap:1px;justify-content:center;min-width:0}
  .topbar nav a{font-size:10px;padding:8px 6px;white-space:nowrap}
  .profile-trigger{flex:0 0 auto}
}

/* Tablet / small laptop navigation becomes a real compact menu. */
@media (max-width:860px){
  .topbar{grid-template-columns:40px minmax(0,1fr) auto !important}
  .topbar nav{display:none !important}
  .mobile-menu-toggle{display:flex !important}
  .mobile-nav-panel{display:block !important}
  .brand span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .profile-trigger{min-width:42px;padding-inline:10px}
  #profileTriggerLabel{display:none}
}

/* General fluid section/container guardrails. */
.section,.project-credits,.credits,.rules,.stats,.registered-panel,.representative-cta{
  width:100%;max-width:100%;
}
.section-head-row,.register-layout,.status-layout,.split,.dashboard-intro,.my-gallery-head,.gallery-head{min-width:0}
.register-layout>* , .split>* , .status-layout>*{min-width:0}

/* Forms never create horizontal overflow. */
.form,.card,.modal-card,.payment-panel,.payment-proof-card,.register-copy,
.form-grid,.form-row,.email-verification-block,.payment-methods{min-width:0;max-width:100%}
.form input,.form select,.form textarea,.form button{width:100%;min-width:0}

/* Main home grids scale gracefully on wide displays. */
@media (min-width:1181px){
  .hero{max-width:1500px;margin-inline:auto}
  .section{max-width:1500px;margin-inline:auto}
  .stats{max-width:1500px;margin-inline:auto}
}

/* Tablet. */
@media (max-width:900px){
  .hero{gap:34px}
  .hero-actions{flex-wrap:wrap}
  .hero-actions .btn{min-width:170px}
  .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .title-grid{gap:12px}
  .teacher-grid{grid-template-columns:1fr 1fr !important}
  .credits-inline-list{grid-template-columns:1fr 1fr !important;gap:26px !important}
}

/* Phone: touch-first sizing and no cramped two-column content. */
@media (max-width:600px){
  html{scroll-padding-top:72px}
  .topbar{min-height:58px;padding:8px 12px !important}
  .mobile-menu-toggle{width:38px;height:38px;flex-basis:38px;border-radius:11px}
  .brand{gap:8px !important;min-width:0}
  .brand img{width:38px !important;height:38px !important;flex:0 0 38px}
  .brand span{font-size:9px !important;letter-spacing:.07em}
  .brand b{font-size:7px !important;letter-spacing:.16em}
  .profile-trigger{height:38px !important;width:42px !important;min-width:42px !important;padding:0 !important;border-radius:12px !important}
  .profile-trigger-icon{width:20px;height:20px}
  .mobile-nav-panel{top:64px;left:10px;right:10px;padding:8px;border-radius:16px}
  .mobile-nav-panel a{padding:13px 12px;font-size:11px}

  .hero{padding:46px 18px 58px !important;gap:24px}
  .hero-logo img{width:min(78vw,290px) !important}
  .hero h1{font-size:clamp(40px,13vw,58px) !important;line-height:.94}
  .hero p{font-size:13px;line-height:1.7;max-width:520px}
  .hero-actions{display:grid;width:100%;grid-template-columns:1fr;gap:10px}
  .hero-actions .btn{width:100%;min-width:0}
  .hero-note{font-size:9px;line-height:1.55}

  .trip-countdown{padding:22px 16px !important;gap:20px !important}
  .trip-countdown-copy h2{font-size:30px !important}
  .trip-countdown-copy p{font-size:10px}
  .countdown-timer{gap:8px !important}
  .countdown-timer>div{padding:12px 8px !important}
  .countdown-timer strong{font-size:26px !important}

  .stats{grid-template-columns:1fr 1fr !important}
  .stats div:last-child{grid-column:1/-1}
  .stats strong{font-size:27px !important}

  .section{padding:62px 16px !important}
  .section h2{font-size:clamp(32px,10vw,43px) !important;line-height:1.02}
  .section p{line-height:1.7}
  .section-head-row{gap:14px}
  .title-grid,.comrades-grid,.teacher-grid,.credit-grid{grid-template-columns:1fr !important}
  .title-grid{gap:10px}
  .teacher-card{grid-template-columns:40px minmax(0,1fr) !important}
  .teacher-card h3{font-size:18px !important}

  .credits-inline-list{grid-template-columns:1fr !important;gap:12px !important}
  .credit-inline{gap:13px !important}
  .credit-inline>img{flex-basis:60px !important;width:60px !important;height:60px !important}
  .credit-inline-text h3{font-size:20px !important}

  .modal{padding:8px !important;align-items:flex-end}
  .modal-card{width:100% !important;max-height:calc(100dvh - 16px) !important;overflow:auto;padding:34px 18px 22px !important;border-radius:22px 22px 16px 16px !important}
  .modal-card h2{font-size:32px !important}
  .registration-id{font-size:20px !important;letter-spacing:.06em}

  footer{padding:20px 16px !important;display:block !important;line-height:1.7}
  footer span{display:block;margin-top:6px}
}

/* Very small phones. */
@media (max-width:380px){
  .brand b{display:none}
  .hero h1{font-size:39px !important}
  .section h2{font-size:31px !important}
  .countdown-timer strong{font-size:23px !important}
  .stats strong{font-size:24px !important}
}

/* Touch devices should not depend on hover-only content. */
@media (hover:none){
  .gallery-meta{opacity:1 !important;transform:none !important}
  .gallery-card:hover,.comrade:hover,.credit-inline:hover,.credit-person:hover{transform:none !important}
  .gallery-card:hover img,.credit-person:hover img{transform:none !important}
}

/* Compact navigation for 861–1040px laptops/tablets: prevents nav crowding. */
@media (min-width:861px) and (max-width:1040px){
  .topbar{grid-template-columns:40px minmax(0,1fr) auto !important;display:grid !important;align-items:center !important}
  .topbar nav{display:none !important}
  .mobile-menu-toggle{display:flex !important}
  .mobile-nav-panel{display:block !important}
  .topbar .brand{min-width:0}
}
@media (min-width:1041px){.mobile-menu-toggle,.mobile-nav-panel{display:none !important}}


/* Scroll-triggered social QR cards */
.social-qr-backdrop{position:fixed;inset:0;z-index:9990;background:rgba(12,31,32,.12);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .65s cubic-bezier(.2,.8,.2,1)}
.social-qr-backdrop.is-visible{opacity:1;pointer-events:auto}
.social-qr-popup{position:fixed;z-index:9991;right:clamp(16px,3vw,42px);bottom:clamp(16px,3vw,38px);width:min(340px,calc(100vw - 28px));padding:22px 22px 18px;border:1px solid rgba(255,255,255,.75);border-radius:26px;background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(242,250,247,.97));box-shadow:0 24px 80px rgba(19,49,48,.22),0 3px 12px rgba(19,49,48,.08);color:#173b3b;transform:translate3d(0,38px,0) scale(.94);opacity:0;filter:blur(8px);transition:transform .78s cubic-bezier(.16,1,.3,1),opacity .55s ease,filter .7s ease;overflow:hidden}
.social-qr-popup[hidden]{display:none}
.social-qr-popup.is-visible{transform:translate3d(0,0,0) scale(1);opacity:1;filter:blur(0)}
.social-qr-popup:before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,#20b45b,#f84b91,#f4a51c);transform:scaleX(0);transform-origin:left;transition:transform 7s linear}
.social-qr-popup.is-visible:before{transform:scaleX(1)}
.social-qr-close{position:absolute;top:11px;right:12px;z-index:2;width:34px;height:34px;border:1px solid rgba(23,59,59,.12);border-radius:50%;background:#fff;color:#234747;font-size:24px;line-height:1;cursor:pointer;transition:transform .25s ease,background .25s ease}
.social-qr-close:hover{transform:rotate(90deg);background:#f0f8f5}
.social-qr-copy{padding:3px 32px 0 0}
.social-qr-eyebrow{font-size:9px;letter-spacing:.19em;font-weight:800;color:#1689a6}
.social-qr-copy h3{font-size:23px;line-height:1.12;letter-spacing:-.035em;margin:9px 0 7px;color:#163d3c}
.social-qr-copy p{font-size:12px;line-height:1.55;color:#67807d;margin:0 0 15px}
.social-qr-image-wrap{display:grid;place-items:center;padding:10px;border-radius:19px;background:#fff;border:1px solid rgba(30,80,70,.09);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)}
.social-qr-image-wrap img{display:block;width:min(100%,218px);height:auto;aspect-ratio:1;object-fit:contain;border-radius:9px}
.social-qr-bottom{display:flex;justify-content:space-between;gap:12px;margin-top:13px;color:#718784;font-size:10px;font-weight:700;letter-spacing:.04em}
.social-qr-bottom span:last-child{color:#df7627}
@media(max-width:560px){.social-qr-popup{right:12px;bottom:12px;width:min(310px,calc(100vw - 24px));padding:18px;border-radius:22px}.social-qr-copy h3{font-size:21px}.social-qr-image-wrap img{width:min(100%,185px)}}
@media(prefers-reduced-motion:reduce){.social-qr-backdrop,.social-qr-popup,.social-qr-close,.social-qr-popup:before{transition:none!important}.social-qr-popup{filter:none;transform:none}}


/* ===== STUDENT REPRESENTATIVE — ORANGE BRUSH UPDATE ===== */
.representative-cta{
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
  width:100%;
  max-width:100%;
  min-width:0;
  min-height:292px;
  margin:28px 0 0;
  padding:35px 30px 33px;
  border:0;
  border-radius:0;
  overflow:visible;
  background-color:transparent;
  background-image:url('./student-representative-orange-brush.png');
  background-size:100% 100%;
  background-position:center;
  background-repeat:no-repeat;
  box-shadow:none;
  text-align:center;
  transform:translateZ(0);
}
.representative-cta::before{display:none;}
.representative-cta-glow{display:none;}
.representative-cta-content{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  max-width:100%;
  min-width:0;
  flex:none;
}
.representative-kicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:#4a210d;
  font-size:9px;
  line-height:1.25;
  font-weight:900;
  letter-spacing:.16em;
}
.representative-kicker::before{
  width:6px;
  height:6px;
  background:#4a210d;
  box-shadow:0 0 0 4px rgba(74,33,13,.10);
}
.representative-cta h2{
  max-width:100%;
  margin:7px 0 8px;
  color:#351807;
  font-family:"Playfair Display",Georgia,serif;
  font-size:clamp(22px,3.2vw,34px);
  line-height:1.04;
  letter-spacing:-.035em;
  text-align:center;
  text-wrap:balance;
}
.representative-cta h2 .representative-cta-lead{
  display:block;
  color:#351807 !important;
}
.representative-cta h2 em{
  display:block;
  color:#5b220b !important;
  font-style:italic;
}
.representative-cta p{
  max-width:440px;
  margin:0 auto;
  color:#512a17;
  font-size:clamp(11px,1vw,13px);
  line-height:1.45;
  text-align:center;
  text-wrap:pretty;
}
.representative-cta-btn{
  position:relative;
  z-index:1;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:40px;
  width:auto;
  margin:13px 0 0;
  padding:0 19px;
  border:1px solid rgba(54,25,10,.25);
  border-radius:999px;
  background:linear-gradient(135deg,#3f1e0d,#5b2a12);
  color:#fff8ef;
  text-decoration:none;
  font-size:11px;
  font-weight:900;
  letter-spacing:.035em;
  box-shadow:0 6px 17px rgba(62,28,10,.23),inset 0 1px 0 rgba(255,255,255,.15);
  transition:transform .25s ease,box-shadow .25s ease,filter .25s ease;
}
.representative-cta-btn span{font-size:17px;line-height:1;transition:transform .25s ease;}
.representative-cta-btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.12);
  box-shadow:0 10px 22px rgba(62,28,10,.3),inset 0 1px 0 rgba(255,255,255,.18);
}
.representative-cta-btn:hover span{transform:translate(2px,-2px);}
.representative-cta-btn:focus-visible{outline:2px solid #48210d;outline-offset:4px;}
@media(max-width:760px){
  .representative-cta{
    display:flex;
    width:100%;
    max-width:100%;
    min-height:260px;
    margin:0 0 24px !important;
    padding:31px 27px 29px;
    background-size:100% 100%;
  }
  .representative-cta-content{width:100%;max-width:100%;}
  .representative-cta h2{font-size:clamp(21px,6vw,28px);max-width:100%;}
  .representative-cta p{max-width:360px;font-size:12px;line-height:1.4;}
  .representative-cta-btn{width:auto;max-width:100%;margin-top:11px;}
}
@media(max-width:380px){
  .representative-cta{min-height:248px;padding:28px 23px 26px;}
  .representative-kicker{font-size:8px;letter-spacing:.13em;}
  .representative-cta h2{font-size:21px;}
  .representative-cta p{font-size:11px;}
}
@media(prefers-reduced-motion:reduce){
  .representative-cta-btn,.representative-cta-btn span{transition:none;}
}

/* Final mobile fit fix — keep the countdown tiles fully inside the painted banner. */
@media (max-width:600px){
  .trip-countdown{
    box-sizing:border-box;
    padding:20px 14px 21px !important;
    min-height:0;
  }
  .trip-countdown::before{
    top:7px !important;
    bottom:7px !important;
    height:auto !important;
    left:1.5% !important;
    right:1.5% !important;
  }
  .trip-countdown::after{
    top:13px !important;
    bottom:12px !important;
    height:auto !important;
    left:2.5% !important;
    right:2.5% !important;
  }
  .trip-countdown-copy{
    width:100%;
    min-width:0;
  }
  .trip-countdown-copy h2{
    max-width:100%;
    font-size:clamp(24px,8vw,30px) !important;
    line-height:1.02;
    overflow-wrap:normal;
  }
  .trip-countdown-copy p{
    max-width:100%;
    font-size:clamp(7px,2.6vw,9px) !important;
    letter-spacing:.08em;
    line-height:1.35;
  }
  .countdown-timer{
    box-sizing:border-box;
    width:100% !important;
    max-width:100%;
    min-width:0;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
    margin-top:12px !important;
  }
  .countdown-timer>div{
    box-sizing:border-box;
    min-width:0;
    min-height:58px;
    padding:10px 5px !important;
    border-radius:9px;
  }
  .countdown-timer strong{
    font-size:clamp(22px,7vw,26px) !important;
    line-height:1;
  }
  .countdown-timer span{
    font-size:7px;
    letter-spacing:.10em;
    white-space:nowrap;
  }
}

@media (max-width:360px){
  .trip-countdown{padding:18px 11px 19px !important}
  .trip-countdown-copy h2{font-size:clamp(22px,7.6vw,27px) !important}
  .countdown-timer{gap:6px !important}
  .countdown-timer>div{padding:9px 4px !important;min-height:55px}
  .countdown-timer span{font-size:6px;letter-spacing:.08em}
}


/* Mobile profile/login button alignment fix (screenshot 2026-10-10).
   Keep the icon centered when the Login label is hidden on phones. */
@media (max-width:600px){
  #profileTrigger.profile-trigger{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:0 !important;
    box-sizing:border-box !important;
  }
  #profileTrigger .profile-trigger-icon{
    display:grid !important;
    place-items:center !important;
    flex:0 0 20px !important;
    width:20px !important;
    height:20px !important;
    margin:0 !important;
    box-sizing:border-box !important;
  }
  #profileTrigger .profile-trigger-icon svg{
    display:block !important;
    width:17px !important;
    height:17px !important;
    flex:none !important;
  }
}

/* Mobile header visibility fix (2026-10-10): keep the full brand and both controls visible. */
@media (max-width: 600px) {
  .topbar {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) 42px !important;
    align-items: center !important;
    column-gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 58px !important;
    padding: 6px 10px !important;
  }
  .topbar > .mobile-menu-toggle {
    display: flex !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-self: start !important;
  }
  .topbar > .brand {
    display: flex !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-items: center !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  .topbar > .brand img {
    display: block !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    flex: 0 0 34px !important;
    object-fit: contain !important;
  }
  .topbar > .brand span {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    font-size: 9px !important;
    line-height: 1.15 !important;
    letter-spacing: .05em !important;
  }
  .topbar > .brand b {
    display: block !important;
    margin-top: 2px !important;
    font-size: 7px !important;
    line-height: 1.1 !important;
    letter-spacing: .12em !important;
    white-space: nowrap !important;
  }
  .topbar > nav {
    display: none !important;
  }
  .topbar > #profileTrigger {
    display: inline-flex !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Mobile countdown paint-edge correction (2026-10-10).
   Extend the brush's lower edge behind both rows of countdown tiles so
   translucent cards never appear to spill outside the painted banner. */
@media (max-width:600px){
  .trip-countdown::before{
    clip-path:polygon(
      0.5% 12%, 3% 8%, 7% 7%, 13% 5%, 20% 7%, 29% 4%, 38% 7%,
      48% 5%, 58% 7%, 68% 4%, 77% 6%, 86% 4%, 94% 7%, 99.4% 4%,
      99% 18%, 100% 31%, 98.6% 43%, 100% 57%, 98.7% 71%, 100% 84%,
      99.5% 91%, 97% 96%, 91% 98%, 84% 96%, 75% 99%, 67% 97%,
      57% 100%, 48% 98%, 39% 100%, 30% 97%, 21% 99%, 13% 97%,
      5% 98%, 2% 95%, 0.8% 79%, 1.8% 65%, 0% 52%, 1.4% 39%, 0% 26%
    ) !important;
  }
  .trip-countdown::after{
    clip-path:polygon(
      0 9%, 4% 4%, 11% 7%, 18% 3%, 27% 6%, 35% 4%, 45% 7%,
      55% 3%, 66% 6%, 75% 4%, 85% 7%, 95% 4%, 100% 8%,
      99.5% 91%, 96% 96%, 89% 98%, 81% 96%, 72% 99%, 63% 97%,
      54% 100%, 45% 98%, 34% 100%, 25% 97%, 15% 99%, 6% 96%,
      0 91%
    ) !important;
  }
}

/* FINAL HERO LOGO SIZE TUNE — slightly smaller for a better hero balance */
.hero-logo img{
  width:min(100%,360px) !important;
  max-width:360px !important;
  transform:none !important;
}
.hero-logo:hover img{
  transform:translate3d(0,-4px,0) scale(1.01) !important;
}
@media(max-width:1100px){
  .hero-logo img{width:min(100%,330px) !important;max-width:330px !important;}
}
@media(max-width:860px){
  .hero-logo img{width:min(78vw,285px) !important;max-width:285px !important;}
}
@media(max-width:600px){
  .hero-logo img{width:min(78vw,245px) !important;max-width:245px !important;}
}
@media(max-width:430px){
  .hero-logo img{width:min(76vw,230px) !important;max-width:230px !important;}
}