/* =========================================================
   Kasablanc student-living site — styles
   ========================================================= */
:root{
  --ink:#0B0E1F; --ink-2:#141833; --paper:#FAF7F2; --paper-2:#F1ECE3;
  --lime:#C6F432; --coral:#FF6B4A; --sun:#FFD43B; --teal:#0F766E; --sky:#4FB3FF; --violet:#8B5CF6;
  --white:#fff; --muted:rgba(255,255,255,.72); --muted-dark:rgba(15,18,38,.68);
  --display:Syne,'Arial Black',Impact,sans-serif; --body:'Space Grotesk','Segoe UI',system-ui,sans-serif;
  --radius:22px; --shadow:0 20px 60px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--white);font-family:var(--body);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,.display{font-family:var(--display);font-weight:800;letter-spacing:-.025em;line-height:.98;margin:0}
.skip{position:absolute;left:-999px;top:8px;background:var(--lime);color:var(--ink);padding:8px 12px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
.wrap{width:min(1180px,92vw);margin:0 auto}
.center{text-align:center;margin-top:36px}
.hl{color:var(--lime)}

/* ---------- buttons / chips / tags ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 26px;border-radius:999px;font-weight:700;font-size:16px;border:2px solid transparent;cursor:pointer;transition:transform .25s cubic-bezier(.2,.8,.2,1),background .2s,color .2s,box-shadow .2s;will-change:transform}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-sm{padding:11px 18px;font-size:14px}
.btn-lime{background:var(--lime);color:var(--ink);box-shadow:0 8px 30px rgba(198,244,50,.25)}
.btn-lime:hover{box-shadow:0 12px 40px rgba(198,244,50,.45)}
.btn-sun{background:var(--sun);color:var(--ink)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#1c2148}
.btn-ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.25);backdrop-filter:blur(8px)}
.btn-ghost:hover{background:rgba(255,255,255,.16)}
.btn-ghost-dark{background:transparent;color:var(--ink);border-color:rgba(15,18,38,.35)}
.btn-ghost-dark:hover{background:rgba(15,18,38,.08)}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--lime);margin:0 0 14px}
.eyebrow.dark{color:var(--teal)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.tags span{font-size:13px;font-weight:600;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px)}
.tags.dark span{background:var(--paper-2);border-color:rgba(15,18,38,.08);color:var(--ink)}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* ---------- top bar ---------- */
.topbar{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:14px max(18px,3vw);gap:16px;
  background:linear-gradient(to bottom,rgba(11,14,31,.85),rgba(11,14,31,0));transition:background .3s}
.topbar.solid{background:rgba(11,14,31,.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.02em}
.brand img{border-radius:10px}
.topnav{display:flex;gap:26px;font-weight:600;font-size:15px}
.topnav a{opacity:.8;position:relative}
.topnav a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;background:var(--lime);transition:right .25s}
.topnav a:hover{opacity:1}.topnav a:hover::after{right:0}
@media (max-width:860px){.topnav{display:none}.brand span{display:none}}

/* ---------- the world ---------- */
.world{position:relative;background:#0B0E1F}
/* sky layer: gradient + sun + city skyline, all screen-space behind the isometric world */
.world-sky{position:absolute;inset:0;overflow:hidden;--sky-top:#1B2050;--sky-mid:#6B4A8A;--sky-hor:#FF9A5C;--night:0;--city-far:rgba(11,14,31,.55);--city-near:#070915}
.sky-grad{position:absolute;inset:0;background:linear-gradient(to bottom,var(--sky-top) 0%,var(--sky-mid) 55%,var(--sky-hor) 82%,var(--sky-hor) 100%);transition:background .2s linear}
.sky-sun{position:absolute;width:0;height:0;--sun-c:#FFD43B;transform:translate(-50%,-50%);transition:opacity .3s}
.sky-sun i{position:absolute;left:-46px;top:-46px;width:92px;height:92px;border-radius:50%;background:var(--sun-c);box-shadow:0 0 60px 24px color-mix(in srgb,var(--sun-c) 55%,transparent),0 0 200px 80px color-mix(in srgb,var(--sun-c) 25%,transparent)}
.sky-city{position:absolute;left:0;right:0;bottom:0;width:100%;height:36vh;min-height:220px}
.sky-city.far{opacity:.9;transform:translateY(-6vh)}
.sky-city .win{opacity:var(--night);transition:opacity .2s}
@media (max-width:860px){.sky-city{height:28vh;min-height:160px}.sky-sun i{left:-32px;top:-32px;width:64px;height:64px}}
.world.reduced .sky-grad{transition:none}
.world-track{position:relative}
.world-stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden}
.world-svg{position:absolute;inset:0;width:100%;height:100%}
.world-vignette{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(to top,rgba(11,14,31,.85) 0%,rgba(11,14,31,0) 45%),
  linear-gradient(to right,rgba(11,14,31,.75) 0%,rgba(11,14,31,.35) 30%,rgba(11,14,31,0) 55%),
  radial-gradient(70% 70% at 50% 50%,transparent 60%,rgba(7,9,21,.6) 100%)}
.world-copylayer{position:absolute;inset:0;pointer-events:none}
.world-copy{position:absolute;left:max(18px,5vw);bottom:max(28px,8vh);max-width:min(620px,88vw);opacity:0;pointer-events:none;
  padding-bottom:env(safe-area-inset-bottom);transition:none;will-change:opacity,transform}
.world-copy h1{font-size:clamp(42px,5.8vw,86px)}
.world-copy h2{font-size:clamp(34px,4.8vw,68px)}
.world-copy h1,.world-copy h2,.world-copy .body{text-shadow:0 2px 28px rgba(7,9,21,.75),0 1px 3px rgba(7,9,21,.5)}
.world-copy .body{font-size:clamp(16px,1.35vw,20px);color:var(--muted);max-width:52ch;margin:18px 0 0}
.world-copy .tags span{background:rgba(11,14,31,.5)}
.hero-copy{bottom:auto;top:50%;transform:translateY(-50%);max-width:min(560px,88vw)}
.world.at-start .hero-copy{opacity:1;pointer-events:auto}
.route{position:absolute;right:max(14px,2.5vw);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px;z-index:5}
.route a{display:flex;align-items:center;gap:10px;flex-direction:row-reverse;opacity:.55;transition:opacity .2s}
.route a i{width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(198,244,50,0);transition:all .25s}
.route a b{font-size:12px;font-weight:600;opacity:0;transform:translateX(6px);transition:all .25s;white-space:nowrap}
.route a:hover,.route a.on{opacity:1}
.route a.on i{background:var(--lime);transform:scale(1.4);box-shadow:0 0 0 6px rgba(198,244,50,.2)}
.route a.on b,.route a:hover b{opacity:1;transform:none}
@media (max-width:860px){.route a b{display:none}.route{right:12px}}
.world-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:.7;transition:opacity .4s}
.world-hint i{width:18px;height:28px;border:2px solid rgba(255,255,255,.6);border-radius:12px;position:relative}
.world-hint i::after{content:"";position:absolute;left:50%;top:5px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--lime);animation:wheel 1.6s infinite}
.world:not(.at-start) .world-hint{opacity:0}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(10px);opacity:0}100%{opacity:0}}
.world-progress{position:absolute;left:0;right:0;top:0;height:3px;background:rgba(255,255,255,.08);z-index:6}
.world-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--lime),var(--coral));transform-origin:left;transform:scaleX(0)}
@media (max-width:860px){.world-copy{bottom:max(64px,9vh);left:18px;right:56px;max-width:none}.hero-copy{top:auto;bottom:max(84px,12vh);transform:none}.world-copy .tags{display:none}.world-copy .body{font-size:15px}}

/* SVG world animations */
.world-svg .island-label{font-family:var(--display);font-weight:800;font-size:44px;letter-spacing:.14em;fill:rgba(255,255,255,.55)}
.world-svg .island.active .island-label{fill:var(--lime)}
.world-svg .interior{opacity:0;transition:opacity .15s linear}
.world-svg .roof{transition:none}
.world-svg .cloud{animation:drift linear infinite}
@keyframes drift{from{transform:translate(var(--x,0),0)}to{transform:translate(calc(var(--x,0) + 900px),0)}}
.world-svg .bob{animation:bob 1.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center bottom}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.world-svg .sway{transform-box:fill-box;transform-origin:center bottom;animation:sway 5s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}
.world-svg .blink{animation:blink 1.4s steps(2) infinite}
@keyframes blink{to{opacity:.2}}
.world-svg .win{animation:win 3s ease-in-out infinite alternate}
@keyframes win{from{opacity:.75}to{opacity:1}}
.world-svg .star{animation:twinkle 3s ease-in-out infinite}
.world-svg .stars{transition:opacity .3s}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:1}}
.world-svg .pin{transform-box:fill-box;transform-origin:center bottom;animation:hop 2.2s ease-in-out infinite}
@keyframes hop{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(-22px) scale(1.05)}60%{transform:translateY(-22px) scale(1.05)}}
.world-svg .badge{transform-box:fill-box;transform-origin:center;animation:pop 2.4s ease-in-out infinite}
@keyframes pop{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.world-svg .hook{transform-box:fill-box;transform-origin:top center;animation:hook 6s ease-in-out infinite}
@keyframes hook{0%,100%{transform:translateY(0)}50%{transform:translateY(-40px)}}
.world-svg .route-line{stroke-dashoffset:0;animation:dash 6s linear infinite}
@keyframes dash{to{stroke-dashoffset:-400}}
.world.reduced .world-svg *{animation:none!important}

/* ---------- ticker ---------- */
.ticker{background:var(--lime);color:var(--ink);overflow:hidden;font-family:var(--display);font-weight:800;font-size:clamp(18px,2.2vw,28px);letter-spacing:-.01em;padding:14px 0;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
.ticker-track{display:flex;gap:28px;white-space:nowrap;width:max-content;animation:ticker 28s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes ticker{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
.section{padding:clamp(72px,10vw,130px) 0}
.section.paper{background:var(--paper);color:var(--ink)}
.section.ink{background:var(--ink)}
.section.lime-bg{background:var(--lime);color:var(--ink)}
.section-head{margin-bottom:44px}
.section-head.split{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:end}
.display{font-size:clamp(36px,5.6vw,72px)}
.lede{font-size:clamp(17px,1.5vw,21px);max-width:46ch;margin:0}
.paper .lede,.lime-bg .lede{color:var(--muted-dark)}
@media (max-width:860px){.section-head.split{grid-template-columns:1fr}}

/* chips + cards */
.filters{display:flex;flex-wrap:wrap;gap:12px 36px;margin-bottom:28px;align-items:center}
.chips{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.chips-label{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.02em;margin-right:4px}
.empty{margin:0 0 20px;padding:18px 22px;border-radius:14px;background:#fff;border:1px dashed rgba(15,18,38,.25);color:var(--muted-dark)}
.empty a{color:var(--teal);font-weight:700;text-decoration:underline}
.chip{font:inherit;font-weight:700;font-size:14px;padding:10px 18px;border-radius:999px;border:2px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;transition:all .2s}
.chip:hover{background:rgba(15,18,38,.08)}
.chip.on{background:var(--ink);color:#fff}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.card{background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid rgba(15,18,38,.08);box-shadow:0 10px 30px rgba(15,18,38,.06);transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,opacity .3s}
.card:hover{box-shadow:0 30px 60px rgba(15,18,38,.14)}
.card.hide{display:none}
.card-art{background:linear-gradient(135deg,color-mix(in srgb,var(--c) 22%,#fff),color-mix(in srgb,var(--c) 6%,#fff));padding:18px 30px 0}
.card-art svg{width:100%;height:150px}
.card-art.photo{display:block;width:100%;padding:0;border:0;cursor:zoom-in;position:relative;aspect-ratio:4/3;overflow:hidden;background:#e8e2d8}
.card-art.photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.card:hover .card-art.photo img{transform:scale(1.04)}
.card-art.photo .count{position:absolute;right:12px;bottom:12px;background:rgba(11,14,31,.7);color:#fff;font-size:12px;font-weight:700;padding:6px 10px;border-radius:999px;backdrop-filter:blur(6px)}
.card-art.photo:focus-visible{outline:3px solid var(--lime);outline-offset:-3px}

/* photo strip */
.strip-section{padding-bottom:clamp(40px,6vw,80px)}
.strip-section .wrap{margin-bottom:28px}
.strip{display:flex;gap:14px;overflow-x:auto;padding:4px max(18px,calc((100vw - 1180px)/2)) 18px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.strip figure{flex:0 0 auto;width:min(360px,72vw);aspect-ratio:4/3;margin:0;border-radius:18px;overflow:hidden;position:relative;scroll-snap-align:start;cursor:zoom-in;background:#e8e2d8}
.strip figure:nth-child(3n+2){aspect-ratio:3/4;width:min(270px,54vw)}
.strip img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.strip figure:hover img{transform:scale(1.04)}
.strip figcaption{position:absolute;left:12px;bottom:12px;background:rgba(11,14,31,.72);color:#fff;font-size:12px;font-weight:600;padding:6px 10px;border-radius:999px;backdrop-filter:blur(6px)}

/* lightbox */
.lightbox[hidden]{display:none}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(7,9,21,.94);display:grid;grid-template-columns:64px 1fr 64px;align-items:center;justify-items:center;padding:16px}
.lightbox figure{margin:0;max-width:min(1100px,100%);max-height:100%;display:flex;flex-direction:column;align-items:center;gap:12px}
.lightbox img{max-width:100%;max-height:78vh;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.6);object-fit:contain}
.lightbox figcaption{color:#fff;font-size:14px;display:flex;gap:16px;opacity:.85}
.lightbox button{font:inherit;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:50%;width:48px;height:48px;font-size:28px;line-height:1;cursor:pointer;display:grid;place-items:center}
.lightbox button:hover{background:rgba(255,255,255,.22)}
.lb-close{position:absolute;top:16px;right:16px}
@media (max-width:700px){.lightbox{grid-template-columns:1fr;grid-template-rows:1fr auto}.lb-prev,.lb-next{position:absolute;bottom:16px}.lb-prev{left:16px}.lb-next{right:16px}.lightbox img{max-height:70vh}}
.card-body{padding:22px 24px 26px}
.card-body h3{font-size:26px;margin:2px 0 4px}
.card-body .addr{font-size:13px;font-weight:600;color:var(--teal);margin:0 0 10px}
.card-body p{margin:0;color:var(--muted-dark)}
.card-body .tags{margin-bottom:18px}
.card-body .eyebrow{margin-bottom:8px}

/* bento */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(190px,auto);gap:16px}
.tile{background:var(--ink-2);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;border:1px solid rgba(255,255,255,.06);position:relative;overflow:hidden;transition:transform .3s}
.tile:hover{transform:translateY(-4px)}
.tile p{margin:0;color:var(--muted);font-size:15px}
.tile h3{font-size:26px}
.tile.big{grid-column:span 2;grid-row:span 2}
.tile.wide{grid-column:span 2}
.tile.lime{background:var(--lime);color:var(--ink)}.tile.lime p{color:var(--muted-dark)}
.tile.coral{background:var(--coral);color:var(--ink)}.tile.coral p{color:rgba(15,18,38,.75)}
.tile.sky{background:var(--sky);color:var(--ink)}.tile.sky p{color:rgba(15,18,38,.75)}
.stat{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.stat .num{font-family:var(--display);font-weight:800;font-size:clamp(56px,7vw,120px);line-height:.9;letter-spacing:-.04em}
.tile.big .num{font-size:clamp(90px,12vw,200px)}
.stat .unit{font-weight:700;font-size:18px}
.tile.sticker{background:var(--sun);color:var(--ink);align-items:center;justify-content:center;font-family:var(--display);font-weight:800}
.rotating{width:150px;height:150px;animation:spin 14s linear infinite}
.rotating circle,.rotating text:last-child{animation:unspin 14s linear infinite;transform-origin:80px 80px}
@keyframes unspin{to{transform:rotate(-360deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:900px){.bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(150px,auto)}.tile.big{grid-column:span 2;min-height:300px}.tile.wide{grid-column:span 2}.tile{padding:22px}.stat .num{font-size:clamp(44px,14vw,80px)}.tile.big .num{font-size:clamp(80px,26vw,140px)}}

/* services */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc{background:#fff;border-radius:var(--radius);padding:30px 28px;border:1px solid rgba(15,18,38,.08);transition:transform .3s,box-shadow .3s}
.svc:hover{transform:translateY(-6px);box-shadow:0 30px 60px rgba(15,18,38,.12)}
.svc-icon{width:64px;height:64px;border-radius:18px;background:color-mix(in srgb,var(--c) 14%,#fff);color:var(--c);display:grid;place-items:center;margin-bottom:22px}
.svc-icon svg{width:38px;height:38px}
.svc h3{font-size:24px;margin-bottom:10px}
.svc p{margin:0;color:var(--muted-dark)}
@media (max-width:860px){.services{grid-template-columns:1fr}}

/* family */
.family{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fam{background:var(--paper);color:var(--ink);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;gap:12px}
.fam img{width:100%;max-width:300px}
.fam h3{font-size:22px;margin-top:6px}
.fam .slogan{font-family:var(--display);font-weight:700;font-size:20px;margin:10px 0 0;letter-spacing:-.01em}
.fam p{margin:0;color:var(--muted-dark)}
@media (max-width:860px){.family{grid-template-columns:1fr}}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.form{background:#fff;border-radius:var(--radius);padding:28px;display:grid;grid-template-columns:1fr 1fr;gap:14px;box-shadow:var(--shadow)}
.form label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-dark)}
.form input,.form select,.form textarea{font:inherit;font-size:16px;font-weight:500;text-transform:none;letter-spacing:0;padding:13px 14px;border-radius:12px;border:2px solid rgba(15,18,38,.12);background:var(--paper);color:var(--ink);outline:none;transition:border .2s}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--ink)}
.form .full{grid-column:1/-1}
.form .tiny{grid-column:1/-1;margin:0;font-size:13px;color:var(--muted-dark);text-align:center}
.form .btn{justify-content:center}
@media (max-width:860px){.contact{grid-template-columns:1fr}.form{grid-template-columns:1fr}}

/* footer */
.footer{background:#070915;padding:40px 0;color:var(--muted);font-size:14px}
.foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot p{margin:0;max-width:60ch;line-height:1.6}.foot small{opacity:.6;font-size:12px}
.foot-brands{display:flex;gap:10px}
.foot-brands img{border-radius:12px}
.totop{color:var(--lime);font-weight:700}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}