/* ============================================================
   CITY PAGE — reusable template (Amsterdam first)
   relies on styles.css for variables, nav, footer, buttons,
   eyebrow, scribble, faq, vstories, section shells.
   ============================================================ */

/* ---------- nav: transparent over hero, solid on scroll ---------- */
body.city-page .nav{ position:fixed; left:0; right:0; top:0; z-index:1100; background:transparent; box-shadow:none; backdrop-filter:none; transition:background .25s ease, box-shadow .25s ease; }
body.city-page .nav .nav-links a{ color:#fff; }
body.city-page .nav .nav-burger{ color:#fff; }
body.city-page .nav.solid{ background:rgba(255,246,240,.92); backdrop-filter:blur(12px); box-shadow:0 1px 0 rgba(40,20,10,.08), 0 8px 30px -18px rgba(40,20,10,.5); }
body.city-page .nav.solid .nav-links a{ color:var(--ink); }
body.city-page .nav.solid .nav-burger{ color:var(--ink); }
body.city-page .nav .nav-socials::after{ background:rgba(255,255,255,.4); }
body.city-page .nav .nav-socials a{ color:rgba(255,255,255,.85); }
body.city-page .nav .nav-socials a:hover{ color:#fff; opacity:1; }
body.city-page .nav.solid .nav-cta .nav-socials::after{ background:var(--line); }
body.city-page .nav.solid .nav-cta .nav-socials a{ color:#a89a90 !important; }
body.city-page .nav.solid .nav-cta .nav-socials a:hover{ color:var(--orange) !important; opacity:1; }
/* open burger menu sits on a cream sheet, so force ink items even on the city page */
body.city-page .nav .nav-links.open a{ color:var(--ink); }
body.city-page .nav .nav-links.open .nav-m-socials a:hover{ color:var(--orange); }
.nav-logo .logo-light{ display:none; }
body.city-page .nav .logo-dark{ display:none; }
body.city-page .nav .logo-light{ display:block; }
body.city-page .nav.solid .logo-dark{ display:block; }
body.city-page .nav.solid .logo-light{ display:none; }

/* ---------- HERO ---------- */
.city-hero{ position:relative; min-height:min(78vh,720px); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.city-hero-media{ position:absolute; inset:0; z-index:0; background:#1a1310; }
.city-hero-media image-slot{ width:100%; height:100%; display:block; }
.city-hero-media .city-hero-photo{ width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition:opacity .55s ease; }
.city-hero-media .city-hero-photo.loaded{ opacity:1; }
.city-hero::after{ content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(10,7,5,.30) 0%, rgba(10,7,5,.06) 24%, rgba(10,7,5,.10) 64%, rgba(10,7,5,.18) 100%),
    radial-gradient(ellipse 70% 52% at 50% 50%, rgba(5,3,2,.40), transparent 70%); }
.city-hero-inner{ position:relative; z-index:2; text-align:center; color:#fff; padding:128px 24px 118px; max-width:1100px; }
.city-hero h1{ font-size:inherit; max-width:none; margin:0; line-height:1; letter-spacing:0; text-shadow:none;
  display:flex; flex-direction:column; align-items:center; gap:14px; }

/* eyebrow pill + giant city wordmark with hand-drawn orange brush underline */
.city-hero h1 .hero-eyebrow{ display:inline-block; font-family:'Hanken Grotesk',system-ui,sans-serif; font-weight:700;
  text-transform:uppercase; letter-spacing:.13em; font-size:clamp(10.5px,1.05vw,13.5px); white-space:nowrap; color:rgba(255,255,255,.94);
  padding:8px 18px; border-radius:999px; background:rgba(20,12,8,.34); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); text-shadow:0 1px 10px rgba(0,0,0,.45); max-width:none; line-height:1.2; }
.city-hero h1 .hero-city{ position:relative; display:inline-block; font-family:'Hanken Grotesk',system-ui,sans-serif; font-weight:900;
  color:#fff; font-size:clamp(48px,8.5vw,112px); line-height:.92; letter-spacing:-.04em; padding-bottom:.14em;
  text-shadow:0 4px 34px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4); }
.city-hero h1 .hero-underline{ position:absolute; left:0; right:0; bottom:.01em; width:100%; height:.2em; overflow:visible; z-index:-1;
  filter:drop-shadow(0 4px 12px rgba(255,75,41,.45)); }
.city-hero h1 .hero-underline path{ stroke:var(--orange); }

.city-hero .hero-meta{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:26px; flex-wrap:wrap; }
.city-hero .country{ text-transform:uppercase; letter-spacing:.14em; font-weight:700; font-size:clamp(12px,1.25vw,15px);
  opacity:1; color:rgba(255,255,255,.92); text-shadow:0 1px 12px rgba(0,0,0,.5); }
.city-hero .meta-dot{ width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.6; }

/* hero rating — real star image */
.rating{ display:flex; align-items:center; }
.rating-stars{ height:21px; width:auto; display:block; filter:drop-shadow(0 2px 7px rgba(0,0,0,.5)); }

@media (max-width:560px){
  .city-hero h1 .hero-eyebrow{ letter-spacing:.1em; font-size:10px; padding:7px 15px; }
  .city-hero h1 .hero-city{ font-size:clamp(38px,12vw,60px); }
}

/* map marker — fixed pulsing dot for the highlighted city */
.city-dot{ position:relative; }
.city-dot .dot{ position:absolute; left:50%; top:50%; width:15px; height:15px; margin:-7.5px 0 0 -7.5px;
  background:var(--orange); border:3px solid #fff; border-radius:50%; box-shadow:0 2px 7px rgba(0,0,0,.45); }
.city-dot .pulse{ position:absolute; left:50%; top:50%; width:15px; height:15px; margin:-7.5px 0 0 -7.5px;
  border-radius:50%; background:var(--orange); opacity:.5; animation:cityPulse 2.1s ease-out infinite; }
@keyframes cityPulse{ 0%{ transform:scale(1); opacity:.5; } 100%{ transform:scale(4.2); opacity:0; } }

/* soft grounded fade — photo dissolves into the cream page, no hard edge */
.city-hero::before{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:230px; z-index:2; pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(255,246,240,0) 0%,
    rgba(255,246,240,.04) 28%,
    rgba(255,246,240,.16) 48%,
    rgba(255,246,240,.42) 68%,
    rgba(255,246,240,.74) 85%,
    var(--paper) 100%); }

/* ---------- COMMUNITIES ---------- */
.communities-head{ text-align:center; max-width:840px; margin:0 auto; }
.communities-head h2{ font-size:clamp(23px,2.9vw,34px); line-height:1.08; }
/* keep all city-page section headings tidy, not oversized */
body.city-page .section-head h2{ font-size:clamp(26px,3.2vw,40px); }
.communities-head .lead{ margin:18px auto 0; max-width:64ch; }

.comm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:24px; align-items:start; }

/* ---------- welcome festival package: feature card ---------- */
.pkg-feature{ width:100%; margin-top:34px; display:grid; grid-template-columns:300px 1fr; gap:0; align-items:stretch;
  background:#fff; border:2.5px solid var(--ink); border-radius:24px; overflow:hidden; box-shadow:7px 7px 0 var(--ink);
  text-align:left; cursor:pointer; font:inherit; color:var(--ink); padding:0; transition:transform .15s, box-shadow .15s; }
.pkg-feature:hover{ transform:translate(-3px,-3px); box-shadow:11px 11px 0 var(--ink); }
.pkg-feature:focus-visible{ outline:3px solid var(--orange); outline-offset:3px; }
.pkg-thumb{ position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px;
  padding:30px 22px; color:#fff; overflow:hidden;
  background:radial-gradient(circle at 72% 18%, #FF7A52 0%, transparent 55%), linear-gradient(150deg, #FF4B29 0%, #E33A1C 60%, #B72A12 100%); }
.pkg-kicker{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; opacity:.9; }
.pkg-thumb-title{ font-weight:900; font-size:30px; line-height:.98; letter-spacing:-.01em; text-align:center; text-shadow:0 3px 14px rgba(0,0,0,.25); }
.pkg-spark{ position:absolute; font-size:22px; opacity:.85; }
.pkg-spark-a{ top:16px; left:18px; }
.pkg-spark-b{ bottom:16px; right:20px; font-size:15px; }
.pkg-info{ display:flex; flex-direction:column; align-items:flex-start; gap:9px; padding:28px 30px; }
.pkg-eyebrow{ font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--orange); }
.pkg-h{ font-weight:900; font-size:24px; line-height:1.1; letter-spacing:-.01em; }
.pkg-sub{ font-size:15.5px; line-height:1.55; color:#5a4d45; font-weight:500; max-width:54ch; }
.pkg-link{ display:inline-flex; align-items:center; gap:8px; margin-top:5px; font-weight:800; font-size:15.5px; color:var(--ink);
  border-bottom:2.5px solid var(--orange); padding-bottom:2px; }
.pkg-arrow{ transition:transform .15s; }
.pkg-feature:hover .pkg-arrow{ transform:translateX(4px); }

/* ---------- package modal ---------- */
.pkg-modal{ position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; padding:24px; }
.pkg-modal[hidden]{ display:none; }
.pkg-modal-backdrop{ position:absolute; inset:0; background:rgba(16,10,7,.6); backdrop-filter:blur(3px); animation:pkgFade .2s ease; }
.pkg-modal-card{ position:relative; z-index:1; width:min(520px,100%); max-height:92vh; overflow:auto; background:#fff;
  border:2.5px solid var(--ink); border-radius:26px; box-shadow:10px 10px 0 var(--ink); animation:pkgPop .22s cubic-bezier(.2,.9,.3,1.2); }
@keyframes pkgFade{ from{opacity:0} to{opacity:1} }
@keyframes pkgPop{ from{opacity:0; transform:translateY(14px) scale(.97)} to{opacity:1; transform:none} }
.pkg-modal-x{ position:absolute; top:14px; right:14px; z-index:2; width:38px; height:38px; display:grid; place-items:center;
  border:none; border-radius:50%; background:rgba(255,255,255,.9); color:var(--ink); cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.18); transition:background .14s; }
.pkg-modal-x:hover{ background:#fff; }
.pkg-modal-hero{ aspect-ratio:16/9; background:linear-gradient(150deg,#FF4B29,#B72A12); }
.pkg-modal-hero image-slot{ width:100%; height:100%; display:block; }
.pkg-modal-body{ padding:30px 32px 34px; }
.pkg-modal-body h3{ margin:0 0 6px; font-size:27px; font-weight:900; letter-spacing:-.01em; }
.pkg-modal-intro{ margin:0 0 20px; font-size:16px; line-height:1.5; color:#7a6c62; font-weight:600; }
.pkg-points{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.pkg-points li{ display:flex; align-items:flex-start; gap:14px; padding:14px 16px; background:var(--paper-2);
  border:1.5px solid var(--line); border-radius:15px; transition:transform .14s, border-color .14s, box-shadow .14s; }
.pkg-points li:hover{ transform:translateX(3px); border-color:var(--orange); box-shadow:-3px 0 0 var(--orange); }
.pkg-pt-ico{ flex:none; width:38px; height:38px; display:grid; place-items:center; font-size:20px; border-radius:11px;
  background:#fff; border:1.5px solid var(--line); }
.pkg-pt-ico img{ width:24px; height:24px; display:block; object-fit:contain; }
.pkg-pt-text{ display:flex; flex-direction:column; gap:2px; font-size:14px; line-height:1.45; color:#6a5d54; }
.pkg-pt-text strong{ font-size:15.5px; font-weight:800; color:var(--ink); }
.pkg-modal-note{ margin:18px 0 0; font-size:13.5px; font-weight:700; color:var(--orange); text-align:center; }
.pkg-modal-cta{ display:block; width:100%; margin-top:14px; text-align:center; background:var(--orange); color:#fff;
  font-weight:800; font-size:18px; text-decoration:none; padding:17px 24px; border-radius:14px; box-shadow:0 4px 0 var(--orange-deep); transition:transform .12s, box-shadow .12s; }
.pkg-modal-cta:hover{ transform:translateY(-2px); box-shadow:0 6px 0 var(--orange-deep); }
.pkg-modal-cta:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--orange-deep); }
body.pkg-open{ overflow:hidden; }
.comm-col{ display:flex; flex-direction:column; gap:16px; }
.comm-card{ display:flex; align-items:center; gap:14px; background:#fff; border:2px solid var(--ink);
  border-radius:18px; padding:20px 22px; box-shadow:5px 5px 0 var(--ink); text-decoration:none; color:var(--ink);
  transition:transform .14s, box-shadow .14s; }
.comm-card:hover{ transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--ink); }
.comm-ico{ width:40px; height:40px; flex:none; display:grid; place-items:center; border-radius:11px; }
.comm-ico svg{ display:block; }
.comm-ico img{ width:40px; height:40px; display:block; }
.comm-card .ct{ font-weight:800; font-size:18px; line-height:1.25; }
.comm-card.wa{ flex-direction:column; align-items:flex-start; gap:10px; background:linear-gradient(160deg, #064f04 0%, #0c9608 55%, #12c80b 100%); border-color:#0a5a06; color:#fff; box-shadow:5px 5px 0 #062018; }
.comm-card.wa:hover{ box-shadow:8px 8px 0 #062018; }
.comm-card.wa .top{ display:flex; align-items:center; gap:14px; }
.comm-card.wa .top img{ width:46px; height:46px; flex:none; display:block; padding:4px; background:#fff; border-radius:13px; box-shadow:0 3px 10px rgba(0,0,0,.18); }
.comm-card.wa .desc{ color:#cfe9dd; font-size:15px; line-height:1.5; font-weight:500; }
.comm-tag{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:#9a8a80; margin-bottom:2px; }

/* ---------- ABOUT ---------- */
.about-city{ display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center; }
.about-city .about-text .eyebrow{ margin-bottom:14px; }
.about-city h2{ font-size:clamp(25px,3.2vw,38px); margin:0; }
.about-city .body{ margin:18px 0 0; font-size:18px; line-height:1.55; color:#3a2f29; font-weight:600; }
.about-points{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; }
.about-points li{ display:flex; align-items:flex-start; gap:14px; }
.about-points .ap-ico{ flex:none; width:42px; height:42px; display:grid; place-items:center; font-size:21px; border-radius:12px;
  background:#fff; border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); }
.about-points .ap-text{ display:block; font-size:15.5px; line-height:1.5; color:#5a4d45; padding-top:1px; }
.about-points .ap-text strong{ display:block; font-size:17px; font-weight:800; color:var(--ink); margin-bottom:2px; letter-spacing:-.01em; }
.about-facts{ display:flex; flex-direction:column; gap:12px; }
.afact{ background:#fff; border:2px solid var(--ink); border-radius:16px; padding:14px 20px; box-shadow:4px 4px 0 var(--ink);
  display:grid; grid-template-columns:46px 1fr; grid-template-rows:auto auto; column-gap:15px; align-items:center;
  transition:transform .14s, box-shadow .14s; }
.afact:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.afact .ae{ grid-row:1 / span 2; width:46px; height:46px; display:grid; place-items:center; font-size:22px; line-height:1;
  border-radius:12px; background:var(--paper-2); border:2px solid var(--ink); }
.afact .al{ grid-column:2; align-self:end; font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#9a8a80; line-height:1.2; }
.afact .av{ grid-column:2; align-self:start; font-size:17px; font-weight:800; color:var(--orange); line-height:1.2; margin-top:3px; }

/* ---------- TABS ---------- */
.tabs{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:8px 0 30px; }
.tab{ font-family:inherit; font-weight:800; font-size:16px; padding:12px 24px; border-radius:100px;
  border:2px solid var(--ink); background:#fff; color:var(--ink); cursor:pointer; transition:all .14s; }
.tab:hover{ transform:translateY(-1px); }
.tab.on{ background:var(--ink); color:#fff; }

.tab-panel{ display:none; }
.tab-panel.on{ display:block; animation:tabIn .3s ease; }
@keyframes tabIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }

/* details: facts grid + map side by side */
.details-split{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch; }

/* number-forward dashboard: big headline stat tiles up top, calm prose stack below */
.detail-list{ background:transparent; border:0; box-shadow:none; padding:0; display:flex; flex-direction:column; gap:14px; }
.cd-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.cd-stat{ position:relative; background:#fff; border:2px solid var(--ink); border-radius:18px; box-shadow:5px 5px 0 var(--ink);
  padding:16px 14px 15px; display:flex; flex-direction:column; align-items:flex-start; overflow:hidden;
  transition:transform .16s ease, box-shadow .16s ease; }
.cd-stat:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink); }
.cd-ghost{ position:absolute; right:-8px; top:-10px; font-size:48px; line-height:1; opacity:.16; transform:rotate(8deg); pointer-events:none; user-select:none; }
.cd-textwrap{ display:flex; flex-direction:column; min-width:0; }
.cd-num{ font-weight:900; font-size:clamp(30px,4.2vw,42px); line-height:.92; letter-spacing:-.045em; color:var(--orange); font-variant-numeric:tabular-nums; }
.cd-cap{ margin-top:9px; font-size:10.5px; font-weight:800; letter-spacing:.085em; text-transform:uppercase; color:#9a8a80; line-height:1.25; }
.cd-rows{ background:var(--paper-2); border:2px solid var(--ink); border-radius:18px; box-shadow:5px 5px 0 var(--ink); padding:6px 16px; }
.cd-row{ display:grid; grid-template-columns:38px 1fr; column-gap:13px; align-items:start; padding:13px 0; border-bottom:1.5px solid var(--line); }
.cd-row:last-child{ border-bottom:0; }
.cd-key{ flex:none; width:38px; height:38px; border-radius:11px; background:#fff; border:2px solid var(--ink); box-shadow:2px 2px 0 var(--ink); display:grid; place-items:center; font-size:18px; line-height:1; }
.cd-body{ min-width:0; }
.cd-label{ display:block; font-size:10.5px; font-weight:800; letter-spacing:.085em; text-transform:uppercase; color:#9a8a80; line-height:1.25; }
.cd-value{ display:block; margin-top:4px; font-size:15px; font-weight:600; line-height:1.42; color:var(--ink-2); overflow-wrap:break-word; word-break:break-word; }
.cd-value.cd-short{ font-weight:800; color:var(--ink); font-size:16px; }
/* phones: stat tiles stack to one column and lay out as a row so they never look empty */
@media(max-width:560px){
  .cd-stats{ grid-template-columns:1fr; }
  .cd-stat{ flex-direction:row; align-items:center; gap:14px; padding:14px 16px; }
  .cd-num{ font-size:36px; }
  .cd-cap{ margin-top:4px; }
  .cd-ghost{ font-size:40px; right:14px; top:50%; transform:translateY(-50%) rotate(8deg); }
}

/* map */
.city-map-card{ border:2px solid var(--ink); border-radius:22px; overflow:hidden; box-shadow:6px 6px 0 var(--ink); position:relative; min-height:380px; background:#0c1116; }
#city-map{ position:absolute; inset:0; width:100%; height:100%; }

/* costs */
/* costs: same banded-row style as City details, with the price highlighted in an orange pill */
.cost-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
.cost-list{ background:#fff; border:2px solid var(--ink); border-radius:22px; box-shadow:6px 6px 0 var(--ink);
  padding:16px; display:flex; flex-direction:column; gap:12px; }
.cost-item{ display:flex; align-items:center; gap:13px; background:var(--paper); border:2px solid var(--ink);
  border-radius:16px; padding:12px 15px; box-shadow:3px 3px 0 var(--ink); }
.cost-chip{ flex:none; width:44px; height:44px; display:grid; place-items:center; font-size:21px; line-height:1;
  border-radius:12px; background:#fff; border:2px solid var(--ink); }
.cost-stack{ display:flex; flex-direction:column; align-items:flex-start; gap:5px; min-width:0; }
.cost-label{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#9a8a80; line-height:1.25; }
.cost-price{ align-self:flex-start; font-weight:800; font-size:15px; color:var(--orange-deep);
  background:var(--orange-soft); border:1.5px solid var(--ink); border-radius:999px; padding:3px 12px;
  line-height:1.3; font-variant-numeric:tabular-nums; }
.cost-per{ color:var(--orange-deep); opacity:.7; font-weight:600; font-size:.86em; white-space:nowrap; }

/* place pins on the map */
.place-pin{ background:none; border:none; }
.place-pin .pin-emoji{ display:flex; align-items:center; justify-content:center; width:34px; height:34px;
  background:#fff; border:2px solid var(--ink); border-radius:50%; font-size:17px; line-height:1;
  box-shadow:0 3px 8px rgba(0,0,0,.32); cursor:pointer; transition:transform .12s; }
.place-pin .pin-emoji:hover{ transform:scale(1.14); }
.leaflet-popup.city-pop .leaflet-popup-content-wrapper{ background:var(--ink); color:#fff; border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.4); }
.leaflet-popup.city-pop .leaflet-popup-content{ margin:12px 16px; }
.leaflet-popup.city-pop .leaflet-popup-tip{ background:var(--ink); }
.city-pop .pop-cat{ display:block; font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--yellow); }
.city-pop .pop-name{ display:block; font-size:16px; font-weight:800; margin-top:2px; }

/* ---------- HOUSING ---------- */
.housing-intro{ max-width:74ch; margin:0 auto 32px; text-align:center; font-size:17.5px; line-height:1.7; color:#4a3f38; }
.housing-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.hstat{ display:flex; gap:14px; align-items:flex-start; background:#fff; border:2px solid var(--ink); border-radius:18px;
  padding:20px 22px; box-shadow:4px 4px 0 var(--ink); }
.hstat .he{ font-size:26px; line-height:1; flex:none; }
.hstat .hbody{ display:flex; flex-direction:column; gap:2px; }
.hstat .hl{ font-size:13px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:#9a8a80; }
.hstat .hv{ font-size:19px; font-weight:800; color:var(--orange); line-height:1.2; }
.hstat .hsub{ font-size:13.5px; color:#6a5d54; margin-top:3px; line-height:1.4; }
.housing-notes{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:24px; }
.hnote{ display:flex; gap:14px; align-items:flex-start; background:var(--paper-2); border:1.5px solid var(--line); border-radius:16px; padding:18px 20px; }
.hnote .he{ font-size:22px; flex:none; }
.hnote h5{ margin:0 0 4px; font-size:16px; }
.hnote p{ margin:0; font-size:14.5px; line-height:1.55; color:#5a4d45; }

/* socials.homes promo */
.socials-promo{ position:relative; margin-top:28px; display:grid; grid-template-columns:1.15fr .85fr; gap:0; align-items:stretch;
  background:#0c3b25; border-radius:24px; overflow:hidden; color:#fff;
  background-image:radial-gradient(circle at 70% 16%, rgba(31,168,92,.5), transparent 52%); }
.sp-left{ padding:42px 44px; }
.sp-right{ position:relative; min-height:340px; }
.sp-right image-slot{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.sp-brand{ display:flex; align-items:center; gap:11px; margin-bottom:18px; }
.sp-brand img{ width:38px; height:38px; border-radius:9px; display:block; }
.sp-brand span{ font-weight:800; font-size:18px; letter-spacing:-.01em; }
.socials-promo h3{ font-size:clamp(26px,3.4vw,40px); line-height:1.05; margin:0 0 12px; max-width:18ch; }
.socials-promo p{ font-size:16px; line-height:1.6; color:#cfe9dd; max-width:60ch; margin:0 0 18px; }
.sp-list{ list-style:none; padding:0; margin:0 0 26px; display:flex; flex-direction:column; gap:11px; }
.sp-list li{ position:relative; padding-left:30px; font-weight:600; font-size:15.5px; }
.sp-list li::before{ content:"\2713"; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:21px; height:21px; background:#1FA85C; color:#fff; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:900; }
.sp-cta{ display:inline-block; background:#1FA85C; color:#fff; font-weight:800; font-size:17px; text-decoration:none;
  padding:15px 34px; border-radius:100px; transition:transform .14s, background .14s; }
.sp-cta:hover{ transform:translateY(-2px); background:#18A957; }
@media (prefers-reduced-motion:no-preference){
  .sp-cta{ animation:spNudge 4.4s ease-in-out infinite; }
  .sp-cta:hover{ animation:none; }
}
/* pulse briefly, then hold still for most of the loop (the "pause") */
@keyframes spNudge{
  0%, 62%, 100%{ transform:translateY(0) scale(1); }
  70%{ transform:translateY(-3px) scale(1.045); }
  78%{ transform:translateY(0) scale(.99); }
  85%{ transform:translateY(-1px) scale(1.01); }
  92%{ transform:translateY(0) scale(1); }
}

/* student interest */
.interest-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.interest-card{ background:#fff; border:2px solid var(--ink); border-radius:20px; padding:26px 24px; box-shadow:5px 5px 0 var(--ink); }
.interest-card .em{ font-size:30px; display:block; margin-bottom:12px; }
.interest-card h4{ font-size:19px; margin:0 0 8px; }
.interest-card p{ color:#5a4d45; font-size:15px; line-height:1.55; margin:0; }

/* universities */
.uni-list{ background:#fff; border:2px solid var(--ink); border-radius:22px; box-shadow:6px 6px 0 var(--ink);
  padding:14px 28px; column-count:2; column-gap:44px; }
.uni-list .u{ break-inside:avoid; padding:14px 0; border-bottom:1.5px solid var(--line); font-weight:600; font-size:16px; line-height:1.4;
  display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--ink); text-decoration:none; transition:color .14s; }
a.u:hover{ color:var(--orange); }
.uni-list .u-arrow{ flex:none; font-weight:800; color:#bdb0a6; transition:color .14s, transform .14s; }
a.u:hover .u-arrow{ color:var(--orange); transform:translate(2px,-2px); }

/* ---------- communities: secondary lead + WA card cta ---------- */
.communities-head .comm-lead-2{ font-size:15.5px; margin-top:10px; color:#7a6c62; }
.communities-head .comm-lead-2 a{ color:var(--orange); font-weight:800; text-decoration:none; border-bottom:2px solid currentColor; }
.comm-card.wa:hover .pkg-arrow{ transform:translateX(4px); }

/* ---------- communities: v4 labelled-columns layout (Package + Facebook groups + WhatsApp) ---------- */
.pkg-wrap{ position:relative; width:100%; margin-top:34px; }
.pkg-wrap .pkg-feature{ margin-top:0; }
.pkg-badge{ position:absolute; top:-15px; right:28px; z-index:5;
  font-weight:800; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:#fff;
  background:var(--orange); border:2px solid var(--ink); border-radius:999px; padding:6px 14px; box-shadow:3px 3px 0 var(--ink); }

.comm-cols{ display:grid; grid-template-columns:1fr 0.92fr; gap:26px; margin-top:30px; align-items:stretch; }
.comm-side{ display:flex; flex-direction:column; }
.comm-side-head{ margin-bottom:16px; }
.comm-side-eyebrow{ display:inline-block; font-weight:800; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); opacity:.55; }
.comm-side-eyebrow-pri{ opacity:1; color:#fff; background:var(--orange); border:2px solid var(--ink); border-radius:999px; padding:3px 11px; box-shadow:2px 2px 0 var(--ink); }
.comm-side-title{ margin:8px 0 0; font-size:24px; font-weight:900; line-height:1.1; letter-spacing:var(--h1-tracking); }
.comm-side-wa .comm-side-title{ display:inline-block; }
.comm-side-note{ margin:9px 0 0; font-size:14px; line-height:1.45; opacity:.7; max-width:42ch; min-height:2.9em; }

.comm-side-list{ display:flex; flex-direction:column; gap:14px; flex:1; }
.comm-side-fb .comm-card{ box-shadow:4px 4px 0 var(--ink); }
.comm-side-fb .comm-card:hover{ box-shadow:7px 7px 0 var(--ink); }
.comm-side-fb .comm-card .ct{ font-size:16px; }

.comm-wa-mount{ display:flex; flex-direction:column; flex:1; }
.comm-side-wa .comm-card.wa{ flex:1; height:100%; gap:14px; padding:24px 24px 22px; border-width:2px; box-shadow:8px 8px 0 #062018; }
.comm-side-wa .comm-card.wa:hover{ transform:translate(-3px,-3px); box-shadow:12px 12px 0 #12c80b; }
.comm-side-wa .comm-card.wa .top{ display:flex; align-items:center; gap:13px; }
.comm-side-wa .comm-card.wa .top img{ width:42px; height:42px; flex:none; }
.comm-side-wa .comm-card.wa .ct{ font-size:20px; line-height:1.2; }
.comm-wa-tag{ align-self:flex-start; font-weight:800; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#0a3a2b; background:#fff; border-radius:999px; padding:4px 11px; }
.comm-side-wa .comm-card.wa .desc{ margin:2px 0 0; font-size:15px; line-height:1.5; opacity:.92; }
.comm-wa-points{ list-style:none; margin:2px 0 auto; padding:0; display:flex; flex-direction:column; gap:9px; }
.comm-wa-points li{ position:relative; padding-left:26px; font-size:14.5px; line-height:1.35; font-weight:600; }
.comm-wa-points li::before{ content:"✓"; position:absolute; left:0; top:-1px; width:18px; height:18px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:900; color:#0a3a2b; background:#fff; border-radius:50%; }
.comm-wa-cta{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start; margin-top:18px; font-weight:800; font-size:16px; color:#0a3a2b; background:#fff; border-radius:12px; padding:11px 18px; box-shadow:3px 3px 0 rgba(0,0,0,.35); }
.comm-side-wa .comm-card.wa:hover .comm-wa-cta .pkg-arrow{ transform:translateX(4px); }
.comm-wa-cta .pkg-arrow{ transition:transform .15s ease; }

/* "Recommended" badge attached to the green WhatsApp card (echoes the package "Most popular" badge) */
.comm-side-wa .comm-card.wa{ position:relative; overflow:visible; }
.comm-wa-badge{ position:absolute; top:-14px; right:18px; z-index:4; display:inline-flex; align-items:center; gap:6px;
  font-weight:800; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:#fff;
  background:var(--orange); border:2px solid var(--ink); border-radius:999px; padding:6px 13px;
  box-shadow:3px 3px 0 var(--ink); white-space:nowrap; pointer-events:none; }
@media (max-width:980px){
  .comm-wa-badge{ top:-12px; right:14px; font-size:11px; padding:5px 12px; box-shadow:2px 2px 0 var(--ink); }
}

/* ---------- socials promo: Welcome Festival discount ---------- */
.sp-sticker{ position:absolute; top:30px; right:-66px; z-index:4; transform:rotate(38deg); transform-origin:center;
  background:var(--yellow,#FFD84D); color:#0c3b25; font-weight:800; font-size:12px; letter-spacing:.13em;
  text-transform:uppercase; padding:9px 72px; text-align:center; box-shadow:0 8px 20px rgba(0,0,0,.3); }
.sp-deal{ position:absolute; bottom:22px; right:22px; z-index:4; width:96px; height:96px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; text-align:center;
  background:var(--orange); color:#fff; border:3px solid #fff; transform:rotate(-12deg);
  font-family:var(--font-display); font-weight:900; line-height:.9; box-shadow:0 8px 22px rgba(0,0,0,.32); }
.sp-deal{ font-size:30px; letter-spacing:-.02em; }
.sp-deal small{ font-size:15px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-top:2px; }

/* ---------- EVENTS ---------- */
.events-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.ev-card{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; background:#fff; border:2px solid var(--ink);
  border-radius:20px; padding:26px 24px 22px; box-shadow:6px 6px 0 var(--ink); text-decoration:none; color:var(--ink);
  transition:transform .15s, box-shadow .15s; }
.ev-card:hover{ transform:translate(-3px,-3px); box-shadow:10px 10px 0 var(--ink); }
.ev-ico{ width:54px; height:54px; display:grid; place-items:center; font-size:27px; line-height:1; border-radius:15px;
  background:var(--paper-2); border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); margin-bottom:4px; }
.ev-date{ font-size:12.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--orange); }
.ev-name{ font-family:var(--font-display); font-weight:900; font-size:22px; line-height:1.1; letter-spacing:-.01em; }
.ev-desc{ font-size:14.5px; line-height:1.55; color:#5a4d45; font-weight:500; }
.ev-link{ display:inline-flex; align-items:center; gap:8px; margin-top:6px; font-weight:800; font-size:15px; color:var(--ink);
  border-bottom:2.5px solid var(--orange); padding-bottom:2px; }
.ev-card:hover .pkg-arrow{ transform:translateX(4px); }

/* ---------- WhatsApp community modal ---------- */
.wa-modal .pkg-modal-card{ width:min(560px,100%); }
.wa-modal-hero{ position:relative; background:linear-gradient(160deg, #064f04 0%, #0c9608 55%, #12c80b 100%); overflow:hidden; display:flex; align-items:center; justify-content:center; padding:26px 0; }
.wa-modal-hero .wa-deco{ position:absolute; z-index:1; pointer-events:none; user-select:none; opacity:.95; text-shadow:0 2px 8px rgba(0,0,0,.25); animation:waFloat 4.2s ease-in-out infinite; }
.wa-modal-hero .wa-deco.d1{ left:6%; top:22%; font-size:24px; color:#eaffe6; animation-delay:0s; }
.wa-modal-hero .wa-deco.d2{ left:9%; top:52%; font-size:32px; animation-delay:.5s; }
.wa-modal-hero .wa-deco.d3{ left:4.5%; bottom:14%; font-size:27px; animation-delay:1s; }
.wa-modal-hero .wa-deco.d4{ right:7%; top:18%; font-size:21px; color:#eaffe6; animation-delay:.3s; }
.wa-modal-hero .wa-deco.d5{ right:8%; top:50%; font-size:32px; animation-delay:.8s; }
.wa-modal-hero .wa-deco.d6{ right:4.5%; bottom:17%; font-size:28px; animation-delay:1.3s; }
@keyframes waFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-7px) } }
@media (prefers-reduced-motion:reduce){ .wa-modal-hero .wa-deco{ animation:none; } }
.wa-modal-hero video-slot{ position:relative; inset:auto; height:min(440px,46vh); aspect-ratio:9/16; width:auto; display:block; border-radius:20px; overflow:hidden; box-shadow:0 14px 40px rgba(0,0,0,.5); }
.wa-modal-badge{ position:absolute; top:14px; left:14px; z-index:2; display:inline-flex; align-items:center; gap:8px;
  background:rgba(10,40,28,.78); color:#fff; font-weight:800; font-size:12.5px; letter-spacing:.02em; padding:7px 13px;
  border-radius:100px; backdrop-filter:blur(4px); }
.wa-modal-badge img{ width:18px; height:18px; display:block; }
.wa-shots{ display:flex; flex-direction:column; gap:12px; max-width:440px; margin:8px auto 22px; }
.wa-shots img{ width:100%; height:auto; display:block; border-radius:14px; border:1.5px solid var(--line); box-shadow:0 6px 18px rgba(40,20,10,.12); }
.wa-callout{ display:flex; align-items:flex-start; gap:14px; background:#eaf7f0; border:1.5px solid #bfe6d2;
  border-radius:16px; padding:16px 18px; }
.wa-callout-ico{ flex:none; width:40px; height:40px; display:grid; place-items:center; border-radius:11px; background:#fff; border:1.5px solid #bfe6d2; }
.wa-callout-ico img{ width:24px; height:24px; display:block; }
.wa-callout p{ margin:0; font-size:14.5px; line-height:1.5; color:#2a5240; font-weight:500; }
.wa-callout strong{ color:#0c3b25; font-weight:800; }
.wa-modal .pkg-modal-cta{ background:#12C80B; box-shadow:0 4px 0 #0a7a06; }
.wa-modal .pkg-modal-cta:hover{ box-shadow:0 6px 0 #0a7a06; }
.wa-modal .pkg-modal-cta:active{ box-shadow:0 1px 0 #0a7a06; }

/* ---------- responsive ---------- */
@media (max-width:980px){
  .comm-cols{ grid-template-columns:1fr; gap:24px; margin-top:24px; }
  /* mobile: WhatsApp community first (the primary card), Facebook groups below */
  .comm-side-wa{ order:-1; }
  .comm-side-title{ font-size:21px; }
  .comm-side-wa .comm-card.wa{ padding:20px; }
  .comm-side-wa .comm-card.wa .ct{ font-size:18px; }
  .pkg-badge{ right:16px; top:-13px; font-size:11px; padding:5px 12px; }
  .about-city{ grid-template-columns:1fr; gap:30px; }
  .details-split{ grid-template-columns:1fr; }
  .cost-grid{ grid-template-columns:1fr; }
  .housing-stats{ grid-template-columns:1fr 1fr; }
  .housing-notes{ grid-template-columns:1fr; }
  .interest-grid{ grid-template-columns:1fr 1fr; }
  .uni-list{ column-count:1; }
  .city-map-card{ min-height:340px; }
  .events-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:620px){
  .city-hero-inner{ padding:104px 20px 92px; }
  /* Welcome Festival package: stack vertically so the orange banner sits on top
     and the copy reads below, instead of the info column being shoved off-screen
     by the fixed 300px thumb. */
  .pkg-feature{ grid-template-columns:1fr; box-shadow:5px 5px 0 var(--ink); }
  .pkg-thumb{ padding:30px 22px; }
  .pkg-thumb-title{ font-size:28px; }
  .pkg-info{ padding:22px 22px 26px; }
  .tabs{ flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; gap:9px;
    margin-left:-20px; margin-right:-20px; padding:4px 20px 12px; scrollbar-width:none;
    -webkit-overflow-scrolling:touch; }
  .tabs::-webkit-scrollbar{ display:none; }
  .tab{ font-size:14px; padding:11px 18px; flex:none; white-space:nowrap; }
  .housing-stats{ grid-template-columns:1fr; }
  .interest-grid{ grid-template-columns:1fr; }
  .socials-promo{ padding:30px 24px; }
  .socials-promo{ grid-template-columns:1fr; }
  .sp-left{ padding:30px 24px; }
  .sp-right{ min-height:240px; }
  .sp-cta{ width:100%; text-align:center; }
  .events-grid{ grid-template-columns:1fr; }
}
@media (max-width:380px){
}


/* events that are not live yet: slight gray layer + "to be announced soon" */
.ev-card.ev-soon{ position:relative; pointer-events:none; }
.ev-card.ev-soon::after{ content:"To be announced soon"; position:absolute; inset:0; z-index:3; display:flex; align-items:flex-end; justify-content:center; text-align:center; padding:0 16px 22px; background:rgba(247,242,237,.62); color:#9a8675; font-weight:800; font-size:14px; letter-spacing:.01em; border-radius:inherit; -webkit-backdrop-filter:saturate(.6); backdrop-filter:saturate(.6); }