/* ============================================================
   THE STUDENT LIFE — landing page  ·  design system
   ============================================================ */

/* smooth cross-document navigation: pages cross-fade instead of a hard white flash.
   Opt-in, same-origin only, degrades to a normal load on unsupported browsers. */
@view-transition{ navigation:auto; }
::view-transition-old(root),::view-transition-new(root){ animation-duration:.28s; }
@media (prefers-reduced-motion:reduce){ ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){ animation:none !important; } }

:root{
  --orange:      #FF4B29;
  --orange-deep: #E33A1C;
  --orange-soft: #FFE7DF;

  --ink:    #1A1310;
  --ink-2:  #2A211C;
  --paper:  #FFF6F0;
  --paper-2:#FFEFE6;
  --line:   #EAD9CE;

  --yellow: #FFC93C;
  --pink:   #FF5D8F;
  --grape:  #8B5CF6;
  --sky:    #2D6BFF;
  --teal:   #16C0B0;

  --whatsapp: #25D366;
  --facebook: #1877F2;

  --font-display: 'Hanken Grotesk', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, sans-serif;
  --font-hand:    'Caveat', cursive;

  --maxw: 1240px;
  --radius: 22px;
  --h1-tracking: -.04em;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:80px; }
body{
  margin:0; font-family:var(--font-body);
  background:var(--paper); color:var(--ink);
  font-size:18px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; position:relative; }

/* ---------- typography ---------- */
.eyebrow{
  font-weight:800; font-size:14px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--orange); display:inline-flex; align-items:center; gap:9px;
  background:#fff; border:2px solid var(--line); padding:8px 16px; border-radius:100px;
  box-shadow:0 4px 0 rgba(40,20,10,.06);
}
.section-ink .eyebrow{ background:var(--ink-2); border-color:#3a302a; }
h1,h2,h3{ margin:0; font-family:var(--font-display); font-weight:800; line-height:.98; letter-spacing:-.025em; }
h1{ font-size:clamp(46px, 7vw, 92px); font-weight:900; letter-spacing:var(--h1-tracking); }
h2{ font-size:clamp(34px, 4.6vw, 60px); font-weight:900; }
h3{ font-size:clamp(22px, 2.4vw, 30px); }
.lead{ font-size:clamp(18px,1.5vw,22px); line-height:1.5; color:#4a3d36; max-width:54ch; }
.hand{ font-family:var(--font-hand); font-weight:700; }
.hl{ color:var(--orange); }
.grad{ background:linear-gradient(100deg,var(--pink),var(--grape) 42%,var(--sky) 72%,var(--teal)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* hand-drawn scribble on headline words */
.scribble{ position:relative; white-space:nowrap; display:inline-block; }
.scribble svg{ position:absolute; left:-9%; top:-16%; width:118%; height:136%; overflow:visible; pointer-events:none; }
.scribble.under svg{ top:auto; bottom:-30%; height:60%; left:-4%; width:108%; }
.scribble svg path{ fill:none; stroke:var(--orange); stroke-width:4.5; stroke-linecap:round; stroke-linejoin:round; }
.has-js .scribble svg path{ stroke-dasharray:760; stroke-dashoffset:760; transition:stroke-dashoffset 1.05s ease; }
.has-js .scribble.draw svg path{ stroke-dashoffset:0; }

/* handwritten Caveat notes, scattered from the sides */
.hand-note{ position:absolute; z-index:6; font-family:var(--font-hand); font-weight:700; color:var(--orange); font-size:clamp(21px,2.3vw,33px); line-height:.95; pointer-events:none; white-space:nowrap; opacity:0; transition:opacity .6s ease, transform .6s ease; }
.hand-note.in{ opacity:1; }
.section-ink .hand-note, .section-orange .hand-note, .finalcta .hand-note{ color:#fff; }
.hand-note .arr{ display:block; }
.hand-note svg{ overflow:visible; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight:800; font-size:16px; padding:13px 24px; border-radius:100px;
  border:2px solid transparent; transition:transform .15s ease, box-shadow .15s ease, background .15s; white-space:nowrap;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn-primary{ background:var(--orange); color:#fff; box-shadow:0 4px 0 var(--orange-deep); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 6px 0 var(--orange-deep); }
.btn-ink{ background:var(--ink); color:#fff; box-shadow:0 4px 0 #000; }
.btn-ink:hover{ transform:translateY(-2px); box-shadow:0 6px 0 #000; }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:#fff; }
.btn-white{ background:#fff; color:var(--ink); box-shadow:0 4px 0 rgba(0,0,0,.18); }
.btn-white:hover{ transform:translateY(-2px); }
.btn-wa{ background:var(--whatsapp); color:#fff; box-shadow:0 4px 0 #1da851; }
.btn-wa:hover{ transform:translateY(-2px); box-shadow:0 6px 0 #1da851; }
.btn-fb{ background:var(--facebook); color:#fff; box-shadow:0 4px 0 #0e5dc0; }
.btn-fb:hover{ transform:translateY(-2px); box-shadow:0 6px 0 #0e5dc0; }
.btn-lg{ font-size:17px; padding:15px 30px; }

/* ---------- decorations (circles / stars / emoji) ---------- */
.deco{ position:absolute; z-index:1; pointer-events:none; user-select:none; }
.deco svg{ display:block; overflow:visible; }
.deco-ring{ border-radius:50%; border:3px solid var(--orange); }
.deco-ring.dashed{ border-style:dashed; }
.deco-dot{ border-radius:50%; background:var(--orange); }
.deco-emoji{ font-size:34px; line-height:1; filter:drop-shadow(0 6px 10px rgba(40,20,10,.16)); }
.spin{ animation:spin 18s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.float{ animation:float 6s ease-in-out infinite; }
.float.f2{ animation-delay:-2s; } .float.f3{ animation-delay:-4s; }
@keyframes float{ 0%,100%{ transform:translateY(0) rotate(var(--r,0)); } 50%{ transform:translateY(-12px) rotate(var(--r,0)); } }
.bob{ animation:bob 3.4s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0) rotate(var(--r,0)); } 50%{ transform:translateY(-8px) rotate(var(--r,0)); } }

/* sticker badges — solid, chunky, no white edge */
.sticker{
  position:absolute; z-index:6; font-weight:800; font-size:17px; color:#15110e;
  padding:12px 20px; border-radius:15px;
  box-shadow:0 14px 26px -8px rgba(40,20,10,.42), 0 2px 0 rgba(0,0,0,.05);
  transform:rotate(var(--r,-6deg));
  display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
  -webkit-font-smoothing:antialiased;
}
.sticker .sico{ width:30px; height:30px; display:block; flex:none; }
.sticker.s-y{ background:#FFC93C; }
.sticker.s-p{ background:#A5BFF0; }
.sticker.s-w{ background:#BAD9AB; }
.sticker.s-o{ background:var(--orange); color:#fff; }

/* ---------- nav ---------- */
.nav{ position:sticky; top:0; z-index:60; background:rgba(255,246,240,.82); backdrop-filter:blur(12px); border-bottom:1px solid transparent; transition:border-color .2s, background .2s; }
.nav.scrolled{ border-color:var(--line); }
.nav-in{ max-width:none; margin:0 auto; padding:12px clamp(22px,3.4vw,54px); display:flex; align-items:center; gap:28px; position:relative; }
.nav-logo{ display:flex; align-items:center; }
.nav-logo img{ height:42px; width:auto; display:block; }
.nav-links{ display:flex; gap:30px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); margin:0; }
.nav-links a{ font-weight:700; font-size:15.5px; color:#4a3d36; transition:color .15s; }
.nav-links a:hover{ color:var(--orange); }
.nav-cta{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.nav-socials{ display:flex; align-items:center; gap:8px; padding-right:14px; position:relative; }
.nav-socials::after{ content:""; position:absolute; right:0; top:50%; transform:translateY(-50%); width:1.5px; height:20px; background:var(--line); border-radius:2px; }
.nav-socials a{ display:grid; place-items:center; width:30px; height:30px; color:#a89a90; transition:color .15s, transform .15s; }
.nav-socials a svg{ width:18px; height:18px; }
.nav-socials a:hover{ color:var(--orange); transform:translateY(-1px); }
.nav-burger{ display:none; background:none; border:0; padding:8px; }
.nav-mobile-extra{ display:none; }
.nav-m-socials{ display:flex; align-items:center; gap:18px; }
.nav-m-socials a{ width:auto; height:auto; border-radius:0; background:none; color:#a89a90; display:grid; place-items:center; transition:color .15s; }
.nav-m-socials a svg{ width:22px; height:22px; }
.nav-m-socials a:hover{ background:none; color:var(--orange); }

/* ---------- hero ---------- */
.hero{ position:relative; padding:60px 0 44px; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.hero h1{ margin:18px 0 0; }
.hero .lead{ margin:26px 0 0; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; align-items:center; }
.hero-trust{ display:flex; align-items:center; gap:14px; margin-top:30px; }
.avatars{ display:flex; }
.avatars .av{ width:42px; height:42px; border-radius:50%; border:3px solid var(--paper); margin-left:-12px; overflow:hidden; background:var(--paper-2); }
.avatars .av image-slot, .tcard .who .av image-slot{ width:100%; height:100%; display:block; }
.avatars .av:first-child{ margin-left:0; }
.hero-trust .stars{ color:var(--orange); display:inline-flex; align-items:center; gap:3px; margin-bottom:5px; }
.hero-trust .stars svg{ width:19px; height:19px; display:block; filter:drop-shadow(0 1px 1px rgba(214,75,30,.25)); }
.hero-trust small{ display:block; color:#6a5b53; font-weight:600; font-size:13.5px; }

.collage{ position:relative; aspect-ratio:1/1.02; z-index:2; }
.collage .ph{ position:absolute; border-radius:18px; overflow:hidden; box-shadow:0 22px 50px rgba(40,20,10,.18); border:6px solid #fff; }
.collage image-slot{ width:100%; height:100%; display:block; }
.ph-1{ width:54%; height:58%; left:0; top:4%; transform:rotate(-5deg); z-index:2; }
.ph-2{ width:46%; height:46%; right:2%; top:0; transform:rotate(4deg); z-index:1; }
.ph-3{ width:50%; height:44%; right:0; bottom:2%; transform:rotate(-3deg); z-index:3; }
.ph-4{ width:40%; height:38%; left:6%; bottom:0; transform:rotate(6deg); z-index:2; }
.blob{ position:absolute; border-radius:50%; z-index:0; filter:blur(2px); opacity:.9; }

/* ---------- marquee (clean ticker, two rows) ---------- */
.marquee{ background:var(--paper-2); padding:14px 0; overflow:hidden; }
.marquee:first-of-type{ padding-top:30px; }
.marquee:last-of-type{ padding-bottom:30px; }
.marquee-track{ display:flex; width:max-content; animation:scroll 60s linear infinite; }
.chip{ display:flex; align-items:center; gap:12px; margin-right:46px; background:none; border:0; padding:0; color:#3a2c25; font-family:var(--font-display); font-weight:800; font-size:clamp(22px,2.4vw,30px); letter-spacing:-.02em; white-space:nowrap; opacity:.55; }
.chip .flag{ font-size:1.15em; line-height:1; }
.chip.on{ color:var(--orange); opacity:1; }

/* ---------- cities globe backdrop (behind the search) ---------- */
.city-finder{ position:relative; }
.cities-globe{ position:absolute; left:50%; top:30px; transform:translate(-50%,-50%); width:min(680px,150%); aspect-ratio:1; z-index:0; opacity:.45; pointer-events:none; -webkit-mask-image:radial-gradient(circle at center, #000 56%, transparent 75%); mask-image:radial-gradient(circle at center, #000 56%, transparent 75%); }
.cities-globe #globeCanvas{ display:block; width:100%; height:100%; }
#cities .section-head{ position:relative; z-index:3; }
.city-finder .city-search{ position:relative; z-index:3; }
.city-finder .city-miss{ position:relative; z-index:1; }
#cities .city-grid{ position:relative; z-index:1; }
#cities .no-city, #cities .city-cta{ position:relative; z-index:1; }
@media(max-width:560px){ .cities-globe{ width:175%; opacity:.4; } }


/* university logo rows (two rows, opposite directions, continuous on hover) */
.uni-rows{ display:flex; flex-direction:column; gap:26px; position:relative; z-index:2; }
.uni-row{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.uni-track{ display:flex; width:max-content; align-items:center; animation:uniScroll 78s linear infinite; }
.uni-track.rev{ animation-direction:reverse; animation-duration:90s; }
.uni-mark{ flex:none; height:56px; margin-right:72px; display:flex; align-items:center; }
.uni-mark img{ height:100%; width:auto; max-width:240px; object-fit:contain; display:block; filter:grayscale(1); opacity:.6; transition:filter .25s, opacity .25s; }
.uni-mark img:hover{ filter:none; opacity:1; }
@keyframes uniScroll{ to{ transform:translateX(-50%); } }
@media(max-width:620px){ .uni-mark{ height:42px; margin-right:48px; } }
@keyframes scroll{ to{ transform:translateX(-50%); } }

/* ---------- section shells ---------- */
.section{ padding:96px 0; position:relative; overflow:hidden; }
.section-ink{ background:var(--ink); color:var(--paper); }
.section-orange{ background:var(--orange); color:#fff; }
.section-paper2{ background:var(--paper-2); }
.section-head{ max-width:760px; margin:0 auto 56px; text-align:center; position:relative; z-index:2; }
.section-head .lead{ margin:18px auto 0; }
.section-head h2{ margin-top:18px; }
.section-ink .lead, .section-orange .lead{ color:rgba(255,255,255,.82); }

/* ---------- stats ---------- */
.stats-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; position:relative; z-index:2; }
.stat{ text-align:center; }
.stat .num{ font-family:var(--font-display); font-weight:900; font-size:clamp(40px,5vw,68px); line-height:1; letter-spacing:-.03em; color:var(--orange); }
.stat .lbl{ font-weight:700; margin-top:8px; opacity:.78; }

/* ---------- how it works ---------- */
.how-split{ display:grid; grid-template-columns:1fr 0.82fr; gap:40px; align-items:center; position:relative; z-index:2; }
.steps{ display:flex; flex-direction:column; gap:18px; }
.step{ background:#fff; border:2px solid var(--ink); border-radius:var(--radius); padding:24px 26px; position:relative; box-shadow:6px 6px 0 var(--ink); transition:transform .18s, box-shadow .18s;
  display:flex; align-items:flex-start; gap:18px; }
.step:hover{ transform:translate(-3px,-3px); box-shadow:10px 10px 0 var(--ink); }
.step .n{ font-family:var(--font-display); font-weight:900; font-size:20px; width:48px; height:48px; border-radius:50%; background:var(--orange); color:#fff; display:grid; place-items:center; flex:none; }
.step h3{ margin:2px 0 8px; }
.step p{ margin:0; color:#5a4d45; font-size:16px; line-height:1.55; }
.how-video{ position:relative; aspect-ratio:9/16; max-height:560px; margin:0 auto; width:100%; max-width:340px;
  border-radius:24px; overflow:hidden; border:2px solid var(--ink); background:#000; box-shadow:8px 8px 0 var(--ink); }
.how-video video-slot{ width:100%; height:100%; display:block; }

/* ---------- features (image-led, 4 across) ---------- */
.features{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; position:relative; z-index:2; }
.feat{ display:flex; flex-direction:column; }
.feat-img{ border-radius:18px; overflow:hidden; aspect-ratio:4/3.4; background:#fff; border:2px solid var(--line); box-shadow:0 14px 30px rgba(40,20,10,.10); }
.feat-img image-slot{ width:100%; height:100%; display:block; }
.feat-head{ display:flex; align-items:center; gap:9px; margin:18px 0 10px; }
.feat-head h3{ margin:0; }
.feat-ico{ font-size:22px; line-height:1; flex:none; display:inline-flex; align-items:center; }
.feat-ico img{ width:26px; height:26px; object-fit:contain; display:block; }
.feat h3{ font-size:23px; margin:0; }
.feat p{ margin:0; font-size:16px; color:#5a4d45; max-width:30ch; }
.feat-points{ list-style:none; padding:0; margin:10px 0 0; max-width:32ch; }
.feat-points li{ display:flex; align-items:flex-start; gap:10px; padding:9px 0; font-size:15px; line-height:1.4; color:#5a4d45; border-top:1px solid var(--line); }
.feat-points li:first-child{ border-top:none; padding-top:2px; }
.feat-points li::before{ content:""; flex:none; width:5px; height:5px; border-radius:50%; background:var(--orange); margin-top:8px; }
.feat{ height:100%; }
.feat-cta{ margin-top:18px; align-self:flex-start; padding:11px 24px; font-size:15px; }
.feat-festival .feat-list{ margin-bottom:auto; }
.feat-list{ list-style:none; padding:0; margin:4px 0 0; display:flex; flex-direction:column; gap:10px; }
.feat-list li{ position:relative; padding-left:28px; font-size:15.5px; color:#4a3f38; line-height:1.4; font-weight:600; }
.feat-list li::before{ content:"✓"; position:absolute; left:0; top:0; width:19px; height:19px; background:var(--orange); color:#fff; border-radius:6px; display:grid; place-items:center; font-size:12px; font-weight:900; }

/* ---------- city finder ---------- */
.city-search{ display:flex; gap:12px; max-width:560px; margin:0 auto 40px; position:relative; z-index:2; }
.city-search{ display:flex; align-items:center; gap:10px; max-width:640px; margin:0 auto 40px; position:relative; z-index:5; background:#fff; border:2px solid var(--ink); border-radius:100px; padding:0 22px; box-shadow:0 10px 26px rgba(40,20,10,.10); }
.city-search .cs-ico{ color:#9a8a80; flex:none; }
.city-search input{ flex:1; font-family:inherit; font-size:18px; font-weight:600; padding:16px 0; border:0; background:none; color:var(--ink); outline:none; }
.city-search input::placeholder{ color:#9a8a80; }
.city-suggest{ position:absolute; left:0; right:0; top:calc(100% + 8px); background:#fff; border:2px solid var(--line); border-radius:20px; box-shadow:0 24px 44px rgba(40,20,10,.18); padding:6px; display:none; z-index:20; overflow:hidden; }
.city-suggest.open{ display:block; }
.cs-item{ width:100%; display:flex; align-items:center; gap:11px; padding:11px 14px; border:0; background:none; border-radius:13px; cursor:pointer; font-family:inherit; text-align:left; color:var(--ink); }
.cs-item:hover{ background:var(--paper-2); }
.cs-item svg{ color:var(--orange); flex:none; }
.cs-item .cs-city{ font-weight:800; font-size:16px; }
.cs-item .cs-country{ margin-left:auto; font-weight:600; font-size:13px; color:#9a8a80; }
.cs-empty{ padding:14px 16px; font-weight:600; color:#7a6b62; }
.cs-empty a{ color:var(--orange); font-weight:800; text-decoration:underline; }
.city-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; position:relative; z-index:2; }
.citycard{ position:relative; display:block; aspect-ratio:4/5; border-radius:20px; overflow:hidden; border:2px solid var(--ink); box-shadow:0 6px 0 rgba(40,20,10,.07); transition:transform .15s, box-shadow .15s; }
.citycard:hover{ transform:translateY(-5px); box-shadow:0 18px 34px rgba(40,20,10,.18); }
.citycard .cc-img{ position:absolute; inset:0; overflow:hidden; background:var(--paper-2); }
.citycard .cc-img::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(20,10,8,.85), rgba(20,10,8,.18) 44%, transparent 66%); z-index:1; }
.citycard image-slot{ width:100%; height:100%; display:block; }
.citycard .cc-img .pin{ position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:50%; background:var(--orange); border:2px solid #fff; display:grid; place-items:center; color:#fff; box-shadow:0 4px 10px rgba(0,0,0,.25); }
.citycard .cc-body{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:16px; display:flex; align-items:flex-end; justify-content:space-between; gap:8px; }
.citycard .cc-name{ font-family:var(--font-display); font-weight:900; font-size:21px; color:#fff; }
.citycard .cc-country{ font-weight:600; font-size:13px; color:rgba(255,255,255,.82); margin-top:2px; }
.citycard .arrow{ color:#fff; font-weight:900; font-size:20px; transition:transform .15s; }
.citycard:hover .arrow{ transform:translate(3px,-3px); }
.citycard.hide{ display:none; }
.no-city{ text-align:center; color:#7a6b62; font-weight:600; margin-top:26px; display:none; }
.city-cta{ text-align:center; margin-top:40px; position:relative; z-index:2; }
.city-miss{ text-align:center; margin:-26px auto 36px; color:#7a6b62; font-weight:600; font-size:15px; position:relative; z-index:2; }
.city-miss a{ color:var(--orange); font-weight:800; text-decoration:underline; }

/* ---------- map (real, Leaflet) ---------- */
.map-toggle{ display:flex; align-items:center; justify-content:center; gap:9px; margin:46px auto 0; background:none; border:0; font-family:var(--font-display); font-weight:800; font-size:18px; color:var(--ink); }
.map-toggle svg{ color:var(--orange); }
.map-wrap{ position:relative; margin-top:24px; border-radius:26px; overflow:hidden; border:3px solid var(--ink); box-shadow:0 24px 50px rgba(40,20,10,.20); transition:max-height .4s ease, opacity .3s ease, margin .3s; max-height:560px; }
.map-wrap.collapsed{ max-height:0; border-width:0; margin-top:0; opacity:0; }
.map{ position:relative; height:520px; background:#15110e; z-index:1; }
.leaflet-container{ background:#15110e; font-family:var(--font-body); }
.lmark-wrap{ overflow:visible; }
.lmark-wrap .core{ position:absolute; left:50%; top:50%; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; background:var(--orange); border:2px solid rgba(255,255,255,.3); box-shadow:0 0 12px 3px rgba(255,75,41,.75); animation:mbounce 2.4s ease-in-out infinite; }
.lmark-wrap .pulse{ position:absolute; left:50%; top:50%; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; border:2px solid var(--orange); animation:mpulse 2.4s ease-out infinite; }
@keyframes mbounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
@keyframes mpulse{ 0%{ transform:scale(1); opacity:.6; } 100%{ transform:scale(2.8); opacity:0; } }
.leaflet-tooltip{ background:var(--ink); color:#fff; border:0; border-radius:9px; font-family:var(--font-display); font-weight:800; font-size:13px; padding:5px 11px; box-shadow:0 8px 18px rgba(0,0,0,.35); }
.leaflet-tooltip-top:before{ border-top-color:var(--ink); }
.leaflet-control-zoom a{ border-radius:8px !important; color:var(--ink) !important; font-weight:800; }
.map-badge{ position:absolute; left:18px; bottom:18px; z-index:600; background:rgba(26,19,16,.82); backdrop-filter:blur(6px); border:2px solid #3a302a; color:#fff; font-weight:800; font-size:14px; padding:10px 16px; border-radius:100px; display:flex; align-items:center; gap:9px; pointer-events:none; }
.map-badge .d{ width:9px; height:9px; border-radius:50%; background:var(--orange); box-shadow:0 0 8px var(--orange); }

/* ---------- universities ---------- */
.unis{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; position:relative; z-index:2; }
.uni-logo{ aspect-ratio:5/3; border-radius:16px; background:#fff; border:2px solid var(--line); display:grid; place-items:center; overflow:hidden; transition:transform .15s, border-color .15s; }
.uni-logo:hover{ transform:translateY(-3px); border-color:var(--orange); }
.uni-logo image-slot{ width:100%; height:100%; display:block; }

/* ---------- gallery (auto-moving strip) ---------- */
.gallery-scroll{ overflow:hidden; padding:10px 0 24px; margin-top:36px; position:relative; z-index:2;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); }
.gallery-track{ display:flex; gap:18px; width:max-content; animation:scroll 70s linear infinite; }
.gallery-scroll .gcard{ flex:0 0 auto; width:300px; height:384px; border-radius:18px; overflow:hidden;
  background:var(--paper-2); border:2px solid var(--line);
  box-shadow:0 10px 26px rgba(40,20,10,.10); transform:rotate(var(--gr,0deg)); }
.gallery-track .gcard:nth-child(even){ --gr:-1.1deg; }
.gallery-track .gcard:nth-child(3n){ --gr:1.3deg; }
.gallery-scroll image-slot{ width:100%; height:100%; display:block; }

/* ---------- testimonials (video stories) ---------- */
.vstories{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; margin-top:40px; position:relative; z-index:2; }
.vstories.vbottom{ grid-template-columns:repeat(4,1fr); gap:24px; max-width:1084px; margin:44px auto 0; }
/* testimonials: static highlighted featured card on top, the rest in a row below */
.vfeatured{ display:flex; justify-content:center; }
.vfeatured .vbig-item{ width:100%; max-width:360px; }
.vtop{ display:grid; grid-template-columns:1fr 1.6fr 1fr; gap:24px; align-items:center; max-width:960px; margin:40px auto 0; position:relative; z-index:2; }
.vbig-item .vcard{ aspect-ratio:1/1; border-width:3px; box-shadow:12px 12px 0 var(--orange); }
.vbig-item .vname{ font-size:18px; }
.vitem{ display:flex; flex-direction:column; gap:11px; }
.vmeta{ text-align:center; }
.vname{ font-family:var(--font-display); font-weight:800; font-size:15px; color:var(--ink); line-height:1.1; }
.vsub{ font-size:12.5px; color:#7a6b62; font-weight:600; margin-top:3px; }
.vcard{ aspect-ratio:9/16; border-radius:18px; overflow:hidden; border:2px solid var(--ink); background:#000; box-shadow:5px 5px 0 var(--ink); transition:transform .15s; }
.vcard:hover{ transform:translateY(-4px); }
.vstories video-slot, #stories video-slot{ width:100%; height:100%; display:block; }
@media(max-width:1000px){ .vtop{ grid-template-columns:1fr; gap:18px; } .vbig-item{ order:-1; } .vtop .vcard{ max-width:340px; width:100%; margin:0 auto; } .vstories.vbottom{ grid-template-columns:repeat(2,1fr); max-width:420px; } }

/* ---------- faq ---------- */
.faq{ max-width:820px; margin:0 auto; position:relative; z-index:2; }
.qa{ border-bottom:2px solid var(--line); }
.qa button{ width:100%; background:none; border:0; text-align:left; padding:26px 6px; display:flex; align-items:center; justify-content:space-between; gap:18px; font-family:var(--font-display); font-weight:800; font-size:clamp(18px,2vw,22px); color:var(--ink); }
.qa .pm{ flex:none; width:32px; height:32px; border-radius:50%; background:var(--orange); color:#fff; display:grid; place-items:center; font-size:22px; transition:transform .2s; }
.qa.open .pm{ transform:rotate(45deg); }
.qa .ans{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.qa .ans p{ margin:0 0 26px; color:#5a4d45; font-size:17px; max-width:64ch; }
.faq-more{ display:contents; }
.faq-more[hidden]{ display:none; }
.faq{ position:relative; }
.faq.collapsed::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:140px; pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,246,240,0) 0%, var(--paper) 92%); }
.section-paper2 .faq.collapsed::after{
  background:linear-gradient(to bottom, rgba(255,239,230,0) 0%, var(--paper-2) 92%); }
.faq-toggle-wrap{ display:flex; justify-content:center; margin-top:34px; position:relative; z-index:2; }

/* ---------- final CTA ---------- */
.finalcta .card{ background:var(--orange); color:#fff; border-radius:36px; padding:72px 56px; text-align:center; position:relative; overflow:hidden; }
.finalcta h2{ font-size:clamp(38px,5.5vw,72px); }
.finalcta .lead{ color:rgba(255,255,255,.92); margin:20px auto 0; }
.finalcta .actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:38px; }
.finalcta .blob{ filter:blur(0); opacity:.18; }

/* ---------- footer ---------- */
.footer{ position:relative; background:var(--ink); color:#cdbfb6; padding:78px 0 38px; overflow:hidden; }
/* warm radial glow + brand accent edge so the footer reads as a designed band,
   not a flat black box bolted onto the page. */
.footer::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--orange) 0%,#ff7a52 55%,transparent 100%); }
.footer::after{ content:""; position:absolute; left:-10%; top:-40%; width:60%; height:120%;
  background:radial-gradient(circle, rgba(255,75,41,.10) 0%, transparent 62%); pointer-events:none; }
.footer .wrap{ position:relative; z-index:1; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; }
.footer-legal-col{ display:none; }
.footer-logo img{ height:58px; width:auto; }
.footer h4{ font-family:var(--font-display); color:#fff; font-size:13px; text-transform:uppercase; letter-spacing:.14em; margin:0 0 16px; }
.footer a{ display:block; padding:7px 0; color:#bdafa6; font-weight:600; font-size:15px; transition:color .15s ease, transform .15s ease; }
.footer a:hover{ color:var(--orange); transform:translateX(3px); }
.footer .brand p{ max-width:34ch; color:#a89a91; font-size:15px; line-height:1.6; }
.footer .socials{ display:flex; gap:12px; margin-top:22px; }
.footer .socials a{ width:44px; height:44px; border-radius:50%; background:var(--ink-2); border:1px solid rgba(255,255,255,.06); display:grid; place-items:center; padding:0; transition:background .16s ease, transform .16s ease, color .16s ease, border-color .16s ease; }
.footer .socials a:hover{ background:var(--orange); border-color:var(--orange); color:#fff; transform:translateY(-3px); }
.footer-bot{ border-top:1px solid var(--ink-2); margin-top:52px; padding-top:26px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font-size:14px; color:#9a8c83; }
.footer-bot a{ display:inline; color:#9a8c83; }
.footer-bot a:hover{ color:var(--orange); }

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

/* ---------- tweak states ---------- */
.no-stickers .sticker, .no-stickers .deco{ display:none !important; }
.flat-btns .btn{ box-shadow:none !important; }
.flat-btns .btn:hover{ transform:translateY(-1px); }
.flat-btns .step{ box-shadow:none; }

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero{ padding:34px 0 28px; }
  .hero-grid{ grid-template-columns:1fr; gap:34px; }
  .collage{ max-width:440px; margin:0 auto; }
  .how-split{ grid-template-columns:1fr; gap:30px; }
  .how-video{ order:-1; max-width:300px; }
  .stats-row{ grid-template-columns:repeat(2,1fr); gap:36px 20px; }
  .steps{ grid-template-columns:1fr; }
  .features{ grid-template-columns:repeat(2,1fr); }
  .city-grid{ grid-template-columns:repeat(2,1fr); }
  .unis{ grid-template-columns:repeat(4,1fr); }
  .gallery{ grid-template-columns:repeat(4,1fr); }
  .tcols{ columns:2; }
  /* Footer: lift the brand block to its own full-width row so it stops fighting
     the link columns for space; the three link groups sit in a tidy row below. */
  .footer-grid{ grid-template-columns:repeat(3,1fr); gap:30px 28px; }
  .footer .brand{ grid-column:1 / -1; }
  .footer .brand p{ max-width:48ch; }
  .hand-note{ display:none; }

  /* ---- nav: burger + full overlay ---- */
  .nav-links{ display:none; }
  .nav-cta{ display:none; }
  .nav-burger{ display:grid; place-items:center; margin-left:auto; width:44px; height:44px; border-radius:12px; color:var(--ink); position:relative; z-index:120; }
  .nav-burger .ic-close{ display:none; }
  body.nav-open .nav-burger .ic-bars{ display:none; }
  body.nav-open .nav-burger .ic-close{ display:block; }
  body.nav-open{ overflow:hidden; }
  /* keep the logo crisp on top of the frosted menu (the X is already z:120) */
  body.nav-open .nav{ background:transparent; backdrop-filter:none; border-color:transparent; }
  body.nav-open .nav-logo{ position:relative; z-index:120; }

  /* Solid full-screen menu: opaque cream panel with a warm brand glow.
     (No translucency or backdrop blur: the page must never show through.) */
  .nav-links.open{
    display:flex; flex-direction:column; gap:0;
    position:fixed; top:0; left:0; right:auto; bottom:auto;
    width:100vw; height:100vh; height:100dvh; z-index:110;
    background:
      radial-gradient(125% 68% at 88% -8%, rgba(255,75,41,.14), transparent 58%),
      linear-gradient(180deg, #FDF6F0, #F8EEE7);
    padding:104px 26px calc(34px + env(safe-area-inset-bottom));
    transform:none;
    overflow-y:auto;
    animation:menuIn .4s cubic-bezier(.22,1,.36,1);
  }
  @keyframes menuIn{ from{ opacity:0; } to{ opacity:1; } }
  @keyframes menuItem{ from{ opacity:0; transform:translateY(13px); } to{ opacity:1; transform:none; } }

  .nav-links.open > a{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 4px; font-size:26px; font-weight:800; letter-spacing:-.015em;
    color:var(--ink); border-bottom:1px solid rgba(40,20,10,.08);
    opacity:0; animation:menuItem .55s cubic-bezier(.22,1,.36,1) forwards;
  }
  .nav-links.open > a::after{
    content:""; width:9px; height:9px; margin-right:6px; flex:none;
    border-top:2.5px solid var(--orange); border-right:2.5px solid var(--orange);
    border-radius:1px; transform:rotate(45deg); opacity:.5; transition:transform .2s, opacity .2s;
  }
  .nav-links.open > a:active{ color:var(--orange); }
  .nav-links.open > a:active::after{ transform:rotate(45deg) translate(2px,-2px); opacity:1; }
  .nav-links.open > a:nth-child(1){ animation-delay:.06s; }
  .nav-links.open > a:nth-child(2){ animation-delay:.11s; }
  .nav-links.open > a:nth-child(3){ animation-delay:.16s; }
  .nav-links.open > a:nth-child(4){ animation-delay:.21s; }
  .nav-links.open > a:nth-child(5){ animation-delay:.26s; }
  .nav-links.open > a:nth-child(6){ animation-delay:.31s; }

  .nav-links.open .nav-mobile-extra{
    display:flex; flex-direction:column; gap:20px; padding-top:30px; margin-top:auto;
    opacity:0; animation:menuItem .55s cubic-bezier(.22,1,.36,1) .36s forwards;
  }
  .nav-links.open .nav-mobile-extra .nav-m-cta{
    width:100%; padding:18px 24px; border-bottom:0; font-size:18px; justify-content:center;
    border-radius:16px; box-shadow:0 14px 30px -12px rgba(255,75,41,.7);
  }
  .nav-links.open .nav-mobile-extra a{ border-bottom:0; padding:0; }
  .nav-links.open .nav-m-socials{ justify-content:center; gap:30px; }
  .nav-links.open .nav-m-socials a{ color:#7a6a60; }
  .nav-links.open .nav-m-socials a svg{ width:24px; height:24px; }
  .nav-links.open .nav-m-socials a:active{ color:var(--orange); }

  /* ---- hero collage: keep playful, stop ugly overlap ---- */
  .collage .ph{ border-width:5px; }
  .sticker{ font-size:13.5px !important; padding:8px 14px !important; gap:8px !important; border-radius:13px; box-shadow:0 10px 18px -7px rgba(40,20,10,.4); }
  .sticker .sico{ width:22px !important; height:22px !important; }
  .sticker.s-w{ left:-3% !important; top:50% !important; }
  .sticker.s-y{ right:-3% !important; top:5% !important; }
  .sticker.s-p{ right:-1% !important; bottom:1% !important; }
}
@media (max-width:560px){
  body{ font-size:17px; }
  .wrap{ padding:0 20px; }
  .section{ padding:54px 0; }
  h1{ font-size:clamp(38px,11vw,54px); }
  .section-head{ margin-bottom:40px; }
  .section-head h2{ font-size:clamp(28px,8vw,38px); }
  .hero-actions{ flex-direction:column; align-items:stretch; gap:12px; }
  .hero-actions .btn{ width:100%; }
  .features{ grid-template-columns:1fr; }
  /* cities: show only a few on mobile, the rest live in the search bar */
  .city-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .city-grid .citycard:nth-child(n+5){ display:none; }
  .stats-row{ grid-template-columns:repeat(2,1fr); }
  .unis{ grid-template-columns:repeat(3,1fr); }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .tcols{ columns:1; }
  /* Footer on phones: clean LEFT-aligned layout. No centering, no decorative accent
     lines, no half-screen glow. The brand sits full width up top, then the link
     groups read naturally from the left edge; Company spans full width so it is not
     stranded beside an empty column. */
  /* Extra bottom room so the fixed bottom-left chat bubble floats below the legal
     line instead of covering the "Privacy" link. */
  .footer{ padding:50px 0 84px; }
  .footer::after{ display:none; }                          /* kill the half-screen glow on phones */
  .footer-grid{ grid-template-columns:1fr 1fr; gap:30px 18px; text-align:left; }
  .footer .brand{ grid-column:1 / -1; }
  .footer .brand .footer-logo img{ height:52px; }
  .footer .brand p{ max-width:42ch; }
  .footer .socials{ justify-content:flex-start; margin-top:18px; }
  .footer-grid > div:nth-child(4){ grid-column:1 / -1; }   /* Company full width, left-aligned */
  .footer h4{ margin-bottom:13px; }
  .footer a{ padding:9px 0; }
  .footer a:hover{ transform:none; }
  .footer-bot{ margin-top:34px; flex-direction:column; align-items:flex-start; gap:10px; text-align:left; }
  .finalcta .card{ padding:48px 24px; }
  .map{ height:380px; }

  /* a touch more breathing room so stickers clear the photos */
  .collage{ max-width:340px; }
  .sticker.s-w{ top:52% !important; }
}
@media (max-width:380px){
  /* Narrowest phones: a single left-aligned column so nothing crowds the edges. */
  .footer-grid{ grid-template-columns:1fr; text-align:left; }
  .footer h4{ margin-bottom:11px; }
  .footer a{ padding:8px 0; }
  .footer a:hover{ transform:none; }
  .stats-row{ grid-template-columns:1fr; }
}